/* ==========================================================================
   HerbalCounter design system
   Apothecary warm: aged paper, amber, forest green.
   Amiri display over Asap text. Ruled label cards, pressed botanical line
   art, ink stamp details. Light ground only, contrast from type and rules.
   ========================================================================== */

:root {
  /* core palette from the brief */
  --bg: #FBF6EC;
  --surface: #FFFFFF;
  --ink: #221E15;
  --primary: #3F6034;
  --accent: #C08A3E;
  --muted: #6B6350;

  /* derived tints, all light */
  --paper: #F5EEDF;
  --paper-2: #EFE6D3;
  --primary-tint: #EBF0E7;
  --primary-tint-2: #DCE6D6;
  --primary-line: #B9CBB0;
  --accent-tint: #FAF0DF;
  --accent-line: #E3C594;
  --rule: #DED3BC;
  --rule-soft: #EAE1CE;

  /* type */
  --display: "Amiri", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --body: "Asap", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --step--1: clamp(0.82rem, 0.79rem + 0.14vw, 0.9rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.09rem);
  --step-1: clamp(1.16rem, 1.09rem + 0.34vw, 1.35rem);
  --step-2: clamp(1.4rem, 1.27rem + 0.62vw, 1.78rem);
  --step-3: clamp(1.72rem, 1.48rem + 1.1vw, 2.4rem);
  --step-4: clamp(2.05rem, 1.6rem + 2vw, 3.3rem);
  --step-5: clamp(1.896rem, 1.359rem + 2.37vw, 3.239rem);

  /* space */
  --s-1: 0.35rem; --s-2: 0.6rem; --s-3: 0.95rem; --s-4: 1.4rem;
  --s-5: 2rem;    --s-6: 3rem;   --s-7: 4.5rem;  --s-8: 6.5rem;

  /* radii and shadow */
  --r-sm: 3px; --r-md: 6px; --r-lg: 12px; --r-pill: 999px;
  --shadow-1: 0 1px 2px rgba(34, 30, 21, 0.06), 0 6px 18px rgba(34, 30, 21, 0.05);
  --shadow-2: 0 2px 4px rgba(34, 30, 21, 0.07), 0 16px 40px rgba(34, 30, 21, 0.09);
  --wrap: 1180px;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background-color: var(--bg);
  /* aged paper: two soft amber blooms plus a faint laid-paper weave */
  background-image:
    radial-gradient(circle at 12% 6%, rgba(192, 138, 62, 0.10), rgba(192, 138, 62, 0) 42%),
    radial-gradient(circle at 88% 28%, rgba(63, 96, 52, 0.07), rgba(63, 96, 52, 0) 38%),
    repeating-linear-gradient(90deg, rgba(107, 99, 80, 0.035) 0 1px, rgba(107, 99, 80, 0) 1px 4px),
    repeating-linear-gradient(0deg, rgba(107, 99, 80, 0.028) 0 1px, rgba(107, 99, 80, 0) 1px 5px);
  background-attachment: fixed, fixed, scroll, scroll;
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--step-0);
  line-height: 1.65;
  font-synthesis-weight: none;
}

h1, h2, h3, h4 { font-family: var(--display); font-weight: 700; line-height: 1.12; margin: 0 0 var(--s-3); letter-spacing: 0.005em; }
h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }
p { margin: 0 0 var(--s-3); }
a { color: var(--primary); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--accent); }
img { max-width: 100%; height: auto; display: block; }
ul, ol { margin: 0 0 var(--s-3); padding-left: 1.15rem; }
li { margin-bottom: 0.35rem; }
strong { font-weight: 700; }
hr { border: 0; border-top: 1px solid var(--rule); margin: var(--s-6) 0; }

.wrap { width: min(100% - 2.2rem, var(--wrap)); margin-inline: auto; }
.wrap-narrow { width: min(100% - 2.2rem, 760px); margin-inline: auto; }

