/* ==========================================================================
   SwiftSums — landing page ("Faceted Focus")
   Ported from REPLIT_DESIGN_HANDOFF/swiftsums-faceted-focus.html.

   PHASE 1 OF 2. This file is loaded by index.html ONLY. index.html does not
   load tokens.css or app.css, so nothing here can reach the other 94 pages
   and nothing there can reach this page. That isolation is deliberate: the
   concept introduces a different palette, two extra typefaces and a dark
   header, none of which the rest of the site uses yet.

   Every custom property below is declared on .ss-landing rather than :root,
   so phase 2 (rolling this palette across the site) is a promotion of this
   one block into tokens.css rather than a rewrite. Classes are prefixed ss-
   for the same reason — when both stylesheets eventually load together, none
   of these names can collide with app.css's .hero, .search, .brand, .footer.

   The exceptions are the hooks core.js owns and queries by name:
     .search__results / .search__item / .search__cat / .search__hint
     .badge-soon
     .locale__btn / .locale__menu / .locale__flag / .locale__label / .locale__opt
     .save-btn
   Those keep their names so the real search, locale and saved-calculator
   systems work here unchanged. They are styled under .ss-landing below.
   ========================================================================== */

/* index.html loads landing.css and nothing else, so the document-level reset
   belongs here rather than in app.css. Without `body { margin: 0 }` the UA
   default leaves an 8px strip of unpainted canvas framing the whole design.
   The background repeats --mist as a literal because that token is declared
   on .ss-landing, which <body> is not inside. */
html { scroll-behavior: smooth; }
body { margin: 0; background: #f6f4ee; }

/* Metric-matched fallbacks for the three Google-hosted faces used below.
   Same defect and same fix as ss-tokens.css (see the comment there for the
   full diagnosis and the review-round-2 fixes): the hero heading here runs
   font-size: clamp(51px, 6.4vw, 86px) on --font-display, which is a large
   enough box that a metric mismatch between the system-ui fallback and the
   arriving webfont reads as a very visible reflow — a plausible reason
   this page's field CLS sample is worse than the shared calculator pages'.
   Values computed from published metrics (Capsize / seek-oss/capsize
   entireMetricsCollection.json) against Arial (sans stacks) and Courier
   New (mono stack).

   Two review-round-2 fixes carried over from ss-tokens.css: (1) the
   --font-display stack below puts the Fallback directly after Plus Jakarta
   Sans, before Manrope — Manrope is a second real webfont from the same
   request, not a stand-in, so putting it before the Fallback would let an
   unlucky arrival order paint the 51-86px hero in Manrope's own unmatched
   box and then shift again. (2) each face below lists multiple local()
   candidates, not just Arial/Courier New, because a device with neither
   (most Android, some Linux) would otherwise have the @font-face fail to
   resolve and silently take no override at all. Keeping one fixed set of
   percentages across all of a face's local() candidates is safe for the
   ascent-override/descent-override/line-gap-override part: those are
   absolute against font-size and fully replace the resolved font's native
   metrics, so they pin the line box identically regardless of which local
   font resolves. size-adjust is the only Arial-derived value, and it is
   NOT harmless just because the line box is pinned: on Arial, Helvetica
   Neue and Liberation Sans the residual glyph-width error is small, but on
   Roboto (the Android path this fix specifically targets) it's larger —
   and for text that wraps, different glyph widths can change the number
   of lines, and line count changes block height. The 51-86px hero above is
   routinely multi-line, so a wrap-driven height shift can survive this fix
   on Android. Still strictly better than the prior single local("Arial"),
   which resolved to nothing there and applied no override at all — this
   reduces the problem, it doesn't eliminate it on every platform.

   Known limitation, not fixed here: these are Capsize's 400-weight metrics,
   but --font-display only ever renders at weight 700 here (line 254 above
   and others) and the Google Fonts request never asks for Plus Jakarta
   Sans 400. The 700-weight recompute would give size-adjust ~108.6% /
   ascent-override ~95.6% against the 104.98% / 98.88% shipped below — the
   same simplification next/font makes, recorded in docs/SEO_BASELINE.md
   for a future deliberate refinement. */
@font-face {
  font-family: "Plus Jakarta Sans Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Roboto"), local("Liberation Sans");
  ascent-override: 98.88%;
  descent-override: 21.15%;
  line-gap-override: 0%;
  size-adjust: 104.98%;
}
@font-face {
  font-family: "Manrope Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Roboto"), local("Liberation Sans");
  ascent-override: 103.31%;
  descent-override: 29.07%;
  line-gap-override: 0%;
  size-adjust: 103.19%;
}
@font-face {
  font-family: "DM Mono Fallback";
  src: local("Courier New"), local("DejaVu Sans Mono"), local("Roboto Mono");
  ascent-override: 99.22%;
  descent-override: 31.01%;
  line-gap-override: 0%;
  size-adjust: 99.98%;
}

.ss-landing {
  --ink:    #173b5d;
  --blue:   #287bc4;
  --sea:    #dcefe9;
  --mist:   #f6f4ee;
  --cream:  #fffdf7;
  --mint:   #9fe0c6;
  --muted:  #4f6475;  /* darkened: #657d8d failed WCAG AA as body text on every surface here (3.61:1 on --sea, 4.24:1 on --cream, 3.92:1 on --mist) */
  --line:   rgba(23, 59, 93, 0.16);

  --font-display: "Plus Jakarta Sans", "Plus Jakarta Sans Fallback", Manrope, system-ui, sans-serif;
  --font-ui:      Manrope, "Manrope Fallback", system-ui, sans-serif;
  --font-mono:    "DM Mono", "DM Mono Fallback", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  background: var(--mist);
  color: var(--ink);
  font-family: var(--font-ui);
}

