/* ============================================================
   WE FIGHT TO WIN, design system version 2
   Layout: Direction A, light and pill based
   Colour: Direction B, lime and ink
   Values are taken from WeFightToWin6pagemockup.html, which is the
   authority. Version 1 forest and amber is void. No blue, no other green.
   ============================================================ */

:root{
  --lime:#C6F73C;  --lime-d:#B0E823;  --lime-s:#F0FDD4;
  --ink:#0B0F0C;   --ink-2:#1C241E;
  --mut:#68736C;   --mut-2:#98A29B;
  --soft:#F6F7F3;  --line:#E7EAE1;
  --coral:#FF6B4A; --white:#fff;

  --r-pill:999px; --r-card:26px; --r-photo:34px; --r-sm:16px;

  --sh-1:0 1px 2px rgba(11,15,12,.04),0 4px 14px -6px rgba(11,15,12,.08);
  --sh-2:0 18px 40px -22px rgba(11,15,12,.28);
  --sh-3:0 30px 70px -34px rgba(11,15,12,.35);

  --wrap:1200px;
  --sp:clamp(56px,6vw,104px);

  --display:'Plus Jakarta Sans',system-ui,sans-serif;
  --accent:'Bebas Neue',Impact,sans-serif;
  --mono:ui-monospace,'SF Mono',Menlo,monospace;
}

/* ---------- base ---------- */

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
body{
  overflow-x:clip;
  font-family:var(--display);
  background:var(--white);
  color:var(--ink);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 clamp(20px,4vw,40px)}

.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
a.visually-hidden:focus{
  position:fixed;top:10px;left:10px;z-index:100;
  width:auto;height:auto;margin:0;padding:13px 22px;clip:auto;overflow:visible;
  background:var(--ink);color:var(--lime);border-radius:var(--r-pill);
  font-size:15px;font-weight:700;text-decoration:none;
}

/* ---------- type ---------- */

h1,h2,h3{letter-spacing:-.035em;line-height:1.04;font-weight:800}
h1{font-size:clamp(38px,5.6vw,66px)}
h2{font-size:clamp(29px,3.9vw,46px);line-height:1.06}
h3{font-size:clamp(18px,1.5vw,21px);letter-spacing:-.025em;line-height:1.25}
.lead{font-size:clamp(16.5px,1.35vw,19.5px);color:var(--mut);line-height:1.6;max-width:48ch}
p{color:var(--mut);font-size:16.5px;max-width:65ch}
.fine{font-size:12.5px;line-height:1.6}
.mono{font-family:var(--mono);font-size:12px;letter-spacing:.02em}
/* The one emphasis treatment. It replaced a lime sweep behind the words and a
   serif italic, both of which were doing the same job in two different ways.
   The phrase stands out by letterform, not by colour, so it costs nothing in
   contrast and it is the same face as the logo. 1.16em matches the cap height
   of the surrounding Plus Jakarta Sans. */
.hl{
  font-family:var(--accent);
  /* Bebas Neue ships only one weight on Google Fonts. Asking for 700 gets a
     synthetic bold, which smears a condensed face. It is heavy enough at 400. */
  font-weight:400;
  text-transform:uppercase;
  font-size:1.16em;
  letter-spacing:.012em;
  color:inherit;
  background:none;
}
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  background:var(--lime-s);color:#4B6A00;border-radius:var(--r-pill);
  padding:8px 17px;font-size:12.5px;font-weight:800;letter-spacing:.005em;
  margin-bottom:22px;text-decoration:none;
}
.eyebrow i{width:7px;height:7px;border-radius:50%;background:var(--lime-d);display:block;flex:none}
a.eyebrow:hover{background:var(--lime);color:var(--ink)}

