/* ══════════════════════════════════════════════════════════════════════════
   NetScope

   Three decisions carry this design, and everything else follows from them.

   1. The answer is the page. It is set enormous, in a real display face, and
      given room to breathe. Everything else is deliberately quiet so that one
      number lands. A page where the headline and the data are the same weight
      is a page nobody can read at a glance, and a glance is all most people
      give this.

   2. Warm black and gold, not blue grey. Blue grey with a blue accent is what
   every dashboard defaults to. Gold on near black reads as considered rather
   than generated.

   3. Figures are monospaced and tabular everywhere. Prices sit in a column and
      the decimal points line up, so two numbers can be compared by eye without
      reading either of them. That single detail is most of the difference
      between a finance tool that feels professional and one that does not.

   Phone first throughout. Most people checking a connection are standing up.
   ══════════════════════════════════════════════════════════════════════════ */

/* Light is the default theme. Dark is applied only when the visitor picks it with
   the sun / moon button; the choice is remembered in localStorage.
   Modern palette: cool white surfaces, indigo to violet accent, soft layered shadows.
   The old variable names (--gold*) are kept so every component follows automatically. */
:root {
  color-scheme: light;

  --bg:      #ffffff;
  --raise:   #ffffff;
  --raise-2: #fff5f5;
  --hair:    #f3e1e1;
  --hair-2:  #ead0d0;

  --ink:     #1c1114;
  --ink-2:   #4a3a3e;
  --ink-3:   #7a6a6e;

  --gold:      #e11d48;      /* accent fills (kept name so every component follows) */
  --gold-ink:  #be123c;      /* accent used as text */
  --gold-d:    #9f1239;
  --gold-rgb:  225, 29, 72;
  --gold-t:    rgba(225, 29, 72, .08);
  --gold-hover:#be123c;
  --on-gold:   #ffffff;

  --violet-rgb: 244, 63, 94;
  --grad:      linear-gradient(135deg, #f43f5e 0%, #e11d48 48%, #9f1239 100%);
  --grad-hd:   linear-gradient(105deg, #ef4444 0%, #e11d48 45%, #9f1239 100%);
  --grad-text: linear-gradient(120deg, #f43f5e 0%, #e11d48 55%, #9f1239 110%);

  --mint:      #059669;
  --mint-rgb:  5, 150, 105;
  --coral:     #e11d48;

  --bg-rgb:    255, 255, 255;
  --shadow:    0 1px 2px rgba(120, 20, 40, .05), 0 10px 28px rgba(120, 20, 40, .07);
  --shadow-lg: 0 2px 4px rgba(120, 20, 40, .05), 0 22px 46px rgba(225, 29, 72, .18);

  --r-s: 10px;
  --r-m: 16px;
  --r-l: 26px;

  --display: "Plus Jakarta Sans", "Inter", ui-sans-serif, system-ui, sans-serif;
  --body:    "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono:    "Inter", ui-sans-serif, system-ui, sans-serif;

  --wrap: 1180px;
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --bg:      #090c18;
  --raise:   #11152a;
  --raise-2: #181d38;
  --hair:    #232945;
  --hair-2:  #2f3658;

  --ink:     #f2f4ff;
  --ink-2:   #aab0cf;
  --ink-3:   #7f86a8;

  --gold:      #fb7185;
  --gold-ink:  #fda4af;
  --gold-d:    #e11d48;
  --gold-rgb:  129, 140, 248;
  --gold-t:    rgba(225, 29, 72, .13);
  --gold-hover:#e11d48;
  --on-gold:   #ffffff;

  --grad:      linear-gradient(135deg, #e11d48 0%, #f43f5e 100%);
  --grad-text: linear-gradient(120deg, #fda4af 0%, #fecdd3 55%, #fdba74 110%);

  --mint:      #34d399;
  --mint-rgb:  52, 211, 153;
  --coral:     #fb7185;

  --bg-rgb:    9, 12, 24;
  --shadow:    0 1px 2px rgba(0, 0, 0, .35), 0 10px 28px rgba(0, 0, 0, .28);
  --shadow-lg: 0 2px 4px rgba(0, 0, 0, .4), 0 22px 48px rgba(225, 29, 72, .22);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* a barely there wash behind the top of the page, so the hero does not sit
     on flat black */
  background-image: radial-gradient(90rem 40rem at 50% -18rem, rgba(var(--gold-rgb), .07), transparent 70%);
  background-repeat: no-repeat;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
p { margin: 0 0 1em; }
button, input { font-family: inherit; }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.15;
}

/* Every figure on the site. Tabular so columns of prices line up on the
   decimal point and can be compared without being read. */
.fig { font-family: var(--mono); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.wrap.narrow { max-width: 740px; }

/* Small caps labels, used everywhere a field needs naming without shouting. */
.eyebrow {
  font-family: var(--body);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ── header ──────────────────────────────────────────────────────────────── */

.hd {
  position: sticky; top: 0; z-index: 40;
  border-bottom: 1px solid var(--hair);
  background: rgba(var(--bg-rgb), .86);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
}
.hd-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 62px; }

.brand { display: flex; align-items: center; gap: 10px; }
.brand img { max-height: 30px; width: auto; }
.brand .mark {
  width: 30px; height: 30px; flex: 0 0 30px;
  display: grid; place-items: center;
  border-radius: 8px;
  background: linear-gradient(150deg, var(--gold), var(--gold-d));
  color: var(--on-gold);
  font-family: var(--display); font-weight: 700; font-size: 17px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .22) inset;
}
.brand .bn {
  font-family: var(--display); font-weight: 600; font-size: 18px; letter-spacing: -.03em;
}

.hd-nav { display: flex; gap: 4px; }
.hd-nav a {
  position: relative;
  padding: 8px 12px;
  font-size: 14px; font-weight: 500;
  color: var(--ink-2);
  border-radius: var(--r-s);
}
.hd-nav a:hover { color: var(--ink); }
.hd-nav a.on { color: var(--ink); }
.hd-nav a.on::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px;
  height: 2px; background: var(--gold);
}

/* ── hero ────────────────────────────────────────────────────────────────── */

.hero { padding: 34px 0 4px; }
.hero h1 {
  font-size: clamp(27px, 6.4vw, 46px);
  line-height: 1.08;
  max-width: 17ch;
  margin-bottom: 12px;
}
.hero h1 em { font-style: normal; color: var(--gold-ink); }
.hero .lede {
  color: var(--ink-2);
  font-size: 15.5px;
  max-width: 54ch;
  margin: 0 0 16px;
}

.stamp {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .01em;
  color: var(--ink-3);
  border: 1px solid var(--hair); border-radius: 999px;
  padding: 5px 13px;
}
.stamp .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--mint);
  box-shadow: 0 0 0 3px rgba(var(--mint-rgb), .13);
  animation: breathe 2.6s ease-in-out infinite;
}
@keyframes breathe { 50% { opacity: .3; transform: scale(.85); } }
.stamp .warn { color: var(--gold-ink); }

/* ── the headline figure ─────────────────────────────────────────────────── */

/* The one number people came for, given the room it deserves. Everything else
   on the page is sized against this. */
.lead-rate {
  margin: 24px 0 12px;
  border: 1px solid var(--hair);
  border-radius: var(--r-l);
  background:
    linear-gradient(180deg, rgba(var(--gold-rgb), .06), transparent 42%),
    var(--raise);
  padding: 22px 22px 20px;
  position: relative;
  overflow: hidden;
}
.lead-rate::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--gold-rgb), .5), transparent);
}
.lr-k { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.lr-v {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: clamp(38px, 12vw, 68px);
  font-weight: 700; letter-spacing: -.045em; line-height: 1;
  color: var(--ink);
}
.lr-v small { font-size: .42em; font-weight: 500; color: var(--ink-3); letter-spacing: 0; margin-left: 6px; }
.lr-s { margin-top: 10px; font-size: 13.5px; color: var(--ink-2); }
.lr-s b { color: var(--gold-ink); font-weight: 600; }

/* the three supporting figures */
/* Stacked rows on a phone, label on one side and figure on the other. Three
   columns across 390px left about a hundred pixels each, which is not enough
   for a long number and broke every one of them onto two lines. */
.stats {
  display: grid; grid-template-columns: 1fr; gap: 1px;
  background: var(--hair); border: 1px solid var(--hair);
  border-radius: var(--r-m); overflow: hidden;
}
.stat {
  background: var(--raise); padding: 12px 15px; min-width: 0;
  display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 4px 14px;
}
.stat .k { grid-row: 1; }
.stat .v {
  grid-row: 1; grid-column: 2; text-align: right;
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 17px; font-weight: 600; letter-spacing: -.03em;
  white-space: nowrap;
}
.stat .s { grid-row: 2; grid-column: 1 / -1; font-size: 11.5px; color: var(--ink-3); line-height: 1.4; }
.stat.sell .v { color: var(--mint); }
.stat.gap  .v { color: var(--gold-ink); }

/* ── section heads, numbered ─────────────────────────────────────────────── */

/* The number, the heading and the aside. On a phone the aside drops to its own
   line rather than fighting the heading for width, which was breaking the
   heading into one word per line. */
.sec-h {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 4px 12px;
  margin: 44px 0 16px; padding-bottom: 12px;
  border-bottom: 1px solid var(--hair);
}
.sec-h .no {
  font-family: var(--mono); font-size: 11.5px; color: var(--gold-d);
  letter-spacing: .05em;
}
.sec-h h2 { font-size: 20px; min-width: 0; }
.sec-h > span:not(.no) {
  grid-column: 2;
  font-size: 12.5px; color: var(--ink-3); line-height: 1.5;
}

/* ── comparison cards ────────────────────────────────────────────────────── */

.board { display: grid; grid-template-columns: 1fr; gap: 10px; }

.ex {
  border: 1px solid var(--hair);
  border-radius: var(--r-m);
  background: var(--raise);
  overflow: hidden;
  transition: border-color .16s ease;
}
.ex:hover { border-color: var(--hair-2); }
.ex.is-best { border-color: rgba(var(--gold-rgb), .38); }

.ex-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 15px; }
.ex-h h3 { font-size: 16.5px; display: inline; margin-right: 9px; }
.tag {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3); border: 1px solid var(--hair-2); border-radius: 3px; padding: 2px 6px;
}
.go {
  font-size: 12.5px; font-weight: 500; color: var(--ink-2);
  border: 1px solid var(--hair-2); border-radius: var(--r-s);
  padding: 6px 12px; white-space: nowrap; transition: all .16s ease;
}
.go:hover { color: var(--on-gold); background: var(--gold); border-color: var(--gold); }

