/* ===========================================================
   CrochetCalc design tokens — single source of truth.
   Phase 1 Step 4-6. Values are the effective cascade values from
   the five :root blocks this replaces; nothing renders differently.
   =========================================================== */
:root {
  /* surface */
  --cream: #FAF6F0;
  --paper: #FAF9F6;
  --paper-dark: #E7E2D9;
  --paper-deep: #F2EFE9;
  --surface: #FFFFFF;
  /* text */
  --ink: #20211F;
  --ink-faint: #6B6D68;
  --ink-soft: #4A4C48;
  /* line */
  --field-border: #8D8A83;
  --rule: #DDD9D2;
  --rule-strong: #C4BFB6;
  /* accent */
  --data: #496A76;
  --data-l: #6C8B97;
  --gold: #C9A24A;
  --gold-d: #A0822F;
  --rose: #D9A7A0;
  --rose-d: #B98179;
  --sage: #647161;
  --sage-d: #55614F;
  --sage-l: #95A291;
  --terracotta: #A45740;
  --terracotta-d: #964B34;
  --terracotta-l: #D4826A;
  /* state */
  --error: #A6402C;
  --error-bg: #FBF0ED;
  /* type */
  --font-body: 'DM Sans', system-ui, -apple-system, sans-serif;
  --font-display: 'Fraunces', 'Times New Roman', serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --fs-2xl: clamp(2.25rem, 1.95rem + 1.5vw, 3rem);
  --fs-3xl: clamp(2.875rem, 2.4rem + 2.4vw, 4.25rem);
  --fs-4xl: clamp(3.5rem, 2.8rem + 3.5vw, 5.75rem);
  --fs-base: clamp(1rem, 0.97rem + 0.2vw, 1.0625rem);
  --fs-lg: clamp(1.375rem, 1.28rem + 0.5vw, 1.625rem);
  --fs-md: clamp(1.125rem, 1.07rem + 0.3vw, 1.25rem);
  --fs-sm: clamp(0.875rem, 0.85rem + 0.15vw, 0.9375rem);
  --fs-xl: clamp(1.75rem, 1.55rem + 1vw, 2.25rem);
  --fs-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
  /* space */
  --sp-1: 0.25rem;
  --sp-10: 8rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  /* radius */
  --radius: 10px;
  --radius-full: 9999px;
  --radius-lg: 16px;
  --radius-sm: 6px;
  --radius-xl: 24px;
  /* elevation */
  --shadow: 0 4px 16px -4px rgba(31,27,22,.10), 0 2px 6px rgba(31,27,22,.06);
  --shadow-lg: 0 12px 32px -8px rgba(31,27,22,.16), 0 4px 12px -2px rgba(31,27,22,.08);
  --shadow-sm: 0 2px 8px rgba(31,27,22,.06), 0 1px 2px rgba(31,27,22,.04);
  --shadow-xl: 0 24px 64px -12px rgba(31,27,22,.22);
  --shadow-xs: 0 1px 2px rgba(31,27,22,.04);
  /* motion */
  --dur-1: 150ms;
  --dur-2: 250ms;
  --dur-3: 400ms;
  --dur-4: 600ms;
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  /* layout */
  --container: 1240px;
  --container-narrow: 760px;
  --container-prose: 680px;
  --header-h: 72px;

  /* ---- semantic layer (Phase 1 Step 4) ---- */
  --color-bg: var(--paper);
  --color-surface: var(--surface);
  --color-surface-sunken: var(--paper-deep);
  --color-surface-elevated: var(--surface);
  --color-text: var(--ink);
  --color-text-muted: var(--ink-soft);
  --color-text-subtle: var(--ink-faint);
  --color-border: var(--rule);
  --color-border-strong: var(--rule-strong);
  --color-border-control: var(--field-border);
  --color-accent-primary: var(--terracotta);
  --color-accent-secondary: var(--sage);
  --color-accent-data: var(--data);
  --color-success: var(--sage);
  --color-warning: #C9A24A;
  --color-warning-text: #8A6F33;
  --color-error: var(--error);
  --color-error-bg: var(--error-bg);
  --color-focus: var(--data);
  --focus-ring: 0 0 0 3px rgba(73,106,118,.35);
}

/* =========================================================
   Crochet Calc — Design System v2 (Audit & Polish Pass)
   Editorial craft-magazine aesthetic + Pinterest-ready visuals
   Last revised: 2026-05-12
   ========================================================= */

/* -------- 1. Design Tokens -------- */


/* -------- 2. Reset & Base -------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { font-size: 100%; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
body { font-family: var(--font-body); font-size: var(--fs-base); line-height: 1.6; color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; min-height: 100vh; overflow-x: hidden; }
img, picture, svg, video { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--terracotta); text-decoration: none; transition: color var(--dur-2) var(--ease); }
a:hover { color: var(--terracotta-d); text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 3px; border-radius: 4px; }
.skip-link { position: absolute; top: -100px; left: 0; padding: var(--sp-3) var(--sp-5); background: var(--ink); color: var(--paper); z-index: 1000; }
.skip-link:focus { top: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* -------- 3. Typography -------- */
h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 600; line-height: 1.15; letter-spacing: -0.01em; color: var(--ink); }
h1 { font-size: var(--fs-3xl); font-weight: 700; letter-spacing: -0.025em; }
h2 { font-size: var(--fs-2xl); margin-top: var(--sp-7); margin-bottom: var(--sp-4); letter-spacing: -0.02em; }
h3 { font-size: var(--fs-lg); margin-top: var(--sp-6); margin-bottom: var(--sp-3); }
h4 { font-size: var(--fs-md); margin-top: var(--sp-5); margin-bottom: var(--sp-2); }
p { margin-bottom: var(--sp-4); }
ul, ol { margin-bottom: var(--sp-4); padding-left: var(--sp-5); }
li { margin-bottom: var(--sp-2); }
code { font-family: var(--font-mono); font-size: 0.9em; padding: 0.125em 0.4em; background: var(--paper-deep); border-radius: var(--radius-sm); color: var(--ink); }
pre { font-family: var(--font-mono); font-size: var(--fs-sm); background: var(--ink); color: var(--paper); padding: var(--sp-4); border-radius: var(--radius); overflow-x: auto; line-height: 1.5; }
pre code { background: transparent; padding: 0; color: inherit; }
blockquote { border-left: 3px solid var(--terracotta); padding-left: var(--sp-5); margin: var(--sp-5) 0; font-style: italic; color: var(--ink-soft); font-size: var(--fs-md); }

/* -------- 4. Layout primitives -------- */
.container, .wrap { width: 100%; max-width: var(--container); margin: 0 auto; padding-left: var(--sp-5); padding-right: var(--sp-5); }
.wrap--narrow { max-width: var(--container-narrow); margin: 0 auto; padding-left: var(--sp-5); padding-right: var(--sp-5); }
.wrap--prose { max-width: var(--container-prose); margin: 0 auto; padding-left: var(--sp-5); padding-right: var(--sp-5); }
.section { padding: var(--sp-8) 0; position: relative; }
.section--tight { padding: var(--sp-6) 0; }
.section--wide { padding: var(--sp-9) 0; }

/* -------- 5. Header (unified, professional, mobile-friendly) -------- */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(250,246,240,0.85); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid transparent; transition: border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease); }
.site-header.is-scrolled { border-bottom-color: var(--rule); box-shadow: var(--shadow-sm); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); height: var(--header-h); max-width: var(--container); margin: 0 auto; padding: 0 var(--sp-5); }
.brand { display: inline-flex; align-items: center; gap: var(--sp-2); font-family: var(--font-display); font-weight: 700; font-size: var(--fs-md); color: var(--ink); text-decoration: none; letter-spacing: -0.01em; transition: transform var(--dur-2) var(--ease); }
.brand:hover { color: var(--ink); text-decoration: none; transform: translateY(-1px); }
.brand__mark { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--terracotta) 0%, var(--rose) 100%); border-radius: var(--radius-sm); color: var(--paper); font-size: 1.25rem; box-shadow: var(--shadow-xs); }
.brand__mark svg { width: 24px; height: 24px; }

/* Primary nav */
.nav { display: flex; align-items: center; gap: var(--sp-2); }
.nav__list { display: flex; align-items: center; gap: var(--sp-1); list-style: none; padding: 0; margin: 0; }
.nav__item { position: relative; margin: 0; }
.nav__link { display: inline-flex; align-items: center; gap: var(--sp-1); padding: var(--sp-2) var(--sp-3); font-size: var(--fs-sm); font-weight: 500; color: var(--ink-soft); border-radius: var(--radius-sm); text-decoration: none; transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease); white-space: nowrap; }
.nav__link:hover, .nav__link[aria-current="page"] { color: var(--ink); background: var(--paper-deep); text-decoration: none; }
.nav__link__chev { width: 12px; height: 12px; transition: transform var(--dur-2) var(--ease); }
.nav__item:hover .nav__link__chev, .nav__item:focus-within .nav__link__chev { transform: rotate(180deg); }

/* Dropdown */
.nav__dropdown { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(-8px); min-width: 280px; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: var(--sp-3); opacity: 0; visibility: hidden; transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease), visibility var(--dur-2); z-index: 60; }
.nav__item:hover .nav__dropdown, .nav__item:focus-within .nav__dropdown { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.nav__dropdown__col { display: flex; flex-direction: column; gap: var(--sp-1); }
.nav__dropdown__link { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3); border-radius: var(--radius-sm); font-size: var(--fs-sm); color: var(--ink); text-decoration: none; transition: background var(--dur-2) var(--ease); }
.nav__dropdown__link:hover { background: var(--paper-deep); text-decoration: none; }
.nav__dropdown__icon { width: 32px; height: 32px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--paper-deep); border-radius: var(--radius-sm); font-size: 1rem; }
.nav__dropdown__text { display: flex; flex-direction: column; }
.nav__dropdown__title { font-weight: 600; line-height: 1.2; }
.nav__dropdown__desc { font-size: var(--fs-xs); color: var(--ink-faint); margin-top: 2px; }

.nav__cta { padding: var(--sp-2) var(--sp-4); background: var(--ink); color: var(--paper); font-weight: 600; font-size: var(--fs-sm); border-radius: var(--radius-full); text-decoration: none; transition: background var(--dur-2) var(--ease), transform var(--dur-2) var(--ease); }
.nav__cta:hover { background: var(--terracotta); color: var(--paper); text-decoration: none; transform: translateY(-1px); }

/* Hamburger */
.nav__toggle { display: none; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); background: transparent; border: 1px solid var(--rule); border-radius: var(--radius-sm); color: var(--ink); cursor: pointer; font-size: var(--fs-sm); }
.nav__toggle__bars { width: 18px; height: 14px; position: relative; display: inline-flex; flex-direction: column; justify-content: space-between; }
.nav__toggle__bars span { display: block; height: 2px; background: currentColor; border-radius: 2px; transition: transform var(--dur-2) var(--ease), opacity var(--dur-2) var(--ease); }
.nav__toggle[aria-expanded="true"] .nav__toggle__bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__toggle__bars span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] .nav__toggle__bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Mobile menu */
@media (max-width: 880px) {
  .nav__toggle { display: inline-flex; }
  .nav__list { position: fixed; inset: var(--header-h) 0 0 0; display: flex; flex-direction: column; align-items: stretch; gap: 0; background: var(--paper); padding: var(--sp-5); transform: translateX(100%); transition: transform var(--dur-3) var(--ease); overflow-y: auto; border-top: 1px solid var(--rule); }
  .nav__list.is-open { transform: translateX(0); }
  .nav__item { width: 100%; border-bottom: 1px solid var(--rule); }
  .nav__item:last-child { border-bottom: none; }
  .nav__link { width: 100%; padding: var(--sp-4) var(--sp-3); font-size: var(--fs-md); justify-content: space-between; }
  .nav__dropdown { position: static; transform: none; opacity: 1; visibility: visible; box-shadow: none; border: none; background: var(--paper-deep); min-width: 0; border-radius: 0; margin: 0 calc(-1 * var(--sp-3)); padding: var(--sp-3); max-height: 0; overflow: hidden; transition: max-height var(--dur-3) var(--ease); }
  .nav__item.is-expanded .nav__dropdown { max-height: 600px; }
  .nav__cta { width: 100%; text-align: center; margin-top: var(--sp-3); padding: var(--sp-4); }
}

