/* ============================================================
   Unwirelab, shared stylesheet

   Design system adopted from destilabs.com, measured from the live
   site rather than approximated:

     type      Poppins, 600 headings at -2% tracking
     ground    linear-gradient(#F8F7F4 → #FCFBF9 → #FFFFFF)
     ink       #282E3D headings · #5F6470 body
     accent    #A61698 magenta (eyebrows, numerals)
     action    #070716 primary @ 8px radius · #5603AD pill @ 9999px
     eyebrow   14px / 500 / 4.9px tracking / uppercase / magenta
     signature one phrase per page in the warm→magenta gradient

   Single source of truth for all pages.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap");

:root {
  --ground-1: #F8F7F4;
  --ground-2: #FCFBF9;
  --ground-3: #FFFFFF;

  --white:    #FFFFFF;
  --ink:      #282E3D;
  --body:     #5F6470;
  --body-dim: #8A8F9C;
  --line:     #E7E5E0;
  --line-soft:#F0EEEA;
  --wash:     #FAF9F6;

  --magenta:  #A61698;
  --magenta-soft: rgba(166, 22, 152, 0.07);
  --purple:   #5603AD;
  --purple-lit: #6A11C9;
  --dark:     #070716;
  --dark-lit: #1B1B33;

  --radius:    16px;
  --radius-sm: 8px;
  --pill:      9999px;
  --maxw:      1140px;
  --maxw-text: 44em;

  --shadow-sm: 0 1px 2px rgba(40, 46, 61, 0.04);
  --shadow:    0 4px 20px rgba(40, 46, 61, 0.06);
  --shadow-lg: 0 12px 40px rgba(40, 46, 61, 0.08);

  --font: "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
          Roboto, "Helvetica Neue", Arial, sans-serif;

  /* The signature gradient, lifted from the live site. Used for small
     decorative marks only. Its yellow-green head is near-invisible on a
     light ground. */
  --grad: linear-gradient(135deg, #DCED31 0%, #E4B747 14%, #EC835D 28%,
          #F35670 40%, #CF208D 63%, #A61698 76%, #8B1BA0 100%);

  /* Same gradient with the pale head cut off, for anything that has to be
     read. Every stop clears 3:1 on the near-white ground, which is the AA
     threshold for large text. DestiLabs gets away with the full ramp because
     it only ever applies it to two short words on one line. */
  --grad-text: linear-gradient(135deg, #F35670 0%, #CF208D 45%,
               #A61698 72%, #6A11C9 100%);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* the header is sticky, so anchor targets must clear it */
main[id], section[id] { scroll-margin-top: 92px; }

/* body scroll lock while the mobile menu is open */
html.nav-open, html.nav-open body { overflow: hidden; }

body {
  margin: 0;
  background: linear-gradient(var(--ground-1), var(--ground-2) 40%, var(--ground-3) 75%);
  background-attachment: fixed;
  color: var(--body);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

a { color: var(--purple); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible { outline: 2px solid var(--purple); outline-offset: 3px; border-radius: 4px; }

img { max-width: 100%; height: auto; display: block; }

.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;
}
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 99;
  background: var(--dark); color: var(--white);
  padding: 12px 18px; font-weight: 500; border-radius: 0 0 var(--radius-sm) 0;
}
.skip:focus { left: 0; text-decoration: none; }

/* ============================================================
   type
   ============================================================ */
h1, h2, h3 { color: var(--ink); margin: 0; font-weight: 600; }
h1 { font-size: clamp(2.05rem, 4.6vw, 3.15rem); line-height: 1.1;  letter-spacing: -0.02em; }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.25rem);  line-height: 1.16; letter-spacing: -0.02em; }
h3 { font-size: 1.1875rem; line-height: 1.35; letter-spacing: -0.015em; }

