/* ==========================================================================
   Samana — asksamana.com site system (Quiet Horizon)
   Tokens: verbatim from vault 01-PRODUCT/Design/design-tokens.json v1.0.0
   (locked v1). The display-scale extension below is a documented computed
   extension of the locked 1.2 minor-third ramp upward for marketing
   scale: 16 * 1.2^5..8 = 39.8 / 47.8 / 57.3 / 68.7 -> 40 / 48 / 57 / 69.
   The locked token steps are untouched.

   Round-3 visual reset: product-led minimal. One atmospheric idea only —
   the dusk-to-dawn section-background walk plus the glowing Band seam
   with the breathing orb. Everything else is clean editorial layout.
   ========================================================================== */

@font-face { font-family: "Bricolage Grotesque"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/BricolageGrotesque-Regular.ttf") format("truetype"); }
@font-face { font-family: "Bricolage Grotesque"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/BricolageGrotesque-Bold.ttf") format("truetype"); }
@font-face { font-family: "Instrument Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/InstrumentSans-Regular.ttf") format("truetype"); }
@font-face { font-family: "Instrument Sans"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/InstrumentSans-Bold.ttf") format("truetype"); }
@font-face { font-family: "Instrument Sans"; font-weight: 400; font-style: italic; font-display: swap; src: url("../fonts/InstrumentSans-Italic.ttf") format("truetype"); }
@font-face { font-family: "Crimson Pro"; font-weight: 400; font-style: italic; font-display: swap; src: url("../fonts/CrimsonPro-Italic.ttf") format("truetype"); }

:root {
  /* Quiet Horizon — light-mode base ramps (design-tokens.json, verbatim) */
  --color-water-950: #0F2129; --color-water-900: #16303A; --color-water-800: #1D3B47;
  --color-water-700: #2C4A55; --color-water-500: #4E6B74; --color-water-300: #8FA6AC;
  --color-shell-0: #FBF9F7; --color-shell-1: #F6F2EF; --color-shell-2: #ECE6E1; --color-shell-3: #DCD4CE;
  --color-tide-700: #34685F; --color-tide-600: #3E7C74; --color-tide-400: #6FA49B; --color-tide-200: #CFE0DD;
  --color-dawn-600: #B9835E; --color-dawn-400: #E8A87C; --color-dawn-300: #F0BE95; --color-dawn-200: #F6DFC9;
  --color-clay-600: #9B5142;
  --text-primary: var(--color-water-900); --text-secondary: var(--color-water-700); --text-muted: var(--color-water-500);
  --surface-app: var(--color-shell-1); --surface-raised: var(--color-shell-0); --surface-inset: var(--color-shell-2);
  --border-soft: var(--color-shell-3); --border-strong: var(--color-water-300);
  --action-primary: var(--color-tide-600); --on-action: var(--color-shell-0); --action-text: var(--color-tide-700);
  --focus-ring: var(--color-tide-600);
  --sami-core: var(--color-dawn-400); --sami-inner: var(--color-dawn-200); --sami-glow: rgba(232,168,124,0.35);
  --depth-1: #E4ECEC; --depth-2: #C9DADB; --depth-3: #A9C4C6;
  --insight-tint: var(--color-dawn-200); --system-error: var(--color-clay-600);
  --font-display: "Bricolage Grotesque", "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  --font-body: "Instrument Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-voice: "Crimson Pro", Georgia, "Times New Roman", serif;
  --type-11: 11px; --type-13: 13px; --type-16: 16px; --type-19: 19px; --type-23: 23px; --type-28: 28px; --type-33: 33px;
  /* computed display extension (documented above) */
  --type-40: 40px; --type-48: 48px; --type-57: 57px; --type-69: 69px;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --radius-input: 6px; --radius-card: 12px; --radius-sheet: 20px; --radius-pill: 999px;
  --shadow-1: 0 1px 2px rgba(22,48,58,0.06); --shadow-2: 0 2px 8px rgba(22,48,58,0.08); --shadow-3: 0 8px 24px rgba(22,48,58,0.10);
  --motion-fast: 160ms; --motion-gentle: 400ms; --motion-ambient: 1200ms; --motion-breath: 6000ms;
  --ease-settle: cubic-bezier(0.3, 0, 0.6, 1); --ease-drift: cubic-bezier(0.25, 0.1, 0.25, 1); --ease-breath: cubic-bezier(0.37, 0, 0.63, 1);
  --ink-light: var(--color-shell-0);
  --ink-light-soft: rgba(251, 249, 247, 0.8);
  --ink-light-faint: rgba(251, 249, 247, 0.58);
  /* Phone presentation knobs: the paired --frame-w + --screen-scale on
     .phone (centerpiece) and .stagegrid .phone (ensemble). The former
     crop-ratio knob is retired: every frame is a full true-ratio device. */
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: var(--font-body); color: var(--text-primary); background: var(--color-water-950); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, svg { max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; border-radius: 2px; }
section, header { scroll-margin-top: 12px; }

/* --------------------------------------------------------------------------
   The walk: one continuous dusk-to-dawn gradient across the sections —
   the single atmospheric idea this design keeps.
   Section vertical padding is doubled per the product-led reset.
   -------------------------------------------------------------------------- */
.sec { position: relative; padding: clamp(40px, 5vh, 56px) var(--space-5); }
.sec-inner { max-width: 1040px; margin: 0 auto; position: relative; z-index: 2; }
.sec--narrow .sec-inner { max-width: 760px; }

#horizon    { background: linear-gradient(180deg, #0A171D 0%, var(--color-water-950) 16%, var(--color-water-800) 52%, #2E5A62 70%, #48796F 79%, #B78A68 85%, #F0BE95 87%, #B78A68 89.5%, #22434E 96%, var(--color-water-950) 100%); }
#why        { background: linear-gradient(180deg, var(--color-water-950) 0%, var(--color-water-900) 100%); }
#sami       { background: linear-gradient(180deg, var(--color-water-900) 0%, var(--color-water-800) 100%); }
#experience { background: linear-gradient(180deg, var(--color-water-800) 0%, var(--color-water-700) 100%); padding-top: clamp(40px, 6vh, 64px); padding-bottom: clamp(40px, 6vh, 64px); }
#different  { background: linear-gradient(180deg, var(--color-water-700) 0%, var(--color-tide-700) 100%); padding-top: clamp(40px, 6vh, 64px); }
#principles { background: linear-gradient(180deg, var(--color-tide-700) 0%, var(--color-tide-600) 100%); padding-top: clamp(40px, 6vh, 64px); }
#company    { background: linear-gradient(180deg, var(--color-tide-600) 0%, #7FA08F 6%, var(--color-dawn-300) 12%, var(--color-shell-1) 22%, var(--color-shell-1) 100%); padding-top: clamp(96px, 12vh, 144px); }
#waitlist   { background: linear-gradient(180deg, var(--color-shell-1) 0%, var(--color-dawn-200) 100%); }
.site-footer { background: var(--color-shell-2); }

.sec--dark { color: var(--ink-light); }
.sec--dark .lede, .sec--dark p { color: var(--ink-light-soft); }
.sec--dark .eyebrow { color: var(--color-dawn-300); }
.sec--light { color: var(--text-primary); }
.sec--light .lede, .sec--light p { color: var(--text-secondary); }
.sec--light .eyebrow { color: var(--color-tide-700); }

/* --------------------------------------------------------------------------
   Typography — editorial, capped at 57/69
   -------------------------------------------------------------------------- */
.eyebrow { font-size: var(--type-13); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: var(--space-4); }
h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(var(--type-40), 5.4vw, var(--type-69)); line-height: 1.05; letter-spacing: -0.015em; max-width: 14ch; }
h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(var(--type-33), 4vw, var(--type-57)); line-height: 1.1; letter-spacing: -0.01em; margin-bottom: var(--space-4); max-width: 26ch; }
h3 { font-family: var(--font-display); font-weight: 700; font-size: var(--type-23); line-height: 1.3; margin-bottom: var(--space-3); }
.lede { font-size: var(--type-19); line-height: 1.6; max-width: 860px; }
.lede + .lede { margin-top: var(--space-4); }
p { font-size: var(--type-16); line-height: 1.65; max-width: 720px; }
p + p { margin-top: var(--space-4); }
.voice { font-family: var(--font-voice); font-style: italic; font-weight: 400; }

/* --------------------------------------------------------------------------
   Sami orb
   -------------------------------------------------------------------------- */
.orb { border-radius: var(--radius-pill); background: radial-gradient(circle at 35% 35%, var(--sami-inner), var(--sami-core) 65%, rgba(232,168,124,0) 100%); box-shadow: 0 0 24px var(--sami-glow); animation: breath var(--motion-breath) var(--ease-breath) infinite alternate; }
@keyframes breath { from { transform: scale(1); opacity: 0.9; } to { transform: scale(1.04); opacity: 1; } }
.orb--sm { width: 20px; height: 20px; }
.orb--md { width: 32px; height: 32px; }

/* --------------------------------------------------------------------------
   Hero — product-led: copy + CTA beside the Today Surface phone.
   The glowing seam + orb is the kept atmospheric signature.
   -------------------------------------------------------------------------- */
#horizon { display: flex; flex-direction: column; padding-top: var(--space-5); padding-bottom: var(--space-5); }
.seam { position: absolute; left: 0; right: 0; top: 87%; height: 1px; z-index: 0; pointer-events: none; opacity: 0.75;
  background: linear-gradient(90deg, transparent 4%, rgba(240,190,149,0.85) 38%, #F6DFC9 50%, rgba(240,190,149,0.85) 62%, transparent 96%);
  box-shadow: 0 0 16px 2px rgba(240,190,149,0.3);
}
.hero-top { display: flex; align-items: center; justify-content: space-between; max-width: 1120px; width: 100%; margin: 0 auto; position: relative; z-index: 2; }
.brandmark { display: flex; align-items: center; gap: 12px; font-family: var(--font-display); font-weight: 700; font-size: var(--type-23); color: var(--ink-light); text-decoration: none; }
.hero-grid { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(40px, 6vw, 96px); align-items: start; max-width: 1120px; width: 100%; margin: 0 auto; padding: var(--space-5) 0; position: relative; z-index: 2; }
.hero-copy { color: var(--ink-light); padding-top: var(--space-4); }
.hero-whisper { font-size: clamp(var(--type-16), 1.8vw, var(--type-19)); color: var(--color-dawn-200); margin-bottom: var(--space-4); }
.hero-sub { margin-top: var(--space-5); font-size: var(--type-19); color: var(--ink-light-soft); max-width: 540px; line-height: 1.6; }
.hero-sub--quiet { font-size: var(--type-16); color: var(--ink-light-faint); margin-top: var(--space-4); }
.cta-row { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-6); align-items: center; }
.btn-cta { display: inline-block; font-family: var(--font-body); font-weight: 700; font-size: var(--type-16); background: var(--action-primary); color: var(--on-action); text-decoration: none; padding: 14px 28px; border-radius: var(--radius-input); transition: transform var(--motion-fast) var(--ease-settle), box-shadow var(--motion-fast) var(--ease-settle); }
.btn-cta:hover { box-shadow: 0 6px 22px rgba(62,124,116,0.4); }
.btn-cta:active { transform: scale(0.98); }
.btn-ghost { display: inline-block; font-family: var(--font-body); font-weight: 700; font-size: var(--type-16); color: var(--color-dawn-200); text-decoration: none; padding: 14px 10px; }
.btn-ghost:hover { color: var(--color-dawn-300); }
.hero-device { position: relative; z-index: 1; width: min(390px, 100%); margin-right: clamp(40px, 12vw, 190px); }
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; justify-items: center; text-align: left; }
  .hero-device { margin-top: var(--space-6); }
  .hero-device { margin-right: 0; }
}

