/* ============================================================================
   AtlasVect - pre-launch landing page
   Self-contained by design: no webfont, no CDN, no third-party stylesheet.
   Everything below renders from this file alone.
   ========================================================================== */

/* ── Tokens ──────────────────────────────────────────────────────────────── */
:root {
  /* Surfaces (light is the default theme) */
  --bg: #f6f3ec;            /* warm bone */
  --fg: #15130f;
  --card: #ffffff;
  --surface-2: #faf8f2;
  --muted: #efece4;
  --muted-fg: #665f52;      /* 5.70:1 on --bg */
  --border: #e5e0d3;
  --border-strong: #d8d1bf;

  /* Brand */
  --primary: #e8593b;       /* decorative coral: icons, dots, borders, fills */
  --primary-text: #c33d20;  /* text-safe coral: 5.26:1 on white */
  --btn-fg: #ffffff;        /* label colour on the gradient button */
  --destructive: #b9352a;
  --success: #1f7a4d;
  --ring: #c33d20;

  /* Gradients.
     -vivid  = decoration only, never carries text
     -text   = large display text on light surfaces (>= 3.6:1)
     -btn    = solid-ish gradient that keeps white labels above 4.5:1 */
  --grad-vivid: linear-gradient(120deg, hsl(11 100% 63%) 0%, hsl(344 90% 62%) 48%, hsl(266 85% 64%) 100%);
  --grad-soft: linear-gradient(120deg, hsl(11 100% 63% / 0.16), hsl(266 85% 64% / 0.16));
  --grad-text: linear-gradient(120deg, #e04a20 0%, #cf2a55 48%, #7c3fd6 100%);
  --grad-btn: linear-gradient(120deg, #c33d20 0%, #b3243f 48%, #6d31c4 100%);

  /* Glass */
  --glass-bg: rgba(255, 255, 255, 0.66);
  --glass-solid: rgba(255, 255, 255, 0.92);
  --glass-border: rgba(21, 19, 15, 0.08);

  /* Shape */
  --radius: 0.75rem;
  --radius-sm: 8px;
  --radius-card: 1rem;
  --radius-lg: 1.5rem;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(21, 19, 15, 0.05);
  --shadow-md: 0 8px 24px -12px rgba(21, 19, 15, 0.18);
  --shadow-lg: 0 24px 60px -30px rgba(21, 19, 15, 0.32);
  --glow: 0 10px 34px -10px hsl(11 100% 60% / 0.6);

  --header-h: 64px;

  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;
}

/* Dark is an explicit, user-chosen, localStorage-persisted opt-in - never
   automatic from prefers-color-scheme. Toggled in assets/app.js, applied
   before paint by assets/theme-init.js. Light (the :root block above) is
   what every first-time visitor sees, on any OS or browser setting. */
:root[data-theme="dark"] {
  --bg: #12100d;
  --fg: #f3efe6;
  --card: #1a1713;
  --surface-2: #17140f;
  --muted: #241f19;
  --muted-fg: #a89f90;
  --border: #2c261f;
  --border-strong: #3a3229;

  --primary: #ff7d5f;
  --primary-text: #ff8a70;
  --btn-fg: #1b110d;      /* dark label on the bright gradient reads better here */
  --destructive: #ff8377;
  --success: #5fd39b;
  --ring: #ff8a70;

  --grad-text: var(--grad-vivid);
  --grad-btn: linear-gradient(120deg, hsl(11 100% 63%) 0%, hsl(344 90% 62%) 48%, hsl(266 85% 64%) 100%);
  --grad-soft: linear-gradient(120deg, hsl(11 100% 63% / 0.22), hsl(266 85% 64% / 0.22));

  --glass-bg: rgba(36, 31, 25, 0.6);
  --glass-solid: rgba(30, 26, 21, 0.94);
  --glass-border: rgba(255, 250, 240, 0.09);

  --shadow-md: 0 8px 24px -12px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 24px 60px -30px rgba(0, 0, 0, 0.8);
}

/* ── Reset ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; padding: 0; }
a { color: inherit; }

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

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

.skip-link {
  position: absolute;
  left: 12px; top: -100px;
  z-index: 200;
  padding: 10px 16px;
  border-radius: var(--radius-pill);
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  font-weight: 600;
  text-decoration: none;
  transition: top 160ms ease;
}
.skip-link:focus { top: 12px; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.icon {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

/* ── Layout ──────────────────────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: 16px;
}
@media (min-width: 640px) { .container { padding-inline: 24px; } }

.container-md { max-width: 1152px; }
.container-sm { max-width: 1024px; }
.container-xs { max-width: 820px; }

.section {
  position: relative;
  padding-block: 80px;
  overflow-x: clip;
  scroll-margin-top: 96px;
}
@media (min-width: 640px) { .section { padding-block: 96px; } }
.section-alt { background: var(--surface-2); border-block: 1px solid var(--border); }

[id] { scroll-margin-top: 96px; }

/* ── Typography ──────────────────────────────────────────────────────────── */
.display {
  font-family: var(--font-serif);
  font-weight: 400;
  /* Capped at 5rem so "Build professional websites" holds one line on desktop. */
  font-size: clamp(2.5rem, 6.6vw, 5rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.d-line { display: block; }

.h2 {
  font-size: 1.875rem;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
@media (min-width: 640px) { .h2 { font-size: 2.25rem; } }
.h2-lg { font-size: 2.25rem; }
@media (min-width: 640px) { .h2-lg { font-size: 3rem; } }

.kicker {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-fg);
}

.lead {
  font-size: 1.0625rem;
  color: var(--muted-fg);
  text-wrap: pretty;
}
@media (min-width: 640px) { .lead { font-size: 1.125rem; } }

.section-head { max-width: 640px; margin-inline: auto; text-align: center; margin-bottom: 48px; }
.section-head .h2 { margin-top: 12px; }
.section-head .lead { margin-top: 16px; }

/* Gradient text. A solid colour is always painted first so the word can never
   render invisible if background-clip is unsupported or the paint is dropped. */
.grad-text {
  color: var(--primary-text);
  font-style: italic;
}
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .grad-text {
    background-image: var(--grad-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding-inline: 22px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 140ms ease, box-shadow 200ms ease, background-color 160ms ease, border-color 160ms ease;
}
.btn-sm { height: 36px; padding-inline: 16px; font-size: 0.875rem; }
.btn-lg { height: 48px; padding-inline: 28px; font-size: 1rem; }
.btn-block { width: 100%; }

.btn-primary {
  background-image: var(--grad-btn);
  color: var(--btn-fg);
  box-shadow: var(--glow);
}
.btn-primary:hover { transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); }

.btn-ghost {
  background: transparent;
  border-color: var(--border-strong);
  color: var(--fg);
}
.btn-ghost:hover { background: var(--muted); }

.btn-arrow { transition: transform 160ms ease; }
.btn:hover .btn-arrow { transform: translateX(2px); }

@media (prefers-reduced-motion: reduce) {
  .btn, .btn-arrow { transition: none; }
  .btn-primary:hover { transform: none; }
}

/* ── Pills, dots ─────────────────────────────────────────────────────────── */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--glass-border);
  background: var(--glass-solid);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-fg);
}
@supports (backdrop-filter: blur(1px)) {
  .pill { background: var(--glass-bg); backdrop-filter: blur(16px) saturate(150%); }
}
.pill .dot,
.status-dot-pill .dot,
.footer-status .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--primary);
  flex: none;
}

.status-dot-pill {
  display: none;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-fg);
}
@media (min-width: 1024px) { .status-dot-pill { display: inline-flex; } }

/* ── Header ──────────────────────────────────────────────────────────────── */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  border-bottom: 1px solid transparent;
  transition: background-color 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}
