/* ============================================================
   EVERANTE — Nutrition-as-a-Service
   Cinematic landing · Apple × WHOOP × Oura
   ============================================================ */

/* ============================================================
   THE BLUE HOUR
   ------------------------------------------------------------
   Everante is delivered before dawn, so the brand is not the
   sunrise — it is the hour before it. Every ground on this site
   is a cool, unlit blue-grey. Exactly ONE thing is warm: the
   accent. That is the whole system.

   The accent is not decoration, it is light entering a dark
   room. It carries the primary CTA, links, focus, and the single
   emphasis word per headline — and nothing else. Warmth reads as
   meaningful here only because it is rare; when every surface was
   warm (as it was), the accent could not be earned.

   Contrast: --light clears AA on every dark ground. On paper it
   steps down to --light-ink, which clears AA for body text.
   ============================================================ */
:root{
  /* -- cool grounds -- */
  --night:    #0B0E13;   /* deepest: hero, final CTA          */
  --ink:      #10141B;   /* primary dark ground               */
  --ink-2:    #171C24;   /* elevated surface on dark          */
  --haze:     #212834;   /* borders + hover surfaces on dark  */

  /* -- light grounds (warm limestone, never clinical white) -- */
  --cream:    #F2F0EA;   /* primary light ground              */
  --cream-2:  #E8E5DD;   /* secondary light ground            */
  --linen:    #D9D4CA;   /* borders on light                  */

  /* -- the one accent -- */
  --amber:    #D8A65C;   /* FIRST LIGHT — the accent          */
  --gold:     #E9C089;   /* accent, lifted (hover/highlight)  */
  --coral:    #C08A42;   /* accent, deepened (gradient end)   */
  --peach:    #C7A87E;   /* accent, muted (supporting label)  */
  --light-ink:#8A6220;   /* accent on light ground, AA-safe   */

  /* -- text -- */
  --t-dark:   #EDEAE4;   /* primary text on dark              */
  --t-mid:    #A3AAB6;   /* secondary text on dark (cool)     */
  --t-low:    #6B7380;   /* muted text on dark                */
  --t-light:  #171A20;   /* primary text on light             */
  --sand:     #A3AAB6;

  /* -- semantic: rare, never decorative -- */
  --green:    #6E8F6A;   /* success / upward trend            */
  --clay:     #B4553F;   /* error                             */
  --berry:    #9E6B7A;
  --cocoa:    #7A6350;

  --glass-w:  linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  --stroke-w: rgba(237,234,228,.13);
  --glass-d:  linear-gradient(160deg, rgba(23,26,32,.05), rgba(23,26,32,.02));
  --stroke-d: rgba(23,26,32,.13);

  --font-d: 'Playfair Display', 'Iowan Old Style', Georgia, serif;
  --font-b: 'Inter', system-ui, -apple-system, sans-serif;

  /* ---- TYPE SCALE ----------------------------------------
     Display (Playfair) carries emotion; UI (Inter) carries
     information. Tracking tightens as size grows — high-contrast
     serifs open up optically at display sizes. */
  --fs-hero:     clamp(2.75rem, 7.4vw, 6.5rem);
  --fs-h2:       clamp(2.05rem, 4.4vw, 3.85rem);
  --fs-h3:       clamp(1.3rem,  2.1vw, 1.72rem);
  --fs-h4:       clamp(1.1rem,  1.6vw, 1.3rem);
  --fs-sub:      clamp(1.02rem, 1.6vw, 1.22rem);
  --fs-body-lg:  1.125rem;
  --fs-body:     1rem;
  --fs-caption:  0.875rem;
  --fs-footnote: 0.8125rem;
  --fs-nav:      0.9375rem;
  --fs-btn:      0.9375rem;
  --fs-label:    0.6875rem;

  --lh-display:  1.06;
  --lh-heading:  1.16;
  --lh-snug:     1.45;
  --lh-body:     1.75;

  --ls-display:  -.022em;
  --ls-heading:  -.014em;
  --ls-tight:    -.008em;
  --ls-body:     0em;
  --ls-label:    .22em;

  --wt-display:  500;
  --wt-medium:   500;
  --wt-semi:     600;

  /* ---- SPACING SCALE ----------------------------------
     One ladder. Sections breathe at 120-176px, cards at
     36-52px, grids at 28-48px. Nothing sets its own value. */
  --sp-section:    clamp(120px, 15vh, 176px);
  --sp-section-sm: clamp(88px, 11vh, 128px);
  --sp-hero:       clamp(150px, 19vh, 200px);
  --sp-card:       clamp(36px, 3.2vw, 52px);
  --sp-grid:       clamp(28px, 3vw, 48px);
  --sp-title-body: clamp(20px, 2.4vw, 28px);
  --sp-body-cta:   clamp(32px, 3.4vw, 40px);
  --sp-head-content: clamp(44px, 5vw, 64px);

  --measure:     62ch;
  --measure-tight: 46ch;

  /* ---- MOTION ------------------------------------------------
     One ease, five durations. Every transition on the site draws
     from these; nothing sets its own timing. The ease is a pure
     ease-out — motion arrives fast and settles slowly, which is
     what reads as calm rather than mechanical.

     Only opacity and transform are ever animated (both GPU
     composited). Travel is capped at 12px: past that, a reveal
     stops feeling like settling and starts feeling like an
     entrance. */
  --ease:      cubic-bezier(.22, 1, .36, 1);
  --dur-hover: 180ms;   /* links, small state changes  */
  --dur-btn:   200ms;   /* buttons                     */
  --dur-card:  240ms;   /* cards, panels               */
  --dur-reveal:420ms;   /* section + image reveals     */
  --dur-nav:   260ms;   /* navigation                  */
  --dur-amb:   900ms;   /* ambient ground colour       */
  --lift:      3px;     /* the only hover displacement */
  --rise:      12px;    /* the only reveal displacement*/

  --pad:    clamp(20px, 5vw, 72px);
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:auto; }
body{
  font-family:var(--font-b);
  background:var(--ink);
  color:var(--t-dark);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  transition:background-color var(--dur-amb) var(--ease);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  letter-spacing:var(--ls-body);
  font-weight:400;
  text-rendering:optimizeLegibility;
}
::selection{ background:var(--amber); color:var(--ink); }
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
section{ position:relative; scroll-margin-top:90px; }

.container{ width:min(1240px, 100%); margin-inline:auto; padding-inline:var(--pad); }
.container.narrow{ width:min(920px,100%); }
.center{ text-align:center; }

/* text color scopes */
.s-dark{ color:var(--t-dark); }
.s-light{ color:var(--t-light); }

.skip-link{
  position:absolute; left:50%; top:0; transform:translate(-50%,-140%);
  z-index:200;
  background:var(--amber); color:var(--night);
  font-family:var(--font-b); font-size:var(--fs-caption);
  font-weight:var(--wt-medium);
  padding:12px 22px; border-radius:0 0 8px 8px;
  transition:transform var(--dur-nav) var(--ease);
}
.skip-link:focus-visible{ transform:translate(-50%,0); outline:none; }
#main:focus{ outline:none; }

/* ============ TYPE ============ */
.eyebrow{
  display:inline-block;
  font-family:var(--font-b);
  font-size:var(--fs-label); font-weight:var(--wt-semi);
  letter-spacing:var(--ls-label); text-transform:uppercase;
  color:var(--amber);
  margin-bottom:24px;
}
h1,h2,h3,h4{
  font-family:var(--font-d);
  font-weight:var(--wt-display);
  text-wrap:balance;
}
h1{
  font-size:var(--fs-hero);
  line-height:var(--lh-display); letter-spacing:var(--ls-display);
}
h2{
  font-size:var(--fs-h2);
  line-height:var(--lh-heading); letter-spacing:var(--ls-heading);
}
h3{
  font-size:var(--fs-h3);
  line-height:var(--lh-snug); letter-spacing:var(--ls-tight);
}
h4{
  font-size:var(--fs-h4);
  line-height:var(--lh-snug); letter-spacing:var(--ls-tight);
}
h2 em, .hero-title em, .cta-title em{
  font-family:var(--font-d); font-style:italic; font-weight:400;
  letter-spacing:0;
  background:linear-gradient(100deg, var(--gold), var(--amber) 62%, var(--coral));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  padding-right:.06em; /* protect italic overhang from clipping */
}
.sec-head{ margin-bottom:var(--sp-head-content); }
.sec-sub{
  margin-top:var(--sp-title-body); max-width:var(--measure);
  font-size:var(--fs-sub); line-height:1.62;
  color:color-mix(in srgb, currentColor 70%, transparent);
  text-wrap:pretty;
}
.sec-head.center .sec-sub{ margin-inline:auto; }

