/* Sadorra — sadorra.app
 * One stylesheet, no build step, no framework.
 *
 * Structure: tokens → base → layout primitives → components → sections →
 * responsive → motion. Sections are self-contained: a section's rules live in
 * one block and use only tokens, so a section can be lifted into a future page
 * (or dropped) without touching anything else.
 *
 * Bump ?v= in every <link>/<script> reference when you change this file.
 */

/* Plus Jakarta Sans — the brand typeface (Sadorra Media Package, 21_typography).
 * Self-hosted latin subset of the variable font, Google's own build, served from
 * this origin so the page makes no third-party request. If the copy ever needs
 * Cyrillic/Greek, add those subsets as separate @font-face blocks with their own
 * unicode-range rather than swapping in one bigger file. */
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/fonts/jakarta-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ─────────────────────── tokens ─────────────────────── */
/* Sadorra Media Package palette (20_color_palette), on a white page:
 *   Midnight #0D1B2A · Charcoal #111827 · Sadorra Blue #3B82F6
 *   Sadorra Purple #8B5CF6 · Sadorra Teal #2DD4BF · Light Gray #E5E7EB
 *
 * The three accents were chosen against a dark background and two of them do
 * not survive the flip: on white, Blue is 3.7:1 and Purple 4.0:1 — both under
 * AA for body text — and Teal is 1.8:1, which is decorative-only at any size.
 * So there are two tiers. The brand hues fill, border, and set gradients and
 * headings (large text only needs 3:1); --blue-ink / --purple-ink are their
 * darkened counterparts and are the ONLY ones allowed on small text.
 *
 * Two regions invert back to Midnight — the nav bar and the Dorra band. They
 * redefine these same tokens in their own scope rather than restating rules,
 * so anything dropped inside them recolours itself. */
:root {
  /* Base */
  --bg:            #FFFFFF;
  --bg-raised:     #F7F9FC;
  --surface:       #FFFFFF;
  --surface-2:     #F4F7FB;
  --midnight:      #0D1B2A;
  --charcoal:      #111827;
  --line:          rgba(13, 27, 42, 0.10);
  --line-strong:   rgba(13, 27, 42, 0.18);

  /* Text */
  --text:          #0D1B2A;   /* Midnight — headings and body */
  --text-soft:     #364354;
  --text-muted:    #55637A;
  --text-faint:    #63708A;   /* AA floor for small text — 5.0:1 on white, 4.7:1 on --bg-raised */

  /* Accent — fills, borders, gradients, large type */
  --blue:          #3B82F6;
  --indigo:        #636FF6;
  --purple:        #8B5CF6;
  --teal:          #2DD4BF;
  --accent-grad:   linear-gradient(100deg, var(--blue), var(--indigo) 52%, var(--purple));

  /* Accent, text-safe — small text, links, labels */
  --blue-ink:      #1D4ED8;   /* 6.4:1 on white */
  --purple-ink:    #6D28D9;   /* 6.9:1 on white */

  /* Dorra */
  --dorra:       #6D28D9;   /* on white; the dark band overrides to #A78BFA */
  --dorra-soft:  rgba(139, 92, 246, 0.10);

  /* Semantic. Teal doubles as "clear"; amber is the one colour outside the
     palette, because approval states need a warning hue and none exists in it. */
  --ok:            #0B7D6E;   /* darkened Teal — the brand one is 1.8:1 on white */
  --warn:          #9A5A00;   /* darkened amber; the fills keep the lighter hue */

  /* Type */
  --font: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Rhythm */
  --wrap: 1160px;
  --pad: 24px;
  --r-sm: 8px;
  --r: 14px;
  --r-lg: 20px;
  --section-y: 116px;

  --shadow: 0 18px 44px -26px rgba(13, 27, 42, 0.35);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* The two inverted regions. Redefining the tokens is the whole mechanism —
   don't restate colours on the rules inside them. */
.nav, .nav-shell, .mobile-drawer, .dorra {
  --bg:          #0D1B2A;
  --bg-raised:   #101F30;
  --surface:     #142334;
  --surface-2:   #1A2A3D;
  --line:        rgba(229, 231, 235, 0.10);
  --line-strong: rgba(229, 231, 235, 0.20);
  --text:        #E5E7EB;
  --text-soft:   #BAC5D4;
  --text-muted:  #97A3B6;
  --text-faint:  #8B98AC;
  --blue-ink:    #7FB2FF;
  --purple-ink:  #C4A6FF;
  --dorra:     #A78BFA;
  --dorra-soft: rgba(139, 92, 246, 0.16);
  --ok:          #2DD4BF;
  --warn:        #EFB45C;
  color: var(--text);
}

/* ─────────────────────────── base ─────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  margin: 0 0 0.5em;
  line-height: 1.12;
  letter-spacing: -0.03em;
  font-weight: 600;
}

h1 { font-size: clamp(2.4rem, 5.6vw, 4.05rem); letter-spacing: -0.04em; }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.75rem); }
h3 { font-size: 1.14rem; letter-spacing: -0.02em; }

p { margin: 0 0 1.1em; color: var(--text-soft); }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration: none; }

img, svg { max-width: 100%; height: auto; display: block; }

::selection { background: rgba(99, 111, 246, 0.34); }

:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 12px;
  z-index: 200;
  padding: 10px 16px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  font-size: 0.9rem;
}
.skip-link:focus { left: 16px; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ─────────────────────── layout primitives ─────────────────────── */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--pad);
}

section { position: relative; }

.section { padding: var(--section-y) 0; }
.section--tight { padding: calc(var(--section-y) * 0.72) 0; }

.section-head { max-width: 720px; margin-bottom: 56px; }
.section-head p { font-size: 1.06rem; color: var(--text-muted); }

.eyebrow {
  display: inline-block;
  margin-bottom: 18px;
  font-size: 0.735rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.rule {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-strong) 18%, var(--line-strong) 82%, transparent);
  border: 0;
  margin: 0;
}

.grad-text {
  background: var(--accent-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ─────────────────────────── buttons ─────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 13px 24px;
  border: 1px solid transparent;
  border-radius: 10px;
  font: inherit;
  font-size: 0.97rem;
  font-weight: 550;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: transform 0.22s var(--ease), background 0.22s var(--ease),
              border-color 0.22s var(--ease), box-shadow 0.22s var(--ease);
}

.btn-primary {
  background: var(--accent-grad);
  color: #fff;
  box-shadow: 0 10px 34px -14px rgba(99, 111, 246, 0.85);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 16px 40px -14px rgba(99, 111, 246, 0.95); }

.btn-ghost {
  background: rgba(13, 27, 42, 0.025);
  border-color: var(--line-strong);
  color: var(--text);
}
.btn-ghost:hover { background: rgba(13, 27, 42, 0.05); border-color: rgba(13, 27, 42, 0.3); }

.btn-block { width: 100%; }

/* Status pill — "Coming Soon", with a slow breathing dot. */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 6px 14px 6px 11px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: rgba(13, 27, 42, 0.02);
  font-size: 0.79rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--text-soft);
  white-space: nowrap;
}
.status-pill .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 0 0 rgba(45, 212, 191, 0.5);
  animation: breathe 3.2s ease-in-out infinite;
}
@keyframes breathe {
  0%, 100% { box-shadow: 0 0 0 0 rgba(45, 212, 191, 0.45); opacity: 1; }
  50%      { box-shadow: 0 0 0 6px rgba(45, 212, 191, 0); opacity: 0.55; }
}

