/* ============================================================
   GoClauses — Design System
   Style: austere register / statute-book minimalism
   Type:  Libre Caslon Text (headings) / IBM Plex Sans (body) / IBM Plex Mono (data)
   Rule:  no shadows, no rounded corners, one accent (legal red), used sparingly
   ============================================================ */

:root{
  --paper: #fafaf9;
  --paper-raised: #ffffff;
  --paper-sunken: #f0efec;
  --ink: #121212;
  --ink-soft: #4c4b48;
  --ink-faint: #8a8884;
  --line: #d6d4cf;
  --line-strong: #121212;

  --accent: #b91c33;
  --accent-strong: #8c1526;
  --accent-soft: #f3e0e2;
  --on-accent: #fafaf9;

  /* small wayfinding marks only, never a fill color for large surfaces */
  --tag-selling: #33526f;
  --tag-data: #5c3d52;
  --tag-enterprise: #6b5426;
  --tag-ai: #2f5c44;
  --tag-team: #7a2f28;

  /* inverse surfaces (bands, footer) stay dark in both themes */
  --inverse: #121212;
  --on-ink: #f4f3f0;
  --on-ink-soft: #b8b6b0;
  --on-ink-line: #333230;

  --radius: 0px;
  --shadow: none;
  --maxw: 1180px;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper: #0e0e0d;
    --paper-raised: #161615;
    --paper-sunken: #060605;
    --ink: #f2f1ee;
    --ink-soft: #b9b7b1;
    --ink-faint: #7d7b76;
    --line: #2e2d2a;
    --line-strong: #f2f1ee;
    --accent: #ff5a6e;
    --accent-strong: #ff8090;
    --accent-soft: #2a1418;
    --on-accent: #120608;
    --tag-selling: #7fa0bd; --tag-data: #b892a4; --tag-enterprise: #c4a468; --tag-ai: #7bb096; --tag-team: #d38078;
    --inverse: #1b1b19; --on-ink: #f2f1ee; --on-ink-soft: #a3a19b; --on-ink-line: #34332f;
  }
}
:root[data-theme="dark"]{
  --paper: #0e0e0d; --paper-raised: #161615; --paper-sunken: #060605;
  --ink: #f2f1ee; --ink-soft: #b9b7b1; --ink-faint: #7d7b76;
  --line: #2e2d2a; --line-strong: #f2f1ee;
  --accent: #ff5a6e; --accent-strong: #ff8090; --accent-soft: #2a1418; --on-accent: #120608;
  --tag-selling: #7fa0bd; --tag-data: #b892a4; --tag-enterprise: #c4a468; --tag-ai: #7bb096; --tag-team: #d38078;
  --inverse: #1b1b19; --on-ink: #f2f1ee; --on-ink-soft: #a3a19b; --on-ink-line: #34332f;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%; overflow-x:hidden; overflow-x:clip;} /* safety net: the page never scrolls sideways */
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'IBM Plex Sans', system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
h1,h2,h3,h4{
  font-family:'Libre Caslon Text', Georgia, 'Times New Roman', serif;
  color:var(--ink);
  text-wrap:balance;
  margin:0 0 .5em 0;
  font-weight:700;
  line-height:1.15;
}
p{margin:0 0 1em 0; max-width:38em;}
.mono{font-family:'IBM Plex Mono', ui-monospace, monospace; font-variant-numeric:tabular-nums;}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-delay:0s !important; transition-duration:.001ms !important;}
}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 1.6rem;}
section{padding:5rem 0;}
@media (max-width:720px){ section{padding:3rem 0;} }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:'IBM Plex Sans',sans-serif; font-weight:600; font-size:.86rem;
  letter-spacing:.02em;
  padding:.8rem 1.4rem; border-radius:0;
  border:1px solid var(--ink); cursor:pointer;
  transition:background .15s ease, color .15s ease, transform .1s ease;
  min-height:44px;
}
.btn-primary{background:var(--ink); color:var(--paper);}
.btn-primary:hover{background:var(--accent); border-color:var(--accent); color:var(--on-accent);}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--ink);}
.btn-ghost:hover{background:var(--ink); color:var(--paper);}
.btn-on-ink{background:transparent; color:var(--on-ink); border-color:var(--on-ink);}
.btn-on-ink:hover{background:var(--accent); border-color:var(--accent); color:var(--on-accent);}
.btn-block{width:100%; justify-content:center;}
.btn:active{transform:scale(.97);}

