@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700;800&display=swap');

/* ============================================================================
   apple-system.css — Atlas Metabolic "Apple-Grade" UI layer
   Loads AFTER atlas.css. Additive only: it refines the existing design language
   rather than replacing it.

   WHY A LAYER AND NOT A REPLACEMENT
   The Antigravity prototype is dark obsidian glassmorphism. The live site is
   light editorial. Converting only the five flagship pages would give the site
   two different identities depending on which page you land on — the header,
   the type, and the background would all change mid-click. So the split is:

     GLOBAL   (every page)  typography, tracking, the glass pill header,
                            focus rings, micro-interactions, button physics.
     OPT-IN   (any page)    .apple-dark sections, .bento-wrap grids, .glass
                            panels, .hero-apple, .metric-large.

   That gives Apple-grade polish sitewide and the obsidian/bento drama on the
   money pages, with one coherent site.

   Design tokens trace to _staging/ANTIGRAVITY/THE_ATLAS_APPLE_UI_FLAGSHIP_PROTOTYPE.html
   and ATLAS_TWO_BRAND_APPLE_UI_MASTER_PLAN.md.
   ========================================================================== */

:root{
  /* Apple layer tokens — namespaced so they can never collide with atlas.css */
  --ap-font: 'Plus Jakarta Sans','Inter',-apple-system,BlinkMacSystemFont,'SF Pro Display',system-ui,sans-serif;
  --ap-obsidian:#030712;
  --ap-panel:rgba(17,24,39,.7);
  --ap-panel-light:rgba(255,255,255,.65);
  --ap-border:rgba(255,255,255,.1);
  --ap-border-light:rgba(21,19,15,.1);
  --ap-text:#f9fafb;
  --ap-sub:#9ca3af;
  --ap-blue:#38bdf8;
  --ap-green:#34d399;
  --ap-glow:rgba(208,170,61,.25);
  --ap-radius:20px;
  --ap-ease:cubic-bezier(.16,1,.3,1);
}

/* ---------------------------------------------------------------- GLOBAL
   Typography. Bebas Neue stays on display headings — it is the brand's voice
   and the prototype's generic sans would flatten it. What changes is the body
   face and the tracking, which is where the "Apple" read actually comes from. */
body{
  font-family:var(--ap-font);
  letter-spacing:-.011em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
h1,h2,h3,h4{letter-spacing:-.03em}
.display,.sec-title,.hero h1,.card h3,.step h3,.fit-side h3{
  letter-spacing:1px; /* Bebas needs positive tracking — do not inherit -.03em */
}
p{letter-spacing:-.008em}

/* ------------------------------------------------------------ GLASS HEADER
   The prototype floats a detached pill at top:16px. Doing that here would
   break `main{padding-top:var(--header)}` on all 46 pages, so instead the
   fixed 76px bar is kept and .hdr-in becomes the pill inside it. Same
   geometry, same scroll behaviour, pill aesthetic. */
.hdr{
  background:rgba(3,7,18,.62);
  backdrop-filter:blur(24px) saturate(160%);
  -webkit-backdrop-filter:blur(24px) saturate(160%);
  border-bottom:1px solid rgba(208,170,61,.16);
}
@media(min-width:1101px){
  .hdr-in{
    background:rgba(15,23,42,.75);
    backdrop-filter:blur(24px);
    -webkit-backdrop-filter:blur(24px);
    border:1px solid var(--ap-border);
    border-radius:99px;
    height:56px;
    padding:0 10px 0 22px;
    margin-top:10px;
    box-shadow:0 20px 40px rgba(0,0,0,.45);
  }
  .nav a{
    border-radius:99px;
    transition:color .2s var(--ap-ease),background .2s var(--ap-ease);
  }
  .nav a[aria-current="page"]{
    box-shadow:none;
    background:rgba(255,255,255,.08);
    color:#fff;
  }
  .nav .nav-cta{
    border-radius:99px;
    background:#fff;
    color:#000;
    box-shadow:0 4px 14px rgba(255,255,255,.18);
    transition:transform .2s var(--ap-ease),box-shadow .2s var(--ap-ease);
  }
  .nav .nav-cta:hover{
    background:#fff;
    color:#000;
    transform:scale(1.03);
    box-shadow:0 6px 20px rgba(255,255,255,.3);
  }
  /* the wordmark sits tighter inside a 56px pill than a 76px bar */
  .wm-main{font-size:32px}
  .wm-sub{margin-top:5px;letter-spacing:3.4px}
}
.menu-btn{border-radius:12px;transition:border-color .2s var(--ap-ease)}
.menu-btn:hover{border-color:var(--gold)}

/* --------------------------------------------------------- MICROINTERACTION
   Every interactive surface gets the same 0.3s cubic-bezier physics so the
   site feels like one object rather than a stack of separately-styled pages. */
.card,.step,.btn,.btn-gold,.btn-ghost,.faq-q{
  transition:transform .3s var(--ap-ease),box-shadow .3s var(--ap-ease),
             border-color .3s var(--ap-ease),background .2s var(--ap-ease);
}
.card:hover,.step:hover{
  transform:translateY(-4px);
  box-shadow:0 20px 40px -18px rgba(21,19,15,.28);
}
.btn:hover,.btn-gold:hover{transform:translateY(-1px)}
.btn:active,.btn-gold:active{transform:translateY(0)}

/* Focus visibility — the prototype omits it; shipping without it would make
   the site unusable by keyboard, so the Apple layer supplies it. */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
  border-radius:4px;
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
  .card:hover,.step:hover,.bento-card:hover{transform:none}
}