.visually-hidden {
  position: absolute !important; 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: var(--s-3); top: -4rem; z-index: 200;
  background-color: var(--primary); color: #FFFFFF; padding: 0.7rem 1.1rem;
  border-radius: var(--r-md); font-weight: 600; text-decoration: none;
  transition: top 0.18s ease;
}
.skip-link:focus { top: var(--s-3); color: #FFFFFF; }

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

/* ---------- ink stamp motif -------------------------------------------- */
.stamp {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--body); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.19em; text-transform: uppercase; color: var(--primary);
  border: 1.5px solid var(--primary-line); border-radius: var(--r-sm);
  padding: 0.32rem 0.7rem; background-color: var(--primary-tint);
  transform: rotate(-1.1deg);
}
.stamp::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  border: 1.5px solid currentColor;
}
.stamp.amber { color: #7A5518; border-color: var(--accent-line); background-color: var(--accent-tint); transform: rotate(0.9deg); }

/* section eyebrow: a hand ruled label line */
.eyebrow {
  font-size: 0.74rem; letter-spacing: 0.22em; text-transform: uppercase;
  font-weight: 700; color: var(--muted); margin: 0 0 var(--s-2);
  display: flex; align-items: center; gap: 0.7rem;
}
.eyebrow::after { content: ""; flex: 1; height: 1px; background-color: var(--rule); }

/* ---------- buttons ----------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-family: var(--body); font-weight: 600; font-size: 0.98rem;
  padding: 0.78rem 1.5rem; border-radius: var(--r-md); border: 1.5px solid transparent;
  text-decoration: none; cursor: pointer; transition: transform 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease, color 0.16s ease;
}
.btn-primary { background-color: var(--primary); color: #FFFFFF; box-shadow: var(--shadow-1); }
.btn-primary:hover { background-color: color-mix(in srgb, var(--primary) 86%, #000000); color: #FFFFFF; transform: translateY(-2px); box-shadow: var(--shadow-2); }
.btn-ghost { background-color: var(--surface); color: var(--primary); border-color: var(--primary-line); }
.btn-ghost:hover { background-color: var(--primary-tint); color: var(--primary); transform: translateY(-2px); }
.btn-amber { background-color: var(--accent); color: #FFFFFF; }
.btn-amber:hover { background-color: color-mix(in srgb, var(--accent) 88%, #000000); color: #FFFFFF; transform: translateY(-2px); }
.btn-wide { width: 100%; }

/* ---------- header ------------------------------------------------------ */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background-color: rgba(251, 246, 236, 0.94);
  backdrop-filter: blur(7px);
  border-bottom: 1px solid var(--rule-soft);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.site-header.is-scrolled { box-shadow: 0 1px 0 var(--rule), 0 10px 26px rgba(34, 30, 21, 0.07); border-bottom-color: var(--rule); }
.header-inner { display: flex; align-items: center; gap: var(--s-4); padding: 0.8rem 0; }
.wordmark { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; color: var(--ink); }
.wordmark svg { flex: none; }
.wordmark-text { font-family: var(--display); font-size: 1.42rem; font-weight: 700; letter-spacing: 0.01em; }
.wordmark-text span { color: var(--primary); }
.primary-nav { margin-left: auto; }
.primary-nav ul { display: flex; gap: 1.35rem; list-style: none; margin: 0; padding: 0; }
.primary-nav a {
  color: var(--ink); text-decoration: none; font-size: 0.94rem; font-weight: 500;
  padding: 0.3rem 0; border-bottom: 2px solid transparent;
}
.primary-nav a:hover { color: var(--primary); border-bottom-color: var(--accent); }
.header-cta { flex: none; }
.nav-toggle {
  display: none; margin-left: auto; background-color: var(--surface); border: 1.5px solid var(--rule);
  border-radius: var(--r-md); padding: 0.5rem 0.6rem; cursor: pointer; color: var(--ink);
}
.nav-toggle svg { display: block; }

@media (max-width: 900px) {
  .nav-toggle { display: block; }
  .header-cta { display: none; }
  .primary-nav {
    position: absolute; left: 0; right: 0; top: 100%; margin: 0;
    background-color: var(--surface); border-bottom: 1px solid var(--rule);
    box-shadow: var(--shadow-2); padding: var(--s-3) 1.1rem var(--s-4);
  }
  .primary-nav[hidden] { display: none; }
  .primary-nav ul { flex-direction: column; gap: 0.15rem; }
  .primary-nav a { display: block; padding: 0.7rem 0.2rem; border-bottom: 1px solid var(--rule-soft); }
  .primary-nav .nav-cta { margin-top: var(--s-3); }
}

/* ---------- hero -------------------------------------------------------- */
.hero { padding: var(--s-7) 0 var(--s-6); position: relative; overflow: hidden; }
.hero::before {
  /* pressed botanical line art, drawn as a stem of leaves */
  content: ""; position: absolute; right: -90px; top: -40px; width: 420px; height: 520px;
  opacity: 0.14; pointer-events: none;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 260' fill='none' stroke='%233F6034' stroke-width='1.6'><path d='M100 255 C100 180 96 110 108 30'/><path d='M104 210 C70 200 52 180 46 152 C82 150 100 172 104 210Z'/><path d='M102 178 C136 170 154 150 160 122 C124 120 106 142 102 178Z'/><path d='M104 146 C72 138 56 118 50 92 C84 90 100 112 104 146Z'/><path d='M102 114 C134 106 150 86 156 60 C122 58 106 80 102 114Z'/><path d='M104 84 C78 76 64 58 58 36 C88 34 100 54 104 84Z'/></svg>");
  background-size: contain;
}
.hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--s-6); align-items: center; }
.hero h1 { max-width: 19ch; margin-bottom: var(--s-4); }
.hero h1 em { font-style: normal; color: var(--primary); position: relative; }
.hero-lede { font-size: var(--step-1); color: #4A432F; max-width: 46ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin: var(--s-5) 0 var(--s-5); }

.trust-strip {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 2px solid var(--ink); border-bottom: 1px solid var(--rule);
  padding: var(--s-3) 0; gap: var(--s-3);
}
.trust-strip div { padding-right: var(--s-3); border-right: 1px solid var(--rule-soft); }
.trust-strip div:last-child { border-right: 0; }
.trust-strip b { display: block; font-family: var(--display); font-size: 1.5rem; line-height: 1.1; }
.trust-strip span { font-size: 0.85rem; color: var(--muted); }

/* the hero photograph, mounted like a pressed specimen sheet */
.hero-plate { position: relative; padding: 14px; background-color: var(--surface); border: 1px solid var(--rule); box-shadow: var(--shadow-2); transform: rotate(-0.7deg); }
.hero-plate::after {
  content: ""; position: absolute; inset: 6px; border: 1px solid var(--accent-line); pointer-events: none;
}
.hero-plate img { border-radius: 2px; }
.plate-caption {
  position: absolute; left: 22px; bottom: -20px; background-color: var(--paper);
  border: 1.5px solid var(--rule); border-radius: var(--r-sm);
  font-size: 0.7rem; letter-spacing: 0.17em; text-transform: uppercase; font-weight: 700;
  color: var(--muted); padding: 0.35rem 0.7rem; transform: rotate(1.4deg);
}

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero::before { display: none; }
  .trust-strip { grid-template-columns: 1fr; }
  .trust-strip div { border-right: 0; border-bottom: 1px solid var(--rule-soft); padding-bottom: 0.6rem; }
  .trust-strip div:last-child { border-bottom: 0; }
}

/* ---------- generic section -------------------------------------------- */
section { padding: var(--s-7) 0; }
.section-head { max-width: 62ch; margin-bottom: var(--s-6); }
.section-head p { color: var(--muted); font-size: var(--step-1); }
.band { background-color: var(--paper); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.band-white { background-color: var(--surface); border-top: 1px solid var(--rule-soft); border-bottom: 1px solid var(--rule-soft); }

/* ---------- ruled label cards ------------------------------------------- */
.grid { display: grid; gap: var(--s-4); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cards-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.label-card {
  background-color: var(--surface);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--accent);
  border-radius: var(--r-sm);
  padding: var(--s-4);
  box-shadow: var(--shadow-1);
  position: relative;
}
.label-card h3 { font-size: var(--step-1); margin-bottom: 0.5rem; }
.label-card p { color: var(--muted); margin-bottom: 0; }
.label-card .cost {
  display: inline-block; margin-top: var(--s-3); font-family: var(--display);
  font-size: 1.05rem; color: var(--primary); border-top: 1px solid var(--rule-soft);
  padding-top: 0.5rem; width: 100%;
}

/* feature card with etched icon */
.feature {
  background-color: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-md);
  padding: var(--s-4); position: relative;
  /* ruled label lines behind the body copy */
  background-image: repeating-linear-gradient(0deg, rgba(222, 211, 188, 0.35) 0 1px, rgba(222, 211, 188, 0) 1px 30px);
  background-position: 0 96px;
}
.feature .icon {
  width: 46px; height: 46px; display: grid; place-items: center; margin-bottom: var(--s-3);
  border: 1.5px solid var(--primary-line); border-radius: var(--r-sm);
  background-color: var(--primary-tint); color: var(--primary);
}
.feature .icon svg { display: block; }
.feature h3 { font-size: var(--step-1); }
.feature p { color: var(--muted); margin-bottom: 0; }

