/* ==========================================================================
   Design system
   --------------------------------------------------------------------------
   Tokens first, components second. Every page is built from the same set, so
   forty pages read as one site. Colour roles are named for their job, not
   their hue, so a rebrand is a change to six values at the top.
   ========================================================================== */

/* --- 1. Tokens ---------------------------------------------------------- */
:root {
  /* Colour — taken from the illustration set: deep sea green, sand, sun yellow */
  --forest:      #0d4b39;
  --forest-deep: #093528;
  --sea:         #167a60;
  --aqua:        #3fb39a;
  --aqua-pale:   #d9f0ea;
  --sun:         #f5b301;
  --sun-bright:  #ffc531;
  --sun-pale:    #fdf3d8;
  --sand:        #f7efe0;
  --sky:         #e2f2f8;
  --cream:       #fffdf8;
  --ink:         #10231d;
  --ink-soft:    #4a5d57;
  --line:        #e4e0d5;
  --white:       #ffffff;

  /* Roles */
  --bg:            var(--cream);
  --bg-alt:        #f6f3ea;
  --surface:       var(--white);
  --text:          var(--ink);
  --text-muted:    var(--ink-soft);
  --heading:       var(--forest);
  --accent:        var(--sun);
  --accent-ink:    #3a2a00;
  --border:        var(--line);
  --focus:         #0f6fd1;

  /* Type */
  --font-body: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-script: "Yellowtail", "Segoe Script", cursive;

  --step--1: 0.9375rem;
  --step-0:  1.0625rem;
  --step-1:  clamp(1.125rem, 1.06rem + 0.3vw, 1.25rem);
  --step-2:  clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --step-3:  clamp(1.5rem, 1.3rem + 1vw, 2.125rem);
  --step-4:  clamp(1.875rem, 1.5rem + 1.9vw, 2.75rem);
  --step-5:  clamp(2.25rem, 1.6rem + 3.1vw, 3.75rem);

  /* Space */
  --s1: 0.25rem;  --s2: 0.5rem;   --s3: 0.75rem;  --s4: 1rem;
  --s5: 1.5rem;   --s6: 2rem;     --s7: 3rem;     --s8: 4rem;
  --s9: 5.5rem;   --s10: 7rem;

  --radius-sm: 8px;
  --radius:    14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(13, 75, 57, .06), 0 2px 8px rgba(13, 75, 57, .05);
  --shadow:    0 4px 14px rgba(13, 75, 57, .08), 0 14px 34px rgba(13, 75, 57, .07);

  --container: 1180px;
  --measure: 68ch;
  /* Header height including its 1px border. The hero pulls itself up by exactly
     this much when the bar is transparent, so the two must stay in step. */
  --header-h: 73px;
}

/* --- 2. Reset ----------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.7;
  color: var(--text);
  background: var(--bg);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 {
  color: var(--heading);
  line-height: 1.18;
  letter-spacing: -0.02em;
  margin: 0 0 var(--s4);
  text-wrap: balance;
}
h1 { font-size: var(--step-4); font-weight: 800; }
h2 { font-size: var(--step-3); font-weight: 800; margin-top: var(--s7); }
h3 { font-size: var(--step-2); font-weight: 700; margin-top: var(--s6); }
h4 { font-size: var(--step-1); font-weight: 700; margin-top: var(--s5); }
p, ul, ol, table, figure, blockquote { margin: 0 0 var(--s4); }
a { color: var(--sea); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--forest); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
strong { font-weight: 700; color: var(--forest-deep); }
small { font-size: var(--step--1); }
hr { border: 0; border-top: 1px solid var(--border); margin: var(--s7) 0; }
table { border-collapse: collapse; width: 100%; }

/* Long server URLs and playlist snippets appear throughout the guides. Without
   these two rules a single unbroken URL is wider than a phone screen and drags
   the whole page sideways — the most common source of mobile horizontal scroll. */
