/* ============================================================
   NBT HOST — GHIDURI (site/ghiduri/*.html, generate de server/genereaza-ghiduri.py)
   Legat doar din paginile din ghiduri/. Se sprijină pe style.css + host.css: tokens, .inv (foaia albă),
   .glass, .spot, .prod-ic, .prod-tag, .prod-go, .tlink, .crumbs, .cband. Strict alb-negru.
   1. Hero (ghid + cuprinsul ghidurilor)   5. Carduri (populare, înrudite)
   2. Căutare                              6. Teme (pagina de ghiduri)
   3. Corpul ghidului + cuprins            7. Responsive, mișcare redusă, contrast, print
   4. Cod, tabele, note, surse
   Revizia din 11.09.2026 (docs/design-review/ghiduri.md): repetițiile din markup le scoate acum generatorul
   (§4 din review), deci regulile care le ascundeau aici au plecat. ?v= al fișierului e MD5-ul lui, pus de
   generator: după o schimbare aici rulezi python3 server/genereaza-ghiduri.py.
   ============================================================ */

/* ---------- 1. HERO ---------- */
.gd-hero{position:relative;overflow:clip;
  padding:calc(var(--hd-h) + clamp(64px,9vh,112px)) var(--pad) clamp(64px,8vw,116px)}
.gd-hero-in{position:relative;z-index:2;max-width:var(--maxw);margin-inline:auto;
  display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(36px,5vw,90px);align-items:end;
  transform:translate3d(0,calc(var(--p,0) * -40px),0);opacity:calc(1 - var(--p,0) * .8)}
.gd-hero h1{font-size:clamp(2.2rem,4.6vw,4.1rem);font-weight:300;line-height:1.02;letter-spacing:-.04em;
  margin-bottom:24px;max-width:19ch}
.gd-hero h1 .ln>span{padding-right:.06em}
.gd-hero .lead{max-width:58ch}

/* a guide's last crumb is its own title, and the H1 repeats it right underneath: screen readers keep
   the crumb, the eye gets it once */
.gd-hero:not(.gd-ix) .crumbs [aria-current]{position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap}
.gd-hero:not(.gd-ix) .crumbs i:has(+ [aria-current]){display:none}

/* meta line: only the date (the topic is in the breadcrumb and on the panel, the reading time on the panel);
   a guide without a date gets no meta line at all */
.gd-meta{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:30px;padding-top:22px;border-top:1px solid var(--w05)}
.gd-meta li{display:inline-flex;align-items:center;gap:10px;font-size:13px;color:var(--w56)}
.gd-meta li::before{content:"";flex:none;width:5px;height:5px;border-radius:50%;background:var(--w56);
  box-shadow:0 0 0 3px var(--w05)}

/* the guide's facts, as a small instrument panel */
.gd-fact{position:relative;border-radius:var(--r-l);padding:20px 24px 24px;overflow:hidden}
.gd-fact>*{position:relative;z-index:2}
.gd-fact-bar{display:flex;align-items:center;gap:12px;padding-bottom:16px;border-bottom:1px solid var(--w08)}
.gd-dots{display:flex;gap:5px;flex:none}
.gd-dots i{width:6px;height:6px;border-radius:50%;background:var(--w18)}
.gd-fact-t{flex:1;min-width:0;font-family:var(--fd);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--w42);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gd-fact .prod-ic{width:38px;height:38px}
.gd-fact .prod-ic svg{width:18px;height:18px}
/* one row: steps · reading time · sections */
.gd-facts{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);margin:6px 0 22px}
.gd-facts>div{padding:20px 12px 16px 0;border-right:1px solid var(--w05)}
.gd-facts>div+div{padding-left:18px}
.gd-facts>div:last-child{border-right:0}
.gd-facts dt{font-family:var(--fd);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--w42);
  margin-bottom:12px;white-space:nowrap}
