/* -------------------------------------------------------------
   SoldLoop marketing - shared design system, the SoldLoop look.
   Same family as the panel's public pages (apps/admin/app/(public)/lux.css):
   a midnight gradient canvas, frosted graphite cards on a gold hairline,
   a serif display face (Fraunces) over Manrope, champagne and royal gold
   accents, and a gold metal pill for the primary action.
   The neutral scale (--n-*) keeps its roles from the light theme and is
   inverted for dark: --n-50 is the inset surface, --n-900 is the ivory ink,
   so the pages' inline styles carry over unchanged. The accent (--a-*)
   is gold. The older class names (tile, chip, cta-btn, mock...) are kept.
   ------------------------------------------------------------- */

*,*::before,*::after{box-sizing:border-box; margin:0; padding:0}

:root{
  color-scheme: dark;
  /* Brand palette */
  --gold:#D4AF37; --champagne:#F0C27B; --midnight:#0B1220; --graphite:#1A1F2B; --black:#05070D;
  --ivory:#F6F1E7;
  --metal:linear-gradient(135deg, #F7E3B0 0%, #F0C27B 32%, #D4AF37 68%, #A8842A 100%);
  --gold-line:rgba(212,175,55,.2); --gold-line-strong:rgba(212,175,55,.42);
  /* Neutral roles, dark */
  --n-50:#0f1828; --n-100:#1a2437; --n-200:#273249; --n-300:#38445f; --n-400:#7f889a;
  --n-500:#9aa2b1; --n-600:#b4bac5; --n-700:#cdd1d8; --n-800:#e6e3dc; --n-900:#F6F1E7; --n-950:#fffaf0;
  --a-50:rgba(212,175,55,.1); --a-100:rgba(212,175,55,.24); --a-600:#D4AF37; --a-700:#F0C27B;
  --surface:#121a2a; --surface-2:#172136;
  --card:#111a2b;
  --hair:rgba(246,241,231,.09); --hair-strong:rgba(246,241,231,.16);
  --ok:#7fdcaa; --ok-soft:rgba(52,211,153,.12); --ok-line:rgba(52,211,153,.32);
  --warn:#F0C27B; --warn-soft:rgba(240,194,123,.12); --warn-line:rgba(240,194,123,.34);
  --warm:#f3a77f; --warm-soft:rgba(243,167,127,.12); --warm-line:rgba(243,167,127,.34);
  --bad:#f6948d;
  /* Frame band: translucent midnight under a gold hairline */
  --band:rgba(7,11,20,.82); --band-solid:#070b14; --band-hover:rgba(212,175,55,.1); --band-line:var(--gold-line);
  --band-text:#c9ccd3; --band-label:#c2a35c;
  --shadow-card:inset 0 1px 0 rgba(255,255,255,.04), 0 10px 30px rgba(0,0,0,.28);
  --shadow-card-hover:inset 0 1px 0 rgba(255,255,255,.05), 0 18px 44px rgba(0,0,0,.4), 0 0 0 1px rgba(212,175,55,.08);
  --shadow-pop:inset 0 1px 0 rgba(255,255,255,.05), 0 30px 80px rgba(0,0,0,.5);
  --font:'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --serif:'Fraunces', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --mono:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Names the pages' inline styles were written against. */
  --ink:var(--n-900); --paper:var(--surface); --paper-2:var(--n-50);
  --line:var(--n-200); --line-strong:var(--n-300);
  --muted:var(--n-600); --dim:var(--n-600);
  --c1:var(--warm); --c2:var(--a-600); --c3:var(--a-700); --c4:var(--champagne); --c5:var(--warn);
}

html{scroll-behavior:smooth; background:var(--black)}

body{
  font-family: var(--font);
  font-weight: 450;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.004em;
  color: var(--n-900);
  background:linear-gradient(180deg, var(--midnight) 0%, #090f1b 60%, var(--black) 100%);
  background-color: var(--midnight);
  line-height: 1.6; overflow-x: hidden;
}
::selection{background:rgba(212,175,55,.32); color:var(--ivory)}
a{color:inherit; text-decoration:none}
:focus-visible{outline:2px solid var(--gold); outline-offset:3px}
h1,h2,h3,h4{text-wrap:balance}
.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}
.contact-note{margin:0 0 20px; padding:12px 16px; border-radius:12px; font-size:14px; line-height:1.55; border:1px solid var(--ok-line); background:var(--ok-soft); color:var(--ok)}
.contact-note.is-error{border-color:var(--warm-line); background:var(--warm-soft); color:var(--warm)}
p{text-wrap:pretty}

/* Display headings are the serif, set in one colour. */
.hero h1, .section-h, .cta-box h2, .legal-head h1, .legal h2, h3[style*="clamp("], h3[style*="font-size:28px"]{
  font-family:var(--serif) !important; font-weight:440 !important; letter-spacing:-.018em !important;
  font-optical-sizing:auto;
}
.italic{font:inherit !important; color:inherit !important; letter-spacing:inherit !important}
.serif-it{font-style:italic; font-family:var(--serif); font-weight:400}
.mono{font-family:var(--font); font-weight:500; letter-spacing:.01em}
.serif{font-family:var(--serif) !important; font-weight:440 !important; letter-spacing:-.01em}
.num{font-feature-settings:"tnum"; letter-spacing:-.03em; line-height:1.1}

.container{max-width:1200px; margin:0 auto; padding:0 24px}
.container-lg{max-width:1280px; margin:0 auto; padding:0 24px}

.grain{display:none}

/* ── Card (the panel's .lp-panel) ──────────────────────────── */
.tile{
  background:var(--card);
  border:1px solid var(--hair);
  border-radius:16px;
  padding:20px;
  position:relative; overflow:hidden;
  transition:border-color .15s ease, box-shadow .15s ease;
}
a.tile:hover{border-color:var(--gold-line-strong); box-shadow:var(--shadow-card-hover)}
/* Colour variants are white cards; the colour lives in the icon and pills. */
.tile-glow, .tile-cyan, .tile-violet, .tile-acid, .tile-amber{background:var(--card); border-color:var(--hair)}

/* ── Pill (the panel's .pill / .lp-status) ─────────────────── */
.chip{
  width:fit-content; max-width:100%;
  display:inline-flex; align-items:center; gap:6px;
  border:1px solid transparent;
  border-radius:999px; padding:2px 10px;
  font-family:var(--font); font-size:11.5px; font-weight:600; line-height:18px;
  color:var(--n-700); background:var(--n-100);
  letter-spacing:0; text-transform:none;
  transition:background .15s;
}
a.chip:hover{background:var(--n-200)}
/* Colour variants are retired: every chip is the same quiet neutral. */
.chip-violet, .chip-cyan, .chip-amber, .chip-magenta{background:var(--n-100); color:var(--n-700)}
.chip-soon{background:var(--n-100); color:var(--n-600)}


/* ── Buttons (the panel's .btn-primary / .btn-ghost) ───────── */
.cta-btn, .ghost-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:42px; padding:0 18px;
  border-radius:999px;
  font-family:inherit; font-size:14px; font-weight:600; letter-spacing:0;
  white-space:nowrap; cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease, background .15s, border-color .15s, color .15s;
}
.cta-btn{
  background:var(--metal); color:var(--midnight); border:1px solid transparent; font-weight:700;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45);
}
.cta-btn:hover{transform:translateY(-1px); filter:brightness(1.06)}
.cta-btn:active, .ghost-btn:active{transform:scale(.98)}
.cta-btn-lg{min-height:52px; padding:0 26px; font-size:15.5px}
.ghost-btn{background:rgba(255,255,255,.02); color:var(--ivory); border:1px solid var(--gold-line-strong)}
.ghost-btn:hover{background:var(--band-hover); border-color:var(--gold); color:var(--ivory)}
.cta-btn-lg ~ .ghost-btn{min-height:52px; padding:0 24px; font-size:15px}

