/* ==========================================================================
   DesignedByRashon — shared design system  (PWOS v1.1.0, Stage 2)
   Product aesthetic: dark ink on cool paper, one cobalt signal. Verified AA.
   ========================================================================== */

:root{
  --ink:#0F1117;
  --paper:#F5F6F7;
  --surface:#FFFFFF;
  --muted:#565C68;
  --line:#E2E5E9;
  --line-strong:#CBD0D7;
  --accent:#2947D4;
  --accent-dk:#1F3AB8;
  --accent-wash:#EDF0FD;
  --ok:#0F7B4F;

  --fs-mono: 0.8125rem;
  --fs-cap: 0.9375rem;
  --fs-ui: 1rem;
  --fs-body: clamp(1.0625rem, 1rem + 0.2vw, 1.1875rem);
  --fs-step: clamp(1rem, .97rem + .18vw, 1.0625rem);
  --fs-stat-value: clamp(1.0625rem, .98rem + .3vw, 1.25rem);
  --fs-lead: clamp(1.25rem, 1.12rem + 0.45vw, 1.5rem);
  --fs-h4: clamp(1.25rem, 1.08rem + 0.65vw, 1.625rem);
  --fs-h3: clamp(1.625rem, 1.3rem + 1.15vw, 2.25rem);
  --fs-h2: clamp(2.25rem, 1.65rem + 2.1vw, 4rem);
  --fs-h1: clamp(2.75rem, 1.95rem + 2.8vw, 5rem);
  --fs-display-xl: clamp(3rem, 2rem + 4.25vw, 6rem);

  --sp-1:.3rem; --sp-2:.65rem; --sp-3:1rem; --sp-4:1.3rem; --sp-5:1.6rem;
  --sp-6:2rem; --sp-8:2.6rem; --sp-10:3.25rem; --sp-12:4rem; --sp-16:5.2rem; --sp-20:6.5rem;

  --r-sm:6px; --r-md:10px; --r-lg:14px;
  --tap:44px;
  --ease:cubic-bezier(.22,1,.36,1);
  --header-h:3.75rem;

  --f-display:'Geist', 'Helvetica Neue', Arial, sans-serif;
  --f-body:'Atkinson Hyperlegible Next', 'Atkinson Hyperlegible', Verdana, Arial, sans-serif;
  --f-mono:'Geist Mono', 'SFMono-Regular', Consolas, monospace;
  --z-sticky:20;
}

@media (min-width:700px){
  :root{
    --fs-h1:clamp(3.25rem, 2.6rem + 1.5vw, 4rem);
    --fs-display-xl:clamp(3.75rem, 2.75rem + 2.25vw, 4.5rem);
  }
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 1rem); }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--f-body); font-size:var(--fs-body); line-height:1.65;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  background-image:
    linear-gradient(to right, rgba(15,17,23,.025) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15,17,23,.025) 1px, transparent 1px);
  background-size:44px 44px;
}
img,svg{ display:block; max-width:100%; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
a{ color:inherit; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p,figure,dl,dd,dt{ margin:0; }
button{ font-family:var(--f-display); font-size:var(--fs-ui); font-weight:600; color:inherit; background:none; border:0; cursor:pointer; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:2px; }

.skip-link{
  position:absolute; left:1rem; top:-100px; background:var(--ink); color:#fff;
  padding:.6rem 1rem; z-index:100; font-family:var(--f-mono); font-size:var(--fs-mono);
  border-radius:var(--r-sm); transition:top .18s var(--ease);
}
.skip-link:focus{ top:1rem; }

.wrap{ max-width:74rem; margin-inline:auto; padding-inline:var(--sp-5); }
.wrap-narrow{ max-width:60rem; margin-inline:auto; padding-inline:var(--sp-5); }
@media (min-width:640px){ .wrap,.wrap-narrow{ padding-inline:var(--sp-8); } }

/* ---------- type helpers ---------- */
.mono{ font-family:var(--f-mono); font-size:var(--fs-mono); letter-spacing:.02em; }
.kicker{
  font-family:var(--f-mono); font-size:var(--fs-mono); letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted); display:inline-flex; align-items:center; gap:.5rem;
}
.kicker::before{ content:""; width:14px; height:1px; background:var(--accent); display:inline-block; }
.prose{ max-width:62ch; color:var(--muted); text-wrap:pretty; }
.prose strong{ color:var(--ink); font-weight:600; }
.prose p + p{ margin-top:var(--sp-4); }
.prose a{ color:var(--accent); text-decoration:underline; text-underline-offset:2px; }
.prose a:hover{ color:var(--accent-dk); }

h1.page-title{
  font-family:var(--f-display); font-weight:650; font-size:var(--fs-h1);
  line-height:1.05; letter-spacing:-.04em; text-wrap:balance;
}
h2.title{
  font-family:var(--f-display); font-weight:620; font-size:var(--fs-h2);
  line-height:1.06; letter-spacing:-.035em; color:var(--ink); max-width:24ch; margin-top:var(--sp-3); text-wrap:balance;
}
h3.sub{ font-family:var(--f-display); font-weight:600; font-size:var(--fs-h3); line-height:1.12; letter-spacing:-.025em; text-wrap:balance; }

/* ---------- buttons / links ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.5rem; min-height:var(--tap);
  padding:.7rem 1.15rem; font-family:var(--f-display); font-size:var(--fs-ui);
  font-weight:600; border-radius:var(--r-sm); white-space:nowrap; text-decoration:none;
  transition:background .14s var(--ease), border-color .14s var(--ease), color .14s var(--ease), transform .14s var(--ease);
}
.btn-primary{ background:var(--accent); color:#fff; border:1px solid var(--accent); }
.btn-primary:hover{ background:var(--accent-dk); border-color:var(--accent-dk); }
.btn-primary:active{ transform:translateY(1px); }
.btn-ghost{ background:var(--surface); color:var(--ink); border:1px solid var(--line-strong); }
.btn-ghost:hover{ border-color:var(--ink); }
.arrow{ transition:transform .14s var(--ease); }
.btn:hover .arrow{ transform:translateX(2px); }
.link{
  font-family:var(--f-display); font-size:var(--fs-ui); font-weight:600; color:var(--accent);
  text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; display:inline-flex; align-items:center; gap:.4rem;
}
.link:hover{ color:var(--accent-dk); }
.link:hover .arrow{ transform:translateX(2px); }

section{ padding-block:var(--sp-16); }
@media (min-width:1024px){ section{ padding-block:var(--sp-20); } }
.divider{ border-top:1px solid var(--line); }
.section-sm{ padding-block:var(--sp-12); }

/* ==========================================================================
   HEADER + NAV (with Solutions dropdown)
   ========================================================================== */
.header{
  position:sticky; top:0; z-index:var(--z-sticky); height:var(--header-h);
  display:flex; align-items:center;
  background:rgba(245,246,247,.82); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  transform:translateY(0); transition:transform .2s var(--ease);
}
.header.hide{ transform:translateY(-100%); }
.header .wrap{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-6); width:100%; }
.brand{ font-family:var(--f-mono); font-weight:600; font-size:var(--fs-cap); letter-spacing:.02em; text-decoration:none; display:flex; align-items:center; gap:.5rem; flex-shrink:0; }
.brand .dot{ width:8px; height:8px; border-radius:2px; background:var(--accent); }