.gd-facts dd{font-family:var(--fd);font-size:clamp(2rem,3vw,2.7rem);line-height:1;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.gd-facts dd small{font-family:var(--fb);font-size:12px;letter-spacing:0;color:var(--w42);margin-left:6px}

/* the guides index: a help desk — centred title, one big search, the topics under it; no parallax
   (the search results grow the hero) */
.gd-ix .gd-hero-in{grid-template-columns:minmax(0,1fr);transform:none;opacity:1}
.gd-ix .gd-hero-copy{position:relative;width:100%;max-width:980px;margin-inline:auto;text-align:center;
  display:flex;flex-direction:column;align-items:center}
.gd-ix .crumbs{justify-content:center}
.gd-ix h1{max-width:none;font-size:clamp(2.5rem,5.8vw,5rem);margin-bottom:26px}
.gd-ix .lead{margin-inline:auto;max-width:54ch}
/* a pool of light under the search: soft, slow, transform only (reduced motion: still) */
.gd-ix .gd-hero-copy::before{content:"";position:absolute;z-index:-1;left:50%;top:64%;width:min(1180px,140vw);
  aspect-ratio:2.4;translate:-50% -50%;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgb(255 255 255/.085),rgb(255 255 255/.03) 48%,rgb(255 255 255/0) 74%);
  animation:gd-halo 22s var(--e-soft) infinite alternate}
@keyframes gd-halo{from{transform:scale(.9,.84) rotate(-4deg)}to{transform:scale(1.06,1.04) rotate(4deg)}}

/* ---------- 2. SEARCH ---------- */
.gd-search{position:relative;display:flex;align-items:center;gap:12px;margin-top:34px;max-width:680px;
  border-radius:var(--r-pill);padding:6px 8px 6px 22px;overflow:hidden;
  transition:box-shadow var(--t1) var(--e)}
.gd-search>*{position:relative;z-index:2}
.gd-search-i{width:20px;height:20px;flex:none;fill:none;stroke:var(--w72);stroke-width:1.6;stroke-linecap:round}
.gd-search input{flex:1;min-width:0;height:52px;background:transparent;border:0;outline:0;color:#fff;
  font:inherit;font-size:16px;-webkit-appearance:none;appearance:none}
.gd-search input::placeholder{color:var(--w56)}
.gd-search input::-webkit-search-cancel-button{-webkit-appearance:none}
/* the input has no outline of its own: the pill carries the keyboard ring, 2px at .72 so it reads clearly
   against the glass rim it sits on (a 1px .56 ring was hardly different from the resting rim) */
.gd-search:focus-within{box-shadow:var(--g-in),0 0 0 2px var(--w72),0 0 0 7px rgb(255 255 255/.06),0 24px 60px -28px rgb(0 0 0/.95)}
.gd-kbd{flex:none;display:grid;place-items:center;width:30px;height:30px;margin-right:6px;border-radius:8px;
  border:1px solid var(--w18);font-family:var(--fd);font-size:11px;color:var(--w56)}
@media (hover:none){.gd-kbd{display:none}}
.gd-ix .gd-search{width:100%;max-width:740px;margin-top:38px;padding:8px 10px 8px 26px}
.gd-ix .gd-search input{height:58px;font-size:17px}

.gd-res{position:relative;max-width:680px;margin-top:14px;padding:8px;border-radius:var(--r-m);border:1px solid var(--w08);
  background-color:rgb(var(--g-rgb)/var(--g-a-strong));background-image:var(--g-sheen);box-shadow:var(--g-in),var(--g-out-strong)}
