/* ==================================================================
   CalculatorManager — Shared Design System CSS  (v2 "Operators", S4)
   ------------------------------------------------------------------
   Light theme is the default. body.dark-mode flips to the refined slate.
   The header, its menus and the footer keep the dark set in BOTH modes
   (owner decision, S4) — they scope their own tokens below.

   The colour system is the logo's four operators: blue (+) is the only
   action colour; green (÷), orange (×) and violet (−) appear only as
   data, category and status colour. Never type a hex value into a
   template or a calculator — use a token. Values are mirrored as data
   in shared/_theme.js for Node-side code.

   LAYERS (finalised S6). This file owns the tokens, the @font-face set,
   the header, the footer, buttons, cards, FAQ, prose and the shared page
   furniture. THE PAGE BAND lives in cm-pages.css — `.page-band`, the one
   opening every page on the site uses, FROZEN 08-Sep-2026 — together with
   the calculator card and each engine's prefixed component block. Do not
   add a second opening block here.

   One gutter, one left edge (Hard Rule 27): a container INSIDE a padded
   section uses --container; one that supplies its own gutter — the
   header, the page band — uses --container-outer, so both land on the
   same x. A .container is always the page column; a reading measure goes
   on its children, never on the container itself.
   ================================================================== */

/* ---------- Fonts (self-hosted, SIL OFL — see fonts/LICENSES.txt) ---------- */
@font-face{font-family:'Outfit';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/outfit-latin-500-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Outfit';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/outfit-latin-700-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/public-sans-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/public-sans-latin-500-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/public-sans-latin-600-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/source-serif-4-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/source-serif-4-latin-600-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Fira Code';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/fira-code-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Fira Code';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/fira-code-latin-500-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---------- Tokens: light (default) ---------- */
:root {
  --bg-primary:    #FFFFFF;   /* page ground */
  --bg-secondary:  #EEF2F8;   /* alternating sections, inset panels (S40c: deepened — was #F5F6FA, 1.08:1 against white read as one pale sheet) */
  --surface:       #FFFFFF;   /* cards */
  --surface-2:     #E9EDF5;   /* ledger paper inside the calculator card */
  --on-accent:     #FFFFFF;   /* S120: text on an --accent fill */
  --accent:        #1D4ED8;   /* the only action colour (S40c: one step darker than the logo + for prominence; 6.7:1 on white) */
  --accent-hover:  #1E40AF;
  --accent-soft:   rgba(29,78,216,.10);
  --success:       #16A34A;   /* logo ÷ */
  --kicker:        var(--accent);   /* card kickers + the privacy glyph: accent in light (green is 3.3:1 at 11px), success in dark (S51) */
  --download:      #00693C;   /* Download / CSV buttons — brand green (resting fill) */
  --download-hover:#2DBA6E;   /* ghost hover: bright green text + border on transparent bg */
  --download-soft: rgba(45,186,110,.18);  /* focus ring + glow — matches hover green */
  --star:          #F59E0B;
  --danger:        #DC2626;
  --text-heading:  #141B2D;
  --text-light:    #1F2739;   /* strong body text, nav */
  --text-medium:   #48526A;   /* labels, meta, secondary (S40c: 7.8:1 on white — 12.5–14px text needs it) */
  --text-muted:    #2F3850;   /* long-form prose (name inherited from v1: "muted" = prose) */
  --border:        #D3D9E6;
  --border-strong: #B7C0D3;
  --card-shadow:   0 14px 40px rgba(20,27,45,.13);
  --glow:          0 8px 24px rgba(29,78,216,.22);
  /* The four operators, as data / category / chart colour */
  --c1: #3B82F6;  /* + blue   */
  --c2: #22C55E;  /* ÷ green  */
  --c3: #F97316;  /* × orange */
  --c4: #7C3AED;  /* − violet */
  /* Graph paper — one sheet across the site (S40c, owner decision): a 24px
     major line with a 12px minor line inside it. The card's pair sits under
     white; the hero's pair sits under a tinted gradient, so it is darker. */
  --grid-card:        rgba(20,27,45,.10);
  --grid-card-minor:  rgba(20,27,45,.04);
  --grid-hero:        rgba(20,27,45,.13);
  --grid-hero-minor:  rgba(20,27,45,.05);
  --font-display:  'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-body:     'Public Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:     'Fira Code', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* The one editorial face (S7). Used ONLY for the methodology body
     headings and their emphasis — the serif/sans contrast is what makes
     that section read as a written article rather than as UI. Never a
     button, a label, a number or a nav item. */
  --font-serif:    'Source Serif 4', Georgia, 'Times New Roman', serif;
  /* One page gutter for the whole site (S5d). A container that sits INSIDE
     a padded section uses --container; one that provides its own gutter —
     the header, a breadcrumb bar — uses --container-outer, which is the
     same column plus the gutter, so both start at the same x. */
  --container:     1200px;
  --gutter:        24px;
  --container-outer: calc(1200px + 48px);
  --section-pad:   60px var(--gutter);
  --radius:        14px;
  --transition:    .3s ease;
  /* Logo — fixed brand marks, never themed */
  --logo-plus-bg: #3B82F6;
  --logo-minus-bg: #7C3AED;
  --logo-multiply-bg: #F97316;
  --logo-divide-bg: #22C55E;
  --logo-text-calculator: #0891B2;
  --logo-text-manager: #F97316;
  --logo-shell: #1E1E2E;
}
/* ---------- Tokens: dark (the previous slate, refined) ---------- */
body.dark-mode {
  --bg-primary:    #0F172A;
  --bg-secondary:  #1E293B;
  --surface:       #1E293B;
  --surface-2:     #172033;
  --accent:        #5B9AFF;
  --on-accent:     #0B1220;   /* S120: ink on the light dark-mode accent — 6.4:1 (white was 2.8:1) */
  --accent-hover:  #7DB0FF;
  --accent-soft:   rgba(91,154,255,.14);
  --success:       #34D27A;
  --kicker:        var(--success);
  --download:      #00693C;   /* forced brand green (owner decision S15e) */
  --download-hover:#2DBA6E;   /* ghost hover: bright green text + border on transparent bg */
  --download-soft: rgba(45,186,110,.22);  /* stronger glow on dark bg */
  --danger:        #F87171;
  --text-heading:  #FFFFFF;
  --text-light:    #E2E8F0;
  --text-medium:   #94A3B8;
  --text-muted:    #CBD5E1;
  --border:        #2B3A55;
  --border-strong: #3B4B6B;
  --card-shadow:   0 14px 40px rgba(0,0,0,.35);
  --glow:          0 8px 28px rgba(91,154,255,.22);
  --c1: #5B9AFF; --c2: #34D27A; --c3: #FF9350; --c4: #A78BFA;
  --grid-card:        rgba(255,255,255,.075);
  --grid-card-minor:  rgba(255,255,255,.03);
  --grid-hero:        rgba(255,255,255,.085);
  --grid-hero-minor:  rgba(255,255,255,.035);
  --logo-text-calculator: #22D3EE;
}
/* ---------- Header + footer: dark in both modes ----------
   Redefining the tokens on the element re-themes everything inside it —
   dropdowns, the mobile menu and search results included — with no
   per-component overrides. */
.site-header, .site-footer {
  --bg-primary:    #0F172A;
  --bg-secondary:  #1E293B;
  --surface:       #1E293B;
  --accent:        #5B9AFF;
  --on-accent:     #0B1220;   /* S120: ink on the light dark-mode accent — 6.4:1 (white was 2.8:1) */
  --accent-hover:  #7DB0FF;
  --accent-soft:   rgba(91,154,255,.14);
  --success:       #34D27A;
  --text-heading:  #FFFFFF;
  --text-light:    #E2E8F0;
  --text-medium:   #94A3B8;
  --text-muted:    #CBD5E1;
  --border:        #2B3A55;
  --border-strong: #3B4B6B;
  --card-shadow:   0 14px 40px rgba(0,0,0,.35);
  --glow:          0 8px 28px rgba(91,154,255,.22);
  --logo-text-calculator: #22D3EE;
  color-scheme: dark;
}

/* ---------- Reset & base ---------- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);background:var(--bg-primary);color:var(--text-medium);font-size:16px;line-height:1.6;transition:background-color var(--transition),color var(--transition);overflow-x:hidden}
h1,h2,h3,h4,.section-title,.logo-text{font-family:var(--font-display);letter-spacing:-.02em}
h1,h2,h3{text-wrap:balance}
img{max-width:100%;height:auto}
a{color:var(--accent);text-decoration:none;transition:color var(--transition)}
a:hover{color:var(--accent-hover)}
ul{list-style:none}
button{font-family:inherit;cursor:pointer}
code,kbd,pre,.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:4px}
.sr-only{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
[dir="rtl"] .sr-only{left:auto;right:-9999px}
.skip-link{position:absolute;top:-80px;inset-inline-start:0;z-index:3000;background:var(--accent);color:#fff;padding:10px 18px;border-radius:0 0 8px 8px;font-weight:600}
.skip-link:focus{top:0;color:#fff}
.container{max-width:var(--container);margin:0 auto}
.section-title{font-size:32px;font-weight:700;color:var(--text-heading);text-align:start;margin-bottom:12px}
.section-subtitle{text-align:start;color:var(--text-medium);font-size:17px;max-width:70ch;margin:0 0 34px}
.lang-fade{transition:opacity .2s ease}
.lang-fade.fading{opacity:0}

/* Scroll reveal */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .6s ease,transform .6s ease}
.reveal.revealed{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .reveal{opacity:1;transform:none}
}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 28px;border-radius:10px;font-size:16px;font-weight:600;border:2px solid transparent;transition:all var(--transition);white-space:nowrap}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-hover);color:#fff;transform:translateY(-2px);box-shadow:var(--glow)}
.btn-outline{background:transparent;color:var(--accent);border-color:var(--accent)}
.btn-outline:hover{background:var(--accent-soft);transform:translateY(-2px)}
.btn-sm{padding:9px 18px;font-size:14px;border-radius:8px}

