/* ==========================================================================
   Advanced Sequence — main.css
   Ported from the prototype .dc.html <style> blocks (verbatim), plus the
   prototype's style-hover="..." attributes converted to real CSS :hover rules.

   Because the templates preserve the prototype's INLINE styles for pixel
   fidelity, and inline styles outrank stylesheet rules, the :hover overrides
   below use !important so they win over the inline base values.

   Sections:
     1. Base / global (from Home.dc.html <style>, shared by every page)
     2. Responsive reflow ([data-*] attribute selectors — keep the attributes!)
     3. Hover states (converted from style-hover)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Base / global
   -------------------------------------------------------------------------- */
* { box-sizing: border-box; }
html { scroll-behavior: auto; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  margin: 0;
  background: #05070b;
  color: #e9eef3;
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
::selection { background: rgba(31,224,196,.25); color: #fff; }
a { color: #1fe0c4; text-decoration: none; }
a:hover { color: #3df0d6; }

@keyframes asq-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(7px); } }
@keyframes asq-pulse { 0%,100% { opacity: .5; } 50% { opacity: 1; } }

/* Keyboard focus — visible teal ring for a11y, invisible to mouse users.
   (material-web engineering-pattern reference: accessible interaction states.) */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
[data-size]:focus-visible,
[data-qty]:focus-visible,
[data-filter]:focus-visible,
[data-faq-toggle]:focus-visible {
  outline: 2px solid #1fe0c4;
  outline-offset: 3px;
  border-radius: 2px;
}

/* Respect reduced-motion + guarantee content is visible without JS/animation.
   Reveal/hero-step elements start at opacity:0 and are shown by theme.js; this
   forces them visible when motion is disabled so nothing is ever stuck hidden. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal],
  [data-hero-step],
  [data-coa-row] {
    opacity: 1 !important;
    transform: none !important;
  }
  [data-hero-mark] { clip-path: none !important; }
}

/* --------------------------------------------------------------------------
   2. Responsive reflow (breakpoints 1120 / 1024 / 860 / 640 / 520)
   Driven by [data-*] attributes on the elements — those attributes must be
   preserved on the markup for these rules to bind.
   -------------------------------------------------------------------------- */
@media (max-width:1120px) {
  [data-prod-grid] { grid-template-columns: repeat(2,1fr) !important; }
}
@media (max-width:1024px) {
  [data-grid]  { grid-template-columns: 1fr !important; gap: 46px !important; }
  [data-sect]  { padding-top: 110px !important; padding-bottom: 110px !important; }
  [data-steps] { grid-template-columns: 1fr !important; }
}
@media (max-width:860px) {
  [data-nav-links] { display: none !important; }
}
@media (max-width:640px) {
  [data-prod-grid] { grid-template-columns: 1fr !important; }
  [data-sect]      { padding-top: 92px !important; padding-bottom: 92px !important; }
}
@media (max-width:520px) {
  [data-nav]     { padding-left: 22px !important; padding-right: 22px !important; }
  [data-cta-nav] { padding: 9px 14px !important; font-size: 11px !important; }
}

/* Shop archive grid */
@media (max-width:1120px) { [data-shop-grid] { grid-template-columns: repeat(2,1fr) !important; } }
@media (max-width:640px)  { [data-shop-grid] { grid-template-columns: 1fr !important; } }

/* Single product */
@media (max-width:1024px) {
  [data-pgrid]  { grid-template-columns: 1fr !important; gap: 46px !important; }
  [data-chars]  { grid-template-columns: 1fr !important; }
  [data-visual] { position: static !important; }
}
@media (max-width:860px) { [data-related] { grid-template-columns: 1fr !important; } }
@media (max-width:520px) { [data-tiers]   { grid-template-columns: 1fr 1fr !important; } }

/* About page */
@media (max-width:960px) {
  [data-story] { grid-template-columns: 1fr !important; gap: 34px !important; }
  [data-prin]  { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width:560px) { [data-prin] { grid-template-columns: 1fr !important; } }

/* Lab Results page */
@media (max-width:960px) { [data-cert] { grid-template-columns: 1fr !important; } }

/* FAQ page */
@media (max-width:900px) {
  [data-faq-grid] { grid-template-columns: 1fr !important; gap: 10px !important; }
  [data-faq-side] { position: static !important; }
}

/* ==========================================================================
   BOLD ITERATION — laboratory-instrument / blueprint amplification.
   All additive, dark/teal identity preserved. Reverts to restore-point-pre-bold.
   ========================================================================== */

/* Global blueprint-grid atmosphere (fixed technical texture, screen-blended so
   it adds light without blocking content; masked to fade toward the edges). */
[data-blueprint] {
  position: fixed; inset: 0; z-index: 88; pointer-events: none;
  opacity: .55; mix-blend-mode: screen;
  background-image:
    linear-gradient(rgba(31,224,196,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(31,224,196,.06) 1px, transparent 1px);
  background-size: 60px 60px;
  -webkit-mask-image: radial-gradient(130% 100% at 50% 0%, #000 22%, transparent 80%);
  mask-image: radial-gradient(130% 100% at 50% 0%, #000 22%, transparent 80%);
}

/* Cursor-tracking teal aura (desktop pointers only; soft screen-blend glow). */
[data-cursor-aura] {
  position: fixed; top: 0; left: 0; width: 460px; height: 460px;
  margin: -230px 0 0 -230px; z-index: 87; pointer-events: none; border-radius: 50%;
  opacity: 0; mix-blend-mode: screen; will-change: transform;
  background: radial-gradient(circle, rgba(31,224,196,.16) 0%, rgba(31,224,196,.05) 34%, transparent 66%);
  transition: opacity .5s ease;
}
[data-cursor-aura].is-live { opacity: 1; }

/* Trust marquee — seamless horizontal scroll, pause on hover. */
[data-marquee] { overflow: hidden; }
[data-marquee-track] { display: flex; width: max-content; animation: as-marquee 34s linear infinite; }
[data-marquee]:hover [data-marquee-track] { animation-play-state: paused; }
@keyframes as-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Magnetic 3D tilt (featured cards). Snappy transform transition set by JS. */
[data-tilt] { will-change: transform; transform-style: preserve-3d; }

/* Technical corner brackets — instrument-panel framing. */
.as-bracket { position: relative; }
.as-bracket::before, .as-bracket::after {
  content: ''; position: absolute; width: 20px; height: 20px; pointer-events: none;
  border: 1px solid rgba(31,224,196,.55);
}
.as-bracket::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.as-bracket::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

@media (prefers-reduced-motion: reduce) {
  [data-cursor-aura] { display: none !important; }
  [data-marquee-track] { animation: none !important; }
}

@media (max-width:860px) { [data-stat-grid] { grid-template-columns: 1fr 1fr !important; gap: 30px !important; } }
@media (max-width:480px) { [data-stat-grid] { grid-template-columns: 1fr !important; } }

/* Sequence Notes hub grid */
@media (max-width:960px) { [data-notes-grid] { grid-template-columns: repeat(2,1fr) !important; } }
@media (max-width:640px) { [data-notes-grid] { grid-template-columns: 1fr !important; } }

/* ==========================================================================
   WooCommerce cart / checkout / notices — fit the dark-teal identity.
   Cart & checkout stay on Woo's default templates; this only restyles them.
   ========================================================================== */

/* Notices — the "added to cart" / info / error banners (block + classic). */
.wc-block-components-notice-banner,
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews {
  background: #0a121b !important;
  border: 1px solid rgba(31,224,196,.28) !important;
  border-left: 3px solid #1fe0c4 !important;
  border-radius: 3px !important;
  color: #cdd6df !important;
  font-family: 'Hanken Grotesk', system-ui, sans-serif !important;
  box-shadow: 0 20px 50px -30px rgba(0,0,0,.7) !important;
}
.wc-block-components-notice-banner__content,
.wc-block-components-notice-banner a,
.woocommerce-message a { color: #e9eef3 !important; }
.wc-block-components-notice-banner.is-error,
.woocommerce-error { border-left-color: #e37878 !important; border-color: rgba(227,120,120,.4) !important; }
.wc-block-components-notice-banner svg { fill: #1fe0c4 !important; }

/* Primary WooCommerce buttons -> teal, Space Grotesk. */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit, .wc-block-components-button,
.wp-element-button, .wc-block-cart__submit-button, .checkout-button {
  background: #1fe0c4 !important;
  color: #05070b !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: .05em !important;
  border: none !important;
  border-radius: 2px !important;
  box-shadow: none !important;
  transition: box-shadow .3s ease !important;
}
.woocommerce a.button:hover, .woocommerce button.button:hover,
.wc-block-components-button:hover, .checkout-button:hover {
  box-shadow: 0 0 24px rgba(31,224,196,.5) !important;
}
/* Secondary actions (update cart, apply coupon) -> outline, not solid teal. */
.woocommerce button[name="update_cart"],
.wc-block-components-button.is-secondary, .wc-block-components-button.outlined {
  background: transparent !important;
  color: #e9eef3 !important;
  border: 1px solid rgba(233,238,243,.25) !important;
}

/* Form fields on cart/checkout. */
.woocommerce form .input-text, .woocommerce select, input.qty,
.wc-block-components-text-input input, .wc-block-components-select select,
.wc-block-components-quantity-selector input {
  background: #070c13 !important;
  color: #e9eef3 !important;
  border: 1px solid rgba(233,238,243,.14) !important;
  border-radius: 2px !important;
}
.woocommerce label, .wc-block-components-text-input label,
.wc-block-components-checkout-step__title, .wc-block-components-title { color: #93a1b0 !important; }

/* Block country/state select control (was rendering on white). */
.wc-blocks-components-select__container {
  background: #070c13 !important;
  border: 1px solid rgba(233,238,243,.14) !important;
  border-radius: 2px !important;
}
.wc-blocks-components-select__select { background: transparent !important; color: #e9eef3 !important; }
.wc-blocks-components-select__label { color: #93a1b0 !important; }

/* Panels, tables, totals -> hairline borders on dark. */
.shop_table, .cart_totals table, .wc-block-components-totals-item,
.wc-block-components-panel, .wc-block-cart-items, .wc-block-checkout__main {
  border-color: rgba(233,238,243,.1) !important;
}
.woocommerce table.shop_table th, .woocommerce table.shop_table td { border-color: rgba(233,238,243,.08) !important; }
.wc-block-components-totals-item__value, .order-total .amount { color: #fff !important; }

/* Post prose (single note body) */
.as-prose p { font-size: 17px; line-height: 1.85; color: #adb9c5; margin: 0 0 22px; }
.as-prose p:last-child { margin-bottom: 0; }
.as-prose a { color: #1fe0c4; }
.as-prose em { color: #e9eef3; font-style: italic; }
.as-prose h2, .as-prose h3 { font-family: 'Space Grotesk', sans-serif; color: #fff; letter-spacing: -.01em; line-height: 1.15; margin: 34px 0 14px; }

/* --------------------------------------------------------------------------
   3. Hover states (converted from prototype style-hover="...")
   -------------------------------------------------------------------------- */
/* Nav text links (base color #93a1b0 set inline) */
.as-nav-link:hover { color: #1fe0c4 !important; }

/* Primary teal CTA — nav "BROWSE CATALOG" */
.as-cta-nav:hover { box-shadow: 0 0 24px rgba(31,224,196,.5) !important; color: #05070b !important; }

/* Primary teal CTA — larger hero/section buttons */
.as-btn-primary:hover { box-shadow: 0 0 30px rgba(31,224,196,.55) !important; color: #05070b !important; }

/* Ghost / outlined-on-dark button (e.g. "VIEW LAB RESULTS", "ABOUT ...") */
.as-btn-ghost:hover { border-color: rgba(31,224,196,.5) !important; color: #e9eef3 !important; }

/* Teal-outlined link button (e.g. "FULL CATALOG ->") */
.as-btn-outline:hover { background: rgba(31,224,196,.08) !important; color: #1fe0c4 !important; }

/* Dark button on the teal "standard" section (e.g. "SEE THE LAB RESULTS ->") */
.as-btn-dark:hover { box-shadow: 0 10px 30px rgba(4,33,27,.4) !important; color: #e9eef3 !important; }

/* Product / compound card */
.as-card:hover { background: #0a111a !important; color: inherit !important; }

/* Footer links */
.as-footer-link:hover { color: #1fe0c4 !important; }

/* ---- Product visual: bottle-to-molecule tilt-flip card (standard image format) ----
   Front = Advanced Sequence vial (or official photo); flips to the live molecule
   canvas on the back. Shared by the catalog cards and the single-product hero.
   Flip triggers: an ancestor .as-card (catalog/related cards) OR the scene itself
   when standalone ([data-flip-self], e.g. the single-product hero). */
.as-cat-scene { position: relative; aspect-ratio: 1/1; margin-bottom: 18px; border: 1px solid rgba(233,238,243,.06); border-radius: 2px; overflow: hidden; background: #080d14; perspective: 1000px; }
.as-cat-scene[data-flip-self] { outline: none; margin-bottom: 0; border-radius: 4px; border-color: rgba(233,238,243,.09); }
.as-cat-flip { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .8s cubic-bezier(.16,1,.3,1); }
.as-card:hover .as-cat-flip,
.as-card:focus-within .as-cat-flip,
.as-cat-scene[data-flip-self]:hover .as-cat-flip,
.as-cat-scene[data-flip-self]:focus-within .as-cat-flip { transform: rotateY(180deg); }
.as-cat-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; display: flex; align-items: center; justify-content: center; }
.as-cat-front { background: radial-gradient(120% 120% at 30% 15%, #0b131c 0%, #070c13 70%); }
.as-cat-front svg, .as-cat-front img { display: block; width: 100%; height: 100%; }
.as-cat-back { transform: rotateY(180deg); background: #080d14; }
.as-cat-scene[data-flip-self]:focus-visible { box-shadow: 0 0 0 2px rgba(31,224,196,.6); }
/* Placeholder marker (shown until an official photo exists) + RUO badge.
   Siblings of .as-cat-flip so they stay pinned and visible across both faces. */
.as-ph-label { position: absolute; top: 12px; right: 12px; z-index: 3; font-family: 'Space Grotesk', sans-serif; font-size: 8.5px; font-weight: 600; letter-spacing: .12em; color: #e3b34e; background: rgba(5,7,11,.6); border: 1px solid rgba(227,179,78,.4); border-radius: 2px; padding: 3px 7px; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); pointer-events: none; }
.as-ruo-badge { position: absolute; top: 12px; left: 12px; z-index: 3; font-family: 'Space Grotesk', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: .16em; color: #1fe0c4; background: rgba(5,7,11,.5); border: 1px solid rgba(31,224,196,.35); border-radius: 2px; padding: 5px 9px; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .as-cat-flip { transition: none; transform: rotateY(180deg); }
}

/* ---- Pre-launch announcement bar: slim, bottom-anchored "status strip" ----
   Non-invasive: fixed to the bottom so it never touches the fixed top nav or any
   per-template top padding. The page root reserves matching space so the footer
   clears it (.as-has-announce). Dismissible (JS) and expandable (native details). */
[data-as-root].as-has-announce { padding-bottom: 54px; }
.as-announce { position: fixed; left: 0; right: 0; bottom: 0; z-index: 95; background: linear-gradient(180deg, rgba(7,12,19,.90) 0%, rgba(5,7,11,.96) 100%); border-top: 1px solid rgba(31,224,196,.16); box-shadow: 0 -10px 40px rgba(5,7,11,.55), 0 -1px 0 rgba(227,179,78,.12); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); transform: translateY(110%); animation: asAnncIn .7s .5s cubic-bezier(.16,1,.3,1) forwards; }
.as-announce[data-dismissed] { display: none; }
.as-annc-details { max-width: 1320px; margin: 0 auto; padding: 0 calc(7vw + 34px) 0 7vw; }
.as-annc-summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 14px; min-height: 54px; padding: 8px 0; outline: none; }
.as-annc-summary::-webkit-details-marker { display: none; }
.as-annc-summary:focus-visible { box-shadow: inset 0 0 0 1px rgba(31,224,196,.5); border-radius: 2px; }
.as-annc-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: #e3b34e; box-shadow: 0 0 9px rgba(227,179,78,.85); animation: asAnncPulse 2.4s ease-in-out infinite; }
.as-annc-tag { flex: none; font-family: 'Space Grotesk', sans-serif; font-size: 10.5px; font-weight: 600; letter-spacing: .18em; color: #e3b34e; text-transform: uppercase; }
.as-annc-lead { flex: 1 1 auto; min-width: 0; font-family: 'Hanken Grotesk', sans-serif; font-size: 13px; line-height: 1.45; color: #93a1b0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.as-annc-lead b { color: #cdd6df; font-weight: 500; }
.as-annc-chev { flex: none; font-family: 'Space Grotesk', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .1em; color: #1fe0c4; display: inline-flex; align-items: center; gap: 6px; transition: color .2s ease; }
.as-annc-chev::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid #1fe0c4; border-bottom: 1.5px solid #1fe0c4; transform: rotate(-45deg); transition: transform .3s cubic-bezier(.16,1,.3,1); margin-top: -2px; }
.as-annc-details[open] .as-annc-chev::after { transform: rotate(45deg); margin-top: 2px; }
.as-annc-details[open] .as-annc-lead { white-space: normal; }
.as-annc-detail { padding: 2px 0 16px; }
.as-annc-detail p { margin: 0; max-width: 940px; font-family: 'Hanken Grotesk', sans-serif; font-size: 13px; line-height: 1.75; color: #7c8a99; }
.as-annc-detail p b { color: #93a1b0; font-weight: 500; }
.as-annc-details[open] .as-annc-detail { animation: asAnncFade .35s ease both; }
.as-annc-close { position: absolute; top: 50%; right: max(4vw, 18px); transform: translateY(-50%); width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid rgba(233,238,243,.12); border-radius: 2px; color: #7c8a99; font-size: 18px; line-height: 1; cursor: pointer; transition: color .2s ease, border-color .2s ease, background .2s ease; }
.as-annc-close:hover, .as-annc-close:focus-visible { color: #1fe0c4; border-color: rgba(31,224,196,.5); background: rgba(31,224,196,.06); outline: none; }
.as-annc-details[open] ~ .as-annc-close { top: auto; bottom: 12px; transform: none; }
@keyframes asAnncIn { to { transform: translateY(0); } }
@keyframes asAnncPulse { 0%, 100% { transform: scale(1); box-shadow: 0 0 9px rgba(227,179,78,.85); } 50% { transform: scale(1.5); box-shadow: 0 0 14px rgba(227,179,78,.55); } }
@keyframes asAnncFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 720px) {
  [data-as-root].as-has-announce { padding-bottom: 68px; }
  .as-annc-details { padding: 0 46px 0 5vw; }
  .as-annc-summary { flex-wrap: wrap; gap: 6px 12px; padding: 9px 0; }
  .as-annc-lead { flex-basis: 100%; white-space: normal; font-size: 12.5px; }
  .as-annc-chev { position: absolute; top: 14px; right: 46px; }
}
@media (prefers-reduced-motion: reduce) {
  .as-announce { transform: translateY(0); animation: none; }
  .as-annc-dot { animation: none; }
  .as-annc-details[open] .as-annc-detail { animation: none; }
  .as-annc-chev::after { transition: none; }
}

/* ---- Spinning-outline CTA (primary "Browse Catalog") ----
   A large conic-gradient layer spins behind a ~1.5px frame; the dark face covers
   the center so only the border shows the sweeping teal -> mint -> gold comet.
   Transparent stops use teal-at-0-alpha to avoid a dark fringe. */
.as-spin-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; padding: 1.5px; border-radius: 12px; overflow: hidden; isolation: isolate; background: rgba(233,238,243,.10); text-decoration: none; transition: transform .3s ease, box-shadow .3s ease; -webkit-tap-highlight-color: transparent; }
.as-spin-btn__ring { position: absolute; inset: -140%; z-index: 0; will-change: transform; background: conic-gradient(from 90deg, rgba(31,224,196,0) 0deg, rgba(31,224,196,0) 230deg, #0e3b35 275deg, #1fe0c4 298deg, #eafff7 312deg, #e3b34e 330deg, #123a34 352deg, rgba(31,224,196,0) 360deg); animation: as-spin 3s linear infinite; }
.as-spin-btn__face { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 11px; border-radius: 10.5px; background: #070c13; color: #e9eef3; font-family: 'Space Grotesk', sans-serif; font-size: 14px; font-weight: 600; letter-spacing: .08em; padding: 15px 30px; white-space: nowrap; transition: color .3s ease, background .3s ease; }
.as-spin-btn__arrow { color: #1fe0c4; transition: transform .3s cubic-bezier(.16,1,.3,1); }
.as-spin-btn:hover { box-shadow: 0 0 28px rgba(31,224,196,.35); }
.as-spin-btn:hover .as-spin-btn__ring { animation-duration: 1.15s; }
.as-spin-btn:hover .as-spin-btn__face { background: #0a1119; color: #fff; }
.as-spin-btn:hover .as-spin-btn__arrow { transform: translateX(4px); }
.as-spin-btn:active { transform: scale(.97); }
.as-spin-btn:focus-visible .as-spin-btn__face { box-shadow: 0 0 0 2px rgba(31,224,196,.6); }
@keyframes as-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .as-spin-btn__ring { animation: none; }
  .as-spin-btn:hover .as-spin-btn__arrow { transform: none; }
}

/* ---- First-visit age / research-eligibility gate ----
   Blocking is scoped to html.as-gate-on (added server-side ONLY when the gate is
   enabled), so when the toggle is off nothing here applies and the page is never
   locked. JS adds .as-gate-passed once the visitor confirms (persisted per browser). */
.as-agegate { display: none; }
html.as-gate-on:not(.as-gate-passed) { overflow: hidden; }
html.as-gate-on:not(.as-gate-passed) .as-agegate { display: flex; }
.as-agegate { position: fixed; inset: 0; z-index: 1000; align-items: center; justify-content: center; padding: 24px; background: rgba(5,7,11,.86); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); animation: as-gate-fade .4s ease; }
.as-agegate__card { position: relative; width: 100%; max-width: 480px; background: linear-gradient(160deg,#0a121b 0%,#070c13 70%); border: 1px solid rgba(31,224,196,.18); border-radius: 5px; box-shadow: 0 30px 80px rgba(5,7,11,.7), 0 0 0 1px rgba(233,238,243,.04); padding: 40px 38px 32px; }
.as-agegate__over { font-family: 'Space Grotesk', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .24em; color: #e3b34e; margin-bottom: 16px; }
.as-agegate__title { font-family: 'Space Grotesk', sans-serif; font-weight: 500; font-size: 26px; line-height: 1.15; letter-spacing: -.01em; color: #fff; margin: 0 0 16px; }
.as-agegate__body { font-family: 'Hanken Grotesk', sans-serif; font-size: 14px; line-height: 1.7; color: #93a1b0; margin: 0 0 26px; }
.as-agegate__actions { display: flex; flex-direction: column; gap: 12px; }
.as-agegate__accept { cursor: pointer; font-family: 'Space Grotesk', sans-serif; font-size: 14px; font-weight: 600; letter-spacing: .06em; color: #05070b; background: #1fe0c4; border: none; border-radius: 3px; padding: 15px 20px; transition: box-shadow .3s ease, background .3s ease; }
.as-agegate__accept:hover { background: #3df0d6; box-shadow: 0 0 24px rgba(31,224,196,.5); }
.as-agegate__decline { cursor: pointer; font-family: 'Space Grotesk', sans-serif; font-size: 13px; font-weight: 500; letter-spacing: .04em; color: #93a1b0; background: transparent; border: 1px solid rgba(233,238,243,.16); border-radius: 3px; padding: 13px 20px; transition: color .2s ease, border-color .2s ease; }
.as-agegate__decline:hover { color: #e9eef3; border-color: rgba(233,238,243,.32); }
.as-agegate__accept:focus-visible, .as-agegate__decline:focus-visible { outline: 2px solid rgba(31,224,196,.7); outline-offset: 2px; }
.as-agegate__fine { font-family: 'Hanken Grotesk', sans-serif; font-size: 11.5px; line-height: 1.6; color: #5d6b7a; margin: 20px 0 0; }
@keyframes as-gate-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .as-agegate { animation: none; } }