/* ═══════════════════════════════════════════════════════════════════════════
   MANTL — web design system

   Light, warm and roomy. The app is a dark room you go into on purpose;
   the website is the daylight outside it. Cream paper, warm black ink,
   and the product shown as itself: dark phone screens sitting on bone,
   which is what makes them look like something worth having.

   Fraunces carries the voice. Hanken Grotesk carries everything that
   explains. Both are the app's own faces, so the brand does not change
   at the door, only the light.

   One plain file, no build step, because the site deploys by dragging a
   folder onto Netlify.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── TOKENS ───────────────────────────────────────────────────────────────── */
:root {
  --bg:      #FBF9F4;          /* warm bone */
  --bg-2:    #F4F0E6;
  --bg-3:    #EBE5D7;
  --card:    #FFFFFF;
  --deep:    #12100D;          /* the dark bands. The app's own near-black. */
  --deep-2:  #1C1A15;

  --ink:     #100E08;
  --ink-2:   rgba(16,14,8,0.70);
  --ink-3:   rgba(16,14,8,0.48);
  --line:    rgba(16,14,8,0.12);
  --line-2:  rgba(16,14,8,0.20);

  /* The app's four hues, weighted down hard. The sage the app uses on black
     goes pastel on cream, and pastel is the wrong register here. */
  --green:      #2F5D46;       /* T.regulate */
  --green-deep: #234634;
  --green-soft: #E3ECE6;
  --clay:       #A55E37;       /* T.relate */
  --clay-soft:  #F7EBE2;
  --brass:      #8A7350;       /* T.anchor */
  --blue:       #47688C;       /* T.build */

  /* The four patterns, same identities the app gives them. */
  --p-overflow:    #A8443F;
  --p-escape:      #47688C;
  --p-glass:       #59699A;
  --p-peacekeeper: #3D7157;

  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans:  'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --ease:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);

  --gut:   clamp(1.15rem, 3.2vw, 3rem);
  --max:   1280px;
  --nav-h: 72px;

  --r:      14px;
  --r-sm:   9px;
  --r-pill: 100px;

  --nav-bg:  rgba(251,249,244,0.82);

  --shadow:    0 1px 2px rgba(16,14,8,0.05), 0 10px 26px -14px rgba(16,14,8,0.16);
  --shadow-lg: 0 2px 5px rgba(16,14,8,0.05), 0 26px 54px -22px rgba(16,14,8,0.24);
  --shadow-xl: 0 4px 8px rgba(16,14,8,0.06), 0 46px 90px -30px rgba(16,14,8,0.32);

  color-scheme: light;
}

/* ── DARK ─────────────────────────────────────────────────────────────────
   Light is the default because that is the face of the brand on the web.
   Dark is the app's own room, for men who read at night, and it is opt-in
   rather than inherited from the operating system: landing in the dark on
   a first visit is a different first impression than the one intended.

   Everything below is tokens only. No component knows which mode it is in. */
:root[data-theme="dark"] {
  --bg:      #0E0D0A;
  --bg-2:    #15130F;
  --bg-3:    #1F1D16;
  --card:    #17150F;
  --deep:    #050403;          /* the bands stay the deepest thing on the page */
  --deep-2:  #0D0C0A;

  --ink:     #EFEBE1;
  --ink-2:   rgba(239,235,225,0.68);
  --ink-3:   rgba(239,235,225,0.45);
  --line:    rgba(239,235,225,0.10);
  --line-2:  rgba(239,235,225,0.19);

  --green:      #7FA88F;
  --green-deep: #9DC0AC;
  --green-soft: rgba(122,158,138,0.14);
  --clay:       #C08055;
  --brass:      #A99270;
  --blue:       #7A9CC4;

  --p-overflow:    #C46A63;
  --p-escape:      #7A9CC4;
  --p-glass:       #8494C4;
  --p-peacekeeper: #7FA88F;

  --nav-bg: rgba(14,13,10,0.82);

  --shadow:    0 1px 2px rgba(0,0,0,0.32), 0 10px 26px -14px rgba(0,0,0,0.6);
  --shadow-lg: 0 2px 5px rgba(0,0,0,0.34), 0 26px 54px -22px rgba(0,0,0,0.68);
  --shadow-xl: 0 4px 8px rgba(0,0,0,0.36), 0 46px 90px -30px rgba(0,0,0,0.75);

  color-scheme: dark;
}
/* ── DARK: the marble ──────────────────────────────────────────────────
   Flat near-black over a whole page reads as despair rather than as calm.
   The app's own marble sits fixed behind everything, and the sections let
   it through by degrees: plain sections fully, soft sections faintly, the
   deep bands barely at all. Cards stay opaque so nothing you read sits on
   top of a texture. Light mode is untouched. */
:root[data-theme="dark"] body {
  background-image: url('/assets/texture-dark.webp');
  background-size: cover;
  background-position: center top;
  background-attachment: fixed;
  background-repeat: no-repeat;
}
:root[data-theme="dark"] .section--soft { background-color: rgba(21,19,15,0.80); }
:root[data-theme="dark"] .section.deep  { background-color: rgba(5,4,3,0.86); }
:root[data-theme="dark"] .band__in      { background-color: rgba(5,4,3,0.90); }
:root[data-theme="dark"] .foot          { background-color: rgba(21,19,15,0.86); }
/* A scrim across the side the headline sits on. The stone stays visible on
   the phone side and gets out of the way of the type. */
:root[data-theme="dark"] .hero::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg,
    rgba(14,13,10,0.94) 0%, rgba(14,13,10,0.78) 32%,
    rgba(14,13,10,0.28) 62%, rgba(14,13,10,0) 100%);
}
.hero__grid { z-index: 1; }
/* A fixed background is a repaint on every scroll frame on a phone. */
@media (hover: none), (pointer: coarse) {
  :root[data-theme="dark"] body { background-attachment: scroll; background-size: 100% auto; }
}

/* A filled green button needs dark text once the green itself is lifted. */
:root[data-theme="dark"] .btn--green,
:root[data-theme="dark"] .mail__form .btn { color: var(--deep-2); }
:root[data-theme="dark"] .btn--green:hover { background: var(--green-deep); }
/* The dark bands sit only a shade below the page in dark mode, so they get
   an edge to keep reading as bands rather than as nothing. */
