/* Tsela & Co. · Jacaranda Night (brand/tsela-brand-basics.md, approved 27 Sep 2026)
   Lime = logo ampersand + CTAs only. Jacaranda = labels, charts, path device on Plum.
   Lime and Jacaranda are never text on Paper. v2 (27 Sep): redesign after the competitor audit
   (website/website-audit-2026-09-27.md). */
:root{
  --plum:#241A33;--paper:#F7F5FA;--lime:#C6F16B;--jac:#9C7FE3;--lilac:#C9C0D8;--dusk:#5A4F6B;--mist:#EFEBF6;
  --bg:var(--paper);--panel:var(--mist);--surface:#FFFFFF;--ink:var(--plum);--ink2:var(--dusk);--line:#DDD5EA;
  --eyebrow:var(--plum);--btn:var(--plum);--btnInk:var(--paper);--amp:#779140;--dot:#8C72CC;--pathline:#C3B8E3;
  --night:var(--plum);--night2:#2E2340;--night3:#3A2E4D;--nightInk:var(--paper);--nightMuted:var(--lilac);--nightLine:#3A2E4D;
  --display:"Fraunces",Georgia,"Times New Roman",serif;
  --body:"Archivo",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --r:20px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  color-scheme:dark;--bg:#1B1327;--panel:#241A33;--surface:#2A2038;--ink:var(--paper);--ink2:var(--lilac);--line:#3A2E4D;
  --eyebrow:var(--jac);--btn:var(--lime);--btnInk:var(--plum);--amp:var(--lime);--dot:var(--jac);--pathline:#6E5F87;
  --night:#140D1E;--night2:#22192F;--night3:#30253F;--nightLine:#30253F;}}
:root[data-theme="dark"]{
  color-scheme:dark;--bg:#1B1327;--panel:#241A33;--surface:#2A2038;--ink:var(--paper);--ink2:var(--lilac);--line:#3A2E4D;
  --eyebrow:var(--jac);--btn:var(--lime);--btnInk:var(--plum);--amp:var(--lime);--dot:var(--jac);--pathline:#6E5F87;
  --night:#140D1E;--night2:#22192F;--night3:#30253F;--nightLine:#30253F;}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.6;margin:0}
a{color:inherit}
.wrap{max-width:1180px;margin:0 auto;padding-inline:20px}
h1,h2,h3,h4{font-family:var(--display);font-weight:700;line-height:1.08;text-wrap:balance;margin:0;font-variation-settings:"SOFT" 0,"WONK" 0}
h2{font-size:clamp(30px,4.2vw,50px);letter-spacing:-.01em}
h3{font-size:22px}
p{margin:0}
.eyebrow{font-size:12.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--eyebrow)}
.lead{color:var(--ink2);max-width:60ch;font-size:18px}
section{padding-block:96px}
.sec-head{display:grid;gap:16px;margin-bottom:48px;max-width:760px}
.amp{color:var(--amp)}
.dark{background:var(--night);color:var(--nightInk)}
.dark .eyebrow{color:var(--jac)}
.dark .lead,.dark .muted{color:var(--nightMuted)}
.dark .amp{color:var(--lime)}
/* path device */
.path{display:flex;align-items:center;width:120px}
.path::before{content:"";flex:1;height:2px;background:var(--pathline)}
.path::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--dot)}
.dark .path::before{background:var(--lilac)}.dark .path::after{background:var(--jac)}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;text-align:center;max-width:100%;font:600 16px var(--body);padding:14px 24px;border-radius:999px;text-decoration:none;border:1.5px solid transparent;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease}
.btn:hover{transform:translateY(-2px)}
.btn .arr{transition:transform .15s ease}.btn:hover .arr{transform:translateX(3px)}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid var(--jac);outline-offset:3px}
.btn-primary{background:var(--btn);color:var(--btnInk)}
.btn-ghost{border-color:currentColor;background:transparent;color:inherit}
.dark .btn-primary{background:var(--lime);color:var(--plum)}
.dark .btn-primary:hover{box-shadow:0 10px 30px rgba(198,241,107,.22)}
.textlink{font-weight:600;text-decoration:none;border-bottom:1.5px solid currentColor;padding-bottom:1px}

/* nav */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:color-mix(in srgb,var(--night) 92%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--nightLine)}
.nav .wrap{display:flex;align-items:center;gap:28px;min-height:68px}
.logo{font-family:var(--display);font-weight:700;font-size:24px;text-decoration:none;white-space:nowrap;margin-right:auto}
.nav ul{display:flex;gap:26px;list-style:none;margin:0;padding:0;font-size:15px}
.nav ul a{text-decoration:none;color:var(--nightMuted)}.nav ul a:hover{color:var(--nightInk)}
.nav .login{font-size:14.5px;color:var(--nightMuted);text-decoration:none;white-space:nowrap}
.nav .btn{padding:10px 18px;font-size:14.5px;white-space:nowrap}

/* hero */
.hero{padding-block:80px 96px;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:auto -10% -40% 40%;height:80%;background:radial-gradient(closest-side,rgba(156,127,227,.22),transparent);pointer-events:none}
.hero .wrap{display:grid;grid-template-columns:1fr 1.05fr;gap:56px;align-items:center;position:relative}
.hero h1{font-size:clamp(42px,5.8vw,74px);letter-spacing:-.015em;margin:18px 0 24px}
.hero h1 .hl{color:var(--jac)}
.hero .lead{font-size:19px}
.ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.chips{display:flex;flex-wrap:wrap;gap:8px 10px;margin-top:30px;padding:0;list-style:none}
.chips li{font-size:13.5px;color:var(--nightMuted);border:1px solid var(--nightLine);border-radius:999px;padding:6px 12px}

/* hero: five-stage measurement visual (no data) */
.hstages{list-style:none;margin:0;padding:0;display:grid;gap:8px;position:relative}
.hstages::before{content:"";position:absolute;left:15px;top:18px;bottom:18px;width:2px;background:var(--night3)}
.hstages li{position:relative;display:grid;grid-template-columns:32px 92px 1fr;align-items:center;gap:10px;background:var(--plum);border-radius:12px;padding:12px 14px 12px 0}
.hstages li::before{content:"";justify-self:center;width:12px;height:12px;border-radius:50%;background:var(--jac);box-shadow:0 0 0 4px var(--night2)}
.hstages li:last-child::before{background:var(--lime)}
.hstages b{font-family:var(--display);font-size:20px;color:var(--paper)}
.hstages span{font-size:13.5px;color:var(--lilac)}
.hsrc{background:var(--plum);border-radius:12px;padding:12px 14px;display:grid;gap:8px}
.hsrc span{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--jac)}
.hsrc p{display:flex;flex-wrap:wrap;gap:6px}
.hsrc i{font-style:normal;font-size:12.5px;color:var(--paper);background:var(--night3);border-radius:999px;padding:4px 10px}
@media (max-width:560px){.hstages li{grid-template-columns:32px 1fr}.hstages li span{grid-column:2}}
/* portal: live dashboard */
.pfun{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.pfun li{background:var(--night2);border-radius:12px;padding:12px 14px;display:grid;gap:4px;align-content:start}
.pfun .k{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--jac)}
.pfun b{font-family:var(--display);font-size:24px;color:var(--paper);font-variant-numeric:tabular-nums}
.pfun em{font-style:normal;font-size:12.5px;color:var(--lilac)}
.pfun small{font-size:12px;color:var(--lilac)}
.p-panel > .pd .pfun li{background:var(--night2)}
.conns{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.conn-top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.conn .mini-btn{justify-self:start;text-decoration:none}
.mini-btn[disabled]{opacity:.45;cursor:not-allowed}
.pd .ctab{color:var(--paper)}.pd .ctab th{color:var(--lilac)}.pd .ctab td small{color:var(--lilac)}.pd .ctab td,.pd .ctab th{border-color:var(--night3)}.pd .ctab td:first-child{min-width:140px}
.pd select{font:inherit;background:var(--night2);color:var(--paper);border:1px solid var(--night3);border-radius:8px;padding:2px 6px}
@media (max-width:900px){.pfun{grid-template-columns:1fr 1fr}}
.mock{position:relative}
.app{background:var(--night2);border:1px solid var(--night3);border-radius:18px;box-shadow:0 40px 80px rgba(0,0,0,.4);overflow:hidden}
.app-bar{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--night3);font-size:12.5px;color:var(--lilac)}
.app-bar i{width:9px;height:9px;border-radius:50%;background:var(--night3)}
.app-bar b{margin-left:8px;color:var(--paper);font-weight:600}
.app-bar span{margin-left:auto}
.app-body{padding:16px;display:grid;gap:12px}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.kpi{background:var(--plum);border-radius:12px;padding:12px 14px}
.kpi span{display:block;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--jac)}
.kpi b{font-family:var(--display);font-size:26px;color:var(--paper);font-variant-numeric:tabular-nums}
.kpi em{font-style:normal;font-size:12px;color:var(--lilac);display:block}
.chart{background:var(--plum);border-radius:12px;padding:12px 14px 6px}
.chart .t{display:flex;justify-content:space-between;font-size:12px;color:var(--lilac)}
.chart svg{display:block;width:100%;height:auto}
.board{background:var(--plum);border-radius:12px;padding:12px 14px;display:grid;gap:9px}
.row{display:grid;grid-template-columns:34px 1fr 42px;gap:10px;align-items:center;font-size:12.5px;color:var(--lilac)}
.thumb{width:34px;height:42px;border-radius:6px;background:linear-gradient(160deg,#5B4880,#2E2340)}
.thumb.b{background:linear-gradient(160deg,#9C7FE3,#4A3A68)}.thumb.c{background:linear-gradient(160deg,#C9C0D8,#5A4F6B)}
.meter{display:grid;gap:4px}.meter i{display:block;height:8px;border-radius:4px;background:var(--jac)}.meter i.win{background:var(--lime)}
.row b{color:var(--paper);font-weight:600;font-variant-numeric:tabular-nums;text-align:right}
.reco{position:absolute;left:-28px;bottom:-30px;max-width:300px;background:var(--paper);color:var(--plum);border-radius:16px;padding:14px 16px;box-shadow:0 24px 50px rgba(0,0,0,.35);font-size:14px;line-height:1.45}
.reco span{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--dusk);margin-bottom:6px}
.reco span::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--dot)}
.samplelab{margin-top:44px;font-size:11.5px;font-weight:600;letter-spacing:.14em;color:var(--lilac);text-align:right}

/* brand marquee */
.brands{background:var(--panel);padding-block:30px;border-bottom:1px solid var(--line)}
.brands .top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:6px 24px;margin-bottom:16px}
.brands .cap{font-size:14px;color:var(--ink2)}
.marquee{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.logos{list-style:none;margin:0;padding:0;display:flex;gap:44px;width:max-content;animation:scroll 60s linear infinite;font-family:var(--display);font-weight:600;font-size:22px;color:var(--ink);white-space:nowrap}
.marquee:hover .logos{animation-play-state:paused}
@keyframes scroll{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.logos{animation:none;flex-wrap:wrap;width:auto;gap:10px 28px;white-space:normal}.logos li[aria-hidden],.logos li.lg[aria-hidden]{display:none}.marquee{mask-image:none;-webkit-mask-image:none}}
.logos{align-items:center}
.logos li.lg{background:#fff;border-radius:12px;padding:8px 16px;height:56px;display:flex;align-items:center;box-shadow:0 0 0 1px var(--line)}
.logos img{height:38px;width:auto;max-width:132px;object-fit:contain;display:block}

/* POV */
.pov{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:end}
.pov h2{font-size:clamp(34px,5vw,62px)}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:28px;display:grid;gap:10px}
.stat b{font-family:var(--display);font-size:64px;line-height:1;font-variant-numeric:tabular-nums}
.stat p{color:var(--ink2);font-size:15.5px}
.stat a{font-size:13.5px;color:var(--ink2)}
.moves{list-style:none;margin:64px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:28px;position:relative}
.moves::before{content:"";position:absolute;left:6px;right:6px;top:6px;height:2px;background:var(--pathline)}
.moves li{position:relative;padding-top:34px;display:grid;gap:8px}
.moves li::before{content:"";position:absolute;left:0;top:0;width:14px;height:14px;border-radius:50%;background:var(--dot);box-shadow:0 0 0 5px var(--bg)}
.moves h3{font-size:26px}
.moves p{color:var(--ink2)}


/* practices (bento) */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:18px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:30px;display:grid;gap:16px;align-content:start}
.card .k{display:flex;align-items:center;gap:10px;font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2)}
.card .k::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--dot)}
.card h3{font-size:28px}
.card > p{color:var(--ink2)}
.s-strat{grid-column:span 4}.s-crea{grid-column:span 2}.s-perf{grid-column:span 6}
.offers{display:grid;gap:10px}
.offers details{border:1px solid var(--line);border-radius:14px;padding:16px 18px;background:var(--bg)}
.offers summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:14px;font-family:var(--display);font-weight:700;font-size:19px}
.offers summary::-webkit-details-marker{display:none}
.offers summary small{font-family:var(--body);font-weight:500;font-size:14px;color:var(--ink2);margin-left:auto}
.offers summary::after{content:"+";font-family:var(--body);font-size:20px;color:var(--ink2)}
.offers details[open] summary::after{content:"–"}
.offers ul{margin:12px 0 0;padding-left:18px;color:var(--ink2);font-size:15.5px;display:grid;gap:4px}
.card .btn{justify-self:start}
/* dashboard feature */
.feat{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.tile{background:var(--night2);border:1px solid var(--night3);border-radius:var(--r);padding:24px;display:grid;gap:14px;align-content:start}
.tile h3{font-size:21px}
.tile p{color:var(--nightMuted);font-size:15.5px}
.tile .vis{height:96px;border-radius:12px;background:var(--plum);padding:12px;display:grid;align-content:center;gap:8px}
.pill{display:inline-block;font-size:12px;font-weight:600;color:var(--paper);background:var(--night3);border-radius:999px;padding:4px 10px;margin:0 4px 4px 0}
.cells{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}
.cells i{height:14px;border-radius:3px;background:var(--night3)}.cells i.on{background:var(--jac)}
.say{font-size:13px;color:var(--paper);line-height:1.4}
.say::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--jac);margin-right:8px}
.plats{display:grid;gap:6px}
.plats div{display:grid;grid-template-columns:64px 1fr;gap:8px;align-items:center;font-size:12px;color:var(--lilac)}
.plats i{display:block;height:8px;border-radius:4px;background:var(--jac)}
.featcta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;margin-top:40px;padding-top:32px;border-top:1px solid var(--nightLine)}
.featcta p{font-family:var(--display);font-size:clamp(22px,2.6vw,30px);max-width:24ch}

/* who it's for */
.who{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.who article{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:22px;display:grid;gap:12px;align-content:start}
.who .n{font-family:var(--display);font-size:15px;color:var(--ink2)}
.who h3{font-size:18px}
.who p{color:var(--ink2);font-size:15px;font-style:italic}
.notfor{margin-top:22px;display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start;border:1px dashed var(--pathline);border-radius:var(--r);padding:22px 26px}
.notfor b{font-family:var(--display);font-size:19px}
.notfor ul{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px 26px;color:var(--ink2);font-size:15.5px}


/* about */
.about{display:grid;grid-template-columns:320px 1fr;gap:56px;align-items:start}
.card-id{border-radius:var(--r);padding:28px;display:grid;gap:16px}
.headshot{width:112px;height:112px;border-radius:50%;background:var(--night3);color:var(--paper);display:grid;place-items:center;font-family:var(--display);font-size:36px;overflow:hidden;border:3px solid var(--jac)}
.headshot img{width:100%;height:100%;object-fit:cover}
.card-id b{font-family:var(--display);font-size:24px;display:block;line-height:1.15}
.card-id dl{margin:0;display:grid;gap:10px;border-top:1px solid var(--nightLine);padding-top:14px}
.card-id dt{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--jac)}
.card-id dd{margin:0;font-size:15px}
.bio{display:grid;gap:20px}
.bio p{color:var(--ink2);max-width:64ch}
.purpose{font-family:var(--display);font-size:clamp(26px,3vw,36px);line-height:1.2;color:var(--ink)!important}
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.values div{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px}
.values b{display:block;font-family:var(--display);font-size:18px;margin-bottom:2px}
.values span{color:var(--ink2);font-size:15px}

