/* ==========================================================================
   Withdrawal Optimizer product page (/withdrawal-optimizer/)
   Dedicated stylesheet. Depends on design-system-v2.css for v2-btn and
   v2-sticky-cta only; every layout class here is wo-* and used nowhere else.

   Design concept: "the lines." The tool's signature capability is holding a
   withdrawal under the caps an advisor sets (bracket, IRMAA, ACA), so the
   page's structural device is a threshold line: section labels sit on
   hairline rules like markers on a tax chart, and the How It Decides ledger
   carries a pure-CSS threshold diagram. JetBrains Mono (already loaded
   site-wide via fonts.css) is the label/ledger voice.

   Content stays visible at rest. Image motion follows user input and
   respects prefers-reduced-motion.
   ========================================================================== */

:root {
  --wo-navy: #0a1628;
  --wo-navy-deep: #060d1a;
  --wo-navy-raised: #0f1f38;
  --wo-paper: #f4f6fa;
  --wo-paper-card: #ffffff;
  --wo-gold: #FFA000;
  --wo-gold-soft: rgba(255, 160, 0, 0.14);
  --wo-blue: #1547BC;
  --wo-ink: #0f172a;
  --wo-ink-soft: #45526b;
  --wo-white: #ffffff;
  --wo-text-2: #dbe4f0;
  --wo-text-3: #9fb0c6;
  --wo-hairline-dark: rgba(255, 255, 255, 0.10);
  --wo-hairline-light: rgba(15, 23, 42, 0.12);
  --wo-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --wo-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --wo-wrap-max: 1160px;
  --wo-pad-x: 2rem;
}

/* --------------------------------------------------------------------------
   Base section plumbing
   -------------------------------------------------------------------------- */

.wo-section {
  font-family: var(--wo-sans);
  padding: 5.5rem 0;
  max-width: 100%;
}

.wo-section * { min-width: 0; }

.wo-section--dark {
  background: var(--wo-navy);
  color: var(--wo-text-2);
}

.wo-section--deep {
  background: var(--wo-navy-deep);
  color: var(--wo-text-2);
}

.wo-section--paper {
  background: var(--wo-paper);
  color: var(--wo-ink-soft);
}

.wo-wrap {
  max-width: var(--wo-wrap-max);
  margin: 0 auto;
  padding-left: var(--wo-pad-x);
  padding-right: var(--wo-pad-x);
  width: 100%;
  min-width: 0;
}

/* --------------------------------------------------------------------------
   The line device: a mono label sitting on a hairline rule
   -------------------------------------------------------------------------- */

.wo-line-label {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0 0 2.25rem;
}

.wo-line-label::after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background: var(--wo-hairline-dark);
}

.wo-line-label::before {
  content: '';
  flex: 0 0 1.5rem;
  height: 1px;
  background: var(--wo-gold);
}

.wo-line-label__text {
  font-family: var(--wo-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wo-gold);
  white-space: nowrap;
}

.wo-section--paper .wo-line-label::after { background: var(--wo-hairline-light); }
.wo-section--paper .wo-line-label__text { color: #b45309; }

/* --------------------------------------------------------------------------
   Shared type
   -------------------------------------------------------------------------- */

.wo-h2 {
  font-family: var(--wo-sans);
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.028em;
  line-height: 1.12;
  color: var(--wo-white);
  margin: 0 0 1.25rem;
  max-width: 21em;
}

.wo-section--paper .wo-h2 { color: var(--wo-ink); }

.wo-h3 {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.3;
  color: var(--wo-white);
  margin: 0 0 0.6rem;
}

.wo-section--paper .wo-h3 { color: var(--wo-ink); }

.wo-body {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--wo-text-3);
  max-width: 620px;
  margin: 0 0 1rem;
}

.wo-section--paper .wo-body { color: var(--wo-ink-soft); }

.wo-fine {
  font-family: var(--wo-mono);
  font-size: 0.68rem;
  line-height: 1.6;
  letter-spacing: 0.02em;
  color: #93a5bc;
  margin: 2rem 0 0;
}

.wo-section--paper .wo-fine { color: #4d5a74; }

/* --------------------------------------------------------------------------
   1. Hero
   -------------------------------------------------------------------------- */

.wo-hero {
  background:
    radial-gradient(90rem 40rem at 80% -20%, rgba(21, 71, 188, 0.35), transparent 60%),
    linear-gradient(180deg, #0c1d3d 0%, var(--wo-navy) 62%, var(--wo-navy) 100%);
  padding-top: calc(var(--il-nav-total-height, 104px) + 4.75rem);
  padding-bottom: 0;
  overflow: hidden;
}

.wo-hero__kicker {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0 0 2.5rem;
  font-family: var(--wo-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wo-gold);
}

.wo-hero__kicker::after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background: var(--wo-hairline-dark);
}

.wo-hero__kicker-note {
  color: var(--wo-text-3);
  font-weight: 400;
  white-space: normal;
  line-height: 1.6;
}

.wo-hero__headline {
  font-size: clamp(2.35rem, 6vw, 4.35rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.04;
  color: var(--wo-white);
  margin: 0 0 2rem;
  max-width: 15em;
}

.wo-hero__headline em {
  font-style: normal;
  color: var(--wo-gold);
}

.wo-hero__row {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 3rem;
  align-items: start;
  margin-bottom: 3.5rem;
}

.wo-hero__sub {
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--wo-text-2);
  margin: 0;
  max-width: 34em;
}

.wo-hero__actions .v2-btn-row { margin-top: 0; }

.wo-hero__trust {
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--wo-text-3);
  margin: 1.1rem 0 0;
}