/* --------------------------------------------------------------------------
   Anchor rail
   -------------------------------------------------------------------------- */
.rail { position: fixed; right: 22px; top: 50%; transform: translateY(-50%); z-index: 40; display: flex; flex-direction: column; gap: 18px; }
.rail a { position: relative; width: 14px; height: 14px; display: block; }
.rail a .dot { position: absolute; inset: 3px; border-radius: var(--radius-pill); background: rgba(251,249,247,0.38); transition: background var(--motion-fast) var(--ease-settle), transform var(--motion-fast) var(--ease-settle); }
.rail a:hover .dot { background: rgba(251,249,247,0.72); transform: scale(1.2); }
.rail a.active .dot { inset: 0; background: radial-gradient(circle at 35% 35%, var(--sami-inner), var(--sami-core) 65%, rgba(232,168,124,0) 100%); box-shadow: 0 0 12px rgba(232,168,124,0.5); animation: breath var(--motion-breath) var(--ease-breath) infinite alternate; }
.rail a::after { content: attr(data-label); position: absolute; right: 26px; top: 50%; transform: translateY(-50%); white-space: nowrap; font-size: var(--type-13); color: var(--ink-light); background: rgba(15,33,41,0.82); padding: 4px 12px; border-radius: var(--radius-pill); opacity: 0; pointer-events: none; transition: opacity var(--motion-fast) var(--ease-settle); }
.rail a:hover::after, .rail a:focus-visible::after { opacity: 1; }
.rail.rail--light a .dot { background: rgba(22,48,58,0.28); }
.rail.rail--light a:hover .dot { background: rgba(22,48,58,0.5); }
.rail.rail--light a::after { background: rgba(22,48,58,0.85); color: var(--color-shell-0); }
@media (max-width: 900px) { .rail { display: none; } }

