/* NorthNeuron visual upgrade (local preview). Additive only: every rule is scoped under
   html.nnx, so turning the class off returns the original site exactly. */

@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

/* ---- 1. Headlines blur in, word by word ---- */
.nnx .nnx-w{display:inline-block;opacity:0;filter:blur(12px);transform:translateY(.28em);
  transition:opacity .8s var(--ease),filter .8s var(--ease),transform .8s var(--ease);
  transition-delay:calc(var(--i) * 65ms)}
.nnx .nnx-go .nnx-w{opacity:1;filter:none;transform:none}
.nnx .grad-text .nnx-w{background:linear-gradient(96deg,#6E9BFF 0%,#8FE3D6 45%,#31D0BC 100%);
  background-size:var(--gw,400%) 100%;background-position:var(--gx,0) 0;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}

/* Section reveals: add a soft blur to the existing rise */
.nnx [data-reveal]{filter:blur(6px);transition:opacity .8s var(--ease),transform .8s var(--ease),filter .8s var(--ease)}
.nnx [data-reveal].revealed{filter:none}

/* ---- 2. Film band: people first ---- */
.nnx-films{position:relative;overflow:hidden;background:var(--navy);color:var(--on-navy);
  margin:28px auto 0;max-width:calc(var(--wrap) + 72px);border-radius:28px;padding:64px 36px 70px;isolation:isolate}
.nnx-films::before{content:"";position:absolute;inset:-30%;z-index:-1;filter:blur(20px);
  background:radial-gradient(38% 34% at 22% 30%,rgba(110,155,255,.35),transparent 70%),
             radial-gradient(40% 36% at 78% 70%,rgba(49,208,188,.32),transparent 70%);
  animation:nnxDrift 24s ease-in-out infinite alternate}
@keyframes nnxDrift{0%{transform:translate(0,0) rotate(0)}50%{transform:translate(4%,-3%) rotate(5deg)}100%{transform:translate(-3%,4%) rotate(-4deg)}}
.nnx-films-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;max-width:980px;margin:0 auto}
.nnx-film{display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:center}
.nnx-film:nth-child(2){grid-template-columns:1fr auto}
.nnx-film:nth-child(2) .nnx-phone{order:2;transform:translateY(36px)}
.nnx-phone{width:200px;aspect-ratio:9/19;border-radius:30px;padding:7px;background:#07142F;
  box-shadow:0 40px 80px -30px rgba(0,0,0,.9),inset 0 0 0 1px rgba(255,255,255,.14)}
