/* ============================================================
   EVERLUNE — Editorial direction
   A fashion-magazine spread built on the app icon: bone paper,
   near-black Didone display, one sage accent per spread, and
   the crescent doing semantic work in the programs table.
   ============================================================ */

:root{
  /* --- sampled from images/icon.png and the app UI --- */
  --paper:#FCFBF7;    /* page background (bone / off-white) */
  --paper-2:#F6F4ED;  /* alt section background */
  --cream:#FCE9D0;    /* warm cream, icon upper-left */
  --peach:#F2C6A4;    /* peach, icon mid-left */
  --glow:#FDCB91;     /* the moon's warm glow edge */
  --sage:#8B9C7D;     /* primary accent — fills, rules, icons ONLY */
  --sage-dp:#6B7A5E;  /* deeper sage — hover, focus rings, large display */
  --sage-lt:#B2B195;  /* muted sage — decorative only */
  --ink:#17181A;      /* display + body text */
  --ink-2:#5C5E5A;    /* secondary text */
  --line:#E6E2D8;     /* hairlines */
  --line-2:#CFC9BC;   /* stronger hairline: outlined buttons, input borders */

  /* Text-safe sage. #8B9C7D is 2.84:1 on paper and #6B7A5E is 4.44:1 —
     both miss AA under 24px. This one is 5.74:1 on --paper, 5.40:1 on
     --paper-2 and 5.01:1 on --cream, so it is the only sage used for type. */
  --sage-tx:#5A6850;

  --serif:"Playfair Display", "Didot", "Bodoni MT", Georgia, serif;
  --sans:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --pad: clamp(1.25rem, 4.5vw, 5.5rem);
  --maxw: 1560px;
  --rule: 1px solid var(--line);
  --card: 18px;

  /* single source of truth for the cheer hold: script.js reads this so the
     progress fill and the gesture can never drift apart */
  --hold: 1050ms;
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:5.5rem;
}
html,body{ overflow-x:clip; max-width:100%; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:clamp(1rem,0.96rem + 0.2vw,1.075rem);
  line-height:1.62;
  font-weight:350;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ display:block; max-width:100%; height:auto; }
picture{ display:block; }
h1,h2,h3,h4,p,figure,blockquote,dl,dd,table{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
a{ color:inherit; }
em{ font-style:italic; }
button{ font:inherit; }

.wrap{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--pad);
}

.sr-only{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%);
  white-space:nowrap; border:0;
}

.skip-link{
  position:fixed; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:var(--paper);
  padding:.75rem 1.25rem; font-size:.8rem; letter-spacing:.12em; text-transform:uppercase;
}
.skip-link:focus{ left:0; }

:where(a,button,summary,[tabindex]):focus-visible{
  outline:2px solid var(--sage-dp);
  outline-offset:3px;
  border-radius:2px;
}

/* ============================================================
   MOON GLYPH — a miniature of the app icon.
   The path's second arc rx controls the terminator, so the same
   component draws a thin crescent through to a full disc.
   ============================================================ */
