/* ══════════════ the FIDA PLANT story (js/plant-story.js) ══════════════
   Under the garden, on the page: the five challenges as cards, the
   deck's chapters as tabs (one panel at a time), and a navy closer with
   the booking link. The site's light surfaces, its teal for the FIDA
   PLANT side of every comparison, its aqua only where the navy is. */

.plant-story { margin: clamp(72px, 9vw, 120px) 0 0; }
.st-head { max-width: 760px; margin-bottom: clamp(24px, 3vw, 36px); }
.st-kicker { margin: 0 0 10px; font-size: var(--fs-kicker); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); }
.st-title { margin: 0; font-size: var(--fs-h2); font-weight: 800; line-height: 1.06; letter-spacing: -0.03em; color: var(--navy-deep); }
.st-title em { font-style: normal; color: var(--fw-s10); }
.st-lead { margin: 12px 0 0; font-size: var(--fs-lead); line-height: 1.6; color: var(--text-muted); max-width: 64ch; }

/* ── the five challenges ── */
.st-challenges { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-rows: auto; column-gap: 12px; row-gap: 12px; }
.st-card {
  position: relative; display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 10px; align-content: start;
  padding: 22px 20px 20px; border-radius: var(--radius-lg); overflow: hidden;
  background: #fff; border: 1px solid var(--fw-line); box-shadow: var(--shadow-sm, 0 22px 70px rgba(15, 40, 51, .07));
  transition: transform .35s var(--ease-out-quart), box-shadow .35s var(--ease-out-quart), border-color .35s var(--ease-out-quart);
}
.st-card::before {
  content: ""; position: absolute; left: 0; top: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--fw-s10), var(--steel)); transform: scaleX(0); transform-origin: left;
  transition: transform .45s var(--ease-out-quart);
}
.st-card:hover { transform: translateY(-4px); border-color: #c9d8d6; box-shadow: 0 26px 60px -20px rgba(6, 43, 63, .25); }
.st-card:hover::before { transform: scaleX(1); }
.st-letter {
  font: 800 clamp(44px, 4.4vw, 60px)/.9 var(--font-display); letter-spacing: -0.04em;
  background: linear-gradient(160deg, var(--fw-navy) 30%, var(--fw-s10)); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.st-word { margin: 0; font: 600 11px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fw-s10); }
.st-q { margin: 2px 0 0; font: 800 16px/1.32 var(--font-display); letter-spacing: -0.01em; color: var(--fw-ink); }
.st-pain { margin: 4px 0 0; padding-top: 12px; align-self: start; border-top: 1px solid var(--fw-line); font-size: 13px; line-height: 1.5; color: var(--text-muted); }
.st-pain span { display: block; margin-bottom: 5px; font: 600 9.5px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-faint); }

/* ── the chapters: tabs, one panel at a time ── */
.st-chapters { margin-top: clamp(40px, 5vw, 64px); }
.st-tabs {
  display: flex; gap: 4px; padding: 4px; width: max-content; max-width: 100%; overflow-x: auto; scrollbar-width: none;
  border-radius: var(--radius-pill); background: var(--tile); border: 1px solid var(--fw-line);
}
.st-tabs::-webkit-scrollbar { display: none; }
.st-tab {
  flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border: 0; border-radius: var(--radius-pill);
  background: transparent; cursor: pointer; white-space: nowrap; font: 700 13px/1 var(--font); color: var(--text-muted);
  transition: background-color .2s var(--ease-out-quart), color .2s var(--ease-out-quart), box-shadow .2s var(--ease-out-quart);
}
.st-tab:hover { color: var(--fw-ink); }
.st-tab[aria-selected="true"] { background: var(--fw-navy); color: #fff; box-shadow: 0 8px 20px -10px rgba(6, 43, 63, .6); }
.st-tab-n { font: 600 10.5px/1 var(--font-mono); color: var(--fw-s10); }
.st-tab[aria-selected="true"] .st-tab-n { color: var(--steel); }
.st-tab:focus-visible { outline: 2px solid var(--fw-s10); outline-offset: 2px; }

.st-panel { margin-top: 22px; padding: clamp(24px, 3.2vw, 44px); border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--fw-line); }
.st-panel:not([hidden]) { animation: st-in .4s var(--ease-out-quart) both; }
@keyframes st-in { from { opacity: 0; transform: translateY(8px); } }
.st-panel-head { max-width: 780px; margin-bottom: 26px; }
.st-panel-title { margin: 0; font: 800 clamp(22px, 2.3vw, 30px)/1.15 var(--font-display); letter-spacing: -0.02em; color: var(--fw-ink); }
.st-panel-lead { margin: 10px 0 0; font-size: 15.5px; line-height: 1.6; color: var(--text-muted); }
.st-sub { margin-top: clamp(32px, 4vw, 52px); padding-top: clamp(28px, 3.4vw, 44px); border-top: 1px solid var(--fw-line); }
.st-note { margin: 12px 0 0; font-size: 13px; line-height: 1.55; color: var(--text-muted); }
.st-num { font: 600 11px/1 var(--font-mono); letter-spacing: .06em; color: var(--fw-s10); }

