/* ==========================================================================
   NEOSPHYR — "Constellation" theme
   --------------------------------------------------------------------------
   Loaded after site.css on every page. site.css keeps the structure of every
   component; this layer re-skins it: warm paper ground, Manrope with Instrument
   Serif italics for emphasis, navy pill buttons, the logo and the menu on
   frosted pills, rounded paper cards, a navy footer with a quiet star field.
   Home-only sections live in home.css.
   ========================================================================== */

:root{
  /* --- Ground and ink --------------------------------------------------- */
  --bg:          #F4F1EA;   /* warm paper */
  --bg-rgb:      244,241,234;
  --bg-alt:      #FBFAF6;   /* lighter paper, alternate sections */
  --bg-tint:     #ECE7DD;
  --card:        #FFFDF9;   /* cards and panels sit a step above the paper */
  --line:        #DDD6C9;
  --line-soft:   #E9E3D8;
  --ink-3:       #6B7685;
  --ink-muted:   #6B7685;   /* used by downloads.html, never defined before */
  --blue-tint:   #E3EAF4;

  /* --- Type ------------------------------------------------------------- */
  --font-display: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --font-body:    'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --font-serif:   'Instrument Serif', Georgia, 'Times New Roman', serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --h1: 60px; --h2: 40px;

  /* --- Shape ------------------------------------------------------------ */
  --r-lg: 28px;
  --r-md: 18px;
  --r-sm: 12px;
  --nav-h: 76px;

  --shadow-md: 0 2px 6px rgba(21,35,59,.05), 0 14px 32px -12px rgba(21,35,59,.18);
  --shadow-lg: 0 4px 12px rgba(21,35,59,.06), 0 30px 60px -24px rgba(21,35,59,.32);
}

body{ background:var(--bg); font-weight:500; }

/* ==========================================================================
   TYPE
   ========================================================================== */
