/* Shared base of every page: tokens, bar and menu, bands, numerals, tables, links, buttons, controls, locked, line chart, bars, rolling list,
   the shared kit, footer.
   Every colour used anywhere comes from the tokens below. Nothing depends on classes or attributes written on the html or body tags.

   The shared kit for the sign-in, account and legal pages (use these names; they work on a .paper and on a .dark band):
     .top              the first band of a page: less room above the heading. A page's own css may set its own.
     .prose            long text. Wrap the text in <div class="prose">; inside it use h2, h3, p, ul, ol, li, a, b, small.
                       The page heading (h1) and its .dek stay outside, above it.
     .form             a form block: its fields, hints and buttons one under the other
     .fld              one field: <div class="fld"><label for="x">E-mail</label><input id="x" type="email"></div>
                       (also select and textarea). Mark a wrong value with aria-invalid="true" on the input.
     .hint             a small helper line (under a field, under a button)
     .btn              the large serif button or link (as before). .btn.mid is the size for forms.
     button.lnk        a small text button with the clay underline ("Try again", "Sign out"); a.lnk as before
     .btns             a row of buttons, links or small forms (wraps on a phone)
     .notice           a message line with a clay rule on its left. .notice.quiet is the grey one for neutral news.
                       Put role="status" (or role="alert" for a failure) on it in the page.
   A button that is off carries the disabled attribute. Any kit block can be hidden with the hidden attribute. */
:root{
 /* palette */
 --ink:#0d0d0d;--paper:#f0efec;--paper2:#e2e0d9;--soft:#c3c2b7;--mute:#898781;--inkmute:#55524c;
 --clay:#d95926;--claydeep:#b8451a;--green:#1d6b47;--void:#000;
 --line:rgba(240,239,236,.17);--linehi:rgba(240,239,236,.55);--wash:rgba(240,239,236,.07);--ghost:rgba(240,239,236,.11);
 --lineD:rgba(13,13,13,.18);--grid:rgba(13,13,13,.13);--axis:rgba(13,13,13,.6);--guide:rgba(13,13,13,.4);--area:rgba(217,89,38,.14);
 /* type */
 --serif:"Imbue","Bodoni 72","Didot","Bodoni MT",Georgia,serif;--sans:"Jost","Avenir Next","Futura","Century Gothic",system-ui,sans-serif;
 --fs-xs:13px;--fs-s:14px;--fs-m:15px;--fs-body:17px;
 --fs-lab:clamp(15px,1.2vw,18px);--fs-dek:clamp(16px,1.25vw,19px);--fs-h3:clamp(17px,1.4vw,21px);
 --fs-h1:clamp(26px,3.6vw,56px);--fs-h2:clamp(38px,5.4vw,88px);--fs-cta:clamp(30px,3.6vw,56px);
 --fs-num-s:clamp(22px,2.3vw,36px);--fs-num-m:clamp(26px,2.7vw,42px);--fs-num-l:clamp(34px,4.2vw,64px);--fs-num-xl:clamp(80px,13.5vw,230px);
 /* space */
 --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--sp-6:32px;--sp-7:48px;--sp-8:64px;--sp-9:96px;
 --gut:clamp(20px,4.4vw,64px);--sec-y:clamp(76px,13vh,160px);--bar-h:66px;--tap:44px;
 --e:cubic-bezier(.2,.7,.1,1);
}
*{box-sizing:border-box;margin:0}
html{background:var(--ink)}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--clay);outline-offset:3px}

/* the three shared blocks (bar, page, footer) carry their own type and colour */
.bar,.page,.sitefoot{font-family:var(--sans);font-size:var(--fs-body);line-height:1.45;color:var(--paper);background:var(--ink);-webkit-font-smoothing:antialiased}
.page{position:relative;overflow-x:clip}
.page [id]{scroll-margin-top:var(--bar-h)}
.num{font-family:var(--serif);font-weight:500;line-height:.86;letter-spacing:-.012em;font-variant-numeric:lining-nums;white-space:nowrap}

