/* HKICS. A reference site: legible, fast, no framework. */

:root {
  --ink: #16241f;
  --ink-soft: #4c5f57;
  --ink-faint: #78877f;
  --paper: #fbfbf9;
  --surface: #ffffff;
  --rule: #dfe3dc;
  --accent: #0b5d4e;
  --accent-soft: #e8f1ee;
  --measure: 68ch;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #e5eae5; --ink-soft: #a6b3ac; --ink-faint: #7d8b83;
    --paper: #0f1614; --surface: #16211e; --rule: #2a3733;
    --accent: #5cbba6; --accent-soft: #14302a;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 17px/1.65 -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 940px; margin: 0 auto; padding: 0 20px; }

a { color: var(--accent); text-underline-offset: 2px; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 8px; top: 8px; background: var(--surface); padding: 8px 12px; z-index: 10; }

/* header */
.masthead { border-bottom: 1px solid var(--rule); background: var(--surface); }
.masthead-inner { display: flex; align-items: center; gap: 28px; padding-block: 14px; flex-wrap: wrap; }
.brand { font-weight: 700; letter-spacing: .06em; text-decoration: none; color: var(--ink); }
/* align-items matters here: without it flex defaults to `stretch`, so the
   plain links grow to the height of the taller "Get listed" button and their
   text sits at the top of that stretched box while the button's is centred.
   The result is a nav whose labels sit at visibly different heights. */
.nav { display: flex; align-items: center; gap: 20px; margin-left: auto; flex-wrap: wrap; }
.nav a { display: inline-flex; align-items: center; line-height: 1.2; }
.nav a { text-decoration: none; color: var(--ink-soft); font-size: 15px; }
.nav a:hover { color: var(--accent); }

/* breadcrumbs */
.crumbs { font-size: 14px; color: var(--ink-faint); padding-block: 16px 0; }
.crumbs a { color: var(--ink-soft); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs .sep { margin: 0 4px; }

/* article */
main { padding-block: 28px 72px; }
.article h1, .hero h1 {
  font-size: clamp(28px, 4vw, 40px); line-height: 1.15; letter-spacing: -.02em;
  margin: 8px 0 16px; max-width: 24ch; text-wrap: balance;
}
.standfirst { font-size: 19px; color: var(--ink-soft); max-width: var(--measure); margin: 0 0 20px; }

.byline {
  display: flex; flex-wrap: wrap; gap: 6px 20px;
  font-size: 14px; color: var(--ink-faint);
  border-block: 1px solid var(--rule); padding-block: 10px; margin-bottom: 28px;
}

.body { max-width: var(--measure); }
.body h2 { font-size: 24px; line-height: 1.25; margin: 38px 0 12px; letter-spacing: -.01em; }
.body h3 { font-size: 19px; margin: 28px 0 8px; }
.body p, .body li { color: var(--ink); }
.body ul, .body ol { padding-left: 22px; }
.body li { margin-bottom: 6px; }
.body strong { font-weight: 650; }

.body table { border-collapse: collapse; width: 100%; margin: 20px 0; font-size: 15px; }
.body th, .body td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--rule); }
.body thead th { background: var(--accent-soft); font-weight: 600; }
.body td:last-child, .body th:last-child { font-variant-numeric: tabular-nums; }

/* wide tables must scroll, never the page */
/* Any depth, not only a direct child: a table nested inside a blockquote or a
   details block overflowed the viewport because the child combinator missed
   it. 223 of the content pages carry a table. */
.body table { display: block; overflow-x: auto; }

/* sources */
.sources { margin-top: 44px; padding-top: 20px; border-top: 2px solid var(--rule); max-width: var(--measure); }
.sources h2 { font-size: 16px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-faint); }
.sources ul { list-style: none; padding: 0; font-size: 15px; }
.sources li { margin-bottom: 6px; }
.authority { color: var(--ink-faint); font-size: 13px; }
.uphill { margin-top: 28px; color: var(--ink-soft); }

