/* Huppy. — huppy.io
   Brand: Bricolage Grotesque for display, Readex Pro for text.
   The period is drawn, never typed. Red is the main dot; an area's colour only where the board shows it.
   Area colours live on data (the dots, the bars, the chips), never on buttons. */

:root {
  --page: #F4F2EE;
  --card: #FFFFFF;
  --ink: #15172A;
  --on-ink: #FFFFFF;
  --muted: #5A5C6C;
  --quiet: #6B6D7A;
  --line: #E8E4DD;
  --sunken: #ECE9E3;
  --black: #0B0B0F;
  --on-black: #F7F7F5;
  --muted-on-black: #A4A6B3;
  --line-on-black: #454852;
  --rule-on-black: #262730;
  --period: #FF4D4D;

  --health: #FF4D4D;
  --mind: #7C5CFF;
  --growth: #FFC928;
  --relationships: #FF2DAA;
  --money: #A8E034;
  --career: #2B6CFF;
  --fun: #22D3EE;
  --purpose: #FF9A3D;

  --display: "Bricolage Grotesque", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --text: "Readex Pro", "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  --gutter: 96px;
  --content: 1088px;
  --band: 88px;
  --radius-card: 28px;
  --shadow-card: 0 1px 2px rgba(21, 23, 42, 0.04), 0 12px 32px rgba(60, 52, 90, 0.10);
  --shadow-cta: 0 14px 30px rgba(30, 27, 46, 0.22);
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* legal pages */
  --measure: 40rem;
}

@media (max-width: 1199px) { :root { --gutter: 48px; --band: 72px; } }
@media (max-width: 767px) { :root { --gutter: 20px; --band: 56px; } }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--text);
  font-size: 16px;
  line-height: 1.5;
  font-weight: 400;
}

