/* talelike.com – shared shell and page components.
   Identity is Kim's approved guideline (brand-kit/GUIDELINE.md + tokens): Forest/Sage/Moss/Sand/Cloud/Charcoal,
   Fraunces for display, Inter for text, misty valley plates, wave ribbons, pearl spheres, arches.
   The homepage's exact layers live in home.css (the approved prototype). */

@font-face { font-family: "Fraunces"; src: url("/fonts/fraunces-roman-variable.subset.woff2") format("woff2"); font-style: normal; font-weight: 300 600; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("/fonts/fraunces-italic-variable.subset.woff2") format("woff2"); font-style: italic; font-weight: 300 600; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/fonts/inter-roman-variable.subset.woff2") format("woff2"); font-style: normal; font-weight: 100 900; font-display: swap; }

:root {
  --forest: #0E2F24; --sage: #6B8F74; --moss: #A7B89F; --sand: #EDE6D8; --cloud: #F6F4F0; --charcoal: #1F2A25;
  --ink: #0B0A0A; --muted: #56645B; --border: #6F7E72; --subtle: #D5DACC; --raised: #FAF7F2; --recessed: #EFE8DF;
  --paper: #FDF8F1; --editor-paper: #FCF7F1; --editor-panel: #FAF7F2; --bottom-paper: #F7F2E9;
  --ok-ink: #244B35; --ok-bg: #E7EEE3; --warn-ink: #786039; --warn-bg: #F3ECDF; --info-ink: #3F6266; --info-bg: #E7EEEB;
  --tl-color-brand-forest: var(--forest); --tl-color-brand-sage: var(--sage); --tl-color-brand-moss: var(--moss); --tl-color-brand-sand: var(--sand);
  --tl-color-brand-cloud: var(--cloud); --tl-color-brand-charcoal: var(--charcoal); --tl-color-neutral-ink: var(--ink); --tl-color-neutral-muted: var(--muted);
  --tl-color-neutral-raised: var(--raised); --tl-color-surface-hero-paper: var(--paper); --tl-color-surface-editor-paper: var(--editor-paper); --tl-color-surface-editor-panel: var(--editor-panel);
  --serif: "Fraunces", Georgia, serif;
  --sans: "Inter", system-ui, sans-serif;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --wrap: min(1232px, calc(100% - 48px));
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;
  --r-sm: 8px; --r-md: 14px; --r-lg: 24px;
  --shadow: 0 0 0 1px rgb(255 255 255 / .7) inset, 0 22px 44px -22px rgb(14 47 36 / .35);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 24px; }
body { margin: 0; background: var(--sand); color: var(--charcoal); font: 400 17px/1.6 var(--sans); font-optical-sizing: auto; overflow-x: clip; }
img, svg, video { display: block; }
img { height: auto; }
a > .i--arrow { display: inline-block; vertical-align: -3px; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
ul, ol { margin: 0; padding: 0; }
ul { list-style: none; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--forest); outline-offset: 3px; border-radius: 6px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--forest); color: var(--cloud); padding: 10px 16px; border-radius: 999px; text-decoration: none; }
.skip:focus { top: 16px; }
.i { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.i--arrow { width: 18px; height: 18px; transition: translate .3s var(--ease-out); }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; font-variation-settings: "SOFT" 14, "WONK" 0; color: var(--ink); text-wrap: balance; margin: 0; }
p { text-wrap: pretty; }

/* ── buttons, eyebrows ─────────────────────────────────────────────────── */
.btn {
  white-space: nowrap; display: inline-flex; align-items: center; gap: 14px; text-decoration: none; border-radius: 999px;
  font: 500 14px/20px var(--sans); min-height: 52px; padding: 0 28px;
  transition: background-color .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; transition: translate .3s var(--ease-out); }
.btn:hover svg { translate: 3px 0; }
.btn:active { scale: .98; }
.btn--primary { background: var(--forest); color: var(--cloud); box-shadow: 0 0 0 1px rgb(246 244 240 / .35) inset; }
.btn--primary:hover { background: #163D30; }
.btn--lg { min-height: 56px; }
.btn--light { background: var(--raised); color: var(--forest); }
.btn--light:hover { background: var(--cloud); }
.btn--outline { color: var(--charcoal); background: var(--raised); box-shadow: 0 0 0 1px rgb(14 47 36 / .18) inset; }
.btn--outline:hover { box-shadow: 0 0 0 1px rgb(14 47 36 / .4) inset; }
.actions { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 28px); flex-wrap: wrap; }
.eyebrow { font: 600 12px/16.8px var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin: 0 0 clamp(16px, 2vw, 28px); display: flex; align-items: center; gap: 24px; }
.eyebrow--rule::after { content: ""; width: 52px; height: 1px; background: currentColor; opacity: .6; flex: none; }
.eyebrow--light { color: var(--cloud); opacity: .8; }