/* ---------- Header ---------- */
header.site{
  position:sticky; top:0; z-index:50;
  background:var(--paper);
  border-bottom:1px solid var(--line-strong);
}
.nav{display:flex; align-items:flex-start; justify-content:space-between; padding-block:1.1rem;} /* padding-block only: a padding shorthand here wiped out .wrap's side padding */
.brand{display:flex; align-items:center; gap:.55rem; font-family:'Libre Caslon Text',serif; font-weight:700; font-size:1.32rem; color:var(--ink);}
/* Seal logo: the PNG's alpha is used as a mask, so it takes the surrounding text colour
   (ink in the light header, light in the dark footer) from a single asset. */
.brand .mark{flex-shrink:0; display:inline-block; width:48px; height:48px;}
@supports ((-webkit-mask-image:none) or (mask-image:none)){
  .brand .mark{
    background-color:currentColor;
    -webkit-mask:url(../img/goclauses-seal.png) center/contain no-repeat;
            mask:url(../img/goclauses-seal.png) center/contain no-repeat;
  }
}
.brand small{display:block; font-family:'IBM Plex Mono',monospace; font-weight:500; font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); margin-top:.2rem;}
.nav-links{display:flex; align-items:center; gap:2.1rem;}
.nav-links a{position:relative; font-size:.86rem; font-weight:500; color:var(--ink-soft); padding:.3rem 0; letter-spacing:.01em; display:inline-block;}
.nav-links a::after{content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .25s ease;}
.nav-links a:hover{color:var(--ink);}
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after{transform:scaleX(1);}
.nav-links a[aria-current="page"]{color:var(--ink);}
.nav-cta{display:flex; align-items:center; gap:.9rem;}
.nav-toggle{display:none; background:none; border:1px solid var(--ink); border-radius:0; width:44px; height:44px; align-items:center; justify-content:center; cursor:pointer;}
.nav-links .theme-toggle-row{display:none;}
@media (max-width:480px){
  .brand{font-size:1.05rem; gap:.4rem;}
  .brand .mark{width:38px; height:38px;}
  .brand small{font-size:.56rem;}
  .nav-cta{gap:.5rem;}
  .nav-cta .btn{padding:.6rem .8rem; font-size:.78rem; white-space:nowrap;}
  .theme-toggle, .nav-toggle{width:38px; height:38px;}
  .calc-result .row{flex-direction:column; align-items:flex-start; gap:.2rem;}
  .calc-result .row b{text-align:left;}
}
@media (max-width:900px){
  /* Closed menu is hidden in place, not parked off-screen to the right:
     an off-screen panel lets phones pan the page sideways. visibility:hidden
     also keeps its links out of the keyboard tab order while closed. */
  .nav-links{
    position:fixed; inset:var(--header-h, 65px) 0 0 0; background:var(--paper); flex-direction:column; align-items:flex-start;
    padding:2rem 1.6rem; gap:1.4rem; overflow-y:auto;
    opacity:0; visibility:hidden; transform:translateY(-8px);
    transition:opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
  }
  .nav-links.open{opacity:1; visibility:visible; transform:none; transition:opacity .2s ease, transform .2s ease, visibility 0s;}
  .nav-links a{font-size:1.1rem;}
  .nav-toggle{display:flex;}
  .nav-cta .btn-ghost, .nav-cta .theme-toggle{display:none;}
  .nav-links .theme-toggle-row{display:flex; align-items:center; gap:.7rem; margin-top:.6rem; padding-top:1.4rem; border-top:1px solid var(--line);}
  .nav-links .theme-toggle-row span{font-size:.86rem; color:var(--ink-soft);}
}

/* ---------- Theme toggle ---------- */
.theme-toggle{
  background:none; border:1px solid var(--ink); border-radius:0;
  width:42px; height:42px; flex-shrink:0;
  display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; color:var(--ink);
}
.theme-toggle:hover{background:var(--ink); color:var(--paper);}
.theme-toggle svg{width:17px; height:17px;}
.theme-toggle .icon-moon{display:none;}
:root[data-theme="dark"] .theme-toggle .icon-sun{display:none;}
:root[data-theme="dark"] .theme-toggle .icon-moon{display:block;}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .theme-toggle .icon-sun{display:none;}
  :root:not([data-theme="light"]) .theme-toggle .icon-moon{display:block;}
}

