/* MOBILE-FIX-2026-05-18: html overflow clip */
html{overflow-x:hidden}

/* AMMO canonical TopNav + Footer styles for static Netlify pages.
 * Sourced from `vercel-site/index.html` V5+++.
 * Last sync: 2026-05-09 V6 (homepage reorder + cohesion sweep).
 *
 * Token assumptions: site/colors_and_type.css must be loaded BEFORE
 * this file, providing --cream, --paper, --ink, --ink-2, --ink-3,
 * --line, --line-2, --accent (violet), --font-sans, --font-mono.
 *
 * Token alias for V5+++ parity: this file uses --line-cream / --line-cream-2
 * / --violet / --ui / --code, which map to the canonical names below.
 */
:root {
  --line-cream: var(--line);
  --line-cream-2: var(--line-2);
  --violet: var(--accent);
  --violet-hi: rgba(123,97,255,0.18);
  --violet-lo: rgba(123,97,255,0.06);
  --ui: var(--font-sans);
  --code: var(--font-mono);
}

/* ── TopNav v5 — fluid island pill (2026-05-18) ────────────────
 * Centered floating pill that matches the homepage exactly.
 * Markup is from CHROME:TOPNAV (synced by scripts/inject-chrome.js).
 * Lives on top:14px, never grows full-width, always centered.
 */
