:root{--k:#0B0B0B;--k2:#161616;--k3:#1F1F1F;--line:#2A2A2A;--red:#ED1C24;--btn:#C8161D;--dk:#BE141C;--deep:#981A1D;--deep2:#5E1013;--deep3:#3A0A0C;--w:#FFF;--g:#D6D6D6;--g2:#A9A6A1;--paper:#F6F3EE;--paper2:#EEE9E1;--card:#FFFDFA;--ink:#171512;--mut:#5C5751;--rule:#E3DDD4;--ease:cubic-bezier(.2,.7,.2,1);--max:1040px;--hdr:72px;--sp:64px}
[hidden]{display:none!important}*,::before,::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:var(--hdr)}
body{margin:0;font:17px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--ink);background:var(--paper);overflow-x:hidden}
img{max-width:100%;height:auto}a{color:inherit}
@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
:focus-visible{outline:3px solid var(--red);outline-offset:3px}
.dark :focus-visible,header :focus-visible,.bar :focus-visible,footer :focus-visible{outline-color:#fff}
.skip{position:absolute;left:12px;top:-60px;z-index:60;background:#fff;color:#000;padding:10px 14px;border-radius:4px;font-weight:700}.skip:focus{top:12px}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px;position:relative}
.dark{background:var(--k);color:var(--w)}
section{position:relative;padding:var(--sp) 0}
/* type */
.hd{font-weight:900;font-style:italic;text-transform:uppercase;letter-spacing:-.01em;line-height:1.02;margin:0}
h2.h2{font-size:clamp(1.8rem,4.6vw,2.5rem);font-weight:800;letter-spacing:-.02em;line-height:1.1;margin:0 0 18px}
.hd em,.h2 em{font-style:inherit;color:var(--red)}
.kick{display:flex;align-items:center;gap:10px;margin:0 0 14px;font-size:.74rem;font-weight:700;text-transform:uppercase;letter-spacing:.16em;color:var(--dk)}
.kick::before{content:"";width:28px;height:3px;background:var(--red);flex:none}
.dark .kick,.k2 .kick,.apply .kick{color:var(--g)}
.lead{font-size:1.1rem;color:var(--mut);max-width:620px;margin:0 0 32px}
.dark .lead,.k2 .lead,.apply .lead{color:var(--g)}
/* buttons */
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:12px 26px;border:0;border-radius:8px;background:var(--btn);color:#fff;font-family:inherit;font-weight:700;font-size:1.02rem;line-height:1.1;text-decoration:none;cursor:pointer;transition:background .15s,transform .15s,border-color .15s}
.btn::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.25) 50%,transparent 70%);transform:translateX(-120%);pointer-events:none}
.btn:hover::after,.btn:focus-visible::after{transform:translateX(120%);transition:transform .6s}
.btn:hover{background:var(--red)}.btn:active{transform:translateY(1px)}
.ghost{background:transparent;border:2px solid rgba(255,255,255,.5);color:inherit}.ghost:hover{background:rgba(255,255,255,.06);border-color:#fff}
.ghost.ink{border-color:#9b958d;color:var(--ink)}.ghost.ink:hover{background:var(--paper2);border-color:var(--ink)}
.pulse{animation:pulse 2.4s 1.2s 3}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(237,28,36,.5)}80%,100%{box-shadow:0 0 0 14px rgba(237,28,36,0)}}
.micro{display:block;margin-top:8px;font-size:.8rem;color:var(--g)}
.more{font-weight:700;color:var(--dk);text-decoration:none}.more:hover{color:var(--red)}
.tbd{display:inline-block;background:#fef3c7;border:1px dashed #b45309;border-radius:4px;padding:0 6px;color:#111;font-size:.75em;font-style:normal;font-weight:700;line-height:1.5;white-space:nowrap}
/* header */
header{position:sticky;top:0;z-index:20;background:var(--k);border-bottom:1px solid var(--line);color:#fff;transition:box-shadow .2s}
header.scrolled{box-shadow:0 6px 20px rgba(0,0,0,.5)}
header .wrap{display:flex;align-items:center;gap:14px;height:var(--hdr)}
.brand{display:flex;align-items:center;gap:12px;margin-right:auto;text-decoration:none;color:#fff}
.brand img{height:64px;width:auto;display:block}
.wm{display:grid;line-height:1.15}
.wm b{font-size:1.1rem;font-weight:800;letter-spacing:-.01em}
.wm small{font-size:.66rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--g)}
#nav ul{list-style:none;margin:0;padding:0;display:flex;gap:24px}
#nav a{position:relative;display:block;padding:8px 0;font-size:.92rem;font-weight:600;color:var(--g);text-decoration:none}
#nav a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .18s}
#nav a:hover,#nav a[aria-current]{color:#fff}#nav a:hover::after,#nav a[aria-current]::after{transform:scaleX(1)}
header .btn{gap:0;min-height:44px;padding:8px 18px;font-size:.92rem;white-space:nowrap}
.menu{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 12px;background:transparent;border:1px solid var(--line);border-radius:8px;color:#fff;font:inherit;font-size:.85rem;font-weight:600;cursor:pointer}
.menu i,.menu i::before,.menu i::after{display:block;width:16px;height:2px;background:#fff;position:relative;transition:transform .2s}
.menu i::before,.menu i::after{content:"";position:absolute;left:0}.menu i::before{top:-5px}.menu i::after{top:5px}
.menu[aria-expanded=true] i{background:transparent}.menu[aria-expanded=true] i::before{transform:translateY(5px) rotate(45deg)}.menu[aria-expanded=true] i::after{transform:translateY(-5px) rotate(-45deg)}
#nav{margin-right:6px}
/* r7 menu panel: desktop = compact dropdown under the Menu button; phone = full-width sheet under the header */
.panel{position:absolute;right:20px;top:calc(var(--hdr) - 10px);z-index:25;width:min(520px,calc(100vw - 40px));padding:22px 26px 18px;display:grid;grid-template-columns:1fr 1fr;gap:6px 32px;background:var(--k2);border:1px solid var(--line);border-radius:12px;box-shadow:0 24px 60px rgba(0,0,0,.55);animation:panel .18s var(--ease)}
@keyframes panel{from{opacity:0;transform:translateY(-6px)}}
.panel h2{margin:0 0 6px;font-size:.68rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--g2)}
.panel ul{list-style:none;margin:0;padding:0}
.panel a{display:block;padding:8px 0;font-size:.98rem;font-weight:600;color:var(--g);text-decoration:none;border-bottom:1px solid var(--line)}
.panel li:last-child a{border-bottom:0}
.panel a:hover,.panel a[aria-current]{color:#fff}
.panel .pc{grid-column:1/-1;margin:10px 0 0;padding-top:14px;border-top:1px solid var(--line);font-size:.85rem;color:var(--g2)}
.panel .pc a{color:#fff;font-weight:700;text-decoration:none}
@media(max-width:899px){
.brand img{height:54px}.wm b{font-size:1rem}
#nav{display:none}
.panel{left:0;right:0;top:var(--hdr);width:auto;grid-template-columns:1fr;gap:14px;padding:14px 20px 18px;border-radius:0;border-width:0 0 1px}
.panel a{padding:12px 0}
}
@media(max-width:479px){.wm small{display:none}.long{display:none}header .btn{padding:8px 14px}.menu{padding:0 10px}.menu span{display:none}header .wrap{gap:10px}}
@media(max-width:359px){.wm{display:none}}
/* hero */
.hero h1::after{content:"";display:block;width:56px;height:4px;margin-top:18px;background:var(--red);transform:scaleX(0);transform-origin:left;animation:bar .5s .6s var(--ease) forwards}
@keyframes bar{to{transform:none}}
.tag{font-style:italic;font-size:.95rem;color:var(--g);letter-spacing:.02em;margin:0 0 18px}
.hero .lead{font-size:1.12rem;max-width:540px;margin-bottom:28px}
.cta{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start;margin-bottom:22px}
[data-in]{animation:rise .55s var(--ease) both}
[data-in="1"]{animation-delay:.06s}[data-in="2"]{animation-delay:.12s}[data-in="3"]{animation-delay:.18s}[data-in="4"]{animation-delay:.24s}[data-in="5"]{animation-delay:.3s}[data-in="6"]{animation-delay:.36s}
@keyframes rise{from{opacity:0;transform:translateY(14px)}}
/* strip */
.track{display:flex;width:max-content;animation:tick 40s linear infinite}
.strip:hover .track{animation-play-state:paused}
.track ul{list-style:none;margin:0;padding:0 28px 0 0;display:flex;gap:28px;font-size:1rem;font-weight:600;white-space:nowrap}
.track li{display:flex;align-items:center;gap:28px}
.track li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--red);flex:none}
@keyframes tick{to{transform:translateX(-50%)}}
/* section edges */
.paper{background:var(--paper)}.paper2{background:var(--paper2)}.k2{background:var(--k2);color:#fff}
.grid-bg>.wrap{position:relative;z-index:1}
.grid-bg::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(100deg,transparent 0 239px,rgba(237,28,36,.08) 239px 241px),repeating-linear-gradient(0deg,rgba(23,21,18,.06) 0 1px,transparent 1px 48px),repeating-linear-gradient(90deg,rgba(23,21,18,.06) 0 1px,transparent 1px 48px);-webkit-mask-image:radial-gradient(ellipse at 70% 30%,#000 30%,transparent 75%);mask-image:radial-gradient(ellipse at 70% 30%,#000 30%,transparent 75%)}
/* reveal */
/* cards */
.grid{display:grid;gap:16px}
.card{background:var(--card);border:1px solid var(--rule);border-radius:12px;padding:22px;box-shadow:0 1px 2px rgba(23,21,18,.05);transition:transform .18s,box-shadow .18s,border-color .18s}
.card:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(23,21,18,.1);border-color:#d3cbbf}
.card h3{margin:0 0 6px;font-size:1.1rem;font-weight:700}
.card p{margin:0;color:var(--mut)}
.big{font-size:1.5rem;font-weight:800;margin-bottom:6px;line-height:1.2}
.dark .card,.k2 .card{background:var(--k2);border-color:var(--line);box-shadow:none}
.dark .card:hover{border-color:#4a4a4a;box-shadow:0 12px 28px rgba(0,0,0,.4)}
.dark .card p{color:var(--g)}
.after{margin-top:32px}
/* route svg */
/* steps */
/* faq */
.faq{display:grid;gap:10px;max-width:780px}
.faq details{background:var(--k3);border:1px solid var(--line);border-radius:12px}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 20px}
.faq summary::-webkit-details-marker{display:none}
.faq summary h3{margin:0;font-size:1.05rem;font-weight:700}
.faq summary::after{content:"";flex:none;width:10px;height:10px;border-right:3px solid var(--red);border-bottom:3px solid var(--red);transform:rotate(45deg);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq details>div{padding:0 20px 18px;color:var(--g)}
.faq details[open]>div{animation:fade .16s ease-out}
@keyframes fade{from{opacity:0;transform:translateY(-4px)}}
.faq p{margin:0}
/* post cards */
.post-card{position:relative;display:flex;flex-direction:column;gap:8px;background:var(--card);border:1px solid var(--rule);border-radius:12px;padding:22px;transition:transform .18s,box-shadow .18s,border-color .18s}
.post-card:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(23,21,18,.1);border-color:#d3cbbf}
.post-card::before{content:"";position:absolute;left:-1px;top:16px;bottom:16px;width:3px;border-radius:2px;background:var(--red);transform:scaleY(0);transition:transform .2s}
.post-card:hover::before{transform:none}
.post-card h3{margin:0;font-size:1.12rem;font-weight:700;line-height:1.3}
.post-card h3 a{text-decoration:none}.post-card h3 a::after{content:"";position:absolute;inset:0}
.post-card p{margin:0;color:var(--mut);font-size:.95rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.post-card .meta{margin-top:auto;font-size:.8rem;color:var(--mut)}
.chip{align-self:flex-start;display:inline-block;padding:3px 10px;border-radius:99px;background:var(--paper2);border:1px solid var(--rule);color:var(--mut);font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.dark .chip,.a-head .chip{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);color:var(--g)}
/* apply */
.apply{background:var(--k);color:#fff;overflow:visible}
.apply .glow{position:absolute;inset:0;overflow:hidden;pointer-events:none;background:radial-gradient(60% 50% at 15% 0%,rgba(152,26,29,.45),transparent 70%)}
.apply .wrap{z-index:1}
.apply h2.hd{font-size:clamp(2.2rem,7vw,3.4rem);margin-bottom:18px}
.apply .lead{margin-bottom:20px;max-width:420px}
.apply .grid{gap:32px}
.formcard{background:#fff;color:var(--ink);border-radius:12px;padding:26px 22px}
.opener{display:none}
.js .apply .formcard{display:none}.js .opener{display:block}
.opener .btn{width:100%;min-height:58px;font-size:1.1rem}
.opener p{margin:12px 0 0;color:var(--g);font-size:.9rem;text-align:center}
form{display:grid;gap:16px}
fieldset{border:0;margin:0;padding:0;display:grid;gap:16px;min-width:0}
label{display:grid;gap:6px;font-weight:600;font-size:.95rem}
input,select,textarea{font:inherit;font-weight:400;min-height:50px;padding:13px 14px;border:1.5px solid #9b958d;border-radius:8px;width:100%;background:#fff;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:3px solid var(--red);outline-offset:0;border-color:var(--red)}
.check{grid-template-columns:22px 1fr;align-items:start;gap:12px;font-weight:400;font-size:.9rem;color:var(--mut)}
.check input{min-height:0;width:22px;height:22px;accent-color:var(--btn);padding:0}
form .btn{width:100%;min-height:56px;font-size:1.05rem}
.nav2,.next{display:none}
form.stepped .next{display:flex}form.stepped .nav2{display:flex;gap:10px}form.stepped .nav2 .btn{width:auto;flex:1}form.stepped .nav2 .ghost{flex:0 0 auto}
form.stepped .solo{display:none}
#msg{font-weight:700;color:var(--btn)}#msg:empty{display:none}
.legal{margin:16px 0 0;font-size:.85rem;color:var(--g2)}
/* dialog */
dialog{padding:0;border:1px solid rgba(255,255,255,.22);border-radius:12px;width:calc(100% - 32px);max-width:560px;max-height:92vh;background:#fff;color:var(--ink);overflow:auto;box-shadow:0 24px 60px rgba(0,0,0,.6),0 0 0 1px rgba(0,0,0,.4)}
dialog::backdrop{background:rgba(10,8,8,.78);backdrop-filter:blur(2px)}
dialog[open]{animation:pop .22s ease-out}
@keyframes pop{from{opacity:0;transform:translateY(16px)}}
.dh{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:12px;height:60px;padding:0 8px 0 18px;background:#fff;color:var(--ink);border-top:4px solid var(--red);border-bottom:1px solid var(--rule)}
.dh img{height:36px;width:auto}.dh strong{margin-right:auto;font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--mut)}
.x{width:44px;height:44px;border:0;background:transparent;color:var(--ink);font-size:1.6rem;line-height:1;cursor:pointer;border-radius:8px}.x:hover{background:var(--paper2)}
.db{padding:24px}
.prog{height:6px;background:#ece7df;border-radius:3px;overflow:hidden}
.prog i{display:block;height:100%;width:50%;background:var(--red);transition:width .3s var(--ease)}
.plabel{margin:8px 0 18px;font-size:.76rem;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--dk)}
.db h2{font-size:1.6rem;margin-bottom:6px}.db .sub{margin:0 0 20px;color:var(--mut)}
.step-in{animation:slide .16s ease-out}
@keyframes slide{from{opacity:0;transform:translateX(12px)}}
.df{margin:18px 0 0;font-size:.82rem;color:var(--mut)}
.done-p{display:none;text-align:center}
dialog.done .work{display:none}dialog.done .done-p{display:block}
.tick{width:64px;height:64px;margin:4px auto 14px}
.tick circle{fill:var(--btn)}.tick path{fill:none;stroke:#fff;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:40;stroke-dashoffset:40}
dialog.done .tick path{animation:draw .4s .1s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.mini{list-style:none;padding:0;margin:18px auto;max-width:300px;text-align:left;display:grid;gap:8px}
.mini li{display:flex;gap:10px;align-items:center;font-weight:600;color:var(--mut)}
.mini li::before{content:"";width:18px;height:18px;border:2px solid #bbb;border-radius:50%;flex:none}
.mini li.ok{color:var(--ink)}.mini li.ok::before{background:var(--btn);border-color:var(--btn);box-shadow:inset 0 0 0 3px #fff}
/* footer */
footer{background:var(--k);color:var(--g);border-top:1px solid var(--line);padding:48px 0 110px;font-size:.92rem;content-visibility:auto;contain-intrinsic-size:auto 420px}
footer a{color:var(--g);text-decoration-color:rgba(255,255,255,.35);text-underline-offset:3px}footer a:hover{color:#fff}
.fb1{display:grid;gap:28px}
.fbrand{display:flex;align-items:center;gap:14px;color:#fff;text-decoration:none}
.fbrand img{height:64px;width:auto}
.fcol h3{margin:0 0 10px;font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--g2)}
.fcol ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;line-height:1.4}
footer hr{border:0;border-top:1px solid var(--line);margin:40px 0}
.fb2{text-align:center;display:grid;gap:8px;justify-items:center}
.fb2 p{margin:0}.fb2 strong{color:#fff}
.fb2 .copy{font-size:.78rem;color:var(--g2)}
/* mobile bar */
.bar{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;align-items:center;gap:16px;padding:10px 20px calc(10px + env(safe-area-inset-bottom));background:rgba(11,11,11,.96);border-top:1px solid var(--line);color:var(--g);font-size:.78rem;transition:transform .22s var(--ease)}
.bar span{flex:none;line-height:1.3}.bar span b{display:block;color:#fff}.bar .btn{flex:1;min-height:50px}
.bar.off{transform:translateY(110%)}
/* blog */
.b-hero{padding:48px 0 calc(var(--sp) + 8px)}
.b-hero h1{font-size:clamp(2rem,6vw,2.6rem);font-weight:800;letter-spacing:-.02em;line-height:1.1;margin:0 0 12px}
.b-hero p{color:var(--g);max-width:620px;margin:0}
.a-head{padding:36px 0 calc(var(--sp) + 8px)}
.a-head .wrap{max-width:800px}
.crumbs ol{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-wrap:wrap;gap:6px;font-size:.8rem;color:var(--g2)}
.crumbs li+li::before{content:"\203A";margin-right:6px}
.crumbs a{color:var(--g2);text-underline-offset:3px}.crumbs a:hover{color:#fff}
.crumbs [aria-current]{color:#fff}
.a-head h1{font-size:clamp(1.9rem,5.4vw,2.7rem);font-weight:800;letter-spacing:-.02em;line-height:1.12;margin:14px 0 14px}
.dek{font-size:1.15rem;color:var(--g);margin:0 0 22px;max-width:680px}
.byline{display:flex;align-items:center;gap:12px;margin:0;font-size:.85rem;color:var(--g2);line-height:1.45}
.byline img{height:40px;width:auto}.byline b{color:#fff}
.a-body{max-width:800px;padding-top:0;padding-bottom:56px}
.toc{background:var(--card);border:1px solid var(--rule);border-radius:12px;padding:18px 22px;margin:0 0 32px}
.toc h2{margin:0 0 8px;font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.toc ol{margin:0;padding-left:1.2em;display:grid;gap:4px}.toc a{color:var(--ink);text-underline-offset:3px}.toc a:hover{color:var(--dk)}
.prose{font-size:1.0625rem;line-height:1.65;max-width:720px}
.prose p{margin:0 0 1.2em}
.prose h2{position:relative;font-size:1.5rem;font-weight:800;letter-spacing:-.01em;line-height:1.25;margin:2.2em 0 .6em;scroll-margin-top:calc(var(--hdr) + 16px)}
.prose h2::before{content:"";display:block;width:28px;height:3px;background:var(--red);margin-bottom:12px}
.prose h3{font-size:1.2rem;line-height:1.3;margin:1.8em 0 .5em}
.prose ul,.prose ol{padding-left:1.3em;margin:0 0 1.2em}.prose li{margin:0 0 .4em}.prose li::marker{color:var(--red)}
.prose a{color:var(--dk);text-decoration-thickness:1.5px;text-underline-offset:3px}.prose a:hover{color:var(--red)}
.prose strong{font-weight:700;color:var(--ink)}
.prose blockquote{margin:0 0 1.2em;background:var(--paper2);border-left:3px solid var(--red);border-radius:0 8px 8px 0;padding:14px 18px}
.prose hr{border:0;border-top:1px solid var(--rule);margin:2.5em 0}
.prose table{width:100%;border-collapse:collapse;font-size:.95rem;margin:0 0 1.2em;display:block;overflow-x:auto}
.prose th,.prose td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--rule)}.prose tr:nth-child(even) td{background:var(--paper2)}
.note,.prose aside{background:var(--paper2);border:1px solid var(--rule);border-radius:8px;padding:18px;margin:0 0 1.4em}
.note::before,.prose aside::before{content:attr(data-label);display:block;margin-bottom:6px;font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--dk)}
.note p:last-child,.prose aside p:last-child{margin:0}
.sources{margin:40px 0 0;padding-top:24px;border-top:1px solid var(--rule);font-size:.9rem;color:var(--mut)}
.sources h2{font-size:1.1rem;margin:0 0 10px}
.sources ol{margin:0;padding-left:1.3em;display:grid;gap:6px}.sources a{color:var(--dk);text-underline-offset:3px;word-break:break-word}
.cta-card{position:relative;overflow:hidden;display:grid;gap:18px;align-items:center;margin:40px 0 0;background:var(--k);color:#fff;border-radius:12px;padding:28px}
.cta-card::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.3;background:repeating-linear-gradient(0deg,rgba(255,255,255,.06) 0 1px,transparent 1px 48px),repeating-linear-gradient(90deg,rgba(255,255,255,.06) 0 1px,transparent 1px 48px)}
.cta-card>*{position:relative;z-index:1}
.cta-card h2{margin:0 0 6px;font-size:1.4rem;font-weight:800;line-height:1.2}
.cta-card p{margin:0;color:var(--g)}
.cta-card .micro{text-align:center}
.related{content-visibility:auto;contain-intrinsic-size:auto 500px}
.related h2{font-size:1.6rem;font-weight:800;margin:0 0 20px}
@media(max-width:359px){.wrap{padding:0 16px}}
@media(min-width:720px){
:root{--sp:88px}
.track ul{font-size:1.1rem}
.grid.c4{grid-template-columns:repeat(4,1fr)}.grid.c3{grid-template-columns:repeat(3,1fr)}.grid.c2{grid-template-columns:repeat(2,1fr)}
.apply .grid{grid-template-columns:1fr 1.1fr;align-items:start}
.formcard{padding:32px;box-shadow:0 20px 50px rgba(0,0,0,.5)}
.db{padding:32px}
.bar{display:none}footer{padding-bottom:48px}
.fb1{grid-template-columns:1.3fr 1fr 1.4fr;align-items:start}
.prose{font-size:1.125rem}
.cta-card{grid-template-columns:1fr auto;padding:32px}
}
@media(max-width:719px){
dialog{width:100%;max-width:none;height:calc(100vh - 24px);height:calc(100dvh - 24px);max-height:none;border-radius:16px 16px 0 0;margin:24px 0 0;inset:0;border-bottom:0}
dialog[open]{animation:sheet .26s ease-out}
@keyframes sheet{from{transform:translateY(100%)}}
.db{padding:20px 20px 0}
.nav2{position:sticky;bottom:0;background:#fff;padding:10px 0 calc(10px + env(safe-area-inset-bottom))}form.stepped .next{position:sticky;bottom:calc(10px + env(safe-area-inset-bottom));box-shadow:0 0 0 10px #fff}
}

/* r7 route indicator (desktop home): one dot per section, fixed in the right margin, recolours for light sections, hides at the footer */
.route{display:none}
@media(min-width:1100px){
.route{display:block;position:fixed;right:18px;top:50%;transform:translateY(-50%);z-index:15;transition:opacity .25s}
.route.off{opacity:0;pointer-events:none}
.route ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.route a{position:relative;display:grid;place-items:center;width:24px;height:24px;color:rgba(255,255,255,.55);transition:color .3s}
.route a::after{content:"";width:8px;height:8px;border-radius:50%;border:2px solid currentColor;transition:transform .2s,background .2s,border-color .2s}
.route a:hover::after{transform:scale(1.25)}
.route a[aria-current]{color:var(--red)}.route a[aria-current]::after{background:var(--red);transform:scale(1.25)}
.route.lt a{color:rgba(23,21,18,.35)}.route.lt a[aria-current]{color:var(--red)}
.route a span{position:absolute;right:30px;top:50%;transform:translateY(-50%);white-space:nowrap;padding:5px 9px;border-radius:5px;background:var(--k);color:#fff;font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;opacity:0;pointer-events:none;transition:opacity .15s}
.route a:hover span,.route a:focus-visible span{opacity:1}
}
@media(prefers-reduced-motion:reduce){*,::before,::after{transition:none!important;animation:none!important}.hero h1::after{transform:none}.rt{stroke-dashoffset:0}.track{width:auto}.track ul[aria-hidden]{display:none}.track ul{flex-wrap:wrap;white-space:normal;justify-content:center;row-gap:8px}}
/* v3.1: real hiring details, Indeed apply, open interviews */
.big small{font-size:.55em;font-weight:700;margin-left:2px;opacity:.75}
.req{margin:0;padding:0;list-style:none}.req li{position:relative;padding-left:22px;margin:0 0 8px;line-height:1.45}
.req li::before{content:"";position:absolute;left:2px;top:.45em;width:10px;height:10px;border-radius:50%;border:2px solid var(--red)}
.iv{margin:22px 0 0;max-width:520px;padding:12px 16px;border-left:3px solid var(--red);background:rgba(255,255,255,.06);border-radius:0 8px 8px 0;font-size:.95rem;line-height:1.5;color:var(--g)}
.iv b{display:block;color:#fff;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:2px}
.iv.gone{display:none}
.applycard{background:var(--k2);border:1px solid var(--line);border-radius:12px;padding:26px 22px}
.applycard>.btn{width:100%;min-height:58px;font-size:1.1rem}
.applycard .sm{margin:10px 0 22px;font-size:.85rem;color:var(--g2);text-align:center}
.applycard h3{margin:0 0 8px;font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--g2)}
.applycard p{margin:0 0 10px;color:var(--g);line-height:1.5}
.applycard a{color:#fff;text-underline-offset:4px}
.applycard .big-l{display:inline-block;margin-top:4px;font-size:1.6rem;font-weight:800;text-decoration:none}
.applycard .iv{margin-top:18px}
@media (min-width:800px){.applycard{padding:32px}}
/* ===== r4: hero photo, snapped blocks, focus state, pop ===== */
:root{--bar:70px}
/* type scale */
.hero h1{font-size:clamp(2.75rem,8.4vw,5rem);letter-spacing:-.02em;margin-bottom:14px}
h2.h2{font-size:clamp(2rem,5vw,3rem)}
h2.h2::after{content:"";display:block;width:56px;height:4px;margin-top:14px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .5s .15s var(--ease)}
.is-focus h2.h2::after{transform:none}
.big{font-size:clamp(1.9rem,3vw,2.5rem);font-weight:900;letter-spacing:-.02em;line-height:1}
.big b{font-weight:inherit;font-variant-numeric:tabular-nums}
/* hero */
.hero{position:relative;overflow:clip;padding:0;display:grid;grid-template-rows:1fr auto;isolation:isolate}
.hero>.wrap{display:grid;gap:0;align-self:center;padding-bottom:44px}
.hmedia{position:relative;z-index:0;margin:0 -20px;height:min(58svh,460px)}
.hmedia::before{content:"";position:absolute;inset:-10% -10% 0;z-index:-1;background:radial-gradient(60% 55% at 62% 62%,rgba(152,26,29,.38),transparent 70%);pointer-events:none}
.hmedia img{display:block;width:100%;height:100%;object-fit:cover;object-position:45% 62%;-webkit-mask-image:linear-gradient(#000 55%,transparent 98%);mask-image:linear-gradient(#000 55%,transparent 98%)}
.streak{position:absolute;left:-8%;right:-8%;bottom:14%;height:2px;background:linear-gradient(90deg,transparent,var(--red) 35%,#fff 50%,var(--red) 65%,transparent);box-shadow:0 0 16px 2px rgba(237,28,36,.55);transform:rotate(-7deg);opacity:.85;pointer-events:none}
.hcopy{position:relative;z-index:1;margin-top:-110px}
.hcopy h1,.hcopy .lead{text-shadow:0 2px 14px rgba(0,0,0,.65)}
.hero .lead{font-size:1.08rem;max-width:520px;margin-bottom:22px}
.pay{display:flex;align-items:center;gap:14px;margin:0 0 24px}
.pay b{font-weight:900;font-style:italic;font-size:clamp(2.4rem,6.5vw,3.4rem);line-height:1;letter-spacing:-.02em;color:#fff;font-variant-numeric:tabular-nums}
.pay b small{font-size:.42em;font-style:normal;font-weight:800;color:var(--red);margin-left:2px}
.pay span{padding-left:14px;border-left:1px solid rgba(255,255,255,.22);font-size:.78rem;line-height:1.4;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--g2)}
.apply .pay{margin:4px 0 0}
.strip{background:var(--k2);color:#fff;overflow:hidden;padding:14px 0;border-top:1px solid var(--line)}
/* CTA glow */
.btn.pulse{box-shadow:0 0 0 1px rgba(237,28,36,.35),0 10px 30px -6px rgba(237,28,36,.55);transition:background .15s,transform .15s,box-shadow .25s}
.btn.pulse:hover,.btn.pulse:focus-visible{box-shadow:0 0 0 1px rgba(237,28,36,.6),0 14px 38px -6px rgba(237,28,36,.75)}
/* r6 sheet transitions (home, desktop + fine pointer). Native scrolling only: nothing hijacks the wheel.
   Two scroll-linked numbers drive everything: --r6-in (0 -> 1 as the block's content enters) and --r6-out (0 -> 1 as it leaves).
   Chrome/Edge/Safari 26: scroll-driven animations tween them. Other browsers: site.js sets them inline on scroll. */
@media(max-width:719px){html:has(#top){scroll-padding-bottom:calc(var(--bar) + env(safe-area-inset-bottom))}}
@property --r6-in{syntax:"<number>";inherits:false;initial-value:1}
@property --r6-out{syntax:"<number>";inherits:false;initial-value:0}
@media(min-width:900px) and (pointer:fine) and (prefers-reduced-motion:no-preference){
#top>section{overflow:clip}
#top>section::before{content:"";position:absolute;left:0;right:0;top:0;height:36px;pointer-events:none;background:linear-gradient(rgba(0,0,0,.2),transparent)}
#top>.hero>.wrap,#top>section>.wrap{--r6-out:0;will-change:transform,opacity;transform-origin:50% 0;
  opacity:calc(1 - .6*var(--r6-out));
  transform:translateY(calc(var(--r6-out)*-36px)) scale(calc(1 - .05*var(--r6-out)))}
.r6-native #top>section>.wrap{animation:r6-out linear both;animation-timeline:view();animation-range:exit 55vh exit 92vh}
.r6-native #top>.hero>.wrap{animation:r6-out linear both;animation-timeline:view();animation-range:exit 55vh exit 92vh}
}
@keyframes r6-in{from{--r6-in:0}to{--r6-in:1}}
@keyframes r6-out{from{--r6-out:0}to{--r6-out:1}}
/* focus state: section headline underline + one-shot card reveal */
.js #top .rv{opacity:0;transform:translateY(14px);transition:opacity .45s,transform .5s var(--ease);transition-delay:calc(var(--i,0)*80ms + .1s)}
.js #top .is-focus .rv,.js #top .was-focus .rv{opacity:1;transform:none}
.no-io #top .rv{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.js #top .rv{opacity:1;transform:none}h2.h2::after{transform:none}}
/* desktop hero: photo bleeds off the right half, copy on the left */
@media(min-width:720px){
.hero>.wrap{display:block;width:100%;padding-top:48px;padding-bottom:48px;position:static}
.hmedia{position:absolute;z-index:0;top:0;right:0;bottom:var(--tick,58px);width:min(52vw,780px);height:auto;margin:0}
.hmedia::before{inset:0}
.hmedia picture{display:block;height:100%}
.hmedia img{object-position:56% 62%;-webkit-mask-image:linear-gradient(#000 70%,transparent 100%),linear-gradient(90deg,transparent,#000 46%);-webkit-mask-composite:source-in;mask-image:linear-gradient(#000 70%,transparent 100%),linear-gradient(90deg,transparent,#000 46%);mask-composite:intersect}
.streak{bottom:9%;left:4%;right:-6%}
.hcopy{margin-top:0;max-width:720px}
.hero h1{font-size:clamp(2.75rem,4.6vw,3.6rem)}
.hcopy h1,.hcopy .lead{text-shadow:0 2px 18px rgba(0,0,0,.7)}
.hero .lead{font-size:1.12rem;max-width:520px}
}

/* ---- round 5: hiring steps art, driving van, section landing ---- */
.r5-steps{list-style:none;margin:0;padding:0;display:grid;gap:14px;counter-reset:s;position:relative}
.r5-steps::before{content:"";position:absolute;left:52px;top:40px;bottom:40px;border-left:2px dashed var(--rule);z-index:0}
.r5-step{counter-increment:s;position:relative;z-index:1}
.r5-st{display:flex;gap:16px;align-items:center;height:100%;background:var(--card);border:1px solid var(--rule);border-radius:14px;padding:14px 18px 14px 14px;text-decoration:none;color:inherit;position:relative;transition:transform .18s,box-shadow .18s}
.r5-st::before{content:counter(s);position:absolute;left:10px;top:10px;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--k);color:#fff;font-weight:800;font-size:.95rem;box-shadow:inset 0 0 0 3px var(--k),inset 0 0 0 5px var(--red);z-index:1}
.r5-art{flex:none;width:104px;height:auto;display:block;border-radius:10px}
.r5-st b{display:block;font-weight:700;font-size:1.05rem}
.r5-st span{color:var(--mut);font-size:.95rem;line-height:1.45}
a.r5-st:hover,a.r5-st:focus-visible{transform:translateY(-3px);box-shadow:0 12px 28px rgba(23,21,18,.1)}
a.r5-st b::after{content:" \2192";color:var(--red);display:inline-block;transition:transform .18s}
a.r5-st:hover b::after{transform:translateX(4px)}
@media(min-width:720px){.r5-steps{grid-template-columns:1fr 1fr}.r5-steps::before{display:none}}
@media(min-width:900px){
.r5-steps{grid-template-columns:repeat(4,1fr);gap:16px}
.r5-steps::before{display:block;left:8%;right:8%;top:42%;bottom:auto;border-left:0;border-top:2px dashed var(--g2)}
.r5-st{flex-direction:column;align-items:stretch;padding:12px 18px 20px}
.r5-art{width:100%;max-width:240px;margin:0 auto}
.r5-st::before{left:12px;top:12px}
}
.r5-van{display:block;width:100%;max-width:460px;height:auto;margin-top:24px}
@media(min-width:800px){.apply .r5-van{max-width:420px}}
.wm small.vo{color:var(--red);margin-top:1px}
/* hero: its photo is positioned against .hero, so a transform on .hero>.wrap would clip it; the next sheet rising over it carries the transition */
@media(min-width:900px) and (pointer:fine) and (prefers-reduced-motion:no-preference){#top>.hero>.wrap{will-change:auto;transform:none;opacity:1;animation:none}}
/* ============================================================
   Level Logistics: brand scrollbar
   Append to assets/site.css (after the :root block; it only uses
   its own tokens, so order does not otherwise matter).

   Design
   - Page scrollbar: dark track (#161616), dark-grey rounded thumb
     (#3A3A3A) that goes dark red on hover (#981A1D) and brand red
     on press (#ED1C24). 12px wide on desktop, thumb floats inside
     the track with a 3px inset so it reads as a pill.
   - Inner panels (apply dialog, wide tables in articles): same
     thumb, 8px wide, with a light track because they sit on white.

   Why two paths
   - `::-webkit-scrollbar` pseudo-elements: Safari and every
     Chromium (also 121+). This path is the only one that can do a
     rounded thumb, an inset, and a hover/active colour.
   - `scrollbar-width` / `scrollbar-color`: the standard, supported by
     Firefox and Chromium 121+. In Chromium, declaring scrollbar-color
     on an element SWITCHES OFF the ::-webkit-scrollbar styling on it
     (the standard wins per spec), and the standard version has no
     hover state and no radius. So we only ship the standard
     properties where the webkit pseudo-element does not exist:
     `@supports not selector(::-webkit-scrollbar)`, which today is
     Firefox. Chromium keeps the richer webkit path, Firefox gets the
     same colours without hover (Firefox cannot do thumb hover in CSS;
     that is the accepted trade-off, not a bug).

   Platform notes
   - Scoped to `(hover:hover) and (pointer:fine)`: phones and tablets
     keep their native thin overlay scrollbars. Styling the webkit
     pseudo-element on iOS/Android would remove the overlay look.
   - macOS "show scrollbars: automatically" (overlay): styling
     ::-webkit-scrollbar makes Safari/Chrome draw a classic, always
     visible bar instead of the overlay. That is inherent to custom
     scrollbars on macOS. Trackpad users with overlay bars will see the
     12px bar; it does not break anything, it just takes a gutter like
     on Windows.
   - No layout shift: the width is a fixed 12px, never changes on
     hover (we recolour only), and `scrollbar-gutter: stable` is set
     on the root so the gutter is reserved even on short pages
     (blog index on a tall monitor) and when the dialog opens.
   - Windows: replaces the default light-grey bar with the brand one.
   - `color-scheme` is left alone so form controls do not change.
   ============================================================ */

@media (hover: hover) and (pointer: fine) {
  :root {
    --sb-track: #161616;
    --sb-thumb: #3A3A3A;
    --sb-thumb-hover: #981A1D;
    --sb-thumb-active: #ED1C24;
    --sb-size: 12px;
    /* light-surface panels (dialog, article tables) */
    --sb-track-lt: #EEE9E1;
    --sb-thumb-lt: #A9A6A1;
    --sb-size-sm: 8px;
    scrollbar-gutter: stable;
  }

  /* ---- Path 1: WebKit/Blink (Safari, Chrome, Edge, Opera, Brave) ---- */
  ::-webkit-scrollbar {
    width: var(--sb-size);
    height: var(--sb-size);
    background: var(--sb-track);
  }
  ::-webkit-scrollbar-track {
    background: var(--sb-track);
  }
  ::-webkit-scrollbar-thumb {
    background-color: var(--sb-thumb);
    border-radius: 999px;
    /* 3px transparent border + padding-box clip = pill floating inside the track */
    border: 3px solid transparent;
    background-clip: padding-box;
    min-height: 44px; /* keeps the grab target comfortable on long pages */
  }
  ::-webkit-scrollbar-thumb:hover {
    background-color: var(--sb-thumb-hover);
  }
  ::-webkit-scrollbar-thumb:active {
    background-color: var(--sb-thumb-active);
  }
  ::-webkit-scrollbar-corner {
    background: var(--sb-track);
  }
  ::-webkit-scrollbar-button {
    width: 0;
    height: 0;
    display: none; /* no arrow buttons on Windows */
  }

  /* Inner scrolling panels: thinner, light track (they sit on white/paper) */
  dialog::-webkit-scrollbar,
  .prose table::-webkit-scrollbar {
    width: var(--sb-size-sm);
    height: var(--sb-size-sm);
    background: var(--sb-track-lt);
  }
  dialog::-webkit-scrollbar-track,
  .prose table::-webkit-scrollbar-track {
    background: var(--sb-track-lt);
  }
  dialog::-webkit-scrollbar-thumb,
  .prose table::-webkit-scrollbar-thumb {
    background-color: var(--sb-thumb-lt);
    border-width: 2px;
    min-height: 32px;
  }
  dialog::-webkit-scrollbar-thumb:hover,
  .prose table::-webkit-scrollbar-thumb:hover {
    background-color: var(--sb-thumb-hover);
  }
  dialog::-webkit-scrollbar-thumb:active,
  .prose table::-webkit-scrollbar-thumb:active {
    background-color: var(--sb-thumb-active);
  }

  /* ---- Path 2: standard properties, only where Path 1 does not exist (Firefox) ----
     Firefox cannot style thumb hover or radius; colours match the design. */
  @supports not selector(::-webkit-scrollbar) {
    :root {
      scrollbar-width: auto;            /* "thin" is too slight on a dark page */
      scrollbar-color: var(--sb-thumb) var(--sb-track);
    }
    dialog,
    .prose table {
      scrollbar-width: thin;
      scrollbar-color: var(--sb-thumb-lt) var(--sb-track-lt);
    }
  }
}

/* Touch / coarse pointers (phones, tablets, hybrids in touch mode): nothing is
   declared, so the OS keeps its native thin overlay scrollbar. */

/* r8 polish 1: blog index, cards straddle the dark/light edge instead of a 190px dead zone */
.b-hero{padding-bottom:calc(var(--sp) + 24px)}
.b-hero+section{padding-top:0}
.b-hero+section>.wrap{margin-top:-64px}
/* r8 polish 2: reduced motion shows the strip statically, so hide the duplicated second half of the list */
@media(prefers-reduced-motion:reduce){.track ul li:nth-child(n+7){display:none}}
/* r8 polish 3: footer tagline as the italic strapline (matches .tag in the hero) instead of letter-spaced caps that wrap "DAY." onto its own line */
.fbrand .wm small{text-transform:none;letter-spacing:0;font-size:.82rem;font-style:italic;font-weight:500;color:var(--g)}

/* r8 tetris: each section's content blocks slide in from alternating sides and lock into place (one-shot, IntersectionObserver-triggered, transform/opacity only).
   Odd sections (why, process, blog) enter from the left, even sections (job, faq, apply) from the right. Replaces the r6 entry rise and the .rv card rise; the r6 exit settle stays. */
@supports(overflow-x:clip){#top>section{overflow-x:clip}}
.js #top>section>.wrap>*{opacity:0}
.js #top>section.tz>.wrap>*{--tz-x:min(14vw,110px);animation:tz-l .6s cubic-bezier(.22,.8,.2,1) both}
.js #top>section.tz:nth-of-type(even)>.wrap>*{animation-name:tz-r}
.js #top>section.tz>.wrap>:nth-child(2){animation-delay:70ms}
.js #top>section.tz>.wrap>:nth-child(3){animation-delay:140ms}
.js #top>section.tz>.wrap>:nth-child(n+4){animation-delay:210ms}
.js #top>section.tz.tz-now>.wrap>*{animation-duration:0s;animation-delay:0s}
@keyframes tz-l{0%{opacity:0;transform:translateX(calc(-1*var(--tz-x)))}70%{opacity:1;transform:translateX(0);animation-timing-function:ease-out}82%{opacity:1;transform:translate(0,3px);animation-timing-function:ease-in}100%{opacity:1;transform:none}}
@keyframes tz-r{0%{opacity:0;transform:translateX(var(--tz-x))}70%{opacity:1;transform:translateX(0);animation-timing-function:ease-out}82%{opacity:1;transform:translate(0,3px);animation-timing-function:ease-in}100%{opacity:1;transform:none}}
.js #top .rv{opacity:1;transform:none;transition:none}
.no-io #top>section>.wrap>*{opacity:1}
@media(prefers-reduced-motion:reduce){.js #top>section>.wrap>*{opacity:1;animation:none!important}}

/* ============================================================
   r12 polish: append after site.css (after the r8 tetris block).
   Goal: fewer template tells, more concrete detail, same hooks.
   Only uses tokens already defined in site.css. No new fonts, no images.
   ============================================================ */

/* 1. Kill the stock "shine sweep" on buttons: it is the most generic SaaS tell on the page. Hover still brightens. */
.btn::after{display:none}

/* 2. Hero: the lead paragraph is now two sentences of fact, let it breathe a little wider on desktop. */
@media(min-width:720px){.hero .lead{max-width:560px}}

/* 3. Open-interviews notice styled as a walk-in ticket instead of a grey paragraph.
      Markup and the data-c / data-until hooks are untouched; this is all on .iv. */
.iv{position:relative;max-width:540px;padding:14px 18px 14px 20px;border:1px solid rgba(255,255,255,.14);border-left:3px solid var(--red);border-radius:0 10px 10px 0;background:rgba(255,255,255,.05)}
.iv b{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.iv b::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--red);box-shadow:0 0 0 0 rgba(237,28,36,.6);animation:iv-dot 2.2s ease-out infinite}
@keyframes iv-dot{70%,100%{box-shadow:0 0 0 7px rgba(237,28,36,0)}}
.iv.iv-today::before{content:"Today";position:absolute;right:12px;top:12px;padding:3px 8px;border-radius:4px;background:var(--red);color:#fff;font-size:.66rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.iv.iv-today{padding-right:84px}
.applycard .iv{max-width:none}

/* 4. Pay ledger (replaces the four equal stat cards in #why).
      Left: the hourly figure. Right: a dated timeline, day 1 / day 91 / every day. */
.ledger{display:grid;gap:18px}
.lg-pay{background:var(--k);color:#fff;border-radius:14px;padding:26px 24px 24px;position:relative;overflow:hidden}
.lg-pay::before{content:"";position:absolute;inset:auto -40px -60px auto;width:220px;height:220px;border-radius:50%;background:radial-gradient(closest-side,rgba(152,26,29,.55),transparent);pointer-events:none}
.lg-pay .big{font-size:clamp(2.6rem,5vw,3.6rem);font-style:italic;color:#fff;margin-bottom:10px}
.lg-pay .big small{color:var(--red);opacity:1;font-style:normal}
.lg-pay h3{margin:0 0 6px;font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--g2)}
.lg-pay p{margin:0;color:var(--g);font-size:.98rem;line-height:1.5}
.lg-pay .lg-note{margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,.14);font-size:.86rem;color:var(--g2)}
.lg-pay .lg-note a{color:#fff;text-underline-offset:3px}
.lg-tl{list-style:none;margin:0;padding:0;display:grid;gap:0;background:var(--card);border:1px solid var(--rule);border-radius:14px;overflow:hidden}
.lg-tl li{display:grid;grid-template-columns:92px 1fr;gap:16px;padding:18px 20px;border-top:1px solid var(--rule);position:relative}
.lg-tl li:first-child{border-top:0}
.lg-when{font-weight:900;font-style:italic;font-size:1.05rem;letter-spacing:-.01em;line-height:1.2;color:var(--ink);padding-top:1px}
.lg-when small{display:block;font-style:normal;font-weight:700;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dk);margin-top:2px}
.lg-tl h3{margin:0 0 4px;font-size:1.05rem;font-weight:700}
.lg-tl p{margin:0;color:var(--mut);font-size:.96rem;line-height:1.5}
.lg-tl a{color:var(--dk);font-weight:600;text-underline-offset:3px}.lg-tl a:hover{color:var(--red)}
.lg-tl li::before{content:"";position:absolute;left:0;top:18px;bottom:18px;width:3px;background:var(--rule);border-radius:0 2px 2px 0}
.lg-tl li.lg-now::before{background:var(--red)}
@media(min-width:720px){
.ledger{grid-template-columns:minmax(260px,.9fr) 1.6fr;align-items:start}
.lg-tl li{grid-template-columns:108px 1fr;padding:22px 24px}
}

/* 5. "The job" cards: make the requirements card read as a quick self-check, not a bullet list. */
.req li{padding-left:28px}
.req li::before{left:0;top:.3em;width:14px;height:14px;border-width:2px;background:transparent}
.req li::after{content:"";position:absolute;left:4px;top:calc(.3em + 3px);width:6px;height:4px;border-left:2px solid var(--red);border-bottom:2px solid var(--red);transform:rotate(-45deg)}
.card .req-note{margin:14px 0 0;padding-top:12px;border-top:1px solid var(--line);font-size:.86rem;color:var(--g2)}
.card .dir{display:inline-block;margin-top:12px;font-size:.9rem;font-weight:600;color:#fff;text-underline-offset:3px}

/* 6. Blog cards on the home page: the three posts went up on the same day, so the home cards show only the read time (build.py change); keep the meta quiet. */
#blog .post-card .meta{letter-spacing:.02em}

/* 7. Section headline underline: shorter and only on light sections, so six identical red bars stop reading as a template. */
.dark h2.h2::after,.k2 h2.h2::after{display:none}
h2.h2::after{width:40px}

/* 8. Reduced motion: no interview dot pulse. */
@media(prefers-reduced-motion:reduce){.iv b::before{animation:none}}