.moon{
  --d:60px;
  width:var(--d); height:var(--d);
  flex:0 0 var(--d);
  border-radius:50%;
  display:grid; place-items:center;
  background:linear-gradient(147deg,
     #F9DFBE 0%, var(--peach) 26%, #C9C2A0 56%, #93A181 78%, #66755A 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.34),
    inset 0 -5px 12px rgba(80,92,66,.22),
    0 5px 16px -8px rgba(107,122,94,.55);
}
.moon svg{ width:70%; height:70%; overflow:visible; display:block; }
.moon path{ fill:#FFFEFA; filter:drop-shadow(0 0 2.5px rgba(255,246,228,.9)); }
.moon--xs{ --d:16px; }
.moon--xs svg{ width:76%; height:76%; }
.moon--sm{ --d:clamp(20px,2.4vw,28px); }
.moon--sm svg{ width:76%; height:76%; }
.moon--rule{
  --d:15px;
  background:none; box-shadow:none;
}
.moon--rule svg{ width:100%; height:100%; }
.moon--rule path{ fill:var(--sage-lt); filter:none; }

/* ---------- type primitives ---------- */
.display{
  font-family:var(--serif);
  font-weight:500;
  line-height:.96;
  letter-spacing:-.018em;
  color:var(--ink);
}
.display em{ font-weight:400; letter-spacing:-.012em; }
.display--xl{ font-size:clamp(2.75rem,6.6vw,6.2rem); }
.display--lg{ font-size:clamp(2.5rem,6vw,5.2rem); }
.display--md{ font-size:clamp(2.05rem,4.2vw,3.5rem); }

.label{
  font-family:var(--sans);
  font-size:.6875rem;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--sage-tx);
  margin:0;
}

.body-lg{
  font-size:clamp(1.03rem,0.98rem + 0.32vw,1.2rem);
  line-height:1.62;
  color:var(--ink-2);
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.75rem;
  background:var(--ink); color:var(--paper);
  border-radius:999px;
  text-decoration:none;
  font-weight:450;
  letter-spacing:.005em;
  transition:background .25s ease, transform .25s ease;
  white-space:nowrap;
  -webkit-tap-highlight-color:transparent;
}
.btn:hover{ background:#2C2E30; }
.btn:active{ transform:translateY(1px); }
/* apple-icon.png is already a white glyph on transparency, and googleplay-icon.png is
   full-colour — so neither wants a filter. Inverting turned the Apple mark black and it
   vanished into the dark button. */
.btn__glyph{ opacity:1; }
.btn--lg{ padding:.9rem 1.85rem; font-size:1rem; }
.btn--sm{ padding:.55rem 1.05rem; font-size:.82rem; min-height:44px; }
.btn--sm .btn__glyph{ width:15px; height:15px; }
.btn--lg .btn__glyph{ width:21px; height:21px; }
.btn__stack{ display:flex; flex-direction:column; line-height:1.12; text-align:left; }
.btn__stack small{ font-size:.7rem; letter-spacing:.06em; color:#D8D6D2; }
.btn__stack b{ font-size:1.02rem; font-weight:500; letter-spacing:.01em; }

/* Secondary store button: outlined on paper, so two live store CTAs can sit side by
   side without the page carrying two heavy black slabs. */
.btn--alt{
  background:transparent;
  color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--line-2);
}
.btn--alt:hover{ background:rgba(23,24,26,.05); }
.btn--alt .btn__stack small{ color:var(--ink-2); }

.cta{ margin-top:clamp(1.5rem,2.6vw,2.2rem); display:flex; align-items:center; gap:1rem; flex-wrap:wrap; }
.cta--center{ justify-content:center; }
.cta__note{
  margin-top:0;
  font-size:.72rem;
  letter-spacing:.17em;
  text-transform:uppercase;
  color:var(--sage-tx);
  font-weight:600;
  line-height:1.7;
}

/* hero trust chips */
.chips{
  display:flex; flex-wrap:wrap;
  gap:.55rem .5rem;
  margin-top:clamp(1.35rem,2.2vw,1.85rem);
}
.chips li{
  font-size:.76rem;
  letter-spacing:.02em;
  color:var(--ink-2);
  border:1px solid var(--line);
  background:rgba(252,251,247,.72);
  border-radius:999px;
  padding:.42rem .85rem;
  white-space:nowrap;
}

/* ============================================================
   MASTHEAD
   ============================================================ */
.masthead{
  position:sticky; top:0; z-index:100;
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  -webkit-backdrop-filter:saturate(1.1) blur(14px);
  backdrop-filter:saturate(1.1) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .3s ease;
}
.masthead.is-stuck{ border-bottom-color:var(--line); }
.masthead__inner{
  max-width:var(--maxw); margin-inline:auto;
  padding:.8rem var(--pad);
  display:flex; align-items:center; gap:1.5rem;
}
.wordmark{
  display:inline-flex; align-items:center; gap:.6rem;
  text-decoration:none; flex:0 0 auto;
}
.wordmark__text{
  font-family:var(--serif);
  font-size:1.28rem; font-weight:500; letter-spacing:.055em;
  line-height:1;
}
.masthead__nav{ margin-inline:auto; }
.masthead__nav ul{ display:flex; gap:clamp(1rem,2vw,2.1rem); }
.masthead__nav a{
  text-decoration:none;
  font-size:.74rem; letter-spacing:.14em; text-transform:uppercase;
  font-weight:500; color:var(--ink-2);
  padding-block:.35rem;
  border-bottom:1px solid transparent;
  transition:color .2s ease, border-color .2s ease;
}
.masthead__nav a:hover,
.masthead__nav a.is-current{ color:var(--ink); border-bottom-color:var(--sage-dp); }
.masthead__end{ display:flex; align-items:center; gap:1.1rem; flex:0 0 auto; }
.masthead__readout{
  font-size:.7rem; letter-spacing:.17em; text-transform:uppercase;
  color:var(--sage-tx); font-weight:600; white-space:nowrap;
}
@media (max-width:1240px){ .masthead__readout{ display:none; } }
@media (max-width:1000px){
  .masthead__nav{ display:none; }
  .masthead__inner{ justify-content:space-between; }
}

/* ============================================================
   COVER
   ============================================================ */
.cover{
  position:relative; overflow:clip;
  padding-top:clamp(2.25rem,4.4vw,4rem);
  padding-bottom:clamp(2.5rem,5vw,4.5rem);
}
.cover__glow{
  position:absolute; left:-24%; top:-32%;
  width:min(1180px,142vw); aspect-ratio:1;
  background:radial-gradient(closest-side at 50% 50%,
     rgba(253,203,145,.42) 0%, rgba(252,233,208,.28) 34%,
     rgba(252,233,208,.11) 58%, rgba(252,251,247,0) 100%);
  pointer-events:none; z-index:0;
}
.cover__grid{
  position:relative; z-index:1;
  display:grid;
  grid-template-columns: minmax(0,1.2fr) minmax(0,.6fr);
  gap:clamp(2rem,5vw,5rem);
  align-items:start;
}

.issueline{
  display:flex; align-items:center; gap:.75rem; flex-wrap:wrap;
  font-size:.7rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--sage-tx); font-weight:600;
  padding-bottom:1rem; margin-bottom:clamp(1.25rem,2.4vw,2rem);
  border-bottom:var(--rule);
}
.issueline .sep{ color:var(--ink-2); letter-spacing:0; }

.cover__type h1{ margin:0; }
.display--xl em{ color:var(--sage-tx); }
.deck{
  margin-top:clamp(1.35rem,2.4vw,2rem);
  max-width:46ch;
  font-size:clamp(1.03rem,0.97rem + 0.36vw,1.22rem);
  line-height:1.6;
  color:var(--ink-2);
}

/* ============================================================
   DEVICE PLATES
   shot-2/3/4 are opaque rectangles whose own background is exactly
   --paper. Each is given an explicit --paper card so the rectangle
   always reads as intentional, and the outer pixels are feathered
   back to --paper so the asset's clipped drop-shadow never shows.
   ============================================================ */
.plate-fig{ position:relative; margin-inline:auto; }
.device-plate picture{
  position:relative;
  background:var(--paper);
  border-radius:var(--card);
  overflow:hidden;
}
.device-plate picture::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(to right,  var(--paper), rgba(252,251,247,0) 30px),
    linear-gradient(to left,   var(--paper), rgba(252,251,247,0) 30px),
    linear-gradient(to top,    var(--paper), rgba(252,251,247,0) 32px),
    linear-gradient(to bottom, var(--paper), rgba(252,251,247,0) 24px);
}
/* the hero shot's phone is cut flat at the bottom — dissolve it into the page */
.cover__plate picture::after{
  background:
    linear-gradient(to right,  var(--paper), rgba(252,251,247,0) 30px),
    linear-gradient(to left,   var(--paper), rgba(252,251,247,0) 30px),
    linear-gradient(to top,    var(--paper), rgba(252,251,247,0) 32px),
    linear-gradient(to bottom, var(--paper) 10px, rgba(252,251,247,0) 150px);
}
.plate-fig figcaption{
  margin-top:.85rem;
  padding-top:.7rem;
  border-top:var(--rule);
  font-size:.7rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--ink-2); font-weight:500;
  display:flex; gap:.7rem; align-items:baseline; flex-wrap:wrap;
}
.plate-no{ color:var(--sage-tx); font-weight:700; letter-spacing:.2em; }

