.guides-page{ --gd-accent:#5bc3f9; --gd-accent-rgb:91,195,249; }
  body.guides-page{ height:auto; min-height:100vh; }
  .guides-page main{ overflow-x:clip; }
  .guides-page .landing-nav{ position:sticky; top:0; z-index:50; }

  .guides-page::before{
    content:""; position:fixed; inset:0; z-index:-3; pointer-events:none;
    background:
      radial-gradient(56rem 30rem at 50% -7rem, rgba(var(--gd-accent-rgb),.16), transparent 62%),
      linear-gradient(180deg,#070d18 0%,#050a14 55%,#03070f 100%);
  }

  .gd-wrap{ max-width:74rem; margin:0 auto; padding:0 1.1rem; }
  .gd-eyebrow{
    display:inline-flex; align-items:center; gap:.55rem;
    font-family:var(--font-display); font-size:.68rem; font-weight:800;
    letter-spacing:.26em; text-transform:uppercase; color:var(--gd-accent);
    border:1px solid rgba(var(--gd-accent-rgb),.28); background:rgba(var(--gd-accent-rgb),.08);
    padding:.5rem .95rem; border-radius:999px;
  }
  .gd-eyebrow::before{ content:""; width:6px; height:6px; border-radius:50%;
    background:var(--gd-accent); box-shadow:0 0 10px var(--gd-accent); }

  .gd-hero{ text-align:center; padding:clamp(2.5rem,6vw,4.2rem) 0 0; }
  .gd-hero .gd-eyebrow{ margin:0 auto; }
  .gd-hero h1{ font-family:var(--font-display); font-weight:900; color:#fff;
    font-size:clamp(2.1rem,5vw,3.3rem); line-height:1.08; letter-spacing:-.01em; margin:1.1rem auto 0; max-width:18ch; }
  .gd-hero h1 .gd-grad{ background:linear-gradient(100deg,#fff 0%,#cfe9fb 38%,var(--gd-accent) 100%);
    -webkit-background-clip:text; background-clip:text; color:transparent; }
  .gd-hero p{ color:#c4cde0; font-size:1.05rem; line-height:1.65; margin:1.05rem auto 0; max-width:42rem; }

  .gd-tools{ margin:clamp(3rem,7vw,4.8rem) 0 2.6rem; }
  .gd-tools-head{ text-align:center; margin-bottom:1.4rem; }
  .gd-tools-head .gd-eyebrow{ margin:0 auto .6rem; }
  .gd-tools-title{ font-family:var(--font-display); font-weight:900; color:#fff;
    font-size:clamp(1.4rem,3vw,2rem); line-height:1.1; margin:0; }
  .gd-tools-list{ display:flex; flex-direction:column; gap:1.2rem; }
  .gd-tool{ position:relative; display:grid; grid-template-columns:1.05fr 1fr; overflow:hidden;
    text-decoration:none; border-radius:1.2rem; border:1px solid rgba(var(--gd-accent-rgb),.4);
    background:linear-gradient(115deg, rgba(9,14,26,.97) 42%, rgba(12,30,50,.97));
    box-shadow:0 30px 70px -36px rgba(0,0,0,.85);
    transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
  .gd-tool:hover{ transform:translateY(-3px); border-color:rgba(var(--gd-accent-rgb),.8);
    box-shadow:0 42px 90px -34px rgba(0,0,0,.9), 0 0 46px -12px rgba(var(--gd-accent-rgb),.45); }
  .gd-tool::after{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; z-index:3;
    background:linear-gradient(180deg, var(--gd-accent), transparent); box-shadow:0 0 18px rgba(var(--gd-accent-rgb),.7); }
  .gd-tool-media{ position:relative; min-height:15rem; background:#0a0f1a; }
  .gd-tool-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
  .gd-tool-media::before{ content:""; position:absolute; inset:0; z-index:1;
    background:linear-gradient(90deg, transparent 48%, rgba(10,20,36,.55) 78%, rgba(12,30,50,.97)); }
  .gd-tool-tag{ position:absolute; z-index:2; top:1rem; left:1rem; display:inline-flex; align-items:center; gap:.4rem;
    font-family:var(--font-display); font-weight:800; font-size:.64rem; letter-spacing:.16em; text-transform:uppercase;
    color:#06121f; background:var(--gd-accent); padding:.42rem .75rem; border-radius:999px;
    box-shadow:0 0 20px rgba(var(--gd-accent-rgb),.65); }
  .gd-tool-tag svg{ width:.85rem; height:.85rem; }
  .gd-tool-body{ padding:clamp(1.5rem,3vw,2.3rem); display:flex; flex-direction:column; justify-content:center; }
  .gd-tool-body h3{ font-family:var(--font-display); font-weight:900; color:#fff;
    font-size:clamp(1.3rem,2.6vw,1.75rem); line-height:1.14; margin:0; }
  .gd-tool-body p{ color:#c4cde0; font-size:1rem; line-height:1.6; margin:.85rem 0 0; }
  .gd-tool-cta{ align-self:flex-start; display:inline-flex; align-items:center; gap:.5rem; margin-top:1.4rem;
    font-family:var(--font-display); font-weight:800; font-size:.88rem; letter-spacing:.04em; color:#06121f;
    background:linear-gradient(100deg, var(--gd-accent), #9bdcff); padding:.72rem 1.25rem; border-radius:.6rem;
    box-shadow:0 10px 24px -10px rgba(var(--gd-accent-rgb),.7); transition:transform .15s ease; }
  .gd-tool:hover .gd-tool-cta{ transform:translateX(3px); }
  .gd-tool-cta svg{ width:1rem; height:1rem; }
  @media (max-width:680px){
    .gd-tool{ grid-template-columns:1fr; }
    .gd-tool-media{ min-height:12rem; }
    .gd-tool-media::before{ background:linear-gradient(0deg, rgba(12,30,50,.97), rgba(10,20,36,.2) 55%, transparent); }
  }
  /* The capture block sits between the tools and the library now. Two overrides:
     `.lcap` ships with margin-bottom:0 (it used to CLOSE the page), which
     mid-page leaves it crowding the library below it. And its 46rem cap,
     right for a column of prose, made it
     visibly narrower than the tool cards directly above it; here it's a
     sibling of those cards, so it takes the same full wrap width. */
  .gd-wrap > .lcap{ max-width:none; margin-bottom:clamp(2.2rem, 5vw, 3rem); }

  .gd-cta-block{
    margin:clamp(3.5rem,8vw,5.5rem) auto 3rem; padding:clamp(2rem,4vw,3rem) clamp(1.5rem,4vw,2.5rem);
    border-radius:1.25rem; text-align:center; max-width:54rem;
    border:1px solid rgba(var(--gd-accent-rgb),.25);
    background:radial-gradient(60rem 24rem at 50% -10rem, rgba(var(--gd-accent-rgb),.14), transparent 62%),
               linear-gradient(180deg,rgba(13,17,28,.94),rgba(7,10,18,.97));
  }
  .gd-cta-block h2{ font-family:var(--font-display); font-weight:900; color:#fff;
    font-size:clamp(1.6rem,3.4vw,2.3rem); margin:.9rem 0 0; }
  .gd-cta-block p{ color:#c4cde0; margin:.85rem auto 1.6rem; max-width:38rem; line-height:1.6; }
  .gd-cta-primary{
    display:inline-flex; align-items:center; gap:.55rem; font-family:var(--font-display);
    font-weight:900; font-size:1rem; letter-spacing:.05em; color:#fff; text-decoration:none;
    padding:1rem 1.8rem; border-radius:.85rem; background:linear-gradient(100deg,#ff2a39,#ff5a2a);
    filter:drop-shadow(0 10px 26px rgba(227,38,54,.42)); transition:transform .18s ease, filter .18s ease;
  }
  .gd-cta-primary:hover{ transform:translateY(-1px); filter:drop-shadow(0 14px 34px rgba(227,38,54,.7)) brightness(1.05); }
  .gd-cta-primary svg{ width:1.15rem; height:1.15rem; }

  .landing-footer{ position:relative; z-index:1; }

  /* ===== Guides library (.gdl) =====================================
     Ported from the design handover in media/guides-library-handover/.
     Every selector is scoped under .gdl. The handover was written as a
     standalone page, so it styled bare element and root selectors, and two
     of its class names (rail, thumb) already exist in input.css for other
     components. Unscoped it would reach the rest of the site. */
  .gdl-sr{position:absolute;left:-9999px}
.gdl{--red:#E21429;--red-hi:#FF4A58;--blue:#5BC3F9;--gold:#F5B041;--bg:#050810;--panel:#0A1322;--line:rgba(120,148,210,.10);--line-2:rgba(120,148,210,.20);--line-3:rgba(120,148,210,.34);--text:#F0F3F8;--dim:#B8C2D6;--muted:#7C8AA4;--muted-2:#4A5570;--rest:linear-gradient(180deg,rgba(12,22,40,.6),rgba(6,12,22,.72));--raised:linear-gradient(180deg,rgba(16,32,56,.82),rgba(7,14,26,.86));--disp:'Oxanium',var(--font-display),system-ui,sans-serif}
.gdl a:hover{color:#fff}
.gdl button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
/* The handover's .lib/.inner pair, collapsed onto .gdl: this page already has
   a width (.gd-wrap, 74rem), and .inner's 82rem would have made the library the
   one band wider than the rest. overflow:CLIP, not hidden -- hidden makes a
   scroll container, which silently turns the sticky rail below into a no-op. */
.gdl{position:relative;overflow:clip;border-top:1px solid var(--line);padding-top:clamp(30px,3.4vw,52px)}
.gdl .lib-head,.gdl .lib-grid{position:relative;z-index:2}
.gdl .grid-dec{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;background:repeating-linear-gradient(90deg,rgba(120,148,210,.06) 0 1px,transparent 1px 92px),repeating-linear-gradient(0deg,rgba(120,148,210,.06) 0 1px,transparent 1px 92px);mask-image:radial-gradient(ellipse 68% 52% at 22% 0%,#000,transparent 76%)}
.gdl .lib-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:clamp(14px,2vw,26px);margin-bottom:clamp(20px,2.6vw,32px)}
.gdl .pill{display:inline-flex;align-items:center;gap:9px;padding:7px 15px;border-radius:999px;border:1px solid var(--line-2);background:var(--rest);font-family:var(--disp);font-weight:700;font-size:13px;letter-spacing:.1em;line-height:1.4;text-transform:uppercase;color:var(--blue)}
.gdl .pill i{width:6px;height:6px;border-radius:50%;background:var(--blue);box-shadow:0 0 8px var(--blue)}
.gdl .lib-head h2{font-weight:900;font-size:clamp(21px,2.6vw,32px);line-height:1.14;color:#fff;margin-top:14px;max-width:26ch}
.gdl .lib-head .lib-sub{margin-top:10px;max-width:58ch;font-size:clamp(14px,1.2vw,16px);line-height:1.6;color:var(--dim)}
.gdl .srch{position:relative;flex:0 1 300px;min-width:200px}
.gdl .srch input{width:100%;padding:12px 14px 12px 38px;border-radius:8px;border:1px solid var(--line-2);background:rgba(3,6,12,.6);color:#fff;font-family:inherit;font-size:14px}
.gdl .srch input::placeholder{color:var(--muted-2)}
.gdl .srch input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(91,195,249,.15)}
.gdl .srch svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--muted);pointer-events:none}
.gdl .lib-grid{display:grid;grid-template-columns:minmax(0,224px) minmax(0,1fr);gap:clamp(16px,2.2vw,32px);align-items:start}
.gdl .rail{position:sticky;top:90px;display:grid;gap:clamp(12px,1.4vw,16px)}
.gdl .filters{border:1px solid var(--line-2);border-radius:14px;background:var(--rest);overflow:hidden}
.gdl .filters>h3{padding:14px 16px 12px;border-bottom:1px solid var(--line);font-family:var(--disp);font-weight:700;font-size:13px;letter-spacing:.1em;line-height:1.4;text-transform:uppercase;color:var(--muted)}
.gdl .filters ul{list-style:none;padding:8px}
.gdl .fbtn{width:100%;display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;font-size:13.5px;font-weight:500;color:var(--dim);text-align:left;transition:background .18s,color .18s}
.gdl .fbtn:hover{background:rgba(120,148,210,.08);color:#fff}
.gdl .fbtn b{margin-left:auto;font-family:var(--disp);font-weight:700;font-size:11px;color:var(--muted-2);font-variant-numeric:tabular-nums}
.gdl .fbtn[aria-pressed="true"]{background:linear-gradient(90deg,rgba(91,195,249,.16),rgba(91,195,249,.04));color:#fff;box-shadow:inset 0 0 0 1px rgba(91,195,249,.3)}
.gdl .fbtn[aria-pressed="true"] b{color:var(--blue)}
.gdl .promo{position:relative;border:1px solid var(--line-2);border-radius:14px;background:var(--raised);padding:clamp(16px,1.8vw,20px);overflow:hidden}
.gdl .promo:after{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,var(--blue),transparent)}
.gdl .promo .ic{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:rgba(91,195,249,.14);border:1px solid rgba(91,195,249,.3);color:var(--blue);margin-bottom:13px}
.gdl .promo .ic svg{width:15px;height:15px}
.gdl .promo b{display:block;font-family:var(--disp);font-weight:700;font-size:14.5px;line-height:1.3;letter-spacing:-.008em;color:#fff}
.gdl .promo p{margin-top:8px;font-size:13px;line-height:1.55;color:var(--dim);text-wrap:pretty}
.gdl .promo a{display:inline-flex;align-items:center;gap:7px;margin-top:14px;font-family:var(--disp);font-weight:700;font-size:13px;letter-spacing:.02em;color:var(--blue)}
.gdl .promo a svg{width:11px;height:11px}
.gdl .promo a:hover{color:#fff}
.gdl .cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.5vw,18px)}
.gdl .gcard{position:relative;display:flex;flex-direction:column;border:1px solid var(--line-2);border-radius:14px;background:var(--rest);overflow:hidden;transition:border-color .22s,box-shadow .26s,transform .22s}
.gdl .gcard:hover{transform:translateY(-3px);border-color:var(--line-3);box-shadow:0 26px 56px -26px rgba(0,0,0,.95),0 0 0 1px rgba(91,195,249,.1)}
.gdl .thumb{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:#0b0f18;border-bottom:1px solid var(--line)}
.gdl .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.gdl .gcard:hover .thumb img{transform:scale(1.04)}
.gdl .ph{position:absolute;inset:0;display:grid;place-items:center;padding:12px;text-align:center;background:repeating-linear-gradient(90deg,rgba(120,148,210,.05) 0 1px,transparent 1px 9px),linear-gradient(135deg,#16203a,#0a1020)}
.gdl .ph span{font-family:var(--disp);font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2)}
.gdl .body{flex:1;padding:clamp(14px,1.6vw,18px) clamp(14px,1.6vw,18px) clamp(12px,1.4vw,15px)}
.gdl .cat{display:block;font-family:var(--disp);font-weight:700;font-size:13px;letter-spacing:.1em;line-height:1.4;text-transform:uppercase;color:var(--blue);margin-bottom:9px}
.gdl .gcard h3{font-weight:900;font-size:15.5px;line-height:1.32}
.gdl .gcard h3 a{color:#fff}
.gdl .gcard h3 a:hover{color:var(--blue)}
.gdl .gcard .sum{margin-top:9px;font-size:13.5px;line-height:1.56;color:var(--muted);text-wrap:pretty}
.gdl .gcard footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px clamp(14px,1.6vw,18px);border-top:1px solid var(--line);background:rgba(3,6,12,.4)}
.gdl .rt{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muted)}
.gdl .rt svg{width:13px;height:13px;flex:0 0 auto}
.gdl .read{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--dim)}
.gdl .read svg{width:10px;height:10px}
.gdl .gcard:hover .read{color:var(--blue)}
.gdl .pager{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;margin-top:clamp(22px,2.6vw,34px);padding-top:clamp(18px,2.2vw,26px);border-top:1px solid var(--line)}
.gdl .pager .shown{font-size:13px;color:var(--muted)}
.gdl .pages{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.gdl .pg{min-width:34px;height:34px;padding:0 9px;border-radius:8px;display:grid;place-items:center;border:1px solid transparent;font-family:var(--disp);font-weight:700;font-size:13.5px;color:var(--dim);transition:background .18s,color .18s,border-color .18s}
.gdl .pg:hover{background:rgba(120,148,210,.1);color:#fff}
.gdl .pg[aria-current="page"]{background:var(--blue);color:#05121c;border-color:var(--blue)}
.gdl .pg[disabled]{color:var(--muted-2);cursor:not-allowed;background:none}
.gdl .pg.gap{cursor:default;color:var(--muted-2)}
.gdl .pg.gap:hover{background:none}
.gdl .pg svg{width:13px;height:13px}
.gdl .empty{grid-column:1/-1;padding:clamp(34px,5vw,64px) 20px;text-align:center;border:1px dashed var(--line-2);border-radius:14px}
.gdl .empty b{display:block;font-family:var(--disp);font-weight:700;font-size:16px;color:#fff}
.gdl .empty p{margin-top:9px;font-size:13.5px;color:var(--muted)}
@media(max-width:1080px){.gdl .cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:820px){.gdl .lib-grid{grid-template-columns:minmax(0,1fr)}
.gdl .rail{position:static;grid-template-columns:minmax(0,1fr);gap:12px}
.gdl .filters ul{display:flex;flex-wrap:wrap;gap:6px;padding:10px}
.gdl .fbtn{width:auto;padding:8px 12px;border:1px solid var(--line-2);border-radius:999px;font-size:13px}
.gdl .fbtn b{margin-left:6px}}
@media(max-width:560px){.gdl .cards{grid-template-columns:minmax(0,1fr)}
.gdl .lib-head{flex-direction:column;align-items:stretch}
.gdl .srch{flex:1 1 auto}}
@media(prefers-reduced-motion:reduce){.gdl .gcard:hover{transform:none}
.gdl .gcard:hover .thumb img{transform:none}}