/* ---------- Hero ---------- */
.hero{padding:4rem 0 3rem;}
.hero-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:3rem; align-items:center;}
.eyebrow{
  display:flex; align-items:center; gap:.55rem;
  font-family:'IBM Plex Mono',monospace;
  font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; font-weight:500;
  color:var(--ink-faint); margin-bottom:1.2rem;
}
.eyebrow::before{content:"\00b6"; color:var(--accent); font-family:'Libre Caslon Text',serif; font-size:1.05rem;}
.hero h1{font-size:clamp(2.15rem, 4vw, 3.15rem); max-width:15em;}
.hero .dek{font-size:1.1rem; color:var(--ink-soft); max-width:32em; margin-bottom:1.8rem;}
.hero-actions{display:flex; gap:.9rem; flex-wrap:wrap; margin-bottom:1.8rem;}
.hero-media{position:relative; border:1px solid var(--ink); aspect-ratio:4/3.2;}
.hero-media img{width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.05);}
.hero-media .cap{
  position:absolute; left:0; right:0; bottom:0;
  border-top:1px solid var(--ink); background:var(--paper);
  color:var(--ink); font-size:.7rem; font-family:'IBM Plex Mono',monospace; letter-spacing:.04em;
  padding:.55rem .8rem; text-transform:uppercase;
}
@media (max-width:900px){ .hero-grid{grid-template-columns:1fr;} .hero-media{order:-1;} }

.stat-row{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:1.4rem; padding-top:1.4rem; border-top:1px solid var(--line-strong);}
@media (max-width:560px){ .stat-row{grid-template-columns:1fr; gap:1rem;} }
.stat b{display:block; font-family:'IBM Plex Mono',monospace; font-size:1.5rem; color:var(--ink); font-weight:600;}
.stat span{font-size:.72rem; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.05em;}

/* ---------- One deliberate entrance moment (hero only, per page) ---------- */
.hero-enter{opacity:0; transform:translateY(10px); animation:heroEnter .5s ease forwards;}
.hero-enter-1{animation-delay:.02s;}
.hero-enter-2{animation-delay:.1s;}
.hero-enter-3{animation-delay:.18s;}
.hero-enter-4{animation-delay:.26s;}
@keyframes heroEnter{ to{ opacity:1; transform:none; } }

/* ---------- Section headings ---------- */
.sec-head{max-width:38em; margin-bottom:2.4rem;}
.sec-head .eyebrow{margin-bottom:.7rem;}
.sec-head h2{font-size:clamp(1.55rem,2.6vw,2rem);}
.sec-head p{color:var(--ink-soft); font-size:1.02rem;}
.sec-head.center{margin-inline:auto; text-align:center;}

.chip{
  display:inline-flex; align-items:center; gap:.4rem;
  font-family:'IBM Plex Mono',monospace; font-size:.68rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  padding:.28rem .55rem; border-radius:0; border:1px solid var(--ink); color:var(--ink); background:transparent;
}
.chip::before{content:""; width:6px; height:6px; flex-shrink:0; border-radius:50%;}
footer.site .chip, .band .chip{color:var(--on-ink); border-color:var(--on-ink);}

/* ---------- Process steps ---------- */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:0; border:1px solid var(--on-ink-line);}
@media (max-width:900px){ .steps{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .steps{grid-template-columns:1fr;} }
.step{padding:1.6rem 1.4rem; border-right:1px solid var(--on-ink-line);}
.steps .step:last-child{border-right:none;}
@media (max-width:900px){ .steps .step:nth-child(2n){border-right:none;} }
@media (max-width:560px){ .steps .step{border-right:none !important; border-bottom:1px solid var(--on-ink-line);} .steps .step:last-child{border-bottom:none;} }
.step .num{font-family:'IBM Plex Mono',monospace; font-size:1.5rem; font-weight:700; color:var(--accent); display:block; line-height:1;}
.step .day{font-family:'IBM Plex Mono',monospace; font-size:.66rem; color:var(--on-ink-soft); text-transform:uppercase; letter-spacing:.06em; display:block; margin-top:.4rem; margin-bottom:.6rem;}
.step h4{font-size:1rem; margin-bottom:.4rem;}
.step p{font-size:.87rem; margin-bottom:0;}

/* ---------- Cards / grid ---------- */
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:0; border:1px solid var(--ink);}
@media (max-width:900px){ .grid-3{grid-template-columns:1fr;} }
.grid-3 .card{background:var(--paper-raised); border-right:1px solid var(--ink); padding:1.7rem; border-radius:0;}
.grid-3 .card:last-child{border-right:none;}
@media (max-width:900px){ .grid-3 .card{border-right:none; border-bottom:1px solid var(--ink);} .grid-3 .card:last-child{border-bottom:none;} }
.card h3{font-size:1.08rem;}
.card p{font-size:.9rem; color:var(--ink-soft); margin-bottom:0;}
/* standalone card (not in a grid-3 border-sharing context) */
.card.standalone{border:1px solid var(--ink); padding:1.6rem; background:var(--paper-raised);}

