/* Overview only: first screen, where the money goes (a receipt), try it, win rate, last section. */

/* first screen: the stake, then the two sides, with the last 10 trades beside them */
.hero{--hp:0;--rail:clamp(300px,25vw,380px);position:sticky;top:var(--bar-h);height:calc(100vh - var(--bar-h));height:calc(100svh - var(--bar-h));min-height:480px;display:grid;grid-template-columns:minmax(0,1fr) var(--rail);grid-template-rows:auto minmax(0,1fr);background:var(--ink);overflow:hidden;z-index:0}
.lead{grid-column:1;grid-row:1;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:clamp(16px,3vw,56px);padding:clamp(6px,2.6vh,30px) var(--gut) clamp(18px,4.2vh,46px);transform:translateY(calc(var(--hp)*-60px));opacity:calc(1 - var(--hp)*1.3)}
.lead h1{font-family:var(--serif);font-weight:400;font-size:var(--fs-h1);line-height:1.02;letter-spacing:-.012em;color:var(--soft);text-wrap:balance}
.lead h1 span{display:block;color:var(--paper)}
.lead p{margin-top:14px;color:var(--soft);font-size:clamp(14px,1.15vw,17px)}
.sides{grid-column:1;grid-row:2;position:relative;display:grid;grid-template-columns:1fr 1fr;min-height:0}
.side{position:relative;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;padding:clamp(26px,3.4vh,36px) var(--gut) clamp(18px,3.6vh,40px);min-height:0;overflow:hidden}
.side>div:last-of-type{align-self:end}
.side.t2{border-top:1px solid var(--line)}
.side.you{background:var(--paper);color:var(--ink);border-top:1px solid transparent}
.side h2{font-weight:500;font-size:clamp(19px,1.7vw,26px)}
.side .what{font-size:clamp(14px,1.2vw,18px);margin-top:3px;color:var(--soft)}
/* Team2's line says how its sales are set; the words link to the full rule (What Team2 says, "How we measured.") */
.side .what a{text-decoration:underline;text-decoration-color:var(--clay);text-decoration-thickness:1px;text-underline-offset:3px}
.side .what a:hover{color:var(--paper)}
.you .what{color:var(--inkmute)}
.fig{font-size:clamp(78px,min(17vw,29vh),264px);font-size:clamp(48px,min(17vw,29vh,calc(116cqh - 114px)),264px)}   /* the first size for a browser without cqh */
.t2 .fig{color:var(--clay)}
/* each win rate: what it is right above it (so a screen's bottom edge can only cut what is under the figure), then what a win is
   and the profit, small. None of it moves with the scroll: the next section slides over the first screen and the figures stay put. */
.rb{padding-top:12px}
.wl{margin-bottom:8px;font-size:var(--fs-lab);font-weight:500;line-height:1.35;color:var(--paper)}
.wd{margin-top:12px;font-size:clamp(14px,1.1vw,16px);line-height:1.45;color:var(--soft);text-wrap:balance}
.pf{margin-top:4px;font-size:clamp(14px,1.1vw,16px);color:var(--soft)}
.pf b{font-weight:500;color:var(--paper)}
.you .wl,.you .pf b{color:var(--ink)}
.you .wd,.you .pf{color:var(--inkmute)}
.seam{position:absolute;left:50%;top:0;transform:translate(-50%,-50%);background:var(--clay);color:var(--ink);padding:9px 16px;font-size:var(--fs-m);font-weight:500;white-space:nowrap;z-index:2}
.cue{position:absolute;right:var(--gut);bottom:clamp(18px,3.6vh,40px);font-size:var(--fs-s);color:var(--inkmute);display:flex;align-items:center;gap:10px}
.cue i{display:block;width:1px;height:34px;background:var(--ink);transform-origin:50% 0;animation:cue 2.2s var(--e) infinite}
@keyframes cue{0%{transform:scaleY(0)}55%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}
.shade{position:absolute;inset:0;background:var(--void);opacity:calc(var(--hp)*.55);pointer-events:none;z-index:3}
.tape .tl.th .a{display:flex;flex-direction:column;align-items:flex-end;line-height:1.2}
.tape .tl.th .a small{font-size:var(--fs-xs);white-space:nowrap;color:var(--mute);line-height:1.2}
.tape .tl.sum .a,.tape .tl.sum .b{font-size:clamp(17px,1.5vw,22px)}   /* the two totals have more digits than a trade: smaller, so each fits its column */
/* a trade's figure wider than its column (a four-digit result in a fallback font) widens its own column, taking room from the ticker,
   instead of running into the next figure; a figure that fits keeps the column at var(--tc), so the figures still line up */
