/* ============================================================
   PADDOCK GARAGE: FLOATING GLASS SYSTEM
   Ported from the ACC glass spec: three depth-graded elevations
   (e0 recedes, e1 rests, e2 commands), dual inner bevels, film
   grain, one command surface per view. Adapted to the Paddock
   palette: ignition orange is the command ring.
   Loads after each page's inline styles; the cascade does the
   restyle so page copy is never touched.
   ============================================================ */

:root{
  --page-bg: none;                    /* each page sets its plate */
  --g-black:  #05070D;
  --g-fill-1: rgba(13, 18, 32, 0.58);   /* e1 resting glass  */
  --g-fill-0: rgba(10, 14, 25, 0.36);   /* e0 receding glass */
  --g-fill-2: rgba(13, 18, 32, 0.66);   /* e2 command glass  */
  --hairline:        rgba(229, 231, 235, 0.10);
  --hairline-strong: rgba(229, 231, 235, 0.20);
  --hairline-soft:   rgba(229, 231, 235, 0.06);
  --bevel-top:    inset 0 1px 0 0 rgba(229, 231, 235, 0.10);
  --bevel-bottom: inset 0 -1px 0 0 rgba(0, 0, 0, 0.35);
  --drop-1: 0 24px 60px -24px rgba(0, 0, 0, 0.85);
  --drop-2: 0 36px 90px -30px rgba(0, 0, 0, 0.92);
  --ring-ignition: 0 0 0 1px rgba(244, 81, 30, 0.22);
  --glow-ignition: 0 18px 70px -18px rgba(244, 81, 30, 0.30);
  --dur: 200ms;
  --ease: cubic-bezier(.2,.7,.25,1);

  /* retune the shared page tokens onto glass */
  --surface-0: var(--g-black);
  --surface-1: var(--g-fill-1);
  --surface-2: rgba(19, 26, 44, 0.42);
  --surface-3: rgba(255, 255, 255, 0.05);
  --s0: var(--g-black); --s1: var(--g-fill-1);
  --s2: rgba(19,26,44,.42); --s3: rgba(255,255,255,.05);
  --border: var(--hairline);
  --border-strong: var(--hairline-strong);
  --bd: var(--hairline); --bds: var(--hairline-strong);
  --shadow: var(--drop-1);
}

/* ---------- backdrop: plate, scrim, vignette ---------- */
html{ background: var(--g-black); }
body{ background: var(--g-black) !important; }
body::before{
  content:''; position:fixed; inset:0; z-index:0;
  background-image:
    radial-gradient(120% 90% at 50% 0%, rgba(5,7,13,0) 40%, rgba(5,7,13,.55) 100%),
    linear-gradient(180deg, rgba(5,7,13,var(--veil-0,.66)) 0%, rgba(5,7,13,var(--veil-30,.48)) 30%, rgba(5,7,13,.82) 72%, var(--g-black) 100%),
    var(--page-bg);
  background-size: cover, cover, cover;
  background-position: center top, center top, var(--page-pos, center top);
  background-repeat: no-repeat;
  background-color: var(--g-black);
}
/* ~4.5% film grain: kills gradient banding so the field reads
   photographic, not rendered (ACC Motion Spec §2) */
body::after{
  content:''; position:fixed; inset:-50%; z-index:2; pointer-events:none;
  opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
body > *{ position:relative; z-index:3; }

/* ============================================================
   ELEVATIONS
   ============================================================ */

/* e1: resting glass, the workhorse container */
.card, .tile, .stat-tile,
details.topic,
.tbl-wrap, .signal, .budget,
.illo-photo-frame{
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,0) 38%),
    var(--g-fill-1);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
  backdrop-filter: blur(18px) saturate(130%);
  border: 1px solid var(--hairline);
  border-radius: var(--r-box, 4px);
  box-shadow: var(--bevel-top), var(--bevel-bottom), var(--drop-1);
}

/* keep the brand accent bars riding on top of the glass */
.tile, .stat-tile{ border-top: 3px solid var(--c, var(--hairline-strong)); }
.card{ border-left-width: 1px; }

/* bare tables on editorial pages become glass slabs */
.tbl-wrap{ padding: 6px 14px; }
.tbl-wrap table{ margin: 6px 0; }
th, td{ border-bottom: 1px solid var(--hairline-soft); }
thead th{ border-bottom: 1px solid var(--hairline); }