/* ============ GLASS ============ */
.glass{
  background:var(--glass-w);
  border:1px solid var(--stroke-w);
  backdrop-filter:blur(18px) saturate(1.2);
  -webkit-backdrop-filter:blur(18px) saturate(1.2);
  border-radius:26px;
}
.glass-d{
  background:var(--glass-d);
  border:1px solid var(--stroke-d);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border-radius:26px;
}

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:17px 32px; border-radius:999px;
  font-family:var(--font-b);
  font-size:var(--fs-btn); font-weight:var(--wt-medium); letter-spacing:.005em;
  line-height:1;
  transition:transform var(--dur-btn) var(--ease), box-shadow var(--dur-btn) var(--ease),
              background-color var(--dur-btn), border-color var(--dur-btn);
  will-change:transform;
}
.btn-primary{
  position:relative;
  color:#10141B;
  background:var(--amber);
  box-shadow:0 8px 26px -12px rgba(216,166,92,.5);
}
.btn-primary:hover{ background:var(--gold); box-shadow:0 12px 34px -12px rgba(216,166,92,.62); }
.btn-ghost{
  border:1px solid var(--stroke-w);
  background:rgba(255,255,255,.04);
  backdrop-filter:blur(8px);
}
.btn-ghost:hover{ background:rgba(255,255,255,.1); }
.btn-ghost .arr{ transition:transform var(--dur-hover) var(--ease); }
.btn-ghost:hover .arr{ transform:translateY(4px); }
.btn-line{
  border:1px solid var(--stroke-w);
  width:100%; justify-content:center;
}
.btn-line:hover{ background:rgba(255,255,255,.08); }
.btn-small{
  padding:10px 22px; font-size:var(--fs-caption);
  border:1px solid color-mix(in srgb, var(--amber) 46%, transparent);
  color:var(--amber);
  background:transparent;
}
.btn-small:hover{
  background:color-mix(in srgb, var(--amber) 12%, transparent);
  border-color:var(--amber);
}
.s-light .btn-small{ color:var(--light-ink); border-color:color-mix(in srgb, var(--light-ink) 42%, transparent); }

/* ---- tertiary: a text link, never a button ---- */
.btn-text{
  display:inline-block;
  font-family:var(--font-b);
  font-size:var(--fs-caption); font-weight:var(--wt-medium);
  color:var(--amber);
  border-bottom:1px solid color-mix(in srgb, var(--amber) 38%, transparent);
  padding-bottom:1px;
  transition:border-color var(--dur-hover), color var(--dur-hover);
}
.btn-text:hover{ border-bottom-color:currentColor; }
.s-light .btn-text{ color:var(--light-ink); border-bottom-color:color-mix(in srgb, var(--light-ink) 38%, transparent); }
.btn-big{ padding:22px 48px; font-size:var(--fs-body-lg); }

/* ============ PRELOADER ============ */

.pre-mark span:nth-child(2){animation-delay:.1s}
.pre-mark span:nth-child(4){animation-delay:.2s}
.pre-mark span:nth-child(6){animation-delay:.3s}
.pre-mark span:nth-child(8){animation-delay:.4s}
 }

 }

/* ============ GRAIN ============ */
.grain{
  position:fixed; inset:-100px; z-index:60; pointer-events:none;
  opacity:.055; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============ NAV ============ */
.nav{
  position:fixed; z-index:50;
  top:18px; left:50%; transform:translateX(-50%);
  width:min(1180px, calc(100% - 32px));
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:12px 14px 12px 30px;
  border-radius:999px;
  background:rgba(14,10,8,.42);
  border:1px solid rgba(237,234,228,.1);
  backdrop-filter:blur(20px) saturate(1.3);
  -webkit-backdrop-filter:blur(20px) saturate(1.3);
  transition:background-color .6s var(--ease), border-color .6s var(--ease), color .6s var(--ease), transform .6s var(--ease), opacity .6s;
  color:var(--cream);
  opacity:0; translate:0 -12px;
}
body.loaded .nav{ opacity:1; translate:0 0; transition-delay:.9s; }
.nav.over-light{
  background:rgba(250,244,233,.55);
  border-color:rgba(23,26,32,.12);
  color:var(--t-light);
}
.nav.hidden{ transform:translate(-50%,-130%); }
.nav-logo{
  font-family:var(--font-d); font-size:25px; font-weight:var(--wt-display); letter-spacing:.005em; line-height:1;
  display:inline-flex; align-items:baseline;
}
.logo-dot{
  width:8px; height:8px; border-radius:50%; margin-left:5px;
  background:radial-gradient(circle at 35% 30%, var(--gold), var(--coral));
  box-shadow:0 0 12px rgba(216,166,92,.9);
}
.logo-naas{
  font-size:11px; font-weight:600; letter-spacing:.08em; margin-left:8px;
  text-transform:uppercase; color:var(--t-mid); font-family:var(--font-b);
}
.nav-links{ display:flex; gap:clamp(30px,2.6vw,42px); }
.nav-links a{
  font-size:var(--fs-nav); font-weight:var(--wt-medium); color:color-mix(in srgb, currentColor 80%, transparent);
  transition:opacity .3s;
  position:relative;
}
.nav-links a:hover{ opacity:1; }
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:-6px; height:1.5px; width:0;
  background:var(--amber); transition:width .4s var(--ease);
}
.nav-links a:hover::after{ width:100%; }
@media (max-width:900px){ .nav-links{ display:none; } }

