:root{
  --navy:#101c2b;
  --navy-2:#16283d;
  --blue:#0066aa;
  --blue-dark:#004d82;
  --ink:#1b2733;
  --muted:#5b6875;
  --line:#d9e0e7;
  --soft:#eef3f8;
  --soft-2:#f6f8fa;
  --white:#fff;
  --max:1100px;
  /* Role tokens. --navy and --blue stay brand colours for the header, bands
     and buttons; text and surfaces go through these so the dark set below can
     swap them without touching a single rule. Added 2026-09-26 with the dark
     theme (same approach as rfnavigator.com: follow the visitor's setting). */
  --page:#fff;
  --surface:#fff;
  --field:#fff;
  --heading:var(--navy);
  --lead:#3f5265;
  --link:var(--blue-dark);
  --link-hover:var(--blue);
  --accent:var(--blue);
  --band:var(--navy);
  --btn-secondary:var(--navy);
  --status-ink:var(--blue-dark);
  --status-bg:#e8f3fa;
  --status-line:#bedbec;
  --footer-bg:#e9edf1;
  --footer-ink:#344454;
  --footer-line:#cfd6dd;
  --ok-bg:#eef8f1;--ok-line:#c5e3d0;
  --err-bg:#fdeeec;--err-line:#f0cdc9;
  --warn-bg:#fdf5e6;--warn-line:#f0dfba;
  --partial:#a8601a;
  color-scheme:light;
}
/* Dark theme, applied when the visitor's device asks for it. The page drops
   below --navy so the navy bands and header still read as bands. */
