/* Self-hosted so the critical path has no third-party request. */
@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url(/fonts/archivo.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:'Schibsted Grotesk';font-style:normal;font-weight:400 800;font-display:swap;src:url(/fonts/schibsted-grotesk.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}

/* ============================================================
   AUDIA · SITE STYLESHEET
   For the guides, legal, pricing, welcome and reset pages.

   These pages keep their existing words and markup exactly.
   Only the presentation changes, so this file styles the class
   names those pages already use rather than asking them to
   change. Same tokens and same two families as the homepage.
   ============================================================ */

:root{
  color-scheme:dark;
  /* Brand tokens match the desktop app (beat-automation-app/src/index.css). */
  --void:#07070C; --ink:#0E0A1C; --ink-2:#150F2B; --panel:#1B1340;
  --line:rgba(238,235,247,.085); --line-2:rgba(238,235,247,.17); --line-3:rgba(238,235,247,.30);
  /* --bone-3 lifted from #6C6491 (3.7:1) to #8A82AD (5.6:1) for WCAG AA. */
  --bone:#EEEBF7; --bone-2:#A79FC4; --bone-3:#8A82AD;
  --violet:#7C4FF0; --violet-lt:#A78BFA; --violet-hi:#CDB0FF;
  --amber:#FFB43D; --amber-lt:#FFD79A;
  --f-display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --f-body:"Schibsted Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --shell:1280px; --pad:clamp(1.15rem,4.2vw,3.5rem);
  --r-sm:6px; --r-md:12px;
  --nav-h:64px;

  /* ----------------------------------------------------------------------
     Legacy token aliases.

     guides/index.html, reset.html and welcome.html were written against an
     earlier token vocabulary that this stylesheet never defined. Every one of
     those var() lookups was resolving to nothing, which silently broke real
     styling: raised cards rendered with no background, corners lost their
     radius, headings fell back to the body font, and the centred section
     headers on /guides/ lost their auto margins because one undefined value
     invalidates the whole margin shorthand.

     Aliasing them onto the real tokens restores the intended design without
     touching any page markup.
     ---------------------------------------------------------------------- */
  --bg-base:var(--void);
  --bg-elev-1:var(--ink);
  --surface:var(--ink);
  --surface-2:var(--ink-2);
  --border:var(--line);
  --border-strong:var(--line-2);

  --accent:var(--violet);
  --accent-bright:var(--violet-lt);
  --accent-glow:rgba(124,79,240,.35);
  --success:#4ADE80;

  --text-primary:var(--bone);
  --text-secondary:var(--bone-2);
  --text-tertiary:var(--bone-3);
  --faint:var(--bone-3);
  --muted:var(--bone-2);

  --font-display:var(--f-display);
  --font-body:var(--f-body);
  --font-mono:ui-monospace,SFMono-Regular,Menlo,"SF Mono",monospace;

  --radius-sm:var(--r-sm);
  --radius-md:var(--r-md);
  --radius-lg:20px;

  --space-xl:2.4rem;
  --space-2xl:4.5rem;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  scroll-behavior:smooth;
  /* Keeps anchor targets clear of the sticky nav. */
  scroll-padding-top:calc(var(--nav-h) + 12px);
}
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  font-family:var(--f-body); font-size:16px; line-height:1.65;
  color:var(--bone); background:var(--void);
  overflow-x:hidden; font-variant-numeric:tabular-nums;
}
img,svg,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
::selection{ background:var(--amber); color:var(--void); }
:focus-visible{ outline:2px solid var(--amber); outline-offset:3px; border-radius:3px; }

/* Skip link: hidden until focused, so keyboard users can bypass the nav. */
.skip-link{
  position:absolute; left:.75rem; top:-4rem; z-index:200;
  padding:.7rem 1.1rem; border-radius:var(--r-sm);
  background:var(--violet); color:#fff;
  font-family:var(--f-display); font-variation-settings:"wdth" 94,"wght" 660;
  font-size:.8rem; letter-spacing:.06em;
  transition:top .18s ease;
}
.skip-link:focus{ top:.75rem; }

/* Visible to screen readers only. Used for headings that the layout does not
   show but the document outline needs. */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}
@media (prefers-reduced-motion:reduce){ .skip-link{ transition:none; } }

