/* ═══════════════════════════════════════════════════════════════════════════
   PAC Explained — styles.css
   Served at /styles.css by the Cloudflare Worker.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════ THEMES ═══ */
[data-theme="dark"] {
  --bg:          #0d0f14;
  --bg2:         #13161e;
  --bg3:         #1a1e28;
  --border:      #242836;
  --border2:     #2e3447;
  --text:        #c8cfe0;
  --text-dim:    #8892b0;
  --text-bright: #eef0f8;
  --accent:      #5af0a8;
  --accent2:     #3dd4e8;
  --accent-dim:  #1a4a38;
  --warn:        #f0c05a;
  --warn-dim:    #3a2e10;
  --warn-text:   #d4a84a;
  --err:         #f05a7a;
  --code-bg:     #090b0f;
  --fn-color:    #a78bfa;
  --str-color:   #5af0a8;
  --num-color:   #f0c05a;
  --kw-color:    #3dd4e8;
  --cm-color:    #6a7a9e;
  --hero-glow:   radial-gradient(ellipse 55% 45% at 25% 40%, rgba(90,240,168,.06), transparent);
  --card-hover:  #2e3447;
  --badge-fn-bg: rgba(167,139,250,.12);
  --shadow:      0 2px 16px rgba(0,0,0,.4);
  --accent-text: #0a1a10;
}
[data-theme="light"] {
  --bg:          #f2f4fb;
  --bg2:         #ffffff;
  --bg3:         #e8ecf7;
  --border:      #d8ddf0;
  --border2:     #bec6df;
  --text:        #3a4268;
  --text-dim:    #3d4d72;
  --text-bright: #0d1228;
  --accent:      #086f3c;
  --accent2:     #0870a0;
  --accent-dim:  #d0eed8;
  --warn:        #7a5500;
  --warn-dim:    #fff3cc;
  --warn-text:   #7a5500;
  --err:         #cc0030;
  --code-bg:     #e4e8f8;
  --fn-color:    #5e35b1;
  --str-color:   #1a7040;
  --num-color:   #a05000;
  --kw-color:    #065e8a;
  --cm-color:    #3d4d72;
  --hero-glow:   radial-gradient(ellipse 55% 45% at 25% 40%, rgba(10,122,72,.05), transparent);
  --card-hover:  #bec6df;
  --badge-fn-bg: rgba(94,53,177,.1);
  --shadow:      0 2px 16px rgba(0,0,0,.1);
  --accent-text: #ffffff;
}

/* ═══════════════════════════════════════ RESET ═══ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--text);
  font-family:'DM Sans',sans-serif;font-weight:300;line-height:1.7;
  min-height:100vh;transition:background .2s,color .2s;
}

/* ═══════════════════════════════════════ LAYOUT ═══ */
.site-wrapper{display:flex;min-height:100vh}

/* Sidebar */
nav{
  width:252px;min-width:252px;flex-shrink:0;
  background:var(--bg2);border-right:1px solid var(--border);
  position:sticky;top:0;height:100vh;overflow-y:auto;
  padding-bottom:1.5rem;
  scrollbar-width:thin;scrollbar-color:var(--border2) transparent;
  transition:background .2s,border-color .2s;z-index:20;
}
nav::-webkit-scrollbar{width:4px}
nav::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px}

.nav-controls {
  padding: 0.25rem 1rem 0.5rem;
  display: flex;
  justify-content: flex-end;
}

.collapse-all-btn {
  background: none;
  border: 1px solid var(--border2);   /* ← uses real theme token */
  border-radius: 4px;
  color: var(--text-dim);             /* ← uses real theme token */
  font-size: 0.72rem;
  cursor: pointer;
  padding: 0.2rem 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  transition: color 0.15s, border-color 0.15s;
  letter-spacing: 0.02em;
}

.collapse-all-btn:hover {
  color: var(--text-bright);          /* ← dark text in light mode, bright in dark */
  border-color: var(--accent);        /* ← green accent, visible in both modes */
}

/* Content area — column so footer flows below main; align-items centers both horizontally */
.content-area{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center}
main{
  width:100%;max-width:880px;
  padding:0 clamp(1.25rem,5vw,4rem) 6rem;
}

