/* Closed Form Labs, mockup v5 with the approved brand: keystone mark,
   emerald palette, Instrument Sans display over DM Sans body.
   Layout concept: a calm, light studio page with one dark cinematic stage in
   the middle where the demos play. One big moment (the glass square in the
   hero), quiet reveals everywhere else.
   Shape rule: surfaces 16px, controls 10px, the brand square 3px. */
:root {
  --paper: #F3F6F4;
  --sheet: #FFFFFF;
  --tint: #EAF0EC;
  --ink: #0E1512;
  --ink-2: #45524B;
  --ink-3: #5A6760;
  --pencil: #97A39C;
  --line: rgb(14 21 18 / .10);
  --accent: #0A7A55;
  --accent-hi: #0B8C62;
  --on-accent: #FFFFFF;
  --accent-soft: rgb(10 122 85 / .09);
  --stage: #050A08;
  --stage-2: #0E1612;
  --stage-fg: #EEF3F0;
  --stage-fg-2: #9FB0A7;
  --stage-line: rgb(238 243 240 / .10);
  --stage-accent: #5FD3A5;
  --ok: #157A43;
  --err: #B8301D;
  --shadow: 0 1px 2px rgb(14 21 18 / .04), 0 12px 40px rgb(14 21 18 / .07);

  --display: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --body: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;

  --wrap: 1280px;
  --gut: 32px;
  --r-card: 16px;
  --r-ctl: 10px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0B100E; --sheet: #121A16; --tint: #16201B; --ink: #E9EFEC; --ink-2: #AEBBB4; --ink-3: #8A988F; --pencil: #56625B;
    --line: rgb(233 239 236 / .10); --accent: #5FD3A5; --accent-hi: #7DDDB6; --on-accent: #06100C; --accent-soft: rgb(95 211 165 / .12);
    --stage: #030605; --stage-2: #0C1411; --stage-fg: #E9EFEC; --stage-fg-2: #98A89F; --stage-line: rgb(233 239 236 / .09); --stage-accent: #7DDDB6;
    --ok: #5BD08E; --err: #FF8F7E; --shadow: 0 1px 2px rgb(0 0 0 / .3), 0 12px 40px rgb(0 0 0 / .35);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0B100E; --sheet: #121A16; --tint: #16201B; --ink: #E9EFEC; --ink-2: #AEBBB4; --ink-3: #8A988F; --pencil: #56625B;
  --line: rgb(233 239 236 / .10); --accent: #5FD3A5; --accent-hi: #7DDDB6; --on-accent: #06100C; --accent-soft: rgb(95 211 165 / .12);
  --stage: #030605; --stage-2: #0C1411; --stage-fg: #E9EFEC; --stage-fg-2: #98A89F; --stage-line: rgb(233 239 236 / .09); --stage-accent: #7DDDB6;
  --ok: #5BD08E; --err: #FF8F7E; --shadow: 0 1px 2px rgb(0 0 0 / .3), 0 12px 40px rgb(0 0 0 / .35);
  color-scheme: dark;
}

/* ================= base ================= */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 18px/1.6 var(--body); -webkit-font-smoothing: antialiased; overflow-x: clip; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 700; letter-spacing: -.035em; line-height: 1.04; text-wrap: balance; }
p, ul, ol, dl, dd, figure, fieldset { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.nw { white-space: nowrap; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
.sq { display: inline-block; width: .5em; height: .5em; background: currentColor; border-radius: 1px; flex: none; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ================= buttons ================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .65rem;
  min-height: 52px; padding: 0 1.5rem; white-space: nowrap; border: 1px solid transparent; border-radius: var(--r-ctl);
  font: 600 1rem/1 var(--body); letter-spacing: -.005em; text-decoration: none; cursor: pointer;
  transition: background-color .2s, border-color .2s, color .2s, transform .5s var(--ease);
}
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-hi); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--ink-3); }
.btn:active { transform: translate3d(var(--mx, 0px), calc(var(--my, 0px) + 1px), 0) scale(.985); }
.btn .sq { transition: transform .3s var(--ease); }
.btn:hover .sq { transform: translateX(3px); }
.btn-sm { min-height: 44px; padding: 0 1.05rem; font-size: .92rem; }
.darkstage .btn-ghost { color: var(--stage-fg); border-color: var(--stage-line); }