.nav{
  position:sticky;top:14px;z-index:40;
  margin:14px auto 0;padding:0 16px;
  display:flex;justify-content:center;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
}
.nav-inner{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 8px 8px 20px;
  background:rgba(250,247,241,.78);
  -webkit-backdrop-filter:saturate(180%) blur(24px);
  backdrop-filter:saturate(180%) blur(24px);
  border:1px solid rgba(255,255,255,.5);
  box-shadow:
    0 1px 0 rgba(255,255,255,.7) inset,
    0 10px 30px -10px rgba(20,17,13,.08),
    0 1px 2px rgba(20,17,13,.04);
  border-radius:999px;
}
.wm{
  font-family:var(--code);font-weight:700;font-size:17px;
  letter-spacing:.02em;text-transform:uppercase;color:var(--ink);
  text-decoration:none;display:inline-flex;align-items:center;gap:8px;
  margin-right:14px;position:relative;
}
.wm-mark{display:block;width:20px;height:24px;flex-shrink:0}
.wm-text{display:inline-flex;align-items:center}
.wm .m1{color:var(--violet);position:relative}
.wm .m1::after{
  content:'';position:absolute;left:-2px;right:-2px;bottom:1px;height:1px;
  background:linear-gradient(90deg,transparent,var(--violet),transparent);
  opacity:.5;animation:nav-scan 3s ease-in-out infinite;
}
@keyframes nav-scan{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(-10px);opacity:0}}
.nav-brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.nav-brand .ap{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;flex-shrink:0}
.nav-brand .ap svg{width:24px;height:24px;display:block}
.nav-brand>img{width:22px;height:26px;flex-shrink:0;display:block}
.nav-brand .wm{font-family:var(--code);font-weight:700;font-size:18px;letter-spacing:.02em;color:var(--ink);text-transform:uppercase;line-height:1}
.nav-brand .wm .m{color:var(--violet)}
.nav-center{display:none}
.nav-link{
  font-family:var(--ui);font-size:13px;font-weight:500;
  color:var(--ink-2);text-decoration:none;
  padding:8px 12px;border-radius:999px;
  transition:color .15s ease,background .15s ease;
  cursor:pointer;display:inline-flex;align-items:center;gap:4px;
  background:transparent;border:0;
}
.nav-link:hover{color:var(--ink);background:rgba(20,17,13,.04)}
.nav-link .chev{font-size:10px;opacity:.6;line-height:1}
.nav-drop{position:relative}
.nav-drop-panel{position:absolute;top:calc(100% + 8px);left:0;min-width:280px;padding:10px;background:var(--paper);border:1px solid var(--line-cream-2);border-radius:14px;box-shadow:0 24px 48px -16px rgba(20,17,13,.18);display:none;flex-direction:column;gap:2px;z-index:60}
.nav-drop[data-open="true"] .nav-drop-panel,.nav-drop:hover .nav-drop-panel,.nav-drop:focus-within .nav-drop-panel{display:flex}
.nav-drop-link{display:flex;flex-direction:column;gap:2px;padding:10px 14px;border-radius:10px;text-decoration:none;color:var(--ink);transition:background .15s}
.nav-drop-link:hover{background:var(--violet-lo)}
.nav-drop-link .name{font-family:var(--ui);font-weight:600;font-size:14px;color:var(--ink);letter-spacing:-.005em}
.nav-drop-link .desc{font-family:var(--code);font-size:11px;letter-spacing:.06em;color:var(--ink-3)}
.nav-drop-divider{height:1px;background:var(--line-cream);margin:6px 8px}
.nav-drop-link.is-overview{padding:10px 14px}
.nav-drop-link.is-overview .name{color:var(--violet);font-size:13px}
.nav-cta-wrap{display:none}
.nav-cta{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--code);font-size:11px;font-weight:600;
  letter-spacing:.10em;text-transform:uppercase;
  background:var(--ink);color:var(--cream);
  padding:9px 8px 9px 14px;border-radius:999px;
  text-decoration:none;margin-left:6px;
  transition:transform .15s ease,background .15s ease;
}
.nav-cta-arrow{
  width:24px;height:24px;border-radius:999px;
  background:var(--violet);color:var(--cream);
  display:inline-flex;align-items:center;justify-content:center;
  font-size:11px;
  transition:transform .15s ease;
}
.nav-cta:hover{background:#000}
.nav-cta:hover .nav-cta-arrow{transform:translateX(2px) translateY(-1px)}
.nav-cta:active{transform:scale(.97)}
.nav-burger{display:none;width:36px;height:36px;align-items:center;justify-content:center;border:0;background:transparent;cursor:pointer}
.nav-burger span,.nav-burger span::before,.nav-burger span::after{content:'';display:block;width:18px;height:1.5px;background:var(--ink);position:relative;transition:transform .15s}
.nav-burger span::before{position:absolute;top:-6px;left:0}
.nav-burger span::after{position:absolute;top:6px;left:0}
.nav-mobile{position:fixed;inset:0;z-index:60;background:var(--cream);display:none;flex-direction:column;padding:88px 28px 40px;overflow-y:auto}
.nav-mobile.open{display:flex}
.nav-mobile a{font-family:var(--ui);font-size:22px;font-weight:600;padding:18px 0;border-bottom:1px solid var(--line-cream);letter-spacing:-.01em;color:var(--ink);text-decoration:none}
.nav-mobile a.nav-cta{margin-top:24px;border-bottom:0;text-align:center;font-size:13px;font-weight:600;color:var(--paper);padding:14px 24px}
.nav-mobile-close{position:absolute;top:18px;right:24px;width:36px;height:36px;border:1px solid var(--line-cream-2);border-radius:99px;background:transparent;display:flex;align-items:center;justify-content:center;font-size:20px;color:var(--ink-2);cursor:pointer}
.nav-mobile-subhead{font-family:var(--code);font-size:10px;letter-spacing:.16em;color:var(--ink-3);text-transform:uppercase;padding:24px 0 6px;margin-top:8px;border-top:1px solid var(--line-cream)}
.nav-mobile-tool{padding:14px 0!important;font-size:18px!important;font-weight:500!important;border-bottom:1px solid var(--line-cream)!important}
.nav-mobile-tool .desc{display:block;font-family:var(--code);font-size:10px;letter-spacing:.1em;color:var(--ink-3);text-transform:uppercase;margin-top:3px;font-weight:400}
@media(max-width:880px){
  .nav{padding:0 16px}
  .nav-inner{padding:6px 6px 6px 14px;gap:4px}
  .nav-link{padding:8px 10px;font-size:12px}
  .nav-cta{font-size:10px;padding:8px 8px 8px 12px}
  .nav-cta-arrow{width:22px;height:22px}
}

/* ═══ Mobile top bar V2 — flat full-width stripe (2026-05-19) ═══
 * Supersedes the V1 floating pill at <=560px. Wordmark left, burger
 * right, hairline bottom, no shadow. Drawer rows left-aligned with
 * two-line hierarchy (bold name + small-caps mono descriptor).
 * Reference shelf: Vercel.com / Linear.app / Ramp.com mobile chrome.
 */
@media(max-width:560px){

  /* Reset the V1 floating pill into a full-width stripe */
  .nav{
    position:fixed; top:0; left:0; right:0;
    margin:0; padding:0;
    display:block;
    z-index:40;
    background:rgba(250,247,241,.92);
    -webkit-backdrop-filter:saturate(180%) blur(14px);
    backdrop-filter:saturate(180%) blur(14px);
    border-bottom:1px solid var(--line-cream);
    padding-top:env(safe-area-inset-top);
  }

  .nav-inner{
    display:flex;
    justify-content:space-between;
    align-items:center;
    width:100%;
    height:56px;
    padding:0 20px;                /* matches page gutter */
    background:transparent;
    border:0;
    border-radius:0;
    box-shadow:none;
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
    gap:0;
  }

  /* Wordmark anchored to left gutter */
  .wm{
    margin:0;                       /* kill the desktop 14px right margin */
    font-size:16px;
    gap:7px;
  }
  .wm-mark{display:block; width:18px; height:22px}

  /* Hide desktop links + inline waitlist CTA on mobile — drawer is the only destination */
  .nav-link,
  .nav-inner > .nav-cta{display:none !important}

  /* Hamburger anchored to right gutter; -12px keeps 48px tap target visually centered to gutter */
  .nav-burger{
    display:inline-flex !important;
    width:48px; height:48px;
    margin-right:-12px;
    align-items:center; justify-content:center;
    border:0; background:transparent;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
    border-radius:8px;
    transition:background .15s var(--ease-out-quart);
  }
  .nav-burger:active{background:rgba(20,17,13,.06)}

  /* Body offset so content clears the fixed bar */
  body{padding-top:calc(56px + env(safe-area-inset-top))}

  /* Hide the tape ticker on mobile — too much vertical weight against the new bar */
  .tape{display:none}

  /* ─── Drawer container ─── */
  .nav-mobile{
    /* Top padding clears the fixed 56px bar + notch + 20px breathing room */
    padding:calc(56px + env(safe-area-inset-top) + 20px) 0 40px;
  }

  /* Close button: top-right, gutter-aligned, safe-area-aware */
  .nav-mobile-close{
    top:calc(env(safe-area-inset-top) + 8px);
    right:14px;
    width:44px; height:44px;
    border:1px solid var(--line-cream-2);
    border-radius:99px;
    font-size:22px;
  }

  /* ─── Group label ─── */
  .nav-mobile-subhead{
    font-family:var(--code);
    font-size:10px;
    font-weight:600;
    letter-spacing:.18em;
    color:var(--ink-3);
    text-transform:uppercase;
    padding:24px 24px 12px;         /* generous top, tight to next row */
    margin-top:8px;
    border-top:1px solid var(--line-cream);
    background:transparent;
  }
  /* First subhead has no top border — kisses drawer top padding */
  .nav-mobile-subhead:first-of-type{
    border-top:0;
    margin-top:0;
    padding-top:8px;
  }

  /* ─── Row container (overrides V1 inline rules) ─── */
  .nav-mobile-tool{
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    justify-content:center !important;
    text-align:left !important;
    gap:4px !important;
    padding:16px 24px !important;
    border-bottom:1px solid var(--line-cream) !important;
    background:transparent;
    color:var(--ink);
    text-decoration:none;
    min-height:64px !important;          /* !important: beats .nav-mobile a {min-height:48px} from mobile-system.css @<=720 (higher specificity 0,0,2,0) — V2 drawer rows must clear 64px */
    font-size:17px !important;
    font-weight:600 !important;
    transition:background .15s var(--ease-out-quart);
  }

  /* Hit feedback — flat tint, no scale */
  .nav-mobile-tool:active{
    background:var(--violet-lo);
  }

  /* Active route */
  .nav-mobile-tool.is-active{
    background:var(--violet-lo);
    box-shadow:inset 3px 0 0 var(--violet);
  }
  .nav-mobile-tool.is-active .name{
    color:var(--violet);
  }

  /* ─── Row text ─── */
  .nav-mobile-tool .name{
    font-family:var(--ui);
    font-size:17px;
    font-weight:600;
    line-height:1.25;
    letter-spacing:-.01em;
    color:var(--ink);
    display:block;
  }
  .nav-mobile-tool .desc{
    font-family:var(--code);
    font-size:10px;
    font-weight:500;
    line-height:1.2;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--ink-3);
    display:block;
    margin:0 !important;            /* parent flex gap:4px does the spacing */
  }

  /* Last row in drawer — kill bottom border before CTA */
  .nav-mobile > a.nav-mobile-tool:last-of-type{
    border-bottom:0 !important;
  }

  /* Drawer CTA — full-width, separated by whitespace */
  .nav-mobile a.nav-cta{
    margin:28px 24px 0;
    border-bottom:0;
    text-align:center;
    justify-content:center;
    font-size:13px;
    font-weight:600;
    color:var(--cream);
    padding:16px 24px;
    border-radius:99px;
  }
}