/* ---------- Logo ---------- */
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0}
.logo-icon{width:40px;height:40px;object-fit:contain;display:block}
.logo-icon svg{display:block;width:100%;height:100%}
.logo-text{font-size:1.25rem;font-weight:700;line-height:1;white-space:nowrap}
.logo-calculator{color:var(--logo-text-calculator)}
.logo-manager{color:var(--logo-text-manager)}
.footer-logo .logo-icon{width:36px;height:36px}
.footer-logo .logo-text{font-size:1.15rem}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:1000;height:70px;background:var(--bg-primary);border-bottom:1px solid var(--border);transition:box-shadow var(--transition)}
.site-header.scrolled{box-shadow:0 6px 24px rgba(0,0,0,.3)}
.header-inner{max-width:var(--container-outer);margin:0 auto;height:70px;padding:0 var(--gutter);display:flex;align-items:center;gap:14px}
.main-nav{display:flex;align-items:center;gap:4px}
.main-nav > a,.dropdown-toggle{color:var(--text-light);font-size:15px;font-weight:500;padding:8px 12px;border-radius:8px;background:none;border:none;display:inline-flex;align-items:center;gap:5px;transition:background var(--transition),color var(--transition);white-space:nowrap}
.main-nav > a:hover,.dropdown-toggle:hover{background:var(--accent-soft);color:var(--accent)}
.caret{font-size:10px;transition:transform .25s ease}
.dropdown.open .caret{transform:rotate(180deg)}

