
:root{
  --c-bg-deep:#030F1F; --c-bg-navy:#0C1F35; --c-navy:#26445C; --c-blue:#35647E; --c-cyan:#50AECA;
  --sup:#50AECA; --sup-soft:rgba(80,174,202,.14); --sup-line:rgba(80,174,202,.45);
  --dem:#26445C; --dem-soft:rgba(38,68,92,.10); --dem-line:rgba(38,68,92,.34);
  --con:#35647E; --con-soft:rgba(53,100,126,.10); --con-line:rgba(53,100,126,.32);
  --amber:#F5A622; --amber-soft:rgba(245,166,34,.13); --amber-line:rgba(245,166,34,.42);
  --sup-ink:#2A7791;   /* cyan darkened for small text on white, passes AA */
  --c-bg:#F4F6F8; --c-surface:#fff; --c-surface-2:#FAFBFC; --c-border:#E4E8ED; --c-border-2:#EDF0F3;
  --c-text:#1A2332; --c-text-2:#4A5567; --c-text-3:#646F80;
  --c-text-inv:#fff; --c-text-inv-2:#B8C5D6; --c-text-inv-3:#6E7E94;
  --ok:#15A36B; --ok-bg:#E6F6EE;
  --r-sm:6px; --r-md:10px; --r-lg:14px;
  --sh-sm:0 1px 2px rgba(12,31,53,.04),0 1px 3px rgba(12,31,53,.06);
  --sh-md:0 4px 12px rgba(12,31,53,.06),0 1px 3px rgba(12,31,53,.04);
  --maxw:1080px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Inter","Helvetica Neue",Arial,sans-serif;
  font-size:15px;line-height:1.6;color:var(--c-text);background:var(--c-bg);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
p,h1,h2,h3,h4,ul,ol{margin:0}
a{color:var(--c-blue);text-decoration:none}
a:hover{text-decoration:underline}
button{font-family:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--c-cyan);outline-offset:2px;border-radius:3px}
svg.ic{width:26px;height:26px;stroke:var(--sup);fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;display:block}
svg.ic.sm{width:19px;height:19px}
svg.ic.lg{width:34px;height:34px}
svg.ic.dem{stroke:var(--dem)} svg.ic.con{stroke:var(--con)}


/* header */
.hd{background:rgba(255,255,255,.97);border-bottom:1px solid var(--c-border);position:sticky;top:0;z-index:70;backdrop-filter:blur(8px)}
.hd-in{max-width:var(--maxw);margin:0 auto;padding:0 24px;height:64px;display:flex;align-items:center;justify-content:space-between;gap:14px}
.hd img{height:26px;display:block}
.nav{display:flex;align-items:center;gap:20px}
.nav a{color:var(--c-text-2);font-size:13.5px;font-weight:500;cursor:pointer;padding:4px 0;border-bottom:2px solid transparent}
.nav a:hover{color:var(--c-text);text-decoration:none}
.nav a.on{color:var(--c-text);border-bottom-color:var(--sup)}
.burger{display:none;background:none;border:1px solid var(--c-border);border-radius:var(--r-sm);padding:7px 10px}
.burger svg{width:18px;height:14px;stroke:var(--c-text);stroke-width:1.8;fill:none}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.btn{height:42px;padding:0 20px;border-radius:var(--r-sm);border:1px solid transparent;background:var(--c-blue);color:#fff;
  font-weight:500;font-size:14px;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:background 120ms;cursor:pointer}
