/* acads.AI tool pages (/ai/<tool>/). Loaded after site.css, only on these pages. Built by src/ai.py.
   Prefixes: a- (shared pieces), aq- (QCAB hero scene), qc- (generator controls), qb- (booklet), ev- (Mains Evaluator), cz- (CA Zoom).
   Tones come from site.css (.tone-sky etc. set --c/--s/--t). Flat colours; the dot grid is the one pattern. */

/* ---------- tinted section panel (same as the other sites) ---------- */
.v-ai .a-tint > .wrap {
  max-width: calc(var(--wrap) + 48px); background-color: var(--s); background-image: radial-gradient(color-mix(in srgb, var(--t) 16%, transparent) 1.1px, transparent 1.1px);
  background-size: 24px 24px; border-radius: 28px; padding: clamp(40px, 6vw, 72px) clamp(20px, 4.5vw, 56px); }
@media (max-width: 640px) { .v-ai .a-tint > .wrap { margin: 0 12px; padding: 36px 14px; border-radius: 22px; } }
.v-ai .a-tint .i-card { background: #fff; }
.v-ai .end { background: #e6f3fe; background-image: radial-gradient(rgba(0,91,171,.13) 1.1px, transparent 1.1px); background-size: 24px 24px; }
.v-ai .i-stat:nth-child(1) { background: #e6f3fe; } .v-ai .i-stat:nth-child(1) b { color: #005bab; }

/* ---------- steps with small pictures ---------- */
.a-steps { list-style: none; padding: 0; margin: 40px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.a-step { border-radius: 16px; background: var(--tile-2); padding: 20px; display: flex; flex-direction: column; gap: 8px; transition-delay: calc(var(--i) * 110ms); }
.a-step > h3 { font: 700 20px/1.2 var(--head); letter-spacing: -.02em; }
.a-step > p { color: var(--muted); font-size: 15px; line-height: 1.55; }
.a-step-n { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--c); color: #fff; font: 700 13px var(--head); }
@media (max-width: 860px) { .a-steps { grid-template-columns: minmax(0, 1fr); } }
.a-pic { height: 108px; border-radius: 12px; background: #fff; box-shadow: var(--ring); margin-bottom: 8px; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 8px; }
.a-pic-pick span { height: 30px; padding: 0 12px; border-radius: 8px; background: var(--tile); font: 600 13px var(--k-font); display: grid; place-items: center; color: var(--muted); }
.a-pic-pick span.on { background: var(--c); color: #fff; animation: a-pop 2.4s var(--ease) infinite; }
.a-pic-draw i { width: 34px; height: 46px; border-radius: 5px; background: var(--tile); box-shadow: inset 0 0 0 1px var(--hair); }
.a-pic-draw b { position: absolute; width: 44px; height: 12px; border-radius: 4px; background: var(--c); left: 24%; top: 30%; animation: a-fly 2.4s var(--ease) infinite; }
.a-pic-book i { width: 54px; height: 72px; border-radius: 4px; background: #fff; box-shadow: 0 0 0 1px var(--hair), 0 6px 14px -6px rgba(0,0,0,.2); position: relative; }
.a-pic-book i::before { content: ''; position: absolute; left: 8px; right: 14px; top: 9px; height: 5px; border-radius: 2px; background: var(--c); }
.a-pic-book i::after { content: ''; position: absolute; right: 6px; top: 6px; bottom: 6px; width: 1px; background: var(--hair); }
.a-pic-book i:nth-child(2) { transform: translateY(-6px); } .a-pic-book i:nth-child(3) { transform: translateY(-12px); }
.a-pic-z { flex-direction: column; gap: 6px; padding: 0 22px; align-items: stretch; }
.a-pic-z i { height: 7px; border-radius: 4px; background: var(--tile); }
.a-pic-z i:first-child { background: var(--c); width: 70%; }
@keyframes a-pop { 0%, 100% { transform: none; } 50% { transform: scale(1.08); } }
@keyframes a-fly { 0% { transform: translate(0, 0); opacity: 0; } 15% { opacity: 1; } 70% { transform: translate(120px, 30px); opacity: 1; } 100% { transform: translate(120px, 30px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .a-pic * { animation: none !important; } }

/* ---------- tone cards and the other tools ---------- */
.a-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 40px; }
.a-tc { background: var(--s) !important; transition-delay: calc(var(--i) * 90ms); }
.a-tc > h3 { font: 700 19px/1.2 var(--head); letter-spacing: -.02em; color: var(--t); }
.a-tc > p { font-size: 15px; line-height: 1.55; color: var(--text); }
.a-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--c); }
@media (max-width: 960px) { .a-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .a-cards { grid-template-columns: minmax(0, 1fr); } }
.a-tools { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 40px; }
.a-tool { background: var(--s); }
.a-tool:hover { background: color-mix(in srgb, var(--s) 70%, var(--c) 12%); }
.a-tool > h3 { font: 700 19px/1.2 var(--head); letter-spacing: -.02em; }
.a-tool > p { font-size: 14.5px; line-height: 1.5; color: var(--muted); flex: 1; }
.a-tool .i-more { color: var(--t); display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14px; }
@media (max-width: 960px) { .a-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .a-tools { grid-template-columns: minmax(0, 1fr); } }

/* ---------- why cards (page allowance) ---------- */
.a-why { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 40px; }
.a-why-c { transition-delay: calc(var(--i) * 100ms); }
.a-why-c > b { font: 700 clamp(30px, 3.6vw, 42px)/1 var(--head); letter-spacing: -.04em; color: var(--t); }
.a-why-c > span { font-weight: 600; }
.a-why-c > p { color: var(--muted); font-size: 15px; line-height: 1.55; }
.a-why-pg { display: flex; gap: 6px; margin-top: 6px; }
.a-why-pg i { width: 30px; height: 40px; border-radius: 3px; background: #fff; box-shadow: 0 0 0 1px var(--hair), 0 4px 10px -6px rgba(0,0,0,.25); transform: translateY(8px); opacity: 0; transition: transform .5s var(--ease), opacity .5s; }
.rv.in .a-why-pg i { transform: none; opacity: 1; }
.a-why-pg i:nth-child(2) { transition-delay: .12s; } .a-why-pg i:nth-child(3) { transition-delay: .24s; } .a-why-pg i:nth-child(4) { transition-delay: .36s; }
@media (max-width: 760px) { .a-why { grid-template-columns: minmax(0, 1fr); } }

/* ---------- sources ---------- */
.a-src { margin-top: 32px; border-radius: 16px; background: var(--tile-2); padding: 8px 20px; }
.a-src-y { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 14px 0; border-bottom: 1px solid var(--hair); }
.a-src-y:last-child { border-bottom: 0; }
.a-src-y b { font: 700 18px var(--head); min-width: 56px; }
.a-src-y a { font-size: 14px; font-weight: 500; }
.a-film .i-film-box { aspect-ratio: 16 / 9; }

/* ---------- QCAB hero scene ---------- */
.aq-hero { position: relative; height: 420px; border-radius: 24px; background: var(--tile); background-image: radial-gradient(rgba(0,0,0,.075) 1.1px, transparent 1.1px); background-size: 22px 22px; overflow: hidden; }
.aq-papers { position: absolute; left: 22px; top: 26px; display: grid; gap: 8px; }
.aq-paper { width: 118px; height: 54px; border-radius: 10px; background: #fff; box-shadow: var(--ring); padding: 8px 12px; display: flex; flex-direction: column; justify-content: center; transition: transform .35s var(--ease), box-shadow .35s; }
.aq-paper b { font: 700 18px/1 var(--head); letter-spacing: -.02em; }
.aq-paper small { font-size: 11px; color: var(--muted); margin-top: 3px; }
.aq-paper.hot { transform: translateX(8px); box-shadow: 0 0 0 2px var(--c), 0 8px 18px -8px rgba(0,0,0,.25); }
.aq-card { position: absolute; left: 160px; top: 120px; width: 240px; border-radius: 14px; background: #fff; box-shadow: var(--lift); padding: 14px 16px; z-index: 3;
  transition: transform .9s cubic-bezier(.6,0,.2,1), opacity .4s; display: flex; flex-direction: column; gap: 6px; }
.aq-src { font-size: 11px; font-weight: 600; color: var(--t); }
.aq-q { font-size: 13px; line-height: 1.45; color: var(--text); display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.aq-m { align-self: flex-start; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 6px; background: var(--s); color: var(--t); }
.aq-card.go { transform: translate(150px, 40px) scale(.42); opacity: 0; }
.aq-card.in { transform: translate(-30px, 0) scale(.96); opacity: 0; transition: none; }
.aq-book { position: absolute; right: 22px; top: 26px; bottom: 26px; width: 158px; border-radius: 12px; background: #fff; box-shadow: var(--lift); padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.aq-book-top { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2px 8px; }
.aq-book-top > span:not(.tl) { font: 600 12px var(--k-font); color: var(--muted); }
.aq-book-top b { grid-column: 1 / -1; font: 700 40px/1 var(--head); letter-spacing: -.04em; color: var(--t); font-variant-numeric: tabular-nums; }
.aq-book-top small { grid-column: 1 / -1; font-size: 12px; color: var(--muted); margin-top: -4px; }
.aq-sheets { height: 30px; position: relative; }
.aq-sheets i { position: absolute; left: 0; right: 10px; height: 22px; border-radius: 3px; background: var(--tile-2); box-shadow: 0 0 0 1px var(--hair); }
.aq-sheets i:nth-child(2) { top: 4px; left: 4px; right: 6px; } .aq-sheets i:nth-child(3) { top: 8px; left: 8px; right: 2px; background: #fff; }
.aq-slots { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; align-content: start; }
.aq-slots li { height: 18px; border-radius: 4px; background: var(--tile); font: 600 9px/18px var(--k-font); text-align: center; color: transparent; transition: background .4s, color .4s; }
.aq-slots li.on { background: var(--c); color: #fff; }
.aq-slots li.pop { animation: a-pop .5s var(--ease); }
@media (max-width: 960px) { .aq-hero { height: 380px; } }
@media (max-width: 520px) {
  .aq-hero { height: 360px; }
  .aq-papers { left: 12px; top: 14px; gap: 6px; } .aq-paper { width: 92px; height: 44px; padding: 6px 10px; } .aq-paper b { font-size: 15px; }
  .aq-card { left: 12px; right: 12px; width: auto; top: auto; bottom: 14px; }
  .aq-card.go { transform: translate(40px, -120px) scale(.4); }
  .aq-book { right: 12px; top: 14px; bottom: auto; height: 190px; width: 140px; }
  .aq-slots { grid-template-columns: repeat(5, 1fr); }
}

/* ---------- QCAB generator ---------- */
.qc { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 20px; margin-top: 40px; align-items: start; }
.qc-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.qc-ctl { gap: 8px; }
.qc-lab { font-size: 13px; font-weight: 600; color: var(--muted); margin-top: 4px; }
.qc-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.qc-seg button { height: 36px; padding: 0 12px; border: 0; border-radius: 8px; background: var(--tile); font-weight: 600; font-size: 14px; color: var(--text); transition: background .15s, color .15s; }
.qc-seg button:hover { background: var(--tile-h); }
.qc-seg button.on { background: var(--c); color: #fff; }
.qc-seg button.nope { animation: qc-no .35s; }
@keyframes qc-no { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.qc-go { margin-top: 10px; width: 100%; }
.qc-go svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.qc-busy .qc-go svg { animation: qc-spin .5s linear; }
@keyframes qc-spin { to { transform: rotate(360deg); } }
.qc-sum { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 6px; }
.qc-sum span { border-radius: 10px; background: var(--tile-2); padding: 8px 10px; font-size: 12px; color: var(--muted); }
.qc-sum b { display: block; font: 700 22px/1.1 var(--head); color: var(--ink); letter-spacing: -.02em; }
.qc-codebox { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 13px; color: var(--muted); }
.qc-codebox b { font: 700 14px var(--k-font); color: var(--ink); letter-spacing: .04em; }
.qc-copy { margin-left: auto; border: 0; background: none; color: var(--blue); font-weight: 600; font-size: 13px; padding: 4px 0; }
.qc-pdf > b { font: 700 18px/1.25 var(--head); letter-spacing: -.02em; }
.qc-pdf > p { font-size: 14px; color: var(--muted); }
.qc-pdf-b { display: flex; gap: 8px; flex-wrap: wrap; }
.qc-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; max-height: 560px; overflow: auto; border-radius: 16px; }
.qc-sec { font: 600 12px var(--k-font); color: var(--t); text-transform: uppercase; letter-spacing: .06em; padding: 8px 4px 2px; }
.qc-row { display: flex; align-items: stretch; gap: 0; border-radius: 12px; background: #fff; box-shadow: var(--ring); transition: box-shadow .2s; }
.qc-row.on { box-shadow: 0 0 0 2px var(--c); }
.qc-row.qc-new { animation: qc-flash 1.2s var(--ease); }
@keyframes qc-flash { 0% { background: var(--s); } 100% { background: #fff; } }
.qc-jump { flex: 1; min-width: 0; text-align: left; border: 0; background: none; padding: 10px 12px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px; }
.qc-n { grid-row: span 2; font: 700 13px/1.4 var(--k-font); color: var(--t); }
.qc-t { font-size: 13px; line-height: 1.4; color: var(--text); }
.qc-meta { font-size: 11.5px; color: var(--faint); }
.qc-swap { flex: none; width: 40px; border: 0; border-left: 1px solid var(--hair); background: none; color: var(--muted); border-radius: 0 12px 12px 0; display: grid; place-items: center; }
.qc-swap:hover:not(:disabled) { background: var(--s); color: var(--t); }
.qc-swap:disabled { opacity: .3; cursor: default; }
.qc-swap svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.qb-view { position: sticky; top: 92px; border-radius: 18px; background: #e9e8e5; overflow: hidden; box-shadow: var(--ring); min-width: 0; }
.qb-bar { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: #fff; border-bottom: 1px solid var(--hair); font-size: 13px; }
.qb-count { font-weight: 600; font-variant-numeric: tabular-nums; }
.qb-hint { color: var(--muted); }
.qb-zoom { margin-left: auto; border: 0; background: var(--tile); border-radius: 8px; height: 30px; padding: 0 12px; font-weight: 600; font-size: 13px; }
.qb-scroll { height: min(78vh, 900px); overflow: auto; padding: 18px; scroll-behavior: smooth; overscroll-behavior: contain; }
.qb-pages { display: flex; flex-direction: column; align-items: center; gap: 16px; transition: opacity .25s; }
.qc-busy .qb-pages { opacity: .35; }
.qb-noprint { display: none; }
@media (max-width: 960px) {
  .qc { grid-template-columns: minmax(0, 1fr); }
  .qb-view { position: relative; top: 0; order: -1; }
  .qc-side { order: 0; }
  .qc-list { max-height: none; }
  .qb-scroll { height: 70vh; padding: 12px; }
}

/* the booklet page: A4-ish (595 x 772 like the UPSC specimen), everything sized in container units so it scales */
.qb-pg { position: relative; width: 100%; max-width: 640px; aspect-ratio: 595 / 772; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.12), 0 8px 24px -12px rgba(0,0,0,.25);
  container-type: inline-size; font-family: 'Times New Roman', 'Tinos', Georgia, serif; color: #111; overflow: hidden; flex: none; }
.qb-big .qb-pg { max-width: 920px; }
.qb-wm { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; font: 700 8.5cqw/1 var(--k-font); color: rgba(9,127,232,.07); transform: rotate(-36deg); white-space: nowrap; letter-spacing: .02em; z-index: 0; }
.qb-ft { position: absolute; left: 6cqw; right: 6cqw; bottom: 3.4cqw; display: grid; grid-template-columns: 1fr auto 1fr; font: 600 1.9cqw var(--k-font); color: #333; }
.qb-ft span:first-child { letter-spacing: .02em; }
/* cover */
.qb-cover { padding: 5cqw 6cqw; display: flex; flex-direction: column; gap: 3cqw; }
.qb-box { border: .25cqw solid #222; padding: 1.4cqw 2cqw; }
.qb-cv-top { display: flex; justify-content: flex-end; }
.qb-code { font: 700 2.1cqw var(--k-font); }
.qb-cv-row { display: grid; grid-template-columns: 15cqw 1fr 26cqw; align-items: center; gap: 3cqw; }
.qb-tile { width: 13cqw; height: 13cqw; }
.qb-tile .tl { width: 100% !important; height: 100% !important; }
.qb-cv-t { text-align: center; display: flex; flex-direction: column; gap: 1cqw; }
.qb-cv-t span { font-size: 3.3cqw; font-weight: 700; }
.qb-cv-t b { font-size: 3.6cqw; letter-spacing: .02em; }
.qb-off { text-align: center; display: flex; flex-direction: column; gap: .6cqw; font-size: 2cqw; min-height: 14cqw; }
.qb-cv-tm { display: flex; justify-content: space-between; font-size: 2.7cqw; font-weight: 700; border-bottom: .2cqw solid #222; padding-bottom: 1.6cqw; }
.qb-cv-gi b { display: block; text-align: center; font-size: 2.6cqw; margin-bottom: 1cqw; }
.qb-cv-gi p { font-size: 2.2cqw; line-height: 1.45; text-align: justify; }
.qb-cv-c { display: grid; grid-template-columns: 1fr 24cqw; gap: 2.4cqw; margin-top: 1cqw; }
.qb-cand { display: flex; flex-direction: column; gap: 2.2cqw; font-size: 2.2cqw; padding: 2.4cqw; }
.qb-cand small, .qb-bno small { font-size: 1.9cqw; }
.qb-roll { display: flex; align-items: center; gap: 0; }
.qb-roll i { width: 4.6cqw; height: 4.6cqw; border: .2cqw solid #222; margin-left: -.2cqw; }
.qb-roll i:first-child { margin-left: 2cqw; }
.qb-bno { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.6cqw; }
.qb-bno b { font: 400 4.2cqw 'Courier New', monospace; color: #c03a2b; letter-spacing: .08em; }
.qb-cv-note { margin-top: auto; margin-bottom: 4cqw; font: 500 1.9cqw/1.4 var(--k-font); color: #555; text-align: center; }
/* instructions */
.qb-ins { position: relative; z-index: 1; padding: 7cqw 8cqw; display: flex; flex-direction: column; gap: 1.6cqw; text-align: center; }
.qb-ins > b { font-size: 3.4cqw; }
.qb-ins > span { font-size: 2.3cqw; }
.qb-ins h4 { margin: 3cqw 0 0; font-size: 2.8cqw; text-decoration: underline; }
.qb-ins p { font-size: 2.3cqw; }
.qb-ins ol { text-align: left; font-size: 2.35cqw; line-height: 1.55; padding-left: 4cqw; margin: 1cqw 0 0; display: flex; flex-direction: column; gap: 1.3cqw; }
.qb-rule { margin-top: 2cqw; font: 600 2cqw/1.45 var(--k-font) !important; color: #005bab; background: #e6f3fe; border-radius: 1cqw; padding: 1.6cqw 2cqw; text-align: left; }
/* answer pages: question on top-left, the margin on the right */
.qb-ans::before { content: ''; position: absolute; left: 13cqw; top: 4cqw; bottom: 9cqw; border-left: .2cqw solid #222; }
.qb-body { position: absolute; left: 4cqw; right: 17cqw; top: 4.2cqw; z-index: 1; display: flex; flex-direction: column; gap: 1.6cqw; }
.qb-sec { text-align: center; font-weight: 700; font-size: 2.6cqw; letter-spacing: .04em; margin-left: 9cqw; }
.qb-q { display: grid; grid-template-columns: 8.4cqw minmax(0, 1fr) 6cqw; gap: 0 1.6cqw; font-size: 2.45cqw; line-height: 1.42; }
.qb-no { font-weight: 400; display: flex; flex-direction: column; gap: .8cqw; }
.qb-no i { font-style: normal; }
.qb-tx em { font-style: italic; white-space: nowrap; }
.qb-m { text-align: right; }
.qb-case .qb-tx p { margin: 0 0 1.2cqw; font-size: 2.15cqw; line-height: 1.42; text-align: justify; }
.qb-case .qb-pt { display: grid; grid-template-columns: 4.4cqw 1fr; }
.qb-mg { position: absolute; right: 2.6cqw; top: 4cqw; bottom: 9cqw; width: 12cqw; border-left: .2cqw solid #222; padding-left: 1.2cqw; display: flex; flex-direction: column; gap: .6cqw; font-size: 1.55cqw; line-height: 1.25; text-align: center; }
.qb-mg span { font-weight: 700; }
.qb-mg b { font-weight: 700; }
.qb-rough { position: absolute; left: 0; right: 0; top: 5cqw; text-align: center; font-weight: 700; font-size: 2.8cqw; letter-spacing: .04em; }

@media print {
  .qb-view, .qc-side { display: none !important; }
  .qb-noprint { display: block; font: 600 16px var(--k-font); }
}

/* ---------- CSE Mains Evaluator ---------- */
.ev-mini { position: relative; height: 380px; border-radius: 24px; background: var(--tile); background-image: radial-gradient(rgba(0,0,0,.075) 1.1px, transparent 1.1px); background-size: 22px 22px; overflow: hidden; }
.ev-mini-pg { position: absolute; left: 10%; top: 12%; width: 46%; height: 76%; border-radius: 6px; background: #fff; box-shadow: var(--lift); padding: 22px 18px; display: flex; flex-direction: column; gap: 12px; transform: rotate(-3deg); }
.ev-mini-pg i { height: 7px; border-radius: 4px; background: var(--tile); }
.ev-mini-pg i:nth-child(1) { width: 80%; background: var(--c); } .ev-mini-pg i:nth-child(3) { width: 90%; } .ev-mini-pg i:nth-child(5) { width: 60%; }
.ev-mini-pg::after { content: ''; position: absolute; left: 0; right: 0; height: 3px; background: var(--c); box-shadow: 0 0 18px var(--c); top: 10%; animation: ev-scan 2.6s ease-in-out infinite; }
.ev-mini-s { position: absolute; right: 8%; top: 14%; border-radius: 14px; background: #fff; box-shadow: var(--lift); padding: 14px 16px; display: grid; grid-template-columns: auto auto; gap: 4px 14px; align-items: baseline; }
.ev-mini-s span { font-size: 12px; color: var(--muted); }
.ev-mini-s b { font: 700 28px var(--head); letter-spacing: -.03em; color: var(--t); }
.ev-mini-s b:last-child { color: #1aae39; }
.ev-mini-pyr { position: absolute; right: 8%; bottom: 12%; width: 38%; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column-reverse; align-items: center; gap: 4px; }
.ev-mini-pyr li { height: 22px; border-radius: 5px; background: #fff; box-shadow: var(--ring); }
.ev-mini-pyr li:nth-child(1) { width: 100%; } .ev-mini-pyr li:nth-child(2) { width: 82%; } .ev-mini-pyr li:nth-child(3) { width: 64%; } .ev-mini-pyr li:nth-child(4) { width: 46%; }
.ev-mini-pyr li.on { background: var(--c); animation: a-pop 2.6s var(--ease) infinite; }
@keyframes ev-scan { 0%, 100% { top: 10%; } 50% { top: 88%; } }

.ev { margin-top: 40px; border-radius: 22px; background: #fff; box-shadow: var(--lift); overflow: hidden; }
.ev-tabs { display: flex; gap: 4px; padding: 10px; border-bottom: 1px solid var(--hair); overflow-x: auto; scrollbar-width: none; }
.ev-tab { flex: 1; min-width: max-content; display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border: 0; border-radius: 10px; background: none; font-weight: 600; font-size: 14px; color: var(--muted); }
.ev-tab span { width: 22px; height: 22px; border-radius: 50%; background: var(--tile); display: grid; place-items: center; font-size: 12px; }
.ev-tab[aria-selected="true"] { background: var(--s); color: var(--t); }
.ev-tab[aria-selected="true"] span { background: var(--c); color: #fff; }
.ev-tab.done span { background: var(--t); color: #fff; }
.ev-box { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
.ev-stage { position: relative; min-height: 470px; background: var(--tile-2); background-image: radial-gradient(rgba(0,0,0,.06) 1.1px, transparent 1.1px); background-size: 22px 22px; overflow: hidden; }
.ev-caps { padding: 28px; display: grid; align-content: center; }
.ev-cap { grid-area: 1 / 1; opacity: 0; transform: translateY(10px); transition: opacity .4s, transform .4s var(--ease); pointer-events: none; }
.ev-cap > h3 { font: 700 26px/1.15 var(--head); letter-spacing: -.03em; }
.ev-cap > p { margin-top: 10px; color: var(--muted); font-size: 16px; line-height: 1.55; }
.ev[data-step="0"] .ev-cap[data-step="0"], .ev[data-step="1"] .ev-cap[data-step="1"], .ev[data-step="2"] .ev-cap[data-step="2"], .ev[data-step="3"] .ev-cap[data-step="3"], .ev[data-step="4"] .ev-cap[data-step="4"] { opacity: 1; transform: none; }
.ev-ctl { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-top: 1px solid var(--hair); }
.ev-play { width: 34px; height: 34px; border: 0; border-radius: 8px; background: var(--tile); display: grid; place-items: center; }
.ev-play svg { width: 18px; height: 18px; fill: currentColor; }
.ev-prog { flex: 1; height: 4px; border-radius: 4px; background: var(--tile); overflow: hidden; }
.ev-prog i { display: block; height: 100%; width: 0; background: var(--c); }

/* the copy (answer sheet) */
.ev-copy { position: absolute; left: 6%; top: 7%; width: 56%; bottom: 7%; border-radius: 6px; background: #fff; box-shadow: 0 0 0 1px var(--hair), 0 16px 40px -18px rgba(0,0,0,.35); padding: 18px 18px; display: flex; flex-direction: column; gap: 10px;
  transition: transform .8s var(--ease), left .8s var(--ease), width .8s var(--ease), opacity .5s; }
.ev-copy-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ev-copy-h small { font-size: 11px; color: var(--muted); }
.ev-qq { font-size: 13px; line-height: 1.45; font-weight: 600; }
.ev-qq em { font-weight: 400; color: var(--muted); }
.ev-lines { display: flex; flex-direction: column; gap: 13px; margin-top: 4px; }
.ev-lines i { height: 7px; border-radius: 4px; background: #d9d7d3; transform-origin: left; transform: scaleX(0); transition: transform .5s var(--ease); }
.ev-lines i:nth-child(odd) { width: 92%; } .ev-lines i:nth-child(3n) { width: 74%; } .ev-lines i:nth-child(8) { width: 48%; }
.ev-scan { position: absolute; left: 0; right: 0; height: 3px; top: 12%; background: var(--c); box-shadow: 0 0 16px var(--c); opacity: 0; }
.ev-up { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 10px; background: var(--c); color: #fff; font-weight: 600; font-size: 14px; opacity: 0; transition: opacity .3s; }
.ev-up svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ev-tick { position: absolute; right: -8px; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 6px; background: #1aae39; color: #fff; opacity: 0; transform: translateX(10px); transition: opacity .35s, transform .35s var(--ease); }
.ev-t1 { top: 34%; } .ev-t2 { top: 52%; } .ev-t3 { top: 70%; }
.ev-pane { position: absolute; right: 5%; top: 7%; width: 38%; display: flex; flex-direction: column; gap: 10px; opacity: 0; transform: translateX(16px); transition: opacity .45s, transform .45s var(--ease); pointer-events: none; }
.ev-pane > b { font-size: 13px; font-weight: 600; color: var(--muted); }
.ev-bgs { display: flex; flex-direction: column; gap: 8px; }
.ev-bg { border-radius: 12px; background: #fff; box-shadow: var(--ring); padding: 12px 14px; display: flex; flex-direction: column; transition: box-shadow .3s, background .3s; }
.ev-bg b { font: 700 16px var(--head); }
.ev-bg small { font-size: 12px; color: var(--muted); }
.ev-bg.on { box-shadow: 0 0 0 2px var(--c); background: var(--s); }
.ev-tp { border-radius: 12px; background: #fff; box-shadow: var(--ring); padding: 10px 12px; display: grid; grid-template-columns: 28px 1fr auto; grid-template-rows: auto auto; gap: 4px 10px; align-items: center; }
.ev-tp > i { grid-row: span 2; width: 28px; height: 34px; border-radius: 3px; background: var(--tile); box-shadow: inset 0 0 0 1px var(--hair); }
.ev-tp b { font-size: 13px; display: block; } .ev-tp small { font-size: 11px; color: var(--muted); }
.ev-tp em { grid-column: 2; height: 5px; border-radius: 3px; background: var(--tile); overflow: hidden; }
.ev-tp em i { display: block; height: 100%; width: 0; background: var(--c); transition: width 1.1s var(--ease); }
.ev-tp strong { grid-column: 3; grid-row: 1 / span 2; font: 700 16px var(--head); color: var(--t); }
.ev-tpl { display: flex; flex-direction: column; gap: 8px; }
.ev-tpl span { border-radius: 10px; background: #fff; box-shadow: var(--ring); padding: 10px 12px; font-size: 13px; line-height: 1.4; opacity: 0; transform: translateY(-18px); transition: opacity .4s, transform .5s cubic-bezier(.3,1.5,.5,1); transition-delay: calc(var(--i) * .25s); }
.ev-tpl em { display: block; font-style: normal; font-size: 11px; font-weight: 700; color: var(--t); text-transform: uppercase; letter-spacing: .05em; }
.ev-p4 { width: 44%; right: 3%; top: 5%; gap: 8px; }
.ev-score { display: grid; grid-template-columns: auto auto; gap: 0 12px; align-items: baseline; border-radius: 12px; background: #fff; box-shadow: var(--ring); padding: 10px 14px; }
.ev-score span { font-size: 12px; color: var(--muted); }
.ev-score b { font: 700 26px var(--head); letter-spacing: -.03em; }
.ev-score b i { font-style: normal; }
.ev-pot { color: #1aae39; }
.ev-pyr { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ev-lv { display: grid; grid-template-columns: auto 1fr auto; gap: 6px; align-items: center; border-radius: 8px; background: #fff; box-shadow: var(--ring); padding: 5px 9px; font-size: 11px; transition: background .4s, color .4s, box-shadow .4s; }
.ev-lv:nth-child(1) { width: 70%; } .ev-lv:nth-child(2) { width: 80%; } .ev-lv:nth-child(3) { width: 90%; } .ev-lv:nth-child(4) { width: 100%; }
.ev-lv b { font-weight: 700; } .ev-lv span { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ev-lv em { font-style: normal; font-weight: 700; }
.ev-lv.now { background: var(--s); box-shadow: 0 0 0 2px var(--c); }
.ev-lv.goal { background: #e6f6e9; box-shadow: 0 0 0 2px #1aae39; }
.ev-add { border-radius: 12px; background: #fff; box-shadow: var(--ring); padding: 10px 12px; }
.ev-add > b { font-size: 12.5px; }
.ev-add ul { list-style: none; padding: 0; margin: 6px 0 0; display: flex; flex-direction: column; gap: 6px; }
.ev-add li { font-size: 11.5px; line-height: 1.4; display: flex; gap: 6px; align-items: flex-start; opacity: 0; transform: translateX(10px); transition: opacity .4s, transform .4s var(--ease); transition-delay: calc(.6s + var(--i) * .35s); }
.ev-add li .tag { height: 18px; font-size: 10px; flex: none; }

/* step states */
.ev[data-step="0"] .ev-up { opacity: 1; animation: a-pop 1.6s var(--ease) infinite; }
.ev[data-step="0"] .ev-copy { transform: translateY(var(--upy, 0)); }
.ev:not([data-step="0"]) .ev-lines i { transform: scaleX(1); }
.ev[data-step="0"].lines .ev-lines i { transform: scaleX(1); }
.ev-lines i:nth-child(2) { transition-delay: .08s; } .ev-lines i:nth-child(3) { transition-delay: .16s; } .ev-lines i:nth-child(4) { transition-delay: .24s; }
.ev-lines i:nth-child(5) { transition-delay: .32s; } .ev-lines i:nth-child(6) { transition-delay: .4s; } .ev-lines i:nth-child(7) { transition-delay: .48s; } .ev-lines i:nth-child(8) { transition-delay: .56s; }
.ev[data-step="1"] .ev-p1, .ev[data-step="2"] .ev-p2, .ev[data-step="3"] .ev-p3, .ev[data-step="4"] .ev-p4 { opacity: 1; transform: none; pointer-events: auto; }
.ev[data-step="2"] .ev-scan { opacity: 1; animation: ev-scan 2.2s ease-in-out infinite; }
.ev[data-step="2"] .ev-tp em i { width: var(--w); }
.ev[data-step="3"] .ev-tpl span { opacity: 1; transform: none; }
.ev[data-step="3"] .ev-tick, .ev[data-step="4"] .ev-tick { opacity: 1; transform: none; }
.ev[data-step="4"] .ev-copy { width: 48%; left: 4%; }
.ev[data-step="4"] .ev-add li { opacity: 1; transform: none; }
@media (max-width: 860px) {
  .ev-box { grid-template-columns: minmax(0, 1fr); }
  .ev-stage { min-height: 560px; }
  .ev-copy, .ev[data-step="4"] .ev-copy { left: 5%; width: 90%; top: 4%; bottom: auto; height: 40%; }
  .ev-lines { gap: 9px; } .ev-lines i:nth-child(n+6) { display: none; }
  .ev-pane, .ev-p4 { left: 5%; right: 5%; width: auto; top: auto; bottom: 4%; }
  .ev-tick { right: 4px; } .ev-t1 { top: 55%; } .ev-t2 { top: 70%; } .ev-t3 { top: 85%; }
  .ev-caps { padding: 20px; min-height: 150px; }
  .ev-cap > h3 { font-size: 22px; }
}
@media (max-width: 860px) { .ev[data-step="4"] .ev-copy { opacity: .0; } .ev-p4 { top: 4%; bottom: auto; } }
@media (prefers-reduced-motion: reduce) { .ev *, .ev-mini * { animation: none !important; } }

/* ---------- CA Zoom ---------- */
.cz-hero { position: relative; height: 400px; border-radius: 24px; background: var(--tile); overflow: hidden; }
.cz-map { position: absolute; inset: 0; }
.cz-map svg { width: 100%; height: 100%; transform-origin: 53% 54%; animation: cz-zoom 9s var(--ease) infinite; }
.cz-map path { fill: none; stroke: #c9c6c0; stroke-width: 3; stroke-linecap: round; }
.cz-m1 path { stroke: #e0ddd7; stroke-width: 6; } .cz-m1 circle { fill: var(--c); }
.cz-m2 path { stroke: #e7e4df; stroke-width: 1.6; }
.cz-m3 rect { fill: #fff; stroke: #d6d3cd; stroke-width: 1; }
.cz-m2, .cz-m3 { opacity: 0; animation: cz-show 9s infinite; } .cz-m3 { animation-name: cz-show2; }
.cz-pin { position: absolute; left: 53%; top: 54%; transform: translate(-50%, -150%); background: var(--c); color: #fff; font-weight: 700; font-size: 12px; padding: 4px 10px; border-radius: 8px; }
.cz-mini { position: absolute; left: 20px; right: 70px; bottom: 20px; border-radius: 14px; background: #fff; box-shadow: var(--lift); padding: 14px 16px; display: flex; flex-direction: column; gap: 7px; }
.cz-mini i { height: 7px; border-radius: 4px; background: var(--tile); transform-origin: left; }
.cz-mini .w1 { background: var(--c); width: 76%; }
.cz-mini .w2, .cz-mini .w3, .cz-mini .w4, .cz-mini .w5 { animation: cz-line 9s infinite; }
.cz-mini .w3 { animation-name: cz-line2; width: 88%; } .cz-mini .w4 { animation-name: cz-line3; width: 70%; } .cz-mini .w5 { animation-name: cz-line4; width: 54%; }
.cz-mini-bar { position: absolute; right: 18px; bottom: 20px; width: 38px; border-radius: 12px; background: #fff; box-shadow: var(--lift); display: flex; flex-direction: column; align-items: center; padding: 6px 0; gap: 4px; }
.cz-mini-bar b { font: 700 18px/24px var(--k-font); color: var(--muted); }
.cz-mini-bar span { width: 4px; height: 70px; border-radius: 2px; background: var(--tile); position: relative; }
.cz-mini-bar span i { position: absolute; left: -5px; width: 14px; height: 14px; border-radius: 50%; background: var(--c); animation: cz-knob 9s var(--ease) infinite; }
@keyframes cz-zoom { 0%, 8% { transform: scale(1); } 30% { transform: scale(1.5); } 52% { transform: scale(2.2); } 74%, 88% { transform: scale(3); } 100% { transform: scale(1); } }
@keyframes cz-show { 0%, 24% { opacity: 0; } 34%, 90% { opacity: 1; } 100% { opacity: 0; } }
@keyframes cz-show2 { 0%, 50% { opacity: 0; } 60%, 90% { opacity: 1; } 100% { opacity: 0; } }
@keyframes cz-line { 0%, 12% { transform: scaleX(0); } 22%, 90% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes cz-line2 { 0%, 32% { transform: scaleX(0); } 42%, 90% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes cz-line3 { 0%, 52% { transform: scaleX(0); } 62%, 90% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes cz-line4 { 0%, 70% { transform: scaleX(0); } 78%, 90% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes cz-knob { 0%, 8% { top: 62px; } 30% { top: 42px; } 52% { top: 24px; } 74%, 88% { top: 2px; } 100% { top: 62px; } }
@media (prefers-reduced-motion: reduce) { .cz-hero * { animation: none !important; } .cz-m2, .cz-m3 { opacity: 1; } }

.cz { margin-top: 40px; border-radius: 22px; background: #fff; box-shadow: var(--lift); overflow: hidden; }
.cz-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 20px; border-bottom: 1px solid var(--hair); }
.cz-meta { font-size: 13px; color: var(--muted); }
.cz-meta b { color: var(--ink); font-weight: 600; }
.cz-names { position: relative; display: grid; }
.cz-names span { grid-area: 1 / 1; display: flex; align-items: baseline; gap: 8px; font-size: 13px; color: var(--muted); opacity: 0; transition: opacity .3s; justify-self: end; white-space: nowrap; }
.cz-names b { font: 700 16px var(--head); color: var(--t); }
.cz[data-lv="1"] .cz-names [data-lv="1"], .cz[data-lv="2"] .cz-names [data-lv="2"], .cz[data-lv="3"] .cz-names [data-lv="3"], .cz[data-lv="4"] .cz-names [data-lv="4"], .cz[data-lv="5"] .cz-names [data-lv="5"] { opacity: 1; }
.cz-body { display: grid; grid-template-columns: minmax(0, 1fr) 64px; }
.cz-art { padding: clamp(20px, 4vw, 44px); min-height: 420px; outline: none; touch-action: pan-y; transition: font-size .45s var(--ease); }
.cz-art:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; border-radius: 12px; }
.cz-h { font: 700 clamp(24px, 3vw, 32px)/1.15 var(--head); letter-spacing: -.03em; margin-bottom: 18px; }
.cz-text { font-size: 19px; line-height: 1.65; color: var(--text); }
.cz[data-lv="1"] .cz-text { font: 600 clamp(22px, 2.6vw, 28px)/1.4 var(--head); letter-spacing: -.02em; color: var(--ink); }
.cz[data-lv="2"] .cz-text { font-size: 20px; }
.cz-p { margin: 0; }
.cz-p:empty, .cz-p.off { display: none; }
.cz-p + .cz-p { margin-top: 14px; }
.cz-f { transition: background-color 1.6s ease; border-radius: 4px; }
.cz-f.off { display: none; }
.cz-f.new { background-color: var(--hl); animation: cz-in .6s var(--ease); }
.cz-f.fade { background-color: transparent; }
@keyframes cz-in { from { opacity: 0; } to { opacity: 1; } }
.cz-full { display: none; font-size: 16px; line-height: 1.65; color: var(--text); }
.cz-full p { margin: 0 0 14px; }
.cz-srcnote { font-size: 13px; color: var(--muted); }
.cz[data-lv="5"] .cz-text { display: none; }
.cz[data-lv="5"] .cz-full { display: block; animation: cz-in .5s; }
.cz-lens { display: none; margin-top: 24px; border-radius: 14px; background: var(--s); padding: 16px; gap: 12px; grid-template-columns: auto 1fr 1fr; align-items: start; }
.cz-lens .tag { background: #fff; }
.cz[data-lv="3"] .cz-lens, .cz[data-lv="4"] .cz-lens { display: grid; animation: cz-in .5s; }
.cz-lens-c b { font: 700 14px var(--head); color: var(--t); }
.cz-lens-c ul { margin: 6px 0 0; padding-left: 18px; font-size: 14px; line-height: 1.5; }
@media (max-width: 760px) { .cz-lens { grid-template-columns: minmax(0, 1fr); } }
.cz-zoom { border-left: 1px solid var(--hair); display: flex; flex-direction: column; align-items: center; padding: 16px 0; gap: 8px; position: relative; }
.cz-zoom > button { width: 40px; height: 40px; border: 0; border-radius: 12px; background: var(--tile); font: 600 22px/1 var(--k-font); color: var(--ink); }
.cz-zoom > button:hover { background: var(--tile-h); }
.cz-zoom > button:disabled { opacity: .35; }
.cz-track { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column-reverse; gap: 6px; position: sticky; top: 120px; }
.cz-track button { width: 34px; height: 34px; border: 0; border-radius: 50%; background: none; display: grid; place-items: center; }
.cz-track button span { width: 12px; height: 12px; border-radius: 50%; background: #dcdad6; font-size: 0; transition: all .25s var(--ease); }
.cz-track button.on span { width: 26px; height: 26px; background: var(--c); color: #fff; font: 700 12px/26px var(--k-font); text-align: center; }
.cz-track button.past span { background: color-mix(in srgb, var(--c) 45%, #fff); }
.cz-zoom { justify-content: flex-start; }
.cz-foot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 20px; border-top: 1px solid var(--hair); font-size: 13px; color: var(--muted); }
.cz-count { font-weight: 600; color: var(--ink); }
@media (max-width: 640px) {
  .cz-body { grid-template-columns: minmax(0, 1fr) 52px; }
  .cz-art { padding: 18px 16px; min-height: 360px; }
  .cz-text { font-size: 17px; }
  .cz-zoom > button { width: 36px; height: 36px; }
  .cz-names span { justify-self: start; }
  .cz-hero { height: 340px; }
}

/* ---------- acads.AI home (/ai/), after the acads.com home: news pill, big three-line headline, tool icons, grey panel with the showcase ---------- */
.ah-hero { padding: 28px 0 0; }
.ah-news { display: flex; justify-content: center; }
.ah-news a { display: inline-flex; align-items: center; gap: 10px; height: 34px; padding: 0 14px 0 6px; border-radius: 999px; background: #fff; box-shadow: var(--ring); font-size: 14px; color: var(--text); }
.ah-news a:hover { box-shadow: 0 0 0 1px rgba(0,0,0,.16); color: var(--ink); }
.ah-news b { color: var(--blue); font-weight: 600; }
.ah-new { height: 22px; padding: 0 8px; border-radius: 999px; background: var(--blue-s); color: var(--blue-h); font-size: 12px; font-weight: 700; display: grid; place-items: center; }
.ah-hero-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; padding: clamp(40px, 7vw, 84px) 0 24px; }
.ah-h1 { font: 800 clamp(44px, 5.6vw, 84px)/1 var(--k-font); letter-spacing: -.055em; display: flex; flex-direction: column; align-items: flex-start; }
.ah-l { display: inline-block; opacity: 0; transform: translateY(18px); animation: ah-rise .7s var(--ease) forwards; animation-delay: calc(.12s + var(--i) * .16s); white-space: nowrap; }
.ah-l.hl { position: relative; isolation: isolate; }
.ah-l.hl::before { content: ''; position: absolute; z-index: -1; left: -.08em; right: -.1em; top: .1em; bottom: .02em; border-radius: .14em; background: var(--hl); transform: rotate(-1.2deg) scaleX(0); transform-origin: left; animation: ah-hl .6s var(--ease) .75s forwards; }
.ah-l.strike { color: #b5b2ad; }
.ah-l.strike s { text-decoration: none; position: relative; }
.ah-l.strike s::after { content: ''; position: absolute; left: -.04em; right: -.04em; top: 52%; height: .09em; border-radius: .05em; background: #e5484d; transform: scaleX(0); transform-origin: left; animation: ah-hl .5s var(--ease) 1.15s forwards; }
@keyframes ah-rise { to { opacity: 1; transform: none; } }
@keyframes ah-hl { to { transform: rotate(-1.2deg) scaleX(1); } }
.ah-l.strike s::after { animation-name: ah-strike; }
@keyframes ah-strike { to { transform: scaleX(1); } }
.ah-lede { margin-top: 26px; max-width: 520px; }
.ah-hero .ctas { margin-top: 28px; }
@media (max-width: 960px) { .ah-hero-in { grid-template-columns: minmax(0, 1fr); gap: 36px; } }
@media (max-width: 560px) { .ah-h1 { font-size: 12.4vw; } }

/* the window frame round a screenshot */
.ah-win { border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.08), 0 18px 44px -18px rgba(0,0,0,.28); overflow: hidden; }
.ah-win-bar { height: 30px; display: flex; align-items: center; gap: 6px; padding: 0 12px; border-bottom: 1px solid var(--hair); background: #fbfbfa; }
.ah-win-bar i { width: 9px; height: 9px; border-radius: 50%; background: #e3e1dd; }
.ah-win-bar span { margin: 0 auto; transform: translateX(-18px); font-size: 11.5px; color: var(--faint); background: #f1f0ee; border-radius: 6px; padding: 2px 12px; max-width: 70%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ah-win-body { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #fff; }
.ah-win-body img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 0 0; display: block; }

/* hero: a stack of real screens that deals itself (ai.js moves --p) */
.ah-stack { position: relative; aspect-ratio: 16 / 12.4; }
.ah-card { --p: 0; position: absolute; left: 0; right: 0; top: 0; margin: 0; width: 88%; transition: transform .9s var(--ease), opacity .6s, filter .6s;
  transform: translate(calc(var(--p) * 6%), calc(var(--p) * 7%)) rotate(calc(var(--p) * 2.2deg - 2.2deg)) scale(calc(1 - var(--p) * .05)); z-index: calc(10 - var(--p)); }
.ah-card[data-p="3"], .ah-card[data-p="4"] { opacity: 0; }
.ah-card.out { transform: translate(-30%, -6%) rotate(-10deg) scale(.92); opacity: 0; z-index: 11; }

/* icons row */
.ah-icons { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px 28px; margin: 36px 0 0; }
.ah-icons a { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 112px; text-align: center; color: var(--text); font-size: 13.5px; }
.ah-icons a b { font-weight: 500; line-height: 1.3; }
.ah-ic { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--c); box-shadow: 0 0 0 1px var(--hair), 0 4px 12px -6px rgba(0,0,0,.18); transition: transform .3s var(--ease); }
.ah-icons a:hover .ah-ic { transform: translateY(-3px); }

/* grey panel with the showcase */
.ah-tools { padding-top: 64px; }
.ah-panel { border-radius: 32px; background: var(--tile); padding: clamp(36px, 6vw, 64px) clamp(14px, 4vw, 48px); }
.ah-head { text-align: center; display: flex; flex-direction: column; align-items: center; }
.ah-head .h2 { margin-top: 10px; }
.ah-sc { margin-top: 40px; border-radius: 22px; background: #fff; box-shadow: var(--lift); overflow: hidden; }
.ah-tabs { display: flex; align-items: center; gap: 8px; padding: 16px 20px 0; }
.ah-tab { flex: 1; height: 18px; border: 0; background: none; padding: 0; display: flex; align-items: center; }
.ah-tab i { display: block; width: 100%; height: 4px; border-radius: 4px; background: #e9e8e5; position: relative; overflow: hidden; }
.ah-tab i::after { content: ''; position: absolute; inset: 0; width: var(--w, 0%); background: var(--c); border-radius: 4px; }
.ah-tab.done i::after { width: 100%; opacity: .45; }
.ah-pause { width: 30px; height: 30px; border: 0; border-radius: 50%; background: var(--tile); display: grid; place-items: center; flex: none; }
.ah-pause svg { width: 14px; height: 14px; fill: currentColor; }
.ah-sc { display: grid; grid-template-areas: "tabs" "pane"; }
.ah-tabs { grid-area: tabs; }
.ah-pane { grid-area: pane; display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 0; opacity: 0; visibility: hidden; transition: opacity .5s, visibility 0s .5s; }
.ah-pane.on { opacity: 1; visibility: visible; transition: opacity .5s; }
.ah-info { padding: 28px 28px 30px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.ah-info .ah-ic { width: 64px; height: 64px; box-shadow: none; background: var(--s); }
.ah-info small { margin-top: 10px; font-size: 13px; color: var(--muted); }
.ah-info h3 { font: 700 clamp(28px, 3vw, 38px)/1.05 var(--head); letter-spacing: -.035em; }
.ah-info p { color: var(--muted); font-size: 17px; line-height: 1.5; }
.ah-info .btn { margin-top: auto; }
.ah-show { margin: 16px; border-radius: 18px; background: var(--s); background-image: radial-gradient(color-mix(in srgb, var(--t) 16%, transparent) 1.1px, transparent 1.1px); background-size: 22px 22px; padding: clamp(14px, 2.6vw, 28px) clamp(14px, 2.6vw, 28px) 18px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ah-fr { margin: 0; position: absolute; inset: 0; opacity: 0; transition: opacity .7s; }
.ah-fr.on { opacity: 1; }
.ah-fr img { transform-origin: 0 0; transition: transform var(--pan, 6s) linear; }
.ah-fr.on.pan img { transform: scale(1.07); }
.ah-caps { display: grid; min-height: 26px; }
.ah-cap { grid-area: 1 / 1; font: 600 18px/1.35 var(--head); letter-spacing: -.01em; color: var(--t); opacity: 0; transform: translateY(6px); transition: opacity .4s, transform .4s var(--ease); }
.ah-cap.on { opacity: 1; transform: none; }
@media (max-width: 860px) {
  .ah-pane { grid-template-columns: minmax(0, 1fr); }
  .ah-info { padding: 22px 20px 6px; }
  .ah-info .btn { margin-top: 8px; }
  .ah-show { margin: 12px; }
  .ah-icons { gap: 10px 8px; } .ah-icons a { width: 92px; font-size: 12.5px; }
}
.ah-facts { padding-top: 56px; }
.ah-facts .i-stats { margin-top: 0; }
.v-ai .ah-facts .i-stat:nth-child(2) { background: #ecf3ee; } .v-ai .ah-facts .i-stat:nth-child(2) b { color: #3a5c47; }
.v-ai .ah-facts .i-stat:nth-child(3) { background: #fdecea; } .v-ai .ah-facts .i-stat:nth-child(3) b { color: #a3301f; }
.v-ai .ah-facts .i-stat:nth-child(4) { background: #fdf3dc; } .v-ai .ah-facts .i-stat:nth-child(4) b { color: #7a4a06; }
@media (prefers-reduced-motion: reduce) {
  .ah-l, .ah-l.hl::before, .ah-l.strike s::after { animation: none; opacity: 1; transform: none; }
  .ah-l.hl::before { transform: rotate(-1.2deg); }
  .ah-fr img { transition: none; }
}
@media (max-width: 560px) { .ah-news a { height: auto; padding: 6px 12px 6px 6px; font-size: 13px; line-height: 1.35; border-radius: 16px; } .ah-news b { white-space: nowrap; } }