/* ═══════════════════════════════════════ NAV ═══ */
.nav-logo{
  padding:1.25rem 1.1rem .9rem;
  border-bottom:1px solid var(--border);
  display:flex;align-items:flex-start;justify-content:space-between;gap:.5rem;
}
.nav-logo a{text-decoration:none}
.nav-logo-name{
  font-family:'IBM Plex Mono',monospace;font-size:.9rem;font-weight:600;
  color:var(--accent);letter-spacing:-.02em;
}
.nav-logo-sub{font-size:.62rem;color:var(--text-dim);letter-spacing:.08em;text-transform:uppercase;margin-top:2px}

.theme-toggle{
  background:none;border:1px solid var(--border2);color:var(--text-dim);
  border-radius:6px;width:28px;height:28px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-size:.85rem;
  flex-shrink:0;margin-top:1px;transition:border-color .15s,color .15s;
}
.theme-toggle:hover{border-color:var(--accent);color:var(--accent)}

/* Collapsible nav groups */
.nav-group{margin-bottom:.1rem}
.nav-group-label{
  font-size:.61rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--text-dim);padding:.6rem 1.1rem .25rem;font-weight:500;
  display:flex;align-items:center;justify-content:space-between;
  cursor:pointer;user-select:none;transition:color .15s;
}
.nav-group-label:hover{color:var(--text)}
/* FIX: removed opacity:.6 — at 60% on white bg the effective contrast dropped to ~2.9:1 */
.nav-caret{font-size:.65rem;transition:transform .2s}
.nav-group.collapsed .nav-caret{transform:rotate(-90deg)}
.nav-group-links{
  overflow:hidden;max-height:600px;transition:max-height .25s ease;
  padding:0 .45rem 0 1.25rem;
}
.nav-group.collapsed .nav-group-links{max-height:0}
nav a{
  display:block;padding:.27rem .75rem;color:var(--text-dim);
  text-decoration:none;font-size:.8rem;border-radius:5px;
  transition:color .15s,background .15s;
}
nav a:hover{color:var(--text-bright);background:var(--bg3)}
nav a.active{color:var(--accent);background:var(--accent-dim)}
/* FIX: removed opacity:.75 — at 75% on white bg the effective contrast was ~4.18:1 (fail for .73rem text) */
nav a.fn-link{
  color:var(--fn-color);
  font-family:'IBM Plex Mono',monospace;font-size:.73rem;
}
nav a.fn-link:hover{opacity:1;background:var(--badge-fn-bg)}

.nav-footer{
  margin-top:1rem;padding:1rem 1.1rem .5rem;
  border-top:1px solid var(--border);
  display:flex;flex-direction:column;gap:.5rem;
}
.bmc-btn{
  display:flex;align-items:center;justify-content:center;gap:.45rem;
  background:#ffdd00;color:#000;font-family:'DM Sans',sans-serif;
  font-size:.75rem;font-weight:500;padding:.45rem .75rem;
  border-radius:6px;text-decoration:none;transition:opacity .15s;
  border:none;cursor:pointer;
}
.bmc-btn:hover{opacity:.88}
.bmc-btn svg{width:14px;height:14px;flex-shrink:0}
.nav-gh{
  display:flex;align-items:center;gap:.4rem;
  font-size:.75rem;color:var(--text-dim);text-decoration:none;
  padding:.3rem .75rem;border-radius:5px;transition:color .15s,background .15s;
}
.nav-gh:hover{color:var(--text-bright);background:var(--bg3)}
.nav-gh svg{width:14px;height:14px;flex-shrink:0}

