/* ============================================================
   NORTHBEAMS DESIGN SYSTEM - tokens (colors · type · effects)
   Source of truth for the whole site. Extracted from the
   "Northbeams rebrand mockup" Claude Design project.
   ============================================================ */
:root {
  /* paper / neutrals */
  --nb-cream:#F3EFE6; --nb-cream-card:#FBF8F1; --nb-sand:#E3DED1;
  --nb-sand-warm:#E4DCC9; --nb-sand-input:#F0EBDF;
  /* harbour navies & teals */
  --nb-ink:#0F2E3D; --nb-teal:#14414F; --nb-teal-deep:#0F3945;
  --nb-night:#0B2430; --nb-abyss:#071A24; --nb-abyss-2:#04121A;
  /* gold beam (accent) */
  --nb-gold:#FFC845; --nb-gold-hover:#FFD36E;
  /* coral (danger) */
  --nb-coral:#E65A3C; --nb-coral-deep:#C24327; --nb-coral-tint:#FBE3DC;
  /* support */
  --nb-green:#2E7D32; --nb-green-2:#1F7A4D; --nb-green-tint:#DEF3D6; --nb-rust:#8A6455;
  /* text ramp on cream */
  --nb-text:#0F2E3D; --nb-text-body:#2B4C59; --nb-text-muted:#41565C;
  --nb-text-soft:#4A5A57; --nb-text-faint:#5B6B66; --nb-text-ghost:#7A8B8B;
  /* text on dark */
  --nb-on-dark:#F3EFE6; --nb-on-dark-80:rgba(243,239,230,.80);
  --nb-on-dark-75:rgba(243,239,230,.75); --nb-on-dark-65:rgba(243,239,230,.65);
  --nb-on-dark-40:rgba(243,239,230,.40);
  /* hairlines */
  --nb-line:rgba(15,46,61,.08); --nb-line-strong:rgba(15,46,61,.12);
  --nb-line-on-dark:rgba(243,239,230,.18);
  /* type */
  --nb-font:"Archivo",system-ui,-apple-system,sans-serif;
  --nb-font-mono:ui-monospace,Menlo,Monaco,"Cascadia Code",monospace;
  --nb-size-hero:92px; --nb-size-h1:64px; --nb-size-h2:58px; --nb-size-h3:46px;
  --nb-size-h4:38px; --nb-size-title:32px; --nb-size-title-sm:28px;
  --nb-size-lead:22px; --nb-size-body-lg:21px; --nb-size-body:18px;
  --nb-size-body-sm:17px; --nb-size-caption:15px; --nb-size-fine:14px; --nb-size-eyebrow:14px;
  --nb-weight-medium:500; --nb-weight-semi:600; --nb-weight-bold:700; --nb-weight-black:800;
  --nb-track-display:-0.03em; --nb-track-tight:-0.02em;
  --nb-track-eyebrow:.16em; --nb-track-eyebrow-tight:.1em;
  --nb-leading-hero:1.02; --nb-leading-head:1.04; --nb-leading-body:1.55; --nb-leading-body-loose:1.6;
  /* radii */
  --nb-radius-pill:999px; --nb-radius-xl:32px; --nb-radius-lg:28px; --nb-radius-card:22px;
  --nb-radius-md:14px; --nb-radius-sm:12px; --nb-radius-xs:8px;
  --nb-section:110px;
  /* shadows */
  --nb-shadow-card:0 2px 8px rgba(15,46,61,.08);
  --nb-shadow-hover:0 18px 40px rgba(15,46,61,.12);
  --nb-shadow-dark:0 22px 46px rgba(4,18,26,.34);
  --nb-shadow-nav:0 12px 34px rgba(15,46,61,.14);
  --nb-glow-gold:0 12px 26px rgba(255,200,69,.35);
  --nb-glow-coral:0 6px 16px rgba(194,67,39,.40);
  /* motion */
  --nb-ease:cubic-bezier(.2,.7,.2,1); --nb-ease-pop:cubic-bezier(.2,.8,.2,1);
  --nb-lift:translateY(-6px); --nb-lift-sm:translateY(-2px);
  --nb-dur-fast:.2s; --nb-dur:.22s; --nb-dur-reveal:.7s;
}