/* ============ HERO ============ */
.hero{
  min-height:100svh;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  text-align:center; overflow:hidden;
  padding:var(--sp-hero) var(--pad) 0;
}
.hero-sky{ position:absolute; inset:0; z-index:-1; }
.sky-gradient{
  position:absolute; inset:0;
  /* Night resolving into blue hour. The warm band is a thin seam
     at the very horizon — the first light, not a sunrise wash. */
  background:linear-gradient(180deg,
    #05070B 0%, #080C13 22%, #0C131E 42%,
    #121C2A 58%, #1B2735 72%, #2A3540 84%,
    #46433A 94%, #6A5636 100%);
}

.sun{
  position:absolute; left:50%; bottom:-19%;
  width:min(38vmin, 340px); height:min(38vmin, 340px);
  margin-left:calc(min(38vmin,340px) / -2);
  border-radius:50%;
  background:radial-gradient(circle at 50% 38%, #F4E3C4 0%, #E9C089 30%, #D8A65C 56%, rgba(216,166,92,0) 72%);
  filter:drop-shadow(0 0 90px rgba(216,166,92,.65));
}

 to{transform:translateX(6vw)} }
.horizon-glow{
  position:absolute; left:0; right:0; bottom:0; height:26%;
  background:linear-gradient(180deg, rgba(216,166,92,0), rgba(216,166,92,.18));
}
.horizon-fade{
  position:absolute; left:0; right:0; bottom:-1px; height:34vh;
  background:linear-gradient(180deg, rgba(11,14,19,0) 0%, rgba(11,14,19,.75) 62%, #0B0E13 100%);
}

.hero-content{ position:relative; max-width:860px; }
.hero-badge{
  display:inline-block;
  font-size:var(--fs-label); font-weight:var(--wt-semi); letter-spacing:var(--ls-label); text-transform:uppercase;
  color:var(--peach);
  border:1px solid rgba(255,201,139,.32);
  border-radius:999px; padding:8px 17px;
  margin:0;
}
.hero-title{
  font-family:var(--font-d);
  font-size:var(--fs-hero);
  line-height:var(--lh-display); letter-spacing:var(--ls-display);
  font-weight:var(--wt-display);
  margin:var(--sp-title-body) 0 0;
  text-wrap:balance;
}
.hero-title .line{ display:block; }
.hero-sub{
  max-width:var(--measure-tight); margin:var(--sp-title-body) auto 0;
  font-size:var(--fs-sub); line-height:1.62;
  color:rgba(237,234,228,.72);
  text-wrap:pretty;
}
.hero-sub strong{
  color:var(--amber); font-weight:600; letter-spacing:.025em;
}
.hero-ctas{
  display:flex; gap:16px; justify-content:center; flex-wrap:wrap;
  margin-top:var(--sp-body-cta);
}
/* ---- the one price mentioned in the hero: the lowest-commitment
   entry point (2 weeks), not the best-value rate. The sticky pocket
   further down states the 8-week per-smoothie rate instead — the
   two never repeat the same number, so neither reads as filler. ---- */
.hero-price{
  margin-top:var(--sp-title-body);
  display:flex; align-items:baseline; justify-content:center;
  gap:14px; flex-wrap:wrap;
  font-size:var(--fs-caption);
  color:rgba(237,234,228,.68);
}
.hero-price b{ color:var(--amber); font-weight:var(--wt-semi); }
.hero-price-per-day{
  color:var(--gold); font-style:normal; font-weight:600; font-size:0.92em;
  display:inline-block; white-space:nowrap;
}
/* Secondary price line — the 8-week pack, offered alongside the 2-week
   entry price rather than replacing it. Slightly muted so the primary
   teaser still leads and this doesn't turn into two competing prices. */
.hero-price-alt{
  color:rgba(237,234,228,.5);
  white-space:nowrap;
}
.hero-price-alt b{ color:var(--amber); font-weight:var(--wt-semi); }
.hero-price-link{
  color:inherit;
  border-bottom:1px solid color-mix(in srgb, currentColor 34%, transparent);
  padding-bottom:1px;
  transition:border-color var(--dur-hover), color var(--dur-hover);
}
.hero-price-link:hover{ color:var(--amber); border-bottom-color:currentColor; }
.hero-ctas{ margin-top:var(--sp-title-body); }

/* ---- short-viewport tier -------------------------------------
   Responsive work almost always keys off width, but the hero's
   problem is height: a 1366x700 laptop has plenty of width and no
   room. Below 800px tall the hero stops trying to be full-bleed
   cinematic and compresses — smaller display type, tighter rhythm —
   so the badge, headline, price and both CTAs still land above the
   fold. Verified down to 700px tall and 667px on phones. ---- */
@media (max-height:800px){
  .hero{ padding-top:clamp(96px,13vh,128px); min-height:100svh; }
  .hero-title{ font-size:clamp(2.4rem,5.4vw,4.2rem); }
  .hero-sub{ font-size:var(--fs-body); margin-top:16px; }
  .hero-price{ margin-top:16px; }
  .hero-ctas{ margin-top:18px; }
  .hero-trust{ margin-top:26px; padding-top:16px; }
  .hero-badge{ margin-bottom:0; }
}
@media (max-height:640px){
  .hero-title{ font-size:clamp(2rem,4.6vw,3.2rem); }
  .hero-sub{ display:none; }  /* the badge and trust row still carry the promise */
}
.hero-trust{
  list-style:none; margin:56px auto 0; padding:20px 0 0;
  max-width:760px;
  border-top:1px solid rgba(237,234,228,.11);
  display:flex; gap:8px 26px; justify-content:center; flex-wrap:wrap;
  font-size:var(--fs-footnote); font-weight:var(--wt-medium); letter-spacing:.02em;
  color:rgba(237,234,228,.74);
}
.hero-trust li::before{
  content:"\2713"; color:var(--amber); margin-right:7px;
}

/* hero entrance */
[data-hero]{
  opacity:0; transform:translateY(var(--rise));
  transition:opacity var(--dur-reveal) var(--ease),
             transform var(--dur-reveal) var(--ease);
  transition-delay:var(--d);
  will-change:opacity, transform;
}
body.loaded [data-hero]{ will-change:auto; }
body.loaded [data-hero]{ opacity:1; transform:none; }

 }

/* ============================================================
   ONE LESS DECISION — the four-stage relay
   ------------------------------------------------------------
   Built to the supplied mockup. The connecting rail is drawn per
   stage rather than as one absolutely-positioned line across the
   track, so it can never drift out of alignment with the nodes: each
   stage's rail sits in its own subgrid row and extends right into
   the gutter to meet the next node exactly. The last stage's rail
   fades out instead of connecting to nothing.

   All four stages share one set of rows via subgrid — number, label,
   node, icon, time, title, rule and copy each line up across columns
   however the text wraps. The @supports fallback below pins the two
   rows that can wrap, which is enough to keep the rail straight on
   engines without subgrid.
   ============================================================ */
.relay{ position:relative; padding:var(--sp-section) 0; overflow:hidden; background:#08090C; }

/* the warm window light in the lower right of the mockup — two soft
   layers, no hard edge, nothing animated */
.relay-light{
  position:absolute; right:0; bottom:0;
  width:min(52%,700px); height:min(78%,620px);
  pointer-events:none;
  background:
    radial-gradient(70% 74% at 92% 96%, rgba(255,198,124,.30) 0%, rgba(255,172,92,.13) 36%, rgba(255,160,80,0) 72%),
    linear-gradient(122deg, rgba(255,190,110,0) 52%, rgba(255,190,110,.07) 68%, rgba(255,190,110,0) 84%);
}
.relay > .container{ position:relative; z-index:1; }

.relay-head{ text-align:center; margin-inline:auto; }
.relay-head h2{ max-width:18em; margin-inline:auto; }
.relay-head .sec-sub{ max-width:44ch; margin-inline:auto; }

/* ---- the track ----
   UX AUDIT PASS: was 8 subgrid rows (num / label / rail / icon /
   when / title / rule / copy); now 6 (num / label / when / title /
   rule / copy). The icon and the glowing dot-and-rail connector are
   gone — same reasoning as the ritual section above, text already
   carries what the icon repeated, and the rail was one more drawn
   line next to the row's own hairline underneath. Removing two rows
   from all four stages at once keeps subgrid's column alignment
   intact; it only breaks if the stages stop matching each other, not
   if they all shrink together. */
.relay-track{
  --relay-gap:clamp(20px,3vw,44px);
  margin-top:clamp(52px,7vw,96px);
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  grid-template-rows:auto auto auto auto auto auto;
  column-gap:var(--relay-gap);
  list-style:none; padding:0;
}
.relay-stage{
  display:grid; grid-row:1 / -1; grid-template-rows:subgrid;
  row-gap:0;
  /* Load-bearing. A stage is a stretched grid item, so with auto
     rows the default align-content:stretch shares the leftover
     height out across all rows — pinning to start keeps every row at
     content height and lets the slack fall to the bottom where
     nothing is aligned. */
  align-content:start;
}
@supports not (grid-template-rows: subgrid){
  .relay-stage{ grid-row:auto; grid-template-rows:none; }
  .relay-label{ min-height:2.9em; }
  .relay-title{ min-height:1.3em; }
}

.relay-num{
  font-family:var(--font-d); font-weight:var(--wt-display);
  font-size:clamp(1.5rem,2.6vw,2rem); line-height:1;
  color:var(--amber); margin-bottom:12px;
}
.relay-label{
  font-family:var(--font-b); font-size:var(--fs-label);
  font-weight:var(--wt-semi); letter-spacing:var(--ls-label);
  text-transform:uppercase; color:var(--t-dark);
  line-height:1.45; margin-bottom:20px;
}
/* Note for the fallback below: wherever subgrid is not doing the
   aligning, the label is the row most likely to wrap unevenly ("The
   rest of your day" runs to two lines while "Breakfast" does not).
   Reserving two lines keeps every stage's title starting at the same
   height even without subgrid. */

.relay-when{
  font-family:var(--font-b); font-size:var(--fs-caption);
  letter-spacing:.015em; color:var(--amber);
  margin-bottom:14px; min-height:1em;
}
.relay-title{
  font-family:var(--font-d); font-weight:var(--wt-display);
  font-size:clamp(1.25rem,2.1vw,1.6rem); line-height:1.2;
  letter-spacing:var(--ls-heading); color:var(--t-dark);
}
.relay-rule{
  display:block; width:30px; height:1px;
  background:color-mix(in srgb, var(--amber) 55%, transparent);
  margin:18px 0;
}
.relay-copy{
  font-family:var(--font-b); font-size:var(--fs-caption);
  line-height:1.75; color:var(--t-mid);
}

/* staggered reveal — the relay assembles left to right, once */
.js .relay-stage[data-reveal]{ transition-delay:calc(var(--n) * 110ms); }

/* ---- the close ---- */
.relay-close{
  margin-top:clamp(64px,8vw,110px);
  display:flex; flex-direction:column; align-items:center; text-align:center;
}
.relay-brand{
  font-family:var(--font-d); font-weight:var(--wt-display);
  font-size:clamp(1.6rem,3.4vw,2.5rem); line-height:1.32;
  letter-spacing:var(--ls-heading); color:var(--t-dark);
}
.relay-brand em{ font-style:italic; color:var(--amber); }
.relay-rule-mid{ margin:26px 0 30px; width:38px; }

.relay-cta{
  border:1px solid color-mix(in srgb, var(--amber) 55%, transparent);
  background:transparent; color:var(--amber);
  font-family:var(--font-b); font-size:var(--fs-caption);
  font-weight:var(--wt-semi); letter-spacing:.14em; text-transform:uppercase;
  padding:17px 40px;
  transition:background-color var(--dur-hover) var(--ease),
             border-color var(--dur-hover) var(--ease);
}
.relay-cta:hover{
  background:rgba(216,166,92,.09);
  border-color:var(--amber);
}
.relay-arr{ display:inline-block; margin-left:8px; transition:transform var(--dur-hover) var(--ease); }
.relay-cta:hover .relay-arr{ transform:translateX(4px); }
.relay-fine{
  margin-top:18px;
  font-family:var(--font-b); font-size:var(--fs-label);
  letter-spacing:.03em; color:var(--t-low);
}

/* ---- responsive: two columns, then one ---- */
@media (max-width:900px){
  .relay-track{ grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:none; row-gap:clamp(44px,7vw,64px); }
  /* two columns means the stages no longer span one shared row set,
     so subgrid stops applying and the label must reserve its height */
  .relay-stage{ grid-row:auto; grid-template-rows:none; }
  .relay-label{ min-height:2.9em; }
}
@media (max-width:560px){
  .relay-track{ grid-template-columns:1fr; row-gap:clamp(38px,9vw,52px); }
  .relay-copy br{ display:none; }
  .relay-cta{ width:100%; justify-content:center; }
}
@media (prefers-reduced-motion:reduce){
  .js .relay-stage[data-reveal]{ transition-delay:0s; }
}
/* ============ PILLARS ============ */

@media (max-width:900px){ .pillar-grid{ grid-template-columns:1fr; } }


/* ============ PRICING ============ */
.pricing{ padding:var(--sp-section) 0; overflow:hidden; }
.pricing::before{
  content:""; position:absolute; top:-16%; left:50%; transform:translateX(-50%);
  width:min(920px,120vw); height:620px; border-radius:50%;
  background:radial-gradient(ellipse, rgba(216,166,92,.13), transparent 65%);
  pointer-events:none;
}
.price-grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:var(--sp-grid); align-items:stretch;
}
.price{
  padding:var(--sp-card);
  display:flex; flex-direction:column;
  position:relative;
  transition:transform var(--dur-card) var(--ease), border-color var(--dur-card);
}
.price:hover{ transform:translateY(calc(var(--lift) * -1)); border-color:rgba(216,166,92,.35); }
/* UX AUDIT PASS: was a diagonal gold gradient wash plus a coloured
   glow shadow — exactly the "glowing border" look a recommended plan
   should earn through hierarchy, not brightness. A slightly lighter
   flat surface and a plain (not coloured) soft shadow read as "this
   one sits forward" without competing with the accent used for CTAs
   and the badge itself. */
.price.featured{
  background:rgba(237,234,228,.045);
  border-color:rgba(216,166,92,.4);
  box-shadow:0 30px 60px -36px rgba(0,0,0,.5);
}
@media (min-width:961px){ .price.featured{ transform:scale(1.02); } .price.featured:hover{ transform:scale(1.02) translateY(calc(var(--lift) * -1)); } }
.badge{
  position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  font-size:var(--fs-label); font-weight:var(--wt-semi); letter-spacing:.18em; text-transform:uppercase;
  color:#10141B; background:linear-gradient(120deg, var(--gold), var(--coral));
  padding:7px 16px; border-radius:999px; white-space:nowrap;
}
.price h3{ font-family:var(--font-d); font-size:var(--fs-h4); font-weight:var(--wt-display); letter-spacing:var(--ls-tight); }
.price-weeks{
  font-family:var(--font-b); font-size:var(--fs-caption); font-weight:400;
  color:var(--t-mid); letter-spacing:var(--ls-body);
}
.price-tagline{
  font-family:var(--font-d); font-style:italic; font-weight:400;
  font-size:var(--fs-caption); color:var(--amber);
  margin-top:6px;
}
.price-for{
  font-family:var(--font-d); font-style:italic; font-weight:400;
  font-size:var(--fs-caption); color:var(--peach); opacity:.9;
  margin:6px 0 26px;
}
.price-num{
  font-family:var(--font-d); font-size:clamp(2.4rem,3.4vw,3.2rem); font-weight:var(--wt-display); letter-spacing:var(--ls-display); line-height:1;
}
.price-num sup{ font-size:.45em; font-weight:500; vertical-align:super; margin-right:2px; }
.price-num span{ font-size:15px; font-weight:400; opacity:.5; letter-spacing:0; }
.price-day{ font-size:var(--fs-footnote); color:color-mix(in srgb, currentColor 58%, transparent); margin:12px 0 28px; }
.price ul{
  list-style:none; margin-bottom:34px;
  display:flex; flex-direction:column; gap:12px;
}
.price li{
  font-size:var(--fs-caption); line-height:1.7; color:color-mix(in srgb, currentColor 82%, transparent);
  padding-left:26px; position:relative;
}
.price li::before{
  content:""; position:absolute; left:0; top:7px;
  width:14px; height:7px;
  border-left:2px solid var(--amber); border-bottom:2px solid var(--amber);
  transform:rotate(-45deg);
}
.price .btn{ margin-top:auto; justify-content:center; }
.price-foot{
  margin-top:44px; text-align:center;
  font-size:var(--fs-footnote); color:color-mix(in srgb, currentColor 58%, transparent); line-height:1.8;
  max-width:640px; margin-inline:auto;
}
@media (max-width:960px){ .price-grid{ grid-template-columns:1fr; max-width:480px; margin-inline:auto; } }

/* ============ TESTIMONIALS ============ */
.testimonials{ padding:var(--sp-section) 0; }
.quote-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-grid);
}
.quote{
  padding:var(--sp-card);
  transition:transform var(--dur-card) var(--ease);
}
.quote:hover{ transform:translateY(calc(var(--lift) * -1)); }
.quote blockquote{
  font-family:var(--font-d);
  font-size:clamp(1.18rem,1.9vw,1.5rem); line-height:1.55; font-weight:400; letter-spacing:var(--ls-tight);
  margin-bottom:26px;
}
.quote blockquote::before{
  content:"“"; display:block;
  font-size:3.4rem; line-height:.6; margin-bottom:16px;
  background:linear-gradient(120deg, var(--gold), var(--coral));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.quote figcaption strong{ display:block; font-family:var(--font-b); font-size:var(--fs-caption); font-weight:var(--wt-semi); }
.quote figcaption span{ font-size:var(--fs-footnote); color:color-mix(in srgb, currentColor 58%, transparent); }
@media (max-width:820px){ .quote-grid{ grid-template-columns:1fr; } }

/* ============ FAQ ============ */
.faq{ padding:var(--sp-section) 0; }
.faq-list details{
  border-bottom:1px solid rgba(23,26,32,.14);
}
.faq-list details:first-of-type{ border-top:1px solid rgba(23,26,32,.14); }
.faq-list summary{
  list-style:none; cursor:pointer;
  display:flex; justify-content:space-between; align-items:center; gap:20px;
  padding:32px 4px;
  font-family:var(--font-d); font-size:var(--fs-h4); font-weight:var(--wt-display); letter-spacing:var(--ls-tight);
  transition:color var(--dur-hover);
}
.faq-list summary::-webkit-details-marker{ display:none; }
.faq-list summary:hover{ color:#8A6220; }
.faq-list summary i{
  flex:0 0 34px; height:34px; border-radius:50%;
  border:1px solid rgba(23,26,32,.2);
  position:relative; transition:transform .5s var(--ease), background-color .3s;
}
.faq-list summary i::before, .faq-list summary i::after{
  content:""; position:absolute; inset:0; margin:auto;
  background:currentColor;
}
.faq-list summary i::before{ width:12px; height:1.6px; }
.faq-list summary i::after{ width:1.6px; height:12px; transition:opacity .3s; }
.faq-list details[open] summary i{ transform:rotate(135deg); background:rgba(216,166,92,.12); }
.faq-list details p{
  padding:0 4px 30px; max-width:56em;
  font-size:var(--fs-body); line-height:var(--lh-body); color:color-mix(in srgb, currentColor 72%, transparent); max-width:60ch;
}

/* ============ CTA ============ */
.cta{
  min-height:92svh;
  display:flex; align-items:center;
  overflow:hidden; text-align:center;
  padding:140px 0 120px;
}
.cta-sky{ position:absolute; inset:0; z-index:-1; }
.cta-sun{
  position:absolute; left:50%; bottom:-34vmin;
  width:88vmin; height:88vmin; margin-left:-44vmin;
  border-radius:50%;
  background:radial-gradient(circle at 50% 34%, #F4E3C4 0%, #E4B577 28%, #C08A42 56%, rgba(216,166,92,0) 70%);
  filter:blur(2px) drop-shadow(0 0 110px rgba(216,166,92,.32));
  opacity:.72;
}
.cta-glow{
  position:absolute; inset:auto 0 0 0; height:50%;
  background:linear-gradient(0deg, rgba(216,166,92,.11), transparent);
}
.cta-title{
  font-family:var(--font-d);
  font-size:var(--fs-hero);
  line-height:var(--lh-display); letter-spacing:var(--ls-display); font-weight:var(--wt-display);
  margin-bottom:30px;
}
.cta-sub{
  max-width:480px; margin:0 auto 44px;
  font-size:var(--fs-sub); line-height:1.62; color:color-mix(in srgb, currentColor 75%, transparent); max-width:var(--measure-tight); margin-inline:auto;
}
.cta-note{
  margin-top:28px; font-size:12px; letter-spacing:.06em; opacity:.5;
}

/* ============ ACTION (three steps, above the .cta payoff) ----
   No cards here on purpose — the brief driving this section was
   explicit that three boxed cards would read as a generic SaaS
   onboarding flow, not a luxury moment. What's left is the same
   grammar the very first version of the Ritual section used before
   its own card redesign: an icon, a tracked number, a serif title,
   one line of caption, arranged in three columns with a thin static
   line threading the icons together instead of a drawn arrow. */
.action .sec-head{ margin-bottom:0; }
.action-steps{
  list-style:none; margin:clamp(56px,7vw,88px) 0 0; padding:0;
  position:relative;
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(28px,4vw,48px);
}
.action-steps::before{
  content:''; position:absolute; left:10%; right:10%; top:28px;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(216,166,92,.32) 18%, rgba(216,166,92,.32) 82%, transparent);
}
.action-step{ position:relative; }
.action-step-body{
  display:block; text-align:center; text-decoration:none; color:inherit;
}
.action-icon{
  position:relative; z-index:1;
  display:inline-flex; align-items:center; justify-content:center;
  width:56px; height:56px; margin-bottom:22px;
  border-radius:50%;
  background:#0B0E13;
  border:1px solid var(--stroke-w);
  color:var(--amber);
  transition:transform var(--dur-hover) var(--ease), border-color var(--dur-hover) var(--ease);
}
.action-icon svg{ width:26px; height:26px; }
.action-num{
  font-family:var(--font-b);
  font-size:var(--fs-label); font-weight:var(--wt-semi);
  letter-spacing:var(--ls-label); color:var(--amber);
  margin-bottom:10px;
  transition:opacity var(--dur-hover) var(--ease);
}
.action-step-body h3{
  font-family:var(--font-d); font-size:var(--fs-h4); font-weight:var(--wt-display);
  letter-spacing:var(--ls-tight); margin-bottom:8px;
  transition:color var(--dur-hover) var(--ease);
}
.action-step-body > p{
  font-size:var(--fs-caption); line-height:1.6;
  max-width:30ch; margin-inline:auto;
  color:color-mix(in srgb, currentColor 68%, transparent);
}
a.action-step-body:hover .action-icon{ transform:translateY(-2px); border-color:rgba(216,166,92,.5); }
a.action-step-body:hover .action-num{ opacity:.65; }
a.action-step-body:not(.is-inert):hover h3{ color:var(--amber); }

/* inert steps/CTAs: real <a> elements with no href until WHATSAPP_URL
   is set in main.js, so they're correctly out of tab order and
   non-interactive rather than a link that goes nowhere */
.action-step-body.is-inert{ cursor:default; }
.action-soon{
  display:inline-block; margin-top:10px;
  font-size:var(--fs-footnote); letter-spacing:var(--ls-label); text-transform:uppercase;
  color:color-mix(in srgb, currentColor 42%, transparent);
}

.action-payoff{
  margin-top:clamp(72px,9vw,120px); text-align:center;
}
.action-then{
  font-family:var(--font-b);
  font-size:var(--fs-label); font-weight:var(--wt-semi);
  letter-spacing:var(--ls-label); text-transform:uppercase;
  color:var(--amber); margin-bottom:18px;
}
.action-ctas{
  display:flex; flex-direction:column; align-items:center; gap:20px;
}
.action-secondary{
  color:color-mix(in srgb, currentColor 55%, transparent);
  border-bottom-color:color-mix(in srgb, currentColor 30%, transparent);
}
.action-secondary:not(.is-inert):hover{ color:var(--amber); border-bottom-color:var(--amber); }
.action-secondary.is-inert{ cursor:default; }

@media (max-width:760px){
  .action-steps{ grid-template-columns:1fr; gap:44px; }
  .action-steps::before{
    left:50%; right:auto; top:56px; bottom:56px; width:1px; height:auto;
    background:linear-gradient(180deg, transparent, rgba(216,166,92,.32) 18%, rgba(216,166,92,.32) 82%, transparent);
  }
}
@media (prefers-reduced-motion:reduce){
  .action-icon, .action-num, .action-step-body h3{ transition:none; }
}

/* ============ FOOTER ============ */
.footer{
  border-top:1px solid rgba(237,234,228,.08);
  padding:70px 0 30px;
  color:var(--cream);
  /* Own your ground. The footer previously inherited the body
     background set by the scroll observer, which left it cream-on-
     cream whenever the last section fell out of intersection. */
  background:var(--ink);
  position:relative;
  z-index:1;
}
.foot-grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr;
  gap:44px; padding-bottom:54px;
}
.foot-tag{ margin-top:18px; font-size:var(--fs-footnote); line-height:1.8; color:color-mix(in srgb, currentColor 58%, transparent); max-width:32ch; }
.footer nav{ display:flex; flex-direction:column; gap:12px; }
.footer nav a, .foot-contact a{
  font-size:var(--fs-caption); color:color-mix(in srgb, currentColor 68%, transparent); transition:opacity var(--dur-hover), color var(--dur-hover);
  width:max-content;
}
.footer nav a:hover, .foot-contact a:hover{ opacity:1; color:var(--peach); }
.foot-contact{ display:flex; flex-direction:column; gap:12px; }
.foot-contact span{ font-size:var(--fs-footnote); color:color-mix(in srgb, currentColor 45%, transparent); line-height:1.7; }
.foot-bar{
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  border-top:1px solid rgba(237,234,228,.08);
  padding-top:26px;
  font-size:12px; opacity:.4;
}
@media (max-width:820px){ .foot-grid{ grid-template-columns:1fr; gap:32px; } }

/* ============ STICKY JOIN BAR ============ */

@media (max-width:480px){

}

/* ============ REVEALS ============ */
/* hidden-until-scroll only when JS is running (html.js) */
.js [data-reveal]{
  opacity:0; transform:translateY(var(--rise));
  transition:opacity var(--dur-reveal) var(--ease), transform var(--dur-reveal) var(--ease);
}
/* Once revealed, hand timing back to the component so a card's hover
   lift runs at card speed rather than inheriting the reveal's. The
   reveal fires once — the observer unobserves — so this never replays. */
.js [data-reveal].in{
  opacity:1; transform:none;
  transition-duration:var(--dur-card);
}

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  [data-reveal], [data-hero]{ opacity:1 !important; transform:none !important; }
  .ev-shot > img, .ev-shot > picture > img, .hero-photo img{ animation:none; opacity:1; }
}