/* Generic dropdown panel */
.dropdown{position:relative}
.dropdown-menu{position:absolute;top:calc(100% + 10px);left:0;min-width:250px;background:var(--bg-secondary);border:1px solid var(--border);border-radius:12px;box-shadow:var(--card-shadow);padding:8px;opacity:0;visibility:hidden;transform:translateY(-8px);transition:all .25s ease;z-index:1100}
[dir="rtl"] .dropdown-menu{left:auto;right:0}
.dropdown-menu.menu-right{left:auto;right:0}
[dir="rtl"] .dropdown-menu.menu-right{right:auto;left:0}
.dropdown.open .dropdown-menu{opacity:1;visibility:visible;transform:translateY(0)}
.dropdown-menu a,.dropdown-menu button.menu-item{display:flex;align-items:center;gap:10px;width:100%;text-align:start;padding:9px 12px;color:var(--text-light);font-size:14px;border-radius:8px;background:none;border:none;transition:background var(--transition),color var(--transition)}
.dropdown-menu a:hover,.dropdown-menu button.menu-item:hover{background:var(--accent-soft);color:var(--accent)}
.menu-count{margin-inline-start:auto;font-size:12px;color:var(--text-medium);font-family:var(--font-mono)}
.cats-menu{max-height:70vh;overflow-y:auto;min-width:290px}
.menu-note{display:block;padding:10px 12px 6px;font-size:12.5px;line-height:1.5;color:var(--text-medium);border-top:1px solid var(--border);margin-top:6px}
.menu-note a{display:inline;padding:0;color:var(--accent);font-weight:600}
.menu-title{display:block;padding:6px 12px 8px;font-size:13px;font-weight:700;color:var(--text-heading)}
.menu-status{margin-inline-start:auto;font-size:12px;font-weight:600;color:var(--success)}

