/* Boses · boses.migmol.com
   v2 — clean, high-contrast, fact-block layout. Geometric display type, generous radii,
   one accent color doing all the work. PH red is the action color; everything else is ink,
   paper, and a single support green. */

/* ---------- tokens ---------- */
:root {
  --paper:      #FCFCFD;
  --paper-2:    #F4F5F7;
  --paper-3:    #ECEEF2;
  --card:       #FFFFFF;
  --ink:        #0B0C0F;
  --ink-2:      #494F5A;
  --ink-3:      #7C838F;
  --rule:       #E3E6EB;
  --rule-2:     #EEF0F4;

  --red:        #D81E3F;
  --red-ink:    #AE1631;
  --red-soft:   #FDECEF;
  --green:      #0F7B52;
  --green-soft: #E7F6EF;
  --amber:      #9A6206;
  --amber-soft: #FCF3E3;
  --blue:       #1B4ED8;
  --blue-soft:  #EDF1FE;

  --shadow-sm:  0 1px 2px rgba(11,12,15,.06);
  --shadow:     0 1px 2px rgba(11,12,15,.05), 0 12px 28px -14px rgba(11,12,15,.18);

  --display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --sans:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --wrap: 70rem;
  --read: 40rem;
  --r:    1rem;
  --r-lg: 1.35rem;
}

/* Dark is opt-in only, never automatic. Light is the default everywhere. */
:root[data-theme="dark"] {
  --paper:      #0A0B0E;
  --paper-2:    #121419;
  --paper-3:    #191C23;
  --card:       #14161B;
  --ink:        #F3F4F6;
  --ink-2:      #AFB6C2;
  --ink-3:      #7E8694;
  --rule:       #2A2E37;
  --rule-2:     #20242B;
  --red:        #FF5C7A;
  --red-ink:    #FF8098;
  --red-soft:   #2A1119;
  --green:      #4FD69C;
  --green-soft: #0D2620;
  --amber:      #E5B45C;
  --amber-soft: #2A2113;
  --blue:       #8AAAFF;
  --blue-soft:  #151B2E;
  --shadow-sm:  0 1px 2px rgba(0,0,0,.5);
  --shadow:     0 1px 2px rgba(0,0,0,.4), 0 12px 28px -14px rgba(0,0,0,.8);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; }
a { color: var(--blue); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--red); }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.025em;
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.5rem, 7vw, 4.25rem); }
h2 { font-size: clamp(1.85rem, 4vw, 2.65rem); }
h3 { font-size: 1.1rem; letter-spacing: -0.015em; }
p  { margin: 0 0 1.1em; }
p:last-child, ul:last-child { margin-bottom: 0; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 1.25rem; }
.read { max-width: var(--read); }
.lede { font-size: clamp(1.15rem, 2.4vw, 1.4rem); line-height: 1.5; color: var(--ink-2); }
.muted { color: var(--ink-3); }
.small { font-size: .88rem; }

.kicker {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-3); margin: 0 0 1rem;
  display: flex; align-items: center; gap: .5rem;
}
.kicker--red { color: var(--red); }

section { padding-block: clamp(3.25rem, 7vw, 5.5rem); }
.section-line { border-top: 1px solid var(--rule-2); }
.section-fill { background: var(--paper-2); }

