/* ============================================================================
   ATLAS METABOLIC — META LAYER v1 (Loop 43, 2026-08-14)
   Loads AFTER atlas.css + apple-system.css on every page. Pure presentation:
   zero copy, zero markup, zero layout-order changes. Idempotent by design —
   remove the <link> and the site falls back to the Apple layer intact.
   Goals: fluid type (clamp), glass surfaces, HSL gold gradients, crisp edge
   highlights, micro-interactions, viewport-fluid rhythm 320px → 4K, and the
   audit fixes: mobile header reading grey over paper; first block hugging the
   fixed header; reveal delay leaving blank canvas; footer/line-height polish.
   ========================================================================== */

:root{
  /* HSL gold system (base #C6A25C ≈ hsl(40 49% 57%)) */
  --mg-h:40; --mg-s:49%;
  --mg-gold:hsl(var(--mg-h) var(--mg-s) 57%);
  --mg-gold-hi:hsl(var(--mg-h) 62% 66%);
  --mg-gold-lo:hsl(var(--mg-h) 44% 40%);
  --mg-gold-grad:linear-gradient(135deg,hsl(var(--mg-h) 62% 68%) 0%,hsl(var(--mg-h) 52% 56%) 48%,hsl(var(--mg-h) 46% 44%) 100%);
  --mg-ink:hsl(225 14% 5%);
  --mg-ink-2:hsl(222 24% 11%);
  --mg-paper:hsl(40 25% 95%);
  --mg-glass-dark:hsla(222 24% 11% / .62);
  --mg-glass-light:hsla(0 0% 100% / .58);
  --mg-edge:hsla(0 0% 100% / .10);
  --mg-edge-gold:hsla(var(--mg-h) 55% 60% / .34);
  --mg-ease:cubic-bezier(.2,.7,.2,1);
  --mg-r:16px;
  /* fluid type + rhythm (min @360px → max @1600px) */
  --fs-h1:clamp(2.6rem,1.6rem + 4.6vw,5.4rem);
  --fs-h2:clamp(1.85rem,1.25rem + 2.4vw,3.2rem);
  --fs-h3:clamp(1.15rem,1rem + .7vw,1.5rem);
  --fs-lead:clamp(1.05rem,.95rem + .5vw,1.35rem);
  --fs-body:clamp(.98rem,.93rem + .22vw,1.08rem);
  --sp-sec:clamp(56px,4vw + 30px,112px);
  --sp-gap:clamp(14px,1.2vw + 8px,26px);
}

/* ---------- global polish ---------- */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-size:var(--fs-body);text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
::selection{background:hsla(var(--mg-h) 62% 66% / .35);color:inherit}
img,video,svg,iframe,wistia-player{max-width:100%}
img{height:auto}
table{max-width:100%}
@media(max-width:720px){table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}}
:focus-visible{outline:2px solid var(--mg-gold-hi);outline-offset:3px;border-radius:6px}
button:focus:not(:focus-visible),a:focus:not(:focus-visible){outline:none}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1!important;transform:none!important}
}

/* ---------- fluid typography ---------- */
h1,.h1{font-size:var(--fs-h1);line-height:.98;letter-spacing:.5px}
h2,.h2{font-size:var(--fs-h2);line-height:1.06}
h3,.h3{font-size:var(--fs-h3);line-height:1.22}
.hero-lead,.sec-lead,.lead{font-size:var(--fs-lead);line-height:1.55}
p,li{line-height:1.62}
p+p{margin-top:.9em}
.own-line{line-height:1.12}

/* ---------- section rhythm ---------- */
.sec{padding:var(--sp-sec) 0}
.ap-sec-s{padding-top:clamp(40px,3vw + 20px,72px);padding-bottom:clamp(40px,3vw + 20px,72px)}
.container,.wrap{padding-left:clamp(16px,4vw,32px);padding-right:clamp(16px,4vw,32px)}

