/* ════════════════════════════════════════════════════════════════════════
   ATWIL — REDESIGN VISUAL SYSTEM
   ────────────────────────────────────────────────────────────────────────
   Shared styles for the dark/editorial/liquid-glass rollout. All classes
   are prefixed `.abr-` (about-redesign) and scoped to `.abr-page` on the
   body, so this file can coexist with the legacy `app.css` without bleed.

   Adopted by, in rollout order:
     /about        (Phase 1.0 — shipped)
     /            (Phase 1.1 — landing page)
     /browse      (Phase 1.2 — marketplace)
     auth pages   (Phase 2)
     info pages   (Phase 3)
     dashboards   (Phase 4 — typography + glass touches only, not full dark)

   Anything PAGE-SPECIFIC (e.g. /about's acronym card, the pricing
   calculator, the personality grid) stays inline on that page. This
   file only carries the cross-page primitives.

   Visual language:
     • Background:    pure black (#000)
     • Body face:     Inter (300-800)
     • Display face:  Instrument Serif italic (for accent words inside
                      headlines — used sparingly, ~1 word per heading)
     • Brand palette: indigo #6366f1 → royal #2959d9 → teal #36d5ce
                      (full saturation) + soft sister palette
                      #a5b4fc → #818cf8 → #67e8f9 for serif accents
     • Surface:       liquid-glass — 1% white tint + 8px backdrop-blur
                      + inset top highlight + mask-composite gradient
                      border ring (the "vision-pro" recipe)
     • Aurora:        three radial brand-coloured glows behind feature
                      sections so the page never reads as flat black
   ════════════════════════════════════════════════════════════════════════ */


/* ── Page base ────────────────────────────────────────────────────────── */
.abr-page {
  margin: 0;
  position: relative;
  background: #000;
  color: #fff;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  min-height: 100vh;
  overflow-x: hidden;
}
.abr-page *,
.abr-page *::before,
.abr-page *::after { box-sizing: border-box; }
.abr-page ::selection { background: rgba(99, 102, 241, 0.32); color: #fff; }
.abr-page a { color: inherit; }
.abr-page button { font: inherit; cursor: pointer; }

/* ── Continuous page-level ambient glow ───────────────────────────────────
   ONE viewport-fixed brand-glow layer behind every section. This is what
   makes section seams structurally impossible: the sections themselves
   carry NO background (they're transparent), so the only thing painting
   behind all of them is this single continuous element. With nothing
   section-attached to contrast against a neighbour, there is no edge where
   the treatment changes — no seam anywhere, by construction.

   position:fixed (NOT background-attachment:fixed, which janks on iOS) so
   the glow is locked to the viewport — as the page scrolls, every section
   passes through the same atmospheric field (teal at the bottom of the
   viewport → royal mid → indigo at the top). That gives gentle per-scroll
   variation while remaining one continuous layer with zero boundaries.

   Chosen over position:absolute-on-body because the body carries
   overflow-x:hidden, and an absolute pseudo on an overflow-clipped body
   can hit containing-block edge cases across browsers. Fixed has no such
   ambiguity. */
.abr-page::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(58rem 52rem at 50% -8%, rgba(99, 102, 241, 0.14), transparent 70%),   /* indigo, top         */
    radial-gradient(50rem 50rem at 4%  26%, rgba(41, 89, 217, 0.10), transparent 68%),    /* royal,  L-upper     */
    radial-gradient(50rem 50rem at 98% 40%, rgba(54, 213, 206, 0.10), transparent 68%),   /* teal,   R-mid       */
    radial-gradient(52rem 50rem at 72% 86%, rgba(54, 213, 206, 0.075), transparent 70%),  /* teal,   R-lower     */
    radial-gradient(56rem 54rem at 26% 104%, rgba(99, 102, 241, 0.10), transparent 72%);  /* indigo, bottom-fill */
  /* Five radials, not four: the original left a black dead-zone in the
     lower-centre of the viewport (top/L-upper/R-mid/L-lower placement
     never reached 50%×70%). Because the layer is viewport-fixed, any
     section scrolling through that dead-zone read as a hard dark band
     against the glowing top — a seam by perception even though every
     section is transparent. The R-lower + bottom-fill radials close
     the gap so the field is continuous across the WHOLE viewport. */
}
/* Lift the real content above the fixed ambient glow. nav has its own
   z-index:100 so it's untouched; main + footer just need to clear the
   z-index:0 glow layer. */