/* top bar and phone menu */
.bar{position:sticky;top:0;z-index:60;display:flex;justify-content:space-between;align-items:center;min-height:var(--bar-h);padding:0 var(--gut);font-size:var(--fs-m);color:var(--soft)}
.bar b{font-weight:500;color:var(--paper);letter-spacing:.04em}
.bar nav{display:flex;gap:clamp(20px,calc(3vw - 6px),30px)}
.bar nav a{padding:var(--sp-2) 0}
.bar nav a[aria-current=page]{color:var(--paper);box-shadow:0 1px 0 var(--clay);padding-bottom:3px}
.bar nav a:hover{color:var(--paper)}
.bar .menu{display:none;background:none;border:0;padding:0 0 0 var(--sp-4);min-height:var(--tap);cursor:pointer;font-size:var(--fs-m)}
@media (max-width:760px){
 .bar nav{display:none}
 .bar .menu{display:block}
 .bar.open nav{display:flex;flex-direction:column;gap:0;position:absolute;left:0;right:0;top:100%;padding:var(--sp-2) var(--gut) var(--sp-5);background:var(--ink);border-bottom:1px solid var(--line)}
 .bar.open nav a{min-height:var(--tap);display:flex;align-items:center;font-family:var(--serif);font-size:var(--fs-num-s);color:var(--paper);border-top:1px solid var(--line);padding:0}
 .bar.open nav a[aria-current=page]{box-shadow:none;color:var(--clay)}
}
.bar:not(.js){flex-wrap:wrap;padding-top:var(--sp-3);padding-bottom:var(--sp-3)}
.bar:not(.js) nav{display:flex;flex-wrap:wrap;gap:0 var(--sp-5)}
.bar:not(.js) .menu{display:none}

/* bands */
.sec{position:relative;padding:var(--sec-y) var(--gut)}
.paper{background:var(--paper);color:var(--ink);--fg:var(--ink);--fg2:var(--inkmute);--rule:var(--lineD)}
.dark{background:var(--ink);color:var(--paper);--fg:var(--paper);--fg2:var(--soft);--rule:var(--line)}
.sec h1,.sec h2{font-family:var(--serif);font-weight:400;font-size:var(--fs-h2);line-height:.98;letter-spacing:-.015em}
.dek{margin-top:var(--sp-4);max-width:50ch;font-size:var(--fs-dek);color:var(--soft)}
.paper .dek{color:var(--inkmute)}
.foot{margin-top:var(--sp-5);max-width:72ch;font-size:var(--fs-s);line-height:1.5;color:var(--mute)}
.paper .foot{color:var(--inkmute)}

/* arrive on scroll (only when scripts run; with reduced motion everything is simply there) */
.page.js .rv{opacity:0;transform:translateY(30px);transition:opacity .9s var(--e),transform .9s var(--e)}
.page.js .in .rv,.page.js .rv.in{opacity:1;transform:none}

/* hairline tables: one row per line, numbers in the serif */
.tt{margin-top:clamp(30px,6vh,70px);max-width:1180px}
.trow{display:grid;grid-template-columns:minmax(150px,1.3fr) repeat(3,minmax(0,1fr));gap:18px;align-items:baseline;padding:15px 0;border-top:1px solid var(--line)}
.paper .trow{border-top-color:var(--lineD)}
.trow.rv{transition-delay:var(--d,0s)}
.trow>span{text-align:right}
.trow .when{text-align:left;font-size:var(--fs-lab);color:var(--soft)}
.paper .trow .when{color:var(--inkmute)}
.trow .when b{margin-left:var(--sp-3);font-weight:500;color:var(--fg,var(--paper))}
.trow .a,.trow .b,.trow .g{font-family:var(--serif);font-weight:500;font-size:var(--fs-num-s);line-height:1;white-space:nowrap}
.trow .a{color:var(--clay)}
.paper .trow .a{color:var(--claydeep)}
.trow .g{color:var(--soft)}
.trow small{display:block;margin-top:5px;font-family:var(--sans);font-weight:400;font-size:var(--fs-xs);color:var(--mute)}
.trow small:empty,.trow b:empty{display:none}
.trow.th{padding:0 0 10px;border-top:0}
.trow.th>span{font-family:var(--sans);font-weight:400;font-size:var(--fs-s);line-height:1.4;color:var(--mute)}
.trow.th .a{color:var(--clay)}
.trow.th .b{color:var(--fg,var(--paper))}
.trow.sum{border-top-color:var(--linehi)}
.trow.sum .when{font-weight:500;color:var(--fg,var(--paper))}

