/* ============================================================
   SolTrace — site stylesheet
   Source of truth for the public site's design system.
   Extracted from the beta landing page (soltrace-walkthrough-dark)
   and extended for the multi-page site. Do not hard-code colours
   in page markup — everything reads from the tokens below.

   Relationship to the app (APP_DESIGN.md):
   · Site accent  --teal   #2BC4B8  (bright teal on dark ink — marketing surfaces)
   · App accent   #0E7C86  (deep teal on light surfaces — colour carries status)
   Same ink family, sibling teals. Keep it that way.

   Fonts: system stacks only — no Google Fonts (they log visitor IPs).
   ============================================================ */

:root{
  --ink:#14202B; --ink-2:#1B2A38; --ink-3:#243544;
  --paper:#EEF2F1; --soft:#C4D0D8; --muted:#93A2AD; --line:#2D3E4C;
  --teal:#2BC4B8; --teal-2:#12938C; --white:#FFFFFF;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono","Cascadia Code","Roboto Mono",Consolas,"Liberation Mono",monospace;
  --maxw:1040px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--ink); color:var(--paper);
  font-family:var(--sans); line-height:1.55; -webkit-font-smoothing:antialiased;
  background-image:radial-gradient(60rem 40rem at 78% -10%, rgba(43,196,184,.10), transparent 60%);
}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}
a{color:inherit}
img{max-width:100%}