/* ─────────────────────────── nav ─────────────────────────── */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: 68px;
  padding: 0 var(--pad);
  max-width: var(--wrap);
  margin: 0 auto;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease);
}
.nav-shell {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 99;
  height: 68px;
  background: var(--bg);
  border-bottom: 1px solid rgba(13, 27, 42, 0.9);
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease),
              backdrop-filter 0.3s var(--ease);
}
/* The bar is opaque from the start; scrolled only adds the shadow that
   separates it from the white page beneath. */
.nav-shell.is-scrolled { box-shadow: 0 10px 30px -22px rgba(13, 27, 42, 0.8); }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
}
/* The lockup is two files: the gradient emblem, which works on any background,
   and the wordmark, which ships in a light and a dark fill because an <img>
   cannot inherit currentColor. Both are sized by height. */
.brand .mark { width: auto; height: 30px; flex: none; }
.brand .wordmark { width: auto; height: 18px; flex: none; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 30px;
  font-size: 0.925rem;
  color: var(--text-muted);
}
.nav-links a { transition: color 0.2s var(--ease); }
.nav-links a:hover { color: var(--text); }
.nav-links .nav-cta {
  padding: 9px 17px;
  min-height: 0;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  color: var(--text);
  background: rgba(229, 231, 235, 0.04);
}
.nav-links .nav-cta:hover { background: rgba(229, 231, 235, 0.08); }
.nav-links .nav-pill { pointer-events: none; }

.nav-toggle {
  display: none;
  width: 42px; height: 42px;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  cursor: pointer;
}
.nav-toggle-bars { display: block; width: 17px; }
.nav-toggle-bars span {
  display: block;
  height: 1.5px;
  background: var(--text);
  border-radius: 2px;
  transition: transform 0.25s var(--ease), opacity 0.2s var(--ease);
}
.nav-toggle-bars span + span { margin-top: 4.5px; }
.nav-toggle.is-open .nav-toggle-bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle.is-open .nav-toggle-bars span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open .nav-toggle-bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.mobile-drawer {
  position: fixed;
  top: 68px; left: 0; right: 0;
  z-index: 98;
  display: none;
  flex-direction: column;
  gap: 2px;
  padding: 14px var(--pad) 26px;
  background: var(--bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.mobile-drawer.is-open { display: flex; }
.mobile-drawer a {
  padding: 15px 4px;
  font-size: 1.06rem;
  color: var(--text-soft);
  border-bottom: 1px solid var(--line);
}
.mobile-drawer a:last-child { border-bottom: 0; }
.mobile-drawer .mobile-cta {
  margin-top: 18px;
  padding: 15px;
  text-align: center;
  border: 0;
  border-radius: 10px;
  background: var(--accent-grad);
  color: #fff;
  font-weight: 550;
}

/* ─────────────────────────── hero ─────────────────────────── */
.hero {
  position: relative;
  padding: 168px 0 96px;
  overflow: hidden;
}
/* Two slow-drifting radial fields. No image, no library — just light. */
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
}
.hero::before {
  width: 820px; height: 660px;
  top: -190px; left: 50%;
  margin-left: -620px;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.16), transparent 68%);
  animation: drift-a 22s ease-in-out infinite alternate;
}
.hero::after {
  width: 760px; height: 600px;
  top: -120px; left: 50%;
  margin-left: -60px;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.15), transparent 68%);
  animation: drift-b 26s ease-in-out infinite alternate;
}
@keyframes drift-a { to { transform: translate3d(70px, 46px, 0) scale(1.09); } }
@keyframes drift-b { to { transform: translate3d(-60px, 34px, 0) scale(1.06); } }

.hero .wrap { position: relative; z-index: 1; }
.hero-inner { max-width: 1000px; }
/* The hero tagline breaks with a <br>, not a block span: background-clip: text
   on a block clips the descenders of the line above and its own. */
/* Interior pages use the hero for a title block only — no CTAs, no expansion
   strip — so it does not need the landing page's bottom air. */
.hero--page { padding-bottom: 34px; }
.hero h1 { margin-bottom: 24px; }
.hero-sub {
  max-width: 640px;
  font-size: clamp(1.04rem, 1.55vw, 1.2rem);
  color: var(--text-soft);
  margin-bottom: 38px;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 46px;
}
.hero-pill { margin-bottom: 26px; }

