/* ══════════════════════════════════════════════════════════════════════════
   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; }
}

/* MA Jobs application actions */
.article-apply{display:flex;justify-content:center;margin:18px 0 28px}
.apply-box{margin:32px 0;padding:22px;border:1px solid var(--hair);border-radius:var(--r-l);background:var(--raise);display:flex;align-items:center;justify-content:space-between;gap:20px}
.apply-box h2{margin:4px 0 6px}.apply-box p{margin:0;color:var(--ink-2)}
.article-image{margin:22px 0}.article-image figcaption{font-size:12px;color:var(--ink-3);text-align:center;margin-top:7px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 17px;border:1px solid var(--gold);border-radius:10px;background:var(--grad);color:#fff;font-weight:700;cursor:pointer}
.btn:hover{filter:brightness(1.05)}
.form-card{max-width:760px;margin:30px auto;padding:24px;border:1px solid var(--hair);border-radius:var(--r-l);background:var(--raise);box-shadow:var(--shadow)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.form-grid .full{grid-column:1/-1}.form-card label{display:block;font-weight:600;font-size:13px}.form-card input,.form-card textarea,.form-card select{width:100%;margin-top:7px;padding:11px 12px;border:1px solid var(--hair-2);border-radius:9px;background:var(--bg);color:var(--ink);font:inherit}.form-card textarea{min-height:120px;resize:vertical}.form-card .hint{font-size:12px;color:var(--ink-3);margin-top:5px}.ref-box{text-align:center;padding:30px;border:1px solid var(--hair);border-radius:var(--r-l);background:var(--raise)}.ref-no{font-size:25px;font-weight:800;letter-spacing:.04em;margin:10px 0 20px;color:var(--gold-ink)}.status-table{width:100%;border-collapse:collapse}.status-table td{padding:12px;border-bottom:1px solid var(--hair)}.status-table td:first-child{font-weight:600;width:180px}
@media(max-width:650px){.form-grid{grid-template-columns:1fr}.form-grid .full{grid-column:auto}.apply-box{display:block}.apply-box .btn{margin-top:16px}.status-table td{display:block;width:auto!important}}

.post-cover-wrap{position:relative}.card-apply{position:absolute;right:12px;bottom:12px;padding:7px 11px;border-radius:8px;background:var(--gold);color:#fff;font-size:12px;font-weight:700;box-shadow:var(--shadow)}


/* MA Jobs V7: verified ticks, separate payment cards, green apply actions and app-like mobile navigation. */
.verified-tick{display:inline-grid;place-items:center;width:17px;height:17px;margin-left:5px;border-radius:50%;background:#1d9bf0;color:#fff;font-size:11px;font-weight:900;line-height:1;vertical-align:middle;box-shadow:0 0 0 2px var(--raise)}
.payment-admin-method{margin:16px 0;padding:16px;border:1px solid var(--hair);border-radius:16px;background:var(--raise-2)}
.payment-admin-head,.payment-brand-row{display:flex;align-items:center;gap:13px;margin-bottom:12px}
.payment-admin-head h3,.payment-brand-row h2{margin:0}
.payment-logo{display:inline-flex;align-items:center;justify-content:center;min-width:92px;height:42px;padding:0 12px;border-radius:10px;font-weight:800;letter-spacing:-.03em;box-shadow:var(--shadow);flex:0 0 auto}
.payment-logo-jazz{background:#fff;color:#e30613;border:1px solid #eee}
.payment-logo-easy{background:#fff;color:#1b9b3b;border:1px solid #eee;font-size:15px}
.payment-logo-bank{background:var(--ink);color:var(--raise);border:1px solid var(--hair)}
.payment-logo-img{display:block;width:150px;height:42px;object-fit:contain;border-radius:10px;box-shadow:var(--shadow);background:#fff;flex:0 0 auto}
.payment-methods{display:grid;gap:2px}
.payment-method-title{padding:4px 2px 10px}
.payment-method-card{margin:0 0 12px}
.payment-method-card p:last-child{margin-bottom:0}
.payment-number{font-family:var(--mono);font-size:24px;font-weight:800;letter-spacing:.02em;color:var(--gold-ink)}
.apply-btn,.article-apply .btn,.apply-box .btn,.card-apply{background:#16a34a!important;border-color:#16a34a!important}
.apply-btn:hover,.article-apply .btn:hover,.apply-box .btn:hover,.card-apply:hover{filter:brightness(1.06)}
.mobile-bottom-nav{display:none}

@media(max-width:819px){
  body{padding-bottom:72px}
  .mobile-bottom-nav{position:fixed;left:0;right:0;bottom:0;z-index:70;display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:2px;padding:7px 6px calc(7px + env(safe-area-inset-bottom));background:rgba(255,255,255,.96);border-top:1px solid var(--hair);box-shadow:0 -10px 30px rgba(16,24,64,.10);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
  :root[data-theme="dark"] .mobile-bottom-nav{background:rgba(17,21,42,.96)}
  .mbn-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:0;padding:4px 2px;border-radius:11px;color:var(--ink-3);font-size:10px;font-weight:700;line-height:1.15}
  .mbn-item.on{color:var(--gold-ink);background:var(--gold-t)}
  .mbn-ic{display:grid;place-items:center;width:25px;height:25px;font-size:18px;font-weight:800}
  .mbn-check{border-radius:50%;background:#1d9bf0;color:#fff;font-size:13px}
  .payment-brand-row{align-items:flex-start}
  .payment-logo-img{width:125px;height:38px}
  .payment-logo{min-width:82px;height:38px}
  .payment-number{font-size:20px;word-break:break-word}
}

/* MA Jobs V8 application deadline */
.apply-ended{background:#6b7280!important;border-color:#6b7280!important;cursor:not-allowed;pointer-events:none}.deadline-note{margin:10px 0 0;font-weight:700;color:#166534}.deadline-note.ended{color:#b91c1c}.card-apply.ended{background:#6b7280!important}

/* MA Jobs V9 branding + social home */
.brand-verified{display:inline-flex;align-items:center;gap:8px}
.brand-verified .brand-logo{display:block;width:auto;height:32px;max-width:180px;object-fit:contain}
.brand-verified .verified-tick{flex:0 0 auto}
.social-home{margin-top:42px}
.social-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.social-card{padding:20px;border:1px solid var(--hair);border-radius:22px;background:var(--raise);box-shadow:var(--shadow);overflow:hidden}
.social-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}.social-head h3{margin:0}.social-head p{margin:2px 0 0;color:var(--ink-3);font-size:13px}
.social-icon{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;color:#fff;font-weight:800;font-size:22px}.social-icon.fb{background:#1877f2}.social-icon.wa{background:#25d366}.social-icon.other{background:#111827}
.social-embed{width:100%;min-height:80px;overflow:hidden;border-radius:14px;background:var(--bg)}.social-embed iframe{max-width:100%;display:block}
@media(max-width:700px){.social-grid{grid-template-columns:1fr}.brand-verified .brand-logo{height:28px;max-width:150px}.brand-verified .bn{font-size:16px}.verified-tick{width:16px;height:16px}}

/* V11 branding, category icons and dark-mode application form */
.hd-nav a{display:inline-flex;align-items:center;gap:6px}.cat-ic{flex:0 0 auto}
.brand-verified .brand-logo{height:38px;max-width:205px}
.mbn-ic .cat-ic{width:20px;height:20px}
@media(max-width:819px){.brand-verified .brand-logo{height:34px;max-width:165px}.hd .brand{max-width:180px;overflow:hidden}}

/* V13: category-grouped home, responsive header and fast lightweight loading */
.home-cat-block{margin:0 0 38px}.home-cat-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 14px}.home-cat-title{display:flex;align-items:center;gap:12px}.home-cat-title h2{font-size:22px}.home-cat-icon{width:44px;height:44px;display:grid;place-items:center;border-radius:14px;background:var(--gold-t);color:var(--gold-ink);border:1px solid var(--hair)}.home-cat-icon .cat-ic{width:22px;height:22px}.home-cat-head .tool-card-link{white-space:nowrap}.site-loader{font-family:Arial,sans-serif}
@media(max-width:600px){.home-cat-head{align-items:flex-end}.home-cat-title h2{font-size:19px}.home-cat-icon{width:40px;height:40px}.home-cat-block{margin-bottom:30px}.home-category-sections .post-grid{grid-template-columns:1fr}.post-card{min-width:0}.post-card p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}}

/* Keep the single MA Jobs logo compact on small screens. */
.hd .brand-verified .brand-logo{display:block!important;max-width:100%;object-fit:contain}
.hd .brand-verified{min-width:0;overflow:hidden}
.hd .brand-verified .brand-logo{flex:0 1 auto}
@media(max-width:819px){.hd-in{padding-left:14px;padding-right:10px}.hd-nav{font-size:14px}.mobile-bottom-nav{grid-template-columns:repeat(6,1fr);padding-left:3px;padding-right:3px}.mbn-item{font-size:9px}.mbn-ic{width:28px;height:24px}}

/* V14 MA Jobs green identity */
:root{
  --gold:#16a34a; --gold-ink:#15803d; --gold-d:#166534; --gold-rgb:22,163,74;
  --gold-t:rgba(22,163,74,.10); --gold-hover:#15803d; --mint:#16a34a; --mint-rgb:22,163,74;
  --grad:linear-gradient(135deg,#16a34a 0%,#15803d 100%);
  --grad-text:linear-gradient(120deg,#16a34a 0%,#15803d 70%,#166534 110%);
}
.post-card-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:0 14px 14px}
.post-card-read,.post-action{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:38px;padding:8px 12px;border-radius:10px;font-size:13px;font-weight:800;border:1px solid var(--hair);background:var(--raise-2)}
.post-card-read{color:var(--ink)}
.post-action.apply{background:#16a34a;color:#fff;border-color:#16a34a}
.post-action.status{background:transparent;color:#15803d;border-color:#16a34a}
.post-action.ended{color:#64748b;background:var(--raise-2)}
.post-card-actions a:hover{transform:translateY(-1px)}
.prose h2{font-size:25px;font-weight:800;color:var(--ink);margin:34px 0 12px}
.prose h3{font-size:20px;font-weight:800;color:var(--ink);margin:26px 0 10px}
.prose p{margin:0 0 1.05em}.prose u{text-decoration-thickness:2px}.prose [style*="text-align:center"]{text-align:center}.prose [style*="text-align:right"]{text-align:right}
.article-apply .btn,.apply-box .btn,.btn{background:#16a34a;border-color:#16a34a}
.status-btn{background:#16a34a!important}
@media(max-width:600px){.post-card-actions{display:grid;grid-template-columns:1fr 1fr}.post-card-read{grid-column:1/-1}.post-action{width:100%}}

/* MA Jobs V15 home board */
.breaking-strip{border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);background:var(--raise);overflow:hidden}.breaking-in{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;min-height:44px}.breaking-label{background:#16a34a;color:#fff;border-radius:7px;padding:6px 10px;font-size:10px;font-weight:900;letter-spacing:.08em}.breaking-track{overflow:hidden;white-space:nowrap}.breaking-move{display:inline-flex;align-items:center;gap:13px;min-width:max-content;animation:newsMove 28s linear infinite}.breaking-move a{color:var(--ink);font-size:13px;font-weight:650}.breaking-move b{color:#16a34a}.breaking-in time{font-size:12px;color:var(--ink-2);white-space:nowrap;font-weight:700}@keyframes newsMove{from{transform:translateX(0)}to{transform:translateX(-45%)}}
.site-info-bar{background:var(--raise-2);border-bottom:1px solid var(--hair);font-size:12px}.site-info-in{min-height:34px;display:flex;align-items:center;gap:10px}.site-info-breaking{font-weight:900;color:#15803d}.site-info-news{display:flex;align-items:center;gap:8px;overflow:hidden;white-space:nowrap;flex:1}.site-info-news a{color:var(--ink-2);font-weight:600}.site-info-news b{color:#16a34a}.site-info-in time{font-size:12px;color:var(--ink-2);white-space:nowrap;font-weight:700}
.opportunity-board{padding-top:12px}.op-cat{margin:0 0 28px}.op-cat-head{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid var(--hair)}.op-cat-head h2{margin:2px 0 0;font-size:21px}.op-list{border:1px solid var(--hair);border-radius:14px;overflow:hidden;background:var(--raise);box-shadow:var(--shadow)}.op-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:16px;padding:12px 14px;border-bottom:1px solid var(--hair)}.op-row:last-child{border-bottom:0}.op-title{min-width:0;display:flex;align-items:center;gap:12px;color:var(--ink);font-weight:750}.op-title>span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.op-date{flex:0 0 auto;font-size:11px;color:#15803d;background:#eaf8ef;border-radius:7px;padding:5px 7px;font-weight:800}.op-actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap;justify-content:flex-end}.op-actions a,.op-ended{display:inline-flex;align-items:center;justify-content:center;border-radius:8px;padding:7px 10px;font-size:11.5px;font-weight:800;white-space:nowrap}.op-read{color:var(--ink-2);border:1px solid var(--hair-2);background:var(--raise)}.op-apply{background:#16a34a;color:#fff!important;border:1px solid #16a34a}.op-status{color:#15803d;border:1px solid #b7ddc2;background:#f3fbf5}.op-ended{color:#b45309;background:#fff7ed;border:1px solid #fed7aa}.post-card-actions{padding-top:8px}.post-card-read{font-weight:750;color:var(--ink-2)}
@media(max-width:700px){.breaking-in{grid-template-columns:auto 1fr;gap:8px}.breaking-in time{grid-column:1/-1;padding-bottom:7px}.op-row{grid-template-columns:1fr;gap:9px}.op-actions{justify-content:flex-start}.op-title>span:last-child{white-space:normal}.site-info-news{display:none}.site-info-in{justify-content:space-between}}

/* V17 public contact, reviews, team and Urdu typography */
@font-face{font-family:"Noto Nastaliq Urdu Local";src:url("NotoNastaliqUrdu-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Noto Nastaliq Urdu Local";src:url("NotoNastaliqUrdu-Bold.ttf") format("truetype");font-weight:700;font-style:normal;font-display:swap}
.urdu-content,[dir="rtl"],.urdu{font-family:"Jameel Noori Nastaleeq","Noto Nastaliq Urdu Local","Noto Nastaliq Urdu",serif;direction:rtl;text-align:right;line-height:2.1}
.urdu-content p,.urdu-content li,.urdu-content h2,.urdu-content h3,.urdu-content blockquote{font-family:inherit}
.review-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.review-card{padding:22px;border:1px solid var(--hair);border-radius:18px;background:var(--raise)}.review-stars{color:#16a34a;letter-spacing:2px;margin-bottom:8px}.review-card p{margin:0 0 14px;color:var(--ink-2);line-height:1.7}.review-card strong{display:block}.review-card span{display:block;color:var(--ink-3);font-size:13px;margin-top:3px}.team-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.team-card{display:flex;gap:14px;padding:20px;border:1px solid var(--hair);border-radius:18px;background:var(--raise);align-items:flex-start}.team-card img,.team-avatar{width:76px;height:76px;border-radius:50%;object-fit:cover;flex:0 0 76px}.team-avatar{display:grid;place-items:center;background:#16a34a;color:#fff;font-size:30px;font-weight:800}.team-card h3{margin:0 0 3px}.team-card b{font-size:13px;color:#16a34a}.team-card p{margin:8px 0 0;color:var(--ink-2);line-height:1.55}@media(max-width:800px){.review-grid,.team-grid{grid-template-columns:1fr}.team-card{padding:16px}}

/* V18 application analytics and verification strip */
.public-app-status{padding-top:10px}.public-app-chart{display:grid;gap:11px;padding:20px;border:1px solid var(--hair);border-radius:20px;background:var(--card)}.public-app-bar{display:grid;grid-template-columns:140px 1fr 45px;gap:12px;align-items:center}.public-app-bar>div{height:12px;background:var(--hair);border-radius:999px;overflow:hidden}.public-app-bar i{display:block;height:100%;background:#16a34a;border-radius:999px}.verified-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.verified-card{border:1px solid var(--hair);border-radius:18px;padding:18px;text-decoration:none;color:inherit;background:var(--card);display:flex;flex-direction:column;align-items:center;text-align:center;min-height:150px;justify-content:center}.verified-logo{height:58px;width:100%;display:flex;align-items:center;justify-content:center;margin-bottom:10px}.verified-logo img{max-height:54px;max-width:150px;object-fit:contain}.verified-logo span{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;background:#16a34a;color:#fff;font-weight:900;font-size:24px}.verified-card small{color:var(--ink-2)}.verified-card strong{margin-top:4px}@media(max-width:800px){.verified-grid{grid-template-columns:repeat(2,1fr)}.public-app-bar{grid-template-columns:115px 1fr 35px}}@media(max-width:520px){.verified-grid{grid-template-columns:1fr 1fr}.public-app-bar{grid-template-columns:100px 1fr 30px;font-size:12px}}

/* V22 home shop logo + WhatsApp support */
.hero-home-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,420px);gap:42px;align-items:center}.shop-hero-logo{animation:shopLogoFloat 3.2s ease-in-out infinite}.shop-hero-logo img{display:block;width:100%;height:auto;filter:drop-shadow(0 16px 26px rgba(16,24,40,.14))}@keyframes shopLogoFloat{0%,100%{transform:translateY(0) rotate(-.3deg)}50%{transform:translateY(-7px) rotate(.3deg)}}.wa-float{position:fixed;right:20px;bottom:86px;z-index:90;display:flex;align-items:center;gap:9px;padding:12px 16px;border-radius:999px;background:#16a34a;color:#fff!important;text-decoration:none!important;box-shadow:0 12px 30px rgba(22,163,74,.28);font-weight:800}.wa-float span{font-size:23px}.wa-float b{font-size:13px}@media(max-width:760px){.hero-home-layout{grid-template-columns:1fr;gap:20px}.shop-hero-logo{max-width:330px;margin:0 auto}.wa-float{right:14px;bottom:78px;padding:11px 13px}.wa-float b{display:none}}

/* V24: text-only Mashallah Computer & Mobile Shop wordmark */
.shop-hero-logo{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:0;min-height:150px;overflow:visible;animation:shopLogoFloat 3.4s ease-in-out infinite;text-align:center}.shop-hero-logo .shop-line{display:block;font-family:"Jameel Noori Nastaleeq","Noto Nastaliq Urdu Local","Noto Nastaliq Urdu",serif;font-weight:700;line-height:1.35;white-space:nowrap;text-shadow:0 5px 10px rgba(15,23,42,.10);animation:shopWordmarkPulse 3.6s ease-in-out infinite}.shop-hero-logo .shop-dark{font-size:clamp(30px,4.4vw,56px);color:#241719}.shop-hero-logo .shop-orange{font-size:clamp(36px,5.2vw,68px);color:#e39a00;margin-top:-8px}.shop-hero-logo .shop-line:after{content:"";display:block;height:3px;border-radius:999px;width:48%;margin:0 auto;opacity:.35}.shop-hero-logo .shop-orange:after{background:#e39a00}.shop-hero-logo .shop-dark:after{background:#241719}.shop-hero-logo img{display:none}@keyframes shopLogoFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}@keyframes shopWordmarkPulse{0%,100%{filter:drop-shadow(0 3px 5px rgba(15,23,42,.08))}50%{filter:drop-shadow(0 7px 12px rgba(227,154,0,.20))}}
@media(max-width:760px){.hero-home-layout{grid-template-columns:1fr;gap:20px}.shop-hero-logo{min-height:120px;max-width:100%;margin:0 auto}.shop-hero-logo .shop-dark{font-size:clamp(25px,8vw,40px)}.shop-hero-logo .shop-orange{font-size:clamp(31px,9vw,47px);margin-top:-4px}.shop-hero-logo .shop-line{white-space:normal}}


/* V25: bilingual application fields, Urdu home hero and animated shop wordmark */
.urdu-hero-copy{font-family:"Jameel Noori Nastaleeq","Noto Nastaliq Urdu Local","Noto Nastaliq Urdu",serif;text-align:right;direction:rtl}.urdu-hero-copy h1{line-height:1.7;font-weight:800}.urdu-hero-copy .lede{line-height:2.25}.shop-hero-logo .shop-line{display:flex;flex-wrap:wrap;justify-content:center;gap:.18em;direction:rtl}.shop-hero-logo .shop-line>span{display:inline-block;animation:shopWord 3.2s ease-in-out infinite}.shop-hero-logo .shop-line>span:nth-child(2){animation-delay:.35s}.shop-hero-logo .shop-line>span:nth-child(3){animation-delay:.7s}.shop-hero-logo .shop-orange>span:nth-child(2){animation-delay:.35s}@keyframes shopWord{0%,100%{transform:translateY(0);opacity:.86}50%{transform:translateY(-6px);opacity:1;filter:drop-shadow(0 5px 9px rgba(227,154,0,.25))}}
.field-card{display:flex!important;flex-direction:column;gap:4px}.field-label-en{font-weight:800}.field-label-ur{font-family:"Jameel Noori Nastaleeq","Noto Nastaliq Urdu Local","Noto Nastaliq Urdu",serif;font-size:1.05em;line-height:1.8;color:#15803d;text-align:right;display:block}.field-instructions{display:flex;flex-direction:column;gap:2px;color:var(--ink-2);line-height:1.55}.field-instruction-ur{font-family:"Jameel Noori Nastaleeq","Noto Nastaliq Urdu Local","Noto Nastaliq Urdu",serif;direction:rtl;text-align:right;line-height:2}.form-guide-banner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:15px 18px;margin:0 0 18px;border:1px solid #b7ddc2;border-radius:16px;background:#f3fbf5}.form-guide-banner b{display:block;font-family:"Jameel Noori Nastaleeq","Noto Nastaliq Urdu Local",serif;font-size:20px;line-height:1.7;color:#15803d}.form-guide-banner span{display:block;color:var(--ink-2);font-size:13px}@media(max-width:650px){.form-guide-banner{flex-direction:column;align-items:stretch}.form-guide-banner .btn{text-align:center}.urdu-hero-copy h1{font-size:clamp(30px,9vw,46px)}.shop-hero-logo .shop-line{gap:.1em}}

/* V26: polished Urdu hero, accessible animated wordmark and bilingual form labels */
.urdu-hero-copy{font-family:"Jameel Noori Nastaleeq","Noto Nastaliq Urdu Local","Noto Nastaliq Urdu",serif;direction:rtl;text-align:right}
.urdu-hero-copy h1.typewriter{min-height:2.1em;margin-bottom:18px;font-family:"Jameel Noori Nastaleeq","Noto Nastaliq Urdu Local","Noto Nastaliq Urdu",serif;line-height:1.85;font-weight:800;letter-spacing:0}
.urdu-hero-copy .typewriter-lede{min-height:4.8em;font-family:"Jameel Noori Nastaleeq","Noto Nastaliq Urdu Local","Noto Nastaliq Urdu",serif;line-height:2.35}
.typewriter{overflow-wrap:anywhere}

/* The shop mark is text-only. No underline and strong contrast in both themes. */
.shop-hero-logo{position:relative;animation:shopLogoFloat 3.8s ease-in-out infinite}
.shop-hero-logo .shop-line:after{display:none!important}
.shop-hero-logo .shop-line{font-family:"Jameel Noori Nastaleeq","Noto Nastaliq Urdu Local","Noto Nastaliq Urdu",serif;text-decoration:none!important;border:0!important}
.shop-hero-logo .shop-dark{color:#241719}
.shop-hero-logo .shop-orange{color:#e39a00}
:root[data-theme="dark"] .shop-hero-logo .shop-dark{color:#fff7ed}
:root[data-theme="dark"] .shop-hero-logo .shop-orange{color:#ffb300}
.shop-hero-logo .shop-line>span{animation:shopWordV26 2.8s ease-in-out infinite}
.shop-hero-logo .shop-line>span:nth-child(2){animation-delay:.32s}
.shop-hero-logo .shop-line>span:nth-child(3){animation-delay:.64s}
.shop-hero-logo .shop-orange>span:nth-child(1){animation-delay:.18s}
.shop-hero-logo .shop-orange>span:nth-child(2){animation-delay:.50s}
@keyframes shopWordV26{0%,100%{transform:translateY(0);opacity:.78;filter:none}45%{transform:translateY(-5px);opacity:1;filter:drop-shadow(0 5px 10px rgba(227,154,0,.25))}}

/* English and Urdu field labels sit on the same row; Urdu stays RTL. */
.field-label-row{display:flex!important;align-items:center;justify-content:space-between;gap:16px;width:100%}
.field-label-row .field-label-en{flex:1 1 auto;text-align:left}
.field-label-row .field-label-ur{flex:1 1 auto;margin:0!important;text-align:right!important;direction:rtl;line-height:1.7!important}
.field-instructions{display:flex!important;flex-direction:row!important;align-items:baseline;justify-content:space-between;gap:16px;width:100%}
.field-instructions>span:first-child{flex:1 1 50%}
.field-instruction-ur{flex:1 1 50%;text-align:right!important}
@media(max-width:650px){
 .field-label-row,.field-instructions{gap:10px}
 .field-label-row .field-label-en,.field-label-row .field-label-ur{font-size:13px}
 .field-instructions{flex-direction:column!important;align-items:stretch;gap:2px}
 .field-instruction-ur{width:100%}
 .urdu-hero-copy h1.typewriter{font-size:clamp(30px,9vw,46px);min-height:3.3em}
 .urdu-hero-copy .typewriter-lede{font-size:clamp(17px,4.8vw,22px);min-height:8em}
}

/* V27: smoother Urdu hero typing, smaller mobile heading and no layout jump */
.urdu-hero-copy h1.typewriter-heading{
  font-family:"Jameel Noori Nastaleeq","Noto Nastaliq Urdu Local","Noto Nastaliq Urdu",serif;
  font-weight:800;
  line-height:1.75;
  letter-spacing:0;
  margin:0 0 18px;
  min-height:3.5em;
  color:#2563eb;
  transition:color .75s ease;
  will-change:color;
  overflow:visible;
  contain:layout paint;
}
.urdu-hero-copy .typewriter-lede{
  font-family:"Jameel Noori Nastaleeq","Noto Nastaliq Urdu Local","Noto Nastaliq Urdu",serif;
  direction:rtl;
  text-align:right;
  line-height:2.2;
  min-height:0;
  margin:0;
}
@media(max-width:760px){
  .urdu-hero-copy h1.typewriter-heading{
    font-size:clamp(25px,7vw,38px);
    line-height:1.8;
    min-height:3.6em;
    margin-bottom:12px;
  }
  .urdu-hero-copy .typewriter-lede{
    font-size:clamp(16px,4.5vw,20px);
    line-height:2.05;
  }
}

/* V28: polished public application graph + moving reviews/team + responsive WhatsApp support */
.public-app-status{position:relative}.public-app-chart{position:relative;overflow:hidden;padding:24px;border:1px solid var(--hair);border-radius:24px;background:linear-gradient(135deg,var(--card),var(--raise-2));box-shadow:var(--shadow)}
.public-app-chart:before{content:"";position:absolute;inset:-40% -10% auto auto;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(37,99,235,.13),transparent 68%);pointer-events:none}
.public-app-bar{position:relative;display:grid;grid-template-columns:145px minmax(0,1fr) 48px;gap:14px;align-items:center;padding:9px 0}.public-app-bar>span{font-weight:800;color:var(--ink-2)}
.public-app-bar>div{height:14px;background:var(--raise-2);border:1px solid var(--hair);border-radius:999px;overflow:hidden;box-shadow:inset 0 2px 5px rgba(15,23,42,.06)}
.public-app-bar i{display:block;height:100%;min-width:4px;border-radius:999px;background:linear-gradient(90deg,#16a34a,#2563eb,#9333ea);background-size:220% 100%;animation:publicGraphFlow 4s ease-in-out infinite}
.public-app-bar b{text-align:right;font-size:14px;color:var(--ink)}
@keyframes publicGraphFlow{0%,100%{background-position:0 50%;filter:saturate(1)}50%{background-position:100% 50%;filter:saturate(1.25)}}

.review-slider,.team-slider{overflow:hidden;position:relative;mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.review-track,.team-track{display:flex;width:max-content;gap:16px;animation:publicSlider 34s linear infinite}.team-track{gap:18px;animation-duration:38s}.review-slider:hover .review-track,.team-slider:hover .team-track{animation-play-state:paused}
.review-card{width:min(340px,82vw);flex:0 0 min(340px,82vw);box-sizing:border-box}.review-card strong,.team-card h3{background:linear-gradient(90deg,#ef4444,#2563eb,#16a34a,#9333ea,#ef4444);background-size:280% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:memberColor 7s linear infinite}
.team-card{width:min(420px,88vw);flex:0 0 min(420px,88vw);box-sizing:border-box}.team-card h3{margin-bottom:4px}.team-card b{color:#16a34a}.team-slider{padding:3px 0 8px}.review-slider{padding:3px 0 8px}
@keyframes publicSlider{from{transform:translate3d(0,0,0)}to{transform:translate3d(calc(-50% - 8px),0,0)}}
@keyframes memberColor{0%{background-position:0 50%}100%{background-position:280% 50%}}

.wa-float{right:20px;bottom:86px;min-width:210px;justify-content:center;padding:13px 18px;gap:10px;background:linear-gradient(120deg,#16a34a,#2563eb,#9333ea,#16a34a);background-size:280% 280%;animation:waColor 8s ease-in-out infinite;box-shadow:0 14px 34px rgba(37,99,235,.25);border:1px solid rgba(255,255,255,.35)}
.wa-float .wa-icon{width:28px;height:28px;display:grid;place-items:center;flex:0 0 28px;color:#fff}.wa-float .wa-icon svg{width:28px;height:28px;display:block}.wa-float b{font-size:14px;letter-spacing:.01em;color:#fff}.wa-float:hover{transform:translateY(-2px);filter:brightness(1.04)}
@keyframes waColor{0%,100%{background-position:0 50%}50%{background-position:100% 50%}}
@media(max-width:760px){.public-app-chart{padding:17px 14px;border-radius:19px}.public-app-bar{grid-template-columns:92px minmax(0,1fr) 30px;gap:8px;font-size:12px}.public-app-bar>div{height:11px}.public-app-bar b{font-size:12px}.review-card{width:82vw;flex-basis:82vw}.team-card{width:88vw;flex-basis:88vw}.wa-float{right:12px;bottom:80px;min-width:0;width:auto;max-width:calc(100vw - 24px);padding:11px 14px}.wa-float b{display:block;font-size:12px}.wa-float .wa-icon,.wa-float .wa-icon svg{width:25px;height:25px}}
@media(prefers-reduced-motion:reduce){.public-app-bar i,.review-track,.team-track,.review-card strong,.team-card h3,.wa-float{animation:none!important}.review-track,.team-track{transform:none}.review-slider,.team-slider{overflow-x:auto;mask-image:none;-webkit-mask-image:none}}

/* V29 responsive navigation/search and restrained Urdu hero */
.jobs-menu{position:relative;display:flex;align-items:center}.jobs-menu-trigger{border:0;background:transparent;color:var(--ink-2);font:inherit;padding:10px 12px;cursor:pointer;border-radius:10px}.jobs-menu-trigger:hover,.jobs-menu.open .jobs-menu-trigger{background:var(--raise-2);color:var(--gold-ink)}.jobs-menu-pop{display:none;position:absolute;top:100%;left:0;min-width:170px;z-index:500;padding:8px;background:var(--raise);border:1px solid var(--hair);border-radius:14px;box-shadow:var(--shadow)}.jobs-menu.open .jobs-menu-pop{display:grid}.jobs-menu-pop a{padding:10px 12px;border-radius:8px;color:var(--ink);text-decoration:none}.jobs-menu-pop a:hover{background:var(--raise-2)}.site-search-panel{position:relative;z-index:80;display:flex;align-items:center;gap:10px;max-width:900px;margin:10px auto;padding:14px 18px;border:1px solid var(--hair);border-radius:18px;background:var(--raise);box-shadow:var(--shadow)}.site-search-panel[hidden]{display:none}.site-search-panel label{font-weight:800;white-space:nowrap}.site-search-panel input{flex:1;min-width:0;border:1px solid var(--hair-2);border-radius:12px;padding:12px 14px;background:var(--bg);color:var(--ink)}.custom-cta{background:linear-gradient(110deg,#2563eb,#7c3aed)!important;color:#fff!important}.partner-cta{background:linear-gradient(110deg,#0f766e,#16a34a)!important;color:#fff!important}.urdu-hero-copy h1.typewriter-heading{font-size:clamp(27px,3.8vw,46px);line-height:1.9;min-height:0;padding:.12em .08em .28em;overflow:visible;contain:none;overflow-wrap:normal;word-break:normal}.urdu-hero-copy .typewriter-lede{min-height:0}.home-extra-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:26px;margin-bottom:28px}.home-extra-action{padding:24px;border:1px solid var(--hair);border-radius:22px;background:linear-gradient(135deg,var(--card),var(--raise-2));box-shadow:var(--shadow)}.home-extra-action>span{font-size:11px;font-weight:900;letter-spacing:.12em;color:var(--gold-ink)}.home-extra-action h2{margin:8px 0;font-size:clamp(20px,3vw,28px)}.home-extra-action p{color:var(--ink-2);line-height:1.7}.home-extra-action .btn{display:inline-flex;margin-top:8px;text-decoration:none}.hd-actions .hd-cta{white-space:nowrap}@media(max-width:819px){.hd-actions .custom-cta,.hd-actions .partner-cta{display:none}.jobs-menu{display:block;width:100%}.jobs-menu-trigger{text-align:left;width:100%;padding:13px 4px;border-bottom:1px solid var(--hair);border-radius:0}.jobs-menu-pop{position:static;box-shadow:none;border:0;border-radius:0;padding:0 0 6px 14px;background:transparent}.jobs-menu-pop a{border-bottom:1px solid var(--hair);border-radius:0}.site-search-panel{margin:8px 12px;flex-wrap:wrap}.site-search-panel label{width:100%}.site-search-panel input{flex-basis:60%}.home-extra-actions{grid-template-columns:1fr}.urdu-hero-copy h1.typewriter-heading{font-size:clamp(24px,6.4vw,34px);line-height:2;min-height:0;padding:.15em .05em .35em;margin-bottom:10px}.urdu-hero-copy .typewriter-lede{font-size:clamp(16px,4.2vw,19px);line-height:2.1}}


/* V30: responsive partner portal and polished navigation */
.partner-portal .partner-shell{max-width:1080px;margin:0 auto;padding:0 18px 56px}
.partner-portal .partner-card{background:var(--card,var(--raise));border:1px solid var(--hair);border-radius:22px;padding:clamp(18px,3vw,30px);box-shadow:var(--shadow);min-width:0}
.partner-portal .partner-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;align-items:start}
.partner-portal h1{font-size:clamp(28px,4vw,44px);line-height:1.18;overflow-wrap:anywhere}
.partner-portal .partner-card h2{font-size:clamp(19px,2.3vw,25px);margin:0 0 8px}
.partner-portal .partner-card label{display:block;margin:14px 0 6px;font-weight:700;color:var(--ink-2)}
.partner-portal .partner-card input,.partner-portal .partner-card textarea,.partner-portal .partner-card select{box-sizing:border-box;width:100%;max-width:100%;min-height:46px;border:1px solid var(--hair-2);border-radius:12px;padding:11px 13px;background:var(--bg);color:var(--ink);font:inherit}
.partner-portal .partner-card .btn{margin-top:14px;min-height:44px}
.partner-portal .partner-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:20px 0}
.partner-portal .partner-stat{padding:18px;border:1px solid var(--hair);border-radius:18px;background:linear-gradient(135deg,var(--raise),var(--raise-2));min-width:0}
.partner-portal .partner-stat span{display:block;color:var(--ink-3);font-size:13px;font-weight:700}
.partner-portal .partner-stat strong{display:block;font-size:clamp(19px,2.6vw,27px);margin-top:7px;overflow-wrap:anywhere}
.partner-portal .partner-table{overflow:auto;border:1px solid var(--hair);border-radius:14px}
.partner-portal .partner-table table{min-width:680px;width:100%;border-collapse:collapse}
.partner-portal .partner-table th,.partner-portal .partner-table td{padding:12px 14px;border-bottom:1px solid var(--hair);text-align:left}
.partner-portal .partner-table th{background:var(--raise-2);font-size:12px;text-transform:uppercase;letter-spacing:.04em}
.jobs-menu-trigger{font-weight:700}.jobs-menu-pop{min-width:190px}
.hd .brand-verified{max-width:none;flex:0 1 auto}.hd .brand-verified .brand-logo{max-width:220px;height:38px}
@media(max-width:819px){.hd .brand-verified .brand-logo{max-width:170px;height:33px}.hd .brand{max-width:190px}.partner-portal .partner-grid{grid-template-columns:minmax(0,1fr)}.partner-portal .partner-stats{grid-template-columns:1fr}.partner-portal .partner-shell{padding-left:14px;padding-right:14px}.partner-portal .partner-card{border-radius:18px}.site-search-panel{box-sizing:border-box;width:calc(100% - 24px)}}

/* V31: prevent Urdu typewriter layout shift; keep the full heading on one mobile line */
.urdu-hero-copy{min-width:0;width:100%}
.urdu-hero-copy h1.typewriter-heading{
  display:block;width:100%;box-sizing:border-box;
  white-space:nowrap;overflow:visible;overflow-wrap:normal;word-break:keep-all;
  min-height:2.9em;height:2.9em;line-height:2.55;
  padding:.08em .04em .18em;margin:0 0 14px;
  font-size:clamp(25px,3.6vw,43px);
  contain:none;transform:none;
}
@media(max-width:760px){
  .urdu-hero-copy h1.typewriter-heading{
    font-size:clamp(16px,4.8vw,23px);
    line-height:2.7;height:2.7em;min-height:2.7em;
    margin-bottom:8px;padding:.08em 0 .2em;
  }
}
@media(max-width:360px){.urdu-hero-copy h1.typewriter-heading{font-size:15px}}


/* V41 polish: compact floating search dialog, no page layout shift */
.site-search-panel{position:fixed!important;top:clamp(76px,11vh,112px)!important;left:50%!important;right:auto!important;transform:translateX(-50%)!important;width:min(620px,calc(100vw - 28px))!important;max-width:620px!important;box-sizing:border-box!important;margin:0!important;padding:16px!important;z-index:12000!important;display:flex;align-items:center;gap:10px;background:var(--raise,#fff)!important;border:1px solid var(--hair-2,#dbe3ee)!important;border-radius:18px!important;box-shadow:0 24px 70px rgba(0,0,0,.32)!important;animation:maSearchIn .16s ease-out both}
.site-search-panel[hidden]{display:none!important}
.site-search-panel label{white-space:nowrap;font-size:13px}
.site-search-panel input{min-width:0;flex:1;width:100%;box-sizing:border-box}
.site-search-panel button{flex:0 0 auto;margin:0!important}
@keyframes maSearchIn{from{opacity:0;transform:translate(-50%,-8px) scale(.98)}to{opacity:1;transform:translate(-50%,0) scale(1)}}
@media(max-width:600px){.site-search-panel{top:72px!important;flex-wrap:wrap!important;gap:8px!important;padding:13px!important}.site-search-panel label{width:100%}.site-search-panel input{flex:1 1 60%;min-width:0}.site-search-panel button{min-height:42px}}
@media(prefers-reduced-motion:reduce){.site-search-panel{animation:none!important}}


/* V50: continuous breaking-news ticker inside the existing logo slot.
   Fixed dimensions prevent header/page layout shifts on desktop and mobile. */
.hd .brand-verified .ma-animated-logo,.brand-verified .ma-animated-logo{
  display:flex;align-items:center;gap:6px;flex:0 0 220px;width:220px;max-width:100%;height:38px;
  min-width:0;box-sizing:border-box;overflow:hidden;isolation:isolate;border-radius:7px;
  background:#fff7f7;border:1px solid #fecaca;padding:0 5px;
}
.ma-animated-logo .ma-ticker-live{flex:0 0 auto;display:inline-flex;align-items:center;gap:4px;
  height:19px;padding:0 5px;border-radius:4px;background:#dc2626;color:#fff;
  font:900 8px/1 Arial,sans-serif;letter-spacing:.04em;box-sizing:border-box;
  animation:maLivePulse 1.5s ease-in-out infinite;
}
.ma-animated-logo .ma-ticker-live:before{content:"";width:5px;height:5px;border-radius:50%;background:#fff;display:block}
.ma-ticker-window{display:block;position:relative;flex:1 1 auto;min-width:0;height:100%;overflow:hidden;white-space:nowrap;mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent)}
.ma-ticker-track{display:flex;align-items:center;width:max-content;height:100%;will-change:transform;animation:maTickerRun 17s linear infinite}
.ma-ticker-segment{display:flex;align-items:center;flex:0 0 auto;gap:9px;padding-right:18px;white-space:nowrap}
.ma-ticker-en{font:900 19px/1 Arial,sans-serif;letter-spacing:-.7px;color:#047857}
.ma-ticker-ur{display:inline-block;font-family:'Jameel Noori Nastaleeq','Noto Nastaliq Urdu',serif;font-size:13px;font-weight:700;line-height:2.2;color:#b91c1c;white-space:nowrap}
.ma-ticker-dot{font-size:8px;color:#f97316;flex:0 0 auto}
@keyframes maTickerRun{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes maLivePulse{0%,100%{background:#dc2626}50%{background:#991b1b}}
.ma-animated-logo:hover .ma-ticker-track{animation-play-state:paused}
@media(max-width:819px){
 .hd .brand-verified .ma-animated-logo,.brand-verified .ma-animated-logo{flex:0 1 170px;width:170px;height:33px;gap:4px;padding:0 4px}
 .ma-animated-logo .ma-ticker-live{height:17px;padding:0 4px;font-size:7px}
 .ma-animated-logo .ma-ticker-live:before{width:4px;height:4px}
 .ma-ticker-segment{gap:6px;padding-right:13px}
 .ma-ticker-en{font-size:16px;letter-spacing:-.6px}
 .ma-ticker-ur{font-size:10px;line-height:2}
 .ma-ticker-track{animation-duration:14s}
}
@media(prefers-reduced-motion:reduce){.ma-ticker-track,.ma-animated-logo .ma-ticker-live{animation:none!important}.ma-ticker-window{overflow:hidden}.ma-ticker-track{transform:none}.ma-ticker-segment:nth-child(n+2){display:none}}


/* V51: tactile mobile dock, gentle page transitions and opportunity deadlines. */
.mbn-ic svg{display:block;width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .24s cubic-bezier(.2,.8,.2,1),filter .24s}
.mbn-item{transition:color .2s ease,background-color .2s ease,transform .2s ease}
.mbn-item.on .mbn-ic svg,.mbn-item.on .mbn-ic .cat-ic{filter:drop-shadow(0 2px 3px rgba(22,163,74,.22));transform:translateY(-2px) scale(1.06)}
.mbn-item:active .mbn-ic{transform:scale(.86)}
.mbn-item.dock-tap .mbn-ic{animation:mbnDockTap .36s cubic-bezier(.2,.8,.2,1)}
@keyframes mbnDockTap{0%{transform:translateY(0) scale(1)}38%{transform:translateY(-7px) scale(1.15)}70%{transform:translateY(1px) scale(.96)}100%{transform:none}}
.op-deadline{grid-column:1/-1;margin-top:-5px;padding-left:2px;color:var(--ink-2);font-size:12px;line-height:1.5}.op-deadline strong{color:#b45309}
.ma-page-ready body{animation:maPageEnter .28s ease both}.ma-page-leaving body{opacity:.75;transform:translateY(3px);transition:opacity .12s ease,transform .12s ease}
@keyframes maPageEnter{from{opacity:.75;transform:translateY(5px)}to{opacity:1;transform:none}}
@media(max-width:819px){.mobile-bottom-nav{padding-top:8px}.mbn-item{min-height:42px}.mbn-ic{transition:transform .22s ease}.op-deadline{margin-top:-3px;padding:0 2px 9px;font-size:12px}}
@media(prefers-reduced-motion:reduce){.mbn-item,.mbn-ic svg,.ma-page-ready body{animation:none!important;transition:none!important}.ma-page-leaving body{opacity:1;transform:none}}


/* V52 typography/accessibility polish: use Jameel Noori when installed, with the bundled Urdu font as a dependable fallback. */
@font-face{font-family:"MA Urdu Fallback";src:url("NotoNastaliqUrdu-Regular.ttf") format("truetype");font-style:normal;font-weight:400;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:"MA Urdu Fallback";src:url("NotoNastaliqUrdu-Bold.ttf") format("truetype");font-style:normal;font-weight:700 900;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF}
:lang(ur),[dir="rtl"],.urdu,.urdu-content,.field-label-ur,.field-instruction-ur,.ma-ticker-ur{font-family:"Jameel Noori Nastaleeq","Jameel Noori Nastaliq","MA Urdu Fallback","Noto Nastaliq Urdu Local","Noto Nastaliq Urdu",serif!important}
:lang(ur),[dir="rtl"]{line-height:2.05}
:focus-visible{outline:3px solid #2563eb;outline-offset:3px}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
/* More consistent, restrained line icons across navigation and action controls. */
.cat-ic,.mbn-ic svg,.tool-icon{display:block;flex-shrink:0;stroke-linecap:round;stroke-linejoin:round}
.hd-cta svg,.mobile-menu-cta svg{width:17px;height:17px;vertical-align:-3px;margin-right:5px}
.icon-btn:focus-visible,.hd-nav a:focus-visible,.op-actions a:focus-visible{outline-offset:3px}
.faq-block{max-width:900px;margin:52px auto 20px}
.faq-block>h2{margin-bottom:20px}
.faq-block details{overflow:hidden}
.faq-block summary{line-height:1.65}
.faq-a{line-height:1.8}

.faq-block[aria-labelledby="faq-h"] h2{font-family:"Jameel Noori Nastaleeq","MA Urdu Fallback","Noto Nastaliq Urdu Local",serif;direction:rtl;text-align:right;line-height:2}
.faq-block summary:lang(ur),.faq-a:lang(ur){font-family:"Jameel Noori Nastaleeq","MA Urdu Fallback","Noto Nastaliq Urdu Local",serif}

/* FAQ text supports mixed Urdu/English while selecting Nastaliq for Urdu glyphs. */
.faq-block summary,.faq-block .faq-a{font-family:"Jameel Noori Nastaleeq","Jameel Noori Nastaliq","MA Urdu Fallback","Noto Nastaliq Urdu Local",system-ui,sans-serif}
.faq-block summary{direction:auto;text-align:start}
.faq-block .faq-a{direction:auto;text-align:start}