/* ── Nav: the panel's black top band ───────────────────────── */
nav.top{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:var(--band);
  -webkit-backdrop-filter:saturate(140%) blur(14px); backdrop-filter:saturate(140%) blur(14px);
  border-bottom:1px solid var(--gold-line);
}
nav.top .row{display:flex; align-items:center; justify-content:space-between; padding-top:10px; padding-bottom:10px; gap:12px}
.logo{display:flex; align-items:center; gap:10px}
.logo-mark{width:32px; height:32px; flex-shrink:0; display:block; border-radius:9px; border:1px solid var(--gold-line); background:var(--midnight)}
.logo-text{font-family:var(--serif); font-size:17px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--ivory)}
nav.top .logo-text{color:var(--ivory)}
nav.top .logo .mono{color:var(--band-label) !important}
.nav-links{display:flex; align-items:center; gap:2px}
.nav-links > a, .nav-drop-trigger{
  padding:7px 12px; color:var(--band-text); font-size:13.5px; font-weight:500;
  border-radius:8px; transition:background .15s, color .15s;
  background:none; border:none; cursor:pointer; font-family:inherit;
  display:inline-flex; align-items:center; gap:4px;
}
.nav-links > a:hover, .nav-drop-trigger:hover{color:var(--ivory); background:var(--band-hover)}
.nav-links > a.active{color:var(--champagne); background:var(--band-hover)}
.nav-drop{position:relative}
.nav-drop-trigger .caret{
  width:7px; height:7px;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translateY(-1px); transition:transform .15s; margin-left:3px;
}
.nav-drop.open .nav-drop-trigger{color:var(--ivory); background:var(--band-hover)}
.nav-drop.open .nav-drop-trigger .caret{transform:rotate(-135deg) translateY(-1px) translateX(1px)}
.nav-drop-panel{
  display:none; position:absolute; top:calc(100% + 8px); left:-10px; min-width:320px;
  background:linear-gradient(180deg, #172238, #0f1726); border:1px solid var(--gold-line); border-radius:14px; padding:6px;
  box-shadow:var(--shadow-pop); z-index:101;
}
.nav-drop.open .nav-drop-panel{display:block; animation:pop .14s ease-out}
@keyframes pop{from{opacity:0; transform:translateY(-4px)} to{opacity:1; transform:none}}
.nav-drop-panel a{display:block; padding:9px 12px; border-radius:8px; color:var(--n-800); transition:background .12s}
.nav-drop-panel a:hover{background:var(--band-hover)}
.nav-drop-panel .nd-title{font-size:13.5px; font-weight:650; color:var(--n-900)}
.nav-drop-panel .nd-desc{font-size:12px; color:var(--n-600); margin-top:1px; line-height:1.4}
.nav-drop-panel .nd-divider{height:1px; background:var(--gold-line); margin:6px 4px}
.nav-right{display:flex; align-items:center; gap:8px}
nav.top .nav-right .chip{
  background:transparent; color:var(--band-text); border:1px solid var(--band-line);
  font-size:13px; font-weight:600; padding:0 14px; min-height:36px; border-radius:999px;
}
nav.top .nav-right .chip:hover{background:var(--band-hover); color:var(--ivory)}
nav.top .nav-right .cta-btn{min-height:36px; padding:0 16px !important; font-size:13px !important}
.nav-signin{display:none !important}
nav.top .nav-right .chip{white-space:nowrap}
.mobile-menu-btn{display:none; background:none; border:none; color:var(--ivory); cursor:pointer; padding:6px}

/* ── Hero: the panel's page head ───────────────────────────── */
.hero{padding:132px 0 72px; position:relative}
.hero-meta{
  font-size:12.5px; color:var(--n-600);
  margin-bottom:18px; display:flex; flex-wrap:wrap; gap:6px 12px; align-items:center;
}
.hero h1{
  font-size:clamp(40px, 5.8vw, 72px); line-height:1.02;
  margin-bottom:22px; color:var(--ivory);
}
.hero p.lead{
  font-size:18px; color:var(--n-600);
  max-width:600px; line-height:1.6; margin-bottom:28px;
}
.hero-cta{display:flex; gap:10px; flex-wrap:wrap}
.hero-trust{margin-top:28px; display:flex; gap:8px; flex-wrap:wrap}

/* ── Stat tiles (the panel's .lp-stat) ─────────────────────── */
.kpi-bento{
  display:grid; gap:16px;
  grid-template-columns:repeat(12, minmax(0, 1fr));
  margin-top:56px;
}
.kpi-bento .tile{padding:14px 16px 16px}
.kpi-label{
  font-family:var(--font); font-size:12.5px; font-weight:500;
  color:var(--n-600); letter-spacing:0; text-transform:none; margin-bottom:2px;
}
.kpi-label::first-letter{text-transform:uppercase}
.kpi-num{font-family:var(--serif); font-size:34px; font-weight:500; color:var(--champagne); letter-spacing:-.02em}
.kpi-num.lg{font-size:40px}
.kpi-sub{font-family:var(--font); font-size:12px; font-weight:500; color:var(--n-600); margin-top:4px; line-height:1.45}
.spark svg{display:block; width:100%; height:36px}

/* ── Ticker ───────────────────────────────────────────────── */
.ticker-wrap{
  border-top:1px solid var(--gold-line); border-bottom:1px solid var(--gold-line);
  background:rgba(7,11,20,.5); overflow:hidden; margin-top:32px;
}
.marquee{display:inline-flex; gap:36px; animation:scroll 42s linear infinite;
  padding:12px 0; font-size:12.5px; font-weight:500; color:var(--n-600); white-space:nowrap;
}
@keyframes scroll{from{transform:translateX(0)} to{transform:translateX(-50%)}}

/* ── Sections ──────────────────────────────────────────────── */
section{padding:72px 0; position:relative; z-index:2}
.section-meta{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font); font-size:11.5px; font-weight:600; line-height:18px;
  color:var(--champagne); background:transparent; border:0;
  border-radius:0; padding:0; letter-spacing:0; text-transform:none; font-size:15px;
  margin-bottom:12px;
}
.section-h{
  font-size:clamp(32px, 4.2vw, 52px); line-height:1.08;
  margin-bottom:16px; color:var(--ivory);
}
.section-desc{font-size:16.5px; color:var(--n-600); line-height:1.65; max-width:680px}
.section-head{margin-bottom:44px; max-width:720px}
.section-head.center{text-align:center; margin-left:auto; margin-right:auto}