/* ── Footer ──────────────────────────────────────────────────── */
.foot{background:var(--cream);border-top:1px solid var(--line-cream);padding:64px 32px 32px}
.foot-inner{max-width:1180px;margin:0 auto}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;padding-bottom:48px;border-bottom:1px solid var(--line-cream)}
@media(max-width:880px){.foot-grid{grid-template-columns:1fr 1fr;gap:28px}}
@media(max-width:560px){.foot-grid{grid-template-columns:1fr;gap:32px}}
.foot-brand-col{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.foot-wm{display:inline-flex;align-items:center;gap:8px;text-decoration:none}
.foot-wm .ap{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px}
.foot-wm>img{width:22px;height:26px;flex-shrink:0;display:block}
.foot-wm .wm-text{font-family:var(--code);font-weight:700;font-size:18px;letter-spacing:.02em;color:var(--ink);text-transform:uppercase;line-height:1}
.foot-wm .wm-text .m{color:var(--violet)}
.foot-tag{font-family:var(--ui);font-size:14px;color:var(--ink-2);line-height:1.55;max-width:280px;margin:0}
.foot-cta{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;background:var(--ink);color:var(--cream);border-radius:99px;font-family:var(--ui);font-weight:500;font-size:13px;letter-spacing:-.005em;text-decoration:none;transition:background .15s}
.foot-cta:hover{background:var(--violet)}
.foot-col-title{font-family:var(--code);font-size:11px;letter-spacing:.14em;color:var(--ink-3);text-transform:uppercase;margin-bottom:14px}
.foot-col-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.foot-col-list a{font-family:var(--ui);font-size:13px;color:var(--ink-2);text-decoration:none;transition:color .15s}
.foot-col-list a:hover{color:var(--violet)}
.foot-bottom{padding-top:24px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.foot-bottom-left{font-family:var(--ui);font-size:12px;color:var(--ink-3);line-height:1.5}
.foot-bottom-right{display:flex;gap:16px}
.foot-bottom-right a{font-family:var(--ui);font-size:12px;color:var(--ink-3);text-decoration:none;transition:color .15s}
.foot-bottom-right a:hover{color:var(--violet)}
.foot-briefing{padding:24px 0;border-bottom:1px solid var(--line-cream);display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center}
@media(max-width:720px){.foot-briefing{grid-template-columns:1fr;gap:14px;padding:20px 0}}
.foot-briefing-left{display:flex;flex-direction:column;gap:4px}
.foot-briefing-eyebrow{font-family:var(--code);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--violet);font-weight:600}
.foot-briefing-line{font-family:var(--ui);font-size:13px;color:var(--ink-2);line-height:1.5}
.foot-briefing-form{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.foot-briefing-form input[type=email]{padding:10px 14px;background:var(--paper);border:1px solid var(--line-cream-2);border-radius:99px;font-family:var(--ui);font-size:13px;color:var(--ink);outline:none;transition:border-color .15s,box-shadow .15s;min-width:220px}
.foot-briefing-form input[type=email]:focus{border-color:var(--violet);box-shadow:0 0 0 3px var(--violet-hi)}
.foot-briefing-form button{padding:10px 16px;background:var(--ink);color:var(--cream);border-radius:99px;font-family:var(--ui);font-weight:600;font-size:12px;border:0;cursor:pointer;letter-spacing:-.005em;transition:background .15s}
.foot-briefing-form button:hover{background:var(--violet)}

/* ── Status badges (Wave 3b 2026-05-12, ported from vercel-site) ──
 * Two variants: .is-live (mint dot, free tools + Grade) +
 * .is-ios (violet half-dot, products that ship on iOS Q3 2026).
 * Source-of-truth styles also live on vercel-site/index.html so
 * the root homepage doesn't need to fetch this partial CSS. */
.status-badge{display:inline-flex;align-items:center;gap:6px;font-family:var(--code);font-size:10px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;line-height:1;padding:5px 8px;border-radius:4px;border:1px solid transparent;white-space:nowrap}
.status-badge .dot{display:inline-block;width:6px;height:6px;border-radius:50%;flex-shrink:0}
.status-badge.is-live{color:var(--mint-ink,#1F8A5B);background:rgba(31,138,91,.06);border-color:rgba(31,138,91,.18)}
.status-badge.is-live .dot{background:var(--mint-ink,#1F8A5B);box-shadow:0 0 6px rgba(31,138,91,.4)}
.status-badge.is-ios{color:var(--violet);background:rgba(123,97,255,.06);border-color:rgba(123,97,255,.18)}
.status-badge.is-ios .dot{background:linear-gradient(90deg,var(--violet) 50%,transparent 50%);border:1px solid var(--violet);box-sizing:border-box}
.nav-drop-link .status-badge,
.nav-mobile-tool .status-badge{font-size:8px;padding:3px 6px;letter-spacing:.16em;margin-left:8px;vertical-align:middle}
.nav-drop-link .status-badge .dot,
.nav-mobile-tool .status-badge .dot{width:5px;height:5px}

/* ── Active-state nav highlighting (Wave 4 2026-05-15) ──
 * topnav.js applies .is-active to the .nav-drop-link or
 * .nav-mobile-tool whose route matches the current pathname.
 * Visual: violet left rule + slight ink darken — confident, not loud. */
.nav-drop-link.is-active{background:var(--violet-lo);box-shadow:inset 3px 0 0 var(--violet);padding-left:11px}
.nav-drop-link.is-active .name{color:var(--violet)}
.nav-mobile-tool.is-active{background:var(--violet-lo);box-shadow:inset 3px 0 0 var(--violet)}
.nav-mobile-tool.is-active{color:var(--violet)}

/* ═══════════════════════════════════════════════════════════════
   v5 MOTION PRIMITIVES (2026-05-18 · Tier 1 site-wide)
   Per Emil Kowalski's design engineering philosophy:
   - Every animation has a reason
   - Only animate transform + opacity (skip layout/paint)
   - Custom curves beat built-in CSS easings
   - prefers-reduced-motion strips movement, keeps opacity fades
   ═══════════════════════════════════════════════════════════════ */

/* Easing tokens — mirror vercel-site/index.html :root */
:root{
  --ease-out-quart:cubic-bezier(0.23,1,0.32,1);
  --ease-in-out-strong:cubic-bezier(0.77,0,0.175,1);
  --ease-drawer:cubic-bezier(0.32,0.72,0,1);
  --motion-fast:160ms;
  --motion-mid:220ms;
  --motion-slow:320ms;
}

/* ── Button :active scale (Emil rule: buttons must feel responsive) ── */
.nav-cta,
.btn,
.btn-primary,
.btn-ghost,
.btn-solid,
.cta,
.foot-cta,
.foot-briefing-form button,
a.cta,
a.tour-link,
a.read-more,
button[type="submit"]{
  transition:transform var(--motion-fast) var(--ease-out-quart),background var(--motion-fast) var(--ease-out-quart),color var(--motion-fast) var(--ease-out-quart),box-shadow var(--motion-fast) var(--ease-out-quart);
}
.nav-cta:active,
.btn:active,
.btn-primary:active,
.btn-ghost:active,
.btn-solid:active,
.cta:active,
.foot-cta:active,
.foot-briefing-form button:active,
a.cta:active,
button[type="submit"]:active{
  transform:scale(0.97);
}

/* Pill nav links: subtle scale on press */
.nav-link{
  transition:color var(--motion-fast) var(--ease-out-quart),background var(--motion-fast) var(--ease-out-quart),transform var(--motion-fast) var(--ease-out-quart);
}
.nav-link:active{transform:scale(0.97)}

/* ── Card hover lifts (only on hover-capable devices) ── */
@media (hover:hover) and (pointer:fine){
  .tool-card,
  .prod-card,
  .feature-card,
  .post-list li,
  .src,
  .sources .src,
  .stand,
  .vignette,
  .case-tile,
  .product-card{
    transition:transform var(--motion-mid) var(--ease-out-quart),box-shadow var(--motion-mid) var(--ease-out-quart),border-color var(--motion-mid) var(--ease-out-quart);
  }
  .tool-card:hover,
  .prod-card:hover,
  .feature-card:hover,
  .post-list li:hover,
  .vignette:hover,
  .case-tile:hover,
  .product-card:hover{
    transform:translateY(-2px);
  }
}

/* ── Inline-link underline animation (scale-in from left on hover) ── */
@media (hover:hover) and (pointer:fine){
  a.link-accent,
  .post-list h2 a,
  .read-more,
  .tour-link,
  .foot-col-list a,
  .foot-bottom-right a{
    position:relative;
    background-image:linear-gradient(currentColor,currentColor);
    background-size:0% 1px;
    background-repeat:no-repeat;
    background-position:0 100%;
    transition:background-size var(--motion-mid) var(--ease-out-quart),color var(--motion-fast) var(--ease-out-quart);
  }
  a.link-accent:hover,
  .post-list h2 a:hover,
  .read-more:hover,
  .tour-link:hover,
  .foot-col-list a:hover,
  .foot-bottom-right a:hover{
    background-size:100% 1px;
  }
}

/* ── Focus-visible ring (animated outline for keyboard navigation) ── */
*:focus-visible{
  outline:2px solid var(--violet,#7B61FF);
  outline-offset:2px;
  border-radius:4px;
  transition:outline-offset var(--motion-fast) var(--ease-out-quart);
}
button:focus-visible,
a:focus-visible,
input:focus-visible{
  outline-offset:3px;
}
/* Don't double-up focus ring on inputs that already have shadow focus */
input[type="email"]:focus-visible,
input[type="text"]:focus-visible,
input[type="tel"]:focus-visible,
input[type="number"]:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline:none;
}

/* ── prefers-reduced-motion: strip movement, keep opacity/color ── */
@media (prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important;
  }
  /* Re-allow color + opacity transitions (gentler — they aid comprehension) */
  *{
    transition-property:opacity,color,background-color,fill,stroke !important;
    transition-duration:150ms !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   v5 MOTION TIER 2 — scroll-triggered reveals (2026-05-18)
   Companion JS lives in site/_partials/topnav.js
   ═══════════════════════════════════════════════════════════════ */

/* Default state: hidden, lifted 16px. .is-in resets. */
.r-fade,
.r-stagger-child{
  opacity:0;
  transform:translateY(16px);
  transition:
    opacity 700ms var(--ease-out-quart,cubic-bezier(0.23,1,0.32,1)),
    transform 700ms var(--ease-out-quart,cubic-bezier(0.23,1,0.32,1));
  will-change:opacity,transform;
}
.r-fade.is-in,
.r-stagger-child.is-in{
  opacity:1;
  transform:translateY(0);
}

/* Reveal: NEUTERED (2026-05-18 round 3). The .r-reveal class is now a no-op.
   Two prior attempts (clip-path, then opacity+translateY) both left H2s
   invisible in production because IntersectionObserver reliably observed
   the elements but the .is-in callback fired inconsistently across the
   sitewide population of below-fold H2s. Ship visible content over animated
   invisible content. Class kept for forward-compat with markup. */
.r-reveal{opacity:1;transform:none}
.r-reveal.is-in{opacity:1;transform:none}

/* Count-up display */
.r-count{
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
  will-change:contents;
}

/* prefers-reduced-motion: kill movement, instantly visible */
@media (prefers-reduced-motion:reduce){
  .r-fade,
  .r-reveal,
  .r-stagger-child{
    opacity:1 !important;
    transform:none !important;
    clip-path:none !important;
    -webkit-clip-path:none !important;
    transition:none !important;
  }
}

/* Hover lift must win when a card is also a stagger child.
   .r-stagger-child.is-in sets transform:translateY(0); we need higher specificity
   for the hover lift to override it. */
@media (hover:hover) and (pointer:fine){
  .r-stagger-child.tool-card:hover,
  .r-stagger-child.prod-card:hover,
  .r-stagger-child.feature-card:hover,
  .r-stagger-child.vignette:hover,
  .r-stagger-child.case-tile:hover,
  .r-stagger-child.product-card:hover,
  .r-stagger-child.post-list li:hover{
    transform:translateY(-2px);
  }
}