/* ---------- header ---------- */
.site-head {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--paper) 85%, transparent);
  backdrop-filter: saturate(1.5) blur(12px);
  border-bottom: 1px solid var(--rule-2);
}
.site-head__in { display: flex; align-items: center; gap: 1.25rem; min-height: 3.9rem; }
.brand {
  font-family: var(--display); font-size: 1.3rem; font-weight: 700; letter-spacing: -0.035em;
  color: var(--ink); text-decoration: none; display: flex; align-items: center; gap: .5rem;
}
.brand:hover { color: var(--ink); }
.brand__dot { width: .45rem; height: .45rem; border-radius: 50%; background: var(--red); }
.brand__tld {
  font-family: var(--mono); font-size: .62rem; color: var(--ink-3);
  letter-spacing: .12em; text-transform: uppercase; font-weight: 400;
  border: 1px solid var(--rule); border-radius: 999px; padding: .18rem .5rem;
}
.site-nav { margin-left: auto; display: flex; align-items: center; gap: 1.25rem; }
.site-nav a { font-size: .92rem; color: var(--ink-2); text-decoration: none; font-weight: 500; }
.site-nav a:hover { color: var(--red); }
@media (max-width: 42rem) { .site-nav .hide-sm { display: none; } }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-family: var(--sans); font-size: 1rem; font-weight: 600; line-height: 1;
  padding: .95rem 1.5rem; border-radius: 999px;
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: transform .08s ease, background .15s ease, border-color .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 1.05em; height: 1.05em; }
.btn--primary { background: var(--red); color: #fff; border-color: var(--red); }
.btn--primary:hover { background: var(--red-ink); border-color: var(--red-ink); color: #fff; }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--rule); }
.btn--ghost:hover { border-color: var(--ink-3); color: var(--ink); }
.btn--google { background: var(--card); color: var(--ink); border-color: var(--rule); width: 100%; border-radius: var(--r); }
.btn--google:hover { border-color: var(--ink-3); color: var(--ink); }
.btn--block { width: 100%; }
.btn--lg { padding: 1.1rem 2rem; font-size: 1.05rem; }
.btn--sm { padding: .55rem 1rem; font-size: .87rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.85rem; }

/* ---------- pills ---------- */
.pill {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase;
  padding: .35rem .7rem; border-radius: 999px; font-weight: 500;
}
.pill--live  { background: var(--red); color: #fff; }
.pill--soon  { background: var(--paper-3); color: var(--ink-3); }
.pill--ok    { background: var(--green-soft); color: var(--green); }
.pill--lock  { background: var(--paper-3); color: var(--ink-2); }
.pill__dot { width: .4rem; height: .4rem; border-radius: 50%; background: currentColor; }

/* ---------- hero ---------- */
.hero { padding-block: clamp(3rem, 8vw, 5.5rem) clamp(2.5rem, 5vw, 3.5rem); }
.hero h1 { margin-bottom: .6rem; }
.hero__sub {
  font-family: var(--display); font-size: clamp(1.25rem, 2.9vw, 1.75rem);
  font-weight: 500; color: var(--red); line-height: 1.2; margin: 0 0 1.5rem;
  letter-spacing: -0.02em;
}
.hero__grid { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,.8fr); gap: clamp(2rem, 5vw, 3.5rem); align-items: start; }
@media (max-width: 58rem) { .hero__grid { grid-template-columns: 1fr; } }

/* ---------- counter ---------- */
.counter {
  background: var(--card); border: 1px solid var(--rule);
  border-radius: var(--r-lg); padding: 1.6rem; box-shadow: var(--shadow);
}
.counter__n {
  font-family: var(--display); font-size: clamp(2.8rem, 7vw, 3.6rem); font-weight: 700;
  line-height: 1; letter-spacing: -0.04em; color: var(--ink); display: block;
}
.counter__label { font-size: .9rem; color: var(--ink-2); margin: .4rem 0 1.2rem; }
.counter__bar { height: .45rem; border-radius: 999px; background: var(--paper-3); overflow: hidden; }
.counter__fill { height: 100%; background: var(--red); border-radius: 999px; width: 0; transition: width 1.2s cubic-bezier(.2,.7,.3,1); }
.counter__meta { display: flex; justify-content: space-between; font-family: var(--mono); font-size: .68rem; letter-spacing: .08em; color: var(--ink-3); margin-top: .6rem; text-transform: uppercase; }
.counter__split { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.2rem; padding-top: 1.2rem; border-top: 1px solid var(--rule-2); }
.counter__stat b { font-family: var(--display); font-size: 1.5rem; font-weight: 700; display: block; letter-spacing: -0.02em; }
.counter__stat span { font-size: .78rem; color: var(--ink-3); line-height: 1.35; display: block; margin-top: .15rem; }

/* ---------- icon blocks ---------- */
.ico {
  flex: none; width: 2.6rem; height: 2.6rem; border-radius: .8rem;
  display: grid; place-items: center;
  background: var(--red-soft); color: var(--red);
}
.ico svg { width: 1.3rem; height: 1.3rem; }
.ico--green { background: var(--green-soft); color: var(--green); }
.ico--amber { background: var(--amber-soft); color: var(--amber); }
.ico--blue  { background: var(--blue-soft);  color: var(--blue); }
.ico--flat  { background: var(--paper-3);    color: var(--ink-2); }

/* ---------- generic card grid ---------- */
.grid { display: grid; gap: 1.1rem; margin-top: 2.25rem; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr)); }

