/*
Theme Name: WP Device Guard
Theme URI: https://wpdeviceguard.com
Author: WP Device Guard
Description: Product site for WP Device Guard, designed as a device register rather than a landing page. The subject is machine identity — hardware IDs, asset tags, audit ledgers — so the page borrows from institutional documents: hairline rules, a numbered margin spine, register tables, and decisions that arrive as a stamp. Type is Archivo and IBM Plex Mono, self-hosted, so the page makes no third-party requests.
Version: 2.0.0
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: wpdeviceguard
*/

/* ─── faces ────────────────────────────────────────────────────────────── */
@font-face{
  font-family:'Archivo';src:url('assets/fonts/archivo-var-latin.woff2') format('woff2-variations');
  font-weight:400 800;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Plex Mono';src:url('assets/fonts/plexmono-400-latin.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Plex Mono';src:url('assets/fonts/plexmono-500-latin.woff2') format('woff2');
  font-weight:500;font-style:normal;font-display:swap;
}

/* ─── tokens ───────────────────────────────────────────────────────────── */
:root{
  --paper:#e4e4dd;      /* concrete / manila stock */
  --sheet:#f2f2ec;      /* inset panels */
  --ink:#15150f;        /* warm near-black */
  --ink-70:#4a4a41;     /* 7.00:1 on paper */
  /* Carries every label, section mark and table header, so it is held to
     the 4.5:1 body-text threshold rather than the 3:1 large-text one. */
  --ink-45:#63635b;     /* 4.74:1 on paper */
  --rule:rgba(21,21,15,.22);
  --hair:rgba(21,21,15,.13);
  --stamp:#2b3a86;      /* official ink, the only chromatic note */
  --display:'Archivo',-apple-system,BlinkMacSystemFont,sans-serif;
  --mono:'Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}
@media (prefers-color-scheme:dark){
  :root{
    --paper:#131310; --sheet:#1c1c17; --ink:#ecece2;
    --ink-70:#a8a89b;   /* 7.75:1 */
    --ink-45:#83837a;   /* 4.87:1 */
    --rule:rgba(236,236,226,.24); --hair:rgba(236,236,226,.13); --stamp:#8b9bdc;
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font:400 16px/1.55 var(--display);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto}
a{color:inherit}
::selection{background:var(--ink);color:var(--paper)}

.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--paper);padding:10px 16px;z-index:100;font:500 13px/1 var(--mono)}
.skip:focus{left:0}
a:focus-visible,button:focus-visible,select:focus-visible{outline:2px solid var(--stamp);outline-offset:3px}

/* Visually hidden but read aloud — used for table captions that would be
   redundant on screen. Never display:none, which removes it from the
   accessibility tree entirely. */
.screen-reader-text{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
.screen-reader-text:focus{
  position:static!important;width:auto;height:auto;margin:0;clip:auto;clip-path:none;
}

/* ─── the sheet: a document with a numbered margin ─────────────────────── */
.sheet{
  width:min(1160px,100% - 36px);margin-inline:auto;
  display:grid;grid-template-columns:88px minmax(0,1fr);
}
.sheet > .mark{
  grid-column:1;font:500 11px/1 var(--mono);letter-spacing:.1em;color:var(--ink-45);
  padding-top:6px;border-right:1px solid var(--hair);
}
.sheet > .body{grid-column:2;padding-left:34px}
@media(max-width:760px){
  .sheet{grid-template-columns:1fr;gap:14px}
  .sheet > .mark{grid-column:1;border-right:0;border-bottom:1px solid var(--hair);padding-bottom:8px}
  .sheet > .body{grid-column:1;padding-left:0}
}

/* ─── masthead ─────────────────────────────────────────────────────────── */
.masthead{border-bottom:1px solid var(--ink)}
.masthead .row{
  width:min(1160px,100% - 36px);margin-inline:auto;
  display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  padding:16px 0;font:500 11.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;
}
.masthead .name{font-weight:500;color:var(--ink);text-decoration:none}
.masthead nav{display:flex;gap:12px}
/* WCAG 2.2 target size (2.5.8): nav links are not inline body text, so
   they need a 24x24 minimum hit area. Padding gets them there without
   changing the typographic rhythm. */
.masthead nav a{color:var(--ink-45);text-decoration:none;padding:6px 8px;min-height:24px;display:inline-flex;align-items:center}
.masthead nav a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
@media(max-width:760px){.masthead nav{display:none}}

/* ─── hero ─────────────────────────────────────────────────────────────── */
.hero{padding:52px 0 0}
/* Sized so the statement and the decision panel share one screen. An
   earlier pass ran the headline to 132px, which pushed the panel — the
   thing that actually explains the product — below the fold. */
.hero .headline{
  font-family:var(--display);font-weight:800;
  font-size:clamp(36px,5.6vw,72px);line-height:.94;letter-spacing:-.042em;
  margin:0 0 26px;text-wrap:balance;
}
.hero .headline .quiet{color:var(--ink-45)}
.hero .lede{
  font-size:clamp(16px,1.55vw,18.5px);line-height:1.5;color:var(--ink-70);
  max-width:42ch;margin:0 0 26px;font-weight:400;
}
.hero .lede code{font:400 .92em/1 var(--mono);background:var(--sheet);padding:2px 6px}

/* the two-up: statement left, decision right */
.hero-grid{display:grid;grid-template-columns:1.04fr .96fr;gap:52px;align-items:start;padding-bottom:60px}
@media(max-width:940px){.hero-grid{grid-template-columns:1fr;gap:38px}}

/* quick reassurance under the statement */
.assure{display:flex;flex-wrap:wrap;gap:10px 22px;padding-top:4px}
.assure li{display:flex;align-items:center;gap:8px;list-style:none;font:400 13.5px/1.3 var(--display);color:var(--ink-70)}
.assure{margin:0;padding-left:0}
.assure .ico{flex:none;color:var(--ink-45)}

/* ─── the decision panel (signature) ───────────────────────────────────── */
.decision{border:1px solid var(--ink);background:var(--sheet)}
.decision .hd{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:11px 16px;border-bottom:1px solid var(--ink);
  font:500 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-45);
}
.decision .bd{padding:22px 24px 24px;position:relative}

