/* ═══════════════════════════════════════════════════════════════
   SOFIRE-IT SUPPORT — DESIGN SYSTEM
   Light, editorial, restrained. No gradients on text, no glow,
   no emoji, no orb blobs. Colour used sparingly and deliberately.
   ═══════════════════════════════════════════════════════════════ */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}

:root{
  /* — paper & ink — */
  --paper:#FBFAF8;          /* page background, warm off-white */
  --card:#FFFFFF;
  --wash:#F4F2ED;           /* alternating section band */
  --wash-2:#EDEAE3;
  --ink:#15171C;            /* headings */
  --ink-2:#4C525F;          /* body copy */
  --ink-3:#868C99;          /* muted / meta */
  --line:#E4E1D9;           /* hairlines */
  --line-2:#D3CFC4;

  /* — brand — */
  --red:#C2261B;            /* 5.9:1 on white, AA for body text */
  --red-deep:#9C1D14;
  --red-wash:#FDF2F0;
  --ink-deep:#101216;       /* dark blocks */

  /* accent family, carried over from the original Sofire palette.
     Each is AA-contrast on white and gets a matching 6% wash. */
  --amber:#B26A00;   --amber-wash:#FDF4E6;
  --blue:#1D5FBF;    --blue-wash:#EDF3FC;
  --teal:#0F7B78;    --teal-wash:#E9F6F5;
  --green:#1E7A46;   --green-wash:#EAF5EE;
  --purple:#6B45C4;  --purple-wash:#F2EEFC;
  --pink:#B3246B;    --pink-wash:#FCEEF4;

  /* — type — */
  --display:'Archivo',system-ui,sans-serif;
  --body:'Inter Tight','Inter',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;

  /* — metrics — */
  --max:1680px;
  --gut:clamp(20px,4.5vw,72px);
  --measure:74ch;
  --r:4px;                  /* small, confident radius — not pill-shaped */
  --r-lg:8px;
}

body{
  background:var(--paper);color:var(--ink-2);
  font-family:var(--body);font-size:17px;line-height:1.65;
  font-weight:400;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* ── TYPE SCALE ─────────────────────────────────────────────── */
h1,h2,h3,h4,h5{
  font-family:var(--display);color:var(--ink);
  font-weight:700;line-height:1.08;letter-spacing:-0.02em;
  text-wrap:balance;
}
h1{font-size:clamp(34px,4.6vw,60px);letter-spacing:-0.03em;}
h2{font-size:clamp(26px,3.2vw,40px);}
h3{font-size:clamp(18px,1.6vw,21px);line-height:1.25;letter-spacing:-0.01em;}
h4{font-size:17px;font-weight:600;letter-spacing:-0.005em;}
h1 em,h2 em{font-style:normal;color:var(--red);}

.eyebrow{
  display:block;font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:0.16em;text-transform:uppercase;color:var(--red);
  margin-bottom:18px;
}
.eyebrow-line{
  display:flex;align-items:center;gap:14px;font-family:var(--mono);
  font-size:11px;font-weight:500;letter-spacing:0.16em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:22px;
}
.eyebrow-line::after{content:'';flex:1;height:1px;background:var(--line);}

.lede{
  font-size:clamp(17px,1.5vw,20px);line-height:1.6;color:var(--ink-2);
  max-width:62ch;font-weight:400;
}
.lede strong{color:var(--ink);font-weight:600;}

/* ── LAYOUT ─────────────────────────────────────────────────── */
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut);}
.narrow{max-width:860px;}
/* A .narrow wrap keeps its comfortable measure but starts on the SAME
   left grid line as every other section, instead of centring itself. */