:root[data-theme="dark"] .section.deep { border-block: 1px solid rgba(239,235,225,0.08); }
:root[data-theme="dark"] .band__in,
:root[data-theme="dark"] .rx { box-shadow: inset 0 0 0 1px rgba(239,235,225,0.09); }

/* ── RESET ────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 20px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: clamp(1rem, 1.02vw, 1.06rem);
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background 0.4s var(--ease), color 0.4s var(--ease);
}

img, svg, canvas, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; background: none; border: 0; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--green); color: var(--bg); }
:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 3px; }

/* ── LAYOUT ───────────────────────────────────────────────────────────────── */
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gut); }
.wrap--narrow { max-width: 780px; }
.section { padding-block: clamp(3.6rem, 7.4vw, 7rem); position: relative; }
.section--tight { padding-block: clamp(2.4rem, 4.6vw, 3.8rem); }
.section--soft { background: var(--bg-2); }
.section--edge { border-block: 1px solid var(--line); }
.rule { height: 1px; background: var(--line); border: 0; }
.mt-l { margin-top: clamp(1.8rem, 3.4vw, 2.9rem); }
.center { text-align: center; }
.muted { color: var(--ink-2); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── TYPE ─────────────────────────────────────────────────────────────────── */
h1, h2, h3, h4 { font-weight: 600; letter-spacing: -0.02em; line-height: 1.14; }

/* Display type is Fraunces at the app's own weight, with SOFT and WONK
   pulled to zero: sharp terminals, no swashes, tight tracking. A light
   optical-size serif with a green italic in it reads soft and decorative,
   which is the wrong voice for the man this is for. */
.display, .hero h1, .sec-head h2, .band h2, .beat p, .phead h1 {
  font-family: var(--serif);
  font-variation-settings: 'opsz' 144, 'SOFT' 0, 'WONK' 0;
  font-weight: 600;
  letter-spacing: -0.032em;
}
/* Emphasis is weight and line breaks, not colour and italics. */
em { font-style: normal; color: inherit; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.73rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--green-deep); background: var(--green-soft);
  padding: 0.38rem 0.8rem; border-radius: var(--r-pill);
}
.eyebrow--plain {
  background: none; padding: 0; color: var(--ink-3); letter-spacing: 0.2em;
}

.sec-head { max-width: 60ch; margin-bottom: clamp(2rem, 4vw, 3.2rem); }
.sec-head h2 { font-size: clamp(1.95rem, 3.6vw, 3.1rem); line-height: 1.08; }
.sec-head .eyebrow { margin-bottom: 1.1rem; }
.sec-head p { margin-top: 1rem; color: var(--ink-2); font-size: clamp(1.02rem, 1.3vw, 1.13rem); max-width: 54ch; }
.sec-head--center { margin-inline: auto; text-align: center; }
.sec-head--center p { margin-inline: auto; }
.sec-head--split {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 2rem; flex-wrap: wrap; max-width: none;
}

.lede { font-size: clamp(1.06rem, 1.5vw, 1.24rem); font-weight: 500; line-height: 1.58; color: var(--ink-2); }
.lede strong { color: var(--ink); font-weight: 600; }
.small { font-size: 0.86rem; color: var(--ink-3); line-height: 1.6; }

h1, h2, h3, h4, blockquote, .q-text, .tool-label { text-wrap: balance; }
p, .lede, .tool-done { text-wrap: pretty; }

/* ── BUTTONS ──────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  padding: 0.92rem 1.6rem; border-radius: var(--r-pill);
  font-size: 0.95rem; font-weight: 600; letter-spacing: -0.005em; white-space: nowrap;
  border: 1px solid transparent; background: var(--ink); color: var(--bg);
  transition: transform 0.35s var(--ease), background 0.35s var(--ease),
              box-shadow 0.35s var(--ease), border-color 0.35s var(--ease), color 0.35s var(--ease);
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.btn:active { transform: translateY(0); }
.btn .arw { transition: transform 0.35s var(--ease); flex: none; }
.btn:hover .arw { transform: translateX(3px); }
.btn--green { background: var(--green); color: #fff; }
.btn--green:hover { background: var(--green-deep); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn--ghost:hover { background: var(--bg-2); border-color: var(--ink-3); }
.btn--sm { padding: 0.6rem 1.1rem; font-size: 0.87rem; }
.btn--lg { padding: 1.05rem 1.9rem; font-size: 1rem; }
.btn--block { width: 100%; }
.btn[disabled] { opacity: 0.45; pointer-events: none; }

/* Store buttons carry the real marks, because a coloured logo on a black
   pill is the shape people already know how to trust. */
.btn--store { padding-left: 1.15rem; gap: 0.7rem; }
.btn--store svg { width: 20px; height: 22px; flex: none; }
.btn--store span { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.1; }
.btn--store span i { font-style: normal; font-size: 0.63rem; font-weight: 500; opacity: 0.66; letter-spacing: 0.03em; }
.btn--store span b { font-size: 0.98rem; font-weight: 600; letter-spacing: -0.01em; }
.tlink {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-weight: 600; color: var(--green-deep); transition: gap 0.35s var(--ease);
}
.tlink:hover { gap: 0.75rem; }
.tlink svg { width: 16px; height: 16px; flex: none; }

.cta-row { display: flex; gap: 0.7rem; flex-wrap: wrap; align-items: center; }
.cta-row--center { justify-content: center; }
.under-cta { font-size: 0.85rem; color: var(--ink-3); }
.under-cta a { color: var(--ink-2); border-bottom: 1px solid var(--line-2); }
.under-cta a:hover { color: var(--green-deep); border-bottom-color: var(--green); }

.link-btn {
  background: none; border: 0; font-family: var(--sans); font-size: 0.9rem; font-weight: 500;
  color: var(--ink-3); cursor: pointer; text-decoration: underline; text-underline-offset: 4px;
  transition: color 0.3s;
}
.link-btn:hover { color: var(--ink); }

