/* =====================================================================
   TripForCare — public stylesheet
   Direction C "Estimate": the written estimate is the product, so the
   site is built like one. Document conventions — labelled fields, boxed
   groups, reference numbers, verification ticks — instead of cards.

   Carried over from Direction A:
     .measure  a shared 0-60 day duration bar on every procedure
     .transit  the "Getting here" flight-time strip

   Rules this system holds to:
     - No border-radius anywhere (except 1px on measure fills).
     - No box-shadows. Separation comes from 1px rules.
     - Warm ochre (--figure) is reserved for hard numbers: money and
       duration. Everything else is ink, dim, or signal green.
     - Sections are divided by rules, not alternating tinted backgrounds.
   Mobile-first; breakpoints 640 / 760 / 1024 / 1280.
   ===================================================================== */

/* ---- Self-hosted faces (latin) — no third-party font request -------- */
@font-face {
  font-family: "Familjen Grotesk";
  src: url("../fonts/familjen-grotesk-var.woff2") format("woff2-variations");
  font-weight: 400 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Literata";
  src: url("../fonts/literata-var.woff2") format("woff2-variations");
  font-weight: 400 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "DM Mono";
  src: url("../fonts/dm-mono-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}

/* ---- Tokens -------------------------------------------------------- */
:root {
  --paper:    #f2f4f3;   /* cool clinical ground, green-biased — not cream */
  --field:    #ffffff;   /* document surface */
  --ink:      #16211d;
  --ink-2:    #2b3a34;
  --dim:      #5d6b64;
  --rule:     #cbd3ce;
  --rule-2:   #e0e6e2;
  --signal:   #0e6b4f;   /* verified / confirmed / primary action */
  --signal-d: #0a5540;
  --signal-t: #e4efe9;
  --figure:   #b05c27;   /* HARD NUMBERS ONLY: money + duration */
  --figure-t: #f4e7dc;
  --on-ink:   #e8ede9;
  --on-ink-d: #9dab a3;
  --on-ink-dim: #9daba3;
  --danger:   #9d2f1c;

  --display: "Familjen Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --body:    "Literata", Georgia, "Times New Roman", serif;
  --mono:    "DM Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --wrap: 74rem;
  --gut: clamp(1.15rem, 4vw, 2.75rem);

  --t-xs:   .7rem;
  --t-sm:   .82rem;
  --t-base: 1.0125rem;
  --t-md:   clamp(1.05rem, 1rem + .28vw, 1.16rem);
  --t-lg:   clamp(1.16rem, 1.08rem + .45vw, 1.4rem);
  --t-xl:   clamp(1.35rem, 1.15rem + .95vw, 1.95rem);
  --t-2xl:  clamp(1.7rem, 1.35rem + 1.7vw, 2.7rem);
  --t-3xl:  clamp(1.95rem, 1.4rem + 2.6vw, 3.15rem);
}

/* ---- Reset / base -------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--t-base);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
a { color: var(--signal); text-underline-offset: .16em; }
a:hover { color: var(--signal-d); }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
:target { scroll-margin-top: 5.5rem; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.028em;
  text-wrap: balance;
  color: var(--ink);
}
h1 { font-size: var(--t-3xl); }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-md); letter-spacing: -.018em; }
p { text-wrap: pretty; }

/* ---- Utilities ----------------------------------------------------- */
.wrap { width: min(100% - (var(--gut) * 2), var(--wrap)); margin-inline: auto; }
.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: 1rem; top: -3rem; z-index: 100;
  background: var(--ink); color: var(--paper); padding: .6rem 1rem;
  font-family: var(--display); font-weight: 700; transition: top .15s;
}
.skip-link:focus { top: 0; color: var(--paper); }

/* mono label — the system's connective tissue */
.label {
  font-family: var(--mono); font-size: var(--t-xs);
  letter-spacing: .12em; text-transform: uppercase; color: var(--dim);
}
.ref { font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.lede { font-size: var(--t-md); color: var(--dim); line-height: 1.55; }

/* ---- Buttons — square, no shadow ----------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 46px; padding: .65rem 1.25rem;
  font-family: var(--display); font-weight: 700; font-size: .95rem;
  letter-spacing: -.005em; text-decoration: none; white-space: nowrap;
  cursor: pointer; border: 1.5px solid transparent; background: var(--ink); color: var(--paper);
  transition: background .13s ease, color .13s ease, border-color .13s ease;
}
.btn:hover { background: #0b1512; color: var(--paper); }
.btn--signal { background: var(--signal); border-color: var(--signal); color: #fff; }
.btn--signal:hover { background: var(--signal-d); color: #fff; }
.btn--line { background: transparent; color: var(--ink); border-color: var(--rule); }
.btn--line:hover { background: var(--field); color: var(--ink); border-color: var(--ink); }
.btn--on-ink { background: transparent; color: var(--on-ink); border-color: rgba(232,237,233,.4); }
.btn--on-ink:hover { background: rgba(232,237,233,.1); color: #fff; }
.btn--lg { min-height: 52px; padding: .8rem 1.6rem; font-size: 1.02rem; }
.btn--block { width: 100%; }

/* ---- Header -------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--paper); border-bottom: 1px solid var(--rule);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: 66px;
}
.brand {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--display); font-weight: 700; font-size: 1.16rem;
  letter-spacing: -.03em; color: var(--ink); text-decoration: none;
}
.brand::before {
  content: ""; width: .68rem; height: .68rem; background: var(--signal); flex: none;
}
.nav-toggle {
  display: inline-grid; place-items: center; width: 46px; height: 46px;
  background: transparent; border: 1.5px solid var(--rule); cursor: pointer;
}
.nav-toggle__bar, .nav-toggle__bar::before, .nav-toggle__bar::after {
  content: ""; display: block; width: 19px; height: 1.5px; background: var(--ink);
  transition: transform .18s ease;
}
.nav-toggle__bar::before { transform: translateY(-6px); }
.nav-toggle__bar::after  { transform: translateY(4.5px); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar::before { transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar::after  { transform: rotate(-45deg); }

.site-nav { display: none; }
.site-nav.is-open {
  display: block; position: absolute; left: 0; right: 0; top: 100%;
  background: var(--paper); border-bottom: 1px solid var(--rule);
  padding: .5rem var(--gut) 1.25rem;
}
.site-nav ul { list-style: none; padding: 0; display: flex; flex-direction: column; }
.site-nav a {
  display: block; padding: .8rem .1rem; text-decoration: none; color: var(--ink);
  font-family: var(--display); font-weight: 500; border-bottom: 1px solid var(--rule-2);
}
.site-nav__cta { display: flex; flex-direction: column; gap: .55rem; margin-top: 1rem; }
@media (min-width: 1024px) {
  .nav-toggle { display: none; }
  .site-nav {
    display: flex !important; align-items: center; gap: 1.6rem;
    position: static; padding: 0; background: none; border: 0;
  }
  .site-nav ul { flex-direction: row; gap: 1.4rem; }
  .site-nav a { border: 0; padding: .3rem 0; font-size: .92rem; }
  .site-nav a:hover { color: var(--signal); }
  .site-nav__cta { flex-direction: row; margin: 0; }
  .site-nav__cta .btn { min-height: 40px; padding: .45rem 1rem; font-size: .88rem; }
}

/* ---- Sections ------------------------------------------------------ */
.section { padding-block: clamp(2.5rem, 5.5vw, 4.25rem); border-top: 1px solid var(--rule); }
.section--flush { border-top: 0; }
.section__head { margin-bottom: 1.75rem; max-width: 52rem; }
.section__head .label { display: block; margin-bottom: .55rem; }
.section__head p { margin-top: .55rem; color: var(--dim); max-width: 60ch; }

.band-ink { background: var(--ink); color: var(--on-ink); border-top: 0; }
.band-ink h2, .band-ink h3 { color: #fff; }
.band-ink p { color: var(--on-ink-dim); }
.band-ink .label { color: #b79a6d; }
.band-ink a { color: #fff; }

/* ---- Document primitives ------------------------------------------ */
.doc { background: var(--field); border: 1px solid var(--rule); }
.doc__head {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  padding: .55rem .85rem; border-bottom: 1px solid var(--rule);
  font-family: var(--mono); font-size: var(--t-xs);
  letter-spacing: .1em; text-transform: uppercase; color: var(--dim);
}
.stamp {
  color: var(--figure); border: 1px solid var(--figure);
  padding: .1rem .45rem; letter-spacing: .14em; white-space: nowrap;
}
.doc__fields { display: grid; grid-template-columns: 1fr 1fr; }
.f { padding: .7rem .85rem; border-bottom: 1px solid var(--rule); border-right: 1px solid var(--rule); }
.f:nth-child(2n) { border-right: 0; }
.f--wide { grid-column: 1 / -1; border-right: 0; }
.f dt {
  font-family: var(--mono); font-size: .62rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--dim); margin-bottom: .22rem;
}
.f dd { margin: 0; font-family: var(--display); font-weight: 500; font-size: .96rem; line-height: 1.34; }
.f dd small {
  display: block; font-family: var(--mono); font-weight: 400;
  font-size: .7rem; color: var(--dim); margin-top: .14rem; letter-spacing: .02em;
}
.f--figure dd {
  color: var(--figure); font-weight: 700; font-size: 1.22rem;
  font-variant-numeric: tabular-nums;
}
.f--pending dd { color: var(--dim); font-weight: 500; font-style: italic; }
.doc__foot {
  display: flex; align-items: center; gap: .45rem; padding: .6rem .85rem;
  font-family: var(--mono); font-size: var(--t-xs); color: var(--signal);
}
.tick {
  width: .95rem; height: .95rem; background: var(--signal); color: #fff; flex: none;
  display: grid; place-items: center; font-size: .58rem; line-height: 1;
}

/* ---- Hero ---------------------------------------------------------- */
.hero { padding-block: clamp(1.9rem, 4.5vw, 3.4rem) clamp(2.2rem, 5vw, 3.6rem); }
.hero__grid { display: grid; gap: 2rem; align-items: start; }
.hero__grid > * { min-width: 0; }
@media (min-width: 1024px) { .hero__grid { grid-template-columns: 1fr 1fr; gap: 3rem; } }
.hero h1 { margin-bottom: 1.05rem; max-width: 17ch; }
.hero .lede { max-width: 46ch; margin-bottom: 1.5rem; }
.hero__acts { display: flex; flex-wrap: wrap; gap: .7rem; margin-bottom: 1.4rem; }
.hero__assure { list-style: none; padding: 0; display: grid; gap: .45rem; }
.hero__assure li {
  display: grid; grid-template-columns: 1rem 1fr; gap: .55rem;
  font-size: var(--t-sm); color: var(--dim);
}
.hero__assure svg { margin-top: .32rem; color: var(--signal); }

/* ---- The shared 0-60 day measure (from Direction A) ---------------- */
.measure {
  position: relative; height: 1.3rem; background: var(--field);
  border: 1px solid var(--rule);
  background-image: repeating-linear-gradient(90deg, var(--rule-2) 0 1px, transparent 1px 25%);
}
.measure__fill {
  position: absolute; top: 3px; bottom: 3px;
  left: var(--from); width: var(--span);
  min-width: 3px; background: var(--figure); border-radius: 1px;
}
.measure--point .measure__fill { width: 4px; }
.measure-axis {
  display: flex; justify-content: space-between;
  font-family: var(--mono); font-size: .64rem; color: var(--dim);
  padding-top: .4rem;
}

/* procedure listing row */
.procs { border-top: 1px solid var(--rule); }
.proc {
  display: grid; gap: .35rem .95rem; padding: .8rem 0;
  border-bottom: 1px solid var(--rule); align-items: center;
  text-decoration: none; color: inherit;
}
@media (min-width: 760px) {
  .proc { grid-template-columns: minmax(0, 17rem) minmax(7rem, 1fr) 5.6rem; }
}
.proc:hover .proc__name { color: var(--signal); }
.proc__name { font-family: var(--display); font-weight: 700; font-size: .99rem; letter-spacing: -.012em; }
.proc__ref { display: block; margin-top: .1rem; }
.proc__days {
  font-family: var(--mono); font-size: .8rem; font-variant-numeric: tabular-nums;
  color: var(--ink);
}
@media (min-width: 760px) { .proc__days { text-align: right; } }
.proc__days em { font-style: normal; color: var(--dim); }
.procs-axis { padding-top: .1rem; }
@media (min-width: 760px) {
  .procs-axis { margin-left: 17.95rem; margin-right: 6.55rem; }
}
.measure-note {
  font-family: var(--mono); font-size: var(--t-xs); color: var(--dim);
  margin-top: 1rem; letter-spacing: .02em;
}

/* ---- Transit strip (from Direction A) ------------------------------ */
.transit { border-top: 1px solid rgba(232,237,233,.22); }
.transit__row {
  display: grid; grid-template-columns: minmax(0,7.5rem) minmax(3rem,1fr) 4.2rem;
  gap: 0 .9rem; align-items: center; padding: .5rem 0;
  border-bottom: 1px solid rgba(232,237,233,.13);
}
.transit__from { font-family: var(--display); font-weight: 500; font-size: .93rem; color: #fff; }
.transit__from span { display: block; font-family: var(--mono); font-size: .64rem; color: var(--on-ink-dim); letter-spacing: .06em; text-transform: uppercase; }
.transit__line { position: relative; height: 1px; background: rgba(232,237,233,.2); }
.transit__line::after {
  content: ""; position: absolute; left: 0; top: -2.5px; height: 6px;
  width: var(--w); background: var(--figure);
}
.transit__time {
  font-family: var(--mono); font-size: .82rem; text-align: right;
  font-variant-numeric: tabular-nums; color: #edc79b;
}
.transit-axis {
  display: flex; justify-content: space-between; padding-top: .45rem;
  font-family: var(--mono); font-size: .64rem; color: var(--on-ink-dim);
}
@media (min-width: 480px) { .transit-axis { margin-left: 8.4rem; margin-right: 5.1rem; } }

/* ---- Steps (numbering is real sequence, so numerals earn their place) */
.steps { display: grid; gap: 0; border-top: 1px solid var(--rule); }
@media (min-width: 860px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step { padding: 1.1rem 0; border-bottom: 1px solid var(--rule); }
@media (min-width: 860px) {
  .step { padding: 1.2rem 1.4rem 1.4rem 0; border-bottom: 0; border-right: 1px solid var(--rule); }
  .step:last-child { border-right: 0; padding-right: 0; }
  .step + .step { padding-left: 1.4rem; }
}
.step__n {
  font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .12em;
  color: var(--figure); display: block; margin-bottom: .45rem;
}
.step h3 { margin-bottom: .3rem; }
.step p { font-size: var(--t-sm); color: var(--dim); }

/* ---- Country desks ------------------------------------------------- */
.desks { border-top: 1px solid var(--rule); }
.desk {
  display: grid; gap: .15rem .95rem; padding: .75rem 0;
  border-bottom: 1px solid var(--rule); text-decoration: none; color: inherit;
  align-items: baseline;
}
@media (min-width: 700px) { .desk { grid-template-columns: minmax(0,14rem) minmax(0,1fr) auto; } }
.desk:hover .desk__name { color: var(--signal); }
.desk__name { font-family: var(--display); font-weight: 700; font-size: .98rem; letter-spacing: -.012em; }
.desk__note { font-size: var(--t-sm); color: var(--dim); }
.desk__go { font-family: var(--mono); font-size: var(--t-xs); color: var(--signal); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }

/* ---- Forms --------------------------------------------------------- */
.form-doc { background: var(--field); border: 1px solid var(--rule); }
.form-doc__head {
  padding: .6rem .95rem; border-bottom: 1px solid var(--rule);
  font-family: var(--mono); font-size: var(--t-xs);
  letter-spacing: .1em; text-transform: uppercase; color: var(--dim);
  display: flex; justify-content: space-between; gap: .6rem; flex-wrap: wrap;
}
.form-doc__body { padding: 1.15rem .95rem 1.35rem; }
@media (min-width: 640px) { .form-doc__body { padding: 1.5rem 1.35rem 1.6rem; } }
.field { margin-bottom: 1.05rem; }
.field > label, .field-legend {
  display: block; font-family: var(--mono); font-size: .64rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--dim);
  margin-bottom: .3rem;
}
.field .req { color: var(--danger); }
.field .hint { font-size: var(--t-sm); color: var(--dim); margin-top: .32rem; font-family: var(--body); }
.input, .textarea, .select {
  width: 100%; min-height: 46px; padding: .6rem .7rem;
  font-family: var(--display); font-size: .97rem;
  background: var(--field); color: var(--ink);
  border: 1.5px solid var(--rule);
  transition: border-color .12s ease, box-shadow .12s ease;
}
.select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--dim) 50%), linear-gradient(135deg, var(--dim) 50%, transparent 50%);
  background-position: calc(100% - 17px) calc(50% + 1px), calc(100% - 12px) calc(50% + 1px);
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
  padding-right: 2.2rem;
}
.textarea { min-height: 130px; resize: vertical; line-height: 1.55; }
.input:focus, .textarea:focus, .select:focus {
  outline: none; border-color: var(--signal); box-shadow: inset 0 0 0 1px var(--signal);
}
.field--error .input, .field--error .textarea, .field--error .select { border-color: var(--danger); }
.field__err { color: var(--danger); font-family: var(--display); font-weight: 500; font-size: var(--t-sm); margin-top: .3rem; }
.grid-2 { display: grid; gap: 0 1rem; }
@media (min-width: 640px) { .grid-2 { grid-template-columns: 1fr 1fr; } }

.check { display: grid; grid-template-columns: 1.3rem 1fr; gap: .6rem; align-items: start; font-size: var(--t-sm); color: var(--dim); }
.check input { width: 1.3rem; height: 1.3rem; margin-top: .12rem; accent-color: var(--signal); }
.hp { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }

.alert { padding: .85rem 1rem; margin-bottom: 1.25rem; font-size: var(--t-sm); border: 1px solid; }
.alert--ok { background: var(--signal-t); border-color: var(--signal); color: #0a3d2d; }
.alert--error { background: #f8e6e2; border-color: var(--danger); color: #5e1c0f; }

/* ---- Page hero / prose --------------------------------------------- */
.page-hero { padding-block: clamp(1.8rem, 4vw, 2.9rem); border-bottom: 1px solid var(--rule); }
.page-hero .label { display: block; margin-bottom: .5rem; }
.page-hero h1 { font-size: var(--t-2xl); margin-bottom: .55rem; }
.page-hero p { color: var(--dim); max-width: 56ch; }
.prose { max-width: 40rem; }
.prose h2 { font-size: var(--t-lg); margin: 2rem 0 .55rem; }
.prose p, .prose ul, .prose ol { margin-bottom: 1rem; }
.prose ul, .prose ol { padding-left: 1.2rem; }
.prose li { margin-bottom: .35rem; }
.prose code { font-family: var(--mono); font-size: .86em; background: var(--field); border: 1px solid var(--rule); padding: .06em .32em; }

/* ---- Breadcrumbs --------------------------------------------------- */
.crumbs { border-bottom: 1px solid var(--rule); background: var(--field); }
.crumbs ol {
  list-style: none; padding: .6rem 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: .3rem .5rem; align-items: baseline;
  font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .06em;
  text-transform: uppercase; color: var(--dim);
}
.crumbs li + li::before { content: "/"; margin-right: .5rem; color: var(--rule-2); }
.crumbs a { color: var(--dim); text-decoration: none; }
.crumbs a:hover { color: var(--signal); text-decoration: underline; }
.crumbs [aria-current] { color: var(--ink); }

/* ---- Pillar page layout ------------------------------------------- */
.pillar { display: grid; gap: 2rem; padding-top: clamp(1.6rem, 4vw, 2.5rem); }
.pillar > * { min-width: 0; }
@media (min-width: 1024px) {
  .pillar { grid-template-columns: minmax(0, 1fr) 20rem; gap: 3rem; align-items: start; }
  .pillar__side { position: sticky; top: 5.5rem; }
}
.pillar__body > .prose { max-width: 40rem; }
.pillar__h2 {
  font-size: var(--t-lg); margin: 2.25rem 0 .9rem;
  padding-top: 1.25rem; border-top: 1px solid var(--rule);
}
.pillar__body > p { max-width: 40rem; color: var(--dim); margin-bottom: 1rem; }
.pillar__side .measure { margin-top: .1rem; }
.side-block { margin-top: 1.5rem; padding-top: 1.1rem; border-top: 1px solid var(--rule); }
.side-block .label { display: block; margin-bottom: .6rem; }
.side-links { list-style: none; padding: 0; display: grid; gap: .35rem; }
.side-links a {
  font-family: var(--display); font-size: var(--t-sm); font-weight: 500;
  color: var(--ink); text-decoration: none;
}
.side-links a:hover { color: var(--signal); text-decoration: underline; }

/* ---- FAQs (details/summary — works with no JS) --------------------- */
.faqs { border-top: 1px solid var(--rule); max-width: 44rem; }
.faq { border-bottom: 1px solid var(--rule); }
.faq summary {
  cursor: pointer; list-style: none; padding: .9rem 2rem .9rem 0; position: relative;
  font-family: var(--display); font-weight: 700; font-size: var(--t-md);
  letter-spacing: -.015em; color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: .3rem; top: 50%; transform: translateY(-50%);
  font-family: var(--mono); font-size: 1.1rem; color: var(--signal); line-height: 1;
}
.faq[open] summary::after { content: "–"; }
.faq summary:hover { color: var(--signal); }
.faq__a { padding: 0 0 1.1rem; color: var(--dim); }
.faq__a p { margin-bottom: .7rem; }
.faq__a p:last-child { margin-bottom: 0; }

/* ---- Notices ------------------------------------------------------- */
.notice {
  background: var(--figure-t); border: 1px solid var(--figure);
  padding: .9rem 1.05rem; font-size: var(--t-sm); color: #6a3616;
}
.notice a { color: #6a3616; }
.notice code { font-family: var(--mono); font-size: .88em; }

/* ---- Footer -------------------------------------------------------- */
.site-footer { background: var(--ink); color: var(--on-ink-dim); margin-top: 0; }
.site-footer__grid { display: grid; gap: 1.9rem; padding: 2.75rem 0 1.9rem; }
@media (min-width: 760px) { .site-footer__grid { grid-template-columns: 1.7fr 1fr 1fr 1.2fr; gap: 2.4rem; } }
.site-footer__grid > * { min-width: 0; }
.site-footer .brand { color: #fff; font-size: 1.2rem; margin-bottom: .7rem; }
.site-footer p { font-size: var(--t-sm); line-height: 1.6; margin-bottom: .6rem; }
.site-footer__free { color: var(--on-ink); }
.site-footer__free b { color: #edc79b; font-weight: 600; }
.site-footer__col h2 {
  font-family: var(--mono); font-size: var(--t-xs); font-weight: 400;
  letter-spacing: .12em; text-transform: uppercase; color: #7e8d84; margin-bottom: .7rem;
}
.site-footer__col ul { list-style: none; padding: 0; display: grid; gap: .45rem; }
.site-footer__col a { color: var(--on-ink); text-decoration: none; font-size: var(--t-sm); }
.site-footer__col a:hover { color: #fff; text-decoration: underline; }
.site-footer__legal { border-top: 1px solid rgba(232,237,233,.14); padding: 1.1rem 0 2rem; }
.site-footer__legal p { font-size: var(--t-xs); font-family: var(--mono); color: #7e8d84; margin: 0; line-height: 1.7; }

/* ---- WhatsApp float ------------------------------------------------ */
.wa-float {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 60;
  width: 52px; height: 52px; display: grid; place-items: center;
  background: var(--signal); color: #fff; text-decoration: none;
  border: 1.5px solid var(--signal-d);
}
.wa-float:hover { background: var(--signal-d); color: #fff; }
@media (min-width: 1024px) { .wa-float { right: 1.5rem; bottom: 1.5rem; } }

/* ---- Medical review byline + disclaimer ---------------------------- */
.byline {
  display: flex; align-items: center; gap: .45rem; flex-wrap: wrap;
  font-family: var(--mono); font-size: var(--t-xs); color: var(--signal);
  padding-bottom: .9rem; margin-bottom: 1.1rem; border-bottom: 1px solid var(--rule);
}
.byline strong { font-family: var(--display); font-weight: 700; font-size: .82rem; color: var(--ink); }
.disclaimer {
  margin-top: 1.5rem; padding: .85rem 1rem; border-left: 2px solid var(--rule);
  font-size: var(--t-sm); color: var(--dim); max-width: 40rem;
}