/* Deep feature pages — Admin & Viewer */

/* ----- Shared feature section — aligned to homepage n7e-action rhythm ----- */
.n7d-sec {
  padding: clamp(72px, 9vw, 120px) var(--navi-pad);
  color: var(--navi-off-white);
}
.n7d-sec--light {
  color: var(--navi-ink);
  background: #fafafa;
}
.n7d-sec__inner { width: min(var(--navi-maxw), 100%); margin: 0 auto; }
/* Match homepage .n7e-action__kicker — mono blue, no star */
.n7d-sec__eyebrow {
  font-family: var(--navi-mono);
  font-size: 11px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--navi-light-blue);
}
.n7d-sec--light .n7d-sec__eyebrow { color: var(--navi-blue); }
.n7d-sec h2 {
  margin-top: 14px;
  font-size: clamp(26px, 3.2vw, 40px);
  font-weight: 400;
  letter-spacing: -.02em;
  max-width: 16ch;
  line-height: 1.12;
}
.n7d-sec h2 .g {
  background: linear-gradient(92deg, #dce6fd, #639fff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.n7d-sec--light h2 .g {
  background: var(--navi-gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
}
.n7d-checks {
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 13px;
  max-width: 44ch;
}
.n7d-checks li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 11px;
  font-size: 15px;
  line-height: 1.45;
  color: rgba(244, 246, 255, .88);
  font-weight: 400;
}
.n7d-sec--light .n7d-checks li { color: #34384f; }
.n7d-checks li::before {
  content: "";
  width: 17px;
  height: 17px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--navi-gradient);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/12px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/12px no-repeat;
}
.n7d-note {
  display: inline-block;
  margin-top: 28px;
  padding: 6px 12px;
  border-radius: 0;
  border: 1px solid rgba(220, 230, 253, .18);
  font-family: var(--navi-mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--navi-pastel-blue);
}
.n7d-note--inline {
  margin-top: 0;
  margin-left: 6px;
  margin-right: 2px;
  padding: 3px 9px;
  vertical-align: middle;
  border-color: rgba(245, 180, 90, .45);
  color: #f5c878;
  background: rgba(245, 180, 90, .1);
}
.n7d-checks--center {
  margin: 36px auto 0;
  max-width: 52ch;
  text-align: left;
}
.n7d-sec--light .n7d-note {
  border-color: var(--navi-line);
  color: var(--navi-blue);
  background: rgba(23, 41, 135, .04);
}
/* CTA-aligned closer — same weight/color/underline language as .n7e-action__more */
.n7d-payoff {
  max-width: 42ch;
  margin-top: 28px;
  font-size: 15px;
  font-weight: 600;
  color: var(--navi-light-blue);
  line-height: 1.45;
}
.n7d-payoff::after {
  content: "";
  display: block;
  margin-top: 10px;
  width: 28px;
  height: 1px;
  background: #639fff;
}
.n7d-payoff b { color: #fff; font-weight: 600; }
.n7d-sec--light .n7d-payoff {
  color: #172987;
}
.n7d-sec--light .n7d-payoff::after {
  background: #639fff;
}
.n7d-sec--light .n7d-payoff b {
  color: var(--navi-ink);
}
.n7d-more {
  width: max-content;
  margin-top: 28px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--navi-light-blue);
  font-size: 15px;
  font-weight: 600;
}
.n7d-more::after {
  content: "";
  width: 28px;
  height: 1px;
  background: #639fff;
  transition: width .3s var(--navi-ease);
}
.n7d-more:hover::after { width: 38px; }
.n7d-sec--light .n7d-more { color: #172987; }

/* Split layout — homepage action grid proportions */
.n7d-split {
  display: grid;
  grid-template-columns: minmax(300px, .72fr) minmax(0, 1.28fr);
  gap: clamp(42px, 6vw, 92px);
  align-items: center;
}
.n7d-split__copy { max-width: 430px; }
.n7d-split--flip { grid-template-columns: minmax(0, 1.28fr) minmax(300px, .72fr); }
.n7d-split--flip .n7d-split__copy { order: 2; }
.n7d-split--flip .n7d-split__media { order: 1; }
.n7d-split--wide { grid-template-columns: minmax(0, 1.28fr) minmax(300px, .72fr); }
@media (max-width: 980px) {
  .n7d-split,
  .n7d-split--flip,
  .n7d-split--wide {
    grid-template-columns: minmax(250px, .78fr) minmax(0, 1.22fr);
    gap: 38px;
  }
  .n7d-split--flip,
  .n7d-split--wide { grid-template-columns: minmax(0, 1.22fr) minmax(250px, .78fr); }
}
@media (max-width: 720px) {
  .n7d-split,
  .n7d-split--flip,
  .n7d-split--wide {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 34px;
  }
  /* Keep zigzag: flipped sections show media first */
  .n7d-split--flip .n7d-split__media,
  .n7d-split--wide .n7d-split__media { order: 1; }
  .n7d-split--flip .n7d-split__copy,
  .n7d-split--wide .n7d-split__copy { order: 2; }
  .n7d-checks { margin-top: 24px; }
  .n7d-payoff { max-width: 100%; }
  /* Full-bleed media: zero section side pad, keep copy inset */
  .n7d-sec {
    padding-inline: 0;
  }
  .n7d-sec__inner.n7d-split,
  .n7d-sec__inner.n7d-split--flip,
  .n7d-sec__inner.n7d-split--wide {
    width: 100%;
  }
  .n7d-split__copy,
  .n7d-sec__center {
    padding-inline: var(--navi-pad);
  }
  /* Text-only sections (no split media) keep side inset */
  .n7d-sec__inner:not(:has(.n7d-split)) {
    padding-inline: var(--navi-pad);
  }
  .n7d-sec__inner:has(.n7d-split) > .n7d-flow {
    padding-inline: var(--navi-pad);
  }
  .n7d-split__copy {
    max-width: none;
  }
  .n7d-split__media {
    width: 100%;
    margin: 0;
  }
  .n7d-split__media .n7d-win,
  .n7d-split__media .n7d-bleed {
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }
}

/* Window chrome media (Admin identity) — sharp panels like homepage */
.n7d-win {
  border-radius: 0;
  overflow: hidden;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.n7d-win__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, .04);
  border-bottom: 1px solid rgba(220, 230, 253, .1);
}
.n7d-win__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(220, 230, 253, .28);
}
.n7d-win__dot:nth-child(1) { background: #ff5f57; }
.n7d-win__dot:nth-child(2) { background: #febc2e; }
.n7d-win__dot:nth-child(3) { background: #28c840; }
.n7d-win__title {
  margin-left: 8px;
  font-family: var(--navi-mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--navi-muted-dark);
}
.n7d-win__body { aspect-ratio: 16 / 10; overflow: hidden; position: relative; background: transparent; }
.n7d-win__body img,
.n7d-win__body video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center center;
}
.n7d-win__chip {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 2;
  padding: 7px 12px;
  border-radius: 0;
  background: rgba(16, 16, 41, .82);
  border: 1px solid rgba(220, 230, 253, .2);
  backdrop-filter: blur(8px);
  font-size: 12px;
  color: var(--navi-pastel-blue);
}

/* Full-bleed media (Viewer identity) — sharp like homepage panels */
.n7d-bleed {
  border-radius: 0;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  position: relative;
  border: 0;
  box-shadow: none;
  background: transparent;
}
.n7d-bleed img,
.n7d-bleed video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center center;
}
.n7d-hud {
  position: absolute;
  z-index: 2;
  padding: 10px 14px;
  border-radius: 0;
  background: rgba(16, 16, 41, .72);
  border: 1px solid rgba(220, 230, 253, .18);
  backdrop-filter: blur(10px);
  color: var(--navi-off-white);
  font-size: 13px;
  max-width: min(240px, 70%);
}
.n7d-hud--tl { top: 14px; left: 14px; }
.n7d-hud--br { right: 14px; bottom: 14px; }
.n7d-hud--bl { left: 14px; bottom: 14px; }
.n7d-hud small {
  display: block;
  margin-top: 4px;
  font-family: var(--navi-mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--navi-pastel-blue);
}

/* Cinematic hero — full-bleed media (Admin + Viewer).
   Icon grid lives INSIDE the hero so copy + icons share one atmosphere plane
   (same continuous feel as home). Soft dissolve only at the floor into .n7b-melt.
   Double class beats home.css `.n6-hero` (loaded after this sheet on Admin). */
.n6-hero.n6-hero--cinematic {
  min-height: auto;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: 150px var(--navi-pad) 0;
  position: relative;
  overflow: hidden;
  text-align: center;
  color: var(--navi-off-white);
  background: var(--navi-deep);
}
.n6-hero.n6-hero--cinematic .n6-hero__bg {
  position: absolute; inset: 0; z-index: 0; background: var(--navi-deep);
}
.n6-hero.n6-hero--cinematic .n6-hero__bg video,
.n6-hero.n6-hero--cinematic .n6-hero__bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.4;
  /* Media stays present through the copy, then soft-fades under the icons */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 28%, rgba(0,0,0,.45) 52%, transparent 78%);
  mask-image: linear-gradient(180deg, #000 0%, #000 28%, rgba(0,0,0,.45) 52%, transparent 78%);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.n6-hero.n6-hero--cinematic .n6-hero__bg img { z-index: 0; }
.n6-hero.n6-hero--cinematic .n6-hero__bg video { z-index: 1; }
.n6-hero.n6-hero--cinematic .n6-hero__scrim {
  position: absolute; inset: 0; z-index: 1;
  /* Readable copy mid-hero; solid deep by the icon band — no hard mid-stop */
  background:
    linear-gradient(180deg,
      rgba(16, 16, 41, .7) 0%,
      rgba(16, 16, 41, .35) 22%,
      rgba(16, 16, 41, .55) 38%,
      rgba(16, 16, 41, .82) 55%,
      rgba(16, 16, 41, .96) 72%,
      #101029 88%,
      #101029 100%),
    radial-gradient(60% 40% at 50% 30%, rgba(99, 159, 255, .12), transparent 70%);
}
/* Soft floor into melt — only at the very bottom of the shared hero+icons plane */
.n6-hero.n6-hero--cinematic::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: clamp(48px, 8vh, 96px);
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(16, 16, 41, 0) 0%, #101029 100%);
}
.n6-hero.n6-hero--cinematic .n6-hero__in {
  position: relative;
  z-index: 2;
  width: min(960px, 100%);
  margin: 0 auto;
  text-align: center;
  padding-bottom: clamp(28px, 4vw, 48px);
}
.n6-hero.n6-hero--cinematic h1 {
  margin: 14px auto 0;
  font-size: clamp(40px, 6.5vw, 78px);
  line-height: .98;
  max-width: 14ch;
}
.n6-hero.n6-hero--cinematic .n6-hero__sub { margin: 20px auto 0; max-width: 560px; }
.n6-hero.n6-hero--cinematic .n6-hero__cta { justify-content: center; }
.n6-hero.n6-hero--admin h1 { max-width: 16ch; }

/* Icon grid — inside hero, over the same deep atmosphere */
.n6-hero.n6-hero--cinematic .n7d-sec--icons {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: clamp(8px, 2vw, 24px) 0 clamp(48px, 7vw, 88px);
  background: transparent;
  text-align: left;
}
/* Hero already has side pad — don't double-inset the icon inner */
.n6-hero.n6-hero--cinematic .n7d-sec--icons .n7d-sec__inner {
  padding-inline: 0;
}
.n7d-sec--icons {
  padding-top: clamp(28px, 4vw, 48px);
  padding-bottom: clamp(32px, 4vw, 48px);
}
.n7d-icongrid {
  margin: 0 auto;
  width: 100%;
  border: 0;
  background: transparent;
  overflow: visible;
}
.n7d-icongrid .n7f-bt {
  min-height: 0;
  text-align: left;
  background: transparent !important;
  box-shadow: none !important;
  justify-content: flex-start;
  gap: 0;
}
.n7d-icongrid .n7f-bt:hover,
.n7d-icongrid .n7f-bt:focus-visible {
  background: transparent !important;
}
.n7d-icongrid .n7f-bt__ic { flex: none; }
.n7d-icongrid .n7f-bt h3 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
}
.n7d-icongrid .n7d-note--inline {
  flex-shrink: 0;
}
@media (max-width: 560px) {
  .n7d-icongrid .n7f-bt {
    min-height: 0;
  }
}