/* ---------- buttons ---------- */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  border:0;border-radius:var(--r-pill);padding:15px 27px;min-height:44px;
  font-family:inherit;font-size:15px;font-weight:700;letter-spacing:-.01em;
  cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:transform .28s cubic-bezier(.2,.7,.2,1),box-shadow .28s,background .2s,border-color .2s,color .2s;
}
.btn.pri{background:var(--ink);color:var(--lime);box-shadow:var(--sh-2)}
.btn.pri:hover{transform:translateY(-2px);box-shadow:0 22px 44px -20px rgba(11,15,12,.5)}
.btn.lime{background:var(--lime);color:var(--ink)}
.btn.lime:hover{transform:translateY(-2px);background:var(--lime-d)}
.btn.ghost{background:var(--white);color:var(--ink);border:1.5px solid var(--line)}
.btn.ghost:hover{transform:translateY(-2px);border-color:var(--ink);background:var(--soft)}
.btn.sm{padding:12px 21px;font-size:14px}
.cta-row{display:flex;gap:11px;flex-wrap:wrap}

/* ---------- chips ---------- */

.chips{display:flex;gap:9px;flex-wrap:wrap}
.chip{
  display:inline-flex;align-items:center;gap:8px;min-height:44px;
  background:var(--white);border:1.5px solid var(--line);border-radius:var(--r-pill);
  padding:10px 17px;font-size:13.5px;font-weight:600;color:var(--ink);
  text-decoration:none;
  transition:transform .3s cubic-bezier(.2,.7,.2,1),border-color .3s,background .3s;
}
.chip:hover{transform:translateY(-3px);border-color:var(--ink)}
.chip b{color:#5C8500;font-weight:800}
.chip.solid{background:var(--lime);border-color:var(--lime);font-weight:700}
.chip.dark{background:var(--ink);border-color:var(--ink);color:var(--white)}

/* ---------- header ---------- */

.shell{
  position:sticky;top:0;z-index:80;
  border-bottom:1px solid var(--line);
}
/* the translucent blur lives on a pseudo element so the fixed drawer is not
   trapped in a backdrop-filter containing block */
.shell::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:rgba(255,255,255,.86);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
}
.shellbar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:13px 0}
.brand{display:inline-flex;align-items:center;text-decoration:none;flex:none;min-height:44px}
/* 38px, not 34px: the lockup is 4.005:1, so 34px would be 136px wide and
   the logo rules put the minimum for the full lockup at 150px. */
.brand-full{height:38px;width:auto;display:block}
.brand-mark,.brand-print{display:none}
.tabs{
  display:flex;gap:4px;background:var(--soft);border-radius:var(--r-pill);
  padding:5px;overflow-x:auto;scrollbar-width:none;
}
.tabs::-webkit-scrollbar{display:none}
.tabs a{
  display:inline-flex;align-items:center;min-height:40px;
  font-size:13.5px;font-weight:600;color:var(--mut);
  padding:10px 17px;border-radius:var(--r-pill);text-decoration:none;white-space:nowrap;
  transition:background .25s,color .25s,box-shadow .25s;
}
.tabs a:hover{color:var(--ink)}
.tabs a[aria-current="page"]{background:var(--white);color:var(--ink);font-weight:700;box-shadow:var(--sh-1)}
.tabs .drawer-cta{display:none}
.tabs .drawer-head{display:none}
.drawer-close{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;padding:0;flex:none;
  background:var(--white);border:1.5px solid var(--line);border-radius:var(--r-pill);
  color:var(--ink);cursor:pointer;
  transition:background .25s,border-color .25s,color .25s;
}
.drawer-close:hover{background:var(--ink);border-color:var(--ink);color:var(--lime)}
.shellbar .cta{flex:none}
.navtoggle{
  display:none;align-items:center;justify-content:center;
  width:44px;height:44px;padding:0;flex:none;
  background:var(--white);border:1.5px solid var(--line);border-radius:var(--r-pill);
  color:var(--ink);cursor:pointer;
  transition:background .25s,border-color .25s,color .25s;
}
.navtoggle:hover{background:var(--ink);border-color:var(--ink);color:var(--lime)}
.navtoggle .x{display:none}
.navtoggle[aria-expanded="true"] .bars{display:none}
.navtoggle[aria-expanded="true"] .x{display:block}