/* ---------- steps ------------------------------------------------------- */
.steps { counter-reset: step; display: grid; gap: var(--s-4); }
.step {
  position: relative; padding-left: 4.4rem; padding-bottom: var(--s-4);
  border-bottom: 1px dashed var(--rule);
}
.step:last-child { border-bottom: 0; padding-bottom: 0; }
.step::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  position: absolute; left: 0; top: -2px; width: 3.1rem; height: 3.1rem;
  display: grid; place-items: center; font-family: var(--display); font-size: 1.3rem;
  color: var(--primary); background-color: var(--primary-tint);
  border: 1.5px solid var(--primary-line); border-radius: 50%;
}
.step h3 { margin-bottom: 0.35rem; }
.step p { color: var(--muted); margin-bottom: 0; }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6); align-items: center; }
.photo-frame { padding: 12px; background-color: var(--surface); border: 1px solid var(--rule); box-shadow: var(--shadow-1); transform: rotate(0.6deg); }
.photo-frame img { border-radius: 2px; }

/* ---------- outcomes ---------------------------------------------------- */
.outcome {
  background-color: var(--accent-tint); border: 1px solid var(--accent-line);
  border-radius: var(--r-md); padding: var(--s-4);
}
.outcome .num { font-family: var(--display); font-size: var(--step-4); line-height: 1; color: #7A5518; display: block; margin-bottom: 0.4rem; }
.outcome h3 { font-size: var(--step-1); margin-bottom: 0.4rem; }
.outcome p { color: #5C5340; margin-bottom: 0; }

/* ---------- testimonials ------------------------------------------------ */
.testimonial {
  background-color: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-sm);
  padding: var(--s-5) var(--s-4) var(--s-4); margin: 0; position: relative;
  box-shadow: var(--shadow-1);
}
.testimonial::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px;
  background-image: repeating-linear-gradient(90deg, var(--primary) 0 10px, rgba(63, 96, 52, 0) 10px 18px);
  opacity: 0.5;
}
.testimonial p { font-size: 1.03rem; }
.testimonial footer { border-top: 1px solid var(--rule-soft); padding-top: var(--s-3); margin-top: var(--s-3); font-size: 0.9rem; color: var(--muted); }
.testimonial cite { font-style: normal; font-weight: 700; color: var(--ink); display: block; font-family: var(--display); font-size: 1.05rem; }

.results-strip {
  margin-top: var(--s-5); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1.5px solid var(--ink); border-radius: var(--r-sm); overflow: hidden;
  background-color: var(--surface);
}
.results-strip div { padding: var(--s-4); border-right: 1px solid var(--rule); text-align: center; }
.results-strip div:last-child { border-right: 0; }
.results-strip b { display: block; font-family: var(--display); font-size: var(--step-3); line-height: 1.05; color: var(--primary); }
.results-strip span { font-size: 0.88rem; color: var(--muted); }

/* ---------- pricing ----------------------------------------------------- */
.tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); align-items: start; }
.tier {
  background-color: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-md);
  padding: var(--s-5) var(--s-4); position: relative; box-shadow: var(--shadow-1);
}
.tier.is-recommended { border: 2px solid var(--primary); box-shadow: var(--shadow-2); }
.tier-flag {
  position: absolute; top: -14px; left: var(--s-4);
  background-color: var(--primary); color: #FFFFFF; font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; padding: 0.32rem 0.7rem;
  border-radius: var(--r-sm); transform: rotate(-1.6deg);
}
.tier h3 { font-size: var(--step-2); margin-bottom: 0.2rem; }
.tier .price { font-family: var(--display); font-size: var(--step-4); line-height: 1; color: var(--ink); }
.tier .per { font-size: 0.9rem; color: var(--muted); }
.tier .who { color: var(--muted); font-size: 0.94rem; border-bottom: 1px solid var(--rule-soft); padding-bottom: var(--s-3); margin-bottom: var(--s-3); }
.tier ul { list-style: none; padding: 0; margin: 0 0 var(--s-4); }
.tier li { position: relative; padding-left: 1.5rem; margin-bottom: 0.55rem; font-size: 0.95rem; }
.tier li::before {
  content: ""; position: absolute; left: 0; top: 0.55em; width: 9px; height: 9px;
  border: 1.5px solid var(--primary); border-radius: 50% 0 50% 50%;
}
.billing-note { margin-top: var(--s-4); font-size: 0.94rem; color: var(--muted); border-left: 3px solid var(--accent-line); padding-left: var(--s-3); }

/* ---------- FAQ --------------------------------------------------------- */
.faq-list { border-top: 1px solid var(--rule); }
.faq-item { border-bottom: 1px solid var(--rule); }
.faq-q {
  width: 100%; text-align: left; background-color: transparent; border: 0; cursor: pointer;
  font-family: var(--display); font-size: var(--step-1); font-weight: 700; color: var(--ink);
  padding: var(--s-4) 2.6rem var(--s-4) 0; position: relative; line-height: 1.3;
}
.faq-q:hover { color: var(--primary); }
.faq-q::after {
  content: ""; position: absolute; right: 0.4rem; top: 50%; width: 13px; height: 13px;
  margin-top: -7px; border-right: 2px solid var(--primary); border-bottom: 2px solid var(--primary);
  transform: rotate(45deg); transition: transform 0.22s ease;
}
.faq-q[aria-expanded="true"]::after { transform: rotate(-135deg); }
.faq-a { padding: 0 3rem var(--s-4) 0; color: var(--muted); max-width: 76ch; }
.faq-a[hidden] { display: none; }