/* --------------------------------------------------------------------------
   Reveals
   -------------------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity var(--motion-gentle) var(--ease-drift), transform var(--motion-gentle) var(--ease-drift); }
.reveal.in { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   Refusal cards — quiet bordered cards, no atmosphere
   -------------------------------------------------------------------------- */
.refusals { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-4); margin-top: var(--space-6); }
.refusal { background: rgba(251,249,247,0.04); border: 1px solid rgba(251,249,247,0.14); border-radius: var(--radius-sheet); padding: var(--space-5); }
.refusal .word { font-family: var(--font-display); font-weight: 700; font-size: var(--type-28); color: var(--ink-light); display: block; margin-bottom: var(--space-3); }
.refusal p { font-size: var(--type-13); line-height: 1.6; color: var(--ink-light-faint); }

/* --------------------------------------------------------------------------
   Phone frames — clean device treatment: bezel + soft shadow, nothing else.
   DERIVED from the canonical mockups (see README).
   -------------------------------------------------------------------------- */

/* True iPhone logical proportions (binding): every frame is 390:844
   (19.5:9) at any rendered width. Content that exceeds the frame clips
   behind a soft bottom fade inside the screen - a real screenshot that
   continues below the fold, never a stretched device. */
/* The phone size system (binding): a frame either shows a WHOLE device
   (the centerpiece) or an HONEST CROP of one (the ensemble). Screens are
   NEVER reflowed at narrow widths: every .screen renders at its true
   390px design width and is uniformly scaled into its frame - a
   pixel-true miniature of the canonical layout, exactly like a real
   product screenshot. The knobs per context are the PAIR --frame-w +
   --screen-scale, where --screen-scale = (--frame-w - 22px bezel) / 390.
   Whole-device frame height = (frame-w - 22) * 844/390 + 22. */