/* ---------- Band (inverse surface) ---------- */
.band{background:var(--inverse); color:var(--on-ink);}
.band .btn-primary{background:var(--on-ink); color:var(--inverse); border-color:var(--on-ink);}
.band .btn-primary:hover{background:var(--accent); border-color:var(--accent); color:var(--on-accent);}
.band h2, .band h3{color:var(--on-ink);}
.band p{color:var(--on-ink-soft);}

/* ---------- Trust / logos ---------- */
.trust-bar{display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap; padding:1.5rem 0;}
.trust-logos{display:flex; gap:2.2rem; flex-wrap:wrap; align-items:center;}
.trust-logos span{font-family:'IBM Plex Mono',monospace; font-size:.78rem; letter-spacing:.09em; color:var(--ink-faint); text-transform:uppercase;}

/* ---------- Tables ---------- */
.table-wrap{overflow-x:auto; border:1px solid var(--ink);}
table{width:100%; border-collapse:collapse; background:var(--paper-raised); font-size:.87rem; table-layout:fixed;}
th{text-align:left; font-weight:600; font-size:.68rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-faint); font-family:'IBM Plex Mono',monospace; padding:.7rem .9rem; border-bottom:1px solid var(--ink);}
td{padding:.75rem .9rem; border-bottom:1px solid var(--line); color:var(--ink-soft); vertical-align:top; word-wrap:break-word;}
tr:last-child td{border-bottom:none;}
td:first-child{color:var(--ink); font-weight:600; width:34%;}
.wide-table table{table-layout:auto; min-width:600px;}
.wide-table th{white-space:nowrap;}
.fig{font-family:'IBM Plex Mono',monospace; color:var(--ink); font-variant-numeric:tabular-nums;}
.verified-note{font-family:'IBM Plex Mono',monospace; font-size:.72rem; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.04em; margin-top:.8rem;}

/* ---------- Big statutory number (used once, where the number is the content) ---------- */
.big-stat{display:flex; align-items:baseline; gap:1.2rem; border:1px solid var(--ink); padding:1.3rem 1.5rem; margin:1.4rem 0;}
.big-stat .num{font-family:'Libre Caslon Text',serif; font-size:3.4rem; font-weight:700; color:var(--accent); line-height:1; flex-shrink:0;}
.big-stat .label{font-size:.88rem; color:var(--ink-soft); max-width:18em;}
.big-stat .label strong{color:var(--ink); display:block; font-family:'IBM Plex Mono',monospace; font-size:.7rem; text-transform:uppercase; letter-spacing:.05em; margin-bottom:.3rem;}

/* ---------- Tabs (jurisdiction switcher) ---------- */
.tabs{display:flex; gap:0; flex-wrap:wrap; margin-bottom:2rem; border-bottom:1px solid var(--ink);}
.tab-btn{
  background:none; border:none; cursor:pointer; font-family:'IBM Plex Sans',sans-serif; font-weight:600; font-size:.88rem;
  padding:.85rem 1.2rem; color:var(--ink-faint); border-bottom:2px solid transparent; margin-bottom:-1px;
  display:flex; align-items:center; gap:.55rem; min-height:44px;
}
.tab-btn:hover{color:var(--ink);}
.tab-btn[aria-selected="true"]{color:var(--ink); border-bottom-color:var(--accent);}
.tab-btn .dot{width:7px; height:7px; border-radius:50%; flex-shrink:0;}
.tab-panel{display:none;}
.tab-panel.active{display:block; animation:fadein .15s ease;}
@keyframes fadein{from{opacity:0;} to{opacity:1;}}