/* for clients */
.small{font-size:14px}
.perfrow{display:grid;grid-template-columns:auto 1fr auto;gap:12px 28px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:24px 30px}
.perfrow .k{display:flex;align-items:center;gap:10px;font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2);white-space:nowrap}
.perfrow .k::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--dot)}
.perfrow p{color:var(--ink2);font-size:16px}.perfrow p b{color:var(--ink)}
.perfrow .textlink{white-space:nowrap}
.approach{display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px;margin-top:22px;padding:18px 26px;border:1px dashed var(--pathline);border-radius:var(--r)}
.approach .k{font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2)}
.approach p{font-family:var(--display);font-weight:700;font-size:clamp(19px,2.2vw,24px)}
.approach p span{color:var(--dot);margin:0 4px}
.clients{padding-block:0 72px}
.clients .eyebrow{margin-bottom:16px}
.cgrid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.cgrid .card{padding:26px;gap:12px}
.cgrid .card h3{font-size:22px}
.cgrid form{display:grid;gap:10px}
.cgrid label{font-weight:600;font-size:15px}
.cgrid input{font:16px var(--body);padding:13px 16px;border-radius:12px;border:1.5px solid var(--line);background:var(--bg);color:var(--ink);width:100%}
.cgrid .small{color:var(--ink2)}
#loginMsg{min-height:1.4em}
.paysteps{margin:0;padding-left:20px;color:var(--ink2);display:grid;gap:4px;font-size:15.5px}
.paybtns{display:flex;flex-wrap:wrap;gap:10px}
.cgrid .pending{border-color:var(--line);color:var(--ink2)}
.safeline b{color:var(--ink)}
@media (max-width:1000px){.perfrow{grid-template-columns:1fr}}

/* faq */
.faqgrid{display:grid;grid-template-columns:.8fr 1.2fr;gap:48px;align-items:start}
.faq{display:grid;gap:10px}
.faq details{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px 22px}
.faq summary{cursor:pointer;font-weight:600;font-size:17px;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--ink2)}
.faq details[open] summary::after{content:"–"}
.faq details p{color:var(--ink2);margin-top:10px;font-size:15.5px}