.grad {
  background: var(--grad-text);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

.eyebrow {
  font-size: 0.875rem; font-weight: 500; letter-spacing: 0.35em;
  text-transform: uppercase; color: var(--magenta);
  margin: 0 0 20px;
}

.lede { font-size: clamp(1.0625rem, 1.6vw, 1.1875rem); line-height: 1.5; color: var(--body); margin: 0; }
.section-note { color: var(--body); margin: 18px auto 0; }

/* section rhythm: centered headers, DestiLabs pattern */
.band { padding: 96px 0; }
.band-tint { background: var(--wash); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.head-center { text-align: center; max-width: 40em; margin: 0 auto; }
.head-center .section-note { max-width: var(--maxw-text); }
@media (max-width: 720px) { .band { padding: 64px 0; } }

/* ============================================================
   header
   ============================================================ */
header.site {
  position: sticky; top: 0; z-index: 30;
  background: rgba(252, 251, 249, 0.88);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line-soft);
}
.header-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 14px 24px;
  display: flex; align-items: center; gap: 24px;
}
.brand {
  font-size: 1.25rem; font-weight: 600; letter-spacing: -0.03em;
  color: var(--ink); margin-right: auto;
}
.brand:hover { text-decoration: none; }
.brand span {
  background: var(--grad-text);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.nav { display: flex; gap: 28px; align-items: center; }
.nav a { color: var(--body); font-size: 1rem; font-weight: 400; }
.nav a:hover { color: var(--ink); text-decoration: none; }
.nav a[aria-current="page"] { color: var(--ink); font-weight: 500; }
.nav .nav-cta { display: none; }

/* ---- mobile menu: a disclosure panel under the header. Without this the
       nav links were simply unreachable below 860px.

       The toggle button and the in-panel CTA both carry the `hidden` attribute
       in the markup, and the media queries below re-display them. Author rules
       outrank the UA `[hidden] { display: none }`, so the effect is the same as
       before, except that a stale or missing stylesheet now degrades to a clean
       desktop header instead of an unstyled grey button next to a duplicate
       "Book a call". Do not remove those attributes. ---- */
.nav-toggle { display: none; }

@media (max-width: 860px) {
  .header-inner { position: relative; gap: 14px; }
  .nav-toggle {
    display: grid; place-items: center; flex: none;
    width: 42px; height: 42px; padding: 0;
    background: var(--white); color: var(--ink);
    border: 1px solid var(--line); border-radius: var(--radius-sm);
    cursor: pointer;
  }
  .nav-toggle:hover { border-color: var(--ink); }
  .nav-toggle svg { width: 18px; height: 18px; display: block; }
  .nav-toggle .ico-close { display: none; }
  .nav-toggle[aria-expanded="true"] .ico-open { display: none; }
  .nav-toggle[aria-expanded="true"] .ico-close { display: block; }

  .nav {
    display: none;
    position: absolute; left: 24px; right: 24px; top: calc(100% + 10px);
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 8px;
    background: var(--white); border: 1px solid var(--line);
    border-radius: var(--radius); box-shadow: var(--shadow-lg);
  }
  .nav.open { display: flex; }
  .nav a {
    padding: 14px 14px; border-radius: var(--radius-sm);
    font-size: 1.0625rem; color: var(--ink);
  }
  .nav a + a { border-top: 1px solid var(--line-soft); }
  .nav a:hover { background: var(--wash); }
}

/* below this the brand, the CTA and the toggle stop fitting on one line,
   so the CTA moves into the menu panel where there is room for it.
   The selector is header-qualified to outrank `.btn { display: inline-flex }`,
   which is declared later in this file. */
@media (max-width: 460px) {
  header.site .header-cta { display: none; }
  .nav .nav-cta {
    display: block; margin-top: 6px; border-top: 0;
    background: var(--dark); color: var(--white); font-weight: 500;
    text-align: center;
  }
  .nav .nav-cta:hover { background: var(--dark-lit); }
}

/* ============================================================
   buttons
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: inherit; font-size: 1rem; font-weight: 500;
  padding: 12px 22px; border-radius: var(--radius-sm);
  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transition: background-color 0.18s ease, color 0.18s ease,
              border-color 0.18s ease, box-shadow 0.18s ease;
}
.btn:hover { text-decoration: none; }
.btn::after { content: "→"; font-size: 0.9375em; line-height: 1; }
.btn-plain::after { content: none; }

.btn-primary { background: var(--dark); color: var(--white); box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--dark-lit); box-shadow: var(--shadow); }

.btn-pill { background: var(--purple); color: var(--white); border-radius: var(--pill); font-size: 0.875rem; padding: 12px 20px; }
.btn-pill:hover { background: var(--purple-lit); }

.btn-outline { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-outline:hover { border-color: var(--ink); }

.btn-text { background: none; padding: 12px 4px; color: var(--purple); font-weight: 500; }
.btn-text:hover { color: var(--magenta); }

.btn-sm { font-size: 0.9375rem; padding: 10px 18px; }

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

/* ============================================================
   hero
   ============================================================ */
.hero { padding: 84px 0 72px; }
.hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: 56px; align-items: center;
}
@media (max-width: 940px) { .hero-grid { grid-template-columns: 1fr; gap: 40px; } }
.hero h1 { max-width: 16em; margin-bottom: 22px; }
.hero .lede { max-width: 34em; font-size: clamp(1.0625rem, 1.7vw, 1.1875rem); }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin: 32px 0 0; }
.hero-fine { margin: 18px 0 0; font-size: 0.9375rem; color: var(--body-dim); }
@media (max-width: 720px) { .hero { padding: 52px 0 48px; } }

