/* Palette taken from FlexRadio's own site: charcoal #2D2D2F, cyan #06BEDA,
     red #DD201A, light surfaces #F7F7F8 / #E7EBF2. Dark by default because that
     is what SmartSDR looks like; light mode follows the system preference. */
  :root{
    --bg:#1e1e20;
    --panel:#2d2d2f;
    --panel-2:#262628;
    --line:#3c3c40;
    --ink:#f2f4f7;
    --dim:#aaacb6;
    --accent:#06beda;
    --accent-deep:#0592a9;
    --accent-soft:rgba(6,190,218,.12);
    --bad:#dd201a;
    --good:#1fcb6b;
    --good-soft:rgba(31,203,107,.14);
    --shadow:0 10px 40px rgba(0,0,0,.35);
  }
  @media (prefers-color-scheme: light){
    :root{
      --bg:#f7f7f8; --panel:#ffffff; --panel-2:#f2f4f7; --line:#e7ebf2;
      --ink:#2d2d2f; --dim:#5a5a5a; --accent:#0592a9; --accent-deep:#06beda;
      --accent-soft:rgba(6,190,218,.10); --bad:#cd2027;
      --good:#0f8f4c; --good-soft:rgba(15,143,76,.11);
      --shadow:0 10px 30px rgba(45,45,47,.10);
    }
  }
  *{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%}
  body{margin:0;background:var(--bg);color:var(--ink);
    font:16px/1.65 ui-sans-serif,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    -webkit-font-smoothing:antialiased}
  .wrap{max-width:60rem;margin:0 auto;padding:0 20px}
  a{color:var(--accent)}

  /* ---------- header ---------- */
  header{border-bottom:1px solid var(--line);background:var(--panel-2)}
  .brand{display:flex;align-items:center;gap:.7rem;padding:1.1rem 0}
  .brand svg{flex:0 0 auto;display:block}
  /* The mark and the wordmark are one link back to the home page. The flex gap
     moves onto the anchor, since the anchor is now a single flex item. */
  .brand a.home{display:flex;align-items:center;gap:.7rem;text-decoration:none;
    color:inherit}
  .brand a.home:hover b{color:var(--accent)}
  .brand a.home:focus-visible{outline:2px solid var(--accent);outline-offset:4px;
    border-radius:4px}
  .brand b{font-size:1.18rem;font-weight:650;letter-spacing:-.01em;
    transition:color .15s ease}
  .brand b i{font-style:normal;color:var(--accent)}
  .brand span{margin-left:auto;font-size:.72rem;letter-spacing:.16em;
    text-transform:uppercase;color:var(--dim)}
  @media(max-width:32rem){ .brand span{display:none} }

  /* ---------- hero ---------- */
  .hero{padding:4rem 0 3.4rem;text-align:center;position:relative;overflow:hidden}
  .hero::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
    background:radial-gradient(60% 70% at 50% 0%,var(--accent-soft),transparent 70%)}
  .hero h1,.hero p,.hero .quote{z-index:1}
  .hero h1{position:relative;margin:0 0 1.1rem;font-size:clamp(1.9rem,5.2vw,3rem);
    line-height:1.18;letter-spacing:-.02em;font-weight:680;max-width:32ch;
    margin-inline:auto}
  .hero h1 em{font-style:normal;color:var(--accent)}
  .hero p{position:relative;margin:0 auto;max-width:46ch;font-size:1.08rem;color:var(--dim)}
  .quote{position:relative;margin:2.4rem auto 0;max-width:40rem;padding:1.15rem 1.3rem;
    background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--accent);
    border-radius:6px;text-align:left;font-size:1.02rem;box-shadow:var(--shadow)}

  /* ---------- sections ---------- */
  section{padding:3.2rem 0;border-top:1px solid var(--line)}
  h2{margin:0 0 .5rem;font-size:1.32rem;letter-spacing:-.01em}
  .lede{margin:0 0 2rem;color:var(--dim);max-width:52ch}

  /* ---------- the five steps ---------- */
  ol.steps{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
  ol.steps li{display:flex;align-items:flex-start;gap:.9rem;background:var(--panel);
    border:1px solid var(--line);border-radius:6px;padding:1rem 1.15rem}
  ol.steps li .n{flex:0 0 1.9rem;height:1.9rem;border-radius:50%;display:grid;
    place-items:center;font-size:.8rem;font-weight:700;
    background:var(--accent-soft);color:var(--accent);border:1px solid var(--accent)}
  ol.steps li .t{flex:1;min-width:0}
  ol.steps li .t b{display:block;font-weight:620}
  ol.steps li .t small{color:var(--dim);font-size:.92rem}
  ol.steps li.problem{border-color:var(--bad)}
  ol.steps li.problem .n{background:rgba(221,32,26,.12);color:var(--bad);border-color:var(--bad)}
  ol.steps li.fix{border-color:var(--good);
    background:linear-gradient(0deg,var(--good-soft),var(--good-soft)),var(--panel)}
  ol.steps li.fix .n{background:var(--good-soft);color:var(--good);border-color:var(--good)}
  ol.steps li.fix .t b{color:var(--good)}
  ol.steps li.fix .t b::after{content:"\00a0\2713";color:var(--good)}

  /* ---------- how it works: CSS boxes so it reflows on a phone ---------- */
  .flow{display:grid;gap:.8rem;grid-template-columns:1fr auto 1fr auto 1fr;align-items:stretch}
  .node{background:var(--panel);border:1px solid var(--line);border-radius:6px;
    padding:1.1rem;text-align:center}
  .node.key{border-color:var(--accent)}
  .node h3{margin:.55rem 0 .3rem;font-size:.74rem;letter-spacing:.14em;
    text-transform:uppercase;color:var(--dim)}
  .node p{margin:0;font-size:.92rem}
  .node p b{color:var(--accent)}
  .node .ico{display:block;margin:0 auto}
  .arrow{align-self:center;color:var(--accent);font-size:1.2rem;line-height:1}
  @media(max-width:46rem){
    .flow{grid-template-columns:1fr}
    .arrow{transform:rotate(90deg);justify-self:center}
  }

  /* ---------- what you get ---------- */
  .pair{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
  .card{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:1.3rem}
  .card h3{margin:0 0 .5rem;font-size:1rem}
  .card p{margin:0;color:var(--dim);font-size:.95rem}
  .card .tag{display:inline-block;margin-bottom:.7rem;font-size:.66rem;letter-spacing:.14em;
    text-transform:uppercase;color:var(--accent);border:1px solid var(--accent);
    border-radius:3px;padding:.15rem .45rem}

  /* ---------- remove the complexity ---------- */
  ul.nolist{list-style:none;margin:0 0 1.7rem;padding:0;display:grid;gap:.6rem;
    grid-template-columns:repeat(auto-fit,minmax(17rem,1fr))}
  ul.nolist li{display:flex;gap:.7rem;align-items:flex-start;color:var(--dim);
    font-size:.95rem;line-height:1.55}
  ul.nolist li::before{content:"\00d7";flex:0 0 1.15rem;height:1.15rem;margin-top:.22rem;
    display:grid;place-items:center;border-radius:50%;background:var(--panel-2);
    border:1px solid var(--line);color:var(--dim);font-size:.7rem;line-height:1}
  ul.nolist li b{color:var(--ink);font-weight:620}
  .simple{background:var(--panel);border:1px solid var(--accent);
    border-left:3px solid var(--accent);border-radius:6px;padding:1.15rem 1.3rem;
    font-size:1.02rem;margin:0}
  .simple b{color:var(--accent)}

  /* ---------- bonus ---------- */
  ul.yeslist{list-style:none;margin:0;padding:0;display:grid;gap:.6rem;
    grid-template-columns:repeat(auto-fit,minmax(17rem,1fr))}
  ul.yeslist li{display:flex;gap:.7rem;align-items:flex-start;color:var(--dim);
    font-size:.95rem;line-height:1.55}
  ul.yeslist li::before{content:"\002b";flex:0 0 1.15rem;height:1.15rem;margin-top:.22rem;
    display:grid;place-items:center;border-radius:50%;background:var(--accent-soft);
    border:1px solid var(--accent);color:var(--accent);font-size:.78rem;line-height:1}
  ul.yeslist li b{color:var(--ink);font-weight:620}

  /* ---------- the story: running prose, so full-contrast rather than dim ---------- */
  .story p{margin:0 0 1.1rem;max-width:62ch;line-height:1.72;color:var(--ink)}
  .story p:last-child{margin-bottom:0}
  .story p.sign{color:var(--dim);font-size:.95rem;border-top:1px solid var(--line);
    padding-top:1.2rem;margin-top:1.6rem}

  /* ---------- cta ---------- */
  .cta{text-align:center;padding:3.4rem 0}
  .cta a{display:inline-block;background:var(--accent);color:#04252b;font-weight:680;
    text-decoration:none;padding:.9rem 1.7rem;border-radius:6px;font-size:1rem}
  .cta a:hover{background:var(--accent-deep);color:#fff}
  @media (prefers-color-scheme: light){
    .cta a{color:#fff}
    .cta a:hover{background:#046f80;color:#fff}
  }
  .cta small{display:block;margin-top:.9rem;color:var(--dim)}

  footer{border-top:1px solid var(--line);background:var(--panel-2);
    padding:1.8rem 0;color:var(--dim);font-size:.82rem}
  footer p{margin:0 0 .5rem}
  footer p:last-child{margin:0}
  .worknote{margin:1.3rem 0 0;color:var(--dim);font-size:.9rem}

  /* ---------- a "works with" detail page ---------- */
  .offer{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));
    margin:0 0 1.4rem}
  .offer .card h3{color:var(--accent)}
  .backlink{display:inline-block;margin-top:2.2rem;font-size:.78rem;letter-spacing:.12em;
    text-transform:uppercase;text-decoration:none;color:var(--dim)}
  .backlink:hover{color:var(--accent)}

  /* ---------- nav (added with the FAQ page) ---------- */
  .nav{margin-left:auto;display:flex;gap:1.1rem;align-items:center}
  .nav a{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;
    text-decoration:none;color:var(--dim);padding:.2rem 0;
    border-bottom:1px solid transparent}
  .nav a:hover{color:var(--accent);border-bottom-color:var(--accent)}
  .nav a.on{color:var(--ink);border-bottom-color:var(--accent)}

  /* ---------- accordions (FAQ and Works with) ---------- */
  .faqhead{padding:2.8rem 0 1.4rem}
  .faqhead h1{margin:0 0 .5rem;font-size:clamp(1.7rem,4.4vw,2.3rem);letter-spacing:-.02em}
  .faqhead p{margin:0;color:var(--dim);max-width:52ch}
  /* Collapsible posts. <details>/<summary> so the toggle is native: keyboard
     reachable, works with no JavaScript at all, and findable by in-page search
     in browsers that look inside closed details. */
  details.acc{border-top:1px solid var(--line)}
  details.acc:last-of-type{border-bottom:1px solid var(--line)}
  details.acc > summary{cursor:pointer;list-style:none;display:flex;gap:.9rem;
    align-items:center;flex-wrap:wrap;padding:1.45rem 0}
  details.acc > summary::-webkit-details-marker{display:none}
  details.acc > summary::marker{content:""}
  details.acc > summary .ind{flex:0 0 1.45rem;height:1.45rem;border-radius:50%;
    display:grid;place-items:center;border:1px solid var(--accent);
    background:var(--accent-soft);color:var(--accent);font-size:.92rem;line-height:1;
    transition:background .15s ease}
  details.acc > summary .ind::before{content:"+"}
  details.acc[open] > summary .ind::before{content:"\2212"}
  details.acc > summary .q{font-size:1.2rem;font-weight:640;letter-spacing:-.01em;
    color:var(--ink);transition:color .15s ease}
  /* date + permalink grouped, so the permalink still sits hard right when the
     date is hidden on a narrow screen */
  details.acc > summary .sumright{margin-left:auto;flex:0 0 auto;display:flex;
    align-items:center;gap:.45rem}
  details.acc > summary .when{white-space:nowrap;font-size:.7rem;letter-spacing:.14em;
    text-transform:uppercase;color:var(--dim)}
  /* Who tested it, and when. Named and dated deliberately: "tested" on its own is
     a claim, "tested by K5YZW in September 2026" is something a reader can check. */
  .verified{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;
    margin:1.5rem 0 0;padding-top:1rem;border-top:1px solid var(--line);
    font-size:.88rem;color:var(--dim)}
  .verified .tick{flex:0 0 1.15rem;height:1.15rem;border-radius:50%;display:grid;
    place-items:center;background:var(--good-soft);border:1px solid var(--good);
    color:var(--good);font-size:.66rem;line-height:1}
  /* House convention: a callsign is always a link, never inert text. */
  a.cs{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:.92em;
    letter-spacing:.04em;color:var(--accent);background:var(--accent-soft);
    padding:.08em .42em;border-radius:3px;text-decoration:none;white-space:nowrap}
  a.cs:hover{text-decoration:underline}
  .tested{font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;
    color:var(--good);border:1px solid var(--good);border-radius:3px;
    padding:.14rem .42rem;white-space:nowrap}
  a.perma{text-decoration:none;color:var(--dim);font-size:.95rem;line-height:1;
    padding:.1rem .35rem;border-radius:3px;border:1px solid transparent;position:relative}
  a.perma:hover{color:var(--accent);border-color:var(--line)}
  a.perma:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  a.perma[data-copied]::after{content:"Link copied";position:absolute;right:0;top:-1.7rem;
    white-space:nowrap;font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;
    background:var(--panel);border:1px solid var(--accent);color:var(--accent);
    border-radius:3px;padding:.18rem .45rem}
  /* Without JavaScript the fragment still jumps to the post; mark it so the
     reader can see which one they landed on. */
  details.acc:target{background:var(--accent-soft)}
  details.acc:target > summary .q{color:var(--accent)}
  html{scroll-behavior:smooth}
  @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
  details.acc > summary:hover .q,
  details.acc[open] > summary .q{color:var(--accent)}
  details.acc > summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px;
    border-radius:4px}
  @media(max-width:34rem){ details.acc > summary .when{display:none} }
  .abody{padding:.2rem 0 2.3rem}
  .abody p{margin:0 0 1.05rem;max-width:62ch}
  .abody p:last-child{margin-bottom:0}
  .abody strong{color:var(--ink)}

  /* ---------- a quoted source, kept on the record ---------- */
  .cite{background:var(--panel);border:1px solid var(--line);
    border-left:3px solid var(--accent);border-radius:6px;
    padding:1.2rem 1.35rem;margin:0 0 1.35rem;max-width:62ch}
  .cite .src{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
    color:var(--accent);margin:0 0 .2rem}
  .cite .who{font-size:.88rem;color:var(--dim);margin:0 0 1rem}
  .cite blockquote{margin:0 0 .85rem;padding:0 0 0 .9rem;
    border-left:2px solid var(--line);font-size:1rem;color:var(--ink)}
  .cite blockquote:last-of-type{margin-bottom:1rem}
  .cite .link{margin:0;font-size:.85rem;word-break:break-all}
  .cite .kept{margin:.85rem 0 0;padding-top:.8rem;border-top:1px dashed var(--line);
    font-size:.78rem;color:var(--dim)}