/* ============ RESPONSIVE TYPE REFINEMENT ============
   Playfair's high stroke contrast thins out at small sizes, so
   mobile relaxes tracking and lifts weight rather than shrinking
   type further. Body never drops below 16px on any device. */
@media (max-width:1024px){
  :root{
    --ls-display:-.016em;
    --ls-heading:-.01em;
    --sp-head-content:clamp(40px,6vw,64px);
  }
}
@media (max-width:640px){
  :root{
    --fs-hero:clamp(2.5rem, 10.5vw, 3.4rem);
    --fs-h2:clamp(1.95rem, 8vw, 2.5rem);
    --fs-h3:1.25rem;
    --fs-h4:1.08rem;
    --fs-sub:1.0625rem;
    --fs-body:1rem;
    --ls-display:-.012em;
    --ls-heading:-.006em;
    --ls-label:.18em;
    --wt-display:500;
    --lh-display:1.1;
    --lh-heading:1.2;
    --measure-tight:34ch;
  }
  .btn{ padding:15px 26px; }
  .eyebrow{ margin-bottom:18px; }
}

/* ============================================================
   PHOTOGRAPHY SYSTEM
   ------------------------------------------------------------
   Every photograph on this site enters through .ev-shot. It does
   four things no <img> does on its own:

   1. Reserves its own space via aspect-ratio, so a slow photo
      never shifts the layout under a reader mid-scroll.
   2. Applies ONE shared grade (warm, slightly desaturated) so
      photos from different shoots/sources read as one campaign.
      This is what separates an art-directed site from a stock
      collage — consistency of grade beats quality of any single
      frame.
   3. Renders an elegant, labelled placeholder while a slot is
      still empty, instead of a broken-image icon.
   4. Carries object-position per shot, so the crop stays right
      from 390px to 2560px without a second file.

   TO FILL A SLOT: drop a <picture>/<img> inside the .ev-shot.
   The placeholder disappears automatically.
   ============================================================ */