.tape .tw .tl{grid-template-columns:minmax(0,1fr) minmax(var(--tc,70px),max-content) minmax(var(--tc,70px),max-content)}
.tape{grid-column:2;grid-row:1/3;display:flex;flex-direction:column;min-height:0;min-width:0;--tc:clamp(62px,5.6vw,84px);padding:clamp(6px,2.6vh,30px) clamp(18px,2vw,30px) clamp(18px,3.6vh,40px);border-left:1px solid var(--line)}
@media (min-width:1000px){
 .lead{row-gap:clamp(10px,1.8vh,18px)}
 .lead>div{display:contents}
 .lead h1{grid-column:1/-1}
 .lead p{margin-top:0}
 .fig{font-size:clamp(70px,min(calc((100vw - var(--rail))*.17),27vh),264px);font-size:clamp(48px,min(calc((100vw - var(--rail))*.17),27vh,calc(116cqh - 114px)),264px)}
}
@media (max-width:999px){
 .hero{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto}
 .tape{grid-column:1;grid-row:3;min-height:auto;--tc:clamp(62px,19vw,120px);padding:10px var(--gut) 0;border-left:0;border-top:1px solid var(--line)}
 .tl.th{padding-bottom:7px}
 .tl.th h2{font-family:var(--sans);font-weight:500;font-size:var(--fs-m);line-height:1.4}
 .tw{flex:none;max-height:none;height:clamp(88px,14.5vh,150px);-webkit-mask-image:linear-gradient(var(--void) 60%,transparent);mask-image:linear-gradient(var(--void) 60%,transparent)}
 .roll{animation-duration:26s}
 .roll li{padding:9px 0}
 .tl .when b{display:inline;margin-right:9px;font-size:var(--fs-m)}
 .tl .a,.tl .b{font-size:22px}
 .tl.sum{display:none}
}
/* phones: the first screen is at least the height of the screen and grows with its content, so nothing is cut off or laid over
   anything else; it scrolls away like the rest of the page (it no longer stays put under the next section). The two sides stay
   next to each other, as on wider screens, so both win rates are on the first screen of a phone's browser (390x664 and smaller). */
@media (max-width:760px){
 .hero{position:relative;top:auto;height:auto;min-height:calc(100svh - var(--bar-h))}
 .lead{grid-template-columns:1fr;gap:12px}
 .side{padding:30px 12px 14px var(--gut);overflow:visible}
 .side.you{padding-left:14px;padding-right:var(--gut)}
 .side .what{font-size:var(--fs-xs);line-height:1.4}
 .fig{font-size:clamp(34px,12.5vw,96px)}
 .wl{margin-bottom:6px;font-size:var(--fs-s)}
 .wd{margin-top:8px}
 .wd,.pf{font-size:var(--fs-xs)}
 .tw{height:clamp(80px,12.5vh,150px)}
 .seam{font-size:var(--fs-s);padding:7px 12px}
 .cue,.shade{display:none}
}
/* wider than a phone and taller than 740px, the first screen is one screen high: each side's figure block takes the height its side
   has left (a size container) and the figure its size from that (116cqh: the block's height at the figure's line height, less its
   label, line and profit, with room to spare), so the block can never grow over the text above it, whatever the fonts */
@media (min-width:761px) and (min-height:741px){.side>div.rb{align-self:stretch;container-type:size;display:flex;flex-direction:column;justify-content:flex-end}}
/* a shorter wide screen: like a phone, the first screen grows with its content; the figures take their size from the screen's height
   and the lines sit closer, so each label, figure, line and profit fits on a 1366x768 laptop's browser (1366x657), and on a
   1024x600 screen, where the line under each figure ("A win: ...") takes two lines */