code, kbd, samp {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.9em;
  overflow-wrap: anywhere;
  word-break: break-word;
}
code {
  background: var(--sun-pale);
  border: 1px solid #ecdcae;
  border-radius: 5px;
  padding: 1px 5px;
  color: #5c4708;
}
kbd {
  background: var(--white);
  border: 1px solid #c9c3b4;
  border-bottom-width: 2px;
  border-radius: 5px;
  padding: 1px 6px;
  color: var(--forest);
  font-size: 0.85em;
}
p, li, dd, td, th, h1, h2, h3, h4 { overflow-wrap: break-word; }
::selection { background: var(--sun-bright); color: var(--ink); }

/* --- 3. Layout ---------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 20px;
}
@media (max-width: 560px) { .wrap { padding-inline: 16px; } }

.section { padding-block: var(--s9); }
.section--tight { padding-block: var(--s7); }
.section--sand { background: var(--bg-alt); }
.section--sky  { background: var(--sky); }
.section--forest { background: var(--forest); color: #dbeee7; }
.section--forest h2, .section--forest h3 { color: var(--white); }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--forest); color: #fff; padding: var(--s3) var(--s5);
  border-radius: 0 0 var(--radius-sm) 0; font-weight: 600;
}
.skip-link:focus { left: 0; }

/* --- 4. Header ---------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 253, 248, .94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  transition: background-color .25s ease, border-color .25s ease;
}
/* On a page that opens with the hero illustration, the bar sits on the artwork
   with no background of its own — the way the reference design does it. app.js
   drops the attribute as soon as you scroll, so the bar becomes solid over
   ordinary content and the links stay readable. Without JS it stays solid,
   which is the safe direction to fail in. */
.site-header[data-transparent] {
  background: transparent;
  backdrop-filter: none;
  border-bottom-color: transparent;
}
/* The hero starts underneath the transparent bar rather than after it. */
body:has(.site-header[data-transparent]) .hero { margin-top: calc(var(--header-h) * -1); }
body:has(.site-header[data-transparent]) .hero-grid { padding-top: calc(var(--s7) + var(--header-h)); }
.header-inner {
  display: flex; align-items: center; gap: var(--s5);
  min-height: 72px;
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; }
.brand svg { width: 34px; height: 34px; }
.brand-name {
  font-family: var(--font-script);
  font-size: 1.65rem;
  color: var(--forest);
  line-height: 1;
  padding-top: 6px;
}
.brand-sub {
  display: block;
  font-family: var(--font-body);
  font-size: .5rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--sea);
  font-weight: 600;
  margin-top: 2px;
  padding-top: 0;
}
.brand-text { line-height: 1; }