/* --------------------------------------------------------------------------
   Hero showcase viewer: the approved capture in a framed tile with chip tabs
   that pan and zoom to one part of the tool at a time. Without JavaScript the
   tile shows the overview crop and the tabs stay hidden.
   -------------------------------------------------------------------------- */

.wo-viewer {
  position: relative;
  padding-bottom: 5.5rem;
}

.wo-viewer::before {
  content: '';
  position: absolute;
  inset: -2rem 0 2rem;
  background: radial-gradient(60% 80% at 50% 40%,
    rgba(21, 71, 188, 0.16),
    rgba(255, 160, 0, 0.05) 55%,
    transparent 78%);
  pointer-events: none;
}

.wo-viewer__frame {
  position: relative;
  border-radius: 16px;
  padding: 1px;
  background: linear-gradient(120deg,
    rgba(255, 160, 0, 0.55),
    rgba(255, 255, 255, 0.16) 38%,
    rgba(21, 71, 188, 0.60) 100%);
  box-shadow: 0 30px 80px rgba(2, 8, 20, 0.6), 0 0 50px rgba(21, 71, 188, 0.10);
}

.wo-viewer__viewport {
  position: relative;
  overflow: hidden;
  border-radius: 15px;
  aspect-ratio: 2560 / 1090;
  background: #f5f6f8;
}

.wo-viewer__viewport picture { display: block; }

.wo-viewer__img {
  display: block;
  width: 100%;
  height: auto;
  transform-origin: 0 0;
  transition: transform 750ms cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.wo-viewer__bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}

.wo-viewer__tabs {
  display: none;
  gap: 0.5rem;
  flex-wrap: wrap;
}

html.wo-interactive .wo-viewer__tabs { display: flex; }

.wo-chip {
  font-family: var(--wo-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wo-text-3);
  background: transparent;
  border: 1px solid var(--wo-hairline-dark);
  border-radius: 999px;
  padding: 0.5rem 0.9rem;
  min-height: 44px;
  cursor: pointer;
  transition: color 200ms ease-out, border-color 200ms ease-out, background 200ms ease-out;
}

.wo-chip:hover {
  color: var(--wo-text-2);
  border-color: rgba(255, 255, 255, 0.28);
}

.wo-chip:focus-visible {
  outline: 2px solid var(--wo-gold);
  outline-offset: 2px;
}

.wo-chip.is-active {
  color: var(--wo-gold);
  border-color: var(--wo-gold);
  background: rgba(255, 160, 0, 0.08);
}

.wo-viewer__note {
  font-family: var(--wo-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #93a5bc;
  margin: 0;
}

/* Module divider: a literal line between modules */

.wo-module-divider {
  position: relative;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(255, 160, 0, 0.85) 18%,
    rgba(255, 160, 0, 0.85) 82%,
    transparent);
  box-shadow: 0 0 28px rgba(255, 160, 0, 0.22);
}

/* --------------------------------------------------------------------------
   2. The three wrong answers
   -------------------------------------------------------------------------- */

.wo-problem__lead {
  max-width: 680px;
}

/* --------------------------------------------------------------------------
   2b. Pick a source: selectable wrong answers beside an abstract threshold
   chart. State lives on [data-wo-state] of .wo-pick; every visual per state
   is declared here so the script only swaps the attribute. All four rows
   stay visible without JavaScript; the chart rests on the answer state.
   -------------------------------------------------------------------------- */

.wo-pick {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 2.5rem;
  align-items: stretch;
  margin: 2.75rem 0 2.5rem;
}

.wo-pick__list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--wo-hairline-dark);
}

.wo-pick__row {
  position: relative;
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--wo-hairline-dark);
  padding: 1.25rem 1.25rem 1.3rem 1.5rem;
  cursor: pointer;
  font-family: var(--wo-sans);
  color: inherit;
  transition: background 250ms ease-out;
}

.wo-pick__row::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1.1rem;
  bottom: 1.1rem;
  width: 2px;
  background: var(--wo-gold);
  opacity: 0;
  transform: scaleY(0.4);
  transition: opacity 250ms ease-out, transform 350ms cubic-bezier(0.4, 0, 0.2, 1);
}

.wo-pick__row:hover { background: rgba(255, 255, 255, 0.025); }

.wo-pick__row:focus-visible {
  outline: 2px solid var(--wo-gold);
  outline-offset: -2px;
  border-radius: 6px;
}

.wo-pick__row.is-active { background: rgba(255, 255, 255, 0.035); }
.wo-pick__row.is-active::before { opacity: 1; transform: scaleY(1); }

.wo-pick__tag {
  display: block;
  font-family: var(--wo-mono);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--wo-text-3);
  margin: 0 0 0.5rem;
  transition: color 250ms ease-out;
}

.wo-pick__row.is-active .wo-pick__tag { color: var(--wo-gold); }
.wo-pick__row--answer .wo-pick__tag { color: var(--wo-gold); }

.wo-pick__move {
  display: block;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.012em;
  line-height: 1.3;
  color: var(--wo-white);
  margin: 0 0 0.4rem;
}

.wo-pick__cost {
  display: block;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--wo-text-3);
  transition: color 250ms ease-out;
}

.wo-pick__row.is-active .wo-pick__cost { color: var(--wo-text-2); }

/* The chart card */

.wo-pick__chart {
  position: relative;
}

.wo-pick__chart::before {
  content: '';
  position: absolute;
  inset: -2rem 0;
  background: radial-gradient(60% 80% at 50% 50%,
    rgba(255, 160, 0, 0.10),
    rgba(21, 71, 188, 0.10) 55%,
    transparent 78%);
  pointer-events: none;
}

