/* ==========================================================================
   NorthNeuron — northneuron.com
   Design system v2. Hand-authored static recreation of the v2 design handoff.
   Self-hosted fonts; no third-party requests.
   ========================================================================== */

/* ---- Self-hosted fonts (Sora, Instrument Sans, JetBrains Mono; latin + latin-ext) ---- */
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/instrumentsans-400-latinext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/instrumentsans-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/instrumentsans-500-latinext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/instrumentsans-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/instrumentsans-600-latinext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/instrumentsans-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/jetbrainsmono-400-latinext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/jetbrainsmono-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/jetbrainsmono-500-latinext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/jetbrainsmono-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Sora';font-style:normal;font-weight:300;font-display:swap;src:url(/fonts/sora-300-latinext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Sora';font-style:normal;font-weight:300;font-display:swap;src:url(/fonts/sora-300-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Sora';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/sora-400-latinext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Sora';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/sora-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Sora';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/sora-500-latinext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Sora';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/sora-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Sora';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/sora-600-latinext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Sora';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/sora-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Sora';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/sora-700-latinext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Sora';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/sora-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* ---- Tokens ---- */
:root{
  --navy:#0A1F52;
  --navy-2:#0E1A1A;
  --deep-teal:#06403C;
  --ink:#0E1A1A;
  --body:#2C3634;
  --muted:#4A5654;
  --faint:#5A6664;
  --clarity-blue:#1E4FB8;
  --light-blue:#6E9BFF;
  --teal:#0F766E;
  --teal-bright:#31D0BC;
  --teal-mid:#14A89B;
  --gold:#FFD68A;
  --paper:#FBF9F6;
  --card:#FFFFFF;
  --hairline:#E6E1D8;
  --hairline-soft:#EDE9E0;
  --clarity-tile:#EEF3FC;
  --clarity-tile-border:#DDE6F7;
  /* text on dark surfaces */
  --on-navy:#EAF1FB;
  --on-navy-body:#B7C1DA;
  --on-navy-muted:#8FA3D4;
  --on-navy-label:#A9C4F5;
  --on-navy-soft:#A8BBDD;
  --on-teal:#EAF6F3;
  --on-teal-muted:#A9C7C2;
  --teal-accent:#8FE3D6;
  --footer-text:#C8D3E8;
  --footer-muted:#9BAAD0;
  --footer-link:#8FB6FF;
  --ff-sora:'Sora','Avenir Next','Segoe UI',sans-serif;
  --ff-body:'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ff-mono:'JetBrains Mono','SFMono-Regular',ui-monospace,monospace;
  --wrap:1300px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --shadow-card:0 22px 44px -30px rgba(10,31,82,.55);
  --shadow-dark:0 34px 78px -34px rgba(0,0,0,.95);
}

/* ---- Reset / base ---- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--ff-body);
  font-size:16.5px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:var(--teal);text-decoration:none}
a:hover{color:var(--teal-mid)}
h1,h2,h3,h4,p{margin:0}
::selection{background:var(--teal);color:#fff}
:focus-visible{outline:2px solid var(--clarity-blue);outline-offset:3px;border-radius:6px}
.surface-navy :focus-visible,.surface-teal :focus-visible,.hero--navy :focus-visible,.hero--teal :focus-visible,.footer :focus-visible,.cta-band :focus-visible{outline-color:var(--light-blue)}

/* ---- Keyframes ---- */
@keyframes nnAurora{0%{transform:translate3d(-6%,-3%,0) scale(1.1)}50%{transform:translate3d(6%,4%,0) scale(1.25)}100%{transform:translate3d(-6%,-3%,0) scale(1.1)}}
@keyframes nnPulse{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}
@keyframes nnDrift{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-10px,0)}}
@keyframes nnDash{to{stroke-dashoffset:-400}}
@keyframes nnMarquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@keyframes nnRise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
@keyframes nnFlow{to{stroke-dashoffset:-28}}
@keyframes nnPop{from{opacity:0;transform:translate(-50%,-50%) scale(.86)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}

/* ==========================================================================
   Layout primitives
   ========================================================================== */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 36px}
.section{max-width:var(--wrap);margin:0 auto;padding:76px 36px 0}
.section--tight{padding-top:64px}
.section--pad-b{padding-bottom:90px}
.stack{display:flex;flex-direction:column}

/* ---- Typographic utilities ---- */
.mono{font-family:var(--ff-mono)}
.eyebrow{
  font-family:var(--ff-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--clarity-blue);margin:0;
}
.eyebrow--teal{color:var(--teal)}
.eyebrow--rule{display:flex;align-items:baseline;gap:18px}
.eyebrow--rule::after{content:"";flex:1;height:1px;background:var(--hairline)}
.eyebrow--rule.on-dark::after{background:rgba(255,255,255,.2)}
.eyebrow--onnavy{color:var(--on-navy-label)}
.eyebrow--onteal{color:var(--teal-accent)}