/* --- base + keyframes (shared) --- */
body{margin:0;background:#F3EFE6;font-family:'Archivo',system-ui,sans-serif;}
a{color:#14414F;}
a:hover{color:#0F2E3D;}
@keyframes nb-beam{to{transform:rotate(360deg);}}
@keyframes nb-bob{0%,100%{transform:translateY(0);}50%{transform:translateY(-5px);}}
@keyframes nb-drift{0%,100%{transform:translateX(-14px);}50%{transform:translateX(14px);}}
@keyframes nb-marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@keyframes nb-pulse{0%{box-shadow:0 0 0 0 rgba(230,90,60,.5);}100%{box-shadow:0 0 0 16px rgba(230,90,60,0);}}
@keyframes nb-scanx{0%{transform:translateX(-158px);}100%{transform:translateX(150px);}}
@keyframes nb-blockscan{0%{left:0%;}100%{left:100%;}}
@keyframes nb-sail-a{0%{transform:translateX(-24px);}100%{transform:translateX(150px);}}
@keyframes nb-sail-b{0%{transform:translateX(40px);}100%{transform:translateX(-96px);}}
@keyframes nb-sail-c{0%{transform:translateX(0);}100%{transform:translateX(96px);}}
@keyframes nb-rock{0%{transform:rotate(-1.6deg);}100%{transform:rotate(1.6deg);}}
@keyframes nb-lift{0%,100%{transform:translateY(0);}50%{transform:translateY(-9px);}}
@keyframes nb-swing{0%{transform:rotate(-3deg);}100%{transform:rotate(3deg);}}
@keyframes nb-glow{0%,100%{opacity:.22;}50%{opacity:.5;}}
@keyframes nb-radar{to{transform:rotate(360deg);}}
@keyframes nb-pulse-gold{0%{box-shadow:0 0 0 0 rgba(255,200,69,.55);}100%{box-shadow:0 0 0 18px rgba(255,200,69,0);}}
@keyframes nb-pulse-coral{0%{box-shadow:0 0 0 0 rgba(230,90,60,.6);}100%{box-shadow:0 0 0 18px rgba(230,90,60,0);}}
@keyframes nb-sweep{0%{transform:rotate(-13deg);}100%{transform:rotate(15deg);}}
@keyframes nb-ring{0%{transform:scale(.55);opacity:.85;}100%{transform:scale(1.9);opacity:0;}}
@keyframes nb-reveal-a{0%{opacity:1;}54%{opacity:.05;}100%{opacity:0;}}
@keyframes nb-reveal-b{0%{opacity:1;}38%{opacity:.05;}100%{opacity:0;}}
@keyframes nb-reveal-c{0%{opacity:1;}68%{opacity:.05;}100%{opacity:0;}}
@keyframes nb-water-drift{from{transform:translateX(-26px);}to{transform:translateX(26px);}}
@keyframes nb-water-drift2{from{transform:translateX(30px);}to{transform:translateX(-30px);}}
@keyframes nb-caustic{0%,100%{opacity:.4;transform:scale(1);}50%{opacity:.85;transform:scale(1.1);}}
@keyframes nb-ray-sway{0%,100%{opacity:.12;transform:rotate(-2.5deg);}50%{opacity:.26;transform:rotate(2.5deg);}}
@keyframes nb-twinkle{0%,100%{opacity:.2;}50%{opacity:.95;}}
@keyframes nb-float{0%,100%{transform:translateY(0);}50%{transform:translateY(-14px);}}
@keyframes nb-sweep2{0%{transform:rotate(-11deg);}100%{transform:rotate(13deg);}}
@keyframes nb-beacon{0%,100%{opacity:.3;transform:scale(.82);}50%{opacity:.85;transform:scale(1.16);}}
@keyframes nb-sea-flow{to{stroke-dashoffset:-120;}}
@keyframes nb-sea-flow2{to{stroke-dashoffset:96;}}
@keyframes nb-wave-roll{0%{transform:translateX(0);}100%{transform:translateX(-144px);}}
@keyframes nb-wave-roll2{0%{transform:translateX(0);}100%{transform:translateX(120px);}}
@keyframes nb-badge-float{0%,100%{transform:translateY(0);}50%{transform:translateY(-5px);}}
@keyframes nb-arrow-nudge{0%,100%{transform:translateX(0);}50%{transform:translateX(4px);}}
@keyframes nb-star-tw{0%,100%{opacity:.25;transform:scale(.8);}50%{opacity:.9;transform:scale(1.15);}}
@keyframes nb-scroll-hint{0%,100%{transform:translateY(0);opacity:.55;}50%{transform:translateY(7px);opacity:1;}}
@keyframes nb-reflect{0%,100%{opacity:.35;}50%{opacity:.8;}}
@keyframes nb-slack-in{0%{opacity:0;transform:translateY(-16px) scale(.97);}55%{opacity:1;}100%{opacity:1;transform:translateY(0) scale(1);}}
@keyframes nb-react-pop{0%{opacity:0;transform:scale(.3);}60%{transform:scale(1.18);}100%{opacity:1;transform:scale(1);}}

/* motion off for reduced-motion visitors */
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;}}

/* motion off for reduced-motion visitors */
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;}}