/* Header search */
.header-search{flex:1;max-width:340px;position:relative}
.header-search input{width:100%;padding:10px 34px 10px 38px;border-radius:10px;border:1px solid var(--border);background:rgba(148,163,184,.08);color:var(--text-light);font-size:16px;font-family:inherit;transition:all var(--transition)}
[dir="rtl"] .header-search input{padding:10px 38px 10px 34px}
.header-search input::placeholder{color:var(--text-medium)}
.header-search input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.search-icon{position:absolute;inset-inline-start:12px;top:50%;transform:translateY(-50%);font-size:14px;opacity:.8;pointer-events:none}
.search-clear{position:absolute;inset-inline-end:8px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--text-medium);font-size:16px;padding:2px 6px;border-radius:6px;display:none}
.search-clear.visible{display:block}
.search-clear:hover{color:var(--accent)}
.search-results{position:absolute;top:calc(100% + 8px);left:0;right:0;background:var(--bg-secondary);border:1px solid var(--border);border-radius:12px;box-shadow:var(--card-shadow);padding:6px;display:none;max-height:60vh;overflow-y:auto;z-index:1200}
.search-results.open{display:block}
.search-results a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;color:var(--text-light);font-size:14px}
.search-results a .sr-cat{margin-inline-start:auto;font-size:12px;color:var(--text-medium);white-space:nowrap}
.search-results a:hover,.search-results a.active{background:var(--accent-soft);color:var(--accent)}
.search-empty{padding:14px 12px;font-size:14px;color:var(--text-medium)}

/* Header actions */
.header-actions{display:flex;align-items:center;gap:8px;margin-inline-start:auto}
.icon-btn{background:none;border:1px solid var(--border);border-radius:10px;min-width:44px;min-height:44px;width:44px;height:44px;font-size:17px;display:inline-flex;align-items:center;justify-content:center;color:var(--text-light);transition:all var(--transition)}
.icon-btn:hover{border-color:var(--accent);color:var(--accent)}
.lang-check{margin-inline-start:auto;color:var(--success);font-weight:700}

/* Hamburger + mobile menu */
.hamburger{display:none}
.mobile-menu{display:none}