/* closing CTA */
.book{border-radius:28px;padding:64px 56px;display:grid;grid-template-columns:1.3fr 1fr;gap:40px;align-items:center;position:relative;overflow:hidden}
.book::after{content:"";position:absolute;right:-80px;top:-80px;width:320px;height:320px;border-radius:50%;background:radial-gradient(closest-side,rgba(156,127,227,.28),transparent)}
.book h2{font-size:clamp(32px,4.4vw,54px)}
.book .side{display:grid;gap:12px;justify-items:start;position:relative;z-index:1}
.pending{display:none;font-size:14.5px;border:1px solid var(--nightLine);padding:12px 14px;border-radius:10px;color:var(--nightMuted)}
.pending.show{display:block}
footer a{color:inherit}
footer{padding-block:36px;font-size:14px}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;color:var(--nightMuted)}
/* mobile sticky CTA */
.mcta{display:none}
@media (max-width:1000px){
  .hero .wrap,.pov,.about,.book,.faqgrid,.cgrid{grid-template-columns:1fr}
  .s-strat,.s-crea,.s-perf{grid-column:span 6}
  .feat{grid-template-columns:1fr 1fr}
  .who{grid-template-columns:1fr 1fr}
  .nav ul{display:none}
  .reco{position:relative;left:auto;bottom:auto;margin-top:-20px;margin-left:16px}
  .samplelab{margin-top:14px}
  section{padding-block:72px}
}
@media (max-width:700px){
  .moves,.feat,.who,.values,.kpis{grid-template-columns:1fr}
  .moves::before{display:none}
  .approach{flex-direction:column;align-items:flex-start}
  .moves{gap:22px}
  .notfor{grid-template-columns:1fr}
  .nav .login{display:none}
  .book{padding:40px 24px}
  .hero{padding-block:48px 64px}
  .mcta{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:30;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));background:var(--night);border-top:1px solid var(--nightLine)}
  .mcta .btn{flex:1;background:var(--lime);color:var(--plum)}
  footer{padding-bottom:96px}
  .logo{font-size:21px}
}
/* nav menu (tablet + mobile) */
.menubtn{display:none;font:600 14.5px var(--body);color:var(--nightInk);background:transparent;border:1.5px solid var(--nightLine);border-radius:999px;padding:9px 16px;cursor:pointer}
.menu{border-top:1px solid var(--nightLine);background:var(--night)}
.menu .wrap{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:4px 20px;padding-block:14px}
.menu a{color:var(--nightMuted);text-decoration:none;padding:8px 0;font-size:16px}
.menu a:hover{color:var(--nightInk)}
.herolink{color:var(--nightInk);align-self:center;margin-left:8px}
.linkbtn{font:inherit;font-weight:600;color:var(--ink);background:none;border:0;padding:0;border-bottom:1.5px solid currentColor;cursor:pointer}
@media (max-width:1000px){.menubtn{display:inline-block}}
@media (min-width:1001px){.menu{display:none!important}}
[hidden]{display:none!important}
.p-card > .btn,.p-card > .mini-btn{justify-self:start}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* ===== client portal ===== */
body.portal-open > nav,body.portal-open > header,body.portal-open > .brands,body.portal-open > main,body.portal-open > footer,body.portal-open > .mcta{display:none!important}
.portal{min-height:100vh;background:var(--bg)}
.p-wrap{max-width:1240px;margin:0 auto;padding-inline:20px}
.p-top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;border-bottom:1px solid var(--nightLine)}
.p-top .p-wrap{display:flex;align-items:center;gap:16px;min-height:64px}
.p-top .logo{margin-right:0}
.p-app{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--jac)}
.p-who{margin-left:auto;font-size:14.5px;color:var(--nightMuted);text-align:right}
.p-out{padding:8px 16px;font-size:14px}
.p-banner{background:var(--panel);border-bottom:1px solid var(--line)}
.p-banner .p-wrap{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;padding-block:12px;font-size:14.5px;color:var(--ink2)}
.p-banner b{font-size:12px;letter-spacing:.14em;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:4px 10px}
.p-banner .btn{padding:9px 16px;font-size:14px;margin-left:auto}
.p-grid{display:grid;grid-template-columns:220px 1fr;gap:32px;padding-block:32px 80px;align-items:start}
.p-tabs{position:sticky;top:96px;display:grid;gap:4px}
.p-tabs button{font:500 15.5px var(--body);text-align:left;color:var(--ink2);background:none;border:0;border-radius:12px;padding:11px 14px;cursor:pointer;display:flex;align-items:center;gap:10px}
.p-tabs button::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--line)}
.p-tabs button[aria-selected="true"]{background:var(--surface);color:var(--ink);font-weight:600;box-shadow:inset 0 0 0 1px var(--line)}
.p-tabs button[aria-selected="true"]::before{background:var(--dot)}
.p-tabs button[hidden]{display:none}
.p-main{min-width:0}
.p-panel{display:grid;gap:18px}
.p-h{display:grid;gap:6px;margin-bottom:6px}
.p-h h2{font-size:clamp(26px,3vw,36px)}
.p-h p{color:var(--ink2)}
.p-card{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:22px 24px;display:grid;gap:12px;align-content:start}
.p-card h3{font-size:20px}
.p-card .k{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2)}
.p-row2{display:grid;grid-template-columns:1.3fr 1fr;gap:18px}
.p-row3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.stages{list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);position:relative}
.stages::before{content:"";position:absolute;left:8px;right:8px;top:8px;height:2px;background:var(--pathline)}
.stages li{position:relative;padding-top:26px;font-size:14px;color:var(--ink2)}
.stages li::before{content:"";position:absolute;left:0;top:1px;width:16px;height:16px;border-radius:50%;background:var(--surface);border:2px solid var(--pathline)}
.stages li.done::before{background:var(--pathline)}
.stages li.now{color:var(--ink);font-weight:600}
.stages li.now::before{background:var(--dot);border-color:var(--dot);box-shadow:0 0 0 5px color-mix(in srgb,var(--dot) 25%,transparent)}
.status{justify-self:start;font-size:12.5px;font-weight:600;border-radius:999px;padding:4px 10px;border:1px solid var(--line);color:var(--ink2);background:var(--bg)}
.status.live{background:var(--plum);color:var(--lime);border-color:var(--plum)}
.status.wait{background:var(--panel);color:var(--ink);border-color:var(--pathline)}
.status.done{color:var(--ink2)}
.mile{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.mile li{display:grid;grid-template-columns:22px 1fr auto;gap:10px;align-items:start;padding:9px 0;border-top:1px solid var(--line);font-size:15px}
.mile li:first-child{border-top:0}
.mile li::before{content:"";width:14px;height:14px;margin-top:4px;border-radius:50%;border:2px solid var(--pathline)}
.mile li.done::before{background:var(--pathline)}
.mile li.done span{color:var(--ink2)}
.mile li.now::before{background:var(--dot);border-color:var(--dot)}
.mile li.you::before{border-color:var(--ink);background:var(--surface)}
.mile li em{font-style:normal;font-size:13px;color:var(--ink2);white-space:nowrap}
.mile li.you em{color:var(--ink);font-weight:600}
.need{display:grid;gap:10px}
.need div{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;padding:12px 14px;border-radius:12px;background:var(--bg);border:1px solid var(--line);font-size:15px}
.mini-btn{font:600 14px var(--body);border-radius:999px;padding:8px 14px;border:1.5px solid var(--ink);background:transparent;color:var(--ink);cursor:pointer;white-space:nowrap}
.mini-btn.solid{background:var(--btn);color:var(--btnInk);border-color:var(--btn)}
.files{width:100%;border-collapse:collapse;font-size:15px;min-width:560px}
.files th,.files td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line)}
.files th{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink2);font-weight:600}
.files tr:last-child td{border-bottom:0}
.p-scroll{overflow-x:auto;background:var(--surface);border:1px solid var(--line);border-radius:18px}
.pd{background:var(--night);color:var(--nightInk);border-radius:20px;padding:22px;display:grid;gap:14px}
.pd .top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;font-size:13px;color:var(--lilac)}
.pd .kpis{grid-template-columns:repeat(4,1fr)}
.pd .kpi{background:var(--night2)}
.pd .chart,.pd .board,.pd .plat{background:var(--night2)}
.pd .plat{border-radius:12px;padding:14px;display:grid;gap:6px;font-size:14px;color:var(--lilac)}
.pd .plat b{font-family:var(--display);font-size:17px;color:var(--paper)}
.pd .plat span{color:var(--paper)}
.pd .grid2{display:grid;grid-template-columns:1.4fr 1fr;gap:12px}
.pd .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.recos{display:grid;gap:10px}
.recos article{background:var(--night2);border-radius:12px;padding:14px 16px;display:grid;gap:8px}
.recos p{font-size:15px;color:var(--paper)}
.recos small{font-size:13px;color:var(--lilac)}
.recos .mini-btn{justify-self:start;border-color:var(--lilac);color:var(--paper)}
.lock{border:1.5px dashed var(--pathline);border-radius:18px;padding:28px;display:grid;gap:12px;justify-items:start}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--plum);color:var(--paper);padding:12px 18px;border-radius:12px;font-size:14.5px;box-shadow:0 12px 30px rgba(0,0,0,.3);opacity:0;pointer-events:none;transition:opacity .2s;max-width:calc(100vw - 32px);z-index:50}
.toast.show{opacity:1}
@media (max-width:900px){
  .p-grid{grid-template-columns:1fr;gap:18px;padding-top:16px}
  .p-tabs{position:static;display:flex;overflow-x:auto;gap:6px;padding-bottom:4px}
  .p-tabs button{white-space:nowrap}
  .p-row2,.p-row3,.pd .grid2,.pd .grid3{grid-template-columns:1fr}
  .pd .kpis{grid-template-columns:1fr 1fr}
  .p-app{display:none}
}
@media (max-width:560px){.stages li{font-size:12px}.p-who{font-size:12.5px}.p-banner .btn{margin-left:0}}
/* ===== v3 (Joe, 5 Oct 2026): USP funnel, plans and prices, free health check ===== */
.ctas .btn-ghost{color:var(--nightInk)}
/* Creative-to-Customer Measurement */
.usp{padding-block:88px 72px}
.funnel{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.funnel li{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:20px 18px 22px;display:grid;gap:10px;align-content:start}
.funnel li:not(:last-child)::after{content:"";position:absolute;right:-14px;top:32px;width:14px;height:2px;background:var(--pathline)}
.funnel .n{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2)}
.funnel h3{font-size:26px}
.funnel .bar{display:block;height:10px;border-radius:5px;background:var(--dot)}
.funnel li:last-child .bar{background:var(--ink)}
.funnel p{color:var(--ink2);font-size:15px;line-height:1.45}
.centerline{display:grid;grid-template-columns:auto 1fr;gap:10px 24px;align-items:center;margin-top:22px;padding:18px 26px;border:1px dashed var(--pathline);border-radius:var(--r)}
.centerline .k{font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2);white-space:nowrap}
.centerline p{color:var(--ink2);font-size:16px}.centerline p b{color:var(--ink)}
/* plans and prices */
.pgroup{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 24px;margin-bottom:18px}
.pgroup h3{font-size:26px}
.pgroup p{color:var(--ink2);font-size:15px}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.plan{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:28px;display:grid;gap:14px;align-content:start;position:relative}
.plan.pick{box-shadow:inset 0 0 0 2px var(--ink);border-color:var(--ink)}
.plan .k{display:flex;align-items:center;gap:10px;font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2)}
.plan .k::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--dot)}
.price{font-family:var(--display);font-weight:700;font-size:42px;line-height:1;font-variant-numeric:tabular-nums}
.price small{font:500 15px var(--body);color:var(--ink2);margin-left:4px}
.plan .meta{font-size:14.5px;color:var(--ink2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:10px 0;display:grid;gap:2px}
.plan .meta b{color:var(--ink);font-weight:600}
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:15px;color:var(--ink2)}
.ticks li{display:grid;grid-template-columns:14px 1fr;gap:10px;align-items:start}
.ticks li::before{content:"";width:8px;height:8px;margin-top:8px;border-radius:50%;background:var(--dot)}
.badge{justify-self:start;font-size:12.5px;font-weight:600;border-radius:12px;padding:5px 12px;background:var(--ink);color:var(--bg)}
.scale{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 24px;margin-top:18px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px 28px}
.scale p{color:var(--ink2);font-size:15.5px}.scale p b{color:var(--ink)}
.notes{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:18px}
.notes div{border:1px dashed var(--pathline);border-radius:16px;padding:16px 20px;font-size:15px;color:var(--ink2)}
.notes b{display:block;color:var(--ink);font-family:var(--display);font-size:18px;margin-bottom:2px}
.lists{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:56px}
.lists .card{padding:26px;gap:12px}
.lists .card h3{font-size:24px}
.lists .card > p{font-size:14.5px}
.plist{list-style:none;margin:0;padding:0;display:grid}
.plist li{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:9px 0;border-top:1px solid var(--line);font-size:15px;color:var(--ink)}
.plist li:first-child{border-top:0}
.plist b{white-space:nowrap;font-weight:600;font-variant-numeric:tabular-nums}
.plist span{flex:1;min-width:0}
.plist small{display:block;color:var(--ink2);font-size:13px;font-weight:400}
.plist b{text-align:right}
.plist b small{font-weight:500}
.lists .card{min-width:0}
.pfoot{margin-top:22px;color:var(--ink2);font-size:14.5px;max-width:80ch}
/* free health check */
.hc{border-radius:28px;padding:56px;display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center;position:relative;overflow:hidden}
.hc::after{content:"";position:absolute;left:-90px;bottom:-90px;width:320px;height:320px;border-radius:50%;background:radial-gradient(closest-side,rgba(156,127,227,.24),transparent);pointer-events:none}
.hc h2{font-size:clamp(30px,4vw,48px)}
.hc .sec-head{margin:0;position:relative;z-index:1}
.areas{list-style:none;margin:0;padding:0;display:grid;gap:10px;position:relative;z-index:1}
.areas li{display:grid;grid-template-columns:30px 1fr;gap:12px;align-items:center;background:var(--night2);border:1px solid var(--night3);border-radius:14px;padding:12px 16px;font-size:15.5px}
.areas li span{font-family:var(--display);font-weight:700;color:var(--jac)}
.hc .act{display:grid;gap:12px;justify-items:start;margin-top:8px}
.hc .terms{font-size:14px;color:var(--nightMuted)}
.book .ctas{margin-top:0}
.book .ctas .btn-ghost{color:var(--nightInk)}
@media (max-width:1000px){
  .funnel{grid-template-columns:1fr 1fr 1fr}
  .funnel li::after{display:none}
  .plans,.lists,.notes,.hc{grid-template-columns:1fr}
  .centerline{grid-template-columns:1fr}
}
@media (max-width:700px){
  .funnel{grid-template-columns:1fr;gap:10px}
  .funnel li{grid-template-columns:110px 1fr;gap:6px 16px;padding:16px 18px}
  .funnel .n{grid-column:1/-1}
  .funnel h3{font-size:22px;grid-row:span 2}
  .funnel .bar{align-self:center}
  .hc{padding:40px 24px}
  .usp{padding-block:64px 56px}
  .scale{padding:18px 22px}
  .price{font-size:38px}
}
/* sign-in / register pop-up */
.auth{border:0;padding:0;border-radius:24px;width:min(460px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;overscroll-behavior:contain;background:var(--surface);color:var(--ink);box-shadow:0 40px 90px rgba(20,13,30,.45)}
.auth::backdrop{background:rgba(20,13,30,.62);backdrop-filter:blur(3px)}
.auth-in{padding:32px 30px 26px;display:grid;gap:14px;position:relative}
.auth h2{font-size:30px}
.auth-x{position:absolute;right:14px;top:12px;width:40px;height:40px;border-radius:50%;border:0;background:transparent;color:var(--ink2);font-size:26px;line-height:1;cursor:pointer}
.auth-x:hover{background:var(--panel)}
.auth-tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;background:var(--panel);border-radius:999px;padding:4px}
.auth-tabs button{font:600 14.5px var(--body);border:0;border-radius:999px;padding:10px 12px;background:transparent;color:var(--ink2);cursor:pointer}
.auth-tabs button[aria-selected="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(36,26,51,.15)}
.auth-form{display:grid;gap:8px}
.auth-form label{font-weight:600;font-size:15px;margin-top:4px}
.auth-form label .small{font-weight:400;color:var(--ink2)}
.auth-form input[type=email],.auth-form input[type=text],.auth-form input[type=password],#vfEmailIn{font:16px var(--body);padding:13px 16px;border-radius:12px;border:1.5px solid var(--line);background:var(--bg);color:var(--ink);width:100%}
.auth-form input[aria-invalid="true"]{border-color:#B3261E}
.pw{position:relative}.pw input{padding-right:76px!important}
.pw-t{position:absolute;right:8px;top:50%;transform:translateY(-50%);font:600 13.5px var(--body);border:0;background:transparent;color:var(--ink);padding:8px 10px;cursor:pointer}
.agree{display:grid!important;grid-template-columns:20px 1fr;gap:10px;align-items:start;font-weight:400!important;color:var(--ink2);margin-top:8px!important}
.agree input{width:18px;height:18px;margin-top:3px;accent-color:var(--plum)}
.auth-form .btn{margin-top:6px;width:100%}
.auth-msg{min-height:1.4em;color:#B3261E}
.auth-msg:empty{min-height:0}
.auth-ok{background:var(--panel);border-left:4px solid var(--dot);border-radius:10px;padding:10px 14px;font-size:15px;color:var(--ink)}
.auth-lead{font-size:16px;color:var(--ink)}
.auth-steps{margin:0;padding-left:20px;display:grid;gap:6px;color:var(--ink2);font-size:15px}
.auth-steps b,.auth-lead b{color:var(--ink)}
.auth-tip{background:var(--bg);border:1px dashed var(--pathline);border-radius:12px;padding:10px 12px}
.mailart{justify-self:center;width:84px;height:60px;border-radius:12px;background:var(--plum);position:relative;margin:4px 0 6px;overflow:hidden}
.mailart::before{content:"";position:absolute;left:-6px;right:-6px;top:-34px;height:70px;border-bottom:3px solid var(--jac);transform:rotate(0);border-radius:0 0 50% 50%}
.mailart span{position:absolute;right:-6px;top:-6px;width:22px;height:22px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 4px var(--surface)}
.tfaqr{justify-self:start;background:#fff;border-radius:12px;padding:8px;border:1px solid var(--line)}.tfaqr svg{display:block;width:180px;height:180px}
.codein{font:600 26px/1 ui-monospace,Menlo,Consolas,monospace!important;letter-spacing:.35em;text-align:center}
#verifyPanel .btn,#verifyPanel .btn-ghost{width:100%;color:var(--ink)}
.auth-note{color:var(--ink2);border-top:1px solid var(--line);padding-top:12px}
.auth .small{color:var(--ink2)}
@media (max-width:560px){.auth-in{padding:28px 20px 22px}.auth h2{font-size:26px}}
@media (prefers-reduced-motion:reduce){.btn,.btn .arr{transition:none}.btn:hover{transform:none}.btn:hover .arr{transform:none}}

/* ===== v35 (6 Oct 2026): gateway + /campaigns + /strategy (spec 09 v1.2, W-00–W-29) ===== */
.skip{position:absolute;left:-999px;top:8px;z-index:60;background:var(--lime);color:var(--plum);padding:10px 14px;border-radius:10px;font-weight:600}
.skip:focus{left:12px}
.switch{display:flex;gap:4px;background:var(--night2);border:1px solid var(--nightLine);border-radius:999px;padding:3px}
.switch a{font-size:14px;font-weight:600;color:var(--nightMuted);text-decoration:none;padding:6px 12px;border-radius:999px}
.switch a[aria-current="page"]{background:var(--paper);color:var(--plum)}
.switch a:hover{color:var(--nightInk)}.switch a[aria-current="page"]:hover{color:var(--plum)}
.nav .logo{margin-right:0}
.nav ul{margin-left:auto}
.switchnote{margin:0;background:var(--panel);border-bottom:1px solid var(--line);font-size:14.5px;color:var(--ink2)}
.switchnote .wrap{display:block;padding-block:10px}
.switchnote a{color:var(--ink);font-weight:600}
/* gateway */
.gw-top{border-bottom:1px solid var(--nightLine)}
.gw-top .wrap{display:flex;align-items:center;justify-content:space-between;min-height:68px}
.gw-top .login{color:var(--nightMuted);text-decoration:none;font-size:15px;font-weight:600;border:1.5px solid var(--nightLine);border-radius:999px;padding:9px 16px}
.gw-top .login:hover{color:var(--nightInk)}
.gw{padding-block:72px 64px;min-height:calc(100vh - 68px - 120px);position:relative;overflow:hidden}
.gw::before{content:"";position:absolute;inset:auto -10% -40% 40%;height:80%;background:radial-gradient(closest-side,rgba(156,127,227,.22),transparent);pointer-events:none}
.gw .wrap{position:relative}
.gw-head{max-width:820px;display:grid;gap:18px;margin-bottom:44px}
.gw-head h1{font-size:clamp(40px,5.6vw,70px);letter-spacing:-.015em}
.gw-head h1 .hl{color:var(--jac)}
.gw-cards{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.gw-card{display:grid;gap:14px;align-content:start;background:var(--night2);border:1.5px solid var(--night3);border-radius:24px;padding:32px;color:var(--nightInk);text-decoration:none;transition:border-color .15s,transform .15s}
.gw-card:hover{border-color:var(--jac);transform:translateY(-3px)}
.gw-card .k{font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--jac)}
.gw-card h2{font-size:clamp(28px,3.2vw,40px)}
.gw-card p{color:var(--nightMuted);font-size:17px}
.gw-go{justify-self:start;margin-top:8px;display:inline-flex;gap:10px;align-items:center;background:var(--lime);color:var(--plum);font-weight:600;padding:13px 22px;border-radius:999px}
.gw-card:hover .arr{transform:translateX(3px)}.gw-go .arr{transition:transform .15s}
.gw-hc{margin-top:30px;font-size:17px;color:var(--nightMuted)}
.gw-hc .textlink{color:var(--nightInk)}
.gw-foot{border-top:1px solid var(--nightLine);padding-block:26px}
.gw-foot .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;font-size:15px}
.gw-foot .muted{color:var(--nightMuted)}
/* campaigns */
.steps4{list-style:none;margin:0 0 32px;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.steps4.steps3{grid-template-columns:repeat(3,1fr)}
.steps4 li{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:24px;display:grid;gap:10px;align-content:start}
.steps4 .n{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--plum);color:var(--paper);font-family:var(--display);font-weight:700}
.steps4 p{color:var(--ink2);font-size:15.5px}
#how .ctas,#features .ctas{margin-top:0}
#how .btn-ghost{color:var(--ink)}
.ctrl{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.ctrl li{background:var(--night2);border:1px solid var(--night3);border-radius:18px;padding:20px;display:grid;gap:8px;align-content:start}
.ctrl h3{font-size:19px}.ctrl p{color:var(--nightMuted);font-size:15px}
.fgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.fgrid .card{padding:26px;gap:10px}.fgrid .card h3{font-size:22px}
#features .featcta{border-top-color:var(--line)}
#features .featcta p{color:var(--ink)}
.helper{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:22px 26px;display:grid;grid-template-columns:1fr 1fr;gap:12px 28px;margin-bottom:22px}
.helper .k,.helper .pick-out{grid-column:1/-1}
.helper .k{font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2);margin:0}
.helper fieldset{border:0;margin:0;padding:0;display:grid;gap:6px}
.helper legend{font-weight:600;margin-bottom:6px}
.helper label{display:flex;gap:10px;align-items:center;font-size:15.5px;color:var(--ink2);cursor:pointer}
.helper input{accent-color:var(--plum);width:18px;height:18px}
.pick-out{min-height:1.5em;font-size:16px}.pick-out:empty{min-height:0}
.plan .btn{justify-self:stretch;margin-top:4px}
.plan .textlink{justify-self:center}
.scale.plan{display:flex}
.scale .btn{color:var(--ink)}
.who small{display:block;margin-top:4px;font-size:13px;font-weight:600;color:var(--ink)}
.xsell{padding-block:0 72px}
.xsell .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px;border:1px dashed var(--pathline);border-radius:var(--r);padding-block:22px;padding-inline:28px;max-width:1140px}
.xsell p{font-family:var(--display);font-weight:700;font-size:clamp(20px,2.4vw,26px)}
.xsell .btn{color:var(--ink)}
/* strategy */
.st-path{list-style:none;margin:0;padding:0;display:grid;gap:10px;position:relative}
.st-path::before{content:"";position:absolute;left:15px;top:20px;bottom:20px;width:2px;background:var(--night3)}
.st-path li{position:relative;display:grid;grid-template-columns:32px 1fr;gap:4px 12px;background:var(--night2);border:1px solid var(--night3);border-radius:14px;padding:14px 16px 14px 0}
.st-path li::before{content:"";grid-row:span 2;justify-self:center;align-self:center;width:12px;height:12px;border-radius:50%;background:var(--jac);box-shadow:0 0 0 4px var(--night2)}
.st-path li:last-child::before{background:var(--lime)}
.st-path b{font-family:var(--display);font-size:21px}.st-path span{font-size:14.5px;color:var(--nightMuted)}
.diag{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.diag .card{padding:30px}
.st-offers{grid-template-columns:1fr 1fr;display:grid;gap:12px}
.st-offers details{background:var(--surface)}
.st-offers details[open]{grid-column:span 1}
.st-offers .btn{margin-top:14px;color:var(--ink)}
.adv{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.adv .tile .btn{justify-self:start}
.adv .price{color:var(--paper)}.adv .price small{color:var(--nightMuted)}
.ws{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;align-items:start}
.ws-opt{padding:24px;gap:10px}
.ws-opt h3{font-size:21px}
.ws-opt .price{font-size:30px}
.ws-opt label:not(.agree),.enq-form > label,.enq-form fieldset label{display:grid;gap:5px;font-weight:600;font-size:14.5px}
.ws-opt input[type=text],.ws-opt input[type=email],.ws-opt input[type=number],.ws-opt select,.enq-form input[type=text],.enq-form input[type=email],.enq-form input[type=tel],.enq-form select,.enq-form textarea{font:15.5px var(--body);font-weight:400;padding:11px 14px;border-radius:12px;border:1.5px solid var(--line);background:var(--bg);color:var(--ink);width:100%}
.ws-opt .btn{width:100%;margin-top:4px}.ws-opt .btn-ghost{color:var(--ink)}
.ws-names{display:grid;gap:8px}
.ws-row{display:grid;gap:6px;border-top:1px solid var(--line);padding-top:8px}
.ws-opt .agree,.enq-form .agree{display:grid;grid-template-columns:20px 1fr;gap:10px;align-items:start;font-size:14px;color:var(--ink2);font-weight:400}
.ws-opt .agree input,.enq-form .agree input{width:18px;height:18px;margin-top:2px;accent-color:var(--plum)}
.enq{display:grid;grid-template-columns:.8fr 1.2fr;gap:36px;padding:34px}
.enq-form{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px}
.enq-form fieldset{grid-column:1/-1;border:1px solid var(--line);border-radius:14px;padding:12px 16px;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.enq-form fieldset legend{font-weight:600;padding:0 6px}
.enq-form fieldset label{display:flex!important;flex-direction:row;gap:10px;align-items:center;font-weight:400}
.enq-form fieldset input{width:18px;height:18px;accent-color:var(--plum)}
.enq-form .full{grid-column:1/-1}
.enq-form .btn{justify-self:start}
.enq-thanks{display:grid;gap:12px;align-content:start}
.enq-thanks:focus{outline:none}
.hc-hero .areas li{background:var(--night2)}
.xsell2{margin-top:8px;color:var(--ink2)}
.xsell2 .textlink{color:var(--ink)}
/* footer */
footer .wrap{display:grid!important;grid-template-columns:1.2fr 1fr 1fr;gap:24px}
.fcol{display:grid;gap:8px;align-content:start}
.fcol .logo{font-size:22px;color:var(--nightInk)}
.fcol a{color:var(--nightInk);text-decoration:none}.fcol a:hover{text-decoration:underline}
footer .muted{color:var(--nightMuted)}
.mcta .btn + .btn{background:transparent;color:var(--nightInk);border-color:var(--nightLine)}
.mcta{gap:10px}
@media (max-width:1100px){.nav ul{display:none}.switch a{padding:6px 10px}}
@media (max-width:1000px){
  .gw-cards,.diag,.adv,.enq,.st-offers{grid-template-columns:1fr}
  .steps4,.ctrl{grid-template-columns:1fr 1fr}
  .fgrid,.ws{grid-template-columns:1fr 1fr}
  footer .wrap{grid-template-columns:1fr 1fr}
}
@media (max-width:700px){
  .gw{padding-block:44px 48px}
  .gw-card{padding:24px}
  .steps4,.steps4.steps3,.ctrl,.fgrid,.ws,.helper,.enq-form,.enq-form fieldset{grid-template-columns:1fr}
  footer .wrap{grid-template-columns:1fr}
  .nav .wrap{gap:10px}
  .nav .btn-primary{display:none}
  .switch a{font-size:13px;padding:6px 9px}
  .enq{padding:22px}
  .scale.plan{flex-direction:column;align-items:flex-start}
}
@media (max-width:380px){.nav .logo{font-size:19px}}
@media (max-width:440px){
  .nav .wrap{gap:8px;padding-inline:14px}
  .nav .logo{font-size:18px}
  .switch{padding:2px}.switch a{font-size:12.5px;padding:6px 8px}
  .menubtn{padding:8px 12px;font-size:13.5px}
}
.adv .tile .price{font-family:var(--display);font-size:30px;line-height:1.1}

/* Register button next to Client login (Joe, 6 Oct) */
.nav .reg,.gw-top .reg{font-size:14.5px;font-weight:600;color:var(--nightInk);text-decoration:none;white-space:nowrap;border:1.5px solid var(--nightLine);border-radius:999px;padding:8px 14px}
.nav .reg:hover,.gw-top .reg:hover{border-color:var(--jac)}
.gw-acts{display:flex;gap:10px;align-items:center}
.gw-top .reg{background:var(--lime);color:var(--plum);border-color:var(--lime)}
@media (max-width:700px){.nav .reg{display:none}}
@media (max-width:420px){.gw-top .login,.gw-top .reg{padding:8px 12px;font-size:14px}}
/* three-section switcher: on phones it gets its own row */
@media (max-width:700px){
  .nav .wrap{flex-wrap:wrap;padding-block:8px}
  .nav .switch{order:3;width:100%;justify-content:space-between}
  .nav .switch a{flex:1;text-align:center}
  .nav .menubtn{margin-left:auto}
}
.bgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.bgrid .card{padding:24px;gap:10px}
.bgrid .price{font-size:30px}
.bgrid .btn{justify-self:start;color:var(--ink)}
@media (max-width:1000px){.bgrid{grid-template-columns:1fr 1fr}}
@media (max-width:700px){.bgrid{grid-template-columns:1fr}}
.gw-cards{grid-template-columns:repeat(3,1fr)}
@media (max-width:1000px){.gw-cards{grid-template-columns:1fr}}
footer .legal{font-size:13px}

/* ===== Legal pages: /terms and /privacy (CLO gate, 6 Oct 2026) ===== */
.legal-hero{padding-block:64px 56px}
.legal-hero .wrap{grid-template-columns:1fr}
.legal-hero h1{margin:14px 0 16px}
section.legal{padding-block:56px 80px}
.legal-doc{max-width:780px;font-size:17px;line-height:1.65}
.legal-doc h2{font-size:clamp(22px,2.6vw,28px);margin:44px 0 12px;scroll-margin-top:90px}
.legal-doc p,.legal-doc ul,.legal-doc ol{margin:0 0 14px}
.legal-doc ul,.legal-doc ol{padding-left:22px}
.legal-doc li{margin-bottom:6px}
.legal-ol{list-style:lower-alpha}
.legal-doc a{text-underline-offset:3px}
.legal-card{background:var(--panel);border-radius:14px;padding:16px 18px;margin-bottom:8px}
.legal-card p:last-child{margin-bottom:0}
.legal-warn{border-left:4px solid var(--jac);padding-left:12px}
.legal-table{overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:var(--surface);margin-bottom:14px}
.legal-table:focus-visible{outline:2px solid var(--jac);outline-offset:2px}
.legal-table table{border-collapse:collapse;width:100%;min-width:640px;font-size:15px}
.legal-table table.kv{min-width:0}
.legal-table th,.legal-table td{text-align:left;vertical-align:top;padding:12px 14px;border-bottom:1px solid var(--line)}
.legal-table thead th,.legal-table .kv th{background:var(--panel);font-weight:600}
.legal-table .kv th{width:38%}
.legal-table tr:last-child th,.legal-table tr:last-child td{border-bottom:0}
footer .flinks a,footer .linkbtn{color:var(--nightInk)}
@media (max-width:560px){.legal-table .kv th,.legal-table .kv td{display:block;width:auto}.legal-table .kv th{border-bottom:0;padding-bottom:4px}}
@media print{.nav,.switchnote,footer,.mcta,.noprint,.cookie-bar,dialog{display:none!important}.legal-hero{padding:0 0 12px;background:none;color:#000}.legal-hero .muted,.legal-hero .lead{color:#333}section.legal{padding:0}.legal-doc{max-width:none;font-size:11pt}}

/* ===== Cookie choice bar: shows only once an analytics or ad tag ID is set in site.js ===== */
.cookie-bar{position:fixed;left:16px;right:16px;bottom:16px;z-index:60;max-width:640px;margin-inline:auto;background:var(--night);color:var(--nightInk);border:1px solid var(--nightLine);border-radius:18px;padding:18px 20px;box-shadow:0 16px 48px rgba(20,13,30,.35);display:grid;gap:12px}
.cookie-bar[hidden]{display:none}
.cookie-bar h2{font-size:20px}
.cookie-bar p{margin:0;font-size:15px;color:var(--nightMuted)}
.cookie-bar a{color:var(--nightInk)}
.cookie-bar .cb-opts{display:grid;gap:8px;font-size:15px}
.cookie-bar .cb-opts label{display:flex;gap:10px;align-items:flex-start}
.cookie-bar .cb-btns{display:flex;flex-wrap:wrap;gap:10px}
.cookie-bar .btn{padding:10px 18px;font-size:15px}
.cookie-bar .btn-equal{background:var(--paper);color:var(--plum)}
.cookie-bar .btn-primary{background:var(--lime);color:var(--plum)}
.cookie-bar .linkbtn{color:var(--nightInk)}

/* ===== Header v2 (Joe, 7 Oct 2026: clean, user-friendly tabs once a section is chosen) =====
   Row 1: logo · section switcher · account + one main action.  Row 2: this page's sections, one line, current one marked.
   Tablet (≤1000): account links move into Menu.  Phone (≤700): switcher gets its own row; page sections live in Menu. */
html{scroll-padding-top:124px}
.nav .navbar{display:flex;align-items:center;gap:20px;min-height:64px;flex-wrap:nowrap}
.nav .navbar .switch{margin-left:8px}
.nav-acts{display:flex;align-items:center;gap:14px;margin-left:auto}
.nav-acts .login{font-size:14.5px;font-weight:600;color:var(--nightMuted);text-decoration:none;white-space:nowrap}
.nav-acts .login:hover{color:var(--nightInk)}
.nav-acts .reg{padding:7px 14px}
.nav-acts .btn{padding:10px 18px;font-size:14.5px}
.subnav{border-top:1px solid var(--nightLine)}
.nav .subnav .wrap{display:block;min-height:0;padding-block:0}
.nav .subnav ul{display:flex;gap:4px;margin:0;padding:0;list-style:none;overflow-x:auto;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 92%,transparent);mask-image:linear-gradient(90deg,#000 92%,transparent)}
.nav .subnav ul::-webkit-scrollbar{display:none}
.nav .subnav li{flex:none}
.nav .subnav a{display:block;white-space:nowrap;font-size:14px;font-weight:500;color:var(--nightMuted);text-decoration:none;padding:11px 12px 10px;border-bottom:2px solid transparent}
.nav .subnav li:first-child a{padding-left:0}
.nav .subnav a:hover{color:var(--nightInk)}
.nav .subnav a[aria-current]{color:var(--nightInk);border-bottom-color:var(--lime)}
.nav .subnav a:focus-visible{outline:2px solid var(--jac);outline-offset:-2px;border-radius:6px}
@media (max-width:1100px){.nav .subnav ul{display:flex}}
@media (max-width:1000px){
  .nav-acts .login,.nav-acts .reg{display:none}
  .nav-acts .menubtn{display:inline-block}
}
@media (max-width:700px){
  html{scroll-padding-top:116px}
  .subnav{display:none}
  .nav .navbar{flex-wrap:wrap;gap:10px;padding-block:8px;min-height:0}
  .nav .navbar .switch{order:3;width:100%;margin-left:0;justify-content:space-between}
  .nav .navbar .switch a{flex:1;text-align:center}
  .nav-acts .btn-primary{display:none}
}

/* ===== Interactive layer v1 (Joe, 7 Oct 2026): "the path" made interactive. Everything below is progressive:
   without JS, or with reduced motion, the pages read exactly as before. ===== */
/* scene canvas */
.pathfx{display:block;width:100%;height:100%;border-radius:16px}
.pathfx-card{height:190px;background:radial-gradient(120% 90% at 70% 0%,rgba(156,127,227,.16),transparent 60%),var(--night);border:1px solid var(--night3)}
/* campaigns hero list syncs with the scene */
.hstages li{transition:background-color .25s,box-shadow .25s}
.hstages li.is-on{background:var(--night2);box-shadow:inset 0 0 0 1px var(--jac)}
.hstages li.is-on::before{background:var(--lime);box-shadow:0 0 0 4px var(--night2),0 0 14px 2px rgba(198,241,107,.55)}
/* strategy and websites: a dot walks the steps */
.st-path[data-journey]::after{content:"";position:absolute;left:15px;top:20px;width:2px;height:calc((100% - 40px) * var(--p,0));background:linear-gradient(var(--jac),var(--lime));transition:height .7s cubic-bezier(.22,1,.36,1);pointer-events:none}
.st-path[data-journey] li{transition:border-color .3s,background-color .3s}
.st-path[data-journey] li.is-on{border-color:var(--jac)}
.st-path[data-journey] li.is-now{background:color-mix(in srgb,var(--night2) 70%,var(--jac) 12%)}
.st-path[data-journey] li.is-now::before{box-shadow:0 0 0 4px var(--night2),0 0 14px 3px rgba(156,127,227,.6)}
/* reading progress: the path draws along the header as you scroll */
.pathbar{position:absolute;left:0;right:0;bottom:-1px;height:2px;pointer-events:none}
.pathbar i{position:absolute;left:0;top:0;height:2px;width:100%;transform-origin:0 50%;transform:scaleX(var(--p,0));background:var(--jac)}
.pathbar b{position:absolute;top:-3px;left:calc(var(--p,0) * 100%);width:8px;height:8px;margin-left:-4px;border-radius:50%;background:var(--lime);opacity:calc(var(--p,0) * 40)}
.gw-top{position:relative}
/* gentle reveal as sections enter (only when JS runs and motion is welcome) */
html.rv-on .rv{opacity:0;transform:translateY(14px);transition:opacity .6s cubic-bezier(.22,1,.36,1) var(--rvd,0s),transform .6s cubic-bezier(.22,1,.36,1) var(--rvd,0s)}
html.rv-on .rv.in{opacity:1;transform:none}
/* buttons answer the press */
.btn:active,.gw-go:active{transform:scale(.97);transition-duration:.08s}
@media (prefers-reduced-motion:reduce){
  html.rv-on .rv{opacity:1;transform:none;transition:none}
  .st-path[data-journey]::after{display:none}
  .btn:active,.gw-go:active{transform:none}
}
@media print{html.rv-on .rv{opacity:1!important;transform:none!important}.pathbar,.pathfx{display:none}}

/* ===== Interactive layer v2 (Joe, 7 Oct 2026): living ampersand, path quiz, Follow the rand, funnel self-check, seat builder ===== */
/* living ampersand: a lime dot opens into the "&" once per visit; it glows on hover */
.logo .amp{display:inline-block;position:relative}
html.amp-intro .logo .amp{animation:ampIn .9s cubic-bezier(.22,1,.36,1) .15s both}
html.amp-intro .logo .amp::after{content:"";position:absolute;left:50%;top:58%;width:.3em;height:.3em;margin:-.15em 0 0 -.15em;border-radius:50%;background:var(--lime);animation:ampDot .9s cubic-bezier(.22,1,.36,1) .15s both;pointer-events:none}
.logo:hover .amp,.logo:focus-visible .amp{animation:ampGlow 1.6s ease-in-out infinite}
@keyframes ampIn{0%,40%{opacity:0;transform:scale(.3)}100%{opacity:1;transform:none}}
@keyframes ampDot{0%{transform:scale(0);opacity:1}35%,55%{transform:scale(1);opacity:1}100%{transform:scale(2.6);opacity:0}}
@keyframes ampGlow{0%,100%{text-shadow:0 0 0 rgba(198,241,107,0)}50%{text-shadow:0 0 14px rgba(198,241,107,.7)}}

/* Follow the rand (campaigns): the progress line carries a rand coin from stop to stop */
.pathbar.rand b{top:-9px;width:20px;height:20px;margin-left:-10px;opacity:1;display:grid;place-items:center;font:700 10px/1 var(--body);color:var(--plum);background:var(--lilac);box-shadow:0 0 0 3px var(--night);transition:background-color .3s,transform .3s}
.pathbar.rand b.bought{background:var(--lime)}
.pathbar.rand b.back{background:var(--lime);transform:scale(1.15);box-shadow:0 0 0 3px var(--night),0 0 16px 4px rgba(198,241,107,.5)}
.rand-tip{position:absolute;top:14px;transform:translateX(-50%);white-space:nowrap;font:600 12.5px/1 var(--body);color:var(--plum);background:var(--paper);border-radius:999px;padding:6px 10px;box-shadow:0 6px 20px rgba(20,13,30,.3);opacity:0;transition:opacity .25s;pointer-events:none}
.rand-tip.show{opacity:1}
.rand-stop{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink2);margin:0}
.dark .rand-stop{color:var(--nightMuted)}
.rand-stop i{font-style:normal;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--lilac);color:var(--plum);font-size:10px;letter-spacing:0}
.rand-stop.is-buy i,.rand-stop.is-back i{background:var(--lime)}

/* funnel self-check (health check) */
.sc-grid{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:start}
.sc-form{display:grid;gap:12px}
.sc-row{display:grid;grid-template-columns:1fr auto;gap:8px 14px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:14px 16px}
.sc-k{grid-column:1/-1;font-size:15.5px;color:var(--ink2)}
.sc-k b{display:block;font-family:var(--display);font-size:20px;color:var(--ink)}
.sc-row input{width:100%;accent-color:var(--plum)}
.sc-row output{font-size:13.5px;font-weight:600;color:var(--ink);min-width:108px;text-align:right}
.sc-row.weak{border-color:var(--plum);box-shadow:inset 0 0 0 1px var(--plum)}
.sc-viz{position:sticky;top:130px;display:grid;gap:14px;background:var(--night);color:var(--nightInk);border-radius:22px;padding:22px}
.sc-flow{width:100%;height:auto;display:block}
.sc-band{transition:d .45s cubic-bezier(.22,1,.36,1)}
.sc-nodes text{font:600 13px var(--body);fill:var(--lilac)}
.sc-nodes text.weak{fill:var(--lime)}
.sc-nodes circle{fill:var(--night);stroke:var(--lilac);stroke-width:2}
.sc-nodes circle.weak{stroke:var(--lime);stroke-width:3}
.sc-leak circle{fill:var(--lime);animation:scDrip 1.8s ease-in infinite}
.sc-leak circle:nth-child(2){animation-delay:.6s}.sc-leak circle:nth-child(3){animation-delay:1.2s}
@keyframes scDrip{0%{transform:translateY(0);opacity:0}15%{opacity:.9}100%{transform:translateY(44px);opacity:0}}
.sc-out{margin:0;font-size:17px;color:var(--nightInk)}
.sc-out b{color:var(--lime)}
.sc-viz .ctas{margin-top:0;align-items:center}
.sc-viz .linkbtn{color:var(--nightMuted)}
.sc-note{margin:0;color:var(--nightMuted)}
@media (max-width:900px){.sc-grid{grid-template-columns:1fr}.sc-viz{position:static}}

/* workshop seat builder */
.ws-seatrow{display:flex;flex-wrap:wrap;gap:6px}
.ws-seatrow button{width:22px;height:22px;padding:0;border:1.5px solid var(--line);border-radius:6px 6px 9px 9px;background:transparent;cursor:pointer;transition:background-color .2s,border-color .2s,transform .2s}
.ws-seatrow button.on{background:var(--plum);border-color:var(--plum)}
.ws-seatrow button.pop{animation:seatPop .35s cubic-bezier(.34,1.56,.64,1)}
.ws-seatrow button:hover{border-color:var(--plum)}
@keyframes seatPop{0%{transform:scale(.6)}100%{transform:scale(1)}}

@media (prefers-reduced-motion:reduce){
  html.amp-intro .logo .amp,html.amp-intro .logo .amp::after,.logo:hover .amp{animation:none}
  html.amp-intro .logo .amp::after{display:none}
  .pq-step:not([hidden]),.ws-seatrow button.pop{animation:none}
  .sc-leak circle{animation:none;opacity:.8}
  .sc-band{transition:none}
}
/* keep the coin and its label inside the screen edges */
.pathbar.rand b{left:calc(10px + var(--p,0) * (100% - 20px))}
.nav,.gw-top{overflow-x:clip}
.sc-viz .btn-primary{background:var(--lime);color:var(--plum)}
/* decorative glows must never let a section be scrolled sideways (focus or find-in-page) */
.gw,.hero{overflow:clip}

/* ===== Creative Evolution 02 (13 Oct 2026): THE LEAK =====
   The five stages are one column of words that the visitor presses. Rules (see site.js §1):
   pressed = a leak: the word cracks and opens in place. Every leak above a word shrinks and fades it and thins the
   flow line (--lk-s, set by JS). "I can't tell" turns the column to outlines. Lime stays for CTAs, the ampersand and
   the single end dot (a customer who comes back). Namespaced lk- (instrument) and tp- (shared home pieces). */
@view-transition{navigation:auto}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}
:root{interpolate-size:allow-keywords}
/* home top bar: a plain services nav stays available */
.gw-top .wrap{gap:22px}
.gw-nav{display:flex;gap:24px;margin-left:auto}
.gw-nav a{color:var(--nightMuted);text-decoration:none;font-size:15px;font-weight:500;padding:6px 0}
.gw-nav a:hover{color:var(--nightInk)}
@media (max-width:700px){
  .gw-top .wrap{flex-wrap:wrap;padding-block:10px;gap:10px 16px}
  .gw-nav{order:3;width:100%;margin-left:0;justify-content:space-between;border-top:1px solid var(--nightLine);padding-top:8px}
}
.tp-def{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline;margin:0 0 18px}
.tp-word{font-size:14px;color:var(--nightMuted)}
.tp-word b{font-family:var(--display);font-size:17px;color:var(--nightInk)}
/* the instrument */
.lk{padding-block:44px 88px;position:relative;overflow:clip}
.lk-intro{max-width:980px}
.lk-h1{font-size:clamp(28px,3.4vw,50px);line-height:1.08;letter-spacing:-.015em}
.lk-h1 em{font-style:italic;color:var(--jac)}
.lk-how{margin-top:14px;color:var(--nightMuted);font-size:16px}
.lk-stack{list-style:none;margin:34px 0 0;padding:0 0 0 clamp(34px,5vw,64px);position:relative}
.lk-row{--lk-s:1;position:relative}
/* the flow line: one segment per stage; its width is the flow that reaches that stage */
.lk-row::before{content:"";position:absolute;left:calc(clamp(34px,5vw,64px) * -1 + 12px);top:0;bottom:0;width:calc(5px * var(--lk-s));min-width:1.5px;background:var(--jac);transition:width .6s cubic-bezier(.22,1,.36,1),opacity .6s}
.lk-row.is-starved::before{background:repeating-linear-gradient(var(--jac) 0 12px,transparent 12px 20px);opacity:.75}
.lk-row.is-leak::before{background:linear-gradient(var(--jac) 0 46px,transparent 46px)}
.lk-row.is-leak.is-starved::before{background:linear-gradient(var(--jac) 0 46px,transparent 46px);opacity:.75}
.lk-row.is-leak::after{content:"";position:absolute;left:calc(clamp(34px,5vw,64px) * -1 + 10px);top:52px;width:9px;height:9px;border-radius:50%;background:var(--jac);animation:lkDrip 1.4s ease-in 3 both}
@keyframes lkDrip{0%{transform:translateY(0);opacity:0}20%{opacity:1}100%{transform:translateY(54px);opacity:0}}
.lk details{border-top:1px solid var(--nightLine)}
.lk-row:last-child details{border-bottom:1px solid var(--nightLine)}
.lk summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:clamp(32px,4vw,52px) minmax(0,auto) minmax(0,1fr) 28px;align-items:center;gap:0 18px;padding:6px 0;border-radius:6px}
.lk summary::-webkit-details-marker{display:none}
.lk summary::after{content:"+";font:500 26px/1 var(--body);color:var(--nightMuted);justify-self:end;transition:transform .3s}
.lk details[open] summary::after{content:"×";color:var(--nightInk)}
.lk summary:focus-visible{outline:3px solid var(--jac);outline-offset:4px}
.lk-n{font:700 13px var(--body);letter-spacing:.12em;color:var(--nightMuted)}
.lk-w{display:block;font-family:var(--display);font-weight:700;font-size:calc(clamp(54px,10.6vw,164px) * var(--lk-s));line-height:.92;letter-spacing:-.035em;color:var(--nightInk);opacity:calc(.3 + .7 * var(--lk-s));white-space:nowrap;transition:font-size .6s cubic-bezier(.22,1,.36,1),opacity .6s,color .3s}
.lk-a,.lk-b{display:inline-block;transition:transform .55s cubic-bezier(.34,1.56,.64,1),color .3s}
.lk summary:hover .lk-w{color:#fff}
.lk summary:hover .lk-b{transform:translate(.015em,.03em) rotate(1deg)}
.lk-row.is-leak .lk-b{transform:translate(.05em,.17em) rotate(5deg);color:var(--jac)}
.lk-q{justify-self:end;text-align:right;max-width:24ch;font-size:15.5px;line-height:1.35;color:var(--nightMuted)}
.lk-row.is-leak .lk-q{color:var(--nightInk)}
/* what opens in place */
.lk details::details-content{block-size:0;overflow:clip;transition:block-size .5s cubic-bezier(.22,1,.36,1),content-visibility .5s allow-discrete}
.lk details[open]::details-content{block-size:auto}
.lk-body{display:grid;gap:18px;padding:14px 0 40px clamp(32px,4vw,52px);margin-left:18px}
.lk-t{font-family:var(--display);font-style:italic;font-weight:600;font-size:clamp(26px,3vw,40px);line-height:1.1}
.lk-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 32px;margin:0}
.lk-cols dt{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--jac);margin-bottom:6px}
.lk-cols dd{margin:0;color:var(--nightMuted);font-size:16px}
.lk-dest{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;align-items:baseline;gap:6px 18px;padding:16px 20px;border:1.5px solid var(--jac);border-radius:6px;color:var(--nightInk);text-decoration:none;transition:background-color .2s}
.lk-dest:hover{background:rgba(156,127,227,.13)}
.lk-dk{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--jac)}
.lk-dest b{font-family:var(--display);font-size:21px}
.lk-dest span:not(.lk-dk):not(.arr){color:var(--nightMuted);font-size:15.5px}
.lk-dest .arr{transition:transform .2s}.lk-dest:hover .arr{transform:translateX(4px)}
/* end of the line, "can't tell" and reset */
.lk-foot{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;padding:22px 0 0 clamp(34px,5vw,64px);position:relative}
.lk-end{position:absolute;left:7px;top:-4px;width:16px;height:16px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 5px rgba(198,241,107,.18);transition:opacity .6s,transform .6s}
.lk.is-marked .lk-end{opacity:.3;transform:scale(.7)}
.lk-blind{font:600 16px var(--body);color:var(--nightInk);background:transparent;border:1.5px solid var(--nightLine);border-radius:6px;padding:12px 18px;cursor:pointer}
.lk-blind:hover{border-color:var(--lilac)}
.lk-blind[aria-pressed="true"]{border-color:var(--lilac);background:rgba(201,192,216,.1)}
.lk-blind[aria-pressed="true"]::before{content:"✓ "}
.lk-reset{color:var(--nightMuted)}
.lk.is-blind .lk-w{color:transparent;-webkit-text-stroke:1.5px var(--lilac);opacity:.9}
.lk.is-blind .lk-row::before{background:repeating-linear-gradient(var(--lilac) 0 4px,transparent 4px 14px);opacity:.5}
.lk.is-blind .lk-end{opacity:0}
.lk-blindbody{display:grid;gap:14px;max-width:760px;margin:26px 0 0 clamp(34px,5vw,64px)}
.lk-blindbody:focus{outline:none}
.lk-blindbody > p:not(.lk-t){color:var(--nightMuted)}
/* your route */
.lk-route{margin:44px 0 0 clamp(34px,5vw,64px);padding-top:28px;border-top:2px solid var(--jac);display:grid;gap:16px}
.lk-rk{font-size:12.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--jac)}
.lk-rh{font-family:var(--display);font-weight:700;font-size:clamp(30px,4.2vw,58px);line-height:1.04;letter-spacing:-.02em}
.lk-rh em{font-style:italic;color:var(--jac)}
.lk-rl{list-style:none;margin:0;padding:0;display:grid}
.lk-rl a{display:grid;grid-template-columns:36px minmax(0,auto) minmax(0,1fr) auto;align-items:baseline;gap:4px 18px;padding:16px 0;border-bottom:1px solid var(--nightLine);color:var(--nightInk);text-decoration:none}
.lk-rl a:hover b{text-decoration:underline;text-underline-offset:4px}
.lk-rn{font-family:var(--display);font-weight:700;color:var(--jac)}
.lk-rl b{font-family:var(--display);font-size:22px}
.lk-rl span:not(.lk-rn):not(.arr){color:var(--nightMuted);font-size:15.5px}
.lk-route .ctas{margin-top:8px}
.lk-route .btn-ghost{color:var(--nightInk)}
@media (max-width:800px){
  .lk summary{grid-template-columns:30px minmax(0,1fr) 24px;gap:2px 12px;padding:10px 0}
  .lk-q{grid-column:2;grid-row:2;justify-self:start;text-align:left;max-width:none;font-size:14.5px}
  .lk summary::after{grid-column:3;grid-row:1}
  .lk-cols{grid-template-columns:minmax(0,1fr);gap:14px}
  .lk-row.is-leak .lk-b{transform:translate(.04em,.1em) rotate(4deg)}
  .lk-row.is-leak .lk-q{margin-top:.45em}
  .lk-body{padding-left:0;margin-left:0}
  .lk-dest,.lk-rl a{grid-template-columns:minmax(0,1fr) auto}
  .lk-dest .lk-dk,.lk-dest b,.lk-dest span:not(.arr),.lk-rl b,.lk-rl span:not(.arr){grid-column:1}
  .lk-dest .arr,.lk-rl .arr{grid-column:2;grid-row:1}
  .lk-rn{display:none}
  .lk-route,.lk-blindbody{margin-left:0}
}
@media (prefers-reduced-motion:reduce){
  .lk-w,.lk-a,.lk-b,.lk-row::before,.lk-end{transition:none}
  .lk-row.is-leak::after{animation:none;opacity:.8;transform:translateY(20px)}
  .lk details::details-content{transition:none}
}
/* the same five words, in miniature, on every service page */
.tp-side{display:grid;gap:14px}
.tp-fig{margin:0;min-width:0}
.tp-side figcaption{display:grid;gap:10px}
.lk-mini{display:grid;gap:8px;padding:18px 20px;border:1px solid var(--night3);border-radius:6px;background:var(--night2)}
.lk-mk{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--jac)}
.lk-mini ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px}
.lk-mini li{font-family:var(--display);font-weight:700;font-size:clamp(22px,2.4vw,32px);line-height:1.1;color:var(--nightMuted);opacity:.45}
.lk-mini li.is-fix{color:var(--nightInk);opacity:1;text-decoration:underline 2px var(--jac);text-underline-offset:6px}
.lk-mini li.is-you::after,.hstages li.is-you b::after{content:"your leak";display:block;font:700 10.5px var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--jac);text-decoration:none}
.hstages li.is-you b::after{display:inline-block;margin-left:10px;vertical-align:middle}
.hstages[data-fixes] li:not(.is-fix){opacity:.55}
.lk-you{font-size:15px;color:var(--nightMuted)}
.lk-you b{color:var(--nightInk)}
.lk-you .textlink{color:var(--nightInk)}
/* "or go straight to a service": an editorial index, each row showing the stages it repairs */
.tp-index{padding-block:96px}
.tp-ih{display:grid;gap:12px;margin-bottom:28px}
.tp-ih h2{font-size:clamp(36px,5.4vw,72px);letter-spacing:-.02em}
.tp-rows{list-style:none;margin:0;padding:0;border-top:1.5px solid var(--ink)}
.tp-row{position:relative;display:grid;grid-template-columns:64px minmax(0,1.05fr) minmax(0,1fr);grid-template-areas:"num name say" "num name price" "num name st";gap:8px 32px;align-items:start;padding:32px 0;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none}
.tp-row::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--ink);transform:scaleX(0);transform-origin:0 50%;transition:transform .5s cubic-bezier(.22,1,.36,1)}
.tp-row:hover::after,.tp-row:focus-visible::after{transform:scaleX(1)}
.tp-num{grid-area:num;font-family:var(--display);font-weight:700;font-size:26px;color:var(--ink2);line-height:1.2}
.tp-name{grid-area:name;font-family:var(--display);font-weight:700;font-size:clamp(28px,3.4vw,46px);line-height:1.02;letter-spacing:-.01em;transition:transform .35s cubic-bezier(.22,1,.36,1)}
.tp-name small{display:block;font-family:var(--body);font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2);margin-bottom:10px;line-height:1.4}
.tp-row:hover .tp-name{transform:translateX(8px)}
.tp-say{grid-area:say;color:var(--ink2)}
.tp-price{grid-area:price;font-weight:600}
.tp-st{grid-area:st;margin-top:4px}
.tp-st > span[aria-hidden]{display:flex;flex-wrap:wrap;gap:2px 12px}
.tp-st i{font-style:normal;font-family:var(--display);font-weight:700;font-size:17px;color:var(--ink2);opacity:.45}
.tp-st i.on{color:var(--ink);opacity:1;text-decoration:underline 2px var(--dot);text-underline-offset:4px}
.tp-hcline{margin-top:28px;color:var(--ink2);display:flex;flex-wrap:wrap;gap:6px 18px}
.tp-hcline .textlink{color:var(--ink)}
.tp-honest b{color:var(--ink)}
.lk-home #book{padding-top:0}
@media (max-width:800px){
  .tp-row{grid-template-columns:40px minmax(0,1fr);grid-template-areas:"num name" "num say" "num price" "num st";padding:26px 0}
  .tp-num{font-size:20px}
}
@media (prefers-reduced-motion:reduce){.tp-name,.tp-row::after{transition:none}}