.container{ width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--pad); }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:sticky; top:0; z-index:90; padding-block:.9rem;
  background:rgba(7,7,12,.78); border-bottom:1px solid var(--line);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
}
.nav-inner{
  width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--pad);
  display:flex; align-items:center; gap:1.6rem;
}
.brand{ display:flex; align-items:center; flex-shrink:0; }
.brand-logo{ height:30px; width:auto; }
.nav-links{ display:flex; gap:1.6rem; margin-left:auto; }
.nav-links a{
  font-family:var(--f-display); font-variation-settings:"wdth" 94,"wght" 640;
  font-size:.68rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--bone-2); position:relative; padding-block:.3rem; transition:color .2s;
}
.nav-links a::after{
  content:""; position:absolute; inset:auto 0 0 0; height:1px; background:var(--amber);
  transform:scaleX(0); transform-origin:left; transition:transform .25s cubic-bezier(.2,.8,.2,1);
}
.nav-links a:hover{ color:var(--bone); }
.nav-links a:hover::after{ transform:scaleX(1); }
@media (max-width:860px){ .nav-links{ display:none; } }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--f-display); font-variation-settings:"wdth" 98,"wght" 700;
  font-size:.735rem; letter-spacing:.10em; text-transform:uppercase; line-height:1;
  padding:1rem 1.5rem; border-radius:var(--r-sm); white-space:nowrap;
  transition:transform .18s cubic-bezier(.2,.8,.2,1), background .18s, box-shadow .18s, color .18s;
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }
.btn-primary{ background:var(--bone); color:var(--void); box-shadow:0 8px 30px -12px rgba(238,235,247,.5); }
.btn-primary:hover{ background:var(--amber); color:var(--void); }
.btn-secondary{ color:var(--bone); background:rgba(238,235,247,.03); box-shadow:inset 0 0 0 1px var(--line-2); }
.btn-secondary:hover{ box-shadow:inset 0 0 0 1px var(--line-3); background:rgba(238,235,247,.07); }
.btn-lg{ padding:1.1rem 1.8rem; font-size:.78rem; }

/* ============================================================
   TYPE
   ============================================================ */
h1,h2,h3,h4,h5{
  font-family:var(--f-display); letter-spacing:-.022em;
  text-wrap:balance; line-height:1.06;
}
h1{ font-variation-settings:"wdth" 112,"wght" 790; font-size:clamp(2.1rem,5vw,3.7rem);
    text-transform:uppercase; line-height:.96; }
h2{ font-variation-settings:"wdth" 106,"wght" 750; font-size:clamp(1.45rem,2.9vw,2.15rem); }
h3{ font-variation-settings:"wdth" 104,"wght" 720; font-size:clamp(1.12rem,1.9vw,1.36rem); }
h4{ font-variation-settings:"wdth" 102,"wght" 700; font-size:1.02rem; }
h5{ font-variation-settings:"wdth" 92,"wght" 660; font-size:.66rem;
    letter-spacing:.16em; text-transform:uppercase; color:var(--bone-3); }

/* Footer column headings. They are h2 so the document outline has no level
   skip, but they keep the small-caps look the old h5 had. */
.footer-h{ font-variation-settings:"wdth" 92,"wght" 660; font-size:.66rem;
    letter-spacing:.16em; text-transform:uppercase; color:var(--bone-3); }

p{ text-wrap:pretty; }
strong{ color:var(--bone); font-weight:600; }
em{ font-style:italic; }

/* the old violet serif italic, restyled: emphasis by weight, not a second face */
.italic-emphasis{
  font-style:normal; font-family:var(--f-display);
  font-variation-settings:"wdth" 68,"wght" 800;
  letter-spacing:.004em; color:inherit;
}

.eyebrow{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--f-display); font-variation-settings:"wdth" 92,"wght" 660;
  font-size:.665rem; letter-spacing:.17em; text-transform:uppercase;
  color:var(--amber); margin-bottom:1.2rem;
}
.eyebrow::before{ content:""; width:22px; height:1px; background:var(--amber); flex-shrink:0; }

.lead,.hero-deck{ font-size:clamp(1.02rem,1.35vw,1.16rem); line-height:1.62; color:var(--bone-2); max-width:60ch; }

