/* ============================================================================
   PlanRhythm.in — Navy & Gold.

   The idea in one line: a warm cream page with white cards, navy for structure
   and authority, and gold reserved almost entirely for the one thing you want
   clicked.

   Three deliberate departures from the base handoff, each measured:

   1. ACCENT TEXT IS DARKER.  The handoff's own contrast table admits gold-deep
      #A0701F is 3.9:1 on cream and rust #C75D38 is 3.7:1 — both fail AA for
      normal text, and both are used at 12-13px in chips. Measured against the
      TINT grounds they actually sit on, they fail harder still. The deep
      siblings below clear AA on cream, on card, and on their own tint.

   2. TYPE.  Caprasimo stays as the display face here, unlike the product app,
      and that is not an inconsistency: this site is Latin-only marketing copy,
      whereas the app ships Devanagari and Tamil, for which Caprasimo has zero
      glyphs. Same brand, different constraint, deliberate divergence.

   3. LOGICAL PROPERTIES throughout, as the handoff insists. Nothing here says
      left or right. The day a Hindi or Gujarati edition ships, direction and
      mirroring come free.
   ========================================================================== */

/* Self-hosted copies of the two brand faces. Keeping them here avoids a
   third-party font request before a visitor has chosen to contact us. */
@font-face {
  font-family: 'Caprasimo';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/caprasimo-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Caprasimo';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/caprasimo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/figtree-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/figtree-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Figtree';
  font-style: italic;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/figtree-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Figtree';
  font-style: italic;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/figtree-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* --- brand ------------------------------------------------------------ */
  --navy:        #0B1A3C;
  --navy-800:    #122449;
  --navy-700:    #1B2E58;
  --gold:        #E6B23E;   /* FILL only — 1.7:1 on cream, never a text colour */
  --gold-deep:   #7C5717;   /* 5.76:1 on cream · the small-text sibling       */
  --cream:       #F5F1E6;
  --cream-deep:  #ECE5D4;
  --card:        #FFFDF8;   /* never pure white; the page is warm            */
  --rust:        #C75D38;
  --rust-deep:   #9C4527;
  --sage:        #4FB594;
  --sage-deep:   #2B6250;
  --ink:         #3a3f4d;   /* paragraphs. headings stay navy                */
  --muted:       #5F6573;   /* 5.17:1 — the floor for any text               */

  /* --- lines. WCAG 1.4.11 wants 3:1 for anything that CARRIES meaning ----
     --line-strong is for control boundaries (inputs, selects): a field whose
     edge you cannot see is a field you cannot find. 3.90:1 on card.
     --rule is for decorative hairlines (card edges, dividers) which are NOT
     the sole means of identifying anything, so they may sit below 3:1 — but
     not at the 1.00:1 they were, which is literally invisible.            */
  --line-strong: #7A808D;
  --rule:        rgba(11, 26, 60, .22);

  /* --- tints: base colour at low alpha, never new hexes ------------------ */
  --gold-tint:   rgba(230, 178, 62, 0.18);
  --sage-tint:   rgba(79, 181, 148, 0.16);
  --rust-tint:   rgba(199, 93, 56, 0.13);
  --navy-tint:   rgba(11, 26, 60, 0.08);

  /* --- shape: pills for interaction, big soft radii for containers ------- */
  --r-pill:      999px;
  --r-card:      22px;
  --r-sm:        18px;
  --r-xs:        12px;

  /* --- elevation: navy-tinted, never black ------------------------------ */
  --sh-1: 0 1px 2px rgba(11, 26, 60, .06);
  --sh-2: 0 2px 10px rgba(11, 26, 60, .08);
  --sh-3: 0 8px 26px rgba(11, 26, 60, .14);

  --display: 'Caprasimo', Georgia, 'Times New Roman', serif;
  --body: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --container: 1160px;
}

/* ---------------------------------------------------------------- reset -- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
/* The header is sticky (~59px). Without this, every in-page jump link lands
   with its target hidden underneath it. */
