/* ──────────────────────────────────────────────────────────────────────────
   NoBill prelander shell.

   Palette and type follow the product's own design system: a near-black
   canvas, one accent used only for action, Archivo for display and IBM Plex
   Sans for everything read in sentences. The accent, corner radius and hero
   alignment are injected per site by functions.php, so ten prelanders share a
   skeleton without sharing a face.
   ────────────────────────────────────────────────────────────────────────── */

@font-face{
  font-family:"Archivo"; src:url(fonts/archivo-400-800.woff2) format("woff2");
  font-weight:400 800; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"IBM Plex Sans"; src:url(fonts/plex-400-700.woff2) format("woff2");
  font-weight:400 700; font-style:normal; font-display:swap;
}

:root{
  --nb-canvas:#0c0d0e;
  --nb-card:#151618;
  --nb-sunken:#1c1d20;
  --nb-hairline:#2a2c30;
  --nb-ink:#f5f4f1;
  --nb-muted:#9c9ea4;

  /* Semantic, never decorative: green marks what NoBill does, red what it
     does not. These keep their meaning whatever the site accent is. */
  --nb-save:#34d583;
  --nb-danger:#ff5a4f;

  /* Overridden per site; these are the fallbacks. */
  --nb-accent:#ff6b1f;
  --nb-accent-deep:#e0560c;
  --nb-accent-soft:#2b1a10;
  --nb-accent-glow:#4a2512;
  --nb-radius:20px;

  --nb-display:"Archivo","Archivo Fallback",system-ui,sans-serif;
  --nb-body:"IBM Plex Sans","IBM Plex Sans Fallback",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --nb-measure:46rem;
  --nb-head-h:68px;

  color-scheme:dark;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--nb-canvas);
  color:var(--nb-ink);
  font:400 1.0625rem/1.65 var(--nb-body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img,svg{ max-width:100%; height:auto; }

a{ color:var(--nb-accent); }
a:focus-visible,button:focus-visible,summary:focus-visible{
  outline:2px solid var(--nb-accent); outline-offset:3px; border-radius:4px;
}

.nb-skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--nb-accent); color:#0c0d0e; padding:.7rem 1.1rem;
  border-radius:0 0 10px 0; font-weight:600; text-decoration:none;
}
.nb-skip:focus{ left:0; }

/* ───────────────────────────────────────────────────────────────── header */

.nb-head{
  position:sticky; top:0; z-index:40;
  background:color-mix(in srgb,var(--nb-canvas) 82%,transparent);
  backdrop-filter:saturate(1.4) blur(12px);
  -webkit-backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid var(--nb-hairline);
}
@supports not (backdrop-filter:blur(2px)){ .nb-head{ background:var(--nb-canvas); } }

.nb-head__in{
  max-width:72rem; margin:0 auto; min-height:var(--nb-head-h);
  padding:.75rem 1.25rem;
  display:flex; align-items:center; gap:1.5rem;
}

.nb-logo{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--nb-display); font-weight:800; font-size:1.3rem;
  letter-spacing:-.02em; color:var(--nb-ink); text-decoration:none;
  flex:0 0 auto;
}
.nb-logo__hi{ color:var(--nb-accent); }
.nb-logo__dot{
  width:.46rem; height:.46rem; border-radius:50%;
  background:var(--nb-accent); margin-top:.5em;
}
.nb-logo__box{
  display:grid; place-items:center; width:1.85rem; height:1.85rem;
  border-radius:8px; background:var(--nb-accent); color:#0c0d0e;
  font-size:1.05rem; line-height:1;
}

.nb-nav{ flex:1 1 auto; min-width:0; }
.nb-nav__list{
  list-style:none; margin:0; padding:0;
  display:flex; gap:1.5rem; align-items:center;
  overflow-x:auto; scrollbar-width:none;
}
.nb-nav__list::-webkit-scrollbar{ display:none; }
.nb-nav__list a{
  color:var(--nb-muted); text-decoration:none; font-size:.9375rem;
  white-space:nowrap; transition:color .15s;
}
.nb-nav__list a:hover{ color:var(--nb-ink); }
.nb-nav__list .current-menu-item > a,
.nb-nav__list .current_page_item > a{ color:var(--nb-ink); }

.nb-head__cta{
  flex:0 0 auto;
  display:inline-flex; align-items:center;
  padding:.6rem 1.15rem; border-radius:999px;
  background:var(--nb-accent); color:#0c0d0e;
  font-weight:600; font-size:.9375rem; text-decoration:none;
  transition:background .15s;
}
.nb-head__cta:hover{ background:var(--nb-accent-deep); }