.tile {
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--r);
  padding: 1.4rem; display: flex; flex-direction: column; gap: .8rem;
}
.tile h3 { margin: 0; }
.tile p { font-size: .95rem; color: var(--ink-2); margin: 0; }
.tile__src {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .06em; color: var(--ink-3);
  border-top: 1px dashed var(--rule); padding-top: .7rem; margin-top: auto;
}

/* ---------- clause list (the bill) ---------- */
.clauses { display: grid; gap: .75rem; margin-top: 2.25rem; counter-reset: c; }
.clause {
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--r);
  padding: 1.25rem 1.35rem; display: grid;
  grid-template-columns: auto 1fr; gap: 1rem; align-items: start;
}
.clause__body h3 { margin: 0 0 .3rem; }
.clause__body p { font-size: .96rem; color: var(--ink-2); margin: 0; }
.clause__num {
  font-family: var(--mono); font-size: .68rem; color: var(--ink-3);
  letter-spacing: .1em; display: block; margin-bottom: .35rem;
}

/* ---------- fact strip ---------- */
.strip {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1px; background: var(--rule); border: 1px solid var(--rule);
  border-radius: var(--r); overflow: hidden; margin-top: 2rem;
}
.strip__cell { background: var(--card); padding: 1.35rem 1.25rem; }
.strip__n {
  font-family: var(--display); font-size: 2rem; font-weight: 700;
  letter-spacing: -0.035em; line-height: 1; display: block; color: var(--ink);
}
.strip__n--red { color: var(--red); }
.strip__l { font-size: .84rem; color: var(--ink-2); margin-top: .4rem; line-height: 1.4; }

/* ---------- broken list ---------- */
.broken { list-style: none; padding: 0; margin: 1.75rem 0 0; display: grid; gap: .55rem; }
.broken li {
  display: flex; gap: .8rem; align-items: flex-start;
  background: var(--card); border: 1px solid var(--rule); border-radius: .75rem;
  padding: .85rem 1rem; font-size: .97rem; color: var(--ink-2);
}
.broken li svg { flex: none; width: 1.15rem; height: 1.15rem; color: var(--red); margin-top: .12rem; }

/* ---------- tables ---------- */
.table-scroll { overflow-x: auto; margin-top: 2rem; -webkit-overflow-scrolling: touch; }
.tbl { width: 100%; border-collapse: collapse; font-size: .95rem; min-width: 32rem; }
.tbl th, .tbl td { text-align: left; padding: .95rem 1rem; vertical-align: top; border-bottom: 1px solid var(--rule-2); }
.tbl thead th {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3); border-bottom: 1px solid var(--rule); font-weight: 500;
}
.tbl tbody th { font-weight: 600; color: var(--ink); width: 26%; }
.tbl .now  { color: var(--ink-3); }
.tbl .then { color: var(--ink); font-weight: 500; }
.tbl .then::before { content: "→ "; color: var(--green); font-weight: 700; }
.tbl .amt { font-family: var(--mono); font-size: .9rem; color: var(--ink); white-space: nowrap; }