/* text links and buttons: serif or sans text with a clay underline, never a box */
.lnk{display:inline-block;justify-self:start;padding-bottom:3px;border-bottom:2px solid var(--clay);font-size:var(--fs-dek);font-weight:500}
.btn,.cta{display:inline-block;font-family:var(--serif);font-size:var(--fs-cta);line-height:1;border-bottom:2px solid var(--clay);padding-bottom:6px;background:none;border-top:0;border-left:0;border-right:0;cursor:pointer;color:inherit}
.go{display:inline-flex;align-items:center;gap:14px;margin-bottom:5px;padding-bottom:6px;border-bottom:2px solid var(--clay);font-family:var(--serif);font-size:var(--fs-num-s);line-height:1.05;white-space:nowrap}
.go i{width:.5em;height:.5em;border-right:2px solid var(--clay);border-bottom:2px solid var(--clay);transform:translateY(-30%) rotate(45deg);transition:transform .4s var(--e)}
.go:hover i{transform:translateY(0) rotate(45deg)}

/* plain form controls. Text options: the chosen one is underlined. */
.opts{display:grid;grid-template-columns:auto 1fr;gap:6px 30px;margin-top:clamp(26px,5vh,54px);align-items:baseline}
.opts dt{font-size:var(--fs-m);color:var(--fg2,var(--inkmute));white-space:nowrap}
.opts dd,.choice{display:flex;flex-wrap:wrap;gap:0 24px}
.opts button,.choice button{font-size:var(--fs-dek);background:none;border:0;border-bottom:2px solid transparent;padding:9px 0 5px;min-height:var(--tap);color:var(--fg2,var(--inkmute));cursor:pointer}
.opts button[aria-pressed=true],.choice button[aria-pressed=true]{color:var(--fg,var(--ink));border-bottom-color:var(--clay);font-weight:500}
.opts [hidden]{display:none}
.rng{display:grid;gap:var(--sp-1);min-width:180px}
.rng label{font-size:var(--fs-m);color:var(--fg2,var(--inkmute))}
.rng output{font-family:var(--serif);font-size:var(--fs-num-s);color:var(--fg,var(--ink))}
.rng input{-webkit-appearance:none;appearance:none;width:100%;height:28px;margin:0;background:none;cursor:pointer}
.rng input::-webkit-slider-runnable-track{height:1px;background:var(--fg2,var(--inkmute))}
.rng input::-moz-range-track{height:1px;background:var(--fg2,var(--inkmute))}
.rng input::-webkit-slider-thumb{-webkit-appearance:none;width:10px;height:22px;margin-top:-11px;background:var(--clay);border:0;border-radius:0}
.rng input::-moz-range-thumb{width:10px;height:22px;background:var(--clay);border:0;border-radius:0}
.select{position:relative;display:inline-block}
.select select{-webkit-appearance:none;appearance:none;background:none;border:0;border-bottom:1px solid var(--fg2,var(--inkmute));border-radius:0;padding:9px 28px 5px 0;min-height:var(--tap);font:inherit;font-size:var(--fs-dek);color:var(--fg,var(--ink));cursor:pointer}
.select select option{color:var(--ink);background:var(--paper)}
.select::after{content:"";position:absolute;right:4px;top:50%;width:7px;height:7px;margin-top:-6px;border-right:1.5px solid var(--fg2,var(--inkmute));border-bottom:1.5px solid var(--fg2,var(--inkmute));transform:rotate(45deg);pointer-events:none}