.cover__plate{ max-width:460px; }
.cover__plate img{ width:100%; height:auto; margin-top:-1.25rem; }

@media (max-width:1080px){
  .cover__grid{ grid-template-columns:minmax(0,1fr) minmax(0,.58fr); }
}
@media (max-width:900px){
  .cover__grid{ grid-template-columns:1fr; gap:2.5rem; }
  .cover__plate{ max-width:min(420px,86%); }
  .cover__plate img{ margin-top:0; }
}

/* ============================================================
   MECHANIC STRIP
   ============================================================ */
.strip{
  border-block:1px solid var(--line);
  background:var(--paper-2);
  padding-block:clamp(1.5rem,2.8vw,2.4rem);
}
.strip__line{
  font-family:var(--serif);
  font-size:clamp(1.2rem,2.5vw,2.05rem);
  line-height:1.28;
  letter-spacing:-.012em;
  color:var(--ink);
  text-align:center;
}
.strip__line em{ color:var(--sage-tx); }

/* ============================================================
   SECTION SCAFFOLD
   ============================================================ */
.section{ padding-block:clamp(4rem,8vw,8.5rem); position:relative; overflow:clip; }
.section--alt{ background:var(--paper-2); }
.section > .wrap{ position:relative; z-index:1; }

/* soft warmth washes lifted from the icon's gradient field */
.sec-glow{
  position:absolute; z-index:0; pointer-events:none;
  left:-16%; top:-14%;
  width:min(880px,86vw); aspect-ratio:1;
  background:radial-gradient(closest-side at 50% 50%,
     rgba(253,203,145,.24) 0%, rgba(252,233,208,.15) 40%, rgba(252,233,208,0) 100%);
}
.sec-glow--right{ left:auto; right:-14%; top:auto; bottom:-16%;
  background:radial-gradient(closest-side at 50% 50%,
     rgba(139,156,125,.16) 0%, rgba(178,177,149,.10) 42%, rgba(252,251,247,0) 100%);
}

.sec-head{
  display:grid;
  grid-template-columns:minmax(0,auto) minmax(0,1fr);
  gap:.4rem clamp(2rem,5vw,5rem);
  align-items:end;
  padding-bottom:clamp(1.5rem,2.6vw,2.2rem);
  border-bottom:1px solid var(--ink);
  margin-bottom:clamp(2.25rem,4vw,3.5rem);
}
.sec-no{
  grid-column:1; grid-row:1;
  font-size:.7rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--sage-tx); font-weight:700;
  margin:0 0 .55rem;
}
.sec-title{
  grid-column:1; grid-row:2;
  font-family:var(--serif); font-weight:500;
  font-size:clamp(2.3rem,5.2vw,4.4rem);
  line-height:.98; letter-spacing:-.02em;
  margin:0;
}
.sec-standfirst{
  grid-column:2; grid-row:2;
  max-width:48ch; justify-self:end;
  font-size:clamp(.98rem,0.94rem + 0.24vw,1.1rem);
  line-height:1.6; color:var(--ink-2);
  padding-bottom:.35rem;
}
@media (max-width:900px){
  .sec-head{ grid-template-columns:1fr; }
  .sec-standfirst{ grid-column:1; grid-row:3; justify-self:start; margin-top:1.1rem; }
}

/* ============================================================
   Nº 01 — POLES
   ============================================================ */