/* ============================================================== OPT-IN LAYER
   Nothing below applies unless a page uses the class.
   ========================================================================= */

/* ------------------------------------------------------------- DARK SECTION
   Wrap a <section> in .apple-dark to get the obsidian glass environment.
   Ambient glow is drawn on ::before so it needs no extra markup. */
.apple-dark{
  position:relative;
  background:var(--ap-obsidian);
  color:var(--ap-text);
  overflow:hidden;
  isolation:isolate;
}
.apple-dark::before{
  content:'';
  position:absolute;
  top:-260px;
  left:50%;
  width:1000px;
  height:620px;
  transform:translateX(-50%);
  background:radial-gradient(circle,rgba(208,170,61,.15) 0%,rgba(56,189,248,.05) 50%,transparent 70%);
  filter:blur(100px);
  pointer-events:none;
  z-index:-1;
}
.apple-dark p{color:var(--ap-sub)}
.apple-dark h1,.apple-dark h2,.apple-dark h3,.apple-dark h4{color:#fff}
.apple-dark a:not(.btn):not(.btn-apple):not(.nav-cta){color:var(--gold)}
.apple-dark .sec-num{-webkit-text-stroke-color:var(--gold)}

/* ------------------------------------------------------------------- HERO */
.hero-apple{
  max-width:1000px;
  margin:0 auto;
  padding:96px 20px 64px;
  text-align:center;
  position:relative;
  z-index:1;
}
.hero-apple h1{
  font-family:var(--ap-font);
  font-size:clamp(44px,7vw,84px);
  font-weight:800;
  line-height:1.05;
  letter-spacing:-.04em;
  margin-bottom:24px;
  background:linear-gradient(180deg,#fff 0%,#94a3b8 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  /* fallback for engines without background-clip:text */
  color:#fff;
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .hero-apple h1{background:none;-webkit-text-fill-color:#fff;color:#fff}
}
.hero-apple > p{
  font-size:clamp(17px,2.5vw,22px);
  color:var(--ap-sub);
  max-width:760px;
  margin:0 auto 36px;
  font-weight:400;
  line-height:1.55;
  letter-spacing:-.015em;
}

/* -------------------------------------------------------------- PILL BADGE */
.eyebrow-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:rgba(208,170,61,.12);
  border:1px solid rgba(208,170,61,.3);
  color:var(--gold);
  font-family:var(--ap-font);
  font-size:12px;
  font-weight:700;
  letter-spacing:.02em;
  padding:6px 16px;
  border-radius:99px;
  margin-bottom:24px;
}
.eyebrow-pill::before{
  content:'';
  width:6px;height:6px;
  border-radius:50%;
  background:var(--ap-green);
  box-shadow:0 0 0 3px rgba(52,211,153,.18);
}
.eyebrow-pill.is-plain::before{display:none}

/* ------------------------------------------------------------ BENTO GRID
   Asymmetric 3-column. .bento-span-2 / .bento-span-3 widen a card;
   .bento-tall doubles its row. Collapses to one column at 850px. */
.bento-wrap{
  max-width:1100px;
  margin:0 auto;
  padding:0 20px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  position:relative;
  z-index:1;
}
.bento-span-2{grid-column:span 2}
.bento-span-3{grid-column:span 3}
.bento-tall{grid-row:span 2}
@media(max-width:850px){
  .bento-wrap{grid-template-columns:1fr}
  .bento-span-2,.bento-span-3{grid-column:span 1}
  .bento-tall{grid-row:span 1}
}

.bento-card{
  background:var(--ap-panel);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  border:1px solid var(--ap-border);
  border-radius:var(--ap-radius);
  padding:32px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  transition:transform .3s var(--ap-ease),border-color .3s var(--ap-ease),box-shadow .3s var(--ap-ease);
}
.bento-card:hover{
  border-color:rgba(208,170,61,.4);
  transform:translateY(-4px);
  box-shadow:0 20px 40px -15px var(--ap-glow);
}
.bento-tag{
  font-family:var(--ap-font);
  font-size:11px;
  font-weight:800;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:12px;
}
.bento-card h3{
  font-family:var(--ap-font);
  font-size:clamp(21px,2.4vw,26px);
  font-weight:700;
  letter-spacing:-.03em;
  color:#fff;
  margin-bottom:12px;
  line-height:1.2;
}
.bento-card p{
  font-size:14.5px;
  color:var(--ap-sub);
  line-height:1.65;
  margin-bottom:24px;
}
.bento-card p:last-child{margin-bottom:0}
.bento-card ul{list-style:none;margin:0 0 20px}
.bento-card li{
  font-size:14px;
  color:var(--ap-sub);
  line-height:1.6;
  padding-left:20px;
  position:relative;
  margin-bottom:9px;
}
.bento-card li::before{
  content:'';
  position:absolute;
  left:0;top:9px;
  width:6px;height:6px;
  border-radius:50%;
  background:var(--gold);
}

/* On a light (non-.apple-dark) section the same grid renders as light glass. */
:not(.apple-dark) > .bento-wrap .bento-card,
.bento-wrap.is-light .bento-card{
  background:var(--ap-panel-light);
  border-color:var(--ap-border-light);
  box-shadow:0 1px 2px rgba(21,19,15,.04);
}
:not(.apple-dark) > .bento-wrap .bento-card h3,
.bento-wrap.is-light .bento-card h3{color:var(--ink)}
:not(.apple-dark) > .bento-wrap .bento-card p,
:not(.apple-dark) > .bento-wrap .bento-card li,
.bento-wrap.is-light .bento-card p,
.bento-wrap.is-light .bento-card li{color:#4b463e}
:not(.apple-dark) > .bento-wrap .bento-tag,
.bento-wrap.is-light .bento-tag{color:var(--gold-deep)}
:not(.apple-dark) > .bento-wrap .metric-large,
.bento-wrap.is-light .metric-large{color:var(--ink)}

/* ----------------------------------------------------------------- METRIC */
.metric-large{
  font-family:var(--ap-font);
  font-size:clamp(38px,5vw,56px);
  font-weight:800;
  letter-spacing:-.04em;
  color:#fff;
  line-height:1;
}
.metric-label{
  font-family:var(--ap-font);
  font-size:13px;
  color:var(--gold);
  font-weight:700;
  margin-top:6px;
  letter-spacing:.01em;
}

/* ------------------------------------------------------------ GLASS PANEL */
.glass{
  background:var(--ap-panel);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  border:1px solid var(--ap-border);
  border-radius:var(--ap-radius);
  padding:32px;
}
.glass.is-light{
  background:var(--ap-panel-light);
  border-color:var(--ap-border-light);
  color:var(--ink);
}

/* ---------------------------------------------------------- APPLE BUTTONS */
.btn-apple{
  display:inline-block;
  background:#fff;
  color:#000;
  font-family:var(--ap-font);
  font-weight:700;
  font-size:14px;
  letter-spacing:-.01em;
  padding:13px 26px;
  border-radius:99px;
  text-decoration:none;
  border:none;
  cursor:pointer;
  transition:transform .2s var(--ap-ease),box-shadow .2s var(--ap-ease);
  box-shadow:0 4px 14px rgba(255,255,255,.2);
}
.btn-apple:hover{transform:scale(1.03);box-shadow:0 6px 20px rgba(255,255,255,.3)}
.btn-apple:active{transform:scale(.99)}
.btn-apple-ghost{
  display:inline-block;
  background:transparent;
  color:#fff;
  font-family:var(--ap-font);
  font-weight:600;
  font-size:14px;
  padding:13px 26px;
  border:1px solid var(--ap-border);
  border-radius:99px;
  transition:background .2s var(--ap-ease),border-color .2s var(--ap-ease);
}
.btn-apple-ghost:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.28)}
.btn-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ------------------------------------------------------------- SPACING */
.ap-sec{padding:88px 0;position:relative}
.ap-sec-s{padding:56px 0;position:relative}
.ap-head{max-width:820px;margin:0 auto 48px;padding:0 20px;text-align:center}
.ap-head h2{
  font-family:var(--ap-font);
  font-size:clamp(30px,4.4vw,48px);
  font-weight:800;
  letter-spacing:-.035em;
  line-height:1.1;
  margin-bottom:14px;
}
.ap-head p{font-size:17px;color:var(--ap-sub);line-height:1.6}
:not(.apple-dark) > .ap-head p,.ap-head.is-light p{color:var(--muted)}

/* Prevent the glass layers from ever creating a horizontal scrollbar —
   backdrop-filter + translate on hover has caused that on narrow viewports. */
.bento-wrap,.apple-dark,.hero-apple{max-width:100%}

/* ------------------------------------------------- PRE-<main> HEADER CLEARANCE
   atlas.css clears the fixed 76px header with `main{padding-top:var(--header)}`.
   But the .whatwesell compliance band sits BEFORE <main> on 46 pages, so it was
   never covered by that rule: its first line rendered underneath the header and
   was clipped, while main's padding left a dead gap below it.

   The band takes over the clearing, and main stops padding when the band is
   present. Pages without the band are untouched and still rely on main.
   Adjacent-sibling matching ignores whitespace and comments, so the pairing
   holds regardless of formatting between the two elements. */
.whatwesell{margin-top:var(--header)}
.whatwesell + main{padding-top:0}