/* ═══════════════════════════════════════════════════════════════════════════
   RuleExpert marketing site — design prototype
   Tokens are the PRODUCT's design system, unchanged, so the site and the app
   read as one company. Never hardcode a colour outside this block.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  --teal:#1D9E75; --teal-dark:#0F6E56; --teal-light:#E1F5EE;
  --navy:#0F1F3D; --canvas:#F8FAFC; --line:#E2E8F0;
  --ink:#1A2332; --muted:#586880; --faint:#67748A;
  --red:#EF4444; --amber:#F59E0B; --green:#10B981;
  /* Text variants. The brand red and green are for fills, badges and icons, where contrast is
     judged differently; as TEXT on white they score 3.76:1 and 2.54:1 and fail WCAG AA. */
  --red-text:#C93A3A; --green-text:#087F5B;
  --purple:#7C3AED;               /* AI Suite ONLY — same rule as the product */
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --wrap:1180px;
  --r:14px;
  --shadow:0 1px 3px rgba(15,31,61,.05);
  --lift:0 10px 34px rgba(15,31,61,.10);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--sans);color:var(--ink);background:#fff;
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{margin:0;color:var(--navy);text-wrap:balance;letter-spacing:-.022em;line-height:1.12}
h1{font-size:clamp(2.4rem,5vw,3.65rem);font-weight:800;letter-spacing:-.032em}
h2{font-size:clamp(1.75rem,3.2vw,2.5rem);font-weight:750}
h3{font-size:1.16rem;font-weight:700;letter-spacing:-.012em}
p{margin:0}
a{color:inherit;text-decoration:none}
img,svg{max-width:100%}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.eyebrow{font-size:.8rem;font-weight:750;letter-spacing:.13em;text-transform:uppercase;color:var(--teal-dark)}
.lede{font-size:1.16rem;color:var(--muted);line-height:1.62}
section{padding:88px 0}
.tnum{font-variant-numeric:tabular-nums}
:focus-visible{outline:2.5px solid var(--teal);outline-offset:3px;border-radius:6px}

/* ── buttons ─────────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:9px;border-radius:11px;
  font-size:.945rem;font-weight:650;padding:13px 22px;border:1.5px solid transparent;
  cursor:pointer;transition:background .16s,border-color .16s,transform .16s;white-space:nowrap}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--teal);color:#fff}
.btn-primary:hover{background:var(--teal-dark)}
.btn-outline{border-color:var(--line);background:#fff;color:var(--navy)}
.btn-outline:hover{border-color:var(--faint)}
.btn-ghost{color:var(--navy);padding-left:6px;padding-right:6px}
.btn-ghost:hover{color:var(--teal-dark)}
.btn-onnavy{background:#fff;color:var(--navy)}
.btn-onnavy-outline{border-color:rgba(255,255,255,.26);color:#fff}
.btn-onnavy-outline:hover{border-color:rgba(255,255,255,.5)}
.btn-lg{padding:15px 26px;font-size:1rem}

/* ── header ──────────────────────────────────────────────────────────────── */
/* Scoped to the site header by class, not the bare element: .mod-head is a <header> too, and a
   bare `header` rule made all six module headings sticky at z-index 50 — they scrolled up and
   parked on top of the real navigation. */
.site-head{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.9);
  backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:70px;gap:28px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;color:var(--navy);font-size:1.06rem;letter-spacing:-.02em}
.mark{width:33px;height:33px;border-radius:9px;background:var(--teal);color:#fff;display:grid;
  place-items:center;font-size:.83rem;font-weight:800;letter-spacing:-.02em}
.mark-img{width:36px;height:36px;display:block}
.navlinks{display:flex;gap:26px;font-size:.93rem;font-weight:550;color:var(--muted)}
.navlinks a:hover{color:var(--navy)}
.navcta{display:flex;align-items:center;gap:10px}
@media(max-width:980px){.navlinks{display:none}.navcta .hide-sm{display:none}}

/* ── hero ────────────────────────────────────────────────────────────────── */
.hero{padding:72px 0 64px;background:
  radial-gradient(1100px 460px at 88% -8%, var(--teal-light) 0%, rgba(225,245,238,0) 62%)}
.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:60px;align-items:center}
@media(max-width:940px){.hero-grid{grid-template-columns:1fr;gap:44px}}
.pill{display:inline-flex;align-items:center;gap:8px;background:var(--teal-light);
  color:var(--teal-dark);border-radius:999px;padding:7px 15px;font-size:.83rem;font-weight:650}
