/* AEON GPTO design layer (08/11/2026). Loaded after the page's own styles; the page markup, copy, sections and
   design tokens stay as they are. Everything here is progressive: browsers without a feature keep the original look. */

/* ── 1. Tokens: readable contrast in both themes (small labels used --t3, which was below 3:1) ── */
:root { --t3:#5A6B91; --ring:color-mix(in oklab, var(--cx) 55%, transparent); --radius:14px; --ease:cubic-bezier(.2,.7,.2,1) }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --t2:#4E5D86; --t3:#66759C } }
:root[data-theme="light"] { --t2:#4E5D86; --t3:#66759C }

/* ── 2. Typography ── */
h1, h2, h3, .sec-title, .hero-h1, .scan-h, .cta-h { text-wrap:balance }
p, li, .sec-sub, .hero-sub { text-wrap:pretty }
.hero-h1 { font-size:clamp(2.75rem, 1.6rem + 5.4vw, 6rem); letter-spacing:-.045em; line-height:.98 }
.sec-title { font-size:clamp(2rem, 1.3rem + 2.6vw, 3.25rem); letter-spacing:-.035em }
.hero-h1 .accent { background:linear-gradient(100deg, var(--cx) 0%, #6E8BFF 45%, var(--vi) 100%); -webkit-background-clip:text; background-clip:text; color:transparent }

/* ── 3. Navigation: glass bar that firms up once the page scrolls (CSS scroll timeline; no script) ── */
.nav { backdrop-filter:saturate(1.6) blur(14px); -webkit-backdrop-filter:saturate(1.6) blur(14px); border-bottom:1px solid transparent }
@supports (animation-timeline: scroll()) {
  .nav { animation:aeon-nav linear both; animation-timeline:scroll(root); animation-range:0 160px }
  @keyframes aeon-nav { to { border-bottom-color:var(--bd); box-shadow:0 8px 30px -18px rgba(0,0,0,.55) } }
}
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .nav { background:color-mix(in oklab, var(--bg) 82%, transparent) } }
:root[data-theme="light"] .nav { background:color-mix(in oklab, var(--bg) 82%, transparent) }

/* ── 4. Hero: aurora mesh and a faint grid behind the existing star field ── */
.hero { isolation:isolate }
.hero::before {
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(60% 50% at 50% 0%, color-mix(in oklab, var(--cx) 16%, transparent), transparent 70%),
    radial-gradient(40% 40% at 85% 30%, color-mix(in oklab, var(--vi) 14%, transparent), transparent 70%),
    linear-gradient(to right, color-mix(in oklab, var(--bd) 55%, transparent) 1px, transparent 1px) 0 0 / 56px 56px,
    linear-gradient(to bottom, color-mix(in oklab, var(--bd) 55%, transparent) 1px, transparent 1px) 0 0 / 56px 56px;
  -webkit-mask-image:radial-gradient(70% 60% at 50% 30%, #000 30%, transparent 75%); mask-image:radial-gradient(70% 60% at 50% 30%, #000 30%, transparent 75%);
}
.hero-stats { border-radius:var(--radius); overflow:hidden; background:color-mix(in oklab, var(--surf) 70%, transparent); border:1px solid var(--bd); backdrop-filter:blur(10px) }
.hero-stat { background:transparent }

/* ── 5. Cards: one card language for trust, problem, steps, features and plans ── */
.trust-grid, .problem-grid, .steps-grid, .feat-list { gap:14px; background:transparent; border:0 }
.trust-card, .prob-cell, .step-card, .feat-row, .plan {
  border:1px solid var(--bd); border-radius:var(--radius);
  background:linear-gradient(180deg, color-mix(in oklab, var(--surf) 92%, transparent), color-mix(in oklab, var(--bg1) 92%, transparent));
  transition:transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease), opacity .55s ease;
}
.trust-card:hover, .prob-cell:hover, .step-card:hover, .feat-row:hover, .plan:hover {
  transform:translateY(-3px); border-color:color-mix(in oklab, var(--cx) 45%, var(--bd));
  box-shadow:0 18px 40px -24px color-mix(in oklab, var(--cx) 60%, transparent);
}
.trust-card-icon, .step-card-icon { display:inline-grid; place-items:center; width:44px; height:44px; border-radius:12px; font-size:0;
  color:var(--cx); background:color-mix(in oklab, var(--cx) 10%, transparent); border:1px solid color-mix(in oklab, var(--cx) 28%, transparent) }
.trust-card-icon svg, .step-card-icon svg { width:22px; height:22px }

/* Features: a 3 × 2 grid of cards on wide screens (same six items, same order) */
@media (min-width:900px) {
  .feat-list { display:grid; grid-template-columns:repeat(3, 1fr) }
  .feat-row { display:flex; flex-direction:column; gap:.75rem; padding:1.75rem }
}

/* Pricing: the featured plan gets a gradient ring */
.plan.featured { border:1px solid transparent;
  background:linear-gradient(var(--surf), var(--surf)) padding-box, linear-gradient(135deg, var(--cx), var(--vi)) border-box;
  box-shadow:0 30px 60px -30px color-mix(in oklab, var(--vi) 55%, transparent) }

/* Coverage table and scan form */
.engines-table { border-radius:var(--radius); overflow:hidden }
.eng-fill { background:linear-gradient(90deg, var(--cx), color-mix(in oklab, var(--cx) 40%, var(--vi))) }
.scan-input { border-radius:12px }
.scan-btn { border-radius:12px }

/* ── 6. Buttons and focus ── */
.btn, .btn-pill, .btn-pill-ghost, .scan-btn { transition:transform .2s var(--ease), box-shadow .2s var(--ease), background-color .2s, border-color .2s }
.btn-primary { background:linear-gradient(135deg, var(--cx), color-mix(in oklab, var(--cx) 60%, var(--vi))); box-shadow:0 10px 30px -14px color-mix(in oklab, var(--cx) 80%, transparent) }
.btn:hover, .btn-pill:hover, .btn-pill-ghost:hover, .scan-btn:hover { transform:translateY(-1px) }
:focus-visible { outline:2px solid var(--ring); outline-offset:3px; border-radius:8px }

/* Nav buttons stay on one line; the theme button shows a drawn half-moon (the ◐ character is not in the font) */
.nav .btn { white-space:nowrap }
@media (max-width:480px) { .nav { padding:0 1rem } .nav .btn-primary { padding:.55rem .9rem; font-size:.8125rem } }
.theme-toggle { font-size:0; border-radius:10px }
.theme-toggle::before { content:""; width:16px; height:16px; border-radius:50%; border:1.6px solid currentColor;
  background:linear-gradient(90deg, currentColor 50%, transparent 50%) }

/* ── 7. Reveal: content is visible by default (for readers, crawlers and AI engines). The fade-in runs only when
        the page has said it can animate (html.aeon-motion) and the reader has not asked for reduced motion. ── */
html:not(.aeon-motion) .reveal, html:not(.aeon-motion) .sec-ey, html:not(.aeon-motion) .sec-title, html:not(.aeon-motion) .sec-sub,
html:not(.aeon-motion) .prob-cell, html:not(.aeon-motion) .step-card, html:not(.aeon-motion) .feat-row { opacity:1 !important; transform:none !important }

/* ── 9. Page-to-page transitions (same-origin navigations, browsers that support it) ── */
@view-transition { navigation:auto }
::view-transition-old(root), ::view-transition-new(root) { animation-duration:.28s }

@media (prefers-reduced-motion: reduce) { .nav { animation:none } .trust-card:hover, .prob-cell:hover, .step-card:hover, .feat-row:hover, .plan:hover { transform:none } }

/* ── 10. Example report in the hero (labelled as illustrative) ── */
.aeon-preview { max-width:880px; margin:3.5rem auto 0; padding:0 1rem; perspective:1600px }
.ap-frame { border:1px solid var(--bd); border-radius:18px; overflow:hidden; text-align:left;
  background:linear-gradient(180deg, color-mix(in oklab, var(--surf) 94%, transparent), color-mix(in oklab, var(--bg1) 94%, transparent));
  box-shadow:0 40px 90px -40px color-mix(in oklab, var(--cx) 45%, transparent), 0 0 0 1px color-mix(in oklab, var(--bd) 40%, transparent) inset; transform:rotateX(6deg); transform-origin:50% 0 }
@supports (animation-timeline: view()) { .ap-frame { animation:aeon-tilt linear both; animation-timeline:view(); animation-range:entry 0% cover 40% } @keyframes aeon-tilt { to { transform:none } } }
.ap-bar { display:flex; align-items:center; gap:6px; padding:10px 14px; border-bottom:1px solid var(--bd); font-size:.75rem; color:var(--t2) }
.ap-bar span { width:9px; height:9px; border-radius:50%; background:var(--bd2) } .ap-bar b { margin-left:8px; color:var(--t1); font-weight:600 } .ap-bar em { margin-left:auto; font-style:normal; font-family:'JetBrains Mono',monospace; font-size:.6875rem; color:var(--am) }
.ap-body { display:grid; grid-template-columns:1fr 1.3fr 1.2fr; gap:1px; background:var(--bd) }
.ap-body > div { background:var(--surf); padding:1.25rem }
.ap-k { display:block; font-family:'JetBrains Mono',monospace; font-size:.6875rem; letter-spacing:.08em; text-transform:uppercase; color:var(--t2); margin-bottom:.5rem }
.ap-n { display:block; font-size:2.5rem; font-weight:700; color:var(--t0); line-height:1 } .ap-d { display:block; font-size:.8125rem; color:var(--gr); margin:.35rem 0 .5rem }
.ap-spark { width:100%; height:44px; color:var(--cx) }
.ap-row { display:grid; grid-template-columns:78px 1fr 40px; align-items:center; gap:10px; font-size:.8125rem; color:var(--t1); padding:.3rem 0 }
.ap-row i { height:6px; border-radius:6px; background:var(--bd); position:relative; overflow:hidden }
.ap-row i::after { content:""; position:absolute; inset:0 auto 0 0; width:var(--w); border-radius:6px; background:linear-gradient(90deg, var(--cx), color-mix(in oklab, var(--cx) 40%, var(--vi))) }
.ap-row b { font-size:.8125rem; color:var(--t0); text-align:right }
.ap-actions ol { margin:0; padding-left:1.1rem; font-size:.8125rem; color:var(--t1); display:grid; gap:.45rem } .ap-actions li::marker { color:var(--cx); font-weight:700 }
@media (max-width:760px) { .ap-body { grid-template-columns:1fr } .ap-frame { transform:none } .ap-bar em { display:none } }

/* ── 11. Frequently asked questions ── */
.aeon-faq { padding:6rem 2rem; background:var(--bg1) } .aeon-faq .container { max-width:860px }
.aeon-faq details { border:1px solid var(--bd); border-radius:var(--radius); background:var(--surf); margin-bottom:10px; transition:border-color .25s }
.aeon-faq details[open] { border-color:color-mix(in oklab, var(--cx) 40%, var(--bd)) }
.aeon-faq summary { cursor:pointer; list-style:none; padding:1.1rem 1.25rem; font-weight:600; color:var(--t0); display:flex; justify-content:space-between; gap:1rem }
.aeon-faq summary::-webkit-details-marker { display:none } .aeon-faq summary::after { content:"+"; color:var(--cx); font-size:1.25rem; line-height:1 } .aeon-faq details[open] summary::after { content:"−" }
.aeon-faq details p { padding:0 1.25rem 1.2rem; color:var(--t1); line-height:1.7 }
.aeon-faq .sec-title, .aeon-faq .sec-ey { opacity:1 !important; transform:none !important }

/* ── 12. Phone call-to-action bar, active navigation, scan form message, live scan notes ── */
.aeon-sticky { position:fixed; left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom, 0px)); z-index:150; display:none; gap:8px; padding:8px;
  border:1px solid var(--bd); border-radius:16px; background:color-mix(in oklab, var(--bg) 86%, transparent); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  transform:translateY(140%); transition:transform .35s var(--ease) }
.aeon-sticky .btn { flex:1; justify-content:center; text-align:center; white-space:nowrap } .aeon-sticky .btn-ghost { flex:0 0 auto }
@media (max-width:760px) { .aeon-sticky { display:flex } .aeon-sticky.on { transform:none } footer { padding-bottom:6rem !important } }
.nav-links a.is-active { color:var(--t0) } .nav-links a.is-active::after { content:""; display:block; height:2px; margin-top:4px; border-radius:2px; background:var(--cx) }
.aeon-scan-msg { min-height:1.2em; margin-top:.6rem; font-size:.875rem; color:var(--am) }
.aeon-live-note { margin:0 0 18px; padding:12px 16px; border-radius:12px; font-size:.875rem; line-height:1.6; border:1px solid var(--bd); background:var(--surf) }
.aeon-live-note.ok { border-color:color-mix(in oklab, var(--gr) 45%, var(--bd)) } .aeon-live-note.warn { border-color:color-mix(in oklab, var(--am) 55%, var(--bd)) }
.aeon-tag { font-family:'JetBrains Mono',monospace; font-size:.625rem; letter-spacing:.08em; text-transform:uppercase; color:var(--am); border:1px solid currentColor; border-radius:999px; padding:1px 8px; margin-left:6px; vertical-align:middle }
.aeon-wait { display:block; margin-top:.5rem; font-size:.875rem; font-weight:400; color:var(--t2) }