/* ============================================================
   COMPONENTS - reusable primitives for building site pages.
   Pair these with the tokens above. New pages compose from
   these classes; the homepage keeps its compiled inline styles.
   ============================================================ */
*{box-sizing:border-box;}
.nb-page{background:var(--nb-cream);color:var(--nb-ink);min-width:1180px;}
.nb-root{max-width:1440px;margin:0 auto;position:relative;isolation:isolate;}
.nb-section{padding:var(--nb-section) 48px 0;}
.nb-wrap{max-width:1360px;margin:0 auto;}
.nb-center{text-align:center;}

.nb-eyebrow{font-size:var(--nb-size-eyebrow);font-weight:var(--nb-weight-bold);letter-spacing:var(--nb-track-eyebrow);text-transform:uppercase;color:var(--nb-teal);}
.nb-eyebrow--gold{color:var(--nb-gold);}

.nb-h1{font-size:var(--nb-size-hero);line-height:var(--nb-leading-hero);font-weight:var(--nb-weight-bold);letter-spacing:var(--nb-track-display);margin:0;}
.nb-h1-split{font-size:62px;line-height:1.03;}
.nb-h2{font-size:var(--nb-size-h1);line-height:var(--nb-leading-head);font-weight:var(--nb-weight-bold);letter-spacing:var(--nb-track-display);margin:0;}
.nb-h3{font-size:var(--nb-size-h3);line-height:var(--nb-leading-head);font-weight:var(--nb-weight-bold);letter-spacing:var(--nb-track-tight);margin:0;}
.nb-title{font-size:var(--nb-size-title);font-weight:var(--nb-weight-bold);letter-spacing:var(--nb-track-tight);}
.nb-lead{font-size:var(--nb-size-lead);line-height:var(--nb-leading-body-loose);color:var(--nb-text-body);}
.nb-body{font-size:var(--nb-size-body-sm);line-height:var(--nb-leading-body);color:var(--nb-text-muted);}
.nb-mono{font-family:var(--nb-font-mono);}
.nb-on-dark{color:var(--nb-on-dark);}
.nb-on-dark-80{color:var(--nb-on-dark-80);}
.nb-on-dark-65{color:var(--nb-on-dark-65);}

/* buttons */
.nb-btn{display:inline-flex;align-items:center;gap:12px;white-space:nowrap;font-size:16px;font-weight:var(--nb-weight-bold);padding:15px 26px;border-radius:var(--nb-radius-pill);cursor:pointer;border:none;text-decoration:none;font-family:var(--nb-font);transition:transform var(--nb-dur-fast) ease,background var(--nb-dur-fast) ease,box-shadow var(--nb-dur-fast) ease,filter var(--nb-dur-fast) ease;}
.nb-btn--gold{background:var(--nb-gold);color:var(--nb-ink);}
.nb-btn--gold:hover{background:var(--nb-gold-hover);transform:var(--nb-lift-sm);box-shadow:var(--nb-glow-gold);}
.nb-btn--ink{background:var(--nb-ink);color:var(--nb-cream);}
.nb-btn--ink:hover{background:var(--nb-teal);transform:var(--nb-lift-sm);box-shadow:var(--nb-shadow-nav);}
.nb-btn--ghost{background:transparent;color:inherit;border:1px solid currentColor;font-weight:var(--nb-weight-semi);}
.nb-btn--ghost:hover{transform:var(--nb-lift-sm);}
.nb-btn__arrow{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:var(--nb-radius-pill);background:var(--nb-gold);color:var(--nb-ink);flex:none;}

