/* ══════════════════════════════════════════════════════════════════════════
   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:      #f6f7fb;
  --raise:   #ffffff;
  --raise-2: #f0f2f9;
  --hair:    #e6e9f2;
  --hair-2:  #d3d8e6;

  --ink:     #0f1226;
  --ink-2:   #464c66;
  --ink-3:   #6b7290;

  --gold:      #6366f1;      /* accent fills */
  --gold-ink:  #4f46e5;      /* accent used as text */
  --gold-d:    #4338ca;
  --gold-rgb:  99, 102, 241;
  --gold-t:    rgba(99, 102, 241, .10);
  --gold-hover:#4f46e5;
  --on-gold:   #ffffff;

  --violet-rgb: 139, 92, 246;
  --grad:      linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
  --grad-text: linear-gradient(120deg, #4f46e5 0%, #7c3aed 55%, #0ea5e9 110%);

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

  --bg-rgb:    246, 247, 251;
  --shadow:    0 1px 2px rgba(16, 24, 64, .04), 0 8px 24px rgba(16, 24, 64, .06);
  --shadow-lg: 0 2px 4px rgba(16, 24, 64, .04), 0 20px 44px rgba(79, 70, 229, .16);

  --r-s: 8px;
  --r-m: 14px;
  --r-l: 22px;

  --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;   /* figures: tabular numbers, set where used */

  --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:      #818cf8;
  --gold-ink:  #a5b4fc;
  --gold-d:    #6366f1;
  --gold-rgb:  129, 140, 248;
  --gold-t:    rgba(129, 140, 248, .13);
  --gold-hover:#6366f1;
  --on-gold:   #ffffff;

  --grad:      linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  --grad-text: linear-gradient(120deg, #a5b4fc 0%, #c4b5fd 55%, #7dd3fc 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(99, 102, 241, .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: #a5b4fc; }
.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, #4f46e5 0%, #7c3aed 60%, #0ea5e9 130%); color: #fff;
  box-shadow: 0 26px 60px rgba(79, 70, 229, .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: #4338ca; 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; }
}