.gd-ix .gd-res{width:100%;max-width:740px;text-align:left}
.gd-res-n{padding:10px 14px 8px;font-family:var(--fd);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--w56)}
.gd-res ul{display:grid}
.gd-res li a{display:grid;gap:3px;padding:12px 14px;border-radius:12px;transition:background var(--t1) var(--e)}
.gd-res li a:hover,.gd-res li a:focus-visible{background:rgb(255 255 255/.07)}
.gd-res .c{font-family:var(--fd);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--w56)}
.gd-res .t{font-size:15px;color:#fff}
.gd-res .d{font-size:13px;line-height:1.5;color:var(--w56)}
.gd-res-e{padding:4px 14px 12px;font-size:14px;line-height:1.6;color:var(--w72)}
.gd-res-e a{color:#fff;text-decoration:underline;text-underline-offset:3px}

.gd-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px;max-width:920px}
.gd-ix .gd-chips{justify-content:center}
.gd-chips a{display:inline-flex;align-items:center;gap:9px;min-height:38px;padding:8px 15px;border-radius:var(--r-pill);
  border:1px solid var(--w12);background:rgb(255 255 255/.02);font-size:13px;color:var(--w72);
  transition:border-color var(--t1) var(--e),color var(--t1) var(--e),background var(--t1) var(--e)}
.gd-chips a:hover{border-color:var(--w42);color:#fff;background:var(--w05)}
.gd-chips span{font-family:var(--fd);font-size:10px;color:var(--w56)}

/* ---------- 3. GUIDE BODY (white sheet) + TABLE OF CONTENTS ---------- */
.gd-body{padding:clamp(56px,7vw,110px) var(--pad) clamp(72px,8vw,130px)}
.gd-grid{max-width:1180px;margin-inline:auto;display:grid;grid-template-columns:250px minmax(0,1fr);
  gap:clamp(40px,5.5vw,96px);align-items:start}
.gd-side{position:sticky;top:calc(var(--hd-h) + 34px);display:grid;gap:22px}
.gd-toc summary{list-style:none;display:flex;align-items:center;gap:10px;padding:0 0 14px;border-bottom:1px solid var(--w08);
  font-family:var(--fd);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink);cursor:default}
.gd-toc summary::-webkit-details-marker{display:none}
.gd-chev{width:12px;height:12px;flex:none;display:none;margin-left:auto;transition:transform var(--t1) var(--e)}
.gd-toc ol{display:grid;gap:2px;padding-top:10px}
.gd-toc a{position:relative;display:flex;gap:12px;padding:8px 8px 8px 0;font-size:13.5px;line-height:1.45;color:var(--w56);
  transition:color var(--t1) var(--e)}
.gd-toc a b{flex:none;width:22px;padding-top:.28em;font-family:var(--fd);font-size:10px;font-weight:400;letter-spacing:.12em;color:var(--w30)}
.gd-toc a::before{content:"";position:absolute;left:-14px;top:1.05em;width:5px;height:5px;border-radius:50%;background:var(--ink);
  transform:scale(0);transition:transform var(--t1) var(--e)}
.gd-toc a:hover,.gd-toc a.gd-act,.gd-toc a.gd-act b{color:var(--ink)}
.gd-toc a.gd-act::before{transform:scale(1)}
.gd-side-help{padding:18px 18px 20px;border-radius:var(--r-m);border:1px solid var(--w08);
  background:linear-gradient(180deg,#fff,rgb(10 10 10/.035));box-shadow:inset 0 1px 0 #fff,0 20px 40px -32px rgb(0 0 0/.4)}
.gd-side-help p{font-size:13.5px;color:var(--w72);margin-bottom:12px}

.gd-art{min-width:0;max-width:780px}
.gd-intro{margin-bottom:8px}
.gd-art .gd-intro p{font-size:clamp(1.03rem,1.3vw,1.16rem);line-height:1.7;color:var(--w72)}
.gd-sec{padding-top:clamp(36px,4.4vw,58px);margin-top:clamp(36px,4.4vw,58px);border-top:1px solid var(--w08);
  scroll-margin-top:calc(var(--hd-h) + 24px)}
.gd-sec.gd-first{padding-top:0;margin-top:0;border-top:0}
.gd-art h2{font-size:clamp(1.55rem,2.5vw,2.15rem);font-weight:400;line-height:1.14;letter-spacing:-.03em;margin-bottom:22px;color:var(--ink)}
.gd-art h3{font-size:clamp(1.06rem,1.4vw,1.2rem);font-weight:600;letter-spacing:-.01em;line-height:1.35;margin:34px 0 14px;color:var(--ink)}
.gd-art h2+h3{margin-top:0}
.gd-art h4{font-size:1rem;font-weight:600;margin:26px 0 10px;color:var(--ink)}
.gd-art p{font-size:15.5px;line-height:1.78;color:var(--w72);margin-bottom:16px}
.gd-art strong{color:var(--ink);font-weight:600}
.gd-art em{font-style:italic}
.gd-art a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--w30);text-decoration-thickness:1px;
  text-underline-offset:3px;overflow-wrap:anywhere;transition:text-decoration-color var(--t1) var(--e)}
.gd-art a:hover{text-decoration-color:var(--ink)}
.gd-art a.gd-xref{font-weight:600;overflow-wrap:normal}
.gd-xref-off{font-weight:600;color:var(--ink)}
.gd-art code{font-family:var(--fm);font-size:.86em;padding:.12em .42em;border-radius:6px;background:var(--w05);
  border:1px solid var(--w08);color:var(--ink);overflow-wrap:anywhere}
.gd-art ul,.gd-art ol{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin:0 0 22px}
.gd-art li{position:relative;min-width:0;font-size:15.5px;line-height:1.72;color:var(--w72)}
.gd-art li>ul,.gd-art li>ol,.gd-art li>.gd-code,.gd-art li>p+p{margin-top:10px}
.gd-art li>ul:last-child,.gd-art li>ol:last-child,.gd-art li>.gd-code:last-child{margin-bottom:0}
.gd-art li p{margin-bottom:0}
.gd-art ul>li{padding-left:24px}
.gd-art ul>li::before{content:"";position:absolute;left:2px;top:.86em;width:10px;height:1px;background:var(--w42)}
/* numbered steps: a bead per step and a thin rail between them; the rail draws itself as the step
   scrolls in (scroll-driven, where supported; elsewhere it is simply there) */
.gd-art ol>li{counter-increment:gd;padding-left:48px;min-height:30px}
.gd-art ol>li::before{content:counter(gd);position:absolute;left:0;top:-.06em;z-index:1;width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;border:1px solid var(--w18);background:var(--bg);
  box-shadow:inset 0 1px 0 #fff,0 4px 10px -6px rgb(0 0 0/.25);
  font-family:var(--fd);font-size:11.5px;color:var(--ink);font-variant-numeric:tabular-nums}
.gd-art ol>li:not(:last-child)::after{content:"";position:absolute;left:15px;top:32px;bottom:-12px;width:1px;background:var(--w12);
  transform-origin:50% 0}

/* ---------- 4. CODE, TABLES, NOTES, SOURCES ---------- */
.gd-code{position:relative;margin:4px 0 22px}
.gd-code pre{margin:0;padding:20px 96px 20px 22px;border-radius:var(--r-m);background:#0a0a0a;color:rgba(255,255,255,.9);
  box-shadow:inset 0 1px 0 rgb(255 255 255/.1),0 18px 40px -28px rgb(0 0 0/.6);
  overflow-x:auto;font-family:var(--fm);font-size:13.5px;line-height:1.7;tab-size:2}
.gd-art .gd-code code{font:inherit;background:none;border:0;padding:0;color:inherit;overflow-wrap:normal}
.gd-code pre::selection,.gd-code code::selection{background:#fff;color:#0a0a0a}
.gd-copy{position:absolute;top:12px;right:12px;min-height:30px;padding:7px 12px;border-radius:var(--r-pill);
  border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.06);color:#fff;
  font-family:var(--fd);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;cursor:pointer;
  transition:background var(--t1) var(--e),border-color var(--t1) var(--e),color var(--t1) var(--e)}
.gd-copy:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.5)}
.gd-copy.gd-ok{background:#fff;color:#0a0a0a;border-color:#fff}

.gd-tbl{margin:6px 0 24px;overflow-x:auto;border:1px solid var(--w08);border-radius:var(--r-m);
  box-shadow:inset 0 1px 0 #fff,0 18px 40px -34px rgb(0 0 0/.35)}
.gd-tbl table{width:100%;border-collapse:collapse;font-size:14px}
.gd-tbl th,.gd-tbl td{text-align:left;vertical-align:top;padding:13px 16px;border-bottom:1px solid var(--w08);line-height:1.55;color:var(--w72)}
.gd-tbl tr:last-child>*{border-bottom:0}
.gd-tbl thead th{font-family:var(--fd);font-size:9.5px;font-weight:400;letter-spacing:.18em;text-transform:uppercase;
  color:var(--w56);background:var(--w03);white-space:nowrap}
.gd-tbl tbody th{font-weight:600;color:var(--ink)}
/* values in cells (servers, DNS names, SPF) stay whole on wide screens instead of breaking mid-word */
.gd-art .gd-tbl code{overflow-wrap:normal;word-break:normal}
/* phones: every row becomes a card — the row name on top, then each value under its column name (td[data-l]) */
@media (max-width:640px){
  .gd-tbl table,.gd-tbl tbody,.gd-tbl tr,.gd-tbl th,.gd-tbl td{display:block;width:auto}
  .gd-tbl thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .gd-tbl tbody tr{padding:14px 16px;border-bottom:1px solid var(--w08)}
  .gd-tbl tbody tr:last-child{border-bottom:0}
  .gd-tbl th,.gd-tbl td{padding:0;border:0}
  .gd-tbl tbody th{margin-bottom:6px}
  .gd-tbl td{display:grid;grid-template-columns:minmax(76px,30%) minmax(0,1fr);gap:12px;padding:4px 0}
  .gd-tbl td::before{content:attr(data-l);font-family:var(--fd);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
    color:var(--w56);padding-top:.45em}
  .gd-tbl td:not([data-l]){grid-template-columns:minmax(0,1fr)}
  .gd-tbl td:not([data-l])::before{display:none}
  .gd-art .gd-tbl code{overflow-wrap:anywhere}
}

/* a note: a soft tile on the sheet with a black bead, instead of a boxed callout with a thick left rule */
.gd-note{position:relative;display:flex;gap:14px;align-items:flex-start;margin:6px 0 26px;padding:18px 22px 18px 18px;
  border-radius:18px;border:1px solid var(--w08);
  background:linear-gradient(180deg,rgb(10 10 10/.018),rgb(10 10 10/.045));box-shadow:inset 0 1px 0 #fff}
.gd-note-i{flex:none;width:24px;height:24px;margin-top:.12em;border-radius:50%;display:grid;place-items:center;
  background:#0a0a0a;color:#fff;font-family:var(--fd);font-size:11px;
  box-shadow:inset 0 1px 0 rgb(255 255 255/.24),inset 0 -2px 4px rgb(0 0 0/.5),0 6px 14px -8px rgb(0 0 0/.55)}
.gd-note>div{min-width:0}
.gd-art .gd-note p{font-size:15px;margin-bottom:8px}
.gd-note>div>*:last-child{margin-bottom:0}
.gd-hr{border:0;height:1px;background:var(--w08);margin:32px 0}

.gd-src{margin-top:clamp(48px,6vw,80px);padding:24px 26px 20px;border-radius:var(--r-m);border:1px solid var(--w08)}
.gd-art .gd-src-t{margin:0 0 12px;font-family:var(--fd);font-size:10px;font-weight:400;letter-spacing:.24em;
  text-transform:uppercase;color:var(--w56)}
.gd-art .gd-src ol{display:grid;gap:0;margin:0}
.gd-art .gd-src li{padding:0;min-height:0;counter-increment:none;border-top:1px solid var(--w05)}
.gd-art .gd-src li::before,.gd-art .gd-src li::after{display:none}
.gd-art .gd-src li>a{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:12px 0;
  text-decoration:none;font-size:14px;color:var(--w72);transition:color var(--t1) var(--e)}
.gd-art .gd-src li>a:hover{color:var(--ink)}
.gd-src .l{min-width:0}
.gd-src .gd-url{font-family:var(--fm);font-size:12.5px;overflow-wrap:anywhere}
.gd-src li>.l{display:block;padding:12px 0;font-size:14px}
.gd-src .u{flex:none;font-family:var(--fm);font-size:11.5px;color:var(--w56)}
.gd-art .gd-src-n{margin:14px 0 0;font-size:12.5px;line-height:1.6;color:var(--w56)}

/* ---------- 5. CARDS (popular, related) ---------- */
.gd-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,22px)}
.gd-card{position:relative;display:flex;flex-direction:column;border-radius:var(--r-l);padding:clamp(22px,2.3vw,32px);
  overflow:hidden;color:inherit;transition:translate .5s var(--e)}
.gd-card>*{position:relative;z-index:2}
.gd-card:hover{translate:0 -4px}
.gd-card-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:clamp(24px,2.8vw,40px)}
.gd-card h3{font-size:clamp(1.2rem,1.6vw,1.45rem);font-weight:400;letter-spacing:-.025em;line-height:1.25;margin-bottom:12px}
.gd-card p{font-size:14px;line-height:1.62;color:var(--w56);margin-bottom:24px}
.gd-card .prod-go{margin-top:auto}
.gd-card:hover .prod-go{color:var(--ink)}
.gd-card:hover .prod-go svg{transform:translateX(5px)}
.gd-all{display:flex;justify-content:center;margin-top:34px}
.gd-pop,.gd-cats{padding:var(--sec) var(--pad)}
.gd-in{max-width:var(--maxw);margin-inline:auto}