.rowline{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px solid var(--hair);font:400 13.5px/1.4 var(--mono)}
.rowline:first-of-type{padding-top:0}
.rowline .k{color:var(--ink-45);letter-spacing:.04em;white-space:nowrap}
.rowline .v{text-align:right;word-break:break-all;color:var(--ink)}

.chooser{margin:20px 0 0;display:flex;flex-direction:column;gap:7px}
.chooser label{font:500 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-45)}
.chooser select{
  appearance:none;width:100%;border:1px solid var(--ink);background:var(--paper);color:var(--ink);
  font:400 14.5px/1.2 var(--display);padding:11px 34px 11px 12px;cursor:pointer;border-radius:0;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}
.submit{
  margin-top:14px;width:100%;border:0;border-radius:0;cursor:pointer;
  background:var(--ink);color:var(--paper);padding:14px;
  font:500 11.5px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;
}
.submit:hover{background:var(--stamp)}

/* the verdict arrives as a stamp */
.stamp{
  margin-top:22px;display:none;border:2px solid currentColor;padding:12px 16px;
  transform:rotate(-1.6deg);
}
.stamp.on{display:block}
.stamp .word{font:500 20px/1 var(--mono);letter-spacing:.24em;text-transform:uppercase;margin-bottom:7px}
.stamp .why{font:400 12.5px/1.45 var(--display);letter-spacing:0}
.stamp.refused{color:var(--ink);background:repeating-linear-gradient(45deg,transparent,transparent 7px,var(--hair) 7px,var(--hair) 8px)}
.stamp.permitted{color:var(--stamp)}
@keyframes press{0%{transform:rotate(-1.6deg) scale(1.16);opacity:0}55%{opacity:1}100%{transform:rotate(-1.6deg) scale(1);opacity:1}}
.stamp.on{animation:press .22s cubic-bezier(.2,.9,.3,1.2)}
.note{margin:12px 0 0;font:400 11.5px/1.5 var(--mono);color:var(--ink-45)}

/* ─── section furniture ────────────────────────────────────────────────── */
.band{padding:74px 0;border-top:1px solid var(--ink)}
.band.plain{border-top:1px solid var(--hair)}
.sec-title{
  font-family:var(--display);font-weight:700;
  font-size:clamp(27px,3.9vw,42px);line-height:1.03;letter-spacing:-.032em;margin:0 0 16px;text-wrap:balance;
}
.sec-intro{font-size:17px;line-height:1.5;color:var(--ink-70);max-width:54ch;margin:0 0 42px}