.nav { margin-left: auto; }
.nav ul { display: flex; gap: var(--s5); list-style: none; margin: 0; padding: 0; align-items: center; }
.nav a {
  color: var(--forest);
  text-decoration: none;
  font-weight: 500;
  font-size: .975rem;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.nav a:hover { border-bottom-color: var(--aqua); }
.nav a[aria-current] { border-bottom-color: var(--sun); font-weight: 600; }
.header-cta { flex-shrink: 0; }
.nav-toggle { display: none; }

@media (max-width: 1020px) {
  .nav ul { gap: var(--s4); }
  .nav a { font-size: .9rem; }
}
@media (max-width: 900px) {
  .nav-toggle {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    margin-left: auto; flex: 0 0 44px; width: 44px; height: 44px; padding: 0 9px;
    background: none; border: 1px solid var(--border); border-radius: var(--radius-sm);
    cursor: pointer;
  }
  .nav-toggle span { display: block; width: 100%; height: 2px; background: var(--forest); border-radius: 2px; }
  .nav {
    position: fixed; inset: 72px 0 auto 0; margin: 0;
    background: var(--cream); border-bottom: 1px solid var(--border);
    max-height: calc(100dvh - 72px); overflow-y: auto;
    display: none; box-shadow: var(--shadow);
  }
  .nav[data-open="true"] { display: block; }
  .nav ul { flex-direction: column; align-items: stretch; gap: 0; padding: var(--s3) 20px var(--s5); }
  .nav li { border-bottom: 1px solid var(--border); }
  .nav a { display: block; padding: 14px 2px; font-size: 1.0625rem; border-bottom: 0; }
  .nav a[aria-current] { color: var(--sea); }
  /* The trial button is the page's job, so it stays in the bar on phones —
     but it is the first thing to go when the bar genuinely runs out of room. */
  .nav .nav-cta { display: block; margin-top: var(--s4); }
}
@media (min-width: 901px) { .nav .nav-cta { display: none; } }
@media (max-width: 480px) {
  .site-header .header-cta { display: none; }
  .brand-name { font-size: 1.45rem; }
}

/* --- 5. Buttons --------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 26px;
  font-family: inherit; font-size: 1rem; font-weight: 700;
  border-radius: var(--radius-pill);
  border: 2px solid transparent;
  text-decoration: none; cursor: pointer;
  transition: transform .12s ease, box-shadow .15s ease, background-color .15s ease;
  min-height: 48px;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn--primary { background: var(--sun); color: var(--accent-ink); box-shadow: 0 3px 0 #d39b00; }
.btn--primary:hover { background: var(--sun-bright); color: var(--accent-ink); }
.btn--ghost { background: transparent; color: var(--forest); border-color: var(--forest); }
.btn--ghost:hover { background: var(--forest); color: var(--white); }
.btn--light { background: var(--white); color: var(--forest); border-color: var(--white); }
.btn--light:hover { background: var(--sand); color: var(--forest); }
.btn--sm { padding: 9px 18px; font-size: .9375rem; min-height: 42px; }
.btn--block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }

/* --- 6. Hero ------------------------------------------------------------ */
/* Full-bleed illustration with the copy sitting on top of it. The scrim below is
   what makes that legible: the artwork's left third is sky and sea, so a cream
   gradient fading out towards the van keeps dark-green text well above the
   contrast floor without washing the picture out. */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--sky);
}
.hero-bg {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 74% center;
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(
    96deg,
    rgba(255, 253, 248, .95) 0%,
    rgba(252, 252, 247, .92) 32%,
    rgba(240, 249, 249, .74) 48%,
    rgba(230, 244, 249, .34) 62%,
    rgba(226, 242, 248, .06) 76%,
    rgba(226, 242, 248, 0) 88%
  );
}
.hero-grid {
  display: grid;
  align-items: center;
  min-height: clamp(460px, 48vw, 620px);
  padding-block: var(--s7);
}
.hero-inner { max-width: 31rem; }
.eyebrow {
  font-family: var(--font-script);
  font-size: 1.45rem; color: var(--sea);
  margin: 0 0 var(--s2);
}
.hero h1 {
  font-size: var(--step-5);
  text-transform: uppercase;
  letter-spacing: -0.028em;
  line-height: 1.02;
  margin-bottom: var(--s4);
}
.hero h1 em { font-style: normal; color: var(--sun); display: block; }
.hero-lede { font-size: var(--step-1); color: #33463f; max-width: 42ch; margin-bottom: var(--s5); }
/* The badge row sits outside .hero-inner so it can run wider than the text column —
   three badges need about 40rem, and inside a 31rem column they wrapped onto two lines. */
.hero-badges {
  display: flex; flex-wrap: wrap; gap: var(--s4) var(--s7);
  max-width: 41rem;
  margin-top: var(--s6); padding-top: var(--s5);
  border-top: 1px solid rgba(13, 75, 57, .16);
}
.hero-badge { display: flex; align-items: center; gap: 10px; }
.hero-badge svg { width: 30px; height: 30px; flex-shrink: 0; }
.hero-badge b { display: block; color: var(--forest); font-size: 1rem; line-height: 1.25; }
.hero-badge span { font-size: .875rem; color: var(--ink-soft); }

/* Narrower screens crop the artwork towards the van and need a vertical scrim
   instead of a horizontal one — there is no longer an empty left third to sit in. */
@media (max-width: 900px) {
  .hero-grid { min-height: 0; padding-block: var(--s7); }
  .hero-inner { max-width: none; }
  .hero-lede { max-width: none; }
  /* Three badges cannot fit across a phone, and 2-then-1 reads as a mistake.
     A single column is the honest layout at this width. */
  .hero-badges { flex-direction: column; gap: var(--s4); }
  .hero-bg { object-position: 72% 40%; }
  .hero::after {
    background: linear-gradient(
      180deg,
      rgba(255, 253, 248, .93) 0%,
      rgba(253, 253, 248, .90) 48%,
      rgba(243, 250, 250, .72) 78%,
      rgba(230, 245, 249, .56) 100%
    );
  }
}

/* --- 7. Cards ----------------------------------------------------------- */
.grid { display: grid; gap: var(--s5); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 960px) { .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--s5);
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
}
.card h3 { margin-top: 0; font-size: var(--step-1); }
.card p:last-child { margin-bottom: 0; }
.card-link { text-decoration: none; transition: transform .14s ease, box-shadow .16s ease; }
.card-link:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--aqua); }
.card-link p { color: var(--ink-soft); }
.card-more { margin-top: auto; padding-top: var(--s4); color: var(--sea); font-weight: 600; font-size: .9375rem; }
.card-more::after { content: " →"; }
.card-icon { width: 44px; height: 44px; margin-bottom: var(--s3); }