.wo-chart {
  position: relative;
  height: 100%;
  min-height: 22rem;
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  padding: 1px;
  background: linear-gradient(120deg,
    rgba(255, 160, 0, 0.55),
    rgba(255, 255, 255, 0.16) 38%,
    rgba(21, 71, 188, 0.60) 100%);
  box-shadow: 0 24px 60px rgba(2, 8, 20, 0.5);
}

.wo-chart__inner {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  background: var(--wo-navy-raised);
  border-radius: 13px;
  padding: 1.5rem 1.75rem 1.25rem;
}

.wo-chart__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.55rem;
  margin-bottom: 1.75rem;
}

.wo-chart__title {
  font-family: var(--wo-mono);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--wo-text-3);
  margin: 0;
}

.wo-chart__state {
  position: relative;
  width: 100%;
  min-height: 1.2rem;
}

.wo-chart__state span {
  position: absolute;
  left: 0;
  bottom: 0;
  white-space: nowrap;
  font-family: var(--wo-mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wo-gold);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 350ms ease-out, transform 350ms ease-out;
}

.wo-pick[data-wo-state="ira"]       .wo-chart__state span[data-wo-for="ira"],
.wo-pick[data-wo-state="taxable"]   .wo-chart__state span[data-wo-for="taxable"],
.wo-pick[data-wo-state="roth"]      .wo-chart__state span[data-wo-for="roth"],
.wo-pick[data-wo-state="optimizer"] .wo-chart__state span[data-wo-for="optimizer"] {
  opacity: 1;
  transform: translateY(0);
}

.wo-chart__plot {
  position: relative;
  flex: 1 1 auto;
  min-height: 12rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
}

.wo-chart__line {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 62%;
  border-top: 1px dashed rgba(255, 160, 0, 0.75);
  z-index: 2;
}

.wo-chart__line span {
  position: absolute;
  left: 50%;
  top: -0.6rem;
  transform: translateX(-50%);
  padding: 0 0.5rem;
  background: var(--wo-navy-raised);
  white-space: nowrap;
  font-family: var(--wo-mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wo-gold);
}

.wo-chart__bars {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.75rem;
  padding: 0 1rem;
  align-items: end;
}

.wo-chart__col {
  position: relative;
  height: 100%;
  display: flex;
  align-items: flex-end;
}

.wo-bar {
  width: 100%;
  border-radius: 5px 5px 0 0;
  transition: height 900ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 500ms ease-out, background 500ms ease-out;
}

.wo-bar--income  { background: linear-gradient(180deg, rgba(255, 160, 0, 0.75), rgba(255, 160, 0, 0.18)); }
.wo-bar--gains   { background: linear-gradient(180deg, rgba(108, 143, 232, 0.85), rgba(21, 71, 188, 0.20)); }
.wo-bar--reserve { background: linear-gradient(180deg, rgba(226, 232, 240, 0.70), rgba(226, 232, 240, 0.12)); }

/* Per-state heights, in percent of the plot. Illustrative, not to scale. */
.wo-pick[data-wo-state="ira"] .wo-bar--income  { height: 88%; box-shadow: 0 0 28px rgba(255, 160, 0, 0.45); }
.wo-pick[data-wo-state="ira"] .wo-bar--gains   { height: 18%; }
.wo-pick[data-wo-state="ira"] .wo-bar--reserve { height: 100%; }

.wo-pick[data-wo-state="taxable"] .wo-bar--income  { height: 28%; }
.wo-pick[data-wo-state="taxable"] .wo-bar--gains   { height: 56%; box-shadow: 0 0 24px rgba(108, 143, 232, 0.45); }
.wo-pick[data-wo-state="taxable"] .wo-bar--reserve { height: 100%; }

.wo-pick[data-wo-state="roth"] .wo-bar--income  { height: 22%; }
.wo-pick[data-wo-state="roth"] .wo-bar--gains   { height: 16%; }
.wo-pick[data-wo-state="roth"] .wo-bar--reserve { height: 34%; box-shadow: 0 0 24px rgba(226, 232, 240, 0.30); }

.wo-pick[data-wo-state="optimizer"] .wo-bar--income  { height: 40%; }
.wo-pick[data-wo-state="optimizer"] .wo-bar--gains   { height: 46%; }
.wo-pick[data-wo-state="optimizer"] .wo-bar--reserve { height: 100%; }

.wo-chart__labels {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.75rem;
  padding: 0.75rem 1rem 0;
}

.wo-chart__label {
  font-family: var(--wo-mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wo-text-3);
  text-align: center;
}

.wo-chart__note {
  font-family: var(--wo-mono);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #93a5bc;
  margin: 1.25rem 0 0;
  padding-top: 0.9rem;
  border-top: 1px solid var(--wo-hairline-dark);
}

/* --------------------------------------------------------------------------
   2c. The answer, in the product: four readout tiles. Each tile is a
   pure-CSS crop of the same approved full-frame capture: the image is --zoom
   times the tile width, anchored at the tile center, translated by the focal
   fraction of its own size so the focal point sits dead center, and scaled
   about that same point on hover, focus, or tap. Exact without JavaScript.
   -------------------------------------------------------------------------- */

.wo-cards {
  position: relative;
  margin: 2.75rem 0 0.75rem;
}

.wo-cards::before {
  content: '';
  position: absolute;
  inset: -2rem 0;
  background: radial-gradient(55% 90% at 50% 50%,
    rgba(255, 160, 0, 0.10),
    rgba(21, 71, 188, 0.09) 55%,
    transparent 78%);
  pointer-events: none;
}