/* ---------- Pricing ---------- */
.price-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:0; border:1px solid var(--ink);}
@media (max-width:1000px){ .price-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:600px){ .price-grid{grid-template-columns:1fr;} }
.price-card{background:var(--paper-raised); border-right:1px solid var(--ink); padding:1.6rem; display:flex; flex-direction:column;}
.price-grid .price-card:last-child{border-right:none;}
@media (max-width:1000px){ .price-grid .price-card:nth-child(2n){border-right:none;} .price-grid .price-card:nth-child(2){border-bottom:1px solid var(--ink);} .price-grid .price-card:nth-child(1){border-bottom:1px solid var(--ink);} }
@media (max-width:600px){ .price-card{border-right:none !important; border-bottom:1px solid var(--ink);} .price-card:last-child{border-bottom:none;} }
.price-card.featured{outline:2px solid var(--accent); outline-offset:-1px;}
.price-card .tag{margin-bottom:1rem; align-self:flex-start;}
.price-card .amount{font-family:'Libre Caslon Text',serif; font-size:1.9rem; color:var(--ink); margin-bottom:.15rem; font-weight:700;}
.price-card .period{font-size:.74rem; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.05em; margin-bottom:1.2rem; font-family:'IBM Plex Mono',monospace;}
.price-card ul{list-style:none; margin:0 0 1.4rem 0; padding:0; flex-grow:1;}
.price-card li{display:flex; gap:.55rem; font-size:.85rem; color:var(--ink-soft); margin-bottom:.6rem; align-items:flex-start;}
.price-card li::before{content:"•"; color:var(--accent); flex-shrink:0;}
.price-note{font-size:.78rem; color:var(--ink-faint); margin-top:1.6rem; max-width:none;}

/* two-up bundle/membership row (independent of price-grid's 4-col border sharing) */
.price-pair{display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid var(--ink);}
@media (max-width:800px){ .price-pair{grid-template-columns:1fr;} }
.price-pair .price-card{border-right:1px solid var(--ink);}
.price-pair .price-card:last-child{border-right:none;}
@media (max-width:800px){ .price-pair .price-card{border-right:none !important; border-bottom:1px solid var(--ink);} .price-pair .price-card:last-child{border-bottom:none;} }

/* ---------- Callout / disclaimer ---------- */
.callout{background:var(--paper-raised); border:1px solid var(--ink); border-left:4px solid var(--accent); padding:1.1rem 1.3rem; margin:1.6rem 0;}
.callout p{margin-bottom:0; font-size:.9rem; color:var(--ink-soft); max-width:none;}
.callout strong{color:var(--ink);}

/* ---------- Forms ---------- */
.form-row{margin-bottom:1.3rem;}
.form-row label{display:block; font-size:.82rem; font-weight:600; color:var(--ink); margin-bottom:.4rem;}
.form-row .hint{font-size:.78rem; color:var(--ink-faint); margin-top:.35rem; margin-bottom:0;}
input[type=text],input[type=email],input[type=tel],textarea,select{
  width:100%; font-family:'IBM Plex Sans',sans-serif; font-size:.95rem; color:var(--ink);
  background:var(--paper-raised); border:1px solid var(--ink); border-radius:0;
  padding:.75rem .9rem; min-height:44px;
}
textarea{min-height:120px; resize:vertical;}
input:focus,textarea:focus,select:focus{border-color:var(--accent);}
input.invalid, textarea.invalid{border-color:var(--accent); border-width:2px;}
p.field-error{display:none; color:var(--accent); font-size:.78rem; margin-top:.4rem; font-weight:500;}
.field-error.show{display:block;}
.btn[disabled]{opacity:.6; cursor:progress;}
/* Spam trap: kept in the form for bots, invisible and unreachable for people */
.hp{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;}
.choice-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:0; border:1px solid var(--ink);}
.choice-grid.invalid{border-color:var(--accent); border-width:2px;}
@media (max-width:640px){ .choice-grid{grid-template-columns:1fr 1fr;} }
.choice{position:relative; border-right:1px solid var(--ink);}
.choice-grid .choice:last-child{border-right:none;}
@media (max-width:640px){ .choice{border-right:1px solid var(--ink) !important;} .choice-grid .choice:nth-child(2n){border-right:none !important;} }
.form-row .choice{margin-bottom:0;}
.choice-grid.two{grid-template-columns:1fr 1fr;}
.choice-grid.two .choice{border-right:1px solid var(--ink) !important; border-bottom:1px solid var(--ink);}
.choice-grid.two .choice:nth-child(2n){border-right:none !important;}
.choice-grid.two .choice:nth-last-child(-n+2){border-bottom:none;}
.choice input{position:absolute; opacity:0; width:100%; height:100%; cursor:pointer; margin:0; top:0; left:0;}
.choice .box{padding:.9rem .7rem; text-align:center; font-size:.85rem; font-weight:600; color:var(--ink-soft); min-height:44px; display:flex; align-items:center; justify-content:center;}
.choice input:checked + .box{color:var(--on-accent); background:var(--accent);}
.choice input:focus-visible + .box{outline:2px solid var(--accent); outline-offset:2px;}
.step-indicator{display:flex; gap:0; margin-bottom:2rem; border:1px solid var(--ink);}
.step-indicator span{height:5px; flex:1; background:transparent; border-right:1px solid var(--ink);}
.step-indicator span:last-child{border-right:none;}
.step-indicator span.done{background:var(--accent);}
.form-step{display:none;}
.form-step.active{display:block; animation:fadein .15s ease;}