/* ---------- Breadcrumbs ---------- */
.breadcrumbs{max-width:var(--container-outer);margin:0 auto;padding:18px var(--gutter) 0;font-size:14px;color:var(--text-medium);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.breadcrumbs a{color:var(--text-medium)}
.breadcrumbs a:hover{color:var(--accent)}
.breadcrumbs .sep{opacity:.6}
.breadcrumbs .current{color:var(--text-light);font-weight:600}

/* ---------- Hero (homepage) — to be reviewed with the owner (S4 next) ---------- */
.hero{background:linear-gradient(135deg,var(--bg-primary) 0%,var(--bg-secondary) 100%);padding:var(--section-pad);min-height:600px;display:flex;align-items:center;position:relative;overflow:hidden}
.hero::before,.hero::after{content:"";position:absolute;border-radius:50%;filter:blur(90px);opacity:.14;pointer-events:none}
.hero::before{width:420px;height:420px;background:var(--c1);top:-120px;right:-80px}
.hero::after{width:340px;height:340px;background:var(--c2);bottom:-140px;left:-100px}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;max-width:1200px;margin:0 auto;width:100%;position:relative;z-index:1}
.hero-badge{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--success);background:rgba(22,163,74,.10);border:1px solid rgba(22,163,74,.3);padding:6px 14px;border-radius:999px;margin-bottom:20px}
.hero h1{font-size:56px;font-weight:700;line-height:1.1;color:var(--text-heading);margin-bottom:20px}
.hero h1 .gradient-text{color:var(--accent)}
.hero-sub{font-size:24px;color:var(--text-light);margin-bottom:16px;line-height:1.4}
.hero-desc{font-size:16px;color:var(--text-medium);margin-bottom:28px;max-width:520px}
.hero-features{display:grid;grid-template-columns:1fr 1fr;gap:10px 24px;margin-bottom:32px}
.hero-features li{display:flex;align-items:center;gap:10px;font-size:15px;color:var(--text-light)}
.check{color:var(--success);font-weight:700;flex-shrink:0;width:22px;height:22px;border-radius:50%;background:rgba(22,163,74,.12);display:inline-flex;align-items:center;justify-content:center;font-size:12px}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap}
.hero-visual{display:flex;flex-direction:column;gap:28px}

/* ---------- Popular calculators (homepage) ---------- */
.popular{background:var(--bg-primary);padding:var(--section-pad);transition:background var(--transition)}
.popular-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.calc-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:20px 18px;color:var(--text-light);display:flex;flex-direction:column;gap:8px;transition:all var(--transition);text-align:start}
.calc-card:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:var(--card-shadow)}
.calc-card .cc-top{display:flex;align-items:center;gap:10px}
.calc-card .c-icon{font-size:26px}
.calc-card .c-name{font-size:15.5px;font-weight:700;color:var(--text-heading);font-family:var(--font-display)}
.calc-card .cc-crumb{font-size:12px;color:var(--text-medium)}
.calc-card .cc-crumb a{color:var(--accent);font-weight:600}
.calc-card .cc-desc{font-size:13.5px;color:var(--text-medium);flex:1}
.calc-card .cc-actions{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:4px;flex-wrap:wrap}
.calc-card .view-link{font-size:13.5px;font-weight:600;color:var(--accent);white-space:nowrap}
.popular-cta{text-align:center;margin-top:36px}

/* ---------- Categories grid ---------- */
.categories{background:var(--bg-secondary);padding:var(--section-pad);transition:background var(--transition)}
.categories-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.category-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px 16px;display:flex;flex-direction:column;gap:8px;color:var(--text-light);transition:all var(--transition)}
.category-card:hover{border-color:var(--accent);transform:translateY(-4px);box-shadow:var(--card-shadow)}
.category-card .cat-icon{font-size:24px;width:48px;height:48px;border-radius:12px;flex-shrink:0;background:var(--accent-soft);display:inline-flex;align-items:center;justify-content:center}
.category-card .cat-name{font-size:15px;font-weight:700;color:var(--text-heading);font-family:var(--font-display)}
.category-card .cat-count{font-size:12.5px;color:var(--accent);font-weight:600}
.category-card .cat-tagline{font-size:12.5px;color:var(--text-medium);flex:1}
.category-card .cat-browse{font-size:13px;font-weight:600;color:var(--accent)}