:root{
  --ar-hero:      16 / 9;
  --ar-editorial:  3 / 2;
  --ar-portrait:   4 / 5;
  --ar-wide:      21 / 9;
  --ar-square:     1 / 1;
  --ar-flavor:     2 / 1;   /* the founder's own product photo crop */
  --shot-radius:  20px;
}

.ev-shot{
  position:relative;
  overflow:hidden;
  border-radius:var(--shot-radius);
  aspect-ratio:var(--ar, var(--ar-editorial));
  background:
    linear-gradient(150deg, #2A1C14 0%, #1A110C 45%, #241610 100%);
  isolation:isolate;
}
.s-light .ev-shot{
  background:
    linear-gradient(150deg, #E3DFD5 0%, #D9D4CA 48%, #E8E5DD 100%);
}

.ev-shot > img,
.ev-shot > picture > img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:var(--pos, 50% 50%);
  display:block;
  /* the shared grade — pulls any source toward Everante's warmth */
  filter:saturate(.93) contrast(1.03);
}

/* warm unifying wash; keeps disparate sources on one palette */
.ev-shot::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(165deg,
    rgba(216,166,92,.09) 0%,
    rgba(30,44,60,.10) 48%,
    rgba(11,14,19,.20) 100%);
  mix-blend-mode:soft-light;
  pointer-events:none;
  z-index:2;
}

/* ---- elegant empty state -------------------------------------
   Shown only while the slot has no <img>. Reads as a deliberate
   plate, not a missing asset. data-shot supplies the caption. */
.ev-shot:not(:has(img))::before{
  content:attr(data-shot);
  position:absolute; inset:0;
  display:flex; align-items:flex-end;
  padding:clamp(18px,2vw,28px);
  font-family:var(--font-b);
  font-size:var(--fs-footnote);
  line-height:1.55;
  letter-spacing:.01em;
  color:color-mix(in srgb, currentColor 52%, transparent);
  background-image:
    repeating-linear-gradient(-45deg,
      rgba(216,166,92,.05) 0 2px, transparent 2px 11px);
  z-index:1;
}
.ev-shot:not(:has(img)){
  border:1px solid color-mix(in srgb, currentColor 14%, transparent);
}