/* ================= nav: a bar that becomes a floating pill ================= */
.progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 60; pointer-events: none; }
.progress span { position: absolute; inset: 0; background: var(--accent); }
.nav { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 10px); left: 0; right: 0; z-index: 50; display: flex; justify-content: center; pointer-events: none; }
.nav-in {
  pointer-events: auto; display: flex; align-items: center; gap: 1.8rem;
  width: min(var(--wrap), calc(100% - 20px)); height: 62px; padding: 0 9px 0 calc(var(--gut) - 10px);
  border: 1px solid transparent; border-radius: 999px;
  transition: width .6s var(--ease), background-color .4s, border-color .4s, box-shadow .4s;
}
.brand { display: flex; align-items: center; gap: .55rem; min-height: 44px; margin-right: auto; text-decoration: none; font: 700 1.1rem/1 var(--display); letter-spacing: -.025em; white-space: nowrap; }
.ks-mark { height: 15px; width: auto; aspect-ratio: 1.8833; fill: var(--accent); flex: none; }
.wm b { font-weight: 650; }
.wm .word { font-weight: 400; color: var(--ink-2); }
.nav-links { display: flex; gap: 1.7rem; }
.nav-links a { font-size: .95rem; color: var(--ink-2); text-decoration: none; padding: .5rem 0; white-space: nowrap; }
.nav-links a:hover { color: var(--ink); }
.cf-scrolled .nav-in { width: min(640px, calc(100% - 20px)); gap: 1.3rem; background: color-mix(in srgb, var(--sheet) 82%, transparent); border-color: var(--line); box-shadow: var(--shadow); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); padding-left: 18px; }
.cf-scrolled .nav .brand .word { display: none; }
@media (max-width: 1000px) { .nav-links { display: none; } .cf-scrolled .nav-in { width: min(420px, calc(100% - 20px)); } }

/* ================= hero ================= */
.hero { position: relative; padding: calc(62px + clamp(2.5rem, 8vh, 6rem)) 0 clamp(2rem, 6vh, 4rem); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(1rem, 3vw, 3rem); align-items: center; }
.hero-copy { display: grid; gap: 1.5rem; justify-items: start; }
.who { display: inline-flex; align-items: center; gap: .6rem; font: 500 .85rem/1 var(--mono); color: var(--ink-3); }
.who .sq { width: 9px; height: 9px; color: var(--accent); }
.hero h1 { font-size: clamp(2.6rem, 4.6vw, 4.6rem); letter-spacing: -.045em; line-height: .98; }
.hero h1 em { font-style: normal; color: var(--accent); }
.hero .sub { font-size: clamp(1.08rem, 1.35vw, 1.24rem); color: var(--ink-2); max-width: 44ch; }
.hero-cta { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }
.hero-note { font-size: .9rem; color: var(--ink-3); }
.hero-note a { color: var(--ink-2); }
#hero3d { position: relative; width: 100%; aspect-ratio: 5 / 4; max-height: 72svh; justify-self: center; }
/* The 3D canvas is taller than the box (35% extra above) and fades at every
   edge, so the falling keystone and the guide lines come out of nothing. The
   top fifth stays fully clear so the stone never shows through the nav. */
#hero3d canvas {
  position: absolute; left: 0; top: -35%; width: 100% !important; height: 135% !important; display: block;
  opacity: 0; transition: opacity .3s ease-out;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent 20%, #000 36%, #000 86%, transparent 100%), linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, transparent 0, transparent 20%, #000 36%, #000 86%, transparent 100%), linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%);
  mask-composite: intersect;
}
#hero3d.gl-ready canvas { opacity: 1; }
/* The poster: the finished mark, drawn before any script runs. It stays for
   reduced motion, Save-Data, no WebGL or a lost GPU context. */
