/* NLSYS R9 — Harmonic Blue.
   A restrained engineering palette built around the existing blue logo.
   Decorative graphics stay inside defined visual zones and never cross copy. */
:root{
  --bg:#f7f9fd;
  --bg-2:#f0f4fa;
  --bg-3:#f9fbfe;
  --bg-4:#e8eef7;
  --ink:#172230;
  --ink-soft:#5d6a7d;
  --ink-dim:#7a8697;
  --line:#d7e0ed;
  --line-2:#e7ecf4;
  --signal:#4b6fa8;
  --signal-deep:#405f92;
  --signal-2:#7693c1;
  --clean:#477b6d;
  --noise:#aab4c2;
  --grad:linear-gradient(105deg,#4b6fa8,#7693c1);
  --glow-soft:rgba(73,109,169,.13);
  --surface:rgba(240,244,250,.78);
  --surface-strong:rgba(247,249,253,.92);
  --surface-blue:rgba(229,236,247,.76);
  --shadow-sm:0 1px 2px rgba(25,40,63,.04),0 5px 16px -13px rgba(25,40,63,.22);
  --shadow-md:0 18px 42px -32px rgba(35,59,97,.34);
  --shadow-lg:0 34px 72px -48px rgba(35,59,97,.38);
  --v7-blue:#4b6fa8;
  --v7-cyan:#7693c1;
  --v7-green:#477b6d;
}

html{scroll-padding-top:5.5rem}
body{
  background:
    radial-gradient(circle at 10% 0%,rgba(111,146,203,.11),transparent 31rem),
    radial-gradient(circle at 94% 25%,rgba(154,177,216,.10),transparent 35rem),
    linear-gradient(180deg,#f9fbfe 0,#f6f8fc 45%,#f8fafe 100%);
}

/* Header and navigation use the same cool family as the logo. */
.nav{
  background:rgba(249,251,254,.91);
  border-bottom-color:rgba(210,221,236,.96);
  backdrop-filter:blur(16px) saturate(125%);
}
.v7-context-trail{background:rgba(242,246,251,.94);border-bottom-color:var(--line)}
.v7-nav .nav-start{
  background:rgba(229,236,247,.78);
  border-color:#c7d4e7;
  color:#3f608f!important;
}
.v7-nav .nav-start:hover{background:#dde7f4}
.nav-dd-menu{background:rgba(249,251,254,.98)!important;border-color:var(--line)!important}
.nav-dd-menu a:hover{background:#eef3fa!important}

/* Hero: clean copy area. The visual is a separate instrument strip below the CTAs. */
.hero-xl{
  isolation:isolate;
  background:
    radial-gradient(ellipse 65% 50% at 50% 12%,rgba(255,255,255,.9),transparent 78%);
}
.hero-xl::before{
  display:block!important;
  inset:0!important;
  opacity:1!important;
  -webkit-mask-image:none!important;
  mask-image:none!important;
  background:
    radial-gradient(circle at 18% 22%,rgba(83,119,178,.055),transparent 16rem),
    radial-gradient(circle at 84% 18%,rgba(131,155,197,.07),transparent 18rem)!important;
}
.page-index .hero-xl::after{display:none!important}
.page-index .hero-xl>*{position:relative;z-index:1}

.hero-signal-figure{
  position:relative;
  max-width:61rem;
  margin:2rem auto 0;
  padding:.65rem 1rem .55rem;
  border:1px solid rgba(196,210,230,.92);
  border-radius:16px;
  background:linear-gradient(180deg,rgba(238,243,250,.80),rgba(247,249,253,.66));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),var(--shadow-md);
  overflow:hidden;
}
.hero-signal-figure::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,.38),transparent 20%,transparent 80%,rgba(255,255,255,.28));
}
.hero-signal-figure svg{display:block;width:100%;height:96px;position:relative}
.hero-signal-guide{stroke:#cfd9e7;stroke-width:1;stroke-dasharray:3 7;opacity:.68}
.hero-signal-raw{fill:none;stroke:#a5b0bf;stroke-width:1.6;opacity:.72;vector-effect:non-scaling-stroke}
.hero-signal-result{fill:none;stroke:#557ab5;stroke-width:3.2;opacity:.88;vector-effect:non-scaling-stroke}
.hero-signal-node{fill:#f8fafe;stroke:#557ab5;stroke-width:2;vector-effect:non-scaling-stroke}
.hero-signal-key{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:1rem;
  padding:.45rem .2rem 0;
  border-top:1px solid rgba(207,218,233,.72);
  font-family:var(--font-mono);
  font-size:var(--fs-caption);
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--ink-dim);
}
.hero-signal-key span:nth-child(2){text-align:center}
.hero-signal-key span:nth-child(3){text-align:right;color:#4b6fa8}

/* Buttons: quieter, still clear and accessible. */
.btn-primary{
  background:rgba(64,95,146,.92)!important;
  border-color:rgba(52,82,128,.22)!important;
  color:#fff!important;
  box-shadow:0 12px 26px -17px rgba(42,68,111,.56)!important;
}
.btn-primary:hover{
  background:#385786!important;
  color:#fff!important;
  box-shadow:0 17px 32px -18px rgba(42,68,111,.58)!important;
}
.btn-ghost,.btn-strong{
  background:rgba(241,245,251,.82)!important;
  color:#385779!important;
  border-color:#bfcde0!important;
  box-shadow:0 7px 18px -17px rgba(45,68,103,.42)!important;
  backdrop-filter:blur(8px);
}
.btn-ghost:hover,.btn-strong:hover{
  background:#e8eef7!important;
  color:#2f4d70!important;
  border-color:#8fa7c7!important;
}

/* Sections belong to one continuous canvas; no pasted white slabs. */
.section{border-top-color:var(--line)}
.home-products{background:linear-gradient(180deg,rgba(237,242,249,.36),rgba(247,249,253,.04))}
.v7-route-section{background:linear-gradient(180deg,rgba(239,244,250,.66),rgba(247,249,253,.35))}
.footer{background:rgba(238,243,249,.82);border-top-color:var(--line)}

/* Homepage product directory: one aligned editorial matrix.
   Columns are defined once on the parent and inherited through subgrid, so
   every label, description and action begins on the same vertical axis. */
.product-map{
  display:grid;
  grid-template-columns:minmax(11.5rem,1.05fr) minmax(11.5rem,.95fr) minmax(22rem,2.15fr) minmax(13.75rem,1.15fr);
  column-gap:0;
  border:1px solid var(--line)!important;
  border-radius:16px;
  overflow:hidden;
  background:linear-gradient(180deg,rgba(232,238,247,.62),rgba(240,244,250,.78));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.70);
}
.product-map-row{
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:subgrid;
  align-items:center;
  margin:0;
  padding:0!important;
  min-height:5.7rem;
  background:transparent!important;
  border-color:rgba(205,216,231,.88)!important;
}
.product-map-row>span{min-width:0;padding:1.18rem 1.15rem}
.product-map-row>span+span{border-left:1px solid rgba(205,216,231,.52)}
.product-map-row:nth-child(even){background:rgba(255,255,255,.14)!important}
.product-map-row:last-child{border-bottom:0!important}
.product-map-row:hover{
  background:rgba(222,231,244,.72)!important;
  box-shadow:inset 3px 0 0 #5a7eb7;
}
.product-map-row--accent{border-bottom-color:rgba(191,207,229,.95)!important}
.product-map-name,.product-map-type,.product-map-copy,.product-map-go{align-self:center}
.product-map-type,.product-map-go{color:#4a6c9e!important}
.product-map-go{white-space:normal!important;text-align:right;line-height:1.42}

/* Exact in-page landing point. It is pinned to the section border rather than
   the heading, so the preceding chart and divider never remain in view. */
.home-products{position:relative}
.section-scroll-target{
  position:absolute;
  top:5.6rem;
  left:0;
  width:1px;
  height:1px;
  pointer-events:none;
  scroll-margin-top:0!important;
}

/* Reusable surfaces. Pale blue-grey replaces stark white while preserving hierarchy. */
.step,.benefit,.card,.plan,.door,.persona-card,.doc-item,.form-two>div,
.v7-route-card,.v7-chooser,.v7-choice span,.v7-fastpath-in,.v7-recommendation,
.v7-article-next,.scope,.proof,.cta-band,.input-item,.artifact-card,.use-card,
.fit-card,.flow-card,.mini-card,.commerce-card,.doc-card{
  border-color:var(--line)!important;
  box-shadow:var(--shadow-sm)!important;
}
.step,.benefit,.card,.door,.persona-card,.doc-item,.form-two>div,
.v7-route-card,.v7-choice span,.input-item,.artifact-card,.use-card,
.fit-card,.flow-card,.mini-card,.commerce-card,.doc-card{
  background:rgba(241,245,251,.72)!important;
}
.step:hover,.benefit:hover,.card:hover,.door:hover,.persona-card:hover,.doc-item:hover,
.v7-route-card:hover{
  background:rgba(231,238,248,.78)!important;
  border-color:#b8c9df!important;
}
.plan{
  background:linear-gradient(180deg,rgba(243,246,251,.94),rgba(235,241,249,.84))!important;
}
.plan.featured{
  background:linear-gradient(180deg,rgba(232,239,249,.96),rgba(242,246,251,.94))!important;
  border-color:#8fa9cd!important;
  box-shadow:0 22px 52px -38px rgba(54,87,139,.48)!important;
}
.proof,.cta-band,.v7-recommendation,.v7-fastpath-in,.v7-article-next{
  background:linear-gradient(135deg,rgba(231,238,248,.88),rgba(247,249,253,.84) 68%)!important;
}
.scope{
  background:linear-gradient(180deg,rgba(242,246,251,.92),rgba(231,238,248,.82))!important;
}
.v7-fastpath-actions{
  background:rgba(237,242,249,.66)!important;
  border-top-color:var(--line)!important;
}
.v7-choice input:checked+span{
  border-color:#6c8dbb!important;
  background:#e5edf8!important;
  box-shadow:0 0 0 2px rgba(75,111,168,.11)!important;
}
.v7-purchase-rule{
  background:linear-gradient(120deg,#eaf0f8,#f6f8fc)!important;
  border-color:#c5d3e6!important;
}
.v7-fit-badge{color:#416f63!important;background:#eaf4f0!important;border-color:#c6ded6!important}

/* Data tables and matrices are embedded instruments, not white pasted rectangles. */
.modes,.passport,.ndc-compare,.tscroll table,table.data-table{
  background:rgba(235,241,249,.72)!important;
  border-color:var(--line)!important;
  box-shadow:none!important;
}
.modes thead th,.passport thead th,.ndc-compare thead th,.tscroll table thead th,table.data-table thead th{
  background:rgba(219,228,241,.72)!important;
  color:#68778d!important;
  border-bottom-color:#809ac0!important;
}
.modes tbody td,.passport tbody td,.ndc-compare tbody td,.tscroll table tbody td,table.data-table tbody td{
  background:transparent!important;
  border-bottom-color:rgba(205,216,231,.84)!important;
}
.modes tbody tr:nth-child(even) td,.passport tbody tr:nth-child(even) td,
.ndc-compare tbody tr:nth-child(even) td,.tscroll table tbody tr:nth-child(even) td,
table.data-table tbody tr:nth-child(even) td{
  background:rgba(255,255,255,.18)!important;
}
.modes tbody tr:hover td,.passport tbody tr:hover td,.ndc-compare tbody tr:hover td,
.tscroll table tbody tr:hover td,table.data-table tbody tr:hover td{
  background:rgba(220,230,244,.64)!important;
}

/* Inputs stay legible but no longer look detached from the page. */
input,textarea,select,.form-row select{
  background:rgba(246,248,252,.94)!important;
  border-color:#c8d4e5!important;
}
.code,pre{
  background:rgba(230,237,247,.72)!important;
  border-color:var(--line)!important;
}

/* Contextual chart colours align with the logo and the new palette. */
.scope-svg path{filter:drop-shadow(0 1px 3px rgba(63,96,149,.22))!important}
.stat .v,.card .go,.benefit .go,.step .n,a{color:#4b6fa8}
a:hover{color:#385786}


@media(max-width:1100px){
  .product-map{grid-template-columns:minmax(10.5rem,.9fr) minmax(18rem,1.65fr) minmax(12.5rem,1fr)}
  .product-map-name{grid-column:1;grid-row:1}
  .product-map-type{grid-column:1;grid-row:2;padding-top:0!important}
  .product-map-copy{grid-column:2;grid-row:1 / span 2}
  .product-map-go{grid-column:3;grid-row:1 / span 2}
  .product-map-row>span:nth-child(3){border-left:1px solid rgba(205,216,231,.52)}
}
@media(max-width:700px){
  .hero-signal-figure{margin-top:1.5rem;padding:.45rem .65rem .45rem;border-radius:13px}
  .hero-signal-figure svg{height:72px}
  .hero-signal-key{font-size:.69rem;gap:.35rem}
  .product-map{display:block}
  .product-map-row{display:grid;grid-template-columns:1fr;min-height:0;padding:1.05rem!important;gap:.35rem}
  .product-map-row>span{grid-column:1!important;grid-row:auto!important;padding:0!important;border-left:0!important;text-align:left!important}
  .product-map-go{margin-top:.35rem}
}
@media(max-width:520px){
  .hero-signal-key span:nth-child(2){display:none}
  .hero-signal-key{grid-template-columns:1fr 1fr}
  .hero-signal-key span:nth-child(3){text-align:right}
}
@media(prefers-reduced-motion:reduce){.btn{transition:none!important}}

/* R14: one continuous canvas from the top edge through navigation and content. */
html{background:#f7f9fd}
body{background:radial-gradient(circle at 10% 0%,rgba(111,146,203,.09),transparent 31rem),radial-gradient(circle at 94% 25%,rgba(154,177,216,.08),transparent 35rem),linear-gradient(180deg,#f9fbfe 0,#f6f8fc 52%,#f8fafe 100%)!important}
.nav{background:rgba(248,250,253,.72)!important;box-shadow:none!important}
.v7-context-trail{background:transparent!important}
main{background:transparent}
@media(max-width:760px){.nav{background:rgba(248,250,253,.92)!important}}