/* -------- 6. Footer -------- */
.site-footer { background: var(--ink); color: var(--paper); padding: var(--sp-8) 0 var(--sp-6); margin-top: var(--sp-9); position: relative; overflow: hidden; }
.site-footer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--terracotta) 0%, var(--rose) 33%, var(--gold) 66%, var(--sage) 100%); }
.footer__inner { max-width: var(--container); margin: 0 auto; padding: 0 var(--sp-5); }
.footer__top { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: var(--sp-6); padding-bottom: var(--sp-6); border-bottom: 1px solid rgba(250,246,240,0.1); }
@media (max-width: 880px) { .footer__top { grid-template-columns: 1fr 1fr; gap: var(--sp-5); } .footer__brand-col { grid-column: 1 / -1; margin-bottom: var(--sp-4); } }
@media (max-width: 480px) { .footer__top { grid-template-columns: 1fr; } }
.footer__brand-col .brand { color: var(--paper); }
.footer__tagline { color: rgba(250,246,240,0.7); font-size: var(--fs-sm); margin: var(--sp-3) 0 var(--sp-5); max-width: 320px; line-height: 1.6; }
.footer__social { display: flex; gap: var(--sp-3); }
.footer__social a { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: rgba(250,246,240,0.08); color: var(--paper); border-radius: var(--radius-sm); transition: background var(--dur-2) var(--ease), transform var(--dur-2) var(--ease); }
.footer__social a:hover { background: var(--terracotta); transform: translateY(-2px); text-decoration: none; }
.footer__social svg { width: 18px; height: 18px; }
.footer__heading { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.08em; color: var(--paper); margin-bottom: var(--sp-3); }
.footer__list { list-style: none; padding: 0; margin: 0; }
.footer__list li { margin-bottom: var(--sp-2); }
.footer__list a { color: rgba(250,246,240,0.7); font-size: var(--fs-sm); text-decoration: none; transition: color var(--dur-2) var(--ease); }
.footer__list a:hover { color: var(--paper); text-decoration: underline; text-underline-offset: 3px; }
.footer__bottom { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding-top: var(--sp-5); flex-wrap: wrap; font-size: var(--fs-xs); color: rgba(250,246,240,0.5); }
.footer__bottom-links { display: flex; gap: var(--sp-4); flex-wrap: wrap; }
.footer__bottom-links a { color: rgba(250,246,240,0.7); text-decoration: none; }
.footer__bottom-links a:hover { color: var(--paper); }
.footer__newsletter { background: rgba(250,246,240,0.05); border: 1px solid rgba(250,246,240,0.1); border-radius: var(--radius); padding: var(--sp-5); margin-top: var(--sp-5); }
.footer__newsletter h4 { color: var(--paper); margin: 0 0 var(--sp-2); font-size: var(--fs-md); }
.footer__newsletter p { color: rgba(250,246,240,0.7); font-size: var(--fs-sm); margin-bottom: var(--sp-3); }
.footer__newsletter__form { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.footer__newsletter__form input { flex: 1; padding: var(--sp-3); background: var(--paper); border: 1px solid transparent; border-radius: var(--radius-sm); color: var(--ink); font-size: var(--fs-sm); min-width: 0; }
.footer__newsletter__form button { padding: var(--sp-3) var(--sp-4); background: var(--terracotta); color: var(--paper); border: none; border-radius: var(--radius-sm); font-weight: 600; cursor: pointer; transition: background var(--dur-2) var(--ease); white-space: nowrap; }
.footer__newsletter__form button:hover { background: var(--terracotta-d); }

/* -------- 7. Hero -------- */
.hero { position: relative; padding: var(--sp-9) 0 var(--sp-8); overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 0% 0%, rgba(200,85,61,0.06) 0%, transparent 50%), radial-gradient(circle at 100% 50%, rgba(217,167,160,0.08) 0%, transparent 50%), radial-gradient(circle at 50% 100%, rgba(90,111,78,0.05) 0%, transparent 50%); pointer-events: none; }
.hero__grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--sp-7); align-items: center; position: relative; }
@media (max-width: 880px) { .hero__grid { grid-template-columns: 1fr; gap: var(--sp-6); } }
.hero__eyebrow { display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-4); background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-full); font-size: var(--fs-xs); font-weight: 600; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: var(--sp-4); }
.hero__eyebrow__dot { width: 6px; height: 6px; background: var(--sage); border-radius: 50%; box-shadow: 0 0 0 4px rgba(90,111,78,0.2); animation: pulse 2s ease-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
.hero__headline { font-size: var(--fs-4xl); line-height: 1.05; letter-spacing: -0.03em; margin: 0 0 var(--sp-5); font-weight: 700; }
.hero__headline em { font-style: italic; color: var(--terracotta); }
.hero__sub { font-size: var(--fs-md); color: var(--ink-soft); margin-bottom: var(--sp-6); max-width: 540px; line-height: 1.6; }
.hero__cta { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.hero__plate { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); padding: var(--sp-5); background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.hero__plate__label { grid-column: 1 / -1; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-faint); padding-bottom: var(--sp-2); border-bottom: 1px solid var(--rule); }
.hero__plate__big { font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 700; color: var(--ink); display: flex; align-items: baseline; gap: var(--sp-2); }
.hero__plate__big sub { font-size: var(--fs-xs); font-weight: 500; font-family: var(--font-body); color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.08em; }

/* -------- 8. Buttons -------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-5); border-radius: var(--radius-full); font-family: var(--font-body); font-weight: 600; font-size: var(--fs-sm); border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: transform var(--dur-2) var(--ease), background var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease); white-space: nowrap; line-height: 1; }
.btn--primary { background: var(--ink); color: var(--paper); }
.btn--primary:hover { background: var(--terracotta); color: var(--paper); transform: translateY(-2px); box-shadow: var(--shadow); text-decoration: none; }
.btn--accent { background: var(--terracotta); color: var(--paper); }
.btn--accent:hover { background: var(--terracotta-d); color: var(--paper); transform: translateY(-2px); box-shadow: var(--shadow); text-decoration: none; }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--rule); }
.btn--ghost:hover { background: var(--paper-deep); border-color: var(--rule-strong); text-decoration: none; }
.btn--lg { padding: var(--sp-4) var(--sp-6); font-size: var(--fs-base); }
.btn--sm { padding: var(--sp-2) var(--sp-3); font-size: var(--fs-xs); }

/* -------- 9. Cards -------- */
.cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--sp-4); margin: var(--sp-5) 0; }
.card { position: relative; display: flex; flex-direction: column; padding: var(--sp-5); background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); text-decoration: none; color: var(--ink); transition: transform var(--dur-3) var(--ease), box-shadow var(--dur-3) var(--ease), border-color var(--dur-3) var(--ease); overflow: hidden; }
.card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--terracotta); opacity: 0; transition: opacity var(--dur-3) var(--ease); }
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--rule-strong); text-decoration: none; }
.card:hover::before { opacity: 1; }
.card__icon { width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--paper-deep) 0%, var(--paper-dark) 100%); border-radius: var(--radius); font-size: 1.5rem; margin-bottom: var(--sp-3); transition: transform var(--dur-3) var(--ease); }
.card:hover .card__icon { transform: scale(1.1) rotate(-3deg); }
.card__title { font-family: var(--font-display); font-size: var(--fs-md); font-weight: 600; margin: 0 0 var(--sp-2); line-height: 1.3; color: var(--ink); }
.card__desc { font-size: var(--fs-sm); color: var(--ink-soft); line-height: 1.5; margin-bottom: var(--sp-3); flex: 1; }
.card__meta { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); font-size: var(--fs-xs); color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.06em; margin-top: auto; }
.card__meta__arrow { font-size: var(--fs-md); color: var(--terracotta); transition: transform var(--dur-2) var(--ease); }
.card:hover .card__meta__arrow { transform: translateX(4px); }
.card__badge { position: absolute; top: var(--sp-3); right: var(--sp-3); padding: var(--sp-1) var(--sp-2); background: var(--terracotta); color: var(--paper); font-size: 0.65rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; border-radius: var(--radius-sm); }

/* -------- 10. Slider / Carousel -------- */
.slider { position: relative; margin: var(--sp-5) 0; }
.slider__track { display: flex; gap: var(--sp-4); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: var(--sp-5); padding: var(--sp-2) 0 var(--sp-4); -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: var(--rule-strong) transparent; }
.slider__track::-webkit-scrollbar { height: 8px; }
.slider__track::-webkit-scrollbar-track { background: transparent; }
.slider__track::-webkit-scrollbar-thumb { background: var(--rule-strong); border-radius: 4px; }
.slider__slide { flex: 0 0 auto; width: min(85%, 320px); scroll-snap-align: start; }
.slider__controls { position: absolute; top: -56px; right: 0; display: flex; gap: var(--sp-2); }
.slider__btn { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; background: var(--surface); border: 1px solid var(--rule); border-radius: 50%; color: var(--ink); cursor: pointer; transition: background var(--dur-2) var(--ease), transform var(--dur-2) var(--ease); }
.slider__btn:hover { background: var(--paper-deep); transform: scale(1.05); }
.slider__btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }

/* -------- 11. Article layout -------- */
.article { padding: var(--sp-7) 0 var(--sp-8); }
.article__header { text-align: left; max-width: var(--container-narrow); margin: 0 auto var(--sp-6); padding: 0 var(--sp-5); }
.article__title { font-size: var(--fs-3xl); margin: var(--sp-3) 0 var(--sp-4); letter-spacing: -0.025em; }
.article__lede { font-size: var(--fs-md); color: var(--ink-soft); line-height: 1.6; max-width: 640px; }
.article__body { max-width: var(--container-prose); margin: 0 auto; padding: 0 var(--sp-5); }
.article__body img, .article__body figure { margin: var(--sp-5) auto; border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.eyebrow { font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--terracotta); margin-bottom: var(--sp-2); }
.breadcrumb { font-size: var(--fs-xs); color: var(--ink-faint); margin-bottom: var(--sp-4); }
.breadcrumb a { color: var(--ink-soft); text-decoration: none; }
.breadcrumb a:hover { color: var(--terracotta); text-decoration: underline; }
.breadcrumb span[aria-hidden="true"] { margin: 0 var(--sp-2); color: var(--rule-strong); }

/* -------- 12. Callouts -------- */
.callout { background: var(--surface); border: 1px solid var(--rule); border-left: 4px solid var(--terracotta); border-radius: var(--radius); padding: var(--sp-4) var(--sp-5); margin: var(--sp-5) 0; box-shadow: var(--shadow-xs); }
.callout--warn { border-left-color: var(--gold); background: rgba(201,162,74,0.05); }
.callout--info { border-left-color: var(--sage); }
.callout--success { border-left-color: var(--sage); background: rgba(90,111,78,0.05); }
.callout__label { display: block; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-sm); margin-bottom: var(--sp-1); }
.callout p:last-child { margin-bottom: 0; }