.nnx-phone video{width:100%;height:100%;object-fit:cover;border-radius:24px;display:block;background:#000}
.nnx-film .k{font-family:var(--ff-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.nnx-film .q{font-family:var(--ff-sora);font-size:clamp(22px,2.4vw,30px);line-height:1.15;letter-spacing:-.02em;margin-top:10px;color:#fff}
.nnx-film .a{margin-top:14px;font-size:15px;color:var(--on-navy-body)}
.nnx-film .a a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.nnx-disclose{text-align:center;margin-top:52px;font-size:12.5px;color:var(--on-navy-muted)}
@media (max-width:820px){
  .nnx-films{border-radius:22px;margin:20px 12px 0;padding:44px 18px 48px}
  .nnx-films-grid{grid-template-columns:1fr;gap:40px}
  .nnx-film,.nnx-film:nth-child(2){grid-template-columns:auto 1fr;gap:18px}
  .nnx-film:nth-child(2) .nnx-phone{order:0;transform:none}
  .nnx-phone{width:138px;border-radius:22px;padding:5px}
  .nnx-phone video{border-radius:18px}
}

/* ---- 3. Hero split stage: live trace + private side ---- */
.nnx .doc-row{display:flex;justify-content:space-between;gap:8px;font-family:var(--ff-mono);font-size:11px;
  color:rgba(234,241,251,.62);padding:7px 8px;margin:0 -5px;border-radius:2px;border-left:2px solid transparent;
  cursor:pointer;transition:background .3s ease,color .3s ease,border-color .3s ease}
.nnx .doc-row:hover{background:rgba(110,155,255,.12)}
.nnx .doc-row.on{background:rgba(110,155,255,.24);border-left-color:var(--light-blue);color:#C6D8FF}
.nnx .doc-row:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.nnx .plain-q,.nnx .plain-trace{transition:opacity .25s ease,filter .25s ease}
.nnx .nnx-swap .plain-q,.nnx .nnx-swap .plain-trace{opacity:0;filter:blur(4px)}
.nnx .nnx-tryhint{font-family:var(--ff-mono);font-size:10px;letter-spacing:.1em;color:var(--on-navy-muted);margin-top:4px}
.nnx .teen-note:not(.teen-note--hl) .v{filter:blur(4.5px);transition:filter .6s ease;user-select:none}
.nnx .teen-note:not(.teen-note--hl):hover .v{filter:blur(2px)}
.nnx .teen-note:not(.teen-note--hl) .k::after{content:"  · PRIVATE";color:var(--teal-bright)}

/* ---- 4. Product media: depth on scroll ---- */
.nnx .pf-shot,.nnx .pf-teen-row img{will-change:transform;transition:transform .2s linear}
.nnx .pf-teen-row img:nth-child(1){animation:nnDrift 7s ease-in-out infinite}
.nnx .pf-teen-row img:nth-child(3){animation:nnDrift 8s 1.2s ease-in-out infinite}

/* ---- 5. Spotlight on cards and points (pointer devices only) ---- */
@media (hover:hover){
  .nnx .nnx-spot{position:relative;isolation:isolate}
  .nnx .nnx-spot::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
    background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(49,208,188,.16),transparent 65%);
    opacity:0;transition:opacity .3s ease}
  .nnx .nnx-spot:hover::after{opacity:1}
}
.nnx .btn{transition:transform .15s ease,box-shadow .25s ease,background-color .25s ease}
.nnx .btn:active{transform:scale(.97)}
.nnx .btn--teal:hover{box-shadow:0 10px 30px -8px rgba(49,208,188,.55)}

/* ---- 6. Product page heroes: film in the phone ---- */
.nnx .phone video{width:100%;height:100%;object-fit:cover;display:block}
.nnx .nnx-film-cap{display:block;text-align:center;margin-top:10px;font-size:11.5px;color:var(--on-navy-muted)}
.nnx .preview-frame video{width:100%;height:100%;object-fit:cover;display:block}

/* ---- 7. Try-it demos on product pages ---- */
.nnx-demo{margin-top:56px;background:var(--navy);color:var(--on-navy);border-radius:22px;padding:40px 36px;position:relative;overflow:hidden;isolation:isolate}
.nnx-demo.teal{background:linear-gradient(150deg,#0B5F58,#06403C)}
.nnx-demo::before{content:"";position:absolute;inset:-30%;z-index:-1;filter:blur(20px);
  background:radial-gradient(40% 35% at 80% 20%,rgba(110,155,255,.28),transparent 70%),radial-gradient(35% 30% at 15% 85%,rgba(49,208,188,.25),transparent 70%);
  animation:nnxDrift 26s ease-in-out infinite alternate}
.nnx-demo .k{font-family:var(--ff-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--on-navy-label)}
.nnx-demo h3{font-family:var(--ff-sora);font-weight:400;font-size:clamp(24px,2.6vw,32px);letter-spacing:-.02em;margin:10px 0 24px;color:#fff}
.nnx-trace{display:grid;grid-template-columns:1.1fr 1fr;gap:28px;align-items:center}
.nnx-doc{background:#F4F6FA;color:#1B2433;border-radius:14px;padding:18px;font-family:var(--ff-mono);font-size:12.5px;box-shadow:0 24px 50px -20px rgba(0,0,0,.6);min-width:0}
.nnx-doc .dh{display:flex;justify-content:space-between;color:#5B6576;font-size:10.5px;margin-bottom:10px;gap:8px}
.nnx-doc table{width:100%;border-collapse:collapse;color:inherit;font:inherit}
.nnx-doc th{text-align:left;font-weight:500;color:#5B6576;font-size:10.5px;padding:6px;border-bottom:1px solid #DCE2EC}
.nnx-doc td{padding:9px 6px;border-bottom:1px dashed #E2E7EF}
.nnx-doc tr.l{cursor:pointer;transition:background .25s ease}
.nnx-doc tr.l:hover{background:#E9EFFC}
.nnx-doc tr.l.on{background:#D7E3FF;box-shadow:inset 3px 0 0 #1E4FB8}
.nnx-doc tr.l:focus-visible{outline:2px solid #1E4FB8;outline-offset:-2px}
.nnx-doc .f{font-weight:600;color:#A15C07}
.nnx-ex{background:var(--paper);color:var(--ink);border-radius:14px;padding:22px;box-shadow:0 24px 50px -20px rgba(0,0,0,.6);transition:opacity .25s ease,transform .25s ease;min-width:0}
.nnx-ex.swap{opacity:0;transform:translateY(6px)}
.nnx-ex .lbl{font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.1em;color:var(--clarity-blue)}
.nnx-ex .q{font-family:var(--ff-sora);font-size:19px;line-height:1.32;margin:10px 0 12px}
.nnx-ex .s{font-size:13px;color:var(--muted)}
.nnx-demo .hint{color:var(--on-navy-body);font-size:13.5px;margin-top:14px}
.nnx-sides{display:grid;grid-template-columns:1fr auto 1fr;gap:22px;align-items:center}
.nnx-side{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:20px;min-height:200px;min-width:0}
.nnx-side .j{margin-top:12px;font-size:15.5px;line-height:1.55;color:#fff;transition:filter .9s ease,opacity .9s ease}
.nnx-sides.parent .j{filter:blur(7px);opacity:.35}
.nnx-side .lock{font-size:12.5px;color:var(--on-teal);opacity:.8;margin-top:12px}
.nnx-side .th{opacity:0;transform:translateY(12px);transition:opacity .7s ease .45s,transform .7s ease .45s}
.nnx-sides.parent .th{opacity:1;transform:none}
.nnx-chip{display:inline-block;background:var(--teal-bright);color:var(--deep-teal);font-weight:600;border-radius:999px;padding:4px 12px;font-size:13px;margin-top:12px}
.nnx-op{margin-top:12px;font-family:var(--ff-sora);font-size:17px;color:#fff}
.nnx-tg{font:600 14px var(--ff-body);background:var(--teal-bright);color:var(--deep-teal);border:0;border-radius:999px;padding:12px 18px;cursor:pointer;white-space:nowrap}
@media (max-width:820px){
  .nnx-demo{padding:30px 18px}
  .nnx-trace,.nnx-sides{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  .nnx .nnx-w{opacity:1;filter:none;transform:none;transition:none}
  .nnx [data-reveal]{filter:none}
  .nnx-films::before,.nnx-demo::before,.nnx .pf-teen-row img{animation:none}
  .nnx .pf-shot,.nnx .pf-teen-row img{transform:none !important}
}

/* ---- 8. Privacy promise band (both products) ---- */
.nnx-promise{max-width:calc(var(--wrap) + 72px);margin:28px auto 0;border-radius:28px;padding:64px 44px;position:relative;overflow:hidden;isolation:isolate;
  background:linear-gradient(160deg,#0E1A1A,#06403C);color:#EAF6F3}
.nnx-promise.blue{background:linear-gradient(160deg,#0A1F52,#13306E)}
.nnx-promise::before{content:"";position:absolute;inset:-30%;z-index:-1;filter:blur(24px);
  background:radial-gradient(36% 32% at 85% 15%,rgba(49,208,188,.28),transparent 70%),radial-gradient(34% 30% at 10% 90%,rgba(110,155,255,.22),transparent 70%);
  animation:nnxDrift 28s ease-in-out infinite alternate}
.nnx-promise .k{font-family:var(--ff-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#31D0BC}
.nnx-promise h2{font-family:var(--ff-sora);font-weight:400;font-size:clamp(34px,4.6vw,58px);line-height:1.04;letter-spacing:-.035em;margin:14px 0 0;max-width:16ch;color:#fff}
.nnx-promise .lede{margin-top:18px;max-width:54ch;font-size:17px;color:rgba(234,246,243,.78)}
.nnx-promise-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:40px}
.nnx-p{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:20px 20px 22px;min-width:0;
  opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease),transform .6s var(--ease),background .3s ease}
.nnx-promise.in .nnx-p{opacity:1;transform:none}
.nnx-promise.in .nnx-p:nth-child(2){transition-delay:.08s}.nnx-promise.in .nnx-p:nth-child(3){transition-delay:.16s}
.nnx-promise.in .nnx-p:nth-child(4){transition-delay:.24s}.nnx-promise.in .nnx-p:nth-child(5){transition-delay:.32s}.nnx-promise.in .nnx-p:nth-child(6){transition-delay:.40s}
.nnx-p:hover{background:rgba(255,255,255,.1)}
.nnx-p svg{width:26px;height:26px;stroke:#31D0BC;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.nnx-p b{display:block;font-family:var(--ff-sora);font-weight:500;font-size:18px;line-height:1.25;letter-spacing:-.01em;margin-top:12px;color:#fff}
.nnx-p span{display:block;margin-top:6px;font-size:14px;color:rgba(234,246,243,.7)}
.nnx-promise .foot{margin-top:28px;font-size:13px;color:rgba(234,246,243,.6)}
.nnx-promise .foot a{color:inherit;text-decoration:underline;text-underline-offset:3px}
@media (max-width:860px){.nnx-promise{margin:20px 12px 0;padding:44px 20px;border-radius:22px}.nnx-promise-grid{grid-template-columns:1fr}}

/* ---- 9. Clarity pricing ---- */
.nnx-price{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:28px}
.nnx-plan{border-radius:18px;padding:28px 26px;border:1px solid var(--hairline);background:#fff;min-width:0}
.nnx-plan.fam{background:linear-gradient(150deg,#1E4FB8,#0A1F52);color:#EAF1FB;border-color:transparent;box-shadow:0 30px 60px -36px rgba(10,31,82,.9)}
.nnx-plan .n{font-family:var(--ff-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--clarity-blue)}
.nnx-plan.fam .n{color:#A9C4F5}
.nnx-plan .p{font-family:var(--ff-sora);font-size:44px;letter-spacing:-.03em;line-height:1;margin-top:14px;color:var(--ink)}
.nnx-plan.fam .p{color:#fff}
.nnx-plan .p small{font-size:16px;letter-spacing:0;color:var(--muted);margin-left:6px}
.nnx-plan.fam .p small{color:#B7C1DA}
.nnx-plan ul{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:9px;font-size:15px}
.nnx-plan li{display:flex;gap:10px}
.nnx-plan li::before{content:"✓";color:var(--teal);font-weight:700}
.nnx-plan.fam li::before{color:#31D0BC}
.nnx-plan .t{margin-top:16px;font-size:13px;color:var(--muted)}
.nnx-plan.fam .t{color:#B7C1DA}
.nnx-free-chip{display:inline-block;margin-left:10px;vertical-align:middle;font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.1em;
  background:#31D0BC;color:#06231F;border-radius:999px;padding:3px 10px}
@media (max-width:820px){.nnx-price{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.nnx-promise::before{animation:none}.nnx-p{opacity:1;transform:none;transition:none}}

/* ---- Hero glow: anchored, not offset by a share of the hero's height ----
   `.aurora{inset:-20%}` moves the glow whenever the hero grows (a web font arriving, a film
   tile), and Lighthouse counted that as layout shift (0.34 on MyTeenCare). Anchored at the
   corner and scaled to the same 140%, it covers the same area and never moves. Only the hero
   glows: bands, CTAs and .pf-media set their own inset, and the scale would enlarge those.
   Unscoped by html.nnx on purpose: applied only once that class is set, the change itself
   would be a shift. */
.hero > .aurora{inset:0;scale:1.4}