/* popular = a numbered start path: tag, number, title (their descriptions are in the topic list below) */
.gd-pop .gd-cards{counter-reset:gd-pop}
.gd-pop .gd-card{counter-increment:gd-pop;min-height:clamp(210px,17vw,250px)}
.gd-pop .gd-card-top{margin-bottom:0;align-items:flex-start}
/* the number is decoration: "/ ''" keeps it out of the link's spoken name where supported */
.gd-pop .gd-card-top::after{content:counter(gd-pop,decimal-leading-zero);content:counter(gd-pop,decimal-leading-zero) / "";font-family:var(--fd);
  font-size:clamp(2.2rem,3.1vw,2.9rem);line-height:.8;letter-spacing:-.01em;color:transparent;
  -webkit-text-stroke:1px var(--w30);transition:-webkit-text-stroke-color var(--t2) var(--e)}
.gd-pop .gd-card:hover .gd-card-top::after{-webkit-text-stroke-color:var(--ink)}
.gd-pop .gd-card h3{margin:auto 0 0;padding-top:clamp(30px,3.4vw,48px);max-width:22ch}
.gd-pop .gd-card .prod-go{margin-top:20px}

/* ---------- 6. TOPICS (guides index): glass cards — small topics in pairs, big ones across the row ----------
   Not CSS columns: WebKit paints composited children of a multi-column box (the reveal, the hover moves)
   in the wrong column, and the cards spilled over the contact band. A grid is exact in every engine. */