main[id], section[id] { scroll-margin-block-start: 76px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

/* ----------------------------------------------------------------- type -- */
h1, h2, h3 {
  font-family: var(--display);
  font-weight: 400;              /* Caprasimo has one weight. Never synthesise. */
  color: var(--navy);
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: clamp(34px, 5vw, 56px); line-height: 1.08; letter-spacing: -.01em; }
h2 { font-size: clamp(27px, 3.4vw, 36px); line-height: 1.16; }
h3 { font-size: 21px; line-height: 1.25; }
h4 { font-family: var(--body); font-size: 16px; font-weight: 800; color: var(--navy); margin: 0 0 .4em; }

p { margin: 0 0 1rem; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

.lead { font-size: clamp(16px, 1.6vw, 19px); color: var(--ink); max-width: 62ch; }

/* the signature micro-label */
.eyebrow {
  font-size: 12px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--gold-deep);
  margin: 0 0 .75rem;
}
.eyebrow--on-navy { color: var(--gold); }

a { color: var(--navy); text-decoration: none; }
p a, li a { text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--gold-deep); }

/* Focus ring is NAVY, not gold. Gold is 1.72:1 on cream — a focus indicator
   nobody can see fails WCAG 1.4.11 and strands keyboard users. Navy is
   15.16:1 on cream. On navy surfaces the ring flips to gold (8.80:1). */
:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}
.section--navy :focus-visible,
.card--navy :focus-visible,
.site-footer :focus-visible { outline-color: var(--gold); }

.skip {
  position: absolute; inset-inline-start: -9999px; top: 0;
  background: var(--gold); color: var(--navy); padding: 10px 18px;
  border-radius: var(--r-pill); font-weight: 700; z-index: 100;
}
.skip:focus { inset-inline-start: 12px; top: 12px; }

/* --------------------------------------------------------------- layout -- */
.container { max-width: var(--container); margin-inline: auto; padding-inline: clamp(16px, 4vw, 40px); }
.section { padding-block: clamp(44px, 6vw, 84px); }
.section--deep { background: var(--cream-deep); }
.section--navy { background: var(--navy); color: rgba(245, 241, 230, .84); }
.section--navy h1, .section--navy h2, .section--navy h3, .section--navy h4 { color: var(--cream); }
.section--navy .lead { color: rgba(245, 241, 230, .84); }

.narrow { max-width: 760px; }
.center { text-align: center; margin-inline: auto; }