.ex-p { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--hair); }
.ex-p .p { padding: 12px 15px 13px; position: relative; }
.ex-p .p + .p { border-left: 1px solid var(--hair); }
.ex-p .p b {
  display: block; margin-top: 4px;
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 20px; font-weight: 600; letter-spacing: -.035em;
  overflow-wrap: anywhere;
}
.ex-p .p i {
  display: inline-block; margin-top: 6px; font-style: normal;
  font-family: var(--body); font-size: 9.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: #12180f; background: var(--mint); border-radius: 3px; padding: 2px 6px;
}
.ex-p .p.best { background: rgba(var(--mint-rgb), .045); }

.ex-more { border-top: 1px solid var(--hair); }
.ex-more summary {
  padding: 10px 15px; font-size: 12.5px; color: var(--ink-3);
  cursor: pointer; list-style: none; user-select: none;
}
.ex-more summary::-webkit-details-marker { display: none; }
.ex-more summary::after { content: "  ↓"; font-family: var(--mono); }
.ex-more[open] summary::after { content: "  ↑"; }
.ex-more summary:hover { color: var(--ink-2); }
.offers { display: grid; grid-template-columns: 1fr; gap: 16px; padding: 2px 15px 15px; }
.offers h4 { font-family: var(--body); font-size: 10.5px; font-weight: 600; letter-spacing: .14em;
             text-transform: uppercase; color: var(--ink-3); margin-bottom: 7px; }
.o { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
     padding: 6px 0; border-bottom: 1px solid var(--hair); font-size: 13px; }
.o:last-child { border-bottom: 0; }
.o-n { color: var(--ink-2); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.o-p { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 600; }
.o-l { width: 100%; font-family: var(--mono); font-size: 11px; color: var(--ink-3); }

/* ── calculator ──────────────────────────────────────────────────────────── */

.calc { border: 1px solid var(--hair); border-radius: var(--r-l); background: var(--raise); padding: 16px; }
.calc.big { padding: 22px; }
.calc-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px;
             background: var(--bg); border: 1px solid var(--hair); border-radius: var(--r-m); margin-bottom: 18px; }
.calc-tabs button {
  background: none; border: 0; border-radius: var(--r-s);
  color: var(--ink-3); padding: 9px; font-size: 13.5px; font-weight: 500; cursor: pointer;
  transition: all .16s ease;
}
.calc-tabs button:hover { color: var(--ink-2); }
.calc-tabs button.on { background: var(--raise-2); color: var(--ink); box-shadow: 0 1px 0 rgba(255,255,255,.05) inset; }

.calc-row { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: end; }
.calc-row label { display: block; }
.calc-row label > span { display: block; margin-bottom: 7px; }
.calc-row input {
  width: 100%;
  background: var(--bg); border: 1px solid var(--hair-2); color: var(--ink);
  border-radius: var(--r-m); padding: 13px 14px;
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 18px; font-weight: 600; letter-spacing: -.02em;
  transition: border-color .16s ease;
}
.calc-row input:focus { outline: none; border-color: var(--gold); }
.calc-row .eq { color: var(--ink-3); padding-bottom: 15px; font-family: var(--mono); }
.calc-n { font-size: 12.5px; color: var(--ink-3); margin: 14px 0 0; }
.calc-n b { color: var(--ink-2); font-weight: 500; }

.quick { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 16px; }
.quick button {
  background: none; border: 1px solid var(--hair-2); color: var(--ink-3);
  border-radius: 999px; padding: 6px 14px; cursor: pointer;
  font-family: var(--mono); font-size: 12px; transition: all .16s ease;
}
.quick button:hover { border-color: var(--gold); color: var(--gold-ink); }

/* ── table ───────────────────────────────────────────────────────────────── */

.tbl-w { overflow-x: auto; border: 1px solid var(--hair); border-radius: var(--r-m); }
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 480px; }
.tbl th {
  text-align: left; padding: 11px 15px; background: var(--raise-2);
  font-family: var(--body); font-size: 10.5px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3);
  border-bottom: 1px solid var(--hair); white-space: nowrap;
}
.tbl td { padding: 12px 15px; border-bottom: 1px solid var(--hair); background: var(--raise); }
.tbl tr:last-child td { border-bottom: 0; }
.tbl td.n { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.tbl td.muted { color: var(--ink-3); }

/* ── guide cards ──────────────────────────────────────────────────────────── */

.ex-list { display: grid; grid-template-columns: 1fr; gap: 12px; }
.exc { border: 1px solid var(--hair); border-radius: var(--r-m); background: var(--raise); overflow: hidden; }
.exc-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
         padding: 16px; flex-wrap: wrap; border-bottom: 1px solid var(--hair); }
.exc-h h2 { font-size: 19px; margin-bottom: 5px; }
.exc-p { display: flex; gap: 22px; }
.exc-p > div span { display: block; margin-bottom: 3px; }
.exc-p b { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 16px; font-weight: 600; }
.exc-b { padding: 16px; }
.exc-b p { font-size: 14px; margin: 0 0 10px; padding-left: 22px; position: relative; color: var(--ink-2); }
.exc-b p::before { position: absolute; left: 0; top: 0; font-family: var(--mono); font-weight: 700; }
.exc-b .good::before { content: "+"; color: var(--mint); }
.exc-b .bad::before  { content: "−"; color: var(--coral); }
.exc-b .go { display: inline-block; margin-top: 4px; }

/* ── prose ───────────────────────────────────────────────────────────────── */

.prose { color: var(--ink-2); font-size: 15.5px; max-width: 68ch; }
.prose h2 { color: var(--ink); font-size: 18px; margin: 30px 0 10px; }
.prose h2:first-child { margin-top: 0; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose em { color: var(--ink); font-style: italic; }
.prose a { color: var(--gold-ink); border-bottom: 1px solid rgba(var(--gold-rgb), .3); }
.prose a:hover { border-bottom-color: var(--gold); }
.prose ul, .prose ol { padding-left: 20px; margin: 0 0 1em; }
.prose li { margin-bottom: .45em; }
.prose li::marker { color: var(--gold-d); }

.pg-h { padding: 40px 0 18px; border-bottom: 1px solid var(--hair); margin-bottom: 26px; }
.pg-h h1 { font-size: clamp(26px, 6vw, 38px); }
.upd { margin-top: 34px; padding-top: 16px; border-top: 1px solid var(--hair);
       font-family: var(--mono); font-size: 12px; color: var(--ink-3); }

.empty { text-align: center; padding: 60px 20px; color: var(--ink-2); }
.empty h2 { color: var(--ink); font-size: 20px; margin-bottom: 8px; }

/* ── ads ─────────────────────────────────────────────────────────────────── */

/* Labelled, because an advert dressed as content is the fastest way to lose
   the account that pays for it. Labelled very quietly, because the label is
   for honesty, not for attention. */
.ad { margin: 26px 0; text-align: center; min-width: 0; overflow: hidden; }
.ad .ad-l {
  display: block; margin-bottom: 6px;
  font-family: var(--body); font-size: 8.5px; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-3); opacity: .35;
}
.ad > * { max-width: 100%; }

/* ── footer ──────────────────────────────────────────────────────────────── */

.ft { border-top: 1px solid var(--hair); margin-top: 56px; padding: 40px 0 30px; }
.ft-top { display: grid; grid-template-columns: 1fr; gap: 30px; }
.ft-d { font-size: 13.5px; color: var(--ink-3); margin: 14px 0 0; max-width: 40ch; line-height: 1.6; }
.ft-d a { color: var(--ink-2); border-bottom: 1px solid var(--hair-2); }
.ft-d a:hover { color: var(--gold-ink); }
.ft h4 { font-family: var(--body); font-size: 10.5px; font-weight: 600; letter-spacing: .14em;
         text-transform: uppercase; color: var(--ink-3); margin-bottom: 13px; }
.ft ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 9px; }
.ft li a { font-size: 13.5px; color: var(--ink-2); }
.ft li a:hover { color: var(--gold-ink); }
.ft-bot {
  display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between;
  border-top: 1px solid var(--hair); margin-top: 34px; padding-top: 20px;
  font-size: 12px; color: var(--ink-3);
}

/* ── wider screens ───────────────────────────────────────────────────────── */

@media (min-width: 680px) {
  .hero { padding: 52px 0 4px; }
  .lead-rate { padding: 28px 30px 26px; }
  .board { grid-template-columns: 1fr 1fr; }
  .offers { grid-template-columns: 1fr 1fr; }
  .ft-top { grid-template-columns: 2fr 1fr 1fr; }
}

@media (min-width: 980px) {
  body { font-size: 15.5px; }
  .wrap { padding: 0 28px; }

  /* The headline rate and the three supporting figures sit side by side, with
     the rate given twice the room. Four equal boxes would say they matter
     equally, and they do not. */
  .headline { display: grid; grid-template-columns: 1.3fr 1fr; gap: 14px; align-items: stretch; }
  /* centred in its own height, so the figure sits with the three beside it
     rather than floating at the top of an empty box */
  .headline .lead-rate {
    margin: 0; display: flex; flex-direction: column; justify-content: center;
  }
  .stat { padding: 16px 20px; }

  .ex-list { grid-template-columns: 1fr 1fr; }
  .sec-h h2 { font-size: 22px; }
}

