/* ===================================================================
   NANO Immersion product-page overrides. Scoped under body.nano-immersion
   so index.html, technology.html, science-validation.html,
   applications.html and company.html are completely unaffected.
   Reuses shared structural classes from styles.css (.hero, .page, .card,
   .faq-*, .closing, .wrap, .btn, nav) but restyles color/background per
   section per the page rhythm: navy hero -> graphite how-it-works ->
   warm-white facility fit -> graphite athlete recovery -> warm-white FAQ
   -> navy final CTA.
   =================================================================== */
:root{
  --ni-bg:#0A1626;
  --ni-graphite:#1B2531;
  --ni-graphite-line:rgba(255,255,255,0.14);
  --ni-light:#FAF9F5;
  --ni-light-line:#DAD5C8;
  --ni-ink:#F4F6F9;
  --ni-ink-soft:#B7C3D1;
  --ni-ink-dim:#7C8CA6;
  --ni-dark:#1C2430;
  --ni-dark-soft:#525E6E;
  --ni-blue:#2E67E8;
  --ni-blue-deep:#1E4FC7;
  --ni-link-dark:#122F80;
}

body.nano-immersion{
  font-family:'Helvetica Neue',Arial,sans-serif;
  background:var(--ni-bg);
  color:var(--ni-ink);
  line-height:1.6;
}
body.nano-immersion p{line-height:1.6;}
body.nano-immersion h1,
body.nano-immersion h2,
body.nano-immersion h3{font-family:'Helvetica Neue',Arial,sans-serif;}

/* Header / nav — align to the same sans-serif system */
body.nano-immersion header.site-header{background:rgba(10,22,38,0.92);}
body.nano-immersion .nav-cta{background:var(--ni-blue);}
body.nano-immersion .nav-cta:hover{background:var(--ni-blue-deep);}
body.nano-immersion .nav-links a:hover,
body.nano-immersion .nav-links a.active{border-color:var(--ni-blue);}
body.nano-immersion .btn-primary{background:var(--ni-blue);}
body.nano-immersion .btn-primary:hover{background:var(--ni-blue-deep);}
body.nano-immersion .btn-ghost:hover{border-color:var(--ni-blue);color:var(--ni-blue);}

/* ---------- Hero ---------- */
.ni-hero-wrap{
  display:grid;grid-template-columns:1.05fr 0.95fr;column-gap:56px;align-items:center;
}
.ni-hero-copy h1{font-size:44px;font-weight:600;letter-spacing:-0.02em;}
.ni-hero-platform{margin-top:14px;font-size:13px;color:var(--ni-ink-dim);letter-spacing:0.005em;}
.ni-hero-media-frame{
  border-radius:10px;overflow:hidden;aspect-ratio:8/9;box-shadow:0 30px 70px -24px rgba(0,0,0,0.55);
  background:var(--ni-graphite);
}
.ni-hero-media-frame img{width:100%;height:100%;object-fit:cover;display:block;}
.ni-hero-caption{margin-top:10px;font-size:13px;font-style:italic;color:var(--ni-ink-dim);}

.ni-facts{
  margin-top:52px;display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--ni-graphite-line);border-bottom:1px solid var(--ni-graphite-line);
}
.ni-fact{padding:20px 22px 20px 0;border-right:1px solid var(--ni-graphite-line);}
.ni-fact + .ni-fact{padding-left:22px;}
.ni-fact:last-child{border-right:none;}
.ni-fact-main{font-size:16.5px;font-weight:800;letter-spacing:-0.005em;color:var(--ni-ink);}
.ni-fact-sub{margin-top:5px;font-size:13px;color:var(--ni-ink-dim);}

/* ---------- How It Works (navy/graphite) — real text + clean photo ---------- */
.ni-how{background:var(--ni-graphite);border-bottom:1px solid var(--ni-graphite-line);}
.ni-how .section-tag{color:var(--teal-on-dark);}
.ni-how-title{color:var(--ni-ink);max-width:760px;}
.ni-how-wordmark{display:inline-block;vertical-align:baseline;color:var(--ni-ink);width:2.64em;height:0.684em;}
.ni-how-wordmark-svg{display:block;width:100%;height:100%;}

.ni-how-grid{
  margin-top:44px;display:grid;grid-template-columns:1.1fr 0.9fr;gap:52px;align-items:start;
}
.ni-how-figure{margin:0;}
.ni-how-media-frame{
  position:relative;border-radius:10px;overflow:hidden;aspect-ratio:5/3;box-shadow:0 24px 56px -32px rgba(0,0,0,0.55);
  background:var(--ni-dark);
}
.ni-how-media-frame img{width:100%;height:100%;object-fit:cover;display:block;}
.ni-how-caption{margin-top:10px;font-size:13px;font-style:italic;color:var(--ni-ink-dim);}

.ni-how-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:26px;}
.ni-how-step{display:flex;gap:18px;align-items:flex-start;}
.ni-how-num{flex:none;font-size:15px;font-weight:700;color:var(--teal-on-dark);line-height:1.5;min-width:28px;}
.ni-how-step h3{font-size:17px;font-weight:700;color:var(--ni-ink);margin:0 0 6px;}
.ni-how-step p{font-size:15px;line-height:1.55;color:var(--ni-ink-soft);margin:0;}

.ni-how-controls{
  margin-top:44px;padding:28px 32px;border-radius:10px;
  background:var(--ni-dark);border:1px solid var(--ni-graphite-line);max-width:820px;
}
.ni-how-controls h3{font-size:19px;font-weight:700;color:var(--ni-ink);margin:0 0 10px;}
.ni-how-controls p{font-size:15px;line-height:1.6;color:var(--ni-ink-soft);margin:0;}

