/* Legwork marketing site. Extracted from the Option A design handoff.
   Every value below is lifted 1:1 from the inline style/style-hover attributes
   in docs/design-handoff/designs/Legwork Home A.dc.html (and the matching
   Privacy/Terms files), just moved into classes. */

:root {
  /* Fixed-nav height. 57px = one-row nav + border fallback; loader.js
     overwrites it with the measured height (nav wraps taller on phones).
     Full-height panels and anchor offsets both derive from it so a
     jumped-to panel plus the nav always equal exactly one viewport. */
  --nav-h: 57px;
  /* One vertical rhythm for every section. Capped (not width-scaled like the
     old 9vw) so gaps stay tight on wide screens and sections are sized to
     their content, never forced to the viewport. Nothing cuts at any height;
     no dead space at any width. */
  --section-pad-y: clamp(56px, 6vw, 88px);
  --blue-900: #092639;
  --blue-800: #0E3B58;
  --blue-700: #154F75;
  --blue-600: #1B6391;
  --blue-400: #479BD1;
  --blue-200: #ABCDE3;
  --blue-100: #D7E9F4;
  --blue-50: #EFF6FA;
  --muted-on-dark: #7FA8C4;
  --text: #1A1A1A;
  --text-muted: #6B7280;
  --text-legal: #374151;
  --border: #E5E7EB;
  --bg: #FAFAFA;
  --card-bg: #FFFFFF;
}

* { box-sizing: border-box; }

/* Anchor scrolls must clear the fixed nav. The static 72px covers the
   one-row nav without JS; loader.js refines it to the measured height
   (handles the nav wrapping to two rows on narrow screens). */
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 12px); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Urbanist', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }

input::placeholder { color: var(--muted-on-dark); }

/* G-glyph rotation. The arrowhead depicts counterclockwise motion, so the
   glyph spins counterclockwise (negative rotation) everywhere it is used
   (status chip, page loader). Single mechanism: negative angle, no
   animation-direction:reverse (which would double-negate back to clockwise). */
@keyframes lwspin { to { transform: rotate(-360deg); } }

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

/* Multi-sentence headlines: each sentence is an unbreakable unit, so a
   wrap always lands at a sentence boundary (never mid-sentence). If a
   single sentence exceeds the line (phones), it still wraps internally. */
.sentence { display: inline-block; }

/* Shared bits */
.eyebrow {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--blue-600);
}

/* Buttons */
.btn {
  display: inline-block;
  text-decoration: none;
  border-radius: 99px;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.btn-nav-primary {
  background: var(--blue-600);
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .03em;
  padding: 12px 24px;
}
.btn-nav-primary:hover { background: var(--blue-700); }

.btn-primary-lg {
  background: var(--blue-600);
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .03em;
  padding: 14px 30px;
}
.btn-primary-lg:hover { background: var(--blue-700); }

.btn-outline-lg {
  border: 1px solid var(--blue-200);
  color: var(--blue-600);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .03em;
  padding: 14px 30px;
  background: transparent;
}
.btn-outline-lg:hover { border-color: var(--blue-600); }

.btn-primary-notrack {
  background: var(--blue-600);
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 500;
  padding: 14px 30px;
}
.btn-primary-notrack:hover { background: var(--blue-700); }

.btn-white {
  background: #FFFFFF;
  color: var(--blue-800);
  font-size: 15px;
  font-weight: 600;
  padding: 14px 30px;
}
.btn-white:hover { background: var(--blue-100); }

.btn-outline-dark {
  border: 1px solid rgba(255,255,255,.4);
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 500;
  padding: 14px 30px;
  background: transparent;
}
.btn-outline-dark:hover { border-color: #FFFFFF; }

.btn-white-form {
  font-family: 'Urbanist', sans-serif;
  font-size: 14.5px;
  font-weight: 600;
  padding: 13px 24px;
  border: none;
  background: #FFFFFF;
  color: var(--blue-800);
}
.btn-white-form:hover { background: var(--blue-100); }

/* Translucent "Join early access" button on the dark hotline band. */
.btn-ghost-form {
  font-family: 'Urbanist', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  padding: 10px 18px;
  border: none;
  background: rgba(255,255,255,.14);
  color: #FFFFFF;
}

/* ---------- NAV ---------- */
/* v2: fixed (not sticky) so full-height Home sections can sit flush behind
   it; every page reserves clearance via its own hero/section top padding,
   which is already >= 56px everywhere (see Home #top padding-top:56px, and
   Solutions/About/Legal hero padding clamp(56-64px,...) that already clears
   the shorter 56px nav). */
.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: rgba(250,250,250,.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.site-nav__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(20px,4vw,48px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  min-height: 56px;
}
.site-nav__logo { display: flex; align-items: center; }
.site-nav__logo img { height: 24px; width: auto; display: block; }
.site-nav__links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(18px,3vw,36px);
}
.nav-link {
  text-decoration: none;
  color: var(--text);
  font-size: 14.5px;
  font-weight: 400;
}
/* Current-page nav link: blue-600, weight 600 (from the Blog design). */
.nav-link--active { color: var(--blue-600); font-weight: 600; }

/* Solutions mega-menu: hover-only, pure CSS (no JS), per the v2 handoff. */
.nav-sol {
  position: relative;
}
.nav-sol__panel {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding-top: 12px;
  width: max-content;
  z-index: 60;
}
.nav-sol__panel-inner {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 16px 40px rgba(14,59,88,.14);
  padding: 18px;
  display: grid;
  grid-template-columns: auto auto;
  gap: 24px;
}
.nav-sol:hover .nav-sol__panel { display: grid; }
.nav-sol__group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.nav-sol__group--bordered {
  border-left: 1px solid var(--border);
  padding-left: 24px;
}
.nav-sol__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blue-600);
  white-space: nowrap;
}
.nav-sol__link {
  text-decoration: none;
  color: var(--text);
  font-size: 14px;
  white-space: nowrap;
}