/* ─── register table — the page's main structural device ───────────────── */
.register{width:100%;border-collapse:collapse}
.register caption{text-align:left;font:500 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-45);padding-bottom:12px}
.register th{
  text-align:left;font:500 10.5px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-45);font-weight:500;padding:0 20px 11px 0;border-bottom:1px solid var(--ink);
}
.register td{padding:17px 20px 17px 0;border-bottom:1px solid var(--hair);vertical-align:top;font-size:15px;line-height:1.5}
.register tr:last-child td{border-bottom:0}
.register td.key{font-weight:600;white-space:nowrap}
.register td.dim{color:var(--ink-70)}
.register td.id{font:400 13px/1.5 var(--mono);color:var(--ink-70)}
@media(max-width:700px){
  .register thead{display:none}
  .register tr{display:block;border-bottom:1px solid var(--hair);padding:14px 0}
  .register tr:last-child{border-bottom:0}
  .register td{display:block;padding:2px 0;border:0}
  .register td.key{font-size:16px;margin-bottom:4px}
}

/* ─── threat entries: numbered ledger lines, not cards ─────────────────── */
.entries{border-top:1px solid var(--ink)}
.entry{display:grid;grid-template-columns:54px 1fr 1.15fr;gap:26px;padding:26px 0;border-bottom:1px solid var(--hair)}
.entry:last-child{border-bottom:0}
.entry .num{font:500 11px/1.7 var(--mono);letter-spacing:.1em;color:var(--ink-45)}
.entry h3{margin:0;font-size:19px;font-weight:650;letter-spacing:-.02em;line-height:1.25}
.entry p{margin:0;color:var(--ink-70);font-size:15px;line-height:1.55}
@media(max-width:840px){
  .entry{grid-template-columns:44px 1fr;gap:18px}
  .entry p{grid-column:2}
}

/* ─── steps: a real sequence, set as a ruled procedure ─────────────────── */
.procedure{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--ink)}
@media(max-width:840px){.procedure{grid-template-columns:1fr}}
.stepx{padding:26px 26px 30px;border-right:1px solid var(--hair)}
.stepx:last-child{border-right:0}
@media(max-width:840px){.stepx{border-right:0;border-bottom:1px solid var(--hair)}.stepx:last-child{border-bottom:0}}
.stepx .n{font:500 11px/1 var(--mono);letter-spacing:.14em;color:var(--ink-45);display:block;margin-bottom:16px}
.stepx h3{margin:0 0 9px;font-size:18px;font-weight:650;letter-spacing:-.02em}
.stepx p{margin:0 0 14px;color:var(--ink-70);font-size:14.5px;line-height:1.55}
.stepx .who{font:500 10px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--ink-45)}
@media(max-width:840px){.stepx{padding-left:0;padding-right:0}}