.reveal { opacity: 0; transform: translateY(12px); animation: rise 0.6s cubic-bezier(0.16,1,0.3,1) forwards; }
.reveal-1 { animation-delay: 0.03s; }
.reveal-2 { animation-delay: 0.11s; }
.reveal-3 { animation-delay: 0.19s; }
.reveal-4 { animation-delay: 0.27s; }
.reveal-5 { animation-delay: 0.35s; }
@keyframes rise { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; animation: none; } }

/* ---- credential card: fills the slot where DestiLabs puts its artwork,
       with proof rather than decoration ---- */
.creds {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  padding: 8px 30px;
  /* the numerals differ in width, so the column is sized once here and shared
     by every row through subgrid: otherwise the labels sit on a ragged edge */
  display: grid; grid-template-columns: max-content minmax(0, 1fr);
}
.cred {
  padding: 26px 0; border-bottom: 1px solid var(--line-soft);
  grid-column: 1 / -1;
  display: grid; gap: 20px; align-items: baseline;
  grid-template-columns: max-content minmax(0, 1fr); /* fallback */
  grid-template-columns: subgrid;
}
.cred:last-child { border-bottom: 0; }
.cred-n {
  font-size: clamp(2rem, 3.6vw, 2.5rem); font-weight: 700;
  letter-spacing: -0.035em; line-height: 1; color: var(--ink);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.cred-n .unit {
  font-size: 0.5em; font-weight: 600; letter-spacing: -0.01em;
  background: var(--grad-text);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.cred-l { margin: 0; font-size: 0.9375rem; color: var(--body); line-height: 1.45; }
@media (max-width: 520px) {
  .creds { padding: 4px 22px; grid-template-columns: minmax(0, 1fr); }
  .cred { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 22px 0; }
}

/* ============================================================
   cards
   ============================================================ */
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 22px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 22px; }
@media (max-width: 940px) { .grid-3 { grid-template-columns: 1fr; } }
@media (max-width: 780px) { .grid-2 { grid-template-columns: 1fr; } }

/* section rhythm, in the stylesheet rather than inline style attributes:
   the CSP does not allow inline styles, so those silently did nothing */
.head-center + .grid-2,
.head-center + .grid-3 { margin-top: 52px; }
@media (max-width: 720px) { .head-center + .grid-2, .head-center + .grid-3 { margin-top: 36px; } }

.card {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 30px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.card:hover { box-shadow: var(--shadow); }
.card h3 { margin-bottom: 10px; }
.card p { margin: 0; }
.card-kicker {
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--magenta); margin: 0 0 12px;
}

/* ============================================================
   numbered list: the DestiLabs accordion pattern, static
   ============================================================ */
.numbered { margin: 52px auto 0; max-width: 62em; border-top: 1px solid var(--line); }
.numbered-item {
  display: grid; grid-template-columns: 3.25rem 1fr;
  gap: 8px 4px; padding: 30px 0; border-bottom: 1px solid var(--line);
}
.numbered-n { font-size: 0.875rem; font-weight: 700; color: var(--magenta); padding-top: 6px; }
.numbered-item h3 { font-size: clamp(1.25rem, 2.2vw, 1.5rem); margin-bottom: 10px; }
.numbered-item p { margin: 0; max-width: 40em; }
.numbered-item .when {
  font-size: 0.8125rem; font-weight: 500; color: var(--magenta);
  letter-spacing: 0.06em; text-transform: uppercase; margin: 0 0 10px;
}
@media (max-width: 560px) { .numbered-item { grid-template-columns: 1fr; gap: 6px; } }

.callout {
  margin: 34px auto 0; max-width: 62em; padding: 26px 30px;
  background: var(--magenta-soft); border: 1px solid rgba(166,22,152,0.16);
  border-radius: var(--radius);
}
.callout p { margin: 0; }
.callout strong { color: var(--ink); font-weight: 600; }
/* the 62em cap matches the .numbered list it sits under in the process section.
   Under a full-width card grid it has to match the grid's edges instead. */
.callout-full { max-width: none; }

/* ============================================================
   selected work
   ============================================================ */
.work { display: grid; gap: 22px; margin-top: 52px; }
.work-card {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 34px;
  box-shadow: var(--shadow-sm);
}
.work-meta {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--magenta); margin: 0 0 16px;
}
.work-meta .sep { color: var(--line); }
.work-card h3 { font-size: clamp(1.3125rem, 2.4vw, 1.625rem); margin-bottom: 16px; max-width: 26em; }
.work-card > p { margin: 0 0 18px; }
.work-card ul { margin: 0 0 22px; padding: 0; list-style: none; }
.work-card li { position: relative; padding-left: 24px; margin-bottom: 10px; }
.work-card li::before {
  content: ""; position: absolute; left: 0; top: 0.55em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--grad);
}
.work-card li strong { color: var(--ink); font-weight: 600; }