/* ---------- contact form ------------------------------------------------ */
.form-panel {
  background-color: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-md);
  padding: var(--s-5); box-shadow: var(--shadow-1);
}
.field { margin-bottom: var(--s-4); }
.field label { display: block; font-weight: 600; font-size: 0.92rem; margin-bottom: 0.35rem; }
.field input, .field select, .field textarea {
  width: 100%; font-family: var(--body); font-size: 1rem; color: var(--ink);
  background-color: var(--paper); border: 1.5px solid var(--rule); border-radius: var(--r-sm);
  padding: 0.66rem 0.8rem;
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { background-color: var(--surface); }
.field [aria-invalid="true"] { border-color: #8C2F1E; }
.field-error { display: block; color: #8C2F1E; font-size: 0.86rem; margin-top: 0.3rem; font-weight: 600; }
.field-error[hidden] { display: none; }
.consent { display: flex; gap: 0.7rem; align-items: flex-start; }
.consent input { width: auto; margin-top: 0.35rem; flex: none; }
.consent label { font-weight: 400; font-size: 0.92rem; }
.form-reassure { margin-top: var(--s-3); font-size: 0.92rem; color: var(--muted); }
.contact-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: var(--s-6); align-items: start; }
.contact-aside ul { list-style: none; padding: 0; }
.contact-aside li { padding-left: 1.4rem; position: relative; margin-bottom: 0.7rem; color: var(--muted); }
.contact-aside li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 8px; height: 8px; border: 1.5px solid var(--accent); border-radius: 50% 0 50% 50%; }

/* ---------- author byline ----------------------------------------------- */
.byline {
  border: 1px solid var(--rule); border-left: 4px solid var(--primary);
  background-color: var(--paper); border-radius: var(--r-sm); padding: var(--s-4);
  display: flex; gap: var(--s-4); align-items: center; flex-wrap: wrap;
}
.byline p { margin: 0; color: var(--muted); }

/* ---------- footer (light tint only) ------------------------------------ */
.site-footer {
  background-color: var(--primary-tint);
  border-top: 2px solid var(--primary-line);
  padding: var(--s-7) 0 var(--s-4);
  margin-top: var(--s-7);
}
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: var(--s-5); }
.footer-col h2 { font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase; font-family: var(--body); font-weight: 700; color: var(--muted); margin-bottom: var(--s-3); }
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin-bottom: 0.5rem; }
.footer-col a { color: var(--ink); text-decoration: none; font-size: 0.94rem; }
.footer-col a:hover { color: var(--primary); text-decoration: underline; }
.footer-blurb { color: var(--muted); font-size: 0.95rem; max-width: 34ch; }
.social { display: flex; gap: 0.55rem; margin-top: var(--s-3); }
.social a {
  width: 38px; height: 38px; display: grid; place-items: center; color: var(--primary);
  background-color: var(--surface); border: 1.5px solid var(--primary-line); border-radius: var(--r-sm);
}
.social a:hover { background-color: var(--accent-tint); border-color: var(--accent-line); color: #7A5518; }
.footer-base {
  margin-top: var(--s-6); padding-top: var(--s-4); border-top: 1px solid var(--primary-line);
  display: flex; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap;
  font-size: 0.88rem; color: var(--muted);
}

/* ---------- long form legal pages --------------------------------------- */
.prose { max-width: 74ch; }
.prose h2 { font-size: var(--step-2); margin-top: var(--s-6); }
.prose h3 { font-size: var(--step-1); margin-top: var(--s-5); }
.page-head { padding: var(--s-6) 0 var(--s-5); border-bottom: 1px solid var(--rule); margin-bottom: var(--s-5); }
.page-head h1 { font-size: var(--step-4); }
.page-head p { color: var(--muted); max-width: 62ch; font-size: var(--step-1); }
.fact-table { width: 100%; border-collapse: collapse; margin-bottom: var(--s-4); }
.fact-table th, .fact-table td { text-align: left; padding: 0.6rem 0.8rem; border: 1px solid var(--rule); vertical-align: top; font-size: 0.95rem; }
.fact-table th { background-color: var(--paper-2); width: 34%; font-weight: 700; }
.map-group { background-color: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-md); padding: var(--s-4); }
.map-group ul { list-style: none; padding: 0; }
.map-group li { border-bottom: 1px dashed var(--rule-soft); padding: 0.6rem 0; }
.map-group li:last-child { border-bottom: 0; }
.map-group li span { display: block; color: var(--muted); font-size: 0.9rem; }
.author-hero { display: grid; grid-template-columns: 260px 1fr; gap: var(--s-5); align-items: start; }
.author-portrait { padding: 10px; background-color: var(--surface); border: 1px solid var(--rule); box-shadow: var(--shadow-1); }
.mini { text-align: center; padding: var(--s-8) 0; }
.mini h1 { font-size: var(--step-4); }
.mini p { color: var(--muted); max-width: 56ch; margin-inline: auto; font-size: var(--step-1); }
.mini .hero-actions { justify-content: center; }

@media (max-width: 980px) {
  .grid-3, .cards-4, .tiers, .results-strip, .footer-grid, .contact-grid, .split, .author-hero { grid-template-columns: 1fr; }
  .results-strip div { border-right: 0; border-bottom: 1px solid var(--rule); }
  .results-strip div:last-child { border-bottom: 0; }
  .author-hero { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .grid-2 { grid-template-columns: 1fr; }
  .step { padding-left: 0; padding-top: 3.9rem; }
  .step::before { top: 0; }
}

/* ---------- motion: slow ink reveal, label stamps into place ------------- */
[data-reveal] { opacity: 0; transform: translateY(18px); filter: blur(3px); transition: opacity 0.9s ease, transform 0.9s ease, filter 0.9s ease; }
[data-reveal].is-visible { opacity: 1; transform: none; filter: none; }
[data-reveal="stamp"] { opacity: 0; transform: scale(1.5) rotate(-7deg); filter: blur(4px); transition: opacity 0.42s ease-out, transform 0.42s cubic-bezier(0.2, 0.9, 0.25, 1), filter 0.42s ease-out; }
[data-reveal="stamp"].is-visible { opacity: 1; transform: scale(1) rotate(-1.1deg); filter: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1; transform: none; filter: none; }
}

/* ==========================================================================
   The Formulation Bench: magazine
   Same aged paper ground, ruled label cards and stamp details as the site.
   Light only, contrast from type, rules and the photography.
   ========================================================================== */

