/* ============================================================
   Hefty : "Soft Sheet"
   Monochrome. Light surfaces, carved edges, hairline drawing.
   Every raised thing shares one shadow pair: cool dark below,
   pure white above.
   ============================================================ */

/* every themed colour is a real animatable custom property, so a
   theme flip morphs each element's own shadows and fills, never
   crossfading two finished layouts. */
@property --paper { syntax: '<color>'; inherits: true; initial-value: #e8e8ea; }
@property --paper-hi { syntax: '<color>'; inherits: true; initial-value: #f1f1f3; }
@property --paper-lo { syntax: '<color>'; inherits: true; initial-value: #dedee1; }
@property --ink { syntax: '<color>'; inherits: true; initial-value: #141416; }
@property --ink-72 { syntax: '<color>'; inherits: true; initial-value: rgba(20,20,22,.72); }
@property --ink-56 { syntax: '<color>'; inherits: true; initial-value: rgba(20,20,22,.56); }
@property --ink-38 { syntax: '<color>'; inherits: true; initial-value: rgba(20,20,22,.38); }
@property --rule { syntax: '<color>'; inherits: true; initial-value: rgba(20,20,22,.13); }
@property --rule-soft { syntax: '<color>'; inherits: true; initial-value: rgba(20,20,22,.07); }
@property --rule-hard { syntax: '<color>'; inherits: true; initial-value: rgba(20,20,22,.28); }
@property --sh { syntax: '<color>'; inherits: true; initial-value: rgba(13,39,80,.16); }
@property --sh-2 { syntax: '<color>'; inherits: true; initial-value: rgba(13,39,80,.10); }
@property --hi { syntax: '<color>'; inherits: true; initial-value: #ffffff; }
@property --carve-face { syntax: '<color>'; inherits: true; initial-value: #dcdce1; }
@property --inv-fg { syntax: '<color>'; inherits: true; initial-value: #f1f1f3; }
@property --inv-fg-72 { syntax: '<color>'; inherits: true; initial-value: rgba(241,241,243,.74); }
@property --inv-fg-56 { syntax: '<color>'; inherits: true; initial-value: rgba(241,241,243,.55); }
@property --inv-fg-38 { syntax: '<color>'; inherits: true; initial-value: rgba(241,241,243,.4); }
@property --inv-rule { syntax: '<color>'; inherits: true; initial-value: rgba(241,241,243,.14); }
@property --wash-hi { syntax: '<color>'; inherits: true; initial-value: rgba(255,255,255,.7); }
@property --wash-lo { syntax: '<color>'; inherits: true; initial-value: rgba(13,39,80,.045); }
@property --nav-bg { syntax: '<color>'; inherits: true; initial-value: rgba(232,232,234,.84); }
@property --veil-1 { syntax: '<color>'; inherits: true; initial-value: rgba(232,232,234,.95); }
@property --veil-2 { syntax: '<color>'; inherits: true; initial-value: rgba(232,232,234,.6); }
@property --cv-rim1 { syntax: '<color>'; inherits: true; initial-value: #c3c3cb; }
@property --cv-rim2 { syntax: '<color>'; inherits: true; initial-value: #bdbdc6; }
@property --cv-glow { syntax: '<color>'; inherits: true; initial-value: rgba(13,39,80,.46); }
@property --cv-lit1 { syntax: '<color>'; inherits: true; initial-value: #ffffff; }
@property --cv-lit2 { syntax: '<color>'; inherits: true; initial-value: rgba(255,255,255,.95); }
@property --cv-lit3 { syntax: '<color>'; inherits: true; initial-value: rgba(255,255,255,.55); }
@property --bg1 { syntax: '<color>'; inherits: true; initial-value: #dcdce0; }
@property --bg2 { syntax: '<color>'; inherits: true; initial-value: #d6d6da; }
@property --bg3 { syntax: '<color>'; inherits: true; initial-value: #d0d0d5; }
@property --bg4 { syntax: '<color>'; inherits: true; initial-value: #cbcbd0; }
@property --bg5 { syntax: '<color>'; inherits: true; initial-value: #c6c6cb; }
@property --bg-drop { syntax: '<color>'; inherits: true; initial-value: rgba(13,39,80,.18); }
@property --bg-glow { syntax: '<color>'; inherits: true; initial-value: rgba(255,255,255,.9); }
@property --bp-bg { syntax: '<color>'; inherits: true; initial-value: #4f74a8; }
@property --bp-line { syntax: '<color>'; inherits: true; initial-value: #ffffff; }
@property --ball { syntax: '<color>'; inherits: true; initial-value: #a7c4e6; }
@property --acc-green { syntax: '<color>'; inherits: true; initial-value: #7cc0a3; }

/* ---------- 1. Tokens --------------------------------------- */

:root {
  /* surfaces */
  --paper:      #e8e8ea;   /* the sheet everything is carved from */
  --paper-hi:   #f1f1f3;
  --paper-lo:   #dedee1;

  /* ink : never pure black */
  --ink:        #141416;
  --ink-72:     rgba(20, 20, 22, .72);
  --ink-56:     rgba(20, 20, 22, .56);
  --ink-38:     rgba(20, 20, 22, .38);

  /* hairlines */
  --rule:       rgba(20, 20, 22, .13);
  --rule-soft:  rgba(20, 20, 22, .07);
  --rule-hard:  rgba(20, 20, 22, .28);

  /* secondary : baby blue, three tints */
  --blue:       #a7c4e6;   /* default */
  --blue-faint: #d9e6f5;   /* faded  */
  --blue-deep:  #4f77ad;   /* darker */

  /* the shadow pair : the two outer blue tints do the shading */
  --sh:   rgba(79, 119, 173, .22);
  --sh-2: rgba(79, 119, 173, .13);
  --hi:   #eef4fb;

  /* blueprint : blue field, white line drawing (same in both themes) */
  --bp-bg:   #4f74a8;
  --bp-line: #ffffff;

  /* theme-reactive accents */
  --ball:      #a7c4e6;   /* the glow behind the headline */
  --acc-green: #7cc0a3;   /* pricing, plan 2 */

  --up:    6px 6px 16px var(--sh), -6px -6px 14px var(--hi);
  --up-sm: 3px 3px 8px var(--sh), -3px -3px 7px var(--hi);
  --up-lg: 14px 14px 34px var(--sh), -12px -12px 28px var(--hi);
  --in:    inset 4px 4px 10px var(--sh), inset -4px -4px 9px var(--hi);
  --in-sm: inset 2px 2px 6px var(--sh), inset -2px -2px 5px var(--hi);

  --sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --display: 'Bricolage', 'Geist', sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --shell: 1320px;
  --gut: clamp(20px, 4.2vw, 60px);

  --ease: cubic-bezier(.16, 1, .3, 1);

  /* the carved letterform : baby blue, the secondary */
  --carve-face: #a7c4e6;
  /* raised, extruded : light rim up-left, saturated blue body + drop
     down-right. */
  --carve-shadow:
    -1px -1px 0 var(--cv-lit1),
    -2px -2px 0 var(--cv-lit2),
    -3px -3px 5px var(--cv-lit3),
    1px 1px 0 var(--cv-rim1),
    2px 2px 0 var(--cv-rim1),
    3px 3px 0 var(--cv-rim2),
    4px 4px 0 var(--cv-rim2),
    6px 7px 10px var(--cv-glow),
    11px 13px 22px var(--cv-glow);

  /* the field of dots in the hero */
  --dot: 20, 20, 22;

  /* text and lines that sit on an inverted (ink) surface */
  --inv-fg:    #f1f1f3;
  --inv-fg-72: rgba(241, 241, 243, .74);
  --inv-fg-56: rgba(241, 241, 243, .55);
  --inv-fg-38: rgba(241, 241, 243, .4);
  --inv-rule:  rgba(241, 241, 243, .14);

  --wash-hi: rgba(255, 255, 255, .7);
  --wash-lo: rgba(13, 39, 80, .045);
  --nav-bg:  rgba(232, 232, 234, .84);
  --veil-1:  rgba(232, 232, 234, .95);
  --veil-2:  rgba(232, 232, 234, .6);

  --brag-shadow:
    1px 1px 0 var(--bg1), 2px 2px 0 var(--bg2), 3px 3px 0 var(--bg3),
    4px 4px 0 var(--bg4), 5px 5px 0 var(--bg5),
    8px 9px 12px var(--bg-drop),
    -1px -1px 1px var(--bg-glow);

    --cv-rim1: #6f9ad9;
  --cv-rim2: #4f80cf;
  --cv-glow: rgba(35,85,180,.5);
  --cv-lit1: #eff5fe;
  --cv-lit2: rgba(224,237,253,.85);
  --cv-lit3: rgba(224,237,253,.5);
  --bg1: #dcdce0;
  --bg2: #d6d6da;
  --bg3: #d0d0d5;
  --bg4: #cbcbd0;
  --bg5: #c6c6cb;
  --bg-drop: rgba(13,39,80,.18);
  --bg-glow: rgba(255,255,255,.9);

  color-scheme: light;
}

/* ---------- 1b. Dark : the same sheet, lit from the other side --- */

:root[data-theme="dark"] {
  /* the same sheet in a warm dark room. no pure white anywhere:
     every light is the same creamy off white. */
  --paper:      #1c1b19;
  --paper-hi:   #24231f;
  --paper-lo:   #131211;

  --ink:        #eee9dd;
  --ink-72:     rgba(238, 233, 221, .72);
  --ink-56:     rgba(238, 233, 221, .54);
  --ink-38:     rgba(238, 233, 221, .34);

  --rule:       rgba(238, 233, 221, .14);
  --rule-soft:  rgba(238, 233, 221, .07);
  --rule-hard:  rgba(238, 233, 221, .3);

  --sh:   rgba(0, 0, 0, .6);
  --sh-2: rgba(0, 0, 0, .4);
  --hi:   rgba(245, 240, 228, .06);

  --carve-face: #a7c4e6;

  /* darker so they don't glare against the dark sheet */
  --ball:      #2e4a72;
  --acc-green: #3f7a63;

  --dot: 238, 233, 221;

  --inv-fg:    #1c1b19;
  --inv-fg-72: rgba(24, 23, 21, .76);
  --inv-fg-56: rgba(24, 23, 21, .58);
  --inv-fg-38: rgba(24, 23, 21, .42);
  --inv-rule:  rgba(24, 23, 21, .16);

  --wash-hi: rgba(245, 240, 228, .05);
  --wash-lo: rgba(0, 0, 0, .34);
  --nav-bg:  rgba(28, 27, 25, .84);
  --veil-1:  rgba(28, 27, 25, .95);
  --veil-2:  rgba(28, 27, 25, .6);

  --brag-shadow:
    1px 1px 0 var(--bg1), 2px 2px 0 var(--bg2), 3px 3px 0 var(--bg3),
    4px 4px 0 var(--bg4), 5px 5px 0 var(--bg5),
    8px 9px 12px var(--bg-drop),
    -1px -1px 1px var(--bg-glow);

    --cv-rim1: #2b4f86;
  --cv-rim2: #1c3966;
  --cv-glow: rgba(6,20,52,.8);
  --cv-lit1: rgba(190,214,250,.55);
  --cv-lit2: rgba(150,185,235,.3);
  --cv-lit3: rgba(150,185,235,.16);
  --bg1: #141312;
  --bg2: #111110;
  --bg3: #0e0d0c;
  --bg4: #0b0a09;
  --bg5: #090808;
  --bg-drop: rgba(0,0,0,.55);
  --bg-glow: rgba(245,240,228,.1);

  color-scheme: dark;
}

/* ---------- 1c. the flip ------------------------------------
   Only the colour tokens animate, and only while flipping. Every
   shadow, fill and background is built from these, so each element
   morphs its own form in place and they all land together. No
   composite property is crossfaded, so nothing goes muddy. */

:root.theming {
  transition:
    --paper .7s linear,
    --paper-hi .7s linear,
    --paper-lo .7s linear,
    --ink .7s linear,
    --ink-72 .7s linear,
    --ink-56 .7s linear,
    --ink-38 .7s linear,
    --rule .7s linear,
    --rule-soft .7s linear,
    --rule-hard .7s linear,
    --sh .7s linear,
    --sh-2 .7s linear,
    --hi .7s linear,
    --carve-face .7s linear,
    --inv-fg .7s linear,
    --inv-fg-72 .7s linear,
    --inv-fg-56 .7s linear,
    --inv-fg-38 .7s linear,
    --inv-rule .7s linear,
    --wash-hi .7s linear,
    --wash-lo .7s linear,
    --nav-bg .7s linear,
    --veil-1 .7s linear,
    --veil-2 .7s linear,
    --cv-rim1 .7s linear,
    --cv-rim2 .7s linear,
    --cv-glow .7s linear,
    --cv-lit1 .7s linear,
    --cv-lit2 .7s linear,
    --cv-lit3 .7s linear,
    --bg1 .7s linear,
    --bg2 .7s linear,
    --bg3 .7s linear,
    --bg4 .7s linear,
    --bg5 .7s linear,
    --bg-drop .7s linear,
    --bg-glow .7s linear,
    --bp-bg .7s linear,
    --bp-line .7s linear,
    --ball .7s linear,
    --acc-green .7s linear;
}

/* ---------- 2. Reset ---------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 380;
  line-height: 1.55;
  letter-spacing: -.008em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  background-image:
    radial-gradient(110% 80% at 50% -10%, var(--wash-hi), transparent 62%),
    radial-gradient(80% 60% at 100% 100%, var(--wash-lo), transparent 66%);
  background-repeat: no-repeat;
  background-size: 100% 100vh;
}

img, svg, canvas, video { display: block; max-width: 100%; }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}
::selection { background: var(--ink); color: var(--paper-hi); }
:focus-visible { outline: 1.5px solid var(--ink); outline-offset: 4px; border-radius: 2px; }

/* ---------- 3. Primitives ----------------------------------- */

.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gut); }

.grid12 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(14px, 1.6vw, 26px);
}

.tag {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 450;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-56);
  font-feature-settings: "tnum" 1;
}
.tag--ink { color: var(--ink); }

.fig {
  display: flex;
  align-items: baseline;
  gap: clamp(14px, 2vw, 28px);
  padding-block: 18px 0;
}
.fig__no, .fig__meta { flex: none; }
.fig__rule { flex: 1; height: 1px; background: var(--rule-hard); transform-origin: left center; }

.d1, .d2, .d3 {
  font-family: var(--display);
  font-weight: 480;
  letter-spacing: -.045em;
  line-height: .95;
  font-variation-settings: "opsz" 96;
  text-wrap: balance;
}
.d2 { font-size: clamp(32px, 4.6vw, 64px); line-height: .99; letter-spacing: -.036em; }
.price-lede { display: grid; gap: clamp(12px, 1.1vw, 18px); }
.price-lede__hype { display: block; }
.price-lede__wise { display: block; font-family: var(--mono); font-weight: 400; font-size: clamp(13px, 1.15vw, 16px); line-height: 1.45; letter-spacing: -.005em; color: var(--ink-56); max-width: 40ch; }
/* light: deep blue, soft bloom on the light sheet */
.glow { color: var(--blue-deep); text-shadow: 0 0 14px rgba(79,119,173,.5), 0 0 30px rgba(79,119,173,.26); }
/* dark: baby blue, brighter + wider bloom against the dark sheet */
:root[data-theme="dark"] .glow { color: var(--blue); text-shadow: 0 0 12px rgba(167,196,230,.75), 0 0 26px rgba(167,196,230,.5), 0 0 52px rgba(167,196,230,.28); }
/* match the site's theme-flip crossfade: .7s linear, only while flipping */
:root.theming .glow { transition: color .7s linear, text-shadow .7s linear; }
@media (prefers-reduced-motion: no-preference) {
  .glow { animation: glowPulse 3.4s ease-in-out infinite; }
  :root[data-theme="dark"] .glow { animation-name: glowPulseDark; }
}
@keyframes glowPulse { 0%,100% { text-shadow: 0 0 12px rgba(79,119,173,.4), 0 0 26px rgba(79,119,173,.2); } 50% { text-shadow: 0 0 18px rgba(79,119,173,.65), 0 0 40px rgba(79,119,173,.35); } }
@keyframes glowPulseDark { 0%,100% { text-shadow: 0 0 12px rgba(167,196,230,.6), 0 0 26px rgba(167,196,230,.38), 0 0 52px rgba(167,196,230,.22); } 50% { text-shadow: 0 0 20px rgba(167,196,230,.9), 0 0 44px rgba(167,196,230,.6), 0 0 72px rgba(167,196,230,.34); } }
.d3 { font-size: clamp(21px, 2.4vw, 30px); line-height: 1.1; letter-spacing: -.028em; font-variation-settings: "opsz" 32; font-weight: 500; }

.lede {
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.5;
  color: var(--ink-72);
  letter-spacing: -.012em;
}

/* ---------- 4. Buttons : carved from the sheet --------------- */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 52px;
  padding-inline: 26px;
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -.01em;
  box-shadow: var(--up);
  transition: box-shadow .38s var(--ease), transform .38s var(--ease), color .3s var(--ease);
}
.btn:hover { box-shadow: var(--up-sm); }
.btn:active { box-shadow: var(--in); transform: scale(.995); }

/* the one button that carries weight : a dark core inside the soft ring */
.btn--go {
  background: var(--ink);
  color: var(--paper-hi);
  box-shadow: 6px 6px 16px var(--sh), -6px -6px 14px var(--hi), inset 0 1px 0 rgba(255,255,255,.14);
}
.btn--go:hover { box-shadow: 3px 3px 9px var(--sh), -3px -3px 8px var(--hi), inset 0 1px 0 rgba(255,255,255,.14); }
.btn--go:active { box-shadow: inset 3px 3px 9px rgba(0,0,0,.5), inset -2px -2px 7px rgba(255,255,255,.12); }

/* recessed : reads as the quieter option */
.btn--sunk {
  background: var(--paper);
  box-shadow: var(--in-sm);
  color: var(--ink-72);
}
.btn--sunk:hover { color: var(--ink); box-shadow: var(--in); }
.btn--sunk:active { box-shadow: var(--up-sm); }

.btn[aria-disabled="true"] { opacity: .45; cursor: default; }
.btn[aria-disabled="true"]:hover { box-shadow: var(--up); }
.btn--sm { height: 42px; padding-inline: 20px; font-size: 14px; }
.btn--full { width: 100%; }
.btn__kbd { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; opacity: .5; }
.btn--go .btn__kbd { opacity: .6; }

/* the platform dropdown */
.nav__cta { display: flex; align-items: center; gap: 12px; }
.dd { position: relative; }
.dd__t { gap: 8px; }
.dd--big .dd__menu { min-width: 100%; }
.dd__chev { transition: transform .4s var(--ease); opacity: .7; }
.dd.is-open .dd__chev { transform: rotate(180deg); }
.dd__menu {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  min-width: 172px;
  padding: 8px;
  border-radius: 18px;
  background: var(--paper);
  box-shadow: var(--up);
  display: grid;
  gap: 4px;
  opacity: 0;
  transform: translateY(-8px) scale(.97);
  transform-origin: top right;
  pointer-events: none;
  transition: opacity .32s var(--ease), transform .32s var(--ease);
}
.dd.is-open .dd__menu { opacity: 1; transform: none; pointer-events: auto; }
/* closed menu links must not be ghost-clickable, even inside the hero
   where children are force-set to pointer-events:auto */
.dd:not(.is-open) .dd__menu,
.dd:not(.is-open) .dd__menu a { pointer-events: none; }
.dd__menu a {
  display: flex;
  align-items: center;
  height: 42px;
  padding-inline: 14px;
  border-radius: 13px;
  font-size: 14.5px;
  color: var(--ink-72);
  transition: box-shadow .3s var(--ease), color .3s var(--ease);
}
.dd__menu a:hover { color: var(--ink); box-shadow: var(--in-sm); }
.dd__menu a[aria-disabled="true"] { opacity: .4; cursor: default; }
.dd__menu a[aria-disabled="true"]:hover { box-shadow: none; color: var(--ink-72); }

/* theme toggle */
.theme { position: relative; overflow: hidden; }
.theme svg { position: absolute; transition: transform .5s var(--ease), opacity .4s var(--ease); }
.theme__moon { transform: translateY(120%) rotate(-40deg); opacity: 0; }
:root[data-theme="dark"] .theme__sun { transform: translateY(-120%) rotate(40deg); opacity: 0; }
:root[data-theme="dark"] .theme__moon { transform: none; opacity: 1; }

/* round icon button */
.ibtn {
  width: 52px; height: 52px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: var(--up);
  color: var(--ink-72);
  transition: box-shadow .38s var(--ease), color .3s var(--ease);
}
.ibtn:hover { color: var(--ink); box-shadow: var(--up-sm); }
.ibtn:active { box-shadow: var(--in); }
.ibtn--sm { width: 42px; height: 42px; }

.tlink { position: relative; display: inline-block; padding-bottom: 2px; }
.tlink::after {
  content: '';
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform .45s var(--ease);
}
.tlink:hover::after { transform: scaleX(1); transform-origin: left center; }

/* ---------- 5. Nav ------------------------------------------ */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  height: 76px;
  display: flex;
  align-items: center;
  transition: background .4s var(--ease), box-shadow .4s var(--ease);
}
.nav.is-stuck {
  background: var(--nav-bg);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  box-shadow: 0 10px 24px -18px var(--sh);
}
.nav__in { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 100%; }

.mark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.mark__chip {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: var(--up-sm);
  overflow: hidden;
}
.mark__chip img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

.nav__links { display: flex; align-items: center; gap: clamp(16px, 2.2vw, 30px); }
.nav__links a { font-size: 13.5px; color: var(--ink-56); transition: color .3s var(--ease); }
.nav__links a:hover { color: var(--ink); }
@media (max-width: 940px) { .nav__links { display: none; } }

/* ---------- 6. Hero ----------------------------------------- */

.hero {
  position: relative;
  min-height: clamp(700px, 100svh, 980px);
  padding-top: 76px;
  display: flex;
  overflow: hidden;
}
#field { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.hero__veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(62% 50% at 22% 52%, var(--veil-1) 0%, var(--veil-2) 46%, transparent 78%);
}
.hero__in {
  position: relative; z-index: 2; flex: 1;
  display: flex; flex-direction: column; justify-content: center;
  pointer-events: none;
}
.hero__in a, .hero__in button { pointer-events: auto; }

/* everything reads on the left. the right half is the reel. */
.hero__col {
  grid-column: 1 / span 5;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
}
.hero__eyebrow { display: flex; align-items: center; gap: 10px; }
.hero__eyebrow .dot {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--paper);
  box-shadow: var(--in-sm);
  display: grid; place-items: center;
}
.hero__eyebrow .dot::after { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--ink); }
.hero__act { display: flex; gap: 12px; flex-wrap: wrap; }

/* HEFTY : every letter is cut out of the sheet, then pushed back
   half way. the recess sits up and to the right of the plate, so
   each glyph is part hole, part raised metal. */
.carve {
  font-family: var(--display);
  font-weight: 700;
  font-variation-settings: "opsz" 96;
  font-size: clamp(58px, 9.4vw, 148px);
  line-height: .9;
  letter-spacing: .05em;
  white-space: nowrap;
  user-select: none;
  margin-block: 2px 6px;
}
.carve i {
  font-style: normal;
  position: relative;
  display: inline-block;
  color: transparent;
}
/* the letters are stamped into the sheet: dark rim on the near wall,
   lit floor on the far one. nothing is raised. */
.carve i::before {
  content: attr(data-c);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  color: var(--carve-face);
  text-shadow: var(--carve-shadow);
}

/* the reel : a raised bezel with the screen set into it */
.reel {
  grid-column: 7 / span 6;
  align-self: center;
  border-radius: 26px;
  padding: 14px;
  background: var(--paper);
  box-shadow: var(--up-lg);
  position: relative;
}
.reel__inner {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--paper-lo);
  box-shadow: var(--in-sm);
}
.reel__inner video { width: 100%; height: 100%; object-fit: cover; }
.reel__lbl {
  position: absolute;
  left: 20px; top: -9px;
  padding-inline: 8px;
  background: var(--paper);
}
.reel__idle {
  position: absolute; inset: 0;
  display: grid; place-content: center; gap: 10px; justify-items: center;
  color: var(--ink-38);
}

@media (max-width: 1080px) {
  .hero__col { grid-column: 1 / span 7; }
  .reel { grid-column: 1 / -1; margin-top: 44px; }
  .hero__in { justify-content: flex-start; padding-top: 7vh; }
  .hero { min-height: 0; padding-bottom: 40px; }
}
@media (max-width: 700px) {
  .hero__col { grid-column: 1 / -1; }
  .carve { font-size: clamp(52px, 16vw, 96px); }
}

/* dimension callout */
.dim { position: absolute; display: flex; align-items: center; gap: 8px; color: var(--ink-38); }
.dim__line { flex: 1; height: 1px; background: currentColor; }
.dim__cap { width: 1px; height: 9px; background: currentColor; flex: none; }
.dim__txt { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; color: var(--ink-56); }
.hero__dim { left: var(--gut); right: 52%; bottom: 26px; z-index: 2; }
@media (max-width: 1080px) { .hero__dim { display: none; } }

.readout { position: absolute; right: var(--gut); bottom: 26px; z-index: 2; display: flex; gap: 18px; align-items: center; }
.readout b { font-weight: 450; color: var(--ink-72); }
@media (max-width: 760px) { .readout { display: none; } }

.reg { position: absolute; width: 13px; height: 13px; z-index: 2; pointer-events: none; }
.reg::before, .reg::after { content: ''; position: absolute; background: var(--rule-hard); }
.reg::before { width: 100%; height: 1px; top: 0; }
.reg::after { height: 100%; width: 1px; left: 0; }
.reg--tr { transform: scaleX(-1); }

/* ---------- 7. Ticker --------------------------------------- */

.ticker {
  position: relative;
  padding-block: 16px;
  overflow: hidden;
  background: var(--paper);
  box-shadow: var(--in-sm);
}
.ticker__track { display: flex; width: max-content; will-change: transform; }
.ticker__item {
  display: inline-flex; align-items: center; gap: 22px;
  padding-inline: 22px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--ink-56);
  white-space: nowrap;
}
.ticker__item::after { content: ''; width: 3px; height: 3px; border-radius: 50%; background: var(--ink-38); }
.ticker::before, .ticker::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 90px; z-index: 2; pointer-events: none;
}
.ticker::before { left: 0; background: linear-gradient(90deg, var(--paper), transparent); }
.ticker::after { right: 0; background: linear-gradient(270deg, var(--paper), transparent); }

/* ---------- 8. Bands ---------------------------------------- */

section { position: relative; }
.band { padding-block: clamp(70px, 9.5vw, 128px); }
.band--tight { padding-block: clamp(54px, 7vw, 96px); }

.thesis {
  grid-column: 3 / span 9;
  margin-top: clamp(34px, 5vw, 62px);
  font-family: var(--display);
  font-variation-settings: "opsz" 48;
  font-weight: 430;
  font-size: clamp(26px, 3.4vw, 48px);
  line-height: 1.14;
  letter-spacing: -.03em;
}
.thesis w { color: var(--ink-38); transition: color .28s linear; }
.thesis w.on { color: var(--ink); }
@media (max-width: 900px) { .thesis { grid-column: 1 / -1; } }

/* ---------- 9. Modality rows -------------------------------- */

.mods { margin-top: clamp(36px, 4.6vw, 58px); border-top: 1px solid var(--rule); }
.mod {
  display: grid;
  grid-template-columns: 40px 58px minmax(0, 1fr) auto;
  gap: clamp(14px, 2vw, 30px);
  align-items: center;
  padding-block: clamp(20px, 2.4vw, 30px);
  border-bottom: 1px solid var(--rule);
  position: relative;
}
.mod__no { font-family: var(--mono); font-size: 11px; color: var(--ink-38); letter-spacing: .12em; align-self: center; }
.mod__ic {
  width: 58px; height: 58px;
  border-radius: 16px;
  background: var(--paper);
  box-shadow: var(--up-sm);
  display: grid; place-items: center;
  color: var(--ink);
  transition: box-shadow .4s var(--ease), transform .4s var(--ease);
}
.mod__ic svg { width: 24px; height: 24px; }
.mod:hover .mod__ic { box-shadow: var(--in); transform: scale(.94); }
.mod__t {
  font-family: var(--display);
  font-variation-settings: "opsz" 32;
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 500; letter-spacing: -.03em; line-height: 1.05;
}
.mod__d { color: var(--ink-72); font-size: 15px; line-height: 1.5; margin-top: 3px; }
.mod__q {
  justify-self: end;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .01em;
  color: var(--ink-56);
  padding: 9px 14px;
  border-radius: 11px;
  box-shadow: var(--in-sm);
  white-space: nowrap;
}
@media (max-width: 1000px) {
  .mod { grid-template-columns: 30px 50px 1fr; row-gap: 12px; }
  .mod__q { grid-column: 2 / -1; justify-self: start; }
}
@media (max-width: 620px) {
  .mod { grid-template-columns: 30px 1fr; }
  .mod__ic { display: none; }
  .mod__q { grid-column: 2; }
}

/* ---------- 10. Panel schematic ----------------------------- */

.anat { margin-top: clamp(40px, 5.4vw, 72px); align-items: start; }
.anat__list { grid-column: 1 / span 4; position: sticky; top: 116px; }
.anat__item {
  display: grid; grid-template-columns: 34px 1fr; gap: 12px;
  padding-block: 14px;
  border-top: 1px solid var(--rule-soft);
  opacity: .34;
  transition: opacity .45s var(--ease);
}
.anat__item:first-child { border-top: 0; }
.anat__item.on { opacity: 1; }
.anat__item .n { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; color: var(--ink-56); padding-top: 4px; }
.anat__item.on .n { color: var(--ink); }
.anat__item h4 { font-size: 16px; font-weight: 500; letter-spacing: -.015em; }
.anat__item p { font-size: 14.5px; color: var(--ink-72); line-height: 1.5; margin-top: 2px; }

.anat__draw { grid-column: 6 / span 7; }
/* the boundary keeps its raised highlight + shadow; the field inside
   turns into a blueprint : blue paper, white ink. */
.anat__frame {
  position: relative;
  border-radius: 26px;
  background: var(--bp-bg);
  box-shadow: var(--up-lg);
  padding: clamp(26px, 3.4vw, 46px);
}
.anat__svg { width: 100%; height: auto; position: relative; color: var(--bp-line); pointer-events: none; }
/* only the invisible hit rects catch the pointer, so overlapping parts
   of the drawing never fight over the hover. */
.anat__svg .hit { fill: transparent; stroke: none; pointer-events: all; cursor: crosshair; }
/* the thin dashed grid the whole drawing sits on */
.anat__svg .bp-grid {
  fill: none;
  stroke: var(--bp-line);
  stroke-width: .5;
  stroke-dasharray: 1.5 3.5;
  opacity: .26;
  vector-effect: non-scaling-stroke;
}

/* the Backpack. the dock button IS the panel: hover it and the dock
   fades while the panel grows out of the exact same spot, same width
   as the result rows, half their height. reverse on the way out.
   The frame never moves, because the panel lives inside it. */
#tray {
  transform-box: fill-box;
  transform-origin: 94% 63%;      /* the dock sits here */
  opacity: 0;
  transform: scale(.06);
  transition: transform .5s var(--ease), opacity .28s linear;
  pointer-events: none;
}
.is-open #tray { opacity: 1; transform: none; }

#dock { cursor: pointer; }
#dock > *:not(.hit) { transition: opacity .3s var(--ease); }
.is-open #dock > *:not(.hit) { opacity: 0; }
/* app boundaries : moderately thick dashed line */
.anat__svg .stroke { fill: none; stroke: var(--bp-line); stroke-width: 1.6; stroke-dasharray: 6 4; vector-effect: non-scaling-stroke; }
/* sub-parts of the UI : thinner dashed line */
.anat__svg .thin { stroke: var(--bp-line); stroke-width: 1; stroke-dasharray: 3 3; opacity: .78; }
.anat__svg .lead { stroke: var(--bp-line); stroke-width: 1; stroke-dasharray: 2 4; opacity: .5; }
/* every placeholder tile in the drawing is a thin dashed outline */
.anat__svg .ghost, .tray__svg .ghost {
  fill: none;
  stroke: var(--bp-line);
  stroke-width: 1;
  stroke-dasharray: 3 3;
  opacity: .72;
  vector-effect: non-scaling-stroke;
}
.anat__svg text { font-family: var(--mono); font-size: 9px; letter-spacing: .1em; fill: var(--bp-line); opacity: .8; }
.anat__svg .node { transition: opacity .4s var(--ease); }
.anat__svg .node.dim { opacity: .28; }

@media (max-width: 1000px) {
  .anat__list { grid-column: 1 / -1; position: static; }
  .anat__draw { grid-column: 1 / -1; margin-top: 34px; }
  .anat__item { opacity: 1; }
}

/* ---------- 11. Boundary ------------------------------------ */

.ledger {
  grid-column: 7 / span 6;
  border-radius: 26px;
  padding: clamp(22px, 2.6vw, 32px);
  background: var(--paper);
  box-shadow: var(--up-lg);
}
.ledger h3 {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 450;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 14px;
}
.ledger ul { display: grid; gap: 9px; }
.ledger li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 15px 18px;
  border-radius: 15px;
  box-shadow: var(--in-sm);
}
.ledger li b { font-weight: 500; font-size: 15.5px; flex: none; }
.ledger li span { font-size: 13.5px; color: var(--ink-56); margin-left: auto; text-align: right; }

/* the line where the machine stops */
.ledger__edge {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-block: 22px;
}
.ledger__edge::before, .ledger__edge::after {
  content: '';
  flex: 1;
  height: 0;
  border-top: 1px dashed var(--rule-hard);
}

.ledger--out h3 { color: var(--ink-56); }
.ledger--out li {
  box-shadow: var(--up-sm);
}
.ledger--out li b { color: var(--ink-72); }

.priv__copy { grid-column: 1 / span 5; align-self: center; position: relative; z-index: 0; }
/* a soft blue glow sitting behind the headline */
.priv__copy::before {
  content: '';
  position: absolute;
  left: -8%; top: -18%;
  width: clamp(240px, 26vw, 380px);
  aspect-ratio: 1;
  background: radial-gradient(circle, var(--ball) 0%, transparent 68%);
  opacity: .55;
  filter: blur(34px);
  z-index: -1;
  pointer-events: none;
}
@media (max-width: 900px) {
  .ledger, .priv__copy { grid-column: 1 / -1; }
  .priv__copy { margin-bottom: 34px; }
  .ledger li { flex-wrap: wrap; }
  .ledger li span { margin-left: 0; text-align: left; }
}

/* ---------- 12. Brag blocks (the loud ones) ------------------ */

.brag { border-top: 1px solid var(--rule); }
.brag__row {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
  gap: clamp(16px, 3vw, 48px);
  align-items: start;
  padding-block: clamp(34px, 4.4vw, 58px);
  border-bottom: 1px solid var(--rule);
}
.brag__w {
  font-family: var(--display);
  font-variation-settings: "opsz" 72;
  font-size: clamp(46px, 7vw, 96px);
  font-weight: 560;
  letter-spacing: -.05em;
  line-height: .88;
  color: var(--paper);
  text-shadow: var(--brag-shadow);
}
.brag__t { font-size: clamp(20px, 2.2vw, 28px); font-weight: 480; letter-spacing: -.025em; }
.brag__p { margin-top: 12px; color: var(--ink-72); font-size: 16.5px; line-height: 1.5; max-width: 46ch; }
@media (max-width: 800px) { .brag__row { grid-template-columns: 1fr; } }

/* ---------- 13. Pricing ------------------------------------- */

.plans {
  margin-top: clamp(36px, 4.6vw, 60px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 1.8vw, 26px);
}
.plan {
  position: relative;
  z-index: 1;
  border-radius: 26px;
  /* the accent is a top border, so it follows the rounded corners
     identically on every card instead of clipping. */
  border-top: 3px solid var(--plan-acc);
  background: var(--paper);
  box-shadow: var(--up);
  padding: clamp(24px, 2.6vw, 34px);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
/* each plan carries its own colour off the palette */
.plans .plan:nth-child(1) { --plan-acc: var(--blue-deep); }
.plans .plan:nth-child(2) { --plan-acc: var(--acc-green); }
.plans .plan:nth-child(3) { --plan-acc: #e0ad6b; }
.plan .plan__price { color: var(--plan-acc); }
.plan .plan__note { color: var(--plan-acc); }
.plan__head .tag:last-child { color: var(--plan-acc); }
/* the CTA is a platform picker; its menu must escape the card, sit
   above the neighbours while open, and drop straight down (not skew
   in from the top-right like the nav menus). */
.plan .dd { margin-top: auto; width: 100%; }
.plan:has(.dd.is-open) { z-index: 20; }
.plan .dd__menu { left: 0; right: auto; min-width: 100%; z-index: 30; transform-origin: top center; }
.plan--dark {
  background: var(--ink);
  color: var(--inv-fg);
  box-shadow: var(--up);
}
.plan--dark .tag, .plan--dark .plan__per, .plan--dark .plan__note { color: var(--inv-fg-56); }
.plan--dark .plan__feat li { color: var(--inv-fg-72); }
.plan--dark .plan__feat li::before { background: var(--inv-fg-38); }
.plan--dark .btn { background: var(--inv-fg); color: var(--ink); box-shadow: 4px 4px 12px rgba(0,0,0,.45), -2px -2px 8px rgba(255,255,255,.08); }
.plan--dark .btn:active { box-shadow: inset 3px 3px 9px rgba(0,0,0,.3); }

.plan__head { display: flex; justify-content: space-between; align-items: baseline; }
.plan__price {
  font-family: var(--display);
  font-variation-settings: "opsz" 48;
  font-size: clamp(38px, 4.2vw, 54px);
  font-weight: 460; letter-spacing: -.04em; line-height: 1;
}
.plan__price sup { font-size: .38em; vertical-align: .95em; margin-right: 2px; letter-spacing: 0; }
.plan__per { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-56); margin-top: 8px; }
.plan__feat { display: grid; gap: 9px; }
.plan__feat li { position: relative; padding-left: 18px; font-size: 15px; color: var(--ink-72); }
.plan__feat li::before { content: ''; position: absolute; left: 0; top: .64em; width: 7px; height: 1px; background: var(--ink-38); }
.plan .btn { margin-top: auto; }
.plan__note { font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-56); text-align: center; }

@media (max-width: 900px) { .plans { grid-template-columns: 1fr; } }

/* ---------- 14. FAQ ----------------------------------------- */

.faq { grid-column: 4 / span 9; margin-top: clamp(26px, 3.4vw, 44px); position: relative; z-index: 1; }
@media (max-width: 900px) { .faq { grid-column: 1 / -1; } }
/* a big, plain, light blue "?" parked in the empty left column */
.faqband .shell { position: relative; }
.faq__mark {
  position: absolute;
  left: calc(var(--gut) - .02em); top: 50%;
  transform: translateY(-50%);
  z-index: 0;
  font-family: 'Foldit', var(--display);
  font-weight: 700;
  font-size: clamp(190px, 24vw, 360px);
  line-height: 1;
  color: #3f7ad9;
  opacity: .42;
  pointer-events: none;
  user-select: none;
}
@media (max-width: 900px) { .faq__mark { display: none; } }
.qa { border-top: 1px solid var(--rule); }
.qa__q {
  list-style: none;
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  text-align: left;
  padding-block: 20px;
  font-size: clamp(17px, 1.4vw, 19px);
  font-weight: 460;
  letter-spacing: -.018em;
  transition: opacity .3s var(--ease);
}
.qa__q::-webkit-details-marker { display: none; }
.qa__q::marker { content: ''; }
.qa__q:hover { opacity: .6; }
.qa__ix {
  flex: none; position: relative;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--paper);
  box-shadow: var(--up-sm);
  transition: box-shadow .4s var(--ease);
}
.qa__ix::before, .qa__ix::after {
  content: '';
  position: absolute; left: 9px; right: 9px; top: 50%;
  height: 1px; background: var(--ink);
  transition: transform .5s var(--ease);
}
.qa__ix::after { transform: rotate(90deg); }
.qa.is-open .qa__ix { box-shadow: var(--in-sm); }
.qa.is-open .qa__ix::after { transform: rotate(0deg); }
.qa__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .5s var(--ease);
}
.qa.is-open .qa__a { grid-template-rows: 1fr; }
.qa__a > div {
  overflow: hidden;
  max-width: 60ch;
  color: var(--ink-72);
  font-size: 15.5px;
  line-height: 1.6;
}
/* the breathing room lives inside the clipped box, so it collapses too */
.qa__a > div::after { content: ''; display: block; height: 24px; }

/* ---------- 15. Closing band -------------------------------- */

.close {
  background: var(--ink);
  color: var(--inv-fg);
  padding-block: clamp(72px, 10vw, 130px);
  position: relative;
  overflow: hidden;
}
.close .tag { color: var(--inv-fg-56); }
.close .fig__rule { background: var(--inv-rule); }
.close .btn {
  background: var(--inv-fg); color: var(--ink);
  box-shadow: 6px 6px 18px rgba(0,0,0,.5), -3px -3px 12px rgba(255,255,255,.09);
}
.close .btn:active { box-shadow: inset 4px 4px 10px rgba(0,0,0,.28); }
.close__t { grid-column: 1 / span 8; margin-top: clamp(26px, 3.4vw, 46px); }
.close__act { grid-column: 1 / span 6; margin-top: 30px; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.close__grid {
  position: absolute; inset: 0; opacity: .14;
  background:
    linear-gradient(var(--inv-fg-56) 1px, transparent 1px) 0 0 / 100% 46px,
    linear-gradient(90deg, var(--inv-fg-56) 1px, transparent 1px) 0 0 / 46px 100%;
  -webkit-mask-image: radial-gradient(70% 90% at 88% 50%, #000, transparent 72%);
  mask-image: radial-gradient(70% 90% at 88% 50%, #000, transparent 72%);
}
@media (max-width: 900px) { .close__t, .close__act { grid-column: 1 / -1; } }

/* ---------- 16. Footer -------------------------------------- */

.foot { background: var(--ink); color: var(--inv-fg-72); padding-bottom: 40px; }
.foot__in { border-top: 1px solid var(--inv-rule); padding-top: 32px; }
.foot__brand { grid-column: 1 / span 4; color: var(--inv-fg); }
.foot__brand .mark__chip { background: var(--inv-rule); box-shadow: none; }
.foot__col { grid-column: span 2; }
.foot__col:nth-of-type(2) { grid-column: 7 / span 2; }
.foot h5 { margin: 0 0 14px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--inv-fg-38); font-weight: 450; }
.foot li { margin-bottom: 8px; font-size: 14px; }
.foot a:hover { color: var(--inv-fg); }
.foot__base {
  grid-column: 1 / -1;
  margin-top: clamp(40px, 5vw, 68px);
  padding-top: 18px;
  border-top: 1px solid var(--inv-rule);
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.foot__base .tag { color: var(--inv-fg-38); }
@media (max-width: 900px) {
  .foot__brand { grid-column: 1 / -1; margin-bottom: 32px; }
  .foot__col, .foot__col:nth-of-type(2) { grid-column: span 6; margin-bottom: 22px; }
}

/* ---------- 17. Reveal defaults ----------------------------- */

[data-r] { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  [data-r] { opacity: 1 !important; transform: none !important; }
  .ticker__track { transform: none !important; }
}


/* ---------- premise : the ask pill ------------------------------ */
.premise { align-items: end; }
.premise .thesis { grid-column: 1 / span 8; }
.premise__ask {
  grid-column: 9 / span 4;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
  padding-bottom: 6px;
}
.ask {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 54px;
  padding-inline: 18px;
  border-radius: 16px;
  background: var(--paper);
  box-shadow: var(--up);
  color: var(--ink-56);
  font-size: 15px;
}
.ask__type { color: var(--ink); white-space: nowrap; overflow: hidden; }
.ask__caret { width: 1.5px; height: 1.1em; background: var(--ink); display: inline-block; }
@media (max-width: 900px) {
  .premise .thesis, .premise__ask { grid-column: 1 / -1; }
  .premise__ask { margin-top: 30px; align-items: flex-start; }
  .ask { width: min(360px, 100%); }
}


/* ---------- three claims : each word gets its own touch --------- */
.brag__w { position: relative; }

/* Fast : leaning forward. a copy behind, smeared on the horizontal
   axis only (directional gaussian) reads as static motion blur,
   never a soft cloud. same in both themes. */
.brag__w--fast { font-style: italic; }
.brag__w--fast::before {
  content: attr(data-w);
  position: absolute; inset: 0;
  font-style: italic;
  color: var(--ink);
  filter: url(#mblur);
  transform: translateX(-7px);
  opacity: .42;
  z-index: -1;
  pointer-events: none;
}

/* Tidy : no extrusion, just clean flat type */
.brag__w--tidy {
  color: var(--ink);
  text-shadow: none;
}

/* Quiet : baby blue, hushed */
.brag__w--quiet {
  color: #a7c4e6;
  text-shadow:
    1px 1px 0 #93b3da, 2px 2px 0 #89abd4, 3px 3px 0 #7fa3ce,
    4px 4px 0 #769ccb, 5px 5px 0 #6d95c8,
    8px 9px 12px rgba(30, 60, 110, .22),
    -1px -1px 1px rgba(255, 255, 255, .85);
}