/* ────────────────────── acronym / meaning ────────────────────── */
.acronym {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--surface), var(--bg-raised));
  overflow: hidden;
}
.acronym-cell {
  padding: 34px 18px 30px;
  border-right: 1px solid var(--line);
  text-align: center;
  transition: background 0.3s var(--ease);
}
.acronym-cell:last-child { border-right: 0; }
.acronym-cell:hover { background: rgba(13, 27, 42, 0.02); }
.acronym-cell .letter {
  display: block;
  font-size: 2.55rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  background: var(--accent-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 12px;
}
.acronym-cell .word {
  display: block;
  font-size: 0.83rem;
  letter-spacing: 0.02em;
  color: var(--text-muted);
}
/* The four ideas the seven letters group into. */
.acronym-cell[data-pair-end="true"] { border-right-color: var(--line-strong); }

/* Each cell clips its own background to its letter, so a single gradient across
   the row is not possible — stepping the colour along the same ramp reads the
   same and survives any reflow. These MUST set background-image, not the
   background shorthand: the shorthand resets background-clip back to
   border-box and the letters paint as solid filled rectangles. */
.acronym-cell:nth-child(1) .letter { background-image: linear-gradient(#3B82F6, #3B82F6); }
.acronym-cell:nth-child(2) .letter { background-image: linear-gradient(#487CF6, #487CF6); }
.acronym-cell:nth-child(3) .letter { background-image: linear-gradient(#5576F6, #5576F6); }
.acronym-cell:nth-child(4) .letter { background-image: linear-gradient(#6371F6, #6371F6); }
.acronym-cell:nth-child(5) .letter { background-image: linear-gradient(#706BF6, #706BF6); }
.acronym-cell:nth-child(6) .letter { background-image: linear-gradient(#7E65F6, #7E65F6); }
.acronym-cell:nth-child(7) .letter { background-image: linear-gradient(#8B5CF6, #8B5CF6); }
.acronym-note { margin-top: 14px; max-width: 640px; color: var(--text-muted); }

@media (max-width: 980px) {
}
@media (max-width: 640px) {
}

/* ───────────────────────── Dorra ───────────────────────── */
.dorra {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(900px 460px at 78% 12%, rgba(139, 92, 246, 0.17), transparent 70%),
    radial-gradient(700px 420px at 12% 88%, rgba(45, 212, 191, 0.08), transparent 70%),
    var(--bg-raised);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.dorra .wrap { position: relative; z-index: 1; }
.dorra-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.dorra h2 { margin-bottom: 6px; }
.dorra .subhead {
  font-size: 1.22rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--dorra);
  margin-bottom: 22px;
}
.dorra .aka {
  margin-top: 26px;
  font-size: 0.92rem;
  color: var(--text-faint);
}

.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  padding: 11px 16px;
  border: 1px solid rgba(167, 139, 250, 0.24);
  border-radius: 999px;
  background: rgba(139, 92, 246, 0.07);
  font-size: 0.9rem;
  color: var(--text-soft);
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease), transform 0.25s var(--ease);
}
.chip:hover {
  border-color: rgba(167, 139, 250, 0.5);
  background: rgba(139, 92, 246, 0.14);
  transform: translateY(-2px);
}

.dorra-panel {
  padding: 24px;
  border: 1px solid rgba(167, 139, 250, 0.22);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(26, 24, 54, 0.92), rgba(16, 31, 48, 0.86));
  box-shadow: var(--shadow);
}
.dorra-panel-head {
  display: flex;
  align-items: center;
  gap: 11px;
  padding-bottom: 16px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--line);
  font-size: 0.9rem;
  font-weight: 550;
}
.dorra-orb {
  position: relative;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, #DDD2FF, var(--purple) 58%, #3A2A6E);
  box-shadow: 0 0 16px rgba(139, 92, 246, 0.55);
}
.dorra-orb::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1px solid rgba(167, 139, 250, 0.35);
  animation: orb-pulse 3s ease-in-out infinite;
}
@keyframes orb-pulse {
  0%, 100% { transform: scale(1); opacity: 0.75; }
  50%      { transform: scale(1.22); opacity: 0; }
}
.dorra-msg {
  padding: 14px 16px;
  border-radius: 12px;
  font-size: 0.93rem;
  line-height: 1.55;
}
.dorra-msg + .dorra-msg { margin-top: 10px; }
.dorra-msg.from-user {
  background: rgba(229, 231, 235, 0.045);
  border: 1px solid var(--line);
  color: var(--text-soft);
  margin-left: 18%;
}
.dorra-msg.from-ai {
  background: rgba(139, 92, 246, 0.11);
  border: 1px solid rgba(167, 139, 250, 0.2);
  color: var(--text);
  margin-right: 10%;
}
.dorra-msg .who {
  display: block;
  margin-bottom: 5px;
  font-size: 0.7rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-faint);
}
@keyframes typing {
  0%, 100% { opacity: 0.28; transform: translateY(0); }
  50%      { opacity: 1;    transform: translateY(-3px); }
}

/* ─────────────────────────── early access ─────────────────────────── */
.access {
  border-top: 1px solid var(--line);
  background:
    radial-gradient(760px 400px at 50% 0%, rgba(99, 111, 246, 0.07), transparent 70%),
    var(--bg);
}
.access-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}
.form-card {
  padding: 30px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--surface), var(--bg-raised));
  box-shadow: var(--shadow);
}
.field { margin-bottom: 16px; }
.field label {
  display: block;
  margin-bottom: 7px;
  font-size: 0.83rem;
  font-weight: 500;
  color: var(--text-soft);
}
.field .opt { color: var(--text-faint); font-weight: 400; }
.field input,
.field select {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: rgba(13, 27, 42, 0.025);
  color: var(--text);
  font: inherit;
  font-size: 0.95rem;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.field select {
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
                    linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
  background-position: calc(100% - 19px) 21px, calc(100% - 14px) 21px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.field input::placeholder { color: var(--text-faint); }
.field input:hover, .field select:hover { border-color: rgba(13, 27, 42, 0.32); }
.field input:focus, .field select:focus {
  border-color: var(--blue);
  background: #fff;
  outline: none;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.16);
}
.form-note { margin-top: 14px; font-size: 0.8rem; color: var(--text-faint); text-align: center; }

.form-status {
  margin-top: 14px;
  font-size: 0.9rem;
  min-height: 1.4em;
}
.form-status.is-error { color: var(--warn); }
.form-status.is-ok { color: var(--ok); }

.form-done { text-align: center; padding: 22px 6px; }
.form-done .tick {
  width: 44px; height: 44px;
  margin: 0 auto 16px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(45, 212, 191, 0.4);
  background: rgba(45, 212, 191, 0.1);
  color: var(--ok);
  font-size: 1.1rem;
}

.access-points { list-style: none; margin: 28px 0 0; padding: 0; }
.access-points li {
  position: relative;
  padding: 0 0 0 22px;
  margin-bottom: 12px;
  font-size: 0.95rem;
  color: var(--text-muted);
}
.access-points li::before {
  content: "";
  position: absolute;
  left: 2px; top: 9px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent-grad);
}

/* ─────────────────────────── footer ─────────────────────────── */
.footer {
  padding: 56px 0 44px;
  border-top: 1px solid var(--line);
  background: var(--bg);
  font-size: 0.9rem;
  color: var(--text-faint);
}
.footer-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 26px;
  padding-bottom: 30px;
  border-bottom: 1px solid var(--line);
}
.footer .brand { color: var(--text); }
.footer-tagline { margin-top: 9px; max-width: 380px; font-size: 0.87rem; color: var(--text-faint); }
.footer-links { display: flex; flex-wrap: wrap; gap: 12px 26px; align-items: flex-start; }
.footer-links a { display: inline-block; padding: 8px 0; color: var(--text-muted); }
.footer-links a:hover { color: var(--text); }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  padding-top: 22px;
  font-size: 0.84rem;
}

/* ─────────────────────────── responsive ─────────────────────────── */
@media (max-width: 980px) {
  :root { --section-y: 88px; }
  .dorra-grid, .access-grid { grid-template-columns: 1fr; gap: 44px; }
  .acronym { grid-template-columns: repeat(4, 1fr); }
  .acronym-cell { border-bottom: 1px solid var(--line); }
  .acronym-cell:nth-child(4n) { border-right: 0; }
  .acronym-cell:nth-last-child(-n+3) { border-bottom: 0; }
}

@media (max-width: 860px) {
  .nav-links { display: none; }
  .nav-toggle { display: inline-flex; }
  .hero { padding: 138px 0 76px; }
}

@media (max-width: 640px) {
  :root { --pad: 20px; --section-y: 72px; }
  body { font-size: 16px; }
  h1 { font-size: clamp(2.05rem, 8.6vw, 2.6rem); }
  .hero { padding: 122px 0 64px; }
  .hero-sub { font-size: 1.02rem; }
  .hero-actions { gap: 10px; }
  .hero-actions .btn { width: 100%; }
  .hero-expansion { flex-direction: column; align-items: flex-start; gap: 10px; }
  .hero-expansion span { flex-wrap: wrap; gap: 10px; }
  .acronym { grid-template-columns: repeat(2, 1fr); }
  .acronym-cell { padding: 24px 12px 22px; }
  .acronym-cell:nth-child(2n) { border-right: 0; }
  .acronym-cell:nth-child(4n) { border-right: 0; }
  .acronym-cell:nth-last-child(-n+3) { border-bottom: 1px solid var(--line); }
  .acronym-cell:last-child { grid-column: 1 / -1; border-right: 0; border-bottom: 0; }
  .acronym-cell .letter { font-size: 2.1rem; }
  .dorra-msg.from-user { margin-left: 8%; }
  .dorra-msg.from-ai { margin-right: 0; }
  .form-card { padding: 22px 18px; }
  /* The breadcrumb wraps on a phone; let the tag drop to its own line rather
     than squeezing into a two-line pill. */
  .footer-top { flex-direction: column; }
}

/* ─────────────────────────── motion ─────────────────────────── */
.fade-up {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.fade-up.is-visible { opacity: 1; transform: none; }
.fade-up[data-delay="1"] { transition-delay: 0.08s; }
.fade-up[data-delay="2"] { transition-delay: 0.16s; }
.fade-up[data-delay="3"] { transition-delay: 0.24s; }
.fade-up[data-delay="4"] { transition-delay: 0.32s; }

/* Without JS nothing adds .is-visible, so the whole page would render blank.
 * The CSP forbids inline scripts (the usual html.no-js trick), so the escape
 * hatch is CSS: a <noscript> style block in the head plus the scripting media
 * feature, either of which reveals everything. */
@media (scripting: none) {
  .fade-up { opacity: 1; transform: none; }
}

/* Every animation on this page is decorative. Under reduced-motion the page
 * must still be fully readable, so .fade-up resets to visible rather than
 * relying on JS having run. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .fade-up { opacity: 1; transform: none; }
}

/* ────────────────────────── roadmap (/roadmap) ──────────────────────────
 * Three states — Built, In build, Planned. It began as Now/Next/Later when
 * nothing existed; there is now a lot built, and naming that is the whole
 * point of the page. "Built" deliberately does not say "shipped" or
 * "available": it means working and verified, not generally available.
 */
.rm-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  max-width: 620px;
  margin-bottom: 64px;
}
.rm-stat {
  padding: 18px 20px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(13, 27, 42, 0.04);
}
.rm-stat b {
  display: block;
  font-size: 1.85rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 8px;
  color: var(--rm-accent, var(--text));
}
.rm-stat span {
  font-size: 0.73rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.rm-section { margin-bottom: 68px; }
.rm-section:last-of-type { margin-bottom: 0; }
.rm-section--built   { --rm-accent: var(--blue); }
.rm-section--build   { --rm-accent: var(--purple); }
.rm-section--planned { --rm-accent: var(--text-muted); }

.rm-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding-bottom: 13px;
  margin-bottom: 24px;
  border-bottom: 2px solid var(--rm-accent);
}
.rm-head h2 { font-size: 1.3rem; margin: 0; letter-spacing: -0.025em; }
.rm-head .count { font-size: 0.82rem; color: var(--text-faint); }
.rm-head .dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--rm-accent);
  align-self: center;
}

/* Built is grouped by area, because sixteen loose cards read as a list of
   parts rather than a working product. */
.rm-groups {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  align-items: start;
}
.rm-group {
  --rm-accent: var(--blue-ink);
  position: relative;
  padding: 24px 24px 20px;
  border: 1px solid var(--line);
  border-top: 3px solid var(--rm-accent);
  border-radius: var(--r);
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(13, 27, 42, 0.04);
}
.rm-group h3 {
  display: flex; align-items: center; gap: 9px;
  font-size: 1.06rem; margin-bottom: 16px;
  padding-bottom: 12px; border-bottom: 1px solid var(--line);
}
.rm-n {
  margin-left: auto;
  font-size: 0.72rem; font-weight: 600; font-variant-numeric: tabular-nums;
  color: var(--rm-accent);
  background: color-mix(in srgb, var(--rm-accent) 11%, transparent);
  border-radius: 999px; padding: 2px 8px;
}
.rm-group h3 { color: var(--rm-accent); }
.rm-group li b { color: var(--text); font-weight: 600; }
.rm-group li b::after { content: " — "; color: var(--text-faint); font-weight: 400; }
.rm-group ul { list-style: none; margin: 0; padding: 0; }
.rm-group li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 11px;
  font-size: 0.93rem;
  line-height: 1.55;
  color: var(--text-muted);
}
.rm-group li:last-child { margin-bottom: 0; }
.rm-group li::before {
  content: "";
  position: absolute;
  left: 2px; top: 8px;
  width: 9px; height: 5px;
  border-left: 1.8px solid var(--rm-accent);
  border-bottom: 1.8px solid var(--rm-accent);
  transform: rotate(-45deg);
}

.rm-items {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  align-items: start;
}
.rm-item {
  padding: 20px 20px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(13, 27, 42, 0.04);
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.rm-item:hover {
  transform: translateY(-2px);
  border-color: var(--line-strong);
  box-shadow: 0 10px 26px -18px rgba(13, 27, 42, 0.45);
}
.rm-item h3 { font-size: 1rem; margin-bottom: 7px; }
.rm-item p { font-size: 0.92rem; color: var(--text-muted); margin: 0; }
.rm-state {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 11px;
  font-size: 0.71rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rm-accent);
}
.rm-state::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--rm-accent);
}
.rm-note {
  margin-top: 8px;
  padding: 18px 20px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r);
  font-size: 0.9rem;
  color: var(--text-muted);
}