.wo-cards__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem 2.5rem;
  padding: 0.5rem 2rem 1.25rem;
}

/* Wide card-shaped rectangles, staggered so they read as floating around
   the block rather than sitting in a row. */
.wo-cards__grid .wo-tile { aspect-ratio: 3.4 / 1; height: auto; }
.wo-cards__grid .wo-tile:nth-child(1) { transform: translate(-1rem, 0); }
.wo-cards__grid .wo-tile:nth-child(2) { transform: translate(1.5rem, 1.6rem); }
.wo-cards__grid .wo-tile:nth-child(3) { transform: translate(0.5rem, -0.4rem); }
.wo-cards__grid .wo-tile:nth-child(4) { transform: translate(-1.25rem, 1.2rem); }

.wo-cards__hint {
  position: relative;
  font-family: var(--wo-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #93a5bc;
  margin: 0.9rem 0 0;
}

.wo-tile {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 1px;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(120deg,
    rgba(255, 160, 0, 0.55),
    rgba(255, 255, 255, 0.16) 38%,
    rgba(21, 71, 188, 0.60) 100%);
  box-shadow: 0 18px 50px rgba(2, 8, 20, 0.45);
  cursor: zoom-in;
  text-align: left;
  font-family: var(--wo-sans);
  color: inherit;
  transition: box-shadow 400ms ease-out, transform 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

.wo-tile:hover,
.wo-tile.is-zoomed {
  box-shadow: 0 26px 60px rgba(2, 8, 20, 0.6), 0 0 36px rgba(255, 160, 0, 0.12);
}

.wo-tile:focus-visible {
  outline: 2px solid var(--wo-gold);
  outline-offset: 3px;
}

.wo-tile.is-zoomed { cursor: zoom-out; }

.wo-tile__view {
  position: relative;
  display: block;
  height: 100%;
  overflow: hidden;
  border-radius: 13px;
  background: #f5f6f8;
}

.wo-tile__view picture { display: block; }

.wo-tile__view img {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--zoom) * 100%);
  height: auto;
  max-width: none;
  transform-origin: calc(var(--fx) * 100%) calc(var(--fy) * 100%);
  transform: translate(calc(var(--fx) * -100%), calc(var(--fy) * -100%)) scale(1);
  transition: transform 800ms cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.wo-tile:hover .wo-tile__view img,
.wo-tile:focus-visible .wo-tile__view img,
.wo-tile.is-zoomed .wo-tile__view img {
  transform: translate(calc(var(--fx) * -100%), calc(var(--fy) * -100%)) scale(1.1);
}

/* Focal points: the four Withdrawal Plan cards, as fractions of the frame. */
.wo-tile--gross       { --fx: 0.143; --fy: 0.395; --zoom: 4.4; }
.wo-tile--net         { --fx: 0.381; --fy: 0.395; --zoom: 4.4; }
.wo-tile--cost        { --fx: 0.621; --fy: 0.395; --zoom: 4.4; }
.wo-tile--withholding { --fx: 0.860; --fy: 0.395; --zoom: 4.4; }

.wo-tile__cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.4rem 0.9rem 0.6rem;
  background: linear-gradient(180deg, rgba(6, 13, 26, 0), rgba(6, 13, 26, 0.9) 60%);
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.2rem 0.7rem;
  pointer-events: none;
}

.wo-tile__name {
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--wo-white);
}

.wo-tile__desc {
  font-family: var(--wo-mono);
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wo-text-3);
}

/* --------------------------------------------------------------------------
   3b. How it decides: six rows, six tiles. Each row carries its own tile in
   a right-hand column; the tile is sticky inside its row, so it follows the
   reader while that row scrolls and hands off to the next row's tile. Rest
   state is the finished look. Narrow viewports stack the tile under the
   row. The recipe tile exposes its enlargement link; duplicate diagrams
   remain decorative.
   -------------------------------------------------------------------------- */

.wo-story { margin-top: 2.5rem; }

.wo-story .wo-ledger { margin-top: 0; }

/* Each row: text column + tile column in one tall track, so the sticky
   tile has room to travel before the next row's tile takes over. */
.wo-story .wo-ledger__row {
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  grid-template-rows: minmax(22rem, auto);
  gap: 0 3rem;
  align-items: start;
  padding: 2.5rem 0;
}

.wo-story__text {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  gap: 1.1rem 1.5rem;
  align-items: start;
  position: sticky;
  top: calc(var(--il-nav-total-height, 104px) + 2.5rem);
}

.wo-story__text > .wo-ledger__num { grid-column: 1; grid-row: 1; }
.wo-story__text > .wo-h3 { grid-column: 2; grid-row: 1; }
.wo-story__text > .wo-ledger__copy { grid-column: 2; }

.wo-story__panel {
  position: sticky;
  top: calc(var(--il-nav-total-height, 104px) + 2rem);
  align-self: start;
}

.wo-story__panel::before {
  content: '';
  position: absolute;
  inset: -1.5rem 0;
  background: radial-gradient(55% 80% at 50% 50%,
    rgba(255, 160, 0, 0.10),
    rgba(21, 71, 188, 0.10) 55%,
    transparent 78%);
  pointer-events: none;
}


.wo-story .wo-ledger__num { position: relative; transition: color 300ms ease-out; }
.wo-story .wo-ledger__row.is-active .wo-ledger__num { color: var(--wo-gold); }