/* index cards */
.index { margin-top: 48px; }
.index h2 { font-size: 20px; margin-bottom: 16px; }
.cards { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px;
         grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.cards a {
  display: flex; flex-direction: column; gap: 5px; height: 100%;
  background: var(--surface); border: 1px solid var(--rule); border-radius: 6px;
  padding: 16px 18px; text-decoration: none; color: var(--ink);
}
.cards a:hover { border-color: var(--accent); }
.card-title { font-weight: 620; }
.card-desc { font-size: 14.5px; color: var(--ink-soft); }
.card-meta { font-size: 13px; color: var(--ink-faint); margin-top: auto; padding-top: 6px; }

.plain { list-style: none; padding: 0; }
.plain li { padding: 7px 0; border-bottom: 1px solid var(--rule); }

/* footer */
.foot { border-top: 1px solid var(--rule); background: var(--surface); padding-block: 28px 40px; margin-top: 60px; }

/* Footer columns. auto-fit rather than a fixed count so the six columns
   reflow to three and then two without breakpoints of their own. */
/* One row, always. `auto-fit` with a 150px minimum wrapped the columns onto
   a second row at any realistic width, which read as two unrelated footers. */
.foot-cols {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 24px 18px;
  margin-bottom: 32px;
}
@media (max-width: 70rem) { .foot-topics { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 46rem) {
  .foot-topics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-site { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 100%; }
}
.foot-heading {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin: 0 0 10px;
  font-weight: 600;
}
.foot-col ul { list-style: none; margin: 0; padding: 0; }
.faq-item { margin-bottom: 18px; }
.faq-q { font-size: 1rem; font-weight: 650; margin: 0 0 6px; }
.faq-a { margin: 0; color: var(--ink-soft); }
.source-link .ext { margin-left: 4px; vertical-align: -1px; opacity: 0.55; }
.source-link:hover .ext { opacity: 1; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.foot-col li { margin-bottom: 7px; line-height: 1.35; }
.foot-col a {
  color: var(--ink);
  text-decoration: none;
  font-size: 0.875rem;
}
.foot-col a:hover { text-decoration: underline; }
.foot .fine a { color: var(--muted); }
.disclaimer { font-size: 13.5px; color: var(--ink-faint); max-width: 78ch; margin: 0 0 10px; }
.fine { font-size: 13px; color: var(--ink-faint); margin: 14px 0 0; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* --- directory ----------------------------------------------------------- */
.notice {
  background: var(--accent-soft); border-left: 3px solid var(--accent);
  padding: 14px 18px; border-radius: 0 5px 5px 0; font-size: 15px;
  color: var(--ink-soft); max-width: 76ch;
}
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0; }
.chips a {
  font-size: 14px; text-decoration: none; color: var(--ink-soft);
  border: 1px solid var(--rule); border-radius: 20px; padding: 5px 13px; background: var(--surface);
}
.chips a:hover { border-color: var(--accent); color: var(--accent); }
.chips span { color: var(--ink-faint); font-variant-numeric: tabular-nums; }

.count { color: var(--ink-faint); font-size: 14px; margin: 18px 0 10px; }
.firms { list-style: none; padding: 0; margin: 0; }
.firm { border-bottom: 1px solid var(--rule); padding: 16px 0; }
.firm-name { font-weight: 620; font-size: 17px; text-decoration: none; }
.firm-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13.5px; color: var(--ink-faint); margin-top: 4px; }
.firm-summary { font-size: 15px; color: var(--ink-soft); margin: 6px 0 0; max-width: 72ch; }

.badge {
  display: inline-block; font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 20px; margin-left: 8px; vertical-align: 2px;
}
.badge.verified { background: var(--accent-soft); color: var(--accent); }
.badge.unclaimed { background: transparent; color: var(--ink-faint); border: 1px solid var(--rule); }
.badges { display: flex; gap: 8px; margin-bottom: 14px; }
.badges .badge { margin-left: 0; }

.alt-name { color: var(--ink-soft); font-size: 18px; margin: -8px 0 14px; }
.panel { margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--rule); max-width: var(--measure); }
.panel h2 { font-size: 17px; margin: 0 0 12px; }
.panel table {
  border-collapse: collapse; width: 100%; font-size: 14.5px;
  display: block; overflow-x: auto;
}
.panel th, .panel td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--rule); }
.details { display: grid; grid-template-columns: 150px 1fr; gap: 8px 16px; font-size: 15px; margin: 0; }
.details dt { color: var(--ink-faint); }
.details dd { margin: 0; }
.fee { color: var(--ink-faint); font-size: 14px; }

