/* ============================================================
   Quiet Authority — design system v2
   Calm-premium, alive. Fraunces (display) + Inter (UI/body).
   One accent (teal/sky), surface ramp for elevation, 8px rhythm,
   signature canvas signal + hairline-node motif, restrained motion.
   ============================================================ */

:root{
  /* Surfaces — cool near-black, tonal elevation (elevation = surface swap, not shadow) */
  --bg-0:#091016; --bg-1:#0e1820; --bg-2:#13212c; --bg-3:#1b2e3a;
  --line:#1b2c37; --line-2:#274150;

  /* Text — three levels, never pure white; faint is UI-only */
  --text:#e4ecf1; --text-strong:#f5fafd; --text-muted:#9fb4c1; --text-faint:#6f8593;

  /* One accent family: teal (primary) + sky (secondary, gradient/signal only) */
  --accent:#19c2b0; --accent-strong:#5eead4; --accent-muted:#0d6f66; --accent-tint:#0c2624;
  --sky:#38bdf8; --on-accent:#04201d;
  --grad:linear-gradient(120deg,var(--sky),var(--accent));
  --grad-text:linear-gradient(120deg,#8ad6fb,#6ff0dd);

  /* Fluid type — perfect fourth display, calmer body (rem anchor keeps zoom accessible) */
  --fs-display:clamp(2.7rem,1.6rem + 4.9vw,4.9rem);
  --fs-h1:clamp(2.2rem,1.55rem + 2.9vw,3.6rem);
  --fs-h2:clamp(1.75rem,1.35rem + 1.9vw,2.7rem);
  --fs-h3:clamp(1.32rem,1.15rem + .8vw,1.7rem);
  --fs-lead:clamp(1.1rem,1.0rem + .5vw,1.3rem);
  --fs-body:1.0625rem; --fs-small:.9rem; --fs-eyebrow:.76rem;

  /* 8px spacing scale */
  --s1:.5rem; --s2:1rem; --s3:1.5rem; --s4:2rem; --s6:3rem; --s8:4rem;
  --s12:6rem; --s16:8rem; --s20:10rem;

  /* Motion — one house curve */
  --ease:cubic-bezier(.22,1,.36,1); --ease-expo:cubic-bezier(.16,1,.3,1);
  --fast:160ms; --base:240ms; --slow:340ms;

  /* Tinted shadows (slate, not black) */
  --sh-color:200deg 30% 6%;
  --sh-low:0 1px 2px hsl(var(--sh-color)/.5);
  --sh-med:0 10px 30px hsl(var(--sh-color)/.45),0 4px 10px hsl(var(--sh-color)/.4);

  --radius:16px; --radius-sm:11px; --container:1140px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;font-feature-settings:"liga" 1,"calt" 1,"kern" 1;text-rendering:optimizeLegibility;}
body{
  margin:0; background:var(--bg-0);
  color:var(--text); font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:var(--fs-body); line-height:1.65; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.nav-open{overflow:hidden;}
img,canvas{max-width:100%;display:block;}
::selection{background:var(--accent-muted);color:var(--text-strong);}

/* Film grain — static, material, near-invisible */
.grain{position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.04;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") repeat;}

a{color:var(--accent-strong);text-decoration:none;}
.skip{position:absolute;left:-9999px;}
.skip:focus{left:12px;top:12px;background:var(--accent);color:var(--on-accent);padding:8px 14px;border-radius:8px;z-index:200;}

/* Typography */
h1,h2,h3,h4{font-family:'Fraunces',Georgia,serif;color:var(--text-strong);font-weight:500;line-height:1.12;margin:0 0 .5em;font-variation-settings:"opsz" 144;}
h1{font-size:var(--fs-h1);letter-spacing:-.02em;}
h2{font-size:var(--fs-h2);letter-spacing:-.015em;}
h3{font-size:var(--fs-h3);letter-spacing:-.01em;}
h4{font-size:1.05rem;font-family:'Inter',sans-serif;font-weight:700;letter-spacing:.005em;}
p{margin:0 0 1rem;}
.lead{font-size:var(--fs-lead);color:var(--text-muted);line-height:1.6;max-width:62ch;}
.prose,p{max-width:68ch;}
.prose p, p{font-variant-numeric:oldstyle-nums proportional-nums;}
.grad{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
em{color:var(--accent-strong);font-style:italic;}
strong{color:var(--text-strong);font-weight:600;}
.eyebrow{display:inline-block;font-family:'Inter',sans-serif;font-size:var(--fs-eyebrow);font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-strong);margin-bottom:16px;}

/* Animated text link */
.link{color:inherit;background:linear-gradient(var(--accent),var(--accent)) no-repeat 0 100%/0% 1.5px;
  transition:background-size var(--slow) var(--ease);}
.link:hover,.link:focus-visible{background-size:100% 1.5px;}

/* Layout */
.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 24px;}
.section{padding:var(--s16) 0;}
.section.tight{padding:var(--s8) 0;}
.narrow{max-width:760px;margin-inline:auto;}
.center{text-align:center;}

/* Hairline + node divider (the signature mark) */
.rule,.divider{position:relative;height:1px;border:0;background:var(--line-2);opacity:.6;margin:var(--s12) 0;}
.rule::after,.divider::after{content:"";position:absolute;top:50%;left:42%;transform:translate(-50%,-50%);
  width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--accent-tint);}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;cursor:pointer;
  font-family:'Inter',sans-serif;font-weight:600;font-size:1rem;line-height:1;padding:15px 26px;border-radius:12px;
  border:1px solid transparent;background:var(--grad);color:var(--on-accent);
  transition:transform var(--base) var(--ease),box-shadow var(--base) var(--ease),filter var(--base);}
