/* somicai.app — the app's v6 language on the web: a warm ground with colour
   behind glass, ink type that stays light, one orange for going forward, teal
   for what is chosen, an Instrument Serif italic for the one word that sings. */
:root {
  --ground-1: #E4ECE6; --ground-2: #F6F1E8; --ground-3: #F7E3D4;
  --ink: #2B2723; --ink-2: #6B645B; --ink-3: #9A9288; --line: rgba(43, 39, 35, .08);
  --orange: #D65F29; --orange-2: #E8834F; --teal: #2F6E72; --teal-soft: rgba(47, 110, 114, .12);
  --glass: linear-gradient(140deg, rgba(255, 255, 255, .66), rgba(255, 255, 255, .3));
  --glass-blur: blur(26px) saturate(170%);
  --glass-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -1px 0 rgba(255, 255, 255, .3),
                  0 1px 2px rgba(60, 45, 30, .04), 0 14px 34px rgba(60, 45, 30, .09);
  --round: ui-rounded, "SF Pro Rounded", "Nunito", system-ui, sans-serif;
  --serif: "Instrument Serif", "Cormorant Garamond", Georgia, serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --ease: cubic-bezier(.22, .8, .2, 1);
  --soft: cubic-bezier(.32, .72, 0, 1);
  --spring: cubic-bezier(.3, 1.35, .5, 1);
  --pad: clamp(20px, 5vw, 72px);
  --maxw: 1240px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; color: var(--ink); font-family: var(--round); font-weight: 400;
  background: var(--ground-2); -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }
.accent { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.005em; }
.kicker { font: 500 12px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.kicker i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--orange); margin-right: 10px; vertical-align: 1px; box-shadow: 0 0 0 4px rgba(214, 95, 41, .15); }
.display {
  font-weight: 500; letter-spacing: -.04em; line-height: .98;
  font-size: clamp(44px, 6.4vw, 96px); text-wrap: balance;
}
.display .accent { font-size: 1.08em; letter-spacing: -.02em; }
.title { font-weight: 500; letter-spacing: -.035em; line-height: 1.02; font-size: clamp(36px, 5.6vw, 76px); text-wrap: balance; }
.title .accent { font-size: 1.06em; }
.lead { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }

/* The ground: sage → cream → peach, with colour moving slowly behind the glass. */
.ground { position: fixed; inset: 0; z-index: -2; background: linear-gradient(160deg, var(--ground-1) 0%, var(--ground-2) 45%, var(--ground-3) 100%); }
.ground .blob { position: absolute; border-radius: 50%; will-change: transform; }
.ground .b1 { width: 70vw; height: 70vw; left: -22vw; top: -20vw; background: radial-gradient(closest-side, rgba(191,215,204,.75), rgba(191,215,204,0)); animation: drift1 26s var(--ease) infinite alternate; }
.ground .b2 { width: 62vw; height: 62vw; right: -20vw; top: 6vh; background: radial-gradient(closest-side, rgba(243,201,174,.7), rgba(243,201,174,0)); animation: drift2 32s var(--ease) infinite alternate; }
.ground .b3 { width: 56vw; height: 56vw; left: 22vw; bottom: -26vw; background: radial-gradient(closest-side, rgba(233,217,240,.55), rgba(233,217,240,0)); animation: drift3 38s var(--ease) infinite alternate; }
@keyframes drift1 { to { transform: translate(14vw, 10vh) scale(1.15); } }
@keyframes drift2 { to { transform: translate(-12vw, 16vh) scale(.9); } }
@keyframes drift3 { to { transform: translate(-16vw, -12vh) scale(1.2); } }
/* ADR 0069: the fluid lies between the ground and the page; it shows only while the hero or the final section is on screen. */
.fluid-gl { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .6s; }
.fluid-gl.is-on { opacity: 1; }
.grain { position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: .028;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* Glass, as the app's chrome. */
.glass { background: linear-gradient(140deg, rgba(255,255,255,.78), rgba(255,255,255,.46)); box-shadow: var(--glass-shadow); }
.nav.glass { background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }

/* Buttons: orange only moves you forward. Every press springs. */
.btn {
  display: inline-flex; align-items: center; gap: 10px; height: 56px; padding: 0 26px; border: 0; border-radius: 999px;
  font: 600 16.5px var(--round); letter-spacing: -.01em; text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform .22s var(--spring), box-shadow .3s var(--ease), background .3s;
}
.btn:active { transform: scale(.94); transition-duration: .08s; }
.btn-store { background: var(--ink); color: #fff; box-shadow: 0 16px 34px -18px rgba(43, 39, 35, .7); }
.btn-store svg { width: 17px; height: 20px; fill: currentColor; margin-top: -2px; }
.btn-store:hover { transform: translateY(-2px); box-shadow: 0 22px 40px -18px rgba(43, 39, 35, .75); }
.btn-forward { background: linear-gradient(180deg, var(--orange-2), var(--orange)); color: #fff; box-shadow: 0 16px 34px -16px rgba(214, 95, 41, .8); }
.btn-ghost { color: var(--ink); }
.btn-ghost:hover { transform: translateY(-2px); }

/* Nav: one glass capsule. */
.nav { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 80; width: min(calc(100% - 28px), 980px);
  display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 8px 8px 22px; border-radius: 999px; }
.logo { display: block; width: 86px; height: 30px; -webkit-mask: url(/logo.png) left center / contain no-repeat; mask: url(/logo.png) left center / contain no-repeat;
  background: linear-gradient(96deg, var(--ink) 0%, var(--ink) 38%, var(--teal) 52%, var(--orange) 66%, var(--ink) 84%); background-size: 260% 100%; animation: sweep 10s linear infinite; }
@keyframes sweep { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.nav-links { display: flex; gap: 26px; font-size: 14.5px; color: var(--ink-2); }
.nav-links a { text-decoration: none; transition: color .2s; }
.nav-links a:hover { color: var(--ink); }
.nav-right { display: flex; align-items: center; gap: 8px; }
.lang { font: 500 12.5px var(--mono); color: var(--ink-3); text-decoration: none; padding: 8px 10px; border-radius: 999px; }
.lang:hover { color: var(--ink); background: rgba(255, 255, 255, .5); }
.nav .btn { height: 42px; padding: 0 18px; font-size: 14.5px; }

/* Hero */
.hero { min-height: 92svh; display: grid; align-items: center; padding: 120px 0 40px; position: relative; }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(24px, 4vw, 64px); align-items: center; }
.hero .kicker { margin-bottom: 26px; }
.hero .lead { max-width: 30em; margin: 28px 0 36px; }
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.hero-note { margin-top: 18px; font-size: 13.5px; color: var(--ink-3); }

.stage { position: relative; height: min(76svh, 720px); }
/* The phone: a titanium band, a black bezel, glass that catches the light. */
.phone {
  --px: 0px; --py: 0px; --sy: 0px; --pw: min(300px, 62vw);
  position: absolute; left: 50%; top: 50%; width: var(--pw); z-index: 3;
  translate: calc(-50% + var(--px)) calc(-50% + var(--py) + var(--sy));
  border-radius: calc(var(--pw) * 0.15); padding: calc(var(--pw) * 0.034);
  background:
    linear-gradient(#141210, #141210) padding-box,
    linear-gradient(150deg, #E9E4DE 0%, #8D8681 18%, #3E3935 46%, #6E6761 70%, #D8D2CB 100%) border-box;
  border: calc(var(--pw) * 0.012) solid transparent;
  box-shadow:
    0 1px 0 rgba(255,255,255,.5) inset,
    0 2px 6px rgba(30,22,16,.18),
    0 30px 60px -24px rgba(43,30,20,.5),
    0 70px 120px -50px rgba(43,30,20,.45);
}
/* Side keys: silence, volume, power. */
.phone::before { content: ""; position: absolute; left: calc(var(--pw) * -0.026); top: 19%; width: calc(var(--pw) * 0.014); height: 18%;
  border-radius: 3px 0 0 3px; background: linear-gradient(90deg, #8D8681, #4A4541);
  box-shadow: 0 calc(var(--pw) * -0.16) 0 0 #6E6761; }
.phone .screen { position: relative; width: 100%; aspect-ratio: 390 / 844; border-radius: calc(var(--pw) * 0.11); overflow: hidden; background: #EEE7DC; isolation: isolate; }
/* The glass over the screen: one soft diagonal light. */
.phone .screen::before { content: ""; position: absolute; inset: 0; z-index: 9; pointer-events: none; border-radius: inherit;
  background: linear-gradient(118deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.04) 26%, rgba(255,255,255,0) 40%);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.35); }
.phone::after { content: ""; position: absolute; top: calc(var(--pw) * 0.058); left: 50%; translate: -50% 0; z-index: 10;
  width: 31%; height: calc(var(--pw) * 0.085); border-radius: 999px; background: #050404;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04); }
.phone .screen > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fan { --px: 0px; --py: 0px; --sy: 0px; --sr: 0deg; translate: var(--px) calc(var(--py) + var(--sy)); rotate: var(--sr); opacity: 0; left: 50%; top: 50%;
  position: absolute; width: min(188px, 34vw); aspect-ratio: 4 / 5; border-radius: 16px; overflow: hidden; z-index: 2;
  box-shadow: 0 30px 60px -30px rgba(43, 30, 20, .55); will-change: transform; }
.fan img { width: 100%; height: 100%; object-fit: cover; }

/* Sections */
section { position: relative; }
.section-head { max-width: 760px; margin-bottom: clamp(36px, 5vw, 64px); }
.section-head .kicker { display: block; margin-bottom: 20px; }
.section-head .lead { margin-top: 22px; max-width: 34em; }

/* The story: the phone holds still while the steps change. */
.story { padding: 0; }
.story-pin { min-height: 100svh; display: grid; align-items: center; }
.story-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 6vw, 90px); align-items: center; }
.steps { position: relative; min-height: 360px; }
.step { position: absolute; inset: 0 auto auto 0; max-width: 470px; }
.step-num { font: 500 13px var(--mono); color: var(--orange); letter-spacing: .1em; }
.step h3 { font-weight: 500; letter-spacing: -.03em; line-height: 1.02; font-size: clamp(32px, 4vw, 54px); margin: 16px 0 18px; }
.step p { font-size: 18px; line-height: 1.55; color: var(--ink-2); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.chip { font-size: 13.5px; padding: 8px 14px; border-radius: 999px; color: var(--ink-2); }
.rail { display: flex; gap: 8px; margin-bottom: 34px; }
.rail span { height: 3px; width: 46px; border-radius: 3px; background: rgba(43, 39, 35, .12); overflow: hidden; }
.rail span i { display: block; height: 100%; width: 0; background: var(--teal); }
/* The story's phone fills the height it has, its hint below it, in the flow. */
.story .stage { height: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; }
.story .phone { --pw: min(360px, calc((100svh - 150px) / 2.06), 72vw); position: relative; left: auto; top: auto; translate: none; }

/* Style chips: the film's last frame, and its still. */
.style-picker { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 34px; }
.style-chip { border: 0; cursor: pointer; font: 500 14.5px var(--round); color: var(--ink-2); padding: 10px 16px; border-radius: 999px;
  background: rgba(255, 255, 255, .42); box-shadow: inset 0 0 0 1px var(--line); transition: transform .22s var(--spring), background .3s, color .3s, box-shadow .3s; }
.style-chip:active { transform: scale(.94); }
.style-chip.more { cursor: default; background: transparent; box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-3); font-style: normal; }
.style-chip[aria-pressed="true"] { background: var(--teal); color: #fff; box-shadow: 0 10px 22px -12px rgba(47, 110, 114, .9); }
.deck-note { margin-top: 20px; font-size: 14px; color: var(--ink-3); }

/* Features */
.features { padding: clamp(40px, 6vw, 90px) 0; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.feature { border-radius: 28px; padding: 30px 28px 32px; }
.feature .icon { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 26px; }
.feature .icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.feature h3 { font-weight: 600; font-size: 21px; letter-spacing: -.02em; margin-bottom: 10px; }
.feature p { color: var(--ink-2); font-size: 15.5px; line-height: 1.55; }
.t-teal { background: rgba(47, 110, 114, .12); color: var(--teal); }
.t-orange { background: rgba(214, 95, 41, .12); color: var(--orange); }
.t-sky { background: rgba(74, 132, 196, .12); color: #3E6FA6; }
.t-lilac { background: rgba(136, 104, 176, .12); color: #7856A0; }
.t-sage { background: rgba(110, 140, 100, .14); color: #557046; }
.t-ink { background: rgba(43, 39, 35, .08); color: var(--ink); }

/* FAQ */
.faq { padding: clamp(40px, 6vw, 90px) 0; }
.faq-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(30px, 6vw, 90px); }
.qa { border-bottom: 1px solid var(--line); }
.qa button { all: unset; box-sizing: border-box; width: 100%; cursor: pointer; display: flex; justify-content: space-between; gap: 20px; padding: 24px 0; font-weight: 600; font-size: 19px; letter-spacing: -.015em; }
.qa button span:last-child { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .55); box-shadow: inset 0 0 0 1px var(--line); transition: transform .35s var(--soft); }
.qa.open button span:last-child { transform: rotate(45deg); }
.qa .answer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--soft); }
.qa.open .answer { grid-template-rows: 1fr; }
.qa .answer > div { overflow: hidden; }
.qa .answer p { padding: 0 0 26px; color: var(--ink-2); font-size: 16.5px; line-height: 1.6; max-width: 40em; }

/* Final */
.final { padding: clamp(70px, 9vw, 130px) 0 clamp(60px, 7vw, 90px); text-align: center; }
.orb { width: clamp(150px, 18vw, 230px); aspect-ratio: 1; margin: 0 auto 46px; border-radius: 50%; position: relative; animation: float 4.8s ease-in-out infinite;
  background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .95) 0 7%, rgba(255, 255, 255, 0) 22%),
              radial-gradient(circle at 70% 78%, rgba(255, 214, 190, .7), rgba(255, 255, 255, 0) 45%),
              radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .18) 55%, rgba(255, 255, 255, .55) 70%, rgba(255, 255, 255, .1) 72%);
  box-shadow: inset 0 0 40px rgba(255, 255, 255, .6), 0 40px 80px -40px rgba(214, 95, 41, .5); overflow: hidden; }
.orb::before { content: ""; position: absolute; inset: -20%; border-radius: 50%; mix-blend-mode: soft-light; opacity: .9;
  background: conic-gradient(from 0deg, #9FD3C7, #F6B48F, #D9B6F0, #A8C8F0, #9FD3C7); animation: spin 14s linear infinite; }
.orb::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 -18px 30px rgba(214, 95, 41, .18), inset 0 10px 20px rgba(255, 255, 255, .7); }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes float { 50% { transform: translateY(-14px) scale(1.015); } }
.final .title { max-width: 14em; margin: 0 auto; }
.final .lead { margin: 24px auto 38px; max-width: 30em; }

footer { padding: 30px 0 46px; border-top: 1px solid var(--line); }
.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 18px; font-size: 14px; color: var(--ink-3); }
.foot a { text-decoration: none; color: var(--ink-2); margin-left: 18px; }
.foot a:first-child { margin-left: 0; }

/* Reveal: rise 14 pt and fade, 45 ms apart (the app's screen enter). */
.reveal { opacity: 0; transform: translateY(14px); }
.no-motion .reveal { opacity: 1; transform: none; }
.no-motion .fan { display: none; }

@media (max-width: 900px) {
  .nav-links { display: none; }
  .hero-grid, .story-grid, .faq-grid { grid-template-columns: 1fr; }
  .hero { padding-top: 110px; }
  .stage { height: 560px; }
  .grid3 { grid-template-columns: 1fr; }
  .steps { min-height: 0; }
  .step { position: static; max-width: none; margin-bottom: 36px; }
  .story-pin { min-height: 0; padding: 40px 0; }
  .rail { display: none; }
  .story .stage { height: 520px; }
  .lang { padding: 13px 12px; }
  .foot { flex-direction: column; align-items: center; text-align: center; }
  .foot a { display: inline-block; padding: 12px 8px; margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ground .blob, .orb, .orb::before, .logo { animation: none; }
}

/* MARK: - The live phone: the app's own screens, playable. Laid out in iPhone
   points (390 × 844) and scaled to the screen it sits in. */
.live { position: absolute; left: 0; top: 0; width: 390px; height: 844px; transform-origin: 0 0; overflow: hidden;
  background: linear-gradient(170deg, #E3EBE5 0%, #F1ECE3 48%, #F2E2D6 100%); font-family: var(--round); color: var(--ink); }
.ls { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .6s var(--soft), visibility 0s .6s; }
.ls.on { opacity: 1; visibility: visible; transition: opacity .6s var(--soft); }
.ls-status { position: absolute; top: 22px; left: 46px; right: 34px; align-items: center; display: flex; justify-content: space-between; font: 600 16px var(--round); z-index: 5; }
.ls-status svg { width: 74px; height: 14px; fill: var(--ink); }
.ls-close { position: absolute; top: 58px; right: 22px; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  font-size: 22px; color: var(--ink-2); background: rgba(255,255,255,.5); box-shadow: var(--glass-shadow); z-index: 5; }
.ls em { font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-weight: 400; }

.orb-canvas { position: absolute; inset: 0; width: 390px; height: 844px; touch-action: pan-y; cursor: grab; }
.orb-canvas:active { cursor: grabbing; }
.ls-voice-text { position: absolute; left: 0; right: 0; top: 590px; text-align: center; pointer-events: none; }
.ls-title { font-size: 31px; font-weight: 700; letter-spacing: -.03em; }
.ls-title em { font-size: 36px; letter-spacing: -.01em; }
.ls-sub { margin-top: 14px; font-size: 18px; color: var(--ink-2); transition: opacity .35s; }
.ls-time { margin-top: 8px; font: 500 14px var(--mono); color: var(--ink-3); }

.ls-building { position: absolute; inset: 0; transition: opacity .5s var(--soft), transform .6s var(--soft); }
.ls-kicker { position: absolute; top: 108px; left: 28px; font: 600 12px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--teal); }
.ls-h { position: absolute; top: 134px; left: 28px; right: 40px; font-size: 29px; line-height: 1.15; letter-spacing: -.02em; }
.ls-cards { position: absolute; top: 330px; left: 0; height: 190px; width: 100%; }
.ls-card { position: absolute; top: 0; width: 160px; height: 170px; border-radius: 18px; padding: 18px 16px; background: rgba(255,255,255,.72);
  box-shadow: 0 14px 30px -18px rgba(60,45,30,.35), inset 0 1px 0 #fff; font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--ink);
  transition: transform .7s var(--soft), opacity .6s; }
.ls-card small { display: block; font: 500 11px var(--mono); color: var(--teal); margin-bottom: 10px; }
.ls-card::after { content: ""; position: absolute; left: 16px; right: 30px; bottom: 22px; height: 26px;
  background: linear-gradient(var(--line) 0 0) 0 0 / 100% 5px no-repeat, linear-gradient(var(--line) 0 0) 0 11px / 80% 5px no-repeat, linear-gradient(var(--line) 0 0) 0 22px / 60% 5px no-repeat; }
.ls-foot { position: absolute; left: 0; right: 0; top: 700px; text-align: center; }
.ls-foot b { display: block; font-weight: 500; font-size: 17px; margin-bottom: 8px; }
.ls-foot span { font: 500 13px var(--mono); color: var(--ink-3); }

.ls-result { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity .6s var(--soft); }
.ls-build.done .ls-building { opacity: 0; transform: translateY(-20px); }
.ls-build.done .ls-result { opacity: 1; pointer-events: auto; }
.ls-pill { position: absolute; top: 58px; left: 50%; translate: -50% 0; display: flex; align-items: center; gap: 10px; padding: 9px 18px 9px 10px;
  border-radius: 999px; background: rgba(255,255,255,.62); box-shadow: var(--glass-shadow); font-size: 17px; white-space: nowrap; }
.ls-pill span { width: 26px; height: 26px; border-radius: 50%; background: var(--teal); color: #fff; display: grid; place-items: center; font-size: 14px; }
.ls-pager { position: absolute; top: 210px; left: 0; width: 390px; height: 440px; overflow: hidden; touch-action: pan-y; cursor: grab; }
.ls-pager:active { cursor: grabbing; }
.ls-track { display: flex; gap: 16px; padding-left: 36px; will-change: transform; }
.ls-track img { width: 300px; height: 375px; border-radius: 16px; flex: none; box-shadow: 0 24px 44px -26px rgba(43,30,20,.6); user-select: none; -webkit-user-drag: none; pointer-events: none; }
.ls-dots { position: absolute; top: 612px; left: 0; right: 0; display: flex; justify-content: center; gap: 7px; }
.ls-dots i { width: 7px; height: 7px; border-radius: 4px; background: rgba(43,39,35,.2); transition: width .35s var(--soft), background .35s; }
.ls-dots i.on { width: 22px; background: rgba(43,39,35,.65); }
.ls-actions { position: absolute; left: 30px; right: 22px; top: 735px; display: flex; gap: 14px; }
.ls-round { width: 66px; height: 66px; border-radius: 50%; display: grid; place-items: center; font-size: 26px; background: rgba(255,255,255,.7); box-shadow: var(--glass-shadow); }
.ls-ink { flex: 1; height: 66px; border-radius: 999px; background: #2B2723; color: #F6F1E8; display: grid; place-items: center; font-size: 19px; font-weight: 500; }

.ls-export { background: linear-gradient(170deg, #DCE4DE, #EDE6DC); }
.ls-dim { position: absolute; left: 36px; right: 36px; top: 150px; height: 470px; border-radius: 26px; background: #2A2321; opacity: .9; }
.ls-sheet { position: absolute; left: 10px; right: 10px; bottom: 10px; height: 525px; border-radius: 42px; padding: 0 28px;
  background: linear-gradient(160deg, rgba(240,242,236,.97), rgba(233,226,214,.97)); box-shadow: 0 -10px 40px -20px rgba(43,30,20,.45), inset 0 1px 0 #fff; text-align: center; }
.ls-grabber { width: 40px; height: 5px; border-radius: 3px; background: rgba(43,39,35,.25); margin: 10px auto 0; }
.ls-fan { position: relative; height: 172px; margin-top: 26px; }
.ls-fan img { position: absolute; left: 50%; top: 8px; width: 108px; height: 135px; margin-left: -54px; border-radius: 10px;
  box-shadow: 0 16px 30px -16px rgba(43,30,20,.6); outline: 3px solid #fff; transform-origin: 50% 100%; transition: transform .9s var(--spring); }
.ls-ready { margin-top: 10px; font-size: 32px; }
.ls-ready em { font-size: 38px; }
.ls-meta { margin-top: 10px; font-size: 16px; color: var(--ink-2); }
.ls-save { all: unset; position: relative; display: block; width: 100%; height: 62px; margin-top: 26px; border-radius: 999px; overflow: hidden; cursor: pointer;
  background: linear-gradient(180deg, #E07040, var(--orange)); color: #fff; font-size: 20px; font-weight: 600; box-shadow: 0 16px 30px -18px rgba(214,95,41,.9);
  transition: background .4s, transform .22s var(--spring); }
.ls-save:active { transform: scale(.96); }
.ls-save .fill { position: absolute; inset: 0; width: 0; background: rgba(0,0,0,.14); }
.ls-save .label { position: relative; }
.ls-save.saved { background: var(--teal); box-shadow: 0 16px 30px -18px rgba(47,110,114,.9); }
.ls-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 14px; }
.ls-tiles div { height: 92px; border-radius: 22px; background: rgba(255,255,255,.55); box-shadow: inset 0 0 0 1px rgba(255,255,255,.8), 0 6px 16px -10px rgba(43,30,20,.3);
  display: grid; place-items: center; align-content: center; gap: 6px; font-size: 22px; color: var(--ink); }
.ls-tiles b { font-size: 15px; font-weight: 600; }

.live-hint { position: relative; white-space: nowrap; margin: 0; font: 500 12px var(--mono); letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3); display: flex; align-items: center; gap: 10px; }
.live-hint::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); animation: pulse 1.8s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 7px rgba(214,95,41,.0); transform: scale(1.25); } 0%, 100% { box-shadow: 0 0 0 0 rgba(214,95,41,.35); } }

/* The app icon: the woven fish. */
.app-icon { display: block; border-radius: 22.5%; overflow: hidden; box-shadow: 0 30px 60px -28px rgba(43,30,20,.55), 0 0 0 1px rgba(255,255,255,.6) inset; }
.app-icon img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); }
.store-row { display: flex; align-items: center; gap: 14px; }
.store-row .app-icon { width: 56px; height: 56px; flex: none; box-shadow: 0 12px 24px -14px rgba(43,30,20,.55); }
.final-icon { position: relative; width: clamp(150px, 15vw, 210px); aspect-ratio: 1; margin: 0 auto 50px; animation: float 4.8s ease-in-out infinite; }
.final-icon::before { content: ""; position: absolute; inset: -38%; border-radius: 50%; z-index: -1; filter: blur(34px); opacity: .75;
  background: conic-gradient(from 0deg, #9FD3C7, #F6B48F, #D9B6F0, #A8C8F0, #9FD3C7); animation: spin 16s linear infinite; }
.final-icon .app-icon { width: 100%; height: 100%; }

/* After the live-phone rules, so these win on a phone. */
@media (max-width: 900px) {
  .live-hint { white-space: normal; max-width: 86vw; justify-content: center; text-align: center; line-height: 1.6; }
  .live-hint::before { display: none; }
}

/* MARK: - Legal and help pages: the landing's ground, a glass page to read on. */
.doc-page .read-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 95; }
.doc-page .read-progress i { display: block; height: 100%; transform: scaleX(0); transform-origin: 0 50%; background: linear-gradient(90deg, var(--teal), #A8CFC7, var(--orange)); }
.doc-head { padding-top: 150px; padding-bottom: 40px; }
.doc-head .kicker { display: block; margin-bottom: 20px; }
.doc-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.doc-meta span { font: 500 12.5px var(--mono); color: var(--ink-2); padding: 8px 14px; border-radius: 999px; background: rgba(255,255,255,.5); box-shadow: inset 0 0 0 1px var(--line); }
.doc-layout { display: grid; grid-template-columns: 1fr; gap: 24px; padding-bottom: 90px; }
.doc-layout.with-toc { grid-template-columns: 260px 1fr; align-items: start; }
.toc { position: sticky; top: 100px; display: block; border-radius: 24px; padding: 22px 20px; max-height: calc(100vh - 130px); overflow: auto; }
.toc-links { display: flex; flex-direction: column; gap: 2px; }

.toc a { display: block; text-decoration: none; color: var(--ink-2); font-size: 14px; line-height: 1.35; padding: 7px 10px; border-radius: 12px; transition: background .25s, color .25s; }
.toc a:hover { color: var(--ink); background: rgba(255,255,255,.5); }
.toc a.on { color: #fff; background: var(--teal); }
.doc-body { border-radius: 32px; padding: clamp(26px, 5vw, 64px); max-width: 860px; font-size: 17px; line-height: 1.7; color: var(--ink); }
.doc-body h2 { font-weight: 600; font-size: clamp(24px, 2.6vw, 32px); letter-spacing: -.03em; line-height: 1.15; margin: 56px 0 16px; scroll-margin-top: 110px; }
.doc-body h2:first-child { margin-top: 0; }
.doc-body h3 { font-weight: 600; font-size: 19px; letter-spacing: -.01em; margin: 32px 0 10px; scroll-margin-top: 110px; }
.doc-body p { margin: 0 0 16px; color: var(--ink-2); }
.doc-body strong { color: var(--ink); font-weight: 700; }
.doc-body ul { margin: 0 0 18px; padding-left: 0; list-style: none; display: grid; gap: 8px; }
.doc-body li { position: relative; padding-left: 22px; color: var(--ink-2); }
.doc-body li::before { content: ""; position: absolute; left: 4px; top: .7em; width: 6px; height: 6px; border-radius: 50%; background: var(--teal); opacity: .7; }
.doc-body a { color: var(--teal); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.doc-body hr { border: 0; height: 1px; background: var(--line); margin: 40px 0; }
.doc-body code { font: 500 .9em var(--mono); background: rgba(43,39,35,.06); padding: 2px 6px; border-radius: 6px; }
.doc-page .doc-body { margin: 0 auto; width: 100%; }
@media (max-width: 900px) {
  .doc-layout.with-toc { grid-template-columns: 1fr; }
  .toc { position: static; max-height: none; }
  .doc-head { padding-top: 120px; }
  .doc-body { font-size: 16px; border-radius: 26px; }
}
.support-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; padding: 24px 26px; margin: 0 0 34px;
  border-radius: 24px; background: rgba(255,255,255,.55); box-shadow: inset 0 0 0 1px rgba(255,255,255,.8), 0 14px 30px -20px rgba(60,45,30,.35); }
.support-card .kicker { display: block; margin-bottom: 8px; }
.support-card p { margin: 0; }
.doc-body .support-card .support-mail { font-size: clamp(22px, 2.4vw, 28px); font-weight: 600; letter-spacing: -.02em; color: var(--ink); margin-bottom: 4px; }
.toc summary { list-style: none; cursor: pointer; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; }
.toc summary::-webkit-details-marker { display: none; }
.toc summary::after { content: "+"; font: 600 16px var(--round); color: var(--ink-2); transition: transform .3s var(--soft); }
.toc[open] summary::after { transform: rotate(45deg); }
@media (min-width: 901px) { .toc summary { pointer-events: none; } .toc summary::after { display: none; } }
@media (max-width: 900px) { .toc:not([open]) summary { margin-bottom: 0; } .toc { padding: 16px 18px; } }

/* MARK: - The hero phone has a body. Twenty-two slices of its outline, 0.5 %
   of its width apart, make a side about as deep as an iPhone's (≈ 11 %). */
.phone-3d { transform-style: preserve-3d; box-shadow: 0 1px 0 rgba(255,255,255,.55) inset; }
.phone-3d::before { display: none; }
.phone-3d .depth { position: absolute; inset: calc(var(--pw) * -0.012); transform-style: preserve-3d; pointer-events: none; }
.phone-3d .depth i { position: absolute; inset: 0; border-radius: calc(var(--pw) * 0.15);
  transform: translateZ(calc(var(--pw) * -0.005 * var(--k)));
  background: linear-gradient(90deg, #4E4843 0%, #B9B2AB 7%, #7C756F 16%, #46413D 34%, #3B3633 50%, #46413D 66%, #7C756F 84%, #C3BCB5 93%, #4E4843 100%); }
/* The band's middle carries the keys: silence and volume on the left, power on the right. */
.phone-3d .depth i.mid::before, .phone-3d .depth i.mid::after { content: ""; position: absolute; width: calc(var(--pw) * 0.018); border-radius: 3px;
  background: linear-gradient(90deg, #9C958E, #5B5550); }
.phone-3d .depth i.mid::before { left: calc(var(--pw) * -0.012); top: 22%; height: 15%; box-shadow: 0 calc(var(--pw) * -0.17) 0 0 #8A837C; }
.phone-3d .depth i.mid::after { right: calc(var(--pw) * -0.012); top: 27%; height: 11%; }
/* The back carries the shadow on the table. */
.phone-3d .depth i:last-child { background: #24201D;
  box-shadow: 0 2px 6px rgba(30,22,16,.2), 0 34px 60px -22px rgba(43,30,20,.55), 0 80px 120px -50px rgba(43,30,20,.45); }

/* MARK: - The film (ADR 0068): a sticky stage, the world drawn on a canvas,
   the type over it in the DOM. The section is as tall as the scroll it plays
   over; without WebGL (or with reduced motion) it shows its states at rest. */
.film { --travel: 420vh; position: relative; }
.film.is-playing { height: calc(100svh + var(--travel)); }
.film-stage { display: none; }
.film.is-playing .film-stage { display: block; position: sticky; top: 0; height: 100svh; overflow: hidden; }
/* While the film plays, its still stays in the accessibility tree (every beat
   in order) but off screen; its controls leave, the film's own chips serve. */
.film.is-playing .film-still { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.film.is-playing .film-still .still-row, .film.is-playing .film-still .style-picker { display: none; }
.film-gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.film-hud { position: absolute; inset: 0; pointer-events: none; }
.film-head { position: absolute; left: var(--pad); top: clamp(92px, 14svh, 150px); width: min(560px, 40vw); }
.film-kicker { position: relative; height: 1.5em; overflow: hidden; margin-bottom: 16px; }
.film-kicker > span { position: absolute; left: 0; top: 0; white-space: nowrap; }
.film-titles { position: relative; }
.film-title { position: absolute; left: 0; top: 0; width: 100%; font-size: clamp(34px, 4vw, 62px); }
.film-title > div { padding-bottom: .24em; margin-bottom: -.24em; }
.film.is-playing .film-title:not(:first-child), .film.is-playing .film-kicker > span:not(:first-child) { visibility: hidden; }
/* ADR 0068 am. 2 — the voice note is the first frame's subject: its words, as
   said, under a recording's running time. */
.film-rec { position: absolute; left: 50%; top: calc(50% - 64px); translate: -50% 0; margin: 0; display: flex; align-items: center; gap: 10px;
  font: 500 13px var(--mono); letter-spacing: .14em; color: var(--ink-3); opacity: 0; visibility: hidden; }
.film-rec i { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 4px rgba(214, 95, 41, .15); animation: pulse 1.8s ease-in-out infinite; }
.film-transcript { position: absolute; left: 50%; top: 50%; width: min(1000px, 76vw); transform: translateX(-50%); margin: 0;
  text-align: center; font-size: clamp(26px, 2.9vw, 44px); line-height: 1.38; letter-spacing: -.02em; color: var(--ink-2); text-wrap: balance; }
.film-transcript .tk { display: inline-block; position: relative; white-space: nowrap; }
.film-transcript .tk.k { color: var(--ink); }
.film-transcript .w { display: inline-block; }
.film.is-playing .film-transcript .w { opacity: 0; }
.film-transcript .strike { position: absolute; left: -3px; right: -3px; top: 55%; height: 2px; border-radius: 2px; background: var(--ink-3); transform-origin: 0 50%; transform: scaleX(0); }
.film-hook { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); margin: 0; text-align: center;
  font-weight: 500; font-size: clamp(56px, 8.2vw, 128px); letter-spacing: -.045em; line-height: 1.04; color: var(--ink); }
.film-hook > span { display: inline-block; opacity: 0; visibility: hidden; }
.film-hook .accent { letter-spacing: -.015em; font-size: 1.06em; }
.film-count { position: absolute; left: 50%; top: 90%; translate: -50% 6px; margin: 0; font: 500 13px var(--mono); letter-spacing: .16em; color: var(--ink-3); opacity: 0; visibility: hidden; }
.film-count b { color: var(--teal); font-weight: 500; }
.film-brackets > span { position: absolute; left: 0; top: 0; padding-top: 14px; font: 500 11px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); text-align: center; white-space: nowrap; opacity: 0; }
.film-brackets > span::before { content: ""; position: absolute; left: 8px; right: 8px; top: 0; height: 7px; border: 1.5px solid rgba(43, 39, 35, .34); border-top: 0; border-radius: 0 0 5px 5px; transform: scaleX(var(--draw, 0)); }
.film-cap { position: absolute; left: 0; top: 0; font: 500 12px var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; opacity: 0; }
.film-lead { position: absolute; right: var(--pad); top: calc(clamp(92px, 14svh, 150px) + 34px); max-width: 23em; margin: 0; font-size: 17px; line-height: 1.5; color: var(--ink-2); opacity: 0; visibility: hidden; }
.film-style { position: absolute; left: 50%; bottom: 7svh; translate: -50% 0; display: flex; align-items: center; gap: 14px;
  font: 500 12px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); opacity: 0; visibility: hidden; }
.film-names-mask { display: block; height: 1.3em; overflow: hidden; font: italic 400 26px/1.3 var(--serif); letter-spacing: 0; text-transform: none; color: var(--ink); }
.film-names { display: flex; flex-direction: column; }
.film-names span { display: block; height: 1.3em; white-space: nowrap; }
.film-end { position: absolute; left: 0; right: 0; bottom: 6svh; display: flex; flex-direction: column; align-items: center; gap: 12px; opacity: 0; visibility: hidden; pointer-events: auto; }
.film-end .style-picker { justify-content: center; margin: 0; padding: 0 var(--pad); }
.film-end .deck-note { margin: 0; text-align: center; padding: 0 var(--pad); }
.film-mark { position: absolute; left: 0; top: 0; width: 1px; height: 1px; pointer-events: none; }
.film-fps { position: fixed; right: 12px; bottom: 12px; z-index: 200; font: 500 12px var(--mono); padding: 6px 10px; border-radius: 10px; background: rgba(43, 39, 35, .86); color: #fff; }
.film.is-still { padding: clamp(60px, 7vw, 100px) 0; }
.film.is-still .film-mark { position: static; display: block; }
.film-still .still-beats { list-style: none; margin: 0 0 clamp(36px, 5vw, 60px); padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.film-still .still-beats h3 { margin-top: 10px; font-weight: 500; font-size: clamp(22px, 2.2vw, 30px); letter-spacing: -.03em; line-height: 1.1; }
.film-still .still-hook { margin: 0 0 clamp(48px, 6vw, 80px); font-weight: 500; font-size: clamp(48px, 7vw, 104px); letter-spacing: -.045em; line-height: 1.04; }
.film-still .still-row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; margin-bottom: clamp(48px, 6vw, 80px); }
.film-still .still-row img { width: 100%; aspect-ratio: 4 / 5; border-radius: 12px; }
.film-still .still-styles { margin-bottom: 26px; }
@media (max-width: 900px) {
  .film { --travel: 340vh; }
  .film-head { left: 20px; right: 20px; width: auto; top: 88px; }
  .film-title { font-size: clamp(30px, 8.4vw, 42px); }
  .film-transcript { left: 50%; top: 46%; width: calc(100vw - 40px); font-size: clamp(22px, 6.4vw, 30px); }
  .film-rec { top: calc(46% - 48px); }
  .film-hook { font-size: clamp(46px, 13.4vw, 66px); }
  .film-hook > span { display: block; width: max-content; margin: 0 auto; } /* two lines, as on the cover */
  .film-end { bottom: 4svh; }
  .film-end .style-picker { gap: 6px; }
  .film-end .style-chip { padding: 8px 12px; font-size: 13.5px; }
  .film-names-mask { font-size: 22px; }
  .film-still .still-beats { grid-template-columns: 1fr 1fr; }
  .film-still .still-row { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; }
  .film-still .still-row img { width: 62vw; flex: none; scroll-snap-align: start; }
}

/* ADR 0070 — the kickers keep their words for screen readers while the
   glyphs assemble. */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.story-pin { position: relative; }
.story-grid { position: relative; z-index: 1; }

/* MARK: - How it works, the dive (ADR 0072): a sticky stage, the phone under
   the night's canvas, the steps over it. Without WebGL2 or with reduced
   motion none of this applies: the steps and the phone sit in the flow. */
.dive-sheet { display: contents; }
.dive-gl { display: none; }
/* The stage is the LARGE viewport: on a phone Safari's toolbar folds away as
   the page scrolls, and a small-viewport stage left a strip of page under the
   night (founder, 2026-10-08). What must be read sits in the small one. */
.story.is-diving { --travel: 560vh; height: calc(100vh + var(--travel)); height: calc(100lvh + var(--travel)); }
.story.is-diving .story-pin { position: sticky; top: 0; height: 100vh; height: 100lvh; min-height: 0; display: block; padding: 0; overflow: hidden; }
.story.is-diving .dive-sheet { display: block; position: absolute; inset: 0; overflow: hidden; }
.story.is-diving .dive-gl { display: block; position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.story.is-diving .story-grid { position: absolute; inset: 0; z-index: auto; max-width: none; padding: 0; display: block; }
.story.is-diving .story-grid > div:first-child { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.story.is-diving .section-head { position: absolute; left: var(--pad); top: 50%; translate: 0 -50%; width: min(560px, 42vw); margin: 0 !important; }
.story.is-diving .rail { display: none; }
.story.is-diving .steps { position: absolute; left: var(--pad); top: 50%; translate: 0 -50%; width: min(440px, 33vw); min-height: 0; }
.story.is-diving .step { left: 0; top: 50%; translate: 0 -50%; max-width: none; visibility: hidden; }
.story.is-diving .step-num { color: #F0A070; }
.story.is-diving .step h3 { color: #FBF4EA; font-size: clamp(34px, 3.6vw, 56px); }
.story.is-diving .step h3 > div { padding-bottom: .12em; margin-bottom: -.12em; }
.story.is-diving .step p { color: rgba(251, 244, 234, .66); font-size: 17px; }
.story.is-diving .step .chip.glass { color: rgba(251, 244, 234, .86); background: rgba(255, 255, 255, .06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 0 0 1px rgba(255, 255, 255, .09); -webkit-backdrop-filter: none; backdrop-filter: none; }
.story.is-diving .stage { position: absolute; left: 50%; right: 0; top: 0; bottom: 0; z-index: 1; height: auto; }
.story.is-diving .live-phone { will-change: transform; }
html.is-night { background: #0F0C0B; }
/* Safari 26 tints its bars from the background-color of a fixed, full-width
   box at each edge; the grain and the ground there have none, so it falls back
   to the body's cream. It reads a box again when one is shown, not when one
   hides or changes colour (the status bar), so each state shows its own pair:
   the night's while it covers the screen, the body's cream after it. Phones
   and tablets only: on a computer the strips would only sit over the page. */
.edge { display: none; position: fixed; left: 0; right: 0; z-index: 100; pointer-events: none; }
.edge.top { top: 0; height: 8px; }
.edge.bottom { bottom: -8px; height: 12px; }
.edge.night { background: #0F0C0B; }
.edge.day { background: var(--ground-2); }
@media (hover: none) and (pointer: coarse) {
  html.is-night .edge.night, html.was-night:not(.is-night) .edge.day { display: block; }
}
.story.is-diving [data-live].instant .ls, .story.is-diving [data-live].instant .ls-fan img { transition: none !important; }
@media (max-width: 900px) {
  .story.is-diving { --travel: 460vh; }
  .story.is-diving .section-head { left: 20px; right: 20px; top: 76px; translate: none; width: auto; }
  .story.is-diving .stage { left: 0; top: 150px; bottom: 30px; }
  .story.is-diving .story .phone, .story.is-diving .live-phone { --pw: min(240px, 58vw, calc((100svh - 260px) / 2.06)); }
  .story.is-diving .steps { left: 20px; right: 20px; top: auto; bottom: calc(100lvh - 100svh + 6svh); translate: none; width: auto; }
  .story.is-diving .step { top: auto; bottom: 0; translate: none; position: absolute; margin: 0; }
  .story.is-diving .step h3 { font-size: clamp(30px, 8.6vw, 40px); margin: 10px 0 12px; }
  .story.is-diving .step p { font-size: 15.5px; }
}

/* A 390-pt phone: the App Store row (icon, gap, button) was 355.6 pt wide in
   a 350-pt column, so the hero grew 6 pt past the screen and the page slid
   sideways under a finger. The row fits from 375 pt up; under that the
   column still never grows past the screen. */
.hero-grid > * { min-width: 0; }
@media (max-width: 420px) {
  .store-row { gap: 10px; }
  .store-row .btn { padding-inline: 18px; font-size: 16px; }
}