/* ── Capability cards ──────────────────────────────────────── */
.cap-bento{display:grid; gap:16px; grid-template-columns:repeat(12, minmax(0,1fr))}
.cap-tile{display:flex; flex-direction:column; gap:12px}
.icon-box{
  width:38px; height:38px; border-radius:11px; border:1px solid var(--gold-line);
  display:flex; align-items:center; justify-content:center;
  font-size:18px; flex-shrink:0;
}
.icon-box svg{width:18px; height:18px}
.icon-acid{background:var(--a-50); color:var(--a-700)}
.icon-cyan{background:var(--a-50); color:var(--a-600)}
.icon-violet{background:var(--a-50); color:var(--a-700)}
.icon-amber{background:var(--warn-soft); color:var(--warn)}
.icon-magenta{background:var(--warm-soft); color:var(--warm)}
.cap-tile h3{font-size:18px; font-weight:700; letter-spacing:-.015em; line-height:1.25; color:var(--ivory)}
.cap-tile p{font-size:14px; color:var(--n-600); line-height:1.6}
.cap-meta{
  margin-top:auto; padding-top:12px; border-top:1px solid var(--gold-line);
  display:flex; justify-content:space-between; align-items:center; gap:8px;
  font-family:var(--font); font-size:11.5px; font-weight:600; color:var(--n-600); letter-spacing:.02em;
}
.arrow{display:inline-block; transition:transform .2s}
a.cap-tile:hover .arrow{transform:translate(2px,-2px)}

/* ── Product mock: the panel frame (black band over a white sheet) ── */
.mock{
  background:var(--card);
  border:1px solid var(--hair);
  border-radius:16px; overflow:hidden;
}
.mock-bar{
  display:flex; align-items:center; gap:10px; padding:9px 14px;
  background:var(--band-solid); border-bottom:1px solid var(--gold-line);
}
.mock-bar::before{
  content:""; width:18px; height:18px; border-radius:5px; flex-shrink:0;
  background:var(--midnight) url("/brand/lion-128.webp") center/18px no-repeat;
}
.mock-bar .dot{display:none}
.mock-bar .url{
  margin-left:0; font-family:var(--font); font-size:12px; font-weight:500;
  color:var(--band-text); display:flex; align-items:center; gap:6px; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.mock-body{padding:16px 18px 18px}
/* The small label at the top of a mock body: the panel's rail section label. */
.mock-body .mono[style*="letter-spacing"], .mock-label{
  font-family:var(--font) !important; font-size:12px !important; font-weight:500 !important;
  letter-spacing:0 !important; text-transform:none; color:var(--n-500) !important;
}

/* ── Code block ────────────────────────────────────────────── */
.code{
  background:rgba(5,7,13,.6); border:1px solid var(--n-200);
  border-radius:12px; padding:16px; font-family:var(--mono);
  font-size:12px; line-height:1.7; color:var(--n-800); white-space:pre;
  overflow-x:auto;
}
.code .key{color:var(--a-700)}
.code .str{color:var(--ok)}
.code .num{color:var(--warn)}
.code .com{color:var(--n-600)}

/* ── Ecosystem ─────────────────────────────────────────────── */
.ecosystem-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:16px}
.eco{display:flex; flex-direction:column; gap:12px}
.eco-logo{
  width:40px; height:40px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:15px; color:var(--midnight); background:var(--metal) !important; border:1px solid var(--gold-line);
}
.eco-mark{background:var(--midnight) !important; object-fit:cover; flex-shrink:0}
.ecosystem-grid.eco-2{grid-template-columns:repeat(2, minmax(0,1fr)); max-width:880px; margin:0 auto
}
.eco h3{font-size:17px; font-weight:700; letter-spacing:-.015em}
.eco p{font-size:14px; color:var(--n-600); line-height:1.6; flex:1}

/* ── Closing CTA: the panel's black band ───────────────────── */
.cta{padding-bottom:88px}
.cta-box{
  text-align:center;
  color:var(--ivory);
  border-top:1px solid var(--gold-line);
  padding:72px 8px 8px;
  position:relative;
}
.cta-box > *{position:relative}
.cta-box .meta{font-size:15px; font-weight:600; color:var(--champagne); margin-bottom:12px}
.cta-box h2{font-size:clamp(32px, 4.2vw, 52px); line-height:1.08; margin-bottom:14px; color:var(--ivory)}
.cta-box p{font-size:16px; color:var(--band-text); margin-bottom:28px; max-width:600px; margin-left:auto; margin-right:auto}
.cta-box .chip{background:var(--band-hover); color:var(--band-text)}