@media (max-width: 980px) {
  .rm-items { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .rm-stats { grid-template-columns: 1fr; gap: 10px; margin-bottom: 44px; }
  .rm-stat { display: flex; align-items: baseline; gap: 12px; padding: 14px 18px; }
  .rm-stat b { margin-bottom: 0; font-size: 1.4rem; }
  .rm-groups, .rm-items { grid-template-columns: 1fr; }
  .rm-section { margin-bottom: 48px; }
}

/* ───────────────────── legal pages (/privacy, /terms) ─────────────────────
 * Prose only. One column, capped at a comfortable measure — these are read
 * top to bottom, not scanned like the marketing pages.
 */
.legal { max-width: 720px; }
.legal h2 {
  font-size: 1.2rem;
  margin: 2.4em 0 0.6em;
}
.legal h2:first-of-type { margin-top: 0; }
.legal p, .legal li { color: var(--text-soft); font-size: 0.98rem; }
.legal ul { margin: 0 0 1.1em; padding-left: 1.15em; }
.legal li { margin-bottom: 0.5em; }
.legal a { color: var(--blue-ink); text-decoration: underline; text-underline-offset: 2px; }
.legal-meta {
  margin-bottom: 38px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
  font-size: 0.86rem;
  color: var(--text-faint);
}

/* ══ Homepage rebuild — 2026-09-12 ═══════════════════════════════════
   Screenshot placeholders, migration flow, why-cards, AI accent.
   The AI accent is the same green the wordmark uses on the final A
   (--teal on dark, --ai-ink on white). It is reserved for Dorra and AI
   — do not spend it on ordinary sections or it stops meaning anything. */

:root { --ai-ink: #0B7D6E; }

/* ── Hero proof line ─────────────────────────────────────────────── */
.hero-proof {
  display: flex; flex-wrap: wrap;
  gap: 10px 22px; margin-top: 26px;
  font-size: 0.86rem; color: var(--text-faint);
}
.hero-proof span { display: inline-flex; align-items: center; gap: 9px; }
.hero-proof span + span::before {
  content: ""; width: 4px; height: 4px; border-radius: 50%;
  background: var(--line-strong, #D3DBE6);
}

/* ── Screenshot placeholders ─────────────────────────────────────────
   Sized so real captures drop straight in: replace .shot-body with an
   <img> at the same aspect ratio and nothing else moves. */
.shot {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  box-shadow: 0 18px 44px -30px rgba(13, 27, 42, 0.42), 0 1px 2px rgba(13, 27, 42, 0.05);
  overflow: hidden;
}
.shot-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-raised);
  font-size: 0.76rem; color: var(--text-faint);
}
.shot-dots { display: inline-flex; gap: 5px; flex: none; }
.shot-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong, #D3DBE6); }
.shot-path { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.shot-body {
  position: relative;
  aspect-ratio: 16 / 9;
  display: grid; place-items: center;
  background:
    linear-gradient(135deg, rgba(59,130,246,0.05), rgba(139,92,246,0.05) 55%, rgba(45,212,191,0.05)),
    repeating-linear-gradient(-30deg, transparent 0 13px, rgba(13,27,42,0.028) 13px 14px),
    repeating-linear-gradient(30deg,  transparent 0 13px, rgba(13,27,42,0.028) 13px 14px);
}
.shot-body img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shot-label {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-faint);
  padding: 9px 16px; border: 1px dashed var(--line-strong, #D3DBE6); border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  text-align: center;
}
.shot figcaption {
  padding: 12px 16px 14px;
  border-top: 1px solid var(--line);
  font-size: 0.84rem; color: var(--text-muted);
}
.shot--hero .shot-body { aspect-ratio: 5 / 3; }  /* matches what a full-screen
   Quote Builder capture actually produces (~1.667) — chosen to fit the product,
   rather than making every capture get cropped to fit the frame. */
.shot-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }

/* ── Configure / Price / Progress ────────────────────────────────── */
.trio {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 18px; margin-top: 26px;
}
/* Four across on desktop (the migration page's sizing states), two on tablet;
   the .trio rule in the 700px block below still stacks it on phones. */
.trio--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .trio--4 { grid-template-columns: repeat(2, 1fr); } }
.trio-item { padding-top: 16px; border-top: 2px solid var(--blue); }
.trio-item:nth-child(2) { border-top-color: var(--purple); }
.trio-item:nth-child(3) { border-top-color: var(--teal); }
.trio-item h3 { font-size: 1rem; margin-bottom: 5px; }
.trio-item p { font-size: 0.92rem; color: var(--text-muted); margin: 0; }