@media (max-width:52rem){
  .nb-head__in{ flex-wrap:wrap; gap:.75rem 1rem; }
  .nb-nav{ order:3; flex-basis:100%; }
  .nb-nav__list{ gap:1.15rem; }
  .nb-head__cta{ margin-left:auto; }
}

/* ────────────────────────────────────────────────────────────── main + hero */

.nb-main{
  position:relative;
  /* A single soft wash of the accent behind the hero — the one decorative
     use of colour on the page. */
  background:
    radial-gradient(60rem 26rem at 50% -6rem,var(--nb-accent-glow) 0%,transparent 70%);
}

.nb-wrap{ max-width:var(--nb-measure); margin:0 auto; padding:3.5rem 1.25rem 0; }

/* The hero breaks out of the reading measure so the headline lands in two
   lines instead of three. Everything below it stays at the measure. */
.nb-hero{ margin:0 0 3.5rem; }
/* Only break out once there is room for it; below that the hero keeps the
   reading measure like everything else. A left-aligned hero grows to the
   right only — its left edge has to line up with the body text under it. */
@media (min-width:62rem){
  body.nb-hero-center .nb-hero{ margin-inline:-4rem; }
  body.nb-hero-left .nb-hero{ margin-inline:0 -4rem; }
}
.nb-hero h1{ margin-bottom:1.1rem; }
.nb-hero .nb-lede{ margin-bottom:2rem; }
.nb-hero .nb-cta{ margin:0; }

body.nb-hero-center .nb-hero{ text-align:center; }
body.nb-hero-center .nb-hero .nb-cta{ align-items:center; }
body.nb-hero-center .nb-hero .nb-lede{ margin-inline:auto; max-width:38rem; }

/* ─────────────────────────────────────────── hero illustration (sample data) */

.nb-device{ margin:2.75rem 0 0; }
.nb-device__card{
  max-width:26rem; margin-inline:auto; text-align:left;
  background:linear-gradient(180deg,var(--nb-card),var(--nb-canvas));
  border:1px solid var(--nb-hairline);
  border-radius:calc(var(--nb-radius) + 6px);
  padding:1.25rem 1.35rem 1.1rem;
  box-shadow:0 26px 60px -30px #000, 0 0 0 1px #ffffff06 inset;
}
body.nb-hero-left .nb-device__card{ margin-inline:0; }

.nb-device__head{
  margin:0 0 .9rem; font-family:var(--nb-display); font-weight:700;
  font-size:.74rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--nb-muted);
}
.nb-device__list{ list-style:none; margin:0; padding:0; display:grid; gap:.1rem; }
.nb-device__list li{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  padding:.62rem 0; border-bottom:1px solid var(--nb-hairline);
  font-size:.95rem;
}
.nb-device__name{ display:flex; flex-direction:column; gap:.1rem; }
.nb-device__note{ color:var(--nb-muted); font-size:.76rem; }
.nb-device__amt{
  color:var(--nb-muted); font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum"; white-space:nowrap;
}
.nb-device__total{
  display:flex; align-items:baseline; justify-content:space-between;
  margin:.9rem 0 0; font-size:.78rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--nb-muted); font-weight:600;
}
.nb-device__total strong{
  font-family:var(--nb-display); font-size:1.6rem; font-weight:800;
  letter-spacing:-.03em; color:var(--nb-accent); text-transform:none;
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum";
}
.nb-device figcaption{
  margin:.85rem 0 0; text-align:center; color:var(--nb-muted); font-size:.78rem;
}
body.nb-hero-left .nb-device figcaption{ text-align:left; max-width:26rem; }

/* ───────────────────────────────────────────────────────── closing hand-off */

.nb-end{
  margin:3.5rem 0 0;
  border:1px solid var(--nb-hairline);
  border-radius:calc(var(--nb-radius) + 4px);
  background:
    radial-gradient(28rem 12rem at 50% 0%,var(--nb-accent-soft) 0%,transparent 70%),
    var(--nb-card);
  padding:1.9rem 1.75rem;
  display:flex; justify-content:center;
}
.nb-end .nb-cta{ margin:0; align-items:center; text-align:center; }
body.nb-hero-left .nb-end{ justify-content:flex-start; }
body.nb-hero-left .nb-end{ background:
  radial-gradient(28rem 12rem at 12% 0%,var(--nb-accent-soft) 0%,transparent 70%),
  var(--nb-card); }
