/* ==========================================================================
   Articled — design system

   Editorial, not SaaS. The premise of the business is that people write the
   words, so the page should look like something made by people who care about
   words: ink on paper, a serif that has a point of view, hairline rules
   instead of drop shadows, and a grid that is allowed to be asymmetric.

   Deliberately avoided: gradient washes, floating cards with soft shadows,
   colour-coded icon chips, pill buttons, everything centred. Those are the
   defaults of every template, which is exactly why they read as anonymous.
   ========================================================================== */

/* ---------- tokens ---------- */
:root {
  /* ink & paper */
  --ink-900:     #16150F;   /* headlines */
  --ink-700:     #2E2C22;   /* body */
  --ink-500:     #55523F;   /* secondary */
  --ink-300:     #7C7862;   /* captions, meta */

  --paper:       #FBFAF6;   /* page */
  --paper-2:     #F4F2EA;   /* alternating bands */
  --paper-3:     #EDEADF;   /* pull-outs */

  --rule:        #DCD8C8;   /* hairlines */
  --rule-soft:   #E9E6DA;

  /* one accent, used sparingly — a masthead red */
  --accent:      #B03A22;
  --accent-600:  #8E2C18;
  --accent-100:  #F6E4DE;

  /* supporting hues, muted rather than candy */
  --sage:        #4F6B4A;
  --sage-100:    #E4EBE1;
  --indigo:      #33406B;
  --indigo-100:  #E2E5EF;
  --ochre:       #A97A1F;
  --ochre-100:   #F5EAD3;

  /* legacy aliases — older rules still reference these names */
  --navy:        var(--ink-900);
  --navy-soft:   var(--ink-700);
  --ink:         var(--ink-700);
  --muted:       var(--ink-500);
  --faint:       var(--ink-300);
  --blue:        var(--accent);
  --blue-600:    var(--accent-600);
  --blue-100:    var(--accent-100);
  --blue-50:     var(--paper-2);
  --purple:      var(--indigo);
  --purple-600:  var(--indigo);
  --purple-100:  var(--indigo-100);
  --green:       var(--sage);
  --green-600:   var(--sage);
  --green-100:   var(--sage-100);
  --yellow:      var(--ochre);
  --yellow-600:  var(--ochre);
  --yellow-100:  var(--ochre-100);
  --pink:        var(--accent);
  --pink-100:    var(--accent-100);
  --white:       #FFFFFF;
  --page:        var(--paper);
  --wash:        var(--paper-2);
  --wash-2:      var(--paper-3);
  --line:        var(--rule);
  --line-soft:   var(--rule-soft);

  /* type — a serif with character for display, a grotesque for chrome */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-serif:   "Newsreader", Georgia, "Times New Roman", serif;
  --font-ui:      "Inter Tight", "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font:         var(--font-serif);

  /* corners are nearly square — editorial, not app-like */
  --r-sm: 3px;
  --r:    4px;
  --r-lg: 5px;
  --r-xl: 6px;
  --r-pill: 999px;

  /* shadows are all but retired; rules do the separating */
  --shadow-xs: none;
  --shadow-sm: none;
  --shadow:    0 1px 0 var(--rule);
  --shadow-lg: 0 12px 34px rgba(22, 21, 15, .10);
  --shadow-blue: none;

  --container: 1200px;
  --measure: 68ch;
  --gap: 32px;

  --ease: cubic-bezier(.22, .84, .36, 1);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* `clip` rather than `hidden`: it contains the off-canvas mobile drawer
     without creating a scroll container, so the sticky header keeps working. */
  overflow-x: clip;
}
body {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 18px;
  line-height: 1.62;
  color: var(--ink-700);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  font-variant-numeric: oldstyle-nums;
}
@supports not (overflow: clip) {
  html, body { overflow-x: hidden; }
}
img { max-width: 100%; display: block; }
/* Icons sit inside sentences, buttons and labels far more often than they sit
   alone, so they default to inline. Flex and grid containers blockify their
   children anyway, so chips, buttons and cards are unaffected. */
svg { max-width: 100%; display: inline-block; vertical-align: middle; }

/* A row of short facts separated by dots — icons stay on the line. */
.meta-line {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px;
  font-size: .9rem; color: var(--muted); margin-top: 14px;
}
.meta-line span { display: inline-flex; align-items: center; gap: 7px; }
.meta-line svg { flex-shrink: 0; color: var(--green-600); }
a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-600); }
button { font: inherit; }
h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  color: var(--ink-900);
  line-height: 1.08;
  letter-spacing: -.012em;
  margin: 0 0 .46em;
  font-weight: 600;
  font-variation-settings: "SOFT" 0, "WONK" 1, "opsz" 40;
  text-wrap: balance;
}
h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); line-height: 1.02; letter-spacing: -.02em; }
h2 { font-size: clamp(1.75rem, 3.4vw, 2.7rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); line-height: 1.2; }
h4 { font-size: 1.08rem; line-height: 1.25; }
p  { margin: 0 0 1.15em; }
ul, ol { margin: 0 0 1.2em; padding-left: 1.25em; }
li { margin-bottom: .5em; }
strong { color: var(--navy); font-weight: 600; }
hr { border: 0; border-top: 1px solid var(--line); margin: 44px 0; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 6px; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.container-narrow { max-width: 820px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--navy); color: #fff; padding: 12px 20px; border-radius: 0 0 12px 0;
}
.skip-link:focus { left: 0; color: #fff; }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s, box-shadow .25s;
}
.site-header.is-stuck { border-bottom-color: var(--line); box-shadow: var(--shadow-xs); }
.header-inner {
  display: flex; align-items: center; gap: 18px;
  height: 78px;
}
.brand { display: flex; align-items: center; gap: 9px; flex-shrink: 0; }
.brand-mark { width: 30px; height: 30px; }
.brand-text {
  font-family: var(--font-display);
  font-weight: 700; font-size: 1.44rem; letter-spacing: -.035em;
  color: var(--blue); line-height: 1;
}
.brand-text .dot-org { color: var(--navy); font-weight: 600; font-size: .82em; }