/* ---------- glass header (audit fix: read as ink over ANY background) ---------- */
.hdr{
  background:linear-gradient(180deg,hsla(225 20% 6% / .94),hsla(225 20% 6% / .86));
  backdrop-filter:blur(22px) saturate(160%);
  -webkit-backdrop-filter:blur(22px) saturate(160%);
  border-bottom:1px solid var(--mg-edge-gold);
  box-shadow:inset 0 1px 0 hsla(0 0% 100% / .06),0 10px 30px -18px rgba(0,0,0,.6);
}
@media(min-width:1101px){
  .hdr{background:transparent;border-bottom-color:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
  .hdr-in{
    background:linear-gradient(180deg,hsla(222 26% 13% / .82),hsla(222 26% 9% / .78));
    border:1px solid var(--mg-edge-gold);
    box-shadow:inset 0 1px 0 hsla(0 0% 100% / .08),0 24px 48px -16px rgba(0,0,0,.65);
    backdrop-filter:blur(24px) saturate(160%);
    -webkit-backdrop-filter:blur(24px) saturate(160%);
  }
}
.nav a{transition:color .2s var(--mg-ease),background .2s var(--mg-ease),transform .2s var(--mg-ease)}
.nav a:hover{transform:translateY(-1px)}
.menu-btn{background:hsla(0 0% 100% / .04);border-color:var(--mg-edge-gold);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}

/* first block after the fixed header: breathing room, not collision (audit fix) */
.hdr + *:not(main):not(.whatwesell):not(.hero):not(.hero-apple){margin-top:calc(var(--header) + 14px)!important}
.hdr + main > .hero:first-child,.hdr + main > .hero-apple:first-child{padding-top:calc(var(--header) + clamp(28px,4vw,64px))}
.whatwesell ~ main > .hero:first-child,.whatwesell ~ main > .hero-apple:first-child{padding-top:clamp(40px,5vw,72px)}
[id],section,h1,h2,h3{scroll-margin-top:calc(var(--header) + 24px)}

/* ---------- glass surfaces ---------- */
.card,.tp,.bento-card,.ap-card,.g-card,.login-card{
  border-radius:var(--mg-r);
  border:1px solid var(--mg-edge);
  box-shadow:inset 0 1px 0 hsla(0 0% 100% / .06),0 1px 2px rgba(0,0,0,.06);
  transition:transform .28s var(--mg-ease),box-shadow .28s var(--mg-ease),border-color .28s var(--mg-ease),background .28s var(--mg-ease);
}
.card{background:var(--mg-glass-light);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);border-color:hsla(40 20% 40% / .16)}
.card:hover{transform:translateY(-3px);box-shadow:inset 0 1px 0 hsla(0 0% 100% / .1),0 18px 40px -18px rgba(0,0,0,.28);border-color:var(--mg-edge-gold)}
.apple-dark .card,.dark .card,.hero .card,section.dark .card{background:hsla(222 24% 12% / .55);border-color:var(--mg-edge)}
.tp{background:hsla(222 24% 10% / .72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-color:var(--mg-edge)}
.tp:hover{transform:translateY(-3px);border-color:var(--mg-edge-gold);box-shadow:inset 0 1px 0 hsla(0 0% 100% / .08),0 22px 44px -18px rgba(0,0,0,.6)}
.tp.win{border-color:var(--mg-edge-gold);box-shadow:inset 0 1px 0 hsla(var(--mg-h) 60% 70% / .28),0 0 0 1px hsla(var(--mg-h) 55% 60% / .12),0 22px 44px -18px rgba(0,0,0,.6);background:linear-gradient(180deg,hsla(var(--mg-h) 40% 20% / .55),hsla(222 24% 10% / .72))}
.bento-card{backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%)}
.bento-card:hover{transform:translateY(-3px);border-color:var(--mg-edge-gold)}
.gold-card{border-color:var(--mg-edge-gold);box-shadow:inset 0 1px 0 hsla(var(--mg-h) 60% 70% / .25),0 1px 2px rgba(0,0,0,.06)}
.eyebrow-pill{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:inset 0 1px 0 hsla(0 0% 100% / .08)}

