/* Trenyx homepage, How it works through the FAQ. Tokens, .cells and .win live in chrome.css. */
[hidden]{display:none!important}

/* Sections clear the header with their own padding, so a hash jump lands on the section, not above it. */
.sec[id]{scroll-margin-top:calc(-1*var(--header) - var(--s-5))}

/* Small classes. The heading's measure is in H2 ems, so .sec-head carries the H2's size. */
.sec-head{font-size:var(--fs-h2);max-width:18em}
.rp-copy,.win-side,.rp-left,.rp-right{min-width:0}
.report .lede,.share .lede{font-size:var(--fs-lead);line-height:var(--lh-lead);letter-spacing:var(--ls-lead)}
.report .lede{color:var(--text-night)}
.share .lede{color:var(--text-2)}

/* M34: white is lit */
.misses li,.feat li,.qa{position:relative;isolation:isolate}
.misses li::before,.feat li::before,.qa::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--white);opacity:0;pointer-events:none;transition:opacity 220ms var(--e-tool)}
@media (hover:hover) and (pointer:fine){
.misses li:hover::before,.feat li:hover::before,.qa:hover::before{opacity:1}
}

/* How it works */
.how{background:var(--night);color:var(--white)}
.how h2{max-width:16em}
.three-wrap{position:relative;margin-top:var(--s-9)}
.three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--gutter);margin:0;padding:var(--s-8) 0 0;list-style:none}
.rail{position:absolute;top:11px;left:50%;width:100vw;height:1px;transform:translateX(-50%);background:var(--pat-dash) repeat-x}
/* Rests on stop 1: the frame's left edge, plus 32px to clear .n. home.js repeats that 32px when it measures the stops. */
.rail-tile{position:absolute;top:-6px;left:0;width:12px;height:12px;background:var(--lit);transform:translateX(calc(50vw - min(50vw - var(--margin),var(--frame)/2) + 32px))}
.step{position:relative}
.step .n{position:absolute;top:calc(-1*var(--s-8));left:0;padding-right:12px;background:var(--night);color:var(--text-night);font-size:14px;line-height:24px}
.step h3{margin-top:24px}
.step p{margin-top:8px;font-size:16px;color:var(--text-night)}

.win-svg{display:block;width:100%;height:100%}
.win-svg .t{font:12.5px var(--mono);letter-spacing:var(--ls-mono);fill:var(--text-2)}
.win-svg .box{fill:none;stroke:var(--ink)}
.win-svg .dash{stroke-dasharray:6 6}
.win-svg .ln{fill:var(--line)}
.win-svg .chev path{fill:none;stroke:var(--accent);stroke-width:2}
.win-svg .stop{fill:var(--ink)}
.win-svg .ret{fill:var(--accent)}
.win-svg .bugs rect{fill:var(--ink)}
.win-svg .bar{fill:var(--accent)}
.win-svg .stem{fill:var(--ink)}
.win-svg .copy,.win-svg .chev path,.win-svg .ret,.win-svg .bar,.win-svg .stem{transform-box:fill-box}
.win-svg .ret{transform-origin:right}
.win-svg .stem{transform-origin:top}

/* 176px at the drawn 400px window, and it gives way in narrower ones so "4 / 16" keeps its column. */
.win--score{display:grid;grid-template-columns:min(176px,51.2%) minmax(0,1fr);gap:28px;align-items:center;padding:24px 28px}
.win-board{position:relative}
.win-ghost{position:absolute;inset:12px -12px -12px 12px;border:1px dashed var(--line)}
.win-score{display:block;font-size:40px;line-height:1;font-weight:var(--w-med);font-variant-numeric:tabular-nums;white-space:nowrap}
.win-rows{display:grid;gap:6px;margin-top:16px}
.win-rows i{display:block;height:6px;background:var(--line);transform-origin:left}
.win-rows i:nth-child(3){width:60%}
.win-ex{display:block;margin-top:12px;font-size:12.5px;color:var(--text-2)}

/* The report */
.report{position:relative;isolation:isolate;background:var(--night);color:var(--white);padding-bottom:0}
.report::after{content:"";position:absolute;inset:auto 0 0 0;height:clamp(240px,38%,460px);background:var(--accent);z-index:-1}
.report-head{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--gutter);align-items:end;margin-bottom:var(--s-8)}
.h2-del,.h2-add{display:block}
.h2-del{position:relative;width:fit-content;color:var(--text-night);transition:color 0s linear 420ms}
.h2-del::after{content:"";position:absolute;left:0;right:0;top:54%;height:2px;background:var(--lit);transform-origin:left;transition:transform 420ms var(--e-arrive)}
.h2-del.is-pre{color:var(--white);transition:none}
.h2-del.is-pre::after{transform:scaleX(0)}
.h2-add.tx-pre.tx-in{transition-duration:520ms;transition-delay:540ms}

