/* NOAH: OEM experience page. Navigation and footer use styles.css. */
.noah-page {
  --n-accent: #78d9f4;
}
.noah-page h1, .noah-page h2, .noah-page h3 {
  margin-top: 0;
  line-height: 1.12;
}
.noah-page h1 {
  max-width: 790px;
  font-size: clamp(42px, 4.5vw, 66px);
  letter-spacing: -0.035em;
  margin-bottom: 24px;
}
.noah-page h2 {
  max-width: 950px;
  font-size: clamp(32px, 3.4vw, 48px);
  letter-spacing: -0.025em;
  margin-bottom: 22px;
}
.noah-page h3 {
  font-size: 23px;
  margin-bottom: 14px;
}
.noah-page p {
  line-height: 1.65;
}
.n-skip {
  position: absolute;
  top: -100px;
  z-index: 100;
  padding: 14px;
  background: white;
}
.n-skip:focus {
  top: 10px;
}
.n-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 70px 0 36px;
  color: white;
  background: #061725;
}
.n-hero-backdrop {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 68% center;
}
.n-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(90deg, #061725fa 0%, #061725e8 30%, #06172599 53%, #06172518 90%), linear-gradient(0deg, #061725, transparent 55%);
}
.n-hero-content {
  min-height: 550px;
}
.n-hero .eyebrow, .n-dark .eyebrow {
  color: var(--n-accent);
}
.n-logo {
  width: 220px;
  height: 80px;
  overflow: hidden;
  margin: 18px 0 24px;
}
.n-logo img {
  width: 220px;
  max-width: none;
  transform: translateY(-36px);
}
.n-lead {
  max-width: 620px;
  font-size: 19px;
  color: #dceaf5;
}
.n-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 25px;
  margin: 28px 0;
}
.n-text-link {
  display: inline-block;
  color: var(--blue);
  font-weight: 700;
}
.n-hero .n-text-link, .n-dark .n-text-link {
  color: var(--n-accent);
}
.n-caption, .n-note, .noah-page figcaption {
  font-size: 14px;
  color: var(--muted);
}
.n-hero .n-caption {
  color: #b7cad8;
}
.n-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 25px;
}
.n-pillars a {
  display: grid;
  gap: 8px;
  padding: 24px;
  border: 1px solid #ffffff35;
  border-radius: 14px;
  background: #071c2ce0;
}
.n-pillars strong {
  font-size: 21px;
}
.n-pillars span {
  color: #b9d0df;
}
.n-section {
  padding: 86px 0;
  scroll-margin-top: 90px;
}
.n-intro {
  max-width: 930px;
  margin-bottom: 36px;
  color: var(--muted);
  font-size: 19px;
}
.n-grid, .n-roles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
.n-three, .n-roles {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.n-card {
  padding: 30px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: white;
}
.n-card p {
  margin-bottom: 0;
  color: var(--muted);
}
.n-tag {
  display: block;
  margin-bottom: 16px;
  color: var(--blue);
  font-size: 13px;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.noah-page figure {
  margin: 0;
}
.n-driver-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #071522;
}
.n-driver-card > img {
  width: 100%;
  height: 310px;
  object-fit: contain;
  padding: 22px;
}
.n-driver-card figcaption {
  padding: 28px;
  background: #f2f7fb;
}
.n-driver-card h3 {
  color: var(--ink);
}
.n-driver-grid + .n-note {
  margin: 15px 0 30px;
}
.n-soft {
  background: #f1f6fa;
}
.n-dark {
  color: white;
  background: #061725;
}
.n-dark .n-intro, .n-dark figcaption, .n-dark .n-note {
  color: #b6cedd;
}
.n-dark .n-card {
  border-color: #274356;
  background: #0d2536;
}
.n-dark .n-card p {
  color: #b6cedd;
}
.n-wide-art {
  overflow: hidden;
  margin-bottom: 30px !important;
  border: 1px solid #28475b;
  border-radius: 20px;
}
.n-wide-art img {
  width: 100%;
}
.n-wide-art figcaption {
  padding: 18px 24px;
}
.n-brief {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 45px;
  align-items: center;
  padding: 36px;
  border: 1px solid var(--line);
  border-radius: 20px;
}
.n-brief blockquote {
  margin: 0;
  color: var(--blue);
  font-size: clamp(26px, 2.5vw, 36px);
  line-height: 1.4;
}
.n-platforms {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 30px;
}
.n-platforms span {
  padding: 12px 24px;
  border: 1px solid #c8dce9;
  border-radius: 30px;
  background: white;
  font-size: 19px;
  font-weight: 700;
}
.n-gallery img {
  width: 100%;
  height: 210px;
  padding: 16px;
  object-fit: contain;
  background: #061725;
  border-radius: 14px;
}
.n-gallery figcaption, .n-proof figcaption {
  padding: 14px 0;
}
.n-proof {
  margin-top: 25px;
}
.n-proof img {
  width: 100%;
  height: 330px;
  object-fit: contain;
  background: #061725;
  border-radius: 14px;
}
/* Store diagram stays conceptual; runtime implementation is not exposed. */
.n-store-diagram {
  margin: 38px 0;
  padding: 30px;
  border: 1px solid #2d4b60;
  border-radius: 24px;
  background: linear-gradient(135deg, #102e42, #091e2c);
}
.n-store-sources {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 28px;
}
.n-store-sources span {
  padding: 9px 16px;
  border: 1px solid #355568;
  border-radius: 30px;
  color: #c6dce8;
}
.n-store-flow {
  display: grid;
  grid-template-columns: 1fr 30px 1.1fr 30px 1fr;
  gap: 12px;
  align-items: stretch;
}
.n-diagram-block {
  padding: 26px;
  border: 1px solid #3b596e;
  border-radius: 16px;
  background: #0b2233;
}
.n-diagram-block p {
  color: #b6cedd;
  margin-bottom: 0;
}
.n-diagram-block .n-tag {
  color: var(--n-accent);
}
.n-runtime-block {
  border-color: #73d8f1;
  background: #123f54;
}
.n-flow-arrow {
  align-self: center;
  color: var(--n-accent);
  font-size: 30px;
}
.n-diagram-base {
  margin: 26px 0 0;
  padding-top: 20px;
  border-top: 1px solid #2d4b60;
  color: #bdd5e2;
  text-align: center;
}
.n-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 16px;
}
.n-table-wrap table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}
.n-table-wrap caption {
  padding: 20px;
  color: var(--muted);
  text-align: left;
}
.n-table-wrap th, .n-table-wrap td {
  padding: 22px;
  vertical-align: top;
  border-top: 1px solid var(--line);
}
.n-table-wrap thead {
  background: #eaf4fb;
}
.n-table-wrap th:first-child {
  width: 22%;
}
.n-table-wrap td:last-child {
  background: #f0faff;
}
.n-roles {
  margin-top: 24px;
}
.n-steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  padding: 0;
  margin: 40px 0 0;
  list-style: none;
  counter-reset: steps;
}
.n-steps li {
  border-top: 2px solid #b5d8ee;
  padding-top: 20px;
  counter-increment: steps;
}
.n-steps strong {
  display: block;
  margin-bottom: 12px;
  font-size: 21px;
}
.n-steps strong::before {
  content: "0" counter(steps) " / ";
  color: var(--blue);
}
.n-steps span {
  color: var(--muted);
}
.n-benchmark {
  margin-top: 28px;
  padding: 32px;
  border-left: 4px solid var(--blue);
  background: #f0f7fc;
}
.n-cta {
  background: #e8f3fb;
}
/* Tablet */
@media (max-width: 1000px) {
  .n-hero-content {
  min-height: 500px;
}
  .n-hero::before {
  background: linear-gradient(90deg, #061725fa, #061725bc 65%, #06172565);
}
  .n-three, .n-roles {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
  .n-steps {
  grid-template-columns: repeat(3, 1fr);
}
  .n-store-flow {
  grid-template-columns: 1fr;
}
  .n-flow-arrow {
  transform: rotate(90deg);
  justify-self: center;
}
  .n-driver-card > img {
  height: 240px;
}
}
/* Mobile */
@media (max-width: 650px) {
  .noah-page .container {
  width: calc(100% - 36px);
}
  .n-hero {
  padding-top: 40px;
}
  .n-hero-content {
  min-height: auto;
}
  .n-hero-backdrop {
  object-position: 72% center;
  opacity: 0.5;
}
  .n-hero::before {
  background: #061725a8;
}
  .n-section {
  padding: 55px 0;
}
  .n-grid, .n-roles, .n-pillars, .n-brief, .n-steps {
  grid-template-columns: 1fr;
}
  .n-card, .n-brief, .n-store-diagram {
  padding: 24px;
}
  .n-proof img {
  height: 250px;
}
  .n-table-wrap table {
  min-width: 640px;
}
}

/* Pillar symbols retained from the original NOAH design. */
.n-pillars a {
  border-top: 2px solid #58d1e8;
}
.n-symbol {
  font-size: 30px;
  color: #63d9ef;
  display: block;
  height: 44px;
}
.n-memory {
  display: flex;
  gap: 4px;
  align-items: center;
  height: 44px;
}
.n-memory i {
  width: 12px;
  height: 21px;
  border: 1px solid #63d9ef;
}
.n-memory i:first-child {
  background: #63d9ef;
}
/* One demonstration image; avoid repeating the same view beside it. */
.n-proof-single {
  max-width: 980px;
  margin-inline: auto;
}
.n-proof-single img {
  height: auto;
  max-height: 550px;
}

/* Runtime-OTA: separate manufacturer and driver update channels. */
.n-ota-paths {
  margin-bottom: 32px;
}
.n-ota-paths .n-card {
  display: flex;
  flex-direction: column;
}
.n-ota-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 24px;
}
.n-ota-flow > span:not(.n-ota-arrow) {
  padding: 10px 12px;
  border-radius: 6px;
  background: #edf7fc;
  color: var(--ink);
  font-size: 13px;
}
.n-ota-arrow {
  color: var(--blue);
}