.poles{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  gap:clamp(1.5rem,4vw,4rem);
  align-items:center;
}
.pole__quote{ margin:.9rem 0 0; }
.pole__quote p{
  font-family:var(--serif);
  font-size:clamp(1.4rem,2.8vw,2.35rem);
  line-height:1.16; letter-spacing:-.012em;
  color:var(--ink);
}
.pole--right{ text-align:right; }
.pole__meta{
  margin-top:1rem;
  font-size:.72rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--ink-2); font-weight:500;
}
.poles__rule{ align-self:stretch; display:flex; justify-content:center; }
.poles__rule span{
  display:block; width:1px; min-height:100%;
  background:linear-gradient(to bottom,
    rgba(230,226,216,0), var(--sage-lt) 22%, var(--sage-lt) 78%, rgba(230,226,216,0));
}
@media (max-width:860px){
  .poles{ grid-template-columns:1fr; gap:2rem; }
  .pole--right{ text-align:left; }
  .poles__rule{ display:none; }
}

/* ============================================================
   Nº 01 — CONTENTS TABLE
   ============================================================ */
.contents{ margin-top:clamp(3rem,6vw,5.5rem); }
.contents__head{
  display:flex; justify-content:space-between; align-items:center;
  gap:1.5rem; flex-wrap:wrap;
  padding-bottom:1rem;
}
.spectrum{
  display:flex; align-items:center; gap:.9rem;
  font-size:.68rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--sage-tx); font-weight:700;
}
.spectrum i{
  display:block; width:clamp(80px,14vw,190px); height:2px;
  background:linear-gradient(to right, var(--sage-lt), var(--sage), var(--sage-dp));
  border-radius:2px;
}

.table-scroll{ overflow-x:auto; }
.programs{
  width:100%;
  border-collapse:collapse;
  border-top:1px solid var(--ink);
}
.programs thead th{
  font-size:.66rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--sage-tx); font-weight:700;
  padding:.85rem 0;
  border-bottom:var(--rule);
  text-align:left;
  white-space:nowrap;
}
.programs thead th.c-num,
.programs thead th.c-tone{ text-align:right; padding-left:clamp(1rem,2.4vw,2.5rem); }
.programs tbody tr{ border-bottom:var(--rule); transition:background .3s ease; }
.programs tbody tr:hover{ background:rgba(139,156,125,.06); }
.programs tbody th,
.programs tbody td{
  padding:clamp(1rem,1.8vw,1.5rem) 0;
  vertical-align:middle;
}
.programs tbody th.c-name{
  text-align:left; font-weight:400;
  display:flex; align-items:center; gap:clamp(.85rem,1.6vw,1.4rem);
}
.p-no{
  font-size:.72rem; letter-spacing:.16em; font-weight:700;
  color:var(--sage-tx);
  font-variant-numeric:tabular-nums;
  flex:0 0 auto;
}
.programs .moon{
  --d:clamp(38px,3.6vw,52px);
  transition:transform .5s cubic-bezier(.2,.7,.3,1);
}
.programs tbody tr:hover .moon{ transform:scale(1.07) rotate(-6deg); }
.p-body{ display:flex; flex-direction:column; gap:.2rem; min-width:0; }
.p-name{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(1.32rem,2.3vw,1.95rem);
  line-height:1.12; letter-spacing:-.015em;
  color:var(--ink);
  display:flex; align-items:baseline; gap:.6rem; flex-wrap:wrap;
}
.p-desc{
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(1rem,1.4vw,1.22rem);
  line-height:1.35; color:var(--ink-2);
}
/* the dagger stays a typographic superscript, but carries an invisible
   44px pointer target so the footnote is reachable on a phone */
.p-dagger{
  font-size:.62em; color:var(--sage-tx); font-weight:700;
  text-decoration:none; font-family:var(--sans);
  vertical-align:super;
  position:relative; display:inline-block;
}
.p-dagger::after{
  content:""; position:absolute;
  left:50%; top:50%; transform:translate(-50%,-50%);
  width:44px; height:44px;
}
.p-dagger:hover{ color:var(--ink); }
.tag{
  font-family:var(--sans);
  /* 11.5px, not 9.9px — the smallest type on the page has to stay legible.
     Tracking and padding are pulled in to match, so the pill still fits on
     one line beside the program name down to 360px. */
  font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  font-weight:700; color:var(--paper);
  background:var(--ink);
  padding:.36em .55em .32em; border-radius:999px;
  white-space:nowrap;
}
.programs td.c-num,
.programs td.c-tone{
  text-align:right;
  padding-left:clamp(1rem,2.4vw,2.5rem);
  font-size:.74rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--ink-2); font-weight:500;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.programs td.c-tone{ color:var(--sage-tx); font-weight:700; }
.programs tr.is-signature{ background:rgba(252,233,208,.28); }
.programs tr.is-signature:hover{ background:rgba(252,233,208,.42); }

/* mobile: stack rows, keep the header cells in the a11y tree */
@media (max-width:860px){
  .table-scroll{ overflow-x:visible; }
  .programs thead{
    position:absolute; width:1px; height:1px;
    overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%);
  }
  .programs,
  .programs tbody,
  .programs tbody tr,
  .programs tbody th,
  .programs tbody td{ display:block; width:auto; }
  .programs tbody tr{ padding:1.35rem 0; }
  .programs tbody th,
  .programs tbody td{ padding:0; }
  .programs tbody th.c-name{ gap:.9rem; }
  .programs td.c-num,
  .programs td.c-tone{
    display:inline; padding-left:0; text-align:left;
  }
  .programs td.c-num[data-label="Days"]::before{
    content:""; display:block; height:.85rem;
  }
  .programs td.c-num[data-label="Days"]::after{ content:" days"; }
  .programs td.c-num[data-label="Habits"]::after{ content:" habits"; }
  .programs td.c-num + td.c-num::before,
  .programs td.c-tone::before{ content:"·"; padding:0 .5em; color:var(--sage-tx); }
}