/* ---------- buttons: gradient, lift, press, ring ---------- */
.btn,.btn-gold,.btn-outline,.btn-apple,.btn-apple-ghost,button.btn{
  transition:transform .22s var(--mg-ease),box-shadow .22s var(--mg-ease),background .22s var(--mg-ease),border-color .22s var(--mg-ease),color .22s var(--mg-ease);
  will-change:transform;
}
.btn-gold{background:var(--mg-gold-grad);box-shadow:inset 0 1px 0 hsla(0 0% 100% / .35),0 10px 24px -12px hsla(var(--mg-h) 60% 40% / .7)}
.btn-gold:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 hsla(0 0% 100% / .4),0 16px 32px -12px hsla(var(--mg-h) 60% 40% / .85);filter:saturate(1.08)}
.btn-gold:active{transform:translateY(0) scale(.985);box-shadow:inset 0 2px 6px rgba(0,0,0,.18)}
.btn-outline{border-color:var(--mg-edge-gold);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.btn-outline:hover{background:hsla(var(--mg-h) 55% 60% / .12);border-color:var(--mg-gold-hi);transform:translateY(-2px)}
.btn-apple:hover,.btn-apple-ghost:hover{transform:translateY(-2px)}
.btn-apple:active,.btn-apple-ghost:active{transform:translateY(0) scale(.985)}

/* in-copy links: animated underline */
main p a:not(.btn):not(.btn-gold):not(.btn-outline):not(.btn-apple):not(.btn-apple-ghost){
  background-image:linear-gradient(currentColor,currentColor);background-size:100% 1px;background-position:0 100%;background-repeat:no-repeat;
  text-decoration:none;transition:background-size .25s var(--mg-ease),color .2s var(--mg-ease);
}
main p a:not(.btn):not(.btn-gold):not(.btn-outline):hover{background-size:0 1px}

/* ---------- reveal: faster in, no blank canvas (audit fix) ---------- */
.reveal{transform:translateY(14px);transition-duration:.55s,.55s}
.reveal.d1{transition-delay:.06s}.reveal.d2{transition-delay:.12s}.reveal.d3{transition-delay:.18s}

/* ---------- forms ---------- */
input[type=text],input[type=email],input[type=tel],input[type=number],select,textarea{
  border-radius:12px;transition:border-color .2s var(--mg-ease),box-shadow .2s var(--mg-ease),background .2s var(--mg-ease);
}
input[type=text]:focus,input[type=email]:focus,input[type=tel]:focus,input[type=number]:focus,select:focus,textarea:focus{
  border-color:var(--mg-gold-hi);box-shadow:0 0 0 4px hsla(var(--mg-h) 62% 66% / .18);outline:none;
}
.field{transition:transform .2s var(--mg-ease)}
.has-error input,.has-error select,.has-error textarea{border-color:#a33d2a;box-shadow:0 0 0 4px rgba(163,61,42,.14)}

/* ---------- media frames ---------- */
wistia-player,.video-frame,[class*="video"] > div{border-radius:14px;overflow:hidden}

/* ---------- footer (contrast fix: opaque dark bg, legible text) ---------- */
/* NOTE: gradient starting from 'transparent' leaked the cream --paper body bg.
   Fix: solid #0b0b0a base with a subtle warm overlay — always opaque. */
.ftr{border-top:1px solid var(--mg-edge-gold);background:#0b0b0a;color:#e8e3dc}
.ftr .ftr-grid,.ftr .cols,.ftr .container > div:first-child{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:clamp(20px,3vw,40px)}
.ftr h2{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;margin-bottom:12px;color:var(--mg-gold-hi,#d0aa3d);opacity:1}
.ftr li{margin-bottom:8px;line-height:1.55;break-inside:avoid}
.ftr a{color:#d4cfc9;transition:color .2s var(--mg-ease),opacity .2s var(--mg-ease);opacity:1}
.ftr a:hover{color:#fff;opacity:1}
.ftr p{color:#c8c3bc}
.ftr .explore-list{column-count:2;column-gap:20px}
@media(max-width:560px){.ftr .explore-list{column-count:1}}
.ftr small,.ftr .fine{color:#a9a49b;line-height:1.6}

/* ---------- ticker + misc micro polish ---------- */
.ticker{border-top:1px solid var(--mg-edge);border-bottom:1px solid var(--mg-edge)}
.ticker-track span{opacity:.82;transition:opacity .2s}
.ticker:hover .ticker-track span{opacity:1}
hr{border:0;height:1px;background:linear-gradient(90deg,transparent,var(--mg-edge-gold),transparent)}

/* ---------- ultra-wide (≥1800px): scale the canvas, keep measure ---------- */
@media(min-width:1800px){
  :root{--fs-body:1.12rem}
  .container{max-width:min(1440px,86vw)}
  .hdr-in{width:min(1440px,calc(100% - 40px))}
}
/* ---------- compact phones ---------- */
@media(max-width:400px){
  :root{--sp-gap:12px}
  .btn,.btn-gold,.btn-outline{width:100%;text-align:center}
  .third-path{gap:12px}
}

/* ---------- Loop 46: 11-item nav pill — compress before wrapping ---------- */
@media(min-width:1101px) and (max-width:1380px){
  .nav a{padding-left:9px;padding-right:9px;font-size:.72rem;letter-spacing:.06em}
  .nav .nav-cta{padding-left:14px;padding-right:14px}
  .hdr-in{gap:14px;padding-left:16px}
}