/* ── Platform areas ──────────────────────────────────────────────── */
.areas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.area {
  --tile: var(--blue-ink);
  padding: 20px;
  border: 1px solid var(--line);
  border-top: 3px solid var(--tile);
  border-radius: var(--r);
  background: var(--surface);
}
.area h3 { font-size: 0.98rem; margin-bottom: 6px; color: var(--tile); }
.area p { font-size: 0.88rem; color: var(--text-muted); margin: 0; line-height: 1.5; }

/* ── Migration flow ──────────────────────────────────────────────── */
.mig {
  display: grid; grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 16px; align-items: stretch;
}
.mig-col {
  padding: 22px;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--surface);
}
.mig-col--engine {
  border-color: color-mix(in srgb, var(--blue) 42%, var(--line));
  background: linear-gradient(180deg, rgba(59,130,246,0.05), transparent 60%), var(--surface);
}
.mig-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 12px; }
.mig-col--engine .mig-label { color: var(--blue-ink); }
.mig-col ul { list-style: none; margin: 0; padding: 0; }
.mig-col li { font-size: 0.88rem; color: var(--text-muted); padding: 4px 0; }
.mig-body { font-size: 0.9rem; color: var(--text-muted); margin: 0; line-height: 1.55; }
.mig-arrow { display: grid; place-items: center; }
.mig-arrow span {
  display: block; width: 26px; height: 2px;
  background: var(--line-strong, #D3DBE6); position: relative;
}
.mig-arrow span::after {
  content: ""; position: absolute; right: -1px; top: -3px;
  border-left: 7px solid var(--line-strong, #D3DBE6);
  border-top: 4px solid transparent; border-bottom: 4px solid transparent;
}

/* ── Verified, not assumed ───────────────────────────────────────── */
.verify {
  display: grid; grid-template-columns: 1fr 1.15fr; gap: 28px;
  align-items: center; margin-top: 32px;
}
.verify-copy h3 { font-size: 1.45rem; letter-spacing: -0.025em; margin-bottom: 12px; }
.verify-copy p { color: var(--text-muted); margin: 0; }

/* ── Why Sadorra ─────────────────────────────────────────────────── */
.why { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.why-card {
  --why: var(--blue-ink);
  position: relative;
  padding: 26px 26px 26px 30px;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--surface);
  overflow: hidden;
}
.why-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--why);
}
.why-card h3 { font-size: 1.15rem; letter-spacing: -0.02em; margin-bottom: 8px; color: var(--why); }
.why-card > p { color: var(--text); font-size: 1rem; margin: 0 0 10px; }
.why-more { color: var(--text-muted) !important; font-size: 0.9rem !important; line-height: 1.55; margin: 0 !important; }

