/* ==========================================================================
   Beginner's guide (/beginners-guide/) · loaded after site.css, on this page only.
   Same Cockpit HUD system: tokens, type roles and components come from site.css.
   Callouts: "Tip" = cyan corner brackets, no fill; "If it goes wrong" = amber
   side brackets on a tinted fill; notes = panel with a rail.
   ========================================================================== */

/* current page in the header nav and the mobile menu */
.bar__nav a[aria-current="page"]{color:var(--ink)}
.bar__nav a[aria-current="page"]::after{transform:scaleX(1)}
.menu li a[aria-current="page"]{color:var(--signal)}

/* inline links inside the guide body */
.gp a:not([class]):not(nav a){color:var(--ink);text-decoration:none;background:linear-gradient(var(--signal-dim),var(--signal-dim)) 0 100%/100% 1px no-repeat;transition:color 140ms linear}
.gp a:not([class]):not(nav a):hover{color:var(--signal);background-image:linear-gradient(var(--signal),var(--signal))}
.gp b a:not([class]),.gp a:not([class]) b{font-weight:600}

/* keycaps: JetBrains Mono, the telemetry face */
kbd{display:inline-block;min-width:1.7em;padding:.22em .45em .14em;font:500 .8em/1.15 var(--f-mono);letter-spacing:.01em;text-align:center;color:var(--ink);background:var(--panel);border:1px solid var(--line-strong);border-bottom-width:2px;border-radius:2px;white-space:nowrap;vertical-align:.06em}

/* =========================================================================
   INTRO BAND
   ========================================================================= */