.nav{ display:none; }
.nav > ul{ display:flex; align-items:center; gap:var(--sp-6); }
.nav a, .nav .menu-trigger{
  font-family:var(--f-mono); font-size:var(--fs-mono); letter-spacing:.03em; text-transform:uppercase;
  color:var(--muted); text-decoration:none; padding:.4rem 0; border-bottom:1px solid transparent;
  display:inline-flex; align-items:center; gap:.35rem;
}
.nav a:hover, .nav a[aria-current="page"], .nav .menu-trigger:hover{ color:var(--ink); }
.nav a[aria-current="page"]{ border-bottom-color:var(--accent); color:var(--ink); }

.has-menu{ position:relative; }
.menu-trigger .caret{ width:8px; height:8px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg) translateY(-2px); transition:transform .16s var(--ease); }
.has-menu:hover .caret, .has-menu:focus-within .caret{ transform:rotate(225deg) translateY(2px); }
.submenu{
  position:absolute; top:100%; left:-var(--sp-4); min-width:16rem;
  background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--r-md);
  box-shadow:0 12px 32px -18px rgba(15,17,23,.28); padding:var(--sp-2);
  opacity:0; visibility:hidden; transform:translateY(6px); transition:opacity .16s var(--ease), transform .16s var(--ease), visibility .16s;
  z-index:5;
}
.has-menu:hover .submenu, .has-menu:focus-within .submenu, .submenu.open{ opacity:1; visibility:visible; transform:translateY(0); }
.submenu li a{
  display:block; text-transform:none; letter-spacing:0; color:var(--ink);
  font-family:var(--f-body); font-size:var(--fs-cap); padding:.6rem .7rem; border-radius:var(--r-sm); border:0;
}
.submenu li a:hover{ background:var(--accent-wash); color:var(--accent); }
.submenu li a .desc{ display:block; font-family:var(--f-mono); font-size:var(--fs-mono); color:var(--muted); margin-top:2px; }
.submenu li a:hover .desc{ color:var(--accent); }

.header-actions{ display:flex; align-items:center; gap:var(--sp-3); }
.header-cta{ display:none; }
.burger{ width:var(--tap); height:var(--tap); display:flex; align-items:center; justify-content:center; border:1px solid var(--line-strong); border-radius:var(--r-sm); background:var(--surface); }
.burger span, .burger span::before, .burger span::after{ content:""; display:block; width:18px; height:2px; background:var(--ink); position:relative; }
.burger span::before{ position:absolute; top:-6px; } .burger span::after{ position:absolute; top:6px; }
@media (min-width:960px){ .nav{ display:block; } .header-cta{ display:inline-flex; } .burger{ display:none; } }

/* mobile nav */
.mnav{ display:none; position:fixed; inset:var(--header-h) 0 0 0; z-index:calc(var(--z-sticky) - 1); background:var(--paper); padding:var(--sp-6) var(--sp-5); overflow-y:auto; }
.mnav.open{ display:block; }
.mnav > ul{ display:flex; flex-direction:column; gap:var(--sp-2); }
.mnav > ul > li > a, .mnav-group > .mnav-label{
  font-family:var(--f-display); font-weight:600; font-size:var(--fs-h3); text-decoration:none; display:block; padding:.5rem 0;
}
.mnav-group .mnav-label{ font-size:var(--fs-mono); font-family:var(--f-mono); text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:500; padding-top:var(--sp-4); }
.mnav-sub{ display:flex; flex-direction:column; gap:var(--sp-1); padding-bottom:var(--sp-2); }
.mnav-sub a{ font-family:var(--f-body); font-size:var(--fs-body); text-decoration:none; padding:.35rem 0; color:var(--ink); }
.mnav-cta{ margin-top:var(--sp-5); }
@media (min-width:960px){ .mnav{ display:none !important; } }