.gd-cats{position:relative;isolation:isolate;overflow-x:clip}
/* the glass needs light behind it. script.js adds the ambient layer (host.css 13.8) only to its own list
   of sections, so this one draws its two shapes here: soft, transform-only, still on phones */
.gd-cats::before,.gd-cats::after{content:"";position:absolute;z-index:-1;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgb(255 255 255/.085),rgb(255 255 255/.03) 46%,rgb(255 255 255/0) 72%)}
.gd-cats::before{width:64vmax;height:64vmax;left:-24vmax;top:6%}
.gd-cats::after{width:56vmax;height:56vmax;right:-22vmax;bottom:4%;opacity:.85}
@media (hover:hover) and (min-width:761px){
  .gd-cats::before{animation:gl-amb-1 52s var(--e-soft) infinite alternate}
  .gd-cats::after{animation:gl-amb-2 44s var(--e-soft) infinite alternate}
}
.gd-cat-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,1.6vw,22px);align-items:stretch}
/* every topic is a .glass card: the tint, sheen, rim and their contrast / forced-colours fallbacks come from
   host.css §13 */
.gd-cat{position:relative;min-width:0;padding:clamp(24px,2.4vw,32px) clamp(22px,2.4vw,32px) clamp(12px,1.2vw,18px);
  border-radius:var(--r-l);scroll-margin-top:calc(var(--hd-h) + 20px)}