/* ── toolkit additions ───────────────────────────────────────────────────── */
.hero-kicker { color: var(--gold-ink); margin-bottom: 13px; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin-top: 22px; }
.hero-btn { display: inline-flex; align-items: center; gap: 18px; padding: 11px 15px; background: var(--gold); color: var(--on-gold); border-radius: var(--r-s); font-size: 13px; font-weight: 700; transition: transform .16s ease, background .16s ease; }
.hero-btn:hover { background: var(--gold-hover); transform: translateY(-1px); }
.hero-btn span { font-size: 18px; line-height: 1; }
.hero-link { color: var(--ink-2); font-size: 13px; border-bottom: 1px solid var(--hair-2); padding-bottom: 2px; }
.hero-link:hover { color: var(--gold-ink); border-color: var(--gold); }
.tool-intro { display: flex; align-items: end; justify-content: space-between; gap: 22px; margin: 42px 0 16px; }
.tool-intro h2 { font-size: 24px; margin-top: 6px; }
.tool-intro p { max-width: 34ch; color: var(--ink-3); font-size: 13px; margin: 0; }
.tool-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
.tool-card { display: block; background: var(--raise); border: 1px solid var(--hair); border-radius: var(--r-m); padding: 16px; transition: border-color .16s ease, transform .16s ease; animation: card-in .4s ease both; animation-delay: var(--card-delay, 0ms); }
.tool-card:hover { border-color: rgba(var(--gold-rgb), .5); transform: translateY(-2px); }
.tool-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.tool-icon-box { width: 38px; height: 38px; display: grid; place-items: center; color: var(--gold-ink); background: var(--gold-t); border: 1px solid rgba(var(--gold-rgb), .2); border-radius: 9px; flex: 0 0 38px; }
.tool-icon { width: 21px; height: 21px; }
.tool-arrow { color: var(--ink-3); font-size: 19px; }
.tool-card h3 { font-size: 17px; margin-bottom: 7px; }
.tool-card p { color: var(--ink-3); font-size: 13px; line-height: 1.5; margin: 0 0 15px; }
.tool-card-link, .guide-link { color: var(--gold-ink); font-size: 12px; font-weight: 600; }
@keyframes card-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.split-callout { display: grid; grid-template-columns: 1fr; gap: 25px; border: 1px solid var(--hair); border-radius: var(--r-l); background: linear-gradient(120deg, rgba(var(--gold-rgb), .09), transparent 62%), var(--raise); padding: 22px; margin-top: 42px; }
.split-callout h2 { font-size: 23px; max-width: 18ch; margin: 7px 0 11px; }
.split-callout p { color: var(--ink-2); max-width: 52ch; margin: 0; font-size: 14px; }
.callout-list { display: grid; gap: 1px; background: var(--hair); border: 1px solid var(--hair); }
.callout-list div { display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: baseline; padding: 11px 13px; background: var(--raise-2); font-size: 13px; color: var(--ink-2); }
.callout-list b { font-family: var(--mono); color: var(--gold-d); font-size: 11px; }
.tool-filter { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 22px; }
.tool-filter a { border: 1px solid var(--hair-2); border-radius: 999px; padding: 6px 11px; color: var(--ink-2); font-size: 12px; }
.tool-filter a:hover { color: var(--gold-ink); border-color: var(--gold); }
.toolkit-page { padding-top: 4px; }
.tool-section-head { display: flex; align-items: baseline; gap: 12px; border-bottom: 1px solid var(--hair); margin: 42px 0 16px; padding-bottom: 12px; }
.tool-section-head .no { color: var(--gold-d); font-family: var(--mono); font-size: 11px; }
.tool-section-head h2 { font-size: 23px; }
.tool-section-head p { margin: 5px 0 0; color: var(--ink-3); font-size: 13px; }
.tool-layout { display: grid; grid-template-columns: 1fr; gap: 12px; }
.tool-panel { background: var(--raise); border: 1px solid var(--hair); border-radius: var(--r-m); padding: 17px; min-width: 0; scroll-margin-top: 85px; }
.tool-panel:hover { border-color: var(--hair-2); }
.featured-panel { background: linear-gradient(150deg, rgba(var(--gold-rgb), .075), transparent 55%), var(--raise); }
.panel-head { display: flex; align-items: center; gap: 11px; margin-bottom: 13px; }
.panel-head h3 { font-size: 17px; margin-top: 3px; }
.panel-copy { color: var(--ink-2); font-size: 13px; line-height: 1.5; margin: 0 0 16px; }
.field-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
.field-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.field-grid.one { max-width: 220px; margin-top: 11px; }
.field-grid label, .inline-form label { position: relative; display: block; color: var(--ink-3); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.field-grid input, .field-grid select, .inline-form input, .inline-form select { display: block; width: 100%; margin-top: 6px; padding: 10px 10px; background: var(--bg); color: var(--ink); border: 1px solid var(--hair-2); border-radius: var(--r-s); font-family: var(--mono); font-size: 14px; letter-spacing: 0; text-transform: none; }
.field-grid input:focus, .field-grid select:focus, .inline-form input:focus, .inline-form select:focus { outline: none; border-color: var(--gold); }
.input-unit { display: grid; grid-template-columns: 1fr auto; align-items: stretch; margin-top: 6px; }
.input-unit input, .input-unit select { margin-top: 0; border-radius: var(--r-s) 0 0 var(--r-s); }
.input-unit b, .field-suffix { display: flex; align-items: center; padding: 0 8px; background: var(--raise-2); color: var(--ink-3); border: 1px solid var(--hair-2); border-left: 0; border-radius: 0 var(--r-s) var(--r-s) 0; font: 10px var(--mono); letter-spacing: 0; text-transform: none; }
.field-grid > label > .field-suffix { position: absolute; right: 0; bottom: 0; height: 37px; }
.calc-btn { display: inline-flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 14px; padding: 9px 12px; background: var(--gold); color: var(--on-gold); border: 0; border-radius: var(--r-s); font-size: 12px; font-weight: 700; cursor: pointer; }
.calc-btn:hover { background: var(--gold-hover); }
.calc-btn span { font-size: 17px; line-height: .7; }
.result-box { min-height: 55px; display: flex; align-items: center; margin-top: 13px; padding: 11px 13px; border: 1px solid rgba(var(--mint-rgb), .2); border-radius: var(--r-s); background: rgba(var(--mint-rgb), .055); color: var(--ink-2); font-size: 13px; line-height: 1.5; }
.result-box strong { color: var(--mint); font-family: var(--mono); font-weight: 600; }
.result-box span { color: var(--ink-3); }
.result-muted { color: var(--ink-3); }
.result-pop { animation: result-pop .25s ease; }
@keyframes result-pop { 50% { border-color: var(--mint); transform: scale(1.01); } }
.tool-info { margin-top: 13px; padding-top: 11px; border-top: 1px solid var(--hair); color: var(--ink-3); font-size: 12px; }
.tool-info summary { cursor: pointer; color: var(--ink-2); }
.tool-info p { margin: 9px 0 0; }
.tool-info b { color: var(--ink-2); }
.compact .panel-head { margin-bottom: 15px; }
.inline-form { display: grid; grid-template-columns: 1fr 24px 1fr; gap: 9px; align-items: end; }
.inline-form .equals { color: var(--ink-3); padding-bottom: 11px; text-align: center; font-family: var(--mono); }
.result-inline { align-self: end; min-height: 39px; display: flex; align-items: center; color: var(--mint); font-family: var(--mono); font-size: 14px; overflow-wrap: anywhere; }
.micro-copy { margin: 12px 0 0; color: var(--ink-3); font-size: 11.5px; line-height: 1.45; }
.conversion-list { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--hair); border: 1px solid var(--hair); margin-top: 13px; }
.conversion-list span { display: flex; justify-content: space-between; gap: 8px; padding: 7px 9px; background: var(--raise-2); color: var(--ink-3); font-size: 11px; }
.conversion-list b { font-family: var(--mono); font-weight: 500; }
.conversion-list i { font-style: normal; color: var(--ink-2); font-family: var(--mono); }
.requirement-list { display: grid; gap: 7px; }
.requirement-list label { display: flex; align-items: center; gap: 8px; padding: 8px 9px; border: 1px solid var(--hair); border-radius: var(--r-s); color: var(--ink-2); font-size: 12px; }
.requirement-list label:has(input:checked) { border-color: rgba(var(--gold-rgb), .45); background: var(--gold-t); }
.requirement-list input { accent-color: var(--gold); }
.requirement-list b { margin-left: auto; color: var(--ink-3); font: 10px var(--mono); }
.latency-scale { display: flex; flex-wrap: wrap; gap: 5px 13px; margin-top: 12px; color: var(--ink-3); font: 10px var(--mono); }
.guide-panel { background: linear-gradient(150deg, rgba(var(--mint-rgb), .045), transparent 60%), var(--raise); }
.checklist { display: grid; gap: 12px; }
.checklist div { display: grid; grid-template-columns: 26px 1fr; gap: 9px; color: var(--ink-2); font-size: 12.5px; line-height: 1.5; }
.checklist b { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: var(--gold-ink); background: var(--gold-t); font: 11px var(--mono); }
.checklist strong { color: var(--ink); }
.guide-link { display: inline-block; margin-top: 17px; border-bottom: 1px solid rgba(var(--gold-rgb), .3); padding-bottom: 2px; }
.faq-block { max-width: 740px; margin: 44px 0 0; }
.faq-block h2 { font-size: 23px; margin: 6px 0 17px; }
.faq-block details { border-top: 1px solid var(--hair); padding: 13px 0; }
.faq-block details:last-child { border-bottom: 1px solid var(--hair); }
.faq-block summary { cursor: pointer; color: var(--ink-2); font-size: 14px; }
.faq-block p { color: var(--ink-3); font-size: 13px; margin: 9px 0 0; }
.guide-list { display: grid; gap: 1px; background: var(--hair); border: 1px solid var(--hair); }
.guide-row { display: grid; grid-template-columns: 40px 1fr; gap: 15px; padding: 20px 17px; background: var(--raise); }
.guide-no { color: var(--gold-d); font: 12px var(--mono); padding-top: 3px; }
.guide-row h2 { font-size: 19px; margin-bottom: 7px; }
.guide-row p { color: var(--ink-2); font-size: 14px; max-width: 70ch; margin: 0; }