/* ---------- callout ---------- */
.callout {
  background: var(--blue-soft); border: 1px solid color-mix(in srgb, var(--blue) 22%, transparent);
  padding: 1.35rem 1.5rem; border-radius: var(--r); margin-top: 2rem; font-size: 1rem;
  display: flex; gap: 1rem; align-items: flex-start;
}
.callout svg { flex: none; width: 1.3rem; height: 1.3rem; color: var(--blue); margin-top: .15rem; }
.callout--amber { background: var(--amber-soft); border-color: color-mix(in srgb, var(--amber) 28%, transparent); }
.callout--amber svg { color: var(--amber); }
.callout p { margin: 0; }

/* ---------- packet block ---------- */
.packet {
  background: var(--paper-3); border-radius: var(--r-lg);
  padding: clamp(1.5rem, 4vw, 2.25rem); margin-top: 2rem;
}
.packet__head {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-3); border-bottom: 1px solid var(--rule); padding-bottom: .85rem; margin-bottom: 1.35rem;
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}
.packet ol { margin: 0; padding-left: 1.35rem; display: grid; gap: .65rem; }
.packet li { color: var(--ink-2); font-size: .97rem; }
.packet li strong { color: var(--ink); }

/* ---------- signup ---------- */
.signup__grid { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: clamp(2rem, 5vw, 3.5rem); align-items: start; }
@media (max-width: 58rem) { .signup__grid { grid-template-columns: 1fr; } }

.form-card {
  background: var(--card); border: 1px solid var(--rule);
  border-radius: var(--r-lg); padding: clamp(1.35rem, 3.5vw, 2rem); box-shadow: var(--shadow);
}
.divider {
  display: flex; align-items: center; gap: .85rem; margin: 1.35rem 0;
  color: var(--ink-3); font-size: .72rem; font-family: var(--mono);
  letter-spacing: .12em; text-transform: uppercase;
}
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--rule-2); }

.field { margin-bottom: 1.05rem; }
.field label { display: block; font-size: .84rem; font-weight: 600; margin-bottom: .38rem; color: var(--ink); }
.field .hint { font-weight: 400; color: var(--ink-3); }
.field input[type="text"], .field input[type="email"], .field select, .field textarea {
  width: 100%; padding: .85rem .95rem; font: inherit; font-size: 1rem;
  color: var(--ink); background: var(--paper);
  border: 1px solid var(--rule); border-radius: .7rem;
}
.field textarea { resize: vertical; min-height: 6.5rem; line-height: 1.5; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible,
.btn:focus-visible, a:focus-visible, button:focus-visible {
  outline: 2px solid var(--red); outline-offset: 2px;
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; }
@media (max-width: 32rem) { .field-row { grid-template-columns: 1fr; } }

.check { display: flex; gap: .7rem; align-items: flex-start; margin-bottom: .9rem; font-size: .88rem; color: var(--ink-2); line-height: 1.5; }
.check input { margin-top: .2rem; flex: none; width: 1.1rem; height: 1.1rem; accent-color: var(--red); }
.form-note { font-size: .78rem; color: var(--ink-3); margin-top: 1rem; line-height: 1.55; }

.why-list { list-style: none; padding: 0; margin: 1.25rem 0 0; display: grid; gap: .55rem; }
.why-list li {
  display: flex; gap: .75rem; align-items: flex-start;
  font-size: .92rem; color: var(--ink-2);
  border-bottom: 1px solid var(--rule-2); padding-bottom: .6rem;
}
.why-list li:last-child { border-bottom: 0; }
.why-list strong { color: var(--ink); font-weight: 600; }
.why-list svg { flex: none; width: 1.05rem; height: 1.05rem; color: var(--ink-3); margin-top: .18rem; }

/* ---------- comments ---------- */
.cmt-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-top: 2rem;
}
.cmt-list { display: grid; gap: .8rem; margin-top: 1.35rem; }
.cmt {
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--r);
  padding: 1.15rem 1.25rem;
}
.cmt__top { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .6rem; }
.cmt__who { font-weight: 600; font-size: .92rem; }
.cmt__where { font-family: var(--mono); font-size: .68rem; color: var(--ink-3); letter-spacing: .04em; }
.cmt__tag {
  font-family: var(--mono); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase;
  padding: .25rem .55rem; border-radius: 999px; background: var(--paper-3); color: var(--ink-2);
}
.cmt__tag--story   { background: var(--blue-soft);  color: var(--blue); }
.cmt__tag--concern { background: var(--amber-soft); color: var(--amber); }
.cmt__tag--support { background: var(--green-soft); color: var(--green); }
.cmt p { font-size: .96rem; color: var(--ink-2); margin: 0; }
.cmt__foot { display: flex; align-items: center; gap: .8rem; margin-top: .85rem; }
.vote {
  display: inline-flex; align-items: center; gap: .4rem;
  background: transparent; border: 1px solid var(--rule); border-radius: 999px;
  padding: .35rem .75rem; font: inherit; font-size: .8rem; font-weight: 600;
  color: var(--ink-2); cursor: pointer;
}
.vote:hover { border-color: var(--red); color: var(--red); }
.vote svg { width: .9rem; height: .9rem; }
.cmt__ver { font-family: var(--mono); font-size: .66rem; color: var(--ink-3); margin-left: auto; }