a { color: inherit; }
a:hover { color: var(--muted); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3, p { margin: 0; }
img { display: block; max-width: 100%; height: auto; }
button, input, textarea { font: inherit; color: inherit; }

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

/* The period: drawn, on the baseline, 0.17em wide, 0.10em after the last letter. */
.period {
  display: inline-block;
  width: 0.17em;
  height: 0.17em;
  margin-left: 0.10em;
  border-radius: 50%;
  background: var(--period);
  vertical-align: baseline;
}
.period.health { background: var(--health); }
.period.mind { background: var(--mind); }
.period.growth { background: var(--growth); }
.period.relationships { background: var(--relationships); }
.period.money { background: var(--money); }
.period.career { background: var(--career); }
.period.fun { background: var(--fun); }
.period.purpose { background: var(--purpose); }

.dot { display: inline-block; flex: none; border-radius: 50%; background: var(--ink); }
.bg-health { background: var(--health); }
.bg-mind { background: var(--mind); }
.bg-growth { background: var(--growth); }
.bg-relationships { background: var(--relationships); }
.bg-money { background: var(--money); }
.bg-career { background: var(--career); }
.bg-fun { background: var(--fun); }
.bg-purpose { background: var(--purpose); }

/* The lockup: the name and its period, nothing beside it. */
.lockup {
  display: inline-flex;
  align-items: baseline;
  font-family: var(--display);
  font-weight: 700;
  font-size: 26px;
  line-height: 1;
  letter-spacing: -0.04em;
  white-space: nowrap;
  color: var(--ink);
  text-decoration: none;
}
.lockup:hover { color: var(--ink); }

/* Nav */
.nav {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 22px var(--gutter);
}
.nav .lockup { padding: 7px 0; }
.nav nav { display: flex; align-items: center; gap: 28px; }
.nav nav a {
  display: inline-flex; align-items: center; min-height: 40px;
  font-size: 14px; font-weight: 500; color: var(--muted); text-decoration: none; white-space: nowrap;
}
.nav nav a:hover { color: var(--ink); }
.nav nav a[aria-current="page"] { font-weight: 600; color: var(--ink); }
.nav nav a.pill {
  padding: 0 18px; border-radius: 999px; background: var(--ink); color: var(--on-ink); font-weight: 600;
}
@media (max-width: 480px) {
  .nav { padding-top: 14px; padding-bottom: 14px; }
  .nav nav { gap: 14px; }
  .nav nav a { font-size: 13px; }
  .nav nav a.pill { padding: 0 14px; }
}

/* Bands */
.band { position: relative; overflow: hidden; padding: var(--band) var(--gutter); background: var(--page); }
.band--card { background: var(--card); }
.band--black { background: var(--black); color: var(--on-black); }
.band--black :focus-visible { outline-color: var(--on-black); }
.wrap { position: relative; max-width: var(--content); margin: 0 auto; display: flex; flex-direction: column; gap: 28px; }
.aura { position: absolute; inset: 0; pointer-events: none; }
.aura--light {
  background:
    radial-gradient(40% 60% at 8% 0%, rgba(124, 92, 255, 0.16), transparent 70%),
    radial-gradient(36% 50% at 96% 18%, rgba(255, 45, 170, 0.12), transparent 70%),
    radial-gradient(44% 56% at 80% 100%, rgba(34, 211, 238, 0.14), transparent 70%),
    radial-gradient(30% 44% at 4% 92%, rgba(255, 201, 40, 0.12), transparent 70%);
}
.aura--dark {
  background:
    radial-gradient(40% 60% at 8% 0%, rgba(124, 92, 255, 0.30), transparent 70%),
    radial-gradient(36% 50% at 96% 18%, rgba(255, 45, 170, 0.22), transparent 70%),
    radial-gradient(44% 56% at 80% 100%, rgba(34, 211, 238, 0.26), transparent 70%),
    radial-gradient(30% 44% at 4% 92%, rgba(255, 201, 40, 0.20), transparent 70%);
}

.eyebrow { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.band--black .eyebrow { color: var(--muted-on-black); }
.display {
  font-family: var(--display); font-weight: 700; line-height: 1.04; letter-spacing: -0.03em; color: var(--ink);
}
.band--black .display { color: var(--on-black); }
.display .line { display: block; }
.head { display: flex; flex-direction: column; gap: 10px; }
.h-section { font-size: clamp(32px, 4.4vw, 44px); }
.lede { font-size: clamp(17px, 2vw, 20px); line-height: 1.5; color: var(--muted); }

.card {
  background: var(--card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 26px 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Hero */
.hero { padding: 40px var(--gutter) 72px; }
.hero__row { display: flex; align-items: center; gap: 56px; }
.hero__text { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.hero h1 { font-size: clamp(44px, 6.6vw, 84px); }
.hero__mission { font-size: clamp(18px, 1.9vw, 21px); line-height: 1.5; max-width: 560px; }

/* The early-access form */
.join { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.join__row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.join__input {
  min-height: 52px; width: 300px; max-width: 100%; padding: 0 20px; border-radius: 999px;
  background: var(--card); border: 1px solid var(--line); font-size: 15px; color: var(--ink);
}
.join__input::placeholder { color: var(--muted); opacity: 1; }
.cta {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 26px;
  border: 0; border-radius: 999px; background: var(--ink); color: var(--on-ink);
  font-family: var(--text); font-size: 15px; font-weight: 600; text-decoration: none; white-space: nowrap;
  box-shadow: var(--shadow-cta); cursor: pointer;
}
.cta:hover { color: var(--on-ink); }
.cta[disabled] { opacity: 0.6; cursor: default; }
.join__note, .join__doors { font-size: 12px; color: var(--muted); }
.join__doors { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.join__doors a { font-weight: 600; color: var(--ink); text-underline-offset: 3px; }
.join__status { font-size: 13px; color: var(--ink); min-height: 0; }
.join__status:empty { display: none; }
.join__done {
  display: none; font-family: var(--display); font-weight: 700; font-size: 26px; line-height: 1.1; letter-spacing: -0.02em;
}
.join.is-done .join__row { display: none; }
.join.is-done .join__done { display: block; }
.hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.join--center { align-items: center; text-align: center; }
.join--center .join__row { justify-content: center; }
.band--black .join__input { background: rgba(255, 255, 255, 0.08); border-color: var(--line-on-black); color: var(--on-black); }
.band--black .join__input::placeholder { color: var(--muted-on-black); }
.band--black .cta { background: var(--on-black); color: var(--ink); }
.band--black .join__note { color: var(--muted-on-black); }
.band--black .join__status { color: var(--on-black); }

/* The phone frame around a picture of the app */
.phone {
  flex: none; position: relative; overflow: hidden; background: var(--page);
  width: 242px; height: 523px; border-radius: 34px;
  box-shadow: var(--shadow-card); outline: 6px solid var(--ink); outline-offset: -1px;
}
.phone--small { width: 164px; height: 354px; border-radius: 24px; }
.phone img { width: 100%; height: 100%; }

/* The splash: the period opens into the eight */
.band--splash { padding: 36px var(--gutter) 84px; }
.splash {
  --step: min(100px, (100vw - 2 * var(--gutter) - 26px) / 7);
  --d: 26px;
  position: relative; height: 164px;
}
.splash__dot {
  position: absolute; top: 83px; left: calc(50% + var(--dx) - var(--d) / 2); width: var(--d); height: var(--d);
  animation: sp-travel 900ms var(--ease) calc(300ms + var(--i) * 60ms) both;
}
.splash__dot i {
  display: block; width: 100%; height: 100%; border-radius: 50%; background: var(--c);
  animation: sp-hop 420ms ease-out calc(1600ms + var(--i) * 600ms) both;
}
.splash__cover {
  position: absolute; left: calc(50% - 21px); top: 75px; width: 42px; height: 42px; border-radius: 50%;
  background: var(--period); opacity: 0; animation: sp-cover 480ms linear 600ms both;
}
.splash__name {
  position: absolute; top: 123px; left: calc(50% + var(--dx) - 70px); width: 140px; text-align: center;
  font-family: var(--display); font-weight: 700; font-size: 16px; letter-spacing: -0.01em; white-space: nowrap;
  color: var(--c); animation: sp-say 300ms ease-out calc(1720ms + var(--i) * 600ms) both;
}
.sp0 { --i: 0; --dx: calc(var(--step) * -3.5); --c: var(--health); }
.sp1 { --i: 1; --dx: calc(var(--step) * -2.5); --c: var(--mind); }
.sp2 { --i: 2; --dx: calc(var(--step) * -1.5); --c: var(--growth); }
.sp3 { --i: 3; --dx: calc(var(--step) * -0.5); --c: var(--relationships); }
.sp4 { --i: 4; --dx: calc(var(--step) * 0.5); --c: var(--money); }
.sp5 { --i: 5; --dx: calc(var(--step) * 1.5); --c: var(--career); }
.sp6 { --i: 6; --dx: calc(var(--step) * 2.5); --c: var(--fun); }
.sp7 { --i: 7; --dx: calc(var(--step) * 3.5); --c: var(--purpose); }
@keyframes sp-travel { from { transform: translateX(calc(var(--dx) * -1)) scale(0.4); } to { transform: none; } }
@keyframes sp-hop { 0% { transform: none; } 48% { transform: translateY(-22px) scale(1.3); } 100% { transform: none; } }
@keyframes sp-cover { from { opacity: 1; } to { opacity: 0; } }
@keyframes sp-say { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* With the script on, the round waits for the section to scroll into view. */
.js .splash:not(.is-playing) * { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .splash * { animation: none !important; } }
.splash__copy { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.splash__copy h2 { font-size: clamp(24px, 3vw, 30px); color: var(--muted); }
.splash__copy p { font-size: 16px; color: var(--quiet); }
@media (max-width: 640px) {
  .band--splash { padding-top: 16px; padding-bottom: 56px; }
  .splash { --d: 20px; height: 150px; }
  .splash__dot { top: 62px; }
  .splash__cover { top: 55px; left: calc(50% - 17px); width: 34px; height: 34px; }
  .splash__name { top: 96px; font-size: 13px; width: 110px; left: calc(50% + var(--dx) - 55px); }
  .sp1.splash__name, .sp3.splash__name, .sp5.splash__name, .sp7.splash__name { top: 118px; }
}

/* Why Huppy */
.why__head { display: flex; flex-direction: column; gap: 14px; }
.why h2 { font-size: clamp(34px, 5vw, 56px); }
.why__p { font-size: clamp(17px, 1.8vw, 19px); line-height: 1.5; color: var(--muted-on-black); max-width: 900px; }
.claims { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 0; padding: 0; list-style: none; }
.claim {
  background: var(--ink); border: 1px solid var(--line-on-black); border-radius: var(--radius-card);
  padding: 26px 28px; display: flex; flex-direction: column; gap: 10px;
}
.claim .dot { width: 16px; height: 16px; }
.claim h3 { font-family: var(--display); font-weight: 700; font-size: 22px; letter-spacing: -0.02em; line-height: 1.1; color: var(--on-black); }
.claim p { font-size: 14px; line-height: 1.5; color: var(--muted-on-black); }

/* The idea */
.idea__row { display: flex; gap: 56px; align-items: flex-start; }
.idea__text { flex: 1.2 1 0; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.idea h2 { font-size: clamp(34px, 4.4vw, 48px); display: flex; flex-direction: column; gap: 2px; }
.idea__p { font-size: 18px; line-height: 1.5; max-width: 620px; }
.idea__quote { flex: 1 1 0; min-width: 0; }
.quote { padding: 30px 32px; gap: 14px; margin: 0; }
.quote p:first-child { font-family: var(--display); font-weight: 700; font-size: clamp(24px, 2.6vw, 30px); line-height: 1.15; letter-spacing: -0.02em; }
.quote p:last-child { font-size: 16px; color: var(--muted); }

/* The rhythm */
.rhythm { padding: 28px 32px 30px; }
.rhythm ol { display: flex; gap: 20px; margin: 0; padding: 0; list-style: none; }
.rhythm li { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.rhythm__dot { height: 64px; display: flex; align-items: center; }
.rhythm h3 { font-family: var(--display); font-weight: 700; font-size: 20px; letter-spacing: -0.02em; line-height: 1.1; }
.rhythm p { font-size: 12px; line-height: 1.4; color: var(--muted); }
.d16 { width: 16px; height: 16px; } .d24 { width: 24px; height: 24px; } .d34 { width: 34px; height: 34px; }
.d46 { width: 46px; height: 46px; } .d60 { width: 60px; height: 60px; }
.connect { display: flex; align-items: center; gap: 16px; font-size: 16px; }
.connect .dot { width: 10px; height: 10px; }

/* It logs itself */
.logs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 0; padding: 0; list-style: none; }
.logs .card { padding: 22px 24px; gap: 8px; }
.logs h3 { font-family: var(--display); font-weight: 700; font-size: 24px; line-height: 1; letter-spacing: -0.03em; white-space: nowrap; }
.logs p { font-size: 12px; line-height: 1.4; color: var(--muted); }

/* The story teaser */
.teaser__row { display: flex; gap: 56px; align-items: center; }
.teaser__text { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.teaser h2 { font-size: clamp(28px, 3.4vw, 36px); }
.teaser p { font-size: 17px; color: var(--muted); max-width: 640px; }
.more { font-size: 15px; font-weight: 600; text-decoration: none; align-self: flex-start; min-height: 44px; display: inline-flex; align-items: center; }

/* Be Huppy. */
.close { padding-bottom: 80px; }
.close__in { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 22px; }
.close h2 { font-size: clamp(48px, 6.4vw, 72px); line-height: 1; white-space: nowrap; }
.close--story h2 { font-size: clamp(44px, 5.4vw, 60px); }
.close p.close__p { font-size: 18px; color: var(--muted-on-black); max-width: 560px; }
.close--story { padding: 72px var(--gutter); }
.close--story p.close__p { font-size: 17px; }

/* Footer */
.foot-band { background: var(--black); }
.foot {
  display: flex; align-items: center; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap;
  max-width: 1280px; margin: 0 auto; padding: 36px var(--gutter) 40px; border-top: 1px solid var(--rule-on-black);
  color: var(--muted-on-black); font-size: 13px;
}
.foot :focus-visible { outline-color: var(--on-black); }
.foot__brand { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.foot .lockup { font-size: 20px; color: var(--on-black); }
.foot nav { display: flex; gap: 6px 22px; flex-wrap: wrap; }
.foot nav a { color: var(--muted-on-black); text-decoration: none; min-height: 24px; display: inline-flex; align-items: center; }
.foot nav a:hover { color: var(--on-black); }

/* Try a week with Huppy */
.cmp { position: relative; }
.cmp > input, .wk > input { position: absolute; top: 0; left: 0; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.cmp label, .wk label { cursor: pointer; }
.ui { display: flex; flex-direction: column; gap: 10px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 20px; border: 0;
  border-radius: 999px; background: var(--ink); color: var(--on-ink); font-size: 14px; font-weight: 600; white-space: nowrap;
}
.btn--quiet { background: var(--sunken); color: var(--ink); min-height: 40px; padding: 0 14px; font-size: 13px; }
.meta12 { font-size: 12px; color: var(--muted); }
.t-display { font-family: var(--display); font-weight: 700; letter-spacing: -0.02em; }
.between { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.d8 { width: 8px; height: 8px; } .d10 { width: 10px; height: 10px; }

.wk { position: relative; }
.wk__body { display: flex; align-items: center; gap: 48px; }
.wk__rows { width: 350px; flex: none; display: flex; flex-direction: column; gap: 4px; }
.wk__row { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 20px; color: var(--muted); min-height: 52px; }
.wk__day { width: 52px; flex: none; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }
.wk__row .dot { width: 10px; height: 10px; opacity: 0.45; }
.wk__title { font-family: var(--display); font-weight: 700; font-size: 18px; letter-spacing: -0.02em; line-height: 1.15; }
.wk__stage { flex: 1 1 0; min-width: 0; min-height: 380px; display: flex; align-items: center; }
.pane { display: none; align-items: center; gap: 44px; width: 100%; }
.pane__text { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.pane__title { font-family: var(--display); font-weight: 700; font-size: 30px; line-height: 1.05; letter-spacing: -0.03em; }
.pane__text p { font-size: 16px; color: var(--muted); }
.demo { flex: none; width: 344px; max-width: 100%; min-height: 330px; padding: 22px 24px; gap: 0; justify-content: flex-start; }

#wk1:checked ~ .wk__body .row1, #wk2:checked ~ .wk__body .row2, #wk3:checked ~ .wk__body .row3,
#wk4:checked ~ .wk__body .row4, #wk5:checked ~ .wk__body .row5, #wk6:checked ~ .wk__body .row6 { background: var(--page); color: var(--ink); }
#wk1:checked ~ .wk__body .row1 .dot, #wk2:checked ~ .wk__body .row2 .dot, #wk3:checked ~ .wk__body .row3 .dot,
#wk4:checked ~ .wk__body .row4 .dot, #wk5:checked ~ .wk__body .row5 .dot, #wk6:checked ~ .wk__body .row6 .dot { opacity: 1; }
#wk1:checked ~ .wk__body .pane1, #wk2:checked ~ .wk__body .pane2, #wk3:checked ~ .wk__body .pane3,
#wk4:checked ~ .wk__body .pane4, #wk5:checked ~ .wk__body .pane5, #wk6:checked ~ .wk__body .pane6 { display: flex; animation: pane-in 280ms ease-out; }
#wk1:focus-visible ~ .wk__body .row1, #wk2:focus-visible ~ .wk__body .row2, #wk3:focus-visible ~ .wk__body .row3,
#wk4:focus-visible ~ .wk__body .row4, #wk5:focus-visible ~ .wk__body .row5, #wk6:focus-visible ~ .wk__body .row6 { outline: 2px solid var(--ink); outline-offset: 2px; }
@keyframes pane-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .pane { animation: none !important; } }

/* 1 · the check-in */
.ck .ui { gap: 12px; align-items: stretch; }
.ck__top { display: flex; align-items: center; gap: 16px; }
.ck .face { display: none; flex: none; }
.ck__q { display: flex; flex-direction: column; gap: 2px; }
.ck__q .t-display { font-size: 22px; }
.ck .word { font-family: var(--display); font-weight: 700; font-size: 20px; letter-spacing: -0.01em; min-height: 24px; line-height: 24px; color: var(--muted); }
.ck .word span { display: none; }
.ck__track { position: relative; }
.ck__track::before {
  content: ""; position: absolute; left: 18px; right: 18px; top: 8.5px; height: 5px; border-radius: 3px;
  background: linear-gradient(90deg, #7C5CFF, #FF2DAA, #FF4D4D, #FFC928); opacity: 0.55;
}
.ck__stops { position: relative; display: flex; justify-content: space-between; }
.ck__stops label { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 8px; padding-bottom: 6px; }
.ck .stopbox { height: 22px; display: flex; align-items: center; justify-content: center; }
.ck .stop { width: 10px; height: 10px; border-radius: 50%; background: var(--muted); opacity: 0.35; transition: width 0.15s, height 0.15s, box-shadow 0.15s; }
.ck .lab { font-size: 11px; line-height: 1.3; color: var(--muted); }
.ck__line { display: flex; flex-direction: column; gap: 2px; border-radius: 14px; background: var(--page); padding: 10px 12px; }
.ck__line textarea { display: block; width: 100%; border: 0; background: transparent; resize: none; font-size: 13px; line-height: 1.5; padding: 0; }
.ck__count { align-self: flex-end; font-size: 11px; color: var(--muted); display: none; }
.js .ck__count { display: block; }
.on { display: none; }
#ck1:checked ~ .ui .f1, #ck2:checked ~ .ui .f2, #ck3:checked ~ .ui .f3, #ck4:checked ~ .ui .f4, #ck5:checked ~ .ui .f5 { display: block; }
#ck1:checked ~ .ui .w1, #ck2:checked ~ .ui .w2, #ck3:checked ~ .ui .w3, #ck4:checked ~ .ui .w4, #ck5:checked ~ .ui .w5 { display: inline; }
#ck1:checked ~ .ui label[for=ck1] .stop, #ck2:checked ~ .ui label[for=ck2] .stop, #ck3:checked ~ .ui label[for=ck3] .stop,
#ck4:checked ~ .ui label[for=ck4] .stop, #ck5:checked ~ .ui label[for=ck5] .stop { width: 22px; height: 22px; opacity: 1; background: var(--mind); box-shadow: 0 0 0 6px #7C5CFF33; }
#ck1:checked ~ .ui label[for=ck1] .lab, #ck2:checked ~ .ui label[for=ck2] .lab, #ck3:checked ~ .ui label[for=ck3] .lab,
#ck4:checked ~ .ui label[for=ck4] .lab, #ck5:checked ~ .ui label[for=ck5] .lab { color: var(--ink); font-weight: 600; }
#ck1:focus-visible ~ .ui label[for=ck1], #ck2:focus-visible ~ .ui label[for=ck2], #ck3:focus-visible ~ .ui label[for=ck3],
#ck4:focus-visible ~ .ui label[for=ck4], #ck5:focus-visible ~ .ui label[for=ck5],
#ckl:focus-visible ~ .ui label[for=ckl] { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 12px; }
#ckl:checked ~ .ui label[for=ckl] .off { display: none; }
#ckl:checked ~ .ui label[for=ckl] .on { display: inline; }

/* 2 · WhatsApp */
.wa .ui { gap: 8px; background: #ECE5DD; border-radius: 18px; padding: 12px; margin: -4px; }
.wa__head { display: flex; align-items: center; gap: 8px; padding-bottom: 6px; border-bottom: 1px solid rgba(0, 0, 0, 0.06); }
.wa__avatar { width: 26px; height: 26px; border-radius: 13px; background: var(--ink); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.wa__avatar i { width: 13px; height: 13px; border-radius: 50%; background: var(--period); }
.wa__who { display: flex; flex-direction: column; font-size: 13px; font-weight: 600; line-height: 1.3; }
.wa__who small { font-size: 10px; font-weight: 400; color: var(--muted); }
.wa__log { display: flex; flex-direction: column; gap: 8px; }
.wa .bub { max-width: 86%; padding: 8px 11px; border-radius: 14px; font-size: 12.5px; line-height: 1.4; }
.wa .me { background: #DCF8C6; align-self: flex-end; border-bottom-right-radius: 4px; }
.wa .them { background: var(--card); align-self: flex-start; border-bottom-left-radius: 4px; }
.wa .reply, .wa .sent { display: none; }
.wa .draft { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.wa .draft__field { flex: 1 1 auto; background: var(--card); border-radius: 999px; padding: 8px 12px; font-size: 12px; color: var(--muted); }
.wa .draft__send { width: 34px; height: 34px; border-radius: 17px; background: #25D366; display: flex; align-items: center; justify-content: center; flex: none; }
.wa .sent { font-size: 11px; color: var(--muted); text-align: center; margin-top: 4px; }
#wa1:checked ~ .ui .reply { display: block; animation: pane-in 260ms ease-out 500ms both; }
#wa1:checked ~ .ui .reply + .reply { animation-delay: 1300ms; }
#wa1:checked ~ .ui .sent { display: block; animation: pane-in 260ms ease-out 1700ms both; }
#wa1:checked ~ .ui .draft { display: none; }
#wa1:focus-visible ~ .ui .draft { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 999px; }
@media (prefers-reduced-motion: reduce) { .wa .reply, .wa .sent { animation: none !important; } }

/* 3 · the set card */
.tr__name { display: flex; flex-direction: column; }
.tr__name .t-display { font-size: 18px; }
.tr .set { display: grid; grid-template-columns: 28px 64px 56px 56px 32px; align-items: center; gap: 8px; font-size: 13px; padding: 6px 0; border-top: 1px solid var(--line); }
.tr .set--head { border-top: 0; padding-top: 0; font-size: 10px; letter-spacing: 0.06em; color: var(--muted); }
.tr .set .q { color: var(--muted); }
.tr .set b { font-weight: 600; }
.tr .box { width: 24px; height: 24px; border-radius: 12px; border: 1.5px solid var(--line); display: flex; align-items: center; justify-content: center; background: var(--card); }
.tr .box--done, #tr3:checked ~ .ui .box3 { background: var(--ink); border-color: var(--ink); }
.tr .tick3, .tr .best, .tr .rest { display: none; }
.tr__status { display: flex; align-items: center; gap: 10px; min-height: 28px; }
.tr .best { align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--health); color: #FFFFFF; font-size: 12px; font-weight: 600; }
.tr .rest { align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px; border-radius: 14px; background: var(--ink); color: #FFFFFF; font-size: 13px; }
.tr .rest b { font-family: var(--display); font-size: 18px; }
.tr .rest__acts { display: flex; gap: 6px; }
.tr .rest button { min-height: 28px; padding: 4px 10px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.14); color: #FFFFFF; white-space: nowrap; font-size: 13px; cursor: pointer; }
.tr .rest button:focus-visible { outline-color: #FFFFFF; }
#tr3:checked ~ .ui .tick3 { display: block; }
#tr3:checked ~ .ui .best { display: inline-flex; }
#tr3:checked ~ .ui .rest:not(.is-off) { display: flex; }
#tr3:checked ~ .ui .hint { display: none; }
#tr3:focus-visible ~ .ui label[for=tr3] { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 6px; }

/* 4 · the shared commitment */
.sh__kicker { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.sh__title { font-size: 20px; line-height: 1.2; }
.sh__people { display: flex; align-items: center; gap: 8px; }
.avatar { width: 24px; height: 24px; border-radius: 12px; color: #FFFFFF; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; flex: none; border: 2px solid var(--card); }
.avatar--m { background: linear-gradient(145deg, #FF2DAA, #FF2DAAAA); }
.avatar--r { background: linear-gradient(145deg, #FF4D4D, #FF4D4DAA); margin-left: -4px; }
.sh__count { display: flex; justify-content: space-between; font-size: 13px; }
.sh__count b { font-weight: 600; }
.sh__count span { color: var(--muted); }
.sh .bar { height: 8px; border-radius: 4px; background: var(--sunken); overflow: hidden; }
.sh .fill { height: 100%; width: 50%; background: var(--relationships); border-radius: 4px; transition: width 0.3s; }
.sh__feed { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--muted); }
.sh .two { display: none; }
.sh .two.now { color: var(--ink); }
#sh1:checked ~ .ui .fill { width: 100%; }
#sh1:checked ~ .ui .one { display: none; }
#sh1:checked ~ .ui .two { display: block; }
#sh1:checked ~ .ui .logbtn { background: var(--sunken); color: var(--muted); }
#sh1:focus-visible ~ .ui .logbtn { outline: 2px solid var(--ink); outline-offset: 2px; }
.logbtn { align-self: flex-start; }
@media (prefers-reduced-motion: reduce) { .sh .fill { transition: none; } }

/* 5 · the Sunday Pulse */
.pu .ui { gap: 12px; }
.pu__q { font-size: 22px; line-height: 1.15; }
.pu__pills { display: flex; justify-content: space-between; gap: 4px; }
.pu__pills label { flex: 1 1 0; min-width: 0; max-width: 30px; }
.pu .pill { height: 34px; border-radius: 10px; background: var(--card); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; }
.pu__ends { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); }
.pu .tags { display: flex; flex-direction: column; gap: 8px; opacity: 0.25; transition: opacity 0.2s; pointer-events: none; border: 0; margin: 0; padding: 0; min-width: 0; }
.pu .tags legend { padding: 0; font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.pu .chips { display: flex; gap: 6px; flex-wrap: wrap; }
.pu .chip { position: relative; display: inline-flex; }
.pu .chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.pu .chip span { padding: 6px 12px; border-radius: 999px; background: var(--sunken); font-size: 12px; font-weight: 600; }
.pu .chip input:checked + span { background: var(--career); color: #FFFFFF; }
.pu .chip input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.pu .next { align-self: flex-start; opacity: 0.35; transition: opacity 0.2s; }
.pu > input:checked ~ .ui .tags { opacity: 1; pointer-events: auto; }
.pu > input:checked ~ .ui .next { opacity: 1; }
#pu1:checked ~ .ui label[for=pu1] .pill, #pu2:checked ~ .ui label[for=pu2] .pill, #pu3:checked ~ .ui label[for=pu3] .pill,
#pu4:checked ~ .ui label[for=pu4] .pill, #pu5:checked ~ .ui label[for=pu5] .pill, #pu6:checked ~ .ui label[for=pu6] .pill,
#pu7:checked ~ .ui label[for=pu7] .pill, #pu8:checked ~ .ui label[for=pu8] .pill, #pu9:checked ~ .ui label[for=pu9] .pill,
#pu10:checked ~ .ui label[for=pu10] .pill { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
#pu1:focus-visible ~ .ui label[for=pu1] .pill, #pu2:focus-visible ~ .ui label[for=pu2] .pill, #pu3:focus-visible ~ .ui label[for=pu3] .pill,
#pu4:focus-visible ~ .ui label[for=pu4] .pill, #pu5:focus-visible ~ .ui label[for=pu5] .pill, #pu6:focus-visible ~ .ui label[for=pu6] .pill,
#pu7:focus-visible ~ .ui label[for=pu7] .pill, #pu8:focus-visible ~ .ui label[for=pu8] .pill, #pu9:focus-visible ~ .ui label[for=pu9] .pill,
#pu10:focus-visible ~ .ui label[for=pu10] .pill { outline: 2px solid var(--ink); outline-offset: 2px; }

/* 6 · the Monthly Review */
.rv .cover, .rv .step { flex-direction: column; gap: 10px; }
.rv .cover { display: flex; }
.rv .step { display: none; }
.rv__top { display: flex; align-items: center; gap: 14px; }
.rv__top svg { flex: none; }
.rv__name { display: flex; flex-direction: column; gap: 2px; }
.rv__name .t-display { font-size: 22px; }
.rv__stats { display: flex; gap: 8px; }
.rv__stats div { flex: 1 1 0; display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 12px; background: var(--page); }
.rv__stats b { font-family: var(--display); font-weight: 700; font-size: 16px; }
.rv__stats span { font-size: 10px; color: var(--muted); }
.rv .step .t-display { font-size: 20px; }
.rv__list { margin: 0; padding: 0; list-style: none; }
.rv__list li { display: flex; align-items: center; gap: 10px; font-size: 13px; padding: 6px 0; border-top: 1px solid var(--line); }
.rv__list li span:nth-child(2) { flex: 1 1 auto; }
.rv__acts { display: flex; gap: 8px; flex-wrap: wrap; }
.rv .start { align-self: flex-start; }
#rv1:checked ~ .ui .cover { display: none; }
#rv1:checked ~ .ui .step { display: flex; animation: pane-in 240ms ease-out; }
#rv1:focus-visible ~ .ui label[for=rv1] { outline: 2px solid var(--ink); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .rv .step { animation: none !important; } }

/* The story page */
.story-hero { padding: 40px var(--gutter) 24px; }
.story-hero__in { display: flex; flex-direction: column; gap: 14px; max-width: 760px; }
.story-hero h1 { font-size: clamp(40px, 5.4vw, 64px); }
.story-hero p { font-size: clamp(18px, 2vw, 22px); color: var(--muted); }
.story-body { padding: 24px var(--gutter) 64px; }
.story__row { display: flex; gap: 64px; align-items: flex-start; }
.story__text { flex: 1 1 0; min-width: 0; max-width: 700px; display: flex; flex-direction: column; gap: 22px; }
.story__text > p { font-size: clamp(17px, 1.7vw, 19px); line-height: 1.6; }
.story__text blockquote { margin: 8px 0; padding: 0 0 0 22px; border-left: 3px solid var(--period); display: flex; flex-direction: column; gap: 6px; }
.story__text blockquote p:first-child { font-family: var(--display); font-weight: 700; font-size: 26px; line-height: 1.2; letter-spacing: -0.02em; }
.story__text blockquote p:not(:first-child) { font-size: 13px; color: var(--muted); }
.founder { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.founder__tile { width: 40px; height: 40px; border-radius: 12px; background: var(--ink); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.founder__tile i { width: 20px; height: 20px; border-radius: 50%; background: var(--period); }
.founder div { display: flex; flex-direction: column; }
.founder b { font-size: 15px; font-weight: 600; }
.founder span { font-size: 13px; color: var(--muted); }
.story__aside { flex: none; display: flex; flex-direction: column; gap: 14px; padding-top: 12px; width: 300px; }
.story__aside > p { font-size: 12px; line-height: 1.4; color: var(--muted); }

/* The story's check-in card: Okay, Good, Great and back, on a slow loop */
.st { width: 300px; max-width: 100%; padding: 22px 22px 20px; gap: 14px; }
.st__q { font-size: 24px; }
.st__face { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.st__faces { position: relative; width: 96px; height: 96px; }
.st .face { position: absolute; inset: 0; display: block; }
.st__word { position: relative; height: 24px; width: 100%; text-align: center; font-family: var(--display); font-weight: 700; font-size: 20px; letter-spacing: -0.01em; }
.st__word span { position: absolute; left: 0; right: 0; }
.st .face, .st__word span { animation-duration: 7.5s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
.st .f3, .st .w3 { animation-name: stface3; }
.st .f4, .st .w4 { animation-name: stface4; }
.st .f5, .st .w5 { animation-name: stface5; }
.st__track { position: relative; height: 28px; margin: 0 10px; }
.st__track::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 5px; margin-top: -2.5px; border-radius: 3px;
  background: linear-gradient(90deg, #7C5CFF, #FF2DAA, #FF4D4D, #FFC928); opacity: 0.55;
}
.st__track i { position: absolute; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--muted); opacity: 0.35; }
.st__track i:nth-child(1) { left: 0; } .st__track i:nth-child(2) { left: 25%; } .st__track i:nth-child(3) { left: 50%; }
.st__track i:nth-child(4) { left: 75%; } .st__track i:nth-child(5) { left: 100%; }
.st .knob { position: absolute; top: 50%; left: 75%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: var(--mind); box-shadow: 0 0 0 6px #7C5CFF33; animation: stknob 7.5s ease-in-out infinite; }
.st__labs { display: flex; }
.st__labs span { flex: 1 1 0; text-align: center; font-size: 11px; color: var(--muted); }
.st__line { border-radius: 14px; background: var(--page); padding: 10px 12px; font-size: 13px; }
.st__line span { float: right; color: var(--muted); font-size: 11px; line-height: 19.5px; }
@keyframes stface3 { 0%, 30% { opacity: 1; } 34%, 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes stface4 { 0%, 30% { opacity: 0; } 34%, 63% { opacity: 1; } 67%, 100% { opacity: 0; } }
@keyframes stface5 { 0%, 63% { opacity: 0; } 67%, 96% { opacity: 1; } 100% { opacity: 0; } }
@keyframes stknob { 0%, 30% { left: 50%; } 34%, 63% { left: 75%; } 67%, 96% { left: 100%; } 100% { left: 50%; } }
@media (prefers-reduced-motion: reduce) {
  .st * { animation: none !important; }
  .st .f3, .st .f5, .st .w3, .st .w5 { opacity: 0; }
  .st .f4, .st .w4 { opacity: 1; }
}

/* The timeline */
.timeline { display: flex; gap: 24px; margin: 0; padding: 0; list-style: none; }
.timeline li { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.timeline__mark { display: flex; align-items: center; gap: 10px; }
.timeline__mark .dot { width: 12px; height: 12px; }
.timeline__mark::after { content: ""; flex: 1 1 auto; height: 2px; background: var(--line); }
.timeline h3 { font-family: var(--display); font-weight: 700; font-size: 18px; letter-spacing: -0.02em; line-height: 1.2; }
.timeline p { font-size: 12px; line-height: 1.4; color: var(--muted); }
.h-timeline { font-size: clamp(28px, 3.4vw, 36px); }

/* Small pages: the thank-you, the invite, not found */
.note-page { min-height: 60vh; display: flex; align-items: center; padding: 56px var(--gutter) 88px; }
.note { max-width: 560px; margin: 0 auto; width: 100%; display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.note h1 { font-size: clamp(36px, 5vw, 56px); }
.note p { font-size: 18px; color: var(--muted); }
.note .actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.cta--quiet { background: var(--sunken); color: var(--ink); box-shadow: none; }
.cta--quiet:hover { color: var(--ink); }

/* 1024 and below */
@media (max-width: 1199px) {
  .hero__row { gap: 40px; }
  .wk__body { gap: 32px; }
  .wk__rows { width: 290px; }
  .wk__row { padding: 12px 14px; gap: 12px; }
  .pane { gap: 28px; }
  .pane__title { font-size: 26px; }
  .idea__row { gap: 40px; }
  .story__row { gap: 40px; }
}

/* 768: the week's rows above its stage */
@media (max-width: 959px) {
  .wk__body { flex-direction: column; align-items: stretch; gap: 24px; }
  .wk__rows { width: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .wk__row { flex-direction: row; flex-wrap: wrap; gap: 4px 10px; padding: 12px 14px; align-items: center; }
  .wk__day { width: auto; }
  .wk__title { flex-basis: 100%; font-size: 16px; }
  .wk__stage { flex: none; min-height: 0; }
  .pane { justify-content: center; }
  .pane__text { max-width: 320px; }
  .rhythm ol { flex-direction: column; gap: 4px; }
  .rhythm li { display: grid; grid-template-columns: 64px 1fr; column-gap: 16px; row-gap: 2px; align-items: center; }
  .rhythm__dot { grid-row: 1 / span 2; justify-content: center; }
  .rhythm h3 { align-self: end; }
  .rhythm p { align-self: start; font-size: 13px; }
  .logs { grid-template-columns: repeat(2, 1fr); }
  .claims { grid-template-columns: 1fr; }
  .idea__row { flex-direction: column; }
  .idea__text, .idea__quote { flex: none; width: 100%; }
  .timeline { flex-direction: column; gap: 0; }
  .timeline li { display: grid; grid-template-columns: 12px 1fr; column-gap: 16px; row-gap: 2px; padding-bottom: 18px; position: relative; }
  .timeline__mark { grid-row: 1 / span 2; align-self: start; padding-top: 5px; }
  .timeline__mark::after { position: absolute; left: 5px; top: 22px; bottom: 0; width: 2px; height: auto; flex: none; }
  .timeline li:last-child .timeline__mark::after { display: none; }
  .timeline h3, .timeline p { grid-column: 2; }
  .timeline p { font-size: 13px; }
}

/* 390: one column */
@media (max-width: 767px) {
  .hero { padding: 16px var(--gutter) 48px; }
  .hero__row { flex-direction: column; align-items: flex-start; gap: 36px; }
  .hero__text { gap: 20px; width: 100%; }
  .hero .phone { align-self: center; }
  .join { width: 100%; }
  .join__row { width: 100%; }
  .join__input { flex: 1 1 200px; width: auto; }
  .join--center .join__input { flex: 1 1 100%; }
  .join--center .cta { flex: 1 1 100%; }
  .wk__rows { display: flex; flex-direction: row; gap: 6px; overflow-x: auto; margin: 0 calc(var(--gutter) * -1); padding: 4px var(--gutter); scrollbar-width: none; }
  .wk__rows::-webkit-scrollbar { display: none; }
  .wk__row { flex: none; flex-wrap: nowrap; gap: 8px; padding: 0 14px; min-height: 44px; border-radius: 999px; background: var(--page); }
  .wk__title { display: none; }
  #wk1:checked ~ .wk__body .row1, #wk2:checked ~ .wk__body .row2, #wk3:checked ~ .wk__body .row3,
  #wk4:checked ~ .wk__body .row4, #wk5:checked ~ .wk__body .row5, #wk6:checked ~ .wk__body .row6 { background: var(--ink); color: var(--on-ink); }
  .pane { flex-direction: column; align-items: stretch; gap: 20px; }
  .pane__text { max-width: none; flex: none; }
  .demo { width: 100%; max-width: 344px; align-self: center; }
  .logs { grid-template-columns: 1fr; }
  .teaser__row { flex-direction: column; align-items: flex-start; gap: 32px; }
  .teaser .phone { align-self: center; }
  .story__row { flex-direction: column; gap: 36px; }
  .story__aside { width: 100%; align-items: center; padding-top: 0; }
  .story__aside > p { max-width: 300px; }
  .connect { align-items: flex-start; }
  .connect .dot { margin-top: 7px; }
  .foot { flex-direction: column; align-items: flex-start; }
  .close h2 { white-space: normal; }
}
@media (max-width: 380px) {
  .demo { padding: 18px 16px; }
  .tr .set { grid-template-columns: 22px 62px 48px 44px 28px; gap: 6px; }
}

/* Legal pages: /privacy, /terms, /delete-account. Their words are final; only the shell is shared. */
body.doc { font-size: 1.0625rem; line-height: 1.6; font-weight: 300; }
.doc a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.doc a:hover { text-decoration-thickness: 2px; }
.doc .nav a, .doc .foot a { text-decoration: none; }
.doc main { max-width: calc(var(--measure) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter) 5rem; }
.doc h1, .doc h2, .doc h3 { font-family: var(--display); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; margin: 0; }
.doc h1 { font-size: clamp(2rem, 6vw, 3rem); }
.doc h2 { font-size: clamp(1.375rem, 3.5vw, 1.75rem); margin-top: 3rem; }
.doc h3 { font-size: 1.125rem; letter-spacing: -0.02em; margin-top: 2rem; }
.doc main p { margin: 1rem 0 0; }
.doc main p:first-child { margin-top: 0; }
.doc main ul, .doc main ol { padding-left: 1.25rem; margin: 1rem 0 0; }
.doc main li { margin-top: 0.5rem; }
.doc main li::marker { color: var(--muted); }
.doc strong { font-weight: 500; }
.doc .lede { font-size: 1.25rem; line-height: 1.5; color: var(--muted); }
.doc .meta { color: var(--muted); font-size: 0.9375rem; }
.doc table { width: 100%; border-collapse: collapse; margin-top: 1.25rem; font-size: 0.9375rem; line-height: 1.5; }
.doc th, .doc td { text-align: left; vertical-align: top; padding: 0.7rem 0.75rem 0.7rem 0; border-bottom: 1px solid var(--line); }
.doc th { font-family: var(--display); font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.doc td { color: var(--muted); }
.doc td:first-child { color: var(--ink); }
.legal-title { padding-top: clamp(2rem, 6vh, 4rem); }
.legal-title .meta { margin-top: 0.75rem; }
.contents { margin-top: 2rem; padding: 1.25rem 1.5rem; background: var(--sunken); border-radius: 12px; }
.doc main .contents ol { margin: 0; padding-left: 1.25rem; columns: 2; column-gap: 2rem; font-size: 0.9375rem; }
.doc main .contents li { margin-top: 0.25rem; break-inside: avoid; }
.contents a { text-decoration: none; color: var(--muted); }
.contents a:hover { text-decoration: underline; }
@media (max-width: 520px) { .doc main .contents ol { columns: 1; } }
.legal h2 { scroll-margin-top: 1.5rem; }
.legal table td:first-child { font-weight: 500; }
@media (prefers-color-scheme: dark) {
  body.doc {
    --page: #0E0E12; --card: #17171C; --ink: #F3F2EE; --on-ink: #0E0E12; --muted: #B4B5BF; --line: #2A2A30; --sunken: #17171C;
  }
}
.btn--40 { min-height: 40px; }
@media (max-width: 380px) {
  .nav nav { gap: 10px; }
  .nav .lockup { font-size: 22px; }
  .nav nav a.pill { padding: 0 12px; }
}
@media (max-width: 340px) { .nav nav a:nth-child(2) { display: none; } }
@media (max-width: 520px) { .doc table { display: block; overflow-x: auto; } }
.note p.meta12 { font-size: 13px; }