.statement {
  text-align: center; margin: 40px 0 0;
  font-size: clamp(1.3rem, 3vw, 1.85rem); font-weight: 600; letter-spacing: -0.03em;
}
.statement .ai-em { color: var(--ai-ink); }
.statement .det-em { color: var(--blue-ink); }
.why-note {
  margin: 16px auto 0; max-width: 62ch; text-align: center;
  font-size: 0.88rem; color: var(--text-faint);
}

/* ── Dorra: dark band, AI accent ─────────────────────────────────── */
.dorra { --ai-ink: var(--teal); }
.dorra .eyebrow { color: var(--teal); }
.dorra-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.dorra-act {
  font-size: 0.84rem; padding: 7px 13px; border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--teal) 45%, transparent);
  color: var(--teal);
}
.shot--dark { margin-top: 34px; background: #142334; border-color: rgba(255,255,255,0.10); }
.shot--dark .shot-bar { background: rgba(255,255,255,0.03); border-bottom-color: rgba(255,255,255,0.08); color: #9AA7B8; }
.shot--dark .shot-dots i { background: rgba(255,255,255,0.18); }
.shot--dark .shot-body {
  background:
    linear-gradient(135deg, rgba(59,130,246,0.10), rgba(139,92,246,0.10) 55%, rgba(45,212,191,0.10)),
    repeating-linear-gradient(-30deg, transparent 0 13px, rgba(255,255,255,0.035) 13px 14px),
    repeating-linear-gradient(30deg,  transparent 0 13px, rgba(255,255,255,0.035) 13px 14px);
}
.shot--dark .shot-label { color: #9AA7B8; border-color: rgba(255,255,255,0.20); background: rgba(20,35,52,0.8); }
.shot--dark figcaption { border-top-color: rgba(255,255,255,0.08); color: #9AA7B8; }

/* ── Acronym: the final A is the AI letter ───────────────────────── */
.acronym-cell.is-ai .letter {
  background-image: linear-gradient(var(--ai-ink), var(--ai-ink));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.acronym-cell.is-ai .word { color: var(--ai-ink); font-weight: 600; }

/* ── Proof of progress ───────────────────────────────────────────── */
.progress { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.progress-stat {
  display: flex; align-items: baseline; gap: 10px;
  padding: 18px 22px;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--surface); color: inherit; text-decoration: none;
  transition: border-color .16s ease, transform .16s ease;
}
.progress-stat:hover { border-color: var(--line-strong, #D3DBE6); transform: translateY(-1px); }
.progress-stat b { font-size: 1.6rem; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.progress-stat > span:last-child { font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); }
.ps-icon { width: 9px; height: 9px; border-radius: 50%; flex: none; align-self: center; }
.ps-built { background: var(--blue); }
.ps-build { background: var(--purple); }
.ps-plan  { background: transparent; border: 1.5px solid var(--text-faint); }
.progress-note { margin-top: 16px; font-size: 0.88rem; color: var(--text-muted); }
.progress-note .updated { color: var(--text-faint); }

.access-alt { margin-top: 18px; font-size: 0.92rem; color: var(--text-muted); }

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .areas { grid-template-columns: repeat(2, 1fr); }
  .shot-grid { grid-template-columns: repeat(2, 1fr); }
  .mig { grid-template-columns: 1fr; }
  .mig-arrow { transform: rotate(90deg); padding: 4px 0; }
  .verify { grid-template-columns: 1fr; gap: 22px; }
}
@media (max-width: 700px) {
  .why { grid-template-columns: 1fr; }
  .trio { grid-template-columns: 1fr; gap: 14px; }
  .areas, .shot-grid { grid-template-columns: 1fr; }
  .progress { grid-template-columns: 1fr; }
  .hero-proof { gap: 8px 16px; font-size: 0.8rem; }
}

/* Dorra's own colour is the AI green, so the band reads as one idea
   rather than violet chrome around a green accent. */
.dorra .dorra-orb { background: var(--teal); }
.dorra .dorra-msg.from-ai .who { color: var(--teal); }

.rm-updated {
  margin: -12px 0 20px;
  font-size: 0.82rem; color: var(--text-faint);
}

/* ══ Colour pass + the two entry paths — 2026-09-12 ═══════════════════
   The page was reading as black text on white with one green accent.
   Each section now carries an accent from the same six-hue set the
   roadmap area cards use, so the two pages read as one system. Green
   stays reserved for AI. */

/* ── Two ways in ─────────────────────────────────────────────────── */
.ways { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.way {
  --way: var(--blue-ink);
  padding: 28px;
  border: 1px solid var(--line);
  border-top: 3px solid var(--way);
  border-radius: var(--r);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--way) 5%, transparent), transparent 140px),
    var(--surface);
}
.way-tag {
  display: inline-block; margin-bottom: 12px;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--way);
  background: color-mix(in srgb, var(--way) 10%, transparent);
  border-radius: 999px; padding: 4px 11px;
}
.way h3 { font-size: 1.22rem; letter-spacing: -0.025em; margin-bottom: 10px; }
.way p { color: var(--text-muted); font-size: 0.95rem; margin: 0 0 12px; }
.way-next { font-size: 0.9rem !important; margin: 0 !important; }
.way-next a { color: var(--way); font-weight: 500; }

/* ── Migration tiers ─────────────────────────────────────────────── */
.tiers { margin-top: 36px; }
.tiers-head { max-width: 60ch; margin-bottom: 22px; }
.tiers-head h3 { font-size: 1.45rem; letter-spacing: -0.025em; margin-bottom: 10px; }
.tiers-head p { color: var(--text-muted); margin: 0; }
.tier-set { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.tier {
  --tier: var(--blue-ink);
  padding: 20px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--tier);
  border-radius: var(--r);
  background: var(--surface);
}
.tier-name {
  font-size: 0.82rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--tier); margin-bottom: 8px;
}
.tier p:last-child { font-size: 0.88rem; color: var(--text-muted); margin: 0; line-height: 1.55; }
.tiers-honest {
  margin-top: 20px; padding: 18px 22px;
  border-radius: var(--r);
  background: var(--bg-raised);
  border-left: 3px solid var(--warn);
  font-size: 0.94rem; color: var(--text-muted);
}

/* ── Progress numerals take their dot's colour ───────────────────── */
.progress-stat:nth-child(1) b { color: var(--blue-ink); }
.progress-stat:nth-child(2) b { color: var(--purple-ink); }

@media (max-width: 980px) {
  .tier-set { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .ways, .tier-set { grid-template-columns: 1fr; }
}

/* ══ Dorra everywhere — 2026-09-15 ════════════════════════════════════
   Salesforce announced AIforce at Dreamforce: the platform comes to any
   interface. Sadorra's MCP server is the answer, and this block is where
   the home page says so. It lives inside the Dorra band, so every colour
   below is a token the band has already inverted — never a literal. */

/* ── Wherever the deal is ────────────────────────────────────────── */
.where { margin-top: 72px; padding-top: 56px; border-top: 1px solid var(--line); }
.where-head { max-width: 760px; margin-bottom: 36px; }
.where-head h3 {
  font-size: clamp(1.5rem, 2.6vw, 2.05rem);
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin: 8px 0 14px;
  text-wrap: balance;
}
.where-head p { color: var(--text-soft); }

.surfaces {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 0; padding: 0; list-style: none;
}
.surface {
  padding: 24px 22px 26px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  display: flex; flex-direction: column; gap: 8px;
}
.surface-tag {
  font-size: 0.72rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--teal);
  margin: 0 0 2px;
}
.surface h4 {
  font-size: 1.12rem;
  letter-spacing: -0.015em;
  line-height: 1.25;
  margin: 0;
}
.surface p:last-child { margin: 0; font-size: 0.93rem; color: var(--text-soft); }

/* ── The MCP tool list ───────────────────────────────────────────── */
.tools {
  margin-top: 16px;
  padding: 22px 24px;
  border: 1px solid color-mix(in srgb, var(--teal) 30%, transparent);
  border-radius: var(--r);
  background: color-mix(in srgb, var(--teal) 6%, var(--surface));
}
.tools-label {
  margin: 0 0 14px;
  font-size: 0.72rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--teal);
}
.tool-list {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 28px;
}
.tool-list li {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.9rem;
}
.tool-list li:nth-last-child(-n+2) { border-bottom: 0; }
.tool-list code {
  font-family: var(--mono);
  font-size: 0.82rem;
  color: var(--text);
  padding: 2px 7px;
  border-radius: 6px;
  background: rgba(229, 231, 235, 0.07);
  border: 1px solid var(--line);
  white-space: nowrap;
}
.tool-list span { color: var(--text-soft); }
.tools-note {
  margin: 18px 0 0;
  font-size: 0.95rem;
  color: var(--text-soft);
}
.tools-note .ai-em { color: var(--teal); font-weight: 600; }
.tools-note .det-em { color: var(--blue-ink); font-weight: 600; }

@media (max-width: 980px) {
  .surfaces { grid-template-columns: 1fr; }
  .where { margin-top: 56px; padding-top: 44px; }
}
@media (max-width: 700px) {
  .tool-list { grid-template-columns: 1fr; }
  .tool-list li:nth-last-child(-n+2) { border-bottom: 1px solid var(--line); }
  .tool-list li:last-child { border-bottom: 0; }
  .tools { padding: 18px; }
}

/* ══ De-template pass — 2026-09-15 ════════════════════════════════════
   Same pass as orggenius.app: em dashes gone from copy, the repeated
   eyebrow stamp becomes a numbered section marker, the accent rail comes
   off the rounded cards, the platform grid is a bento rather than 4x2,
   and Why Sadorra is a ruled list instead of four boxes. */

/* ── Numbered section markers ────────────────────────────────────── */
.eyebrow--n { display: inline-flex; align-items: baseline; gap: 12px; }
.eyebrow--n b {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.8rem;
  letter-spacing: 0;
  color: inherit;
  opacity: 0.55;
  font-variant-numeric: tabular-nums;
}

/* ── Platform: bento, no rails ───────────────────────────────────── */
.areas { grid-template-columns: repeat(6, 1fr); gap: 14px; }
.area { border-top: 1px solid var(--line); padding: 22px; grid-column: span 2; }
.area--w3 { grid-column: span 3; }
.area--w2 { grid-column: span 2; }
.area--w6 { grid-column: span 6; }
.area h3::before {
  content: ""; display: inline-block; width: 8px; height: 8px;
  border-radius: 2px; background: var(--tile);
  margin-right: 9px; vertical-align: 1px;
}
.area--ai {
  --bg: var(--midnight);
  background: var(--midnight);
  border-color: transparent;
  display: flex; flex-direction: column; justify-content: center;
}
.area--ai { padding: 28px 30px; }
.area--ai h3 { color: var(--teal); font-size: 1.15rem; }
.area--ai p { color: #BAC5D4; font-size: 1rem; }

/* ── Two ways in: no rail ────────────────────────────────────────── */
.way { border-top: 1px solid var(--line); }

/* ── Why Sadorra: a ruled list, not four boxes ───────────────────── */
.why { grid-template-columns: 1fr 1fr; gap: 0 48px; border-top: 1px solid var(--line-strong); }
.why-card {
  padding: 26px 0 28px;
  border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
  background: transparent;
}
.why-card::before { display: none; }
.why-card h3 { font-size: 1.22rem; }

@media (max-width: 980px) {
  .areas { grid-template-columns: repeat(2, 1fr); }
  .area, .area--w3, .area--w2 { grid-column: span 1; }
  .area--w6 { grid-column: span 2; }
}
@media (max-width: 700px) {
  .areas { grid-template-columns: 1fr; }
  .area, .area--w3, .area--w2, .area--w6 { grid-column: span 1; }
  .why { grid-template-columns: 1fr; gap: 0; }
}

/* ── Stat count-up: fixed-width digits so the tile does not jitter ── */
.rm-stat b, .progress-stat b { font-variant-numeric: tabular-nums; }

/* ══ Dorra, in person — 2026-09-17 ═══════════════════════════════════
   Two cutouts from the Dorra character renders (source PNGs live in the
   gitignored "Dorra Images/"). Her look on the site is the navy suit with
   the white top: Midnight, with teal at the earrings. */

/* ── Dorra section: she stands beside the conversation ───────────── */
.dorra-stage { position: relative; padding-left: 150px; }
.dorra-figure {
  position: absolute; left: -10px; bottom: -8px; z-index: 1;
  height: 420px; width: auto;
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.45));
  pointer-events: none;
}
.dorra-stage .dorra-panel { position: relative; }