/* ---------- sections and bands ---------- */

section{padding:var(--sp) 0}
section.tight{padding:calc(var(--sp) * .62) 0}
.bg-soft{background:var(--soft)}
.bg-ink{background:var(--ink);color:var(--white)}
.bg-ink h1,.bg-ink h2,.bg-ink h3{color:var(--white)}
.bg-ink p,.bg-ink .lead{color:#A9B3AC}
.bg-ink .eyebrow{background:rgba(198,247,60,.14);color:var(--lime)}
.bg-ink a.eyebrow:hover{background:var(--lime);color:var(--ink)}

/* page head band, inner pages */
.phead{padding:clamp(44px,5vw,72px) 0 clamp(44px,5vw,72px)}
.phead .lead{color:#A9B3AC;margin-top:18px}

/* ---------- hero ---------- */

.hero{
  display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(30px,4.5vw,64px);align-items:center;
  padding:clamp(40px,5vw,68px) 0 var(--sp);
}
.hero .lead{margin-top:22px;max-width:46ch}
.hero .cta-row{margin:30px 0 26px}
.shot{border-radius:var(--r-photo);overflow:hidden;box-shadow:var(--sh-3);background:var(--soft)}
/* <picture> is a wrapper only: the img stays the layout child */
picture{display:contents}
.shot img{width:100%;height:100%;object-fit:cover;display:block}
.shot.h1{aspect-ratio:5/4}
.shot.h2{aspect-ratio:16/10}
.shot.h3{aspect-ratio:1/1}
/* used once per site, on the TVB hero only */
.shot.arch{border-radius:180px 180px var(--r-photo) var(--r-photo)}

/* stat rail: sits UNDER the photograph in its own grid. Nothing overlaps. */
.rail{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-top:14px}
.stat{
  background:var(--soft);border-radius:var(--r-card);padding:20px 22px;
  transition:transform .32s cubic-bezier(.2,.7,.2,1),background .3s;
}
.stat:hover{transform:translateY(-4px);background:var(--lime-s)}
.stat .n{font-size:clamp(24px,2.4vw,31px);font-weight:800;letter-spacing:-.04em;line-height:1}
.stat .l{font-size:13px;color:var(--mut);font-weight:600;margin-top:7px;line-height:1.35;max-width:none}
.stat.lime{background:var(--lime)}
.stat.lime .l{color:#4A6206}
.stat.lime:hover{background:var(--lime-d)}

/* anchor targets clear the sticky header */
[id]{scroll-margin-top:96px}

/* ---------- section head ---------- */

.shead{max-width:60ch;margin-bottom:clamp(30px,3.4vw,46px)}
.shead .lead{margin-top:18px}
.shead.mid{margin-left:auto;margin-right:auto;text-align:center}

/* ---------- cards ---------- */

.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.card{
  background:var(--white);border:1.5px solid var(--line);border-radius:var(--r-card);
  padding:clamp(22px,2.3vw,30px);
  transition:transform .34s cubic-bezier(.2,.7,.2,1),box-shadow .34s,border-color .34s;
}
.card:hover{transform:translateY(-5px);box-shadow:var(--sh-2);border-color:var(--ink)}
.card p{margin-top:11px;font-size:15px;max-width:44ch}
.card .ic{
  width:44px;height:44px;border-radius:14px;background:var(--lime);
  display:grid;place-items:center;margin-bottom:18px;flex:none;
}
.card.fill{background:var(--soft);border-color:transparent}
.card.limefill{background:var(--lime);border-color:transparent}
.card.limefill p{color:#48600A}
.card.inkfill{background:var(--ink);border-color:transparent;color:var(--white)}
.card.inkfill h2,.card.inkfill h3{color:var(--white)}
.card.inkfill p{color:#A9B3AC}
.card.inkfill .ic{background:var(--lime)}
.card.flat:hover{transform:none;box-shadow:none;border-color:var(--line)}
a.card{text-decoration:none;display:block}
a.card.inkfill:hover{border-color:var(--lime)}

/* violation card */
.vcard{display:flex;flex-direction:column;gap:12px}
.vcard .top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.vcard h3{margin:0}
.vcard .pts{
  background:var(--ink);color:var(--lime);border-radius:var(--r-pill);
  padding:6px 13px;font-size:12px;font-weight:800;white-space:nowrap;flex:none;
}
.vcard.inkfill .pts{background:var(--lime);color:var(--ink)}
.vcard .vtl{color:var(--mut-2);font-weight:600;margin:0}
.vcard.inkfill .vtl{color:var(--lime)}
.vcard p{margin-top:0}

/* ---------- steps ---------- */

.steps{display:grid;gap:14px}
.step{
  display:grid;grid-template-columns:66px 1fr;gap:22px;align-items:start;
  background:var(--white);border:1.5px solid var(--line);border-radius:var(--r-card);
  padding:26px 28px;
  transition:transform .34s cubic-bezier(.2,.7,.2,1),border-color .34s,box-shadow .34s;
}
.step:hover{transform:translateY(-4px);border-color:var(--ink);box-shadow:var(--sh-2)}
.step .no{
  width:52px;height:52px;border-radius:var(--r-pill);background:var(--lime);
  display:grid;place-items:center;font-weight:800;font-size:17px;letter-spacing:-.03em;
}
.step p{margin-top:9px;font-size:15.5px}
.step-close{
  text-align:center;margin:30px auto 0;max-width:none;
  font-size:clamp(19px,2vw,25px);font-weight:800;letter-spacing:-.03em;
  color:var(--ink);line-height:1.3;
}

/* ---------- split ---------- */

.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,60px);align-items:center}
.split.rev .txt{order:2}
.split .txt h2{margin-bottom:16px}
.split .txt p{font-size:17px;margin-top:14px}
.split .txt .cta-row{margin-top:26px}
.strong-line{color:var(--ink);font-weight:700;line-height:1.5}

/* ---------- proof ---------- */

.quote{background:var(--soft);border-radius:var(--r-card);padding:clamp(24px,2.6vw,32px)}
.quote .stars{color:var(--ink);letter-spacing:2px;font-size:14px}
.quote p{margin:13px 0 18px;color:var(--ink);font-size:16px;line-height:1.6}
.quote .who{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13px;font-weight:700}
.quote .who span{color:var(--mut)}
.tag-out{background:var(--lime);border-radius:var(--r-pill);padding:5px 12px;font-size:11.5px;font-weight:800;flex:none}

/* ---------- FAQ ---------- */

.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;padding:24px 0;
  display:flex;gap:20px;align-items:center;justify-content:space-between;
  font-weight:700;font-size:clamp(16px,1.4vw,18.5px);letter-spacing:-.02em;
  transition:color .2s;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:#5C8500}
.faq summary .pm{
  width:32px;height:32px;border-radius:var(--r-pill);background:var(--soft);
  display:grid;place-items:center;flex:none;font-size:17px;
  transition:background .25s,transform .3s;
}
.faq details[open] summary .pm{background:var(--lime);transform:rotate(45deg)}
.faq .ans{padding:0 52px 26px 0;font-size:15.5px;color:var(--mut);max-width:70ch;
  animation:up .4s cubic-bezier(.2,.7,.2,1) both}
@keyframes up{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}

/* ---------- CTA band ---------- */

.band{
  background:var(--ink);border-radius:clamp(26px,3vw,44px);
  padding:clamp(38px,5vw,72px);text-align:center;position:relative;overflow:hidden;
}
.band::after{
  content:"";position:absolute;width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle,rgba(198,247,60,.22),transparent 68%);
  top:-190px;right:-140px;pointer-events:none;
}
.band h2{color:var(--white);max-width:20ch;margin:0 auto}
.band p{color:#A9B3AC;max-width:52ch;margin:18px auto 30px;font-size:17px}
.band .cta-row{justify-content:center;position:relative;z-index:2}
.band .btn.ghost{background:transparent;color:var(--white);border-color:rgba(255,255,255,.28)}
.band .btn.ghost:hover{background:rgba(255,255,255,.08);border-color:var(--white)}

/* ---------- callout ---------- */

.callout{
  background:var(--lime-s);border-left:4px solid var(--lime);
  border-radius:var(--r-sm);padding:20px 24px;margin:22px 0;
}
.callout p{color:var(--ink);max-width:70ch}
.callout p + p{margin-top:12px}

/* ---------- form ---------- */

.formwrap{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(26px,3.4vw,48px);align-items:start}
.form{
  background:var(--white);border:1.5px solid var(--line);border-radius:var(--r-card);
  padding:clamp(24px,2.8vw,36px);
}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.f{margin-bottom:14px}
.f label{display:block;font-size:13px;font-weight:700;margin-bottom:7px}
fieldset.f{border:0;padding:0;min-width:0}
.f legend{display:block;font-size:13px;font-weight:700;margin-bottom:7px;padding:0}
.f input,.f select,.f textarea{
  width:100%;font-family:inherit;font-size:15px;color:var(--ink);
  border:1.5px solid var(--line);border-radius:var(--r-sm);padding:13px 15px;
  background:var(--white);min-height:44px;
  transition:border-color .22s,box-shadow .22s;
}
.f input:hover,.f select:hover,.f textarea:hover{border-color:var(--mut-2)}
.f input:focus,.f select:focus,.f textarea:focus{
  outline:0;border-color:var(--ink);box-shadow:0 0 0 4px rgba(198,247,60,.35);
}
.f textarea{min-height:96px;resize:vertical}
.f .hint{font-size:12.5px;color:var(--mut);margin-top:7px}
.f .err{font-size:13px;font-weight:700;color:var(--ink);margin-top:7px}
.f [aria-invalid="true"]{border-color:var(--ink);border-width:2px}
.gotcha{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.consent{
  display:flex;gap:12px;background:var(--soft);border-radius:var(--r-sm);
  padding:16px;margin:18px 0 14px;
}
.consent input{margin-top:3px;width:18px;height:18px;accent-color:#5C8500;flex:none;cursor:pointer}
.consent label{font-size:12.5px;line-height:1.5;color:var(--mut);cursor:pointer}
.consent a{color:#5C8500;font-weight:700}
.side{display:grid;gap:12px}
.side .row{background:var(--soft);border-radius:var(--r-card);padding:20px 22px}
.side .row .k{font-size:12px;font-weight:800;color:var(--mut);letter-spacing:.04em;text-transform:uppercase}
.side .row .v{font-size:16.5px;font-weight:700;margin-top:5px;letter-spacing:-.02em;max-width:none}
.side .row.lime{background:var(--lime)}
.side .row.lime .k{color:#4A6206}

/* ---------- cost calculator ---------- */

.calc{margin:26px 0}
.calc-inputs{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.seg{display:flex;background:var(--white);border:1.5px solid var(--line);border-radius:var(--r-pill);padding:4px}
.seg label{
  flex:1;display:flex;align-items:center;justify-content:center;min-height:40px;
  margin:0;padding:8px 14px;border-radius:var(--r-pill);
  font-size:13.5px;font-weight:600;color:var(--mut);cursor:pointer;
  transition:background .25s,color .25s;
}
.seg label:hover{color:var(--ink);background:var(--lime-s)}
.seg input:checked + label{background:var(--ink);color:var(--lime);font-weight:700}
.seg input:focus-visible + label{outline:3px solid var(--ink);outline-offset:2px}
.calc-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
.calc-col{border-radius:var(--r-card);padding:clamp(22px,2.3vw,30px)}
.calc-pay{background:var(--white);border:1.5px solid var(--line);border-top:2px solid var(--coral)}
.calc-fight{background:var(--lime)}
.calc-col h3{margin-bottom:14px}
.calc-line{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding-block:9px;border-bottom:1px dotted var(--line);font-size:14.5px;color:var(--mut);
}
.calc-fight .calc-line{border-bottom-color:rgba(11,15,12,.16);color:#48600A}
.calc-line b{font-weight:800;color:var(--ink);white-space:nowrap}
.calc-line:last-of-type{border-bottom:0}
.calc-total-k{
  font-family:var(--mono);font-size:12px;letter-spacing:.02em;
  color:var(--mut);margin-top:14px;text-transform:uppercase;
}
.calc-fight .calc-total-k{color:#4A6206}
.calc-total{font-size:clamp(24px,2.4vw,31px);font-weight:800;letter-spacing:-.04em;line-height:1;margin-top:8px}
/* the one and only use of coral on this site */
.calc-pay .calc-total{color:var(--coral)}
.calc-fight .calc-total{color:var(--ink)}
.calc-note{margin-top:18px}

/* ---------- legal pages ---------- */

.legal{max-width:820px;margin:0 auto;padding:56px clamp(20px,4vw,40px)}
.legal-updated{font-family:var(--mono);font-size:12.5px;color:var(--mut);margin-bottom:30px}
.legal h2{
  font-size:24px;font-weight:800;letter-spacing:-.025em;line-height:1.25;
  border-top:1px solid var(--line);padding-top:14px;margin:34px 0 12px;
}
.legal h3{font-size:18px;margin:24px 0 8px}
.legal p,.legal li{font-size:16px;line-height:1.7;color:var(--mut)}
.legal p{margin-bottom:14px}
.legal ul{margin:0 0 16px;padding-left:22px;max-width:65ch}
.legal li{margin-bottom:8px}
.legal li::marker{color:#5C8500}
.legal a{color:#5C8500;font-weight:700}

/* ---------- footer ---------- */

footer{background:var(--ink);color:#A9B3AC;padding:var(--sp) 0 40px}
footer .cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr 1fr;gap:34px}
/* seventeen states run too deep in a single column */
footer .states-col ul{columns:2;column-gap:18px}
footer h2{color:var(--white);font-size:12.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;margin-bottom:16px}
footer p{color:#A9B3AC;font-size:14.5px}
footer a,footer li{
  color:#A9B3AC;font-size:14.5px;text-decoration:none;line-height:2;
  list-style:none;display:block;transition:color .2s;
}
footer a:hover{color:var(--lime)}
footer ul{margin:0;padding:0}
footer .fbrand{margin-bottom:14px}
footer .faddr{font-size:14.5px;margin-top:2px}
footer .smsbox{
  background:rgba(255,255,255,.06);border-radius:var(--r-sm);
  padding:16px 18px;margin-top:34px;font-size:12.5px;line-height:1.6;
}
footer .smsbox p{font-size:12.5px;max-width:none;color:#A9B3AC}
footer .smsbox b{color:var(--lime)}
footer .smsbox a{display:inline;text-decoration:underline}
footer .disc{font-size:12px;line-height:1.65;color:#77817A;margin-top:20px;max-width:92ch}
footer .base{
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,.1);margin-top:30px;padding-top:22px;font-size:13px;
}
footer .base p{font-size:13px}

/* ---------- focus ---------- */

:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.bg-ink :focus-visible,footer :focus-visible,.band :focus-visible{outline-color:var(--lime)}

/* ---------- motion ---------- */

@media (prefers-reduced-motion:no-preference){
  /* scoped to .js so that with JavaScript off, or if main.js fails to load,
     every revealed element renders normally instead of staying invisible */
  .js .rv{
    opacity:0;transform:translateY(24px);
    transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);
  }
  .js .rv.in{opacity:1;transform:none}
  .js .rv:nth-child(2){transition-delay:.06s}
  .js .rv:nth-child(3){transition-delay:.12s}
  .js .rv:nth-child(4){transition-delay:.18s}
  .js .rv:nth-child(5){transition-delay:.24s}
  .js .rv:nth-child(6){transition-delay:.3s}
  .js .rv:nth-child(7){transition-delay:.36s}
  .js .rv:nth-child(8){transition-delay:.42s}
}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none}
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* ---------- touch devices ----------
   A touch device fires :hover on tap. Tapping a card was therefore starting a
   340ms transform and box-shadow transition, and that paint had to finish
   before anything else could happen. Measured on a state page under a 6x CPU
   throttle it was the whole of a 96ms interaction, with the JavaScript handler
   itself costing 0ms. Nothing here has a hover state to lose on a touch
   screen, so the cheapest fix is not to run them. */
@media (hover:none){
  .card,.stat,.shot,.quote,.step,.chip{transition:none}
  .card:hover,.stat:hover,.quote:hover,.step:hover{
    transform:none;box-shadow:var(--sh-1);border-color:var(--line)
  }
  .card.fill:hover,.card.limefill:hover,.card.inkfill:hover{border-color:transparent}
}

/* ---------- responsive ---------- */

@media (max-width:1000px){
  .hero,.split,.formwrap{grid-template-columns:1fr}
  .split.rev .txt{order:0}
  .g4,.g3{grid-template-columns:repeat(2,1fr)}
  footer .cols{grid-template-columns:1fr 1fr}
  .shellbar .cta{display:none}
  .navtoggle{display:inline-flex}
  .tabs{
    position:fixed;top:0;right:0;bottom:0;z-index:90;
    width:min(320px,100vw);
    flex-direction:column;gap:6px;align-items:stretch;
    background:var(--white);border-left:1px solid var(--line);border-radius:0;
    padding:88px 20px 24px;box-shadow:var(--sh-3);
    transform:translateX(100%);visibility:hidden;overflow-y:auto;
    transition:transform .34s cubic-bezier(.2,.7,.2,1),visibility .34s;
  }
  .tabs.open{transform:translateX(0);visibility:visible}
  .tabs a{font-size:16px;padding:13px 18px}
  .tabs .drawer-head{
    display:flex;align-items:center;justify-content:space-between;
    margin:-68px -4px 18px;padding-bottom:16px;border-bottom:1px solid var(--line);
  }
  .tabs .drawer-cta{display:block;margin-top:14px;padding-top:18px;border-top:1px solid var(--line)}
  .tabs .drawer-cta .btn{width:100%}
}
@media (max-width:640px){
  .g2,.g3,.g4,.frow,.calc-inputs,.calc-cols{grid-template-columns:1fr}
  .step{grid-template-columns:1fr;gap:14px}
  footer .cols{grid-template-columns:1fr}
  .shot.arch{border-radius:120px 120px var(--r-photo) var(--r-photo)}
  .brand-full{display:none}
  .brand-mark{display:block;height:36px;width:36px}
  /* the red column reads first, because the contrast is the point */
  .calc-fight{order:2}
}

/* ---------- print, section 9 of the logo spec ---------- */

@media print{
  .brand-full{display:none}
  .brand-print{display:block;height:38px;width:auto}
  .brand-mark{display:none}
  footer,.shell::before,.navtoggle,.tabs,.band,.cta-row,.skip{display:none!important}
  .shell{position:static;border-bottom:1px solid #000}
  body{background:#fff;color:#000}
  a[href^="/"]::after{content:""}
  .card,.step,.quote,.calc-col{break-inside:avoid;box-shadow:none}
}