@media (min-width: 560px) {
  .tool-grid { grid-template-columns: repeat(2, 1fr); }
  .tool-layout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tool-panel.featured-panel, .tool-panel.guide-panel { grid-column: 1 / -1; }
}
@media (min-width: 680px) {
  .split-callout { grid-template-columns: 1.25fr 1fr; padding: 28px; }
}
@media (min-width: 980px) {
  .tool-grid { grid-template-columns: repeat(3, 1fr); }
  .tool-layout { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tool-panel.featured-panel { grid-column: span 2; }
  .tool-panel.guide-panel { grid-column: span 1; }
}
@media (max-width: 480px) {
  .field-grid.three { grid-template-columns: 1fr; }
  .tool-intro { display: block; }
  .tool-intro p { margin-top: 10px; }
  .inline-form { grid-template-columns: 1fr; }
  .inline-form .equals { display: none; }
  .result-inline { min-height: 30px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Version 2: theme switch, homepage sections, per-tool pages, blog
   ══════════════════════════════════════════════════════════════════════════ */

:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* a short, smooth colour change when the theme is toggled */
html.theme-anim, html.theme-anim *, html.theme-anim *::before, html.theme-anim *::after {
  transition: background-color .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease !important;
}

/* header, mobile menu, theme switch and skip link: see the <style id="hd-css"> block in inc/header.php */

/* cards get a soft shadow in light mode (the variable is "none" in dark) */
.tool-card, .tool-panel, .post-card-in, .cat-box, .feature, .step, .stats, .answer-box, .hero-demo { box-shadow: var(--shadow); }

/* ── shared ──────────────────────────────────────────────────────────────── */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink-3); margin-bottom: 16px; }
.crumbs a { color: var(--ink-2); }
.crumbs a:hover { color: var(--gold-ink); }
.crumbs span[aria-current] { color: var(--ink-3); }

.reveal { transition: opacity .6s ease, transform .6s ease; }
.js .reveal:not(.in) { opacity: 0; transform: translateY(14px); }
.reveal.in { transition: opacity .6s ease, transform .35s ease, border-color .16s ease; }

.tool-icon-box.sm { width: 28px; height: 28px; flex: 0 0 28px; border-radius: 7px; }
.tool-icon-box.sm .tool-icon, .tool-icon-box.sm .tool-img { width: 16px; height: 16px; }
.tool-icon-box.lg { width: 52px; height: 52px; flex: 0 0 52px; border-radius: 13px; }
.tool-icon-box.lg .tool-icon, .tool-icon-box.lg .tool-img { width: 27px; height: 27px; }
.tool-img { width: 21px; height: 21px; object-fit: contain; }

/* count-up numbers in results keep their width steady while they run */
.cu { font-variant-numeric: tabular-nums; }
.result-box strong .cu, .result-inline .cu { font-family: var(--mono); }
.result-box.calculating { border-color: rgba(var(--mint-rgb), .55); }
.calc-btn { transition: background-color .16s ease, transform .12s ease; }
.calc-btn:active { transform: scale(.97); }
.calc-btn.clicked span { animation: nudge .5s ease; }
@keyframes nudge { 40% { transform: translateX(6px); } }

/* ── homepage ────────────────────────────────────────────────────────────── */
.hero-home { padding: 34px 0 6px; }
.hero-grid { display: grid; grid-template-columns: 1fr; gap: 26px; align-items: center; }
.hero-demo { border: 1px solid var(--hair); border-radius: var(--r-l); background: linear-gradient(160deg, rgba(var(--gold-rgb), .08), transparent 60%), var(--raise); padding: 20px; }
.hero-demo .demo-h { font-size: 20px; margin: 6px 0 14px; }
.tool-embed { border: 0; padding: 0; background: transparent; box-shadow: none; }
.tool-embed:hover { border: 0; }
.hero-demo .tool-card-link { display: inline-block; margin-top: 14px; }

.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--hair); border: 1px solid var(--hair); border-radius: var(--r-m); overflow: hidden; margin-top: 30px; }
.stat-i { background: var(--raise); padding: 18px 14px; text-align: center; }
.stat-i b { display: block; font-size: clamp(26px, 6vw, 36px); color: var(--ink); line-height: 1.1; font-weight: 600; }
.stat-i .stat-l { display: block; margin-top: 6px; font-size: 12px; color: var(--ink-3); }

.answer-box { margin-top: 30px; border: 1px solid var(--hair); border-left: 3px solid var(--gold); border-radius: var(--r-m); background: var(--raise); padding: 20px 22px; }
.answer-box h2 { font-size: 22px; margin: 6px 0 10px; }
.answer-box p { margin: 0; color: var(--ink-2); max-width: 78ch; }
.answer-box strong { color: var(--ink); }

.cat-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.cat-box { border: 1px solid var(--hair); border-radius: var(--r-m); background: var(--raise); padding: 18px; }
.cat-box h3 { font-size: 17px; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.cat-box h3 small { font: 600 11px var(--mono); color: var(--ink-3); background: var(--raise-2); border: 1px solid var(--hair); border-radius: 999px; padding: 2px 8px; }
.cat-box ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.cat-box li a { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 8px; font-size: 13.5px; color: var(--ink-2); transition: background-color .15s ease, color .15s ease; }
.cat-box li a:hover { background: var(--raise-2); color: var(--ink); }

.steps { display: grid; grid-template-columns: 1fr; gap: 12px; }
.step { border: 1px solid var(--hair); border-radius: var(--r-m); background: var(--raise); padding: 20px; }
.step-n { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--gold); color: var(--on-gold); font: 700 14px var(--display); margin-bottom: 12px; }
.step h3 { font-size: 17px; margin-bottom: 6px; }
.step p { margin: 0; font-size: 13.5px; color: var(--ink-2); }

.about-block { margin-top: 44px; }
.about-block h2 { font-size: clamp(24px, 4.5vw, 30px); margin: 6px 0 16px; }
.about-cols { display: grid; grid-template-columns: 1fr; gap: 6px 36px; color: var(--ink-2); font-size: 15px; }
.about-cols a { color: var(--gold-ink); border-bottom: 1px solid rgba(var(--gold-rgb), .35); }
.about-cols strong { color: var(--ink); }

.feature-grid { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 30px; }
.feature { border: 1px solid var(--hair); border-radius: var(--r-m); background: var(--raise); padding: 18px; }
.feature h3 { font-size: 16px; margin-bottom: 6px; }
.feature p { margin: 0; font-size: 13.5px; color: var(--ink-2); }

.cta-band { margin-top: 48px; text-align: center; border: 1px solid var(--hair); border-radius: var(--r-l); padding: 36px 20px; background: linear-gradient(140deg, rgba(var(--gold-rgb), .10), transparent 65%), var(--raise); }
.cta-band h2 { font-size: clamp(22px, 4.5vw, 30px); margin-bottom: 8px; }
.cta-band p { color: var(--ink-2); margin: 0 auto 18px; max-width: 52ch; }

/* ── FAQ accordion ───────────────────────────────────────────────────────── */
.faq-block { max-width: 820px; margin: 48px 0 0; }
.faq-block details { border: 1px solid var(--hair); border-radius: var(--r-m); background: var(--raise); padding: 0; margin-bottom: 8px; }
.faq-block details:last-child { border-bottom: 1px solid var(--hair); }
.faq-block summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 15px 16px; color: var(--ink); font-size: 15px; font-weight: 500; }
.faq-block summary::-webkit-details-marker { display: none; }
.faq-block summary::after { content: "+"; flex: 0 0 auto; font: 400 22px/1 var(--mono); color: var(--gold-ink); transition: transform .25s ease; }
.faq-block details[open] summary::after { transform: rotate(45deg); }
.faq-block details[open] { border-color: var(--hair-2); }
.faq-a { padding: 0 16px 16px; color: var(--ink-2); font-size: 14.5px; }
.faq-a p { margin: 0 0 .7em; color: inherit; font-size: inherit; }
.faq-a p:last-child { margin-bottom: 0; }

/* ── tools directory ─────────────────────────────────────────────────────── */
.tool-search { position: relative; max-width: 460px; margin-top: 22px; color: var(--ink-3); }
.tool-search svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.tool-search input { width: 100%; padding: 12px 14px 12px 40px; border: 1px solid var(--hair-2); border-radius: 999px; background: var(--raise); color: var(--ink); font-size: 14px; }
.tool-search input:focus { outline: none; border-color: var(--gold); }
.tool-wrap[hidden], .tool-cat[hidden] { display: none; }
.empty, .empty-state { color: var(--ink-3); text-align: center; padding: 30px 0; }
.empty-state { border: 1px dashed var(--hair-2); border-radius: var(--r-l); padding: 48px 20px; margin-top: 30px; }
.empty-state h2 { font-size: 22px; margin-bottom: 8px; color: var(--ink); }
.empty-state a, .tools-intro a { color: var(--gold-ink); }
.tools-intro { margin-top: 48px; max-width: 78ch; }