/* ---------- breadcrumb --------------------------------------------------- */
.mag-crumb { border-bottom: 1px solid var(--rule-soft); background-color: var(--paper); }
.mag-crumb ol {
  display: flex; flex-wrap: wrap; gap: 0.45rem; list-style: none;
  margin: 0; padding: 0.7rem 0; font-size: 0.84rem; color: var(--muted);
}
.mag-crumb li { margin: 0; max-width: 100%; }
.mag-crumb li + li::before { content: "/"; margin-right: 0.45rem; color: var(--accent); }
.mag-crumb a { color: var(--muted); text-decoration: none; }
.mag-crumb a:hover { color: var(--primary); text-decoration: underline; }
.mag-crumb [aria-current="page"] { color: var(--ink); font-weight: 600; }

/* ---------- masthead on the index ---------------------------------------- */
.mag-masthead { padding: var(--s-6) 0 var(--s-5); border-bottom: 1px solid var(--rule); }
.mag-masthead h1 { font-size: var(--step-5); max-width: 16ch; margin-top: var(--s-3); }
.mag-masthead-note { color: var(--muted); max-width: 68ch; font-size: 0.98rem; }

.mag-standfirst {
  font-family: var(--display); font-size: var(--step-2); line-height: 1.35;
  color: #4A432F; max-width: 40ch; margin-bottom: var(--s-4);
}

/* ---------- index grid and lead card ------------------------------------- */
.mag-index { padding: var(--s-6) 0 var(--s-7); }
.mag-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5) var(--s-4); }

.mag-card {
  display: flex; flex-direction: column;
  background-color: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.mag-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: var(--accent-line); }
.mag-card-media { display: block; border-bottom: 1px solid var(--rule-soft); }
.mag-card-media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.mag-card-body { padding: var(--s-4); display: flex; flex-direction: column; flex: 1; }
.mag-card-angle {
  font-size: 0.7rem; letter-spacing: 0.19em; text-transform: uppercase;
  font-weight: 700; color: var(--primary); margin-bottom: var(--s-2);
}
.mag-card h3 { font-size: var(--step-1); line-height: 1.2; margin-bottom: var(--s-2); }
.mag-card h3 a { color: var(--ink); text-decoration: none; }
.mag-card h3 a:hover { color: var(--primary); text-decoration: underline; }
.mag-card-dek { color: var(--muted); font-size: 0.94rem; margin-bottom: var(--s-3); }
.mag-card-meta {
  margin: auto 0 0; padding-top: var(--s-3); border-top: 1px dashed var(--rule);
  display: flex; flex-wrap: wrap; gap: 0.8rem;
  font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted);
}

.mag-card.lead { grid-column: 1 / -1; flex-direction: row; align-items: stretch; background-color: var(--paper); }
.mag-card.lead .mag-card-media { flex: 1 1 55%; border-bottom: 0; border-right: 1px solid var(--rule-soft); }
.mag-card.lead .mag-card-media img { height: 100%; aspect-ratio: auto; min-height: 320px; }
.mag-card.lead .mag-card-body { flex: 1 1 45%; justify-content: center; padding: var(--s-5); }
.mag-card.lead h3 { font-size: var(--step-3); }
.mag-card.lead .mag-card-dek { font-size: 1.03rem; }

/* ---------- article header ----------------------------------------------- */
.mag-article { padding-top: var(--s-6); }
.mag-head { max-width: 800px; }
.mag-head h1 { font-size: var(--step-4); margin-top: var(--s-3); }
.mag-head .mag-standfirst { max-width: 46ch; }
.mag-byline {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.6rem var(--s-4);
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  padding: var(--s-3) 0; margin-top: var(--s-4);
}
.mag-by { margin: 0; font-family: var(--display); font-size: 1.1rem; }
.mag-by a { color: var(--ink); }
.mag-by a:hover { color: var(--primary); }
.mag-meta {
  margin: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.1rem;
  font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted);
}

.mag-figure { max-width: 980px; margin-top: var(--s-5); }
.mag-plate { margin: 0; transform: rotate(-0.4deg); }
.mag-plate figcaption {
  font-size: 0.82rem; color: var(--muted); padding-top: 0.7rem; line-height: 1.45;
  border-top: 1px dashed var(--rule); margin-top: 0.8rem;
}

/* ---------- article body typography -------------------------------------- */
.mag-body {
  width: min(100% - 2.2rem, 70ch);
  margin: var(--s-6) auto var(--s-5);
  font-size: 1.06rem;
  line-height: 1.72;
}
.mag-body h2 { font-size: var(--step-2); margin-top: var(--s-6); margin-bottom: var(--s-3); }
.mag-body h2::after {
  content: ""; display: block; width: 62px; height: 2px;
  background-color: var(--accent-line); margin-top: 0.6rem;
}
.mag-body h3 { font-size: var(--step-1); margin-top: var(--s-5); margin-bottom: var(--s-2); }
.mag-body p { margin-bottom: var(--s-4); }
.mag-body ul, .mag-body ol { margin-bottom: var(--s-4); padding-left: 1.35rem; }
.mag-body li { margin-bottom: 0.5rem; }
.mag-body blockquote {
  margin: var(--s-5) 0; padding: var(--s-4) var(--s-4) var(--s-4) var(--s-5);
  background-color: var(--paper); border-left: 3px solid var(--primary-line);
  border-radius: 0 var(--r-md) var(--r-md) 0; font-family: var(--display); font-size: 1.16rem;
}
.mag-body blockquote p:last-child { margin-bottom: 0; }
.mag-body table { width: 100%; border-collapse: collapse; margin: var(--s-5) 0; font-size: 0.95rem; }
.mag-body th, .mag-body td { text-align: left; padding: 0.6rem 0.8rem; border: 1px solid var(--rule); vertical-align: top; }
.mag-body th { background-color: var(--paper-2); font-weight: 700; }
.mag-body a { color: var(--primary); }

.inline-read {
  margin: var(--s-5) 0; padding: 0.85rem var(--s-4);
  background-color: var(--accent-tint);
  border: 1px solid var(--accent-line); border-radius: var(--r-md);
  font-size: 0.95rem; color: #5C5340;
}
.inline-read a { font-weight: 600; }