.wo-story .wo-ledger__row.is-active .wo-ledger__num::after {
  content: '';
  position: absolute;
  left: -1.25rem;
  top: 0.15rem;
  bottom: 0.15rem;
  width: 2px;
  background: var(--wo-gold);
}

.wo-panel {
  position: relative;
  transition: opacity 550ms ease-out, transform 650ms cubic-bezier(0.4, 0, 0.2, 1);
}


.wo-panel__card {
  border-radius: 14px;
  padding: 1px;
  background: linear-gradient(120deg,
    rgba(255, 160, 0, 0.55),
    rgba(255, 255, 255, 0.16) 38%,
    rgba(21, 71, 188, 0.60) 100%);
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.22);
}

.wo-panel__inner {
  display: flex;
  flex-direction: column;
  border-radius: 13px;
  background: var(--wo-navy-raised);
  padding: 1.5rem 1.75rem;
  color: var(--wo-text-2);
}

.wo-panel__kicker {
  font-family: var(--wo-sans);
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--wo-white);
  margin: 0 0 1.25rem;
  padding-left: 0.9rem;
  border-left: 3px solid var(--wo-gold);
}

.wo-panel__note {
  font-family: var(--wo-sans);
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--wo-text-2);
  margin: 1.5rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

/* Framed crop of the approved capture (same focal math as the tiles) */
.wo-crop {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  aspect-ratio: 2.1 / 1;
  background: #f5f6f8;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.wo-crop img {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--zoom) * 100%);
  height: auto;
  max-width: none;
  transform-origin: calc(var(--fx) * 100%) calc(var(--fy) * 100%);
  transform: translate(calc(var(--fx) * -100%), calc(var(--fy) * -100%)) scale(1);
  transition: transform 1400ms cubic-bezier(0.4, 0, 0.2, 1);
}


.wo-crop--recipe { --fx: 0.25; --fy: 0.59; --zoom: 2.4; }

/* Account flow: category pills that light in sequence */
.wo-flow {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.wo-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.1rem;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.04);
  font-family: var(--wo-sans);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--wo-white);
  transition: opacity 450ms ease-out, transform 550ms cubic-bezier(0.4, 0, 0.2, 1), border-color 450ms ease-out, color 450ms ease-out, background 450ms ease-out;
}

.wo-pill:nth-child(2) { transition-delay: 180ms; }
.wo-pill:nth-child(3) { transition-delay: 360ms; }
.wo-pill:nth-child(4) { transition-delay: 540ms; }

.wo-pill__tag {
  font-weight: 500;
  letter-spacing: 0;
  color: var(--wo-text-2);
  font-size: 0.88rem;
  text-align: right;
}

.wo-pill--lit {
  color: var(--wo-gold);
  border-color: var(--wo-gold);
  background: rgba(255, 160, 0, 0.12);
}

.wo-pill--lit .wo-pill__tag { color: var(--wo-gold); font-weight: 700; }

.wo-pill--muted { opacity: 0.7; }
.wo-pill--struck { text-decoration: line-through; text-decoration-color: rgba(255, 255, 255, 0.5); }

.wo-flow__gift {
  margin-top: 0.7rem;
  border-style: dashed;
  border-color: #8fb0f5;
  color: #c5d6fb;
  transition-delay: 700ms;
}

.wo-flow__gift .wo-pill__tag { color: #c5d6fb; }


.wo-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
}

.wo-chips li {
  font-family: var(--wo-sans);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--wo-white);
  border: 1px solid rgba(255, 160, 0, 0.5);
  border-radius: 999px;
  padding: 0.5rem 0.9rem;
  transition: opacity 450ms ease-out 700ms, transform 450ms ease-out 700ms;
}

.wo-chips li:nth-child(2) { transition-delay: 850ms; }


/* Deterministic tile: three mono lines that settle in */
.wo-lines {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.wo-lines li {
  font-family: var(--wo-sans);
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--wo-white);
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--wo-hairline-dark);
  transition: opacity 450ms ease-out, transform 450ms ease-out;
}

.wo-lines li:nth-child(2) { transition-delay: 220ms; }
.wo-lines li:nth-child(3) { transition-delay: 440ms; }
.wo-lines li strong { color: var(--wo-gold); font-weight: 700; }


/* Threshold diagram inside a tile: bars grow when the row activates */
.wo-panel .wo-diagram { background: transparent; border: 0; padding: 0.5rem 0 0; overflow: visible; }
.wo-panel .wo-diagram__label { font-family: var(--wo-sans); font-size: 0.92rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--wo-text-2); }
.wo-panel .wo-diagram__line--cap .wo-diagram__label { color: var(--wo-gold); font-weight: 800; font-size: 1rem; }
.wo-panel .wo-diagram__line { border-top-color: rgba(255, 255, 255, 0.45); }
.wo-panel .wo-diagram__caption { font-family: var(--wo-sans); font-size: 0.95rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--wo-white); }
.wo-panel .wo-diagram__fill { height: 9.5rem; }
.wo-panel .wo-diagram__line { padding-bottom: 1.1rem; }
.wo-panel .wo-diagram__bar { transition: height 900ms cubic-bezier(0.4, 0, 0.2, 1); }

/* Tap-to-enlarge on product crops, and the lightbox that opens */
.wo-crop-link {
  position: relative;
  display: block;
  border-radius: 10px;
  cursor: zoom-in;
  text-decoration: none;
  color: inherit;
}

.wo-crop-link:focus-visible { outline: 2px solid var(--wo-gold); outline-offset: 3px; }

.wo-crop-link__hint {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.9rem;
  padding: 0.55rem 0.9rem;
  border-radius: 999px;
  background: var(--wo-gold);
  color: var(--wo-navy);
  font-family: var(--wo-sans);
  font-size: 0.92rem;
  font-weight: 700;
  transition: background 200ms ease-out;
}