/* ── NAV ──────────────────────────────────────────────────────────────────── */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 900; height: var(--nav-h);
  display: flex; align-items: center;
  background: var(--nav-bg);
  backdrop-filter: blur(18px) saturate(1.5); -webkit-backdrop-filter: blur(18px) saturate(1.5);
  border-bottom: 1px solid transparent;
  transition: border-color 0.4s var(--ease), background 0.4s var(--ease);
}
.nav.is-stuck { border-bottom-color: var(--line); }
.nav__in {
  width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gut);
  display: flex; align-items: center; justify-content: space-between; gap: 1.4rem;
}
.nav__links { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem); }
.nav__links a {
  font-size: 0.94rem; font-weight: 500; color: var(--ink-2);
  position: relative; padding-block: 0.45rem; transition: color 0.3s var(--ease);
}
.nav__links a:hover, .nav__links a[aria-current="page"] { color: var(--ink); }
.nav__links a[aria-current="page"]::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--green); border-radius: 2px;
}
.nav__act { display: flex; align-items: center; gap: 0.5rem; }
/* The menu carries its own Play button for the mobile drawer. On a wide
   screen the one in .nav__act is the only one that should show. */
.nav__links .btn { display: none; }
.icon-btn, .burger {
  width: 42px; height: 42px; display: grid; place-items: center; border-radius: var(--r-pill);
  color: var(--ink-2); transition: background 0.3s, color 0.3s;
}
.icon-btn:hover, .burger:hover { background: var(--bg-3); color: var(--ink); }
.icon-btn svg, .burger svg { width: 19px; height: 19px; }
.burger { display: none; }

@media (max-width: 940px) {
  .nav__cta { display: none; }
  .nav__links {
    position: fixed; inset: var(--nav-h) 0 auto; flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bg); border-bottom: 1px solid var(--line);
    padding: 0.4rem var(--gut) 1.5rem; box-shadow: var(--shadow-lg);
    clip-path: inset(0 0 100% 0); transition: clip-path 0.55s var(--ease);
  }
  .nav__links.open { clip-path: inset(0 0 0 0); }
  .nav__links a { padding-block: 0.95rem; border-bottom: 1px solid var(--line); font-size: 1.05rem; }
  .nav__links a[aria-current="page"]::after { display: none; }
  .nav__links .btn { display: inline-flex; margin-top: 1rem; align-self: flex-start; }
  .burger { display: grid; }
}

/* ── THE MARK ─────────────────────────────────────────────────────────────
   Traced from components/MantlMark.js, so this is the same vector the app
   draws rather than a lookalike: two arms out of one stem, plus the full
   stop that doubles as the dot in the wordmark. */
.lockup { display: inline-flex; align-items: center; gap: 0.55rem; color: var(--ink); }
.lockup svg { display: block; flex: none; fill: currentColor; height: 26px; }
.lockup .word {
  font-family: var(--serif); font-variation-settings: 'opsz' 40;
  font-weight: 500; font-size: 1.42rem; letter-spacing: 0.055em;
  padding-left: 2px; line-height: 1;
}

/* ── HERO ─────────────────────────────────────────────────────────────────── */
.hero {
  position: relative; overflow: hidden;
  padding-top: calc(var(--nav-h) + clamp(1.6rem, 3.4vw, 3rem));
  padding-bottom: clamp(2rem, 4vw, 3.4rem);
}
/* A very slow warm wash behind the top of the page, so cream does not read
   as blank paper. A square box with a closest-side gradient: the circle is
   inscribed, so it fades out well inside its own edges and there is no
   straight seam where the box stops. */
.hero::before {
  content: ''; position: absolute; top: -46vw; right: -26vw;
  width: 108vw; height: 108vw; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(61,113,87,0.13), rgba(138,115,80,0.07) 46%, transparent 76%);
}
.hero__grid {
  display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
  gap: clamp(2rem, 4vw, 4.5rem); align-items: center; position: relative;
}
.hero h1 { font-size: clamp(2.6rem, 5.6vw, 4.6rem); line-height: 0.98; letter-spacing: -0.038em; margin: 1.1rem 0 1.3rem; max-width: 14ch; }
.hero__sub { max-width: 44ch; color: var(--ink-2); font-weight: 500; font-size: clamp(1.05rem, 1.3vw, 1.2rem); line-height: 1.6; }
.hero .cta-row { margin-top: 1.9rem; }
.hero__trust {
  display: flex; gap: 0.5rem 1.3rem; flex-wrap: wrap; margin-top: 1.5rem;
  font-size: 0.86rem; color: var(--ink-3);
}
.hero__trust span { display: inline-flex; align-items: center; gap: 0.42rem; }
.hero__trust svg { width: 15px; height: 15px; color: var(--green); flex: none; }

@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__stage { order: -1; }
  .hero h1 { max-width: 18ch; }
}

/* ── THE LURE ─────────────────────────────────────────────────────────────
   The quiz, asked in the hero. One question, no answers shown, one click.
   Deliberately a card rather than a button: it should read as a thing to
   open, not as a third CTA fighting the two store buttons above it. */
.lure {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  margin-top: 2rem; padding: 1rem 1.1rem 1rem 1.3rem; max-width: 440px;
  background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
}
.lure:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); border-color: var(--green); }
.lure__lbl {
  flex: 1 0 100%; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 0.35rem;
}
.lure__q {
  flex: 1; min-width: 0;
  font-family: var(--serif); font-variation-settings: 'opsz' 60, 'SOFT' 0, 'WONK' 0;
  font-weight: 600; font-size: clamp(1.1rem, 1.6vw, 1.28rem); letter-spacing: -0.024em;
  line-height: 1.22; color: var(--ink);
}
/* Fixed size, and the hover moves it with a transform rather than by
   changing its width. Anything that changes width in here squeezes the
   line of type next to it and re-wraps the sentence under the cursor. */
