/* PreHire Forms: an ops runbook / shared task list.
   Inter only. White, slate, and one confirming green. Square corners throughout. */

:root{
  --ink:#0f172a; --text:#334155; --mute:#64748b; --faint:#94a3b8;
  --line:#e2e8f0; --line2:#cbd5e1; --soft:#f8fafc; --soft2:#f1f5f9; --bg:#fff;
  --ok:#16a34a; --ok-ink:#15803d; --ok-bg:#f0fdf4; --ok-line:#bbf7d0;
  --rail:280px; --gut:20px;
  --f:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --tick:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='square'/%3E%3C/svg%3E");
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:72px}
body{margin:0;background:var(--bg);color:var(--text);font:400 16px/1.6 var(--f);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto;display:block}
a{color:var(--ink);text-decoration-color:var(--line2);text-underline-offset:3px}
a:hover{text-decoration-color:var(--ok)}
:focus-visible{outline:2px solid var(--ok);outline-offset:2px}
h1,h2,h3,h4{color:var(--ink);letter-spacing:-.02em;line-height:1.15;margin:0}
p{margin:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:#fff;padding:8px 12px;z-index:99}
.skip:focus{left:8px}

/* ---------- glyphs ---------- */
.box{flex:none;display:inline-block;width:18px;height:18px;border:1.5px solid var(--line2);background:#fff;position:relative}
.box--on,.is-done>.box{background:var(--ok) var(--tick) center/14px no-repeat;border-color:var(--ok)}
.tick{display:inline-block;width:18px;height:18px;background:var(--ok) var(--tick) center/14px no-repeat;vertical-align:-3px}
.tick--sm{width:14px;height:14px;background-size:11px;vertical-align:-2px}
.dot{display:inline-block;width:7px;height:7px;background:var(--ok);border-radius:50%;margin-right:8px;box-shadow:0 0 0 3px var(--ok-bg)}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:500;line-height:1;padding:5px 8px;border:1px solid var(--line);color:var(--mute);background:#fff;white-space:nowrap}
.chip--link{text-decoration:none;color:var(--text)}
.chip--link:hover{border-color:var(--ink);color:var(--ink)}
.chip--solid{background:var(--ink);border-color:var(--ink);color:#fff}
.chip--solid:hover{color:#fff}
.chip--due{border-color:var(--ink);color:var(--ink);font-weight:600}
.chip span{color:var(--faint);font-variant-numeric:tabular-nums}
.chip--solid span{color:#cbd5e1}
.kicker{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--ok-ink);letter-spacing:.01em;margin-bottom:18px}
.arrow{color:var(--faint);transition:transform .15s,color .15s}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 20px;font:600 15px/1 var(--f);text-decoration:none;border:1.5px solid var(--ink);transition:background .15s,color .15s}
.btn--dark{background:var(--ink);color:#fff}
.btn--dark:hover{background:#1e293b}
.btn--line{background:#fff;color:var(--ink)}
.btn--line:hover{background:var(--soft2)}
.btn--full{width:100%}
.textlink{font-weight:600;text-decoration:none;color:var(--ok-ink)}

/* ---------- shell ---------- */
.shell{min-height:100vh}
.rail{position:sticky;top:0;z-index:20;background:#fff;border-bottom:1px solid var(--line)}
.rail__top{display:flex;align-items:center;justify-content:space-between;gap:12px;height:60px;padding:0 var(--gut)}
.rail__nav,.rail__foot{display:none}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.brand img{width:30px;height:30px}
.brand__word{font-weight:800;font-size:16px;letter-spacing:-.03em;line-height:1.05}
.brand__word span{display:block;font-weight:500;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.menu summary{list-style:none;display:flex;align-items:center;gap:10px;height:38px;padding:0 12px;border:1px solid var(--line2);font-weight:600;font-size:14px;color:var(--ink);cursor:pointer}
.menu summary::-webkit-details-marker{display:none}
.menu__icon{width:14px;height:10px;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);position:relative}
.menu__icon::after{content:"";position:absolute;left:0;right:0;top:2px;border-top:2px solid var(--ink)}
.menu[open] .menu__icon{border-color:transparent}
.menu[open] .menu__icon::after{top:2px;border-top:2px solid var(--ink);transform:rotate(45deg)}
.menu[open] .menu__icon::before{content:"";position:absolute;left:0;right:0;top:2px;border-top:2px solid var(--ink);transform:rotate(-45deg)}
.menu__panel{position:absolute;left:0;right:0;top:60px;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 24px 40px -24px rgba(15,23,42,.25);max-height:calc(100vh - 60px);overflow:auto;padding:8px var(--gut) 20px}

.lists__head{display:flex;justify-content:space-between;font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--faint);margin:18px 10px 6px}
.lists__item{display:flex;align-items:center;gap:10px;padding:7px 10px;text-decoration:none;color:var(--text);font-size:14px;font-weight:500;line-height:1.3;border-left:2px solid transparent}
.lists__item:hover{background:var(--soft2);color:var(--ink)}
.lists__item.is-on{background:var(--soft2);color:var(--ink);font-weight:600;border-left-color:var(--ok)}
.lists__glyph{flex:none;width:22px;height:22px;display:grid;place-items:center;border:1px solid var(--line2);background:#fff}
.lists__num{font-size:10px;font-weight:700;color:var(--mute);font-variant-numeric:tabular-nums}
.is-on .lists__glyph{border-color:var(--ok);background-color:var(--ok)}
.is-on .lists__num{color:#fff}
.lists__glyph--home{background:#fff var(--tick) center/12px no-repeat;background-color:var(--ink);border-color:var(--ink)}
.lists__glyph--cal{background:linear-gradient(var(--ink),var(--ink)) top/100% 5px no-repeat,#fff}
.lists__glyph--info::before{content:"i";font:italic 700 12px/1 Georgia,serif;color:var(--ink)}
.lists__name{flex:1}
.lists__n{font-size:12px;color:var(--faint);font-variant-numeric:tabular-nums;font-weight:500}

.stage{min-width:0}
.bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px var(--gut);border-bottom:1px solid var(--line);font-size:13px;color:var(--mute);background:var(--soft)}
.bar__path{display:flex;align-items:center;gap:8px;min-width:0;white-space:nowrap;overflow:hidden}
.bar__path a{color:var(--mute);text-decoration:none}
.bar__path a:hover{color:var(--ink)}
.bar__path>span:last-child{color:var(--ink);font-weight:500;overflow:hidden;text-overflow:ellipsis}
.bar__path>span:not(:last-child){color:var(--line2)}
.bar__meta{display:none;align-items:center;white-space:nowrap}
main{padding:0 var(--gut)}

@media (min-width:1024px){
  :root{--gut:48px}
  .shell{display:grid;grid-template-columns:var(--rail) minmax(0,1fr)}
  .rail{height:100vh;border-bottom:0;border-right:1px solid var(--line);display:flex;flex-direction:column;background:var(--soft)}
  .rail__top{height:auto;padding:24px 18px 8px}
  .menu{display:none}
  .rail__nav{display:block;flex:1;overflow:auto;padding:0 8px 16px}
  .rail__foot{display:block;padding:14px 18px;border-top:1px solid var(--line);font-size:12px;color:var(--mute)}
  .rail__foot p{display:flex;gap:8px;align-items:flex-start}
  .rail__foot .tick{margin-top:2px;flex:none}
  .bar{position:sticky;top:0;z-index:10;padding:14px var(--gut);background:rgba(255,255,255,.92);backdrop-filter:blur(8px)}
  .bar__meta{display:flex}
}

/* ---------- sections ---------- */
.sect{padding:56px 0;border-top:1px solid var(--line)}
.sect__head{margin-bottom:24px}
.sect__eyebrow{font-size:12px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--mute);margin-bottom:8px}
.sect__title{font-size:clamp(26px,3.2vw,36px);font-weight:800;letter-spacing:-.035em}

/* ---------- hero ---------- */
.hero{display:grid;gap:40px;padding:40px 0 56px}
.hero__h1{font-size:clamp(40px,6.4vw,78px);font-weight:800;letter-spacing:-.05em;line-height:.98;max-width:12ch}
.hero__h1::after{content:"";display:inline-block;width:.62em;height:.62em;margin-left:.18em;vertical-align:.02em;background:var(--ok) var(--tick) center/78% no-repeat}
.hero__intro{font-size:18px;line-height:1.6;max-width:52ch;margin-top:24px}
.hero__cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
@media (min-width:640px){.how{display:grid}}
.how{display:none;list-style:none;counter-reset:how;padding:0;margin:36px 0 0;gap:0;border-top:1px solid var(--line);max-width:560px}
.how li{counter-increment:how;display:flex;gap:14px;align-items:baseline;padding:11px 0;border-bottom:1px solid var(--line);font-size:15px}
.how li::before{content:counter(how,decimal-leading-zero);font-size:12px;font-weight:700;color:var(--faint);font-variant-numeric:tabular-nums}
.how b{color:var(--ink)}

.hero__board{position:relative;padding:0 0 28px}
.hero__board::before{content:"";position:absolute;inset:-12px -20px 0;background:url("/assets/grid.svg");opacity:.9;z-index:-1;-webkit-mask:radial-gradient(closest-side,#000 55%,transparent);mask:radial-gradient(closest-side,#000 55%,transparent)}
.card{background:#fff;border:1px solid var(--line2);box-shadow:0 1px 0 var(--line),0 30px 60px -30px rgba(15,23,42,.28),0 12px 20px -16px rgba(15,23,42,.18)}
.card__head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:20px 20px 14px}
.card__eyebrow{font-size:12px;font-weight:600;color:var(--mute);letter-spacing:.02em}
.card__title{font-size:22px;font-weight:800;color:var(--ink);letter-spacing:-.03em;margin-top:2px}
.ring{--p:0;flex:none;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--ok) calc(var(--p)*1%),var(--soft2) 0)}
.ring span{width:46px;height:46px;border-radius:50%;background:#fff;display:grid;place-items:center;font-weight:800;color:var(--ink);font-size:17px;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.ring span{display:block;text-align:center;line-height:46px}
.ring small{font-size:11px;color:var(--mute);font-weight:600}
.meter{height:6px;background:var(--soft2);margin:0 20px}
.meter span{display:block;height:100%;background:var(--ok)}
.card__status{display:flex;justify-content:space-between;gap:12px;padding:10px 20px 12px;font-size:13px;color:var(--mute);border-bottom:1px solid var(--line)}
.card__status b{color:var(--ok-ink)}
.tasks{list-style:none;margin:0;padding:6px 0}
.task{display:flex;align-items:flex-start;gap:12px;padding:9px 20px}
.task .box{margin-top:2px}
.task__body{flex:1;min-width:0;display:flex;flex-direction:column}
.task__t{font-size:14.5px;font-weight:600;color:var(--ink);line-height:1.35}
.task__why{font-size:12.5px;color:var(--mute);line-height:1.4}
.task.is-done .task__t{color:var(--faint);text-decoration:line-through;text-decoration-color:var(--line2);font-weight:500}
.task.is-done .task__why{display:none}
.task .chip{display:none}
.task.is-open{background:linear-gradient(90deg,var(--soft) 0,#fff 100%)}
.task.is-due{box-shadow:inset 3px 0 0 var(--ink)}
.task.is-open .chip{display:inline-flex}
.card__foot{display:flex;justify-content:flex-start;gap:8px;padding:14px 20px;border-top:1px solid var(--line);font-size:14px;font-weight:600;text-decoration:none;color:var(--ink);background:var(--soft)}
.card__foot:hover{background:var(--soft2)}
.toast{position:absolute;right:-6px;bottom:0;display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--ink);color:#cbd5e1;font-size:13px;line-height:1.35;box-shadow:0 18px 30px -16px rgba(15,23,42,.6)}
.toast b{color:#fff}
.toast__icon{width:22px;height:22px;background:var(--ok) var(--tick) center/16px no-repeat;flex:none}

@media (min-width:640px){
  .task .chip{display:inline-flex}
  .task.is-done .chip{opacity:.55}
  .task.is-done .task__why{display:block;color:var(--faint)}
}
@media (min-width:1180px){
  .hero{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:center;gap:56px;padding:64px 0 72px;min-height:calc(100vh - 50px)}
  .hero__board{padding:0 0 24px 0}
  .toast{right:-18px}
}

/* ---------- list cards ---------- */
.lists-grid{display:grid;gap:16px}
.listcard{display:flex;flex-direction:column;text-decoration:none;color:inherit;border:1px solid var(--line);background:#fff;transition:border-color .15s,box-shadow .15s}
.listcard:hover{border-color:var(--ink);box-shadow:0 18px 30px -24px rgba(15,23,42,.45)}
.listcard:hover .arrow{color:var(--ok);transform:translateX(4px)}
.listcard__art{position:relative;aspect-ratio:3/1.1;background-color:var(--soft);background-repeat:no-repeat;background-position:center;background-size:auto 58%;border-bottom:1px solid var(--line);overflow:hidden}
.listcard__art::before{content:"";position:absolute;inset:0;background:url("/assets/grid.svg");opacity:.8}
.listcard__art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.listcard__no{position:absolute;left:12px;top:12px;font-size:12px;font-weight:700;color:var(--ink);background:#fff;border:1px solid var(--line2);padding:4px 7px;font-variant-numeric:tabular-nums}
.listcard__body{display:flex;flex-direction:column;flex:1;padding:18px 18px 16px}
.listcard__t{font-size:19px;font-weight:700;letter-spacing:-.025em}
.listcard__s{font-size:14px;color:var(--mute);margin-top:4px}
.minitasks{list-style:none;padding:0;margin:14px 0 0;border-top:1px solid var(--line)}
.minitasks li{position:relative;padding:8px 0 8px 24px;font-size:13.5px;line-height:1.35;color:var(--text);border-bottom:1px dashed var(--line)}
.minitasks li span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.minitasks li::before{content:"";position:absolute;left:0;top:9px;width:13px;height:13px;border:1.5px solid var(--line2)}
.listcard__foot{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:14px;font-size:13px;font-weight:600;color:var(--ink)}
@media (min-width:640px){.lists-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1280px){.lists-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ---------- rows (task table) ---------- */
.rows{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.row{display:grid;grid-template-columns:18px minmax(0,1fr);column-gap:14px;row-gap:6px;padding:14px 0;border-bottom:1px solid var(--line);align-items:start}
.row .box{margin-top:3px}
.row__t{font-weight:600;color:var(--ink);text-decoration:none;font-size:16px;line-height:1.35;letter-spacing:-.01em}
.row__t:hover{text-decoration:underline;text-decoration-color:var(--ok)}
.row__meta{grid-column:2;display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;font-size:12.5px;color:var(--mute);font-variant-numeric:tabular-nums}
.row:hover .box{border-color:var(--ok)}
@media (min-width:900px){
  .row{grid-template-columns:18px minmax(0,1fr) auto;align-items:center}
  .row .box{margin-top:0}
  .row__meta{grid-column:3;justify-content:flex-end;flex-wrap:nowrap}
}

.sect--split{display:grid;gap:40px}
@media (min-width:1180px){.sect--split{grid-template-columns:minmax(0,1fr) 380px;gap:56px}}
.cal{border:1px solid var(--ink);padding:22px;background:#fff;position:relative}
.cal::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:var(--ink)}
.cal__eyebrow{font-size:12px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--mute);margin-top:6px}
.cal__title{font-size:22px;font-weight:800;letter-spacing:-.03em;margin:4px 0 14px}
.cal__list{list-style:none;padding:0;margin:0}
.cal__list li{display:grid;grid-template-columns:92px 1fr;gap:4px 12px;padding:12px 0;border-top:1px solid var(--line)}
.cal__when{font-size:12px;font-weight:700;color:var(--ink);text-transform:uppercase;letter-spacing:.04em;padding-top:2px}
.cal__task{font-size:14px;line-height:1.4;color:var(--text)}
.cal__list .chip{grid-column:2;justify-self:start}
.cal__note{font-size:12px;color:var(--mute);margin:10px 0 14px}

/* ---------- anatomy ---------- */
.anatomy{display:grid;gap:32px;padding:56px 0 72px;border-top:1px solid var(--line)}
.anatomy__copy p:not(.sect__eyebrow){margin:14px 0 16px;max-width:52ch}
.anatomy__demo{background:var(--soft);border:1px solid var(--line);padding:28px 22px;align-self:center}
.step-demo{display:grid;grid-template-columns:auto auto 1fr;gap:14px;align-items:start;background:#fff;border:1px solid var(--line2);padding:18px}
.step-demo__n{font-size:13px;font-weight:800;color:var(--faint);font-variant-numeric:tabular-nums;padding-top:1px}
.step-demo__t{font-weight:700;color:var(--ink);font-size:17px;letter-spacing:-.015em;line-height:1.3}
.step-demo__why{font-size:14px;color:var(--mute);margin-top:6px;padding-left:12px;border-left:2px solid var(--ok)}
.step-demo__why b{color:var(--ok-ink)}
.anatomy__labels{display:grid;grid-template-columns:auto auto 1fr;gap:14px;margin-top:10px;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.anatomy__labels span:last-child{text-align:right}
@media (min-width:1024px){.anatomy{grid-template-columns:1fr 1fr;gap:56px;align-items:center}}

/* ---------- category ---------- */
.lhead{display:grid;gap:28px;padding:40px 0 36px;border-bottom:1px solid var(--line)}
.lhead__no{display:inline-block;background:var(--ok);color:#fff;padding:3px 7px;font-variant-numeric:tabular-nums}
.lhead .kicker{color:var(--mute)}
.lhead__h1{font-size:clamp(34px,4.8vw,60px);font-weight:800;letter-spacing:-.045em;line-height:1.02;max-width:16ch}
.lhead__desc{font-size:18px;margin-top:18px;max-width:56ch}
.lhead__stats{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:0;margin:28px 0 0;border:1px solid var(--line)}
.lhead__stats div{padding:12px 18px;border-right:1px solid var(--line)}
.lhead__stats div:last-child{border-right:0}
.lhead__stats dt{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.lhead__stats dd{margin:2px 0 0;font-size:18px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.lhead__art{position:relative;aspect-ratio:3/2;background:var(--soft) center/auto 45% no-repeat;border:1px solid var(--line);overflow:hidden}
.lhead__art::before{content:"";position:absolute;inset:0;background:url("/assets/grid.svg")}
.lhead__art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media (min-width:1100px){.lhead{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);align-items:center;gap:56px;padding:56px 0 48px}}

.lbody{display:grid;gap:40px;padding:32px 0 72px}
@media (min-width:1180px){.lbody{grid-template-columns:minmax(0,1fr) 300px;gap:56px}}
.lbar{display:flex;justify-content:space-between;align-items:center;padding-bottom:12px;border-bottom:1px solid var(--ink);font-size:14px;color:var(--mute)}
.lbar b{color:var(--ink)}
.biglist{list-style:none;padding:0;margin:0}
.bl{position:relative;display:grid;grid-template-columns:18px minmax(0,1fr);gap:14px;padding:22px 0;border-bottom:1px solid var(--line)}
.bl__n{display:none}
.bl .box{margin-top:4px}
.bl__t{font-size:19px;font-weight:700;letter-spacing:-.02em;line-height:1.3}
.bl__t a{text-decoration:none}
.bl__t a::after{content:"";position:absolute;inset:0}
.bl__d{margin-top:6px;font-size:15px;color:var(--text);max-width:70ch}
.bl__meta{display:flex;gap:14px;margin-top:10px;font-size:12.5px;color:var(--mute);font-variant-numeric:tabular-nums}
.bl .arrow{display:none}
.bl:hover{background:linear-gradient(90deg,var(--soft),#fff)}
.bl:hover .box{border-color:var(--ok)}
.bl:hover .bl__t a{text-decoration:underline;text-decoration-color:var(--ok)}
@media (min-width:760px){
  .bl{grid-template-columns:34px 18px minmax(0,1fr) 24px;padding:24px 8px 24px 0}
  .bl__n{display:block;font-size:13px;font-weight:700;color:var(--faint);padding-top:3px;font-variant-numeric:tabular-nums;text-align:right}
  .bl .arrow{display:block;align-self:center;font-size:18px}
  .bl:hover .arrow{color:var(--ok);transform:translateX(4px)}
}
.empty{display:flex;gap:14px;align-items:flex-start;padding:24px 0;color:var(--mute)}
.panel{border:1px solid var(--line);padding:18px;margin-bottom:16px;background:#fff}
.panel__h{font-size:12px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--mute);margin-bottom:10px}
.panel__list{list-style:none;padding:0;margin:0}
.panel__list a{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px solid var(--line);text-decoration:none;font-size:14px;font-weight:500;color:var(--text)}
.panel__list a:hover{color:var(--ink)}
.panel--note{background:var(--soft)}
.panel__steps{list-style:none;counter-reset:ps;padding:0;margin:0}
.panel__steps li{counter-increment:ps;display:flex;gap:10px;padding:7px 0;font-size:14px}
.panel__steps li::before{content:counter(ps);flex:none;width:20px;height:20px;display:grid;place-items:center;border:1.5px solid var(--line2);font-size:11px;font-weight:700;color:var(--mute);background:#fff}
.panel__steps--ticks li::before{content:"";background:var(--ok) var(--tick) center/13px no-repeat;border-color:var(--ok)}
.panel__steps--ticks{margin-bottom:18px}

/* ---------- article ---------- */
.doc{padding:36px 0 72px}
.doc__head{max-width:860px;padding-bottom:28px;border-bottom:1px solid var(--line)}
.doc__cat{display:flex;flex-wrap:wrap;align-items:center;gap:12px;font-size:13px;color:var(--mute);margin-bottom:18px}
.doc__h1{font-size:clamp(32px,4.4vw,54px);font-weight:800;letter-spacing:-.045em;line-height:1.04}
.doc__lede{font-size:19px;margin-top:18px;max-width:56ch}
.doc__meta{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:18px;font-size:13.5px;color:var(--mute);font-variant-numeric:tabular-nums}
.doc__meta span{display:inline-flex;align-items:center;gap:6px}
.doc__meta span::before{content:"";width:6px;height:6px;border:1.5px solid var(--faint)}
.doc__meta span:first-child::before{background:var(--ok);border-color:var(--ok)}
.doc__grid{display:grid;gap:40px;padding-top:32px;counter-reset:done}
.doc__main{min-width:0;max-width:760px}
@media (min-width:1180px){
  .doc__grid{grid-template-columns:minmax(0,760px) 300px;gap:56px;justify-content:start}
  .runsheet{position:sticky;top:76px;align-self:start;order:0}
}
@media (max-width:1179px){.runsheet{order:-1;position:sticky;top:60px;z-index:5;margin:0 calc(var(--gut)*-1);padding:0 var(--gut);background:rgba(255,255,255,.94);backdrop-filter:blur(6px)}}
@media (min-width:1024px) and (max-width:1179px){.runsheet{top:50px}}

.tldr{border:1px solid var(--ok-line);background:var(--ok-bg);padding:20px 22px;margin-bottom:36px;position:relative}
.tldr::before{content:"";position:absolute;left:-1px;top:-1px;bottom:-1px;width:4px;background:var(--ok)}
.tldr__h{display:flex;align-items:center;gap:10px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ok-ink);margin-bottom:8px}
.tldr__t{font-size:17px;line-height:1.6;color:var(--ink)}

/* run sheet */
.runsheet__card{border:1px solid var(--line2);background:#fff;padding:18px}
.runsheet__h{font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--mute)}
.runsheet__count{font-size:22px;font-weight:800;color:var(--ink);letter-spacing:-.03em;margin:4px 0 12px;font-variant-numeric:tabular-nums}
.runsheet__done::before{content:counter(done);color:var(--ok-ink)}
.segs{display:flex;gap:3px;margin-bottom:14px}
.seg{flex:1;height:6px;background:var(--soft2);transition:background .2s}
.runsheet__list{list-style:none;padding:0;margin:0;max-height:none}
.rs{display:flex;gap:10px;align-items:flex-start;padding:8px 0;border-top:1px solid var(--line)}
.rs__box{flex:none;width:16px;height:16px;margin-top:2px;border:1.5px solid var(--line2);background:#fff center/12px no-repeat var(--tick);cursor:pointer}
.rs a{font-size:13.5px;line-height:1.4;text-decoration:none;color:var(--text)}
.rs a:hover{color:var(--ink);text-decoration:underline}
.runsheet__note{font-size:12px;color:var(--faint);margin-top:12px}
@media (max-width:1179px){
  .runsheet__list{display:none}
  .runsheet__card{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:4px 16px;padding:14px 16px}
  .runsheet__h{grid-column:1/-1}
  .runsheet__count{margin:0;font-size:18px}
  .segs{margin:0}
  .runsheet__note{display:none}
}

/* steps */
.step{display:grid;grid-template-columns:36px minmax(0,1fr);gap:0 14px;padding:28px 0 8px;border-top:1px solid var(--line)}
.step__rail{display:flex;flex-direction:column;align-items:center;gap:8px;padding-top:4px}
.step__cb{position:absolute;opacity:0;width:1px;height:1px}
.step__cb:checked{counter-increment:done}
.step__box{width:28px;height:28px;border:2px solid var(--ink);background:#fff;cursor:pointer;transition:background .15s,border-color .15s}
.step__box:hover{border-color:var(--ok);box-shadow:0 0 0 4px var(--ok-bg)}
.step__cb:focus-visible+.step__box{outline:2px solid var(--ok);outline-offset:3px}
.step__cb:checked+.step__box{background:var(--ok) var(--tick) center/20px no-repeat;border-color:var(--ok)}
.step__n{font-size:12px;font-weight:800;color:var(--faint);font-variant-numeric:tabular-nums}
.step:has(.step__cb:checked) .step__body h2{color:var(--faint);text-decoration:line-through;text-decoration-color:var(--ok);text-decoration-thickness:1.5px}
.step:has(.step__cb:checked) .step__body>*:not(h2){opacity:.72}
.step:has(.step__cb:checked) .step__n{color:var(--ok-ink)}
.step__body{min-width:0}
@media (max-width:759px){
  .step{grid-template-columns:1fr;padding-top:22px}
  .step__rail{flex-direction:row;align-items:center;gap:10px;padding:0 0 12px}
  .step__box{width:26px;height:26px}
  .step__n::before{content:"Step "}
  .step__n{font-size:12px;letter-spacing:.06em;text-transform:uppercase}
}
@media (min-width:760px){.step{grid-template-columns:48px minmax(0,1fr);gap:0 18px}}

/* prose */
.prose{font-size:17px;line-height:1.72;color:var(--text)}
.prose__lead{padding-bottom:12px}
.prose__lead>p:first-child{font-size:19px;line-height:1.6;color:var(--ink)}
.prose p{margin:0 0 1.05em}
.prose h2{font-size:clamp(22px,2.4vw,27px);font-weight:750;letter-spacing:-.025em;line-height:1.22;margin:0 0 14px}
.prose h3{font-size:19px;font-weight:700;letter-spacing:-.015em;margin:1.6em 0 .6em;display:flex;gap:10px;align-items:baseline}
.prose h3::before{content:"";flex:none;width:10px;height:10px;background:var(--ok);transform:translateY(-1px)}
.prose strong{color:var(--ink);font-weight:650}
.prose a{color:var(--ok-ink);text-decoration-color:var(--ok-line);text-decoration-thickness:2px}
.prose a:hover{text-decoration-color:var(--ok)}
.prose ul,.prose ol{list-style:none;padding:0;margin:0 0 1.4em;border-top:1px solid var(--line)}
.prose li{position:relative;padding:11px 0 11px 34px;border-bottom:1px solid var(--line);line-height:1.55}
.prose ul>li::before{content:"";position:absolute;left:2px;top:15px;width:16px;height:16px;border:1.5px solid var(--line2);background:#fff}
.prose ol{counter-reset:ol}
.prose ol>li{counter-increment:ol}
.prose ol>li::before{content:counter(ol);position:absolute;left:0;top:12px;width:22px;height:22px;display:grid;place-items:center;background:var(--ink);color:#fff;font-size:12px;font-weight:700;font-variant-numeric:tabular-nums}
.prose li>ul,.prose li>ol{margin:10px 0 0;border-top:0}
.prose blockquote{margin:1.6em 0;padding:18px 22px;background:var(--soft);border-left:4px solid var(--ink);font-size:17px;color:var(--ink)}
.prose blockquote p:last-child{margin:0}
.prose table{width:100%;border-collapse:collapse;margin:1.4em 0 1.8em;font-size:14.5px;line-height:1.45;font-variant-numeric:tabular-nums;display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
@media (min-width:640px){.prose table{display:table}}
.prose thead th{text-align:left;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:var(--ink);padding:11px 14px;white-space:nowrap}
.prose td{padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top;min-width:120px}
.prose tbody tr:nth-child(even) td{background:var(--soft)}
.prose tbody td:first-child{font-weight:600;color:var(--ink)}
.prose--plain h2{margin-top:1.6em}
.prose--plain ul>li::before{background:var(--ok) var(--tick) center/12px no-repeat;border-color:var(--ok)}

/* faq */
.faq{margin-top:48px;border-top:2px solid var(--ink);padding-top:24px}
.faq__title{font-size:clamp(22px,2.4vw,28px);font-weight:800;letter-spacing:-.03em;margin-bottom:12px}
.faq__item{border-bottom:1px solid var(--line)}
.faq__item summary{list-style:none;display:flex;justify-content:space-between;gap:16px;padding:18px 0;cursor:pointer;font-weight:650;color:var(--ink);font-size:17px;line-height:1.4}
.faq__item summary::-webkit-details-marker{display:none}
.faq__pm{flex:none;width:22px;height:22px;border:1.5px solid var(--line2);position:relative;margin-top:1px}
.faq__pm::before,.faq__pm::after{content:"";position:absolute;left:5px;right:5px;top:9px;border-top:1.5px solid var(--ink)}
.faq__pm::after{transform:rotate(90deg)}
.faq__item[open] .faq__pm{background:var(--ok);border-color:var(--ok)}
.faq__item[open] .faq__pm::before{border-color:#fff}
.faq__item[open] .faq__pm::after{display:none}
.faq__a{padding:0 38px 18px 0;color:var(--text);font-size:16px}
.disclaimer{margin-top:32px;font-size:13px;color:var(--mute);padding:14px 16px;background:var(--soft);border:1px solid var(--line)}

.related{margin-top:64px}
.catnav{margin-top:48px;padding-top:24px;border-top:1px solid var(--line)}
.catnav__h{font-size:12px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--mute);margin-bottom:12px}
.catnav ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}
.catnav .chip{font-size:13px;padding:8px 11px}

/* ---------- 404 ---------- */
.nf{display:grid;gap:32px;padding:56px 0 80px;align-items:start}
.card--nf{padding-bottom:20px;max-width:560px}
.card--nf .card__eyebrow{padding:20px 20px 0}
.nf__h1{font-size:clamp(30px,4vw,44px);font-weight:800;letter-spacing:-.04em;padding:6px 20px 12px}
.card--nf .btn{margin:8px 20px 0}
@media (min-width:1024px){.nf{grid-template-columns:minmax(0,560px) 300px;gap:56px}}

/* ---------- footer ---------- */
.foot{margin-top:24px;border-top:1px solid var(--line);background:var(--soft);padding:40px var(--gut) 24px}
.foot__grid{display:grid;gap:32px}
.brand--foot{margin-bottom:12px}
.foot__tag{font-weight:600;color:var(--ink);max-width:36ch}
.foot__note{font-size:13px;color:var(--mute);margin-top:8px;max-width:48ch}
.foot__h{font-size:12px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--mute);margin-bottom:10px}
.foot__list{list-style:none;padding:0;margin:0;font-size:14px;columns:1}
.foot__list li{padding:4px 0}
.foot__list a{text-decoration:none;color:var(--text)}
.foot__list a:hover{color:var(--ink);text-decoration:underline}
.foot__base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;margin-top:32px;padding-top:16px;border-top:1px solid var(--line);font-size:12.5px;color:var(--mute)}
@media (min-width:900px){.foot__grid{grid-template-columns:1.4fr 1.4fr .8fr}.foot__list{columns:1}}

/* completion */
.finish{display:flex;gap:14px;align-items:center;margin:28px 0 0;padding:18px 20px;border:1.5px dashed var(--line2);background:var(--soft);transition:background .2s,border-color .2s}
.finish__box{flex:none;width:28px;height:28px;border:2px solid var(--line2);background:#fff var(--tick) center/20px no-repeat}
.finish p{font-size:15px;color:var(--text)}
.finish b{color:var(--ink)}
.finish__done{display:none}