/* ── a tool's own page ───────────────────────────────────────────────────── */
.tool-hero { padding-top: 26px; }
.tool-title { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.tool-title h1 { font-size: clamp(26px, 5.4vw, 40px); max-width: 24ch; line-height: 1.1; }
.tool-title .hero-kicker { margin-bottom: 5px; }
.tool-hero .lede { margin-bottom: 4px; }
.tool-page { padding-top: 12px; }
.tool-solo { max-width: 900px; padding: 22px; margin: 6px 0 0; scroll-margin-top: 85px; }
.tool-solo:hover { border-color: var(--hair); }
.tool-solo .field-grid.three { gap: 14px; }
.tool-solo .calc-btn { font-size: 13.5px; padding: 11px 16px; }
.tool-solo .result-box { font-size: 14.5px; min-height: 64px; }
.tool-solo .result-box strong { font-size: 1.15em; }
.tool-solo .inline-form { max-width: 560px; }
.tool-solo .conversion-list span { font-size: 12.5px; padding: 9px 11px; }
.tool-about { margin-top: 36px; max-width: 820px; }
.tool-about h2 { font-size: 22px; margin: 32px 0 10px; }
.admin-note { display: inline-block; background: rgba(var(--gold-rgb), .14); color: var(--gold-ink); border-radius: 6px; padding: 4px 10px; font-size: 12.5px; }

/* ── prose (about text, pages, articles) ─────────────────────────────────── */
.prose { line-height: 1.75; }
.prose h2 { font-size: 22px; margin: 34px 0 10px; }
.prose h3 { font-size: 18px; margin: 26px 0 8px; color: var(--ink); }
.prose p { margin: 0 0 1.05em; }
.prose img { border-radius: var(--r-m); margin: 1.4em 0; }
.prose blockquote { margin: 1.4em 0; padding: 4px 0 4px 18px; border-left: 3px solid var(--gold); color: var(--ink); }
.prose code { font-family: var(--mono); font-size: .88em; background: var(--raise-2); border: 1px solid var(--hair); border-radius: 4px; padding: 1px 5px; }
.prose pre { overflow-x: auto; background: var(--raise-2); border: 1px solid var(--hair); border-radius: var(--r-m); padding: 14px; }
.prose pre code { background: none; border: 0; padding: 0; }
.prose table { width: 100%; border-collapse: collapse; margin: 1.4em 0; font-size: 14px; display: block; overflow-x: auto; }
.prose th, .prose td { border: 1px solid var(--hair); padding: 9px 12px; text-align: left; }
.prose th { background: var(--raise-2); color: var(--ink); }

/* ── blog ────────────────────────────────────────────────────────────────── */
.post-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.post-card-in { display: flex; flex-direction: column; height: 100%; background: var(--raise); border: 1px solid var(--hair); border-radius: var(--r-m); padding: 16px; transition: border-color .16s ease, transform .16s ease; }
.post-card-in:hover { border-color: rgba(var(--gold-rgb), .55); transform: translateY(-2px); }
.post-cover { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; margin-bottom: 14px; background: var(--raise-2); }
.post-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; font-size: 12px; color: var(--ink-3); }
.pill { display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--gold-t); color: var(--gold-ink); font-size: 11.5px; font-weight: 600; }
.post-card h3 { font-size: 18px; margin-bottom: 8px; line-height: 1.25; }
.post-card p { color: var(--ink-2); font-size: 14px; margin: 0 0 14px; flex: 1; }
.pager { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 34px 0 0; font-size: 14px; color: var(--ink-3); }
.pager a { color: var(--gold-ink); font-weight: 600; }

.post { padding-top: 28px; }
.post-h h1 { font-size: clamp(28px, 6vw, 42px); line-height: 1.12; margin: 12px 0 14px; }
.post-h .lede { font-size: 17px; color: var(--ink-2); max-width: none; }
.post-byline { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--ink-3); margin-top: 14px; }
.post-hero { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-l); margin: 24px 0 8px; }
.toc { margin: 26px 0; padding: 16px 18px; border: 1px solid var(--hair); border-radius: var(--r-m); background: var(--raise); }
.toc ol { margin: 10px 0 0; padding-left: 20px; display: grid; gap: 6px; font-size: 14.5px; }
.toc a { color: var(--ink-2); }
.toc a:hover { color: var(--gold-ink); }
.post-body { max-width: none; font-size: 16.5px; margin-top: 24px; }
.post-body h2 { scroll-margin-top: 84px; }
.post-tools { margin-top: 44px; }
.post-tools .eyebrow { margin-bottom: 12px; }
.post-tools .tool-grid { grid-template-columns: 1fr; }

/* ── footer ──────────────────────────────────────────────────────────────── */
.ft li a b { color: var(--gold-ink); font-weight: 600; }

/* ── larger screens ──────────────────────────────────────────────────────── */
@media (min-width: 560px) {
  .cat-grid, .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .post-grid { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(4, 1fr); }
  .steps { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 680px) {
  .ft-top { grid-template-columns: 1.6fr 1.2fr 1fr 1fr; }
  .about-cols { grid-template-columns: 1fr 1fr; }
  .post-tools .tool-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 980px) {
  .hero-grid { grid-template-columns: 1.05fr .95fr; gap: 44px; }
  .hero-home { padding-top: 54px; }
  .cat-grid { grid-template-columns: repeat(3, 1fr); }
  .feature-grid { grid-template-columns: repeat(4, 1fr); }
  .post-grid { grid-template-columns: repeat(3, 1fr); }
  .post-tools .tool-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 480px) {
  .tool-title { align-items: flex-start; }
  .tool-solo { padding: 16px; }
  .hero-demo { padding: 16px; }
}

/* people who ask for less motion get none */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .js .reveal:not(.in) { opacity: 1; transform: none; }
}

/* result boxes: let <br> break lines, and keep counting numbers the colour of their parent */
.result-box { display: block; align-content: center; }
.result-box .cu, .result-inline .cu, .conversion-list .cu { color: inherit; }
.result-inline { display: block; align-content: center; }

/* ── developer credit (public footer) ────────────────────────────────────── */
.ft-credit a { color: var(--ink-2); border-bottom: 1px solid var(--hair-2); }
.ft-credit a:hover { color: var(--gold-ink); }


/* ══════════════════════════════════════════════════════════════════════════
   Modern layer. Sits on top of the components above and restyles them:
   glass header, gradient hero, rounded cards with lift on hover, pill buttons.
   ══════════════════════════════════════════════════════════════════════════ */

html { scroll-behavior: smooth; }
::selection { background: rgba(var(--gold-rgb), .22); }

body {
  font-size: 15.5px;
  background-image:
    radial-gradient(60rem 30rem at 12% -10rem, rgba(var(--gold-rgb), .13), transparent 70%),
    radial-gradient(50rem 28rem at 92% -6rem, rgba(var(--violet-rgb), .10), transparent 70%);
}
h1, h2, h3, h4 { font-weight: 700; letter-spacing: -.03em; }
.fig, .stat-i b, .result-box strong, .result-inline, .tbl td.n { font-variant-numeric: tabular-nums; }
.eyebrow { font-size: 11px; letter-spacing: .12em; font-weight: 700; }

/* ── header ─ */
.hd {
  background: rgba(var(--bg-rgb), .72);
  backdrop-filter: saturate(180%) blur(18px); -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease, box-shadow .25s ease, background-color .25s ease;
}
.hd.scrolled { border-bottom-color: var(--hair); box-shadow: 0 6px 24px rgba(16, 24, 64, .06); }
.hd-in { height: 66px; }
.brand .mark {
  width: 34px; height: 34px; flex-basis: 34px; border-radius: 11px; font-size: 19px;
  background: var(--grad); color: #fff;
  box-shadow: 0 6px 14px rgba(var(--gold-rgb), .35), 0 1px 0 rgba(255, 255, 255, .25) inset;
}
.brand .bn { font-size: 19px; font-weight: 800; letter-spacing: -.035em; }
.hd-cta { display: none; }
.icon-btn { border-radius: 12px; background: var(--raise); }
@media (min-width: 820px) {
  .hd-nav a { padding: 8px 15px; border-radius: 999px; font-weight: 600; transition: background-color .15s ease, color .15s ease; }
  .hd-nav a:hover { background: var(--raise-2); }
  .hd-nav a.on { color: var(--gold-ink); background: var(--gold-t); }
  .hd-nav a.on::after { display: none; }
  .hd-cta {
    display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; padding: 9px 18px;
    background: var(--grad); color: #fff; border-radius: 999px; font-size: 13.5px; font-weight: 700;
    box-shadow: 0 6px 16px rgba(var(--gold-rgb), .32); transition: transform .15s ease, box-shadow .15s ease;
  }
  .hd-cta:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(var(--gold-rgb), .4); }
}