.lure__go {
  flex: none; width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--green-soft); color: var(--green-deep);
  transition: background 0.35s var(--ease), color 0.35s var(--ease), transform 0.35s var(--ease);
}
.lure__go::after {
  content: ''; width: 7px; height: 7px; margin-left: -2px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
}
.lure:hover .lure__go { background: var(--green); color: #fff; transform: translateX(3px); }
:root[data-theme="dark"] .lure:hover .lure__go { color: var(--deep-2); }
@media (max-width: 900px) { .lure { margin-inline: auto; } }

/* ── THE DEVICE ───────────────────────────────────────────────────────────
   A phone drawn in CSS rather than a photograph of one: it stays sharp on
   any screen, and the app's own dark UI does the work of looking premium
   against the cream. */
.hero__stage { position: relative; display: grid; place-items: center; width: 100%; margin-inline: auto; }
/* Green only. A bone-coloured stop in here reads as a grey smudge the
   moment the page is in dark mode. */
.hero__stage::before {
  content: ''; position: absolute; width: 128%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(122,158,138,0.22) 0%, rgba(122,158,138,0.08) 44%, transparent 68%);
}
/* The phone is the hero, not a prop next to it. It takes as much height as
   the fold will give it and stops there, so it is never cut in half by the
   bottom of the screen and never shrinks to a thumbnail on a laptop. */
.hero__stage .device {
  width: min(372px, 84vw, calc((100vh - 168px) / 2.18));
  width: min(372px, 84vw, calc((100svh - 168px) / 2.18));
}

/* An iPhone: thin uniform titanium rail, Dynamic Island rather than a
   notch, volume and action buttons on the left, power on the right. Drawn
   rather than photographed so it stays sharp at any size.

   The screen is 1170 x 2532, the real ratio, taken from the store-asset
   tool's SCREEN_ASPECT. The source screenshots are 1266 wide, so they are
   centre-cropped to that shape when they are exported rather than being
   squashed into a frame the wrong shape here — a phone that is even a few
   per cent too wide reads instantly as fake.

   Everything inside the frame is sized in cqw, so the status bar, the
   island and the buttons all scale with the phone instead of looking
   right at one width and wrong at every other. */
.device {
  position: relative; z-index: 2; width: min(272px, 72vw);
  container-type: inline-size;
  border-radius: 48px; padding: 8px;
  background:
    linear-gradient(118deg,
      #6f6d66 0%, #33322c 7%, #1a1915 22%, #0e0d0a 50%,
      #1a1915 76%, #4a4842 93%, #23221d 100%);
  box-shadow: var(--shadow-xl), inset 0 0 0 1px rgba(255,255,255,0.12);
}
/* left: action button, then the two volume keys */
.device::before {
  content: ''; position: absolute; left: -2px; top: 31cqw; width: 2.5px; height: 8cqw;
  background: #57554e; border-radius: 3px;
  box-shadow: 0 15.4cqw 0 0 #57554e, 0 31cqw 0 0 #57554e;
}
/* right: the power button, longer than the rest */
.device::after {
  content: ''; position: absolute; right: -2px; top: 47cqw; width: 2.5px; height: 20.6cqw;
  background: #57554e; border-radius: 3px;
}
.device__screen {
  position: relative; border-radius: 40px; overflow: hidden; background: #0D0C0A;
  aspect-ratio: 1170 / 2532;
}
.device__screen img { width: 100%; height: 100%; object-fit: cover; object-position: top; }

/* Status bar, sitting either side of the island. */
.device__bar {
  position: absolute; inset: 0 0 auto; height: 12cqw; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1cqw 6.5cqw 0; font-size: 3.3cqw; font-weight: 600; color: rgba(240,237,229,0.95);
  letter-spacing: 0.01em; pointer-events: none;
}
.device__bar i { display: flex; gap: 1.2cqw; align-items: flex-end; font-style: normal; }
.device__bar i s { display: block; width: 0.75cqw; border-radius: 1px; background: currentColor; text-decoration: none; }
.device__bar i s:nth-child(1) { height: 1.1cqw } .device__bar i s:nth-child(2) { height: 1.7cqw }
.device__bar i s:nth-child(3) { height: 2.3cqw } .device__bar i s:nth-child(4) { height: 2.9cqw }
/* battery */
.device__bar i::after {
  content: ''; width: 5cqw; height: 2.6cqw; margin-left: 1cqw; border-radius: 0.8cqw;
  border: 1px solid currentColor;
  background: linear-gradient(to right, currentColor 72%, transparent 72%) no-repeat center / 3.7cqw 1.4cqw;
}
.device__island {
  position: absolute; top: 2.6cqw; left: 50%; transform: translateX(-50%); z-index: 3;
  width: 30cqw; height: 8cqw; border-radius: 999px; background: #000;
}
.device__home {
  position: absolute; bottom: 2.2cqw; left: 50%; transform: translateX(-50%); z-index: 3;
  width: 34cqw; height: 1.1cqw; border-radius: 999px; background: rgba(240,237,229,0.6);
}

.chip {
  position: absolute; z-index: 4; display: flex; align-items: center; gap: 0.55rem;
  background: var(--card); border-radius: var(--r-pill); padding: 0.5rem 0.95rem 0.5rem 0.55rem;
  box-shadow: var(--shadow-lg); font-size: 0.86rem; font-weight: 600; white-space: nowrap;
}
.chip small { display: block; font-size: 0.71rem; font-weight: 500; color: var(--ink-3); }
.chip i {
  width: 28px; height: 28px; border-radius: 50%; background: var(--green-soft); color: var(--green-deep);
  display: grid; place-items: center; flex: none;
}
.chip i svg { width: 15px; height: 15px; }
/* Clear of the app's own headline and its bottom bar, so the chips read as
   floating in front of the phone rather than sitting on top of its copy. */
.chip--a { top: 30%; left: -17%; }
.chip--b { bottom: 18%; right: -15%; }
@media (max-width: 900px) { .chip--a { left: -4%; } .chip--b { right: -4%; } }
@media (max-width: 420px) {
  .chip { font-size: 0.78rem; padding: 0.4rem 0.7rem 0.4rem 0.45rem; }
  .chip i { width: 24px; height: 24px; }
}

/* ── REASSURANCE STRIP ────────────────────────────────────────────────────── */
.assure { display: grid; grid-template-columns: repeat(3, 1fr); }
.assure > div {
  display: flex; flex-direction: column; align-items: flex-start;
  padding-inline: clamp(1rem, 2.2vw, 2rem); border-left: 1px solid var(--line);
}
.assure > div:first-child { border-left: 0; padding-left: 0; }
.assure > div:last-child { padding-right: 0; }
.assure i {
  width: 38px; height: 38px; border-radius: 50%; background: var(--green-soft); color: var(--green-deep);
  display: grid; place-items: center; flex: none; margin-bottom: 0.85rem;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
/* A lift and a soft ring. Deliberately not a colour flip: these are not
   buttons and shouldn't pretend to be. */
.assure > div:hover i { transform: translateY(-3px); box-shadow: 0 0 0 6px rgba(122,158,138,0.26); }
.assure i svg { width: 19px; height: 19px; }
.assure b { display: block; font-size: 0.99rem; font-weight: 600; margin-bottom: 0.2rem; }
.assure p { font-size: 0.88rem; color: var(--ink-2); line-height: 1.55; }
@media (max-width: 760px) {
  .assure { grid-template-columns: 1fr; row-gap: 1.4rem; }
}
@media (max-width: 540px) {
  .assure { grid-template-columns: 1fr; row-gap: 1.4rem; }
  .assure > div { border-left: 0; padding-inline: 0; }
  .assure i { width: 33px; height: 33px; margin-bottom: 0.55rem; }
}

/* ── SYMPTOMS ─────────────────────────────────────────────────────────────
   The hook. Four states a man recognises in himself before he has decided
   whether he believes anything else on the page, with the answer sitting
   directly underneath them rather than a scroll away. */
.symptoms { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: clamp(0.7rem, 1.4vw, 1rem); }
.symptom {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  padding: clamp(1.3rem, 2.2vw, 1.8rem); display: flex; flex-direction: column; gap: 0.5rem;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s var(--ease);
}
.symptom::before {
  content: ''; width: 26px; height: 2px; background: var(--green); border-radius: 2px; margin-bottom: 0.5rem;
}
.symptom:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--line-2); }
.symptom b {
  font-family: var(--serif); font-variation-settings: 'opsz' 60, 'SOFT' 0, 'WONK' 0;
  font-weight: 600; font-size: 1.3rem; letter-spacing: -0.022em; line-height: 1.15;
}
.symptom span { font-size: 0.95rem; color: var(--ink-2); line-height: 1.55; }