.hero h1{margin:20px 0 18px}
.hero .lede{max-width:38ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hero-note{margin-top:16px;font-size:.87rem;color:var(--faint)}

/* the product's own output, shown rather than described */
.card-score{background:#fff;border:1px solid var(--line);border-radius:20px;
  box-shadow:var(--lift);padding:26px;position:relative}
.card-score header{position:static;background:none;border:0;backdrop-filter:none}
.score-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.score-label{font-size:.8rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.badge{font-size:.8rem;font-weight:700;padding:5px 11px;border-radius:999px}
.badge-amber{background:#FEF3C7;color:#92400E}
.badge-live{background:var(--teal-light);color:var(--teal-dark)}
.badge-soon{background:#F1F5F9;color:var(--muted)}
.badge-ai{background:#F3EEFF;color:var(--purple)}
.gauge{display:flex;align-items:center;gap:22px}
.gauge-num{font-size:3.5rem;font-weight:800;color:var(--navy);letter-spacing:-.045em;line-height:1}
.gauge-num span{font-size:1.2rem;color:var(--faint);font-weight:650}
.bars{flex:1;display:flex;flex-direction:column;gap:9px}
.bar-row{display:flex;align-items:center;gap:10px;font-size:.8rem;color:var(--muted)}
.bar-row b{width:104px;font-weight:600;color:var(--ink);flex:none}
.bar{flex:1;height:7px;background:var(--canvas);border-radius:99px;overflow:hidden}
.bar i{display:block;height:100%;border-radius:99px}
.exposure{margin-top:22px;padding-top:20px;border-top:1px dashed var(--line);
  display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.exposure .amt{font-size:1.6rem;font-weight:800;color:var(--red-text);letter-spacing:-.03em}

/* ── stats ───────────────────────────────────────────────────────────────── */
.stats{background:var(--navy);color:#fff;padding:60px 0}
.stats h2{color:#fff;font-size:1.06rem;font-weight:650;letter-spacing:0;margin-bottom:30px;opacity:.7}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
@media(max-width:860px){.stat-grid{grid-template-columns:repeat(2,1fr);gap:26px 20px}}
.stat .v{font-size:1.95rem;font-weight:800;color:#fff;letter-spacing:-.035em;line-height:1.15}
.stat .k{margin-top:8px;font-size:.9rem;color:rgba(255,255,255,.66);line-height:1.5}
.stat .src{margin-top:7px;font-size:.8rem;color:rgba(255,255,255,.4)}

/* ── generic section head ────────────────────────────────────────────────── */
.head{max-width:62ch;margin-bottom:46px}
.head h2{margin:12px 0 14px}

/* ── cards ───────────────────────────────────────────────────────────────── */
/* Each column class carries display:grid and the gap itself, rather than depending on .grid
   being present alongside it. Sixteen places across terms, privacy, contact and integrations
   write class="g3" on its own; with the layout split across two classes those cards stacked as
   plain blocks with no gap at all. Pairing them still works — the declarations are identical. */
.grid,.g2,.g3,.g4{display:grid;gap:20px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:980px){.g4,.g3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:660px){.g4,.g3,.g2{grid-template-columns:1fr}}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px;
  box-shadow:var(--shadow);transition:box-shadow .18s,transform .18s,border-color .18s}
.card:hover{box-shadow:var(--lift);transform:translateY(-2px)}
.card h3{margin-bottom:9px}
.card p{color:var(--muted);font-size:.945rem}
.ico{width:42px;height:42px;border-radius:11px;background:var(--teal-light);color:var(--teal-dark);
  display:grid;place-items:center;margin-bottom:16px}
.ico svg{width:21px;height:21px}
.ico.p{background:#F3EEFF;color:var(--purple)}

/* persona */
.persona{background:var(--canvas)}
.p-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px;
  display:flex;flex-direction:column;gap:12px;transition:border-color .18s,box-shadow .18s,transform .18s}
.p-card:hover{border-color:var(--teal-dark);box-shadow:var(--lift);transform:translateY(-2px)}
.p-role{font-size:.8rem;font-weight:750;letter-spacing:.09em;text-transform:uppercase;color:var(--teal-dark)}
.p-card h3{font-size:1.24rem;line-height:1.24}
.p-card p{color:var(--muted);font-size:.93rem;flex:1}
.p-link{font-weight:650;font-size:.9rem;color:var(--teal-dark);display:inline-flex;align-items:center;gap:6px}
.p-card:hover .p-link svg{transform:translateX(3px)}
.p-link svg{width:15px;height:15px;transition:transform .18s}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;counter-reset:s}
@media(max-width:880px){.steps{grid-template-columns:1fr}}
.step{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:30px 26px}
.step-n{font-family:var(--mono);font-size:.8rem;font-weight:700;color:var(--teal-dark);letter-spacing:.06em}
.step h3{margin:14px 0 10px;font-size:1.28rem}
.step p{color:var(--muted);font-size:.95rem}

/* scorecard feature */
.feature{background:var(--teal-light)}
.feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
@media(max-width:940px){.feature-grid{grid-template-columns:1fr;gap:36px}}
.checks{list-style:none;padding:0;margin:26px 0 0;display:flex;flex-direction:column;gap:13px}
.checks li{display:flex;gap:12px;align-items:flex-start;font-size:.98rem;color:var(--ink)}
.checks svg{width:20px;height:20px;color:var(--teal-dark);flex:none;margin-top:2px}
.quote-card{background:#fff;border-radius:20px;padding:30px;box-shadow:var(--lift);border:1px solid rgba(15,31,61,.06)}
/* The row-style .vs (a flex line of "them vs us") was removed: nothing used it, and its
   display:flex leaked into the .vs comparison cards below — which never reset display — laying
   each card's heading, "Good at:" line and body out as three side-by-side columns. */

/* coverage table */
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:#fff}
table{border-collapse:collapse;width:100%;min-width:660px;font-size:.93rem}
th,td{text-align:left;padding:15px 18px;border-bottom:1px solid var(--line)}
th{background:var(--canvas);font-size:.8rem;font-weight:750;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);white-space:nowrap}
tr:last-child td{border-bottom:0}
td.sec{font-family:var(--mono);font-size:.85rem;color:var(--navy);font-weight:650;white-space:nowrap}
td.pen{font-weight:700;color:var(--navy);white-space:nowrap}
.mod-tag{display:inline-block;background:var(--teal-light);color:var(--teal-dark);
  border-radius:7px;padding:4px 10px;font-size:.82rem;font-weight:650;white-space:nowrap}

/* proof — the one claim nobody else can make */
.proof{background:var(--navy);color:#fff}
.proof h2{color:#fff}
.proof .lede{color:rgba(255,255,255,.68)}
.proof-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
@media(max-width:940px){.proof-grid{grid-template-columns:1fr;gap:38px}}
.terminal{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.13);
  border-radius:16px;padding:24px;font-family:var(--mono);font-size:.83rem;line-height:1.85}
.t-row{display:flex;gap:12px;color:rgba(255,255,255,.62)}
.t-row .k{color:rgba(255,255,255,.4);width:92px;flex:none}
.t-hash{color:var(--teal-dark);word-break:break-all}
.t-ok{display:inline-flex;align-items:center;gap:8px;color:var(--green-text);font-weight:700;margin-top:16px;
  padding-top:16px;border-top:1px solid rgba(255,255,255,.11);width:100%}
.t-ok svg{width:17px;height:17px}

/* modules */
.m-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px;
  display:flex;flex-direction:column;gap:11px;transition:box-shadow .18s,transform .18s}
.m-card:hover{box-shadow:var(--lift);transform:translateY(-2px)}
.m-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.m-card h3{font-size:1.06rem}
.m-card p{color:var(--muted);font-size:.9rem;flex:1}
.suite-head{display:flex;align-items:baseline;gap:14px;margin:0 0 22px}
.suite-head h3{font-size:1.3rem}
.suite-head span{font-size:.875rem;color:var(--muted)}

/* comparison */
.cmp{background:var(--canvas)}
.cmp td:first-child{font-weight:650;color:var(--navy)}
.cmp .yes{color:var(--teal-dark);font-weight:700}
.cmp .no{color:var(--faint)}
.cmp th.us{background:var(--teal-light);color:var(--teal-dark)}
.cmp td.us{background:rgba(225,245,238,.42)}

/* industries */
.ind{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--line);background:#fff;
  border-radius:999px;padding:11px 19px;font-weight:600;font-size:.94rem;transition:border-color .16s,color .16s}
.ind:hover{border-color:var(--teal-dark);color:var(--teal-dark)}
.ind svg{width:17px;height:17px;color:var(--teal-dark)}
.ind-wrap{display:flex;flex-wrap:wrap;gap:12px}

/* testimonials */
.t-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px;
  display:flex;flex-direction:column;gap:16px}
.t-card blockquote{margin:0;font-size:1rem;line-height:1.62;color:var(--ink)}
.t-who{display:flex;align-items:center;gap:12px;padding-top:4px}
.t-av{width:40px;height:40px;border-radius:50%;background:var(--teal-light);color:var(--teal-dark);
  display:grid;place-items:center;font-weight:750;font-size:.86rem;flex:none}
.t-who .n{font-weight:650;font-size:.92rem}
.t-who .r{font-size:.83rem;color:var(--muted)}

/* faq */
details{border:1px solid var(--line);border-radius:var(--r);background:#fff;margin-bottom:12px;overflow:hidden}
details[open]{border-color:var(--teal-dark)}
summary{padding:20px 24px;font-weight:650;cursor:pointer;list-style:none;display:flex;
  justify-content:space-between;align-items:center;gap:18px;color:var(--navy);font-size:1.01rem}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-size:1.4rem;font-weight:400;color:var(--teal-dark);flex:none;line-height:1}
details[open] summary::after{content:"\2212"}
details p{padding:0 24px 22px;color:var(--muted);font-size:.96rem;max-width:78ch}

/* insights */
.post{display:flex;flex-direction:column;gap:10px;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);padding:24px;transition:box-shadow .18s,transform .18s}
.post:hover{box-shadow:var(--lift);transform:translateY(-2px)}
.post .cat{font-size:.8rem;font-weight:750;letter-spacing:.08em;text-transform:uppercase;color:var(--teal-dark)}
.post h3{font-size:1.06rem;line-height:1.34}
.post .d{font-size:.83rem;color:var(--faint)}

/* final cta */
.final{background:var(--navy);color:#fff;text-align:center}
.final h2{color:#fff;max-width:20ch;margin:0 auto 16px}
.final p{color:rgba(255,255,255,.68);max-width:56ch;margin:0 auto}
.final-cta{display:flex;flex-wrap:wrap;gap:13px;justify-content:center;margin-top:34px}

/* footer */
footer{background:#fff;border-top:1px solid var(--line);padding:56px 0 34px;font-size:.92rem}
.f-grid{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:34px}
@media(max-width:900px){.f-grid{grid-template-columns:repeat(2,1fr)}}
.f-grid h3{font-size:.8rem;letter-spacing:.09em;text-transform:uppercase;color:var(--faint);
  margin-bottom:14px;font-weight:750}
.f-grid ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;color:var(--muted)}
.f-grid a:hover{color:var(--teal-dark)}
.f-bottom{margin-top:42px;padding-top:24px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;color:var(--faint);font-size:.86rem}
.f-note{max-width:52ch;color:var(--muted);margin-top:14px;font-size:.9rem}

/* prototype ribbon — removed on build */
.proto{position:fixed;right:14px;bottom:14px;z-index:99;background:var(--navy);color:#fff;
  border-radius:10px;padding:9px 15px;font-size:.8rem;font-weight:600;box-shadow:var(--lift);opacity:.93}
@media print{.proto{display:none}}

/* ── product tour ───────────────────────────────────────────────────────── */
.tour{background:var(--canvas)}
.tour-row{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:center;margin-bottom:76px}
.tour-row:last-child{margin-bottom:0}
.tour-row.reverse .tour-copy{order:2}
.tour-row.reverse .shot{order:1}
@media(max-width:960px){
  .tour-row{grid-template-columns:1fr;gap:28px;margin-bottom:56px}
  .tour-row.reverse .tour-copy,.tour-row.reverse .shot{order:initial}
}
.tour-n{font-family:var(--mono);font-size:.8rem;font-weight:700;color:var(--teal-dark);letter-spacing:.08em}
.tour-copy h3{font-size:1.65rem;margin:12px 0 12px;line-height:1.2}
.tour-copy p{color:var(--muted);font-size:1.02rem}
.mini{list-style:none;padding:0;margin:20px 0 0;display:flex;flex-direction:column;gap:9px}
.mini li{position:relative;padding-left:24px;font-size:.94rem;color:var(--ink)}
.mini li::before{content:"";position:absolute;left:0;top:8px;width:9px;height:9px;border-radius:3px;
  background:var(--teal-light);border:1.5px solid var(--teal)}

/* a browser frame, so a screenshot reads as software rather than as a picture */
.shot{margin:0;border-radius:14px;overflow:hidden;background:#fff;
  border:1px solid var(--line);box-shadow:var(--lift)}
.shot-bar{display:flex;align-items:center;gap:7px;padding:11px 14px;background:#F1F5F9;
  border-bottom:1px solid var(--line)}
.shot-bar span{width:10px;height:10px;border-radius:50%;background:#CBD5E1;flex:none}
.shot-bar em{margin-left:12px;font-style:normal;font-size:.8rem;color:var(--faint);
  font-family:var(--mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shot img{display:block;width:100%;height:auto}

/* ── FAQ + testimonials, one segment ────────────────────────────────────── */
.faqproof{background:#fff}
.fp-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:64px;align-items:start}
@media(max-width:980px){.fp-grid{grid-template-columns:1fr;gap:52px}}
.fp-cta{margin-top:28px;display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.fp-cta p{font-size:.92rem;color:var(--muted);max-width:34ch}
.fp-right{position:sticky;top:100px}
@media(max-width:980px){.fp-right{position:static}}
.fp-note{margin-top:16px;font-size:.85rem;color:var(--faint)}

.slider{background:var(--canvas);border:1px solid var(--line);border-radius:18px;padding:32px}
.slides{position:relative;min-height:270px}
.slide{margin:0;position:absolute;inset:0;opacity:0;transform:translateY(10px);
  transition:opacity .45s ease,transform .45s ease;pointer-events:none}
.slide.is-active{opacity:1;transform:none;pointer-events:auto;position:relative}
.slide blockquote{margin:0 0 22px;font-size:1.22rem;line-height:1.55;color:var(--navy);
  font-weight:500;letter-spacing:-.012em}
.slide figcaption{display:flex;align-items:center;gap:13px}
.slide .n{font-weight:650;font-size:.94rem;display:block;color:var(--ink)}
.slide .r{font-size:.86rem;color:var(--muted);display:block}
.slider-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin-top:26px;padding-top:20px;border-top:1px solid var(--line)}
.dots{display:flex;gap:9px}
.dot{width:9px;height:9px;padding:0;border-radius:50%;border:0;background:#CBD5E1;cursor:pointer;
  transition:background .2s,width .2s}
.dot.is-on{background:var(--teal);width:26px;border-radius:99px}
.slider-pause{border:0;background:none;color:var(--faint);font-size:.82rem;cursor:pointer;
  font-family:inherit;padding:4px 6px}
.slider-pause:hover{color:var(--muted)}

@media(prefers-reduced-motion:reduce){
  .slide{transition:none}
  .card:hover,.p-card:hover,.m-card:hover,.post:hover,.btn:hover{transform:none}
}


/* ── v2 additions ───────────────────────────────────────────────────────── */
html{scroll-behavior:smooth}
.tint{background:var(--canvas)}
.eyebrow-teal{color:var(--teal-dark)}

/* Lighter headline. 800 weight at 3.4rem read as shouting; 650 at a slightly smaller
   size keeps the authority without the heaviness. */
h1{font-size:clamp(2rem,3.9vw,2.9rem);font-weight:650;letter-spacing:-.028em;line-height:1.18}
h2{font-weight:680}

/* Section rhythm tightened — 84px top and bottom left the page feeling loose. */
section{padding:60px 0}
.head{margin-bottom:36px}

/* Headings centred, with the body copy centred under them. Tables, cards and the
   product tour stay left-aligned, because centred body text is hard to read. */
.head{text-align:center;margin-left:auto;margin-right:auto}
.head .lede{margin-left:auto;margin-right:auto}
.kicker{margin-top:20px;font-size:1.05rem;color:var(--navy);font-weight:600;text-align:center}
.suite-head{justify-content:center}
/* the hero and the two split sections keep their left alignment — a centred hero
   with a visual beside it looks unbalanced */
.hero .lede,.tour-copy,.proof-grid>div:first-child,.fp-grid>div{text-align:left}
.insights-head{text-align:left}

/* hero visual — the real Scorecard result: ring, band, exposure */
.card-score{text-align:center}
.indic{display:flex;align-items:center;justify-content:center;gap:8px;font-size:.8rem;font-weight:650;
  color:#92400E;background:#FFFBEB;border:1px solid #FDE68A;border-radius:9px;padding:9px 12px;
  margin:-6px -6px 22px}
.indic-dot{width:7px;height:7px;border-radius:50%;background:var(--amber);flex:none}
.ring-wrap{position:relative;width:186px;height:186px;margin:0 auto}
.ring{width:100%;height:100%;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:15;stroke-linecap:round}
.ring-bg{stroke:#E8EDF3}
.ring-fg{stroke:#F97316}
.ring-mid{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ring-num{font-size:3.1rem;font-weight:750;color:var(--navy);letter-spacing:-.045em;line-height:1}
.ring-den{font-size:.95rem;color:var(--faint);font-weight:600;margin-top:2px}
.risk-pill{display:inline-block;margin-top:18px;background:#FFF3E6;color:#C2410C;border:1px solid #FED7AA;
  border-radius:999px;padding:8px 20px;font-size:.92rem;font-weight:700}
/* Stacked, not the base sheet's three-across row. Across, the range got a narrow middle
   column and broke as "₹268 Cr / to / ₹537 Cr" down three lines. Label, then the range on
   one line, then the caveat. */
.exposure{margin-top:24px;padding-top:22px;border-top:1px dashed var(--line);
  display:block;text-align:center}
.exposure .range{flex-wrap:nowrap;white-space:nowrap}
.exposure .amt{font-size:1.85rem;font-weight:800;color:var(--navy);letter-spacing:-.035em;margin-top:6px}
.exposure-note{font-size:.82rem;color:var(--faint);margin-top:9px;font-style:italic}

/* proof bar */
.proofbar{background:var(--navy);color:#fff;padding:30px 0}
.proofbar-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;text-align:center}
@media(max-width:860px){.proofbar-grid{grid-template-columns:repeat(2,1fr);gap:22px;text-align:left}}
.pb .v{font-size:1.5rem;font-weight:800;letter-spacing:-.03em;color:#fff}
.pb .k{margin-top:4px;font-size:.83rem;color:rgba(255,255,255,.6);line-height:1.4}

/* the law — one tile inverted, because it is the one that moves */
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
@media(max-width:900px){.stat-grid{grid-template-columns:repeat(2,1fr)}}
.stat{border:1px solid var(--line);border-radius:var(--r);padding:24px;background:#fff}
.stat .v{font-size:1.65rem;font-weight:800;color:var(--navy);letter-spacing:-.035em;line-height:1.15}
.stat .k{margin-top:9px;font-size:.92rem;color:var(--muted);line-height:1.5}
.stat .src{margin-top:10px;font-size:.8rem;color:var(--faint)}
.stat.clock{background:var(--navy);border-color:var(--navy)}
.stat.clock .v{color:#fff}
.stat.clock .k{color:rgba(255,255,255,.68)}
.stat.clock .src{color:rgba(255,255,255,.4)}

/* comparison-style tables */
th,td{vertical-align:top}
.have{color:var(--muted)}
.gap{color:var(--navy);font-weight:600}
.who{color:var(--teal-dark);font-weight:650;white-space:nowrap;font-size:.88rem}

/* free scorecard cards */
.freecard{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:28px}
.freecard .n{font-family:var(--mono);font-size:.8rem;color:var(--teal-dark);font-weight:700;letter-spacing:.06em}
.freecard h3{font-size:1.2rem;margin:10px 0 10px}
.freecard p{color:var(--muted);font-size:.95rem}

/* product tour — crops shown close to 1:1 so they stay legible */
.tour-row{display:grid;grid-template-columns:.8fr 1.2fr;gap:52px;align-items:center;margin-bottom:70px}
.tour-row:last-child{margin-bottom:0}
.tour-row.reverse .tour-copy{order:2}
.tour-row.reverse .shot{order:1}
@media(max-width:960px){
  .tour-row{grid-template-columns:1fr;gap:26px;margin-bottom:52px}
  .tour-row.reverse .tour-copy,.tour-row.reverse .shot{order:initial}
}
.tour-n{font-family:var(--mono);font-size:.8rem;font-weight:700;color:var(--teal-dark);letter-spacing:.08em}
.tour-copy h3{font-size:1.55rem;margin:12px 0;line-height:1.22}
.tour-copy p{color:var(--muted);font-size:1rem}
.shot{margin:0;border-radius:12px;overflow:hidden;background:#fff;border:1px solid var(--line);
  box-shadow:var(--lift);max-width:100%;justify-self:start}
.shot-bar{display:flex;align-items:center;gap:7px;padding:10px 13px;background:#F1F5F9;border-bottom:1px solid var(--line)}
.shot-bar span{width:9px;height:9px;border-radius:50%;background:#CBD5E1;flex:none}
.shot-bar em{margin-left:10px;font-style:normal;font-size:.8rem;color:var(--faint);font-family:var(--mono);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shot img{display:block;width:100%;height:auto}

/* modules */
.m-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px;
  display:flex;flex-direction:column;gap:9px;box-shadow:var(--shadow)}
.m-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.m-card h3{font-size:1.04rem}
.m-card p{color:var(--muted);font-size:.89rem}
.suite-head{display:flex;align-items:baseline;gap:14px;margin:0 0 20px;flex-wrap:wrap}
.suite-head h3{font-size:1.28rem}
.suite-head h3.ai{color:var(--purple)}
.suite-head span{font-size:.875rem;color:var(--muted)}
.suite-gap{margin-bottom:48px}
.badge{font-size:.8rem;font-weight:700;padding:5px 11px;border-radius:999px;white-space:nowrap}
.badge-live{background:var(--teal-light);color:var(--teal-dark)}
.badge-soon{background:#F3EEFF;color:var(--purple)}
.badge-amber{background:#FEF3C7;color:#92400E}

/* proof */
.proof{background:var(--navy);color:#fff}
.proof h2{color:#fff}
.proof .lede{color:rgba(255,255,255,.68)}
.proof-h{margin:12px 0 16px}
.proof-grid{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
@media(max-width:940px){.proof-grid{grid-template-columns:1fr;gap:34px}}
.terminal{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.13);border-radius:16px;
  padding:24px;font-family:var(--mono);font-size:.83rem;line-height:1.85}
.t-row{display:flex;gap:12px;color:rgba(255,255,255,.62)}
.t-row .k{color:rgba(255,255,255,.4);width:90px;flex:none}
.t-hash{color:var(--teal-dark);word-break:break-all}
.t-ok{display:flex;align-items:center;gap:8px;color:var(--green-text);font-weight:700;margin-top:16px;
  padding-top:16px;border-top:1px solid rgba(255,255,255,.11)}

/* pricing placeholder */
.pricing-hold{border:2px dashed var(--line);border-radius:var(--r);padding:44px;text-align:center;
  background:var(--canvas)}
.pricing-hold .hold-h{font-size:1.4rem}
.pricing-hold p{color:var(--muted);margin-top:10px}

/* FAQ + testimonials, one segment */
.fp-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:60px;align-items:start}
@media(max-width:980px){.fp-grid{grid-template-columns:1fr;gap:48px}}
.fp-h{margin:12px 0 26px}
.fp-right{position:sticky;top:100px}
@media(max-width:980px){.fp-right{position:static}}
.fp-cta{margin-top:26px;display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.fp-cta p{font-size:.91rem;color:var(--muted);max-width:34ch}
.fp-note{margin-top:14px;font-size:.85rem;color:var(--faint)}
.slider{background:#fff;border:1px solid var(--line);border-radius:18px;padding:30px}
.slides{position:relative;min-height:250px}
.slide{margin:0;position:absolute;inset:0;opacity:0;transform:translateY(10px);pointer-events:none;
  transition:opacity .45s ease,transform .45s ease}
.slide.is-active{opacity:1;transform:none;pointer-events:auto;position:relative}
.slide blockquote{margin:0 0 20px;font-size:1.2rem;line-height:1.55;color:var(--navy);font-weight:500;
  letter-spacing:-.012em}
.slide figcaption{display:flex;align-items:center;gap:13px}
.t-av{width:40px;height:40px;border-radius:50%;background:var(--teal-light);color:var(--teal-dark);
  display:grid;place-items:center;font-weight:750;font-size:.86rem;flex:none}
.slide .n{font-weight:650;font-size:.93rem;display:block}
.slide .r{font-size:.85rem;color:var(--muted);display:block}
.slider-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:24px;
  padding-top:18px;border-top:1px solid var(--line)}
.dots{display:flex;gap:9px}
.dot{width:9px;height:9px;padding:0;border-radius:50%;border:0;background:#CBD5E1;cursor:pointer;
  transition:background .2s,width .2s}
.dot.is-on{background:var(--teal);width:26px;border-radius:99px}
.slider-pause{border:0;background:none;color:var(--faint);font-size:.82rem;cursor:pointer;
  font-family:inherit;padding:4px 6px}
.slider-pause:hover{color:var(--muted)}

/* ── header menus ───────────────────────────────────────────────────────── */
.navlinks{align-items:center}
.menu{position:relative}
.menu-btn{display:inline-flex;align-items:center;gap:5px;background:none;border:0;cursor:pointer;
  font:inherit;font-size:.93rem;font-weight:550;color:var(--muted);padding:24px 0;font-family:inherit}
.menu-btn:hover,.menu:hover .menu-btn,.menu:focus-within .menu-btn{color:var(--navy)}
.menu-btn svg{transition:transform .18s}
.menu:hover .menu-btn svg,.menu:focus-within .menu-btn svg{transform:rotate(180deg)}
.menu-panel{position:absolute;top:100%;left:-18px;background:#fff;border:1px solid var(--line);
  border-radius:14px;box-shadow:var(--lift);padding:20px;display:none;gap:34px;z-index:60}
.menu-panel.wide{left:auto;right:-18px}
.menu:hover .menu-panel,.menu:focus-within .menu-panel{display:flex}
.menu-col{display:flex;flex-direction:column;gap:9px;min-width:186px}
.menu-h{font-size:.8rem;font-weight:750;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);margin-bottom:3px}
.menu-panel a{font-size:.9rem;color:var(--ink);white-space:nowrap}
.menu-panel a:hover{color:var(--teal-dark)}
.menu-dev{margin-top:8px;padding-top:11px;border-top:1px solid var(--line);color:var(--teal-dark)!important;
  font-weight:600}
.signin{font-size:.93rem;font-weight:600;color:var(--navy)}
.signin:hover{color:var(--teal-dark)}
@media(max-width:1120px){.menu-panel{padding:16px}.menu-col{min-width:160px}}

/* ── the exposure range, made readable ──────────────────────────────────── */
.range{display:flex;align-items:baseline;justify-content:center;gap:12px;margin-top:8px;flex-wrap:wrap}
.range .amt{font-size:2.1rem;font-weight:750;color:var(--navy);letter-spacing:-.03em;
  display:inline-flex;align-items:baseline;gap:2px}
.range .amt i{font-style:normal;font-size:1.35rem;font-weight:600;color:var(--muted)}
.range .amt em{font-style:normal;font-size:.95rem;font-weight:600;color:var(--muted);margin-left:4px}
.range-to{font-size:.9rem;color:var(--faint);font-weight:600}

/* ── the template library ───────────────────────────────────────────────── */
.legal-proof{display:grid;grid-template-columns:1.25fr .75fr;gap:44px;align-items:center;
  margin-top:44px;background:var(--teal-light);border-radius:var(--r);padding:36px;text-align:left}
@media(max-width:900px){.legal-proof{grid-template-columns:1fr;gap:26px;padding:28px}}
.legal-proof h3{font-size:1.5rem;line-height:1.24;margin:12px 0 14px}
.legal-proof p{color:var(--ink);font-size:1rem}
.legal-note{margin-top:14px!important;font-size:.93rem!important;color:var(--teal-dark)!important;font-weight:600}
.legal-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.legal-list li{background:#fff;border-radius:10px;padding:14px 16px;font-size:.9rem;color:var(--muted);
  line-height:1.45}
.legal-list strong{display:block;color:var(--navy);font-weight:650;margin-bottom:2px}

/* ══ PLATFORM PAGE ═══════════════════════════════════════════════════════ */
.plat-hero{text-align:center;padding-bottom:48px}
.plat-hero .lede{max-width:62ch;margin:0 auto}
/* No cap: the platform hero is a single centred column, so the headline has the whole
   width and sits on one line. The old 20ch broke it in two for no reason. */
.plat-hero h1{margin:20px auto 18px}
.trust-strip{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:30px}
.trust{background:#fff;border:1px solid var(--line);border-radius:999px;padding:9px 18px;
  font-size:.88rem;color:var(--muted)}
.trust b{color:var(--navy);font-weight:700}

/* one data model */
.model{display:grid;grid-template-columns:1fr auto 1.15fr;gap:28px;align-items:center}
@media(max-width:900px){.model{grid-template-columns:1fr;gap:20px}.model-arrow{transform:rotate(90deg);justify-self:center}}
.model-lbl{display:block;font-size:.8rem;font-weight:750;letter-spacing:.11em;text-transform:uppercase;
  color:var(--faint);margin-bottom:12px}
.model-card{background:#fff;border:2px solid var(--teal);border-radius:var(--r);padding:22px;
  box-shadow:var(--lift)}
.model-card strong{display:block;font-size:1.06rem;color:var(--navy);margin-bottom:6px}
.model-meta{display:block;font-size:.85rem;color:var(--muted);margin-bottom:14px}
.model-chips{display:flex;flex-wrap:wrap;gap:7px}
.model-chips span{background:var(--teal-light);color:var(--teal-dark);border-radius:7px;padding:4px 10px;
  font-size:.8rem;font-weight:650}
.model-arrow{color:var(--faint)}
.model-arrow svg{width:44px;height:26px}
.model-out ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.model-out li{background:#fff;border:1px solid var(--line);border-radius:10px;padding:13px 16px;
  font-size:.93rem;color:var(--muted);display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.model-out li b{color:var(--navy);font-weight:650}
.model-out li em{font-style:normal;font-family:var(--mono);font-size:.8rem;color:var(--teal-dark);
  margin-left:auto}

/* module blocks */
.mod{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:28px;
  margin-bottom:24px;box-shadow:var(--shadow)}
.mod:last-child{margin-bottom:0}
.mod-head{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  margin-bottom:20px}
.mod-head>div:first-child{display:flex;align-items:center;gap:12px}
.mod-head h3{font-size:1.32rem}
.mod-secs{display:flex;flex-wrap:wrap;gap:6px}
.mod-secs span{font-family:var(--mono);font-size:.8rem;font-weight:650;color:var(--muted);
  background:var(--canvas);border:1px solid var(--line);border-radius:6px;padding:3px 8px}
.chain{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-wrap:wrap;gap:8px;counter-reset:c}
.chain li{position:relative;background:var(--teal-light);color:var(--teal-dark);border-radius:8px;
  padding:8px 14px;font-size:.86rem;font-weight:650}
.chain li:not(:last-child)::after{content:"→";margin-left:10px;color:var(--faint);font-weight:400}
.mod-copy{color:var(--muted);font-size:1rem;max-width:78ch;margin-bottom:20px}
.pshot{margin:0 0 14px;border-radius:12px;overflow:hidden;background:#fff;border:1px solid var(--line);
  box-shadow:var(--shadow)}
.pshot:last-child{margin-bottom:0}
.pshot img{display:block;width:100%;height:auto}

/* what we hold / never hold */
.hold-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media(max-width:820px){.hold-grid{grid-template-columns:1fr}}
.hold{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px}
.hold h3{font-size:1.14rem;margin-bottom:14px}
.hold ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.hold li{position:relative;padding-left:28px;font-size:.94rem;color:var(--ink);line-height:1.5}
.hold li em{font-style:italic}
.hold-yes{border-top:3px solid var(--teal)}
.hold-no{border-top:3px solid var(--faint)}
.hold-yes li::before{content:"✓";position:absolute;left:0;top:-1px;color:var(--teal-dark);font-weight:700}
.hold-no li::before{content:"✕";position:absolute;left:0;top:-1px;color:var(--faint);font-weight:700}
.hold-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:24px}
@media(max-width:900px){.hold-facts{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.hold-facts{grid-template-columns:1fr}}
.hold-facts div{background:#fff;border:1px solid var(--line);border-radius:10px;padding:18px}
.hold-facts b{display:block;color:var(--navy);font-size:.96rem;margin-bottom:5px}
.hold-facts span{font-size:.86rem;color:var(--muted);line-height:1.5}

/* ── coverage cards ─────────────────────────────────────────────────────── */
.cov-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media(max-width:1080px){.cov-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.cov-grid{grid-template-columns:1fr}}
/* ── centre a trailing partial row ────────────────────────────────────────
   A CSS grid always packs its last row to the left, so five cards in three columns leave a hole on
   the right and the section stops looking deliberate. Ankita asked for that row to be centred.

   Opt-in via .row-center, because the pages already signed off use counts that fill their rows and
   must not shift. The container becomes wrapping flex: full rows are unchanged and only the short
   last row moves to the middle.

   --cols and --gap MUST mirror the grid being replaced at every breakpoint. The moment display
   becomes flex, every grid-template-columns rule above stops applying — so the media queries here
   are not duplicating those, they ARE the responsive behaviour. Get one wrong and the cards keep
   desktop widths on a phone.

   EACH RULE BELOW CARRIES ITS OWN display:flex, rather than inheriting it from a single .row-center
   rule. That looks redundant and is not. A bare .row-center is one class, the same weight as the
   .score-how it has to beat, and .score-how{display:grid} is declared 130 lines further down this
   file — so it won, .row-center did nothing, and step 5 of the DSR page sat alone against the left
   edge exactly as before. Two classes outrank one whatever the order, which makes these rules
   immune to wherever a future container happens to be defined. */
.row-center{flex-wrap:wrap;justify-content:center;gap:var(--gap)}
.row-center > *{flex:0 1 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));min-width:0}

.cov-grid.row-center{display:flex;--cols:4;--gap:18px}
@media(max-width:1080px){.cov-grid.row-center{--cols:2}}
@media(max-width:620px){.cov-grid.row-center{--cols:1}}

.grid.g3.row-center{display:flex;--cols:3;--gap:20px}
@media(max-width:980px){.grid.g3.row-center{--cols:2}}
@media(max-width:660px){.grid.g3.row-center{--cols:1}}

.score-how.row-center{display:flex;--cols:2;--gap:26px}
@media(max-width:900px){.score-how.row-center{--cols:1}}
.cov{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px;
  display:flex;flex-direction:column;gap:12px;box-shadow:var(--shadow)}
.cov-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.cov-sec{font-family:var(--mono);font-size:.82rem;font-weight:700;color:var(--navy);white-space:nowrap}
.cov-req{font-size:.92rem;color:var(--ink);line-height:1.5;flex:1}
.cov .mod-tag{align-self:flex-start}
/* penalty as a chip, weighted by severity — the eye should find ₹250 Cr first */
.pen-chip{font-size:.8rem;font-weight:750;padding:4px 10px;border-radius:7px;white-space:nowrap;
  background:#F1F5F9;color:var(--muted)}
.pen-chip.pen-mid{background:#FEF3C7;color:#92400E}
.pen-chip.pen-hi{background:#FEE2E2;color:#B91C1C}
.cov-note{margin-top:20px;font-size:.85rem;color:var(--faint);text-align:center}
/* .cov-note TRAILS a block: 20px above so it hugs what it comments on, nothing below because
   nothing follows it, and small and faint because it is an aside.

   Used as a LEAD-IN every one of those choices is wrong. The gap goes 36px above (inherited from
   .head) and 0 below, which is the uneven spacing Ankita spotted on the Privacy Operations page —
   and the most important sentence on that page, the one defining what the service IS, was set in
   footnote grey at 0.85rem.

   Same paragraph, right job. Body size, body colour, and the same 36px .head uses, on both sides. */
.cov-lead{max-width:74ch;margin:0 auto 36px;font-size:1.03rem;line-height:1.68;color:var(--ink);
  text-align:center}
.cov-lead b{color:var(--navy)}

/* ── platform facts ─────────────────────────────────────────────────────── */
.plat-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:34px}
@media(max-width:980px){.plat-facts{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.plat-facts{grid-template-columns:1fr}}
.plat-fact{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px}
.plat-fact h4{font-size:1.02rem;font-weight:700;color:var(--navy);margin-bottom:8px;letter-spacing:-.012em}
.plat-fact p{font-size:.9rem;color:var(--muted);line-height:1.55}
.center-cta{justify-content:center;margin-top:34px}
.suite-head.mt{margin-top:48px}

/* ── services ───────────────────────────────────────────────────────────── */
.svc-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:28px;
  box-shadow:var(--shadow);display:flex;flex-direction:column;gap:11px}
.svc-tag{align-self:flex-start;background:var(--navy);color:#fff;border-radius:999px;padding:5px 14px;
  font-size:.8rem;font-weight:750;letter-spacing:.1em;text-transform:uppercase}
.svc-card h3{font-size:1.22rem;margin-top:4px}
.svc-card p{color:var(--muted);font-size:.94rem}
.svc-list{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.svc-list li{position:relative;padding-left:22px;font-size:.93rem;color:var(--ink);font-weight:550}
.svc-list li::before{content:"";position:absolute;left:0;top:9px;width:8px;height:8px;border-radius:2px;
  background:var(--teal)}
.svc-how{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;
  margin-top:32px;background:var(--canvas);border:1px solid var(--line);border-radius:var(--r);padding:24px 28px}
.svc-how p{font-size:.96rem;color:var(--muted);max-width:64ch}
.svc-how strong{color:var(--navy)}

/* sectors strip label */
.sectors-line{text-align:center;font-size:.8rem;font-weight:750;letter-spacing:.13em;
  text-transform:uppercase;color:var(--faint);margin:52px 0 18px}

/* bullets beside the product screenshots */
.mini{list-style:none;padding:0;margin:18px 0 0;display:flex;flex-direction:column;gap:9px}
.mini li{position:relative;padding-left:23px;font-size:.93rem;color:var(--ink);line-height:1.5}
.mini li::before{content:"";position:absolute;left:0;top:8px;width:9px;height:9px;border-radius:3px;
  background:var(--teal-light);border:1.5px solid var(--teal)}

/* ── industries, drifting ───────────────────────────────────────────────── */
.marquee{display:flex;flex-direction:column;gap:14px;padding:4px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-row{overflow:hidden}
.marquee-track{display:flex;gap:12px;width:max-content;animation:drift 46s linear infinite}
.marquee-track.reverse{animation-direction:reverse;animation-duration:54s}
@keyframes drift{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marquee:hover .marquee-track,.marquee:focus-within .marquee-track{animation-play-state:paused}
.marquee .ind{white-space:nowrap;cursor:default}

/* insights */
.thumb{display:grid;place-items:center;height:132px;border-radius:10px;margin-bottom:14px;
  position:relative;overflow:hidden}
.thumb em{font-style:normal;font-family:var(--mono);font-size:1.35rem;font-weight:700;
  color:rgba(255,255,255,.94);letter-spacing:-.02em;z-index:1}
.thumb::after{content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.11) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.11) 1px,transparent 1px);
  background-size:22px 22px}
.thumb-a{background:linear-gradient(135deg,var(--navy),#1b3a63)}
.thumb-b{background:linear-gradient(135deg,var(--teal-dark),var(--teal))}
.thumb-c{background:linear-gradient(135deg,#5b3aa8,var(--purple))}
.insights-head{display:flex;justify-content:space-between;align-items:flex-end;max-width:none;gap:24px}
.ins-h{margin-top:12px}
.post{display:flex;flex-direction:column;gap:9px;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);padding:22px;box-shadow:var(--shadow)}
.post .cat{font-size:.8rem;font-weight:750;letter-spacing:.08em;text-transform:uppercase;color:var(--teal-dark)}
.post h3{font-size:1.03rem;line-height:1.34}
.post .d{font-size:.82rem;color:var(--faint)}

/* ══ SECTION HEADING RHYTHM ═════════════════════════════════════════════════
   House rule: a section heading sits on one line, the sentence under it on two.
   The old cap was 62ch measured in the BODY font — about 500px, wide enough for
   a paragraph and far too narrow for a 40px display line, so every h2 broke into
   two or three. Split the two: the heading gets the width of the column, the
   sentence keeps a comfortable measure of its own.
   check-lines.mjs proves this by counting rendered lines rather than characters,
   because the type scale is fluid and character counts lie. */
.head{max-width:none}
.head .lede{max-width:76ch}
.hero .lede{max-width:64ch}
.final h2{max-width:26ch}

/* ══ TRUST STRIP ════════════════════════════════════════════════════════════
   White chips on a near-white hero read as one undifferentiated row. Tint,
   border and a mark in front of each give three separate claims. */
.trust{background:var(--teal-light);border:1px solid rgba(29,158,117,.28);
  color:var(--teal-dark);display:inline-flex;align-items:center;gap:8px;
  padding:10px 18px;font-weight:550}
.trust b{color:var(--teal-dark)}
.trust svg{flex:none;opacity:.9}

/* ══ MID-PAGE CTA BAND ══════════════════════════════════════════════════════
   Someone convinced two thirds of the way down should not have to scroll to the
   bottom to act. */
.band{background:var(--navy);border-radius:var(--r);padding:38px 44px;
  display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap}
/* Only when something precedes it in the same section. A .band that opens its own section
   (.band-sec) already has the section's padding above it and must not gain a second gap. */
.band:not(:first-child){margin-top:38px}
.band>div:first-child{flex:1 1 520px}
.band h3{color:#fff;font-size:1.4rem;margin-bottom:7px}
.band p{color:rgba(255,255,255,.7);font-size:1rem;max-width:66ch}
.band .cta{display:flex;gap:12px;flex-wrap:wrap;flex:none}
.band .btn-ghost{border-color:rgba(255,255,255,.34);color:#fff;background:transparent}
.band .btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)}
/* The band closes the page and sits in its own white section, so it needs equal air above and
   below. padding-top:0 used to tuck it under the preceding section, but the band's white
   background starts at this section — not the previous one — so zeroing the top left it flush
   against the top edge with 60px underneath, visibly off-centre in its own band of white. */

/* Hero action row — the platform page opens with somewhere to go. */
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:26px}
.hero-cta .note{width:100%;text-align:center;font-size:.86rem;color:var(--faint);margin-top:2px}

/* ══ SCORECARD PAGE ═════════════════════════════════════════════════════════
   Four new blocks. Everything else on the page reuses .head, .steps, .grid,
   .freecard, .band, .fp-grid and .final, so the stylesheet grows by a few
   hundred bytes rather than by a page's worth. */

/* four across where three fitted before */
.g4{grid-template-columns:repeat(4,1fr)}

/* how the score is built — a numbered two-column explanation */
.score-how{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.sh-step{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px;
  box-shadow:var(--shadow);position:relative}
.sh-n{position:absolute;top:26px;left:26px;width:28px;height:28px;border-radius:50%;
  background:var(--teal-light);color:var(--teal-dark);font-weight:750;font-size:.86rem;
  display:flex;align-items:center;justify-content:center}
.sh-step h3{margin:0 0 9px 40px;font-size:1.06rem;min-height:28px;display:flex;align-items:center}
.sh-step p{color:var(--muted);font-size:.96rem;line-height:1.62}

/* The same numbered step inside a plain .card, which unlike .sh-step is not positioned — and
   must not be: .card lifts on hover with a transform, so an absolutely positioned badge would
   ride along and land on the heading. Float instead, so the number sits on the heading's first
   line the way it does in .sh-step, without either element leaving normal flow. */
.card:has(> .sh-n){display:grid;grid-template-columns:28px 1fr;column-gap:10px;align-content:start}
.card > .sh-n{position:static;grid-column:1;align-self:center}
.card > .sh-n + h3{grid-column:2;margin:0;min-height:28px;display:flex;align-items:center}
.card > .sh-n ~ p{grid-column:1 / -1;margin-top:9px}

/* the risk bands, as a table without being a <table> — it is a legend, not data */
.band-demo{display:flex;flex-direction:column;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
/* Section rhythm between stacked blocks.

   A grid or figure normally follows .head, which carries margin-bottom:36px. When one block
   follows another directly — a card grid after the risk table, a screenshot after a step grid —
   there is no .head between them and they sit flush. These pairs restore the same 36px.
   Scoped to real adjacencies rather than a blanket `* + *`, so nothing already spaced by its
   own rule gains a second gap. */
.band-demo + .grid,
.grid + .pshot,
.score-how + .pshot,
.band-demo + .pshot,
.grid + .band-demo,
.score-how + .grid{margin-top:36px}
.bd-row{display:grid;grid-template-columns:96px 130px 1fr;gap:18px;align-items:center;
  background:#fff;padding:15px 20px}
.bd-band{font-weight:750;font-size:.86rem;text-align:center;border-radius:8px;padding:5px 0;
  font-variant-numeric:tabular-nums}
.bd-crit{background:#FEE2E2;color:#991B1B}
.bd-high{background:#FFEDD5;color:#9A3412}
.bd-mod{background:#FEF3C7;color:#92400E}
.bd-good{background:#DCFCE7;color:#166534}
.bd-best{background:var(--teal-light);color:var(--teal-dark)}
.bd-row>span:nth-child(2){font-weight:650;color:var(--navy);font-size:.95rem}
.bd-note{color:var(--muted);font-size:.92rem}

/* free vs paid, side by side and said plainly */
.split2{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.sp-col{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:28px;
  box-shadow:var(--shadow)}
.sp-h{font-size:1.1rem;margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.sp-free{color:var(--teal-dark)}
.sp-paid{color:var(--navy)}
/* padding-left:0 — the browser's default ul indent is 40px, which pushed the list clear of the
   heading it sits under. The tick supplies its own 27px. */
.ticks{list-style:none;padding-left:0;margin:0;display:flex;flex-direction:column;gap:11px}
.ticks li{position:relative;padding-left:27px;color:var(--ink);font-size:.97rem;line-height:1.55}
.ticks li::before{content:"";position:absolute;left:0;top:.42em;width:15px;height:9px;
  border-left:2.2px solid var(--teal);border-bottom:2.2px solid var(--teal);
  transform:rotate(-45deg)}
.ticks-muted li::before{border-color:var(--faint)}
/* A TICK BESIDE "WHAT IS NOT COVERED" READS AS INCLUSION. The mark says yes while the words say no,
   and on a scanned page the mark is what registers — so a greyed tick (.ticks-muted) is a quieter
   wrong answer rather than a right one. It is fine where both columns are things you GET, which is
   what it was built for on the Scorecard. Where the second column is an exclusion list, this dash
   is the honest marker: it reads as struck-through without shouting about it. */
.ticks-none li::before{border:0;border-top:2.2px solid var(--faint);width:13px;height:0;
  top:.72em;transform:none}
.sp-note{margin-top:18px;padding-top:16px;border-top:1px dashed var(--line);
  font-size:.88rem;color:var(--faint)}

/* ══ CONSENT PAGE ═══════════════════════════════════════════════════════════
   Five blocks. Everything else reuses .head, .grid, .freecard, .steps, .pshot,
   .band, .fp-grid, .ticks and .final. */

/* have vs need — the two columns are deliberately unequal in weight, because
   the argument is that one side is much shorter than the other */
.gap-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:24px;align-items:start}
.gap-col{border-radius:var(--r);padding:28px;border:1px solid var(--line);background:#fff;
  box-shadow:var(--shadow)}
.gap-col h3{font-size:1.05rem;margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.gap-have{background:var(--canvas);box-shadow:none}
.gap-have h3{color:var(--muted)}
.gap-need h3{color:var(--teal-dark)}

/* the nine channels — small, dense, scannable; a wall of cards would over-weight them */
.chan-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.chan{background:#fff;border:1px solid var(--line);border-radius:11px;padding:15px 17px;
  display:flex;flex-direction:column;gap:3px}
.chan b{color:var(--navy);font-size:.97rem;font-weight:700}
.chan span{color:var(--muted);font-size:.86rem}

/* a two-up prose pair, for the places a claim needs a paragraph rather than a card */
.proof-pair{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:36px}
.proof-pair h3{font-size:1.08rem;margin-bottom:10px}
.proof-pair p{color:var(--muted);line-height:1.68}

/* the publish gate — the strongest single feature on the page, so it gets its own band */
.gate{display:flex;gap:22px;align-items:flex-start;margin-top:32px;padding:28px 30px;
  background:#fff;border:1px solid var(--line);border-left:4px solid var(--teal);
  border-radius:var(--r);box-shadow:var(--shadow)}
.gate-mark{flex:none;width:46px;height:46px;border-radius:12px;background:var(--teal-light);
  color:var(--teal-dark);display:flex;align-items:center;justify-content:center}
.gate h3{font-size:1.12rem;margin-bottom:9px}
.gate p{color:var(--muted);line-height:1.68}

/* the six later obligations, each with the section it comes from and what it costs */
.hard-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.hard{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px;
  box-shadow:var(--shadow);display:flex;flex-direction:column}
.hard-sec{font-size:.8rem;font-weight:750;letter-spacing:.05em;color:var(--teal-dark);
  background:var(--teal-light);border-radius:6px;padding:4px 9px;align-self:flex-start;
  margin-bottom:12px}
.hard h3{font-size:1.02rem;line-height:1.34;margin-bottom:9px}
.hard p{color:var(--muted);font-size:.93rem;line-height:1.6;flex:1}
.hard-pen{margin-top:14px;padding-top:12px;border-top:1px dashed var(--line);
  font-size:.83rem;font-weight:650;color:var(--faint)}

/* the honest comparison. No tick-grid: a table of ticks against named competitors
   invites an argument we do not need to have. */
.vs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.vs{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px;
  box-shadow:var(--shadow)}
.vs h3{font-size:1.06rem;margin-bottom:10px}
.vs-good{color:var(--teal-dark);font-size:.89rem;font-weight:600;margin-bottom:10px}
.vs p{color:var(--muted);font-size:.94rem;line-height:1.62}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em;
  background:var(--canvas);border:1px solid var(--line);border-radius:5px;padding:1px 5px}

@media(max-width:1024px){
  .chan-grid,.hard-grid,.vs-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:820px){
  .gap-grid,.proof-pair{grid-template-columns:1fr}
  .proof-pair{gap:28px}
  .gate{flex-direction:column;gap:16px;padding:24px}
}
@media(max-width:560px){
  .chan-grid,.hard-grid,.vs-grid{grid-template-columns:1fr}
}

/* Two portrait screenshots on the Scorecard page. A tall image at full column width would tower
   over the copy, so they are capped and centred, with the caption doing the explaining. */
.pshot-tall,.pshot-doc{max-width:620px;margin:38px auto 0}
.pshot figcaption{padding:13px 18px;border-top:1px solid var(--line);background:var(--canvas);
  font-size:.87rem;color:var(--muted);line-height:1.55;text-align:left}

@media(max-width:1024px){
  .g4{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:900px){
  .band{flex-direction:column;align-items:flex-start;padding:30px 26px}
  .score-how,.split2{grid-template-columns:1fr}
  /* the band legend stacks: the range and its name on one line, the note under */
  .bd-row{grid-template-columns:88px 1fr;gap:12px 14px;padding:14px 16px}
  .bd-note{grid-column:1/-1}
}
@media(max-width:560px){
  .g4{grid-template-columns:1fr}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .slide{transition:none}
  .btn:hover{transform:none}
  /* the industry rows hold still — motion for its own sake is not worth making
     the page harder to read for someone who has asked it to stop */
  .marquee-track{animation:none;transform:none}
  .marquee{-webkit-mask-image:none;mask-image:none}
  .marquee-row{overflow-x:auto}
}


/* ── Related reading ──────────────────────────────────────────────────────────
   The strip that closes every page. It exists for SEO as much as for the reader:
   the prototype's header and footer links are placeholders that WordPress
   replaces, so before this block no page linked to any other from its body and
   nothing connected the site together for a crawler.

   The whole card is the link, not just the heading — a bigger target on a phone,
   and one focus stop per card instead of three. */
#related{background:var(--canvas)}
.rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:26px}
.relcard{display:flex;flex-direction:column;gap:8px;padding:22px 22px 20px;
  background:#fff;border:1px solid var(--line);border-radius:14px;
  text-decoration:none;color:inherit;
  transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease}
.relcard:hover{border-color:var(--teal-dark);transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(15,31,61,.07)}
.relcard:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
.relcard h3{margin:0;font-size:17px;line-height:1.3;color:var(--navy)}
.relcard p{margin:0;font-size:14.5px;line-height:1.55;color:var(--muted);flex:1}
.rel-go{font-size:13px;font-weight:700;color:var(--teal-dark);letter-spacing:.01em}
.rel-go::after{content:' →';transition:margin-left .18s ease}
.relcard:hover .rel-go::after{margin-left:3px}

@media(max-width:900px){.rel-grid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.rel-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){
  .relcard,.rel-go::after{transition:none}
  .relcard:hover{transform:none}
}

/* Contextual link at the end of a module paragraph on the platform hub. It is a link inside prose,
   not a button — the sentence around it is what tells a crawler (and a reader) what is on the other
   end, which a nav item never does. */
.mod-link{color:var(--teal-dark);font-weight:700;text-decoration:none;white-space:nowrap}
.mod-link::after{content:' →'}
.mod-link:hover{text-decoration:underline}
.mod-link:focus-visible{outline:2px solid var(--teal);outline-offset:2px;border-radius:3px}

/* ── Upcoming-module pages ────────────────────────────────────────────────────
   Every page under /ai-suite/ describes something that does not exist yet. That
   fact has to survive skim-reading, so it is stated three times in three
   registers: a pill in the hero, a full-width bar under it, and a badge on the
   module name wherever it appears. A single "coming soon" chip in a corner is
   how a reader ends up believing they can buy it. */
.up-bar{background:#F3EEFF;border-top:1px solid #E4D9FF;border-bottom:1px solid #E4D9FF;
  padding:14px 0;color:#4C1D95}
/* nowrap, with the paragraph taking the remaining width. Wrapping let a notice this long claim the
   whole line and push the icon onto a row of its own, where it read as a stray dot rather than as
   part of the warning. */
.up-bar .wrap{display:flex;align-items:flex-start;gap:12px;flex-wrap:nowrap}
.up-bar svg{flex:none;color:var(--purple);margin-top:2px}
.up-bar p{flex:1;min-width:0;margin:0;font-size:.93rem;line-height:1.5}
.up-bar b{color:#3B0F7A}
.pill-soon{background:#F3EEFF;color:var(--purple);border-color:#E4D9FF}

/* ── "Recognise yourself" band ────────────────────────────────────────────────
   Sits between the headline and the first statutory section. Deliberately looks
   different from the card grids further down: this is the reader finding
   themselves, not a feature list, so it reads as three overheard sentences
   rather than three benefits. */
.scen-band{background:var(--canvas);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.scen-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:28px}
.scen{background:#fff;border:1px solid var(--line);border-left:3px solid var(--teal);
  border-radius:10px;padding:20px 22px;display:flex;flex-direction:column;gap:10px}
.scen-who{font-size:.8rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--teal-dark)}
.scen h3{margin:0;font-size:1.06rem;line-height:1.35}
.scen p{margin:0;font-size:1rem;line-height:1.6;color:var(--ink)}

@media(max-width:900px){.scen-grid{grid-template-columns:1fr;gap:14px}}

/* ── "Watch it work" ──────────────────────────────────────────────────────────
   A worked before/after pair, used on every AI module page.

   Measured 17 Aug: each module page mentioned the model 5–11 times and said what
   it could not do 21–32 times. Correct on the facts, and it read as apologising
   for the product rather than selling it. The cause was collapsing two different
   things — unsupported PERFORMANCE claims (40–60% savings, "under 3 seconds"),
   which had to go, and CAPABILITY claims describing what a model does that a rule
   cannot, which are honest and are the whole reason it is an AI product.

   A worked example restores the second without reintroducing the first: it shows
   the intelligence instead of asserting it, and there is no number in it to
   defend. */
.demo{display:grid;grid-template-columns:1fr auto 1fr;gap:18px;align-items:center;
  margin-top:20px}
.demo + .demo{margin-top:16px}
.demo-side{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px 20px}
.demo-in{border-left:3px solid var(--faint)}
.demo-out{border-left:3px solid var(--teal)}
.demo-lbl{display:block;font-size:.8rem;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;margin-bottom:8px;color:var(--faint)}
.demo-out .demo-lbl{color:var(--teal-dark)}
.demo-side p{margin:0;font-size:.96rem;line-height:1.55;color:var(--ink)}
.demo-side ul{margin:6px 0 0;padding-left:18px;font-size:.93rem;line-height:1.5;color:var(--ink)}
.demo-side li{margin:3px 0}
.demo-side em{color:var(--muted);font-style:normal;font-size:.87rem;display:block;margin-top:9px}
.demo-arrow{color:var(--teal-dark);flex:none}

@media(max-width:820px){
  .demo{grid-template-columns:1fr;gap:10px}
  .demo-arrow{transform:rotate(90deg);justify-self:center}
}

/* ══ CONTACT ══════════════════════════════════════════════════════════════
   The site had no form styling at all before this page, because it had no form.
   Everything here is scoped under .cform / .office so it cannot leak into the
   rest of the site the way a bare `input {}` rule would. */
.cform{max-width:860px;margin:0 auto}
.cf-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.cf-wide{grid-column:1/-1}
.cf-field{display:flex;flex-direction:column;gap:7px}
.cf-field label,.cf-legend{font-size:.9rem;font-weight:600;color:var(--navy)}
.cf-req{color:var(--teal-dark);font-weight:700}
.cf-opt{font-weight:400;color:var(--muted);font-size:.84em}
.cform input[type=text],.cform input[type=email],.cform input[type=tel],
.cform select,.cform textarea{
  width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:9px;
  background:#fff;color:var(--navy);font:inherit;font-size:.95rem;transition:border-color .15s,box-shadow .15s}
.cform textarea{resize:vertical;min-height:96px}
.cform input:focus-visible,.cform select:focus-visible,.cform textarea:focus-visible{
  outline:none;border-color:var(--teal-dark);box-shadow:0 0 0 3px var(--teal-light)}
.cform select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F1F3D' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:17px;padding-right:38px}

/* Radios as cards: one tap target per option, and the label is the target. */
.cf-radios{display:flex;flex-wrap:wrap;gap:10px}
.cf-radio{display:flex;align-items:center;gap:9px;padding:10px 14px;border:1px solid var(--line);
  border-radius:9px;background:#fff;cursor:pointer;font-size:.93rem;font-weight:500;color:var(--navy)}
.cf-radio input{accent-color:var(--teal-dark);width:16px;height:16px;margin:0}
.cf-radio:has(input:checked){border-color:var(--teal-dark);background:var(--teal-light)}
.cf-radio:focus-within{box-shadow:0 0 0 3px var(--teal-light)}

/* The notice is a panel, not fine print — it is the part a DPO will read. */
.cf-notice{margin-top:26px;padding:22px 24px;border:1px solid var(--line);border-radius:14px;
  background:#fff}
.cf-notice h3{margin:0 0 8px;font-size:1.05rem}
.cf-intro{margin:0 0 14px;font-size:.93rem;color:var(--ink)}
.cf-dl{margin:0;display:grid;grid-template-columns:190px 1fr;gap:9px 20px;font-size:.9rem}
.cf-dl dt{font-weight:700;color:var(--navy)}
.cf-dl dd{margin:0;color:var(--ink)}
.cf-consent{display:flex;gap:11px;align-items:flex-start;margin-top:18px;padding:14px 16px;
  border:1px solid var(--line);border-radius:10px;background:var(--canvas);cursor:pointer;font-size:.92rem}
.cf-consent input{accent-color:var(--teal-dark);width:17px;height:17px;margin:2px 0 0;flex:none}
.cf-consent b{color:var(--navy)}
.cf-fine{margin:12px 0 0;font-size:.85rem;color:var(--muted)}
.cf-submit{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin-top:22px}
/* ── enquiry sent ─────────────────────────────────────────────────────────
   Replaces the form outright. The tick is decorative — the heading carries the meaning, so
   this still reads correctly with images off or colours inverted. */
.cf-done{text-align:center;padding:34px 26px 30px;border:1px solid var(--line);
  border-radius:16px;background:#fff}
.cf-done[hidden]{display:none}
.cf-done-mark{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;
  margin-bottom:16px;border-radius:50%;background:rgba(16,122,94,.1);color:var(--teal-dark)}
.cf-done h3{margin:0 0 8px;font-size:1.32rem;line-height:1.3}
.cf-done h3:focus{outline:none}
.cf-done h3:focus-visible{outline:2px solid var(--teal-dark);outline-offset:4px;border-radius:4px}
.cf-done p{margin:0 auto 10px;max-width:46ch;line-height:1.6}
.cf-done-note{font-size:.92rem;color:var(--ink-soft,#4b5563)}
.cf-done-again{margin-top:16px;padding:9px 18px;border:1px solid var(--line);border-radius:9px;
  background:#fff;color:var(--navy);font:inherit;font-size:.94rem;cursor:pointer}
.cf-done-again:hover{border-color:var(--teal-dark);color:var(--teal-dark)}

/* Field-level validation. The message sits under the control it concerns; the red border is
   backed by the text, never on its own, so it survives being colour-blind or a mono display. */
.cf-err{margin:6px 0 0;font-size:.87rem;line-height:1.45;color:#b91c1c;font-weight:600}
.cform .is-invalid{border-color:#dc2626}
.cform .is-invalid:focus{outline-color:#dc2626;border-color:#dc2626}

/* Submission feedback. Sits above the sticky button bar so it is never hidden behind it. */
.cf-status{margin:18px 0 0;padding:11px 14px;border-radius:10px;border:1px solid var(--line);
  font-size:.94rem;line-height:1.5}
.cf-status.is-ok{border-color:var(--teal-dark);background:rgba(16,122,94,.07);color:var(--navy)}
.cf-status.is-err{border-color:#c2410c;background:rgba(194,65,12,.07);color:#7c2d12}

/* ── offices ── */
.office-grid{align-items:start}
.office h3{margin:0 0 10px;font-size:1.15rem}
.office address{font-style:normal;font-size:.94rem;line-height:1.65;color:var(--ink);margin:0 0 14px}
.map-hold{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;height:210px;border:1px dashed var(--line);border-radius:11px;background:var(--canvas);
  margin-bottom:12px;overflow:hidden}
.map-hold.map-on{border-style:solid;padding:0;display:block}
.map-hold iframe{width:100%;height:100%;border:0;display:block}
.map-btn{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border:1px solid var(--line);
  border-radius:99px;background:#fff;color:var(--navy);font:inherit;font-size:.9rem;font-weight:600;
  cursor:pointer}
.map-btn:hover{border-color:var(--teal-dark);color:var(--teal-dark)}
.map-note{font-size:.8rem;color:var(--muted);max-width:30ch;text-align:center}

/* ── reach row ── */
.reach{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:26px;padding:20px 24px;
  border:1px solid var(--line);border-radius:14px;background:#fff}
.reach-item{display:flex;flex-direction:column;gap:3px}
.reach-l{font-size:.8rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.reach-v{font-size:1rem;font-weight:600;color:var(--navy);text-decoration:none}
.reach-v:hover{color:var(--teal-dark);text-decoration:underline}
.reach-n{font-size:.8rem;color:var(--muted)}

/* ── footer ──────────────────────────────────────────────────────────────
   Three bands: links, offices, legal. The first version put the note, the company line, both
   addresses and the contact details in column one, which ran to ~800px against the AI Suite
   column's 300 — five columns of very different lengths and a ragged bottom edge.

   NOTE ON COLOUR: footer{background:#fff}, so nothing in here may be white. Three rules were, and
   the text was invisible while still present in the markup. The build now fails on it. */
.f-grid{grid-template-columns:1fr 1.08fr 2.35fr 1.08fr 0.95fr;gap:30px 30px;align-items:start}
.f-brand{max-width:34ch}
.f-note{max-width:34ch;margin-top:12px}
.f-co{margin:12px 0 0;font-size:.82rem;line-height:1.6;color:var(--muted)}
.f-co b{color:var(--navy);font-weight:600}

/* Ten services in one stack towered over every other column; two sub-columns bring it to five rows,
   against Compliance Suite's seven. */
/* Three stage groups inside the Services cell. Each has its own small label, so no sub-column is
   an unheaded orphan — and the grouping is the site's own Assess / Operate / Assure order rather
   than an arbitrary split. */
.f-stages{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 16px}
.f-stage{display:block;font-size:.8rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--teal-dark);margin-bottom:9px}
@media(max-width:900px){.f-stages{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.f-stages{grid-template-columns:1fr}}

/* ── band 2: offices + contact, formatted identically so they read as three peers ── */
/* Explicit three, not auto-fit: auto-fit was creating a fourth empty track at this width and
   would collapse to two at awkward sizes. Measured equal at 355px each. */
.f-reach{display:grid;grid-template-columns:repeat(3,1fr);gap:22px 34px;
  margin-top:38px;padding-top:26px;border-top:1px solid var(--line)}
.f-office{font-style:normal;font-size:.84rem;line-height:1.65;color:var(--muted)}
.f-city{display:flex;align-items:center;gap:6px;color:var(--navy);font-weight:700;font-size:.8rem;
  letter-spacing:.02em;margin-bottom:7px}
.f-city svg{color:var(--teal-dark);flex:none}
.f-talk a{color:var(--navy);font-weight:600;text-decoration:none}
.f-talk a:hover{color:var(--teal-dark);text-decoration:underline}

@media(max-width:900px){
  .f-reach{grid-template-columns:1fr}
  .f-grid{grid-template-columns:repeat(2,1fr)}
  .f-brand,.f-note{max-width:none}
}

@media (max-width:860px){
  .cf-grid{grid-template-columns:1fr}
  .cf-dl{grid-template-columns:1fr;gap:3px 0}
  .cf-dl dd{margin-bottom:9px}
  .reach{grid-template-columns:1fr}
}

/* ══ CONTACT DIALOG ═══════════════════════════════════════════════════════
   The same form as /contact/, opened in place. It is deliberately tall — the
   Rule 3 notice comes with the form, so the panel scrolls rather than the notice
   being trimmed to fit. */
.cmodal{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;
  padding:24px}
.cmodal[hidden]{display:none}
.cmodal-back{position:absolute;inset:0;background:rgba(15,31,61,.55);backdrop-filter:blur(2px);
  animation:cm-fade .18s ease-out}
.cmodal-panel{position:relative;width:min(760px,100%);max-height:calc(100vh - 48px);
  display:flex;flex-direction:column;background:var(--canvas);border-radius:18px;
  box-shadow:0 24px 70px rgba(15,31,61,.32);overflow:hidden;animation:cm-rise .2s ease-out}
@keyframes cm-fade{from{opacity:0}to{opacity:1}}
@keyframes cm-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .cmodal-back,.cmodal-panel{animation:none}
}
.cmodal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  padding:20px 24px 14px;background:#fff;border-bottom:1px solid var(--line);flex:none}
.cmodal-head h2{margin:2px 0 0;font-size:1.3rem}
.cmodal-x{flex:none;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;
  border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--navy);cursor:pointer}
.cmodal-x:hover{border-color:var(--teal-dark);color:var(--teal-dark)}
.cmodal-body{padding:22px 24px 0;overflow-y:auto;-webkit-overflow-scrolling:touch}
/* The form is centred and width-capped on its own page; inside the dialog it should fill it. */
.cmodal-body .cform{max-width:none}
html.cmodal-open{overflow:hidden}

@media (max-width:640px){
  .cmodal{padding:0;align-items:stretch}
  .cmodal-panel{width:100%;max-height:100vh;border-radius:0}
}

/* The notice is long and must stay — so the button comes to the reader instead. Sticky inside the
   dialog's scroll area only; on /contact/ the page scrolls normally and pinning would just hover
   over the content. */
.cmodal-body .cf-submit{position:sticky;bottom:0;z-index:2;margin:18px -24px 0;padding:14px 24px;
  background:var(--canvas);border-top:1px solid var(--line)}



/* ── offering picker: several at once, without filling the dialog ─────────
   Twenty-two checkboxes were tried and were too much on screen at once — the picker took more room
   than the rest of the form. The select stays one control; each choice becomes a chip backed by a
   hidden input, so several still submit as plain repeated "offering" values. */
.pick-chips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:9px}
.pick-chips:empty{display:none}
.pick-chip{display:inline-flex;align-items:center;gap:7px;padding:5px 9px 5px 12px;border-radius:99px;
  background:var(--teal-light);color:var(--teal-dark);font-size:.86rem;font-weight:600}
.pick-x{display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px;border:0;
  border-radius:50%;background:rgba(15,110,86,.16);color:inherit;font:inherit;font-size:.8rem;
  line-height:1;cursor:pointer;padding:0}
.pick-x:hover{background:rgba(15,110,86,.32)}
.pick-hint{font-size:.8rem;color:var(--muted);margin-top:5px}

/* ══ COOKIE CHOICE ════════════════════════════════════════════════════════
   A bar, not a modal. Blocking the page to demand an answer to a question Indian law does not
   even require would be the opposite of the argument the privacy page makes. */
.ckbar{position:fixed;left:0;right:0;bottom:0;z-index:110;background:#fff;
  border-top:1px solid var(--line);box-shadow:0 -6px 28px rgba(15,31,61,.10)}
.ckbar[hidden]{display:none}
.ckbar-in{max-width:var(--wrap);margin:0 auto;padding:16px 22px;display:flex;flex-wrap:wrap;
  align-items:center;justify-content:space-between;gap:14px 26px}
.ckbar-copy{max-width:62ch;display:flex;flex-direction:column;gap:3px}
.ckbar-copy p{margin:0;font-size:.9rem;color:var(--ink);line-height:1.55}
.ckbar-copy b{color:var(--navy)}
.ckbar-copy a{color:var(--teal-dark)}
/* Equal weight on purpose: same size, same row, no "manage preferences" maze behind one of them. */
.ckbar-btns{display:flex;gap:10px;flex:none}
.ckbar-btns .btn{white-space:nowrap}
@media (max-width:640px){
  .ckbar-in{padding:14px 16px}
  .ckbar-btns{width:100%}
  .ckbar-btns .btn{flex:1;text-align:center}
}

/* ── footer legibility ────────────────────────────────────────────────────
   Demo feedback on a projector: the footer was the least readable part of the site. Both causes
   were real — headings sat on a token failing WCAG AA at 2.56:1, and the type ran small. Tokens are
   fixed globally above; these lift the footer a step beyond the floor, because it carries addresses
   and legal links that people genuinely read rather than skim. */
footer{font-size:.98rem}
.f-grid h3{font-size:.84rem;color:var(--navy);font-weight:750}
.f-grid ul{font-size:.94rem;gap:11px}
.f-note{font-size:.94rem}
.f-co{font-size:.9rem}
.f-office{font-size:.9rem}
.f-city{font-size:.86rem}
.f-stage{font-size:.8rem;color:var(--teal-dark)}
.f-bottom{font-size:.9rem;color:var(--muted)}

/* ── footer column dividers ───────────────────────────────────────────────
   Five columns of links read as one undifferentiated block. Hairlines between the TOP-LEVEL
   columns do two jobs: they separate Compliance Suite from Services from Company, and — because
   Services now holds three sub-columns — they make clear that Assess / Operate / Assure sit INSIDE
   Services rather than being three more groups of their own.

   Solid rather than dotted: a 1px dotted border renders unevenly across browsers and reads as
   informal, which is the wrong note for a page whose neighbours are statutory references.

   align-items:stretch matters. Left as start, each column is only as tall as its own content and
   every divider is a different length, which looks like a mistake rather than a system. */
.f-grid{align-items:stretch;column-gap:0}
.f-grid > *{padding-inline:17px}
.f-grid > *:first-child{padding-left:0}
.f-grid > *:last-child{padding-right:0}
.f-grid > * + *{border-left:1px solid var(--line)}

@media(max-width:900px){
  /* Two columns: a divider on every second item only, or the grid reads as a table. */
  .f-grid > *{padding-inline:14px}
  .f-grid > *:nth-child(odd){padding-left:0;border-left:0}
}

/* SERVICES governs three sub-columns, so its heading is centred over them rather than sitting at
   the left edge of a wide cell looking detached from two thirds of what it labels. */
.f-wide > h3{text-align:center}

/* ── Partner Program page ───────────────────────────────────────────────────────────────────
   Arrived with the page as its own  block. Merged here rather than kept per-page so the
   token, contrast and type-size checks cover it like everything else. */
/* ================= Partner page (built on the site's tokens) ================= */
.page-partners,
.page-partners .phero{background:
  radial-gradient(1100px 460px at 88% -8%, var(--teal-light) 0%, rgba(225,245,238,0) 62%)}
.phero .wrap{padding-top:64px;padding-bottom:56px;display:flex;flex-direction:column;align-items:center;text-align:center}
.phero h1{font-size:clamp(2rem,4.6vw,3.25rem);margin:16px 0 0}
.phero .lede{margin:18px auto 0;max-width:60ch}
.page-partners .hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px;justify-content:center}
.page-partners .hero-note{margin-top:16px;font-size:.87rem;color:var(--faint);text-align:center;max-width:60ch}

.section{padding:60px 0}
.section.alt{background:var(--canvas)}
.sec-head{max-width:64ch;margin:0 auto 30px;text-align:center}
.sec-head h2{font-size:clamp(1.5rem,3vw,2rem);margin-top:8px}
.sec-head .lede{margin:10px auto 0}
.step-note,.mods-note{text-align:center}

/* ---- two tracks: auto-fit so they never overflow at any width ---- */
.tracks{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:22px}
.track{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;min-width:0;
  box-shadow:var(--shadow);transition:box-shadow .18s,transform .18s,border-color .18s;display:flex;flex-direction:column}
.track:hover{border-color:var(--teal-dark);box-shadow:var(--lift);transform:translateY(-2px)}
.track-strip{height:5px;background:var(--teal)}
.track-strip.navy{background:var(--navy)}
.track-top{padding:22px 26px 0}
.track-body{padding:18px 26px 26px;display:flex;flex-direction:column;gap:14px;flex:1;min-width:0}
.track h3{font-size:1.26rem;line-height:1.22}
.tk-who{color:var(--muted);font-size:.93rem;line-height:1.5;white-space:normal;font-weight:400}
.chip{display:inline-flex;align-items:center;gap:7px;background:var(--teal-light);color:var(--teal-dark);
  border-radius:999px;padding:6px 13px;font-size:.8rem;font-weight:700;width:fit-content;max-width:100%;white-space:normal}
.chip.navy{background:#EEF2F8;color:var(--navy)}
.tlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;flex:1}
.tlist li{display:flex;gap:10px;font-size:.94rem;color:var(--ink);line-height:1.5;min-width:0}
.tlist li span{min-width:0}
.tlist svg{flex:none;margin-top:3px;color:var(--teal-dark)}
.track .btn{width:fit-content;max-width:100%}

/* generic wrap safety inside cards */
.track *,.card *,.mod *,.step *,.acc *{overflow-wrap:break-word}

/* payoff + generic grids */
.grid4{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:18px}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:18px}
/* steps */
.page-partners .steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:20px}
.page-partners .step{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px;box-shadow:var(--shadow);min-width:0}
.page-partners .step-n{width:42px;height:42px;border-radius:50%;background:var(--teal);color:#fff;display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:1.15rem;margin-bottom:14px}
.page-partners .step h3{font-size:1.12rem;margin-bottom:7px}
.page-partners .step p{color:var(--muted);font-size:.93rem;line-height:1.55}
.step-note{margin-top:22px;font-size:.95rem;color:var(--teal-dark);font-weight:600}

/* module tiles */
.mods{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.page-partners .mod{border:1px solid var(--line);border-radius:12px;padding:18px 18px 16px;background:#fff;min-width:0}
.mod-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.acc{max-width:820px;margin:0 auto}   /* the FAQ column; its .acc-* children became <details> */
.pbadge{font-size:.8rem;font-weight:750;letter-spacing:.04em;padding:3px 9px;border-radius:999px;white-space:nowrap}
.pbadge.live{background:var(--teal-light);color:var(--teal-dark)}
.pbadge.soon{background:#F1F5F9;color:var(--muted)}
.mod h4{font-size:1rem;margin:0}
.mod p{font-size:.85rem;color:var(--muted);margin:0;line-height:1.5}
.mod-num{width:34px;height:34px;border-radius:9px;background:var(--teal-light);color:var(--teal-dark);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.9rem;flex:none}
.mods-note{margin-top:16px;font-size:.9rem;color:var(--muted);max-width:70ch;margin-left:auto;margin-right:auto}

/* accordion */

/* application form (left copy stays left; form beside it) */
.applywrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr));gap:34px;align-items:start}
.apply-copy h2{font-size:clamp(1.5rem,3vw,2rem)}
.apply-copy .lede{margin-top:12px;max-width:52ch}
.apply-points{list-style:none;padding:0;margin:22px 0 0;display:flex;flex-direction:column;gap:12px}
.apply-points li{display:flex;gap:10px;color:var(--ink);font-size:.95rem}
.apply-points svg{flex:none;margin-top:3px;color:var(--teal-dark)}
.pform{background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--lift);padding:30px;min-width:0}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field.full{grid-column:1/-1}
.field label{font-size:.84rem;font-weight:650;color:var(--navy)}
.field label .req{color:var(--red-text)}
.field input,.field select,.field textarea{font-family:inherit;font-size:.95rem;color:var(--ink);
  padding:11px 13px;border:1px solid var(--line);border-radius:10px;background:#fff;transition:border-color .16s;width:100%;max-width:100%}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(29,158,117,.12)}
.field textarea{resize:vertical;min-height:84px}
.consent{display:flex;gap:11px;align-items:flex-start;margin-top:4px}
.consent input{width:17px;height:17px;margin-top:2px;flex:none;accent-color:var(--teal)}
.consent label{font-size:.83rem;color:var(--muted);line-height:1.55}
.consent a{color:var(--teal-dark);font-weight:600}
.form-foot{margin-top:8px;font-size:.8rem;color:var(--faint)}
.form-ok{display:none;background:var(--teal-light);border:1px solid #BFE6D8;color:var(--teal-dark);
  border-radius:12px;padding:18px;font-size:.95rem;line-height:1.55}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

@media(max-width:820px){ .mods{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(max-width:560px){ .fgrid{grid-template-columns:1fr} .mods{grid-template-columns:1fr} }


/* ═══ Astro migration additions ═══════════════════════════════════════════════
   Everything below was added during the Astro migration; nothing above this
   line may be edited (it is the prototype's stylesheet, carried verbatim). */

/* The privacy page's comparison table sat in .tablewrap, which had no rule —
   the one container on the site that let a 660px table push the page sideways
   on a phone. Same treatment as .tbl-wrap: the table scrolls inside its box. */
.tablewrap{overflow-x:auto}

/* ── Mobile navigation ──
   Below 980px the prototype simply hid .navlinks and shipped no menu at all —
   acceptable for a desktop review prototype, not for a mostly-mobile audience.
   A hamburger opens a full-height panel under the sticky header, with the same
   groups as the desktop menus and the two CTAs the header hides at this width. */
.nav-toggle{display:none;background:none;border:0;padding:8px;margin:-8px -4px -8px 0;
  cursor:pointer;color:var(--navy);align-items:center;justify-content:center}
.nav-toggle svg{display:block}
.nav-toggle .ic-close{display:none}
.nav-toggle[aria-expanded="true"] .ic-open{display:none}
.nav-toggle[aria-expanded="true"] .ic-close{display:block}
/* NOT position:fixed — the header's backdrop-filter makes it the containing block for fixed
   descendants, which collapses the panel to nothing. Absolute against the sticky header (which
   is pinned to the top whenever the menu is open, since the body scroll is locked) behaves
   identically and doesn't fight the filter. */
.mnav{display:none;position:absolute;top:100%;left:0;right:0;height:calc(100dvh - 70px);z-index:49;
  background:#fff;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:10px 22px calc(34px + env(safe-area-inset-bottom))}
.mnav.open{display:block}
body.mnav-lock{overflow:hidden}
/* The cookie bar is z-index:110 and the header's stacking context is 50, so an open menu would
   sit under it. Lifting the header (menu included) above the bar only while the menu is open;
   the contact dialog (120) stays on top of everything. */
body.mnav-lock .site-head{z-index:115}
.mnav-group{border-bottom:1px solid var(--line);padding:14px 0}
.mnav-group > a{display:block;font-weight:700;color:var(--navy);font-size:1.02rem;padding:6px 0}
.mnav-h{display:block;font-size:.72rem;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:var(--faint);margin:10px 0 2px}
.mnav-group ul{list-style:none;margin:0;padding:0}
.mnav-group li a{display:block;padding:8px 0;color:var(--muted);font-weight:550;font-size:.97rem}
.mnav-group li a:active{color:var(--navy)}
.mnav-cta{display:flex;flex-direction:column;gap:10px;padding:20px 0 8px}
.mnav-cta .btn{justify-content:center;text-align:center}
.mnav-signin{text-align:center;font-weight:650;color:var(--muted);padding:6px 0}
@media(max-width:980px){.nav-toggle{display:inline-flex}}
@media(min-width:981px){.mnav{display:none !important}}

/* Mobile header row: brand + score CTA + hamburger must fit 375px. The prototype's desktop
   paddings put the row at exactly viewport width and the flexbox crushed the toggle, so the
   CTA compacts and the toggle gets a fixed hit area. */
@media(max-width:980px){
  .nav{gap:12px}
  .navcta{gap:8px}
  .navcta .btn-primary{padding:9px 13px;font-size:.88rem;white-space:nowrap}
  .nav-toggle{flex:none;width:40px;height:40px}
  .brand{flex:none}
}

/* ── Sticky mobile CTA ── shown by MobileCta.astro after 600px of scroll, phones only. */
.mcta{display:none;position:fixed;left:0;right:0;bottom:0;z-index:90;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.94);backdrop-filter:saturate(180%) blur(10px);
  border-top:1px solid var(--line)}
.mcta .btn{display:block;text-align:center;width:100%}
@media(max-width:700px){.mcta:not([hidden]){display:block}}

/* ═══ Blog (migrated from WordPress) ══════════════════════════════════════════
   Article bodies arrive as WordPress-rendered HTML (wp-block-* classes, the TOC plugin's
   #toc_container). These rules give that markup the site's typography without touching it. */
.post-hero{padding:56px 0 28px}
.post-hero .crumbs{font-size:.85rem;color:var(--muted);margin-bottom:18px}
.post-hero .crumbs a:hover{color:var(--navy)}
.post-hero h1{max-width:24ch;font-size:clamp(1.9rem,3.6vw,2.7rem)}
.post-meta{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;margin-top:18px;font-size:.92rem;color:var(--muted)}
.post-meta a{color:var(--teal-dark);font-weight:600}
.post-meta .cat{background:var(--teal-light);color:var(--teal-dark);padding:3px 10px;border-radius:999px;font-weight:700;font-size:.8rem}
.post-figure{margin:28px 0 0}
.post-figure img{width:100%;height:auto;border-radius:var(--r);border:1px solid var(--line)}
.post-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:56px;padding:32px 24px 64px} /* keeps .wrap gutters */
@media(max-width:980px){.post-layout{grid-template-columns:1fr;gap:32px}}
.post-body{max-width:72ch;font-size:1.06rem;line-height:1.72;color:var(--ink)}
.post-body>*+*{margin-top:1.15em}
.post-body h2{font-size:1.65rem;margin-top:2em;line-height:1.22}
.post-body h3{font-size:1.28rem;margin-top:1.6em}
.post-body h4{font-size:1.1rem;margin-top:1.4em}
.post-body p{margin:0}
.post-body a{color:var(--teal-dark);text-decoration:underline;text-underline-offset:2px}
.post-body a:hover{color:var(--navy)}
.post-body ul,.post-body ol{padding-left:1.4em}
.post-body li+li{margin-top:.4em}
.post-body img{max-width:100%;height:auto;border-radius:var(--r)}
.post-body figure{margin:1.6em 0}
.post-body figcaption{font-size:.88rem;color:var(--muted);margin-top:8px}
.post-body blockquote{border-left:3px solid var(--teal);padding:4px 0 4px 20px;color:var(--muted);font-style:italic}
.post-body table{border-collapse:collapse;width:100%;min-width:0;font-size:.95rem;display:block;overflow-x:auto}
.post-body th,.post-body td{border:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top}
.post-body th{background:var(--canvas);color:var(--navy);font-weight:700}
.post-body strong{color:var(--navy)}
.post-body hr{border:0;border-top:1px solid var(--line);margin:2em 0}
.post-body pre{background:var(--navy);color:#fff;padding:18px;border-radius:var(--r);overflow-x:auto;font-size:.9rem}
.post-body .wp-block-buttons a,.post-body .wp-block-button__link{display:inline-block;background:var(--teal);color:#fff;text-decoration:none;padding:11px 20px;border-radius:11px;font-weight:650}
.post-body .wp-block-image{margin:1.6em 0}
/* TOC container as the plugin renders it */
.post-body #toc_container{background:var(--canvas);border:1px solid var(--line);border-radius:var(--r);padding:18px 22px;font-size:.95rem;margin:1.5em 0 2em}
.post-body #toc_container .toc_title{font-weight:750;color:var(--navy);margin:0 0 8px;font-size:.85rem;letter-spacing:.1em;text-transform:uppercase}
.post-body #toc_container ul{list-style:none;padding-left:0;margin:0}
.post-body #toc_container ul ul{padding-left:1.2em;margin-top:.3em}
.post-body #toc_container li{margin:.3em 0}
.post-body #toc_container a{text-decoration:none;color:var(--ink)}
.post-body #toc_container a:hover{color:var(--teal-dark)}
.post-body #toc_container .toc_number{color:var(--teal-dark);font-weight:700;margin-right:6px}
.post-body .clearfix,.post-body .post-tags,.post-body .post-navigation{display:none}
/* sidebar */
.post-side{position:sticky;top:90px;align-self:start;display:flex;flex-direction:column;gap:18px}
.side-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px}
.side-card h3{font-size:.85rem;letter-spacing:.1em;text-transform:uppercase;color:var(--teal-dark);margin-bottom:12px}
.side-card ul{list-style:none;padding:0;margin:0}
.side-card li+li{margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.side-card li a{font-weight:600;color:var(--navy);font-size:.94rem;line-height:1.35;display:block}
.side-card li a:hover{color:var(--teal-dark)}
.side-card.cta{background:var(--navy);color:#fff;border:0}
.side-card.cta h3{color:#8FE0C8}
.side-card.cta p{color:rgba(255,255,255,.75);font-size:.94rem;margin-bottom:14px}
.post-tags-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:36px}
.post-tags-row a{font-size:.82rem;font-weight:600;color:var(--muted);background:var(--canvas);border:1px solid var(--line);padding:5px 11px;border-radius:999px}
.post-tags-row a:hover{color:var(--navy);border-color:var(--navy)}
.author-box{display:flex;gap:18px;align-items:flex-start;margin-top:40px;padding:22px;border:1px solid var(--line);border-radius:var(--r);background:var(--canvas)}
.author-box .av{width:56px;height:56px;border-radius:50%;background:var(--teal);color:#fff;display:grid;place-items:center;font-weight:800;font-size:1.2rem;flex:none}
.author-box h3{font-size:1rem;margin-bottom:6px}
.author-box p{font-size:.94rem;color:var(--muted)}
.post-nav{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:36px}
@media(max-width:640px){.post-nav{grid-template-columns:1fr}}
.post-nav a{display:block;padding:16px 18px;border:1px solid var(--line);border-radius:var(--r);font-size:.94rem;color:var(--navy);font-weight:600}
.post-nav a span{display:block;font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:4px;font-weight:700}
.post-nav a:hover{border-color:var(--teal)}
.post-nav .next{text-align:right}
/* archives */
.archive-hero{padding:56px 0 8px}
.archive-hero h1{font-size:clamp(1.9rem,3.6vw,2.7rem)}
.archive-hero .lede{margin-top:12px;max-width:62ch}
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;padding:36px 0 24px}
@media(max-width:980px){.post-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.post-grid{grid-template-columns:1fr}}
.pcard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:transform .16s,box-shadow .16s}
.pcard:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(15,31,61,.08)}
.pcard .thumb{aspect-ratio:16/9;background:var(--canvas);overflow:hidden}
.pcard .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.pcard .body{padding:20px 22px 22px;display:flex;flex-direction:column;gap:10px;flex:1}
.pcard .cat{font-size:.74rem;font-weight:750;letter-spacing:.1em;text-transform:uppercase;color:var(--teal-dark)}
.pcard h2{font-size:1.12rem;line-height:1.3;font-weight:700}
.pcard h2 a:hover{color:var(--teal-dark)}
.pcard p{font-size:.92rem;color:var(--muted);flex:1}
.pcard .when{font-size:.82rem;color:var(--faint)}
.pager{display:flex;justify-content:center;align-items:center;gap:8px;padding:8px 0 64px;flex-wrap:wrap}
.pager a,.pager span{min-width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;padding:0 12px;border:1px solid var(--line);border-radius:10px;font-weight:600;font-size:.92rem;color:var(--navy)}
.pager a:hover{border-color:var(--teal);color:var(--teal-dark)}
.pager .is-on{background:var(--navy);color:#fff;border-color:var(--navy)}
.pager .dots{border:0}
.post-body .follow-links{font-size:.92rem;color:var(--muted)}
.post-body .follow-links a{text-decoration:none;font-weight:600}
/* Article bodies contain pasted URLs and long tokens; nothing may push the page sideways on a phone. */
.post-layout>div{min-width:0}
.post-body{overflow-wrap:anywhere;word-break:break-word}
.post-body p,.post-body li,.post-body td{min-width:0}

/* Insights grid now shows real featured images inside the prototype's thumb blocks. */
.post .thumb{overflow:hidden}.post .thumb img{width:100%;height:100%;object-fit:cover;display:block}

/* Accessibility: 24px minimum hit area on the testimonial-slider dots without changing their look. */
.dots .dot{position:relative}.dots .dot::after{content:"";position:absolute;inset:-8px}
/* Slider dots: a 25px hit box (WCAG target size) while the visible dot stays 9px — the button's
   padding is transparent because the background is clipped to the content box. */
.dots{gap:0}.dots .dot{box-sizing:content-box;padding:8px;background-clip:content-box}.dots .dot::after{content:none}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}


/* ---- Partner Programme page (Sept 2026 rewrite): hero split, three partner types, tier grid, routing steps, application form ---- */
.pp-hero{display:grid;grid-template-columns:1.12fr .88fr;gap:52px;align-items:center}
.pp-who{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--lift);padding:30px 32px}
.pp-who .pp-wh{font-size:.8rem;font-weight:750;letter-spacing:.13em;text-transform:uppercase;color:var(--teal-dark)}
.pp-who ul{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-direction:column;gap:18px}
.pp-who li{padding-left:22px;position:relative}
.pp-who li::before{content:"";position:absolute;left:0;top:13px;width:10px;height:10px;border-radius:50%;background:var(--teal)}
.pp-who b{display:block;font-size:1.34rem;font-weight:780;color:var(--navy);letter-spacing:-.018em;line-height:1.26}
.pp-who span{display:block;margin-top:4px;font-size:.93rem;color:var(--muted)}
.pp-cta{display:flex;flex-wrap:wrap;gap:12px;margin:30px 0 0}
.pp-track{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden;transition:box-shadow .18s,transform .18s}
.pp-track:hover{box-shadow:var(--lift);transform:translateY(-2px)}
.pp-track-top{padding:24px 26px 20px;border-bottom:1px solid var(--line);background:var(--teal-light)}
.pp-kind{font-size:.74rem;font-weight:750;letter-spacing:.12em;text-transform:uppercase;color:var(--teal-dark)}
.pp-track-top h3{margin:9px 0 0;font-size:1.26rem}
.pp-wholine{margin:8px 0 0;font-size:.9rem;color:var(--muted)}
.pp-track-body{padding:22px 26px 26px;display:flex;flex-direction:column;gap:15px;flex:1}
.pp-prob{font-size:.97rem;color:var(--muted);margin:0}
ul.pp-ticks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
ul.pp-ticks li{position:relative;padding-left:24px;font-size:.95rem;color:var(--ink)}
ul.pp-ticks li::before{content:"";position:absolute;left:0;top:8px;width:9px;height:9px;border-radius:50%;background:var(--teal)}
.pp-track-cta{margin-top:auto;padding-top:4px}
.pp-tier{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px;
  box-shadow:var(--shadow);display:flex;flex-direction:column;gap:14px}
.pp-tname{display:flex;align-items:center;gap:10px}
.pp-tname h3{margin:0;font-size:1.1rem}
.pp-pip{width:26px;height:26px;border-radius:50%;background:var(--navy);color:#fff;font-size:.78rem;
  font-weight:750;display:grid;place-items:center;flex:none}
.pp-need{font-size:.86rem;color:var(--teal-dark);font-weight:650;background:var(--teal-light);
  padding:10px 12px;border-radius:9px;line-height:1.5}
.pp-tier ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.pp-tier li{font-size:.92rem;color:var(--muted);padding-left:16px;position:relative}
.pp-tier li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:50%;background:var(--line)}
.pp-step{display:flex;gap:15px;align-items:flex-start}
.pp-num{width:30px;height:30px;border-radius:9px;background:var(--teal-light);color:var(--teal-dark);
  font-weight:750;font-size:.9rem;display:grid;place-items:center;flex:none}
.pp-step h3{margin:0 0 5px;font-size:1rem;color:var(--navy)}
.pp-step p{margin:0;font-size:.95rem;color:var(--muted)}
.pp-note{margin-top:30px;background:var(--teal-light);border-radius:var(--r);padding:20px 24px;
  font-size:1rem;color:var(--navy);font-weight:600}
.pp-rule{margin-top:24px;font-size:.95rem;color:var(--muted)}
.pp-apply{display:grid;grid-template-columns:1fr 1.06fr;gap:44px;align-items:start}
.pp-bar{display:flex;flex-direction:column;gap:11px;margin-top:24px}
.pp-bar div{font-size:.96rem;color:var(--muted)}
.pp-bar b{color:var(--navy);font-weight:700}
.pp-frow{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.pp-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.pp-field label{font-size:.74rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.pp-field input,.pp-field select,.pp-field textarea{width:100%;padding:11px 13px;border:1px solid var(--line);
  border-radius:9px;background:#fff;color:var(--navy);font:inherit;font-size:.95rem;
  transition:border-color .15s,box-shadow .15s}
.pp-field input:focus,.pp-field select:focus,.pp-field textarea:focus{outline:none;border-color:var(--teal);
  box-shadow:0 0 0 3px rgba(29,158,117,.13)}
.pp-field textarea{min-height:92px;resize:vertical}
.pp-hp{position:absolute;left:-9999px}
@media(max-width:980px){
  .pp-hero,.pp-apply{grid-template-columns:1fr;gap:32px}
  .pp-frow{grid-template-columns:1fr}
}

/* Partner Programme: spacing that was inline in the delivered page. Inline styles do not survive
   the block conversion, so the rhythm lives here for both sites. */
.page-partners .sec-head + .grid{margin-top:34px}
.page-partners .grid + .grid{margin-top:20px}
.page-partners .pp-note a{color:inherit}
/* "Coming soon" placeholders for the partner directory and partner login */
.btn-soon{cursor:default;opacity:.75;pointer-events:none}
.btn-soon em,.soon-tag{font-style:normal;font-size:.72rem;font-weight:750;letter-spacing:.04em;text-transform:uppercase;
  background:var(--teal-light);color:var(--teal-dark);padding:3px 8px;border-radius:999px;white-space:nowrap}
.btn-soon em{margin-left:6px}

/* Logged-in admin bar sits above the sticky header */
.admin-bar .site-head{top:32px}
@media(max-width:782px){.admin-bar .site-head{top:46px}}

/* Split hero: the older centred partner hero rules must not centre the two-column layout */
.page-partners .phero .wrap{align-items:stretch;text-align:left}
.page-partners .pp-hero{width:100%}
.page-partners .pp-hero .lede{margin-left:0;max-width:none}
.page-partners .pp-apply h2{margin-top:10px}
.page-partners .pp-apply .lede{margin-top:14px}

/* Partner application: status line + confirmation panel (same look as the enquiry form's) */
.pform .cf-status{margin:0 0 12px;font-size:.92rem;font-weight:600;padding:10px 14px;border-radius:10px}
.pform .cf-status.is-ok{background:var(--teal-light);color:var(--teal-dark)}
.pform .cf-status.is-err{background:#FDECEC;color:var(--red-text,#B42318)}
.pform .cf-err{margin:4px 0 0;font-size:.82rem;color:var(--red-text,#B42318)}
.pform .is-invalid{border-color:var(--red-text,#B42318)!important}
.pp-done{background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--lift);padding:34px 30px}
.pp-done h3{margin:0 0 10px;font-size:1.3rem}
.pp-done p{margin:0;color:var(--muted);line-height:1.6}
.pp-done a{color:var(--teal-dark);font-weight:650}