/* talelike.com home – Kim's approved homepage prototype (site-build/prototype/styles.css), layers unchanged.
   Shared tokens, navigation and buttons moved to site.css; asset paths point at the web derivatives.
   Origin: rebuilt from Kim's mock-up (guideline-source/original.png).
   Geometry: every artwork position is in the mock-up's 1440-wide coordinate system (GUIDELINE.md,
   scale 1440/880) and resolved through --u, so the whole stage scales as one picture.
   Text and controls are real HTML in front of the plates (layer stacks in GUIDELINE.md). */


/* ── Hero: one stage in mock-up coordinates ───────────────────────────── */
.hero { position: relative; background: var(--paper); overflow-x: clip; }
.stage {
  position: relative; width: 100%; aspect-ratio: 1440 / 840;
  container-type: inline-size; isolation: isolate;
  --u: calc(100cqw / 1440);
}
.plate { position: absolute; pointer-events: none; user-select: none; }
.plate--sky {
  inset: 0; z-index: 0;
  background: url("/media/img/hero-sky-1640.webp") center / cover no-repeat;
}
.plate--mountains { z-index: 10; left: calc(280 * var(--u)); top: calc(75 * var(--u)); width: calc(1160 * var(--u)); }
/* Codex's world plate came out a touch too yellow-green next to Kim's misty blue-greens: graded here. */
.plate--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);
}
.hill { position: absolute; inset: 0; z-index: 38; width: 100%; height: 100%; pointer-events: none; }
.plate--front { z-index: 40; inset: 0; width: 100%; filter: saturate(.8) hue-rotate(8deg); }

.orbits { position: absolute; inset: 0; z-index: 20; width: 100%; height: 100%; pointer-events: none; }
.orbits ellipse, .orbits path { fill: none; stroke: var(--cloud); stroke-opacity: .7; stroke-width: 1.2; vector-effect: non-scaling-stroke; }

/* Balloons – pearl spheres with an opaque reading face (GUIDELINE «Feature balloon set») */
.balloons {
  position: absolute; top: 0; left: 0; width: 100%; aspect-ratio: 1440 / 840; z-index: 30; pointer-events: none;
  container-type: inline-size; --u: calc(100cqw / 1440);
}
.balloon {
  --size: calc(var(--d) * var(--u));
  position: absolute; left: calc(var(--x) * var(--u) - var(--size) / 2); top: calc(var(--y) * var(--u) - var(--size) / 2);
  width: var(--size); height: var(--size); border-radius: 50%;
  display: flex; flex-direction: column; align-items: center;
  padding: calc(var(--d) * .14 * var(--u)) calc(var(--d) * .14 * var(--u)) 0;
  text-align: center; text-decoration: none; pointer-events: auto;
  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%);
  -webkit-backdrop-filter: blur(3px) saturate(1.05); backdrop-filter: blur(3px) saturate(1.05);
  box-shadow:
    inset calc(-10 * var(--u)) calc(-14 * var(--u)) calc(26 * var(--u)) rgb(107 143 116 / .28),
    inset 0 0 0 1px rgb(255 255 255 / .75),
    0 calc(22 * var(--u)) calc(44 * var(--u)) calc(-14 * var(--u)) rgb(14 47 36 / .35);
  animation: float 7.5s ease-in-out var(--phase) infinite alternate;
  transition: scale .5s var(--ease-out), box-shadow .5s var(--ease-out);
  will-change: transform;
}
.balloon svg { width: calc(var(--d) * .31 * var(--u)); height: calc(var(--d) * .31 * var(--u)); flex: none; margin-bottom: calc(var(--d) * .06 * var(--u)); filter: drop-shadow(0 2px 2px rgb(14 47 36 / .18)); }
.balloon strong {
  font: 400 calc(22 * var(--u)) / 1.1 var(--serif); letter-spacing: -.02em; color: var(--ink);
  font-variation-settings: "SOFT" 14, "WONK" 0;
}
.balloon span { font: 400 calc(12.5 * var(--u)) / 1.3 var(--sans); color: var(--muted); margin-top: calc(4 * var(--u)); max-width: 100%; }
.balloon:hover, .balloon:focus-visible {
  scale: 1.06;
  box-shadow:
    inset calc(-10 * var(--u)) calc(-14 * var(--u)) calc(26 * var(--u)) rgb(107 143 116 / .32),
    inset 0 0 0 1px rgb(255 255 255 / .9),
    0 calc(30 * var(--u)) calc(56 * var(--u)) calc(-14 * var(--u)) rgb(14 47 36 / .45);
}
.balloon:focus-visible { outline: 2px solid var(--forest); outline-offset: 4px; border-radius: 50%; }
@keyframes float { from { translate: 0 calc(-5 * var(--u)); } to { translate: 0 calc(6 * var(--u)); } }