.grid { display: grid; gap: 20px; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

.stack > * + * { margin-block-start: var(--gap, 1rem); }

/* -------------------------------------------------------------- buttons -- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  font-family: var(--body); font-weight: 700; font-size: 15px;
  padding: 11px 22px; border-radius: var(--r-pill);
  border: 2px solid transparent; cursor: pointer;
  transition: box-shadow .15s ease, background-color .15s ease, transform .15s ease;
  text-align: center;
}
.btn--gold { background: var(--gold); color: var(--navy); box-shadow: var(--sh-2); }
.btn--gold:hover { color: var(--navy); box-shadow: var(--sh-3); transform: translateY(-1px); }
.btn--navy { background: var(--navy); color: var(--cream); }
.btn--navy:hover { background: var(--navy-700); color: var(--cream); }
.btn--outline { border-color: var(--navy); color: var(--navy); }
.btn--outline:hover { background: var(--navy-tint); color: var(--navy); }
.btn--outline-cream { border-color: rgba(245,241,230,.5); color: var(--cream); }
.btn--outline-cream:hover { background: rgba(245,241,230,.1); color: var(--cream); }
.btn--ghost { color: var(--gold-deep); padding-inline: 6px; }
.btn--lg { padding: 15px 34px; font-size: 17px; }
.btn--sm { padding: 7px 16px; font-size: 13px; }
.btn--block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.btn-row--center { justify-content: center; }

/* ---------------------------------------------------------------- cards -- */
.card {
  background: var(--card); border-radius: var(--r-card);
  box-shadow: var(--sh-2); padding: 24px;
}
.card--hover { transition: box-shadow .15s ease, transform .15s ease; }
.card--hover:hover { box-shadow: var(--sh-3); transform: translateY(-2px); }
.card--flat { box-shadow: none; border: 1px solid var(--rule); }
.card--navy { background: var(--navy-800); color: rgba(245,241,230,.84); border: 1px solid var(--navy-700); box-shadow: none; }
.card--navy h3, .card--navy h4 { color: var(--cream); }

/* ---------------------------------------------------------------- chips -- */
.chip {
  display: inline-flex; align-items: center; gap: .4em;
  padding: 5px 13px; border-radius: var(--r-pill);
  font-size: 13px; font-weight: 700; letter-spacing: .02em;
}
.chip--gold { background: var(--gold-tint); color: var(--gold-deep); }
.chip--sage { background: var(--sage-tint); color: var(--sage-deep); }
.chip--rust { background: var(--rust-tint); color: var(--rust-deep); }
.chip--navy { background: var(--navy-tint); color: var(--navy); }
.chip--neutral { background: var(--cream-deep); color: var(--ink); }
.chip--on-navy { background: rgba(245,241,230,.12); color: var(--cream); }

/* --------------------------------------------------------------- header -- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(245, 241, 230, .92);
  backdrop-filter: blur(10px);
  border-block-end: 1px solid var(--rule);
  transition: box-shadow .18s ease, background-color .18s ease;
}
.site-header[data-scrolled='true'] { background: rgba(245, 241, 230, .97); box-shadow: var(--sh-2); }
.nav { display: flex; align-items: center; gap: 18px; padding-block: 14px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--display); font-size: 22px; color: var(--navy); }
.brand__mark { width: 30px; height: 30px; flex: none; }
.nav__links { display: flex; align-items: center; gap: 4px; margin-inline-start: auto; }
.nav__links a {
  padding: 8px 14px; border-radius: var(--r-pill); font-weight: 600; font-size: 15px; color: var(--navy);
}
.nav__links a:hover { background: var(--navy-tint); }
.nav__links a[aria-current='page'] { background: var(--gold-tint); color: var(--gold-deep); font-weight: 700; }
.nav__cta { margin-inline-start: 6px; }

.nav__toggle {
  display: none; margin-inline-start: auto;
  background: transparent; border: 2px solid var(--navy); color: var(--navy);
  border-radius: var(--r-pill); padding: 7px 14px; font-weight: 700; cursor: pointer;
}

@media (max-width: 880px) {
  .nav__toggle { display: inline-flex; }
  .nav__links {
    display: none; position: absolute; inset-inline: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 2px;
    background: var(--cream); border-block-end: 1px solid var(--cream-deep);
    padding: 10px clamp(16px, 4vw, 40px) 18px;
    box-shadow: var(--sh-2);
  }
  .nav__links[data-open='true'] { display: flex; }
  .nav__links a { padding: 12px 14px; }
  .nav__cta { margin-inline-start: 0; margin-block-start: 6px; }
}

/* ----------------------------------------------------------------- hero -- */
.hero {
  position: relative; overflow: clip;
  padding-block: clamp(48px, 8vw, 104px) clamp(40px, 6vw, 76px);
  background:
    radial-gradient(circle at 88% 12%, rgba(230,178,62,.18), transparent 30%),
    radial-gradient(circle at 8% 88%, rgba(79,181,148,.09), transparent 26%);
}
.hero > .container { position: relative; z-index: 1; }
.hero__grid { display: grid; gap: clamp(28px, 5vw, 56px); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 940px) { .hero__grid { grid-template-columns: 1.05fr .95fr; } }

.hero h1 span { color: var(--gold-deep); }

/* --------------------------------------------------------- product art -- */
/* Drawn in CSS rather than shipped as a screenshot: a screenshot of a product
   still being built dates the moment it changes, and a fabricated one would be
   a picture of something that does not exist. These are honest abstractions. */
.phone {
  width: min(300px, 100%); margin-inline: auto;
  background: var(--navy); border-radius: 34px; padding: 12px;
  box-shadow: var(--sh-3);
}
.phone__screen { background: var(--cream); border-radius: 24px; padding: 18px 16px; }
.phone__bar { height: 4px; width: 84px; background: rgba(245,241,230,.35); border-radius: 999px; margin: 0 auto 10px; }

.task {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--card); border-radius: var(--r-sm); padding: 12px 14px;
  box-shadow: var(--sh-1); margin-block-end: 10px;
}
.task__time { font-size: 12px; font-weight: 800; color: var(--gold-deep); letter-spacing: .04em; white-space: nowrap; }
.task__title { font-weight: 700; color: var(--navy); font-size: 14px; }
.task__meta { font-size: 12.5px; color: var(--muted); }

