/* Product: inside the greenhouse, morning. The app's own rooms in the order
   a member walks them. Every app screen here is built in the page (HTML, CSS,
   inline SVG) and carries an Example tag. Loaded after world.css. */

[data-place="product"] {
  --app-bg: #F4F1E8; --app-ink: #111A17; --app-2: #46524C; --app-line: #DCD6C4;
  --deep: #0B3D2E; --coral-d: #B4462E;
  --c-reach: #846CD1; --c-visits: #469ECE; --c-interest: #9D4FA3; --c-wins: #D36F90; --c-money: #4B71B9; --c-exp: #26A59F;
}
@media (prefers-reduced-motion: no-preference) { html[data-place="product"] { scroll-behavior: smooth; } }
[data-place="product"] main section[id] { scroll-margin-top: 72px; }
[data-place="product"] figure { margin: 0; }
@media (min-width: 721px) { [data-place="product"] .hero { padding-top: 96px; } }
@media (min-width: 721px) and (max-aspect-ratio: 4/5) { [data-place="product"] .hero { padding-top: calc(var(--soil) + 28px); } }
.s-reach { --c: var(--c-reach); } .s-visits { --c: var(--c-visits); } .s-interest { --c: var(--c-interest); }
.s-wins { --c: var(--c-wins); } .s-money { --c: var(--c-money); } .s-exp { --c: var(--c-exp); } .s-roots { --c: var(--ivory); }

/* ------------------------------------------------------------ hero: the three rooms as a table of contents */
.rooms { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.rooms a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 999px; background: rgba(14,21,18,0.42); border: 1px solid var(--line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-size: 14px; font-weight: 600; text-decoration: none; transition: border-color 160ms ease, background 160ms ease; }
.rooms a span { font: 500 13px/1 var(--mono); color: var(--mint); }
.rooms a:hover { border-color: var(--mint); background: rgba(14,21,18,0.6); }
.rooms a:focus-visible, .quiet:focus-visible, [data-place="product"] main button:focus-visible, .app a:focus-visible, .offer:focus-visible, .strip:focus-visible, .close-side a:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; }

/* ------------------------------------------------------------ shared panel variants */
.panel.wide { max-width: 1240px; }
.panel.light.blush { background: linear-gradient(180deg, rgba(246,243,234,0.93), rgba(240,226,217,0.93)); }
.panel.light.dusk { background: linear-gradient(180deg, rgba(246,243,234,0.93), rgba(247,230,207,0.93)); }
.eyebrow.coral, .panel.light .eyebrow.coral { color: var(--coral-d); }
.center-head { display: grid; gap: 14px; justify-items: center; text-align: center; max-width: 860px; margin: 0 auto; }
.center-head .lead { max-width: 680px; }
.small.center { text-align: center; }
.head-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; }
.head-copy { display: grid; gap: 14px; max-width: 720px; }
[data-place="product"] h3 { margin: 0; font: 500 24px/1.15 var(--serif); }
.quiet { justify-self: start; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 15px; font-weight: 600; color: var(--mint); text-decoration: none; }
.quiet:hover { text-decoration: underline; text-underline-offset: 4px; }

/* The Example tag: every app screen, number and chart on this page is illustrative. */
.ex { flex: none; display: inline-block; padding: 3px 9px; border-radius: 999px; background: rgba(17,26,23,0.07); color: var(--app-2); font: 600 10.5px/1.4 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; }
.ex.dark, .phone .ex { background: rgba(246,243,234,0.12); color: var(--muted); }

/* ------------------------------------------------------------ the app window (morning theme)
   Container queries keep it a desktop window when it has room and turn it
   into the phone app (rooms as a bottom tab bar) when it doesn't. */