.wrap.narrow{max-width:var(--max);}
.wrap.narrow > *{max-width:var(--measure);}
.wrap.narrow > .tbl-scroll,.wrap.narrow > .cards,.wrap.narrow > .plans{max-width:none;}
section{padding:clamp(56px,7vw,104px) 0;}
.band{background:var(--wash);border-block:1px solid var(--line);}
.band-dark{background:var(--ink-deep);border-block:1px solid #22252c;}
.band-dark h1,.band-dark h2,.band-dark h3,.band-dark h4,
.band-dark .prose h2,.band-dark .prose h3{color:#fff;}
.band-dark p,.band-dark li,
.band-dark .prose p,.band-dark .prose li{color:#A8AEBB;}
.band-dark .eyebrow{color:#FF6B5A;}
.band-dark strong,.band-dark .prose p strong,.band-dark .prose li strong{color:#fff;}
.band-dark .prose ul li::before{border-color:#FF6B5A;}
.band-dark .prose ol li::before{color:#FF6B5A;}
.band-dark .prose blockquote{border-left-color:#FF6B5A;color:#fff;}
.band-dark .prose a{color:#FF8A7A;text-decoration-color:rgba(255,138,122,.4);}
.band-dark .fine{color:#767D8B;}

/* asymmetric two-column: content leads, aside supports */
.split{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(32px,5vw,72px);align-items:start;}
.split-even{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,64px);align-items:center;}
.split-tight{display:grid;grid-template-columns:minmax(200px,.28fr) minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:start;}

/* ── NAV ────────────────────────────────────────────────────── */
.topbar{
  background:var(--ink-deep);color:#A8AEBB;
  font-family:var(--mono);font-size:11.5px;letter-spacing:0.05em;
}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;
  gap:20px;height:38px;flex-wrap:nowrap;overflow:hidden;}
.topbar a{color:#D6DAE3;text-decoration:none;white-space:nowrap;}
.topbar a:hover{color:#fff;}
.topbar-loc{display:flex;align-items:center;gap:0;white-space:nowrap;}
.topbar-loc svg{width:13px;height:13px;opacity:.7;margin-right:8px;flex-shrink:0;}
.topbar-right{display:flex;align-items:center;gap:22px;}

nav{
  position:sticky;top:0;z-index:100;background:rgba(251,250,248,0.94);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--line);
}
nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:28px;height:100px;}
nav.stuck .brand img{height:62px;}
nav.stuck .wrap{height:84px;}
.brand{display:flex;align-items:center;gap:0;text-decoration:none;flex-shrink:0;}
.brand img{height:74px;width:auto;display:block;transition:height .25s;}
.navlinks{display:flex;align-items:center;gap:4px;}
.navlinks > a{
  color:var(--ink-2);text-decoration:none;font-size:15px;font-weight:500;
  padding:9px 13px;border-radius:var(--r);transition:color .15s,background .15s;
  white-space:nowrap;letter-spacing:-0.005em;
}
.navlinks > a:hover{color:var(--ink);background:var(--wash);}
.navlinks > a[aria-current="page"]{color:var(--red);font-weight:600;}
.nav-actions{display:flex;align-items:center;gap:12px;flex-shrink:0;}

/* phone shown as a real, legible element — not low-contrast text on a gradient */
.nav-phone{
  display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  color:var(--ink) !important;font-weight:600;font-size:15px;
  padding:9px 15px;border:1px solid var(--line-2);border-radius:var(--r);
  background:var(--card);transition:border-color .15s,color .15s;white-space:nowrap;
}
.nav-phone svg{width:16px;height:16px;color:var(--red);}
.nav-phone:hover{border-color:var(--ink);}

.burger{display:none;width:42px;height:42px;border:1px solid var(--line-2);
  background:var(--card);border-radius:var(--r);cursor:pointer;
  flex-direction:column;align-items:center;justify-content:center;gap:5px;}
.burger span{display:block;width:17px;height:1.5px;background:var(--ink);transition:transform .25s,opacity .2s;}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}

.mobnav{display:none;border-bottom:1px solid var(--line);background:var(--card);}
.mobnav.open{display:block;}
.mobnav a{
  display:flex;justify-content:space-between;align-items:center;
  padding:15px var(--gut);color:var(--ink);text-decoration:none;
  font-size:16px;font-weight:500;border-bottom:1px solid var(--line);
}
.mobnav a:last-child{border-bottom:0;}
.mobnav a span{color:var(--ink-3);font-family:var(--mono);font-size:11px;}

/* ── BUTTONS ────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--body);font-size:15.5px;font-weight:600;letter-spacing:-0.005em;
  padding:13px 22px;border-radius:var(--r);text-decoration:none;
  border:1px solid transparent;cursor:pointer;transition:background .15s,border-color .15s,color .15s;
  line-height:1.2;
}
.btn svg{width:17px;height:17px;flex-shrink:0;}
.btn-solid{background:var(--red);color:#fff !important;border-color:var(--red);}
.btn-solid:hover{background:var(--red-deep);border-color:var(--red-deep);}
.btn-dark{background:var(--ink-deep);color:#fff !important;border-color:var(--ink-deep);}
.btn-dark:hover{background:#000;}
.btn-line{background:transparent;color:var(--ink) !important;border-color:var(--line-2);}
.btn-line:hover{border-color:var(--ink);background:var(--card);}
.btn-ghost{background:transparent;color:var(--red) !important;border-color:transparent;padding-inline:0;}
.btn-ghost:hover{color:var(--red-deep) !important;}
.band-dark .btn-line{color:#fff !important;border-color:#3A3F49;}
.band-dark .btn-line:hover{border-color:#fff;background:transparent;}
.btns{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:32px;}

/* ── HERO ───────────────────────────────────────────────────── */
.hero{padding:clamp(44px,5.5vw,72px) 0 clamp(48px,6vw,76px);border-bottom:1px solid var(--line);}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(300px,420px);justify-content:space-between;gap:clamp(36px,5vw,72px);align-items:stretch;}
.hero h1{margin-bottom:22px;}
.hero .lede{margin-bottom:0;}
.hero-aside{border-left:2px solid var(--red);padding-left:28px;display:flex;flex-direction:column;justify-content:flex-start;}
.hero-aside dl{display:grid;gap:22px;align-content:start;}
.hero-aside dt{font-family:var(--mono);font-size:10.5px;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:3px;}
.hero-aside dd{font-family:var(--display);font-size:23px;font-weight:700;color:var(--ink);
  letter-spacing:-0.02em;line-height:1.1;}
.hero-aside dd small{font-family:var(--body);font-size:14px;font-weight:400;color:var(--ink-2);
  display:block;letter-spacing:0;margin-top:3px;}

/* ── BREADCRUMB ─────────────────────────────────────────────── */
.crumbbar{border-bottom:1px solid var(--line);background:var(--paper);}
.crumbs{font-family:var(--mono);font-size:11.5px;letter-spacing:0.04em;
  color:var(--ink-3);padding:13px 0;white-space:nowrap;overflow-x:auto;
  scrollbar-width:none;}
.crumbs::-webkit-scrollbar{display:none;}
.crumbs a{color:var(--ink-3);text-decoration:none;}
.crumbs a:hover{color:var(--red);}
.crumbs i{font-style:normal;padding:0 8px;color:var(--line-2);}

/* ── PROSE ──────────────────────────────────────────────────── */
.prose > * + *{margin-top:22px;}
.prose h2{margin-top:56px;}
.prose h2:first-child{margin-top:0;}
.prose h3{margin-top:38px;}
.prose p{color:var(--ink-2);max-width:var(--measure);}
.prose p strong{color:var(--ink);font-weight:600;}
.prose a{color:var(--red);text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:2.5px;text-decoration-color:rgba(194,38,27,.35);}
.prose a:hover{text-decoration-color:var(--red);}
.prose ul,.prose ol{padding-left:0;list-style:none;}
.prose ul li,.prose ol li{position:relative;padding-left:26px;margin-bottom:13px;color:var(--ink-2);max-width:var(--measure);}
.prose ul li::before{content:'';position:absolute;left:2px;top:11px;
  width:7px;height:7px;border:1.5px solid var(--red);border-radius:50%;}
.prose ol{counter-reset:n;}
.prose ol li{padding-left:34px;counter-increment:n;}
.prose ol li::before{content:counter(n);position:absolute;left:0;top:1px;
  font-family:var(--mono);font-size:12px;font-weight:500;color:var(--red);
  width:22px;text-align:left;}
.prose li strong{color:var(--ink);font-weight:600;}
.prose blockquote{
  border-left:2px solid var(--red);padding:4px 0 4px 24px;margin:34px 0;
  font-family:var(--display);font-size:clamp(19px,2vw,24px);font-weight:600;
  line-height:1.35;color:var(--ink);letter-spacing:-0.015em;
}

/* ── ICONS ──────────────────────────────────────────────────── */
svg.ico{width:22px;height:22px;color:var(--red);display:block;}

/* ── CARDS (used sparingly, varied) ─────────────────────────── */
.cards{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;}
.cards-2{grid-template-columns:repeat(2,minmax(0,1fr));}
.cards-3{grid-template-columns:repeat(3,minmax(0,1fr));}
.cards-4{grid-template-columns:repeat(4,minmax(0,1fr));}
.cards > *{background:var(--card);padding:clamp(24px,2.6vw,32px);}
.cards a{text-decoration:none;color:inherit;display:flex;flex-direction:column;transition:background .15s;}
.cards a:hover{background:var(--wash);}
.cards svg.ico{margin-bottom:16px;}
.cards h3{margin-bottom:9px;}
.cards p{font-size:15.5px;line-height:1.6;color:var(--ink-2);}
.cards p a{color:var(--red);text-decoration:underline;text-decoration-color:rgba(194,38,27,.35);}
.cards .more{margin-top:auto;padding-top:18px;font-family:var(--mono);font-size:11px;
  letter-spacing:0.12em;text-transform:uppercase;color:var(--red);font-weight:500;}
.band .cards{border-color:var(--line-2);background:var(--line-2);}

/* ── NUMBERED STEP LIST (replaces card grid for processes) ──── */
.steps{counter-reset:s;display:grid;gap:0;margin-top:8px;}
.step{counter-increment:s;display:grid;grid-template-columns:64px 1fr;gap:24px;
  padding:28px 0;border-top:1px solid var(--line);align-items:start;}
.step:last-child{border-bottom:1px solid var(--line);}
.step::before{content:counter(s,decimal-leading-zero);
  font-family:var(--mono);font-size:13px;font-weight:500;color:var(--red);
  letter-spacing:0.06em;padding-top:4px;}
.step h3{margin-bottom:8px;}
.step p{font-size:16px;color:var(--ink-2);}

/* ── SPEC / DEFINITION ROWS (replaces cards for feature lists) ── */
.specs{border-top:1px solid var(--line);}
.spec{display:grid;grid-template-columns:32px 200px 1fr;gap:22px;align-items:start;
  padding:22px 0;border-bottom:1px solid var(--line);}
.spec h3{font-size:17px;font-weight:600;letter-spacing:-0.005em;padding-top:1px;}
.spec p{font-size:16px;color:var(--ink-2);}
.spec p a{color:var(--red);text-decoration:underline;text-decoration-color:rgba(194,38,27,.35);}

/* ── STAT ROW ───────────────────────────────────────────────── */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);}
.stats > div{padding:34px 26px;border-right:1px solid var(--line);text-align:center;
  display:flex;flex-direction:column;justify-content:center;align-items:center;}
.stats > div:last-child{border-right:0;}
.stats-2{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
.stats-2 > div:nth-child(2n){border-right:0;}
.stats-2 > div:nth-child(-n+2){border-bottom:1px solid var(--line);}
.stats-2 > div{padding:28px 20px;}
.stats b{display:block;white-space:nowrap;text-align:center;font-family:var(--display);font-size:clamp(30px,3.4vw,42px);
  font-weight:700;color:var(--ink);letter-spacing:-0.03em;line-height:1;}
.stats span{display:block;margin-top:9px;text-wrap:balance;font-family:var(--mono);font-size:10.5px;
  letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-3);}
.band-dark .stats{border-color:#2A2E36;}
.band-dark .stats > div{border-color:#2A2E36;}
.band-dark .stats b{color:#fff;}

/* ── AREA TAGS ──────────────────────────────────────────────── */
.tags{display:flex;flex-wrap:wrap;gap:8px;}
.tags span,.tags a{
  font-family:var(--mono);font-size:12px;letter-spacing:0.03em;
  padding:6px 11px;border:1px solid var(--line-2);border-radius:var(--r);
  color:var(--ink-2);background:var(--card);text-decoration:none;
}
.tags a:hover{border-color:var(--red);color:var(--red);}

/* ── TABLE ──────────────────────────────────────────────────── */
.tbl-scroll{overflow-x:auto;}
table{width:100%;border-collapse:collapse;font-size:15.5px;}
thead th{
  font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:0.13em;
  text-transform:uppercase;color:var(--ink-3);text-align:left;
  padding:0 18px 12px 0;border-bottom:1px solid var(--ink);
}
tbody td{padding:18px 18px 18px 0;border-bottom:1px solid var(--line);
  color:var(--ink-2);vertical-align:top;}
tbody td strong{color:var(--ink);font-weight:600;}
tbody tr:last-child td{border-bottom:0;}
td .price{font-family:var(--display);font-size:21px;font-weight:700;color:var(--ink);
  letter-spacing:-0.02em;white-space:nowrap;}

/* ── PRICING COLUMNS ────────────────────────────────────────── */
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;}
.plan{background:var(--card);padding:clamp(26px,2.6vw,34px);display:flex;flex-direction:column;}
.plan.feature{background:var(--ink-deep);}
.plan.feature h3,.plan.feature .plan-price{color:#fff;}
.plan.feature .plan-for,.plan.feature li{color:#A8AEBB;}
.plan.feature li::before{border-color:#FF6B5A;}
.plan-badge{font-family:var(--mono);font-size:10px;letter-spacing:0.14em;text-transform:uppercase;
  color:#FF6B5A;margin-bottom:14px;display:block;}
.plan-for{font-size:14.5px;color:var(--ink-3);margin:6px 0 20px;}
.plan-price{font-family:var(--display);font-size:34px;font-weight:700;color:var(--ink);
  letter-spacing:-0.03em;line-height:1;}
.plan-price small{font-family:var(--body);font-size:14px;font-weight:400;color:var(--ink-3);
  letter-spacing:0;}
.plan ul{list-style:none;margin:24px 0 26px;display:grid;gap:10px;}
.plan li{position:relative;padding-left:22px;font-size:15px;color:var(--ink-2);line-height:1.5;}
.plan li::before{content:'';position:absolute;left:0;top:7px;width:9px;height:5px;
  border-left:1.5px solid var(--red);border-bottom:1.5px solid var(--red);
  transform:rotate(-45deg);}
.plan .btn{margin-top:auto;justify-content:center;}

/* ── FAQ ────────────────────────────────────────────────────── */
.faq{border-top:1px solid var(--ink);}
.faq details{border-bottom:1px solid var(--line);}
.faq summary{
  cursor:pointer;list-style:none;display:flex;justify-content:space-between;
  align-items:baseline;gap:24px;padding:22px 0;
  font-family:var(--display);font-size:clamp(16.5px,1.5vw,19px);font-weight:600;
  color:var(--ink);letter-spacing:-0.01em;line-height:1.35;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{
  content:'';flex-shrink:0;width:11px;height:11px;margin-top:6px;
  border-right:1.5px solid var(--red);border-bottom:1.5px solid var(--red);
  transform:rotate(45deg);transition:transform .2s;
}
.faq details[open] summary::after{transform:rotate(-135deg);}
.faq summary:hover{color:var(--red);}
.faq details p{padding:0 0 24px;max-width:70ch;color:var(--ink-2);font-size:16.5px;}
.faq details p strong{color:var(--ink);font-weight:600;}
.faq details p a{color:var(--red);text-decoration:underline;text-decoration-color:rgba(194,38,27,.35);}

/* ── CALLOUT / CTA ──────────────────────────────────────────── */
.callout{
  background:var(--ink-deep);border-radius:var(--r-lg);
  padding:clamp(36px,4.5vw,64px);display:grid;
  grid-template-columns:1.25fr 1fr;gap:clamp(28px,4vw,56px);align-items:center;
}
.callout h2{color:#fff;margin-bottom:14px;}
.callout p{color:#A8AEBB;font-size:16.5px;max-width:50ch;}
.callout .eyebrow{color:#FF6B5A;}
.callout-side{display:grid;gap:14px;}
.callout-side a{
  display:flex;align-items:center;gap:13px;padding:15px 18px;
  border:1px solid #2E323B;border-radius:var(--r);text-decoration:none;
  color:#fff;font-weight:500;font-size:15.5px;transition:border-color .15s,background .15s;
}
.callout-side a:hover{border-color:#4A505C;background:#171A20;}
.callout-side a svg{width:18px;height:18px;color:#FF6B5A;flex-shrink:0;}
.callout-side a small{display:block;font-family:var(--mono);font-size:10px;
  letter-spacing:0.12em;text-transform:uppercase;color:#767D8B;font-weight:400;margin-bottom:2px;}

/* ── ARTICLE CARDS ──────────────────────────────────────────── */
.posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,40px);}
.post{display:flex;flex-direction:column;text-decoration:none;color:inherit;
  padding-top:20px;border-top:2px solid var(--ink);transition:border-color .15s;}
.post:hover{border-top-color:var(--red);}
.post:hover h3{color:var(--red);}
.post time{font-family:var(--mono);font-size:11px;letter-spacing:0.1em;
  text-transform:uppercase;color:var(--ink-3);display:block;margin-bottom:12px;}
.post h3{margin-bottom:10px;transition:color .15s;}
.post p{font-size:15.5px;color:var(--ink-2);line-height:1.6;}
.post .more{margin-top:16px;font-family:var(--mono);font-size:11px;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--red);font-weight:500;}

/* ── FORM ───────────────────────────────────────────────────── */
.field{display:block;margin-bottom:20px;}
.field > span{display:block;font-family:var(--mono);font-size:10.5px;font-weight:500;
  letter-spacing:0.13em;text-transform:uppercase;color:var(--ink-3);margin-bottom:8px;}
.field input,.field select,.field textarea{
  width:100%;font-family:var(--body);font-size:16px;color:var(--ink);
  background:var(--card);border:1px solid var(--line-2);border-radius:var(--r);
  padding:13px 15px;transition:border-color .15s,box-shadow .15s;
}
.field textarea{resize:vertical;min-height:130px;line-height:1.6;}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--red);box-shadow:0 0 0 3px var(--red-wash);
}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-3);}
.field-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;}
.notice{border-left:2px solid var(--red);background:var(--card);
  border-radius:0 var(--r) var(--r) 0;padding:22px 24px;}
.notice h3{margin-bottom:8px;}
.notice p{font-size:16px;color:var(--ink-2);}
.notice p a{color:var(--red);}
.err{color:var(--red);font-size:14.5px;margin-top:12px;min-height:1px;}
.fine{color:var(--ink-3);font-size:13.5px;margin-top:12px;}

/* ── CONTACT ROWS ───────────────────────────────────────────── */
.contact-rows{border-top:1px solid var(--line);}
.contact-row{display:grid;grid-template-columns:32px 190px 1fr;gap:22px;align-items:start;
  padding:24px 0;border-bottom:1px solid var(--line);}
.contact-row h3{font-size:17px;font-weight:600;}
.contact-row p{font-size:16.5px;color:var(--ink-2);}
.contact-row a{color:var(--ink);font-weight:500;text-decoration:none;
  border-bottom:1px solid var(--line-2);}
.contact-row a:hover{color:var(--red);border-bottom-color:var(--red);}

/* ── FOOTER ─────────────────────────────────────────────────── */
footer{background:var(--ink-deep);color:#A8AEBB;padding:clamp(48px,6vw,80px) 0 32px;
  font-size:15px;}
.foot-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;gap:clamp(28px,4vw,52px);
  padding-bottom:48px;border-bottom:1px solid #262A32;}
.foot-brand img{height:84px;width:auto;margin-bottom:18px;display:block;}
.foot-brand p{color:#8D949F;font-size:14.5px;line-height:1.65;max-width:34ch;}
.foot-brand .foot-contact{margin-top:20px;display:grid;gap:7px;}
.foot-brand .foot-contact a{color:#fff;text-decoration:none;font-weight:500;}
.foot-brand .foot-contact a:hover{color:#FF6B5A;}
.foot-col .foot-h{font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:0.14em;
  text-transform:uppercase;color:#fff;margin-bottom:16px;}
.foot-col a{display:block;color:#8D949F;text-decoration:none;font-size:14.5px;
  padding:5px 0;transition:color .15s;}
.foot-col a:hover{color:#fff;}
.foot-bot{padding-top:26px;display:flex;justify-content:space-between;gap:18px;
  flex-wrap:wrap;font-family:var(--mono);font-size:11.5px;letter-spacing:0.03em;color:#6C737F;}
.foot-bot a{color:#6C737F;text-decoration:none;}
.foot-bot a:hover{color:#A8AEBB;}

/* ── UTILITIES ──────────────────────────────────────────────── */
.rule{height:1px;background:var(--line);border:0;margin:0;}
.mt0{margin-top:0 !important;}
.center{text-align:center;}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
:focus-visible{outline:2px solid var(--red);outline-offset:2px;border-radius:2px;}

/* ── RESPONSIVE ─────────────────────────────────────────────── */
@media(max-width:1080px){
  .navlinks{display:none;}
  .burger{display:flex;}
  .cards-4{grid-template-columns:repeat(2,minmax(0,1fr));}
  .hero-grid{grid-template-columns:1fr;gap:36px;}
  .hero-aside{border-left:0;border-top:2px solid var(--red);padding:24px 0 0;}
  .hero-aside dl{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 28px;}
}
@media(max-width:1150px){.foot-top{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr);}}
@media(max-width:900px){
  .split,.split-even,.split-tight{grid-template-columns:1fr;}
  .cards-3{grid-template-columns:repeat(2,minmax(0,1fr));}
  .posts{grid-template-columns:1fr;gap:0;}
  .post{padding:20px 0 24px;}
  .plans{grid-template-columns:1fr;}
  .callout{grid-template-columns:1fr;}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr));}
  .stats > div:nth-child(2n){border-right:0;}
  .stats > div:nth-child(-n+2){border-bottom:1px solid var(--line);}
  .foot-top{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
  .spec,.contact-row{grid-template-columns:28px 1fr;gap:8px 18px;}
  .spec h3,.contact-row h3{grid-column:2;}
  .spec p,.contact-row p{grid-column:2;margin-top:5px;}
}
@media(max-width:640px){
  body{font-size:16.5px;}
  .topbar-right a:not(.topbar-phone){display:none;}
  .cards-2,.cards-3,.cards-4{grid-template-columns:1fr;}
  .field-row{grid-template-columns:1fr;gap:0;}
  .step{grid-template-columns:1fr;gap:10px;}
  .step::before{padding-top:0;}
  .foot-top{grid-template-columns:1fr;gap:32px;}
  .nav-phone span{display:none;}
  .nav-phone{padding:10px 12px;}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important;
    scroll-behavior:auto !important;}
}
@media print{
  .topbar,nav,.mobnav,footer,.callout,.tool-form,.skip{display:none;}
  body{background:#fff;color:#000;}
  /* never print a blank page because a reveal has not fired */
  .io [data-rise],.io .reg-row{opacity:1 !important;transform:none !important;}
  .io .hero-aside{border-left-color:#C2261B !important;}
  .faq details{open:true;}
  .faq details > p{display:block !important;}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:11px;color:#555;}
}

/* ── SERVICE REGISTER (row list, replaces repeated card grids) ── */
.register{border-top:1px solid var(--ink);}
.reg-row{
  display:grid;grid-template-columns:30px 210px 1fr 24px;
  gap:20px;align-items:center;padding:20px 0;
  border-bottom:1px solid var(--line);text-decoration:none;
  transition:background .15s,padding .15s;
}
.reg-row:hover{background:rgba(255,255,255,.55);}
.reg-ico svg{width:21px;height:21px;}
.reg-name strong{font-family:var(--display);font-size:17.5px;font-weight:700;
  color:var(--ink);letter-spacing:-0.015em;}
.reg-desc{font-size:15.5px;color:var(--ink-2);line-height:1.55;max-width:82ch;}
.reg-desc em{font-style:normal;font-family:var(--mono);font-size:14px;}
.reg-go svg{width:18px;height:18px;color:var(--line-2);transition:color .15s,transform .15s;}
.reg-row:hover .reg-go svg{color:var(--red);transform:translateX(3px);}
.reg-row:hover .reg-name strong{color:var(--red);}
@media(max-width:900px){
  .reg-row{grid-template-columns:26px 1fr 20px;gap:8px 16px;padding:18px 0;}
  .reg-desc{grid-column:2/4;}
  .reg-go{display:none;}
}

/* ── FEATURE DEFINITION LIST (for word values, not numbers) ── */
.featlist{border-top:1px solid var(--line);}
.featlist > div{display:grid;grid-template-columns:180px 1fr;gap:24px;
  padding:16px 0;border-bottom:1px solid var(--line);align-items:baseline;}
.featlist dt{font-family:var(--display);font-size:16px;font-weight:700;color:var(--ink);
  letter-spacing:-0.01em;}
.featlist dd{font-size:15.5px;color:var(--ink-2);line-height:1.55;}
.band-dark .featlist{border-top-color:#2A2E36;}
.band-dark .featlist > div{border-bottom-color:#2A2E36;}
.band-dark .featlist dt{color:#fff;}
.band-dark .featlist dd{color:#8D949F;}
@media(max-width:640px){
  .featlist > div{grid-template-columns:1fr;gap:4px;}
}

/* ── TOPBAR: truncate gracefully on small screens ── */
@media(max-width:900px){ .topbar-more{display:none;} }
@media(max-width:560px){
  .topbar .wrap{justify-content:space-between;}
  .topbar-right a:not(.topbar-phone){display:none;}
  .topbar-loc{font-size:11px;}
}
@media(max-width:400px){ .topbar-loc{display:none;} }

/* ── NARROW PHONES: keep the header from overflowing ── */
@media(max-width:520px){
  nav .wrap{height:68px;gap:12px;}
  .nav-phone{display:none;}          /* phone is in the top bar and the menu */
  .nav-actions{gap:10px;}
  .btn{padding:12px 16px;font-size:14.5px;}
  .brand img{height:44px;}
}
@media(max-width:380px){
  .nav-actions .btn-solid{padding:12px 13px;}
}
/* tables scroll rather than squash */
.tbl-scroll table{min-width:520px;}
.tbl-scroll{-webkit-overflow-scrolling:touch;}

/* ── Grid hairlines come from the container background, so an incomplete
   final row would show as an empty tinted cell. Fill it instead. ── */
.cards::after{content:'';background:var(--card);display:none;}
.cards.cards-3 > *:nth-child(3n+1):nth-last-child(1)::after,
.cards.cards-3 > *:nth-child(3n+2):nth-last-child(1)::after{content:none;}
@media(min-width:901px){
  .cards.cards-3:has(> :last-child:nth-child(3n+1))::after{display:block;grid-column:span 2;}
  .cards.cards-3:has(> :last-child:nth-child(3n+2))::after{display:block;}
  .cards.cards-4:has(> :last-child:nth-child(4n+1))::after{display:block;grid-column:span 3;}
  .cards.cards-4:has(> :last-child:nth-child(4n+2))::after{display:block;grid-column:span 2;}
  .cards.cards-4:has(> :last-child:nth-child(4n+3))::after{display:block;}
}
@media(max-width:900px) and (min-width:641px){
  .cards.cards-3:has(> :last-child:nth-child(2n+1))::after,
  .cards.cards-4:has(> :last-child:nth-child(2n+1))::after{display:block;}
}

/* ═══════════════════════════════════════════════════════════════
   MOTION — subtle, purposeful, and fully opt-out via reduced-motion.
   Everything animates from a visible base state so the page is
   readable even if JS never runs.
   ═══════════════════════════════════════════════════════════════ */

/* scroll reveal: JS adds .io to <html> so no-JS users see content immediately */
.io [data-rise]{opacity:0;transform:translateY(14px);
  transition:opacity .55s cubic-bezier(.22,.61,.36,1),transform .55s cubic-bezier(.22,.61,.36,1);}
.io [data-rise].in{opacity:1;transform:none;}
.io [data-rise][data-d="1"]{transition-delay:.07s;}
.io [data-rise][data-d="2"]{transition-delay:.14s;}
.io [data-rise][data-d="3"]{transition-delay:.21s;}
.io [data-rise][data-d="4"]{transition-delay:.28s;}
.io [data-rise][data-d="5"]{transition-delay:.35s;}

/* register rows sweep in from the left edge as a group */
.io .reg-row{opacity:0;transform:translateX(-10px);
  transition:opacity .45s ease,transform .45s ease,background .15s;}
.io .register.in .reg-row{opacity:1;transform:none;}
.io .register.in .reg-row:nth-child(1){transition-delay:.04s;}
.io .register.in .reg-row:nth-child(2){transition-delay:.09s;}
.io .register.in .reg-row:nth-child(3){transition-delay:.14s;}
.io .register.in .reg-row:nth-child(4){transition-delay:.19s;}
.io .register.in .reg-row:nth-child(5){transition-delay:.24s;}
.io .register.in .reg-row:nth-child(6){transition-delay:.29s;}
.io .register.in .reg-row:nth-child(7){transition-delay:.34s;}
.io .register.in .reg-row:nth-child(8){transition-delay:.39s;}
.io .register.in .reg-row:nth-child(9){transition-delay:.44s;}

/* the red hero rule draws itself downward on load */
.hero-aside{position:relative;}
@media(min-width:1081px){
  .io .hero-aside{border-left-color:transparent;}
  .io .hero-aside::before{content:'';position:absolute;left:-2px;top:0;width:2px;height:0;
    background:var(--red);transition:height .8s cubic-bezier(.22,.61,.36,1) .15s;}
  .io .hero-aside.in::before{height:100%;}
}

/* stat counters: reserve width so the layout can't shift while counting */
.stats b{font-variant-numeric:tabular-nums;}

/* accordion content glides open */
.faq details > p{animation:faqIn .3s ease;}
@keyframes faqIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.faq summary{transition:color .15s;}

/* cards & posts lift with a real shadow rather than a glow */
.cards a,.post,.reg-row{will-change:transform;}
.cards a:hover{transform:translateY(-2px);}
.post:hover{transform:translateY(-2px);}
.cards a,.post{transition:background .15s,transform .25s cubic-bezier(.22,.61,.36,1),border-color .15s;}

/* buttons: press feedback */
.btn{transform:translateY(0);transition:background .15s,border-color .15s,color .15s,transform .12s;}
.btn:active{transform:translateY(1px);}

/* nav shadow appears only once the page is scrolled */
nav{transition:box-shadow .25s,background .25s;}
nav.stuck{box-shadow:0 1px 0 var(--line),0 6px 24px rgba(21,23,28,.06);}

/* icons in register rows nudge on hover */
.reg-row .reg-ico svg{transition:transform .25s cubic-bezier(.22,.61,.36,1);}
.reg-row:hover .reg-ico svg{transform:scale(1.12);}

/* skip link */
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--red);color:#fff;
  padding:12px 18px;border-radius:0 0 var(--r) 0;font-weight:600;text-decoration:none;}
.skip:focus{left:0;}

@media(prefers-reduced-motion:reduce){
  .io [data-rise],.io .reg-row{opacity:1 !important;transform:none !important;}
  .io .hero-aside{border-left-color:var(--red) !important;}
  .io .hero-aside::before{display:none !important;}
  .faq details > p{animation:none;}
  .cards a:hover,.post:hover,.btn:active{transform:none;}
}

/* ═══════════════════════════════════════════════════════════════
   INTERACTIVE TOOLS — site audit + domain checker
   ═══════════════════════════════════════════════════════════════ */
.tool{background:var(--card);border:1px solid var(--line-2);border-radius:var(--r-lg);
  padding:clamp(22px,3vw,34px);}
.tool-form{display:flex;gap:10px;flex-wrap:wrap;}
.tool-form .grow{flex:1 1 300px;min-width:0;}
.tool-form input{width:100%;font-family:var(--body);font-size:17px;color:var(--ink);
  background:var(--paper);border:1px solid var(--line-2);border-radius:var(--r);
  padding:14px 16px;transition:border-color .15s,box-shadow .15s;}
.tool-form input:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px var(--red-wash);}
.tool-form input::placeholder{color:var(--ink-3);}
.tool-form .btn{white-space:nowrap;}
.tool-hint{font-family:var(--mono);font-size:11.5px;letter-spacing:.03em;color:var(--ink-3);margin-top:12px;}
.tool-msg{margin-top:16px;font-size:15.5px;}
.tool-msg.bad{color:var(--red);}

/* spinner */
.spin{display:inline-block;width:15px;height:15px;border:2px solid rgba(255,255,255,.35);
  border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;}
@keyframes spin{to{transform:rotate(360deg)}}
.btn[disabled]{opacity:.75;cursor:progress;}

/* progress log while a scan runs */
.tool-log{margin-top:18px;font-family:var(--mono);font-size:12px;color:var(--ink-3);
  display:grid;gap:6px;}
.tool-log span{opacity:0;animation:logIn .3s ease forwards;}
@keyframes logIn{to{opacity:1}}

/* ── results ── */
.res{margin-top:30px;display:none;}
.res.show{display:block;animation:faqIn .35s ease;}
.res-head{display:grid;grid-template-columns:auto 1fr;gap:26px;align-items:center;
  padding-bottom:26px;border-bottom:1px solid var(--line);}
.score{--v:0;position:relative;width:104px;height:104px;border-radius:50%;flex-shrink:0;
  background:conic-gradient(var(--sc,var(--red)) calc(var(--v)*1%),var(--wash-2) 0);
  display:grid;place-items:center;transition:--v 1s ease;}
.score::after{content:'';position:absolute;inset:9px;background:var(--card);border-radius:50%;}
.score b{position:relative;z-index:1;font-family:var(--display);font-size:30px;font-weight:700;
  color:var(--ink);letter-spacing:-0.03em;line-height:1;}
.score small{position:relative;z-index:1;font-family:var(--mono);font-size:9px;
  letter-spacing:.14em;color:var(--ink-3);text-transform:uppercase;display:block;text-align:center;margin-top:2px;}
.res-sum h3{margin-bottom:6px;}
.res-sum p{font-size:15.5px;color:var(--ink-2);}
.res-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;}
.res-meta span{font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--ink-2);
  background:var(--wash);border:1px solid var(--line);border-radius:var(--r);padding:5px 9px;}

.finding{display:grid;grid-template-columns:88px 1fr;gap:20px;padding:20px 0;
  border-bottom:1px solid var(--line);align-items:start;}
.sev{font-family:var(--mono);font-size:9.5px;font-weight:500;letter-spacing:.13em;
  text-transform:uppercase;padding:5px 8px;border-radius:3px;text-align:center;line-height:1.3;}
.sev-critical{background:#FBE9E7;color:#8E1B12;border:1px solid #F3C9C4;}
.sev-high{background:#FDF0E6;color:#8A4A12;border:1px solid #F4D9BE;}
.sev-medium{background:#FBF6E3;color:#7A611A;border:1px solid #EDE3BD;}
.sev-low{background:#EEF1F5;color:#4C525F;border:1px solid #DDE2E9;}
.sev-pass{background:#E9F4EE;color:#1E6B41;border:1px solid #C7E4D3;}
.finding h4{font-family:var(--display);font-size:17px;font-weight:700;color:var(--ink);
  letter-spacing:-0.01em;margin-bottom:6px;}
.finding p{font-size:15.5px;color:var(--ink-2);line-height:1.6;}
.finding .area{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);display:block;margin-top:8px;}
.passlist{margin-top:24px;}
.passlist summary{cursor:pointer;font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);list-style:none;padding:12px 0;}
.passlist summary::-webkit-details-marker{display:none;}
.passlist summary::before{content:'+ ';color:var(--red);}
.passlist[open] summary::before{content:'– ';}
.passlist ul{list-style:none;display:grid;gap:9px;padding:6px 0 4px;}
.passlist li{position:relative;padding-left:24px;font-size:15px;color:var(--ink-2);}
.passlist li::before{content:'';position:absolute;left:2px;top:7px;width:9px;height:5px;
  border-left:1.5px solid #2E8B57;border-bottom:1.5px solid #2E8B57;transform:rotate(-45deg);}

/* ── domain checker ── */
.dom-primary{display:grid;grid-template-columns:auto 1fr auto;gap:22px;align-items:center;
  padding:24px;border-radius:var(--r-lg);border:1px solid var(--line-2);background:var(--paper);}
.dom-primary.free{border-color:#BEE0CC;background:#F2FAF5;}
.dom-primary.taken{border-color:#F0CFCB;background:#FDF5F4;}
.dom-primary .mark{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;}
.dom-primary.free .mark{background:#2E8B57;}
.dom-primary.taken .mark{background:var(--red);}
.dom-primary .mark svg{width:22px;height:22px;color:#fff;}
.dom-primary .name{font-family:var(--display);font-size:clamp(20px,2.4vw,27px);font-weight:700;
  color:var(--ink);letter-spacing:-0.02em;word-break:break-all;}
.dom-primary .state{font-size:15px;color:var(--ink-2);margin-top:3px;}
.dom-price{text-align:right;white-space:nowrap;}
.dom-price b{font-family:var(--display);font-size:24px;font-weight:700;color:var(--ink);
  display:block;letter-spacing:-0.02em;}
.dom-price small{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--ink-3);
  text-transform:uppercase;}
.alts{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;margin-top:22px;}
/* fill an incomplete final row so the grid hairline colour never shows through */
.alts::after{content:'';background:var(--card);grid-column:auto/-1;}
.alt{background:var(--card);padding:15px 18px;display:flex;justify-content:space-between;
  align-items:baseline;gap:14px;min-width:0;}
.alt > div{min-width:0;}
.alt .n{font-weight:600;color:var(--ink);font-size:15px;display:block;
  overflow-wrap:anywhere;word-break:normal;line-height:1.35;}
.alt .s{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  margin-top:3px;display:block;}
.alt .s.free{color:#2E8B57;}
.alt .s.taken{color:var(--red);}
.alt .s.unknown{color:var(--ink-3);}
.alt .p{font-family:var(--display);font-weight:700;color:var(--ink);font-size:15px;white-space:nowrap;}
.warn-chip{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;
  background:#FBF6E3;color:#7A611A;border:1px solid #EDE3BD;border-radius:3px;padding:2px 6px;
  white-space:nowrap;vertical-align:middle;}
td.num{font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:600;color:var(--ink);}
td.note{color:var(--ink-3);font-size:14.5px;}
tr.row-pop td{background:var(--red-wash);}
.disclaim{font-size:14px;color:var(--ink-3);margin-top:18px;line-height:1.6;}
.disclaim a{color:var(--red);}

@media(max-width:760px){
  .res-head{grid-template-columns:1fr;gap:18px;}
  .finding{grid-template-columns:1fr;gap:10px;}
  .sev{justify-self:start;}
  .dom-primary{grid-template-columns:auto 1fr;}
  .dom-price{grid-column:1/-1;text-align:left;}
  .alts{grid-template-columns:1fr;}
}

/* ═══════════════════════════════════════════════════════════════
   COLOUR LAYER
   Each service keeps one accent from the original Sofire palette, so
   colour carries meaning across the site instead of being decoration.
   ═══════════════════════════════════════════════════════════════ */
[data-c="red"]    { --c:var(--red);    --cw:var(--red-wash); }
[data-c="amber"]  { --c:var(--amber);  --cw:var(--amber-wash); }
[data-c="blue"]   { --c:var(--blue);   --cw:var(--blue-wash); }
[data-c="teal"]   { --c:var(--teal);   --cw:var(--teal-wash); }
[data-c="green"]  { --c:var(--green);  --cw:var(--green-wash); }
[data-c="purple"] { --c:var(--purple); --cw:var(--purple-wash); }
[data-c="pink"]   { --c:var(--pink);   --cw:var(--pink-wash); }

/* icon chips: tinted square behind each line icon */
.chip{
  width:46px;height:46px;border-radius:10px;flex-shrink:0;
  background:var(--cw,var(--red-wash));
  display:grid;place-items:center;
  transition:background .25s,transform .25s cubic-bezier(.22,.61,.36,1);
}
.chip svg{width:23px;height:23px;color:var(--c,var(--red));transition:color .25s;}
.cards a:hover .chip,.reg-row:hover .chip{transform:scale(1.08) rotate(-3deg);}
.cards svg.ico,.spec svg.ico{color:var(--c,var(--red));}

/* cards gain a coloured top edge that draws on hover */
.cards > *{position:relative;}
.cards > *::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--c,var(--red));transform:scaleX(0);transform-origin:left;
  transition:transform .3s cubic-bezier(.22,.61,.36,1);
}
.cards a:hover::before{transform:scaleX(1);}
.cards a:hover{background:var(--cw,var(--wash));}

/* register rows: coloured left edge */
.reg-row{position:relative;}
.reg-row::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--c,var(--red));transform:scaleY(0);transform-origin:top;
  transition:transform .28s cubic-bezier(.22,.61,.36,1);
}
.reg-row:hover::before{transform:scaleY(1);}
.reg-row:hover{background:var(--cw,rgba(255,255,255,.6));}
.reg-row:hover .reg-name strong{color:var(--c,var(--red));}
.reg-row:hover .reg-go svg{color:var(--c,var(--red));}
.reg-ico svg{color:var(--c,var(--red));}

/* spec rows pick up their accent too */
.spec{position:relative;}
.spec svg.ico{color:var(--c,var(--red));}

/* stat cells: each number in its own accent, with a tinted top rule */
.stats > div{position:relative;background:var(--cw,transparent);transition:background .3s;}
.stats > div::before{content:'';position:absolute;top:-1px;left:0;right:0;height:3px;
  background:var(--c,var(--red));opacity:0;transition:opacity .4s;}
.stats > div.lit::before{opacity:1;}
.stats b{color:var(--c,var(--ink));}
.band-dark .stats > div{background:transparent;}
.band-dark .stats b{color:#fff;}

/* eyebrow rules pick up colour */
.eyebrow-line::after{background:linear-gradient(90deg,var(--c,var(--red)),transparent);height:2px;opacity:.35;}

/* tinted section bands, alternating warm and cool */
.band-tint{background:var(--cw,var(--wash));border-block:1px solid var(--line);}
.band-blue{background:var(--blue-wash);border-block:1px solid #DBE6F6;}
.band-amber{background:var(--amber-wash);border-block:1px solid #F2E4CB;}
.band-teal{background:var(--teal-wash);border-block:1px solid #CFE7E5;}

/* area tags cycle through the palette */
.tags span:nth-child(6n+1){border-color:#EBC9C5;background:var(--red-wash);color:#8E2C22;}
.tags span:nth-child(6n+2){border-color:#DBE6F6;background:var(--blue-wash);color:#1A4E9B;}
.tags span:nth-child(6n+3){border-color:#F2E4CB;background:var(--amber-wash);color:#8A5200;}
.tags span:nth-child(6n+4){border-color:#CFE7E5;background:var(--teal-wash);color:#0C625F;}
.tags span:nth-child(6n+5){border-color:#CFE6D8;background:var(--green-wash);color:#186139;}
.tags span:nth-child(6n+6){border-color:#DFD4F5;background:var(--purple-wash);color:#57369E;}

/* posts get a coloured top rule each */
.post:nth-child(3n+1){--c:var(--red);}
.post:nth-child(3n+2){--c:var(--blue);}
.post:nth-child(3n+3){--c:var(--teal);}
.post{border-top-color:var(--c,var(--ink));}
.post:hover{border-top-color:var(--c);}
.post:hover h3{color:var(--c);}
.post .more{color:var(--c);}

/* plan columns */
.plan:nth-child(1){--c:var(--blue);}
.plan:nth-child(2){--c:var(--red);}
.plan:nth-child(3){--c:var(--purple);}
.plan li::before{border-color:var(--c,var(--red));}
.plan-price{color:var(--c,var(--ink));}
.plan.feature .plan-price{color:#FF8A7A;}

/* callout gets a subtle brand gradient rather than flat black */
.callout{
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(194,38,27,.28) 0%, transparent 55%),
    radial-gradient(100% 120% at 100% 100%, rgba(178,106,0,.20) 0%, transparent 55%),
    var(--ink-deep);
}
.callout-side a:hover{border-color:#5A6170;background:rgba(255,255,255,.04);}

/* severity chips already coloured; give the score ring the accent family */
.tool{border-top:3px solid var(--c,var(--red));}

/* ── Colour assignment without touching markup ──────────────────
   Cycling with nth-child keeps every grid, row list and stat strip
   on the palette automatically, and means no HTML restructuring. */
.cards > *:nth-child(6n+1),.specs > .spec:nth-child(6n+1),.register .reg-row:nth-child(6n+1),.stats > div:nth-child(4n+1){--c:var(--red);--cw:var(--red-wash);}
.cards > *:nth-child(6n+2),.specs > .spec:nth-child(6n+2),.register .reg-row:nth-child(6n+2),.stats > div:nth-child(4n+2){--c:var(--blue);--cw:var(--blue-wash);}
.cards > *:nth-child(6n+3),.specs > .spec:nth-child(6n+3),.register .reg-row:nth-child(6n+3),.stats > div:nth-child(4n+3){--c:var(--amber);--cw:var(--amber-wash);}
.cards > *:nth-child(6n+4),.specs > .spec:nth-child(6n+4),.register .reg-row:nth-child(6n+4),.stats > div:nth-child(4n+4){--c:var(--teal);--cw:var(--teal-wash);}
.cards > *:nth-child(6n+5),.specs > .spec:nth-child(6n+5),.register .reg-row:nth-child(6n+5){--c:var(--purple);--cw:var(--purple-wash);}
.cards > *:nth-child(6n+6),.specs > .spec:nth-child(6n+6),.register .reg-row:nth-child(6n+6){--c:var(--green);--cw:var(--green-wash);}

/* CSS-only icon chip: a tinted rounded box behind each line icon,
   so no wrapper element is needed in the markup. */
.cards svg.ico,
.specs .spec > svg.ico,
.reg-ico svg,
.contact-row > svg.ico{
  box-sizing:content-box;
  width:22px;height:22px;padding:11px;
  background:var(--cw,var(--red-wash));
  border-radius:11px;
  color:var(--c,var(--red));
  transition:background .25s,color .25s,transform .3s cubic-bezier(.22,.61,.36,1);
}
.cards svg.ico{margin-bottom:18px;}
.cards a:hover svg.ico,.reg-row:hover .reg-ico svg{
  transform:scale(1.09) rotate(-4deg);
  background:var(--c,var(--red));color:#fff;
}
.specs .spec{grid-template-columns:44px 200px 1fr;}
.spec > svg.ico{margin-top:-8px;}
@media(max-width:900px){
  .specs .spec{grid-template-columns:44px 1fr;}
  .contact-row{grid-template-columns:44px 1fr;}
}
.reg-row{grid-template-columns:44px minmax(200px,270px) minmax(0,1fr) 24px;column-gap:26px;}
@media(max-width:900px){ .reg-row{grid-template-columns:44px 1fr 20px;} }

/* the stat strip lights its accent bar as the number counts */
.stats > div{background:transparent;}
.stats > div.lit{background:var(--cw);}

/* ═══════════════════════════════════════════════════════════════
   MOTION, PART TWO — more visible, still restrained
   ═══════════════════════════════════════════════════════════════ */

/* stronger reveal: more travel, a touch of scale */
.io [data-rise]{transform:translateY(26px) scale(.995);}
.io [data-rise].in{transform:none;}

/* hero types itself in on load, no scroll needed */
@keyframes heroUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.hero .eyebrow{animation:heroUp .55s cubic-bezier(.22,.61,.36,1) both;}
.hero h1{animation:heroUp .65s cubic-bezier(.22,.61,.36,1) .08s both;}
.hero .lede{animation:heroUp .65s cubic-bezier(.22,.61,.36,1) .16s both;}
.hero .btns{animation:heroUp .65s cubic-bezier(.22,.61,.36,1) .24s both;}
.hero-aside dl > div{animation:heroUp .6s cubic-bezier(.22,.61,.36,1) both;}
.hero-aside dl > div:nth-child(1){animation-delay:.30s;}
.hero-aside dl > div:nth-child(2){animation-delay:.38s;}
.hero-aside dl > div:nth-child(3){animation-delay:.46s;}

/* a soft brand wash behind the hero so it isn't a flat white slab */
.hero{position:relative;overflow:hidden;}
.hero::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(60% 80% at 88% 0%, var(--red-wash) 0%, transparent 62%),
    radial-gradient(50% 70% at 8% 100%, var(--blue-wash) 0%, transparent 60%);
  opacity:0;animation:washIn 1.4s ease .1s forwards;
}
@keyframes washIn{to{opacity:1}}
.hero .wrap{position:relative;z-index:1;}

/* ── SERVICE TICKER — the moving strip from the original site ── */
.ticker{
  background:var(--ink-deep);padding:15px 0;
  border-block:1px solid #22252c;position:relative;
  overflow-x:hidden;overflow-y:visible;
  width:100%;max-width:100%;
  contain:paint;                 /* keeps the long track out of document scrollWidth */
}
.ticker::before,.ticker::after{
  content:'';position:absolute;top:0;bottom:0;width:90px;z-index:2;pointer-events:none;
}
.ticker::before{left:0;background:linear-gradient(90deg,var(--ink-deep),transparent);}
.ticker::after{right:0;background:linear-gradient(270deg,var(--ink-deep),transparent);}
.ticker-track{display:flex;width:max-content;animation:slide 42s linear infinite;}
.ticker:hover .ticker-track{animation-play-state:paused;}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ticker-item{
  display:inline-flex;align-items:center;gap:13px;padding:0 30px;white-space:nowrap;
  font-family:var(--mono);font-size:12.5px;letter-spacing:.13em;text-transform:uppercase;
  color:#C8CDD7;
}
.ticker-item svg{width:16px;height:16px;color:var(--tc,#FF6B5A);}
.ticker-item i{font-style:normal;color:#4A505C;}

/* nav links: colour-shifting underline */
.navlinks > a{position:relative;}
.navlinks > a::after{
  content:'';position:absolute;left:13px;right:13px;bottom:4px;height:2px;border-radius:2px;
  background:var(--red);transform:scaleX(0);transform-origin:right;
  transition:transform .28s cubic-bezier(.22,.61,.36,1);
}
.navlinks > a:hover::after{transform:scaleX(1);transform-origin:left;}
.navlinks > a[aria-current="page"]::after{transform:scaleX(1);}

/* buttons: a sheen that sweeps once on hover */
.btn-solid{position:relative;overflow:hidden;}
.btn-solid::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.28) 50%,transparent 65%);
  transform:translateX(-120%);transition:transform .55s ease;
}
.btn-solid:hover::after{transform:translateX(120%);}

/* FAQ chevrons rotate in the accent colour */
.faq details[open] summary{color:var(--red);}
.faq summary::after{transition:transform .28s cubic-bezier(.22,.61,.36,1),border-color .2s;}

/* the tool panels breathe while working */
.spin{border-top-color:#fff;}
.tool-log span{color:var(--ink-3);}

/* score ring animates its sweep */
@property --v{syntax:'<number>';inherits:true;initial-value:0;}
.score{transition:--v 1.1s cubic-bezier(.22,.61,.36,1);}

/* footer links slide their accent */
.foot-col a{position:relative;padding-left:0;transition:color .18s,padding-left .18s;}
.foot-col a:hover{padding-left:7px;color:#fff;}
.foot-col a::before{
  content:'';position:absolute;left:0;top:50%;width:4px;height:1px;background:#FF6B5A;
  opacity:0;transition:opacity .18s;
}
.foot-col a:hover::before{opacity:1;}

@media(prefers-reduced-motion:reduce){
  .hero .eyebrow,.hero h1,.hero .lede,.hero .btns,.hero-aside dl > div,.hero::before{animation:none;opacity:1;}
  .ticker-track{animation:none;}
  .btn-solid::after{display:none;}
  .cards a:hover svg.ico,.reg-row:hover .reg-ico svg{transform:none;}
}

/* ── narrow screens: let stat cells shrink and wrap ── */
@media(max-width:640px){
  .stats > div{padding:24px 12px;}
  .stats b{font-size:clamp(24px,7vw,32px);white-space:normal;}
  .stats span{letter-spacing:.08em;font-size:9.5px;}
}
@media(max-width:400px){
  .stats{grid-template-columns:minmax(0,1fr);}
  .stats > div{border-right:0 !important;border-bottom:1px solid var(--line);}
  .stats > div:last-child{border-bottom:0;}
}