/* what the chosen plan does not include */
.locked{position:relative;opacity:.45;cursor:not-allowed;user-select:none}
.locked button,.locked input,.locked select,.locked a{pointer-events:none}
.locked[data-plan]::after{content:attr(data-plan);display:inline-block;margin-left:var(--sp-3);font-size:var(--fs-s);color:var(--fg2,var(--mute))}

/* line chart (drawn by T2.lineChart) */
.plot{position:relative;min-height:0}
.plot svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.plot text{font-family:var(--sans);font-size:var(--fs-xs);fill:var(--inkmute)}
.plot .ch-grid{stroke:var(--grid)}
.plot .ch-zero{stroke:var(--axis)}
.plot .ch-guide{stroke:var(--guide);stroke-dasharray:2 4}
.plot .ch-area{fill:var(--area);stroke:none}
.plot .s{fill:none;stroke-linejoin:round}
.plot .s0{stroke:var(--clay);stroke-width:2.8}
.plot .s1{stroke:var(--ink);stroke-width:2.2}
.plot .s2{stroke:var(--green);stroke-width:2.2}
.plot .s3{stroke:var(--mute);stroke-width:2.2}
.plot .d0{fill:var(--clay)}.plot .d1{fill:var(--ink)}.plot .d2{fill:var(--green)}.plot .d3{fill:var(--mute)}
.tip{position:absolute;left:0;top:0;font-size:var(--fs-m);font-weight:500;white-space:nowrap;pointer-events:none}
.tip.t0{color:var(--claydeep)}
.tip.t2{color:var(--green)}
@media (max-width:760px){.tip{display:none}}

/* bars: win rate (the receipts of where the money goes are each page's own: index.css, team2-says.css) */
.wr{margin-top:clamp(64px,10vh,110px);display:grid;gap:22px;max-width:1180px}
.wrow{display:grid;grid-template-columns:minmax(200px,27%) 1fr;gap:22px;align-items:center}
.wrow .lab{font-size:var(--fs-lab);color:var(--soft)}
.wrow .lab small{display:block;font-size:var(--fs-s);color:var(--mute)}
.wbar{position:relative;height:42px;background:var(--wash)}
.wbar i{position:absolute;inset:0 auto 0 0;width:var(--w);background:var(--paper)}
.wbar b{position:absolute;right:calc(100% - var(--w) + 12px);top:50%;transform:translateY(-50%);font-family:var(--serif);font-weight:500;font-size:30px;line-height:1;color:var(--ink)}
.wrow.t2 .wbar i{background:var(--clay)}
.wrow.t2 .wbar b{right:auto;left:calc(var(--w) + 12px);color:var(--clay)}
.page.js .wbar i{transform-origin:0 50%;transform:scaleX(0);transition:transform 1.1s var(--e) var(--d,0s)}
.page.js .wbar b{opacity:0;transition:opacity .6s .7s}
.page.js .in .wbar i{transform:scaleX(1)}
.page.js .in .wbar b{opacity:1}
@media (max-width:760px){
 .wrow{grid-template-columns:1fr;gap:8px}.wr{gap:26px}
}