/* ---------- HERO ---------- */
/* Natural height: tall enough for its content plus rhythm, offset at the top
   to clear the fixed nav. Not forced to the viewport, so it never cuts and
   leaves no dead space at any screen size. */
.hero {
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  padding-top: calc(var(--nav-h) + var(--section-pad-y));
  padding-bottom: var(--section-pad-y);
}
.hero__watermark {
  position: absolute;
  right: max(-90px,-8vw);
  top: 50%;
  transform: translateY(-50%);
  width: clamp(220px,32vw,480px);
  height: auto;
  opacity: .07;
  pointer-events: none;
}
.hero__inner {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(24px,4vw,48px);
  width: 100%;
  box-sizing: border-box;
}
.hero__content { max-width: 820px; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--blue-200);
  border-radius: 99px;
  padding: 8px 16px;
  background: var(--blue-50);
  max-width: 100%;
}
.chip__icon {
  width: 14px;
  height: auto;
  flex: none;
  animation: lwspin 6s linear infinite;
}
.chip__text {
  font-size: 13px;
  font-weight: 400;
  color: var(--blue-800);
}

.hero__title {
  margin: 26px 0 0;
  font-weight: 300;
  font-size: clamp(46px,7.2vw,84px);
  line-height: 1.04;
  letter-spacing: -.01em;
  color: var(--text);
  text-wrap: balance;
}
.hero__lede {
  margin: 26px 0 0;
  max-width: 580px;
  font-size: clamp(16.5px,2vw,19px);
  line-height: 1.65;
  color: var(--text-muted);
  text-wrap: pretty;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 38px;
  align-items: center;
}
.hero__fineprint {
  margin: 26px 0 0;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ---------- PROOF HAIRLINE ---------- */
.proof-strip-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(20px,4vw,48px);
}
.proof-strip {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 22px 0;
  display: flex;
  justify-content: center;
  column-gap: clamp(28px,5vw,64px);
  row-gap: 10px;
  flex-wrap: wrap;
}
.proof-strip__item { font-size: 14px; color: var(--text-muted); }
.proof-strip__item b { color: var(--text); font-weight: 600; }

/* ---------- PROBLEM ---------- */
.problem {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--section-pad-y) clamp(20px,4vw,48px);
}
.problem__title {
  margin: 16px 0 0;
  font-weight: 300;
  font-size: clamp(28px,3.5vw,40px);
  line-height: 1.15;
  max-width: 640px;
  text-wrap: balance;
}
.problem__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(260px,1fr));
  gap: 24px;
  margin-top: 40px;
}
.problem__card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card-bg);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.problem__card h3 { margin: 0; font-size: 17px; font-weight: 600; }
.problem__card p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-muted);
  text-wrap: pretty;
}

/* ---------- PRODUCT ---------- */
/* head + embed sit side by side above the stage cards row. */
.product {
  background: var(--blue-50);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: var(--section-pad-y) 0;
}
.product__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(20px,4vw,48px);
  width: 100%;
  box-sizing: border-box;
}
.product__head {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: flex-start;
}
.product__intro { flex: 1 1 300px; }
.product__title {
  margin: 16px 0 0;
  font-weight: 300;
  font-size: clamp(28px,3.5vw,40px);
  line-height: 1.15;
  max-width: 560px;
  text-wrap: balance;
}
.product__desc {
  margin: 16px 0 0;
  max-width: 420px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-muted);
  text-wrap: pretty;
}