/* Melt starts on the same deep — no seam after the shared hero plane */
.n6-hero.n6-hero--cinematic + .n6-seam + .n7b-melt > .n7e-actions--stack[data-stack-palette="navy"],
.n6-hero.n6-hero--cinematic ~ .n7b-melt > .n7e-actions--stack[data-stack-palette="navy"] {
  margin-top: 0;
  padding-top: 0;
}

@media (max-width: 700px) {
  .n6-hero.n6-hero--cinematic {
    min-height: auto;
    padding: 120px var(--navi-pad) 0;
  }
  .n6-hero.n6-hero--cinematic .n7d-sec--icons {
    padding-bottom: clamp(36px, 8vw, 64px);
  }
}

/* Calendar pill switcher */
.n7d-pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.n7d-pill {
  font: inherit;
  font-size: 13px;
  padding: 8px 14px;
  border-radius: 0;
  border: 1px solid rgba(220, 230, 253, .18);
  background: transparent;
  color: var(--navi-muted-dark);
  cursor: pointer;
  transition: color .3s, background .3s, border-color .3s;
}
.n7d-pill.is-on {
  background: var(--navi-blue);
  border-color: var(--navi-blue);
  color: var(--navi-off-white);
}
.n7d-sec--light .n7d-pill {
  border-color: var(--navi-line);
  color: var(--navi-muted);
  background: #fff;
}
.n7d-sec--light .n7d-pill.is-on {
  background: var(--navi-blue);
  border-color: var(--navi-blue);
  color: var(--navi-off-white);
}
.n7d-cal-stage { position: relative; display: grid; }
.n7d-cal-slide {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .45s var(--navi-ease), visibility 0s linear .45s;
}
.n7d-cal-slide.is-on {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

/* Studio flow steps */
.n7d-flow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: visible;
  margin-top: 28px;
}
.n7d-flow__step {
  background: transparent;
  padding: clamp(18px, 2.5vw, 28px);
}
.n7d-flow__step + .n7d-flow__step {
  border-left: 1px solid rgba(220, 230, 253, .12);
}
.n7d-flow__n {
  font-family: var(--navi-mono);
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--navi-light-blue);
}
.n7d-flow__step h3 {
  margin-top: 10px;
  font-size: 18px;
  font-weight: 500;
}
.n7d-flow__step p {
  margin-top: 8px;
  font-size: 14px;
  color: var(--navi-muted-dark);
  font-weight: 300;
  line-height: 1.45;
}
.n7d-sec--light .n7d-flow__n { color: var(--navi-blue); }
.n7d-sec--light .n7d-flow__step + .n7d-flow__step {
  border-left-color: var(--navi-line);
}
.n7d-sec--light .n7d-flow__step p { color: var(--navi-muted); }
@media (max-width: 700px) {
  .n7d-flow { grid-template-columns: 1fr; }
  .n7d-flow__step + .n7d-flow__step {
    border-left: 0;
    border-top: 1px solid rgba(220, 230, 253, .12);
  }
  .n7d-sec--light .n7d-flow__step + .n7d-flow__step {
    border-top-color: var(--navi-line);
  }
}