/* ── Platform tile: bust at the right edge, cropped by the tile ──── */
.area--ai { position: relative; overflow: hidden; padding-right: 200px; min-height: 160px; }
.area-figure {
  position: absolute; right: 24px; bottom: -86px;
  height: 240px; width: auto;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.5));
}

@media (max-width: 980px) {
  .dorra-stage { padding-left: 120px; }
  .dorra-figure { height: 360px; left: -16px; }
}
@media (max-width: 640px) {
  .dorra-stage { padding-left: 0; padding-top: 0; }
  .dorra-figure { position: static; display: block; height: 260px; margin: 0 auto -18px; }
  .area--ai { padding-right: 130px; min-height: 150px; }
  .area-figure { height: 200px; right: 8px; bottom: -56px; }
}

/* ── Hero: Dorra on the right, presenting the Meet Dorra button ──── */
.hero .wrap { position: relative; }
.hero-dorra {
  position: absolute; right: -30px; bottom: 0; z-index: 0;
  height: 520px; aspect-ratio: 688 / 1100;
  pointer-events: none;
}
.hero-figure {
  display: block; height: 100%; width: 100%;
  filter: drop-shadow(0 22px 34px rgba(13, 27, 42, 0.28));
}
/* The button floats just above her open palm. Percentages of the figure box,
   so it stays on her hand at every size the figure takes. */