/* ═══════════════════════════════════════ HERO ═══ */
.hero{
  padding:4.5rem 0 3rem;border-bottom:1px solid var(--border);margin-bottom:3.5rem;
  position:relative;
}
.hero::before{
  content:'';position:absolute;inset:0;
  background:var(--hero-glow);pointer-events:none;
}
.hero-tag{
  font-family:'IBM Plex Mono',monospace;font-size:.7rem;color:var(--accent);
  letter-spacing:.15em;text-transform:uppercase;margin-bottom:1.1rem;
  display:flex;align-items:center;gap:.5rem;
}
.hero-tag::before{content:'';display:block;width:22px;height:1px;background:var(--accent)}
.hero h1{
  font-family:'Instrument Serif',serif;font-size:clamp(2.1rem,4.5vw,3.4rem);
  color:var(--text-bright);line-height:1.1;font-weight:400;margin-bottom:1rem;
}
.hero h1 em{color:var(--accent);font-style:italic}
.hero-lead{font-size:.97rem;color:var(--text);max-width:560px;line-height:1.75;margin-bottom:1.75rem}
.hero-code{
  display:inline-flex;align-items:center;gap:1rem;
  background:var(--bg3);border:1px solid var(--border2);border-radius:8px;
  padding:.65rem 1.15rem;font-family:'IBM Plex Mono',monospace;font-size:.82rem;
  color:var(--text-bright);
}
.hero-code .kw{color:var(--kw-color)}.hero-code .fn{color:var(--fn-color)}
.hero-code .cm{color:var(--cm-color)}

/* ═══════════════════════════════════════ SECTIONS ═══ */
section{margin-bottom:3.5rem}
section>h2{
  font-family:'Instrument Serif',serif;font-size:1.7rem;
  color:var(--text-bright);font-weight:400;margin-bottom:.4rem;padding-top:.25rem;
}
.section-lead{
  color:var(--text-dim);font-size:.87rem;margin-bottom:1.6rem;
  border-bottom:1px solid var(--border);padding-bottom:.8rem;
}
.anchor-target{scroll-margin-top:1.5rem}

/* ═══════════════════════════════════════ ORIGIN BANNER ═══ */
.origin-card{
  background:var(--bg2);border:1px solid var(--border);
  border-left:3px solid var(--accent);border-radius:8px;
  padding:1.2rem 1.4rem;font-size:.88rem;color:var(--text);
  line-height:1.75;margin-bottom:1.5rem;
}
.origin-card p+p{margin-top:.6rem}
.origin-card strong{color:var(--text-bright)}
.origin-card a{color:var(--accent);text-underline-offset:3px}

/* ═══════════════════════════════════════ ALERT STYLES ═══ */
/* display:block so inline text, <code>, and <a> children stay in normal flow.
   Icon is absolute; left padding = 1.1rem + 1.5em (icon) + .75rem (gap). */
.alert{
  display:block;position:relative;border-radius:7px;
  padding:.8rem 1.1rem .8rem calc(1.1rem + 1.5em + .75rem);
  font-size:.83rem;line-height:1.65;margin-bottom:1.2rem;
}
.alert::before{position:absolute;left:1.1rem;top:.82rem;line-height:inherit}
.alert-warn{
  background:var(--warn-dim);border:1px solid rgba(240,192,90,.25);color:var(--warn-text);
}
.alert-warn::before{content:'⚠'}
.alert-info{
  background:var(--accent-dim);border:1px solid rgba(90,240,168,.2);color:var(--accent);
}
.alert-info::before{content:'ℹ'}
.alert-danger{
  background:#200a10;border:1px solid rgba(240,90,122,.2);color:#f07090;
}
.alert-danger::before{content:'⛔'}
.alert code{font-family:'IBM Plex Mono',monospace;font-size:.85em}