/* ---------- Promises (numbered commitments, About page) ---------- */
.promise-list{border:1px solid var(--ink);}
.promise{padding:1.6rem 1.8rem; border-bottom:1px solid var(--ink); display:grid; grid-template-columns:2.4rem 1fr; gap:1.2rem; align-items:start;}
.promise-list .promise:last-child{border-bottom:none;}
.promise .num{font-family:'IBM Plex Mono',monospace; font-size:1.2rem; font-weight:700; color:var(--accent);}
.promise h3{font-size:1.05rem; margin-bottom:.5rem;}
.promise p{font-size:.9rem; color:var(--ink-soft); margin-bottom:.5rem;}
.promise p:last-child{margin-bottom:0;}
@media (max-width:560px){ .promise{grid-template-columns:1fr; gap:.5rem;} }

/* ---------- Flow (vertical numbered process with arrows) ---------- */
.flow{max-width:36em;}
.flow-step{border:1px solid var(--ink); padding:1.5rem 1.7rem; background:var(--paper-raised);}
.flow-step .num{font-family:'IBM Plex Mono',monospace; font-size:.72rem; color:var(--accent); text-transform:uppercase; letter-spacing:.06em; display:block; margin-bottom:.6rem;}
.flow-step h3{font-size:1.02rem; margin-bottom:.3rem;}
.flow-step p{font-size:.89rem; color:var(--ink-soft); margin-bottom:0;}
.flow-arrow{text-align:center; color:var(--accent); font-family:'IBM Plex Mono',monospace; font-size:1.15rem; padding:.4rem 0; line-height:1;}

/* ---------- What we handle (taxonomy list) ---------- */
.handle-list{border:1px solid var(--ink);}
.handle-cat{padding:1.4rem 1.7rem; border-bottom:1px solid var(--ink);}
.handle-list .handle-cat:last-child{border-bottom:none;}
.handle-cat h3{font-size:1rem; margin-bottom:.8rem; display:flex; align-items:baseline; gap:.6rem;}
.handle-cat h3 .dot{width:8px; height:8px; border-radius:50%; flex-shrink:0; transform:translateY(-1px);}
.handle-cat .handle-desc{font-size:.88rem; color:var(--ink-soft); margin:-.3rem 0 .9rem 0; max-width:46em;}
.handle-tags{display:flex; flex-wrap:wrap; gap:.5rem;}
.handle-tags span{border:1px solid var(--line); padding:.32rem .65rem; font-size:.78rem; color:var(--ink-soft); font-family:'IBM Plex Mono',monospace;}
.band .handle-tags span{border-color:var(--on-ink-line); color:var(--on-ink-soft);}
.list-more{display:flex; flex-wrap:wrap; gap:.6rem 1.8rem; margin-top:1.4rem; max-width:none;}
.list-more a{color:var(--accent-strong); text-decoration:underline; text-underline-offset:3px; font-weight:600;}
.list-more a:hover{color:var(--accent);}
.handle-cat .handle-when{font-family:'Libre Caslon Text',serif; font-style:italic; font-size:.98rem; color:var(--ink); margin:-.35rem 0 .45rem 0; max-width:46em;}