/* ---- css/10-system.css ---- */
/* ===== Creative Evolution 03 · the system across every page =====
   1. One material: instruments, not cards. Square-ish corners (6–10px), ruled lists instead of boxed grids,
      no pill buttons. Prices and plans stay in clear cards, on purpose.
   2. One rule for seeing: what you can't see is drawn in outline (home column, measurement depth, self-check).
   3. One navigation: the stage spine (js/10-spine.js), fixed left on wide screens, a strip under the header below.
   4. One transition: the spine stays put between pages; on the home page the stage column folds into it. */
:root{--r:10px}
.btn{border-radius:6px}
.switch{border-radius:8px}.switch a{border-radius:6px}
.gw-top .login,.gw-top .reg,.nav .reg,.menubtn{border-radius:6px}
.hsrc i,.chips li,.pill,.badge,.status{border-radius:4px}
.book,.hc,.auth{border-radius:10px}
.auth-tabs,.auth-tabs button{border-radius:6px}
.mini-btn{border-radius:6px}
/* ruled lists instead of boxed card grids */
.steps4 li,.fgrid .card,.who article{background:transparent;border:0;border-top:1.5px solid var(--ink);border-radius:0;padding:20px 8px 0 0;box-shadow:none}
.ctrl li{background:transparent;border:0;border-top:1.5px solid var(--jac);border-radius:0;padding:18px 8px 0 0}
.steps4 .n{border-radius:4px}
.who{gap:28px 22px}
.faq details{border-radius:6px}
/* ---- the stage spine ---- */
.sp{view-transition-name:tsela-spine;font-family:var(--body);background:var(--night);color:var(--nightInk)}
.sp a{color:inherit;text-decoration:none}
.sp-list{list-style:none;margin:0;padding:0}
.sp-list a{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--nightMuted)}
.sp-list i{position:relative;flex:none;width:14px;height:14px;border-radius:50%;border:2px solid var(--lilac);background:var(--night)}
.sp-list a.is-fix{color:var(--nightInk)}
.sp-list a.is-fix i{background:var(--jac);border-color:var(--jac)}
/* the visitor's own leak: the dot cracks, like the word on the home page */
.sp-list a.is-you i::after{content:"";position:absolute;left:50%;top:-4px;width:2px;height:18px;margin-left:-1px;background:var(--lime);transform:rotate(35deg);border-radius:2px}
.sp-list a:hover,.sp-list a:focus-visible{color:var(--nightInk)}
.sp-top,.sp-blind{font-size:12px;font-weight:600;color:var(--nightMuted)}
.sp-top:hover,.sp-blind:hover{color:var(--nightInk)}
.sp-blind.is-you{color:var(--nightInk)}
.sp-note{margin:0;font-size:12px;line-height:1.35;color:var(--nightMuted)}
@media (min-width:1300px){
  .sp{position:fixed;left:12px;top:50%;transform:translateY(-50%);z-index:15;display:grid;gap:12px;justify-items:start;padding:14px 10px;border:1px solid var(--nightLine);border-radius:8px;box-shadow:0 10px 30px rgba(20,13,30,.25)}
  .sp-list{display:grid;gap:2px;position:relative}
  .sp-list::before{content:"";position:absolute;left:6px;top:12px;bottom:12px;width:2px;background:var(--night3)}
  .sp-list a{padding:6px 0}
  .sp-list span,.sp-top,.sp-blind,.sp-note{display:none}
  .sp-list a:hover span,.sp-list a:focus-visible span{display:block;position:absolute;left:30px;background:var(--night);border:1px solid var(--nightLine);border-radius:4px;padding:3px 8px;white-space:nowrap}
}
@media (min-width:1520px){
  .sp{left:20px;padding:16px 14px;max-width:150px}
  .sp-list span,.sp-top,.sp-blind,.sp-note{display:block}
  .sp-list a:hover span,.sp-list a:focus-visible span{position:static;border:0;padding:0;background:none}
  .sp-top{font-family:var(--display);font-size:15px;color:var(--nightInk)}
}
@media (max-width:1299px){
  .sp{display:flex;align-items:center;gap:8px 18px;padding:8px max(20px,calc((100vw - 1180px)/2 + 20px));border-bottom:1px solid var(--nightLine);overflow-x:auto;scrollbar-width:none}
  .sp::-webkit-scrollbar{display:none}
  .sp-list{display:flex;gap:4px 16px;flex:1}
  .sp-list a{padding:6px 0;white-space:nowrap}
  .sp-note{display:none}
  .sp-top{white-space:nowrap;font-family:var(--display);font-size:14px;color:var(--nightInk)}
  .sp-blind{white-space:nowrap}
}
@media (max-width:700px){
  .sp{padding-inline:14px;gap:6px 10px}
  .sp-top{display:none}
  .sp-list{justify-content:space-between;gap:6px}
  .sp-list a{font-size:10.5px;gap:5px;letter-spacing:.06em}
  .sp-list i{width:11px;height:11px}
  .sp-blind{font-size:11px}
}
@media print{.sp{display:none}}
/* the home column carries the same name, so leaving home folds it into the spine */
.lk-stack{view-transition-name:tsela-spine}
/* ---- page transitions (cross-document View Transitions; ignored where unsupported) ---- */
::view-transition-group(tsela-spine){animation-duration:.6s;animation-timing-function:cubic-bezier(.22,1,.36,1)}
::view-transition-old(root){animation:vtFade .3s ease both}
::view-transition-new(root){animation:vtIn .45s cubic-bezier(.22,1,.36,1) both}
html:active-view-transition-type(fwd)::view-transition-old(root){animation:vtOutUp .32s cubic-bezier(.4,0,1,1) both}
html:active-view-transition-type(fwd)::view-transition-new(root){animation:vtInUp .5s cubic-bezier(.22,1,.36,1) both}
html:active-view-transition-type(back)::view-transition-old(root){animation:vtOutDown .32s cubic-bezier(.4,0,1,1) both}
html:active-view-transition-type(back)::view-transition-new(root){animation:vtInDown .5s cubic-bezier(.22,1,.36,1) both}
@keyframes vtFade{to{opacity:0}}
@keyframes vtIn{from{opacity:0}}
@keyframes vtOutUp{to{opacity:0;transform:translateY(-24px)}}
@keyframes vtInUp{from{opacity:0;transform:translateY(32px)}}
@keyframes vtOutDown{to{opacity:0;transform:translateY(24px)}}
@keyframes vtInDown{from{opacity:0;transform:translateY(-32px)}}
/* ---- footer: the stages as a site map ---- */
.fstages{font-size:14px;color:var(--nightMuted)}
.fstages a{color:var(--nightInk);text-decoration:none;border-bottom:1px solid var(--nightLine)}
.fstages a:hover{border-bottom-color:var(--jac)}
/* ---- inner heroes: one composition grammar, each page fills it differently ---- */
.hero h1{letter-spacing:-.025em}
.hero .eyebrow{display:inline-flex;align-items:center;gap:10px}
.hero .eyebrow::before{content:"";width:28px;height:2px;background:var(--jac)}
.pc-hero .wrap{grid-template-columns:minmax(0,1fr);max-width:1180px}
.pc-hero h1{font-size:clamp(44px,7vw,104px);max-width:14ch;line-height:.98}
.pc-hero .lead{max-width:62ch}