/* ---------- How it works ---------- */
.how{background:var(--bg-secondary);padding:var(--section-pad);transition:background var(--transition)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;position:relative}
.step{text-align:center;position:relative}
.step-num{width:58px;height:58px;border-radius:50%;background:var(--accent);color:#fff;font-size:22px;font-weight:700;font-family:var(--font-display);display:inline-flex;align-items:center;justify-content:center;margin-bottom:18px;position:relative;z-index:1}
.step:not(:last-child)::after{content:"";position:absolute;top:29px;left:calc(50% + 40px);width:calc(100% - 80px);height:2px;background:linear-gradient(90deg,var(--accent),transparent);opacity:.5}
[dir="rtl"] .step:not(:last-child)::after{left:auto;right:calc(50% + 40px);background:linear-gradient(270deg,var(--accent),transparent)}
.step h3{font-size:18px;font-weight:700;color:var(--text-heading);margin-bottom:8px}
.step p{font-size:14px;color:var(--text-medium);max-width:240px;margin:0 auto}

/* ---------- FAQ ---------- */
.faq{background:var(--bg-secondary);padding:var(--section-pad);transition:background var(--transition)}
.faq-list{max-width:820px;margin:0;display:flex;flex-direction:column;gap:14px}
.faq-item{background:var(--surface);border:1px solid var(--border);border-radius:12px;overflow:hidden;transition:border-color var(--transition)}
.faq-item.open{border-color:var(--accent)}
.faq-question{width:100%;background:none;border:none;text-align:start;padding:20px 22px;font-size:16.5px;font-weight:600;color:var(--text-heading);display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq-question .chevron{flex-shrink:0;color:var(--accent);font-size:14px;transition:transform .35s ease}
.faq-item.open .chevron{transform:rotate(180deg)}
.faq-answer{max-height:0;overflow:hidden;transition:max-height .4s ease}
.faq-answer p{padding:0 22px 20px;font-size:15px;color:var(--text-muted)}

/* The page band that used to live here is now ONE block in cm-pages.css,
   shared with the calculator band — see `.page-band` there. */
.cat-count-badge{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:var(--success);background:rgba(22,163,74,.10);border:1px solid rgba(22,163,74,.3);padding:6px 16px;border-radius:999px;margin-bottom:18px}
.prose-section{background:var(--bg-primary);padding:var(--section-pad)}
.prose-section.alt{background:var(--bg-secondary)}
/* `.container.prose` is one element on several pages. The container part must
   win the width, or the reading column starts at the section gutter and every
   heading in it sits 16px left of the H1 above. The measure moves to the
   children, which is where reading comfort actually lives. */
.prose{max-width:76ch;margin:0}
.container.prose{max-width:var(--container);margin:0 auto}
.container.prose>*{max-width:76ch}
.prose h2{font-size:30px;font-weight:700;color:var(--text-heading);margin-bottom:18px;text-align:start}
.prose h3{font-size:20px;font-weight:700;color:var(--text-heading);margin:26px 0 10px}
.prose p{font-size:15.5px;color:var(--text-muted);margin-bottom:14px}
.grid-section .prose h2{text-align:start;font-size:26px;margin:30px 0 12px}
.grid-section .prose h2:first-child{margin-top:0}
.prose ul,.prose ol{padding-inline-start:22px;margin:0 0 16px}
.prose ul{list-style:disc}
.prose ol{list-style:decimal}
.prose li{font-size:15.5px;color:var(--text-muted);margin-bottom:6px;line-height:1.6}
.prose a{font-weight:600}
.grid-section{background:var(--bg-secondary);padding:var(--section-pad)}
.grid-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;max-width:1200px;margin:0 auto 22px;flex-wrap:wrap}
.grid-note{font-size:13.5px;color:var(--text-medium)}
.cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:1200px;margin:0 auto}
.related{background:var(--bg-primary);padding:var(--section-pad)}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:1000px;margin:0 auto}

/* ---------- Footer (dark in both modes — tokens scoped above) ---------- */
.site-footer{background:var(--bg-primary);color:var(--text-medium);border-top:1px solid var(--border);padding:56px var(--gutter) 28px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;margin-bottom:40px}
.footer-brand .logo{margin-bottom:16px}
.footer-tagline{font-size:14.5px;line-height:1.65;color:var(--text-light);max-width:36ch;margin-bottom:16px}
/* Promise pills — values specified by the owner (S5b) and applied verbatim,
   which is why the four literals below are not tokens. The footer is dark in
   both modes, so they resolve identically everywhere. */