/* ---------- call to action block ----------------------------------------- */
.mag-cta {
  width: min(100% - 2.2rem, 800px); margin: var(--s-6) auto;
  background-color: var(--primary-tint);
  border: 1px solid var(--primary-line);
  border-radius: var(--r-lg);
  padding: var(--s-5);
}
.mag-cta h2 { font-size: var(--step-2); max-width: 24ch; }
.mag-cta p { color: #4A432F; max-width: 60ch; }
.mag-cta .btn { margin-top: var(--s-2); }

/* ---------- author box ---------------------------------------------------- */
.mag-author {
  width: min(100% - 2.2rem, 800px); margin: var(--s-6) auto var(--s-7);
  display: grid; grid-template-columns: 160px 1fr; gap: var(--s-4);
  background-color: var(--surface); border: 1px solid var(--rule);
  border-left: 4px solid var(--accent); border-radius: var(--r-md);
  padding: var(--s-4);
}
.mag-author img { border-radius: var(--r-sm); border: 1px solid var(--rule-soft); }
.mag-author p { color: var(--muted); font-size: 0.96rem; }
.mag-author-name {
  font-family: var(--display); font-size: var(--step-1);
  color: var(--ink) !important; margin-bottom: var(--s-2);
}

/* ---------- Read also ----------------------------------------------------- */
.mag-related { background-color: var(--paper); border-top: 1px solid var(--rule); padding: var(--s-6) 0 var(--s-7); }
.mag-related-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
.mag-rel {
  background-color: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-1);
  display: flex; flex-direction: column;
  transition: transform 0.18s ease, border-color 0.18s ease;
}
.mag-rel:hover { transform: translateY(-3px); border-color: var(--accent-line); }
.mag-rel-media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.mag-rel-body { padding: var(--s-3) var(--s-4) var(--s-4); }
.mag-rel h3 { font-size: 1.08rem; line-height: 1.25; margin-bottom: var(--s-2); }
.mag-rel h3 a { color: var(--ink); text-decoration: none; }
.mag-rel h3 a:hover { color: var(--primary); text-decoration: underline; }
.mag-rel p { color: var(--muted); font-size: 0.9rem; margin-bottom: var(--s-2); }
.mag-related-all { margin-top: var(--s-5); font-weight: 600; }

/* ---------- home page magazine teaser ------------------------------------ */
.mag-teaser-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
.mag-teaser-more { margin-top: var(--s-5); font-weight: 600; }

/* ---------- responsive ---------------------------------------------------- */
@media (max-width: 900px) {
  .mag-grid, .mag-related-grid, .mag-teaser-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mag-card.lead { flex-direction: column; }
  .mag-card.lead .mag-card-media { border-right: 0; border-bottom: 1px solid var(--rule-soft); }
  .mag-card.lead .mag-card-media img { min-height: 0; aspect-ratio: 3 / 2; }
  .mag-author { grid-template-columns: 1fr; }
  .mag-author img { width: 130px; }
}
@media (max-width: 640px) {
  .mag-grid, .mag-related-grid, .mag-teaser-grid { grid-template-columns: 1fr; }
  .mag-head h1 { font-size: var(--step-3); }
  .mag-body { font-size: 1.02rem; line-height: 1.68; }
  .mag-plate, .mag-body table { transform: none; }
  .mag-body table { display: block; overflow-x: auto; }
  .mag-cta, .mag-author { padding: var(--s-4); border-radius: var(--r-md); }
  .mag-byline { gap: 0.35rem; }
  .mag-meta { gap: 0.35rem 0.9rem; font-size: 0.74rem; }
  .mag-card.lead .mag-card-body { padding: var(--s-4); }
  .mag-card.lead h3 { font-size: var(--step-2); }
}


/* Network column: five sibling products, rotated so every site is linked the same
   number of times. Sits in the footer link grid and inherits its type and colour. */
.site-network ul { list-style: none; margin: 0; padding: 0; }
.site-network li + li { margin-top: 0.4rem; }
.site-network a { text-decoration: none; border-bottom: 1px solid transparent; }
.site-network a:hover, .site-network a:focus-visible { border-bottom-color: currentColor; }


/* Header nav: a label is a phrase, so it never breaks across two lines. The nav is a flex
   child and would otherwise be shrunk by the row rather than allowed to size itself. */
header nav ul { flex-wrap: nowrap; }
header nav li { flex: 0 0 auto; }
header nav a { white-space: nowrap; }
header nav ul { gap: clamp(0.75rem, 1.35vw, 1.25rem); }

/* The nav carries its own call to action for the mobile menu, where the header button is
   hidden. Showing both on desktop duplicated it, and the nav link colour rule overrode the
   button's white label, leaving dark text on a dark fill. It now appears on mobile only. */
header nav a.btn { display: none; }
header nav a.btn-primary { color: #FFFFFF; }
@media (max-width: 960px) {
  header nav a.btn { display: inline-flex; }
}

/* nx-expansion-v1 */
/* Expansion pages: comparisons, free tools, working documents.
   Namespaced so nothing here can reach the original page styles. */
:root{--nx-bg:#FBF6EC;--nx-surface:#FFFFFF;--nx-soft:#F0EDE1;--nx-ink:#221E15;
    --nx-ink-soft:#5F5A51;--nx-muted:#6B6350;--nx-line:#DDD8CE;--nx-line-2:#C3BEB4;
    --nx-primary:#3F6034;--nx-btn:#3F6034;--nx-btn-ink:#FFFFFF;--nx-ghost:#3F6034;
    --nx-accent:#C08A3E;--nx-accent-ink:#101418;--nx-tint:#F5ECE0;
    --nx-display:'Amiri',Georgia,serif;--nx-body:'Asap',system-ui,-apple-system,'Segoe UI',sans-serif}
.nx{background:var(--nx-bg);color:var(--nx-ink);font-family:var(--nx-body)}
.nx *,.nx *::before,.nx *::after{box-sizing:border-box}
.nx-wrap{width:min(1140px,92vw);margin:0 auto}
.nx-narrow{width:min(760px,92vw);margin:0 auto}
.nx h1,.nx h2,.nx h3{font-family:var(--nx-display);color:var(--nx-ink);line-height:1.16;
    letter-spacing:-.01em;margin:0 0 .5em}
.nx h1{font-size:clamp(2rem,1.3rem + 2.6vw,3.1rem)}
.nx h2{font-size:clamp(1.4rem,1.05rem + 1.3vw,2.05rem)}
.nx h3{font-size:clamp(1.08rem,.98rem + .5vw,1.35rem)}
.nx p{margin:0 0 1.05em;line-height:1.68;color:var(--nx-ink-soft)}
.nx a{color:var(--nx-ghost)}
.nx a:hover{color:var(--nx-ink)}
.nx :focus-visible{outline:3px solid var(--nx-btn);outline-offset:2px;border-radius:4px}

.nx-crumb{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;font-size:.83rem;
    color:var(--nx-muted);margin:0 0 1.4rem;padding:0;list-style:none}
.nx-crumb a{color:var(--nx-muted);text-decoration:none;border-bottom:1px solid var(--nx-line-2)}
.nx-crumb a:hover{color:var(--nx-ink)}
.nx-crumb span[aria-hidden]{opacity:.55}

.nx-hero{padding:clamp(2.2rem,1rem + 4vw,4rem) 0 clamp(1.6rem,1rem + 2vw,2.6rem);
    background:linear-gradient(180deg,var(--nx-soft),var(--nx-bg));border-bottom:1px solid var(--nx-line)}
.nx-eyebrow{font-family:var(--nx-body);font-size:.76rem;font-weight:700;letter-spacing:.14em;
    text-transform:uppercase;color:var(--nx-muted);margin:0 0 .7rem}
.nx-lede{font-size:clamp(1.03rem,.97rem + .35vw,1.2rem);color:var(--nx-ink-soft);max-width:62ch;margin:0 0 1.2rem}
.nx-hero-body{max-width:74ch}
.nx-hero-body p{margin-bottom:.9em}

.nx-band{padding:clamp(2rem,1.2rem + 2.6vw,3.4rem) 0}
.nx-band-alt{background:var(--nx-soft);border-block:1px solid var(--nx-line)}
.nx-body{max-width:74ch}
.nx-body h2{margin-top:1.7em}
.nx-body h2:first-child{margin-top:0}

.nx-btn,a.nx-btn,button.nx-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
    padding:.82rem 1.35rem;border-radius:10px;border:2px solid var(--nx-btn);
    background:var(--nx-btn);color:var(--nx-btn-ink);font-family:var(--nx-body);font-weight:700;
    font-size:.97rem;line-height:1.1;text-decoration:none;cursor:pointer;
    transition:transform .15s ease,filter .15s ease}