.result {
  margin: 0 0 20px; padding: 22px 24px;
  background: var(--wash); border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
}
.result-label {
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--body-dim); margin: 0 0 8px;
}
.result-value {
  font-size: clamp(1.5rem, 2.8vw, 1.875rem); font-weight: 700;
  letter-spacing: -0.03em; line-height: 1.15;
  background: var(--grad-text);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.result-body { margin: 12px 0 0; font-size: 0.9375rem; }
.hardpart { margin: 0; font-size: 0.9375rem; }
.hardpart strong { color: var(--ink); font-weight: 600; }

.footnote {
  margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--line-soft);
  font-size: 0.8125rem; color: var(--body-dim); line-height: 1.6;
}
.footnote a { color: var(--body-dim); text-decoration: underline; }

/* ============================================================
   comparison
   ============================================================ */
.compare {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--line); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; margin: 52px auto 0; max-width: 62em;
}
.compare-row { display: contents; }
.compare .cell { background: var(--white); padding: 20px 24px; font-size: 0.9375rem; }
.compare .head {
  background: var(--wash); font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
}
.compare .head.bad { color: var(--body-dim); }
.compare .head.good { color: var(--magenta); }
.compare .bad-cell { color: var(--body-dim); }
.compare .cell-tag { display: none; }

/* single column: the shared header row no longer lines up with anything, so
   each cell carries its own label and the pairs stay visually grouped */
@media (max-width: 640px) {
  .compare {
    display: flex; flex-direction: column; gap: 12px;
    background: none; border: 0; border-radius: 0; overflow: visible;
  }
  .compare .head { display: none; }
  /* each pair becomes its own two-part card, so it stays obvious which
     "with" belongs to which "without" */
  .compare-row {
    display: grid; grid-template-columns: 1fr; gap: 1px;
    background: var(--line); border: 1px solid var(--line);
    border-radius: var(--radius-sm); overflow: hidden;
  }
  .compare .cell-tag {
    display: block; margin-bottom: 6px;
    font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.16em;
    text-transform: uppercase;
  }
  .compare .bad-cell .cell-tag { color: var(--body-dim); }
  .compare .good-cell .cell-tag { color: var(--magenta); }
}

/* ============================================================
   FAQ
   ============================================================ */