.phone { --frame-w: 235px; --screen-scale: 0.54615; width: var(--frame-w); max-width: 100%; height: calc((var(--frame-w) - 22px) * 2.16411 + 22px); background: #0B1920; border-radius: 46px; /* bezel ink behind the screen: sub-pixel gaps read as bezel */ border: 11px solid #0B1920; box-shadow: inset 0 0 0 1.5px rgba(251,249,247,0.08), 0 34px 70px -22px rgba(4, 12, 16, 0.6), 0 12px 30px rgba(4, 12, 16, 0.3); overflow: hidden; text-align: left; }
/* Every screen is a 390x844 logical canvas. Ensemble screens are
   marketing renders: compose to EXACTLY 844px ending at a natural
   boundary - fewer elements, larger type, generous spacing, readable at
   0.5 scale. No fades on ensemble screens; fades are for the Today dock
   pattern only. Nothing may crop, period. */
.screen { width: 390px; height: 844px; transform: scale(var(--screen-scale)); transform-origin: top left; display: flex; flex-direction: column; color: var(--text-primary); border-radius: calc(34px / var(--screen-scale)); overflow: hidden; background: var(--surface-app); }
/* screens are product surfaces: their text never inherits section ink */
.screen p { color: var(--text-primary); max-width: none; }
.hero-device { width: min(235px, 100%); }
@media (max-width: 1100px) and (min-width: 981px) {
  .hero-device { width: min(220px, 100%); }
  .hero-device .phone { --frame-w: 220px; --screen-scale: 0.50769; }
}
@media (max-width: 980px) {
  .hero-device { width: min(250px, 100%); }
  .hero-device .phone { --frame-w: 250px; --screen-scale: 0.58462; }
}
/* Sami section: text beside the quote card */
.sami-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(240px, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.quotecard { background: rgba(246,223,201,0.07); border: 1px solid rgba(246,223,201,0.32); border-radius: var(--radius-sheet); padding: clamp(24px, 3vw, 40px); font-size: clamp(var(--type-19), 2.2vw, var(--type-28)); line-height: 1.4; color: var(--color-dawn-200); }
.quotecard cite { display: block; font-family: var(--font-body); font-style: normal; font-size: var(--type-13); color: var(--ink-light-faint); margin-top: var(--space-3); letter-spacing: 0.06em; }
@media (max-width: 860px) { .sami-grid { grid-template-columns: 1fr; } }

/* Experience: text beside the fanned 3D stack (restored verbatim from
   3f0bbcd - Emilio's chosen arrangement) with two sanctioned changes:
   all phones fully opaque (the 0.9/0.95 element opacity was the
   see-through bug), and stack frames inherit the 235px base width so the
   19px canvas type floor renders >=10px visual at stack scale. */
.exp-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 470px); gap: clamp(32px, 5vw, 72px); align-items: center; }
.stack3d { position: relative; height: 640px; }
.stack3d .phone { position: absolute; }
.stack-a { left: 0; top: 70px; transform: perspective(1100px) rotateY(14deg) rotateZ(-9deg); z-index: 1; }
.stack-b { left: 34%; top: 120px; transform: perspective(1100px) rotateY(9deg) rotateZ(-3deg); z-index: 2; }
.stack-c { right: 0; top: 16px; transform: perspective(1100px) rotateY(-10deg) rotateZ(5deg); z-index: 3; box-shadow: inset 0 0 0 1.5px rgba(251,249,247,0.08), 0 44px 90px -24px rgba(4, 12, 16, 0.7), 0 0 90px rgba(232,168,124,0.12); }
@media (max-width: 980px) { .exp-grid { grid-template-columns: 1fr; } .stack3d { margin: 0 auto; width: 470px; max-width: 100%; transform: scale(0.85); transform-origin: top center; height: 640px; } }
/* Today frame: the dock (entry pill + the locked 4-tab bar) is pinned at
   the frame bottom; the card column above it clips behind the fade. */