@media (min-width:761px) and (max-height:740px){.hero{position:relative;top:auto;height:auto;min-height:calc(100svh - var(--bar-h))}.side{overflow:visible}.cue,.shade{display:none}.fig{font-size:clamp(56px,calc(27vh - 104px),264px)}.rb{padding-top:8px}.wl{margin-bottom:4px}.wd{margin-top:4px;line-height:1.3}}
/* the "Scroll" cue sits in the You side's bottom corner: below 1536px wide that side is too narrow for it next to the line "A win: ..."
   (it would sit a few px under that line; walk.js measures the gap) */
@media (max-width:1535px){.cue{display:none}}
@media (max-width:760px) and (max-height:780px){.tw{height:clamp(64px,10vh,150px)}}
@media (max-width:760px) and (max-height:720px){.lead{gap:6px}.lead h1{font-size:clamp(25px,7vw,30px)}.lead p{font-size:13px;margin-top:8px}}
@media (prefers-reduced-motion:reduce){.lead,.fig{transform:none !important;opacity:1 !important}.cue i{animation:none}.shade{display:none}}

/* win rate by year: the summary under the first screen. For each year, then all years together, Team2 (no commissions) above You
   ($0.65 a contract each way). Every bar starts at the same left edge (one set of columns for all rows: subgrid) and its length is
   its win rate on one scale, 0 to 100%. Each line names its side, so colour is never the only cue. The band slides up over the first
   screen, dark on dark, so it has a hairline on top. Bars: the shared .wbar (site.css), thinner here. */
#rates{border-top:1px solid var(--line)}
.wyk{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-5);margin-top:var(--sp-5);font-size:var(--fs-m);color:var(--soft)}
.wyk span{display:inline-flex;align-items:center;gap:var(--sp-2)}
.wyk i{width:14px;height:14px;background:var(--paper)}
.wyk .t2 i,.wyb.t2 .wbar i{background:var(--clay)}
.wy{display:grid;grid-template-columns:minmax(140px,22%) max-content max-content minmax(0,1fr) max-content;column-gap:var(--sp-5);margin-top:clamp(22px,4vh,44px);max-width:1180px}
.wyr{grid-column:1/-1;display:grid;grid-template-columns:subgrid;row-gap:var(--sp-3);align-items:center;padding:var(--sp-5) 0;border-top:1px solid var(--line)}
.wyr.all{border-top-color:var(--linehi)}
.wyl{grid-column:1;grid-row:1/3;font-family:var(--serif);font-size:var(--fs-num-s);line-height:1.05;color:var(--paper)}
.wyl small{display:block;margin-top:var(--sp-1);font-family:var(--sans);font-size:var(--fs-s);line-height:1.4;color:var(--mute)}
.wyb{grid-column:2/-1;display:grid;grid-template-columns:subgrid;align-items:center}
.wyb .who{font-size:var(--fs-m);color:var(--soft)}
.wyb b{font-family:var(--serif);font-weight:500;font-size:var(--fs-num-s);line-height:1;text-align:right;white-space:nowrap;color:var(--paper)}
.wyb.t2 b{color:var(--clay)}
.wyb .wbar{height:22px}
.wyb small{font-size:var(--fs-s);line-height:1.4;color:var(--mute);text-align:right;white-space:nowrap}
@media (max-width:760px){
 .wy{grid-template-columns:max-content max-content minmax(0,1fr);column-gap:var(--sp-3)}
 .wyr{row-gap:var(--sp-2)}
 .wyl{grid-column:1/-1;grid-row:auto}
 .wyb{grid-column:1/-1}
 .wyb .wbar{height:18px}
 .wyb small{grid-column:2/-1;text-align:left}
}
/* older browsers without subgrid: every row gets the same fixed columns, sized for the longest text of each column, so every bar
   still starts at one left edge (walk.js switches this on to check it) */
@supports not (grid-template-columns:subgrid){
 .wyr{grid-template-columns:minmax(140px,22%) minmax(0,1fr);column-gap:var(--sp-5)}
 .wyb{grid-template-columns:calc(var(--fs-m)*3.6) calc(var(--fs-num-s)*3.4) minmax(0,1fr) calc(var(--fs-s)*9.5);column-gap:var(--sp-5)}
 @media (max-width:760px){.wyr{grid-template-columns:minmax(0,1fr)}.wyb{grid-template-columns:calc(var(--fs-m)*3.6) calc(var(--fs-num-s)*3.4) minmax(0,1fr);column-gap:var(--sp-3)}}
}