/* ═══════════════════════════════════════ FUNCTION CARDS ═══ */
.fn-card{
  background:var(--bg2);border:1px solid var(--border);border-radius:10px;
  margin-bottom:1.1rem;overflow:hidden;transition:border-color .2s;
}
.fn-card:target{border-color:var(--fn-color);box-shadow:0 0 0 3px var(--badge-fn-bg)}
.fn-header{
  padding:1.1rem 1.4rem;border-bottom:1px solid var(--border);
  display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;
}
.fn-sig{font-family:'IBM Plex Mono',monospace;font-size:.88rem;font-weight:600;color:var(--text-bright);word-break:break-all}
.fn-sig .fn-name{color:var(--fn-color)}
.fn-sig .fn-param{color:var(--str-color);font-style:italic;font-weight:400}
.fn-sig .fn-paren{color:var(--text-dim)}
.fn-sig .fn-opt{color:var(--warn);font-weight:400;font-size:.8em}
.fn-badge{
  font-size:.63rem;letter-spacing:.07em;text-transform:uppercase;
  padding:.18rem .55rem;border-radius:100px;white-space:nowrap;margin-top:2px;
}
.badge-bool{background:#1a3a5a;color:#3dd4e8;border:1px solid #2a5a80}
.badge-str{background:var(--accent-dim);color:var(--accent);border:1px solid rgba(90,240,168,.25)}
.badge-num{background:var(--warn-dim);color:var(--warn);border:1px solid rgba(240,192,90,.2)}
.badge-void{background:var(--bg3);color:var(--text-dim);border:1px solid var(--border2)}
.fn-body{padding:1.3rem 1.4rem}
.fn-desc{color:var(--text);font-size:.88rem;line-height:1.75;margin-bottom:1.1rem}
.fn-desc code{
  font-family:'IBM Plex Mono',monospace;font-size:.85em;
  color:var(--accent);background:var(--accent-dim);
  padding:.1em .4em;border-radius:3px;
}

/* ═══════════════════════════════════════ PARAMS TABLE ═══ */
.params-table{width:100%;border-collapse:collapse;font-size:.82rem;margin-bottom:1.1rem}
.params-table th{
  text-align:left;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-dim);padding:.45rem .7rem;border-bottom:1px solid var(--border);
  font-weight:500;
}
.params-table td{padding:.55rem .7rem;vertical-align:top;border-bottom:1px solid var(--border);color:var(--text)}
.params-table td:first-child{font-family:'IBM Plex Mono',monospace;color:var(--str-color);font-size:.78rem;white-space:nowrap;width:120px}
.params-table td:nth-child(2){color:var(--warn);font-family:'IBM Plex Mono',monospace;font-size:.75rem;width:75px}
.params-table tr:last-child td{border-bottom:none}

/* ═══════════════════════════════════════ CODE BLOCKS ═══ */
.code-block{
  background:var(--code-bg);border:1px solid var(--border);
  border-radius:8px;overflow:hidden;font-size:.8rem;margin-bottom:1.1rem;
}
.code-header{
  display:flex;justify-content:space-between;align-items:center;
  padding:.45rem .95rem;background:var(--bg3);border-bottom:1px solid var(--border);
  font-size:.68rem;color:var(--text-dim);font-family:'IBM Plex Mono',monospace;
}
.code-block pre{
  padding:1.15rem 1.4rem;overflow-x:auto;
  font-family:'IBM Plex Mono',monospace;line-height:1.7;color:var(--text);
}
/* syntax highlights */
.code-block pre .kw{color:var(--kw-color)}
.code-block pre .fn{color:var(--fn-color)}
.code-block pre .str{color:var(--str-color)}
.code-block pre .num{color:var(--num-color)}
.code-block pre .cm{color:var(--cm-color);font-style:italic}
.code-block pre .ret{color:var(--warn)}

.copy-btn{
  background:none;border:1px solid var(--border2);color:var(--text-dim);
  padding:.13rem .55rem;border-radius:4px;cursor:pointer;
  font-size:.63rem;font-family:'IBM Plex Mono',monospace;letter-spacing:.05em;
  transition:border-color .15s,color .15s;
}
.copy-btn:hover{border-color:var(--accent);color:var(--accent)}
.copy-btn.copied{border-color:var(--accent);color:var(--accent)}