/* ── Footer ────────────────────────────────────────────────── */
footer{background:var(--black); padding:64px 0 28px; border-top:1px solid var(--hair)}
.footer-grid{display:grid; grid-template-columns:2fr 1fr 1fr 1fr 1fr; gap:40px; margin-bottom:40px}
.footer-lockup{display:block; width:200px; max-width:100%; border-radius:12px; overflow:hidden}
.footer-lockup img{display:block; width:100%; height:auto}
.footer-brand p{color:var(--n-600); font-size:13.5px; margin-top:14px; max-width:280px; line-height:1.6}
.footer-col .footer-h{font-size:13.5px; font-weight:700; color:var(--ivory); margin-bottom:14px}
.footer-col a{display:block; color:var(--n-700); font-size:13.5px; margin-bottom:10px; transition:color .15s}
.footer-col a:hover{color:var(--champagne)}
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center;
  padding-top:22px; border-top:1px solid var(--gold-line);
  font-size:12px; color:var(--n-600); flex-wrap:wrap; gap:8px;
}
.footer-bottom .mono{font-family:var(--font); font-weight:500}

/* ── Vision / roadmap band ─────────────────────────────────── */
.band-vision{background:rgba(5,7,13,.45); border-top:1px solid var(--gold-line); border-bottom:1px solid var(--gold-line)}
.roadmap-grid{display:grid; gap:16px; grid-template-columns:repeat(3,minmax(0,1fr))}
.roadmap-card{display:flex; flex-direction:column; gap:10px}
.roadmap-card .r-meta{font-size:13.5px; font-weight:600; color:var(--champagne)}

/* Rows inside a mock: the panel's Today's focus list */
.coach-row{display:flex; gap:12px; align-items:flex-start; padding:12px 0; border-top:1px solid var(--n-200)}
.coach-row:first-of-type{border-top:0}
.coach-when{
  font-family:var(--font); font-size:11.5px; font-weight:600; line-height:18px;
  color:var(--n-700); background:var(--n-100); border-radius:6px; padding:1px 7px;
  white-space:nowrap; min-width:72px; text-align:center; margin-top:1px;
}
.coach-row > div > div:first-child{color:var(--n-900)}

/* ── Panel UI mockups (product shots drawn in HTML) ────────── */
.ui-panel{background:var(--card); border:1px solid var(--gold-line); border-radius:16px; box-shadow:var(--shadow-card); overflow:hidden}
.ui-bar{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:12px 18px; border-bottom:1px solid var(--n-200)}
.ui-bar h4{font-size:14.5px; font-weight:700; letter-spacing:-.01em; color:var(--n-900)}
.ui-bar h4 .ct{margin-left:8px; font-size:12.5px; font-weight:500; color:var(--n-600)}
.ui-bar .hint{font-size:12px; color:var(--n-600)}
.ui-link{font-size:12.5px; color:var(--n-600); text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--n-300)}
.ui-body{padding:14px 18px 18px}
.ui-row{display:flex; align-items:center; gap:12px; padding:10px 0; border-top:1px solid var(--n-100)}
.ui-row:first-child{border-top:0}
.ui-rank{width:24px; height:24px; border-radius:99px; background:var(--a-50); color:var(--champagne); font-size:11.5px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0}
.ui-who{font-size:14px; font-weight:600; color:var(--n-900)}
.ui-what{font-size:12.5px; color:var(--n-600); margin-top:1px}
.ui-btn{display:inline-flex; align-items:center; justify-content:center; min-height:30px; padding:0 12px; border-radius:7px; font-size:12.5px; font-weight:600; white-space:nowrap; border:1px solid var(--gold-line-strong); background:transparent; color:var(--n-800); border-radius:999px}
.ui-btn.dark{background:var(--metal); color:var(--midnight); border-color:transparent}
.ui-tag{display:inline-flex; align-items:center; padding:0 6px; border-radius:5px; font-size:11px; font-weight:600; line-height:17px; background:var(--warm-soft); color:var(--warm); margin-left:6px; vertical-align:1px}
.ui-tag.new{background:var(--n-100); color:var(--n-700)}
.ui-card{border:1px solid var(--n-200); border-radius:12px; padding:14px; background:var(--n-50)}
.ui-card + .ui-card{margin-top:10px}
.ui-card .top{display:flex; justify-content:space-between; gap:8px; align-items:baseline}
.ui-card .src{font-size:12px; color:var(--n-600); white-space:nowrap}
.ui-quote{font-size:13px; color:var(--n-600); margin:4px 0 10px}
.ui-quote b{font-weight:500; color:var(--n-800)}
.ui-draft{border:1px solid var(--n-200); border-radius:10px; padding:9px 11px; font-size:13px; color:var(--n-800); margin-bottom:10px; background:rgba(5,7,13,.5)}
.ui-actions{display:flex; gap:8px; flex-wrap:wrap}
.ui-sum{display:flex; flex-wrap:wrap; gap:4px 16px; font-size:13.5px; color:var(--n-600)}
.ui-sum b{font-weight:700; color:var(--n-900); margin-right:4px}
.ui-sum .late{color:var(--bad)}
.ui-sum .late b{color:var(--bad)}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 1024px){
  .kpi-bento > *{grid-column: span 6 !important}
  .cap-bento > *{grid-column: span 6 !important}
  .ecosystem-grid{grid-template-columns: repeat(2, 1fr)}
  .footer-grid{grid-template-columns: repeat(3, 1fr)}
}
/* The nav folds into a drawer under the black band. */
@media (max-width: 980px){
  .nav-links{
    display:none; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:2px; padding:10px 14px 16px;
    background:var(--band-solid); border-top:1px solid var(--band-line);
    box-shadow:0 24px 48px -16px rgba(0,0,0,.4);
  }
  .nav-links.open{display:flex}
  .nav-links > a, .nav-drop-trigger{padding:12px 12px; font-size:15px; border-radius:8px; justify-content:space-between; width:100%}
  .nav-drop{width:100%}
  .nav-drop-panel{position:static; min-width:0; background:transparent; border:none; box-shadow:none; padding:2px 0 4px 10px; animation:none !important}
  .nav-drop-panel a{padding:9px 12px; color:var(--band-text)}
  .nav-drop-panel a:hover{background:var(--band-hover)}
  .nav-drop-panel .nd-title{color:var(--ivory)}
  .nav-drop-panel .nd-desc{color:var(--band-label)}
  .mobile-menu-btn{display:block}
}
@media (max-width: 768px){
  .hero{padding:96px 0 48px}
  .kpi-bento{margin-top:40px}
  .kpi-bento > *,
  .cap-bento > *{grid-column: span 12 !important}
  .ecosystem-grid{grid-template-columns: 1fr}
  .footer-grid{grid-template-columns: 1fr 1fr; gap:28px}
  .ecosystem-grid.eco-2{grid-template-columns:1fr}
  .cta-box{padding:44px 22px; border-radius:20px}
  section{padding:60px 0}
  .roadmap-grid{grid-template-columns:1fr}
  .container, .container-lg{padding:0 16px}
}
@media (max-width: 480px){
  .footer-grid{grid-template-columns: 1fr 1fr; gap:28px 16px}
  .footer-brand{grid-column:1 / -1}
  .hero h1{font-size:40px}
  nav.top .logo .mono{display:none}
  nav.top .nav-right .chip{display:none}
  .nav-links > a.nav-signin{display:flex !important}
  .logo-text{font-size:16px; letter-spacing:.1em}
  nav.top .row{gap:8px}
  .ui-row{flex-wrap:wrap}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .marquee{animation:none}
  *,*::before,*::after{transition-duration:.01ms !important; animation-duration:.01ms !important; animation-iteration-count:1 !important}
}