.gd-cat>*{position:relative;z-index:2}
.gd-cat-h{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"ic h n" "p p p";
  column-gap:16px;align-items:center;padding-bottom:20px;margin-bottom:6px;border-bottom:1px solid var(--w08)}
.gd-cat-h .prod-ic{grid-area:ic;width:46px;height:46px}
.gd-cat-h h3{grid-area:h;font-size:clamp(1.3rem,1.8vw,1.6rem);font-weight:400;letter-spacing:-.03em;line-height:1.15}
.gd-cat-h p{grid-area:p;margin-top:14px;font-size:14px;line-height:1.6;color:var(--w56);max-width:52ch}
.gd-cat-n{grid-area:n;justify-self:end;padding:6px 12px;border:1px solid var(--w12);border-radius:var(--r-pill);
  font-family:var(--fd);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--w72);white-space:nowrap}
.gd-list{display:grid}
.gd-list li+li{border-top:1px solid var(--w05)}
.gd-list a{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:14px;align-items:start;
  padding:16px 12px;margin-inline:-12px;border-radius:14px;color:inherit;transition:background var(--t1) var(--e)}
.gd-list .n{font-family:var(--fd);font-size:10.5px;letter-spacing:.14em;color:var(--w30);padding-top:.45em}
.gd-list .tx{display:grid;gap:5px;transition:transform var(--t2) var(--e)}
.gd-list .t{font-size:clamp(.98rem,1.2vw,1.08rem);line-height:1.4;color:var(--w96);letter-spacing:-.01em}
.gd-list .d{font-size:13.5px;line-height:1.55;color:var(--w56)}
.gd-list svg{margin:.45em 0 0;color:var(--w42);transition:transform var(--t2) var(--e),color var(--t1) var(--e)}
.gd-list a:hover,.gd-list a:focus-visible{background:rgb(255 255 255/.055)}
.gd-list a:hover .tx{transform:translateX(4px)}
.gd-list a:hover svg{color:#fff;transform:translateX(4px)}
/* a topic with five guides or more takes the whole row: its header on the left, the guides in two columns.
   So does a small topic left alone at the end (an odd count of small topics after an even count of big ones —
   the case today: 9 small, 2 big; re-check the last row if the topics change) */
.gd-cat:has(.gd-list > li:nth-child(5)),
.gd-cat:last-child:nth-child(odd):not(:has(.gd-list > li:nth-child(5))){grid-column:1 / -1}
@media (min-width:761px){
  .gd-cat:has(.gd-list > li:nth-child(5)) .gd-list{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(22px,2.6vw,40px)}
  .gd-cat:has(.gd-list > li:nth-child(5)) .gd-list li+li{border-top:0}
  .gd-cat:has(.gd-list > li:nth-child(5)) .gd-list li:nth-child(n+3){border-top:1px solid var(--w05)}
}
/* side by side only while the grid has two columns; below that every card stacks the same way */
@media (min-width:981px){
  .gd-cat:has(.gd-list > li:nth-child(5)),
  .gd-cat:last-child:nth-child(odd){display:grid;grid-template-columns:minmax(0,.36fr) minmax(0,1fr);
    column-gap:clamp(28px,3.6vw,60px);align-items:start}
  /* the header column is narrow: the count goes under the name instead of squeezing it onto two lines */
  :is(.gd-cat:has(.gd-list > li:nth-child(5)),.gd-cat:last-child:nth-child(odd)) .gd-cat-h{
    grid-template-columns:auto minmax(0,1fr);grid-template-areas:"ic h" "ic n" "p p";row-gap:4px;
    padding-bottom:0;margin:0;border:0}
  :is(.gd-cat:has(.gd-list > li:nth-child(5)),.gd-cat:last-child:nth-child(odd)) .gd-cat-n{
    justify-self:start;padding:0;border:0;color:var(--w56)}
  :is(.gd-cat:has(.gd-list > li:nth-child(5)),.gd-cat:last-child:nth-child(odd)) .gd-list{margin-top:-6px}
}

/* ---------- 7. RESPONSIVE, REDUCED MOTION, CONTRAST, PRINT ---------- */
@media (max-width:1099px){
  .gd-grid{grid-template-columns:minmax(0,1fr);gap:28px}
  .gd-side{position:static}
  .gd-side-help{display:none}
  .gd-toc{border:1px solid var(--w08);border-radius:var(--r-m);padding:16px 18px;
    background:linear-gradient(180deg,#fff,rgb(10 10 10/.025));box-shadow:inset 0 1px 0 #fff,0 16px 36px -30px rgb(0 0 0/.35)}
  .gd-toc summary{padding:0;border:0;cursor:pointer;min-height:24px}
  .gd-toc[open] summary{padding-bottom:12px;border-bottom:1px solid var(--w08)}
  .gd-chev{display:block}
  .gd-toc[open] .gd-chev{transform:rotate(180deg)}
  .gd-toc a::before{display:none}
  .gd-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:980px){
  .gd-hero{padding-top:calc(var(--hd-h) + 64px)}
  .gd-hero-in{grid-template-columns:minmax(0,1fr);transform:none;opacity:1;align-items:start}
  .gd-hero-in>*{min-width:0}
  .gd-hero-vis{max-width:520px;width:100%}
  .gd-cat-list{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  /* the facts panel stays one row, a size smaller, so the guide starts sooner on a phone */
  .gd-fact{padding:16px 18px 18px}
  .gd-fact-bar{padding-bottom:12px}
  .gd-facts{margin:0 0 14px}
  .gd-facts>div{padding:14px 8px 12px 0}
  .gd-facts>div+div{padding-left:12px}
  .gd-facts dt{font-size:8px;letter-spacing:.14em;margin-bottom:9px}
  .gd-facts dd{font-size:1.7rem}
  .gd-facts dd small{font-size:11px;margin-left:4px}
  .gd-meta{margin-top:24px;padding-top:18px}
  .gd-cards{grid-template-columns:minmax(0,1fr)}
  .gd-art p,.gd-art li{font-size:15px}
  .gd-art ol>li{padding-left:42px}
  .gd-code pre{padding:50px 18px 18px;font-size:12.5px}
  .gd-copy{top:10px;right:10px;min-height:32px}
  .gd-src{padding:20px 18px 16px}
  .gd-art .gd-src li>a{flex-direction:column;gap:2px}
  .gd-search{padding-left:16px}
  .gd-ix .gd-search{margin-top:30px;padding:6px 8px 6px 18px}
  .gd-ix .gd-search input{height:52px;font-size:16px}
  .gd-ix .gd-hero-copy::before{top:58%}
  /* topics: one row you swipe, instead of six rows of pills before the first guide. 6px on top and 8px under:
     a focused chip's ring (2px + 3px offset, style.css) stays inside the scroll box instead of being cut */
  .gd-ix .gd-chips{align-self:stretch;flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;
    margin:20px calc(var(--pad) * -1) 0;padding:6px var(--pad) 8px;scroll-padding-inline:var(--pad);
    scroll-snap-type:x proximity;overscroll-behavior-x:contain;scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--pad),#000 calc(100% - var(--pad)),transparent);
    mask-image:linear-gradient(90deg,transparent,#000 var(--pad),#000 calc(100% - var(--pad)),transparent)}
  .gd-ix .gd-chips::-webkit-scrollbar{display:none}
  .gd-ix .gd-chips li{flex:none;scroll-snap-align:start}
  .gd-chips a{min-height:42px}
  .gd-pop .gd-card{min-height:0}
  .gd-pop .gd-card h3{padding-top:22px;font-size:1.2rem}
  .gd-pop .gd-card .prod-go{margin-top:16px}
  .gd-pop .gd-card-top::after{font-size:2.1rem}
  /* related guides: the three closest on a phone; "Toate ghidurile" follows right under them */
  .gd-rel .gd-card:nth-child(n+4){display:none}
  .gd-cat{padding:22px 20px 10px}
  .gd-list a{grid-template-columns:24px minmax(0,1fr);gap:12px;padding:15px 10px;margin-inline:-10px}
  .gd-list svg{display:none}
}
@media (max-width:520px){
  .gd-cat-h{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"ic h" "ic n" "p p";row-gap:6px;column-gap:14px}
  .gd-cat-h .prod-ic{width:44px;height:44px}
  .gd-cat-n{justify-self:start;padding:0;border:0;font-size:9px;color:var(--w56)}
}

@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .gd-art ol>li:not(:last-child)::after{animation:gd-rail linear both;animation-timeline:view();animation-range:entry 35% cover 55%}
  }
}
@keyframes gd-rail{from{transform:scaleY(0)}to{transform:scaleY(1)}}

@media (prefers-reduced-motion:reduce){
  .gd-hero-in{transform:none!important;opacity:1!important}
  .gd-card:hover{translate:none}
  .gd-list a:hover .tx,.gd-list a:hover svg{transform:none}
  .gd-ix .gd-hero-copy::before,.gd-cats::before,.gd-cats::after{animation:none}
}
/* iOS/macOS "Increase Contrast", Chrome "reduced transparency", Windows high contrast: the topic cards are
   .glass, so host.css 13.9 turns them solid with a real rim; here only the ambient light goes */
@media (prefers-contrast:more){
  .gd-cats::before,.gd-cats::after,.gd-ix .gd-hero-copy::before{display:none}
  .gd-list .d,.gd-cat-h p,.gd-meta li{color:var(--w96)}
}
@media (prefers-reduced-transparency:reduce){
  .gd-cats::before,.gd-cats::after,.gd-ix .gd-hero-copy::before{display:none}
}
@media (forced-colors:active){
  .gd-note,.gd-side-help{background:Canvas;color:CanvasText;border:1px solid CanvasText;box-shadow:none}
  .gd-cats::before,.gd-cats::after,.gd-ix .gd-hero-copy::before{display:none}
}
@media print{
  .gd-side,.gd-rel,.cband,.gd-copy,.gd-hero-vis{display:none!important}
  .gd-grid{grid-template-columns:1fr}
  .gd-cats::before,.gd-cats::after,.gd-ix .gd-hero-copy::before{display:none}
  .gd-cat-list{grid-template-columns:1fr}
}