.site-header.is-stuck {
  background: var(--glass-solid);
  border-bottom-color: var(--border);
  box-shadow: var(--shadow-sm);
}
@supports (backdrop-filter: blur(1px)) {
  .site-header.is-stuck { background: var(--glass-bg); backdrop-filter: blur(16px) saturate(150%); }
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex: none;
}
.logo-mark { width: 32px; height: 32px; flex: none; }
.brand-word {
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* ── Brand mark ───────────────────────────────────────────────────────────────
   The AtlasVect mark was drawn as a teal-to-blue form on a dark plate, so the
   plate is part of the identity rather than an artefact to hide. We lean into
   it and render a circular medallion: a lit rim, a faint outer aura, a specular
   highlight at the top left and a brand-tinted shadow beneath. On the light
   theme that reads as a deliberate struck coin instead of a photo with a black
   square around it; on the dark theme the rim and the teal glow keep the disc's
   edge from dissolving into the page.

   Everything here is drawn in CSS around a single small vector. The artwork is
   assets/logo.svg (1,730 bytes, crisp at every size), fetched once and reused
   by both the header and the footer. The 2400px master at assets/logo.png is
   never requested by this page, and there is no runtime raster swap (see the
   "Brand mark" note in app.js for why one was tried and removed). Either way
   the badge clips to a circle, so a future square export cannot reintroduce
   the black box.
   -------------------------------------------------------------------------- */
.logo-badge {
  --logo-size: 34px;
  --logo-teal: 18 190 224;   /* the mark's highlight hue, for rims and glows  */
  --logo-blue: 10 79 248;    /* the mark's wing-tip hue, for the cast shadow  */

  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: var(--logo-size);
  height: var(--logo-size);
  border-radius: 50%;
  /* Clipping is load-bearing: it is what guarantees a square raster dropped in
     later still presents as a circle rather than a plate with corners. */
  overflow: hidden;
  background: radial-gradient(
    116% 116% at 50% 16%,
    #16324f 0%,
    #0a1526 42%,
    #050a14 76%,
    #03060e 100%
  );
  box-shadow:
    inset 0 0 0 1px rgb(210 245 255 / 0.16),   /* inner hairline, lifts the rim */
    0 0 0 1px rgb(var(--logo-teal) / 0.30),    /* brand rim, not a grey border  */
    0 0 0 4px rgb(var(--logo-teal) / 0.07),    /* aura, seats it on the page    */
    0 8px 20px -10px rgb(var(--logo-blue) / 0.55);
  transition: box-shadow 200ms ease, transform 200ms ease;
}

/* Specular sheen. Without it the plate reads as a hole punched in the page;
   with it, as a lit object. Sits above the artwork, ignores pointer events. */
.logo-badge::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(62% 46% at 30% 12%, rgb(255 255 255 / 0.22) 0%, rgb(255 255 255 / 0) 64%),
    radial-gradient(92% 62% at 50% 116%, rgb(var(--logo-teal) / 0.20) 0%, rgb(var(--logo-teal) / 0) 70%);
  pointer-events: none;
}

.logo-img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

/* Sizes. The header stays at today's footprint on the narrowest phones so the
   brand, the call to action and the menu button still fit on one 360px row. */
@media (min-width: 480px) { .site-header .logo-badge { --logo-size: 38px; } }
@media (min-width: 900px) { .site-header .logo-badge { --logo-size: 40px; } }

.footer-brand .logo-badge { --logo-size: 44px; }
@media (min-width: 640px) { .footer-brand .logo-badge { --logo-size: 48px; } }

/* The header mark is a link, so it earns a hover and focus state. */
.brand:hover .logo-badge,
.brand:focus-visible .logo-badge {
  box-shadow:
    inset 0 0 0 1px rgb(210 245 255 / 0.28),
    0 0 0 1px rgb(var(--logo-teal) / 0.55),
    0 0 0 5px rgb(var(--logo-teal) / 0.13),
    0 10px 26px -10px rgb(var(--logo-blue) / 0.70);
}
@media (prefers-reduced-motion: no-preference) {
  a.brand:hover .logo-badge { transform: translateY(-1px); }
}

/* On a dark page a cast shadow does nothing, so the disc is separated from
   the background by light instead: a brighter rim and a teal halo. */
[data-theme="dark"] .logo-badge {
  box-shadow:
    inset 0 0 0 1px rgb(200 245 255 / 0.22),
    0 0 0 1px rgb(var(--logo-teal) / 0.45),
    0 0 0 5px rgb(var(--logo-teal) / 0.10),
    0 0 26px -6px rgb(var(--logo-teal) / 0.45);
}
[data-theme="dark"] .brand:hover .logo-badge,
[data-theme="dark"] .brand:focus-visible .logo-badge {
  box-shadow:
    inset 0 0 0 1px rgb(200 245 255 / 0.34),
    0 0 0 1px rgb(var(--logo-teal) / 0.70),
    0 0 0 6px rgb(var(--logo-teal) / 0.16),
    0 0 32px -4px rgb(var(--logo-teal) / 0.60);
}

.nav-desktop {
  display: none;
  align-items: center;
  gap: 4px;
  margin-inline: auto;
}
@media (min-width: 900px) { .nav-desktop { display: flex; } }
.nav-desktop a {
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  font-size: 0.9375rem;
  color: var(--muted-fg);
  text-decoration: none;
  transition: color 140ms ease, background-color 140ms ease;
}
.nav-desktop a:hover { color: var(--fg); background: var(--muted); }

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}
@media (min-width: 900px) { .header-actions { margin-left: 0; } }

.nav-toggle {
  display: inline-grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--fg);
}
@media (min-width: 900px) { .nav-toggle { display: none; } }

/* Light is the default theme everywhere on this page - this button is the
   ONLY way to reach dark mode, deliberately never automatic from the OS
   (see assets/theme-init.js). Both icons occupy the same grid cell so
   toggling never shifts layout; [data-theme] on <html> picks which shows. */
.theme-toggle {
  display: inline-grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--fg);
  cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease;
}
.theme-toggle:hover { background: var(--muted); }
.theme-toggle .theme-icon { grid-area: 1 / 1; }
.theme-icon-sun { display: none; }
.theme-icon-moon { display: block; }
[data-theme="dark"] .theme-icon-sun { display: block; }
[data-theme="dark"] .theme-icon-moon { display: none; }

/* Drawer variant: a full-width row matching the nav links above it, not the
   circular header chip. Icons stay stacked in one cell; the label text swaps
   via JS (data-theme-label), same rule for which icon shows. */
.theme-toggle-drawer {
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  margin-bottom: 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--fg);
  font: inherit;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}
.theme-toggle-drawer:hover { background: var(--muted); }
.theme-toggle-drawer .theme-icon { grid-area: 1 / 1; grid-row: 1; grid-column: 1; }

.nav-drawer {
  border-top: 1px solid var(--border);
  background: var(--card);
  box-shadow: var(--shadow-lg);
  padding: 16px 16px 24px;
}
.nav-drawer[hidden] { display: none; }
@media (min-width: 900px) { .nav-drawer { display: none !important; } }
.nav-drawer nav { display: grid; gap: 2px; margin-bottom: 16px; }
.nav-drawer nav a {
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-weight: 500;
}
.nav-drawer nav a:hover { background: var(--muted); }

/* ── Decorative backdrops ────────────────────────────────────────────────── */
.aurora {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(60% 55% at 50% 0%, hsl(11 100% 62% / 0.28), transparent 72%),
    radial-gradient(45% 45% at 82% 18%, hsl(266 85% 64% / 0.22), transparent 70%),
    radial-gradient(40% 40% at 12% 30%, hsl(200 90% 60% / 0.16), transparent 70%);
}
.aurora-soft { opacity: 0.75; }

.grid-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.6;
  background-image:
    linear-gradient(to right, var(--border) 1px, transparent 1px),
    linear-gradient(to bottom, var(--border) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 72% 60% at 50% 0%, #000 55%, transparent 100%);
  mask-image: radial-gradient(ellipse 72% 60% at 50% 0%, #000 55%, transparent 100%);
}

/* ── Hero ────────────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  padding-top: calc(var(--header-h) + 56px);
  padding-bottom: 88px;
  overflow-x: clip;
}
@media (min-width: 640px) { .hero { padding-top: calc(var(--header-h) + 80px); padding-bottom: 112px; } }

.hero-inner { position: relative; z-index: 1; text-align: center; }
.pill-status { margin-bottom: 28px; }
.display { max-width: 896px; margin-inline: auto; }
.hero-sub { max-width: 700px; margin: 24px auto 0; font-size: 1.0625rem; }
@media (min-width: 640px) { .hero-sub { font-size: 1.25rem; } }

.hero-status {
  margin-top: 20px;
  font-size: 0.875rem;
  color: var(--muted-fg);
}
.hero-secondary {
  margin-top: 8px;
  font-size: 0.875rem;
  color: var(--muted-fg);
}
.hero-secondary a, .cta-secondary a {
  color: var(--primary-text);
  font-weight: 600;
  text-underline-offset: 3px;
}

.hero-caps {
  display: grid;
  gap: 20px;
  max-width: 1000px;
  margin: 56px auto 0;
  text-align: left;
}
@media (min-width: 768px) { .hero-caps { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.hero-caps li {
  position: relative;
  padding-left: 18px;
  border-left: 2px solid var(--primary);
}
.cap-title {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.375rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.cap-body {
  display: block;
  margin-top: 8px;
  font-size: 0.9375rem;
  color: var(--muted-fg);
}

.hero-mock {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1100px;
  margin: 56px auto 0;
  padding-inline: 16px;
}
@media (min-width: 640px) { .hero-mock { padding-inline: 24px; } }
.hero-mock figcaption {
  margin-top: 14px;
  text-align: center;
  font-size: 0.8125rem;
  color: var(--muted-fg);
}

/* ── Glass surfaces and frames ───────────────────────────────────────────── */
.frame {
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--glass-border);
  background: var(--glass-solid);
  box-shadow: var(--shadow-lg);
}
@supports (backdrop-filter: blur(1px)) {
  .frame { background: var(--glass-bg); backdrop-filter: blur(16px) saturate(150%); }
}
.frame-lg { box-shadow: var(--shadow-lg), var(--glow); }

