/* fo-trade-story.css: a trade page told as a story, the way the landing tells Leo's (Ohad, 31 Oct: "not sophisticated enough",
   "lack of sophistication and visual storytelling"). Scoped to body.tstory, which all 20 for-*.html pages carry (HVAC first, #79).
   - 01: the owner's mix becomes the drawn gap (today's rate per $1 against the routed one on a 0x to 4x scale, the gap hatched in pink)
     over the owner's statement lines, each flagged with its own today-to-routed bar, and the found money on the line the page prices.
   - 03: the desk reads the ledger, line by line, and ticks each code it has checked.
   - 04: the four leaks read as flagged lines on one statement, every one in view on a phone (no swipe).
   - 07: the four steps are a timeline.
   Same beige tokens as the rest of the site (box #F3ECDF, well #EAE0CE, chip #F8F2E7, field #FBF7EF). Loaded last on the page.
   Markup it expects (see for-hvac.html): body.tstory; .tmx[data-io] with .tmf holding a .gapm meter (--now/--could, the card's two
   per-$1 rates as shares of the scale, one tick per 1x); each mix li with --a/--b (today and routed rate as shares of the same scale),
   an i.lm bar and, on the line that holds the found money, small.lflag (the card names under each line, small.lcard, are #84's,
   placed by assets/fo-trade-ux.css). The pages are edited by hand: recovered/build_ind.py still writes the older mockup layout,
   so a rebuild from it would drop this. */