/* Swappable product-embed slot: this whole block (the frame + its two
   children, the loading overlay and the iframe) is the thing to replace
   wholesale if the embed mechanism ever changes. The iframe is fixed at the
   embed's authored size (1180x672) and scaled down to fit via JS
   (see product-embed.js), matching how the design itself is meant to be
   viewed full-size then reduced for the home slot. */
.product__embed {
  flex: 1.7 1 420px;
  position: relative;
  aspect-ratio: 1180 / 672;
  border-radius: 14px;
  border: 2px solid var(--blue-600);
  overflow: hidden;
  box-shadow: 0 24px 56px rgba(14,59,88,.22), 0 0 0 6px rgba(27,99,145,.08);
  background: var(--card-bg);
}
.product__embed-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--card-bg);
  z-index: 1;
  transition: opacity .2s ease;
}
.product__embed-loading.is-hidden { opacity: 0; pointer-events: none; }
.product__embed-spinner { width: 44px; height: auto; animation: lwspin 1.2s linear infinite; }
.product__embed-iframe {
  width: 1180px;
  height: 672px;
  border: 0;
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: top left;
}

.product__stages {
  display: grid;
  grid-template-columns: repeat(5,1fr);
  gap: 10px;
  margin-top: 24px;
}
.stage-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.stage-card__title { font-size: 13.5px; font-weight: 600; }
.stage-card__desc { font-size: 13.5px; line-height: 1.5; color: var(--text-muted); }

@media (max-width: 720px) {
  .product__stages { grid-template-columns: repeat(auto-fit,minmax(160px,1fr)); }
}

/* ---------- WORKFLOWS ---------- */
.workflows {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--section-pad-y) clamp(20px,4vw,48px);
}
.workflows__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(320px,1fr));
  gap: clamp(24px,4vw,56px);
  align-items: start;
}
.workflows__intro h2 {
  margin: 16px 0 0;
  font-weight: 300;
  font-size: clamp(28px,3.5vw,40px);
  line-height: 1.15;
  text-wrap: balance;
}
.workflows__intro p {
  margin: 16px 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-muted);
  text-wrap: pretty;
}
.workflows__list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border);
}
.workflow-row {
  display: grid;
  grid-template-columns: minmax(104px,140px) 1fr;
  gap: 18px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.workflow-row:last-child { border-bottom: none; }
.workflow-row__tag {
  font-family: 'Spline Sans Mono', monospace;
  font-size: 11.5px;
  color: var(--blue-600);
  padding-top: 3px;
}
.workflow-row__text { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--text-muted); }
.workflow-row__text b { color: var(--text); font-weight: 600; }

/* ---------- RECEIPT ---------- */
.receipt {
  background: var(--card-bg);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: var(--section-pad-y) 0;
}
.receipt__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(20px,4vw,48px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.receipt__title {
  margin: 16px 0 0;
  font-weight: 300;
  font-size: clamp(32px,4.5vw,52px);
  line-height: 1.1;
  max-width: 900px;
  text-wrap: balance;
}
.receipt__title b { font-weight: 400; color: var(--blue-600); }
.receipt__desc {
  margin: 16px 0 0;
  max-width: 560px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-muted);
  text-wrap: pretty;
}
.receipt__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 28px;
}
.receipt__fineprint { margin: 16px 0 0; font-size: 13px; color: var(--text-muted); }

/* ---------- SECURITY ---------- */
.security {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--section-pad-y) clamp(20px,4vw,48px);
}
.security__title {
  margin: 16px 0 0;
  font-weight: 300;
  font-size: clamp(28px,3.5vw,40px);
  line-height: 1.15;
  max-width: 620px;
  text-wrap: balance;
}
.security__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(260px,1fr));
  gap: 16px;
  margin-top: 40px;
}
.security-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card-bg);
  padding: 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.security-card__tag {
  font-family: 'Spline Sans Mono', monospace;
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--blue-600);
}
.security-card__desc { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--text-muted); }
.security-card__desc b { color: var(--text); font-weight: 600; }

/* ---------- FAQ ---------- */
.faq {
  max-width: 900px;
  margin: 0 auto;
  padding: var(--section-pad-y) clamp(20px,4vw,48px);
}
.faq__title {
  margin: 16px 0 0;
  font-weight: 300;
  font-size: clamp(28px,3.5vw,40px);
  line-height: 1.15;
  max-width: 620px;
  text-wrap: balance;
}
.faq__list {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.faq-item {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card-bg);
  padding: 0 24px;
}
.faq-item__q {
  cursor: pointer;
  list-style: none;
  padding: 18px 0;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.faq-item__q::-webkit-details-marker { display: none; }
.faq-item__q::after {
  content: "+";
  flex: none;
  color: var(--blue-600);
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
}
.faq-item[open] .faq-item__q::after { content: "-"; }
.faq-item__a {
  margin: 0;
  padding: 0 0 20px;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--text-muted);
  text-wrap: pretty;
}