body.nb-hero-left .nb-end .nb-cta{ align-items:flex-start; text-align:left; }

/* ───────────────────────────────────────────────────────────── typography */

h1,h2,h3{
  font-family:var(--nb-display); color:var(--nb-ink);
  text-wrap:balance; font-weight:800;
}
h1{
  font-size:clamp(2.2rem,1.4rem + 3.4vw,3.6rem);
  line-height:1.04; letter-spacing:-.035em; margin:0 0 1rem;
}
h2{
  font-size:clamp(1.55rem,1.2rem + 1.5vw,2.1rem);
  line-height:1.14; letter-spacing:-.025em; margin:3rem 0 .9rem; font-weight:700;
}
h3{
  font-size:1.15rem; line-height:1.3; letter-spacing:-.012em;
  margin:2rem 0 .45rem; font-weight:700;
}
p{ margin:0 0 1.1rem; }

.nb-lede{
  font-size:clamp(1.09rem,1.02rem + .3vw,1.22rem);
  line-height:1.55; color:var(--nb-muted); margin-bottom:1.9rem;
}
.nb-eyebrow{
  font-family:var(--nb-display);
  color:var(--nb-accent); font-size:.78rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; margin:0 0 .85rem;
}

.nb-wrap > p a{ text-underline-offset:.2em; }

/* ───────────────────────────────────────────────────────────── components */

.nb-card{
  background:var(--nb-card); border:1px solid var(--nb-hairline);
  border-radius:var(--nb-radius); padding:1.6rem 1.75rem; margin:2rem 0;
}
.nb-card > :first-child{ margin-top:0; }
.nb-card > :last-child{ margin-bottom:0; }
/* A card's own heading is a label for the list under it, not a section break:
   smaller than an h3 in the flow, and set in the display face. */
.nb-card > h3{
  font-size:.8rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--nb-muted); margin:0 0 1.1rem; padding-bottom:.9rem;
  border-bottom:1px solid var(--nb-hairline);
}

.nb-does,.nb-doesnt{ list-style:none; margin:0; padding:0; display:grid; gap:.7rem; }
.nb-does li,.nb-doesnt li{ position:relative; padding-left:2rem; }
.nb-does li::before,.nb-doesnt li::before{
  position:absolute; left:0; top:.05em; font-weight:700; font-size:1.05em;
}
.nb-does li::before{ content:"✓"; color:var(--nb-save); }
.nb-doesnt li::before{ content:"✗"; color:var(--nb-danger); }

.nb-stat{ display:flex; gap:1.25rem; align-items:flex-start; }
.nb-stat__big{
  font-family:var(--nb-display); font-size:clamp(2.6rem,2rem + 2vw,3.4rem);
  font-weight:800; line-height:.92; letter-spacing:-.045em;
  color:var(--nb-accent); flex:0 0 auto;
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum";
}
.nb-stat__txt{ margin:0; }
.nb-src{ color:var(--nb-muted); font-size:.82rem; margin:.65rem 0 0; }
.nb-src a{ color:var(--nb-muted); }

.nb-faq{ margin:1.5rem 0 0; }
.nb-faq dt{
  font-family:var(--nb-display); font-weight:700; font-size:1.05rem;
  letter-spacing:-.01em; margin:1.6rem 0 .35rem;
}
.nb-faq dd{ margin:0; color:var(--nb-muted); }

/* ───────────────────────────────────────────────────────────────── footer */

.nb-foot{
  margin-top:5rem; border-top:1px solid var(--nb-hairline);
  background:var(--nb-card);
}
.nb-foot__in{ max-width:var(--nb-measure); margin:0 auto; padding:2.25rem 1.25rem 3rem; }
/* The first note is the relationship disclosure — it has to be readable, not
   fine print, so it keeps body size while the rest of the footer steps down. */
.nb-foot__note{ color:var(--nb-muted); font-size:.82rem; margin:0 0 .6rem; line-height:1.55; }
.nb-foot__note:first-child{ color:var(--nb-ink); font-size:.95rem; margin-bottom:.9rem; }
.nb-foot__links{ font-size:.9rem; margin:0 0 .85rem; }
.nb-foot__links a{ color:var(--nb-ink); text-decoration:none; }
.nb-foot__links a:hover{ text-decoration:underline; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

@media (max-width:30rem){
  .nb-wrap{ padding-top:2.5rem; }
  .nb-card{ padding:1.25rem; }
  .nb-stat{ gap:.9rem; }
}