/* the rolling list: two copies of the list, moved by half its height, so the loop has no seam */
.tl{display:grid;grid-template-columns:minmax(0,1fr) var(--tc,70px) var(--tc,70px);gap:10px;align-items:baseline}
.tl>span{text-align:right}
.tl .when{text-align:left;font-size:var(--fs-s);line-height:1.4;color:var(--mute)}
.tl .when b{display:block;font-weight:500;font-size:clamp(16px,1.3vw,19px);color:var(--paper)}
.tl .a,.tl .b{font-family:var(--serif);font-weight:500;font-size:clamp(22px,2.1vw,32px);line-height:1;white-space:nowrap}
.tl .a{color:var(--clay)}
.tl.th{flex:none;align-items:end;padding-bottom:12px;border-bottom:1px solid var(--line)}
.tl.th h2{font-family:var(--serif);font-weight:400;font-size:clamp(22px,2.1vw,32px);line-height:1.05;color:var(--paper)}
.tl.th span{font-family:var(--sans);font-weight:400;font-size:var(--fs-s);line-height:1.4}
.tl.th .b{color:var(--paper)}
.tl.sum{flex:none;padding-top:14px;border-top:1px solid var(--linehi)}
.tl.sum .when{font-size:var(--fs-m);font-weight:500;color:var(--paper)}
.tw{--rp:clamp(12px,2vh,26px);flex:1 1 0;max-height:calc(var(--rp)*20 + 420px);min-height:0;overflow:hidden;-webkit-mask-image:linear-gradient(transparent,var(--void) 5%,var(--void) 76%,transparent);mask-image:linear-gradient(transparent,var(--void) 5%,var(--void) 76%,transparent)}
.roll ol{list-style:none;margin:0;padding:0}
.roll li{padding:var(--rp) 0;border-bottom:1px solid var(--line)}
@keyframes roll{to{transform:translateY(-50%)}}
@media (prefers-reduced-motion:no-preference){.roll{animation:roll 34s linear infinite}.tape:hover .roll,.tw:hover .roll{animation-play-state:paused}}

/* ---- the shared kit for the sign-in, account and legal pages (names listed at the top of this file) ---- */
.top{padding-top:clamp(44px,9vh,110px);padding-bottom:clamp(60px,10vh,120px)}
/* long text */
.prose{max-width:68ch;font-size:var(--fs-body);line-height:1.6;color:var(--fg,var(--paper))}
.sec>.prose:not(:first-child){margin-top:clamp(30px,6vh,70px)}
.prose>*+*{margin-top:var(--sp-4)}
.prose h1,.prose h2{font-family:var(--serif);font-weight:400;font-size:var(--fs-num-m);line-height:1.08;letter-spacing:-.01em;text-wrap:balance}
.prose h3{font-size:var(--fs-h3);font-weight:500;line-height:1.3}
.prose>h2:not(:first-child){margin-top:var(--sp-7)}
.prose>h3:not(:first-child){margin-top:var(--sp-6)}
.prose h2+h3:not(:first-child){margin-top:var(--sp-4)}
.prose ul,.prose ol{padding-left:1.25em}
.prose li+li{margin-top:var(--sp-2)}
.prose li>ul,.prose li>ol{margin-top:var(--sp-2)}
.prose b,.prose strong{font-weight:500}
.prose a{text-decoration:underline;text-decoration-color:var(--clay);text-decoration-thickness:2px;text-underline-offset:3px;overflow-wrap:anywhere}
.prose small{display:block;font-size:var(--fs-s);line-height:1.5;color:var(--fg2,var(--mute))}
/* a form: fields with one hairline under them, never a box */
.form{display:grid;justify-items:start;gap:var(--sp-5);max-width:34rem;margin-top:clamp(26px,5vh,54px)}
.fld{display:grid;gap:var(--sp-1);width:100%}
.fld label{font-size:var(--fs-m);color:var(--fg2,var(--soft))}
.fld input,.fld select,.fld textarea{-webkit-appearance:none;appearance:none;display:block;width:100%;min-height:var(--tap);margin:0;padding:9px 0 5px;background:none;border:0;border-bottom:1px solid var(--fg2,var(--soft));border-radius:0;font:inherit;font-size:var(--fs-dek);color:var(--fg,var(--paper))}
.fld textarea{min-height:calc(var(--tap)*3);resize:vertical}
.fld select option{color:var(--ink);background:var(--paper)}
.fld input::placeholder,.fld textarea::placeholder{color:var(--fg2,var(--soft));opacity:.7}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:0;border-bottom-color:var(--clay);box-shadow:0 1px 0 var(--clay)}
.fld [aria-invalid=true]{border-bottom-color:var(--clay)}
.fld input:-webkit-autofill{-webkit-text-fill-color:var(--fg,var(--paper));caret-color:var(--fg,var(--paper));transition:background-color 99999s 0s}
.hint{max-width:60ch;font-size:var(--fs-s);line-height:1.5;color:var(--fg2,var(--mute))}
.hint a,.notice a{text-decoration:underline;text-decoration-color:var(--clay);text-decoration-thickness:2px;text-underline-offset:3px}
/* buttons */
.btn.mid{font-size:var(--fs-num-s);line-height:1.1;min-height:var(--tap);padding-bottom:5px;text-align:left}
button.lnk{min-height:var(--tap);padding:10px 0 3px;background:none;border-top:0;border-left:0;border-right:0;border-radius:0;font-family:var(--sans);line-height:1.3;color:inherit;cursor:pointer}
.btn[disabled],button.lnk[disabled]{opacity:.45;cursor:default}
.btns{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--sp-3) var(--sp-6);margin-top:var(--sp-5)}
.form .btns{margin-top:0}
/* a message */
.notice{max-width:60ch;margin-top:var(--sp-5);padding:2px 0 2px var(--sp-4);border-left:2px solid var(--clay);font-size:var(--fs-dek);line-height:1.45;color:var(--fg,var(--paper))}
.notice.quiet{border-left-color:var(--fg2,var(--mute));color:var(--fg2,var(--soft))}
.form .notice{margin-top:0}
.prose[hidden],.form[hidden],.fld[hidden],.hint[hidden],.btns[hidden],.notice[hidden],.btn[hidden],.lnk[hidden]{display:none}