.feature-strip {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s5);
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: var(--s6); box-shadow: var(--shadow-sm);
  margin-top: calc(var(--s7) * -1); position: relative; z-index: 2;
}
.feature-strip .feat { display: flex; gap: var(--s3); align-items: flex-start; }
.feature-strip svg { width: 38px; height: 38px; flex-shrink: 0; }
.feature-strip h3 { font-size: 1.0625rem; margin: 0 0 4px; }
.feature-strip p { font-size: .9375rem; color: var(--ink-soft); margin: 0; }
@media (max-width: 960px) { .feature-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 0; } }
@media (max-width: 520px) { .feature-strip { grid-template-columns: 1fr; padding: var(--s5); } }

/* --- 8. Section headings ------------------------------------------------ */
.section-head { max-width: 62ch; margin-bottom: var(--s6); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head h2 { margin-top: 0; }
.section-head p { color: var(--ink-soft); font-size: var(--step-1); margin-bottom: 0; }

/* --- 9. Plans ----------------------------------------------------------- */
.plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4); align-items: stretch; }
@media (max-width: 1000px) { .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .plans { grid-template-columns: 1fr; } }
.plan {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow-sm);
  position: relative;
}
.plan--featured { border-color: var(--sea); box-shadow: 0 0 0 2px var(--aqua-pale), var(--shadow); }
.plan-flag {
  position: absolute; top: 0; right: 0;
  background: var(--forest); color: var(--white);
  font-size: .6875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 6px 12px; border-radius: 0 0 0 var(--radius-sm);
}
/* Proportions follow the reference design: a compact block of price and four
   benefits, the call to action, then the illustration closing the card. Anything
   longer and the four cards stop reading as one comparable row. */
.plan-body { padding: var(--s5) var(--s5) var(--s4); }
.plan-name { font-size: 1.0625rem; font-weight: 700; color: var(--forest); margin: 0 0 4px; }
.plan-price { font-size: 2.125rem; font-weight: 800; color: var(--forest); line-height: 1.05; letter-spacing: -0.03em; margin: 0; }
.plan-price sup { font-size: 1.0625rem; font-weight: 700; top: -0.72em; }
.plan-period { font-size: .8125rem; color: var(--ink-soft); margin: 5px 0 0; }
.plan-list { list-style: none; margin: var(--s4) 0; padding: 0; font-size: .9375rem; }
.plan-list li { position: relative; padding-left: 26px; margin-bottom: 7px; color: var(--ink-soft); line-height: 1.45; }
.plan-list li::before {
  content: ""; position: absolute; left: 0; top: .45em;
  width: 15px; height: 9px; border-left: 2.5px solid var(--sea); border-bottom: 2.5px solid var(--sea);
  transform: rotate(-45deg);
}
/* The illustration closes the card, flush to its bottom edge, the way the
   reference design does it — the call to action sits above it, not under it. */