.pcontent { flex: 1; min-height: 0; overflow: hidden; position: relative; }
.pcontent::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 72px; background: linear-gradient(180deg, rgba(246,242,239,0), var(--surface-app)); pointer-events: none; }
.pstatus { display: flex; justify-content: space-between; font-size: var(--type-13); padding: 14px 22px 6px; }
.pband { position: relative; background: linear-gradient(180deg, var(--color-water-800) 0%, #2E5A62 30%, #48796F 52%, #B78A68 74%, var(--color-dawn-300) 88%, var(--color-shell-1) 100%); padding: 0 var(--space-5) var(--space-7); color: var(--color-shell-0); }
.pband .pstatus { color: rgba(251,249,247,0.85); margin: 0 -6px var(--space-4); }
.pband h4 { font-family: var(--font-display); font-weight: 700; font-size: var(--type-28); line-height: 1.25; letter-spacing: -0.01em; }
.pband .psub { font-size: var(--type-13); color: rgba(251,249,247,0.85); margin-top: 2px; }
.pchips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.pchip { display: inline-flex; align-items: center; gap: 6px; font-size: var(--type-13); background: rgba(251,249,247,0.16); border-radius: var(--radius-pill); padding: 5px 12px; }
.pmoon { width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 62% 40%, #FDF6EC 55%, #D9CBB8 100%); box-shadow: inset 2px -1px 0 rgba(29,59,71,0.35); }
.porbseat { position: absolute; left: 50%; bottom: -28px; transform: translateX(-50%); }
.porbseat .orb { width: 56px; height: 56px; }
.pcontent { padding: var(--space-8) var(--space-4) var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }
.pcard { background: var(--surface-raised); border-radius: var(--radius-card); box-shadow: var(--shadow-1); padding: var(--space-4); color: var(--text-primary); }
.pcard .kicker { font-size: var(--type-11); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--space-2); }
.pcard p { font-size: var(--type-16); line-height: 1.55; color: var(--text-primary); max-width: none; }
.pconfidence { font-size: var(--type-13); color: var(--color-water-700); margin-top: var(--space-2); }
.pconfidence b { font-weight: 700; }
.plinks { display: flex; gap: var(--space-4); margin-top: var(--space-3); font-size: var(--type-13); }
.plinks span { color: var(--action-text); font-weight: 700; }
.pstarter { border-left: 3px solid var(--color-dawn-400); display: flex; gap: var(--space-3); }
.pstarter .orb { flex: 0 0 20px; margin-top: 3px; }
.pstarter .voice { font-size: var(--type-19); line-height: 1.5; color: var(--text-primary); }
.pactions { display: flex; gap: var(--space-2); margin-top: var(--space-3); }
.pbtn { font-family: var(--font-body); font-size: var(--type-13); font-weight: 700; border-radius: var(--radius-input); padding: 9px 14px; border: 1px solid transparent; }
.pbtn--primary { background: var(--action-primary); color: var(--on-action); }
.pbtn--quiet { background: transparent; color: var(--action-text); border-color: var(--border-soft); }
.pbodyload { background: var(--depth-2); }
.pbodyload .kicker { color: var(--color-water-700); }
.pdock { margin-top: auto; }
.pentry { padding: var(--space-4) var(--space-4) var(--space-3); background: linear-gradient(180deg, rgba(246,242,239,0), var(--color-shell-1) 30%); }
.pentrybar { display: flex; align-items: center; gap: var(--space-3); background: var(--surface-raised); border: 1px solid var(--border-soft); border-radius: var(--radius-pill); box-shadow: var(--shadow-2); padding: 10px 16px; color: var(--text-muted); font-size: var(--type-16); }
.ptabbar { display: flex; background: var(--surface-raised); border-top: 1px solid var(--border-soft); padding: var(--space-2) var(--space-2) var(--space-4); }
.ptab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 0; color: var(--text-muted); font-size: var(--type-11); text-decoration: none; }
.ptab.active { color: var(--action-text); font-weight: 700; }
.pg { width: 20px; height: 20px; position: relative; display: block; }
.pg-today::before { content: ""; position: absolute; top: 2px; left: 6px; width: 8px; height: 8px; border-radius: 50%; border: 2px solid currentColor; }
.pg-today::after { content: ""; position: absolute; bottom: 3px; left: 2px; width: 16px; border-top: 2px solid currentColor; }
.pg-sami { border-radius: var(--radius-pill); background: radial-gradient(circle at 35% 35%, var(--sami-inner), var(--sami-core) 65%, rgba(232,168,124,0) 100%); }
.pg-journal::before { content: ""; position: absolute; top: 1px; left: 4px; width: 12px; height: 16px; border: 2px solid currentColor; border-radius: 3px; }
.pg-journal::after { content: ""; position: absolute; top: 8px; left: 7px; width: 6px; border-top: 2px solid currentColor; }
.pg-you::before { content: ""; position: absolute; top: 1px; left: 6.5px; width: 7px; height: 7px; border-radius: 50%; border: 2px solid currentColor; }
.pg-you::after { content: ""; position: absolute; bottom: 1px; left: 3px; width: 14px; height: 7px; border: 2px solid currentColor; border-bottom: none; border-radius: 7px 7px 0 0; }

/* chat frame */
.pheader { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4); border-bottom: 1px solid var(--border-soft); background: var(--surface-raised); color: var(--text-primary); }
.pheader h4 { font-family: var(--font-display); font-weight: 700; font-size: var(--type-23); flex: 1; }
.plock { font-size: var(--type-11); color: var(--text-muted); background: var(--surface-inset); border-radius: var(--radius-pill); padding: 4px 10px; }
.pthread { flex: 1; min-height: 0; overflow: hidden; position: relative; padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-4); background: var(--surface-app); }
.pthread::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 56px; background: linear-gradient(180deg, rgba(246,242,239,0), var(--surface-app)); pointer-events: none; }
.pmsg-user { align-self: flex-end; max-width: 78%; background: var(--color-tide-200); color: var(--text-primary); border-radius: var(--radius-sheet) var(--radius-sheet) var(--radius-input) var(--radius-sheet); padding: var(--space-3) var(--space-4); font-size: var(--type-16); line-height: 1.55; }
.pmsg-sami { display: flex; gap: var(--space-3); max-width: 95%; }
.pbubble { background: var(--surface-raised); border-radius: var(--radius-sheet) var(--radius-sheet) var(--radius-sheet) var(--radius-input); box-shadow: var(--shadow-1); padding: var(--space-4); flex: 1; color: var(--text-primary); }
.pbubble .voice { font-size: var(--type-19); line-height: 1.5; }
.pbubble p { font-size: var(--type-16); line-height: 1.55; margin-top: var(--space-2); max-width: none; color: var(--text-primary); }
.pevidence { margin-top: var(--space-3); background: var(--insight-tint); border-radius: var(--radius-card); padding: var(--space-3) var(--space-4); }
.pevidence .kicker { font-size: var(--type-11); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-dawn-600); margin-bottom: var(--space-2); }
.psources { font-size: var(--type-13); color: var(--text-secondary); margin-top: var(--space-2); }
.pprovenance { margin-top: var(--space-3); font-size: var(--type-13); color: var(--text-muted); }
.pprovenance span { color: var(--action-text); font-weight: 700; }