.frame-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}
.frame-bar .dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.dot-a { background: color-mix(in srgb, var(--destructive) 70%, transparent); }
.dot-b { background: color-mix(in srgb, var(--primary) 60%, transparent); }
.dot-c { background: color-mix(in srgb, var(--muted-fg) 40%, transparent); }
.frame-url {
  margin-left: 8px;
  padding: 3px 10px;
  border-radius: var(--radius-sm);
  background: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  color: var(--muted-fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.frame-body { padding: 16px; display: grid; gap: 10px; }

/* Hero editor mockup */
.mock-editor { grid-template-columns: 1fr; padding: 20px; gap: 16px; }
@media (min-width: 640px) { .mock-editor { grid-template-columns: 160px 1fr; } }
.mock-rail { display: none; gap: 8px; }
@media (min-width: 640px) { .mock-rail { display: grid; align-content: start; } }
.mock-rail span { height: 32px; border-radius: 10px; background: var(--muted); }
.mock-canvas { display: grid; gap: 14px; align-content: start; }
.mock-band { height: 120px; border-radius: 14px; background-image: var(--grad-soft); }
@media (min-width: 640px) { .mock-band { height: 160px; } }
.mock-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.mock-tiles span { height: 72px; border-radius: 12px; background: var(--muted); }
@media (min-width: 640px) { .mock-tiles span { height: 96px; } }
.mock-line { height: 12px; border-radius: 6px; background: var(--muted); }
.w66 { width: 66%; } .w50 { width: 50%; }

/* ── Integrations strip ──────────────────────────────────────────────────── */
.strip { padding-block: 40px; border-block: 1px solid var(--border); }
.strip-title {
  text-align: center;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-fg);
  text-wrap: balance;
}
.strip-items {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px 36px;
  margin-top: 22px;
}
.strip-items li {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--muted-fg);
}

/* ── Cards ───────────────────────────────────────────────────────────────── */
.cards { display: grid; gap: 16px; }
.cards-3 { grid-template-columns: 1fr; }
.cards-4 { grid-template-columns: 1fr; }
@media (min-width: 640px) { .cards-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 768px) { .cards-3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .cards-4 { grid-template-columns: repeat(4, 1fr); } }

.card {
  padding: 24px;
  border-radius: var(--radius-card);
  border: 1px solid var(--border);
  background: var(--card);
  box-shadow: var(--shadow-sm);
  transition: border-color 180ms ease, box-shadow 220ms ease, transform 220ms ease;
}
.card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
}
.cards-flat .card { box-shadow: none; background: var(--card); }
.card h3, .card h4 {
  margin-top: 16px;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.card p {
  margin-top: 8px;
  font-size: 0.875rem;
  color: var(--muted-fg);
  text-wrap: pretty;
}

.icon-tile {
  display: inline-grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: var(--radius);
  background-image: var(--grad-soft);
  color: var(--primary-text);
}
.icon-tile-sm { width: 34px; height: 34px; border-radius: 10px; }

/* ── Contrast (old way vs AtlasVect) ─────────────────────────────────────── */
.contrast { display: grid; gap: 20px; }
@media (min-width: 900px) { .contrast { grid-template-columns: repeat(2, 1fr); gap: 24px; } }

.contrast-col {
  padding: 28px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--card);
}
.contrast-col-new { border-color: color-mix(in srgb, var(--primary) 34%, var(--border)); }
.contrast-head {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-fg);
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.contrast-head-new { color: var(--primary-text); }
.contrast-list { display: grid; gap: 18px; margin-top: 20px; }
.contrast-list li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 12px;
  align-items: start;
  font-size: 0.9375rem;
  text-wrap: pretty;
}
.contrast-col:not(.contrast-col-new) .contrast-list li { color: var(--muted-fg); }
.mark {
  display: inline-grid;
  place-items: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  margin-top: 1px;
}
.mark-old { background: var(--muted); color: var(--muted-fg); }
.mark-new { background: color-mix(in srgb, var(--primary) 18%, transparent); color: var(--primary-text); }

/* ── Showcase ────────────────────────────────────────────────────────────── */
.mock-disclaimer {
  margin: -28px auto 32px;
  max-width: 640px;
  text-align: center;
  font-size: 0.8125rem;
  color: var(--muted-fg);
}
.showcase { display: grid; gap: 24px; }

.show-row {
  display: grid;
  gap: 24px;
  align-items: center;
  padding: 20px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--card) 55%, transparent);
}
@media (min-width: 640px) { .show-row { padding: 28px; } }
@media (min-width: 1024px) {
  .show-row { grid-template-columns: repeat(2, 1fr); gap: 40px; }
  .show-row-flip .show-copy { order: 2; }
}

.show-eyebrow {
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted-fg);
}
.show-title { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.show-title h3 { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; }
.show-blurb { margin-top: 12px; max-width: 32rem; color: var(--muted-fg); text-wrap: pretty; }
.show-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  font-size: 0.875rem;
}
.show-note .icon { color: var(--primary-text); }

/* Mini mockups, all CSS */
.m-hero { height: 56px; border-radius: 10px; background-image: var(--grad-soft); }
.m-products { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.m-prod {
  display: grid; gap: 6px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 10px;
}
.m-thumb { display: block; height: 40px; border-radius: 6px; background: var(--muted); }
.m-thumb-sm { height: 34px; width: 34px; flex: none; }
.m-bar { display: block; height: 8px; border-radius: 4px; background: var(--muted); }
.w80 { width: 80%; } .w70 { width: 70%; } .w65 { width: 65%; } .w60 { width: 60%; } .w40 { width: 40%; }
.m-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.m-price { display: block; height: 8px; width: 28px; border-radius: 4px; background: color-mix(in srgb, var(--primary) 60%, transparent); }
.m-cta {
  padding: 2px 7px;
  border-radius: 5px;
  background: color-mix(in srgb, var(--fg) 10%, transparent);
  font-size: 0.5625rem;
  font-weight: 600;
}

.m-svc {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
}
.m-svc > span { display: grid; gap: 6px; }
.m-svc b { font-size: 0.75rem; font-weight: 600; }
.m-pill {
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--primary) 16%, transparent);
  color: var(--primary-text);
  font-size: 0.625rem;
  font-weight: 600;
  font-style: normal;
  white-space: nowrap;
}
.m-pill-solid {
  display: inline-block;
  width: fit-content;
  background-image: var(--grad-btn);
  color: var(--btn-fg);
}

.m-booking { grid-template-columns: 1fr auto; gap: 12px; }
.m-cal {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: 1fr;
  gap: 4px;
  align-content: start;
}
.m-cal i {
  display: block;
  aspect-ratio: 1;
  border-radius: 4px;
  background: var(--muted);
}
.m-cal i.on {
  background-image: var(--grad-btn);
}
.m-slots { display: grid; gap: 6px; width: 74px; align-content: start; }
.m-slots span {
  padding: 4px 8px;
  border-radius: 7px;
  border: 1px solid var(--border);
  text-align: center;
  font-size: 0.625rem;
  color: var(--muted-fg);
}
.m-slots .on {
  border-color: transparent;
  background: color-mix(in srgb, var(--primary) 16%, transparent);
  color: var(--primary-text);
  font-weight: 600;
}