/* FAQ */
.n7d-faq {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: 36px;
}
.n7d-faq__item {
  padding: clamp(18px, 2.5vw, 26px);
  border-radius: var(--navi-radius);
  border: 1px solid var(--navi-line);
  background: #fff;
}
.n7d-faq__item h3 {
  font-size: 16px;
  font-weight: 500;
  color: var(--navi-ink);
}
.n7d-faq__item p {
  margin-top: 8px;
  font-size: 14px;
  color: var(--navi-muted);
  font-weight: 300;
  line-height: 1.5;
}
@media (max-width: 700px) { .n7d-faq { grid-template-columns: 1fr; } }

/* Every device — dual frames */
.n7d-devices {
  display: grid;
  grid-template-columns: 1.35fr minmax(160px, 0.42fr);
  gap: clamp(18px, 3vw, 36px);
  align-items: end;
  margin-top: clamp(36px, 5vw, 56px);
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
}
.n7d-frame__stage {
  position: relative;
}
.n7d-frame__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  opacity: 0;
  transition: opacity .7s var(--navi-ease);
  pointer-events: none;
  z-index: 0;
}
.n7d-frame__slide.is-active {
  opacity: 1;
  z-index: 1;
  pointer-events: auto;
}
.n7d-frame__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
}
.n7d-frame--desk .n7d-win__body {
  aspect-ratio: 16 / 10;
}
.n7d-phone {
  width: min(100%, 220px);
  margin-left: auto;
  margin-right: 0;
  filter: drop-shadow(0 28px 48px rgba(0, 0, 0, .55));
}
.n7d-phone__bezel {
  border-radius: 28px;
  padding: 8px;
  background: linear-gradient(160deg, #2a2a48, #12122a 55%, #0c0c1c);
  border: 1px solid rgba(220, 230, 253, .2);
}
.n7d-phone__screen {
  border-radius: 22px;
  overflow: hidden;
  aspect-ratio: 9 / 19.5;
  background: #0a0a18;
}
.n7d-frame--phone {
  opacity: 0;
  transform: translateX(48px);
  transition: opacity .9s var(--navi-ease), transform .9s var(--navi-ease);
  will-change: transform, opacity;
}
.n7d-frame--phone.is-in {
  opacity: 1;
  transform: none;
}
@media (max-width: 860px) {
  .n7d-devices {
    grid-template-columns: 1fr;
    justify-items: center;
    max-width: 520px;
  }
  .n7d-phone {
    width: min(200px, 52vw);
    margin: 0 auto;
  }
  .n7d-frame--phone {
    transform: translateY(36px);
  }
  .n7d-frame--phone.is-in {
    transform: none;
  }
}

/* Everywhere grid (viewer) */
.n7d-grid4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 40px;
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: visible;
}
.n7d-grid4--3 {
  grid-template-columns: repeat(3, 1fr);
}
.n7d-grid4 article {
  background: transparent;
  padding: clamp(20px, 2.5vw, 28px);
  min-height: 160px;
  box-shadow: 1px 0 0 rgba(220, 230, 253, .12), 0 1px 0 rgba(220, 230, 253, .12);
}
.n7d-grid4 h3 {
  font-size: 17px;
  font-weight: 500;
  margin-top: 4px;
}
.n7d-grid4 p {
  margin-top: 8px;
  font-size: 13.5px;
  color: var(--navi-muted-dark);
  font-weight: 300;
  line-height: 1.45;
}
.n7d-sec--light .n7d-grid4 article {
  box-shadow: 1px 0 0 var(--navi-line), 0 1px 0 var(--navi-line);
}
.n7d-sec--light .n7d-grid4 p { color: var(--navi-muted); }
@media (max-width: 900px) {
  .n7d-grid4,
  .n7d-grid4--3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .n7d-grid4,
  .n7d-grid4--3 { grid-template-columns: 1fr; }
}