/* ==========================================================================
   HERO / LEDE
   ========================================================================== */
.hero{ padding-block:var(--sp-12) var(--sp-16); }
@media (min-width:1024px){ .hero{ padding-block:var(--sp-16) var(--sp-20); } }
.hero-grid{ display:grid; gap:var(--sp-10); align-items:center; }
@media (min-width:960px){ .hero-grid{ grid-template-columns:1.1fr .9fr; gap:var(--sp-12) 5rem; } }
.hero h1{ font-family:var(--f-display); font-weight:650; font-size:var(--fs-display-xl); line-height:1.02; letter-spacing:-.04em; text-wrap:balance; margin-top:var(--sp-5); }
.hero h1 .accent{ color:var(--accent); }
.hero-sub{ margin-top:var(--sp-6); font-size:var(--fs-lead); color:var(--muted); max-width:46ch; }
.hero-sub strong{ color:var(--ink); font-weight:600; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:var(--sp-3); margin-top:var(--sp-8); }

.lede{ padding-block:var(--sp-12) var(--sp-10); }
.lede .crumbs{ margin-bottom:var(--sp-5); }
.lede h1{ margin-top:var(--sp-4); max-width:20ch; }
.lede .sub{ margin-top:var(--sp-6); font-size:var(--fs-lead); color:var(--muted); max-width:52ch; }
.lede .sub strong{ color:var(--ink); font-weight:600; }
.lede-actions{ display:flex; flex-wrap:wrap; gap:var(--sp-3); margin-top:var(--sp-8); }

/* breadcrumb */
.crumbs{ font-family:var(--f-mono); font-size:var(--fs-mono); color:var(--muted); display:flex; gap:.5rem; flex-wrap:wrap; }
.crumbs a{ color:var(--muted); text-decoration:none; }
.crumbs a:hover{ color:var(--accent); }
.crumbs .sep{ opacity:.5; }

/* ==========================================================================
   REUSABLE COMPONENTS
   ========================================================================== */
/* stat strip */
.strip{ border-block:1px solid var(--line); background:var(--surface); }
.strip .wrap{ display:grid; grid-template-columns:repeat(2,1fr); }
@media (min-width:768px){ .strip .wrap{ grid-template-columns:repeat(4,1fr); } }
.strip-cell{ padding:var(--sp-5) var(--sp-4); border-right:1px solid var(--line); border-top:1px solid var(--line); }
.strip-cell:nth-child(-n+2){ border-top:0; }
@media (min-width:768px){ .strip-cell{ border-top:0; } }
.strip-cell:last-child{ border-right:0; }
.strip-cell .k{ font-family:var(--f-mono); font-size:var(--fs-mono); text-transform:uppercase; letter-spacing:.04em; color:var(--muted); }
.strip-cell .v{ font-family:var(--f-display); font-weight:600; font-size:var(--fs-stat-value); line-height:1.3; letter-spacing:-.01em; margin-top:.35rem; }

/* two-column content */
.cols{ display:grid; gap:var(--sp-8); margin-top:var(--sp-8); }
@media (min-width:900px){ .cols{ grid-template-columns:.85fr 1.15fr; gap:4.5rem; } }
.cols.even{ grid-template-columns:1fr; }
@media (min-width:900px){ .cols.even{ grid-template-columns:1fr 1fr; } }

/* checklist / included */
.checklist{ display:grid; gap:var(--sp-3); }
.checklist li{ display:grid; grid-template-columns:auto 1fr; gap:var(--sp-3); align-items:start; padding:var(--sp-3) 0; border-top:1px solid var(--line); }
.checklist li:first-child{ border-top:0; }
.checklist .tick{ color:var(--ok); font-weight:700; font-family:var(--f-mono); }
.checklist b{ font-weight:600; }
.checklist p{ color:var(--muted); font-size:var(--fs-cap); margin-top:2px; }
.checklist:not(.checklist-readable) li > div{ font-size:var(--fs-step); line-height:1.6; }
.checklist-readable b{ display:block; font-family:var(--f-display); font-size:clamp(1.125rem, 1rem + .4vw, 1.3125rem); line-height:1.3; letter-spacing:-.005em; }
.card .checklist-readable p{ font-size:var(--fs-body); line-height:1.55; margin-top:.35rem; }
.checklist-readable .tick{ font-size:1.125rem; line-height:1.4; }

/* feature cards grid */
.cards{ display:grid; gap:var(--sp-6); margin-top:var(--sp-8); }
@media (min-width:700px){ .cards.c2{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:900px){ .cards.c3{ grid-template-columns:repeat(3,1fr); } }
.card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); padding:var(--sp-6); }
.card .no{ font-family:var(--f-mono); font-size:var(--fs-mono); color:var(--accent); }
.card h3{ font-family:var(--f-display); font-weight:600; font-size:var(--fs-h4); line-height:1.22; margin-top:var(--sp-2); letter-spacing:-.015em; text-wrap:balance; }
.card p{ color:var(--muted); font-size:var(--fs-step); line-height:1.6; margin-top:var(--sp-2); }

