/* nlsys public-site design system — typography and layout unification
   Five text sizes only:
   display / heading / lead / body / caption. */
:root{
  --fs-display:clamp(2.55rem,5vw,4.45rem);
  --fs-heading:clamp(1.5rem,2.25vw,1.9rem);
  --fs-lead:clamp(1.125rem,1.65vw,1.35rem);
  --fs-body:1rem;
  --fs-caption:.8rem;
  --maxw:1240px;
  --measure:74ch;
  --hero-measure:76ch;
  --section-measure:82ch;
}

html{-webkit-text-size-adjust:100%}
body{font-size:var(--fs-body);line-height:1.64}

/* The five effective sizes. */
h1{font-size:var(--fs-display)!important;line-height:1.04!important}
h2,h3{font-size:var(--fs-heading)!important}
.hero .lead,.ndc-hero .lead,.lead.hero-lead{font-size:var(--fs-lead)!important;line-height:1.5!important}
p,li,td,.modes,.passport,.btn,.nav-links a:not(.btn),.brand,.prod-tab,
.form-row input,.form-row textarea,.form-row select{font-size:var(--fs-body)!important}
.eyebrow,.hero-pill,.status,.trust,.price-note,.proof-note,.permo,.plan-foot,.disclaimer,
.scope-cap,.bench,.stat .l,.step .n,.benefit .go,.card .num,.card .go,.modes thead th,
.plan .badge,.plan .price sup,.plan .price small,.ent .tag,.footer h4,.footer ul a,
.subnav a,.code,.passport td.k,.passport thead th,.status-pending,.cycle,.door .door-n,
.door .go,.form-row label,.form-note,.share-note,.doc-item .go,.form-consent,.tbl-note,
.sku .tag,.sku .p small,.sku .val,.sku ul,.vflow .vn,.vflow .vw,.vflow .vgo,
.ndc-flow-label,.ndc-art-list span,.ndc-proofbar span,.ndc-problem .n,
.ndc-passport-head span,.ndc-passport-grid b,.ndc-fit .tag,.ndc-compare th,
.ndc-mini-row b,.ndc-mini-row em,.use-card li,.price-main .amount small,
.free-run-diagram,.flow-card .k,.mini-card .num{font-size:var(--fs-caption)!important}

/* Card and compact component titles use body size with weight, not ad-hoc sizes. */
.card h3,.step h3,.benefit h3,.door h3,.plan h3,.sku h3,.vflow h3,
.flow-card h3,.mini-card h3,.input-item h3,.artifact-card h3,.use-card h3,
.fit-card h3,.ndc-flow-box strong,.ndc-problem h3,.ndc-passport-head b,
.ndc-fit h3,.doc-item h3,.price-side .tier b{font-size:var(--fs-body)!important;line-height:1.35!important}

/* Running copy inside page-specific components. */
.ndc-flow-box p,.ndc-problem p,.ndc-passport-grid span,.ndc-fit p,.ndc-fit ul,
.ndc-compare td,.ndc-score p,.ndc-mini-row,.ndc-battery-prices p,
.flow-card p,.mini-card p,.input-item p,.artifact-card p,.use-card p,
.price-main li,.price-side li,.fit-card ul,.callout{font-size:var(--fs-body)!important}
.ndc-console pre{font-size:var(--fs-caption)!important}

/* Values and prices reuse the established heading/display tiers. */
.stat .v,.plan .price,.sku .p,.vflow .vp,.ndc-battery-prices .price{font-size:var(--fs-heading)!important}
.ndc-score .big,.price-main .amount{font-size:var(--fs-display)!important}
.price-main .amount,.price-side .tier span{font-weight:600!important}

/* One hero system across all product pages. */
.hero,.ndc-hero{text-align:center}
.hero h1,.ndc-hero h1{
  max-width:24ch!important;
  margin-left:auto!important;
  margin-right:auto!important;
  text-wrap:balance;
  overflow-wrap:normal;
}
.hero h1 .sig,.ndc-hero h1 .sig{white-space:normal!important}
.hero .lead,.ndc-hero .lead{
  max-width:var(--hero-measure)!important;
  margin-left:auto!important;
  margin-right:auto!important;
  text-wrap:pretty;
}
/* Product label: same rule, same line, aligned to the left edge of the hero-copy measure. */
.hero .eyebrow,.ndc-hero .eyebrow{
  width:min(100%,var(--hero-measure));
  max-width:var(--hero-measure);
  margin-left:auto!important;
  margin-right:auto!important;
  justify-content:flex-start!important;
  text-align:left;
}