/* the comparison table: the usual, then FIDA PLANT in teal */
.st-table-wrap { overflow-x: auto; margin: 0 calc(-1 * clamp(24px, 3.2vw, 44px)); padding: 0 clamp(24px, 3.2vw, 44px); }
.st-table { width: 100%; min-width: 640px; border-collapse: separate; border-spacing: 0; font-size: 14px; line-height: 1.5; }
.st-table th, .st-table td { padding: 16px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--fw-line); }
.st-table thead th { padding-top: 0; font: 600 10.5px/1.3 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); }
.st-table thead th.is-plant { color: var(--fw-s10); }
.st-table tbody th b { display: block; font: 800 14.5px/1.3 var(--font-display); color: var(--fw-ink); }
.st-table tbody th span { display: block; margin-top: 3px; font-size: 12.5px; font-weight: 400; color: var(--text-muted); }
.st-table td { color: var(--text-muted); }
.st-table td.is-plant { background: linear-gradient(90deg, rgba(40, 113, 126, .07), rgba(40, 113, 126, .03)); color: var(--fw-ink); border-left: 2px solid var(--fw-s10); }
.st-table tbody tr:last-child > * { border-bottom: 0; }

/* a claim: navy, with the site's aqua */
.st-claim {
  margin: 28px 0 0; padding: 22px 26px; border-radius: var(--radius-lg); display: grid; gap: 6px;
  background: radial-gradient(120% 140% at 0% 0%, #0d4256, var(--fw-navy) 60%); color: #e8eef1;
}
.st-claim b { font: 800 18px/1.3 var(--font-display); letter-spacing: -0.01em; color: #fff; }
.st-claim b::before { content: ""; display: block; width: 28px; height: 3px; margin-bottom: 12px; border-radius: 2px; background: var(--steel); }
.st-claim span { font-size: 14px; line-height: 1.55; color: #aebdc6; }

.st-blocks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.st-blocks li { padding: 18px; border-radius: var(--radius-lg); background: var(--tile); display: grid; gap: 8px; align-content: start; }
.st-blocks b { font: 800 15px/1.3 var(--font-display); color: var(--fw-ink); }
.st-blocks p { margin: 0; font-size: 13px; line-height: 1.45; color: var(--text-muted); }
.st-blocks p span { font-weight: 700; }
.st-blocks p.is-plant { color: var(--fw-ink); }
.st-blocks p.is-plant span { color: var(--fw-s10); }
.st-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.st-compare > div { padding: 18px 20px; border-radius: var(--radius-lg); border: 1px dashed #c9d6d4; display: grid; gap: 4px; }
.st-compare > div.is-plant { border: 1px solid var(--fw-s10); background: rgba(40, 113, 126, .05); }
.st-compare b { font: 800 15px/1.3 var(--font-display); color: var(--fw-ink); }
.st-compare span { font-size: 13.5px; line-height: 1.5; color: var(--text-muted); }

/* the four layers */
.st-layers { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.st-layer { padding: 18px; border-radius: var(--radius-lg); background: var(--tile); border-top: 3px solid var(--fw-s10); }
.st-layer.l-core { border-top-color: var(--fw-navy); }
.st-layer.l-template { border-top-color: var(--steel); }
.st-layer.l-data { border-top-color: #8ea3ad; }
.st-layer > b { display: block; margin-bottom: 12px; font: 800 15px/1.3 var(--font-display); color: var(--fw-ink); }
.st-layer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.st-layer li { padding: 5px 10px; border-radius: var(--radius-pill); font-size: 12.5px; line-height: 1.3; }
.st-layer li.is-library { background: rgba(40, 113, 126, .12); color: var(--fw-ink); }
.st-layer li.is-planned { border: 1px dashed #b5c4c8; color: var(--text-muted); }
.st-keys { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 18px 0 0; font-size: 12.5px; color: var(--text-muted); }
.st-keys span::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 7px; vertical-align: -2px; border-radius: 3px; }
.st-keys .k-library::before { background: rgba(40, 113, 126, .3); }
.st-keys .k-planned::before { border: 1px dashed #9fb0b5; }

/* the worked example: method → library → your process */
.st-wk { display: grid; grid-template-columns: .8fr 1.25fr 1.25fr; gap: 14px; }
.st-wk-col { padding: 20px; border-radius: var(--radius-lg); background: var(--tile); min-width: 0; }
.st-wk-col h4 { display: flex; align-items: baseline; gap: 10px; margin: 0 0 14px; font: 800 15px/1.3 var(--font-display); color: var(--fw-ink); }
.st-wk-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; counter-reset: wk; }
.st-wk-steps li { counter-increment: wk; padding: 9px 12px; border-radius: 6px; background: #fff; font-size: 13px; font-weight: 600; color: var(--text-muted); }
.st-wk-steps li::before { content: counter(wk, decimal-leading-zero) "  "; font: 600 10.5px/1 var(--font-mono); color: var(--text-faint); }
.st-wk-steps li.is-on { background: var(--fw-navy); color: #fff; }
.st-wk-steps li.is-on::before { color: var(--steel); }
.st-wk-family { margin-top: 14px; }
.st-wk-family > b { display: block; margin-bottom: 8px; font: 600 10.5px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); }
.st-wk-family ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 5px; }
.st-wk-family li { padding: 5px 9px; border-radius: 5px; font-size: 12px; line-height: 1.3; border: 1px dashed #c3d0d0; color: var(--text-faint); }
.st-wk-family li.is-on { border: 1px solid transparent; background: rgba(40, 113, 126, .14); color: var(--fw-ink); }
.st-wk-title { margin: 0 0 12px; font: 800 14px/1.3 var(--font-display); color: var(--fw-s10); }
.st-wk-phases { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.st-wk-phase { display: block; margin-bottom: 6px; font: 600 10.5px/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); }
.st-wk-phases ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.st-wk-phases ol li { display: flex; align-items: center; gap: 9px; padding: 7px 10px; border-radius: 6px; background: #fff; font-size: 12.5px; line-height: 1.3; color: var(--fw-ink); }
.st-wk-n { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--fw-s10); color: #fff; font: 700 10px/1 var(--font-mono); }

/* how it grows */
.st-road { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; counter-reset: rd; }
.st-road > li { position: relative; padding: 20px; border-radius: var(--radius-lg); background: var(--tile); display: grid; gap: 10px; align-content: start; }
.st-road > li:not(:last-child)::after {
  content: "→"; position: absolute; right: -11px; top: 22px; z-index: 1; display: grid; place-items: center;
  width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 1px solid var(--fw-line); font-size: 11px; color: var(--fw-s10);
}
.st-road b { font: 800 15.5px/1.3 var(--font-display); color: var(--fw-ink); }
.st-road ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.st-road ul li { padding: 7px 10px; border-radius: 6px; background: #fff; font-size: 12.5px; line-height: 1.3; color: var(--fw-ink); }
.st-road ul li.is-module { border-left: 2px solid var(--steel); }
.st-road ul li.is-foundation { background: var(--fw-navy); color: #fff; }
.st-road .st-note { margin-top: 2px; }
.st-loop { margin-top: 22px; padding: 20px 22px; border-radius: var(--radius-lg); border: 1px solid var(--fw-line); }
.st-loop .st-kicker { font-size: 10.5px; }
.st-loop ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.st-loop ol li { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: var(--radius-pill); background: var(--tile); font-size: 12.5px; font-weight: 600; color: var(--fw-ink); }
.st-loop ol li:not(:last-child)::after { content: "→"; margin-left: 4px; color: var(--fw-s10); }
.st-loop ol li:last-child::after { content: "↺"; margin-left: 4px; color: var(--fw-s10); }

/* the method: six steps, the gates marked */
.st-method { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.st-method > li { padding: 20px; border-radius: var(--radius-lg); background: var(--tile); display: grid; gap: 8px; align-content: start; }
.st-method > li > b { font: 800 15.5px/1.3 var(--font-display); color: var(--fw-ink); }
.st-gate { justify-self: start; padding: 4px 9px; border-radius: var(--radius-pill); background: var(--fw-navy); color: var(--steel); font: 600 9.5px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.st-method p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--fw-ink); }
.st-method ul { margin: 2px 0 0; padding-left: 16px; font-size: 12.5px; line-height: 1.5; color: var(--text-muted); }

/* ── the closer ── */
.st-closer {
  margin-top: clamp(28px, 3.4vw, 44px); padding: clamp(24px, 3vw, 36px) clamp(24px, 3.4vw, 44px);
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  border-radius: var(--radius-lg); color: #e8eef1;
  background: radial-gradient(90% 160% at 100% 0%, rgba(104, 199, 212, .22), transparent 60%), var(--fw-navy);
}
.st-closer-title { display: block; font: 800 clamp(20px, 2vw, 26px)/1.2 var(--font-display); letter-spacing: -0.02em; color: #fff; }
.st-closer p { margin: 8px 0 0; max-width: 62ch; font-size: 14.5px; line-height: 1.55; color: #aebdc6; }

/* ── narrower screens ── */
@media (max-width: 1180px) {
  .st-challenges { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .st-blocks, .st-layers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st-wk { grid-template-columns: 1fr 1fr; }
  .st-wk-col:first-child { grid-column: 1 / -1; }
  .st-wk-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .st-challenges { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; margin: 0 -16px; padding: 4px 16px 12px; scrollbar-width: none; }
  .st-challenges::-webkit-scrollbar { display: none; }
  .st-card { flex: 0 0 78%; scroll-snap-align: start; display: flex; flex-direction: column; gap: 10px; }
  .st-pain { margin-top: auto; }
  .st-tabs { width: auto; }
  .st-panel { padding: 22px 18px; }
  .st-table-wrap { margin: 0 -18px; padding: 0 18px; }
  .st-blocks, .st-layers, .st-compare, .st-wk, .st-road, .st-method { grid-template-columns: 1fr; }
  .st-wk-steps { grid-template-columns: 1fr; }
  .st-road > li:not(:last-child)::after { content: "↓"; right: auto; left: 22px; top: auto; bottom: -11px; }
  .st-closer .cta-btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .st-card, .st-card::before, .st-tab { transition: none; }
  .st-panel:not([hidden]) { animation: none; }
}

/* ══════════════ interactive story (2026-10-12) ══════════════ */

/* ── P · L · A · N · T: the word, the stage, the progress ── */
.st-plant {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  background: #fff; border: 1px solid var(--fw-line); box-shadow: 0 30px 70px -40px rgba(6, 43, 63, .3);
}
.st-pl-word { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-bottom: 1px solid var(--fw-line); }
.st-pl-letter {
  position: relative; display: grid; justify-items: start; gap: 6px; padding: 20px 22px 22px; border: 0; cursor: pointer; text-align: left;
  background: transparent; border-right: 1px solid var(--fw-line); font: inherit; color: var(--fw-ink);
  transition: background-color .35s var(--ease-out-quart);
}
.st-pl-letter:last-child { border-right: 0; }
.st-pl-letter:hover { background: var(--tile); }
.st-pl-letter:focus-visible { outline: 2px solid var(--fw-s10); outline-offset: -2px; }
.st-pl-l {
  font: 800 clamp(40px, 4.6vw, 64px)/.9 var(--font-display); letter-spacing: -0.04em; color: #c9d6d6;
  transition: color .45s var(--ease-out-quart), transform .6s cubic-bezier(.16, 1, .3, 1);
}
.st-pl-letter.is-seen .st-pl-l { color: #8fa6aa; }
.st-pl-letter[aria-selected="true"] .st-pl-l { color: var(--fw-navy); transform: translateY(-3px); }
.st-pl-w { font: 600 10.5px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-faint); transition: color .35s; }
.st-pl-letter[aria-selected="true"] .st-pl-w { color: var(--fw-s10); }
.st-pl-letter[aria-selected="true"] { background: linear-gradient(180deg, rgba(40, 113, 126, .06), transparent 70%); }
/* the bar under the chosen letter: full when chosen by hand, filling while the tour plays */
.st-pl-bar { position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: linear-gradient(90deg, var(--fw-s10), var(--steel)); transform: scaleX(0); transform-origin: left; }
.st-pl-letter[aria-selected="true"] .st-pl-bar { transform: scaleX(1); transition: transform .5s cubic-bezier(.16, 1, .3, 1); }
.st-plant.is-playing .st-pl-letter[aria-selected="true"] .st-pl-bar { transform: scaleX(0); transition: none; }
.st-plant.is-playing .st-pl-letter.is-timing .st-pl-bar { animation: st-pl-fill 6.5s linear forwards; }
.st-plant.is-playing .st-pl-letter.is-held .st-pl-bar { animation-play-state: paused; }
@keyframes st-pl-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.st-pl-stage { position: relative; padding: clamp(26px, 3.4vw, 44px) clamp(24px, 3.4vw, 48px) clamp(24px, 3vw, 36px); min-height: 360px; overflow: hidden; }
.st-pl-ghost {
  position: absolute; right: -.04em; bottom: -.14em; pointer-events: none;
  font: 800 clamp(180px, 22vw, 300px)/.8 var(--font-display); letter-spacing: -0.06em; color: rgba(40, 113, 126, .05);
}
.st-pl-body { position: relative; max-width: 940px; }
.st-pl-kicker { margin: 0 0 12px; font: 600 11px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fw-s10); }
.st-pl-q { margin: 0; max-width: 30ch; font: 800 clamp(22px, 2.4vw, 32px)/1.18 var(--font-display); letter-spacing: -0.02em; color: var(--fw-ink); }
.st-pl-cols { display: grid; grid-template-columns: 1fr 1.25fr; gap: clamp(16px, 2.4vw, 32px); margin-top: clamp(20px, 2.4vw, 30px); }
.st-pl-col { display: grid; align-content: start; gap: 8px; padding-top: 14px; border-top: 1px solid var(--fw-line); }
.st-pl-col.is-plant { border-top: 2px solid var(--fw-s10); }
.st-pl-tag { font: 600 9.5px/1 var(--font-mono); letter-spacing: .14em; color: var(--text-faint); }
.st-pl-col.is-plant .st-pl-tag { color: var(--fw-s10); }
.st-pl-pain { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--text-muted); }
.st-pl-answer { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--fw-ink); }
.st-pl-go {
  justify-self: start; display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; padding: 9px 14px; border: 1px solid rgba(40, 113, 126, .3);
  border-radius: var(--radius-pill); background: rgba(40, 113, 126, .06); cursor: pointer; font: 600 13px/1 var(--font); color: var(--fw-s10);
  transition: background-color .25s, border-color .25s, color .25s;
}
.st-pl-go b { font-weight: 800; }
.st-pl-go i { font-style: normal; transition: transform .3s cubic-bezier(.16, 1, .3, 1); }
.st-pl-go:hover { background: var(--fw-s10); border-color: var(--fw-s10); color: #fff; }
.st-pl-go:hover i { transform: translateX(3px); }
.st-pl-go[hidden] { display: none; }
/* a new letter: the stage words rise in, in turn */
.st-pl-stage.is-swap .st-pl-ghost { animation: st-pl-ghost .8s cubic-bezier(.16, 1, .3, 1) both; }
.st-pl-stage.is-swap .st-pl-body > *, .st-pl-stage.is-swap .st-pl-col { animation: st-rise .6s cubic-bezier(.16, 1, .3, 1) both; }
.st-pl-stage.is-swap .st-pl-q { animation-delay: .05s; }
.st-pl-stage.is-swap .st-pl-col:first-child { animation-delay: .12s; }
.st-pl-stage.is-swap .st-pl-col.is-plant { animation-delay: .2s; }
@keyframes st-rise { from { opacity: 0; transform: translateY(12px); } }
@keyframes st-pl-ghost { from { opacity: 0; transform: translateY(24px) scale(.96); } }

.st-pl-foot { display: flex; align-items: center; gap: 14px; padding: 14px clamp(24px, 3.4vw, 48px); border-top: 1px solid var(--fw-line); background: var(--tile); }
.st-pl-dots { display: flex; gap: 5px; }
.st-pl-dots i { width: 18px; height: 4px; border-radius: 2px; background: #d3dedd; transition: background-color .45s; }
.st-pl-dots i.is-on { background: var(--fw-s10); }
.st-pl-count { flex: 1; font-size: 12.5px; color: var(--text-muted); }
.st-pl-play { border: 0; background: none; cursor: pointer; padding: 6px 2px; font: 600 12px/1 var(--font); color: var(--fw-s10); text-decoration: underline; text-underline-offset: 3px; }

/* ── the tabs: a sliding highlight ── */
.st-tabs { position: relative; isolation: isolate; }
.st-tab-ink {
  position: absolute; z-index: -1; left: 4px; top: 4px; bottom: 4px; width: 0; border-radius: var(--radius-pill);
  background: var(--fw-navy); box-shadow: 0 8px 20px -10px rgba(6, 43, 63, .6);
  transition: transform .55s cubic-bezier(.16, 1, .3, 1), width .55s cubic-bezier(.16, 1, .3, 1);
}
.st-tab-ink.is-still { transition: none; }
.st-tab[aria-selected="true"] { background: transparent; box-shadow: none; }
.st-panel:not([hidden]) { animation: st-in .55s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes st-in { from { opacity: 0; transform: translateY(14px); } }

/* the way to the next chapter, at the end of a panel */
.st-next {
  display: flex; align-items: center; gap: 10px; width: 100%; margin-top: clamp(28px, 3vw, 40px); padding: 16px 20px; cursor: pointer;
  border: 1px solid var(--fw-line); border-radius: var(--radius-lg); background: var(--tile); font: inherit; text-align: left; color: var(--fw-ink);
  transition: border-color .3s, background-color .3s;
}
.st-next span { font: 600 10.5px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint); }
.st-next b { flex: 1; font: 800 16px/1.2 var(--font-display); }
.st-next i { font-style: normal; color: var(--fw-s10); transition: transform .35s cubic-bezier(.16, 1, .3, 1); }
.st-next:hover { border-color: rgba(40, 113, 126, .35); background: rgba(40, 113, 126, .05); }
.st-next:hover i { transform: translateX(5px); }

/* ── the depth: the dimensions, and the chosen one compared ── */
.st-dx { display: grid; grid-template-columns: minmax(240px, .8fr) 2fr; gap: clamp(14px, 2vw, 24px); }
.st-dx-list { display: grid; gap: 6px; align-content: start; }
.st-dx-item {
  position: relative; display: flex; gap: 12px; align-items: baseline; padding: 14px 16px; border: 1px solid transparent; border-radius: 12px;
  background: var(--tile); cursor: pointer; text-align: left; font: inherit; color: var(--fw-ink); transition: background-color .3s, border-color .3s, box-shadow .3s;
}
.st-dx-item:hover { border-color: var(--fw-line); background: #fff; }
.st-dx-item[aria-selected="true"] { background: #fff; border-color: rgba(40, 113, 126, .35); box-shadow: 0 14px 30px -20px rgba(6, 43, 63, .4); }
.st-dx-item[aria-selected="true"]::before { content: ""; position: absolute; left: -1px; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; background: var(--fw-s10); }
.st-dx-item:focus-visible { outline: 2px solid var(--fw-s10); outline-offset: 2px; }
.st-dx-name { display: grid; gap: 3px; }
.st-dx-name b { font: 800 14.5px/1.3 var(--font-display); }
.st-dx-name span { font-size: 12.5px; color: var(--text-muted); }
.st-dx-view { padding: clamp(20px, 2.6vw, 30px); border-radius: var(--radius-lg); background: var(--tile); }
.st-dx-title { margin: 0; font: 800 clamp(19px, 1.9vw, 24px)/1.2 var(--font-display); letter-spacing: -0.015em; color: var(--fw-ink); }
.st-dx-sub { margin: 4px 0 0; font-size: 13.5px; color: var(--text-muted); }
.st-dx-cmp { display: grid; grid-template-columns: 1fr auto 1.3fr; align-items: stretch; gap: 14px; margin-top: 20px; }
.st-dx-usual, .st-dx-plant { display: grid; align-content: start; gap: 10px; padding: 18px; border-radius: 12px; }
.st-dx-usual { background: #fff; border: 1px dashed #c9d6d4; }
.st-dx-plant { background: #fff; border: 1px solid rgba(40, 113, 126, .4); box-shadow: 0 18px 36px -24px rgba(40, 113, 126, .6); }
.st-dx-usual p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--text-muted); }
.st-dx-plant p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--fw-ink); }
.st-dx-tag { display: inline-flex; align-items: center; gap: 7px; font: 600 10px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint); }
.st-dx-tag i { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; font-style: normal; font-size: 11px; background: #e6ecea; color: var(--text-muted); }
.st-dx-plant .st-dx-tag { color: var(--fw-s10); }
.st-dx-plant .st-dx-tag i { background: var(--fw-s10); color: #fff; }
.st-dx-arrow { align-self: center; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #fff; border: 1px solid var(--fw-line); color: var(--fw-s10); }
.st-dx-view.is-swap .st-dx-viewhead { animation: st-rise .5s cubic-bezier(.16, 1, .3, 1) both; }
.st-dx-view.is-swap .st-dx-usual { animation: st-rise .55s cubic-bezier(.16, 1, .3, 1) .06s both; }
.st-dx-view.is-swap .st-dx-arrow { animation: st-dx-arrow .6s cubic-bezier(.16, 1, .3, 1) .14s both; }
.st-dx-view.is-swap .st-dx-plant { animation: st-rise .55s cubic-bezier(.16, 1, .3, 1) .2s both; }
@keyframes st-dx-arrow { from { opacity: 0; transform: translateX(-10px); } }

/* ── the building blocks: one switch ── */
.st-bs-switch {
  position: relative; isolation: isolate; display: inline-grid; grid-template-columns: 1fr 1fr; padding: 4px; margin-bottom: 18px;
  border-radius: var(--radius-pill); background: var(--tile); border: 1px solid var(--fw-line);
}
.st-bs-thumb {
  position: absolute; z-index: -1; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: var(--radius-pill);
  background: #8ea3ad; box-shadow: 0 8px 18px -10px rgba(6, 43, 63, .5);
  transition: transform .55s cubic-bezier(.16, 1, .3, 1), background-color .55s;
}
.st-bs[data-mode="plant"] .st-bs-thumb { transform: translateX(100%); background: var(--fw-s10); }
.st-bs-opt { min-width: 150px; padding: 10px 18px; border: 0; background: none; cursor: pointer; border-radius: var(--radius-pill); font: 700 13px/1 var(--font); color: var(--text-muted); transition: color .35s; }
.st-bs-opt[aria-pressed="true"] { color: #fff; }
.st-bs-opt:focus-visible { outline: 2px solid var(--fw-s10); outline-offset: 2px; }
.st-bs-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.st-bs-card {
  display: grid; gap: 10px; align-content: start; padding: 18px; border-radius: var(--radius-lg); border: 1px dashed #c9d6d4; background: #fff;
  transition: border-color .5s, background-color .5s, box-shadow .5s;
  transition-delay: calc(var(--i) * 70ms);
}
.st-bs[data-mode="plant"] .st-bs-card { border: 1px solid rgba(40, 113, 126, .35); background: rgba(40, 113, 126, .05); box-shadow: 0 16px 30px -24px rgba(40, 113, 126, .7); }
.st-bs-card b { font: 800 15px/1.3 var(--font-display); color: var(--fw-ink); }
.st-bs-faces { display: grid; }
.st-bs-face { grid-area: 1 / 1; margin: 0; font-size: 13.5px; line-height: 1.45; transition: opacity .45s, transform .55s cubic-bezier(.16, 1, .3, 1); transition-delay: calc(var(--i) * 70ms); }
.st-bs-face span { font-weight: 700; }
.st-bs-face.is-typical { color: var(--text-muted); }
.st-bs-face.is-plant { color: var(--fw-ink); }
.st-bs-face.is-plant span { color: var(--fw-s10); }
.st-bs[data-mode="typical"] .st-bs-face.is-plant, .st-bs[data-mode="plant"] .st-bs-face.is-typical { opacity: 0; transform: translateY(8px); pointer-events: none; }
.st-bs-sums { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.st-bs-sum { display: grid; gap: 4px; padding: 18px 20px; border-radius: var(--radius-lg); border: 1px dashed #c9d6d4; transition: opacity .5s, border-color .5s, background-color .5s; }
.st-bs-sum b { font: 800 15px/1.3 var(--font-display); color: var(--fw-ink); }
.st-bs-sum span { font-size: 13.5px; line-height: 1.5; color: var(--text-muted); }
.st-bs[data-mode="plant"] .st-bs-sum.is-plant { border: 1px solid var(--fw-s10); background: rgba(40, 113, 126, .06); }
.st-bs[data-mode="typical"] .st-bs-sum.is-typical { border-style: solid; border-color: #8ea3ad; background: rgba(142, 163, 173, .08); }
.st-bs[data-mode="plant"] .st-bs-sum.is-typical, .st-bs[data-mode="typical"] .st-bs-sum.is-plant { opacity: .5; }

@media (max-width: 1180px) {
  .st-bs-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .st-pl-letter { padding: 14px 6px 16px; justify-items: center; text-align: center; }
  .st-pl-w { display: none; }
  .st-pl-stage { min-height: 0; padding: 22px 18px; }
  .st-pl-ghost { font-size: 150px; }
  .st-pl-cols, .st-dx, .st-dx-cmp, .st-bs-sums { grid-template-columns: 1fr; }
  .st-dx-arrow { justify-self: center; rotate: 90deg; }
  .st-dx-list { grid-auto-flow: column; grid-auto-columns: 78%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .st-dx-item { scroll-snap-align: start; }
  .st-bs-switch { display: grid; width: 100%; }
  .st-bs-opt { min-width: 0; }
  .st-bs-cards { grid-template-columns: 1fr; }
  .st-pl-foot { flex-wrap: wrap; justify-content: space-between; padding: 12px 18px; row-gap: 8px; }
  .st-pl-count { order: 3; flex: 1 0 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .st-pl-l, .st-pl-bar, .st-tab-ink, .st-bs-thumb, .st-bs-card, .st-bs-face, .st-bs-sum, .st-next i, .st-pl-go i { transition: none !important; }
  .st-pl-stage.is-swap *, .st-dx-view.is-swap *, .st-plant.is-playing .st-pl-bar { animation: none !important; }
}