/* ── buttons ─ */
.hero-btn, .calc-btn {
  background: var(--grad); color: #fff; border-radius: 999px;
  box-shadow: 0 8px 20px rgba(var(--gold-rgb), .30);
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.hero-btn { padding: 13px 22px; font-size: 14.5px; gap: 14px; }
.calc-btn { padding: 11px 20px; font-size: 13.5px; }
.hero-btn:hover, .calc-btn:hover { background: var(--grad); filter: brightness(1.07); transform: translateY(-2px); box-shadow: 0 12px 26px rgba(var(--gold-rgb), .40); }
.hero-link {
  padding: 12px 20px; border: 1px solid var(--hair-2); border-radius: 999px; background: var(--raise);
  color: var(--ink); font-weight: 600; font-size: 14px; transition: all .16s ease;
}
.hero-link:hover { border-color: var(--gold); color: var(--gold-ink); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(var(--gold-rgb), .14); }
.go { border-radius: 999px; }
.go:hover { background: var(--grad); border-color: transparent; }

/* ── hero ─ */
.hero-home, .tool-hero, .hero { position: relative; }
.hero-home { padding: 56px 0 10px; }
.hero-home::before {
  content: ""; position: absolute; z-index: -1; left: 50%; top: -120px; width: min(900px, 100%); height: 520px; transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(var(--gold-rgb), .20), transparent 70%);
  filter: blur(20px); pointer-events: none;
}
.hero-kicker {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px; padding: 6px 14px 6px 10px;
  border: 1px solid rgba(var(--gold-rgb), .22); border-radius: 999px;
  background: var(--gold-t); color: var(--gold-ink);
  font-size: 12.5px; font-weight: 600; letter-spacing: 0; text-transform: none; line-height: 1.4;
}
.hero-kicker::before {
  content: ""; flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--mint);
  box-shadow: 0 0 0 4px rgba(var(--mint-rgb), .16); animation: breathe 2.6s ease-in-out infinite;
}
.hero h1 { font-size: clamp(33px, 6.4vw, 60px); line-height: 1.05; font-weight: 800; max-width: 17ch; letter-spacing: -.04em; margin-bottom: 16px; }
.hero h1 em {
  font-style: normal; color: var(--gold-ink);
  background: var(--grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.hero .lede { font-size: 17px; color: var(--ink-2); max-width: 56ch; }
.hero-actions { margin-top: 26px; gap: 12px; }
.hero-demo {
  border-radius: 26px; padding: 24px; border: 1px solid var(--hair);
  background: linear-gradient(180deg, rgba(var(--gold-rgb), .07), transparent 45%), var(--raise);
  box-shadow: var(--shadow-lg); position: relative;
}
.hero-demo::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; border-radius: 26px 26px 0 0; background: var(--grad); opacity: .9;
}
.hero-demo .demo-h { font-size: 22px; }

/* ── stats ─ */
.stats { gap: 14px; background: none; border: 0; overflow: visible; margin-top: 44px; box-shadow: none; }
.stat-i { border: 1px solid var(--hair); border-radius: var(--r-l); padding: 22px 14px; box-shadow: var(--shadow); transition: transform .2s ease, box-shadow .2s ease; }
.stat-i:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.stat-i b {
  font-family: var(--display); font-weight: 800; letter-spacing: -.04em;
  background: var(--grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.stat-i .stat-l { font-weight: 500; }

/* ── panels and cards ─ */
.answer-box, .cat-box, .step, .feature, .tool-card, .tool-panel, .post-card-in, .toc, .faq-block details, .guide-row, .calc {
  border-radius: 18px;
}
.answer-box {
  border: 1px solid var(--hair); border-left: 1px solid var(--hair); box-shadow: var(--shadow); padding: 26px 28px; position: relative; overflow: hidden;
  background: linear-gradient(135deg, rgba(var(--gold-rgb), .08), transparent 55%), var(--raise);
}
.answer-box::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--grad); }
.answer-box h2 { font-size: 24px; }

.tool-intro { margin: 60px 0 22px; }
.tool-intro h2, .tool-section-head h2 { font-size: clamp(24px, 4vw, 33px); font-weight: 800; letter-spacing: -.035em; }
.tool-intro .eyebrow, .about-block .eyebrow, .faq-block .eyebrow, .post-tools .eyebrow, .answer-box .eyebrow { color: var(--gold-ink); }

.tool-grid { gap: 16px; }
.tool-card {
  padding: 20px; border: 1px solid var(--hair);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.tool-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: rgba(var(--gold-rgb), .38); }
.tool-icon-box {
  border-radius: 13px; width: 42px; height: 42px; flex-basis: 42px; color: var(--gold-ink);
  background: linear-gradient(135deg, rgba(var(--gold-rgb), .16), rgba(var(--violet-rgb), .14));
  border: 1px solid rgba(var(--gold-rgb), .18);
}
.tool-card h3 { font-size: 17.5px; }
.tool-card p { font-size: 13.5px; }
.tool-arrow { transition: transform .22s ease, color .22s ease; }
.tool-card:hover .tool-arrow { transform: translate(3px, -3px); color: var(--gold-ink); }
.tool-card-link, .guide-link { font-weight: 700; }

.cat-grid { gap: 16px; }
.cat-box { padding: 22px; box-shadow: var(--shadow); transition: box-shadow .22s ease, transform .22s ease; }
.cat-box:hover { box-shadow: var(--shadow-lg); }
.cat-box li a { border-radius: 12px; padding: 8px 9px; font-weight: 500; }
.cat-box li a:hover { background: var(--gold-t); color: var(--gold-ink); }
.cat-box h3 small { background: var(--gold-t); color: var(--gold-ink); border-color: transparent; }

.split-callout {
  border: 0; border-radius: 28px; padding: 32px 28px; margin-top: 60px; position: relative; overflow: hidden;
  background: linear-gradient(135deg, #1e1b4b 0%, #312e81 55%, #5b21b6 100%); color: #e0e7ff;
  box-shadow: 0 24px 60px rgba(49, 46, 129, .32);
}
.split-callout::after {
  content: ""; position: absolute; right: -80px; top: -80px; width: 320px; height: 320px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(165, 180, 252, .35), transparent); pointer-events: none;
}
.split-callout > * { position: relative; z-index: 1; }
.split-callout h2 { color: #fff; font-size: clamp(24px, 4vw, 32px); font-weight: 800; max-width: 20ch; }
.split-callout p { color: rgba(224, 231, 255, .82); font-size: 15px; }
.split-callout .eyebrow { color: #c7d2fe; }
.callout-list { background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .16); border-radius: 16px; overflow: hidden; align-self: center; }
.callout-list div { background: rgba(255, 255, 255, .07); color: #e0e7ff; padding: 14px 16px; }
.callout-list b { color: #fda4af; }
.callout-list .stat-l { color: inherit; font-size: inherit; }

.steps { gap: 16px; }
.step { padding: 26px 24px; box-shadow: var(--shadow); position: relative; }
.step-n { width: 38px; height: 38px; background: var(--grad); color: #fff; font-size: 16px; font-weight: 800; box-shadow: 0 8px 18px rgba(var(--gold-rgb), .32); margin-bottom: 16px; }
.step h3 { font-size: 18px; }

.about-block { margin-top: 64px; }
.about-block h2 { font-weight: 800; letter-spacing: -.035em; }
.feature-grid { gap: 16px; margin-top: 44px; }
.feature { padding: 22px; box-shadow: var(--shadow); position: relative; overflow: hidden; transition: transform .22s ease, box-shadow .22s ease; }
.feature::before { content: ""; position: absolute; left: 22px; top: 0; width: 34px; height: 4px; border-radius: 0 0 4px 4px; background: var(--grad); }
.feature:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.feature h3 { margin-top: 8px; font-size: 16.5px; }

.cta-band {
  border: 0; border-radius: 30px; padding: 54px 24px; margin-top: 64px; position: relative; overflow: hidden;
  background: linear-gradient(135deg, #be123c 0%, #9f1239 60%, #fb923c 130%); color: #fff;
  box-shadow: 0 26px 60px rgba(225, 29, 72, .34);
}
.cta-band::before, .cta-band::after { content: ""; position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .10); pointer-events: none; }
.cta-band::before { width: 260px; height: 260px; left: -70px; bottom: -110px; }
.cta-band::after  { width: 200px; height: 200px; right: -50px; top: -80px; }
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 { color: #fff; font-weight: 800; }
.cta-band p { color: rgba(255, 255, 255, .86); }
.cta-band .hero-btn { background: #fff; color: #9f1239; box-shadow: 0 10px 24px rgba(0, 0, 0, .22); filter: none; }
.cta-band .hero-btn:hover { background: #fff; filter: none; box-shadow: 0 14px 30px rgba(0, 0, 0, .3); }

/* ── faq ─ */
.faq-block { margin-top: 64px; }
.faq-block h2 { font-weight: 800; letter-spacing: -.035em; font-size: clamp(24px, 4vw, 32px); }
.faq-block details { box-shadow: var(--shadow); margin-bottom: 10px; transition: border-color .2s ease, box-shadow .2s ease; }
.faq-block details:hover { border-color: rgba(var(--gold-rgb), .35); }
.faq-block details[open] { border-color: rgba(var(--gold-rgb), .4); box-shadow: var(--shadow-lg); }
.faq-block summary { font-weight: 600; padding: 17px 18px; }
.faq-block summary::after { color: var(--gold-ink); }
.faq-a { padding: 0 18px 18px; }

/* ── calculators and forms ─ */
.tool-panel { padding: 22px; box-shadow: var(--shadow); }
.tool-panel:hover { border-color: rgba(var(--gold-rgb), .3); }
.featured-panel { background: linear-gradient(150deg, rgba(var(--gold-rgb), .08), transparent 55%), var(--raise); }
.field-grid label, .inline-form label { font-size: 11.5px; letter-spacing: .07em; color: var(--ink-3); }
.field-grid input, .field-grid select, .inline-form input, .inline-form select {
  border-radius: 12px; padding: 11px 13px; background: var(--raise); border-color: var(--hair-2);
  font-family: var(--body); font-weight: 600; font-size: 15px; font-variant-numeric: tabular-nums;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field-grid input:hover, .field-grid select:hover, .inline-form input:hover { border-color: var(--ink-3); }
.field-grid input:focus, .field-grid select:focus, .inline-form input:focus, .inline-form select:focus {
  border-color: var(--gold); box-shadow: 0 0 0 4px rgba(var(--gold-rgb), .16);
}
.input-unit input, .input-unit select { border-radius: 12px 0 0 12px; }
.input-unit b, .field-suffix { border-radius: 0 12px 12px 0; font: 600 11.5px var(--body); }
.field-grid > label > .field-suffix { height: 43px; }
.result-box {
  border-radius: 14px; border-color: rgba(var(--mint-rgb), .28); background: rgba(var(--mint-rgb), .075); padding: 14px 16px;
}
.result-box strong { color: var(--mint); font-weight: 800; }
.tool-info { border-top-color: var(--hair); }
.conversion-list { border-radius: 12px; overflow: hidden; }
.requirement-list label { border-radius: 12px; padding: 10px 12px; transition: border-color .15s ease, background-color .15s ease; }
.requirement-list input { accent-color: var(--gold); }
.calc-tabs, .quick button { border-radius: 999px; }
.tool-search input { border-radius: 999px; padding: 14px 16px 14px 44px; box-shadow: var(--shadow); font-size: 15px; }
.tool-search input:focus { box-shadow: 0 0 0 4px rgba(var(--gold-rgb), .16); }
.tool-filter a { border-radius: 999px; padding: 7px 14px; font-weight: 600; background: var(--raise); }
.tool-filter a:hover { background: var(--gold-t); color: var(--gold-ink); border-color: rgba(var(--gold-rgb), .4); }
.tool-section-head { margin-top: 56px; }
.tool-section-head .no { background: var(--gold-t); color: var(--gold-ink); border-radius: 999px; padding: 2px 9px; font-weight: 700; }

/* ── page heads, prose, guides ─ */
.pg-h { padding: 52px 0 22px; }
.pg-h h1 { font-size: clamp(30px, 6vw, 46px); font-weight: 800; letter-spacing: -.04em; }
.tool-title h1, .post-h h1 { font-weight: 800; letter-spacing: -.04em; }
.crumbs { font-weight: 500; }
.prose { color: var(--ink-2); }
.prose h2 { font-weight: 800; letter-spacing: -.03em; }
.prose a { color: var(--gold-ink); border-bottom-color: rgba(var(--gold-rgb), .35); font-weight: 500; }
.prose blockquote { border-left: 4px solid var(--gold); background: var(--gold-t); border-radius: 0 12px 12px 0; padding: 12px 18px; }
.prose img, .post-hero { border-radius: 20px; }
.prose li::marker { color: var(--gold); }

.guide-list { background: none; border: 0; gap: 14px; }
.guide-row { border: 1px solid var(--hair); box-shadow: var(--shadow); grid-template-columns: 48px 1fr; padding: 22px; transition: transform .2s ease, box-shadow .2s ease; }
.guide-row:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.guide-no {
  width: 40px; height: 40px; padding: 0; display: grid; place-items: center; border-radius: 12px;
  background: var(--grad); color: #fff; font: 800 13px var(--display); box-shadow: 0 6px 14px rgba(var(--gold-rgb), .3);
}
.guide-row h2 { font-weight: 800; }

/* ── blog ─ */
.post-grid { gap: 18px; }
.post-card-in { padding: 14px; box-shadow: var(--shadow); transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.post-card-in:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: rgba(var(--gold-rgb), .35); }
.post-cover { border-radius: 12px; }
.post-card h3 { font-size: 19px; font-weight: 800; }
.pill { background: var(--gold-t); color: var(--gold-ink); font-weight: 700; }
.pager a { padding: 8px 16px; border: 1px solid var(--hair-2); border-radius: 999px; background: var(--raise); transition: all .16s ease; }
.pager a:hover { border-color: var(--gold); background: var(--gold-t); }
.toc { box-shadow: var(--shadow); }

.tbl-w { border-radius: 16px; box-shadow: var(--shadow); }
.empty-state { border-radius: 24px; background: var(--raise); }

/* ── footer ─ */
.ft { margin-top: 84px; padding: 56px 0 28px; background: var(--raise); border-top: 1px solid var(--hair); position: relative; }
.ft::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--grad); opacity: .85; }
.ft h4 { color: var(--ink); font-weight: 700; }
.ft li a { transition: color .15s ease, padding-left .15s ease; }
.ft li a:hover { color: var(--gold-ink); padding-left: 3px; }
.ft-bot { border-top-color: var(--hair); }
.ft-credit a { font-weight: 600; }

/* ── small screens ─ */
@media (max-width: 559px) {
  .hero-home { padding-top: 36px; }
  .hero .lede { font-size: 16px; }
  .answer-box { padding: 20px; }
  .split-callout { padding: 24px 20px; border-radius: 22px; }
  .cta-band { padding: 40px 18px; border-radius: 24px; }
  .tool-intro { margin-top: 46px; }
  .stat-i { padding: 18px 10px; }
}


/* ══════════════════════════════════════════════════════════════════════════
   v3 · Red & white redesign
   One accent (crimson), white pages, a red gradient for the header, footer and
   the big call-to-action blocks. Every class name above is unchanged, so the
   admin panel, the tools and the saved content keep working as before.
   ══════════════════════════════════════════════════════════════════════════ */
html { scroll-behavior: smooth; }
body {
  background:
    radial-gradient(900px 420px at 88% -120px, rgba(244,63,94,.10), transparent 70%),
    radial-gradient(700px 360px at -5% 0, rgba(251,146,60,.07), transparent 70%),
    #fff;
  color: var(--ink);
}
h1, h2, h3 { font-family: var(--display); letter-spacing: -.025em; color: var(--ink); }
::selection { background: rgba(225,29,72,.18); }
a { transition: color .15s ease; }
:focus-visible { outline: 3px solid rgba(225,29,72,.35); outline-offset: 2px; border-radius: 6px; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font: 700 11px/1 var(--body); letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold-ink);
}
.eyebrow::before { content: ""; width: 18px; height: 3px; border-radius: 3px; background: var(--grad); }

/* ── hero ── */
.hero { position: relative; padding: 56px 0 8px; }
.hero::before {
  content: ""; position: absolute; inset: 0 0 -10px; z-index: -1;
  background: linear-gradient(180deg, #fff1f2 0%, rgba(255,241,242,.55) 55%, rgba(255,255,255,0) 100%);
}
.hero-kicker {
  padding: 8px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--hair-2);
  box-shadow: 0 2px 10px rgba(225,29,72,.08); text-transform: none; letter-spacing: 0; font-size: 12.5px; font-weight: 600; color: var(--gold-ink);
}
.hero-kicker::before { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px rgba(225,29,72,.16); }
.hero h1 { font-size: clamp(30px, 6.6vw, 54px); line-height: 1.05; font-weight: 800; max-width: 18ch; margin: 16px 0 14px; }
.hero h1 em {
  background: var(--grad-text); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.hero .lede { font-size: 16.5px; color: var(--ink-2); max-width: 58ch; }
.hero-actions { gap: 14px; margin-top: 26px; }
.hero-btn {
  gap: 14px; padding: 14px 22px; border-radius: 999px; font-size: 14.5px; font-weight: 700;
  background: var(--grad); color: #fff; box-shadow: 0 10px 24px rgba(225,29,72,.32);
}
.hero-btn:hover { background: var(--grad); filter: brightness(1.06); transform: translateY(-2px); box-shadow: 0 14px 30px rgba(225,29,72,.38); }
.hero-link {
  padding: 13px 22px; border-radius: 999px; font-size: 14.5px; font-weight: 600; color: var(--gold-ink);
  background: #fff; border: 1.5px solid var(--hair-2);
}
.hero-link:hover { border-color: var(--gold); background: #fff5f5; }
.hero-demo {
  position: relative; border: 1px solid var(--hair); border-radius: var(--r-l); padding: 24px; background: #fff;
  box-shadow: var(--shadow-lg); overflow: hidden;
}
.hero-demo::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--grad); }
.hero-demo .demo-h { font-size: 21px; }

/* ── numbers strip ── */
.stats { gap: 14px; background: none; border: 0; border-radius: 0; overflow: visible; margin-top: 38px; }
.stat-i { border: 1px solid var(--hair); border-radius: var(--r-m); padding: 22px 14px; box-shadow: var(--shadow); }
.stat-i b {
  font-weight: 800; background: var(--grad-text); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.stat-i .stat-l { font-weight: 500; }

/* ── section headings ── */
.tool-intro { margin: 64px 0 24px; }
.tool-intro h2 { font-size: clamp(24px, 4.4vw, 34px); font-weight: 800; }
.tool-intro p { color: var(--ink-2); }

/* ── quick answer ── */
.answer-box {
  border: 1px solid var(--hair); border-left: 0; border-radius: var(--r-l); padding: 26px 28px;
  background: linear-gradient(135deg, #fff5f5 0%, #ffffff 70%); box-shadow: var(--shadow); position: relative; margin-top: 44px;
}
.answer-box::before { content: ""; position: absolute; left: 0; top: 22px; bottom: 22px; width: 5px; border-radius: 0 5px 5px 0; background: var(--grad); }
.answer-box p { font-size: 16.5px; line-height: 1.7; }

/* ── tool cards ── */
.tool-grid { gap: 16px; }
.tool-card {
  border: 1px solid var(--hair); border-radius: 20px; padding: 22px; background: #fff; box-shadow: var(--shadow);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; position: relative; overflow: hidden;
}
.tool-card::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--grad); transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
.tool-card:hover { transform: translateY(-5px); border-color: rgba(225,29,72,.35); box-shadow: var(--shadow-lg); }
.tool-card:hover::after { transform: scaleX(1); }
.tool-card h3 { font-size: 18px; font-weight: 700; }
.tool-card p { font-size: 13.5px; color: var(--ink-2); }
.tool-card-link, .guide-link { font-size: 13px; font-weight: 700; color: var(--gold-ink); }
.tool-card-link:hover, .guide-link:hover { color: var(--gold-d); }
.tool-icon-box { background: var(--grad); color: #fff; border: 0; border-radius: 12px; box-shadow: 0 6px 14px rgba(225,29,72,.28); }
.tool-icon-box svg { stroke: #fff; }
.tool-cat { color: var(--gold-ink); font-weight: 600; }

/* ── category boxes ── */
.cat-box { border: 1px solid var(--hair); border-radius: 20px; background: #fff; box-shadow: var(--shadow); padding: 22px; }
.cat-box h3 small { background: var(--gold-t); color: var(--gold-ink); border-radius: 999px; padding: 2px 9px; font-weight: 700; }
.cat-box li a { border-radius: 10px; transition: background .15s ease, transform .15s ease; }
.cat-box li a:hover { background: #fff1f2; color: var(--gold-ink); transform: translateX(3px); }

/* ── red highlight panel ── */
.split-callout {
  border: 0; border-radius: 28px; padding: 34px; margin-top: 64px; color: #fff; position: relative; overflow: hidden;
  background: var(--grad-hd); box-shadow: 0 24px 50px rgba(190,18,60,.28);
}
.split-callout::before, .cta-band::before {
  content: ""; position: absolute; width: 360px; height: 360px; right: -90px; top: -150px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.22), transparent 68%); pointer-events: none;
}
.split-callout h2, .split-callout p { color: #fff; }
.split-callout p { opacity: .92; }
.split-callout .eyebrow { color: #ffe4e6; }
.split-callout .eyebrow::before { background: #fff; }
.callout-list > div { background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28); border-radius: 16px; backdrop-filter: blur(4px); }
.callout-list b { color: #fff; }
.callout-list .stat-l { color: #fff; }

/* ── steps & features ── */
.step, .feature {
  border: 1px solid var(--hair); border-radius: 20px; background: #fff; box-shadow: var(--shadow); padding: 24px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.step:hover, .feature:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.step-n {
  width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; margin-bottom: 14px;
  background: var(--grad); color: #fff; font: 800 16px var(--display); box-shadow: 0 8px 18px rgba(225,29,72,.3);
}
.feature h3, .step h3 { font-size: 18px; font-weight: 700; }
.feature p, .step p { color: var(--ink-2); font-size: 14px; }

/* ── about block ── */
.about-block { margin-top: 64px; border: 1px solid var(--hair); border-radius: var(--r-l); padding: 32px; background: linear-gradient(180deg, #fff, #fff7f7); box-shadow: var(--shadow); }
.about-block h2 { font-size: clamp(24px, 4.2vw, 32px); font-weight: 800; }
.about-cols p { color: var(--ink-2); }

/* ── closing band ── */
.cta-band {
  position: relative; overflow: hidden; margin: 70px 0 20px; padding: 46px 32px; border-radius: 30px; text-align: center; color: #fff;
  background: var(--grad-hd); box-shadow: 0 26px 54px rgba(190,18,60,.3);
}
.cta-band h2 { color: #fff; font-size: clamp(26px, 5vw, 38px); font-weight: 800; }
.cta-band p { color: #ffe4e6; max-width: 56ch; margin: 10px auto 22px; }
.cta-band .hero-btn { background: #fff; color: var(--gold-ink); box-shadow: 0 12px 26px rgba(0,0,0,.18); }
.cta-band .hero-btn:hover { background: #fff; filter: none; }

/* ── FAQ ── */
.faq-block { max-width: 820px; }
.faq-block h2 { font-size: clamp(22px, 4vw, 30px); font-weight: 800; }
.faq-block details { border: 1px solid var(--hair); border-radius: 14px; padding: 4px 18px; margin-bottom: 10px; background: #fff; transition: border-color .15s ease, box-shadow .15s ease; }
.faq-block details:last-child { border-bottom: 1px solid var(--hair); }
.faq-block details[open] { border-color: rgba(225,29,72,.4); box-shadow: var(--shadow); }
.faq-block summary { padding: 13px 0; font-weight: 600; font-size: 15px; color: var(--ink); }
.faq-block summary::marker { color: var(--gold); }
.faq-block p, .faq-block li { color: var(--ink-2); font-size: 14.5px; }

/* ── tool & content pages ── */
.tool-hero { padding-bottom: 20px; }
.tool-title { display: flex; align-items: center; gap: 16px; margin-top: 8px; }
.tool-panel {
  border: 1px solid var(--hair); border-radius: 22px; padding: 26px; background: #fff; box-shadow: var(--shadow-lg); position: relative; overflow: hidden;
}
.tool-panel::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--grad); }
.tool-embed { box-shadow: none; border: 1px solid var(--hair); }
.tool-embed::before { display: none; }
.pg-h { border-bottom: 0; padding: 44px 0 12px; }
.pg-h h1 { font-weight: 800; }
.crumbs { font-size: 13px; }
.prose { color: var(--ink-2); font-size: 16px; line-height: 1.8; }
.prose h2 { font-size: clamp(20px, 3.6vw, 26px); font-weight: 800; margin: 38px 0 12px; }
.prose h3 { font-size: 18px; margin: 26px 0 8px; }
.prose a { color: var(--gold-ink); border-bottom: 1.5px solid rgba(225,29,72,.3); font-weight: 500; }
.prose blockquote { margin: 18px 0; padding: 14px 18px; border-left: 4px solid var(--gold); background: #fff5f5; border-radius: 0 12px 12px 0; }
.prose table { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: 14.5px; }
.prose th { background: #fff1f2; color: var(--gold-d); text-align: left; padding: 10px 12px; }
.prose td { padding: 10px 12px; border-bottom: 1px solid var(--hair); }
.tool-about { margin-top: 44px; }
.upd { color: var(--ink-3); font-size: 13px; }

/* ── inputs, buttons, results ── */
input, select, textarea { font-family: var(--body); }
.tool-panel input, .tool-panel select {
  border: 1.5px solid var(--hair-2); border-radius: 12px; background: #fff; color: var(--ink); padding: 11px 12px; font-size: 15px; transition: border-color .15s ease, box-shadow .15s ease;
}
.tool-panel input:focus, .tool-panel select:focus { outline: 0; border-color: var(--gold); box-shadow: 0 0 0 4px rgba(225,29,72,.14); }
.input-unit input, .input-unit select { border-radius: 12px 0 0 12px; }
.input-unit b, .field-suffix { background: #fff1f2; color: var(--gold-ink); border: 1.5px solid var(--hair-2); border-left: 0; border-radius: 0 12px 12px 0; font-weight: 700; font-size: 11.5px; }
.tool-panel label { font-weight: 600; font-size: 13.5px; color: var(--ink-2); }
.calc-btn {
  padding: 13px 22px; border-radius: 999px; font-size: 14.5px; font-weight: 700; background: var(--grad); color: #fff;
  box-shadow: 0 10px 22px rgba(225,29,72,.3);
}
.calc-btn:hover { background: var(--grad); filter: brightness(1.07); transform: translateY(-1px); }
.result-box {
  border: 1.5px solid rgba(225,29,72,.22); background: linear-gradient(135deg, #fff5f6, #fff); border-radius: 16px; padding: 16px 18px; font-size: 14.5px;
}
.result-box strong { color: var(--gold-ink); font-size: 1.12em; }
.result-box.calculating { border-color: var(--gold); }
.requirement-list label { border: 1.5px solid var(--hair-2); border-radius: 12px; background: #fff; transition: border-color .15s ease, background .15s ease; }
.requirement-list label:hover { border-color: var(--gold); background: #fff5f5; }
.requirement-list input { accent-color: var(--gold); }
.latency-scale span { border-radius: 999px; }
.conversion-list span { border: 1px solid var(--hair); border-radius: 12px; background: #fff; }
.conversion-list b { color: var(--gold-ink); }

/* advanced tool extras */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.chips i { font-style: normal; font-size: 12.5px; font-weight: 600; color: var(--gold-d); background: #fff; border: 1px solid var(--hair-2); border-radius: 999px; padding: 5px 11px; }
.chips i b { color: var(--ink); }
.meter { height: 10px; border-radius: 99px; background: #ffe4e6; overflow: hidden; margin: 10px 0 2px; width: 100%; }
.meter > em { display: block; height: 100%; border-radius: 99px; background: var(--grad); transition: width .6s cubic-bezier(.2,.9,.3,1); }
.result-box.rich { display: block; }
.result-box.rich small, .result-box.rich span { display: block; }
.note { font-size: 13px; color: var(--ink-3); margin: 12px 0 0; }

/* ── ads: always labelled ── */
.ad { margin: 28px auto; text-align: center; min-height: 20px; }
.ad-l { display: block; font: 600 10.5px/1 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; }

/* ── blog ── */
.post-card { border: 1px solid var(--hair); border-radius: 20px; background: #fff; box-shadow: var(--shadow); overflow: hidden; transition: transform .2s ease, box-shadow .2s ease; }
.post-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.tag { background: var(--gold-t); color: var(--gold-ink); border-radius: 999px; font-weight: 700; }
.toc { border: 1px solid var(--hair); border-radius: 16px; background: #fff5f5; }

/* ── footer ── */
.ft {
  position: relative; margin-top: 80px; padding: 56px 0 26px; color: #ffe4e6; background: var(--grad-hd); border-top: 0; overflow: hidden;
}
.ft::before { content: ""; position: absolute; width: 520px; height: 520px; left: -160px; top: -300px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.16), transparent 70%); pointer-events: none; }
.ft .wrap { position: relative; }
.ft .brand .bn, .ft .brand { color: #fff; }
.ft .brand .mark { background: #fff; color: var(--gold-ink); }
.ft-top { gap: 36px; }
.ft-d, .ft-d a { color: #ffe4e6; border: 0; }
.ft-d a:hover { color: #fff; text-decoration: underline; }
.ft h4 { color: #fff; font-size: 12px; letter-spacing: .16em; }
.ft li a { color: #ffe4e6; font-size: 14px; }
.ft li a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.ft-bot { border-top: 1px solid rgba(255,255,255,.28); color: #ffd5da; font-size: 12.5px; margin-top: 40px; }
.ft-bot a, .ft-credit a { color: #fff; font-weight: 600; }
.ft-legal { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.ft-legal a { color: #fff; }

@media (min-width: 900px) {
  .ft-top { grid-template-columns: 1.6fr 1fr 1fr 1fr; }
  .hero { padding: 76px 0 12px; }
  .stats { grid-template-columns: repeat(4, 1fr); }
  .hero-grid { grid-template-columns: 1.05fr .95fr; gap: 44px; }
}
@media (max-width: 640px) {
  .split-callout { padding: 24px; border-radius: 22px; }
  .cta-band { padding: 34px 20px; border-radius: 24px; }
  .tool-panel { padding: 20px 16px; }
  .about-block { padding: 22px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition-duration: .01ms !important; animation-duration: .01ms !important; } }