/* ============================================================
   Vidcomply — landing page
   Clean white canvas, confident blue accent, deep-navy
   moments; monospace for technical labels/IDs.
   ============================================================ */

:root{
  /* surfaces — clean whites, cool */
  --cream:      #ffffff;
  --cream-2:    #f3f6fb;   /* alternating band — faint cool blue */
  --surface:    #ffffff;   /* cards / app chrome */
  --surface-2:  #f5f8fc;

  /* ink — cool near-black navy */
  --ink:        #131826;
  --ink-2:      #4b5468;
  --ink-3:      #8b93a4;
  --line:       #e6eaf1;
  --line-2:     #eef2f8;

  /* brand */
  --green:      #1f8a5b;   /* status / positive — fixed */
  --green-soft: #e3f3ec;
  --accent:     #2f63e0;   /* tweakable highlight (confident blue default) */
  --accent-soft:#e6eefc;
  --blue:       #2f63e0;

  /* module color-coding — like clip colors in an NLE (post-production convention) */
  --m-compliance: #2f63e0;  /* blue (primary) */
  --m-remediation:#5b53d6;  /* indigo */
  --m-audio:      #1f8a5b;  /* green */
  --m-lufs:       #2f8f9c;  /* teal */
  --m-cue:        #7b5fc4;  /* violet */

  /* tab-icon chip tints — module color-coded */
  --chip-1: color-mix(in srgb, var(--m-compliance) 15%, #fff);
  --chip-2: color-mix(in srgb, var(--m-remediation) 15%, #fff);
  --chip-3: color-mix(in srgb, var(--m-audio) 15%, #fff);
  --chip-4: color-mix(in srgb, var(--m-lufs) 15%, #fff);
  --chip-5: color-mix(in srgb, var(--m-cue) 15%, #fff);

  /* type */
  --display: "Schibsted Grotesk", "Hanken Grotesk", system-ui, sans-serif;
  --sans:    "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --maxw: 1200px;
  --pad: clamp(20px, 5vw, 64px);
  --radius: 16px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
body{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:var(--sans); font-size:17px; line-height:1.55;
  font-weight:400; letter-spacing:-0.005em;
  overflow-x:hidden;
}
h1,h2,h3,h4{ font-family:var(--display); font-weight:800; line-height:1.04; letter-spacing:-0.025em; margin:0; text-wrap:balance; }
p{ margin:0; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
button{ font-family:inherit; }

/* ---------- shared utilities ---------- */
.wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--pad); }
.eyebrow{
  font-family:var(--mono); font-size:12px; font-weight:500;
  letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-2);
  display:inline-flex; align-items:center; gap:9px;
}
.eyebrow::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--accent); flex:none; }
.mono{ font-family:var(--mono); }
.section{ padding-block:clamp(96px, 11vw, 184px); position:relative; }
.section--alt{ background:var(--cream-2); }
.lede{ color:var(--ink-2); font-size:clamp(17px,1.5vw,20px); line-height:1.5; max-width:48ch; }
.kicker-head{ font-size:clamp(34px,4.4vw,60px); margin-top:20px; max-width:17ch; letter-spacing:-0.03em; }

/* buttons */
.btn{
  display:inline-flex; align-items:center; gap:9px; height:48px; padding:0 22px;
  border-radius:999px; font-size:15px; font-weight:600; letter-spacing:-0.01em;
  border:1px solid transparent; cursor:pointer; transition:transform .15s ease, background .2s ease, box-shadow .2s ease;
  white-space:nowrap;
}
.btn svg{ width:16px; height:16px; }
.btn--primary{ background:var(--ink); color:var(--cream); }
.btn--primary:hover{ transform:translateY(-1px); box-shadow:0 8px 22px rgba(28,27,23,.22); }
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn--ghost:hover{ background:var(--surface); border-color:var(--ink-3); }
.btn--sm{ height:40px; padding:0 16px; font-size:14px; }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px var(--pad); transition:background .3s ease, border-color .3s ease, backdrop-filter .3s ease;
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:color-mix(in srgb, var(--cream) 82%, transparent);
  backdrop-filter:blur(16px) saturate(150%); -webkit-backdrop-filter:blur(16px) saturate(150%);
  border-bottom-color:var(--line);
}
.brand{ display:flex; align-items:center; gap:11px; font-family:var(--display); font-weight:800; font-size:19px; letter-spacing:-0.03em; }
.brand-mark{ width:34px; height:34px; border-radius:9px; background:var(--ink); display:grid; place-items:center; flex:none; }
.brand-mark svg{ width:20px; height:20px; }
.nav-links{ display:flex; align-items:center; gap:6px; }
.nav-links a{ padding:8px 13px; border-radius:8px; font-size:14.5px; font-weight:650; color:color-mix(in srgb, var(--ink) 78%, var(--ink-2)); background:color-mix(in srgb, var(--ink) 2.5%, transparent); transition:color .15s, background .15s; }
.nav-links a:hover{ color:var(--ink); background:color-mix(in srgb, var(--accent) 8%, transparent); }
.nav-links a.nav-db{ color:var(--accent); background:var(--accent-soft); border:1px solid color-mix(in srgb, var(--accent) 18%, var(--line)); font-weight:700; }
.nav-links a.nav-db:hover{ color:var(--cream); background:var(--accent); border-color:var(--accent); }
.nav-right{ display:flex; align-items:center; gap:14px; }
.nav-signin{ font-size:14.5px; font-weight:600; color:var(--ink); white-space:nowrap; }
.nav-signin:hover{ color:var(--accent); }
@media(max-width:880px){ .nav-links{ display:none; } }

/* ============================================================
   HERO
   ============================================================ */
.hero{ padding-top:176px; padding-bottom:clamp(40px,6vw,72px); text-align:center; position:relative; overflow:hidden; }
.hero-pill{ display:inline-flex; align-items:center; gap:10px; padding:6px 6px 6px 7px; border-radius:999px; border:1px solid var(--line); background:var(--surface); font-size:13.5px; font-weight:500; color:var(--ink-2); box-shadow:0 1px 2px rgba(28,27,23,.05); transition:border-color .15s, transform .15s; }
.hero-pill:hover{ border-color:var(--ink-3); transform:translateY(-1px); }
.hero-pill .np{ font-family:var(--mono); font-size:10.5px; font-weight:600; letter-spacing:.08em; color:var(--cream); background:var(--accent); padding:3px 9px; border-radius:999px; }
.hero-pill svg{ width:14px; height:14px; }
body.dark-hero .hero-pill{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.16); color:#c2cbdb; }
.hero-inner{ display:flex; flex-direction:column; align-items:center; }
.hero h1{
  font-size:clamp(44px, 7vw, 92px); margin-top:30px; max-width:15ch;
  letter-spacing:-0.04em;
}
.hero h1 em{ font-style:normal; color:var(--accent); }
.hero .lede{ margin-top:28px; text-align:center; font-size:clamp(18px,1.7vw,23px); max-width:50ch; color:var(--ink-2); line-height:1.45; }
.hero-caps{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:34px; }
.cap-chip{ display:inline-flex; align-items:center; gap:9px; padding:10px 17px; border-radius:999px; border:1px solid var(--line); background:var(--surface); font-size:14.5px; font-weight:600; color:var(--ink); }
.cap-chip .d{ width:7px; height:7px; border-radius:50%; flex:none; }
.hero-audience{ margin-top:22px; text-align:center; font-size:15.5px; color:var(--ink-2); max-width:52ch; margin-inline:auto; }
body.dark-hero .cap-chip{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.16); color:var(--cream); }
body.dark-hero .hero-audience{ color:#9aa6bd; }
.hero-cta{ display:flex; gap:14px; margin-top:38px; flex-wrap:wrap; justify-content:center; }
.hero-trust{ margin-top:46px; display:flex; flex-direction:column; align-items:center; gap:24px; }
.hero-partners{ display:flex; align-items:center; gap:14px 26px; flex-wrap:wrap; justify-content:center; }
.hero-partners .partner{ display:flex; align-items:center; gap:10px; position:relative; }
.hero-partners .partner:not(:last-child)::after{ content:""; position:absolute; right:-14px; top:50%; transform:translateY(-50%); width:1px; height:20px; background:var(--line); }
.hero-partners .partner > svg{ height:21px; width:auto; color:var(--ink); opacity:.85; flex:none; }
.hero-partners .partner-tag{ font-size:12.5px; font-weight:600; color:var(--ink-2); white-space:nowrap; }
.hero-tools{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; justify-content:center; }

/* ============================================================
   REEL STRIP — quiet video filmstrip (proof, low-attention)
   ============================================================ */
.reel-strip{ padding-block:clamp(36px,4.6vw,56px); border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--surface-2); }
.reel-head{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:20px; }
.reel-head .eyebrow{ margin:0; }
.reel-more{ font-size:13px; font-weight:600; color:var(--accent); display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.reel-more svg{ width:13px; height:13px; }
.reel-row{ display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:6px; margin:0 -2px; }
.reel-row::-webkit-scrollbar{ height:6px; }
.reel-row::-webkit-scrollbar-thumb{ background:var(--line); border-radius:3px; }
.reel-card{ flex:0 0 240px; scroll-snap-align:start; text-decoration:none; color:inherit; display:block; }
.reel-thumb{ aspect-ratio:16/10; border-radius:12px; position:relative; overflow:hidden; background:#101627; border:1px solid var(--line-2); transition:transform .18s ease, box-shadow .18s ease; }
.reel-card:hover .reel-thumb{ transform:translateY(-3px); box-shadow:0 16px 34px -18px rgba(19,24,38,.4); }
.reel-thumb::before{ content:""; position:absolute; inset:0; background:repeating-linear-gradient(115deg, rgba(255,255,255,.05) 0 2px, transparent 2px 9px); }
.reel-thumb::after{ content:""; position:absolute; inset:0; opacity:.4; background:var(--tint,transparent); mix-blend-mode:overlay; }
.reel-thumb video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.78; }
.reel-play{ position:absolute; inset:0; margin:auto; width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.16); display:grid; place-items:center; z-index:1; }
.reel-play svg{ width:14px; height:14px; fill:#fff; margin-left:2px; }
.reel-dur{ position:absolute; bottom:8px; right:9px; font-family:var(--mono); font-size:10px; color:#fff; background:rgba(0,0,0,.45); padding:2px 7px; border-radius:5px; z-index:1; }
.reel-cap{ display:flex; align-items:center; gap:8px; margin-top:11px; font-size:13.5px; font-weight:600; color:var(--ink); }
.reel-cap .d{ width:7px; height:7px; border-radius:50%; flex:none; }
@media(max-width:560px){ .reel-card{ flex-basis:200px; } }
.hero-trust .lbl{ font-family:var(--mono); font-size:11.5px; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-3); }
.tool-chips{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
.tool-chip{
  font-family:var(--mono); font-size:12px; font-weight:500; color:var(--ink-2);
  padding:5px 11px; border-radius:7px; background:var(--surface); border:1px solid var(--line);
}

/* dark hero variant */
body.dark-hero .hero{ background:var(--ink); }
body.dark-hero .hero h1{ color:var(--cream); }
body.dark-hero .hero .lede{ color:#9aa6bd; }
body.dark-hero .hero .eyebrow{ color:#9aa6bd; }
body.dark-hero .hero .btn--ghost{ color:var(--cream); border-color:rgba(255,255,255,.22); }
body.dark-hero .hero .btn--ghost:hover{ background:rgba(255,255,255,.08); }
body.dark-hero .hero .btn--primary{ background:var(--cream); color:var(--ink); }
body.dark-hero .hero .tool-chip{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.14); color:#c2cbdb; }
body.dark-hero .hero .hero-trust .lbl{ color:#7e8699; }
body.dark-hero .hero-stage::after{ background:linear-gradient(to bottom, transparent, var(--cream)); }

/* product mock stage */
.hero-stage{ width:100%; margin-top:88px; position:relative; padding-bottom:0; }
.hero-stage::after{ content:""; position:absolute; inset:auto 0 0 0; height:120px; background:linear-gradient(to bottom, transparent, var(--cream)); pointer-events:none; }

/* ============================================================
   APP MOCK (rebuilt platform window)
   ============================================================ */
.appwin{
  max-width:1120px; margin:0 auto; background:var(--surface);
  border:1px solid var(--line); border-radius:18px; overflow:hidden;
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 40px 90px -30px rgba(28,27,23,.42), 0 10px 30px -12px rgba(28,27,23,.18);
  text-align:left;
}
.appwin-bar{ display:flex; align-items:center; gap:8px; padding:13px 16px; border-bottom:1px solid var(--line-2); background:var(--surface-2); }
.dot{ width:11px; height:11px; border-radius:50%; }
.dot.r{ background:#e2614c; } .dot.y{ background:#e3b341; } .dot.g{ background:#4fb06a; }
.appwin-crumb{ margin-left:12px; font-family:var(--mono); font-size:12px; color:var(--ink-3); }
.appwin-crumb b{ color:var(--ink-2); font-weight:600; }

.app-tabs{ display:flex; align-items:center; gap:4px; padding:10px 14px; border-bottom:1px solid var(--line-2); overflow-x:auto; scrollbar-width:none; }
.app-tabs::-webkit-scrollbar{ display:none; }
.app-tab{
  display:flex; align-items:center; gap:9px; padding:8px 12px; border-radius:9px;
  font-size:13.5px; font-weight:600; color:var(--ink-2); white-space:nowrap; flex:none;
  border-bottom:2px solid transparent; cursor:default;
}
.app-tab .ico{ width:22px; height:22px; border-radius:6px; display:grid; place-items:center; flex:none; }
.app-tab .ico svg{ width:13px; height:13px; }
.app-tab.active{ color:var(--ink); }
.app-tab.active{ border-bottom-color:var(--ink); }
.app-tab .badge{ font-family:var(--mono); font-size:11px; background:var(--ink); color:var(--cream); padding:1px 7px; border-radius:999px; }

.app-body{ display:grid; grid-template-columns:1fr 320px; min-height:340px; }
.app-main{ padding:22px; border-right:1px solid var(--line-2); }
.app-fileheader{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.app-fileheader h4{ font-size:22px; font-family:var(--display); letter-spacing:-0.02em; }
.app-fileheader .sub{ font-family:var(--mono); font-size:11.5px; color:var(--ink-3); margin-top:5px; }
.pillrow{ display:flex; gap:8px; flex:none; }
.pill{ font-size:12px; font-weight:600; padding:6px 12px; border-radius:999px; border:1px solid var(--line); color:var(--ink-2); background:var(--surface); white-space:nowrap; }
.pill.ok{ color:var(--green); border-color:color-mix(in srgb, var(--green) 30%, var(--line)); }
.pill.mono{ font-family:var(--mono); font-size:11px; }

.seg{ display:inline-flex; gap:4px; margin-top:20px; padding:5px; background:var(--surface-2); border:1px solid var(--line-2); border-radius:12px; }
.seg .s{ font-size:13px; font-weight:600; color:var(--ink-2); padding:7px 14px; border-radius:8px; display:flex; align-items:center; gap:8px; }
.seg .s.on{ background:var(--ink); color:var(--cream); }
.seg .s .n{ font-family:var(--mono); font-size:11px; opacity:.7; }

.filters{ display:flex; align-items:center; gap:12px; margin-top:22px; flex-wrap:wrap; }
.filters .flbl{ font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); }
.chiprow{ display:flex; gap:6px; padding:5px; background:var(--surface-2); border:1px solid var(--line-2); border-radius:999px; }
.chiprow .c{ font-size:12.5px; font-weight:600; color:var(--ink-2); padding:6px 13px; border-radius:999px; }
.chiprow .c.on{ background:var(--ink); color:var(--cream); }

.emptybox{ margin-top:22px; border:1px solid var(--line-2); border-radius:12px; padding:30px; }
.emptybox h5{ font-family:var(--display); font-size:19px; font-weight:800; }
.emptybox p{ color:var(--ink-3); font-size:14px; margin-top:6px; }

.app-side{ padding:22px; background:var(--surface-2); }
.app-side .ph-label{ font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); }
.player{ margin-top:12px; aspect-ratio:16/10; border-radius:12px; background:#0e1422; display:grid; place-items:center; position:relative; overflow:hidden; }
.player .scan{ position:absolute; inset:0; background:repeating-linear-gradient(115deg, rgba(255,255,255,.03) 0 2px, transparent 2px 9px); }
.player .play{ width:46px; height:46px; border-radius:50%; background:rgba(255,255,255,.14); display:grid; place-items:center; }
.player .play svg{ width:18px; height:18px; fill:#fff; margin-left:2px; }
.metarow{ display:flex; align-items:center; justify-content:space-between; padding:11px 0; border-bottom:1px solid var(--line-2); }
.metarow:last-child{ border-bottom:0; }
.metarow .k{ font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); }
.metarow .v{ font-size:14px; font-weight:600; }
.metarow .v.mono{ font-family:var(--mono); font-size:13px; font-weight:500; }
@media(max-width:780px){ .app-body{ grid-template-columns:1fr; } .app-side{ display:none; } }

/* ============================================================
   ORCHESTRATION — "Run" view: all five workflows, one pass
   ============================================================ */
.orch{ text-align:left; }
.orch-head{ display:flex; align-items:center; justify-content:space-between; gap:18px; padding:20px 24px; border-bottom:1px solid var(--line-2); flex-wrap:wrap; }
.orch-seq .seqname{ font-family:var(--display); font-size:19px; font-weight:800; letter-spacing:-0.02em; }
.orch-seq .seqsub{ font-family:var(--mono); font-size:11.5px; color:var(--ink-3); margin-top:4px; }
.orch-status{ display:flex; align-items:center; gap:10px; font-size:13px; font-weight:600; color:var(--ink-2); }
.orch-status .dotp{ width:8px; height:8px; border-radius:50%; background:var(--green); position:relative; }
.orch-status .dotp::after{ content:""; position:absolute; inset:-4px; border-radius:50%; border:1.5px solid var(--green); opacity:.5; }
html.anim-ready .orch-status .dotp::after{ animation:ping 1.8s ease-out infinite; }
@keyframes ping{ 0%{ transform:scale(.6); opacity:.6; } 70%,100%{ transform:scale(1.8); opacity:0; } }
.orch-eta{ font-family:var(--mono); font-size:11px; color:var(--ink-3); padding:4px 10px; border-radius:999px; background:var(--surface-2); border:1px solid var(--line-2); }

.orch-rows{ padding:8px 0; }
.orch-row{
  display:grid; grid-template-columns:38px minmax(150px,1.1fr) minmax(140px,1.5fr) auto;
  gap:18px; align-items:center; padding:15px 24px; border-bottom:1px solid var(--line-2);
}
.orch-row:last-child{ border-bottom:0; }
.orch-ico{ width:38px; height:38px; border-radius:10px; display:grid; place-items:center; flex:none; }
.orch-ico svg{ width:19px; height:19px; }
.orch-name{ font-size:15px; font-weight:700; letter-spacing:-0.01em; }
.orch-name small{ display:block; font-family:var(--mono); font-size:10.5px; font-weight:400; color:var(--ink-3); margin-top:3px; letter-spacing:.02em; }
.orch-prog{ display:flex; align-items:center; gap:12px; }
.orch-bar{ flex:1; height:7px; border-radius:999px; background:var(--surface-2); border:1px solid var(--line-2); overflow:hidden; min-width:80px; }
.orch-bar i{ display:block; height:100%; width:0; border-radius:999px; transition:width 1.1s cubic-bezier(.3,.8,.3,1); }
html:not(.anim-ready) .orch-bar i{ transition:none; }
.orch-pct{ font-family:var(--mono); font-size:11.5px; font-weight:500; color:var(--ink-2); width:54px; text-align:right; flex:none; }
.orch-pct.done{ color:var(--green); display:flex; align-items:center; gap:5px; justify-content:flex-end; }
.orch-pct.done svg{ width:13px; height:13px; }
.orch-art{ font-family:var(--mono); font-size:11.5px; color:var(--ink-2); padding:6px 12px; border-radius:8px; background:var(--surface-2); border:1px solid var(--line-2); white-space:nowrap; }
.orch-foot{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 24px; background:var(--surface-2); border-top:1px solid var(--line-2); flex-wrap:wrap; }
.orch-foot .lbl{ font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--ink-3); }
.orch-foot .out{ display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--ink); }
.orch-foot .out svg{ width:15px; height:15px; color:var(--green); }
.hero-cap{ text-align:center; font-family:var(--mono); font-size:12px; letter-spacing:.04em; color:var(--ink-3); margin-top:22px; }
.hero-cap b{ color:var(--ink-2); font-weight:500; }
@media(max-width:720px){
  .orch-row{ grid-template-columns:34px 1fr; gap:12px 14px; }
  .orch-prog{ grid-column:1 / -1; }
  .orch-art{ grid-column:1 / -1; justify-self:start; }
}

/* ============================================================
   CLEARANCE BOARD — global delivery (hero centerpiece)
   ============================================================ */
.appwin.clr{ max-width:1000px; text-align:left; }
.clr-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:18px; padding:22px 26px; border-bottom:1px solid var(--line-2); flex-wrap:wrap; }
.clr-title{ font-family:var(--display); font-size:20px; font-weight:800; letter-spacing:-0.02em; }
.clr-sub{ font-family:var(--mono); font-size:11.5px; color:var(--ink-3); margin-top:6px; }
.clr-score{ display:inline-flex; align-items:baseline; gap:7px; font-family:var(--mono); font-size:11.5px; color:var(--ink-3); padding:8px 14px; border-radius:999px; background:var(--surface-2); border:1px solid var(--line-2); white-space:nowrap; }
.clr-score b{ font-family:var(--display); font-size:18px; color:var(--ink); }

.clr-markets{ display:flex; flex-wrap:wrap; gap:8px; padding:18px 26px; border-bottom:1px solid var(--line-2); }
.mkt{ display:inline-flex; align-items:center; gap:9px; padding:8px 13px; border-radius:999px; border:1px solid var(--line); font-size:12.5px; font-weight:700; background:var(--surface); white-space:nowrap; }
.mkt .std{ font-family:var(--mono); font-size:10px; color:var(--ink-3); font-weight:500; letter-spacing:.02em; }
.mkt .tick{ display:inline-flex; }
.mkt .tick svg{ width:13px; height:13px; }
.mkt.ok{ color:var(--ink-2); }
.mkt.ok .tick{ color:var(--green); }
.mkt.warn{ color:var(--ink); border-color:color-mix(in srgb, var(--accent) 32%, var(--line)); background:var(--accent-soft); }
.mkt.warn .n{ font-family:var(--mono); font-size:11px; color:var(--accent); font-weight:700; }

.clr-cats{ padding:6px 26px 24px; }
.clr-crow{ display:grid; grid-template-columns:1.5fr 64px 1.7fr; gap:18px; align-items:center; padding:13px 0; border-bottom:1px solid var(--line-2); }
.clr-crow:last-child{ border-bottom:0; }
.clr-crow.head{ font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); padding:14px 0 11px; }
.clr-cname{ display:flex; align-items:center; gap:11px; font-size:14.5px; font-weight:600; }
.clr-dot{ width:9px; height:9px; border-radius:3px; flex:none; }
.clr-found{ font-family:var(--mono); font-size:14px; font-weight:600; color:var(--ink); }
.clr-affects{ display:flex; gap:6px; flex-wrap:wrap; }
.clr-tag{ font-family:var(--mono); font-size:10.5px; padding:4px 9px; border-radius:6px; background:var(--surface-2); border:1px solid var(--line-2); color:var(--ink-2); white-space:nowrap; }
.clr-tag.all{ color:var(--accent); border-color:color-mix(in srgb, var(--accent) 28%, var(--line)); background:var(--accent-soft); }
.hero-cap2{ text-align:center; font-family:var(--mono); font-size:12px; letter-spacing:.03em; color:var(--ink-3); margin-top:24px; }
.hero-cap2 b{ color:var(--ink-2); font-weight:500; }
@media(max-width:640px){
  .clr-crow{ grid-template-columns:1fr auto; gap:8px 14px; }
  .clr-affects{ grid-column:1 / -1; }
}

/* ============================================================
   COMPLIANCE — flagship global-delivery section
   ============================================================ */
.compliance .kicker-head{ max-width:24ch; }
.cmp-lede{ margin-top:22px; max-width:62ch; font-size:clamp(17px,1.5vw,20px); color:var(--ink-2); line-height:1.5; }
.comp-teaser-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:44px; }
.comp-teaser{ border:1px solid var(--line); border-radius:16px; background:var(--surface); padding:24px; }
.comp-teaser span{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; color:var(--accent); }
.comp-teaser h4{ margin-top:12px; font-size:18px; letter-spacing:-0.015em; }
.comp-teaser p{ margin-top:8px; color:var(--ink-2); font-size:13.5px; line-height:1.5; }
@media(max-width:780px){ .comp-teaser-grid{ grid-template-columns:1fr; } }
.cat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:56px; }
.cat-card{ border:1px solid var(--line); border-radius:16px; background:var(--surface); padding:26px; transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease; }
.cat-card:hover{ border-color:color-mix(in srgb, var(--accent) 26%, var(--line)); transform:translateY(-2px); box-shadow:0 18px 40px -26px rgba(19,24,38,.4); }
.cat-card .ci{ width:44px; height:44px; border-radius:12px; display:grid; place-items:center; background:var(--accent-soft); }
.cat-card .ci svg{ width:22px; height:22px; color:var(--accent); }
.cat-card h4{ font-size:18.5px; margin-top:18px; letter-spacing:-0.015em; }
.cat-card p{ font-size:14px; color:var(--ink-2); margin-top:9px; line-height:1.5; }
@media(max-width:860px){ .cat-grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:560px){ .cat-grid{ grid-template-columns:1fr; } }