.btn:hover{text-decoration:none}
.btn.sup{background:var(--sup);color:var(--c-bg-deep);font-weight:600}
.btn.sup:hover{background:#6FBCD3;color:var(--c-bg-deep)}
.btn.dem{background:var(--dem);color:#fff;font-weight:600}
.btn.dem:hover{background:#33566F;color:#fff}
.btn.con{background:transparent;color:var(--con);border-color:var(--con-line)}
.btn.con:hover{background:var(--con-soft);color:var(--con)}
.btn.ghost{background:transparent;color:var(--c-text);border-color:var(--c-border)}
.btn.ghost:hover{background:var(--c-bg);color:var(--c-text)}
.btn.ghost-inv{background:transparent;color:#fff;border-color:rgba(255,255,255,.28)}
.btn.ghost-inv:hover{background:rgba(255,255,255,.08);color:#fff}
.btn.sm{height:34px;font-size:13px;padding:0 14px}
.eyebrow{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.09em;color:var(--sup-ink)}
.hero .eyebrow{color:var(--c-cyan)}
.eyebrow.d{color:var(--dem)} .eyebrow.c{color:var(--con)}

/* hero */
.hero{background:
  radial-gradient(ellipse at 20% 22%,rgba(80,174,202,.26),transparent 58%),
  radial-gradient(ellipse at 84% 80%,rgba(245,166,34,.07),transparent 58%),
  linear-gradient(135deg,var(--c-bg-navy),var(--c-bg-deep));color:#fff;padding:78px 0 70px}
.hero.d{background:
  radial-gradient(ellipse at 78% 24%,rgba(38,68,92,.55),transparent 60%),
  linear-gradient(135deg,#132C46,var(--c-bg-deep));}
.hero.c{background:linear-gradient(135deg,#14293D,var(--c-bg-deep))}
.hero h1{font-size:45px;font-weight:300;line-height:1.14;letter-spacing:-.025em;margin-top:18px;max-width:20ch}
.hero h1 strong{font-weight:600;color:var(--c-cyan)}
.hero .sub{margin-top:22px;font-size:18px;color:var(--c-text-inv-2);max-width:62ch;line-height:1.55}
.hero .acts{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:34px}
.split .s{border-radius:var(--r-md);padding:20px 22px;border:1px solid rgba(255,255,255,.12)}
.split .s.sup{background:rgba(80,174,202,.14);border-color:var(--sup-line)}
.split .s.dem{background:rgba(255,255,255,.05)}
.split .k{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase}
.split .s.sup .k{color:var(--sup)} .split .s.dem .k{color:var(--c-text-inv-2)}
.split h3{font-size:16.5px;font-weight:600;margin-top:7px;color:#fff}
.split p{font-size:14px;color:var(--c-text-inv-2);margin-top:7px}
.split .btn{margin-top:16px}
.facts{display:flex;flex-wrap:wrap;gap:10px;margin-top:34px;padding-top:24px;border-top:1px solid rgba(255,255,255,.1)}
.fact{display:inline-flex;align-items:center;gap:9px;font-size:13px;color:var(--c-text-inv-2);
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);border-radius:999px;padding:7px 15px 7px 12px}
.fact::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--c-cyan);flex:none}

/* sections */
.sec{padding:70px 0}
.sec+.sec{border-top:1px solid var(--c-border)}
.sec.alt{background:var(--c-surface-2)}
.sec h2{font-size:30px;font-weight:600;letter-spacing:-.02em;line-height:1.2;margin-top:12px;max-width:26ch}
.lede{color:var(--c-text-2);margin-top:14px;max-width:72ch}
.spread{margin-top:26px;column-count:2;column-gap:42px;color:var(--c-text-2)}
.spread p+p{margin-top:14px}
.pull{margin-top:28px;font-size:17.5px;line-height:1.55;color:var(--c-text);max-width:88ch;
  border-top:1px solid var(--c-border);border-bottom:1px solid var(--c-border);padding:22px 0}
.card{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-lg);padding:24px;box-shadow:var(--sh-sm)}
.card h3{font-size:16px;font-weight:600;margin-top:14px}
.card h3.first{margin-top:0}
.card p{color:var(--c-text-2);font-size:14.5px;margin-top:8px}
.card .src{font-size:12px;color:var(--c-text-3);margin-top:12px;padding-top:10px;border-top:1px solid var(--c-border-2)}
.means{margin-top:14px;padding-top:12px;border-top:1px solid var(--c-border-2);display:grid;gap:10px}
.means div{font-size:13px;color:var(--c-text-2);padding-left:12px;border-left:2px solid var(--c-border)}
.means div.sup{border-left-color:var(--sup)} .means div.dem{border-left-color:var(--dem)}
.means b{display:block;font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;margin-bottom:2px}
.means div.sup b{color:var(--sup-ink)} .means div.dem b{color:var(--dem)}
.g2{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:32px}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:32px}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:32px}
.g4 .card{padding:20px}
.g4 .card h3{font-size:15px}
.g4 .card p{font-size:13.5px}
.list{list-style:none;padding:0;margin-top:16px;display:grid;gap:10px}
.list li{position:relative;padding-left:22px;font-size:14.5px;color:var(--c-text-2)}
.list li::before{content:"";position:absolute;left:0;top:9px;width:11px;height:2px;border-radius:2px;background:var(--sup)}
.list.dem li::before{background:var(--dem)} .list.con li::before{background:var(--con)}

/* journey */
.journey{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:32px}
.phase{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-md);padding:16px 18px 6px}
.phase .ph{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--sup-ink)}
.journey.dem .phase .ph{color:var(--dem)}
.phase h3{font-size:15px;font-weight:600;margin-top:5px}
.phase .sfs{margin-top:12px}
.surf{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid var(--c-border-2);font-size:13.5px;color:var(--c-text-2)}
.surf svg{flex:none}
.band{margin-top:12px;background:var(--sup-soft);border:1px solid var(--sup-line);border-radius:var(--r-md);
  padding:16px 20px;display:grid;grid-template-columns:26px 1fr;gap:14px;align-items:center;font-size:14px;color:var(--c-text-2)}
.band strong{color:var(--c-text)}

/* problem + paths */
.prob{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:32px}
.prob .p{border-radius:var(--r-lg);padding:26px;border:1px solid var(--c-border);background:var(--c-surface)}
.prob .p.sup{border-top:3px solid var(--sup)} .prob .p.dem{border-top:3px solid var(--dem)}
.prob .k{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase}
.prob .p.sup .k{color:var(--sup-ink)} .prob .p.dem .k{color:var(--dem)}
.prob h3{font-size:18px;font-weight:600;margin-top:7px}
.paths{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:32px}
.path{border-radius:var(--r-lg);padding:28px;box-shadow:var(--sh-sm);border:1px solid var(--c-border)}
.path.sup{background:var(--sup-soft);border-color:var(--sup-line)}
.path.dem{background:var(--dem-soft);border-color:var(--dem-line)}
.path .k{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase}
.path.sup .k{color:var(--sup-ink)} .path.dem .k{color:var(--dem)}
.path h3{font-size:21px;font-weight:600;margin-top:8px;letter-spacing:-.01em}
.path p{color:var(--c-text-2);font-size:14.5px;margin-top:10px}
.path .btn{margin-top:22px}
.aside{font-size:12.5px;color:var(--c-text-3);margin-top:12px}

/* consulting strip */
.consult{background:var(--c-surface);border:1px solid var(--con-line);border-left:3px solid var(--con);
  border-radius:var(--r-md);padding:24px 26px;display:grid;grid-template-columns:34px 1fr auto;gap:20px;align-items:center}
.consult .k{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--con)}
.consult h3{font-size:16px;font-weight:600;margin-top:4px}
.consult p{font-size:14px;color:var(--c-text-2);margin-top:6px;max-width:70ch}

/* commitments */
.commit{background:var(--c-bg-navy);color:#fff;border-radius:var(--r-lg);padding:34px 36px;margin-top:32px}
.commit ul{list-style:none;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:18px 32px}
.commit li{padding-left:26px;position:relative;color:var(--c-text-inv-2);font-size:14.5px}
.commit li strong{color:#fff;font-weight:600;display:block;margin-bottom:3px}
.commit li::before{content:"";position:absolute;left:0;top:8px;width:12px;height:2px;background:var(--c-cyan);border-radius:2px}

/* timeline */
.time{margin-top:34px;display:grid;grid-template-columns:repeat(5,1fr);gap:0 20px}
.time .t{padding-right:8px}
.time .t .mark{display:flex;align-items:center;height:14px}
.time .t .dot{width:11px;height:11px;border-radius:50%;background:var(--sup);flex:none}
.time .t .line{height:1px;background:var(--c-border);flex:1;margin-left:4px}
.time .t:last-child .line{background:transparent}
.time .t.now .dot{background:var(--amber);box-shadow:0 0 0 4px var(--amber-soft)}
.time .t .yr{font-size:14px;font-weight:700;color:var(--c-blue);margin-top:14px}
.time .t.now .yr{color:#B87A08}
.time .t h4{font-size:14.5px;font-weight:600;margin-top:6px}
.time .t p{font-size:13px;color:var(--c-text-2);margin-top:6px}

/* steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:32px}
.step{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-md);padding:20px}
.step .n{width:26px;height:26px;border-radius:50%;background:var(--sup);color:var(--c-bg-deep);font-size:12.5px;font-weight:700;
  display:flex;align-items:center;justify-content:center}
.step h4{font-size:15px;font-weight:600;margin-top:12px}
.step p{font-size:13.5px;color:var(--c-text-2);margin-top:6px}

/* platform screens */
.scr{border:1px solid var(--c-border);border-radius:var(--r-md);overflow:hidden;background:var(--c-surface);box-shadow:var(--sh-md)}
.scr-bar{height:34px;background:var(--c-bg-navy);display:flex;align-items:center;padding:0 14px;gap:10px}
.scr-bar b{color:#fff;font-size:12px;font-weight:600}
.scr-bar em{font-style:normal;margin-left:auto;font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--amber)}
.scr table{width:100%;border-collapse:collapse;font-size:12.5px}
.scr th{text-align:left;font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--c-text-3);font-weight:600;
  padding:10px 14px;background:var(--c-surface-2);border-bottom:1px solid var(--c-border)}
.scr td{padding:11px 14px;border-bottom:1px solid var(--c-border-2);color:var(--c-text-2)}
.scr td:first-child{color:var(--c-text);font-weight:500}
.scr tr:last-child td{border-bottom:0}
.tog{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;color:var(--c-text-2)}
.tog i{width:28px;height:16px;border-radius:999px;background:var(--c-border);position:relative;display:inline-block}
.tog i::after{content:"";position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:var(--sh-sm)}
.tog.on i{background:var(--sup)} .tog.on i::after{left:14px}
.tag{display:inline-block;font-size:10.5px;font-weight:600;padding:2px 8px;border-radius:999px;background:var(--c-surface-2);border:1px solid var(--c-border);color:var(--c-text-2)}
.tag.ok{background:var(--ok-bg);border-color:transparent;color:var(--ok)}
.tag.hold{background:var(--amber-soft);border-color:transparent;color:#8a5709}
.cap{font-size:12px;color:var(--c-text-3);margin-top:10px}

/* faq */
.faq{margin-top:28px;border-top:1px solid var(--c-border)}
.faq details{border-bottom:1px solid var(--c-border)}
.faq summary{padding:16px 0;font-weight:600;font-size:15px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--sup-ink);font-weight:400;font-size:20px;line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq p{padding:0 0 18px;color:var(--c-text-2);font-size:14.5px;max-width:78ch}

/* forms */
.form{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-lg);padding:26px;box-shadow:var(--sh-sm)}
.fr{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fld{display:block;margin-top:16px}
.fld:first-child{margin-top:0}
.fr{margin-top:16px}
.fr:first-child{margin-top:0}
.fr .fld{margin-top:0}
.fr .fld span{min-height:15px}
.fld span{display:block;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--c-text-3);margin-bottom:6px}
.fld input,.fld select,.fld textarea{width:100%;border:1px solid var(--c-border);border-radius:var(--r-sm);padding:10px 12px;
  font-family:inherit;font-size:14px;color:var(--c-text);background:var(--c-surface-2)}
.fld textarea{min-height:96px;resize:vertical}
.tick{display:flex;gap:10px;align-items:flex-start;margin-top:14px;font-size:13.5px;color:var(--c-text-2)}
.tick input{margin-top:3px}
.terms{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-lg);padding:24px}
.terms h3{font-size:15px;font-weight:600}
.terms .row{display:grid;grid-template-columns:150px 1fr;gap:14px;padding:11px 0;border-top:1px solid var(--c-border-2);font-size:14px;color:var(--c-text-2)}
.terms .row b{color:var(--c-text);font-weight:600}
.confirm{background:var(--ok-bg);border:1px solid rgba(21,163,107,.3);border-radius:var(--r-lg);padding:24px;margin-top:18px}
.confirm h3{font-size:16px;font-weight:600;color:#0E7A50}
.confirm p{font-size:14px;color:#2A6A52;margin-top:8px}
.confirm code{background:#fff;border:1px solid rgba(21,163,107,.25);border-radius:var(--r-sm);padding:3px 8px;font-size:13px}

/* cta + footer */
.cta{background:linear-gradient(135deg,var(--c-bg-navy),var(--c-bg-deep));color:#fff;padding:58px 0;text-align:center}
.cta h2{font-size:28px;font-weight:300;letter-spacing:-.02em;max-width:24ch;margin:0 auto}
.cta h2 strong{font-weight:600;color:var(--c-cyan)}
.cta p{color:var(--c-text-inv-2);margin-top:14px;max-width:56ch;margin-left:auto;margin-right:auto}
.cta .acts{display:flex;gap:12px;justify-content:center;margin-top:26px;flex-wrap:wrap}
.ft{background:var(--c-bg-deep);color:var(--c-text-inv-3);padding:42px 0 38px;font-size:13px}
.ft img{height:22px;opacity:.92;margin-bottom:18px}
.ft a{color:var(--c-text-inv-2);cursor:pointer}
.ft-row{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:flex-end}
.ft-links{display:flex;gap:18px;flex-wrap:wrap}
.ft .reg{margin-top:8px;font-size:12px;line-height:1.55}
/* Fixed to the foot of the viewport rather than sitting in the page
   flow, so a first-time visitor sees it without scrolling to the
   bottom of a long page. It does not block the page. */
.cookie{background:var(--c-bg-navy);color:#fff;padding:18px 0;border-top:1px solid rgba(255,255,255,.08);
  position:fixed;left:0;right:0;bottom:0;z-index:80;box-shadow:0 -6px 24px rgba(3,15,31,.28)}
.cookie-in{max-width:var(--maxw);margin:0 auto;padding:0 24px;display:grid;grid-template-columns:1fr auto auto;gap:18px;align-items:center}
.cookie p{font-size:13.5px;color:var(--c-text-inv-2)}
.ft{padding-bottom:112px}
.cookie a{color:#fff;text-decoration:underline}

/* visuals */
.shot-hero{margin-top:28px;background:var(--c-bg-navy);border-radius:var(--r-lg);padding:14px}
.shot-hero img{width:100%;height:auto;display:block;border-radius:8px}
.shots{display:grid;gap:16px;margin-top:18px}
.shot{margin:0;display:grid;grid-template-columns:1.55fr 1fr;gap:0;background:var(--c-surface);
  border:1px solid #C3CCD6;border-radius:var(--r-md);overflow:hidden;box-shadow:var(--sh-md)}
.shot img{width:100%;height:auto;display:block;align-self:center;border-right:1px solid #C3CCD6}
.shot figcaption{padding:20px 22px;font-size:13.5px;color:var(--c-text-2);line-height:1.55;align-self:center}
.shot figcaption b{display:block;font-size:14.5px;color:var(--c-text);margin-bottom:6px}
.screen-wrap{margin-top:30px;background:var(--c-bg-navy);border-radius:var(--r-lg);padding:20px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.screen-wrap svg.screen{min-width:720px;border-radius:10px}
.callouts{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:18px}
.callout{display:grid;grid-template-columns:26px 1fr;gap:12px;align-items:start}
.callout .cn{width:26px;height:26px;border-radius:50%;background:var(--amber);color:#3A2500;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center}
.callout b{font-size:13.5px;font-weight:600;display:block}
.callout p{font-size:13px;color:var(--c-text-2);margin-top:4px}
.viz-card{margin-top:30px;background:var(--c-bg-navy);border-radius:var(--r-lg);padding:26px 28px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.viz-card svg.viz{min-width:600px}
svg.viz{width:100%;height:auto;display:block}
.band-wrap{margin-top:30px;background:var(--c-bg-navy);border-radius:var(--r-lg);padding:26px 28px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.band-wrap svg.band{min-width:620px}

/* retail media chart */
.chart{margin-top:26px;background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-lg);padding:22px 24px 18px}
.chart-hd{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:14px}
.chart-k{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--sup-ink)}
.chart-t{font-size:15px;font-weight:600;margin-top:4px}
.chart svg{width:100%;height:auto;display:block}
.chart-src{font-size:12px;color:var(--c-text-3);margin-top:12px;padding-top:10px;border-top:1px solid var(--c-border-2)}

/* founders */
.people{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:34px;padding-top:30px;border-top:1px solid var(--c-border)}
.person{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-lg);padding:22px;
  display:grid;grid-template-columns:120px 1fr;gap:20px;align-items:center}
.person .face{width:120px;height:120px;border-radius:50%;display:block;object-fit:cover}
.person .nm{font-size:16px;font-weight:600}
.person .ro{font-size:12.5px;color:var(--sup-ink);font-weight:600;margin-top:3px}
.person p{font-size:14px;color:var(--c-text-2);margin-top:10px}
.person .pl{display:inline-flex;align-items:center;gap:8px;margin-top:12px;font-size:13.5px;color:var(--sup-ink);font-weight:500}
.person .pl svg{stroke:var(--sup-ink)}

/* legal pages */
.legal h2{margin-top:36px;font-size:20px}
.legal h2:first-of-type{margin-top:0}
.legal p{margin-top:12px;color:var(--c-text-2);max-width:80ch}
.legal .placeholder{background:var(--amber-soft);border:1px solid var(--amber-line);border-radius:var(--r-md);padding:18px 20px;color:#7A5208;font-size:14px;max-width:80ch}

.page{display:none}
.page.on{display:block}

@media(max-width:900px){
  .split,.g2,.g3,.g4,.paths,.prob,.commit ul,.fr,.cookie-in{grid-template-columns:1fr}
  .cookie-in{gap:10px}
  .ft{padding-bottom:210px}
  .journey,.steps,.callouts{grid-template-columns:1fr 1fr}
  .shot{grid-template-columns:1fr}
  .shot img{border-right:0;border-bottom:1px solid var(--c-border-2)}
  .screen-wrap{padding:12px}
  .viz-card{padding:18px 14px}
  .band-wrap{padding:20px 14px}
  .people{grid-template-columns:1fr}
  .time{grid-template-columns:1fr;gap:22px}
  .time .t .line{display:none}
  .spread{column-count:1}
  .hero h1{font-size:31px;max-width:none}
  .sec h2{font-size:24px}
  .consult{grid-template-columns:1fr;gap:12px}
  .nav{display:none;position:absolute;top:64px;left:0;right:0;background:#fff;border-bottom:1px solid var(--c-border);
    flex-direction:column;align-items:stretch;gap:0;padding:8px 24px 16px;box-shadow:var(--sh-md)}
  .nav.open{display:flex}
  .nav a{padding:11px 0;border-bottom:1px solid var(--c-border-2)}
  .nav a.on{border-bottom-color:var(--c-border-2);color:var(--sup)}
  .burger{display:block}
  .hd-in{position:relative}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
/* ==================================================================
   ADD TO THE END OF /assets/site.css
   Nothing existing is changed. These are additions only.
   ================================================================== */

/* Platform access pill. Amber was held back in the palette for
   exactly this kind of single, deliberate use. Deep ink on amber
   measures 9.49:1, so it passes AA comfortably. Amber as text on
   the white header would have been 2.03:1 and failed, which is why
   this is a filled pill rather than a coloured link. */
.btn.amb{background:var(--amber);color:var(--c-bg-deep);font-weight:600}
.btn.amb:hover{background:#FFB945;color:var(--c-bg-deep)}

/* Two pills plus a burger will not fit a phone header, so the
   Register interest pill drops into the collapsed menu below 900px
   and the Platform access pill stays visible. */
.only-sm{display:none}

/* ---- Platform access gate ---------------------------------------- */
.gate-wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:22px;align-items:start}

.gate-box{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-lg);
  padding:32px;box-shadow:var(--sh-md)}
.gate-box h2{font-size:22px;margin:14px 0 8px}
.gate-box .lede{margin-bottom:22px}

.gate-form{display:flex;flex-direction:column;gap:9px;max-width:380px}
.gate-form label{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;
  color:var(--c-text-3)}
.gate-form input{height:46px;padding:0 14px;font-size:15px;font-family:inherit;color:var(--c-text);
  background:var(--c-surface-2);border:1px solid var(--c-border);border-radius:var(--r-sm);
  transition:border-color 120ms,background 120ms}
.gate-form input:focus{outline:none;border-color:var(--amber);background:var(--c-surface);
  box-shadow:0 0 0 3px var(--amber-soft)}
.gate-form .btn{margin-top:5px;align-self:flex-start}

.gate-err{background:var(--amber-soft);border:1px solid var(--amber-line);border-radius:var(--r-sm);
  padding:11px 14px;font-size:13.5px;color:var(--c-text);margin-bottom:18px}

.gate-aside{background:var(--sup-soft);border:1px solid var(--sup-line);border-radius:var(--r-lg);
  padding:28px}
.gate-aside h3{font-size:17px;margin-bottom:9px}
.gate-aside p{font-size:14px;color:var(--c-text-2);margin-bottom:18px}

.gate-note{display:flex;gap:10px;align-items:flex-start;margin-top:18px;padding-top:18px;
  border-top:1px solid var(--sup-line);font-size:13px;color:var(--c-text-2);line-height:1.5}
.gate-note svg{flex:0 0 auto;margin-top:1px;stroke:var(--sup-ink)}

@media(max-width:900px){
  .gate-wrap{grid-template-columns:1fr}
  .gate-box{padding:24px}
  .gate-aside{padding:22px}
  .hide-sm{display:none}
  .only-sm{display:block}
}
/* ==================================================================
   REGISTER PAGE
   Appended to /assets/site.css after the platform access block.

   Everything here is built on the existing site tokens, so the page
   picks up any future change to the palette. The class names are the
   ones the form script depends on and must not be renamed.
   ================================================================== */

/* ---- secondary section bar -------------------------------------- */
/* Not sticky on purpose. The site header above it already is, and two
   stacked sticky bars take most of a phone screen. */
.subbar{background:var(--c-surface);border-bottom:1px solid var(--c-border)}
.subbar-in{max-width:var(--maxw);margin:0 auto;padding:0 24px;height:46px;
  display:flex;align-items:center;gap:22px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.subbar a{color:var(--c-text-2);font-size:13px;font-weight:500;white-space:nowrap;padding:4px 0}
.subbar a:hover{color:var(--sup-ink);text-decoration:none}
.subbar a.last{margin-left:auto;color:var(--sup-ink);font-weight:600}

/* ---- platform screen tabs --------------------------------------- */
.inv-tabs{display:flex;gap:8px;margin:22px 0 14px;flex-wrap:wrap}
.inv-tab{height:34px;padding:0 15px;border-radius:var(--r-sm);cursor:pointer;
  border:1px solid var(--c-border);background:var(--c-surface);
  color:var(--c-text-2);font:500 13px/1 inherit;transition:background 120ms,border-color 120ms}
.inv-tab:hover{background:var(--c-bg)}
.inv-tab.on{background:var(--sup-soft);border-color:var(--sup-line);color:var(--sup-ink);font-weight:600}

.inv-shot{margin:0;border:1px solid var(--c-border);border-radius:var(--r-lg);
  overflow:hidden;background:var(--c-surface);box-shadow:var(--sh-md)}
.inv-shot-bar{display:flex;align-items:center;gap:7px;padding:0 14px;height:36px;
  background:var(--c-bg);border-bottom:1px solid var(--c-border)}
.inv-shot-bar i{width:9px;height:9px;border-radius:50%;background:var(--c-border);display:block}
.inv-shot-bar span{margin-left:8px;font-size:12px;color:var(--c-text-3);font-weight:500}
.inv-shot-scroll{max-height:520px;overflow:auto;background:var(--c-surface-2)}
.inv-shot-scroll img{display:block;width:100%}
.inv-shot-cap{padding:16px 18px;font-size:14px;color:var(--c-text-2);line-height:1.55;
  border-top:1px solid var(--c-border-2)}
.inv-shot-cap strong{color:var(--c-text)}
.inv-disclaimer{margin-top:14px;font-size:12.5px;color:var(--c-text-3);line-height:1.5}

/* ---- channel tiles ---------------------------------------------- */
.inv-channels{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:22px}
.inv-channel{border:1px solid var(--c-border);border-radius:var(--r-md);padding:16px 18px;
  background:var(--c-surface);border-left:3px solid var(--sup)}
.inv-channel .n{font-size:14.5px;font-weight:600;color:var(--c-text)}
.inv-channel .d{font-size:13px;color:var(--c-text-3);margin-top:4px;line-height:1.45}
.inv-note{margin-top:18px;font-size:14px;color:var(--c-text-2);line-height:1.6;max-width:74ch}

/* ---- the form --------------------------------------------------- */
.inv-form-shell{background:var(--c-surface);border:1px solid var(--c-border);
  border-radius:var(--r-lg);box-shadow:var(--sh-md);overflow:hidden;margin-top:24px}
.inv-progress{height:3px;background:var(--c-border-2)}
.inv-progress span{display:block;height:100%;width:20%;background:var(--sup);transition:width 220ms}
.inv-form-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:22px 28px 0}
.inv-form-head h3{font-size:18px;font-weight:600}
.inv-form-head .stepcount{font-size:12px;color:var(--c-text-3);font-weight:500;white-space:nowrap}
.inv-form-body{padding:18px 28px 4px}
.inv-form-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px 28px;border-top:1px solid var(--c-border-2);background:var(--c-surface-2)}
.inv-form-foot .hint{font-size:12.5px;color:var(--c-text-3)}

.inv-steptitle{font-size:14px;color:var(--c-text-2);margin-bottom:20px;line-height:1.5}
.inv-fieldset{display:flex;flex-direction:column;gap:16px}
.inv-two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.inv-field label{display:block;font-size:13px;font-weight:600;color:var(--c-text);margin-bottom:6px}
.inv-field .req{color:var(--sup-ink);margin-left:3px}
.inv-optional{float:right;font-weight:500;font-size:11.5px;color:var(--c-text-3);
  text-transform:uppercase;letter-spacing:.05em}
.inv-field .help{font-size:12.5px;color:var(--c-text-3);margin:-2px 0 6px;line-height:1.45}
.inv-field input[type=text],.inv-field input[type=email],.inv-field select,.inv-field textarea{
  width:100%;font:400 14.5px/1.4 inherit;color:var(--c-text);background:var(--c-surface-2);
  border:1px solid var(--c-border);border-radius:var(--r-sm);padding:11px 13px;
  transition:border-color 120ms,box-shadow 120ms,background 120ms}
.inv-field textarea{min-height:84px;resize:vertical}
.inv-field input:focus,.inv-field select:focus,.inv-field textarea:focus{
  outline:none;border-color:var(--sup);background:var(--c-surface);
  box-shadow:0 0 0 3px var(--sup-soft)}
.inv-field.err input,.inv-field.err select{border-color:#C0392B;background:#FDF3F2}
.inv-field .errmsg{font-size:12.5px;color:#C0392B;margin-top:5px}

.inv-radios{display:flex;flex-wrap:wrap;gap:9px}
.inv-radio{display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  border:1px solid var(--c-border);border-radius:var(--r-sm);padding:9px 14px;
  font-size:13.5px;font-weight:500;color:var(--c-text-2);background:var(--c-surface)}
.inv-radio:hover{background:var(--c-bg)}
.inv-radio.on{background:var(--sup-soft);border-color:var(--sup-line);color:var(--sup-ink)}

.inv-chips{display:flex;flex-wrap:wrap;gap:8px}
.inv-chip{cursor:pointer;border:1px solid var(--c-border);border-radius:var(--r-sm);
  padding:8px 13px;font:500 13px/1.2 inherit;color:var(--c-text-2);background:var(--c-surface)}
.inv-chip:hover{background:var(--c-bg)}
.inv-chip.on{background:var(--sup-soft);border-color:var(--sup-line);color:var(--sup-ink);font-weight:600}

.inv-statuses{margin-top:20px;display:flex;flex-direction:column;gap:10px}
.inv-status-row{display:grid;grid-template-columns:1fr 260px;gap:12px;align-items:center}
.inv-status-row .cname{font-size:13.5px;color:var(--c-text-2)}
.inv-status-row select{width:100%;font:400 13.5px/1.4 inherit;color:var(--c-text);
  background:var(--c-surface-2);border:1px solid var(--c-border);
  border-radius:var(--r-sm);padding:9px 12px}

.inv-check{display:flex;gap:11px;align-items:flex-start;cursor:pointer;
  border:1px solid var(--c-border);border-radius:var(--r-md);padding:15px 17px;
  background:var(--c-surface-2)}
.inv-check input{margin-top:2px;flex:0 0 auto;width:16px;height:16px;accent-color:var(--sup)}
.inv-check .t{display:block;font-size:14px;font-weight:600;color:var(--c-text);line-height:1.45}
.inv-check .s{display:block;font-size:12.5px;color:var(--c-text-3);margin-top:5px;line-height:1.5}
.inv-check.err{border-color:#C0392B;background:#FDF3F2}

.inv-alert{border-radius:var(--r-sm);padding:11px 14px;font-size:13.5px;margin-bottom:18px}
.inv-alert.error{background:#FDF3F2;border:1px solid #E7BFBA;color:#8E2C20}

.inv-btn{height:42px;padding:0 20px;border-radius:var(--r-sm);border:1px solid transparent;
  font:500 14px/1 inherit;display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;transition:background 120ms}
.inv-btn.primary{background:var(--sup);color:var(--c-bg-deep);font-weight:600}
.inv-btn.primary:hover{background:#6FBCD3}
.inv-btn.ghost{background:transparent;color:var(--c-text-2);border-color:var(--c-border)}
.inv-btn.ghost:hover{background:var(--c-bg)}

.inv-done{padding:44px 28px;text-align:center}
.inv-done .tick{width:46px;height:46px;margin:0 auto 16px;border-radius:50%;
  background:var(--ok-bg);color:var(--ok);font-size:22px;font-weight:700;
  display:flex;align-items:center;justify-content:center;line-height:1}
.inv-done h3{font-size:21px;font-weight:600;margin-bottom:9px}
.inv-done p{font-size:14.5px;color:var(--c-text-2);max-width:52ch;margin:0 auto;line-height:1.6}
.inv-done .acts{display:flex;gap:10px;justify-content:center;margin-top:22px;flex-wrap:wrap}

.inv-hidden{display:none!important}

@media(max-width:900px){
  .inv-channels{grid-template-columns:1fr}
  .inv-two{grid-template-columns:1fr}
  .inv-status-row{grid-template-columns:1fr;gap:6px}
  .inv-form-head,.inv-form-body,.inv-form-foot{padding-left:18px;padding-right:18px}
  .inv-form-foot{flex-direction:column;align-items:stretch;gap:10px}
  .inv-form-foot>div{flex-direction:column-reverse;align-items:stretch!important;gap:10px!important}
  .inv-form-foot .hint{text-align:center}
  .subbar a.last{margin-left:0}
}
/* ============================================================
   Legal document pages (privacy statement)
   Appended 11 September 2026.
   Scoped to .legal-doc. Sets only what was missing: spacing,
   measure and tables. Heading and body typography are left to
   the existing site rules.
   ============================================================ */

.legal-doc{max-width:640px}

.legal-doc .meta{font-size:13px;color:var(--c-text-3);margin:0 0 32px}

.legal-doc h2{margin:40px 0 12px}
.legal-doc h2:first-child{margin-top:0}
.legal-doc h3{margin:28px 0 8px}

.legal-doc p{margin:0 0 15px}
.legal-doc ul{margin:0 0 15px;padding-left:20px}
.legal-doc li{margin:0 0 7px}
.legal-doc li:last-child{margin-bottom:0}

/* Tables. No site rules exist, so everything is set here.
   The wrapper allows horizontal scroll rather than a squeezed
   four-column table on a phone. */
.legal-doc .tbl{overflow-x:auto;margin:0 0 24px}
.legal-doc table{width:100%;min-width:460px;border-collapse:collapse;font-size:14px}
.legal-doc th{
  text-align:left;font-weight:600;padding:10px 16px 10px 0;
  border-bottom:2px solid rgba(12,31,53,.18);white-space:nowrap}
.legal-doc td{
  padding:11px 16px 11px 0;vertical-align:top;
  border-bottom:1px solid rgba(12,31,53,.10)}
.legal-doc tr:last-child td{border-bottom:none}

.legal-doc .card{margin:0 0 24px}

@media (max-width:700px){
  .legal-doc table{font-size:13px}
  .legal-doc h2{margin-top:32px}
}
