/* Essential — one design system for every page.
   Time and loops: a shared sky, cut-paper shapes used as windows onto photography,
   and one set of type, buttons, forms and cards from the home page to the account.
   Everything here is safe under the private pages' content security policy:
   no inline styles, self-hosted fonts, same-origin images only. */

/* ------------------------------------------------------------------ fonts */
@font-face { font-family: "Fraunces"; src: url("brand/fonts/Fraunces-Roman.woff2") format("woff2"); font-weight: 250 650; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("brand/fonts/Fraunces-Italic.woff2") format("woff2"); font-weight: 250 650; font-style: italic; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("brand/fonts/InstrumentSans-Roman.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("brand/fonts/InstrumentSans-Italic.woff2") format("woff2"); font-weight: 400 700; font-style: italic; font-display: swap; }

/* ----------------------------------------------------------------- tokens */
:root {
  --paper: #f1f0eb;
  --paper-raised: #fafaf7;
  --paper-shade: #e7e5db;
  --sage: #eff4ea;
  --sage-deep: #dce3d6;
  --green: #3e5c49;
  --green-deep: #344833;
  --forest: #25362b;
  --cream: #f6f1e4;
  --ink: #1d1f1c;
  --ink-soft: #3a3f38;
  --muted: #596051;
  --rule: #d9dcd4;
  --rule-strong: #7c8876;
  --sun-paper: #ead9ac;
  --clay: #c2a47c;
  --blush: #ead9d0;
  --danger: #8d342b;
  --nutrition: #efb91e;
  --exercise: #ce452e;
  --sleep: #2289aa;
  --stress: #23724d;
  --accent: var(--green);

  --pad-x: max(clamp(20px, 6.6vw, 96px), calc(50vw - 664px));
  --gap: clamp(16px, 2.2vw, 32px);
  --section-y: clamp(64px, 8.4vw, 128px);

  --display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --body: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;

  --ease: cubic-bezier(.2, .8, .2, 1);
  --cut: polygon(4% 0, 94% 3%, 100% 22%, 98% 84%, 93% 100%, 2% 96%, 0 74%, 1% 16%);
  --cut-chip: polygon(1.5% 6%, 30% 0, 98.5% 4%, 100% 50%, 99% 96%, 60% 100%, 1% 95%, 0 46%);
  --cut-card: polygon(0 1.4%, 36% 0, 99.3% .9%, 100% 44%, 99.5% 99.1%, 54% 100%, .6% 99.3%, .2% 58%);
  --cut-card-b: polygon(.6% .4%, 58% 1.2%, 100% 0, 99.4% 52%, 100% 99%, 40% 99.4%, 0 100%, .4% 40%);
  --tear-a: polygon(0.0% 18%,2.2% 39%,4.5% 34%,5.9% 9%,9.2% 19%,10.5% 92%,13.0% 43%,15.2% 62%,16.9% 35%,20.1% 52%,22.1% 36%,23.3% 72%,26.2% 21%,27.6% 81%,30.4% 38%,33.1% 68%,35.4% 25%,37.4% 45%,39.7% 45%,40.7% 19%,43.1% 49%,45.6% 61%,47.5% 29%,49.8% 37%,52.3% 33%,54.9% 65%,57.1% 44%,59.4% 64%,60.4% 44%,63.7% 84%,65.3% 38%,67.0% 78%,69.7% 20%,71.1% 80%,74.6% 12%,76.5% 42%,77.8% 20%,80.8% 81%,82.0% 34%,84.1% 68%,86.7% 45%,89.8% 50%,92.0% 21%,92.9% 58%,95.0% 16%,97.7% 59%,100.0% 15%,100% 100%,0 100%);
  --tear-b: polygon(0.0% 27%,2.7% 86%,5.2% 29%,8.0% 24%,10.5% 34%,13.6% 16%,15.5% 12%,18.9% 66%,20.4% 49%,24.3% 63%,26.5% 15%,28.3% 52%,31.0% 16%,33.8% 11%,36.8% 27%,40.0% 52%,42.3% 29%,45.0% 46%,47.1% 50%,50.7% 79%,52.9% 21%,54.9% 32%,57.3% 40%,60.4% 79%,63.0% 48%,66.3% 8%,68.0% 46%,71.0% 90%,73.5% 11%,76.5% 73%,78.6% 12%,81.3% 89%,84.6% 13%,86.5% 16%,88.9% 41%,91.7% 55%,94.7% 16%,97.7% 19%,100.0% 35%,100% 100%,0 100%);
  --hill-far-shape: polygon(0.0% 62.0%,6.0% 56.8%,12.0% 46.8%,18.0% 41.3%,26.0% 47.9%,34.0% 53.1%,40.0% 45.0%,46.0% 24.7%,52.0% 17.8%,58.0% 17.4%,64.0% 11.2%,70.0% 9.8%,78.0% 15.3%,86.0% 25.9%,93.0% 18.9%,100% 14.0%,100% 100%,0 100%);
  --hill-near-shape: polygon(0.0% 78.0%,8.0% 80.9%,16.0% 83.6%,22.0% 76.6%,28.0% 67.4%,34.0% 58.4%,42.0% 45.0%,50.0% 31.3%,56.0% 24.7%,62.0% 22.2%,70.0% 35.4%,78.0% 46.5%,85.3% 52.3%,92.7% 62.0%,100% 66.0%,100% 100%,0 100%);
  --grain: url("brand/film/grain.svg");
}

/* ------------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--fn-height, 84px) + 20px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; min-height: 100vh; overflow-x: clip;
  background: var(--paper); color: var(--ink);
  font: 400 17px/1.6 var(--body); font-kerning: normal;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
}
img, svg, video { max-width: 100%; }
img { height: auto; }
[hidden] { display: none !important; }
::selection { background: var(--sun-paper); color: var(--ink); }
:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 16px; top: -80px; z-index: 200; padding: 12px 18px; background: var(--ink); color: var(--paper-raised); font: 600 15px/1 var(--body); text-decoration: none; transition: top .2s; }
.skip-link:focus { top: 12px; }
#main:focus { outline: none; }
.page { position: relative; }
main { display: block; }

/* ------------------------------------------------------------------- type */
h1, h2, h3, h4, .display {
  margin: 0; color: inherit;
  font-family: var(--display); font-weight: 330; font-optical-sizing: auto;
  line-height: 1.03; letter-spacing: -.032em; text-wrap: balance;
}
h1 em, h2 em, h3 em, .alt { font-style: italic; font-weight: 300; letter-spacing: -.036em; }
.t-xl { font-size: clamp(44px, 7.6vw, 124px); line-height: .96; letter-spacing: -.034em; font-weight: 320; }
.t-l { font-size: clamp(36px, 4.7vw, 72px); line-height: 1; letter-spacing: -.036em; }
.t-m { font-size: clamp(28px, 3vw, 44px); line-height: 1.06; letter-spacing: -.028em; font-weight: 340; }
.t-s { font-size: clamp(21px, 1.85vw, 27px); line-height: 1.14; letter-spacing: -.02em; font-weight: 370; }
.t-xs { font-size: 19px; line-height: 1.2; letter-spacing: -.014em; font-weight: 400; }
p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
.lede { font-family: var(--display); font-size: clamp(20px, 1.72vw, 25px); line-height: 1.36; letter-spacing: -.012em; font-weight: 360; }
.small, small { font-size: 14px; line-height: 1.5; }
.muted { color: var(--muted); }
.kicker, .editorial-kicker, .eyebrow, .label {
  display: inline-flex; align-items: center; gap: 10px; margin: 0;
  font: 600 12px/1.25 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.kicker--dot::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .22em; }
.prose a, .evidence-list a, .safety a { text-decoration-color: var(--rule-strong); transition: text-decoration-color .2s, color .2s; }
.prose a:hover, .evidence-list a:hover, .safety a:hover { color: var(--green); text-decoration-color: currentColor; }
.prose > * + * { margin-top: 1em; }
.prose p { margin-bottom: 0; max-width: 62ch; }
.link, .editorial-link {
  display: inline-flex; align-items: baseline; gap: 6px;
  font: 600 15px/1.3 var(--body); color: var(--accent-ink, var(--green-deep)); text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-bottom: 3px;
  transition: background-size .35s var(--ease), color .2s;
}
.link:hover, .editorial-link:hover { background-size: 0 1px; background-position: 100% 100%; }
.link span[aria-hidden], .editorial-link span[aria-hidden] { display: inline-block; transition: transform .35s var(--ease); }
.link:hover span[aria-hidden], .editorial-link:hover span[aria-hidden] { transform: translate(2px, -2px); }

/* ---------------------------------------------------------------- buttons */
/* One cut-paper button everywhere. Primary: .btn / .btn-primary / .button / submit.
   Soft: .btn-ghost / .btn--soft / plain type="button". Quiet: reset. */
.btn, .btn-primary, .btn-ghost, .button, main button, .consent button {
  --btn-bg: var(--green); --btn-ink: #fff; --btn-hover: var(--green-deep);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; margin: 0; padding: 14px 26px; border: 0; border-radius: 0;
  font: 600 15px/1.2 var(--body); letter-spacing: .004em; text-align: center; text-decoration: none; white-space: normal;
  color: var(--btn-ink); background: var(--btn-bg); clip-path: var(--cut); cursor: pointer;
  -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent;
  transition: background-color .25s ease, color .25s ease, transform .4s var(--ease);
}
.btn:hover, .btn-primary:hover, .btn-ghost:hover, .button:hover, main button:hover { background: var(--btn-hover); transform: translateY(-1px) rotate(-.5deg); }
.btn:active, .btn-primary:active, .btn-ghost:active, .button:active, main button:active { transform: translateY(1px); }
/* :focus, not only :focus-visible: a focused button always shows where it is, however it was reached. */
.btn:focus, .btn-primary:focus, .btn-ghost:focus, .button:focus, main button:focus { outline: 2px solid var(--btn-ink); outline-offset: -6px; }
.btn span[aria-hidden], .btn-primary span[aria-hidden], .btn-ghost span[aria-hidden], .button span[aria-hidden] { display: inline-block; transition: transform .4s var(--ease); }
.btn:hover span[aria-hidden], .btn-primary:hover span[aria-hidden], .btn-ghost:hover span[aria-hidden], .button:hover span[aria-hidden] { transform: translate(2px, -2px); }
.btn--soft, .btn-ghost, main button[type="button"]:not(.btn):not(.button) { --btn-bg: var(--sage-deep); --btn-ink: var(--green-deep); --btn-hover: #cbd6c2; }
.section--sage .btn-ghost, .section--sage .btn--soft, .section--sage main button[type="button"]:not(.btn):not(.button) { --btn-bg: #d3dccb; --btn-hover: #c3cfba; }
.btn--quiet, main button[type="reset"] { --btn-bg: transparent; --btn-ink: var(--ink); --btn-hover: var(--paper-shade); clip-path: none; padding-inline: 14px; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.btn--quiet:hover, main button[type="reset"]:hover { transform: none; }
.btn--quiet:focus, main button[type="reset"]:focus { outline-color: var(--green); outline-offset: 2px; }
.btn--small { min-height: 42px; padding: 10px 18px; font-size: 14px; }
.btn[disabled], main button[disabled] { opacity: .5; cursor: not-allowed; transform: none; }
.actions, .hero-actions, .btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; }

/* ----------------------------------------------------------------- layout */
.section, .editorial-section { position: relative; padding: var(--section-y) var(--pad-x); }
.section--tight { padding-block: clamp(48px, 6vw, 88px); }
.section--sage { background: var(--sage); }
.section--raised { background: var(--paper-raised); }
.section--deep {
  --ink: #f6f1e4; --ink-soft: #e4e2d2; --muted: #b7c3b3; --rule: rgba(246, 241, 228, .2); --rule-strong: rgba(246, 241, 228, .5);
  --paper-raised: rgba(246, 241, 228, .07); --accent-ink: #f6f1e4; --accent: var(--sun-paper);
  background: var(--forest); color: var(--ink);
}
.section--deep::before { content: ""; position: absolute; inset: 0; background: var(--grain); opacity: .5; mix-blend-mode: soft-light; pointer-events: none; }
.section--deep > * { position: relative; }
.section--deep :focus-visible { outline-color: var(--cream); }
.section-head, .editorial-head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px;
  margin-bottom: clamp(28px, 4vw, 56px); padding-bottom: 14px; border-bottom: 1px solid var(--rule);
}
.split, .editorial-split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px var(--gap); align-items: start; }
.split > :first-child, .editorial-split > :first-child { grid-column: 1 / span 6; }
.split > :nth-child(2), .editorial-split > :nth-child(2) { grid-column: 8 / span 5; }
.split--even > :first-child { grid-column: 1 / span 6; }
.split--even > :nth-child(2) { grid-column: 7 / span 6; }
.editorial-copy > * + * { margin-top: 1em; }
.editorial-copy p { margin-bottom: 0; max-width: 60ch; }
.editorial-lead { font-family: var(--display); font-size: clamp(20px, 1.72vw, 25px); line-height: 1.36; letter-spacing: -.012em; font-weight: 360; }
.editorial-caption, .caption { font-size: 13.5px; line-height: 1.55; color: var(--muted); max-width: 70ch; }
.tear { position: absolute; left: 0; right: 0; height: 22px; pointer-events: none; z-index: 2; }
.tear--top { top: -21px; background: var(--tear-bg, var(--paper)); clip-path: var(--tear-a); }
.tear--bottom { bottom: -21px; background: var(--tear-bg, var(--paper)); clip-path: var(--tear-b); transform: scaleY(-1); }

/* ------------------------------------------------- scroll entrances, drift */
.will-reveal { opacity: 0; transform: translateY(26px) rotate(.4deg); }
.will-reveal.is-in { opacity: 1; transform: none; transition: opacity .9s var(--ease), transform 1.1s var(--ease); }
[data-drift] { transform: translate3d(0, var(--drift, 0px), 0) rotate(var(--turn, 0deg)); will-change: transform; }

/* ------------------------------------------------- cut paper + photographs */
.cut { --cut-mask: url("brand/shapes/bowl.svg"); --cut-ratio: 210 / 116; position: relative; display: block; width: 100%; aspect-ratio: var(--cut-ratio); filter: drop-shadow(0 12px 14px rgba(29, 31, 28, .16)); }
.cut::before { content: ""; position: absolute; inset: 0; background: var(--cut-back, var(--sun-paper)); -webkit-mask: var(--cut-mask) center / contain no-repeat; mask: var(--cut-mask) center / contain no-repeat; transform: translate(5%, 7%) rotate(-5deg); transition: transform .8s var(--ease); }
.cut-photo { position: absolute; inset: 0; display: block; overflow: hidden; -webkit-mask: var(--cut-mask) center / contain no-repeat; mask: var(--cut-mask) center / contain no-repeat; }
.cut-photo > img { position: absolute; inset: -12%; width: 124%; height: 124%; max-width: none; object-fit: cover; filter: saturate(.84) sepia(.12) contrast(.94); animation: photograph-drift 112s ease-in-out infinite alternate; }
.moment:nth-child(even) .cut-photo > img { animation-direction: alternate-reverse; animation-duration: 139s; }
.cut-photo::after { content: ""; position: absolute; inset: 0; background: var(--grain); opacity: .5; mix-blend-mode: overlay; }
.cut-photo::before { content: ""; position: absolute; inset: 0; z-index: 1; background: #141a38; opacity: calc(var(--veil, 0) * .55); transition: opacity 1s; }
a:hover > .cut::before, a:hover .cut::before, .cut:hover::before { transform: translate(8%, 10%) rotate(-8deg); }
.cut--bowl { --cut-mask: url("brand/shapes/bowl.svg"); --cut-ratio: 210 / 116; }
.cut--shoe { --cut-mask: url("brand/shapes/shoe.svg"); --cut-ratio: 217 / 122; }
.cut--crescent { --cut-mask: url("brand/shapes/crescent.svg"); --cut-ratio: 181 / 206; }
.cut--cup { --cut-mask: url("brand/shapes/cup.svg"); --cut-ratio: 195 / 130; }
.cut--arch { --cut-mask: url("brand/shapes/arch.svg"); --cut-ratio: 200 / 280; }
.cut--hourglass { --cut-mask: url("brand/shapes/hourglass.svg"); --cut-ratio: 200 / 280; }
.cut--seed { --cut-mask: url("brand/shapes/seed.svg"); --cut-ratio: 180 / 230; }
.cut--bottle { --cut-mask: url("brand/shapes/bottle.svg"); --cut-ratio: 140 / 260; }
.cut--bubble { --cut-mask: url("brand/shapes/bubble.svg"); --cut-ratio: 300 / 230; }
.cut--sun { --cut-mask: url("brand/shapes/sun.svg"); --cut-ratio: 1; }
.cut--clock { --cut-mask: url("brand/shapes/clock.svg"); --cut-ratio: 300 / 330; }
.tone-nutrition { --accent: var(--nutrition); --cut-back: #f1d27a; --tint: #f4ecd2; }
.tone-exercise { --accent: var(--exercise); --cut-back: #e3a391; --tint: #f1e0d8; }
.tone-sleep { --accent: var(--sleep); --cut-back: #9cc7d6; --tint: #dde9ec; }
.tone-stress { --accent: var(--stress); --cut-back: #9fc4ad; --tint: #dfe9df; }
.paper-bit { position: absolute; display: block; pointer-events: none; background: var(--bit, var(--sun-paper)); }
.paper-bit--sun { border-radius: 50%; -webkit-mask: url("brand/shapes/sun.svg") center / contain no-repeat; mask: url("brand/shapes/sun.svg") center / contain no-repeat; }
.paper-bit--seed { -webkit-mask: url("brand/shapes/seed.svg") center / contain no-repeat; mask: url("brand/shapes/seed.svg") center / contain no-repeat; }
.paper-bit--arch { -webkit-mask: url("brand/shapes/arch.svg") center / contain no-repeat; mask: url("brand/shapes/arch.svg") center / contain no-repeat; }
.paper-bit--cloud { -webkit-mask: url("brand/shapes/cloud-a.svg") center / contain no-repeat; mask: url("brand/shapes/cloud-a.svg") center / contain no-repeat; }

/* --------------------------------------------------------------- the sky */
[data-sky] {
  --sky-top: #9fc6ea; --sky-mid: #dbe8ee; --sky-low: #f3efe2; --hill-near: #cdb892; --hill-far: #bccaa9; --sun: #f4e3a6;
  --stars: 0; --veil: 0; --warm: 0; --glow: 0;
  position: relative; isolation: isolate;
  background: var(--sky-mid);
}
[data-on-sky] { transition: color .7s ease; }
.sky-layers { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.sky-layers i, .sky-layers b { position: absolute; display: block; }
/* Real raster imagery moves inside the cut shapes. FILM_ALPHA in JS bounds every
   possible image pixel, so the reading veil protects contrast throughout the loop. */
.sky-grad { inset: 0; overflow: hidden; opacity: .64; }
.analog-fill { position: absolute; display: block; inset: -18%; background-position: center; background-size: cover; animation: photograph-drift 132s ease-in-out infinite alternate; }
.analog-fill--sky { background-image: url("brand/film/sky-1980s.webp"); filter: saturate(.8) brightness(calc(1 - var(--stars) * .62)); animation-duration: 168s; }
.sky-mask { position: absolute; display: block; inset: 0; overflow: hidden; }
.sky-mask--sun { -webkit-mask: url("brand/shapes/sun.svg") center / contain no-repeat; mask: url("brand/shapes/sun.svg") center / contain no-repeat; }
.sky-mask--moon { inset: 14%; -webkit-mask: url("brand/shapes/crescent.svg") center / contain no-repeat; mask: url("brand/shapes/crescent.svg") center / contain no-repeat; transform: rotate(-24deg); }
.analog-fill--sun { background-image: url("brand/film/sky-1980s.webp"); background-position: 36% 86%; filter: sepia(.55) saturate(.72) brightness(1.3); animation-duration: 84s; }
.analog-fill--moon { background-image: url("brand/film/lunar-35mm.webp"); animation-duration: 114s; }
.analog-fill--cloud { background-image: url("brand/film/sky-1980s.webp"); background-position: center 83%; filter: saturate(.62) brightness(1.2); animation-duration: 96s; }
.analog-fill--earth { inset: -34% -9%; background-image: url("brand/film/meadow-35mm.webp"); filter: saturate(.65) brightness(calc(.88 - var(--stars) * .62)); animation-duration: 152s; }
.sky-hill--far .analog-fill--earth { background-position: 50% 14%; filter: saturate(.5) brightness(calc(1.1 - var(--stars) * .8)); animation-direction: alternate-reverse; }
@keyframes photograph-drift { from { transform: translate3d(-2%, 1%, 0) rotate(-3deg) scale(1.04); } to { transform: translate3d(2%, -1%, 0) rotate(3deg) scale(1.12); } }
.sky-stars { inset: 0; opacity: var(--stars); transition: opacity 1.2s; }
.sky-star { width: 2px; height: 2px; border-radius: 50%; background: #fff6dd; animation: sky-twinkle 5.4s ease-in-out infinite; }
.sky-star--big { width: 3px; height: 3px; }
.sky-glow { display: none !important; }
.sky-stage { position: absolute; inset: 0; }
.sky-sun, .sky-moon { left: 0; top: 0; width: var(--orb, clamp(104px, 13vw, 196px)); aspect-ratio: 1; opacity: 0; transition: opacity .9s ease; will-change: transform; }
.sky-clouds { position: absolute; left: 44%; right: 0; top: 10%; height: 44%; -webkit-mask-image: linear-gradient(90deg, transparent, #000 24%); mask-image: linear-gradient(90deg, transparent, #000 24%); }
.sky-cloud { left: 100%; overflow: hidden; opacity: .92; animation: sky-drift 120s linear infinite; }
.sky-cloud--1 { --travel: -420%; top: 10%; width: 31%; aspect-ratio: 420 / 170; -webkit-mask: url("brand/shapes/cloud-a.svg") center / contain no-repeat; mask: url("brand/shapes/cloud-a.svg") center / contain no-repeat; animation-delay: -34s; }
.sky-cloud--2 { --travel: -560%; top: 48%; width: 22%; aspect-ratio: 360 / 130; -webkit-mask: url("brand/shapes/cloud-b.svg") center / contain no-repeat; mask: url("brand/shapes/cloud-b.svg") center / contain no-repeat; animation-duration: 170s; animation-delay: -96s; }
.sky-cloud--3 { --travel: -740%; top: 74%; width: 16%; aspect-ratio: 420 / 170; -webkit-mask: url("brand/shapes/cloud-a.svg") center / contain no-repeat; mask: url("brand/shapes/cloud-a.svg") center / contain no-repeat; opacity: .7; animation-duration: 210s; animation-delay: -150s; }
@property --scrim { syntax: "<color>"; inherits: true; initial-value: transparent; }
.sky-scrim { transition: --scrim .7s ease; inset: 0; background: var(--scrim, transparent); }
.sky-window .sky-scrim { display: none; }
.sky-hill { left: 0; right: 0; bottom: 0; overflow: hidden; }
.sky-hill--far { height: var(--hill-h, 26%); background: var(--hill-far); clip-path: var(--hill-far-shape); }
.sky-hill--near { height: calc(var(--hill-h, 26%) * .9); background: var(--hill-near); clip-path: var(--hill-near-shape); }
.sky-grain { inset: 0; background: var(--grain); opacity: .34; mix-blend-mode: soft-light; }
@keyframes sky-twinkle { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@keyframes sky-drift { from { transform: translateX(0); } to { transform: translateX(var(--travel, -500%)); } }
[data-sky]:not(.is-onscreen) .sky-layers * { animation-play-state: paused; }

/* A small sky seen through a cut shape. */
.sky-window { --orb: 30%; --hill-h: 30%; display: block; width: 100%; aspect-ratio: 200 / 280; -webkit-mask: url("brand/shapes/arch.svg") center / contain no-repeat; mask: url("brand/shapes/arch.svg") center / contain no-repeat; }
.sky-window--sun { aspect-ratio: 1; -webkit-mask-image: url("brand/shapes/sun.svg"); mask-image: url("brand/shapes/sun.svg"); }
.sky-window--bubble { aspect-ratio: 300 / 230; -webkit-mask-image: url("brand/shapes/bubble.svg"); mask-image: url("brand/shapes/bubble.svg"); }
.sky-window--seed { aspect-ratio: 180 / 230; -webkit-mask-image: url("brand/shapes/seed.svg"); mask-image: url("brand/shapes/seed.svg"); }
.sky-window--hourglass { aspect-ratio: 200 / 280; -webkit-mask-image: url("brand/shapes/hourglass.svg"); mask-image: url("brand/shapes/hourglass.svg"); }
.sky-window .sky-layers { z-index: 0; }
.window-frame { position: relative; display: block; filter: drop-shadow(0 16px 18px rgba(29, 31, 28, .2)); }
.window-frame::before { content: ""; position: absolute; inset: 0; background: var(--cut-back, var(--sun-paper)); -webkit-mask: var(--frame-mask, url("brand/shapes/arch.svg")) center / contain no-repeat; mask: var(--frame-mask, url("brand/shapes/arch.svg")) center / contain no-repeat; transform: translate(6%, 5%) rotate(4deg); }

/* -------------------------------------------------------------- time chip */
.timechip {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; padding: 6px 8px;
  color: #1d1f1c; background: #fafaf7; clip-path: var(--cut-chip);
  font: 500 13.5px/1 var(--body);
}
.timechip button { -webkit-appearance: none; appearance: none; border: 0; margin: 0; background: none; color: inherit; font: inherit; cursor: pointer; clip-path: none; min-height: 0; }
.timechip-toggle { display: inline-flex; align-items: center; gap: 9px; min-height: 40px; padding: 4px 8px 4px 6px; }
.timechip-dial { position: relative; flex: none; width: 24px; height: 24px; border: 1.5px solid currentColor; border-radius: 50%; }
.timechip-dial i { position: absolute; left: calc(50% - 1px); bottom: 50%; width: 2px; height: 40%; border-radius: 1px; background: currentColor; transform-origin: 50% 100%; }
.timechip-dial::after { content: ""; position: absolute; left: calc(50% - 2px); top: calc(50% - 2px); width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
.timechip-label { display: inline-flex; gap: 7px; align-items: baseline; white-space: nowrap; }
.timechip-label b { font-weight: 600; }
.timechip-label span { min-width: 7.4ch; font-variant-numeric: tabular-nums; color: #596051; }
.timechip-state { padding: 6px 10px; background: #dce3d6; color: #344833; font-weight: 600; font-size: 12.5px; clip-path: var(--cut); transition: background-color .2s; }
.timechip-toggle:hover .timechip-state { background: #cbd6c2; }
.timechip-track { display: inline-flex; align-items: center; min-height: 40px; padding: 0 6px; }
.timechip-range { -webkit-appearance: none; appearance: none; width: clamp(110px, 12vw, 180px); height: 28px; margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer; }
.timechip-range::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, #161b38 0, #262e58 20%, #a9c9e6 31%, #9fc6ea 50%, #f0cfa2 72%, #dd9a8c 78%, #2f3768 82%, #161b38 100%); }
.timechip-range::-moz-range-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, #161b38 0, #262e58 20%, #a9c9e6 31%, #9fc6ea 50%, #f0cfa2 72%, #dd9a8c 78%, #2f3768 82%, #161b38 100%); }
.timechip-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; margin-top: -6px; border: 2px solid #1d1f1c; border-radius: 50%; background: #f4e3a6; }
.timechip-range::-moz-range-thumb { width: 14px; height: 14px; border: 2px solid #1d1f1c; border-radius: 50%; background: #f4e3a6; }
.timechip-now { min-height: 40px; padding: 4px 12px; font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.timechip-now[aria-pressed="true"] { text-decoration: none; color: #3e5c49; }
.timechip :focus-visible { outline: 2px solid #1d1f1c; outline-offset: -2px; }
main .timechip button:hover, main .timechip button:active { background: none; transform: none; }
main .timechip button:focus:not(:focus-visible), main .loop-dial-mark:focus:not(:focus-visible) { outline: none; }

/* ------------------------------------------------ real clocks (local time) */
.clock { position: relative; display: block; width: 100%; aspect-ratio: 1; border-radius: 50%; color: var(--clock-ink, var(--ink)); }
.clock i { position: absolute; inset: 0; display: block; }
.clock-tick::before { content: ""; position: absolute; left: calc(50% - .5px); top: 4%; width: 1px; height: 5%; background: currentColor; opacity: .6; }
.clock-tick--major::before { left: calc(50% - 1px); width: 2px; height: 8%; opacity: 1; }
.clock-hand::before { content: ""; position: absolute; left: calc(50% - 1.5px); background: currentColor; border-radius: 2px; }
.clock-hand--hour::before { top: 24%; width: 3px; height: 30%; }
.clock-hand--minute::before { top: 11%; width: 3px; height: 43%; }
.clock-hand--second { transition: transform .22s cubic-bezier(.3, 2.4, .5, 1); }
.clock-hand--second::before { left: calc(50% - .5px); top: 8%; width: 1px; height: 52%; background: var(--clock-second, var(--exercise)); }
.clock-pin::before { content: ""; position: absolute; left: calc(50% - 4px); top: calc(50% - 4px); width: 8px; height: 8px; border-radius: 50%; background: currentColor; }

/* ---------------------------------------- time-lapse clouds behind a shape */
.lapse { position: absolute; inset: 0; display: block; overflow: hidden; background: #6f9fd6; }
.lapse-strip { position: absolute; left: 0; top: 0; height: 100%; aspect-ratio: 1996 / 720; background: url("brand/film/clouds-a.webp") 0 0 / 50% 100% repeat-x; animation: lapse-pan 46s steps(552) infinite; will-change: transform; }
.lapse-strip--b { background-image: url("brand/film/clouds-b.webp"); mix-blend-mode: lighten; opacity: .7; animation-duration: 71s; animation-timing-function: steps(852); animation-direction: normal; }
.lapse::before { content: ""; position: absolute; inset: 0; z-index: 2; background: #141a38; opacity: var(--veil, 0); transition: opacity 1s; }
.lapse::after { content: ""; position: absolute; inset: 0; z-index: 3; background: var(--grain); mix-blend-mode: soft-light; }
@keyframes lapse-pan { to { transform: translate3d(-50%, 0, 0); } }

/* -------------------------------------------------------- the Do Loop dial */
.loop-dial { position: relative; display: block; width: 100%; aspect-ratio: 300 / 330; filter: drop-shadow(0 22px 26px rgba(0, 0, 0, .28)); }
.loop-dial::before { content: ""; position: absolute; inset: 0; background: var(--sun-paper); -webkit-mask: url("brand/shapes/clock.svg") center / contain no-repeat; mask: url("brand/shapes/clock.svg") center / contain no-repeat; transform: translate(3.5%, 3%) rotate(3deg); }
.loop-dial-face { position: absolute; inset: 0; -webkit-mask: url("brand/shapes/clock.svg") center / contain no-repeat; mask: url("brand/shapes/clock.svg") center / contain no-repeat; }
.loop-dial-rim { position: absolute; left: 4%; top: 13.33%; width: 92%; height: 83.64%; border-radius: 50%; }
.loop-dial-rim::before { content: ""; position: absolute; inset: 3.5%; border-radius: 50%; border: 1px solid rgba(255, 253, 246, .7); }
.loop-dial-rim::after { content: ""; position: absolute; inset: 6%; border-radius: 50%; background: repeating-conic-gradient(from -.6deg, rgba(255, 253, 246, .95) 0 1.2deg, transparent 1.2deg 7.5deg); -webkit-mask: radial-gradient(closest-side, transparent 92%, #000 92.5%); mask: radial-gradient(closest-side, transparent 92%, #000 92.5%); }
.loop-dial-hand { position: absolute; left: 4%; top: 13.33%; width: 92%; height: 83.64%; transition: transform .24s cubic-bezier(.3, 2.2, .5, 1); }
.loop-dial-hand::before { content: ""; position: absolute; left: calc(50% - 3px); top: 13%; width: 6px; height: 45%; background: #fffdf6; clip-path: polygon(50% 0, 100% 12%, 82% 100%, 18% 100%, 0 12%); }
.loop-dial-hand::after { content: ""; position: absolute; left: calc(50% - 9px); top: calc(50% - 9px); width: 18px; height: 18px; border-radius: 50%; background: #fffdf6; box-shadow: 0 0 0 4px rgba(29, 31, 28, .25); }
.loop-dial-mark {
  position: absolute; z-index: 2; transform: translate(-50%, -50%); -webkit-appearance: none; appearance: none; border: 0; margin: 0; cursor: pointer;
  min-height: 34px; padding: 8px 12px; clip-path: var(--cut);
  font: 600 11.5px/1 var(--body); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
  color: #1d1f1c; background: rgba(255, 253, 246, .92); transition: background-color .3s, color .3s, transform .5s var(--ease);
}
.loop-dial-mark--1 { left: 50%; top: 22%; }
.loop-dial-mark--2 { left: 80%; top: 55.2%; }
.loop-dial-mark--3 { left: 50%; top: 88%; }
.loop-dial-mark--4 { left: 20%; top: 55.2%; }
.loop-dial-mark.is-active { background: var(--sun-paper); transform: translate(-50%, -50%) scale(1.1) rotate(-2deg); }
.loop-dial-mark:focus-visible { outline: 2px solid #1d1f1c; outline-offset: -4px; }
main .loop-dial-mark:hover, main .loop-dial-mark:active { background: #fffdf6; transform: translate(-50%, -50%) scale(1.04); }
main .loop-dial-mark.is-active, main .loop-dial-mark.is-active:hover { background: var(--sun-paper); transform: translate(-50%, -50%) scale(1.1) rotate(-2deg); }

/* ---------------------------------------------------- orbit: four in a loop */
.orbit { position: relative; width: 100%; aspect-ratio: 1; margin-top: 7%; }
.orbit-path { position: absolute; inset: 9%; border-radius: 50%; border: 1px dashed var(--rule-strong); opacity: .7; }
.orbit-ring { position: absolute; inset: 0; animation: orbit-turn 96s linear infinite; }
.orbit-item { position: absolute; width: 34%; animation: orbit-turn 96s linear infinite reverse; }
.orbit-item:nth-child(1) { left: 33%; top: -5%; }
.orbit-item:nth-child(2) { left: 71%; top: 36%; }
.orbit-item:nth-child(3) { left: 36%; top: 67%; width: 28%; }
.orbit-item:nth-child(4) { left: -5%; top: 36%; }
.orbit-core { position: absolute; left: 31%; top: 31%; width: 38%; }
@keyframes orbit-turn { to { transform: rotate(360deg); } }

/* ----------------------------------------------- 35 mm strip, on a loop */
.film { position: relative; overflow: hidden; padding: clamp(28px, 4vw, 56px) 0; }
.film-reel { display: flex; width: max-content; transform: rotate(-1.6deg); transform-origin: 50% 50%; }
.film-reel.is-looping .film-track { animation: film-run 64s linear infinite; }
.film-track { display: flex; flex: none; gap: 10px; margin: 0; padding: 26px 5px; list-style: none; background:
  radial-gradient(circle, transparent 0, transparent 0) 0 0,
  repeating-linear-gradient(90deg, transparent 0 9px, #f1f0eb 9px 21px, transparent 21px 34px) 0 7px / auto 12px repeat-x,
  repeating-linear-gradient(90deg, transparent 0 9px, #f1f0eb 9px 21px, transparent 21px 34px) 0 calc(100% - 7px) / auto 12px repeat-x,
  #1c1b18; }
.film-frame { position: relative; flex: none; width: clamp(150px, 15vw, 220px); aspect-ratio: 3 / 2; overflow: hidden; border-radius: 4px; background: #2a2925; }
.film-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.film-frame::after { content: ""; position: absolute; inset: 0; background: var(--grain); opacity: .5; mix-blend-mode: overlay; }
.film-frame--sky { background: #6f9fd6; }
.film-caption { display: flex; justify-content: space-between; gap: 16px; padding: 14px var(--pad-x) 0; }
@keyframes film-run { to { transform: translate3d(-100%, 0, 0); } }

/* One switch stills every loop on the page (the time chip's Pause). */
html[data-time-mode="paused"] .sky-cloud,
html[data-time-mode="paused"] .analog-fill,
html[data-time-mode="paused"] .cut-photo > img,
html[data-time-mode="paused"] .lapse-strip,
html[data-time-mode="paused"] .orbit-ring,
html[data-time-mode="paused"] .orbit-item,
html[data-time-mode="paused"] .film-track,
html[data-time-mode="paused"] .sky-star,
html[data-time-mode="paused"] .loops-spin { animation-play-state: paused; }
html.page-is-hidden .analog-fill,
html.page-is-hidden .cut-photo > img,
[data-time-tint]:not(.is-onscreen) .cut-photo > img { animation-play-state: paused; }

/* ------------------------------------------------------------- navigation */
.essential-nav-fallback { position: relative; z-index: 60; }
.fn .fn-brand img { transition: filter .6s ease; }
html.sky-is-dark .fn:not(.fn--scrolled):not(.fn--sheet-open) .fn-brand img { filter: invert(1) brightness(1.75); }
.under-nav { margin-top: calc(-1 * var(--fn-height, 84px)); }

/* ------------------------------------------------------------------- hero */
.hero {
  --hill-h: clamp(128px, 21vh, 216px);
  display: grid; align-content: start;
  min-height: 640px; min-height: min(94svh, 940px);
  margin-top: calc(-1 * var(--fn-height, 84px));
  padding: calc(var(--fn-height, 84px) + clamp(24px, 5vh, 60px)) var(--pad-x) calc(var(--hill-h) + clamp(20px, 3vh, 40px));
  color: var(--ink);
}
.hero .sky-stage { left: 52%; top: calc(var(--fn-height, 84px) * .5); }
.hero-copy { position: relative; }
.hero-title > span { display: block; }
.hero-lede { max-width: min(36em, calc(50vw - var(--pad-x))); margin: clamp(20px, 2.6vw, 34px) 0 0; font-family: var(--display); font-size: clamp(19px, 1.6vw, 23px); line-height: 1.42; letter-spacing: -.01em; font-weight: 370; }
.hero-actions { margin-top: clamp(22px, 2.6vw, 34px); }
.hero .timechip { position: absolute; right: var(--pad-x); bottom: clamp(30px, 5vh, 56px); z-index: 3; }
[data-sky-tone="dark"] .btn-primary, [data-sky-tone="dark"] .btn--primary { --btn-bg: #f6f1e4; --btn-ink: #1d1f1c; --btn-hover: #fffdf6; }
[data-sky-tone="dark"] .btn-ghost, [data-sky-tone="dark"] .btn--soft { --btn-bg: rgba(16, 20, 43, .58); --btn-ink: #f6f1e4; --btn-hover: rgba(16, 20, 43, .78); }
[data-sky-tone="light"] .btn-ghost, [data-sky-tone="light"] .btn--soft { --btn-bg: rgba(250, 250, 247, .82); --btn-ink: #25362b; --btn-hover: #fafaf7; }

/* --------------------------------------------- the day strip (four moments) */
.day { position: relative; z-index: 1; padding: clamp(36px, 4.6vw, 64px) var(--pad-x) var(--section-y); background: var(--paper); }
.day-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 24px; margin-bottom: clamp(20px, 2.6vw, 32px); }
.day-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.moment {
  position: relative; display: flex; flex-direction: column; min-width: 0;
  padding: 20px clamp(16px, 1.6vw, 24px) 26px; color: var(--ink); text-decoration: none;
  background: var(--paper-raised); clip-path: var(--cut-card);
  transition: transform .7s var(--ease), background-color .6s ease;
}
.moment:nth-child(odd) { transform: rotate(-.7deg); }
.moment:nth-child(even) { transform: rotate(.6deg) translateY(12px); clip-path: var(--cut-card-b); }
.moment:hover, .moment:focus-visible { transform: translateY(-6px) rotate(0deg); background: #fff; }
.moment:focus-visible { outline-offset: -5px; }
.moment-time { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 9px; min-height: 22px; font: 600 12px/1.2 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); transition: color .5s; }
.moment-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--rule-strong); transition: background-color .5s, border-color .5s, box-shadow .5s; }
.moment-now { margin-left: auto; padding: 4px 8px; font-size: 10.5px; letter-spacing: .12em; color: var(--ink); background: var(--sun-paper); clip-path: var(--cut); opacity: 0; transform: translateY(4px); transition: opacity .5s, transform .5s var(--ease); }
.moment.is-now { background: #fff; }
.moment.is-now .moment-time { color: var(--ink); }
.moment.is-now .moment-dot { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 4px rgba(29, 31, 28, .08); }
.moment.is-now .moment-now { opacity: 1; transform: none; }
.moment-art { display: block; height: clamp(120px, 13vw, 176px); margin: 20px 6% 24px; }
.cut--fill { height: 100%; aspect-ratio: auto; }
.moment .kicker { margin-bottom: 8px; }
.moment h2 > span, .moment h3 > span { display: block; }
.moment p { margin: 10px 0 0; font-size: 15px; line-height: 1.45; color: var(--muted); }

/* ------------------------------------------------------- mission (in orbit) */
.band-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(28px, 4vw, 56px) var(--gap); align-items: center; }
.band-grid > .band-copy { grid-column: 1 / span 6; }
.band-grid > .band-art { grid-column: 8 / span 5; justify-self: center; width: min(100%, 460px); }
.band-copy > h2 + .editorial-copy { margin-top: clamp(22px, 2.8vw, 36px); }
.orbit-core .sky-window { --hill-h: 34%; }

/* ---------------------------------------------------------- the four areas */
.area-index { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 var(--gap); margin-top: clamp(32px, 4vw, 56px); }
.area-index a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 2px; border-top: 1px solid var(--ink); font: 500 17px/1.2 var(--body); text-decoration: none; transition: padding .4s var(--ease), color .2s; }
.area-index a::before { content: ""; flex: none; width: 9px; height: 9px; margin-right: 2px; border-radius: 50%; background: var(--accent); }
.area-index a > span { margin-left: auto; transition: transform .35s var(--ease); }
.area-index a:hover { padding-left: 8px; color: var(--green-deep); }
.area-index a:hover > span { transform: translate(2px, -2px); }
.pillars, .editorial-pillars { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); margin-top: clamp(20px, 2.4vw, 32px); }
.pillar { display: grid; grid-template-columns: minmax(150px, 41%) minmax(0, 1fr); min-width: 0; background: var(--paper-raised); clip-path: var(--cut-card); scroll-margin-top: calc(var(--fn-height, 84px) + 24px); }
.pillar:nth-child(even) { clip-path: var(--cut-card-b); }
.pillar-art { position: relative; display: block; padding: clamp(40px, 4vw, 56px) 11% clamp(28px, 3vw, 40px); background: var(--tint, var(--sage)); overflow: hidden; }
.pillar-art::after { content: ""; position: absolute; inset: 0; background: var(--grain); opacity: .4; mix-blend-mode: multiply; pointer-events: none; }
.pillar-art .cut { height: 100%; min-height: 150px; aspect-ratio: auto; }
.pillar-num { position: absolute; left: 16px; top: 14px; font: 600 12px/1 var(--body); letter-spacing: .14em; color: var(--muted); }
.pillar-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: clamp(22px, 2.6vw, 36px) clamp(20px, 2.4vw, 34px); }
.pillar-copy > p { margin: 0; color: var(--ink-soft); }
.pillar-copy > .link { margin-top: auto; }
.shift, .editorial-shift { display: grid; gap: 0; width: 100%; margin: 6px 0 8px; }
.shift > div { display: grid; grid-template-columns: 7.2em minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 11px 0; border-top: 1px solid var(--rule); }
.shift dt { font: 600 11.5px/1.3 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.shift dd { margin: 0; font-size: 15.5px; line-height: 1.45; color: var(--muted); }
.shift > div:last-child { border-bottom: 1px solid var(--rule); }
.shift > div:last-child dt { color: var(--ink); }
.shift > div:last-child dd { color: var(--ink); font-weight: 500; }
.shift > div:last-child dt::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--accent); vertical-align: 1px; }

/* -------------------------------------------------------------- the do loop */
.loop-layout { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(28px, 4vw, 56px) var(--gap); align-items: center; margin-top: clamp(36px, 5vw, 72px); }
.loop-layout > .loop-dial-wrap { grid-column: 1 / span 5; justify-self: center; width: min(100%, 440px); }
.loop-layout > .loop-side { grid-column: 7 / span 6; }
.loop-steps, .editorial-loop { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.loop-steps > li { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 20px 20px 22px; background: var(--paper-raised); clip-path: var(--cut-card); transition: background-color .5s ease, color .5s ease, transform .6s var(--ease); }
.loop-steps > li:nth-child(even) { clip-path: var(--cut-card-b); }
.loop-steps > li p { margin: 0; font-size: 15.5px; line-height: 1.45; color: var(--muted); transition: color .5s; }
.loop-steps > li .kicker { transition: color .5s; }
.loop-steps.is-live > li.is-active { background: var(--cream); color: #1d1f1c; transform: translateY(-3px) rotate(-.4deg); }
.loop-steps.is-live > li.is-active p, .loop-steps.is-live > li.is-active .kicker { color: #4b5146; }
.editorial-return { display: flex; align-items: baseline; gap: 12px; margin-top: 18px; padding: 16px 0 0; font-family: var(--display); font-size: clamp(18px, 1.5vw, 21px); line-height: 1.35; font-style: italic; font-weight: 340; }
.editorial-return > span { display: inline-block; font-style: normal; animation: loop-nudge 3.4s var(--ease) infinite; }
.editorial-return p { margin: 0; }
.loop-layout + .editorial-caption, .loop-side .editorial-caption { margin-top: 18px; }
@keyframes loop-nudge { 0%, 60%, 100% { transform: translateX(0); } 30% { transform: translateX(5px); } }

/* ------------------------------------------- small shifts (an illustration) */
.essential-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); margin-top: clamp(32px, 4vw, 56px); }
.essential-split > div { display: flex; flex-direction: column; gap: 14px; padding: clamp(20px, 2.4vw, 32px); background: var(--paper-shade); clip-path: var(--cut-card); }
.essential-split > div:last-child { background: var(--sage-deep); clip-path: var(--cut-card-b); }
.essential-split .label { color: var(--ink-soft); }
.split-art { display: block; width: 100%; height: auto; overflow: visible; }
.split-art path { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.split-art .ground { stroke: var(--rule-strong); stroke-width: 1; }
.tended-pattern .sprout path { stroke: var(--green-deep); }
.pattern-loop path { stroke-dasharray: 9 7; }
.sprout { transform-box: fill-box; transform-origin: 50% 100%; }
.essential-split.is-playing .pattern-loop path { animation: split-circle 2.6s linear infinite; }
.essential-split.is-playing .sprout { animation: split-grow 7s var(--ease) infinite; }
.essential-split.is-playing .sprout-two { animation-delay: .5s; }
.essential-split.is-playing .sprout-three { animation-delay: 1s; }
.split-copy { margin: 0; font-family: var(--display); font-size: clamp(19px, 1.6vw, 23px); line-height: 1.3; letter-spacing: -.012em; font-weight: 360; }
.split-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-top: 18px; }
.split-note { margin: 0; max-width: 66ch; font-size: 13.5px; line-height: 1.55; color: var(--muted); }
main button.split-play { --btn-bg: var(--sage-deep); --btn-ink: var(--green-deep); --btn-hover: #cbd6c2; min-height: 42px; padding: 10px 18px; font-size: 14px; }
@keyframes split-circle { to { stroke-dashoffset: -32; } }
@keyframes split-grow { 0% { transform: scale(.25); opacity: .2; } 28%, 86% { transform: scale(1); opacity: 1; } 100% { transform: scale(.25); opacity: .2; } }

/* -------------------------------------------------------------- companion */
.companion-art { position: relative; }
.companion-art .window-frame { --frame-mask: url("brand/shapes/bubble.svg"); --cut-back: var(--sun-paper); width: min(100%, 420px); }

/* --------------------------------------------------------------- evidence */
.evidence-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(28px, 4vw, 48px) var(--gap); align-items: start; }
.evidence-grid > .evidence-lead { grid-column: 1 / span 5; }
.evidence-grid > .evidence-body { grid-column: 7 / span 6; }
.evidence-lead > h2 + .editorial-reading { margin-top: clamp(24px, 3vw, 40px); }
.disclosure { padding: 16px 18px; background: var(--sage); font-size: 15.5px; line-height: 1.55; clip-path: var(--cut-card-b); }
.editorial-reading, .reading { display: grid; gap: 12px; }
.editorial-reading a { position: relative; display: grid; gap: 8px; padding: 20px 52px 22px 20px; background: var(--paper-raised); clip-path: var(--cut-card); text-decoration: none; transition: background-color .4s, transform .6s var(--ease); }
.editorial-reading a:hover { background: #fff; transform: translateY(-3px) rotate(-.3deg); }
.editorial-reading a h3 { font-size: clamp(20px, 1.7vw, 24px); line-height: 1.16; letter-spacing: -.02em; font-weight: 370; }
.editorial-reading a p { margin: 0; font-size: 15px; line-height: 1.45; color: var(--muted); }
.editorial-reading a > span[aria-hidden] { position: absolute; right: 20px; top: 18px; transition: transform .35s var(--ease); }
.editorial-reading a:hover > span[aria-hidden] { transform: translate(3px, -3px); }

/* ------------------------------------------ disclosures (details / summary) */
details { border-top: 1px solid var(--rule-strong); }
details:last-of-type { border-bottom: 1px solid var(--rule-strong); }
summary { position: relative; display: block; padding: 18px 44px 18px 0; font: 600 16px/1.35 var(--body); cursor: pointer; list-style: none; transition: color .2s; }
summary::-webkit-details-marker { display: none; }
summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 13px; height: 13px; margin-top: -7px; background: linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat; transition: transform .45s var(--ease); }
details[open] > summary::after { transform: rotate(135deg); }
summary:hover { color: var(--green); }
details > :not(summary) { margin: 0 0 14px; max-width: 68ch; font-size: 15.5px; line-height: 1.6; color: var(--ink-soft); }
details > :last-child { padding-bottom: 12px; }
.evidence-list p { margin: 0 0 12px; }
.editorial-copy + details, .evidence-body > details:first-of-type { margin-top: 22px; }

/* ---------------------------------------------------------------- closing */
.closing { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr) minmax(0, 1fr); gap: var(--gap); align-items: center; padding-block: clamp(64px, 8vw, 120px); text-align: center; overflow: hidden; }
.closing-copy { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.closing-copy p { max-width: 34em; margin: 0; }
.closing-copy .btn-primary { margin-top: 8px; }
.closing .window-frame { width: min(100%, 230px); justify-self: center; }
.closing .window-frame:first-child { transform: rotate(-4deg); }
.closing .window-frame:last-child { transform: rotate(5deg) translateY(18px); --cut-back: var(--blush); }

/* ----------------------------------------------------------------- footer */
.footer { position: relative; padding: clamp(48px, 6vw, 88px) var(--pad-x) 28px; background: var(--forest); color: #f6f1e4; --muted: #b7c3b3; --rule: rgba(246, 241, 228, .2); --ink: #f6f1e4; --clock-ink: #f6f1e4; --clock-second: var(--nutrition); }
.footer::before { content: ""; position: absolute; inset: 0; background: var(--grain); opacity: .5; mix-blend-mode: soft-light; pointer-events: none; }
.footer > * { position: relative; }
.footer :focus-visible { outline-color: #f6f1e4; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 4.4fr) minmax(0, 2fr) minmax(0, 3fr) minmax(0, 2.4fr) minmax(0, 2.6fr); gap: 32px var(--gap); align-items: start; }
.footer-sub { margin: 16px 0 0; color: var(--muted); }
.footer-gap { margin-top: 22px; }
.footer h2.label { font: 600 12px/1.25 var(--body); letter-spacing: .14em; }
.footer-note { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 28px; padding: 0 0 16px; color: var(--muted); }
.footer-note p { margin: 0; }
.footer-note nav { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 14px; }
.footer-note a { color: #f6f1e4; }
.footer-lede { max-width: 21em; margin: 0; font-family: var(--display); font-size: clamp(22px, 2vw, 28px); line-height: 1.24; letter-spacing: -.018em; font-weight: 340; }
.footer .label { color: var(--muted); }
.flink { display: grid; gap: 4px; margin: 14px 0 0; padding: 0; list-style: none; }
.flink a { display: inline-block; padding: 5px 0; font-size: 16px; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 calc(100% - 3px) / 0 1px no-repeat; transition: background-size .4s var(--ease); }
.flink a:hover { background-size: 100% 1px; }
.footer-time { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; align-items: center; }
.footer-time .timechip { grid-column: 1 / -1; justify-self: start; background: rgba(246, 241, 228, .1); color: #f6f1e4; }
.footer-time .timechip--mini .timechip-state { color: #f6f1e4; }
.footer-time .timechip--mini .timechip-toggle:hover .timechip-state { background: rgba(246, 241, 228, .14); }
.footer-time .timechip :focus-visible { outline-color: #f6f1e4; }
.footer-time .clock { border: 1px solid rgba(246, 241, 228, .35); }
.footer-time-text { display: grid; gap: 4px; }
.footer-time-text b { font-family: var(--display); font-size: 26px; line-height: 1; font-weight: 340; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.footer-mark { display: block; margin: clamp(36px, 5vw, 72px) 0 18px; }
.wordmark-shape, .wordmark-lapse { position: relative; display: block; width: 100%; aspect-ratio: 1803.39 / 806.22; -webkit-mask: url("brand/wordmark.svg") center / contain no-repeat; mask: url("brand/wordmark.svg") center / contain no-repeat; }
.wordmark-shape { background: currentColor; }
.wordmark-lapse .lapse { background: #9fc6ea; }
.footer-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-top: 18px; border-top: 1px solid var(--rule); }

/* ----------------------------------------------- hero variants (inner pages) */
.timechip--mini { padding: 4px; }
.timechip--mini .timechip-dial, .timechip--mini .timechip-label, .timechip--mini .timechip-track, .timechip--mini .timechip-now { display: none; }
.timechip--mini .timechip-toggle { min-height: 36px; padding: 0; }
.timechip--mini .timechip-state { padding: 9px 13px; background: transparent; clip-path: none; color: #25362b; }
.timechip--mini .timechip-toggle:hover .timechip-state { background: #dce3d6; }
.back-link { display: inline-flex; align-items: center; gap: 6px; padding: 6px 0; font: 600 14px/1.3 var(--body); text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 calc(100% - 3px) / 0 1px no-repeat; transition: background-size .4s var(--ease); }
.back-link:hover { background-size: 100% 1px; }
.hero--pillar, .hero--page { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); column-gap: var(--gap); align-items: center; min-height: 560px; min-height: min(80svh, 760px); }
.hero--pillar .hero-copy, .hero--page .hero-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
.hero--pillar .kicker, .hero--page .kicker { margin-top: clamp(14px, 2.4vh, 28px); }
.hero--pillar .hero-title, .hero--page .hero-title { margin-top: 14px; }
.hero--pillar .hero-lede, .hero--page .hero-lede { max-width: 30em; }
.hero--pillar .sky-stage { left: 46%; }
.hero-art { position: relative; justify-self: center; width: min(100%, 440px); }
.hero-art .cut { filter: drop-shadow(0 26px 30px rgba(20, 24, 40, .28)); }
.cut--crescent { max-width: 78%; margin-inline: auto; }
.hero--page { --hill-h: clamp(84px, 14vh, 150px); min-height: 440px; min-height: min(64svh, 600px); }
.hero--page .t-xl { font-size: clamp(42px, 6.2vw, 100px); }
.hero--page .hero-art { width: min(100%, 360px); }
.hero--compact { min-height: 0; padding-bottom: calc(var(--hill-h) + 20px); }

/* -------------------------------------------------- pillar pages: practice */
.practice { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 28px var(--gap); align-items: start; margin-top: clamp(40px, 5.6vw, 80px); scroll-margin-top: calc(var(--fn-height, 84px) + 24px); }
.practice-title { grid-column: 1 / span 5; display: grid; gap: 16px; position: sticky; top: calc(var(--fn-height, 84px) + 24px); }
.practice-steps { grid-column: 7 / span 6; display: grid; gap: 14px; counter-reset: step; }
.practice-step { position: relative; display: grid; gap: 10px; padding: 22px 24px 24px 76px; background: var(--paper-raised); clip-path: var(--cut-card); counter-increment: step; }
.practice-step:nth-child(2) { clip-path: var(--cut-card-b); }
.practice-step::before { content: counter(step, decimal-leading-zero); position: absolute; left: 22px; top: 22px; display: grid; place-items: center; width: 38px; height: 38px; font: 600 12px/1 var(--body); letter-spacing: .08em; color: var(--ink); background: var(--tint, var(--sage)); -webkit-mask: url("brand/shapes/sun.svg") center / contain no-repeat; mask: url("brand/shapes/sun.svg") center / contain no-repeat; }
.practice-step .body { margin: 0; font-family: var(--display); font-size: clamp(20px, 1.8vw, 26px); line-height: 1.3; letter-spacing: -.014em; font-weight: 360; }
.pillar-note { margin: 6px 0 0; padding-left: 16px; border-left: 2px solid var(--accent); font-size: 15.5px; line-height: 1.55; color: var(--ink-soft); }
.practice-next { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; margin-top: clamp(36px, 5vw, 64px); padding-top: 22px; border-top: 1px solid var(--rule); }
.practice-next p { flex: 1 1 320px; max-width: 46em; margin: 0; }

/* -------------------------------------------------- pillar pages: products */
.products-layout { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 32px var(--gap); align-items: start; }
.products-lead { grid-column: 1 / span 5; display: grid; gap: 16px; }
.products-lead .disclosure { background: var(--paper-raised); }
.products-links { display: flex; flex-wrap: wrap; gap: 10px 24px; margin: 4px 0 0; }
.product-grid { grid-column: 7 / span 6; display: grid; gap: 14px; }
.product { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 22px; align-items: center; padding: 24px; background: var(--paper-raised); clip-path: var(--cut-card); }
.product:nth-child(even) { clip-path: var(--cut-card-b); }
.product-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.product-copy p { margin: 0; color: var(--ink-soft); }
.product-copy small { color: var(--muted); }
.product-cta { margin-top: 4px; }

/* ----------------------------------------- the day, as a loop of four links */
.day-loop { border-top: 1px solid var(--rule); }
.day-loop-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.day-loop-item { position: relative; display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 16px; align-items: center; padding: 16px 18px; color: var(--ink); text-decoration: none; background: var(--paper-raised); clip-path: var(--cut-card); transition: transform .6s var(--ease), background-color .4s; }
.day-loop-item:nth-child(even) { clip-path: var(--cut-card-b); }
.day-loop-item:hover { transform: translateY(-4px) rotate(-.4deg); background: #fff; }
.day-loop-item[aria-current="page"] { background: var(--tint, var(--sage)); }
.day-loop-item .window-frame { --cut-back: var(--cut-back-tone, var(--sun-paper)); filter: none; }
.day-loop-text { display: grid; gap: 4px; }
.day-loop-arrow { position: absolute; right: 16px; top: 12px; font-size: 14px; transition: transform .35s var(--ease); }
.day-loop-item:hover .day-loop-arrow { transform: translate(2px, -2px); }

/* ---------------------------------------------------------------- mission */
.mission-hero { position: relative; padding: calc(var(--fn-height, 84px) + clamp(20px, 3.6vh, 40px)) var(--pad-x) clamp(36px, 5vw, 64px); overflow: hidden; }
.mission-hero .section-head { margin-bottom: clamp(8px, 2vw, 24px); }
.mission-hero-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--gap); align-items: center; }
.mission-title { font-size: clamp(112px, 23vw, 372px); line-height: .8; letter-spacing: -.05em; font-weight: 300; padding-bottom: .08em; }
.mission-title em { display: inline-block; padding: 0 .1em .12em 0; font-weight: 300; }
.cloud-type { color: var(--sleep); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .cloud-type {
    background:
      linear-gradient(rgba(20, 26, 56, var(--veil, 0)), rgba(20, 26, 56, var(--veil, 0))),
      linear-gradient(rgba(240, 138, 70, calc(var(--warm, 0) * .55)), rgba(240, 138, 70, calc(var(--warm, 0) * .55))),
      url("brand/film/clouds-a.webp") 0 46% / 998px 720px repeat;
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
    animation: cloud-type 64s steps(768) infinite;
  }
}
@keyframes cloud-type { to { background-position: 0 0, 0 0, -998px 46%; } }
html[data-time-mode="paused"] .cloud-type { animation-play-state: paused; }
.mission-hero-art { position: relative; justify-self: center; width: min(100%, 330px); }
.mission-hero-art .window-frame { width: 100%; transform: rotate(4deg); }
.clock-badge { position: absolute; left: -22%; bottom: -6%; width: 46%; padding: 5%; background: var(--paper-raised); border-radius: 50%; box-shadow: 0 14px 26px -12px rgba(29, 31, 28, .4); }
.clock-badge::before { content: ""; position: absolute; inset: -9%; z-index: -1; background: var(--sun-paper); -webkit-mask: url("brand/shapes/sun.svg") center / contain no-repeat; mask: url("brand/shapes/sun.svg") center / contain no-repeat; }
.mission-hero-bottom { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 40px; margin-top: clamp(20px, 3vw, 40px); padding-top: 20px; border-top: 1px solid var(--rule); }
.mission-hero-bottom .lede { flex: 1 1 420px; max-width: 30em; margin: 0; }
.mission-hero-bottom .timechip { margin-left: auto; background: var(--paper-raised); }
.chapter-grid { align-items: start; }
.chapter-grid > .chapter-side { grid-column: 1 / span 5; position: sticky; top: calc(var(--fn-height, 84px) + 28px); display: grid; gap: clamp(24px, 3vw, 44px); }
.chapter-grid > .chapter-body { grid-column: 7 / span 6; }
.chapter-figure { width: min(84%, 380px); }
.chapter-figure--narrow { width: min(46%, 200px); }
.chapter-figure--bubble { width: min(80%, 340px); }
.chapter-body .lead, .lead { font-family: var(--display); font-size: clamp(21px, 1.9vw, 28px); line-height: 1.3; letter-spacing: -.016em; font-weight: 350; max-width: 26em; }
blockquote { margin: 1.6em 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--sun-paper); font-family: var(--display); font-style: italic; font-weight: 330; font-size: clamp(20px, 1.7vw, 25px); line-height: 1.36; letter-spacing: -.012em; }
blockquote cite { display: block; margin-top: 10px; font: 600 12px/1.2 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.three-up, .comparison, .activity-list { display: grid; gap: 12px; margin: 1.8em 0; }
.three-up { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.comparison { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.activity-list { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); }
.three-up > article, .comparison > article, .activity-list > article { display: flex; flex-direction: column; gap: 8px; padding: 18px 18px 20px; background: var(--paper-raised); clip-path: var(--cut-card); }
.three-up > article:nth-child(even), .comparison > article:nth-child(even), .activity-list > article:nth-child(even) { clip-path: var(--cut-card-b); }
.section--sage .three-up > article, .section--sage .comparison > article { background: var(--paper-raised); }
.comparison > article:last-child { background: var(--sage-deep); }
.section--deep .comparison > article:last-child { background: rgba(246, 241, 228, .14); }
.three-up h3, .comparison h3, .activity-list h3, .step-list h3 { font-size: clamp(20px, 1.6vw, 23px); line-height: 1.15; letter-spacing: -.018em; font-weight: 380; }
.three-up p, .comparison p, .activity-list p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--muted); }
.activity-list .kicker { color: var(--ink); }
.aside { padding-left: 16px; border-left: 2px solid var(--rule-strong); font-size: 15.5px; line-height: 1.55; color: var(--muted); }
.subheading { margin-top: 1.8em; font-size: clamp(24px, 2.2vw, 32px); }
.loop-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 8px; margin: 1.6em 0; font: 600 12.5px/1 var(--body); letter-spacing: .12em; text-transform: uppercase; }
.loop-banner > span:not([aria-hidden]) { padding: 10px 14px; background: var(--paper-raised); clip-path: var(--cut); }
.loop-banner > span:first-child { background: var(--sun-paper); color: #1d1f1c; }
.step-list { display: grid; gap: 10px; margin: 1.6em 0; padding: 0; list-style: none; }
.step-list > li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; padding: 18px 20px 20px; background: var(--paper-raised); clip-path: var(--cut-card); transition: background-color .5s ease, color .5s ease, transform .6s var(--ease); }
.step-list > li:nth-child(even) { clip-path: var(--cut-card-b); }
.step-list .step-no { font: 600 12px/1.9 var(--body); letter-spacing: .14em; color: var(--muted); transition: color .5s; }
.step-list p { margin: 6px 0 0; font-size: 15.5px; line-height: 1.5; color: var(--muted); transition: color .5s; }
.step-list .example { font-family: var(--display); font-style: italic; font-size: 17px; color: var(--ink); }
.step-list.is-live > li.is-active { background: var(--cream); color: #1d1f1c; transform: translateX(6px); }
.step-list.is-live > li.is-active p, .step-list.is-live > li.is-active .step-no { color: #4b5146; }
.step-list.is-live > li.is-active .example { color: #1d1f1c; }
.contact-email { margin-top: 1.6em; }

/* ------------------------------------------------------------------ forms */
main label, .field { display: block; font: 600 14.5px/1.35 var(--body); color: var(--ink); }
main label > input, main label > select, main label > textarea { display: block; margin-top: 8px; }
main label > small { display: block; margin-top: 7px; }
main label > span, .optional { font-weight: 400; color: var(--muted); }
main input:not([type="radio"]):not([type="checkbox"]):not([type="range"]):not([type="hidden"]), main select, main textarea {
  width: 100%; min-height: 50px; margin: 0; padding: 12px 14px;
  border: 1px solid var(--rule-strong); border-radius: 2px; background-color: var(--paper-raised); color: var(--ink);
  font: 400 16px/1.4 var(--body); -webkit-appearance: none; appearance: none;
  transition: border-color .2s, box-shadow .2s, background-color .2s;
}
main textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
main select { padding-right: 40px; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; }
main input::placeholder, main textarea::placeholder { color: #7d8577; opacity: 1; }
main input:hover, main select:hover, main textarea:hover { border-color: var(--ink); }
main input:focus-visible, main select:focus-visible, main textarea:focus-visible { outline: 2px solid var(--green); outline-offset: 1px; border-color: var(--green); background-color: #fff; }
main input[readonly], main textarea[readonly], .form-card textarea[readonly], .form-card input[readonly] { background-color: var(--paper-shade); }
main input[type="radio"], main input[type="checkbox"] { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--green); }
main form { display: grid; gap: 18px; }
main fieldset { display: grid; gap: 10px; margin: 0; padding: 0; border: 0; min-width: 0; }
main legend { padding: 0; margin-bottom: 4px; font: 600 14.5px/1.35 var(--body); }
.check, .choice, .confirm, .service-choice label, .consent fieldset label { display: flex; align-items: flex-start; gap: 12px; font-weight: 400; font-size: 16px; line-height: 1.45; cursor: pointer; }
.choice, .service-choice label, .consent fieldset label { padding: 13px 16px; background: var(--paper-raised); border: 1px solid var(--rule); transition: border-color .2s, background-color .2s; }
.choice:hover, .service-choice label:hover, .consent fieldset label:hover { border-color: var(--ink); }
.choice:has(input:checked), .service-choice label:has(input:checked), .consent fieldset label:has(input:checked) { border-color: var(--green); background: var(--sage); box-shadow: inset 3px 0 0 var(--green); }
.field-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
[role="status"]:empty, .error:empty { display: none; }
main [role="status"] { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--green-deep); }
main [role="status"].error, .error { color: var(--danger); font-weight: 500; }
.form-card { padding: clamp(20px, 2.6vw, 34px); background: var(--paper-raised); box-shadow: 0 1px 0 var(--rule), 0 24px 40px -32px rgba(29, 31, 28, .45); }
.form-card input:not([type="radio"]):not([type="checkbox"]), .form-card select, .form-card textarea { background-color: #fff; }
.privacy-note { margin: 0; padding-left: 16px; border-left: 2px solid var(--rule-strong); font-size: 14.5px; line-height: 1.55; color: var(--muted); max-width: 72ch; }
.notice { display: grid; gap: 10px; justify-items: start; padding: 18px 20px; background: var(--sage); border-left: 3px solid var(--green); font-size: 15.5px; line-height: 1.55; }
.notice h2, .notice h3 { font-size: clamp(20px, 1.7vw, 24px); line-height: 1.15; letter-spacing: -.018em; font-weight: 380; }
.notice p { margin: 0; }
.notice--top { margin: 0; }
.empty { margin: 0; padding: 18px 20px; border: 1px dashed var(--rule-strong); color: var(--muted); font-size: 15.5px; }
table { width: 100%; border-collapse: collapse; font-size: 14.5px; font-variant-numeric: tabular-nums; }
caption { padding: 0 0 10px; text-align: left; font-size: 13.5px; color: var(--muted); }
th, td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--rule); white-space: nowrap; }
th { font: 600 12px/1.3 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.table-wrap { max-width: 100%; overflow-x: auto; }

/* ------------------------------------------------ utility pages (plan etc.) */
.prose-cols { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px var(--gap); margin-top: clamp(32px, 4vw, 56px); }
.prose-cols > :first-child { grid-column: 1 / span 5; }
.prose-cols > :last-child { grid-column: 7 / span 6; }
.prose-cols p { margin: 0 0 1em; }
.form-lead { display: grid; gap: 16px; align-content: start; position: sticky; top: calc(var(--fn-height, 84px) + 28px); }
.result { display: grid; gap: 14px; justify-items: start; }
.result h2 { font-size: clamp(28px, 3vw, 44px); line-height: 1.06; letter-spacing: -.028em; }
.result p { margin: 0; max-width: 70ch; }
#result.result { margin-top: 20px; padding: clamp(20px, 2.6vw, 32px); background: var(--sage); border-left: 3px solid var(--green); }
#result.result:focus { outline: none; }
.retained-referral { display: grid; gap: 10px; justify-items: start; padding: 18px 20px; background: var(--sage); border-left: 3px solid var(--green); overflow-wrap: anywhere; }
.selection { padding: 14px 16px; background: var(--paper-raised); border: 1px dashed var(--rule-strong); font-size: 15.5px; }
.notes-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.notes-grid + .link, .notes-grid + .back-link { margin-top: 28px; }

.hero-art--wide { width: min(100%, 470px); }
.hero-art--door { width: min(64%, 290px); }
.choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 8px; }
.referrer-details { display: grid; gap: 18px; padding-top: 18px; border-top: 1px solid var(--rule); }
main label small, main form small { font-size: 13.5px; font-weight: 400; line-height: 1.5; color: var(--muted); }
#result.result a { display: inline-flex; align-items: center; min-height: 52px; padding: 14px 26px; font: 600 15px/1.2 var(--body); color: #fff; background: var(--green); text-decoration: none; clip-path: var(--cut); transition: background-color .25s; }
#result.result a:hover { background: var(--green-deep); }
.keep-going { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 28px var(--gap); align-items: start; justify-items: stretch; }
.keep-going > h2 { grid-column: 1 / span 5; position: sticky; top: calc(var(--fn-height, 84px) + 28px); }
.keep-going-body { grid-column: 7 / span 6; display: grid; gap: 22px; }
.reply-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 0 8px; padding: 0; list-style: none; }
.reply-list li { display: grid; gap: 4px; padding: 18px 20px 20px; background: var(--paper-raised); border-top: 3px solid var(--sun-paper); }
.reply-list li:nth-child(2) { border-top-color: var(--blush); }
.reply-list li:nth-child(3) { border-top-color: var(--sage-deep); }
.reply-list li:nth-child(4) { border-top-color: var(--clay); }
.reply-list strong { font-family: var(--display); font-size: clamp(22px, 2vw, 28px); line-height: 1.1; letter-spacing: -.02em; font-weight: 370; }
.reply-list span { font-size: 15.5px; line-height: 1.45; color: var(--ink-soft); }

/* ----------------------------------------------------------- connect guide */
.guide { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 28px var(--gap); align-items: start; }
.guide > .guide-status { grid-column: 1 / span 4; position: sticky; top: calc(var(--fn-height, 84px) + 28px); }
.guide > .guide-steps { grid-column: 6 / span 7; display: grid; gap: 14px; }
.guide-steps > section { display: grid; gap: 14px; padding: clamp(20px, 2.4vw, 30px); background: var(--paper-raised); }
.guide-steps > section > h2 { font-size: clamp(24px, 2.2vw, 32px); line-height: 1.1; letter-spacing: -.024em; }
.guide-steps p { margin: 0; }
.service-choice { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.url-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
.url-row input { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 15px; }
.start-steps { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; counter-reset: start; }
.start-steps > li { position: relative; padding: 2px 0 2px 46px; counter-increment: start; line-height: 1.55; }
.start-steps > li::before { content: counter(start); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 30px; height: 30px; font: 600 13px/1 var(--body); color: var(--ink); background: var(--sun-paper); -webkit-mask: url("brand/shapes/sun.svg") center / contain no-repeat; mask: url("brand/shapes/sun.svg") center / contain no-repeat; }
.start-steps a, .guide-steps a, .notice a:not(.button):not(.btn) { color: var(--green-deep); font-weight: 500; }

/* ------------------------------------------------------- account: sign in */
.shell { display: block; }
.page-status { position: relative; padding: 0 var(--pad-x); }
.page-status > .notice { margin-top: clamp(22px, 3vw, 36px); }
body:not(.is-member) .when-member, body.is-member .when-guest { display: none !important; }
.fn .fn-btn[hidden] { display: none !important; }
.hero-title.greeting span { display: inline; }
.hero-title.greeting em { text-transform: lowercase; }
.hero-clock { width: min(64%, 270px); }
.hero-clock .loop-dial { filter: drop-shadow(0 22px 26px rgba(20, 24, 40, .3)); }
.cloud-clock { position: absolute; left: 4%; top: 13.33%; width: 92%; height: 83.64%; aspect-ratio: auto; --clock-ink: #fffdf6; --clock-second: var(--sun-paper); filter: drop-shadow(0 1px 3px rgba(20, 24, 40, .5)); }
.cloud-clock .clock-tick { display: none; }
.cloud-clock .clock-hand--hour::before { left: calc(50% - 3px); width: 6px; top: 26%; height: 28%; }
.cloud-clock .clock-hand--minute::before { left: calc(50% - 2px); width: 4px; top: 13%; height: 41%; }
.cloud-clock .clock-hand--second::before { left: calc(50% - 1px); width: 2px; top: 11%; height: 50%; }
.cloud-clock .clock-pin::before { left: calc(50% - 7px); top: calc(50% - 7px); width: 14px; height: 14px; box-shadow: 0 0 0 3px rgba(29, 31, 28, .22); }
.auth-layout { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 32px var(--gap); align-items: start; padding: clamp(40px, 5vw, 72px) var(--pad-x) var(--section-y); }
.auth-layout > :first-child { grid-column: 1 / span 5; display: grid; gap: 16px; align-content: start; }
.auth-layout > :nth-child(2) { grid-column: 7 / span 6; display: grid; gap: 20px; padding: clamp(20px, 2.8vw, 36px); background: var(--paper-raised); box-shadow: 0 1px 0 var(--rule), 0 30px 50px -36px rgba(29, 31, 28, .5); }
.auth-layout h2 { font-size: clamp(36px, 4.7vw, 72px); line-height: 1; letter-spacing: -.036em; }
.auth-art { display: grid; grid-template-columns: 1fr .8fr; align-items: end; width: min(78%, 330px); margin-top: clamp(16px, 2.4vw, 36px); }
.auth-art .window-frame { transform: rotate(-4deg); }
.auth-art .cut { transform: translate(-22%, 6%) rotate(8deg); }
.auth-card > details { margin-top: 4px; }
main .auth-card form > button[type="submit"] { justify-self: stretch; }
.auth-layout input:not([type="radio"]):not([type="checkbox"]), .auth-layout select { background-color: #fff; }
.switcher { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; background: var(--sage-deep); clip-path: var(--cut-chip); }
main .switcher button[data-auth-mode] { --btn-bg: transparent; --btn-ink: var(--green-deep); --btn-hover: rgba(250, 250, 247, .5); min-height: 44px; padding: 8px 10px; font-size: 14.5px; clip-path: var(--cut); }
main .switcher button[data-auth-mode][aria-pressed="true"] { --btn-bg: var(--paper-raised); --btn-ink: var(--ink); --btn-hover: var(--paper-raised); }
main .switcher button[data-auth-mode]:hover { transform: none; }

/* -------------------------------------------------- account: signed in */
.member-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; padding: clamp(18px, 2.2vw, 28px) var(--pad-x) 12px; }
.member-bar #signed-in { margin: 0; font-size: 14.5px; color: var(--muted); }
.member-bar-side { display: flex; align-items: center; gap: 16px; }
.member-clock { display: grid; grid-template-columns: 44px auto; gap: 10px; align-items: center; font-size: 14px; color: var(--muted); }
.member-clock b { display: block; font-family: var(--display); font-size: 20px; font-weight: 360; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.member-clock .clock { border: 1px solid var(--rule-strong); }
.section-nav { position: sticky; top: var(--fn-height, 84px); z-index: 40; display: flex; gap: 2px; padding: 10px var(--pad-x); overflow-x: auto; scrollbar-width: none; background: rgba(241, 240, 235, .94); border-block: 1px solid var(--rule); }
.section-nav::-webkit-scrollbar { display: none; }
.section-nav a { flex: none; padding: 9px 10px; font: 500 14.5px/1.2 var(--body); color: var(--ink-soft); text-decoration: none; white-space: nowrap; clip-path: var(--cut); transition: background-color .25s, color .25s; }
.section-nav a:hover { background: var(--sage-deep); color: var(--ink); }
.section-nav a[aria-current="true"] { background: var(--green); color: #fff; }
.section-nav a:focus-visible { outline-offset: -4px; }
.welcome-new { position: relative; display: grid; grid-template-columns: minmax(120px, 210px) minmax(0, 1fr); gap: 20px clamp(24px, 4vw, 64px); align-items: center; margin: clamp(22px, 3vw, 40px) var(--pad-x) 0; padding: clamp(24px, 3.2vw, 48px); background: var(--sage); scroll-margin-top: calc(var(--fn-height, 84px) + 70px); }
.welcome-new::before { content: ""; position: absolute; inset: 0; background: var(--grain); opacity: .4; mix-blend-mode: multiply; pointer-events: none; }
.welcome-new > * { position: relative; }
.welcome-new-art { justify-self: center; width: 100%; max-width: 200px; transform: rotate(-3deg); }
.welcome-new h2 { margin-top: 10px; font-size: clamp(34px, 4.2vw, 64px); line-height: 1; letter-spacing: -.036em; }
.welcome-new-copy > p.body { margin: 14px 0 0; max-width: 52ch; }
.welcome-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 22px 0 0; padding: 0; list-style: none; }
.welcome-steps a { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; height: 100%; padding: 16px 16px 18px; background: var(--paper-raised); color: var(--ink); text-decoration: none; transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.welcome-steps a:hover { transform: translateY(-3px) rotate(-.4deg); box-shadow: 0 18px 26px -20px rgba(29, 31, 28, .5); }
.welcome-step-no { display: grid; place-items: center; width: 32px; height: 32px; font: 600 13px/1 var(--body); background: var(--sun-paper); -webkit-mask: url("brand/shapes/sun.svg") center / contain no-repeat; mask: url("brand/shapes/sun.svg") center / contain no-repeat; }
.welcome-steps b { display: block; font-family: var(--display); font-size: 20px; line-height: 1.15; letter-spacing: -.016em; font-weight: 380; }
.welcome-steps small { display: block; margin-top: 5px; font-size: 13.5px; line-height: 1.45; color: var(--muted); }
main .welcome-new-close { position: absolute; right: 10px; top: 8px; min-height: 40px; font-size: 14px; }
.chapter { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 28px var(--gap); align-items: start; padding: clamp(48px, 6vw, 92px) var(--pad-x); border-top: 1px solid var(--rule); scroll-margin-top: calc(var(--fn-height, 84px) + 56px); }
#next.chapter { border-top: 0; }
.chapter--sage { background: var(--sage); border-top-color: transparent; }
.chapter--sage + .chapter { border-top-color: transparent; }
.chapter-links { margin: 0; font-size: 15.5px; }
.chapter > :nth-child(2) > p { margin: 0; max-width: 70ch; }
.month-field { max-width: 260px; }
.area-choices { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.area-check { align-items: center; padding: 12px 14px; background: #fff; border: 1px solid var(--rule); border-top: 3px solid var(--accent); transition: background-color .2s, border-color .2s; }
.area-check:has(input:checked) { background: var(--tint); border-color: var(--accent); }
main form > button, main form > .button { justify-self: start; }
.notice--page { margin: clamp(22px, 3vw, 36px) var(--pad-x); }
.chapter > .chapter-title { grid-column: 1 / span 4; position: sticky; top: calc(var(--fn-height, 84px) + 76px); display: grid; gap: 14px; align-content: start; }
.chapter > :nth-child(2) { grid-column: 6 / span 7; display: grid; gap: 22px; min-width: 0; }
.chapter-title h2 { font-size: clamp(34px, 4.2vw, 64px); line-height: 1; letter-spacing: -.036em; }
.chapter-title > p:not(.eyebrow) { margin: 0; max-width: 34ch; color: var(--ink-soft); }
.chapter-mark { width: min(44%, 150px); margin-top: clamp(14px, 2vw, 28px); }
.chapter-mark--wide { width: min(66%, 230px); }
.window-frame--bubble { --frame-mask: url("brand/shapes/bubble.svg"); }
.chapter h3 { font-size: clamp(22px, 1.9vw, 27px); line-height: 1.14; letter-spacing: -.02em; font-weight: 370; }
.chapter form:not(.bare) { padding: clamp(18px, 2.4vw, 30px); background: var(--paper-raised); box-shadow: 0 1px 0 var(--rule); }
.chapter form:not(.bare) input:not([type="radio"]):not([type="checkbox"]), .chapter form:not(.bare) select, .chapter form:not(.bare) textarea { background-color: #fff; }
.chapter details > form { margin-bottom: 18px; }
.chapter a:not(.button):not(.btn):not(.text-link) { color: var(--green-deep); font-weight: 500; }
.text-link { display: inline-flex; gap: 6px; justify-self: start; font: 600 15px/1.3 var(--body); color: var(--green-deep); text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-bottom: 3px; }
.records { display: grid; gap: 12px; }
.records:empty { display: none; }
#reports, #routine-list, #next-actions { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
#reports > .empty, #routine-list > .empty, #next-actions > .empty { grid-column: 1 / -1; }
.record { display: grid; gap: 8px; padding: 18px 20px 20px; background: var(--paper-raised); border-left: 3px solid var(--sun-paper); }
.record .record-meta { margin: 0; font: 600 13px/1.35 var(--body); letter-spacing: .01em; color: var(--muted); }
.record h3 { font-size: 21px; }
.record p { margin: 0; font-size: 15.5px; line-height: 1.5; color: var(--ink-soft); }
.record .actions { margin-top: 6px; gap: 8px; }
.record .actions button, .records button { min-height: 40px; padding: 9px 16px; font-size: 14px; }
.dashboard-charts { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.dashboard-charts:empty { display: none; }
.month-chart { --bar: var(--green); display: grid; gap: 6px; margin: 0; padding: 18px 18px 16px; background: var(--paper-raised); border-top: 3px solid var(--bar); }
.month-chart:nth-child(1) { --bar: var(--nutrition); }
.month-chart:nth-child(2) { --bar: var(--exercise); }
.month-chart:nth-child(3) { --bar: var(--sleep); }
.month-chart:nth-child(4) { --bar: var(--stress); }
.month-chart:nth-child(5) { --bar: var(--ink); }
.month-chart:nth-child(6) { --bar: var(--clay); }
.month-chart h3 { font: 600 12px/1.3 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.month-total { margin: 0; font-family: var(--display); font-size: 56px; line-height: .95; font-weight: 320; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.daily-bars { display: flex; align-items: flex-end; gap: 2px; height: 76px; margin-top: 6px; border-bottom: 1px solid var(--rule-strong); }
.daily-bar { flex: 1 1 0; min-width: 2px; background: var(--bar); border-radius: 1px 1px 0 0; }
.daily-bar.unknown { background: repeating-linear-gradient(90deg, var(--rule-strong) 0 2px, transparent 2px 4px); opacity: .7; }
.daily-bar.zero { background: transparent; }
.month-chart figcaption, .chart-note { font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.progress { display: grid; gap: 10px; }
.progress:empty { display: none; }
.progress-row { display: grid; grid-template-columns: 7em minmax(0, 1fr) 2.5em; gap: 12px; align-items: center; font-size: 14.5px; }
.progress-row > span:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.bar-track { height: 10px; background: var(--sage-deep); }
.bar-fill { height: 100%; background: var(--green); }
details.danger > summary { color: var(--danger); }
details.danger form { border-left: 3px solid var(--danger); }
main details.danger button[type="submit"] { --btn-bg: var(--danger); --btn-hover: #742a23; }
#help { background: var(--sage); border-top: 0; }
#help > :nth-child(2) { gap: 12px; }
#help h3 { margin-top: 14px; }
#help p { margin: 0; max-width: 70ch; }
body:not(.is-member) #help { padding-top: clamp(48px, 6vw, 80px); }

/* ------------------------------------------------------- consent (authorize) */
.consent-layout { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 28px var(--gap); align-items: start; padding: clamp(36px, 5vw, 64px) var(--pad-x) var(--section-y); }
.consent-layout > .consent-side { grid-column: 1 / span 4; display: grid; gap: 14px; }
.consent-layout > .consent { grid-column: 6 / span 7; display: grid; gap: 18px; }
.consent > section { display: grid; gap: 16px; justify-items: start; padding: clamp(20px, 2.8vw, 36px); background: var(--paper-raised); box-shadow: 0 1px 0 var(--rule), 0 30px 50px -36px rgba(29, 31, 28, .5); }
.consent > section > form, .consent > section > dl, .consent > section > p { justify-self: stretch; }
.consent h2 { font-size: clamp(26px, 2.6vw, 38px); line-height: 1.06; letter-spacing: -.028em; }
.consent p { margin: 0; }
.consent dl { display: grid; grid-template-columns: minmax(120px, auto) minmax(0, 1fr); gap: 0; margin: 0; border-top: 1px solid var(--rule); }
.consent dt, .consent dd { margin: 0; padding: 11px 0; border-bottom: 1px solid var(--rule); font-size: 14.5px; }
.consent dt { padding-right: 20px; font: 600 12px/1.6 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.consent dd { overflow-wrap: anywhere; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
.consent-side #status { padding: 16px 18px; background: var(--sage); border-left: 3px solid var(--green); font-size: 15.5px; line-height: 1.55; color: var(--ink); }
.consent-side .button { justify-self: start; }
.consent-side a:not(.button) { color: var(--green-deep); font-weight: 500; }
main .consent #deny { --btn-bg: transparent; --btn-ink: var(--ink); --btn-hover: var(--paper-shade); clip-path: none; outline: 1px solid var(--rule-strong); outline-offset: -1px; }

/* -------------------------------------------------------------------- 404 */
.lost { display: grid; justify-items: start; gap: 18px; }
.lost .hero-lede { margin-top: 0; }

/* ------------------------------------------------- small shared pieces */
.tear--deep { --tear-bg: var(--forest); }
.tear--sage { --tear-bg: var(--sage); }
.band-grid--top { align-items: start; }
.band-grid > .band-side { grid-column: 7 / span 6; }
.band-grid--top > .band-copy { grid-column: 1 / span 5; }
.companion-lead { display: grid; gap: clamp(28px, 4vw, 48px); }
.band-side .btn-primary { margin-top: 1.4em; }
.band-side .editorial-caption { margin-top: 1.6em; }
.introduction-banner { position: relative; z-index: 61; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 14px var(--pad-x); background: var(--forest); color: #f6f1e4; font-size: 14.5px; line-height: 1.5; overflow-wrap: anywhere; }
.introduction-banner p { flex: 1 1 100%; margin: 0; max-width: 78ch; }
.introduction-banner p:first-child { font-weight: 600; }
.introduction-banner button { -webkit-appearance: none; appearance: none; min-height: 42px; padding: 9px 16px; border: 0; background: #f6f1e4; color: #1d1f1c; font: 600 14px/1.2 var(--body); clip-path: var(--cut); cursor: pointer; }
.introduction-banner button + button { background: rgba(246, 241, 228, .14); color: #f6f1e4; }
.introduction-banner button:disabled { opacity: .6; }
.introduction-banner input { min-height: 42px; width: min(100%, 320px); padding: 9px 12px; border: 1px solid rgba(246, 241, 228, .5); background: transparent; color: inherit; font: 400 16px/1.3 var(--body); }
.introduction-banner input::placeholder { color: #b7c3b3; }
.introduction-banner :focus-visible { outline: 2px solid #f6f1e4; outline-offset: 2px; }

/* -------------------------------------------------------------- responsive */
@media (max-width: 1100px) {
  .split > :first-child, .editorial-split > :first-child { grid-column: 1 / span 6; }
  .split > :nth-child(2), .editorial-split > :nth-child(2) { grid-column: 7 / span 6; }
  .pillar { grid-template-columns: 1fr; }
  .pillar-art { height: 220px; padding: 44px 22% 30px; }
  .loop-layout > .loop-dial-wrap { grid-column: 1 / span 5; }
  .loop-layout > .loop-side { grid-column: 6 / span 7; }
  .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-about { grid-column: 1 / -1; }
  .day-loop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .products-lead { grid-column: 1 / span 5; }
  .product-grid { grid-column: 6 / span 7; }
}
@media (max-width: 959px) {
  .hero--pillar, .hero--page { grid-template-columns: 1fr; padding-bottom: calc(var(--hill-h) + 28px); }
  .hero--pillar .sky-stage, .hero--page .sky-stage { top: 0; height: auto; }
  .hero--pillar .hero-art { width: min(64%, 300px); margin-top: 28px; justify-self: end; }
  .hero--page .hero-art { width: min(50%, 230px); margin-top: 22px; justify-self: end; }
  .hero--page .hero-art--door, .hero--page .hero-clock { width: min(38%, 170px); }
  .keep-going > h2, .keep-going-body { grid-column: 1 / -1; position: static; }
  .hero--pillar .timechip, .hero--page .timechip { left: auto; right: var(--pad-x); }
  .practice-title, .practice-steps, .products-lead, .product-grid { grid-column: 1 / -1; position: static; }
  .chapter-grid > .chapter-side, .chapter-grid > .chapter-body { grid-column: 1 / -1; position: static; }
  .prose-cols > :first-child, .prose-cols > :last-child { grid-column: 1 / -1; }
  .form-lead { position: static; }
  .guide > .guide-status, .guide > .guide-steps { grid-column: 1 / -1; position: static; }
  .auth-layout > :first-child, .auth-layout > :nth-child(2) { grid-column: 1 / -1; }
  .auth-art { display: none; }
  .chapter > .chapter-title, .chapter > :nth-child(2) { grid-column: 1 / -1; position: static; }
  .chapter-mark { display: none; }
  .consent-layout > .consent-side, .consent-layout > .consent { grid-column: 1 / -1; }
  .notes-grid { grid-template-columns: 1fr; }
  .welcome-new { grid-template-columns: minmax(96px, 150px) minmax(0, 1fr); }
  .welcome-steps { grid-template-columns: 1fr; }
  .chapter-side { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: center; }
  .chapter-figure, .chapter-figure--narrow, .chapter-figure--bubble { width: min(100%, 260px); justify-self: end; }
  .chapter-figure--narrow { width: min(70%, 150px); }
  .mission-hero-grid { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
  .three-up { grid-template-columns: 1fr; }
  .hero { --band: clamp(250px, 58vw, 400px); --hill-h: clamp(96px, 22vw, 150px); min-height: 0; padding-bottom: calc(var(--band) + 8px); }
  .hero--compact { --band: clamp(140px, 34vw, 230px); }
  .hero .sky-stage { left: 0; top: auto; bottom: 0; height: var(--band); }
  .hero .sky-clouds { left: 0; top: auto; bottom: calc(var(--hill-h) * .7); height: calc(var(--band) * .5); -webkit-mask-image: none; mask-image: none; }
  .hero .sky-glow { left: 10%; right: 10%; }
  .hero .sky-scrim { inset: 0; background: var(--scrim, transparent); }
  .hero-lede { max-width: 36em; }
  .hero .timechip { left: var(--pad-x); right: auto; bottom: 22px; }
  .hero .timechip--mini { left: auto; right: var(--pad-x); }
  .day-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 26px; }
  .band-grid > .band-copy, .band-grid > .band-side, .band-grid--top > .band-copy { grid-column: 1 / -1; }
  .band-grid > .band-art { grid-column: 1 / -1; grid-row: 1; width: min(78%, 360px); }
  .companion-lead { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; }
  .loop-layout > .loop-dial-wrap, .loop-layout > .loop-side { grid-column: 1 / -1; }
  .loop-layout > .loop-dial-wrap { width: min(82%, 380px); }
  .evidence-grid > .evidence-lead, .evidence-grid > .evidence-body { grid-column: 1 / -1; }
  .closing { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .closing-copy { grid-column: 1 / -1; grid-row: 2; }
  .closing .window-frame { width: min(70%, 190px); }
}
@media (max-width: 760px) {
  body { font-size: 16.5px; }
  .split > :first-child, .editorial-split > :first-child, .split > :nth-child(2), .editorial-split > :nth-child(2) { grid-column: 1 / -1; }
  .section-head, .editorial-head { margin-bottom: 24px; }
  .area-index { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pillars, .editorial-pillars { grid-template-columns: 1fr; }
  .essential-split { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid > :first-child, .footer-time { grid-column: 1 / -1; }
  .practice-step { padding: 68px 20px 22px; }
  .product { grid-template-columns: 72px minmax(0, 1fr); padding: 20px; }
}
@media (max-width: 560px) {
  .hero-actions > a, .btn-row > .btn { flex: 1 1 100%; }
  .hero .timechip { right: var(--pad-x); justify-content: center; }
  .hero .timechip--mini { left: auto; }
  .area-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .welcome-new { grid-template-columns: 1fr; padding-top: 44px; }
  .welcome-new-art { max-width: 104px; justify-self: start; }
  .timechip-range { width: clamp(96px, 30vw, 160px); }
  .day-grid { gap: 22px 12px; }
  .moment { padding: 16px 14px 20px; }
  .moment-art { height: 108px; margin: 14px 2% 18px; }
  .moment p { font-size: 14px; }
  .loop-steps, .editorial-loop { grid-template-columns: 1fr; }
  .loop-dial-mark { font-size: 10px; padding: 7px 9px; min-height: 28px; }
  .shift > div { grid-template-columns: 1fr; gap: 4px; }
  .companion-lead { grid-template-columns: 1fr; }
  .companion-art .window-frame { width: min(78%, 300px); }
  .film-frame { width: 132px; }
  .day-loop-grid { grid-template-columns: 1fr; }
  .comparison { grid-template-columns: 1fr; }
  .field-pair, .service-choice, .url-row { grid-template-columns: 1fr; }
  .member-bar-side { width: 100%; justify-content: space-between; }
  .consent dl { grid-template-columns: 1fr; }
  .consent dt { padding-bottom: 0; border-bottom: 0; }
  .chapter-side { grid-template-columns: 1fr; }
  .chapter-figure, .chapter-figure--bubble { justify-self: start; width: min(78%, 300px); }
  .chapter-figure--narrow { justify-self: start; width: 120px; }
  .mission-hero-grid { grid-template-columns: 1fr; }
  .mission-hero-art { width: min(62%, 240px); justify-self: end; margin-top: -18%; }
  .mission-hero-bottom .timechip { margin-left: 0; }
}

/* Home is one continuous story; the opening is about living well. */
.page-home .hero-title { font-size: clamp(68px, 22vw, 340px); font-style: normal; line-height: .91; letter-spacing: -.055em; }
.page-home .hero-title > span { white-space: nowrap; font-style: normal; }
@media (min-width: 1101px) {
  .page-home .hero-title { font-size: 155px; line-height: 142px; padding-top: 5px; }
}
.page-home .hero { min-height: 100svh; --hill-h: clamp(140px, 18vw, 240px); }
.page-home .hero-lede { max-width: 37em; margin-top: clamp(30px, 4vw, 62px); }
.page-home .hero .sky-stage { left: 65%; top: auto; bottom: 0; height: 280px; }
.page-home .hero .sky-clouds { left: 58%; top: auto; bottom: 90px; height: 250px; }
.page-home article.moment:hover { transform: rotate(-.7deg); background: var(--paper-raised); }
.page-home article.moment:nth-child(even):hover { transform: rotate(.6deg) translateY(12px); }
.preparation-list { margin: 22px 0; }
.preparation-list > div { padding: 19px 0; border-top: 1px solid var(--rule); }
.preparation-list dt { font: 400 clamp(21px, 2vw, 28px)/1.2 var(--display); }
.preparation-list dd { margin: 9px 0 0; }
.monthly-story-art { display: block; width: min(48%, 200px); margin: 38px 0 0; }
.daily-story-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 7vw, 120px); }
.daily-story-grid h2 { margin: 18px 0 26px; }
.daily-story-grid p { max-width: 45ch; }
.daily-story-note { margin: 48px 0 0; padding-top: 22px; border-top: 1px solid var(--rule); }
.story-details { margin-top: 28px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.story-details summary { padding: 18px 0; cursor: pointer; font-weight: 600; }
.story-details p { padding: 0 0 18px; }
@media (max-width: 959px) {
  .page-home .hero { min-height: 0; --band: clamp(210px, 45vw, 330px); padding-bottom: calc(var(--band) + 100px); }
  .page-home .hero .sky-stage { left: 0; height: var(--band); }
  .page-home .hero .sky-clouds { left: 0; bottom: calc(var(--hill-h) * .5); height: calc(var(--band) * .65); }
}
@media (max-width: 760px) {
  .daily-story-grid { grid-template-columns: 1fr; gap: 48px; }
}

/* ----------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; scroll-behavior: auto !important; }
  .will-reveal { opacity: 1; transform: none; }
  [data-drift] { transform: none; }
  .btn:hover, .btn-primary:hover, .btn-ghost:hover, main button:hover, .moment:hover { transform: none; }
  .clock-hand--second, .loop-dial-hand { transition: none; }
}