/* Consistent section copy width without narrow editorial columns. */
.section-head{
  max-width:var(--section-measure)!important;
  margin-left:auto!important;
  margin-right:auto!important;
}
.section-head>p{max-width:78ch!important;margin-left:auto!important;margin-right:auto!important}
.section-head .eyebrow{justify-content:center}
.section-lead{max-width:74ch!important}

/* Caption/footnote rows always stay in the caption tier. */
.price-note,.proof-note,.plan-foot,.disclaimer,.tbl-note,.form-consent{line-height:1.55}

/* Defensive layout rules: no visual element may escape the content width. */
img,svg,video,canvas{max-width:100%;height:auto}
.hero,.ndc-hero,.cta-band,section{overflow-x:clip}
.tscroll,.scope,.proof,.hero-flow,.free-run-box,.price-panel,.passport,.ndc-compare{max-width:100%}
pre,code{overflow-wrap:anywhere}

@media(max-width:860px){
  :root{--fs-display:clamp(2.25rem,10vw,3.25rem);--fs-heading:1.5rem;--fs-lead:1.125rem;--fs-body:1rem;--fs-caption:.8rem}
  .hero .eyebrow,.ndc-hero .eyebrow{width:100%;max-width:100%;justify-content:flex-start!important}
  .hero h1,.ndc-hero h1{max-width:13ch!important}
  .hero .lead,.ndc-hero .lead{max-width:100%!important}
}

/* R5 — sales funnel, responsive type, direct purchase layouts */
:root{
  --fs-display:clamp(2.35rem,4.2vw,3.75rem);
  --fs-heading:clamp(1.4rem,1.75vw,1.8rem);
  --fs-lead:clamp(1.0625rem,1.2vw,1.1875rem);
  --fs-body:1rem;
  --fs-caption:.8rem;
}

/* Five visible type tiers only. */
.faq summary,
.frow h3,
.price-side h3,
.commerce-card h3,
.persona-card h3{
  font-size:var(--fs-lead)!important;
  line-height:1.34!important;
  letter-spacing:-.01em!important;
}
.price-main .amount,
.ndc-score .big,
.ndc-price-card .price,
.commerce-price{
  font-size:var(--fs-heading)!important;
  line-height:1.15!important;
}

/* Prevent row labels and FAQ questions from overpowering their sections. */
.frow{align-items:start;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
.frow h3{max-width:22ch}
.frow>p,.frow>ul,.frow>form{max-width:68ch;min-width:0}
.faq summary{font-family:var(--font-display);font-weight:600}

/* All CTA rows use the same visual axis. */
.hero-cta,.button-row,.tier-actions,.door-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center!important;
  gap:.75rem;
  width:100%;
  max-width:none;
}
.button-row{margin-top:1.35rem}
.hero-cta .btn,.button-row .btn{justify-content:center;min-width:11.5rem}
.price-main>.btn,.price-side>.btn{
  display:flex!important;
  width:max-content;
  margin:1.2rem auto 0!important;
  justify-content:center;
}
.price-main,.price-side{min-width:0}
.price-main ul,.price-side ul{max-width:34rem}
.price-side .tier{min-width:0;flex-wrap:wrap}
.price-side .tier b{min-width:0}
.tier-actions{margin-top:1.15rem}
.tier-actions .btn{min-width:7rem}

/* Direct-purchase product cards. */
.commerce-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1rem;
  align-items:stretch;
}
.commerce-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.commerce-card{
  display:flex;
  flex-direction:column;
  min-width:0;
  padding:1.45rem;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
  box-shadow:var(--shadow-sm);
}
.commerce-card.featured{border:2px solid var(--signal);box-shadow:0 22px 52px -32px rgba(37,99,235,.45)}
.commerce-tag{font-family:var(--font-mono);font-size:var(--fs-caption);letter-spacing:.1em;color:var(--signal);text-transform:uppercase}
.commerce-card h3{margin:.55rem 0 .25rem}
.commerce-price{font-family:var(--font-display);font-weight:600;color:var(--ink);margin:.15rem 0 .65rem}
.commerce-card p{color:var(--ink-soft);margin:0 0 1.1rem}
.commerce-card .btn{width:100%;justify-content:center;margin-top:auto}