.m-split { grid-template-columns: auto 1fr; gap: 12px; align-items: center; }
.m-art {
  display: grid;
  place-items: center;
  width: 92px; height: 92px;
  border-radius: 12px;
  background: var(--muted);
  position: relative;
  flex: none;
}
.m-art-3d { background-image: var(--grad-soft); }
.m-cube {
  width: 44px; height: 44px;
  border: 2px solid rgba(255, 255, 255, 0.75);
  border-radius: 6px;
  transform: rotate3d(1, 1, 0, 35deg);
}
.m-shirt {
  width: 58px; height: 58px;
  background: color-mix(in srgb, var(--fg) 15%, transparent);
  clip-path: polygon(20% 8%, 80% 8%, 100% 30%, 82% 38%, 82% 100%, 18% 100%, 18% 38%, 0 30%);
}
.m-badge {
  position: absolute;
  width: 20px; height: 20px;
  border-radius: 50%;
  background-image: var(--grad-vivid);
}
.m-art-pcb { background: linear-gradient(135deg, #0c5c3f, #0a4a33); overflow: hidden; }
.m-art-pcb i {
  position: absolute;
  height: 8px; width: 8px;
  border-radius: 50%;
  background: rgba(252, 211, 77, 0.85);
}
.m-art-pcb i:nth-child(1) { top: 20%; left: 18%; }
.m-art-pcb i:nth-child(2) { top: 38%; left: 38%; }
.m-art-pcb i:nth-child(3) { top: 56%; left: 58%; }
.m-art-pcb i:nth-child(4) { top: 74%; left: 30%; }
.m-art-pcb::before {
  content: "";
  position: absolute;
  inset: 12% 8%;
  background-image: repeating-linear-gradient(to bottom, rgba(252, 211, 77, 0.5) 0 1px, transparent 1px 14px);
}
.m-side { display: grid; gap: 8px; min-width: 0; }
.m-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.m-chips i {
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--primary) 15%, transparent);
  color: var(--primary-text);
  font-size: 0.625rem;
  font-style: normal;
  font-weight: 600;
}
.m-quote {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--muted);
  font-size: 0.625rem;
}
.m-quote b { font-weight: 500; color: var(--muted-fg); }
.m-quote em { font-style: normal; font-weight: 700; }
.m-upload {
  display: block;
  padding: 10px;
  border: 1px dashed var(--border-strong);
  border-radius: 8px;
  text-align: center;
  font-size: 0.625rem;
  color: var(--muted-fg);
}
.m-swatches { display: flex; gap: 6px; }
.m-swatches i { width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--border); }

.m-menu {
  display: flex; align-items: center; gap: 10px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 10px;
}
.m-menu .m-thumb-sm { background-image: var(--grad-soft); border-radius: 8px; }
.m-menu-copy { display: grid; gap: 5px; flex: 1; min-width: 0; }
.m-menu-copy b { font-size: 0.75rem; font-weight: 600; }
.m-menu > em { font-style: normal; font-size: 0.75rem; font-weight: 700; }

.m-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.m-gallery span { aspect-ratio: 4 / 3; border-radius: 10px; background: var(--muted); }
.m-gallery span:nth-child(even) { background-image: var(--grad-soft); }

/* Showcase closing card */
.show-cta {
  position: relative;
  overflow: hidden;
  padding: 40px 24px;
  border-radius: var(--radius-lg);
  border: 1px solid color-mix(in srgb, var(--primary) 32%, transparent);
  text-align: center;
}
@media (min-width: 640px) { .show-cta { padding: 56px 40px; } }
.show-cta-inner { position: relative; z-index: 1; max-width: 640px; margin-inline: auto; }
.show-cta h3 {
  margin-top: 12px;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
@media (min-width: 640px) { .show-cta h3 { font-size: 1.875rem; } }
.show-cta .lead { margin-top: 14px; }
.cta-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 28px;
}

/* ── Tabs (personas) ─────────────────────────────────────────────────────── */
.tablist {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  padding: 6px;
  margin-inline: auto;
  margin-bottom: 32px;
  width: fit-content;
  max-width: 100%;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--card);
}
.tab {
  padding: 9px 18px;
  border-radius: var(--radius-pill);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--muted-fg);
  transition: background-color 160ms ease, color 160ms ease;
}
.tab:hover { color: var(--fg); }
.tab[aria-selected="true"] {
  background-image: var(--grad-btn);
  color: var(--btn-fg);
  font-weight: 600;
}
.tabpanel-title {
  text-align: center;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 24px;
}
.tabpanel:focus-visible { outline: 2px solid var(--ring); outline-offset: 6px; border-radius: var(--radius-card); }

/* ── Steps ───────────────────────────────────────────────────────────────── */
.steps { display: grid; gap: 16px; counter-reset: step; }
@media (min-width: 640px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .steps { grid-template-columns: repeat(4, 1fr); gap: 20px; } }
.step {
  padding: 24px;
  border-radius: var(--radius-card);
  border: 1px solid var(--border);
  background: var(--card);
}
.step-num {
  display: inline-grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background-image: var(--grad-soft);
  color: var(--primary-text);
  font-family: var(--font-serif);
  font-size: 1.25rem;
  line-height: 1;
}
.step h3 { margin-top: 16px; font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; }
.step p { margin-top: 8px; font-size: 0.875rem; color: var(--muted-fg); text-wrap: pretty; }

/* ── Pricing ─────────────────────────────────────────────────────────────── */
.pricing-notice {
  max-width: 34rem;
  margin: 20px auto 0;
  padding: 12px 18px;
  border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, var(--primary) 26%, var(--border));
  background: color-mix(in srgb, var(--primary) 7%, transparent);
  font-size: 0.875rem;
  color: var(--fg);
  text-wrap: pretty;
}

.toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 24px;
  padding: 4px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--card);
}
.toggle-btn {
  padding: 8px 18px;
  border-radius: var(--radius-pill);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--muted-fg);
  transition: background-color 160ms ease, color 160ms ease;
}
.toggle-btn.is-on {
  background-image: var(--grad-btn);
  color: var(--btn-fg);
  font-weight: 600;
}
.toggle-save { font-size: 0.75rem; opacity: 0.85; }

.tiers { display: grid; gap: 16px; }
@media (min-width: 640px) { .tiers { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .tiers { grid-template-columns: repeat(4, 1fr); gap: 20px; } }

.tier {
  display: flex;
  flex-direction: column;
  padding: 28px;
  border-radius: var(--radius-card);
  border: 1px solid var(--border);
  background: var(--card);
  box-shadow: var(--shadow-sm);
}
.tier-featured {
  border-color: color-mix(in srgb, var(--primary) 45%, transparent);
  box-shadow: var(--shadow-md);
}
.tier-badge {
  align-self: flex-start;
  margin-bottom: 12px;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--primary) 16%, transparent);
  color: var(--primary-text);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.tier-name { font-size: 1.125rem; font-weight: 600; }
.tier-tagline { margin-top: 4px; font-size: 0.875rem; color: var(--muted-fg); }
.tier-price { display: flex; align-items: flex-end; gap: 4px; margin-top: 20px; }
.price {
  font-family: var(--font-serif);
  font-size: 3rem;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.price-custom { font-size: 2.25rem; }
.per { margin-bottom: 5px; font-size: 0.875rem; color: var(--muted-fg); }
.tier-billing { min-height: 20px; margin-top: 6px; font-size: 0.75rem; color: var(--muted-fg); }
.tier-list { display: grid; gap: 12px; margin-top: 24px; flex: 1; }
.tier-list li {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 10px;
  align-items: start;
  font-size: 0.875rem;
}
.tier-list .icon { margin-top: 3px; color: var(--primary-text); }
.tier .btn { margin-top: 28px; }
.pricing-foot {
  margin-top: 32px;
  text-align: center;
  font-size: 0.875rem;
  color: var(--muted-fg);
}

/* ── Matrix table ────────────────────────────────────────────────────────── */
.table-wrap {
  overflow-x: auto;
  border-radius: var(--radius-card);
  border: 1px solid var(--border);
  background: var(--card);
  -webkit-overflow-scrolling: touch;
}
.matrix { width: 100%; border-collapse: collapse; min-width: 560px; }
.matrix th, .matrix td {
  padding: 14px 18px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  font-size: 0.875rem;
}
.matrix thead th {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--muted-fg);
  background: var(--surface-2);
  text-wrap: balance;
}
.matrix tbody th { font-weight: 500; }
.matrix tbody tr:last-child th, .matrix tbody tr:last-child td { border-bottom: 0; }
.matrix td { text-align: center; width: 22%; }
.matrix thead th:nth-child(2), .matrix thead th:nth-child(3) { text-align: center; }
.matrix .yes .icon { display: inline-block; color: var(--primary-text); }
.matrix .no .icon { display: inline-block; color: var(--muted-fg); opacity: 0.55; }

/* ── Competitor comparison (dot rating) ─────────────────────────────────────
   Five dots per cell, filled left to right by data-level (1-5), plus a
   cross icon for a true zero. A dot scale rather than a checkmark
   deliberately: it can say a competitor is PARTLY there (Wix Bookings,
   Shopify Payments) instead of forcing a false zero, which is what makes
   the "we win everywhere" column next to it credible.

   table-layout: fixed with an explicit width on every <th>/<td> (not just
   the data cells) is load-bearing: without it, a header's own text width
   ("Squarespace" vs "Wix") can size that column independently of the dot
   cells below it, and the two drift out of vertical alignment. */