/* Scoped reset. index.html loads no other stylesheet, so this page supplies
   its own — kept minimal rather than copying app.css's, which assumes the
   old token set. */
/* Wrapped in :where() so every rule below carries ZERO specificity. Written
   as plain `.ss-landing a { color: inherit }` these element selectors (0,1,1)
   outrank the single-class component rules (0,1,0) that follow — which turned
   .ss-brand and .ss-category-btn, both anchors, dark-on-dark. */
:where(.ss-landing) *, :where(.ss-landing) *::before, :where(.ss-landing) *::after { box-sizing: border-box; }
:where(.ss-landing a) { color: inherit; text-decoration: none; }
:where(.ss-landing button) { border: 0; font: inherit; }
:where(.ss-landing input) { font: inherit; }
:where(.ss-landing ul) { margin: 0; padding: 0; list-style: none; }
:where(.ss-landing img) { display: block; }
:where(.ss-landing h1, .ss-landing h2, .ss-landing h3, .ss-landing p) { margin: 0; }
.ss-landing :focus-visible { outline: 3px solid rgba(242, 216, 108, .9); outline-offset: 3px; }
/* The search card already signals focus with a mint ring and a lift on
   :focus-within, so the yellow ring on the input inside it reads as a
   rendering fault rather than an affordance. The ring moves to the field. */
.ss-landing .ss-search-field input:focus-visible { outline: none; }
.ss-search-field:focus-within {
  border-color: rgba(126,211,198,.95);
  box-shadow: 0 6px 0 rgba(23,59,93,.045), inset 0 1px 0 #fff, 0 0 0 3px rgba(126,211,198,.4);
}

.ss-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Shared layout ---------------------------------------------------------- */
.ss-shell { width: min(1160px, calc(100% - 48px)); margin: 0 auto; }