/* ---------- HOTLINE CLOSER ---------- */
/* Owner override: the giant tel: phone display + "call the founder" framing
   stays even though the v2 README's rule 6 says no phone anywhere; see
   PHASE3_SPEC.md decision record. */
.hotline {
  background: var(--blue-800);
  color: #FFFFFF;
  padding: var(--section-pad-y) 0;
}
.hotline__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(20px,4vw,48px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.hotline__eyebrow {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--blue-400);
}
.hotline__title {
  margin: 16px 0 0;
  font-weight: 300;
  font-size: clamp(32px,4.5vw,52px);
  line-height: 1.1;
  max-width: 820px;
  color: #FFFFFF;
  text-wrap: balance;
}
.hotline__phone {
  text-decoration: none;
  margin: 16px 0 0;
  font-weight: 300;
  font-size: clamp(24px,4.6vw,52px);
  letter-spacing: .02em;
  color: #FFFFFF;
  border-bottom: 1px solid rgba(255,255,255,.35);
  padding-bottom: 6px;
  white-space: nowrap;
  transition: color .18s ease, border-color .18s ease;
}
.hotline__phone:hover { color: var(--blue-200); border-color: var(--blue-200); }
.hotline__desc {
  margin: 16px 0 0;
  max-width: 520px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--blue-200);
  text-wrap: pretty;
}
.hotline__desc b { color: #FFFFFF; font-weight: 600; }
.hotline__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 28px;
}

.early-access {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 440px;
}
.early-access__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
  width: 100%;
}
.early-access__input {
  font-family: 'Urbanist', sans-serif;
  font-size: 13.5px;
  padding: 10px 16px;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 99px;
  background: transparent;
  color: #FFFFFF;
  flex: 1;
  min-width: 180px;
  outline: none;
}
.early-access__success { font-size: 13.5px; color: var(--blue-200); }

/* ---------- FOOTER ---------- */
.site-footer { background: var(--blue-900); color: var(--muted-on-dark); }
.site-footer__inner {
  max-width: 1200px;
  margin: 0 auto;
  /* Owner request 2026-07-08: shorter footer than the design's clamp(36px,5vw,48px). */
  padding: clamp(18px,2.5vw,26px) clamp(20px,4vw,48px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  column-gap: 28px;
  row-gap: 18px;
  flex-wrap: wrap;
}
.site-footer__logo { display: flex; align-items: center; }
.site-footer__logo img { height: 14px; width: auto; opacity: .9; }
.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 24px;
  row-gap: 10px;
  font-size: 13.5px;
}
.footer-link { text-decoration: none; color: var(--muted-on-dark); transition: color .18s ease; }
.footer-link:hover { color: #FFFFFF; }
.site-footer__copy {
  font-family: 'Spline Sans Mono', monospace;
  font-size: 11.5px;
  letter-spacing: .04em;
}

/* ---------- LEGAL PAGES (Privacy / Terms) ---------- */
.legal-head {
  max-width: 880px;
  margin: 0 auto;
  padding: clamp(56px,8vw,88px) clamp(20px,4vw,48px) 40px;
}
.legal-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--blue-100);
  color: var(--blue-800);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  border-radius: 99px;
  padding: 5px 14px;
}
.legal-title {
  margin: 24px 0 0;
  font-weight: 300;
  font-size: clamp(34px,5vw,52px);
  line-height: 1.1;
}
.legal-updated {
  margin: 14px 0 0;
  font-size: 13px;
  color: var(--text-muted);
  font-family: 'Spline Sans Mono', monospace;
}

/* Table of contents box. */
.legal-toc {
  margin-top: 36px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card-bg);
  padding: 24px 28px;
}
.legal-toc__label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--blue-600);
}
.legal-toc__cols {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 6px 24px;
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.9;
}
.legal-toc__cols a { text-decoration: none; }
.legal-toc__cols--supplements {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.legal-toc__cols--clip a {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

/* Body: an ordered stack of numbered sections. */
.legal-main {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 clamp(20px,4vw,48px) 40px;
}
.legal-body {
  display: flex;
  flex-direction: column;
  gap: 44px;
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--text-legal);
}
.legal-body p { margin: 0 0 12px; }
.legal-body p:last-child { margin-bottom: 0; }
.legal-body p.muted { color: var(--text-muted); }
.legal-body h2 {
  margin: 0 0 14px;
  font-weight: 600;
  font-size: 20px;
  color: var(--text);
}
.legal-body h3 {
  margin: 0 0 8px;
  font-weight: 600;
  font-size: 16px;
  color: var(--text);
}
.legal-body ul {
  margin: 0 0 12px;
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.legal-body ul:last-child { margin-bottom: 0; }
.legal-body li { line-height: 1.6; }
.legal-body b { color: var(--text); }
.legal-link { color: var(--blue-600); text-decoration: none; font-weight: 500; }

/* Key/value definition box (contact rows etc). */
.legal-kv {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card-bg);
  overflow: hidden;
}
.legal-kv + .legal-kv, .legal-kv + p { margin-top: 14px; }
.legal-kv__row {
  display: grid;
  grid-template-columns: minmax(160px,220px) 1fr;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.legal-kv__row:last-child { border-bottom: none; }
.legal-kv__row span:first-child { font-weight: 600; color: var(--text); }

/* Purpose / legal-basis table (section 7). */
.legal-table {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card-bg);
  overflow: hidden;
}
.legal-table__head {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1.3fr;
  gap: 12px;
  padding: 12px 20px;
  background: var(--blue-50);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--blue-600);
}
.legal-table__row {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1.3fr;
  gap: 12px;
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  font-size: 14.5px;
}
.legal-table__row span:not(:first-child) { color: var(--text-muted); }