.rail { display: flex; gap: 6px; justify-content: space-between; margin-block-end: 14px; }
.rail__day {
  flex: 1; text-align: center; font-size: 11px; font-weight: 700;
  color: var(--muted); padding: 6px 0; border-radius: var(--r-xs);
  background: var(--cream-deep);
}
.rail__day--now { background: var(--gold); color: var(--navy); }

/* --------------------------------------------------------- weekly review -- */
.review-layout { display: grid; gap: clamp(28px, 5vw, 58px); align-items: center; }
@media (min-width: 920px) { .review-layout { grid-template-columns: .88fr 1.12fr; } }

.review-points { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 14px; }
.review-points li { display: grid; grid-template-columns: 24px 1fr; gap: 11px; align-items: start; }
.review-points li::before {
  content: ''; width: 20px; height: 20px; margin-top: 2px; border-radius: 50%;
  background: var(--gold-tint);
  box-shadow: inset 0 0 0 6px var(--gold);
}

.week-review {
  overflow: hidden; border-radius: 28px; background: var(--card);
  border: 1px solid var(--rule); box-shadow: var(--sh-3);
}
.week-review__head {
  display: flex; justify-content: space-between; gap: 18px; align-items: flex-start;
  padding: clamp(20px, 4vw, 30px); background: var(--navy); color: rgba(245,241,230,.76);
}
.week-review__head h3 { color: var(--cream); margin-bottom: .2em; }
.week-review__head p { font-size: 13px; }
.week-review__head .chip { flex: none; }
.week-review__body { padding: clamp(20px, 4vw, 30px); }
.week-review__total {
  display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: end;
  padding-bottom: 20px; border-bottom: 1px solid var(--rule);
}
.week-review__total strong { display: block; font-family: var(--display); font-size: 42px; line-height: 1; color: var(--navy); font-weight: 400; }
.week-review__total span { font-size: 13px; color: var(--muted); }
.week-review__score { text-align: end; }
.week-review__score strong { font-family: var(--body); font-size: 14px; font-weight: 800; }
.week-review__rows { display: grid; gap: 15px; margin-top: 22px; }
.week-review__row { display: grid; grid-template-columns: minmax(145px, 1fr) 2fr 30px; gap: 12px; align-items: center; }
.week-review__label { font-size: 13px; font-weight: 700; color: var(--navy); }
.week-review__bar { height: 8px; border-radius: var(--r-pill); background: var(--navy-tint); overflow: hidden; }
.week-review__bar span { display: block; width: calc(var(--count) * 5%); min-width: 8px; height: 100%; border-radius: inherit; background: var(--navy); }
.week-review__n { font-size: 13px; font-weight: 800; color: var(--navy); text-align: end; }
.week-review__notes {
  display: grid; gap: 10px; margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--rule);
}
.week-review__note { background: var(--cream); border-radius: var(--r-xs); padding: 12px 14px; font-size: 13.5px; }
.week-review__note strong { color: var(--navy); }
.week-review__foot {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center;
  padding: 15px clamp(20px, 4vw, 30px); background: var(--cream-deep); color: var(--muted); font-size: 12.5px;
}
.week-review__foot strong { color: var(--navy); }
@media (max-width: 560px) {
  .week-review__head { display: grid; }
  .week-review__row { grid-template-columns: minmax(124px, 1fr) 1fr 24px; gap: 8px; }
  .week-review__score { text-align: start; }
}