/* ---- css/30-pages.css ---- */
/* ===== Creative Evolution 03 · page instruments =====
   Performance Center (.ms): measurement depth · Strategy (.pb): the problem space · Digital Build (.bp): the
   blueprint · Health check (.cf-, .sc-): the case file · Legal (.lg-): contents that follow your reading. */

/* ---- Performance Center: how far do you measure? ---- */
.ms{padding-block:88px}
.ms-inst{display:grid;gap:14px;margin-bottom:8px}
.ms-q{font-family:var(--display);font-weight:700;font-size:clamp(20px,2.2vw,28px)}
.ms-words{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
.ms-words li{text-align:center;cursor:pointer;font-family:var(--display);font-weight:700;font-size:clamp(22px,3.5vw,48px);letter-spacing:-.025em;line-height:1.05;padding-bottom:10px;color:transparent;-webkit-text-stroke:1.3px var(--lilac);transition:color .35s,-webkit-text-stroke-color .35s}
.ms-words li.is-seen{color:var(--nightInk);-webkit-text-stroke-color:transparent}
.ms-words li.is-now{box-shadow:inset 0 -3px 0 var(--jac)}
.ms-range{width:80%;margin:0 10%;accent-color:var(--jac);height:28px;cursor:pointer}
.ms-list{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:28px}
.ms-list li{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,2fr);gap:10px 40px;border-top:1.5px solid var(--jac);padding-top:22px}
.ms-list h3{font-size:clamp(30px,3.4vw,46px);grid-row:span 2}
.ms-n{font:700 13px var(--body);letter-spacing:.12em;color:var(--jac);vertical-align:middle;margin-right:6px}
.ms-what{color:var(--nightInk);font-size:18px}
.ms-list dl{margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 28px}
.ms-list dt{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--jac);margin-bottom:6px}
.ms-list dd{margin:0;color:var(--nightMuted);font-size:16px}
.ms.is-live .ms-list li:not(.is-on){display:none}
.ms.is-live .ms-list li.is-on{animation:msIn .45s cubic-bezier(.22,1,.36,1)}
@keyframes msIn{from{opacity:0;transform:translateY(10px)}}
.ms .centerline{border-color:var(--night3);margin-top:32px}
.ms .centerline .k{color:var(--jac)}
.ms .centerline p{color:var(--nightMuted)}.ms .centerline p b{color:var(--nightInk)}
.ms-src{margin-top:16px;background:transparent;padding:0}
@media (max-width:800px){
  .ms-words{display:none}
  .ms-range{width:100%;margin:0}
  .ms-list li{grid-template-columns:minmax(0,1fr)}
  .ms-list h3{grid-row:auto}
  .ms-list dl{grid-template-columns:minmax(0,1fr)}
}