.matrix-compare { min-width: 760px; table-layout: fixed; }
.matrix-compare th,
.matrix-compare td { padding-inline: 14px; }
.matrix-compare thead th:first-child,
.matrix-compare tbody th { width: 30%; text-align: left; }
.matrix-compare thead th:not(:first-child),
.matrix-compare td { width: 14%; text-align: center; }
.matrix-compare thead th.col-us,
.matrix-compare td.col-us { background: var(--surface-2); }
.matrix-compare tbody th { overflow-wrap: break-word; font-weight: 500; }

.compare-region-label {
  margin-top: 20px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  color: var(--muted-fg);
}
.compare-region-label .icon { color: var(--primary-text); }
.select-wrap-sm select {
  height: auto;
  padding: 5px 28px 5px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--card);
  color: var(--fg);
  font-size: 0.8125rem;
  cursor: pointer;
}
.select-wrap-sm .select-chevron { right: 8px; width: 14px; height: 14px; }

.dot-rate { display: inline-flex; gap: 4px; align-items: center; justify-content: center; }
.dot-rate span:not(.sr-only) {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--muted-fg);
  opacity: 0.28;
}
.dot-rate[data-level="1"] span:nth-child(-n+1),
.dot-rate[data-level="2"] span:nth-child(-n+2),
.dot-rate[data-level="3"] span:nth-child(-n+3),
.dot-rate[data-level="4"] span:nth-child(-n+4),
.dot-rate[data-level="5"] span:nth-child(-n+5) {
  background: var(--fg);
  opacity: 0.6;
}
/* The AtlasVect column always reads 5 of 5, in the brand's own primary
   colour (never a colour, like green, that appears nowhere else on the
   page) - it is what makes it read as "us" rather than an unrelated hue. */
.col-us .dot-rate span:not(.sr-only) { background: var(--primary); opacity: 1; }

.dot-x { display: inline-flex; color: var(--muted-fg); opacity: 0.45; }

.compare-foot {
  margin-top: 14px;
  font-size: 0.75rem;
  line-height: 1.55;
  color: var(--muted-fg);
  max-width: 68ch;
}

/* ── Customer stories ────────────────────────────────────────────────────── */
.stories-grid {
  margin-top: 32px;
  display: grid;
  gap: 18px;
}
@media (min-width: 640px) { .stories-grid { grid-template-columns: repeat(2, 1fr); } }

.story-card {
  display: flex;
  flex-direction: column;
  padding: 28px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--glass-border);
  background: var(--glass-solid);
}
@supports (backdrop-filter: blur(1px)) {
  .story-card { background: var(--glass-bg); backdrop-filter: blur(16px) saturate(150%); }
}

.story-stars { display: flex; gap: 2px; margin-bottom: 16px; color: var(--primary); }
.story-stars .icon { fill: currentColor; }

.story-quote { flex: 1; font-size: 1.0625rem; line-height: 1.55; color: var(--fg); }

.story-metric {
  align-self: flex-start;
  margin-top: 18px;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  color: var(--primary-text);
  font-size: 0.8125rem;
  font-weight: 600;
}

.story-attr { margin-top: 16px; font-size: 0.875rem; }
.story-name { font-weight: 600; }
.story-role { color: var(--muted-fg); }

/* ── Panel (how we build it) ─────────────────────────────────────────────── */
.panel {
  margin-top: 32px;
  padding: 28px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--glass-border);
  background: var(--glass-solid);
}
@supports (backdrop-filter: blur(1px)) {
  .panel { background: var(--glass-bg); backdrop-filter: blur(16px) saturate(150%); }
}
.panel-title {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-fg);
}
.panel-pillars { display: grid; gap: 14px; margin-top: 20px; }
@media (min-width: 640px) { .panel-pillars { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .panel-pillars { grid-template-columns: repeat(4, 1fr); } }
.panel-pillars li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.875rem;
  font-weight: 500;
  text-wrap: pretty;
}
.panel-pillars .icon { margin-top: 2px; color: var(--primary-text); }
.panel-note { margin-top: 20px; font-size: 0.8125rem; color: var(--muted-fg); }

/* ── FAQ ─────────────────────────────────────────────────────────────────── */
.faq {
  border-radius: var(--radius-card);
  border: 1px solid var(--border);
  background: var(--card);
  overflow: hidden;
}
.faq-item + .faq-item { border-top: 1px solid var(--border); }
.faq-item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  list-style: none;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary:hover { background: var(--surface-2); }
.faq-item > summary:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }
.faq-chevron { color: var(--muted-fg); transition: transform 200ms ease; }
.faq-item[open] > summary .faq-chevron { transform: rotate(180deg); }
.faq-body { padding: 0 22px 20px; }
.faq-body p { font-size: 0.9375rem; color: var(--muted-fg); text-wrap: pretty; }
@media (prefers-reduced-motion: reduce) { .faq-chevron { transition: none; } }

/* ── Waitlist form ───────────────────────────────────────────────────────── */
.wl-card {
  position: relative;
  max-width: 720px;
  margin: 40px auto 0;
  padding: 24px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--glass-border);
  background: var(--glass-solid);
  box-shadow: var(--shadow-lg);
  text-align: left;
}
@supports (backdrop-filter: blur(1px)) {
  .wl-card { background: var(--glass-bg); backdrop-filter: blur(16px) saturate(150%); }
}
@media (min-width: 640px) { .wl-card { padding: 32px; } }
.wl-card-solo { margin-top: 32px; }

.wl-card-title { font-size: 1.125rem; font-weight: 600; letter-spacing: -0.01em; }
.wl-card-sub { margin-top: 6px; margin-bottom: 22px; font-size: 0.875rem; color: var(--muted-fg); }

.wl-grid { display: grid; gap: 16px; }
@media (min-width: 640px) { .wl-grid { grid-template-columns: repeat(2, 1fr); } }
.field-wide { grid-column: 1 / -1; }

.field { display: grid; gap: 7px; }
.field > label {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.opt { font-weight: 400; color: var(--muted-fg); }

.field input[type="email"],
.field input[type="text"],
.field select {
  width: 100%;
  height: 46px;
  padding-inline: 16px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong);
  background: var(--card);
  color: var(--fg);
  font-size: 0.9375rem;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.field input::placeholder { color: color-mix(in srgb, var(--muted-fg) 75%, transparent); }
.field input:focus-visible,
.field select:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 1px;
  border-color: var(--ring);
}
.field input[aria-invalid="true"] { border-color: var(--destructive); }

.select-wrap { position: relative; display: block; }
.select-wrap select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 42px;
  cursor: pointer;
}
.select-chevron {
  position: absolute;
  right: 16px; top: 50%;
  transform: translateY(-50%);
  color: var(--muted-fg);
  pointer-events: none;
}

.field-check {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 12px;
  align-items: start;
  margin-top: 20px;
}
.field-check input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px; height: 20px;
  margin-top: 2px;
  border-radius: 6px;
  border: 1.5px solid var(--border-strong);
  background: var(--card);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background-color 140ms ease, border-color 140ms ease;
}
.field-check input[type="checkbox"]::after {
  content: "";
  width: 10px; height: 6px;
  border-left: 2px solid var(--btn-fg);
  border-bottom: 2px solid var(--btn-fg);
  transform: rotate(-45deg) translate(1px, -1px);
  opacity: 0;
}
.field-check input[type="checkbox"]:checked {
  background-image: var(--grad-btn);
  border-color: transparent;
}
.field-check input[type="checkbox"]:checked::after { opacity: 1; }
.field-check input[aria-invalid="true"] { border-color: var(--destructive); }
.field-check > label {
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.55;
  color: var(--muted-fg);
  cursor: pointer;
}

.field-error {
  display: none;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--destructive);
}
.field-error.is-shown { display: block; }
.field-error-block.is-shown { margin-top: 8px; }

.hp-field {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px; height: 1px;
  overflow: hidden;
}

.wl-form .btn-lg { margin-top: 22px; }
.wl-note { margin-top: 14px; font-size: 0.75rem; line-height: 1.55; color: var(--muted-fg); }

.wl-status { display: none; margin-top: 14px; font-size: 0.875rem; font-weight: 500; }
.wl-status.is-shown { display: block; }
.wl-status.is-error { color: var(--destructive); }
.wl-status.is-error a { color: inherit; }