/* steps / process */
.proc{ display:grid; gap:0; margin-top:var(--sp-8); border-top:1px solid var(--line); }
.proc-step{ display:grid; grid-template-columns:auto 1fr; gap:var(--sp-5); padding:var(--sp-6) 0; border-bottom:1px solid var(--line); align-items:start; }
.proc-step .idx{ font-family:var(--f-mono); font-size:var(--fs-cap); color:var(--accent); padding-top:.35rem; }
.proc-step h3{ font-family:var(--f-display); font-weight:600; font-size:var(--fs-h4); line-height:1.22; letter-spacing:-.015em; text-wrap:balance; }
.proc-step p{ color:var(--muted); font-size:var(--fs-step); line-height:1.6; margin-top:.5rem; max-width:60ch; }
.proc-step .deliver{ margin-top:var(--sp-3); display:flex; flex-wrap:wrap; gap:var(--sp-2); }
.proc-step .deliver span{ font-family:var(--f-mono); font-size:var(--fs-mono); color:var(--muted); border:1px solid var(--line); border-radius:var(--r-sm); padding:.2rem .5rem; }

/* comparison table */
.compare{ border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; background:var(--surface); }
.compare-row{ display:grid; grid-template-columns:5.5rem 1fr; gap:var(--sp-4); padding:var(--sp-5); border-bottom:1px solid var(--line); align-items:start; }
.compare-row:last-child{ border-bottom:0; }
.compare-row.is-dbr{ background:var(--accent-wash); }
.compare-tag{ font-family:var(--f-mono); font-size:var(--fs-mono); color:var(--muted); white-space:nowrap; padding-top:2px; }
.compare-row.is-dbr .compare-tag{ color:var(--accent); }
.compare-row h3{ font-family:var(--f-display); font-weight:600; font-size:clamp(1.125rem, 1.05rem + .3vw, 1.25rem); line-height:1.25; letter-spacing:-.01em; text-wrap:balance; }
.compare-row p{ color:var(--muted); font-size:var(--fs-cap); margin-top:2px; }