/* cards */
.nb-card{background:var(--nb-cream-card);border:1px solid var(--nb-line);border-radius:var(--nb-radius-card);padding:36px;transition:transform var(--nb-dur) ease,box-shadow var(--nb-dur) ease;}
.nb-card:hover{transform:var(--nb-lift);box-shadow:var(--nb-shadow-hover);}
.nb-card--sand{background:var(--nb-sand-warm);border:none;}
.nb-card--dark{background:var(--nb-teal);color:var(--nb-cream);border:none;}
.nb-card--ink{background:var(--nb-ink);color:var(--nb-cream);border:none;}
.nb-card--flat:hover{transform:none;box-shadow:none;}

/* numbered step badge */
.nb-step-num{font-size:15px;font-weight:var(--nb-weight-black);color:var(--nb-gold);background:var(--nb-ink);display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:var(--nb-radius-pill);}

/* nav (dark hero nav) */
.nb-nav{position:relative;z-index:3;display:flex;align-items:center;gap:32px;padding:22px 48px;}
.nb-nav__logo{display:flex;align-items:center;gap:10px;}
.nb-nav__wordmark{font-size:24px;font-weight:var(--nb-weight-black);letter-spacing:var(--nb-track-tight);}
.nb-nav__links{display:flex;gap:28px;margin-left:44px;font-size:16px;font-weight:var(--nb-weight-medium);color:var(--nb-on-dark-80);}
.nb-nav__links span{cursor:pointer;}
/* active page link: gold + bold, and !important so it beats the per-link inline color:inherit */
.nb-nav__links .is-active{color:var(--nb-gold)!important;font-weight:var(--nb-weight-bold);}
.nb-nav__right{margin-left:auto;display:flex;align-items:center;gap:22px;}
/* nav hardening: never wrap items / shrink groups (kills the "For MSPs" wrap + the
   ballooned CTA on narrow desktop); give the secondary "Book a demo" a readable colour */
.nb-nav__links,.nb-nav__right{flex-shrink:0;}
.nb-nav__links{white-space:nowrap;}
/* "Book a demo" secondary CTA -> outlined pill so it reads as a button, not stray text.
   Border uses currentColor tint, so it adapts to the dark hero nav and the light float pill. */
.nb-nav__right a:not(.nb-btn){color:var(--nb-cream);white-space:nowrap;padding:12px 22px;border:1.5px solid rgba(243,239,230,.5);border-radius:var(--nb-radius-pill);transition:border-color .2s ease,background .2s ease;}
.nb-nav__right a:not(.nb-btn):hover{border-color:var(--nb-cream);background:rgba(243,239,230,.08);}
.nb-floatnav__pill > div:last-child a:not(.nb-btn){white-space:nowrap;padding:8px 18px;border:1.5px solid rgba(15,46,61,.32);border-radius:var(--nb-radius-pill);transition:border-color .2s ease,background .2s ease;}
.nb-floatnav__pill > div:last-child a:not(.nb-btn):hover{border-color:var(--nb-ink);background:rgba(15,46,61,.06);}

/* floating pill nav (shared behaviour: nb.js toggles it past 760px) */
.nb-floatnav{position:fixed;top:0;left:0;right:0;z-index:60;transform:translateY(-120%);opacity:0;transition:transform .45s var(--nb-ease-pop),opacity .3s ease;pointer-events:none;}
.nb-floatnav__inner{max-width:1200px;margin:0 auto;padding:14px 24px;}
.nb-floatnav__pill{display:flex;align-items:center;gap:28px;padding:10px 12px 10px 22px;background:rgba(251,248,241,.82);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(15,46,61,.1);border-radius:var(--nb-radius-pill);box-shadow:var(--nb-shadow-nav);pointer-events:auto;}