.spinner {
  display: none;
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--btn-fg) 40%, transparent);
  border-top-color: var(--btn-fg);
}
.wl-form.is-busy .spinner { display: block; animation: spin 700ms linear infinite; }
.wl-form.is-busy .btn-arrow { display: none; }
.wl-form.is-busy [data-submit] { opacity: 0.85; cursor: progress; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .wl-form.is-busy .spinner { animation-duration: 1600ms; }
}

/* Shown only by the <noscript> stylesheet in the document head. */
.wl-noscript {
  display: none;
  font-size: 0.9375rem;
  color: var(--muted-fg);
  text-wrap: pretty;
}
.wl-noscript a { color: var(--primary-text); font-weight: 600; }

.wl-done { text-align: center; padding: 12px 0 8px; }
.wl-done:focus-visible { outline: 2px solid var(--ring); outline-offset: 8px; border-radius: var(--radius); }
.wl-done-icon {
  display: inline-grid;
  place-items: center;
  width: 48px; height: 48px;
  margin-bottom: 16px;
  border-radius: 50%;
  background-image: var(--grad-soft);
  color: var(--primary-text);
}
.wl-done h3 { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; }
.wl-done p { margin-top: 10px; font-size: 0.9375rem; color: var(--muted-fg); text-wrap: pretty; }

/* ── Closing CTA section ─────────────────────────────────────────────────── */
.section-cta {
  position: relative;
  overflow: hidden;
  padding-block: 96px;
  border-top: 1px solid var(--border);
}
@media (min-width: 640px) { .section-cta { padding-block: 112px; } }
.cta-inner { position: relative; z-index: 1; text-align: center; }
.cta-inner .h2 { margin-top: 12px; }
.cta-inner .lead { margin-top: 16px; }
.cta-secondary { margin-top: 20px; font-size: 0.875rem; color: var(--muted-fg); }

/* ── Footer ──────────────────────────────────────────────────────────────── */
.site-footer {
  padding-top: 56px;
  padding-bottom: 32px;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
}
.footer-grid { display: grid; gap: 36px; }
@media (min-width: 640px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 32px; } }

.footer-brand .brand { margin-bottom: 16px; }
.footer-tagline { max-width: 34ch; font-size: 0.875rem; color: var(--muted-fg); text-wrap: pretty; }
.footer-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  font-size: 0.8125rem;
  font-weight: 500;
}

.footer-head {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-fg);
  margin-bottom: 14px;
}
.footer-col ul { display: grid; gap: 10px; }
.footer-col a {
  font-size: 0.875rem;
  color: var(--muted-fg);
  text-decoration: none;
  transition: color 140ms ease;
}
.footer-col a:hover { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  font-size: 0.8125rem;
  color: var(--muted-fg);
}
/* ── Reveal on scroll ────────────────────────────────────────────────────── */
/* Everything is visible by default. JS adds .will-reveal only to elements that
   are still below the fold when it runs, so there is no flash, and no-JS or
   reduced-motion visitors always get the finished page. */
@media (prefers-reduced-motion: no-preference) {
  .reveal.will-reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 600ms ease-out, transform 600ms ease-out;
  }
  .reveal.will-reveal.is-visible {
    opacity: 1;
    transform: none;
  }
  .cards .will-reveal:nth-child(2),
  .steps .will-reveal:nth-child(2),
  .tiers .will-reveal:nth-child(2),
  .hero-caps .will-reveal:nth-child(2) { transition-delay: 60ms; }
  .cards .will-reveal:nth-child(3),
  .steps .will-reveal:nth-child(3),
  .tiers .will-reveal:nth-child(3),
  .hero-caps .will-reveal:nth-child(3) { transition-delay: 120ms; }
  .cards .will-reveal:nth-child(4),
  .steps .will-reveal:nth-child(4),
  .tiers .will-reveal:nth-child(4) { transition-delay: 180ms; }
}

/* ==========================================================================
   ADDED BLOCKS
   AI Concierge, permission ladder, roadmap, founder story and trust facts,
   the two build routes, and the illustrative work section. Everything below
   reuses the tokens and component conventions declared above.

   Note on specificity: several of these blocks label their parts with <p>
   elements (a tag pill, a meter, a caption). Where a generic ".x > p" rule
   exists, the labelled variants restate what they need at a higher
   specificity so the generic rule cannot win.
   ========================================================================== */

/* ── Shared additions ────────────────────────────────────────────────────── */
.section-head-wide { max-width: 780px; }
.icon-tile-lg { width: 52px; height: 52px; border-radius: var(--radius-card); }
.section-head .icon-tile-lg { display: grid; margin: 0 auto 18px; }

.hero-link,
.faq-body a,
.pricing-foot a {
  color: var(--primary-text);
  font-weight: 600;
  text-underline-offset: 3px;
}

/* ── AI Concierge ────────────────────────────────────────────────────────── */
.cx { overflow: hidden; }
.cx-inner { position: relative; z-index: 1; }
.cx .aurora { opacity: 0.55; }

.cx-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 22px;
  padding: 8px 18px;
  border-radius: var(--radius-pill);
  border: 1px solid color-mix(in srgb, var(--primary) 32%, var(--border));
  background: color-mix(in srgb, var(--primary) 8%, var(--card));
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg);
  text-wrap: balance;
}
.cx-badge .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--primary);
  flex: none;
}

/* Permission ladder: the reassuring half of an autonomous agent. */
.ladder-wrap {
  margin-top: 24px;
  padding: 26px 20px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--card);
  box-shadow: var(--shadow-sm);
}
@media (min-width: 640px) { .ladder-wrap { margin-top: 32px; padding: 36px; } }

.ladder-head { max-width: 46rem; }
.ladder-head h3 {
  margin-top: 12px;
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
@media (min-width: 640px) { .ladder-head h3 { font-size: 1.625rem; } }
.ladder-intro { margin-top: 12px; font-size: 0.9375rem; color: var(--muted-fg); text-wrap: pretty; }

.ladder { display: grid; gap: 14px; margin-top: 28px; }
@media (min-width: 900px) { .ladder { grid-template-columns: repeat(3, 1fr); gap: 18px; } }

.rung {
  padding: 20px;
  border-radius: var(--radius-card);
  border: 1px solid var(--border);
  background: var(--surface-2);
}
.rung-top { border-color: color-mix(in srgb, var(--primary) 38%, var(--border)); }
.rung h4 { margin-top: 10px; font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; }
.rung > p { margin-top: 8px; font-size: 0.875rem; color: var(--muted-fg); text-wrap: pretty; }
.rung > p.rung-step {
  margin-top: 0;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary-text);
}
.rung > p.rung-meter {
  height: 6px;
  margin-top: 18px;
  border-radius: var(--radius-pill);
  background: var(--muted);
  overflow: hidden;
}
.rung-meter > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background-image: var(--grad-btn);
}
.lv1 > span { width: 34%; }
.lv2 > span { width: 67%; }
.lv3 > span { width: 100%; }

.ladder-foot {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 24px;
  font-size: 0.875rem;
  color: var(--muted-fg);
  text-wrap: pretty;
}
.ladder-foot .icon { margin-top: 2px; color: var(--primary-text); }

/* ── Roadmap: styled so it can never be mistaken for shipped work ────────── */
.notice-soon {
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 40rem;
  margin-top: 20px;
  padding: 12px 18px;
  border-radius: var(--radius);
  border: 1px dashed var(--border-strong);
  background: var(--muted);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--fg);
  text-align: left;
  text-wrap: pretty;
}
.notice-soon .icon { margin-top: 2px; color: var(--muted-fg); }

.soon-grid { display: grid; gap: 16px; }
@media (min-width: 640px) { .soon-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .soon-grid { grid-template-columns: repeat(4, 1fr); gap: 20px; } }

/* A real card, not a dashed outline on transparent: a dashed border with no
   fill read as unstyled text on a dark background (founder feedback,
   2026-07-30). The "not shipped yet" signal now lives entirely in the
   "Planned" tag and the muted icon tile, so the card itself can look as
   finished as every other card on the page. */
.soon-card {
  padding: 24px;
  border-radius: var(--radius-card);
  border: 1px solid var(--border);
  background: var(--card);
  box-shadow: var(--shadow-sm);
  transition: border-color 180ms ease, box-shadow 220ms ease;
}
.soon-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); }
.soon-card h3 { margin-top: 16px; font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; }
.soon-card > p { margin-top: 8px; font-size: 0.875rem; color: var(--muted-fg); text-wrap: pretty; }
.soon-card > p.soon-tag {
  display: flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  margin: 0 0 18px;
  padding: 4px 11px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong);
  background: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-fg);
}
/* Deliberately not the brand gradient: nothing in this section has shipped. */
.icon-tile-soon { background-image: none; background: var(--muted); color: var(--muted-fg); }
.soon-note { margin-top: 32px; text-align: center; font-size: 0.875rem; color: var(--muted-fg); text-wrap: pretty; }