.gi{position:relative;padding:calc(var(--bar) + 64px) 0 72px;background:var(--void);overflow:hidden}
.gi .vframe{inset:calc(var(--bar) + 16px) 24px 16px}
.gi__grid{position:relative;z-index:3;align-items:center}
.gi__copy{grid-column:1 / span 6}
.crumbs ol{display:flex;flex-wrap:wrap;gap:6px 10px;font:500 11px/1.4 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.crumbs li{display:flex;gap:10px}
.crumbs li+li::before{content:"/";color:var(--ink-4)}
.crumbs a{color:var(--ink-2);text-decoration:none;transition:color 140ms linear}
.crumbs a:hover{color:var(--signal)}
.crumbs [aria-current]{color:var(--ink)}
.gi__h1{margin-top:22px;font:700 clamp(44px,4.6vw,72px)/.98 var(--f-display);letter-spacing:-.02em;color:var(--ink);text-wrap:balance}
.gi__h1-sub{display:block;margin-top:16px;font:500 clamp(22px,2vw,30px)/1.2 var(--f-display);letter-spacing:-.005em;color:var(--ink-2)}
.gi__checked{margin-top:24px;padding:2px 0 2px 16px;border-left:1px solid var(--signal-dim);max-width:60ch;font-size:15.5px;line-height:1.55;color:var(--ink-3)}
.gi__checked em{font-style:normal}
.gi__checked b{font-weight:500;color:var(--ink)}
.gi__lead{margin-top:22px;max-width:60ch;font-size:18.5px;line-height:1.6;color:var(--ink-2)}
.gi__media{grid-column:8 / span 5}

/* figures: HUD corner ticks sit outside the image edge (as on the home page) */
.gfig{margin:0}
.gfig__frame{position:relative;background:var(--hull)}
.gfig__frame img{width:100%;height:100%;object-fit:cover}
.gfig__frame::before{content:"";position:absolute;inset:-7px;pointer-events:none;z-index:1;--c:var(--line-strong);--l:12px;
  background:
    linear-gradient(var(--c),var(--c)) 0 0/var(--l) 1px,linear-gradient(var(--c),var(--c)) 0 0/1px var(--l),
    linear-gradient(var(--c),var(--c)) 100% 0/var(--l) 1px,linear-gradient(var(--c),var(--c)) 100% 0/1px var(--l),
    linear-gradient(var(--c),var(--c)) 0 100%/var(--l) 1px,linear-gradient(var(--c),var(--c)) 0 100%/1px var(--l),
    linear-gradient(var(--c),var(--c)) 100% 100%/var(--l) 1px,linear-gradient(var(--c),var(--c)) 100% 100%/1px var(--l);
  background-repeat:no-repeat}
.gfig .fig{margin-top:12px}
.gi__media .gfig__frame{aspect-ratio:4/3}
.gi__media img{object-position:46% 50%}
/* Fankit wallpapers keep their exact 16:9 frame, so the baked-in watermark is never cropped */
.gfig--fk .gfig__frame{aspect-ratio:16/9}
.gfig--wide .gfig__frame{aspect-ratio:64/27}
.gfig--169 .gfig__frame{aspect-ratio:16/9}

/* on-this-page strip */
.gtoc{position:relative;background:var(--void);border-top:1px solid var(--line)}
.gtoc__in{display:flex;align-items:stretch;gap:32px;padding-top:18px;padding-bottom:20px}
.gtoc__k{flex:none;padding-top:9px;font:600 12px/1.2 var(--f-label);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.gtoc ol{flex:1;display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.gtoc li{display:flex;border-left:1px solid var(--line)}
.gtoc a{flex:1;display:flex;flex-direction:column;gap:7px;padding:8px 14px 8px 16px;font:600 13px/1.25 var(--f-label);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);text-decoration:none;transition:color 140ms linear,background 140ms linear}
.gtoc a span{font:500 11px/1 var(--f-mono);letter-spacing:0;color:var(--signal)}
.gtoc a:hover{color:var(--ink);background:rgba(76,214,245,.05)}

/* =========================================================================
   GLOSSARY PANEL: "Words you'll hear"
   ========================================================================= */
.gwords{padding:24px 0 104px;background:var(--void)}
.gpanel{position:relative;background:var(--hull);border:1px solid var(--line);border-left:2px solid var(--signal-dim);padding:30px 36px 30px 34px}
.gwords__hd{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding-bottom:18px;border-bottom:1px solid var(--line-strong)}
.gwords__h{font:600 clamp(24px,2.2vw,30px)/1.1 var(--f-display);letter-spacing:-.01em;color:var(--ink)}
.gwords__n{font:500 11px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap}
.gwords dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:40px}
.gwords dl>div{padding:16px 0 15px;border-bottom:1px dashed var(--line-strong)}
.gwords dt{font:600 17px/1.2 var(--f-label);letter-spacing:.04em;color:var(--ink)}
.gwords dd{margin-top:6px;font-size:15.5px;line-height:1.5;color:var(--ink-2)}

/* =========================================================================
   SECTIONS
   ========================================================================= */
.gsec{padding:112px 0 104px;background:var(--void);border-top:1px solid var(--line)}
.gsec--alt{background:var(--hull)}
.gsec__grid{align-items:start}
.gsec__side{grid-column:1 / span 4;align-self:stretch}
.gsec__main{grid-column:6 / span 7;min-width:0}
.gsec__n{display:block;font:500 12px/1 var(--f-mono);letter-spacing:.12em;color:var(--signal)}
.gsec__h{margin-top:18px;font:600 clamp(34px,3.4vw,50px)/1.02 var(--f-display);letter-spacing:-.015em;color:var(--ink);text-wrap:balance}
/* subtitle line (sections 03, 04); other spans in a heading (e.g. .nw) keep the heading style */
.gsec__h .gsec__sub{display:block;margin-top:10px;font-size:.56em;line-height:1.15;font-weight:500;letter-spacing:-.005em;color:var(--ink-2)}
.gsec__sticky{position:sticky;top:calc(var(--bar) + 36px)}
.gsec__side .gfig{margin-top:40px}

/* body copy */
/* reading measure: body text runs about 70-75 characters a line (33em of Barlow) */
.gtext p{max-width:33em}
.gtext p+p{margin-top:16px}
.glead{font-size:18px;line-height:1.6}
.gblk{margin-top:36px;padding-top:30px;border-top:1px solid var(--line)}
.gblk:first-child{margin-top:0;padding-top:0;border-top:0}
.gblk__h{font:600 clamp(21px,1.8vw,24px)/1.15 var(--f-display);letter-spacing:-.005em;color:var(--ink)}
.gblk__h+*{margin-top:12px}

/* lists with run-in labels */
.glist{margin-top:16px;border-bottom:1px solid var(--line);max-width:36em}
.glist>li{position:relative;padding:14px 0 14px 22px;border-top:1px solid var(--line)}
.glist>li::before{content:"";position:absolute;left:1px;top:23px;width:6px;height:6px;border:1px solid var(--signal);transform:rotate(45deg)}
.glist--grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px;max-width:none;border-bottom:0}
.glist--grid>li{border-bottom:0}
.glist--grid>li:nth-last-child(-n+2){border-bottom:1px solid var(--line)}

