/* ============================================================
   Refresh layer - same layout, different character.
   Loaded after styles.css on the marketing pages only. Removes the
   stock "AI landing page" tells (gradient headline, glowing pills,
   tinted icon chips, ghost numbers, blobs, grain, hover lifts) and
   gives the site a printed-report feel: serif headings, squared
   corners, hairline rules, a solid-colour accent. Delete the <link>
   and the site is back to the old look.

   App pages (dashboard, onboarding) carry <body class="ms-app">: they take
   the fonts, tokens, buttons and nav, but not the marketing card rules -
   several class names (.step, .plan, .dns-card, .flow-node) mean
   something else in the app.
   ============================================================ */

@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url('assets/fonts/sourceserif4-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
  src: url('assets/fonts/sourceserif4-latin-italic.woff2') format('woff2');
}
/* Body: IBM Plex Sans - squared terminals, not Manrope's rounded geometry. */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url('assets/fonts/plexsans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url('assets/fonts/plexsans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/plexmono-latin-400.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/plexmono-latin-500.woff2') format('woff2');
}

/* ---------- tokens ---------- */
:root {
  --font: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Source Serif 4", Georgia, "Times New Roman", serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  /* Squared, not soft: a report, not an app store tile. */
  --r-sm: 3px; --r: 5px; --r-lg: 7px; --r-xl: 9px; --pill: 4px;
  --glow: 0 0 0 1px rgba(var(--brand-rgb),.55);
  --sh-2: 0 1px 0 rgba(0,0,0,.25), 0 10px 24px -18px rgba(0,0,0,.7);
  --sh-3: 0 1px 0 rgba(0,0,0,.25), 0 24px 48px -30px rgba(0,0,0,.8);
}

/* ---------- page surface: flat, no glow wash, no grain ---------- */
html { background-image: none; }
.hero-bg, .hero-grid, .cta-band .glowb { display: none; }

/* ---------- type ---------- */
h1, h2, h3, h4 { font-weight: 600; letter-spacing: -.012em; line-height: 1.12; }
.hero h1, .hero-split h1 { font-weight: 600; letter-spacing: -.02em; line-height: 1.06; }
.brand, .brand-hero-text b { font-family: var(--font); }

/* The accent line: one solid colour, not gradient text. */
.grad-text, .brand-hero-text .grad {
  background: none; -webkit-background-clip: border-box; background-clip: border-box;
  color: var(--brand-2);
}
.brand-hero-text .grad { color: var(--brand-2); }

/* Eyebrow: sentence case with a square marker, no tracked caps, no dash. */
.eyebrow {
  font-family: var(--font); font-size: 14px; font-weight: 600;
  letter-spacing: 0; text-transform: none; gap: 10px;
}
.eyebrow::before, .section-head.center .eyebrow::before {
  display: inline-block; width: 7px; height: 7px; opacity: 1; background: currentColor;
}

/* Small labels that used tracked uppercase */
body:not(.ms-app) .reads p, body:not(.ms-app) .flow-col-label, body:not(.ms-app) .flow-gate .fg-tap, body:not(.ms-app) .hp-kpi span, body:not(.ms-app) .mini-kpi .l, body:not(.ms-app) .sc-group-h, body:not(.ms-app) .price-table thead th, body:not(.ms-app) .pa-tag {
  text-transform: none; letter-spacing: 0;
}
body:not(.ms-app) .reads p { font-family: var(--font); font-size: 13.5px; }
body:not(.ms-app) .footer-col h4 {
  font-family: var(--font-display); font-weight: 600; font-size: 16px;
  text-transform: none; letter-spacing: 0; color: var(--ink);
  padding-bottom: 10px; border-bottom: 1px solid var(--line); margin-bottom: 12px;
}

/* Big numbers: serif, solid ink, tabular */
body:not(.ms-app) .stat .num {
  font-weight: 600; letter-spacing: -.02em;
  background: none; -webkit-background-clip: border-box; background-clip: border-box;
  color: var(--ink); font-variant-numeric: tabular-nums lining-nums;
}
body:not(.ms-app) .plan .price .amt, body:not(.ms-app) .cell-price .price-amt, body:not(.ms-app) .hp-kpi b, body:not(.ms-app) .mini-kpi .v, body:not(.ms-app) .sc-grade, body:not(.ms-app) .sc-score-line b {
  font-weight: 600; font-variant-numeric: tabular-nums lining-nums;
}