/* -------- 13. Tables -------- */
.data-table { width: 100%; border-collapse: collapse; margin: var(--sp-5) 0; font-size: var(--fs-sm); background: var(--surface); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-xs); border: 1px solid var(--rule); }
.data-table th, .data-table td { padding: var(--sp-3) var(--sp-4); text-align: left; border-bottom: 1px solid var(--rule); }
.data-table th { background: var(--paper-deep); font-weight: 600; color: var(--ink); font-family: var(--font-display); }
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:nth-child(even) td { background: rgba(232, 220, 200, 0.2); }
.data-table tbody tr { transition: background var(--dur-2) var(--ease); }
.data-table tbody tr:hover td { background: var(--paper-deep); }
.data-table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* -------- 14. Forms -------- */
.calc { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: var(--sp-6); margin: var(--sp-5) 0; box-shadow: var(--shadow); }
.calc__title { font-family: var(--font-display); font-size: var(--fs-xl); margin: 0 0 var(--sp-4); }
.form__section { border: none; padding: 0; margin: 0 0 var(--sp-5); }
.form__legend { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-md); margin-bottom: var(--sp-3); padding: 0; color: var(--ink); }
.form__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sp-4); }
.form__field { display: flex; flex-direction: column; gap: var(--sp-2); }
.form__label { font-size: var(--fs-sm); font-weight: 500; color: var(--ink); }
.form__field input, .form__field select, .form__field textarea { padding: var(--sp-3); background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius-sm); font-size: var(--fs-base); color: var(--ink); transition: border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease); min-width: 0; }
.form__field input:focus, .form__field select:focus, .form__field textarea:focus { outline: none; border-color: var(--terracotta); box-shadow: 0 0 0 3px rgba(200, 85, 61, 0.15); }
.form__hint { font-size: var(--fs-xs); color: var(--ink-faint); }
.result-block { margin-top: var(--sp-5); padding: var(--sp-5); background: var(--paper-deep); border-radius: var(--radius); border: 1px solid var(--rule); }
.result-block h3 { margin-top: 0; }
.result-row { display: flex; justify-content: space-between; align-items: baseline; padding: var(--sp-2) 0; border-bottom: 1px solid var(--rule); flex-wrap: wrap; gap: var(--sp-2); }
.result-row:last-child { border-bottom: none; }
.result-row__label { font-size: var(--fs-sm); color: var(--ink-soft); }
.result-row__value { font-family: var(--font-mono); font-weight: 600; color: var(--ink); }

/* -------- 15. FAQ -------- */
.faq { border: 1px solid var(--rule); border-radius: var(--radius); margin-bottom: var(--sp-3); background: var(--surface); transition: border-color var(--dur-2) var(--ease); overflow: hidden; }
.faq:hover { border-color: var(--rule-strong); }
.faq[open] { border-color: var(--terracotta); }
.faq summary { padding: var(--sp-4) var(--sp-5); cursor: pointer; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-md); list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); transition: background var(--dur-2) var(--ease); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: var(--fs-xl); color: var(--terracotta); transition: transform var(--dur-2) var(--ease); }
.faq[open] summary::after { content: "−"; }
.faq summary:hover { background: var(--paper-deep); }
.faq__body { padding: 0 var(--sp-5) var(--sp-4); color: var(--ink-soft); }
.faq__body p:last-child { margin-bottom: 0; }

/* -------- 16. Animations / reveal -------- */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity var(--dur-4) var(--ease-out), transform var(--dur-4) var(--ease-out); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal[data-delay="1"] { transition-delay: 80ms; }
.reveal[data-delay="2"] { transition-delay: 160ms; }
.reveal[data-delay="3"] { transition-delay: 240ms; }
.reveal[data-delay="4"] { transition-delay: 320ms; }

/* Stat bar */
.stat-bar { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--sp-5); padding: var(--sp-6); background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-lg); margin: var(--sp-5) 0; }
.stat-bar__item { text-align: center; }
.stat-bar__big { font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 700; color: var(--ink); display: block; }
.stat-bar__label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-faint); margin-top: var(--sp-1); }

/* Misc helpers */
.text-center { text-align: center; }
.text-mono { font-family: var(--font-mono); }
.text-faint { color: var(--ink-faint); }
.last-updated { font-size: var(--fs-xs); color: var(--ink-faint); display: inline-flex; align-items: center; gap: var(--sp-1); padding: var(--sp-2) var(--sp-3); background: var(--paper-deep); border-radius: var(--radius-full); }
.divider { height: 1px; background: var(--rule); margin: var(--sp-7) 0; border: none; }
.tag-pill { display: inline-flex; align-items: center; padding: var(--sp-1) var(--sp-3); background: var(--paper-deep); border-radius: var(--radius-full); font-size: var(--fs-xs); font-weight: 500; color: var(--ink-soft); }
.tag-pill--accent { background: var(--terracotta); color: var(--paper); }

/* Back to top */
.back-to-top { position: fixed; bottom: var(--sp-5); right: var(--sp-5); width: 44px; height: 44px; background: var(--ink); color: var(--paper); border: none; border-radius: 50%; cursor: pointer; opacity: 0; visibility: hidden; transition: opacity var(--dur-3) var(--ease), visibility var(--dur-3), background var(--dur-2) var(--ease), transform var(--dur-2) var(--ease); z-index: 40; display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-md); box-shadow: var(--shadow); }
.back-to-top.is-visible { opacity: 1; visibility: visible; }
.back-to-top:hover { background: var(--terracotta); transform: translateY(-2px); }

/* Print */
@media print {
  .site-header, .site-footer, .nav__toggle, .skip-link, .slider__controls, .hero__cta, .back-to-top { display: none !important; }
  body { background: white; color: black; }
  a { color: black; text-decoration: underline; }
  .card, .calc, .data-table { box-shadow: none; border: 1px solid #ccc; }
}

/* Lazy image */
img.lazy { opacity: 0; transition: opacity var(--dur-3) var(--ease); }
img.lazy.is-loaded { opacity: 1; }

/* Legacy class compatibility (for pages with old markup) */
.site-header > .container { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); }
.nav__menu { display: flex; align-items: center; gap: var(--sp-1); list-style: none; padding: 0; margin: 0; }
@media (max-width: 880px) {
  .nav__menu { position: fixed; inset: var(--header-h) 0 0 0; flex-direction: column; align-items: stretch; background: var(--paper); padding: var(--sp-5); transform: translateX(100%); transition: transform var(--dur-3) var(--ease); overflow-y: auto; border-top: 1px solid var(--rule); z-index: 50; }
  .nav__menu.is-open { transform: translateX(0); }
}

/* Author card */
.author-card { display: flex; gap: var(--sp-5); align-items: flex-start; padding: var(--sp-5); background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); margin: var(--sp-5) 0; box-shadow: var(--shadow-sm); flex-wrap: wrap; }
.author-card__photo { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 3px solid var(--paper-deep); box-shadow: var(--shadow-sm); }
.author-card__name { font-family: var(--font-display); font-size: var(--fs-lg); margin: 0 0 var(--sp-1); }
.author-card__role { font-size: var(--fs-sm); color: var(--terracotta); font-weight: 600; margin: 0 0 var(--sp-3); }
.author-card__bio { font-size: var(--fs-sm); color: var(--ink-soft); line-height: 1.6; margin: 0 0 var(--sp-3); }
.author-card__links a { display: inline-flex; align-items: center; font-size: var(--fs-sm); color: var(--ink); padding: var(--sp-2) var(--sp-3); background: var(--paper-deep); border-radius: var(--radius-sm); text-decoration: none; transition: background var(--dur-2) var(--ease); }
.author-card__links a:hover { background: var(--rule); text-decoration: none; }
@media (max-width: 600px) {
  .author-card { gap: var(--sp-3); }
  .author-card__photo { width: 80px; height: 80px; }
}

/* ========================================================= */
/*  CALCULATOR STYLES — fix unstyled form rendering           */
/*  Adds support for the actual classes the generator outputs */
/* ========================================================= */

/* The form itself */
.calc {
  background: linear-gradient(180deg, var(--surface) 0%, var(--paper) 100%);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  margin: var(--sp-5) 0 var(--sp-7);
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
}
.calc::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 6px;
  background: linear-gradient(90deg, var(--terracotta) 0%, var(--rose) 50%, var(--gold) 100%);
}

/* Calc header (icon + title) */
.calc__head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding-bottom: var(--sp-4);
  margin-bottom: var(--sp-5);
  border-bottom: 1px solid var(--rule);
}
.calc__head > span:first-child {
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--terracotta) 0%, var(--rose) 100%);
  border-radius: var(--radius);
  font-size: 1.75rem !important;
  box-shadow: var(--shadow-sm);
}
.calc__title { margin: 0 !important; font-size: var(--fs-xl); font-weight: 700; }

/* Fieldsets — override the inline styles in generated HTML */
.calc fieldset {
  border: none !important;
  padding: 0 !important;
  margin: 0 0 var(--sp-5) !important;
}
.calc legend {
  font-family: var(--font-display) !important;
  font-size: var(--fs-md) !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--ink) !important;
  margin-bottom: var(--sp-4) !important;
  padding: 0 !important;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.calc legend::before {
  content: "";
  width: 4px;
  height: 1.2em;
  background: var(--terracotta);
  border-radius: 2px;
  display: inline-block;
}

/* The grid that holds .field elements */
.calc__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--sp-4);
  margin-bottom: var(--sp-3);
}

/* Field wrapper — this is the critical fix */
.field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.field label {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.4;
}
.field input,
.field select,
.field textarea {
  display: block;
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  background: var(--paper);
  border: 2px solid var(--rule);
  border-radius: var(--radius);
  font-size: var(--fs-base);
  font-family: var(--font-body);
  color: var(--ink);
  transition: border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
  min-width: 0;
}
.field input:hover,
.field select:hover,
.field textarea:hover {
  border-color: var(--rule-strong);
  background: var(--surface);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--terracotta);
  background: var(--surface);
  box-shadow: 0 0 0 4px rgba(200, 85, 61, 0.12);
}
.field input::placeholder { color: var(--ink-faint); opacity: 1; }
.field select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 5l3 3 3-3' fill='none' stroke='%231F1B16' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--sp-3) center;
  padding-right: calc(var(--sp-3) * 2 + 12px);
}
.field__hint {
  font-size: var(--fs-xs);
  color: var(--ink-faint);
  line-height: 1.5;
  margin-top: var(--sp-1);
}

/* Action buttons row */
.calc__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--rule);
}
.calc__actions .btn--primary {
  background: linear-gradient(135deg, var(--terracotta) 0%, var(--terracotta-d) 100%);
  color: var(--paper);
  padding: var(--sp-4) var(--sp-6);
  font-size: var(--fs-base);
  box-shadow: 0 4px 14px -2px rgba(200, 85, 61, 0.4);
}
.calc__actions .btn--primary:hover {
  background: linear-gradient(135deg, var(--terracotta-d) 0%, #8B2F1E 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px -2px rgba(200, 85, 61, 0.5);
}
.btn--secondary {
  background: var(--paper-deep);
  color: var(--ink);
  border: 1px solid var(--rule);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: all var(--dur-2) var(--ease);
}
.btn--secondary:hover {
  background: var(--rule);
  transform: translateY(-1px);
}

/* RESULT DISPLAY — this is where it really pops */
.calc__result {
  margin-top: var(--sp-6);
  padding: var(--sp-6);
  background: linear-gradient(135deg, var(--ink) 0%, #2D2620 100%);
  color: var(--paper);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
}
.calc__result::before {
  content: "";
  position: absolute;
  top: -50%;
  right: -20%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(200, 85, 61, 0.15) 0%, transparent 70%);
  pointer-events: none;
}
.calc__result[hidden] { display: none; }
.calc__result__head {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--rose);
  font-weight: 600;
  margin-bottom: var(--sp-2);
  position: relative;
}
.calc__result__big {
  font-family: var(--font-display);
  font-size: var(--fs-4xl);
  font-weight: 700;
  line-height: 1;
  margin-bottom: var(--sp-5);
  color: var(--paper);
  letter-spacing: -0.03em;
  position: relative;
}
.calc__result__big span { background: linear-gradient(135deg, var(--gold) 0%, var(--rose) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

.calc__result__breakdown {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--sp-4);
  margin-top: var(--sp-5);
  padding-top: var(--sp-5);
  border-top: 1px solid rgba(250, 246, 240, 0.15);
  position: relative;
}
.calc__result__breakdown > div {
  background: rgba(250, 246, 240, 0.06);
  padding: var(--sp-4);
  border-radius: var(--radius);
  border: 1px solid rgba(250, 246, 240, 0.1);
}
.stat__label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(250, 246, 240, 0.7);
  margin-bottom: var(--sp-1);
  font-weight: 500;
}
.stat__value {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--paper);
  line-height: 1.2;
}