/* ─── ledger: the audit log, as the artefact it is ─────────────────────── */
.ledger{background:var(--ink);color:var(--paper);padding:26px 28px;overflow-x:auto}
.ledger table{border-collapse:collapse;width:100%;min-width:430px;font:400 13px/2.15 var(--mono)}
.ledger td{padding:0 22px 0 0;white-space:nowrap;color:rgba(236,236,226,.62)}
@media (prefers-color-scheme:dark){.ledger td{color:rgba(21,21,15,.6)}}
.ledger .t{color:inherit;opacity:.5}
.ledger .allow{color:#7fd6a4}
.ledger .deny{color:currentColor;font-weight:500;background:rgba(255,255,255,.1);padding:0 8px}
@media (prefers-color-scheme:dark){.ledger .deny{background:rgba(0,0,0,.14)}.ledger .allow{color:#1f7a4c}}

.split{display:grid;grid-template-columns:.82fr 1.18fr;gap:56px;align-items:center}
@media(max-width:940px){.split{grid-template-columns:1fr;gap:34px}}

/* ─── limits: struck-through ink marks ─────────────────────────────────── */
.limitlist{border-top:1px solid var(--ink)}
.limitrow{display:grid;grid-template-columns:22px 1fr;gap:18px;padding:20px 0;border-bottom:1px solid var(--hair)}
.limitrow:last-child{border-bottom:0}
.limitrow .blk{width:14px;height:14px;background:var(--ink);margin-top:5px}
.limitrow p{margin:0;color:var(--ink-70);font-size:15px;line-height:1.55}
.limitrow strong{color:var(--ink);font-weight:650}

/* ─── closing ──────────────────────────────────────────────────────────── */
.closing{padding:88px 0 96px;border-top:1px solid var(--ink)}
.closing h2{font-size:clamp(30px,5.4vw,60px);line-height:.98;letter-spacing:-.04em;font-weight:800;margin:0 0 20px;max-width:18ch}
.closing p{color:var(--ink-70);font-size:17.5px;line-height:1.5;max-width:44ch;margin:0 0 30px}
.action{
  display:inline-block;border:1px solid var(--ink);background:var(--ink);color:var(--paper);
  padding:15px 30px;text-decoration:none;font:500 11.5px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;
}
.action:hover{background:transparent;color:var(--ink)}

.colophon{border-top:1px solid var(--ink);padding:18px 0 40px}
.colophon .row{
  width:min(1160px,100% - 36px);margin-inline:auto;display:flex;justify-content:space-between;
  gap:14px;flex-wrap:wrap;font:400 11px/1.6 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-45);
}

/* ─── WP content pages ─────────────────────────────────────────────────── */
.doc{padding:66px 0 90px}
.doc .prose{max-width:66ch}
.doc .prose h1{font-size:clamp(32px,5vw,54px);line-height:1;letter-spacing:-.04em;font-weight:800;margin:0 0 22px}
.doc .prose p,.doc .prose li{color:var(--ink-70);font-size:16.5px;line-height:1.6}
.doc .prose a{color:var(--stamp)}

/* ─── decision matrix: shows the AND, without prose ────────────────────── */
.matrix{border-top:1px solid var(--ink)}
.mrow{
  display:grid;grid-template-columns:1fr 22px 1fr 30px 1.05fr;gap:16px;align-items:center;
  padding:22px 0;border-bottom:1px solid var(--hair);
}
.mrow:last-child{border-bottom:0}
.factor{display:flex;align-items:center;gap:12px;min-width:0}
.factor .ico{flex:none;color:var(--ink-45)}
.factor .txt{min-width:0}
.factor .lbl{display:block;font:500 10.5px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--ink-45);margin-bottom:4px}
.factor .val{display:flex;align-items:center;gap:7px;font-size:15px;font-weight:600;letter-spacing:-.015em}
.factor .val .ico{color:inherit}
.factor.yes .val{color:var(--ink)}
.factor.no .val{color:var(--ink)}
.factor.no .ico{color:var(--ink)}
.op{font:500 16px/1 var(--mono);color:var(--ink-45);text-align:center}
.result{
  display:inline-flex;align-items:center;gap:9px;justify-self:start;
  border:1.5px solid currentColor;padding:9px 15px;
  font:500 11.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
}
.result.permit{color:var(--stamp)}
.result.refuse{color:var(--ink);background:repeating-linear-gradient(45deg,transparent,transparent 6px,var(--hair) 6px,var(--hair) 7px)}
@media(max-width:820px){
  .mrow{grid-template-columns:1fr 1fr;gap:14px 18px;padding:20px 0}
  .op{display:none}
  .result{grid-column:1 / -1;margin-top:4px}
}

/* ─── icons inside the register table ──────────────────────────────────── */
.register td.key{display:table-cell}
.withicon{display:flex;align-items:center;gap:11px}
.withicon .ico{flex:none;color:var(--ink-45)}
@media(max-width:700px){.withicon{gap:9px}}

/* ─── procedure step icons ─────────────────────────────────────────────── */
.stepx .n{display:flex;align-items:center;justify-content:space-between;gap:10px}
.stepx .n .ico{color:var(--ink-45)}

/* ─── incident tracer ──────────────────────────────────────────────────── */
.tracer{display:grid;grid-template-columns:290px minmax(0,1fr);gap:0;border-top:1px solid var(--ink)}
@media(max-width:880px){.tracer{grid-template-columns:1fr}}
.tracer-pick{border-right:1px solid var(--hair);padding:24px 26px 26px 0}
@media(max-width:880px){.tracer-pick{border-right:0;border-bottom:1px solid var(--hair);padding:22px 0}}
.tracer-pick p{margin:0 0 16px;font-size:14px;line-height:1.55;color:var(--ink-70)}
.scenarios{display:flex;flex-direction:column;gap:0;margin:0;padding:0;list-style:none;border-top:1px solid var(--hair)}
.scenarios li{border-bottom:1px solid var(--hair)}
.scenarios button{
  width:100%;text-align:left;background:none;border:0;cursor:pointer;color:var(--ink-70);
  padding:13px 4px;font:400 14.5px/1.35 var(--display);display:flex;align-items:center;gap:11px;
}
.scenarios button .ico{flex:none;color:var(--ink-45)}
.scenarios button:hover{color:var(--ink)}
.scenarios button[aria-pressed="true"]{color:var(--ink);font-weight:650}
.scenarios button[aria-pressed="true"] .ico{color:var(--stamp)}
.tracer-out{padding:24px 0 26px 34px;min-width:0}
@media(max-width:880px){.tracer-out{padding:24px 0 0}}
.tracer-out h3{margin:0 0 4px;font-size:19px;font-weight:700;letter-spacing:-.022em}
.tracer-out .sub{margin:0 0 20px;font-size:14.5px;line-height:1.55;color:var(--ink-70)}
.trace{list-style:none;margin:0;padding:0;border-top:1px solid var(--hair)}
.trace li{
  display:grid;grid-template-columns:64px 1fr;gap:18px;padding:13px 0;
  border-bottom:1px solid var(--hair);align-items:baseline;
}
.trace li:last-child{border-bottom:0}
.trace .clock{font:500 12px/1.5 var(--mono);color:var(--ink-45);letter-spacing:.02em}
.trace .what{font-size:14.5px;line-height:1.5;color:var(--ink-70)}
.trace .what b{color:var(--ink);font-weight:650}
.trace li.hit .what b{color:var(--stamp)}
@keyframes fadeup{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.trace li{animation:fadeup .26s ease backwards}
.verdictline{
  display:inline-flex;align-items:center;gap:9px;margin-top:18px;
  border:1.5px solid currentColor;padding:9px 15px;color:var(--stamp);
  font:500 11.5px/1 var(--mono);letter-spacing:.15em;text-transform:uppercase;
}

/* ─── comparison ───────────────────────────────────────────────────────── */
.compare{width:100%;border-collapse:collapse}
.compare th{
  text-align:left;font:500 10.5px/1.35 var(--mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-45);font-weight:500;padding:0 14px 12px 0;border-bottom:1px solid var(--ink);vertical-align:bottom;
}
.compare td{padding:15px 14px 15px 0;border-bottom:1px solid var(--hair);font-size:14.5px;vertical-align:middle}
.compare tr:last-child td{border-bottom:0}
.compare td.what{font-weight:650;white-space:nowrap}
.compare tr.us td{background:color-mix(in srgb,var(--stamp) 7%,transparent)}
.compare tr.us td.what{color:var(--stamp)}
.compare .mk{display:inline-flex;align-items:center;gap:7px;font:400 13px/1 var(--display);color:var(--ink-70)}
.compare .mk .ico{flex:none}
.compare .mk.y .ico{color:var(--stamp)}
.compare .mk.n .ico{color:var(--ink-45)}
@media(max-width:820px){
  .compare thead{display:none}
  .compare tr{display:block;padding:16px 0;border-bottom:1px solid var(--hair)}
  .compare td{display:flex;justify-content:space-between;gap:14px;padding:5px 0;border:0}
  .compare td.what{font-size:16px;margin-bottom:6px}
  .compare td[data-l]::before{content:attr(data-l);font:500 10.5px/1.6 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-45)}
  .compare tr.us td{background:none}
}

/* ─── specifications ───────────────────────────────────────────────────── */
.specs{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1px;background:var(--hair);border:1px solid var(--hair)}
.spec{background:var(--paper);padding:20px 22px}
.spec dt{font:500 10.5px/1.4 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--ink-45);margin-bottom:9px}
.spec dd{margin:0;font-size:23px;font-weight:700;letter-spacing:-.03em;line-height:1.1}
.spec dd span{display:block;font-size:13px;font-weight:400;letter-spacing:0;color:var(--ink-70);margin-top:6px;line-height:1.45}