/* -------------------------------------------------------------- feature -- */
.feature { display: flex; gap: 14px; align-items: flex-start; }
.feature__icon {
  flex: none; width: 42px; height: 42px; border-radius: var(--r-xs);
  display: grid; place-items: center; background: var(--gold-tint); color: var(--gold-deep);
}
.feature__icon svg { width: 22px; height: 22px; }
.feature h3, .feature h4 { margin-block-end: .25em; }

/* --------------------------------------------------------------- markets -- */
.market-grid { display: grid; gap: 22px; }
.market-card {
  background: var(--card); border: 1px solid var(--rule); border-block-start: 4px solid var(--gold);
  border-radius: var(--r-card); padding: clamp(22px, 4vw, 32px); box-shadow: var(--sh-1);
}
.market-card__head { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; margin-block-end: 14px; }
.market-card__head h2, .market-card__head h3 { margin: 0; }
.market-facts { display: grid; gap: 0; margin-block-start: 22px; border-block: 1px solid var(--rule); }
.market-facts > div { display: grid; grid-template-columns: minmax(120px, .7fr) 2fr; gap: 18px; padding-block: 12px; border-block-end: 1px solid var(--rule); }
.market-facts > div:last-child { border-block-end: 0; }
.market-facts dt { color: var(--navy); font-weight: 800; }
.market-facts dd { margin: 0; }
.market-nav { display: flex; flex-wrap: wrap; gap: 9px; margin-block-start: 24px; }
.market-note { background: var(--gold-tint); border-radius: var(--r-sm); padding: 18px 20px; color: var(--navy); }
@media (max-width: 620px) {
  .market-facts > div { grid-template-columns: 1fr; gap: 3px; }
}

/* --------------------------------------------------------------- pricing -- */
.price { font-family: var(--display); font-size: 40px; color: var(--navy); line-height: 1; }
.price small { font-family: var(--body); font-size: 14px; font-weight: 600; color: var(--muted); }
.plan { display: flex; flex-direction: column; height: 100%; }
.plan--featured { border: 2px solid var(--gold); position: relative; }
.plan__list { list-style: none; padding: 0; margin: 18px 0; display: grid; gap: 10px; }
.plan__list li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; }
.plan__list svg { flex: none; width: 18px; height: 18px; color: var(--sage-deep); margin-top: 2px; }
.plan__cta { margin-top: auto; }

/* ----------------------------------------------------------------- form -- */
.field { display: grid; gap: 6px; margin-block-end: 16px; }
.label { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--navy); }
.input, .textarea, .select {
  font-family: var(--body); font-size: 16px; /* 16px or iOS zooms on focus */
  color: var(--navy); background: var(--card);
  border: 2px solid var(--line-strong); border-radius: var(--r-pill);
  padding: 11px 18px; width: 100%;
}
.textarea { border-radius: var(--r-sm); min-height: 130px; resize: vertical; }
/* Placeholders carry real instructions here, so they are held to the 4.5:1
   text floor, not the 2.34:1 they were. */
.input::placeholder, .textarea::placeholder { color: var(--muted); opacity: 1; }
.input:focus, .textarea:focus, .select:focus { outline: 2px solid var(--navy); outline-offset: 2px; border-color: var(--navy); }
.hint { font-size: 12.5px; color: var(--muted); }
.error { font-size: 13px; font-weight: 600; color: var(--rust-deep); }
.field[data-invalid='true'] .input, .field[data-invalid='true'] .textarea { border-color: var(--rust); }