.wo-crop-link:hover .wo-crop-link__hint { background: #ffb833; }

.wo-crop-link__hint svg { width: 1em; height: 1em; }

.wo-lightbox {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: clamp(0.75rem, 3vw, 2rem);
  border: 0;
  background: transparent;
  color: var(--wo-text-2);
}

.wo-lightbox:not([open]) { display: none; }
.wo-lightbox[open] { display: flex; align-items: center; justify-content: center; }
.wo-lightbox::backdrop { background: rgba(4, 9, 20, 0.92); }

.wo-lightbox__frame {
  width: min(100%, 1500px);
  max-height: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 14px;
  background: var(--wo-navy-raised);
  box-shadow: 0 32px 100px rgba(0, 0, 0, 0.5);
}

.wo-lightbox__view {
  overflow: auto;
  overscroll-behavior: contain;
  min-height: 0;
  max-height: 72vh;
  background: #f5f6f8;
}

.wo-lightbox__view picture { display: block; }
.wo-lightbox__view img { display: block; width: 100%; height: auto; max-width: none; }
.wo-lightbox.is-readable .wo-lightbox__view img { width: 2560px; }

.wo-lightbox__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  flex: 0 0 auto;
  gap: 0.75rem;
  padding: 1rem;
  font: 400 0.9rem/1.5 var(--wo-sans);
}

.wo-lightbox__controls { display: flex; gap: 0.5rem; }
.wo-lightbox__close {
  appearance: none;
  min-height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: transparent;
  color: var(--wo-white);
  border-radius: 999px;
  padding: 0.6rem 1rem;
  font: 700 0.9rem var(--wo-sans);
  cursor: pointer;
}

.wo-lightbox__close[aria-pressed="true"] { color: var(--wo-gold); border-color: var(--wo-gold); }
.wo-lightbox__close:hover { background: rgba(255, 255, 255, 0.1); }
.wo-lightbox__close:focus-visible,
.wo-lightbox__view:focus-visible { outline: 2px solid var(--wo-gold); outline-offset: -3px; }
body.wo-lightbox-open { overflow: hidden; }

/* --------------------------------------------------------------------------
   3. How it decides: the ledger
   -------------------------------------------------------------------------- */

.wo-ledger {
  border-top: 1px solid var(--wo-hairline-light);
  margin-top: 2.5rem;
}

.wo-ledger__row {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 17rem) minmax(0, 1fr);
  gap: 2rem;
  padding: 2.1rem 0;
  border-bottom: 1px solid var(--wo-hairline-light);
}

.wo-ledger__num {
  font-family: var(--wo-mono);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #b45309;
  padding-top: 0.25rem;
}

.wo-ledger__row .wo-h3 { margin-bottom: 0; padding-top: 0.05rem; }

.wo-story__text .wo-h3 { font-size: 1.3rem; line-height: 1.35; }

.wo-ledger__body {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--wo-ink-soft);
  margin: 0;
  max-width: 620px;
}

.wo-ledger__body + .wo-ledger__body { margin-top: 0.8rem; }

/* The signature row: copy beside the threshold diagram */

.wo-ledger__row--lines {
  grid-template-columns: 5.5rem minmax(0, 1fr);
}

.wo-lines-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 2.5rem;
  align-items: center;
}

.wo-lines-split .wo-h3 { margin-bottom: 0.6rem; }

/* --------------------------------------------------------------------------
   The threshold diagram (decorative, aria-hidden; no dollar figures)
   -------------------------------------------------------------------------- */

.wo-diagram {
  background: var(--wo-navy);
  border: 1px solid rgba(15, 23, 42, 0.18);
  border-radius: 12px;
  padding: 1.75rem 1.75rem 0;
  overflow: hidden;
}

.wo-diagram__line {
  position: relative;
  border-top: 1px dashed rgba(255, 255, 255, 0.28);
  padding: 0.45rem 0 1.35rem;
}

.wo-diagram__line--cap {
  border-top: 2px solid var(--wo-gold);
  padding-bottom: 0;
}

.wo-diagram__label {
  font-family: var(--wo-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wo-text-3);
}

.wo-diagram__line--cap .wo-diagram__label { color: var(--wo-gold); }

.wo-diagram__fill {
  display: flex;
  align-items: flex-end;
  gap: 0.6rem;
  height: 6.5rem;
  padding: 1.1rem 0 0;
}

.wo-diagram__bar {
  flex: 1 1 0;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, rgba(255, 160, 0, 0.55), rgba(255, 160, 0, 0.12));
}

.wo-diagram__bar--1 { height: 88%; }
.wo-diagram__bar--2 { height: 64%; }
.wo-diagram__bar--3 { height: 38%; background: linear-gradient(180deg, rgba(21, 71, 188, 0.7), rgba(21, 71, 188, 0.15)); }

.wo-diagram__caption {
  font-family: var(--wo-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wo-text-3);
  text-align: center;
  padding: 0.75rem 0 1.1rem;
  border-top: 1px solid var(--wo-hairline-dark);
  margin: 0;
}

/* --------------------------------------------------------------------------
   Product showcase strips: deterministic crops of the approved capture,
   framed in a gold-to-blue gradient hairline with a soft glow behind.
   -------------------------------------------------------------------------- */

.wo-shot {
  position: relative;
  margin: 2.75rem 0 0.75rem;
}