/* Plate II — a window onto the real in-app card. The screenshot is
   cropped in CSS to the card's own type block, so the surrounding
   program-picker chrome (and its in-app participation labels, which
   are seed values and not site statistics) never reaches the page. */
.specimen{
  margin-top:clamp(2.25rem,4vw,3.25rem);
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(1.75rem,4vw,4rem);
  align-items:center;
}
.specimen__fig{ max-width:600px; width:100%; }
.specimen__win{
  overflow:hidden;
  border-radius:var(--card);
  background:var(--paper);
  box-shadow:0 26px 52px -40px rgba(23,24,26,.45);
}
/* images/specimen-hard75.* is pre-cropped to just the in-app card, so this needs no
   offset trickery — and the surrounding screenshot furniture cannot creep back in. */
.specimen__win img{ display:block; width:100%; height:auto; }
@media (max-width:860px){
  .specimen{ grid-template-columns:1fr; gap:2rem; }
}

.footnote{
  display:flex; gap:.8rem;
  margin-top:0;
  padding:1.35rem clamp(1.1rem,2.4vw,2rem) 1.4rem;
  background:linear-gradient(120deg, rgba(252,233,208,.55), rgba(252,251,247,0) 78%);
  border-left:2px solid var(--sage);
  max-width:78ch;
  font-size:.9rem; line-height:1.66; color:var(--ink-2);
}
.footnote__mark{ color:var(--sage-tx); font-weight:700; flex:0 0 auto; }
.footnote strong{ color:var(--ink); font-weight:600; }
.footnote:target{ background:linear-gradient(120deg, rgba(253,203,145,.6), rgba(252,251,247,0) 80%); }

.prog-close{
  margin-top:clamp(3.5rem,7vw,6rem);
  padding-top:clamp(2.5rem,5vw,4rem);
  border-top:1px solid var(--ink);
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1.5rem,5vw,5.5rem);
  align-items:start;
}
.prog-close__type .body-lg{ margin-top:1.4rem; max-width:42ch; }
.ticks{ border-top:var(--rule); }
.ticks li{
  padding:.85rem 0 .85rem 2rem;
  border-bottom:var(--rule);
  position:relative;
  font-size:.98rem; color:var(--ink);
}
.ticks li::before{
  content:""; position:absolute; left:.15rem; top:1.35rem;
  width:9px; height:9px; border-radius:50%;
  background:var(--sage);
}
@media (max-width:900px){
  .prog-close{ grid-template-columns:1fr; gap:2rem; }
}

/* ============================================================
   Nº 02 — METHOD
   ============================================================ */
.steps{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1.75rem,3.5vw,3.5rem);
}
.step{ border-top:1px solid var(--ink); padding-top:1.35rem; }
.step__no{
  font-family:var(--serif);
  font-size:clamp(2.6rem,4.6vw,4.2rem);
  line-height:.9; font-weight:400; font-style:italic;
  color:var(--sage-tx);
  margin:0 0 .85rem;
}
.step__title{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(1.35rem,2.1vw,1.75rem);
  line-height:1.15; letter-spacing:-.012em;
  margin-bottom:.75rem;
}
.step__body{ color:var(--ink-2); font-size:.985rem; line-height:1.66; }
.drop::first-letter{
  font-family:var(--serif);
  font-size:1.05em;
  font-weight:600;
  color:var(--ink);
}
@media (max-width:860px){
  .steps{ grid-template-columns:1fr; gap:2.25rem; }
  .step:first-child{ border-top:0; padding-top:0; }
}

.callout{
  margin-top:clamp(3rem,6vw,5rem);
  padding:clamp(2rem,4vw,3.4rem) clamp(1.5rem,4vw,4rem);
  background:
    radial-gradient(90% 130% at 12% 0%, rgba(252,233,208,.5) 0%, rgba(252,251,247,0) 62%),
    var(--paper);
  border:1px solid var(--line);
  border-radius:var(--card);
  text-align:center;
}
.callout__kicker{
  font-size:.7rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--sage-tx); font-weight:700; margin-bottom:1.1rem;
}
.callout__quote{
  font-family:var(--serif);
  font-size:clamp(1.5rem,3.4vw,2.8rem);
  line-height:1.16; letter-spacing:-.015em;
  color:var(--ink);
  max-width:22ch; margin-inline:auto;
}
.callout__sub{
  margin-top:1.5rem; max-width:62ch; margin-inline:auto;
  font-size:.93rem; line-height:1.65; color:var(--ink-2);
}

/* ============================================================
   PLATE III — FULL-BLEED EDITORIAL + MID-SCROLL CTA
   ============================================================ */