.faq { margin: 52px auto 0; max-width: 56em; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
/* flex rather than an absolutely positioned marker, so the chevron stays
   aligned to the first line when a question wraps to two */
.faq summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 28px;
  padding: 24px 10px 24px 0;
  font-size: 1.0625rem; font-weight: 500; color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; margin-top: 7px;
  width: 9px; height: 9px; border-right: 2px solid var(--magenta);
  border-bottom: 2px solid var(--magenta); transform: rotate(45deg);
  transition: transform 0.2s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: 10px; }
.faq summary:hover { color: var(--magenta); }
.faq .answer { padding: 0 0 26px; max-width: var(--maxw-text); }
.faq .answer p { margin: 0 0 12px; }
.faq .answer p:last-child { margin: 0; }

/* ============================================================
   closing CTA
   ============================================================ */
.cta {
  text-align: center; padding: 68px 44px;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.cta h2 { margin-bottom: 18px; }
.cta p { max-width: var(--maxw-text); margin: 0 auto 30px; }
.cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.cta-fine { margin: 22px 0 0; font-size: 0.9375rem; color: var(--body-dim); }
@media (max-width: 620px) { .cta { padding: 44px 24px; } }

/* ============================================================
   footer
   ============================================================ */
footer.site {
  border-top: 1px solid var(--line); margin-top: 0;
  padding: 40px 0 52px; font-size: 0.9375rem; color: var(--body-dim);
  background: var(--wash);
}
.footer-inner { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
footer.site a { color: var(--body); }
footer.site nav { display: flex; gap: 20px; flex-wrap: wrap; }
@media (max-width: 640px) {
  .footer-inner { flex-direction: column; align-items: flex-start; gap: 16px; }
  footer.site nav { gap: 12px 20px; }
}

/* ============================================================
   prose: legal pages
   ============================================================ */
.prose { max-width: 42em; padding: 64px 0 0; }
.prose h1 { font-size: clamp(1.9rem, 4vw, 2.5rem); margin-bottom: 12px; }
.prose .updated { color: var(--body-dim); font-size: 0.875rem; margin: 0 0 40px; }
.prose h2 { font-size: 1.1875rem; margin: 40px 0 12px; }
.prose p, .prose li { color: var(--body); }
.prose ul { padding-left: 22px; }
.prose li { margin-bottom: 8px; }
.prose code { background: var(--wash); padding: 2px 6px; border-radius: 4px; font-size: 0.875em; }
.prose .notice {
  padding: 20px 24px; margin: 0 0 36px;
  background: var(--magenta-soft); border: 1px solid rgba(166,22,152,0.18);
  border-radius: var(--radius-sm); font-size: 0.9375rem;
}
.prose .notice strong { color: var(--magenta); font-weight: 600; }

/* ============================================================
   ROI calculator
   ============================================================ */
.calc {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.04fr);
  gap: 24px; margin: 52px 0 0; align-items: start;
}
@media (max-width: 920px) { .calc { grid-template-columns: 1fr; gap: 20px; } }

.panel {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 30px; box-shadow: var(--shadow-sm);
}
.panel-title {
  margin: 0 0 26px; font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--magenta);
}

.field { margin-bottom: 22px; }
.field:last-of-type { margin-bottom: 0; }
label { display: block; margin-bottom: 8px; font-size: 0.9375rem; font-weight: 500; color: var(--ink); }
.hint { display: block; font-weight: 400; color: var(--body-dim); font-size: 0.8125rem; margin-top: 4px; }

select, input[type="number"], input[type="email"] {
  width: 100%; padding: 12px 14px;
  background: var(--white); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-family: inherit; font-size: 1rem;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
input[type="number"] { font-variant-numeric: tabular-nums; }
select:hover, input:hover { border-color: var(--body-dim); }
select:focus, input:focus {
  border-color: var(--purple); outline: none;
  box-shadow: 0 0 0 3px rgba(86, 3, 173, 0.1);
}
select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='%235F6470' d='M6 8 0 1.4 1.4 0 6 4.6 10.6 0 12 1.4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px;
}
/* align on the inputs, not on the top of the labels: one label carries a hint
   line and the other may wrap, which otherwise leaves the two fields offset */
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: end; }
.row2 .field { margin-bottom: 0; }
@media (max-width: 470px) { .row2 { grid-template-columns: 1fr; row-gap: 22px; } }