.plan-figure {
  margin: 0; margin-top: auto;
  aspect-ratio: 2 / 1; overflow: hidden; background: var(--sky);
}
.plan-figure img { width: 100%; height: 100%; object-fit: cover; }

.guarantee {
  display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap;
  background: var(--aqua-pale); border-radius: var(--radius);
  padding: var(--s4) var(--s5); margin-top: var(--s5);
}
.guarantee svg { width: 34px; height: 34px; flex-shrink: 0; }
.guarantee b { color: var(--forest); }
.guarantee p { margin: 0; font-size: .9375rem; color: var(--ink-soft); }

/* --- 10. Article -------------------------------------------------------- */
.page-head { background: var(--bg-alt); border-bottom: 1px solid var(--border); padding-block: var(--s6) var(--s7); }
.page-head h1 { margin-bottom: var(--s3); max-width: 24ch; }
.page-head .lede { font-size: var(--step-1); color: var(--ink-soft); max-width: var(--measure); margin-bottom: 0; }

.breadcrumbs { font-size: .875rem; margin-bottom: var(--s4); color: var(--ink-soft); }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.breadcrumbs li:not(:last-child)::after { content: "/"; margin-left: 6px; color: var(--border); }
.breadcrumbs a { color: var(--sea); text-decoration: none; }
.breadcrumbs a:hover { text-decoration: underline; }
.breadcrumbs [aria-current] { color: var(--ink-soft); }

.layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--s8); align-items: start; padding-block: var(--s7) var(--s9); }
@media (max-width: 960px) { .layout { grid-template-columns: 1fr; gap: var(--s7); } }

.prose { max-width: var(--measure); font-size: 1.0625rem; }
.prose > h2:first-child { margin-top: 0; }
.prose ul, .prose ol { padding-left: 1.35em; }
.prose li { margin-bottom: 8px; }
.prose li::marker { color: var(--aqua); }
.prose a { font-weight: 500; }
.prose figure { margin: var(--s6) 0; }
.prose figure img { border-radius: var(--radius); box-shadow: var(--shadow-sm); width: 100%; }
.prose figcaption { font-size: .875rem; color: var(--ink-soft); margin-top: var(--s2); }

.answer {
  background: var(--sun-pale);
  border-left: 4px solid var(--sun);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: var(--s4) var(--s5);
  margin-bottom: var(--s6);
  font-size: var(--step-1);
}
.answer p:last-child { margin-bottom: 0; }

.note {
  background: var(--aqua-pale); border-radius: var(--radius);
  padding: var(--s4) var(--s5); margin: var(--s5) 0;
  font-size: .9375rem;
}
.note p:last-child { margin-bottom: 0; }
.note strong { display: block; margin-bottom: 4px; }

.steps { list-style: none; counter-reset: step; padding: 0; margin: var(--s5) 0; }
.steps > li {
  counter-increment: step; position: relative;
  padding: 0 0 var(--s5) 52px; margin: 0;
  border-left: 2px solid var(--border); margin-left: 17px;
}
.steps > li:last-child { border-left-color: transparent; padding-bottom: 0; }
.steps > li::before {
  content: counter(step);
  position: absolute; left: -18px; top: -2px;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--forest); color: var(--white);
  font-weight: 700; font-size: .9375rem;
  display: grid; place-items: center;
}
.steps h3 { margin: 0 0 var(--s2); font-size: var(--step-1); }
.steps p:last-child { margin-bottom: 0; }