.nx-btn:hover,a.nx-btn:hover,button.nx-btn:hover{filter:brightness(1.08);transform:translateY(-1px);color:var(--nx-btn-ink)}
.nx-btn-ghost,a.nx-btn-ghost,button.nx-btn-ghost{background:transparent;color:var(--nx-ghost);border-color:var(--nx-line-2)}
.nx-btn-ghost:hover,a.nx-btn-ghost:hover,button.nx-btn-ghost:hover{color:var(--nx-ink);border-color:var(--nx-btn)}
.nx-actions{display:flex;flex-wrap:wrap;gap:.7rem;margin:1.3rem 0 0}

.nx-grid{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.nx-card{background:var(--nx-surface);border:1px solid var(--nx-line);border-radius:14px;
    padding:1.35rem 1.35rem 1.5rem;box-shadow:0 1px 2px rgba(16,20,24,.05), 0 8px 24px rgba(16,20,24,.06);display:flex;flex-direction:column}
.nx-card h2,.nx-card h3{margin-bottom:.45em;font-size:clamp(1.08rem,1rem + .35vw,1.28rem)}
.nx-card h2 a,.nx-card h3 a{text-decoration:none;border-bottom:2px solid var(--nx-tint)}
.nx-card h2 a:hover,.nx-card h3 a:hover{border-bottom-color:var(--nx-btn)}
.nx-card p{font-size:.96rem}
.nx-card-go{margin-top:auto;padding-top:.4rem;font-weight:700}
.nx-kicker{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.1em;
    text-transform:uppercase;background:var(--nx-tint);color:var(--nx-ink);
    border-radius:999px;padding:.3rem .66rem;margin:0 0 .8rem}

.nx-verdict{background:var(--nx-surface);border:1px solid var(--nx-line);
    border-left:5px solid var(--nx-btn);border-radius:12px;padding:1.3rem 1.4rem;margin:0 0 1.8rem}
.nx-verdict p:last-child{margin-bottom:0}

.nx-tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--nx-line);
    border-radius:12px;background:var(--nx-surface)}
.nx-table{width:100%;border-collapse:collapse;min-width:640px;font-size:.95rem}
.nx-table caption{text-align:left;padding:.9rem 1rem;color:var(--nx-muted);font-size:.84rem}
.nx-table th,.nx-table td{padding:.8rem 1rem;text-align:left;vertical-align:top;
    border-top:1px solid var(--nx-line);color:var(--nx-ink-soft)}
.nx-table thead th{background:var(--nx-soft);color:var(--nx-ink);font-family:var(--nx-body);
    font-weight:700;border-top:0;position:sticky;top:0}
.nx-table tbody th{font-weight:700;color:var(--nx-ink);width:26%}
.nx-table tbody tr:nth-child(even) td,.nx-table tbody tr:nth-child(even) th{background:var(--nx-soft)}