/* Homepage product and persona cards. */
.product-doors{grid-template-columns:repeat(3,minmax(0,1fr))!important}
.product-doors .door{min-width:0}
.door-actions{justify-content:flex-start!important;margin-top:auto}
.door-actions .btn{min-width:0;flex:1 1 8rem;padding:.62rem .8rem}
.persona-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
.persona-card{display:flex;flex-direction:column;min-width:0;border:1px solid var(--line);border-radius:14px;background:#fff;padding:1.4rem;box-shadow:var(--shadow-sm)}
.persona-card h3{margin:0 0 .55rem}
.persona-card p{color:var(--ink-soft);margin:0 0 1.1rem}
.persona-card .btn{width:100%;justify-content:center;margin-top:auto}

/* Pricing and NDC cards stack before any text can escape the viewport. */
.price-grid,.ndc-price-main{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important}
.compact-cta .cta-band{text-align:center}
.compact-cta .cta-band h2,.compact-cta .cta-band p{margin-left:auto;margin-right:auto}

/* Mobile type is intentionally restrained. */
@media(max-width:1100px){
  .commerce-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .persona-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .price-grid,.ndc-price-main{grid-template-columns:1fr!important}
}
@media(max-width:860px){
  :root{
    --fs-display:clamp(2rem,8vw,2.4rem);
    --fs-heading:1.4rem;
    --fs-lead:1.0625rem;
    --fs-body:1rem;
    --fs-caption:.8rem;
  }
  .frow{grid-template-columns:1fr;gap:.45rem}
  .frow h3,.frow>p,.frow>ul,.frow>form{max-width:none}
  .product-doors,.commerce-grid,.commerce-grid.three,.persona-grid{grid-template-columns:1fr!important}
  .hero h1,.ndc-hero h1{max-width:16ch!important}
  .hero-cta .btn,.button-row .btn{min-width:0}
}
@media(max-width:520px){
  .hero-cta,.button-row,.tier-actions,.door-actions{align-items:stretch}
  .hero-cta .btn,.button-row .btn,.tier-actions .btn,.door-actions .btn{width:100%;flex:1 1 100%}
  .commerce-card,.persona-card,.door,.plan{padding:1.2rem}
}

/* Keep hero actions inside the page padding on narrow screens. */
.hero-cta{width:auto!important;margin-left:auto;margin-right:auto}
.button-row{width:100%}
@media(max-width:520px){
  .hero-cta{width:100%!important;padding-inline:0}
  .hero-cta .btn{max-width:100%}
}
.hero.wrap{padding-left:var(--pad-x)!important;padding-right:var(--pad-x)!important}
.door-meta{font-size:var(--fs-caption)!important}
.product-rules span{font-size:var(--fs-body)!important}
pre,code{font-size:var(--fs-caption)!important}

/* R6 — compact editorial layout; homepage explores, Pricing sells. */
:root{
  --fs-display:clamp(2.25rem,3.8vw,3.4rem);
  --fs-heading:clamp(1.35rem,1.55vw,1.65rem);
  --fs-lead:clamp(1.04rem,1.1vw,1.14rem);
  --fs-body:1rem;
  --fs-caption:.8rem;
}

.hero{padding:clamp(2.8rem,5.5vw,5rem) 0 clamp(2.2rem,4vw,3.4rem)!important}
.section{padding:clamp(2.4rem,4vw,3.8rem) 0!important}
.section-head{margin-bottom:1.75rem!important}
.section-head p{margin-top:.75rem!important}

/* Compact product directory on the homepage: no purchase buttons and no card wall. */
.home-products{padding-top:3rem!important}
.product-map{border-top:1px solid var(--line);max-width:72rem;margin:0 auto}
.product-map-row{
  display:grid;
  grid-template-columns:minmax(10rem,.85fr) minmax(9rem,.8fr) minmax(18rem,1.75fr) auto;
  gap:1rem 1.5rem;
  align-items:center;
  padding:1.3rem 0;
  border-bottom:1px solid var(--line);
  color:var(--ink);
}
.product-map-row:hover{text-decoration:none;color:var(--ink);background:linear-gradient(90deg,transparent,#F7FAFF 12%,#F7FAFF 88%,transparent)}
.product-map-row--accent{border-bottom-color:#BED2F7}
.product-map-name{font-family:var(--font-display);font-size:var(--fs-lead);font-weight:600;letter-spacing:-.01em}
.product-map-type{font-family:var(--font-mono);font-size:var(--fs-caption);color:var(--signal);text-transform:uppercase;letter-spacing:.06em}
.product-map-copy{color:var(--ink-soft);line-height:1.55}
.product-map-go{font-family:var(--font-mono);font-size:var(--fs-caption);font-weight:600;color:var(--signal);white-space:nowrap}
.product-map-note{max-width:72rem!important;margin:1rem auto 0!important;text-align:center;color:var(--ink-dim);font-size:var(--fs-caption)!important;line-height:1.55}

/* Final action areas are concise editorial blocks, not oversized cards. */
.cta-band{
  max-width:54rem;
  margin:0 auto;
  padding:1rem 0!important;
  text-align:center;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
}
.cta-band::after{display:none!important}
.cta-band .eyebrow{justify-content:center!important}
.cta-band h2{max-width:34ch!important;margin-left:auto!important;margin-right:auto!important}
.cta-band p{max-width:68ch!important;margin:.75rem auto 0!important}
.cta-band .hero-cta{margin-top:1.25rem!important}

/* Interior row labels and FAQ questions must never look like section headings. */
.frow h3,.faq summary{
  font-size:1.05rem!important;
  line-height:1.42!important;
  letter-spacing:0!important;
}
.price-side h3{font-size:1.1rem!important;line-height:1.35!important}
.frow{padding:1.35rem 0!important}
.faq details{padding:.9rem 0!important}

/* Less template-like depth: reserve stronger cards for plans and primary commercial choices. */
.step,.benefit,.card,.door,.persona-card{box-shadow:none!important}

@media(max-width:980px){
  .product-map-row{grid-template-columns:minmax(9rem,.8fr) minmax(0,1.7fr) auto}
  .product-map-type{grid-column:1;grid-row:2}
  .product-map-copy{grid-column:2;grid-row:1 / span 2}
  .product-map-go{grid-column:3;grid-row:1 / span 2}
}
@media(max-width:700px){
  :root{
    --fs-display:clamp(1.95rem,8.5vw,2.2rem);
    --fs-heading:1.3rem;
    --fs-lead:1.04rem;
    --fs-body:1rem;
    --fs-caption:.78rem;
  }
  .hero{padding-top:2.4rem!important;padding-bottom:2rem!important}
  .section{padding:2.35rem 0!important}
  .product-map-row{grid-template-columns:1fr;gap:.3rem;padding:1.1rem 0}
  .product-map-name,.product-map-type,.product-map-copy,.product-map-go{grid-column:1;grid-row:auto}
  .product-map-go{margin-top:.35rem}
  .cta-band{padding:.4rem 0!important}
  .cta-band .hero-cta{margin-top:1rem!important}
}

/* R6.1 — reduce vertical drag and avoid a site-wide wall of cards. */
.section{padding:clamp(2rem,3vw,3rem) 0!important}
.section-head{margin-bottom:1.5rem!important}

/* Informational grids are open editorial columns. Commercial plans remain cards. */
.step,.benefit,.card,.input-item,.artifact-card,.use-card,.fit-card,.flow-card,.mini-card{
  background:transparent!important;
  border:0!important;
  border-top:2px solid var(--line)!important;
  border-radius:0!important;
  box-shadow:none!important;
  padding:1rem .25rem!important;
}
.step:hover,.benefit:hover,.card:hover,.input-item:hover,.artifact-card:hover,.use-card:hover,.fit-card:hover,.flow-card:hover,.mini-card:hover{
  transform:none!important;
  border-top-color:var(--signal)!important;
  box-shadow:none!important;
}

/* Keep compact grids compact. */
.steps,.benefits,.cards{gap:1.35rem!important}
.step h3,.benefit h3,.card h3,.input-item h3,.artifact-card h3,.use-card h3,.fit-card h3,.flow-card h3,.mini-card h3{
  margin-top:.45rem!important;
  margin-bottom:.35rem!important;
}
.step p,.benefit p,.card p,.input-item p,.artifact-card p,.use-card p,.fit-card p,.flow-card p,.mini-card p{
  margin-bottom:.5rem!important;
}