/* ---- Strategy: the problem space ---- */
.pb{padding-block:88px}
.pb-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:start}
.pb-probs{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--nightLine)}
.pb-probs li{border-top:1px solid var(--nightLine)}
.pb-q{display:grid;grid-template-columns:34px minmax(0,1fr) 20px;gap:10px;align-items:baseline;width:100%;text-align:left;background:none;border:0;color:var(--nightInk);cursor:pointer;padding:16px 0;font:700 clamp(19px,1.9vw,25px)/1.2 var(--display)}
.pb-q::after{content:"+";font:500 22px/1 var(--body);color:var(--nightMuted)}
.pb-q[aria-expanded="true"]::after{content:"×";color:var(--nightInk)}
.pb-q:hover{color:#fff}
.pb-i{font:700 12px var(--body);letter-spacing:.12em;color:var(--jac)}
.pb-a{display:grid;gap:12px;padding:0 0 22px 44px;border-left:2px solid var(--jac);margin-left:10px}
.pb-a p{color:var(--nightMuted)}
.pb.is-live .pb-probs li:not(.is-open) .pb-a{display:none}
.pb.is-live .pb-probs li.is-open .pb-a{animation:msIn .4s cubic-bezier(.22,1,.36,1)}
.pb-start{display:grid;grid-template-columns:auto minmax(0,auto) minmax(0,1fr) auto;align-items:baseline;gap:4px 12px;padding:12px 14px;border:1.5px solid var(--jac);border-radius:6px;color:var(--nightInk);text-decoration:none}
.pb-start:hover{background:rgba(156,127,227,.13)}
.pb-start span:first-child{font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--jac)}
.pb-start b{font-family:var(--display);font-size:19px}
.pb-start em{font-style:normal;color:var(--nightMuted);font-size:15px}
.pb-map{position:sticky;top:150px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.pb-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.pb-lines polyline{fill:none;stroke:var(--jac);stroke-width:2;stroke-linejoin:round;transition:stroke-dashoffset .9s cubic-bezier(.22,1,.36,1)}
.pb-col{display:grid;gap:10px;align-content:start;position:relative}
.pb-h{font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--jac);padding-bottom:6px;border-bottom:1px solid var(--nightLine)}
.pb-col span{position:relative;z-index:1;display:block;padding:10px;border:1px solid var(--night3);border-radius:6px;background:var(--night2);font-size:14px;line-height:1.3;color:var(--nightMuted);transition:border-color .3s,color .3s,background-color .3s,opacity .3s}
.pb-map.is-lit .pb-col span{opacity:.45}
.pb-map.is-lit .pb-col span.is-on{opacity:1;color:var(--nightInk);border-color:var(--jac);background:#3a2c55}
@media (max-width:900px){
  .pb-grid{grid-template-columns:minmax(0,1fr);gap:28px}
  .pb-map{position:relative;top:auto;order:-1;gap:6px}
  .pb-col span{font-size:12px;padding:7px}
  .pb-a{padding-left:18px}
  .pb-start{grid-template-columns:minmax(0,1fr) auto}
  .pb-start > *:not(.arr){grid-column:1}.pb-start .arr{grid-column:2;grid-row:1}
}
@media (prefers-reduced-motion:reduce){.pb-lines polyline{transition:none}}

/* ---- Digital Build: the blueprint ---- */
.bp{padding-block:88px;background:linear-gradient(var(--line) 1px,transparent 1px) 0 0/100% 32px,linear-gradient(90deg,var(--line) 1px,transparent 1px) 0 0/32px 100%,var(--bg);background-blend-mode:normal}
.bp .sec-head{background:var(--bg);padding:6px 10px 10px 0}
.bp-ctl{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;margin-bottom:18px}
.bp-tabs,.bp-lens{display:flex;flex-wrap:wrap;gap:0;border:1.5px solid var(--ink);border-radius:6px;overflow:hidden;background:var(--surface)}
.bp-tabs button,.bp-lens button{font:600 14.5px var(--body);color:var(--ink);background:transparent;border:0;border-right:1px solid var(--line);padding:10px 14px;cursor:pointer}
.bp-tabs button:last-child,.bp-lens button:last-child{border-right:0}
.bp-tabs button[aria-pressed="true"],.bp-lens button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.bp-stage{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,.8fr);gap:32px;align-items:start}
.bp-frame{background:var(--surface);border:1.5px solid var(--ink);border-radius:8px;padding:0 0 14px;box-shadow:8px 8px 0 var(--pathline)}
.bp-bar{display:flex;gap:6px;padding:10px 14px;border-bottom:1.5px solid var(--ink);margin-bottom:14px}
.bp-bar i{width:9px;height:9px;border-radius:50%;border:1.5px solid var(--ink)}
.bp:not(.is-live) .bp-type ~ .bp-type{display:none}
.bp.is-live .bp-type:not(.is-on){display:none}
.bp-blocks{list-style:none;margin:0;padding:0 14px;display:grid;gap:8px}
.bp-b{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.2fr);gap:4px 18px;align-items:baseline;padding:14px 16px;border:1.5px solid var(--ink);border-radius:6px;background:var(--bg)}
.bp-b:first-child{border-style:dashed}
.bp-b b{font-family:var(--display);font-size:clamp(17px,1.6vw,21px)}
.bp-b span{color:var(--ink2);font-size:15px}
.bp-frame[data-lens="s"] .bp-j,.bp-frame[data-lens="s"] .bp-m,.bp-frame[data-lens="j"] .bp-s,.bp-frame[data-lens="j"] .bp-m,.bp-frame[data-lens="m"] .bp-s,.bp-frame[data-lens="m"] .bp-j{display:none}
.bp-j{font-style:italic;color:var(--ink)!important}
.bp-m{display:flex;gap:8px;align-items:baseline}
.bp-m i{flex:none;width:9px;height:9px;border-radius:50%;background:var(--dot);transform:translateY(-1px)}
.bp-frame[data-lens="m"] .bp-b{border-left-width:5px;border-left-color:var(--dot)}
.bp-type.is-in .bp-b{animation:bpIn .5s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(var(--i) * 70ms)}
@keyframes bpIn{from{opacity:0;transform:translateY(16px) scale(.985)}}
.bp-out{position:sticky;top:150px;display:grid;gap:10px;padding:24px;border:1.5px solid var(--ink);border-radius:8px;background:var(--surface)}
.bp-k{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2)}
.bp-name{font-family:var(--display);font-weight:700;font-size:26px;line-height:1.1}
.bp-desc{color:var(--ink2)}
.bp-note{font-size:14px;color:var(--ink2);border-top:1px solid var(--line);padding-top:10px}
.bp-acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.bp-acts .btn-ghost{color:var(--ink)}
@media (max-width:900px){
  .bp-stage{grid-template-columns:minmax(0,1fr)}
  .bp-out{position:static}
  .bp-b{grid-template-columns:minmax(0,1fr)}
  .bp-tabs button,.bp-lens button{flex:1 1 auto;padding:10px 10px;font-size:13.5px}
  .bp-tabs,.bp-lens{width:100%}
}
@media (prefers-reduced-motion:reduce){.bp-type.is-in .bp-b,.ms.is-live .ms-list li.is-on,.pb.is-live .pb-probs li.is-open .pb-a{animation:none}}

