/* ELLI website. Cormorant Garamond display headlines (thin, high-contrast, elegant at large sizes), Manrope text,
   logo navy type on warm off-white, large-radius photography and quiet motion. No frameworks, no third-party scripts. */
:root {
  --navy: #0F2437;
  --navy-deep: #092042;
  --navy-brand: #0C364D;
  --steel: #92A5B8;
  --stone: #D1CDC6;
  --paper: #FAF8F5;
  --ink: #1C2C48;              /* navy text, from the logo */
  --charcoal: #13294B;         /* primary buttons: deep logo navy */
  --panel: #F2EFEA;
  --white: #FFFFFF;

  --bg: var(--white);
  --surface: #FFFFFF;
  --surface-warm: #F8F6F3;
  --text: var(--ink);
  --muted: #56647C;
  --line: #D9D9D9;
  --hairline: #A9B1BE;
  --heading: #13294B;
  --link: #1F4E79;
  --accent: #0C364D;           /* logo navy, for small accents only */
  --focus: #1F6FB2;
  --ok: #24643F;
  --warn: #8A4B12;

  --serif: "Cormorant Garamond", "Cormorant", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --radius: 22px;
  --radius-sm: 8px;
  --shadow: 0 1px 2px rgba(52, 46, 46, .05), 0 14px 36px rgba(52, 46, 46, .08);
  --max: 1240px;
  --ease: cubic-bezier(.22, .61, .2, 1);
  --gutter: 16px;
  color-scheme: light;
}
@media (min-width: 720px) { :root { --gutter: 32px; } }

/* Josh, 2026-10-15: the site is always light (white page, white header), even when the visitor’s device is in dark mode. */
:root[data-theme="dark"] {
  --bg: #1E1B1B; --surface: #2A2626; --surface-warm: #252121; --panel: #2A2626; --text: #ECE8E6; --muted: #B5ADAA;
  --line: #3A3434; --hairline: #6E6666; --heading: #F6F2F0; --link: #ECE8E6; --accent: #A9C1D6; --focus: #8CC4F5; --ok: #7FD1A0; --warn: #F0B37A;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 400 17px/1.7 var(--sans); overflow-x: hidden; letter-spacing: -.003em;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--link); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
[hidden] { display: none !important; }

.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--white); color: var(--navy); padding: 10px 16px; border-radius: var(--radius-sm); font-weight: 600; }
.skip-link:focus { top: 12px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

h1, h2, h3 { font-family: var(--serif); font-weight: 500; color: var(--heading); letter-spacing: -.012em; margin: 0 0 .45em; text-wrap: balance; font-feature-settings: "kern", "liga", "dlig" 0; }
h1 { font-size: clamp(2.8rem, 7vw, 5.2rem); line-height: 1.02; letter-spacing: -.02em; }
h2 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); line-height: 1.06; letter-spacing: -.016em; }
h3 { font-size: clamp(1.5rem, 2.4vw, 1.85rem); line-height: 1.15; font-weight: 600; }
h4 { font: 600 1rem/1.4 var(--sans); margin: 0 0 .4em; color: var(--heading); }
p { margin: 0 0 1em; }
.lede { font-size: clamp(1.1rem, 2vw, 1.3rem); color: var(--muted); max-width: 40em; }
.eyebrow { display: block; font: 600 .72rem/1.2 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--accent); margin-bottom: 18px; }
.rule { width: 56px; height: 1px; background: var(--hairline); opacity: .7; border: 0; margin: 22px 0 26px; }
.center .rule { margin-inline: auto; }
.fine { font-size: .88rem; color: var(--muted); }
.prose { max-width: 68ch; }
.prose h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin-top: 1.6em; }
.prose h3 { margin-top: 1.4em; }
.prose ul { padding-left: 1.2em; }
.prose li { margin: .35em 0; }

.wrap { max-width: var(--max); margin: 0 auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(64px, 10vw, 128px); }
.section.tight { padding-block: clamp(40px, 6vw, 72px); }
.section.warm { background: var(--panel); }
.section.ruled { padding-top: clamp(24px, 4vw, 48px); }
.section.ruled > .wrap::before { content: ""; display: block; border-top: 1px solid var(--hairline); margin-bottom: clamp(28px, 4vw, 44px); }
.section.dark, .site-footer, .band {
  --heading: var(--white); --text: #EEEAE8; --muted: #C4BCBA; --link: #F3EFED; --accent: #BFD2E2; --line: rgba(255,255,255,.14); --surface: rgba(255,255,255,.06);
  color: var(--text);
}
.section.dark { background: var(--charcoal); }
.center { text-align: center; }
.center .lede { margin-inline: auto; }
.grid { display: grid; gap: 20px; }
.grid > * { min-width: 0; }
@media (min-width: 720px) { .grid.two { grid-template-columns: repeat(2, 1fr); gap: 28px; } .grid.three { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.split { display: grid; gap: 40px; align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: 1.05fr .95fr; gap: 72px; } .split.reverse > :first-child { order: 2; } }

/* Header */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .9); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid rgba(19, 41, 75, .06); }
:root[data-theme="dark"] .site-header { background: rgba(30, 27, 27, .94); }
:root[data-theme="dark"] .brand img { filter: brightness(0) invert(1); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; min-height: 80px; gap: 16px; }
@media (min-width: 1024px) { .site-header .wrap { min-height: 96px; } }
.brand { display: inline-flex; align-items: center; min-height: 44px; }
.brand img { height: 58px; width: auto; }
@media (min-width: 1024px) { .brand img { height: 76px; } }
.nav-toggle { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; background: transparent; color: var(--heading); border: 1px solid var(--hairline); border-radius: 999px; font: 600 .9rem var(--sans); padding: 0 16px; cursor: pointer; }
.site-nav { display: none; }
.site-nav.open { display: block; position: absolute; left: 0; right: 0; top: 80px; max-height: calc(100svh - 80px); overflow-y: auto; background: var(--bg); padding: 12px var(--gutter) 24px; border-bottom: 1px solid var(--line); }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.site-nav a { display: flex; align-items: center; min-height: 44px; padding: 0 8px; color: var(--text); text-decoration: none; font-size: .98rem; border-radius: 8px; }
.site-nav a:hover, .site-nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.site-nav .nav-cta { margin-top: 10px; }
.site-nav a.btn-primary, .site-nav a.btn-primary:hover { padding: 0 22px; text-decoration: none; color: var(--white); background: var(--charcoal); }
@media (min-width: 1024px) {
  .nav-toggle { display: none; }
  .site-nav, .site-nav.open { display: block; position: static; background: none; padding: 0; border: 0; }
  .site-nav ul { display: flex; align-items: center; gap: 4px; }
  .site-nav a { font-size: .93rem; padding: 0 12px; }
  .site-nav .nav-cta { margin: 0 0 0 10px; }
}
.no-js .site-nav { display: block; position: static; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 30px; border-radius: 999px; font: 600 .95rem/1 var(--sans); letter-spacing: .005em; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: background .2s, color .2s, border-color .2s, transform .2s; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--charcoal); color: var(--white); }
.btn-primary:hover { background: #0C364D; }
.btn-light { background: var(--white); color: var(--charcoal); }
.btn-light:hover { background: var(--paper); }
.btn-ghost { background: transparent; color: var(--heading); border-color: currentColor; }
.btn-ghost:hover { background: rgba(127,127,127,.08); }
.btn-small { min-height: 44px; padding: 0 18px; font-size: .93rem; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 28px; }
.center .actions { justify-content: center; }
.text-link { font-weight: 600; text-decoration: none; }
.text-link::after { content: " →"; }
:root[data-theme="dark"] .btn-primary { background: var(--white); color: var(--charcoal); }
.section.dark .btn-primary, .band .btn-primary { background: var(--white); color: var(--charcoal); }

/* Hero */
.hero { padding-block: clamp(40px, 7vw, 88px) clamp(48px, 7vw, 96px); }
.hero h1 { max-width: 14em; margin-bottom: .35em; }
.hero .lede { max-width: 34em; }
.hero-photo { margin: clamp(28px, 4vw, 48px) 0 0; border-radius: var(--radius); overflow: hidden; background: var(--panel); aspect-ratio: 16 / 7; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; }
.hero-caption { font: 500 clamp(1.25rem, 2.2vw, 1.6rem)/1.3 var(--serif); letter-spacing: -.03em; color: var(--heading); margin: 18px 0 0; max-width: 22em; }
@media (min-width: 900px) { .hero-photo { margin-left: 10%; } .hero-caption { margin-left: 10%; } }
.page-hero { padding-block: clamp(56px, 9vw, 112px) clamp(32px, 5vw, 56px); }
.page-hero .wrap { border-bottom: 1px solid var(--hairline); padding-bottom: clamp(32px, 5vw, 56px); }
.shot { border-radius: var(--radius); overflow: hidden; background: var(--panel); }
.shot img { width: 100%; height: auto; }
.shot.plain { background: none; }

/* Cards */
.card { background: var(--panel); border: 1px solid transparent; border-radius: var(--radius); padding: clamp(24px, 3vw, 36px); }
.card.link-card { text-decoration: none; color: inherit; display: block; transition: transform .25s, box-shadow .25s, border-color .25s; }
.card.link-card:not(.tile3d):hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.card h3 { margin-bottom: .35em; }
.card p:last-child { margin-bottom: 0; }
.card .num { font: 500 .85rem var(--sans); color: var(--accent); letter-spacing: .1em; display: block; margin-bottom: 14px; }
.badge { display: inline-block; font: 600 .72rem/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; padding: 7px 10px; border-radius: 999px; background: var(--surface-warm); color: var(--accent); border: 1px solid var(--line); }
.badge.soon { color: var(--muted); }
.callout { border-left: 3px solid var(--accent); padding: 4px 0 4px 18px; }

.illustration-note { text-align: center; font-size: .8rem; color: var(--muted); margin-top: 18px; letter-spacing: .02em; }

/* Plans */
.toggle { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); margin: 8px 0 32px; }
.toggle button { min-height: 44px; min-width: 110px; padding: 0 18px; border-radius: 999px; border: 0; background: transparent; color: var(--text); font: 600 .95rem var(--sans); cursor: pointer; }
.toggle button[aria-pressed="true"] { background: var(--charcoal); color: var(--white); }
.plans { display: grid; gap: 20px; }
@media (min-width: 960px) { .plans { grid-template-columns: repeat(3, 1fr); align-items: stretch; } }
.plan { display: flex; flex-direction: column; }
.plan.featured { background: var(--surface); border-color: var(--hairline); box-shadow: var(--shadow); }
.plan .price { font: 500 3.2rem/1 var(--serif); letter-spacing: -.02em; color: var(--heading); margin: 12px 0 4px; }
.plan .price small { font: 400 1rem var(--sans); color: var(--muted); }
.plan ul { list-style: none; padding: 0; margin: 18px 0 24px; display: grid; gap: 10px; flex: 1; }
.plan li { padding-left: 26px; position: relative; font-size: .97rem; }
.plan li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 12px; height: 6px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); }
.plan .renews { font-size: .82rem; color: var(--muted); margin: 0 0 14px; min-height: 3.6em; }
.plan .btn { width: 100%; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
table { border-collapse: collapse; width: 100%; min-width: 640px; font-size: .95rem; }
th, td { text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
thead th { font: 600 .8rem var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); background: var(--surface-warm); }
tbody th { font-weight: 600; color: var(--heading); }
tr:last-child td, tr:last-child th { border-bottom: 0; }

/* FAQ */
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: 20px 36px 20px 0; position: relative; font: 500 1.45rem/1.3 var(--serif); color: var(--heading); min-height: 44px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 16px; font: 300 1.6rem var(--sans); color: var(--accent); }
.faq details[open] summary::after { content: "–"; }
.faq details > div { padding: 0 0 20px; color: var(--muted); max-width: 64ch; }
.faq h3 { margin-top: 48px; font-size: 1.2rem; font-family: var(--sans); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }

/* Steps / timeline */
.steps { counter-reset: step; display: grid; gap: 20px; }
@media (min-width: 820px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.steps .card { position: relative; }
.timeline { display: grid; gap: 20px; }
@media (min-width: 820px) { .timeline { grid-template-columns: repeat(3, 1fr); } }

/* Forms */
form { display: grid; gap: 18px; }
.field { display: grid; gap: 6px; }
label, .label { font-weight: 600; font-size: .95rem; color: var(--heading); }
input[type="text"], input[type="email"], input[type="tel"], input[type="search"], select {
  width: 100%; min-height: 48px; padding: 10px 14px; font: inherit; color: var(--text); background: var(--surface);
  border: 1px solid #B9B2A7; border-radius: var(--radius-sm);
}
input:focus-visible, select:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
.check { display: flex; gap: 12px; align-items: flex-start; font-weight: 400; }
.check input { width: 22px; height: 22px; margin-top: 2px; flex: none; }
.row { display: grid; gap: 14px; }
@media (min-width: 640px) { .row.two { grid-template-columns: 1fr 1fr; } .row.search { grid-template-columns: 2fr 1fr auto; align-items: end; } }
.hint { font-size: .85rem; color: var(--muted); }
.status { min-height: 1.5em; font-weight: 600; }
.status.error { color: var(--warn); }
.status.ok { color: var(--ok); }
/* Apply to join + launch list */
.wrap.narrow { max-width: 860px; }
.apply { margin-top: 28px; }
.apply-form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.apply-form legend { padding: 0; margin-bottom: 8px; }
.role-options { display: flex; flex-wrap: wrap; gap: 10px; }
.choice { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 18px; border: 1px solid #B9B2A7; border-radius: 999px; background: var(--surface); font-weight: 500; cursor: pointer; }
.choice:has(input:checked) { border-color: var(--focus); box-shadow: inset 0 0 0 1px var(--focus); }
.choice input { width: 20px; height: 20px; margin: 0; }
.check { min-height: 44px; }
.hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.notify { margin-top: 28px; max-width: 520px; }
.notify-form { gap: 8px; }
.inline-input { display: flex; flex-wrap: wrap; gap: 10px; }
.inline-input input { flex: 1 1 220px; width: auto; }
.inline-input .btn { flex: none; }
[data-for-role][hidden] { display: none; }
.result-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.result-list li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }

/* Account */
.account-grid { display: grid; gap: 20px; }
@media (min-width: 820px) { .account-grid { grid-template-columns: repeat(2, 1fr); } }
.stat { font: 500 2.4rem/1.1 var(--serif); color: var(--heading); margin: 6px 0; }
.progress { height: 10px; border-radius: 999px; background: var(--line); overflow: hidden; margin: 12px 0 6px; }
.progress > span { display: block; height: 100%; width: 0; background: var(--accent); border-radius: 999px; transition: width .6s ease; }
.spot-grid { display: grid; gap: 16px; }
@media (min-width: 820px) { .spot-grid { grid-template-columns: repeat(3, 1fr); } }
.dialog-panel { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 24px; margin-top: 16px; }

/* Legal */
.draft-banner { background: #FFF3D6; color: #5A3B00; border-bottom: 1px solid #E9C97A; }
.draft-banner .wrap { padding-block: 12px; font-weight: 600; font-size: .95rem; }

/* Footer */
.site-footer { background: #0B1D33; padding-block: 72px 40px; font-size: .95rem; }
.footer-grid { display: grid; gap: 36px; }
@media (min-width: 820px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.site-footer h2 { font: 500 .76rem var(--sans); letter-spacing: .16em; text-transform: uppercase; color: #C4BCBA; margin-bottom: 14px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.site-footer a { color: #EEEAE8; text-decoration: none; display: inline-flex; min-height: 36px; align-items: center; }
.site-footer a:hover { color: var(--white); text-decoration: underline; }
.footer-brand img { height: 44px; width: auto; margin-bottom: 18px; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.12); margin-top: 48px; padding-top: 24px; display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: space-between; color: #C4BCBA; font-size: .85rem; }

/* Store badges (text buttons; official badges once store links are live) */
.store-buttons { display: flex; flex-wrap: wrap; gap: 12px; }
.store-btn { display: inline-flex; flex-direction: column; justify-content: center; min-height: 56px; min-width: 190px; padding: 8px 22px; border-radius: 12px; background: #000; color: #fff; text-decoration: none; border: 1px solid rgba(255,255,255,.25); line-height: 1.2; }
.store-btn small { font-size: .72rem; opacity: .8; }
.store-btn span { font-size: 1.1rem; font-weight: 600; }
.store-btn[aria-disabled="true"] { background: transparent; color: inherit; border-color: currentColor; opacity: .85; }

/* Motion */
.reveal { opacity: 1; transform: none; }
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .9s ease, transform .9s ease; }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none; } }
.timeline, .steps { list-style: none; padding: 0; margin: 0 0 24px; }
.h3 { font-size: clamp(1.3rem, 2.2vw, 1.55rem); }
.spot-card .stat { font-size: 1.6rem; }
.card .shot { margin: 22px 0 0; max-height: 420px; display: flex; justify-content: center; }
.card .shot img { width: auto; max-height: 420px; object-fit: contain; }
.split .shot.plain img { max-height: 560px; width: auto; margin-inline: auto; object-fit: contain; }
.split.spaced { margin-top: 32px; }

/* ==========================================================================
   Home and marketing sections
   ========================================================================== */
@media (max-width: 719px) { .wide-only { display: none; } }
.footer-tagline { font: 500 1.7rem/1.15 var(--serif); letter-spacing: -.01em; color: #fff; margin-bottom: 6px; }
.kicker { font: 600 .74rem/1.2 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--accent); margin: 0 0 18px; }
.sub { font: 400 clamp(1.08rem, 1.7vw, 1.3rem)/1.6 var(--sans); color: var(--muted); max-width: 36em; margin: 0 0 8px; }
.center .sub { margin-inline: auto; }
.soft { color: var(--muted); }
.links { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; margin: 30px 0 0; }
.center .links, .links.center { justify-content: center; }
.more { font: 600 1rem var(--sans); color: var(--link); text-decoration: none; letter-spacing: .01em; }
.more::after { content: "\2192"; display: inline-block; margin-left: .45em; transition: transform .3s var(--ease); }
.more:hover::after { transform: translateX(4px); }
.band-pad { padding-block: clamp(80px, 12vw, 160px); }
.display { font-size: clamp(2.4rem, 5.6vw, 4.4rem); line-height: 1.04; }
.media { position: relative; overflow: hidden; border-radius: clamp(20px, 2.6vw, 32px); background: var(--panel); isolation: isolate; }
.media img { width: 100%; height: 100%; object-fit: cover; }
.media video { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; display: block; background: #e9dfd0; }
.media.mock { background: none; border-radius: 0; overflow: visible; }
.media.mock img { object-fit: contain; filter: drop-shadow(0 30px 40px rgba(19, 41, 75, .12)); }
.js .rise .media.mock img, .js .media.mock.rise img { transform: none; }
.closing-mock { margin: clamp(40px, 6vw, 72px) auto 0; max-width: 980px; }
.closing-mock img { width: 100%; height: auto; display: block; }
.dl-visual { margin: 0; max-width: 460px; justify-self: center; }
.dl-visual img { width: 100%; height: auto; }

/* Hero: full-bleed photo with a slow drift, copy laid over it */
.hero-full { position: relative; margin: 0 clamp(0px, 1vw, 14px); border-radius: 0 0 clamp(20px, 2.6vw, 34px) clamp(20px, 2.6vw, 34px); overflow: hidden; min-height: 600px; height: min(calc(100svh - 80px), 940px); color: #fff; isolation: isolate; display: flex; align-items: flex-end; }
@media (min-width: 1024px) { .hero-full { height: min(calc(100svh - 96px), 940px); } }
.hero-full .hero-bg { position: absolute; inset: 0; z-index: -2; }
.hero-full .hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; }
.hero-full .hero-video { width: 100%; height: 100%; object-fit: cover; object-position: 42% 50%; display: block; background: #e9dfd0; }
.hero-pause { position: absolute; right: clamp(14px, 2.4vw, 28px); bottom: clamp(14px, 2.4vw, 28px); z-index: 1; font: inherit; font-size: .78rem; letter-spacing: .04em; color: #fff; background: rgba(9, 22, 40, .32); border: 1px solid rgba(255, 255, 255, .45); border-radius: 999px; padding: .42em 1em; cursor: pointer; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.hero-pause:hover { background: rgba(9, 22, 40, .5); }
.hero-pause:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.hero-full::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(9, 22, 40, .08) 0%, rgba(9, 22, 40, 0) 30%, rgba(9, 22, 40, .38) 62%, rgba(9, 22, 40, .78) 100%); }
.hero-full .hero-copy { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter) clamp(40px, 7vw, 88px); }
.hero-full .kicker { color: rgba(255, 255, 255, .86); }
.hero-full h1 { color: #fff; font-size: clamp(3rem, 8.4vw, 6.6rem); line-height: .98; letter-spacing: -.022em; max-width: 9.5em; margin-bottom: .28em; font-weight: 500; }
.hero-full .sub { color: rgba(255, 255, 255, .9); font-size: clamp(1.12rem, 1.9vw, 1.42rem); }
.hero-full .more { color: #fff; }
.btn-white { background: #fff; color: var(--charcoal); }
.btn-white:hover { background: #F1ECE4; }

/* Statement + feature index */
.statement { text-align: center; }
.statement h2 { max-width: 15em; margin-inline: auto; }
.statement .sub { margin-inline: auto; }
.feature-index { list-style: none; padding: 0; margin: clamp(36px, 5vw, 56px) auto 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 900px; }
.feature-index a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border-radius: 999px; border: 1px solid rgba(19, 41, 75, .16); color: var(--heading); text-decoration: none; font: 500 .95rem var(--sans); transition: background .3s, border-color .3s, color .3s; }
.feature-index a:hover { background: var(--charcoal); border-color: var(--charcoal); color: #fff; }

/* Photo mosaic */
.mosaic { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; margin-top: clamp(48px, 7vw, 88px); }
.mosaic .media { aspect-ratio: 4 / 5; }
.mosaic .media.wide { grid-column: span 2; aspect-ratio: 16 / 9; }
@media (min-width: 820px) {
  .mosaic { grid-template-columns: 1.35fr .85fr 1fr; gap: 16px; align-items: end; }
  .mosaic .media.wide { grid-column: auto; aspect-ratio: 4 / 5; }
  .mosaic .media:nth-child(1) { aspect-ratio: 5 / 4; }
  .mosaic .media:nth-child(2) { aspect-ratio: 3 / 4; transform: translateY(-48px); }
  .mosaic .media:nth-child(3) { aspect-ratio: 4 / 5; }
}

/* ---------- iPhone (CSS illustration) ---------- */
.iphone { --w: 300px; position: relative; width: var(--w); aspect-ratio: 71.5 / 149.6; flex: none; border-radius: calc(var(--w) * .175); padding: calc(var(--w) * .036); margin-inline: auto;
  background: linear-gradient(145deg, #3a3d42 0%, #16181b 38%, #0c0d0f 62%, #2a2c30 100%);
  box-shadow: inset 0 0 0 1.5px #7b7f86, inset 0 0 0 3px #1b1c1f, 0 2px 4px rgba(0, 0, 0, .2), 0 50px 90px -30px rgba(9, 32, 66, .55), 0 26px 40px -24px rgba(9, 32, 66, .35); }
.iphone::before, .iphone::after { content: ""; position: absolute; width: 3px; border-radius: 2px; background: linear-gradient(90deg, #4a4d52, #222428); }
.iphone::before { left: -2px; top: 22%; height: 9%; box-shadow: 0 calc(var(--w) * .2) 0 #2c2e32; }
.iphone::after { right: -2px; top: 28%; height: 14%; }
.iphone .screen-wrap { position: relative; width: 100%; height: 100%; border-radius: calc(var(--w) * .14); overflow: hidden; background: #FAF8F5; color: #13294B; font-family: var(--sans); isolation: isolate; }
.iphone .island { position: absolute; z-index: 20; top: calc(var(--w) * .035); left: 50%; transform: translateX(-50%); width: 32%; height: calc(var(--w) * .095); border-radius: 999px; background: #000; }
.iphone .status { position: absolute; z-index: 19; top: 0; left: 0; right: 0; height: calc(var(--w) * .16); display: flex; align-items: center; justify-content: space-between; padding: calc(var(--w) * .02) calc(var(--w) * .085) 0; font: 600 calc(var(--w) * .043)/1 var(--sans); color: #13294B; }
.iphone .status i { display: inline-flex; gap: 4px; align-items: center; }
.iphone .status i::before { content: ""; width: calc(var(--w) * .05); height: calc(var(--w) * .03); background: linear-gradient(90deg, currentColor 0 18%, transparent 18% 27%, currentColor 27% 45%, transparent 45% 54%, currentColor 54% 72%, transparent 72% 81%, currentColor 81%); clip-path: polygon(0 100%, 100% 0, 100% 100%); }
.iphone .status i::after { content: ""; width: calc(var(--w) * .075); height: calc(var(--w) * .035); border: 1.5px solid currentColor; border-radius: 3px; box-shadow: inset calc(var(--w) * -.02) 0 0 0 #FAF8F5, inset 0 0 0 1px #FAF8F5; background: currentColor; opacity: .9; }
.iphone .home-bar { position: absolute; z-index: 30; bottom: calc(var(--w) * .02); left: 50%; transform: translateX(-50%); width: 36%; height: 4px; border-radius: 4px; background: rgba(19, 41, 75, .85); }

/* App screens */
.app { position: absolute; inset: 0; padding: calc(var(--w) * .17) calc(var(--w) * .055) calc(var(--w) * .25); display: flex; flex-direction: column; gap: calc(var(--w) * .035); font-size: calc(var(--w) * .042); line-height: 1.35; }
.app-top { display: flex; align-items: center; justify-content: space-between; }
.app-top b { font: 600 calc(var(--w) * .085)/1 var(--serif); letter-spacing: -.01em; color: #13294B; }
.app-top .avatar { width: calc(var(--w) * .09); height: calc(var(--w) * .09); border-radius: 50%; background: linear-gradient(135deg, #C9B79C, #8A7457); }
.app-sub { margin: 0; font-size: .82em; letter-spacing: .14em; text-transform: uppercase; color: #6A7891; font-weight: 600; }
.app-search { display: flex; align-items: center; gap: .6em; height: calc(var(--w) * .11); padding: 0 .9em; border-radius: 999px; background: #EEEAE3; color: #56647C; font-size: .95em; }
.app-search::before { content: ""; width: .85em; height: .85em; border: 1.5px solid currentColor; border-radius: 50%; flex: none; }
.chips { display: flex; gap: .4em; flex-wrap: nowrap; overflow: hidden; }
.chips span { flex: none; padding: .4em .85em; border-radius: 999px; background: #fff; border: 1px solid #E3DED5; font-size: .82em; font-weight: 600; white-space: nowrap; }
.chips span.on { background: #13294B; color: #fff; border-color: #13294B; }
.card-photo { position: relative; border-radius: calc(var(--w) * .055); overflow: hidden; background: #ddd; }
.card-photo img { width: 100%; height: 100%; object-fit: cover; }
.card-photo .tag { position: absolute; left: .7em; bottom: .7em; right: .7em; color: #fff; font-size: .9em; font-weight: 600; text-shadow: 0 1px 8px rgba(0, 0, 0, .4); }
.card-photo .tag small { display: block; font-weight: 500; opacity: .9; font-size: .85em; }
.row-item { display: flex; align-items: center; gap: .7em; padding: .6em .7em; border-radius: calc(var(--w) * .045); background: #fff; box-shadow: 0 1px 0 rgba(19, 41, 75, .05); font-size: .92em; }
.row-item .dot { width: calc(var(--w) * .085); height: calc(var(--w) * .085); border-radius: calc(var(--w) * .025); flex: none; background: #E9E3D8; display: grid; place-items: center; overflow: hidden; }
.row-item .dot img { width: 100%; height: 100%; object-fit: cover; }
.row-item b { display: block; font-weight: 600; }
.row-item small { display: block; color: #6A7891; font-size: .86em; }
.row-item em { margin-left: auto; font-style: normal; font-size: .82em; font-weight: 600; color: #1F4E79; }
.row-item.hl { outline: 2px solid #1F6FB2; outline-offset: 1px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--w) * .03); }
.grid2 .card-photo { aspect-ratio: 1 / 1.15; }
.grid2 .card-photo.tall { grid-row: span 2; aspect-ratio: auto; }
.heart { position: absolute; top: .5em; right: .5em; width: 1.6em; height: 1.6em; border-radius: 50%; background: rgba(255, 255, 255, .85); display: grid; place-items: center; color: #13294B; font-size: .8em; }
.vision-split { position: relative; aspect-ratio: 1 / 1.05; border-radius: calc(var(--w) * .055); overflow: hidden; }
.vision-split img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vision-split .before { filter: grayscale(1) contrast(.85) brightness(1.08); clip-path: inset(0 52% 0 0); }
.vision-split .handle { position: absolute; top: 0; bottom: 0; left: 48%; width: 2px; background: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, .3); }
.vision-split .handle::after { content: ""; position: absolute; top: 50%; left: 50%; width: 1.8em; height: 1.8em; transform: translate(-50%, -50%); border-radius: 50%; background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, .25); }
.vision-split .lbl { position: absolute; top: .6em; padding: .2em .6em; border-radius: 999px; background: rgba(0, 0, 0, .45); color: #fff; font-size: .75em; font-weight: 600; }
.vision-split .lbl.l { left: .6em; } .vision-split .lbl.r { right: .6em; }
.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5em; }
.stat-row div { background: #fff; border-radius: calc(var(--w) * .04); padding: .6em .5em; text-align: center; font-size: .82em; color: #6A7891; }
.stat-row b { display: block; font: 600 1.5em/1.1 var(--serif); color: #13294B; }
.tabbar { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--w) * .2); padding: calc(var(--w) * .025) calc(var(--w) * .05) 0; display: flex; justify-content: space-around; background: rgba(250, 248, 245, .92); backdrop-filter: blur(10px); border-top: 1px solid rgba(19, 41, 75, .07); z-index: 8; }
.tabbar span { display: flex; flex-direction: column; align-items: center; gap: .3em; font-size: calc(var(--w) * .03); font-weight: 600; color: #8C97A8; }
.tabbar span::before { content: ""; width: calc(var(--w) * .055); height: calc(var(--w) * .055); border-radius: 30%; border: 1.6px solid currentColor; }
.tabbar span.on { color: #13294B; }
.tabbar span.on::before { background: currentColor; }
.elli-fab { position: absolute; z-index: 9; right: calc(var(--w) * .05); bottom: calc(var(--w) * .23); width: calc(var(--w) * .15); height: calc(var(--w) * .15); border-radius: 50%; background: radial-gradient(circle at 32% 30%, #5E8DBA, #13294B 70%); box-shadow: 0 8px 20px rgba(19, 41, 75, .35); display: grid; place-items: center; color: #fff; font: 600 calc(var(--w) * .036)/1 var(--sans); letter-spacing: .06em; }

/* Screen crossfades inside the scrollytelling phone */
.screens .app { opacity: 0; transform: scale(1.02); transition: opacity .7s var(--ease), transform .9s var(--ease); }
.screens .app.on { opacity: 1; transform: none; }
.app.shot { padding: 0; display: block; background: #5B7594; }
.app.shot img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; display: block; }
/* My Home: drawn in the real app's Cream look (stone gray fading to off-white, navy text, slate buttons) until a screenshot exists */
.app.mh { padding: 0 calc(var(--w) * .045) calc(var(--w) * .2); gap: calc(var(--w) * .03); background: linear-gradient(180deg, #ECEBE8 0, #F3F2F0 calc(var(--w) * .8), #FAF9F8 calc(var(--w) * 1.4)); color: #1C2C48; font-size: calc(var(--w) * .036); }
.mh-status { display: flex; justify-content: space-between; align-items: center; height: calc(var(--w) * .14); padding: calc(var(--w) * .02) calc(var(--w) * .05) 0; color: #111; font-weight: 600; font-size: calc(var(--w) * .04); }
.mh-status i { width: calc(var(--w) * .075); height: calc(var(--w) * .035); border: 1.5px solid #111; border-radius: 3px; background: linear-gradient(90deg, #111 75%, transparent 75%); }
.mh-bar { display: flex; align-items: center; gap: calc(var(--w) * .03); color: #1C2C48; font-size: calc(var(--w) * .045); }
.mh-bar b { font-weight: 500; flex: 1; }
.mh-menu { width: calc(var(--w) * .05); height: calc(var(--w) * .035); border-block: 1.5px solid #1C2C48; position: relative; }
.mh-menu::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1.5px solid #1C2C48; transform: translateY(-50%); }
.mh-avatar { width: calc(var(--w) * .085); height: calc(var(--w) * .085); border-radius: 50%; background: #1C2C48; color: #fff; display: grid; place-items: center; font: italic 500 calc(var(--w) * .03)/1 var(--serif); box-shadow: 0 0 0 2px rgba(255, 255, 255, .6); }
.mh-avatar::after { content: "elli"; }
.mh-title { margin: calc(var(--w) * .01) 0 0; text-align: center; color: #1C2C48; font-size: calc(var(--w) * .056); font-weight: 400; }
.mh-hero { position: relative; height: calc(var(--w) * .42); border-radius: calc(var(--w) * .035); overflow: hidden; background: #fff; box-shadow: 0 6px 16px rgba(19, 41, 75, .14); }
.mh-hero img { width: 100%; height: 100%; object-fit: cover; }
.mh-hero::after { content: ""; position: absolute; inset: 40% 0 0; background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .96) 75%); }
.mh-cap { position: absolute; z-index: 1; left: calc(var(--w) * .035); bottom: calc(var(--w) * .025); display: flex; flex-direction: column; }
.mh-cap b, .mh-grid b, .mh-task b { font-weight: 600; }
.mh-cap small, .mh-grid small, .mh-task small { color: #56647C; font-size: calc(var(--w) * .028); }
.mh-ring { position: absolute; z-index: 1; right: calc(var(--w) * .03); top: calc(var(--w) * .03); width: calc(var(--w) * .13); height: calc(var(--w) * .13); border-radius: 50%; display: grid; place-items: center; background: conic-gradient(#4F6B87 0 82%, rgba(255, 255, 255, .55) 82% 100%); }
.mh-ring::before { content: ""; position: absolute; inset: 14%; border-radius: 50%; background: #fff; }
.mh-ring b { position: relative; font-size: calc(var(--w) * .03); color: #1C2C48; }
.mh-grid { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--w) * .025); }
.mh-grid div { position: relative; height: calc(var(--w) * .22); border-radius: calc(var(--w) * .03); overflow: hidden; background: #fff; box-shadow: 0 4px 12px rgba(19, 41, 75, .1); }
.mh-grid img { width: 100%; height: 100%; object-fit: cover; }
.mh-grid span { position: absolute; left: 0; right: 0; bottom: 0; padding: calc(var(--w) * .05) calc(var(--w) * .025) calc(var(--w) * .015); display: flex; flex-direction: column; background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff 55%); line-height: 1.2; }
.mh-h { margin: calc(var(--w) * .01) 0 0; font-weight: 600; }
.mh-task { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: calc(var(--w) * .025) calc(var(--w) * .03); border-radius: calc(var(--w) * .03); background: #fff; box-shadow: 0 3px 10px rgba(19, 41, 75, .08); }
.mh-task span { display: flex; flex-direction: column; line-height: 1.25; }
.mh-task em { font-style: normal; font-size: calc(var(--w) * .028); font-weight: 600; color: #fff; background: #4F6B87; border-radius: 999px; padding: .35em .8em; white-space: nowrap; }
.mh-task em.ok { background: #E5EEE8; color: #24643F; }
.mh-tabs { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--w) * .2); display: flex; justify-content: space-around; padding: calc(var(--w) * .028) calc(var(--w) * .045) 0; background: #FAF9F8; border-top: 1px solid #E4E2DE; }
.mh-tabs span { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: calc(var(--w) * .014); font-size: calc(var(--w) * .023); font-weight: 500; color: #9FB2BC; white-space: nowrap; }
.mh-tabs img { width: calc(var(--w) * .058); height: calc(var(--w) * .058); object-fit: contain; }
.mh-tabs span.on { color: #4F6B87; font-weight: 600; }
.mh-tabs span.on::after { content: ""; position: absolute; top: calc(var(--w) * -.028); left: 22%; right: 22%; height: 2px; border-radius: 2px; background: #4F6B87; }
.no-js .screens .app:first-child, .reduced .screens .app.on { opacity: 1; }

/* ELLI chat sheet over the app */
.app.dim::after { content: ""; position: absolute; inset: 0; background: rgba(12, 24, 44, .28); z-index: 10; opacity: 0; transition: opacity .8s var(--ease) .1s; }
.talk-phone.in .app.dim::after, .no-js .app.dim::after { opacity: 1; }
.elli-sheet { position: absolute; z-index: 12; left: calc(var(--w) * .025); right: calc(var(--w) * .025); bottom: calc(var(--w) * .025); border-radius: calc(var(--w) * .12) calc(var(--w) * .12) calc(var(--w) * .13) calc(var(--w) * .13); padding: calc(var(--w) * .05) calc(var(--w) * .05) calc(var(--w) * .07); background: rgba(250, 248, 245, .97); box-shadow: 0 -10px 40px rgba(9, 22, 40, .25); display: flex; flex-direction: column; gap: calc(var(--w) * .028); font-size: calc(var(--w) * .041); line-height: 1.38;
  transform: translateY(105%); transition: transform 1s var(--ease) .25s; }
.talk-phone.in .elli-sheet, .no-js .elli-sheet { transform: none; }
.elli-sheet .grip { width: 14%; height: 4px; border-radius: 4px; background: #D5CFC4; margin: -2% auto 2%; }
.elli-sheet .who { display: flex; align-items: center; gap: .55em; font-weight: 600; font-size: .9em; letter-spacing: .1em; }
.orb { width: 1.9em; height: 1.9em; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #9CC7F0, #1F4E79 55%, #0B1D33); box-shadow: 0 0 0 0 rgba(31, 111, 178, .45); animation: orb 2.6s ease-in-out infinite; }
@keyframes orb { 0%, 100% { box-shadow: 0 0 0 0 rgba(31, 111, 178, .4); } 50% { box-shadow: 0 0 0 .5em rgba(31, 111, 178, 0); } }
.msg { max-width: 88%; padding: .6em .85em; border-radius: 1.1em; opacity: 0; transform: translateY(8px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.msg.you { align-self: flex-end; background: #13294B; color: #fff; border-bottom-right-radius: .35em; }
.msg.elli { align-self: flex-start; background: #EDE8E0; color: #13294B; border-bottom-left-radius: .35em; }
.talk-phone.in .msg, .no-js .msg { opacity: 1; transform: none; }
.talk-phone.in .msg:nth-of-type(1) { transition-delay: 1.1s; }
.talk-phone.in .msg:nth-of-type(2) { transition-delay: 2s; }
.talk-phone.in .msg:nth-of-type(3) { transition-delay: 2.9s; }
.doing { display: flex; align-items: center; gap: .5em; font-size: .82em; color: #1F4E79; font-weight: 600; opacity: 0; transition: opacity .6s var(--ease) 3.6s; }
.doing::before { content: ""; width: .7em; height: .7em; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.talk-phone.in .doing, .no-js .doing { opacity: 1; }
.wave { display: flex; align-items: center; justify-content: center; gap: 3px; height: 1.8em; margin-top: .2em; }
.wave i { width: 3px; height: 30%; border-radius: 3px; background: #1F4E79; animation: wave 1.2s ease-in-out infinite; }
.wave i:nth-child(2) { animation-delay: .1s; } .wave i:nth-child(3) { animation-delay: .2s; } .wave i:nth-child(4) { animation-delay: .3s; } .wave i:nth-child(5) { animation-delay: .4s; } .wave i:nth-child(6) { animation-delay: .5s; } .wave i:nth-child(7) { animation-delay: .6s; }
@keyframes wave { 0%, 100% { height: 25%; } 50% { height: 100%; } }
.row-item { position: relative; }
.tap { position: absolute; z-index: 11; right: .4em; top: 50%; margin-top: calc(var(--w) * -.06); width: calc(var(--w) * .12); height: calc(var(--w) * .12); border-radius: 50%; background: rgba(31, 111, 178, .28); border: 2px solid rgba(31, 111, 178, .7); opacity: 0; transform: scale(.4); }
.talk-phone.in .tap { animation: tap 2.4s var(--ease) 4.2s infinite; }
@keyframes tap { 0% { opacity: 0; transform: scale(.4); } 20% { opacity: 1; transform: scale(1); } 60%, 100% { opacity: 0; transform: scale(1.6); } }

/* ---------- Scrollytelling: the app, one area at a time ---------- */
.scrolly { position: relative; }
.scrolly-head { text-align: center; padding-bottom: clamp(24px, 4vw, 48px); }
.scrolly-grid { display: grid; max-width: var(--max); margin: 0 auto; padding-inline: var(--gutter); }
.scrolly-stage { position: sticky; z-index: 2; top: 80px; margin: 0 calc(-1 * var(--gutter)); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 10px 0 8px; background: var(--bg); }
.scrolly-stage::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 36px; background: linear-gradient(180deg, var(--bg), rgba(255, 255, 255, 0)); pointer-events: none; }
.scrolly-stage .iphone { --w: min(190px, calc((100svh - 360px) * .478)); }
.steps-list { list-style: none; margin: 0; padding: 0; }
.step { min-height: 36svh; padding: 20px 0 28px; opacity: .28; transition: opacity .6s var(--ease); }
.step.on, .no-js .step, .reduced .step { opacity: 1; }
.step:last-child { min-height: 40svh; padding-bottom: 64px; }
.step h3 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); line-height: 1.06; font-weight: 500; margin-bottom: .35em; }
.step p { color: var(--muted); max-width: 30em; }
.step .points { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 8px; }
.step .points li { padding-left: 22px; position: relative; color: var(--text); font-size: .98rem; }
.step .points li::before { content: ""; position: absolute; left: 2px; top: .7em; width: 10px; height: 1px; background: var(--accent); }
@media (min-width: 900px) {
  .scrolly-grid { grid-template-columns: 1fr minmax(360px, 1fr); gap: 64px; }
  .scrolly-stage { order: 2; top: 0; height: 100svh; margin: 0; padding: 96px 0 0; background: none; }
  .scrolly-stage::after { display: none; }
  .scrolly-stage .iphone { --w: min(330px, calc((100svh - 150px) * .478)); }
  .steps-list { order: 1; }
  .step { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: 0; }
  .step:last-child { min-height: 100svh; }
}

/* ---------- Talk to ELLI (the standout feature) ---------- */
.talk { background: #0B1D33; color: #E9EEF5; --heading: #fff; --muted: #AFC0D6; --link: #CFE2F5; --accent: #9CC7F0; margin: 0 clamp(0px, 1vw, 14px); border-radius: clamp(20px, 2.6vw, 34px); overflow: hidden; position: relative; isolation: isolate; }
.talk::before { content: ""; position: absolute; z-index: -1; width: 900px; height: 900px; right: -300px; top: -300px; background: radial-gradient(closest-side, rgba(94, 141, 186, .35), rgba(94, 141, 186, 0)); }
.talk .wrap { display: grid; gap: clamp(48px, 6vw, 96px); align-items: center; }
@media (min-width: 900px) { .talk .wrap { grid-template-columns: 1.05fr .95fr; } .talk .talk-visual { order: 2; } }
.talk h2 { font-size: clamp(2.6rem, 6vw, 4.8rem); line-height: 1; }
.talk .sub { color: #C6D3E4; }
.talk-visual { display: flex; flex-direction: column; align-items: center; }
.talk-phone { --w: min(320px, 78vw); }
.talk .illustration-note { color: #8FA2BC; }
.can-do { list-style: none; padding: 0; margin: 32px 0 0; display: grid; gap: 0; border-top: 1px solid rgba(255, 255, 255, .12); }
.can-do li { display: grid; grid-template-columns: 7.5em 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid rgba(255, 255, 255, .12); color: #C6D3E4; }
.can-do b { font: 500 1.5rem/1.1 var(--serif); color: #fff; }
.minutes { display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0 0; padding: 0; list-style: none; }
.minutes li { padding: 10px 16px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .2); font-size: .9rem; color: #E9EEF5; }
.minutes b { font-weight: 700; color: #fff; }

/* Split feature with image */
.split-feature { display: grid; gap: clamp(36px, 5vw, 80px); align-items: center; }
@media (min-width: 900px) { .split-feature { grid-template-columns: 1.1fr .9fr; } .split-feature.flip > .media { order: 2; } }
.split-feature .media { aspect-ratio: 4 / 5; }
@media (min-width: 900px) { .split-feature .media { aspect-ratio: 5 / 6; } }
.cat-list { list-style: none; padding: 0; margin: 28px 0 0; columns: 2; column-gap: 28px; }
.cat-list li { break-inside: avoid; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: .96rem; color: var(--text); }
@media (max-width: 420px) { .cat-list { columns: 1; } }

/* Duo: luxury and everyday */
.duo { display: grid; gap: 12px; margin-top: clamp(40px, 6vw, 72px); }
@media (min-width: 820px) { .duo { grid-template-columns: 1.3fr 1fr; gap: 16px; } }
.duo figure { margin: 0; }
.duo .media { aspect-ratio: 4 / 3; }
@media (min-width: 820px) { .duo figure:nth-child(2) .media { aspect-ratio: 4 / 4.4; } .duo figure:nth-child(2) { margin-top: 72px; } }
.duo figcaption { margin-top: 14px; font: 500 1.3rem/1.3 var(--serif); color: var(--heading); }

/* Price cards */
.price-row { display: grid; gap: 14px; max-width: 1100px; margin: clamp(36px, 5vw, 56px) auto 0; text-align: left; }
@media (min-width: 820px) { .price-row { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
.price-card { background: var(--surface); border: 1px solid var(--line); border-radius: 26px; padding: 32px 30px; transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.price-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.price-card.featured { background: #0B1D33; border-color: #0B1D33; color: #E9EEF5; --heading: #fff; --muted: #AFC0D6; }
.price-card h3 { margin-bottom: 2px; font-size: 1.7rem; }
.price-card .amount { font: 500 3.4rem/1 var(--serif); letter-spacing: -.02em; color: var(--heading); margin: 8px 0 14px; }
.price-card .amount small { font: 500 .95rem var(--sans); color: var(--muted); letter-spacing: 0; }
.price-card ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; color: var(--muted); font-size: .95rem; }
.price-card li::before { content: "\2014"; margin-right: 8px; opacity: .6; }

/* Full-bleed photo band with overlay copy */
.photo-band { position: relative; margin: 0 clamp(0px, 1vw, 14px); border-radius: clamp(20px, 2.6vw, 34px); overflow: hidden; min-height: min(92svh, 860px); display: flex; align-items: flex-end; color: #fff; isolation: isolate; --heading: #fff; --muted: rgba(255, 255, 255, .88); --link: #fff; --accent: rgba(255, 255, 255, .85); }
.photo-band .band-bg { position: absolute; inset: -8% 0; z-index: -2; }
.photo-band .band-bg img { width: 100%; height: 100%; object-fit: cover; }
.photo-band::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(9, 22, 40, 0) 30%, rgba(9, 22, 40, .7) 100%); }
.photo-band .wrap { width: 100%; padding-bottom: clamp(44px, 7vw, 96px); }
.photo-band h2 { max-width: 13em; font-size: clamp(2.4rem, 5.4vw, 4.4rem); line-height: 1.02; }

/* Join cards */
.join-grid { display: grid; gap: 16px; margin-top: clamp(32px, 5vw, 56px); }
@media (min-width: 820px) { .join-grid { grid-template-columns: repeat(3, 1fr); } }
.join-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 26px; overflow: hidden; }
.join-card .media { border-radius: 0; aspect-ratio: 16 / 10; }
.join-card .body { padding: 26px 28px 30px; display: flex; flex-direction: column; flex: 1; }
.join-card h3 { font-size: 1.8rem; }
.join-card p { color: var(--muted); }
.join-card .links { margin-top: auto; padding-top: 12px; }
.choose { display: grid; gap: 16px; }
@media (min-width: 820px) { .choose { grid-template-columns: 1fr 1fr; } }

/* Closing */
.closing { text-align: center; }
.closing h2 { font-size: clamp(2.6rem, 6.4vw, 5rem); line-height: 1; }
.closing .store-buttons { justify-content: center; margin-top: 32px; }
.closing-photo { margin-top: clamp(48px, 7vw, 88px); aspect-ratio: 21 / 9; }
@media (max-width: 719px) { .closing-photo { aspect-ratio: 4 / 3; } }

/* Page hero with photo (secondary pages) */
.page-hero.with-photo .wrap { border-bottom: 0; padding-bottom: 0; }
.page-photo { margin: clamp(32px, 5vw, 56px) clamp(0px, 1vw, 14px) 0; aspect-ratio: 21 / 9; max-height: 640px; }
@media (max-width: 719px) { .page-photo { aspect-ratio: 4 / 3; } }

/* ---------- Motion ---------- */
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }
.js .reveal.d1 { transition-delay: .12s; } .js .reveal.d2 { transition-delay: .24s; } .js .reveal.d3 { transition-delay: .36s; }
.js .rise .media img, .js .media.rise img, .js .media.rise video { transform: scale(1.12); transition: transform 2.4s var(--ease); }
.js .rise.in .media img, .js .media.rise.in img, .js .media.rise.in video { transform: scale(1); }
.kb img { animation: kb 26s ease-in-out infinite alternate; transform-origin: 50% 60%; }
@keyframes kb { from { scale: 1.02; } to { scale: 1.14; } }
[data-parallax] { will-change: translate; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal, .js .rise .media img, .js .media.rise img, .js .media.rise video { opacity: 1; transform: none; transition: none; }
  .kb img, .orb, .wave i, .doing::before, .talk-phone.in .tap { animation: none; }
  .screens .app, .elli-sheet, .msg, .doing, .step, .app.dim::after { transition: none; }
  [data-parallax] { translate: none !important; }
}
.closing-photo img { object-position: 50% 45%; height: 116%; margin-top: -8%; }
.photo-band .band-bg img, .duo .media img, .split-feature .media img, .mosaic .media img { height: 116%; margin-top: -8%; }
.scrolly-stage .illustration-note { margin-top: 10px; }
@media (max-width: 899px) { .scrolly-stage .illustration-note { margin-top: 6px; font-size: .72rem; } }
@media (max-width: 899px) { .scrolly-stage .iphone { box-shadow: inset 0 0 0 1.5px #7b7f86, inset 0 0 0 3px #1b1c1f, 0 18px 30px -18px rgba(9, 32, 66, .45); } }
.card-photo .tag { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.talk-visual .media { width: 100%; aspect-ratio: 4 / 5; }
.page-hero .talk-visual { margin: 0; }
.page-hero .talk-phone .msg { opacity: 1; transform: none; }

/* Founder portrait (About) */
.founder { margin: 0; max-width: 460px; justify-self: center; }
.founder .media { border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 5; }
.founder img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.founder figcaption { display: grid; gap: 2px; margin-top: 14px; text-align: center; }
.founder figcaption strong { font: 500 1.5rem/1.2 var(--serif); color: var(--heading); }
.founder figcaption span { font-size: .9rem; color: var(--muted); letter-spacing: .04em; }
.founder-quote { margin: 32px 0 0; padding: 4px 0 4px 22px; border-left: 1px solid var(--accent); }
.founder-quote p { font: 500 clamp(1.4rem, 2.6vw, 1.75rem)/1.3 var(--serif); color: var(--heading); margin: 0; }
.founder-quote footer { margin-top: 10px; font-size: .85rem; color: var(--muted); letter-spacing: .04em; }
.prose .creds, .creds { list-style: none; padding: 0; margin: 28px 0 0; border-top: 1px solid var(--line); }
.prose .creds li { margin: 0; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: .98rem; }
ul.coming { list-style: none; padding: 0; margin: 32px 0 0; }
ul.coming .badge { margin-bottom: 14px; }


/* Depth: photos and phones live above the page (Josh, 2026-10-15).
   site.js sets --p (0 → 1 as the element scrolls into view) and --c (-1 … 1, its position in the viewport)
   on every [data-depth]; --mx/--my follow the pointer over the mosaic. Defaults are the resting pose. */
[data-depth] { --p: 1; --c: 0; --mx: 0; --my: 0; }
.mosaic { perspective: 1600px; perspective-origin: 50% 30%; }
.mosaic .media { transform-style: preserve-3d; will-change: transform;
  box-shadow: 0 2px 4px rgba(19, 41, 75, .06), 0 18px 30px -12px rgba(19, 41, 75, .22), 0 50px 80px -30px rgba(19, 41, 75, .35);
  transition: box-shadow .6s var(--ease); }
.mosaic .media::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2;
  background: linear-gradient(135deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 38%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
/* fanned apart and tipped back, then gliding together into the composition */
.mosaic .media:nth-child(1) { transform: translate3d(calc((1 - var(--p)) * -16vw), calc((1 - var(--p)) * 90px), calc(var(--p) * 20px))
  rotateY(calc((1 - var(--p)) * 24deg + var(--mx) * 6deg + 5deg)) rotateX(calc((1 - var(--p)) * 10deg - var(--my) * 5deg + 2deg)) rotateZ(calc((1 - var(--p)) * -5deg)); }
.mosaic .media:nth-child(2) { transform: translate3d(0, calc((1 - var(--p)) * 160px), calc(var(--p) * 70px))
  rotateX(calc((1 - var(--p)) * 18deg - var(--my) * 5deg + 3deg)) rotateY(calc(var(--mx) * 6deg)) scale(calc(.9 + var(--p) * .1)); z-index: 2; }
.mosaic .media:nth-child(3) { transform: translate3d(calc((1 - var(--p)) * 16vw), calc((1 - var(--p)) * 90px), calc(var(--p) * 20px))
  rotateY(calc((1 - var(--p)) * -24deg + var(--mx) * 6deg - 5deg)) rotateX(calc((1 - var(--p)) * 10deg - var(--my) * 5deg + 2deg)) rotateZ(calc((1 - var(--p)) * 5deg)); }
@media (min-width: 900px) { .mosaic .media:nth-child(2) { transform: translate3d(0, calc(-48px + (1 - var(--p)) * 160px), calc(var(--p) * 70px))
  rotateX(calc((1 - var(--p)) * 18deg - var(--my) * 5deg + 3deg)) rotateY(calc(var(--mx) * 6deg)) scale(calc(.9 + var(--p) * .1)); } }
.mosaic .media { opacity: calc(.15 + var(--p) * .85); }

/* phones: turned slightly toward the reader with a real cast shadow, easing as they scroll */
.scrolly-stage, .talk-visual, .closing-mock, .media.mock { perspective: 1400px; }
.depth-phone { transform-style: preserve-3d; will-change: transform;
  transform: rotateY(calc(-14deg + var(--c) * 10deg)) rotateX(calc(6deg + var(--c) * -4deg)) rotateZ(1deg) translateZ(0);
  filter: drop-shadow(30px 40px 40px rgba(9, 32, 66, .28)) drop-shadow(8px 12px 12px rgba(9, 32, 66, .18)); }
.js .media.mock.rise[data-depth] img, .closing-mock[data-depth] img {
  transform: rotateY(calc(var(--c) * -10deg)) rotateX(calc(4deg + var(--c) * 5deg)) translateY(calc((1 - var(--p)) * 60px)) translateZ(0);
  filter: drop-shadow(0 40px 46px rgba(19, 41, 75, .22)) drop-shadow(0 10px 12px rgba(19, 41, 75, .14)); will-change: transform; }
.closing-mock[data-depth] { animation: float 7s ease-in-out infinite; }
@keyframes float { 50% { translate: 0 -10px; } }
@media (prefers-reduced-motion: reduce) {
  [data-depth] { --p: 1 !important; --c: 0 !important; --mx: 0 !important; --my: 0 !important; }
  .closing-mock[data-depth] { animation: none; }
}

/* Living images, site-wide (Josh, 2026-10-15: "all images 3D, alive and off the page, never flat").
   site.js tags every photo with .depth3d and feeds --p (scroll-in 0→1), --c (place in viewport -1…1) and,
   under a mouse, --mx/--my (-.5….5). Three ideas, layered:
   1. Arrival: photos lift out of the page, tipped back, then settle toward the reader.
   2. Presence: layered contact + ambient shadows, a glass edge, and a slow tilt as you scroll past.
   3. Touch: they lean toward the cursor, with a specular light that follows it. */
.depth3d { --p: 1; --c: 0; --mx: 0; --my: 0; --lift: 1; position: relative; transform-style: preserve-3d; will-change: transform;
  transform: perspective(1500px)
    translate3d(0, calc((1 - var(--p)) * 90px), calc(var(--p) * 18px))
    rotateX(calc((1 - var(--p)) * 16deg + var(--c) * -3.5deg * var(--lift) - var(--my) * 9deg))
    rotateY(calc(var(--mx) * 11deg))
    scale(calc(.93 + var(--p) * .07));
  box-shadow: 0 1px 2px rgba(19, 41, 75, .06), 0 14px 24px -10px rgba(19, 41, 75, .2), 0 46px 80px -34px rgba(19, 41, 75, .38);
  transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .5s var(--ease); }
.depth3d.hovering { box-shadow: 0 2px 4px rgba(19, 41, 75, .08), 0 24px 36px -12px rgba(19, 41, 75, .28), 0 70px 110px -40px rgba(19, 41, 75, .45); }
/* glass edge + specular light that tracks the pointer (sits above the photo, never blocks clicks) */
.depth3d::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none;
  background:
    radial-gradient(60% 55% at calc(50% + var(--mx) * 120%) calc(30% + var(--my) * 120%), rgba(255, 255, 255, calc(.06 + (var(--mx) * var(--mx) + var(--my) * var(--my)) * .5)), rgba(255, 255, 255, 0) 70%),
    linear-gradient(135deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 34%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22), inset 0 -30px 60px -40px rgba(9, 22, 40, .35); }
/* a single sweep of light when a photo first arrives */
.depth3d::before { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none; opacity: 0;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, .38) 50%, rgba(255, 255, 255, 0) 65%);
  background-size: 260% 100%; background-position: 130% 0; }
.depth3d.lit::before { animation: sheen 1.6s cubic-bezier(.3, .6, .2, 1) .15s 1 both; }
@keyframes sheen { 0% { opacity: 1; background-position: 130% 0; } 100% { opacity: 1; background-position: -30% 0; } }
/* the photo inside drifts slowly, so nothing is ever perfectly still */
.depth3d img { animation: breathe 18s ease-in-out infinite alternate; }
@keyframes breathe { from { scale: 1; } to { scale: 1.045; } }
/* side-by-side features: the photo turns toward its copy */
.split-feature .depth3d { --lift: 1.4; transform: perspective(1500px) translate3d(0, calc((1 - var(--p)) * 90px), calc(var(--p) * 18px))
  rotateX(calc((1 - var(--p)) * 14deg + var(--c) * -3deg - var(--my) * 9deg)) rotateY(calc(var(--side, 1) * (5deg + (1 - var(--p)) * 14deg) + var(--mx) * 11deg)) scale(calc(.93 + var(--p) * .07)); }
.split-feature.flip .depth3d { --side: -1; }
/* the pair on the home page: the second floats higher and leans the other way */
.duo figure:nth-child(1) .depth3d { --side: 1; }
.duo figure:nth-child(2) .depth3d { animation: float 9s ease-in-out infinite; }
.duo .depth3d { transform: perspective(1500px) translate3d(0, calc((1 - var(--p)) * 110px), calc(var(--p) * 24px))
  rotateX(calc((1 - var(--p)) * 16deg + var(--c) * -4deg - var(--my) * 9deg)) rotateY(calc((1 - var(--p)) * 10deg * var(--side, -1) + var(--mx) * 11deg)) scale(calc(.92 + var(--p) * .08)); }
/* page-top photos: arrive like a print laid onto the page, then tip back as you scroll on */
.page-photo.depth3d { --lift: 2.2; }
/* founder portrait: a framed photo standing on the page */
.founder .depth3d { --lift: 1.2; }
/* cards: the whole card is the object */
.join-card.depth3d { overflow: hidden; }
.join-card.depth3d .media img { animation-duration: 22s; }
/* full-width bands become a framed window that rises into place */
.photo-band.d3b { --p: 1; --c: 0; will-change: transform; transform: perspective(1800px) translate3d(0, calc((1 - var(--p)) * 60px), 0) rotateX(calc((1 - var(--p)) * 9deg + var(--c) * -2deg)) scale(calc(.94 + var(--p) * .06)); }
.photo-band.d3b .band-bg img { animation: breathe 24s ease-in-out infinite alternate; }
/* the hero video sinks gently into the page as you scroll away from it */
.hero-full.d3h { --c: 0; will-change: transform; box-shadow: 0 40px 80px -40px rgba(9, 22, 40, .45); transform: perspective(1800px) rotateX(calc(min(0, var(--c)) * -7deg)) scale(calc(1 + min(0, var(--c)) * .06)); transform-origin: 50% 0; }
@media (prefers-reduced-motion: reduce) {
  .depth3d, .d3b, .d3h { --p: 1 !important; --c: 0 !important; --mx: 0 !important; --my: 0 !important; transition: none; }
  .depth3d img, .photo-band.d3b .band-bg img, .duo figure:nth-child(2) .depth3d, .depth3d.lit::before { animation: none; }
}
@media (max-width: 719px) { .hero-pause { top: 14px; bottom: auto; } }
/* Vision band: the pitch-deck MVP shot keeps its devices in view at every width */
/* "Our vision" band (pitch-deck My Home mockup): the laptop and phone always show in full (Josh 2026-10-20).
   Computers: the band keeps the image's shape and the copy sits in the image's own dark left side.
   Phones: the devices on top, the copy below on the same dark tone. */
.photo-band.band-mvp-wrap { background: #1f1b16; }
.photo-band.band-mvp-wrap::after { background: linear-gradient(90deg, rgba(31, 27, 22, .55) 0%, rgba(31, 27, 22, 0) 45%); }
.photo-band .band-mvp img { height: 100%; margin-top: 0; object-fit: cover; object-position: 100% 50%; }
@media (min-width: 820px) {
  .photo-band.band-mvp-wrap { min-height: 0; height: min(calc((100vw - 2vw) * 1434 / 2151), 92svh); align-items: center; }
  /* On short screens the band is capped; contain keeps both devices whole (the image's left side is plain dark). */
  .photo-band.band-mvp-wrap .band-mvp img { object-fit: contain; }
  .photo-band.band-mvp-wrap .band-bg { inset: 0; }
  .photo-band.band-mvp-wrap .wrap { padding-bottom: 0; }
  .photo-band.band-mvp-wrap .wrap > * { max-width: min(30vw, 420px); }
  .photo-band.band-mvp-wrap h2 { font-size: clamp(2rem, 3.4vw, 3.6rem); }
}
@media (max-width: 819.98px) {
  .photo-band.band-mvp-wrap { display: block; min-height: 0; }
  .photo-band.band-mvp-wrap .band-bg { position: relative; inset: auto; aspect-ratio: 1 / 1; }
  .photo-band.band-mvp-wrap::after { display: none; }
  .photo-band.band-mvp-wrap .wrap { padding-top: 8px; padding-bottom: 40px; }
}

/* Tiles (every .card and .price-card) live in 3D too: a soft layered shadow at rest, they tip up into place as they scroll in,
   lean toward the pointer with a light that follows it, and catch one sweep of light on arrival. Gentler than the photos so
   text stays easy to read. Resting pose (shadow only) without JS or with reduced motion. */
.card, .price-card { position: relative; isolation: isolate;
  box-shadow: 0 1px 2px rgba(19, 41, 75, .05), 0 10px 22px -12px rgba(19, 41, 75, .16), 0 34px 60px -32px rgba(19, 41, 75, .26); }
.js .tile3d[data-depth] { --p: 1; --c: 0; --mx: 0; --my: 0; transform-style: preserve-3d; will-change: transform;
  transform: perspective(1400px)
    translate3d(0, calc((1 - var(--p)) * 56px), calc(var(--p) * 10px))
    rotateX(calc((1 - var(--p)) * 12deg + var(--c) * -2deg - var(--my) * 6deg))
    rotateY(calc(var(--mx) * 7deg))
    scale(calc(.95 + var(--p) * .05));
  transition: opacity .9s ease, transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .5s var(--ease); }
.js .tile3d.hovering { box-shadow: 0 2px 4px rgba(19, 41, 75, .07), 0 20px 34px -14px rgba(19, 41, 75, .26), 0 56px 90px -40px rgba(19, 41, 75, .4);
  transform: perspective(1400px) translate3d(0, -4px, 22px) rotateX(calc(var(--my) * -6deg)) rotateY(calc(var(--mx) * 7deg)); }
.tile3d::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(70% 60% at calc(50% + var(--mx) * 110%) calc(25% + var(--my) * 110%), rgba(255, 255, 255, calc(.05 + (var(--mx) * var(--mx) + var(--my) * var(--my)) * .45)), rgba(255, 255, 255, 0) 70%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55); }
.tile3d::before { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none; opacity: 0;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, .32) 50%, rgba(255, 255, 255, 0) 62%);
  background-size: 260% 100%; background-position: 130% 0; }
.tile3d.lit::before { animation: sheen 1.5s cubic-bezier(.3, .6, .2, 1) .2s 1 both; }
.price-card.featured.tile3d::after, .plan.featured.tile3d::after { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); }
@media (prefers-reduced-motion: reduce) {
  .js .tile3d[data-depth], .js .tile3d.hovering { --p: 1 !important; --c: 0 !important; --mx: 0 !important; --my: 0 !important; transform: none; transition: none; }
  .tile3d.lit::before { animation: none; }
}

/* Vision: the photo's own light strings, live (vision-energy.js draws the photo with its beads moving along the strings) */
.page-photo canvas.energy { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; transform-origin: 50% 50%; }
.page-photo.energy-live img { opacity: 0; }
/* Keep the whole laptop and phone in frame: no zoom animation on the vision band. */
.photo-band.band-mvp-wrap.d3b .band-bg img { animation: none; }

/* Invite page (elliverse.ai/i/<code>, lib/invite.js) */
.invite{max-width:560px;margin:0 auto;padding:72px 20px 96px;text-align:center}.invite h1{font-family:'Cormorant Garamond',serif;font-size:44px;margin:8px 0 12px}
.invite .eyebrow{letter-spacing:.18em;text-transform:uppercase;font-size:12px;opacity:.7}.invite .lede{font-size:18px}.invite-code{font:600 34px/1.2 Manrope,system-ui,sans-serif;letter-spacing:.18em;
margin:14px auto 10px;padding:14px 18px;border:1px solid rgba(19,41,75,.25);border-radius:14px;display:inline-block}.invite-actions{display:flex;flex-direction:column;gap:10px;margin:28px auto 0;max-width:360px}
.invite .small{font-size:13px;opacity:.75}.invite img{height:42px;width:auto;display:block;margin:0 auto 28px}

/* Shop ELLI picks (/shop) */
.picks{list-style:none;margin:0;padding:0}
.picks .card h3{font-size:1.35rem;line-height:1.2}
.picks .card p:last-child{margin-bottom:0}
.picks .pick-photo{display:block;background:#fff;border-radius:14px;padding:16px;margin:-4px -4px 18px;aspect-ratio:1/1}
.picks .pick-photo img{width:100%;height:100%;object-fit:contain}
.picks .pick-price{font-weight:600;font-size:1.1rem;margin:.25rem 0 .5rem}
.picks .pick-price-muted{font-weight:500;font-size:.95rem;opacity:.7}