/* ai.trulioo.com - agentic landing shared design layer.
 *
 * ONE shared stylesheet composed by all three landing variants (v1 narrative+grammar
 * parity, v2 strict corporate replica, v3 agent-first re-envision). Layout + component
 * classes only; every color references a shared --t- / --md- token (theme.css), so
 * light/dark flips are correct by construction and there is no raw hex to drift.
 *
 * Constraints honored (see _design/ADVERSARIAL-VERDICT.md):
 *  - No CDN / no external webfont (CSP style-src 'self' 'unsafe-inline'): we match the
 *    corporate TYPE SCALE with the system stack, never its typeface.
 *  - Theme = prefers-color-scheme only (HEAD-STANDARD); no toggle/cookie/localStorage.
 *  - WCAG AA in both themes; reduced-motion honored; skip-link first.
 */

/* ------------------------------------------------------------------ tokens */
/* Local --a-* layer mapping to the shared design system, mirroring the existing
   showcase --ai-* pattern. White marketing page in light, graphite in dark. */
:root {
  --a-max: 1200px;
  --a-bg: var(--md-surface);                 /* #FFFFFF */
  --a-bg-alt: var(--md-surface-container);   /* #F2F2F2 */
  --a-bg-deep: var(--t-dark-green);          /* #172D2D - dark hero band */
  --a-fg: var(--md-on-surface);              /* #121212 */
  --a-muted: var(--md-on-surface-variant);   /* #404040 */
  --a-faint: var(--t-gray-4);                /* #808080 - clears AA on white/alt */
  --a-border: var(--md-outline-variant);     /* #D2D2D2 hairline */
  --a-border-2: var(--md-outline);           /* #808080 stronger edge */
  --a-accent: var(--t-accent);               /* mid-green; flips light-green in dark */
  --a-accent-on: #FFFFFF;                    /* ink ON the accent (skip link) - flips in dark */
  --a-btn: var(--t-mid-green);               /* #004C45 deep-green fill (does NOT flip) */
  /* --a-btn-on rides on --a-btn (deep green in BOTH themes), so it stays white in both.
     Do NOT point it at --a-accent-on/--md-on-primary, which flip to dark ink. */
  --a-btn-on: #FFFFFF;
  --a-btn-hover: #003830;
  --a-card: var(--md-surface);               /* white card */
  /* Verified vs test/sandbox state - reserved, ALWAYS paired with a text label. */
  --a-verified: var(--t-accent);
  --a-test: var(--md-tertiary);              /* amber */
  /* Numbered pillar numeral: token color meeting 3:1 at large size (not a faint wash). */
  --a-numeral: var(--a-border-2);
}
html.dark {
  --a-bg: var(--md-surface);                 /* #0E100F */
  --a-bg-alt: var(--md-surface-container);   /* #171A19 */
  --a-bg-deep: #0A1413;                      /* deeper graphite band */
  --a-fg: var(--md-on-surface);              /* #ECEFEE */
  --a-muted: var(--md-on-surface-variant);   /* #A8B0AE */
  --a-faint: var(--t-gray-4);
  --a-border: var(--md-outline-variant);     /* #262B2A */
  --a-border-2: var(--md-outline);           /* #3A403E */
  --a-accent-on: var(--md-on-primary);       /* dark ink on light-green accent */
  --a-card: var(--md-surface-container);     /* elevated card on graphite */
  --a-numeral: var(--a-border-2);
}