.abr-page > main,
.abr-page > footer { position: relative; z-index: 1; }


/* ── Liquid glass — the core texture ──────────────────────────────────── */
/* 8px frost is heavier than Codex's original 4px because most pages here
   are text-on-solid-black (less surrounding texture to refract). Drop the
   blur back to 4px on pages with full-bleed video behind the glass. */
.abr-glass {
  background: rgba(255, 255, 255, 0.01);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
}
.abr-glass::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.4px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.45) 0%,
    rgba(255, 255, 255, 0.15) 20%,
    rgba(255, 255, 255, 0) 40%,
    rgba(255, 255, 255, 0) 60%,
    rgba(255, 255, 255, 0.15) 80%,
    rgba(255, 255, 255, 0.45) 100%
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}


/* ── Brand-gradient utilities ─────────────────────────────────────────── */
/* Full-saturation hierarchy — for CTAs, badges, focal moments. */
.abr-grad-text {
  background-image: linear-gradient(135deg, #6366f1 0%, #2959d9 50%, #36d5ce 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.abr-grad-bg {
  background-image: linear-gradient(135deg, #6366f1 0%, #2959d9 50%, #36d5ce 100%);
}
/* Soft sister palette — for serif italic accents inside headlines.
   Reads as a gentle hue shift, not a punchy brand statement. */
.abr-grad-text-soft {
  background-image: linear-gradient(135deg, #a5b4fc 0%, #818cf8 50%, #67e8f9 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}


/* ── Serif italic display accent ──────────────────────────────────────── */
.abr-serif {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-weight: 400;
}


/* ── Radial aura — gentle LOCAL emphasis on top of the page ambient ─────
   Now that .abr-page::before carries the continuous brand glow, the
   per-section aura only adds a soft local lift. Two deliberate changes
   from the original to stop it re-creating the section seam it used to:
     • Glows centred vertically (~45-55%) instead of at 18% — so they
       fade out well before the section's top/bottom edges and never
       create an edge-to-edge contrast against a neighbouring section.
     • Lower opacity — the page ambient already provides the base colour;
       this just nudges it brighter where we want focus. */
.abr-aura { position: relative; }
.abr-aura::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(circle at 50% 45%, rgba(99, 102, 241, 0.10), transparent 26rem),  /* indigo */
    radial-gradient(circle at 14% 55%, rgba(41, 89, 217, 0.07), transparent 22rem),   /* royal */
    radial-gradient(circle at 86% 60%, rgba(54, 213, 206, 0.07), transparent 20rem);  /* teal */
}
.abr-aura > * { position: relative; z-index: 1; }


/* ════════════════════════════════════════════════════════════════════════
   NAV — floating glass pill
   ════════════════════════════════════════════════════════════════════════ */
.abr-nav {
  position: fixed;
  left: 50%;
  top: 16px;
  transform: translateX(-50%);
  width: calc(100% - 32px);
  max-width: 1100px;
  z-index: 100;
}
.abr-nav-inner {
  min-height: 56px;
  border-radius: 999px;
  padding: 8px 8px 8px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
}
.abr-nav-logo {
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: #fff;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
/* Neon ATWIL cube mark in the nav. Sized to the nav pill; width auto keeps
   its aspect ratio. The link keeps aria-label="ATWIL" for screen readers. */
.abr-nav-logo-img { height: 32px; width: auto; display: block; }
@media (max-width: 600px) { .abr-nav-logo-img { height: 28px; } }
.abr-nav-links { display: none; gap: 28px; }
@media (min-width: 768px) { .abr-nav-links { display: flex; } }
.abr-nav-links a {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  transition: color 0.2s;
}
.abr-nav-links a:hover { color: #fff; }
/* Right-side nav actions: a plain "Sign in" text link + the filled
   "Get Started" pill (styled like the reference Sign Up button). */
.abr-nav-actions { display: inline-flex; align-items: center; gap: 6px; }
.abr-nav-signin {
  text-decoration: none;
  color: rgba(255, 255, 255, 0.78);
  font-size: 14px;
  font-weight: 500;
  padding: 9px 14px;
  border-radius: 999px;
  white-space: nowrap;
  transition: color 0.2s, background 0.2s;
}
.abr-nav-signin:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }
.abr-nav-cta {
  text-decoration: none;
  color: #fff;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.18);
  padding: 9px 20px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transition: background 0.25s, border-color 0.25s, transform 0.15s;
}
.abr-nav-cta:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.32);
  transform: translateY(-1px);
}

/* ── Mobile burger menu ──────────────────────────────────────────────
   Shown < 768px (where .abr-nav-links is hidden). Toggling .nav-open on
   .abr-nav animates the burger to an X and reveals the dropdown panel
   below the pill with the links + Sign in + Get Started. Desktop is
   untouched (burger + panel are display:none ≥ 768px). */
.abr-nav-burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  padding: 0 10px;
  border: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 999px;
  flex-shrink: 0;
}
.abr-nav-burger span {
  display: block;
  height: 2px;
  width: 100%;
  background: rgba(255, 255, 255, 0.88);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.abr-nav-burger:hover span { background: #fff; }
.abr-nav.nav-open .abr-nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.abr-nav.nav-open .abr-nav-burger span:nth-child(2) { opacity: 0; }
.abr-nav.nav-open .abr-nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (min-width: 768px) { .abr-nav-burger { display: none; } }

.abr-nav-mobile {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  right: 0;
  border-radius: 24px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: rgba(12, 13, 24, 0.94);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
  pointer-events: none;
}
.abr-nav.nav-open .abr-nav-mobile {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
.abr-nav-mobile > a {
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  padding: 13px 16px;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 500;
  transition: background 0.18s, color 0.18s;
}
.abr-nav-mobile > a:hover,
.abr-nav-mobile > a:active { background: rgba(255, 255, 255, 0.07); color: #fff; }
.abr-nav-mobile-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.abr-nav-mobile-actions .abr-nav-signin,
.abr-nav-mobile-actions .abr-nav-cta {
  text-align: center;
  padding: 13px 16px;
  font-size: 15px;
}
@media (min-width: 768px) { .abr-nav-mobile { display: none; } }

/* On mobile the inline Sign in + Get Started live inside the burger panel. */
@media (max-width: 767px) { .abr-nav-actions { display: none; } }


/* ════════════════════════════════════════════════════════════════════════
   LAYOUT PRIMITIVES — sections, containers
   ════════════════════════════════════════════════════════════════════════ */
.abr-section { padding: 96px 20px; }
.abr-section--lg { padding: 140px 20px; }
.abr-section--sm { padding: 60px 20px; }
.abr-container { max-width: 1100px; margin: 0 auto; }
.abr-container--wide { max-width: 1280px; margin: 0 auto; }


/* ════════════════════════════════════════════════════════════════════════
   TYPOGRAPHY
   ════════════════════════════════════════════════════════════════════════ */
.abr-eyebrow {
  display: inline-flex;
  align-items: center;
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 32px;
}
.abr-section-eyebrow {
  font-size: 11px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  margin: 0 0 24px;
}
.abr-h1 {
  font-size: clamp(56px, 10vw, 128px);
  line-height: 0.9;
  letter-spacing: -0.06em;
  font-weight: 600;
  margin: 0;
  color: #fff;
}
.abr-h1 .abr-serif { color: rgba(255, 255, 255, 0.85); }
.abr-h2 {
  font-size: clamp(40px, 6vw, 88px);
  line-height: 0.95;
  letter-spacing: -0.05em;
  font-weight: 600;
  margin: 0;
  color: #fff;
}
/* Section-heading serif italic accent uses the SOFT brand gradient by
   default so the colour stays restrained. Override with .abr-grad-text
   (full saturation) when you want it to shout.

   Two protections against the italic-overhang clipping Aarav reported:

   1. letter-spacing: 0.02em — overrides the parent .abr-h2's
      letter-spacing: -0.05em (which is great for tight sans-serif
      display but compresses italic glyphs into each other; the
      anti-aliased right edge of "e", "f", "y" then gets visually
      clipped by the following character's bounding box).
   2. padding-inline-end: 0.15em + display: inline-block — extends
      the gradient fill past the italic overhang at the END of the
      span (covers "future" + similar single-word spans at the right
      edge). inline-block makes the padding actually carry the
      gradient with it; on plain inline, padding doesn't reliably
      extend the background-clip:text area in every browser. */
.abr-h2 .abr-serif {
  background-image: linear-gradient(135deg, #a5b4fc 0%, #818cf8 50%, #67e8f9 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  display: inline-block;
  letter-spacing: 0.02em;
  padding-inline-end: 0.15em;
  /* Italic serif glyphs (y, g, p, j) drop a long descender BELOW the
     baseline. With line-height:0.95 the inline-block's paint box is
     shorter than the glyph, and -webkit-background-clip:text only fills
     pixels inside that box — so descenders rendered transparent ("the y
     in 'by' is cut"). padding-block-end extends the paint box downward to
     cover them; the negative margin cancels the added height so line
     rhythm is unchanged. */
  padding-block-end: 0.22em;
  margin-block-end: -0.22em;
}
.abr-h3 {
  font-size: clamp(24px, 3vw, 36px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-weight: 600;
  margin: 0;
  color: #fff;
}
.abr-lede {
  margin: 36px 0 0;
  max-width: 720px;
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.7);
}
.abr-body {
  max-width: 680px;
  margin: 32px 0 0;
  font-size: 17px;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.7);
}
.abr-body b { color: rgba(255, 255, 255, 0.95); font-weight: 600; }


/* ════════════════════════════════════════════════════════════════════════
   BUTTONS — primary (gradient fill) + ghost (glass)
   ════════════════════════════════════════════════════════════════════════ */
.abr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  padding: 14px 26px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  transition: transform 0.2s, background 0.3s, color 0.3s, box-shadow 0.3s;
  border: none;
}
.abr-btn--primary {
  background-image: linear-gradient(135deg, #6366f1 0%, #2959d9 50%, #36d5ce 100%);
  color: #fff;
  box-shadow: 0 14px 40px rgba(99, 102, 241, 0.32);
}
.abr-btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 50px rgba(99, 102, 241, 0.45);
}
/* Ghost button — self-contained glass styling. The generic .abr-glass
   was too subtle at this small size (1% bg disappears on small pills,
   1.4px ring needs longer edges to glint). So this variant gets a
   beefier glass treatment of its own. */
.abr-btn--ghost {
  color: rgba(255, 255, 255, 0.95);
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.18),
    0 14px 40px rgba(0, 0, 0, 0.35);
  position: relative;
  overflow: hidden;
}
.abr-btn--ghost::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.55) 0%,
    rgba(255, 255, 255, 0.18) 30%,
    rgba(255, 255, 255, 0) 50%,
    rgba(255, 255, 255, 0.18) 70%,
    rgba(255, 255, 255, 0.55) 100%
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
.abr-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.09);
  color: #fff;
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.22),
    0 20px 50px rgba(0, 0, 0, 0.4);
}
/* Convenience layout: side-by-side button group, wraps on narrow widths. */
.abr-cta-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin: 64px 0 0;
}
.abr-cta-row--center { justify-content: center; }