/* ── navigation (over the home hero, or as a bar on every other page) ── */
.nav {
  z-index: 60; width: var(--wrap); margin: 0 auto;
  display: flex; align-items: center; gap: 32px; position: relative;
}
.nav--over { position: absolute; top: clamp(12px, 1.8vw, 26px); left: 50%; translate: -50% 0; }
.nav--bar { padding: clamp(12px, 1.6vw, 22px) 0; }
body:not([data-page="home"]) > .nav--bar { position: relative; }
.nav__logo img { width: clamp(150px, 14.6vw, 210px); height: auto; }
.nav__main { margin: 0 auto; }
.nav__menu { display: flex; gap: 32px; }
.nav__group { position: relative; }
.nav__top, .nav__signin {
  font: 400 16px/24px var(--serif); letter-spacing: -.015em; color: var(--charcoal);
  text-decoration: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
}
.nav__top[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.chev { width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; rotate: 45deg; translate: 0 -2px; transition: rotate .3s var(--ease-out), translate .3s; }
[aria-expanded="true"] > .chev { rotate: 225deg; translate: 0 2px; }
.menu {
  position: absolute; top: calc(100% + 8px); left: -20px; min-width: 300px; padding: 10px;
  background: var(--raised); border-radius: 18px; box-shadow: 0 0 0 1px rgb(14 47 36 / .08), 0 28px 56px -24px rgb(14 47 36 / .45);
  display: grid; gap: 2px; animation: drop .35s var(--ease-out);
}
@keyframes drop { from { opacity: 0; translate: 0 -6px; } }
.menu a { display: flex; gap: 14px; align-items: center; padding: 10px 12px; border-radius: 12px; text-decoration: none; }
.menu a:hover { background: rgb(167 184 159 / .22); }
.menu b { display: block; font: 500 15px/1.3 var(--sans); color: var(--charcoal); }
.menu small { display: block; font: 400 13px/1.4 var(--sans); color: var(--muted); }
.menu__ico { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; flex: none; background: radial-gradient(circle at 35% 30%, #FFFDF8, #EDE8DD 70%, #D9DCCF); box-shadow: inset -3px -4px 8px rgb(107 143 116 / .25); color: var(--forest); }
.menu__ico .i { width: 18px; height: 18px; }
.nav__actions { display: flex; align-items: center; gap: 20px; }
.icon-btn { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; }
.icon-btn:hover { background: rgb(167 184 159 / .25); }
.icon-btn .i { width: 19px; height: 19px; }
.lang { font: 500 13px/1 var(--sans); letter-spacing: .04em; text-decoration: none; color: var(--muted); min-height: 44px; display: inline-flex; align-items: center; }
.lang b { font-weight: 600; color: var(--charcoal); }
.lang:hover b { color: var(--forest); text-decoration: underline; text-underline-offset: 4px; }
.nav__burger, .nav__phone-actions { display: none; }
.nav__burger .i--close { display: none; }
.nav__burger[aria-expanded="true"] .i--open { display: none; }
.nav__burger[aria-expanded="true"] .i--close { display: block; }

.search {
  position: absolute; top: calc(100% + 8px); right: 0; width: min(440px, 100%); z-index: 70;
  background: var(--raised); border-radius: 18px; padding: 16px; box-shadow: 0 0 0 1px rgb(14 47 36 / .08), 0 28px 56px -24px rgb(14 47 36 / .45);
}
.search label { display: block; font: 600 12px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.search input { width: 100%; height: 48px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--border); background: var(--cloud); font: 400 16px/1 var(--sans); color: var(--charcoal); }
.search__list { max-height: min(52vh, 420px); overflow: auto; margin-top: 8px; }
.search__list a { display: block; padding: 10px 12px; border-radius: 10px; text-decoration: none; font: 500 15px/1.35 var(--sans); }
.search__list a small { display: block; font-weight: 400; font-size: 13px; color: var(--muted); }
.search__list a:hover, .search__list a:focus-visible { background: rgb(167 184 159 / .22); }
.search__none { font-size: 14px; color: var(--muted); margin: 12px 4px 4px; }

/* ── page opening: misty sky, ribbon into the page ─────────────────────── */
.phead { position: relative; background: var(--paper); isolation: isolate; padding: clamp(24px, 4vw, 56px) 0 clamp(96px, 10vw, 150px); margin-top: calc(-1 * (clamp(12px, 1.6vw, 22px) * 2 + 68px)); padding-top: calc(clamp(12px, 1.6vw, 22px) * 2 + 68px + clamp(24px, 4vw, 64px)); }
.phead__sky { position: absolute; inset: 0; z-index: -1; background: url("/media/img/hero-sky-960.webp") 70% 30% / cover no-repeat; opacity: .9; }
.phead__sky::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--paper) 18%, rgb(253 248 241 / .55) 55%, rgb(253 248 241 / 0)); }
.phead__in { width: var(--wrap); margin: 0 auto; display: grid; gap: clamp(24px, 4vw, 64px); align-items: center; }
.phead--art .phead__in { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.phead h1 { font-size: clamp(40px, 5.4vw, 76px); line-height: 1.02; letter-spacing: -.03em; margin: 0 0 clamp(16px, 1.8vw, 24px); max-width: 15ch; }
.phead .lede { font: 400 clamp(17px, 1.35vw, 19px)/1.55 var(--sans); color: var(--muted); margin: 0 0 clamp(20px, 2.4vw, 32px); max-width: 56ch; }
.phead__wave { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: clamp(56px, 8vw, 120px); }
.phead__lip { fill: #E8E2D5; filter: drop-shadow(0 -2px 3px rgb(14 47 36 / .12)); }
.phead__ground { fill: var(--sand); }
.phead--forest .phead__ground { fill: var(--forest); }
.crumbs { display: flex; gap: 10px; font: 500 13px/1 var(--sans); color: var(--muted); margin-bottom: 20px; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--forest); text-decoration: underline; }
.phead__art { position: relative; justify-self: end; width: 100%; max-width: 460px; }

.arch { position: relative; aspect-ratio: 4 / 5; border-radius: 999px 999px 24px 24px; overflow: hidden; box-shadow: var(--shadow); background: var(--recessed); }
.arch img { width: 100%; height: 100%; object-fit: cover; }

/* ── sections ──────────────────────────────────────────────────────────── */
.sec { padding: clamp(56px, 7vw, 104px) 0; position: relative; }
.sec + .sec { padding-top: 0; }
.sec--paper { background: var(--bottom-paper); padding-top: clamp(56px, 7vw, 104px) !important; }
.sec--forest { background: var(--forest); color: var(--cloud); padding-top: clamp(56px, 7vw, 104px) !important; }
.sec--forest h2, .sec--forest h3 { color: var(--cloud); }
.sec--forest .sec__lead, .sec--forest .prose p { color: rgb(246 244 240 / .84); }
.sec__in { width: var(--wrap); margin: 0 auto; }
.sec__head { max-width: 760px; margin-bottom: clamp(28px, 3.6vw, 48px); }
.sec h2 { font-size: clamp(32px, 3.4vw, 48px); line-height: 1.06; letter-spacing: -.035em; }
.sec__lead { font-size: clamp(17px, 1.3vw, 19px); color: var(--muted); margin: 16px 0 0; max-width: 62ch; }
.prose { max-width: 65ch; }
.prose p, .prose li { color: var(--charcoal); }
.prose p { margin: 0 0 1em; }
.prose h3 { font-size: clamp(22px, 2vw, 28px); line-height: 1.15; letter-spacing: -.025em; margin: 1.6em 0 .5em; }
.prose h3:first-child { margin-top: 0; }
.prose a, .sec__lead a, .guide a, .fine a { color: var(--forest); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.prose ol { padding-left: 1.3em; display: grid; gap: .5em; margin: 0 0 1em; }
.fine { font-size: 14px; color: var(--muted); }
.duo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.duo--flip { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
.duo--flip .duo__prose { order: 2; }
.duo + .duo { margin-top: clamp(48px, 6vw, 88px); }
.duo__prose > h3:first-child { margin-top: 4px; }
.ticks { display: grid; gap: 12px; margin: 0 0 1.2em; }
.ticks li { display: flex; gap: 12px; align-items: flex-start; }
.ticks .i { width: 20px; height: 20px; margin-top: 3px; color: var(--sage); stroke-width: 2.2; }
.note { padding: 18px 20px; border-radius: 14px; background: var(--info-bg); color: var(--info-ink); font-size: 15px; margin: 0 0 1em; }
.note b { color: var(--charcoal); }

/* ── honest product frames (editor-window language) ───────────────────── */
.frame { margin: 0; border-radius: var(--r-lg); background: var(--editor-panel); overflow: hidden; box-shadow: 0 0 0 1px rgb(255 255 255 / .8) inset, 0 30px 60px -28px rgb(14 47 36 / .45); }
.frame__bar { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid rgb(14 47 36 / .07); }
.frame__title { font: 500 14px/1.3 var(--sans); color: var(--charcoal); }
.frame__tag { margin-left: auto; font: 600 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--info-ink); background: var(--info-bg); padding: 6px 10px; border-radius: 999px; }
.frame__body { padding: 20px; background: var(--editor-paper); display: grid; gap: 14px; font-size: 14px; }
.frame__note { padding: 10px 20px 14px; font: 400 12.5px/1.45 var(--sans); color: var(--muted); }
.ph { display: inline-block; height: .7em; width: var(--w, 60%); max-width: 100%; border-radius: 99px; background: linear-gradient(90deg, #E2DCCF, #ECE7DC); vertical-align: middle; }
.rec { display: grid; grid-template-columns: auto 1fr; gap: 10px 18px; align-items: center; }
.rec dt { font: 500 12.5px/1.3 var(--sans); color: var(--muted); }
.rec dd { margin: 0; min-width: 0; }
.pill { display: inline-flex; align-items: center; gap: 6px; font: 500 12.5px/1 var(--sans); padding: 7px 11px; border-radius: 999px; background: var(--recessed); color: var(--charcoal); white-space: nowrap; }
.pill--ok { background: var(--ok-bg); color: var(--ok-ink); }
.pill--info { background: var(--info-bg); color: var(--info-ink); }
.pill--warn { background: var(--warn-bg); color: var(--warn-ink); }
.pill--off { background: #EEE8E2; color: #8A5147; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
/* r3: the 30-day money-back guarantee (Kim 2026-11-01) – one quiet badge near the plans, linking to the refund policy */
.guarantee { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px 10px 14px; border-radius: 999px; background: var(--ok-bg); color: var(--ok-ink); font: 500 15px/1.35 var(--sans); text-decoration: none; box-shadow: 0 0 0 1px rgb(36 75 53 / .2) inset; }
.guarantee .i { width: 22px; height: 22px; stroke-width: 1.9; }
.guarantee:hover { box-shadow: 0 0 0 1px rgb(36 75 53 / .45) inset; }
.guarantee:hover b { text-decoration: underline; text-underline-offset: 3px; }
.guarantee b { font-weight: 600; }
.price-terms { margin-top: 24px; display: grid; gap: 14px; justify-items: start; }
.price-terms .fine { margin: 0; max-width: 72ch; }
.doc ul { margin: 0 0 1em; padding-left: 1.2em; list-style: disc; }
.doc li { margin: 0 0 .4em; padding-left: .2em; }
.doc li::marker { color: var(--sage); }
.doc dl + h2 { margin-top: 1.4em; }
.row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--raised); box-shadow: 0 0 0 1px rgb(14 47 36 / .06); }
.row__k { font: 500 13.5px/1.35 var(--sans); color: var(--charcoal); }
.row__k small { display: block; font-weight: 400; color: var(--muted); font-size: 12.5px; }
.steps { display: grid; gap: 8px; counter-reset: s; }
.steps .row::before { counter-increment: s; content: counter(s); width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--moss); color: var(--forest); font: 600 12px/1 var(--sans); flex: none; }
.steps .row { justify-content: flex-start; }
.serp { padding: 14px 16px; border-radius: 12px; background: var(--raised); box-shadow: 0 0 0 1px rgb(14 47 36 / .06); }
.serp__url { font: 400 12.5px/1.4 var(--sans); color: var(--muted); }
.serp__t { font: 500 17px/1.3 var(--sans); color: #2B4C6A; margin: 2px 0 4px; }
.serp__d { font: 400 13.5px/1.5 var(--sans); color: var(--charcoal); }
.field { display: grid; gap: 6px; }
.field__l { font: 500 12.5px/1.3 var(--sans); color: var(--muted); }
.field__v { min-height: 40px; padding: 10px 12px; border-radius: 10px; background: var(--cloud); box-shadow: 0 0 0 1px rgb(111 126 114 / .45) inset; font-size: 14px; color: var(--charcoal); }
.toggle { display: inline-block; width: 38px; height: 22px; border-radius: 99px; background: var(--sage); position: relative; flex: none; }
.toggle::after { content: ""; position: absolute; top: 3px; right: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--cloud); }
.bars { display: grid; gap: 10px; }
.bars .row { display: grid; grid-template-columns: 1fr auto; }

/* ── feature dive slot (normal-flow full-bleed visual, never pinned) ──── */
.dive { padding: clamp(56px, 7vw, 104px) 0; background: linear-gradient(180deg, var(--sand), #E6E2D6 50%, var(--sand)); }
.dive__before, .dive__after { width: var(--wrap); margin: 0 auto; max-width: 760px; }
.dive__before { margin-bottom: clamp(28px, 3.6vw, 48px); }
.dive__title { font: 400 clamp(30px, 3.2vw, 46px)/1.08 var(--serif); letter-spacing: -.035em; color: var(--ink); font-variation-settings: "SOFT" 14, "WONK" 0; margin: 0 0 12px; text-wrap: balance; }
.dive__before p:not(.dive__title) { font-size: clamp(17px, 1.3vw, 19px); color: var(--muted); margin: 0; }
.dive__after { margin-top: clamp(24px, 3vw, 40px); }
.dive__after p { margin: 0; font-size: 15px; color: var(--muted); }
.dive__box { margin: 0; position: relative; }
.dive__box picture, .dive__box img { width: 100%; height: auto; }
.dive__box img { aspect-ratio: 16 / 9; object-fit: cover; }
/* Feature films v2: the real product, recorded. Normal flow, plays while in view – never pinned, no text chrome. */
.dive__box--film { width: min(1600px, calc(100% - 2 * clamp(0px, 2.5vw, 40px))); margin: 0 auto; }
.film { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-md); overflow: hidden; background: var(--recessed); box-shadow: 0 0 0 1px rgb(14 47 36 / .08), 0 36px 64px -40px rgb(14 47 36 / .5); }
.film__video { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--recessed); }
.dive__skip { display: inline-block; margin-top: 16px; font: 500 14px/1 var(--sans); color: var(--forest); padding: 12px 0; }

/* ── expert guides (Fictional AI persona) ─────────────────────────────── */
.guide { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.guide__media { margin: 0; position: relative; aspect-ratio: 16 / 9; border-radius: 999px 999px 22px 22px / 60% 60% 22px 22px; overflow: hidden; background: var(--recessed); box-shadow: var(--shadow); }
.guide__media img, .guide__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.guide__media video { opacity: 0; transition: opacity .8s var(--ease-out); }
.guide__media video.is-on { opacity: 1; }
.guide__who { display: flex; gap: 14px; align-items: center; margin: 0 0 14px; }
.guide__who img { width: 48px; height: 48px; border-radius: 50%; box-shadow: 0 0 0 2px var(--cloud); }
.guide__who b { display: block; font: 400 22px/1.2 var(--serif); color: var(--ink); font-variation-settings: "SOFT" 14, "WONK" 0; }
.ai-label { display: inline-block; margin-top: 4px; font: 600 11px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--info-ink); background: var(--info-bg); padding: 5px 9px; border-radius: 999px; }
.guide__text p { margin: 0 0 12px; }
.guide__fine { font-size: 13.5px; color: var(--muted); }

/* ── capability links (balloons as small spheres) ─────────────────────── */
.caps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 12px; }
.cap { display: flex; align-items: center; gap: 16px; padding: 14px 18px 14px 14px; border-radius: 18px; background: var(--raised); text-decoration: none; box-shadow: 0 0 0 1px rgb(14 47 36 / .07), 0 14px 28px -22px rgb(14 47 36 / .4); transition: translate .5s var(--ease-out), box-shadow .5s var(--ease-out); }
.cap:hover, .cap:focus-visible { translate: 0 -3px; box-shadow: 0 0 0 1px rgb(14 47 36 / .14), 0 20px 36px -22px rgb(14 47 36 / .5); }
.cap__ball { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; flex: none; color: var(--forest);
  background: radial-gradient(circle at 30% 24%, rgb(255 255 255 / .95) 0 8%, transparent 24%), radial-gradient(circle at 42% 38%, #FFFDF8, #F2EEE5 55%, #D3D9CA); box-shadow: inset -4px -6px 12px rgb(107 143 116 / .3), 0 8px 16px -10px rgb(14 47 36 / .45); }
.cap__ball .i { width: 24px; height: 24px; }
.cap__txt { flex: 1; min-width: 0; }
.cap__txt b { display: block; font: 400 21px/1.2 var(--serif); color: var(--ink); font-variation-settings: "SOFT" 14, "WONK" 0; }
.cap__txt small { display: block; font-size: 14px; color: var(--muted); line-height: 1.4; }
.cap > .i--arrow { color: var(--sage); }
.sec--forest .cap { background: rgb(246 244 240 / .06); box-shadow: 0 0 0 1px rgb(246 244 240 / .14); }
.sec--forest .cap__txt b { color: var(--cloud); }
.sec--forest .cap__txt small { color: rgb(246 244 240 / .75); }

/* ── tiles for overview/audience pages ─────────────────────────────────── */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 20px; }
.tile { border-radius: 18px; background: var(--raised); padding: 24px; box-shadow: 0 0 0 1px rgb(14 47 36 / .07); display: grid; gap: 10px; align-content: start; }
.tile h3 { font-size: 24px; line-height: 1.2; letter-spacing: -.02em; }
.tile p { margin: 0; color: var(--muted); font-size: 15.5px; }
.tile a.more { font: 500 14px/1 var(--sans); color: var(--forest); padding: 10px 0 0; display: inline-flex; gap: 8px; align-items: center; }
.tile--img { padding: 0; overflow: hidden; }
.tile--img img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.tile--img > div { padding: 20px 22px 24px; display: grid; gap: 8px; }

/* ── editor window on subpages ─────────────────────────────────────────── */
.edemo { margin: 0; }
.edemo__stage { position: relative; width: 100%; aspect-ratio: 840 / 405; container-type: inline-size; --u: calc(100cqw / 840); }
.edemo .app { left: 0; top: 0; }
.edemo .blocks { left: calc(617 * var(--u)); top: calc(85 * var(--u)); }
.edemo__cap { margin-top: 16px; font-size: 14px; color: var(--muted); max-width: 70ch; }

/* ── closing band ──────────────────────────────────────────────────────── */
.cta { position: relative; background: var(--forest); color: var(--cloud); padding: clamp(40px, 5vw, 72px) 0 clamp(56px, 6vw, 88px); margin-top: clamp(48px, 6vw, 88px); }
.cta__wave { position: absolute; left: 0; right: 0; bottom: calc(100% - 1px); width: 100%; height: clamp(48px, 6vw, 96px); }
.cta__lip { fill: #E8E2D5; }
.cta__ground { fill: var(--forest); }
.cta__in { width: var(--wrap); margin: 0 auto; display: flex; flex-wrap: wrap; gap: 24px 48px; align-items: end; justify-content: space-between; }
.cta h2 { color: var(--cloud); font-size: clamp(30px, 3.2vw, 44px); line-height: 1.08; letter-spacing: -.03em; max-width: 20ch; }
.cta p { color: rgb(246 244 240 / .82); margin: 12px 0 0; max-width: 56ch; }
.cta .btn--outline { background: transparent; color: var(--cloud); box-shadow: 0 0 0 1px rgb(246 244 240 / .45) inset; }
.cta .btn--outline:hover { box-shadow: 0 0 0 1px var(--cloud) inset; }
.cta + .foot { margin-top: 0; }
.cta + .foot .foot__wave { display: none; }

.related { margin-top: clamp(32px, 4vw, 56px); display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; }
.related__t { margin: 0; font: 600 12px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.related ul { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.related a { display: inline-flex; gap: 6px; align-items: center; min-height: 44px; font: 500 15px/1 var(--sans); color: var(--forest); text-decoration: none; }
.related a:hover { text-decoration: underline; text-underline-offset: 4px; }
.related .i--arrow { width: 15px; height: 15px; }
.next-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* ── pricing table ─────────────────────────────────────────────────────── */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.plan { border-radius: 22px; background: var(--raised); padding: 28px 24px; box-shadow: 0 0 0 1px rgb(14 47 36 / .08); display: grid; gap: 14px; align-content: start; }
.plan--mid { background: var(--forest); color: var(--cloud); box-shadow: 0 30px 60px -30px rgb(14 47 36 / .6); }
.plan--mid h3, .plan--mid .plan__price b { color: var(--cloud); }
.plan--mid .plan__fine, .plan--mid .plan__price span { color: rgb(246 244 240 / .78); }
.plan h3 { font-size: 30px; letter-spacing: -.02em; }
.plan__price { display: flex; align-items: baseline; gap: 8px; }
.plan__price b { font: 400 44px/1 var(--serif); color: var(--ink); letter-spacing: -.03em; font-variation-settings: "SOFT" 14, "WONK" 0; }
.plan__price span { color: var(--muted); font-size: 15px; }
.plan__fine { font-size: 13.5px; color: var(--muted); margin: 0; }
.plan .btn { justify-content: center; }
.plan--mid .btn--light { color: var(--forest); }
.table-wrap { overflow-x: auto; margin-top: 8px; border-radius: 18px; box-shadow: 0 0 0 1px rgb(14 47 36 / .08); background: var(--raised); }
.compare { width: 100%; border-collapse: collapse; min-width: 640px; font-size: 15px; }
.compare caption { text-align: left; padding: 16px 20px 0; font-size: 13.5px; color: var(--muted); caption-side: bottom; padding-bottom: 16px; }
.compare th, .compare td { padding: 14px 20px; border-bottom: 1px solid var(--subtle); text-align: left; vertical-align: top; }
.compare thead th { font: 600 13px/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); background: var(--recessed); }
.compare tbody th { font-weight: 500; color: var(--charcoal); }
.compare td { color: var(--charcoal); font-variant-numeric: tabular-nums; }
.compare .no { color: var(--muted); }
.compare tr:last-child > * { border-bottom: 0; }
.faq { display: grid; gap: 10px; max-width: 820px; }
.faq details { border-radius: 14px; background: var(--raised); box-shadow: 0 0 0 1px rgb(14 47 36 / .07); }
.faq summary { cursor: pointer; padding: 18px 22px; font: 500 16px/1.4 var(--sans); list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 300 22px/1 var(--sans); color: var(--sage); }
.faq details[open] summary::after { content: "–"; }
.faq details > div { padding: 0 22px 18px; color: var(--charcoal); }
.faq details > div p { margin: 0 0 .8em; }

/* ── forms (contact) ───────────────────────────────────────────────────── */
.form { display: grid; gap: 18px; max-width: 620px; }
.form label { font: 500 14px/1.3 var(--sans); color: var(--charcoal); display: grid; gap: 8px; }
.form .hint { font-weight: 400; color: var(--muted); font-size: 13.5px; }
.form input, .form select, .form textarea { font: 400 16px/1.5 var(--sans); color: var(--charcoal); background: var(--cloud); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; width: 100%; }
.form textarea { min-height: 160px; resize: vertical; }
.form input:focus-visible, .form select:focus-visible, .form textarea:focus-visible { outline: 2px solid var(--forest); outline-offset: 1px; }
.form [aria-invalid="true"] { border-color: #8A5147; }
.form__err { color: #8A5147; font-size: 14px; margin: 0; }
.form__ok { color: var(--ok-ink); background: var(--ok-bg); padding: 12px 14px; border-radius: 12px; margin: 0; font-size: 15px; }
.contact-card { border-radius: 22px; background: var(--raised); padding: 28px; box-shadow: 0 0 0 1px rgb(14 47 36 / .08); display: grid; gap: 10px; }
.contact-card a.mail { font: 400 clamp(20px, 2vw, 26px)/1.2 var(--serif); color: var(--forest); word-break: break-all; }

/* ── legal documents ───────────────────────────────────────────────────── */
.doc { max-width: 72ch; }
.doc h2 { font-size: clamp(24px, 2.4vw, 32px); margin: 1.6em 0 .5em; letter-spacing: -.02em; }
.doc h2:first-of-type { margin-top: .4em; }
.doc dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 20px; margin: 0 0 1em; }
.doc dt { color: var(--muted); }
.doc dd { margin: 0; }

/* ── film page ─────────────────────────────────────────────────────────── */
.chapters { display: grid; gap: 12px; counter-reset: ch; }
.chapter { display: grid; grid-template-columns: 168px 1fr; gap: 18px; align-items: center; padding: 12px; border-radius: 18px; background: var(--raised); box-shadow: 0 0 0 1px rgb(14 47 36 / .07); }
.chapter img { width: 168px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 12px; }
.chapter h3 { font-size: 21px; line-height: 1.2; letter-spacing: -.02em; }
.chapter h3::before { counter-increment: ch; content: counter(ch) " · "; color: var(--sage); }
.chapter p { margin: 4px 0 0; font-size: 15px; color: var(--charcoal); }
.chapter .state { font-size: 13px; color: var(--muted); }
.chapter a { color: var(--forest); font: 500 14px/1 var(--sans); }

/* ── footer ────────────────────────────────────────────────────────────── */
.foot { position: relative; background: var(--forest); color: rgb(246 244 240 / .82); margin-top: clamp(48px, 6vw, 88px); }
.foot__wave { position: absolute; left: 0; right: 0; bottom: calc(100% - 1px); width: 100%; height: clamp(40px, 5vw, 80px); }
.foot__lip { fill: #E8E2D5; }
.foot__ground { fill: var(--forest); }
.foot__in { width: var(--wrap); margin: 0 auto; padding: clamp(40px, 5vw, 72px) 0 32px; display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 32px; }
.foot__logo img { width: 190px; height: auto; }
.foot__tag { font: 400 20px/1.3 var(--serif); color: var(--cloud); margin: 16px 0 8px; font-variation-settings: "SOFT" 14, "WONK" 0; }
.foot__house { font-size: 14px; margin: 0; max-width: 34ch; }
.foot a { color: inherit; text-decoration: none; }
.foot a:hover { color: var(--cloud); text-decoration: underline; text-underline-offset: 4px; }
.foot__house a { text-decoration: underline; text-underline-offset: 3px; }
.foot__h { font: 600 12px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--moss); margin: 8px 0 14px; }
.foot__col ul { display: grid; gap: 2px; }
.foot__col a { display: inline-flex; min-height: 36px; align-items: center; font-size: 15px; }
.foot__base { width: var(--wrap); margin: 0 auto; padding: 20px 0 32px; border-top: 1px solid rgb(246 244 240 / .14); display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 13.5px; }
.foot__base p { margin: 0; }
.motion-toggle { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px; border-radius: 999px; box-shadow: 0 0 0 1px rgb(246 244 240 / .3) inset; color: var(--cloud); font-size: 13.5px; }
.motion-toggle__dot { width: 28px; height: 16px; border-radius: 99px; background: var(--sage); position: relative; }
.motion-toggle__dot::after { content: ""; position: absolute; top: 2px; left: 14px; width: 12px; height: 12px; border-radius: 50%; background: var(--cloud); transition: left .3s var(--ease-out); }
.motion-toggle[aria-pressed="false"] .motion-toggle__dot { background: rgb(246 244 240 / .25); }
.motion-toggle[aria-pressed="false"] .motion-toggle__dot::after { left: 2px; }

/* ── 404 ───────────────────────────────────────────────────────────────── */
.lost { display: grid; gap: 12px; }

/* ── responsive ────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .nav__menu { gap: 20px; }
  .nav__actions { gap: 12px; }
  .foot__in { grid-template-columns: 1fr 1fr 1fr; }
  .foot__brand { grid-column: 1 / -1; }
}
@media (max-width: 899px) {
  body { font-size: 16px; }
  .nav { gap: 12px; }
  .nav__logo img { width: 128px; }
  .nav__signin, .nav__cta { display: none; }
  .nav__actions { margin-left: auto; gap: 4px; }
  .nav__burger { display: grid; }
  .nav__main { display: none; position: absolute; top: calc(100% + 8px); left: 0; right: 0; margin: 0; padding: 12px; border-radius: 20px; background: var(--raised); box-shadow: 0 0 0 1px rgb(14 47 36 / .08), 0 28px 56px -24px rgb(14 47 36 / .45); max-height: calc(100dvh - 96px); overflow: auto; z-index: 70; }
  .nav__main.is-open { display: block; }
  .nav__menu { flex-direction: column; gap: 0; }
  .nav__top { width: 100%; justify-content: space-between; padding: 0 8px; font-size: 18px; }
  .menu { position: static; box-shadow: none; background: transparent; padding: 0 0 8px; min-width: 0; animation: none; }
  .nav__phone-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 16px 8px 4px; border-top: 1px solid var(--subtle); margin-top: 8px; }
  .nav__phone-actions .nav__signin { display: inline-flex; }
  .search { left: 0; width: auto; }
  .phead { margin-top: -84px; padding-top: calc(84px + 24px); }
  .phead--art .phead__in { grid-template-columns: 1fr; }
  .phead__art { justify-self: start; max-width: 340px; }
  .duo, .duo--flip, .guide { grid-template-columns: 1fr; }
  .duo--flip .duo__prose { order: 0; }
  .plans { grid-template-columns: 1fr; }
  .chapter { grid-template-columns: 1fr; }
  .chapter img { width: 100%; }
  .edemo__stage { aspect-ratio: auto; --u: .74px; display: flex; flex-direction: column; gap: 16px; }
  .dive__box--film { width: 100%; }
  .film { border-radius: 0; }
}
@media (max-width: 560px) {
  .foot__in { grid-template-columns: 1fr 1fr; }
  .rec { grid-template-columns: 1fr; gap: 4px; }
  .rec dd { margin-bottom: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
:root[data-motion="off"] .balloon { animation: none; }
@media print {
  .nav, .foot, video, .motion-toggle, .film__glyph { display: none !important; }
  .phead__sky, .phead__wave { display: none; }
}

/* ── clips that play once, then hold ───────────────────────────────────── */
.clip { margin: 0; }
.clip__box { position: relative; border-radius: 22px; overflow: hidden; background: var(--recessed); box-shadow: var(--shadow); }
.clip__box img, .clip__box video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.clip__box video { opacity: 0; transition: opacity .8s var(--ease-out); }
.clip__box video.is-on { opacity: 1; }
.clip figcaption { margin-top: 12px; font-size: 14px; color: var(--muted); }
.clip--arch .clip__box { border-radius: 999px 999px 22px 22px / 70% 70% 22px 22px; }
.scene-link { text-decoration: none; color: inherit; }
.scene-link:hover { box-shadow: 0 0 0 1px rgb(14 47 36 / .16), 0 18px 34px -22px rgb(14 47 36 / .45); }
.scene-link .more { font: 500 14px/1 var(--sans); color: var(--forest); display: inline-flex; gap: 8px; align-items: center; }

/* ── small-screen hardening (found by tools/shoot.py) ──────────────────── */
.crumbs a, .crumbs span { display: inline-flex; align-items: center; min-height: 24px; }
.row { flex-wrap: wrap; }
.frame__bar { flex-wrap: wrap; }
@media (max-width: 899px) {
  .duo, .duo--flip, .guide { grid-template-columns: minmax(0, 1fr); }
  .duo__proof, .duo__prose { min-width: 0; }
  .app .tool, .doc__toolbar .para { min-width: 32px; min-height: 32px; }
  .edemo .app__bar { gap: 10px; }
}

.plan .btn { white-space: normal; text-align: center; min-height: 52px; height: auto; padding-top: 10px; padding-bottom: 10px; }
h1, h2, .dive__title { overflow-wrap: break-word; hyphens: auto; }
.phead { overflow-x: clip; }
main:has(> .cta:last-child) + .foot { margin-top: 0; }
main:has(> .cta:last-child) + .foot .foot__wave { display: none; }
main:has(> .cta:last-child) + .foot .foot__in { border-top: 1px solid rgb(246 244 240 / .1); }
@media (max-width: 899px) {
  .edemo .blocks { left: auto; top: auto; }
}

/* ══ Round 2 – layered subpages (Kim 2026-10-31) ═══════════════════════════════════════════════════════════
   The homepage's language on every subpage: tonal bands with ribbon edges, painted plates, depth on proof
   frames, a staggered rhythm in card groups and one calm reveal. Nothing pinned, no scroll listeners. */

/* ── pearl balloon (always a feature container: glyph + name) ── */
.pearl {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6%; border-radius: 50%; text-align: center;
  background: radial-gradient(circle at 30% 24%, rgb(255 255 255 / .95) 0 7%, transparent 22%), radial-gradient(circle at 42% 38%, #FFFDF8 0%, #F8F4EC 50%, rgb(232 231 221 / .9) 74%, rgb(200 207 192 / .72) 100%);
  box-shadow: inset -10px -14px 26px rgb(107 143 116 / .28), inset 0 0 0 1px rgb(255 255 255 / .75), 0 22px 40px -18px rgb(14 47 36 / .4);
}
.pearl svg { width: 32%; height: 32%; flex: none; filter: drop-shadow(0 2px 2px rgb(14 47 36 / .18)); }
.pearl strong { font: 400 var(--pearl-fs, 16px) / 1.1 var(--serif); letter-spacing: -.02em; color: var(--ink); font-variation-settings: "SOFT" 14, "WONK" 0; }

/* ── subpage hero art: sky + balloon + ribbon / real window / expert (site/hero-brainstorm/DECISION.md) ── */
.phead--layered .phead__in { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
.phead--layered .phead__art { max-width: 640px; }
.hart { position: relative; aspect-ratio: 6 / 5; container-type: inline-size; isolation: isolate; --win-surround: var(--editor-panel); --sky-pos: 50% 40%; --sky-filter: none; }
.hart__back { position: absolute; inset: 0; z-index: 0; }
.hart__sky { position: absolute; inset: 0 0 6% 4%; background: url("/media/img/hero-sky-960.webp") var(--sky-pos) / cover no-repeat; filter: var(--sky-filter);
  -webkit-mask-image: radial-gradient(ellipse 56% 54% at 58% 46%, #000 30%, transparent 100%); mask-image: radial-gradient(ellipse 56% 54% at 58% 46%, rgb(0 0 0) 30%, transparent 100%); }
.hart__ribbon { position: absolute; left: 0; right: 0; bottom: 4%; width: 100%; height: 32%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14% 86%, transparent); mask-image: linear-gradient(90deg, transparent, rgb(0 0 0) 14% 86%, transparent); }
.hart__lip { fill: #F6F1E8; filter: drop-shadow(0 -2px 3px rgb(14 47 36 / .16)); }
.hart__moss { fill: var(--moss); }
.hart__forest { fill: var(--forest); }
.hart__pearl { position: absolute; left: 3%; top: 2%; width: 21cqw; height: 21cqw; --pearl-fs: max(11px, 3.3cqw); animation: hart-bob 7.5s ease-in-out infinite alternate; }
.hart__win { position: absolute; z-index: 2; right: 0; top: 17%; width: 74%; border-radius: 2.2cqw; overflow: hidden; background: var(--win-surround);
  box-shadow: 0 0 0 1px rgb(255 255 255 / .8) inset, 0 4cqw 7cqw -3.6cqw rgb(14 47 36 / .5); animation: hart-settle 1s var(--ease-out) .12s both; }
.hart__bar { display: flex; align-items: center; gap: 1.6cqw; height: 7cqw; padding: 0 2.4cqw; font: 500 max(11px, 2.1cqw) / 1 var(--sans); color: var(--charcoal); }
.hart__bar img { width: 3cqw; height: auto; }
.hart__shot { display: block; width: calc(100% - 2.8cqw); height: auto; margin: 0 1.4cqw 1.4cqw; border-radius: 1.2cqw; aspect-ratio: var(--win-ar); object-fit: cover; background: var(--recessed); }
.hart__expert { position: absolute; z-index: 3; left: -1%; bottom: 3%; width: 40%; display: grid; justify-items: center; animation: hart-settle 1.1s var(--ease-out) .42s both; }
.hart__expert img { width: 100%; height: auto; filter: drop-shadow(0 2.4cqw 3cqw rgb(14 47 36 / .3));
  -webkit-mask-image: linear-gradient(to bottom, #000 76%, transparent); mask-image: linear-gradient(to bottom, rgb(0 0 0) 76%, transparent); }
.hart--posed .hart__expert img { -webkit-mask-image: none; mask-image: none; }
/* The posed figure's object reaches over the window edge: keep a paper gutter there so it never covers the product text. */
.hart--posed .hart__win { width: 72%; }
.hart--posed .hart__expert { left: -4%; width: 38%; }
.hart--posed .hart__shot { width: calc(100% - 10.4cqw); margin-left: 9cqw; }
/* The label never sets the figure's width (its 10px floor made phone figures swell over the balloon). */
.hart__expert { grid-template-columns: 100%; }
/* «Name · Your … assistant» is wider than the figure: start it where the figure is visible, never past the art's left edge. */
.hart--posed .hart__expert .ai-label { justify-self: start; margin-left: 11%; }
@container (max-width: 480px) {
  .hart--posed .hart__expert { left: 1%; width: 36%; }
  .hart__expert .ai-label { justify-self: start; font-size: 9px; letter-spacing: .06em; }
}
.hart__expert .ai-label { margin-top: -7%; position: relative; white-space: nowrap; font-size: max(10px, 1.7cqw); box-shadow: 0 0 0 1px rgb(255 255 255 / .7); }
.hart--solo .hart__win { right: 1%; top: 19%; width: 71%; }
/* per-page tone (CODEX-2.md «Talelike identity layer»): landscape crop + surround, never a new palette */
.hart--cms { --sky-pos: 28% 52%; --win-surround: var(--editor-paper); }
.hart--crm { --sky-pos: 58% 70%; --sky-filter: saturate(1.08) hue-rotate(-6deg); --win-surround: var(--sand); }
.hart--seo { --sky-pos: 82% 24%; --sky-filter: saturate(.85) hue-rotate(10deg); --win-surround: var(--cloud); }
.hart--analytics { --sky-pos: 50% 30%; --sky-filter: saturate(.7) brightness(.98); --win-surround: var(--forest); }
.hart--analytics .hart__bar { color: var(--cloud); }
.hart--analytics .hart__bar img { filter: brightness(0) invert(.95); }
.hart--marketing { --sky-pos: 24% 62%; --sky-filter: sepia(.08) brightness(1.03); --win-surround: var(--paper); }
.hart--shop { --sky-pos: 70% 60%; --sky-filter: sepia(.16) saturate(.95); --win-surround: var(--sand); }
.hart--product { --sky-pos: 62% 44%; --win-surround: var(--editor-paper); }
@keyframes hart-settle { from { opacity: 0; transform: translateY(14px); } }
@keyframes hart-bob { from { translate: 0 -4px; } to { translate: 0 5px; } }

/* page opening without art: the misty mountain plate on the right */
.phead__plate { position: absolute; z-index: -1; right: -3%; bottom: clamp(40px, 6vw, 96px); width: min(56vw, 880px); opacity: .5; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 45%); mask-image: linear-gradient(90deg, transparent 0, rgb(0 0 0) 45%); }

/* ── tonal bands with ribbon edges ── */
.sec--band { position: relative; z-index: 1; background: var(--band); padding-top: clamp(64px, 8vw, 112px) !important; padding-bottom: clamp(64px, 8vw, 112px); }
.sec--paper { --band: var(--bottom-paper); }
.sec--forest { --band: var(--forest);
  background: radial-gradient(ellipse 34% 40% at 14% 96%, rgb(167 184 159 / .3), transparent 70%), radial-gradient(ellipse 30% 50% at 96% 30%, rgb(167 184 159 / .16), transparent 70%), var(--forest); }
.band__in, .band__out { position: absolute; left: 0; right: 0; width: 100%; pointer-events: none; }
.band__in { bottom: calc(100% - 1px); height: clamp(44px, 6vw, 96px); }
.band__out { top: calc(100% - 1px); height: clamp(40px, 5.4vw, 88px); }
.band__ground { fill: var(--band); }
.band__lip { fill: #F4EFE6; filter: drop-shadow(0 -2px 3px rgb(14 47 36 / .12)); }
.band__moss { fill: var(--moss); opacity: .8; }
.sec--band:nth-of-type(even) > .band__in, .sec--band:nth-of-type(odd) > .band__out { transform: scaleX(-1); }
.sec--band:has(+ .sec--band) > .band__out, .sec--band:has(+ .cta) > .band__out, .sec--band:last-child > .band__out { display: none; }
.sec--band + .sec, .sec--band + .dive, .sec--band + .story { padding-top: clamp(104px, 12vw, 176px); }
.phead + .sec--band > .band__in { display: none; }
.phead:has(+ .sec--paper) .phead__ground { fill: var(--bottom-paper); }
.phead:has(+ .sec--forest) .phead__ground { fill: var(--forest); }
.sec--band > .sec__in { position: relative; z-index: 1; }
.band__mist { position: absolute; left: 0; top: 0; width: 100%; height: auto; opacity: .16; pointer-events: none;
  -webkit-mask-image: linear-gradient(to right, #000 0 5%, transparent 9% 89%, #000 95% 100%); mask-image: linear-gradient(to right, rgb(0 0 0) 0 5%, transparent 9% 89%, rgb(0 0 0) 95% 100%); }
.band__strands { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.band__strands path { fill: none; stroke: var(--moss); stroke-opacity: .3; stroke-width: 1; vector-effect: non-scaling-stroke; }
/* text on the Forest band */
.sec--forest .guide__who b, .sec--forest .sec__lead a, .sec--forest .prose a { color: var(--cloud); }
.sec--forest .guide__text p, .sec--forest .prose li { color: rgb(246 244 240 / .86); }
.sec--forest .guide__fine, .sec--forest .fine { color: rgb(246 244 240 / .72); }
.sec--forest .guide__media, .sec--forest .clip__box { box-shadow: 0 0 0 1px rgb(246 244 240 / .14), 0 40px 70px -34px rgb(0 0 0 / .6); }
.sec--forest :focus-visible { outline-color: var(--cloud); }

/* ── proof frames on stacked sheets (the homepage editor's depth) ── */
.proof { position: relative; isolation: isolate; }
.proof::before, .proof::after { content: ""; position: absolute; z-index: -1; border-radius: var(--r-lg); background: #F7F3EC; pointer-events: none;
  box-shadow: 0 0 0 1px rgb(255 255 255 / .7) inset, 0 18px 40px -20px rgb(14 47 36 / .35); }
.proof::before { inset: 22px -18px -22px 18px; }
.proof::after { inset: -14px 14px 14px -14px; opacity: .85; }
.duo--flip .proof::before { inset: 22px 18px -22px -18px; }
.duo--flip .proof::after { inset: -14px -14px 14px 14px; }
.sec--paper .proof::before, .sec--paper .proof::after { background: var(--raised); }
/* the first proof on a page stands in a painted plate (editor backdrop: pines and an arch) */
.phead + .sec .duo__proof { position: relative; isolation: isolate; }
.phead + .sec .duo__proof::before { content: ""; position: absolute; z-index: -2; left: -12%; right: -6%; top: -16%; height: 78%; pointer-events: none;
  background: url("/media/img/editor-backdrop-800.webp") 0 0 / 100% auto no-repeat; opacity: .9; }
.film--proof { border-radius: var(--r-lg); }

/* ── feature films: the surface is the control (role=button only while motion-eligible) ── */
.film[role="button"] { cursor: pointer; }
.film[role="button"]:focus-visible { outline: 3px solid var(--forest); outline-offset: 4px; }
.film__glyph { position: absolute; left: 50%; top: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px; border-radius: 50%; display: grid; place-items: center; pointer-events: none;
  background: rgb(250 247 242 / .92); box-shadow: 0 0 0 1px rgb(14 47 36 / .08), 0 14px 30px -14px rgb(14 47 36 / .55); opacity: 0; scale: .9; transition: opacity .4s var(--ease-out), scale .4s var(--ease-out); }
.film__glyph svg { width: 24px; height: 24px; fill: var(--forest); translate: 2px 0; }
.film.is-held .film__glyph, .film[role="button"]:not(.is-playing):focus-visible .film__glyph { opacity: 1; scale: 1; }

/* ── rhythm: staggered card groups (wide screens) ── */
@media (min-width: 900px) {
  .caps > li:nth-child(3n+2) { transform: translateY(-14px); }
  .tiles > :nth-child(even) { transform: translateY(18px); }
  .tiles { padding-bottom: 18px; }
  .plans .plan--mid { transform: translateY(-16px); }
}

/* ── one calm reveal (site.js adds .rv to card groups, splits and guides; motion-eligible visitors only) ── */
.rv > * { transition: opacity .9s var(--ease-out), translate 1s var(--ease-out); transition-delay: calc(var(--i, 0) * 90ms); }
.rv:not(.is-in) > * { opacity: 0; translate: 0 22px; }

/* ── closing band: the homepage's forest valley edges ── */
.cta__mist { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; opacity: .16; pointer-events: none;
  -webkit-mask-image: linear-gradient(to right, #000 0 5%, transparent 9% 89%, #000 95% 100%); mask-image: linear-gradient(to right, rgb(0 0 0) 0 5%, transparent 9% 89%, rgb(0 0 0) 95% 100%); }
.cta__in { position: relative; z-index: 1; }

/* ── /watch-the-story: the ambient valley ── */
.story { position: relative; padding-bottom: clamp(24px, 3vw, 48px); }
.story__fine { margin: 8px 0 0; }
.amb { position: relative; overflow: hidden; }
.amb__stage { position: relative; width: 100%; aspect-ratio: 1440 / 800; container-type: inline-size; --u: calc(100cqw / 1440); isolation: isolate;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12%); mask-image: linear-gradient(to bottom, transparent 0, rgb(0 0 0) 12%); }
.amb__l { position: absolute; pointer-events: none; user-select: none; }
.amb__sky { inset: -3%; z-index: 0; background: url("/media/img/hero-sky-1640.webp") center / cover no-repeat; }
.amb__mtn { z-index: 10; left: calc(280 * var(--u)); top: calc(75 * var(--u)); width: calc(1160 * var(--u)); transform-origin: 0 50%; }
.amb__world { z-index: 12; left: calc(570 * var(--u)); top: calc(340 * var(--u)); width: calc(867 * var(--u)); filter: saturate(.78) hue-rotate(10deg) contrast(.96) brightness(1.02); }
.amb__orbits { z-index: 20; inset: 0; width: 100%; height: 100%; transform-origin: 72% 50%; }
.amb__orbits ellipse, .amb__orbits path { fill: none; stroke: var(--cloud); stroke-opacity: .7; stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.amb__balloon { --size: calc(var(--d) * var(--u)); position: absolute; z-index: 30; pointer-events: none;
  left: calc(var(--x) * var(--u) - var(--size) / 2); top: calc(var(--y) * var(--u) - var(--size) / 2); width: var(--size); height: var(--size); }
.amb__balloon .pearl { width: 100%; height: 100%; --pearl-fs: max(10px, calc(22 * var(--u))); }
.amb__hill { z-index: 38; inset: 0; width: 100%; height: 100%; }
.amb__front { z-index: 40; inset: 0; width: 100%; filter: saturate(.8) hue-rotate(8deg); transform-origin: 50% 100%; }
.amb__mist { border-radius: 50%; background: radial-gradient(closest-side, rgb(253 248 241 / .9), rgb(253 248 241 / 0)); }
.amb__mist--far { z-index: 11; left: calc(360 * var(--u)); top: calc(300 * var(--u)); width: calc(900 * var(--u)); height: calc(240 * var(--u)); opacity: .6; }
.amb__mist--near { z-index: 42; left: calc(-160 * var(--u)); top: calc(560 * var(--u)); width: calc(1100 * var(--u)); height: calc(200 * var(--u)); opacity: .5; }
.amb__wave { position: absolute; z-index: 45; left: 0; right: 0; top: calc(600 * var(--u)); width: 100%; height: calc(260 * var(--u)); pointer-events: none; }
.amb__lip { fill: #F4EFE6; filter: drop-shadow(0 -2px 3px rgb(14 47 36 / .16)); }
.amb__moss { fill: var(--moss); }
.amb__ground { fill: var(--sand); }
/* every layer on its own long alternate loop (different periods, negative delays): no start, no end */
.amb__sky { animation: amb-sky 67s ease-in-out -21s infinite alternate; }
.amb__mtn { animation: amb-mtn 47s ease-in-out -13s infinite alternate; }
.amb__mist--far { animation: amb-mist-far 59s ease-in-out -30s infinite alternate; }
.amb__world { animation: amb-world 31s ease-in-out -9s infinite alternate; }
.amb__orbits { animation: amb-orbits 73s ease-in-out -40s infinite alternate; }
.amb__balloon .pearl { animation: amb-float var(--dur) ease-in-out var(--delay) infinite alternate; }
.amb__front { animation: amb-front 53s ease-in-out -17s infinite alternate; }
.amb__mist--near { animation: amb-mist-near 79s ease-in-out -50s infinite alternate; }
.amb .amb__l, .amb .amb__balloon .pearl { animation-play-state: paused; }
.amb.is-live .amb__l, .amb.is-live .amb__balloon .pearl { animation-play-state: running; }
@keyframes amb-sky { from { transform: scale(1.04) translate3d(-1%, 0, 0); } to { transform: scale(1.06) translate3d(1%, -.6%, 0); } }
@keyframes amb-mtn { from { transform: translate3d(calc(-16 * var(--u)), 0, 0) scale(1.05); } to { transform: translate3d(calc(10 * var(--u)), calc(-5 * var(--u)), 0) scale(1.05); } }
@keyframes amb-mist-far { from { transform: translate3d(calc(-90 * var(--u)), 0, 0); opacity: .4; } to { transform: translate3d(calc(90 * var(--u)), calc(-12 * var(--u)), 0); opacity: .8; } }
@keyframes amb-world { from { transform: translate3d(0, calc(-7 * var(--u)), 0); } to { transform: translate3d(calc(6 * var(--u)), calc(7 * var(--u)), 0); } }
@keyframes amb-orbits { from { transform: rotate(-1.2deg); } to { transform: rotate(1.4deg); } }
@keyframes amb-float { from { transform: translate3d(calc(-3 * var(--u)), calc(-9 * var(--u)), 0); } to { transform: translate3d(calc(3 * var(--u)), calc(9 * var(--u)), 0); } }
@keyframes amb-front { from { transform: translate3d(calc(12 * var(--u)), 0, 0) scale(1.03); } to { transform: translate3d(calc(-12 * var(--u)), calc(-3 * var(--u)), 0) scale(1.03); } }
@keyframes amb-mist-near { from { transform: translate3d(calc(120 * var(--u)), 0, 0); opacity: .35; } to { transform: translate3d(calc(-80 * var(--u)), calc(8 * var(--u)), 0); opacity: .65; } }
.chapters .chapter { box-shadow: 0 0 0 1px rgb(14 47 36 / .07), 0 16px 30px -24px rgb(14 47 36 / .4); }

/* ── phones ── */
@media (max-width: 899px) {
  .phead--layered .phead__in { grid-template-columns: minmax(0, 1fr); }
  .phead--layered .phead__art { justify-self: stretch; max-width: 560px; }
  .phead__plate { width: 130vw; right: -40vw; opacity: .3; }
  .proof::before { inset: 12px -10px -12px 10px; }
  .proof::after { inset: -8px 8px 8px -8px; }
  .duo--flip .proof::before { inset: 12px 10px -12px -10px; }
  .duo--flip .proof::after { inset: -8px -8px 8px 8px; }
  .phead + .sec .duo__proof::before { display: none; }
  .amb__stage { width: 190%; margin-left: -80%; }
  .amb__stage { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 8%); mask-image: linear-gradient(to bottom, transparent 0, rgb(0 0 0) 8%); }
}

/* ── reduced motion and the footer «Motion off» switch: the end state, still ── */
@media (prefers-reduced-motion: reduce) {
  .hart__win, .hart__expert, .hart__pearl, .amb__l, .amb__balloon .pearl { animation: none !important; }
  .rv > * { opacity: 1 !important; translate: none !important; }
}
:root[data-motion="off"] .hart__win, :root[data-motion="off"] .hart__expert, :root[data-motion="off"] .hart__pearl,
:root[data-motion="off"] .amb__l, :root[data-motion="off"] .amb__balloon .pearl { animation: none !important; }
:root[data-motion="off"] .rv > * { opacity: 1 !important; translate: none !important; }
.sec--band + .cta { margin-top: 0; }
.sec--paper + .cta .cta__lip { fill: #F4EFE6; }
/* the story page: the opening's sky runs straight into the valley (no ribbon between them) */
.phead--flush { padding-bottom: clamp(8px, 2vw, 32px); }
.phead--flush + .story .amb__stage { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 18%); mask-image: linear-gradient(to bottom, transparent 0, rgb(0 0 0) 18%); }
/* the middle layers share one stacking group (mountains, mist, world, orbits, balloons) */
.amb__pan { position: absolute; inset: 0; z-index: 12; }
/* desktop: crop the empty left sky – the stage is wider than the viewport and anchored right */
@media (min-width: 900px) { .amb__stage { width: 116%; margin-left: -16%; aspect-ratio: 1440 / 740; } }
main:has(> .sec--band:last-child) + .foot { margin-top: 0; }

.phead--flush .phead__sky { display: none; }
.phead--flush + .story { background: linear-gradient(var(--paper), var(--sand) 70%); }
/* desktop: the valley rises behind the opening's copy (the homepage hero's arrangement); the copy stays on top */
@media (min-width: 900px) {
  .phead--flush { isolation: auto; }
  .phead--flush .phead__in { position: relative; z-index: 3; }
  .phead--flush + .story { position: relative; z-index: 1; margin-top: calc(-1 * clamp(220px, 26vw, 400px)); }
  .phead--flush + .story .amb::after { content: ""; position: absolute; z-index: 46; left: 0; top: 0; width: 58%; height: 52%; pointer-events: none;
    background: radial-gradient(ellipse 100% 100% at 0 0, rgb(253 248 241 / .92) 30%, rgb(253 248 241 / 0) 100%); }
}
/* sample frames: long product labels wrap instead of pushing the frame body wider than the frame */
.frame__body > * { min-width: 0; }
.frame .pill { white-space: normal; text-align: left; line-height: 1.3; }