body {
  /* Brand UI face (Inter) from DS 3.0; system stack as fallback. The V2 serif
   * display headings (var(--serif)) are an intentional editorial choice, kept. */
  font-family: var(--font-ui, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
  background: var(--a-bg); color: var(--a-fg);
  -webkit-font-smoothing: antialiased;
}

/* Trulioo Numerals - the real brand numeral face (self-hosted, so CSP-safe),
 * matching trulioo.com/solutions/* exactly: big outline numerals as TEXT, green,
 * weight 400. Replaces the earlier dotted-SVG stand-ins so 01/02/03 render 1:1
 * with the corporate site. */
@font-face {
  font-family: "Trulioo Numerals";
  src: url("fonts/trulioo-numerals.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
.num {
  font-family: "Trulioo Numerals", ui-monospace, monospace;
  font-weight: 400;
  color: var(--t-light-green);
  line-height: 0.9;          /* tight box so the glyph never overlaps the heading below */
  font-size: clamp(3.5rem, 6vw, 6rem);
  letter-spacing: 0.02em;
  display: block;
  margin-bottom: 0.75rem;    /* gap between numeral and the title beneath it */
}
.wrap { max-width: var(--a-max); margin: 0 auto; padding: 0 clamp(1.5rem, 5vw, 4rem); }
.wrap--narrow { max-width: 860px; }

/* type scale (~1.25-1.333 modular; corporate scale, system typeface) */
.eyebrow { display: inline-block; font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--a-accent); font-weight: 700; margin: 0 0 0.75rem; }
.eyebrow--crumb { color: var(--a-faint); font-weight: 600; letter-spacing: 0.08em; }

/* skip link (a11y) - first focusable element */
.skip { position: absolute; left: -999px; }
.skip:focus { left: 1rem; top: 0.75rem; z-index: 100; background: var(--a-accent); color: var(--a-accent-on); padding: 0.5rem 0.9rem; border-radius: 8px; font-weight: 700; text-decoration: none; }

/* ------------------------------------------------------------- announcement */
/* Corporate-parity thin promo strip (v2). We repurpose it for a LIVE message, not a
   gated regulatory guide (see anti-pattern in the brief). */
.promo { background: var(--a-bg-deep); color: #EAF3EF; font-size: 0.85rem; }
.promo__in { max-width: var(--a-max); margin: 0 auto; padding: 0.5rem 1.5rem; display: flex; align-items: center; justify-content: center; gap: 0.6rem; text-align: center; }
.promo a { color: #A4DCB4; text-decoration: none; font-weight: 600; }
.promo a:hover { text-decoration: underline; }

/* --------------------------------------------------------------------- header */
.hdr { border-bottom: 1px solid var(--a-border); background: var(--md-surface); position: sticky; top: 0; z-index: 50; }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hdr { background: var(--md-scrim); -webkit-backdrop-filter: var(--md-blur); backdrop-filter: var(--md-blur); }
}
.hdr__in { display: flex; align-items: center; gap: 1.25rem; height: 3.75rem; }
.brand { display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; color: var(--a-fg); font-weight: 800; letter-spacing: -0.01em; transition: opacity .15s ease; }
.brand:hover, .brand:focus-visible { text-decoration: none; opacity: 0.75; }
.brand:focus-visible { outline: 2px solid var(--md-focus-ring); outline-offset: 3px; border-radius: 4px; }
.brand__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--a-accent); flex: 0 0 auto; }
/* Official Trulioo wordmark (swaps light/dark via the <picture> source). */
.brand__logo { display: block; height: 44px; width: auto; }
.brand__by { color: var(--a-faint); font-weight: 400; font-size: 0.9rem; }
.hdr__links { display: none; gap: 0.25rem; margin-left: 0.5rem; }
.hdr__links a { color: var(--a-muted); text-decoration: none; font-size: 0.9rem; font-weight: 500; padding: 0.4rem 0.6rem; border-radius: 6px; }
.hdr__links a:hover { color: var(--a-fg); background: var(--a-bg-alt); }
.hdr__spacer { flex: 1; }
.hdr__cta { display: none; }
@media (min-width: 800px) { .hdr__links { display: flex; } .hdr__cta { display: inline-flex; } }

/* -------------------------------------------------------------------- buttons */
.btn { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.7rem 1.15rem; border-radius: 10px; font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; border: 1.5px solid transparent; background: var(--a-btn); color: var(--a-btn-on); transition: background .15s ease, border-color .15s ease, transform .05s ease; }
.btn:hover { background: var(--a-btn-hover); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--md-focus-ring); outline-offset: 2px; }
.btn--ghost { background: transparent; color: var(--a-fg); border-color: var(--a-border-2); }
.btn--ghost:hover { background: var(--a-bg-alt); border-color: var(--a-accent); }
.btn--sm { padding: 0.5rem 0.85rem; font-size: 0.9rem; }
.btn--lg { padding: 0.85rem 1.4rem; font-size: 1.05rem; }
.btn[disabled] { opacity: 0.55; cursor: default; }
/* text link CTA (enterprise fork - deliberately quiet, not a filled button) */
.tlink { display: inline-flex; align-items: center; gap: 0.3rem; color: var(--a-accent); font-weight: 600; font-size: 0.92rem; text-decoration: none; }
.tlink:hover { text-decoration: underline; }