/* Regional supplements (Privacy) / numbered appendix sections (Terms). */
.legal-supplement {
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.legal-supplement__label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--blue-600);
}
.legal-supplement h2 { margin: 10px 0 14px; }

.legal-closing {
  margin: 0;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  color: var(--text-muted);
}

.legal-footer {
  border-top: 1px solid var(--border);
  padding: 28px clamp(20px,4vw,48px);
  display: flex;
  justify-content: center;
}
.legal-footer__copy {
  font-family: 'Spline Sans Mono', monospace;
  font-size: 11.5px;
  color: var(--text-muted);
}

/* ---------- FORM BUTTON (blog subscribe) ---------- */
.btn-primary-form {
  font-family: 'Urbanist', sans-serif;
  font-size: 14.5px;
  font-weight: 600;
  padding: 13px 24px;
  border: none;
  background: var(--blue-600);
  color: #FFFFFF;
}
.btn-primary-form:hover { background: var(--blue-700); }

/* ---------- PAGE LOADER (addendum B) ---------- */
@keyframes loaderspin { to { transform: rotate(-360deg); } }
@keyframes loaderfadein { from { opacity: 0; } to { opacity: 1; } }
/* Failsafe: forces the overlay away by ~2.5s even if JS never runs. */
@keyframes loaderfailsafe { to { opacity: 0; visibility: hidden; pointer-events: none; } }

.pageloader {
  position: fixed;
  inset: 0;
  z-index: 100; /* above the sticky nav (z-index 50) */
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0; /* anti-flash: invisible until the fade-in delay elapses */
  animation:
    loaderfadein .25s ease .15s forwards,
    loaderfailsafe .3s linear 2.2s forwards;
}
.pageloader__spinner {
  width: 48px;
  height: 48px;
  animation: loaderspin 1.4s linear infinite;
}
/* JS hide: cancel the animations so opacity/visibility take effect and fade.
   visibility is transitioned with a .25s delay so it flips only after the
   opacity fade completes (an undelayed visibility:hidden would hide the
   overlay instantly and skip the fade). */
.pageloader.is-hidden {
  animation: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .25s ease, visibility 0s linear .25s;
}

/* ---------- SHARED SECTION HEADINGS (Solutions / About) ---------- */
.section-title {
  margin: 20px 0 0;
  font-weight: 300;
  font-size: clamp(30px,4vw,44px);
  line-height: 1.1;
  text-wrap: balance;
}
.section-title--wide { max-width: 720px; }
.section-title--onDark { color: #FFFFFF; }
.section-lede {
  margin: 22px 0 0;
  max-width: 560px;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--text-muted);
  text-wrap: pretty;
}
.section-lede--wide { max-width: 620px; }
.eyebrow--onDark { color: var(--blue-400); }

.pill-link {
  text-decoration: none;
  border: 1px solid var(--blue-200);
  color: var(--blue-600);
  font-size: 14px;
  font-weight: 500;
  padding: 11px 22px;
  border-radius: 99px;
  transition: border-color .18s ease;
}
.pill-link:hover { border-color: var(--blue-600); }

/* Give the large section CTA buttons top spacing inside prose columns. */
.sol-transform .btn, .about-founder .btn { margin-top: 30px; }
.sol-transform .btn + .btn, .about-founder .btn + .btn { margin-top: 0; }