/* Shape and hover lift come from .btn-primary; the fill stays teal, the one
   place teal is a fill: the button in her hand matches her earrings and the A
   in the wordmark. Midnight text is 5.7:1 even on the deep end. */
.hero-meet {
  position: absolute; right: 90%; bottom: 64%; z-index: 2; white-space: nowrap;
  pointer-events: auto;
  background: linear-gradient(100deg, #5EEAD4, var(--teal) 52%, #0EA5A0) border-box;
  color: var(--midnight); font-weight: 600;
  box-shadow: 0 10px 34px -14px rgba(20, 184, 166, 0.85);
}
.hero-meet:hover { box-shadow: 0 16px 40px -14px rgba(20, 184, 166, 0.95); }
/* The figure's shadow spills past the hero's bottom edge; clipping only
   sideways keeps the blur fields from causing a horizontal scroll. */
.hero:not(.hero--page) { overflow: clip visible; }
.hero-meet-inline { display: none; }
.hero-dorra-cap {
  position: absolute; right: 90%; bottom: 30%;
  width: 220px; margin: 0;
  font-size: 0.86rem; line-height: 1.5; color: var(--text-muted);
  text-align: right;
}
.hero-dorra-cap b { color: var(--text); font-weight: 600; }
.hero-inner { position: relative; z-index: 1; pointer-events: none; }
.hero-inner > * { pointer-events: auto; }  /* the text column overlaps the button; let clicks through its empty space */
.hero h1 { font-size: clamp(2.4rem, 5.2vw, 3.5rem); }
/* Her feet sit on the hero's bottom edge, so the bottom air moves onto the proof line. */
.hero:not(.hero--page) { padding-bottom: 0; }
.hero-proof { padding-bottom: 96px; }
@media (max-width: 1180px) { .hero-dorra { height: 460px; right: -24px; } .hero-inner { max-width: 60%; } .hero h1 { font-size: clamp(2.2rem, 4.4vw, 3rem); } }
@media (max-width: 860px) {
  /* Phone: she stands under the copy, still holding the button. */
  .hero-dorra { position: relative; right: auto; bottom: auto; height: 340px; margin: 8px 0 0 auto; order: 1; }
  .hero-inner { display: contents; }
  .hero-actions { margin-bottom: 0; }
  .hero-proof { padding-bottom: 0; margin-top: 18px; order: 2; }
  .hero-dorra-cap { width: 180px; font-size: 0.82rem; }
  .hero:not(.hero--page) { padding-bottom: 0; }
  .hero .wrap { display: flex; flex-direction: column; }
}

/* ── Expand a screenshot ──────────────────────────────────────────────
   The grid crops each capture to 16/9; the button shows the whole thing.
   Native <dialog>: Esc, focus and the backdrop come free. */
.shot-expand {
  position: absolute; right: 10px; bottom: 10px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px;
  font: 600 0.72rem/1 var(--font-sans, inherit); letter-spacing: 0.04em;
  color: var(--text-muted); background: color-mix(in srgb, var(--surface) 88%, transparent);
  border: 1px solid var(--line); border-radius: 999px;
  cursor: pointer; opacity: 0; transition: opacity 120ms ease, color 120ms ease;
}
.shot-body:hover .shot-expand, .shot-expand:focus-visible { opacity: 1; }
.shot-expand:hover { color: var(--text); }
.shot-body img { cursor: zoom-in; }
@media (hover: none) { .shot-expand { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .shot-expand { transition: none; } }

.shot-modal {
  width: min(1400px, 94vw); max-width: 94vw; max-height: 94vh;
  padding: 0; border: 0; border-radius: var(--r); background: var(--surface);
  overflow: hidden; color: var(--text);
}
.shot-modal::backdrop { background: rgba(13, 27, 42, 0.74); }
.shot-modal img { display: block; width: 100%; height: auto; max-height: 82vh; object-fit: contain; background: var(--bg-raised); }
.shot-modal-cap { margin: 0; padding: 12px 16px 14px; border-top: 1px solid var(--line); font-size: 0.86rem; color: var(--text-muted); }
.shot-modal-close {
  position: absolute; top: 10px; right: 12px;
  width: 32px; height: 32px; display: grid; place-items: center;
  font-size: 1.1rem; line-height: 1; color: var(--text-muted);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  border: 1px solid var(--line); border-radius: 999px; cursor: pointer;
}
.shot-modal-close:hover { color: var(--text); }

/* ── Sales chat (script.js) ──────────────────────────────────────────
 * Below the nav and mobile drawer (98–100) so an open menu covers it. */
.chat { position: fixed; right: 16px; bottom: 16px; z-index: 90; }
.chat-toggle {
  min-height: 48px; padding: 12px 20px; border: 0; border-radius: 999px;
  background: var(--accent-grad); color: #fff; font: inherit; font-weight: 600;
  box-shadow: var(--shadow); cursor: pointer;
}
.chat-panel {
  display: flex; flex-direction: column;
  width: min(380px, calc(100vw - 32px)); height: min(520px, calc(100vh - 32px));
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: 16px; box-shadow: var(--shadow); overflow: hidden;
}
.chat-panel[hidden] { display: none; }
.chat-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: 1px solid var(--line); color: var(--text);
}
.chat-close {
  width: 36px; height: 36px; border: 0; background: none; cursor: pointer;
  font-size: 1.4rem; line-height: 1; color: var(--text-muted);
}
.chat-close:hover { color: var(--text); }
.chat-log { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.chat-msg {
  margin: 0; max-width: 85%; padding: 10px 14px; border-radius: 14px;
  font-size: 0.95rem; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere;
}
.chat-assistant { align-self: flex-start; background: var(--surface-2); color: var(--text); }
.chat-user { align-self: flex-end; background: var(--blue-ink); color: #fff; }
.chat-form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--line); }
.chat-form input {
  flex: 1; min-width: 0; min-height: 44px; padding: 0 12px; font: inherit;
  color: var(--text); background: var(--bg); border: 1px solid var(--line-strong); border-radius: 10px;
}
.chat-form .btn { min-height: 44px; padding: 0 16px; }
.chat-form .btn:disabled { opacity: 0.6; cursor: default; }
.chat-note { margin: 0; padding: 0 12px 10px; font-size: 0.75rem; color: var(--text-faint); }
.chat-msg a { color: var(--blue-ink); text-decoration: underline; }
.chat-user a { color: inherit; }