/* e0: receding glass, nested context, callouts, code, chips */
.nugget, .flag, .good, .note, .val, .drill td,
.legend, .tools{
  background: var(--g-fill-0);
  -webkit-backdrop-filter: blur(10px) saturate(115%);
  backdrop-filter: blur(10px) saturate(115%);
}
.nugget{ border: 1px dashed var(--hairline-strong); }
.flag, .good, .note{ border-radius: 0 10px 10px 0; padding: 12px 16px; }
.pill, .tag{
  background: rgba(19,26,44,.5);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid var(--hairline-soft);
}

/* ---------- interaction: glass lifts, never slides ---------- */
button, .tile, .stat-tile{
  transition: transform var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}

/* ---------- page furniture ---------- */
.rule, hr{ background: linear-gradient(90deg, var(--hairline-strong), rgba(229,231,235,0)); border:0; height:1px; }
footer{ border-top: 1px solid var(--hairline-soft) !important; }

/* the model-y hero keeps its photograph; seat it into the field */
.hero{ border-bottom: 1px solid var(--hairline-soft); }

/* ---------- honesty fallbacks ---------- */
@supports not ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))){
  .card,.tile,.stat-tile,details.topic,.tbl-wrap,.signal,.budget,
  .illo-photo-frame{ background:#10162A; }
  .nugget,.flag,.good,.note,.val{ background:#0C1120; }
}
@media (prefers-reduced-motion: reduce){
  button, .tile, .stat-tile{ transition:none; }
}

/* ============================================================
   NAVBAR: ported from the paddock20.com header spec
   (60px, blur 24/160, #1A2740 hairline), hamburger top right
   ============================================================ */
body{ padding-top:60px; }
.pg-nav{ position:fixed; top:0; left:0; right:0; z-index:60; height:60px;
  background:rgba(7,11,20,.92);
  -webkit-backdrop-filter:blur(24px) saturate(160%); backdrop-filter:blur(24px) saturate(160%);
  border-bottom:1px solid rgba(26,39,64,.95); }
.pg-nav-inner{ max-width:1120px; margin:0 auto; height:100%; padding:0 20px;
  display:flex; align-items:center; gap:16px; }
.pg-nav-logo{ display:flex; align-items:center; min-height:44px; }
.pg-nav-logo img{ height:26px; width:auto; display:block; }
/* the lockup: the wordmark, a hairline, and the name of the place (the start screen draws the same) */
.pg-nav-issue{ display:inline-flex; align-items:center; gap:8px; margin-left:14px; padding-left:14px; border-left:1px solid rgba(255,255,255,.2); font-size:.7rem; font-weight:800;
  letter-spacing:.24em; text-transform:uppercase; color:var(--ink, #F0F2F5); white-space:nowrap; line-height:1.2 }
/* the Test Track's mark (build.py TT_ICON): a test loop with the two Paddock20 stripes for its start line */
.tt-ico{ display:block; flex:none; width:22px; height:22px; color:var(--ink, #F0F2F5) }
.tt-ico .s1{ fill:var(--ignition, #F4511E) }
.tt-ico .s2{ fill:var(--sky, #57B4E6) }
.pg-nav-logo{ text-decoration:none }
/* a phone has no room beside the wordmark for the name: it sits under it, the width of the wordmark */
@media (max-width:599.98px){
  .pg-nav-logo{ flex-direction:column; align-items:flex-start; justify-content:center; gap:3px }
  .pg-nav-logo img{ height:21px }
  .pg-nav-issue{ margin:0; padding:0; border:0; line-height:1; gap:6px }
  .pg-nav-issue .tt-ico{ width:16px; height:16px }
}
.pg-nav-sp{ flex:1; }
.pg-menu-t{ position:absolute; opacity:0; pointer-events:none; }
.pg-burger{ width:44px; height:44px; display:flex; flex-direction:column;
  justify-content:center; align-items:center; gap:5px; cursor:pointer; border-radius:10px; }
/* a real button with script (build.py head()); without script it is hidden and the label for the checkbox stands in, which is how this header was drawn before */
button.pg-burger{ background:none; border:0; padding:0; margin:0; font:inherit; -webkit-appearance:none; appearance:none; }
html:not(.js) button.pg-burger{ display:none; }
html.js .pg-burger-l{ display:none; }
.pg-burger span{ display:block; width:20px; height:2px; background:#F0F2F5; border-radius:2px;
  transition:transform var(--dur) var(--ease), opacity var(--dur) var(--ease); }
.pg-burger:hover span{ background:#F4511E; }
.pg-menu-t:checked ~ .pg-burger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.pg-menu-t:checked ~ .pg-burger span:nth-child(2){ opacity:0; }
.pg-menu-t:checked ~ .pg-burger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
/* The menu (build.py MENU_GROUPS, tools/flow.py): what the case is, in two lines, then the way in (the quick read and the library), then the library's four
   shelves and the proving ground's other cases. Each group says what it is for, and each page says why a reader would open it (Gavin, 2026-10-12: "it's all pretty
   random as to why they would click on it"). A phone gets the whole width under the header, one column, and scrolls; from 760px the way in sits across the top
   and the five groups flow in two columns, from 980px in three, each group kept whole and the browser balancing the columns. It is still display:flex when open
   (a11y-browser.test.mjs reads that). */
.pg-menu{ position:fixed; top:60px; left:0; right:0; display:none; flex-direction:column; flex-wrap:nowrap; z-index:59;
  /* the header's backdrop blur is the containing block of anything fixed inside it, so the height is stated, not taken from bottom:0 */
  height:calc(100vh - 60px); height:calc(100dvh - 60px);
  overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
  padding:10px 14px calc(28px + env(safe-area-inset-bottom, 0px));
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0) 30%), #080C16;
  -webkit-backdrop-filter:blur(28px) saturate(140%); backdrop-filter:blur(28px) saturate(140%); }
.pg-menu-t:checked ~ .pg-menu{ display:flex; }
.pgm-top{ flex:none; margin:0 0 6px; padding:8px 14px 16px; border-bottom:1px solid var(--hairline-soft); }
.pgm-k{ margin:0 0 6px; font-size:max(10.5px,.68rem); font-weight:800; letter-spacing:.2em; text-transform:uppercase; color:#F4511E; }
.pgm-d{ margin:0; max-width:46rem; font-size:.94rem; line-height:1.5; color:var(--ink-2, #AEB6C2); }
.pgm-head, .pgm-cols{ flex:none; }
.pgm-g{ display:flex; flex-direction:column; min-width:0; padding-top:6px; break-inside:avoid; }
.pgm-h{ margin:14px 14px 3px; padding:0; font-size:max(10.5px,.68rem); font-weight:800; letter-spacing:.2em; text-transform:uppercase; color:var(--ink, #F0F2F5); }
.pgm-w{ margin:0 14px 6px; padding:0 0 9px; font-size:.84rem; line-height:1.4; color:var(--ink-3, #8A93A0); border-bottom:1px solid var(--hairline-soft); }
.pgm-a{ position:relative; display:flex; flex-direction:column; justify-content:center; gap:2px; min-height:56px; padding:9px 44px 9px 18px;
  border-radius:10px; color:#F0F2F5; text-decoration:none; }
.pgm-t{ font-size:1.02rem; font-weight:700; line-height:1.25; letter-spacing:.005em; }
.pgm-s{ font-size:.84rem; line-height:1.35; color:var(--ink-2, #AEB6C2); }
.pgm-a:hover, .pgm-a:focus-visible{ background:rgba(255,255,255,.06); }
.pgm-a:hover .pgm-t{ color:#F4511E; }
.pgm-a:focus-visible{ outline:2px solid #57B4E6; outline-offset:-2px; }
/* where the reader is: a bar down the left edge in the two stripes, a tint, and the word "Here" on the right */
.pgm-a[aria-current]{ background:linear-gradient(90deg, rgba(244,81,30,.16), rgba(244,81,30,.03) 70%); padding-right:68px; }
.pgm-a[aria-current]::before{ content:""; position:absolute; left:0; top:9px; bottom:9px; width:3px; border-radius:3px;
  background:linear-gradient(180deg, #F4511E, #57B4E6); }
.pgm-a[aria-current="page"]::after{ content:"Here"; position:absolute; right:14px; top:50%; transform:translateY(-50%);
  font-size:max(10.5px,.64rem); font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:#F4511E; }
.pgm-a[aria-current="true"]::after{ content:"In this"; position:absolute; right:14px; top:50%; transform:translateY(-50%);
  font-size:max(10.5px,.64rem); font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3, #8A93A0); }
@media (min-width:760px){
  .pg-menu{ top:68px; left:auto; right:16px; height:auto; width:min(800px, calc(100vw - 32px)); max-height:calc(100vh - 88px); max-height:calc(100dvh - 88px);
    padding:18px 22px 20px;
    background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0) 40%), #0C111E;
    border:1px solid var(--hairline); border-radius:var(--r-box, 4px); box-shadow:var(--bevel-top), var(--bevel-bottom), var(--drop-2); }
  .pgm-a{ min-height:50px; }
  /* the way in sits across the top, its three pages (the home, the dashboard, the builder) side by side; the groups under it are columns of whole groups (a
     group is never split, and the browser balances the columns, so a short group never leaves a hole beside a long one) */
  .pgm-g--start{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:0 22px; padding-top:0; margin-bottom:14px; }
  .pgm-g--start > p{ grid-column:1 / -1; }
  .pgm-cols{ columns:2; column-gap:32px; }
  .pgm-cols .pgm-g{ display:block; padding-top:0; margin-bottom:16px; }
  .pgm-cols .pgm-h{ margin-top:0; }
}
@media (min-width:980px){
  .pg-menu{ width:min(1180px, calc(100vw - 32px)); padding:14px 22px 14px; }
  /* what the case is on the left, the way in beside it (its three pages in one row and nothing else, so the band is one short strip and the columns fit an 800px window) */
  .pgm-head{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 2fr); gap:0 32px; align-items:start; margin-bottom:12px;
    border-bottom:1px solid var(--hairline-soft); }
  .pgm-head .pgm-top{ border-bottom:0; margin:0; padding:2px 14px 12px; }
  .pgm-g--start{ grid-template-columns:repeat(3, minmax(0, 1fr)); margin:0; padding-bottom:10px; }
  .pgm-g--start .pgm-w{ display:none; }
  .pgm-g--start .pgm-h{ margin-top:0; margin-bottom:6px; }
  .pgm-cols{ columns:3; }
  /* a little tighter, so the tallest column fits an 800px window without a scroll */
  .pgm-a{ min-height:46px; padding-top:6px; padding-bottom:6px; }
  .pgm-t{ font-size:.98rem; }
  .pgm-s{ font-size:.8rem; line-height:1.3; }
  .pgm-w{ padding-bottom:7px; }
  .pgm-top{ padding:2px 14px 10px; margin-bottom:4px; }
  .pgm-k{ margin-bottom:4px; }
  .pgm-cols .pgm-g{ margin-bottom:12px; }
}

/* Where the reader is on a long page (engine.js): a bar under the header once the page has been scrolled, naming the page and the section, and a sheet of the
   page's sections to jump to. It is fixed, so it moves nothing; with no script there is no bar and the page is exactly as it was. */
.pg-ctx{ position:fixed; top:var(--navh, 60px); left:0; right:0; z-index:57; height:46px;
  background:rgba(7,11,20,.9); -webkit-backdrop-filter:blur(20px) saturate(150%); backdrop-filter:blur(20px) saturate(150%);
  border-bottom:1px solid var(--hairline); transform:translateY(-100%); opacity:0; visibility:hidden;
  transition:transform .22s var(--ease), opacity .22s var(--ease), visibility 0s linear .22s; }
.pg-ctx.on{ transform:none; opacity:1; visibility:visible; transition-delay:0s; }
.pg-ctx-b{ display:flex; align-items:center; gap:12px; width:100%; max-width:1120px; height:100%; margin:0 auto; padding:0 20px;
  background:none; border:0; font:inherit; color:#F0F2F5; text-align:left; cursor:pointer; -webkit-appearance:none; appearance:none; }
.pg-ctx-pg{ flex:none; max-width:36%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-size:max(10.5px,.66rem); font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:#F4511E; }
.pg-ctx-pg:not(:empty)::after{ content:""; display:inline-block; width:1px; height:14px; margin-left:12px; vertical-align:-3px; background:rgba(255,255,255,.22); }
.pg-ctx-sec{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.96rem; font-weight:700; }
.pg-ctx-n{ flex:none; font-size:.8rem; color:var(--ink-2, #AEB6C2); font-variant-numeric:tabular-nums; }
@media (max-width:520px){ .pg-ctx-n{ display:none } .pg-ctx-b{ gap:10px; padding:0 16px } }
.pg-ctx-c{ flex:none; width:16px; height:16px; color:var(--ink-2, #AEB6C2); transition:transform .2s var(--ease); }
.pg-ctx-b[aria-expanded="true"] .pg-ctx-c{ transform:rotate(180deg); }
.pg-ctx-p{ position:absolute; left:0; right:0; bottom:-1px; height:2px; transform-origin:0 50%; transform:scaleX(var(--p, 0));
  background:linear-gradient(90deg, #F4511E, #57B4E6); }
.pg-ctx-b:focus-visible{ outline:2px solid #57B4E6; outline-offset:-3px; }
.pg-scrim{ position:fixed; inset:0; z-index:61; background:rgba(3,5,10,.6); opacity:0; visibility:hidden; transition:opacity .2s var(--ease), visibility 0s linear .2s; }
.pg-scrim.on{ opacity:1; visibility:visible; transition-delay:0s; }
.pg-sheet{ position:fixed; left:0; right:0; bottom:0; z-index:62; max-height:74vh; overflow-y:auto; overscroll-behavior:contain;
  padding:6px 10px calc(18px + env(safe-area-inset-bottom, 0px));
  background:rgba(10,14,25,.98); -webkit-backdrop-filter:blur(28px); backdrop-filter:blur(28px);
  border-top:1px solid var(--hairline-strong); border-radius:16px 16px 0 0;
  transform:translateY(104%); visibility:hidden; transition:transform .26s var(--ease), visibility 0s linear .26s; }
.pg-sheet.on{ transform:none; visibility:visible; transition-delay:0s; }
.pg-sheet-h{ margin:12px 12px 6px; font-size:max(10.5px,.66rem); font-weight:800; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3, #8A93A0); }
.pg-sheet ol{ list-style:none; margin:0; padding:0; }
.pg-sheet a{ position:relative; display:flex; align-items:center; gap:14px; min-height:50px; padding:8px 14px; border-radius:10px;
  color:#F0F2F5; text-decoration:none; font-size:1rem; font-weight:600; line-height:1.3; }
.pg-sheet a:hover, .pg-sheet a:focus-visible{ background:rgba(255,255,255,.06); }
.pg-sheet .k{ flex:none; min-width:1.7em; text-align:right; font-variant-numeric:tabular-nums; font-weight:800; color:var(--ink-3, #8A93A0); }
.pg-sheet a[aria-current="true"]{ background:linear-gradient(90deg, rgba(244,81,30,.16), rgba(244,81,30,.03) 80%); }
.pg-sheet a[aria-current="true"] .k{ color:#F4511E; }
@media (min-width:900px){
  .pg-sheet{ left:auto; right:max(16px, calc(50% - 560px)); bottom:auto; top:calc(var(--navh, 60px) + 52px); width:400px; max-height:calc(100vh - 140px);
    border:1px solid var(--hairline-strong); border-radius:var(--r-box, 4px); transform:translateY(-8px); opacity:0; box-shadow:var(--drop-2);
    transition:transform .2s var(--ease), opacity .2s var(--ease), visibility 0s linear .2s; }
  .pg-sheet.on{ opacity:1; }
  .pg-scrim{ background:transparent; }
}
@media (prefers-reduced-motion:reduce){
  .pg-ctx, .pg-scrim, .pg-sheet, .pg-ctx-c{ transition:none !important; }
}
@media print{ .pg-ctx, .pg-scrim, .pg-sheet{ display:none !important; } }

/* ============================================================
   FOOTER: ported from the paddock20.com footer design
   ============================================================ */
/* The footer's small print is read on a phone, so every line clears 4.5:1 on this ground (the paddock20.com footer's 20 to 40% whites did not:
   they measured 1.8 to 3.3). Rank comes from the ink tokens, not from fading the white. */
.pg-footer{ margin-top:76px; background:rgba(7,11,20,.86);
  -webkit-backdrop-filter:blur(24px) saturate(160%); backdrop-filter:blur(24px) saturate(160%);
  border-top:1px solid rgba(255,255,255,.08) !important; padding:64px 20px 40px;
  font-family:Arial,"Helvetica Neue",Helvetica,sans-serif; }
.pg-footer-inner{ max-width:1120px; margin:0 auto; }
.pg-f-cols{ display:flex; flex-wrap:wrap; align-items:flex-start;
  justify-content:space-between; gap:44px; margin-bottom:52px; }
.pg-f-brand{ display:flex; flex-direction:column; gap:1.1rem; max-width:22rem; }
.pg-f-brand p{ font-size:.88rem; line-height:1.72; color:var(--ink-3,#8A93A0);
  max-width:19rem; margin:0; }
.pg-f-nav{ display:flex; flex-direction:column; gap:.2rem; }
.pg-f-nav a{ display:flex; align-items:center; min-height:44px; font-weight:700;
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-2,#AEB6C2); text-decoration:none; transition:color .2s; }
.pg-f-nav a:hover{ color:#fff; }
.pg-f-h{ font-weight:700; font-size:.68rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--ink-3,#8A93A0); margin:0 0 .35em; }
.pg-f-col{ display:flex; flex-direction:column; gap:.1rem; }
.pg-f-col a{ display:flex; align-items:center; gap:.55rem; min-height:44px;
  font-weight:600; font-size:.78rem; color:var(--ink-2,#AEB6C2);
  text-decoration:none; transition:color .2s; }
.pg-f-col a:hover{ color:#fff; }
.pg-f-connect a{ font-weight:700; font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink,#F0F2F5); }
.pg-f-community a{ font-weight:700; font-size:.7rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-3,#8A93A0); }
.pg-f-community a:hover{ color:#fff; }
/* On a phone the footer's links read in two columns, down the left and then the right (Gavin, 2026-10-12: "dense all over the place": about 2,100 px of every page
   was the footer and the sign-up band). The same links in the same order, each still 44px tall, so the footer is about half as tall. The two small lists under
   it sit side by side. A tablet and a desktop are as they were. */
@media (max-width:599.98px){
  .pg-f-cols{ gap:26px; margin-bottom:34px; }
  .pg-f-nav{ display:block; column-count:2; column-gap:20px; width:100%; }
  .pg-f-nav a{ break-inside:avoid; padding:4px 0; line-height:1.3; text-wrap:balance; }
  .pg-f-connect, .pg-f-community{ flex:1 1 calc(50% - 14px); min-width:0; }
}
.pg-f-bottom{ display:flex; flex-wrap:wrap; align-items:center;
  justify-content:space-between; gap:1rem; font-size:.8rem;
  color:var(--ink-3,#8A93A0); letter-spacing:.04em; }
.pg-f-legend{ margin-top:1.4rem; font-size:.74rem; line-height:1.7;
  color:var(--ink-3,#8A93A0); max-width:60rem; }
.pg-f-legend a{ color:var(--ink-2,#AEB6C2); text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.28); }
/* the logo with its mark: a small TM beside it, never inside it */
.pg-f-logo{ position:relative; display:inline-block; align-self:flex-start; }
/* the stacked logo sits in a wider transparent canvas: its wordmark ends at 81.2% of the width and its text row begins about 55% down */
.pg-f-tm{ position:absolute; top:55%; left:calc(81.2% + 3px); font-size:.7rem; line-height:1; color:var(--ink-3,#8A93A0); }
/* the legal lines: the copyright, the mark, and where the names are explained */
.pg-f-legal{ margin-top:.9rem; font-size:.74rem; line-height:1.7; color:var(--ink-3,#8A93A0); max-width:60rem; }
.pg-f-legal span{ color:var(--ink-2,#AEB6C2); font-weight:700; }
.pg-f-legal a{ color:var(--ink-2,#AEB6C2); text-decoration:none; border-bottom:1px solid rgba(255,255,255,.28); }
/* the case pages' note about the Test Track: its link was the browser's default blue, 2:1 on the footer */
.pg-f-note a{ color:var(--ink,#F0F2F5); text-decoration:none; border-bottom:1px solid rgba(255,255,255,.28); }
.pg-f-note a:hover{ color:#fff; border-bottom-color:currentColor; }

/* ============================================================
   REVIEW-PANEL FIXES
   ============================================================ */
/* nested tables do not need their own blur pass (perf on the 1MB page) */
.tbl-wrap{ -webkit-backdrop-filter:none; backdrop-filter:none;
  background:rgba(13,18,32,.5); }
/* AA contrast: dark ink on ignition buttons */
button{ color:#1B0E05; }
.pg-burger{ color:inherit; }
/* keyboard parity with hover states */
a:focus-visible, button:focus-visible, summary:focus-visible,
.pg-burger:focus-visible, [tabindex]:focus-visible{
  outline:2px solid #F4511E; outline-offset:2px; border-radius:10px; }