.btn:hover{transform:translateY(-2px);box-shadow:var(--sh-med);filter:brightness(1.05);color:var(--on-accent);}
.btn:active{transform:translateY(0);transition-duration:var(--fast);}
.btn:focus-visible{outline:2px solid var(--accent-strong);outline-offset:3px;}
.btn-ghost{background:transparent;color:var(--text);border-color:var(--line-2);}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent-strong);background:rgba(25,194,176,.06);box-shadow:none;}
.btn-sm{padding:10px 16px;font-size:.92rem;border-radius:10px;}
.btn-lg{padding:17px 32px;font-size:1.06rem;}
.btn-block{width:100%;}
.btn-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center;}
.btn-row.center{justify-content:center;}
.subnote{font-size:.92rem;color:var(--text-faint);margin-top:14px;}

/* Header / nav */
.site-header{position:sticky;top:0;z-index:100;backdrop-filter:blur(12px);
  background:rgba(9,16,22,.55);border-bottom:1px solid transparent;transition:background var(--base),border-color var(--base);}
.site-header.scrolled{background:rgba(9,16,22,.9);border-bottom-color:var(--line);}
.nav{display:flex;align-items:center;justify-content:space-between;height:72px;}
.brand{display:flex;align-items:center;gap:11px;color:var(--text-strong);font-weight:700;}
.brand:hover{color:var(--text-strong);}
.brand-mark{width:26px;height:26px;border-radius:8px;background:var(--grad);position:relative;flex:none;box-shadow:0 4px 16px rgba(25,194,176,.35);}
.brand-mark::after{content:"";position:absolute;left:7px;bottom:6px;width:3px;height:7px;background:var(--bg-0);border-radius:2px;box-shadow:5px -3px 0 var(--bg-0),10px -8px 0 var(--bg-0);}
.brand-name{font-family:'Fraunces',serif;font-size:1.18rem;font-weight:600;}
.nav-links{display:flex;align-items:center;gap:24px;}
.nav-links a{color:var(--text-muted);font-size:.95rem;font-weight:500;position:relative;
  background:linear-gradient(var(--accent),var(--accent)) no-repeat 0 100%/0% 1.5px;transition:background-size var(--base) var(--ease),color var(--base);}
.nav-links a:hover,.nav-links a[aria-current]{color:var(--text-strong);background-size:100% 1.5px;}
.nav-links .btn{color:var(--on-accent);background:var(--grad);}
.nav-links .btn:hover{background-size:0;}
.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px;}
.nav-toggle span{width:24px;height:2px;background:var(--text);border-radius:2px;transition:.2s;}

