/* ===================== TOKENS =====================
   Locked brand foundation (storyboards, May 2025):
   Healthy Teal #2D4A28 · Circle Cream #F4EEDF ·
   Momentum Gold #9A6347 · Signal Red #8A563C · Slate #5E5E5E
   Role hierarchy: 45% teal / 35% cream / 12% gold / 8% red
==================================================== */
:root{
  color-scheme: light;

  --teal:#2D4A28;
  --teal-lt:#7E9475;
  --cream:#F4EEDF;
  --gold:#9A6347;
  --red:#8A563C;
  --slate:#5E5E5E;

  /* derived grounds — deep teal for dark sections */
  --deep:#172416;
  --deep-2:#101A0F;
  --deep-rule:#2F4A2B;

  --bg:#F4EEDF;
  --bg-2:#EFE7D3;
  --card:#FFFDF8;
  --rule:#D8CDBA;
  --rule-2:#C4B79F;
  --nav-bg:#FFFFFF;
  --nav-rule:#E7DFCF;
  --surf-a:#FFFFFF;
  --surf-b:#F4EEDF;

  --ink:#22321F;          /* 12.8:1 on cream */
  --ink-2:#454A3F;        /* 6.8:1  */
  --ink-3:#5E5E5E;        /* slate, 5.9:1 */
  --gold-ink:#7A4A2F;     /* 6.6:1 — gold as TEXT; #9A6347 stays a mark */

  --on-deep:#F4EEDF;
  --on-deep-2:#B9C4B1;

  --teal-wash:rgba(45,74,40,.09);
  --gold-wash:rgba(154,99,71,.13);
  --red-wash:rgba(138,86,60,.09);

  --display:"Newsreader", Georgia, "Times New Roman", serif;
  /* handwriting, for words written on the post-it notes only */
  --hand:"Caveat", "Segoe Print", "Bradley Hand", cursive;
  --sans:"Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* 8pt spacing scale */
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px; --s7:96px; --s8:128px;

  --maxw:1200px;
  --gut:clamp(20px,4vw,56px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --bg:#0F2F33; --bg-2:#133A3E; --card:#16413F;
    --rule:#285454; --rule-2:#3A6A68;
    --nav-bg:#16413F; --nav-rule:#2C5B58; --surf-a:#123634; --surf-b:#0F2F33;
    --ink:#FBF3E2; --ink-2:#B9CECC; --ink-3:#95A9A8;
    --gold-ink:#F0A733;
    --deep:#0A2226; --deep-2:#071A1D; --deep-rule:#1F4A4D;
    --teal:#7FA9A7;
    --teal-wash:rgba(126,148,117,.13);
    --gold-wash:rgba(154,99,71,.16);
    --red-wash:rgba(138,86,60,.14);
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --bg:#0F2F33; --bg-2:#133A3E; --card:#16413F;
  --rule:#285454; --rule-2:#3A6A68;
  --nav-bg:#16413F; --nav-rule:#2C5B58; --surf-a:#123634; --surf-b:#0F2F33;
  --ink:#FBF3E2; --ink-2:#B9CECC; --ink-3:#95A9A8;
  --gold-ink:#F0A733;
  --deep:#0A2226; --deep-2:#071A1D; --deep-rule:#1F4A4D;
  --teal:#7FA9A7;
  --teal-wash:rgba(126,148,117,.13);
  --gold-wash:rgba(154,99,71,.16);
  --red-wash:rgba(138,86,60,.14);
}

/* ===================== BASE ===================== */
*{box-sizing:border-box}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%}
a{color:inherit}
h1,h2,h3,h4{margin:0;font-family:var(--display);text-wrap:balance}
p{margin:0}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}
html{scroll-behavior:smooth}
:target{scroll-margin-top:88px}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut);position:relative}
section{padding-block:clamp(56px,8vw,var(--s7))}
/* Alternating surface break: every light section flips white -> cream -> white. */
.s-white{--sec-bg:var(--surf-a);background:var(--surf-a)}
.s-cream{--sec-bg:var(--surf-b);background:var(--surf-b)}
/* Questions run on Healthy Teal with Circle Cream type throughout. */
.s-teal{--sec-bg:var(--teal);background:var(--teal);color:var(--cream)}
.s-teal .eyebrow{color:var(--cream)}
.s-teal .h-sec{color:var(--cream)}
.s-teal.faq .faq-list{border-top-color:rgba(244,238,223,.48)}
.s-teal .lede{color:var(--cream)}
.s-teal.faq details{border-bottom-color:rgba(244,238,223,.26)}
.s-teal.faq summary{color:#FFFFFF}
.s-teal.faq summary::after{border-color:#FFFFFF}
.s-teal.faq .ans,.s-teal.faq .ans p{color:#FFFFFF}

/* Headlines: short, uppercase, strong verbs, minimal punctuation */
.h-sec{
  font-weight:800;font-size:clamp(30px,4.4vw,50px);line-height:1.02;
  letter-spacing:-.017em;text-transform:uppercase;
}
.h-sub{
  font-weight:700;font-size:clamp(21px,2.5vw,27px);line-height:1.15;
  letter-spacing:-.012em;
}
.eyebrow{
  font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:.17em;
  text-transform:uppercase;color:var(--teal);margin-bottom:var(--s2);
}
.eyebrow.on-deep{color:var(--gold)}
.s-cream .h-sec,.s-cream .h-sub,
.s-white .h-sec,.s-white .h-sub,
.s-white .included h3,
.h-sec.h-teal{color:var(--teal)}
.lede{color:var(--ink-2);font-size:clamp(16.5px,1.6vw,18.5px);max-width:58ch;margin-top:var(--s2)}

/* ===================== TEXTURE =====================
   Contours bleed from the edges — never floating, never centered.
   Radials always cropped. */
.tex{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.tex canvas{position:absolute;display:block}
.radial-crop{
  position:absolute;border-radius:50%;pointer-events:none;
  background:
    repeating-radial-gradient(circle at center,
      transparent 0 14px,
      currentColor 14px 17px,
      transparent 17px 31px);
  opacity:.20;
}

/* Section divider: hexagons cut by the band's lower edge, echoing the logo.
   Each divider uses only its two neighbouring surfaces - the band takes the
   colour of the section above, the hexagons the colour of the section below. */
.divider{
  --dh:clamp(56px,6.6vw,88px);
  position:relative;
  height:var(--dh);
  background-repeat:repeat-x;
  /* The tile is 720 x 118 units. Its highest filled hexagon sits 90 units right
     of the tile's centre, so the tile is nudged left by that much (scaled to the
     band's height) to land that hexagon on the page's centre line. */
  background-position:calc(50% - var(--dh) * 90 / 118) bottom;
  background-size:auto 100%;
}
/* The coloured 3 Circles mark sits on that hexagon, a touch smaller than it, so
   the hexagon shows as a thin rim in the divider's own colour. Geometry is in
   tile units: hexagon centre y 62, height 69.28; the mark is drawn at 86% of
   that (its artwork hexagon fills 506 of its 512px). */

/* the mark only rides on the white-band dividers */
.divider.d-teal::after{content:none}
/* The band takes the colour of the section above, the hexagons the colour of
   the section below, so each divider only ever uses its two neighbouring
   surfaces. Tiles are seamless and repeat across the width. */

/* spam trap on every form: off-screen, out of the tab order, hidden from AT */
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* ===================== BUTTONS ===================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--sans);font-size:15px;font-weight:600;line-height:1;
  padding:15px 24px;border-radius:4px;border:1.5px solid transparent;
  text-decoration:none;cursor:pointer;min-height:48px;
  transition:background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn-teal{background:var(--teal);color:#F4EEDF;border-color:var(--teal)}
.btn-teal:hover{background:#41513B;border-color:#41513B}
.btn-line{background:transparent;color:var(--ink);border-color:var(--rule-2)}
.btn-line:hover{border-color:var(--teal);background:var(--teal-wash)}
.btn-cream{background:var(--cream);color:#172416;border-color:var(--cream)}
.btn-cream:hover{background:#fff}
.btn-line-deep{background:transparent;color:var(--on-deep);border-color:var(--deep-rule)}
.btn-line-deep:hover{border-color:var(--on-deep-2);background:rgba(244,238,223,.06)}
.btn .gl{width:17px;height:17px;flex:none}
.arw{font-family:var(--sans);font-weight:600}

/* text link CTA — verb first */
.tlink{
  display:inline-flex;align-items:center;gap:7px;text-decoration:none;
  font-weight:600;font-size:15px;color:var(--teal);
}
.tlink:hover{text-decoration:underline;text-underline-offset:3px}

/* ===================== NAV ===================== */
.skip{
  position:absolute;left:-9999px;top:0;z-index:100;background:var(--gold);
  color:#3A2418;font-weight:700;padding:12px 18px;text-decoration:none;
}
.skip:focus{left:0}
.nav{
  position:sticky;top:env(safe-area-inset-top,0px);z-index:60;
  background:var(--nav-bg);
}
.nav-in{max-width:var(--maxw);margin-inline:auto;padding:10px var(--gut);display:flex;align-items:center;gap:16px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;flex:none}
.brand img{display:block}
.brand-txt{display:flex;flex-direction:column;justify-content:center;line-height:1}
/* nav lockup is mark + wordmark only, optically centred against the mark */
.nav .brand-txt{padding-top:1px}
.brand-name{font-family:var(--display);font-weight:500;font-size:18px;letter-spacing:-.012em;text-transform:none;}
.brand-sub{font-size:8.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);margin-top:3px}
.nav-links{display:flex;gap:2px;margin-left:auto;align-items:center}
.nav-badges{display:flex;align-items:center;gap:9px;margin-left:6px}
.nav-badges a{display:block;line-height:0;border-radius:6px}
.nav-badges a:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.nav-badges img{display:block;height:34px;width:auto}
/* Hover chip, measured off the reference: a soft rounded rectangle, no border,
   corner radius a quarter of the chip height, and a fill only ~4% darker than
   the bar. Reference #F4F4F5 is that tint in neutral grey; rgba(126,148,117,.10)
   is the same lightness in Light Teal. Label colour does not change. */
.nav-links a:not(.badge){
  font-size:11.5px;font-weight:500;color:var(--ink-2);text-decoration:none;letter-spacing:.01em;
  white-space:nowrap;padding:7px 10px;border-radius:8px;background:transparent;
  transition:background-color .14s ease;
}
.nav-links a:not(.badge):hover{background:rgba(126,148,117,.10)}
.nav-links a:not(.badge):focus-visible{background:rgba(126,148,117,.10)}
/* the section currently under the nav holds the same chip; sections with no tab
   (hero, promise, pillars, core features, crisis, close) leave every tab clear */
.nav-links a:not(.badge)[aria-current="page"]{background:rgba(126,148,117,.10);color:var(--teal)}
.navtoggle{
  display:none;margin-left:auto;background:transparent;cursor:pointer;
  border:1.5px solid var(--rule-2);border-radius:4px;color:var(--ink);
  width:46px;height:46px;align-items:center;justify-content:center;padding:0;
}
.navtoggle svg{width:20px;height:20px}
.navtoggle .nb-x{display:none}
.navtoggle[aria-expanded="true"] .nb-x{display:block}
.navtoggle[aria-expanded="true"] .nb-bars{display:none}
/* NB: this breakpoint must stay in step with the matchMedia query in the
   mobile-menu script. When they drift apart the toggle appears while the
   link list is still laid out as a desktop row. */
@media (max-width:900px){
  .navtoggle{display:inline-flex}
  .nav-links{
    position:absolute;left:0;right:0;top:100%;margin:0;flex-direction:column;
    align-items:stretch;gap:0;background:var(--nav-bg);border-bottom:1px solid var(--nav-rule);
    padding:4px var(--gut) calc(16px + env(safe-area-inset-bottom,0px));
    box-shadow:0 18px 30px rgba(23,36,22,.14);
    max-height:calc(100dvh - 72px);overflow-y:auto;
  }
  .nav-links[hidden]{display:none}
  .nav-links a:not(.badge){
    font-size:16.5px;padding:15px 2px;border:0;border-bottom:1px solid var(--nav-rule);
    border-radius:0;color:var(--ink);background:transparent;
  }
  .nav-links a:not(.badge):hover{background:transparent;border-color:transparent;border-bottom-color:var(--nav-rule);color:var(--teal)}
  .nav-badges{margin:16px 0 0;gap:12px}
  .nav-badges.store-soon{margin-top:30px;align-self:flex-start;width:max-content}
  .nav-badges a{border-bottom:0;padding:0}
  .nav-badges img{height:42px}
}

/* ===================== HERO ===================== */
.hero{
  /* The phone and the note are centred as a pair, not individually: the phone
     slides left by half the note's overhang so the two together sit on the
     page's centre line while the note stays clear to the phone's right. */
  --phone-w:min(360px,72vw);
  --note-x:208px;
  --note-w:min(288px,22.5vw);
  --pair-shift:calc((var(--phone-w)/2 - var(--note-x) - var(--note-w)) / 2);
  position:relative;overflow:hidden;text-align:center;
  padding-block:clamp(44px,6vw,78px) clamp(70px,9vw,150px);
  background:var(--surf-a);
}
.hero-in{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center}
.hero .eyebrow{justify-content:center}
.hero .eyebrow::before{display:none}
.hero h1{
  font-weight:800;font-size:clamp(38px,6.2vw,72px);line-height:.98;
  letter-spacing:-.025em;text-transform:uppercase;margin-bottom:var(--s3);
  max-width:15ch;
}
/* Whole headline in Healthy Teal, with DAILY picked out in gold. Brand gold
   #9A6347 is only 2.49:1 on white, which fails even the 3:1 large-text bar, so
   the display gold is a shade down at #8A563C — 3.41:1 and still unmistakably
   gold at this weight. */
.hero h1{color:var(--teal)}
.hero h1 .gold{color:#8A563C}
.hero .sub{color:var(--ink-2);font-size:clamp(16.5px,1.7vw,19px);max-width:54ch;line-height:1.58}
.hero-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:var(--s4)}
.hero-meta{
  margin-top:var(--s4);font-size:14px;color:var(--ink-3);
  display:flex;align-items:flex-start;justify-content:center;gap:9px;text-align:left;
}
.hero-meta .tick{width:16px;height:16px;flex:none;color:var(--teal);margin-top:3px}
.hero-shot{
  margin-top:clamp(26px,4vw,46px);width:100%;
  display:flex;justify-content:center;position:relative;
}
/* Hero glow band. Profile, tilt and softness sampled directly from the
   reference: asymmetric bell peaking at 57.7% of the band, 6.79deg tilt
   with the right end higher, fading to nothing top and bottom. */
.hero-streak{
  --sh:clamp(300px,33.6vw,540px);
  /* sized to the viewport, not the content column: the band sits inside the
     1200px wrap, so a percentage width ran out on wide screens and its slanted
     ends showed. 120vw centred on the page clears both edges at any width (the
     hero clips the overflow). */
  position:absolute;z-index:0;left:calc(50% - 60vw);right:calc(50% - 60vw);
  top:50%;height:var(--sh);margin-top:calc(var(--sh) * -0.577);
  transform:rotate(-6.79deg);transform-origin:center;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(126,148,117,0) 0.0%,
    rgba(126,148,117,0) 3.8%,
    rgba(126,148,117,0.006) 7.7%,
    rgba(126,148,117,0.011) 11.5%,
    rgba(126,148,117,0.022) 15.4%,
    rgba(126,148,117,0.039) 19.2%,
    rgba(126,148,117,0.080) 23.1%,
    rgba(126,148,117,0.135) 26.9%,
    rgba(126,148,117,0.213) 30.8%,
    rgba(126,148,117,0.308) 34.6%,
    rgba(126,148,117,0.428) 38.5%,
    rgba(126,148,117,0.555) 42.3%,
    rgba(126,148,117,0.688) 46.2%,
    rgba(126,148,117,0.806) 50.0%,
    rgba(126,148,117,0.906) 53.8%,
    rgba(126,148,117,0.978) 57.7%,
    rgba(126,148,117,0.947) 61.5%,
    rgba(126,148,117,0.843) 65.4%,
    rgba(126,148,117,0.716) 69.2%,
    rgba(126,148,117,0.564) 73.1%,
    rgba(126,148,117,0.420) 76.9%,
    rgba(126,148,117,0.286) 80.8%,
    rgba(126,148,117,0.178) 84.6%,
    rgba(126,148,117,0.099) 88.5%,
    rgba(126,148,117,0.050) 92.3%,
    rgba(126,148,117,0.022) 96.2%,
    rgba(126,148,117,0.006) 100.0%);
}
/* Soft white mist so the hand melts into the page at the bottom.
   Full-bleed on .hero, not on .hero-shot: scoped to the wrap it produced a
   vertical seam at the wrap edge and a horizontal seam where the glow band
   reappeared underneath it. Full width + opaque white at the very bottom
   means there is no edge anywhere. */
.hero::after{
  content:"";position:absolute;z-index:2;left:0;right:0;bottom:0;
  height:clamp(210px,27vw,380px);pointer-events:none;
  background:linear-gradient(180deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.10) 18%,
    rgba(255,255,255,.28) 34%,
    rgba(255,255,255,.52) 48%,
    rgba(255,255,255,.75) 62%,
    rgba(255,255,255,.91) 74%,
    rgba(255,255,255,.99) 87%,
    #fff 100%);
}
.hero-shot img{position:relative;z-index:1}
.hero-shot img{
  display:block;width:var(--phone-w);height:auto;
  transform:translateX(var(--pair-shift));
  filter:drop-shadow(0 26px 44px rgba(23,36,22,.30));
}
@media (max-width:620px){
  .hero h1{max-width:none}
  .hero-cta{flex-direction:column;align-items:stretch;width:100%;max-width:340px}
  .hero-meta{max-width:34ch}
}

/* ===================== LAUNCH NOTE =====================
   The reference photo itself, not a card dressed up as one. The checkerboard
   was flattened into that file, so it is rebuilt analytically and divided out,
   which recovers the note's own cast shadow as alpha rather than discarding it.
   Paper, crease, the shading under the crease and the drop shadow are all
   original pixels; the tilt was eased to 3deg. No CSS shadow, no border.

   It sits outside the hero's centre axis, to the right of the phone and level
   with its upper-middle, so the phone stays the primary visual. It is a direct
   child of .hero rather than .hero-in so it paints above the white mist that
   fades the hand into the page. */
.note{
  position:absolute;z-index:4;
  left:calc(50% + var(--note-x) + var(--pair-shift));top:47.5%;
  width:var(--note-w);aspect-ratio:680/702;
  text-align:left;
}
.note-img{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.note-in{
  position:absolute;left:15.5%;top:17.5%;width:71.57%;
  transform:rotate(-3.05deg);transform-origin:0 0;
}
/* "App Launch" is written on the note by hand (Caveat), in a pen-dark ink */
.note-k{
  font-family:var(--hand);font-size:34px;font-weight:700;line-height:1;
  letter-spacing:0;color:#4A3806;
}
.note-h{
  font-family:var(--display);font-weight:500;font-size:15.5px;line-height:1.18;
  color:#3A2418;margin-top:5px;letter-spacing:-.012em;
}
.note-p{font-size:12px;line-height:1.4;color:#6B4A33;margin-top:6px}
.note-p b{font-weight:700;color:#3A2418}
.note-f{display:flex;flex-direction:column;gap:7px;margin-top:10px}
.note-f input{
  font-family:var(--sans);font-size:12.5px;color:#3A2418;
  background:#FBF3EA;border:1px solid rgba(107,74,51,.34);border-radius:4px;
  padding:8px 9px;width:100%;min-height:34px;
}
.note-f input::placeholder{color:#93803E}
/* no ring on the field: focus is shown inside the box, by the border going dark
   and the paper going white, so clicking in does not pop an outline over the note */
.note-f input:focus,
.note-f input:focus-visible{outline:none;border-color:#3A2418;background:#fff}
.note-f button{
  font-family:var(--sans);font-size:12.5px;font-weight:600;cursor:pointer;
  background:var(--teal);color:var(--cream);border:0;border-radius:4px;
  padding:9px 12px;min-height:36px;
  transition:background-color .15s ease;
}
.note-f button:hover{background:#41513B}
.note-f button:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
.note-s{font-size:11px;line-height:1.4;color:#6B4A33;margin-top:7px}
.note-s:empty{display:none}
.note-s a{color:#3A2418;font-weight:600}
.note.bad input{border-color:var(--red)}
/* the confirmation takes the field's place rather than appearing under it */
.note-ok{
  display:none;gap:8px;align-items:flex-start;margin-top:10px;
  background:#FBF3EA;border:1px solid rgba(107,74,51,.3);border-radius:4px;
  padding:9px 10px;font-size:11.5px;line-height:1.42;color:#3A2418;
}
.note-ok svg{width:14px;height:14px;flex:none;margin-top:1px;color:var(--teal)}
.note-ok.is-info svg{color:#7A4A2F}
.note-ok b{font-weight:700}
.note-ok a{color:#3A2418;font-weight:600}
.note.done .note-f{display:none}
.note.done .note-ok{display:flex}

/* tablet: still to the right of the phone while there is room for it */
@media (max-width:1180px) and (min-width:981px){
  .hero{--note-x:204px;--note-w:min(290px,28vw)}   /* wide enough that the note's copy stays on the paper */
  .note{top:49%}
  .note-k{font-size:28px}
  .note-h{font-size:15px}
}
/* below that the phone leaves no room beside it, so the note drops under it —
   slightly right of centre on tablet, fully centred on phones */
@media (max-width:980px){
  .hero{--pair-shift:0px}
  .note{
    /* relative, not static: .note-img is absolutely positioned, so a static
       parent would make it size against .hero and blow up to the whole header */
    position:relative;left:auto;top:auto;width:min(320px,88vw);
    margin:clamp(22px,3.4vw,34px) 8% 0 auto;
  }
  .note-k{font-size:38px}
  .note-h{font-size:18px}
  .note-p{font-size:13.5px}
  .note-f input,.note-f button{font-size:14px;min-height:40px}
}
@media (max-width:700px){
  .note{width:min(340px,92vw);margin-inline:auto}
}

/* ===================== MOBILE TOUCH + LEGIBILITY =====================
   Everything tappable clears 44px, and the micro-labels that work at desktop
   sizes get a floor so they stay readable on a phone. */
@media (max-width:980px){
  .nav .brand{min-height:44px}
  .foot ul{gap:2px}
  .foot ul a{padding:12px 10px;min-height:44px;display:flex;align-items:center}
  .foot .brand-sub{font-size:9.5px;letter-spacing:.11em}
  .foot .k{font-size:12px}
  .eyebrow,.kicker,.whoq,.lb,.cs-lab,.foot .k{font-size:12px}
  .badge-pop{font-size:11px;padding:6px 13px}
  .tier .tn{font-size:12.5px}
  .crisis .k{font-size:12px}
  .bento-note{font-size:13px}
  .trg .lvl{font-size:12px}
  .pil h3{font-size:16px}
  .fld label{font-size:13.5px}
  .foot-bot{font-size:13.5px}
  .ringtabs button{min-height:48px;font-size:14px}
  .whotabs button{min-height:54px}
  .faq summary{padding-block:22px;min-height:60px}
}

/* ===================== DEVICE SHOT ===================== */
.shot{display:flex;justify-content:center}
.shot img{
  display:block;width:min(302px,80vw);height:auto;
  border-radius:30px;border:1px solid var(--rule-2);
  box-shadow:0 26px 60px rgba(23,36,22,.22);
}
@media (max-width:900px){ .shot img{width:min(268px,68vw)} }

/* ===================== PROMISE BAND ===================== */
.promise{
  background:var(--deep);color:var(--on-deep);position:relative;overflow:hidden;
  padding-block:clamp(52px,6.5vw,88px);
  min-height:clamp(260px,26vw,340px);display:flex;align-items:center;
}
.promise .wrap{z-index:1;width:100%}
/* Oversized, cropped, off-centre — brand logo standard 08.
   Cropped top, bottom and right; the red sunburst centre is never cropped. */
.promise-mark{
  position:absolute;
  width:clamp(300px,42vw,540px);height:auto;
  right:0.5%;top:50%;transform:translateY(-50%);
  max-width:none;
}
@media (max-width:900px){
  /* stack: the mark takes the lower-right corner instead of sitting behind the line */
  .promise{min-height:0;padding-block:clamp(44px,7vw,64px) clamp(180px,48vw,220px)}
  .promise-mark{
    width:min(300px,64vw);
    right:-8px;bottom:-58px;top:auto;transform:none;
  }
}
.promise p.big{
  font-family:var(--display);font-weight:500;font-size:clamp(26px,3.7vw,44px);
  line-height:1.12;letter-spacing:-.012em;max-width:20ch;
}
.promise p.big em{font-style:italic;color:var(--gold)}
.promise .kicker{font-size:11.5px;font-weight:600;letter-spacing:.17em;text-transform:uppercase;color:var(--gold);margin-bottom:var(--s2)}
/* testimonial variant: a longer line, so smaller type and a wider measure */
.promise-quote figure,.promise-quote blockquote{margin:0}
.promise-quote p.big{font-size:clamp(22px,2.7vw,34px);line-height:1.2;max-width:30ch}
/* mirrored: logo on the left, text on the right */
.promise-quote .pq-body{width:min(600px,54%);margin-left:auto}
.promise-quote .promise-mark{right:auto;left:0.5%}
.promise-quote .quote-by{margin-top:var(--s3,24px);font-size:16px;font-weight:600;color:var(--on-deep)}
.promise-quote p.big .hl{color:var(--gold)}
.promise-quote .quote-by span{font-weight:400;opacity:.78}
@media (max-width:900px){
  .promise-quote p.big{max-width:28ch}
  .promise-quote .pq-body{width:min(100%,430px);margin-left:auto}
  .promise-quote .promise-mark{left:-8px;right:auto}
}

/* ===================== PILLARS ===================== */
/* Pillars: a timeline that lights each pillar in turn, left to right. */
.pillwrap{margin-top:var(--s5)}
.pil[data-c="gold"]{--pil-c:var(--gold-ink);--pil-dot:var(--gold);--pil-wash:var(--gold-wash)}
.pil[data-c="teal"]{--pil-c:var(--teal);--pil-dot:var(--teal);--pil-wash:rgba(45,74,40,.13)}
.pil[data-c="red"]{--pil-c:var(--red);--pil-dot:var(--red);--pil-wash:var(--red-wash)}
.tl-dot[data-c="gold"]{--pil-dot:var(--gold)}
.tl-dot[data-c="teal"]{--pil-dot:var(--teal)}
.tl-dot[data-c="red"]{--pil-dot:var(--red)}

.tl{position:relative;height:18px;margin-bottom:var(--s3)}
.tl-rail{position:absolute;left:0;right:0;top:50%;height:2px;background:var(--rule);transform:translateY(-50%)}
.tl-dots{position:relative;display:grid;grid-template-columns:repeat(3,1fr);height:100%;align-items:center}
.tl-dot{
  justify-self:center;width:10px;height:10px;border-radius:50%;
  background:var(--rule-2);box-shadow:0 0 0 4px var(--sec-bg,var(--bg));
  transition:background .12s ease, width .12s ease, height .12s ease;
}
.tl-dot.on{width:15px;height:15px;background:var(--pil-dot)}

.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2)}
.pil{
  padding:var(--s4) var(--s3);border-radius:6px;background:transparent;
  transition:background .12s ease;
}
.pil .pi{width:30px;height:30px;margin:0 0 16px;color:var(--rule-2);transition:color .12s ease;display:block}
.pil h3{font-weight:700;font-size:15px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:10px;color:var(--ink-3);transition:color .12s ease}
.pil p{font-size:15.5px;line-height:1.55;max-width:34ch;color:var(--ink-3);transition:color .12s ease}
.pil.on{background:var(--pil-wash)}
.pil.on .pi{color:var(--pil-dot)}
.pil.on h3{color:var(--pil-c)}
.pil.on p{color:var(--ink-2)}

@media (max-width:820px){
  .tl-dots{grid-template-columns:repeat(3,1fr)}
  .pillars{grid-template-columns:1fr;gap:var(--s1)}
  .tl{display:none}
  .pil{border-left:3px solid var(--rule);border-radius:0 6px 6px 0}
  .pil.on{border-left-color:var(--pil-dot)}
}
/* No cycling when motion is reduced: every pillar simply reads as normal. */
@media (prefers-reduced-motion: reduce){
  .pil h3,.pil p{color:var(--ink-2)}
  .pil h3{color:var(--pil-c)}
  .pil .pi{color:var(--pil-dot)}
  .tl-dot{background:var(--rule-2)}
}

/* Each circle carries its own accent: outer teal, middle gold, inner red. */
.ringwrap{--rc-line:var(--teal);--rc-ink:var(--teal);--rc-head:var(--teal);--rc-wash:var(--teal-wash)}
.ringwrap[data-ring="middle"]{--rc-line:var(--gold);--rc-ink:var(--gold-ink);--rc-head:#8A563C;--rc-wash:var(--gold-wash)}
.ringwrap[data-ring="inner"]{--rc-line:var(--red);--rc-ink:var(--red);--rc-head:var(--red);--rc-wash:var(--red-wash)}
#circles{position:relative;overflow:hidden}
#circles > .wrap{z-index:1}

/* ===================== HONEYCOMB BACKDROP =====================
   Reusable: drop <div class="hexbg" aria-hidden="true">[hexbg svg]</div> as the
   first child of any position:relative; overflow:hidden section and give the
   section a --hx-mask. The grid is an SVG <pattern> anchored to the section's
   centre line, so it is seamless at every width; the accent paths are drawn on
   the same lattice. The section's own white shows through the open cells.
   The mask decides where the pattern may be seen; without mask support the
   whole layer drops to a faint wash instead. Static: no animation, no glow. */
.hexbg{
  position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;
  -webkit-mask-image:var(--hx-mask);mask-image:var(--hx-mask);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}
.hexbg-svg{position:absolute;left:0;top:0;width:100%;height:100%;display:block;overflow:hidden}
/* sections above and below are white too, so the pattern eases in from the top
   edge and out before the bottom edge: no line where the decoration starts.
   This mask sits on the inner svg and multiplies with the section's own. */
.hexbg-svg{
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 44px,#000 calc(100% - 90px),transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0,#000 44px,#000 calc(100% - 90px),transparent 100%);
}
.hexbg-grid{fill:none;stroke:rgba(94,94,94,.09);stroke-width:1.25}
.hexbg-acc path{fill:none;stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
.hexbg-acc .hx-t,.hexbg-acc .hx-m{display:none}
@supports not ((mask-image:linear-gradient(#000,#000)) or (-webkit-mask-image:linear-gradient(#000,#000))){
  .hexbg{opacity:.3}
}
@media (max-width:900px){
  .hexbg-acc .hx-d{display:none}
  .hexbg-acc .hx-t{display:inline}
}
/* phones: the whole layer is drawn at 1.5x and scaled to two thirds, so the
   cells come out ~56px across; strokes are thickened to stay ~1.3px on screen */
@media (max-width:620px){
  .hexbg{opacity:.8}
  .hexbg-svg{width:150%;height:150%;left:-25%;transform:scale(.6667);transform-origin:50% 0}
  .hexbg-grid{stroke-width:1.9}
  .hexbg-acc path{stroke-width:2.1}
  .hexbg-acc .hx-t{display:none}
  .hexbg-acc .hx-m{display:inline}
}

/* where the honeycomb may show in Your Circles: above the eyebrow, the top-right
   corner, around the mark, and the outer gutters — never behind the headline,
   the lede, the tabs or the behaviour list */
#circles .hexbg{
  --hx-mask:
    linear-gradient(180deg,rgba(0,0,0,.9) 0,transparent 92px),
    radial-gradient(640px 300px at 100% 0,#000 0,#000 25%,rgba(0,0,0,.5) 55%,transparent 100%),
    radial-gradient(330px 350px at 26% 590px,#000 0,#000 40%,rgba(0,0,0,.5) 70%,transparent 100%),
    linear-gradient(90deg,#000 0,transparent max(80px,calc(50% - 560px)),transparent min(calc(100% - 80px),calc(50% + 560px)),#000 100%);
}
@media (max-width:900px){
  #circles .hexbg{
    --hx-mask:
      linear-gradient(180deg,rgba(0,0,0,.85) 0,transparent 58px),
      radial-gradient(min(48vw,390px) 265px at 50% 440px,#000 0,#000 45%,rgba(0,0,0,.5) 72%,transparent 100%);
  }
}
/* Questions: the list runs the full width of the wrap, so the honeycomb shows
   above the eyebrow, right of the heading (fading out before the list starts)
   and in the outer gutters, never behind a question or answer. */
#faq{position:relative;overflow:hidden}
#faq > .wrap{position:relative;z-index:1}
#faq .hexbg{
  --hx-mask:
    linear-gradient(180deg,rgba(0,0,0,.9) 0,transparent 90px),
    radial-gradient(620px 200px at 100% 0,#000 0,#000 25%,rgba(0,0,0,.5) 55%,transparent 100%),
    linear-gradient(90deg,#000 0,transparent max(20px,calc(50% - 552px)),
                    transparent min(calc(100% - 20px),calc(50% + 552px)),#000 100%);
}
@media (max-width:900px){
  #faq .hexbg{
    --hx-mask:
      linear-gradient(180deg,rgba(0,0,0,.85) 0,transparent 58px),
      radial-gradient(60% 150px at 100% 0,#000 0,#000 25%,rgba(0,0,0,.5) 55%,transparent 100%);
  }
}
@media (max-width:620px){
  #faq .hexbg{--hx-mask:linear-gradient(180deg,rgba(0,0,0,.8) 0,transparent 52px)}
}
@media (max-width:620px){
  #circles .hexbg{
    --hx-mask:
      linear-gradient(180deg,rgba(0,0,0,.8) 0,transparent 52px),
      radial-gradient(260px 250px at 50% 515px,#000 0,#000 50%,rgba(0,0,0,.5) 76%,transparent 100%);
  }
}
.ringwrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(28px,5vw,var(--s6));align-items:center;margin-top:clamp(36px,4.5vw,var(--s5))}
.ringfig{display:flex;justify-content:center}
/* The mark itself is the diagram. One band stays in full colour; the rest wash
   out toward the section surface. Band radii measured off the logo artwork:
   red centre ends at 36.7%, gold band ends at 61.3% (of the mark's half-width). */
.logo-rings{position:relative;width:min(360px,100%);aspect-ratio:1;margin-inline:auto}
.logo-rings img{display:block;width:100%;height:100%}
.lr-dim{
  position:absolute;inset:0;pointer-events:none;
  background:var(--sec-bg,var(--bg));opacity:.78;
  transition:-webkit-mask-image .22s ease, mask-image .22s ease;
}
.lr-dim[data-sel="outer"]{
  -webkit-mask-image:radial-gradient(circle closest-side,#000 0,#000 60.8%,transparent 61.8%);
          mask-image:radial-gradient(circle closest-side,#000 0,#000 60.8%,transparent 61.8%);
}
.lr-dim[data-sel="middle"]{
  -webkit-mask-image:radial-gradient(circle closest-side,#000 0,#000 36.2%,transparent 37.2%,transparent 60.8%,#000 61.8%);
          mask-image:radial-gradient(circle closest-side,#000 0,#000 36.2%,transparent 37.2%,transparent 60.8%,#000 61.8%);
}
.lr-dim[data-sel="inner"]{
  -webkit-mask-image:radial-gradient(circle closest-side,transparent 0,transparent 36.2%,#000 37.2%);
          mask-image:radial-gradient(circle closest-side,transparent 0,transparent 36.2%,#000 37.2%);
}
.lr-hit{position:absolute;border:0;background:transparent;padding:0;cursor:pointer;border-radius:50%}
.lr-hit:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.lr-o{inset:0;border-radius:0;z-index:1}
.lr-m{width:61.3%;height:61.3%;left:19.35%;top:19.35%;z-index:2}
.lr-i{width:36.7%;height:36.7%;left:31.65%;top:31.65%;z-index:3}
/* ---- portrait iPhone playing the 9:16 how-to video (left of the circle tabs) ----
   The screen is 9:19.5; the video sits centred with object-fit:contain and the
   screen is filled with the video's own cream, so there are no visible bars. */
.iph{margin:0;width:100%;max-width:300px;margin-inline:auto;filter:drop-shadow(0 26px 40px rgba(23,36,22,.20)) drop-shadow(0 6px 12px rgba(23,36,22,.12))}
.iph-body{
  position:relative;padding:11px;
  border-radius:50px;
  background:linear-gradient(90deg,#23282B,#121517);
  box-shadow:0 0 0 2px #7C8387, 0 0 0 3.5px #3E4448, inset 0 0 0 1px rgba(255,255,255,.06);
}
/* side buttons: action + volume on the left edge, power on the right */
.iph-body::before,.iph-body::after{content:"";position:absolute;background:#6E7579;border-radius:2px}
.iph-body::before{left:-5px;top:17%;width:3px;height:5%;box-shadow:0 calc(100% + 26px) 0 #6E7579,0 calc(200% + 40px) 0 #6E7579}
.iph-body::after{right:-5px;top:27%;width:3px;height:12%}
.iph-screen{
  position:relative;aspect-ratio:9/19.5;overflow:hidden;background:#F4EEDF;
  border-radius:40px;
}
.iph-screen video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;background:#F4EEDF}
.iph-island{
  position:absolute;left:50%;top:11px;transform:translateX(-50%);
  width:31%;height:24px;border-radius:999px;background:#000;
}
@media (max-width:620px){ .iph{max-width:260px} }
.iph-sound{
  position:absolute;right:14px;bottom:14px;z-index:2;
  display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  font-family:var(--sans);font-size:12px;font-weight:600;color:#FFFFFF;
  background:rgba(18,21,23,.62);border:1px solid rgba(255,255,255,.22);border-radius:999px;
  padding:7px 11px 7px 9px;min-height:34px;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:background .15s ease;
}
.iph-sound:hover{background:rgba(18,21,23,.82)}
.iph-sound:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.iph-sound svg{width:16px;height:16px}
.iph-sound .snd-on{display:none}
.iph-sound[aria-pressed="true"] .snd-on{display:block}
.iph-sound[aria-pressed="true"] .snd-off{display:none}

.ringtabs{display:flex;gap:var(--s1);margin-bottom:var(--s3);flex-wrap:wrap}
.ringtabs button{
  font-family:var(--sans);font-size:13.5px;font-weight:600;cursor:pointer;
  padding:11px 16px;border-radius:4px;border:1.5px solid var(--rule);
  background:transparent;color:var(--ink-3);min-height:44px;transition:all .15s;
}
.ringtabs button[aria-selected="true"]{color:var(--ink);border-color:var(--rc-line);background:var(--rc-wash)}
.rpanel{min-height:290px}
.rpanel h3{font-weight:800;font-size:clamp(24px,3vw,32px);letter-spacing:-.014em;text-transform:uppercase;margin-bottom:12px;color:var(--rc-head);transition:color .2s ease}
.rpanel .d{color:var(--ink-2);max-width:46ch}
.rpanel .lb{margin-top:var(--s3);margin-bottom:12px;font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.behaviors{display:flex;flex-direction:column;gap:8px}
.bh{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;font-size:15px;
    background:var(--card);border:1px solid var(--rule);border-radius:5px;padding:11px 14px}
.bh .ic{width:18px;height:18px;flex:none}
.bh .tag{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.tag-h{color:var(--teal)} .tag-c{color:var(--gold-ink)} .tag-r{color:var(--red)}
.privline{display:grid;grid-template-columns:auto 1fr;gap:11px;align-items:start;margin-top:var(--s3);
  background:var(--rc-wash);border-left:3px solid var(--rc-line);padding:13px 15px;font-size:14.5px;color:var(--ink-2)}
.privline > svg{color:var(--rc-line)}
@media (max-width:900px){ .ringwrap{grid-template-columns:1fr;gap:var(--s5)} .rpanel{min-height:0} }

/* ===================== PATTERNS / CHARTS ===================== */
.patterns{position:relative;overflow:hidden}
.pat-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,5vw,var(--s6));align-items:start;margin-top:var(--s5)}
.panelbox{background:var(--card);border:1px solid var(--rule);border-radius:10px;padding:var(--s3)}
.panelbox + .panelbox{margin-top:var(--s3)}
.pb-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:4px}
.pb-h h4{font-family:var(--display);font-weight:500;font-size:16px}
.pb-h .meta{font-size:12.5px;color:var(--ink-3)}
.pb-sub{font-size:13.5px;color:var(--ink-3);margin-bottom:var(--s3)}

/* bar chart — single series, no legend (title names it) */
.chart{display:grid;grid-template-columns:24px 1fr;gap:10px}
.yax{display:flex;flex-direction:column;justify-content:space-between;font-size:11px;color:var(--ink-3);
     text-align:right;height:150px;font-variant-numeric:tabular-nums}
.plot{position:relative;height:150px}
.grid-l{position:absolute;left:0;right:0;border-top:1px solid var(--rule);pointer-events:none}
.bars{position:absolute;inset:0;display:flex;align-items:flex-end;gap:2px}
.barcol{flex:1;height:100%;display:flex;align-items:flex-end;position:relative}
.bar{
  width:100%;background:var(--teal);border-radius:4px 4px 0 0;
  transition:opacity .15s ease;position:relative;
}
.barcol:hover .bar{opacity:.78}
.barcol .tip{
  position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);
  background:var(--deep);color:var(--on-deep);font-size:12px;line-height:1.35;
  padding:7px 10px;border-radius:4px;white-space:nowrap;pointer-events:none;
  opacity:0;transition:opacity .13s ease;z-index:5;
}
.barcol:hover .tip,.barcol:focus-within .tip{opacity:1}
.xax{display:flex;gap:2px;margin-top:8px;margin-left:34px}
.xax span{flex:1;text-align:center;font-size:11.5px;color:var(--ink-3);font-weight:500}

.triggers{display:flex;flex-direction:column;gap:2px;margin-top:var(--s1)}
.trg{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center;padding:12px 0;border-top:1px solid var(--rule)}
.trg .nm{font-size:15px}
.trg .lvl{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.trg .dotm{width:10px;height:10px;border-radius:50%}
.lv-h{color:var(--red)} .lv-m{color:var(--gold-ink)} .lv-l{color:var(--ink-3)}

.streakrow{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap}
.streaknum{font-family:var(--display);font-weight:500;font-size:44px;line-height:1;font-variant-numeric:tabular-nums}
.streaklab{font-size:13.5px;color:var(--ink-3);line-height:1.35}
@media (max-width:900px){ .pat-grid{grid-template-columns:1fr} }

/* ===================== STATE LANGUAGE ===================== */
.states3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3);margin-top:var(--s5)}
.stc{background:var(--card);border:1px solid var(--rule);border-radius:8px;padding:var(--s3);border-top-width:4px}
.stc.h{border-top-color:var(--teal)} .stc.c{border-top-color:var(--gold)} .stc.r{border-top-color:var(--red)}
.stc .badge{display:flex;align-items:center;gap:10px;margin-bottom:var(--s2)}
.stc .badge svg{width:26px;height:26px;flex:none}
.stc .badge b{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.stc.h .badge b{color:var(--teal)} .stc.c .badge b{color:var(--gold-ink)} .stc.r .badge b{color:var(--red)}
.stc .say{font-family:var(--display);font-weight:500;font-size:18px;line-height:1.25;margin-bottom:9px}
.stc .ex{font-size:15px;color:var(--ink-2);line-height:1.55}
.stc .cta{margin-top:var(--s3);font-size:14.5px;font-weight:600;display:inline-flex;gap:7px}
.stc.h .cta{color:var(--teal)} .stc.c .cta{color:var(--gold-ink)} .stc.r .cta{color:var(--red)}
.saynot{
  margin-top:var(--s5);background:var(--deep);color:var(--on-deep);border-radius:10px;
  padding:clamp(24px,3.4vw,var(--s5));display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,var(--s5));
  position:relative;overflow:hidden;
}
.saynot > :not(.tex){position:relative;z-index:1}
.saynot h3{font-weight:800;font-size:clamp(21px,2.6vw,29px);line-height:1.1;text-transform:uppercase;letter-spacing:-.012em}
.saynot p{color:var(--on-deep-2);margin-top:14px;font-size:16px;line-height:1.55;max-width:42ch}
.swap{display:flex;flex-direction:column;gap:12px}
.swrow{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center;font-size:14.5px}
.swrow .no{color:var(--on-deep-2);text-decoration:line-through;text-decoration-color:rgba(138,86,60,.8)}
.swrow .ar{color:var(--gold);font-weight:700}
.swrow .yes{color:var(--on-deep);font-weight:500}
@media (max-width:900px){ .states3{grid-template-columns:1fr} .saynot{grid-template-columns:1fr} }

/* ===================== AUDIENCE ===================== */
.whogrid{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,var(--s6));
  align-items:start;margin-top:var(--s5);
}
/* fixed aspect + start-aligned, so switching answers never moves the photo */
.whofig{
  margin:0;border-radius:14px;overflow:hidden;border:1px solid var(--rule);
  aspect-ratio:4/3;align-self:start;
}
.whofig img{display:block;width:100%;height:100%;object-fit:cover}
.whoq{
  font-size:11.5px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:var(--s2);
}
.whotabs{display:flex;flex-direction:column;gap:9px}
.whotabs button{
  font-family:var(--sans);font-size:16px;font-weight:500;text-align:left;cursor:pointer;
  padding:15px 18px;border-radius:7px;border:1.5px solid var(--rule);
  background:var(--card);color:var(--ink-2);min-height:52px;
  transition:border-color .16s ease, background .16s ease, color .16s ease;
}
.whotabs button:hover{border-color:var(--rule-2)}
.whotabs button[aria-selected="true"]{
  border-color:var(--teal);background:var(--teal-wash);color:var(--ink);font-weight:600;
}
/* every answer occupies the same grid cell, so the tallest one sets the height
   once and switching options never reflows the page */
.whoans{
  margin-top:var(--s3);padding-left:var(--s3);border-left:3px solid var(--teal);
  font-size:16.5px;line-height:1.6;color:var(--ink-2);
  display:grid;
}
.whoans > div{grid-area:1/1;transition:opacity .18s ease}
.whoans > div.is-off{visibility:hidden;opacity:0;pointer-events:none}
.whoans strong{display:block;font-family:var(--display);font-weight:500;font-size:19px;
  color:var(--ink);margin-bottom:6px;letter-spacing:-.012em}
@media (max-width:860px){
  .whogrid{grid-template-columns:1fr;gap:var(--s4)}
}
/* Who It's For runs on Healthy Teal — every component re-weighted for the
   dark ground. Cream type throughout; selected option inverts to cream. */
.s-teal .whofig{border-color:rgba(244,238,223,.30)}
.s-teal .whoq{color:rgba(244,238,223,.74)}
.s-teal .whotabs button{
  background:rgba(244,238,223,.07);border-color:rgba(244,238,223,.34);color:var(--cream);
}
.s-teal .whotabs button:hover{border-color:rgba(244,238,223,.68);background:rgba(244,238,223,.13)}
.s-teal .whotabs button[aria-selected="true"]{
  background:var(--cream);border-color:var(--cream);color:var(--deep);font-weight:600;
}
.s-teal .whotabs button:focus-visible{outline:2px solid var(--cream);outline-offset:3px}
.s-teal .whoans{border-left-color:var(--gold);color:rgba(244,238,223,.92)}
.s-teal .whoans strong{color:var(--cream)}
/* Who It's For: the section headline is the only cream thing here —
   every other label, option and answer runs white. */
#who .eyebrow{color:#FFFFFF}
#who .lede{color:#FFFFFF}
#who .whoq{color:rgba(255,255,255,.80)}
#who .whotabs button{color:#FFFFFF;border-color:rgba(255,255,255,.38);background:rgba(255,255,255,.07)}
#who .whotabs button:hover{border-color:rgba(255,255,255,.72);background:rgba(255,255,255,.13)}
#who .whotabs button[aria-selected="true"]{background:#FFFFFF;border-color:#FFFFFF;color:var(--deep)}
#who .whotabs button:focus-visible{outline:2px solid #FFFFFF;outline-offset:3px}
#who .whoans{color:#FFFFFF}
#who .whoans strong{color:#FFFFFF}
#who .whofig{border-color:rgba(255,255,255,.34)}

/* Who It's For: the phone film.
   The MP4 is used as-is. It was shot on white with the phone's own soft shadow
   falling down and to the right. Video can't be transparent, so it is shown as
   two layers of that same footage, stacked exactly:
     1. .whovid-shade: the film's first frame (the phone and its shadow never
        move; only the screen does) with mix-blend-mode:multiply. Multiplying
        white by the section's teal leaves pure teal, and multiplying the grey
        of the shadow leaves that same shadow, now falling on teal. So every
        shadow in the film is kept, at its own softness, direction and depth,
        with nothing added on top and no rectangle around it.
     2. the <video>, masked to the phone's silhouette (a static alpha matte),
        so the screen plays at its original colour and timing.
   The wrapper is sized to the phone itself (300 x 616 in the matte's 540 x 960
   frame); both layers sit around it at the full 9:16 and overhang it, so the
   whole composition shows and the shadow spills naturally past the phone. */
.whovid{
  position:relative;overflow:visible;
  width:min(100%,240px);aspect-ratio:300/616;
  margin-inline:auto;align-self:center;pointer-events:none;
}
.whovid-shade,
.whovid video{
  position:absolute;left:-34%;top:-24.03%;width:180%;height:auto;max-width:none;
  aspect-ratio:1080/1920;object-fit:contain;display:block;
  background:transparent;border:0;padding:0;box-shadow:none;
}
/* only the phone-and-shadow area of the frame is painted, so the (pure white,
   so invisible) remainder of the frame never lies over the heading */
.whovid-shade{mix-blend-mode:multiply;clip-path:inset(14% 0 8% 17%)}
.whovid video{
  -webkit-mask-image:var(--who-matte);mask-image:var(--who-matte);
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}
/* Honeycomb behind the phone: the same .hexbg component as Your Circles and
   Contact, centred on the phone. Its box reaches well past the phone on both
   sides; the mask keeps the pattern around the phone only, fading out before
   the lede above, before the options column on desktop and before the options
   below when stacked. It comes first in .whovid, so the phone and its shadow
   sit on top of it (the shadow darkens the lines under it, as a real shadow
   would). On teal the grid is drawn in faint cream instead of grey. */
.whovid .hexbg{
  inset:-170px -420px;
  /* --hx-r: how far right of the phone's centre the pattern may reach; it
     tracks the gap to the options column (about 26vw - 30px) so it always
     stops short of the text. The ellipse is shifted left by the difference,
     so the extra room goes to the open side, left of the phone. */
  --hx-r:min(290px, calc(26vw - 34px));
  --hx-mask:radial-gradient(340px 290px at calc(50% - 340px + var(--hx-r)) calc(50% + 30px),
      #000 0,#000 42%,rgba(0,0,0,.6) 70%,transparent 100%);
}
#who .hexbg-grid{stroke:rgba(244,238,223,.2)}
/* the brand gold-to-red reads darker on teal than on white; lift it so the
   lit edges still glow rather than sink */
#who .hexbg-acc{filter:brightness(1.35) saturate(1.1)}
@media (max-width:860px){
  .whovid .hexbg{
    --hx-mask:radial-gradient(min(48vw,360px) 260px at 50% calc(50% + 20px),
        #000 0,#000 42%,rgba(0,0,0,.6) 70%,transparent 100%);
  }
}
@media (max-width:620px){
  .whovid .hexbg{
    --hx-mask:radial-gradient(48vw 240px at 50% calc(50% + 10px),
        #000 0,#000 42%,rgba(0,0,0,.6) 70%,transparent 100%);
  }
}
/* the frame overhangs the phone to the right; keep that from ever widening the page */
#who{overflow-x:hidden;overflow-x:clip}
@media (max-width:860px){
  /* stacked: leave room under the phone for its shadow before the options start */
  .whovid{width:min(52vw,220px);margin-bottom:calc(min(52vw,220px) * .42)}
}

/* ===================== CORE FEATURES (bento) =====================
   Two independent columns, not a 2x2 grid — that is what lets the left and
   right stacks split at different heights the way the reference does. */
.bento-head{text-align:center;max-width:44ch;margin-inline:auto}
.bento-head .eyebrow{margin-bottom:var(--s1)}
.bento-head .lede{margin-inline:auto}
.bento{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(14px,1.6vw,20px);margin-top:clamp(34px,4.4vw,var(--s5));
  align-items:start;
}
/* min-width:0 all the way down: without it a nowrap child's min-content width
   pushes the grid column past the wrap gutter on phones */
.bcol{display:flex;flex-direction:column;gap:clamp(14px,1.6vw,20px);min-width:0}
.bcard{
  --bp:clamp(20px,2.3vw,30px);
  min-width:0;overflow:hidden;
  /* on a white section the cards need their own edge: a firmer hairline
     plus a wider, softer shadow, since the fill no longer separates them */
  background:var(--surf-a);border:1px solid rgba(45,74,40,.20);border-radius:18px;
  padding:var(--bp);display:flex;flex-direction:column;
  box-shadow:0 1px 2px rgba(23,36,22,.05), 0 14px 38px rgba(23,36,22,.07);
}
.bcard h3{
  font-family:var(--display);font-weight:500;font-size:clamp(18px,1.9vw,21px);
  line-height:1.2;letter-spacing:-.012em;color:var(--teal);margin-top:var(--s3);
}
.bcard p{margin-top:10px;font-size:15.5px;line-height:1.62;color:var(--ink-2)}
.bmedia{
  flex:1 1 auto;min-width:0;min-height:150px;border-radius:13px;
  display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;
}
.bcard-tall .bmedia{min-height:250px}
.bento-note{
  margin-top:var(--s3);font-size:12.5px;color:var(--ink-3);text-align:center;
}
@media (max-width:820px){
  .bento{grid-template-columns:1fr}
  .bcard-tall .bmedia{min-height:220px}
}

/* — Data and insights — */
.bm-chart{
  background:linear-gradient(180deg,rgba(45,74,40,.045),rgba(45,74,40,.02));
  align-items:stretch;padding:clamp(14px,1.6vw,18px);gap:6px;
  flex-direction:column;justify-content:center;
}
.chart-stat{display:flex;flex-direction:column;gap:3px}
.cs-lab{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.cs-big{font-family:var(--display);font-weight:500;font-size:clamp(28px,3.4vw,36px);
  line-height:1;letter-spacing:-.012em;color:var(--ink)}
.cs-of{font-size:.52em;font-weight:700;color:var(--ink-3);margin-left:2px}
.cs-delta{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:600;color:var(--teal)}
.cs-delta svg{width:13px;height:13px;flex:none}
.cs-line{display:block;width:100%;height:clamp(64px,8vw,86px);margin-top:2px}

/* — Geo-fence — */
.bm-map{background:#FBF5E7;align-items:stretch;padding:0}
.bm-map svg{display:block;width:100%;height:100%;object-fit:cover}
.map-chip{
  position:absolute;left:12px;bottom:12px;display:inline-flex;align-items:center;gap:7px;
  background:var(--surf-a);border:1px solid rgba(45,74,40,.18);border-radius:999px;
  padding:7px 13px 7px 9px;font-size:12.5px;font-weight:600;color:var(--gold-ink);
  box-shadow:0 4px 14px rgba(23,36,22,.10);
}
.map-chip svg{width:15px;height:15px;flex:none}

/* Risk pin: a two-beat pulse, lub-dub then rest. It only runs while the card is
   actually on screen — the observer adds .is-live — and it is off entirely for
   anyone who asks for reduced motion. Transform origin is the pin's tip, so the
   marker grows out of the place it is pointing at rather than drifting. */
.pin-beat, .pin-ping{transform-box:view-box;transform-origin:208px 121px}
.pin-ping{opacity:0}
@media (prefers-reduced-motion: no-preference){
  .bcard.is-live .pin-beat{animation:pinBeat 1.9s ease-in-out infinite}
  .bcard.is-live .pin-ping{animation:pinPing 1.9s ease-out infinite}
}
@keyframes pinBeat{
  0%,100%{transform:scale(1)}
  9%{transform:scale(1.14)}
  18%{transform:scale(1)}
  27%{transform:scale(1.08)}
  38%{transform:scale(1)}
}
@keyframes pinPing{
  0%{transform:scale(.5);opacity:.55}
  24%{transform:scale(2.0);opacity:0}
  25%{transform:scale(.5);opacity:.38}
  50%{transform:scale(2.3);opacity:0}
  100%{transform:scale(2.3);opacity:0}
}

/* Core-feature tiles rise into place as they enter. The hidden state is only
   armed once JS adds .is-staged, so with JS off — or under reduced motion —
   all four render normally. Only opacity and transform move, and the grid
   reserves every card's full box from first paint, so nothing shifts. */
.bento.is-staged .bcard{
  opacity:0;transform:translate3d(0,var(--rise,48px),0);
  transition:opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
  transition-delay:var(--rvd,0ms);
  will-change:transform,opacity;
}
.bento.is-staged .bcard.is-in{opacity:1;transform:translate3d(0,0,0)}
@media (max-width:820px){ .bento.is-staged .bcard{--rise:34px} }

/* — Reflections: the real P.A.R screen, bled off the bottom of the card — */
.bm-phone{
  background:linear-gradient(180deg,rgba(45,74,40,.09),rgba(45,74,40,.02));
  flex:none;height:clamp(300px,34vw,400px);min-height:0;
  align-items:flex-start;justify-content:center;padding:0;
}
.refshot{
  position:absolute;top:clamp(16px,2vw,24px);left:50%;
  /* --ph-y is driven by scroll; it defaults to 0 so the phone sits in its
     final place with JS off or under reduced motion. The media box already
     clips (overflow:hidden), so the phone rises out of the tile rather than
     spilling past it. The card and the container never move. */
  transform:translate(-50%, var(--ph-y, 0px));
  will-change:transform;
  width:min(232px,70%);height:auto;max-width:none;
  filter:drop-shadow(0 14px 30px rgba(23,36,22,.24));
}
/* the device dissolves into the panel rather than being cut off flat */
.bm-phone::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:32%;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(251,252,252,0) 0%,
    rgba(251,252,252,.34) 42%,
    rgba(251,252,252,.74) 68%,
    rgba(251,252,252,.94) 86%,
    #FBFCFC 100%);
}

/* Scroll-scrubbed reveal for the Reflections copy. The styles below apply only
   once JS has added .is-scrubbed, so with JS off — or when the visitor asks for
   reduced motion — the heading and paragraph simply render as normal.
   Only opacity and transform move: the text keeps its box the whole time, so
   the card never changes height and nothing below it shifts. */
.bcard.is-scrubbed .rv{
  opacity:var(--rv-o,1);
  transform:translate3d(0,var(--rv-y,0px),0);
  will-change:transform,opacity;
}

/* — Check in with yourself: the feelings wheel, cropped by the media box and
   fading out at its edge so it reads as a product visual rather than a pasted
   graphic. Same panel treatment as the other inline-SVG cards. */
/*WHEEL-CSS-START*/
.bm-wheel{
  background:linear-gradient(180deg,rgba(45,74,40,.05),rgba(45,74,40,.02));
  padding:0;align-items:stretch;flex:none;min-height:0;aspect-ratio:320/213;
  cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;
}
.bm-wheel.dragging{cursor:grabbing}
.bm-wheel svg{display:block;width:100%;height:100%;overflow:hidden}
.bm-wheel text{font-family:"Public Sans",system-ui,-apple-system,"Segoe UI",sans-serif;pointer-events:none}
.bm-wheel:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
#wheelRot{will-change:transform}
.wheel-pill{
  position:absolute;left:10px;top:10px;right:34px;max-width:max-content;z-index:2;pointer-events:none;
  display:flex;align-items:center;gap:6px;flex-wrap:nowrap;white-space:nowrap;overflow:hidden;
  padding:6px 11px;border-radius:999px;background:rgba(251,248,243,.94);color:#172416;
  font-size:12px;line-height:1.2;box-shadow:0 2px 10px rgba(23,36,22,.18);
}
.wheel-pill b{font-weight:700}
.wheel-pill span{font-weight:500}
.wheel-pill i{font-style:normal;font-size:9px;opacity:.55}
.wheel-hint{
  position:absolute;left:50%;bottom:12px;transform:translateX(-50%);z-index:2;pointer-events:none;
  display:inline-flex;align-items:center;gap:7px;padding:8px 14px 8px 11px;border-radius:999px;
  background:#172416;color:#fff;font-size:13px;font-weight:600;letter-spacing:.01em;
  box-shadow:0 6px 18px rgba(23,36,22,.35);transition:opacity .35s ease,transform .35s ease;
}
.wheel-hint svg{width:16px;height:16px;flex:none}
.bm-wheel.touched .wheel-hint{opacity:0;transform:translate(-50%,6px)}
@media (prefers-reduced-motion:no-preference){
  .wheel-hint svg{animation:wheelNudge 1.9s ease-in-out infinite}
}
@keyframes wheelNudge{0%,100%{transform:translateY(0)}35%{transform:translateY(-3px)}70%{transform:translateY(3px)}}
/*WHEEL-CSS-END*/

@media (max-width:820px){
  .bm-phone{height:clamp(320px,74vw,400px)}
}

/* ===================== TYPEWRITER (Who It's For) =====================
   The sizer holds the box open at the width of the longest word, so the
   sentence around it never reflows while characters are typed or deleted.
   The live text sits on top of it, absolutely positioned, and inherits every
   type property from the headline. With JS off — or under reduced motion —
   what renders is simply "change" in gold with no caret. */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.tw{position:relative;display:inline-block;white-space:nowrap;vertical-align:baseline}
.tw-sizer{visibility:hidden}
.tw-live{position:absolute;left:0;top:0;white-space:nowrap}
.tw-t{color:inherit}
.tw.is-gold{color:#E9B00D}            /* 3.09:1 on Healthy Teal */
.tw-c{
  display:none;width:.055em;height:.78em;margin-left:.06em;
  background:currentColor;vertical-align:-.04em;
}
.tw.is-live .tw-c{display:inline-block}
.tw.is-blinking .tw-c{animation:twBlink .56s steps(1,end) infinite}
@keyframes twBlink{0%,49%{opacity:1}50%,100%{opacity:0}}
@media (prefers-reduced-motion: reduce){ .tw.is-blinking .tw-c{animation:none} }

/* ===================== PRICING ===================== */
.tiers{display:grid;grid-template-columns:1fr 1.18fr 1fr;gap:var(--s3);margin-top:calc(var(--s5) + 18px);align-items:stretch}
.tier{
  position:relative;background:var(--card);border:1px solid var(--rule);border-radius:8px;
  padding:var(--s4) var(--s3);display:flex;flex-direction:column;
}
.tier.feat{
  border-color:var(--teal);border-width:2px;background:var(--teal-wash);
  margin-block:-22px;padding:calc(var(--s4) + 22px) calc(var(--s3) + 6px);
  box-shadow:0 20px 44px rgba(23,36,22,.13);
}
.tier.feat .tn{font-size:12.5px}
.tier.feat .price{font-size:clamp(38px,4.8vw,54px)}
.tier.feat .equiv{font-size:15.5px}
.tier .tn{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--teal);margin-bottom:16px}
.tier .price{
  font-family:var(--display);font-weight:500;font-size:clamp(34px,4vw,44px);line-height:1;
  margin-bottom:8px;font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:7px;
}
.tier .price .per{font-family:var(--sans);font-size:15px;color:var(--ink-3);font-weight:500;letter-spacing:0}
.tier .equiv{font-size:14.5px;color:var(--ink-2);min-height:22px}
.tier .save{
  display:inline-block;margin-top:12px;font-size:12px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--gold-ink);background:var(--gold-wash);
  padding:6px 11px;border-radius:3px;width:fit-content;
}
.tfoot{margin-top:auto;padding-top:var(--s4)}
/* Yearly: a folded promo ribbon on the card's upper right. The label runs 8px
   past the card's right edge and a darker triangle folds back under that
   overhang, so it reads as wrapped around the card. Signal Red is the brand
   token (--red #8A563C); white on it is 7.69:1. There is no darker-red token,
   so the fold is derived from --red (68% of it, toward black = #5E3A27).
   Positioned against .tier (already position:relative), so it moves with the
   card; it sits in the top padding, clear of the price and the button.
   It is a real link: it scrolls up to the launch note (see script). */
.tier-ribbon{
  --rb-over:8px;
  position:absolute;z-index:2;top:22px;right:calc(-1px - var(--rb-over));  /* -1px clears the card border */
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:700;line-height:1;letter-spacing:.01em;white-space:nowrap;
  color:#FFFFFF;background:var(--red);text-decoration:none;
  padding:9px 18px;min-height:32px;
  border-radius:3px 0 0 3px;
  box-shadow:0 4px 10px rgba(23,36,22,.16);
  transition:background-color .15s ease;
}
.tier-ribbon::after{
  content:"";position:absolute;right:0;top:100%;width:0;height:0;
  border-top:var(--rb-over) solid #5E3A27;
  border-top-color:color-mix(in srgb, var(--red) 68%, #000);
  border-right:var(--rb-over) solid transparent;
}
.tier-ribbon:hover{background:color-mix(in srgb, var(--red) 88%, #000)}
.tier-ribbon:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
@media (max-width:620px){
  .tier-ribbon{--rb-over:6px;top:18px;font-size:12px;padding:8px 13px;min-height:30px}
}
@media (prefers-reduced-motion: reduce){ .tier-ribbon{transition:none} }
.tfoot .btn{width:100%}
/* Monthly: the current price is introductory. The future price is stated as
   plain secondary text - no strikethrough, so it never reads as a price
   anyone is paying today. */
.tier .intro-note{
  margin:2px 0 12px;padding-left:10px;border-left:3px solid var(--gold);
  font-size:13.5px;line-height:1.4;font-weight:600;color:var(--ink-2);max-width:32ch;
}
.badge-pop{
  position:absolute;top:-11px;left:var(--s3);
  background:var(--gold);color:#3A2418;   /* 6.76:1 */
  font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  padding:6px 12px;border-radius:3px;
}

/* pricing cards lift very slightly on hover (mouse devices only); text stays put so it never shimmers */
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .tier{transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
  .tier:hover,.tier:focus-within{
    transform:translateY(-4px);z-index:3;
    border-color:var(--teal);box-shadow:0 14px 28px rgba(23,36,22,.14);
  }
}
/* weekly + yearly read as the quiet options: neutral grey, not cream.
   Monthly then inverts to clean white so the highlighted plan still leads. */
.tier.plain{
  background:#F4F4F3;border-color:#DDDDDA;
}
.tier.feat{background:var(--surf-a)}
.tier.plain .tn{color:var(--ink-3)}
.tier.plain .save{color:#4A4A4A;background:rgba(94,94,94,.12)}
/* weekly's Founding Member label: same size and place as the gold one on
   monthly, but neutral, so monthly stays the plan that draws the eye */
.badge-pop.badge-quiet{background:#FFFFFF;color:#4A4A4A;box-shadow:inset 0 0 0 1px #CFCFCA}

/* the everything-included panel runs on Healthy Teal */
.included{
  margin-top:var(--s5);background:var(--teal);color:var(--cream);
  border:1px solid var(--teal);border-radius:8px;padding:var(--s4) var(--s3);
}
.s-white .included h3{color:var(--cream)}
.included h3{font-weight:700;font-size:19px;margin-bottom:6px;color:var(--cream)}
.included .sub{font-size:15px;color:rgba(244,238,223,.78);margin-bottom:var(--s3)}
.inc-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:13px var(--s4)}
.inc-list li{font-size:15.5px;color:rgba(244,238,223,.94);display:grid;grid-template-columns:auto 1fr;gap:11px;line-height:1.5}
.inc-list li svg{margin-top:4px;flex:none;color:var(--gold)}
.pnote{margin-top:var(--s4);font-size:15.5px;color:var(--ink-2);max-width:68ch}
/* pre-order terms, directly under the plan cards so it is read before a button is */
.preorder-note{
  margin:calc(var(--s4) + 8px) 0 0;padding:14px 18px;max-width:78ch;
  border-left:3px solid var(--gold);background:var(--gold-wash);border-radius:0 6px 6px 0;
  font-size:14.5px;line-height:1.55;color:var(--ink-2);
}
.preorder-note b{color:var(--ink)}
@media (max-width:900px){
  .tiers{grid-template-columns:1fr;gap:var(--s4);margin-top:var(--s5)}
  .tier.feat{margin-block:0;padding:var(--s4) var(--s3)}
  .inc-list{grid-template-columns:1fr}
}

/* ===================== CONTACT ===================== */
.cform{margin-top:var(--s5);max-width:760px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
.fld{display:flex;flex-direction:column;gap:7px;margin-bottom:var(--s3)}
.fld label{font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.fld .opt{text-transform:none;letter-spacing:0;font-weight:400;color:var(--ink-3)}
.fld .req{color:var(--red);font-weight:700;margin-left:2px}
.fld input,.fld select,.fld textarea{
  font-family:var(--sans);font-size:16px;color:var(--ink);
  background:var(--card);border:1.5px solid var(--rule);border-radius:6px;
  padding:13px 14px;width:100%;min-height:50px;
  transition:border-color .15s ease;
}
.fld textarea{min-height:132px;resize:vertical;line-height:1.55}
.fld select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%234D6769' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;padding-right:42px}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--teal)}
.fld input:focus-visible,.fld select:focus-visible,.fld textarea:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.fld.bad input,.fld.bad select,.fld.bad textarea{border-color:var(--red)}
.ferr{font-size:13.5px;color:var(--red);min-height:0}
.fld:not(.bad) .ferr{display:none}
.cform .btn{margin-top:var(--s1)}
.fnote{margin-top:var(--s3);font-size:14.5px;color:var(--ink-3);max-width:60ch}
.fstatus{
  margin-top:var(--s3);padding:15px 17px;border-radius:7px;font-size:15.5px;line-height:1.55;
  border-left:3px solid var(--teal);background:var(--teal-wash);color:var(--ink-2);
}
.fstatus[hidden]{display:none}
.fstatus b{color:var(--ink)}
.fstatus .mail{font-weight:600;user-select:all}
@media (max-width:640px){ .frow{grid-template-columns:1fr;gap:0} }
/* the contact form on a teal band follows the teal-band rules: cream labels,
   gold required marks, white fields, cream focus, a cream button. Error text is
   a light gold (#E8C8B0, 4.53:1 on teal) since the brand red doesn't read here. */
.s-teal .fld label{color:var(--cream)}
.s-teal .fld .opt{color:rgba(244,238,223,.72)}
.s-teal .fld .req{color:var(--gold)}
.s-teal .fld input,.s-teal .fld select,.s-teal .fld textarea{background-color:#FFFFFF;border-color:rgba(244,238,223,.5)}
.s-teal .fld input:focus,.s-teal .fld select:focus,.s-teal .fld textarea:focus{border-color:var(--cream)}
.s-teal .fld input:focus-visible,.s-teal .fld select:focus-visible,.s-teal .fld textarea:focus-visible{outline-color:var(--cream)}
.s-teal .fld.bad input,.s-teal .fld.bad select,.s-teal .fld.bad textarea{border-color:var(--gold)}
.s-teal .ferr{color:#E8C8B0}
.s-teal .fstatus{border-left-color:var(--gold);background:rgba(244,238,223,.10);color:var(--cream)}
.s-teal .fstatus b{color:#FFFFFF}

/* ===================== FAQ ===================== */
.faq{}
.faq-list{margin-top:var(--s4);border-top:1px solid var(--rule-2)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{cursor:pointer;list-style:none;padding:20px 44px 20px 0;position:relative;font-size:17.5px;font-weight:600;line-height:1.35;min-height:52px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:8px;top:28px;width:10px;height:10px;
  border-right:2px solid var(--teal);border-bottom:2px solid var(--teal);transform:rotate(45deg);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(-135deg);top:31px}
.faq .ans{padding:0 56px 22px 0;color:var(--ink-2);font-size:16px;line-height:1.65;max-width:70ch}
.faq .ans p + p{margin-top:13px}

/* ===================== CRISIS ===================== */
.crisis{background:var(--red);color:#FDF0EA}
.crisis-in{display:grid;grid-template-columns:1.2fr auto;gap:clamp(24px,5vw,var(--s6));align-items:center}
.crisis .k{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:rgba(251,243,234,.75);margin-bottom:10px}
.crisis h3{font-weight:800;font-size:clamp(22px,2.8vw,32px);text-transform:uppercase;letter-spacing:-.012em;line-height:1.08}
.crisis p{font-size:15.5px;color:rgba(251,243,234,.85);margin-top:10px;max-width:46ch}
.lines{display:flex;flex-direction:column;gap:16px}
.line{border-left:2px solid rgba(251,243,234,.4);padding-left:16px}
.line .num{font-family:var(--display);font-weight:500;font-size:21px;user-select:all;font-variant-numeric:tabular-nums}
.line .nm{font-size:13px;color:rgba(251,243,234,.78);margin-top:3px}
@media (max-width:900px){ .crisis-in{grid-template-columns:1fr} }

/* ===================== CLOSE + FOOTER ===================== */
/* Closing band runs on white now, so it follows the white-surface rules:
   teal headline, ink-2 body, cropped contours bleeding from the corners. */
.close{position:relative;overflow:hidden}
.close .wrap{z-index:1;text-align:center}
.close h2{
  font-weight:800;font-size:clamp(32px,5.2vw,58px);line-height:.98;
  text-transform:uppercase;letter-spacing:-.022em;margin-bottom:var(--s3);color:var(--teal);
}
.close p{color:var(--ink-2);max-width:46ch;margin-inline:auto;font-size:17px}
.close .hero-cta{justify-content:center;margin-top:var(--s4)}
.store-cta{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:16px;margin-top:var(--s4)}
.storebadge{display:block;line-height:0;border-radius:9px;transition:opacity .15s ease}
.storebadge:hover{opacity:.82}
.storebadge:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.storebadge img{display:block;height:48px;width:auto}
@media (max-width:520px){ .storebadge img{height:44px} }

/* ---------- store badges: "Coming Soon" state ----------
   Rendered by store_badges.py whenever a store URL is still empty. The badges
   are plain spans (no link, no href, not in the tab order) labelled
   "... app - coming soon", and they drop every hint of being clickable.
   The official artwork is left at full strength; the banner carries the message.
   The banner is the supplied "Coming Soon" sticker, angled across the pair.
   Remove it by filling in STORE_URLS. */
.store-soon{position:relative;flex-wrap:nowrap}
.store-soon .is-soon{
  display:block;line-height:0;cursor:default;pointer-events:none;
  user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;
  transition:none;
}
.store-soon .is-soon:hover{opacity:1}
.store-soon .is-soon img{-webkit-user-drag:none}
.soon-banner{
  /* the supplied "Coming Soon" sticker, redrawn as vector so it stays sharp:
     a red band rising ~14deg left to right, vertical cut ends, radial red
     (#EE4A47 -> #D90102), white uppercase Arial and a soft drop shadow.
     Laid diagonally across the middle of the pair. */
  position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);
  width:60%;line-height:0;pointer-events:none;user-select:none;-webkit-user-select:none;
}
.soon-banner svg{display:block;width:100%;height:auto;overflow:visible}
@media (max-width:900px){ .nav-badges.store-soon{margin-bottom:14px} }
.store-cta.store-soon{width:fit-content;margin:calc(var(--s4) + 20px) auto 20px}

/* Footer runs on white and follows the white-surface rules: teal for the
   lockup and the column headings, ink-2/ink-3 for body and links, and the
   hairline rules rather than the deep-teal ones. Gold as text would only be
   2.28:1, so the sign-off uses --gold-ink. A top rule separates it from the
   closing band, which is white too. */
.foot{background:var(--surf-a);color:var(--ink-2);padding-block:var(--s5) var(--s4);border-top:1px solid var(--rule)}
/* no rule under the closing band: it runs white straight into the white footer */
.close + .foot{border-top:0}
.foot-in{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:var(--s4);max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.foot .brand-name{color:var(--teal)}
.foot .brand-sub{color:var(--ink-3)}
.foot .promise-sm{margin-top:var(--s2);font-family:var(--display);font-weight:500;font-size:19px;color:var(--teal);line-height:1.3;max-width:22ch}
/* "daily" in the same display gold as the hero's DAILY (#8A563C, 3.41:1 on white);
   19px bold counts as large text, so it clears the 3:1 bar */
.foot .promise-sm .gold{color:#8A563C}
.foot .k{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--teal);margin-bottom:14px}
.foot ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:9px;font-size:14.5px}
.foot a{text-decoration:none;color:var(--ink-2)}
.foot a:hover{color:var(--teal);text-decoration:underline;text-underline-offset:3px}
/* the column links carry the same chip the nav tabs use; the negative inset
   keeps their text on the same left edge as the heading above them */
.foot ul{margin-left:-10px}
.foot ul a{
  display:inline-block;padding:6px 10px;border-radius:8px;
  transition:background-color .14s ease, color .14s ease;
}
.foot ul a:hover,
.foot ul a:focus-visible{background:rgba(126,148,117,.10);color:var(--teal);text-decoration:none}
.foot .mail{font-size:14.5px;color:var(--ink);user-select:all;font-weight:500}
.foot-org{margin-top:var(--s3);font-size:14px;line-height:1.55;color:var(--ink-3);max-width:34ch}
.foot-org b{font-weight:600;color:var(--ink-2)}
.foot-bot{max-width:var(--maxw);margin:var(--s5) auto 0;padding:var(--s3) var(--gut) 0;border-top:1px solid var(--rule);
  font-size:13px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--ink-3)}
.foot-bot .tag{color:var(--gold-ink);font-weight:600;letter-spacing:.02em}
@media (max-width:760px){ .foot-in{grid-template-columns:1fr;gap:var(--s3)} }

/* ===================== MOBILE ===================== */
@media (max-width:620px){
  body{font-size:16.5px}
  .hero-cta{flex-direction:column;align-items:stretch}
  .ringtabs button{flex:1 1 30%;padding:11px 8px}
  .swrow{grid-template-columns:1fr;gap:4px}
  .swrow .ar{display:none}
  .swrow .no{font-size:14px}
  .foot-bot{flex-direction:column;gap:10px}
  .streaknum{font-size:38px}
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
  html{scroll-behavior:auto}
}

/* ===================== RESOURCES =====================
   Same tokens, same surfaces, same divider system as the main page. The
   reference screenshots use a purple accent; this brand has none, so the accent
   role is filled by Healthy Teal throughout. Only post-specific furniture is new. */

/* these pages open and close on white, so the page ground is white too —
   otherwise the cream body colour shows through any seam between sections */
body{background:var(--surf-a)}
/* .tlink ships without an icon rule on the main page (its arrows are text), so
   an inline SVG there renders at its default 300x150 and crushes the label */
.tlink svg{width:16px;height:16px;flex:none}
.tlink{white-space:nowrap}

.sample-note{
  margin-top:var(--s3);font-size:13px;color:var(--ink-3);
  border-left:3px solid var(--rule-2);padding-left:13px;max-width:56ch;
}
.rhero{padding-block:clamp(44px,6vw,86px) clamp(30px,3.6vw,48px)}
.rhero h1{
  font-weight:800;font-size:clamp(34px,5.4vw,60px);line-height:1.0;
  letter-spacing:-.022em;text-transform:uppercase;color:var(--teal);
}

/* — shared cover art: brand gradient + the hexagon band, one pairing per post — */
.rcover,.rfeat-img{
  display:block;position:relative;overflow:hidden;
  background:linear-gradient(135deg, var(--c1) 0%, var(--c2) 100%);
}

.rcover svg,.rfeat-img svg{
  position:absolute;left:clamp(14px,2vw,20px);top:clamp(14px,2vw,20px);
  width:26px;height:26px;color:rgba(255,255,255,.92);z-index:1;
}

/* ===================== CARD ELEVATION =====================
   One set of shadows for every Resources card, so the featured article and the
   small cards read as the same family. Neutral ink, layered: a tight contact
   shadow plus a wide soft one. The featured card gets the deeper pair. */
:root{
  --rc-edge:rgba(34,50,31,.07);
  --rc-shadow:0 2px 5px rgba(34,50,31,.05), 0 12px 30px rgba(34,50,31,.09);
  --rc-shadow-up:0 4px 10px rgba(34,50,31,.06), 0 20px 42px rgba(34,50,31,.12);
  --rf-shadow:0 3px 8px rgba(34,50,31,.06), 0 20px 55px rgba(34,50,31,.13);
  --rf-shadow-up:0 5px 12px rgba(34,50,31,.07), 0 28px 66px rgba(34,50,31,.16);
  --rc-ease:cubic-bezier(.2,.7,.3,1);
  --rc-time:210ms;
}
@media (max-width:640px){
  :root{
    --rc-shadow:0 1px 3px rgba(34,50,31,.05), 0 8px 20px rgba(34,50,31,.07);
    --rc-shadow-up:0 3px 7px rgba(34,50,31,.06), 0 14px 30px rgba(34,50,31,.09);
    --rf-shadow:0 2px 6px rgba(34,50,31,.06), 0 14px 36px rgba(34,50,31,.11);
    --rf-shadow-up:0 4px 9px rgba(34,50,31,.07), 0 20px 46px rgba(34,50,31,.13);
  }
}

/* ===================== FEATURED ===================== */
.rfeat{margin-top:clamp(22px,3vw,var(--s4))}
.rfeat-link{
  position:relative;display:block;text-decoration:none;color:var(--cream);
  border-radius:20px;overflow:hidden;isolation:isolate;
  /* the 1px ring is drawn as a shadow, not a border, so the card keeps its
     exact size and the image its exact proportions */
  box-shadow:0 0 0 1px var(--rc-edge), var(--rf-shadow);
  transition:transform var(--rc-time) var(--rc-ease), box-shadow var(--rc-time) var(--rc-ease);
}
/* a faint light rim on the image's top edge and a hairline round it: it keeps
   the photo from looking pasted onto the page. Sits above the scrim, below
   nothing interactive (pointer-events off). */
.rfeat-link::after{
  content:"";position:absolute;inset:0;z-index:3;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), inset 0 0 0 1px rgba(255,255,255,.07);
}
.rfeat-img::after{transition:transform var(--rc-time) var(--rc-ease);transform-origin:50% 100%}
.rfeat-link:hover,
.rfeat-link:focus-visible{transform:translateY(-3px);box-shadow:0 0 0 1px rgba(34,50,31,.09), var(--rf-shadow-up)}
.rfeat-link:hover .rfeat-img::after,
.rfeat-link:focus-visible .rfeat-img::after{transform:scale(1.015)}
.rfeat-link:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.rfeat-img{aspect-ratio:21/9;border-radius:0}
/* the scrim is its own layer and always opaque at the foot, so the copy keeps
   its contrast whatever image ends up behind it */
.rfeat-scrim{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(16,26,15,0) 34%, rgba(16,26,15,.40) 58%,
    rgba(16,26,15,.74) 78%, rgba(16,26,15,.88) 100%);
}
.rfeat-b{
  position:absolute;left:0;right:0;bottom:0;
  display:flex;flex-direction:column;align-items:flex-start;
  padding:clamp(20px,3vw,38px);gap:10px;
}
.rfeat-tags{display:flex;flex-wrap:wrap;gap:7px}
.rtag{
  font-size:11px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:#EAF3F2;background:rgba(255,255,255,.17);border:1px solid rgba(255,255,255,.3);
  border-radius:999px;padding:5px 11px;backdrop-filter:blur(2px);
}
.rfeat-h{
  font-family:var(--display);font-weight:500;font-size:clamp(22px,3.1vw,36px);
  line-height:1.1;letter-spacing:-.012em;color:#fff;max-width:22ch;
}
.rfeat-d{font-size:clamp(14.5px,1.35vw,16.5px);line-height:1.5;color:rgba(255,255,255,.88);max-width:54ch}
.rfeat-m{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:4px;
  font-size:13px;color:rgba(255,255,255,.82);
}
.rfeat-m b{font-weight:600;color:#fff}
.rfeat-m i{font-style:normal;color:rgba(255,255,255,.5)}
.rfeat-arw{
  position:absolute;right:clamp(16px,2.4vw,26px);top:clamp(16px,2.4vw,26px);
  width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.34);
  color:#fff;backdrop-filter:blur(3px);
}
.rfeat-arw svg{width:18px;height:18px}
@media (max-width:820px){ .rfeat-img{aspect-ratio:4/3} .rfeat-h{max-width:none} }
@media (max-width:640px){
  /* a landscape crop leaves the overlay no room on a phone — it ends up filling
     the whole image and the tags collide with its top edge */
  .rfeat-img{aspect-ratio:4/5}
  .rfeat-scrim{background:linear-gradient(180deg,
    rgba(16,26,15,0) 20%, rgba(16,26,15,.42) 44%,
    rgba(16,26,15,.78) 68%, rgba(16,26,15,.9) 100%)}
  .rfeat-b{gap:9px;padding:20px}
  .rfeat-h{font-size:24px}
  .rfeat-arw{width:38px;height:38px}
}

/* ===================== TOOLBAR ===================== */
.rtools{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  margin-top:clamp(26px,3.4vw,var(--s5));
}
/* Topic rail: labels on a shared baseline, not pills. Rest is plain text; hover
   thickens the rule under the label; the selected topic thickens it further and
   goes teal. The strip slides, with arrows that appear only when there is more
   to see in that direction. */
.rtopics{position:relative;min-width:0;flex:0 1 auto;display:flex;align-items:stretch}
.rtopics::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:#E2E2E0;pointer-events:none;     /* neutral grey, not the warm rule */
}
.rtopics-in{
  position:relative;z-index:1;display:flex;gap:2px;
  overflow-x:auto;scroll-behavior:smooth;scroll-snap-type:x proximity;
  scrollbar-width:none;-ms-overflow-style:none;scroll-padding-inline:0;
}
.rtopics-in::-webkit-scrollbar{display:none}
.rtopics-in button{
  display:inline-flex;align-items:center;gap:7px;flex:none;scroll-snap-align:start;
  font-family:var(--sans);font-size:12px;font-weight:600;white-space:nowrap;cursor:pointer;
  background:none;border:0;border-bottom:2px solid transparent;
  padding:13px 14px;min-height:48px;color:var(--ink-3);
  transition:color .15s ease, border-color .15s ease;
}
/* hovering shows the same teal rule the selected topic carries, so the pointer
   previews exactly what clicking will give you */
.rtopics-in button:hover,
.rtopics-in button:focus-visible,
.rtopics-in button[aria-selected="true"]{
  color:var(--teal);border-bottom-width:3px;border-bottom-color:var(--teal);
}
.rtopics-in button[aria-selected="true"]{font-weight:700}
.rtopics-in button:focus-visible{outline:2px solid var(--gold);outline-offset:-3px;border-radius:4px}
/* slider arrows — hidden unless that direction has more strip */
/* beside the strip rather than over it: an overlaid arrow with a fade would
   hide the half-cut tab that tells you there is more to the right */
.rts{
  position:static;flex:none;width:34px;align-self:stretch;
  display:none;align-items:center;justify-content:center;
  background:none;border:0;cursor:pointer;color:var(--ink-3);padding:0;
  transition:color .15s ease;
}
.rts svg{width:17px;height:17px}
.rts:hover{color:var(--teal)}
.rts:focus-visible{outline:2px solid var(--gold);outline-offset:-3px}
.rtopics.can-prev .rts-prev,.rtopics.can-next .rts-next{display:flex}
.rtopics.can-prev .rtopics-in{
  -webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,0) 0,#000 34px);
          mask-image:linear-gradient(90deg,rgba(0,0,0,0) 0,#000 34px);
}
@media (prefers-reduced-motion: reduce){ .rtopics-in{scroll-behavior:auto} }

.rsearch{position:relative;flex:0 0 auto;width:min(272px,38vw)}
.rsearch-i{
  position:absolute;left:13px;top:50%;transform:translateY(-50%);
  width:17px;height:17px;color:var(--ink-3);pointer-events:none;
}
.rsearch input{
  font-family:var(--sans);font-size:15px;color:var(--ink);width:100%;
  background:#FFFFFF;border:1.5px solid #E2E2E0;border-radius:999px;
  padding:11px 16px 11px 38px;min-height:46px;
  transition:border-color .15s ease;
}
.rsearch input::placeholder{color:var(--ink-3)}
.rsearch input:focus{outline:none;border-color:var(--teal)}
.rsearch input:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.rsearch input::-webkit-search-cancel-button{cursor:pointer}
@media (max-width:820px){
  .rtools{flex-direction:column-reverse;align-items:stretch;gap:var(--s2)}
  .rsearch{width:100%}
  /* let the rail run to the page edge so it reads as scrollable */
  .rtopics{margin-inline:calc(var(--gut) * -1)}
  .rtopics-in{padding-inline:var(--gut)}
  .rtopics::after{left:var(--gut);right:var(--gut)}
  .rts{display:none!important}     /* swipe is the natural gesture here */
}

.rcount{margin-top:var(--s3);font-size:13px;color:var(--ink-3)}
.rempty{
  margin-top:var(--s4);padding:var(--s4);border:1px dashed var(--rule-2);border-radius:14px;
  font-size:16px;line-height:1.6;color:var(--ink-2);text-align:center;
}
.rempty[hidden]{display:none}
.rempty .tlink{margin-left:8px;background:none;border:0;cursor:pointer;font-size:16px;padding:0}

/* ===================== ARTICLE CARDS ===================== */
.rgrid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.2vw,28px);
  margin-top:var(--s3);list-style:none;padding:0;
}
.rcell{display:flex;min-width:0}
.rcell[hidden]{display:none}
.rcard{display:flex;width:100%;min-width:0}
.rcard-link{
  display:flex;flex-direction:column;width:100%;min-width:0;height:100%;
  text-decoration:none;background:#FFFFFF;
  border:1px solid var(--rc-edge);border-radius:18px;padding:14px 14px 18px;
  box-shadow:var(--rc-shadow);
  transition:transform var(--rc-time) var(--rc-ease), box-shadow var(--rc-time) var(--rc-ease),
             border-color var(--rc-time) var(--rc-ease);
}
/* hover and keyboard focus get the same lift, so the card responds the same
   way whichever you use; focus also keeps the site's gold ring */
.rcard-link:hover,
.rcard:focus-within .rcard-link{
  transform:translateY(-4px);border-color:rgba(34,50,31,.10);
  box-shadow:var(--rc-shadow-up);
}
.rcard-link:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.rcard-link .rcover{aspect-ratio:16/9;border-radius:12px;box-shadow:inset 0 0 0 1px rgba(34,50,31,.05)}
/* the cover art eases in a touch inside its own clipped frame */
.rcard-link .rcover::after{transition:transform var(--rc-time) var(--rc-ease);transform-origin:50% 100%}
.rcard-link:hover .rcover::after,
.rcard:focus-within .rcover::after{transform:scale(1.02)}
@media (prefers-reduced-motion: reduce){
  .rcard-link,.rfeat-link,.rcard-link .rcover::after,.rfeat-img::after{transition:box-shadow var(--rc-time) linear, border-color var(--rc-time) linear}
  .rcard-link:hover,.rcard:focus-within .rcard-link,
  .rfeat-link:hover,.rfeat-link:focus-visible{transform:none}
  .rcard-link:hover .rcover::after,.rcard:focus-within .rcover::after,
  .rfeat-link:hover .rfeat-img::after,.rfeat-link:focus-visible .rfeat-img::after{transform:none}
}
.rcard-link .rcover::before{
  content:"";position:absolute;inset:0;z-index:2;
  transition:background-color .2s ease;background:transparent;
}
.rcard-link:hover .rcover::before{background:rgba(23,36,22,.08)}
/* the category reads as a chip in its own hue — the same shape and weight of
   tint as the nav's hover chip, with an ink darkened per category so every one
   of them clears 4.5:1 on its own background */
/* post metadata row, shared by the cards and the article header:
   "N min read · [Category]". The reading time is plain text; the category keeps
   the card chip below, tinted per category (--ctint / --cink come from the card
   link, or from the row itself in the article). */
.rpm{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;align-self:flex-start;
  margin-top:14px;font-size:12.5px;font-weight:600;color:var(--ink-3);line-height:1;
}
.rpm > i{font-style:normal;color:var(--rule-2)}
.rpm .rcat{margin-top:0}
.rcat{
  display:inline-flex;align-items:center;align-self:flex-start;margin-top:14px;
  padding:6px 10px;border-radius:8px;
  background:var(--ctint,var(--teal-wash));color:var(--cink,var(--teal));
  font-size:11px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
}
.rcard-link h3{
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  font-family:var(--display);font-weight:500;font-size:19px;line-height:1.22;
  letter-spacing:-.012em;color:var(--teal);margin-top:8px;
}
.arw{flex:none;width:19px;height:19px;color:var(--ink-3);margin-top:2px;transition:color .18s ease, transform .18s ease}
.arw-i{width:19px;height:19px;display:block}
.rcard-link:hover .arw{color:var(--teal);transform:translate(2px,-2px)}
.rcard-link p{margin-top:9px;font-size:14.5px;line-height:1.55;color:var(--ink-2)}
/* pushes the byline to the foot, so short titles cannot collapse a card and
   every card in a row ends on the same line */
.rby{display:flex;align-items:center;gap:10px;margin-top:auto;padding-top:var(--s3)}
.rby-av{
  width:28px;height:28px;flex:none;border-radius:50%;
  background:var(--card);border:1px solid var(--rule);padding:2px;
}
.rby-t{display:flex;flex-direction:column;gap:1px;min-width:0}
.rby-t b{font-size:13.5px;font-weight:600;color:var(--ink)}
.rby-t time{font-size:12.5px;color:var(--ink-3)}
.rgrid{grid-auto-flow:row dense}
.rcell-note{grid-column:3;grid-row:1}
@media (max-width:980px){
  .rgrid{grid-template-columns:repeat(2,1fr)}
  .rcell-note{grid-column:2;grid-row:1}
}
@media (max-width:640px){
  .rgrid{grid-template-columns:1fr;gap:var(--s4)}
  .rcell-note{grid-column:auto;grid-row:auto}
}

/* ===================== SIGNUP NOTE IN THE GRID =====================
   The home page's post-it component, reused as a grid cell: same paper image,
   same crease and shadow, same content geometry and ink colours. Only the
   positioning changes — static in the flow instead of pinned into the hero —
   and the type scales up because the cell is wider than the hero note. */
/* .note is pinned into the hero on the home page, so its top/left/z-index have
   to be unset here or a relative box inherits them and lands 47.5% down its cell */
.rcell-note{align-items:flex-start}
.note-card{
  position:relative;top:auto;left:auto;z-index:auto;
  /* the home page also stacks .note under its hero below 1180px with an auto
     left margin — that would push this cell off its row, so reset it too */
  margin:0;width:100%;max-width:none;aspect-ratio:680/702;text-align:left;
}
/* copy starts high on the paper so there is clear yellow under the button */
.note-card .note-in{left:15.5%;top:13.5%;width:71.57%}
/* the heading is written on the note by hand; Caveat runs small, so it is set
   ~1.35x the old size to keep the same visual weight. "actually" is underlined
   the way you would underline a word with a pen, since the face has no italic. */
.note-card .note-h{
  font-family:var(--hand);font-weight:700;letter-spacing:0;
  font-size:clamp(25px,2.45vw,31px);line-height:1;color:#2B2100;
}
.note-card .note-h em{
  font-style:normal;text-decoration:underline;text-decoration-thickness:2px;
  text-underline-offset:3px;text-decoration-color:rgba(138,86,60,.75);
}
.note-card .note-p{font-size:clamp(12px,1.05vw,13.5px);margin-top:8px}
.note-card .note-lb{
  display:block;font-size:9.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:#7A4A2F;margin-bottom:-2px;
}
.note-card .note-f{gap:7px;margin-top:11px}
.note-card .note-f input{font-size:clamp(12.5px,1vw,13.5px);min-height:38px}
.note-card .note-f button{font-size:clamp(12.5px,1vw,13.5px);min-height:40px}
.note-card .note-f button[disabled]{opacity:.62;cursor:default}
.note-card .note-s{font-size:clamp(10.5px,.92vw,12px)}
.note-card .note-ok{font-size:clamp(10.5px,.92vw,12px)}
@media (max-width:640px){
  .note-card .note-h{font-size:32px}
  .note-card .note-p{font-size:14px}
  .note-card .note-lb{font-size:10.5px}
  .note-card .note-f input,.note-card .note-f button{font-size:15px;min-height:46px}
  .note-card .note-s,.note-card .note-ok{font-size:13px}
}

/* ===================== ARTICLE ===================== */
.art{padding-block:clamp(36px,5vw,72px) clamp(40px,5vw,80px)}
.art-wrap{max-width:720px;margin-inline:auto;padding-inline:var(--gut)}
.art-back{
  display:inline-flex;align-items:center;gap:7px;text-decoration:none;
  font-size:14px;font-weight:600;color:var(--ink-2);min-height:44px;
}
.art-back:hover{color:var(--teal)}
.art-back svg{width:15px;height:15px}
.art h1{
  font-family:var(--display);font-weight:500;font-size:clamp(30px,4.6vw,48px);
  line-height:1.08;letter-spacing:-.012em;color:var(--teal);margin-top:6px;
}
.art-by{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;margin-top:var(--s3);
  font-size:14px;color:var(--ink-3);
}
/* the article reuses the card byline and metadata as they are; only the card's
   push-to-the-foot spacing is dropped here */
.art-by .rby{margin-top:0;padding-top:0}
.art-by .rpm{margin-top:0}
.art-by .dot{color:var(--rule-2)}
.art .rcover{margin-top:var(--s4);aspect-ratio:21/9;border-radius:16px}
.art-body{margin-top:clamp(28px,3.6vw,var(--s5))}
.art-body p{font-size:17.5px;line-height:1.72;color:var(--ink-2)}
.art-body p + p{margin-top:var(--s3)}
.art-body h2{
  font-family:var(--display);font-weight:500;font-size:clamp(21px,2.5vw,27px);
  line-height:1.2;letter-spacing:-.012em;color:var(--teal);margin-top:var(--s5);
}
.art-body h2 + p{margin-top:14px}
.art-body ul{margin:var(--s3) 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px}
/* marker + exactly one child: loose text nodes beside a <b> would each become
   their own grid item and break onto separate rows */
.art-body ul li{
  display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;
  font-size:16.5px;line-height:1.6;color:var(--ink-2);
}
.art-body ul li > span{min-width:0}
.art-body ul li b{color:var(--ink);font-weight:700}
.art-body ul li::before{
  content:"";width:8px;height:8px;margin-top:11px;border-radius:2px;
  background:var(--teal);transform:rotate(45deg);
}
.art-quote{margin:var(--s5) 0 0;padding:0 0 0 var(--s4);border-left:3px solid var(--gold)}
.art-quote p{
  font-family:var(--display);font-weight:500;font-size:clamp(19px,2.3vw,25px);
  line-height:1.32;letter-spacing:-.012em;color:var(--teal);
}
.art-note{
  margin-top:var(--s5);background:var(--teal-wash);border-left:3px solid var(--teal);
  padding:16px 18px;font-size:16px;line-height:1.6;color:var(--ink-2);
}
.art-note b{color:var(--ink)}
.art-end{
  margin-top:clamp(34px,4.4vw,var(--s6));padding-top:var(--s4);
  border-top:1px solid var(--rule);display:flex;flex-wrap:wrap;gap:var(--s3);
  justify-content:space-between;align-items:center;
}
.art-end .tlink{font-size:15px}
@media (max-width:620px){ .art-body p{font-size:17px} }

/* — collaboration form on the teal band — */
.rsub-f{margin-top:var(--s4);max-width:640px;display:flex;flex-direction:column;gap:var(--s3)}
.rsub-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
.rsub-fld{display:flex;flex-direction:column;gap:7px;min-width:0}
.rsub-fld label{
  font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--cream);
}
.rsub-fld .req{color:var(--gold);font-weight:700;margin-left:2px}
.rsub-fld .opt{text-transform:none;letter-spacing:0;font-weight:400;color:rgba(244,238,223,.7)}
.rsub-f input,.rsub-f textarea{
  font-family:var(--sans);font-size:16px;color:var(--ink);width:100%;
  background:#FFFFFF;border:1.5px solid rgba(244,238,223,.5);border-radius:6px;
  padding:13px 14px;min-height:50px;
}
.rsub-f textarea{min-height:112px;resize:vertical;line-height:1.55}
.rsub-f input::placeholder,.rsub-f textarea::placeholder{color:var(--ink-3)}
.rsub-f input:focus,.rsub-f textarea:focus{outline:none;border-color:var(--cream)}
.rsub-f input:focus-visible,.rsub-f textarea:focus-visible{outline:2px solid var(--cream);outline-offset:2px}
.rsub-f .bad input,.rsub-f .bad textarea,
.rsub-fld.bad input,.rsub-fld.bad textarea{border-color:var(--gold)}
.rsub-f .btn{align-self:flex-start}
.rsub-f .btn[disabled]{opacity:.65;cursor:default}
.rsub-s{margin-top:var(--s2);font-size:14.5px;line-height:1.5;color:var(--cream);max-width:60ch}
.rsub-s:empty{display:none}
.rsub-s a{color:var(--cream);font-weight:600}
@media (max-width:620px){
  .rsub-row{grid-template-columns:1fr;gap:var(--s3)}
  .rsub-f .btn{align-self:stretch;width:100%}
}

/* standalone read/back links are real targets on a phone, so give them the height */
@media (max-width:820px){
  .art-end .tlink,.art-back{min-height:44px;align-items:center}
}

/* — honeycomb texture behind the Resources header (the main page's .hexbg
   component, same art as Questions). It shows above the eyebrow, in the
   top-right corner and the outer gutters, never behind the headline or lede. — */
.rhero{position:relative;overflow:hidden}
.rhero .wrap{position:relative;z-index:1}
.rhero .hexbg{
  --hx-mask:
    linear-gradient(180deg,rgba(0,0,0,.9) 0,transparent 96px),
    radial-gradient(560px 280px at 100% 30%,#000 0,#000 25%,rgba(0,0,0,.5) 55%,transparent 100%),
    linear-gradient(90deg,#000 0,transparent max(20px,calc(50% - 560px)),
                    transparent min(calc(100% - 20px),calc(50% + 560px)),#000 100%);
}
@media (max-width:900px){
  .rhero .hexbg{
    --hx-mask:
      linear-gradient(180deg,rgba(0,0,0,.85) 0,transparent 60px),
      radial-gradient(60% 150px at 100% 0,#000 0,#000 25%,rgba(0,0,0,.5) 55%,transparent 100%);
  }
}
@media (max-width:620px){
  .rhero .hexbg{
    --hx-mask:
      linear-gradient(180deg,rgba(0,0,0,.8) 0,transparent 70px),
      radial-gradient(75% 170px at 100% 0,#000 0,#000 30%,rgba(0,0,0,.45) 60%,transparent 100%);
  }
}


/* the narrowest phones: the note's copy steps down a little so it all stays on
   the paper (inputs and button stay above 40px tall) */
@media (max-width:380px){
  .note-card .note-h{font-size:27px}
  .note-card .note-p{font-size:13px;margin-top:6px}
  .note-card .note-f{gap:6px;margin-top:9px}
  .note-card .note-f input,.note-card .note-f button{font-size:14px;min-height:42px}
}
/* under ~350px the square note cannot hold the visible field label as well;
   it stays for screen readers, and the placeholder names the field */
@media (max-width:350px){
  .note-card .note-lb{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .note-card .note-h{font-size:26px}
  .note-card .note-p{font-size:12.5px}
}

/* very narrow phones: the "Next:" link wraps instead of running off the page */
@media (max-width:380px){ .art-end .tlink{white-space:normal} }

/* — numbered steps in an article (the habit-stacking cohort). Same grid as the
   bulleted list: marker + exactly one child. — */
.art-body ol{margin:var(--s3) 0 0;padding:0;list-style:none;counter-reset:step;display:flex;flex-direction:column;gap:12px}
.art-body ol li{
  counter-increment:step;display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;
  font-size:16.5px;line-height:1.6;color:var(--ink-2);
}
.art-body ol li > span{min-width:0}
.art-body ol li::before{
  content:counter(step);display:grid;place-items:center;width:26px;height:26px;margin-top:1px;
  border-radius:50%;background:var(--teal);color:#fff;font-weight:700;font-size:13px;line-height:1;
}
.art-body .art-formula{
  margin-top:var(--s3);padding:14px 18px;border-radius:12px;background:var(--teal-wash);
  color:var(--teal);font-size:18px;line-height:1.5;
}
/* — a real cover image (when a post has one) fills the same frame the gradient did — */
.rcover.has-img,.rfeat-img.has-img{background:var(--teal-deep, #172416)}
.rcover.has-img::after,.rfeat-img.has-img::after{content:none}
.rcover-pic{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* the habit-stacking art: keep the stack of caps in frame at every crop */
.rfeat-img .rcover-pic,.rcover .rcover-pic{object-position:var(--pos,50% 50%)}
/* longer "Next:" titles wrap instead of pushing the page sideways on phones */
@media (max-width:620px){ .art-end .tlink{white-space:normal;min-width:0;max-width:100%} }
/* phones: a 4:5 crop of wide art keeps only a sliver, and the copy covers it.
   With a real image, the art takes the top of the card and fades into the
   same deep teal the scrim ends on, so the subject stays clear of the text. */
@media (max-width:640px){
  .rfeat-img.has-img{background:rgb(10,26,28)}
  .rfeat-img.has-img .rcover-pic{
    height:60%;object-position:55% 35%;
    -webkit-mask-image:linear-gradient(180deg,#000 70%,transparent 100%);
            mask-image:linear-gradient(180deg,#000 70%,transparent 100%);
  }
}
/* a paragraph after a list needs the same breathing room as one after a paragraph */
.art-body ul + p,.art-body ol + p{margin-top:var(--s3)}
.art-body .art-quote + p{margin-top:var(--s5)}
/* the 3 Circles lockup (mark + wordmark) inside article headings like "Where 3 Circles fits" */
.h-brand{display:inline-flex;align-items:center;gap:.3em;vertical-align:-.2em;white-space:nowrap}
.h-brand img{width:1.2em;height:1.2em;display:block}
.h-brand-t{font-family:var(--display);font-weight:500;text-transform:none;letter-spacing:-.012em;color:var(--ink)}
.art-note + .art-note{margin-top:var(--s3)}


/* ===================== SECTIONS (2026-09-28) =====================
   Articles / Books & Podcasts / How to Use 3 Circles replace the old topic rail.
   Same rail look, a touch larger, since these are the page's main sections. */
.rsections button{font-size:13.5px;padding:13px 16px}
.rsec[hidden],.rsearch[hidden]{display:none!important}
.rsec#sec-articles > .rfeat{margin-top:var(--s4)}
.uc{
  margin-top:var(--s4);padding:clamp(32px,5vw,56px) var(--s3);
  text-align:center;border:1.5px dashed var(--rule);border-radius:10px;background:#FFFFFF;
}
.uc-art{display:block;width:min(300px,78%);height:auto;margin:0 auto var(--s3)}
.uc-k{font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-ink)}
.uc-h{
  margin-top:8px;font-family:var(--display);font-weight:500;text-transform:none;
  font-size:clamp(24px,3.2vw,34px);line-height:1.05;letter-spacing:-.012em;color:var(--teal);
}
.uc-p{margin:12px auto 0;max-width:44ch;font-size:16px;line-height:1.5;color:var(--ink-2)}
@media (max-width:820px){
  /* sections first, search under them (the old rail put search on top) */
  .rtools{flex-direction:column}
}
/* read time alone now: centre it on the byline instead of pinning it to the top */
.art-by .rpm{align-self:center}
@media (max-width:440px){
  /* all three sections fit on one line on phones, no sliding needed */
  .rsections button{font-size:12.5px;padding:13px 9px}
}
@media (max-width:380px){
  .rsections button{font-size:11.5px;padding:13px 6px}
}
@media (max-width:330px){
  .rsections{padding-inline:12px!important}
  .rsections button{font-size:11px;padding:13px 5px}
}

/* phones: a little tighter so the button always sits well inside the paper */
@media (max-width:420px){
  .note-card .note-h{font-size:28px}
  .note-card .note-p{font-size:13.5px;margin-top:6px}
  .note-card .note-f{gap:6px;margin-top:9px}
  .note-card .note-f input,.note-card .note-f button{min-height:42px}
}
@media (max-width:380px){
  .note-card .note-in{top:12%}
  .note-card .note-h{font-size:25px}
  .note-card .note-p{font-size:12.5px;margin-top:5px}
  .note-card .note-f{gap:5px;margin-top:8px}
  .note-card .note-f input,.note-card .note-f button{font-size:13.5px;min-height:40px}
}
@media (min-width:821px) and (max-width:1180px){
  /* the note is at its smallest on small laptops: tighten the spacing, not the type */
  .note-card .note-in{top:11.5%}
  .note-card .note-p{margin-top:6px}
  .note-card .note-f{gap:6px;margin-top:9px}
}
@media (max-width:340px){
  .note-card .note-h{font-size:23px}
  .note-card .note-f input,.note-card .note-f button{min-height:40px}
}

/* ===================== BOOKS & PODCASTS (2026-09-28) ===================== */
.bp{margin-top:var(--s4);display:flex;flex-direction:column;gap:clamp(40px,5vw,64px)}
.bp .bp-block{padding:0;margin:0}   /* not a page band: undo the site-wide section padding */
.bp-h{
  margin:0;font-family:var(--display);font-weight:500;text-transform:none;letter-spacing:-.012em;
  font-size:clamp(26px,3vw,34px);line-height:1;color:var(--teal);
}
.bp-sel{display:flex;align-items:center;gap:12px;margin-top:var(--s2)}
.bp-sel-l{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.bp-cat{position:relative}
.bp-catbtn{
  display:inline-flex;align-items:center;justify-content:space-between;gap:14px;
  font-family:var(--sans);font-size:15px;font-weight:600;color:var(--ink);text-align:left;
  background:#FFFFFF;border:1.5px solid #E2E2E0;border-radius:999px;
  padding:10px 16px;min-height:44px;min-width:220px;cursor:pointer;
}
.bp-catval{display:inline-flex;align-items:center;gap:8px}
.bp-catc{flex:none;color:var(--teal);transition:transform .15s}
.bp-catbtn[aria-expanded="true"] .bp-catc{transform:rotate(180deg)}
/* standard focus: the border goes teal (no orange ring) */
.bp-catbtn:hover{border-color:#CFCFCB}
.bp-catbtn:focus,.bp-catbtn:focus-visible,.bp-catbtn[aria-expanded="true"]{outline:none;border-color:var(--teal)}
.bp-mk{width:20px;height:20px;display:block;flex:none}
.bp-menu.bp-catmenu{min-width:100%;width:max-content;max-width:min(320px,calc(100vw - 32px));max-height:min(60vh,420px);overflow-y:auto}
.bp-catmenu:focus{outline:none}
.bp-catmenu li{display:flex;align-items:center;gap:8px;padding:10px 12px 10px 34px;border-radius:8px;font-size:14px;font-weight:600;color:#111;cursor:pointer;position:relative}
.bp-catmenu li:hover,.bp-catmenu li.is-active{background:#F2F2F2}
.bp-catmenu li[aria-selected="true"]::before{content:"";position:absolute;left:13px;top:50%;width:6px;height:11px;margin-top:-8px;border:solid #111;border-width:0 2px 2px 0;transform:rotate(45deg) scale(.9)}
.bp-hrow{display:flex;align-items:center;gap:6px;position:relative}
.bp-sort{position:relative}
.bp-az{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;border-radius:8px;background:none;border:0;color:#000;cursor:pointer;transition:opacity .15s,background .15s}
.bp-az:hover,.bp-az[aria-expanded="true"]{background:rgba(0,0,0,.07)}
.bp-az:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.bp-az b{font-weight:700;color:var(--ink)}
.bp-az svg{flex:none}
.bp-az-c{transition:transform .15s}
.bp-az[aria-expanded="true"] .bp-az-c{transform:rotate(180deg)}
.bp-menu{position:absolute;left:0;top:calc(100% + 8px);z-index:20;min-width:270px;margin:0;padding:6px;list-style:none;background:#fff;border:1px solid #E3E3E3;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.14),0 2px 6px rgba(0,0,0,.06)}
.bp-menu[hidden]{display:none}
.bp-menu button{display:block;width:100%;text-align:left;padding:10px 12px 10px 34px;border:0;border-radius:8px;background:none;font:inherit;cursor:pointer;position:relative;color:#111}
.bp-menu button:hover,.bp-menu button:focus-visible{background:#F2F2F2;outline:none}
.bp-menu button[aria-checked="true"]::before{content:"";position:absolute;left:13px;top:15px;width:6px;height:11px;border:solid #111;border-width:0 2px 2px 0;transform:rotate(45deg) scale(.9)}
.bp-menu-t{display:block;font-size:14px;font-weight:700}
.bp-menu-s{display:block;margin-top:2px;font-size:12px;color:#6B6B6B;line-height:1.35}
.bk-grid{
  list-style:none;margin:var(--s3) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:var(--s3);
}
.bk-cell[hidden]{display:none}
.bk-card{
  display:flex;flex-direction:column;height:100%;text-decoration:none;background:#FFFFFF;
  border:1px solid var(--rc-edge);border-radius:18px;padding:18px 18px 20px;box-shadow:var(--rc-shadow);
  transition:transform var(--rc-time) var(--rc-ease), box-shadow var(--rc-time) var(--rc-ease);
}
.bk-card:hover,.bk-card:focus-visible{transform:translateY(-4px);box-shadow:var(--rc-shadow-up)}
.bk-card:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
/* every cover sits in the same square frame, so books with different trims line up */
.bk-cover{
  display:flex;align-items:center;justify-content:center;background:#F4F4F3;border-radius:12px;
  aspect-ratio:1/1;position:relative;
}
.bk-cover.prod img{box-shadow:none;border-radius:0;height:84%;max-width:84%;filter:drop-shadow(0 9px 10px rgba(23,36,22,.24))}
.bk-cover img{position:absolute;inset:0;margin:auto;display:block;height:80%;width:auto;max-width:80%;object-fit:contain;border-radius:3px;box-shadow:0 10px 22px rgba(23,36,22,.20),0 2px 5px rgba(23,36,22,.10)}
.bk-cat{margin-top:14px;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink)}
.bk-t{margin-top:6px;font-family:var(--display);font-weight:500;font-size:19px;line-height:1.15;color:var(--ink)}
.bk-s{margin-top:4px;font-size:13.5px;line-height:1.4;color:var(--ink-2)}
.bk-a{margin-top:8px;font-size:13.5px;font-weight:600;color:var(--ink-3)}
.bk-go{
  margin-top:auto;padding-top:14px;display:inline-flex;align-items:center;gap:6px;
  font-size:14px;font-weight:700;color:var(--teal);
}
.bk-go svg{width:15px;height:15px;transition:transform var(--rc-time) var(--rc-ease)}
.bk-card:hover .bk-go svg{transform:translate(2px,-2px)}
.bk-empty{margin-top:var(--s3);font-size:15px;color:var(--ink-2)}
.bk-disc{margin-top:var(--s3);font-size:12.5px;color:var(--ink-3)}
.uc-sm{margin-top:var(--s2);padding:clamp(24px,4vw,40px) var(--s3)}
.uc-sm .uc-art{width:min(220px,70%)}

/* Featured badge: the 3 Circles hexagon mark, top-right of a card */
.bk-card{position:relative}
.bk-feat{position:absolute;top:12px;right:12px;z-index:2;display:flex;align-items:center;pointer-events:none}
.bk-feat img{width:50px;height:50px;display:block;filter:drop-shadow(0 3px 5px rgba(23,36,22,.35))}
.bk-feat-t{order:-1;margin-right:-8px;padding:4px 14px 4px 10px;border-radius:999px 0 0 999px;background:var(--gold);color:#fff;font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;box-shadow:0 3px 7px rgba(23,36,22,.22);line-height:1.2;text-shadow:0 1px 1px rgba(0,0,0,.18)}
/* featured (wide) cards: break up the grid rhythm. JS marks a few visible cards .bk-wide */
/* order is set by the layout pass in resources.src.html; dense packing would pull cards back next to each other */
.bk-grid{grid-auto-flow:row}
@media (min-width:700px){
  .bk-cell.bk-wide{grid-column:span 2}
  .bk-wide .bk-card{
    display:grid;grid-template-columns:44% 1fr;column-gap:clamp(18px,2.4vw,30px);align-content:center;align-items:start;
    padding:22px;background:linear-gradient(135deg,#FFFFFF 0%,#EEF3F2 100%);border-color:rgba(45,74,40,.28);
  }
  .bk-wide .bk-cover{grid-column:1;grid-row:1 / span 6;align-self:stretch;aspect-ratio:auto;min-height:280px;background:rgba(255,255,255,.75)}
  .bk-wide .bk-cover img{height:86%;max-width:78%}
  .bk-wide .bk-cover.prod img{height:80%;max-width:84%}
  .bk-wide .bk-card > :not(.bk-cover){grid-column:2}
  .bk-wide .bk-cat{margin-top:0;align-self:end}
  .bk-wide .bk-t{font-size:clamp(22px,2.2vw,28px);line-height:1.1}
  .bk-wide .bk-s{font-size:15px}
  .bk-wide .bk-go{margin-top:0;padding-top:16px;align-self:start}
}
@media (prefers-reduced-motion: reduce){ .bk-card{transition:none} .bk-card:hover,.bk-card:focus-visible{transform:none} }
@media (max-width:560px){ .bp-sel{flex-wrap:wrap;row-gap:10px} .bp-catbtn{flex:1 1 150px;min-width:150px} .bp-sort{position:static;margin-left:0} .bp-menu{left:0;right:auto;min-width:min(290px,calc(100vw - 32px))} }

/* four section tabs (Articles / Books / Podcasts / How to Use 3 Circles):
   keep them on one line on phones */
@media (max-width:440px){ .rsections button{font-size:12px;padding:13px 7px} }
@media (max-width:380px){ .rsections button{font-size:11px;padding:13px 5px} }
@media (max-width:340px){ .rsections{padding-inline:10px!important} .rsections button{font-size:10.5px;padding:13px 4px} }

/* ===================== PROFESSIONAL DIRECTORY (mockup, 2026-09-29; compact cards v2) =====================
   Same tokens as Books: white cards, --rc-edge / --rc-shadow, Archivo names, teal actions.
   Trusted is the only coloured thing: teal-green filter, dark-teal corner badge on the card.
   Rounded-square monogram tiles stand in for logos. */
.dir{margin-top:var(--s4);--tg:#2F7F73;--tg-ink:#1F5F55;--tg-wash:rgba(45,74,40,.11)}
.dir-head{max-width:64ch}
.dir-lede{margin:12px 0 0;font-size:16px;line-height:1.55;color:var(--ink-2)}
.dir-panel{
  margin-top:var(--s4);background:#FFFFFF;border:1px solid var(--rc-edge);border-radius:20px;
  box-shadow:var(--rc-shadow);padding:clamp(14px,2vw,22px);
}
.dir-search{position:relative}
.dir-search input{
  width:100%;box-sizing:border-box;font-family:var(--sans);font-size:16px;color:var(--ink);
  background:#FFFFFF;border:1.5px solid #E2E2E0;border-radius:12px;
  padding:0 52px 0 18px;min-height:52px;-webkit-appearance:none;appearance:none;
}
.dir-search input::placeholder{color:var(--ink-3)}
.dir-search input:focus{outline:none;border-color:var(--teal)}
.dir-search input:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.dir-search input::-webkit-search-cancel-button{display:none}
.dir-search svg{position:absolute;right:18px;top:50%;width:19px;height:19px;transform:translateY(-50%);color:var(--ink-3);pointer-events:none}

.dir-tog{
  display:flex;align-items:center;justify-content:space-between;width:100%;margin-top:6px;
  background:none;border:0;cursor:pointer;font-family:var(--display);font-weight:500;font-size:15px;
  letter-spacing:-.012em;color:var(--teal);padding:14px 6px;min-height:48px;text-align:left;
}
.dir-tog:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:8px}
.dir-tog-i{width:18px;height:18px;flex:none}
.dir-tog[aria-expanded="true"] .dir-tog-i .v{display:none}

.dir-filters{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 20px;align-items:end;
  padding:4px 6px 6px;
}
.dir-filters[hidden]{display:none}
.dir-f{display:flex;flex-direction:column;gap:7px;min-width:0}
.dir-f label{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.dir-f select{
  appearance:none;-webkit-appearance:none;width:100%;box-sizing:border-box;font-family:var(--sans);
  font-size:14.5px;font-weight:600;color:var(--ink);cursor:pointer;min-height:48px;
  background:#FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%234D6769' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center;
  border:1.5px solid #E2E2E0;border-radius:12px;padding:10px 40px 10px 14px;
}
.dir-f select:focus{outline:none;border-color:var(--teal)}
.dir-f select:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

.dir-chk{
  position:relative;display:flex;align-items:center;gap:12px;min-height:48px;box-sizing:border-box;cursor:pointer;
  background:#FFFFFF;border:1.5px solid #E2E2E0;border-radius:12px;padding:0 14px;
  font-family:var(--sans);font-size:14.5px;font-weight:600;color:var(--ink);transition:border-color .15s,background .15s;
}
.dir-chk:hover{border-color:var(--teal)}
.dir-chk input{position:absolute;opacity:0;width:1px;height:1px}
.dir-box{
  flex:none;width:20px;height:20px;border-radius:6px;border:1.75px solid var(--ink-3);background:#FFFFFF;
  display:grid;place-items:center;transition:background .15s,border-color .15s;
}
.dir-box::after{
  content:"";width:10px;height:6px;border:solid #FFFFFF;border-width:0 0 2.4px 2.4px;transform:rotate(-45deg) translate(1px,-1px);opacity:0;
}
.dir-chk input:checked + .dir-box{background:var(--teal);border-color:var(--teal)}
.dir-chk input:checked + .dir-box::after{opacity:1}
.dir-chk input:focus-visible + .dir-box{outline:2px solid var(--gold);outline-offset:3px}
.dir-chk-t{flex:1;min-width:0}
/* Trusted is the one filter with colour: teal green */
.dir-chk:has(#dirTrusted){background:var(--tg-wash);border-color:var(--tg)}
.dir-chk:has(#dirTrusted:checked){background:rgba(45,74,40,.2)}
.dir-chk:has(#dirTrusted) .dir-box{border-color:var(--tg)}
.dir-chk #dirTrusted:checked + .dir-box{background:var(--tg);border-color:var(--tg)}
.dir-ti{flex:none;width:26px;height:26px;border-radius:7px;display:block}
.dir-chk:has(#dirTrusted) .dir-chk-t{color:var(--tg-ink);font-weight:700}
.dir-info{
  position:relative;z-index:1;flex:none;display:grid;place-items:center;width:32px;height:32px;margin-right:-6px;
  background:none;border:0;border-radius:50%;cursor:pointer;color:var(--tg);
}
.dir-info svg{width:20px;height:20px}
.dir-info:hover{background:rgba(45,74,40,.16)}
.dir-info:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
.dir-tip{
  grid-column:1/-1;margin:0;padding:12px 16px;border-radius:12px;background:var(--tg-wash);
  border-left:3px solid var(--tg);font-size:14px;line-height:1.5;color:var(--ink-2);
}
.dir-tip[hidden]{display:none}
.dir-clear{
  min-height:48px;background:none;border:0;cursor:pointer;font-family:var(--display);font-weight:500;
  font-size:15px;color:var(--teal);border-radius:12px;padding:0 14px;
}
.dir-clear:hover{background:var(--teal-wash)}
.dir-clear:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

.dir-foot{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin-top:14px;padding:14px 6px 2px;border-top:1px solid #ECECEA;
}
.dir-count{margin:0;font-size:13.5px;color:var(--ink-3)}
.dir-all{
  background:none;border:0;cursor:pointer;font-family:var(--sans);font-size:14px;font-weight:700;color:var(--teal);
  padding:6px 2px;border-bottom:2px solid var(--gold);line-height:1.2;
}
.dir-all:hover{color:var(--ink)}
.dir-all:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}
.dir-all[hidden]{display:none}

/* ---------- compact cards ---------- */
.dir-grid{
  list-style:none;margin:var(--s3) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:18px;align-items:stretch;
}
.dir-cell[hidden]{display:none}
.dcard{
  position:relative;display:flex;flex-direction:column;height:100%;box-sizing:border-box;background:#FFFFFF;
  border:1px solid var(--rc-edge);border-radius:16px;padding:16px 16px 16px;box-shadow:var(--rc-shadow);
  transition:box-shadow var(--rc-time) var(--rc-ease);
}
.dcard:hover{box-shadow:var(--rc-shadow-up)}
/* corner badge: just the 3 Circles logo in a small icon that overhangs the top-right edge of a trusted
   listing. The Trusted filter carries the same icon, so the logo reads as "trusted" everywhere. */
.dtag{position:absolute;top:-13px;right:14px;display:block;width:34px;height:34px;filter:drop-shadow(0 3px 5px rgba(23,36,22,.28))}
.dtag img{width:34px;height:34px;display:block;border-radius:9px}
.dhead{display:flex;align-items:center;gap:12px}
/* rounded-square monogram tile: stands in for a logo until a listing supplies one */
.dmono{
  flex:none;width:46px;height:46px;border-radius:12px;display:grid;place-items:center;
  font-family:var(--display);font-weight:500;font-size:16px;letter-spacing:-.012em;color:var(--cream);
  background:var(--mono-bg,var(--teal));
}
.dmono.m-gold{--mono-bg:var(--gold);color:#3A2600}
.dmono.m-deep{--mono-bg:var(--deep)}
.dmono.m-red{--mono-bg:var(--red)}
.dmono.m-teal{--mono-bg:var(--teal)}
.dmono img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.dtitle{min-width:0}
/*dkind removed*/.dkind-unused{margin:0;font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--gold-ink);line-height:1.25}
.dname{margin:3px 0 0;font-family:var(--display);font-weight:500;font-size:19px;line-height:1.15;color:var(--ink)}
.ddesc{
  margin:12px 0 0;font-size:14px;line-height:1.5;color:var(--ink-2);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden;
}
.dcard.open .ddesc{display:block;-webkit-line-clamp:unset;line-clamp:unset;overflow:visible}
.dmore-btn{
  align-self:flex-start;display:inline-flex;align-items:center;gap:5px;margin:6px 0 0 -2px;padding:4px 2px;
  background:none;border:0;cursor:pointer;font-family:var(--sans);font-size:13.5px;font-weight:700;color:var(--teal);
}
.dmore-btn svg{width:14px;height:14px;transition:transform .2s ease}
.dcard.open .dmore-btn svg{transform:rotate(180deg)}
.dmore-btn:hover{color:var(--ink)}
.dmore-btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:4px}
.dmore{margin:8px 0 0;padding:12px 0 0;border-top:1px solid #ECECEA;list-style:none;display:flex;flex-direction:column;gap:7px;font-size:13.5px;line-height:1.45;color:var(--ink-2)}
.dmore[hidden]{display:none}
.dmore b{font-weight:700;color:var(--ink)}
.dchips{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-top:12px}
.dloc{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:600;color:var(--ink-3);margin-right:2px}
.dloc svg{width:14px;height:14px;flex:none}
.dpill{
  font-size:11px;font-weight:700;line-height:1;padding:6px 10px;border-radius:999px;
  background:#F1F1EF;color:var(--ink-2);
}
.dact{display:flex;gap:8px;margin-top:auto;padding-top:14px}
.dbtn{
  flex:1 1 0;min-width:0;display:inline-flex;align-items:center;justify-content:center;text-align:center;
  min-height:42px;padding:0 12px;border-radius:10px;text-decoration:none;box-sizing:border-box;
  font-family:var(--sans);font-size:14px;font-weight:700;
  color:var(--teal);background:#FFFFFF;border:1.5px solid var(--rule-2);
  transition:background .15s,border-color .15s,color .15s;
}
.dbtn:hover{border-color:var(--teal);background:var(--teal-wash)}
.dbtn.pri{background:var(--teal);border-color:var(--teal);color:#FFFFFF}
.dbtn.pri:hover{background:#41513B;border-color:#41513B}
.dbtn:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.dir-empty{
  margin-top:var(--s4);padding:var(--s4);border:1px dashed var(--rule-2);border-radius:14px;
  text-align:center;color:var(--ink-2);font-size:15px;
}
.dir-empty[hidden]{display:none}
.dir-note{margin:var(--s4) 0 0;max-width:72ch;font-size:12.5px;line-height:1.55;color:var(--ink-3)}
.dir-mock{
  margin:0 0 var(--s3);padding:10px 14px;border:1.5px dashed var(--rule-2);border-radius:10px;
  font-size:13px;color:var(--ink-2);background:var(--surf-b);
}
.dir-mock b{color:var(--ink)}
@media (max-width:900px){ .dir-filters{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){
  .dir-filters{grid-template-columns:minmax(0,1fr)}
  .dir-clear{justify-self:start}
  .dname{font-size:18px}
}
@media (prefers-reduced-motion: reduce){ .dcard,.dmore-btn svg{transition:none} }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .dir{--tg:#5BB8A8;--tg-ink:#8FD6C8;--tg-wash:rgba(126,148,117,.14)}
  :root:not([data-theme="light"]) .dir-panel,
  :root:not([data-theme="light"]) .dcard,
  :root:not([data-theme="light"]) .dir-search input,
  :root:not([data-theme="light"]) .dir-f select,
  :root:not([data-theme="light"]) .dir-chk,
  :root:not([data-theme="light"]) .dbtn:not(.pri){background-color:var(--card)}
  :root:not([data-theme="light"]) .dpill{background:rgba(255,255,255,.08)}
}

/* ---- Contact now modal ---- */
html.dm-lock{overflow:hidden}
.dir.is-detail > :not(.dir-detail):not(.dmodal){display:none}
.dmodal{position:fixed;inset:0;z-index:200;display:flex;align-items:flex-start;justify-content:center;overflow-y:auto;padding:clamp(16px,5vh,48px) 16px;background:rgba(16,26,15,.62)}
.dmodal[hidden]{display:none}
.dmodal-card{position:relative;width:100%;max-width:760px;margin:auto;background:#fff;border-radius:24px;padding:clamp(22px,3.4vw,32px);box-shadow:0 30px 80px rgba(16,26,15,.4)}
.dmodal-x{position:absolute;top:18px;right:18px;width:40px;height:40px;border:0;border-radius:50%;background:var(--bg-2);color:var(--ink);cursor:pointer;display:grid;place-items:center}
.dmodal-x svg{width:16px;height:16px}
.dmodal-x:hover{background:var(--rule)}
.dm-eyebrow{margin:0;font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--teal)}
.dm-h{margin:8px 0 0;padding-right:48px;font-family:var(--display);font-weight:500;font-size:clamp(23px,3vw,30px);line-height:1.1;letter-spacing:-.012em;color:#172416}
.dm-lede{margin:10px 0 0;font-size:14.5px;line-height:1.5;color:var(--ink-2)}
.dm-row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:20px}
.dm-f{display:flex;flex-direction:column;gap:8px;min-width:0}
.dm-full{margin-top:18px}
.dm-f label{font-weight:700;font-size:15px;color:#172416}
.dm-f input,.dm-f textarea{
  font:inherit;font-size:16px;color:var(--ink);background:#fff;border:1.5px solid var(--rule-2);border-radius:14px;
  padding:14px 16px;width:100%;min-height:52px;
}
.dm-f textarea{min-height:104px;resize:vertical}
.dm-f input:focus,.dm-f textarea:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(45,74,40,.18)}
.dm-auth{display:flex;gap:12px;align-items:flex-start;margin-top:18px;font-size:13.5px;line-height:1.5;color:var(--ink);cursor:pointer}
.dm-auth input{flex:none;width:18px;height:18px;margin:2px 0 0;accent-color:var(--teal)}
.dm-auth a{color:var(--teal);font-weight:700}
.dm-warn{margin:14px 0 0;font-size:12.5px;line-height:1.5;color:var(--ink-3)}
.dm-warn b{color:var(--ink-2)}
.dm-err{margin:12px 0 0;font-size:14px;font-weight:600;color:var(--red)}
.dm-err[hidden]{display:none}
.dm-send{
  display:block;width:100%;margin-top:22px;min-height:52px;border:0;border-radius:14px;cursor:pointer;
  background:var(--teal);color:var(--cream);font-family:var(--sans);font-weight:700;font-size:16px;
  transition:background-color .15s ease;
}
.dm-send:hover{background:#41513B}
.dm-send:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.dm-done .dm-lede b{color:var(--ink)}
@media (max-width:640px){ .dm-row{grid-template-columns:1fr} .dm-h{padding-right:44px} }

/* ---- Learn more: full listing page ---- */
.dir-detail[hidden]{display:none}
.dd-back{display:inline-flex;align-items:center;gap:8px;background:none;border:0;cursor:pointer;padding:10px 2px;min-height:44px;font:inherit;font-weight:700;font-size:15px;color:var(--teal)}
.dd-back svg{width:18px;height:18px}
.dd-back:hover span{text-decoration:underline;text-underline-offset:3px}
.dd-back:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:6px}
.dd-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,400px);gap:0;margin-top:12px}
.dd-main{padding-right:clamp(20px,4vw,56px);border-right:1px solid var(--rule)}
.dd-side{padding-left:clamp(20px,4vw,56px)}
.dd-name{font-family:var(--display);font-weight:500;font-size:clamp(34px,5.2vw,60px);line-height:.98;letter-spacing:-.012em;text-transform:none;color:var(--teal);outline:none;overflow-wrap:anywhere}
.dd-kind{margin:14px 0 0;font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-ink)}
.dd-mono{width:88px;height:88px;border-radius:20px;font-size:30px;margin-top:22px}
.dd-desc{margin:22px 0 0;font-size:17px;line-height:1.65;color:var(--ink);max-width:62ch}
.dd-cta{margin-top:24px}
.dd-cta .dbtn{display:inline-flex;padding-inline:30px;text-decoration:none}
.dd-about{margin-top:32px;padding-top:24px;border-top:1px solid var(--rule)}
.dd-about h3,.dd-rel h3,.dd-foot h3{font-family:var(--display);font-weight:500;font-size:13px;letter-spacing:-.012em;text-transform:none;color:var(--ink)}
.dd-about p{margin:10px 0 12px;font-size:15px;line-height:1.55;color:var(--ink-2);max-width:56ch}
.dd-trust{display:flex;align-items:center;gap:16px;margin-bottom:22px}
.dd-trust img{width:84px;height:84px;border-radius:20px;flex:none;filter:drop-shadow(0 6px 12px rgba(23,36,22,.25))}
.dd-trust p{margin:0;display:flex;flex-direction:column;gap:2px;font-size:13.5px;color:var(--ink-2)}
.dd-trust b{font-family:var(--display);font-size:16px;color:var(--tg-ink)}
.dd-facts{margin:0}
.dd-r{display:grid;grid-template-columns:150px 1fr;gap:16px;padding:13px 0;border-top:1px solid var(--rule)}
.dd-r:last-child{border-bottom:1px solid var(--rule)}
.dd-r dt{font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.dd-r dd{margin:0;font-size:15px;line-height:1.5;color:var(--ink)}
.dd-web{display:inline;font-weight:700;color:var(--teal);text-decoration:underline;text-underline-offset:3px}
.dd-web svg,.dir-detail .tlink svg{width:14px;height:14px;flex:none}
.dd-web svg{display:inline-block;vertical-align:-2px;margin-left:5px}
.dd-rel{margin-top:40px;padding-top:26px;border-top:1px solid var(--rule)}
.dd-rel ul{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.dd-chip{font:inherit;font-size:14px;font-weight:600;color:var(--teal);background:var(--teal-wash);border:1px solid transparent;border-radius:999px;padding:9px 16px;min-height:40px;cursor:pointer}
.dd-chip:hover{border-color:var(--teal)}
.dd-chip:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.dd-foot{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:32px;background:var(--bg-2);border-radius:16px}
.dd-foot > div{padding:24px clamp(18px,3vw,32px)}
.dd-foot > div + div{border-left:1px solid var(--rule)}
.dd-foot p{margin:10px 0 0;font-size:14px;line-height:1.55;color:var(--ink-2)}
.dd-lnk{display:block;margin-top:10px;font-size:14px;font-weight:700;color:var(--teal);text-decoration:underline;text-underline-offset:3px}
@media (max-width:820px){
  .dd-grid{grid-template-columns:1fr}
  .dd-main{padding-right:0;border-right:0;padding-bottom:28px}
  .dd-side{padding-left:0;border-top:1px solid var(--rule);padding-top:28px}
  .dd-r{grid-template-columns:1fr;gap:4px}
  .dd-foot{grid-template-columns:1fr}
  .dd-foot > div + div{border-left:0;border-top:1px solid var(--rule)}
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .dmodal-card{background:var(--card)}
  :root:not([data-theme="light"]) .dm-h,:root:not([data-theme="light"]) .dm-f label{color:var(--ink)}
  :root:not([data-theme="light"]) .dm-f input,:root:not([data-theme="light"]) .dm-f textarea{background:var(--bg);color:var(--ink)}
  :root:not([data-theme="light"]) .dmodal-x{background:var(--bg-2);color:var(--ink)}
}
:root[data-theme="dark"] .dmodal-card{background:var(--card)}
:root[data-theme="dark"] .dm-h,:root[data-theme="dark"] .dm-f label{color:var(--ink)}
:root[data-theme="dark"] .dm-f input,:root[data-theme="dark"] .dm-f textarea{background:var(--bg);color:var(--ink)}

/* books sort pill + category select in dark mode */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .bp-az{background:none;color:#fff}
  :root:not([data-theme="light"]) .bp-az:hover,:root:not([data-theme="light"]) .bp-az[aria-expanded="true"]{background:rgba(255,255,255,.12)}
  :root:not([data-theme="light"]) .bp-catbtn{background-color:var(--card);border-color:var(--rule);color:var(--ink)}
}
:root[data-theme="dark"] .bp-az{background:none;color:#fff}
:root[data-theme="dark"] .bp-az:hover,:root[data-theme="dark"] .bp-az[aria-expanded="true"]{background:rgba(255,255,255,.12)}
:root[data-theme="dark"] .bp-catbtn{background-color:var(--card);border-color:var(--rule);color:var(--ink)}

/* sort menu: neutral system colours in dark mode too */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .bp-menu{background:#2C2C2E;border-color:#48484A;box-shadow:0 10px 30px rgba(0,0,0,.5)}
  :root:not([data-theme="light"]) .bp-menu button{color:#F2F2F2}
  :root:not([data-theme="light"]) .bp-catmenu li{color:#F2F2F2}
  :root:not([data-theme="light"]) .bp-catmenu li:hover,:root:not([data-theme="light"]) .bp-catmenu li.is-active{background:#3A3A3C}
  :root:not([data-theme="light"]) .bp-catmenu li[aria-selected="true"]::before{border-color:#F2F2F2}
  :root:not([data-theme="light"]) .bp-menu button:hover,:root:not([data-theme="light"]) .bp-menu button:focus-visible{background:#3A3A3C}
  :root:not([data-theme="light"]) .bp-menu button[aria-checked="true"]::before{border-color:#F2F2F2}
  :root:not([data-theme="light"]) .bp-menu-s{color:#A1A1A6}
}
:root[data-theme="dark"] .bp-menu{background:#2C2C2E;border-color:#48484A;box-shadow:0 10px 30px rgba(0,0,0,.5)}
:root[data-theme="dark"] .bp-menu button{color:#F2F2F2}
:root[data-theme="dark"] .bp-catmenu li{color:#F2F2F2}
:root[data-theme="dark"] .bp-catmenu li:hover,:root[data-theme="dark"] .bp-catmenu li.is-active{background:#3A3A3C}
:root[data-theme="dark"] .bp-catmenu li[aria-selected="true"]::before{border-color:#F2F2F2}
:root[data-theme="dark"] .bp-menu button:hover,:root[data-theme="dark"] .bp-menu button:focus-visible{background:#3A3A3C}
:root[data-theme="dark"] .bp-menu button[aria-checked="true"]::before{border-color:#F2F2F2}
:root[data-theme="dark"] .bp-menu-s{color:#A1A1A6}
/* source line at the foot of an article */
.art-body .art-sources{margin-top:var(--s4);font-size:14px;line-height:1.6;color:var(--ink-3, var(--ink-2))}
.art-body .art-sources a{color:var(--teal);text-decoration:underline;text-underline-offset:2px}

/* ---- honeycomb band behind pull quotes (decorative only) ---- */
.art{position:relative;isolation:isolate;overflow:hidden}
.art-quote{position:relative}

/* article top video: poster, white play disc with a red triangle, native controls once started */
.art-video{position:relative;margin-top:var(--s4);aspect-ratio:2.5/1;border-radius:16px;overflow:hidden;background:var(--teal-deep,#172416);box-shadow:0 10px 30px rgba(23,36,22,.14);isolation:isolate;transform:translateZ(0)}
.art-video video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:var(--teal-deep,#172416)}
.art-vplay{position:absolute;inset:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;border:0;padding:0;margin:0;background:linear-gradient(180deg,rgba(23,36,22,0) 45%,rgba(23,36,22,.28));cursor:pointer;transition:opacity .25s;-webkit-tap-highlight-color:transparent;-webkit-appearance:none;appearance:none}
.art-vdisc{width:clamp(56px,10vw,104px);aspect-ratio:1;border-radius:50%;background:#fff;box-shadow:0 10px 32px rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;transition:transform .18s cubic-bezier(.2,.7,.2,1);
  will-change:transform;backface-visibility:hidden;-webkit-backface-visibility:hidden;transform:translateZ(0) scale(1);pointer-events:none}
@media (hover:hover){.art-vplay:hover .art-vdisc{transform:translateZ(0) scale(1.06)}}
.art-vplay:focus-visible .art-vdisc{transform:translateZ(0) scale(1.06)}
@media (prefers-reduced-motion:reduce){.art-vdisc{transition:none}}
.art-vplay:focus-visible{outline:3px solid var(--gold);outline-offset:-6px}
.art-vplay svg{width:42%;height:42%;fill:#FF0000;margin-left:7%;pointer-events:none;display:block}
.art-video.playing .art-vplay{opacity:0;pointer-events:none}

/* "includes a video" badge, bottom right of a card/feature cover */
.rvid{position:absolute;right:10px;bottom:10px;z-index:3;display:inline-flex;align-items:center;gap:6px;padding:6px 12px 6px 9px;border-radius:999px;background:#fff;color:var(--teal-deep,#172416);font:700 12px/1 'Archivo',Inter,system-ui,sans-serif;letter-spacing:.02em;box-shadow:0 4px 14px rgba(0,0,0,.28);pointer-events:none}
.rvid svg{width:14px;height:14px;fill:#FF0000;flex:none}
.rfeat-img .rvid{right:16px;bottom:16px}
.rcover .rvid svg,.rfeat-img .rvid svg{position:static;inset:auto;width:14px;height:14px;max-width:none;opacity:1;color:#FF0000;fill:#FF0000;display:block;transform:none}


/* Ascension theme overrides */
h1,h2,h3,.h-sec,.rhero h1,.crisis h3,.crisis .num{text-transform:none!important;font-weight:500!important;letter-spacing:-.012em!important;font-family:var(--display)}
.rhero h1{color:#22321F}
.note-img{filter:saturate(.3) sepia(.25) brightness(1.02)}


@view-transition{navigation:auto}
@keyframes t30in{from{opacity:0}to{opacity:1}}
body{animation:t30in .6s ease both;padding-top:68px}
.sn{position:fixed;inset:0 0 auto 0;z-index:1000;view-transition-name:sitenav;font-family:'Public Sans',system-ui,sans-serif;line-height:1.4}
.sn::before{content:"";position:absolute;left:0;right:0;top:0;bottom:-40px;z-index:-1;pointer-events:none;opacity:0;transition:opacity .4s;background:linear-gradient(to bottom,#fff 0,#fff 55%,rgba(255,255,255,0) 100%)}
.sn.solid::before{opacity:1}
.snw{display:flex;align-items:center;justify-content:space-between;height:68px;padding:0 clamp(20px,5vw,72px)}
.snb{display:flex;align-items:center;text-decoration:none}.snb img{display:block;height:40px;width:auto}
.sn nav{display:flex;align-items:center;gap:clamp(14px,2.2vw,32px);font-size:.9rem}
.sn nav a{text-decoration:none;color:#22321F;opacity:.82;transition:opacity .3s}.sn nav a:hover{opacity:1}
.sn nav a[aria-current]{opacity:1;font-weight:600}
.sn nav .snbtn{display:inline-flex;align-items:center;padding:.6rem 1.2rem;border-radius:12px;font-size:.88rem;font-weight:600;opacity:1;background:#22321F;color:#FBF8F0}
.snst{display:flex;align-items:center;gap:8px}
.sn nav .snst a{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;border:1.5px solid #22321F;opacity:.85;transition:transform .3s,background .3s,color .3s}
.sn nav .snst a:hover{opacity:1;transform:translateY(-2px);background:#22321F;color:#FBF8F0}
.snst svg{width:17px;height:17px;fill:currentColor}
@media(max-width:880px){.sn nav>a:not(.snbtn){display:none}.sn nav{gap:10px}}
@media(max-width:520px){.snb img{height:32px}}
.sfoot{background:#fff;color:#22321F;padding:44px 0 36px;font-size:.92rem;font-family:'Public Sans',system-ui,sans-serif;line-height:1.65}
.sfoot-w{max-width:1080px;margin:0 auto;padding:0 clamp(20px,5vw,48px);display:flex;flex-wrap:wrap;justify-content:space-between;gap:24px}
.sfoot a{opacity:.85;text-decoration:none;margin-right:1.4rem;display:inline-block;margin-bottom:.5rem;color:inherit}.sfoot a:hover{opacity:1;text-decoration:underline}
.sfoot p{margin:0;opacity:.6;font-size:.82rem;max-width:62ch;flex-basis:100%}

.rby-logo{width:34px;height:34px;flex:none;display:block;box-sizing:border-box;object-fit:contain;padding:7px 6px;background:#fff;border:1px solid rgba(45,74,40,.18);border-radius:50%}
.rfeat-logo{width:34px;height:34px;flex:none;display:block;box-sizing:border-box;object-fit:contain;padding:7px 6px;background:#fff;border-radius:50%}