/* aspect helpers */
.ar-hero{      --ar:var(--ar-hero); }
.ar-portrait{  --ar:var(--ar-portrait); }
.ar-wide{      --ar:var(--ar-wide); }
.ar-square{    --ar:var(--ar-square); }
.ar-flavor{    --ar:var(--ar-flavor); }

/* ---- hero photographic layer ---------------------------------
   Sits UNDER the existing CSS sunrise. When the hero frame lands,
   the gradient stays as a scrim so the type keeps its contrast. */
.hero-photo{
  position:absolute; inset:0;
  z-index:-2;
  overflow:hidden;
}
.hero-photo img{
  width:100%; height:100%;
  object-fit:cover; object-position:50% 55%;
  filter:saturate(.9) contrast(1.03) brightness(.92);
}
/* Scrim only where type actually sits: heavy through the headline
   band, releasing toward the horizon so the room stays visible. */
.hero-photo::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg,
    rgba(6,9,14,.82) 0%, rgba(8,12,18,.64) 34%,
    rgba(12,18,26,.42) 62%, rgba(28,30,30,.58) 100%);
}
/* The CSS sunrise steps back once a real photograph is present —
   it becomes a tint over the room instead of replacing it. */
.hero:has(.hero-photo img) .sky-gradient{ opacity:.42; }
.hero:has(.hero-photo img) .horizon-glow{ opacity:.6; }

/* ---- pillar lifestyle frames ---------------------------------
   Replaces the line icon when a photograph is supplied. */

/* ---- testimonial portraits ----------------------------------- */
.quote-portrait{
  width:52px; height:52px;
  border-radius:50%;
  flex:0 0 auto;
  --ar:var(--ar-square);
  --shot-radius:50%;
}
.quote figcaption{
  display:flex; align-items:center; gap:16px;
}

/* ---- product shot frames ----------------------------------- */
.prod-shot{
  --ar:var(--ar-portrait);
  margin-bottom:22px;
  border-radius:14px;
}



/* testimonial caption regains its stack next to the portrait */
.q-who{ display:flex; flex-direction:column; gap:2px; }
.quote figcaption .quote-portrait{ margin:0; }

/* The icon is scaffolding: it holds the card while the slot is
   empty, then retires the moment real photography lands. */

/* ============ FOCUS ============
   Keyboard focus is an interactive state, so it earns the accent. */
a:focus-visible, button:focus-visible, summary:focus-visible, .btn:focus-visible{
  outline:2px solid var(--amber);
  outline-offset:3px;
  border-radius:4px;
}
.s-light a:focus-visible, .s-light button:focus-visible, .s-light summary:focus-visible{
  outline-color:var(--light-ink);
}

/* ============ ACCENT ON LIGHT GROUND ============
   #D8A65C is tuned for a dark room. On limestone it collapses to
   ~1.6:1, so every accent role steps down to --light-ink, which
   clears AA. Same accent, correct value for the ground. */
.s-light h2 em,
.s-light .cta-title em,
.s-light .hero-title em{
  background:linear-gradient(100deg, #A8762A, #8A6220 70%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.s-light .eyebrow{ color:var(--light-ink); }
.s-light a:not(.btn):hover{ color:var(--light-ink); }

/* ============================================================
   TRUST COMPONENTS
   ============================================================ */
[hidden]{ display:none !important; }

/* ---- section padding: two sections shipped with none of their
   own — .ritual sits between two near-identical darks with no
   colour cue to mask the gap, so its missing padding was fully
   exposed. .founder has the same bug, dormant until it ships. ---- */
.ritual{ padding:var(--sp-section) 0; }
.founder{ padding:var(--sp-section) 0; }

/* ---- the ritual: three cards, one number, one line each ----
   Card redesign, built from a supplied reference image (see the HTML
   comment above the markup for what was and wasn't adopted from it).
   Reuses the same card grammar as .price below rather than inventing
   a second one: .glass for the surface, --sp-grid/--sp-card for the
   grid gap and internal padding, --lift/--dur-card for the same
   hover lift .price already uses. Three cards side by side read as
   "the ritual, in full" rather than "step after step after step,"
   which is closer to what this section is actually saying — the
   ritual is already whole, you're not partway through it. */
.ritual > .container{ position:relative; z-index:1; }

.ritual-cards{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:var(--sp-grid);
}
.ritual-card{
  padding:var(--sp-card);
  transition:transform var(--dur-card) var(--ease), border-color var(--dur-card);
}
.ritual-card:hover{ transform:translateY(calc(var(--lift) * -1)); border-color:rgba(216,166,92,.35); }

.rcard-num{
  font-family:var(--font-b); font-size:var(--fs-label); font-weight:var(--wt-semi);
  letter-spacing:var(--ls-label); color:var(--amber);
  margin-bottom:18px;
  font-variant-numeric:tabular-nums;
}
.ritual-card h3{
  font-family:var(--font-d); font-size:var(--fs-h4);
  font-weight:var(--wt-display); letter-spacing:var(--ls-tight);
  margin-bottom:10px;
}
.ritual-card p{
  font-size:var(--fs-caption); line-height:1.65;
  color:color-mix(in srgb, currentColor 72%, transparent);
}

.ritual-close{
  margin-top:clamp(48px,6vw,80px); text-align:center;
}
.ritual-echo{
  font-family:var(--font-d); font-size:clamp(1.35rem,2.6vw,1.9rem);
  font-weight:var(--wt-display); letter-spacing:var(--ls-heading);
  color:var(--t-dark);
}
.ritual-echo em{ font-style:italic; color:var(--amber); }

@media (max-width:760px){
  .ritual-cards{ grid-template-columns:1fr; }
}

/* ---- social proof placeholder ---- */
.proof-grid{
  margin-top:var(--sp-section-sm);
  padding-top:var(--sp-grid);
  border-top:1px solid var(--linen);
  display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-grid);
}
.proof strong{
  display:block;
  font-family:var(--font-d); font-size:clamp(1.8rem,3vw,2.6rem);
  font-weight:var(--wt-display); letter-spacing:var(--ls-heading);
  font-variant-numeric:tabular-nums;
}
.proof span{
  display:block; margin-top:8px;
  font-size:var(--fs-footnote); line-height:1.5;
  color:color-mix(in srgb, currentColor 62%, transparent);
}
@media (max-width:760px){ .proof-grid{ grid-template-columns:repeat(2,1fr); } }

/* ---- founder ---- */
.founder-grid{
  display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(40px,6vw,88px); align-items:center;
}
.founder-copy p{
  font-size:var(--fs-sub); line-height:1.62;
  color:color-mix(in srgb, currentColor 76%, transparent);
  max-width:52ch; margin-top:var(--sp-title-body);
}
.founder-sign{
  margin-top:var(--sp-body-cta) !important;
  font-size:var(--fs-caption) !important;
  display:flex; flex-direction:column; gap:3px;
}
.founder-sign strong{ font-weight:var(--wt-semi); color:var(--t-dark); }
.founder-sign span{ color:var(--t-low); }
@media (max-width:860px){ .founder-grid{ grid-template-columns:1fr; } }

/* ---- images arrive by fade only; a zoom on a photograph reads as
   a slideshow, not a brand ---- */
@keyframes imgIn{ from{ opacity:0 } to{ opacity:1 } }
.ev-shot > img,
.ev-shot > picture > img,
.hero-photo img{
  animation:imgIn var(--dur-reveal) var(--ease) both;
}

/* ============================================================
   NO-JS GROUND
   ------------------------------------------------------------
   Section backgrounds are painted on <body> by the scroll
   observer, so sections themselves are transparent. Without JS the
   body stayed --ink while .s-light sections kept their near-black
   text: 1.06:1, i.e. invisible. Three of eight sections silently
   disappeared.

   The observer is now an enhancement. Each scope owns a ground of
   its own when JS is absent, so the page is always readable.
   ============================================================ */
html:not(.js) body{ background:var(--ink); }
html:not(.js) .s-light{ background:var(--cream); }
html:not(.js) .s-dark{ background:var(--ink); }
html:not(.js) .hero{ background:var(--night); }
html:not(.js) .footer{ background:var(--ink); }

/* ---- the pocket ---------------------------------------------
   Present from the moment the page starts moving, and never
   removed — its own "Start my mornings" button stays visible the
   whole time, so a route to membership is permanently in reach
   without ever disappearing on a visitor mid-scroll.

     From ₹180 / morning · Mon–Sat   [Start my mornings]
   ------------------------------------------------------------- */
.joinbar{
  position:fixed; left:50%; bottom:22px;
  transform:translate(-50%, 16px);
  z-index:45;
  display:flex; align-items:center; gap:14px;
  padding:10px 10px 10px 20px;
  border-radius:999px;
  background:rgba(14,18,26,.84);
  border:1px solid rgba(237,234,228,.13);
  backdrop-filter:blur(18px) saturate(1.2);
  -webkit-backdrop-filter:blur(18px) saturate(1.2);
  box-shadow:0 14px 44px -18px rgba(0,0,0,.85);
  opacity:0; visibility:hidden;
  transition:opacity var(--dur-nav) var(--ease),
             transform var(--dur-nav) var(--ease),
             padding var(--dur-nav) var(--ease),
             gap var(--dur-nav) var(--ease),
             visibility 0s linear var(--dur-nav);
}
.joinbar.show{
  opacity:1; visibility:visible; transform:translate(-50%, 0);
  transition-delay:0s;
}
.joinbar:hover{ border-color:rgba(216,166,92,.4); }

/* the mark: the brand's dot, doubling as a live indicator */
.jb-dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--amber); flex:0 0 auto;
}
.jb-txt{
  font-size:var(--fs-caption);
  color:color-mix(in srgb, var(--t-dark) 80%, transparent);
  white-space:nowrap;
}
.jb-txt b{ color:var(--amber); font-weight:var(--wt-semi); }
.jb-long{
  display:inline;
  opacity:1;
  transition:opacity var(--dur-hover) var(--ease);
}
.jb-cta{
  font-size:var(--fs-btn); font-weight:var(--wt-medium);
  line-height:1; white-space:nowrap;
  padding:11px 22px; border-radius:999px;
  background:var(--amber); color:var(--night);
  max-width:220px; overflow:hidden;
  transition:max-width var(--dur-nav) var(--ease),
             padding var(--dur-nav) var(--ease),
             opacity var(--dur-hover) var(--ease);
}
.joinbar:hover .jb-cta{ background:var(--gold); }