main{position:relative;z-index:1}

/* where the money goes: a receipt, read from the top. Team2's result, the costs of copying it (buying late, selling late, commissions,
   the trades left out), then You, the total, under a rule.
   Every row shares the columns of .rcpt (subgrid): label | amount | made or lost | bar. Every bar starts at the left edge of the bar
   column and is --f of its width (its amount over the largest amount: one scale), but never thinner than 2px when the amount is not
   $0 (min-width: 2px once --f is above 0, 0 when it is 0), so a small amount next to a much larger one (a few dollars next to tens of
   thousands) shows as the same thin bar on every screen instead of a stray line on one and nothing on another; a $0 row has no bar. The sign and the word say made or lost. The colours
   say who, as on the first screen and in the old money rows: Team2 clay, the costs a quiet clay (clay at 46% over the band's ink,
   by opacity: the old color-mix colour, with nothing an older browser could drop), You paper. You, the result, also has the larger
   amount (--rnt) and the heavier rule. Label, amount and word share a baseline; the bar is centred on the amount's line (--rn its size,
   --rb the bar, --rt the room above). Without subgrid (older browsers) every row gets the same fixed columns instead, sized for the
   larger amount, so the bars keep one left edge and one scale. The band has a hairline on top: it slides up over the first screen,
   dark on dark. The ghost figure is sized to fit a phone, minus sign included. */
#money{overflow:hidden;overflow:clip;border-top:1px solid var(--line)}
#money>*{position:relative}
#money>.ghost{position:absolute;right:var(--gut);top:3%;font-size:clamp(56px,19vw,340px);color:transparent;-webkit-text-stroke:1px var(--ghost);pointer-events:none;user-select:none}
.rcpt{--rn:var(--fs-num-m);--rnt:calc(var(--fs-num-m)*1.3);--rb:28px;--rt:0px;display:grid;grid-template-columns:minmax(220px,36%) max-content max-content minmax(0,1fr);margin-top:clamp(34px,7vh,84px)}
.rrow{grid-column:1/-1;display:grid;grid-template-columns:subgrid;align-items:baseline;padding:18px 0;border-top:1px solid var(--line)}
.rrow .lab{grid-column:1;grid-row:1;padding-right:24px;font-size:var(--fs-lab);line-height:1.3;color:var(--soft)}
.rrow .note{grid-column:1;grid-row:2;display:block;max-width:54ch;padding-right:24px;margin-top:6px;font-size:var(--fs-s);line-height:1.45;color:var(--mute)}
.ramt{grid-column:2;grid-row:1;margin-top:var(--rt);font-family:var(--serif);font-weight:500;font-size:var(--rn);line-height:1;text-align:right;white-space:nowrap;font-variant-numeric:lining-nums tabular-nums;color:var(--paper)}
.rw{grid-column:3;grid-row:1;margin-top:var(--rt);padding:0 20px 0 .45em;font-size:var(--fs-lab);font-weight:500;color:var(--soft)}
.rbar{grid-column:4;grid-row:1;align-self:start;display:block;height:var(--rb);margin-top:calc(var(--rt) + (var(--rn) - var(--rb))/2)}
.rbar i{display:block;width:calc(var(--f)*100%);min-width:min(2px,var(--f)*100000px);height:100%;background:var(--clay)}
.rrow.cost .rbar i{opacity:.46}
.rrow.t2 .ramt{color:var(--clay)}
.rrow.t2 .lab,.rrow.tot .lab{color:var(--paper);font-weight:500}
.rrow.tot{--rn:var(--rnt);margin-top:10px;padding-top:22px;border-top:2px solid var(--linehi)}
.rrow.tot .rbar i{background:var(--paper)}
.page.js .rbar i{transform:scaleX(0);transform-origin:0 50%;transition:transform 1s var(--e) var(--d,0s)}
.page.js .in .rbar i{transform:none}
@media (max-width:760px){
 .rcpt{--rn:clamp(22px,7vw,30px);--rnt:clamp(27px,8.6vw,37px);--rb:20px;--rt:12px;grid-template-columns:max-content max-content minmax(0,1fr)}
 .rrow{padding:16px 0}
 .rrow .lab,.rrow .note{grid-column:1/-1;padding-right:0}
 .rrow .note{margin-top:4px}
 .ramt,.rw,.rbar{grid-row:3}
 .ramt{grid-column:1}
 .rw{grid-column:2;padding-right:12px}
 .rbar{grid-column:3}
 .rrow.tot{padding-top:18px}
}
@supports not (grid-template-columns:subgrid){
 .rrow{grid-template-columns:minmax(220px,36%) calc(var(--rnt)*4.4) calc(var(--fs-lab)*3.3 + 20px) minmax(0,1fr)}
 @media (max-width:760px){.rrow{grid-template-columns:calc(var(--rnt)*4.4) calc(var(--fs-lab)*3.3 + 12px) minmax(0,1fr)}}
}
@media (prefers-reduced-motion:reduce){.page .rbar i{transform:none !important;transition:none}}