/* ---------- 01 · the example: the gap, drawn ---------- */
body.tstory .ix2{gap:16px;margin-top:28px}
body.tstory .tmx{display:flex;flex-direction:column;padding:26px 26px 22px;border-radius:26px;background:linear-gradient(150deg,#F6F0E4 0%,#EFE6D4 100%)!important;box-shadow:0 0 0 1px rgba(110,80,40,.14),0 30px 60px -40px rgba(80,55,20,.5)!important}
body.tstory .tmx .tmh{order:1;display:grid;gap:4px}
body.tstory .tmx .tmh .chk{font:500 11.5px/1 var(--mono,'JetBrains Mono',monospace);letter-spacing:.16em;text-transform:uppercase;color:#C30E6E}
body.tstory .tmx .tmh b{margin-top:6px;text-wrap:balance;font-family:var(--serif,'DM Serif Display',Georgia,serif);font-weight:400;font-size:24px;line-height:1.15;color:#141216}
body.tstory .tmx .tmh small{font-size:14px;color:#4A4550}
/* the headline rate and the scale sit straight under the owner */
body.tstory .tmx .tmf{order:2;display:block;margin:22px 0 2px;padding:20px 0 0;border:0;border-top:1px dashed rgba(110,80,40,.28);background:none}
body.tstory .tmx .tmf>span{display:block;font:500 11.5px/1 var(--mono,'JetBrains Mono',monospace);letter-spacing:.16em;text-transform:uppercase;color:#6E6776}
body.tstory .tmx .tmf>b{display:block;margin-top:10px;font-family:var(--serif,'DM Serif Display',Georgia,serif);font-weight:400;font-size:clamp(46px,5.4vw,64px);line-height:1;letter-spacing:-.02em;color:#141216}
body.tstory .gapm{position:relative;margin-top:20px;padding-top:34px}
body.tstory .gmk{position:absolute;top:0;transform:translateX(-50%);font:700 13px/1 var(--mono,'JetBrains Mono',monospace);padding:6px 9px;border-radius:999px;color:#fff;white-space:nowrap}
body.tstory .gmk::after{content:"";position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);border:6px solid transparent;border-bottom:0;border-top-color:inherit}
/* the page sets the two rates as shares of the scale: style="--now:27.5%;--could:65%" for 1.1x and 2.6x on 0x to 4x;
   a label near either end of the scale is held inside the card */
body.tstory .gmk.now{left:clamp(24px,var(--now,25%),calc(100% - 24px));background:#5E5766;border-top-color:#5E5766}
body.tstory .gmk.could{left:clamp(24px,var(--could,50%),calc(100% - 24px));background:#C30E6E;border-top-color:#C30E6E}
body.tstory .gtr{position:relative;height:16px;border-radius:999px;background:rgba(110,80,40,.12);overflow:hidden}
body.tstory .gnow,body.tstory .ggap{position:absolute;top:0;bottom:0;transform-origin:left center}
body.tstory .gnow{left:0;width:var(--now,25%);background:#5E5766;border-radius:999px 0 0 999px}
body.tstory .ggap{left:var(--now,25%);width:calc(var(--could,50%) - var(--now,25%));background:repeating-linear-gradient(-45deg,#FA1896 0 7px,#FF6CBC 7px 13px);border-radius:0 999px 999px 0}
body.tstory .gtk{display:flex;justify-content:space-between;margin-top:9px;font:500 11px/1 var(--mono,'JetBrains Mono',monospace);letter-spacing:.06em;color:#6E6776}
body.tstory .tmx:not(.in) .gnow,body.tstory .tmx:not(.in) .ggap{transform:scaleX(0)}
body.tstory .gnow{transition:transform .8s cubic-bezier(.2,.7,.2,1) .15s}
body.tstory .ggap{transition:transform 1.1s cubic-bezier(.2,.7,.2,1) .85s}
/* his statement lines, flagged: the line, what it runs a month, today's rate to the routed one, and its own bar on the same 0x to 4x scale */
body.tstory .tmx ul{order:3;list-style:none;margin:24px 0 0;padding:0;display:grid;gap:10px}
body.tstory .tmx li{position:relative;display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;grid-template-areas:"n r" "m r" "bar bar" "flag flag";align-items:center;column-gap:14px;row-gap:3px;padding:14px 16px 16px 18px!important;border-radius:16px;background:#F8F2E7!important;box-shadow:0 0 0 1px rgba(110,80,40,.12);font-size:15px!important}
body.tstory .tmx li::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:3px;border-radius:0 3px 3px 0;background:#FA1896}
body.tstory .tmx li>span{grid-area:n;font-weight:700;font-size:15.5px;line-height:1.25;color:#141216;min-width:0}
body.tstory .tmx li>em{grid-area:m;font-style:normal;font:500 12.5px/1.3 var(--mono,'JetBrains Mono',monospace)!important;color:#4A4550}
body.tstory .tmx li>b{grid-area:r;align-self:center;font:700 13px/1 var(--mono,'JetBrains Mono',monospace)!important;padding:8px 10px;border-radius:10px;background:#FBF7EF;box-shadow:inset 0 0 0 1.5px rgba(250,24,150,.55);color:#C30E6E!important;white-space:nowrap}
body.tstory .lm{grid-area:bar;position:relative;display:block;height:8px;margin-top:11px;border-radius:999px;background:rgba(110,80,40,.12);overflow:hidden}
body.tstory .lm::before{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--a);background:#5E5766}
body.tstory .lm u{position:absolute;top:0;bottom:0;left:var(--a);width:calc(var(--b) - var(--a));background:repeating-linear-gradient(-45deg,#FA1896 0 5px,#FF6CBC 5px 9px);transform-origin:left center;transition:transform .9s cubic-bezier(.2,.7,.2,1) .2s}
body.tstory .tmx li:nth-child(2) .lm u{transition-delay:.4s}
body.tstory .tmx li:nth-child(3) .lm u{transition-delay:.6s}
/* the lines draw when they come into view (ul[data-io] gets .in), and the found money lands once its bar has drawn */
body.tstory .tmx ul[data-io]:not(.in) .lm u{transform:scaleX(0)}
body.tstory .tmx ul[data-io]:not(.in) .lflag{opacity:0;transform:translateY(6px)}
body.tstory .lflag{grid-area:flag;justify-self:start;margin-top:11px;font:700 13px/1 var(--mono,'JetBrains Mono',monospace);letter-spacing:.02em;color:#fff;background:#C30E6E;padding:7px 11px;border-radius:999px;box-shadow:0 8px 18px -10px rgba(195,14,110,.8);transition:opacity .45s ease 1s,transform .45s cubic-bezier(.2,.8,.2,1.2) 1s}
body.tstory .tmx .ill{order:4;margin-top:14px;font-size:12px;color:#6E6776}
/* the codes card keeps to the same family, and on desktop its button sits on the story card's baseline */
body.tstory .ixc{display:flex;flex-direction:column;border-radius:26px;padding:24px 22px;background:#F3ECDF!important;box-shadow:0 0 0 1px rgba(110,80,40,.14),0 30px 60px -40px rgba(80,55,20,.45)!important}
body.tstory .ixc .chk{font:500 11.5px/1 var(--mono,'JetBrains Mono',monospace);letter-spacing:.16em;text-transform:uppercase;color:#C30E6E}
body.tstory .ixl li{background:#F8F2E7!important;padding:12px 14px!important;font-size:14.5px!important;min-height:44px}
body.tstory .ixb{margin-top:16px}
body.tstory .ixb .btn.gh{min-height:44px}
body.tstory .ixl b.r1{background:#F8F2E7!important}
/* from 900px: one wide statement card, the gap on the left and the flagged lines beside it; the codes run underneath as a strip */
@media (min-width:900px){
  body.tstory .ix2{grid-template-columns:minmax(0,1fr)!important;align-items:start}
  body.tstory .tmx{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);grid-template-areas:"h l" "f l" "i l";grid-template-rows:auto 1fr auto;column-gap:44px;padding:30px 32px 26px}
  body.tstory .tmx .tmh{grid-area:h}
  body.tstory .tmx .tmf{grid-area:f;align-self:start}
  body.tstory .tmx ul{grid-area:l;margin:0;align-self:center}
  body.tstory .tmx .ill{grid-area:i;margin-top:18px}
  body.tstory .ixc{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"k k" "l l" "n b";column-gap:28px;align-items:center;padding:24px 26px}
  body.tstory .ixc .chk{grid-area:k}
  body.tstory .ixl{grid-area:l;grid-template-columns:repeat(2,minmax(0,1fr))}
  body.tstory .ixn{grid-area:n;margin:14px 0 0}
  body.tstory .ixb{grid-area:b;margin:14px 0 0}
}
@media (min-width:640px) and (max-width:899px){body.tstory .ixl{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1200px){body.tstory .ixl{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* the stat strip and 02 follow the site rhythm (56/44/32), not the 72px the page carried inline */
body.tstory .itiles+.reveal{margin-top:56px!important}
@media (max-width:1024px){body.tstory .itiles+.reveal{margin-top:44px!important}}
@media (max-width:600px){body.tstory .itiles+.reveal{margin-top:32px!important}}

/* ---------- 02 · golden nuggets: flagged, like the leaks ---------- */
body.tstory .nugc{position:relative;background:#F3ECDF!important}
body.tstory .nugc::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:0 3px 3px 0;background:#FA1896}

/* ---------- 03 · the codes: the desk reads the ledger, line by line ---------- */
body.tstory .ledger{background:#F3ECDF!important;box-shadow:0 0 0 1px rgba(110,80,40,.14),0 30px 60px -40px rgba(80,55,20,.45)!important}
body.tstory .ledger .lh{background:#EAE0CE;color:#5E5866}.ledger .lh b{color:#B00C63}
body.tstory .ledger .row{position:relative;padding-right:52px!important;border-bottom-color:rgba(110,80,40,.12)}
body.tstory .ledger .code{background:#FBF7EF!important;box-shadow:inset 0 0 0 1.5px rgba(250,24,150,.45)}
body.tstory .ledger .row::after{content:"✓";position:absolute;right:16px;top:50%;width:24px;height:24px;margin-top:-12px;border-radius:50%;display:grid;place-items:center;font:800 12px/1 var(--sans,'DM Sans',sans-serif);color:#fff;background:#107B49;opacity:0;transform:scale(.6)}
body.tstory .ledger .row::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(250,24,150,0) 0%,rgba(250,24,150,.13) 50%,rgba(250,24,150,0) 100%);opacity:0;pointer-events:none}
body.tstory .ledger.in .row::after{animation:tsTick .45s cubic-bezier(.2,.8,.2,1.3) forwards}
body.tstory .ledger.in .row::before{animation:tsScan .9s ease-out}
@keyframes tsTick{to{opacity:1;transform:none}}
@keyframes tsScan{0%{opacity:0;transform:translateX(-30%)}40%{opacity:1}100%{opacity:0;transform:translateX(30%)}}
body.tstory .ledger .row:nth-child(2)::after,body.tstory .ledger .row:nth-child(2)::before{animation-delay:0.22s}
body.tstory .ledger .row:nth-child(3)::after,body.tstory .ledger .row:nth-child(3)::before{animation-delay:0.44s}
body.tstory .ledger .row:nth-child(4)::after,body.tstory .ledger .row:nth-child(4)::before{animation-delay:0.66s}
body.tstory .ledger .row:nth-child(5)::after,body.tstory .ledger .row:nth-child(5)::before{animation-delay:0.88s}
body.tstory .ledger .row:nth-child(6)::after,body.tstory .ledger .row:nth-child(6)::before{animation-delay:1.1s}
body.tstory .ledger .row:nth-child(7)::after,body.tstory .ledger .row:nth-child(7)::before{animation-delay:1.32s}
body.tstory .ledger .row:nth-child(8)::after,body.tstory .ledger .row:nth-child(8)::before{animation-delay:1.54s}
body.tstory .ledger .row:nth-child(9)::after,body.tstory .ledger .row:nth-child(9)::before{animation-delay:1.76s}
body.tstory .ledger .row:nth-child(10)::after,body.tstory .ledger .row:nth-child(10)::before{animation-delay:1.98s}
body.tstory .ledger .row:nth-child(11)::after,body.tstory .ledger .row:nth-child(11)::before{animation-delay:2.2s}
body.tstory .ledger .row:nth-child(12)::after,body.tstory .ledger .row:nth-child(12)::before{animation-delay:2.42s}
body.tstory .ledger .row:nth-child(13)::after,body.tstory .ledger .row:nth-child(13)::before{animation-delay:2.64s}
body.tstory .ledger .row:nth-child(14)::after,body.tstory .ledger .row:nth-child(14)::before{animation-delay:2.86s}
body.tstory .ledger .row:nth-child(15)::after,body.tstory .ledger .row:nth-child(15)::before{animation-delay:3.08s}
body.tstory .ledger .row:nth-child(16)::after,body.tstory .ledger .row:nth-child(16)::before{animation-delay:3.3s}
body.tstory .ledger .row:nth-child(17)::after,body.tstory .ledger .row:nth-child(17)::before{animation-delay:3.52s}
body.tstory .ledger .row:nth-child(18)::after,body.tstory .ledger .row:nth-child(18)::before{animation-delay:3.74s}
body.tstory .ledger .row:nth-child(19)::after,body.tstory .ledger .row:nth-child(19)::before{animation-delay:3.96s}
body.tstory .ledger .row:nth-child(20)::after,body.tstory .ledger .row:nth-child(20)::before{animation-delay:4.18s}
body.tstory .ledger .row:nth-child(21)::after,body.tstory .ledger .row:nth-child(21)::before{animation-delay:4.4s}
body.tstory .ledger .lf{background:#EAE0CE}

/* ---------- 04 · where the money hides: four leaks, flagged ---------- */
body.tstory #leaks .pc4{position:relative;background:#F3ECDF!important}
body.tstory #leaks .pc4::before{content:"";position:absolute;left:0;top:16px;bottom:16px;width:3px;border-radius:0 3px 3px 0;background:#FA1896}
/* on a phone the four read as one statement, top to bottom, every line in view */
@media (max-width:760px){
  body.tstory #leaks .srail{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:0!important;overflow:visible!important;margin:24px 0 0!important;padding:4px 0!important;scroll-snap-type:none!important;border-radius:22px;background:#F3ECDF;box-shadow:0 0 0 1px rgba(110,80,40,.14),0 30px 60px -40px rgba(80,55,20,.45)}
  body.tstory #leaks .srail>.rc{flex:none!important;width:auto!important;min-width:0!important;scroll-snap-align:none}
  body.tstory #leaks .srail>.rc+.rc{border-top:1px solid rgba(110,80,40,.14)}
  body.tstory #leaks .pc4{background:none!important;box-shadow:none!important;border-radius:0!important;padding:18px 18px 18px 22px!important}
  body.tstory #leaks .pc4 h3{font-size:18px;margin:10px 0 6px}
  body.tstory #leaks .pc4 p{font-size:14.5px;margin:0}
  body.tstory #leaks .sdots{display:none!important}
}

/* ---------- 07 · how it starts: a timeline ---------- */
body.tstory .srail[aria-label="Steps"]{position:relative}
@media (min-width:1025px){
  body.tstory .srail[aria-label="Steps"]::before{content:"";position:absolute;left:3%;right:3%;top:31px;height:2px;background:repeating-linear-gradient(90deg,rgba(250,24,150,.55) 0 8px,transparent 8px 14px);z-index:0}
  body.tstory .srail[aria-label="Steps"] .rc{position:relative;z-index:1}
}
@media (max-width:760px){
  body.tstory .srail[aria-label="Steps"]{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:10px!important;overflow:visible!important;margin:24px 0 0!important;padding:0 0 0 24px!important;scroll-snap-type:none!important}
  body.tstory .srail[aria-label="Steps"]::before{content:"";position:absolute;left:6px;top:26px;bottom:26px;width:2px;background:repeating-linear-gradient(180deg,rgba(250,24,150,.55) 0 8px,transparent 8px 14px)}
  body.tstory .srail[aria-label="Steps"] .rc{flex:none!important;width:auto!important;min-width:0!important;position:relative;scroll-snap-align:none}
  body.tstory .srail[aria-label="Steps"] .rc::before{content:"";position:absolute;left:-23px;top:22px;width:12px;height:12px;border-radius:50%;background:#FA1896;box-shadow:0 0 0 4px rgba(250,24,150,.18)}
  body.tstory .srail[aria-label="Steps"] .pc4{padding:16px 18px!important}
  body.tstory .srail[aria-label="Steps"] .pc4 h3{font-size:18px;margin:10px 0 4px}
  body.tstory .srail[aria-label="Steps"] .pc4 p{margin:0}
  body.tstory section:has(.srail[aria-label="Steps"]) .sdots{display:none!important}
}

/* phones: the story card breathes less, the rate stays big */
@media (max-width:600px){
  body.tstory .tmx{padding:22px 18px 18px;border-radius:22px}
  body.tstory .tmx .tmh b{font-size:22px}
  body.tstory .tmx li{padding:13px 13px 14px 16px!important;column-gap:10px}
  body.tstory .tmx li>b{font-size:12.5px!important;padding:7px 8px}
  body.tstory .ixc{padding:20px 16px}
}
@media (max-width:359px){
  body.tstory .tmx{padding:20px 14px 16px}
  body.tstory .tmx li>span{font-size:14.5px}
  /* "Run the Hector example" is 250px of 19px type: on the narrowest phones it takes two lines instead of pushing the page sideways (live does, by 18px at 320) */
  body.tstory .ixc{padding:18px 14px}
  body.tstory .ixb .btn{white-space:normal;text-align:center;line-height:1.2;padding:12px 18px}
}

@media (prefers-reduced-motion:reduce){
  body.tstory .gnow,body.tstory .ggap,body.tstory .lm u{transform:none!important;transition:none!important}
  body.tstory .lflag{opacity:1!important;transform:none!important;transition:none!important}
  body.tstory .ledger .row::after{animation:none!important;opacity:1;transform:none}
  body.tstory .ledger .row::before{animation:none!important}
}
/* off screen, the scan does not run */
body.tstory .is-off .ledger .row::before{animation-play-state:paused}

/* ---------- 01 · the example card, v2 (Ohad, 1 Nov: "the cards look fucking boring. why?") ----------
   Beige on beige on beige read like a spreadsheet: five identical rows, the abstraction ("1.1x → 2.4x") as the headline, the dollars and
   the actual cards in small grey text, and half the desktop card empty. Now the card is a tray holding two surfaces:
   - the desk's read, in ink: who, then the one catch in dollars (the page's own "+$X a year, est."), then the per-$1 jump and its meter;
   - the lines, routed: the priced line leads in pink, each line shows a four-step gauge (one step per 1x) and the cards it routes to,
     drawn as small card shapes in each card's colour (no logos, no card art: a colour and a name); "Everything else" is a footnote row.
   No new figures or words: every number and name is the page's own (the catch repeats the priced line's flag, which screen readers skip
   on the line). Markup: .tmd wraps .tmh, .tmo and .tmf; li.hero / li.rest; .cc cc-<card> in .lcard and the codes list. */
body.tstory .tmx{padding:10px!important;gap:12px;border-radius:28px}
body.tstory .tmx .tmd{order:1;position:relative;display:flex;flex-direction:column;padding:24px 22px 22px;border-radius:20px;color:#F3ECDF;background:radial-gradient(110% 80% at 100% 0%,rgba(250,24,150,.32) 0%,rgba(250,24,150,0) 58%),radial-gradient(90% 70% at 0% 100%,rgba(113,73,201,.22) 0%,rgba(113,73,201,0) 62%),#141216;box-shadow:0 26px 54px -32px rgba(20,18,22,.75);overflow:hidden}
/* inside the ink panel the order is who, the catch, then the jump (the older rules gave .tmh and .tmf flex orders of 1 and 2) */
body.tstory .tmx .tmd>.tmh{order:0;align-self:stretch}
body.tstory .tmx .tmd>.tmo{order:1}
body.tstory .tmx .tmd>.tmf{order:2;align-self:stretch}
body.tstory .tmx .tmd .tmh .chk{color:#FF6CBC}
body.tstory .tmx .tmd .tmh b{color:#F8F2E7}
body.tstory .tmx .tmd .tmh small{color:#B8AEC0}
body.tstory .tmo{display:flex;flex-direction:column;margin-top:24px}
body.tstory .tmo-n{font-family:var(--serif,'DM Serif Display',Georgia,serif);font-weight:400;font-size:clamp(64px,8.4vw,96px);line-height:.92;letter-spacing:-.025em;color:#FF3DA6;text-shadow:0 12px 44px rgba(250,24,150,.38)}
body.tstory .tmo>small{margin-top:10px;font:500 12px/1 var(--mono,'JetBrains Mono',monospace);letter-spacing:.16em;text-transform:uppercase;color:#CFC6D6}
body.tstory .tmo-l{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-top:18px}
body.tstory .tmo-l i{font-style:normal;font-weight:700;font-size:16.5px;line-height:1.25;color:#F8F2E7}
body.tstory .tmo-l em{font:700 13px/1 var(--mono,'JetBrains Mono',monospace);font-style:normal;padding:7px 10px;border-radius:9px;color:#FFD1E8;box-shadow:inset 0 0 0 1.5px rgba(255,108,188,.65)}
/* the per-$1 jump and its meter, on ink */
body.tstory .tmx .tmd .tmf{margin:24px 0 0!important;padding:18px 0 0!important;border-top:1px solid rgba(243,236,223,.14)!important}
body.tstory .tmx .tmd .tmf>span{color:#B8AEC0}
body.tstory .tmx .tmd .tmf>b{margin-top:8px;font-size:clamp(36px,4vw,46px);color:#F8F2E7}
body.tstory .tmd .gapm{margin-top:16px}
body.tstory .tmd .gtr{height:14px;background:rgba(243,236,223,.12)}
body.tstory .tmd .gnow{background:#8F8697}
body.tstory .tmd .gmk.now{background:#4A4550;border-top-color:#4A4550}
body.tstory .tmd .gtk{color:#B8AEC0}
/* the lines, routed */
body.tstory .tmx ul{order:2;margin:0!important;gap:8px!important}
body.tstory .tmx li{padding:14px 16px 15px!important;border-radius:16px!important;background:#F8F2E7!important;box-shadow:0 0 0 1px rgba(110,80,40,.13)!important}
body.tstory .tmx li::before{display:none}
body.tstory .tmx li>b{background:transparent!important;box-shadow:inset 0 0 0 1.5px rgba(20,18,22,.2)!important;color:#141216!important}
body.tstory .tmx li.hero{order:-1;padding:16px 16px 17px!important;background:linear-gradient(135deg,#FBDDEC 0%,#F8F2E7 64%)!important;box-shadow:0 0 0 1.5px rgba(250,24,150,.55),0 20px 36px -26px rgba(195,14,110,.6)!important}
body.tstory .tmx li.hero>span{font-size:17px}
body.tstory .tmx li.hero>b{box-shadow:inset 0 0 0 1.5px rgba(250,24,150,.6)!important;color:#C30E6E!important}
body.tstory .tmx li.rest{padding:12px 4px 2px!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;border-top:1px dashed rgba(110,80,40,.28)}
body.tstory .tmx li.rest>span{font-size:14.5px;color:#4A4550}
/* the bar becomes a four-step gauge, one step per 1x of the 0x to 4x scale */
body.tstory .lm{height:12px!important;margin-top:12px!important;border-radius:3px!important;background:rgba(110,80,40,.12)!important;-webkit-mask:repeating-linear-gradient(90deg,#000 0 calc(25% - 3px),transparent calc(25% - 3px) 25%);mask:repeating-linear-gradient(90deg,#000 0 calc(25% - 3px),transparent calc(25% - 3px) 25%)}
body.tstory .lm::before{background:#4A4550!important}
body.tstory .tmx li.rest .lm{height:8px!important}
/* the cards, as cards */
body.tstory .tmx li>small.lcard,body.tstory .ixl li small{display:block!important;margin-top:9px!important;font:500 12.5px/1.9 var(--sans,'DM Sans',sans-serif)!important;color:#5E5766!important;text-transform:none!important;letter-spacing:0!important}
body.tstory .cc{display:inline-flex;align-items:center;gap:7px;vertical-align:middle;white-space:nowrap;font-weight:700;color:#2A2630}
body.tstory .cc>i{flex:none;position:relative;width:26px;height:17px;border-radius:4px;box-shadow:0 1px 2px rgba(20,18,22,.28)}
body.tstory .cc>i::after{content:"";position:absolute;left:4px;top:5px;width:6px;height:5px;border-radius:1.5px;background:linear-gradient(135deg,#F3E2B0,#C7A456)}
body.tstory .cc-bbp>i{background:linear-gradient(135deg,#5A8AE8 0%,#1F3F92 100%)}
body.tstory .cc-gold>i{background:linear-gradient(135deg,#F0D290 0%,#C39436 55%,#9C7322 100%)}
body.tstory .cc-gold>i::after{background:linear-gradient(135deg,#FBEFC8,#D9B867)}
body.tstory .cc-vb>i{background:linear-gradient(135deg,#4A5572 0%,#151B2B 100%)}
body.tstory .cc-inkp>i{background:linear-gradient(135deg,#2B3F6B 0%,#0D1630 100%)}
body.tstory .cc-inkc>i{background:linear-gradient(135deg,#3AA0C4 0%,#156482 100%)}
body.tstory .cthen{font-size:0}
body.tstory .cthen::before{content:"→";display:inline-block;vertical-align:middle;position:relative;top:-1px;font:600 13px/1 var(--sans,'DM Sans',sans-serif);color:#8F8697;margin:0 8px}
body.tstory .tmx .ill{order:3;margin:4px 8px 6px!important}
/* the codes card: a long card name wraps in its own column instead of running under the rate chip */
body.tstory .ixl li>span{min-width:0}
body.tstory .ixl .cc{white-space:normal}
body.tstory .ixl .cc>i{align-self:flex-start;margin-top:2px}
/* a two-line kicker ("Example mix · Property management") keeps its lines apart */
body.tstory .tmx .tmd .tmh .chk{line-height:1.45}
@media (min-width:900px){
  body.tstory .tmx{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr)!important;grid-template-areas:"d l" "d i"!important;grid-template-rows:auto 1fr!important;column-gap:22px!important;row-gap:0!important;padding:12px!important}
  body.tstory .tmx .tmd{grid-area:d;padding:30px 30px 28px;justify-content:space-between}
  body.tstory .tmx ul{grid-area:l;align-self:start;margin:10px 8px 0 0!important}
  body.tstory .tmx .ill{grid-area:i;align-self:end;margin:16px 8px 8px 2px!important}
}