/* ---------- buttons: squared, flat, a pressed-key edge, no glow ---------- */
.btn { border-radius: var(--r); font-weight: 600; letter-spacing: .005em; }
.btn--primary {
  background: var(--grad-brand); box-shadow: inset 0 -2px 0 rgba(0,0,0,.22), 0 0 0 1px rgba(0,0,0,.18);
}
.btn--primary:hover, .btn--ghost:hover, .btn--light:hover { transform: none; }
.btn--primary:hover { box-shadow: inset 0 -2px 0 rgba(0,0,0,.22), 0 0 0 1px rgba(0,0,0,.18); filter: brightness(1.1); }
.btn--primary:active { box-shadow: inset 0 1px 0 rgba(0,0,0,.25); transform: translateY(1px); }
.btn--ghost { background: transparent; }
.panel-hint, .hero-visual .float-badge { box-shadow: none; }

/* ---------- nav: a solid bar, not frosted glass ---------- */
.nav.scrolled { backdrop-filter: none; background: var(--bg); }
:root[data-theme="sand"] .nav.scrolled { background: var(--bg); }
.nav-links a:not(.btn)::after { display: none; }
.nav-links a:not(.btn):hover { color: var(--ink); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.brand svg, .brand img { filter: none; }
.brand:hover img { transform: none; filter: none; }

/* ---------- badges and tags: squared labels, no pulsing dots ---------- */
body:not(.ms-app) .hero .pill-badge { border-radius: var(--r-sm); background: transparent; padding: 6px 12px 6px 10px; }
body:not(.ms-app) .pill-badge .dot { border-radius: 1px; width: 7px; height: 7px; box-shadow: none; animation: none; }
body:not(.ms-app) .hpb-live i { animation: none; box-shadow: none; }
body:not(.ms-app) .pa-dot { animation: none; }
/* "Most popular" / "Your privacy": a tab hanging off the card's top edge. */
body:not(.ms-app) .triad-tag, body:not(.ms-app) .plan .tag {
  top: -1px; border-radius: 0 0 var(--r-sm) var(--r-sm);
  padding: 4px 11px 5px; font-size: 11.5px;
}

/* ---------- cards: flat paper, hairline border, no glowing edge, no lift ---------- */
body:not(.ms-app) .feature, body:not(.ms-app) .triad-card, body:not(.ms-app) .plan {
  border: 1px solid var(--line-2);
  background: var(--surface);
  box-shadow: none;
}
body:not(.ms-app) .hero-panel { border: 1px solid var(--line-2); background: var(--surface); }
body:not(.ms-app) .scorecard { border: 1px solid var(--line-2); background: var(--surface-2); }
body:not(.ms-app) .step, body:not(.ms-app) .dns-card { border: 1px solid var(--paper-line); background: #fff; }
:root[data-theme="sand"] body:not(.ms-app) .step, :root[data-theme="sand"] body:not(.ms-app) .dns-card, :root[data-theme="moss"] body:not(.ms-app) .step, :root[data-theme="moss"] body:not(.ms-app) .dns-card { background: var(--paper); }

body:not(.ms-app) .feature:hover, body:not(.ms-app) .triad-card:hover, body:not(.ms-app) .plan:hover, body:not(.ms-app) .stat:hover, body:not(.ms-app) .step:hover, body:not(.ms-app) .gp-card:hover, body:not(.ms-app) .gp-card[aria-expanded="true"], body:not(.ms-app) .flow-node:hover, body:not(.ms-app) .flow-node.hl, body:not(.ms-app) .flow-gate:hover, body:not(.ms-app) .bonus-strip:hover, body:not(.ms-app) .hero-visual .hero-panel:hover, body:not(.ms-app) .dns-head .dns-tag:hover, body:not(.ms-app) .dns-explain:hover, body:not(.ms-app) .founder-li:hover, body:not(.ms-app) .social-link:hover, body:not(.ms-app) .infra-strip li:hover {
  transform: none;
}
body:not(.ms-app) .feature:hover, body:not(.ms-app) .triad-card:hover, body:not(.ms-app) .plan:hover, body:not(.ms-app) .gp-card:hover {
  box-shadow: none; border-color: color-mix(in srgb, var(--brand) 60%, var(--line-2));
}
body:not(.ms-app) .hero-visual .hero-panel:hover { box-shadow: var(--sh-3); }
body:not(.ms-app) .triad-card.featured, body:not(.ms-app) .plan.featured {
  box-shadow: none; border-color: color-mix(in srgb, var(--brand) 70%, transparent);
  border-top-width: 3px;
}
body:not(.ms-app) .triad-card.featured:hover { box-shadow: none; }
body:not(.ms-app) .gp-card[aria-expanded="true"] { box-shadow: none; background: var(--surface); border-color: var(--brand); }

/* Card numbers: a small typeset label, not a giant ghost digit. */
body:not(.ms-app) .triad-card .num {
  top: 22px; right: 22px; font-family: var(--mono); font-weight: 500; font-size: 12px;
  color: var(--muted); padding: 2px 6px; border: 1px solid var(--line-2); border-radius: 2px;
}
body:not(.ms-app) .step::before {
  content: "Step " counter(s); top: 22px; right: 22px;
  font-family: var(--mono); font-weight: 500; font-size: 12px; color: var(--paper-ink-2);
}
body:not(.ms-app) .step:hover::before { color: var(--brand); }

/* ---------- icons: outlined frames instead of tinted chips ---------- */
body:not(.ms-app) .feature .ico, body:not(.ms-app) .triad-ico, body:not(.ms-app) .trust-ic, body:not(.ms-app) .guard-promo-item .gp-ic, body:not(.ms-app) .hero-assure .ha-ico, body:not(.ms-app) .trust-hero-assure .ha-ico, body:not(.ms-app) .bonus-gift, body:not(.ms-app) .result-icon, body:not(.ms-app) .sc-ic, body:not(.ms-app) .mf-ic, body:not(.ms-app) .fn-ic {
  background: transparent; border: 1px solid var(--line-2); border-radius: var(--r-sm); box-shadow: none;
}
body:not(.ms-app) .triad-ico.problem { border-color: color-mix(in srgb, var(--red) 45%, transparent); }
body:not(.ms-app) .triad-ico.fix { border-color: color-mix(in srgb, var(--sky) 40%, transparent); }
body:not(.ms-app) .triad-ico.privacy { background: transparent; color: var(--brand-2); border-color: color-mix(in srgb, var(--brand) 60%, transparent); }
body:not(.ms-app) .step .ico { border-radius: var(--r-sm); box-shadow: none; }
body:not(.ms-app) .step:hover .ico { transform: none; box-shadow: none; }
body:not(.ms-app) .fg-ic { border-radius: var(--r-sm); box-shadow: none; }
body:not(.ms-app) .gp-card:hover .gp-ic, body:not(.ms-app) .gp-card[aria-expanded="true"] .gp-ic { transform: none; }
body:not(.ms-app) .preview-list .chk { background: transparent; border: 1px solid color-mix(in srgb, var(--brand) 50%, transparent); border-radius: 2px; }

/* ---------- decorative motion off; functional motion (flow, charts) stays ---------- */
body:not(.ms-app) .hero-panel::after, body:not(.ms-app) .hp-plot-clip::after, body:not(.ms-app) .premium-band::before { display: none; }
body:not(.ms-app) .hero-visual .float-badge { animation: none; }
body:not(.ms-app) .hp-row.crit .tag { animation: none; }
body:not(.ms-app) .reveal { transform: none; }

/* ---------- smaller details ---------- */
body:not(.ms-app) .checker-card { background: var(--surface); }
body:not(.ms-app) .checker-input { border-radius: var(--r-sm); border-color: var(--line); }
body:not(.ms-app) .hero-assure, body:not(.ms-app) .trust-hero-assure, body:not(.ms-app) .founder, body:not(.ms-app) .trust-cta {
  background: transparent; border-left: 3px solid var(--brand);
}
body:not(.ms-app) .founder-av { box-shadow: none; border-radius: var(--r); }
body:not(.ms-app) .founder-text p { font-family: var(--font-display); font-size: 19px; }
body:not(.ms-app) .cta-band { background: var(--surface); border-top: 3px solid var(--brand); }
body:not(.ms-app) .premium-band { box-shadow: none; background: var(--surface); }
body:not(.ms-app) .premium-ribbon, body:not(.ms-app) .gift-ribbon { box-shadow: none; }
body:not(.ms-app) .bonus-strip { background: transparent; border-style: dashed; }
body:not(.ms-app) .faq-item { border-radius: 0; border-width: 0 0 1px; background: transparent; }
body:not(.ms-app) .faq { gap: 0; border-top: 1px solid var(--line); }
body:not(.ms-app) .faq-q { font-weight: 600; padding-left: 4px; padding-right: 4px; }
body:not(.ms-app) .faq-a p { padding-left: 4px; padding-right: 4px; }
body:not(.ms-app) .faq-q .plus::before, body:not(.ms-app) .faq-q .plus::after { border-radius: 0; }
body:not(.ms-app) .faq-q .plus::before { height: 1.5px; } body:not(.ms-app) .faq-q .plus::after { width: 1.5px; }
body:not(.ms-app) .compare { border-radius: var(--r); }
body:not(.ms-app) .cur-toggle { border-radius: var(--r); }
body:not(.ms-app) .cur-glider, body:not(.ms-app) .cur-toggle button { border-radius: var(--r-sm); }
body:not(.ms-app) .legal a, body:not(.ms-app) .stat-link:hover, body:not(.ms-app) .step-link:hover { text-decoration-thickness: 1px; }
:focus-visible { outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--brand) 40%, transparent); }
/* Gold bands: keep the amber edge, drop the halo and the shine sweep. */
body:not(.ms-app) .guard-band, body:not(.ms-app) .guard-band--gift { box-shadow: none; }
body:not(.ms-app) .guard-band--gift { background: linear-gradient(180deg, color-mix(in srgb, var(--amber) 7%, transparent), transparent), var(--surface); }
body:not(.ms-app) .guard-band--gift::before { display: none; }
/* Sign-in / sign-up aside: no glow blobs. */
.auth-glow { display: none; }
/* Panel KPI cards: keep the delta on one line on a phone. */
.hp-kpi-foot em { white-space: nowrap; }
@media (max-width: 480px) { .hp-kpi-foot { gap: 4px; } .hp-spark { width: 34px; } }