/* try it your way */
.res{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);gap:clamp(24px,5vw,90px);align-items:end;margin-top:clamp(24px,5vh,56px)}
.res .big{font-size:var(--fs-num-xl);min-width:1.1em;color:var(--ink)}
.res .big.up{color:var(--green)}
.res p{font-size:var(--fs-m);color:var(--inkmute);margin-top:12px}
.fwrap{justify-self:end;width:100%;max-width:780px}
.field{display:grid;grid-template-columns:auto repeat(34,minmax(0,1fr));gap:3px;align-items:center;width:100%}
.field span{font-size:var(--fs-xs);color:var(--inkmute);padding-right:10px;white-space:nowrap}
.field i{display:block;aspect-ratio:1/1.5;cursor:default;background:color-mix(in srgb,var(--clay) calc(var(--m)*100%),var(--paper2));transition:background .5s}
.field i.w65{background:var(--green)}
.field.c0 i{background:color-mix(in srgb,var(--clay) calc(var(--n)*100%),var(--paper2))}
.field.c0 i.w0{background:var(--green)}
.field i.sel{outline:2px solid var(--ink);outline-offset:2px}
.page.js .field i{opacity:0;transform:scale(.3);transition:opacity .5s var(--e),transform .5s var(--e),background .5s;transition-delay:calc(var(--i)*7ms)}
.page.js .in .field i{opacity:1;transform:none}
.fwrap .cap{font-size:var(--fs-dek);margin-top:16px;max-width:780px;color:var(--ink)}
.more{display:grid;gap:22px;margin-top:clamp(44px,8vh,96px);padding-top:26px;border-top:1px solid var(--lineD)}
.mh{max-width:28ch;font-family:var(--serif);font-size:clamp(24px,2.6vw,40px);line-height:1.08}
@media (max-width:760px){
 .res{grid-template-columns:1fr}.fwrap{justify-self:start}
 .field span{font-size:var(--fs-xs);padding-right:6px}.field{gap:2px}
}
@media (prefers-reduced-motion:reduce){.page.js .field i{opacity:1;transform:none;transition:none}}

/* win rate */
.wrow .wbar::after{content:"";position:absolute;left:75%;top:-11px;bottom:-11px;border-left:1.5px dashed var(--clay)}
.wrow.mark .wbar::before{content:"Team2’s posted rates: mostly 75%+";position:absolute;left:75%;top:-40px;transform:translateX(-50%);color:var(--clay);font-size:var(--fs-m);font-weight:500;white-space:nowrap}
#win .more{border-top-color:var(--line);margin-top:clamp(40px,7vh,80px)}
@media (max-width:760px){
 .wrow .wbar::after{top:-13px;bottom:-13px}
 .wrow.mark .wbar::before{content:"mostly 75%+";top:-34px;font-size:var(--fs-s);transform:none;margin-left:8px}
}

/* last section */
.end{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:26px}

/* hero: the button to the scenarios page, next to the scroll link. On phones it takes the place of the scroll link. */
.ctas{display:flex;flex-direction:column;align-items:flex-end;gap:18px}
.scen{display:inline-flex;align-items:center;min-height:44px;padding:0 22px;background:var(--clay);color:var(--ink);font-family:var(--sans);font-size:16px;font-weight:500;letter-spacing:.01em;white-space:nowrap;text-decoration:none}
.scen:hover{filter:brightness(1.08)}
.scen:focus-visible{outline:2px solid var(--paper);outline-offset:3px}
@media (max-width:760px){.ctas{align-items:flex-start}.ctas .go{display:none}}