/* Deep pages are much taller — dark→light through FAQ, then soft return into CTA. */
.n7d-page .n7b-melt {
  background: linear-gradient(180deg,
    #101029 0%, #101029 52%, #111539 56%, #182252 60%, #243a78 64%,
    #34528f 67%, #4a6aa8 70%, #6a88c0 73%, #94b1d9 76%, #c5d4ea 79%,
    #e2eaf5 82%, #f5f7fb 85%, #fafafa 88%, #fafafa 92%,
    #cddcfa 94%, #2a4ab8 97%, #101029 100%);
}
.n7d-page .n7b-melt::before {
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 52%, rgba(0,0,0,.45) 68%, transparent 86%, transparent 92%, rgba(0,0,0,.35) 97%, #000 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 52%, rgba(0,0,0,.45) 68%, transparent 86%, transparent 92%, rgba(0,0,0,.35) 97%, #000 100%);
}
/* Closing CTA — pricing-style fade: deep FAQ color into the image */
.n7d-page .n7b-melt > .n7g-close {
  background: transparent;
}
.n7d-page:not(.n7d-page--viewer) .n7b-melt > .n7g-close .n7g-close__scrim {
  background:
    linear-gradient(180deg, #101029 0%, rgba(16,16,41,.82) 12%, rgba(16,16,41,.35) 42%, rgba(16,16,41,.88) 100%),
    radial-gradient(60% 70% at 50% 100%, rgba(99,159,255,.32), transparent 70%);
}
/* Viewer still soft-starts after the light FAQ band */
.n7d-page--viewer .n7b-melt > .n7g-close .n7g-close__scrim {
  background:
    linear-gradient(180deg, transparent 0%, rgba(16,16,41,.45) 6%, rgba(16,16,41,.82) 16%, rgba(16,16,41,.35) 42%, rgba(16,16,41,.88) 100%),
    radial-gradient(60% 70% at 50% 100%, rgba(99,159,255,.32), transparent 70%);
}
/* Inside the melt wrapper, let the painted gradient show through */
.n7d-page .n7b-melt .n7d-sec:not(.n7d-sec--light),
.n7d-page .n7b-melt .n7d-sec--light {
  background: transparent;
}
.n7d-page .n7b-melt > * { z-index: 1; }
.n7d-page--viewer .n7d-sec:not(.n7d-sec--light) { background: transparent; }

/* Admin dark FAQ — same surface as pricing; sit on the deep melt */
.n7d-page:not(.n7d-page--viewer) .n7b-melt > .n7g-faq {
  background: transparent;
}
.n7d-page:not(.n7d-page--viewer) .n6-melt-runway {
  min-height: clamp(48px, 6vh, 88px);
}

/* FAQ light mid-band (viewer) */
.n7g-faq--light {
  background: transparent;
  color: var(--navi-ink);
}
.n7g-faq--light h2 .g {
  background: var(--navi-gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.n7g-faq--light .n7g-q {
  border-color: var(--navi-line);
  background: rgba(255, 255, 255, .72);
}
.n7g-faq--light .n7g-q summary {
  color: var(--navi-ink);
}
.n7g-faq--light .n7g-q summary::after {
  color: var(--navi-blue);
}
.n7g-faq--light .n7g-q__body {
  color: var(--navi-muted);
}
.n7g-faq--light .n7g-q__body b {
  color: var(--navi-ink);
}
.n7g-faq--light .n7g-q__body a {
  color: var(--navi-blue);
}

.n7d-sec__lede {
  margin: 16px auto 0;
  max-width: 520px;
  color: var(--navi-muted);
  font-weight: 300;
}
.n7d-sec__center { text-align: center; }
.n7d-sec__center h2 { margin-left: auto; margin-right: auto; }
.n7d-copy-muted {
  color: var(--navi-muted-dark);
  font-weight: 300;
  max-width: 42ch;
  line-height: 1.45;
  margin-top: 18px;
}
.n7d-sec--light .n7d-copy-muted {
  color: var(--navi-muted);
}
.n7d-cta-row {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-top: 22px;
  flex-wrap: wrap;
}
.n7d-sec__lede--on-dark { color: var(--navi-muted-dark); }

/* Reserve title — keep both sentences on one wrap line */
.n7d-page--viewer #reserve-title {
  max-width: 28ch;
}

/* Admin / Viewer AI stack cards — same interactive mocks as homepage */
.n7e-actions--stack .n7e-action__panel--ai {
  display: flex;
  align-items: stretch;
  justify-content: center;
  background: transparent;
  box-shadow: none;
  padding: 0;
}
/* Viewer AI — drop the solid plate; chat sits on the stack tone */
.n7e-actions--stack .n7e-action__panel--ai-clear {
  aspect-ratio: auto;
  min-height: 0;
  overflow: visible;
}
.n7e-actions--stack .n7e-action__panel--ai-clear .n7i-ai__mock--admin-page,
.n7e-actions--stack .n7e-action__panel--ai-clear .n7i-ai__mock--viewer-page {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  height: auto;
  max-height: none;
  overflow: visible;
}
.n7e-actions--stack .n7e-action__panel--ai .n7i-ai__mock--admin-page,
.n7e-actions--stack .n7e-action__panel--ai .n7i-ai__mock--viewer-page {
  margin: 0;
  width: 100%;
  height: 100%;
  max-height: 100%;
  padding: clamp(12px, 1.6vw, 18px);
  font-size: clamp(11px, 1.15vw, 13.5px);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 28px 70px rgba(0, 0, 10, 0.55);
}
.n7e-actions--stack .n7e-action__panel--ai .n7i-ai__chips { gap: 5px; }
.n7e-actions--stack .n7e-action__panel--ai .n7i-ai__chip {
  font-size: clamp(10px, 1vw, 12px);
  padding: 5px 9px;
}
.n7e-actions--stack .n7e-action__panel--ai [data-admin-step="ask"],
.n7e-actions--stack .n7e-action__panel--ai [data-admin-step="typing"],
.n7e-actions--stack .n7e-action__panel--ai [data-admin-step="reply"],
.n7e-actions--stack .n7e-action__panel--ai [data-admin-step="insight"],
.n7e-actions--stack .n7e-action__panel--ai [data-ai-step="user"],
.n7e-actions--stack .n7e-action__panel--ai [data-ai-step="typing"],
.n7e-actions--stack .n7e-action__panel--ai [data-ai-step="ai"],
.n7e-actions--stack .n7e-action__panel--ai [data-ai-step="unit"],
.n7e-actions--stack .n7e-action__panel--ai [data-ai-step="unit2"],
.n7e-actions--stack .n7e-action__panel--ai [data-ai-step="chips"],
.n7e-actions--stack .n7e-action__panel--ai [data-ai-step="user2"],
.n7e-actions--stack .n7e-action__panel--ai [data-ai-step="typing2"],
.n7e-actions--stack .n7e-action__panel--ai [data-ai-step="ai2"],
.n7e-actions--stack .n7e-action__panel--ai [data-ai-step="tour"],
.n7e-actions--stack .n7e-action__panel--ai [data-ai-step="handoff"] {
  opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
  .n7e-actions--stack .n7e-action__panel--ai [data-admin-step],
  .n7e-actions--stack .n7e-action__panel--ai [data-ai-step] {
    opacity: 1 !important;
  }
  .n7e-actions--stack .n7e-action__panel--ai [data-admin-chip="close"],
  .n7e-actions--stack .n7e-action__panel--ai [data-ai-chip="inside"] {
    color: #fff;
    border-color: rgba(99, 159, 255, 0.7);
    background: rgba(99, 159, 255, 0.28);
  }
}

@media (prefers-reduced-motion: reduce) {
  .n7d-cal-slide { transition: none; }
  .n7d-frame--phone {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .n7d-frame__slide { transition: none; }
}