/* ── Founder story and trust facts ───────────────────────────────────────── */
.story { display: grid; gap: 16px; max-width: 46rem; margin-inline: auto; }
.story p { font-size: 1rem; color: var(--muted-fg); text-wrap: pretty; }
@media (min-width: 640px) { .story p { font-size: 1.0625rem; } }
.story strong { color: var(--fg); font-weight: 600; }

.facts { display: grid; gap: 16px; margin: 40px 0 48px; }
@media (min-width: 640px) { .facts { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 768px) { .facts { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
@media (min-width: 640px) { .facts-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .facts-4 { grid-template-columns: repeat(4, 1fr); gap: 20px; } }
.fact {
  padding: 24px;
  border-radius: var(--radius-card);
  border: 1px solid var(--border);
  background: var(--card);
  box-shadow: var(--shadow-sm);
}
.fact-v {
  display: block;
  margin-top: 16px;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 2.75rem;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.fact-v-word { font-size: 1.875rem; }
.fact-l {
  display: block;
  margin-top: 12px;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}
.fact-n { display: block; margin-top: 10px; font-size: 0.8125rem; color: var(--muted-fg); text-wrap: pretty; }

/* ── Build it your way ───────────────────────────────────────────────────── */
.ways {
  margin-bottom: 40px;
  padding: 26px 20px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--card);
  box-shadow: var(--shadow-sm);
}
@media (min-width: 640px) { .ways { margin-bottom: 48px; padding: 32px; } }
.ways-head { max-width: 46rem; }
.ways-head h3 {
  margin-top: 12px;
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
@media (min-width: 640px) { .ways-head h3 { font-size: 1.625rem; } }
.ways-grid { display: grid; gap: 22px; margin-top: 26px; }
@media (min-width: 768px) { .ways-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.way h4 { margin-top: 14px; font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; }
.way p { margin-top: 8px; font-size: 0.875rem; color: var(--muted-fg); text-wrap: pretty; }

/* ── Illustrative work, and the reserved quote slots ─────────────────────── */
.proof-grid { display: grid; gap: 16px; }
@media (min-width: 768px) { .proof-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .proof-grid { grid-template-columns: repeat(4, 1fr); gap: 20px; } }

.proof-card {
  display: flex;
  flex-direction: column;
  padding: 24px;
  border-radius: var(--radius-card);
  border: 1px solid var(--border);
  background: var(--card);
  box-shadow: var(--shadow-sm);
}
.proof-card h3 {
  margin-top: 16px;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.proof-card > p { margin-top: 10px; font-size: 0.875rem; color: var(--muted-fg); text-wrap: pretty; }
.proof-card > p:not(.proof-tag):not(.proof-cap) { flex: 1; }
.proof-card > p.proof-tag {
  align-self: flex-start;
  margin-top: 0;
  padding: 4px 11px;
  border-radius: var(--radius-pill);
  border: 1px dashed var(--border-strong);
  background: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-fg);
}
.proof-card > p.proof-cap {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  font-size: 0.8125rem;
}
.proof-cap .icon { margin-top: 1px; color: var(--primary-text); }
.proof-cap b { font-weight: 600; color: var(--fg); }

.quote-block { margin-top: 52px; }
.quote-head { text-align: center; font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; }
.quote-sub {
  max-width: 44rem;
  margin: 12px auto 0;
  text-align: center;
  font-size: 0.9375rem;
  color: var(--muted-fg);
  text-wrap: pretty;
}
.quote-grid { display: grid; gap: 16px; margin-top: 26px; }
@media (min-width: 768px) { .quote-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } }
.quote-slot {
  padding: 26px;
  border-radius: var(--radius-card);
  border: 1px dashed var(--border-strong);
  background: transparent;
}
.slot-tag {
  display: flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  padding: 4px 11px;
  border-radius: var(--radius-pill);
  background: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-fg);
}
.slot-body { margin-top: 16px; font-size: 0.9375rem; color: var(--muted-fg); text-wrap: pretty; }
.slot-foot { margin-top: 12px; font-size: 0.8125rem; font-weight: 600; }

/* ── Pricing: the AI-included notice ─────────────────────────────────────── */
.pricing-notice-ai { display: flex; align-items: flex-start; gap: 10px; text-align: left; }
.pricing-notice-ai .icon { margin-top: 2px; color: var(--primary-text); }

/* ── Footer addition ─────────────────────────────────────────────────────── */
.footer-note { margin-top: 10px; font-size: 0.8125rem; color: var(--muted-fg); text-wrap: pretty; }

/* ── Reveal stagger for the new grids ────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .soon-grid .will-reveal:nth-child(2),
  .proof-grid .will-reveal:nth-child(2) { transition-delay: 60ms; }
  .soon-grid .will-reveal:nth-child(3),
  .proof-grid .will-reveal:nth-child(3) { transition-delay: 120ms; }
  .soon-grid .will-reveal:nth-child(4),
  .proof-grid .will-reveal:nth-child(4) { transition-delay: 180ms; }
}

/* ── Wide screens: stop growing, let the page breathe ────────────────────── */
@media (min-width: 1536px) {
  .container { max-width: 1280px; }
}

/* ── Print ───────────────────────────────────────────────────────────────── */
@media print {
  .site-header, .aurora, .grid-bg, .nav-drawer { display: none !important; }
  body { background: #fff; color: #000; }
  .reveal { opacity: 1 !important; transform: none !important; }
  /* Keep the footer mark recognisable on paper: print the dark plate, drop the
     rim and glow, which only ever cost toner. */
  .logo-badge {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    box-shadow: none !important;
  }
}

/* ── Very narrow phones (Galaxy Fold cover screen, iPhone SE 1) ───────────────
   Verified 2026-07-30: at 360px and up the header fits with room to spare, but
   at 320px the row measured 331px wide, so the menu button was clipped by 11px
   at the right edge of the viewport. The page never scrolled sideways (the body
   clips), which is exactly what makes this easy to miss: nothing looks wrong
   until you try to press the button that is half off the screen.

   Everything below 380px is tightened rather than hidden: the brand, the
   waitlist button and the menu button all survive, just smaller. Nothing here
   applies at 380px or above, so the verified 360-2560 layouts are untouched. */
@media (max-width: 379px) {
  .header-inner { gap: 8px; }
  .brand { gap: 8px; }
  .brand-word { font-size: 1rem; }
  .header-actions { gap: 6px; }
  .header-actions .btn-sm { padding-inline: 11px; font-size: 0.75rem; }
  .nav-toggle { width: 36px; height: 36px; }
}

/* ==========================================================================
   ECOSYSTEM (added 2026-07-30)
   The named dashboards: cockpit, open, depo, maven, studio. Reuses the .card
   and .icon-tile conventions above so it reads as part of the same system,
   not a bolted-on block.
   ========================================================================== */
.eco-grid { display: grid; gap: 16px; }
@media (min-width: 640px) { .eco-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .eco-grid { grid-template-columns: repeat(5, 1fr); gap: 14px; } }

.eco-card {
  padding: 22px 20px;
  border-radius: var(--radius-card);
  border: 1px solid var(--border);
  background: var(--card);
  box-shadow: var(--shadow-sm);
  transition: border-color 180ms ease, box-shadow 220ms ease, transform 220ms ease;
}
.eco-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); }
.eco-card-planned { border-style: dashed; }

.eco-domain {
  display: block;
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--primary-text);
}
.eco-card h3 { margin-top: 4px; font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; }
.eco-card p { margin-top: 6px; font-size: 0.8125rem; color: var(--muted-fg); text-wrap: pretty; }
.eco-planned-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 10px;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong);
  background: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-fg);
}
.eco-category {
  margin-top: 18px;
  text-align: center;
  font-size: 0.8125rem;
  color: var(--muted-fg);
}
.eco-category b { color: var(--fg); font-weight: 600; }

/* ==========================================================================
   "TELL US WHAT YOU NEED" DIALOG (added 2026-07-30)
   Native <dialog>: focus trap, Escape-to-close, and the ::backdrop all come
   free from the browser. Every trigger is a real mailto link in the markup
   (see app.js), so a browser without dialog.showModal() just sends an email
   instead of doing nothing.
   ========================================================================== */