.locked {
  display: flex; gap: 1rem; align-items: flex-start;
  background: var(--paper-3); border-radius: var(--r); padding: 1.25rem 1.35rem; margin-top: 2rem;
}
.locked svg { flex: none; width: 1.3rem; height: 1.3rem; color: var(--ink-2); margin-top: .15rem; }
.locked p { font-size: .95rem; color: var(--ink-2); margin: 0; }
.locked strong { color: var(--ink); }

/* ---------- petition cards ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: 1.15rem; margin-top: 2.25rem; }
.card {
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-lg);
  padding: 1.6rem; display: flex; flex-direction: column; gap: .8rem;
  text-decoration: none; color: inherit; transition: border-color .15s ease, transform .12s ease;
}
a.card:hover { border-color: var(--red); transform: translateY(-3px); color: inherit; }
.card--soon { border-style: dashed; }
.card h3 { font-family: var(--display); font-size: 1.4rem; font-weight: 700; margin: 0; }
.card p { font-size: .94rem; color: var(--ink-2); margin: 0; flex: 1; }
.card__meta { font-family: var(--mono); font-size: .7rem; color: var(--ink-3); letter-spacing: .06em; }

/* ---------- steps ---------- */
.steps { counter-reset: s; display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem,1fr)); gap: 1.75rem; margin-top: 2.25rem; }
.step { counter-increment: s; position: relative; padding-top: 2.6rem; }
.step::before {
  content: counter(s); position: absolute; top: 0; left: 0;
  font-family: var(--display); font-size: 2rem; font-weight: 700; color: var(--red); line-height: 1;
  letter-spacing: -0.04em;
}
.step h3 { margin-bottom: .3rem; }
.step p { font-size: .93rem; color: var(--ink-2); margin: 0; }

/* ---------- footer ---------- */
.site-foot { border-top: 1px solid var(--rule-2); padding-block: 3rem; font-size: .88rem; color: var(--ink-3); }
.site-foot__grid { display: grid; grid-template-columns: minmax(0,1.4fr) repeat(auto-fit, minmax(9rem,1fr)); gap: 2rem; }
.site-foot h4 { font-family: var(--mono); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 .75rem; font-weight: 500; }
.site-foot ul { list-style: none; margin: 0; padding: 0; }
.site-foot li { margin-bottom: .45rem; }
.site-foot a { color: var(--ink-2); text-decoration: none; }
.site-foot a:hover { color: var(--red); }
.site-foot__legal { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--rule-2); font-size: .8rem; line-height: 1.6; }