.wo-shot::before {
  content: '';
  position: absolute;
  inset: -2.5rem 0;
  background: radial-gradient(55% 90% at 50% 50%,
    rgba(255, 160, 0, 0.10),
    rgba(21, 71, 188, 0.09) 55%,
    transparent 78%);
  pointer-events: none;
}

.wo-shot__label {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--wo-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--wo-text-3);
  margin: 0 0 0.8rem;
}

.wo-shot__label::before {
  content: '';
  flex: 0 0 1.1rem;
  height: 1px;
  background: var(--wo-gold);
}

.wo-section--paper .wo-shot__label { color: #4d5a74; }
.wo-section--paper .wo-shot__label::before { background: #b45309; }

.wo-shot__frame {
  position: relative;
  display: block;
  border-radius: 14px;
  padding: 1px;
  background: linear-gradient(120deg,
    rgba(255, 160, 0, 0.55),
    rgba(255, 255, 255, 0.16) 38%,
    rgba(21, 71, 188, 0.60) 100%);
  box-shadow: 0 18px 50px rgba(2, 8, 20, 0.45);
}

.wo-section--paper .wo-shot__frame {
  background: linear-gradient(120deg,
    rgba(180, 83, 9, 0.45),
    rgba(15, 23, 42, 0.10) 38%,
    rgba(21, 71, 188, 0.45) 100%);
  box-shadow: 0 14px 40px rgba(15, 23, 42, 0.16);
}

.wo-shot__frame picture,
.wo-shot__frame img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 13px;
}

.wo-ledger__shot {
  grid-column: 2 / -1;
  margin-top: 0.5rem;
}

/* On small screens the ultra-wide strips would render as slivers, so each
   becomes a fixed-height product peek that scrolls sideways inside its own
   frame. The page itself never scrolls horizontally. */
@media (max-width: 768px) {
  .wo-shot__frame picture {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .wo-shot__frame img {
    width: auto;
    max-width: none;
  }

  .wo-shot--plan img { height: 8.5rem; }
  .wo-shot--input img { height: 10.5rem; }
  .wo-shot--recipe img { height: 13rem; }
}

/* --------------------------------------------------------------------------
   4. Proof
   -------------------------------------------------------------------------- */

.wo-proof-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  margin: 0 0 1.75rem;
}

.wo-proof-card {
  border: 1px solid var(--wo-hairline-dark);
  background: var(--wo-navy-raised);
  border-radius: 10px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.wo-proof-card--gold { border-top: 2px solid var(--wo-gold); }
.wo-proof-card--blue { border-top: 2px solid #6c8fe8; }

.wo-proof-card__tag {
  font-family: var(--wo-mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--wo-gold);
}

.wo-proof-card--blue .wo-proof-card__tag { color: #8fb0f5; }

.wo-proof-card__claim {
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.4;
  color: var(--wo-white);
  margin: 0;
}

.wo-proof-card__src {
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--wo-text-3);
  margin: auto 0 0;
}

/* --------------------------------------------------------------------------
   5. Scope
   -------------------------------------------------------------------------- */

.wo-scope-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem;
  margin: 0 0 0.5rem;
}

.wo-scope-col {
  background: var(--wo-paper-card);
  border: 1px solid var(--wo-hairline-light);
  border-radius: 10px;
  padding: 1.75rem;
}

.wo-scope-col .wo-h3 {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.1rem;
}

.wo-scope-col .wo-h3::before {
  content: '';
  flex: 0 0 1.35rem;
  height: 1px;
}

.wo-scope-col--does .wo-h3::before { background: var(--wo-gold); }
.wo-scope-col--not .wo-h3::before { background: var(--wo-blue); }

.wo-scope-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.wo-scope-list li {
  position: relative;
  padding: 0.65rem 0 0.65rem 1.4rem;
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--wo-ink-soft);
  border-top: 1px solid rgba(15, 23, 42, 0.07);
}

.wo-scope-list li:first-child { border-top: 0; padding-top: 0; }

.wo-scope-list li::before {
  content: '\2013';
  position: absolute;
  left: 0;
  font-family: var(--wo-mono);
  font-weight: 700;
}

.wo-scope-col--does .wo-scope-list li::before { content: '\2713'; color: #b45309; }
.wo-scope-col--not .wo-scope-list li::before { content: '\00d7'; color: var(--wo-blue); }

.wo-scope-list a { color: var(--wo-blue); }

/* --------------------------------------------------------------------------
   6. Webinar band
   -------------------------------------------------------------------------- */

.wo-webinar {
  background:
    radial-gradient(70rem 30rem at 15% 120%, rgba(255, 160, 0, 0.10), transparent 60%),
    var(--wo-navy-deep);
  border-top: 1px solid var(--wo-hairline-dark);
  border-bottom: 1px solid var(--wo-hairline-dark);
}

.wo-webinar__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.8fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

.wo-webinar .wo-h2 { max-width: 17em; }

.wo-webinar .wo-line-label { margin-bottom: 1.25rem; }
.wo-webinar .wo-body { color: var(--wo-text-2); font-size: 1rem; }
.wo-webinar__schedule {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin: 0 0 1.5rem;
  color: var(--wo-white);
  font-size: 0.9rem;
  line-height: 1.5;
  font-weight: 600;
}
.wo-webinar__schedule > span { color: var(--wo-text-3); }
.wo-webinar__topics {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem 1.25rem;
  padding: 1.25rem 0;
  margin: 1.5rem 0 0;
  border-top: 1px solid var(--wo-hairline-dark);
  list-style: none;
  font-size: 0.85rem;
  color: var(--wo-text-2);
}
.wo-webinar__topics li::before { content: ''; display: inline-block; width: 5px; height: 5px; margin: 0 0.55rem 0.15rem 0; background: var(--wo-gold); border-radius: 50%; }
.wo-webinar__speaker {
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 160, 0, 0.3);
  border-radius: 18px;
  background: var(--wo-navy-raised);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.22);
}
.wo-webinar__portrait { position: relative; background: #30343a; }
.wo-webinar__portrait img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.wo-webinar__host-label {
  position: absolute;
  left: 1.25rem;
  bottom: 1.25rem;
  padding: 0.4rem 0.7rem;
  border-radius: 4px;
  background: var(--wo-navy);
  color: var(--wo-gold);
  font: 700 0.7rem/1.5 var(--wo-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.wo-webinar__speaker figcaption { padding: 1.5rem; }
.wo-webinar__speaker-name { margin: 0; font-size: 1.3rem; line-height: 1.3; font-weight: 750; color: var(--wo-white); }
.wo-webinar__credentials { margin: 0.5rem 0 0; font-size: 0.85rem; line-height: 1.5; color: var(--wo-gold); }
.wo-webinar__role { margin: 0.8rem 0 0; font-size: 0.9rem; line-height: 1.6; color: var(--wo-text-2); }

@media (max-width: 768px) {
  .wo-webinar__inner { grid-template-columns: 1fr; }
  .wo-webinar__speaker { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); align-items: center; }
  .wo-webinar__portrait { height: 100%; }
  .wo-webinar__portrait img { height: 100%; object-position: center top; }
  .wo-webinar__speaker figcaption { padding: 1.25rem; }
}

/* --------------------------------------------------------------------------
   7. FAQ
   -------------------------------------------------------------------------- */

.wo-faq__list {
  max-width: 780px;
  border-top: 1px solid var(--wo-hairline-light);
}

.wo-faq__item {
  border-bottom: 1px solid var(--wo-hairline-light);
}

.wo-faq__item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 1.15rem 0.25rem;
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--wo-ink);
}