.need-dialog {
  width: min(560px, calc(100vw - 32px));
  max-height: min(88vh, 720px);
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--card);
  box-shadow: var(--shadow-lg);
  color: var(--fg);
}
.need-dialog::backdrop {
  background: rgba(8, 6, 3, 0.55);
  backdrop-filter: blur(2px);
}
[data-theme="dark"] .need-dialog::backdrop { background: rgba(0, 0, 0, 0.7); }
.need-dialog[open] { display: flex; flex-direction: column; }
.need-dialog-inner { padding: 28px 26px 26px; overflow-y: auto; }

.need-dialog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.need-dialog-head h2 { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; }
.need-dialog-head p { margin-top: 6px; font-size: 0.875rem; color: var(--muted-fg); }

.need-close {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--muted-fg);
  cursor: pointer;
  transition: background-color 140ms ease, color 140ms ease;
}
.need-close:hover { background: var(--muted); color: var(--fg); }

.need-dialog form { margin-top: 20px; }

.field textarea {
  width: 100%;
  min-height: 96px;
  padding: 12px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--border-strong);
  background: var(--card);
  color: var(--fg);
  font: inherit;
  font-size: 0.9375rem;
  resize: vertical;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.field textarea::placeholder { color: color-mix(in srgb, var(--muted-fg) 75%, transparent); }
.field textarea:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; border-color: var(--ring); }
.field textarea[aria-invalid="true"] { border-color: var(--destructive); }

@media (prefers-reduced-motion: no-preference) {
  .need-dialog {
    transition: opacity 200ms ease, transform 200ms ease, overlay 200ms ease allow-discrete, display 200ms ease allow-discrete;
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }
  .need-dialog[open] { opacity: 1; transform: none; }
  @starting-style {
    .need-dialog[open] { opacity: 0; transform: translateY(10px) scale(0.98); }
  }
}

/* ==========================================================================
   INLINE "TELL US WHAT YOU NEED" DROPDOWN FORM (added 2026-08-01)
   Replaces the popup modal trigger in the showcase CTA card with a smooth
   height-animated panel that drops inline into the page layout.
   ========================================================================== */

/* The toggle button chevron rotates when open */
.inline-need-chevron {
  transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
}
#inline-need-toggle[aria-expanded="true"] .inline-need-chevron {
  transform: rotate(180deg);
}

/* Panel wrapper: animates open/close via grid-template-rows trick */
.inline-need-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 300ms cubic-bezier(0.4, 0, 0.2, 1),
              opacity 280ms ease;
  opacity: 0;
  overflow: hidden;
  margin-top: 0;
}
.inline-need-panel:not([hidden]) {
  grid-template-rows: 1fr;
  opacity: 1;
  margin-top: 20px;
}
/* Override hidden so the display:grid stays active for animation */
.inline-need-panel[hidden] {
  display: grid !important;
}

/* Inner card: must have overflow:hidden for the grid trick to work */
.inline-need-card {
  overflow: hidden;
  min-height: 0;
}

/* The form card itself – inherits wl-card styles but adds subtle border accent */
.inline-need-panel .wl-card {
  border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--border));
  border-radius: var(--radius-lg);
  background: var(--card);
  box-shadow: 0 4px 24px -4px rgba(0, 0, 0, 0.12);
  text-align: left;
}
[data-theme="dark"] .inline-need-panel .wl-card {
  box-shadow: 0 4px 32px -4px rgba(0, 0, 0, 0.4);
}

/* Left-align text inside the inline panel (show-cta is center-aligned) */
.show-cta .inline-need-panel label,
.show-cta .inline-need-panel .wl-note,
.show-cta .inline-need-panel .field-check {
  text-align: left;
}

/* Reduced-motion: skip the transition */
@media (prefers-reduced-motion: reduce) {
  .inline-need-panel { transition: none; }
  .inline-need-chevron { transition: none; }
}

/* ==========================================================================
   PORTFOLIO SHOWCASE MOCKUP  (2026-08-01)
   ========================================================================== */
.m-portfolio-body {
  padding: 8px;
  background: var(--muted);
}
.m-portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.m-port-tile {
  aspect-ratio: 1;
  border-radius: 8px;
  display: block;
}
.m-port-1 { background: linear-gradient(135deg, hsl(11 80% 72%), hsl(344 70% 75%)); }
.m-port-2 { background: linear-gradient(135deg, hsl(250 60% 78%), hsl(200 70% 80%)); }
.m-port-3 { background: var(--muted); border: 1px solid var(--border); }
.m-port-4 { background: var(--muted); border: 1px solid var(--border); }
.m-port-5 { background: linear-gradient(135deg, hsl(344 70% 75%), hsl(280 60% 78%)); }
.m-port-6 { background: linear-gradient(135deg, hsl(200 70% 80%), hsl(11 80% 72%)); }
[data-theme="dark"] .m-port-3,
[data-theme="dark"] .m-port-4 { background: var(--surface-2); }

/* ==========================================================================
   KICKER-OS LABEL — "AtlasVect OS" styled badge above the build section
   ========================================================================== */
.kicker-os {
  margin-bottom: 12px;
}
.kicker-os-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 14px 4px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid color-mix(in srgb, var(--primary) 40%, transparent);
  background: color-mix(in srgb, var(--primary) 8%, transparent);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background-clip: text;
  -webkit-background-clip: text;
  color: var(--primary-text);
}
.kicker-os-label::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--primary);
  animation: kicker-pulse 2.2s ease-in-out infinite;
}
@keyframes kicker-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.7); }
}

/* ==========================================================================
   LINK BUTTON — unstyled button that looks like a text link
   ========================================================================== */
.link-btn {
  background: none;
  border: none;
  padding: 0;
  color: var(--primary-text);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 140ms ease;
}
.link-btn:hover { color: var(--primary); }

/* ==========================================================================
   ENHANCED SCROLL REVEAL ANIMATIONS  (2026-08-01)
   Extends the existing .reveal system with directional variants.
   All guarded by prefers-reduced-motion — reduced-motion visitors always
   see the finished page.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {

  /* Directional reveal variants */
  .reveal-left.will-reveal  { opacity: 0; transform: translateX(-28px); }
  .reveal-right.will-reveal { opacity: 0; transform: translateX(28px); }
  .reveal-scale.will-reveal { opacity: 0; transform: scale(0.94); }
  .reveal-fade.will-reveal  { opacity: 0; transform: none; }

  .reveal-left.will-reveal.is-visible,
  .reveal-right.will-reveal.is-visible,
  .reveal-scale.will-reveal.is-visible,
  .reveal-fade.will-reveal.is-visible {
    opacity: 1;
    transform: none;
    transition: opacity 650ms cubic-bezier(0.22, 1, 0.36, 1),
                transform 650ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  /* Showcase rows: copy slides in from its own side */
  .show-row .show-copy.will-reveal         { opacity: 0; transform: translateX(-24px); }
  .show-row-flip .show-copy.will-reveal    { opacity: 0; transform: translateX(24px); }
  .show-row .show-copy.will-reveal.is-visible,
  .show-row-flip .show-copy.will-reveal.is-visible {
    opacity: 1; transform: none;
    transition: opacity 680ms cubic-bezier(0.22, 1, 0.36, 1),
                transform 680ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  .show-row .frame.will-reveal         { opacity: 0; transform: translateX(20px) scale(0.97); }
  .show-row-flip .frame.will-reveal    { opacity: 0; transform: translateX(-20px) scale(0.97); }
  .show-row .frame.will-reveal.is-visible,
  .show-row-flip .frame.will-reveal.is-visible {
    opacity: 1; transform: none;
    transition: opacity 750ms cubic-bezier(0.22, 1, 0.36, 1) 80ms,
                transform 750ms cubic-bezier(0.22, 1, 0.36, 1) 80ms;
  }

  /* Stagger: facts row */
  .facts .will-reveal:nth-child(1) { transition-delay: 0ms; }
  .facts .will-reveal:nth-child(2) { transition-delay: 80ms; }
  .facts .will-reveal:nth-child(3) { transition-delay: 160ms; }
  .facts .will-reveal:nth-child(4) { transition-delay: 240ms; }

  /* Hero parallax container */
  .hero-parallax {
    will-change: transform;
  }

  /* Section heading entrance: gentle scale + fade */
  .section-head.will-reveal {
    opacity: 0;
    transform: translateY(20px) scale(0.99);
    transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
                transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  .section-head.will-reveal.is-visible {
    opacity: 1;
    transform: none;
  }

}

/* Parallax hero bg layer — always present, transform driven by JS */
.hero-bg-parallax {
  position: absolute;
  inset: -15%;
  pointer-events: none;
  will-change: transform;
}

/* ==========================================================================
   BRAND KICKER (AtlasVect OS colored title)
   ========================================================================== */
.brand-kicker {
  font-size: clamp(1.25rem, 1.15rem + 0.6vw, 1.6rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
  display: block;
}