/* footer */
.nb-footer{padding:70px 48px 56px;}
.nb-footer__col{display:flex;flex-direction:column;gap:12px;text-align:left;font-size:var(--nb-size-caption);color:var(--nb-text-muted);}
.nb-footer__col span{cursor:pointer;}
.nb-footer__col a:hover{color:var(--nb-ink);}
.nb-footer__col b{font-weight:var(--nb-weight-bold);color:var(--nb-ink);}

/* prose (long-form: legal, reference, resources) - generated marketing pages */
.nb-prose{font-size:17px;line-height:1.7;color:var(--nb-text-body);}
.nb-prose h2{font-size:26px;font-weight:800;letter-spacing:-.01em;color:var(--nb-ink);margin:40px 0 12px;}
.nb-prose h3{font-size:20px;font-weight:700;color:var(--nb-ink);margin:28px 0 8px;}
.nb-prose p{margin:0 0 16px;}
.nb-prose ul,.nb-prose ol{margin:0 0 16px;padding-left:22px;}
.nb-prose li{margin:0 0 8px;}
.nb-prose strong{color:var(--nb-ink);}
.nb-prose hr{border:none;border-top:1px solid var(--nb-line-strong);margin:32px 0;}
.nb-prose table{width:100%;border-collapse:collapse;margin:0 0 20px;font-size:15px;}
.nb-prose th,.nb-prose td{border:1px solid var(--nb-line-strong);padding:10px 12px;text-align:left;vertical-align:top;}
.nb-prose th{background:var(--nb-sand-input);font-weight:700;color:var(--nb-ink);}
.nb-prose .nb-prose__meta{font-size:14px;color:var(--nb-text-ghost);margin:0 0 28px;}

/* faq accordion - generated marketing pages */
.nb-faq-item{border-bottom:1px solid var(--nb-line-strong);}
.nb-faq-item summary{list-style:none;cursor:pointer;padding:22px 0;font-size:19px;font-weight:700;color:var(--nb-ink);display:flex;justify-content:space-between;align-items:center;gap:16px;}
.nb-faq-item summary::-webkit-details-marker{display:none;}
.nb-faq-item summary::after{content:"+";font-size:26px;font-weight:400;color:var(--nb-teal);flex:none;transition:transform .2s var(--nb-ease);}
.nb-faq-item[open] summary::after{transform:rotate(45deg);}
.nb-faq-a{padding:0 0 24px;font-size:17px;line-height:1.65;color:var(--nb-text-body);max-width:720px;}
.nb-faq-a a{color:var(--nb-teal);}

/* --- keyframes added for the MSP page --- */
@keyframes nb-pulse-amber{0%{box-shadow:0 0 0 0 rgba(233,162,59,.55);}100%{box-shadow:0 0 0 12px rgba(233,162,59,0);}}
@keyframes nb-signal{0%{offset-distance:0%;opacity:0;}12%{opacity:1;}88%{opacity:1;}100%{offset-distance:100%;opacity:0;}}
@keyframes nb-count-in{0%{opacity:0;transform:translateY(8px);}100%{opacity:1;transform:translateY(0);}}