/* journal frame */
.pjournal { padding: var(--space-4); background: var(--surface-app); flex: 1; min-height: 0; color: var(--text-primary); display: flex; flex-direction: column; }
.plist { flex: 1; min-height: 0; overflow: hidden; position: relative; }
.plist::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 56px; background: linear-gradient(180deg, rgba(246,242,239,0), var(--surface-app)); pointer-events: none; }
.pjournal h4 { font-family: var(--font-display); font-weight: 700; font-size: var(--type-28); }
.pjsub { font-size: var(--type-13); color: var(--text-muted); margin: 2px 0 var(--space-4); }
.pcomposer { background: var(--surface-raised); border-radius: var(--radius-card); box-shadow: var(--shadow-1); padding: var(--space-4); margin-bottom: var(--space-4); }
.pcomposer .voice { font-size: var(--type-19); color: var(--text-muted); }
.pjentry { background: var(--surface-raised); border-radius: var(--radius-card); box-shadow: var(--shadow-1); padding: var(--space-4); margin-bottom: var(--space-3); }
.pjwhen { display: flex; justify-content: space-between; font-size: var(--type-13); color: var(--text-muted); margin-bottom: var(--space-2); }
.pjkind { font-size: var(--type-11); background: var(--surface-inset); border-radius: var(--radius-pill); padding: 2px 8px; }
.ptoggles { margin-top: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); }
.ptrow { display: flex; justify-content: space-between; align-items: center; font-size: var(--type-13); color: var(--text-secondary); }
.pswitch { width: 38px; height: 22px; border-radius: var(--radius-pill); background: var(--border-soft); position: relative; flex: 0 0 38px; }
.pswitch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--surface-raised); box-shadow: var(--shadow-1); }
.pswitch.on { background: var(--action-primary); }
.pswitch.on::after { left: 18px; }
.pveil { background: var(--surface-inset); border-radius: var(--radius-input); height: 110px; background-image: repeating-linear-gradient(45deg, rgba(143,166,172,0.18) 0 8px, transparent 8px 16px); }
.pveilnote { font-size: var(--type-13); color: var(--text-muted); margin-top: var(--space-2); }


/* --------------------------------------------------------------------------
   Pillars — quiet bordered cards
   -------------------------------------------------------------------------- */
.pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-5); margin-top: var(--space-6); }
.pillar { background: rgba(251,249,247,0.04); border: 1px solid rgba(251,249,247,0.14); border-radius: var(--radius-sheet); padding: var(--space-6); }
.pillar h3 { color: var(--ink-light); }
.pillar p { font-size: var(--type-16); color: var(--ink-light-soft); }
.pillar .ask { display: inline-block; margin-top: var(--space-4); font-size: var(--type-13); font-weight: 700; color: var(--color-dawn-200); border: 1px dashed rgba(246,223,201,0.5); border-radius: var(--radius-pill); padding: 6px 14px; }

/* --------------------------------------------------------------------------
   Principles — modest numerals, editorial rhythm
   -------------------------------------------------------------------------- */
.principles { display: flex; flex-direction: column; gap: clamp(24px, 4vh, 40px); margin-top: var(--space-5); max-width: 800px; }
.principle { display: flex; gap: clamp(24px, 4vw, 48px); align-items: baseline; }
.principle .mark { font-family: var(--font-display); font-weight: 700; font-size: var(--type-33); color: var(--color-dawn-200); opacity: 0.55; white-space: nowrap; min-width: 2em; text-align: right; }
.principle h3 { color: var(--ink-light); margin-bottom: var(--space-2); font-size: var(--type-28); }
.principle p { color: var(--ink-light-soft); }

/* --------------------------------------------------------------------------
   Company + waitlist
   -------------------------------------------------------------------------- */