.plate{ position:relative; background:var(--cream); isolation:isolate; }
.plate__img{
  width:100%; height:clamp(380px,52vw,860px);
  object-fit:cover; object-position:50% 12%;
}
.plate__scrim{
  position:absolute; inset:0;
  background:linear-gradient(to top,
    rgba(252,251,247,.96) 0%, rgba(252,251,247,.86) 26%,
    rgba(252,251,247,.28) 52%, rgba(252,251,247,0) 74%);
}
.plate__type{
  position:absolute; left:0; right:0; bottom:clamp(2rem,4.5vw,4rem);
  z-index:2;
}
.label--onphoto{ margin-bottom:1rem; }
.plate .display--lg{ margin:0; }
.plate .display--lg em{ color:var(--sage-tx); }
.plate__sub{
  margin-top:1.1rem;
  font-family:var(--serif); font-style:italic;
  font-size:clamp(1.05rem,1.8vw,1.5rem);
  color:var(--ink-2);
}
.plate__cta{ margin-top:clamp(1.5rem,2.6vw,2.1rem); }
.plate .cta__note{ margin-top:.95rem; }
@media (max-width:820px){
  .plate{ background:var(--paper); padding-bottom:clamp(2.5rem,7vw,3.5rem); }
  .plate__img{ height:min(340px,78vw); object-position:50% 6%; }
  .plate__scrim{ display:none; }
  .plate__type{ position:static; margin-top:clamp(1.75rem,5vw,2.5rem); }
}

/* ============================================================
   Nº 03 — CIRCLE
   ============================================================ */
.circle-grid{
  display:grid;
  grid-template-columns:minmax(0,.62fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,5.5rem);
  align-items:start;
}
.circle-grid__plate{ max-width:400px; }

.feat{ border-top:1px solid var(--ink); }
.feat__row{
  display:grid;
  grid-template-columns:minmax(0,.5fr) minmax(0,1fr);
  gap:.4rem clamp(1.5rem,3vw,3rem);
  padding:clamp(1rem,1.8vw,1.4rem) 0;
  border-bottom:var(--rule);
}
.feat dt{
  font-family:var(--serif);
  font-size:clamp(1.12rem,1.7vw,1.4rem);
  font-weight:500; line-height:1.2; letter-spacing:-.01em;
}
.feat dd{ margin:0; color:var(--ink-2); font-size:.96rem; line-height:1.6; }
@media (max-width:660px){ .feat__row{ grid-template-columns:1fr; } }
@media (max-width:960px){
  .circle-grid{ grid-template-columns:1fr; gap:2.5rem; }
  .circle-grid__plate{ max-width:min(370px,84%); }
}