/* .section-header is only ever used centred. Its children are width-constrained
   (.lead is 60ch), so without auto margins the paragraph sits flush left under
   a centred heading — which is exactly how /guides/ was rendering. */
.section-header .lead,
.section-header .hero-deck{ margin-inline:auto; }
.sub{ color:var(--bone-2); }
.display-lg{ font-size:clamp(1.9rem,4.4vw,3.1rem); text-transform:uppercase;
             font-variation-settings:"wdth" 110,"wght" 780; }
.display-xl{ font-size:clamp(2.3rem,5.9vw,4.6rem); text-transform:uppercase;
             font-variation-settings:"wdth" 112,"wght" 800; line-height:.94; }

main{ display:block; }
main > .container{ padding-block:clamp(2.5rem,6vw,4.5rem); }
section{ padding-block:clamp(2.5rem,6vw,4.5rem); }
.section-header{ margin-bottom:2.4rem; }
.tight{ padding-block:0; }

/* ============================================================
   ARTICLE BODY  (legal pages and guides)
   ============================================================ */
.legal,article{ max-width:74ch; }
.legal h1,article h1{ margin-bottom:1.4rem; }
.legal h2,article h2{ margin:2.6rem 0 .85rem; padding-top:1.6rem; border-top:1px solid var(--line); }
.legal h3,article h3{ margin:1.8rem 0 .6rem; color:var(--bone); }
.legal h4,article h4{ margin:1.4rem 0 .5rem; }
.legal p,article p{ margin-bottom:1rem; color:var(--bone-2); }
.legal ul,.legal ol,article ul,article ol{ margin:0 0 1.2rem 1.2rem; color:var(--bone-2); }
.legal li,article li{ margin-bottom:.5rem; }
.legal a,article a{ color:var(--amber); text-decoration:underline; text-underline-offset:3px; }
.legal a:hover,article a:hover{ color:var(--amber-lt); }
.legal-meta{
  font-family:var(--f-display); font-variation-settings:"wdth" 92,"wght" 640;
  font-size:.64rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--bone-3); margin-bottom:1rem;
}
code{
  font-family:var(--f-body); font-weight:600; font-size:.92em;
  background:rgba(124,58,237,.2); color:var(--violet-hi);
  padding:.1em .38em; border-radius:4px;
}

.callout{
  margin:1.8rem 0; padding:1.15rem 1.3rem;
  border:1px solid var(--line); border-left:2px solid var(--amber);
  border-radius:var(--r-sm); background:rgba(238,235,247,.025);
}
.callout p:last-child{ margin-bottom:0; }

.next{
  display:block; margin-top:2.4rem; padding:1.15rem 1.3rem;
  border:1px solid var(--line-2); border-radius:var(--r-md);
  background:rgba(238,235,247,.03); transition:background .2s, border-color .2s;
}
.next:hover{ background:rgba(238,235,247,.06); border-color:var(--line-3); }

/* ============================================================
   FEATURES / STEPS / STATS
   ============================================================ */
.features-grid,.features-grid-wide{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(268px,1fr));
  gap:1px; background:var(--line); border:1px solid var(--line);
  border-radius:var(--r-md); overflow:hidden;
}
.feature{ background:var(--void); padding:clamp(1.3rem,2.4vw,1.8rem); transition:background .3s; }
.feature:hover{ background:var(--ink-2); }
.feature h3{ margin-bottom:.5rem; }
.feature p{ color:var(--bone-2); font-size:.93rem; }
.feature-icon{ width:22px; height:22px; color:var(--violet-lt); margin-bottom:.9rem; }

.steps{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1.5rem; }
.step{ padding:1.3rem; border:1px solid var(--line); border-radius:var(--r-md); background:rgba(238,235,247,.02); }
.step-num{
  display:inline-grid; place-items:center; width:1.9rem; height:1.9rem; margin-bottom:.9rem;
  font-family:var(--f-display); font-variation-settings:"wdth" 96,"wght" 700; font-size:.7rem;
  background:var(--violet); color:var(--bone); border-radius:4px;
}

.stats-strip{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:1px;
  background:var(--line); border-block:1px solid var(--line); }