.ks-poster { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transition: opacity .3s ease-out .15s; }
.ks-poster .kp-half { fill: var(--sheet); stroke: var(--pencil); stroke-width: 5; stroke-linejoin: round; }
.ks-poster .kp-key { fill: var(--accent); }
#hero3d.gl-ready .ks-poster { opacity: 0; }
.hero-strip { margin-top: clamp(2rem, 5vh, 3.5rem); display: flex; flex-wrap: wrap; gap: .6rem 2rem; align-items: center; padding-top: 1.4rem; border-top: 1px solid var(--line); font-size: .95rem; color: var(--ink-2); }
.hero-strip li { display: flex; align-items: center; gap: .55rem; }
.hero-strip li::before { content: ""; width: 7px; height: 7px; border-radius: 1px; background: var(--accent); }
@media (prefers-reduced-motion: no-preference) {
  .rise { animation: rise .9s var(--ease) both; }
  .rise.d1 { animation-delay: .1s; } .rise.d2 { animation-delay: .2s; } .rise.d3 { animation-delay: .3s; }
  @keyframes rise { from { opacity: 0; transform: translate3d(0, 22px, 0); } }
}

/* ================= sections ================= */
.sec { position: relative; padding: clamp(5rem, 12vh, 8.5rem) 0; }
.sec-head { display: grid; align-content: start; gap: 1rem; max-width: 46rem; margin-bottom: clamp(2.5rem, 6vh, 3.8rem); }
.sec h2 { font-size: clamp(2.3rem, 4.4vw, 4rem); }
.lead { font-size: clamp(1.06rem, 1.3vw, 1.2rem); color: var(--ink-2); max-width: 52ch; }
.kicker { font: 500 .8rem/1 var(--mono); color: var(--accent); letter-spacing: .02em; }