.wo-faq__item summary::-webkit-details-marker { display: none; }

.wo-faq__item summary::before {
  content: '+';
  font-family: var(--wo-mono);
  font-weight: 700;
  color: #b45309;
  flex: 0 0 auto;
}

.wo-faq__item[open] summary::before { content: '\2212'; }

.wo-faq__item summary:focus-visible {
  outline: 2px solid var(--wo-gold);
  outline-offset: 2px;
  border-radius: 4px;
}

.wo-faq__answer {
  padding: 0 0.25rem 1.35rem 2.1rem;
}

.wo-faq__answer p {
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--wo-ink-soft);
  margin: 0;
}

/* --------------------------------------------------------------------------
   8. Closing CTA
   -------------------------------------------------------------------------- */

.wo-close {
  text-align: center;
  padding: 6.5rem 0;
}

.wo-close .wo-h2 { margin-left: auto; margin-right: auto; }

.wo-close .wo-body {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1.75rem;
}

.wo-close .v2-btn-row {
  justify-content: center;
  margin-top: 0;
}

@media (prefers-reduced-motion: reduce) {


  .wo-viewer__img {
    transition: none;
  }

  .wo-chip,
  .wo-tile,
  .wo-tile__view img,
  .wo-panel,
  .wo-pill,
  .wo-chips li,
  .wo-lines li,
  .wo-crop img,
  .wo-pick__row,
  .wo-pick__row::before,
  .wo-pick__tag,
  .wo-pick__cost,
  .wo-bar,
  .wo-chart__state span {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .wo-hero__row { grid-template-columns: 1fr; gap: 1.75rem; }
  .wo-triptych { grid-template-columns: 1fr; }
  .wo-pick { grid-template-columns: 1fr; gap: 2rem; }
  .wo-story .wo-ledger__row { grid-template-columns: 1fr; grid-template-rows: auto; padding: 2rem 0; row-gap: 1.25rem; }
  .wo-story__text { position: static; grid-template-columns: 3.25rem minmax(0, 1fr); }
  .wo-story__panel { position: relative; top: auto; }
  .wo-cards__grid { grid-template-columns: 1fr; gap: 1rem; padding: 0; }
  .wo-cards__grid .wo-tile { transform: none !important; }
  .wo-chart { min-height: 18rem; }
  .wo-proof-grid { grid-template-columns: 1fr; }
  .wo-lines-split { grid-template-columns: 1fr; }

  .wo-ledger__row {
    grid-template-columns: 3.25rem minmax(0, 1fr);
  }

  .wo-ledger__row > .wo-h3 { grid-column: 2; }
  .wo-ledger__row > .wo-ledger__copy { grid-column: 2; }
}

@media (max-width: 768px) {
  .wo-section { padding: 3.5rem 0; }
  :root { --wo-pad-x: 1.25rem; }

  .wo-hero { padding-top: calc(var(--il-nav-total-height, 104px) + 3rem); }
  .wo-viewer { padding-bottom: 2.25rem; }
  .wo-hero__kicker { flex-wrap: wrap; gap: 0.5rem 1rem; margin-bottom: 1.75rem; }
  .wo-scope-grid { grid-template-columns: 1fr; }
  .wo-close { padding: 4.5rem 0; }

}

@media (max-width: 480px) {
  :root { --wo-pad-x: 1rem; }
  .wo-section .v2-btn-row .v2-btn { flex: 0 1 auto; min-height: 44px; }
  .wo-ledger__row { gap: 1.1rem; padding: 1.6rem 0; }
  .wo-diagram { padding: 1.25rem 1.25rem 0; }
  .wo-diagram__fill { height: 5rem; }
}