.stat{ background:var(--void); padding:1.4rem 1.2rem; text-align:center; }
.stat-num{ font-family:var(--f-display); font-variation-settings:"wdth" 108,"wght" 800;
  font-size:clamp(1.7rem,3.4vw,2.5rem); line-height:1; display:block; }
.stat-num .unit{ font-size:.5em; color:var(--bone-3); margin-left:.2em; }
.stat-label{ display:block; margin-top:.45rem; font-family:var(--f-display);
  font-variation-settings:"wdth" 92,"wght" 620; font-size:.62rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--bone-3); }

/* ============================================================
   ROADMAP
   ============================================================ */
.roadmap-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1rem; }
.roadmap-item{ padding:clamp(1.2rem,2.4vw,1.7rem); border:1px solid var(--line);
  border-radius:var(--r-md); background:rgba(238,235,247,.02); }
.roadmap-pill{
  display:inline-block; margin-bottom:.85rem;
  font-family:var(--f-display); font-variation-settings:"wdth" 92,"wght" 660;
  font-size:.575rem; letter-spacing:.14em; text-transform:uppercase;
  padding:.24rem .5rem; border-radius:3px; color:var(--bone-3);
  box-shadow:inset 0 0 0 1px var(--line-2);
}

/* ============================================================
   PRICING TIERS
   ============================================================ */
.pricing-hero{ text-align:center; padding-block:clamp(2.5rem,6vw,4rem); }
.billing-toggle{ display:inline-flex; gap:2px; padding:3px; border-radius:999px;
  box-shadow:inset 0 0 0 1px var(--line-2); margin-top:1.6rem; }
.billing-toggle button{
  font-family:var(--f-display); font-variation-settings:"wdth" 94,"wght" 660;
  font-size:.68rem; letter-spacing:.115em; text-transform:uppercase;
  padding:.55rem 1rem; border-radius:999px; color:var(--bone-2); transition:.22s;
}
.billing-toggle button.active{ background:var(--bone); color:var(--void); }
.save-badge{ color:var(--amber); font-size:.75em; margin-left:.4em; }

.tiers{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
@media (max-width:900px){ .tiers{ grid-template-columns:1fr; } }
.tier{
  position:relative; display:flex; flex-direction:column;
  padding:clamp(1.5rem,3vw,2.1rem); border:1px solid var(--line);
  border-radius:var(--r-md);
  background:linear-gradient(175deg,rgba(238,235,247,.04),rgba(238,235,247,.008));
}
.tier-featured{
  border-color:rgba(169,123,255,.42);
  background:linear-gradient(175deg,rgba(124,58,237,.16),rgba(124,58,237,.03));
  box-shadow:0 30px 70px -40px rgba(124,58,237,.9);
}
.tier-name{ font-family:var(--f-display); font-variation-settings:"wdth" 110,"wght" 740;
  font-size:1.02rem; text-transform:uppercase; letter-spacing:.02em; margin-bottom:.5rem; }
.tier-description{ color:var(--bone-2); font-size:.92rem; margin-bottom:1.2rem; }
.tier-price{ display:flex; align-items:baseline; gap:.35rem; }
.tier-price-amount{ font-family:var(--f-display); font-variation-settings:"wdth" 108,"wght" 800;
  font-size:clamp(2.4rem,4.6vw,3.2rem); letter-spacing:-.035em; line-height:1; }
.tier-price-unit{ font-family:var(--f-display); font-variation-settings:"wdth" 92,"wght" 620;
  font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--bone-3); }
.tier-price-save{ display:block; margin:.5rem 0 1.4rem; font-family:var(--f-display);
  font-variation-settings:"wdth" 92,"wght" 640; font-size:.62rem;
  letter-spacing:.13em; text-transform:uppercase; color:var(--amber); }
.tier-features{ list-style:none; display:flex; flex-direction:column; gap:.6rem;
  margin:0 0 1.8rem; padding:0; }
.tier-features li{ font-size:.9rem; color:var(--bone-2); padding-left:1.4rem; position:relative; }
.tier-features li::before{ content:"+"; position:absolute; left:0; color:var(--violet-lt); font-weight:700; }
.tier .btn{ margin-top:auto; width:100%; }

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.testimonials,.testimonials-two{ display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1rem; }
.testimonial{ padding:1.5rem; border:1px solid var(--line); border-radius:var(--r-md);
  background:rgba(238,235,247,.02); }