/* ---------- Facility Fit (warm white) ---------- */
.ni-fit{background:var(--ni-light);color:var(--ni-dark);border-bottom:1px solid var(--ni-light-line);}
.ni-fit .section-title{color:var(--ni-dark);}
.ni-fit .section-lede{color:var(--ni-dark-soft);}

.ni-spec-row{
  margin-top:44px;display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--ni-light-line);
}
.ni-spec{padding:26px 24px 6px 0;border-right:1px solid var(--ni-light-line);}
.ni-spec + .ni-spec{padding-left:24px;}
.ni-spec:last-child{border-right:none;}
.ni-spec h3{font-size:18px;font-weight:800;letter-spacing:-0.01em;color:var(--ni-dark);margin-bottom:9px;}
.ni-spec p{font-size:14.5px;line-height:1.55;color:var(--ni-dark-soft);}

.ni-upgrade{
  margin-top:36px;padding:26px 30px;border-left:4px solid var(--ni-blue);
  background:#F1EEE3;border-radius:0 8px 8px 0;max-width:700px;
  box-shadow:0 16px 36px -24px rgba(28,36,48,0.28);
}
.ni-upgrade h3{font-size:19px;font-weight:800;color:var(--ni-dark);margin-bottom:9px;}
.ni-upgrade p{font-size:15px;color:var(--ni-dark-soft);}

.ni-fit-close{margin-top:32px;}

/* ---------- Athlete Recovery (steel graphite) ---------- */
.ni-athlete{background:var(--ni-graphite);border-bottom:1px solid var(--ni-graphite-line);}
.ni-athlete .section-title{color:var(--ni-ink);}
.ni-athlete .section-lede{color:var(--ni-ink-soft);}

.ni-editorial{
  margin-top:46px;display:grid;grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--ni-graphite-line);
}
.ni-editorial-item{padding:28px 28px 4px 0;border-right:1px solid var(--ni-graphite-line);}
.ni-editorial-item + .ni-editorial-item{padding-left:28px;}
.ni-editorial-item:last-child{border-right:none;}
.ni-editorial-item h3{font-size:17px;font-weight:700;color:var(--ni-ink);margin-bottom:10px;}
.ni-editorial-item p{font-size:15px;line-height:1.6;color:var(--ni-ink-soft);}

/* ---------- FAQ (warm white) ---------- */
.ni-faq{background:var(--ni-light);color:var(--ni-dark);border-bottom:1px solid var(--ni-light-line);}
.ni-faq .section-title{color:var(--ni-dark);}
.ni-faq .faq-list{border-top-color:var(--ni-light-line);}
.ni-faq .faq-item{border-bottom-color:var(--ni-light-line);}
.ni-faq .faq-item summary{color:var(--ni-dark);}
.ni-faq .faq-item summary::after{color:var(--ni-blue);}
.ni-faq .faq-item summary:focus-visible{outline-color:var(--ni-blue);}
.ni-faq .faq-answer{color:var(--ni-dark-soft);}
.ni-faq .faq-answer a{color:var(--ni-link-dark);}
.ni-faq .faq-answer a:hover{color:var(--ni-blue);}

/* ---------- Final CTA (deep navy) ---------- */
.ni-cta{background:var(--ni-bg);}
.ni-cta h2{max-width:680px;text-wrap:balance;}

/* ---------- Responsive ---------- */
@media (max-width:820px){
  .ni-hero-wrap{grid-template-columns:1fr;}
  .ni-hero-media{margin-top:30px;}
  .ni-hero-media-frame{aspect-ratio:8/9 !important;}
  .ni-facts{grid-template-columns:1fr 1fr;}
  .ni-fact:nth-child(2),.ni-fact:nth-child(4){border-right:none;}
  .ni-fact:nth-child(3){padding-left:0;border-top:1px solid var(--ni-graphite-line);padding-top:20px;}
  .ni-fact:nth-child(4){border-top:1px solid var(--ni-graphite-line);padding-top:20px;}
  .ni-spec-row{grid-template-columns:1fr 1fr;}
  .ni-spec:nth-child(2),.ni-spec:nth-child(4){border-right:none;}
  .ni-spec:nth-child(3){padding-left:0;border-top:1px solid var(--ni-light-line);padding-top:22px;}
  .ni-spec:nth-child(4){border-top:1px solid var(--ni-light-line);padding-top:22px;}
  .ni-editorial{grid-template-columns:1fr;}
  .ni-editorial-item{border-right:none;border-bottom:1px solid var(--ni-graphite-line);padding:22px 0;}
  .ni-editorial-item + .ni-editorial-item{padding-left:0;}
  .ni-editorial-item:last-child{border-bottom:none;}
  .ni-how-grid{grid-template-columns:1fr;gap:36px;}
}
@media (max-width:640px){
  .ni-hero-copy h1{font-size:30px;}
  .ni-facts{grid-template-columns:1fr;}
  .ni-fact{border-right:none;border-bottom:1px solid var(--ni-graphite-line);padding:16px 0;}
  .ni-fact:nth-child(2),.ni-fact:nth-child(3),.ni-fact:nth-child(4){padding-left:0;}
  .ni-fact:nth-child(3),.ni-fact:nth-child(4){border-top:none;padding-top:16px;}
  .ni-fact:last-child{border-bottom:none;}
  .ni-spec-row{grid-template-columns:1fr;}
  .ni-spec{border-right:none;border-bottom:1px solid var(--ni-light-line);padding:20px 0;}
  .ni-spec:nth-child(2),.ni-spec:nth-child(3),.ni-spec:nth-child(4){padding-left:0;}
  .ni-spec:nth-child(3),.ni-spec:nth-child(4){border-top:none;padding-top:20px;}
  .ni-spec:last-child{border-bottom:none;}
  .ni-how-controls{padding:22px 22px;}
}