.claim { background: var(--accent-soft); border-radius: 6px; padding: 20px 22px; border-top: none; }
.button {
  display: inline-block; background: var(--accent); color: var(--paper);
  padding: 10px 18px; border-radius: 5px; text-decoration: none; font-weight: 600; font-size: 15px;
}
.button:hover { filter: brightness(1.1); }

.search { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin: 20px 0 28px; }
.search label { display: block; font-size: 13px; color: var(--ink-faint); margin-bottom: 4px; }
.search input {
  padding: 9px 12px; border: 1px solid var(--rule); border-radius: 5px;
  /* flex-basis rather than min-width. A hard 280px min-width does not shrink,
     and on a 320px screen the wrap's 40px of padding leaves 280px exactly -
     so the border pushed the input past the viewport and scrolled the page
     sideways. This keeps the same comfortable size where there is room. */
  flex: 1 1 280px;
  min-width: 0;
  max-width: 100%;
  background: var(--surface); color: var(--ink); font: inherit; font-size: 15px;
}
.search button {
  padding: 10px 18px; border: none; border-radius: 5px; background: var(--accent);
  color: var(--paper); font: inherit; font-weight: 600; cursor: pointer;
}

/* --- forms, portal, admin ------------------------------------------------ */
.narrow { max-width: 460px; }
.stack { display: flex; flex-direction: column; gap: 6px; max-width: 480px; }
.stack label { font-size: 14px; color: var(--ink-soft); margin-top: 10px; }
.stack input, .stack textarea, .stack select {
  padding: 9px 12px; border: 1px solid var(--rule); border-radius: 5px;
  background: var(--surface); color: var(--ink); font: inherit; font-size: 15px;
}
.stack button, .packs button {
  margin-top: 16px; padding: 10px 18px; border: none; border-radius: 5px;
  background: var(--accent); color: var(--paper); font: inherit; font-weight: 600;
  cursor: pointer; align-self: start;
}
.check { display: block; font-size: 15px; margin: 4px 0; }
fieldset { border: 1px solid var(--rule); border-radius: 5px; padding: 14px 16px; margin: 16px 0 0; }
legend { font-size: 14px; color: var(--ink-faint); padding: 0 6px; }
.linkish { background: none; border: none; color: var(--accent); cursor: pointer; font: inherit; padding: 0; text-decoration: underline; }