/* --- animated hero scenes: radar (coverage) / searchlight (product) / fog (pricing) / dawn (company) --- */
@property --ha-fr{syntax:"<length>";inherits:true;initial-value:0px;}
@keyframes ha-radar{to{transform:rotate(360deg);}}
@keyframes ha-tw{0%,100%{opacity:.18;}50%{opacity:.95;}}
@keyframes ha-bob{0%,100%{transform:translateY(0);}50%{transform:translateY(-5px);}}
@keyframes ha-pulse-gold{0%{box-shadow:0 0 0 0 rgba(255,200,69,.55);}100%{box-shadow:0 0 0 15px rgba(255,200,69,0);}}
@keyframes ha-pulse-coral{0%{box-shadow:0 0 0 0 rgba(230,90,60,.6);}100%{box-shadow:0 0 0 15px rgba(230,90,60,0);}}
@keyframes ha-fog{0%{transform:translateX(-8%);}100%{transform:translateX(8%);}}
@keyframes ha-fog2{0%{transform:translateX(7%);}100%{transform:translateX(-7%);}}
@keyframes ha-lift{0%,100%{opacity:.94;}46%{opacity:.2;}}
@keyframes ha-lift2{0%,100%{opacity:.82;}52%{opacity:.14;}}
@keyframes ha-dawn{0%,100%{opacity:0;}46%,60%{opacity:1;}}
@keyframes ha-rise{0%,100%{transform:translateY(64px) scale(.9);opacity:.12;}50%{transform:translateY(-4px) scale(1.06);opacity:.9;}}
@keyframes ha-beam-idle{0%{transform:rotate(-13deg);}100%{transform:rotate(13deg);}}
@keyframes ha-hint{0%,100%{opacity:.5;transform:translateX(0);}50%{opacity:1;transform:translateX(5px);}}
@media (prefers-reduced-motion: reduce){[data-beam-scene] [data-star],[data-fog-scene] *,[data-radar-scene] [data-blip],[data-dawn-scene] *,[data-beam]{animation:none!important;}}

/* CTA buttons converted from div to <a> keep the button look, no link underline */
a.nb-btn,a[style*="cursor:pointer"]{text-decoration:none;}

/* ============================================================
   RESPONSIVE - the built pages (product/coverage/pricing/company/
   university) compose from the shared classes, so this cascades
   to all of them. Scoped under .nb-page so the two fixed-canvas
   designed pages (index, for-msps) are left untouched.
   ============================================================ */
@media (max-width:1024px){
  :root{--nb-size-hero:58px;--nb-size-h1:44px;--nb-size-h2:38px;--nb-size-h3:32px;--nb-size-lead:19px;--nb-section:74px;}
  .nb-page{min-width:0;overflow-x:hidden;}
  .nb-root{max-width:100%;}
  .nb-section{padding:var(--nb-section) 28px 0;}
  .nb-page [style*="grid-template-columns"]{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;}
}
@media (max-width:640px){
  :root{--nb-size-hero:38px;--nb-size-h1:32px;--nb-size-h2:28px;--nb-size-h3:25px;--nb-size-title:23px;--nb-size-lead:16px;--nb-size-body-lg:16px;--nb-section:50px;}
  .nb-section{padding:var(--nb-section) 16px 0;}
  .nb-page [style*="grid-template-columns"]{grid-template-columns:minmax(0,1fr)!important;}
  [data-beam-scene],[data-fog-scene],[data-dawn-scene]{min-height:560px!important;}
  .nb-page [data-radar-scene]{zoom:.58;}                    /* shrink the fixed 520px radar dial to fit the phone */
  span[style*="ha-hint"]{display:none;}                     /* cursor hints are meaningless on touch */
  .nb-h1-split{font-size:33px;line-height:1.08;}            /* coverage radar hero H1 */
}

/* --- fixed-canvas designed pages (index, for-msps): let them reflow instead of
       forcing a 1180px horizontal scroll. Their content is normal-flow, so
       dropping the min-width + stacking grids + shrinking headings reflows it. --- */
@media (max-width:1180px){
  [style*="min-width:1180px"],[style*="min-width: 1180px"]{min-width:0!important;}
  html,body{overflow-x:clip;}   /* clip fixed-px decorative overflow on the designed pages */
}
@media (max-width:900px){
  [style*="grid-template-columns"]{grid-template-columns:minmax(0,1fr)!important;}
}
/* index "THE DIFFERENCE" coverage matrix: the blanket stack rule above would pile
   bare checkmarks under each row label with no column meaning. Keep the 5-column
   grid so every check stays under its BROWSER/DESKTOP/CLI/MCP header, then bleed
   the card into the section's side padding and compact the type on phones. */