.answer {
  margin-top: clamp(2.2rem, 4.5vw, 3.6rem); text-align: center;
  padding-top: clamp(2.2rem, 4.5vw, 3.4rem); border-top: 1px solid var(--line);
}
.answer .eyebrow { margin-bottom: 1.2rem; }
.answer__line {
  font-family: var(--serif); font-variation-settings: 'opsz' 144, 'SOFT' 0, 'WONK' 0;
  font-weight: 600; font-size: clamp(1.75rem, 3.8vw, 3rem); line-height: 1.06;
  letter-spacing: -0.032em; color: var(--ink); max-width: 24ch; margin-inline: auto;
}
.answer__line em { font-style: normal; color: var(--green); }
.answer__sub { margin: 1.2rem auto 2.2rem; max-width: 46ch; color: var(--ink-2); }
.answer .counts { max-width: 720px; margin-inline: auto; }
.answer .counts > div { background: var(--bg-2); }
.answer__depth { margin: 1.1rem auto 2rem; font-size: 0.92rem; color: var(--ink-3); }

/* ── STEPS ────────────────────────────────────────────────────────────────── */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: clamp(0.8rem, 1.5vw, 1.15rem); }
.step {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  padding: clamp(1.3rem, 2vw, 1.75rem); display: flex; flex-direction: column; gap: 0.55rem;
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease);
}
.step:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.step__n {
  width: 34px; height: 34px; border-radius: 50%; background: var(--green-soft); color: var(--green-deep);
  display: grid; place-items: center; font-weight: 700; font-size: 0.86rem; margin-bottom: 0.5rem;
}
.step h3 { font-size: 1.1rem; font-weight: 600; }
.step p { font-size: 0.93rem; color: var(--ink-2); line-height: 1.6; }
.step small {
  margin-top: auto; padding-top: 0.85rem; font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3);
}

/* ── PATTERN CARDS ────────────────────────────────────────────────────────── */
.patterns { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 215px), 1fr)); gap: clamp(0.7rem, 1.4vw, 1rem); }
.pattern {
  position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  padding: 1.4rem 1.4rem 1.25rem; overflow: hidden; display: flex; flex-direction: column; gap: 0.45rem;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.pattern::before { content: ''; position: absolute; inset: 0 0 auto; height: 3px; background: var(--c); }
.pattern:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.pattern__tag {
  font-size: 0.69rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--c); margin-bottom: 0.15rem;
}
.pattern b { font-family: var(--serif); font-variation-settings: 'opsz' 40; font-weight: 500; font-size: 1.22rem; letter-spacing: -0.012em; }
.pattern span { font-size: 0.9rem; color: var(--ink-2); line-height: 1.55; }

/* ── THE MIRROR TEASER ────────────────────────────────────────────────────
   One real question from the twelve, answerable here. A man who has
   already answered one is far more likely to answer the rest. */
.teaser {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  padding: clamp(1.6rem, 3vw, 2.6rem); box-shadow: var(--shadow); text-align: center;
  max-width: 620px; margin-inline: auto;
}
.teaser__lbl { font-size: 0.71rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); }
.teaser__q {
  font-family: var(--serif); font-variation-settings: 'opsz' 60; font-weight: 400;
  font-size: clamp(1.2rem, 2.2vw, 1.6rem); line-height: 1.35; letter-spacing: -0.018em;
  margin: 1rem 0 1.6rem; min-height: 2.7em; display: flex; align-items: center; justify-content: center;
}
.teaser__q.in { animation: fade-up 0.45s var(--ease) both; }
.teaser__btns { display: flex; gap: 0.6rem; justify-content: center; flex-wrap: wrap; }
.teaser__btns .btn { min-width: 150px; }
.teaser__after { display: none; }
.teaser.done .teaser__btns { display: none; }
.teaser.done .teaser__after { display: block; animation: fade-up 0.5s var(--ease) both; }
.teaser__after p { color: var(--ink-2); margin-bottom: 1.2rem; }
@keyframes fade-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (max-width: 460px) { .teaser__btns { flex-direction: column; } .teaser__btns .btn { width: 100%; } }