.flash { padding: 10px 14px; border-radius: 5px; font-size: 15px; max-width: 76ch; }
.flash.error { background: #fdeceb; color: #8c2f26; }
.flash.success { background: var(--accent-soft); color: var(--accent); }
.flash.notice { background: #fdf4e3; color: #7a5b12; }
@media (prefers-color-scheme: dark) {
  .flash.error { background: #33191a; color: #e8837a; }
  .flash.notice { background: #2e2713; color: #d8b563; }
}

.portal-head { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; }
.balance { display: flex; align-items: baseline; gap: 10px; }
.balance .value { font-size: 30px; font-weight: 700; font-variant-numeric: tabular-nums; }
.balance .label { color: var(--ink-faint); font-size: 14px; }

.packs { display: grid; gap: 10px; max-width: 520px; }
.pack { display: grid; grid-template-columns: 24px 1fr auto; gap: 4px 12px; align-items: center;
        border: 1px solid var(--rule); border-radius: 6px; padding: 14px 16px; background: var(--surface); cursor: pointer; }
.pack-name { font-weight: 620; }
.pack-price { font-variant-numeric: tabular-nums; font-weight: 600; }
.pack-credits { grid-column: 2 / -1; font-size: 14px; color: var(--ink-soft); }
.pack-credits em { color: var(--accent); font-style: normal; font-weight: 600; }

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin: 22px 0; }
.tile { background: var(--surface); border: 1px solid var(--rule); border-radius: 6px; padding: 14px 16px; }
.tile.alert { border-color: var(--accent); }
.tile .v { display: block; font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; }
.tile .l { font-size: 12.5px; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .05em; }

.admin-nav { margin-bottom: 20px; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 14.5px; margin-top: 14px; display: block; overflow-x: auto; }
.admin-table th, .admin-table td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.admin-table thead th { background: var(--surface); font-size: 12.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-faint); }

/* --- calculators --------------------------------------------------------- */
.calc { display: flex; flex-direction: column; gap: 6px; max-width: 460px; margin: 24px 0; }
.calc label { font-size: 14px; color: var(--ink-soft); margin-top: 10px; }
.calc input, .calc select {
  padding: 10px 12px; border: 1px solid var(--rule); border-radius: 5px;
  background: var(--surface); color: var(--ink); font: inherit; font-size: 16px;
}
.calc button {
  margin-top: 18px; padding: 11px 20px; border: none; border-radius: 5px;
  background: var(--accent); color: var(--paper); font: inherit; font-weight: 600;
  cursor: pointer; align-self: start;
}
.result {
  margin: 28px 0; padding: 22px 24px; background: var(--surface);
  border: 1px solid var(--rule); border-radius: 6px; max-width: 560px;
}
.result-total {
  font-size: 34px; font-weight: 700; margin: 0 0 14px;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.result table {
  width: 100%; border-collapse: collapse; font-size: 15px;
  display: block; overflow-x: auto;
}
.result td { padding: 7px 0; border-bottom: 1px solid var(--rule); }
.result td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.caveats { margin: 16px 0 0; padding-left: 18px; font-size: 14px; color: var(--ink-faint); }
.caveats li { margin-bottom: 5px; }
.quote { background: var(--accent-soft); border-radius: 6px; padding: 22px 24px; border-top: none; }

/* --- form record --------------------------------------------------------- */
.form-card {
  background: var(--surface); border: 1px solid var(--rule); border-radius: 6px;
  padding: 20px 22px; margin: 0 0 30px; max-width: var(--measure);
}
.form-card h2 { font-size: 16px; margin: 0 0 14px; text-transform: uppercase;
                letter-spacing: .06em; color: var(--ink-faint); }
.form-card .details { grid-template-columns: 130px 1fr; font-size: 15px; }
.form-card .button { margin-top: 14px; }


/* --- masthead brand pill -------------------------------------------------
   The globe sits flush to the pill's left edge - no padding between it and the
   border - so the pill reads as a badge the globe is set into rather than an
   icon floating in a box. The flag is inset on the right instead, which gives
   the lockup a deliberate asymmetry and keeps the flag from touching the
   rounded corner, where a rectangle against a radius looks like a mistake. */

.brand {
  text-decoration: none;
  display: inline-block;
}

.brand-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: #fdf6d8;               /* light yellow */
  border: 1px solid #ecdfa8;
  border-radius: 999px;
  padding: 0 0.75rem 0 0;            /* flush left for the globe */
  overflow: hidden;                  /* clip the globe to the pill's radius */
  line-height: 1;
  max-width: 100%;
}

.brand-globe {
  width: 2.25rem;
  height: 2.25rem;
  display: block;
  flex: none;
  margin: 0;                         /* touching the border, by design */
}

.brand-name {
  font-weight: 650;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  color: #1d2b36;
  white-space: nowrap;
}

.brand-flag {
  width: 2rem;
  height: 1.33rem;      /* the flag's real 3:2 ratio */
  display: block;
  flex: none;
  /* Red on light yellow is a weak edge; the hairline stops the flag bleeding
     into the pill. */
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
  border-radius: 2.5px;
}

/* Below the fold of a phone the full name is too long for one line; the pill
   keeps the marks and drops to the short form rather than wrapping into a
   two-line lozenge. */
@media (max-width: 40rem) {
  .brand-name {
    font-size: 0.8rem;
    white-space: normal;
  }
  .brand-globe { width: 1.9rem; height: 1.9rem; }
}


/* --- membership landing page ------------------------------------------- */

/* "Get listed" is the only commercial action in the nav, so it is the only
   one that reads as a button. Everything else stays navigation. */
.nav-cta {
  padding: 6px 12px;
  border: 1px solid var(--accent);
  border-radius: 4px;
  color: var(--accent) !important;
  font-weight: 600;
}
.nav-cta:hover { background: var(--accent); color: #fff !important; }

.button--lg { font-size: 1.05rem; padding: 14px 28px; }
.button--ghost {
  background: transparent; color: var(--accent);
  border: 1px solid var(--rule-strong, #c8d2da);
}
.button--ghost:hover { border-color: var(--accent); }

.mem-hero {
  background: linear-gradient(180deg, #f4f8fa 0%, #ffffff 100%);
  border-bottom: 1px solid var(--rule);
  padding: 56px 0 44px;
  text-align: center;
}
.mem-eyebrow {
  font-size: .78rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-faint); margin: 0 0 12px;
}
/* 24ch, not 18. The headline is 41 characters: at 18ch it could not fit on two
   lines however large the viewport, so it always broke to three. And display
   type needs its own line-height - inheriting the body's 1.6 left gaps between
   the lines wider than the letters were tall. */
.mem-hero h1 {
  font-size: clamp(1.9rem, 1.2rem + 2.4vw, 2.9rem);
  line-height: 1.1;
  margin: 0 auto 16px;
  max-width: 24ch;
  text-wrap: balance;
}
.mem-lede { max-width: 58ch; margin: 0 auto 26px; font-size: 1.1rem; color: var(--ink-soft); }
.mem-hero-cta { margin: 0; }
.mem-hero-note { display: block; margin-top: 10px; font-size: .9rem; color: var(--ink-faint); }

/* three plans, side by side, equal height */
.mem-plans { padding: 40px 0 8px; }
.plan-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  align-items: stretch;
}
.plan {
  display: flex; flex-direction: column;
  border: 1px solid var(--rule); border-radius: 8px;
  padding: 26px 22px; background: #fff; position: relative;
}
.plan--featured { border: 2px solid var(--accent); box-shadow: 0 10px 30px -18px rgba(11,79,108,.5); }
.plan--value { border-color: #b8975a; }
.plan-flag {
  position: absolute; top: -11px; left: 22px;
  background: var(--accent); color: #fff;
  font-size: .7rem; letter-spacing: .08em; text-transform: uppercase;
  padding: 3px 10px; border-radius: 20px; margin: 0;
}
.plan-flag--save { background: #b8975a; }
.plan-name { font-weight: 600; margin: 0 0 6px; color: var(--ink-soft); }
.plan-price { font-size: 2.4rem; font-weight: 700; margin: 0; line-height: 1; letter-spacing: -.02em; }
.plan-per { color: var(--ink-faint); font-size: .9rem; margin: 6px 0 16px; }
.plan-list { list-style: none; padding: 0; margin: 0 0 22px; flex: 1; }
.plan-list li { padding: 6px 0 6px 22px; position: relative; font-size: .93rem; }
.plan-list li::before {
  content: "✓"; position: absolute; left: 0; color: var(--accent); font-weight: 700;
}
.plan .button { width: 100%; text-align: center; }

/* Six reasons, anchored to the detail below.
   Each card carries a large ghosted numeral behind the text and a coloured
   rule along its top edge. The flat bordered boxes read as one grey mass at a
   glance - six identical rectangles with nothing to separate them - so the
   numeral gives each card its own landmark and the rule gives the grid a
   rhythm the eye can follow. */
.mem-reasons { padding: 48px 0 8px; }
.mem-reasons h2 { text-align: center; margin-bottom: 8px; }
.mem-reasons-sub {
  text-align: center; color: var(--ink-soft); max-width: 56ch;
  margin: 0 auto 28px;
}
.reason-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }

.reason {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  background: var(--surface, #fff);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 26px 22px 22px;
  isolation: isolate;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

/* The coloured rule along the top. A pseudo-element rather than a border so it
   can span the full width inside the rounded corners. */
.reason::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--accent);
  opacity: .28;
  transition: opacity .18s ease;
}

/* The ghosted numeral. z-index -1 keeps it behind the text; aria-hidden is not
   needed because the visible 01-06 span is still in the markup and read out. */
.reason::after {
  content: attr(data-n);
  position: absolute;
  right: 12px;
  bottom: -14px;
  z-index: -1;
  font-size: 5.5rem;
  font-weight: 800;
  line-height: 1;
  color: var(--accent);
  opacity: .07;
  pointer-events: none;
}

.reason:hover,
.reason:focus-visible {
  border-color: var(--accent);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .07);
}
.reason:hover::before,
.reason:focus-visible::before { opacity: 1; }
.reason:hover::after { opacity: .12; }

.reason-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  margin-bottom: 12px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .02em;
}
.reason-h {
  display: block;
  font-weight: 650;
  font-size: 1.02rem;
  line-height: 1.3;
  margin-bottom: 8px;
}
.reason-p {
  display: block;
  font-size: .9rem;
  line-height: 1.5;
  color: var(--ink-soft);
  margin-top: auto;
}

@media (prefers-reduced-motion: reduce) {
  .reason { transition: border-color .18s ease; }
  .reason:hover, .reason:focus-visible { transform: none; }
}

.mem-detail { padding: 44px 0; }
.mem-detail h2 { scroll-margin-top: 80px; padding-top: 8px; }

.mem-close {
  background: var(--accent); color: #fff; text-align: center;
  padding: 52px 0; margin-top: 24px;
}
.mem-close h2 { color: #fff; margin: 0 0 12px; }
.mem-close p { max-width: 52ch; margin: 0 auto 20px; }
.mem-close .button { background: #fff; color: var(--accent); border-color: #fff; }
.mem-close-note { font-size: .88rem; opacity: .82; margin: 0; }

@media (max-width: 60rem) {
  .plan-grid, .reason-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 40rem) {
  .plan-grid, .reason-grid { grid-template-columns: 1fr; }
  .mem-hero { padding: 36px 0 28px; }
}

/* --- provider portal ---------------------------------------------------- */

.credit-banner {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--accent-soft, #e1edf2); border: 1px solid var(--rule);
  border-radius: 8px; padding: 14px 18px; margin: 0 0 24px;
}
.credit-n { font-size: 1.9rem; font-weight: 700; line-height: 1; color: var(--accent); }
.credit-l { flex: 1; min-width: 140px; color: var(--ink-soft); font-size: .93rem; }

.steps { list-style: none; padding: 0; margin: 0 0 24px; }
.step {
  display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap;
  padding: 14px 0; border-bottom: 1px solid var(--rule);
}
.step:last-child { border-bottom: 0; }
.step-mark {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; font-size: .82rem; font-weight: 700;
  border: 1px solid var(--rule-strong, #c8d2da); color: var(--ink-faint);
}
.step.is-done .step-mark { background: #16694f; border-color: #16694f; color: #fff; }
.step-body { flex: 1; min-width: 180px; }
.step-detail { display: block; font-size: .9rem; color: var(--ink-soft); margin-top: 2px; }
.button--sm { font-size: .85rem; padding: 6px 12px; }

.agree { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 18px; font-size: .92rem; line-height: 1.55; }
.agree input { margin-top: 4px; flex: none; }

.kv { width: 100%; border-collapse: collapse; margin-bottom: 16px; }
.kv th { text-align: left; font-weight: 600; padding: 8px 12px 8px 0; width: 34%; color: var(--ink-soft); }
.kv td { padding: 8px 0; }

.inline-form { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 12px 0; }
.hint { font-size: .88rem; color: var(--ink-faint); }

.curve { width: 100%; border-collapse: collapse; font-size: .92rem; }
.curve th, .curve td { padding: 8px 10px; border-bottom: 1px solid var(--rule); text-align: right; }
.curve thead th, .curve tbody th { text-align: left; }
.bid-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; align-items: end; }
.bid-fields label { display: block; font-size: .9rem; }
.bid-fields input[type="number"] { width: 100%; padding: 8px 10px; border: 1px solid var(--rule-strong, #c8d2da); border-radius: 4px; }
.bid-fields .check { display: flex; align-items: center; gap: 8px; }

/* Tables are the thing that breaks a portal on a phone. */
@media (max-width: 40rem) {
  .curve { display: block; overflow-x: auto; white-space: nowrap; }
  .credit-banner { padding: 12px 14px; }
  .step { gap: 10px; }
}

/* Terms sit under the action they govern, small but legible. */
.terms {
  margin: 12px 0 0;
  font-size: .82rem;
  line-height: 1.6;
  color: var(--ink-faint);
  max-width: 62ch;
}
.terms a { color: var(--ink-soft); }
.credit-banner--locked { background: #f6efe0; border-color: #e0cfa4; }
.credit-banner--locked .credit-n { color: #8a5209; }
.panel--offer { border-color: var(--accent); border-width: 2px; }
.curve td { text-align: center; }
.d-price { display: block; font-weight: 600; }
.d-leads { display: block; font-size: .8rem; color: var(--ink-soft); }
.d-missed { display: block; font-size: .75rem; color: #a62a21; }

/* Tool index sections */
.tool-group { margin-top: 34px; }
.tool-group h2 { margin-bottom: 6px; }
.section-intro { color: var(--ink-soft); margin: 0 0 16px; max-width: 62ch; }

.hero-sub { color: var(--ink-soft); max-width: 64ch; }
.hero-links { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.button--ghost { background: transparent; color: var(--accent); border: 1px solid var(--rule); }
.button--ghost:hover { border-color: var(--accent); }

/* --- mobile safety ------------------------------------------------------- */
/* Long unbroken strings - a URL in a source list, a form code run together -
   are the other common cause of a page that scrolls sideways on a phone. */
img, svg, video, iframe { max-width: 100%; }

/* Every table scrolls inside itself rather than pushing the page sideways.
   Applied to the element, not to a list of classes: the tool and portal
   templates carry bare <table> tags that no class-based rule reached, and a
   single wide table is enough to make the whole page scroll horizontally on a
   phone. display:block moves only the outer box - rows and cells still lay
   out as a table. */
table {
  display: block;
  overflow-x: auto;
  max-width: 100%;
}
a, p, li, td, th, dd, dt { overflow-wrap: anywhere; }
pre, code { overflow-x: auto; max-width: 100%; }

@media (max-width: 40rem) {
  .wrap { padding: 0 14px; }

  /* The nav is one scrollable row, "Get listed" included.
     `flex-wrap: wrap` dropped the button onto a second line on a phone, which
     both cost a whole row of vertical space and separated the one item on the
     bar that is asking for money from the items people arrive to use. Scrolling
     sideways within the row keeps them together; the row itself never widens
     the page because it clips its own overflow. */
  .nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-left: 0;
    width: 100%;
    gap: 16px;
    /* Equal breathing room above and below, so the content underneath starts
       clear of the bar rather than tight against it. */
    padding: 12px 0;
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav > * { flex: 0 0 auto; }
  /* The button keeps its own shape while the links stay flush with the row. */
  .nav-cta { margin-left: 4px; }

  .masthead-inner {
    gap: 10px;
    padding-block: 12px;
  }
  .cards { grid-template-columns: 1fr; }
  .search { flex-direction: column; align-items: stretch; }
  .search input, .search button { width: 100%; }
  .stack, .narrow, .calc, .packs { max-width: 100%; }
  .hero-links { flex-direction: column; }
  .hero-links .button { text-align: center; }
}

/* Portal empty state.
   .panel on its own is a section divider - a top border and some padding - so
   these two read as loose text under a rule rather than as cards. The
   modifiers turn them into real boxes; the base class stays as it is because
   the FAQ and CTA blocks rely on the divider behaviour. */
.empty-offers { display: grid; gap: 18px; }
.empty-lede { color: var(--ink-soft); margin: 0 0 4px; }

.panel--todo,
.panel--market {
  margin-top: 0;
  padding: 22px 24px;
  border: 1px solid var(--rule);
  border-radius: 12px;
  max-width: none;
}
.panel--todo h3,
.panel--market h3 { margin: 0 0 6px; font-size: 1.02rem; }
.panel--todo {
  border-left: 3px solid var(--accent);
  background: var(--paper);
}
.panel--market { background: var(--surface); }
.mini-steps { margin: 12px 0 0; padding-left: 20px; display: grid; gap: 12px; }
.mini-steps li { line-height: 1.4; }
.mini-steps strong { display: block; }
.mini-steps .button { margin-top: 6px; }
.stat-row {
  list-style: none; margin: 16px 0 0; padding: 0;
  display: grid;
  /* 200px, not 150. At 150 the labels broke to three ragged lines - "enquiries
     for the services you / offer" - which made three tidy numbers look like a
     mistake. */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}
.stat-row li { min-width: 0; }
.stat-row strong {
  display: block; font-size: 1.9rem; font-weight: 700;
  line-height: 1; color: var(--accent); margin-bottom: 4px;
  font-variant-numeric: tabular-nums;
}
.stat-row span { display: block; font-size: .86rem; line-height: 1.35; color: var(--ink-soft); }

/* The section heading above the empty state was competing with the funnel for
   attention while saying less. */
.portal-section-h { font-size: 1.05rem; margin: 0 0 12px; }
.pill { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: .75rem; }
.pill--ok { background: #dff0e4; color: #1b5e34; }
.pill--wait { background: #fdf0d5; color: #7a5a13; }
.narrow-page { max-width: 640px; }

/* --- provider portal: setup funnel and dashboard -------------------------- */

.funnel {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 22px 24px 18px;
  margin: 0 0 26px;
}

/* The bar is the honest bit: the steps below say which, the bar says how far. */
.funnel-bar {
  height: 4px;
  border-radius: 999px;
  background: var(--rule);
  overflow: hidden;
  margin-bottom: 20px;
}
.funnel-fill {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
  transition: width .4s ease;
}

.funnel-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 8px;
}
.fstep {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  position: relative;
}
/* The connector sits behind the dots and stops short of them, so the row reads
   as one track rather than five unrelated badges. */
.fstep:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 13px;
  left: calc(50% + 20px);
  right: calc(-50% + 20px);
  height: 2px;
  background: var(--rule);
}
.fstep.is-done:not(:last-child)::after { background: var(--accent); opacity: .45; }

.fstep-dot {
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font-size: .8rem; font-weight: 700;
  border: 2px solid var(--rule);
  background: var(--paper);
  color: var(--ink-faint);
  position: relative; z-index: 1;
}
.fstep-label { font-size: .8rem; line-height: 1.25; color: var(--ink-faint); }

.fstep.is-done .fstep-dot {
  background: var(--accent); border-color: var(--accent); color: #fff;
}
.fstep.is-done .fstep-label { color: var(--ink-soft); }

.fstep.is-next .fstep-dot {
  border-color: var(--accent); color: var(--accent);
  box-shadow: 0 0 0 4px rgba(27, 94, 52, .12);
}
.fstep.is-next .fstep-label { color: var(--ink); font-weight: 600; }

.funnel-next {
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
  font-size: .93rem;
  color: var(--ink-soft);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.funnel-next strong { color: var(--ink); }
.funnel-next--done strong { color: var(--accent); }

/* --- header ---------------------------------------------------------------- */

.portal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding-bottom: 18px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--rule);
}
.portal-id { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
/* The firm name is a legal name in caps and can be very long; at h1 scale it
   was three lines of shouting before anything useful appeared. */
.portal-head h1 {
  margin: 0;
  font-size: clamp(1.15rem, .9rem + 1vw, 1.5rem);
  line-height: 1.25;
  text-transform: none;
  max-width: 34ch;
}

.balance {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 12px 16px;
}
.coins { color: var(--accent); flex-shrink: 0; }
.balance-fig { display: flex; flex-direction: column; line-height: 1.1; }
.balance .value { font-size: 1.65rem; font-weight: 700; }
.balance .label { font-size: .78rem; color: var(--ink-faint); }

@media (max-width: 46rem) {
  .funnel-steps { grid-auto-flow: row; grid-auto-columns: auto; gap: 14px; }
  .fstep { flex-direction: row; text-align: left; gap: 12px; }
  .fstep:not(:last-child)::after { display: none; }
  .portal-head { flex-direction: column; align-items: stretch; }
  .balance { justify-content: space-between; }
}

/* The form screenshot */
.form-shot { margin: 36px 0; padding-top: 24px; border-top: 1px solid var(--rule); }
.form-shot h2 { margin-bottom: 6px; }
.form-shot-img {
  display: block; width: 100%; height: auto; max-width: 620px;
  margin: 16px 0; border: 1px solid var(--rule); border-radius: 6px;
  background: #fff;
}

.form-guide { margin-top: 20px; }
.form-guide h3 { font-size: 1rem; margin: 20px 0 6px; }
.form-guide p { margin: 0 0 10px; }

/* Language switcher. Present only where a translation is live. */
.lang-switch { display: inline-flex; align-items: center; }
.lang-switch-link {
  font-size: 14px; text-decoration: none; color: var(--ink-soft);
  border: 1px solid var(--rule); border-radius: 20px; padding: 4px 12px;
}
.lang-switch-link:hover { border-color: var(--accent); color: var(--accent); }