/* ═══════════════════════════════════════ RETURN VALUE GRID ═══ */
.ret-grid{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
.ret-card{
  background:var(--bg2);border:1px solid var(--border);border-radius:9px;padding:1.1rem 1.2rem;
}
.ret-card-name{font-family:'IBM Plex Mono',monospace;font-size:.88rem;font-weight:600;color:var(--warn);margin-bottom:.4rem}
.ret-card-desc{font-size:.84rem;color:var(--text);line-height:1.65}
.ret-card-ex{
  font-family:'IBM Plex Mono',monospace;font-size:.73rem;color:var(--str-color);
  background:var(--code-bg);border-radius:5px;padding:.45rem .7rem;margin-top:.65rem;
  word-break:break-all;
}

/* ═══════════════════════════════════════ EXAMPLE CARDS ═══ */
.example-card{background:var(--bg2);border:1px solid var(--border);border-radius:10px;margin-bottom:1.75rem;overflow:hidden}
.example-header{padding:1.1rem 1.4rem;border-bottom:1px solid var(--border);background:var(--bg3)}
.example-header h3{font-family:'Instrument Serif',serif;font-size:1.1rem;font-weight:400;color:var(--text-bright);margin-bottom:.2rem}
.example-header p{font-size:.8rem;color:var(--text-dim)}
.example-body .code-block{margin:0;border:none;border-radius:0}
.example-body .code-header{background:var(--bg2)}

/* ═══════════════════════════════════════ BEST PRACTICES / INFO CARDS ═══ */
.bp-list{list-style:none;display:flex;flex-direction:column;gap:.65rem;margin-bottom:1.25rem}
.bp-list li{
  background:var(--bg2);border:1px solid var(--border);border-radius:8px;
  padding:.85rem 1.1rem;font-size:.87rem;color:var(--text);line-height:1.65;
  display:flex;gap:.75rem;align-items:flex-start;
}
.bp-list li .bp-icon{flex-shrink:0;font-size:.95rem;margin-top:.05rem}
.bp-list li code{font-family:'IBM Plex Mono',monospace;font-size:.83em;color:var(--accent);background:var(--accent-dim);padding:.1em .35em;border-radius:3px}
.bp-list li strong{color:var(--text-bright)}

/* ═══════════════════════════════════════ TROUBLESHOOT TABLE ═══ */
.trouble-table{width:100%;border-collapse:collapse;font-size:.84rem;margin-bottom:1.25rem}
.trouble-table th{
  text-align:left;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-dim);padding:.5rem .85rem;border-bottom:1px solid var(--border);font-weight:500;
}
.trouble-table td{
  padding:.65rem .85rem;vertical-align:top;border-bottom:1px solid var(--border);color:var(--text);
  font-size:.83rem;line-height:1.6;
}
.trouble-table td:first-child{
  color:var(--err);font-family:'IBM Plex Mono',monospace;font-size:.78rem;
  white-space:nowrap;vertical-align:top;padding-top:.7rem;
}
.trouble-table tr:last-child td{border-bottom:none}
.trouble-table code{font-family:'IBM Plex Mono',monospace;font-size:.83em;color:var(--accent);background:var(--accent-dim);padding:.1em .35em;border-radius:3px}

/* ═══════════════════════════════════════ PERF BADGES ═══ */
.perf-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.75rem;margin-bottom:1.25rem}
.perf-card{
  background:var(--bg2);border:1px solid var(--border);border-radius:8px;padding:1rem 1.1rem;
}
.perf-card-name{font-family:'IBM Plex Mono',monospace;font-size:.8rem;font-weight:600;color:var(--fn-color);margin-bottom:.3rem}
.perf-card-cost{font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;margin-bottom:.4rem}
.perf-cost-high{color:var(--err)}.perf-cost-med{color:var(--warn)}.perf-cost-low{color:var(--accent)}
.perf-card-desc{font-size:.79rem;color:var(--text-dim);line-height:1.55}

/* ═══════════════════════════════════════ AD SLOT ═══ */
.ad-slot{
  background:var(--bg2);border:1px dashed var(--border2);border-radius:8px;
  padding:.9rem 1.1rem;text-align:center;font-size:.75rem;color:var(--text-dim);
  margin-bottom:2rem;min-height:60px;display:flex;align-items:center;justify-content:center;
}

/* ═══════════════════════════════════════ WPAD STEPS ═══ */
.steps{display:flex;flex-direction:column;gap:.65rem;margin-bottom:1.25rem}
.step{
  display:flex;gap:1rem;align-items:flex-start;
  background:var(--bg2);border:1px solid var(--border);border-radius:8px;padding:.9rem 1.1rem;
}
.step-num{
  background:var(--accent);
  /* FIX: was #0a1a10 — dark text on light-mode green accent gave ~3.86:1 (fail).
     --accent-text is #fff in light mode (~6:1) and #0a1a10 in dark mode (~13:1). */
  color:var(--accent-text);
  border-radius:50%;
  width:22px;height:22px;display:flex;align-items:center;justify-content:center;
  font-size:.7rem;font-weight:700;flex-shrink:0;margin-top:.1rem;font-family:'IBM Plex Mono',monospace;
}
.step-body{font-size:.86rem;color:var(--text);line-height:1.65}
.step-body strong{color:var(--text-bright)}
.step-body code{font-family:'IBM Plex Mono',monospace;font-size:.83em;color:var(--accent);background:var(--accent-dim);padding:.1em .35em;border-radius:3px}