/* ---- Health check: the case file ---- */
.cf-k{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--jac)}
.cf-hero .areas li{background:transparent;border:0;border-top:1px dashed var(--lilac);border-radius:0;padding:14px 0}
.cf-hero .areas li span{font-size:20px}
.cf-hero .tp-side{border:1.5px solid var(--nightLine);border-radius:8px;padding:22px;background:var(--night2)}
.cf-pre{background:var(--panel);border-left:4px solid var(--dot);border-radius:6px;padding:10px 14px;color:var(--ink);font-size:15px}
.sc-row{border-radius:8px}
.sc-k b{font-size:clamp(24px,2.6vw,32px);line-height:1.05;margin-bottom:2px;transition:color .3s,-webkit-text-stroke-color .3s}
.sc-row[data-sure="0"] .sc-k b,.sc-row[data-sure="1"] .sc-k b{color:transparent;-webkit-text-stroke:1.2px var(--ink)}

/* ---- Legal: the document, with contents that follow your reading ---- */
.legal-hero h1{font-size:clamp(44px,6.4vw,92px);letter-spacing:-.03em;line-height:.98}
section.legal .wrap.lg-wrap{display:grid;grid-template-columns:minmax(0,780px) 250px;gap:56px;justify-content:space-between;align-items:start}
.lg-toc{position:sticky;top:150px;font-size:14px}
.lg-toc summary{cursor:pointer;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2);padding-bottom:8px;border-bottom:1.5px solid var(--ink);list-style:none}
.lg-toc summary::-webkit-details-marker{display:none}
.lg-toc ol{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:1px;max-height:calc(100vh - 220px);overflow:auto}
.lg-toc a{display:block;padding:5px 0 5px 12px;border-left:2px solid var(--line);color:var(--ink2);text-decoration:none;line-height:1.3}
.lg-toc a:hover{color:var(--ink)}
.lg-toc a[aria-current]{color:var(--ink);font-weight:600;border-left-color:var(--dot)}
@media (max-width:1000px){
  section.legal .wrap.lg-wrap{grid-template-columns:minmax(0,1fr);gap:20px}
  .lg-toc{position:static;order:-1;border:1px solid var(--line);border-radius:8px;padding:12px 14px;background:var(--surface)}
  .lg-toc summary{border-bottom:0;padding:0}
  .lg-toc summary::after{content:" +"}.lg-toc details[open] summary::after{content:" ×"}
  .lg-toc ol{max-height:none}
}
/* the Performance Center instrument starts inside the first view */
.pc-hero{padding-bottom:40px}
.pc-hero + main > .ms{padding-top:32px}
/* home: the original promise, kept */
.lk-promise{margin-top:14px;font-family:var(--display);font-weight:600;font-size:clamp(18px,1.8vw,22px);color:var(--nightInk)}
.lk-promise + .lk-how{margin-top:6px}


/* ---- css/40-analytics.css ---- */
/* ===== Performance Center · Creative analysis tab =====
   Dark instrument cards on Plum, like the performance dashboard. Series colours: the validated categorical order
   (dark steps), fixed to platforms and creative parts. Status: good / warning / critical, always with icon + word. */
.ca{--ca-bg:var(--night);--ca-bg2:var(--night2);--ca-line:var(--night3);--ca-ink:var(--paper);--ca-ink2:var(--lilac);
  --ca-jac:#9C7FE3;--ca-lil:#C9C0D8;
  --ca-s1:#3987e5;--ca-s2:#d95926;--ca-s3:#199e70;--ca-s4:#c98500;--ca-s5:#d55181;--ca-s6:#008300;--ca-s7:#9085e9;--ca-s8:#e66767;
  --ca-good:#0ca30c;--ca-warn:#fab219;--ca-bad:#d03b3b;
  display:grid;gap:16px;color:var(--ink)}