/* Skip link */
.skip{position:absolute; left:-9999px; top:0; background:var(--teal); color:#08201C; padding:10px 16px; border-radius:0 0 9px 0; font-weight:650; z-index:100}
.skip:focus{left:0}

/* ---------- Header + nav ---------- */
.site{display:flex; align-items:center; gap:18px; padding:24px 0 20px; position:relative; flex-wrap:wrap}
.brandbar{display:inline-flex; align-items:center; justify-content:center; background:#FAF9F9; padding:9px 16px; border-radius:12px; border:1px solid rgba(20,32,43,.10); box-shadow:0 12px 32px -14px rgba(0,0,0,.55)}
.brandbar img{height:44px; width:auto; display:block}
.tag{font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--muted); text-transform:uppercase}

.nav{display:flex; align-items:center; gap:20px; margin-left:auto}
.nav a{font-size:13.5px; color:var(--soft); text-decoration:none; letter-spacing:.01em; padding:4px 0}
.nav a:hover{color:var(--paper)}
.nav a.active{color:var(--teal)}
.nav a:focus-visible{outline:2px solid var(--teal); outline-offset:3px; border-radius:4px}
.nav .nav-cta{background:var(--teal); color:#08201C; font-weight:650; padding:9px 14px; border-radius:9px}
.nav .nav-cta:hover{background:#4AD3C8; color:#08201C}

.nav-toggle{display:none; margin-left:auto; background:var(--ink-2); border:1px solid var(--line); border-radius:9px; padding:9px 11px; cursor:pointer; color:var(--paper)}
.nav-toggle svg{display:block}
.nav-toggle:focus-visible{outline:2px solid var(--teal); outline-offset:2px}

@media (max-width:1150px){ .tag{display:none} }
@media (max-width:880px){
  .nav-toggle{display:inline-flex}
  .nav{display:none; position:absolute; top:100%; left:0; right:0; z-index:50;
       flex-direction:column; align-items:flex-start; gap:4px;
       background:var(--ink-2); border:1px solid var(--line); border-radius:14px; padding:14px 18px;
       box-shadow:0 24px 48px -18px rgba(0,0,0,.6)}
  .nav.open{display:flex}
  .nav a{padding:9px 0; font-size:15px; width:100%}
  .nav .nav-cta{margin-top:8px; text-align:center; width:100%}
}

/* ---------- Hero ---------- */
.hero{padding:50px 0 20px; max-width:740px; animation:rise .6s ease both}
.eyebrow{font-family:var(--mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--teal); margin:0 0 22px}
h1{font-size:clamp(34px,6vw,56px); line-height:1.05; letter-spacing:-.025em; font-weight:650; margin:0 0 20px}
h1 em{font-style:normal; color:var(--teal)}
.lede{font-size:clamp(17px,2.3vw,20px); color:var(--soft); max-width:610px; margin:0}
.lede strong{color:var(--paper); font-weight:600}
.support{font-size:clamp(16px,2.1vw,19px); font-weight:650; color:var(--paper); margin:20px 0 0}

.cta-row{display:flex; gap:12px; flex-wrap:wrap; margin:28px 0 0}
.btn{border:0; border-radius:9px; padding:14px 20px; background:var(--teal); color:#08201C; font:inherit; font-weight:650; font-size:15px; cursor:pointer; letter-spacing:.01em; text-decoration:none; display:inline-block; text-align:center}
.btn:hover{background:#4AD3C8}
.btn:focus-visible{outline:2px solid var(--white); outline-offset:2px}
.btn-ghost{background:transparent; color:var(--teal); border:1px solid var(--teal-2)}
.btn-ghost:hover{background:rgba(43,196,184,.10); color:var(--teal)}

/* ---------- Strapline (three-beat promise) ---------- */
.strapline{margin:56px 0 20px}
.strap-line{font-size:clamp(22px,3.6vw,34px); font-weight:650; letter-spacing:-.02em; color:var(--paper); margin:0 0 8px}
.strap-def{font-size:clamp(14px,1.9vw,16px); color:var(--muted); max-width:640px; margin:0}

/* Section kicker (mono label above a section) */
.kicker{font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin:56px 0 18px}

/* ---------- Sequence — the signature ---------- */
.flow{display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:14px; overflow:hidden}
.step{background:var(--ink-2); padding:22px 18px; position:relative}
.step .no{font-family:var(--mono); font-size:12px; color:var(--teal); letter-spacing:.06em}
.step h3{font-size:15px; margin:12px 0 6px; letter-spacing:-.01em; color:var(--paper)}
.step p{font-size:13px; color:var(--muted); margin:0}
.step .bar{position:absolute; left:0; top:0; height:3px; width:100%; background:var(--line)}
.step:first-child .bar{background:linear-gradient(90deg,var(--teal),#7BE0D6)}

/* ---------- Payoff ---------- */
.payoff{display:flex; gap:14px; align-items:flex-start; margin:30px 0 8px; padding:20px 22px; border-left:3px solid var(--teal); background:rgba(43,196,184,.08); border-radius:0 10px 10px 0; max-width:780px}
.payoff svg{flex:none; margin-top:2px}
.payoff p{margin:0; font-size:15px; color:var(--soft)}
.payoff strong{font-weight:650; color:var(--paper)}

/* ---------- Capability cards ---------- */
.cards{display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin:18px 0 8px}
.card{display:block; background:var(--ink-2); border:1px solid var(--line); border-radius:14px; padding:22px; text-decoration:none; transition:border-color .15s ease}
.card:hover{border-color:var(--teal-2)}
.card:focus-visible{outline:2px solid var(--teal); outline-offset:2px}
.card .k{font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--teal)}
.card h3{font-size:16.5px; margin:10px 0 8px; letter-spacing:-.01em; color:var(--paper)}
.card p{margin:0; font-size:14px; color:var(--muted)}
.card .more{display:inline-block; margin-top:12px; font-size:13px; font-weight:650; color:var(--teal)}
@media (max-width:640px){ .cards{grid-template-columns:1fr} }

/* ---------- 2027 band ---------- */
.band{margin:64px 0 8px; padding:36px 34px; border:1px solid var(--line); border-radius:18px;
      background:linear-gradient(180deg,var(--ink-2),var(--ink)); position:relative; overflow:hidden}
.band::after{content:""; position:absolute; top:-40%; right:-10%; width:36rem; height:24rem;
      background:radial-gradient(closest-side, rgba(43,196,184,.14), transparent 70%); pointer-events:none}
.band .eyebrow{margin-bottom:14px}
.band h2{font-size:clamp(24px,3.8vw,32px); letter-spacing:-.02em; margin:0 0 12px; max-width:640px}
.band p{margin:0; color:var(--soft); max-width:640px; position:relative; z-index:1}
.band .date{font-family:var(--mono); color:var(--teal); white-space:nowrap}

/* ---------- Price strip ---------- */
.pricestrip{display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;
      margin:26px 0 8px; padding:20px 24px; border:1px solid var(--line); border-radius:14px; background:var(--ink-2)}
.pricestrip p{margin:0; font-size:15px; color:var(--soft)}
.pricestrip strong{color:var(--paper); font-weight:650}
.pricestrip .vat{color:var(--muted); font-size:13px}
.pricestrip .pricelink{font-weight:650; color:var(--teal); text-decoration:none; white-space:nowrap}
.pricestrip .pricelink:hover{text-decoration:underline; text-underline-offset:3px}

/* ---------- Join / CTA card + form ---------- */
.join{margin:66px 0 24px; display:flex; justify-content:center}
.join-card{width:100%; max-width:480px; text-align:center; border:1px solid var(--line); border-radius:18px; background:var(--ink-2); padding:34px 30px}
.join-card h2{font-size:24px; letter-spacing:-.01em; margin:0 0 6px}
.join-card .sub{color:var(--muted); font-size:14px; margin:0 0 24px}
form{text-align:left; display:grid; gap:12px}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:12px}
label{display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin:0 0 6px}
label .opt{color:#5E6E7A; text-transform:none; letter-spacing:0}
input[type=text],input[type=email],textarea{width:100%; padding:12px 14px; border-radius:9px; border:1px solid transparent; background:var(--white); color:var(--ink); font:inherit; font-size:15px}
textarea{resize:vertical; min-height:120px}
input::placeholder,textarea::placeholder{color:#8C99A2}
input:focus-visible,textarea:focus-visible{outline:2px solid var(--teal); outline-offset:1px; border-color:var(--teal)}
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus{-webkit-text-fill-color:var(--ink); box-shadow:0 0 0 1000px var(--white) inset; caret-color:var(--ink)}
.consent{display:flex; gap:10px; align-items:flex-start; margin:4px 0 6px; font-size:12.5px; color:var(--soft)}
.consent input{margin-top:3px; accent-color:var(--teal); width:16px; height:16px; flex:none}
.consent a{color:var(--teal); text-underline-offset:2px}
.consent label{font-family:var(--sans); text-transform:none; letter-spacing:0; font-size:12.5px; color:var(--soft); margin:0}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.cf-turnstile{min-height:65px}

.markers{margin:26px 0 0; font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--muted); line-height:1.9}
.markers span{white-space:nowrap}
.dotsep{color:var(--teal); margin:0 8px}

/* ---------- Inner-page patterns ---------- */
.page-head{padding:44px 0 6px; max-width:760px; animation:rise .6s ease both}
.page-head h1{font-size:clamp(30px,4.8vw,44px)}
.page-head .lede{max-width:640px}

.prose{max-width:720px}
.prose h2{font-size:clamp(20px,2.8vw,24px); letter-spacing:-.015em; margin:38px 0 10px}
.prose h3{font-size:17px; margin:26px 0 8px}
.prose p{color:var(--soft); margin:0 0 14px}
.prose strong{color:var(--paper)}
.prose ul{color:var(--soft); padding-left:20px; margin:0 0 14px}
.prose li{margin:0 0 6px}
.prose a{color:var(--teal); text-underline-offset:3px}
.divider{border:0; border-top:1px solid var(--line); margin:44px 0}

/* ---------- Footer ---------- */
footer{border-top:1px solid var(--line); margin-top:48px; padding:28px 0 44px; color:var(--muted); font-size:13px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px}
footer a{color:var(--muted); text-decoration:none}
footer a:hover{color:var(--paper)}
.foot-legal{max-width:640px; line-height:1.6}
.foot-links{display:flex; gap:18px; flex-wrap:wrap; justify-content:center}
.foot-copy{color:#6E7E8A}

/* ---------- Motion + responsive ---------- */
@keyframes rise{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}
@media (max-width:820px){
  .flow{grid-template-columns:1fr 1fr}
}
@media (max-width:520px){
  .flow{grid-template-columns:1fr}
  .hero{padding-top:34px}
  .row2{grid-template-columns:1fr}
  .band{padding:28px 22px}
}
@media (prefers-reduced-motion:reduce){*{animation:none !important; transition:none !important}}

/* ---- cutover refactor classes (WO-SITE-CUTOVER-1 section 2b) ---- */
.brand-link{text-decoration:none}
.turnstile-slot{margin:4px 0 2px}