.display{font-family:var(--ff-sora);font-weight:400;letter-spacing:-.042em;line-height:1.0;text-wrap:balance}
h1.display{font-size:clamp(38px,5.2vw,70px)}
.display--xl{font-size:clamp(46px,7vw,98px);line-height:.98;letter-spacing:-.045em}
h2.h2{font-family:var(--ff-sora);font-weight:400;font-size:clamp(32px,4.2vw,52px);line-height:1.06;letter-spacing:-.038em;text-wrap:balance}
h2.h2--sm{font-size:clamp(28px,3.6vw,44px)}
h3.h3{font-family:var(--ff-sora);font-weight:600;letter-spacing:-.025em}
.lead{font-size:18px;line-height:1.6;color:var(--muted);text-wrap:pretty}
.lead--lg{font-size:19px}
.prose{font-size:17.5px;line-height:1.62;color:var(--muted);text-wrap:pretty}
.muted{color:var(--muted)}
.grad-text{background:linear-gradient(96deg,#6E9BFF 0%,#8FE3D6 45%,#31D0BC 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}

/* on-dark text helpers */
.t-onnavy{color:var(--on-navy)}
.t-onnavy-body{color:var(--on-navy-body)}
.t-onteal-muted{color:var(--on-teal-muted)}
.section-heading{display:flex;flex-direction:column;gap:0}
.section-heading h2{margin-top:20px}
.section-heading .lead{margin-top:20px}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--ff-body);font-weight:600;font-size:15px;line-height:1;
  padding:15px 27px;border-radius:100px;border:1px solid transparent;
  white-space:nowrap;cursor:pointer;transition:transform .25s var(--ease),box-shadow .25s,background .25s,border-color .25s,color .25s;
}
.btn--sm{padding:13px 22px;font-size:14px}
.btn--teal{background:var(--teal-bright);color:#062C2E;font-weight:700;box-shadow:0 12px 30px -14px rgba(49,208,188,.9)}
.btn--teal:hover{transform:translateY(-3px);box-shadow:0 20px 40px -16px rgba(49,208,188,1);color:#062C2E}
.btn--teal-solid{background:var(--teal);color:#fff;box-shadow:0 8px 20px -10px rgba(15,118,110,.9)}
.btn--teal-solid:hover{transform:translateY(-2px);box-shadow:0 14px 28px -12px rgba(15,118,110,1);color:#fff}
.btn--clarity{background:var(--clarity-blue);color:#fff}
.btn--clarity:hover{transform:translateY(-2px);box-shadow:0 14px 28px -14px rgba(30,79,184,1);color:#fff}
.btn--blue{background:var(--light-blue);color:var(--navy);font-weight:700}
.btn--blue:hover{transform:translateY(-3px);color:var(--navy)}
.btn--teenbright{background:var(--teal-bright);color:var(--deep-teal);font-weight:700}
.btn--teenbright:hover{transform:translateY(-3px);color:var(--deep-teal)}
.btn--ghost-dark{border-color:rgba(234,246,243,.3);color:var(--on-teal);background:transparent}
.btn--ghost-dark:hover{background:rgba(234,246,243,.1);color:var(--on-teal)}
.btn--ghost-light{border-color:#D8D3C9;color:var(--ink);background:transparent}
.btn--ghost-light:hover{border-color:var(--clarity-blue);color:var(--ink)}
.btn--ghost-light.teal:hover{border-color:var(--teal)}
.action-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:8px}
.action-row--hero{margin-top:28px}

/* ==========================================================================
   Header / nav
   ========================================================================== */
.nav-outer{position:sticky;top:0;z-index:90}
.nav-shell{
  height:78px;background:rgba(251,249,246,.86);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(230,225,216,0);box-shadow:none;
  transition:height .3s var(--ease),border-color .3s,box-shadow .3s;
}
.nav-outer.scrolled .nav-shell{height:62px;border-bottom-color:var(--hairline);box-shadow:0 10px 30px -24px rgba(14,26,26,.7)}
.nav-inner{max-width:var(--wrap);margin:0 auto;padding:0 36px;display:flex;align-items:center;justify-content:space-between;height:100%;gap:16px}
.nav-logo{display:flex;align-items:center;flex:none}
.nav-logo img{height:26px;width:auto;transition:height .3s var(--ease)}
.nav-outer.scrolled .nav-logo img{height:22px}
.nav-links{display:flex;align-items:center;gap:6px;font-size:14.5px}
.nav-link{
  position:relative;padding:9px 15px;border-radius:100px;cursor:pointer;
  display:flex;align-items:center;gap:5px;font-weight:500;color:#3E4A48;background:transparent;
  transition:background .22s,color .22s;
}
.nav-link:hover{color:var(--teal)}
.nav-link.active{background:rgba(15,118,110,.11);color:var(--teal)}
.nav-caret{font-size:9px;transition:transform .25s;display:inline-block}
.nav-has-dropdown:hover .nav-caret,.nav-has-dropdown.open .nav-caret{transform:rotate(180deg)}
.nav-actions{display:flex;gap:10px;align-items:center;flex:none}

/* products dropdown (desktop hover) */
.nav-has-dropdown{position:relative}
.mega{
  position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(8px);
  width:min(760px,90vw);background:#fff;border:1px solid var(--hairline);border-radius:16px;
  box-shadow:0 26px 50px -34px rgba(14,26,26,.5);padding:16px;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:10px;
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s,transform .25s,visibility .25s;z-index:80;
}
/* invisible bridge across the 10px gap so hover doesn't drop between the link and the panel */
.mega::before{content:"";position:absolute;left:0;right:0;top:-14px;height:16px}
.nav-has-dropdown:hover .mega,.mega:hover,.nav-has-dropdown:focus-within .mega,.nav-has-dropdown.open .mega{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.mega-item{display:flex;gap:14px;padding:14px;border-radius:10px;border:1px solid transparent;transition:background .2s,border-color .2s}
.mega-item:hover{background:#F4F8F7;border-color:#DCE8E6}
.mega-ico{width:50px;height:50px;object-fit:cover;border-radius:12px;padding:0;border:1px solid var(--clarity-tile-border);background:#fff;flex:none}
.mega-ico--teen{object-fit:cover;padding:0;border:0;background:transparent}
.mega-name{display:flex;align-items:center;gap:8px}
.mega-name b{font-weight:600;font-size:15.5px;color:var(--ink)}
.mega-tag{font-family:var(--ff-mono);font-size:9px;letter-spacing:.12em;padding:2px 6px;border-radius:100px}
.mega-tag--blue{color:var(--clarity-blue);border:1px solid rgba(30,79,184,.35)}
.mega-tag--teal{color:var(--teal);border:1px solid rgba(15,118,110,.35)}
.mega-desc{font-size:13.5px;color:var(--faint);margin-top:5px;line-height:1.45}
.mega-endorse{font-family:var(--ff-body);font-size:11px;line-height:1;color:var(--faint);margin-top:3px}
.mega-endorse > span{color:var(--clarity-blue);font-weight:600}

/* mobile nav */
.nav-toggle{display:none;flex:none;width:44px;height:44px;border:1px solid var(--hairline);border-radius:12px;background:#fff;cursor:pointer;align-items:center;justify-content:center}
.nav-toggle span{display:block;width:20px;height:2px;background:var(--ink);position:relative}
.nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;left:0;width:20px;height:2px;background:var(--ink);transition:transform .25s}
.nav-toggle span::before{top:-6px}.nav-toggle span::after{top:6px}
.nav-open .nav-toggle span{background:transparent}
.nav-open .nav-toggle span::before{transform:translateY(6px) rotate(45deg)}
.nav-open .nav-toggle span::after{transform:translateY(-6px) rotate(-45deg)}
.nav-mobile{display:none}

/* ==========================================================================
   Hero surfaces + ambient
   ========================================================================== */
.hero{position:relative;overflow:hidden}
.hero--navy{background:var(--navy);color:var(--on-navy);border-radius:0 0 28px 28px}
.hero--teal{background:var(--deep-teal);color:var(--on-teal);border-radius:0 0 28px 28px}
.hero--flat{border-radius:0}
.hero-inner{position:relative;max-width:var(--wrap);margin:0 auto;padding:96px 36px 104px}
.hero-inner--md{padding:76px 36px 72px}
.hero-inner--sm{padding:52px 36px 46px}
.hero-split{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(350px,100%),1fr));gap:56px;align-items:center}
.aurora{position:absolute;inset:-20%;will-change:transform;pointer-events:none;animation:nnAurora 22s ease-in-out infinite}
.aurora--1{background:radial-gradient(38% 44% at 20% 28%, rgba(20,168,155,.75) 0%, rgba(10,31,82,0) 62%);animation:nnAurora 16s ease-in-out infinite}
.aurora--2{background:radial-gradient(34% 40% at 78% 18%, rgba(43,95,217,.6) 0%, rgba(10,31,82,0) 60%);animation:nnAurora 21s ease-in-out infinite reverse}
.aurora--3{background:radial-gradient(30% 36% at 62% 78%, rgba(20,168,155,.4) 0%, rgba(10,31,82,0) 62%);animation:nnAurora 26s ease-in-out infinite}
.aurora--blue{background:radial-gradient(36% 42% at 24% 30%, rgba(110,155,255,.6), transparent 62%);animation:nnAurora 18s ease-in-out infinite}
.aurora--blue2{background:radial-gradient(32% 38% at 80% 24%, rgba(20,168,155,.45), transparent 60%);animation:nnAurora 24s ease-in-out infinite reverse}
.aurora--teal{background:radial-gradient(38% 44% at 22% 26%, rgba(20,168,155,.75), transparent 62%);animation:nnAurora 18s ease-in-out infinite}
.aurora--teal2{background:radial-gradient(32% 40% at 82% 30%, rgba(10,31,82,.7), transparent 60%);animation:nnAurora 25s ease-in-out infinite reverse}
.aurora--soft{background:radial-gradient(34% 44% at 20% 30%, rgba(110,155,255,.42), transparent 62%);animation:nnAurora 24s ease-in-out infinite}
.aurora--cta1{background:radial-gradient(34% 44% at 22% 40%, rgba(49,208,188,.5), transparent 64%);animation-duration:19s}
.aurora--cta2{background:radial-gradient(30% 40% at 80% 60%, rgba(110,155,255,.45), transparent 62%);animation-duration:27s;animation-direction:reverse}
.aurora--band-teal{background:radial-gradient(30% 40% at 75% 30%, rgba(49,208,188,.3), transparent 65%);animation-duration:22s}
.aurora--band-blue{background:radial-gradient(32% 42% at 76% 34%, rgba(110,155,255,.45), transparent 64%);animation-duration:21s}
.aurora--band-teal2{background:radial-gradient(32% 42% at 76% 34%, rgba(49,208,188,.3), transparent 64%);animation-duration:22s}
.aurora--quote{background:radial-gradient(34% 44% at 24% 40%, rgba(110,155,255,.45), transparent 64%);animation-duration:22s}
.aurora--pf-blue{background:radial-gradient(40% 40% at 30% 20%, rgba(120,170,255,.55), transparent 70%);animation-duration:18s}
.aurora--pf-teal{background:radial-gradient(40% 40% at 70% 25%, rgba(120,240,220,.5), transparent 70%);animation-duration:22s;animation-direction:reverse}
.aurora--arch1{background:radial-gradient(32% 40% at 24% 26%, rgba(49,208,188,.32), transparent 65%);animation-duration:24s}
.aurora--arch2{background:radial-gradient(30% 38% at 78% 70%, rgba(110,155,255,.32), transparent 64%);animation-duration:30s;animation-direction:reverse}
.band .aurora,.cta-inner .aurora,.quote-band .aurora{inset:-25%}
.grid-overlay{position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(234,246,243,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(234,246,243,.05) 1px,transparent 1px);
  background-size:76px 76px;
  -webkit-mask-image:radial-gradient(70% 70% at 50% 30%,#000,transparent);mask-image:radial-gradient(70% 70% at 50% 30%,#000,transparent);
}
.grid-overlay--left{-webkit-mask-image:radial-gradient(70% 70% at 40% 35%,#000,transparent);mask-image:radial-gradient(70% 70% at 40% 35%,#000,transparent)}

/* status pill in hero */
.status-pill{
  display:inline-flex;align-items:center;gap:9px;background:rgba(234,246,243,.09);
  border:1px solid rgba(234,246,243,.18);padding:7px 15px;border-radius:100px;
  font-family:var(--ff-mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--teal-accent);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.status-pill--blue{color:var(--on-navy-label)}
.status-dot{width:6px;height:6px;border-radius:50%;background:var(--teal-bright);animation:nnPulse 2.2s ease-in-out infinite}
.status-dot--blue{background:var(--light-blue)}
.hero-brand-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
/* Product endorsement lockup — "Clarity by NorthNeuron" (house-mark coupling) */
.name-lockup{display:flex;flex-direction:column;gap:3px}
.endorse{font-family:var(--ff-body);font-weight:500;font-size:13px;line-height:1.1;letter-spacing:.01em;color:var(--faint)}
.endorse > span{color:var(--clarity-blue);font-weight:600}
.endorse--sm{font-size:11px}
.endorse--dark{color:var(--on-navy-body)}
.endorse--dark > span{color:var(--light-blue)}
.hero-lockup{display:flex;flex-direction:column;gap:9px;align-items:flex-start}
.hero-wordmark{font-family:var(--ff-sora);font-weight:600;font-size:clamp(19px,2.3vw,25px);letter-spacing:-.02em;color:var(--on-navy);line-height:1.08}
.hero-wordmark > span{font-family:var(--ff-body);font-weight:500;font-size:15px;color:var(--on-navy-body);letter-spacing:0}
.hero-wordmark > span > span{color:var(--light-blue);font-weight:600}

.hero-lede-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:44px;align-items:end;margin-top:36px}
.hero-lede{margin:0;max-width:52ch;font-size:19px;line-height:1.6;color:var(--on-teal-muted);text-wrap:pretty}
.hero-lede--navy{color:#A9C7C2}
.hero-lede--soft{color:var(--on-navy-soft)}
.hero-title{margin:24px 0 0}
.hero-title--home{margin:26px 0 0;max-width:15ch}
.hero-sub{margin:22px 0 0;max-width:50ch;font-size:18px;line-height:1.6;text-wrap:pretty}

/* clarity hero phones */
.phone-stack{position:relative;display:flex;justify-content:center;align-items:flex-end;gap:0;min-height:520px}
.phone{border-radius:22px 22px 0 0;overflow:hidden;border:1px solid rgba(234,241,251,.28);border-bottom:0;transition:transform .5s var(--ease)}
.phone img{width:100%;display:block}
.phone--back{width:47%;max-width:280px;height:400px;box-shadow:0 40px 80px -34px rgba(0,0,0,.95);transform:translate(14%,-16px) rotate(3deg)}
.phone--back:hover{transform:translate(14%,-30px) rotate(3deg)}
.phone--front{width:52%;max-width:310px;height:460px;border-color:rgba(234,241,251,.34);box-shadow:0 44px 90px -30px rgba(0,0,0,.95);transform:translateX(-16%);position:relative;z-index:2}
.phone--front:hover{transform:translateX(-16%) translateY(-14px)}

/* ==========================================================================
   Home — split stage + ticker
   ========================================================================== */
.split-stage{
  margin-top:72px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr));
  background:rgba(251,249,246,.06);border:1px solid rgba(234,246,243,.16);border-radius:18px;overflow:hidden;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.split-col{padding:28px 30px 36px}
.split-col--divider{border-right:1px solid rgba(234,246,243,.14)}
.split-head{display:flex;align-items:center;justify-content:space-between;font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase}
.split-head--blue{color:var(--on-navy-label)}
.split-head--teal{color:var(--teal-accent)}
.split-live{display:flex;align-items:center;gap:6px;color:var(--on-teal-muted)}
.split-live i{width:5px;height:5px;border-radius:50%;display:inline-block}
.split-body{margin-top:24px;display:flex;align-items:flex-start}
.split-body--teen{gap:18px}
.doc-card{flex:1 1 175px;max-width:200px;background:rgba(251,249,246,.07);border:1px solid rgba(234,246,243,.14);border-radius:8px;padding:15px 14px;display:flex;flex-direction:column;gap:9px}
.doc-k{font-family:var(--ff-mono);font-size:8.5px;letter-spacing:.14em;color:var(--on-teal-muted)}
.doc-line{height:6px;background:rgba(234,246,243,.16);border-radius:3px}
.doc-hl{display:flex;justify-content:space-between;background:rgba(110,155,255,.24);border-left:2px solid var(--light-blue);padding:7px 8px;margin:0 -5px;border-radius:2px;font-family:var(--ff-mono);font-size:11px;color:#C6D8FF}
.doc-connector{margin-top:60px;flex:none}
.plain-card{flex:1 1 220px;min-width:220px;margin-top:86px;background:var(--paper);color:var(--ink);border-radius:10px;padding:16px 17px;display:flex;flex-direction:column;gap:9px;animation:nnDrift 9s ease-in-out infinite;box-shadow:0 20px 44px -22px rgba(0,0,0,.6)}
.plain-k{font-family:var(--ff-mono);font-size:8.5px;letter-spacing:.14em;color:var(--clarity-blue)}
.plain-q{font-family:var(--ff-sora);font-weight:400;font-size:17px;line-height:1.35}
.plain-trace{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--faint);border-top:1px solid var(--hairline);padding-top:9px}
.plain-trace i{width:4px;height:4px;border-radius:50%;background:var(--clarity-blue);flex:none}
.teen-phone{width:164px;flex:none;border-radius:16px;border:1px solid rgba(234,246,243,.2);box-shadow:0 24px 50px -26px rgba(0,0,0,.8);animation:nnDrift 10s ease-in-out infinite}
.teen-notes{flex:1 1 195px;min-width:195px;margin-top:48px;display:flex;flex-direction:column;gap:12px}
.teen-note{background:rgba(251,249,246,.07);border:1px solid rgba(234,246,243,.14);border-radius:8px;padding:14px 15px}
.teen-note .k{font-family:var(--ff-mono);font-size:8.5px;letter-spacing:.14em;color:var(--on-teal-muted)}
.teen-note .v{font-size:14px;color:#C8DDD9;margin-top:7px}
.teen-note--hl{background:var(--teal-bright);color:var(--deep-teal);border-radius:10px;animation:nnDrift 8.5s .4s ease-in-out infinite;box-shadow:0 18px 40px -22px rgba(0,0,0,.7)}
.teen-note--hl .k{color:#075A52}
.teen-note--hl .v{font-family:var(--ff-sora);font-weight:500;font-size:16px;line-height:1.35;margin-top:7px;color:var(--deep-teal)}

.ticker{overflow:hidden;background:var(--paper);border-bottom:1px solid var(--hairline)}
.ticker-track{display:flex;width:max-content;animation:nnMarquee 38s linear infinite}
.ticker-track > div{display:flex;gap:48px;padding:16px 24px;font-family:var(--ff-mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--faint);white-space:nowrap}
.ticker .d-teal{color:var(--teal)}
.ticker .d-blue{color:var(--clarity-blue)}

/* ==========================================================================
   Product portfolio (home) — alternating rows
   ========================================================================== */
.pf-row{margin-top:56px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(400px,100%),1fr));gap:52px;align-items:center;border-top:1px solid var(--hairline);padding-top:46px}
.pf-row + .pf-row{margin-top:60px}
.pf-copy{display:flex;flex-direction:column;gap:18px}
.pf-tagrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tag{font-family:var(--ff-mono);font-size:10px;letter-spacing:.16em;padding:5px 11px;border-radius:100px}
.tag--live-blue{color:var(--clarity-blue);background:rgba(30,79,184,.1)}
.tag--live-teal{color:var(--teal);background:rgba(15,118,110,.1)}
.tag--plain{color:var(--faint);background:transparent;padding-left:0}
.pf-title{margin:0;font-family:var(--ff-sora);font-weight:600;font-size:42px;letter-spacing:-.035em}
.pf-desc{margin:0;font-size:17.5px;line-height:1.62;color:var(--muted);max-width:46ch;text-wrap:pretty}
.pf-points{display:flex;flex-direction:column;gap:10px;margin-top:2px}
.pf-point{display:flex;gap:11px;align-items:baseline;font-size:15.5px;color:var(--body)}
.pf-point i{font-family:var(--ff-mono);font-size:11px;font-style:normal;flex:none}
.pf-point--blue i{color:var(--clarity-blue)}
.pf-point--teal i{color:var(--teal)}
.pf-media{position:relative;border-radius:18px;padding:34px 30px;overflow:hidden}
.pf-media--clarity{background:linear-gradient(150deg,#1E4FB8,#0A1F52);box-shadow:0 34px 70px -40px rgba(10,31,82,.9)}
.pf-media--teen{background:linear-gradient(150deg,#14A89B,#0B5F58);box-shadow:0 34px 70px -40px rgba(11,95,88,.8)}
.pf-media .aurora{position:absolute;inset:-30%}
.pf-media-inner{position:relative}
.pf-shot-pair{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.pf-shot{height:210px;border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,.22);background:#fff}
.pf-shot img{width:100%;height:100%;object-fit:cover}
.pf-shot--lift{transform:translateY(-14px)}
.pf-teen-row{position:relative;display:flex;gap:16px;align-items:flex-start}
.pf-teen-row img{width:calc(33.33% - 11px);border-radius:14px;border:1px solid rgba(255,255,255,.35)}
.pf-teen-row img.lift{transform:translateY(-16px)}
.pf-caption{position:relative;margin-top:24px;font-family:var(--ff-mono);font-size:10px;letter-spacing:.14em}
.pf-caption--blue{color:var(--on-navy-label)}
.pf-caption--teal{color:#B6F0E6}

/* ==========================================================================
   Cards (generic + feature + step + product + dept)
   ========================================================================== */
.card{background:#fff;border:1px solid var(--hairline);border-radius:16px;padding:28px 26px}
.card--lg{border-radius:18px;padding:32px 30px}
.grid{display:grid;gap:20px}
.grid--auto-215{grid-template-columns:repeat(auto-fit,minmax(min(215px,100%),1fr))}
.grid--auto-240{grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr))}
.grid--auto-260{grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr))}
.grid--auto-280{grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))}
.grid--auto-290{grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr))}
.grid--auto-300{grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}
.grid--auto-320{grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr))}
.grid--gap-14{gap:14px}.grid--gap-18{gap:18px}.grid--gap-22{gap:22px}.grid--gap-28{gap:28px}
.mt-30{margin-top:30px}.mt-34{margin-top:34px}.mt-38{margin-top:38px}.mt-18{margin-top:18px}.mt-20{margin-top:20px}
.section-note{margin-top:18px;font-size:14.5px;color:var(--muted)}
.section-note a{color:var(--clarity-blue);font-weight:600}

.lift{transition:transform .3s var(--ease),box-shadow .3s,border-color .3s}
.lift:hover{transform:translateY(-5px)}
.lift-6:hover{transform:translateY(-6px);box-shadow:0 28px 50px -30px rgba(14,26,26,.55)}

.step-card{display:flex;flex-direction:column;gap:11px}
.step-num{font-family:var(--ff-mono);font-size:11px;color:var(--clarity-blue)}
.step-card h3{margin:0;font-family:var(--ff-sora);font-weight:600;font-size:22px;letter-spacing:-.02em}
.step-card p{margin:0;font-size:14.5px;line-height:1.6;color:var(--muted)}

.feature-card{display:flex;flex-direction:column;gap:11px}
.card-label{font-family:var(--ff-mono);font-size:10px;letter-spacing:.15em;margin:0}
.card-label--blue{color:var(--clarity-blue)}
.card-label--teal{color:var(--teal)}
.feature-card h3{margin:0;font-family:var(--ff-sora);font-weight:600;font-size:24px;letter-spacing:-.025em;line-height:1.22}
.feature-card p{margin:0;font-size:15px;line-height:1.6;color:var(--muted)}
.feature-card .rows{margin-top:3px;display:flex;flex-direction:column;gap:11px;font-size:15.5px;line-height:1.55;color:var(--body)}

/* product index cards (products page) */
.product-card{background:#fff;border:1px solid var(--hairline);border-radius:18px;padding:30px 28px;display:flex;flex-direction:column;gap:16px;color:var(--ink)}
.product-card-top{display:flex;justify-content:space-between;align-items:center}
.product-card-brand{display:flex;align-items:center;gap:13px}
.product-card-brand img{width:48px;height:48px;flex:none;border-radius:12px}
.product-card-brand img.tile{object-fit:cover;padding:0;background:#fff;border:1px solid var(--clarity-tile-border)}
.product-card-brand h2{margin:0;font-family:var(--ff-sora);font-weight:600;font-size:31px;letter-spacing:-.03em}
.product-card-brand h2.sm{font-size:29px}
.product-card p{margin:0;font-size:15.5px;line-height:1.6;color:var(--muted)}
.product-card-shot{width:100%;height:196px;object-fit:cover;border-radius:12px;border:1px solid var(--hairline);background:var(--paper)}
.product-card-link{margin-top:auto;font-size:14.5px;font-weight:600}
.link-blue{color:var(--clarity-blue)}.link-teal{color:var(--teal)}
.tag--enterprise{color:var(--clarity-blue);background:rgba(30,79,184,.1)}

/* department cards (clinicians) */
.dept-card{background:#fff;border:1px solid var(--hairline);border-radius:14px;padding:22px 20px;display:flex;flex-direction:column;gap:9px;transition:transform .3s var(--ease),border-color .3s,box-shadow .3s}
.dept-card:hover{transform:translateY(-5px);border-color:var(--clarity-blue);box-shadow:0 22px 40px -28px rgba(30,79,184,.7)}
.dept-top{display:flex;align-items:center;justify-content:space-between}
.dept-code{font-family:var(--ff-mono);font-size:9.5px;letter-spacing:.14em;color:var(--clarity-blue)}
.dept-name{font-family:var(--ff-sora);font-weight:600;font-size:19px;letter-spacing:-.02em}
.dept-note{font-size:13.5px;line-height:1.5;color:var(--muted)}
.dept-status{font-family:var(--ff-mono);font-size:9px;letter-spacing:.12em;padding:3px 8px;border-radius:100px}
.dept-status--live{color:var(--teal);background:rgba(15,118,110,.1)}
.dept-status--pilot{color:var(--faint);background:#F0EDE6}

/* mark tile used in hero (clarity) */
.brand-tile{width:54px;height:54px;object-fit:cover;padding:0;background:#fff;border-radius:13px;flex:none;box-shadow:0 8px 20px -10px rgba(0,0,0,.55)}
.brand-tile--teen{padding:0;background:transparent;object-fit:cover;box-shadow:none}

/* ==========================================================================
   Dark inset bands (section on navy inside page flow)
   ========================================================================== */
.band{position:relative;overflow:hidden;border-radius:28px;margin:0 20px}
.band--navy{background:var(--navy);color:#EFF2F9}
.band--mt{margin-top:76px}
.band--mb{margin-bottom:20px}
.band-inner{position:relative;max-width:var(--wrap);margin:0 auto;padding:72px 36px}
.band-grid{margin-top:34px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:28px}
.band-item .card-label{color:var(--on-navy-label)}
.band-item p{margin:10px 0 0;font-size:16px;line-height:1.6;color:var(--on-navy-body)}
.band h2{font-family:var(--ff-sora);font-weight:400;font-size:clamp(28px,3.6vw,44px);letter-spacing:-.038em;text-wrap:balance;max-width:22ch}
.band .eyebrow{color:var(--on-navy-label)}

/* ==========================================================================
   Constellation (home / core principles)
   ========================================================================== */
.cst-wrap{position:relative}
.cst-stage{position:relative;height:clamp(390px,31vw,460px);margin-top:30px;perspective:1200px;perspective-origin:50% 45%}
.cst-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.cst-mark{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:clamp(240px,32%,380px);pointer-events:none;z-index:2;transition:opacity .45s,filter .45s;opacity:.62}
.cst-mark img{width:100%;height:auto;display:block;filter:brightness(0) invert(1)}
.cst-wrap.has-active .cst-mark{opacity:.16;filter:blur(2px)}
.cst-node{position:absolute;cursor:pointer;transform-style:preserve-3d;transition:transform .5s var(--ease);z-index:4}
.cst-pill{display:flex;align-items:center;gap:9px;white-space:nowrap;padding:11px 17px;border-radius:100px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:all .4s var(--ease);background:rgba(234,241,251,.09);border:1px solid rgba(234,241,251,.22);box-shadow:0 12px 28px -18px rgba(0,0,0,.9)}
.cst-node--star .cst-pill{border-color:rgba(255,214,138,.5)}
.cst-dot{width:7px;height:7px;border-radius:50%;flex:none;transition:background .4s}
.cst-glyph{font-size:12px;line-height:1;flex:none;transition:color .4s;color:var(--gold)}
.cst-label{font-family:var(--ff-sora);font-size:14px;font-weight:500;letter-spacing:-.01em;transition:color .4s;color:var(--on-navy)}
.cst-card-wrap{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(320px,40%);z-index:9;animation:nnPop .42s var(--ease) both}
.cst-card{background:rgba(10,31,82,.9);border:1px solid rgba(143,163,212,.4);border-radius:18px;padding:24px;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 34px 78px -34px rgba(0,0,0,.95),0 0 0 1px rgba(255,255,255,.05)}
.cst-card-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.cst-tag{font-family:var(--ff-mono);font-size:9.5px;letter-spacing:.16em;color:var(--on-navy-muted)}
.cst-close{cursor:pointer;font-size:16px;line-height:1;color:var(--on-navy-muted);padding:2px 4px;background:none;border:0}
.cst-card-title{font-family:var(--ff-sora);font-weight:500;font-size:23px;line-height:1.2;letter-spacing:-.025em;margin-top:14px;color:var(--on-navy)}
.cst-card-body{font-size:14.5px;line-height:1.58;color:var(--on-navy-body);margin-top:12px}
.cst-card-foot{margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,.14);font-family:var(--ff-mono);font-size:9.5px;letter-spacing:.14em;color:var(--on-navy-muted)}
.cst-chips{margin-top:20px;display:flex;flex-wrap:wrap;gap:9px;justify-content:center}
.cst-chip{cursor:pointer;padding:7px 14px;border-radius:100px;font-size:12.5px;font-weight:500;transition:all .3s;background:rgba(234,241,251,.06);color:var(--on-navy-body);border:1px solid rgba(234,241,251,.16)}
.cst-hint{margin-top:14px;text-align:center;font-family:var(--ff-mono);font-size:10px;letter-spacing:.16em;color:var(--on-navy-muted)}
/* narrow fallback (shown < 1151px) */
.cst-narrow{margin-top:32px;display:flex;flex-direction:column;align-items:center;gap:24px}
.cst-narrow-mark{width:200px;height:auto;filter:brightness(0) invert(1);opacity:.55}
.cst-narrow-card{width:100%;max-width:440px;animation:nnPop .42s var(--ease) both;display:none}
.cst-narrow.has-active .cst-narrow-card{display:block}

/* layers row beneath constellation */
.layers{position:relative;border-top:1px solid rgba(255,255,255,.16)}
.layers-inner{max-width:var(--wrap);margin:0 auto;padding:24px 36px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:24px}
.layer-k{font-family:var(--ff-mono);font-size:10px;letter-spacing:.14em;color:#9FAAC6}
.layer-v{font-size:14.5px;margin-top:7px;color:#EFF2F9}

/* ==========================================================================
   Compare table (products)
   ========================================================================== */
.compare{margin-top:60px;border:1px solid var(--hairline);border-radius:16px;overflow:hidden;background:#fff}
.compare-scroll{overflow-x:auto}
.compare-inner{min-width:640px}
.compare-head,.compare-row{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr}
.compare-head{background:#F2EFE8;font-family:var(--ff-mono);font-size:10px;letter-spacing:.14em;color:var(--muted)}
.compare-head div{padding:15px 16px}
.compare-head div:first-child{padding-left:22px}
.compare-row{border-top:1px solid var(--hairline);font-size:14.5px}
.compare-row div{padding:16px;color:var(--muted)}
.compare-row div:first-child{padding-left:22px;font-weight:600;color:var(--ink)}

/* ==========================================================================
   Detail bands (clarity "a look inside")
   ========================================================================== */
.detail-grid{margin-top:30px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:22px}
.detail-col{display:flex;flex-direction:column;gap:14px}
.detail-shot{position:relative;height:250px;border-radius:16px;overflow:hidden;border:1px solid var(--hairline);background:#fff;box-shadow:var(--shadow-card)}
.detail-shot img{width:100%;height:100%;object-fit:cover}
.detail-shot::after{content:"";position:absolute;inset:auto 0 0 0;height:64px;background:linear-gradient(to top,#fff,rgba(255,255,255,0))}
.detail-cap{display:flex;flex-direction:column;gap:5px}
.detail-cap .k{font-family:var(--ff-mono);font-size:9.5px;letter-spacing:.15em;color:var(--clarity-blue)}
.detail-cap .t{font-family:var(--ff-sora);font-weight:600;font-size:18px;letter-spacing:-.02em}
.detail-cap .d{font-size:14px;line-height:1.55;color:var(--muted)}

/* ==========================================================================
   Teen preview grids
   ========================================================================== */
.preview-grid{margin-top:34px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:20px}
.preview-grid--hero{margin-top:48px;grid-template-columns:repeat(auto-fit,minmax(min(185px,100%),1fr))}
.preview-col{display:flex;flex-direction:column;gap:12px}
.preview-frame{height:230px;border-radius:16px;overflow:hidden;border:1px solid var(--hairline);background:#fff;transition:transform .35s var(--ease)}
.preview-frame--dark{border-color:rgba(234,246,243,.2);height:220px;background:transparent}
.preview-col:hover .preview-frame{transform:translateY(-6px)}
.preview-frame img{width:100%;height:100%;object-fit:cover}
.preview-cap{font-family:var(--ff-mono);font-size:10px;letter-spacing:.13em;color:var(--faint)}
.preview-cap--teal{color:#8FB8B2}

/* ==========================================================================
   About — founder + quote
   ========================================================================== */
.chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:38px}
.chip{border:1px solid rgba(234,241,251,.22);background:rgba(234,241,251,.06);padding:8px 15px;border-radius:100px;font-size:13px;color:#C8D8F5}
.chip--accent{border-color:rgba(110,155,255,.5);background:rgba(110,155,255,.14);color:var(--on-navy-label)}
.founder-grid{margin-top:38px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:52px;align-items:start}
.founder-portrait{position:relative}
.founder-portrait .glow{position:absolute;inset:-14px -14px 30px 22px;background:linear-gradient(150deg,#1E4FB8,#0A1F52);border-radius:22px;opacity:.14}
.founder-portrait img{position:relative;width:100%;border-radius:18px;border:1px solid var(--hairline);box-shadow:0 34px 66px -40px rgba(10,31,82,.8)}
.founder-meta{position:relative;margin-top:20px;display:flex;flex-direction:column;gap:5px}
.founder-name{font-family:var(--ff-sora);font-weight:600;font-size:24px;letter-spacing:-.025em}
.founder-role{font-family:var(--ff-mono);font-size:11px;letter-spacing:.14em;color:var(--clarity-blue)}
.founder-copy{display:flex;flex-direction:column;gap:22px}
.founder-copy h2{margin:0;font-family:var(--ff-sora);font-weight:400;font-size:clamp(28px,3.4vw,42px);line-height:1.1;letter-spacing:-.035em;text-wrap:balance;max-width:18ch}
.founder-copy p{margin:0;font-size:17px;line-height:1.65;color:var(--body);max-width:52ch;text-wrap:pretty}
.founder-copy p.dim{color:var(--muted)}
.founder-points{display:flex;flex-direction:column;gap:12px;margin-top:4px}
.founder-points > div{display:flex;gap:13px;align-items:baseline;font-size:15.5px;color:var(--body)}
.founder-points i{color:var(--clarity-blue);font-family:var(--ff-mono);font-size:11px;font-style:normal;flex:none}
.quote-band{margin:64px 20px 0;background:var(--navy);color:var(--on-navy);border-radius:28px;position:relative;overflow:hidden}
.quote-inner{position:relative;max-width:1000px;margin:0 auto;padding:76px 40px;text-align:center}
.quote-text{font-family:var(--ff-sora);font-weight:300;font-size:clamp(26px,3.4vw,42px);line-height:1.3;letter-spacing:-.03em;text-wrap:balance}
.quote-by{margin-top:26px;font-family:var(--ff-mono);font-size:11px;letter-spacing:.16em;color:var(--on-navy-label)}
.factbar{margin-top:48px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr));gap:30px;border-top:1px solid var(--hairline);padding-top:32px}
.fact .k{font-family:var(--ff-mono);font-size:10px;letter-spacing:.15em;color:var(--faint)}
.fact .v{margin-top:10px;font-size:15.5px;line-height:1.6;color:var(--body)}

/* ==========================================================================
   Contact / support mailto cards
   ========================================================================== */
.link-card{background:#fff;border:1px solid var(--hairline);border-radius:18px;padding:30px 28px;display:flex;flex-direction:column;gap:12px;color:var(--ink);transition:transform .3s var(--ease),border-color .3s,box-shadow .3s}
.link-card:hover{transform:translateY(-5px);border-color:var(--clarity-blue);box-shadow:0 26px 46px -30px rgba(10,31,82,.6);color:var(--ink)}
.link-card.teal:hover{border-color:var(--teal)}
.link-card .k{font-family:var(--ff-mono);font-size:10px;letter-spacing:.15em}
.link-card h3{margin:0;font-family:var(--ff-sora);font-weight:600;font-size:23px;letter-spacing:-.025em;line-height:1.2}
.link-card h3.sm{font-size:22px;line-height:1.22}
.link-card p{margin:0;font-size:15px;line-height:1.6;color:var(--muted)}
.link-card .go{margin-top:auto;padding-top:6px;font-size:14.5px;font-weight:600}
.infobar{margin-top:24px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:26px;border-top:1px solid var(--hairline);padding-top:28px}
.infobar .k{font-family:var(--ff-mono);font-size:10px;letter-spacing:.15em;color:var(--faint)}
.infobar .v{margin-top:9px;font-size:16px;color:var(--body)}
.info-panel{background:#fff;border:1px solid var(--hairline);border-radius:18px;padding:32px 30px}
.info-panel .k{font-family:var(--ff-mono);font-size:10px;letter-spacing:.15em}
.info-panel .rows{margin-top:18px;display:flex;flex-direction:column;gap:12px;font-size:15.5px;line-height:1.6;color:var(--body)}

/* ==========================================================================
   Legal (privacy / terms)
   ========================================================================== */
.legal-grid{max-width:var(--wrap);margin:0 auto;padding:52px 36px 84px;display:grid;gap:56px;grid-template-columns:minmax(0,240px) minmax(0,1fr);align-items:start}
.legal-toc{position:sticky;top:130px;display:flex;flex-direction:column;gap:2px}
.legal-toc .k{font-family:var(--ff-mono);font-size:10px;letter-spacing:.16em;color:var(--faint);margin-bottom:10px}
.legal-toc a{font-size:14px;line-height:1.4;color:var(--muted);padding:7px 0;border-bottom:1px solid var(--hairline-soft)}
.legal-toc a:hover{color:var(--clarity-blue)}
.legal-body{min-width:0}
.legal-body h2{margin:44px 0 0;padding-top:30px;border-top:1px solid var(--hairline);font-family:var(--ff-sora);font-weight:500;font-size:27px;letter-spacing:-.025em;line-height:1.22;scroll-margin-top:140px}
.legal-body h2:first-child{margin-top:0;padding-top:0;border-top:0}
.legal-body p{margin:16px 0 0;font-size:16.5px;line-height:1.7;color:var(--body);max-width:68ch;text-wrap:pretty}
.legal-body strong{font-weight:600}
.legal-list{margin:18px 0 0;display:flex;flex-direction:column;gap:12px;max-width:68ch}
.legal-list > div{display:flex;gap:12px;align-items:baseline;font-size:16.5px;line-height:1.65;color:var(--body)}
.legal-list .b{color:var(--clarity-blue);flex:none}

/* ==========================================================================
   CTA band + footer
   ========================================================================== */
.cta-band{max-width:var(--wrap);margin:0 auto;padding:0 36px 76px}
.cta-inner{position:relative;overflow:hidden;background:var(--navy);color:var(--on-navy);border-radius:26px;padding:72px 44px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:48px;align-items:center}
.cta-inner h2{margin:0;font-family:var(--ff-sora);font-weight:400;font-size:clamp(32px,4vw,52px);line-height:1.04;letter-spacing:-.042em;max-width:16ch;text-wrap:balance}
.cta-inner p{margin:20px 0 0;font-size:17px;line-height:1.6;color:#A9C7C2;max-width:48ch;text-wrap:pretty}
.cta-copy{position:relative}
.cta-links{position:relative;display:flex;flex-direction:column;gap:11px}
.cta-link{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border:1px solid rgba(234,246,243,.24);border-radius:14px;background:rgba(234,246,243,.07);font-size:16.5px;font-weight:600;color:var(--on-teal);transition:background .25s,transform .25s}
.cta-link:hover{background:rgba(234,246,243,.14);transform:translateX(4px);color:var(--on-teal)}
.cta-link--plain{background:transparent}
.cta-link .arr-blue{color:var(--light-blue)}
.cta-link .arr-teal{color:var(--teal-bright)}
.cta-link .arr-soft{color:var(--on-teal-muted)}

.footer{background:var(--navy);color:var(--footer-text)}
.footer-grid{max-width:var(--wrap);margin:0 auto;padding:60px 36px 40px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:44px}
.footer-brand{display:flex;flex-direction:column;gap:16px}
.footer-logo{height:38px;width:auto;align-self:flex-start;filter:brightness(0) invert(1);opacity:.9}
.footer-brand p{margin:0;font-size:14.5px;line-height:1.6;color:var(--footer-muted);max-width:40ch}
.footer-legal{font-family:var(--ff-mono);font-size:11px;line-height:1.8;color:var(--footer-muted)}
.footer-legal a{color:var(--footer-link)}
.footer-col{display:flex;flex-direction:column;gap:10px}
.footer-col-h{font-family:var(--ff-mono);font-size:10px;letter-spacing:.16em;color:var(--footer-muted);margin:0}
.footer-col a{font-size:14.5px;color:var(--footer-text)}
.footer-col a:hover{color:#fff}
.footer-base{max-width:var(--wrap);margin:0 auto;padding:0 36px 36px;font-family:var(--ff-mono);font-size:11px;color:var(--footer-muted)}

/* ==========================================================================
   Reveals
   ========================================================================== */
[data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .75s var(--ease),transform .75s var(--ease)}
[data-reveal].revealed{opacity:1;transform:none}
.no-js [data-reveal]{opacity:1;transform:none}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1150px){
  .legal-grid{gap:28px;grid-template-columns:minmax(0,1fr)}
  .legal-toc{display:none}
  .cst-stage{display:none}
}
@media (min-width:1151px){
  .cst-narrow{display:none}
}

@media (max-width:860px){
  .nav-links,.nav-actions .btn{display:none}
  .nav-toggle{display:flex}
  .nav-inner{position:relative}
  .nav-mobile{
    position:absolute;top:calc(100% + 10px);left:16px;right:16px;background:#fff;border:1px solid var(--hairline);
    border-radius:16px;box-shadow:0 26px 50px -30px rgba(14,26,26,.4);padding:12px;
    display:none;flex-direction:column;gap:2px;z-index:85;
  }
  .nav-open .nav-mobile{display:flex}
  .nav-mobile a{padding:13px 14px;border-radius:10px;font-size:15.5px;font-weight:500;color:var(--ink)}
  .nav-mobile a:hover{background:#F4F8F7}
  .nav-mobile .sub{font-size:11px;color:var(--faint);padding:10px 14px 2px;font-family:var(--ff-mono);letter-spacing:.12em;text-transform:uppercase}
  .nav-mobile .btn{display:inline-flex;margin-top:8px;justify-content:center}
  .hero-inner{padding:72px 28px 80px}
  .hero-inner--md{padding:60px 28px 56px}
  .split-col--divider{border-right:0;border-bottom:1px solid rgba(234,246,243,.14)}
  .band,.quote-band{margin-left:16px;margin-right:16px}
  .cta-band{padding-left:16px;padding-right:16px}
  .cta-inner{padding:52px 28px}
  .section{padding-left:24px;padding-right:24px}
  .wrap{padding-left:24px;padding-right:24px}
  .footer-grid{padding-left:24px;padding-right:24px}
  .pf-title{font-size:34px}
  .phone-stack{min-height:440px}
}
@media (max-width:560px){
  body{font-size:16px}
  .hero-inner{padding:56px 20px 64px}
  .hero-inner--md{padding:48px 20px 48px}
  .hero-inner--sm{padding:44px 20px 40px}
  .section{padding:56px 20px 0}
  .wrap{padding-left:20px;padding-right:20px}
  .footer-grid{padding:48px 20px 32px}
  .footer-base{padding-left:20px;padding-right:20px}
  .split-col{padding:24px 22px 30px}
  .band{margin:0 12px}
  .band-inner{padding:52px 24px}
  .cta-band{padding:0 12px 56px}
  .cta-inner{padding:44px 24px}
  .quote-band{margin:56px 12px 0}
  .quote-inner{padding:56px 24px}
  .pf-row{gap:32px;padding-top:36px}
  .pf-media{padding:24px 20px}
  .pf-teen-row img.lift,.pf-shot--lift{transform:none}
  .split-stage{margin-top:48px}
  .phone-stack{min-height:400px}
  /* stack the hero mockups so nothing overflows the column */
  .split-body{flex-direction:column}
  .doc-connector{display:none}
  .doc-card{max-width:none;flex:1 1 auto}
  .plain-card{margin-top:16px;min-width:0}
  .split-body--teen{flex-direction:column}
  .teen-phone{width:150px}
  .teen-notes{margin-top:16px;min-width:0}
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
  [data-reveal]{opacity:1 !important;transform:none !important}
  .aurora{animation:none}
}