@media (max-width:900px){
  div[data-cmp]{grid-template-columns:minmax(0,1.7fr) repeat(4,minmax(0,1fr))!important;}
}
@media (max-width:640px){
  [data-cmp-card]{margin-left:-28px!important;margin-right:-28px!important;padding:8px!important;}
  div[data-cmp]{grid-template-columns:minmax(0,1.4fr) repeat(4,minmax(0,1fr))!important;padding-left:8px!important;padding-right:8px!important;}
  div[data-cmp="row"] > div:first-child{font-size:13px!important;}
  div[data-cmp="head"] > div{font-size:9px!important;letter-spacing:.03em!important;}
  div[data-cmp] span[style*="border-radius:999px"]{width:26px!important;height:26px!important;font-size:13px!important;}
  div[data-cmp="nb"] > div:first-child{gap:6px!important;}
  div[data-cmp="nb"] > div:first-child svg{display:none;}
  div[data-cmp="nb"] > div:first-child span{font-size:13px!important;}
}
@media (max-width:640px){
  h1[style]{font-size:34px!important;line-height:1.08!important;}
  h2[style]{font-size:26px!important;line-height:1.14!important;}
  h3[style]{font-size:21px!important;}
}
/* --- phone hardening for the designed canvas pages (index, for-msps):
       their heroes stack fixed-px decorative art (a lighthouse tower + a
       sweeping beam) over the CTAs, cram the two CTAs side-by-side, and
       carry fixed-px visuals (the 520px radar, the Slack demo) that clip.
       These reflow them. Selectors match only the inline-styled designed
       markup, so the class-based generated pages are untouched. --- */
@media (max-width:640px){
  /* decorative sweep beams sit at fixed desktop coordinates that overlap the CTAs on a
     phone, so hide them site-wide by default (generated pages + the final-CTA banners). */
  [style*="animation:nb-sweep"]{display:none!important;}
  div[style*="right:170px"][style*="z-index:3"]{display:none!important;}
  /* ...but on the HOME hero (uniquely min-height:1040px) don't drop the signature
     lighthouse - reflow it onto the sea below the copy so the beacon scene still reads.
     Give the hero a little more height for a clear band of "sky", stand the tower on the
     waterline at the right, and re-anchor the sweeping beam to its lantern. Scoped under
     the hero so other pages' hidden beams are untouched. */
  /* Fluid height so the bottom-anchored lighthouse always clears the top-anchored copy:
     narrower phones wrap the hero text taller, so grow the hero to match (keeps a ~20-40px
     gap from 320px up), and floor at 1180px so wide phones don't open a void. */
  div[style*="min-height:1040px"]{min-height:max(1180px, calc(2260px - 278vw))!important;}
  div[style*="min-height:1040px"] div[style*="right:170px"][style*="z-index:3"]{
    display:block!important;
    right:20px!important;left:auto!important;bottom:0!important;
    transform:scale(.8);transform-origin:bottom right;z-index:3!important;
  }
  div[style*="min-height:1040px"] [style*="animation:nb-sweep"]{
    display:block!important;
    right:74px!important;left:auto!important;bottom:238px!important;
    width:270px!important;height:110px!important;
  }
  /* hero + final-CTA button rows: stack full-width instead of a cramped side-by-side wrap */
  [style*="justify-content:center;gap:16px"]{flex-direction:column!important;align-items:stretch!important;max-width:360px;margin-left:auto!important;margin-right:auto!important;}
  [style*="justify-content:center;gap:16px"] > a{justify-content:center!important;}
  /* hero text block: trim the fixed 48px side padding so copy has room on a phone */
  div[style*="padding:64px 48px 0"]{padding-left:24px!important;padding-right:24px!important;}
  /* "see everything" radar: scale the fixed 520px canvas to fit, trim its tall cell */
  div[style*="width:520px;height:520px"]{zoom:.52;}
  div[style*="min-height:600px"]{min-height:340px!important;}
  /* Slack approve demo: let its rows wrap instead of clipping the timestamp + last button */
  [data-slack-pending] > div{flex-wrap:wrap!important;}
  [data-slack-msg] [style*="font-size:14px"]{flex-wrap:wrap!important;}
  /* "Kill it in one click" card: toggle + label + ARMED badge overflow the card;
     the badge's margin-left:auto pins it past the right edge. Wrap the row and drop
     the auto margin so the badge flows below instead of running off the card. */
  [data-kill-row]{flex-wrap:wrap!important;gap:14px!important;}
  [data-kill-badge]{margin-left:0!important;}
}
/* generated-page hero/CTA button rows: the built pages center two .nb-btn side by
   side (their inline styles serialize with spaces, so the attribute selector above
   misses them). Match the two-adjacent-buttons row structurally (so single-button
   cards are left alone) and stack them so neither button clips. */
