/* What Team2 says only: first screen, one band per claim, the report (Standard and Premium), the method. */

main{position:relative;z-index:1}
.foot:empty{display:none}

/* first screen: the title, then the four claims as a table: Team2's figure, ours */
.top{min-height:calc(100vh - var(--bar-h));min-height:calc(100svh - var(--bar-h));display:flex;flex-direction:column;justify-content:space-between;gap:var(--sp-6);padding-top:clamp(28px,7vh,90px);padding-bottom:clamp(20px,4vh,48px)}
.top h1{max-width:14ch;text-wrap:balance}
.top .dek{margin-top:var(--sp-4);max-width:none;color:var(--soft)}
.idx{margin-top:0;max-width:none}
.idx .trow{grid-template-columns:minmax(0,1.5fr) repeat(2,minmax(0,1fr)) 30px;padding:clamp(10px,1.9vh,22px) 0}
.idx .trow.th{padding:0 0 10px}
.idx a.trow{color:inherit;transition:border-color .4s var(--e)}
.idx a.trow:hover{border-top-color:var(--clay)}
.idx .when{font-size:clamp(17px,1.5vw,24px);color:var(--paper)}
.idx .a,.idx .b{font-size:clamp(32px,min(4.6vw,8vh),72px)}
.idx .b{color:var(--paper)}
.idx .g{display:flex;justify-content:flex-end;align-items:center}
.idx .g i{width:.5em;height:.5em;border-right:2px solid var(--clay);border-bottom:2px solid var(--clay);transform:rotate(45deg) translate(-3px,-3px);transition:transform .4s var(--e)}
.idx a.trow:hover .g i{transform:rotate(45deg) translate(1px,1px)}

/* one band per claim */
.claim{overflow:hidden;overflow:clip;min-height:calc(100vh - var(--bar-h));min-height:calc(100svh - var(--bar-h));display:flex;flex-direction:column;justify-content:center;gap:clamp(24px,4.6vh,52px);padding-top:clamp(36px,6vh,76px);padding-bottom:clamp(36px,6vh,76px)}
.claim>*{position:relative}
.claim>.ghost{position:absolute;right:var(--gut);top:2%;font-size:clamp(110px,15vw,270px);color:transparent;-webkit-text-stroke:1px var(--ghost);pointer-events:none;user-select:none}
.paper.claim>.ghost{-webkit-text-stroke-color:var(--lineD)}
.chead h2{max-width:15em;text-wrap:balance}
.chead .dek{max-width:56ch}
.duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--sp-6) clamp(24px,5vw,90px)}
.side{min-width:0;padding-top:var(--sp-4);border-top:1px solid var(--rule)}
.who{font-size:var(--fs-m);color:var(--fg2)}
.side.t2 .who{color:var(--clay)}
.paper .side.t2 .who{color:var(--claydeep)}
.fig{margin:clamp(6px,1.6vh,18px) 0 var(--sp-2);font-size:clamp(72px,min(12vw,19vh),210px);color:var(--fg);will-change:transform}
.side.t2 .fig{color:var(--clay)}
.paper .side.t2 .fig{color:var(--claydeep)}
.what{max-width:34ch;font-size:var(--fs-dek);color:var(--fg2)}
.claim .wr{max-width:none;margin-top:var(--sp-2)}

/* trade counts: one mark per recap, solid when within one trade */
.marks{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);gap:var(--sp-5) clamp(24px,5vw,90px);align-items:end}
.mk{font-size:var(--fs-dek);color:var(--fg2);max-width:24ch}
.mk .num{display:block;margin-bottom:var(--sp-2);font-size:var(--fs-num-l);color:var(--fg)}
.ticks{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:clamp(2px,.5vw,9px);height:clamp(64px,12vh,120px)}
.ticks i{display:block;background:var(--ink)}
.ticks i.off{background:var(--soft)}
.page.js .ticks i{transform:scaleY(0);transform-origin:50% 100%;transition:transform .8s var(--e) calc(.2s + var(--i)*24ms)}
.page.js .marks.in .ticks i{transform:none}

/* the dates of the posts a count is made of: a small heading, then one date per recap or post, oldest first, in as many columns as
   fit (every column as wide as the longest date, so the dates line up), small and quiet in the colours of the foot note (.foot:
   --mute on ink, --inkmute on paper), on either band. The heading and the key are balanced, so no word is left alone on a line.
   In the list of the recaps, the dates of the recaps not within one trade of our count are shaded in the colour of the light marks
   (.ticks i.off) with ink text, as is the word "Shaded" in the key above the list; the shade reaches a quarter em past each side of
   the text without moving it, so the dates still line up. A screen reader hears it in words (.sr: there for it, not shown). */