.ca-filters{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:end}
.ca label{display:grid;gap:4px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink2)}
.ca select{font:500 14.5px var(--body);text-transform:none;letter-spacing:0;color:var(--ink);background:var(--surface);border:1.5px solid var(--line);border-radius:6px;padding:8px 10px;min-width:150px}
.ca-asof{font-size:13px;color:var(--ink2);margin-top:-6px}
.ca-card{background:var(--ca-bg);color:var(--ca-ink);border:1px solid var(--ca-line);border-radius:10px;padding:18px 20px;display:grid;gap:10px;align-content:start;min-width:0}
.ca-card h3,.ca-card h4{font-family:var(--body);font-weight:700;font-size:16px;color:var(--ca-ink)}
.ca-card h3 span{color:var(--ca-ink2);font-weight:600}
.ca-sub{font-size:13.5px;color:var(--ca-ink2);line-height:1.45}
.ca-sub b{color:var(--ca-ink)}
.ca-wide{grid-column:1/-1}
/* score cards */
.ca-scores{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.ca-score header{display:flex;justify-content:space-between;gap:8px;align-items:start}
.ca-how{position:relative}
.ca-how summary{list-style:none;cursor:pointer;width:24px;height:24px;border-radius:50%;border:1.5px solid var(--ca-ink2);color:var(--ca-ink2);display:grid;place-items:center;font:700 12px/1 var(--body);font-style:italic}
.ca-how summary::-webkit-details-marker{display:none}
.ca-how[open] summary{background:var(--ca-ink);color:var(--ca-bg);border-color:var(--ca-ink)}
.ca-how p{position:absolute;right:0;top:30px;z-index:5;width:min(300px,70vw);background:var(--paper);color:var(--plum);border-radius:8px;padding:12px 14px;font-size:13.5px;line-height:1.45;box-shadow:0 14px 34px rgba(0,0,0,.4)}
.ca-how p + p{top:auto;margin-top:6px}
.ca-big{font-family:var(--display);font-weight:700;font-size:44px;line-height:1;font-variant-numeric:tabular-nums}
.ca-big small{font:500 16px var(--body);color:var(--ca-ink2);margin-left:6px}
.ca-mid{font-size:32px}
.ca-meter{position:relative;height:8px;border-radius:4px;background:var(--ca-bg2);overflow:visible}
.ca-meter b{display:block;height:100%;border-radius:4px;background:var(--ca-ink2)}
.ca-meter.ca-good b{background:var(--ca-good)}.ca-meter.ca-warn b{background:var(--ca-warn)}.ca-meter.ca-bad b{background:var(--ca-bad)}
.ca-meter i{position:absolute;top:-3px;width:2px;height:14px;background:var(--ca-line);margin-left:-1px}
.ca-pill{justify-self:start;display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:var(--ca-ink);border:1px solid var(--ca-line);border-radius:4px;padding:3px 8px;background:var(--ca-bg2);white-space:nowrap}
.ca-pill i{font-style:normal;font-size:10px}
.ca-good i{color:var(--ca-good)}.ca-warn i{color:var(--ca-warn)}.ca-bad i{color:var(--ca-bad)}
.ca-pill.ca-good{border-color:var(--ca-good)}.ca-pill.ca-warn{border-color:var(--ca-warn)}.ca-pill.ca-bad{border-color:var(--ca-bad)}
.ca-work{margin:0;display:grid;gap:4px}
.ca-work div{display:flex;justify-content:space-between;gap:10px;font-size:14px}
.ca-work dt{color:var(--ca-ink2)}.ca-work dd{margin:0;font-weight:700;font-variant-numeric:tabular-nums}
.ca-tipbox{font-size:13px;color:var(--ca-ink);background:var(--ca-bg2);border-left:3px solid var(--ca-jac);border-radius:4px;padding:8px 10px}
/* stat tiles */
.ca-stats{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px}
.ca-stats div{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:10px 12px;display:grid;gap:2px;min-width:0}
.ca-stats span{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink2)}
.ca-stats b{font-family:var(--display);font-size:20px;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* chart chrome */
.ca-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:10px 18px}
.ca-ctl{display:flex;flex-wrap:wrap;gap:10px;align-items:end}
.ca-card .ca-ctl label{color:var(--ca-ink2)}
.ca-card select{background:var(--ca-bg2);color:var(--ca-ink);border-color:var(--ca-line);min-width:120px}
.ca-tog{font:600 13.5px var(--body);color:var(--ca-ink);background:var(--ca-bg2);border:1.5px solid var(--ca-line);border-radius:6px;padding:8px 12px;cursor:pointer}
.ca-tog[aria-pressed="true"]{border-color:var(--ca-jac)}
.ca-trend{min-height:260px}
.ca-trend svg{display:block;max-width:100%;height:auto;outline-offset:4px}
.ca-grid line{stroke:var(--ca-line);stroke-width:1}
.ca-grid text,.ca-dl{fill:var(--ca-ink2);font:12px var(--body)}
.ca-dl{fill:var(--ca-ink);font-weight:600}
.ca-lines path{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.ca-cross{stroke:var(--ca-ink2);stroke-width:1;stroke-dasharray:3 3}
.ca-dots circle{stroke:var(--ca-bg);stroke-width:2}
.ca-hit{fill:transparent;cursor:crosshair}
.ca-legend{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13px;color:var(--ca-ink2)}
.ca-legend li{display:flex;align-items:center;gap:6px}
.ca-legend i,.ca-sw,.ca-dn i{display:inline-block;width:10px;height:10px;border-radius:3px;flex:none}
.ca-legend b{color:var(--ca-ink)}
.ca-sw{margin-right:8px;vertical-align:-1px}
.ca-tip{position:fixed;z-index:80;max-width:260px;background:var(--paper);color:var(--plum);border-radius:8px;padding:8px 10px;font:13px/1.45 var(--body);box-shadow:0 12px 30px rgba(20,13,30,.4);pointer-events:none;display:grid;gap:2px}
.ca-tip[hidden]{display:none}
.ca-tip span{display:flex;align-items:center;gap:6px}
.ca-tip i{width:10px;height:10px;border-radius:3px;display:inline-block}
/* product bars */
.ca-two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ca-bars{display:grid;gap:4px}
.ca-bar button{width:100%;display:grid;grid-template-columns:minmax(80px,30%) 1fr auto;gap:10px;align-items:center;background:none;border:0;border-radius:6px;padding:5px 6px;color:var(--ca-ink);font:14px var(--body);cursor:pointer;text-align:left}
.ca-bar button:hover,.ca-bar.is-sel button{background:var(--ca-bg2)}
.ca-bar.is-sel .ca-bl{font-weight:700}
.ca-bl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ca-bt{height:14px;display:block}
.ca-bt b{display:block;height:100%;border-radius:0 4px 4px 0}
.ca-bv{font-weight:700;font-variant-numeric:tabular-nums;min-width:44px;text-align:right}
/* creative analysis */
.ca-sect{display:grid;gap:12px}
.ca-sect h3,.ca-h{font-family:var(--display);font-size:clamp(22px,2.4vw,28px);margin-top:6px}
.ca-chips{display:flex;flex-wrap:wrap;gap:6px}
.ca-chips button{font:600 13.5px var(--body);color:var(--ink);background:var(--surface);border:1.5px solid var(--line);border-radius:6px;padding:7px 12px;cursor:pointer}
.ca-chips button[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.ca-attr{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ca-stack{display:flex;gap:2px;height:22px;border-radius:4px;overflow:hidden}
.ca-stack b{display:block;min-width:2px;cursor:default}
.ca-stack b:focus-visible{outline:2px solid var(--ca-ink);outline-offset:-2px}
.ca-drivers{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:8px}
.ca-drivers li{display:grid;grid-template-columns:120px 1fr 44px 96px;gap:10px;align-items:center;font-size:14px}
.ca-dn{display:flex;align-items:center;gap:8px}
.ca-dr{position:relative;height:12px;background:var(--ca-bg2);border-radius:3px}
.ca-dr b{position:absolute;left:0;top:2px;height:8px;border-radius:0 3px 3px 0}
.ca-range{position:absolute;top:0;height:12px;border:1px solid var(--ca-ink2);border-radius:3px;opacity:.6}
.ca-dv{font-weight:700;text-align:right;font-variant-numeric:tabular-nums}
.ca-conf{justify-self:start;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ca-ink2);border:1px solid var(--ca-line);border-radius:4px;padding:2px 6px}
.ca-c-strong{color:var(--ca-ink);border-color:var(--ca-ink2)}
.ca-wname{font-family:var(--display);font-size:22px;font-weight:700;line-height:1.15}
.ca-wname small{display:block;font:500 13px var(--body);color:var(--ca-ink2);margin-top:4px}
.ca-say{font-size:15px;line-height:1.5}
.ca-matrix{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.ca-el h5{font:700 13px var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--ca-jac);display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px;margin:0 0 6px}
.ca-el h5 small{font-weight:500;letter-spacing:0;text-transform:none;color:var(--ca-ink2)}
.ca-el ol{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.ca-el li{display:grid;grid-template-columns:auto 1fr auto;gap:2px 10px;align-items:baseline;padding:8px 10px;border:1px solid var(--ca-line);border-radius:6px;background:var(--ca-bg2);font-size:13.5px}
.ca-el li.is-best{border-color:var(--ca-good)}
.ca-el li span{grid-column:1/-1;color:var(--ca-ink2);font-size:12.5px;order:5}
.ca-el li em{font-style:normal;font-variant-numeric:tabular-nums;color:var(--ca-ink)}
.ca-el li em.up{font-weight:700}.ca-el li em.down{color:var(--ca-ink2)}
.ca-el li small{grid-column:1/-1;color:var(--ca-ink2);font-size:12px}
.ca-caveat{grid-column:1/-1;font-size:13px;color:var(--ink2)}
.ca-note{background:var(--panel);border-left:4px solid var(--dot);border-radius:6px;padding:12px 14px;color:var(--ink);font-size:15px}
.ca-empty{color:var(--ca-ink2);font-size:14px;padding:30px 0;text-align:center}
/* tables, quality */
.ca-tablewrap{overflow-x:auto}
.ca-table{width:100%;border-collapse:collapse;font-size:14px;min-width:520px}
.ca-table th,.ca-table td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--ca-line);white-space:nowrap}
.ca-table th{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ca-ink2)}
.ca-table td{font-variant-numeric:tabular-nums}
.ca-table small{color:var(--ca-ink2)}
.ca-qual{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.ca-assume{font-size:14px;color:var(--ink2)}
.ca-assume summary{cursor:pointer;font-weight:600;color:var(--ink)}
.ca-assume ul{margin:8px 0 0;padding-left:18px;display:grid;gap:6px}
.ca[aria-busy="true"]{opacity:.6;pointer-events:none}
@media (max-width:1240px){.ca-scores{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:1100px){.ca-scores,.ca-qual{grid-template-columns:repeat(2,minmax(0,1fr))}.ca-stats{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:760px){
  .ca-two,.ca-attr{grid-template-columns:minmax(0,1fr)}
  .ca-scores,.ca-qual{grid-template-columns:minmax(0,1fr)}
  .ca-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ca-drivers li{grid-template-columns:96px 1fr 40px}
  .ca-conf{display:none}
  .ca-big{font-size:38px}
}
.ca-sect{padding:0}
.ca-sect > .ca-head .ca-sub{color:var(--ink2)}
/* client-area tabs sit directly under their heading (global section padding doesn't apply here) */
.p-panel{padding-block:0}

/* 13 Oct 2026: AMS detail, setup steps, empty frames */
.ca-card .mini-btn{border-color:var(--ca-ink);color:var(--ca-ink);justify-self:start}
.ca-card .mini-btn.solid{background:var(--lime);border-color:var(--lime);color:var(--plum)}
.w-core{background:var(--ca-jac)!important}.w-sec{background:var(--ca-lil)!important}.w-out{background:#6E5F87!important}
.ca-bt b.w-out{background:repeating-linear-gradient(135deg,#6E5F87 0 4px,#4A3D60 4px 8px)!important}
.ca-legend i.w-out{background:repeating-linear-gradient(135deg,#6E5F87 0 3px,#4A3D60 3px 6px)!important}
.ca-segrow{display:grid;grid-template-columns:minmax(90px,34%) 1fr auto;gap:10px;align-items:center;padding:4px 6px;border-radius:6px;font-size:14px}
.ca-segrow:focus-visible{outline:2px solid var(--ca-ink)}
.ca-h5{font:700 12.5px var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--ca-ink2);margin:4px 0 6px}
.ca-card .ca-note{background:var(--ca-bg2);color:var(--ca-ink);border-left-color:var(--ca-jac);font-size:14px;display:grid;gap:8px}
.ca-setup{background:var(--surface);color:var(--ink);border:1.5px solid var(--dot);border-radius:14px;padding:20px 22px;display:grid;gap:12px}
.ca-card.ca-setup h3{font-family:var(--display);font-size:clamp(22px,2.4vw,28px);color:var(--ink)}
.ca-card.ca-setup .ca-steps b{color:var(--ink)}
.ca-setup .ca-sub{color:var(--ink2)}
.ca-setup .ca-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:10px}
.ca-prog{font-size:15px;color:var(--ink2)}.ca-prog b{color:var(--ink);font-size:20px}
.ca-progbar{height:8px;border-radius:4px;background:var(--panel);overflow:hidden}
.ca-progbar b{display:block;height:100%;background:var(--dot);border-radius:4px;transition:width .4s}
.ca-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.ca-steps li{display:grid;grid-template-rows:auto 1fr auto;gap:8px;border:1px solid var(--line);border-radius:10px;padding:14px;background:var(--bg)}
.ca-steps li > div{display:grid;gap:4px}.ca-steps li > div span{font-size:13.5px;color:var(--ink2)}
.ca-steps li.is-done{border-color:var(--dot)}
.ca-steps .ca-pill{color:var(--ink);background:var(--panel);border-color:var(--line)}
.ca-steps .ca-pill.ca-good{border-color:#0ca30c}
.ca-stepn{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font:700 14px var(--body);border:1.5px solid var(--ink2);color:var(--ink)}
.ca-steps li.is-done .ca-stepn{background:var(--dot);border-color:var(--dot);color:#fff}
.ca-setup.is-compact .ca-steps li.is-done{display:none}
.ca-syncline{font-size:13.5px}
.ca-ghostwrap{display:grid;gap:18px}
.ca-ghost .ca-ghostbox{height:120px;border:1.5px dashed var(--ca-line);border-radius:8px;background:repeating-linear-gradient(90deg,transparent 0 47px,var(--ca-bg2) 47px 48px)}
.ca-ghostnote{font-size:13.5px;color:var(--ca-ink2)}
.ca-ghostwrap .ca-score .ca-big{color:var(--ca-ink2)}
@media (max-width:1000px){.ca-steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.ca-steps{grid-template-columns:minmax(0,1fr)}}


/* ---- css/50-settings.css ---- */
/* ===== Settings tab, connections and preview toggle (13 Oct 2026) ===== */
.conn-sub{font-family:var(--display);font-size:22px;margin-top:22px}
.pv-seg{display:inline-flex;gap:6px;flex-wrap:wrap}
.pv-seg .mini-btn[aria-pressed="true"],.st-seg .mini-btn[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.st-nav{display:flex;flex-wrap:wrap;gap:6px 14px;margin:0 0 16px;font-size:14.5px}
.st-nav a{color:var(--ink);text-underline-offset:3px}
.st-grid{display:grid;gap:16px}
.st-sect{scroll-margin-top:90px}
.st-h{display:grid;gap:4px}
.st-h p,.st-help{color:var(--ink2);font-size:14.5px;line-height:1.5}
.st-help{font-size:13.5px}
.st-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 18px}
.st-form fieldset{border:0;margin:0;padding:0;display:grid;gap:8px;min-width:0;align-content:start}
.st-form fieldset[disabled]{opacity:.55}
.st-form legend{font-weight:700;font-size:14.5px;margin-bottom:6px;padding:0}
.st-form label{display:grid;gap:6px;font-size:14px;font-weight:600;color:var(--ink)}
.st-form input[type="number"],.st-form input:not([type]),.st-form select,.st-form textarea,.st-parts select{font:15px var(--body);color:var(--ink);background:var(--bg);border:1.5px solid var(--line);border-radius:8px;padding:9px 10px;min-height:42px;width:100%}
.st-form input:focus-visible,.st-form select:focus-visible,.st-form textarea:focus-visible,.st-parts select:focus-visible{outline:2px solid var(--dot);outline-offset:1px}
.st-form .st-wide,.st-form .st-msg,.st-form .st-actions,.st-form > fieldset:only-of-type{grid-column:1/-1}
.st-inline{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:end}
.st-inline label{min-width:110px}
.st-check{font-size:14.5px;display:flex!important;grid-template-columns:none!important;align-items:center;gap:8px!important;font-weight:500!important}
.st-check input{width:18px;height:18px;accent-color:var(--dot)}
.st-actions{display:flex;flex-wrap:wrap;gap:8px}
.st-msg{min-height:1em;font-size:14px;color:#B3261E}.st-msg.ok{color:var(--ink2)}
.st-tablewrap{overflow-x:auto}
.st-table{border-collapse:collapse;font-size:14px;width:100%;min-width:420px}
.st-table th,.st-table td{padding:7px 10px;border-bottom:1px solid var(--line);text-align:left}
.st-table thead th{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink2)}
.st-table td input[type="radio"]{width:18px;height:18px;accent-color:var(--dot)}
.st-read{border:1px solid var(--line);border-radius:10px;padding:10px 14px;background:var(--bg)}
.st-read summary{cursor:pointer;font-weight:600}
.st-read[open] summary{margin-bottom:10px}
.st-notes{margin:8px 0 0;padding-left:18px;display:grid;gap:4px;font-size:14px;color:var(--ink2)}
.st-sug{background:var(--panel);border-left:4px solid var(--dot);border-radius:6px;padding:10px 14px;font-size:14.5px;display:grid;gap:8px;justify-items:start}
.st-rules{list-style:none;margin:0;padding:0;display:grid;gap:10px;grid-column:1/-1}
.st-rules li{display:grid;grid-template-columns:1fr 1fr auto;gap:10px;align-items:end}
.st-count{font-size:15px}
.st-crs{display:grid;gap:12px}
.st-cr{border:1px solid var(--line);border-radius:12px;padding:14px;display:grid;gap:12px;background:var(--bg)}
.st-crhead{display:grid;grid-template-columns:72px 1fr;gap:12px;align-items:start}
.st-crhead img,.st-nothumb{width:72px;height:72px;border-radius:8px;object-fit:cover;background:var(--panel);display:block}
.st-crhead b{display:block}.st-crhead small{color:var(--ink2);font-size:13px}
.st-crhead p{font-size:14px;color:var(--ink2);margin-top:4px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.st-flag{color:#8a5a00;font-weight:700}
.st-parts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.st-part{display:grid;gap:4px;font-size:13.5px;font-weight:600}
.st-part small{display:block;font-weight:500;color:var(--ink2);font-size:12px}
.st-part.is-low select{border-color:#fab219;box-shadow:0 0 0 1px #fab219}
.st-parts .st-actions{grid-column:1/-1}
.st-saved{color:var(--ink2);font-size:14px}
.st-recs{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.st-recs li{border:1px solid var(--line);border-radius:10px;padding:12px 14px;display:grid;gap:6px}
.st-recs small{color:var(--ink2)}
.st-seg{display:flex;flex-wrap:wrap;gap:6px}
.st-adv summary{cursor:pointer;list-style:none;display:grid;gap:4px}
.st-adv summary span{color:var(--ink2);font-size:14px}
.st-adv[open] summary{margin-bottom:12px}
.st-staffwrap{border-style:dashed}
.st-staff{display:grid;gap:12px}
.st-client{border:1px solid var(--line);border-radius:10px;padding:14px;display:grid;gap:10px}
.st-client h4 small{color:var(--ink2);font-weight:500}
.st-accts{margin:0;padding-left:18px;font-size:14px;display:grid;gap:4px}
.st-client .st-form{grid-template-columns:1fr}
@media (max-width:860px){.st-parts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){
  .st-form{grid-template-columns:minmax(0,1fr)}
  .st-rules li{grid-template-columns:minmax(0,1fr)}
  .st-parts{grid-template-columns:minmax(0,1fr)}
}
/* Performance dashboard with data: keep wide tables scrolling inside the card on phones */
.pd{grid-template-columns:minmax(0,1fr)}
.pd > *{min-width:0}
@media (max-width:640px){.pd .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.pd .grid2,.pd .grid3{grid-template-columns:minmax(0,1fr)}.pd{padding:16px}}


/* ---- css/60-clientportal.css ---- */
/* ===== Client portal on tselaco.com (js/90-clientportal.js), 21 Oct 2026 ===== */
.cportal .p-who{line-height:1.3}.cportal .p-who b{color:var(--nightInk);font-weight:600}
.cportal .p-tabs .count{margin-left:auto;font-size:12px;font-weight:700;background:var(--btn);color:var(--btnInk);border-radius:999px;padding:1px 8px}
.cportal .p-banner .p-wrap{gap:10px 16px}
.cp-sel{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--ink)}
.cp-sel select{font:14px var(--body);padding:6px 8px;border-radius:6px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink)}
.cp-muted{color:var(--ink2)}
.cp-head{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;justify-content:space-between}
.cp-acts{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.cportal .need div{grid-template-columns:minmax(0,1fr) auto}
.cportal .need div > .cp-compose{grid-column:1/-1}
.cp-feed{list-style:none;margin:0;padding:0;display:grid}
.cp-feed li{display:grid;grid-template-columns:120px 1fr;gap:14px;padding:12px 0;border-top:1px solid var(--line)}
.cp-feed li:first-child{border-top:0}
.cp-feed time{font-size:13.5px;color:var(--ink2);font-variant-numeric:tabular-nums}
.cp-compose{display:grid;gap:8px;margin-top:6px}
.cp-compose textarea{font:15px var(--body);color:var(--ink);background:var(--surface);border:1.5px solid var(--line);border-radius:8px;padding:10px 12px;width:100%;resize:vertical;min-height:84px}
.cp-compose textarea:focus-visible{outline:2px solid var(--dot);outline-offset:1px}
.cp-thread{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.cp-thread li{display:flex}
.cp-thread li.us{justify-content:flex-start}.cp-thread li.them{justify-content:flex-end}
.cp-msg{max-width:min(620px,92%);border:1px solid var(--line);border-radius:10px;padding:10px 14px;background:var(--bg)}
.cp-thread li.us .cp-msg{background:var(--panel);border-color:var(--pathline)}
.cp-meta{font-size:12.5px;color:var(--ink2);margin-bottom:4px}.cp-meta b{color:var(--ink)}
.cp-body{white-space:pre-wrap;font-size:15.5px}
.cp-rec{display:grid;gap:10px;padding:14px;border:1px solid var(--line);border-radius:10px;background:var(--bg)}
.cp-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
.cp-fields label{display:grid;gap:4px;font-size:13px;font-weight:600;color:var(--ink2)}
.cp-fields input:not([type=checkbox]),.cp-fields textarea,.cp-fields select,.cp-ms input,.cp-ms select{font:15px var(--body);color:var(--ink);background:var(--surface);border:1.5px solid var(--line);border-radius:8px;padding:8px 10px;width:100%}
.cp-fields input[type=checkbox]{width:18px;height:18px;accent-color:var(--dot)}
.cp-mslist{display:grid;gap:6px}
.cp-ms{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,.9fr) auto;gap:6px;align-items:center}
.cp-danger{border-color:#B4413A!important;color:#B4413A!important}
.cp-people{margin:0 0 6px;padding-left:18px;display:grid;gap:4px}
@media (max-width:700px){.cp-ms{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.cp-feed li{grid-template-columns:1fr;gap:2px}}
@media (max-width:560px){.cportal .p-top .p-wrap{gap:10px}.cportal .p-who{font-size:13px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cportal #cpWho{display:none}.cportal .p-out{padding:7px 12px;font-size:13px;flex:none}.cportal .p-top .logo{font-size:19px}}
/* portal brief (2 Nov 2026) */
.bf{gap:14px}
.bf h3{font-size:22px}
.bf-grp{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2);margin-top:8px}
.bf-svc{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 14px;align-items:center;padding:12px 0;border-top:1px solid var(--line)}
.bf-svc > input{grid-column:1/-1;width:100%;font:400 14.5px var(--body);padding:8px 12px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink)}
.bf-svc > input[data-bfextra]{grid-column:auto}
.bf-seg{display:inline-flex;border:1.5px solid var(--line);border-radius:999px;padding:2px;gap:2px;background:var(--bg)}
.bf-seg button{font:600 13.5px var(--body);border:0;background:none;border-radius:999px;padding:7px 12px;cursor:pointer;color:var(--ink2);min-height:36px}
.bf-seg button[aria-checked="true"][data-v="focus"]{background:var(--btn);color:var(--btnInk)}
.bf-seg button[aria-checked="true"][data-v="offer"]{background:var(--surface);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.bf-seg button[aria-checked="true"][data-v="no"]{background:var(--panel);color:var(--ink);text-decoration:line-through}
.bf-ticks{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.bf-ticks label{display:grid;grid-template-columns:24px 1fr;gap:12px;align-items:start;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:var(--bg);cursor:pointer}
.bf-ticks input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--dot)}
.bf-ticks label:has(input:checked){border-color:var(--dot);background:var(--surface)}
.bf-ticks small{display:block;color:var(--ink2);font-size:13.5px}
.bf-qa{display:grid;gap:12px}
.bf-qa label{display:grid;gap:6px;font-weight:500}
.bf-qa textarea,.bf-qa input{width:100%;font:400 15px var(--body);padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--bg);color:var(--ink);resize:vertical}
.bf-never{display:grid;gap:6px;padding:14px 16px;border-radius:14px;background:var(--panel);font-size:14.5px}
.bf-never b{font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.bf-prog{display:flex;align-items:center;gap:12px;font-size:14px;color:var(--ink2)}
.bf-track{flex:1;height:8px;border-radius:999px;background:var(--panel);overflow:hidden;border:1px solid var(--line)}
.bf-track span{display:block;height:100%;background:var(--dot);border-radius:999px;transition:width .4s ease}
.bf-nav{display:flex;flex-wrap:wrap;gap:8px}
.bf-nav button{font:600 13.5px var(--body);border:1.5px solid var(--line);background:var(--surface);border-radius:999px;padding:7px 13px;cursor:pointer;color:var(--ink)}
.bf-nav button[aria-current="step"]{border-color:var(--ink)}
.bf-ok{color:var(--dot)}
.bf-sum ul{margin:4px 0;padding-left:18px}
.bf-sum dt{font-weight:600;margin-top:6px}.bf-sum dd{margin:0;color:var(--ink2)}
@media (max-width:700px){.bf-svc{grid-template-columns:minmax(0,1fr)}.bf-seg{justify-self:start}}
@media (prefers-reduced-motion:reduce){.bf-track span{transition:none}}