/* ============================================================
   HelloWorld — base components (hw.css)
   Tokens now live in brand.css (loaded first). This file keeps
   every legacy class NAME but consumes the brand token system,
   so surfaces flip correctly in dark mode. Marketing components
   live in app.css (loaded after this file).
   ============================================================ */

/* (token :root removed — see brand.css for the palette + theme roles) */
html{scroll-behavior:smooth}
body{font-family:var(--font);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;line-height:1.55;letter-spacing:-.01em}
a{color:inherit;text-decoration:none}
img{max-width:100%}

/* ── accessibility: visible keyboard focus + skip link ── */
a:focus-visible,button:focus-visible,summary:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible,
[tabindex]:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
summary:focus:not(:focus-visible){outline:none}
.skip-link{position:absolute;left:-9999px;top:0;z-index:1000;background:var(--violet);color:#fff;font-weight:600;padding:10px 18px;border-radius:0 0 12px 0;box-shadow:var(--shadow)}
.skip-link:focus,.skip-link:focus-visible{left:0;outline:2px solid #fff;outline-offset:-4px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.center{text-align:center}
.mono{font-variant-numeric:tabular-nums}

/* nav */
/* header bar only — body > nav, so breadcrumb <nav>s inside pages stay plain */
body > nav{position:relative;z-index:50;background:var(--surface);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:60px;max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.brand{font-weight:700;font-size:20px;letter-spacing:-.03em;display:inline-flex;align-items:center;gap:10px}
.brand b{color:var(--accent);font-weight:700}
.brand .ie{color:var(--accent)}
.nav-links{display:flex;gap:30px;align-items:center}
.nav-links a{font-size:15px;color:var(--ink-2);font-weight:500;transition:color .15s}
.nav-links a:not(.btn):hover{color:var(--ink)}
/* .nav-links a (0,1,1) outranks .btn-primary (0,1,0): re-assert button text colours inside the nav */
.nav-links a.btn-primary,.nav-links a.btn-primary:hover{color:#fff}
.nav-links a.btn-ghost{color:var(--ink)}
@media(max-width:760px){.nav-links a:not(.btn):not(.theme-toggle){display:none}}
/* phones: tighter nav; the CTA moves into the burger panel (brand.js clones every nav link) so it never wraps into the logo */
@media(max-width:760px){.nav-links{gap:12px}.nav-links a.btn{white-space:nowrap}}
@media(max-width:480px){.nav-links > a.btn{display:none}}
/* mobile menu (burger + panel injected by brand.js on every page) */
.sf-burger{display:none;flex-direction:column;justify-content:center;gap:4px;width:38px;height:38px;border:1px solid var(--line);border-radius:10px;background:var(--card);cursor:pointer;padding:0;align-items:center}
.sf-burger span{display:block;width:16px;height:2px;border-radius:2px;background:var(--ink);transition:transform .18s,opacity .18s}
.sf-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.sf-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.sf-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media(max-width:760px){.sf-burger{display:flex}}
.sf-mnav{display:none;position:absolute;left:0;right:0;top:100%;z-index:60;background:var(--card);border-bottom:1px solid var(--line);box-shadow:var(--shadow-lg);padding:10px 0}
.sf-mnav.open{display:block}
/* plain links only — buttons keep their own component styling untouched */
.sf-mnav a:not(.btn):not(.btn-a){display:block;padding:13px var(--pad);font-size:16px;font-weight:600;color:var(--ink)}
.sf-mnav a:not(.btn):not(.btn-a):hover{background:var(--soft);color:var(--ink)}
.sf-mnav a.btn,.sf-mnav a.btn-a{margin:10px var(--pad) 6px}
/* belt-and-braces: cloned CTAs stay white-on-violet in every state */
.sf-mnav a.btn-primary,.sf-mnav a.btn-primary:hover,.sf-mnav a.btn-primary:active,
.sf-mnav a.btn-a.primary,.sf-mnav a.btn-a.primary:hover,.sf-mnav a.btn-a.primary:active{color:#fff}
/* never linger into desktop layouts */
@media(min-width:861px){.sf-mnav{display:none!important}}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--font);font-weight:600;font-size:16px;border:1px solid transparent;cursor:pointer;border-radius:980px;padding:13px 26px;transition:transform .12s,box-shadow .18s,background .18s;line-height:1}
.btn-primary{background:var(--accent);color:#fff;box-shadow:0 8px 22px color-mix(in srgb,var(--violet) 28%,transparent)}
/* dark theme flips --accent to lilac, which fails with white text — pin primaries to fixed violet */
:root[data-theme="dark"] .btn-primary,:root[data-theme="dark"] .btn.bg{background:var(--violet)}
.btn-primary:hover{background:var(--magenta);transform:translateY(-1px);box-shadow:0 12px 28px color-mix(in srgb,var(--violet) 38%,transparent)}
.btn-grad{background:var(--grad);color:#fff;box-shadow:0 8px 22px color-mix(in srgb,var(--violet) 30%,transparent)}
.btn-grad:hover{transform:translateY(-1px);box-shadow:0 14px 32px color-mix(in srgb,var(--violet) 40%,transparent)}
.btn-ghost{background:var(--card);color:var(--ink);border-color:var(--line);box-shadow:var(--shadow)}
.btn-ghost:hover{border-color:var(--accent);transform:translateY(-1px)}
.btn-text{color:var(--accent);font-weight:600;font-size:16px;display:inline-flex;align-items:center;gap:6px}
.btn-text:hover{gap:10px}
.btn-sm{padding:9px 18px;font-size:15px}
.btn-lg{padding:15px 30px;font-size:17px}
/* explicit state colours: no inherited link rule may ever restyle button text (both themes) */
.btn-primary:hover,.btn-primary:focus-visible,.btn-primary:active{color:#fff}
.btn-grad:hover,.btn-grad:focus-visible,.btn-grad:active{color:#fff}
.btn.bg:hover,.btn.bg:active{color:#fff}
.btn-ghost:hover,.btn-ghost:focus-visible,.btn-ghost:active{color:var(--ink)}
.cta-band .btn-primary:hover,.cta-band .btn-primary:active{color:var(--violet)}
/* pressed feedback: every button visibly depresses and darkens */
.btn:active{transform:translateY(1px)}
.btn-primary:active{background:var(--magenta);box-shadow:0 4px 12px color-mix(in srgb,var(--violet) 30%,transparent)}
.btn-grad:active{filter:brightness(.92)}
.btn-ghost:active{background:var(--soft);border-color:var(--accent)}
.cta-band .btn-primary:active{background:#e4e9fb}
/* dark theme: the violet pin above outranks the white CTA-band pill, which left violet text on violet. Re-pin it. */
:root[data-theme="dark"] .cta-band .btn-primary{background:#fff;color:var(--violet)}
:root[data-theme="dark"] .cta-band .btn-primary:hover,:root[data-theme="dark"] .cta-band .btn-primary:focus-visible{background:#f1f5ff;color:var(--violet)}
:root[data-theme="dark"] .cta-band .btn-primary:active{background:#e4e9fb;color:var(--violet)}

/* type + sections */
.eyebrow,.kicker{font-size:14px;font-weight:700;letter-spacing:.02em;color:var(--accent);text-transform:none;margin-bottom:14px;display:inline-block}
section{padding:88px 0;position:relative}
.soft{background:var(--soft)}
h1{font-size:clamp(40px,6.2vw,70px);line-height:1.05;font-weight:700;letter-spacing:-.035em;margin-bottom:18px}
h2{font-size:clamp(28px,4vw,44px);line-height:1.1;font-weight:700;letter-spacing:-.03em;max-width:20ch;margin-bottom:12px}
.center h2{margin-left:auto;margin-right:auto}
h3{font-weight:600;letter-spacing:-.01em}
.lead{font-size:clamp(18px,2.2vw,22px);color:var(--ink-2);max-width:40ch;line-height:1.45;font-weight:400}
.lead+.lead{margin-top:14px}
.hero-cta{display:flex;gap:13px;flex-wrap:wrap;align-items:center;margin-top:28px}
.hero-cta+.note,.lead+.note{margin-top:16px}
.lead-p{font-size:clamp(17px,2vw,20px);color:var(--ink-2);max-width:54ch;margin-top:18px;line-height:1.55}
.center .lead,.center .lead-p{margin-left:auto;margin-right:auto}
.sec-head{margin-bottom:48px}

/* card */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:30px;box-shadow:var(--shadow)}
.soft .card{box-shadow:0 8px 28px oklch(0.235 0.022 288 / .05)}

/* grids */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media(max-width:860px){.grid-2,.grid-3{grid-template-columns:1fr}}
@media(max-width:900px){.grid-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.grid-4{grid-template-columns:1fr}}

/* steps (coloured) */
.step{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:30px;box-shadow:var(--shadow)}
.step .ic{width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:18px}
.step h3{font-size:20px;margin-bottom:8px}
.step p{color:var(--ink-2);font-size:15.5px;line-height:1.55}
.ic-blue{background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent)}
.ic-violet{background:color-mix(in srgb,var(--violet) 14%,transparent);color:var(--violet)}
.ic-teal{background:color-mix(in srgb,var(--lilac) 16%,transparent);color:var(--magenta)}
.ic-amber{background:color-mix(in srgb,var(--amber) 16%,transparent);color:#b9760a}
.ic-green{background:color-mix(in srgb,var(--green) 14%,transparent);color:var(--green)}
.ic-pink{background:color-mix(in srgb,var(--pink) 14%,transparent);color:var(--pink)}

/* services */
.svc{display:flex;flex-direction:column;gap:8px;transition:transform .14s,box-shadow .2s;text-align:left}
.svc:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.svc .stage{font-size:13px;font-weight:700;color:var(--accent)}
.svc h3{font-size:19px}
.svc p{color:var(--ink-2);font-size:15px;flex:1}
.svc .price{font-weight:700;font-size:17px;margin-top:6px}

/* sectors */
.sectors{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:44px}
@media(max-width:820px){.sectors{grid-template-columns:repeat(2,1fr)}}
.sector{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 18px;box-shadow:var(--shadow);font-weight:500;font-size:15px}
.sector .e{display:inline-grid;place-items:center;width:40px;height:40px;flex:0 0 40px;border-radius:12px;color:var(--accent,#6d44e0);background:color-mix(in srgb,var(--accent,#6d44e0) 9%,transparent)}.sector .e .ico{display:block}.sector:hover .e{color:var(--accent,#6d44e0)}

/* proof / split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
@media(max-width:860px){.split{grid-template-columns:1fr;gap:40px}}
.checklist{list-style:none;margin-top:22px;display:grid;gap:15px}
.checklist li{display:flex;gap:12px;font-size:16.5px;color:var(--ink-2);line-height:1.5}
.checklist .tick{flex:0 0 24px;height:24px;border-radius:50%;background:var(--good-bg);color:var(--green);display:flex;align-items:center;justify-content:center}
.checklist .tick svg{width:14px;height:14px}

/* faq */
.faq{max-width:780px;margin:8px auto 0}
.faq details{border-bottom:1px solid var(--line);padding:22px 4px}
.faq summary{font-size:19px;font-weight:600;letter-spacing:-.01em;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--accent);font-weight:400;font-size:26px;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq p{color:var(--ink-2);font-size:17px;line-height:1.6;margin-top:14px;max-width:66ch}

/* answer box (AEO) */
.answer-box{background:var(--grad-soft);border:1px solid var(--line);border-radius:16px;padding:22px 24px;margin:24px 0}
.answer-box .tag{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);margin-bottom:8px}
.answer-box p{margin:0;color:var(--ink);font-size:17px;line-height:1.6}

/* cta band (legacy — app.css .cta-band wins on redesigned pages) */
.cta-band{text-align:center;color:#fff;border-radius:28px;padding:72px 32px;background:var(--grad);box-shadow:var(--shadow-lg)}
.cta-band h2{color:#fff;margin:0 auto}
.cta-band p{color:rgba(255,255,255,.85);font-size:19px;margin:16px auto 28px;max-width:42ch}
.cta-band .btn-primary{background:#fff;color:var(--violet);box-shadow:0 10px 28px rgba(0,0,0,.18)}
.cta-band .btn-primary:hover{background:#f1f5ff}

/* prose (guides / glossary / legal) */
.prose{max-width:760px;margin:0 auto;color:var(--ink-2);font-size:17.5px;line-height:1.75}
.prose h1{font-size:clamp(30px,4.5vw,46px);margin:0 0 18px;color:var(--ink)}
.prose h2{margin:40px 0 14px;color:var(--ink);max-width:none}
.prose h3{font-size:21px;margin:28px 0 10px;color:var(--ink)}
.prose p{margin:0 0 18px}
.prose a{color:var(--accent);font-weight:500}
.prose a:hover{text-decoration:underline}
.prose ul,.prose ol{margin:0 0 18px 22px;display:grid;gap:9px}
.prose blockquote{border-left:3px solid var(--accent);background:var(--soft);padding:14px 18px;border-radius:0 12px 12px 0;margin:0 0 18px;color:var(--ink)}
.prose code{font-family:var(--font);font-weight:600;font-size:.92em;background:var(--soft-2);border:1px solid var(--line);border-radius:6px;padding:1px 6px}
.prose pre{background:var(--void);color:var(--paper);border-radius:12px;padding:18px;overflow:auto;margin:0 0 18px;font-size:14px}
.prose pre code{background:none;border:none;color:inherit;padding:0;font-weight:400}
.prose table{width:100%;border-collapse:collapse;margin:0 0 18px;font-size:15.5px}
.prose th,.prose td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line)}
.prose th{font-weight:600;color:var(--ink);background:var(--soft)}
/* ── Long-form layout: reading column + contents rail ─────────────────────
   .prose keeps its 760px measure (about 70 characters, the readable range),
   but centring it inside the 1180px .wrap left it indented ~120px from the
   nav and the footer, which read as broken alignment rather than as a choice.
   The grid puts the column flush with the rest of the site and gives the
   space on the right to the contents rail. Added by scripts/guide-toc.js,
   which sets .has-toc and injects nav.toc. */
.has-toc{display:grid;grid-template-columns:minmax(0,760px) 244px;column-gap:56px;align-items:start}
.has-toc > *{grid-column:1;min-width:0}
.has-toc > .prose{margin-left:0;margin-right:0}
.has-toc > .toc{grid-column:2;grid-row:1/-1;align-self:start;position:sticky;top:84px}
/* clear the sticky header when a contents link jumps to a heading */
.has-toc :is(h2,h3)[id]{scroll-margin-top:88px}

.toc-title{font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);margin:0 0 10px 14px}
.toc ol{list-style:none;margin:0;padding:0;display:grid;gap:1px;max-height:calc(100vh - 140px);overflow-y:auto}
.toc li{margin:0}
.toc a{display:block;padding:7px 0 7px 14px;border-left:2px solid var(--line);color:var(--ink-3);font-size:14px;line-height:1.35;text-decoration:none;transition:color .15s,border-color .15s}
.toc a:hover{color:var(--accent);border-left-color:var(--accent)}
.toc a.is-current{color:var(--ink);font-weight:600;border-left-color:var(--accent)}
@media(max-width:1080px){
  .has-toc{display:block}
  .has-toc > .prose{margin-left:auto;margin-right:auto}
  .toc{display:none}
}

.article-header{margin-bottom:28px}
.article-tags{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}
.atag{font-size:12px;font-weight:600;color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent);border-radius:999px;padding:4px 12px}
.article-meta{display:flex;gap:18px;color:var(--ink-3);font-size:14px;margin-top:12px}
.article-date,.read-time{display:inline-flex;align-items:center;gap:6px}
.answer-box-tag{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);margin-bottom:8px}
.faq-section{margin-top:34px}
.faq-item{border-top:1px solid var(--line);padding:18px 0}
.faq-q{font-size:18px;color:var(--ink);margin-bottom:8px}
.faq-a{color:var(--ink-2);margin:0}
.article-cta{margin-top:38px;padding:30px;border-radius:16px;background:var(--grad-soft);border:1px solid var(--line);text-align:center}
.article-cta h3{font-size:22px;color:var(--ink);margin-bottom:8px}
.article-cta p{color:var(--ink-2);margin-bottom:18px}
.btn.bg{background:var(--accent);color:#fff;border-radius:980px;padding:13px 24px;font-weight:600;display:inline-flex;box-shadow:0 8px 22px color-mix(in srgb,var(--violet) 25%,transparent)}
.breadcrumb{font-size:13px;color:var(--ink-3);margin-bottom:6px}
.breadcrumb a{color:var(--ink-2)}.breadcrumb .sep{margin:0 8px;color:var(--ink-3)}

/* forms */
.field{margin-bottom:16px}
.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:600px){.field-grid{grid-template-columns:1fr}}
label,.lbl{display:block;font-size:14px;font-weight:600;color:var(--ink);margin-bottom:7px}
input:not([type=checkbox]):not([type=radio]),select,textarea,.fin{width:100%;background:var(--card);border:1px solid var(--line);border-radius:12px;color:var(--ink);font-family:var(--font);font-size:16px;padding:12px 14px;outline:none;transition:border-color .15s,box-shadow .15s;box-shadow:var(--shadow)}
input[type=checkbox],input[type=radio]{width:18px;height:18px;flex:0 0 auto;padding:0;box-shadow:none;accent-color:var(--accent);cursor:pointer}
input:focus,select:focus,textarea:focus,.fin:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
input::placeholder,textarea::placeholder{color:var(--ink-3)}
textarea{resize:vertical;min-height:90px}
.req{color:var(--accent)}.hint{color:var(--ink-3);font-size:13px;margin-top:6px}.err{color:var(--no);font-size:13px;margin-top:6px}
.badge{font-size:12px;font-weight:700;padding:4px 11px;border-radius:999px;display:inline-block}
.badge.ok{background:var(--good-bg);color:var(--green)}.badge.info{background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent)}.badge.warn{background:color-mix(in srgb,var(--amber) 16%,transparent);color:#b9760a}

/* footer */
footer{padding:56px 0 64px;border-top:1px solid var(--line);margin-top:96px}
.foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:28px;align-items:flex-start}
.foot .brand{font-size:18px}
.foot-tag{color:var(--ink-2);font-size:14px;margin-top:8px;max-width:32ch;line-height:1.5}
.foot-links{display:flex;gap:44px;font-size:15px;flex-wrap:wrap}
.foot-col{display:flex;flex-direction:column;gap:10px}
.foot-col a{color:var(--ink-2)}.foot-col a:hover{color:var(--ink)}
.foot-col .h{font-weight:600;color:var(--ink);margin-bottom:2px}
.copyright{color:var(--ink-3);font-size:13px;margin-top:36px}

/* decorative reveal (containers only; respects reduced-motion) */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ── legacy-class compat ── */
.bg-fixed,.grain,.vignette{display:none!important}
.glass{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.sec-head{max-width:680px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px}
@media(max-width:760px){.stats{grid-template-columns:1fr}}
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:26px;box-shadow:var(--shadow)}
.stat .n{font-size:38px;font-weight:800;color:var(--ink)}.stat .n span{color:var(--accent)}.stat .d{color:var(--ink-2);font-size:14px;margin-top:10px}
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}.cards.c3{grid-template-columns:repeat(3,1fr)}
@media(max-width:760px){.cards,.cards.c3{grid-template-columns:1fr}}
.console{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:18px}
.hero{padding:84px 0 64px}.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}@media(max-width:900px){.hero-grid{grid-template-columns:1fr}}
.gsec{margin-bottom:44px}.gsec-label{font-weight:700;color:var(--accent);margin-bottom:18px;border-bottom:1px solid var(--line);padding-bottom:10px}
.guide-list{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}@media(max-width:640px){.guide-list{grid-template-columns:1fr}}
.guide-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:24px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:10px}
.guide-card .cat{font-size:12px;font-weight:700;color:var(--violet)}.guide-card .rt{font-size:12px;color:var(--ink-3)}
.note{font-size:13px;color:var(--ink-3)}.foot-meta{font-size:13px;color:var(--ink-3)}.foot-meta a{color:var(--ink-2)}