.nav { display: flex; align-items: center; gap: 4px; margin-left: 22px; }
.nav-item { position: relative; }
.nav-link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 14px; border-radius: var(--r-sm);
  color: var(--navy-soft); font-weight: 500; font-size: .98rem;
  background: none; border: 0; cursor: pointer;
  transition: background .18s, color .18s;
}
.nav-link:hover, .nav-item.is-open > .nav-link { background: var(--blue-50); color: var(--blue); }
.nav-link .chev { width: 10px; height: 10px; transition: transform .25s var(--ease); }
.nav-item.is-open .chev { transform: rotate(180deg); }

.header-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }

/* dropdown + mega menu */
.dropdown {
  position: absolute; top: calc(100% + 10px); left: 0;
  min-width: 260px; background: #fff;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg); padding: 10px;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
}
.nav-item.is-open .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown a:not(.btn) {
  display: block; padding: 10px 14px; border-radius: var(--r-sm);
  color: var(--navy-soft); font-size: .95rem; font-weight: 500;
}
.dropdown a:not(.btn):hover { background: var(--blue-50); color: var(--blue); }

.mega {
  position: fixed; left: 50%; transform: translateX(-50%) translateY(-8px);
  top: 84px; width: min(1160px, calc(100vw - 40px));
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg); padding: 26px 28px 22px;
  opacity: 0; visibility: hidden;
  transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
  max-height: min(72vh, 640px); overflow-y: auto;
}
.nav-item.is-open .mega { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.mega-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px 22px; }
.mega-col h4 {
  font-size: .74rem; text-transform: uppercase; letter-spacing: .09em;
  color: var(--faint); margin: 12px 0 6px; font-weight: 600;
}
/* :not(.btn) matters — the footer of the mega panel holds real buttons, and a
   bare `.mega a` rule outranks `.btn-primary` on both colour and display. */
.mega a:not(.btn) {
  display: block; padding: 6px 10px; border-radius: 8px;
  font-size: .92rem; color: var(--navy-soft); font-weight: 500;
}
.mega a:not(.btn):hover { background: var(--blue-50); color: var(--blue); }
.mega-footer {
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line-soft);
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.mega-footer p { margin: 0; font-size: .92rem; color: var(--muted); }