/* Sidekick tray (the panel's slide-out "Ready to approve") */
.tray{box-shadow:var(--shadow-pop)}
.tray-head{padding:16px 18px 14px; border-bottom:1px solid var(--gold-line)}
.tray-kicker{font-size:12px; color:var(--n-600)}
.tray-title{font-family:var(--serif); font-size:21px; font-weight:500; letter-spacing:-.01em; color:var(--n-900); margin-top:1px}
.tray-sub{font-size:12.5px; color:var(--n-600); margin-top:2px}

/* Form fields: the panel's .lp-input (white, hairline, 8px, accent focus ring) */
form input, form select, form textarea{
  background-color:rgba(7,11,20,.6) !important; border:1px solid var(--n-200) !important; border-radius:12px !important;
  padding:11px 14px !important; color:var(--n-900) !important;
  transition:border-color .15s, box-shadow .15s;
}
form input::placeholder, form textarea::placeholder{color:var(--n-500)}
form input:hover, form select:hover, form textarea:hover{border-color:var(--n-300) !important}
form input:focus, form select:focus, form textarea:focus{
  outline:none; border-color:var(--gold) !important; box-shadow:0 0 0 4px rgba(212,175,55,.14);
}
form .mono{font-size:12px !important}
form input, form select, form textarea{width:100%; min-width:0}
form .form-row > *{min-width:0}
@media (max-width: 480px){ form .form-row{grid-template-columns:1fr !important} }
form select{
  padding-right:36px !important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23c2a35c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important; background-position:right 12px center !important; background-size:16px !important;
}