/* ---------------------------------------------------------------------- hero */
.hero { padding: 5.5rem 0 5rem; position: relative; isolation: isolate; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: -20% -10% 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(48rem 30rem at 18% -8%, color-mix(in srgb, var(--t-mid-green) 16%, transparent) 0%, transparent 60%),
    radial-gradient(42rem 26rem at 92% 4%, color-mix(in srgb, var(--t-accent) 14%, transparent) 0%, transparent 62%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 55%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0, #000 55%, transparent 100%);
}
html.dark .hero::before {
  background:
    radial-gradient(48rem 30rem at 18% -8%, color-mix(in srgb, var(--t-mid-green) 34%, transparent) 0%, transparent 60%),
    radial-gradient(42rem 26rem at 92% 4%, color-mix(in srgb, var(--t-accent) 20%, transparent) 0%, transparent 62%);
}
.hero > .wrap { position: relative; z-index: 1; }
.hero__grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 3rem; align-items: center; }
@media (max-width: 900px) { .hero__grid { grid-template-columns: 1fr; gap: 2.5rem; } }
.hero__title { font-size: clamp(2.4rem, 5vw, 3.6rem); line-height: 1.05; margin: 0 0 1.25rem; font-weight: 800; letter-spacing: -0.02em; }
.hero__lead { font-size: 1.15rem; line-height: 1.6; color: var(--a-muted); max-width: 54ch; margin: 0 0 1.75rem; }
.hero__lead .em { color: var(--a-accent); font-weight: 600; }
.hero__cta { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }
.hero__cta-note { display: block; color: var(--a-faint); font-size: 0.82rem; margin: 0.7rem 0 0; }
.hero__ent { margin: 1.1rem 0 0; }

/* honest stat strip (satisfies the STANDARD; value not borrowed KYB volume) */
.stats { list-style: none; margin: 2rem 0 0; padding: 1.5rem 0 0; border-top: 1px solid var(--a-border); display: flex; flex-wrap: wrap; gap: 1.75rem 2.25rem; }
.stats li { display: flex; flex-direction: column; gap: 0.15rem; font-size: 0.88rem; color: var(--a-muted); }
.stats b { font-size: 1.35rem; font-weight: 800; color: var(--a-fg); letter-spacing: -0.01em; }

/* --------------------------------------------------- scripted agent session */
/* Reused from the existing showcase: plain-language chat replay. Theme-aware,
   height reserved, reduced-motion honored (JS + CSS). */