.ss-brand {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--cream); font-size: 17px; font-weight: 800; letter-spacing: -.04em;
}
.ss-brand em { color: var(--mint); font-style: normal; }
.ss-mark {
  width: 34px; height: 34px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 11px; transform: rotate(-7deg);
  background: linear-gradient(145deg, #3d9de0 0%, #287bc4 52%, #278b88 125%);
  box-shadow: inset 1px 1px 0 rgba(255,255,255,.28), inset -1px -2px 0 rgba(9,54,83,.22), 7px 8px 14px rgba(5,31,54,.2);
}
.ss-mark svg { width: 23px; height: 23px; transform: rotate(7deg); }
.ss-icon {
  width: 1em; height: 1em; fill: none; stroke: currentColor;
  stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8;
}

/* Hero -------------------------------------------------------------------
   The concept put overflow:hidden on the hero itself. That would clip the
   search dropdown, which opens downward from a card sitting mid-hero — so
   the clipping lives on .ss-geometry, whose only job is to contain the
   clip-path facets. The hero itself must stay unclipped. */
.ss-hero { position: relative; background: #173b5d; }
.ss-geometry {
  position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  background: linear-gradient(112deg, #173b5d 0%, #123d5c 100%);
}
.ss-facet { position: absolute; inset: 0; }
.ss-facet.one   { background: #1d5071; clip-path: polygon(0 0, 17% 40%, 100% 0); }
.ss-facet.two   { background: #174566; clip-path: polygon(0 0, 0 100%, 17% 40%, 52% 100%); }
.ss-facet.three { background: #123c5b; clip-path: polygon(17% 40%, 52% 100%, 100% 100%, 100% 35%); }
.ss-facet.four  { background: #215b76; clip-path: polygon(17% 40%, 100% 0, 100% 35%); opacity: .72; }
.ss-facet.five  { background: #164967; clip-path: polygon(0 100%, 52% 100%, 17% 40%); opacity: .68; }

/* Header ------------------------------------------------------------------ */
.ss-topbar {
  position: relative; z-index: 5; height: 82px;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid rgba(255,253,247,.13);
}
.ss-nav {
  display: flex; align-items: center; gap: 30px;
  color: rgba(246,244,238,.7); font-size: 12px; font-weight: 700;
}
.ss-nav a { transition: color .2s ease; }
.ss-nav a:hover { color: #fff; }
.ss-actions { display: flex; align-items: center; gap: 6px; }

.ss-locale-wrap { position: relative; }
.ss-landing .locale__btn {
  display: flex; align-items: center; gap: 7px; padding: 10px 9px; line-height: 1;
  border: 1px solid transparent; border-radius: 9px; background: transparent;
  color: rgba(246,244,238,.78); cursor: pointer; font-size: 11px; font-weight: 700;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.ss-landing .locale__btn:hover,
.ss-landing .locale__btn[aria-expanded="true"] {
  border-color: rgba(255,253,247,.2); background: rgba(255,253,247,.12); color: #fff;
}
/* core.js writes either an emoji into .locale__flag or, when it finds an
   <img> inside, swaps that image's src. This page uses the image path. */
.ss-landing .locale__flag {
  width: 23px; height: 23px; flex: none; display: inline-block; position: relative;
  overflow: hidden; border: 1px solid rgba(255,255,255,.3); border-radius: 50%;
}
.ss-landing .locale__flag img {
  position: absolute; left: 50%; top: 50%; width: 100%; height: 100%;
  max-width: none; transform: translate(-50%, -50%); object-fit: cover;
}
.ss-landing .locale__menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 8; width: 186px; padding: 6px;
  border: 1px solid rgba(23,59,93,.14); border-radius: 12px; background: var(--cream);
  box-shadow: 0 15px 30px rgba(4,21,39,.28);
}
.ss-landing .locale__opt {
  width: 100%; display: flex; align-items: center; gap: 9px; padding: 10px;
  border-radius: 8px; background: transparent; color: var(--ink); cursor: pointer;
  text-align: left; font-size: 11px; font-weight: 700;
}
.ss-landing .locale__opt:hover,
.ss-landing .locale__opt[aria-checked="true"] { background: var(--sea); }

.ss-menu-btn {
  display: none; padding: 10px; border-radius: 8px;
  background: transparent; color: #fff; cursor: pointer;
}

/* Saved calculators menu --------------------------------------------------- */
.ss-saved-wrap { position: relative; }
.ss-saved-btn {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px;
  border: 1px solid transparent; border-radius: 9px; background: transparent;
  color: inherit; cursor: pointer; font-size: 12px; font-weight: 700; line-height: 1;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.ss-saved-btn:hover, .ss-saved-btn[aria-expanded="true"] {
  border-color: rgba(255,253,247,.2); background: rgba(255,253,247,.12); color: #fff;
}
.ss-saved-btn .ss-icon { width: 14px; height: 14px; flex: none; }
.ss-saved-chev { width: 12px; height: 12px; }
.ss-saved-count {
  min-width: 17px; padding: 2px 5px; border-radius: 999px;
  background: var(--mint); color: #10405c;
  font: 10px/1.4 var(--font-mono); text-align: center;
}
.ss-saved-count[hidden] { display: none; }
.ss-saved-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 9;
  width: 274px; max-height: 320px; overflow-y: auto; padding: 6px;
  border: 1px solid rgba(23,59,93,.14); border-radius: 12px; background: var(--cream);
  box-shadow: 0 15px 30px rgba(4,21,39,.28);
}
.ss-saved-menu[hidden] { display: none; }
.ss-saved-item {
  display: flex; align-items: center; gap: 10px; padding: 10px;
  border-radius: 8px; color: var(--ink); font-size: 12px; font-weight: 700;
}
.ss-saved-item:hover, .ss-saved-item:focus-visible { background: var(--sea); }
.ss-saved-item > span:first-child { flex: 1; min-width: 0; }
.ss-saved-cat {
  flex: none; color: #2f6a72; font-family: var(--font-mono);
  font-size: 9px; letter-spacing: .08em; text-transform: uppercase;
}
.ss-saved-empty { padding: 12px 10px; color: var(--muted); font-size: 12px; line-height: 1.5; }

/* Hero content ------------------------------------------------------------ */
.ss-hero-content {
  position: relative; z-index: 1; min-height: 606px;
  display: grid; place-items: center; padding: 91px 0 112px; text-align: center;
}
.ss-hero-copy { width: min(800px, 100%); }
.ss-hero h1 {
  max-width: 760px; margin: 0 auto; color: var(--cream);
  font-family: var(--font-display); font-size: clamp(51px, 6.4vw, 86px);
  font-weight: 700; letter-spacing: -.085em; word-spacing: .13em; line-height: .93;
}
.ss-hero h1 span { display: block; margin-top: 12px; color: var(--mint); }
.ss-lead {
  max-width: 555px; margin: 37px auto 0;
  color: rgba(246,244,238,.78); font-size: 16px; line-height: 1.7;
}

/* Search ------------------------------------------------------------------ */
.ss-search-card {
  position: relative; z-index: 6; width: min(650px, 100%); margin: 45px auto 0; padding: 32px;
  border: 1px solid rgba(255,255,255,.75); border-radius: 22px;
  background: linear-gradient(145deg, #fffef9 0%, #f0f5ef 100%);
  box-shadow: 0 30px 0 rgba(5,28,48,.13), 0 38px 70px rgba(3,22,39,.34),
              inset 0 1px 0 #fff, inset 0 -1px 0 rgba(23,59,93,.08);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.ss-search-card:hover, .ss-search-card:focus-within {
  transform: translateY(-3px); border-color: rgba(126,211,198,.95);
  box-shadow: 0 30px 0 rgba(5,28,48,.15), 0 43px 78px rgba(3,22,39,.4),
              0 0 0 4px rgba(126,211,198,.16), inset 0 1px 0 #fff, inset 0 -1px 0 rgba(23,59,93,.08);
}
.ss-search-field {
  min-height: 64px; display: flex; align-items: center; padding: 5px 18px;
  border: 1px solid rgba(23,59,93,.23); border-radius: 14px; background: var(--cream);
  box-shadow: 0 6px 0 rgba(23,59,93,.045), inset 0 1px 0 #fff;
}
.ss-search-field .ss-icon { flex: none; width: 18px; height: 18px; color: var(--blue); }
.ss-search-field input {
  width: 100%; min-width: 0; padding: 15px 14px; border: 0; outline: 0;
  background: transparent; color: var(--ink); font-size: 15px;
}
.ss-search-field input::placeholder { color: #76909a; }
.ss-search-note {
  max-width: 510px; margin: 16px auto 0; color: #4e6e7b; font-size: 13px; line-height: 1.6;
}

/* Results panel. The concept had no dropdown at all — the search was a bare
   input — so this is designed here to match the card it drops out of. */
.ss-search-wrap { position: relative; }
.ss-landing .search__results {
  position: absolute; top: calc(100% + 10px); left: 0; right: 0; z-index: 40;
  max-height: 320px; overflow-y: auto; padding: 6px;
  border: 1px solid rgba(23,59,93,.16); border-radius: 14px; background: var(--cream);
  box-shadow: 0 18px 34px rgba(4,21,39,.22), 0 40px 70px -28px rgba(4,21,39,.3);
  text-align: left;
}
.ss-landing .search__results[hidden] { display: none; }
.ss-landing .search__item {
  display: flex; align-items: center; gap: 10px; padding: 11px 12px;
  border-radius: 9px; color: var(--ink); font-size: 14px; font-weight: 600;
}
.ss-landing .search__item:hover, .ss-landing .search__item:focus-visible { background: var(--sea); }
.ss-landing .search__item > span:first-child { flex: 1; min-width: 0; }
.ss-landing .search__cat {
  flex: none; color: #2f6a72; font-family: var(--font-mono);
  font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
}
.ss-landing .badge-soon {
  flex: none; padding: 3px 7px; border-radius: 999px;
  background: rgba(40,123,196,.12); color: var(--blue);
  font-family: var(--font-mono); font-size: 9px; letter-spacing: .06em; text-transform: uppercase;
}
.ss-landing .search__hint {
  padding: 14px 12px; color: var(--muted); font-size: 13px;
}

.ss-how-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  margin-top: 37px; padding: 13px 20px;
  border: 1px solid rgba(220,239,233,.68); border-radius: 999px;
  background: rgba(255,253,247,.15);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 8px 18px rgba(3,22,39,.14);
  color: #fffdf7; cursor: pointer; font-size: 13px; font-weight: 700;
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.ss-how-btn:hover { transform: translateY(-2px); border-color: rgba(159,224,198,.9); background: rgba(159,224,198,.18); }

.ss-proof {
  position: absolute; left: 50%; bottom: 30px; z-index: 2;
  display: flex; justify-content: center; gap: 24px; transform: translateX(-50%);
  color: var(--cream); font: 14px var(--font-mono); white-space: nowrap;
}
.ss-proof span { display: inline-flex; align-items: center; gap: 8px; }
.ss-proof .ss-icon { width: 14px; height: 14px; color: var(--mint); }

/* Category rail ----------------------------------------------------------- */
.ss-rail { padding: 76px 0; background: var(--cream); color: var(--ink); }
.ss-rail-inner {
  min-height: 250px; display: grid;
  grid-template-columns: minmax(230px, .8fr) minmax(0, 1.55fr);
  align-items: center; gap: 42px;
}
.ss-rail strong span { display: block; }
.ss-rail strong {
  /* Was clamp(21px,2vw,28px) — less than half the 58px and 62px of the two
     sections below it, which made this band read as a caption rather than a
     peer. It stops short of matching them because it sits in a narrow
     column; the column widens to carry it. */
  display: block; max-width: 400px; font-family: var(--font-display);
  font-size: clamp(28px, 3.2vw, 40px); font-weight: 700; letter-spacing: -.065em; word-spacing: .11em; line-height: 1.04;
}
/* Says the tiles are navigation. Without it they read as a static icon strip
   — they carry no underline, no link colour and no descriptive label. */
.ss-rail-hint {
  display: flex; align-items: center; gap: 7px; max-width: 420px; margin-top: 16px;
  color: var(--muted); font-size: 13px; line-height: 1.5;
}
.ss-rail-hint .ss-icon { width: 15px; height: 15px; flex: none; color: #3eaa99; }
.ss-category-list { display: grid; grid-template-columns: repeat(6, minmax(72px, 1fr)); gap: 10px; }
.ss-category-btn {
  /* Square. These read as icon buttons, so a tall rectangle looks like a
     layout accident — aspect-ratio holds the shape at every width instead
     of pinning a height the column can outgrow. */
  aspect-ratio: 1; min-height: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px;
  border: 1px solid rgba(220,239,233,.25); border-radius: 18px;
  background: linear-gradient(145deg, #244f6d, #123653);
  color: #f8fcfa; cursor: pointer; font-size: 10px; font-weight: 700; text-align: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 9px 20px rgba(23,59,93,.16);
  transition: transform .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.ss-category-btn:hover, .ss-category-btn:focus-visible {
  transform: translateY(-3px); border-color: rgba(242,216,108,.7);
  background: linear-gradient(145deg, #2b5c79, #163e5b);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 15px 27px rgba(23,59,93,.24);
}
.ss-category-icon {
  width: 54px; height: 54px; display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.32); border-radius: 14px; color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 6px 12px rgba(23,59,93,.2);
}
.ss-category-icon .ss-icon { width: 27px; height: 27px; }
/* The arrow is the per-tile half of the same signal as .ss-rail-hint: present
   but quiet at rest, and it leans right on hover. */
.ss-category-label { display: inline-flex; align-items: center; gap: 5px; }
.ss-category-go {
  width: 12px; height: 12px; flex: none; opacity: .5;
  transition: opacity .2s ease, transform .2s ease;
}
.ss-category-btn:hover .ss-category-go,
.ss-category-btn:focus-visible .ss-category-go { opacity: 1; transform: translateX(3px); }
.ss-c-maths        { background: linear-gradient(145deg,#5eaff0,#287bc4); }
.ss-c-money        { background: linear-gradient(145deg,#54c6aa,#218b78); }
.ss-c-construction { background: linear-gradient(145deg,#f3c96a,#cd8c27); }
.ss-c-health       { background: linear-gradient(145deg,#f27f91,#bf4560); }
.ss-c-science      { background: linear-gradient(145deg,#9586e2,#6151b6); }
.ss-c-time         { background: linear-gradient(145deg,#81c6cb,#277f9b); }

/* Popular calculators ------------------------------------------------------ */
.ss-popular {
  position: relative; overflow: hidden; padding: 84px 0 96px;
  background: linear-gradient(125deg,#123653,#174b6b 56%,#0f4e6d); color: var(--cream);
}
.ss-popular::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .48;
  background:
    linear-gradient(148deg, transparent 0 18%, rgba(84,174,181,.22) 18.1% 31%, transparent 31.1% 53%, rgba(40,123,196,.2) 53.1% 72%, transparent 72.1%),
    linear-gradient(32deg, transparent 0 45%, rgba(220,239,233,.08) 45.1% 61%, transparent 61.1%);
}
.ss-popular-inner { position: relative; }
/* The intro sat opposite the heading, which made the eye travel the full
   1160px shell to read a 13px line. It reads under the heading instead. */
.ss-popular-heading { margin-bottom: 34px; }
.ss-kicker { color: rgba(239,250,247,.75); font: 12px var(--font-mono); }
.ss-popular h2 {
  max-width: 500px; margin: 6px 0 0; font-family: var(--font-display);
  font-size: clamp(35px, 4.5vw, 58px); letter-spacing: -.075em; word-spacing: .12em; line-height: .98;
}
.ss-popular-heading p {
  max-width: 520px; margin: 16px 0 0; color: rgba(239,250,247,.88); font-size: 15px; line-height: 1.7;
}
/* Four fixed slots, eight calculators. The horizontal scroller this
   replaces could not be panned at all on desktop: its scrollbar is hidden,
   a vertical wheel does not scroll a horizontal container, and no drag
   handler existed — so half the cards were unreachable. Nothing overflows
   now, so nothing needs scrolling. */
.ss-popular-deck {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
  padding: 5px 4px 20px; margin: 0 -4px;
}
/* Both faces occupy the same grid cell, so the slot sizes itself to the
   taller of the two — no hard-coded height to drift out of sync. */
.ss-popular-slot { display: grid; }
.ss-popular-slot > .ss-popular-card { grid-area: 1 / 1; z-index: 1; }
/* visibility (not just opacity) keeps the resting face out of the tab order
   and away from the pointer. */
.ss-popular-card {
  opacity: 0; visibility: hidden;
  transition: opacity .55s ease, visibility 0s linear .55s,
              transform .2s ease, box-shadow .2s ease;
}
/* The incoming card sits ABOVE the outgoing one so it fades in over an
   opaque surface. Cross-fading two cards at equal z-index means both sit
   near 50% mid-transition, stacking two shadows and two sets of text —
   which reads as ghosting rather than a fade. */
.ss-popular-card.is-live {
  z-index: 2; opacity: 1; visibility: visible;
  transition: opacity .55s ease, visibility 0s linear 0s,
              transform .2s ease, box-shadow .2s ease;
}
.ss-popular-card {
  min-height: 220px; display: flex; flex-direction: column;
  justify-content: space-between; padding: 22px;
  border: 1px solid rgba(255,255,255,.18); border-radius: 18px;
  background: linear-gradient(145deg,#fffef9,#edf5ef); color: var(--ink);
  box-shadow: 0 15px 24px rgba(4,21,39,.19), inset 0 1px 0 #fff;
  transition: transform .2s ease, box-shadow .2s ease;
}
.ss-popular-card:hover { transform: translateY(-3px); box-shadow: 0 22px 34px rgba(4,21,39,.26), inset 0 1px 0 #fff; }
/* The whole tile is the target, not just the title. The card cannot simply
   be wrapped in an <a> because it contains the Save button, and nesting
   interactive elements is invalid and would swallow the button. So the
   title-s link is stretched over the card and Save is lifted above it —
   one link in the accessibility tree, both controls still reachable. */
.ss-popular-card { position: relative; }
.ss-popular-card h3 a::after {
  content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 18px;
}
.ss-popular-card-foot { position: relative; z-index: 2; }
.ss-popular-card-top {
  display: flex; align-items: center; justify-content: space-between;
  color: #2f6a72; font: 10px var(--font-mono); letter-spacing: .08em; text-transform: uppercase;
}
.ss-popular-category { display: flex; align-items: center; gap: 9px; }
.ss-popular-category-icon {
  width: 30px; height: 30px; flex: none; display: grid; place-items: center;
  border-radius: 9px; color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.38), 0 4px 8px rgba(23,59,93,.16);
}
.ss-popular-category-icon .ss-icon { width: 16px; height: 16px; }
.ss-dot { width: 9px; height: 9px; flex: none; border-radius: 50%; background: #6fb9ad; }
.ss-popular-card h3 {
  margin: 22px 0 0; font-family: var(--font-display);
  font-size: 23px; letter-spacing: -.06em; word-spacing: .1em; line-height: 1.05;
}
.ss-popular-card-foot { display: flex; justify-content: flex-end; margin-top: 18px; }

/* .save-btn is core.js's hook — restyled here for the landing palette. */
.ss-landing .save-btn {
  display: inline-flex; align-items: center; gap: 7px; padding: 9px 11px;
  border: 1px solid rgba(23,59,93,.18); border-radius: 9px;
  background: rgba(255,255,255,.46); color: var(--muted); cursor: pointer;
  font: 10px var(--font-mono); letter-spacing: .04em;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.ss-landing .save-btn svg { width: 12px; height: 12px; fill: currentColor; }
.ss-landing .save-btn:hover,
.ss-landing .save-btn[aria-pressed="true"] { border-color: #3eaa99; background: var(--sea); color: var(--ink); }

/* Method ------------------------------------------------------------------- */
.ss-method { padding: 88px 0 96px; background: var(--cream); color: var(--ink); }
/* Copy left, worked example right. The old stacked arrangement left a large
   dead area under the short heading column while the card ran full width. */
.ss-method-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 52px; align-items: center;
}
.ss-method h2 {
  margin: 0; font-family: var(--font-display);
  font-size: clamp(38px, 4.8vw, 62px); letter-spacing: -.08em; word-spacing: .13em; line-height: .96;
}
.ss-method-copy p { max-width: 440px; margin: 20px 0 0; color: var(--muted); font-size: 15px; line-height: 1.7; }
.ss-method-points {
  max-width: 440px; margin: 22px 0 0; padding: 0; list-style: none; display: grid; gap: 11px;
}
.ss-method-points li {
  position: relative; padding-left: 26px; color: var(--muted); font-size: 15px; line-height: 1.6;
}
/* A small facet, echoing the tile in the mark, rather than a bullet glyph. */
.ss-method-points li::before {
  content: ""; position: absolute; left: 0; top: .5em;
  width: 9px; height: 9px; border-radius: 3px;
  background: linear-gradient(145deg,#3d9de0,#278b88);
}
.ss-method-card {
  /* Fills the right half of .ss-method-grid. min-height pulls it toward
     square (554x440 is about 1.26:1) rather than the wide letterbox the
     example alone produces, and the column centres so the extra height
     reads as breathing room instead of a gap under the content. */
  width: 100%; min-height: 440px; padding: 30px 32px;
  display: flex; flex-direction: column; justify-content: center;
  border: 1px solid rgba(23,59,93,.15); border-radius: 18px;
  background: linear-gradient(145deg,#eff8f2,#e5f2ed);
  box-shadow: 10px 12px 0 rgba(23,59,93,.08), 0 18px 30px rgba(23,59,93,.1), inset 0 1px 0 rgba(255,255,255,.85);
}
.ss-method-label {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-bottom: 18px; color: var(--muted);
  font: 10px var(--font-mono); letter-spacing: .14em; text-transform: uppercase;
}
/* The card used to read as a screenshot, so nobody would think to touch it.
   The pulse is the only thing on the page that says "this one is alive". */
.ss-live-dot {
  width: 7px; height: 7px; flex: none; border-radius: 50%; background: #2f9e83;
  animation: ss-live-pulse 2.4s ease-out infinite;
}
@keyframes ss-live-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(47,158,131,.5); }
  70%  { box-shadow: 0 0 0 7px rgba(47,158,131,0); }
  100% { box-shadow: 0 0 0 0 rgba(47,158,131,0); }
}

/* Live worked example ------------------------------------------------------
   #1f6aab rather than var(--blue) wherever this block puts blue on cream:
   --blue (#287bc4) is 4.35:1 there, which clears AA for the 40px+ figure but
   not for 13-14px chips, links and control glyphs. */
/* minmax(0,1fr) and the min-width:0 below are load-bearing, not tidiness: the
   figures are unwrappable mono strings, so a grid track left at its default
   auto width sizes to max-content and a visitor typing a seven-figure bill
   drags the whole page sideways. Measured at 320px: 75px of overflow without
   these. */
.ss-demo {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px;
  min-width: 0; padding: 20px;
  border: 1px solid rgba(23,59,93,.12); border-radius: 14px;
  background: var(--cream);
  box-shadow: 0 10px 22px rgba(23,59,93,.09), inset 0 1px 0 #fff;
}
.ss-demo > * { min-width: 0; }

/* -- inputs -- */
.ss-demo-row { display: grid; grid-template-columns: 1.25fr 1fr; gap: 12px; }
.ss-demo-field { display: grid; gap: 7px; align-content: start; }
.ss-demo-field label, .ss-demo-legend {
  color: #2f6a72; font: 600 11px var(--font-ui);
  letter-spacing: .1em; text-transform: uppercase;
}
.ss-demo-input, .ss-demo-stepper {
  display: flex; align-items: center; height: 46px; overflow: hidden;
  border: 1px solid rgba(23,59,93,.2); border-radius: 11px; background: #fff;
  box-shadow: inset 0 1px 0 #fff, 0 1px 0 rgba(23,59,93,.05);
}
.ss-demo-input:focus-within, .ss-demo-stepper:focus-within {
  border-color: rgba(126,211,198,.95);
  box-shadow: inset 0 1px 0 #fff, 0 0 0 3px rgba(126,211,198,.4);
}
.ss-demo-input.is-invalid { border-color: #b23c33; box-shadow: inset 0 1px 0 #fff, 0 0 0 3px rgba(178,60,51,.16); }
.ss-demo-input > span { padding-left: 13px; color: var(--muted); font: 15px var(--font-mono); }
.ss-demo-input input, .ss-demo-stepper input {
  flex: 1; min-width: 0; height: 100%; padding: 0 12px;
  border: 0; background: none; color: var(--ink);
  font: 500 17px var(--font-mono); font-variant-numeric: tabular-nums;
}
.ss-demo-input input { padding-left: 5px; }
.ss-demo-stepper input { padding: 0; text-align: center; }
.ss-demo-input input:focus-visible, .ss-demo-stepper input:focus-visible { outline: none; }
.ss-demo-stepper button {
  flex: none; width: 40px; height: 100%; border: 0; background: none;
  color: #1f6aab; font: 500 20px/1 var(--font-ui); cursor: pointer;
}
.ss-demo-stepper button:hover { background: rgba(31,106,171,.09); }

/* -- tip chips -- */
.ss-demo-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.ss-demo-chip {
  padding: 8px 13px; border: 1px solid rgba(23,59,93,.2); border-radius: 999px;
  background: #fff; color: var(--ink);
  font: 600 13px var(--font-ui); font-variant-numeric: tabular-nums; cursor: pointer;
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.ss-demo-chip:hover { border-color: rgba(23,59,93,.42); }
.ss-demo-chip[aria-pressed="true"] { border-color: #1f6aab; background: #1f6aab; color: #fff; }

/* -- the answer, which is the whole point of the card -- */
.ss-demo-answer {
  padding: 18px 20px; border-radius: 13px;
  background: linear-gradient(145deg,#1d5a94 0%,#173b5d 58%,#14535a 125%);
  box-shadow: 0 12px 24px rgba(23,59,93,.22), inset 0 1px 0 rgba(255,255,255,.18);
}
.ss-demo-answer-label {
  display: block; margin-bottom: 7px; color: #9fe0c6;
  font: 600 12px var(--font-ui); letter-spacing: .1em; text-transform: uppercase;
}
.ss-demo-value {
  display: block; transform-origin: left center; color: #fff;
  font-family: var(--font-mono); font-size: clamp(38px, 4.4vw, 46px); font-weight: 500;
  letter-spacing: -.035em; line-height: 1; font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.ss-demo-value.is-fresh { animation: ss-demo-pop .28s ease; }
@keyframes ss-demo-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.04); color: #9fe0c6; }
  100% { transform: scale(1); }
}
.ss-demo-sub { display: block; margin-top: 11px; color: #cfe8f5; font: 13px var(--font-ui); }
.ss-demo-sub b {
  color: #fff; font-weight: 500; font-family: var(--font-mono); font-variant-numeric: tabular-nums;
}

/* -- the receipt -- */
.ss-demo-working { display: grid; gap: 5px; }
.ss-demo-working-label {
  margin-bottom: 2px; color: #2f6a72; font: 600 11px var(--font-ui);
  letter-spacing: .1em; text-transform: uppercase;
}
.ss-demo-working span:not(.ss-demo-working-label) {
  color: #4e6e7b; font: 12px/1.55 var(--font-mono); overflow-wrap: anywhere;
}
.ss-demo-working b { color: var(--ink); font-weight: 500; }

.ss-demo-cta {
  justify-self: start; display: inline-flex; align-items: center; gap: 7px;
  padding-bottom: 2px; border-bottom: 1px solid rgba(31,106,171,.35);
  color: #1f6aab; font: 600 14px var(--font-ui); text-decoration: none;
}
.ss-demo-cta:hover { border-bottom-color: #1f6aab; }
.ss-demo-cta span { transition: transform .18s ease; }
.ss-demo-cta:hover span { transform: translateX(3px); }

/* Footer ------------------------------------------------------------------- */
.ss-footer { padding: 72px 0 28px; background: #173b5d; color: var(--cream); }
.ss-footer-inner { display: grid; grid-template-columns: 1.35fr 1.6fr 1fr 1fr; gap: 42px; }
.ss-footer-brand { display: grid; align-content: start; gap: 18px; }
.ss-footer-tagline { max-width: 210px; margin: 0; color: #d8f0e4; font-size: 13px; line-height: 1.6; }
.ss-footer h3 {
  margin: 3px 0 18px; color: #a7e0ca;
  font: 10px var(--font-mono); letter-spacing: .14em; text-transform: uppercase;
}
.ss-footer ul { display: grid; gap: 11px; }
/* Scoped to the link lists, NOT `.ss-footer a`. That broader selector (0,1,1)
   also matched the footer's brand anchor and outranked .ss-brand (0,1,0),
   rendering the footer logo's wordmark at 12px against the header's 17px. */
.ss-footer ul a { color: var(--cream); font-size: 12px; opacity: .9; }
.ss-footer ul a:hover { color: #bce9d0; opacity: 1; }
/* The brand is a grid item here; without this it stretches to the column and
   its hover/focus target runs the full width. */
.ss-footer-brand .ss-brand { justify-self: start; }
.ss-footer-bottom {
  display: flex; justify-content: space-between; gap: 20px; margin-top: 70px;
  color: #c7e7da; font: 10px/1.5 var(--font-mono);
}

/* Responsive --------------------------------------------------------------- */
@media (max-width: 820px) {
  .ss-shell { width: min(100% - 34px, 680px); }
  .ss-nav {
    display: none; position: absolute; top: 70px; left: 0; right: 0; z-index: 9;
    flex-direction: column; align-items: stretch; gap: 0; padding: 10px 15px;
    border: 1px solid var(--line); border-radius: 12px; background: var(--cream);
    box-shadow: 0 14px 30px rgba(23,59,93,.12);
  }
  .ss-nav.open { display: flex; }
  .ss-nav a { padding: 14px 4px; border-bottom: 1px solid var(--line); color: var(--ink); }
  .ss-nav a:last-child { border-bottom: 0; }
  .ss-menu-btn { display: block; }
  /* Inside the stacked panel the saved list drops in place rather than
     floating — a dropdown hanging off an already-open dropdown is a mess on
     a phone. */
  .ss-saved-wrap { width: 100%; }
  .ss-saved-btn { width: 100%; justify-content: flex-start; padding: 14px 4px; border: 0; border-radius: 0; color: var(--ink); }
  .ss-saved-btn:hover, .ss-saved-btn[aria-expanded="true"] { background: transparent; color: var(--ink); }
  .ss-saved-btn > span:first-of-type { flex: 1; text-align: left; }
  .ss-saved-menu {
    position: static; width: auto; margin: 0 0 8px;
    border-color: rgba(23,59,93,.1); box-shadow: none; background: rgba(23,59,93,.04);
  }
  .ss-rail-inner { grid-template-columns: 1fr; align-items: start; gap: 22px; padding: 30px 0; }
  .ss-category-list { width: 100%; grid-template-columns: repeat(6, minmax(76px, 1fr)); }
  .ss-popular-deck { grid-template-columns: repeat(2, 1fr); }
  /* Copy above the example once there is no room for two columns. */
  .ss-method-grid { grid-template-columns: 1fr; gap: 30px; }
  .ss-method-card { min-height: 0; }
}
@media (max-width: 760px) {
  .ss-footer { padding: 58px 0 24px; }
  .ss-footer-inner { grid-template-columns: 1fr 1fr; gap: 35px 22px; }
  .ss-footer-brand { grid-column: 1 / -1; }
  .ss-footer-bottom { display: block; margin-top: 46px; }
}
@media (max-width: 560px) {
  .ss-shell { width: calc(100% - 32px); }
  .ss-topbar { height: 70px; }
  .ss-landing .locale__label { display: none; }
  .ss-hero-content { min-height: 570px; padding: 76px 0 75px; }
  .ss-hero h1 { font-size: clamp(42px, 12.2vw, 58px); line-height: .94; }
  .ss-hero h1 span { margin-top: 8px; }
  .ss-lead { margin-top: 29px; font-size: 14px; }
  .ss-search-card { margin-top: 34px; padding: 25px 16px 24px; border-radius: 18px; }
  .ss-search-field { min-height: 59px; padding-left: 16px; border-radius: 12px; }
  .ss-search-field input { padding: 13px 10px; font-size: 14px; }
  .ss-search-note { margin-top: 15px; font-size: 12px; }
  .ss-how-btn { margin-top: 32px; padding: 12px 18px; }
  .ss-proof {
    bottom: 19px; gap: 8px 14px; font-size: 11px;
    flex-wrap: wrap; white-space: normal;
    width: max-content; max-width: calc(100% - 26px);
  }
  .ss-rail { padding: 44px 0; }
  .ss-rail-inner { gap: 18px; padding: 28px 0 31px; }
  .ss-rail strong { font-size: 30px; }
  .ss-category-list { grid-template-columns: repeat(3, 1fr); gap: 9px; }
  /* No min-height: aspect-ratio governs the shape, and a floor taller than
     the computed width turns the tiles back into rectangles on narrow phones. */
  .ss-category-btn { border-radius: 16px; font-size: 10px; }
  .ss-category-icon { width: 48px; height: 48px; border-radius: 14px; }
  .ss-category-icon .ss-icon { width: 24px; height: 24px; }
  .ss-popular { padding: 65px 0 74px; }
  .ss-popular-heading { margin-bottom: 25px; }
  .ss-popular-heading p { margin-top: 14px; font-size: 14px; }
  .ss-popular-deck { gap: 10px; }
  .ss-popular-card { min-height: 172px; padding: 15px; }
  .ss-popular-card h3 { margin-top: 14px; font-size: 17px; }
  .ss-popular-card-foot { margin-top: 12px; }
  .ss-method { padding: 68px 0 76px; }
  /* The points list arrived after this breakpoint was written, so it kept the
     15px base size while the paragraph above it dropped to 14px — leaving the
     sentence that introduces the list rendering smaller than the list. Both
     step down together. Line-height stays deliberately different: running
     prose earns more leading than list items. */
  .ss-method-copy p { margin-top: 16px; font-size: 14px; }
  .ss-method-points li { font-size: 14px; }
  .ss-method-card { padding: 24px 20px 25px; }
  .ss-demo { padding: 16px; gap: 14px; }
  .ss-demo-row { grid-template-columns: 1fr; }
  /* Five chips wrap 4+1 at this width, which reads as a mistake. An equal
     five-column grid keeps them on one row down to 320px. */
  .ss-demo-chips { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
  .ss-demo-chip { padding: 8px 2px; text-align: center; }
  .ss-demo-value { font-size: 36px; }
  .ss-demo-working span:not(.ss-demo-working-label) { font-size: 11px; }
  .ss-footer-inner { grid-template-columns: 1fr; gap: 30px; }
  .ss-footer-brand { grid-column: auto; }
  .ss-footer-bottom { font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .ss-landing *, .ss-landing *::before, .ss-landing *::after {
    animation: none !important; transition: none !important; scroll-behavior: auto !important;
  }
  /* Without this the four resting cards stay visibility:hidden forever and
     half the deck is unreachable. Turning animations off must never cost
     content. display:contents promotes all eight cards to grid items, so
     the deck becomes a static 4x2 grid with nothing hidden. */
  .ss-popular-slot { display: contents; }
  .ss-popular-slot > .ss-popular-card {
    grid-area: auto; opacity: 1; visibility: visible;
  }
}

/* WCAG 2.5.3 Label in Name: the locale-switch button's accessible name must
   contain its visible text. This reuses the .locale__label text node rather
   than duplicating it, so it stays locale-reactive for free. Copied verbatim
   from assets/css/app.css:55. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}