/* ── DEEP BANDS ───────────────────────────────────────────────────────────── */
.deep { background: var(--deep); color: #EAE6DC; }
.deep h2, .deep h3 { color: #F4F1E9; }
.deep p, .deep .lede { color: rgba(234,230,220,0.68); }
.deep .eyebrow { background: rgba(122,158,138,0.16); color: #9DC0AC; }
/* Order matters: the plain rule first, so the ghost and green variants
   below can still take the background back off it. */
.deep .btn { background: #F4F1E9; color: var(--deep); }
.deep .btn--green { background: var(--green); color: #fff; }
.deep .btn--green:hover { background: var(--green-deep); }
.deep .btn--ghost { background: transparent; color: #F4F1E9; border-color: rgba(234,230,220,0.28); }
.deep .btn--ghost:hover { background: rgba(234,230,220,0.09); border-color: rgba(234,230,220,0.5); }
.deep .under-cta { color: rgba(234,230,220,0.44); }
.deep .tlink { color: #9DC0AC; }

/* ── TRY A TOOL ───────────────────────────────────────────────────────────── */
.try { text-align: center; }
.try .orb-holder { margin: clamp(1.4rem, 3vw, 2.4rem) 0 clamp(1.2rem, 2.5vw, 2rem); }
.orb-holder { display: flex; justify-content: center; align-items: center; }
.orb-holder canvas {
  display: block; max-width: 100%; height: auto;
  touch-action: none; cursor: pointer; user-select: none;
}
.voice-note {
  display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 1.1rem;
  font-size: 0.85rem; color: rgba(234,230,220,0.5);
}
.voice-note svg { width: 15px; height: 15px; }

/* ── COUNTERS ─────────────────────────────────────────────────────────────── */
.counts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border-radius: var(--r); overflow: hidden; }
.counts > div { background: var(--bg); padding: clamp(1.1rem, 2.2vw, 1.7rem); text-align: center; }
.section--soft .counts > div { background: var(--bg-2); }
.counts b { display: block; font-family: var(--serif); font-variation-settings: 'opsz' 96, 'SOFT' 0, 'WONK' 0; font-weight: 600; font-size: clamp(2rem, 4vw, 2.9rem); line-height: 1; letter-spacing: -0.035em; }
.counts span { display: block; margin-top: 0.5rem; font-size: 0.73rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink-3); }
/* The screenshots are dark, so this section is too: it is the one place on
   the page where the product itself is the thing being looked at. */
.deep .counts { background: rgba(234,230,220,0.13); }
.deep .counts > div { background: var(--deep); }
.deep .counts span { color: rgba(234,230,220,0.5); }
@media (max-width: 620px) { .counts { grid-template-columns: 1fr 1fr; } }

/* ── SHOWCASE ─────────────────────────────────────────────────────────────
   Three screens side by side. Real screenshots at real proportions, so the
   thing being bought is visible before anybody installs it. */
.showcase { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2.4vw, 2.2rem); align-items: start; }
.shot { text-align: center; }
.shot .device {
  width: 100%; max-width: 268px; margin-inline: auto;
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
/* Lift and a thin lit edge. Enough to feel alive under the cursor, not so
   much that three of them in a row start bouncing. */
.shot:hover .device {
  transform: translateY(-8px);
  box-shadow: var(--shadow-xl),
              inset 0 0 0 1px rgba(255,255,255,0.22),
              0 0 0 1px rgba(122,158,138,0.45),
              0 0 34px -6px rgba(122,158,138,0.30);
}
.shot b { display: block; margin-top: 1.4rem; font-size: 1.04rem; font-weight: 600; transition: color 0.4s var(--ease); }
.shot:hover b { color: #9DC0AC; }
.shot p { margin-top: 0.35rem; font-size: 0.9rem; color: var(--ink-2); max-width: 30ch; margin-inline: auto; }
.deep .shot p { color: rgba(234,230,220,0.6); }
@media (max-width: 860px) {
  .showcase { grid-template-columns: 1fr; gap: clamp(2.2rem, 6vw, 3rem); max-width: 340px; margin-inline: auto; }
}

/* ── FAQ ──────────────────────────────────────────────────────────────────
   Heading on the left, answers on the right. A single left-aligned column
   of questions leaves half the page empty, which is the exact thing that
   makes a site look thin. */
.faq-grid { display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); gap: clamp(1.6rem, 4vw, 4rem); align-items: start; }
.faq-grid .sec-head { margin-bottom: 0; position: sticky; top: calc(var(--nav-h) + 2rem); }
@media (max-width: 860px) {
  .faq-grid { grid-template-columns: 1fr; }
  .faq-grid .sec-head { position: static; margin-bottom: 1.6rem; }
}
.faq { max-width: 780px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-child { border-top: 1px solid var(--line); }
.faq summary {
  padding: 1.25rem 2.4rem 1.25rem 0; font-size: clamp(1rem, 1.4vw, 1.1rem); font-weight: 600;
  cursor: pointer; list-style: none; position: relative; transition: color 0.3s;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--green-deep); }
.faq summary::after {
  content: ''; position: absolute; right: 6px; top: 50%; width: 11px; height: 11px;
  border-right: 1.8px solid var(--ink-3); border-bottom: 1.8px solid var(--ink-3);
  transform: translateY(-70%) rotate(45deg); transition: transform 0.35s var(--ease);
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq__a { padding: 0 3rem 1.4rem 0; color: var(--ink-2); animation: fade-up 0.4s var(--ease) both; }
.faq__a p + p { margin-top: 0.8rem; }

/* ── EMAIL ────────────────────────────────────────────────────────────────── */
.mail {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  padding: clamp(1.6rem, 3vw, 2.4rem); box-shadow: var(--shadow); max-width: 560px;
}
.mail--center { margin-inline: auto; text-align: center; }
.deep .mail { background: rgba(255,255,255,0.05); border-color: rgba(234,230,220,0.14); box-shadow: none; }
.mail h3 { font-family: var(--serif); font-variation-settings: 'opsz' 40; font-weight: 500; font-size: 1.4rem; letter-spacing: -0.02em; }
.mail > p { color: var(--ink-2); font-size: 0.95rem; margin-top: 0.4rem; margin-bottom: 1.3rem; }
.deep .mail > p { color: rgba(234,230,220,0.62); }
.mail__form { display: flex; gap: 0.5rem; }
.mail__form input {
  flex: 1; min-width: 0; padding: 0.85rem 1.1rem; background: var(--bg);
  border: 1px solid var(--line-2); border-radius: var(--r-pill); font-size: 0.95rem;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.deep .mail__form input { background: rgba(0,0,0,0.28); border-color: rgba(234,230,220,0.2); color: #EAE6DC; }
.mail__form input::placeholder { color: var(--ink-3); }
.deep .mail__form input::placeholder { color: rgba(234,230,220,0.35); }
.mail__form input:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }
.mail__note { font-size: 0.79rem; color: var(--ink-3); margin-top: 0.8rem; }
.deep .mail__note { color: rgba(234,230,220,0.4); }
.mail__done { display: none; font-size: 1rem; font-weight: 600; color: var(--green-deep); }
.deep .mail__done { color: #9DC0AC; }
.mail.sent .mail__form, .mail.sent .mail__note { display: none; }
.mail.sent .mail__done { display: block; animation: fade-up 0.4s var(--ease) both; }
@media (max-width: 520px) { .mail__form { flex-direction: column; } .mail__form .btn { width: 100%; } }

/* ── FINAL BAND ───────────────────────────────────────────────────────────── */
.band { padding-block: clamp(3rem, 6vw, 5.5rem); }
.band__in {
  background: var(--deep); color: #EAE6DC; border-radius: clamp(var(--r), 2.2vw, 30px);
  padding: clamp(2.2rem, 5.5vw, 4.6rem); text-align: center; position: relative; overflow: hidden;
}
.band__in::before {
  content: ''; position: absolute; inset: auto -20% -60% -20%; height: 120%;
  background: radial-gradient(ellipse at 50% 100%, rgba(122,158,138,0.20), transparent 62%);
  pointer-events: none;
}
.band__in > * { position: relative; }
.band h2 { font-size: clamp(1.9rem, 4vw, 3.2rem); line-height: 1.06; margin: 1.1rem auto 0.9rem; max-width: 17ch; color: #F4F1E9; }
.band p { color: rgba(234,230,220,0.68); max-width: 46ch; margin: 0 auto 1.8rem; }
/* The iPhone capture lives in here rather than in a section of its own: it
   only matters to half the visitors, and it belongs next to the buttons the
   other half are pressing. */
.band__mail { margin-top: clamp(2rem, 4vw, 3.2rem); padding-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid rgba(234,230,220,0.13); }
.band__mail .mail { box-shadow: none; }
.band__mail .mail h3 { color: #F4F1E9; }
.band__mail .mail > p { margin-bottom: 1.2rem; }

/* ── FOOTER ───────────────────────────────────────────────────────────────── */
.foot { background: var(--bg-2); border-top: 1px solid var(--line); padding-block: clamp(2.8rem, 5vw, 4.4rem) 1.8rem; }
.foot__grid { display: grid; grid-template-columns: minmax(0,1.6fr) repeat(3, minmax(0,1fr)); gap: clamp(1.6rem, 3vw, 3rem); padding-bottom: 2.4rem; }
.foot__blurb { color: var(--ink-2); max-width: 34ch; font-size: 0.92rem; margin-top: 1rem; }
.foot h5 { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 1rem; }
.foot ul { list-style: none; display: flex; flex-direction: column; gap: 0.55rem; }
.foot ul a { font-size: 0.92rem; color: var(--ink-2); transition: color 0.3s; }
.foot ul a:hover { color: var(--green-deep); }
.foot__base {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding-top: 1.5rem; border-top: 1px solid var(--line); font-size: 0.83rem; color: var(--ink-3);
}
.foot__note { margin-top: 1.6rem; padding: 1rem 1.2rem; border-radius: var(--r); background: var(--bg-3); font-size: 0.82rem; line-height: 1.65; color: var(--ink-2); }
.foot__note b { color: var(--ink); }
@media (max-width: 780px) { .foot__grid { grid-template-columns: 1fr 1fr; } }

/* ── REVEAL ───────────────────────────────────────────────────────────────── */
.rv { opacity: 0; transform: translateY(18px); transition: opacity 0.85s var(--ease), transform 0.85s var(--ease); }
.rv.in { opacity: 1; transform: none; }
.rv-d1 { transition-delay: 0.07s } .rv-d2 { transition-delay: 0.14s }
.rv-d3 { transition-delay: 0.21s } .rv-d4 { transition-delay: 0.28s }
/* The clip box is inset by padding so left-hand serifs and italic overhangs
   are not shaved off. The negative margin puts the text back where it was. */
.mask { display: block; overflow: hidden; padding: 0.06em 0.16em; margin: -0.06em -0.16em; }
.mask > * { display: block; transform: translateY(115%); transition: transform 1s var(--ease); }
.mask.in > * { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .rv, .mask > * { opacity: 1 !important; transform: none !important; transition: none !important; }
  /* Everything that arrives with a fade: the content still arrives, it just
     stops sliding. */
  .teaser__q.in, .teaser__after, .faq__a, .tool-label.in, .tool-overlay.ended .tool-end,
  .mail.sent .mail__done, .screen.on { animation: none !important; }
  .score-fill, .prog-fill, .tool-bar-fill { transition: none !important; }
}

/* ── PAGE HEADER (inner pages) ────────────────────────────────────────────── */
.phead { padding-top: calc(var(--nav-h) + clamp(2.2rem, 5vw, 4rem)); padding-bottom: clamp(1.4rem, 3vw, 2.4rem); }
.phead h1 { font-size: clamp(2.1rem, 4.4vw, 3.5rem); line-height: 1.04; margin-top: 0.9rem; }
.phead p { margin-top: 1rem; max-width: 56ch; color: var(--ink-2); font-size: 1.05rem; }
.crumb { font-size: 0.84rem; color: var(--ink-3); }
.crumb a:hover { color: var(--green-deep); }

/* ── LEGAL PROSE ──────────────────────────────────────────────────────────── */
/* No max-width of its own: .wrap--narrow already sets the measure, and a
   second one here centres the prose inside the header's column and knocks
   the two left edges out of line. */
.prose { padding-bottom: clamp(3rem, 6vw, 5rem); }
.prose h2 { font-family: var(--serif); font-variation-settings: 'opsz' 40; font-weight: 500; font-size: 1.5rem; letter-spacing: -0.02em; margin: 2.6rem 0 0.9rem; }
.prose h3 { font-size: 1.06rem; font-weight: 600; margin: 1.8rem 0 0.5rem; }
.prose p, .prose li { color: var(--ink-2); }
.prose p + p { margin-top: 0.9rem; }
.prose ul, .prose ol { margin: 0.9rem 0 0.9rem 1.2rem; display: flex; flex-direction: column; gap: 0.45rem; }
.prose a { color: var(--green-deep); border-bottom: 1px solid var(--line-2); }
.prose a:hover { border-bottom-color: var(--green); }
.prose strong { color: var(--ink); }
.prose .updated { font-size: 0.85rem; color: var(--ink-3); }

/* ═══════════════════════════════════════════════════════════════════════════
   CONSENT BAR
   One sentence, two buttons, gone. Slides up from the bottom so it never
   covers what he came to read.
   ═══════════════════════════════════════════════════════════════════════════ */
.consent {
  position: fixed; left: 14px; right: 14px; bottom: 14px; z-index: 500;
  display: flex; align-items: center; justify-content: space-between; gap: 1.1rem;
  max-width: 700px; margin: 0 auto; padding: 0.9rem 1.1rem;
  background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r);
  box-shadow: var(--shadow-lg);
  transform: translateY(140%); opacity: 0;
  transition: transform 0.45s var(--ease), opacity 0.45s ease;
}
.consent.up { transform: translateY(0); opacity: 1; }
.consent-text { font-size: 0.85rem; line-height: 1.55; color: var(--ink-2); }
.consent-text a { color: var(--ink-3); text-decoration: underline; text-underline-offset: 3px; }
.consent-btns { display: flex; gap: 0.5rem; flex: none; }
.consent-no, .consent-yes {
  font-family: var(--sans); font-size: 0.85rem; font-weight: 600; padding: 0.55rem 1rem;
  border-radius: var(--r-pill); cursor: pointer; white-space: nowrap; border: 1px solid transparent;
  transition: all 0.25s;
}
.consent-no { color: var(--ink-3); }
.consent-no:hover { color: var(--ink); background: var(--bg-2); }
.consent-yes { background: var(--ink); color: var(--bg); }
.consent-yes:hover { background: var(--green-deep); }
@media (max-width: 560px) {
  .consent { flex-direction: column; align-items: stretch; gap: 0.8rem; text-align: center; }
  .consent-btns { justify-content: center; }
  .consent-no, .consent-yes { flex: 1; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   TOOL OVERLAY
   Full screen and deliberately dark: this is the app, not the website. The
   whole point of the tool is that there is nothing to read.
   ═══════════════════════════════════════════════════════════════════════════ */
/* Above the nav (900) and the consent bar (500): while a tool is running
   there is meant to be nothing on the screen but the orb. */
.tool-overlay {
  position: fixed; inset: 0; z-index: 1000; background: #0A0908;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity 0.5s ease;
}
.tool-overlay.on { opacity: 1; pointer-events: auto; }
.tool-bar { position: absolute; top: 0; left: 0; right: 0; height: 2px; background: rgba(255,255,255,0.07); }
.tool-bar-fill { display: block; height: 100%; width: 0; background: #7A9E8A; transition: width 0.6s linear; }
.tool-close {
  position: absolute; top: 16px; right: 20px; z-index: 2;
  background: none; border: none; color: rgba(234,230,220,0.4);
  font-size: 30px; line-height: 1; cursor: pointer; padding: 6px 10px; transition: color 0.3s;
}
.tool-close:hover { color: #EAE6DC; }
.tool-sound {
  position: absolute; top: 22px; left: 22px; z-index: 2;
  background: none; border: none; cursor: pointer; padding: 6px 8px;
  font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: 0.2em;
  text-transform: uppercase; color: #7A9E8A; transition: color 0.3s;
}
.tool-sound.off { color: rgba(234,230,220,0.34); }
.tool-sound:hover { color: #EAE6DC; }
.tool-inner { text-align: center; padding: 0 24px; }
.tool-name { font-size: 11px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(234,230,220,0.38); margin-bottom: 20px; }
.tool-orb { display: flex; justify-content: center; }
.tool-orb canvas { display: block; max-width: 100%; height: auto; }
.tool-label {
  font-family: var(--serif); font-variation-settings: 'opsz' 96; font-weight: 400;
  font-size: clamp(30px, 6vw, 46px); letter-spacing: -0.025em;
  color: #F4F1E9; margin-top: 14px; min-height: 1.2em;
}
.tool-label.in { animation: fade-up 0.5s ease both; }
.tool-sub { font-size: 14px; color: rgba(234,230,220,0.42); margin-top: 4px; }
.tool-end { display: none; margin-top: 30px; }
.tool-overlay.ended .tool-end { display: block; animation: fade-up 0.6s ease both; }
.tool-overlay.ended .tool-label, .tool-overlay.ended .tool-sub { display: none; }
.tool-done { max-width: 420px; margin: 0 auto 22px; font-size: 17px; line-height: 1.7; color: rgba(234,230,220,0.72); }
.tool-end .btn { background: #F4F1E9; color: #0A0908; }
.tool-again { display: block; margin: 18px auto 0; color: rgba(234,230,220,0.4); }
.tool-again:hover { color: #EAE6DC; }