/* ─── scope, expanded ──────────────────────────────────────────────────── */
.limitrow{align-items:start}
.limitrow .detail{margin:9px 0 0;font-size:13.5px;line-height:1.55;color:var(--ink-70)}
.limitrow .instead{
  display:inline-flex;align-items:center;gap:8px;margin-top:11px;
  font:500 10.5px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-45);
}
.limitrow .instead .ico{flex:none}

/* ─── questions (native details/summary) ───────────────────────────────── */
.qa{border-top:1px solid var(--ink)}
.qa details{border-bottom:1px solid var(--hair)}
.qa summary{
  cursor:pointer;list-style:none;padding:19px 40px 19px 0;position:relative;
  font-size:16.5px;font-weight:650;letter-spacing:-.018em;min-height:24px;
}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{
  content:"";position:absolute;right:6px;top:50%;width:11px;height:11px;
  border-right:1.5px solid var(--ink-45);border-bottom:1.5px solid var(--ink-45);
  transform:translateY(-70%) rotate(45deg);transition:transform .18s ease;
}
.qa details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.qa summary:hover{color:var(--stamp)}
.qa summary:focus-visible{outline:2px solid var(--stamp);outline-offset:2px}
.qa .ans{padding:0 40px 22px 0;margin:0;font-size:15px;line-height:1.62;color:var(--ink-70);max-width:74ch}
.qa .ans + .ans{padding-top:12px}
.qa .ans code{font:400 .9em/1 var(--mono);background:var(--sheet);padding:2px 6px}