.company-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-5); max-width: 720px; }
.waitlist-card { background: var(--surface-raised); border: 1px solid var(--border-soft); border-radius: var(--radius-sheet); box-shadow: var(--shadow-3); padding: clamp(var(--space-6), 5vw, var(--space-8)); max-width: 640px; margin-top: var(--space-6); }
.wl-form { display: flex; gap: var(--space-3); margin-top: var(--space-5); flex-wrap: wrap; }
.wl-form input[type="email"] { flex: 1 1 260px; font-family: var(--font-body); font-size: var(--type-16); padding: 14px 18px; border: 1px solid var(--border-soft); border-radius: var(--radius-input); background: var(--surface-app); color: var(--text-primary); }
.wl-form input[type="email"]::placeholder { color: var(--text-muted); }
.wl-form button { font-family: var(--font-body); font-size: var(--type-16); font-weight: 700; padding: 14px 26px; border: none; border-radius: var(--radius-input); background: var(--action-primary); color: var(--on-action); cursor: pointer; transition: transform var(--motion-fast) var(--ease-settle), box-shadow var(--motion-fast) var(--ease-settle); }
.wl-form button:hover { box-shadow: 0 6px 20px rgba(62,124,116,0.35); }
.wl-form button:active { transform: scale(0.98); }
.wl-note { font-size: var(--type-13); color: var(--text-muted); margin-top: var(--space-4); line-height: 1.55; }
.wl-note a { color: var(--action-text); font-weight: 700; text-decoration: none; }
.wl-status { font-size: var(--type-16); margin-top: var(--space-4); color: var(--action-text); font-weight: 700; min-height: 1.4em; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer { padding: var(--space-7) var(--space-5); }
.footer-inner { max-width: 1040px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: var(--space-5); justify-content: space-between; align-items: center; color: var(--text-muted); font-size: var(--type-13); }
.footer-inner a { color: var(--action-text); text-decoration: none; font-weight: 700; }
.footer-links { display: flex; gap: var(--space-5); }

/* --------------------------------------------------------------------------
   Legal pages
   -------------------------------------------------------------------------- */
.legal-body { background: var(--color-shell-1); color: var(--text-primary); min-height: 100vh; }
.legal-wrap { max-width: 760px; margin: 0 auto; padding: var(--space-7) var(--space-5) var(--space-8); }
.legal-wrap h1 { font-size: clamp(var(--type-33), 5vw, var(--type-48)); margin-bottom: var(--space-4); max-width: none; }
.legal-wrap h2 { font-size: var(--type-23); margin: var(--space-6) 0 var(--space-3); max-width: none; }
.legal-wrap p, .legal-wrap li { color: var(--text-secondary); }
.legal-wrap ul { padding-left: var(--space-5); margin-top: var(--space-3); }
.legal-wrap li { margin-bottom: var(--space-2); line-height: 1.6; }
.counsel-banner { background: var(--insight-tint); border: 1px solid var(--color-dawn-300); border-radius: var(--radius-card); padding: var(--space-4) var(--space-5); font-size: var(--type-13); color: var(--color-water-700); margin-bottom: var(--space-6); line-height: 1.55; }
.legal-updated { font-size: var(--type-13); color: var(--text-muted); margin-bottom: var(--space-6); }
.legal-home { display: inline-block; margin-bottom: var(--space-6); font-size: var(--type-13); font-weight: 700; color: var(--action-text); text-decoration: none; }
.counsel-mark { background: var(--surface-inset); border-radius: 4px; padding: 1px 6px; font-size: 0.92em; }

/* --------------------------------------------------------------------------
   Reduced motion — token rule: all non-essential motion removed
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  .orb, .rail a.active .dot { opacity: 1; }
}

@media (max-width: 640px) {
  .sec { padding-left: var(--space-4); padding-right: var(--space-4); }
  .principle { flex-direction: column; gap: var(--space-2); }
  .principle .mark { text-align: left; min-width: 0; }
}

/* --------------------------------------------------------------------------
   "Why this?" screen — the provenance sheet behind every insight
   -------------------------------------------------------------------------- */
.pwhy { padding: var(--space-4); background: var(--surface-app); flex: 1; min-height: 0; color: var(--text-primary); display: flex; flex-direction: column; }
.pwhy-body { flex: 1; min-height: 0; overflow: hidden; position: relative; }
.pwhy-body::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 56px; background: linear-gradient(180deg, rgba(246,242,239,0), var(--surface-app)); pointer-events: none; }
.pwhy-head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.pback { width: 12px; height: 12px; border-left: 2.5px solid var(--action-text); border-bottom: 2.5px solid var(--action-text); transform: rotate(45deg); flex: 0 0 12px; }
.pwhy-head h4 { font-family: var(--font-display); font-weight: 700; font-size: var(--type-23); }
.pwhy-label { font-size: var(--type-11); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); margin: var(--space-4) 0 var(--space-2); }
.psrc { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); background: var(--surface-raised); border-radius: var(--radius-card); box-shadow: var(--shadow-1); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-2); font-size: var(--type-16); }
.psrc .n { color: var(--text-muted); font-size: var(--type-13); white-space: nowrap; }
.psrc--off { background: var(--surface-inset); box-shadow: none; color: var(--text-secondary); }

/* --------------------------------------------------------------------------
   Ensemble marketing-render composition (scoped to the stack): 19px body
   floor, 28px headers, no fades, last element pinned to the bottom
   padding so every screen ends deliberately.
   -------------------------------------------------------------------------- */