/* =========================================================================
   CONTROLS: key tables as HUD readouts
   ========================================================================= */
.keys{grid-column:1 / -1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gutter);margin-top:44px;align-items:start}
.readout{position:relative;background:var(--void);border:1px solid var(--line)}
.readout::before{content:"";position:absolute;left:-1px;top:-1px;width:28px;height:2px;background:var(--signal)}
.readout table{width:100%;border-collapse:collapse}
.readout caption{text-align:left;padding:16px 20px 15px;border-bottom:1px solid var(--line-strong);font:600 14px/1.2 var(--f-label);letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.readout thead th{padding:12px 20px 8px;font:500 10.5px/1.3 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);text-align:left}
.readout thead th:last-child{text-align:right}
.readout td{padding:11px 20px 10px;border-top:1px dashed var(--line);font-size:15.5px;line-height:1.5;vertical-align:baseline;color:var(--ink-2)}
.readout td:last-child{text-align:right;color:var(--ink-2);font-size:14.5px;line-height:1.9;white-space:nowrap}
.readout td.kwrap{white-space:normal}
.readout tbody tr{transition:background 140ms linear}
.readout tbody tr:hover{background:rgba(76,214,245,.04)}

/* =========================================================================
   FIRST SESSION: step index + steps
   ========================================================================= */
.gidx{position:sticky;top:calc(var(--bar) + 36px);margin-top:36px}
.gidx__k{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-bottom:12px;font:600 12px/1.2 var(--f-label);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.gidx__k span{font:500 11px/1 var(--f-mono);letter-spacing:.08em}
.gidx__toggle{display:none}
.gidx__list{border-bottom:1px dashed var(--line-strong)}
.gidx__list a{position:relative;display:grid;grid-template-columns:34px 1fr;align-items:baseline;gap:8px;padding:11px 0 11px 12px;border-top:1px dashed var(--line-strong);font:600 14px/1.25 var(--f-label);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);text-decoration:none;transition:color 140ms linear}
.gidx__list a::before{content:"";position:absolute;left:0;top:9px;bottom:9px;width:2px;background:var(--signal);transform:scaleY(0);transition:transform 160ms ease-out}
.gidx__list a span{font:500 12px/1 var(--f-mono);letter-spacing:0}
.gidx__list a:hover{color:var(--ink)}
.gidx__list a.is-past{color:var(--ink-2)}
.gidx__list a.is-past span{color:var(--ink-3)}
.gidx__list a[aria-current="step"]{color:var(--ink)}
.gidx__list a[aria-current="step"] span{color:var(--signal)}
.gidx__list a[aria-current="step"]::before{transform:none}