.rp-sheet{--rise:64px;position:relative;max-width:1200px;margin-inline:auto;background:var(--white);color:var(--ink);border-radius:var(--r-2) var(--r-2) 0 0}
.rp-sheet.tx-in{transition-duration:800ms}
.rp-bar{display:flex;justify-content:space-between;align-items:center;height:40px;padding-inline:20px;border-bottom:var(--hair);font-size:14px;color:var(--text-2)}
.rp-dots{display:inline-flex;gap:6px}
.rp-dots i{display:block;width:8px;height:8px;background:var(--line)}
.rp-body{display:grid;grid-template-columns:5fr 7fr;gap:var(--s-7);padding:var(--s-7);isolation:isolate}
.rp-left .h{font-size:24px;line-height:var(--lh-h3);font-weight:var(--w-med);letter-spacing:var(--ls-h3)}
.rp-left .m{margin-top:8px;font-size:14px;color:var(--text-2)}
.cells--m{width:min(100%,300px);--cell-gap:6px}
.rp-left .cells--m{margin-top:var(--s-6)}
.rp-group{position:relative;padding-block:var(--s-4);border-top:var(--hair)}
.rp-group:first-child{border-top:0}
.gh{display:flex;align-items:center;gap:12px;font-size:16px;font-weight:var(--w-med)}
.gh-cells{display:inline-flex;gap:4px;margin-left:auto}
.gh-cells .cell{width:16px}
.ct{min-width:1.5em;text-align:right;font-variant-numeric:tabular-nums}
.rp-feed{clip-path:inset(0)}
.rp-row{position:relative;display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:12px;padding-top:12px}
.rp-row .i{grid-column:1;font-family:var(--mono);font-size:14px;color:var(--text-2)}
.rp-row p{grid-column:2;font-size:16px}
.rp-row .w{grid-column:2;margin-top:6px;font-size:15px;font-weight:var(--w-med)}
.rp-diff{grid-column:2;display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;column-gap:12px;margin-top:12px;padding:10px 12px;background:var(--paper);border:var(--hair);border-radius:var(--r-2);font:12.5px var(--mono)}
.rp-path{grid-column:1 / -1;margin-bottom:4px;color:var(--text-2)}
.rp-diff code{font:inherit;font-size:14px;font-variant-ligatures:none}
.rp-diff del{position:relative;padding-inline:2px;background:var(--soft);color:var(--text-2);text-decoration:none}
.rp-diff del::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--ink);transform-origin:left}
.rp-ticks{display:inline-flex;gap:3px}
.rp-ticks i{display:block;width:6px;height:6px;background:var(--accent)}
.rp-land{width:16px}
/* M29. .is-pre goes with TX.stopAll, which takes the other three states with it. */
.rp-diff.is-pre del::after{transform:scaleX(0)}
.rp-diff.is-pre.is-strike del::after{transform:none;transition:transform 120ms linear}
.rp-diff.is-pre.is-sel del{background:var(--accent);color:var(--white)}
.rp-diff.is-pre .rp-ticks i:not(.on),.rp-diff.is-pre .rp-land{opacity:0}
/* M30 */
.rp-group::before{content:"";position:absolute;inset:0 calc(-1*var(--s-3));z-index:-1;background:var(--soft-2);opacity:0;pointer-events:none;transition:opacity var(--d-2) var(--e-tool)}
.rp-group.is-link::before{opacity:1}
.rp-body .cell{outline:2px solid transparent;outline-offset:2px;transition:outline-color var(--d-2) var(--e-tool)}
.rp-body .cell.is-link{outline-color:var(--ink)}

/* Where test suites miss */
.misses-sec{background:var(--soft)}
.miss{display:grid;grid-template-columns:5fr 7fr;column-gap:var(--s-7)}
.miss-head{grid-row:1 / span 2;position:sticky;top:calc(var(--header) + var(--s-7));align-self:start}
.miss-sub{margin-top:var(--s-4);font-size:var(--fs-lead);line-height:var(--lh-lead);color:var(--text-2)}
.misses{margin:0;padding:0;list-style:none;border-top:var(--strong)}
.misses li{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:var(--s-5);row-gap:var(--s-3);padding-block:var(--s-5);border-bottom:var(--strong)}
.what{grid-row:1;grid-column:1;font-size:20px;line-height:1.35;letter-spacing:var(--ls-lead)}
.pct{grid-row:1;grid-column:2;font-size:56px;line-height:1;letter-spacing:var(--ls-stat);font-variant-numeric:tabular-nums;font-weight:var(--w-med);text-align:right}
.track{grid-row:2;grid-column:1 / -1;position:relative;height:12px;overflow:clip;background:var(--pat-tick) repeat-x 0 0 / 10% 100%}
.track>span{display:block;height:100%;background:var(--ink);transform-origin:left;transition:transform var(--d-6) var(--e-arrive)}
.lane-wall{position:absolute;top:0;width:2px;height:12px;background:var(--ink)}
.bug{position:absolute;left:0;top:3px;width:6px;height:6px;background:var(--text-night)}
.bug.is-out{background:var(--ink)}
.bug.is-stop{background:var(--signal)}
.miss-foot{grid-column:2;margin-top:var(--s-4);font-size:14px;color:var(--text-2)}