/* Ribbon from hero into the Forest Features section */
.wave { position: absolute; left: 0; right: 0; top: calc(640 * var(--u)); z-index: 45; width: 100%; height: calc(260 * var(--u)); pointer-events: none; }
.wave__forest { fill: var(--forest); }
.wave__lip { filter: drop-shadow(0 -2px 3px rgb(14 47 36 / .18)); }

/* Pointer depth: JS sets --px/--py in [-1, 1]; each layer moves by its data-depth (px at 1440). */
[data-depth] { transform: translate3d(calc(var(--px, 0) * var(--depth) * var(--u)), calc(var(--py, 0) * var(--depth) * var(--u) * .6), 0); transition: transform .9s var(--ease-out); }


.hero { container-type: inline-size; }
.hero__copy {
  position: absolute; z-index: 50; left: max(24px, calc(50% - 616px)); top: calc(160 * 100cqw / 1440);
  width: min(640px, 46vw);
}
.eyebrow { font: 600 12px/16.8px var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin: 0 0 clamp(18px, 2.6vw, 34px); display: flex; align-items: center; gap: 24px; }
.eyebrow--rule::after { content: ""; width: 52px; height: 1px; background: currentColor; opacity: .6; }
.eyebrow--light { color: var(--cloud); opacity: .8; }
h1 {
  font: 400 clamp(52px, 7.22vw, 104px) / .96 var(--serif); letter-spacing: -.016em; color: var(--ink);
  font-variation-settings: "SOFT" 14, "WONK" 0; margin: 0 0 clamp(16px, 1.6vw, 24px);
}
.lede { font: 400 clamp(16px, 1.25vw, 18px) / 1.5 var(--sans); color: var(--muted); margin: 0 0 clamp(18px, 2vw, 28px); max-width: 530px; }
.actions { display: flex; align-items: center; gap: clamp(20px, 2.4vw, 34px); flex-wrap: wrap; }
.play { display: inline-flex; align-items: center; gap: 16px; font: 400 18px/24px var(--serif); color: var(--charcoal); text-decoration: none; min-height: 56px; }
.play__disc {
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  background: var(--tl-color-neutral-raised); box-shadow: 0 0 0 1px rgb(14 47 36 / .08), 0 8px 18px -10px rgb(14 47 36 / .5);
  transition: scale .4s var(--ease-out);
}
.play__disc svg { width: 18px; height: 18px; fill: var(--forest); translate: 1px 0; }
.play:hover .play__disc { scale: 1.08; }
.minis { display: flex; gap: clamp(18px, 2.2vw, 32px); margin-top: clamp(24px, 3.2vw, 46px); }
.minis b, .minis small { white-space: nowrap; text-shadow: 0 0 2px var(--paper), 0 0 10px var(--paper), 0 0 18px var(--paper); }
.minis li { display: flex; gap: 12px; align-items: center; color: var(--charcoal); }
.minis svg { width: 24px; height: 24px; flex: none; }
.minis b { display: block; font: 600 14px/20px var(--sans); }
.minis small { display: block; font: 400 11px/16px var(--sans); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }

/* ── Features: dark Forest band, staggered cards (GUIDELINE «Features section layer stack») ── */
.features { position: relative; z-index: 1; margin-top: calc(-71 / 1440 * 100%); color: var(--cloud); }
.fstage { position: relative; width: 100%; aspect-ratio: 1440 / 426; container-type: inline-size; --u: calc(100cqw / 1440); isolation: isolate; }
.fstage__bg {
  position: absolute; left: 0; right: 0; top: calc(100 * var(--u)); bottom: 0; z-index: 0;
  background:
    radial-gradient(ellipse 34% 40% at 18% 92%, rgb(167 184 159 / .42), transparent 70%),
    radial-gradient(ellipse 28% 30% at 46% 100%, rgb(167 184 159 / .3), transparent 70%),
    radial-gradient(ellipse 40% 60% at 22% 60%, rgb(107 143 116 / .2), transparent 70%),
    radial-gradient(ellipse 24% 50% at 98% 45%, rgb(167 184 159 / .22), transparent 70%),
    var(--forest);
}
.fstage__mist {
  position: absolute; z-index: 10; left: 0; top: calc(-24 * var(--u)); width: 100%; opacity: .18; pointer-events: none;
  -webkit-mask-image: linear-gradient(to right, #000 0 4%, transparent 7.2% 90%, #000 96% 100%);
  mask-image: linear-gradient(to right, rgb(0 0 0) 0 4%, transparent 7.2% 90%, rgb(0 0 0) 96% 100%);
}
.fstage__glow { position: absolute; inset: 0; z-index: 15; width: 100%; height: 100%; pointer-events: none; }
.fstage__strands { position: absolute; inset: 0; z-index: 20; width: 100%; height: 100%; pointer-events: none; }
.fstage__strands path { fill: none; stroke: var(--moss); stroke-opacity: .34; stroke-width: 1; vector-effect: non-scaling-stroke; }
.fstage__ribbon { position: absolute; inset: 0; z-index: 40; width: 100%; height: 100%; pointer-events: none; }
.fstage__exit { fill: var(--sand); }

.cards { position: absolute; inset: 0; z-index: 30; pointer-events: none; }
.card {
  position: absolute; left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u));
  width: calc(var(--w) * var(--u)); height: calc(var(--h) * var(--u));
  border-radius: calc(14 * var(--u)); overflow: hidden; pointer-events: auto;
  padding: calc(22 * var(--u)) calc(22 * var(--u)) 0;
  background: linear-gradient(160deg, #FBF8F3 0%, #F2EEE6 60%, #E9E6DC 100%);
  box-shadow: 0 0 0 1px rgb(255 255 255 / .6) inset, 0 calc(26 * var(--u)) calc(44 * var(--u)) calc(-18 * var(--u)) rgb(0 0 0 / .55);
  color: var(--charcoal);
  transition: translate .6s var(--ease-out), box-shadow .6s var(--ease-out);
}
.card:hover, .card:focus-within { translate: 0 calc(-8 * var(--u)); box-shadow: 0 0 0 1px rgb(255 255 255 / .8) inset, 0 calc(36 * var(--u)) calc(56 * var(--u)) calc(-18 * var(--u)) rgb(0 0 0 / .6); }
.chip {
  position: relative; z-index: 2; display: grid; place-items: center;
  width: calc(54 * var(--u)); height: calc(54 * var(--u)); border-radius: 50%;
  background: rgb(167 184 159 / .35); color: var(--charcoal);
}
.chip svg { width: calc(26 * var(--u)); height: calc(26 * var(--u)); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.card h3 {
  position: relative; z-index: 2; margin: calc(16 * var(--u)) 0 calc(6 * var(--u));
  font: 400 calc(25 * var(--u)) / 1.15 var(--serif); letter-spacing: -.02em; color: var(--ink); font-variation-settings: "SOFT" 14, "WONK" 0;
}
.card p { position: relative; z-index: 2; margin: 0; font: 400 calc(13 * var(--u)) / 1.5 var(--sans); color: var(--muted); padding-right: calc(4 * var(--u)); }
.card__go {
  position: absolute; z-index: 3; left: calc(22 * var(--u)); bottom: calc(52 * var(--u));
  width: calc(44 * var(--u)); height: calc(44 * var(--u)); min-width: 32px; min-height: 32px; border-radius: 50%;
  display: grid; place-items: center; background: var(--tl-color-neutral-raised); color: var(--charcoal);
  box-shadow: 0 calc(6 * var(--u)) calc(14 * var(--u)) calc(-6 * var(--u)) rgb(14 47 36 / .35);
  transition: scale .4s var(--ease-out), background-color .3s;
}
.card__go svg { width: 45%; height: 45%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.card__go:hover { scale: 1.1; background: var(--cloud); }
.card__fold { position: absolute; z-index: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 55%; }
.card__fold path { fill: rgb(220 220 208 / .45); }
.card__art { position: absolute; z-index: 1; left: 0; top: calc(var(--art) * var(--u)); width: 100%; pointer-events: none; }
.card__no { position: absolute; z-index: 3; left: calc(22 * var(--u)); bottom: calc(14 * var(--u)); font: 500 calc(11 * var(--u)) / 1 var(--sans); letter-spacing: .08em; color: var(--muted); }

.fstage__copy { position: absolute; z-index: 50; left: calc(104 * var(--u)); top: calc(72 * var(--u)); width: calc(430 * var(--u)); }
.fstage__copy .eyebrow { font-size: max(11px, calc(12 * var(--u))); margin-bottom: calc(22 * var(--u)); }
.fstage__copy h2 { font: 300 calc(46 * var(--u)) / 1.12 var(--serif); letter-spacing: -.015em; margin: 0 0 calc(16 * var(--u)); font-variation-settings: "SOFT" 14, "WONK" 0; color: var(--cloud); }
.fstage__lede { font: 400 max(14px, calc(15.5 * var(--u))) / 1.6 var(--sans); color: rgb(246 244 240 / .82); margin: 0 0 calc(24 * var(--u)); }
.btn--light { background: var(--tl-color-neutral-raised); color: var(--forest); height: max(44px, calc(52 * var(--u))); }
.btn--light:hover { background: var(--cloud); }

/* ── Editor showcase: a working mini editor (GUIDELINE «Editor section layer stack») ── */
.editor { position: relative; z-index: 2; margin-top: calc(-50 / 1440 * 100%); }
.estage { position: relative; width: 100%; aspect-ratio: 1440 / 520; container-type: inline-size; --u: calc(100cqw / 1440); isolation: isolate; }
.estage__bg { position: absolute; left: 0; right: 0; top: calc(50 * var(--u)); bottom: 0; z-index: 0; background: linear-gradient(180deg, var(--sand), var(--tl-color-surface-editor-paper, #F3EEE5) 40%, var(--sand)); }
.estage__backdrop { position: absolute; z-index: 10; left: 0; top: 0; width: calc(1000 * var(--u)); pointer-events: none; filter: saturate(.9); }
.sheet { position: absolute; z-index: 20; border-radius: calc(24 * var(--u)); background: #F7F3EC; box-shadow: 0 0 0 1px rgb(255 255 255 / .7) inset, 0 calc(18 * var(--u)) calc(40 * var(--u)) calc(-20 * var(--u)) rgb(14 47 36 / .35); }
.sheet--back { left: calc(65 * var(--u)); top: calc(62 * var(--u)); width: calc(815 * var(--u)); height: calc(399 * var(--u)); }
.sheet--mid { left: calc(97 * var(--u)); top: calc(27 * var(--u)); width: calc(815 * var(--u)); height: calc(399 * var(--u)); opacity: .85; }

.app {
  position: absolute; z-index: 30; left: calc(85 * var(--u)); top: calc(39 * var(--u)); width: calc(815 * var(--u)); height: calc(399 * var(--u));
  border-radius: calc(24 * var(--u)); background: var(--tl-color-surface-editor-panel, #F8F5EF); overflow: hidden;
  box-shadow: 0 0 0 1px rgb(255 255 255 / .8) inset, 0 calc(30 * var(--u)) calc(60 * var(--u)) calc(-24 * var(--u)) rgb(14 47 36 / .45);
  display: grid; grid-template-columns: calc(166 * var(--u)) 1fr; grid-template-rows: calc(88 * var(--u)) 1fr;
  font-family: var(--sans); color: var(--charcoal);
}
.app svg, .blocks svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.app__bar { grid-column: 1 / -1; display: flex; align-items: center; gap: calc(22 * var(--u)); padding: 0 calc(30 * var(--u)) 0 calc(40 * var(--u)); }
.app__logo { width: calc(124 * var(--u)); height: auto; }
.app__tools, .app__people { display: flex; align-items: center; gap: calc(6 * var(--u)); }
.app__people { margin-left: auto; gap: calc(10 * var(--u)); }
.tool { width: calc(34 * var(--u)); height: calc(34 * var(--u)); display: grid; place-items: center; border-radius: calc(8 * var(--u)); color: var(--charcoal); transition: background-color .2s; }
.tool svg { width: calc(17 * var(--u)); height: calc(17 * var(--u)); }
.tool:hover, .tool[aria-pressed="true"] { background: rgb(167 184 159 / .3); }
.tool--type { font: 600 calc(15 * var(--u)) / 1 var(--serif); }
.avatars { display: flex; }
.avatars i { width: calc(26 * var(--u)); height: calc(26 * var(--u)); border-radius: 50%; display: grid; place-items: center; font: 600 calc(10 * var(--u)) / 1 var(--sans); font-style: normal; color: var(--forest); background: var(--moss); box-shadow: 0 0 0 calc(1.5 * var(--u)) var(--cloud); }
.avatars i + i { margin-left: calc(-7 * var(--u)); background: #C9D3C3; }
.account { width: calc(30 * var(--u)); height: calc(30 * var(--u)); border-radius: 50%; display: grid; place-items: center; background: var(--cloud); box-shadow: 0 0 0 1px rgb(14 47 36 / .12); }
.account img { width: 70%; }
.split { display: inline-flex; align-items: stretch; height: calc(44 * var(--u)); border-radius: calc(12 * var(--u)); background: var(--forest); color: var(--cloud); overflow: hidden; }
.split button { color: inherit; font: 500 calc(13 * var(--u)) / 1 var(--sans); }
.split__main { padding: 0 calc(16 * var(--u)) 0 calc(20 * var(--u)); min-width: calc(92 * var(--u)); transition: background-color .3s; }
.split__more { padding: 0 calc(12 * var(--u)); border-left: 1px solid rgb(246 244 240 / .25); }
.split__more svg { width: calc(14 * var(--u)); height: calc(14 * var(--u)); }
.split button:hover { background: #163D30; }

.app__side { padding: 0 calc(12 * var(--u)) 0 calc(30 * var(--u)); }
.side__row { display: flex; align-items: center; gap: calc(12 * var(--u)); width: 100%; height: calc(40 * var(--u)); padding: 0 calc(12 * var(--u)); margin-bottom: calc(6 * var(--u)); border-radius: calc(8 * var(--u)); font: 500 calc(13 * var(--u)) / 1 var(--sans); transition: background-color .2s; }
.side__row svg { width: calc(17 * var(--u)); height: calc(17 * var(--u)); }
.side__row:hover { background: rgb(167 184 159 / .2); }
.side__row.is-active { background: var(--cloud); box-shadow: 0 calc(2 * var(--u)) calc(8 * var(--u)) calc(-2 * var(--u)) rgb(14 47 36 / .18); }

.app__doc { position: relative; margin-right: calc(25 * var(--u)); background: var(--tl-color-surface-editor-paper, #FBF8F3); border-radius: calc(12 * var(--u)) calc(12 * var(--u)) 0 0; box-shadow: 0 0 0 1px rgb(14 47 36 / .06); overflow: hidden; }
.doc__toolbar { display: flex; align-items: center; gap: calc(4 * var(--u)); height: calc(48 * var(--u)); padding: 0 calc(14 * var(--u)); border-bottom: 1px solid rgb(14 47 36 / .07); }
.para { display: inline-flex; align-items: center; gap: calc(8 * var(--u)); font: 500 calc(13 * var(--u)) / 1 var(--sans); padding: 0 calc(10 * var(--u)); margin-right: calc(10 * var(--u)); }
.para svg { width: calc(14 * var(--u)); height: calc(14 * var(--u)); }
.doc__canvas { position: relative; padding: calc(22 * var(--u)) calc(36 * var(--u)); }
.doc__title { margin: 0 0 calc(18 * var(--u)); font: 400 calc(36 * var(--u)) / 1.1 var(--serif); letter-spacing: -.035em; color: var(--ink); font-variation-settings: "SOFT" 14, "WONK" 0; outline: none; max-width: calc(320 * var(--u)); position: relative; z-index: 2; }
.doc__text { margin: 0; font: 400 calc(20 * var(--u)) / 1.35 var(--serif); color: var(--ink); max-width: calc(250 * var(--u)); outline: none; position: relative; z-index: 2; }
.doc__text.is-bold { font-weight: 650; }
.doc__text.is-italic { font-style: italic; }
.doc__title:focus-visible, .doc__text:focus-visible { box-shadow: 0 0 0 2px rgb(107 143 116 / .5); border-radius: 4px; }
.doc__inserted { position: relative; z-index: 2; max-width: calc(250 * var(--u)); display: grid; gap: calc(10 * var(--u)); margin-top: calc(12 * var(--u)); }
.doc__inserted > * { animation: block-in .5s var(--ease-out) both; margin: 0; }
@keyframes block-in { from { opacity: 0; translate: 0 calc(8 * var(--u)); } }
.ins-text { font: 400 calc(15 * var(--u)) / 1.4 var(--serif); color: var(--ink); }
.ins-image { width: 100%; height: calc(70 * var(--u)); object-fit: cover; border-radius: calc(8 * var(--u)); }
.ins-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(6 * var(--u)); }
.ins-gallery img { width: 100%; height: calc(52 * var(--u)); object-fit: cover; border-radius: calc(6 * var(--u)); }
.ins-callout { display: flex; gap: calc(10 * var(--u)); align-items: center; padding: calc(10 * var(--u)) calc(12 * var(--u)); border-radius: calc(10 * var(--u)); background: rgb(167 184 159 / .28); font: 400 calc(12.5 * var(--u)) / 1.4 var(--sans); color: var(--charcoal); }
.ins-quote { font: italic 400 calc(16 * var(--u)) / 1.35 var(--serif); color: var(--forest); padding-left: calc(4 * var(--u)); }
.ins-quote::before { content: "“"; font-size: 1.8em; line-height: 0; vertical-align: -.35em; margin-right: calc(2 * var(--u)); color: var(--sage); }
.ins-divider { height: 1px; background: rgb(14 47 36 / .18); margin: calc(6 * var(--u)) 0; }
.doc__caret { display: block; width: 1.5px; height: calc(30 * var(--u)); background: var(--charcoal); margin-top: calc(18 * var(--u)); animation: caret 1.1s steps(1) infinite; position: relative; z-index: 2; }
@keyframes caret { 50% { opacity: 0; } }
.doc__photo { position: absolute; z-index: 1; left: calc(215 * var(--u)); top: calc(104 * var(--u)); width: calc(300 * var(--u)); height: calc(250 * var(--u)); overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent, #000 12%); mask-image: linear-gradient(to right, transparent, rgb(0 0 0) 12%); }
.doc__photo { transition: opacity .6s var(--ease-out); }
.doc__canvas.has-blocks .doc__photo { opacity: .28; }
.doc__photo img { width: 100%; translate: 0 calc(-70 * var(--u)); }

.blocks {
  position: absolute; z-index: 35; left: calc(702 * var(--u)); top: calc(124 * var(--u)); width: calc(216 * var(--u)); height: calc(313 * var(--u));
  padding: calc(14 * var(--u)) calc(14 * var(--u)); border-radius: calc(16 * var(--u)); background: var(--tl-color-surface-editor-panel, #FAF7F2);
  box-shadow: 0 0 0 1px rgb(255 255 255 / .9) inset, 0 calc(24 * var(--u)) calc(48 * var(--u)) calc(-20 * var(--u)) rgb(14 47 36 / .45);
  font-family: var(--sans); color: var(--charcoal);
}
.blocks__tabs { display: flex; justify-content: space-between; padding: 0 calc(8 * var(--u)) calc(10 * var(--u)); }
.blocks__tabs button { font: 500 calc(12 * var(--u)) / 1 var(--sans); color: var(--muted); padding: calc(6 * var(--u)) 0; position: relative; }
.blocks__tabs [aria-selected="true"] { color: var(--charcoal); }
.blocks__tabs [aria-selected="true"]::after { content: ""; position: absolute; left: 20%; right: 20%; bottom: 0; height: 1px; background: var(--charcoal); }
.block-row { display: flex; align-items: center; gap: calc(12 * var(--u)); width: 100%; height: calc(44 * var(--u)); padding: 0 calc(4 * var(--u)); border-radius: calc(8 * var(--u)); font: 500 calc(13 * var(--u)) / 1 var(--sans); transition: background-color .2s; }
.block-row:hover { background: rgb(167 184 159 / .22); }
.block-row:active { scale: .98; }
.block-row__ico { width: calc(32 * var(--u)); height: calc(32 * var(--u)); display: grid; place-items: center; border-radius: calc(8 * var(--u)); background: var(--cloud); box-shadow: 0 0 0 1px rgb(14 47 36 / .08), 0 calc(2 * var(--u)) calc(4 * var(--u)) rgb(14 47 36 / .08); }
.block-row__ico svg { width: calc(17 * var(--u)); height: calc(17 * var(--u)); }
.chev-r { width: calc(13 * var(--u)); height: calc(13 * var(--u)); margin-left: auto; color: var(--muted); }
.blocks__media { display: grid; grid-template-columns: 1fr 1fr; gap: calc(8 * var(--u)); padding-top: calc(4 * var(--u)); }
.blocks__media button { border-radius: calc(8 * var(--u)); overflow: hidden; aspect-ratio: 1; }
.blocks__media img { width: 100%; height: 100%; object-fit: cover; transition: scale .4s var(--ease-out); }
.blocks__media button:hover img { scale: 1.06; }
.blocks__embed { display: grid; gap: calc(8 * var(--u)); padding: calc(12 * var(--u)) calc(4 * var(--u)); font: 500 calc(12.5 * var(--u)) / 1.4 var(--sans); }
.blocks__embed input { font: inherit; height: calc(40 * var(--u)); padding: 0 calc(10 * var(--u)); border-radius: calc(8 * var(--u)); border: 1px solid rgb(14 47 36 / .2); background: var(--cloud); }

.estage__wave { position: absolute; inset: 0; z-index: 40; width: 100%; height: 100%; pointer-events: none; }
.estage__under { fill: var(--sand); }
.estage__pines { position: absolute; z-index: 41; left: calc(792 * var(--u)); top: calc(342 * var(--u)); width: calc(260 * var(--u)); pointer-events: none; }
.estage__copy { position: absolute; z-index: 50; left: calc(987 * var(--u)); top: calc(78 * var(--u)); width: calc(410 * var(--u)); }
.eyebrow--wrap { align-items: flex-end; font-size: max(11px, calc(12 * var(--u))); margin-bottom: calc(20 * var(--u)); }
.eyebrow--wrap::after { margin-bottom: .45em; }
.estage__copy h2 { font: 400 calc(50 * var(--u)) / 1.02 var(--serif); letter-spacing: -.035em; color: var(--ink); margin: 0 0 calc(18 * var(--u)); font-variation-settings: "SOFT" 14, "WONK" 0; }
.estage__lede { font: 400 max(14px, calc(16.5 * var(--u))) / 1.55 var(--sans); color: var(--muted); margin: 0 0 calc(24 * var(--u)); }
.estage__copy .btn { height: max(44px, calc(52 * var(--u))); }
.app.is-pulse .blocks, .blocks.is-pulse { animation: pulse 1.2s var(--ease-out) 2; }
@keyframes pulse { 50% { box-shadow: 0 0 0 calc(4 * var(--u)) rgb(107 143 116 / .45), 0 calc(24 * var(--u)) calc(48 * var(--u)) calc(-20 * var(--u)) rgb(14 47 36 / .45); } }

/* ── Audience: «More than a CMS» and three cards (GUIDELINE «Audience section layer stack») ── */
.audience { position: relative; z-index: 1; margin-top: calc(-62 / 1440 * 100%); }
.astage { position: relative; width: 100%; aspect-ratio: 1440 / 400; container-type: inline-size; --u: calc(100cqw / 1440); isolation: isolate; }
.astage__bg { position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, var(--sand), #F1ECE3 60%, var(--sand)); }
.astage__ridge { position: absolute; z-index: 10; left: calc(624 * var(--u)); top: calc(-60 * var(--u)); width: calc(560 * var(--u)); pointer-events: none; }
.astage__copy { position: absolute; z-index: 50; left: calc(104 * var(--u)); top: calc(70 * var(--u)); width: calc(420 * var(--u)); }
.astage__copy .eyebrow { font-size: max(11px, calc(12 * var(--u))); margin-bottom: calc(20 * var(--u)); }
.astage__copy h2 { font: 400 calc(40 * var(--u)) / 1.08 var(--serif); letter-spacing: -.03em; color: var(--ink); margin: 0 0 calc(16 * var(--u)); font-variation-settings: "SOFT" 14, "WONK" 0; }
.astage__lede { font: 400 max(14px, calc(15.5 * var(--u))) / 1.55 var(--sans); color: var(--muted); margin: 0 0 calc(22 * var(--u)); }
.btn--outline { color: var(--charcoal); background: var(--tl-color-neutral-raised); box-shadow: 0 0 0 1px rgb(14 47 36 / .18) inset; height: max(44px, calc(52 * var(--u))); }
.btn--outline:hover { box-shadow: 0 0 0 1px rgb(14 47 36 / .4) inset; }

.auds { position: absolute; inset: 0; z-index: 30; pointer-events: none; }
.aud { position: absolute; left: calc(var(--x) * var(--u)); top: calc(85 * var(--u)); width: calc(262 * var(--u)); pointer-events: auto; }
.aud__link {
  display: grid; grid-template-rows: calc(164 * var(--u)) auto; position: relative; text-decoration: none; color: var(--charcoal);
  border-radius: calc(12 * var(--u)); overflow: hidden; background: #FAF7F2;
  box-shadow: 0 0 0 1px rgb(255 255 255 / .8) inset, 0 calc(16 * var(--u)) calc(32 * var(--u)) calc(-18 * var(--u)) rgb(14 47 36 / .3);
  transition: translate .6s var(--ease-out), box-shadow .6s var(--ease-out);
}
.aud__img { overflow: hidden; }
.aud__img img { width: 100%; height: 100%; object-fit: cover; transition: scale 1.2s var(--ease-out); }
.aud__body { display: grid; gap: calc(6 * var(--u)); padding: calc(14 * var(--u)) calc(40 * var(--u)) calc(18 * var(--u)) calc(18 * var(--u)); }
.aud__body strong { font: 400 calc(19 * var(--u)) / 1.2 var(--serif); letter-spacing: -.02em; color: var(--ink); font-variation-settings: "SOFT" 14, "WONK" 0; }
.aud__body span { font: 400 max(11.5px, calc(12 * var(--u))) / 1.5 var(--sans); color: var(--muted); }
.aud__go { position: absolute; right: calc(16 * var(--u)); top: calc(178 * var(--u)); width: calc(32 * var(--u)); height: calc(32 * var(--u)); min-width: 28px; min-height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--cloud); box-shadow: 0 calc(4 * var(--u)) calc(10 * var(--u)) calc(-4 * var(--u)) rgb(14 47 36 / .35); transition: translate .4s var(--ease-out); }
.aud__go svg { width: 50%; height: 50%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.aud__link:hover, .aud__link:focus-visible { translate: 0 calc(-6 * var(--u)); box-shadow: 0 0 0 1px rgb(255 255 255 / .9) inset, 0 calc(24 * var(--u)) calc(40 * var(--u)) calc(-18 * var(--u)) rgb(14 47 36 / .38); }
.aud__link:hover .aud__img img, .aud__link:hover .aud__img video { scale: 1.05; }
.aud__link:hover .aud__go { translate: calc(3 * var(--u)) 0; }

/* ── Scroll: layers pass at different speeds (no pinning) ────────────── */
@supports (animation-timeline: view()) {
  .plate--mountains { animation: drift-slow linear both; animation-timeline: view(); animation-range: exit 0% exit 100%; }
  .plate--world { animation: drift-mid linear both; animation-timeline: view(); animation-range: exit 0% exit 100%; }
  @keyframes drift-slow { to { translate: 0 calc(90 * var(--u)); } }
  @keyframes drift-mid { to { translate: 0 calc(45 * var(--u)); } }
}

/* ── Below 900 px: text first, then the composed world, then the features ── */
@media (max-width: 899px) {
  .hero { display: flex; flex-direction: column; }
  .hero__copy { position: relative; order: -1; left: auto; top: auto; width: auto; padding: 96px 24px 8px; }
  .stage { aspect-ratio: 1440 / 840; width: 190%; margin-left: -78%; }
  .balloons {
    position: relative; aspect-ratio: auto; container-type: normal; --u: .9px;
    display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    padding: 8px 24px 32px; margin-top: -1px; background: var(--forest);
  }
  .balloon { position: relative; left: auto; top: auto; flex: none; scroll-snap-align: center; animation: none; transform: none; }
  .balloon span { font-size: 12px; }
  .minis { flex-direction: column; gap: 16px; }
  .features { margin-top: 0; }
  .fstage { aspect-ratio: auto; --u: 1px; background: var(--forest); padding: 40px 24px 56px; display: flex; flex-direction: column; gap: 32px; }
  .fstage__bg, .fstage__mist, .fstage__strands, .fstage__ribbon { display: none; }
  .fstage__copy { position: static; width: auto; order: -1; }
  .fstage__copy h2 { font-size: 34px; }
  .cards { position: static; display: grid; gap: 20px; }
  .card { position: relative; left: auto; top: auto; width: auto; height: 320px; --u: 1.1px; }
  .editor { margin-top: 0; }
  .estage { aspect-ratio: auto; --u: .74px; display: flex; flex-direction: column; gap: 20px; padding: 48px 24px 64px; background: var(--sand); }
  .estage__bg, .estage__backdrop, .sheet, .estage__wave, .estage__pines, .app__side, .app__tools, .app__people > .tool, .avatars, .account { display: none; }
  .estage__copy { position: static; width: auto; order: -1; --u: 1px; }
  .estage__copy h2 { font-size: 36px; }
  .app { position: relative; left: auto; top: auto; width: 100%; height: 360px; grid-template-columns: 1fr; grid-template-rows: 64px 1fr; }
  .app__bar { padding: 0 16px; }
  .app__doc { margin: 0 12px; }
  .doc__photo { left: auto; right: 0; }
  .blocks { position: relative; left: auto; top: auto; width: 100%; height: auto; --u: 1px; }
  .audience { margin-top: 0; }
  .astage { aspect-ratio: auto; --u: 1px; display: flex; flex-direction: column; gap: 28px; padding: 24px 24px 72px; background: var(--sand); }
  .astage__bg, .astage__ridge { display: none; }
  .astage__copy { position: static; width: auto; }
  .astage__copy h2 { font-size: 34px; }
  .auds { position: static; display: grid; gap: 20px; }
  .aud { position: relative; left: auto; top: auto; width: auto; --u: 1.25px; }
}

@media (prefers-reduced-motion: reduce) {
  .balloon { animation: none; }
  [data-depth] { transform: none; transition: none; }
  .plate--mountains, .plate--world { animation: none; }
}


/* ── talelike.com additions (truth labels, links, motion, Danish lengths) ── */
@media (max-width: 899px) { .plate--sky { background-image: url("/media/img/hero-sky-960.webp"); } }
.hero h1 { margin: 0 0 clamp(16px, 1.6vw, 24px); font: 400 clamp(52px, 7.22vw, 104px) / .96 var(--serif); letter-spacing: -.016em; color: var(--ink); text-wrap: initial; }
.hero h1.h1--long { font-size: clamp(44px, 5.6vw, 82px); line-height: .98; }
.app__label { font: 600 calc(10 * var(--u)) / 1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--info-ink); background: var(--info-bg); padding: calc(6 * var(--u)) calc(9 * var(--u)); border-radius: 999px; white-space: nowrap; margin-left: auto; }
.split__main { white-space: nowrap; }
.doc__title { font-family: var(--serif); }
.doc__status { position: absolute; left: calc(36 * var(--u)); right: calc(36 * var(--u)); bottom: calc(12 * var(--u)); margin: 0; z-index: 3; font: 500 calc(12 * var(--u)) / 1.35 var(--sans); color: var(--ok-ink); }
.doc__status:empty { display: none; }
.doc__status:not(:empty) { background: var(--ok-bg); padding: calc(8 * var(--u)) calc(12 * var(--u)); border-radius: calc(10 * var(--u)); }
.aud__img { position: relative; }
.aud__img video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s var(--ease-out), scale 1.2s var(--ease-out); }
.aud__img video.is-on { opacity: 1; }
.aud-business { position: absolute; z-index: 40; left: calc(550 * var(--u)); top: calc(352 * var(--u)); display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font: 500 max(13px, calc(14.5 * var(--u))) / 1.3 var(--sans); color: var(--forest); text-decoration: none; }
.aud-business:hover { text-decoration: underline; text-underline-offset: 4px; }
.aud-business .i { width: 16px; height: 16px; }
.astage { aspect-ratio: 1440 / 420; }
/* the editor window as a document fragment needs its own canvas positioning on subpages, see site.css .edemo */
@media (max-width: 899px) {
  .nav--over { top: 12px; }
  .hero__copy { padding-top: 88px; }
  .aud-business { position: static; padding: 0; }
  .astage { aspect-ratio: auto; }
  .app__label { font-size: 10px; padding: 6px 8px; margin-left: 0; }
  .doc__status { font-size: 12px; }
}
:root[data-motion="off"] .balloon { animation: none; }
:root[data-motion="off"] [data-depth] { transform: none; transition: none; }
:root[data-motion="off"] .plate--mountains, :root[data-motion="off"] .plate--world { animation: none; }
@media (max-width: 899px) {
  .doc__toolbar { flex-wrap: wrap; height: auto; min-height: 48px; padding: 6px 10px; row-gap: 4px; }
  .doc__toolbar .para { margin-right: 4px; }
  .app__label { margin-left: 0; }
}