/* ── Agent crew: the panel's start-screen slides (rows, chat, pills) ── */
.crew{display:grid; gap:16px; grid-template-columns:repeat(12, minmax(0,1fr))}
.crew > .ag{grid-column:span 4}
.crew > .ag.wide{grid-column:span 6}
.ag{display:flex; flex-direction:column; gap:0; padding:16px 16px 22px}
.ag-mock{
  position:relative; border-radius:14px; padding:38px 14px 14px; min-height:208px;
  display:flex; flex-direction:column; gap:8px; justify-content:center;
  border:1px solid var(--hair); background:#0d1524;
}
.ag-sample{position:absolute; top:12px; left:14px; font-size:12px; font-weight:500; color:var(--n-500)}
.ag-status{position:absolute; top:12px; right:14px; font-size:12px; font-weight:600; color:var(--champagne)}
.ag-tag{margin:22px 4px 6px; font-size:14px; font-weight:600; color:var(--champagne)}
.ag h3{font-family:var(--serif); font-size:24px; line-height:1.18; font-weight:440; letter-spacing:-.012em; color:var(--ivory); margin:0 4px 10px}
.ag p{margin:0 4px; font-size:14.5px; line-height:1.65; color:var(--n-600)}
.ag-kicker{font-family:var(--serif); font-size:17px; color:var(--ivory); margin-bottom:2px}
.ag-row{display:flex; justify-content:space-between; gap:12px; align-items:center; padding:10px 13px; border-radius:12px; background:rgba(255,255,255,.035); border:1px solid rgba(212,175,55,.12); font-size:13.5px}
.ag-row span{min-width:0; color:var(--n-600); line-height:1.4}
.ag-row b{flex:none; font-size:13px; font-weight:700; color:var(--ivory)}
.ag-row.is-hot{border-color:var(--gold-line-strong); background:rgba(214,186,132,.08)}
.ag-row.is-hot b{color:var(--champagne)}
.ag-chat{align-self:flex-start; max-width:85%; padding:10px 14px; border-radius:16px 16px 16px 4px; background:rgba(255,255,255,.06); font-size:13.5px; line-height:1.45; color:var(--ivory)}
.ag-chat.me{align-self:flex-end; background:var(--metal); color:var(--midnight); font-weight:600; border-radius:16px 16px 4px 16px}
.ag-meta{display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; margin-top:4px; font-size:12px; color:var(--n-600)}
.ag-meta b{color:var(--champagne); font-weight:700}
.ag-list{display:flex; align-items:center; gap:12px; font-size:13.5px; padding:3px 0}
.ag-list > div{flex:1; min-width:0}
.ag-list b{display:block; font-weight:600; color:var(--ivory); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ag-list small{color:var(--n-600); font-size:12px}
.ag-car{flex:none; width:50px; height:38px; border-radius:10px; background:linear-gradient(135deg, #3a4a66, #1a2438); border:1px solid rgba(212,175,55,.12)}
.ag-car.c2{background:linear-gradient(135deg, #5a3a3a, #24161a)}
.ag-car.c3{background:linear-gradient(135deg, #5d5240, #221d16)}
.ag-pill{flex:none; font-style:normal; font-size:11.5px; font-weight:700; padding:4px 10px; border-radius:99px; border:1px solid var(--gold-line-strong); color:var(--n-700)}
.ag-pill.gold{border-color:transparent; background:var(--metal); color:var(--midnight)}
.ag-post{display:flex; gap:12px; align-items:center; margin-bottom:2px}
.ag-post-img{flex:none; width:60px; height:60px; border-radius:12px; background:linear-gradient(160deg, #F7E3B0, #A8842A 60%, #2a2114)}
.ag-post small{font-size:12.5px; font-weight:600; color:var(--champagne)}
.ag-post div > div{margin-top:3px; font-size:13.5px; line-height:1.45; color:var(--ivory)}
.ag-card-top{display:flex; align-items:center; gap:14px}
.ag-card-top b{display:block; font-family:var(--serif); font-size:18px; font-weight:500; color:var(--ivory)}
.ag-card-top small{color:var(--n-600); font-size:12.5px}
.ag-avatar{display:grid; place-items:center; flex:none; width:46px; height:46px; border-radius:50%; background:var(--metal); color:var(--midnight); font-weight:800; letter-spacing:.04em}
.ag-feats{list-style:none; margin-top:10px; display:grid; grid-template-columns:1fr 1fr; gap:8px 12px; font-size:13px; color:var(--ivory)}
.ag-feats li{display:flex; align-items:center; gap:8px}
.ag-feats svg{flex:none; color:var(--gold)}
@media (max-width: 1024px){
  .crew > .ag, .crew > .ag.wide{grid-column:span 6}
}
@media (max-width: 768px){
  .crew > .ag, .crew > .ag.wide{grid-column:span 12}
  .ag h3{font-size:22px}
}
.ag-points{list-style:none; margin-top:22px; display:flex; flex-direction:column; gap:12px; font-size:14.5px; color:var(--n-800)}
.ag-points li{display:flex; gap:10px; align-items:flex-start; line-height:1.55}
.ag-points svg{flex:none; margin-top:4px; color:var(--gold)}

/* ── SoldLoop on your phone ── */
.phone{
  width:100%; max-width:280px; margin:0 auto; padding:14px 12px 18px; border-radius:34px;
  border:1px solid var(--gold-line-strong); background:linear-gradient(180deg, #121b2c, #0a101c);
  box-shadow:var(--shadow-pop); display:flex; flex-direction:column; gap:10px;
}
.phone-notch{width:84px; height:20px; border-radius:99px; background:var(--black); margin:0 auto 6px}
.phone-note{display:flex; gap:10px; align-items:flex-start; padding:10px 11px; border-radius:16px; background:rgba(255,255,255,.06); border:1px solid rgba(212,175,55,.12)}
.phone-note img{flex:none; width:30px; height:30px; border-radius:8px; border:1px solid var(--gold-line)}
.phone-note b{display:block; font-size:12.5px; font-weight:700; color:var(--ivory)}
.phone-note span{display:block; font-size:12px; line-height:1.4; color:var(--n-600)}
.phone-note small{margin-left:auto; flex:none; font-size:11px; color:var(--n-500)}

/* ── Homepage ───────────────────────────────────────────────
   Type first, one idea per band, hairlines instead of boxes. The
   slider is the panel's start-screen tour (apps/admin start/page.tsx). */
.h-hero{padding:132px 0 72px}
.h-hero-grid{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:48px 64px; align-items:start}
.h-hero-copy{padding-top:56px}
.h-tagline{font-size:17px; font-weight:600; color:var(--champagne); margin-bottom:20px}
.h-hero h1{
  font-family:var(--serif); font-weight:420; font-optical-sizing:auto;
  font-size:clamp(46px, 6.2vw, 84px); line-height:1; letter-spacing:-.028em;
  color:var(--ivory);
}
.h-lead{margin-top:28px; font-size:19px; line-height:1.6; color:var(--n-700); max-width:38ch}
.h-hero .hero-cta{margin-top:32px}
.h-price{margin-top:16px; font-size:14.5px; color:var(--n-600)}

/* Hero chat: an iPhone Messages thread. Everything sits in the flow at its
   final size, so the height is reserved; the animation only fades and lifts. */
.chat-wrap{justify-self:end; width:min(360px, 100%)}
.chat{
  --screen:#000; --them:#26252b; --me:#E6BD62; --ease:cubic-bezier(.22,1,.36,1);
  border-radius:44px; padding:10px; background:#1b1d22;
  box-shadow:inset 0 0 0 1px rgba(246,241,231,.12), 0 40px 80px -30px rgba(0,0,0,.7);
}
.chat-head{display:grid; grid-template-columns:24px 1fr 24px; justify-items:center; align-items:center; row-gap:4px; padding:14px 16px 10px; border-radius:34px 34px 0 0; background:#121214; border-bottom:1px solid rgba(255,255,255,.08); color:var(--ivory)}
.chat-back{grid-row:1 / 3; grid-column:1; color:#E6BD62}
.chat-avatar{grid-column:2; display:grid; place-items:center; width:38px; height:38px; border-radius:50%; background:linear-gradient(180deg, #8e939e, #5f646e); color:#fff; font-size:14.5px; font-weight:600}
.chat-name{grid-column:2; font-size:12.5px; font-weight:500; color:var(--n-700)}
.chat-thread{display:flex; flex-direction:column; gap:4px; padding:10px 16px 16px; border-radius:0 0 34px 34px; background:var(--screen)}
.chat-day{text-align:center; font-size:11px; font-weight:500; color:#8e8e93; margin:0 0 4px}
.msg{
  position:relative; isolation:isolate; max-width:80%; padding:7px 12px; border-radius:18px;
  font-size:14px; line-height:1.3; letter-spacing:-.005em; overflow-wrap:break-word;
}
.msg::before, .msg::after{content:""; position:absolute; bottom:0; height:18px; z-index:-1}
.msg.them{align-self:flex-start; background:var(--them); color:#fff; margin-top:5px}
.msg.them::before{left:-7px; width:20px; background:var(--them); border-bottom-right-radius:15px}
.msg.them::after{left:-10px; width:10px; background:var(--screen); border-bottom-right-radius:10px}
.msg-slot{position:relative; display:flex; flex-direction:column; align-items:flex-end}
.msg.me{background:var(--me); color:#111; font-weight:500}
.msg.me::before{right:-7px; width:20px; background:var(--me); border-bottom-left-radius:15px}
.msg.me::after{right:-10px; width:10px; background:var(--screen); border-bottom-left-radius:10px}
.chat-note{align-self:flex-end; font-size:11px; font-weight:500; color:#8e8e93; margin-top:-2px}
.typing{display:none; position:absolute; right:0; bottom:0; gap:4px; align-items:center; padding:12px 14px; border-radius:19px; background:var(--them)}
.typing i{width:7px; height:7px; border-radius:50%; background:#8e8e93}
.chat-card{display:flex; gap:12px; align-items:center; margin-top:8px; padding:10px 12px; border-radius:16px; background:#151619; border:1px solid rgba(230,189,98,.35)}
.chat-card-icon{display:grid; place-items:center; flex:none; width:38px; height:38px; border-radius:11px; background:rgba(230,189,98,.14); color:#E6BD62}
.chat-card b{display:block; font-size:14.5px; font-weight:700; color:var(--ivory)}
.chat-card small{display:block; margin-top:1px; font-size:12.5px; color:#a1a1a8}
.chat-wrap figcaption{display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-top:16px; padding:0 8px; font-size:13px; line-height:1.5; color:var(--n-600)}
.chat-replay{flex:none; background:none; border:0; padding:6px 0; font:inherit; font-weight:600; color:var(--champagne); cursor:pointer; text-decoration:underline; text-decoration-color:var(--gold-line-strong); text-underline-offset:4px}
.chat-replay:hover{text-decoration-color:var(--champagne)}

/* Animated only when site.js adds .chat-anim (motion allowed); without it the
   whole thread shows as is. Bubbles are revealed with visibility and a clip,
   never by fading, so their text is at full contrast whenever it shows. */
.chat-anim .msg, .chat-anim .chat-note, .chat-anim .chat-card{visibility:hidden}
.chat-anim .typing{display:flex; opacity:0}
.chat-anim.is-playing .msg, .chat-anim.is-playing .chat-card{animation:chat-in .55s var(--ease) var(--t) both}
.chat-anim.is-playing .msg.them{transform-origin:0 100%}
.chat-anim.is-playing .msg.me{transform-origin:100% 100%}
.chat-anim.is-playing .chat-note{animation:chat-show .01s linear var(--t) both}
.chat-anim.is-playing .typing{animation:chat-typing var(--d) linear var(--t) both; transform-origin:100% 100%}
.chat-anim.is-playing .typing i{animation:chat-dot 1.1s ease-in-out infinite}
.chat-anim.is-playing .typing i:nth-child(2){animation-delay:.15s}
.chat-anim.is-playing .typing i:nth-child(3){animation-delay:.3s}
@keyframes chat-in{
  0%{visibility:hidden; clip-path:inset(100% -14px 0 -14px round 18px); transform:translateY(10px) scale(.94)}
  1%{visibility:visible}
  100%{visibility:visible; clip-path:inset(-14px -14px -14px -14px round 0); transform:none}
}
@keyframes chat-show{from{visibility:hidden} to{visibility:visible}}
@keyframes chat-typing{0%{opacity:0; transform:scale(.8)} 12%{opacity:1; transform:none} 88%{opacity:1; transform:none} 100%{opacity:0; transform:scale(.9)}}
@keyframes chat-dot{0%, 60%, 100%{opacity:.35; transform:none} 30%{opacity:1; transform:translateY(-3px)}}

.h-h2{font-family:var(--serif); font-weight:420; font-size:clamp(32px, 3.8vw, 50px); line-height:1.08; letter-spacing:-.02em; color:var(--ivory); max-width:16ch}
.h-body{font-size:17px; line-height:1.65; color:var(--n-600); max-width:44ch; margin-top:18px}
.h-small{font-size:14.5px; color:var(--n-600)}
.h-link{display:inline-block; margin-top:24px; font-weight:600; color:var(--champagne); text-decoration:underline; text-decoration-color:var(--gold-line-strong); text-underline-offset:5px; text-decoration-thickness:1px; transition:text-decoration-color .15s}
.h-link:hover{text-decoration-color:var(--champagne)}
.h-split{display:grid; grid-template-columns:5fr 7fr; gap:40px 72px; align-items:start}

/* Slider: native scroll-snap, site.js adds dots, arrows and autoplay. */
.h-slides-sec{padding:8px 0 104px}
.slides{border-top:1px solid var(--hair); padding-top:48px}
.slides-track{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; overscroll-behavior-x:contain; scrollbar-width:none; -webkit-overflow-scrolling:touch}
.slides-track::-webkit-scrollbar{display:none}
.slide{flex:0 0 100%; min-width:0; scroll-snap-align:start; display:grid; grid-template-columns:5fr 7fr; gap:32px 72px; align-items:center; padding:0 2px}
.slide-tag{font-size:15px; font-weight:600; color:var(--champagne); margin-bottom:14px}
.slide h2{font-family:var(--serif); font-weight:420; font-size:clamp(30px, 3.4vw, 46px); line-height:1.1; letter-spacing:-.02em; color:var(--ivory)}
.slide-copy > p:last-child{margin-top:18px; font-size:17px; line-height:1.65; color:var(--n-600); max-width:40ch}
.slide-mock{
  position:relative; min-height:300px; padding:32px 28px 44px; border-radius:22px;
  display:flex; flex-direction:column; justify-content:center; gap:10px;
  background:#0d1524; border:1px solid var(--hair);
}
.slide-mock figcaption{position:absolute; left:28px; bottom:14px; font-size:12px; color:var(--n-500)}
.slides-nav{display:flex; align-items:center; justify-content:flex-start; gap:18px; margin-top:32px}
.slides-btn{display:grid; place-items:center; width:44px; height:44px; border-radius:50%; border:1px solid var(--hair-strong); background:transparent; color:var(--ivory); cursor:pointer; transition:border-color .15s, background .15s}
.slides-btn:hover{border-color:var(--gold); background:var(--band-hover)}
.slides-dots{display:flex; gap:4px}
.slides-dots button{width:24px; height:44px; padding:0; border:0; background:transparent; cursor:pointer; display:grid; place-items:center}
.slides-dots button::before{content:""; width:7px; height:7px; border-radius:99px; background:rgba(246,241,231,.24); transition:width .3s cubic-bezier(.22,1,.36,1), background .3s}
.slides-dots button[aria-current="true"]{width:40px}
.slides-dots button[aria-current="true"]::before{width:28px; background:var(--gold)}

/* Mock pieces (the panel's st-* rows, chat, pills) */
.sm-row{display:flex; justify-content:space-between; gap:12px; align-items:center; padding:13px 16px; border-radius:12px; background:rgba(255,255,255,.035); border:1px solid var(--hair); font-size:14.5px}
.sm-row span{min-width:0; color:var(--n-600)}
.sm-row b{flex:none; font-weight:700; color:var(--ivory)}
.sm-row.hot{border-color:var(--gold-line-strong)}
.sm-row.hot b{color:var(--champagne)}
.sm-chat{align-self:flex-start; max-width:80%; padding:12px 16px; border-radius:18px 18px 18px 4px; background:rgba(255,255,255,.07); font-size:15px; line-height:1.45; color:var(--ivory)}
.sm-chat.me{align-self:flex-end; background:var(--metal); color:var(--midnight); font-weight:600; border-radius:18px 18px 4px 18px}
.sm-meta{display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; margin-top:8px; font-size:13px; color:var(--n-600)}
.sm-meta b{color:var(--champagne)}
.sm-list{display:flex; align-items:center; gap:14px; font-size:14.5px; padding:4px 0}
.sm-list > div{flex:1; min-width:0}
.sm-list b{display:block; font-weight:600; color:var(--ivory); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.sm-list small{font-size:13px; color:var(--n-600)}
.sm-car{flex:none; width:60px; height:44px; border-radius:10px; background:linear-gradient(135deg, #3a4a66, #1a2438)}
.sm-car.c2{background:linear-gradient(135deg, #5a3a3a, #24161a)}
.sm-car.c3{background:linear-gradient(135deg, #5d5240, #221d16)}
.sm-pill{flex:none; font-style:normal; font-size:12.5px; font-weight:700; padding:5px 12px; border-radius:99px; border:1px solid var(--hair-strong); color:var(--n-700)}
.sm-pill.gold{border-color:transparent; background:var(--metal); color:var(--midnight)}
.sm-post{display:flex; gap:14px; align-items:center; margin-bottom:4px}
.sm-post-img{flex:none; width:68px; height:68px; border-radius:12px; background:linear-gradient(160deg, #F7E3B0, #A8842A 60%, #2a2114)}
.sm-post small{display:block; font-size:13px; font-weight:600; color:var(--champagne)}
.sm-post span{display:block; margin-top:2px; font-size:15px; line-height:1.45; color:var(--ivory)}
.sm-card-top{display:flex; align-items:center; gap:14px}
.sm-card-top b{display:block; font-family:var(--serif); font-size:21px; font-weight:500; color:var(--ivory)}
.sm-card-top small{font-size:13.5px; color:var(--n-600)}
.sm-avatar{display:grid; place-items:center; flex:none; width:52px; height:52px; border-radius:50%; background:var(--metal); color:var(--midnight); font-weight:800}
.sm-feats{list-style:none; margin-top:16px; display:grid; grid-template-columns:1fr 1fr; gap:10px 16px; font-size:14.5px; color:var(--ivory)}
.sm-feats li{display:flex; align-items:center; gap:10px}
.sm-feats li::before{content:""; flex:none; width:10px; height:6px; margin-top:-3px; border-left:2px solid var(--gold); border-bottom:2px solid var(--gold); transform:rotate(-45deg)}

/* Crew as a ruled list, not cards */
.h-crew, .h-app, .h-price-sec{border-top:1px solid var(--hair); padding:104px 0}
.crew-list > div{display:grid; grid-template-columns:200px minmax(0,1fr); gap:6px 32px; padding:22px 0; border-top:1px solid var(--hair)}
.crew-list > div:first-child{border-top:0; padding-top:4px}
.crew-list dt{font-family:var(--serif); font-size:23px; font-weight:450; line-height:1.25; color:var(--ivory)}
.crew-list dd{font-size:16.5px; line-height:1.6; color:var(--n-600)}
.crew-list .later dt{color:var(--n-600)}

/* Phone: grounded on the band's bottom edge */
.h-app{padding-bottom:0; overflow:hidden}
.h-app-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:48px 72px; align-items:end}
.h-app-copy{align-self:center; padding-bottom:72px}
.h-app-copy .h-small{margin-top:22px}
.h-phone{justify-self:center; width:min(320px, 100%); height:440px; padding:14px 14px 0; border:1px solid var(--hair-strong); border-bottom:0; border-radius:48px 48px 0 0; background:#05070d}
.h-phone-screen{height:100%; border-radius:36px 36px 0 0; padding:26px 12px 0; display:flex; flex-direction:column; gap:10px; background:linear-gradient(180deg, #1b2740 0%, #0f1828 70%)}
.h-phone-time{text-align:center; font-size:56px; font-weight:300; letter-spacing:-.02em; line-height:1; color:var(--ivory); margin:6px 0 20px}
.phone-note{display:flex; gap:10px; align-items:flex-start; padding:11px 12px; border-radius:18px; background:rgba(246,241,231,.09)}
.phone-note img{border:0}

/* Price, plainly */
.h-price-inc ul{list-style:none; margin-top:12px; border-top:1px solid var(--hair)}
.h-price-inc li{padding:16px 0; border-bottom:1px solid var(--hair); font-size:18px; color:var(--ivory)}

/* Quote */
.h-quote{padding:112px 0}
.h-quote blockquote{max-width:880px}
.h-quote blockquote p{font-family:var(--serif); font-weight:400; font-size:clamp(28px, 3.4vw, 44px); line-height:1.22; letter-spacing:-.015em; color:var(--ivory); text-indent:-.42em}
.h-quote blockquote p::before{content:"\201C"; color:var(--gold)}
.h-quote blockquote p::after{content:"\201D"; color:var(--gold)}
.h-quote footer{background:none; border:0; padding:0; margin-top:22px; font-size:14.5px; color:var(--n-600)}

/* Close */
.h-close{padding:40px 0 120px; text-align:center}
.h-close .container-lg{display:flex; flex-direction:column; align-items:center}
.h-close-mark{width:64px; height:64px; border-radius:16px; margin-bottom:28px}
.h-close h2{font-family:var(--serif); font-weight:420; font-size:clamp(34px, 4.6vw, 60px); line-height:1.06; letter-spacing:-.022em; color:var(--ivory); max-width:18ch}
.h-close .h-body{margin:18px auto 32px}
.h-close .hero-cta{justify-content:center}

@media (max-width: 900px){
  .h-hero{padding:116px 0 56px}
  .h-hero-grid, .h-split, .h-app-grid{grid-template-columns:1fr}
  .chat-wrap{justify-self:center}
  .h-hero-copy{padding-top:0}
  .slide{grid-template-columns:1fr; align-items:start}
  .slide-mock{order:-1; min-height:260px; padding:28px 18px 40px}
  .slide-mock figcaption{left:18px}
  .h-app-copy{padding-bottom:0}
  .h-crew, .h-app, .h-price-sec{padding-top:80px}
  .h-crew, .h-price-sec{padding-bottom:80px}
  .h-slides-sec{padding-bottom:80px}
  .slides{padding-top:36px}
}
@media (max-width: 560px){
  .h-hero h1{font-size:46px}
  .h-lead{font-size:18px}
  .crew-list > div{grid-template-columns:1fr}
  .sm-feats{grid-template-columns:1fr 1fr; font-size:13.5px}
  .sm-row, .sm-list{font-size:13.5px}
  .sm-chat{font-size:14px}
  .h-phone{height:400px}
  .h-quote{padding:88px 0}
}
.crew-list{max-width:920px}
/* Links inside running text are underlined, so they don't rely on colour alone. */
main p a:not([class]), main li a:not([class]), main dd a:not([class]){text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px}