@media (max-width:620px){
  .joinbar{
    bottom:16px; padding:9px 9px 9px 16px; gap:10px;
    max-width:calc(100vw - 28px);
  }
  /* drop the reassurance rather than clip it — "Pause anytime"
     already sits in the hero trust row and the FAQ */
  .jb-long{ display:none; }
  .jb-txt{ font-size:var(--fs-footnote); }
  .jb-cta{ padding:10px 16px; font-size:var(--fs-footnote); }
}
@media (prefers-reduced-motion:reduce){
  .joinbar, .jb-cta, .jb-long{ transition-duration:.01ms !important; }
}
}

/* ---- tier tag + section note --------------------------------
   A feature shown above the pricing grid has to name its tier, or
   the visitor reasonably assumes it is included. Outlined, never
   filled — it is a label, not a call to action. */
.sec-note{
  margin-top:16px; max-width:56ch;
  font-size:var(--fs-caption); line-height:1.65;
  color:color-mix(in srgb, currentColor 58%, transparent);
}
.sec-note b{ color:var(--amber); font-weight:var(--wt-semi); }
.s-light .sec-note b{ color:var(--light-ink); }

/* struck standard price sits beside the discounted one */
.price-num s{
  display:block;
  font-family:var(--font-b);
  font-size:var(--fs-caption); font-weight:400;
  letter-spacing:0; line-height:1;
  color:color-mix(in srgb, currentColor 45%, transparent);
  margin-bottom:6px;
}

/* ============================================================
   THE FLAVORS
   ------------------------------------------------------------
   Four blends shown at once, not one at a time behind a tablist —
   see the HTML comment for the full product reasoning (Everante
   runs a fixed menu; there is no "choosing" UI to build). No card
   background, no border around each item — the only structural
   device is a hairline between columns, doing the same quiet job a
   drawn line has done elsewhere on this site rather than a box. The
   only motion is a plain CSS hover scale on the product photo;
   nothing here needs JavaScript to work correctly.
   ============================================================ */
.flavor-row{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:0;
}
.flavor-item{
  padding:0 clamp(18px,2.2vw,28px);
  border-left:1px solid var(--linen);
}
.flavor-item:first-child{ padding-left:0; border-left:0; }
.flavor-item:last-child{ padding-right:0; }

.flavor-shot{
  --ar:var(--ar-flavor);
  position:relative; overflow:hidden; border-radius:16px;
  margin-bottom:18px;
}
.flavor-shot img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 500ms var(--ease);
}
.flavor-item:hover .flavor-shot img{ transform:scale(1.04); }

.flavor-item h3{
  font-family:var(--font-d); font-size:var(--fs-h4);
  font-weight:var(--wt-display); letter-spacing:var(--ls-tight);
  margin-bottom:6px;
}
.flavor-note{
  font-size:var(--fs-caption); line-height:1.5;
  color:color-mix(in srgb, currentColor 65%, transparent);
  margin-bottom:10px;
}
.flavor-protein{
  font-size:var(--fs-label); font-weight:var(--wt-semi);
  letter-spacing:var(--ls-label); text-transform:uppercase;
  color:var(--light-ink);
}

/* ---- the week, stated once, never a form ---- */
.week-rhythm{
  margin-top:clamp(56px,6vw,88px);
  padding-top:clamp(28px,3vw,40px);
  border-top:1px solid var(--linen);
}
.week-rhythm-label{
  font-size:var(--fs-label); font-weight:var(--wt-semi);
  letter-spacing:var(--ls-label); text-transform:uppercase;
  color:color-mix(in srgb, currentColor 48%, transparent);
  margin-bottom:20px;
}
.week-days{
  margin:0; display:flex; flex-wrap:wrap; gap:28px 40px;
}
.week-days > div{ display:flex; flex-direction:column; gap:4px; }
.week-days dt{
  font-size:var(--fs-footnote); font-weight:var(--wt-semi);
  letter-spacing:var(--ls-label); text-transform:uppercase;
  color:var(--light-ink);
}
.week-days dd{
  margin:0; font-family:var(--font-d); font-size:var(--fs-body);
  font-weight:var(--wt-display);
}

/* ---- the close: one line, one door back to Membership ---- */
.flavor-close{
  margin-top:clamp(56px,6vw,88px); text-align:center;
}
.flavor-brand{
  font-family:var(--font-d); font-size:clamp(1.5rem,3vw,2.1rem);
  font-weight:var(--wt-display); letter-spacing:var(--ls-heading);
  line-height:1.32; margin-bottom:26px;
}
.flavor-brand em{ font-style:italic; color:var(--light-ink); }

@media (max-width:900px){
  .flavor-row{ grid-template-columns:repeat(2,1fr); row-gap:clamp(36px,5vw,52px); }
  .flavor-item{ border-left:0; padding:0; }
  .flavor-item:nth-child(2n){ padding-left:clamp(18px,2.2vw,28px); }
  .flavor-item:nth-child(odd){ padding-right:clamp(18px,2.2vw,28px); }
}
@media (max-width:640px){
  .flavor-row{ grid-template-columns:1fr; row-gap:36px; }
  .flavor-item{ padding:0 !important; }
  .week-days{ gap:20px 32px; }
}
@media (hover:none){
  .flavor-item:hover .flavor-shot img{ transform:none; }
}

/* ============================================================
   INTERNAL DASHBOARD (dashboard.html — owner + referral-team only)
   Ported from the pre-redesign build; this UI no longer lives on the
   public landing page, only on the access-gated internal page.
   ============================================================ */