.table-scroll { overflow-x: auto; margin: var(--s5) 0; -webkit-overflow-scrolling: touch; }
.table-scroll table { min-width: 520px; font-size: .9375rem; }
th, td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--border); vertical-align: top; }
th { background: var(--bg-alt); color: var(--forest); font-weight: 700; font-size: .875rem; }
tbody tr:last-child td { border-bottom: 0; }
.table-scroll table { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }

.faq { margin: var(--s5) 0; border-top: 1px solid var(--border); }
.faq details { border-bottom: 1px solid var(--border); }
.faq summary {
  cursor: pointer; padding: var(--s4) 34px var(--s4) 0; position: relative;
  font-weight: 600; color: var(--forest); font-size: 1.0625rem; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 6px; top: 50%;
  width: 10px; height: 10px; margin-top: -7px;
  border-right: 2px solid var(--sea); border-bottom: 2px solid var(--sea);
  transform: rotate(45deg); transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -3px; }
.faq details > div { padding: 0 0 var(--s4); color: var(--ink-soft); }
.faq details > div p:last-child { margin-bottom: 0; }

/* --- 11. Sidebar -------------------------------------------------------- */
.sidebar { position: sticky; top: 96px; display: flex; flex-direction: column; gap: var(--s5); }
@media (max-width: 960px) { .sidebar { position: static; } }
.side-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius); padding: var(--s5); box-shadow: var(--shadow-sm);
}
.side-card h2, .side-card h3 { font-size: 1rem; margin: 0 0 var(--s3); text-transform: uppercase; letter-spacing: .08em; color: var(--sea); }
.side-card ul { list-style: none; margin: 0; padding: 0; font-size: .9375rem; }
.side-card li { border-bottom: 1px solid var(--border); }
.side-card li:last-child { border-bottom: 0; }
.side-card a { display: block; padding: 9px 0; text-decoration: none; color: var(--forest); }
.side-card a:hover { color: var(--sea); text-decoration: underline; }
.side-cta { background: var(--forest); color: #cfe7de; border-color: var(--forest); }
.side-cta h3 { color: var(--sun); }
.side-cta p { font-size: .9375rem; margin-bottom: var(--s4); }

/* --- 12. Related links -------------------------------------------------- */
.related { border-top: 1px solid var(--border); margin-top: var(--s7); padding-top: var(--s6); }
.related h2 { margin-top: 0; font-size: var(--step-2); }

/* --- 13. CTA band ------------------------------------------------------- */
.cta-band { position: relative; isolation: isolate; overflow: hidden; }
.cta-band img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.cta-band::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, rgba(255, 253, 248, .93) 0%, rgba(255, 253, 248, .78) 46%, rgba(226, 242, 248, .3) 100%);
}
.cta-band .wrap { padding-block: var(--s8); }
.cta-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s6); flex-wrap: wrap; }
.cta-inner h2 { margin: 0 0 var(--s2); max-width: 18ch; text-transform: uppercase; font-size: var(--step-3); }
.cta-inner h2 em { font-style: normal; color: var(--sun); }
.cta-inner p { margin: 0; color: var(--ink-soft); }