h1,h2,h3,h4{ font-weight:800; }
h1,.h1{ letter-spacing:-.05em; line-height:1; }
h2,.h2{ letter-spacing:-.04em; line-height:1.08; }
h3,.h3{ font-weight:700; letter-spacing:-.02em; }
/* italic serif for emphasis inside any heading */
:is(h1,h2,h3) em{ font-family:var(--font-serif); font-style:italic; font-weight:400; letter-spacing:-.01em; color:var(--blue); }
.section--dark :is(h1,h2,h3) em, .cta :is(h1,h2,h3) em{ color:#8FB3DC; }
strong{ font-weight:700; }

.eyebrow{ color:var(--ink-3); letter-spacing:.08em; font-size:12px; }
.eyebrow::before{ width:7px; height:7px; border-radius:50%; }

/* ==========================================================================
   HEADER — logo, menu and call to action each on their own frosted pill,
   so they stay legible over whatever scrolls underneath
   ========================================================================== */
.header{ background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none; border-bottom:0; }
.header.is-stuck{ border-bottom-color:transparent; box-shadow:none; }
.header__inner{ gap:16px; }
.brand{ gap:10px; }
.header .brand,
.nav,
.burger{
  background:rgba(251,250,246,.78); border:1px solid var(--line);
  backdrop-filter:blur(12px) saturate(1.2); -webkit-backdrop-filter:blur(12px) saturate(1.2);
  border-radius:var(--r-pill);
}
.header .brand{ padding:5px 16px 5px 5px; }
.header .brand img{ width:32px; height:32px; }
.brand__name{ font-weight:800; font-size:19px; letter-spacing:-.02em; }
.nav{ padding:5px; gap:2px; }
.nav a, .nav button{ font-weight:600; font-size:14.5px; color:var(--ink-2); padding:8px 14px; }
.nav a:hover, .nav button:hover,
.dropdown[data-open="true"] > button{ background:var(--navy); color:#fff; }
.nav a.is-current{ background:rgba(21,35,59,.08); color:var(--ink); }
.header__cta{ margin-left:0; }

.dropdown__panel{ background:var(--card); border-radius:22px; padding:8px; box-shadow:var(--shadow-lg); }
.dropdown__item{ border-radius:14px; }
.dropdown__item:hover{ background:var(--bg); }
.dropdown__icon{ border-radius:9px; }

.burger{ width:46px; height:46px; padding:12px; }
.mobile-nav{
  margin:8px 16px 0; border:1px solid var(--line); border-radius:24px;
  background:var(--card); box-shadow:var(--shadow-lg); overflow:hidden;
}
.mobile-nav a:hover{ background:var(--bg); }
/* .mobile-nav a sets the ink colour and outranks .btn--primary: give the button back its white label */
.mobile-nav a.btn--primary{ display:flex; color:#fff; padding:0 26px; }
.mobile-nav a.btn--primary:hover{ background:var(--blue); color:#fff; }

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn{ font-weight:700; font-size:15px; border-width:1.5px; }
.btn--primary{ background:var(--navy); color:#fff; box-shadow:none; }
.btn--primary:hover{ background:var(--blue); color:#fff; box-shadow:0 10px 24px -12px rgba(31,78,140,.6); }
.btn--secondary{ background:transparent; color:var(--navy); border-color:var(--navy); }
.btn--secondary:hover{ background:var(--navy); color:#fff; border-color:var(--navy); }
.btn--ghost:hover{ background:rgba(21,35,59,.06); }
.btn--on-dark{ background:#fff; color:var(--navy); }
.btn--on-dark:hover{ background:#E9EFF8; }
.btn--outline-dark{ border-color:rgba(255,255,255,.55); }
/* the round arrow badge used on primary calls to action */
.btn .arr{ display:inline-grid; place-items:center; width:26px; height:26px; margin-right:-10px; border-radius:50%;
  background:rgba(255,255,255,.16); transition:transform .25s; }
.btn--secondary .arr, .btn--on-dark .arr{ background:rgba(21,35,59,.08); }
.btn:hover .arr{ transform:rotate(-45deg); }

/* ==========================================================================
   HEROES — product pages and simple pages get the constellation too:
   a dotted field fading to the right, and a canvas the script adds over it
   ========================================================================== */
.p-hero, .page-head{ position:relative; overflow:hidden; }
.p-hero::before, .page-head::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(21,35,59,.16) 1px, transparent 1.6px);
  background-size:26px 26px;
  -webkit-mask-image:linear-gradient(100deg, transparent 35%, #000 85%);
          mask-image:linear-gradient(100deg, transparent 35%, #000 85%);
}
.c-sky{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none;
  -webkit-mask-image:linear-gradient(100deg, transparent 30%, #000 75%);
          mask-image:linear-gradient(100deg, transparent 30%, #000 75%); }
.p-hero .wrap, .page-head .wrap{ position:relative; z-index:1; }
.p-hero{ padding:72px 0 72px; }
.p-hero h1{ font-size:clamp(44px,6.4vw,84px); margin:6px 0 18px; }
.p-hero .lead{ font-weight:600; }
.hero__picon{ border-radius:18px; box-shadow:0 18px 36px -18px rgba(21,35,59,.45); }
.page-head{ padding:84px 0 64px; border-bottom:1px solid var(--line); }
.page-head h1{ font-size:clamp(40px,5.6vw,72px); }

/* ==========================================================================
   SECTIONS
   ========================================================================== */
.section--alt{ background:var(--bg-alt); }
.section--dark{ background:var(--navy); }

/* the closing call to action becomes a rounded navy panel with a star field */
.cta{ margin:0 24px 0; border-radius:36px; padding:96px 0; background:var(--navy); }
.cta::before{
  background:
    radial-gradient(1.2px 1.2px at 12% 30%, #8FB3DC 50%, transparent 51%),
    radial-gradient(1px 1px at 28% 72%, #fff 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 46% 22%, #3FA37A 50%, transparent 51%),
    radial-gradient(1px 1px at 63% 58%, #fff 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 80% 34%, #E0A23A 50%, transparent 51%),
    radial-gradient(1px 1px at 90% 78%, #8FB3DC 50%, transparent 51%);
  background-size:420px 260px; opacity:.6;
}
.cta h2{ font-size:clamp(34px,4.4vw,58px); letter-spacing:-.045em; }
.cta + .cfoot{ margin-top:0; }

/* ==========================================================================
   CARDS, PANELS, TABLES
   ========================================================================== */
.card, .rule, .check, .spec, .plan, .ptable-wrap, .dl, .rulefig, .faq details{ background:var(--card); }
.card{ border-radius:var(--r-lg); }
.card:hover{ box-shadow:var(--shadow-md); border-color:var(--line); }
.card__accent{ height:3px; }
.card__media{ background:var(--bg-alt); }
.rules, .checks{ border-radius:var(--r-lg); background:var(--line); }
.shot{ border-radius:22px; background:var(--bg-alt); }
.shot--lg{ border-radius:30px; }
.spec{ border-radius:22px; }
.spec__row dt{ font-weight:700; }
.plan{ border-radius:24px; }
.plan--featured{ border-color:var(--navy); box-shadow:0 0 0 3px rgba(21,35,59,.08); }
.plan__name, .plan__price, .pcard__fromval, .rule__count{ font-weight:800; }
.ptable-wrap{ border-radius:20px; }
.ptable thead th{ background:var(--bg-alt); }
.ptable tbody tr{ transition:background .2s; }
.ptable tbody tr:hover{ background:rgba(21,35,59,.03); }
.pill{ background:var(--card); font-weight:600; }
.tag{ background:var(--bg-tint); }
.callout{ background:var(--card); border-radius:0 18px 18px 0; }
.price-note{ background:var(--blue-tint); border-radius:16px; }
.dl{ border-radius:20px; }
.dl__icon{ background:var(--bg); }
.feature__icon{ border-radius:14px; }
.step__num{ font-family:var(--font-mono); font-weight:500; font-size:14px; }
.faq details{ padding:0 20px; border:1px solid var(--line); border-radius:18px; margin-bottom:10px; }
.faq{ border-top:0; }
.faq summary{ font-weight:700; }
.proof{ background:var(--navy); }

/* legal pages: inline code on paper */
.legal code{ background:var(--bg-tint); }

/* form fields on the contact page */
input:not([type=checkbox]):not([type=radio]), select, textarea{
  background:var(--card); border:1px solid var(--line); border-radius:14px; font-family:var(--font-body);
}

/* ==========================================================================
   FOOTER — navy, a quiet star field, link columns, a compatibility row
   ========================================================================== */
.cfoot{ position:relative; margin-top:96px; background:var(--navy); color:#E3E9F1; padding:72px 0 28px; font-size:15px; }
.cfoot::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.55;
  background-image:
    radial-gradient(1.2px 1.2px at 12% 30%, #8FB3DC 50%, transparent 51%),
    radial-gradient(1px 1px at 28% 70%, #fff 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 46% 22%, #3FA37A 50%, transparent 51%),
    radial-gradient(1px 1px at 63% 58%, #fff 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 78% 34%, #E0A23A 50%, transparent 51%),
    radial-gradient(1px 1px at 90% 76%, #8FB3DC 50%, transparent 51%);
  background-size:420px 260px;
}
.cfoot .wrap{ position:relative; z-index:2; }
.cfoot--card{ padding-top:0; margin-top:140px; }

/* Aurora behind every footer: four blurred lights in the brand colours drift
   slowly over the navy (the layer is added by constellation.js). Clipped to
   the footer, so the CTA card that overhangs the top edge stays outside it;
   the star field stays above the lights, the content above both. */
.cfoot__aurora{ position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.cfoot__aurora i{ position:absolute; border-radius:50%; filter:blur(70px); mix-blend-mode:screen; will-change:transform; }
.cfoot__aurora .b1{ width:46vw; height:30vw; left:-8vw; top:10%; background:#1F4E8C; opacity:.75; animation:au1 22s ease-in-out infinite alternate; }
.cfoot__aurora .b2{ width:36vw; height:24vw; left:30vw; top:45%; background:#2E7D5B; opacity:.45; animation:au2 26s ease-in-out infinite alternate; }
.cfoot__aurora .b3{ width:30vw; height:20vw; right:-4vw; top:5%; background:#4A3F6B; opacity:.6; animation:au3 19s ease-in-out infinite alternate; }
.cfoot__aurora .b4{ width:22vw; height:14vw; right:18vw; bottom:-6vw; background:#C8871B; opacity:.28; animation:au4 24s ease-in-out infinite alternate; }
@keyframes au1{ to{ transform:translate(18vw,8vw) scale(1.15); } }
@keyframes au2{ to{ transform:translate(-14vw,-10vw) scale(.85); } }
@keyframes au3{ to{ transform:translate(-20vw,12vw) scale(1.2); } }
@keyframes au4{ to{ transform:translate(-16vw,-8vw) scale(1.3); } }
/* darker towards the bottom, where the small legal text sits */
.cfoot__aurora::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(21,35,59,.15), rgba(21,35,59,.55)); }
.cfoot:has(.cfoot__aurora)::before{ z-index:1; }
/* the lights stop when the footer is off screen (class set by the script) */
.cfoot__aurora.is-paused i{ animation-play-state:paused; }
@media (prefers-reduced-motion:reduce){ .cfoot__aurora i{ animation:none; } }

/* the call-to-action card that floats over the top edge (home page) */
.cfoot__card{
  position:relative; top:-80px; margin-bottom:-28px; display:grid; grid-template-columns:1.3fr 1fr; gap:40px; align-items:center;
  padding:48px; border-radius:32px; background:var(--card); color:var(--ink); border:1px solid var(--line);
  box-shadow:0 40px 80px -40px rgba(21,35,59,.55);
}
.cfoot__card h2{ font-size:clamp(28px,3.4vw,46px); }
.cfoot__card p{ color:var(--ink-2); margin-top:12px; }
.cfoot__card .btn-row{ margin-top:24px; }
.cfoot__steps{ list-style:none; padding:0; margin:0; display:grid; gap:10px; counter-reset:s; }
.cfoot__steps li{ counter-increment:s; display:flex; align-items:center; gap:14px; padding:12px 16px; border-radius:14px;
  background:#fff; border:1px solid var(--line); font-weight:700; font-size:15px; color:var(--ink); }
.cfoot__steps li::before{ content:counter(s); display:grid; place-items:center; width:28px; height:28px; flex:none; border-radius:50%;
  background:var(--navy); color:#fff; font:600 13px var(--font-mono); }

.cfoot__grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px; padding:24px 0 48px; }
.cfoot .brand__name{ color:#fff; }
.cfoot .brand img{ width:32px; height:32px; }
.cfoot__about{ font-size:14.5px; color:#B4C0CF; max-width:340px; margin-top:14px; }
.cfoot__head{ font:500 12px var(--font-mono); letter-spacing:.08em; text-transform:uppercase; color:#8FB3DC; margin:0 0 14px; }
.cfoot ul{ list-style:none; padding:0; margin:0; display:grid; gap:9px; }
.cfoot ul a{ color:#D3DCE7; font-weight:500; text-decoration:none;
  background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat; transition:background-size .3s, color .2s; }
.cfoot ul a:hover{ color:#fff; background-size:100% 1px; }
.cfoot .cfoot__social{ display:flex; gap:8px; margin-top:22px; }
.cfoot .cfoot__social a{ display:grid; place-items:center; width:40px; height:40px; border-radius:50%; border:1px solid var(--navy-soft);
  color:#D3DCE7; background:none; transition:background .2s, color .2s, border-color .2s; }
.cfoot .cfoot__social a:hover{ background:#fff; color:var(--navy); border-color:#fff; }
.cfoot__status{ display:flex; flex-wrap:wrap; gap:8px 18px; padding:18px 0; border-block:1px solid var(--navy-soft);
  font:500 12.5px var(--font-mono); color:#B4C0CF; }
.cfoot__status span{ display:inline-flex; align-items:center; gap:8px; }
.cfoot__status i{ width:7px; height:7px; border-radius:50%; background:#3FA37A; box-shadow:0 0 0 3px rgba(63,163,122,.2); }
.cfoot__base{ display:grid; gap:10px; padding-top:20px; font-size:13px; color:#8494A8; }
.cfoot__base p{ max-width:860px; }
.cfoot :focus-visible{ outline-color:#8FB3DC; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1080px){
  :root{ --h1:48px; --h2:34px; }
  .cfoot__grid{ grid-template-columns:1fr 1fr; }
  .cfoot__about-col{ grid-column:1 / -1; }
  .cfoot__card{ grid-template-columns:1fr; padding:36px; }
}
@media (max-width:900px){
  .header .brand{ margin-right:auto; }
}
@media (max-width:680px){
  :root{ --h1:38px; --h2:28px; --nav-h:68px; }
  .header__inner{ padding:0 12px; }
  .p-hero{ padding:44px 0 48px; }
  .page-head{ padding:52px 0 40px; }
  .cta{ margin:0 8px; border-radius:24px; padding:64px 0; }
  .cfoot{ margin-top:64px; padding-top:56px; }
  .cfoot--card{ margin-top:110px; padding-top:0; }
  .cfoot__card{ top:-60px; padding:24px; border-radius:24px; }
  .cfoot__grid{ grid-template-columns:1fr; gap:32px; }
  .mobile-nav{ margin:8px 8px 0; }
}
@media print{
  .cfoot__card, .c-sky{ display:none !important; }
}