/* ════════════════════════════════════════════════════════════════════
   PROPOSED ADDITION TO landing.css — a hero that argues from the
   community rather than from the anatomy plate:

       one person  →  several possible paths  →  real people  →  outcomes

   Class names are prefixed where they would collide with the existing
   hero (.phero, not .hero). Every colour, radius and face comes from
   foundation.css; nothing new is introduced.
   ═══════════════════════════════════════════════════════════════════ */

.phero {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 26px 0 76px;
}

/* ── the headline block ───────────────────────────────────────────── */
.phero-copy {
  display: flex;
  max-width: 56ch;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.phero-side {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.phero-copy h1 {
  max-width: 21ch;
  font-size: clamp(32px, 4.2vw, 48px);
  letter-spacing: -.012em;
}

.phero-copy h1 em {
  color: var(--accent);
}

.phero-lead {
  max-width: 46ch;
  color: var(--ink-2);
  font-size: clamp(17px, 1.8vw, 19px);
  line-height: 1.55;
}

.phero-fig {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 16px;
}

/* ── the graphic ──────────────────────────────────────────────────── */
/* minmax(0, 1fr), not 1fr: an auto minimum lets the scrolling faces row on
   mobile push the whole page wider than the viewport. */
.fan {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 30px;
}

/* No viewBox: with the element sized in CSS, one SVG user unit is one CSS
   pixel, so the script can write rect coordinates straight into `d`. */
.wires {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: none;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.wire {
  fill: none;
  stroke: var(--line-2);
  stroke-width: 1.4;
  stroke-linecap: round;
  transition: stroke .35s ease, stroke-width .35s ease;
}

/* pathLength="1" normalises each branch's geometry to a length of 1, so one
   dash rule draws them all in and survives the script rewriting `d`.

   The resting state is drawn, and the intro runs `backwards` rather than
   `forwards`: the branches are the whole argument of the graphic, so a
   keyframe that never fires has to leave them visible, not erased. */
.wire:not(.tether) {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  animation: wire-in .9s cubic-bezier(.22, .7, .2, 1) backwards;
}

@keyframes wire-in {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}

.wire.trunk {
  stroke-width: 1.6;
}

.wire[data-branch="myo"] { animation-delay: .16s; }
.wire[data-branch="ufe"] { animation-delay: .25s; }
.wire[data-branch="mon"] { animation-delay: .34s; }

/* The group carries the fade so each tether's own opacity stays free for the
   live state — an animation holding a value would otherwise lock it. */
.tethers {
  opacity: 1;
  animation: tether-in .6s ease .72s backwards;
}

@keyframes tether-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.wire.tether {
  stroke-width: 1.1;
  stroke-dasharray: 2 4;
  opacity: .85;
  transition: stroke .35s ease, stroke-width .35s ease, opacity .35s ease;
}

.wire.is-live {
  stroke: var(--accent);
  stroke-width: 1.8;
}

.wire.tether.is-live {
  stroke: var(--accent);
  stroke-width: 1.3;
  opacity: 1;
}

/* ── zone 1 · her situation ───────────────────────────────────────── */
.you {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 20px 22px 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

.you-grp {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.you-k {
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.you-v {
  color: var(--ink);
  font-size: 17px;
  line-height: 1.35;
}

.you-v.sub {
  color: var(--ink-2);
  font-size: 15px;
}

.you-goals {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.you-goals li {
  position: relative;
  padding-left: 15px;
  color: var(--ink);
  font-size: 15.5px;
  line-height: 1.4;
}

.you-goals li::before {
  position: absolute;
  top: .55em;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  content: "";
}

/* ── zone 2 · the paths ───────────────────────────────────────────── */
.paths {
  position: relative;
  z-index: 1;
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 26px;
}

.path {
  position: relative;
  padding-left: 24px;
  transition: transform .35s cubic-bezier(.22, .7, .2, 1), opacity .35s ease;
}

.node {
  position: absolute;
  top: 8px;
  left: 0;
  width: 9px;
  height: 9px;
  border: 1.5px solid var(--line-2);
  border-radius: 50%;
  background: var(--paper);
  transition: border-color .3s ease, background .3s ease, box-shadow .3s ease;
}

/* fit-content, so the box hugs the longest line and the tether has a real
   text edge to leave from rather than the far side of an empty track. */
.path-b {
  display: flex;
  width: fit-content;
  flex-direction: column;
  gap: 3px;
}

/* Same face as `.get .tagline` in landing.css — the eyebrow-above-the-name
   pattern already used through the marketing pages. */
.path-w {
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.path-n {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 21px;
  letter-spacing: -.008em;
  line-height: 1.2;
}

.path-c {
  margin-top: 1px;
  color: var(--ink-2);
  font-size: 13.5px;
}

.path-c b {
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.path.is-live {
  transform: translateX(3px);
}

.path.is-live .node {
  border-color: var(--accent);
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-3);
}

.fan.has-live .path:not(.is-live) {
  opacity: .68;
}

/* ── zone 3 · real people on those paths ──────────────────────────── */
.faces {
  position: relative;
  z-index: 2;
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 12px;
}

.faces-h {
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.faces-list {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 14px;
}

.face {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 3px 10px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: 0 1px 2px rgb(23 26 25 / 4%), 0 14px 30px -20px rgb(23 26 25 / 26%);
  color: inherit;
  text-decoration: none;
  /* --shift is the desktop stagger. It rides on the transform rather than on
     a margin so every card keeps the same width and its meta line wraps the
     same way; getBoundingClientRect still sees the offset, so the tethers
     land where the card is drawn. */
  transform: translate(var(--shift, 0px), 0);
  transition: transform .35s cubic-bezier(.22, .7, .2, 1), opacity .35s ease,
              border-color .3s ease, box-shadow .35s ease;
}

.face-av {
  display: grid;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--tissue);
  color: var(--accent-2);
  font-family: var(--font-display);
  font-size: 14px;
  place-items: center;
}

.face-n {
  align-self: center;
  color: var(--ink);
  font-size: 14.5px;
  letter-spacing: -.005em;
}

/* Full width rather than indented under the name: at 208px the indent leaves
   the meta line too narrow and "later" drops to a line of its own. */
.face-m,
.face-go {
  grid-column: 1 / -1;
}

.face-m {
  color: var(--ink-3);
  font-size: 12px;
  line-height: 1.4;
}

.face-go {
  margin-top: 5px;
  color: var(--accent);
  font-size: 12.5px;
}

.face:hover {
  border-color: var(--line-2);
}

.face:hover .face-go {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.face.is-live {
  transform: translate(var(--shift, 0px), -2px);
  border-color: var(--accent);
  box-shadow: 0 1px 2px rgb(23 26 25 / 4%), 0 18px 34px -18px rgb(23 26 25 / 30%);
}

.fan.has-live .face:not(.is-live) {
  opacity: .62;
}

.fan-note {
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .04em;
}

/* ── ≥1040px · the three-zone composition ─────────────────────────── */
@media (min-width: 1040px) {
  /* Match the landing-page hero's top edge while keeping the diagram and
     headline together as one composition. */
  .phero {
    gap: 72px;
    padding: 26px 0 56px;
  }

  /* Headline left, the promise and the button right. Stacked, the copy runs
     360px tall and leaves the whole top-right of the hero empty; paired, it
     runs about 200px and the graphic sits up where it can be seen. */
  .phero-copy {
    display: grid;
    max-width: none;
    align-items: center;
    grid-template-columns: 1.06fr .94fr;
    gap: 22px 76px;
  }

  .phero-copy .eyebrow {
    grid-column: 1 / -1;
  }

  .phero-copy h1 {
    max-width: 17ch;
  }

  /* max-content lets the paths track hug its own text now that the rows are
     three short lines. space-between hands the slack to the two gutters, so
     the branches and tethers get about 220px of run each and draw as long
     shallow curves instead of being crushed into a fixed 76px gap. */
  .fan {
    grid-template-columns: 234px max-content 216px;
    justify-content: space-between;
    column-gap: 80px;
    align-items: center;
  }

  .wires {
    display: block;
  }

  /* Pitched to roughly match the profile cards' rhythm on the far side, so
     the tethers stay shallow instead of fanning apart down the column. */
  .paths {
    gap: 40px;
  }

  /* Staggered into the gutter, never into the text — the cards read as
     floating alongside the branches instead of forming a fourth column. */
  .faces-list {
    gap: 18px;
  }

  .faces-list .face:nth-child(1) { --shift: -26px; }
  .faces-list .face:nth-child(2) { --shift: 6px; }
  .faces-list .face:nth-child(3) { --shift: -14px; }
}

/* ── 700–1039px · her card beside the paths, the women below ──────── */
@media (min-width: 700px) and (max-width: 1039.98px) {
  .fan {
    grid-template-columns: 218px minmax(0, 1fr);
    column-gap: 60px;
    align-items: center;
  }

  .wires {
    display: block;
  }

  .paths {
    margin-left: 24px;
  }

  .tethers {
    display: none;
  }

  .faces {
    grid-column: 1 / -1;
    padding-top: 6px;
  }

  .faces-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
  }
}

/* ── <700px · one column, the branches become a rail ──────────────── */
@media (max-width: 699.98px) {
  .phero {
    gap: 32px;
    padding-top: 22px;
  }

  .paths {
    gap: 24px;
    padding-left: 4px;
    border-left: 1px solid var(--line);
  }

  .path {
    padding-left: 22px;
  }

  .node {
    left: -9px;
  }

  /* A scrolling row keeps three faces legible without shrinking them. */
  .faces-list {
    flex-direction: row;
    margin-inline: -15px;
    padding-inline: 15px;
    overflow-x: auto;
    gap: 12px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .faces-list::-webkit-scrollbar {
    display: none;
  }

  .face {
    flex: 0 0 224px;
    scroll-snap-align: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wire:not(.tether),
  .tethers {
    animation: none;
  }

  .path,
  .face,
  .node {
    transition: none;
  }
}

/* ── landing-page continuation ───────────────────────────────────── */
.full-bleed {
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

.cohort-strip {
  border-block: 1px solid #c6dcd7;
  background: var(--accent-3);
}

.cohort-strip-inner {
  display: flex;
  align-items: center;
  gap: clamp(18px, 3vw, 40px);
  flex-wrap: wrap;
  padding: 22px 0;
}

.cohort-label {
  flex: none;
  color: var(--accent-2);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.cohort-text {
  flex: 1 1 380px;
  min-width: 0;
  color: var(--accent-2);
  font-size: 16px;
  line-height: 1.5;
}

.cohort-strip .btn {
  flex: none;
  margin-left: auto;
}

/* ---------- phone shell ---------- */
.stage{--s:.70;position:relative;width:calc(390px * var(--s));height:calc(844px * var(--s));flex:none}
.stage .phone{position:absolute;top:0;left:0;transform-origin:top left;transform:scale(var(--s))}
.phone{width:390px;height:844px;padding:12px;background:#111512;border-radius:46px;box-shadow:0 44px 80px -34px rgba(31,55,50,.5),0 0 0 1px #2b2f2c}
.phone .notch{position:absolute;z-index:5;top:12px;left:50%;width:132px;height:28px;transform:translateX(-50%);background:#111512;border-radius:0 0 18px 18px}
.screen{position:relative;height:100%;display:flex;flex-direction:column;overflow:hidden;background:var(--paper);border-radius:34px}
.screen-title{font-family:var(--font-display);font-weight:400;margin:0}
.status{height:34px;flex:none;display:flex;align-items:center;justify-content:space-between;padding:9px 24px 0;font-size:13px;font-weight:650}
.status .icons{display:flex;align-items:center;gap:6px}
.head{flex:none;padding:15px 20px 14px;border-bottom:1px solid var(--line);background:var(--panel)}
.head .eyebrow{display:block;margin-bottom:4px}
.head .headrow{display:flex;align-items:baseline;gap:12px}
.head .screen-title{font-size:21px;line-height:1.15;letter-spacing:-.012em}
.head .day{margin-left:auto;color:var(--accent);font-family:var(--font-mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;white-space:nowrap}
.head .sub{margin-top:4px;color:var(--ink-3);font-size:11.5px}
.phone .band{flex:none;padding:14px 20px 13px;border-bottom:1px solid var(--line)}
.phone .band.grow{flex:1;min-height:0;overflow:hidden;border-bottom:0}
.bandhead{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.label,.meta{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.11em}
.label{font-size:9.5px;color:var(--ink-2)}
.meta{font-size:9px;color:var(--ink-3)}
.screen .lead{margin-top:8px;font:18px/1.25 var(--font-display);letter-spacing:-.01em}
.quiet{margin-top:7px;color:var(--ink-2);font-size:11.5px;line-height:1.4}
.filters{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}
.filter{padding:6px 8px;background:var(--paper);border:1px solid var(--line);border-radius:3px;color:var(--ink-2);font-size:10.5px}
.screen .button{width:100%;margin-top:11px;padding:12px 14px;color:#fff;font-size:14px;font-weight:650;background:var(--accent);border:0;border-radius:var(--radius)}
.tabbar{height:64px;flex:none;display:flex;background:var(--panel);border-top:1px solid var(--line);padding-bottom:6px}
.tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:var(--ink-3);font-size:11px;text-decoration:none}
.tabbar a[aria-current="page"]{color:var(--accent)}
.tabbar svg{width:23px;height:23px}

/* check-in screen */
.rail{position:relative;height:9px;margin-top:10px}
.rail::before{content:"";position:absolute;top:4px;left:0;right:0;height:1px;background:var(--line-2)}
.rail .start{position:absolute;left:-1px;top:1px;width:7px;height:7px;border-radius:50%;background:var(--accent)}
.rail .fill{position:absolute;left:0;top:3.5px;height:2px;background:var(--accent)}
.rail .now{position:absolute;top:0;width:9px;height:9px;margin-left:-4px;border-radius:50%;background:var(--accent)}
.rail .end{position:absolute;right:0;top:1px;width:7px;height:7px;border:1.5px solid var(--line-2);border-radius:50%;background:var(--panel)}
.railmeta{position:relative;height:13px;margin-top:3px;color:var(--ink-3);font:9px var(--font-mono);letter-spacing:.08em;text-transform:uppercase}
.railmeta span{position:absolute;top:0;white-space:nowrap}
.railmeta .start-label{left:0}
.railmeta .today-label{color:var(--accent);font-weight:700;transform:translateX(-50%)}
.railmeta .end-label{right:0}
.measure-rows{margin-top:9px}
.measure-row{display:grid;grid-template-columns:minmax(72px,1fr) 105px 78px;gap:8px;align-items:baseline;padding:8.5px 0;border-top:1px solid var(--line)}
.measure-row:first-child{border-top:0}
.measure-row .name{font-size:14.5px}
.measure-row .direction{color:var(--ink-3);font:10.5px var(--font-mono);white-space:nowrap}
.measure-row .direction.up,.measure-row .direction.down{color:var(--accent)}
.measure-row .current{padding-left:12px;font:18px/1 var(--font-display);white-space:nowrap}
.measure-row .current.word{font-size:16px}
.measure-row .current small{color:var(--ink-2);font:10.5px var(--font-mono)}
.checkin-band{flex:1;min-height:0;padding:14px 20px 16px;display:flex;flex-direction:column;justify-content:space-between;border-bottom:0}
.checkin-band .lead{margin-top:12px;font-size:23px;line-height:1.2}
.chips{display:flex;gap:8px;flex-wrap:nowrap;margin-top:0}
.chip{flex:1;padding:11px 7px;color:var(--ink-2);font-size:13px;white-space:nowrap;background:transparent;border:1px solid var(--line-2);border-radius:4px}
.chip.on{color:var(--accent);font-weight:600;background:var(--accent-3);border-color:var(--accent)}
.checkin-band .button{margin-top:0;padding:14px;font-size:15px}

/* community screen */
.community-plot{height:132px;margin-top:8px}
.community-plot svg{width:100%;height:100%;overflow:visible}
.community-plot .plot-axis,.community-plot .plot-ticks{fill:none;stroke:var(--line-2);stroke-width:1}
.community-plot .plot-grid{fill:none;stroke:var(--line);stroke-width:1;stroke-dasharray:2 3}
.community-plot .plot-median{fill:none;stroke:var(--ink-3);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.community-plot .plot-user-line{fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.community-plot .plot-user-point{fill:var(--accent);stroke:var(--paper);stroke-width:1.5}
.community-plot .plot-you{fill:var(--accent);stroke:var(--paper);stroke-width:2}
.community-plot text{font-family:var(--font-mono)}
.community-plot .plot-y,.community-plot .plot-x{fill:var(--ink-3);font-size:8.5px;letter-spacing:.03em}
.community-plot .plot-x{text-anchor:middle}
.community-plot .plot-x.start{text-anchor:start}
.community-plot .plot-x.end{text-anchor:end}
.community-plot .plot-you-label{fill:var(--accent);font-size:9px;font-weight:700;letter-spacing:.08em}
.community-plot .plot-median-label{fill:var(--ink-3);font-size:8px;letter-spacing:.08em}
.community-plot .plot-you-arrow{fill:none;stroke:var(--accent);stroke-width:1.1;stroke-linecap:round}
.community-plot .plot-median-arrow{fill:none;stroke:var(--ink-3);stroke-width:1;stroke-linecap:round}
.poll{margin-top:9px}
.pollrow{display:grid;grid-template-columns:64px 1fr 30px;gap:8px;align-items:center;margin-top:7px}
.pollrow .pl{color:var(--ink-2);font-size:11.5px}
.track{height:7px;position:relative;background:var(--line);border-radius:2px}
.track i{position:absolute;inset:0 auto 0 0;background:var(--accent-3);border-radius:2px}
.pollrow.mine .track i{background:var(--accent)}
.pollrow.mine .pl,.pollrow.mine .pct{color:var(--accent);font-weight:600}
.pct{text-align:right;color:var(--ink-3);font:10px var(--font-mono)}
.post{margin-top:9px;padding:9px 11px;background:var(--panel);border-left:2px solid var(--accent)}
.posttop{display:flex;justify-content:space-between;color:var(--ink-3);font:9px var(--font-mono);letter-spacing:.07em;text-transform:uppercase}
.quote{margin-top:6px;font:13.5px/1.3 var(--font-display)}
.reactions{margin-top:6px;color:var(--ink-3);font-size:10.5px}

/* recovery screen */
.milestones{margin-top:10px}
.event{display:grid;grid-template-columns:48px 13px 1fr;min-height:37px}
.event .date{padding-top:2px;color:var(--ink-3);font:9px var(--font-mono);letter-spacing:.07em;text-transform:uppercase}
.event .line{position:relative}
.event .line::before{content:"";position:absolute;top:0;bottom:0;left:6px;width:1px;background:var(--line)}
.event .line::after{content:"";position:absolute;top:3px;left:3px;width:7px;height:7px;border:1px solid var(--line-2);border-radius:50%;background:var(--paper)}
.event:first-child .line::before{top:6px}
.event:last-child .line::before{bottom:auto;height:7px}
.event:first-child .line::after,.event:last-child .line::after{background:var(--accent);border-color:var(--accent)}
.eventname{padding:0 0 9px 8px;font-size:13px}
.charts-band{flex:1;min-height:0;display:flex;flex-direction:column;border-bottom:0}
.recovery-charts{flex:1;display:flex;flex-direction:column;justify-content:space-between;min-height:0;padding-top:9px}
.recovery-measure .chart-head{display:flex;align-items:baseline;gap:8px}
.recovery-measure .chart-name{color:var(--ink-2);font:9.5px var(--font-mono);letter-spacing:.1em;text-transform:uppercase}
.recovery-measure .chart-note{color:var(--ink-3);font:9px var(--font-mono)}
.recovery-measure .chart-now{margin-left:auto;font:18px/1 var(--font-display)}
.recovery-measure .chart-now small{margin-left:2px;color:var(--ink-3);font:9.5px var(--font-mono)}
.recovery-measure .spark{height:30px;position:relative;margin:4px 0 1px}
.recovery-measure .spark svg{width:100%;height:100%}
.recovery-measure .spark-line{fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.recovery-measure .spark-guide{fill:none;stroke:var(--line);stroke-width:1;stroke-dasharray:2 3}
.recovery-measure .spark-dot{position:absolute;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 2px var(--paper)}
.recovery-measure .chart-from{color:var(--ink-3);font:9px var(--font-mono)}
.report-wrap{padding-top:10px;margin-top:10px;border-top:1px solid var(--line);display:grid;grid-template-columns:104px 1fr;gap:8px}
.report-wrap .button{margin-top:0;padding:11px 13px;text-align:center}
.share-button{display:flex;align-items:center;justify-content:center;gap:7px;padding:10px 11px;color:var(--accent);font-size:13.5px;font-weight:650;background:transparent;border:1px solid var(--accent);border-radius:var(--radius)}
.share-button svg{width:16px;height:16px}

/* ---------- exact v2 screen treatments ---------- */
.phone.today-screen,
.phone.together-screen,
.phone.journey-screen{
  --panel:#f5f6f3;
  --line:#e1e3de;
  --line-2:#cdd2cd;
  box-shadow:0 40px 80px -30px rgba(31,55,50,.45),0 0 0 1px #2b2f2c;
}
.today-screen .status{font-size:14px}
.today-screen .head{padding:17px 20px 8px}
.today-screen .head .eyebrow{margin-bottom:0;font-size:10.5px}
.today-screen .head .headrow{margin-top:6px}
.today-screen .head .screen-title{font-size:23px}
.today-screen .head .day{font-size:11.5px}
.today-screen .head .sub{font-size:12.5px}
.today-screen .tracker-band{flex:none;padding:16px 20px 12px}
.today-screen .label{font-size:10.5px}
.today-screen .meta{font-size:9.8px}
.today-screen .checkin-band{padding:14px 20px 16px}
.today-screen .checkin-band{border-bottom:1px solid var(--line)}
.today-screen .tabbar{height:66px}

.together-screen .head{padding:16px 20px 14px}
.together-screen .head .headrow{margin-top:4px}
.together-screen .filter{background:var(--panel)}
.together-screen .plot-band{padding:14px 20px 10px}
.together-screen .community-plot{height:138px}
.community-plot .plot-area{fill:var(--accent-3)}
.community-plot .plot-band-label{fill:var(--accent);font-size:7.5px;letter-spacing:.08em}
.together-screen .survey-band{padding:13px 20px 12px}
.together-screen .survey-band .lead{font-size:17px;margin-top:7px}
.together-screen .survey-band .poll{margin-top:7px}
.together-screen .survey-band .pollrow{margin-top:6px}
.together-screen .survey-band .quiet{margin-top:7px}
.together-screen .voices-band{padding:12px 20px 11px}
.together-screen .voices-band{border-bottom:1px solid var(--line)}
.together-screen .voices-band .post{margin-top:8px;padding:8px 10px}
.together-screen .voices-band .post + .post{margin-top:7px}
.together-screen .voices-band .quote{font-size:13.5px;line-height:1.28}
.together-screen .voices-band .reactions{margin-top:5px}
.together-screen .voices-band .button{margin-top:9px;padding:10px 12px}
.together-screen .tabbar{height:66px}

.journey-screen .head{padding:15px 20px 13px;text-align:center}
.journey-screen .head .headrow{justify-content:center;position:relative;margin-top:4px}
.journey-screen .head .headrow .day{position:absolute;right:0}
.journey-screen .head .sub{font-size:11.5px}
.journey-screen .milestone-band{flex:none;padding:15px 20px 10px}
.journey-screen .timeline{margin-top:11px}
.journey-screen .charts-band{padding:14px 20px 12px}
.journey-screen .charts-band{border-bottom:1px solid var(--line)}
.journey-screen .recovery-measure .chart-from{letter-spacing:.02em}
.journey-screen .report-wrap{display:block}
.journey-screen .recovery-actions{display:grid;grid-template-columns:104px 1fr;gap:8px}
.journey-screen .tabbar{height:66px}

.phone-shot-stage{height:auto;aspect-ratio:786 / 1594}
.phone-shot-stage .phone{display:none}
.phone-shot{display:block;width:100%;height:auto}
.report-shot{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 24px 54px -38px rgba(31,55,50,.42)}

.report-section{border-top:1px solid var(--line);background:var(--paper)}
.report-section .section-head{max-width:42rem}
.report-section .section-head p{color:var(--ink-2);font-size:16.5px;line-height:1.55}
.report-section .report-shot{margin-top:34px}

/* ---------- sections ---------- */
.section{padding:78px 0}
.section-head{display:flex;flex-direction:column;gap:14px;max-width:46ch}
.section-head h2{font-family:var(--font-display);font-weight:400;font-size:clamp(27px,3vw,36px);line-height:1.15;letter-spacing:-.015em}

/* ---------- tour ---------- */
.tour{background:var(--panel);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.tour-bar{display:flex;align-items:center;gap:10px;margin-top:34px;padding-bottom:14px;border-bottom:1px solid var(--line-2);flex-wrap:wrap}
.tour-tab{padding:8px 13px;background:transparent;border:1px solid var(--line-2);border-radius:3px;color:var(--ink-2);font:11px var(--font-mono);letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.tour-tab:hover{border-color:var(--ink-3);color:var(--ink)}
.tour-tab[aria-selected="true"]{border-color:var(--accent);background:var(--accent-3);color:var(--accent)}
.tour-arrows{margin-left:auto;display:flex;gap:8px}
.arrow{width:36px;height:36px;display:grid;place-items:center;background:var(--paper);border:1px solid var(--line-2);border-radius:50%;color:var(--ink-2);cursor:pointer}
.arrow:hover{border-color:var(--accent);color:var(--accent)}
.arrow svg{width:16px;height:16px}
.arrow[disabled]{opacity:.35;cursor:default}
.arrow[hidden]{display:none}
.tour-play .i-play{display:none}
.tour-play.is-paused .i-pause{display:none}
.tour-play.is-paused .i-play{display:block}
.track-wrap{overflow:hidden;margin-top:30px;padding-bottom:30px}
.tour-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none}
.tour-track::-webkit-scrollbar{display:none}
.slide{flex:0 0 100%;scroll-snap-align:start;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:60px;align-items:center;padding-right:26px}
.slide-copy{display:flex;flex-direction:column;align-items:flex-start;gap:18px;max-width:30rem}
.slide-copy .n{font:10.5px var(--font-mono);letter-spacing:.14em;color:var(--accent)}
.slide-copy h3{font-family:var(--font-display);font-weight:400;font-size:clamp(24px,2.6vw,31px);line-height:1.18;letter-spacing:-.014em;max-width:22ch}
.slide-copy p{color:var(--ink-2);font-size:16.5px;line-height:1.55;max-width:38ch}
.slide-notes{display:flex;flex-direction:column;width:100%;max-width:30rem;margin:0;padding:0;border-top:1px solid var(--line-2);list-style:none}
.slide-notes li{padding:9px 0;border-bottom:1px solid var(--line-2);color:var(--ink-2);font-size:14.5px}
.slide-notes li::before{content:"";display:inline-block;width:10px;height:1px;margin:0 11px 4px 0;background:var(--accent)}
.slide .stage{--s:.60}
@media (max-width:1120px){
  .tour .stage{--s:.60}
  .slide .stage{--s:.54}
  .slide{gap:40px}
}
@media (max-width:940px){
  .slide{grid-template-columns:1fr;gap:32px;justify-items:start}
  .slide .stage{--s:.62;margin-inline:auto}
}
@media (max-width:640px){
  .section{padding:56px 0}
  .slide .stage{--s:.6}
  /* Prev/next go, but the pause control has to stay reachable on touch. */
  .tour-arrows .arrow[data-step]{display:none}
}

/* ---------- plate ---------- */
.plate-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;margin-top:38px}
.figure-frame{padding:10px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel)}
.plate{display:block;width:100%;height:auto}
.scan-toggle{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:14px}
.tl-label{color:var(--ink-3);font:10px var(--font-mono);letter-spacing:.14em;text-transform:uppercase}
.tl-btn{padding:7px 11px;background:transparent;border:1px solid var(--line-2);border-radius:2px;color:var(--ink-2);font:11px var(--font-mono);letter-spacing:.06em;cursor:pointer}
.tl-btn:hover{border-color:var(--ink-3);color:var(--ink)}
.tl-btn[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-3);color:var(--accent)}
.figcap{margin-top:14px;color:var(--ink-3);font-size:13.5px;line-height:1.5;max-width:44ch}
.figcap b{color:var(--ink-2);font-weight:600}
.grid-line{stroke:var(--line);stroke-width:.5}
.svglabel{fill:var(--ink-2);font-family:var(--font-mono);font-size:8.5px;letter-spacing:.04em}
.svglabel.dim{fill:var(--ink-3)}
.svglabel.key{fill:var(--accent)}
.leader,.dimline{stroke:var(--ink-3);stroke-width:.7}
.ghost{fill:none;stroke:var(--ink-3);stroke-width:1.1;stroke-dasharray:3 3.5;opacity:.55}
.plate-photo .tp{opacity:0;transition:opacity .5s ease}
.plate-photo .tp.is-on{opacity:1}
.plate-photo .fib-ring{fill:none;stroke:var(--accent);stroke-width:.9;stroke-dasharray:2.5 2.5;opacity:.75}
.anatomy-section{border-top:1px solid var(--line)}
.anatomy-copy{color:var(--ink-2);font-size:16.5px;line-height:1.55;max-width:42ch}
@media (max-width:940px){
  .plate-grid{grid-template-columns:1fr;gap:38px}
}


.join-section {
  padding: 64px 0;
  border-top: 1px solid var(--line);
}

.join-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 56px;
  overflow: hidden;
  padding: 44px 48px;
  border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--line));
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--accent-3), var(--panel));
}

.join-card::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--accent);
  content: "";
}

.join-copy h2 {
  max-width: 21ch;
  margin-top: 12px;
  font-size: clamp(29px, 3.2vw, 39px);
  letter-spacing: -.01em;
  line-height: 1.12;
}

.join-note {
  max-width: 54ch;
  margin-top: 14px;
  color: var(--ink-2);
  font-size: 15.5px;
  line-height: 1.55;
}

.join-action {
  display: flex;
  min-width: 205px;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}

.join-action .btn {
  padding: 12px 22px;
  box-shadow: 0 12px 24px -18px var(--accent-2);
  text-align: center;
}

.join-meta {
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .04em;
  text-align: center;
}

/* ---------- limits & privacy ---------- */
.limits {
  border-top: 1px solid var(--line);
  background: var(--paper);
}

.limit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  margin-top: 30px;
}

.limit {
  padding-top: 16px;
  border-top: 1px solid var(--line-2);
}

.limit h3 {
  font-size: 15px;
  font-weight: 650;
}

.limit p {
  margin-top: 9px;
  color: var(--ink-2);
  font-size: 14.5px;
  line-height: 1.55;
}

.limit-footnote {
  margin-top: 24px;
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .01em;
}

@media (max-width: 900px) {
  .tool-grid {
    grid-template-columns: 1fr;
  }

  .tool-card {
    display: grid;
    grid-template-columns: minmax(250px, .8fr) 1fr;
  }

  .tool-preview {
    border-right: 1px solid var(--line);
    border-bottom: 0;
  }

  .join-card {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 38px 40px;
  }

  .join-action {
    width: min(100%, 260px);
  }

  .limit-grid {
    grid-template-columns: 1fr;
    gap: 38px;
  }
}

@media (max-width: 620px) {
  .cohort-strip .btn {
    width: 100%;
    margin-left: 0;
    text-align: center;
  }

  .recovery-tools,
  .join-section {
    padding: 56px 0;
  }

  .tool-card {
    display: flex;
  }

  .tool-preview {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .join-card {
    padding: 30px 24px 28px;
  }

  .join-action {
    width: 100%;
  }

}