/* footer */
.sitefoot{border-top:1px solid var(--line);color:var(--mute);font-size:var(--fs-s);line-height:1.5;--fg:var(--paper);--fg2:var(--soft);--rule:var(--line)}
.sitefoot .ft{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--sp-6) var(--sp-8);padding:var(--sp-7) var(--gut) var(--sp-5)}
.sitefoot .ft b{display:block;margin-bottom:var(--sp-2);font-weight:500;letter-spacing:.04em;color:var(--paper)}
.sitefoot .ft p{max-width:64ch;margin-top:var(--sp-1)}
.sitefoot .ft p a{color:var(--soft);text-decoration:underline;text-decoration-color:var(--clay);text-decoration-thickness:1px;text-underline-offset:3px}   /* How we measured */
.sitefoot .ft p a:hover{color:var(--paper)}
.sitefoot nav{display:flex;flex-direction:column;align-items:flex-start}
.sitefoot nav a{display:inline-flex;align-items:center;min-height:var(--tap);color:var(--soft)}
.sitefoot nav a:hover,.sitefoot nav a[aria-current=page]{color:var(--paper)}
.sitefoot .legal{grid-column:1/-1;flex-direction:row;flex-wrap:wrap;gap:0 var(--sp-5);padding-top:var(--sp-3);border-top:1px solid var(--line)}
@media (max-width:760px){.sitefoot .ft{grid-template-columns:1fr}}

@media (max-width:760px){
 .trow{grid-template-columns:minmax(58px,.9fr) repeat(3,minmax(0,1fr));gap:8px}
 .trow .when b{display:block;margin-left:0}
 .opts{grid-template-columns:1fr;gap:0}.opts dt{margin-top:14px}
 .go{justify-self:start;margin-bottom:0;font-size:22px}
}
@media (prefers-reduced-motion:reduce){
 .page .rv{opacity:1 !important;transform:none !important;transition:none}
 .page .wbar i{transform:none !important;transition:none}
 .page .wbar b{opacity:1 !important;transition:none}
 .go i{transition:none}.trow.rv{transition-delay:0s}
 .roll ol+ol{display:none}.tw{overflow-y:auto;-webkit-mask-image:none;mask-image:none}
}