.footer-promises{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin-bottom:22px;max-width:100%}
.footer-promises li{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.375rem .875rem;
  border-radius:9999px;
  background:#0c2307;
  border:1px solid rgba(255,255,255,.12);
  font-size:.6875rem;
  font-weight:600;
  color:#4ade80;
  box-shadow:0 4px 12px rgba(0,0,0,.4);
  white-space:nowrap;
  max-width:100%;
}

/* Types of calculators — type → live categories, the internal-linking spine */
.footer-types{border-top:1px solid var(--border);padding-top:28px;margin-bottom:30px}
.footer-types h4{font-size:13px;font-weight:700;letter-spacing:.12em;color:var(--text-heading);margin-bottom:16px;text-transform:uppercase}
.footer-type-row{margin-bottom:8px;font-size:13.5px;line-height:1.9}
.footer-type-row .ft-name{color:var(--text-heading);font-weight:700;margin-inline-end:10px}
.footer-type-row a{color:var(--text-light);opacity:.85;display:inline-block}
.footer-type-row a:hover{color:var(--accent);opacity:1}
.footer-type-row .ft-sep{opacity:.3;margin:0 8px;color:var(--text-medium)}
.footer-types-note{margin-top:16px;font-size:13px;color:var(--text-medium)}
.footer-social{display:flex;gap:10px}
.footer-social a,.footer-social .soon{width:40px;height:40px;border-radius:10px;border:1px solid var(--border);background:var(--bg-secondary);display:inline-flex;align-items:center;justify-content:center;color:var(--text-light);transition:all var(--transition)}
.footer-social a:hover{border-color:var(--accent);color:var(--accent)}
.footer-social .soon{opacity:.55;cursor:default}
.footer-social svg{width:18px;height:18px;fill:currentColor}
.footer-col h4{font-size:13px;font-weight:700;letter-spacing:.12em;color:var(--text-heading);margin-bottom:16px;text-transform:uppercase}
.footer-col ul li{margin-bottom:10px}
.footer-col ul a{color:var(--text-light);font-size:14px;opacity:.85}
.footer-col ul a:hover{color:var(--accent);opacity:1}
.footer-col .menu-count{font-size:12px;margin-inline-start:6px}
.footer-col .soon{font-size:14px;color:var(--text-medium);opacity:.7}
.footer-bottom{border-top:1px solid var(--border);padding-top:22px;display:flex;align-items:center;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;font-size:13.5px;color:var(--text-medium)}
.footer-bottom a{color:var(--text-light)}
.footer-bottom a:hover{color:var(--accent)}
.footer-bottom .fb-mid{text-align:center}
.footer-bottom .fb-right{text-align:end}

/* ---------- Search page ---------- */
.search-page .js-search{max-width:76ch}
.search-page .js-search{position:relative}
.search-page input[type="search"]{width:100%;font:16px/1.3 var(--font-body);padding:16px 18px 16px 48px;border-radius:14px;border:1px solid var(--border-strong);background:var(--surface);color:var(--text-heading);box-shadow:var(--card-shadow)}
.search-page input[type="search"]:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.search-page .search-icon{position:absolute;inset-inline-start:18px;top:27px;font-size:18px;pointer-events:none;opacity:.7}
.search-page .search-results{position:static;display:none;margin-top:14px;padding:0;background:none;border:0;box-shadow:none;max-height:none}
.search-page .search-results.open{display:block}
.search-page .search-results a{background:var(--surface);border:1px solid var(--border);border-radius:10px;margin-bottom:8px;padding:12px 14px;font-size:15.5px}
.search-page .search-results a:hover,.search-page .search-results a.active{border-color:var(--accent)}
.search-page .search-all h2{font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-medium);margin:34px 0 12px}
.search-page .search-all ul{display:grid;grid-template-columns:1fr 1fr;gap:6px 18px}
.search-page .search-all li a{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid var(--border);color:var(--text-light);font-size:15px}
.search-page .search-all li a span{font-size:12.5px;color:var(--text-medium)}
@media (max-width:600px){.search-page .search-all ul{grid-template-columns:1fr}}