.sesh { display: flex; flex-direction: column; border-radius: 1rem; overflow: hidden; background: var(--a-card); border: 1px solid var(--a-border); box-shadow: 0 20px 50px -22px rgba(15,26,25,0.22); max-width: 26rem; margin-left: auto; }
html.dark .sesh { box-shadow: 0 24px 60px -24px rgba(0,0,0,0.55); }
.sesh__bar { display: flex; align-items: center; gap: 0.55rem; padding: 0.7rem 1rem; background: var(--a-bg-alt); border-bottom: 1px solid var(--a-border); }
.sesh__avatar { width: 1.6rem; height: 1.6rem; border-radius: 50%; display: grid; place-items: center; background: var(--a-btn); color: #fff; flex: 0 0 auto; }
.sesh__avatar svg { width: 0.95rem; height: 0.95rem; }
.sesh__who { display: flex; flex-direction: column; line-height: 1.15; }
.sesh__name { font-size: 0.82rem; font-weight: 700; color: var(--a-fg); }
.sesh__sub { font-size: 0.66rem; color: var(--a-faint); }
.sesh__live { margin-left: auto; display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--a-faint); }
.sesh__live .pulse { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--a-accent); animation: sesh-pulse 1.8s ease-in-out infinite; }
@keyframes sesh-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
.sesh__body { flex: 1; padding: 0.9rem 0.85rem; display: flex; flex-direction: column; gap: 0.55rem; min-height: 17rem; overflow: hidden; }
.sb { opacity: 0; transform: translateY(6px); transition: opacity 0.3s ease, transform 0.3s ease; max-width: 90%; }
.sb.show { opacity: 1; transform: none; }
.sb__msg { font-size: 0.82rem; line-height: 1.45; padding: 0.5rem 0.75rem; border-radius: 0.9rem; }
.sb.user { align-self: flex-end; }
.sb.user .sb__msg { background: var(--a-btn); color: #fff; border-bottom-right-radius: 0.3rem; }
.sb.agent { align-self: flex-start; }
.sb.agent .sb__msg { background: var(--a-bg-alt); color: var(--a-fg); border: 1px solid var(--a-border); border-bottom-left-radius: 0.3rem; }
#sbReply { min-height: 2.6rem; }
.caret::after { content: "▋"; color: var(--a-accent); animation: sesh-blink 1s step-end infinite; }
@keyframes sesh-blink { 50% { opacity: 0; } }
.sb__typing { display: inline-flex; gap: 0.28rem; padding: 0.7rem 0.85rem; }
.sb__typing span { width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--a-faint); animation: sesh-typing 1.2s ease-in-out infinite; }
.sb__typing span:nth-child(2) { animation-delay: 0.18s; } .sb__typing span:nth-child(3) { animation-delay: 0.36s; }
@keyframes sesh-typing { 0%,60%,100% { opacity: 0.3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
.sb__chips { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.6rem; }
.sesh-pill { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.72rem; font-weight: 700; padding: 0.28rem 0.65rem; border-radius: 999px; background: color-mix(in srgb, var(--a-accent) 16%, transparent); color: var(--a-accent); border: 1px solid color-mix(in srgb, var(--a-accent) 35%, transparent); }
.sesh-chip { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.68rem; font-weight: 600; padding: 0.24rem 0.6rem; border-radius: 999px; background: var(--a-bg-alt); color: var(--a-muted); border: 1px solid var(--a-border-2); }
.sesh__replay { visibility: hidden; margin: 0.2rem 1rem 0.9rem; }
.sesh__replay.show { visibility: visible; }
.sesh__replay button { font: inherit; font-size: 0.7rem; font-weight: 600; color: var(--a-muted); background: var(--a-bg-alt); border: 1px solid var(--a-border-2); border-radius: 6px; padding: 0.3rem 0.7rem; cursor: pointer; }
.sesh__replay button:hover { color: var(--a-accent); border-color: var(--a-accent); }

/* ------------------------------------------------------------------ sections */
.band { padding: clamp(4rem, 8vw, 7rem) 0; border-top: 1px solid var(--a-border); }
.band--alt { background: var(--a-bg-alt); }
.band--deep { background: var(--a-bg-deep); color: #EAF3EF; border-top: none; }
.band--deep .section__sub, .band--deep .prose { color: #B7C9C2; }
.band--deep .section__title { color: #FFFFFF; }
/* Reading measure: cap body copy near ~65ch so lines stay comfortable on wide
 * viewports (was 42-46rem / ~85-90ch, too long). */
.section__head { max-width: 40rem; margin: 0 0 2rem; }
.section__title { font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 800; margin: 0; letter-spacing: -0.015em; line-height: 1.15; }
.section__sub { color: var(--a-muted); font-size: 1.02rem; line-height: 1.6; margin: 0.6rem 0 0; max-width: 36rem; }
.prose { color: var(--a-muted); font-size: 1.02rem; line-height: 1.65; max-width: 36rem; }
.prose strong { color: var(--a-fg); }

/* alternating text + illustration blocks (corporate rhythm) */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.split + .split { margin-top: 3.5rem; }
.split:nth-of-type(even) .split__media { order: 2; }
@media (max-width: 820px) { .split { grid-template-columns: 1fr; gap: 1.5rem; } .split:nth-of-type(even) .split__media { order: 0; } }
.split__media .figure { border: 1px solid var(--a-border); border-radius: 16px; overflow: hidden; background: var(--a-bg-alt); aspect-ratio: 4 / 3; display: grid; place-items: center; }
.figure__ph { color: var(--a-faint); font-size: 0.85rem; text-align: center; padding: 2rem 1rem; }

/* -------------------------------------------------- numbered pillars (01/02/03) */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
@media (max-width: 820px) { .pillars { grid-template-columns: 1fr; } }
.pillar { display: flex; flex-direction: column; background: var(--a-card); border: 1px solid var(--a-border); border-radius: 16px; padding: 1.6rem; transition: border-color .15s ease, transform .15s ease; text-decoration: none; color: var(--a-fg); }
/* Hover lifts the card + accents the border; the base `a:hover` underline must
 * NOT apply to the whole card - only the CTA link underlines (see __link below). */
a.pillar:hover { border-color: var(--a-accent); transform: translateY(-2px); text-decoration: none; }
.pillar__n { font-size: 2.4rem; font-weight: 800; line-height: 1; color: var(--a-numeral); letter-spacing: -0.02em; margin-bottom: 0.75rem; }
.pillar__name { font-size: 1.15rem; font-weight: 800; margin: 0 0 0.15rem; }
.pillar__map { font-size: 0.72rem; color: var(--a-faint); font-weight: 600; margin: 0 0 0.6rem; }
.pillar__desc { color: var(--a-muted); font-size: 0.95rem; line-height: 1.55; margin: 0 0 1rem; flex: 1; }
.pillar__foot { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: auto; }
.pillar__link { font-weight: 700; font-size: 0.92rem; color: var(--a-accent); display: inline-flex; align-items: center; gap: 0.3rem; }
a.pillar:hover .pillar__link { text-decoration: underline; }

/* ------------------------------------------------------------- product grid (two-tier) */
.pgrid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.pcard { display: flex; flex-direction: column; background: var(--a-card); border: 1px solid var(--a-border); border-radius: 14px; padding: 1.35rem; transition: border-color .15s ease, transform .15s ease; }
a.pcard { text-decoration: none; color: var(--a-fg); }
.pcard--live { cursor: pointer; }
.pcard--live:hover { border-color: var(--a-accent); transform: translateY(-2px); }
.pcard--soon { background: var(--a-bg-alt); border-style: dashed; }
.pcard__head { display: flex; align-items: baseline; gap: 0.6rem; margin-bottom: 0.6rem; }
.pcard__name { font-size: 1.08rem; font-weight: 800; margin: 0; }
.pcard__codename { font-size: 0.74rem; color: var(--a-faint); font-weight: 500; }
.pcard__desc { color: var(--a-muted); font-size: 0.92rem; line-height: 1.55; margin: 0 0 1rem; flex: 1; }
.pcard__foot { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: auto; }
.pcard__link { font-weight: 700; font-size: 0.9rem; color: var(--a-accent); display: inline-flex; align-items: center; gap: 0.3rem; }
.pcard--live:hover .pcard__link { text-decoration: underline; }
.tier-label { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--a-faint); font-weight: 700; margin: 2rem 0 0.85rem; }
.tier-label:first-child { margin-top: 0; }

/* status badges */
.badge { display: inline-flex; align-items: center; justify-content: center; padding: 0.2rem 0.7rem; border-radius: 999px; white-space: nowrap; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em; }
.badge--live { background: color-mix(in srgb, var(--a-accent) 20%, transparent); color: var(--a-accent); gap: 0.35rem; }
.badge--live::before { content: ""; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--a-accent); flex-shrink: 0; }
.badge--soon { background: var(--a-bg-alt); color: var(--a-muted); border: 1px solid var(--a-border-2); }

/* --------------------------------------------------------- lifecycle steps (01-04) */
.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; counter-reset: step; }
@media (max-width: 820px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }
.step { position: relative; padding-top: 2.6rem; }
.step__n { position: absolute; top: 0; left: 0; font-size: 1.5rem; font-weight: 800; color: var(--a-numeral); line-height: 1; }
.step h3 { font-size: 1.05rem; font-weight: 750; margin: 0 0 0.4rem; }
.step p { color: var(--a-muted); font-size: 0.92rem; line-height: 1.55; margin: 0; }

/* ------------------------------------------------------------- advantage grid */
.adv { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 2.5rem 2rem; }
@media (max-width: 820px) { .adv { grid-template-columns: 1fr 1fr; gap: 2rem 1.5rem; } }
@media (max-width: 520px) { .adv { grid-template-columns: 1fr; } }
.adv__n { font-size: 1.1rem; font-weight: 800; color: var(--a-accent); }
.adv h3 { font-size: 1.08rem; font-weight: 750; margin: 0.4rem 0 0.4rem; }
.adv p { color: var(--a-muted); font-size: 0.95rem; line-height: 1.6; margin: 0; }

/* ------------------------------------------------ MCP connect / code panel */
/* The Stripe "code-in-hero" moment, agent-first: the real thing an operator pastes. */
.connect { border: 1px solid var(--a-border); border-radius: 16px; overflow: hidden; background: var(--a-card); }
.connect__tabs { display: flex; gap: 0; background: var(--a-bg-alt); border-bottom: 1px solid var(--a-border); overflow-x: auto; }
.connect__tab { appearance: none; border: none; background: transparent; font: inherit; font-size: 0.85rem; font-weight: 600; color: var(--a-muted); padding: 0.65rem 1rem; cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; }
.connect__tab[aria-selected="true"] { color: var(--a-accent); border-bottom-color: var(--a-accent); background: var(--a-card); }
.connect__tab:focus-visible { outline: 2px solid var(--md-focus-ring); outline-offset: -2px; }
.connect__panel { position: relative; }
.connect__panel[hidden] { display: none; }
.code { margin: 0; padding: 1.1rem 1.2rem; overflow-x: auto; font: 0.82rem/1.7 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--a-fg); background: var(--a-card); white-space: pre; }
.code .tok-key { color: var(--t-blue-100); } html.dark .code .tok-key { color: var(--t-blue); }
.code .tok-str { color: var(--a-accent); }
.code .tok-cmt { color: var(--a-faint); }
.copy-btn { position: absolute; top: 0.6rem; right: 0.6rem; font: inherit; font-size: 0.72rem; font-weight: 600; color: var(--a-muted); background: var(--a-bg-alt); border: 1px solid var(--a-border-2); border-radius: 6px; padding: 0.25rem 0.6rem; cursor: pointer; transition: color .15s, border-color .15s; }
.copy-btn:hover { color: var(--a-accent); border-color: var(--a-accent); }
.copy-btn.copied { color: var(--a-accent); border-color: var(--a-accent); }
.copy-btn:focus-visible { outline: 2px solid var(--md-focus-ring); outline-offset: 2px; }

/* ------------------------------------------------------------- resource card */
.resource { display: grid; grid-template-columns: auto 1fr auto; gap: 1.25rem; align-items: center; background: var(--a-bg-alt); border: 1px solid var(--a-border); border-radius: 16px; padding: 1.5rem 1.75rem; }
@media (max-width: 640px) { .resource { grid-template-columns: 1fr; text-align: left; } }
.resource__label { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--a-accent); font-weight: 700; }
.resource h3 { font-size: 1.15rem; font-weight: 750; margin: 0.3rem 0 0.2rem; }
.resource p { color: var(--a-muted); font-size: 0.92rem; margin: 0; }
.resource__ic { width: 3rem; height: 3rem; border-radius: 12px; background: color-mix(in srgb, var(--a-accent) 14%, transparent); color: var(--a-accent); display: grid; place-items: center; }