@media (prefers-color-scheme:dark){
  :root{
    --ink:#dbe4ec;
    --muted:#a7b6c4;
    --line:#2b3b4d;
    --soft:#15222f;
    --soft-2:#111c28;
    --page:#0b131c;
    --surface:#15222f;
    --field:#0f1923;
    --heading:#eef4fa;
    --lead:#bccad7;
    --link:#7cc4f2;
    --link-hover:#b3dcf8;
    --accent:#5cb4ec;
    --band:#101c2b;
    --btn-secondary:#2a3d52;
    --status-ink:#9fd3f7;
    --status-bg:#16304a;
    --status-line:#2d5376;
    --footer-bg:#0f1923;
    --footer-ink:#bccad7;
    --footer-line:#2b3b4d;
    --ok-bg:#12291c;--ok-line:#24503a;
    --err-bg:#311714;--err-line:#5c2a25;
    --warn-bg:#2f2410;--warn-line:#5a4520;
    --partial:#f0a45a;
    color-scheme:dark;
  }
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--ink);line-height:1.65;background:var(--page)}
a{color:var(--link)}
a:hover{color:var(--link-hover)}
img{max-width:100%;height:auto}
.container{max-width:var(--max);margin:auto;padding:0 25px}
.narrow{max-width:820px}
.skip-link{position:absolute;left:-9999px;top:auto}
.skip-link:focus{left:15px;top:15px;background:#fff;color:#000;padding:10px;z-index:1000}
.site-header{background:var(--navy);color:#fff;border-bottom:3px solid var(--blue)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:68px}
.logo{color:#fff;text-decoration:none;font-size:24px;letter-spacing:.02em;white-space:nowrap}
.logo:hover{color:#fff}
.site-nav{display:flex;align-items:center;flex-wrap:wrap;justify-content:flex-end;gap:2px}
.site-nav a{color:#fff;margin:0;padding:10px 8px;text-decoration:none;border-radius:3px;font-size:15px}
.site-nav a:hover,.site-nav a.active{background:rgba(255,255,255,.1);color:#fff}
/* Grouped menu (2026-10-16): Services, Software and Free Tools open a panel on hover, focus or click (site.js). */
.nav-group{position:relative}
.nav-group-toggle{display:flex;align-items:center;gap:6px;color:#fff;background:none;border:0;margin:0;padding:10px 8px;border-radius:3px;
  font:inherit;font-size:15px;cursor:pointer}
.nav-group-toggle::after{content:"";width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:translateY(-2px) rotate(45deg);opacity:.8}
.nav-group-toggle:hover,.nav-group.active>.nav-group-toggle,.nav-group.open>.nav-group-toggle{background:rgba(255,255,255,.1)}
.nav-menu{display:none;position:absolute;z-index:200;top:100%;left:0;min-width:230px;padding:6px;background:var(--navy-2);
  border:1px solid rgba(255,255,255,.14);border-top:3px solid var(--blue);border-radius:0 0 6px 6px;box-shadow:0 14px 28px rgba(0,0,0,.3)}
.nav-group:hover>.nav-menu,.nav-group:focus-within>.nav-menu,.nav-group.open>.nav-menu{display:block}
.site-nav .nav-menu a{display:block;padding:10px 12px;white-space:nowrap}
/* Top-level labels bold 16px (Leo: bolder menu text); dropdown links stay regular 15px. Arial has no 600, so 700. */
.site-nav>a,.nav-group-toggle{font-size:16px;font-weight:700}
.site-nav .nav-menu a{font-size:15px;font-weight:400}
.site-nav a.nav-pay{margin-left:6px;padding:8px 14px;border:1px solid rgba(255,255,255,.45)}
.site-nav a.nav-pay:hover,.site-nav a.nav-pay.active{background:var(--blue);border-color:var(--blue)}
/* Free Tools panel (2026-10-16, includes/tools-registry.php): three labelled columns under the whole menu bar, right
   aligned so it never runs off the screen, with "All free tools" (/tools) across the top. */
.site-nav{position:relative}
.nav-group.has-panel{position:static}
.nav-menu.nav-panel{left:auto;right:0;width:min(720px,calc(100vw - 32px));padding:10px 12px 12px;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 14px}
.nav-group.has-panel:hover>.nav-panel,.nav-group.has-panel:focus-within>.nav-panel,.nav-group.has-panel.open>.nav-panel{display:grid}
.nav-panel-top{grid-column:1/-1;border-bottom:1px solid rgba(255,255,255,.14);margin:0 0 8px;padding:0 0 6px}
.site-nav .nav-panel-top a{display:inline-block;font-weight:700}
.site-nav .nav-panel-top a::after{content:" \2192"}
.nav-col-label{margin:4px 12px 4px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#9fc3e3}
.site-nav .nav-panel .nav-col a{padding:8px 12px;white-space:normal}
.hero{padding:44px 0;background:var(--soft);border-bottom:1px solid var(--line)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,.8fr);gap:48px;align-items:start}
.hero h1,.page-hero h1{font-size:clamp(38px,5vw,58px);line-height:1.08;margin:.2em 0 .35em;color:var(--heading)}
.hero-copy{font-size:20px;color:var(--lead);max-width:760px}
.hero-panel{background:var(--surface);border:1px solid var(--line);border-top:4px solid var(--blue);padding:28px;box-shadow:0 10px 30px rgba(16,28,43,.08)}
.hero-panel h2{margin-top:0}
.page-hero{padding:36px 0;background:var(--soft);border-bottom:1px solid var(--line)}
.page-hero p{font-size:19px;color:var(--lead)}
.eyebrow{text-transform:uppercase;letter-spacing:.11em;font-size:13px;font-weight:700;color:var(--accent);margin:0 0 8px}
.eyebrow.light{color:#8ecdf5}
.section{padding:32px 0}
/* Two plain sections in a row stack both paddings, doubling the gap. Collapse the
   second one's top padding. Sections that paint their own background (.muted, .dark)
   keep theirs, or the colour band would hug its content. */
section.section+section.section:not(.muted){padding-top:0}
.section.muted{background:var(--soft-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.section h2{font-size:32px;line-height:1.2;color:var(--heading);margin-top:0}
.section-intro{font-size:19px;color:var(--muted);max-width:820px}
.cards{display:grid;gap:20px}
.cards-three{grid-template-columns:repeat(3,minmax(0,1fr))}
.cards-two{grid-template-columns:repeat(2,minmax(0,1fr))}
.card{padding:25px;border:1px solid var(--line);background:var(--surface);border-radius:4px;box-shadow:0 4px 14px rgba(16,28,43,.04)}
.card h2,.card h3{margin-top:0;color:var(--heading)}
.card h2{font-size:24px}.card h3{font-size:21px}
.card h2 a,.card h3 a{color:inherit;text-decoration:none}
.card h2 a:hover,.card h3 a:hover{color:var(--link-hover)}
.button-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.button{display:inline-block;padding:12px 22px;background:var(--blue);color:#fff;text-decoration:none;border-radius:3px;font-weight:700;border:1px solid var(--blue)}
.button:hover{background:var(--blue-dark);border-color:var(--blue-dark);color:#fff}
.button.secondary{background:var(--btn-secondary);border-color:var(--btn-secondary)}
.button.secondary:hover{background:#26384c;border-color:#26384c}
.text-link{font-weight:700;text-decoration:none}
.text-link:after{content:' →'}
.dark{background:var(--band);color:#fff}
.dark h2,.dark h3{color:#fff}
.product-section{padding:38px 0}
.light-copy{color:#c9d5df}
.product-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:28px}
/* Full-width card sitting under a two-up product grid. Collapses harmlessly at
   the 850px breakpoint, where the grid is already a single column.

   It only spans when spanning keeps the grid whole. In a two-column grid the
   cards before it fill complete rows only when there is an even number of
   them -- which makes this card an ODD-numbered child. As an even-numbered
   child it would strand the card above it alone in the left column, so it
   drops to a normal single-column card and fills that gap instead. Adding or
   removing a product flips this automatically; nothing here needs editing. */
.product-grid .span-two:nth-child(odd){grid-column:1/-1}
.product-grid .span-two:nth-child(odd) ul{columns:2;column-gap:34px}
@media(max-width:850px){.product-grid .span-two:nth-child(odd) ul{columns:1}}
.product-card{padding:30px;background:var(--navy-2);border:1px solid rgba(255,255,255,.14);border-radius:4px}
.product-card.featured{border-top:4px solid #4ba9e8}
.product-card h2,.product-card h3{margin:8px 0 10px;font-size:28px}
.product-card ul{padding-left:21px}
.light-products{margin-top:0}
.light-card{background:var(--surface);color:var(--ink);border:1px solid var(--line);box-shadow:0 8px 24px rgba(16,28,43,.06)}
.light-card h2{color:var(--heading)}
.status{display:inline-block;padding:5px 9px;background:rgba(0,102,170,.14);color:#8ed0ff;border:1px solid rgba(142,208,255,.35);border-radius:999px;text-transform:uppercase;letter-spacing:.08em;font-size:11px;font-weight:700}
.light-card .status,.sidebar-card .status{color:var(--status-ink);background:var(--status-bg);border-color:var(--status-line)}
.check-list{list-style:none;padding:0;margin:20px 0}
.check-list li{position:relative;padding:7px 0 7px 28px}
.check-list li:before{content:'✓';position:absolute;left:0;top:7px;color:var(--accent);font-weight:700}
.top-gap{margin-top:20px}
.split-section.top-gap{margin-top:34px}

/* Website brief form (website-brief.php). Reuses .nb-form/.field/.hint from
   the contact form; these are only the bits the brief needs on top. */
.nb-form h2{font-size:22px;color:var(--heading);margin:34px 0 4px;padding-top:20px;border-top:1px solid var(--line)}
.nb-form h2:first-of-type{margin-top:8px;padding-top:0;border-top:0}
.label-as-legend{display:block;font-weight:700;margin-bottom:8px;color:var(--heading)}
.nb-checks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 20px}
.nb-checks label{display:flex;align-items:flex-start;gap:9px;padding:6px 0;font-weight:400;cursor:pointer}
.nb-checks input{margin-top:4px;flex:0 0 auto}
.nb-filelist{list-style:none;margin:12px 0 0;padding:0;border-top:1px solid var(--line)}
.nb-filelist li{display:flex;justify-content:space-between;gap:14px;padding:8px 0;border-bottom:1px solid var(--line);font-size:15px}
.nb-filelist li span{color:var(--muted);white-space:nowrap}
@media(max-width:560px){.nb-checks{grid-template-columns:1fr}}

/* Brief admin (brief-admin.php) — internal, behind nginx basic auth. */
.nb-brieflist{list-style:none;margin:22px 0 0;padding:0}
.nb-brieflist li{padding:13px 0;border-bottom:1px solid var(--line)}
.nb-brieflist li a{font-weight:700;font-size:18px;text-decoration:none}
.nb-brief-meta{display:block;margin-top:3px;font-size:14px;color:var(--muted)}
.nb-brief-dl{margin:0 0 8px}
.nb-brief-dl dt{font-weight:700;color:var(--heading);margin-top:14px}
.nb-brief-dl dd{margin:2px 0 0;color:var(--ink)}
.nb-brief-files{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px;margin-top:16px}
.nb-brief-files figure{margin:0}
.nb-brief-files img{width:100%;height:130px;object-fit:cover;border:1px solid var(--line);border-radius:4px;display:block}
.nb-brief-pdf{display:flex;align-items:center;justify-content:center;height:130px;border:1px solid var(--line);border-radius:4px;background:var(--soft);font-weight:700;color:var(--muted)}
.nb-brief-files figcaption{font-size:13px;color:var(--muted);margin-top:6px;overflow-wrap:anywhere}
.nb-brief-cmd{background:var(--navy);color:#cbd9e6;padding:14px 16px;border-radius:4px;font-size:13px;overflow-x:auto}
.nb-brief-dl dd.nb-blank{color:#8a97a4;font-style:italic}
.nb-partial{color:var(--partial);font-weight:700}
.nb-inline-form{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:14px 0 0}
.nb-inline-form .button{margin:0}
.button.nb-danger{background:#a3241b;border-color:#a3241b}
.button.nb-danger:hover{background:#821c15;border-color:#821c15}

/* Compact pricing band for the short house-style product pages. Rendered by
   includes/pricing-band.php; deliberately restrained — those pages are
   reference pages, not landing pages, so they do not get VoiceTrove's dark
   three-column grid. */
.price-line{list-style:none;margin:22px 0 18px;padding:0;display:grid;gap:0}
.price-line li{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;padding:12px 0;border-bottom:1px solid var(--line)}
.price-line li:last-child{border-bottom:0}
.price-line li strong{font-size:26px;color:var(--heading);line-height:1.1;min-width:110px}
.price-line li span{color:var(--muted);font-size:15px}
@media(max-width:520px){.price-line li strong{font-size:23px;min-width:0}}

/* Product line list — the front page names every product without describing
   any of them, so this is a name plus a few words about which part of the
   station it concerns. Rendered from includes/products.php; it grows a row
   when a product is added and needs no attention here. Two columns so seven
   products do not read as a long menu. */
.product-line{list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 34px}
.product-line li{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;padding:11px 0;border-bottom:1px solid var(--line)}
.product-line li a{font-weight:700;font-size:17px;text-decoration:none;white-space:nowrap}
.product-line li a:hover{text-decoration:underline}
.product-line li span{color:var(--muted);font-size:15px}
.dark .product-line li{border-bottom-color:rgba(255,255,255,.14)}
.dark .product-line li a{color:#8ecdf5}
.dark .product-line li a:hover{color:#fff}
.dark .product-line li span{color:#b6c7d8}
@media(max-width:700px){.product-line{grid-template-columns:1fr}}
.split-section{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(280px,.7fr);gap:45px;align-items:start}
.callout,.sidebar-card{background:var(--soft);border:1px solid var(--line);border-top:4px solid var(--blue);padding:28px;border-radius:3px}
/* A light card sitting inside a .dark section inherits that section's white
   text while painting its own light background — body copy lands at 1.12:1,
   which is invisible. Headings and links set their own colour so they still
   look right, and that is exactly why it ships unnoticed. Reset the card.
   Found on services.php 2026-08-22; this rule is general so it cannot recur. */
.dark .callout,.dark .sidebar-card{color:var(--ink)}
.callout h3,.sidebar-card h2{margin-top:0;color:var(--heading)}
.content-grid{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:48px;align-items:start}
.content-grid h2{margin-top:38px}
.content-grid h2:first-child{margin-top:0}
.sidebar-card{position:sticky;top:25px}
.sidebar-card ul{padding-left:20px}
.phone-cta{background:var(--navy);border-radius:3px;padding:20px 22px;margin:-28px -28px 24px;text-align:center}
.phone-cta-label{margin:0 0 4px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:#8ecdf5}
.phone-cta-number{display:block;font-size:26px;font-weight:800;color:#fff;text-decoration:none;letter-spacing:.01em}
.phone-cta-number:hover{color:#bfe3fb}
.steps{padding-left:24px}
.steps li{padding:7px 0}
.fine-print{font-size:14px;color:var(--muted)}
.resource-cards .card{min-height:180px}
.contact-email{font-size:24px;font-weight:700}
.legal-copy{max-width:850px}
.legal-copy h2{margin-top:34px;font-size:25px}
.site-footer{background:var(--footer-bg);margin-top:0;border-top:1px solid var(--line);color:var(--footer-ink)}
/* Brand blurb, then four link columns. It was 1.5fr 1fr 1fr, which left the
   brand column empty of links while Software carried ten against Services'
   five once the product line grew. Link columns are equal so the counts read
   as deliberate; the brand column keeps the extra width for its paragraph. */
.footer-grid{display:grid;grid-template-columns:1.45fr repeat(4,minmax(0,1fr));gap:35px 26px;padding-top:42px;padding-bottom:30px}
.footer-grid>div{display:flex;flex-direction:column;align-items:flex-start}
.footer-grid a{display:block;margin:3px 0;text-decoration:none}
.footer-heading{font-size:18px;color:var(--heading);margin:0 0 10px}
.footer-bottom{border-top:1px solid var(--footer-line);display:flex;justify-content:space-between;gap:20px;padding-top:16px;padding-bottom:22px;font-size:14px}
.footer-bottom p{margin:0}
@media(max-width:850px){
  .header-inner{display:block;padding-top:18px;padding-bottom:18px}
  .site-nav{justify-content:flex-start;margin-top:12px}
  .site-nav a{padding:8px 9px}
  .hero-grid,.split-section,.content-grid{grid-template-columns:1fr}
  .cards-three,.cards-two,.product-grid{grid-template-columns:1fr}
  /* Five columns to one is too abrupt for the footer. Two, with the brand
     paragraph spanning both, then one below 520px. */
  .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-grid>div:first-child{grid-column:1/-1}
  .sidebar-card{position:static}
  .hero{padding:50px 0}
}
@media(max-width:520px){
  .container{padding-left:18px;padding-right:18px}
  .logo{font-size:21px}
  .site-nav{display:grid;grid-template-columns:repeat(2,1fr);width:100%}
  .hero h1,.page-hero h1{font-size:37px}
  .button-row .button{width:100%;text-align:center}
  .footer-bottom{display:block}
  .footer-bottom p+p{margin-top:8px}
}

/* Mobile navigation */
.menu-toggle{
  display:none;
  width:44px;
  height:44px;
  padding:10px;
  border:1px solid rgba(255,255,255,.28);
  border-radius:4px;
  background:transparent;
  cursor:pointer;
}
.menu-toggle span{
  display:block;
  height:2px;
  margin:5px 0;
  background:#fff;
  border-radius:2px;
}

@media(max-width:760px){
  .container{padding-left:20px;padding-right:20px}
  .site-header{position:relative}
  .header-inner{
    display:flex;
    min-height:68px;
    padding-top:12px;
    padding-bottom:12px;
    gap:14px;
  }
  .logo{font-size:20px;letter-spacing:.015em}
  .menu-toggle{display:block;margin-left:auto;flex:0 0 auto}
  .site-nav{
    display:none;
    position:absolute;
    z-index:100;
    left:0;
    right:0;
    top:100%;
    padding:10px 20px 16px;
    background:var(--navy);
    border-bottom:3px solid var(--blue);
    box-shadow:0 12px 24px rgba(0,0,0,.22);
  }
  .site-nav.open{display:grid;grid-template-columns:1fr 1fr;gap:6px 10px}
  .site-nav a{
    display:block;
    margin:0;
    padding:11px 12px;
    font-size:16px;
    background:rgba(255,255,255,.035);
  }
  .site-nav a.active{background:rgba(255,255,255,.12)}

  .hero{padding:38px 0 42px}
  .hero-grid{gap:28px}
  .hero h1,.page-hero h1{
    font-size:clamp(32px,9vw,40px);
    line-height:1.08;
    margin-top:10px;
  }
  .hero-copy,.page-hero p,.section-intro{
    font-size:17px;
    line-height:1.55;
  }
  .eyebrow{font-size:12px;line-height:1.5}
  .hero-panel{padding:22px}
  .section{padding:38px 0}
  .section h2{font-size:27px}
  .cards,.cards-three,.cards-two,.product-grid{grid-template-columns:1fr}
  .card,.product-card{padding:22px}
  .button-row{display:grid;grid-template-columns:1fr;gap:10px}
  .button-row .button{width:100%;margin:0;text-align:center}
  .product-section{padding:42px 0}
  .split-section,.content-grid{gap:28px}
  .contact-email{font-size:19px;overflow-wrap:anywhere}
  .footer-grid{gap:22px;padding-top:32px}
}

@media(max-width:390px){
  .container{padding-left:16px;padding-right:16px}
  .logo{font-size:18px}
  .hero h1,.page-hero h1{font-size:31px}
  .site-nav.open{grid-template-columns:1fr}
}

/* Collapse the footer only on genuinely tiny screens. Two columns holds at
   375px -- the commonest phone width -- and five stacked groups there makes a
   1078px footer, which is more than a screenful of nothing but links. */
@media(max-width:340px){
  .footer-grid{grid-template-columns:1fr}
}

/* Nexus Broadcast header logo */
.nexus-broadcast-logo {
    display: block;
    width: clamp(220px, 25vw, 300px);
    height: auto;
    max-width: 100%;
    object-fit: contain;
}

.site-header a:has(.nexus-broadcast-logo),
header a:has(.nexus-broadcast-logo) {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    line-height: 0;
    text-decoration: none;
}

@media (max-width: 760px) {
    .nexus-broadcast-logo {
        width: min(240px, 68vw);
    }
}

/* ---- Contact form ---- */
.nb-form{margin:22px 0 8px}
.nb-form .field{margin-bottom:20px}
.nb-form label{display:block;font-weight:700;color:var(--heading);margin-bottom:6px}
.nb-form .req{color:var(--accent);font-weight:700}
.nb-form input[type=text],.nb-form input[type=email],.nb-form select,.nb-form textarea{
  width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:3px;
  font:inherit;color:var(--ink);background:var(--field)}
.nb-form textarea{resize:vertical;min-height:150px}
.nb-form input:focus,.nb-form select:focus,.nb-form textarea:focus{
  outline:2px solid var(--blue);outline-offset:1px;border-color:var(--blue)}
.nb-form .hint{margin:6px 0 0;font-size:.88em;color:var(--muted)}
.nb-form button.button{cursor:pointer;font:inherit}

/* Honeypot: off-screen rather than display:none, which some bots skip.
   aria-hidden + tabindex=-1 keep it away from screen readers and keyboards. */
.nb-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.form-note{padding:16px 18px;border-radius:3px;margin:20px 0;border:1px solid var(--line);border-left:4px solid var(--blue);background:var(--soft)}
.form-note p{margin:6px 0 0}
.form-note ul{margin:8px 0 0;padding-left:20px}
.form-note.ok{border-left-color:#1d7a44;background:var(--ok-bg);border-color:var(--ok-line)}
.form-note.error{border-left-color:#b3261e;background:var(--err-bg);border-color:var(--err-line)}
.form-note.warn{border-left-color:#a86500;background:var(--warn-bg);border-color:var(--warn-line)}

@media (max-width: 760px){
  .nb-form textarea{min-height:130px}
}

/* NCE FM translator window deadline: thin bar on every page + home-page panel.
   Markup gated by includes/window-banner.php; both colours are fixed (not themed)
   because the panel is dark in both light and dark mode. */
.window-bar{background:#b8261a;color:#fff;font-size:15px;line-height:1.4}
.window-bar-inner{display:flex;align-items:center;justify-content:space-between;gap:18px;padding-top:10px;padding-bottom:10px}
.window-bar p{margin:0}
.window-bar-cta{flex:0 0 auto;color:#fff;font-weight:700;text-decoration:none;border:1px solid rgba(255,255,255,.75);border-radius:3px;padding:6px 14px;white-space:nowrap}
.window-bar-cta:hover{background:#fff;color:#b8261a}
.window-hero{background:radial-gradient(ellipse at 20% 0%,#1d3a5c 0%,#101c2b 60%,#0a121c 100%);color:#fff;padding:48px 0;border-bottom:3px solid #b8261a}
.window-hero-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(260px,.8fr);gap:44px;align-items:center}
.window-hero h2{font-size:clamp(28px,3.6vw,40px);line-height:1.15;margin:.15em 0 .6em;color:#fff}
.window-hero h2 span{color:#5cb4ec}
.window-hero-list{list-style:none;margin:0;padding:0}
.window-hero-list li{position:relative;padding:9px 0 9px 28px;border-bottom:1px solid rgba(142,208,255,.16);color:#c9d7e4;font-size:17px}
.window-hero-list li:last-child{border-bottom:0}
.window-hero-list li:before{content:'';position:absolute;left:4px;top:17px;width:10px;height:10px;border-radius:50%;background:#5cb4ec}
.window-hero-list strong{color:#fff}
.window-hero .button.secondary{background:transparent;border-color:rgba(255,255,255,.7);color:#fff}
.window-hero .button.secondary:hover{background:#fff;border-color:#fff;color:#101c2b}
.window-hero-deadline{background:linear-gradient(135deg,#d9361f,#a81f12);border-radius:14px;padding:30px 24px;text-align:center;box-shadow:0 14px 40px rgba(0,0,0,.4)}
.window-hero-deadline p{margin:0}
.window-hero-label{text-transform:uppercase;letter-spacing:.2em;font-size:14px;font-weight:700;opacity:.92}
.window-hero-date{font-size:clamp(34px,4.2vw,46px);font-weight:900;line-height:1.1;margin:8px 0 10px!important}
.window-hero-sub{font-size:16px;font-weight:600}
@media (max-width:760px){
  .window-bar{font-size:14px}
  .window-bar-inner{gap:12px;padding-top:8px;padding-bottom:8px}
  .window-bar-more{display:none}
  .window-bar-cta{padding:5px 10px}
  .window-hero-grid{grid-template-columns:1fr;gap:28px}
  .window-hero-deadline{order:-1}
}

/* Grouped menu on phones and narrow tablets: the overlay is one list; each group's links sit under its heading
   (no nested toggles to hunt for). Comes last so it wins over the two-column grids above. */
@media(max-width:760px){
  .site-nav.open{display:block;max-height:calc(100vh - 90px);overflow-y:auto}
  .site-nav.open>a,.site-nav.open .nav-menu a{display:block;padding:11px 12px;margin:0 0 6px}
  .nav-group{margin:6px 0 4px}
  .nav-group-toggle{padding:6px 2px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#9fc3e3;
    cursor:default;pointer-events:none}
  .nav-group-toggle::after{display:none}
  .nav-group-toggle:hover,.nav-group.active>.nav-group-toggle{background:none}
  .nav-menu,.nav-group:hover>.nav-menu{display:grid;grid-template-columns:1fr;position:static;min-width:0;padding:0;
    background:none;border:0;box-shadow:none}
  .site-nav a.nav-pay{margin:6px 0 0;text-align:center}
  /* Free Tools panel on phones: its three groups stack, each with its small label, like the other groups. */
  .nav-menu.nav-panel,.nav-group.has-panel:hover>.nav-panel{display:block;width:auto;padding:0}
  .nav-panel-top{border:0;margin:0;padding:0}
  .site-nav .nav-panel-top a{display:block}
  .nav-col-label{margin:10px 2px 6px;font-size:11px;color:#c7dcef}
  .site-nav .nav-panel .nav-col a{padding:11px 12px}
}