/* ============================================================
   BEYOND EVERMORE — SITE STYLESHEET
   Extracted from index.html's inline <style> block (2026-09-12)
   so every page (index + the 5 standalone calculator pages)
   can share one cached file instead of repeating ~29KB inline.
   ============================================================ */

/* ============================================================
   SELF-HOSTED WEBFONTS
   Variable fonts: one file covers every weight the page uses.
   font-display:swap paints the fallback immediately and swaps
   when the real face lands, so text is never invisible.
   ============================================================ */
@font-face {
  font-family:'Playfair Display';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('/playfair-var.woff2') format('woff2');
}
@font-face {
  font-family:'Playfair Display';
  font-style:italic;
  font-weight:400;
  font-display:swap;
  src:url('/playfair-italic.woff2') format('woff2');
}
@font-face {
  font-family:'Inter';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('/inter-var.woff2') format('woff2');
}
/* ============================================================ 1. DESIGN TOKENS ============================================================ */ :root {
  /* Brand palette — exact values */ --sage:#1D9E75;
  /* Primary accent, CTA buttons, active elements */ --deep:#085041;
  /* Deep forest, primary H1/H2 headings, text logo */ --mid:#0F6E56;
  /* Mid green, secondary accents, hover states */ --mist:#E1F5EE;
  /* Pale green wash, calculator box backgrounds */ --mint:#9FE1CB;
  /* Light mint pop accent, subtle badges */ --linen:#F7F3EC;
  /* Warm off-white page background ground */ --ink:#1A1A18;
  /* Near-black main body text */ --light-ink:#3D3D3A;
  /* Secondary text, input labels, tooltips */ --stone:#888780;
  /* Muted grey, footers, copy guidelines */ /* Derived surfaces */ --paper:#FFFDFA;
  --hairline:rgba(8,80,65,.14);
  --hairline-soft:rgba(8,80,65,.08);
  /* Type */ --serif:'Playfair Display', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --sans:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  /* Rhythm */ --section-y:clamp(4.5rem, 9vw, 8rem);
  --gutter:clamp(1.25rem, 5vw, 3rem);
  --maxw:1180px;
  --readw:64ch;
  --radius:4px;
  --ease:cubic-bezier(.22,.61,.36,1);
}
/* ============================================================ 2. RESET ============================================================ */ *,*::before,*::after {
  box-sizing:border-box;
}
html {
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}
body {
  margin:0;
  background:var(--linen);
  color:var(--ink);
  font-family:var(--sans);
  font-size:1.0625rem;
  font-weight:400;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  /* NOTE: no overflow-x:hidden here. Setting it on <body> forces overflow-y to compute as `auto`, which makes body its own scroll container — and because its content fits exactly, it swallows every anchor jump and scrollIntoView on the page. Verified there is no horizontal overflow to hide at any viewport. */
}
img,svg {
  max-width:100%;
  display:block;
}
h1,h2,h3,h4 {
  font-family:var(--serif);
  color:var(--deep);
  font-weight:400;
  line-height:1.14;
  letter-spacing:-.012em;
  margin:0 0 .5em;
}
p {
  margin:0 0 1.15em;
}
a {
  color:var(--mid);
  text-decoration:none;
}
button,input,select {
  font:inherit;
  color:inherit;
}
ul {
  margin:0;
  padding:0;
  list-style:none;
}
:focus-visible {
  outline:2px solid var(--sage);
  outline-offset:3px;
  border-radius:2px;
}
@media (prefers-reduced-motion:reduce) {
  * {
    animation-duration:.01ms !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}
/* ============================================================ 3. LAYOUT PRIMITIVES ============================================================ */ .wrap {
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.section {
  padding-block:var(--section-y);
}
/* Keep anchored headings clear of the sticky header */ section[id],main[id] {
  scroll-margin-top:112px;
}
.section--tint {
  background:var(--paper);
  border-block:1px solid var(--hairline-soft);
}
.eyebrow {
  font-family:var(--sans);
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--mid);
  margin:0 0 1.15rem;
}
.lede {
  font-size:clamp(1.0625rem,1.9vw,1.1875rem);
  color:var(--light-ink);
  max-width:var(--readw);
  line-height:1.8;
}
.center {
  text-align:center;
}
.center .lede {
  margin-inline:auto;
}
/* Editorial divider: hairline with a small diamond */ .rule {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1rem;
  margin:2.75rem auto;
  max-width:220px;
  color:var(--mint);
}
.rule::before,.rule::after {
  content:"";
  flex:1;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--mint),transparent);
}
.rule span {
  width:7px;
  height:7px;
  transform:rotate(45deg);
  background:var(--sage);
  opacity:.5;
  flex:none;
}
/* ============================================================ 4. BUTTONS ============================================================ */ .btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.6rem;
  font-family:var(--sans);
  font-size:.9375rem;
  font-weight:500;
  letter-spacing:.02em;
  padding:1.0625rem 2.375rem;
  border:1px solid transparent;
  border-radius:var(--radius);
  cursor:pointer;
  text-align:center;
  white-space:nowrap;
  transition:background-color .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
}
.btn--primary {
  background:var(--sage);
  color:#fff;
  box-shadow:0 1px 2px rgba(8,80,65,.14);
}
.btn--primary:hover,.btn--primary:focus-visible {
  background:var(--mid);
  transform:translateY(-2px);
  box-shadow:0 10px 26px -12px rgba(8,80,65,.55);
}
.btn--primary:active {
  transform:translateY(0);
}
.btn--mint {
  background:var(--mint);
  color:var(--deep);
  /* 6.31:1 — the only high-contrast pairing of these two */ box-shadow:0 1px 2px rgba(0,0,0,.12);
}
.btn--mint:hover,.btn--mint:focus-visible {
  background:#B8ECDA;
  transform:translateY(-2px);
  box-shadow:0 10px 24px -12px rgba(0,0,0,.45);
}
.btn--mint:active {
  transform:translateY(0);
}
.btn--ghost {
  background:transparent;
  color:var(--deep);
  border-color:var(--hairline);
}
.btn--ghost:hover,.btn--ghost:focus-visible {
  border-color:var(--sage);
  color:var(--mid);
  background:rgba(225,245,238,.5);
}
.btn--sm {
  padding:.75rem 1.5rem;
  font-size:.8125rem;
}
.btn--lg {
  padding:1.1875rem 2.875rem;
  font-size:1rem;
}
.btn--block {
  display:flex;
  width:100%;
}
/* ============================================================ 5. HEADER ============================================================ */ .site-header {
  position:sticky;
  top:0;
  z-index:60;
  background:rgba(8,80,65,.95);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid rgba(159,225,203,.18);
}
.site-header__inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
  min-height:92px;
}
.logo {
  font-family:var(--serif);
  font-size:clamp(1.1875rem,2.8vw,1.4375rem);
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--mint);
  /* 6.31:1 on deep */ white-space:nowrap;
}
.logo:hover {
  color:var(--linen);
}
/* Monogram lockup */ .logo {
  display:inline-flex;
  align-items:center;
  gap:.75rem;
}
.logo__mark {
  width:66px;
  height:66px;
  flex:none;
  display:block;
  transition:opacity .3s var(--ease);
}
.logo:hover .logo__mark {
  opacity:.82;
}
.site-footer .logo {
  gap:.875rem;
  font-size:clamp(1.25rem,3vw,1.5rem);
}
.site-footer .logo__mark {
  width:84px;
  height:84px;
}
/* On narrow screens the header CTA shortens so the logo can stay full size */ .cta-short {
  display:none;
}
@media (max-width:400px) {
  /* iPhone SE and similar: the footer wordmark alone is wider than the screen */ .site-footer .logo {
    font-size:1rem;
    gap:.5rem;
  }
  .site-footer .logo__mark {
    width:38px;
    height:38px;
  }
}
@media (max-width:560px) {
  .cta-full {
    display:none;
  }
  .cta-short {
    display:inline;
  }
  .site-header__inner {
    gap:.875rem;
  }
  /* Phone: drop the wordmark from the header so the monogram stays large and legible. The full name is in the hero immediately below. */ .site-header .logo span {
    display:none;
  }
  .site-header .logo__mark {
    width:58px;
    height:58px;
  }
  .site-footer .logo__mark {
    width:70px;
    height:70px;
  }
}
.site-nav {
  display:flex;
  align-items:center;
  gap:2.25rem;
}
.site-nav__links {
  display:flex;
  align-items:center;
  gap:2.25rem;
}
.site-nav__links a {
  font-size:.875rem;
  font-weight:400;
  color:var(--mint);
  /* 6.31:1 on deep */ letter-spacing:.03em;
  white-space:nowrap;
  position:relative;
  padding-block:.25rem;
  transition:color .3s var(--ease);
}
.site-nav__links a::after {
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  height:1px;
  background:var(--mint);
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .4s var(--ease);
}
.site-nav__links a:hover {
  color:var(--linen);
}
.site-nav__links a:hover::after {
  transform:scaleX(1);
  transform-origin:left;
}
@media (max-width:970px) {
  /* Measured with nowrap: logo + wordmark + nav + CTA need ~975px on one line. Below that the nav is dropped rather than allowed to wrap — which includes every iPad in portrait. Landscape keeps it. */ .site-nav__links {
    display:none;
  }
}
/* ============================================================ 6. HERO ============================================================ */ .hero {
  position:relative;
  padding-block:clamp(4.5rem,11vw,9rem) clamp(4rem,9vw,7rem);
  text-align:center;
  overflow:hidden;
}
.hero::before {
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(70% 55% at 50% 0%, var(--mist) 0%, rgba(225,245,238,0) 68%), radial-gradient(40% 40% at 88% 82%, rgba(159,225,203,.28) 0%, rgba(159,225,203,0) 70%);
  pointer-events:none;
}
.hero .wrap {
  position:relative;
}
/* The header wordmark is hidden on phones so the monogram can stay large, which means the brand name never appears above the fold there. This is where it lands instead — small, letterspaced, quiet. An eyebrow, not a headline. */ .hero__wordmark {
  font-family:var(--sans);
  font-size:clamp(.6875rem,1.6vw,.8125rem);
  font-weight:600;
  letter-spacing:.42em;
  text-transform:uppercase;
  color:var(--mid);
  margin:0 0 1.75rem;
  padding-left:.42em;
  /* optical: letter-spacing pads the right only */
}
.hero__badge {
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  background:var(--mint);
  color:var(--deep);
  font-size:.6875rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  padding:.4375rem 1rem;
  border-radius:100px;
  margin-bottom:2rem;
}
.hero h1 {
  font-size:clamp(2.5rem,6.4vw,4.5rem);
  line-height:1.06;
  max-width:16ch;
  margin-inline:auto;
  margin-bottom:1.75rem;
}
.hero h1 em {
  font-style:italic;
  color:var(--mid);
}
.hero__sub {
  font-size:clamp(1.0625rem,2.1vw,1.25rem);
  color:var(--light-ink);
  max-width:60ch;
  margin:0 auto 2.75rem;
  line-height:1.78;
}
.hero__cta-row {
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
  justify-content:center;
  align-items:center;
}
.hero__reassure {
  margin-top:1.75rem;
  font-size:.8125rem;
  color:var(--stone);
  letter-spacing:.04em;
}
/* ============================================================ 7. VALUE ANCHOR ============================================================ */ .anchor__grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(2.5rem,6vw,5.5rem);
  align-items:start;
}
@media (max-width:880px) {
  .anchor__grid {
    grid-template-columns:1fr;
  }
}
.anchor h2 {
  font-size:clamp(1.875rem,4.2vw,2.875rem);
}
.compare {
  background:var(--paper);
  border:1px solid var(--hairline);
  border-radius:var(--radius);
  padding:clamp(1.75rem,4vw,2.5rem);
}
.compare__title {
  font-family:var(--sans);
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--stone);
  margin-bottom:1.5rem;
}
.compare__row {
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:1.25rem;
  padding-block:1rem;
  border-bottom:1px solid var(--hairline-soft);
}
.compare__row:last-of-type {
  border-bottom:0;
}
.compare__label {
  font-size:.9375rem;
  color:var(--light-ink);
}
.compare__price {
  font-family:var(--serif);
  font-size:1.125rem;
  color:var(--stone);
  white-space:nowrap;
  text-decoration:line-through;
  text-decoration-color:rgba(136,135,128,.5);
}
.compare__total {
  margin-top:1.5rem;
  padding:1.5rem;
  background:var(--mist);
  border-radius:var(--radius);
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:1rem;
}
.compare__total .compare__label {
  color:var(--deep);
  font-weight:600;
  font-size:1rem;
}
.compare__total .compare__price {
  font-size:2rem;
  color:var(--deep);
  text-decoration:none;
  font-weight:500;
}
.anchor__note {
  margin-top:1.25rem;
  font-size:.8125rem;
  color:var(--stone);
  line-height:1.65;
}
.checks {
  margin:1.75rem 0 0;
}
.checks li {
  position:relative;
  padding-left:1.9rem;
  margin-bottom:.85rem;
  color:var(--light-ink);
  font-size:.9875rem;
}
.checks li::before {
  content:"";
  position:absolute;
  left:0;
  top:.62em;
  width:9px;
  height:9px;
  background:var(--sage);
  transform:rotate(45deg);
  border-radius:1px;
}
.checks strong {
  color:var(--deep);
  font-weight:600;
}
/* ============================================================ 8. PILLAR CARDS ============================================================ */ .pillars__head {
  max-width:60ch;
  margin:0 auto clamp(3rem,6vw,4.5rem);
}
.pillars__head h2 {
  font-size:clamp(1.875rem,4.4vw,3rem);
}
.card-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  /* three pillars across */ gap:clamp(1.25rem,2.6vw,1.875rem);
}
@media (max-width:1000px) {
  .card-grid {
    grid-template-columns:1fr;
    max-width:560px;
    margin-inline:auto;
  }
}
.card {
  background:var(--paper);
  border:1px solid var(--hairline);
  border-radius:var(--radius);
  padding:clamp(1.875rem,3.6vw,2.625rem);
  display:flex;
  flex-direction:column;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
}
.card:hover {
  transform:translateY(-5px);
  border-color:rgba(29,158,117,.4);
  box-shadow:0 22px 48px -30px rgba(8,80,65,.42);
}
.card__num {
  font-family:var(--serif);
  font-style:italic;
  font-size:.9375rem;
  color:var(--sage);
  letter-spacing:.06em;
  margin-bottom:1.125rem;
}
.card h3 {
  font-size:1.375rem;
  line-height:1.25;
  margin-bottom:.875rem;
}
.card p {
  font-size:.9375rem;
  color:var(--light-ink);
  line-height:1.72;
  margin-bottom:1.25rem;
}
.card__list {
  margin-top:auto;
  padding-top:1.25rem;
  border-top:1px solid var(--hairline-soft);
}
.card__list li {
  font-size:.8375rem;
  color:var(--stone);
  padding-left:1.1rem;
  position:relative;
  margin-bottom:.5rem;
  line-height:1.6;
}
.card__list li::before {
  content:"—";
  position:absolute;
  left:0;
  color:var(--mint);
}
.tag {
  display:inline-block;
  align-self:flex-start;
  /* stop the flex column stretching the badge full width */ background:var(--mist);
  color:var(--mid);
  font-size:.6875rem;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  padding:.3125rem .6875rem;
  border-radius:100px;
  margin-bottom:1rem;
}
/* ============================================================ 8b. THE QR KIT ============================================================ */ .qr-kit__head {
  max-width:62ch;
  margin:0 auto clamp(3rem,6vw,4rem);
}
.qr-kit__head h2 {
  font-size:clamp(1.875rem,4.4vw,3rem);
}
.qr-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:var(--hairline);
  border:1px solid var(--hairline);
  border-radius:var(--radius);
  overflow:hidden;
}
@media (max-width:900px) {
  .qr-grid {
    grid-template-columns:repeat(2,1fr);
  }
}
@media (max-width:560px) {
  .qr-grid {
    grid-template-columns:1fr;
  }
}
.qr-item {
  background:var(--paper);
  padding:clamp(1.5rem,3vw,2.125rem);
  transition:background-color .4s var(--ease);
}
.qr-item:hover {
  background:var(--mist);
}
.qr-item__icon {
  width:34px;
  height:34px;
  margin-bottom:1.125rem;
  color:var(--sage);
}
.qr-item h3 {
  font-size:1.0625rem;
  font-family:var(--sans);
  font-weight:600;
  letter-spacing:.005em;
  color:var(--deep);
  margin-bottom:.5rem;
  line-height:1.35;
}
.qr-item p {
  font-size:.875rem;
  color:var(--light-ink);
  line-height:1.68;
  margin:0;
}
.qr-kit__foot {
  margin-top:2.5rem;
  text-align:center;
  font-size:.9375rem;
  color:var(--light-ink);
  max-width:60ch;
  margin-inline:auto;
}
.qr-kit__foot strong {
  color:var(--deep);
  font-weight:600;
}
/* QR generator tool (inside the toolkit tabs) */ .qr-preview {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.qr-canvas-frame {
  background:#fff;
  padding:1.25rem;
  border-radius:var(--radius);
  border:1px solid rgba(8,80,65,.12);
  line-height:0;
  max-width:100%;
}
#qr-canvas {
  width:230px;
  height:230px;
  max-width:100%;
  image-rendering:pixelated;
}
.qr-caption {
  font-family:var(--serif);
  font-size:1rem;
  color:var(--deep);
  margin-top:1rem;
  min-height:1.5em;
  word-break:break-word;
}
.qr-dest {
  font-size:.75rem;
  color:var(--stone);
  margin:.5rem 0 0;
  word-break:break-all;
  max-width:34ch;
  line-height:1.5;
}
.qr-dest strong {
  color:var(--mid);
  font-weight:600;
}
.qr-actions {
  display:flex;
  gap:.625rem;
  flex-wrap:wrap;
  justify-content:center;
  margin-top:1.5rem;
}
.qr-note {
  font-size:.75rem;
  color:var(--stone);
  margin-top:1.125rem;
  line-height:1.6;
  max-width:34ch;
}
.swatch-row {
  display:flex;
  gap:.5rem;
  flex-wrap:wrap;
}
.swatch {
  width:36px;
  height:36px;
  border-radius:var(--radius);
  border:1px solid var(--hairline);
  cursor:pointer;
  padding:0;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.swatch[aria-pressed="true"] {
  box-shadow:0 0 0 2px var(--paper), 0 0 0 4px var(--sage);
}
.swatch:hover {
  transform:translateY(-2px);
}
/* ============================================================ 9. CALCULATOR SUITE ============================================================ */ .toolkit__head {
  max-width:62ch;
  margin:0 auto clamp(2.5rem,5vw,3.5rem);
}
.toolkit__head h2 {
  font-size:clamp(1.875rem,4.4vw,3rem);
}
.tabs {
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  justify-content:center;
  margin-bottom:2.5rem;
}
.tab {
  background:transparent;
  border:1px solid var(--hairline);
  border-radius:100px;
  padding:.75rem 1.375rem;
  font-size:.8375rem;
  font-weight:500;
  color:var(--light-ink);
  cursor:pointer;
  white-space:nowrap;
  transition:all .32s var(--ease);
}
.tab:hover {
  border-color:var(--sage);
  color:var(--mid);
}
.tab[aria-selected="true"] {
  background:var(--sage);
  border-color:var(--sage);
  color:#fff;
}
.panel {
  background:var(--paper);
  border:1px solid var(--hairline);
  border-radius:var(--radius);
  overflow:hidden;
}
.panel[hidden] {
  display:none !important;
}
.panel__inner {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
}
@media (max-width:900px) {
  .panel__inner {
    grid-template-columns:1fr;
  }
}
.panel__form {
  padding:clamp(1.75rem,4vw,3rem);
}
.panel__form h3 {
  font-size:1.5rem;
  margin-bottom:.6rem;
}
.panel__form > p {
  font-size:.9375rem;
  color:var(--light-ink);
  margin-bottom:2rem;
}
.field {
  margin-bottom:1.5rem;
}
.field label {
  display:block;
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--light-ink);
  margin-bottom:.5625rem;
}
.field input[type="number"], .field input[type="text"], .field input[type="url"], .field select {
  width:100%;
  padding:.875rem 1rem;
  background:var(--linen);
  border:1px solid var(--hairline);
  border-radius:var(--radius);
  font-size:1rem;
  color:var(--ink);
  transition:border-color .3s var(--ease), background-color .3s var(--ease);
  -webkit-appearance:none;
  appearance:none;
}
.field select {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%230F6E56' stroke-width='1.6' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 1rem center;
  padding-right:2.5rem;
}
.field input:focus,.field select:focus {
  border-color:var(--sage);
  background:#fff;
  outline:none;
}
.field input:focus-visible,.field select:focus-visible {
  outline:2px solid var(--sage);
  outline-offset:1px;
}
.field__hint {
  font-size:.75rem;
  color:var(--stone);
  margin-top:.4375rem;
  line-height:1.5;
}
/* Range slider */ .field input[type="range"] {
  width:100%;
  -webkit-appearance:none;
  appearance:none;
  background:transparent;
  padding:0;
  margin:.75rem 0 .25rem;
}
.field input[type="range"]::-webkit-slider-runnable-track {
  height:3px;
  background:var(--mint);
  border-radius:3px;
}
.field input[type="range"]::-moz-range-track {
  height:3px;
  background:var(--mint);
  border-radius:3px;
}
.field input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance:none;
  appearance:none;
  width:20px;
  height:20px;
  margin-top:-8.5px;
  background:var(--sage);
  border:3px solid var(--paper);
  border-radius:50%;
  cursor:pointer;
  box-shadow:0 1px 4px rgba(8,80,65,.3);
}
.field input[type="range"]::-moz-range-thumb {
  width:14px;
  height:14px;
  background:var(--sage);
  border:3px solid var(--paper);
  border-radius:50%;
  cursor:pointer;
}
.range-value {
  font-family:var(--serif);
  font-size:1.125rem;
  color:var(--deep);
}
/* Results panel — --mist wash */ .results {
  background:var(--mist);
  padding:clamp(1.75rem,4vw,3rem);
  display:flex;
  flex-direction:column;
  justify-content:center;
  border-left:1px solid var(--hairline-soft);
}
@media (max-width:900px) {
  .results {
    border-left:0;
    border-top:1px solid var(--hairline-soft);
  }
}
.results__title {
  font-family:var(--sans);
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--mid);
  margin-bottom:1.5rem;
}
.result-row {
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:1rem;
  padding-block:.9375rem;
  border-bottom:1px solid rgba(8,80,65,.1);
}
.result-row:last-child {
  border-bottom:0;
}
.result-row__label {
  font-size:.9rem;
  color:var(--light-ink);
  line-height:1.45;
}
.result-row__value {
  font-family:var(--serif);
  font-size:1.5rem;
  font-weight:500;
  color:var(--deep);
  white-space:nowrap;
}
.result-row--hero {
  background:rgba(255,255,255,.62);
  border-radius:var(--radius);
  padding:1.25rem 1.375rem;
  margin-bottom:1rem;
  border-bottom:0;
}
.result-row--hero .result-row__value {
  font-size:2rem;
}
.result-row--sub {
  padding-block:.6875rem;
}
.result-row--sub .result-row__value {
  font-size:1.125rem;
  color:var(--mid);
}
.result-error {
  color:#8A2F1E;
  font-size:.875rem;
  background:rgba(255,255,255,.7);
  border-left:2px solid #8A2F1E;
  padding:.875rem 1rem;
  border-radius:2px;
}
.pivot-hook {
  margin-top:1.75rem;
  padding-top:1.5rem;
  border-top:1px solid rgba(8,80,65,.14);
  font-size:.875rem;
  line-height:1.68;
  color:var(--mid);
}
.pivot-hook strong {
  color:var(--deep);
  font-weight:600;
}
.pivot-hook a {
  display:inline-block;
  margin-top:.875rem;
  font-weight:600;
  font-size:.8125rem;
  letter-spacing:.05em;
  color:var(--deep);
  border-bottom:1px solid var(--sage);
  padding-bottom:2px;
  transition:color .3s var(--ease);
}
.pivot-hook a:hover {
  color:var(--sage);
}
/* ============================================================ 10. PRICING ============================================================ */ .pricing {
  position:relative;
  overflow:hidden;
}
.pricing::before {
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(60% 60% at 50% 40%, var(--mist) 0%, rgba(225,245,238,0) 72%);
  pointer-events:none;
}
.pricing .wrap {
  position:relative;
}
.price-card {
  max-width:600px;
  margin-inline:auto;
  background:var(--paper);
  border:1px solid var(--hairline);
  border-radius:var(--radius);
  padding:clamp(2.25rem,5.5vw,4rem);
  text-align:center;
  box-shadow:0 30px 70px -50px rgba(8,80,65,.5);
}
.price-card h2 {
  font-size:clamp(1.75rem,4vw,2.5rem);
  margin-bottom:.75rem;
}
.price-card__amount {
  font-family:var(--serif);
  font-size:clamp(3.75rem,10vw,5.5rem);
  line-height:1;
  color:var(--deep);
  margin:1.75rem 0 .375rem;
  font-weight:500;
}
.price-card__amount sup {
  font-size:.36em;
  vertical-align:super;
  margin-right:.1em;
  color:var(--mid);
}
.price-card__terms {
  font-size:.78rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--stone);
  margin-bottom:2.25rem;
}
.price-card__list {
  text-align:left;
  max-width:400px;
  margin:0 auto 2.5rem;
}
.price-card__list li {
  position:relative;
  padding-left:1.9rem;
  margin-bottom:.875rem;
  font-size:.9375rem;
  color:var(--light-ink);
}
.price-card__list li::before {
  content:"";
  position:absolute;
  left:.125rem;
  top:.6em;
  width:8px;
  height:8px;
  background:var(--sage);
  transform:rotate(45deg);
}
.price-card__fine {
  margin-top:1.5rem;
  font-size:.78rem;
  color:var(--stone);
  line-height:1.65;
}
/* Pre-purchase requirements disclosure */ .requires {
  text-align:left;
  background:var(--mist);
  border-radius:var(--radius);
  padding:1.25rem 1.375rem;
  margin:0 0 1.75rem;
}
.requires__title {
  font-family:var(--sans);
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--mid);
  margin:0 0 .625rem;
}
.requires p {
  font-size:.8125rem;
  color:var(--light-ink);
  line-height:1.7;
  margin:0;
}
.requires strong {
  color:var(--deep);
  font-weight:600;
}
/* Waitlist form */ .signup {
  margin:0 auto;
  max-width:440px;
}
.signup__row {
  display:flex;
  gap:.5rem;
  flex-wrap:wrap;
}
.signup input[type="email"] {
  flex:1 1 220px;
  padding:1.0625rem 1.125rem;
  background:var(--linen);
  border:1px solid var(--hairline);
  border-radius:var(--radius);
  font-size:1rem;
  color:var(--ink);
  transition:border-color .3s var(--ease),background-color .3s var(--ease);
}
.signup input[type="email"]:focus {
  border-color:var(--sage);
  background:#fff;
  outline:none;
}
.signup input[type="email"]:focus-visible {
  outline:2px solid var(--sage);
  outline-offset:1px;
}
.signup__trap {
  position:absolute!important;
  left:-9999px!important;
  width:1px!important;
  height:1px!important;
  opacity:0!important;
}
.signup__note {
  margin:.875rem 0 0;
  font-size:.78rem;
  color:var(--stone);
  line-height:1.6;
  text-align:center;
}
.signup__msg {
  margin:1rem 0 0;
  font-size:.9375rem;
  line-height:1.6;
  text-align:center;
  color:var(--deep);
}
.signup__msg--err {
  color:#8A2F1E;
}
.signup[hidden] {
  display:none !important;
}
.hero .signup {
  margin-top:.5rem;
}
.hero .signup__row {
  justify-content:center;
}
/* ============================================================ 11. FOOTER ============================================================ */ .site-footer {
  background:var(--deep);
  border-top:0;
  padding-block:clamp(3.5rem,7vw,5rem);
  text-align:center;
}
.site-footer .logo {
  display:inline-flex;
  align-items:center;
  margin-bottom:0;
}
.footer-email {
  margin:1.125rem 0 1.75rem;
  font-size:.9375rem;
  letter-spacing:.02em;
}
.footer-email a {
  color:var(--mint);
  text-decoration:none;
  border-bottom:1px solid rgba(159,225,203,.35);
  padding-bottom:2px;
  transition:color .3s var(--ease), border-color .3s var(--ease);
}
.footer-email a:hover {
  color:var(--linen);
  border-color:var(--linen);
}
.footer-nav {
  display:flex;
  flex-wrap:wrap;
  gap:1.75rem;
  justify-content:center;
  margin-bottom:2rem;
}
.footer-nav a {
  font-size:.8125rem;
  color:var(--mint);
  /* 6.31:1 on deep */ letter-spacing:.04em;
  transition:color .3s var(--ease);
}
.footer-nav a:hover {
  color:var(--linen);
}
.site-footer p {
  font-size:.75rem;
  color:var(--mint);
  line-height:1.75;
  max-width:62ch;
  margin-inline:auto;
}
/* ============================================================ 12. SCROLL REVEAL ============================================================ */ .reveal {
  opacity:0;
  transform:translateY(18px);
  transition:opacity .85s var(--ease), transform .85s var(--ease);
}
.reveal.is-visible {
  opacity:1;
  transform:none;
}
@media (prefers-reduced-motion:reduce) {
  .reveal {
    opacity:1;
    transform:none;
  }
}
/* Screen-reader only */ .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-link {
  position:absolute;
  left:-9999px;
  top:0;
  background:var(--deep);
  color:#fff;
  padding:.75rem 1.25rem;
  z-index:100;
}
.skip-link:focus {
  left:0;
}
.logo__text{display:flex;flex-direction:column;line-height:1.15;white-space:normal;min-width:0}
.logo__tagline{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;font-size:.625rem;font-weight:400;letter-spacing:.08em;text-transform:uppercase;color:rgba(159,225,203,.65)}
.faq__head h2{font-size:clamp(1.875rem,4.4vw,3rem);}
.faq__head{max-width:62ch;margin:0 auto clamp(2.5rem,5vw,3.5rem);}
.faq__list{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:.75rem;}
.faq__item{background:var(--paper);border:1px solid var(--hairline);border-radius:var(--radius);}
.faq__item summary{cursor:pointer;list-style:none;font-family:var(--serif);font-size:1.0625rem;color:var(--deep);padding:1.25rem 1.5rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;}
.faq__item summary::-webkit-details-marker{display:none;}
.faq__item summary::after{content:"+";font-family:var(--sans);font-size:1.25rem;font-weight:300;color:var(--mid);flex-shrink:0;transition:transform .3s var(--ease);}
.faq__item[open] summary::after{transform:rotate(45deg);}
.faq__answer{padding:0 1.5rem 1.375rem;}
.faq__answer p{font-size:.9375rem;color:var(--light-ink);line-height:1.75;margin:0 0 .85em;}
.faq__answer p:last-child{margin:0;}
.faq__cta{margin-top:clamp(2.5rem,5vw,3.5rem);}
@media (max-width: 480px) {
  .btn--lg,
  .faq__cta .btn {
    white-space: normal;
    max-width: 100%;
    box-sizing: border-box;
    text-align: center;
    line-height: 1.3;
  }
}
.qr-dest {
  word-break: normal;
  overflow-wrap: anywhere;
}