/* ============================================================================
   Branded illustrative charts — web port of the packet chart library
   (assets/guides/build-packets.py CHARTS). Same look/figures, screen-sized +
   responsive. Education-first; every caption ends "Individual results vary."
   ========================================================================== */
.fig{ margin:24px auto; max-width:720px; }
.fig .fig-h{ font-size:18px; font-weight:800; color:#15233a; letter-spacing:.01em; margin:0 0 14px; }
.fig .cap{ margin-top:14px; font-size:13px; font-style:italic; line-height:1.55; color:#6a7689; }
.fig .cap b{ font-style:normal; color:#5d6a82; }

/* narrative paragraphs in the new sections */
.hiw-prose p{ font-size:17px; line-height:1.72; color:var(--body,#2f3a4e); max-width:680px; margin:0 0 15px; }
.hiw-prose p:last-child{ margin-bottom:0; }
.fig-compliance{ max-width:720px; margin:20px auto 0; font-size:13px; line-height:1.55; color:#5d6a82; }

/* tax-bomb — stacked bar */
.fig-taxbomb .stack{ display:flex; width:100%; height:54px; border-radius:8px; overflow:hidden; border:1px solid #e7e8ec; }
.fig-taxbomb .seg{ display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; color:#15233a; padding:0 6px; text-align:center; }
.fig-taxbomb .seg.s1,.fig-taxbomb .seg.s3{ background:#f4f5f7; }
.fig-taxbomb .seg.s2,.fig-taxbomb .seg.s4{ background:#efe6d4; }
.fig-taxbomb .legend{ display:grid; grid-template-columns:1fr 1fr; gap:10px 22px; margin-top:16px; }
.fig-taxbomb .legend div{ font-size:15px; line-height:1.45; color:#2f3a4e; padding-left:20px; position:relative; }
.fig-taxbomb .legend div::before{ content:''; position:absolute; left:0; top:5px; width:12px; height:12px; border-radius:3px; background:#a8843d; }
.fig-taxbomb .total{ margin-top:16px; padding:13px 18px; background:#15233a; color:#fff; border-radius:8px; font-size:17px; font-weight:700; text-align:center; }
.fig-taxbomb .total b{ color:#c9a05a; }

/* third-option — three cards */
.fig-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.fig-cards .card{ border:1px solid #e7e8ec; border-radius:10px; padding:18px 18px 20px; background:#fff; }
.fig-cards .card.hero{ border-color:#a8843d; border-top:4px solid #a8843d; background:#fbf8f2; }
.fig-cards .card .t{ font-size:17px; font-weight:800; color:#15233a; margin:0 0 8px; }
.fig-cards .card.hero .t{ color:#8a6a28; }
.fig-cards .card .d{ font-size:15px; line-height:1.55; color:#3e4a60; margin:0; }
.fig-cards .cap{ grid-column:1/-1; }

/* equity-bar — two bars */
.fig-equity .bars{ display:flex; gap:36px; align-items:flex-end; height:170px; padding:0 16px; border-bottom:2px solid #e7e8ec; }
.fig-equity .col{ flex:1; text-align:center; display:flex; flex-direction:column; justify-content:flex-end; height:100%; }
.fig-equity .bar{ border-radius:8px 8px 0 0; margin:0 auto; width:72%; position:relative; }
.fig-equity .bar.sell{ background:#d9c3a0; height:65%; border:1px solid #c9a05a; }
.fig-equity .bar.x1031{ background:#15233a; height:100%; }
.fig-equity .bar .v{ position:absolute; top:12px; left:0; right:0; font-size:17px; font-weight:800; color:#15233a; }
.fig-equity .labels{ display:flex; gap:36px; margin-top:12px; padding:0 16px; }
.fig-equity .labels div{ flex:1; text-align:center; font-size:15px; font-weight:700; color:#15233a; }
.fig-equity .labels div span{ font-size:13.5px; }

/* active-passive — before/after */
.fig-ba{ display:flex; align-items:stretch; gap:0; }
.fig-ba .side{ flex:1; border:1px solid #e7e8ec; border-radius:10px; padding:18px 20px; background:#fff; }
.fig-ba .side.after{ border-color:#a8843d; background:#fbf8f2; }
.fig-ba .side .t{ font-size:16px; font-weight:800; color:#15233a; margin:0 0 9px; }
.fig-ba .side.after .t{ color:#8a6a28; }
.fig-ba .side ul{ margin:0; padding-left:18px; }
.fig-ba .side li{ font-size:15px; line-height:1.5; color:#3e4a60; margin:5px 0; }
.fig-ba .arrow{ display:flex; align-items:center; justify-content:center; width:52px; flex:0 0 52px; font-size:26px; color:#a8843d; }

/* responsive: stack multi-column charts on narrow screens */
@media (max-width:680px){
  .fig-cards{ grid-template-columns:1fr; }
  .fig-taxbomb .legend{ grid-template-columns:1fr; }
  .fig-ba{ flex-direction:column; }
  .fig-ba .arrow{ width:auto; height:38px; transform:rotate(90deg); }
}

/* ============================================================================
   Scroll-draw reveals (gated on html.fig-anim — set only when JS + motion OK,
   so no-JS / reduced-motion render the charts full & static). .fig.in = in view.
   ========================================================================== */
/* third-option: cards stagger up; gold card glows once on land */
html.fig-anim .fig-cards .card{ opacity:0; transform:translateY(14px); transition:opacity .5s ease, transform .5s ease; }
html.fig-anim .fig-cards.in .card{ opacity:1; transform:none; }
html.fig-anim .fig-cards.in .card:nth-of-type(2){ transition-delay:.08s; }
html.fig-anim .fig-cards.in .card:nth-of-type(3){ transition-delay:.16s; }
html.fig-anim .fig-cards.in .card.hero{ animation:figGlow 1.3s ease .35s 1; }
@keyframes figGlow{ 0%,100%{ box-shadow:none; } 45%{ box-shadow:0 0 0 3px rgba(168,132,61,.28), 0 12px 28px rgba(168,132,61,.22); } }

/* tax-bomb: bar wipes in left->right; total fades after */
html.fig-anim .fig-taxbomb .stack{ clip-path:inset(0 100% 0 0); transition:clip-path .85s cubic-bezier(.4,0,.2,1); }
html.fig-anim .fig-taxbomb.in .stack{ clip-path:inset(0 0 0 0); }
html.fig-anim .fig-taxbomb .total{ opacity:0; transform:translateY(6px); transition:opacity .5s ease .55s, transform .5s ease .55s; }
html.fig-anim .fig-taxbomb.in .total{ opacity:1; transform:none; }

/* equity-bar: bars grow from the baseline; values fade in as they land */
html.fig-anim .fig-equity .bar{ height:0; transition:height .9s cubic-bezier(.2,.7,.2,1); }
html.fig-anim .fig-equity.in .bar.sell{ height:65%; }
html.fig-anim .fig-equity.in .bar.x1031{ height:100%; transition-delay:.12s; }
html.fig-anim .fig-equity .bar .v{ opacity:0; transition:opacity .45s ease .7s; }
html.fig-anim .fig-equity.in .bar .v{ opacity:1; }

/* active-passive: active card -> arrow -> passive card */
html.fig-anim .fig-ba .side, html.fig-anim .fig-ba .arrow{ opacity:0; transform:translateY(12px); transition:opacity .5s ease, transform .5s ease; }
html.fig-anim .fig.in .fig-ba .side, html.fig-anim .fig.in .fig-ba .arrow{ opacity:1; transform:none; }
html.fig-anim .fig.in .fig-ba .arrow{ transition-delay:.18s; }
html.fig-anim .fig.in .fig-ba .side.after{ transition-delay:.34s; }

/* ---------- Hover interactions (desktop pointers only) ---------- */
@media (hover:hover){
  /* third-option: lift hovered card, dim the others */
  .fig-cards .card{ transition:opacity .25s ease, transform .25s ease, box-shadow .25s ease; }
  .fig-cards:hover .card{ opacity:.5; }
  .fig-cards:hover .card:hover{ opacity:1; transform:translateY(-3px); box-shadow:0 16px 32px rgba(20,30,55,.12); }

  /* tax-bomb: legend row <-> segment link (.hl set by charts.js) */
  .fig-taxbomb .seg{ transition:filter .2s ease, transform .2s ease; }
  .fig-taxbomb .seg.hl{ filter:brightness(.94) saturate(1.1); transform:scaleY(1.12); box-shadow:inset 0 0 0 2px #a8843d; }
  .fig-taxbomb .legend div{ transition:color .2s ease; }
  .fig-taxbomb .legend div.hl{ color:#15233a; font-weight:700; }
  .fig-taxbomb .legend div.hl::before{ background:#15233a; transform:scale(1.25); }

  /* equity-bar: hovered bar brightens + lifts */
  .fig-equity .bar{ transition:height .9s cubic-bezier(.2,.7,.2,1), filter .2s ease, transform .2s ease; }
  .fig-equity .col:hover .bar{ filter:brightness(1.06); }
  .fig-equity .col:hover .bar.sell{ transform:translateY(-3px); }
}