/* ═══════════════════════════════════════════════════════════════
   MEROBIX DESIGN TOKENS — single source for the green+gold system
   Load AFTER /css/site.css on every page:
   <link rel="stylesheet" href="/css/tokens.css">
   Law: green = action (CTAs only) · gold = prestige/certification
   (one gold moment per viewport) · motion = telemetry, always
   guarded by prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════ */
:root{
  /* gold scale */
  --gold:#C9A84C;
  --gold-hi:#F0D97A;
  --gold-dim:rgba(201,168,76,.1);
  --gold-border:rgba(201,168,76,.35);
  /* radius scale — replaces ad-hoc 3/5/6/8/10/12px */
  --r-s:4px;
  --r-m:8px;
  --r-l:12px;
  /* named mono stack (kills Courier on Windows) */
  --font-mono:ui-monospace,'Cascadia Mono','Segoe UI Mono',Menlo,Consolas,monospace;
  /* surfaces */
  --surface-hi:#12281a;
  --surface:#0d2113;
  --surface-lo:#0a1a0e;
}

/* ── gold utilities ─────────────────────────────────────────── */
.au-text{
  background:linear-gradient(135deg,var(--gold) 15%,var(--gold-hi) 60%,#fff 110%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  /* background-clip:text only paints inside the element box; italic glyph
     overhang (the final T in "Don't", "From Day One") lands outside it and
     renders transparent. Padding extends the paint box past the overhang. */
  padding-right:.09em;margin-right:-.04em;
}
.au-badge{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-hi);border:1px solid var(--gold-border);background:var(--gold-dim);
  border-radius:var(--r-s);padding:7px 14px;
}
.au-badge svg{width:13px;height:13px;flex-shrink:0}
/* gold horizon glow — attach to a position:relative section */
.au-horizon{position:relative;overflow:hidden}
.au-horizon::after{
  content:'';position:absolute;left:12%;right:12%;bottom:-50px;height:110px;
  background:radial-gradient(50% 100% at 50% 100%,rgba(201,168,76,.18),transparent 70%);
  pointer-events:none;
}

/* ── machined-steel card recipe ─────────────────────────────── */
/* Tier 1 — every card */
.card-steel{
  background:linear-gradient(180deg,var(--surface-hi) 0%,var(--surface) 9%,var(--surface-lo) 100%);
  border:1px solid rgba(34,197,94,.22);
  border-radius:var(--r-m);
  box-shadow:inset 0 1px 0 rgba(240,255,244,.07),
             inset 0 -1px 0 rgba(0,0,0,.5),
             0 24px 40px rgba(0,0,0,.35);
}
/* Tier 2 — flagship surfaces only (3–4 per page max) */
.card-flagship{position:relative}
.card-flagship::before{
  content:'';position:absolute;top:0;left:8%;right:8%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(34,197,94,.7),transparent);
  pointer-events:none;
}
/* chamfered corner — flagship only; shadow must live on .chamfer-wrap */
.chamfer{clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,0 100%)}
.chamfer-wrap{filter:drop-shadow(0 24px 40px rgba(0,0,0,.5)) drop-shadow(0 4px 14px rgba(34,197,94,.08))}
/* center-bright section hairline (replaces flat border-top) */
.hairline-lit{border-top:none!important;position:relative}
.hairline-lit::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,rgba(34,197,94,.03),rgba(34,197,94,.35) 50%,rgba(34,197,94,.03));
}

/* ── house icon slot ────────────────────────────────────────── */
.mbx-ic{display:inline-block;vertical-align:middle;flex-shrink:0}
.icon-tile{
  width:46px;height:46px;display:inline-flex;align-items:center;justify-content:center;
  color:#22c55e;background:rgba(34,197,94,.08);
  border:1px solid rgba(34,197,94,.18);border-radius:6px;
}
.icon-tile.au{color:var(--gold-hi);background:var(--gold-dim);border-color:var(--gold-border)}

/* ── typographic availability chips (replace ☁️🏭 emoji pair) ── */
.avail-chips{display:inline-flex;gap:5px;vertical-align:middle}
.avail-chip{
  font-size:.55rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  padding:2px 7px;border-radius:2px;border:1px solid rgba(34,197,94,.3);color:#22c55e;
}
.avail-chip.onprem{border-color:var(--gold-border);color:var(--gold-hi)}

/* ── marquee hygiene ────────────────────────────────────────── */
.mbx-marquee{
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.mbx-marquee:hover .ticker-track,
.mbx-marquee:hover .mbx-marquee-track{animation-play-state:paused}

/* ── stats: stop count-up digit jitter ──────────────────────── */
.stat-num,.tabular{font-variant-numeric:tabular-nums}

/* ── power-on sweep for section hairlines (item 6c) ─────────── */
.power-on{position:relative}
.power-on::after{
  content:'';position:absolute;top:-1px;left:0;right:0;height:1.5px;
  background:linear-gradient(90deg,transparent,#22c55e 45%,#7ef0a5 50%,#22c55e 55%,transparent);
  transform:scaleX(0);transform-origin:left;pointer-events:none;
}
@media (prefers-reduced-motion:no-preference){
  .power-on.visible::after{animation:mbx-sweep 1s cubic-bezier(.3,.6,.2,1) forwards}
  @keyframes mbx-sweep{to{transform:scaleX(1)}}
}

/* ── reveal-on-scroll insurance ─────────────────────────────── */
/* Sections must NEVER stay invisible: if the IntersectionObserver
   never fires (no JS, fast scroll, error), this animation reveals
   them anyway after 1.4s. The observer's .visible still wins the
   race for the nice staggered feel. */
@media (prefers-reduced-motion:no-preference){
  .reveal{animation:mbx-reveal-fb .6s ease 1.4s forwards}
  @keyframes mbx-reveal-fb{to{opacity:1;transform:none}}
}

/* ── global reduced-motion enforcement ──────────────────────── */
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1!important;transform:none!important;transition:none!important}
  .ticker-track,.mbx-marquee-track{animation:none!important}
  .eyebrow-dot{animation:none!important}
  .power-on::after{transform:scaleX(1)!important;animation:none!important}
  .mbx-anim,.mbx-anim *{animation:none!important;transition-duration:.01ms!important}
}