/* pricing.css */

html { scroll-behavior:smooth; }
.n7g-wrap { width:min(1240px,calc(100% - 2 * var(--navi-pad))); margin:0 auto; }
.n7g-reveal { opacity:0; transform:translateY(28px); transition:opacity .8s var(--navi-ease),transform .8s var(--navi-ease); }
.n7g-reveal.is-in { opacity:1; transform:none; }

/* Hero: full-bleed Darkroom crossfade (small → mid → large), then hard white break. */
.n7g-hero { position:relative; min-height:780px; display:grid; place-items:center; padding:150px var(--navi-pad) 100px; overflow:hidden; text-align:center; isolation:isolate; background:#0b0b20; }
.n7g-hero__bg { position:absolute; inset:0; z-index:0; background:#0b0b20; }
.n7g-hero__bg img {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center;
  opacity:0; transform:scale(1.06);
  transition:opacity .85s var(--navi-ease), transform 1.1s var(--navi-ease);
}
.n7g-hero__bg img:nth-child(2) { object-position:center 42%; }
.n7g-hero__bg img.is-active { opacity:1; transform:scale(1); }
.n7g-hero__scrim {
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(10,10,28,.88) 0%, rgba(10,10,28,.58) 28%, rgba(10,10,28,.72) 62%, rgba(8,8,22,.96) 100%),
    radial-gradient(70% 60% at 18% 88%, rgba(99,159,255,.22), transparent 66%),
    radial-gradient(55% 50% at 92% 8%, rgba(16,16,41,.55), transparent 70%);
}
.n7g-hero__in { position:relative; z-index:2; width:min(960px,100%); }
.n7g-hero h1 { margin-top:18px; color:#fafafa; font-family:var(--navi-font); font-size:clamp(46px,7.2vw,96px); font-weight:400; line-height:1.02; letter-spacing:-.02em; }
.n7g-hero h1 .g { background:linear-gradient(92deg,#dce6fd,#639fff); -webkit-background-clip:text; background-clip:text; color:transparent; }
.n7g-hero__sub { max-width:680px; margin:26px auto 0; color:rgba(220,230,253,.88); font-size:clamp(17px,1.6vw,20px); font-weight:300; }
.n7g-hero__proof { display:flex; justify-content:center; gap:10px 28px; flex-wrap:wrap; margin:26px auto 0; max-width:820px; color:rgba(220,230,253,.94); font-family:var(--navi-mono); font-size:10px; line-height:1.5; letter-spacing:.05em; text-transform:uppercase; }
.n7g-hero__actions { display:flex; justify-content:center; gap:12px; margin-top:34px; flex-wrap:wrap; }
.n7g-hero__actions .navi-btn--ghost { color:#fff; border-color:rgba(255,255,255,.36); }
.n7g-hero__proof span {
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.n7g-hero__proof span::before {
  content:"";
  width:11px;
  height:11px;
  flex:none;
  background:var(--navi-light-blue);
  -webkit-mask:url(../assets/navi-star-clean.svg) center/contain no-repeat;
  mask:url(../assets/navi-star-clean.svg) center/contain no-repeat;
}
@media (prefers-reduced-motion:reduce){
  .n7g-hero__bg img { transition:none; transform:none; }
  .n7g-hero__bg img.is-active { transform:none; }
}

/* N07G plan cards: compact — name, price, differentiators, caps, CTA. */
.n7g-plans { background:var(--navi-off-white); color:var(--navi-ink); padding:clamp(64px,8vw,100px) 0; }
.n7g-section-head { max-width:780px; margin:0 auto clamp(36px,5vw,56px); text-align:center; }
.n7g-section-head h2 { margin-top:14px; font-size:clamp(36px,5vw,64px); font-weight:400; }
.n7g-section-head h2 .g { background:linear-gradient(92deg,#dce6fd,#639fff); -webkit-background-clip:text; background-clip:text; color:transparent; }
.n7g-section-head p { max-width:520px; margin:16px auto 0; color:var(--navi-muted); font-size:16px; font-weight:300; }
.n7g-plan-list { width:100%; max-width:1100px; margin-inline:auto; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; align-items:stretch; padding-top:10px; }
.n7g-plan { position:relative; display:flex; flex-direction:column; min-width:0; height:100%; padding:26px 24px 22px; border:1px solid rgba(22,22,56,.11); border-radius:18px; background:#fff; box-shadow:0 28px 72px -58px rgba(22,22,56,.48); scroll-margin-top:110px; }
.n7g-plan--featured { z-index:1; transform:translateY(-8px); border-color:rgba(23,41,135,.42); background:linear-gradient(155deg,#f9fbff 0%,#e9f0ff 100%); box-shadow:0 36px 86px -48px rgba(23,41,135,.42); }
.n7g-plan__badge { position:absolute; left:50%; top:0; transform:translate(-50%,-50%); padding:6px 11px; border-radius:999px; background:var(--navi-blue); color:#fff; font:9px/1.2 var(--navi-mono); letter-spacing:.1em; text-transform:uppercase; white-space:nowrap; }
.n7g-plan__star {
  display:block; width:15px; height:15px; margin-bottom:10px; flex:none;
  background:var(--plan-accent, var(--navi-light-blue));
  -webkit-mask:url(../assets/navi-star-clean.svg) center/contain no-repeat;
  mask:url(../assets/navi-star-clean.svg) center/contain no-repeat;
}
.n7g-plan__name { font:700 10px/1.2 var(--navi-mono); letter-spacing:.16em; text-transform:uppercase; color:var(--plan-accent, #172987); }
.n7g-plan h3 { margin-top:10px; color:#161638; font-size:clamp(22px,2vw,28px); line-height:1.1; font-weight:500; }
.n7g-plan__pricing { margin-top:18px; }
.n7g-plan__price { color:#161638; font-size:clamp(34px,3vw,44px); line-height:1; font-weight:500; letter-spacing:-.04em; }
.n7g-plan__price small { font-size:13px; color:var(--navi-muted); font-weight:400; letter-spacing:0; }
.n7g-plan__annual { margin-top:6px; color:var(--navi-muted); font-size:13px; line-height:1.4; }
.n7g-plan__annual b { color:var(--navi-ink); }
.n7g-plan__features { display:grid; gap:8px; flex:1; margin:20px 0 0; padding:18px 0 0; border-top:1px solid var(--navi-line); list-style:none; color:#3f445c; font-size:13.5px; }
.n7g-plan__features li { display:grid; grid-template-columns:15px 1fr; gap:8px; align-items:start; line-height:1.4; }
.n7g-plan__features li::before { content:""; width:14px; height:14px; margin-top:2px; border-radius:50%; background:var(--plan-accent, #639fff);
  -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/11px 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/11px no-repeat; }
.n7g-plan__caps { margin-top:16px; padding:10px 12px; border-radius:10px; background:var(--plan-accent-soft, #dce6fd); color:#343a57; font:10.5px/1.45 var(--navi-mono); }
.n7g-plan__cta { width:100%; justify-content:center; margin-top:14px; }
#compas { --plan-accent:var(--navi-plan-compas); --plan-accent-soft:color-mix(in srgb, var(--navi-plan-compas) 16%, #fff); }
#voyager { --plan-accent:var(--navi-plan-voyager); --plan-accent-soft:color-mix(in srgb, var(--navi-plan-voyager) 14%, #fff); }
#polaris { --plan-accent:var(--navi-plan-polaris); --plan-accent-soft:color-mix(in srgb, var(--navi-plan-polaris) 16%, #fff); }
.n7g-plans__explore { width:max-content; margin:36px auto 0; display:flex; align-items:center; gap:8px; color:#172987; font-size:15px; font-weight:600; }
.n7g-plans__explore::after { content:""; width:28px; height:1px; background:#639fff; transition:width .3s var(--navi-ease); }
.n7g-plans__explore:hover::after { width:38px; }
@media (max-width:960px){
  .n7g-plan-list { grid-template-columns:1fr; max-width:420px; margin-inline:auto; gap:16px; padding-top:0; }
  .n7g-plan--featured { transform:none; }
}
@media (max-width:480px){
  .n7g-plan { padding:22px 20px 18px; }
}

/* Darkroom setup band: dark glass cards restore the dark → light → dark rhythm. */
.n7g-setup { position:relative; padding:clamp(90px,11vw,150px) 0; color:#fafafa; background:linear-gradient(160deg,#161638 0%,#1d2a6b 100%); overflow:hidden; }
.n7g-setup::after { content:""; position:absolute; inset:0; pointer-events:none; opacity:.12; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.n7g-setup__head { position:relative; z-index:1; max-width:780px; }
.n7g-setup .navi-eyebrow { color:#dce6fd; }
.n7g-setup__head h2 { margin-top:14px; color:#fafafa; font-size:clamp(36px,5vw,64px); font-weight:400; }
.n7g-setup__head h2 .g { background:linear-gradient(92deg,#dce6fd,#639fff); -webkit-background-clip:text; background-clip:text; color:transparent; }
.n7g-setup__head p { margin-top:20px; max-width:680px; color:rgba(220,230,253,.82); font-size:17px; font-weight:300; }
.n7g-setup__grid { position:relative; z-index:1; display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:clamp(42px,6vw,70px); }
.n7g-setup__card { padding:clamp(28px,4vw,46px); border:1px solid rgba(255,255,255,.14); border-radius:26px; background:rgba(255,255,255,.06); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); box-shadow:inset 0 1px rgba(255,255,255,.08); }
.n7g-setup__card h3 { color:#fff; font-size:22px; }
.n7g-setup__card ul { margin:22px 0 0; padding-left:20px; display:grid; gap:14px; color:rgba(220,230,253,.82); font-weight:300; }
.n7g-setup__card b { color:#fff; font-weight:500; }
.n7g-setup__examples {
  position: relative;
  z-index: 1;
  margin-top: clamp(48px, 7vw, 80px);
}
.n7g-setup__examples .navi-eyebrow { color: #dce6fd; margin-bottom: 18px; }
.n7g-setup__gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.n7g-setup__gallery figure { margin: 0; min-width: 0; }
.n7g-setup__gallery img {
  display: block;
  width: 100%;
  height: clamp(120px, 14vw, 160px);
  object-fit: cover;
  object-position: center;
  border-radius: 14px;
  background: rgba(0, 0, 0, .25);
}
.n7g-setup__gallery figcaption {
  margin-top: 10px;
  font-family: var(--navi-mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(220, 230, 253, .72);
}
@media (max-width:900px){
  .n7g-setup__gallery { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width:760px){
  .n7g-setup__grid{grid-template-columns:1fr;}
}
@media (max-width:520px){
  .n7g-setup__gallery {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    margin-inline: calc(-1 * var(--navi-pad));
    padding-inline: var(--navi-pad);
  }
  .n7g-setup__gallery figure {
    flex: 0 0 min(72vw, 280px);
    scroll-snap-align: start;
  }
}

/* N07G comparison: three stacked category tables (buyer / team / caps). */
.n7g-compare { background:#f2f5fc; color:var(--navi-ink); padding:clamp(90px,11vw,145px) 0; scroll-margin-top:80px; }
.n7g-compare__intro { margin-bottom:clamp(42px,6vw,68px); }
.n7g-compare-stack { display:grid; gap:clamp(36px,5vw,56px); }
.n7g-mobile-plans { display:none; gap:5px; padding:4px; border-radius:999px; background:#e8ecf6; }
.n7g-mobile-plans button { cursor:pointer; font-family:var(--navi-font); flex:1; padding:9px 7px; border:0; border-radius:999px; color:var(--navi-muted); background:transparent; font-size:12px; }
.n7g-mobile-plans button[aria-pressed="true"] { color:#fff; background:var(--navi-blue); }
.n7g-compare-block__head {
  display:flex; align-items:baseline; justify-content:space-between; gap:16px 24px;
  flex-wrap:wrap; margin:0 0 16px;
}
.n7g-compare-block h3 { margin:0; color:#161638; font-size:clamp(20px,2.2vw,26px); font-weight:500; letter-spacing:-.01em; }
.n7g-compare-block > h3 { margin:0 0 16px; }
.n7g-compare-block__link {
  flex:none; color:var(--navi-blue); font-size:14px; font-weight:500;
  text-decoration:none; white-space:nowrap;
  border-bottom:1px solid transparent; transition:border-color .16s;
}
.n7g-compare-block__link:hover { border-bottom-color:rgba(99,159,255,.45); }
.n7g-table thead th a { color:inherit; text-decoration:none; border-bottom:1px solid transparent; font-weight:600; transition:color .16s, border-color .16s; }
.n7g-table thead th a:hover { color:var(--navi-blue); border-bottom-color:rgba(99,159,255,.45); }
.n7g-table-scroll {
  width:100%; max-width:100%;
  border:1px solid var(--navi-line); border-radius:20px; background:#fff;
  box-shadow:0 24px 60px -48px rgba(22,22,56,.4);
}
.n7g-table { width:100%; min-width:0; border-collapse:separate; border-spacing:0; table-layout:fixed; }
.n7g-table col:first-child { width:34%; }
.n7g-table th,.n7g-table td { padding:14px 20px; border-bottom:1px solid var(--navi-line); text-align:left; font-size:14px; }
.n7g-table thead th {
  position:sticky; top:86px; z-index:6;
  padding:13px 20px; color:#161638; font-size:13px; font-weight:600;
  background:#f7f8fc; border-bottom:1px solid var(--navi-line);
  box-shadow:0 1px 0 var(--navi-line);
}
.n7g-table thead th:first-child { z-index:7; border-radius:20px 0 0 0; }
.n7g-table thead th:last-child { border-radius:0 20px 0 0; }
.n7g-table thead th:not(:first-child) { text-align:center; }
.n7g-table tbody tr:last-child td { border-bottom:0; }
.n7g-table tbody tr:last-child td:first-child { border-radius:0 0 0 20px; }
.n7g-table tbody tr:last-child td:last-child { border-radius:0 0 20px 0; }
.n7g-table td:not(:first-child) { text-align:center; color:#4e536a; }
.n7g-table td[data-plan-col="voyager"] { background:rgba(99,159,255,.07); }
.n7g-table thead th:nth-child(3) { background:rgba(99,159,255,.12); }
.n7g-yes { color:var(--navi-blue); font-weight:600; }
.n7g-no { color:#adb1c0; }
@media (max-width:760px){
  /* Clear the fixed glass nav (~78–88px) so the plan strip doesn't sit under Get a walkthrough */
  .n7g-mobile-plans {
    display:flex; position:sticky; top:88px; z-index:12;
    margin:0 0 10px; padding:4px;
    background:#e8ecf6;
    box-shadow:0 0 0 12px #e8ecf6;
  }
  /* One plan col on phone — no horizontal scroll, so sticky thead isn't trapped in a scrollport */
  .n7g-table-scroll { overflow:visible; }
  .n7g-compare-stack[data-mobile-plan="compas"] [data-plan-col]:not([data-plan-col="compas"]),
  .n7g-compare-stack[data-mobile-plan="voyager"] [data-plan-col]:not([data-plan-col="voyager"]),
  .n7g-compare-stack[data-mobile-plan="polaris"] [data-plan-col]:not([data-plan-col="polaris"]) { display:none; }
  .n7g-compare-stack[data-mobile-plan="compas"] thead th:not(:first-child):not(:nth-child(2)),
  .n7g-compare-stack[data-mobile-plan="voyager"] thead th:not(:first-child):not(:nth-child(3)),
  .n7g-compare-stack[data-mobile-plan="polaris"] thead th:not(:first-child):not(:nth-child(4)) { display:none; }
  .n7g-table { table-layout:fixed; }
  .n7g-table colgroup { display:none; }
  .n7g-table th,.n7g-table td { padding:12px 11px; font-size:12.5px; overflow-wrap:anywhere; }
  .n7g-table thead th {
    position:static;
    top:auto;
    box-shadow:none;
  }
  .n7g-table th:first-child,
  .n7g-table td:first-child { position:static; left:auto; z-index:auto; width:62%; background:#fff; }
  .n7g-table thead th:first-child { z-index:auto; background:#f7f8fc; }
  .n7g-table td[data-plan-col],
  .n7g-table thead th:not(:first-child) { width:38%; }
}

@media (prefers-reduced-motion:reduce){ .n7g-reveal{opacity:1!important;transform:none!important;} }