.dashboard{ padding:var(--sp-section) 0; }
.dash{
  padding:clamp(30px,3vw,48px);
  box-shadow:0 60px 120px -50px rgba(0,0,0,.8), 0 0 0 1px rgba(216,166,92,.06) inset;
}
.dash-top{
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:26px;
}
.dash-hi{ font-family:var(--font-d); font-size:clamp(1.3rem,2.4vw,1.7rem); font-weight:500; letter-spacing:-.01em; }
.dash-sun-ic{ color:var(--gold); }
.dash-date{ font-size:13px; opacity:.55; margin-top:4px; }
.dash-avatar{
  width:46px; height:46px; border-radius:50%;
  display:grid; place-items:center;
  font-weight:600; color:#10141B;
  background:linear-gradient(140deg, var(--gold), var(--coral));
}
.dash-auth{
  margin:-6px 0 26px;
  padding-bottom:22px;
  border-bottom:1px solid rgba(237,234,228,.1);
}
.dash-auth-label{ font-size:13px; opacity:.7; margin-bottom:12px; }
.dash-auth-form{ display:flex; gap:10px; flex-wrap:wrap; }
.dash-auth-form input{
  flex:1 1 220px; min-width:160px;
  padding:12px 16px;
  border-radius:999px;
  border:1px solid rgba(237,234,228,.16);
  background:rgba(237,234,228,.05);
  color:var(--t-dark);
  font-family:'Inter', sans-serif;
  font-size:13px;
}
.dash-auth-form input::placeholder{ color:rgba(237,234,228,.4); }
.dash-auth-form input:focus{ outline:none; border-color:var(--amber); }
.dash-auth-msg{ margin-top:10px; font-size:12px; min-height:1.2em; }
.dash-auth-msg.error{ color:var(--clay); }
.dash-auth-msg.success{ color:var(--green); }
.checkout-whatsapp-field{
  flex:1 1 100%; display:flex; flex-direction:column; align-items:flex-start; gap:8px;
  font-size:13px; color:var(--t-dark);
}
.checkout-whatsapp-label{ opacity:.7; }
.checkout-whatsapp-options{ display:flex; gap:1.5rem; }
.checkout-whatsapp-options label{ display:flex; align-items:center; gap:6px; cursor:pointer; }
.checkout-whatsapp-hint{ flex:1 1 100%; margin:-4px 0 0; font-size:12px; color:var(--clay); }
.dash-grid{
  display:grid; gap:clamp(16px,1.6vw,24px);
  grid-template-columns:repeat(12, 1fr);
  grid-template-areas:
    "score score score score macros macros macros macros streak streak streak streak"
    "delivery delivery delivery delivery delivery week week week week week week week";
}
.dash-card{
  border-radius:20px;
  background:rgba(237,234,228,.035);
  border:1px solid rgba(237,234,228,.09);
  padding:clamp(22px,2vw,30px);
}
.dash-card h3{
  font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  opacity:.55; margin-bottom:16px;
  display:flex; justify-content:space-between; align-items:baseline; gap:10px;
}
.d-score{ grid-area:score; position:relative; display:grid; place-items:center; }
.d-score .ring{ width:min(180px,100%); }
.ring-fg{ transition:stroke-dashoffset 1.8s ease .2s; }
.d-score-num{ position:absolute; text-align:center; }
.d-score-num strong{ font-size:2.6rem; font-weight:600; letter-spacing:-.03em; display:block; }
.d-score-num span{ display:block; font-size:9px; letter-spacing:.22em; text-transform:uppercase; opacity:.5; margin-top:2px; }
.d-score-num em{
  font-style:normal; display:inline-block; margin-top:8px;
  font-size:10.5px; font-weight:600; color:var(--gold);
  border:1px solid rgba(245,201,123,.35); border-radius:999px; padding:4px 12px;
}
.d-macros{ grid-area:macros; display:flex; flex-direction:column; }
.bar{
  display:grid; grid-template-columns:76px 1fr auto;
  gap:12px; align-items:center;
  padding:9px 0;
}
.bar label{ font-size:12.5px; opacity:.7; }
.bar .track{ height:7px; border-radius:99px; overflow:hidden; background:rgba(237,234,228,.08); }
.bar .track i{
  display:block; height:100%; width:var(--w); border-radius:99px;
  background:linear-gradient(90deg, var(--gold), var(--coral));
}
.bar b{ font-size:13.5px; font-weight:600; }
.bar b small{ font-weight:400; opacity:.5; font-size:11px; }
.d-streak{ grid-area:streak; }
.streak-num{ display:flex; align-items:baseline; gap:8px; margin-bottom:16px; }
.streak-num strong{ font-size:2.4rem; font-weight:600; letter-spacing:-.03em; }
.streak-num span{ font-size:12px; opacity:.55; }
.flame{
  width:10px; height:10px; border-radius:50% 50% 50% 0; rotate:-45deg;
  background:linear-gradient(140deg, var(--gold), var(--coral));
  margin-left:auto;
  box-shadow:0 0 14px rgba(192,138,66,.8);
}
.dots{ display:grid; grid-template-columns:repeat(14,1fr); gap:6px; }
.dots i{ aspect-ratio:1; border-radius:50%; background:rgba(237,234,228,.1); }
.dots i.f{ background:rgba(216,166,92,.30); }
.dots i.f:nth-last-child(-n+7){ background:var(--amber); }
.d-delivery{ grid-area:delivery; }
.del-when{ font-size:15.5px; margin-bottom:14px; opacity:.9; }
.del-when b{ color:var(--gold); }
.del-items{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px; }
.chip{ font-size:11.5px; font-weight:600; padding:7px 13px; border-radius:999px; }
.c-berry{ background:rgba(185,154,163,.14); color:#B99AA3; border:1px solid rgba(185,154,163,.38); }
.c-coconut{ background:rgba(184,168,136,.16); color:#D9CBAE; border:1px solid rgba(184,168,136,.4); }
.del-actions{ display:flex; gap:8px; }
.del-actions span{
  font-size:12px; font-weight:600;
  padding:9px 16px; border-radius:999px;
  border:1px solid rgba(237,234,228,.16);
  color:var(--cream);
}
.d-week{ grid-area:week; }
.d-week .up{ color:var(--green); font-size:11px; letter-spacing:.05em; }
.spark{ width:100%; height:96px; }
@media (max-width:980px){
  .dash-grid{
    grid-template-areas:
      "score score score score score score macros macros macros macros macros macros"
      "streak streak streak streak streak streak delivery delivery delivery delivery delivery delivery"
      "week week week week week week week week week week week week";
  }
}
@media (max-width:640px){
  .dash-grid{
    grid-template-areas:
      "score score score score score score score score score score score score"
      "macros macros macros macros macros macros macros macros macros macros macros macros"
      "streak streak streak streak streak streak streak streak streak streak streak streak"
      "delivery delivery delivery delivery delivery delivery delivery delivery delivery delivery delivery delivery"
      "week week week week week week week week week week week week";
  }
}

/* ============================================================
   CHECKOUT MODAL
   Did not exist in either prior stylesheet — authored fresh here
   using this design's own tokens so it matches on both sides of
   the merge instead of rendering as an unstyled overlay.
   ============================================================ */
.checkout-modal{
  position:fixed; inset:0; z-index:200;
  display:grid; place-items:center;
  padding:20px;
}
.checkout-modal-backdrop{
  position:absolute; inset:0;
  background:rgba(11,14,19,.72);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.checkout-modal-box{
  position:relative;
  width:100%;
  max-width:min(420px, calc(100vw - 2rem));
  box-sizing:border-box;
  max-height:88vh; overflow-y:auto;
  background:var(--ink-2);
  border:1px solid var(--stroke-w);
  border-radius:20px;
  padding:clamp(28px,4vw,40px);
  box-shadow:0 60px 120px -40px rgba(0,0,0,.7);
}
.checkout-modal-close{
  position:absolute; top:16px; right:16px;
  width:32px; height:32px; border-radius:50%;
  border:1px solid rgba(237,234,228,.16);
  background:transparent; color:var(--t-dark);
  font-size:18px; line-height:1; cursor:pointer;
}
.checkout-modal-close:hover{ background:rgba(237,234,228,.08); }
.checkout-step h3{
  font-family:var(--font-d); font-size:1.5rem; font-weight:500;
  margin-bottom:8px;
}
.checkout-step-sub{ font-size:13px; opacity:.65; margin-bottom:20px; }
.checkout-modal-msg{ margin-top:14px; font-size:12px; min-height:1.2em; }
.checkout-modal-msg.error{ color:var(--clay); }
.checkout-modal-msg.success{ color:var(--green); }

/* ============================================================
   LEGAL PAGE (legal.html)
   ------------------------------------------------------------
   A plain reading page, not a scrollytelling section — no
   .glass, no reveal-on-scroll, no decorative motif. Reuses the
   site's existing type scale and .container.narrow (920px) rather
   than inventing a new one; the only new rules here are the jump
   nav, the section rhythm, and the definition-list contact block.
   ============================================================ */
.legal-page{ padding-bottom:clamp(96px,10vw,140px); }
.legal-disclaimer{
  margin:28px 0 0; padding:16px 20px;
  border:1px solid var(--linen); border-radius:14px;
  font-size:var(--fs-caption); line-height:1.65;
  color:color-mix(in srgb, currentColor 68%, transparent);
}
.legal-jump{
  display:flex; flex-wrap:wrap; gap:10px 24px;
  margin:clamp(32px,4vw,48px) 0 0;
  padding-bottom:24px; border-bottom:1px solid var(--linen);
}
.legal-jump a{
  font-family:var(--font-b); font-size:var(--fs-caption); font-weight:var(--wt-medium);
  color:var(--light-ink);
  border-bottom:1px solid color-mix(in srgb, var(--light-ink) 35%, transparent);
  padding-bottom:1px;
}
.legal-jump a:hover{ border-bottom-color:currentColor; }

.legal-section{
  margin-top:clamp(56px,7vw,88px);
  padding-top:clamp(56px,7vw,88px);
  border-top:1px solid var(--linen);
  max-width:var(--measure);
}
.legal-section:first-of-type{ border-top:0; padding-top:0; }
.legal-section h2{ font-size:var(--fs-h3); margin-bottom:8px; }
.legal-updated{
  font-size:var(--fs-footnote); letter-spacing:var(--ls-label); text-transform:uppercase;
  color:color-mix(in srgb, currentColor 45%, transparent);
  margin-bottom:clamp(28px,3vw,40px);
}
.legal-section h3{
  font-family:var(--font-b); font-size:var(--fs-body);
  font-weight:var(--wt-semi); letter-spacing:0;
  margin:28px 0 8px;
}
.legal-section h3:first-of-type{ margin-top:0; }
.legal-section p{
  font-size:var(--fs-body); line-height:var(--lh-body);
  color:color-mix(in srgb, currentColor 82%, transparent);
}

.legal-contact{ margin:24px 0 0; display:flex; flex-direction:column; gap:18px; }
.legal-contact dt{
  font-size:var(--fs-label); font-weight:var(--wt-semi); letter-spacing:var(--ls-label); text-transform:uppercase;
  color:var(--light-ink); margin-bottom:4px;
}
.legal-contact dd{
  margin:0; font-family:var(--font-d); font-size:var(--fs-h4); font-weight:var(--wt-display);
}
.legal-contact a{ color:inherit; }
.legal-contact a:hover{ color:var(--light-ink); }

@media (max-width:640px){
  .legal-jump{ gap:8px 18px; }
}