/* ═══════════════════════════════════════ TESTER ═══ */
.tester-wrap{background:var(--bg2);border:1px solid var(--border);border-radius:12px;overflow:hidden}
.tester-header{padding:1.3rem 1.4rem;border-bottom:1px solid var(--border);background:var(--bg3)}
.tester-header h3{font-family:'Instrument Serif',serif;font-size:1.1rem;font-weight:400;color:var(--text-bright);margin-bottom:.2rem}
.tester-header p{font-size:.8rem;color:var(--text-dim)}
.tester-body{padding:1.4rem;display:grid;grid-template-columns:1fr 1fr;gap:1.4rem}
.tester-col label{display:block;font-size:.63rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text);margin-bottom:.45rem}
.tester-col textarea,.tester-col input{
  width:100%;background:var(--code-bg);border:1px solid var(--border2);border-radius:7px;
  color:var(--text-bright);font-family:'IBM Plex Mono',monospace;font-size:.78rem;
  padding:.7rem .95rem;outline:none;line-height:1.65;transition:border-color .15s;
}
.tester-col textarea{min-height:260px;resize:vertical}
.tester-col textarea:focus,.tester-col input:focus{border-color:var(--accent)}
.tester-col input{margin-bottom:.65rem}
.tester-run{
  width:100%;background:var(--accent);
  /* FIX: was #0a1a10 — same issue as .step-num. Uses --accent-text variable. */
  color:var(--accent-text);
  border:none;
  padding:.7rem;border-radius:7px;font-family:'IBM Plex Mono',monospace;
  font-size:.82rem;font-weight:600;cursor:pointer;letter-spacing:.05em;
  transition:opacity .15s,transform .1s;
}
.tester-run:hover{opacity:.9}
.tester-run:active{transform:scale(.98)}
.tester-result{
  margin-top:.65rem;background:var(--code-bg);border:1px solid var(--border2);
  border-radius:7px;padding:.7rem .95rem;font-family:'IBM Plex Mono',monospace;
  font-size:.8rem;min-height:56px;color:var(--text-dim);white-space:pre-wrap;word-break:break-all;
}
.tester-result.ok{color:var(--accent);border-color:rgba(90,240,168,.3)}
.tester-result.err{color:var(--err);border-color:rgba(240,90,122,.25);background:#0f080d}

/* ═══════════════════════════════════════ INLINE UTILS ═══ */
.icode{font-family:'IBM Plex Mono',monospace;font-size:.84em;color:var(--accent);background:var(--accent-dim);padding:.1em .4em;border-radius:3px}
.mt{margin-top:1rem}

/* ── Replacements for removed inline style="" attributes ── */
/* Previously: style="color:var(--str-color)" on hero param spans */
.color-str { color: var(--str-color); }
/* Previously: style="color:var(--accent)" on the Live Tester inline link */
.color-accent { color: var(--accent); text-underline-offset: 3px; }
/* Previously: style="margin-top:.65rem" on the Result label in tester */
.mt-label { margin-top: .65rem; }

footer{width:100%;max-width:880px;border-top:1px solid var(--border);padding:1.75rem clamp(1.25rem,5vw,4rem) 2rem;margin-top:3rem;font-size:.77rem;color:var(--text-dim)}
footer a{color:var(--text-dim);text-underline-offset:3px}
footer a:hover{color:var(--accent)}

/* ═══════════════════════════════════════ RESPONSIVE ═══ */
@media(max-width:860px){
  nav{display:none}
  .tester-body{grid-template-columns:1fr}
  .ret-grid{grid-template-columns:1fr}
  .perf-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:480px){
  .perf-grid{grid-template-columns:1fr}
  .hero{padding:2.5rem 0 2rem}
}