/* Hero */
.hero{position:relative;padding:var(--s16) 0 var(--s12);overflow:hidden;}
.hero .container{position:relative;z-index:2;}
.hero h1{font-size:var(--fs-display);font-weight:600;letter-spacing:-.025em;line-height:1.04;max-width:17ch;}
.hero .lead{max-width:58ch;margin-top:.4em;}
.hero .btn-row{margin-top:var(--s4);}
.hero-glow{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(680px 380px at 75% 0%,rgba(25,194,176,.12),transparent 62%);}
/* Signature canvas signal */
#signal{display:block;width:100%;height:140px;margin-top:var(--s6);opacity:.9;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);}
@media (prefers-reduced-motion:reduce){#signal{height:90px;}}

/* Cards & grids */
.grid{display:grid;gap:22px;}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
.card{position:relative;background:var(--bg-1);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px 24px;box-shadow:var(--sh-low);transition:transform var(--slow) var(--ease),border-color var(--slow);}
.card::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:var(--sh-med);opacity:0;transition:opacity var(--slow) ease;pointer-events:none;}
.card:hover{transform:translateY(-4px);border-color:var(--line-2);}
.card:hover::after{opacity:1;}
a.card:hover{color:inherit;}
.card h3{font-family:'Inter',sans-serif;font-weight:700;font-size:1.12rem;color:var(--text-strong);}
.card p{color:var(--text-muted);font-size:.98rem;margin:0;}
.card .ic{font-size:1.5rem;margin-bottom:12px;display:block;color:var(--accent-strong);}
.card-accent{border-top:2px solid var(--accent);}

/* SIGNAL stages */
.signal-row{display:flex;flex-direction:column;gap:14px;}
.signal{display:grid;grid-template-columns:64px 1fr;gap:20px;align-items:start;
  background:var(--bg-1);border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px;
  transition:border-color var(--slow),transform var(--slow) var(--ease);}
.signal:hover{border-color:var(--accent);transform:translateX(4px);}
.signal .letter{font-family:'Fraunces',serif;font-size:2.4rem;font-weight:600;line-height:1;
  background:var(--grad-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.signal h3{margin-bottom:4px;font-family:'Inter',sans-serif;font-size:1.06rem;font-weight:700;}
.signal p{margin:0;color:var(--text-muted);font-size:.96rem;}

/* Lists */
.list-plain{list-style:none;padding:0;margin:0;display:grid;gap:12px;}
.list-plain li{padding-left:30px;position:relative;}
.list-plain li::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 0 4px var(--accent-tint);}
.quote-list{list-style:none;padding:0;margin:0;display:grid;gap:14px;}
.quote-list li{border-left:2px solid var(--line-2);padding:4px 0 4px 18px;color:var(--text-muted);font-style:italic;}

/* Split / editorial asymmetry */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;}
.split.rev{direction:rtl;}.split.rev>*{direction:ltr;}

/* Stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;text-align:center;}
.stat .n{font-family:'Fraunces',serif;font-size:2.2rem;color:var(--text-strong);font-variant-numeric:lining-nums tabular-nums;}
.stat .l{font-size:.86rem;color:var(--text-faint);letter-spacing:.04em;}

/* Compare table */
.compare{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;}
.compare th,.compare td{padding:15px 18px;text-align:left;border-bottom:1px solid var(--line);font-size:.98rem;}
.compare thead th{background:var(--bg-2);font-family:'Inter',sans-serif;color:var(--text-strong);}
.compare td:first-child{color:var(--text-muted);}
.compare tr:last-child td{border-bottom:0;}

/* CTA band */
.cta-band{position:relative;background:var(--bg-1);border:1px solid var(--line-2);border-radius:24px;
  padding:clamp(34px,5vw,60px);text-align:center;overflow:hidden;}
.cta-band::before{content:"";position:absolute;inset:0;background:radial-gradient(600px 240px at 50% 0%,rgba(25,194,176,.10),transparent 70%);pointer-events:none;}
.cta-band>*{position:relative;}
.cta-band h2{margin-bottom:.3em;}