.testimonial-quote{ color:var(--bone); margin-bottom:1.1rem; }
.testimonial-author{ display:flex; align-items:center; gap:.7rem; }
.testimonial-avatar{ width:34px; height:34px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(140deg,var(--violet-lt),var(--violet)); display:grid;
  place-items:center; font-weight:700; font-size:.85rem; color:var(--bone); }
.testimonial-name{ font-weight:600; font-size:.9rem; display:block; }
.testimonial-handle{ font-size:.8rem; color:var(--bone-3); }

/* ============================================================
   FAQ  (accordion markup is kept, so the existing script works)
   ============================================================ */
.faq{ max-width:74ch; }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-question{
  width:100%; display:flex; align-items:flex-start; justify-content:space-between;
  gap:1.5rem; text-align:left; padding:1.35rem 0;
  font-family:var(--f-display); font-variation-settings:"wdth" 104,"wght" 680;
  font-size:1.02rem; letter-spacing:-.01em; line-height:1.35; transition:color .2s;
}
.faq-question:hover{ color:var(--amber); }
.faq-question .plus{ flex-shrink:0; color:var(--violet-lt); transition:transform .3s; font-weight:400; }
.faq-item.open .faq-question .plus,.faq-item.active .faq-question .plus{ transform:rotate(45deg); }
.faq-answer{ color:var(--bone-2); padding-bottom:1.35rem; }
.faq-answer p{ margin-bottom:.8rem; }
.faq-answer p:last-child{ margin-bottom:0; }

/* ============================================================
   CTA BLOCK
   ============================================================ */
.cta-block{
  text-align:center; padding:clamp(2.5rem,6vw,4.5rem) clamp(1.2rem,4vw,3rem);
  border:1px solid var(--line); border-radius:var(--r-md); margin-block:2.5rem;
  background:
    radial-gradient(70% 100% at 50% 120%,rgba(124,58,237,.30),transparent 62%),
    radial-gradient(50% 80% at 50% 130%,rgba(255,180,61,.16),transparent 60%),
    var(--ink);
}
.cta-block h2{ margin-bottom:.9rem; }
.cta-block p{ color:var(--bone-2); max-width:52ch; margin:0 auto 1.6rem; }

/* ============================================================
   HERO BLOCKS on marketing style legacy pages
   ============================================================ */
.hero{ padding-block:clamp(2.5rem,6vw,4.5rem); }
.hero-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1.8rem,4.5vw,4rem); align-items:center; }
@media (max-width:980px){ .hero-grid{ grid-template-columns:1fr; } }
.hero-cta-row{ display:flex; gap:.65rem; flex-wrap:wrap; margin-top:1.8rem; }
.hero-mockup,.hero-mockup-screen{ border:1px solid var(--line); border-radius:var(--r-md);
  background:var(--ink); padding:1.2rem; }
.mockup-line{ height:8px; border-radius:4px; background:rgba(238,235,247,.09); margin-bottom:.6rem; }
.mockup-bar{ height:4px; border-radius:999px; background:rgba(238,235,247,.09); overflow:hidden; }
.mockup-bar-fill{ height:100%; background:linear-gradient(90deg,var(--violet),var(--violet-lt)); }
.mockup-divider{ height:1px; background:var(--line); margin-block:1rem; }
.mockup-status{ font-family:var(--f-display); font-variation-settings:"wdth" 92,"wght" 640;
  font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--amber); }

/* ============================================================
   RESET PAGE
   ============================================================ */
.reset-main{ display:grid; place-items:center; min-height:70vh; padding:2rem var(--pad); }
.reset-card{ width:100%; max-width:420px; padding:2rem; border:1px solid var(--line);
  border-radius:var(--r-md); background:rgba(238,235,247,.03); }
.reset-card h1{ font-size:clamp(1.6rem,3.4vw,2.1rem); margin-bottom:1.2rem; }
.reset-card label{ display:block; margin-bottom:.4rem; font-family:var(--f-display);
  font-variation-settings:"wdth" 92,"wght" 640; font-size:.62rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--bone-3); }