.neutral-note{ margin-top:24px; display:flex; gap:16px; align-items:flex-start; padding:24px 28px; border-radius:16px; background:var(--accent-soft); border:1px solid color-mix(in srgb, var(--accent) 18%, var(--line)); }
.neutral-note .ni{ width:24px; height:24px; flex:none; color:var(--accent); margin-top:1px; }
.neutral-note p{ font-size:15.5px; color:var(--ink); max-width:74ch; line-height:1.5; }
.neutral-note b{ font-weight:700; }

.standards{ margin-top:42px; padding-top:34px; border-top:1px solid var(--line); display:flex; align-items:center; gap:26px; flex-wrap:wrap; }
.standards-lbl{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); flex:none; }
.standards-row{ display:flex; gap:9px; flex-wrap:wrap; }
.std-chip{ font-family:var(--mono); font-size:12px; font-weight:500; color:var(--ink-2); padding:8px 13px; border-radius:8px; border:1px solid var(--line); background:var(--surface); }
.std-chip b{ color:var(--ink); font-weight:600; }
.cmp-demo{ margin-top:48px; display:grid; grid-template-columns:minmax(260px,.78fr) minmax(340px,1.22fr); gap:24px; align-items:center; padding:18px; border-radius:24px; border:1px solid var(--line); background:var(--surface); box-shadow:0 28px 70px -46px rgba(19,24,38,.42); }
.cmp-demo-copy{ padding:clamp(8px,2vw,18px); }
.cmp-demo-copy h3{ margin-top:16px; font-size:clamp(24px,2.7vw,36px); letter-spacing:-0.02em; }
.cmp-demo-copy p{ margin-top:12px; color:var(--ink-2); font-size:15px; line-height:1.55; max-width:42ch; }
.cmp-demo video{ display:block; width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:18px; background:#000; border:1px solid var(--line-2); }
.cmp-demo-link{ justify-self:start; margin-left:clamp(8px,2vw,18px); }
@media(max-width:860px){ .cmp-demo{ grid-template-columns:1fr; } }

/* dedicated compliance page */
.comp-hero{ padding-top:170px; padding-bottom:clamp(64px,7vw,104px); }
.comp-hero .wrap{ display:grid; grid-template-columns:minmax(0,.84fr) minmax(360px,1.16fr); gap:clamp(32px,5vw,72px); align-items:center; }
.comp-hero h1{ font-size:clamp(38px,5.2vw,68px); max-width:13ch; letter-spacing:-0.035em; }
.comp-hero .lede{ margin-top:24px; max-width:52ch; }
.comp-hero .hero-cta{ justify-content:flex-start; }
.comp-hero-video{ border-radius:24px; overflow:hidden; background:#000; border:1px solid var(--line); box-shadow:0 32px 90px -44px rgba(19,24,38,.52); }
.comp-hero-video video{ display:block; width:100%; aspect-ratio:16/9; object-fit:cover; background:#000; }
.comp-review{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(32px,5vw,72px); align-items:center; }
.db-band{ display:flex; align-items:center; justify-content:space-between; gap:28px; padding:clamp(28px,4vw,46px); border-radius:22px; background:var(--ink); color:var(--cream); overflow:hidden; position:relative; }
.db-band::before{ content:""; position:absolute; inset:-35% -8% auto auto; width:420px; height:420px; opacity:.45; background:radial-gradient(circle, color-mix(in srgb, var(--accent) 35%, transparent), transparent 68%); pointer-events:none; }
.db-band > *{ position:relative; }
.db-band h2{ margin-top:16px; color:var(--cream); font-size:clamp(26px,3.1vw,42px); max-width:16ch; }
.db-band p{ margin-top:12px; color:#9aa6bd; font-size:15.5px; line-height:1.55; max-width:58ch; }
.db-band .btn--primary{ background:var(--cream); color:var(--ink); flex:none; }
@media(max-width:900px){
  .comp-hero .wrap,
  .comp-review{ grid-template-columns:1fr; }
  .db-band{ align-items:flex-start; flex-direction:column; }
}

/* ============================================================
   PLATFORM — every content type, global profiles (index teaser)
   ============================================================ */
.ctype-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin-top:50px; }
.ctype-card{ border:1px solid var(--line); border-radius:14px; background:var(--surface); padding:20px 18px; text-align:left; transition:border-color .18s ease, transform .18s ease; }
.ctype-card:hover{ border-color:color-mix(in srgb, var(--accent) 26%, var(--line)); transform:translateY(-2px); }
.ctype-card .ti{ width:36px; height:36px; border-radius:10px; display:grid; place-items:center; background:var(--accent-soft); }
.ctype-card .ti svg{ width:18px; height:18px; color:var(--accent); }
.ctype-card h5{ font-size:14.5px; font-weight:700; margin-top:14px; letter-spacing:-0.01em; }
.ctype-card p{ font-size:12.5px; color:var(--ink-2); margin-top:6px; line-height:1.45; }
@media(max-width:980px){ .ctype-grid{ grid-template-columns:repeat(3,1fr); } }
@media(max-width:620px){ .ctype-grid{ grid-template-columns:1fr 1fr; } }

.platform-cta{ margin-top:44px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; padding:28px 30px; border-radius:18px; background:var(--surface-2); border:1px solid var(--line); }
.platform-cta .pc-txt{ font-size:15.5px; color:var(--ink-2); max-width:52ch; }
.platform-cta .pc-txt b{ color:var(--ink); font-weight:700; }
.platform-cta .pc-stats{ display:flex; gap:28px; flex:none; }
.platform-cta .pc-stat .v{ font-family:var(--display); font-size:26px; font-weight:800; color:var(--accent); }
.platform-cta .pc-stat .k{ font-family:var(--mono); font-size:10.5px; color:var(--ink-3); margin-top:2px; }
@media(max-width:760px){ .platform-cta{ flex-direction:column; align-items:flex-start; } }

/* ============================================================
   PLATFORM PAGE — profiles manager mock + industries
   ============================================================ */
.pf-hero{ padding-top:170px; text-align:left; }
.pf-hero .wrap{ display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:center; }
.pf-hero h1{ font-size:clamp(38px,5.4vw,64px); max-width:16ch; letter-spacing:-0.035em; }
.pf-hero .lede{ margin-top:22px; max-width:50ch; }
.pf-hero-cta{ display:flex; gap:14px; margin-top:32px; flex-wrap:wrap; }
@media(max-width:900px){ .pf-hero .wrap{ grid-template-columns:1fr; } }

.pf-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.pf-stat{ border:1px solid var(--line); border-radius:16px; background:var(--surface); padding:22px; box-shadow:0 24px 50px -30px rgba(19,24,38,.18); }
.pf-stat .v{ font-family:var(--display); font-size:30px; font-weight:800; color:var(--accent); letter-spacing:-0.02em; }
.pf-stat .k{ font-size:13px; color:var(--ink-2); margin-top:6px; line-height:1.4; }
@media(max-width:560px){ .pf-stats{ grid-template-columns:1fr; } }

/* profile manager mock */
.profwin{ text-align:left; }
.prof-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 24px; border-bottom:1px solid var(--line-2); flex-wrap:wrap; }
.prof-toolbar h4{ font-size:17px; letter-spacing:-0.01em; }
.prof-toolbar .sub{ font-family:var(--mono); font-size:11px; color:var(--ink-3); margin-top:4px; }
.prof-rows{ padding:6px 0; }
.prof-row{ display:grid; grid-template-columns:1.4fr 1fr 1fr auto; gap:16px; align-items:center; padding:14px 24px; border-bottom:1px solid var(--line-2); }
.prof-row:last-child{ border-bottom:0; }
.prof-row.head{ font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); background:var(--surface-2); }
.prof-mkt{ display:flex; align-items:center; gap:10px; font-size:14px; font-weight:700; }
.prof-mkt .flag{ width:22px; height:22px; border-radius:6px; display:grid; place-items:center; font-size:10px; font-weight:700; background:var(--surface-2); color:var(--ink-2); }
.prof-rules{ font-family:var(--mono); font-size:12px; color:var(--ink-2); }
.prof-updated{ font-family:var(--mono); font-size:11.5px; color:var(--ink-3); }
.prof-live{ display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600; color:var(--green); }
.prof-live .d{ width:6px; height:6px; border-radius:50%; background:var(--green); }
html.anim-ready .prof-live .d{ animation:ping 1.8s ease-out infinite; }
@media(max-width:700px){
  .prof-row{ grid-template-columns:1fr; gap:6px; align-items:start; padding:16px 18px; }
  .prof-row.head{ display:none; }
}

/* industries */
.ind-lead{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:52px; }
.ind-card{ border-radius:18px; padding:30px; position:relative; overflow:hidden; }
.ind-card.airlines{ background:var(--ink); color:var(--cream); grid-column:1 / -1; display:grid; grid-template-columns:1.1fr .9fr; gap:32px; align-items:center; }
.ind-card.airlines::before{ content:""; position:absolute; top:-30%; right:-8%; width:420px; height:420px; opacity:.5; pointer-events:none;
  background:radial-gradient(circle, color-mix(in srgb, var(--accent) 34%, transparent), transparent 68%); }
.ind-card.airlines .badge2{ display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--cream); background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.16); padding:7px 13px; border-radius:999px; }
.ind-card.airlines h3{ color:var(--cream); font-size:clamp(24px,2.6vw,34px); margin-top:16px; letter-spacing:-0.02em; }
.ind-card.airlines p{ color:#9aa6bd; margin-top:14px; font-size:15.5px; max-width:46ch; line-height:1.55; }
.ind-list{ display:flex; flex-direction:column; gap:11px; position:relative; }
.ind-item{ display:flex; align-items:center; gap:12px; padding:13px 15px; border-radius:11px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); font-size:13.5px; font-weight:500; color:#e2e6ee; }
.ind-item svg{ width:16px; height:16px; color:var(--accent); flex:none; }
@media(max-width:860px){ .ind-lead{ grid-template-columns:1fr; } .ind-card.airlines{ grid-template-columns:1fr; } }

.ind-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:18px; }
.ind-mini{ border:1px solid var(--line); border-radius:16px; background:var(--surface); padding:24px; }
.ind-mini .ii{ width:40px; height:40px; border-radius:11px; display:grid; place-items:center; background:var(--accent-soft); }
.ind-mini .ii svg{ width:20px; height:20px; color:var(--accent); }
.ind-mini h4{ font-size:17px; margin-top:14px; }
.ind-mini p{ font-size:13.5px; color:var(--ink-2); margin-top:8px; line-height:1.5; }
@media(max-width:860px){ .ind-grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:560px){ .ind-grid{ grid-template-columns:1fr; } }