/* --- the fabricated circle panel + the bare three-line stack --- */
.cheer-spread{
  margin-top:clamp(3.5rem,7vw,6rem);
  display:grid;
  grid-template-columns:minmax(0,.95fr) minmax(0,1fr);
  gap:clamp(2.25rem,5vw,5.5rem);
  align-items:center;
}
.panel{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--card);
  padding:clamp(1.35rem,2.4vw,2.15rem);
  box-shadow:0 30px 60px -46px rgba(23,24,26,.42);
}
.panel__head{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  padding-bottom:1.05rem; border-bottom:var(--rule);
}
.panel__title{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(1.24rem,1.8vw,1.5rem); letter-spacing:-.012em;
}
.panel__date{
  font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--sage-tx); font-weight:700;
}
.friend{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto auto;
  align-items:center;
  gap:clamp(.75rem,1.4vw,1.1rem);
  padding:1.1rem 0;
  border-bottom:var(--rule);
}
.ring{
  --pct:50%;
  position:relative; flex:none;
  width:52px; height:52px; border-radius:50%;
  background:conic-gradient(var(--sage) 0 var(--pct), #E4E0D4 0 100%);
  display:grid; place-items:center;
}
.ring__face{
  width:42px; height:42px; border-radius:50%;
  background:linear-gradient(145deg,var(--cream),var(--peach));
  border:2.5px solid var(--paper);
  display:grid; place-items:center;
  font-family:var(--serif);
  font-size:1.08rem;
  color:#5C4128;
}
.ring__face--b{ background:linear-gradient(145deg,#E7EDE0,var(--sage-lt)); color:#313A27; }
.ring__face--c{ background:linear-gradient(145deg,#FBEFE2,#EFD8C4); color:#5C4128; }
.ring__face::after{ content:attr(data-initial); }

.friend__id{ display:flex; flex-direction:column; line-height:1.34; min-width:0; }
.friend__id b{ font-weight:500; font-size:1.02rem; letter-spacing:.005em; }
.friend__id small{ font-size:.8rem; color:var(--ink-2); }

.dots{ display:inline-flex; gap:5px; }
.dots i{
  width:9px; height:9px; border-radius:50%;
  border:1.5px solid var(--sage-dp);
}
.dots i.on{ background:var(--sage-dp); border-color:var(--sage-dp); }
.friend__score{
  font-family:var(--serif);
  font-size:1.05rem; color:var(--ink);
  min-width:2.6ch; text-align:right;
}

.cheer{ margin-top:1.4rem; }
.cheer__btn{
  position:relative; width:100%;
  border:1.5px solid var(--sage-lt);
  background:#F3F4EE;
  border-radius:999px;
  padding:1rem 1.3rem;
  cursor:pointer;
  overflow:hidden;
  color:var(--ink);
  font-size:1rem; font-weight:400;
  transition:border-color .25s ease, background-color .25s ease, color .25s ease;
  -webkit-user-select:none; user-select:none;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.cheer__btn:hover{ border-color:var(--sage-dp); }
.cheer__fill{
  position:absolute; inset:0;
  transform:scaleX(0); transform-origin:left center;
  background:linear-gradient(90deg,var(--cream),var(--glow));
}
.cheer__btn.is-holding .cheer__fill{ transform:scaleX(1); transition:transform var(--hold) linear; }
.cheer__btn.is-done{ background:var(--ink); border-color:var(--ink); color:var(--paper); }
.cheer__btn.is-done .cheer__fill{ opacity:0; transition:opacity .3s ease; }
.cheer__label{ position:relative; display:inline-flex; align-items:center; gap:.6rem; }
.cheer__spark{ color:var(--sage-tx); font-size:1.05rem; line-height:1; transition:color .25s ease; }
.cheer__btn.is-done .cheer__spark{ color:var(--glow); }
.cheer__hint{
  margin-top:.75rem; text-align:center;
  font-size:.82rem; color:var(--ink-2);
}

.voidstack__lines{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(2rem,4.6vw,3.9rem);
  line-height:1.06; letter-spacing:-.022em;
  color:var(--ink);
}
.voidstack__sub{
  margin-top:clamp(1.1rem,2vw,1.6rem);
  font-family:var(--serif); font-style:italic;
  font-size:clamp(1.25rem,2.2vw,1.85rem);
  line-height:1.24; letter-spacing:-.012em;
  color:var(--sage-tx);
}
.voidstack__body{
  margin-top:clamp(1.35rem,2.4vw,2rem);
  max-width:44ch;
  font-size:.98rem; line-height:1.68; color:var(--ink-2);
}
@media (max-width:960px){
  .cheer-spread{ grid-template-columns:1fr; gap:2.75rem; }
}
/* very narrow: give the progress dots their own line so names never
   break across three lines beside them */
@media (max-width:440px){
  .friend{ grid-template-columns:auto minmax(0,1fr) auto; row-gap:.5rem; }
  .friend .ring{ grid-column:1; grid-row:1 / 3; }
  .friend__id{ grid-column:2; grid-row:1; }
  .friend__score{ grid-column:3; grid-row:1; }
  .friend .dots{ grid-column:2 / 4; grid-row:2; }
}

/* ============================================================
   Nº 04 — INSIDE THE APP
   ============================================================ */
.index-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1.75rem,3vw,3rem);
  align-items:start;
}
.idx-stack{ display:grid; gap:clamp(1.75rem,3vw,2.5rem); }
.idx{ border-top:1px solid var(--ink); padding-top:1.15rem; }
.idx__title{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(1.4rem,2.2vw,1.9rem);
  line-height:1.1; letter-spacing:-.014em;
  margin-bottom:1rem;
}
.idx ul li{
  padding:.7rem 0;
  border-bottom:var(--rule);
  font-size:.9rem; line-height:1.55; color:var(--ink-2);
}
.idx ul li:last-child{ border-bottom:0; }
@media (max-width:960px){ .index-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:620px){
  .index-grid{ grid-template-columns:1fr; gap:2rem; }
  .idx-stack{ gap:2rem; }
}

.index-note{
  margin-top:clamp(2.25rem,4vw,3.25rem);
  padding-top:1.35rem;
  border-top:var(--rule);
  max-width:80ch;
  font-size:.9rem; line-height:1.68; color:var(--ink-2);
}

/* ============================================================
   Nº 05 — FAQ (always open, two columns)
   ============================================================ */
.faq{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:clamp(2rem,5vw,5rem);
}
.qa{ padding:1.4rem 0 1.5rem; border-bottom:var(--rule); }
.qa h3{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(1.15rem,1.7vw,1.42rem);
  line-height:1.2; letter-spacing:-.012em;
  margin-bottom:.55rem;
}
.qa p{ color:var(--ink-2); font-size:.94rem; line-height:1.62; max-width:54ch; }
@media (max-width:860px){ .faq{ grid-template-columns:1fr; } }

/* ============================================================
   END CTA
   ============================================================ */
.endcta{
  position:relative; overflow:clip;
  padding-block:clamp(4.5rem,9vw,9rem);
  background:var(--paper-2);
  border-top:var(--rule);
  text-align:center;
}
.endcta__glow{
  position:absolute; left:50%; top:-24%;
  width:min(980px,116vw); aspect-ratio:1; transform:translateX(-50%);
  background:radial-gradient(closest-side at 50% 50%,
     rgba(253,203,145,.46) 0%, rgba(242,198,164,.24) 38%, rgba(246,244,237,0) 72%);
  pointer-events:none;
}
.endcta__inner{ position:relative; z-index:1; }
.endcta picture{ display:flex; justify-content:center; }
.endcta__icon{
  width:clamp(78px,8.5vw,112px); height:auto;
  margin:0 auto clamp(1.5rem,2.6vw,2.2rem);
  border-radius:24%;
  box-shadow:0 18px 48px -22px rgba(23,24,26,.32);
}
.endcta .display--lg em{ color:var(--sage-tx); }
.endcta__deck{
  margin:clamp(1.2rem,2.2vw,1.8rem) auto 0;
  max-width:38ch;
  font-family:var(--serif); font-style:italic;
  font-size:clamp(1.1rem,1.9vw,1.5rem);
  color:var(--ink-2);
}
.endcta .btn{ margin-top:clamp(1.6rem,2.8vw,2.3rem); }
.endcta .cta__note{ margin-top:1.15rem; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{
  background:var(--paper);
  border-top:1px solid var(--ink);
  padding-block:clamp(3rem,6vw,5rem) clamp(2rem,4vw,3rem);
}
.footer__top{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:1.5rem; flex-wrap:wrap;
  padding-bottom:clamp(2rem,4vw,3rem);
  border-bottom:var(--rule);
}
.wordmark--lg .wordmark__text{ font-size:clamp(1.9rem,4vw,3rem); letter-spacing:.04em; }
.footer__tag{
  font-family:var(--serif); font-style:italic;
  font-size:clamp(1.05rem,1.7vw,1.35rem);
  color:var(--ink-2);
}
.footer__cols{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(2rem,4vw,4rem);
  padding-block:clamp(2rem,4vw,3rem);
}
.footer__col ul{ margin-top:.6rem; display:grid; gap:0; justify-items:start; }
.footer__col a{
  display:inline-block;
  padding-block:.7rem;
  line-height:1.4;
  text-decoration:none; font-size:.93rem; color:var(--ink-2);
  border-bottom:1px solid transparent;
  transition:color .2s ease, border-color .2s ease;
}
.footer__col a:hover{ color:var(--ink); border-bottom-color:var(--sage-dp); }
/* a crescent breaking the footer's hairline in two */
.footer__rule{
  display:flex; align-items:center; gap:1.1rem;
  margin-block:clamp(1.5rem,3vw,2.25rem);
}
.footer__rule::before,
.footer__rule::after{
  content:""; flex:1; height:1px;
  background:linear-gradient(90deg,transparent,var(--line) 22%,var(--line) 78%,transparent);
}
.footer__legal{
  display:flex; justify-content:space-between; gap:.6rem 1.5rem; flex-wrap:wrap;
  font-size:.76rem; line-height:1.6; color:var(--ink-2);
}
@media (max-width:760px){ .footer__cols{ grid-template-columns:1fr; gap:2rem; } }
@media (max-width:580px){
  .footer__top{ flex-direction:column; align-items:flex-start; gap:.9rem; }
  .footer__legal{ flex-direction:column; gap:.45rem; }
}

/* ============================================================
   LEGAL PAGES (privacy.html / terms.html)
   ============================================================ */
.legal-page{
  max-width:56rem;
  margin-inline:auto;
  padding:clamp(3rem,7vw,6rem) var(--pad) clamp(4rem,8vw,7rem);
}
.legal-header{
  padding-bottom:clamp(1.5rem,3vw,2.25rem);
  border-bottom:1px solid var(--ink);
  margin-bottom:clamp(2rem,4vw,3rem);
}
.legal-header h1{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(2.4rem,6vw,4.2rem);
  line-height:.98; letter-spacing:-.02em;
}
.legal-header .last-updated,
.legal-page .last-updated{
  margin-top:1.1rem;
  font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--sage-tx); font-weight:700;
}
.legal-body{ font-size:1.0125rem; line-height:1.72; color:var(--ink-2); }
.legal-body h2{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(1.5rem,3vw,2.15rem);
  line-height:1.14; letter-spacing:-.015em;
  color:var(--ink);
  margin:clamp(2.5rem,4.5vw,3.5rem) 0 .9rem;
  padding-top:1.4rem;
  border-top:var(--rule);
}
.legal-body h2:first-child,
.legal-body hr + h2{ margin-top:0; padding-top:0; border-top:0; }
.legal-body h3{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(1.15rem,2vw,1.4rem);
  line-height:1.2; color:var(--ink);
  margin:2rem 0 .6rem;
}
.legal-body p{ margin:0 0 1.15rem; }
.legal-body ul,.legal-body ol{ margin:0 0 1.4rem; padding-left:1.5rem; }
.legal-body ul{ list-style:disc; }
.legal-body ol{ list-style:decimal; }
.legal-body li{ margin-bottom:.55rem; padding-left:.25rem; }
.legal-body ul li::marker{ color:var(--sage-tx); }
.legal-body ol li::marker{ color:var(--sage-tx); }
.legal-body a{
  color:var(--ink);
  text-decoration:underline;
  text-decoration-color:var(--sage-dp);
  text-underline-offset:3px;
  text-decoration-thickness:1px;
}
.legal-body a:hover{ text-decoration-color:var(--sage-dp); }
.legal-body strong{ color:var(--ink); font-weight:600; }
.legal-body hr{ border:0; border-top:var(--rule); margin:clamp(2rem,4vw,3rem) 0; }
.legal-body table{ width:100%; border-collapse:collapse; margin:0 0 1.5rem; font-size:.94rem; }
.legal-body th,.legal-body td{ text-align:left; padding:.7rem .75rem; border-bottom:var(--rule); }
.legal-body th{ color:var(--ink); font-weight:600; }

/* ============================================================
   REVEALS — applied only when JS is on and motion is welcome
   ============================================================ */
.js .reveal{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .8s cubic-bezier(.22,.61,.36,1), transform .8s cubic-bezier(.22,.61,.36,1);
}
.js .reveal.is-in{ opacity:1; transform:none; }

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

/* ============================================================
   PRINT — drop the ambient gradients and the sticky masthead
   ============================================================ */
@media print{
  .cover__glow,.sec-glow,.endcta__glow,.plate__scrim,.masthead,.skip-link{ display:none !important; }
  body{ background:#fff; color:#000; }
  .section,.cover,.endcta{ padding-block:1.5rem; }
  .js .reveal{ opacity:1 !important; transform:none !important; }
  a[href^="http"]::after{ content:" (" attr(href) ")"; font-size:.75em; word-break:break-all; }
}