/* The homepage is the one page still on the inherited centred layout; it is
   redesigned next. Everything else uses the band + left column above. */
body.home .section-title,body.home .section-subtitle{text-align:center}
body.home .section-subtitle{max-width:640px;margin:0 auto 44px}

/* ---------- Back to top ---------- */
.back-to-top{position:fixed;bottom:26px;inset-inline-end:26px;z-index:900;width:48px;height:48px;border-radius:50%;border:none;background:var(--accent);color:var(--on-accent,#fff);font-size:18px;box-shadow:var(--glow);opacity:0;visibility:hidden;transform:translateY(12px);transition:all var(--transition)}
.back-to-top.visible{opacity:1;visibility:visible;transform:none}
.back-to-top:hover{background:var(--accent-hover)}
@media (max-width:600px){.back-to-top{width:40px;height:40px;bottom:16px;inset-inline-end:12px;font-size:16px}}   /* S120 */

/* ================= RESPONSIVE ================= */
@media (max-width:1024px){
  .hero h1{font-size:44px}
  .categories-grid{grid-template-columns:repeat(3,1fr)}
  .popular-grid{grid-template-columns:repeat(2,1fr)}
  .cat-grid{grid-template-columns:repeat(2,1fr)}
  .related-grid{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr);gap:36px}
  .step:not(:last-child)::after{display:none}
  .header-search{max-width:200px}
  .main-nav > a{display:none}
  .footer-grid{grid-template-columns:1fr 1fr;gap:32px}
}
/* Header collapses into hamburger below 900px (nav + search move into the
   mobile menu). 🌐 language and the theme toggle STAY visible. */
@media (max-width:900px){
  .main-nav,.header-search{display:none}
  .logo-text{font-size:1.05rem}
  .hamburger{display:inline-flex}
  .header-inner{gap:8px}
  .header-actions{margin-inline-start:auto;gap:6px}
  .mobile-menu{display:block;position:fixed;top:70px;left:0;right:0;z-index:999;background:var(--bg-secondary);border-bottom:1px solid var(--border);box-shadow:var(--card-shadow);padding:16px 20px 22px;transform:translateY(-115%);transition:transform .35s ease;max-height:calc(100vh - 70px);overflow-y:auto;visibility:hidden}
  .mobile-menu.open{transform:translateY(0);visibility:visible}
  .mobile-menu a,.mobile-menu button.mm-item{display:flex;align-items:center;gap:10px;width:100%;text-align:start;background:none;border:none;padding:13px 8px;color:var(--text-light);font-size:16px;font-weight:500;border-bottom:1px solid var(--border)}
  .mobile-menu .mm-title{display:block;padding:14px 8px 4px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-medium)}
  .mobile-menu .mm-search{position:relative;margin-bottom:10px}
  .mobile-menu .mm-search input{width:100%;padding:12px 14px;border-radius:10px;border:1px solid var(--border);background:rgba(148,163,184,.08);color:var(--text-light);font-size:16px;font-family:inherit}
}
/* Very narrow screens: wordmark hides, hexagon icon remains (footer keeps full logo) */
@media (max-width:560px){
  .site-header .logo-text{display:none}
}
@media (max-width:767px){
  :root{--gutter:18px;--section-pad:30px var(--gutter)}
  .hero{min-height:auto}
  .hero-grid{grid-template-columns:1fr;gap:40px}
  .hero h1{font-size:34px}
  .hero-sub{font-size:18px}
  .hero-ctas .btn{width:100%;white-space:normal}
  .hero-features{grid-template-columns:1fr}
  .categories-grid{grid-template-columns:repeat(2,1fr)}
  .popular-grid,.cat-grid,.related-grid{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr;gap:28px}
  /* S41: the promise chips are nowrap; the longest is wider than a 390px column and
     pushed the whole footer 13px past the viewport (check-layout caught it on every page). */
  .footer-promises li{white-space:normal}
  .footer-bottom{flex-direction:column;align-items:flex-start;text-align:start}
  .footer-bottom .fb-mid,.footer-bottom .fb-right{text-align:start}
  .section-title{font-size:26px}
}