/* ---- services: a ledger, turnaround on one shared scale ---- */
.ledger { border-top: 1px solid var(--line); }
.row { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, .9fr); gap: clamp(1.5rem, 3vw, 3rem); padding: clamp(1.8rem, 3.5vw, 2.6rem) 0; border-bottom: 1px solid var(--line); align-items: start; }
.r-name { display: grid; gap: .7rem; }
.r-name h3 { font-size: clamp(1.7rem, 2.6vw, 2.4rem); }
.r-name p { color: var(--ink-2); max-width: 40ch; }
.r-name .aside { font-size: .92rem; color: var(--accent); }
.row.second { padding-block: clamp(1.4rem, 2.6vw, 2rem); }
.row.second .r-name h3 { font-size: clamp(1.35rem, 1.9vw, 1.75rem); }
.row.second .r-name p, .row.second .r-io { font-size: .94rem; }
.r-io { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .5rem 1rem; font-size: .98rem; }
.r-io dt { font: 500 .76rem/1.7 var(--mono); color: var(--ink-3); white-space: nowrap; }
.r-io dd { color: var(--ink-2); }
.r-time { display: grid; gap: .55rem; justify-items: start; }
.r-time b { font: 700 clamp(1.8rem, 2.8vw, 2.6rem)/1 var(--display); letter-spacing: -.035em; }
.range { position: relative; width: 100%; height: 10px; border-radius: 3px; background: var(--tint); overflow: hidden; }
.range i { position: absolute; top: 0; bottom: 0; left: calc(var(--a) / 14 * 100%); width: calc((var(--b) - var(--a)) / 14 * 100%); background: var(--accent); border-radius: 3px; transform-origin: 0 50%; }
.cf-ready.cf-anim .row:not(.is-in) .range i { transform: scaleX(0); }
.cf-ready.cf-anim .row .range i { transition: transform .8s var(--ease) calc(var(--d, 0) * 90ms + .35s); }
.axis { display: flex; justify-content: space-between; width: 100%; font: 500 .68rem/1 var(--mono); color: var(--ink-3); }
.more { display: inline-flex; align-items: center; min-height: 44px; margin-top: .1rem; font-size: .92rem; font-weight: 600; color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
.more:hover { color: var(--accent); }

/* ---- the dark stage: labelled demos ---- */
.darkstage { background: var(--stage); color: var(--stage-fg); overflow: hidden; }
.darkstage .stage-in { padding: clamp(5rem, 11vh, 7rem) 0 clamp(4rem, 9vh, 6rem); }
.darkstage h2 { color: var(--stage-fg); font-size: clamp(2.3rem, 4.4vw, 4rem); }
.darkstage .lead { color: var(--stage-fg-2); }
.darkstage .kicker { color: var(--stage-accent); }
.rail { display: flex; align-items: flex-start; gap: 20px; will-change: transform; padding-inline: max(var(--gut), (100vw - var(--wrap)) / 2 + var(--gut)); scroll-padding-inline: max(var(--gut), (100vw - var(--wrap)) / 2 + var(--gut)); }
/* When the strip is a swipe strip on a desktop (reduced motion, or JavaScript off), a mouse
   needs a visible scrollbar to reach the last card; touch screens keep it hidden. */
@media (hover: hover) and (pointer: fine) {
  .cf-flow .rail[data-rail], html:not(.js) .rail[data-rail] { scrollbar-width: thin; scrollbar-color: var(--stage-fg-2) transparent; padding-bottom: 12px; }
}
.demo { flex: none; width: clamp(250px, 21vw, 320px); display: grid; gap: .9rem; }
.demo.wide { width: clamp(460px, 44vw, 660px); }
.demo .frame { position: relative; aspect-ratio: 9 / 16; border-radius: 14px; overflow: hidden; background: var(--stage-2); border: 1px solid var(--stage-line); }
.demo.wide .frame { aspect-ratio: 16 / 10; }
.poster { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 22px 20px 56px; }
.p-brand { font: 800 clamp(2rem, 3vw, 2.8rem)/1 var(--display); letter-spacing: -.04em; }
.p-sub { margin-top: .5rem; font-size: .95rem; opacity: .85; }
.p-halvey { background: radial-gradient(90% 60% at 70% 22%, #FFE3B0, transparent 70%), linear-gradient(170deg, #F6B96B 0%, #E07A4F 55%, #7A2E26 100%); color: #2A0F0B; }
.p-kettle { background: radial-gradient(80% 55% at 30% 25%, #F5E6CF, transparent 70%), linear-gradient(165deg, #C9955E 0%, #7C4A2A 60%, #2E1A10 100%); color: #FFF4E6; }
.p-page { background: linear-gradient(135deg, #FFF3E2, #F6D2B0); color: #3A1810; justify-content: center; padding: 28px 34px; }
.p-page .p-brand { font-size: clamp(2.4rem, 4vw, 3.6rem); }
.p-phone { position: absolute; right: 7%; bottom: -12%; width: 22%; aspect-ratio: 9 / 19; border-radius: 16px; background: linear-gradient(170deg, #F6B96B, #E07A4F); border: 5px solid #1A1D23; box-shadow: 0 20px 40px -12px rgb(0 0 0 / .45); }
.demo .badge { position: absolute; top: 12px; left: 12px; display: inline-flex; align-items: center; gap: .45rem; font: 600 .7rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: #0B0E13; background: #EEF0F4; padding: .42rem .6rem; border-radius: 999px; }
.demo .badge::before { content: ""; width: 7px; height: 7px; border-radius: 1px; background: #0A7A55; }
.demo .play { position: absolute; right: 14px; top: 12px; width: 44px; height: 44px; border-radius: 50%; background: rgb(11 14 19 / .35); backdrop-filter: blur(8px); border: 1px solid rgb(238 240 244 / .35); display: grid; place-items: center; cursor: pointer; }
.demo .play::before { content: ""; margin-left: 3px; border-left: 12px solid #EEF0F4; border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.demo .soon { position: absolute; left: 14px; right: 14px; bottom: 14px; font: 500 .7rem/1.4 var(--mono); color: rgb(255 255 255 / .8); transition: color .3s; }
.demo .soon.dark { color: rgb(58 24 16 / .7); }
.demo .soon.flash { color: #FFFFFF; }
.demo figcaption { display: grid; gap: .3rem; }
.demo figcaption b { font: 600 1.05rem/1.3 var(--display); letter-spacing: -.01em; color: var(--stage-fg); }
.demo figcaption span { font-size: .88rem; color: var(--stage-fg-2); }
.demo figcaption em { font-style: normal; font-size: .88rem; color: var(--stage-fg); opacity: .8; border-left: 2px solid var(--stage-accent); padding-left: .7rem; margin-top: .3rem; }
.endcard { flex: none; width: clamp(250px, 21vw, 320px); aspect-ratio: 9 / 16; border-radius: 14px; border: 1px dashed var(--stage-line); display: flex; flex-direction: column; justify-content: center; gap: 1.2rem; padding: 1.6rem; }
.ec-line { font: 700 1.7rem/1.1 var(--display); letter-spacing: -.03em; }
.ec-note { font-size: .88rem; color: var(--stage-fg-2); }
.rail-dots { display: none; justify-content: center; gap: 8px; margin-top: 1.4rem; }
.rail-dots i { width: 7px; height: 7px; border-radius: 1px; background: var(--stage-line); transition: background-color .3s, transform .3s; }
.rail-dots i.on { background: var(--stage-accent); transform: scale(1.25); }
.cf-flow .rail-dots { display: flex; }

/* ---- how it works: four beats on one line ---- */
.beats-line { position: relative; height: 2px; background: var(--line); margin-bottom: 1.6rem; }
.beats-line i { position: absolute; inset: 0; background: var(--accent); transform-origin: 0 50%; transform: scaleX(var(--p, 1)); }
.beats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.2rem, 2.4vw, 2.4rem); }
.beats li { display: grid; gap: .6rem; align-content: start; }
.beats h3 { font-size: 1.35rem; }
.beats p { color: var(--ink-2); font-size: 1rem; }
.beats-note { margin-top: 2.2rem; font-size: .95rem; color: var(--ink-3); }

/* ---- about ---- */
.about .wrap { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.portrait-wrap { display: grid; gap: .8rem; max-width: 400px; }
.portrait { position: relative; aspect-ratio: 4 / 5; border-radius: var(--r-card); overflow: hidden; background: radial-gradient(70% 55% at 50% 38%, color-mix(in srgb, var(--accent) 16%, var(--sheet)), var(--tint)); border: 1px solid var(--line); display: grid; place-items: center; }
.portrait .ph { display: grid; justify-items: center; gap: 1rem; color: var(--ink-3); font: 500 .8rem/1.5 var(--mono); }
.portrait .ph .sq { width: 48px; height: 48px; color: var(--accent); border-radius: 4px; }
.portrait-wrap figcaption { font-size: .88rem; color: var(--ink-3); }
.about-copy { display: grid; gap: 1.1rem; }
.about-copy > p { color: var(--ink-2); max-width: 54ch; font-size: 1.08rem; }
.about-copy .hold { margin-top: .6rem; font: 600 1.05rem/1.2 var(--display); color: var(--ink); }
.facts { display: grid; gap: 0; border-top: 1px solid var(--line); }
.facts li { padding: .8rem 0; border-bottom: 1px solid var(--line); font-size: 1rem; }

/* ---- the name ---- */
.meaning { background: var(--tint); }
.meaning .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.big-ks { width: min(100%, 360px); height: auto; justify-self: center; overflow: visible; }
.big-ks .ks-l, .big-ks .ks-r { fill: var(--ink); }
.big-ks .ks-k { fill: var(--accent); }
/* The halves are in place; the keystone drops in last, on time, when the band arrives. */
.cf-ready.cf-anim .big-ks:not(.is-in) { opacity: 1; transform: none; filter: none; }
.cf-ready.cf-anim .big-ks:not(.is-in) .ks-k { transform: translate3d(0, -60%, 0); opacity: 0; }
.cf-ready.cf-anim .big-ks.is-in .ks-k { transition: transform .9s cubic-bezier(.34, 1.4, .64, 1) .35s, opacity .3s ease-out .35s; }
.big-ks .ks-k { transform-box: fill-box; }
.meaning-copy { display: grid; gap: 1rem; }
.meaning h2 { font-size: clamp(2.2rem, 4vw, 3.6rem); }
.meaning-copy p:not(.kicker) { font-size: clamp(1.12rem, 1.5vw, 1.35rem); line-height: 1.5; color: var(--ink-2); max-width: 46ch; }
.meaning-copy b { color: var(--ink); font-weight: 600; }

/* ---- also available: a compact band ---- */
.also-sec { padding-block: clamp(3.5rem, 8vh, 5rem); }
.also-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
.also-head h2 { font-size: clamp(1.6rem, 2.4vw, 2rem); }
.also-head p { margin-top: .5rem; color: var(--ink-3); font-size: .95rem; }
.also-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.also { padding: 1.3rem 1.3rem 1.4rem; border-radius: var(--r-card); border: 1px solid var(--line); display: grid; gap: .45rem; align-content: start; }
.also h3 { font-size: 1.15rem; }
.also p { color: var(--ink-2); font-size: .95rem; }

/* ---- faq ---- */
.faq-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(2rem, 5vw, 5rem); }
.faq h2 { font-size: clamp(2rem, 3.2vw, 3rem); }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-child { border-top: 1px solid var(--line); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 72px; padding: 1rem 0; cursor: pointer; list-style: none; font: 600 clamp(1.05rem, 1.4vw, 1.25rem)/1.3 var(--display); letter-spacing: -.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 11px; height: 11px; border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3); transform: rotate(45deg) translate(-3px, -3px); transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); border-color: var(--accent); }
.faq details p { padding: 0 0 1.4rem; color: var(--ink-2); max-width: 62ch; }

/* ---- book a call ---- */
.call .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.call-copy { display: grid; gap: 1.1rem; }
.call h2 { font-size: clamp(2.3rem, 4.2vw, 3.8rem); }
.covers { display: grid; border-top: 1px solid var(--line); }
.covers li { padding: .8rem 0; border-bottom: 1px solid var(--line); font-size: 1.02rem; }
.market { margin-top: .6rem; padding: 1.1rem 1.2rem; border-radius: 12px; background: var(--tint); display: grid; gap: .35rem; font-size: .95rem; color: var(--ink-2); }
.market .m-title { font: 600 1.02rem/1.3 var(--display); color: var(--ink); }
.booker { border-radius: var(--r-card); border: 1px solid var(--line); background: var(--sheet); box-shadow: var(--shadow); padding: clamp(1.4rem, 2.4vw, 2rem); display: grid; gap: 1.2rem; }
.booker-top { display: flex; align-items: center; gap: .9rem; }
.booker-top .av { width: 44px; height: 44px; border-radius: 12px; background: var(--accent); display: grid; place-items: center; flex: none; }
.ks-av { width: 70%; height: auto; fill: var(--on-accent); }
.booker-top b { display: block; font: 600 1.08rem/1.2 var(--display); }
.booker-top span { font-size: .9rem; color: var(--ink-3); }
.embed { border: 1px dashed var(--pencil); border-radius: 12px; min-height: 280px; display: grid; place-items: center; text-align: center; padding: 1.5rem; color: var(--ink-3); font: 500 .8rem/1.8 var(--mono); }
.booker .btn { width: 100%; }
.mail-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem .7rem; font-size: .9rem; color: var(--ink-3); }
.mail-row a, .f-contact a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); font-weight: 600; user-select: all; }
.copy { background: none; border: 1px solid var(--line); border-radius: 8px; min-height: 44px; padding: 0 .8rem; cursor: pointer; font: 500 .74rem/1 var(--mono); color: var(--ink-2); }
.copy:hover { border-color: var(--ink-3); color: var(--ink); }

/* ---- footer ---- */
.foot { padding: clamp(3.5rem, 8vh, 5rem) 0 2rem; border-top: 1px solid var(--line); }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.2fr); gap: 2rem; align-items: start; }
.f-brand { display: grid; gap: .5rem; color: var(--ink-3); font-size: .92rem; }
.f-brand .brand { margin: 0 0 .3rem; }
.f-tag { font: 700 clamp(1.6rem, 2.6vw, 2.2rem)/1.1 var(--display); letter-spacing: -.03em; color: var(--ink); }
.f-links { display: grid; gap: 0; }
.f-links a { display: flex; align-items: center; min-height: 44px; color: var(--ink-2); text-decoration: none; font-size: .95rem; }
.f-links a:hover { color: var(--ink); }
.f-contact { display: grid; gap: .6rem; font-size: .92rem; color: var(--ink-3); }
.f-small { margin-top: 2.6rem; padding-top: 1.2rem; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem 2rem; font-size: .8rem; color: var(--ink-3); }
.f-small a { color: var(--ink-2); text-decoration-color: var(--accent); text-underline-offset: 3px; }
.f-small a:hover, .f-small a[aria-current] { color: var(--ink); }
/* the privacy link: a 44px target that does not make the small print taller */
.f-priv { display: inline-flex; align-items: center; min-height: 44px; margin: -12px 0 -12px .9rem; }

/* ---- a visit tagged as coming from Fiverr or Upwork: no call buttons, the platform note leads ---- */
/* every route to a call or to off-platform contact goes: buttons, links, the hero note and the footer email */
.via-market a[href="#call"], .via-market [data-book], .via-market .call-only, .via-market .hb-n1, .via-market .f-mail { display: none !important; }.via-market .market { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---- the nav dims with the room over the dark stage ---- */
.nav-dark.cf-scrolled .nav-in { background: color-mix(in srgb, var(--stage-2) 86%, transparent); border-color: var(--stage-line); }
.nav-dark .nav-in .brand, .nav-dark .nav-links a { color: var(--stage-fg); }
.nav-dark .nav-links a { color: var(--stage-fg-2); }

/* ================= narrow screens and phones ================= */
@media (max-width: 1000px) {
  .hero-grid { grid-template-columns: 1fr; }
  #hero3d { order: -1; width: min(100%, 420px); max-height: 38svh; margin: 0 auto .4rem; }
  .row { grid-template-columns: 1fr; gap: 1.2rem; }
  .beats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about .wrap, .meaning .wrap, .faq-grid, .call .wrap, .also-wrap, .foot-grid { grid-template-columns: 1fr; }
  .portrait-wrap { max-width: 380px; }
  .big-ks { width: 180px; }
}
/* Short phones: keep both calls to action and the marketplace note on the first screen. */
@media (max-width: 1000px) and (max-height: 720px) { #hero3d { max-height: 30svh; } }
@media (max-width: 900px) {
  :root { --gut: 20px; }
  body { font-size: 17px; }
  .nav-in { height: 56px; padding-left: 14px; }
  .brand { font-size: 1rem; }
  .cf-scrolled .nav-in { width: calc(100% - 20px); }
  .hero { padding-top: calc(56px + 1.6rem); }
  .hero h1 { font-size: clamp(2.4rem, 10.6vw, 3.3rem); }
  .hero-cta .btn { flex: 1 1 100%; }
  .sec { padding: 4.2rem 0; }
  .beats { grid-template-columns: 1fr; }
  .also-grid { grid-template-columns: 1fr; }
  .endcard { width: 72vw; max-width: 300px; }
  .rail { padding-inline: var(--gut); scroll-padding-inline: var(--gut); }
  .demo { width: 72vw; max-width: 300px; }
  .demo.wide { width: 86vw; max-width: 420px; }
  }
/* the narrowest phones: the nav keeps a side gutter for its Book a call button */
@media (max-width: 359px) {
  .nav-in { gap: .8rem; padding-left: 12px; }
  .nav .brand .word { display: none; }
  .nav .btn-sm { padding: 0 .9rem; }
}
@media (prefers-reduced-motion: reduce) {
  .btn, .btn .sq, .nav-in, .faq summary::after { transition: none !important; }
}