:root{
    --void:var(--sw-black, #000000);
    --panel:var(--sw-bg2, #0c0c0c);
    --raise:var(--sw-bg3, #141414);
    --line:var(--sw-line, #252525);
    --line-hot:var(--sw-line-hot, #3d2306);
    --signal:var(--sw-orange, #ff7600);
    --signal-dim:var(--sw-orange-dark, #8a4200);   /* borders and hover accents */
    /* The readable orange. --signal-dim is the brand's --sw-orange-dark, which
       is a border tone: as text it is 2.9:1 on black, well under AA. Use this
       for any orange that has to be *read* — 5.2:1 on the page, 4.5:1 on a
       raised row. */
    --signal-deep:var(--sw-orange-deep, #cc5e00);
    --text:var(--sw-text, #e8e8e8);
    --dim:var(--sw-text-dim, #8b8b8b);
    /* Between the brand's --sw-text-dim and --sw-text-dimmer; the brand has no
       token at this tier. #5c5c5c was 3.1:1 on black and 3.0:1 on --panel, well
       under the 4.5:1 AA floor, and it carries the smallest text on the page
       (footer, meta, labels, .postnav). #797979 is the lightest step that clears
       AA on BOTH grounds — 4.8:1 on the page, 4.6:1 on a raised panel — and it
       still reads a step back from --dim. */
    --faint:#797979;

    /* ── Type scale ──────────────────────────────────────────────────────
       Mirrors seowolf.org/_brand/brand.css. The locals alias the brand
       tokens with a fallback, the same var(--sw-x, default) resilience the
       colours above use, so a missing brand.css keeps these exact sizes.

       Per the brand's note on picking a base tier, this is a reading tool
       (guides, articles, blog), so its base is --sw-text-lg and headings
       follow the 1.25 modular scale from there. --t-label is the one tier
       below the brand's 13px floor: it is for short uppercase tracked
       labels only and must never carry a sentence. */
    --t-label:11px;
    --t-sm:var(--sw-text-sm, 13px);
    --t-base:var(--sw-text-base, 14px);
    --t-lg:var(--sw-text-lg, 15px);
    --h4:var(--sw-h4, 15px);
    --h3:var(--sw-h3, 18px);
    --h2:var(--sw-h2, 22px);
    --h1:var(--sw-h1, 28px);
    --display:var(--sw-display, 35px);
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background:var(--void);
    color:var(--text);
    font-family: var(--sw-font, "Courier New",Courier,monospace);
    font-size:var(--t-lg);
    line-height:1.65;
    -webkit-font-smoothing:antialiased;
  }
  a{color:var(--signal);}
  .wrap{max-width:820px;margin:0 auto;padding:28px 20px 90px;animation:page-in .32s ease;}
  @keyframes page-in{from{opacity:0;}to{opacity:1;}}
  /* Wide variant for the comparison matrix. The tables get the extra room;
     prose stays at a readable measure rather than stretching to 1180px. */
  .wrap.wide{max-width:1180px;}
  .wrap.wide article > p,
  .wrap.wide article > ul,
  .wrap.wide article > ol,
  .wrap.wide .box,
  .wrap.wide .aside{max-width:74ch;}

  /* ---- masthead ---- */
  .mast{border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:26px;}
  .mast-row{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;}
  .mast-id{display:flex;align-items:center;gap:12px;text-decoration:none;}
  .mast-id img{width:42px;height:42px;object-fit:contain;display:block;}
  .brand{
    /* Logotype, deliberately off the type scale — it is set with the mark,
       not with the copy. Everything else on the page uses a type token. */
    font-size:16px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
    color:var(--signal);margin:0;line-height:1.3;
  }
  .brand span{color:var(--text);display:block;font-size:var(--t-label);letter-spacing:.18em;font-weight:400;margin-top:2px;text-transform:uppercase;}
  .host{font-size:var(--t-label);letter-spacing:.14em;text-transform:uppercase;color:var(--faint);}
  .tagline{font-size:var(--t-base);color:var(--dim);margin:14px 0 0;max-width:60ch;}

  .navline{margin-top:14px;font-size:var(--t-sm);letter-spacing:.06em;}
  .navline a{color:var(--dim);text-decoration:none;margin-right:16px;}
  .navline a:hover{color:var(--signal);}
  .navline a.here{color:var(--signal);}

  /* ---- progress ---- */
  .meter{display:flex;justify-content:space-between;align-items:center;gap:12px;
         font-size:var(--t-sm);letter-spacing:.14em;text-transform:uppercase;color:var(--faint);
         margin-bottom:22px;flex-wrap:wrap;}
  .blocks{color:var(--signal);letter-spacing:.34em;font-size:var(--t-base);}

  /* ---- session trace: the running log of what you have answered.
     Each line is a tiny <form><button> so it can double as an edit
     control without JavaScript. ---- */
  .trace{border-left:2px solid var(--line-hot);padding:2px 0 2px 14px;margin-bottom:26px;}
  .trace-form{margin:0;padding:0;}
  .trace-line{
    display:block;width:100%;text-align:left;
    font-family:inherit;font-size:var(--t-sm);color:var(--faint);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    background:none;border:0;padding:3px 4px;margin:0;cursor:pointer;
    border-radius:2px;transition:background .12s,color .12s;
  }
  .trace-line b{color:var(--dim);font-weight:400;}
  .trace-line i{color:var(--signal-deep);font-style:normal;}
  .trace-pencil{
    opacity:0;margin-left:8px;color:var(--signal);font-size:var(--t-label);
    letter-spacing:.1em;text-transform:uppercase;transition:opacity .12s;
  }
  .trace-line:hover{background:var(--raise);color:var(--text);}
  .trace-line:hover .trace-pencil{opacity:1;}
  .trace-line:focus-visible{outline:2px solid var(--signal);outline-offset:1px;background:var(--raise);}
  div.trace-line{cursor:default;} /* the non-editable variant used on static/no-js context */
  div.trace-line:hover{background:none;color:var(--faint);}

  /* ---- question ---- */
  .qlabel{font-size:var(--t-label);letter-spacing:.2em;text-transform:uppercase;color:var(--signal);margin-bottom:10px;}
  .qlabel::before{content:"> ";}
  h2.prompt{font-size:var(--h2);line-height:1.35;font-weight:700;margin:0 0 10px;letter-spacing:-.01em;}
  .optional-badge{
    display:inline-block;vertical-align:middle;margin-left:10px;
    font-size:var(--t-label);letter-spacing:.14em;text-transform:uppercase;font-weight:400;
    color:var(--dim);border:1px solid var(--line);border-radius: var(--sw-radius, 2px);padding:3px 10px;
  }
  .qnote{font-size:var(--t-base);color:var(--dim);margin:0 0 22px;max-width:62ch;}

  fieldset{border:0;margin:0;padding:0;}
  legend{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}

  .opt{display:block;position:relative;margin-bottom:10px;animation:opt-in .28s ease backwards;}
  .opt input{position:absolute;opacity:0;width:1px;height:1px;}
  .opt-body{
    display:flex;gap:13px;align-items:flex-start;
    border:1px solid var(--line);background:var(--panel);
    padding:14px 16px;cursor:pointer;
    transition:border-color .12s,background .12s,transform .12s;
  }
  .opt-body:hover{border-color:var(--signal-dim);background:var(--raise);transform:translateX(2px);}
  .opt input:focus-visible + .opt-body{outline:2px solid var(--signal);outline-offset:2px;}
  .opt input:checked + .opt-body{
    border-color:var(--signal);background:var(--raise);
    box-shadow:inset 3px 0 0 var(--signal);
  }
  /* .chk is the ASCII "[ ]" glyph inside each option row — distinct from the
     generic .box content panel used on the legal/guide pages below. */
  .chk{color:var(--signal);flex:0 0 auto;font-weight:700;white-space:pre;}
  .chk::before{content:"[";}
  .chk::after{content:"\00a0";}
  .opt input:checked + .opt-body .chk::after{content:"x";}
  .opt-text b{display:block;font-weight:700;font-size:var(--t-lg);}
  .opt-text small{display:block;color:var(--dim);font-size:var(--t-sm);margin-top:2px;}
  .key{margin-left:auto;color:var(--faint);font-size:var(--t-label);flex:0 0 auto;padding-left:10px;}

  /* Stagger each option's entrance slightly so the list doesn't pop in as a
     single flat block. Capped at 8 so a long list doesn't lag noticeably. */
  .opt:nth-child(1){animation-delay:.02s;} .opt:nth-child(2){animation-delay:.05s;}
  .opt:nth-child(3){animation-delay:.08s;} .opt:nth-child(4){animation-delay:.11s;}
  .opt:nth-child(5){animation-delay:.14s;} .opt:nth-child(6){animation-delay:.17s;}
  .opt:nth-child(7){animation-delay:.20s;} .opt:nth-child(n+8){animation-delay:.22s;}
  @keyframes opt-in{
    from{opacity:0;transform:translateY(6px);}
    to{opacity:1;transform:translateY(0);}
  }

  /* Extras step only: two columns on wide-enough screens so the longer
     optional list doesn't turn into a long scroll. */
  .opts-grid{display:grid;grid-template-columns:1fr;gap:0;}
  @media (min-width:640px){
    .opts-grid{grid-template-columns:1fr 1fr;column-gap:10px;}
    .opts-grid .opt{margin-bottom:10px;}
  }

  /* ---- buttons ---- */
  /* Primary action sits on the RIGHT, secondary/back on the left. */
  .actions{display:flex;gap:12px;align-items:center;margin-top:26px;
           flex-wrap:wrap;justify-content:space-between;}
  button.go{
    font-family:inherit;font-size:var(--t-sm);font-weight:700;letter-spacing:.16em;text-transform:uppercase;
    background:var(--signal);color:#000;border:1px solid var(--signal);
    padding:13px 26px;cursor:pointer;transition:background .12s,color .12s;
  }
  button.go:hover{background:#000;color:var(--signal);}
  button.go:focus-visible{outline:2px solid var(--text);outline-offset:2px;}
  .ghost{
    font-family:inherit;font-size:var(--t-sm);letter-spacing:.12em;text-transform:uppercase;
    background:transparent;color:var(--dim);border:1px solid var(--line);
    padding:12px 18px;cursor:pointer;text-decoration:none;display:inline-block;
  }
  .ghost:hover{color:var(--signal);border-color:var(--signal-dim);}

  /* ---- result ---- */
  .rulenote{
    border:1px dashed var(--signal);background:var(--panel);
    padding:15px 16px;margin-bottom:22px;font-size:var(--t-base);line-height:1.65;
  }
  .rulenote b{color:var(--signal);display:block;margin-bottom:5px;}
  .verdict{border:1px solid var(--signal);background:var(--panel);margin-bottom:26px;animation:opt-in .35s ease;}
  .verdict-tag{
    background:var(--signal);color:#000;font-size:var(--t-label);font-weight:700;
    letter-spacing:.2em;text-transform:uppercase;padding:6px 14px;display:block;
  }
  .verdict-in{padding:20px 18px;}
  .pname{font-size:var(--h2);font-weight:700;line-height:1.25;margin:0 0 4px;}
  .pbrand{font-size:var(--t-sm);letter-spacing:.16em;text-transform:uppercase;color:var(--signal);margin-bottom:16px;}
  dl.spec{display:grid;grid-template-columns:auto 1fr;gap:5px 18px;margin:0 0 18px;font-size:var(--t-base);}
  dl.spec dt{color:var(--faint);white-space:nowrap;}
  dl.spec dd{margin:0;}
  .price{color:var(--signal);font-weight:700;}
  .verdict-why{font-size:var(--t-base);color:var(--dim);margin:0 0 18px;max-width:60ch;line-height:1.6;}

  .cta{
    display:inline-block;background:var(--signal);color:#000;text-decoration:none;
    font-size:var(--t-sm);font-weight:700;letter-spacing:.14em;text-transform:uppercase;
    padding:13px 24px;border:1px solid var(--signal);
  }
  .cta:hover{background:#000;color:var(--signal);}

  h3.sec{
    font-size:var(--t-sm);letter-spacing:.2em;text-transform:uppercase;color:var(--signal);
    border-bottom:1px solid var(--line);padding-bottom:8px;margin:34px 0 16px;
  }
  .reason{font-size:var(--t-base);color:var(--dim);margin:0 0 16px;max-width:66ch;}

  /* ---- the single alternative: exactly one other option, never a list ---- */
  .alt-card{border:1px dashed var(--line);background:var(--panel);padding:14px 16px;margin:0 0 8px;animation:opt-in .35s ease .08s backwards;}
  .alt-label{font-size:var(--t-label);letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin-bottom:8px;}
  .alt-row{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;}
  .alt-name{font-weight:700;font-size:var(--t-lg);display:block;}
  .alt-why{font-size:var(--t-sm);color:var(--dim);display:block;margin-top:3px;}
  .alt-right{display:flex;align-items:center;gap:14px;flex:0 0 auto;}
  .alt-link{color:var(--signal);text-decoration:none;font-size:var(--t-sm);font-weight:700;white-space:nowrap;}
  .alt-link:hover{text-decoration:underline;}

  /* ---- add-ons the visitor explicitly asked for: one compact line each ---- */
  .addon-line{
    display:flex;justify-content:space-between;align-items:flex-start;gap:16px;
    padding:11px 0;border-bottom:1px solid var(--line);
  }
  .addon-line:last-child{border-bottom:0;}
  .addon-name{color:var(--text);text-decoration:none;font-weight:700;font-size:var(--t-base);display:block;}
  .addon-name:hover{color:var(--signal);}
  .addon-why{font-size:var(--t-sm);color:var(--dim);display:block;margin-top:2px;max-width:52ch;}

  .aside{border-left:2px solid var(--signal-dim);padding:2px 0 2px 15px;margin:22px 0;
         font-size:var(--t-base);color:var(--dim);max-width:66ch;}
  .aside b{color:var(--text);font-weight:700;}

  /* ---- generic content page (legal / guide pages) ---- */
  .eyebrow{font-size:var(--t-label);letter-spacing:.2em;text-transform:uppercase;color:var(--signal);margin:0 0 10px;}
  .eyebrow::before{content:"> ";}
  h1.page-title{font-size:var(--h1);line-height:1.3;font-weight:700;margin:0 0 8px;letter-spacing:-.01em;}
  .updated{font-size:var(--t-sm);color:var(--faint);margin:0 0 30px;}

  article h2{font-size:var(--h3);color:var(--signal);margin:32px 0 10px;letter-spacing:.02em;}
  article h2:first-of-type{margin-top:0;}
  article p{font-size:var(--t-lg);color:var(--text);margin:0 0 14px;max-width:66ch;}
  article ul,article ol{margin:0 0 14px;padding-left:22px;max-width:64ch;}
  article li{font-size:var(--t-lg);margin-bottom:6px;}
  article strong{color:#fff;}
  article a{color:var(--signal);}
  .box{border:1px solid var(--line);background:var(--panel);padding:16px 18px;margin:20px 0;}
  .box.hot{border-color:var(--signal);}
  .box p:last-child{margin-bottom:0;}
  .kicker{color:var(--faint);font-size:var(--t-sm);margin:0;}

  table.legal{width:100%;border-collapse:collapse;margin:14px 0 22px;font-size:var(--t-sm);}
  table.legal th,table.legal td{border:1px solid var(--line);padding:9px 10px;text-align:left;vertical-align:top;}
  table.legal th{color:var(--signal);font-weight:700;background:var(--panel);}

  /* ---- comparison matrix (compare.php) ----
     Wikipedia's "wikitable" pattern — dense, fully bordered, sortable
     headings, zebra striping — restyled for the dark/orange theme. */
  .tablewrap{
    overflow-x:auto;margin:0 0 26px;border:1px solid var(--line);
    -webkit-overflow-scrolling:touch;
  }
  table.wikitable{
    width:100%;border-collapse:collapse;font-size:var(--t-sm);
    background:var(--void);min-width:940px;
  }
  /* The compact variant drops redundant columns (brand is in the name;
     subdomain/multi-domain flags are implied by "Covers"; org-vetted is
     implied by the validation level) so it fits a desktop viewport with
     no horizontal scrolling at all. */
  table.wikitable.compact{min-width:0;}
  table.wikitable.compact th,
  table.wikitable.compact td{padding:7px 10px;}
  table.wikitable.compact .rowname{min-width:0;width:38%;}
  table.wikitable.compact td.c,
  table.wikitable.compact th.c{text-align:center;}
  table.wikitable.compact td.r,
  table.wikitable.compact th.r{text-align:right;}
  table.wikitable.compact td.dim{color:var(--dim);}
  table.wikitable.compact .rowname a{color:var(--text);text-decoration:none;}
  table.wikitable.compact .rowname a:hover{color:var(--signal);text-decoration:underline;}
  table.wikitable.compact td.does{min-width:0;white-space:normal;}
  @media (max-width:640px){
    table.wikitable.compact{min-width:560px;}
  }
  table.wikitable th,table.wikitable td{
    border:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top;
    white-space:nowrap;
  }
  table.wikitable thead th{
    background:var(--panel);color:var(--signal);font-weight:700;
    font-size:var(--t-label);letter-spacing:.08em;text-transform:uppercase;
    position:sticky;top:0;z-index:2;
  }
  table.wikitable thead th.sortcol{cursor:pointer;user-select:none;padding-right:22px;position:sticky;}
  table.wikitable thead th.sortcol::after{
    content:"\2195";position:absolute;right:8px;opacity:.35;font-size:var(--t-label);
  }
  table.wikitable thead th[data-dir="asc"]::after{content:"\2191";opacity:1;}
  table.wikitable thead th[data-dir="desc"]::after{content:"\2193";opacity:1;}
  table.wikitable thead th.sortcol:hover{background:var(--raise);}
  table.wikitable thead th.sortcol:focus-visible{outline:2px solid var(--signal);outline-offset:-2px;}
  table.wikitable tbody tr:nth-child(odd){background:#070707;}
  table.wikitable tbody tr:hover{background:var(--raise);}
  table.wikitable th.rowname{
    font-weight:700;color:var(--text);background:transparent;
    white-space:normal;min-width:220px;
  }
  table.wikitable td.does{white-space:normal;min-width:260px;color:var(--dim);}
  table.wikitable td.num{text-align:right;color:var(--signal);font-weight:700;}
  table.wikitable td.yes{color:var(--signal);}
  table.wikitable td.no{color:var(--faint);}
  .buy{
    color:var(--signal);text-decoration:none;font-weight:700;font-size:var(--t-sm);
    letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;
  }
  .buy:hover{text-decoration:underline;}
  .free{
    color:var(--text);font-weight:700;font-size:var(--t-label);letter-spacing:.08em;
    text-transform:uppercase;border:1px solid var(--line);padding:1px 6px;
  }

  .badge{
    display:inline-block;min-width:26px;text-align:center;
    font-size:var(--t-label);font-weight:700;letter-spacing:.06em;
    padding:1px 5px;border:1px solid;margin-right:5px;
  }
  /* Proxy families. The ramp runs from "easiest to identify" (datacenter,
     held back in --faint) to "hardest to identify" (mobile and the managed
     API, filled orange), which is the axis the comparison table is sorted on. */
  .badge.dc{color:var(--faint);border-color:var(--line);}
  .badge.isp{color:var(--signal);border-color:var(--signal-dim);}
  .badge.res{color:var(--signal);border-color:var(--signal-dim);}
  .badge.mob{color:#000;background:var(--signal);border-color:var(--signal);}
  .badge.api{color:#000;background:var(--signal);border-color:var(--signal);}

  .tablenote{font-size:var(--t-sm);color:var(--dim);margin:0 0 12px;max-width:70ch;}
  .legend{margin-left:10px;white-space:nowrap;color:var(--faint);font-size:var(--t-sm);}
  .sw{display:inline-block;width:9px;height:9px;margin:0 3px 0 8px;vertical-align:middle;}
  .sw.dc{border:1px solid var(--line);}
  .sw.res{border:1px solid var(--signal-dim);background:rgba(255,118,0,.25);}
  .sw.mob{background:var(--signal);}

  article h3.lvl{
    font-size:var(--h4);color:var(--text);margin:24px 0 8px;
    border-left:3px solid var(--signal);padding-left:10px;
  }
  article code{
    background:var(--panel);border:1px solid var(--line);
    padding:1px 5px;font-size:var(--t-sm);color:var(--signal);
  }

  .steps{counter-reset:step;list-style:none;margin:0 0 24px;padding:0;}
  .steps li{
    counter-increment:step;position:relative;padding:0 0 22px 40px;
    border-left:1px solid var(--line);margin-left:13px;
  }
  .steps li:last-child{border-color:transparent;padding-bottom:0;}
  .steps li::before{
    content:counter(step,decimal-leading-zero);
    position:absolute;left:-13px;top:0;
    width:26px;height:26px;line-height:24px;text-align:center;
    background:var(--void);border:1px solid var(--signal);color:var(--signal);
    font-size:var(--t-label);font-weight:700;
  }
  .steps h3{font-size:var(--h4);margin:0 0 6px;color:#fff;}
  .steps p{font-size:var(--t-base);color:var(--dim);margin:0;max-width:60ch;}

  .backlink{display:inline-block;margin-top:8px;font-size:var(--t-base);color:var(--dim);text-decoration:none;}
  .backlink:hover{color:var(--signal);}

  /* ---- footer ---- */
  footer{border-top:1px solid var(--line);margin-top:44px;padding-top:18px;
         font-size:var(--t-sm);color:var(--faint);line-height:1.8;}
  footer p{margin:0 0 8px;max-width:70ch;}
  footer a{color:var(--dim);text-decoration:none;}
  footer a:hover{color:var(--signal);}
  .footlinks{margin:2px 0 12px;}
  .footlinks a{color:var(--signal);margin-right:14px;}
  .footlinks a:hover{color:#ff9a3d;}
  /* Legal row, last thing above the copyright. Held back from .footlinks so
     the primary footer nav still leads, but on the same --t-sm tier so it is
     not the smallest thing on the page. */
  .footlegal{margin:16px 0 8px;padding-top:14px;border-top:1px solid var(--line);}
  .footlegal a{color:var(--dim);margin-right:16px;text-decoration:none;}
  .footlegal a:hover,
  .footlegal a.here{color:var(--signal);}
  .footlogo{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
  .footlogo img{width:24px;height:24px;object-fit:contain;}
  .footlogo span{font-size:var(--t-label);letter-spacing:.1em;text-transform:uppercase;color:var(--faint);}

  /* ---- cross-tool links (header disclosure + footer columns) ---- */
  .toolsdrop{margin-top:14px;font-size:var(--t-sm);}
  .toolsdrop summary{cursor:pointer;color:var(--dim);letter-spacing:.06em;
                     list-style:none;display:inline-block;}
  .toolsdrop summary::-webkit-details-marker{display:none;}
  .toolsdrop summary:hover{color:var(--signal);}
  .toolsdrop[open] summary{color:var(--signal);}
  .toolsdrop-body{margin-top:10px;padding-left:2px;border-left:1px solid var(--line);}
  .toolsdrop-group{margin:0 0 8px;padding-left:12px;line-height:2;}
  .toolsdrop-group strong{display:block;color:var(--faint);font-weight:400;
                          text-transform:uppercase;letter-spacing:.1em;font-size:var(--t-label);}
  .toolsdrop-group a{color:var(--dim);text-decoration:none;margin-right:14px;white-space:nowrap;}
  .toolsdrop-group a:hover{color:var(--signal);}

  .foottools{display:grid;gap:18px 24px;margin:0 0 18px;
             grid-template-columns:repeat(auto-fit,minmax(150px,1fr));}
  .foottools-col h3{margin:0 0 6px;font-size:var(--t-label);font-weight:400;color:var(--faint);
                    text-transform:uppercase;letter-spacing:.1em;}
  .foottools-col a{display:block;color:var(--dim);text-decoration:none;line-height:1.9;}
  .foottools-col a:hover{color:var(--signal);}

  @media (max-width:560px){
    .wrap{padding:20px 15px 70px;}
    h2.prompt{font-size:var(--h3);}
    .pname{font-size:var(--h3);}
    dl.spec{grid-template-columns:1fr;gap:0 0;}
    dl.spec dt{margin-top:9px;}
    .key{display:none;}
    .trace-line{font-size:var(--t-sm);}
    h1.page-title{font-size:var(--h2);}
  }
  @media (prefers-reduced-motion:reduce){
    *{transition:none !important;animation:none !important;}
  }

/* ---- skip link: visible only when focused, for keyboard users ---- */
.skip{
  position:absolute;left:-9999px;top:0;z-index:99;
  background:var(--signal);color:#000;font-weight:700;
  padding:10px 16px;text-decoration:none;
  font-size:var(--t-sm);letter-spacing:.1em;text-transform:uppercase;
}
.skip:focus{left:0;}

/* h1 on the quiz page: the questions are h2, so the page still needs a
   single descriptive h1 for document outline and search results. */
.lede{
  font-size:var(--h3);font-weight:700;line-height:1.4;margin:0 0 22px;
  color:var(--text);max-width:60ch;letter-spacing:-.01em;
}
.lede em{color:var(--signal);font-style:normal;}


/* ---- back button: clearly secondary, never competing with Continue ---- */
.back{
  font-family:inherit;font-size:var(--t-sm);letter-spacing:.1em;text-transform:uppercase;
  background:none;border:0;color:var(--faint);cursor:pointer;
  padding:12px 4px;transition:color .12s;
}
.back:hover{color:var(--signal);}
.back:focus-visible{outline:2px solid var(--signal);outline-offset:2px;}
.hiddenform{display:none;}

/* ---- "why bother" block on the quiz landing step ---- */
.whybox{
  border:1px solid var(--line);background:var(--panel);
  padding:18px 20px;margin:0 0 28px;
}
.why-lead{
  font-size:var(--t-label);letter-spacing:.2em;text-transform:uppercase;
  color:var(--signal);margin:0 0 14px;font-weight:700;
}
.why-list{list-style:none;margin:0;padding:0;display:grid;gap:12px;}
.why-list li{
  font-size:var(--t-base);color:var(--dim);line-height:1.6;
  padding-left:18px;position:relative;max-width:76ch;
}
.why-list li::before{
  content:"\2713";position:absolute;left:0;top:0;color:var(--signal);font-weight:700;
}
.why-list b{color:var(--text);}
.why-list em{color:var(--text);font-style:normal;border-bottom:1px dotted var(--faint);}
.why-foot{font-size:var(--t-sm);color:var(--faint);margin:16px 0 0;}
@media (min-width:720px){
  .why-list{grid-template-columns:1fr 1fr;gap:14px 26px;}
}

/* ---- benefits recap on the result page ---- */
.trust-grid{display:grid;gap:12px;margin:0 0 22px;}
@media (min-width:680px){ .trust-grid{grid-template-columns:1fr 1fr;gap:14px 22px;} }
.trust-item{
  border-left:2px solid var(--line-hot);padding:2px 0 2px 13px;
  font-size:var(--t-sm);color:var(--dim);line-height:1.6;
}
.trust-item b{display:block;color:var(--text);font-size:var(--t-base);margin-bottom:3px;}


/* ---- quickstart panel above the comparison tables ---- */
.quickstart{
  border:1px solid var(--line);background:var(--panel);
  padding:16px 20px;margin:0 0 26px;
}
.quickstart > p:first-child{margin:0 0 10px;font-size:var(--t-base);}
.quickstart b{color:var(--text);}
ol.qs{margin:0;padding-left:20px;}
ol.qs li{font-size:var(--t-base);color:var(--dim);line-height:1.6;margin-bottom:7px;max-width:82ch;}
ol.qs li b{color:var(--text);}
.qs-foot{font-size:var(--t-sm);color:var(--faint);margin:12px 0 0;}

/* =====================================================================
   BLOG COMPONENTS
   Used by /blog/index.php (listing) and /blog/post.php (single post).
   ===================================================================== */

/* ---- breadcrumb ---- */
.crumbs{font-size:var(--t-sm);color:var(--faint);margin:0 0 18px;letter-spacing:.03em;}
.crumbs a{color:var(--dim);text-decoration:none;}
.crumbs a:hover{color:var(--signal);}
.crumbs span{margin:0 6px;}

/* ---- category pills ---- */
.pill{
  display:inline-block;font-size:var(--t-label);font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;padding:3px 9px;border:1px solid var(--line);
  color:var(--dim);text-decoration:none;background:var(--panel);
}
.pill:hover{border-color:var(--signal-dim);color:var(--signal);}
.pill.here{border-color:var(--signal);color:var(--signal);background:#140b02;}
.pill.difficulty-beginner{color:var(--signal);border-color:var(--signal-dim);}
.pill.difficulty-intermediate{color:#ffb066;border-color:#7a3f00;}
.pill.difficulty-advanced{color:#fff;background:var(--signal);border-color:var(--signal);}

/* ---- affiliate disclosure banner: auto-shown near the top of every post ---- */
.disclosure-banner{
  border:1px solid var(--line);border-left:3px solid var(--signal-dim);
  background:var(--panel);padding:11px 16px;margin:0 0 26px;
  font-size:var(--t-sm);color:var(--dim);line-height:1.6;
}
.disclosure-banner b{color:var(--text);}
.disclosure-banner a{color:var(--signal);}

.pillrow{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 24px;}

/* ---- blog index hero ---- */
.blog-hero{margin:0 0 30px;}
.blog-hero p{font-size:var(--t-base);color:var(--dim);max-width:70ch;margin:10px 0 0;}

/* ---- post grid on the listing page ---- */
.post-grid{display:grid;gap:14px;margin:0 0 30px;}
@media (min-width:720px){ .post-grid{grid-template-columns:1fr 1fr;} }

.post-card{
  border:1px solid var(--line);background:var(--panel);
  padding:18px 20px;display:flex;flex-direction:column;gap:10px;
  text-decoration:none;color:inherit;transition:border-color .12s,transform .12s;
}
.post-card:hover{border-color:var(--signal-dim);transform:translateY(-1px);}
.post-card .pillrow{margin:0;}
.post-card h2,
.post-card h3{margin:0;font-size:var(--h3);line-height:1.35;color:var(--text);}
.post-card:hover h2,
.post-card:hover h3{color:var(--signal);}
.post-card p{margin:0;font-size:var(--t-base);color:var(--dim);line-height:1.6;flex:1;}
.post-meta{font-size:var(--t-sm);color:var(--faint);letter-spacing:.04em;}
.post-meta span{margin-right:10px;}

.post-card.featured{
  grid-column:1 / -1;border-color:var(--signal-dim);
  padding:24px 26px;
}
.post-card.featured h2{font-size:var(--h2);}

/* ---- single post header ---- */
.post-head{margin:0 0 8px;}
.post-title{font-size:clamp(var(--h1),4vw,var(--display));line-height:1.25;margin:14px 0 12px;font-weight:700;letter-spacing:-.01em;}
.post-dek{font-size:var(--t-lg);color:var(--dim);max-width:68ch;margin:0 0 18px;line-height:1.6;}
.post-meta-bar{
  display:flex;flex-wrap:wrap;gap:14px;align-items:center;
  font-size:var(--t-sm);color:var(--faint);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);padding:12px 0;margin:0 0 30px;
}
.post-meta-bar b{color:var(--dim);font-weight:400;}

/* ---- table of contents ---- */
.toc{
  border:1px solid var(--line);background:var(--panel);
  padding:16px 18px;margin:0 0 30px;
}
.toc-label{
  font-size:var(--t-label);letter-spacing:.18em;text-transform:uppercase;
  color:var(--signal);margin:0 0 10px;font-weight:700;
}
.toc ol{margin:0;padding-left:20px;counter-reset:toc;}
.toc li{font-size:var(--t-base);margin-bottom:6px;}
.toc a{color:var(--dim);text-decoration:none;}
.toc a:hover{color:var(--signal);text-decoration:underline;}

/* ---- post body ---- */
.post-body h2{
  font-size:var(--h2);color:var(--text);margin:36px 0 12px;
  padding-top:6px;border-top:1px solid var(--line);
  scroll-margin-top:16px;
}
.post-body h2:first-child{border-top:0;margin-top:0;padding-top:0;}
.post-body h3{font-size:var(--h3);color:var(--signal);margin:24px 0 10px;scroll-margin-top:16px;}
.post-body p{font-size:var(--t-lg);line-height:1.75;color:var(--text);margin:0 0 16px;max-width:74ch;}
.post-body ul,.post-body ol{margin:0 0 16px;padding-left:24px;max-width:70ch;}
.post-body li{font-size:var(--t-lg);line-height:1.7;margin-bottom:7px;color:var(--text);}
.post-body strong{color:#fff;}
.post-body a{color:var(--signal);}
.post-body code{
  background:var(--panel);border:1px solid var(--line);
  padding:1px 6px;font-size:var(--t-sm);color:var(--signal);border-radius:2px;
}
.post-body pre{
  background:#070707;border:1px solid var(--line);
  padding:14px 16px;overflow-x:auto;margin:0 0 20px;
  font-size:var(--t-base);line-height:1.6;
}
.post-body pre code{background:none;border:0;padding:0;color:var(--text);}
.post-body blockquote{
  border-left:3px solid var(--signal);margin:0 0 20px;padding:2px 0 2px 16px;
  color:var(--dim);font-size:var(--t-lg);max-width:68ch;
}
.post-body table{width:100%;border-collapse:collapse;margin:0 0 20px;font-size:var(--t-base);}
.post-body th,.post-body td{border:1px solid var(--line);padding:8px 10px;text-align:left;}
.post-body th{color:var(--signal);background:var(--panel);}
.post-body img{max-width:100%;height:auto;border:1px solid var(--line);}
.post-body hr{border:0;border-top:1px solid var(--line);margin:28px 0;}

/* ---- in-article CTA box ---- */
.post-cta{
  border:1px solid var(--signal);background:var(--panel);
  padding:20px 22px;margin:28px 0;
}
.post-cta .cta-eyebrow{
  font-size:var(--t-label);letter-spacing:.18em;text-transform:uppercase;
  color:var(--signal);margin:0 0 8px;font-weight:700;
}
.post-cta h4{font-size:var(--h3);margin:0 0 8px;color:var(--text);}
.post-cta p{font-size:var(--t-base);color:var(--dim);margin:0 0 16px;max-width:60ch;}
.post-cta .cta{font-size:var(--t-sm);}

/* ---- warning / tip callouts inside posts ---- */
.callout{
  border-left:3px solid var(--signal-dim);padding:10px 16px;
  margin:0 0 20px;font-size:var(--t-base);color:var(--dim);background:var(--panel);
  max-width:74ch;
}
.callout b{color:var(--text);}
.callout.warn{border-color:var(--signal);}

/* ---- author / updated strip ---- */
.post-foot{
  border-top:1px solid var(--line);margin-top:36px;padding-top:18px;
  font-size:var(--t-sm);color:var(--faint);
}

/* ---- related posts ---- */
.related{margin-top:40px;}
.related h3{
  font-size:var(--t-label);letter-spacing:.2em;text-transform:uppercase;
  color:var(--signal);margin:0 0 16px;
}

/* ---- prev/next post nav ---- */
.postnav{
  display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:34px 0;
}
.postnav a{
  border:1px solid var(--line);background:var(--panel);padding:14px 16px;
  text-decoration:none;color:var(--dim);display:block;
}
.postnav a:hover{border-color:var(--signal-dim);color:var(--text);}
.postnav .dir{font-size:var(--t-label);letter-spacing:.14em;text-transform:uppercase;color:var(--faint);display:block;margin-bottom:5px;}
.postnav .next{text-align:right;}
@media (max-width:560px){ .postnav{grid-template-columns:1fr;} }

/* ---- filter pills on the listing page ---- */
.filterbar{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 22px;}

/* ============================================================
   Sponsor slots (Awin creatives) — see render_ad_rail() and
   render_ad_footer() in partials.php.

   Neither creative is given a fixed width here: the network serves them at
   whatever pixel size it picks, so max-width:100% with height:auto lets each
   one shrink to fit its slot and keep its own aspect ratio. Nothing is
   stretched past its natural size.
   ============================================================ */

.ad-label{
  font-size:var(--t-label);letter-spacing:.16em;text-transform:uppercase;
  color:var(--faint);margin:0 0 8px;line-height:1.6;
}

/* ---- horizontal leaderboard, top of the footer, every breakpoint ---- */
.ad-foot{
  margin:0 0 20px;padding-bottom:18px;
  border-bottom:1px solid var(--line);
  text-align:center;
}
.ad-foot .ad-label{margin-bottom:10px;}
.ad-foot a{display:inline-block;line-height:0;max-width:100%;}
.ad-foot img{max-width:100%;height:auto;display:block;}

/* ---- vertical skyscraper, right-hand rail ----
   Hidden by default and only revealed once the viewport is wide enough to
   hold a full-measure content column beside it, so it never shows up on
   phones or tablets. Change --rail-w if the creative wants another width;
   the .wrap max-widths below are derived from it. */
.ad-rail{display:none;}

@media (min-width:1100px){
  /* Two-column shell: the masthead and footer keep spanning the full width,
     while the content column and the rail share the middle row. That row is
     what pins the rail below the header and above the footer. */
  .wrap{
    --rail-w:160px;
    --rail-gap:28px;
    display:grid;
    grid-template-columns:minmax(0,1fr) var(--rail-w);
    column-gap:var(--rail-gap);
    /* 40px = the wrap's own left+right padding (border-box), so the content
       column keeps the exact measure it had before the rail existed. */
    max-width:calc(820px + 40px + var(--rail-gap) + var(--rail-w));
  }
  .wrap.wide{max-width:calc(1180px + 40px + var(--rail-gap) + var(--rail-w));}

  .wrap > .mast   {grid-column:1 / -1;grid-row:1;}
  .wrap > main    {grid-column:1;grid-row:2;min-width:0;}
  .wrap > .ad-rail{grid-column:2;grid-row:2;}
  .wrap > footer  {grid-column:1 / -1;grid-row:3;}

  /* The rail stretches to the full height of its row; the inner block is
     what actually sticks. Sticky clamps to its containing block, and a bare
     sticky grid item is not clamped by its grid area — so without this
     nesting the creative runs on over the footer at the foot of a long
     page. Keep the sticky on the inner element. */
  .ad-rail{display:block;text-align:center;}
  .ad-rail-inner{position:sticky;top:20px;}
  .ad-rail a{display:block;line-height:0;}
  .ad-rail img{max-width:100%;height:auto;display:block;margin:0 auto;}
}

/* =====================================================================
   PROXY RECOMMENDER COMPONENTS
   Added on top of the shared SeoWolf tool stylesheet.
   ===================================================================== */

/* ---- one-line positioning statement under the product name ---- */
.ptag{
  font-size:var(--t-base);color:var(--text);margin:0 0 18px;
  max-width:58ch;line-height:1.6;border-left:2px solid var(--signal);
  padding-left:12px;
}

/* ---- speed / detection gauges ----
   Five blocks restating a documented characteristic of the proxy type.
   Deliberately not a star rating: nothing here is a review score. */
.gauge{color:var(--signal);letter-spacing:.22em;font-size:var(--t-sm);white-space:nowrap;}
.gnote{color:var(--dim);font-size:var(--t-sm);display:block;margin-top:1px;}
dl.spec dd .gnote{max-width:44ch;}

/* ---- where it wins / where it does not ----
   Shown as a pair on purpose. A recommendation that only lists strengths
   is an advert; the failure modes are the part worth reading. */
.fitgrid{display:grid;gap:12px;margin:0 0 22px;}
@media (min-width:680px){ .fitgrid{grid-template-columns:1fr 1fr;gap:14px 20px;} }
.fit{
  border:1px solid var(--line);background:var(--panel);padding:14px 16px;
  font-size:var(--t-sm);color:var(--dim);line-height:1.65;
}
.fit b{display:block;font-size:var(--t-label);letter-spacing:.16em;text-transform:uppercase;margin-bottom:7px;}
.fit.good{border-left:3px solid var(--signal);}
.fit.good b{color:var(--signal);}
.fit.bad{border-left:3px solid var(--line-hot);}
.fit.bad b{color:var(--faint);}

/* ---- billing-unit callout on the comparison page ----
   Four incompatible units live in this catalogue (per IP, per GB, per Mbps,
   per request), which is the single most common source of confusion, so it
   gets its own treatment rather than a table column. */
.units{display:grid;gap:10px;margin:0 0 24px;}
@media (min-width:680px){ .units{grid-template-columns:1fr 1fr;} }
.unit{
  border-left:2px solid var(--signal-dim);padding:2px 0 2px 13px;
  font-size:var(--t-sm);color:var(--dim);line-height:1.6;
}
.unit b{display:block;color:var(--text);font-size:var(--t-base);}
.unit code{
  background:var(--panel);border:1px solid var(--line);
  padding:1px 5px;font-size:var(--t-label);color:var(--signal);
}

/* =====================================================================
   PLAIN-ENGLISH EXPLAINER (quiz) + GLOSSARY PAGE
   ===================================================================== */

/* ---- "New to this?" disclosure under each question ----
   Closed by default so it costs a reader who already knows the vocabulary
   exactly one line of screen space, and nothing at all in reading time. */
.explain{
  border:1px solid var(--line);background:var(--panel);
  margin:0 0 22px;font-size:var(--t-base);
}
.explain summary{
  cursor:pointer;color:var(--dim);padding:10px 14px;
  font-size:var(--t-sm);letter-spacing:.06em;
  list-style:none;display:block;
}
.explain summary::-webkit-details-marker{display:none;}
.explain summary::before{content:"? ";color:var(--signal);font-weight:700;}
.explain summary:hover{color:var(--signal);}
.explain[open] summary{color:var(--signal);border-bottom:1px solid var(--line);}
.explain summary:focus-visible{outline:2px solid var(--signal);outline-offset:-2px;}
.explain-body{padding:14px;}
.explain-body > p{margin:0 0 12px;color:var(--dim);line-height:1.65;max-width:66ch;}
.explain-terms{margin:0;display:grid;gap:8px 16px;}
@media (min-width:640px){ .explain-terms{grid-template-columns:auto 1fr;gap:8px 18px;} }
.explain-terms dt{margin:0;}
.explain-terms dt a{color:var(--signal);text-decoration:none;font-weight:700;white-space:nowrap;}
.explain-terms dt a:hover{text-decoration:underline;}
.explain-terms dd{margin:0;color:var(--dim);font-size:var(--t-sm);line-height:1.6;}
.explain-more{margin:14px 0 0;font-size:var(--t-sm);}

/* ---- glossary section jump-nav ---- */
.glossnav{
  display:flex;flex-wrap:wrap;gap:8px;margin:0 0 28px;
  padding-bottom:16px;border-bottom:1px solid var(--line);
}
.glossnav a{
  font-size:var(--t-sm);color:var(--dim);text-decoration:none;
  border:1px solid var(--line);background:var(--panel);padding:6px 12px;
}
.glossnav a:hover{border-color:var(--signal-dim);color:var(--signal);}

/* ---- one glossary entry ----
   scroll-margin-top keeps the heading clear of the viewport edge when an
   anchor from the quiz lands on it. */
.gterm{
  border-left:2px solid var(--line-hot);padding:2px 0 2px 15px;
  margin:0 0 26px;scroll-margin-top:20px;
}
.gterm:target{border-left-color:var(--signal);}
.gterm:target .gterm-name{color:var(--signal);}
.gterm-name{
  font-size:var(--h4);font-weight:700;margin:0 0 6px;color:var(--text);
  letter-spacing:.01em;
}
.gterm-plain{
  font-size:var(--t-base);color:var(--text);margin:0 0 10px;max-width:70ch;
  line-height:1.6;
}
.gterm-long{
  font-size:var(--t-base);color:var(--dim);margin:0 0 8px;max-width:72ch;
  line-height:1.7;
}
.gterm-see{font-size:var(--t-sm);color:var(--faint);margin:0;}
.gterm-see a{color:var(--dim);text-decoration:none;}
.gterm-see a:hover{color:var(--signal);text-decoration:underline;}

/* =====================================================================
   FREE GUIDE DOWNLOAD PAGE
   ===================================================================== */

/* ---- hero: copy on the left, the actual download on the right ----
   The button is deliberately the only orange fill above the fold, so on a
   page whose whole job is one click there is never a question which one. */
.dl-hero{
  border:1px solid var(--signal);background:var(--panel);
  padding:20px 22px;margin:0 0 30px;
  display:grid;gap:20px;
}
@media (min-width:760px){
  .dl-hero{grid-template-columns:1fr auto;align-items:center;gap:28px;}
}
.dl-lead{font-size:var(--t-lg);color:var(--text);margin:0 0 14px;line-height:1.65;max-width:62ch;}
.dl-nogate{
  font-size:var(--t-base);color:var(--dim);margin:0;max-width:62ch;line-height:1.6;
  border-left:2px solid var(--signal-dim);padding-left:12px;
}
.dl-nogate b{color:var(--text);}

.dl-hero-cta{display:flex;flex-direction:column;gap:9px;align-items:flex-start;}
@media (min-width:760px){ .dl-hero-cta{align-items:center;text-align:center;} }
.dl-btn{white-space:nowrap;font-size:var(--t-base);padding:15px 28px;}
.dl-meta{
  font-size:var(--t-label);letter-spacing:.12em;text-transform:uppercase;
  color:var(--faint);line-height:1.6;
}

/* ---- feature list ---- */
ul.feat{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:11px;max-width:80ch;}
ul.feat li{
  font-size:var(--t-base);color:var(--dim);line-height:1.65;
  padding-left:20px;position:relative;
}
ul.feat li::before{
  content:"\2713";position:absolute;left:0;top:0;color:var(--signal);font-weight:700;
}
ul.feat b{color:var(--text);}

/* ---- table of contents, part by part ---- */
.dl-part{margin:0 0 22px;}
.dl-part-blurb{font-size:var(--t-sm);color:var(--dim);margin:0 0 10px;max-width:72ch;line-height:1.6;}
ol.dl-chapters{margin:0;padding-left:34px;}
ol.dl-chapters li{
  font-size:var(--t-base);color:var(--text);margin-bottom:4px;line-height:1.6;
}
ol.dl-chapters li::marker{color:var(--signal-deep);}

/* ---- repeat CTA at the foot of the page ---- */
.dl-foot{
  border:1px solid var(--line);background:var(--panel);
  padding:22px;margin:28px 0;text-align:center;
  display:flex;flex-direction:column;gap:11px;align-items:center;
}