.nx-two{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.nx-list{list-style:none;margin:0;padding:0}
.nx-list li{position:relative;padding:0 0 .7rem 1.5rem;line-height:1.6;color:var(--nx-ink-soft)}
.nx-list li::before{content:"";position:absolute;left:0;top:.58em;width:.55rem;height:.55rem;
    border-radius:2px;background:var(--nx-btn)}
.nx-list-alt li::before{background:var(--nx-muted)}

.nx-faq{border:1px solid var(--nx-line);border-radius:12px;background:var(--nx-surface);overflow:hidden}
.nx-faq details{border-top:1px solid var(--nx-line)}
.nx-faq details:first-of-type{border-top:0}
.nx-faq summary{cursor:pointer;padding:1rem 1.2rem;font-family:var(--nx-display);font-weight:600;
    font-size:1.02rem;color:var(--nx-ink);list-style:none;display:flex;justify-content:space-between;gap:1rem}
.nx-faq summary::-webkit-details-marker{display:none}
.nx-faq summary::after{content:"+";font-family:var(--nx-body);font-weight:700;color:var(--nx-muted)}
.nx-faq details[open] summary::after{content:"\2212"}
.nx-faq details[open] summary{color:var(--nx-ghost)}
.nx-faq .nx-answer{padding:0 1.2rem 1.1rem}
.nx-faq .nx-answer p:last-child{margin-bottom:0}

.nx-calc{display:grid;gap:1.3rem;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:start}
@media (max-width:880px){.nx-calc{grid-template-columns:1fr}}
.nx-fields{background:var(--nx-surface);border:1px solid var(--nx-line);border-radius:14px;
    padding:1.3rem;box-shadow:0 1px 2px rgba(16,20,24,.05), 0 8px 24px rgba(16,20,24,.06)}
.nx-field{margin:0 0 1.05rem}
.nx-field:last-child{margin-bottom:0}
.nx-field label{display:block;font-weight:700;font-size:.93rem;color:var(--nx-ink);margin:0 0 .35rem}
.nx-inputline{display:flex;align-items:stretch;border:1px solid var(--nx-line-2);border-radius:9px;
    background:var(--nx-bg);overflow:hidden}
.nx-inputline .nx-unit{display:flex;align-items:center;padding:0 .7rem;background:var(--nx-soft);
    color:var(--nx-muted);font-size:.86rem;font-weight:700;border-right:1px solid var(--nx-line-2)}
.nx-inputline .nx-unit-r{border-right:0;border-left:1px solid var(--nx-line-2)}
.nx-field input[type=number]{flex:1;min-width:0;border:0;background:transparent;
    padding:.62rem .7rem;font-family:var(--nx-body);font-size:1rem;color:var(--nx-ink)}
.nx-field input[type=number]:focus{outline:0}
.nx-inputline:focus-within{border-color:var(--nx-btn);box-shadow:0 0 0 3px var(--nx-tint)}
.nx-help{margin:.35rem 0 0;font-size:.83rem;color:var(--nx-muted);line-height:1.5}
.nx-results{background:var(--nx-surface);border:1px solid var(--nx-line);border-radius:14px;
    padding:1.3rem;box-shadow:0 1px 2px rgba(16,20,24,.05), 0 8px 24px rgba(16,20,24,.06);position:sticky;top:1rem}
@media (max-width:880px){.nx-results{position:static}}
.nx-out{padding:.9rem 0;border-top:1px dashed var(--nx-line-2)}
.nx-out:first-of-type{border-top:0;padding-top:0}
.nx-out-label{font-size:.85rem;font-weight:700;letter-spacing:.02em;color:var(--nx-muted);margin:0 0 .2rem}
.nx-out-value{font-family:var(--nx-display);font-size:clamp(1.7rem,1.3rem + 1.4vw,2.4rem);
    line-height:1.05;color:var(--nx-ink);margin:0}
.nx-out-note{margin:.3rem 0 0;font-size:.85rem;color:var(--nx-muted);line-height:1.5}
.nx-reset{margin-top:1rem}

.nx-doc{background:var(--nx-surface);border:1px solid var(--nx-line);border-radius:14px;
    padding:1.4rem 1.5rem;box-shadow:0 1px 2px rgba(16,20,24,.05), 0 8px 24px rgba(16,20,24,.06)}
.nx-doc h2{font-size:1.2rem;margin:1.8rem 0 .7rem;padding-top:1.2rem;border-top:1px solid var(--nx-line)}
.nx-doc h2:first-of-type{margin-top:0;padding-top:0;border-top:0}
.nx-check{list-style:none;margin:0;padding:0}
.nx-check li{display:flex;gap:.75rem;padding:.6rem 0;border-top:1px dashed var(--nx-line)}
.nx-check li:first-child{border-top:0}
.nx-check input[type=checkbox]{margin:.32rem 0 0;width:1.05rem;height:1.05rem;flex:0 0 auto;accent-color:var(--nx-btn)}
.nx-check .nx-check-label{font-weight:700;color:var(--nx-ink);display:block;margin:0 0 .18rem}
.nx-check .nx-check-detail{margin:0;font-size:.93rem;color:var(--nx-ink-soft);line-height:1.58}
.nx-toolbar{display:flex;flex-wrap:wrap;gap:.6rem;margin:1.2rem 0 0}

.nx-form{background:var(--nx-surface);border:1px solid var(--nx-line);border-radius:14px;
    padding:1.4rem;box-shadow:0 1px 2px rgba(16,20,24,.05), 0 8px 24px rgba(16,20,24,.06)}
.nx-form .nx-field input[type=text],.nx-form .nx-field input[type=email]{width:100%;
    border:1px solid var(--nx-line-2);border-radius:9px;background:var(--nx-bg);
    padding:.66rem .75rem;font-family:var(--nx-body);font-size:1rem;color:var(--nx-ink)}
.nx-form .nx-field input:focus{outline:0;border-color:var(--nx-btn);box-shadow:0 0 0 3px var(--nx-tint)}
.nx-consent{display:flex;gap:.6rem;align-items:flex-start;font-size:.9rem;color:var(--nx-ink-soft);line-height:1.55}
.nx-consent input{margin-top:.25rem;accent-color:var(--nx-btn)}
.nx-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.nx-cta{background:var(--nx-surface);border:1px solid var(--nx-line);border-radius:16px;
    padding:clamp(1.4rem,1rem + 1.6vw,2.2rem);box-shadow:0 1px 2px rgba(16,20,24,.05), 0 8px 24px rgba(16,20,24,.06)}
.nx-cta h2{margin-bottom:.4em}
.nx-cta p{max-width:64ch}
.nx-note{font-size:.87rem;color:var(--nx-muted);line-height:1.6;max-width:74ch}

.nx-pillar{margin:1.6rem 0;padding:1.05rem 1.2rem;background:var(--nx-soft);
    border:1px solid var(--nx-line);border-left:4px solid var(--nx-btn);border-radius:10px;
    font-size:.98rem;line-height:1.6}
.nx-pillar b{display:block;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;
    color:var(--nx-muted);margin-bottom:.3rem}
.nx-cluster{margin:2rem 0;padding:1.3rem 1.4rem;background:var(--nx-soft);
    border:1px solid var(--nx-line);border-radius:12px}
.nx-cluster h2{font-size:1.15rem;margin-bottom:.4em}
.nx-cluster ol{margin:.6rem 0 0;padding-left:1.2rem}
.nx-cluster li{margin:0 0 .5rem;line-height:1.55}
.nx-startpanel{margin:2.4rem auto 0;padding:1.5rem;background:var(--nx-soft);
    border:1px solid var(--nx-line);border-radius:14px}

@media print{
  .nx-hero,.nx-toolbar,.nx-form,.nx-cta,.nx-actions{display:none !important}
  .nx-doc{border:0;box-shadow:none;padding:0}
  .nx-check input[type=checkbox]{appearance:auto}
}
@media (prefers-reduced-motion:reduce){
  .nx-btn{transition:none}
  .nx-btn:hover{transform:none}
}