/* ════════════════════════════════════════════════════════════════════════
   FOOTER — glass card with link map (replaces the shared app.css footer
   on every redesigned page)
   ════════════════════════════════════════════════════════════════════════ */
.abr-footer { padding: 64px 20px 32px; }
.abr-footer-card {
  max-width: 1280px;
  margin: 0 auto;
  border-radius: 36px;
  padding: 40px;
}
@media (max-width: 768px) { .abr-footer-card { padding: 28px; } }
.abr-footer-top {
  display: grid;
  grid-template-columns: 1.2fr 2fr;
  gap: 48px;
}
@media (max-width: 900px) { .abr-footer-top { grid-template-columns: 1fr; } }
.abr-footer-brand {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 10px;
}
.abr-footer-tag {
  margin-top: 16px;
  max-width: 320px;
  color: rgba(255, 255, 255, 0.55);
  font-size: 15px;
  line-height: 1.65;
}
.abr-footer-cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
@media (max-width: 700px) {
  .abr-footer-cols { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}
.abr-footer-col h3 {
  margin: 0 0 18px;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
  font-weight: 600;
}
.abr-footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.abr-footer-col a {
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  font-size: 14px;
  transition: color 0.2s;
}
.abr-footer-col a:hover { color: #fff; }
.abr-footer-bottom {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  color: rgba(255, 255, 255, 0.44);
  font-size: 13px;
}
@media (min-width: 700px) {
  .abr-footer-bottom { flex-direction: row; justify-content: space-between; }
}
.abr-footer-socials { display: flex; gap: 10px; }
.abr-footer-social {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: color 0.2s, background 0.2s;
}
.abr-footer-social:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
.abr-footer-social svg { width: 14px; height: 14px; }


/* ════════════════════════════════════════════════════════════════════════
   MOTION — soft fade-up entry animations, respects reduced-motion
   ────────────────────────────────────────────────────────────────────────
   Two distinct systems live here:

     1. .abr-fadeup  — ON-LOAD animation. Fires once the moment the element
        is parsed, on a small stagger. Used for ABOVE-THE-FOLD content (hero
        eyebrow → headline → lede → CTA → stats) so the page assembles itself
        as it paints. Do NOT use it below the fold — the animation finishes
        before the user scrolls to it, so they only ever see the end state.

     2. .abr-reveal  — ON-SCROLL animation. Starts hidden and only animates
        when the element scrolls into view (the .is-visible class is toggled
        by /js/reveal.js via IntersectionObserver). Used for EVERYTHING BELOW
        THE FOLD (section headings, cards, pricing tiers, testimonials …) so
        each block animates in exactly as it enters the viewport.
   ════════════════════════════════════════════════════════════════════════ */

/* ── 1. On-load fade-up (above the fold) ──────────────────────────────── */
.abr-fadeup {
  opacity: 0;
  transform: translateY(28px);
  animation: abrFadeUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.abr-fadeup-1 { animation-delay: 0.08s; }
.abr-fadeup-2 { animation-delay: 0.18s; }
.abr-fadeup-3 { animation-delay: 0.28s; }
.abr-fadeup-4 { animation-delay: 0.40s; }
.abr-fadeup-5 { animation-delay: 0.52s; }
@keyframes abrFadeUp {
  to { opacity: 1; transform: translateY(0); }
}

/* ── 2. On-scroll reveal (below the fold) ─────────────────────────────────
   Resting (hidden) state: nudged 32px down + slightly scaled so the entry
   reads as a gentle "rise + settle" rather than a flat opacity fade. The
   transition (NOT an animation) plays when /js/reveal.js adds .is-visible.

   Why a transition, not a CSS animation: IntersectionObserver toggles a
   class, and transitions are the natural fit for class-driven state changes
   — they're also trivially reversible and never "use themselves up" the way
   a forwards-filled animation does. The cubic-bezier matches .abr-fadeup so
   the on-load and on-scroll motion feel like one family.

   will-change is intentionally omitted from the resting state (it would
   promote every reveal element to its own layer for the whole page life);
   the transform/opacity pair is cheap enough to composite without it. */
.abr-reveal {
  opacity: 0;
  transform: translateY(32px) scale(0.985);
  transition:
    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.abr-reveal.is-visible {
  opacity: 1;
  transform: none;
}
/* Stagger helpers — put them on sibling cards inside a row so they cascade
   in one after another rather than all snapping together. Delays only apply
   to the REVEAL (the hide state is instant), so nothing flashes on load. */
.abr-reveal-1.is-visible { transition-delay: 0.06s; }
.abr-reveal-2.is-visible { transition-delay: 0.12s; }
.abr-reveal-3.is-visible { transition-delay: 0.18s; }
.abr-reveal-4.is-visible { transition-delay: 0.24s; }
.abr-reveal-5.is-visible { transition-delay: 0.30s; }
.abr-reveal-6.is-visible { transition-delay: 0.36s; }

/* No-JS / no-IntersectionObserver fallback: if the script never runs, the
   <html> element never gets .abr-reveal-ready, so every reveal element falls
   back to fully visible. This guarantees content is NEVER stuck hidden when
   JS is disabled or fails — progressive enhancement, not a hard dependency.
   reveal.js adds .abr-reveal-ready to <html> the instant it executes. */
html:not(.abr-reveal-ready) .abr-reveal {
  opacity: 1;
  transform: none;
  transition: none;
}


/* ════════════════════════════════════════════════════════════════════════
   CROSS-DOCUMENT (MPA) VIEW TRANSITIONS
   ────────────────────────────────────────────────────────────────────────
   Every redesigned page links this stylesheet, so opting the WHOLE site
   into same-origin cross-document transitions is a single declaration here.
   Supported in Chrome 126+ / Safari 18.2+; everywhere else the navigation
   just happens instantly (the opt-in is silently ignored — no fallback code
   needed, the browser simply doesn't animate).

     • root crossfade + a 6px lift on the incoming page → a soft, fast
       "settle" between pages rather than a hard white flash.
     • Shared elements (nav pill, footer card, brand logo) carry stable
       view-transition-names below, so they MORPH in place across the
       navigation instead of fading out and back in. That makes the floating
       nav feel like one persistent chrome element across the whole site. */
@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: abrVtFadeOut 0.34s cubic-bezier(0.4, 0, 1, 1) both;
}
::view-transition-new(root) {
  animation: abrVtFadeIn 0.52s cubic-bezier(0.22, 1, 0.36, 1) both;
}
/* Bumped from a 6px nudge to a clearer "the old page recedes, the new one
   rises into place" move — bigger travel + a gentle scale. The page bg is
   black, so the brief edge sliver from scaling the incoming snapshot below
   1.0 is invisible. Nav/logo/footer carry their own view-transition-names,
   so they morph in place and aren't dragged by this root motion. */
@keyframes abrVtFadeOut {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(-24px) scale(1.015); }
}
@keyframes abrVtFadeIn {
  from { opacity: 0; transform: translateY(40px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Shared persistent chrome — these morph between pages instead of fading.
   The names must be UNIQUE per page and only appear on ONE element each
   (the API requirement); the nav/footer/logo are singletons on every page
   so they qualify. Snapshot containment keeps the morph crisp.

   NOTE: the floating nav uses position:fixed. During a view transition the
   browser lifts named elements into the ::view-transition layer; a fixed
   element keeps its visual position, so the pill stays pinned and morphs in
   place rather than scrolling away — exactly what we want. */
.abr-nav-inner { view-transition-name: abr-nav; }
.abr-nav-logo  { view-transition-name: abr-logo; }
.abr-footer-card { view-transition-name: abr-footer; }


/* ════════════════════════════════════════════════════════════════════════
   REDUCED MOTION — one switch disables every animated system above
   ────────────────────────────────────────────────────────────────────────
   Covers: on-load fade-ups, on-scroll reveals, AND cross-document view
   transitions. Reveal elements are forced visible (never trapped hidden),
   and named elements drop their view-transition-name so the browser does an
   instant cut between pages instead of a morph.
   ════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .abr-page *,
  .abr-page *::before,
  .abr-page *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  /* Force scroll-reveal content visible regardless of observer state. */
  .abr-reveal {
    opacity: 1 !important;
    transform: none !important;
  }
  /* Instant page cut — no root crossfade, no shared-element morph. */
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
  .abr-nav-inner,
  .abr-nav-logo,
  .abr-footer-card { view-transition-name: none; }
}


/* ════════════════════════════════════════════════════════════════════════
   INFO / LEGAL DOCUMENT PAGES — shared layout for the text-heavy pages
   (privacy, terms, agreement, consent, guidelines, brand-guidelines, …).
   These all use the same .page-* / .section-* structure with a centred
   hero icon, gradient-accent H1, lede, and icon-led H2 sections. Kept here
   (not inline per page) because six+ pages share it verbatim.
   ════════════════════════════════════════════════════════════════════════ */
.page-shell { max-width: 820px; margin: 0 auto; padding: 150px 24px 90px; position: relative; z-index: 1; }
/* Hero icon hidden — the info pages lead with the glass pill -> headline,
   exactly like /about. (Markup left in place so it's a one-line revert.) */
.page-hero-icon { display: none; }
/* Eyebrow rendered as a centred glass pill — matches the /about hero. */
.page-eyebrow {
  display: flex; width: fit-content; margin: 0 auto 18px;
  align-items: center; padding: 8px 18px; border-radius: 999px;
  font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72); font-weight: 500;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.14);
  position: relative; overflow: hidden;
}
.page-eyebrow::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.4px;
  background: linear-gradient(180deg, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.15) 20%, rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%, rgba(255,255,255,0.15) 80%, rgba(255,255,255,0.45) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}
.page-h1 {
  font-size: clamp(56px, 10vw, 128px); line-height: 0.95; font-weight: 600;
  margin: 0 0 24px; letter-spacing: -0.06em; color: #fff; text-align: center;
}
.page-h1 .grad {
  /* Instrument Serif italic gradient accent — same treatment as the
     .abr-serif accent words on /about and the landing. */
  font-family: 'Instrument Serif', serif; font-style: italic; font-weight: 400;
  background-image: linear-gradient(135deg, #a5b4fc 0%, #818cf8 50%, #67e8f9 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  display: inline-block; letter-spacing: 0.02em;
  padding-inline-end: 0.1em; padding-block-end: 0.18em; margin-block-end: -0.18em;
}
.page-meta { font-size: 13px; color: rgba(255, 255, 255, 0.45); margin: 0 auto 44px; text-align: center; }
.page-lede, .page-lead { font-size: 21px; line-height: 1.72; color: rgba(255, 255, 255, 0.74); margin: 0 auto 56px; max-width: 700px; }
.section-h2 {
  font-size: 30px; font-weight: 600; margin: 58px 0 18px; letter-spacing: -0.02em;
  color: #fff; display: flex; align-items: center; gap: 12px;
}
.section-h2 .section-icon {
  width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px;
  background: rgba(129, 140, 248, 0.14); color: #a5b4fc; flex: 0 0 auto;
}
.section-h2 .section-icon svg { width: 18px; height: 18px; }
.section-p { font-size: 18.5px; line-height: 1.74; color: rgba(255, 255, 255, 0.72); margin: 0 0 18px; }
.section-p b { color: #fff; font-weight: 600; }
.section-list { margin: 0 0 18px; padding-left: 22px; color: rgba(255, 255, 255, 0.72); font-size: 18.5px; line-height: 1.74; }
.section-list li { margin-bottom: 8px; }
.section-list li b { color: #fff; font-weight: 600; }
.section-p a, .section-list a, .page-lede a {
  color: #a5b4fc; text-decoration: underline; text-underline-offset: 2px;
}
.section-p a:hover, .section-list a:hover, .page-lede a:hover { color: #c7d2fe; }
@media (max-width: 640px) {
  .page-shell { padding: 120px 20px 64px; }
  .page-lede, .section-p { text-align: center; }
  .section-h2 { justify-content: center; text-align: center; }
  .section-list { list-style-position: inside; padding-left: 0; text-align: center; }
}

/* ── Blog post article — the /blog/* essays share this .post-* layout ── */
.post-shell { max-width: 720px; margin: 0 auto; padding: 150px 24px 90px; position: relative; z-index: 1; }
.post-back { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: rgba(255,255,255,.55); text-decoration: none; margin-bottom: 24px; font-weight: 500; }
.post-back:hover { color: #a5b4fc; }
/* Post eyebrow — same glass pill, left-aligned (articles aren't centred). */
.post-eyebrow {
  display: inline-flex; align-items: center; padding: 8px 18px; border-radius: 999px;
  font-size: 11px; letter-spacing: .3em; text-transform: uppercase;
  color: rgba(255,255,255,.72); font-weight: 500; margin-bottom: 16px;
  background: rgba(255,255,255,.05);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.14);
  position: relative; overflow: hidden;
}
.post-eyebrow::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.4px;
  background: linear-gradient(180deg, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.15) 20%, rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%, rgba(255,255,255,0.15) 80%, rgba(255,255,255,0.45) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}
.post-h1 { font-size: clamp(36px, 5.5vw, 52px); line-height: 1.08; font-weight: 600; margin: 0 0 20px; letter-spacing: -.03em; color: #fff; }
.post-meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; color: rgba(255,255,255,.55); font-size: 14px; margin-bottom: 40px; padding-bottom: 28px; border-bottom: 1px solid rgba(255,255,255,.12); }
.post-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: rgba(255,255,255,.35); }
.post-author { display: flex; align-items: center; gap: 8px; }
.post-author-av { width: 30px; height: 30px; border-radius: 50%; background-image: linear-gradient(135deg, #6366f1, #2959d9, #36d5ce); display: grid; place-items: center; color: #fff; font-size: 12px; font-weight: 700; }
.post-body { font-size: 20px; line-height: 1.78; color: rgba(255,255,255,.74); }
.post-body p { margin: 0 0 22px; }
.post-body h2 { font-size: 29px; font-weight: 600; margin: 46px 0 16px; letter-spacing: -.02em; color: #fff; }
.post-body h3 { font-size: 22px; font-weight: 600; margin: 32px 0 12px; color: #fff; }
.post-body a { color: #a5b4fc; font-weight: 500; text-decoration: underline; text-decoration-color: rgba(165,180,252,.4); text-underline-offset: 3px; }
.post-body a:hover { text-decoration-color: #a5b4fc; }
.post-body strong { color: #fff; font-weight: 600; }
.post-body em { color: rgba(255,255,255,.82); }
.post-body ul, .post-body ol { margin: 0 0 22px; padding-left: 22px; }
.post-body li { margin-bottom: 8px; }
.post-body blockquote { border-left: 3px solid #818cf8; padding: 4px 0 4px 20px; margin: 28px 0; color: rgba(255,255,255,.65); font-style: italic; }
.post-divider { height: 1px; background: linear-gradient(to right, transparent, rgba(129,140,248,.4), transparent); margin: 56px 0 32px; }
.post-footer { font-size: 14px; color: rgba(255,255,255,.55); text-align: center; line-height: 1.7; }
.post-footer a { color: #a5b4fc; font-weight: 600; text-decoration: none; }
@media (max-width: 640px) { .post-shell { padding: 120px 20px 64px; } .post-body { font-size: 18.5px; } }