.reset-card input{
  width:100%; padding:.85rem 1rem; margin-bottom:1rem; font:inherit; color:var(--bone);
  background:rgba(238,235,247,.05); border:1px solid var(--line-2); border-radius:var(--r-sm);
}
.reset-card input:focus{ outline:none; border-color:var(--violet-lt); }
.reset-submit{ width:100%; }
.reset-msg{ margin-top:1rem; font-size:.9rem; color:var(--bone-2); }

/* ============================================================
   FOOTER
   ============================================================ */
footer{ border-top:1px solid var(--line); padding-block:3.5rem 2.5rem; margin-top:2rem; }
.footer-grid{ display:grid; grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));
  gap:2.2rem; margin-bottom:3rem; }
@media (max-width:860px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .footer-grid{ grid-template-columns:1fr; } }
.footer-tagline{ margin-top:1rem; font-size:.88rem; color:var(--bone-3); max-width:34ch; }
.footer-col h5{ margin-bottom:1rem; }
.footer-col a{ display:block; font-size:.9rem; color:var(--bone-2);
  padding-block:.32rem; transition:color .2s; }
.footer-col a:hover{ color:var(--amber); }
.footer-social{ display:flex; flex-direction:column; gap:.55rem; margin-top:1.3rem; }
.footer-social a{ display:inline-flex; align-items:center; gap:.55rem;
  font-size:.87rem; color:var(--bone-2); transition:color .2s; }
.footer-social a:hover{ color:var(--amber); }
.footer-social svg{ width:16px; height:16px; flex-shrink:0; }
.footer-bottom{ display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  padding-top:1.6rem; border-top:1px solid var(--line);
  font-family:var(--f-display); font-variation-settings:"wdth" 92,"wght" 620;
  font-size:.6rem; letter-spacing:.13em; text-transform:uppercase; color:var(--bone-3); }

/* ============================================================
   AUTH MODAL
   Used by pricing.html's checkout flow. It lives outside <main>,
   which is how it was missed on the first pass.
   ============================================================ */
.auth-modal{ position:fixed; inset:0; z-index:200; display:grid; place-items:center; padding:1.2rem; }
.auth-modal[hidden]{ display:none; }
.auth-modal-backdrop{ position:absolute; inset:0; background:rgba(7,7,12,.86);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.auth-modal-card{
  position:relative; width:100%; max-width:430px; padding:2rem;
  border:1px solid var(--line-2); border-radius:var(--r-md);
  background:linear-gradient(170deg,#171034,#0E0A1C);
  box-shadow:0 40px 90px -40px rgba(0,0,0,.95);
}
.auth-modal-close{
  position:absolute; top:.7rem; right:.9rem; font-size:1.5rem; line-height:1;
  color:var(--bone-3); transition:color .2s;
}
.auth-modal-close:hover{ color:var(--bone); }
.auth-modal-title{ font-size:clamp(1.3rem,2.6vw,1.65rem); margin-bottom:.5rem; }
.auth-modal-subtitle{ color:var(--bone-2); font-size:.92rem; margin-bottom:1.5rem; }
.auth-label{ display:block; margin-bottom:.4rem; font-family:var(--f-display);
  font-variation-settings:"wdth" 92,"wght" 640; font-size:.62rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--bone-3); }
.auth-input{
  width:100%; padding:.85rem 1rem; margin-bottom:1.1rem; font:inherit; color:var(--bone);
  background:rgba(238,235,247,.05); border:1px solid var(--line-2); border-radius:var(--r-sm);
}
.auth-input:focus{ outline:none; border-color:var(--violet-lt); background:rgba(238,235,247,.08); }
.auth-submit{ width:100%; margin-top:.3rem; }
.auth-submit:disabled{ opacity:.6; cursor:default; transform:none; }
.auth-switch{ margin-top:1.1rem; text-align:center; font-size:.88rem; color:var(--bone-2); }
.auth-switch a{ color:var(--amber); text-decoration:underline; text-underline-offset:3px; }
.auth-error{
  margin-top:1rem; padding:.8rem 1rem; font-size:.88rem;
  border:1px solid rgba(255,120,120,.35); border-radius:var(--r-sm);
  background:rgba(255,90,90,.10); color:#FFB4B4;
}
.auth-error[hidden]{ display:none; }