/* Aura8 extensions: campaign pills, pillars, pricing tiers, simulator. Parent tokens only; pills and larger rounded panels are the Aura8 product extension. */
.pill { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; border: 1px solid var(--aura8-line); background: #fff; padding: 8px 16px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--aura8-ink); }
.pill i { width: 10px; height: 10px; border-radius: 50%; background: var(--aura8-electric-blue); display: inline-block; }
.pill.p2 i { background: var(--aura8-electric-blue); }
.pill.p3 i { background: var(--aura8-light-cyan); }
.pill.p4 i { background: var(--aura8-light-lime); }
.pills { display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0 0; }
.hero .pills .pill { animation: rise .5s var(--ease) both; }
.hero .pills .pill:nth-child(1) { animation-delay: .7s; } .hero .pills .pill:nth-child(2) { animation-delay: .8s; }
.hero .pills .pill:nth-child(3) { animation-delay: .9s; } .hero .pills .pill:nth-child(4) { animation-delay: 1s; }
.pillars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.pillar { border: 1px solid var(--aura8-line); border-radius: 24px; background: #fff; padding: 32px 28px; display: flex; flex-direction: column; position: relative; overflow: hidden; }
.pillar::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: var(--aura8-electric-blue); }
.pillar:nth-child(3)::after { background: var(--aura8-signal-cyan); }
.pillar:nth-child(4)::after { background: var(--aura8-stage-lime); }
.pillar .n { font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; color: var(--aura8-electric-blue); margin-bottom: 18px; display: block; }
.pillar h3 { font-size: 28px; line-height: 34px; margin-bottom: 10px; }
.pillar p { font-size: 15px; line-height: 22px; margin: 0; }
.exp { display: flex; align-items: center; gap: 16px; border-top: 1px solid var(--aura8-line); border-bottom: 1px solid var(--aura8-line); padding: 20px 0; font-size: 15px; }
.exp b { font-family: var(--font-display); font-weight: 500; font-size: 28px; letter-spacing: -0.01em; }
.tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.tier { border: 1px solid var(--aura8-line); border-radius: 24px; background: #fff; padding: 32px; display: flex; flex-direction: column; }
.tier.feature { border: 2px solid var(--aura8-electric-blue); }
.tier .kind { font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--aura8-electric-blue); }
.tier h3 { font-size: 32px; line-height: 40px; margin: 8px 0 4px; }
.tier .price { display: inline-block; align-self: flex-start; border-radius: 999px; background: var(--aura8-paper); border: 1px solid var(--aura8-line); padding: 4px 14px; font-weight: 600; font-size: 14px; margin: 8px 0 20px; }
.tier .ticks { margin-bottom: 20px; }
.tier .more { margin-top: auto; font-weight: 500; }

/* Simulator */
.sim { border: 1px solid var(--aura8-line); border-radius: 24px; background: #fff; padding: 32px; }
.sim-controls { display: grid; grid-template-columns: 1fr 2fr; gap: 24px; margin-bottom: 28px; }
.sim-grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: 32px; align-items: stretch; }
.sim-steps { display: grid; gap: 12px; align-content: start; }
.swbtn { display: grid; grid-template-columns: 52px 1fr; gap: 4px 16px; align-items: center; text-align: left; width: 100%; min-height: 64px; padding: 12px 16px; border: 1px solid var(--aura8-line); border-radius: 16px; background: #fff; cursor: pointer; font-family: var(--font-body); color: var(--aura8-ink); transition: border-color var(--duration-ui), background var(--duration-ui); }
.swbtn:hover { border-color: var(--aura8-electric-blue); background: var(--aura8-paper); }
.swbtn[aria-checked="true"] { border-color: var(--aura8-electric-blue); background: var(--aura8-paper); }
.swbtn .sw { grid-row: 1 / 3; width: 52px; height: 28px; border-radius: 999px; background: #8795AD; position: relative; transition: background var(--duration-ui); }
.swbtn .sw::after { content: ""; position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: transform var(--duration-ui) var(--ease); }
.swbtn[aria-checked="true"] .sw { background: var(--aura8-electric-blue); }
.swbtn[aria-checked="true"] .sw::after { transform: translateX(24px); }
.swbtn b { font-family: var(--font-display); font-weight: 500; font-size: 20px; line-height: 24px; }
.swbtn small { color: var(--aura8-muted-text); font-size: 14px; line-height: 18px; }
.sim-tools { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.sim-out { background: var(--aura8-deep-navy); color: #fff; border-radius: 20px; padding: 28px; display: flex; flex-direction: column; gap: 14px; min-height: 340px; }
.sim-out .top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.sim-out .tag { font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--aura8-dark-cyan); }
.sim-out .quest { color: var(--aura8-muted-on-dark); font-size: 15px; margin: 0; }
.sim-out .ans { font-size: 18px; line-height: 28px; margin: 0; color: #fff; flex: 1; }
.sim-out .src { font-family: var(--font-mono); font-size: 12px; color: var(--aura8-dark-cyan); margin: 0; min-height: 16px; }
.sim-out .label.l-supported { color: var(--aura8-stage-lime); }
.sim-out .label.l-partly { color: #FFC857; }
.sim-out .label.l-not { color: #FF8A9B; }
.sim-score { display: flex; align-items: center; gap: 14px; }
.sim-score .big { font-family: var(--font-display); font-size: 32px; line-height: 36px; }
.sim-bar { display: flex; gap: 6px; flex: 1; max-width: 200px; }
.sim-bar i { flex: 1; height: 8px; border-radius: 4px; background: #22304d; transition: background .3s var(--ease); }
.sim-bar i.on:nth-child(1), .sim-bar i.on:nth-child(2) { background: var(--aura8-dark-blue); }
.sim-bar i.on:nth-child(3) { background: var(--aura8-dark-cyan); }
.sim-bar i.on:nth-child(4) { background: var(--aura8-stage-lime); }
.sim-out.pulse .ans, .sim-out.pulse .label { animation: rise .35s var(--ease) both; }

/* Report pillars */
.bars { display: grid; gap: 14px; margin: 0; }
.rep-pillars { margin-top: 40px; }

@media (max-width: 1100px) {
  .pillars { grid-template-columns: 1fr 1fr; }
  .tiers { grid-template-columns: 1fr; }
  .sim-grid, .sim-controls { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .pillars { grid-template-columns: 1fr; }
  .sim { padding: 20px; }
  .sim-out { min-height: 0; }
  .exp { flex-direction: column; align-items: flex-start; gap: 4px; }
}
@media (prefers-reduced-motion: reduce) { .hero .pills .pill, .sim-out.pulse .ans, .sim-out.pulse .label { animation: none !important; } }

.steps.five { grid-template-columns: repeat(5, 1fr); }
.steps.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .steps.five, .steps.four { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) { .steps.five, .steps.four { grid-template-columns: 1fr; } }

.gloss { margin: 0; }
.gterm { padding: 24px 0; border-bottom: 1px solid var(--aura8-line); display: grid; grid-template-columns: 1fr 1.6fr; gap: 32px; }
.gterm:first-child { border-top: 1px solid var(--aura8-line); }
.gterm dt { font-family: var(--font-display); font-weight: 500; font-size: 22px; line-height: 30px; letter-spacing: -0.01em; }
.gterm dd { margin: 0; font-size: 17px; line-height: 26px; }
@media (max-width: 720px) { .gterm { grid-template-columns: 1fr; gap: 8px; } }

/* Blog */
.kfacts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.kf { border: 1px solid var(--aura8-line); border-radius: 24px; background: #fff; padding: 28px; transition: transform var(--duration-ui) var(--ease), border-color var(--duration-ui); }
.kf:hover { transform: translateY(-4px); border-color: var(--aura8-electric-blue); }
.kf b { display: block; font-family: var(--font-display); font-weight: 500; font-size: 40px; line-height: 44px; letter-spacing: -0.02em; color: var(--aura8-electric-blue); margin-bottom: 10px; }
.kf p { margin: 0; font-size: 15px; line-height: 22px; }
.cite { border: 1px solid var(--aura8-line); border-left: 6px solid var(--aura8-electric-blue); border-radius: 0 24px 24px 0; padding: 28px 32px; background: var(--aura8-paper); }
.cite .ctag { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--aura8-electric-blue); }
.cite h3 { font-size: 24px; line-height: 32px; margin: 8px 0; }
.post-card h3 { font-size: 28px; line-height: 34px; }
@media (max-width: 1100px) { .kfacts { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) { .kfacts { grid-template-columns: 1fr; } }

/* Illustrations */
.art-fig { margin: 0; }
.art-fig img, .art-img { display: block; width: 100%; height: auto; border-radius: 28px; }
.art-fig figcaption { margin-top: 12px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--aura8-muted-text); }
.pxh-side .art-fig img { box-shadow: 0 24px 60px rgba(0,0,0,.35); }
.with-fig { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 56px; align-items: center; margin-bottom: 40px; }
.with-fig .sec-head { margin-bottom: 0; }
@media (max-width: 1000px) { .with-fig { grid-template-columns: 1fr; gap: 28px; } }

/* Thumbnails and the crawler scene */
.card-art { display: block; width: 100%; height: auto; border-radius: 18px; margin-bottom: 18px; }
.feat-art { float: right; width: min(42%, 440px); height: auto; border-radius: 22px; margin: 0 0 16px 32px; }
@media (max-width: 900px) { .feat-art { float: none; width: 100%; margin: 0 0 20px; } }
.crawler { padding: 96px 0; }
.crawl-says { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 12px; }
.crawl-says li { padding: 16px 20px; border: 1px solid var(--aura8-line); border-radius: 18px; background: #fff; }
.crawl-says b { color: var(--aura8-electric-blue); }
.post-card, .answers-grid .card { overflow: hidden; }

/* Tier actions and the quote pop-up */
.tier .tagline { margin: 4px 0 20px; font-size: 18px; line-height: 26px; color: var(--aura8-muted-text); }
.tier-actions { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.tier-actions .more { margin-top: 0; }
html.q-open { overflow: hidden; }
.quote-dialog { border: 0; padding: 0; border-radius: 28px; width: min(720px, calc(100vw - 32px)); max-height: calc(100vh - 32px); background: #fff; color: var(--aura8-ink); box-shadow: 0 40px 120px rgba(11,18,32,.45); }
.quote-dialog::backdrop { background: rgba(11,18,32,.66); backdrop-filter: blur(4px); }
.quote-dialog[open] { animation: q-in .28s var(--ease) both; }
@keyframes q-in { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } }
.q-wrap { position: relative; padding: 40px; overflow-y: auto; max-height: calc(100vh - 32px); }
.q-close { position: absolute; top: 16px; right: 16px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--aura8-line); background: #fff; font-size: 28px; line-height: 1; cursor: pointer; color: var(--aura8-ink); }
.q-close:hover { border-color: var(--aura8-electric-blue); color: var(--aura8-electric-blue); }
.quote-dialog h2 { font-size: 32px; line-height: 38px; letter-spacing: -.02em; margin: 8px 48px 12px 0; }
.q-sub { color: var(--aura8-muted-text); margin: 0 0 24px; }
.q-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
.quote-dialog .field input.invalid { border-color: var(--aura8-error); }
.quote-dialog .err { color: var(--aura8-error); font-size: 14px; margin: 6px 0 0; }
.q-check { display: flex; gap: 12px; align-items: flex-start; margin-top: 16px; font-size: 15px; line-height: 22px; }
.q-check input { width: 22px; height: 22px; margin-top: 1px; flex: none; accent-color: var(--aura8-electric-blue); }
.q-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.q-note { margin: 20px 0 0; font-size: 13px; line-height: 20px; color: var(--aura8-muted-text); }
.q-done:focus { outline: none; }
@media (max-width: 640px) { .q-wrap { padding: 28px 20px; } .q-grid { grid-template-columns: 1fr; } .quote-dialog h2 { font-size: 26px; line-height: 32px; } }
@media (prefers-reduced-motion: reduce) { .quote-dialog[open] { animation: none; } }

/* Small-screen safety: nothing may push the page wider than the screen */
.grid > *, .with-fig > *, .pxh-grid > *, .split > *, .tiers > *, .wrap > * { min-width: 0; }
.art-fig, .art-fig img, .art-img, .card-art, .feat-art, .table-wrap { max-width: 100%; }
.article li, .article p, .article code, .prose li, .prose p, .mono, .callout p { overflow-wrap: anywhere; }
input, select, textarea { max-width: 100%; min-width: 0; }
@media (max-width: 380px) { .quote-dialog { width: calc(100vw - 16px); border-radius: 20px; } .q-wrap { padding: 24px 16px; } .tier { padding: 24px; } }
.pullstat b { overflow-wrap: anywhere; }
@media (max-width: 480px) { .pullstat b { font-size: 44px; line-height: 48px; } .pullstat { padding: 24px; } .pullstat span { font-size: 18px; line-height: 28px; } }
#q-for { padding-right: 56px; }
@supports (height: 100dvh) { .quote-dialog { max-height: calc(100dvh - 32px); } .q-wrap { max-height: calc(100dvh - 32px); } }
@media (hover: none) { .tiers-plain .tier:hover, .tcard:hover { transform: none; } }

/* Pictures ease in as they scroll into view (where the browser supports it) */
@supports (animation-timeline: view()) {
  .art-fig img, .card-art, .feat-art { animation: img-in linear both; animation-timeline: view(); animation-range: entry 0% cover 28%; }
}
@keyframes img-in { from { opacity: 0; transform: translateY(32px) scale(.96); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .art-fig img, .card-art, .feat-art { animation: none !important; } }