/* Container variants used by generator */
.container--narrow { max-width: var(--container-narrow); margin: 0 auto; padding-left: var(--sp-5); padding-right: var(--sp-5); }

/* ========================================================= */
/*  ENHANCED VISUAL POLISH — homepage and beyond              */
/* ========================================================= */

/* Color-coded category cards on homepage */
.card[href*="yardage"] .card__icon, .card[href*="yarn-weight"] .card__icon { background: linear-gradient(135deg, #fce7e0 0%, #f4cab9 100%); }
.card[href*="gauge"] .card__icon, .card[href*="stitch"] .card__icon { background: linear-gradient(135deg, #e0eddb 0%, #c5dfba 100%); }
.card[href*="hat"] .card__icon, .card[href*="circle"] .card__icon { background: linear-gradient(135deg, #fde8e1 0%, #f9c8b9 100%); }
.card[href*="hook"] .card__icon, .card[href*="converter"] .card__icon { background: linear-gradient(135deg, #f5e6d0 0%, #ebd5a8 100%); }
.card[href*="blanket"] .card__icon, .card[href*="c2c"] .card__icon { background: linear-gradient(135deg, #e8e0f0 0%, #d4c5e8 100%); }
.card[href*="pricing"] .card__icon, .card[href*="time"] .card__icon { background: linear-gradient(135deg, #ffe9bf 0%, #ffd58a 100%); }
.card[href*="granny"] .card__icon { background: linear-gradient(135deg, #f0e3d0 0%, #e2c9a3 100%); }
.card[href*="increase-decrease"] .card__icon { background: linear-gradient(135deg, #d8e8e2 0%, #b3d2c5 100%); }
.card[href*="stripe"] .card__icon { background: linear-gradient(135deg, #fdd8d8 0%, #fbb3b3 25%, #f4cab9 50%, #ebd5a8 75%, #c5dfba 100%); }
.card[href*="stitch-counter"] .card__icon { background: linear-gradient(135deg, #f0d6cb 0%, #e8b3a0 100%); }

/* Make calculator cards on grid more visually distinct */
.cards-grid .card {
  background: linear-gradient(180deg, var(--surface) 0%, rgba(255, 255, 255, 0.6) 100%);
}

/* Hero: add decorative SVG yarn ball backdrop */
.hero {
  background:
    radial-gradient(ellipse 800px 600px at 90% 30%, rgba(217, 167, 160, 0.12) 0%, transparent 50%),
    radial-gradient(ellipse 600px 400px at 10% 80%, rgba(90, 111, 78, 0.08) 0%, transparent 50%);
}
.hero__plate {
  background: linear-gradient(165deg, var(--surface) 0%, var(--paper-deep) 100%);
  border: 1px solid var(--rule-strong);
  box-shadow: var(--shadow-lg);
  position: relative;
}
.hero__plate__big {
  position: relative;
  font-size: calc(var(--fs-3xl) * 0.95);
  background: linear-gradient(135deg, var(--ink) 0%, var(--terracotta) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero__plate__big sub {
  -webkit-text-fill-color: var(--ink-faint);
  background: none;
}

/* Hero CTA buttons — make primary much more vibrant */
.hero .btn--primary {
  background: linear-gradient(135deg, var(--ink) 0%, #2D2620 100%);
  color: var(--paper);
  box-shadow: 0 4px 14px -2px rgba(31, 27, 22, 0.25);
}
.hero .btn--primary:hover {
  background: linear-gradient(135deg, var(--terracotta) 0%, var(--terracotta-d) 100%);
  box-shadow: 0 6px 24px -4px rgba(200, 85, 61, 0.5);
  transform: translateY(-3px);
}

/* Section dividers — subtle decorative SVG between sections */
.section { position: relative; }

/* Stat-bar enhancement */
.stat-bar {
  background: linear-gradient(135deg, var(--surface) 0%, var(--paper-deep) 100%);
  border: 1px solid var(--rule);
  box-shadow: var(--shadow);
}
.stat-bar__big {
  background: linear-gradient(135deg, var(--terracotta) 0%, var(--gold) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: var(--fs-3xl);
}

/* "How it works" cards — already have colored gradient icons via inline styles, enhance them */
.section#how .card { background: linear-gradient(180deg, var(--surface) 0%, var(--paper) 100%); }

/* Articles slider cards */
.slider__slide.card { background: var(--surface); }
.slider__slide.card:hover { transform: translateY(-6px) scale(1.02); }

/* FAQ — add subtle accent on hover */
.faq summary { transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease); }
.faq[open] summary { background: linear-gradient(90deg, rgba(200, 85, 61, 0.06) 0%, transparent 100%); }

/* CTA strip enhancement */
.section--tight[style*="--ink"] {
  background: linear-gradient(135deg, var(--ink) 0%, #3A2F25 50%, #2D2620 100%) !important;
  position: relative;
  overflow: hidden;
}

/* Generic input/button polish for any pages with raw inputs */
input[type="text"], input[type="number"], input[type="email"], input[type="search"],
input[type="url"], input[type="tel"], select, textarea {
  font-family: var(--font-body);
  color: var(--ink);
}

/* Print-friendly: hide buttons/dialog noise */
@media print {
  .calc__actions, .footer__newsletter, .back-to-top, .nav, .nav__toggle, .hero__cta { display: none !important; }
  .calc__result { background: white !important; color: black !important; border: 2px solid #000 !important; }
  .calc__result__big { color: black !important; }
  .calc__result__big span { -webkit-text-fill-color: black !important; }
  .stat__label, .stat__value { color: black !important; }
}

/* Mobile polish for calculators */
@media (max-width: 600px) {
  .calc { padding: var(--sp-5) var(--sp-4); }
  .calc__head { gap: var(--sp-2); }
  .calc__head > span:first-child { width: 44px; height: 44px; font-size: 1.4rem !important; }
  .calc__result { padding: var(--sp-5) var(--sp-4); }
  .calc__result__big { font-size: var(--fs-3xl); }
  .calc__actions { flex-direction: column; }
  .calc__actions .btn { width: 100%; }
}

/* ========================================================= */
/*  SPACING FIX — Article header & section-title styles      */
/*  (Used by about, contact, editorial, privacy, etc.)       */
/* ========================================================= */
.article-head {
  padding: var(--sp-8) 0 var(--sp-6);
  background: linear-gradient(180deg, var(--paper-deep) 0%, var(--paper) 100%);
  border-bottom: 1px solid var(--rule);
  position: relative;
}
.article-head .container { max-width: var(--container-narrow); }
.article-head h1 {
  font-size: var(--fs-3xl);
  letter-spacing: -0.025em;
  margin: 0 0 var(--sp-4);
  line-height: 1.1;
}
.article-head__lede,
.article-head .lede {
  font-size: var(--fs-md);
  color: var(--ink-soft);
  max-width: 640px;
  line-height: 1.6;
  margin: 0;
}
.section-title {
  font-size: var(--fs-xl);
  margin: 0 0 var(--sp-5);
  padding-bottom: var(--sp-3);
  border-bottom: 2px solid var(--terracotta);
  display: inline-block;
  letter-spacing: -0.02em;
}

/* Generic content prose pages (about, policy, etc.) */
.section .container > h2,
.section .wrap > h2,
.section .wrap--narrow > h2 { margin-top: var(--sp-6); }
.section p { max-width: 70ch; }

/* ========================================================= */
/*  CALCULATOR PAGE — Premium hero header                    */
/* ========================================================= */

/* The calculator title section ABOVE the form */
.calc-page-hero {
  padding: var(--sp-7) 0 var(--sp-5);
  background: linear-gradient(135deg, var(--paper-deep) 0%, var(--paper) 100%);
  border-bottom: 1px solid var(--rule);
  position: relative;
  overflow: hidden;
}
.calc-page-hero::before {
  content: "";
  position: absolute;
  top: -50%;
  right: -10%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(200,85,61,0.06) 0%, transparent 70%);
  pointer-events: none;
}

/* When article-like calculator pages with intro */
.calc-intro { padding: var(--sp-6) 0; max-width: var(--container-narrow); margin: 0 auto; }

/* ========================================================= */
/*  PREMIUM CALCULATOR FORM POLISH (additional layer)        */
/* ========================================================= */

/* Numbered section indicator before each fieldset */
.calc fieldset {
  position: relative;
  padding: var(--sp-5) 0 !important;
  margin: 0 !important;
  border-bottom: 1px solid var(--rule) !important;
}
.calc fieldset:last-of-type { border-bottom: none !important; }

/* Make legend more visually distinct */
.calc legend {
  font-size: var(--fs-lg) !important;
  margin-bottom: var(--sp-4) !important;
}

/* Premium input field upgrade */
.field input,
.field select {
  background: var(--surface);
  border-width: 1.5px;
  font-size: var(--fs-md);
  padding: 14px 16px;
}
.field input:hover, .field select:hover { box-shadow: var(--shadow-sm); }
.field input:focus, .field select:focus {
  border-color: var(--terracotta);
  box-shadow: 0 0 0 4px rgba(200, 85, 61, 0.12), var(--shadow-sm);
}

/* Premium Calculate button — really makes it pop */
.calc__actions .btn--primary {
  font-size: var(--fs-md);
  padding: var(--sp-4) var(--sp-7);
  letter-spacing: 0.01em;
  position: relative;
  overflow: hidden;
}
.calc__actions .btn--primary::after {
  content: "";
  position: absolute;
  top: 0; left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.2) 50%, transparent 100%);
  transition: left 0.6s var(--ease);
}
.calc__actions .btn--primary:hover::after { left: 100%; }

/* Better result block */
.calc__result {
  margin-top: var(--sp-6);
  padding: var(--sp-7);
  background: linear-gradient(135deg, #1F1B16 0%, #2D2620 50%, #3A2F25 100%);
}
.calc__result__head::before {
  content: "✓ ";
  color: var(--sage-l);
  font-weight: 700;
}
.calc__result__big {
  font-size: clamp(2.5rem, 5vw, 4rem);
  margin: var(--sp-2) 0 var(--sp-4);
}

/* ========================================================= */
/*  HOMEPAGE VISUAL RICHNESS — decorative additions          */
/* ========================================================= */

/* Subtle section divider patterns */
.section + .section,
.section--tight + .section {
  position: relative;
}

/* "How it works" cards (numbered) — make the number pop */
.section#how .card .card__icon {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  color: var(--paper);
  box-shadow: 0 8px 20px -4px rgba(0,0,0,0.2);
}

/* Hero plate sub-label */
.hero__plate__big sub {
  font-size: 0.6em !important;
  font-weight: 500;
  font-family: var(--font-body);
  color: var(--ink-faint);
  background: none;
  -webkit-text-fill-color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-left: var(--sp-1);
}

/* CTA dark section enhancement */
section[style*="--ink"][style*="2D2620"] { position: relative; }
section[style*="--ink"][style*="2D2620"]::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--terracotta) 0%, var(--rose) 33%, var(--gold) 66%, var(--sage) 100%);
}

/* ========================================================= */
/*  ARTICLE-LIKE PAGE SPACING (about, contact, policies)     */
/* ========================================================= */
main { min-height: 60vh; }
main > section:first-child { padding-top: var(--sp-7); }
main > section:last-of-type { padding-bottom: var(--sp-7); }

/* Tighten spacing on prose pages */
.section .container > p,
.section .wrap > p,
.section .wrap--narrow > p { margin-bottom: var(--sp-4); }
.section .container > h2 + p,
.section .wrap > h2 + p { margin-top: var(--sp-2); }

/* ========================================================= */
/*  DROPDOWN MOBILE FIX — Make dropdown items more visible  */
/* ========================================================= */
@media (max-width: 880px) {
  .nav__dropdown__link { font-size: var(--fs-base); padding: var(--sp-4) var(--sp-3); }
}

/* ========================================================= */
/*  Decorative SVG section dividers                           */
/* ========================================================= */
.section-divider {
  display: block;
  width: 100%;
  height: 24px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='24' viewBox='0 0 40 24' fill='none' stroke='%23E5DBC8' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M0 12 Q10 4 20 12 T40 12'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: center;
  margin: var(--sp-6) 0;
  opacity: 0.6;
}

/* ========================================================= */
/*  HOVER POLISH on calculator cards                          */
/* ========================================================= */
.card { will-change: transform; }
.card:hover { transform: translateY(-6px); }
.card:active { transform: translateY(-2px); }

/* ========================================================= */
/*  Ensure consistent vertical rhythm                         */
/* ========================================================= */
.article__body > * + * { margin-top: var(--sp-4); }
.article__body > h2 { margin-top: var(--sp-7); }
.article__body > h3 { margin-top: var(--sp-6); }

/* ========================================================= */
/*  HERO ILLUSTRATION                                          */
/* ========================================================= */
.hero__visual {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-5);
}
.hero__illustration {
  width: 100%;
  max-width: 340px;
  position: relative;
  filter: drop-shadow(0 20px 40px rgba(31, 27, 22, 0.15));
  animation: floatGently 6s ease-in-out infinite;
}
@keyframes floatGently {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}
.hero__illustration svg { width: 100%; height: auto; }
@media (prefers-reduced-motion: reduce) {
  .hero__illustration { animation: none; }
}
@media (max-width: 880px) {
  .hero__illustration { max-width: 260px; }
}
@media (max-width: 480px) {
  .hero__illustration { max-width: 180px; }
}

/* ========================================================= */
/*  PREMIUM CARD HOVER STATES                                  */
/* ========================================================= */
.cards-grid .card {
  background: linear-gradient(180deg, var(--surface) 0%, rgba(255,255,255,0.9) 100%);
  transition: transform var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease-out), border-color var(--dur-3) var(--ease-out);
}
.cards-grid .card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px -12px rgba(31, 27, 22, 0.18), 0 4px 12px -2px rgba(31, 27, 22, 0.08);
}

/* ========================================================= */
/*  STRONG FORM FIELD LAYOUT — final override                  */
/* ========================================================= */
.calc .field {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  margin: 0 !important;
}
.calc .field label {
  display: block !important;
  font-size: var(--fs-sm) !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
  margin: 0 !important;
}
.calc .field input,
.calc .field select,
.calc .field textarea {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 12px 14px !important;
  font-size: var(--fs-base) !important;
  border: 1.5px solid var(--rule) !important;
  border-radius: 10px !important;
  background: var(--surface) !important;
  color: var(--ink) !important;
}
.calc .field input:focus,
.calc .field select:focus {
  border-color: var(--terracotta) !important;
  outline: none !important;
  box-shadow: 0 0 0 4px rgba(200,85,61,0.12) !important;
}
.calc .field__hint,
.calc .field span.field__hint {
  display: block !important;
  font-size: 0.8125rem !important;
  color: var(--ink-faint) !important;
  line-height: 1.5 !important;
  margin-top: 4px !important;
}

/* Grid layout for fields */
.calc .calc__grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
  gap: 20px !important;
  margin: 0 !important;
}

/* Fieldset full reset */
.calc fieldset {
  all: unset;
  display: block !important;
  padding: 24px 0 !important;
  margin: 0 !important;
  border-bottom: 1px solid var(--rule) !important;
}
.calc fieldset:first-of-type { padding-top: 8px !important; }
.calc fieldset:last-of-type { border-bottom: none !important; padding-bottom: 8px !important; }

.calc legend {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-family: var(--font-display) !important;
  font-size: var(--fs-lg) !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
  text-transform: none !important;
  letter-spacing: -0.01em !important;
  margin: 0 0 16px 0 !important;
  padding: 0 !important;
  float: none !important;
}
.calc legend::before {
  content: "" !important;
  display: inline-block !important;
  width: 5px !important;
  height: 1.1em !important;
  background: var(--terracotta) !important;
  border-radius: 3px !important;
}

/* ========================================================= */
/*  CALCULATOR FORM WRAPPER POLISH                             */
/* ========================================================= */
.calc {
  background: var(--surface) !important;
  padding: 32px !important;
  border-radius: 20px !important;
  border: 1px solid var(--rule) !important;
  box-shadow: 0 12px 40px -16px rgba(31,27,22,0.15), 0 4px 12px -4px rgba(31,27,22,0.06) !important;
  position: relative !important;
  overflow: hidden !important;
}
.calc::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 5px !important;
  background: linear-gradient(90deg, var(--terracotta) 0%, var(--rose) 50%, var(--gold) 100%) !important;
}
.calc__head {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  margin: 0 0 8px 0 !important;
  padding: 0 0 24px 0 !important;
  border-bottom: 1px solid var(--rule) !important;
}
.calc__head > span:first-child {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 56px !important;
  height: 56px !important;
  background: linear-gradient(135deg, var(--terracotta) 0%, var(--rose) 100%) !important;
  border-radius: 14px !important;
  font-size: 1.75rem !important;
  flex-shrink: 0 !important;
  box-shadow: 0 6px 16px -4px rgba(200,85,61,0.4) !important;
}
.calc__title {
  margin: 0 !important;
  font-size: var(--fs-xl) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
}

/* Buttons row */
.calc__actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  padding: 20px 0 0 !important;
  margin: 0 !important;
  border-top: none !important;
}
.calc__actions .btn--primary {
  background: linear-gradient(135deg, var(--ink) 0%, #2D2620 100%) !important;
  color: var(--paper) !important;
  padding: 16px 28px !important;
  font-size: var(--fs-md) !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
  border: none !important;
  cursor: pointer !important;
  box-shadow: 0 8px 20px -4px rgba(31,27,22,0.3) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease !important;
}
.calc__actions .btn--primary:hover {
  background: linear-gradient(135deg, var(--terracotta) 0%, var(--terracotta-d) 100%) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 28px -6px rgba(200,85,61,0.5) !important;
}
.calc__actions .btn--secondary,
.calc__actions button[type="reset"],
.calc__actions button[data-print],
.calc__actions button[data-copy-target] {
  background: var(--paper-deep) !important;
  color: var(--ink) !important;
  padding: 14px 22px !important;
  border-radius: 999px !important;
  border: 1px solid var(--rule) !important;
  font-weight: 600 !important;
  font-size: var(--fs-sm) !important;
  cursor: pointer !important;
  transition: background 0.2s ease, transform 0.2s ease !important;
}
.calc__actions button:hover { background: var(--rule) !important; transform: translateY(-1px) !important; }

/* Result block */
.calc__result {
  margin: 24px 0 0 0 !important;
  padding: 32px !important;
  background: linear-gradient(135deg, #1F1B16 0%, #2D2620 60%, #3A2F25 100%) !important;
  color: var(--paper) !important;
  border-radius: 20px !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: 0 16px 40px -12px rgba(31,27,22,0.4) !important;
}
.calc__result[hidden] { display: none !important; }
.calc__result::before {
  content: "" !important;
  position: absolute !important;
  top: -30% !important;
  right: -10% !important;
  width: 400px !important;
  height: 400px !important;
  background: radial-gradient(circle, rgba(200,85,61,0.15) 0%, transparent 60%) !important;
  pointer-events: none !important;
}
.calc__result__head {
  position: relative !important;
  font-size: var(--fs-sm) !important;
  font-weight: 600 !important;
  color: var(--rose) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  margin: 0 0 12px 0 !important;
}
.calc__result__head::before { content: "✓ " !important; }
.calc__result__big {
  position: relative !important;
  font-family: var(--font-display) !important;
  font-size: clamp(2.5rem, 5vw, 4rem) !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: -0.03em !important;
  margin: 0 0 32px 0 !important;
  color: var(--paper) !important;
}
.calc__result__big span {
  background: linear-gradient(135deg, var(--gold) 0%, var(--rose) 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
.calc__result__breakdown {
  position: relative !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
  gap: 16px !important;
  padding-top: 24px !important;
  border-top: 1px solid rgba(250,246,240,0.15) !important;
  margin: 0 !important;
}
.calc__result__breakdown > div {
  background: rgba(250,246,240,0.06) !important;
  border: 1px solid rgba(250,246,240,0.1) !important;
  border-radius: 12px !important;
  padding: 16px !important;
}
.stat__label {
  display: block !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  color: rgba(250,246,240,0.7) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  margin-bottom: 6px !important;
}
.stat__value {
  display: block !important;
  font-family: var(--font-display) !important;
  font-size: var(--fs-lg) !important;
  font-weight: 700 !important;
  color: var(--paper) !important;
  line-height: 1.2 !important;
}

/* Mobile calc tweaks */
@media (max-width: 600px) {
  .calc { padding: 20px !important; }
  .calc__head > span:first-child { width: 44px !important; height: 44px !important; font-size: 1.4rem !important; }
  .calc__result { padding: 24px 20px !important; }
  .calc__actions { flex-direction: column !important; }
  .calc__actions .btn--primary,
  .calc__actions button { width: 100% !important; }
}

/* ========================================================= */
/*  ARTICLE/PAGE TOP SPACING — fix for about/contact/policies */
/* ========================================================= */
.article-head {
  padding: 64px 0 40px !important;
  background: linear-gradient(180deg, var(--paper-deep) 0%, var(--paper) 100%) !important;
  border-bottom: 1px solid var(--rule) !important;
}
.article-head .container { max-width: var(--container-narrow) !important; }
.article-head h1 {
  font-size: clamp(2rem, 5vw, 3.25rem) !important;
  letter-spacing: -0.025em !important;
  line-height: 1.1 !important;
  margin: 0 0 16px 0 !important;
}
.article-head .lede,
.article-head__lede {
  font-size: var(--fs-md) !important;
  color: var(--ink-soft) !important;
  max-width: 640px !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}
main > section:first-child { padding-top: 56px; }
main > .section,
main > section.section { padding: 64px 0; }
main > section.section--tight { padding: 40px 0; }


/* ========================================================= */
/*  MOBILE-FIRST FIXES — definitive overrides                 */
/*  Order matters: these come LAST so they win the cascade.  */
/* ========================================================= */

/* 1. Kill all horizontal overflow */
html, body {
  overflow-x: hidden !important;
  /* 100vw INCLUDES the scrollbar, so on any browser with a classic scrollbar
     this was ~15px wider than the actual content box. The page was pushed left
     and left a matching gap on the right. 100% measures the content box. */
  max-width: 100% !important;
}
body { width: 100%; position: relative; }
* { max-width: 100%; }
.container, .wrap, .wrap--narrow, .wrap--prose,
.footer__inner, .site-header__inner, .hero__grid {
  max-width: min(100%, var(--container)) !important;
  box-sizing: border-box !important;
}

/* 2. Hero headline — scale aggressively on small screens */
@media (max-width: 768px) {
  .hero { padding: 32px 0 24px !important; }
  .hero__grid { gap: 24px !important; grid-template-columns: 1fr !important; }
  .hero__headline {
    font-size: clamp(2rem, 9vw, 3rem) !important;
    line-height: 1.1 !important;
    letter-spacing: -0.02em !important;
    word-break: break-word !important;
    hyphens: auto !important;
  }
  .hero__sub { font-size: 1rem !important; line-height: 1.55 !important; }
  .hero__eyebrow { font-size: 0.7rem !important; padding: 6px 14px !important; }
  .hero__cta { flex-direction: column !important; gap: 10px !important; }
  .hero__cta .btn { width: 100% !important; justify-content: center !important; padding: 14px 20px !important; }
  .hero__illustration { max-width: 240px !important; margin: 0 auto !important; }
  .hero__plate { padding: 20px !important; gap: 12px !important; }
  .hero__plate__big { font-size: 1.5rem !important; }
  .hero__plate__big sub { font-size: 0.55em !important; }
}

@media (max-width: 480px) {
  .hero__headline { font-size: clamp(1.75rem, 8.5vw, 2.5rem) !important; }
  .hero__illustration { max-width: 180px !important; }
}

/* 3. Mobile menu — bulletproof visibility */
@media (max-width: 880px) {
  /* Hide the whole nav list initially, then slide it in */
  .nav__list {
    position: fixed !important;
    top: 72px !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: calc(100vh - 72px) !important;
    background: var(--paper) !important;
    padding: 24px 20px !important;
    margin: 0 !important;
    z-index: 999 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    transform: translateX(100%);
    transition: transform 300ms cubic-bezier(.22,.61,.36,1);
    border-top: 1px solid var(--rule);
    visibility: hidden;
    box-shadow: -20px 0 40px -10px rgba(0,0,0,0.15);
  }
  .nav__list.is-open {
    transform: translateX(0) !important;
    visibility: visible !important;
  }
  .nav__item {
    width: 100% !important;
    border-bottom: 1px solid var(--rule) !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
  }
  .nav__item:last-child { border-bottom: none !important; padding-top: 16px !important; }
  .nav__link {
    width: 100% !important;
    padding: 18px 8px !important;
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    color: var(--ink) !important;
    justify-content: space-between !important;
    background: transparent !important;
  }
  .nav__dropdown {
    position: static !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    box-shadow: none !important;
    border: none !important;
    background: var(--paper-deep) !important;
    min-width: 0 !important;
    width: 100% !important;
    border-radius: 12px !important;
    margin: 0 0 12px 0 !important;
    padding: 8px !important;
    max-height: 0 !important;
    overflow: hidden !important;
    transition: max-height 300ms cubic-bezier(.22,.61,.36,1), padding 200ms ease !important;
  }
  .nav__item.is-expanded .nav__dropdown {
    max-height: 800px !important;
    padding: 12px !important;
  }
  .nav__dropdown__link {
    padding: 12px !important;
    font-size: 0.95rem !important;
  }
  .nav__cta {
    width: 100% !important;
    margin: 12px 0 0 0 !important;
    padding: 14px !important;
    text-align: center !important;
    background: var(--ink) !important;
    color: var(--paper) !important;
    border-radius: 999px !important;
    font-weight: 700 !important;
  }
  
  /* Lock body scroll when menu open */
  body.menu-open { overflow: hidden !important; }
  
  /* Toggle button always visible above menu */
  .nav__toggle {
    z-index: 1000 !important;
    position: relative !important;
  }
  
  /* Hide desktop-only chevron, but keep mobile chevron animation */
  .nav__link__chev { width: 16px !important; height: 16px !important; }
}

/* 4. Container padding adjustments for mobile */
@media (max-width: 600px) {
  .container, .wrap, .footer__inner, .site-header__inner {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .section { padding: 40px 0 !important; }
  .section--tight { padding: 24px 0 !important; }
}

@media (max-width: 380px) {
  .container, .wrap, .footer__inner, .site-header__inner {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* 5. Typography clamps for mobile */
@media (max-width: 768px) {
  h1 { font-size: clamp(1.75rem, 7vw, 2.5rem) !important; line-height: 1.15 !important; word-break: break-word !important; }
  h2 { font-size: clamp(1.5rem, 5.5vw, 2rem) !important; line-height: 1.2 !important; }
  h3 { font-size: clamp(1.2rem, 4.5vw, 1.5rem) !important; }
  .article__title { font-size: clamp(1.75rem, 7vw, 2.5rem) !important; }
  .article-head h1 { font-size: clamp(1.75rem, 7vw, 2.5rem) !important; }
  .section-title { font-size: clamp(1.4rem, 5vw, 1.875rem) !important; }
}

/* 6. Calculator form mobile fixes */
@media (max-width: 768px) {
  .calc { padding: 20px 16px !important; }
  .calc__head { gap: 12px !important; padding-bottom: 16px !important; margin-bottom: 0 !important; }
  .calc__head > span:first-child {
    width: 44px !important;
    height: 44px !important;
    font-size: 1.4rem !important;
    border-radius: 10px !important;
  }
  .calc__title { font-size: 1.15rem !important; }
  .calc fieldset { padding: 20px 0 !important; }
  .calc legend { font-size: 1rem !important; margin-bottom: 14px !important; }
  .calc .calc__grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  .calc__result { padding: 24px 18px !important; border-radius: 16px !important; }
  .calc__result__big { font-size: 2.25rem !important; }
  .calc__actions { flex-direction: column !important; gap: 10px !important; padding-top: 16px !important; }
  .calc__actions .btn--primary,
  .calc__actions button { width: 100% !important; padding: 14px 20px !important; }
}

/* 7. Card grids on mobile */
@media (max-width: 600px) {
  .cards-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
  .card { padding: 20px !important; }
  .card__icon { width: 40px !important; height: 40px !important; font-size: 1.3rem !important; }
  .card__title { font-size: 1.05rem !important; }
}

/* 8. Footer mobile */
@media (max-width: 600px) {
  .footer__top { grid-template-columns: 1fr !important; gap: 24px !important; }
  .footer__brand-col { grid-column: 1 !important; }
  .footer__heading { margin-bottom: 12px !important; }
  .footer__newsletter__form { flex-direction: column !important; }
  .footer__newsletter__form button { width: 100% !important; }
  .footer__bottom { flex-direction: column !important; align-items: flex-start !important; gap: 12px !important; }
}

/* 9. Stat bar mobile */
@media (max-width: 600px) {
  .stat-bar { grid-template-columns: 1fr 1fr !important; padding: 20px !important; gap: 16px !important; }
  .stat-bar__big { font-size: 1.6rem !important; }
}

/* 10. Slider on mobile — make slides fit nicely */
@media (max-width: 600px) {
  .slider__slide { width: 75% !important; min-width: 240px !important; }
  .slider__controls { display: none !important; }
}

/* 11. Hero plate grid on mobile */
@media (max-width: 480px) {
  .hero__plate {
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
  }
  .hero__plate__label { font-size: 0.65rem !important; }
}

/* 12. Article body mobile spacing */
@media (max-width: 768px) {
  .article-head { padding: 40px 0 24px !important; }
  .article__body, .wrap--prose, .wrap--narrow { padding-left: 20px !important; padding-right: 20px !important; }
}

/* 13. Force long URLs/words to break */
p, li, td, a, span, h1, h2, h3, h4 {
  overflow-wrap: break-word !important;
  word-wrap: break-word !important;
}

/* 14. Stop the hero illustration from causing layout shift */
.hero__visual {
  min-height: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

/* 15. Back-to-top on mobile */
@media (max-width: 600px) {
  .back-to-top { bottom: 16px !important; right: 16px !important; width: 40px !important; height: 40px !important; }
}

/* 16. CTA strip mobile fix */
@media (max-width: 600px) {
  section[style*="2D2620"] .wrap--narrow { padding: 32px 20px !important; }
  section[style*="2D2620"] h2 { font-size: 1.5rem !important; }
}



/* ========================================================= */
/*  FINAL FIXES — Hero plate overflow on desktop             */
/* ========================================================= */

/* Use minmax(0, ...) so grid columns can shrink below content width */
.hero__grid {
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) !important;
}
@media (max-width: 880px) {
  .hero__grid { grid-template-columns: 1fr !important; }
}

/* Stack the big number above its label — fixes the side-by-side overflow */
.hero__plate__big {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0 !important;
  line-height: 1 !important;
  min-width: 0 !important;
}
.hero__plate__big sub {
  display: block !important;
  font-size: 0.55em !important;
  font-weight: 500 !important;
  font-family: var(--font-body) !important;
  color: var(--ink-faint) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  margin-top: 6px !important;
  margin-left: 0 !important;
  background: none !important;
  -webkit-text-fill-color: var(--ink-faint) !important;
  bottom: 0 !important;
  vertical-align: baseline !important;
}

/* Ensure the aside doesn't overflow */
.hero__visual, .hero__plate {
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
}
.hero__plate {
  overflow: visible !important; /* let shadow show */
  padding: 24px !important;
}

/* ========================================================= */
/*  FINAL FIX — Hero plate label overlap                      */
/* ========================================================= */
.hero__plate {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 24px 32px !important;
  padding: 28px !important;
  overflow: hidden !important;
  border-radius: 16px !important;
}
.hero__plate > * {
  min-width: 0 !important;
  overflow: hidden !important;
}
.hero__plate__label {
  grid-column: 1 / -1 !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--ink-faint) !important;
  padding-bottom: 8px !important;
  border-bottom: 1px solid var(--rule) !important;
  margin: 0 !important;
}
.hero__plate__big {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 4px !important;
  min-width: 0 !important;
  max-width: 100% !important;
  line-height: 1 !important;
  font-size: clamp(1.75rem, 3.5vw, 2.5rem) !important;
}
.hero__plate__big sub {
  display: block !important;
  position: static !important;
  bottom: auto !important;
  vertical-align: baseline !important;
  font-size: 0.65rem !important;
  font-weight: 600 !important;
  font-family: var(--font-body) !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color: var(--ink-faint) !important;
  margin: 6px 0 0 0 !important;
  padding: 0 !important;
  background: none !important;
  -webkit-text-fill-color: var(--ink-faint) !important;
  max-width: 100% !important;
  word-break: keep-all !important;
  overflow-wrap: break-word !important;
  line-height: 1.3 !important;
}

@media (max-width: 880px) {
  .hero__plate {
    padding: 20px !important;
    gap: 16px 20px !important;
  }
  .hero__plate__big {
    font-size: clamp(1.5rem, 7vw, 2rem) !important;
  }
  .hero__plate__big sub {
    font-size: 0.6rem !important;
  }
}

/* ========================================================= */
/*  PROSE PAGE FIXES — about, contact, policies, editorial   */
/*  These classes existed in HTML but had NO css = full-bleed */
/* ========================================================= */

/* Readable content width + side padding */
.container--prose,
.container-narrow,
.prose {
  width: 100%;
  max-width: 720px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
  box-sizing: border-box;
}

/* When .container and .container--prose are combined, prose wins */
.container.container--prose,
.container.container--prose.prose {
  max-width: 720px !important;
}

/* Prose vertical rhythm — space between elements */
.prose > h2,
.container--prose > h2,
.section .container-narrow > h2 {
  margin-top: 48px !important;
  margin-bottom: 16px !important;
  font-size: clamp(1.5rem, 2.5vw, 2rem) !important;
  line-height: 1.2 !important;
}
.prose > h2:first-child,
.container--prose > h2:first-child { margin-top: 0 !important; }
.prose > h3,
.container--prose > h3 { margin-top: 32px !important; margin-bottom: 12px !important; }
.prose > p,
.container--prose > p,
.container-narrow > p {
  margin-bottom: 18px !important;
  line-height: 1.7 !important;
  max-width: 68ch;
}
.prose > ul,
.prose > ol,
.container--prose > ul,
.container--prose > ol {
  margin: 0 0 18px 0 !important;
  padding-left: 24px !important;
}
.prose li,
.container--prose li { margin-bottom: 8px !important; line-height: 1.65 !important; }

/* article-head should match the prose width */
.article-head .container--prose,
.article-head .container.container--prose {
  max-width: 720px !important;
}

/* section-title spacing — stop it jamming against preceding content */
.section-title {
  margin-top: 8px !important;
  margin-bottom: 24px !important;
  padding-bottom: 12px !important;
}
.section .container-narrow > .section-title:first-child { margin-top: 0 !important; }

/* Give .section proper breathing room on prose pages */
main > section.section { padding: 56px 0 !important; }
main > section.section--tight { padding: 40px 0 !important; }
main > section + section { border-top: none; }

/* ========================================================= */
/*  Decorative stitch divider (✦) — was unstyled              */
/* ========================================================= */
.rule-stitch {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 48px 0 !important;
  text-align: center;
}
.rule-stitch::before,
.rule-stitch::after {
  content: "";
  height: 1px;
  flex: 1;
  max-width: 120px;
  background: linear-gradient(90deg, transparent, var(--rule-strong), transparent);
}
.rule-stitch__mark {
  color: var(--terracotta);
  font-size: 1.1rem;
  line-height: 1;
  flex-shrink: 0;
}

/* The "Questions? Get in touch" line — center & style it */
.rule-stitch + p,
.prose > p:last-child:has(a[href*="contact"]) {
  text-align: center;
  color: var(--ink-soft);
}

/* ========================================================= */
/*  Inline numbered content — "(1)...(2)..." readability      */
/*  (the merged-looking numbered list on about page)          */
/* ========================================================= */
.prose strong,
.container--prose strong,
.container-narrow strong {
  font-weight: 700;
  color: var(--ink);
}

/* ========================================================= */
/*  MOBILE — prose pages                                      */
/* ========================================================= */
@media (max-width: 768px) {
  .container--prose,
  .container-narrow,
  .prose {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .prose > h2,
  .container--prose > h2,
  .section .container-narrow > h2 {
    margin-top: 36px !important;
    font-size: clamp(1.4rem, 5vw, 1.75rem) !important;
  }
  main > section.section { padding: 40px 0 !important; }
  .rule-stitch { margin: 32px 0 !important; }
  .rule-stitch::before, .rule-stitch::after { max-width: 60px; }
}

@media (max-width: 480px) {
  .container--prose,
  .container-narrow,
  .prose {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* ==== PHASE 1 — calculator<->guide bridges (injected) ==== */


.toolbridge{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--sp-4);align-items:center;
  margin:var(--sp-6) 0;padding:var(--sp-4) var(--sp-5);
  background:var(--surface);border:1px solid var(--rule);border-left:3px solid var(--data);
  border-radius:var(--radius);box-shadow:var(--shadow-xs);
}
.toolbridge__icon{width:46px;height:46px;flex-shrink:0;border-radius:var(--radius-sm);
  display:grid;place-items:center;font-size:1.35rem;background:var(--paper-deep);}
.toolbridge__kicker{display:block;font-family:var(--font-mono);font-size:var(--fs-xs);
  letter-spacing:.1em;text-transform:uppercase;color:var(--data);margin-bottom:3px;}
.toolbridge__title{font-family:var(--font-display);font-size:var(--fs-md);margin:0 0 3px;line-height:1.25;}
.toolbridge__desc{margin:0;font-size:var(--fs-sm);color:var(--ink-soft);line-height:1.55;}
.toolbridge__cta{white-space:nowrap;}
.toolbridge__cta span{display:inline-block;transition:transform var(--dur-1) var(--ease);}
.toolbridge__cta:hover span{transform:translateX(4px);}

.nextstep{
  margin:var(--sp-8) 0 0;padding:var(--sp-6);
  background:linear-gradient(135deg,var(--surface) 0%,var(--paper-deep) 100%);
  border:1px solid var(--rule);border-radius:var(--radius-lg);
}
.nextstep__kicker{font-family:var(--font-mono);font-size:var(--fs-xs);letter-spacing:.1em;
  text-transform:uppercase;color:var(--data);margin:0 0 var(--sp-2);}
.nextstep__title{font-family:var(--font-display);font-size:var(--fs-lg);margin:0 0 var(--sp-3);line-height:1.2;}
.nextstep__desc{margin:0 0 var(--sp-5);color:var(--ink-soft);line-height:1.65;max-width:62ch;}
.nextstep__actions{display:flex;gap:var(--sp-3);flex-wrap:wrap;}
.nextstep__actions .btn span{display:inline-block;transition:transform var(--dur-1) var(--ease);}
.nextstep__actions .btn:hover span{transform:translateX(4px);}

@media (max-width:700px){
  .toolbridge{grid-template-columns:auto minmax(0,1fr);}
  .toolbridge__cta{grid-column:1/-1;width:100%;justify-content:center;margin-top:var(--sp-2);}
  .nextstep{padding:var(--sp-5);}
  .nextstep__actions{flex-direction:column;}
  .nextstep__actions .btn{width:100%;justify-content:center;}
}
@media (prefers-reduced-motion:reduce){
  .toolbridge__cta span,.nextstep__actions .btn span{transition:none;}
}
/* ==== END PHASE 1 ==== */

/* ==== PHASE 1b — mobile table scroll + tap targets (injected) ==== */
.table-scroll{
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  margin:var(--sp-5) 0;border-radius:var(--radius-sm);
}
.table-scroll:focus-visible{outline:2px solid var(--data);outline-offset:3px;}
.table-scroll > .data-table{margin:0;min-width:max-content;}

@media (max-width:768px){
  /* 44px minimum touch target */
  .btn{min-height:44px;}
  .toolbridge__cta,.nextstep__actions .btn{min-height:46px;}
  /* hint that the table scrolls */
  .table-scroll{
    background:
      linear-gradient(90deg,var(--surface) 30%,rgba(254,252,248,0)) left/28px 100% no-repeat,
      linear-gradient(270deg,var(--surface) 30%,rgba(254,252,248,0)) right/28px 100% no-repeat,
      radial-gradient(farthest-side at 0 50%,rgba(31,27,22,.12),transparent) left/12px 100% no-repeat,
      radial-gradient(farthest-side at 100% 50%,rgba(31,27,22,.12),transparent) right/12px 100% no-repeat;
    background-attachment:local,local,scroll,scroll;
  }
}
/* ==== END PHASE 1b ==== */

/* ==== PHASE 2 — design system: palette, header, mega menu, footer, search ==== */



/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:60;background:rgba(250,249,246,.92);
  backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--rule);}
.site-header__inner{display:flex;align-items:center;gap:var(--sp-5);
  max-width:1280px;margin:0 auto;padding:0 24px;min-height:var(--header-h);}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);flex-shrink:0;}
.brand__mark{width:30px;height:30px;display:grid;place-items:center;color:var(--terracotta);}
.brand__mark svg{width:26px;height:26px;}
.brand__name{font-family:var(--font-display);font-weight:600;font-size:1.06rem;letter-spacing:-.01em;}

.nav{margin-left:auto;}
.nav__list{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0;}
.nav__item{position:relative;}
.nav__link{display:inline-flex;align-items:center;gap:5px;padding:9px 13px;border-radius:8px;
  color:var(--ink);text-decoration:none;font-weight:500;font-size:.94rem;line-height:1;}
.nav__link:hover,.nav__link:focus-visible{background:var(--paper-deep);}
.nav__link__chev{width:11px;height:11px;opacity:.55;transition:transform var(--dur-1) var(--ease);}
.nav__item--mega:hover .nav__link__chev{transform:rotate(180deg);}
.nav__item--util{margin-left:6px;}

/* ---------- mega menu ---------- */
.nav__item--mega{position:static;}
.nav__dropdown--mega{position:absolute;left:0;right:0;top:100%;
  background:var(--surface);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  box-shadow:0 18px 40px -18px rgba(32,33,31,.22);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity var(--dur-2) var(--ease),transform var(--dur-2) var(--ease),visibility var(--dur-2);}
.nav__item--mega:hover>.nav__dropdown--mega,
.nav__item--mega:focus-within>.nav__dropdown--mega{opacity:1;visibility:visible;transform:none;}
.nav__mega{max-width:1280px;margin:0 auto;padding:26px 24px;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px;}
.nav__group__title{display:flex;align-items:center;gap:8px;width:100%;
  background:none;border:0;border-bottom:1px solid var(--rule);
  padding:0 0 9px;margin:0 0 9px;text-align:left;cursor:default;
  font-family:var(--font-display);font-size:.94rem;font-weight:600;color:var(--ink);}
.nav__group__icon{font-size:1rem;}
.nav__group__chev{display:none;width:12px;height:12px;margin-left:auto;flex-shrink:0;}
.nav__group__list{list-style:none;margin:0;padding:0;display:grid;gap:1px;}
.nav__dropdown__link{display:block;padding:8px 10px;border-radius:8px;text-decoration:none;color:var(--ink);}
.nav__dropdown__link:hover,.nav__dropdown__link:focus-visible{background:var(--paper-deep);}
.nav__dropdown__title{display:block;font-size:.88rem;font-weight:500;line-height:1.3;}
.nav__dropdown__desc{display:block;font-size:.76rem;color:var(--ink-faint);margin-top:2px;line-height:1.35;}
.nav__mega__foot{border-top:1px solid var(--rule);background:var(--paper-deep);}
.nav__mega__foot a{display:block;max-width:1280px;margin:0 auto;padding:13px 24px;
  font-size:.88rem;font-weight:600;color:var(--terracotta);text-decoration:none;}
.nav__mega__foot a span{display:inline-block;transition:transform var(--dur-1) var(--ease);}
.nav__mega__foot a:hover span{transform:translateX(4px);}

/* ---------- search trigger ---------- */
.search-btn{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;
  border:1px solid var(--rule);background:var(--surface);border-radius:var(--radius-full);
  color:var(--ink-soft);font:inherit;font-size:.88rem;cursor:pointer;line-height:1;}
.search-btn:hover{border-color:var(--rule-strong);color:var(--ink);}
.search-btn svg{opacity:.7;}

/* ---------- footer ---------- */
.site-footer{background:var(--paper-deep);border-top:1px solid var(--rule);margin-top:var(--sp-9);}
.footer__inner{max-width:1280px;margin:0 auto;padding:var(--sp-8) 24px var(--sp-6);}
.footer__top{display:grid;grid-template-columns:1.7fr repeat(4,minmax(0,1fr));gap:var(--sp-7) var(--sp-6);}
.footer__brand-col{max-width:34ch;}
.footer__tagline{margin:var(--sp-4) 0 var(--sp-5);font-size:var(--fs-sm);color:var(--ink-soft);line-height:1.65;}
.footer__social{display:flex;gap:10px;}
.footer__social a{width:36px;height:36px;display:grid;place-items:center;border-radius:50%;
  border:1px solid var(--rule);color:var(--ink-soft);background:var(--surface);}
.footer__social a:hover{color:var(--terracotta);border-color:var(--terracotta);}
.footer__social svg{width:17px;height:17px;}
.footer__heading{font-family:var(--font-display);font-size:.92rem;font-weight:600;
  margin:0 0 var(--sp-4);color:var(--ink);}
.footer__list{list-style:none;margin:0;padding:0;display:grid;gap:9px;}
.footer__list a{font-size:var(--fs-sm);color:var(--ink-soft);text-decoration:none;}
.footer__list a:hover{color:var(--terracotta);}
.footer__bottom{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-4);
  flex-wrap:wrap;margin-top:var(--sp-7);padding-top:var(--sp-5);
  border-top:1px solid var(--rule);font-size:var(--fs-sm);color:var(--ink-faint);}
.footer__bottom-links{display:flex;gap:var(--sp-4);}
.footer__bottom-links a{color:var(--ink-faint);text-decoration:none;}
.footer__bottom-links a:hover{color:var(--terracotta);}

/* ---------- search dialog ---------- */
body.srch-open{overflow:hidden;}
.srch{position:fixed;inset:0;z-index:1000;display:grid;place-items:start center;padding:10vh 20px 20px;}
.srch[hidden]{display:none;}
.srch__backdrop{position:fixed;inset:0;background:rgba(32,33,31,.42);backdrop-filter:blur(2px);}
.srch__panel{position:relative;width:100%;max-width:620px;background:var(--surface);
  border:1px solid var(--rule);border-radius:var(--radius-lg);box-shadow:var(--shadow-xl);overflow:hidden;}
.srch__field{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--rule);color:var(--ink-faint);}
.srch__input{flex:1;min-width:0;border:0;background:none;font:inherit;font-size:1.05rem;color:var(--ink);outline:none;}
.srch__close{border:1px solid var(--rule);background:var(--paper-deep);color:var(--ink-faint);
  font:inherit;font-size:.72rem;padding:4px 8px;border-radius:6px;cursor:pointer;}
.srch__status{margin:0;padding:10px 18px;font-size:var(--fs-xs);color:var(--ink-faint);
  border-bottom:1px solid var(--rule);background:var(--paper);}
.srch__results{list-style:none;margin:0;padding:6px;max-height:52vh;overflow-y:auto;}
.srch__hit{display:block;padding:11px 12px;border-radius:var(--radius);text-decoration:none;color:var(--ink);}
.srch__hit.is-active,.srch__hit:hover{background:var(--paper-deep);}
.srch__hit__top{display:flex;align-items:center;gap:10px;}
.srch__hit__title{font-weight:600;font-size:.95rem;}
.srch__badge{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.06em;text-transform:uppercase;
  padding:3px 7px;border-radius:999px;background:var(--paper-dark);color:var(--ink-soft);flex-shrink:0;}
.srch__badge--calculator{background:#EFE0DA;color:var(--terracotta-d);}
.srch__badge--tool{background:#DFE7EA;color:var(--data);}
.srch__badge--guide{background:#E3E8E1;color:var(--sage-d);}
.srch__hit__desc{display:block;font-size:.83rem;color:var(--ink-soft);margin-top:3px;}
.srch__hit__cat{display:block;font-size:.72rem;color:var(--ink-faint);margin-top:3px;}

/* ---------- mobile ---------- */
@media (max-width:880px){
  .nav{margin-left:0;}
  .nav__mega{grid-template-columns:1fr;gap:0;padding:6px 4px;max-width:none;}
  .nav__group__title{cursor:pointer;justify-content:space-between;min-height:48px;
    padding:13px 10px;margin:0;font-size:1rem;}
  .nav__group__chev{display:block;transition:transform var(--dur-2) var(--ease);}
  .nav__group.is-open .nav__group__chev{transform:rotate(180deg);}
  .nav__group__list{max-height:0;overflow:hidden;transition:max-height var(--dur-3) var(--ease);}
  .nav__group.is-open .nav__group__list{max-height:640px;padding:2px 0 10px;}
  .nav__dropdown__link{min-height:44px;display:flex;flex-direction:column;justify-content:center;}
  .nav__mega__foot{background:none;}
  .nav__mega__foot a{padding:14px 10px;}
  .search-btn{width:100%;justify-content:center;min-height:46px;font-size:.95rem;}
  .footer__top{grid-template-columns:repeat(2,minmax(0,1fr));}
  .footer__brand-col{grid-column:1/-1;max-width:none;}
}
@media (max-width:600px){
  .footer__top{grid-template-columns:1fr;gap:var(--sp-6);}
  .footer__bottom{flex-direction:column;align-items:flex-start;}
  .srch{padding:0;}
  .srch__panel{max-width:none;height:100%;border-radius:0;border:0;}
  .srch__results{max-height:calc(100vh - 150px);}
}
@media (prefers-reduced-motion:reduce){
  .nav__dropdown--mega,.nav__group__list,.nav__group__chev,.nav__link__chev,
  .nav__mega__foot a span{transition:none !important;}
}
/* ==== END PHASE 2 ==== */

/* ==== PHASE 3 — calculator UX (injected) ==== */


/* fields */
.calc .field,.calc .form__field{position:relative;}
.calc label{display:block;font-weight:600;font-size:.9rem;margin-bottom:6px;color:var(--ink);}
.calc input[type="number"],.calc input[type="text"],.calc select{
  width:100%;min-height:46px;padding:11px 13px;
  border:1.5px solid var(--rule-strong);border-radius:var(--radius-sm);
  background:var(--surface);color:var(--ink);font:inherit;font-size:1rem;
  transition:border-color var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease);}
.calc input:hover,.calc select:hover{border-color:var(--ink-faint);}
.calc input:focus-visible,.calc select:focus-visible{
  outline:none;border-color:var(--data);box-shadow:0 0 0 3px rgba(73,106,118,.22);}
.calc .field__hint,.calc .form__hint{display:block;margin-top:6px;font-size:.8rem;color:var(--ink-faint);line-height:1.45;}

/* error state — never colour alone: border weight + icon + text */
.calc .field--error input,.calc .field--error select{
  border-color:var(--error);border-width:2px;background:var(--error-bg);}
.calc .field--error input:focus-visible,.calc .field--error select:focus-visible{
  box-shadow:0 0 0 3px rgba(166,64,44,.2);}
.field__error{display:flex;align-items:flex-start;gap:6px;margin:6px 0 0;
  font-size:.82rem;font-weight:600;color:var(--error);line-height:1.45;}
.field__error::before{content:"!";flex-shrink:0;width:15px;height:15px;margin-top:1px;
  display:grid;place-items:center;border-radius:50%;background:var(--error);color:#fff;
  font-size:.66rem;font-weight:700;}
.calc__errors{margin:0 0 var(--sp-4);font-size:.88rem;font-weight:600;color:var(--error);}
.calc__errors:empty{display:none;}

/* assumptions block under the result */
.calc__assumptions{margin-top:var(--sp-5);padding-top:var(--sp-4);border-top:1px solid rgba(255,255,255,.16);}
.calc__assumptions__title{margin:0 0 var(--sp-3);font-family:var(--font-mono);font-size:.7rem;
  letter-spacing:.1em;text-transform:uppercase;opacity:.72;}
.calc__assumptions dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:8px 18px;margin:0;}
.calc__assumptions dl > div{display:flex;justify-content:space-between;gap:10px;
  padding:5px 0;border-bottom:1px dotted rgba(255,255,255,.14);font-size:.84rem;}
.calc__assumptions dt{opacity:.72;min-width:0;}
.calc__assumptions dd{margin:0;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;}
.calc__assumptions__note{margin:var(--sp-3) 0 0;font-size:.76rem;opacity:.6;}

/* copy confirmation */
.btn.is-copied{background:var(--sage);border-color:var(--sage);color:#fff;}

@media (max-width:768px){
  .calc input[type="number"],.calc input[type="text"],.calc select{min-height:48px;font-size:1rem;}
  .calc__assumptions dl{grid-template-columns:1fr;}
}

/* printed result */
@media print{
  .site-header,.site-footer,.nav,.toolbridge,.nextstep,.srch,.back-to-top,
  .calc__actions,.faq,.slider,.breadcrumb,nav[aria-label="Breadcrumb"]{display:none !important;}
  .calc__result{border:1px solid #000 !important;background:#fff !important;color:#000 !important;}
  .calc__result *{color:#000 !important;}
  .calc__assumptions{border-top:1px solid #000 !important;}
  .calc__assumptions dl > div{border-bottom:1px dotted #666 !important;}
  a[href]::after{content:"";}
}
@media (prefers-reduced-motion:reduce){
  .calc input,.calc select{transition:none;}
}
/* ==== END PHASE 3 ==== */
/* ==== PHASE 4 — article diagrams (injected) ==== */
.figure--diagram{background:var(--surface);border:1px solid var(--rule);
  border-radius:var(--radius-lg);padding:var(--sp-5);margin:var(--sp-7) 0;}
.figure--diagram img{display:block;width:100%;height:auto;}
.figure--diagram .figure__cap{margin-top:var(--sp-4);padding-top:var(--sp-3);
  border-top:1px dashed var(--rule);text-align:center;font-size:var(--fs-sm);
  color:var(--ink-faint);line-height:1.6;}
@media (max-width:768px){ .figure--diagram{padding:var(--sp-4);} }
/* ==== END PHASE 4 ==== */
/* ==== PHASE 4b — keep wide diagrams legible on small screens ==== */
.figure__scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.figure__scroll:focus-visible{outline:2px solid var(--data);outline-offset:3px;}
.figure__scroll img{display:block;width:100%;height:auto;}
/* Phase 4b pinned diagrams to 700px here and let them pan, on the reasoning
   that shrinking a 960px diagram to 350px turns its labels to noise. That is
   true, but panning a 350px window across 700px of diagram is not better - the
   reader never sees the whole thing at once, and it is the horizontal scrolling
   the owner asked to remove. Diagrams now scale to fit their column, and each
   figure carries a "View full size" link: the file is an SVG, so the browser
   opens it zoomable and sharp at any magnification. That is a better detail
   view than panning ever was, and the page keeps no sideways scroll. */
@media (max-width:820px){
  .figure__scroll img{min-width:0;width:100%;max-width:100%;height:auto;}
  .figure__scroll{overflow-x:visible;background:none;}
}
/* ==== END PHASE 4b ==== */

/* ==== PHASE 5 — WCAG AA contrast corrections ==== */

/* form controls need a 3:1 boundary, decorative rules do not */
.calc input[type="number"],.calc input[type="text"],.calc select{border-color:var(--field-border);}
.srch__input,.footer__newsletter__form input{border-color:var(--field-border);}
/* ==== END PHASE 5 ==== */
/* ==== PHASE 6 — common mistakes (injected) ==== */
.mistakes{list-style:none;counter-reset:mk;margin:var(--sp-5) 0 0;padding:0;}
.mistakes__item{counter-increment:mk;position:relative;padding:var(--sp-4) 0 var(--sp-4) 46px;
  border-bottom:1px solid var(--rule);}
.mistakes__item:last-child{border-bottom:0;}
.mistakes__item::before{content:counter(mk);position:absolute;left:0;top:var(--sp-4);
  width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  background:var(--paper-deep);border:1px solid var(--rule);
  font-family:var(--font-mono);font-size:.8rem;font-weight:500;color:var(--ink-soft);}
.mistakes__wrong{margin:0 0 6px;font-weight:600;color:var(--ink);line-height:1.5;}
.mistakes__fix{margin:0;color:var(--ink-soft);line-height:1.65;font-size:var(--fs-sm);}
@media (max-width:600px){ .mistakes__item{padding-left:38px;} .mistakes__item::before{width:26px;height:26px;} }
/* ==== END PHASE 6 ==== */

/* ==== PHASE 1 · Step 8 — touch target minimums ==== */
/* The hamburger is the primary mobile navigation control and measured 40px;
   back-to-top measured 40px. Both are pointer targets, so both go to 44px. */
.nav__toggle{min-height:44px;min-width:44px;}
.back-to-top{min-height:44px;min-width:44px;}
.nav__toggle:focus-visible,.back-to-top:focus-visible,
.search-btn:focus-visible,.skip-link:focus{
  outline:2px solid var(--color-focus);outline-offset:2px;box-shadow:var(--focus-ring);
}
/* ==== END PHASE 1 Step 8 ==== */

/* ==== PHASE 1 · ampersand legibility ====
   Fraunces' optical-size axis substitutes an ornate ampersand above ~20px,
   which reads as a registered-trademark mark in section headings. Pin a
   text-oriented optical size on the glyph only. */
.amp{font-variation-settings:'opsz' 14;font-style:inherit;}
/* ==== END ==== */

/* ==== PHASE 3 · per-page source scope note ====
   Separates what a cited standard actually covers from what the calculator
   itself derives, so a source is never read as backing a number it does not. */
.src-note{
  margin-top:var(--sp-4); padding:var(--sp-4) var(--sp-5);
  background:var(--paper-deep); border-left:3px solid var(--data);
  border-radius:var(--radius); font-size:var(--fs-sm);
  color:var(--ink-soft); line-height:1.75;
}
.src-note strong{color:var(--ink);}
/* ==== END ==== */

/* ==== consent banner ====
   Fixed to the viewport rather than inserted into flow, so showing it cannot
   shift layout - CLS stays at 0. Colour, radius and spacing come from the same
   tokens as the rest of the site; this is not a bolted-on third-party widget. */
.consent{
  position:fixed; left:0; right:0; bottom:0; z-index:1200;
  background:var(--surface); border-top:3px solid var(--terracotta);
  box-shadow:0 -10px 30px -12px rgba(31,27,22,.28);
}
.consent[hidden]{display:none;}
.consent__inner{
  max-width:var(--container); margin:0 auto;
  padding:var(--sp-5) var(--sp-5);
  display:grid; grid-template-columns:minmax(0,1fr) auto;
  gap:var(--sp-5); align-items:center;
}
.consent__title{
  font-family:var(--font-display); font-size:var(--fs-lg);
  margin:0 0 6px; color:var(--ink);
}
.consent__desc{
  margin:0; font-size:var(--fs-sm); line-height:1.7; color:var(--ink-soft);
  max-width:78ch;
}
.consent__desc a{color:var(--terracotta); text-decoration:underline; text-underline-offset:3px;}
.consent__actions{display:flex; gap:var(--sp-3); flex-shrink:0;}
.consent__btn{min-height:44px; white-space:nowrap;}

@media (max-width:760px){
  .consent__inner{grid-template-columns:1fr; gap:var(--sp-4); padding:var(--sp-4);}
  .consent__actions{flex-direction:column;}
  .consent__btn{width:100%;}
}
/* ==== END ==== */