/* ---------- utility ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 1rem; top: 1rem; z-index: 100; background: var(--red); color: #fff; padding: .7rem 1rem; border-radius: .5rem; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ---------- milestone ladder ---------- */
.next-goal {
  display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
  margin: .35rem 0 1.1rem; font-size: .92rem; color: var(--ink-2);
}
.next-goal b { font-family: var(--display); font-weight: 700; color: var(--red); font-size: 1.05rem; }

.ladder { margin-top: 1.2rem; padding-top: 1.2rem; border-top: 1px solid var(--rule-2); }
.ladder__track {
  display: flex; align-items: center; gap: 0; margin-bottom: .6rem;
}
.ladder__step { display: flex; align-items: center; flex: 1; min-width: 0; }
.ladder__step:last-child { flex: 0 0 auto; }
.ladder__dot {
  flex: none; width: .95rem; height: .95rem; border-radius: 50%;
  border: 2px solid var(--rule); background: var(--card);
  display: grid; place-items: center; position: relative;
}
.ladder__dot svg { width: .55rem; height: .55rem; color: #fff; opacity: 0; }
.ladder__line { flex: 1; height: 2px; background: var(--rule); min-width: .5rem; }
.ladder__step.is-done .ladder__dot { background: var(--green); border-color: var(--green); }
.ladder__step.is-done .ladder__dot svg { opacity: 1; }
.ladder__step.is-done .ladder__line { background: var(--green); }
.ladder__step.is-now .ladder__dot {
  border-color: var(--red); background: var(--red);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--red) 18%, transparent);
}
.ladder__labels {
  display: flex; justify-content: space-between;
  font-family: var(--mono); font-size: .62rem; letter-spacing: .04em; color: var(--ink-3);
}
.ladder__labels span.is-now { color: var(--red); font-weight: 500; }
.ladder__labels span.is-done { color: var(--green); }

/* ---------- sharing ---------- */
.share-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: .6rem; margin-top: 1.5rem;
}
.share-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .8rem 1rem; border-radius: .7rem; font: inherit; font-size: .9rem; font-weight: 600;
  background: var(--card); color: var(--ink); border: 1px solid var(--rule);
  text-decoration: none; cursor: pointer;
  transition: border-color .15s ease, transform .08s ease;
}
.share-btn:hover { border-color: var(--ink-3); color: var(--ink); transform: translateY(-1px); }
.share-btn:active { transform: translateY(0); }
.share-btn svg { width: 1.1rem; height: 1.1rem; flex: none; }
.share-btn--primary { background: var(--red); border-color: var(--red); color: #fff; grid-column: 1 / -1; }
.share-btn--primary:hover { background: var(--red-ink); border-color: var(--red-ink); color: #fff; }
.share-btn.is-copied { border-color: var(--green); color: var(--green); }

.share-copy {
  display: flex; gap: .5rem; margin-top: .6rem;
}
.share-copy input {
  flex: 1; min-width: 0; padding: .75rem .85rem; font: inherit; font-size: .88rem;
  font-family: var(--mono); color: var(--ink-2); background: var(--paper);
  border: 1px solid var(--rule); border-radius: .7rem;
}
.draft {
  background: var(--paper-3); border-radius: var(--r); padding: 1.1rem 1.25rem;
  margin-top: 1.25rem; font-size: .93rem; color: var(--ink-2); line-height: 1.55;
}
.draft__label {
  font-family: var(--mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3); display: block; margin-bottom: .5rem;
}

/* ---------- language toggle ---------- */
.lang {
  display: inline-flex; border: 1px solid var(--rule); border-radius: 999px; overflow: hidden;
  font-family: var(--mono); font-size: .68rem; letter-spacing: .08em;
}
.lang a { padding: .3rem .6rem; color: var(--ink-3); text-decoration: none; font-weight: 500; }
.lang a[aria-current="true"] { background: var(--ink); color: var(--paper); }
.lang a:hover { color: var(--red); }
.lang a[aria-current="true"]:hover { color: var(--paper); }