.gsteps{border-bottom:1px solid var(--line)}
.gstep{display:grid;grid-template-columns:96px minmax(0,1fr);padding:44px 0 52px;border-top:1px solid var(--line)}
.gstep:first-child{padding-top:4px;border-top:0}
.gstep__n{font:300 64px/.8 var(--f-mono);letter-spacing:-.04em;color:var(--ink-4);font-variant-numeric:tabular-nums;transition:color 160ms linear}
.gstep.is-on .gstep__n{color:var(--signal)}
.gstep__h{font:600 clamp(24px,2.1vw,30px)/1.1 var(--f-display);letter-spacing:-.01em;color:var(--ink);text-wrap:balance}
.gstep__body{min-width:0}
.gstep__body>*+*{margin-top:16px}
.gstep__body>.gstep__h+*{margin-top:16px}
.gstep__body p{max-width:33em}
.gstep__body .gfig{margin-top:28px}
.gstep__body>.co+.co{margin-top:16px}

/* city comparison: a table while it fits, stacked cards when its own column is narrow */
.gtable{margin-top:24px;container-type:inline-size}
.gtable table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.45}
.gtable thead th{padding:0 14px 10px 0;border-bottom:1px solid var(--line-strong);font:500 10.5px/1.3 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);text-align:left;vertical-align:bottom}
.gtable tbody th{padding:14px 14px 14px 0;font:600 17px/1.2 var(--f-display);letter-spacing:-.005em;color:var(--ink);text-align:left;vertical-align:top;white-space:nowrap}
.gtable td{padding:14px 14px 14px 0;color:var(--ink-2);vertical-align:top}
.gtable tbody tr{border-bottom:1px dashed var(--line-strong)}
.gtable td:last-child{padding-right:0;color:var(--ink)}
@container (max-width:600px){
  .gtable table,.gtable tbody,.gtable tr,.gtable th,.gtable td{display:block}
  .gtable thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .gtable tbody{border-top:1px solid var(--line-strong)}
  .gtable tbody tr{padding:16px 0 14px}
  .gtable tbody th{padding:0 0 8px;font-size:19px;white-space:normal}
  .gtable td{display:grid;grid-template-columns:118px minmax(0,1fr);column-gap:12px;padding:5px 0}
  .gtable td::before{content:attr(data-label);padding-top:3px;font:500 10.5px/1.4 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
  .gtable td>a{justify-self:start}
}
@supports not (container-type:inline-size){
  .gtable{overflow-x:auto}
  .gtable table{min-width:600px}
}

/* routes from the hab to the spaceport */
.routes{margin-top:20px;border-bottom:1px solid var(--line)}
.routes>div{padding:16px 0 18px;border-top:1px solid var(--line)}
.routes dt{display:flex;align-items:baseline;gap:12px;font:600 19px/1.2 var(--f-display);color:var(--ink)}
.routes dt span{font:500 11px/1 var(--f-mono);color:var(--signal)}
.routes dd{margin-top:8px;max-width:33em;font-size:16.5px}

/* =========================================================================
   CALLOUTS
   ========================================================================= */
.co{position:relative;max-width:36em;padding:18px 24px 19px}
.co p{font-size:16px;line-height:1.55;color:var(--ink-2)}
.co__k{display:flex;align-items:center;gap:10px;font:600 11.5px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase}
.co__k+p{margin-top:10px}
/* Tip: four cyan corner brackets, no fill */
.co--tip{--c:var(--signal);--l:14px;
  background:
    linear-gradient(var(--c),var(--c)) 0 0/var(--l) 1.5px,linear-gradient(var(--c),var(--c)) 0 0/1.5px var(--l),
    linear-gradient(var(--c),var(--c)) 100% 0/var(--l) 1.5px,linear-gradient(var(--c),var(--c)) 100% 0/1.5px var(--l),
    linear-gradient(var(--c),var(--c)) 0 100%/var(--l) 1.5px,linear-gradient(var(--c),var(--c)) 0 100%/1.5px var(--l),
    linear-gradient(var(--c),var(--c)) 100% 100%/var(--l) 1.5px,linear-gradient(var(--c),var(--c)) 100% 100%/1.5px var(--l);
  background-repeat:no-repeat}
.co--tip .co__k{color:var(--signal)}
.co--tip .co__k::before{content:"";width:7px;height:7px;margin:0 1px;border:1px solid var(--signal);transform:rotate(45deg)}
/* If it goes wrong: amber full-height side brackets on a tinted panel */
.co--fix{padding:18px 28px 19px;background:rgba(242,179,61,.05)}
.co--fix::before,.co--fix::after{content:"";position:absolute;top:0;bottom:0;width:10px;border:1.5px solid rgba(242,179,61,.75)}
.co--fix::before{left:0;border-right:0}
.co--fix::after{right:0;border-left:0}
.co--fix .co__k{color:var(--standby)}
.co--fix .co__k::before{content:"!";display:grid;place-items:center;width:17px;height:17px;border:1px solid rgba(242,179,61,.6);font:600 10.5px/1 var(--f-mono);letter-spacing:0}
/* Notes (Free Fly, harassment): a panel with a rail */
.co--note{background:var(--panel);border-left:2px solid var(--signal-dim)}
.gsec--alt .co--note{background:var(--void)}
.co--note .co__k{color:var(--ink);letter-spacing:.12em}

/* =========================================================================
   STAY SHARP
   ========================================================================= */
.law{margin-top:16px;border-bottom:1px solid var(--line);max-width:36em}
.law li{display:grid;grid-template-columns:34px minmax(0,1fr);padding:16px 0 17px;border-top:1px solid var(--line)}
.law__n{font:500 11px/1.9 var(--f-mono);color:var(--signal)}
.law li b:first-of-type{font:600 19px/1.2 var(--f-display);color:var(--ink)}
.habits{margin-top:18px;display:flex;flex-direction:column;gap:0;border-bottom:1px solid var(--line);max-width:36em}
.habits li{display:grid;grid-template-columns:44px minmax(0,1fr);align-items:baseline;padding:14px 0;border-top:1px solid var(--line)}
.habits__n{width:28px;height:28px;display:grid;place-items:center;align-self:start;font:500 11.5px/1 var(--f-mono);color:var(--signal);border:1px solid var(--line-strong)}
.gsec .co--note{margin-top:32px}

/* =========================================================================
   FLY WITH A CREW + Jokers Gambit
   ========================================================================= */
.perks{margin-top:22px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px;border-bottom:1px solid var(--line)}
.perks li{padding:16px 0 17px;border-top:1px solid var(--line);font-size:15.5px;line-height:1.5}
.perks li b:first-child{display:block;margin-bottom:6px;font:600 14px/1.25 var(--f-label);letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.gcrew__dir{margin-top:28px}

.jg{margin-top:56px;position:relative;background:var(--hull);padding:34px 34px 32px;border-left:2px solid var(--signal-dim);border-right:2px solid var(--signal-dim)}
.jg__k{display:flex;align-items:center;gap:12px;font:600 13px/1.2 var(--f-label);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}
.jg__k span{font:500 11px/1 var(--f-mono);letter-spacing:.1em;color:var(--signal)}
.jg__h{font:600 clamp(24px,2.1vw,30px)/1.1 var(--f-display);letter-spacing:-.01em;color:var(--ink)}
.jg>p:not(.jg__k){margin-top:16px}
.jg em{font-style:normal;color:var(--ink)}   /* no Barlow italic is loaded: never a faux italic */
.suits{margin-top:22px;width:100%;max-width:640px;border-collapse:collapse}
.suits thead th{padding:0 16px 10px 0;border-bottom:1px solid var(--line-strong);font:500 10.5px/1.3 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);text-align:left}
.suits tbody th{padding:13px 16px 13px 0;text-align:left;white-space:nowrap;vertical-align:baseline;font:600 15px/1.2 var(--f-label);letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.suits td{padding:13px 0;font-size:15.5px;line-height:1.5;color:var(--ink-2);vertical-align:baseline}
.suits tbody tr{border-bottom:1px dashed var(--line-strong)}
.suit{display:inline-block;width:15px;height:15px;margin:0 10px -1px 0;fill:var(--ink);vertical-align:baseline}
.suit--red{fill:#F06A6A}
.jg__links{margin-top:26px;border-top:1px solid var(--line-strong)}
.jg__links>div{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:16px;align-items:baseline;padding:12px 0;border-bottom:1px dashed var(--line-strong)}
.jg__links dt{font:600 13px/1.4 var(--f-label);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.jg__links dd{font:500 14px/1.4 var(--f-mono)}   /* addresses break only at a <wbr> after the domain */

/* =========================================================================
   FIRST-DAY PROBLEMS (collapsible) + SOURCES
   ========================================================================= */
.gfaq{border-bottom:1px solid var(--line-strong)}
.gfaq details{border-top:1px solid var(--line-strong)}
.gfaq summary{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:20px 0;cursor:pointer;list-style:none;font:600 19px/1.3 var(--f-display);letter-spacing:-.005em;color:var(--ink);transition:color 140ms linear}
.gfaq summary::-webkit-details-marker{display:none}
.gfaq__q{font:inherit;letter-spacing:inherit}
.gfaq summary::after{content:"+";flex:none;display:grid;place-items:center;width:28px;height:28px;border:1px solid var(--line-strong);font:300 16px/1 var(--f-mono);color:var(--signal)}
.gfaq details[open] summary::after{content:"\2212"}
.gfaq summary:hover{color:var(--signal)}
.gfaq__a{padding:0 48px 24px 0;max-width:36em}
.gfaq__a p+p{margin-top:12px}

.gsrc{padding:88px 0 96px}
.gsrc__intro{margin-top:16px;max-width:52ch;font-size:15.5px}
.gsrc__cols{grid-column:6 / span 7;columns:2;column-gap:40px}
.gsrc__grp{break-inside:avoid;padding-bottom:26px}
.gsrc__grp h3{padding-bottom:10px;border-bottom:1px solid var(--line-strong);font:600 12.5px/1.3 var(--f-label);letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.gsrc__grp li{padding:8px 0;border-bottom:1px solid var(--line);font-size:14.5px;line-height:1.5;color:var(--ink-3)}
.gsrc__grp li a:not([class]){color:var(--ink-2)}

/* deep links: html scroll-padding already clears the fixed bar */

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width:1279px){
  .gsec__main{grid-column:5 / span 8}
  .gsrc__cols{grid-column:5 / span 8}
  .gstep{grid-template-columns:76px minmax(0,1fr)}
  .gstep__n{font-size:54px}
  .jg__links>div{grid-template-columns:minmax(0,180px) minmax(0,1fr)}
  .gi__copy{grid-column:1 / span 7}
  .gi__media{grid-column:8 / span 5}
  .gtoc ol{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:8px}
  .gtoc li:nth-child(5){border-left:1px solid var(--line)}
}

@media (max-width:1023px){
  .gi__copy,.gi__media{grid-column:1 / -1}
  .gi__media{margin-top:44px;max-width:720px}
  .gi__media .gfig__frame{aspect-ratio:16/9}
  .gtoc__in{flex-direction:column;gap:10px}
  .gtoc__k{padding-top:0}
  .gtoc ol{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:0;margin-inline:-14px 0}
  .gtoc li,.gtoc li:nth-child(5){border-left:0;border-top:1px solid var(--line)}
  .gtoc a{flex-direction:row;align-items:baseline;gap:12px;padding:12px 14px}
  .gwords dl{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gsec__side,.gsec__main,.gsrc__cols{grid-column:1 / -1}
  .gsec__main,.gsrc__cols{margin-top:40px}
  .gsec__h{max-width:20ch}
  .gsec__sticky{position:static}
  .gsec__side .gfig{max-width:640px}
  .keys{grid-template-columns:1fr;max-width:720px}

  /* first session: the index becomes a compact bar that sticks while you read the steps */
  .gsteps-wrap{display:block}
  .gsteps-wrap .gsec__side{display:contents}
  .gsteps-wrap .gsec__main{margin-top:24px}
  .gidx{position:static;margin-top:28px}
  html.js .gidx{position:sticky;top:var(--bar);z-index:20;margin-inline:calc(-1 * var(--margin));padding-inline:var(--margin);background:var(--void);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  html.js .gidx__k{display:none}
  html.js .gidx__toggle{display:flex;width:100%;align-items:center;justify-content:space-between;gap:14px;height:52px;text-align:left;font:600 14px/1.2 var(--f-label);letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
  .gidx__now{display:flex;align-items:baseline;gap:12px;min-width:0}
  .gidx__now span:first-child{flex:none;font:500 12px/1 var(--f-mono);letter-spacing:.04em;color:var(--signal)}
  .gidx__now span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .gidx__ico{flex:none;display:grid;place-items:center;width:28px;height:28px;border:1px solid var(--line-strong);font:300 16px/1 var(--f-mono);color:var(--signal)}
  .gidx__ico::before{content:"+"}
  .gidx.is-open .gidx__ico::before{content:"\2212"}
  html.js .gidx__list{display:none;max-height:calc(100svh - var(--bar) - 72px);overflow-y:auto;border-bottom:0;padding-bottom:10px}
  html.js .gidx.is-open .gidx__list{display:block}
  html.js .gsteps-wrap [id]{scroll-margin-top:60px}   /* plus the sticky step bar */
  .gstep:first-child{padding-top:36px;border-top:1px solid var(--line)}
}

@media (max-width:719px){
  .gi{padding:calc(var(--bar) + 40px) 0 56px}
  .gi .vframe{inset:calc(var(--bar) + 12px) 10px 12px}
  .gi__h1{font-size:clamp(38px,11.4vw,56px);margin-top:18px}
  .gi__h1-sub{font-size:20px;margin-top:12px}
  .gi__checked{font-size:15px}
  .gi__lead{font-size:17px}
  .gi__media{margin-top:36px}
  .gtoc ol{grid-template-columns:1fr}
  .gwords{padding:16px 0 72px}
  .gpanel{padding:22px 18px 22px 18px;border-left-width:1px}
  .gwords__hd{flex-direction:column;gap:8px}
  .gwords dl{grid-template-columns:1fr}
  .gsec{padding:72px 0 64px}
  .gsec__main,.gsrc__cols{margin-top:32px}
  .gsec__h{font-size:clamp(30px,8.6vw,38px)}
  .glead{font-size:17px}
  .glist--grid{grid-template-columns:1fr}
  .glist--grid>li:nth-last-child(2){border-bottom:0}
  .readout caption{padding:14px 14px 13px}
  .readout thead th{padding:10px 14px 8px}
  .readout td{padding:10px 14px 9px;font-size:15px}
  .readout td:last-child{font-size:14px}
  .gstep{grid-template-columns:minmax(0,1fr);padding:36px 0 40px}
  .gstep__n{font-size:44px;margin-bottom:14px}
  .co{padding:16px 18px 17px}
  .co--fix{padding:16px 22px 17px}
  .perks{grid-template-columns:1fr}
  .jg{margin-top:44px;padding:26px 20px 24px}
  .jg__links>div{grid-template-columns:1fr;gap:4px}
  .jg__links dd{font-size:12px}
  .gfaq summary{font-size:17.5px;padding:18px 0}
  .gfaq__a{padding-right:0}
  .gsrc{padding:64px 0 72px}
  .gsrc__cols{columns:1}
}

@media (prefers-reduced-motion:reduce){
  .gidx__list a::before{transition:none}
}
.gblk__h,.gfaq__q{text-wrap:pretty}