.results {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 30px; box-shadow: var(--shadow);
}
.headline-stat { padding-bottom: 24px; border-bottom: 1px solid var(--line-soft); }
.headline-label {
  margin: 0 0 10px; font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--body-dim);
}
.headline-value {
  font-size: clamp(2.35rem, 6vw, 3.25rem); line-height: 1;
  font-weight: 700; letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums; word-break: break-word;
  background: var(--grad-text);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.headline-sub { margin: 12px 0 0; font-size: 0.9375rem; color: var(--body-dim); }

.stat-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--line-soft); border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm); overflow: hidden; margin: 24px 0 0;
}
@media (max-width: 410px) { .stat-grid { grid-template-columns: 1fr; } }
.stat { background: var(--wash); padding: 16px 18px; }
.stat-label {
  font-size: 0.75rem; font-weight: 500; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--body-dim); margin: 0 0 6px;
}
.stat-value {
  font-size: 1.3125rem; font-weight: 600; letter-spacing: -0.02em;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.stat-value small { font-size: 0.8125rem; font-weight: 400; color: var(--body-dim); }

.recover {
  margin: 24px 0 0; padding: 20px 22px;
  background: var(--magenta-soft); border: 1px solid rgba(166,22,152,0.16);
  border-radius: var(--radius-sm);
}
.recover-label {
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--magenta); margin: 0 0 8px;
}
.recover-value {
  font-size: 1.5rem; font-weight: 700; letter-spacing: -0.03em;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.recover-note { margin: 10px 0 0; font-size: 0.8125rem; color: var(--body); }

details.math { margin: 24px 0 0; border-top: 1px solid var(--line-soft); padding-top: 20px; }
details.math summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: 9px;
  font-size: 0.9375rem; font-weight: 500; color: var(--purple);
}
details.math summary::-webkit-details-marker { display: none; }
details.math summary::before { content: "+"; font-weight: 600; }
details.math[open] summary::before { content: "\2212"; }
details.math summary:hover { color: var(--magenta); }
.math-body {
  margin: 16px 0 0; padding: 18px; background: var(--wash);
  border: 1px solid var(--line-soft); border-radius: var(--radius-sm);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.8125rem; line-height: 1.9; color: var(--body);
  white-space: pre-wrap; overflow-x: auto;
}
.math-note { margin: 14px 0 0; font-size: 0.8125rem; color: var(--body-dim); line-height: 1.6; }

/* ============================================================
   narrow screens: 30px+ of padding inside a 320px viewport leaves
   too little room for the content itself
   ============================================================ */
@media (max-width: 560px) {
  .wrap { padding: 0 18px; }
  .header-inner { padding: 12px 18px; }
  .nav { left: 18px; right: 18px; }
  .card, .work-card, .panel, .results { padding: 24px 20px; }
  .creds { padding: 4px 20px; }
  .result { padding: 18px 18px; }
  .callout { padding: 22px 20px; }
  .compare .cell { padding: 18px 20px; }
  .faq summary { padding: 20px 6px 20px 0; gap: 18px; }
  .math-body { padding: 14px; }
}

/* ============================================================
   the gradient text trick relies on a painted background, which is
   discarded in forced-colors mode and by most print pipelines
   ============================================================ */
@media (forced-colors: active) {
  .grad, .brand span, .cred-n .unit, .result-value, .headline-value {
    background: none; -webkit-text-fill-color: currentColor; color: CanvasText;
  }
  .card, .work-card, .panel, .results, .creds, .callout, .cta { border-color: CanvasText; }
}

@media print {
  header.site, .nav-toggle, .hero-actions, .cta-actions, .skip { display: none; }
  body { background: var(--white); color: #000; }
  .band, .hero { padding: 24px 0; }
  .band-tint { background: none; }
  .card, .work-card, .cta, .creds, .compare { box-shadow: none; break-inside: avoid; }
  .grad, .cred-n .unit, .result-value, .headline-value {
    background: none; -webkit-text-fill-color: currentColor; color: #000;
  }
  .faq details { break-inside: avoid; }
  .faq .answer { display: block; }
  a { color: #000; }
}