/* ------------------------------------------------------------- CTA band */
.ctaband { text-align: center; }
.ctaband .section__title { max-width: 30rem; margin: 0 auto; }
.ctaband .prose { margin: 1rem auto 1.75rem; text-align: center; }
.ctaband__row { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; align-items: center; }

/* --------------------------------------------------------------------- footer */
.ai-foot { margin-top: 0; border-top: 1px solid var(--a-border); font-size: 0.8rem; color: var(--a-faint); }
.ai-foot__in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; max-width: var(--a-max); margin: 0 auto; width: 100%; box-sizing: border-box; padding: 1.25rem 1.5rem; }
.ai-foot__home { color: var(--a-muted); text-decoration: none; font-weight: 600; }
.ai-foot__home:hover { color: var(--a-fg); }
.ai-foot__nav { display: flex; gap: 1rem; flex-wrap: wrap; }
.ai-foot__nav a { color: var(--a-faint); text-decoration: none; }
.ai-foot__nav a:hover { color: var(--a-fg); }

/* ------------------------------------------------- scroll reveal (progressive) */
/* Default VISIBLE (no FOUC / agent-readable). JS adds .reveal-on only when JS +
   motion are allowed, then .is-in when the single IntersectionObserver fires. */
.reveal-on { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.reveal-on.is-in { opacity: 1; transform: none; }

/* --------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  .sb, .caret::after, .sesh__live .pulse, .sb__typing span,
  .pcard, .pillar, .reveal-on { transition: none !important; animation: none !important; }
  .sb { opacity: 1 !important; transform: none !important; }
  .caret::after { display: none; }
  .reveal-on { opacity: 1 !important; transform: none !important; }
  a.pcard--live:hover, a.pillar:hover { transform: none; }
}