/* ---------- SOLUTIONS PAGE ---------- */
.sol-hero { position: relative; overflow: hidden; }
.sol-hero__watermark {
  position: absolute;
  right: max(-90px,-8vw);
  top: 50%;
  transform: translateY(-50%);
  width: clamp(240px,32vw,480px);
  height: auto;
  opacity: .06;
  pointer-events: none;
}
.sol-hero__inner {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: calc(var(--nav-h) + var(--section-pad-y)) clamp(20px,4vw,48px) var(--section-pad-y);
}
.sol-hero__title {
  margin: 24px 0 0;
  font-weight: 300;
  font-size: clamp(40px,5.6vw,68px);
  line-height: 1.06;
  letter-spacing: -.01em;
  max-width: 820px;
  text-wrap: balance;
}
.sol-hero__lede {
  margin: 24px 0 0;
  max-width: 600px;
  font-size: clamp(16px,1.9vw,18.5px);
  line-height: 1.65;
  color: var(--text-muted);
  text-wrap: pretty;
}
.sol-hero__jump { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

.sol-transform {
  background: var(--blue-50);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.sol-transform__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--section-pad-y) clamp(20px,4vw,48px);
}
.sol-transform__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(320px,100%),1fr));
  gap: clamp(36px,6vw,72px);
  align-items: start;
}
.sol-steps { display: flex; flex-direction: column; border-top: 1px solid var(--blue-200); }
.sol-step {
  display: grid;
  grid-template-columns: minmax(90px,120px) 1fr;
  gap: 18px;
  padding: 20px 0;
  border-bottom: 1px solid var(--blue-200);
}
.sol-step--last { border-bottom: none; }
.sol-step__num {
  font-family: 'Spline Sans Mono', monospace;
  font-size: 11.5px;
  color: var(--blue-600);
  padding-top: 3px;
}
.sol-step__text { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--text-muted); }
.sol-step__text b { color: var(--text); font-weight: 600; }

.sol-ip {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--section-pad-y) clamp(20px,4vw,48px);
}
.sol-ip__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(270px,100%),1fr));
  gap: 16px;
  margin-top: clamp(32px,5vw,48px);
}
.ip-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card-bg);
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.ip-card__tag {
  font-family: 'Spline Sans Mono', monospace;
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--blue-600);
}
.ip-card__name { font-size: 17.5px; font-weight: 600; }
.ip-card__desc { margin: 0; font-size: 14px; line-height: 1.6; color: var(--text-muted); }

.sol-courts { background: var(--blue-800); color: #FFFFFF; }
.sol-courts__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--section-pad-y) clamp(20px,4vw,48px);
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(320px,100%),1fr));
  gap: clamp(36px,6vw,72px);
  align-items: center;
}
.sol-courts__lede {
  margin: 22px 0 0;
  max-width: 520px;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--blue-200);
  text-wrap: pretty;
}
.sol-courts .btn { margin-top: 30px; }
.sol-courts__list { display: flex; flex-direction: column; border-top: 1px solid rgba(255,255,255,.25); }
.court-row {
  display: flex;
  gap: 18px;
  padding: 20px 0;
  border-bottom: 1px solid rgba(255,255,255,.25);
}
.court-row--last { border-bottom: none; }
.court-row__tag {
  font-family: 'Spline Sans Mono', monospace;
  font-size: 11.5px;
  color: var(--blue-400);
  width: 80px;
  flex: none;
  padding-top: 3px;
}
.court-row__text { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--blue-200); }
.court-row__text b { color: #FFFFFF; font-weight: 600; }

.sol-close {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--section-pad-y) clamp(20px,4vw,48px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.sol-close__title {
  margin: 0;
  font-weight: 300;
  font-size: clamp(30px,4.2vw,48px);
  line-height: 1.1;
  max-width: 680px;
  text-wrap: balance;
}
.sol-close__desc {
  margin: 22px 0 0;
  max-width: 520px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--text-muted);
  text-wrap: pretty;
}
.sol-close__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 34px; }

/* ---------- ABOUT PAGE ---------- */
.about-hero {
  max-width: 1200px;
  margin: 0 auto;
  padding: calc(var(--nav-h) + var(--section-pad-y)) clamp(20px,4vw,48px) var(--section-pad-y);
}
.about-hero__title {
  margin: 24px 0 0;
  font-weight: 300;
  font-size: clamp(40px,5.6vw,68px);
  line-height: 1.06;
  letter-spacing: -.01em;
  max-width: 880px;
  text-wrap: balance;
}
.about-story {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(20px,4vw,48px) var(--section-pad-y);
}
.about-story__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(320px,100%),1fr));
  gap: clamp(36px,6vw,80px);
  align-items: start;
}
.about-story__prose {
  display: flex;
  flex-direction: column;
  gap: 22px;
  font-size: clamp(16px,1.9vw,17.5px);
  line-height: 1.75;
  color: var(--text-legal);
  max-width: 560px;
}
.about-story__prose p { margin: 0; text-wrap: pretty; }
.about-stats { display: flex; flex-direction: column; border-top: 1px solid var(--border); }
.about-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 22px 0;
  border-bottom: 1px solid var(--border);
}
.about-stat--last { border-bottom: none; }
.about-stat__num { font-weight: 300; font-size: clamp(30px,3.4vw,38px); color: var(--blue-600); }
.about-stat__label { font-size: 13.5px; color: var(--text-muted); }