/* Share your score */
.sh-head{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--gutter);align-items:end}
.sh-list{list-style:none;padding:0;margin:var(--s-7) 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-block:var(--strong)}
.sh-list li{display:flex;gap:var(--s-4);padding:var(--s-5);align-items:flex-start;font-size:var(--fs-body)}
.sh-list li+li{border-left:var(--strong)}
.sh-list li:first-child{padding-left:0}
.sh-panel{position:relative;display:grid;grid-template-columns:1fr 1fr;min-height:620px;border:var(--hair);border-radius:var(--r-2)}
.sh-left{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s-4);padding:var(--s-7)}
.sh-left .cells--m{width:min(100%,280px)}
.sh-cap,.sh-ex{font-size:14px;color:var(--text-2)}
.sh-wall{position:absolute;left:50%;top:0;bottom:0;width:2px;margin-left:-1px;background:var(--ink);z-index:1}
.sh-right{background:var(--accent);padding:var(--s-6) var(--s-7) var(--s-7);display:flex;flex-direction:column;gap:var(--s-5);border-radius:0 var(--r-2) var(--r-2) 0}
.sw{align-self:flex-end;display:inline-flex;align-items:center;gap:8px;padding:0;color:var(--white);font-size:14px;background:none;border:0;cursor:pointer}
.sw-track{position:relative;display:block;width:32px;height:16px;border-radius:8px;background:var(--deep)}
.sw-track i{position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;background:var(--white);transition:transform var(--d-2) var(--e-tool)}
[aria-pressed="true"] .sw-track i{transform:translateX(16px)}
.sw-off,.sw-on{opacity:.72}
[aria-pressed="false"] .sw-off,[aria-pressed="true"] .sw-on{opacity:1}
.sh-slot{position:relative;clip-path:inset(0)}
.sh-slot::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--deep);z-index:1}
.sh-sheet{background:var(--white);color:var(--ink);padding:var(--s-5);border-radius:0 0 var(--r-2) var(--r-2);display:grid;gap:var(--s-4)}
.sh-sheet.is-pre{transform:translateY(-100%)}
.sh-readme{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;font:12.5px var(--mono);color:var(--text-2);padding-bottom:12px;border-bottom:var(--hair)}
.sh-sheet .m{font-size:14px;color:var(--text-2)}
.sh-sheet .h{margin-top:var(--s-1);font-size:22px;line-height:var(--lh-h3);font-weight:var(--w-med);letter-spacing:var(--ls-h3)}
.sh-facts{margin:0}
.sh-facts div{display:grid;grid-template-columns:150px minmax(0,1fr);gap:12px;padding-block:6px;border-top:var(--hair);font-size:14px}
.sh-facts dt{font-family:var(--mono);font-size:12.5px;color:var(--text-2)}
.sh-facts dd{margin:0}
.sh-note{font-size:13px;color:var(--text-2)}
.sh-n{font-variant-numeric:tabular-nums}
.badge{display:block;max-width:100%;height:auto;transition:opacity var(--d-2) linear}
.sh-right.is-off .badge{opacity:0}
.sh-fly{position:absolute;inset:0;pointer-events:none;z-index:2}
.sh-fly .cell{position:absolute}

/* Early access, month band, FAQ */
.early-grid{display:grid;grid-template-columns:5fr 7fr;column-gap:var(--s-7)}
.price-card{position:sticky;top:calc(var(--header) + var(--s-7));align-self:start}
.price-card .name{margin-top:var(--s-6);font-size:20px;font-weight:var(--w-med)}
.price{display:flex;flex-wrap:wrap;gap:0 .3em;margin-top:var(--s-2);font-size:var(--fs-price);line-height:1.1;letter-spacing:var(--ls-h2);font-weight:var(--w-med)}
.price b{font-weight:var(--w-med)}
.price-sub{margin-top:var(--s-3);max-width:32em;color:var(--text-2)}
.price-card .btn{margin-top:var(--s-5)}
.price-card .fine{margin-top:var(--s-3);font-size:14px;color:var(--text-2)}
.feat{margin:0;padding:0;list-style:none;border-top:var(--strong)}
.feat li{display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:var(--s-5);align-items:center;min-height:88px;padding-block:var(--s-3);border-bottom:var(--strong);font-size:18px;letter-spacing:var(--ls-lead)}
.pic{display:block;width:40px;height:40px;fill:var(--ink)}
.pic--s{width:32px;height:32px;flex:none}
.pic .a{fill:var(--accent)}
.pic .g{fill:var(--line)}
.pic .a,.pic .g,.pic .go{transform-box:fill-box;transform-origin:center}
.pic .lit{transform-origin:left}
.pic .half{transform-origin:right}