.airline-hero-card.ind-card.airlines{ grid-column:auto; grid-template-columns:1fr; align-self:stretch; }
.airline-hero-card.ind-card.airlines::before{ width:320px; height:320px; }
.airline-source-grid.ctype-grid{ grid-template-columns:repeat(3,1fr); }
.airline-output-grid{ grid-template-columns:repeat(2,1fr); margin-top:0; }
.air-source-flow{ border:1px solid var(--line); border-radius:18px; background:var(--surface); padding:24px; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:13px; box-shadow:0 28px 70px -44px rgba(19,24,38,.38); }
.source-node{ min-height:74px; border:1px solid var(--line-2); border-radius:13px; background:var(--surface-2); display:flex; align-items:center; justify-content:center; text-align:center; padding:14px; font-family:var(--mono); font-size:12px; font-weight:600; color:var(--ink-2); position:relative; }
.source-node:not(.source-node--out)::after{ content:""; position:absolute; right:-9px; top:50%; width:10px; height:1px; background:var(--line); }
.source-node--out{ grid-column:1 / -1; background:var(--ink); color:var(--cream); border-color:var(--ink); min-height:86px; font-size:13px; }
.docwin{ overflow:hidden; }
.docscan{ display:grid; grid-template-columns:.95fr 1fr; gap:22px; padding:24px; align-items:stretch; }
.doc-page{ min-height:300px; border:1px solid var(--line); border-radius:14px; background:linear-gradient(180deg, #fff, var(--surface-2)); padding:22px; display:flex; flex-direction:column; gap:13px; box-shadow:0 18px 45px -36px rgba(19,24,38,.45); }
.doc-line{ height:9px; border-radius:999px; background:var(--line); }
.doc-line.w45{ width:45%; }
.doc-line.w60{ width:60%; }
.doc-line.w70{ width:70%; }
.doc-line.w90{ width:90%; }
.doc-box{ border:1px solid color-mix(in srgb, var(--accent) 30%, var(--line)); background:var(--accent-soft); color:var(--accent); border-radius:10px; padding:14px; font-family:var(--mono); font-size:11px; font-weight:700; }
.doc-box.warn{ border-color:rgba(185,68,68,.3); background:#fff0f0; color:#b94444; }
.doc-issues{ display:flex; flex-direction:column; gap:11px; justify-content:center; }
.doc-issue{ border:1px solid var(--line); border-radius:12px; background:var(--surface); padding:15px; }
.doc-issue span{ display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); margin-bottom:6px; }
.doc-issue b{ font-size:14px; color:var(--ink); }
.doc-issue.high{ border-color:rgba(185,68,68,.28); }
@media(max-width:980px){ .airline-source-grid.ctype-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:700px){ .docscan{ grid-template-columns:1fr; } }
@media(max-width:640px){
  .airline-source-grid.ctype-grid,
  .airline-output-grid,
  .air-source-flow{ grid-template-columns:1fr; }
  .source-node::after{ display:none; }
}

/* ============================================================
   AUDIOMIX CASE STUDY — reuses sec-diagram / tracks / meter patterns
   ============================================================ */
.case-hero{ padding-top:170px; padding-bottom:56px; text-align:center; }
.case-hero-layout{ display:grid; grid-template-columns:minmax(0,.86fr) minmax(340px,1.14fr); gap:clamp(32px,5vw,72px); align-items:center; }
.case-hero-copy{ text-align:left; }
.case-hero-copy .kicker-head{ max-width:20ch; margin-inline:0; }
.case-hero-copy .lede{ margin:22px 0 0; text-align:left; max-width:56ch; }
.case-hero .kicker-head{ max-width:20ch; margin-inline:auto; }
.case-hero .lede{ margin:22px auto 0; text-align:center; max-width:56ch; }
.case-hero-copy .kicker-head,
.case-hero-copy .lede{ margin-left:0; margin-right:0; text-align:left; }
.case-hero-cta{ display:flex; gap:14px; margin-top:32px; flex-wrap:wrap; justify-content:center; }
.case-hero-copy .case-hero-cta{ justify-content:flex-start; }
.case-demo{ border-radius:24px; overflow:hidden; border:1px solid var(--line); background:#000; box-shadow:0 30px 90px -42px rgba(19,24,38,.55); }
.case-demo video{ display:block; width:100%; aspect-ratio:16/9; object-fit:cover; background:#000; }
.trial-form{ display:none; margin-top:18px; max-width:460px; }
.trial-form.open{ display:block; }
.trial-form label{ display:block; margin-bottom:8px; font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); }
.trial-form-row{ display:flex; gap:10px; align-items:center; }
.trial-form input[type=email]{ flex:1; min-width:0; height:44px; border-radius:999px; border:1px solid var(--line); background:var(--surface); color:var(--ink); padding:0 16px; font:inherit; font-size:14.5px; outline:none; }
.trial-form input[type=email]:focus{ border-color:color-mix(in srgb, var(--accent) 44%, var(--line)); box-shadow:0 0 0 4px var(--accent-soft); }
.trial-form button[type=submit]{ height:44px; border:0; border-radius:999px; background:var(--ink); color:var(--cream); padding:0 18px; font-size:14px; font-weight:700; white-space:nowrap; cursor:pointer; }
.trial-form button[type=submit]:disabled{ opacity:.56; cursor:default; }
.trial-msg{ display:block; min-height:18px; margin-top:8px; font-size:13px; color:var(--ink-3); }
.trial-msg.ok{ color:var(--green); }
.trial-msg.err{ color:#b94444; }
@media(max-width:900px){ .case-hero-layout{ grid-template-columns:1fr; } }
@media(max-width:560px){ .trial-form-row{ align-items:stretch; flex-direction:column; } .trial-form button[type=submit]{ width:100%; } }

.case-block{ padding-block:clamp(56px,7vw,96px); border-top:1px solid var(--line); }
.case-block .wrap{ display:grid; grid-template-columns:.95fr 1.15fr; gap:clamp(32px,4vw,64px); align-items:center; }
.case-block.rev .wrap{ direction:rtl; }
.case-block.rev .wrap > *{ direction:ltr; }
.case-text .eyebrow{ margin-bottom:16px; }
.case-text h3{ font-size:clamp(24px,2.6vw,34px); letter-spacing:-0.02em; }
.case-text p{ color:var(--ink-2); font-size:16px; margin-top:16px; max-width:46ch; line-height:1.6; }
@media(max-width:860px){ .case-block .wrap{ grid-template-columns:1fr; } .case-block.rev .wrap{ direction:ltr; } }

/* stem map (ISO routing) */
.stem-map{ display:grid; grid-template-columns:1fr auto 1fr; gap:18px; align-items:center; }
.stem-col .tag{ font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin-bottom:12px; display:block; }
.iso-list{ display:flex; flex-direction:column; gap:8px; }
.iso-item{ padding:11px 14px; border-radius:10px; border:1px dashed var(--line); color:var(--ink-2); font-size:13.5px; font-family:var(--mono); }
.stem-list{ display:flex; flex-direction:column; gap:8px; }
.stem-item{ display:flex; align-items:center; gap:10px; padding:11px 14px; border-radius:10px; border:1px solid var(--line-2); background:var(--surface-2); font-size:13.5px; font-weight:600; }
.stem-item .sw{ width:9px; height:9px; border-radius:3px; flex:none; }
@media(max-width:640px){ .stem-map{ grid-template-columns:1fr; } .stem-map .consol-arrow{ transform:rotate(90deg); } }

/* clip gain levels */
.lvl-grid{ display:flex; flex-direction:column; gap:14px; }
.lvl-row{ display:grid; grid-template-columns:64px 1fr; gap:14px; align-items:center; }
.lvl-name{ font-family:var(--mono); font-size:11.5px; color:var(--ink-3); }
.lvl-track{ height:30px; border-radius:8px; background:var(--surface-2); border:1px solid var(--line-2); position:relative; overflow:hidden; }
.lvl-fill{ position:absolute; left:0; top:0; bottom:0; border-radius:8px; display:flex; align-items:center; padding-left:10px; font-family:var(--mono); font-size:10.5px; color:#fff; font-weight:600; white-space:nowrap; }
.lvl-target{ position:absolute; top:-3px; bottom:-3px; width:2px; background:var(--accent); }
.lvl-legend{ display:flex; gap:18px; margin-top:6px; flex-wrap:wrap; }
.lvl-legend span{ font-family:var(--mono); font-size:11px; color:var(--ink-3); display:flex; align-items:center; gap:7px; }
.lvl-legend i{ width:8px; height:8px; border-radius:2px; display:inline-block; }

/* crosstalk before/after */
.xt-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.xt-col .mock-title{ justify-content:flex-start; gap:10px; }
.xt-col.after .mock-title span:last-child{ color:var(--green); }
@media(max-width:640px){ .xt-grid{ grid-template-columns:1fr; } }

/* ============================================================
   SCALE — parallel processing, human in the loop
   ============================================================ */
.scale-banner{ margin-top:52px; border-radius:20px; background:var(--ink); color:var(--cream); padding:clamp(30px,4vw,52px); display:flex; align-items:center; gap:clamp(28px,5vw,64px); flex-wrap:wrap; position:relative; overflow:hidden; }
.scale-banner::before{ content:""; position:absolute; top:-40%; right:-10%; width:520px; height:520px; pointer-events:none; opacity:.5;
  background:radial-gradient(circle, color-mix(in srgb, var(--accent) 32%, transparent), transparent 68%); }
.scale-banner .num{ font-family:var(--display); font-size:clamp(76px,12vw,150px); font-weight:800; line-height:.88; letter-spacing:-0.045em; color:var(--cream); position:relative; }
.scale-banner .num em{ font-style:normal; color:var(--accent); }
.scale-banner .txt{ flex:1; min-width:260px; position:relative; }
.scale-banner .txt h3{ color:var(--cream); font-size:clamp(20px,2vw,27px); letter-spacing:-0.02em; }
.scale-banner .txt p{ color:#9aa6bd; margin-top:11px; font-size:15.5px; max-width:48ch; line-height:1.5; }
.scale-banner .hil{ display:inline-flex; align-items:center; gap:9px; margin-top:18px; font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--cream); background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); padding:8px 14px; border-radius:999px; }
.scale-banner .hil .dotp{ width:7px; height:7px; border-radius:50%; background:var(--green); }

.scale-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:24px; }
.scale-card{ border:1px solid var(--line); border-radius:16px; background:var(--surface); padding:24px; }
.scale-card .si{ width:42px; height:42px; border-radius:11px; display:grid; place-items:center; background:var(--accent-soft); }
.scale-card .si svg{ width:21px; height:21px; color:var(--accent); }
.scale-card h4{ font-size:16.5px; margin-top:16px; letter-spacing:-0.01em; }
.scale-card p{ font-size:13.5px; color:var(--ink-2); margin-top:8px; line-height:1.5; }
@media(max-width:900px){ .scale-grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:520px){ .scale-grid{ grid-template-columns:1fr; } .scale-banner{ flex-direction:column; align-items:flex-start; } }

/* ============================================================
   LOGO STRIP / CONSOLIDATION
   ============================================================ */
.consol{ text-align:center; }
.consol h2{ font-size:clamp(28px,3.4vw,44px); max-width:20ch; margin:18px auto 0; }
.consol .lede{ margin:20px auto 0; text-align:center; }
.replace-row{ display:flex; align-items:stretch; gap:20px; margin-top:54px; flex-wrap:wrap; justify-content:center; }
.replace-col{ flex:1; min-width:260px; }
.replace-col .tag{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); margin-bottom:16px; }
.old-list{ display:flex; flex-direction:column; gap:9px; }
.old-item{ display:flex; align-items:center; gap:11px; padding:13px 16px; border-radius:11px; border:1px dashed var(--line); color:var(--ink-3); background:transparent; font-size:14.5px; text-align:left; }
.old-item .x{ width:18px; height:18px; flex:none; color:var(--ink-3); }
.consol-arrow{ display:grid; place-items:center; flex:none; color:var(--ink-3); align-self:center; }
.consol-arrow svg{ width:34px; height:34px; }
.hub-card{
  border-radius:16px; border:1px solid var(--line); background:var(--surface);
  padding:26px; box-shadow:0 24px 50px -28px rgba(28,27,23,.3); text-align:left;
}
.hub-card .mark{ width:42px; height:42px; border-radius:11px; background:var(--ink); display:grid; place-items:center; }
.hub-card .mark svg{ width:24px; height:24px; }
.hub-card h4{ font-size:21px; margin-top:16px; }
.hub-card p{ color:var(--ink-2); font-size:14.5px; margin-top:8px; }
.hub-feats{ display:flex; flex-direction:column; gap:9px; margin-top:18px; }
.hub-feat{ display:flex; align-items:center; gap:10px; font-size:14px; color:var(--ink); }
.hub-feat svg{ width:16px; height:16px; color:var(--green); flex:none; }

/* ============================================================
   SUITE — dramatic dark workflow switcher (folder tabs)
   ============================================================ */
.suite{ background:#0f1626; color:var(--cream); position:relative; overflow:hidden; }
.suite::before{ content:""; position:absolute; top:-12%; left:50%; transform:translateX(-50%);
  width:1100px; max-width:120%; height:600px; pointer-events:none; opacity:.55;
  background:radial-gradient(ellipse 60% 100% at 50% 0%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 70%); }
.suite .wrap{ position:relative; }
.suite .eyebrow{ color:#9aa6bd; }
.suite h2{ color:var(--cream); font-size:clamp(34px,4.8vw,60px); max-width:26ch; margin-top:20px; letter-spacing:-0.03em; }
.suite .lede{ color:#9aa6bd; margin-top:24px; max-width:64ch; }

.flow-rail{ display:flex; gap:6px; margin-top:clamp(48px,6vw,80px); flex-wrap:wrap; }
.flow-tab{
  display:flex; align-items:center; gap:11px; padding:15px 20px; cursor:pointer;
  font-size:15px; font-weight:600; color:#c2cbdb; border:0; background:rgba(255,255,255,.05);
  border-radius:14px 14px 0 0; transition:background .18s ease, color .18s ease;
  position:relative; bottom:-1px; white-space:nowrap;
}
.flow-tab .ico{ width:26px; height:26px; border-radius:7px; display:grid; place-items:center; flex:none; }
.flow-tab .ico svg{ width:15px; height:15px; }
.flow-tab:hover{ background:rgba(255,255,255,.1); color:var(--cream); }
.flow-tab.active{ background:var(--surface); color:var(--ink); }

.flow-deck{ background:var(--surface); color:var(--ink); border-radius:0 20px 20px 20px; padding:clamp(28px,3.6vw,56px);
  box-shadow:0 40px 90px -40px rgba(0,0,0,.6); }
.flow-panel{ display:none; }
.flow-panel.active{ display:grid; grid-template-columns:1fr 1.12fr; gap:clamp(32px,4vw,64px); align-items:center; }
@keyframes fade{ from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:none; } }
.flow-text .eyebrow{ margin-bottom:18px; }
.flow-text h3{ font-size:clamp(28px,3vw,42px); letter-spacing:-0.025em; }
.flow-text p{ color:var(--ink-2); font-size:clamp(16px,1.4vw,18px); margin-top:18px; max-width:42ch; }
.flow-stats{ display:flex; gap:36px; margin-top:30px; flex-wrap:wrap; }
.flow-stat .k{ font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); }
.flow-stat .v{ font-family:var(--display); font-size:30px; font-weight:800; margin-top:5px; }
.flow-stat .v.accent{ color:var(--accent); }
.artifact-chip{ display:inline-flex; align-items:center; gap:9px; margin-top:28px; padding:10px 15px; border-radius:10px; background:var(--surface-2); border:1px solid var(--line); font-family:var(--mono); font-size:12.5px; font-weight:500; color:var(--ink); }
.artifact-chip svg{ width:15px; height:15px; color:var(--accent); }
@media(max-width:860px){ .flow-deck{ border-radius:18px; } .flow-panel.active{ grid-template-columns:1fr; gap:32px; } }

/* mock canvases per workflow */
.flow-mock{
  border-radius:16px; border:1px solid var(--line); background:var(--surface);
  padding:24px; box-shadow:0 30px 60px -34px rgba(28,27,23,.34); min-height:360px;
}
.mock-title{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin-bottom:18px; display:flex; align-items:center; justify-content:space-between; }

/* compliance: timeline w/ flags */
.timeline{ position:relative; height:54px; border-radius:9px; background:var(--surface-2); border:1px solid var(--line-2); margin:8px 0 24px; }
.tl-ruler{ position:absolute; inset:0; display:flex; }
.tl-ruler i{ flex:1; border-right:1px solid var(--line-2); }
.tl-flag{ position:absolute; top:-7px; width:3px; height:68px; border-radius:2px; }
.tl-flag::after{ content:attr(data-l); position:absolute; top:-20px; left:50%; transform:translateX(-50%); font-family:var(--mono); font-size:9px; letter-spacing:.06em; padding:2px 6px; border-radius:5px; color:#fff; white-space:nowrap; }
.issue-list{ display:flex; flex-direction:column; gap:8px; }
.issue{ display:flex; align-items:center; gap:12px; padding:11px 13px; border-radius:10px; border:1px solid var(--line-2); background:var(--surface-2); }
.issue .sev{ width:7px; height:7px; border-radius:50%; flex:none; }
.issue .cat{ font-family:var(--mono); font-size:11px; color:var(--ink-3); }
.issue .desc{ font-size:13.5px; font-weight:500; }
.issue .tc{ margin-left:auto; font-family:var(--mono); font-size:11.5px; color:var(--ink-2); }

/* remediation: frame w/ tracked window */
.frame{ position:relative; aspect-ratio:16/9; border-radius:12px; background:#0e1422; overflow:hidden; border:1px solid var(--line-2); }
.frame .grad{ position:absolute; inset:0; background:repeating-linear-gradient(125deg, rgba(255,255,255,.04) 0 3px, transparent 3px 14px); }
.frame .pw{ position:absolute; width:30%; height:42%; border:1.5px solid var(--accent); border-radius:6px; }
.frame .pw::before{ content:""; position:absolute; inset:0; backdrop-filter:blur(3px); background:rgba(180,180,180,.18); border-radius:5px; }
.frame .pw .h{ position:absolute; width:7px; height:7px; background:var(--accent); border-radius:50%; }
.frame .pw .h.tl{ top:-3px; left:-3px; } .frame .pw .h.tr{ top:-3px; right:-3px; } .frame .pw .h.bl{ bottom:-3px; left:-3px; } .frame .pw .h.br{ bottom:-3px; right:-3px; }
.frame .tag{ position:absolute; bottom:10px; left:10px; font-family:var(--mono); font-size:10px; color:rgba(255,255,255,.7); background:rgba(0,0,0,.4); padding:3px 8px; border-radius:6px; }
.node-row{ display:flex; gap:10px; margin-top:16px; }
.node{ flex:1; padding:12px; border-radius:10px; border:1px solid var(--line-2); background:var(--surface-2); }
.node .nk{ font-family:var(--mono); font-size:10px; color:var(--ink-3); text-transform:uppercase; letter-spacing:.08em; }
.node .nv{ font-size:13px; font-weight:600; margin-top:5px; }

/* audio: waveforms */
.tracks{ display:flex; flex-direction:column; gap:14px; }
.track{ display:flex; align-items:center; gap:14px; }
.track .tname{ font-family:var(--mono); font-size:11px; color:var(--ink-3); width:74px; flex:none; }
.wave{ flex:1; height:40px; display:flex; align-items:center; gap:2px; }
.wave i{ flex:1; background:var(--ink-3); border-radius:2px; opacity:.55; }
.track.lead .wave i{ background:var(--green); opacity:.9; }
.track.muted .wave i{ background:var(--line); opacity:1; }

/* lufs meter */
.meter{ margin-top:6px; }
.meter-scale{ position:relative; height:230px; display:flex; align-items:flex-end; gap:18px; padding:0 4px; }
.meter-bar{ flex:1; border-radius:6px 6px 0 0; background:linear-gradient(to top, var(--green), color-mix(in srgb, var(--green) 55%, #9cc)); position:relative; }
.meter-bar.over{ background:linear-gradient(to top, var(--accent), color-mix(in srgb, var(--accent) 60%, #e6a)); }
.meter-bar .bl{ position:absolute; bottom:8px; left:0; right:0; text-align:center; font-family:var(--mono); font-size:10px; color:#fff; }
.meter-target{ position:absolute; left:0; right:0; border-top:2px dashed var(--accent); }
.meter-target span{ position:absolute; right:0; top:-18px; font-family:var(--mono); font-size:10px; color:var(--accent); }
.meter-x{ display:flex; gap:18px; padding:8px 4px 0; }
.meter-x span{ flex:1; text-align:center; font-family:var(--mono); font-size:10px; color:var(--ink-3); }

/* cue sheet table */
.cue{ border:1px solid var(--line-2); border-radius:10px; overflow:hidden; }
.cue-row{ display:grid; grid-template-columns:1.6fr 1fr .8fr .7fr; gap:10px; padding:11px 14px; border-bottom:1px solid var(--line-2); font-size:12.5px; }
.cue-row:last-child{ border-bottom:0; }
.cue-row.head{ background:var(--surface-2); font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); }
.cue-row .t{ font-weight:600; }
.cue-row .m{ font-family:var(--mono); color:var(--ink-2); }

/* ============================================================
   PIPELINE
   ============================================================ */
.pipe-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:52px; }
.pipe-card{ border:1px solid var(--line); border-radius:16px; background:var(--surface); padding:28px; position:relative; }
.pipe-card .num{ font-family:var(--mono); font-size:13px; font-weight:600; color:var(--accent); letter-spacing:.06em; }
.pipe-card h3{ font-size:21px; margin-top:14px; }
.pipe-card .where{ display:inline-flex; align-items:center; gap:8px; margin-top:12px; font-family:var(--mono); font-size:11.5px; color:var(--ink-2); padding:5px 10px; border-radius:7px; background:var(--surface-2); border:1px solid var(--line-2); }
.pipe-card p{ color:var(--ink-2); font-size:14.5px; margin-top:16px; }
.pipe-card .result{ margin-top:16px; padding-top:16px; border-top:1px solid var(--line-2); font-size:14px; color:var(--ink); }
.pipe-card .result b{ color:var(--accent); font-weight:600; }
@media(max-width:880px){ .pipe-grid{ grid-template-columns:1fr; } }

/* ============================================================
   SECURITY ARCHITECTURE
   ============================================================ */
.sec{ }
.sec-diagram{ display:grid; grid-template-columns:1fr auto 1fr; gap:0; margin-top:48px; align-items:stretch; }
.sec-zone{ border-radius:16px; padding:26px; }
.sec-zone.onprem{ background:var(--surface); border:1px solid var(--line); }
.sec-zone.cloud{ background:var(--ink); color:var(--cream); border:1px solid var(--ink); }
.sec-zone .zlbl{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); display:flex; align-items:center; gap:8px; }
.sec-zone.cloud .zlbl{ color:#8b93a4; }
.sec-zone h4{ font-size:20px; margin-top:14px; }
.sec-zone p{ font-size:14px; margin-top:10px; color:var(--ink-2); }
.sec-zone.cloud p{ color:#9aa6bd; }
.sec-node{ display:flex; align-items:center; gap:11px; margin-top:14px; padding:12px 14px; border-radius:10px; background:var(--surface-2); border:1px solid var(--line-2); font-size:13.5px; font-weight:500; }
.sec-zone.cloud .sec-node{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.12); color:var(--cream); }
.sec-node .mi{ width:18px; height:18px; flex:none; color:var(--accent); }
.sec-pipe{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; padding:0 22px; min-width:170px; }
.sec-flow{ text-align:center; }
.sec-flow .arr{ color:var(--ink-3); }
.sec-flow .arr svg{ width:90px; height:18px; }
.sec-flow .fl{ font-family:var(--mono); font-size:10.5px; color:var(--ink-2); margin-top:4px; max-width:150px; }
.sec-flow.back .arr{ transform:scaleX(-1); display:inline-block; color:var(--green); }
@media(max-width:920px){
  .sec-diagram{ grid-template-columns:1fr; }
  .sec-pipe{ flex-direction:row; padding:18px 0; min-width:0; }
  .sec-flow.back .arr{ transform:scaleX(1) rotate(180deg); }
}
.sec-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:30px; }
.sec-stat{ border:1px solid var(--line); border-radius:14px; background:var(--surface); padding:22px; }
.sec-stat .v{ font-family:var(--display); font-size:34px; font-weight:800; }
.sec-stat .v .u{ font-size:16px; color:var(--ink-3); font-weight:600; }
.sec-stat .k{ font-size:13.5px; color:var(--ink-2); margin-top:6px; }
@media(max-width:760px){ .sec-stats{ grid-template-columns:1fr; } }

/* ============================================================
   ARTIFACTS
   ============================================================ */
.artgrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:46px; }
.artcard{ border:1px solid var(--line); border-radius:14px; background:var(--surface); padding:22px; }
.artcard .ai{ width:40px; height:40px; border-radius:10px; display:grid; place-items:center; }
.artcard .ai svg{ width:20px; height:20px; }
.artcard h4{ font-size:17px; margin-top:16px; }
.artcard .fmt{ font-family:var(--mono); font-size:11.5px; color:var(--accent); margin-top:6px; }
.artcard p{ font-size:13.5px; color:var(--ink-2); margin-top:10px; }
@media(max-width:900px){ .artgrid{ grid-template-columns:1fr 1fr; } }
@media(max-width:520px){ .artgrid{ grid-template-columns:1fr; } }

/* ============================================================
   SAVINGS
   ============================================================ */
.save-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:48px; }
.save-card{ border-radius:18px; padding:30px; border:1px solid var(--line); }
.save-card.old{ background:var(--surface); }
.save-card.new{ background:var(--ink); color:var(--cream); border-color:var(--ink); }
.save-card .lbl{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); }
.save-card.new .lbl{ color:#8b93a4; }
.save-card .amt{ font-family:var(--display); font-size:clamp(40px,5vw,60px); font-weight:800; margin-top:12px; letter-spacing:-0.03em; }
.save-card.new .amt{ color:var(--cream); }
.save-bar{ height:10px; border-radius:999px; background:var(--line); margin-top:18px; overflow:hidden; }
.save-bar i{ display:block; height:100%; border-radius:999px; }
.save-card.old .save-bar i{ background:var(--ink-3); }
.save-card.new .save-bar{ background:rgba(255,255,255,.14); }
.save-card.new .save-bar i{ background:var(--green); }
.save-card .desc{ font-size:14px; color:var(--ink-2); margin-top:16px; }
.save-card.new .desc{ color:#9aa6bd; }
.save-net{ margin-top:28px; border:1px solid var(--line); border-radius:18px; background:var(--accent-soft); padding:28px 30px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.save-net .big{ font-family:var(--display); font-size:clamp(30px,4vw,46px); font-weight:800; color:var(--accent); }
.save-net .lbl{ font-size:15px; color:var(--ink-2); max-width:34ch; }
.save-net .mult{ font-family:var(--display); font-size:clamp(34px,4.5vw,54px); font-weight:800; color:var(--ink); white-space:nowrap; }
@media(max-width:760px){ .save-grid{ grid-template-columns:1fr; } }

/* rate card */
.rate{ margin-top:40px; border:1px solid var(--line); border-radius:16px; overflow:hidden; background:var(--surface); }
.rate-row{ display:grid; grid-template-columns:1.4fr 2fr 1fr; gap:16px; padding:18px 24px; border-bottom:1px solid var(--line-2); align-items:center; }
.rate-row:last-child{ border-bottom:0; }
.rate-row.head{ background:var(--surface-2); font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); }
.rate-row .name{ font-weight:700; font-size:15.5px; }
.rate-row .det{ font-size:13.5px; color:var(--ink-2); }
.rate-row .price{ font-family:var(--mono); font-size:14px; font-weight:600; text-align:right; }
.rate-row .price .per{ color:var(--ink-3); font-weight:500; }
body.no-pricing .pricing-block{ display:none; }
@media(max-width:680px){ .rate-row{ grid-template-columns:1fr; gap:6px; } .rate-row .price{ text-align:left; } .rate-row.head{ display:none; } }

/* ============================================================
   DOWNLOAD
   ============================================================ */
.dl-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:24px; margin-top:52px; }
.dl-card{ position:relative; border-radius:18px; padding:30px; display:flex; flex-direction:column; }
.dl-card.full{ background:var(--ink); color:var(--cream); border:1px solid var(--ink); }
.dl-card.lite{ background:var(--surface); border:1px solid var(--line); }
.dl-flag{ position:absolute; top:22px; right:22px; font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; padding:5px 10px; border-radius:999px; }
.dl-card.full .dl-flag{ background:var(--accent); color:var(--cream); }
.dl-card.lite .dl-flag{ background:var(--surface-2); color:var(--ink-3); border:1px solid var(--line-2); }
.dl-icon{ width:46px; height:46px; border-radius:12px; display:grid; place-items:center; flex:none; }
.dl-card.full .dl-icon{ background:rgba(255,255,255,.1); }
.dl-card.lite .dl-icon{ background:var(--chip-5); }
.dl-icon svg{ width:24px; height:24px; }
.dl-card h3{ font-size:24px; margin-top:18px; letter-spacing:-0.02em; }
.dl-card.full h3{ color:var(--cream); }
.dl-card .dl-desc{ font-size:14.5px; margin-top:10px; max-width:42ch; }
.dl-card.full .dl-desc{ color:#9aa6bd; }
.dl-card.lite .dl-desc{ color:var(--ink-2); }
.dl-mods{ display:flex; flex-wrap:wrap; gap:7px; margin-top:20px; }
.dl-mod{ display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600; padding:6px 11px; border-radius:999px; white-space:nowrap; }
.dl-card.full .dl-mod{ background:rgba(255,255,255,.08); color:#dde3ee; }
.dl-card.lite .dl-mod{ background:var(--surface-2); color:var(--ink-2); border:1px solid var(--line-2); }
.dl-mod .sw{ width:7px; height:7px; border-radius:50%; flex:none; }
.dl-actions{ display:flex; align-items:center; gap:12px; margin-top:auto; padding-top:26px; flex-wrap:wrap; }
.dl-card.full .btn--ghost{ color:var(--cream); border-color:rgba(255,255,255,.22); }
.dl-card.full .btn--ghost:hover{ background:rgba(255,255,255,.08); }
.dl-card.full .btn--primary{ background:var(--cream); color:var(--ink); }
.dl-meta{ display:flex; gap:16px; margin-top:18px; font-family:var(--mono); font-size:11px; letter-spacing:.04em; }
.dl-card.full .dl-meta{ color:#7e8699; }
.dl-card.lite .dl-meta{ color:var(--ink-3); }
.dl-meta span{ display:inline-flex; align-items:center; gap:6px; }
.dl-meta svg{ width:13px; height:13px; }
.btn--lg{ height:54px; padding:0 26px; font-size:16px; }
@media(max-width:820px){ .dl-grid{ grid-template-columns:1fr; } }

/* partners strip */
.partners{ margin-top:54px; padding-top:40px; border-top:1px solid var(--line); display:flex; align-items:center; gap:36px; flex-wrap:wrap; }
.partners-lbl{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); flex:none; }
.partners-row{ display:flex; align-items:center; gap:38px; flex-wrap:wrap; }
.partner{ display:flex; align-items:center; gap:11px; color:var(--ink-2); }
.partner > svg{ height:24px; width:auto; flex:none; color:var(--ink); opacity:.85; }
.partner-tag{ font-size:12.5px; font-weight:600; color:var(--ink-2); line-height:1.2; max-width:13ch; }
@media(max-width:600px){ .partners-row{ gap:24px; } }

/* ============================================================
   FINAL CTA + FOOTER
   ============================================================ */
.anchor-alias{ display:block; height:0; position:relative; top:-96px; visibility:hidden; }
.cta{ text-align:center; }
.cta-card{ background:var(--ink); color:var(--cream); border-radius:24px; padding:clamp(48px,7vw,84px); position:relative; overflow:hidden; }
.cta-card h2{ font-size:clamp(32px,4.6vw,58px); color:var(--cream); max-width:18ch; margin:0 auto; }
.cta-card p{ color:#9aa6bd; margin:20px auto 0; max-width:46ch; font-size:18px; }
.cta-card .hero-cta{ justify-content:center; margin-top:32px; }
.cta-card .btn--ghost{ color:var(--cream); border-color:rgba(255,255,255,.22); }
.cta-card .btn--ghost:hover{ background:rgba(255,255,255,.08); }
.cta-card .btn--primary{ background:var(--cream); color:var(--ink); }
.cta-ruler{ position:absolute; inset:auto 0 0 0; height:60px; display:flex; opacity:.12; }
.cta-ruler i{ flex:1; border-left:1px solid var(--cream); }

footer{ padding-block:64px 40px; border-top:1px solid var(--line); }
.foot-top{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:30px; }
.foot-brand .brand{ margin-bottom:14px; }
.foot-brand p{ color:var(--ink-2); font-size:14px; max-width:30ch; }
.foot-badges{ display:flex; gap:8px; margin-top:18px; }
.foot-badge{ font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; padding:6px 10px; border-radius:7px; border:1px solid var(--line); color:var(--ink-2); }
.foot-col h5{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); font-weight:500; margin-bottom:14px; }
.foot-col a{ display:block; font-size:14px; color:var(--ink-2); padding:5px 0; }
.foot-col a:hover{ color:var(--ink); }
.foot-bot{ display:flex; align-items:center; justify-content:space-between; margin-top:48px; padding-top:24px; border-top:1px solid var(--line); font-size:13px; color:var(--ink-3); font-family:var(--mono); flex-wrap:wrap; gap:12px; }
@media(max-width:820px){ .foot-top{ grid-template-columns:1fr 1fr; } }

/* screenshots proof section */
.proof-frame{ margin-top:46px; border-radius:18px; overflow:hidden; border:1px solid var(--line); box-shadow:0 40px 80px -40px rgba(28,27,23,.4); background:var(--surface); }
.proof-frame .appwin-bar{ border-radius:0; }
.proof-grid{ display:grid; gap:20px; }

/* reveal on scroll — armed only when the page is actually visible
   (so hidden/print/throttled contexts always show content) */
.reveal{ }
html.anim-ready .reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1); }
html.anim-ready .reveal.in{ opacity:1; transform:none; }
html.anim-ready .flow-panel.active{ animation:fade .4s ease; }
@media(prefers-reduced-motion:reduce){ html.anim-ready .reveal{ opacity:1; transform:none; transition:none; } html.anim-ready .flow-panel.active{ animation:none; } }