.form-note { font-size: 13px; color: var(--muted); }

.form-status { border-radius: var(--r-sm); padding: 14px 18px; font-weight: 600; margin-block-end: 16px; }
.form-status--ok { background: var(--sage-tint); color: var(--sage-deep); }
.form-status--err { background: var(--rust-tint); color: var(--rust-deep); }
[hidden] { display: none !important; }

/* ------------------------------------------------------------- whatsapp -- */
.wa-float {
  position: fixed; inset-block-end: 20px; inset-inline-end: 20px; z-index: 60;
  display: inline-flex; align-items: center; gap: 10px;
  background: #25D366; color: #06331A;
  padding: 12px 20px 12px 16px; border-radius: var(--r-pill);
  font-weight: 800; font-size: 15px; box-shadow: var(--sh-3);
  transition: transform .15s ease;
}
.wa-float:hover { transform: translateY(-2px); color: #06331A; }
.wa-float svg { width: 22px; height: 22px; flex: none; }
@media (max-width: 560px) { .wa-float__text { display: none; } .wa-float { padding: 14px; } }

/* --------------------------------------------------------------- footer -- */
.site-footer { background: var(--navy); color: rgba(245,241,230,.72); padding-block: 52px 30px; }
.site-footer h2, .site-footer h4 {
  color: var(--cream); font-family: var(--body); font-weight: 800;
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase; margin-block-end: 14px;
}
.site-footer a { color: rgba(245,241,230,.72); display: inline-block; padding-block: 5px; }
.site-footer a:hover { color: var(--gold); }
.site-footer .brand { color: var(--cream); }
.footer__grid { display: grid; gap: 32px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.footer__bottom {
  margin-block-start: 36px; padding-block-start: 22px;
  border-block-start: 1px solid var(--navy-700);
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between;
  font-size: 13px; color: rgba(245,241,230,.6);
}

/* ------------------------------------------------------------------ misc -- */
.faq { border-block-end: 1px solid var(--rule); padding-block: 6px; }
.faq summary {
  cursor: pointer; padding: 16px 0; font-weight: 700; color: var(--navy); font-size: 16.5px;
  list-style: none; display: flex; justify-content: space-between; gap: 16px; align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-size: 22px; color: var(--gold-deep); flex: none; }
.faq[open] summary::after { content: '\2212'; }
.faq__body { padding-block-end: 16px; max-width: 68ch; }

.quote { border-inline-start: 3px solid var(--gold); padding-inline-start: 20px; }
.quote p { font-size: 17px; }
.quote cite { font-style: normal; font-size: 13.5px; color: var(--muted); font-weight: 600; }

.stat { text-align: center; }
.stat__n { font-family: var(--display); font-size: 34px; color: var(--navy); line-height: 1; }
.stat__l { font-size: 13px; color: var(--muted); margin-block-start: 6px; }

.tick { display: flex; gap: 10px; align-items: flex-start; }
.tick svg { flex: none; width: 19px; height: 19px; color: var(--sage-deep); margin-top: 3px; }
.cross svg { color: var(--rust-deep); }

.prose h2 { margin-block-start: 2em; }
.prose h3 { margin-block-start: 1.6em; }
.prose ul, .prose ol { max-width: 68ch; padding-inline-start: 22px; }
.prose li { margin-block-end: .5em; }
.prose table { width: 100%; border-collapse: collapse; margin-block: 1.2em; font-size: 14.5px; }
.prose th { background: var(--navy); color: var(--gold); text-align: start; padding: 10px 14px; font-size: 12px; letter-spacing: .07em; text-transform: uppercase; }
.prose thead tr th:first-child { border-start-start-radius: var(--r-sm); }
.prose thead tr th:last-child { border-start-end-radius: var(--r-sm); }
.prose td { padding: 10px 14px; border-block-end: 1px solid var(--cream-deep); vertical-align: top; }