.about-how {
  background: var(--blue-50);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.about-how__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--section-pad-y) clamp(20px,4vw,48px);
}
.about-how__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(260px,100%),1fr));
  gap: 16px;
  margin-top: clamp(32px,5vw,48px);
}
.how-card {
  border: 1px solid var(--blue-200);
  border-radius: 10px;
  background: var(--card-bg);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.how-card__icon { width: 22px; height: auto; }
.how-card__name { font-size: 17px; font-weight: 600; }
.how-card__desc { margin: 0; font-size: 14px; line-height: 1.6; color: var(--text-muted); }

.about-founder {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--section-pad-y) clamp(20px,4vw,48px);
}
.about-founder__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(300px,100%),1fr));
  gap: clamp(36px,6vw,72px);
  align-items: center;
}
.founder-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card-bg);
  padding: clamp(28px,4vw,40px);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.founder-card__role {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.about-founder__cards { display: flex; flex-direction: column; gap: 16px; }
.founder-card__name-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.founder-card__name { font-weight: 400; font-size: clamp(26px,3vw,34px); }
.founder-card__bio {
  margin: 10px 0 0;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--text-muted);
  text-wrap: pretty;
}
/* Small circular WhatsApp/email icon links beside the founder's name. Exact
   fill colors as designed (#E9F2F8/#DCEAF3), a step lighter than the
   blue-50/blue-100 tokens, so kept literal rather than forced onto the scale. */
.founder-card__icon-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #E9F2F8;
  transition: background-color .18s ease;
}
.founder-card__icon-link:hover { background: #DCEAF3; }

/* ---------- BLOG INDEX ---------- */
.blog-header {
  max-width: 840px;
  margin: 0 auto;
  padding: clamp(56px,8vw,88px) clamp(20px,4vw,48px) clamp(36px,5vw,56px);
}
.blog-header__title {
  margin: 22px 0 0;
  font-weight: 300;
  font-size: clamp(36px,5vw,56px);
  line-height: 1.08;
  text-wrap: balance;
}
.blog-header__lede {
  margin: 20px 0 0;
  max-width: 560px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--text-muted);
  text-wrap: pretty;
}
.blog-list {
  max-width: 840px;
  margin: 0 auto;
  padding: 0 clamp(20px,4vw,48px) clamp(64px,9vw,96px);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.blog-card__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-family: 'Spline Sans Mono', monospace;
  font-size: 11.5px;
  color: var(--text-muted);
}
.blog-card__cat { color: var(--blue-600); letter-spacing: .06em; text-transform: uppercase; }
.blog-card__dot { color: var(--blue-200); }

.blog-featured {
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--blue-200);
  border-radius: 12px;
  background: var(--card-bg);
  padding: clamp(28px,4.5vw,40px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.blog-featured:hover { border-color: var(--blue-600); box-shadow: 0 6px 24px rgba(9,38,57,.06); }
.blog-featured__title {
  margin: 0;
  font-weight: 300;
  font-size: clamp(26px,3.4vw,36px);
  line-height: 1.14;
  text-wrap: balance;
}
.blog-featured__excerpt {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--text-muted);
  max-width: 620px;
  text-wrap: pretty;
}
.blog-card__more { font-size: 14px; font-weight: 500; color: var(--blue-600); }

.blog-card {
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card-bg);
  padding: clamp(24px,4vw,32px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.blog-card:hover { border-color: var(--blue-600); box-shadow: 0 6px 24px rgba(9,38,57,.06); }
.blog-card__title {
  margin: 0;
  font-weight: 400;
  font-size: clamp(20px,2.6vw,26px);
  line-height: 1.25;
  text-wrap: balance;
}
.blog-card__excerpt {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--text-muted);
  text-wrap: pretty;
}

