/* /security-testing/ — standalone landing page.
 *
 * Self-contained on purpose: this page does not load site.css, so its layout
 * cannot be broken by a change to the main design system, and the main site
 * cannot be broken by a change here.
 *
 * Constraints it is written against:
 *   - CSP is `default-src 'none'; style-src 'self'; font-src 'self'`.
 *     No inline style attributes, no CDN, no external font.
 *   - The site ships no JavaScript. Every interaction below is CSS or
 *     <details>.
 *   - Font paths are absolute so ManifestStaticFilesStorage rewrites them to
 *     the hashed filenames at collectstatic time.
 */

@font-face {
  font-family: "Plex"; src: url("/static/fonts/plex-latin-400.4767e1197706.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Plex"; src: url("/static/fonts/plex-latin-500.80ebc672c915.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Plex"; src: url("/static/fonts/plex-latin-600.f417eeb0d15e.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Plex"; src: url("/static/fonts/plex-latin-700.8d04403cf599.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* --- Tokens --------------------------------------------------------------
 * Dark only. A security report is read on a dark screen at 11pm, and the page
 * that sells it should look like the thing it sells. Contrast pairs below are
 * all at or above WCAG 2.2 AA for their size.
 */
:root {
  --bg:        #080a0c;   /* page */
  --panel:     #0e1317;   /* cards */
  --panel-2:   #131a20;   /* raised cards, table stripes */
  --line:      #1f272f;
  --line-hi:   #2c3742;

  --ink:       #eef2f5;   /* 16.5:1 on --bg */
  --ink-2:     #c3ccd4;
  --muted:     #96a2ad;   /* 7.4:1 on --bg */

  --accent:    #35c3b2;   /* FD Solutions teal, dark-scheme value */
  --accent-hi: #6fe0d2;
  --accent-dk: #0f6e63;

  --sig:       #ff7a45;   /* severity / urgency only, never body text */
  --sig-dim:   rgba(255, 122, 69, .12);
  --ok:        #4ade80;

  --radius:    14px;
  --radius-sm: 9px;
  --wrap:      1160px;

  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 84px;   /* the sticky offer bar */
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Plex", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { text-wrap: balance; margin: 0; line-height: 1.15; font-weight: 600; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }
img, svg { max-width: 100%; height: auto; display: block; }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 3px;
}

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--accent); color: #04110f;
  padding: .7rem 1.1rem; border-radius: 0 0 8px 0;
  font-weight: 600; text-decoration: none; z-index: 200;
}
.skip:focus { left: 0; }

/* --- Layout primitives --------------------------------------------------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 22px; }
.narrow { max-width: 760px; }
.measure { max-width: 62ch; }

section { padding-block: clamp(56px, 8vw, 108px); }
.section-line { border-top: 1px solid var(--line); }

.eyebrow {
  font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 18px;
}
.eyebrow.plain { color: var(--muted); }

.h2 { font-size: clamp(28px, 4vw, 42px); letter-spacing: -.02em; }
.h3 { font-size: clamp(20px, 2.4vw, 25px); letter-spacing: -.01em; }
.lede { color: var(--ink-2); font-size: clamp(17px, 1.6vw, 19px); margin-top: 18px; }
.dim { color: var(--muted); }
.small { font-size: 14px; }
.mono { font-family: ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, monospace; }

.stack > * + * { margin-top: 14px; }
.grid { display: grid; gap: 20px; }
@media (min-width: 720px)  { .g2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 720px)  { .g4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px)  { .g3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1040px) { .g4 { grid-template-columns: repeat(4, 1fr); } }

/* --- Buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .95rem 1.5rem;
  border: 1px solid transparent; border-radius: 10px;
  font-size: 16px; font-weight: 600; line-height: 1.2;
  text-decoration: none; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); color: #04110f; }
.btn-primary:hover { background: var(--accent-hi); }
.btn-ghost { border-color: var(--line-hi); color: var(--ink); background: transparent; }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent-hi); }
.btn-block { width: 100%; }
.btn-sm { padding: .65rem 1.05rem; font-size: 14px; border-radius: 8px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

.link { color: var(--accent-hi); text-underline-offset: 4px; }

/* --- Offer bar ----------------------------------------------------------- */
.offerbar {
  position: sticky; top: 0; z-index: 100;
  background: linear-gradient(90deg, #0c1a18, #0f2a25 55%, #0c1a18);
  border-bottom: 1px solid #1d3b36;
}
.offerbar-in {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px;
  padding-block: 11px; font-size: 14px;
}
.offerbar b { color: var(--accent-hi); }
.offerbar .tag {
  display: inline-flex; align-items: center; gap: .45rem;
  font-weight: 600; color: var(--ink);
}
.dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 3px rgba(53, 195, 178, .18);
  flex: none;
}
.offerbar .spacer { flex: 1 1 auto; }
.offerbar a { color: var(--accent-hi); font-weight: 600; text-underline-offset: 4px; }
@media (max-width: 640px) { .offerbar .hide-sm { display: none; } }

/* --- Masthead ------------------------------------------------------------ */
.masthead { padding-block: 26px; }
.masthead-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; }
.mark {
  display: grid; place-items: center; width: 38px; height: 38px;
  border-radius: 10px; border: 1px solid var(--line-hi); background: var(--panel-2);
  font-family: ui-monospace, Menlo, monospace; font-size: 13px; font-weight: 700;
  color: var(--accent);
}
.brand-name { font-weight: 600; font-size: 15px; letter-spacing: -.01em; }
.brand-sub { display: block; font-size: 12px; color: var(--muted); font-weight: 400; }

/* --- Hero ---------------------------------------------------------------- */
.hero { padding-block: clamp(48px, 7vw, 92px) clamp(48px, 6vw, 80px); position: relative; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: -30% 30% 40% -20%;
  background: radial-gradient(closest-side, rgba(53,195,178,.13), transparent 72%);
  pointer-events: none;
}
.hero .wrap { position: relative; }
.hero-grid { display: grid; gap: 44px; }
@media (min-width: 1000px) { .hero-grid { grid-template-columns: 1.15fr .85fr; gap: 60px; align-items: start; } }

.display {
  font-size: clamp(38px, 6.4vw, 68px);
  line-height: 1.03; letter-spacing: -.033em; font-weight: 600;
}
.display em { font-style: normal; color: var(--accent); }
.hero-sub { margin-top: 26px; font-size: clamp(17px, 1.7vw, 20px); color: var(--ink-2); max-width: 60ch; }

.assure { margin-top: 30px; display: grid; gap: 11px; }
.assure li { display: flex; gap: 11px; align-items: flex-start; font-size: 15px; color: var(--ink-2); }
.tick { flex: none; margin-top: 4px; color: var(--accent); }

/* Hero side panel — a report contents card, so the deliverable is visible
   above the fold rather than described 4,000 pixels down the page. */
.card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 26px;
}
.card-hd {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-bottom: 16px; margin-bottom: 18px; border-bottom: 1px solid var(--line);
}
.chip {
  display: inline-block; padding: .3rem .6rem; border-radius: 999px;
  font-size: 11px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  border: 1px solid var(--line-hi); color: var(--muted);
}
.chip-live { color: var(--accent); border-color: rgba(53,195,178,.4); background: rgba(53,195,178,.08); }
.chip-sig  { color: var(--sig); border-color: rgba(255,122,69,.4); background: var(--sig-dim); }

.toc li {
  display: flex; gap: 13px; align-items: baseline;
  padding: 9px 0; border-bottom: 1px dashed var(--line); font-size: 14.5px;
}
.toc li:last-child { border-bottom: 0; }
.toc .n { font-family: ui-monospace, Menlo, monospace; font-size: 12px; color: var(--accent); flex: none; }

/* --- Stat rail ----------------------------------------------------------- */
.rail { background: var(--panel); border-block: 1px solid var(--line); padding-block: clamp(40px, 5vw, 64px); }
.stat .fig {
  font-size: clamp(30px, 4vw, 42px); font-weight: 600; letter-spacing: -.03em;
  color: var(--ink); line-height: 1;
}
.stat .lbl { margin-top: 12px; font-size: 14px; font-weight: 600; color: var(--accent); }
.stat p { margin-top: 10px; font-size: 15px; color: var(--muted); }
.stat cite { display: block; margin-top: 12px; font-size: 12.5px; color: #6f7a85; font-style: normal; }

/* --- Trigger cards ------------------------------------------------------- */
.trigger {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 28px;
}
.trigger h3 { font-size: 19px; margin-bottom: 12px; }
.trigger p { color: var(--muted); font-size: 15.5px; }

/* --- Report anatomy ------------------------------------------------------ */
.report-grid { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
@media (min-width: 760px)  { .report-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .report-grid { grid-template-columns: repeat(4, 1fr); } }
.report-cell { background: var(--panel); padding: 26px 24px; }
.report-cell .n {
  font-family: ui-monospace, Menlo, monospace; font-size: 12px;
  color: var(--accent); letter-spacing: .08em;
}
.report-cell h3 { font-size: 17px; margin: 12px 0 10px; }
.report-cell p { font-size: 14.5px; color: var(--muted); }

.pullquote {
  margin-top: 34px; padding: 26px 30px;
  border-left: 3px solid var(--accent); background: var(--panel-2);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: clamp(18px, 2.2vw, 22px); letter-spacing: -.01em; color: var(--ink);
}

/* --- Comparison table ---------------------------------------------------- */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 34px; border: 1px solid var(--line); border-radius: var(--radius); }
/* Five columns since the AI-scan column was added, so the scroll floor rises
   with it — .table-scroll handles the overflow on narrow screens. */
table.cmp { width: 100%; min-width: 900px; border-collapse: collapse; font-size: 15px; }
table.cmp th, table.cmp td { padding: 14px 15px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
table.cmp thead th { background: var(--panel-2); font-size: 14px; }
table.cmp thead th .price { display: block; margin-top: 5px; font-weight: 400; font-size: 13px; color: var(--muted); }
table.cmp tbody th { font-weight: 400; color: var(--ink-2); }
table.cmp td { color: var(--muted); }
table.cmp .us { background: rgba(53,195,178,.055); color: var(--ink); font-weight: 500; }
table.cmp thead .us { background: rgba(53,195,178,.11); color: var(--ink); }
table.cmp tbody tr:last-child th, table.cmp tbody tr:last-child td { border-bottom: 0; }

/* --- Pricing ------------------------------------------------------------- */
.tiers { display: grid; gap: 20px; margin-top: 40px; align-items: start; }
@media (min-width: 780px)  { .tiers { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1180px) { .tiers { grid-template-columns: repeat(4, 1fr); } }

.tier {
  display: flex; flex-direction: column; height: 100%;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 28px 24px;
}
.tier.featured {
  background: var(--panel-2); border-color: rgba(53,195,178,.45);
  box-shadow: 0 0 0 1px rgba(53,195,178,.14), 0 18px 50px -30px rgba(53,195,178,.55);
}
.tier-flag {
  align-self: flex-start; margin-bottom: 16px;
  padding: .28rem .6rem; border-radius: 999px;
  background: var(--accent); color: #04110f;
  font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
}
.tier h3 { font-size: 20px; }
.tier .answers { margin-top: 10px; font-size: 15px; color: var(--accent-hi); }
.tier .whom { margin-top: 8px; font-size: 14px; color: var(--muted); }

.price-block { margin: 22px 0 6px; display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; }
.price { font-size: 40px; font-weight: 600; letter-spacing: -.035em; line-height: 1; }
.price-was { font-size: 18px; color: var(--muted); text-decoration: line-through; }
.price-unit { font-size: 13.5px; color: var(--muted); }
.price-save { margin-top: 8px; font-size: 13px; color: var(--accent); font-weight: 600; }

.tier-meta {
  margin-top: 18px; padding: 10px 12px; border-radius: var(--radius-sm);
  background: rgba(255,255,255,.028); border: 1px solid var(--line);
  font-size: 13.5px; color: var(--ink-2);
  display: flex; justify-content: space-between; gap: 10px;
}

.feat { margin-top: 20px; display: grid; gap: 10px; }
.feat li { display: flex; gap: 10px; font-size: 14.5px; color: var(--ink-2); align-items: flex-start; }
.feat .tick { margin-top: 3px; }

.tier-note { margin-top: 16px; font-size: 13px; color: var(--muted); }
.tier-guarantee {
  margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--line);
  font-size: 13.5px; color: var(--ink-2);
}
.tier .btn { margin-top: 22px; }
.tier-spacer { flex: 1 1 auto; }

.anchor-note {
  margin-top: 30px; padding: 22px 26px; border: 1px dashed var(--line-hi);
  border-radius: var(--radius); color: var(--muted); font-size: 15px;
}
.anchor-note b { color: var(--ink); }

/* --- Method -------------------------------------------------------------- */
.std { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin-top: 34px; }
@media (min-width: 860px) { .std { grid-template-columns: repeat(3, 1fr); } }
.std-cell { background: var(--panel); padding: 22px 24px; }
.std-cell .name { font-weight: 600; font-size: 15px; color: var(--accent); font-family: ui-monospace, Menlo, monospace; }
.std-cell p { margin-top: 8px; font-size: 14px; color: var(--muted); }

.rules { margin-top: 34px; display: grid; gap: 20px; }
@media (min-width: 900px) { .rules { grid-template-columns: repeat(2, 1fr); } }
.rule-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; background: var(--panel); }
.rule-card h3 { font-size: 17px; display: flex; gap: 11px; align-items: flex-start; }
.rule-card p { margin-top: 11px; font-size: 15px; color: var(--muted); }

/* --- Process ------------------------------------------------------------- */
.steps { margin-top: 40px; display: grid; gap: 0; }
.step {
  display: grid; gap: 6px 28px; padding: 26px 0;
  border-top: 1px solid var(--line);
}
.step:last-child { border-bottom: 1px solid var(--line); }
@media (min-width: 860px) { .step { grid-template-columns: 70px 250px 1fr; align-items: baseline; } }
.step .n { font-family: ui-monospace, Menlo, monospace; font-size: 13px; color: var(--accent); }
.step h3 { font-size: 19px; }
.step .when { font-size: 13px; color: var(--muted); margin-top: 6px; }
.step p { color: var(--muted); font-size: 15.5px; }

/* --- Promises ------------------------------------------------------------ */
.promise { border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; background: var(--panel); }
.promise h3 { font-size: 17px; margin-bottom: 11px; color: var(--ink); }
.promise p { font-size: 15px; color: var(--muted); }

/* --- FAQ ----------------------------------------------------------------- */
.faq { margin-top: 34px; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; gap: 16px; align-items: baseline; justify-content: space-between;
  padding: 20px 0; cursor: pointer; list-style: none;
  font-size: 17px; font-weight: 500; color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; flex: none; font-family: ui-monospace, Menlo, monospace;
  font-size: 20px; color: var(--accent); line-height: 1;
}
.faq details[open] summary::after { content: "\2212"; }
.faq details[open] summary { color: var(--accent-hi); }
.faq .answer { padding: 0 0 24px; color: var(--muted); font-size: 15.5px; max-width: 76ch; }

/* --- Form ---------------------------------------------------------------- */
.form-panel {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: clamp(24px, 4vw, 40px);
}
.form-grid { display: grid; gap: 18px; }
@media (min-width: 700px) { .form-grid .half { grid-column: span 1; } .form-grid { grid-template-columns: repeat(2, 1fr); } .form-grid .full { grid-column: 1 / -1; } }

.f label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 7px; color: var(--ink-2); }
.f .help { font-size: 13px; color: var(--muted); margin-bottom: 9px; }
.sfield {
  width: 100%; padding: .8rem .9rem;
  background: #0a0e12; color: var(--ink);
  border: 1px solid var(--line-hi); border-radius: 9px;
  font: inherit; font-size: 15px;
}
.sfield::placeholder { color: #5d6874; }
.sfield:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px rgba(53,195,178,.2); }
textarea.sfield { min-height: 130px; resize: vertical; }
select.sfield { appearance: none; background-image: none; }

.errors { margin: 6px 0 0; color: #ff9d7a; font-size: 13.5px; }
.consent { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; color: var(--ink-2); }
.consent input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--accent); flex: none; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-assure { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 13.5px; color: var(--muted); }

/* --- Final CTA ----------------------------------------------------------- */
.final { background: var(--panel); border-block: 1px solid var(--line); }
.final-grid { display: grid; gap: 44px; }
@media (min-width: 1000px) { .final-grid { grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: start; } }

/* --- Footer -------------------------------------------------------------- */
.foot { padding-block: 52px; font-size: 14px; color: var(--muted); }
.foot-grid { display: grid; gap: 28px; }
@media (min-width: 780px) { .foot-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.foot h2 { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin-bottom: 14px; }
.foot li + li { margin-top: 8px; }
.foot a { text-underline-offset: 4px; }
.foot-legal { margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 13px; }
.foot address { font-style: normal; }

/* --- Thank-you page ------------------------------------------------------ */
.thanks { min-height: 72vh; display: grid; place-items: center; text-align: center; padding-block: 80px; }
.thanks .h2 { margin-top: 22px; }
.thanks p { margin-top: 18px; color: var(--muted); }
.thanks .btn-row { justify-content: center; }

/* --- Print --------------------------------------------------------------- */
@media print {
  .offerbar, .form-panel, .btn { display: none !important; }
  body { background: #fff; color: #000; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   VISUALS
   No images and no chart library: the CSP forbids external assets and the site
   ships no JavaScript. Everything below is inline SVG, CSS gradients and
   borders. That is a constraint, but it is also the right answer for this page
   — a security vendor's landing page loading a stock photo of a hooded figure
   from a CDN is arguing against itself.
   ══════════════════════════════════════════════════════════════════════════ */

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* --- Icons --------------------------------------------------------------- */
.icon { width: 22px; height: 22px; flex: none; }
.icon-lg { width: 26px; height: 26px; }

.icon-box {
  display: grid; place-items: center;
  width: 46px; height: 46px; flex: none;
  border-radius: 12px;
  background: linear-gradient(160deg, rgba(53,195,178,.16), rgba(53,195,178,.04));
  border: 1px solid rgba(53,195,178,.28);
  color: var(--accent);
}
.icon-box.plain {
  background: rgba(255,255,255,.03);
  border-color: var(--line-hi);
  color: var(--ink-2);
}

/* --- Severity palette ---------------------------------------------------- */
.sev-critical { --sev: #ff5a52; --sev-bg: rgba(255,90,82,.13); --sev-bd: rgba(255,90,82,.42); }
.sev-high     { --sev: #ff9440; --sev-bg: rgba(255,148,64,.13); --sev-bd: rgba(255,148,64,.42); }
.sev-medium   { --sev: #ffd15c; --sev-bg: rgba(255,209,92,.13); --sev-bd: rgba(255,209,92,.40); }
.sev-low      { --sev: #7cc4ff; --sev-bg: rgba(124,196,255,.13); --sev-bd: rgba(124,196,255,.40); }
.sev-info     { --sev: #9aa6b2; --sev-bg: rgba(154,166,178,.13); --sev-bd: rgba(154,166,178,.38); }

.sev-tag {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .22rem .58rem; border-radius: 6px;
  background: var(--sev-bg); border: 1px solid var(--sev-bd); color: var(--sev);
  font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  white-space: nowrap;
}
.sev-tag::before {
  content: ""; width: 6px; height: 6px; border-radius: 2px; background: var(--sev);
}

/* --- Severity scale ------------------------------------------------------ */
.scale { margin-top: 34px; display: grid; gap: 10px; }
.scale-row {
  display: grid; gap: 8px 20px; align-items: center;
  padding: 16px 18px;
  border: 1px solid var(--line); border-left: 3px solid var(--sev);
  border-radius: var(--radius-sm); background: var(--panel);
}
@media (min-width: 900px) {
  .scale-row { grid-template-columns: 150px 96px 1fr 190px; }
}
.scale-bar {
  position: relative; height: 7px; border-radius: 4px;
  background: rgba(255,255,255,.06); overflow: hidden;
}
.scale-bar span { position: absolute; inset: 0 auto 0 0; background: var(--sev); border-radius: 4px; }
.scale-w-100 span { width: 100%; }
.scale-w-78  span { width: 78%; }
.scale-w-55  span { width: 55%; }
.scale-w-32  span { width: 32%; }
.scale-w-16  span { width: 16%; }
.scale-row .cvss { font-family: ui-monospace, Menlo, monospace; font-size: 13px; color: var(--muted); }
.scale-row .meaning { font-size: 14.5px; color: var(--ink-2); }
.scale-row .sla { font-size: 13px; color: var(--accent); font-weight: 500; }

/* --- Coverage map -------------------------------------------------------- */
.cover {
  margin-top: 34px; display: grid; gap: 1px;
  background: var(--line); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
}
@media (min-width: 620px)  { .cover { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px)  { .cover { grid-template-columns: repeat(5, 1fr); } }
.cover-cell {
  background: var(--panel); padding: 22px 20px;
  transition: background-color .15s ease;
}
.cover-cell:hover { background: var(--panel-2); }
.cover-cell .icon { color: var(--accent); width: 24px; height: 24px; }
.cover-cell h3 { font-size: 15.5px; margin: 14px 0 7px; }
.cover-cell p { font-size: 13.5px; color: var(--muted); line-height: 1.5; }

/* --- Report mockup (hero) ------------------------------------------------ */
.mock {
  border: 1px solid var(--line-hi); border-radius: var(--radius);
  background: linear-gradient(180deg, #10161b, #0c1114);
  overflow: hidden;
  box-shadow: 0 30px 70px -40px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.02);
}
.mock-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 14px; border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,.022);
}
.mock-dot { width: 9px; height: 9px; border-radius: 50%; background: #2b343d; flex: none; }
.mock-bar .name {
  margin-left: 6px; font-family: ui-monospace, Menlo, monospace;
  font-size: 11.5px; color: var(--muted); letter-spacing: .02em;
}
.mock-body { padding: 22px 22px 24px; }

.mock-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; }
.mock-title { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.mock-sub { margin-top: 5px; font-size: 12px; color: var(--muted); font-family: ui-monospace, Menlo, monospace; }

.mock-counts { display: flex; gap: 7px; margin: 20px 0 4px; flex-wrap: wrap; }
.count {
  flex: 1 1 0; min-width: 54px; text-align: center;
  padding: 10px 6px 9px; border-radius: 8px;
  background: var(--sev-bg); border: 1px solid var(--sev-bd);
}
.count b { display: block; font-size: 19px; font-weight: 600; color: var(--sev); line-height: 1; }
.count span { display: block; margin-top: 5px; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }

.mock-list { margin-top: 18px; border-top: 1px solid var(--line); }
.mock-item {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 0; border-bottom: 1px solid var(--line);
}
.mock-item .txt { flex: 1 1 auto; font-size: 13px; color: var(--ink-2); }
.mock-item .ref { font-family: ui-monospace, Menlo, monospace; font-size: 11px; color: #63707c; }
.mock-item.done .txt { color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(255,255,255,.22); }
.mock-item .fixed { display: inline-flex; align-items: center; gap: .3rem; font-size: 11px; color: var(--ok); font-weight: 600; }

.mock-foot {
  margin-top: 16px; display: flex; align-items: center; gap: 9px;
  font-size: 12px; color: var(--muted);
}
.mock-foot .icon { width: 15px; height: 15px; color: var(--accent); }

/* --- Evidence panel ------------------------------------------------------ */
.evidence { margin-top: 36px; display: grid; gap: 22px; }
@media (min-width: 1000px) { .evidence { grid-template-columns: 1.05fr .95fr; align-items: start; } }

.term {
  border: 1px solid var(--line-hi); border-radius: var(--radius);
  background: #070a0c; overflow: hidden;
}
.term-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,.022);
  font-family: ui-monospace, Menlo, monospace; font-size: 11.5px; color: var(--muted);
}
.term-bar .where { margin-left: auto; color: #5d6874; }
.term pre {
  margin: 0; padding: 18px 16px; overflow-x: auto;
  font-family: ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, monospace;
  font-size: 12.5px; line-height: 1.75; color: var(--ink-2);
  -webkit-overflow-scrolling: touch;
}
.term .l-req { color: #7cc4ff; }
.term .l-res { color: #9aa6b2; }
.term .l-hit { color: #ffd15c; background: rgba(255,209,92,.07); display: block; }
.term .l-gap { display: block; height: .6em; }

.finding-meta { display: grid; gap: 14px; }
.finding-meta .row {
  display: grid; gap: 4px;
  padding-bottom: 13px; border-bottom: 1px dashed var(--line);
}
.finding-meta .k { font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: #6f7a85; }
.finding-meta .v { font-size: 14.5px; color: var(--ink-2); }
.finding-meta .v.mono { font-family: ui-monospace, Menlo, monospace; font-size: 13px; }
.caption { margin-top: 18px; font-size: 13px; color: #6f7a85; font-style: italic; }

/* --- Attack chain -------------------------------------------------------- */
.chain { margin-top: 36px; display: grid; gap: 14px; align-items: stretch; }
@media (min-width: 1040px) { .chain { grid-template-columns: repeat(3, 1fr) 46px 1.25fr; gap: 0; } }

.chain-node {
  position: relative;
  padding: 22px 20px; background: var(--panel);
  border: 1px solid var(--line); border-top: 3px solid var(--sev);
  border-radius: var(--radius-sm);
}
.chain-node h3 { font-size: 15.5px; margin: 12px 0 9px; }
.chain-node p { font-size: 13.5px; color: var(--muted); }

@media (min-width: 1040px) {
  .chain-node { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
  .chain-node + .chain-node { border-left: 0; border-radius: 0; }
  /* The connector between nodes. :has(+ .chain-node) rather than
     :not(:last-of-type), because .chain-out is an <article> too — so
     last-of-type is the outcome card, and every node including the third
     would draw a connector into the arrow that already sits there. */
  .chain-node:has(+ .chain-node)::after {
    content: ""; position: absolute; top: 50%; right: -6px;
    width: 11px; height: 11px; margin-top: -5px;
    border-top: 1px solid var(--line-hi); border-right: 1px solid var(--line-hi);
    transform: rotate(45deg); background: var(--bg); z-index: 2;
  }
}

.chain-arrow { display: grid; place-items: center; color: var(--sig); }
.chain-arrow svg { width: 26px; height: 26px; }
@media (max-width: 1039px) { .chain-arrow { transform: rotate(90deg); padding: 4px 0; } }

.chain-out {
  padding: 26px 24px; border-radius: var(--radius-sm);
  background: linear-gradient(150deg, rgba(255,90,82,.11), rgba(255,90,82,.03));
  border: 1px solid rgba(255,90,82,.34);
}
.chain-out h3 { font-size: 19px; margin: 12px 0 11px; }
.chain-out p { font-size: 14.5px; color: var(--ink-2); }

/* --- Trust tiles --------------------------------------------------------- */
.trust { margin-top: 34px; display: grid; gap: 20px; }
@media (min-width: 700px)  { .trust { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1060px) { .trust { grid-template-columns: repeat(4, 1fr); } }
.trust-cell { text-align: left; }
.trust-cell h3 { font-size: 15.5px; margin: 16px 0 8px; }
.trust-cell p { font-size: 14px; color: var(--muted); }

/* --- Process timeline rail ----------------------------------------------- */
.step { position: relative; }
@media (min-width: 860px) {
  .steps { position: relative; }
  .steps::before {
    content: ""; position: absolute; left: 11px; top: 26px; bottom: 26px;
    width: 1px; background: linear-gradient(180deg, var(--accent), var(--line) 85%);
  }
  .step .n { position: relative; padding-left: 30px; }
  .step .n::before {
    content: ""; position: absolute; left: 5px; top: .35em;
    width: 13px; height: 13px; border-radius: 50%;
    background: var(--bg); border: 2px solid var(--accent);
  }
}

/* --- Comparison marks ---------------------------------------------------- */
table.cmp .m { display: inline-flex; align-items: center; gap: .5rem; }
table.cmp .m svg { width: 15px; height: 15px; flex: none; }
table.cmp .m-yes svg { color: var(--ok); }
table.cmp .m-no  svg { color: #7d5a52; }
table.cmp .m-mid svg { color: #ffd15c; }

/* --- Icon headings on cards ---------------------------------------------- */
.trigger .icon-box, .promise .icon-box, .rule-card .icon-box { margin-bottom: 18px; }
.rule-card h3 { align-items: center; }

/* --- Decorative grid backdrop -------------------------------------------- */
/* A faint coordinate grid. Purely decorative, sits behind nothing that needs
   contrast, and is dropped entirely when the viewer prefers less motion or
   reduced data — it is only a background-image made of gradients. */
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
  background-size: 62px 62px;
  mask-image: radial-gradient(ellipse 70% 60% at 30% 0%, #000 35%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 30% 0%, #000 35%, transparent 78%);
  z-index: 0;
}
.hero > .wrap { z-index: 1; }

/* ═══════════════════════════════════════════════════════════════════════════
   MOTION
   Three rules this whole block obeys:

   1. Nothing is hidden by default. Every "reveal" starts from the visible
      state and is only pushed to opacity:0 inside a guarded block, so a
      browser that cannot run the animation, or a visitor who has asked for
      less motion, gets the finished page rather than a blank one. Getting this
      backwards is how a landing page ends up empty for a real customer.
   2. Scroll-driven work sits behind @supports (animation-timeline: view()).
      Where it is unsupported, the content is simply there.
   3. prefers-reduced-motion: reduce turns all of it off — including the
      infinite loops, which the global .01ms duration override does not
      meaningfully stop.
   ══════════════════════════════════════════════════════════════════════════ */

@keyframes rise-in {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
@keyframes rise-in-sm {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes grow-x {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@keyframes draw-tick {
  from { stroke-dashoffset: 22; }
  to   { stroke-dashoffset: 0; }
}
@keyframes ping {
  0%        { box-shadow: 0 0 0 0 rgba(53,195,178,.45); }
  70%, 100% { box-shadow: 0 0 0 9px rgba(53,195,178,0); }
}
@keyframes sweep {
  0%        { transform: translateY(-100%); opacity: 0; }
  12%       { opacity: 1; }
  88%       { opacity: 1; }
  100%      { transform: translateY(1100%); opacity: 0; }
}
@keyframes caret {
  0%, 49%   { opacity: 1; }
  50%, 100% { opacity: 0; }
}
@keyframes nudge-x {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(5px); }
}
@keyframes breathe {
  0%, 100% { box-shadow: 0 0 0 1px rgba(255,90,82,.30), 0 0 34px -14px rgba(255,90,82,.55); }
  50%      { box-shadow: 0 0 0 1px rgba(255,90,82,.55), 0 0 46px -10px rgba(255,90,82,.95); }
}
@keyframes drift {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 62px 62px, 62px 62px; }
}

@media (prefers-reduced-motion: no-preference) {

  /* --- Hero entrance, staggered ------------------------------------------
     The one place a load animation earns its keep: it walks the eye down the
     headline to the buttons in the order the argument is made. */
  .hl {
    display: block;
    animation: rise-in .7s cubic-bezier(.22, .8, .3, 1) backwards;
  }
  .hl:nth-child(1) { animation-delay: .05s; }
  .hl:nth-child(2) { animation-delay: .14s; }
  .hl:nth-child(3) { animation-delay: .23s; }

  .rise { animation: rise-in .75s cubic-bezier(.22, .8, .3, 1) backwards; }
  .rise-1 { animation-delay: 0s; }
  .rise-3 { animation-delay: .34s; }
  .rise-4 { animation-delay: .44s; }
  .rise-5 { animation-delay: .54s; }
  .rise-6 { animation-delay: .30s; animation-duration: .9s; }

  /* The grid backdrop drifts one cell every 40s — slow enough that you never
     catch it moving, fast enough that the hero is not quite static. */
  .hero::after { animation: drift 40s linear infinite; }

  /* --- The live dot in the offer bar ------------------------------------- */
  .dot { animation: ping 2.4s ease-out infinite; }

  /* --- Evidence panel: a scan line and a caret ---------------------------- */
  .term { position: relative; overflow: hidden; }
  .term::after {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 34%;
    background: linear-gradient(180deg, transparent, rgba(53,195,178,.07) 55%, transparent);
    animation: sweep 6.5s cubic-bezier(.5, 0, .5, 1) infinite;
    pointer-events: none;
  }
  .term pre::after {
    content: "▍"; color: var(--accent);
    animation: caret 1.1s steps(1) infinite;
  }

  /* --- Attack chain: the arrow leans towards the outcome ------------------ */
  .chain-arrow svg { animation: nudge-x 1.9s ease-in-out infinite; }
  .chain-out { animation: breathe 4.5s ease-in-out infinite; }

  /* --- Ticks draw themselves --------------------------------------------- */
  /* stroke-dasharray and stroke-dashoffset are inherited SVG properties, so
     setting them on the <use> element reaches the symbol's path — which is
     otherwise unstylable from here. */
  .assure .tick, .mock-item .fixed .icon {
    stroke-dasharray: 22;
    animation: draw-tick .5s ease-out backwards;
  }
  .assure li:nth-child(1) .tick { animation-delay: .70s; }
  .assure li:nth-child(2) .tick { animation-delay: .82s; }
  .assure li:nth-child(3) .tick { animation-delay: .94s; }
  .mock-item:nth-of-type(3) .fixed .icon { animation-delay: 1.25s; }
  .mock-item:nth-of-type(4) .fixed .icon { animation-delay: 1.45s; }

  /* --- Hover: everything that can be clicked says so ---------------------- */
  .trigger, .promise, .rule-card, .cover-cell, .report-cell, .tier, .trust-cell {
    transition: transform .22s cubic-bezier(.22,.8,.3,1),
                border-color .22s ease, background-color .22s ease;
  }
  .trigger:hover, .promise:hover, .rule-card:hover, .trust-cell:hover {
    transform: translateY(-3px); border-color: var(--line-hi);
  }
  .tier:hover { transform: translateY(-4px); border-color: rgba(53,195,178,.4); }
  .tier.featured:hover { transform: translateY(-6px); }
  .cover-cell:hover { transform: translateY(-2px); }

  .icon-box { transition: transform .22s cubic-bezier(.22,.8,.3,1), box-shadow .22s ease; }
  .trigger:hover .icon-box, .promise:hover .icon-box, .rule-card:hover .icon-box {
    transform: scale(1.06) rotate(-3deg);
    box-shadow: 0 0 26px -8px rgba(53,195,178,.6);
  }

  .btn { transition: background-color .16s ease, border-color .16s ease,
                     transform .16s ease, box-shadow .22s ease; }
  /* The primary/WhatsApp hover glow lives in the EMPHASIS layer at the end of
     this file, so it is defined in one place rather than fought over here. */

  .mock { transition: transform .4s cubic-bezier(.22,.8,.3,1), box-shadow .4s ease; }
  .mock:hover { transform: translateY(-4px); }

  /* --- FAQ: the panel opens rather than snaps ---------------------------- */
  /* interpolate-size lets height animate to `auto`. Where it is unsupported
     the panel still opens, just instantly — which is the current behaviour. */
  .faq summary::after { transition: transform .25s ease, color .2s ease; }
  .faq details[open] summary::after { transform: rotate(180deg); }
  .faq .answer { animation: rise-in-sm .35s ease-out; }
}

@supports (interpolate-size: allow-keywords) {
  @media (prefers-reduced-motion: no-preference) {
    :root { interpolate-size: allow-keywords; }
    .faq details::details-content {
      block-size: 0; overflow: hidden;
      transition: block-size .3s cubic-bezier(.22,.8,.3,1), content-visibility .3s allow-discrete;
    }
    .faq details[open]::details-content { block-size: auto; }
  }
}

/* --- Scroll-driven reveals ------------------------------------------------
 * Guarded twice: the browser must support view timelines AND the visitor must
 * not have asked for less motion. Only inside both is anything set to
 * opacity:0 — everywhere else the page renders exactly as it does now.
 */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {

    section .eyebrow,
    section .h2,
    section > .wrap > .lede,
    .trigger, .cover-cell, .report-cell, .rule-card, .std-cell,
    .promise, .trust-cell, .tier, .step, .scale-row,
    .chain-node, .chain-out, .pullquote, .anchor-note, .table-scroll,
    .evidence > *, .form-panel {
      animation: rise-in .8s cubic-bezier(.22,.8,.3,1) both;
      animation-timeline: view();
      animation-range: entry 5% cover 26%;
    }

    /* Tiles in a row would otherwise all arrive at once. Shifting each one's
       range a little further into the scroll makes them cascade instead. */
    .cover-cell:nth-child(2), .report-cell:nth-child(2), .tier:nth-child(2) {
      animation-range: entry 5% cover 31%;
    }
    .cover-cell:nth-child(3), .report-cell:nth-child(3), .tier:nth-child(3) {
      animation-range: entry 5% cover 36%;
    }
    .cover-cell:nth-child(4), .report-cell:nth-child(4), .tier:nth-child(4) {
      animation-range: entry 5% cover 41%;
    }
    .cover-cell:nth-child(5), .report-cell:nth-child(5) { animation-range: entry 5% cover 46%; }
    .cover-cell:nth-child(n+6) { animation-range: entry 5% cover 30%; }

    /* Severity bars fill as the row arrives. The width itself is untouched —
       only the scale is animated — so an unsupported browser shows the bar at
       its correct length. */
    .scale-bar span {
      transform-origin: left center;
      animation: grow-x .9s cubic-bezier(.22,.8,.3,1) both;
      animation-timeline: view();
      animation-range: entry 10% cover 34%;
    }

    /* The stat figures count for something; let them land one at a time. */
    .stat { animation: rise-in .8s cubic-bezier(.22,.8,.3,1) both;
            animation-timeline: view(); animation-range: entry 5% cover 28%; }
    .stat:nth-child(2) { animation-range: entry 5% cover 34%; }
    .stat:nth-child(3) { animation-range: entry 5% cover 40%; }

    /* Chain nodes arrive left to right, so the argument reads in order. */
    .chain-node:nth-of-type(2) { animation-range: entry 5% cover 32%; }
    .chain-node:nth-of-type(3) { animation-range: entry 5% cover 38%; }
    .chain-out { animation-range: entry 5% cover 46%; }

    /* Process steps come in from the side, along the timeline rail. */
    @keyframes step-in {
      from { opacity: 0; transform: translateX(-14px); }
      to   { opacity: 1; transform: none; }
    }
    .step { animation-name: step-in; animation-range: entry 8% cover 30%; }
  }
}

/* Belt and braces: if reduced motion is asked for, nothing loops and nothing
   is offset, whatever any block above said. */
@media (prefers-reduced-motion: reduce) {
  .hero::after, .dot, .term::after, .term pre::after,
  .chain-arrow svg, .chain-out, .assure .tick, .mock-item .fixed .icon {
    animation: none !important;
  }
  .term::after { display: none; }
  * { animation-timeline: auto !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SIMPLE-UI LAYER
   Added when the page was cut from ~5,900 words to ~1,900 and the depth moved
   to /security-testing/method/ and the guides. Everything here exists to make
   the page usable in ninety seconds on a phone.
   ══════════════════════════════════════════════════════════════════════════ */

.center { text-align: center; }
.center-row { justify-content: center; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }

/* --- WhatsApp ------------------------------------------------------------
 * Brand green, with dark text: #25D366 on white text fails contrast badly,
 * on near-black it is comfortably over 7:1.
 */
.btn-wa {
  background: #25d366; color: #062b14; border-color: #25d366;
}
.btn-wa:hover { background: #3ae37a; border-color: #3ae37a; }
.btn-wa .icon { width: 19px; height: 19px; }

.icon-box.wa {
  background: linear-gradient(160deg, rgba(37,211,102,.18), rgba(37,211,102,.05));
  border-color: rgba(37,211,102,.35); color: #25d366;
}

.wa-card {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-top: 26px; padding: 18px 20px;
  border: 1px solid rgba(37,211,102,.28); border-radius: var(--radius);
  background: linear-gradient(120deg, rgba(37,211,102,.07), transparent 70%);
}
.wa-card > div { flex: 1 1 190px; }
.wa-title { font-weight: 600; font-size: 15.5px; }

.tier-wa {
  display: block; margin-top: 10px; text-align: center;
  font-size: 13px; color: #25d366; text-underline-offset: 4px;
}

.masthead-cta { display: flex; align-items: center; gap: 10px; }
@media (max-width: 560px) { .masthead-cta .hide-sm { display: none; } }

/* --- Mobile action dock --------------------------------------------------
 * The page is long and the form is at the bottom. On a phone the two things a
 * visitor might want stay one thumb away; on a wide screen the masthead
 * already does that job, so the dock is not rendered at all.
 */
.dock { display: none; }
@media (max-width: 860px) {
  .dock {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    display: flex; gap: 10px; padding: 10px 14px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(8, 10, 12, .93);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--line);
  }
  .dock-btn {
    flex: 1 1 0;
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    padding: .85rem 1rem; border-radius: 10px;
    font-size: 15px; font-weight: 600; text-decoration: none;
  }
  .dock-wa { background: #25d366; color: #062b14; }
  .dock-primary { background: var(--accent); color: #04110f; }
  .dock-btn .icon { width: 18px; height: 18px; }
  /* keep the dock from covering the last of the page */
  body.has-dock { padding-bottom: 74px; }
}

/* --- The 60-second version ----------------------------------------------- */
.brief {
  margin-top: 30px; display: grid; gap: 1px;
  background: var(--line); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
}
@media (min-width: 640px)  { .brief { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .brief { grid-template-columns: repeat(3, 1fr); } }
.brief-cell { background: var(--panel); padding: 24px 22px; }
.brief-k {
  font-size: 12px; font-weight: 600; letter-spacing: .13em;
  text-transform: uppercase; color: var(--accent);
}
.brief-v { margin-top: 11px; font-size: 15.5px; color: var(--ink-2); }

/* --- "Which one do I need?" chooser --------------------------------------
 * Pure CSS. The radios are visually hidden but focusable and sit BEFORE both
 * the labels and the result panels, so a :checked sibling selector can reach
 * each one. No JavaScript, full keyboard support.
 */
.chooser { margin-top: 30px; position: relative; }
.chooser-in {
  position: absolute; opacity: 0; pointer-events: none;
  width: 1px; height: 1px;
}
.chooser-opts { display: grid; gap: 10px; }
.chooser-opt {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 16px 18px; cursor: pointer;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 15.5px; color: var(--ink-2);
  transition: border-color .18s ease, background-color .18s ease, transform .18s ease;
}
.chooser-opt:hover { border-color: var(--line-hi); background: var(--panel-2); }
.chooser-mark {
  flex: none; margin-top: 3px; width: 17px; height: 17px;
  border-radius: 50%; border: 2px solid var(--line-hi);
  transition: border-color .18s ease, box-shadow .18s ease;
}

/* checked: highlight the chosen label, reveal the matching panel */
.chooser-out {
  display: none;
  margin-top: 22px; padding: 26px 24px;
  border: 1px solid rgba(53,195,178,.35); border-radius: var(--radius);
  background: linear-gradient(150deg, rgba(53,195,178,.09), transparent 72%);
}
.chooser-why { margin-top: 12px; color: var(--ink-2); font-size: 15.5px; }
.chooser-out .btn-row { margin-top: 22px; }
.chooser-out .price-was { font-size: 17px; margin-left: 8px; }

/* One pair of rules per option. Written out rather than generated because
   there are five of them and a nth-child trick here would be unreadable. */
#need-asked:checked     ~ .chooser-opts label[for="need-asked"],
#need-launch:checked    ~ .chooser-opts label[for="need-launch"],
#need-inherited:checked ~ .chooser-opts label[for="need-inherited"],
#need-attacked:checked  ~ .chooser-opts label[for="need-attacked"],
#need-always:checked    ~ .chooser-opts label[for="need-always"] {
  border-color: var(--accent);
  background: rgba(53,195,178,.08);
  color: var(--ink);
}
#need-asked:checked     ~ .chooser-opts label[for="need-asked"] .chooser-mark,
#need-launch:checked    ~ .chooser-opts label[for="need-launch"] .chooser-mark,
#need-inherited:checked ~ .chooser-opts label[for="need-inherited"] .chooser-mark,
#need-attacked:checked  ~ .chooser-opts label[for="need-attacked"] .chooser-mark,
#need-always:checked    ~ .chooser-opts label[for="need-always"] .chooser-mark {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 3px var(--bg), inset 0 0 0 9px var(--accent);
}
#need-asked:checked     ~ .chooser-outs .out-asked,
#need-launch:checked    ~ .chooser-outs .out-launch,
#need-inherited:checked ~ .chooser-outs .out-inherited,
#need-attacked:checked  ~ .chooser-outs .out-attacked,
#need-always:checked    ~ .chooser-outs .out-always { display: block; }

/* Keyboard users must see which option has focus, not only which is chosen. */
.chooser-in:focus-visible ~ .chooser-opts label { outline: none; }
#need-asked:focus-visible     ~ .chooser-opts label[for="need-asked"],
#need-launch:focus-visible    ~ .chooser-opts label[for="need-launch"],
#need-inherited:focus-visible ~ .chooser-opts label[for="need-inherited"],
#need-attacked:focus-visible  ~ .chooser-opts label[for="need-attacked"],
#need-always:focus-visible    ~ .chooser-opts label[for="need-always"] {
  outline: 3px solid var(--accent); outline-offset: 3px;
}

/* --- Optional extra form fields ------------------------------------------ */
.more { grid-column: 1 / -1; border-top: 1px dashed var(--line); padding-top: 16px; }
.more > summary {
  cursor: pointer; list-style: none;
  font-size: 14px; font-weight: 600; color: var(--accent-hi);
  display: flex; align-items: center; gap: .5rem;
}
.more > summary::-webkit-details-marker { display: none; }
.more > summary::before {
  content: "+"; font-family: ui-monospace, Menlo, monospace; font-size: 16px;
}
.more[open] > summary::before { content: "\2212"; }

/* --- Sub-page chrome ----------------------------------------------------- */
.subnav { border-block: 1px solid var(--line); background: var(--panel); }
.subnav-in {
  display: flex; gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch;
  padding-block: 4px; scrollbar-width: none;
}
.subnav-in::-webkit-scrollbar { display: none; }
.subnav a {
  flex: none; padding: 12px 14px; font-size: 14px; color: var(--muted);
  text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap;
}
.subnav a:hover { color: var(--ink); }
.subnav a.on { color: var(--accent); border-bottom-color: var(--accent); }

.page-head { padding-block: clamp(40px, 6vw, 72px) clamp(28px, 4vw, 44px); }
.display.sm { font-size: clamp(30px, 4.6vw, 48px); }

.toc-links { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 8px; }
.toc-links a {
  padding: .45rem .8rem; border: 1px solid var(--line-hi); border-radius: 999px;
  font-size: 13px; color: var(--ink-2); text-decoration: none;
  transition: border-color .18s ease, color .18s ease;
}
.toc-links a:hover { border-color: var(--accent); color: var(--accent-hi); }

/* --- Long-form prose ----------------------------------------------------- */
.prose-wrap { padding-block: 0 clamp(48px, 7vw, 90px); }
.prose h2 { margin-top: 46px; margin-bottom: 18px; }
.prose p { margin-bottom: 18px; color: var(--ink-2); font-size: 16.5px; }
.prose p strong { color: var(--ink); font-weight: 600; }
.prose .lead-par { font-size: 18px; color: var(--ink); }
.prose .table-scroll { margin-block: 34px 10px; }
.prose .faq { margin-top: 22px; }

/* --- Definition lists (tooling, data handling, glossary) ------------------ */
.deflist { margin-top: 30px; display: grid; gap: 1px;
           background: var(--line); border: 1px solid var(--line);
           border-radius: var(--radius); overflow: hidden; }
.def { background: var(--panel); padding: 20px 22px; display: grid; gap: 6px; }
@media (min-width: 820px) { .def { grid-template-columns: 250px 1fr; gap: 24px; } }
.def dt { font-weight: 600; font-size: 15px; color: var(--ink); }
.def dd { margin: 0; font-size: 15px; color: var(--muted); }
.deflist.compact .def { padding: 16px 22px; }

/* --- Numbered clauses ---------------------------------------------------- */
.clauses { margin-top: 30px; display: grid; gap: 0; counter-reset: none; }
.clauses li {
  display: grid; gap: 6px 22px; padding: 20px 0;
  border-top: 1px solid var(--line);
}
.clauses li:last-child { border-bottom: 1px solid var(--line); }
@media (min-width: 780px) { .clauses li { grid-template-columns: 56px 1fr; } }
.clause-n { font-family: ui-monospace, Menlo, monospace; font-size: 13px; color: var(--accent); }
.clauses h3 { font-size: 17px; margin-bottom: 8px; }
.clauses p { font-size: 15px; color: var(--muted); }

/* --- Price teasers on the guide pages ------------------------------------ */
.teaser {
  display: block; padding: 22px 20px; text-decoration: none;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color .2s ease, transform .2s ease;
}
.teaser:hover { border-color: var(--accent); transform: translateY(-3px); }
.teaser-name { font-size: 14px; color: var(--muted); }
.teaser-price { font-size: 30px; font-weight: 600; letter-spacing: -.03em; margin-top: 6px; }
.teaser-what { margin-top: 10px; font-size: 14px; color: var(--ink-2); }

/* --- Report grid on the short landing page ------------------------------- */
/* With the descriptions gone the cells are titles only, so they can be
   shorter and sit four to a row much earlier. */
.report-cell p:only-of-type { margin-top: 10px; }

/* --- Motion for the new pieces ------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .chooser-opt:hover { transform: translateX(3px); }
  .chooser-out { animation: rise-in-sm .35s ease-out; }
  .dock { animation: rise-in .4s cubic-bezier(.22,.8,.3,1) .3s backwards; }
  .teaser:hover .teaser-price { color: var(--accent-hi); }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .brief-cell, .def, .clauses li, .teaser, .toc-links {
      animation: rise-in .7s cubic-bezier(.22,.8,.3,1) both;
      animation-timeline: view();
      animation-range: entry 5% cover 26%;
    }
    .prose h2, .prose p { animation: fade-in .6s ease both;
      animation-timeline: view(); animation-range: entry 2% cover 20%; }
  }
}

/* The "n more included" disclosure inside a pricing card sits in the card's
   flow rather than spanning a form grid, so it does not want .more's
   full-width column or its dashed top rule. */
.feat-more { grid-column: auto; border-top: 0; padding-top: 14px; margin-top: 4px; }
.feat-more > summary { font-size: 13.5px; }

/* ═══════════════════════════════════════════════════════════════════════════
   EMPHASIS — the chooser and the CTAs
   The page was uniformly dark, so the two things a visitor is meant to DO
   looked exactly like the eight things they are meant to read. These rules
   give those two a surface of their own: a lit background, an animated border,
   and buttons that glow.

   Restraint matters here. Glow on everything is glow on nothing, and a
   security vendor's page that looks like a casino argues against itself — so
   the treatment is applied to exactly three places: the chooser, the booking
   panel, and the primary buttons.
   ══════════════════════════════════════════════════════════════════════════ */

/* --- Animated gradient border -------------------------------------------
 * A 1px-padded wrapper whose background is a rotating conic gradient, with
 * the real surface sitting inside it. The angle is a registered custom
 * property so it can be animated; `var(--ang, 0deg)` gives browsers without
 * @property support a static gradient border rather than no background at all.
 */
@property --ang {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
@keyframes spin-ang { to { --ang: 360deg; } }

.glow-frame {
  position: relative;
  padding: 1px;
  border-radius: calc(var(--radius) + 1px);
  background:
    conic-gradient(from var(--ang, 0deg),
      rgba(53,195,178,0)    0deg,
      rgba(53,195,178,.85) 45deg,
      rgba(111,224,210,.5) 80deg,
      rgba(53,195,178,0)  150deg,
      rgba(53,195,178,0)  360deg),
    var(--line-hi);
}
.glow-frame > * { border: 0 !important; }

/* The halo underneath. A separate pseudo-element so it can be blurred hard
   without touching the border above it. */
.glow-frame::after {
  content: ""; position: absolute; inset: 8px; z-index: -1;
  border-radius: inherit;
  background: rgba(53,195,178,.30);
  filter: blur(30px);
  opacity: .55;
  pointer-events: none;
}

/* --- A lit section ------------------------------------------------------- */
.spotlight { position: relative; overflow: hidden; }
.spotlight::before {
  content: ""; position: absolute; inset: -40% -10% auto -10%; height: 120%;
  background:
    radial-gradient(ellipse 55% 50% at 50% 0%, rgba(53,195,178,.16), transparent 70%),
    radial-gradient(ellipse 40% 40% at 85% 30%, rgba(79,70,229,.10), transparent 72%);
  pointer-events: none; z-index: 0;
}
.spotlight > .wrap { position: relative; z-index: 1; }

/* A hairline of light along the top edge, brightest in the middle. */
.spotlight::after {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(53,195,178,.65) 50%, transparent);
  pointer-events: none;
}

/* --- The chooser surface ------------------------------------------------- */
.chooser-panel {
  background: linear-gradient(180deg, #0f161b, #0c1216);
  border-radius: var(--radius);
  padding: clamp(20px, 3.4vw, 32px);
}
.chooser { margin-top: 0; }

.chooser-opt {
  background: rgba(255,255,255,.028);
  border-color: var(--line-hi);
}
.chooser-opt:hover {
  border-color: rgba(53,195,178,.55);
  box-shadow: 0 0 22px -10px rgba(53,195,178,.75);
}

/* The selected option and the answer panel both get a real glow, so the
   result of the click is unmistakable. */
#need-asked:checked     ~ .chooser-opts label[for="need-asked"],
#need-launch:checked    ~ .chooser-opts label[for="need-launch"],
#need-inherited:checked ~ .chooser-opts label[for="need-inherited"],
#need-attacked:checked  ~ .chooser-opts label[for="need-attacked"],
#need-always:checked    ~ .chooser-opts label[for="need-always"] {
  box-shadow: 0 0 0 1px var(--accent), 0 0 30px -10px rgba(53,195,178,.9);
}

.chooser-out {
  border-color: rgba(53,195,178,.5);
  background:
    radial-gradient(ellipse 80% 100% at 0% 0%, rgba(53,195,178,.16), transparent 70%),
    linear-gradient(160deg, rgba(53,195,178,.06), transparent 72%),
    var(--panel-2);
  box-shadow: 0 0 46px -22px rgba(53,195,178,.85), inset 0 1px 0 rgba(53,195,178,.18);
}

/* --- Buttons that glow --------------------------------------------------- */
.btn-primary {
  box-shadow: 0 0 0 1px rgba(53,195,178,.5), 0 8px 26px -12px rgba(53,195,178,.85);
}
.btn-primary:hover {
  box-shadow: 0 0 0 1px var(--accent-hi), 0 12px 40px -12px rgba(53,195,178,1);
}
.btn-wa {
  box-shadow: 0 0 0 1px rgba(37,211,102,.45), 0 8px 26px -12px rgba(37,211,102,.8);
}
.btn-wa:hover {
  box-shadow: 0 0 0 1px #3ae37a, 0 12px 40px -12px rgba(37,211,102,1);
}

/* A light sweeping across the button on hover. The pseudo-element is clipped
   by the button's own radius, so it never escapes the shape. */
.btn-primary, .btn-wa { position: relative; overflow: hidden; isolation: isolate; }
.btn-primary::after, .btn-wa::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(105deg,
    transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%);
  transform: translateX(-120%);
}

.dock-primary { box-shadow: 0 -2px 24px -8px rgba(53,195,178,.9); }
.dock-wa      { box-shadow: 0 -2px 24px -8px rgba(37,211,102,.8); }

/* --- The booking panel --------------------------------------------------- */
.final.spotlight .form-panel {
  background: linear-gradient(180deg, #0f161b, #0c1216);
}

@media (prefers-reduced-motion: no-preference) {
  .glow-frame { animation: spin-ang 7s linear infinite; }

  /* Breathing halo — very slow, so it reads as depth rather than as blinking. */
  @keyframes halo {
    0%, 100% { opacity: .40; }
    50%      { opacity: .75; }
  }
  .glow-frame::after { animation: halo 5s ease-in-out infinite; }

  .btn-primary::after, .btn-wa::after { transition: transform .65s cubic-bezier(.3,.7,.4,1); }
  .btn-primary:hover::after, .btn-wa:hover::after { transform: translateX(120%); }

  /* The single most important button on the page pulses gently until it has
     been hovered. One button, not all of them. */
  @keyframes cta-pulse {
    0%, 100% { box-shadow: 0 0 0 1px rgba(53,195,178,.5), 0 8px 26px -12px rgba(53,195,178,.85); }
    50%      { box-shadow: 0 0 0 1px rgba(111,224,210,.85), 0 12px 44px -10px rgba(53,195,178,1); }
  }
  .hero .btn-primary { animation: cta-pulse 3.4s ease-in-out infinite; }
  .hero .btn-primary:hover { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
  .glow-frame, .glow-frame::after, .hero .btn-primary { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   TRUST
   The visual weight of a logo wall, without borrowing anyone's logo. See the
   long note at the top of core/security_offer.py for why: every payment
   provider's trademark guidelines prohibit implying a partnership, and this
   company is mid-application with payment processors who read this site.

   What is here instead is stronger anyway — claims a stranger can verify in
   under a minute, which is the only thing that builds trust for a vendor with
   no testimonials yet.
   ══════════════════════════════════════════════════════════════════════════ */

.mt-32 { margin-top: 32px; }
.mt-40 { margin-top: 40px; }

/* --- Framework badges ---------------------------------------------------- */
.badges {
  margin-top: 32px; display: grid; gap: 14px;
}
@media (min-width: 640px)  { .badges { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1020px) { .badges { grid-template-columns: repeat(4, 1fr); } }

.badge {
  padding: 20px 18px; border-radius: var(--radius);
  background:
    linear-gradient(165deg, rgba(53,195,178,.07), transparent 65%),
    var(--panel);
  border: 1px solid var(--line);
  border-top: 2px solid rgba(53,195,178,.55);
}
.badge-name { font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.badge-ref {
  margin-top: 5px; font-family: ui-monospace, Menlo, monospace;
  font-size: 11.5px; letter-spacing: .04em; color: var(--accent);
}
.badge-what { margin-top: 11px; font-size: 13.5px; color: var(--muted); line-height: 1.5; }

/* --- The disclaimer under a badge or wordmark grid -----------------------
 * Styled to be read, not hidden. A caption that quietly limits a claim is the
 * difference between a true page and a misleading one, so it gets a border
 * and real contrast rather than 11px grey.
 */
.disclaim {
  margin-top: 26px; padding: 16px 20px;
  border-left: 2px solid var(--line-hi); border-radius: 0 8px 8px 0;
  background: rgba(255,255,255,.022);
  font-size: 14px; color: var(--muted); max-width: 78ch;
}

/* --- Who asks ------------------------------------------------------------ */
.asks { padding: 18px 20px; border-radius: var(--radius-sm);
        background: var(--panel); border: 1px solid var(--line); }
.asks-k { font-size: 15px; font-weight: 600; color: var(--accent-hi); }
.asks-v { margin-top: 8px; font-size: 14px; color: var(--muted); }

/* --- Wordmark rows -------------------------------------------------------
 * The logo-wall layout, set in type. Each name is a chip, so the block scans
 * like a logo strip at a glance while remaining plain text that infringes
 * nothing and never 404s a remote image.
 */
.wordmarks {
  margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line);
  display: grid; gap: 14px;
}
@media (min-width: 860px) { .wordmarks { grid-template-columns: 190px 1fr; gap: 28px; align-items: start; } }
.wordmarks-k {
  font-size: 12px; font-weight: 600; letter-spacing: .13em;
  text-transform: uppercase; color: var(--muted); padding-top: 8px;
}
.wordmarks-list { display: flex; flex-wrap: wrap; gap: 9px; }
.wordmarks-list li {
  padding: .58rem .95rem; border-radius: 9px;
  background: var(--panel-2); border: 1px solid var(--line-hi);
  font-size: 14.5px; font-weight: 500; color: var(--ink-2);
  letter-spacing: -.01em;
  transition: border-color .18s ease, color .18s ease, transform .18s ease;
}

/* --- Verify cells -------------------------------------------------------- */
.verify-cell {
  display: flex; flex-direction: column;
  padding: 26px 24px; border-radius: var(--radius);
  background: var(--panel); border: 1px solid var(--line);
}
.verify-cell h3 { font-size: 16.5px; margin: 16px 0 10px; }
.verify-cell p { font-size: 14.5px; color: var(--muted); flex: 1 1 auto; }
.verify-link {
  margin-top: 16px; align-self: flex-start;
  font-size: 13.5px; font-weight: 600; color: var(--accent-hi);
  text-decoration: none; border-bottom: 1px solid rgba(111,224,210,.35);
  padding-bottom: 2px;
}
.verify-link:hover { border-bottom-color: var(--accent-hi); }

@media (prefers-reduced-motion: no-preference) {
  .wordmarks-list li:hover {
    border-color: rgba(53,195,178,.5); color: var(--ink); transform: translateY(-2px);
  }
  .verify-cell { transition: border-color .22s ease, transform .22s ease; }
  .verify-cell:hover { border-color: var(--line-hi); transform: translateY(-3px); }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .badge, .asks, .verify-cell, .wordmarks {
      animation: rise-in .7s cubic-bezier(.22,.8,.3,1) both;
      animation-timeline: view(); animation-range: entry 5% cover 26%;
    }
  }
}

/* --- Proof strip and the acceptance block --------------------------------
 * Named third parties, set as type rather than as logos — see the note at the
 * top of core/security_offer.py. Truthful referential use of a name is fine;
 * a logo wall is what implies the partnership that does not exist.
 */
.proof {
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(ellipse 60% 140% at 50% 50%, rgba(53,195,178,.10), transparent 72%),
    var(--panel);
}
.proof-in {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px;
  padding-block: 18px;
}
.proof-k {
  font-size: 12px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted);
}
.proof-names { display: flex; flex-wrap: wrap; gap: 10px; }
.proof-names li {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .45rem .85rem; border-radius: 8px;
  background: rgba(53,195,178,.08); border: 1px solid rgba(53,195,178,.32);
  font-size: 15px; font-weight: 600; color: var(--ink); letter-spacing: -.01em;
}
.proof-names .icon { width: 14px; height: 14px; color: var(--accent); }
.proof-more {
  margin-left: auto; font-size: 13px; color: var(--muted);
  text-underline-offset: 4px; white-space: nowrap;
}
.proof-more:hover { color: var(--accent-hi); }

.accepted { margin-top: 32px; display: grid; gap: 16px; }
@media (min-width: 700px) { .accepted { grid-template-columns: repeat(3, 1fr); } }
.accepted-cell {
  padding: 26px 24px; border-radius: var(--radius);
  background:
    radial-gradient(ellipse 90% 120% at 0% 0%, rgba(53,195,178,.13), transparent 68%),
    var(--panel);
  border: 1px solid rgba(53,195,178,.30);
}
.accepted-tick {
  display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: 50%; background: rgba(53,195,178,.15);
  border: 1px solid rgba(53,195,178,.45); color: var(--accent);
}
.accepted-tick .icon { width: 16px; height: 16px; }
.accepted-name {
  margin-top: 16px; font-size: 21px; font-weight: 600; letter-spacing: -.02em;
}
.accepted-what { margin-top: 6px; font-size: 13.5px; color: var(--muted); }

@media (prefers-reduced-motion: no-preference) {
  .proof-names li, .accepted-cell {
    transition: border-color .2s ease, transform .2s ease;
  }
  .accepted-cell:hover { border-color: rgba(53,195,178,.6); transform: translateY(-3px); }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .accepted-cell {
      animation: rise-in .7s cubic-bezier(.22,.8,.3,1) both;
      animation-timeline: view(); animation-range: entry 5% cover 26%;
    }
  }
}

/* --- Payment mark --------------------------------------------------------
 * The Stripe wordmark, official white variant, unmodified — no filter, no
 * recolour, no cropping. It appears here and nowhere else: see the note in
 * core/security_offer.py for the clause that decides where a third-party mark
 * may sit on this page.
 */
.paybar {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  margin-top: 22px; padding: 16px 20px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: rgba(255,255,255,.022);
}
.paybar > div { flex: 1 1 220px; }
.paymark {
  width: 92px; height: auto; flex: none;
  opacity: .92;
}

/* --- Breadcrumb ---------------------------------------------------------- */
/* Sits between the masthead and the sub-navigation on the method and guide
   pages, mirroring the BreadcrumbList emitted in JSON-LD. */
.crumbs { padding-block: 10px; }
.crumbs ol {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  list-style: none; margin: 0; padding: 0; font-size: 13px; color: var(--muted);
}
.crumbs li { display: inline-flex; align-items: center; gap: 6px; }
.crumbs li + li::before { content: "/"; color: var(--line-hi); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }
.crumbs [aria-current="page"] { color: var(--ink-2); }

/* --- Guide: the short answer -------------------------------------------- */
/* The passage that answers the page's title question outright. Deliberately
   the first thing under the H1: a reader who wants only the number gets it,
   and an answer engine has one self-contained paragraph to quote. */
.answer-box {
  margin-top: 26px; padding: 20px 22px;
  background: var(--panel); border: 1px solid var(--line);
  border-left: 3px solid var(--accent); border-radius: var(--radius);
}
.answer-label {
  margin: 0 0 6px; font-size: 12px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--accent);
}
.answer-text { margin: 0; font-size: 16px; line-height: 1.65; color: var(--ink); }

/* --- Guide: read next ---------------------------------------------------- */
.next-grid { display: grid; gap: 16px; margin-top: 22px; }
@media (min-width: 700px) { .next-grid { grid-template-columns: repeat(2, 1fr); } }
.next-card {
  display: flex; flex-direction: column; gap: 8px; height: 100%;
  padding: 22px; text-decoration: none;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); transition: border-color .15s ease;
}
.next-card:hover { border-color: var(--line-hi); }
.next-title { margin: 0; font-weight: 600; font-size: 16px; color: var(--ink); }
.next-lede { margin: 0; font-size: 14px; line-height: 1.6; color: var(--muted); }
.next-go { margin-top: auto; padding-top: 6px; font-size: 14px; color: var(--accent); }