.app { container: app / inline-size; width: 100%; min-width: 0; }
.app-win { display: flex; border-radius: 18px; overflow: hidden; background: var(--app-bg); color: var(--app-ink); border: 1px solid rgba(17,26,23,0.1); box-shadow: 0 30px 80px rgba(8,14,12,0.32); }
.app-rail { flex: none; width: 168px; padding: 18px 10px; border-right: 1px solid rgba(17,26,23,0.08); display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.app-brand { font: 600 20px/1 var(--serif); padding: 4px 12px 16px; }
.app-brand span { color: #087F5B; }
.app-rail a, .app-rail .acct { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 12px; border-radius: 10px; text-decoration: none; color: var(--app-ink); }
.app-rail a:hover { background: rgba(11,61,46,0.06); }
.app-rail a.on { background: rgba(11,61,46,0.1); font-weight: 600; }
.app-rail .acct { margin-top: auto; color: var(--app-2); }
.app-rail svg { width: 17px; height: 17px; flex: none; color: var(--app-2); }
.app-rail .sun { color: #B8862B; }
.app-main { flex: 1; min-width: 0; padding: 22px 26px 24px; display: grid; gap: 16px; align-content: start; }
.app-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.app-meta { font-size: 13px; color: var(--app-2); }
.app-meta a { color: inherit; }
@container app (max-width: 700px) {
  .app-win { flex-direction: column-reverse; }
  .app-rail { width: auto; flex-direction: row; justify-content: space-around; gap: 2px; padding: 6px; border-right: 0; border-top: 1px solid rgba(17,26,23,0.08); background: rgba(255,255,255,0.5); }
  .app-brand, .app-rail .acct { display: none; }
  .app-rail a { flex: 1 1 0; min-width: 0; flex-direction: column; justify-content: center; gap: 3px; min-height: 48px; padding: 4px 2px; font-size: 11px; text-align: center; }
  .app-rail a span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .app-main { padding: 16px 14px 18px; gap: 14px; }
  .opened { padding: 12px; }
  .ch { gap: 8px; padding: 0 4px; }
}
@container app (max-width: 330px) { .app-rail a[href="/world/connections"] { display: none; } }

/* Crossfading pairs (healthy / strained) share one grid cell. */
.stack { display: grid; }
.stack > * { grid-area: 1 / 1; }
/* One state at a time: the outgoing words fade out fully before the
   incoming ones fade in, so two states never read on top of each other. */
.v-ok { transition: opacity 300ms ease calc(var(--d, 0ms) + 240ms), visibility 0s linear calc(var(--d, 0ms) + 240ms); }
.v-bad { opacity: 0; visibility: hidden; transition: opacity 200ms ease var(--d, 0ms), visibility 0s linear calc(var(--d, 0ms) + 200ms); }
.is-strained .v-ok { opacity: 0; visibility: hidden; transition: opacity 200ms ease var(--d, 0ms), visibility 0s linear calc(var(--d, 0ms) + 200ms); }
.is-strained .v-bad { opacity: 1; visibility: visible; transition: opacity 300ms ease calc(var(--d, 0ms) + 240ms), visibility 0s linear calc(var(--d, 0ms) + 240ms); }
.sig:not(.seed) { --d: calc(320ms + var(--i, 0) * 150ms); }
.needs .stack > * { --d: 1250ms; }

/* Part 1: the sentence */
.part { position: relative; margin: 0; transition: opacity 350ms ease, transform 350ms cubic-bezier(.2,.7,.2,1); }
.sentence { font: 400 clamp(18px, 2.1vw, 24px)/1.28 var(--serif); color: var(--app-ink); text-wrap: pretty; }
.sentence .v-bad { color: var(--coral-d); }

/* Part 2: the board. Healthy roots in the middle, its roots running to the six. */
.board-wrap { container: board / inline-size; }
.board { position: relative; padding: 22px 14px; border-radius: 16px; background: var(--ink); color: var(--ivory); }
.board .sigs { position: relative; z-index: 1; }
/* Strained: every root into the seed runs coral and quiet. */
.is-strained .board .fr-base, .is-strained .board .fr-hair { stroke: var(--coral); stroke-dasharray: 4 5; }
.is-strained .board .fr-flow { animation: none; opacity: 0; }
.is-strained .board .fr-base { opacity: 1; }
.is-strained .board .fr-body, .is-strained .board .fr-tip { opacity: 0; }
.sigs { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: "a b c" "s s s" "d e f"; gap: 18px 6px; justify-items: center; }
.sigs > :nth-child(1) { grid-area: a; } .sigs > :nth-child(2) { grid-area: b; } .sigs > :nth-child(3) { grid-area: c; }
.sigs > :nth-child(4) { grid-area: s; } .sigs > :nth-child(5) { grid-area: d; } .sigs > :nth-child(6) { grid-area: e; } .sigs > :nth-child(7) { grid-area: f; }
.sig { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; min-width: 0; }
/* The top row faces the seed: words above, ring below, so no root crosses a word. */
.sigs > :nth-child(-n+3) { flex-direction: column-reverse; }
/* Nov 4: on a narrow board the six sit where the Home board puts them,
   Money in the first slot over the seed: Experience, Money, Visits above;
   Reach, Wins, Interest below. The wide board keeps its two columns. */
.sigs > .s-exp { grid-area: a; } .sigs > .s-money { grid-area: b; } .sigs > .s-visits { grid-area: c; }
.sigs > .s-reach { grid-area: d; } .sigs > .s-wins { grid-area: e; } .sigs > .s-interest { grid-area: f; }
.sigs > .s-exp, .sigs > .s-money, .sigs > .s-visits { flex-direction: column-reverse; }
.sigs > .s-reach, .sigs > .s-wins, .sigs > .s-interest { flex-direction: column; }
.sig-t { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sig-n { font-size: 13px; font-weight: 600; }
.sig .v-ok { display: flex; flex-direction: column; gap: 1px; }
.val { font: 500 15px/1.2 var(--mono); }
.word { font-size: 12px; line-height: 1.3; }
.t-ok { color: var(--mint); } .t-warn { color: var(--amber); } .t-bad { color: var(--coral); }
.sig .v-bad { font-size: 12px; color: #9AA5A0; }
.ring { position: relative; flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: #15201B; border: 2px solid var(--c); color: var(--c); box-shadow: 0 0 0 6px rgba(255,255,255,0.025); transition: border-color 400ms ease var(--d, 0ms); }
.ring::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px dashed #7E8984; opacity: 0; transition: opacity 400ms ease var(--d, 0ms); }
.ring .g { width: 22px; height: 22px; transition: opacity 400ms ease var(--d, 0ms); }
.is-strained .sig:not(.seed) .ring { border-color: transparent; }
.is-strained .sig:not(.seed) .ring::after { opacity: 1; }
.is-strained .sig:not(.seed) .ring .g { opacity: 0.35; }
.seed .ring { width: 108px; height: 108px; background: var(--ivory); border-color: var(--ivory); color: var(--ink); flex-direction: column; gap: 2px; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 8px rgba(246,243,234,0.06), 0 0 40px rgba(111,211,166,0.18); transition: background 500ms ease, border-color 500ms ease, box-shadow 500ms ease; }
.seed .ring { --fs: 34px; --gs: 18px; }
.seed .ring::after { display: none; }
.seed-num { font: 500 34px/1 var(--mono); font-variant-numeric: tabular-nums; }
.seed .ring .seed-num { font-size: inherit; }
.seed .sig-n { font-size: 14px; }
.seed .word, .seed-why { font-size: 12px; max-width: 240px; }
.seed .v-bad, .seed-why { color: var(--coral); }
.is-strained .seed .ring { background: #3A221D; border-color: var(--coral); color: var(--coral); box-shadow: 0 0 0 8px rgba(229,115,95,0.1), 0 0 40px rgba(229,115,95,0.2); }
.is-strained .seed .ring .g { color: var(--coral); }
.mark { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid currentColor; font: 700 10px/1 var(--sans); vertical-align: -3px; margin-right: 2px; }
@container board (min-width: 500px) {
  .board { padding: 26px 22px; }
  .sigs { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-areas: "a s d" "b s e" "c s f"; column-gap: clamp(28px, 6cqw, 64px); row-gap: 16px; align-items: center; }
  .sig:not(.seed) .word, .sig:not(.seed) .v-bad { white-space: nowrap; }
  .sigs > :nth-child(1) { grid-area: a; } .sigs > :nth-child(2) { grid-area: b; } .sigs > :nth-child(3) { grid-area: c; }
  .sigs > :nth-child(5) { grid-area: d; } .sigs > :nth-child(6) { grid-area: e; } .sigs > :nth-child(7) { grid-area: f; }
  .sigs > .sig:not(.seed) { flex-direction: row; text-align: left; gap: 12px; justify-self: start; }
  .sigs > .sig:nth-child(-n+3) { flex-direction: row-reverse; text-align: right; justify-self: end; }
  .ring { width: 50px; height: 50px; }
  .seed .ring { width: 128px; height: 128px; --fs: 40px; --gs: 20px; }
}

/* Part 3: needs you, and how fresh */
.needs { display: flex; flex-wrap: wrap; gap: 10px; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 10px; font-size: 13px; line-height: 1.35; }
.pill.t-warn { background: rgba(232,169,59,0.18); color: #6E5112; }
.pill.t-bad { background: rgba(229,115,95,0.15); color: #8E3522; }
.pill.fresh { background: rgba(17,26,23,0.05); color: var(--app-2); }

/* Numbered parts (room one): tags on the screen match the callouts. */
.part-tag { position: absolute; z-index: 3; top: -10px; left: -10px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--deep); color: var(--ivory); font: 500 11px/1 var(--mono); box-shadow: 0 2px 8px rgba(8,14,12,0.25); }
.sentence .part-tag { top: 2px; left: -24px; }
@container app (max-width: 700px) { .sentence .part-tag { top: -13px; left: -8px; } .sentence[data-part] { padding-top: 6px; } }
.app.focus .part { opacity: 0.4; }
.app.focus .part.on { opacity: 1; transform: translateY(-3px); }
.app.focus .board-wrap.on .board { box-shadow: 0 16px 40px rgba(8,14,12,0.35), 0 0 0 2px var(--mint); }
.app.focus .part.on .part-tag { background: var(--mint); color: var(--ink); }

/* ------------------------------------------------------------ room one: pinned walk-through */
.pin { grid-template-areas: "head" "stage" "list"; }
.pin-head { grid-area: head; display: grid; gap: 14px; }
.pin-stage { grid-area: stage; display: grid; gap: 6px; min-width: 0; }
.callouts { grid-area: list; list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.callout { width: 100%; display: flex; gap: 14px; align-items: flex-start; text-align: left; padding: 14px; border-radius: 16px; border: 1px solid transparent; background: rgba(246,243,234,0.03); color: inherit; font: inherit; cursor: pointer; transition: background 200ms ease, border-color 200ms ease; }
.callout:hover { background: rgba(246,243,234,0.07); }
.callout[aria-pressed="true"] { background: rgba(111,211,166,0.1); border-color: rgba(111,211,166,0.4); }
.callout .num { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--deep); color: var(--ivory); font: 500 14px/1 var(--mono); border: 1px solid rgba(111,211,166,0.35); transition: background 200ms ease, color 200ms ease; }
.callout[aria-pressed="true"] .num { background: var(--mint); color: var(--ink); }
.co-t { display: grid; gap: 4px; }
.co-t b { font-size: 17px; font-weight: 600; line-height: 1.3; }
.co-t span { font-size: 15px; line-height: 1.5; color: var(--muted); }
@media (min-width: 1000px) {
  .pin { grid-template-columns: minmax(280px, 340px) minmax(0, 1fr); grid-template-areas: "head stage" "list stage"; grid-template-rows: auto 1fr; column-gap: clamp(32px, 4vw, 56px); align-items: start; }
  .pin-stage { position: sticky; top: 104px; align-self: start; }
  .callouts { gap: 0; padding-bottom: 8vh; }
  .callouts li { min-height: 30vh; display: flex; align-items: center; }
  .callouts li:first-child { min-height: 22vh; align-items: flex-start; }
}

/* ------------------------------------------------------------ the strained moment */
#strained .app { max-width: 1000px; justify-self: center; }
@media (prefers-reduced-motion: no-preference) {
  .is-strained .seed .ring { animation: beat 700ms cubic-bezier(.3,.7,.3,1) 1; }
}
@keyframes beat { 0% { transform: scale(1); } 35% { transform: scale(1.07); } 100% { transform: scale(1); } }
.toggle { justify-self: center; display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(17,26,23,0.07); }
.toggle button { white-space: nowrap; min-height: 44px; padding: 0 clamp(14px, 3vw, 20px); border: 0; border-radius: 999px; background: transparent; color: var(--ink2); font: 600 14px/1 var(--sans); cursor: pointer; transition: background 200ms ease, color 200ms ease; }
.toggle button[aria-pressed="true"] { background: var(--ink2); color: var(--ivory); }
.toggle button[data-state="strained"][aria-pressed="true"] { background: var(--coral-d); }
.toggle button:focus-visible { outline-color: var(--mint-d) !important; }

/* ------------------------------------------------------------ open a signal */
.split { align-items: center; }
.split-copy { display: grid; gap: 14px; }
@media (min-width: 1000px) { .split { grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); column-gap: clamp(32px, 4vw, 56px); } }
.back { text-decoration: underline; text-underline-offset: 3px; }
.picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; }
.pick { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--app-line); background: rgba(255,255,255,0.6); color: var(--app-ink); font: 500 14px/1 var(--sans); cursor: pointer; transition: background 160ms ease, border-color 160ms ease; }
.pick svg { width: 18px; height: 18px; flex: none; color: var(--c); }
.pick:hover { border-color: var(--c); }
.pick[aria-pressed="true"] { border-color: var(--c); background: color-mix(in srgb, var(--c) 13%, #FFFFFF); font-weight: 600; }
.opened { display: grid; gap: 14px; padding: 18px; border-radius: 16px; background: #FFFFFF; border: 1px solid var(--app-line); transform-origin: 20% 0; }
.op-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.op-g { width: 26px; height: 26px; color: var(--c); }
.op-name { font: 500 24px/1.1 var(--serif) !important; }
.op-unit { font-size: 13px; color: var(--app-2); }
.channels { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.ch { width: 100%; display: grid; grid-template-columns: minmax(76px, 104px) minmax(0, 1fr) minmax(56px, auto); align-items: center; gap: 12px; min-height: 44px; padding: 0 8px; border: 0; border-radius: 10px; background: transparent; color: var(--app-ink); font: 400 14px/1 var(--sans); text-align: left; cursor: pointer; }
.ch:hover, .ch[aria-expanded="true"] { background: rgba(17,26,23,0.04); }
.ch-n::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 8px; border-right: 1.5px solid var(--app-2); border-bottom: 1.5px solid var(--app-2); transform: rotate(-45deg); vertical-align: 2px; transition: transform 200ms ease; }
.ch[aria-expanded="true"] .ch-n::after { transform: rotate(45deg); }
.bar-t { height: 14px; border-radius: 4px; background: rgba(17,26,23,0.05); overflow: hidden; }
.bar { display: block; height: 100%; border-radius: 4px; background: var(--c); transform-origin: 0 50%; transform: scaleX(var(--w)); }
.pjs .opened:not(.go) .bar { transform: scaleX(0); }
.opened.go .bar { transition: transform 650ms cubic-bezier(.2,.7,.2,1) calc(var(--i, 0) * 40ms); }
.ch-v { font: 500 13px/1 var(--mono); text-align: right; }
.ch-apps { margin: 2px 8px 8px; padding: 10px 12px; border-radius: 10px; background: var(--app-bg); font-size: 13px; line-height: 1.45; color: var(--app-2); }
.offer { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 10px 14px; border-radius: 12px; border: 1px dashed var(--app-line); color: var(--app-2); font-size: 14px; line-height: 1.4; text-decoration: none; transition: border-color 160ms ease, color 160ms ease; }
.offer:hover { border-color: #087F5B; color: var(--app-ink); }
.plus { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid currentColor; font: 500 15px/1 var(--mono); }
@media (prefers-reduced-motion: no-preference) {
  .opener.pop .opened { animation: open-up 420ms cubic-bezier(.2,.7,.2,1) 1; }
}
@keyframes open-up { from { opacity: 0.2; transform: scale(0.94); } }

/* ------------------------------------------------------------ Vitals */
.tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; }
.tile { color: var(--ink2); display: grid; gap: 6px; align-content: start; padding: 16px; border-radius: 16px; background: #FFFFFF; border: 1px solid rgba(17,26,23,0.1); }
.tile-n { font-size: 15px; font-weight: 600; }
.tile-v { font: 500 30px/1.05 var(--mono); color: #087F5B; font-variant-numeric: tabular-nums; }
.t-warn .tile-v { color: #8A6A1F; }
.tchart { width: 100%; height: 46px; margin: 4px 0 2px; overflow: visible; }
.band-r { fill: rgba(111,211,166,0.2); }
.band-l { stroke: rgba(8,127,91,0.45); stroke-dasharray: 3 3; stroke-width: 1; vector-effect: non-scaling-stroke; }
.tchart rect.wk { fill: #B7C6BE; }
.tchart rect.now { fill: #087F5B; }
.t-warn .tchart rect.now { fill: var(--amber); }
.tchart rect.wk, .tchart rect.now { transform-box: fill-box; transform-origin: 50% 100%; transition: transform 500ms cubic-bezier(.2,.7,.2,1) calc(var(--i) * 35ms); }
.reveal:not(.in) .tchart rect.wk, .reveal:not(.in) .tchart rect.now { transform: scaleY(0); }
.tile-r { font-size: 12px; color: #3D4A44; }
.tile-w { font-size: 12.5px; font-weight: 600; color: #087F5B; }
.t-warn .tile-w { color: #8A6A1F; }
.tiles-key { display: flex; align-items: center; gap: 8px; margin: -6px 0 0; }
.key-band { width: 22px; height: 12px; border-radius: 3px; background: rgba(111,211,166,0.3); border-top: 1px dashed rgba(8,127,91,0.6); border-bottom: 1px dashed rgba(8,127,91,0.6); flex: none; }

.days { container: days / inline-size; display: grid; gap: 12px; padding-top: 18px; border-top: 1px solid rgba(17,26,23,0.1); }
.days-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 20px; }
.days-head p { margin: 0; font-size: 14px; line-height: 1.5; color: #3D4A44; max-width: 560px; }
.days .strip { display: grid; grid-template-columns: repeat(90, minmax(0, 1fr)); gap: 2px; padding: 4px 0; border-radius: 6px; cursor: crosshair; }
.days .strip i { display: block; height: 28px; border-radius: 2px; position: relative; transition: opacity 300ms ease calc(var(--i) * 9ms), transform 300ms ease calc(var(--i) * 9ms); }
.days .strip i.d-w, .days .strip i.d-b { transition-delay: calc(900ms + (var(--i) - 58) * 160ms); }
.days.reveal:not(.in) .strip i { opacity: 0; transform: scaleY(0.4); }
.days .strip i.sel { box-shadow: 0 0 0 2px var(--ink2); z-index: 1; }
.d-g { background: #6FD3A6; } .d-s { background: #2FAE7C; } .d-w { background: var(--amber); } .d-b { background: var(--coral); } .d-n { background: #CFCAB9; }
.days .strip i.d-b::after { content: ""; position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: 50%; background: #FFFFFF; }
.day-read { margin: 0; min-height: 3em; font-size: 14px; line-height: 1.5; color: var(--ink2); }
.legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 12.5px; color: #3D4A44; }
.legend li { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
@container days (max-width: 720px) {
  .days .strip { grid-template-columns: repeat(30, minmax(0, 1fr)); row-gap: 5px; }
  .days .strip i { height: 22px; }
  .days .strip i.d-w, .days .strip i.d-b { transition-delay: calc(700ms + (var(--i) - 58) * 160ms); }
}

/* ------------------------------------------------------------ Health: the tide */
.tide { container: tide / inline-size; padding: 8px 0 0; }
.tide-in { display: grid; gap: 16px; }
.tide-art { min-width: 0; }
.tide-h { display: block; width: 100%; height: auto; aspect-ratio: 1088 / 220; overflow: visible; }
.tide-v { display: none; }
.swell { transform-box: fill-box; transform-origin: 0 50%; transition: transform 1600ms cubic-bezier(.2,.7,.2,1), opacity 1200ms ease; }
.tide.reveal:not(.in) .swell { transform: scaleY(0.55); opacity: 0.35; }
/* Drop-offs: soft ribbons that leave the river's bank where people leave a
   stage, and fade as they fall. Width follows how many left (by eye). */
.wisp { transition: opacity 900ms ease var(--d, 900ms), transform 1100ms cubic-bezier(.2,.7,.2,1) var(--d, 900ms); }
.tide.reveal:not(.in) .wisp { opacity: 0; transform: translateY(-8px); }
.tide-v .wisp { transform-box: fill-box; }
.tide.reveal:not(.in) .tide-v .wisp { transform: translateX(6px); }
.wb { transition: opacity 900ms ease; }
.wf { fill: none; stroke: #F6F3EA; stroke-opacity: 0.32; stroke-width: 1.2; stroke-linecap: round; stroke-dasharray: 12 88; stroke-dashoffset: 100; vector-effect: non-scaling-stroke; }
@media (prefers-reduced-motion: no-preference) {
  .tide.in .tide-h .shine { animation: shine-h 2600ms cubic-bezier(.4,0,.2,1) 900ms 1 both; }
  .tide.in .tide-v .shine { animation: shine-v 2600ms cubic-bezier(.4,0,.2,1) 900ms 1 both; }
}
@keyframes shine-h { from { transform: translateX(0); } to { transform: translateX(1330px); } }
@keyframes wisp-flow { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes shine-v { from { transform: translateY(0); } to { transform: translateY(740px); } }
.stages { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.stage { width: 100%; min-height: 64px; display: grid; gap: 6px; align-content: start; padding: 10px 10px 8px; border: 0; border-top: 2px solid var(--line); border-radius: 0 0 12px 12px; background: transparent; color: var(--ivory); text-align: left; font: inherit; cursor: pointer; transition: background 160ms ease, border-color 160ms ease; }
.stage:hover { background: rgba(246,243,234,0.05); }
.stage[aria-pressed="true"] { border-top-color: var(--mint); background: rgba(111,211,166,0.09); }
.st-n { font-size: 14px; font-weight: 600; line-height: 1.25; }
.st-v { font: 500 20px/1 var(--mono); }
@container tide (max-width: 640px) {
  .tide-in { grid-template-columns: 64px minmax(0, 1fr); gap: 0 14px; }
  .tide-h { display: none; }
  .tide-v { display: block; width: 64px; height: 100%; overflow: visible; }
  .swell { transform-origin: 50% 0; }
  .tide.reveal:not(.in) .swell { transform: scaleX(0.55); }
  .stages { grid-template-columns: 1fr; gap: 6px; }
  .stage { grid-template-columns: 1fr auto; align-items: center; min-height: 56px; border-top: 0; border-left: 2px solid var(--line); border-radius: 0 12px 12px 0; padding: 8px 14px; }
  .stage[aria-pressed="true"] { border-left-color: var(--mint); }
}
.stage-detail { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 22px; padding: 16px 18px; border-radius: 16px; background: rgba(246,243,234,0.05); border: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.sd-n { font: 500 22px/1.1 var(--serif); color: var(--ivory); }
.sd-v { font: 500 15px/1.2 var(--mono); color: var(--ivory); }

/* ------------------------------------------------------------ share and the phone */
.share-grid { display: grid; gap: 40px; align-items: center; }
.share-copy { display: grid; gap: 16px; min-width: 0; }
@media (min-width: 900px) { .share-grid { grid-template-columns: minmax(0, 1fr) 290px; gap: clamp(40px, 6vw, 96px); } }
.recap { max-width: 520px; display: grid; gap: 12px; padding: 20px; border-radius: 18px; background: #FFFFFF; border: 1px solid rgba(17,26,23,0.1); box-shadow: 0 20px 50px rgba(17,26,23,0.12); color: var(--app-ink); transition: opacity 700ms ease 250ms, transform 700ms cubic-bezier(.2,.7,.2,1) 250ms; }
.reveal:not(.in) .recap { opacity: 0; transform: translateY(36px); }
.recap-h { margin: 0; font: 400 clamp(20px, 2.2vw, 24px)/1.25 var(--serif); }
.recap-stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.recap-stats li { display: grid; gap: 4px; padding: 10px; border-radius: 10px; background: var(--app-bg); font-size: 12px; color: var(--app-2); }
.recap-stats b { font: 500 20px/1 var(--mono); color: var(--app-ink); }
.recap-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; font-size: 13px; color: var(--app-2); }
.share-pill { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; background: var(--deep); color: var(--ivory); font-weight: 600; }
.share-pill .arrow { width: 15px; height: 15px; }
@media (prefers-reduced-motion: no-preference) { .in .share-pill .arrow { animation: lift 900ms ease 1100ms 1 both; } }
@keyframes lift { 0%, 100% { transform: translateY(0); } 45% { transform: translateY(-4px); } }

.phone { justify-self: center; width: min(280px, 100%); padding: 10px; border-radius: 44px; background: #1D2421; box-shadow: 0 30px 70px rgba(17,26,23,0.3), inset 0 0 0 1px rgba(255,255,255,0.08); }
.phone-in { position: relative; display: grid; gap: 14px; padding: 30px 16px 26px; border-radius: 34px; background: var(--ink); color: var(--ivory); }
.phone-in::before { content: ""; position: absolute; top: 10px; left: 50%; width: 72px; height: 18px; margin-left: -36px; border-radius: 999px; background: #000; }
.phone-top { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.phone-top .sun { width: 16px; height: 16px; color: var(--gold); }
.phone-top .ex { margin-left: auto; }
.phone-seed { display: flex; align-items: center; gap: 14px; }
.seed-c { flex: none; width: 70px; height: 70px; border-radius: 50%; display: grid; place-items: center; background: var(--ivory); color: var(--ink); box-shadow: 0 0 0 6px rgba(246,243,234,0.07); }
.seed-c .seed-num { font-size: 26px; }
.seed-t { display: grid; gap: 2px; font-size: 12px; color: var(--muted); }
.seed-t b { font-size: 14px; color: var(--ivory); }
.phone-sigs { position: relative; list-style: none; margin: -4px 0 0; padding: 0 0 0 44px; display: grid; gap: 6px; }
.phone-sigs::before { content: ""; position: absolute; left: 34px; top: -10px; bottom: 19px; width: 1.5px; background: rgba(246,243,234,0.55); transform-origin: 50% 0; transition: transform 900ms cubic-bezier(.4,0,.2,1) 300ms; }
.phone-sigs li { position: relative; display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 0 10px; border-radius: 10px; background: rgba(246,243,234,0.05); font-size: 13px; }
.phone-sigs li::before { content: ""; position: absolute; left: -10px; top: 50%; width: 10px; height: 1.5px; background: rgba(246,243,234,0.55); transition: opacity 300ms ease calc(500ms + var(--n, 0) * 110ms); }
.phone-sigs li:nth-child(1) { --n: 0; } .phone-sigs li:nth-child(2) { --n: 1; } .phone-sigs li:nth-child(3) { --n: 2; }
.phone-sigs li:nth-child(4) { --n: 3; } .phone-sigs li:nth-child(5) { --n: 4; } .phone-sigs li:nth-child(6) { --n: 5; }
.phone-sigs svg { width: 17px; height: 17px; flex: none; color: var(--c); }
.phone-sigs b { margin-left: auto; font: 500 13px/1 var(--mono); }
.reveal:not(.in) .phone-sigs::before { transform: scaleY(0); }
.reveal:not(.in) .phone-sigs li::before { opacity: 0; }

/* ------------------------------------------------------------ the door out */
.close { align-items: center; }
.close-copy { display: grid; gap: 22px; }
.close-side { display: flex; align-items: center; gap: 22px; }
.close-side p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--muted); max-width: 340px; }
.close-side a { color: var(--mint); font-weight: 600; }
.close-side { align-items: flex-end; border-bottom: 2px solid rgba(220,199,142,0.32); }
.close-side p { padding-bottom: 12px; }
.gperch { flex: none; width: 92px; height: auto; margin-bottom: -2px; filter: drop-shadow(0 10px 18px rgba(0,0,0,0.35)); }
@media (min-width: 860px) { .close { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); column-gap: 48px; } .gperch { width: 112px; } }

/* ------------------------------------------------------------ phones */
@media (max-width: 720px) {
  .panel.wide { padding: 26px 16px; border-radius: 22px; }
  .rooms a { padding: 0 14px; }
  .callout { padding: 12px 10px; }
  .close-side { align-items: flex-end; }
  .gperch { width: 76px; }
}
@media (max-width: 400px) {
  .panel.wide { padding: 22px 12px; }
  .board { padding: 18px 6px; }
  .sig-n { font-size: 12px; }
  .seed .ring { width: 96px; height: 96px; --fs: 30px; --gs: 16px; }
  .tile { padding: 14px; }
  .recap { padding: 16px; }
  .recap-stats b { font-size: 17px; }
}

/* ------------------------------------------------------------ reduced motion: every room shows its final still */
@media (prefers-reduced-motion: reduce) {
  [data-place="product"] main *, [data-place="product"] main *::before, [data-place="product"] main *::after { transition-duration: 0s !important; transition-delay: 0s !important; animation: none !important; }
  .app.focus .part.on { transform: none; }
}

/* Focus rings stay visible on the ivory panels. */
.panel.light :focus-visible { outline-color: var(--mint-d) !important; }

/* Health when a root breaks (round 4): the river turns coral and slows,
   and the stages past the break stop showing numbers. */
.swell .calm, .swell .coral { transition: opacity 900ms ease; }
.swell .coral { opacity: 0; }
.tide.is-strained .swell .calm { opacity: 0; }
.tide.is-strained .swell .coral { opacity: 1; }
.tide.is-strained .tide-h .wisp.after .wb { fill: url(#wispHc); }
.tide.is-strained .tide-v .wisp.after .wb { fill: url(#wispVc); }
.tide.is-strained .wisp.after .wf { stroke: #F6C9BF; }
.tide.is-strained .tide-h .swell { transform: scaleY(0.82); }
.tide.is-strained .tide-v .swell { transform: scaleX(0.82); }
@media (prefers-reduced-motion: no-preference) {
  .tide.in.flowing .tide-h .shine { animation: shine-h 3400ms linear infinite; }
  .tide.in.flowing .tide-v .shine { animation: shine-v 3400ms linear infinite; }
  .tide.in.flowing.is-strained .shine { animation-duration: 9000ms; }
  .tide.in.flowing .wf { animation: wisp-flow 3200ms linear infinite; animation-delay: var(--d, 0ms); }
  .tide.in.flowing.is-strained .wisp.after .wf { animation-duration: 8000ms; }
}
.stage .st-v .bad { display: none; color: var(--coral); font: 600 13px/1.2 var(--sans); }
.tide.is-strained .stage.down .st-v .ok { display: none; }
.tide.is-strained .stage.down .st-v .bad { display: inline; }
.tide.is-strained .stage.down { border-top-color: rgba(229,115,95,0.55); }
.tide.is-strained .stage.down[aria-pressed="true"] { border-top-color: var(--coral); background: rgba(229,115,95,0.1); }
@container tide (max-width: 640px) {
  .tide.is-strained .stage.down { border-left-color: rgba(229,115,95,0.55); }
  .tide.is-strained .stage.down[aria-pressed="true"] { border-left-color: var(--coral); }
}
.stage-detail.bad .sd-v { color: var(--coral); }
.toggle.dark { justify-self: start; background: rgba(246,243,234,0.08); }
.toggle.dark button { color: var(--ivory); }
.toggle.dark button[aria-pressed="true"] { background: var(--ivory); color: var(--ink); }
.toggle.dark button[data-hstate="strained"][aria-pressed="true"] { background: var(--coral); color: #2A120D; }

/* When something breaks (round 7): one root's last six hours, then what
   Feder does with it. A different picture from the Today board above it:
   the break itself, and the trust it takes with it. */
#strained .brk { max-width: 1000px; justify-self: center; }
.brk { margin: 0; width: 100%; display: grid; gap: 22px; padding: clamp(18px, 2.6vw, 30px); border-radius: 22px; background: #FBF8F1; border: 1px solid rgba(17,26,23,0.08); box-shadow: 0 24px 60px rgba(40,30,20,0.12); color: var(--ink); text-align: left; }
.brk-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.brk-k { font: 600 12px/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--app-2); }
.brk-lane { display: grid; gap: 10px; }
.brk-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.brk-name b { font: 500 20px/1.2 var(--serif); }
.brk-name .stack { font-size: 14px; }
.brk-name .t-ok, .brk-seed-t .t-ok, .brk-sig .t-ok { color: var(--mint-d); }
.brk-name .t-bad, .brk-seed-t .t-bad { color: var(--coral-d); }
.brk-track { position: relative; height: 60px; border-radius: 14px; background: rgba(17,26,23,0.04); overflow: hidden; }
.brk-line { position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: rgba(7,112,79,0.35); }
.brk-gap { position: absolute; left: var(--x); right: 0; top: 50%; height: 0; border-top: 2px dashed var(--coral-d); margin-top: -1px; opacity: 0; transition: opacity 400ms ease 200ms; }
.brk-ev { position: absolute; top: 50%; left: var(--x); width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--mint-d); box-shadow: 0 0 0 3px rgba(7,112,79,0.12); transition: opacity 300ms ease calc(var(--i) * 40ms), transform 300ms ease calc(var(--i) * 40ms); }
.is-strained .brk-ev.late { opacity: 0; transform: scale(0.3); transition-delay: calc((9 - var(--i)) * 30ms); }
.is-strained .brk-gap { opacity: 1; }
.brk-mark { position: absolute; top: 8px; bottom: 8px; left: var(--x); width: 0; border-left: 2px solid var(--coral-d); opacity: 0; transition: opacity 300ms ease 400ms; }
.brk-mark::after { content: ""; position: absolute; top: 50%; left: -7px; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: #FBF8F1; border: 2px solid var(--coral-d); box-sizing: border-box; }
.is-strained .brk-mark { opacity: 1; }
.brk-axis { display: flex; justify-content: space-between; font: 500 12px/1 var(--mono); color: var(--app-2); }

.brk-out { display: grid; grid-template-columns: 240px minmax(0, 1fr); grid-template-areas: "seed then" "seed sigs"; gap: 12px 26px; align-items: start; padding-top: 20px; border-top: 1px solid rgba(17,26,23,0.08); }
.brk-seed { grid-area: seed; display: grid; justify-items: center; gap: 12px; text-align: center; }
.brk-ring { display: grid; place-items: center; width: 116px; height: 116px; border-radius: 50%; background: var(--ink); color: var(--ivory); font: 500 42px/1 var(--sans); box-shadow: 0 0 0 8px rgba(111,211,166,0.12); transition: background 500ms ease 600ms, box-shadow 500ms ease 600ms, color 500ms ease 600ms; }
.is-strained .brk-ring { background: #3A211B; color: var(--coral); box-shadow: 0 0 0 8px rgba(229,115,95,0.16); }
.brk-seed-t { display: grid; gap: 4px; }
.brk-seed-t b { font-size: 15px; }
.brk-seed-t .stack { font-size: 13px; }
.brk-then { grid-area: then; margin: 0; font: 500 18px/1.3 var(--serif); }
.brk-then .v-bad { color: var(--coral-d); }
.brk-then .stack > * { --d: 800ms; }
.brk-sigs { grid-area: sigs; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.brk-sig { display: grid; gap: 6px; padding: 12px 14px; border-radius: 14px; background: #fff; border: 1.5px solid rgba(17,26,23,0.08); transition: border-color 300ms ease var(--d), background 300ms ease var(--d); }
.is-strained .brk-sig { border-style: dashed; border-color: rgba(17,26,23,0.22); background: rgba(255,255,255,0.5); }
.brk-sig-n { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.brk-sig-n i { width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--mint)); transition: opacity 300ms ease var(--d); }
.is-strained .brk-sig-n i { opacity: 0.25; }
.brk-sig b { font: 500 20px/1 var(--mono); }
.brk-sig .stack { font-size: 13px; }
.brk-sig .v-bad { color: var(--app-2); align-self: start; }
.brk-sig .t-warn { color: #8A6413; }
.brk-sig.s-reach { --c: #9B87E8; } .brk-sig.s-visits { --c: #5BB6E3; } .brk-sig.s-interest { --c: #B76FCB; }
.brk-sig.s-wins { --c: #E07C9A; } .brk-sig.s-money { --c: #6E8FE0; } .brk-sig.s-exp { --c: #2FB5A5; }
.brk .needs .stack > * { --d: 1400ms; }
@media (max-width: 720px) {
  .brk { gap: 18px; border-radius: 18px; }
  .brk-out { grid-template-columns: minmax(0, 1fr); grid-template-areas: "seed" "then" "sigs"; }
  .brk-seed { grid-template-columns: auto minmax(0, 1fr); justify-items: start; text-align: left; align-items: center; gap: 16px; }
  .brk-ring { width: 84px; height: 84px; font-size: 32px; }
  .brk-sigs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brk-then { font-size: 17px; }
}
/* Tablets (Nathanael's iPad, Nov 3: the six tiles spilled their words).
   The seed and its line share the top row, and the six tiles take the
   card's full width below, three across, so every word fits its tile. */
@media (min-width: 721px) and (max-width: 1000px) {
  .brk-out { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "seed then" "sigs sigs"; gap: 18px 24px; align-items: center; }
  .brk-seed { grid-template-columns: auto minmax(0, 1fr); justify-items: start; text-align: left; align-items: center; gap: 16px; }
  .brk-ring { width: 96px; height: 96px; font-size: 36px; }
  .brk-then { font-size: 20px; }
}
.brk-sig { align-content: start; min-width: 0; }
.brk-sig-n, .brk-sig .stack { min-width: 0; overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) { .brk * { transition: none !important; } }