/* --- 14. Footer --------------------------------------------------------- */
.site-footer { background: var(--forest-deep); color: #a9c8bd; font-size: .9375rem; }
.footer-top { display: grid; grid-template-columns: 1.4fr repeat(5, minmax(0, 1fr)); gap: var(--s6) var(--s5); padding-block: var(--s8) var(--s7); }
@media (max-width: 1040px) { .footer-top { grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 680px)  { .footer-top { grid-template-columns: 1fr 1fr; gap: var(--s5) var(--s4); } }
@media (max-width: 420px)  { .footer-top { grid-template-columns: 1fr; } }
.footer-brand { max-width: 34ch; }
@media (max-width: 1040px) { .footer-brand { grid-column: 1 / -1; max-width: 52ch; } }
.footer-brand .brand-name { color: var(--white); }
.footer-brand .brand-sub { color: var(--aqua); }
.footer-brand p { margin: var(--s4) 0 0; }
.footer-col h2 { font-size: .8125rem; text-transform: uppercase; letter-spacing: .12em; color: var(--sun); margin: 0 0 var(--s3); }
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 9px; }
.footer-col a { color: #cfe3db; text-decoration: none; }
.footer-col a:hover { color: var(--white); text-decoration: underline; }
.footer-contact { list-style: none; margin: var(--s5) 0 0; padding: 0; }
.footer-contact li { display: flex; gap: 10px; margin-bottom: 10px; align-items: center; }
.footer-contact svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--aqua); }
.footer-contact a { color: var(--white); text-decoration: none; }
.footer-contact a:hover { text-decoration: underline; }
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .12);
  padding-block: var(--s5);
  display: flex; justify-content: space-between; gap: var(--s4); flex-wrap: wrap;
  font-size: .875rem;
}
.footer-bottom p { margin: 0; }
.footer-bottom a { color: #cfe3db; }

/* --- 14b. Contact methods (light card version of the footer list) -------- */
.contact-list { list-style: none; margin: 0 0 var(--s4); padding: 0; }
.contact-list li { display: flex; gap: 12px; align-items: baseline; margin-bottom: 14px; }
.contact-list svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--sea); align-self: center; }
.contact-list b { color: var(--forest); }
.contact-list a { color: var(--sea); font-weight: 500; overflow-wrap: anywhere; }

/* --- 15. Forms ---------------------------------------------------------- */
.form { display: grid; gap: var(--s4); max-width: 580px; }
.field { display: grid; gap: 6px; }
.field label { font-weight: 600; color: var(--forest); font-size: .9375rem; }
.field .hint { font-size: .8125rem; color: var(--ink-soft); }
.field input, .field select, .field textarea {
  font-family: inherit; font-size: 1rem; color: var(--ink);
  padding: 12px 14px; border: 1px solid #cdc8ba; border-radius: var(--radius-sm);
  background: var(--white); width: 100%;
}
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { border-color: var(--sea); }
.field textarea { min-height: 140px; resize: vertical; }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: #b4372c; background: #fdf3f2; }
.field-error { color: #b4372c; font-size: .875rem; min-height: 0; }
.form-status { border-radius: var(--radius-sm); padding: var(--s3) var(--s4); font-size: .9375rem; }
.form-status[data-state="ok"] { background: var(--aqua-pale); color: var(--forest); }
.form-status[data-state="error"] { background: #fdf3f2; color: #8f2c23; }

/* --- 16. Utilities ------------------------------------------------------ */
.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;
}
.lead { font-size: var(--step-1); color: var(--ink-soft); }
.muted { color: var(--ink-soft); }
.center { text-align: center; }
.mt-0 { margin-top: 0; }
.pill {
  display: inline-block; background: var(--aqua-pale); color: var(--forest);
  border-radius: var(--radius-pill); padding: 4px 12px;
  font-size: .8125rem; font-weight: 600;
}
.stat-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s5); text-align: center; }
@media (max-width: 700px) { .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.stat b { display: block; font-size: var(--step-3); color: var(--sun); font-weight: 800; line-height: 1.1; }
.stat span { font-size: .9375rem; }
.checklist { list-style: none; padding: 0; }
.checklist li { position: relative; padding-left: 30px; margin-bottom: 10px; }
.checklist li::before {
  content: ""; position: absolute; left: 2px; top: .5em;
  width: 16px; height: 9px; border-left: 2.5px solid var(--sea); border-bottom: 2.5px solid var(--sea);
  transform: rotate(-45deg);
}
.crosslist { list-style: none; padding: 0; }
.crosslist li { position: relative; padding-left: 30px; margin-bottom: 10px; }
.crosslist li::before { content: "×"; position: absolute; left: 6px; top: -1px; color: #b4372c; font-size: 1.3rem; font-weight: 700; }