/* ---------- Problem / fix register (what SaaS teams say, what we do) ---------- */
.pain-list{border:1px solid var(--ink); background:var(--paper-raised);}
.pain-head, .pain{display:grid; grid-template-columns:1fr 1.15fr;}
.pain-head{border-bottom:1px solid var(--ink); background:var(--paper-sunken);}
.pain-head span{padding:.7rem 1.6rem; font-family:'IBM Plex Mono',monospace; font-size:.68rem; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-faint);}
.pain-head span + span{border-left:1px solid var(--line); color:var(--accent-strong);}
.pain{border-bottom:1px solid var(--line);}
.pain-list .pain:last-child{border-bottom:none;}
.pain .said, .pain .fix{padding:1.35rem 1.6rem;}
.pain .said{font-family:'Libre Caslon Text',serif; font-style:italic; font-size:1.04rem; line-height:1.45; color:var(--ink);}
.pain .fix{border-left:1px solid var(--line);}
.pain .fix p{font-size:.9rem; color:var(--ink-soft); margin:0; max-width:none;}
.pain .label{display:none;}
@media (max-width:720px){
  .pain-head{display:none;}
  .pain{grid-template-columns:1fr;}
  .pain .said{padding-bottom:.6rem;}
  .pain .fix{border-left:none; padding-top:0;}
  .pain .label{display:block; font-family:'IBM Plex Mono',monospace; font-style:normal; font-size:.64rem; text-transform:uppercase; letter-spacing:.07em; color:var(--accent-strong); margin-bottom:.3rem;}
}

/* ---------- Plan tag (pricing tiers) ---------- */
.plan-tag{display:inline-flex; align-items:center; font-family:'IBM Plex Mono',monospace; font-size:.68rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; padding:.28rem .55rem; border:1px solid var(--ink); color:var(--ink); margin-bottom:1rem;}
.plan-tag.featured{background:var(--accent-soft); color:var(--accent-strong); border-color:var(--accent-strong);}
.price-card .plan-desc{font-size:.85rem; color:var(--ink-soft); margin-bottom:1.1rem;}
.price-card .plan-tag{align-self:flex-start;}
.price-card .plan-desc + ul{margin-top:.2rem;}
.price-card .period + .plan-desc{margin-top:-.6rem;}

/* ---------- Office list (replaces middle-dot joined strings) ---------- */
.office-list{list-style:none; margin:0 0 1rem 0; padding:0; display:flex; flex-direction:column; gap:.55rem;}
.office-list li{display:flex; align-items:center; gap:.6rem; font-size:.92rem; color:var(--ink-soft);}
.office-list .dot{width:7px; height:7px; border-radius:50%; flex-shrink:0;}

/* ---------- Footer ---------- */
footer.site{background:var(--inverse); color:var(--on-ink); padding:4rem 0 2rem; border-top:4px solid var(--accent);}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:2.4rem; margin-bottom:2.6rem;}
@media (max-width:800px){ .footer-grid{grid-template-columns:1fr 1fr;} }
.footer-grid h4{color:var(--on-ink); font-family:'IBM Plex Mono',monospace; font-size:.7rem; text-transform:uppercase; letter-spacing:.09em; margin-bottom:1rem;}
.footer-grid ul{list-style:none; margin:0; padding:0;}
.footer-grid li{margin-bottom:.65rem;}
.footer-grid a{color:var(--on-ink-soft); font-size:.9rem;}
.footer-grid a:hover{color:var(--on-ink);}
.footer-brand p{color:var(--on-ink-soft); font-size:.88rem; max-width:26em;}
.footer-legal{border-top:1px solid var(--on-ink-line); padding-top:1.8rem; font-size:.75rem; color:var(--on-ink-soft); line-height:1.7;}
.footer-legal p{max-width:none; margin-bottom:.8rem;}
.footer-bottom{display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-top:1.6rem; font-size:.76rem; color:var(--on-ink-soft); font-family:'IBM Plex Mono',monospace;}
.jur-badges{display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.6rem;}

/* ---------- Utility ---------- */
.flex-between{display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;}
.text-center{text-align:center;}
.mt-0{margin-top:0;}
.skip-link{position:absolute; left:-999px; top:0; background:var(--ink); color:var(--paper); padding:.6rem 1rem; z-index:100;}
.skip-link:focus{left:1rem; top:1rem;}