/* work / case cards */
.work-grid{ display:grid; gap:var(--sp-6); margin-top:var(--sp-8); }
@media (min-width:900px){ .work-grid{ grid-template-columns:1.4fr 1fr; align-items:stretch; } }
.case{ position:relative; background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--r-lg); padding:var(--sp-6); display:flex; flex-direction:column; gap:var(--sp-5); text-decoration:none; color:inherit; transition:border-color .16s var(--ease), transform .16s var(--ease), box-shadow .16s var(--ease); }
.case:hover{ border-color:var(--accent); transform:translateY(-2px); box-shadow:0 14px 34px -20px rgba(41,71,212,.4); }
.case-top{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); }
.badge{ font-family:var(--f-mono); font-size:var(--fs-mono); letter-spacing:.03em; padding:.25rem .55rem; border-radius:99px; background:var(--accent); color:#fff; font-weight:500; }
.badge.ghost{ background:transparent; color:var(--muted); border:1px solid var(--line-strong); }
.badge.soon{ background:var(--line); color:var(--muted); }
.case-meta{ font-family:var(--f-mono); font-size:var(--fs-mono); color:var(--muted); }
.case h3{ font-family:var(--f-display); font-weight:650; font-size:var(--fs-h4); line-height:1.22; letter-spacing:-.015em; text-wrap:balance; }
.cde{ display:grid; gap:var(--sp-3); border-top:1px solid var(--line); padding-top:var(--sp-4); }
.cde-row{ display:grid; grid-template-columns:5.5rem 1fr; gap:var(--sp-3); align-items:baseline; }
.cde-row dt{ font-family:var(--f-mono); font-size:var(--fs-mono); text-transform:uppercase; letter-spacing:.03em; color:var(--accent); }
.cde-row dd{ margin:0; font-size:var(--fs-cap); color:var(--ink); }
.chips{ display:flex; gap:var(--sp-2); flex-wrap:wrap; margin-top:auto; }
.chip{ font-family:var(--f-mono); font-size:var(--fs-mono); color:var(--muted); border:1px solid var(--line); border-radius:var(--r-sm); padding:.2rem .5rem; }
.case-foot{ font-family:var(--f-mono); font-size:var(--fs-cap); color:var(--accent); display:flex; align-items:center; gap:.4rem; }
.case:hover .case-foot .arrow{ transform:translateX(3px); }
.roadmap{ border:1px dashed var(--line-strong); border-radius:var(--r-lg); padding:var(--sp-6); display:flex; flex-direction:column; gap:var(--sp-4); justify-content:center; }
.roadmap .status{ display:inline-flex; align-items:center; gap:.5rem; font-family:var(--f-mono); font-size:var(--fs-mono); color:var(--muted); }
.roadmap .status i{ width:8px; height:8px; border-radius:50%; background:var(--ok); display:inline-block; }

/* tier legend */
.legend{ display:grid; gap:var(--sp-4); margin-top:var(--sp-8); }
@media (min-width:768px){ .legend{ grid-template-columns:repeat(3,1fr); } }
.legend div{ border-top:2px solid var(--line-strong); padding-top:var(--sp-3); }
.legend dt{ display:inline-block; }
.legend dd{ margin:.5rem 0 0; color:var(--muted); font-size:var(--fs-cap); }

/* pricing */
.tiers{ display:grid; gap:var(--sp-6); margin-top:var(--sp-8); }
@media (min-width:900px){ .tiers{ grid-template-columns:repeat(3,1fr); align-items:start; } }
.pricing-foot{ margin-top:var(--sp-10); padding-top:var(--sp-8); border-top:1px solid var(--line); display:flex; flex-direction:column; gap:var(--sp-3); max-width:64ch; }
.pricing-foot p{ margin:0; color:var(--muted); font-size:var(--fs-cap); line-height:1.6; }
.tier{ background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--r-lg); padding:var(--sp-6); display:flex; flex-direction:column; gap:var(--sp-4); position:relative; }
.tier.feat{ border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
.tier .feat-tag{ position:absolute; top:-.7rem; left:var(--sp-6); background:var(--accent); color:#fff; font-family:var(--f-mono); font-size:var(--fs-mono); padding:.2rem .6rem; border-radius:99px; }
.tier h3{ font-family:var(--f-display); font-weight:600; font-size:var(--fs-h4); line-height:1.22; }
.tier .price{ font-family:var(--f-body); font-weight:600; font-size:2rem; letter-spacing:-.02em; }
.tier .price .cur{ font-size:1.1rem; color:var(--muted); vertical-align:top; margin-right:1px; }
.tier .term{ font-family:var(--f-mono); font-size:var(--fs-mono); text-transform:uppercase; letter-spacing:.03em; color:var(--muted); }
.tier .desc{ color:var(--muted); font-size:var(--fs-cap); }
.tier .tier-list{ display:grid; gap:var(--sp-2); margin-top:var(--sp-2); }
.tier .tier-list li{ display:grid; grid-template-columns:auto 1fr; gap:.5rem; font-size:var(--fs-cap); color:var(--ink); }
.tier .tier-list .tick{ color:var(--ok); font-family:var(--f-mono); }
.tier .btn{ margin-top:var(--sp-2); }

/* payment table */
.ptable{ width:100%; border-collapse:collapse; margin-top:var(--sp-6); font-size:var(--fs-cap); }
.ptable th, .ptable td{ text-align:left; padding:var(--sp-3) var(--sp-4); border-bottom:1px solid var(--line); }
.ptable th{ font-family:var(--f-mono); font-size:var(--fs-mono); text-transform:uppercase; letter-spacing:.04em; color:var(--muted); font-weight:500; }
.ptable td:first-child{ font-weight:600; }
.ptable .wrap-scroll{ overflow-x:auto; }

/* faq */
.faq{ margin-top:var(--sp-8); border-top:1px solid var(--line); }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{ cursor:pointer; padding:var(--sp-5) 0; font-family:var(--f-display); font-weight:600; font-size:var(--fs-lead); display:flex; justify-content:space-between; align-items:center; gap:var(--sp-4); list-style:none; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; font-family:var(--f-mono); font-size:1.25rem; color:var(--accent); transition:transform .16s var(--ease); flex-shrink:0; }
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq p{ padding-bottom:var(--sp-5); color:var(--muted); max-width:66ch; }
.faq em{ color:var(--accent); font-style:normal; font-family:var(--f-mono); font-size:var(--fs-cap); }

/* areas served */
.areas{ display:flex; flex-wrap:wrap; gap:var(--sp-2); margin-top:var(--sp-6); }
.areas span{ display:inline-flex; align-items:center; justify-content:center; line-height:1; font-family:var(--f-mono); font-size:var(--fs-mono); color:var(--muted); border:1px solid var(--line); border-radius:99px; padding:.45rem .8rem; background:var(--surface); white-space:nowrap; }

/* restore original responsive type scale on mobile — undoes any fixed-px font-size
   inline overrides applied via direct edits, which were meant for desktop only */
@media (max-width:767px){
  [style*="font-size"]{ font-size:revert !important; }
}

/* related links */
.related{ display:grid; gap:var(--sp-5); margin-top:var(--sp-8); }
@media (min-width:768px){ .related{ grid-template-columns:repeat(3,1fr); } }
.related a{ display:flex; flex-direction:column; gap:.4rem; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); padding:var(--sp-5); text-decoration:none; color:inherit; transition:border-color .16s var(--ease), transform .16s var(--ease); }
.related a:hover{ border-color:var(--accent); transform:translateY(-2px); }
.related .rk{ font-family:var(--f-mono); font-size:var(--fs-mono); color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
.related .rt{ font-family:var(--f-display); font-weight:600; font-size:var(--fs-body); }
.related .rl{ font-family:var(--f-mono); font-size:var(--fs-cap); color:var(--accent); margin-top:auto; }

/* cta block */
.cta{ background:var(--ink); color:#fff; border-radius:var(--r-lg); padding:var(--sp-10) var(--sp-6); }
@media (min-width:900px){ .cta{ padding:var(--sp-12); } }
.cta .kicker{ color:#9aa2b1; }
.cta .kicker::before{ background:#6f8cff; }
.cta h2{ font-family:var(--f-display); font-weight:600; font-size:var(--fs-h2); letter-spacing:-.02em; max-width:22ch; margin-top:var(--sp-3); line-height:1.12; }
.cta-grid{ display:grid; gap:var(--sp-8); margin-top:var(--sp-8); }
@media (min-width:900px){ .cta-grid{ grid-template-columns:.9fr 1.1fr; gap:var(--sp-12); } }
.cta p.lead{ color:#c3c8d2; font-size:var(--fs-lead); }
.cta-simple{ text-align:left; }
.cta-simple .btn{ margin-top:var(--sp-6); }

/* form */
.form-card{ background:var(--surface); color:var(--ink); border-radius:var(--r-md); padding:var(--sp-6); }
.field{ display:flex; flex-direction:column; gap:.4rem; margin-bottom:var(--sp-5); }
.field label{ font-family:var(--f-body); font-size:var(--fs-cap); font-weight:600; letter-spacing:0; color:var(--ink); }
.field input, .field select, .field textarea{ font:inherit; font-size:var(--fs-body); padding:.65rem .8rem; min-height:var(--tap); border:1px solid var(--line-strong); border-radius:var(--r-sm); background:var(--paper); color:var(--ink); width:100%; }
.field input:focus, .field select:focus, .field textarea:focus{ background:var(--surface); border-color:var(--accent); outline:none; box-shadow:0 0 0 3px var(--accent-wash); }
.field textarea{ min-height:6rem; resize:vertical; }
.form-note{ font-family:var(--f-mono); font-size:var(--fs-mono); color:var(--muted); margin-top:var(--sp-4); line-height:1.5; }

/* meta grid + cde blocks (case study) */
.meta-grid{ display:grid; gap:var(--sp-6); margin-top:var(--sp-10); }
@media (min-width:640px){ .meta-grid{ grid-template-columns:repeat(3,1fr); } }
.meta-grid > div{ border-top:1px solid var(--line-strong); padding-top:var(--sp-3); }
.meta-grid dt{ font-family:var(--f-mono); font-size:var(--fs-mono); text-transform:uppercase; letter-spacing:.04em; color:var(--muted); }
.meta-grid dd{ margin:0; font-family:var(--f-display); font-weight:500; font-size:var(--fs-body); margin-top:.3rem; }

/* terms checklist (guarantee) */
.terms{ display:grid; gap:.4rem; margin-top:var(--sp-6); border:1px solid var(--line); border-radius:var(--r-md); padding:var(--sp-5); background:var(--surface); }
.terms div{ display:flex; align-items:center; gap:.6rem; font-family:var(--f-mono); font-size:var(--fs-cap); padding:.45rem 0; border-top:1px solid var(--line); }
.terms div:first-child{ border-top:0; }
.terms .tick{ color:var(--ok); font-weight:600; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer{ padding-block:var(--sp-12); border-top:1px solid var(--line); }
.footer-grid{ display:grid; gap:var(--sp-8); }
@media (min-width:640px){ .footer-grid{ grid-template-columns:repeat(4,1fr); } }
.footer-col h4{ font-family:var(--f-mono); font-size:var(--fs-mono); text-transform:none; letter-spacing:.02em; color:var(--muted); margin:0 0 var(--sp-4); }
.footer-col ul{ display:flex; flex-direction:column; gap:var(--sp-2); }
.footer-col a{ text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; color:var(--ink); font-size:var(--fs-cap); }
.footer-col a:hover{ color:var(--accent); }
.footer-col li{ font-size:var(--fs-cap); color:var(--muted); }
.footer-base{ margin-top:var(--sp-12); padding-top:var(--sp-5); border-top:1px solid var(--line); display:flex; justify-content:space-between; flex-wrap:wrap; gap:var(--sp-3); font-family:var(--f-mono); font-size:var(--fs-mono); color:var(--muted); }

/* ==========================================================================
   REVEAL / MOTION
   ========================================================================== */
.reveal{ opacity:1; }
.js .reveal{ opacity:0; transform:translateY(10px); }
.js .reveal.in{ opacity:1; transform:none; transition:opacity .5s var(--ease), transform .5s var(--ease); }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .header, .submenu, .caret{ transition:none; }
  .js .reveal{ opacity:1; transform:none; transition:none; }
  .btn, .arrow, .case, .related a, .faq summary::after{ transition:none; }
}

/* ---------- intake form states ---------- */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.field-error{ font-family:var(--f-mono); font-size:var(--fs-mono); color:#B00020; }
.field input[aria-invalid="true"], .field select[aria-invalid="true"]{ border-color:#B00020; box-shadow:0 0 0 3px rgba(176,0,32,.12); }
.form-status{ margin-top:var(--sp-4); padding:var(--sp-3) var(--sp-4); border-radius:var(--r-sm); font-size:var(--fs-cap); line-height:1.5; }
.form-status.is-ok{ background:#E7F4EE; color:#0B5C3B; border:1px solid #BFE3D0; }
.form-status.is-err{ background:#FBEAEC; color:#8A0018; border:1px solid #F3C6CC; }
.form-status.is-info{ background:var(--accent-wash); color:var(--accent-dk); border:1px solid #C9D4F7; }
#intake-submit[aria-busy="true"]{ opacity:.75; cursor:progress; }

/* ---------- Begin Partnership CTA (dark block) ---------- */
.cta-actions{ display:flex; flex-wrap:wrap; gap:var(--sp-3); margin-top:var(--sp-6); }
.btn-ghost-invert{ background:transparent; color:#fff; border:1px solid rgba(255,255,255,.35); }
.btn-ghost-invert:hover{ border-color:#fff; background:rgba(255,255,255,.06); }
.cta-contact{ margin-top:var(--sp-6); font-family:var(--f-mono); font-size:var(--fs-cap); color:#9aa2b1; }
.cta-contact a{ color:#c3c8d2; text-decoration:none; }
.cta-contact a:hover{ color:#fff; }

/* ---------- case-study + work-index components ---------- */
.note{ border:1px solid var(--line); border-left:3px solid var(--accent); background:var(--surface); border-radius:var(--r-md); padding:var(--sp-5); color:var(--muted); font-size:var(--fs-cap); margin-top:var(--sp-6); }
.note strong{ color:var(--ink); }
.case-grid{ display:grid; gap:var(--sp-6); margin-top:var(--sp-8); }
@media (min-width:820px){ .case-grid{ grid-template-columns:1fr 1fr; } }
.friction{ margin-top:var(--sp-8); border-top:1px solid var(--line); }
.friction li{ padding:var(--sp-6) 0; border-bottom:1px solid var(--line); display:grid; grid-template-columns:9rem 1fr; gap:var(--sp-5); align-items:start; }
.friction .heur{ font-family:var(--f-mono); font-size:var(--fs-mono); text-transform:uppercase; letter-spacing:.03em; color:var(--accent); }
.friction h3{ font-family:var(--f-display); font-weight:600; font-size:var(--fs-h3); }
.friction p{ color:var(--muted); font-size:var(--fs-cap); margin-top:.35rem; }
@media (max-width:640px){ .friction li{ grid-template-columns:1fr; gap:var(--sp-2); } }
.ab{ display:grid; gap:var(--sp-5); margin-top:var(--sp-8); }
@media (min-width:768px){ .ab{ grid-template-columns:1fr 1fr; } }
.ab .col{ border:1px solid var(--line); border-radius:var(--r-md); padding:var(--sp-5); background:var(--surface); }
.ab .col.variant{ border-color:var(--accent); background:var(--accent-wash); }
.ab .col h4{ font-family:var(--f-mono); font-size:var(--fs-mono); text-transform:none; letter-spacing:.02em; color:var(--muted); margin:0 0 var(--sp-3); }
.ab .col.variant h4{ color:var(--accent); }
.ab .col p{ font-size:var(--fs-cap); color:var(--ink); }
.ab .col .metrics{ margin-top:var(--sp-3); display:flex; flex-wrap:wrap; gap:var(--sp-2); }
.ab .col .metrics span{ font-family:var(--f-mono); font-size:var(--fs-mono); color:var(--muted); border:1px solid var(--line); border-radius:var(--r-sm); padding:.2rem .5rem; }
.impact{ border:1px solid var(--line-strong); border-radius:var(--r-lg); padding:var(--sp-8); background:var(--surface); margin-top:var(--sp-8); }
.impact .lbl{ font-family:var(--f-mono); font-size:var(--fs-mono); text-transform:uppercase; letter-spacing:.04em; color:var(--muted); }
.impact .big{ font-family:var(--f-display); font-weight:700; font-size:var(--fs-h2); letter-spacing:-.02em; color:var(--accent); margin-top:var(--sp-2); }

/* ==========================================================================
   INTAKE PORTAL (/start) — multi-step wizard, matches site tokens
   ========================================================================== */
.portal{ padding-block:var(--sp-10) var(--sp-16); }
.portal-head{ max-width:44rem; }
.portal-head h1{ font-family:var(--f-display); font-weight:700; font-size:var(--fs-h1); line-height:1.06; letter-spacing:-.03em; text-wrap:balance; margin-top:var(--sp-4); }
.portal-head h1 .accent{ color:var(--accent); }
.portal-head .sub{ margin-top:var(--sp-5); font-size:var(--fs-lead); color:var(--muted); max-width:48ch; }

.wizard{ margin-top:var(--sp-10); max-width:44rem; }
/* progress */
.wz-progress{ position:sticky; top:calc(var(--header-h) + 8px); z-index:5; background:var(--paper); padding-block:var(--sp-3); margin-bottom:var(--sp-6); }
.wz-progress .row{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4); }
.wz-progress .lbl{ font-family:var(--f-mono); font-size:var(--fs-mono); text-transform:uppercase; letter-spacing:.06em; color:var(--muted); }
.wz-progress .pct{ font-family:var(--f-mono); font-size:var(--fs-mono); color:var(--accent); }
.wz-bar{ height:4px; border-radius:99px; background:var(--line); overflow:hidden; margin-top:var(--sp-3); }
.wz-bar > i{ display:block; height:100%; background:var(--accent); border-radius:99px; transition:width .3s var(--ease); width:0; }
@media (prefers-reduced-motion:reduce){ .wz-bar > i{ transition:none; } }

.wz-step{ display:none; }
.wz-step.active{ display:block; animation:wzin .25s var(--ease); }
@media (prefers-reduced-motion:reduce){ .wz-step.active{ animation:none; } }
@keyframes wzin{ from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:none; } }
.wz-step h2{ font-family:var(--f-display); font-weight:600; font-size:var(--fs-h3); letter-spacing:-.01em; }
.wz-step .hint{ color:var(--muted); font-size:var(--fs-cap); margin-top:var(--sp-2); }

/* tier / option selectors */
.wz-options{ display:grid; gap:var(--sp-3); margin-top:var(--sp-6); }
.wz-opt{ display:flex; gap:var(--sp-4); align-items:flex-start; padding:var(--sp-4) var(--sp-5); min-height:var(--tap); border:1px solid var(--line-strong); border-radius:var(--r-md); background:var(--surface); cursor:pointer; transition:border-color .14s var(--ease), background .14s var(--ease); }
.wz-opt:hover{ border-color:var(--ink); }
.wz-opt:has(input:checked){ border-color:var(--accent); background:var(--accent-wash); box-shadow:0 0 0 1px var(--accent); }
.wz-opt:has(input:focus-visible){ outline:2px solid var(--accent); outline-offset:2px; }
.wz-opt input{ margin-top:.25rem; accent-color:var(--accent); width:18px; height:18px; flex-shrink:0; }
.wz-opt > span{ display:flex; flex-direction:column; gap:var(--sp-2); }
.wz-opt .ttl{ display:block; font-family:var(--f-display); font-weight:600; font-size:var(--fs-body); line-height:1.3; }
.wz-opt .meta{ display:block; font-family:var(--f-mono); font-size:var(--fs-mono); color:var(--muted); }
.wz-opt .d{ display:block; color:var(--muted); font-size:var(--fs-cap); line-height:1.5; }

/* scheduler */
.sched{ margin-top:var(--sp-6); }
.sched-dates{ display:flex; gap:var(--sp-2); overflow-x:auto; padding-bottom:var(--sp-2); -webkit-overflow-scrolling:touch; }
.sched-date{ flex:0 0 auto; min-width:4.5rem; min-height:var(--tap); padding:var(--sp-2) var(--sp-3); border:1px solid var(--line-strong); border-radius:var(--r-sm); background:var(--surface); text-align:center; cursor:pointer; font-family:var(--f-mono); font-size:var(--fs-mono); color:var(--ink); transition:border-color .14s var(--ease); }
.sched-date:hover{ border-color:var(--ink); }
.sched-date[aria-pressed="true"]{ border-color:var(--accent); background:var(--accent-wash); color:var(--accent); }
.sched-date .dow{ display:block; color:var(--muted); }
.sched-date[aria-pressed="true"] .dow{ color:var(--accent); }
.sched-date .dnum{ display:block; font-family:var(--f-display); font-weight:600; font-size:var(--fs-body); margin-top:2px; }
.sched-slots{ display:grid; grid-template-columns:1fr; gap:var(--sp-2); margin-top:var(--sp-5); }
@media (min-width:520px){ .sched-slots{ grid-template-columns:1fr 1fr; } }
.sched-slot{ min-height:var(--tap); padding:.7rem 1rem; border:1px solid var(--line-strong); border-radius:var(--r-sm); background:var(--surface); font-family:var(--f-mono); font-size:var(--fs-cap); color:var(--ink); cursor:pointer; text-align:left; transition:border-color .14s var(--ease); }
.sched-slot:hover:not(:disabled){ border-color:var(--ink); }
.sched-slot[aria-pressed="true"]{ border-color:var(--accent); background:var(--accent-wash); color:var(--accent); }
.sched-slot:disabled{ opacity:.4; cursor:not-allowed; text-decoration:line-through; }
.sched-empty{ color:var(--muted); font-size:var(--fs-cap); padding:var(--sp-4) 0; }

/* review list */
.review{ display:grid; gap:0; margin-top:var(--sp-6); border-top:1px solid var(--line); }
.review div{ display:grid; grid-template-columns:8rem 1fr; gap:var(--sp-4); padding:var(--sp-3) 0; border-bottom:1px solid var(--line); font-size:var(--fs-cap); }
.review dt{ font-family:var(--f-mono); font-size:var(--fs-mono); text-transform:uppercase; letter-spacing:.03em; color:var(--muted); }
.review dd{ margin:0; color:var(--ink); }
@media (max-width:520px){ .review div{ grid-template-columns:1fr; gap:2px; } }

/* nav buttons */
.wz-nav{ display:flex; gap:var(--sp-3); margin-top:var(--sp-8); flex-wrap:wrap; }
.wz-nav .spacer{ flex:1; }
.wz-back{ background:transparent; border:1px solid var(--line-strong); border-radius:var(--r-sm); color:var(--ink); min-height:var(--tap); padding:.7rem 1.15rem; font-family:var(--f-display); font-size:var(--fs-ui); font-weight:600; cursor:pointer; }
.wz-back:hover{ border-color:var(--ink); }

/* status banners */
.wz-banner{ padding:var(--sp-3) var(--sp-4); border-radius:var(--r-sm); font-size:var(--fs-cap); line-height:1.5; margin-top:var(--sp-5); }
.wz-banner.err{ background:#FBEAEC; color:#8A0018; border:1px solid #F3C6CC; }
.wz-banner.info{ background:var(--accent-wash); color:var(--accent-dk); border:1px solid #C9D4F7; }
.wz-banner[hidden]{ display:none; }

/* success / downsell result */
.wz-result{ text-align:center; padding:var(--sp-10) 0; }
.wz-result .mark{ width:56px; height:56px; border-radius:50%; background:var(--ok); color:#fff; display:flex; align-items:center; justify-content:center; margin:0 auto var(--sp-5); font-size:1.6rem; }
.wz-result h2{ font-family:var(--f-display); font-weight:700; font-size:var(--fs-h2); letter-spacing:-.02em; }
.wz-result p{ color:var(--muted); max-width:44ch; margin:var(--sp-4) auto 0; }
.wz-result .detail{ display:inline-block; margin-top:var(--sp-6); font-family:var(--f-mono); font-size:var(--fs-cap); color:var(--ink); border:1px solid var(--line-strong); border-radius:var(--r-sm); padding:.6rem 1rem; background:var(--surface); }

/* draft-resume + privacy note */
.wz-meta{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); margin-top:var(--sp-6); flex-wrap:wrap; }
.wz-privacy{ font-family:var(--f-mono); font-size:var(--fs-mono); color:var(--muted); line-height:1.5; max-width:52ch; }
.wz-reset{ font-family:var(--f-mono); font-size:var(--fs-mono); color:var(--muted); background:none; border:0; cursor:pointer; text-decoration:underline; text-underline-offset:2px; }
.wz-reset:hover{ color:var(--accent); }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* ---------- monthly pricing display ---------- */
.tier .price .per{ font-size:1rem; color:var(--muted); font-family:var(--f-mono); font-weight:500; margin-left:2px; }
.tier .term.detail{ text-transform:none; letter-spacing:normal; line-height:1.45; }