.cdates{max-width:1180px}
.cdh,.cdk{font-size:var(--fs-s);line-height:1.4;color:var(--mute);text-wrap:balance}
.cdh{font-weight:500}
.cdk{margin-top:var(--sp-1)}
.cdates ol{display:grid;grid-template-columns:repeat(auto-fill,minmax(7.4em,1fr));gap:2px var(--sp-4);margin-top:var(--sp-2);padding:0;list-style:none;font-size:var(--fs-s);line-height:1.6;color:var(--mute);font-variant-numeric:tabular-nums}
.paper .cdh,.paper .cdk,.paper .cdates ol{color:var(--inkmute)}
.cdates time{white-space:nowrap}
.cdates .sh,.cdates li.off time{background:var(--soft);color:var(--ink);box-shadow:-.25em 0 0 var(--soft),.25em 0 0 var(--soft)}
.cdates .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* bars on both bands: the shared bars are made for dark, these are the paper versions */
.wrow .lab small{margin-top:2px}
.paper .wrow .lab{color:var(--ink)}
.paper .wrow .lab small{color:var(--inkmute)}
.paper .wbar{background:var(--grid)}
.paper .wbar i{background:var(--ink)}
.paper .wbar b{color:var(--paper)}
.paper .wrow.t2 .wbar i{background:var(--claydeep)}
.paper .wrow.t2 .wbar b{color:var(--claydeep)}
.dark .wrow .lab{color:var(--paper)}
.wrow.t2 .lab{color:var(--clay)}
.wrow.n3{grid-template-columns:minmax(200px,27%) minmax(0,1fr) minmax(0,auto)}
.wrow .nn{font-size:var(--fs-num-m);line-height:1;white-space:nowrap;text-align:right;min-width:3.4ch}
.wrow .nn small{display:inline;font-family:var(--sans);font-size:var(--fs-m);color:var(--fg2)}
.paper .wrow.n3 .lab{color:var(--ink)}
#c2 .wrow .wbar::after{content:"";position:absolute;left:75%;top:-11px;bottom:-11px;border-left:1.5px dashed var(--clay)}
#c2 .wrow.mark .wbar::before{content:attr(data-claim);position:absolute;left:75%;top:-40px;transform:translateX(-50%);color:var(--clay);font-size:var(--fs-m);font-weight:500;white-space:nowrap}
#c2 .wr{margin-top:var(--sp-8)}

/* the report: Standard and Premium. Free sees one locked line. */
.report{padding-bottom:var(--sec-y)}
.report .dek{max-width:none}
/* the receipt, read from the top: the Overview's "Where the money goes." on this paper band. Team2's result, the two costs of copying
   it, 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). The sign and
   the word say made or lost. The colours say who, as in the chart under it: Team2 clay (its amount the deeper clay, for text on
   paper), the two costs a quiet clay (clay at 40% over the paper, by opacity), You ink. 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. */
.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(--lineD)}
.rrow .lab{grid-column:1;grid-row:1;padding-right:24px;font-size:var(--fs-lab);line-height:1.3;color:var(--inkmute)}
.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(--inkmute);text-wrap:pretty}
.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(--ink)}
.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(--inkmute)}
.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%);height:100%;background:var(--clay)}
.rrow.cost .rbar i{opacity:.4}
.rrow.t2 .ramt{color:var(--claydeep)}
.rrow.t2 .lab,.rrow.tot .lab{color:var(--ink);font-weight:500}
.rrow.tot{--rn:var(--rnt);margin-top:10px;padding-top:22px;border-top:2px solid var(--axis)}
.rrow.tot .rbar i{background:var(--ink)}
.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)*5) calc(var(--fs-lab)*3.3 + 20px) minmax(0,1fr)}
 @media (max-width:760px){.rrow{grid-template-columns:calc(var(--rnt)*5) calc(var(--fs-lab)*3.3 + 12px) minmax(0,1fr)}}
}
@media (prefers-reduced-motion:reduce){.page .rbar i{transform:none !important;transition:none}}
.runhead{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:var(--sp-4) var(--sp-7);margin-top:clamp(48px,9vh,110px)}
.runhead h3{font-family:var(--serif);font-weight:400;font-size:var(--fs-num-l);line-height:1}
.run{display:flex;gap:clamp(18px,3.2vw,52px);align-items:flex-end}
.run div{font-size:var(--fs-s);color:var(--inkmute)}
.run b{display:block;font-family:var(--serif);font-weight:500;font-size:var(--fs-num-l);line-height:.92;white-space:nowrap;min-width:4.6ch;color:var(--ink)}
.run .a b{color:var(--claydeep)}
.run .d b{min-width:3.6ch;font-weight:400}
.report .plot{height:clamp(260px,44vh,440px);margin-top:var(--sp-5);cursor:crosshair;touch-action:pan-y}
.report .plot:focus-visible{outline:2px solid var(--clay);outline-offset:6px}
.kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-6) clamp(24px,4vw,64px);margin-top:clamp(40px,7vh,84px)}
.k{border-top:1px solid var(--lineD);padding-top:var(--sp-4);min-width:0}
.k .lab{font-size:var(--fs-lab);font-weight:500;color:var(--ink)}
.k.t .lab{color:var(--claydeep)}
.k small{display:block;margin-top:2px;font-size:var(--fs-s);font-weight:400;color:var(--inkmute)}
.k .num{margin-top:var(--sp-4);font-size:clamp(44px,5.6vw,92px);color:var(--ink)}
.k.t .num{color:var(--claydeep)}
.k .sub{margin-top:var(--sp-3);font-size:var(--fs-m);color:var(--inkmute)}
.lockline{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:var(--sp-4) var(--sp-6);margin-top:clamp(30px,6vh,70px);padding:var(--sp-5) 0;border-top:1px solid var(--lineD);border-bottom:1px solid var(--lineD)}
.lockline p{font-family:var(--serif);font-size:var(--fs-num-m);line-height:1.1;color:var(--inkmute)}
.page:is([data-tier=standard],[data-tier=premium]) .lockline{display:none}
.page:not(:is([data-tier=standard],[data-tier=premium])) #rep{display:none}
.more{display:flex;flex-wrap:wrap;gap:var(--sp-4) var(--sp-7);margin-top:clamp(40px,7vh,84px)}