/* ---------- SUBSCRIBE BOX ---------- */
.subscribe-box {
  margin-top: 24px;
  border: 1px solid var(--blue-200);
  border-radius: 12px;
  background: var(--blue-50);
  padding: clamp(24px,4vw,34px);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.subscribe-box__title { font-size: 16px; font-weight: 600; }
.subscribe-box__row { display: flex; flex-wrap: wrap; gap: 10px; }
.subscribe-box__input {
  font-family: 'Urbanist', sans-serif;
  font-size: 14.5px;
  padding: 13px 18px;
  border: 1px solid var(--blue-200);
  border-radius: 99px;
  background: var(--card-bg);
  color: var(--text);
  flex: 1;
  min-width: 220px;
  outline: none;
}
.subscribe-box__input::placeholder { color: #9CA3AF; }
.subscribe-box__success { font-size: 14px; color: var(--blue-800); }

/* ---------- BLOG POST ---------- */
.post {
  max-width: 700px;
  margin: 0 auto;
  padding: clamp(48px,7vw,80px) clamp(20px,4vw,40px) 0;
}
.post__head { margin-bottom: clamp(28px,4vw,40px); }
.post__title {
  margin: 20px 0 0;
  font-weight: 300;
  font-size: clamp(32px,5vw,52px);
  line-height: 1.08;
  letter-spacing: -.01em;
  text-wrap: balance;
}
.post__byline {
  margin-top: 20px;
  font-family: 'Spline Sans Mono', monospace;
  font-size: 12.5px;
  color: var(--text-muted);
}
.post__body { font-size: 17px; line-height: 1.75; color: var(--text-legal); }
.post__body > p { margin: 0 0 22px; text-wrap: pretty; }
.post__body h2 {
  margin: 40px 0 0;
  font-weight: 300;
  font-size: 28px;
  line-height: 1.2;
  color: var(--text);
  text-wrap: balance;
}
.post__body h2 + p { margin-top: 16px; }
.post__body a { color: var(--blue-600); text-decoration: underline; text-underline-offset: 2px; }
.post__body strong, .post__body b { font-weight: 600; color: var(--text); }
.post__body ul {
  margin: 0 0 22px;
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.post__body li { line-height: 1.6; }
.post__body li::marker { color: var(--blue-400); }
.post__body blockquote {
  margin: 28px 0;
  padding: 6px 0 6px 24px;
  border-left: 3px solid var(--blue-200);
  color: var(--text);
  font-size: clamp(19px,2.4vw,23px);
  font-weight: 300;
  line-height: 1.4;
}
.post__body blockquote p { margin: 0; }

.post__more {
  max-width: 700px;
  margin: clamp(40px,6vw,64px) auto 0;
  padding: clamp(28px,4vw,40px) clamp(20px,4vw,40px) 0;
  border-top: 1px solid var(--border);
}
.post__more-label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--blue-600);
}
.post__more-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(240px,100%),1fr));
  gap: 16px;
  margin-top: 18px;
}
.post__more-card {
  text-decoration: none;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card-bg);
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color .18s ease;
}
.post__more-card:hover { border-color: var(--blue-600); }
.post__more-dir {
  font-family: 'Spline Sans Mono', monospace;
  font-size: 11.5px;
  color: var(--text-muted);
}
.post__more-cardtitle { font-size: 16px; font-weight: 600; color: var(--text); line-height: 1.3; }

.post__subscribe {
  max-width: 700px;
  margin: clamp(36px,5vw,48px) auto 0;
  padding: 0 clamp(20px,4vw,40px) clamp(56px,8vw,80px);
}

/* ---------- CTA BAND (blog post closer, hotline variant) ---------- */
.cta-band { background: var(--blue-800); color: #FFFFFF; }
.cta-band__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(48px,7vw,72px) clamp(20px,4vw,48px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.cta-band__eyebrow {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--blue-400);
}
.cta-band__title {
  margin: 18px 0 0;
  font-weight: 300;
  font-size: clamp(28px,3.6vw,40px);
  line-height: 1.1;
  color: #FFFFFF;
  text-wrap: balance;
}
.cta-band__phone {
  text-decoration: none;
  margin: clamp(18px,3vw,28px) 0 0;
  font-weight: 300;
  font-size: clamp(26px,5vw,44px);
  letter-spacing: .02em;
  color: #FFFFFF;
  border-bottom: 1px solid rgba(255,255,255,.35);
  padding-bottom: 6px;
  white-space: nowrap;
  transition: color .18s ease, border-color .18s ease;
}
.cta-band__phone:hover { color: var(--blue-200); border-color: var(--blue-200); }
.cta-band__desc {
  margin: 22px 0 0;
  max-width: 520px;
  font-size: clamp(14.5px,1.7vw,16px);
  line-height: 1.65;
  color: var(--blue-200);
  text-wrap: pretty;
}
.cta-band__desc b { color: #FFFFFF; font-weight: 600; }
.cta-band__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 28px; }

/* ---------- 404 ---------- */
.notfound {
  min-height: 100vh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(24px,4vw,48px);
}
.notfound__title {
  margin: 16px 0 0;
  font-weight: 300;
  font-size: clamp(40px,6vw,64px);
  line-height: 1.1;
}
.notfound__desc {
  margin: 16px 0 0;
  max-width: 480px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-muted);
}
.notfound__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 28px; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .chip__icon { animation: none; }
  .product__embed-spinner { animation: none; }
  html { scroll-behavior: auto; }
  /* Loader disabled entirely: no spin, no fade, no delay. */
  .pageloader { display: none; }
  .pageloader__spinner { animation: none; }
}