.stack3d .pthread::after, .stack3d .plist::after, .stack3d .pwhy-body::after { display: none; }
.stack3d .pentry { display: none; }
.stack3d .pheader { padding: var(--space-5); }
.stack3d .pheader h4 { font-size: var(--type-28); }
.stack3d .plock { font-size: 18px; }
.stack3d .pthread { padding: var(--space-5); gap: var(--space-5); }
.stack3d .pmsg-user { font-size: var(--type-19); padding: var(--space-4); }
.stack3d .pbubble .voice { font-size: var(--type-23); }
.stack3d .pbubble p { font-size: var(--type-19); }
.stack3d .pevidence { padding: var(--space-4); }
.stack3d .kicker { font-size: 18px; }
.stack3d .pconfidence { font-size: var(--type-19); }
.stack3d .psources { font-size: 18px; }
.stack3d .plinks { font-size: 18px; }
.stack3d .pprovenance { font-size: 18px; margin-top: auto; }
.stack3d .pjournal { padding: var(--space-5); }
.stack3d .pjournal h4 { font-size: var(--type-28); }
.stack3d .pjsub { font-size: 18px; }
.stack3d .pcomposer { padding: var(--space-4); }
.stack3d .pcomposer .voice { font-size: var(--type-23); }
.stack3d .plist { display: flex; flex-direction: column; overflow: visible; }
.stack3d .pjentry { padding: var(--space-4); }
.stack3d .pjentry p { font-size: var(--type-19); }
.stack3d .pjwhen { font-size: 18px; }
.stack3d .pjkind { font-size: 18px; }
.stack3d .ptrow { font-size: 18px; }
.stack3d .plist .pjentry:last-child { margin-top: auto; }
.stack3d .pveil { height: 200px; }
.stack3d .pveilnote { font-size: 18px; }
.stack3d .pwhy { padding: var(--space-5); }
.stack3d .pwhy-head h4 { font-size: var(--type-28); }
.stack3d .pwhy-body { display: flex; flex-direction: column; overflow: visible; }
.stack3d .pwhy .pcard { padding: var(--space-4); }
.stack3d .pwhy .pcard p { font-size: var(--type-19); }
.stack3d .pwhy-label { font-size: 18px; margin: var(--space-4) 0 var(--space-2); }
.stack3d .psrc { font-size: var(--type-19); padding: var(--space-4); }
.stack3d .psrc .n { font-size: 18px; }
.stack3d .pwhy .plinks { margin-top: auto; }

/* --------------------------------------------------------------------------
   v2: hero video layer. Owned Higgsfield media, audio stripped at the track
   level (muted attribute is belt-and-braces). The Quiet Horizon treatment
   sits ABOVE the footage: desaturating grade on the video element, then the
   water/dawn gradient wash, then a left scrim guaranteeing headline
   contrast; the Band seam and orb stay on top. One media moment; nothing
   else in the section changes.
   -------------------------------------------------------------------------- */
#horizon { overflow: hidden; min-height: 100vh; min-height: 100svh; }
.hero-grid { align-content: center; margin-block: auto; }
.hero-video { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; }
/* video visibility tuning: brightness + wash/scrim alphas - adjust these
   three values only. */
.hero-video { --hero-video-brightness: 1; --hero-scrim-alpha: 0.59; --hero-wash-alpha: 0.62; }
.hero-video video { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.6) contrast(1.06) brightness(var(--hero-video-brightness)); animation: heroDrift 40s var(--ease-drift) infinite alternate; }
.hero-video::after { content: ""; position: absolute; inset: 0; background:
  linear-gradient(90deg, rgba(10,23,29,var(--hero-scrim-alpha)) 0%, rgba(10,23,29,0.32) 48%, rgba(10,23,29,0.09) 100%),
  linear-gradient(180deg, rgba(10,23,29,var(--hero-wash-alpha)) 0%, rgba(29,59,71,0.37) 45%, rgba(46,90,98,0.28) 72%, rgba(240,190,149,0.19) 87%, rgba(10,23,29,0.68) 100%); }
@keyframes heroDrift { from { transform: scale(1); } to { transform: scale(1.06); } }
.hero-top { position: relative; z-index: 2; }
@media (prefers-reduced-motion: reduce) {
  .hero-video video { display: none; animation: none; }
}

/* Large displays: one deliberate step up, nothing else grows. The 83px
   ceiling is the next documented step of the 1.2 minor-third display
   extension (16 * 1.2^9 = 82.6 -> 83). */
@media (min-width: 1600px) {
  .hero-grid { max-width: 1240px; }
  /* the knobs are a TRIPLE: container cap + --frame-w + --screen-scale
     move together (a frame sized 265 inside a 235 container right-crops
     the canvas and breaks the device proportion) */
  .hero-device { width: min(265px, 100%); }
  .hero-device .phone { --frame-w: 265px; --screen-scale: 0.62308; }
  h1 { font-size: clamp(var(--type-40), 5.4vw, 83px); }
}

/* Section-per-viewport (desktop): each content section owns the viewport
   and centers its content; centering replaces padding as the spacing
   mechanism. Mobile/tablet keeps natural flow. */
@media (min-width: 981px) {
  #why, #sami, #experience, #different, #principles, #company, #waitlist {
    min-height: 100vh; min-height: 100svh;
    display: flex; flex-direction: column; justify-content: center;
  }
  .sec-inner { width: 100%; }
}

/* Short desktop viewports (laptop-class, ~650-860px inner height): the
   stack steps down so heading + fanned phones fit one viewport, and the
   company dawn entrance tightens so its closing line clears the fold.
   Scoped to the two sections that crop; everything else stays. */
@media (min-width: 981px) and (max-height: 860px) {
  .stack3d { transform: scale(0.8); transform-origin: center; height: 512px; }
  #company { padding-top: clamp(64px, 8vh, 96px); }
}