.month-band{position:relative;height:96px;margin-block:var(--s-9);border-block:var(--strong);background:var(--pat-tile) repeat-x 0 32px;overflow:clip}
.month-stamp{position:absolute;left:0;top:36px;width:24px;height:24px;background:var(--accent)}

.faq{border-top:var(--strong)}
.qa{border-bottom:var(--strong)}
.qa summary{display:flex;justify-content:space-between;align-items:center;gap:var(--s-5);padding-block:var(--s-5);list-style:none;cursor:pointer}
.qa summary::-webkit-details-marker{display:none}
.qa h3{margin:0;font-size:24px}
.qa p{margin:0 0 var(--s-6) calc(50% + 12px);max-width:60ch;font-size:var(--fs-read);line-height:var(--lh-read);color:var(--text-2)}
.qa[open] p{animation:qa-in 260ms var(--e-arrive) backwards}
@keyframes qa-in{from{opacity:0;transform:translateY(8px)}}
.qa-i{position:relative;flex:none;width:16px;height:16px}
.qa-i::before,.qa-i::after{content:"";position:absolute;background:currentColor}
.qa-i::before{left:0;top:7px;width:16px;height:2px}
.qa-i::after{left:7px;top:0;width:2px;height:16px;transition:transform var(--d-3) var(--e-tool)}
.qa[open] .qa-i::after{transform:scaleY(0)}

/* Tablet and phone */
@media (max-width:1099px){
.three{grid-template-columns:minmax(0,1fr);row-gap:var(--s-7);padding-top:0}
.rail{display:none}
.step{display:grid;grid-template-columns:5fr 7fr;grid-template-rows:auto auto 1fr;column-gap:24px}
.step .win{grid-column:1;grid-row:1 / span 3}
.step .n{position:static;grid-column:2;grid-row:1;padding:0;background:none}
.step h3{grid-column:2;grid-row:2;margin-top:0}
.step p{grid-column:2;grid-row:3}
.win--score{gap:16px;padding-inline:20px}
.win-score{font-size:32px}
.report-head{grid-template-columns:minmax(0,1fr);row-gap:24px}
.rp-left .cells--m{max-width:260px}
.miss{grid-template-columns:minmax(0,1fr)}
.miss-head{position:static;grid-row:auto}
.misses{margin-top:var(--s-6)}
.miss-foot{grid-column:1}
.sh-head{grid-template-columns:minmax(0,1fr);row-gap:24px}
.early-grid{grid-template-columns:minmax(0,1fr);row-gap:var(--s-7)}
.price-card{position:static}
.qa p{margin-left:0}
}
@media (max-width:899px){
.rp-body{grid-template-columns:minmax(0,1fr)}
.sh-panel{grid-template-columns:minmax(0,1fr);min-height:0}
/* In flow between the two parts, so the join holds with no JS. */
.sh-wall{position:relative;left:0;top:auto;bottom:auto;width:auto;height:2px;margin:0}
.sh-right{border-radius:0 0 var(--r-2) var(--r-2)}
}
@media (max-width:767px){
.step{grid-template-columns:auto minmax(0,1fr);grid-template-rows:none;column-gap:var(--s-2);align-items:baseline}
.step .win{grid-column:1 / -1;grid-row:1}
.step .n{grid-column:1;grid-row:2;margin-top:24px}
.step h3{grid-column:2;grid-row:2;margin-top:24px}
.step p{grid-column:1 / -1;grid-row:3}
.win--score{gap:28px;padding-inline:28px}
.win-score{font-size:40px}
.report::after{height:240px}
.rp-body{padding:var(--s-5) var(--s-4)}
.what{font-size:17px}
.pct{font-size:40px}
.sh-list{grid-template-columns:minmax(0,1fr)}
.sh-list li{padding-inline:0}
.sh-list li+li{border-left:0;border-top:var(--strong)}
.sh-right{padding:var(--s-5) var(--s-4)}
.sh-facts div{grid-template-columns:minmax(0,1fr);gap:0}
.feat li{min-height:72px;column-gap:var(--s-4);font-size:16px}
.qa h3{font-size:20px}
}
/* "4 / 16" is 2.79em: these are the widths where 40px would not fit its column. */
@media (max-width:375px){.win-score{font-size:34px}}
@media (min-width:1100px) and (max-width:1138px){.win-score{font-size:36px}}
@media print{.sh-sheet.is-pre,.tx-bar0{transform:none}.qa[open] p{animation:none}}