/* Forms */
.form{display:grid;gap:14px;max-width:480px;}
.form.inline{grid-template-columns:1fr auto;align-items:start;}
.field{width:100%;padding:14px 16px;border-radius:12px;border:1px solid var(--line-2);
  background:var(--bg-0);color:var(--text);font-size:1rem;font-family:inherit;transition:border-color var(--base),box-shadow var(--base);}
.field:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(25,194,176,.15);}
textarea.field{min-height:140px;resize:vertical;}
select.field{appearance:none;}
label{font-size:.9rem;color:var(--text-muted);font-weight:500;display:block;}
.form-note{font-size:.95rem;margin:6px 0 0;}
.form-note.ok{color:var(--accent-strong);}
.form-note.err{color:#fca5a5;}
.fineprint{font-size:.84rem;color:var(--text-faint);}

/* Pills */
.pill{display:inline-block;font-size:.78rem;font-weight:600;letter-spacing:.04em;padding:5px 12px;border-radius:20px;
  background:var(--accent-tint);color:var(--accent-strong);border:1px solid var(--accent-muted);}
.pill.gold{background:rgba(94,234,212,.1);color:var(--accent-strong);border-color:var(--accent-muted);}

/* Prose */
.prose{max-width:680px;}
.prose blockquote{border-left:2px solid var(--accent);margin:1.4em 0;padding:.2em 0 .2em 20px;color:var(--text-muted);font-style:italic;font-size:1.12rem;font-family:'Fraunces',serif;}

/* FAQ details */
details{border-bottom:1px solid var(--line);padding:6px 0;}
details summary{cursor:pointer;padding:14px 0;font-weight:600;color:var(--text-strong);list-style:none;display:flex;justify-content:space-between;gap:12px;}
details summary::after{content:"+";color:var(--accent-strong);font-size:1.3rem;line-height:1;transition:transform var(--base);}
details[open] summary::after{transform:rotate(45deg);}
details p{padding:0 0 14px;color:var(--text-muted);}

/* Footer */
.site-footer{border-top:1px solid var(--line);margin-top:var(--s8);padding:var(--s8) 0 var(--s4);background:var(--bg-1);}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:34px;}
.footer-tag{color:var(--text-faint);font-size:.92rem;margin-top:14px;}
.footer-col h4{color:var(--text-strong);margin-bottom:14px;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;}
.footer-col a{display:block;color:var(--text-muted);font-size:.95rem;margin-bottom:9px;}
.footer-col a:hover{color:var(--accent-strong);}
.footer-cta p{color:var(--text-muted);font-size:.92rem;}
.footer-base{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:var(--s6);padding-top:22px;border-top:1px solid var(--line);}
.footer-base p{color:var(--text-faint);font-size:.86rem;margin:0;}

/* Reveal on scroll */
[data-reveal]{opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease),transform .7s var(--ease);}
[data-reveal].in{opacity:1;transform:none;}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;}
  [data-reveal]{opacity:1;transform:none;}
  html{scroll-behavior:auto;}
}

/* Responsive */
@media (max-width:900px){
  .grid-3,.grid-4{grid-template-columns:repeat(2,1fr);}
  .split{grid-template-columns:1fr;gap:34px;}.split.rev{direction:ltr;}
  .stats{grid-template-columns:repeat(2,1fr);}
  .footer-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:720px){
  .nav-toggle{display:flex;}
  .nav-links{position:fixed;inset:72px 0 auto 0;flex-direction:column;align-items:stretch;gap:0;
    background:rgba(9,16,22,.98);border-bottom:1px solid var(--line);padding:8px 24px 22px;
    transform:translateY(-12px);opacity:0;pointer-events:none;transition:.22s var(--ease);}
  .nav-links.open{transform:none;opacity:1;pointer-events:auto;}
  .nav-links a{padding:14px 4px;border-bottom:1px solid var(--line);font-size:1.02rem;}
  .nav-links .btn{margin-top:12px;border-bottom:0;}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr;}
  .form.inline{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;gap:26px;}
  body{font-size:16px;}
}