/* ---------- panel headers: a centred caption, not a browser or OS title bar ----------
   No tinted strip, no URL, no "Live" light. The bar names what the panel shows,
   centred between two hairlines, the way a figure is captioned in a report. */
.hero-panel-bar, body:not(.ms-app) .record-head {
  position: relative; justify-content: center; gap: 14px;
  background: transparent; border-bottom: 0; padding: 15px 18px 3px;
}
.hero-panel-bar::before, .hero-panel-bar::after,
body:not(.ms-app) .record-head::before, body:not(.ms-app) .record-head::after {
  content: ""; flex: 1 1 0; min-width: 16px; height: 1px; background: var(--line-2);
}
.panel-title, body:not(.ms-app) .record-head > span {
  flex: none; font-family: var(--font-display); font-weight: 600; font-size: 14.5px;
  letter-spacing: 0; color: var(--ink); white-space: nowrap;
}
/* Guide records: Copy sits at the right edge, out of the caption's way. */
body:not(.ms-app) .record-head { padding: 12px 86px 2px; min-height: 46px; }
body:not(.ms-app) .record-copy { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); border-radius: var(--r-sm); }
body:not(.ms-app) .record code { padding-top: 12px; }
@media (max-width: 480px) {
  .panel-title, body:not(.ms-app) .record-head > span { font-size: 13.5px; white-space: normal; text-align: center; }
}

/* The DNS record card: tag left, caption centred, button right. */
body:not(.ms-app) .dns-head {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px;
  background: transparent;
}
body:not(.ms-app) .dns-head .dns-tag { justify-self: start; border-radius: var(--r-sm); }
body:not(.ms-app) .dns-head .dns-title {
  font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--paper-ink); text-align: center;
}
body:not(.ms-app) .dns-explain {
  justify-self: end; margin-left: 0; font-family: var(--font); font-size: 14.5px; font-weight: 600;
  border-radius: var(--r); box-shadow: inset 0 -2px 0 rgba(0,0,0,.22);
}
body:not(.ms-app) .dns-explain:hover { box-shadow: inset 0 -2px 0 rgba(0,0,0,.22); }
@media (max-width: 860px) {
  body:not(.ms-app) .dns-head { grid-template-columns: auto 1fr; }
  body:not(.ms-app) .dns-head .dns-title { text-align: left; }
  body:not(.ms-app) .dns-explain { grid-column: 1 / -1; justify-self: stretch; justify-content: center; margin: 4px 0 0; }
}
/* The floating "Live monitoring" pill sat over the panel's caption. */
.hero-visual .float-badge { display: none; }