/* mobile */
.nav-toggle {
  display: none; width: 44px; height: 44px; border-radius: 12px;
  border: 1px solid var(--line); background: #fff; cursor: pointer;
  align-items: center; justify-content: center;
}
.nav-toggle span {
  display: block; width: 18px; height: 2px; background: var(--navy); border-radius: 2px;
  position: relative; transition: transform .25s var(--ease), background .2s;
}
.nav-toggle span::before, .nav-toggle span::after {
  content: ""; position: absolute; left: 0; width: 18px; height: 2px;
  background: var(--navy); border-radius: 2px; transition: transform .25s var(--ease);
}
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after { top: 6px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 26px; border-radius: var(--r-pill);
  font-weight: 600; font-size: 1rem; font-family: var(--font-display);
  border: 1.5px solid transparent; cursor: pointer; text-align: center;
  transition: transform .18s var(--ease), box-shadow .22s var(--ease),
              background .18s, color .18s, border-color .18s;
  letter-spacing: -.01em; line-height: 1.2;
}
.btn .arrow { transition: transform .25s var(--ease); flex-shrink: 0; }
.btn:hover .arrow { transform: translateX(4px); }
.btn-primary { background: var(--blue); color: #fff; box-shadow: var(--shadow-blue); }
.btn-primary:hover { background: var(--blue-600); color: #fff; transform: translateY(-2px); box-shadow: 0 14px 32px rgba(27,109,255,.34); }
.btn-secondary { background: #fff; color: var(--blue); border-color: var(--blue-100); box-shadow: var(--shadow-sm); }
.btn-secondary:hover { color: var(--blue-600); border-color: var(--blue); transform: translateY(-2px); box-shadow: var(--shadow); }
.btn-ghost { background: transparent; color: var(--navy-soft); border-color: var(--line); }
.btn-ghost:hover { background: var(--wash); color: var(--navy); }
.btn-navy { background: var(--navy); color: #fff; }
.btn-navy:hover { background: #1a2a63; color: #fff; transform: translateY(-2px); }
.btn-sm { padding: 10px 18px; font-size: .93rem; }
.btn-lg { padding: 17px 34px; font-size: 1.08rem; }
.btn-block { width: 100%; }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none !important; }

/* ==========================================================================
   Generic section furniture
   ========================================================================== */
.section { padding: 76px 0; }
.section-sm { padding: 52px 0; }
.section-lg { padding: 100px 0; }
.section-wash { background: var(--wash); }
.section-wash-2 { background: linear-gradient(180deg, #fff 0%, var(--wash-2) 100%); }
.section-navy { background: var(--navy); color: #C9D3F2; }
.section-navy h2, .section-navy h3, .section-navy h4 { color: #fff; }
.section-navy strong { color: #fff; }
/* Prose defaults are tuned for light backgrounds — the lede colour in
   particular is near-invisible on navy. Re-tint everything for dark bands. */
.section-navy .prose,
.section-navy .prose p,
.section-navy .prose li,
.section-navy .prose > p:first-of-type { color: #C9D3F2; }
.section-navy .section-head p,
.section-navy .lede { color: #B9C6EC; }
.section-navy .prose a { color: #8FB4FF; border-bottom-color: rgba(143, 180, 255, .35); }
.section-navy .prose a:hover { color: #B6D0FF; border-bottom-color: #B6D0FF; }
.section-navy .checklist li::before {
  background-color: rgba(255, 255, 255, .12);
}

.section-head { max-width: 720px; margin: 0 auto 46px; text-align: center; }
.section-head.left { margin-left: 0; text-align: left; }
.section-head p { color: var(--muted); font-size: 1.08rem; margin-bottom: 0; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--blue); background: var(--blue-100);
  padding: 6px 12px; border-radius: var(--r-sm); margin-bottom: 18px;
}
.eyebrow.purple { color: var(--purple-600); background: var(--purple-100); }
.eyebrow.green  { color: var(--green-600);  background: var(--green-100); }
.eyebrow.yellow { color: var(--yellow-600); background: var(--yellow-100); }

/* hand-drawn underline under a highlighted word */
.underline-swoosh { position: relative; display: inline-block; white-space: nowrap; }
.underline-swoosh svg {
  position: absolute; left: 0; bottom: -.22em; width: 100%; height: .34em; overflow: visible;
}
.underline-swoosh path {
  stroke: var(--yellow); stroke-width: 7; fill: none; stroke-linecap: round;
  stroke-dasharray: 420; stroke-dashoffset: 420;
  animation: draw-swoosh 1.1s var(--ease) .45s forwards;
}
@keyframes draw-swoosh { to { stroke-dashoffset: 0; } }

.lede { font-size: 1.16rem; color: var(--muted); }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero { position: relative; padding: 62px 0 40px; overflow: hidden; }
.hero-bg {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(1100px 520px at 78% 12%, #EAF1FF 0%, rgba(234,241,255,0) 62%),
    radial-gradient(760px 420px at 6% 4%, #F0F4FF 0%, rgba(240,244,255,0) 60%);
}
.hero-blob { position: absolute; z-index: -1; opacity: .5; pointer-events: none; }
.hero-grid {
  display: grid; grid-template-columns: 1.02fr .98fr; gap: 46px; align-items: center;
}
.hero-copy h1 { margin-bottom: 18px; }
.hero-sub { font-size: 1.32rem; color: var(--muted); margin-bottom: 30px; font-weight: 400; }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.hero-note {
  margin-top: 26px; display: flex; align-items: center; gap: 10px;
  font-size: .93rem; color: var(--muted);
}
.hero-note svg { flex-shrink: 0; }

/* floating document cards */
.hero-art { position: relative; min-height: 430px; }
.doc-card {
  position: absolute; background: #fff; border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg); padding: 18px; border: 1px solid var(--line-soft);
  will-change: transform;
}
.doc-card .doc-head { display: flex; align-items: center; gap: 11px; margin-bottom: 12px; }
.doc-chip {
  width: 40px; height: 40px; border-radius: 13px; flex-shrink: 0;
  display: grid; place-items: center;
}
.doc-kicker {
  /* 12px floor — below that it stops being legible on a phone. */
  font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--faint);
}
.doc-card h3 { font-size: 1.02rem; line-height: 1.32; margin: 0; }
.doc-lines { display: grid; gap: 7px; margin-top: 12px; }
.doc-line { height: 8px; border-radius: 4px; background: var(--line); }

.doc-1 { top: 4px;   right: 0;    width: 300px; animation: float-a 7s ease-in-out infinite; }
.doc-2 { top: 196px; left: 0;     width: 268px; animation: float-b 8.5s ease-in-out infinite; }
.doc-3 { top: 268px; right: 8px;  width: 258px; animation: float-c 7.8s ease-in-out infinite; }

@keyframes float-a { 0%,100% { transform: translateY(0) rotate(1.4deg); } 50% { transform: translateY(-13px) rotate(1.4deg); } }
@keyframes float-b { 0%,100% { transform: translateY(0) rotate(-1.6deg); } 50% { transform: translateY(-10px) rotate(-1.6deg); } }
@keyframes float-c { 0%,100% { transform: translateY(0) rotate(1deg); } 50% { transform: translateY(-15px) rotate(1deg); } }

/* ---------- the pen ---------- */
@keyframes pen-write { to { stroke-dashoffset: 0; } }
@keyframes pen-travel {
  0%   { transform: translate(0, 0) rotate(0deg); }
  100% { transform: translate(var(--pen-x, 300px), var(--pen-y, 0)) rotate(0deg); }
}


.tree-card {
  padding: 30px 32px 34px;
  background: linear-gradient(150deg, #EFFBF6 0%, #F4F9FF 62%, #F7F4FF 100%);
  border-color: #CFEFE4;
  text-align: center;
}
.tree-card h3 { margin-bottom: 8px; }
.tree-card > p { max-width: 34ch; margin-left: auto; margin-right: auto; }
.tree-card .stats { grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 22px; }
.tree-card .stat { background: rgba(255, 255, 255, .78); border-color: #D9EFE7; padding: 18px 12px; }
.tree-card .stat b { font-size: clamp(1.6rem, 3vw, 2.1rem); color: var(--green-600); }




@keyframes tree-draw   { to { stroke-dashoffset: 0; } }
@keyframes tree-pop    { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes tree-drift  {
  0%   { opacity: 0; transform: translate(0, 0) rotate(0deg); }
  12%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-14px, 58px) rotate(150deg); }
}

/* ==========================================================================
   Cards
   ========================================================================== */
.grid { display: grid; gap: var(--gap); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 28px; box-shadow: var(--shadow-xs);
  transition: transform .26s var(--ease), box-shadow .26s var(--ease), border-color .26s;
}
.card-hover:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: var(--blue-100); }
.card h3 { margin-bottom: 10px; }
.card p { color: var(--muted); font-size: .97rem; margin-bottom: 0; }
.card-link {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 16px;
  font-weight: 600; font-size: .93rem;
}
.card-link .arrow { transition: transform .25s var(--ease); }
.card:hover .card-link .arrow { transform: translateX(4px); }

.chip {
  width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center;
  margin-bottom: 18px; transition: transform .3s var(--ease);
}
.card-hover:hover .chip { transform: rotate(-7deg) scale(1.06); }
.chip-blue   { background: var(--blue-100);   color: var(--blue); }
.chip-purple { background: var(--purple-100); color: var(--purple-600); }
.chip-green  { background: var(--green-100);  color: var(--green-600); }
.chip-yellow { background: var(--yellow-100); color: var(--yellow-600); }
.chip-pink   { background: var(--pink-100);   color: var(--pink); }

.accent-blue   .card-link { color: var(--blue); }
.accent-purple .card-link { color: var(--purple-600); }
.accent-green  .card-link { color: var(--green-600); }
.accent-yellow .card-link { color: var(--yellow-600); }

/* ==========================================================================
   Process steps
   ========================================================================== */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; align-items: stretch; }
.step {
  position: relative; background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 26px 22px; box-shadow: var(--shadow-xs);
}
.step-num {
  position: absolute; top: -13px; left: 22px;
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; font-size: .84rem; font-weight: 700;
  color: #fff; font-family: var(--font-display);
}
.step:nth-child(1) .step-num { background: var(--blue); }
.step:nth-child(2) .step-num { background: var(--green); }
.step:nth-child(3) .step-num { background: var(--purple); }
.step:nth-child(4) .step-num { background: var(--yellow-600); }
.step .chip { width: 46px; height: 46px; border-radius: 14px; margin: 8px 0 16px; }
.step h3 { font-size: 1.06rem; }
.step p { font-size: .93rem; color: var(--muted); margin: 0; }
.step-dots {
  display: grid; place-items: center; color: var(--faint); letter-spacing: 4px; font-size: 1.3rem;
}

/* ==========================================================================
   Trust band
   ========================================================================== */
.trust-band {
  background: linear-gradient(120deg, #F4F1FF 0%, #F2F6FF 100%);
  border: 1px solid #E7E4FB; border-radius: var(--r-xl);
  padding: 30px 34px; display: grid; grid-template-columns: 1.15fr 1fr;
  gap: 34px; align-items: center;
}
.quote-mark {
  width: 54px; height: 54px; border-radius: 50%; background: #fff;
  display: grid; place-items: center; color: var(--purple); flex-shrink: 0;
  box-shadow: var(--shadow-xs);
}
.trust-quote { display: flex; gap: 20px; align-items: flex-start; }
.trust-quote p { font-size: 1.08rem; color: var(--navy); font-weight: 500; margin-bottom: 10px; line-height: 1.55; }
.trust-quote cite { font-style: normal; font-size: .92rem; color: var(--muted); }
.trust-quote cite b { color: var(--purple-600); font-weight: 600; }
.trust-logos { border-left: 1px solid #E1DCF8; padding-left: 30px; }
.trust-logos > span { display: block; font-size: .86rem; color: var(--muted); margin-bottom: 14px; }
.logo-row { display: flex; flex-wrap: wrap; gap: 18px 26px; align-items: center; }
/* Client marks are tinted to a single ink so a mixed set still reads as one
   row. Colour returns on hover. */
.client-logo {
  display: inline-flex; align-items: center;
  color: var(--navy-soft); opacity: .62;
  transition: opacity .2s var(--ease), color .2s var(--ease);
}
.client-logo svg { height: 26px; width: auto; display: block; }
.client-logo:hover { opacity: 1; color: var(--blue); }
.logo-word {
  font-family: var(--font-display); font-weight: 700; font-size: 1.06rem;
  color: var(--navy-soft); letter-spacing: -.03em; opacity: .82;
}

/* ==========================================================================
   Stats
   ========================================================================== */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.stat {
  text-align: center; padding: 26px 18px; background: #fff;
  border: 1px solid var(--line); border-radius: var(--r-lg);
}
.stat b {
  display: block; font-family: var(--font-display); font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  color: var(--navy); font-weight: 700; letter-spacing: -.035em; line-height: 1.1;
}
.stat span { font-size: .89rem; color: var(--muted); }
.section-navy .stat { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); }
.section-navy .stat b { color: #fff; }
.section-navy .stat span { color: #A8B5E0; }

/* ==========================================================================
   Split feature rows
   ========================================================================== */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.split.reverse .split-media { order: -1; }
.split-media img, .split-media svg { border-radius: var(--r-xl); }

.checklist { list-style: none; padding: 0; margin: 0; }
.checklist li {
  position: relative; padding-left: 34px; margin-bottom: 13px; color: var(--ink);
}
.checklist li::before {
  content: ""; position: absolute; left: 0; top: 5px;
  width: 21px; height: 21px; border-radius: 50%;
  background: var(--green-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314A582' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/12px no-repeat;
}
.crosslist { list-style: none; padding: 0; margin: 0; }
.crosslist li { position: relative; padding-left: 34px; margin-bottom: 13px; }
.crosslist li::before {
  content: ""; position: absolute; left: 0; top: 5px;
  width: 21px; height: 21px; border-radius: 50%;
  background: #FFE7E7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E05252' stroke-width='3.4' stroke-linecap='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E") center/11px no-repeat;
}

/* ==========================================================================
   Detector badges
   ========================================================================== */
/* minmax(0, 1fr), not 1fr: a plain 1fr track refuses to shrink below its
   content, and the longer detector names ("Writer.com AI Detector") then push
   the whole grid wider than the container. */
.detector-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.detector {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  transition: transform .22s var(--ease), border-color .22s, box-shadow .22s;
}
.detector:hover { transform: translateY(-3px); border-color: var(--green); box-shadow: var(--shadow-sm); }
.detector-logo { width: 34px; height: 34px; flex-shrink: 0; border-radius: 9px; }
/* Supplied vendor artwork sits on a tile and is contained rather than cropped,
   so logos of different aspect ratios still line up. */
.detector-logo.is-file {
  background: #fff; border: 1px solid var(--line-soft);
  object-fit: contain; padding: 5px;
}
.detector-body { min-width: 0; flex: 1; }
.detector-tick {
  width: 22px; height: 22px; border-radius: 50%; background: var(--green-100);
  display: grid; place-items: center; flex-shrink: 0; color: var(--green-600);
}
.detector b {
  display: block; font-size: .92rem; color: var(--navy); font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.detector-body > span { font-size: .76rem; color: var(--faint); }

/* ==========================================================================
   Pricing
   ========================================================================== */
.price-hero {
  background: linear-gradient(135deg, #F3F7FF 0%, #EFF1FF 100%);
  border: 1px solid var(--line); border-radius: var(--r-xl); padding: 38px;
}
.price-big {
  font-family: var(--font-display); font-weight: 700; color: var(--navy);
  font-size: clamp(2.6rem, 6vw, 4rem); letter-spacing: -.04em; line-height: 1;
}
.price-big small { font-size: .3em; font-weight: 600; color: var(--muted); letter-spacing: -.01em; }

.calc { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; align-items: start; }
.calc-panel {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl);
  padding: 30px; box-shadow: var(--shadow);
}
.calc-out {
  background: var(--navy); color: #C9D3F2; border-radius: var(--r-xl);
  padding: 30px; position: relative; overflow: hidden;
}
.calc-out::after {
  content: ""; position: absolute; right: -60px; bottom: -70px;
  width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle, rgba(27,109,255,.4) 0%, rgba(27,109,255,0) 70%);
}
.calc-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 12px 0; border-bottom: 1px dashed rgba(255,255,255,.14); font-size: .96rem;
}
.calc-row:last-of-type { border-bottom: 0; }
.calc-row span { color: #A8B5E0; }
.calc-row b { color: #fff; font-weight: 600; font-family: var(--font-display); }
.calc-total {
  margin-top: 14px; padding-top: 18px; border-top: 2px solid rgba(255,255,255,.2);
  display: flex; justify-content: space-between; align-items: baseline;
}
.calc-total span { color: #fff; font-weight: 600; font-size: 1.02rem; }
.calc-total b { color: #fff; font-family: var(--font-display); font-size: 2rem; letter-spacing: -.03em; }
.calc-split {
  margin-top: 20px; background: rgba(255,255,255,.06); border-radius: var(--r);
  padding: 16px 18px; font-size: .88rem; line-height: 1.62;
}
.calc-split b { color: #fff; }
.split-bar { display: flex; height: 10px; border-radius: 5px; overflow: hidden; margin: 12px 0 10px; }
.split-bar i { display: block; height: 100%; }
.split-bar .to-writer { background: var(--green); }
.split-bar .to-trees  { background: var(--yellow); }
.split-bar .to-ops    { background: var(--blue); }
.split-key { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: .82rem; }
.split-key i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; margin-right: 6px; }

/* range slider */
.range-wrap { margin-bottom: 22px; }
.range-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.range-head label { font-weight: 600; color: var(--navy); font-size: .95rem; }
.range-head output {
  font-family: var(--font-display); font-weight: 700; color: var(--blue); font-size: 1.16rem;
}
input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 8px;
  border-radius: 5px; background: var(--blue-100); outline: none;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%;
  background: #fff; border: 3px solid var(--blue); cursor: pointer;
  box-shadow: var(--shadow-sm); transition: transform .18s;
}
input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.14); }
input[type="range"]::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%; background: #fff;
  border: 3px solid var(--blue); cursor: pointer;
}

.price-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.price-table th, .price-table td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--line); }
.price-table th { font-family: var(--font-display); color: var(--navy); font-weight: 600; font-size: .87rem; }
.price-table td b { color: var(--navy); }
.price-table tbody tr:hover { background: var(--blue-50); }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; }

/* ==========================================================================
   Forms
   ========================================================================== */
.form-grid { display: grid; gap: 18px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field label { font-weight: 600; color: var(--navy); font-size: .93rem; }
.field .hint { font-size: .82rem; color: var(--faint); font-weight: 400; }
.field input, .field select, .field textarea {
  width: 100%; padding: 13px 15px; border: 1.5px solid var(--line);
  border-radius: var(--r-sm); font: inherit; font-size: .97rem; color: var(--navy);
  background: #fff; transition: border-color .18s, box-shadow .18s;
}
.field textarea { min-height: 130px; resize: vertical; line-height: 1.6; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px var(--blue-100);
}
.field input:invalid:not(:placeholder-shown) { border-color: #E88; }
.field-error { color: #D14343; font-size: .84rem; display: none; }
.field.has-error .field-error { display: block; }
.field.has-error input, .field.has-error textarea, .field.has-error select { border-color: #D14343; }

.checkbox { display: flex; gap: 11px; align-items: flex-start; font-size: .93rem; color: var(--ink); }
.checkbox input { width: 19px; height: 19px; margin-top: 3px; flex-shrink: 0; accent-color: var(--blue); }

.form-note {
  background: var(--blue-50); border: 1px solid var(--blue-100);
  border-radius: var(--r); padding: 15px 18px; font-size: .9rem; color: var(--navy-soft);
}
.form-status { padding: 15px 18px; border-radius: var(--r); font-size: .95rem; display: none; }
.form-status.ok  { display: block; background: var(--green-100); color: #0B6B54; border: 1px solid #A7E8D6; }
.form-status.err { display: block; background: #FFE9E9; color: #A32B2B; border: 1px solid #F5C2C2; }

.choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 11px; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; }
.choice span {
  display: block; padding: 13px 15px; border: 1.5px solid var(--line); border-radius: var(--r-sm);
  text-align: center; font-size: .92rem; font-weight: 500; cursor: pointer;
  color: var(--navy-soft); transition: all .18s;
}
.choice input:checked + span {
  border-color: var(--blue); background: var(--blue-50); color: var(--blue); font-weight: 600;
}
.choice input:focus-visible + span { outline: 3px solid var(--blue); outline-offset: 2px; }

/* ==========================================================================
   FAQ accordion
   ========================================================================== */
.faq {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; background: #fff;
  margin: 24px 0 34px;
}
/* Anything following the accordion needs breathing room, or it butts against
   the card edge. */
.faq + p, .faq + ul, .faq + ol, .faq + h2, .faq + h3 { margin-top: 0; }
.prose .faq + h2 { margin-top: 44px; }
.faq-item + .faq-item { border-top: 1px solid var(--line); }
.faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 20px 24px; background: none; border: 0; cursor: pointer; text-align: left;
  font-family: var(--font-display); font-weight: 600; font-size: 1.03rem; color: var(--navy);
  transition: background .18s;
}
.faq-q:hover { background: var(--blue-50); }
.faq-icon {
  width: 26px; height: 26px; border-radius: 50%; background: var(--blue-100); color: var(--blue);
  display: grid; place-items: center; flex-shrink: 0; transition: transform .28s var(--ease), background .2s;
}
.faq-item.is-open .faq-icon { transform: rotate(45deg); background: var(--blue); color: #fff; }
.faq-a {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .3s var(--ease);
}
.faq-item.is-open .faq-a { grid-template-rows: 1fr; }
.faq-a-inner { overflow: hidden; }
.faq-a-inner > div { padding: 0 24px 22px; color: var(--muted); font-size: .98rem; }
.faq-a-inner p:last-child { margin-bottom: 0; }

/* ==========================================================================
   Reviews
   ========================================================================== */
/* A real grid, not CSS multi-column. Masonry columns cannot hold flex cards
   (which is what pins the meta strip to the bottom), and they let a tall card
   spill across the column boundary. Equal-height rows are also simply tidier
   for a wall of reviews. */
.review-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 22px; align-items: stretch;
}
.review-grid.is-row { grid-template-columns: repeat(3, 1fr); }

.review {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 22px; margin-bottom: 0;
  box-shadow: var(--shadow-xs); transition: transform .24s var(--ease), box-shadow .24s;
  display: flex; flex-direction: column; height: 100%;
}
.review:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.review-top { display: flex; align-items: center; gap: 12px; margin-bottom: 13px; }
.avatar {
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: .95rem; color: #fff; flex-shrink: 0;
}
.review-who b { display: block; font-size: .94rem; color: var(--navy); font-weight: 600; line-height: 1.3; }
.review-who span { font-size: .8rem; color: var(--faint); }
.stars { display: flex; gap: 2px; margin-bottom: 10px; color: var(--yellow); }
.review p { font-size: .95rem; color: var(--ink); margin-bottom: 12px; line-height: 1.62; }
.review-meta {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  font-size: .77rem; color: var(--faint);
  border-top: 1px solid var(--line-soft); padding-top: 11px;
  margin-top: auto;               /* pin to the bottom of an equal-height card */
}
.review-meta .review-date { margin-left: auto; white-space: nowrap; }
.review-tag {
  background: var(--blue-50); color: var(--blue); padding: 3px 8px; border-radius: 6px;
  font-weight: 500;
}
.verified-pill {
  display: inline-flex; align-items: center; gap: 5px; color: var(--green-600);
  background: var(--green-100); padding: 3px 8px; border-radius: 6px; font-weight: 600;
}

.rating-summary {
  display: grid; grid-template-columns: auto 1fr; gap: 34px; align-items: center;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl); padding: 30px 34px;
}
.rating-score { text-align: center; }
.rating-score b {
  display: block; font-family: var(--font-display); font-size: 3.6rem; font-weight: 700;
  color: var(--navy); line-height: 1; letter-spacing: -.04em;
}
.rating-score .stars { justify-content: center; margin: 10px 0 6px; }
.rating-score span { font-size: .87rem; color: var(--muted); }
.rating-bars { display: grid; gap: 8px; }
.rating-bar { display: grid; grid-template-columns: 52px 1fr 46px; gap: 12px; align-items: center; font-size: .85rem; color: var(--muted); }
.rating-bar .track { height: 9px; background: var(--line); border-radius: 5px; overflow: hidden; }
.rating-bar .fill { height: 100%; background: var(--yellow); border-radius: 5px; width: 0; transition: width 1.1s var(--ease); }

/* ==========================================================================
   Basket
   ========================================================================== */
.basket-link { position: relative; padding-left: 14px; padding-right: 14px; }
.basket-link.has-items { border-color: var(--blue); color: var(--blue); }
.basket-badge {
  position: absolute; top: -6px; right: -6px; min-width: 19px; height: 19px;
  padding: 0 5px; border-radius: 10px; background: var(--blue); color: #fff;
  font-size: .75rem; font-weight: 700; display: grid; place-items: center;
  box-shadow: 0 0 0 2px #fff; line-height: 1;
}

.basket-lines { display: grid; gap: 18px; }
.basket-line {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 22px; position: relative;
}
.basket-line-head {
  display: grid; grid-template-columns: auto 1fr 130px auto;
  gap: 14px; align-items: end; margin-bottom: 16px;
}
.basket-index {
  width: 30px; height: 30px; border-radius: 50%; background: var(--blue-100);
  color: var(--blue); display: grid; place-items: center;
  font-weight: 700; font-size: .86rem; margin-bottom: 6px;
}
.basket-remove {
  width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--line);
  background: #fff; color: var(--muted); font-size: 1.3rem; line-height: 1;
  cursor: pointer; transition: all .16s; margin-bottom: 4px;
}
.basket-remove:hover { border-color: #E8A0A0; color: #C34343; background: #FFF5F5; }
.basket-line-foot {
  display: grid; grid-template-columns: 1fr 1fr auto;
  gap: 14px; align-items: end; margin-top: 14px;
  padding-top: 16px; border-top: 1px dashed var(--line);
}
.basket-line-price { margin: 0; text-align: right; font-size: .88rem; color: var(--muted); }
.basket-line-price b { display: block; font-size: 1.16rem; color: var(--navy); font-family: var(--font-display); }

.bulk-add {
  margin-top: 22px; border: 1px solid var(--line); border-radius: var(--r);
  padding: 16px 18px; background: var(--wash);
}
.bulk-add summary {
  cursor: pointer; font-weight: 600; color: var(--navy); font-size: .94rem;
  display: flex; align-items: center; gap: 8px;
}
.bulk-add p { font-size: .88rem; color: var(--muted); margin: 12px 0 10px; }
.bulk-add textarea {
  width: 100%; padding: 12px 14px; border: 1.5px solid var(--line);
  border-radius: var(--r-sm); font: inherit; font-size: .92rem; margin-bottom: 10px;
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
}

/* The whole rail sticks as one block, so the summary and the links below it
   move together instead of the links sliding under a sticky card. */
.basket-aside { display: grid; gap: 24px; position: sticky; top: 100px; }
.basket-summary {
  background: var(--navy); color: #C9D3F2; border-radius: var(--r-xl);
  padding: 26px;
}
.basket-summary h3 { color: #fff; font-size: 1.1rem; margin-bottom: 16px; }
.basket-summary .calc-split { margin-top: 18px; }
.basket-summary .calc-split p { font-size: .88rem; line-height: 1.6; }
@media (max-width: 960px) { .basket-aside { position: static; } }

@media (max-width: 640px) {
  .basket-line-head { grid-template-columns: auto 1fr auto; }
  .basket-line-head .basket-words { grid-column: 2 / 3; }
  .basket-line-foot { grid-template-columns: 1fr; }
  .basket-line-price { text-align: left; }
  .basket-summary { position: static; }
}

/* ==========================================================================
   Sample library
   ========================================================================== */
.sample-request {
  display: grid; grid-template-columns: 1.25fr 1fr; gap: 40px; align-items: start;
  background: linear-gradient(150deg, #F7F5FF 0%, #F4F8FF 100%);
  border: 1px solid #E4E0FB; border-radius: var(--r-xl); padding: 40px;
}
.sample-request h2 { margin-bottom: 14px; }
.sample-request-aside { display: grid; gap: 20px; }
@media (max-width: 960px) {
  .sample-request { grid-template-columns: 1fr; gap: 28px; padding: 28px; }
}

.sample-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.sample {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl);
  padding: 28px; box-shadow: var(--shadow-xs);
  display: flex; flex-direction: column;
  transition: transform .24s var(--ease), box-shadow .24s var(--ease), border-color .24s;
}
.sample:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--blue-100); }
.sample-head { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 18px; }
.sample-head .chip { margin: 0; flex-shrink: 0; }
.sample-head h3 { font-size: 1.12rem; margin: 0 0 4px; }
.sample-meta { font-size: .82rem; color: var(--faint); margin: 0; }
.sample-brief {
  font-size: .9rem; color: var(--muted); margin: 0 0 18px;
  padding-bottom: 16px; border-bottom: 1px dashed var(--line);
}
.sample-extract {
  margin: 0 0 18px; padding: 20px 22px;
  background: var(--wash); border-radius: var(--r);
  border-left: 3px solid var(--blue);
  font-size: .96rem; line-height: 1.66; color: var(--ink);
}
.sample-extract p { margin: 0 0 .9em; }
.sample-extract p:last-child { margin-bottom: 0; }
.sample-extract p:first-child { color: var(--navy); font-weight: 500; }
.sample-price {
  margin: auto 0 0; padding-top: 14px; border-top: 1px solid var(--line-soft);
  font-size: .84rem; color: var(--muted);
}
.sample-price strong { color: var(--navy); }

@media (max-width: 960px) { .sample-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .sample { padding: 22px; } .sample-extract { padding: 16px 18px; } }

/* ==========================================================================
   Breadcrumbs, pagination, tags
   ========================================================================== */
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: .86rem; color: var(--faint); padding: 22px 0 0; }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--blue); }
.crumbs .sep { color: var(--faint); }

.tag-cloud { display: flex; flex-wrap: wrap; gap: 9px; }
.tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: var(--r-sm); background: #fff;
  border: 1px solid var(--line); font-size: .89rem; color: var(--navy-soft); font-weight: 500;
  transition: all .18s;
}
.tag:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-50); transform: translateY(-2px); }

.pager { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 40px; }
.pager a, .pager span {
  min-width: 42px; height: 42px; padding: 0 12px; border-radius: var(--r-sm);
  display: grid; place-items: center; border: 1px solid var(--line);
  font-size: .93rem; font-weight: 500; color: var(--navy-soft); background: #fff;
}
.pager a:hover { border-color: var(--blue); color: var(--blue); }
.pager .current { background: var(--blue); border-color: var(--blue); color: #fff; font-weight: 600; }

/* ==========================================================================
   Article / prose body
   ========================================================================== */
.prose { font-size: 1.04rem; }
.prose h2 { margin-top: 52px; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 34px; }
.prose > p:first-of-type { font-size: 1.12rem; color: var(--navy-soft); }
.prose a { font-weight: 500; border-bottom: 1.5px solid var(--blue-100); }
.prose a:hover { border-bottom-color: var(--blue); }
.prose ul li::marker { color: var(--blue); }

/* Closing note after the FAQ — set apart with a rule rather than left to
   collide with the accordion card above it. */
.prose-closing {
  margin-top: 10px; padding-top: 26px;
  border-top: 1px solid var(--line-soft);
  color: var(--muted);
}
.prose-closing p:last-child { margin-bottom: 0; }

.callout {
  border-radius: var(--r-lg); padding: 22px 26px; margin: 30px 0;
  border: 1px solid var(--line); background: var(--wash);
}
.callout h4 { margin-bottom: 8px; display: flex; align-items: center; gap: 9px; }
.callout p:last-child { margin-bottom: 0; }
.callout.blue   { background: var(--blue-50);   border-color: var(--blue-100); }
.callout.green  { background: var(--green-100); border-color: #A7E8D6; }
.callout.yellow { background: var(--yellow-100); border-color: #FCE0A0; }
.callout.purple { background: var(--purple-100); border-color: #DCD4FD; }

.toc {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 22px 24px; position: sticky; top: 100px;
}
.toc h4 {
  font-size: .74rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--faint); margin-bottom: 10px; font-weight: 600;
}
.toc ul { list-style: none; padding: 0; margin: 0; }
.toc li { margin-bottom: 2px; }
.toc a {
  display: block;
  padding: 9px 12px; border-radius: 8px; font-size: .89rem; line-height: 1.45;
  color: var(--navy-soft); border-left: 2px solid transparent; font-weight: 500;
  transition: background .16s, color .16s, border-color .16s;
}
/* The clamp lives on an inner span, not on the padded link. Clamping a padded
   box clips at the padding edge, which lets a sliver of the next line show
   through under the padding. The full heading stays in the DOM for screen
   readers and in the title attribute. */
.toc-label {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.toc a:hover { background: var(--blue-50); color: var(--blue); }
.toc a.is-active { color: var(--blue); border-left-color: var(--blue); background: var(--blue-50); }

.layout-aside { display: grid; grid-template-columns: 1fr 288px; gap: 56px; align-items: start; }
.layout-aside.left { grid-template-columns: 268px 1fr; }

.related-links { display: grid; gap: 10px; }
.related-links a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 16px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: #fff; color: var(--navy-soft); font-size: .93rem; font-weight: 500;
  transition: all .18s;
}
.related-links a:hover { border-color: var(--blue); color: var(--blue); transform: translateX(3px); }

/* ==========================================================================
   CTA band
   ========================================================================== */
.cta-band {
  background: linear-gradient(135deg, var(--navy) 0%, #1B2E7A 60%, #23409C 100%);
  border-radius: var(--r-xl); padding: 54px 48px; text-align: center;
  position: relative; overflow: hidden;
}
.cta-band::before, .cta-band::after {
  content: ""; position: absolute; border-radius: 50%; pointer-events: none;
}
.cta-band::before { width: 320px; height: 320px; top: -140px; left: -90px; background: radial-gradient(circle, rgba(139,124,246,.36) 0%, transparent 70%); }
.cta-band::after  { width: 380px; height: 380px; bottom: -190px; right: -110px; background: radial-gradient(circle, rgba(34,194,155,.3) 0%, transparent 70%); }
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 { color: #fff; margin-bottom: 12px; }
.cta-band p { color: #B9C6EC; max-width: 560px; margin: 0 auto 26px; }
.cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.cta-band .btn-secondary { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.28); box-shadow: none; }
.cta-band .btn-secondary:hover { background: rgba(255,255,255,.18); color: #fff; border-color: rgba(255,255,255,.5); }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: var(--navy); color: #A8B5E0; padding: 66px 0 0; margin-top: 90px; }
.footer-top {
  display: grid; grid-template-columns: 1.7fr repeat(5, minmax(0, 1fr));
  gap: 30px 26px; padding-bottom: 46px; align-items: start;
}
.footer-brand .brand-text { color: #fff; }
.footer-brand .brand-text .dot-org { color: #8FA5E8; }
.footer-brand p { font-size: .92rem; color: #A8B5E0; margin: 16px 0 20px; max-width: 320px; }
/* Headings reserve two lines so every column's first link starts on the same
   baseline, however long the heading is. */
.footer-col h4 {
  color: #fff; font-size: .78rem; text-transform: uppercase; letter-spacing: .09em;
  margin: 0 0 14px; min-height: 2.6em; line-height: 1.3; font-weight: 600;
  display: flex; align-items: flex-start;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin-bottom: 9px; }
.footer-col a { color: #A8B5E0; font-size: .89rem; line-height: 1.4; display: inline-block; }
.footer-col a:hover { color: #fff; }
.footer-badges { display: flex; gap: 8px; flex-wrap: wrap; }
.footer-badge {
  display: inline-flex; align-items: center; gap: 6px; font-size: .76rem; font-weight: 600;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14);
  padding: 6px 11px; border-radius: var(--r-sm); color: #D6DEF6; white-space: nowrap;
}
.footer-badge svg { flex-shrink: 0; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.11); padding: 24px 0 30px;
  display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  font-size: .85rem; color: #8494C4;
}
.footer-bottom a { color: #8494C4; }
.footer-bottom a:hover { color: #fff; }

/* ==========================================================================
   Animation utilities
   ========================================================================== */
/* Reveal-on-scroll is progressive enhancement only. Content is visible by
   default; it is hidden ONLY once the script has confirmed it can animate it
   back in (html.js-reveal). If the script never runs, never loads, or the
   observer never fires, the page still reads normally. */
.reveal { opacity: 1; transform: none; }
.js-reveal .reveal {
  opacity: 0; transform: translateY(22px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.js-reveal .reveal.is-in { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: .08s; }
.reveal-d2 { transition-delay: .16s; }
.reveal-d3 { transition-delay: .24s; }
.reveal-d4 { transition-delay: .32s; }

.count-up { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  .js-reveal .reveal { opacity: 1 !important; transform: none !important; }
  .doc-card { animation: none !important; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1080px) {
  .footer-top { grid-template-columns: 1fr 1fr 1fr; }
  .mega-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; gap: 34px; }
  .hero-art { min-height: 360px; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: 1fr 1fr; gap: 24px; }
  .step-dots { display: none; }
  .split { grid-template-columns: 1fr; gap: 34px; }
  .split.reverse .split-media { order: 0; }
  .layout-aside, .layout-aside.left { grid-template-columns: 1fr; gap: 34px; }
  .toc { position: static; }
  .trust-band { grid-template-columns: 1fr; }
  .trust-logos { border-left: 0; padding-left: 0; border-top: 1px solid #E1DCF8; padding-top: 22px; }
  .calc { grid-template-columns: 1fr; }
  .detector-grid { grid-template-columns: repeat(2, 1fr); }
  .review-grid, .review-grid.is-row { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .sample-grid { grid-template-columns: 1fr; }

  .nav-toggle { display: flex; margin-left: auto; }
  .header-actions .btn-ghost { display: none; }
  .nav {
    position: fixed; inset: 78px 0 0; background: #fff; flex-direction: column;
    align-items: stretch; gap: 0; margin: 0; padding: 18px 24px 40px;
    overflow-y: auto; transform: translateX(100%);
    border-top: 1px solid var(--line);
    /* Hidden from assistive tech and from tab order while closed, not merely
       parked off-screen. Visibility flips instantly on open and waits for the
       slide-out to finish on close. */
    visibility: hidden;
    transition: transform .3s var(--ease), visibility 0s linear .3s;
  }
  .nav.is-open {
    transform: none;
    visibility: visible;
    transition: transform .3s var(--ease), visibility 0s linear 0s;
  }
  .nav-link { width: 100%; justify-content: space-between; padding: 15px 4px; font-size: 1.05rem; }
  .dropdown, .mega {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: 0; border-left: 2px solid var(--line); border-radius: 0;
    padding: 0 0 8px 14px; margin: 0 0 8px; width: auto; max-height: 0; overflow: hidden;
    transition: max-height .3s var(--ease);
  }
  .nav-item.is-open .dropdown, .nav-item.is-open .mega { max-height: 1400px; transform: none; overflow-y: auto; }
  .mega-grid { grid-template-columns: 1fr; }
  .mega-footer { display: none; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .section { padding: 54px 0; }
  .section-lg { padding: 66px 0; }
  .grid-3, .grid-4, .grid-2 { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .review-grid { columns: 1; }
  .review-grid.is-row { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  .detector-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .rating-summary { grid-template-columns: 1fr; gap: 22px; text-align: center; }
  .cta-band { padding: 40px 24px; }
  .hero-cta .btn { width: 100%; }
  .doc-1 { width: 232px; right: -10px; }
  .doc-2 { width: 210px; top: 176px; }
  .doc-3 { display: none; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 26px; }
  .price-hero { padding: 26px; }
  .calc-panel, .calc-out { padding: 22px; }
}

/* print */
@media print {
  .site-header, .site-footer, .cta-band, .nav-toggle { display: none; }
  body { color: #000; }
  a { color: #000; text-decoration: underline; }
}