/* the method */
.method{padding-top:clamp(56px,10vh,110px);padding-bottom:clamp(56px,10vh,110px)}
.method h2{font-size:var(--fs-num-l);margin-bottom:var(--sp-5)}
.method .lnk{padding:0 0 3px;background:none;border-top:0;border-left:0;border-right:0;cursor:pointer;color:inherit;
 min-height:0;line-height:inherit} /* the size it had before the shared button.lnk */
.mbox{margin-top:clamp(28px,5vh,56px);max-width:1180px}
.mbox[hidden]{display:none}
.mlead{margin-bottom:var(--sp-6);max-width:70ch;color:var(--soft)}
.mrow{display:grid;grid-template-columns:minmax(180px,28%) minmax(0,1fr);gap:var(--sp-3) var(--sp-6);padding:var(--sp-4) 0;border-top:1px solid var(--line)}
.mrow dt{font-weight:500;color:var(--paper)}
.mrow dd{max-width:72ch;font-size:var(--fs-m);line-height:1.55;color:var(--soft)}

@media (max-width:760px){
 .idx .trow{grid-template-columns:minmax(0,1.3fr) repeat(2,minmax(0,1fr)) 22px;gap:8px}
 .idx .a,.idx .b{font-size:clamp(26px,8vw,38px)}
 .idx .when{font-size:var(--fs-m)}
 .idx .trow.th>span{font-size:var(--fs-xs)}
 .duo{grid-template-columns:minmax(0,1fr);gap:var(--sp-5)}
 .fig{font-size:clamp(72px,26vw,120px);margin:6px 0 4px}
 .marks{grid-template-columns:minmax(0,1fr)}
 .claim{padding-top:var(--sp-8);padding-bottom:var(--sp-8)}
 .claim>.ghost{font-size:clamp(90px,34vw,170px);top:1%}
 .wrow.n3{grid-template-columns:minmax(0,1fr) auto;gap:6px 14px}
 .wrow.n3 .wbar{grid-column:1/-1;grid-row:2}
 .wrow .nn{font-size:var(--fs-num-s)}
 #c2 .wrow .wbar::after{top:-13px;bottom:-13px}
 #c2 .wrow.mark .wbar::before{content:attr(data-claim-s);top:-34px;font-size:var(--fs-s)}
 #c2 .wrow.mark{row-gap:40px}   /* room for the claim above the bar, clear of the line over it */
 #c2 .wbar b{font-size:min(30px,7.4vw)}   /* below 405 px the band's figures shrink with the screen, so Team2's, after its bar, stays on screen */
 .kpis{grid-template-columns:minmax(0,1fr)}
 .k .num{font-size:clamp(48px,16vw,72px);margin-top:var(--sp-2)}
 .runhead{margin-top:var(--sp-8)}
 .run{flex-wrap:wrap;row-gap:var(--sp-3)}   /* a figure that does not fit the line moves to the next one (the date, on most phones) */
 .run b{font-size:var(--fs-num-m);min-width:0}
 .mrow{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
 .page .ticks i{transform:none !important;transition:none}
 .idx a.trow,.idx .g i{transition:none}
}
/* the loading line and the load failure message stand where the report will be */
.report .notice{margin-top:clamp(30px,6vh,70px)}