@media (max-width:640px){
  div:has(> a.nb-btn + a.nb-btn){flex-direction:column!important;align-items:stretch!important;max-width:360px;margin-left:auto!important;margin-right:auto!important;}
  div:has(> a.nb-btn + a.nb-btn) > a.nb-btn{justify-content:center!important;}
}
/* long-form (.nb-prose) tables: on a phone they run wider than the screen and the
   page clip hides the extra columns. Let the table scroll inside its own box so
   every column stays reachable instead of cut off. */
@media (max-width:640px){
  .nb-prose table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;}
}
/* ============================================================
   MOBILE HAMBURGER NAV - injected site-wide by mobile-nav.js.
   Hidden on desktop; owns navigation at <=1024px (paired with the
   in-bar nav hides above). Brand navy panel, gold active link.
   ============================================================ */
/* nav collapses to the hamburger below 1080px: with 5 links + the short CTA the
   in-bar nav fits ~1040px, so 1280/1366 laptops keep the full nav + visible CTA */
@media (max-width:1080px){
  .nb-nav__links,.nb-nav__right{display:none!important;}
  [data-float-nav]{display:none!important;}
  nav > div[style*="margin-left:20px"],nav > div[style*="margin-left:30px"],nav > div[style*="margin-left:36px"],nav > div[style*="margin-left:auto"]{display:none!important;}
}
.nbm-burger,.nbm-overlay{display:none;}
@media (max-width:1080px){
  .nbm-burger{display:flex;flex-direction:column;justify-content:center;gap:5px;position:fixed;top:14px;right:14px;z-index:3000;width:48px;height:48px;padding:0 12px;border:none;border-radius:14px;background:var(--nb-ink);cursor:pointer;box-shadow:0 6px 18px rgba(4,18,26,.30);}
  .nbm-burger span{display:block;height:2.5px;width:100%;background:var(--nb-cream);border-radius:2px;transition:transform .25s var(--nb-ease),opacity .18s ease;}
  .nbm-burger.open span:nth-child(1){transform:translateY(7.5px) rotate(45deg);}
  .nbm-burger.open span:nth-child(2){opacity:0;}
  .nbm-burger.open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg);}
  .nbm-overlay{display:block;position:fixed;inset:0;z-index:2900;background:rgba(11,36,48,.55);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity .28s ease;}
  .nbm-overlay.open{opacity:1;pointer-events:auto;}
  .nbm-panel{position:absolute;top:0;right:0;height:100%;width:min(84vw,340px);background:var(--nb-ink);color:var(--nb-cream);box-shadow:-14px 0 44px rgba(4,18,26,.42);transform:translateX(100%);transition:transform .3s var(--nb-ease);display:flex;flex-direction:column;padding:80px 30px 36px;overflow-y:auto;}
  .nbm-overlay.open .nbm-panel{transform:translateX(0);}
  .nbm-close{position:absolute;top:16px;right:18px;background:none;border:none;color:var(--nb-cream);font-size:34px;line-height:1;cursor:pointer;padding:4px 10px;}
  .nbm-links{display:flex;flex-direction:column;gap:2px;}
  .nbm-links a{color:var(--nb-cream);text-decoration:none;font-size:21px;font-weight:700;letter-spacing:-0.01em;padding:13px 0;border-bottom:1px solid rgba(243,239,230,.12);}
  .nbm-links a[aria-current="page"]{color:var(--nb-gold);}
  .nbm-ctas{display:flex;flex-direction:column;gap:12px;margin-top:30px;}
  .nbm-cta{text-align:center;text-decoration:none;font-weight:700;font-size:16px;padding:14px 20px;border-radius:var(--nb-radius-pill);}
  .nbm-cta--gold{background:var(--nb-gold);color:var(--nb-ink);}
  .nbm-cta--ghost{border:1.5px solid rgba(243,239,230,.42);color:var(--nb-cream);}
}