/* License OPL-1 — Abrak
   The home page, fourth generation: "یک بار ثبت کنید".

   One idea carries the page: enter something once, and the rest of the
   business updates itself. The hero shows it happening; everything after
   explains it, prices it and lets the visitor start. The visual language
   comes from the same place: ruled ledger paper, a receipt you tear off,
   ledger leaders between a label and its price, the royal blue of the brand
   for anything you can press, azure for data moving, gold only where money
   is, green only for "done".

   Tokens only (abrak_site/_tokens.css). The one motion that plays unasked is
   the hero ripple; everything else moves only in answer to the visitor, and
   all of it stops under prefers-reduced-motion. New classes are ab-h4-*;
   lifted blocks keep abrak_site's own classes and styles. */

/* AnjomanMax ships Thin…Black but abrak_site declares only 400 and 700. The
   page's type depends on the extremes, so they are declared here. */
@font-face {
  font-family: "AnjomanMax";
  src: url("/abrak_theme/static/src/fonts/AnjomanMax-Black.woff2") format("woff2");
  font-weight: 900; font-display: swap;
}
@font-face {
  font-family: "AnjomanMax";
  src: url("/abrak_theme/static/src/fonts/AnjomanMax-Light.woff2") format("woff2");
  font-weight: 300; font-display: swap;
}

.ab-h4 {
  --h4-royal: var(--c-royal-600, #2a54c6);
  --h4-royal-ink: var(--c-royal-700, #1e3fa0);
  --h4-royal-soft: var(--c-royal-50, #eef3ff);
  --h4-azure: var(--c-azure-400, #38bdf8);
  --h4-gold: var(--c-gold-400, #e0a526);
  --h4-gold-ink: var(--c-gold-700, #8a5a06);
  --h4-ok: var(--color-success, #15803d);
  --h4-ink: var(--color-text, #111827);
  --h4-muted: var(--color-text-muted, #475467);
  --h4-line: var(--color-border, #e3e8f0);
  --h4-paper: var(--color-surface, #fff);
  --h4-mist: var(--c-mist-100, #f4f7fb);
  --h4-pad: clamp(3.5rem, 2.4rem + 4.2vw, 6.5rem);
  color: var(--h4-ink);
}
/* Eyebrow labels above every heading are template chrome; the lifted blocks
   carry them, the redesign does not. Their centred heads are brought in line
   with the start-aligned heads of the rest of the page. */
.ab-h4 .ab-eyebrow { display: none; }
.ab-h4 .ab-section-head { text-align: start; margin-inline: 0; max-width: 46rem; }
.ab-h4 .ab-section-head .ab-section-title { font-weight: 900; }
.ab-h4 .ab-section-head .ab-section-lead { margin-inline: 0; font-weight: 300; }
.ab-h4-hero-copy, .ab-h4-ripple { min-width: 0; }

.ab-h4-define, .ab-h4-config, .ab-h4-day, .ab-h4-flip, .ab-h4-migrate, .ab-h4-voices,
.ab-h4-leak, .ab-h4-spot, .ab-h4-price { padding-block: var(--h4-pad); }
/* The hero is shorter on purpose: on a 1366×768 laptop the start ticket must
   be visible without scrolling. */
.ab-h4-hero { padding-block: clamp(1.8rem, 1rem + 2.4vw, 3.6rem) clamp(2.6rem, 1.6rem + 3vw, 4.6rem); }

/* Section heads start-aligned, not centred: the page reads like a document. */
.ab-h4-head { max-width: 46rem; margin-bottom: clamp(1.6rem, 1rem + 1.6vw, 2.6rem); }
.ab-h4-head h2,
.ab-h4-define h2, .ab-h4-leak h2, .ab-h4-spot h2, .ab-h4-price h2 {
  font-weight: 900; font-size: clamp(1.55rem, 1.1rem + 1.7vw, 2.45rem);
  line-height: 1.4; letter-spacing: 0; margin: 0 0 .7rem; color: var(--h4-ink);
}
.ab-h4-head p { margin: 0; font-weight: 300; font-size: clamp(1rem, .95rem + .3vw, 1.15rem); line-height: 1.95; color: var(--h4-muted); }
.ab-h4-head--dark h2 { color: #fff; }
.ab-h4-head--dark p { color: rgba(255, 255, 255, .78); }

.ab-h4-textlink {
  font-weight: 700; color: var(--h4-royal-ink); text-decoration: underline;
  text-decoration-thickness: 1.5px; text-underline-offset: .35em;
  text-decoration-color: color-mix(in srgb, var(--h4-royal) 35%, transparent);
}
.ab-h4-textlink:hover { text-decoration-color: currentColor; }
.ab-h4-textlink--money { color: var(--h4-gold-ink); text-decoration-color: color-mix(in srgb, var(--h4-gold) 55%, transparent); }

/* ── hero ─────────────────────────────────────────────────────────────────── */

/* Ruled ledger paper with a margin rule on the start edge: the texture of the
   work Abrak replaces, drawn in the brand's own blue at a whisper. */
.ab-h4-hero {
  position: relative; overflow: hidden;
  background:
    repeating-linear-gradient(to bottom, transparent 0 33px, color-mix(in srgb, var(--h4-royal) 7%, transparent) 33px 34px),
    linear-gradient(180deg, var(--h4-royal-soft) 0%, var(--h4-mist) 55%, var(--h4-paper) 100%);
}
.ab-h4-hero-grid {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  gap: clamp(2rem, 1rem + 3vw, 4.5rem); align-items: center;
}

.ab-h4-h1 { margin: 0 0 1.1rem; }
.ab-h4-kicker {
  display: inline-block; margin-bottom: 1rem;
  font-size: clamp(.9rem, .85rem + .2vw, 1rem); font-weight: 700; line-height: 1.8;
  color: var(--h4-royal-ink);
  padding-inline-start: .8rem; border-inline-start: 3px solid var(--h4-royal);
}
/* Two deliberate lines: the need, then the promise. Persian at 900 needs air
   for its dots and descenders; 1.12 made the two lines collide. */
.ab-h4-display {
  display: block; font-weight: 900; color: var(--h4-ink);
  font-size: clamp(2.1rem, 1rem + 3vw, 3.9rem); line-height: 1.42; letter-spacing: 0;
}
.ab-h4-display-1, .ab-h4-display-2 { display: block; }
@media (min-width: 62rem) { .ab-h4-display-1, .ab-h4-display-2 { white-space: nowrap; } }
.ab-h4-display-2 {
  background: linear-gradient(90deg, var(--h4-azure), var(--h4-royal) 55%, var(--h4-royal-ink));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-bottom: .08em;
}
.ab-h4-lede b { color: var(--h4-ink); font-weight: 700; }
.ab-h4-lede {
  max-width: 34rem; margin: 0 0 1.8rem;
  font-weight: 300; font-size: clamp(1.08rem, 1rem + .45vw, 1.3rem); line-height: 1.95; color: var(--h4-muted);
}

/* The ticket: a receipt, torn along the dashed line under the button. */
.ab-h4-ticket {
  position: relative; max-width: 36rem;
  padding: 1.1rem 1.25rem 1rem; border-radius: 18px;
  background: var(--h4-paper);
  box-shadow: 0 1px 0 var(--h4-line), 0 22px 50px -30px color-mix(in srgb, var(--h4-royal) 70%, transparent);
}
.ab-h4-ticket-label { display: block; margin-bottom: .6rem; font-size: .9rem; font-weight: 700; color: var(--h4-ink); }
.ab-h4-ticket-row { display: flex; gap: .55rem; }
.ab-h4-ticket-input {
  flex: 1 1 auto; min-width: 0; font: inherit; font-size: 1.12rem; letter-spacing: .04em;
  padding: .8rem 1rem; border-radius: 12px; text-align: left;
  border: 1.5px solid var(--h4-line); background: var(--h4-mist); color: var(--h4-ink);
}
.ab-h4-ticket-input:focus { outline: none; border-color: var(--h4-royal); background: var(--h4-paper); box-shadow: 0 0 0 4px color-mix(in srgb, var(--h4-royal) 16%, transparent); }
.ab-h4-ticket-input[aria-invalid="true"] { border-color: var(--color-danger); }
.ab-h4-ticket-btn { flex: none; white-space: nowrap; border-radius: 12px; }
.ab-h4-ticket-note {
  list-style: none; margin: .8rem 0 0; padding: .7rem 0 0; display: flex; flex-wrap: wrap; gap: .3rem 1.1rem;
  border-top: 1.5px dashed var(--h4-line); font-size: .82rem; color: var(--h4-muted);
}
.ab-h4-ticket-note li::before {
  content: ""; display: inline-block; width: .5rem; height: .28rem; margin-inline-end: .45rem;
  border: solid var(--h4-ok); border-width: 0 0 2px 2px; transform: translateY(-.2rem) rotate(-45deg);
}
.ab-h4-ticket-err { margin: .6rem 0 0; font-size: .84rem; font-weight: 700; color: var(--color-danger); }

.ab-h4-alt { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; margin-top: 1.2rem; font-size: .92rem; }
.ab-h4-alt a { color: var(--h4-muted); text-decoration: underline; text-decoration-color: var(--h4-line); text-underline-offset: .35em; }
.ab-h4-alt a:hover { color: var(--h4-royal-ink); text-decoration-color: currentColor; }
.ab-h4-alt a:last-child { color: var(--h4-gold-ink); font-weight: 700; }

/* ── hero ripple ──────────────────────────────────────────────────────────── */

.ab-h4-ripple {
  position: relative; padding: 1.1rem; border-radius: 28px;
  background: var(--h4-paper);
  box-shadow: 0 1px 0 var(--h4-line), 0 40px 80px -46px rgba(15, 33, 94, .55);
}
.ab-h4-ripple-picker {
  display: flex; gap: .3rem; overflow-x: auto; scrollbar-width: none;
  padding: .3rem; margin-bottom: 1rem; border-radius: 14px; background: var(--h4-mist);
}
.ab-h4-ripple-picker::-webkit-scrollbar { display: none; }
.ab-h4-pick {
  flex: none; font: inherit; font-size: .84rem; cursor: pointer; white-space: nowrap;
  padding: .45rem .8rem; border: 0; border-radius: 10px; background: transparent; color: var(--h4-muted);
}
.ab-h4-pick[aria-selected="true"] { background: var(--h4-paper); color: var(--h4-royal-ink); font-weight: 700; box-shadow: 0 2px 8px -4px rgba(15, 33, 94, .35); }
.ab-h4-pick:focus-visible, .ab-h4-tab:focus-visible, .ab-h4-rail-stop:focus-visible { outline: 2px solid var(--h4-royal); outline-offset: 2px; }
.ab-h4:not(.is-js) .ab-h4-scn + .ab-h4-scn { display: none; }

/* Tag on its own row (it carries a live timestamp and must not squeeze the
   entry), then what was entered and its amount side by side. */
.ab-h4-entry {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .45rem .8rem;
  padding: .9rem 1rem; border-radius: 16px;
  background: linear-gradient(135deg, var(--h4-royal-ink), var(--h4-royal));
  color: #fff;
}
.ab-h4-entry-tag { grid-column: 1 / -1; justify-self: start; font-size: .72rem; font-weight: 700; padding: .2rem .6rem; border-radius: 999px; background: rgba(255, 255, 255, .18); white-space: nowrap; }
.ab-h4-now:not(:empty)::before { content: " · "; opacity: .7; }
.ab-h4-now { font-weight: 400; opacity: .9; }
.ab-h4-entry-what { font-size: .98rem; line-height: 1.7; }
.ab-h4-entry-amt { font-weight: 900; font-size: 1rem; color: var(--c-gold-300, #f6d488); font-variant-numeric: tabular-nums; white-space: nowrap; }

.ab-h4-flow { position: relative; list-style: none; margin: 1rem 0 .4rem; padding: 0; display: grid; gap: .45rem; }
/* The thread the entry travels along, through every icon. */
.ab-h4-flow::before {
  content: ""; position: absolute; inset-block: 1.1rem; inset-inline-start: calc(.75rem + 17px);
  width: 2px; border-radius: 2px;
  background: linear-gradient(to bottom, var(--h4-azure), var(--h4-royal));
  transform-origin: top;
}
.ab-h4-flow li {
  position: relative; display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: .8rem;
  padding: .42rem .75rem; border-radius: 12px; background: var(--h4-paper);
}
.ab-h4-flow img { position: relative; width: 36px; height: 36px; border-radius: 10px; background: var(--h4-paper); box-shadow: 0 0 0 3px var(--h4-paper); }
.ab-h4-flow-txt b { display: block; font-size: .86rem; }
.ab-h4-flow-txt em { display: block; font-style: normal; font-size: .82rem; line-height: 1.7; color: var(--h4-muted); }
.ab-h4-flow-ok {
  width: 1.35rem; height: 1.35rem; border-radius: 50%; background: var(--h4-ok);
  position: relative;
}
.ab-h4-flow-ok::after {
  content: ""; position: absolute; left: 50%; top: 46%; width: .5rem; height: .28rem;
  border: solid #fff; border-width: 0 0 2px 2px; transform: translate(-50%, -50%) rotate(-45deg);
}
.ab-h4-flow-sum { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .4rem 1rem; margin: .7rem .2rem 0; font-size: .86rem; }
.ab-h4-flow-sum span { font-weight: 700; color: var(--h4-ok); }
.ab-h4-flow-sum a { color: var(--h4-royal-ink); font-weight: 700; }
.ab-h4-ripple-note { margin: .8rem .2rem 0; font-size: .74rem; color: var(--color-text-subtle, #667085); }

/* The sequence: the entry lands, the thread draws, each app answers in turn. */
.ab-h4-scn.is-play .ab-h4-entry { animation: ab-h4-land .5s cubic-bezier(.2, .8, .2, 1) both; }
.ab-h4-scn.is-play .ab-h4-flow::before { animation: ab-h4-draw 2.9s cubic-bezier(.4, 0, .2, 1) .35s both; }
.ab-h4-scn.is-play .ab-h4-flow li { animation: ab-h4-step .45s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(.45s + var(--i) * .55s); }
.ab-h4-scn.is-play .ab-h4-flow-ok { animation: ab-h4-pop .35s cubic-bezier(.3, 1.6, .5, 1) both; animation-delay: calc(.75s + var(--i) * .55s); }
.ab-h4-scn.is-play .ab-h4-flow-sum { animation: ab-h4-fade .5s ease both 3.4s; }
@keyframes ab-h4-land { from { opacity: 0; transform: translateY(-10px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes ab-h4-draw { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes ab-h4-step { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
@keyframes ab-h4-pop { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: none; } }
@keyframes ab-h4-fade { from { opacity: 0; } to { opacity: 1; } }

/* ── the thread of integrations ───────────────────────────────────────────── */

.ab-h4-thread { padding-block: 2rem 2.6rem; background: var(--h4-paper); }
.ab-h4-thread .ab-trust-row { border-bottom: 0; padding-bottom: 0; }
.ab-h4-thread .ab-trust-logos { position: relative; }
.ab-h4-thread .ab-trust-logos::before {
  content: ""; position: absolute; inset-inline: 0; top: 50%; height: 2px; z-index: 0;
  background: linear-gradient(to left, transparent, var(--h4-azure) 12%, var(--h4-royal) 88%, transparent);
  opacity: .35;
}
.ab-h4-thread .ab-trust-logo { position: relative; z-index: 1; }

/* ── what is Abrak: a dictionary entry ────────────────────────────────────── */

.ab-h4-define { background: var(--h4-paper); border-top: 1px solid var(--h4-line); }
.ab-h4-define-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(1.5rem, 1rem + 3vw, 4rem); align-items: start; }
.ab-h4-define-lemma {
  margin: 0 0 .2rem; font-weight: 900; line-height: 1.1;
  font-size: clamp(4.2rem, 2.4rem + 7vw, 9rem);
  color: transparent; -webkit-text-stroke: 2px var(--h4-royal);
}
.ab-h4-define-word h2 { font-size: clamp(1.3rem, 1.1rem + .8vw, 1.7rem); color: var(--h4-muted); font-weight: 700; }
.ab-h4-define-body .ab-answer-lead {
  margin: 0 0 1rem; font-size: clamp(1.08rem, 1rem + .4vw, 1.25rem); line-height: 2.05; color: var(--h4-ink);
}
.ab-h4-define-body .ab-what-note { margin: 0 0 1.6rem; line-height: 2; color: var(--h4-muted); }
.ab-h4-facts {
  margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 2px solid var(--h4-ink);
}
.ab-h4-facts > div { padding: .8rem 0 .8rem .8rem; border-bottom: 1px solid var(--h4-line); }
.ab-h4-facts dt { font-size: .76rem; color: var(--h4-muted); }
.ab-h4-facts dd { margin: .15rem 0 0; font-weight: 700; font-size: .95rem; line-height: 1.6; }

/* ── configurator ─────────────────────────────────────────────────────────── */

.ab-h4-config { background: var(--h4-mist); }
.ab-h4-tabs { display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: thin; padding: .2rem .1rem .8rem; margin-bottom: 1.4rem; }
.ab-h4-tab {
  flex: none; font: inherit; font-size: .92rem; cursor: pointer;
  padding: .55rem 1.05rem; border-radius: 999px;
  border: 1.5px solid var(--h4-line); background: var(--h4-paper); color: var(--h4-ink);
}
.ab-h4-tab:hover { border-color: var(--h4-royal); }
.ab-h4-tab[aria-selected="true"] { background: var(--h4-royal); border-color: var(--h4-royal); color: #fff; font-weight: 700; }
.ab-h4:not(.is-js) .ab-h4-tabs, .ab-h4:not(.is-js) .ab-h4-rail { display: none; }

.ab-h4-config-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(1.5rem, 1rem + 2.5vw, 3.5rem); align-items: start; }

/* The constellation: every app a trade might choose; the trade lights its own. */
.ab-h4-sky {
  order: 2; display: grid; grid-template-columns: repeat(auto-fill, minmax(6.4rem, 1fr)); gap: .55rem;
  padding: 1.1rem; border-radius: 24px; background: var(--h4-paper);
  box-shadow: 0 1px 0 var(--h4-line), 0 30px 60px -44px rgba(15, 33, 94, .45);
}
.ab-h4-star {
  display: flex; flex-direction: column; align-items: center; gap: .35rem; text-align: center;
  padding: .7rem .35rem; border-radius: 14px; border: 1.5px solid transparent;
  transition: opacity .3s ease, filter .3s ease, border-color .3s ease, background .3s ease, transform .3s ease;
}
.ab-h4-star img { width: 40px; height: 40px; border-radius: 11px; }
.ab-h4-star b { font-size: .72rem; line-height: 1.45; font-weight: 700; color: var(--h4-ink); }
.ab-h4-sky.is-lit .ab-h4-star { opacity: .32; filter: grayscale(1); }
.ab-h4-sky.is-lit .ab-h4-star.is-on {
  opacity: 1; filter: none; transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--h4-royal) 45%, transparent);
  background: color-mix(in srgb, var(--h4-royal) 6%, var(--h4-paper));
  box-shadow: 0 10px 22px -16px var(--h4-royal);
}
.ab-h4-panels { order: 1; min-width: 0; }
.ab-h4-panel[hidden] { display: none; }
.ab-h4:not(.is-js) .ab-h4-panel + .ab-h4-panel { margin-top: 2.2rem; }
.ab-h4-panel-name { margin: 0 0 .4rem; font-size: .88rem; font-weight: 700; color: var(--h4-royal-ink); }
.ab-h4-panel h3 { margin: 0 0 .8rem; font-weight: 900; font-size: clamp(1.25rem, 1.05rem + .8vw, 1.6rem); line-height: 1.55; }
.ab-h4-panel-answer { margin: 0 0 1.1rem; line-height: 2.05; }
.ab-h4-panel-apps { list-style: none; margin: 0 0 1.4rem; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.ab-h4-panel-apps a {
  display: inline-block; font-size: .8rem; text-decoration: none; color: var(--h4-royal-ink);
  padding: .25rem .7rem; border-radius: 8px; background: var(--h4-royal-soft);
}
.ab-h4-panel-apps a:hover { background: color-mix(in srgb, var(--h4-royal) 16%, var(--h4-paper)); }
.ab-h4-panel-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.4rem; }

/* ── a working day ────────────────────────────────────────────────────────── */

.ab-h4-day { background: var(--h4-paper); }
.ab-h4-rail {
  position: relative; display: flex; overflow-x: auto; scrollbar-width: none;
  margin-bottom: 1.8rem; padding-bottom: .2rem;
}
.ab-h4-rail::-webkit-scrollbar { display: none; }
.ab-h4-rail::before {
  content: ""; position: absolute; inset-inline: 0; top: 1.05rem; height: 2px; background: var(--h4-line);
}
.ab-h4-rail-stop {
  position: relative; flex: 1 0 8.5rem; font: inherit; cursor: pointer; text-align: start;
  display: flex; flex-direction: column; gap: .15rem;
  padding: 1.9rem .6rem .4rem 0; border: 0; background: transparent; color: var(--h4-muted);
}
.ab-h4-rail-stop::before {
  content: ""; position: absolute; top: .65rem; inset-inline-start: 0;
  width: .85rem; height: .85rem; border-radius: 50%;
  background: var(--h4-paper); border: 2px solid var(--h4-line);
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.ab-h4-rail-stop b { font-size: 1.05rem; font-weight: 900; color: var(--h4-ink); font-variant-numeric: tabular-nums; }
.ab-h4-rail-stop span { font-size: .82rem; }
.ab-h4-rail-stop[aria-selected="true"] { color: var(--h4-royal-ink); }
.ab-h4-rail-stop[aria-selected="true"] b { color: var(--h4-royal-ink); }
.ab-h4-rail-stop[aria-selected="true"]::before { background: var(--h4-royal); border-color: var(--h4-royal); transform: scale(1.25); box-shadow: 0 0 0 5px color-mix(in srgb, var(--h4-royal) 18%, transparent); }

.ab-h4-shot { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: clamp(1.2rem, 1rem + 2vw, 3rem); align-items: center; }
.ab-h4-frame {
  border-radius: 18px; overflow: hidden; background: var(--h4-mist);
  box-shadow: 0 0 0 1px var(--h4-line), 0 36px 70px -44px rgba(15, 33, 94, .55);
}
.ab-h4-frame img { display: block; width: 100%; height: auto; }
.ab-h4-shot-time { margin: 0 0 .2rem; font-weight: 900; font-size: 1.6rem; color: var(--h4-royal); font-variant-numeric: tabular-nums; }
.ab-h4-shot-side h3 { margin: 0 0 .9rem; font-size: 1.25rem; font-weight: 900; }
.ab-h4-shot-side ul { list-style: none; margin: 0 0 1.2rem; padding: 0; display: grid; gap: .6rem; }
.ab-h4-shot-side li { position: relative; padding-inline-start: 1.3rem; line-height: 1.85; }
.ab-h4-shot-side li::before { content: ""; position: absolute; inset-inline-start: 0; top: .72em; width: .5rem; height: .5rem; border-radius: 2px; background: var(--h4-azure); }

/* ── mini leak calculator (money: gold) ───────────────────────────────────── */

.ab-h4-leak { background: linear-gradient(180deg, var(--h4-mist), var(--h4-paper)); }
.ab-h4-leak-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 1rem + 3vw, 4rem); align-items: center; }
.ab-h4-leak-copy p { line-height: 2; color: var(--h4-muted); max-width: 34rem; }
.ab-h4-leak-privacy { font-size: .86rem; color: var(--h4-ink) !important; padding-inline-start: .8rem; border-inline-start: 3px solid var(--h4-ok); }
.ab-h4-leak-card {
  padding: 1.6rem; border-radius: 22px; background: var(--h4-paper);
  border-top: 5px solid var(--h4-gold);
  box-shadow: 0 1px 0 var(--h4-line), 0 34px 70px -46px var(--h4-gold-ink);
}
.ab-h4-leak-card label { display: flex; justify-content: space-between; gap: 1rem; font-size: .9rem; font-weight: 700; }
.ab-h4-leak-card output { color: var(--h4-royal-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ab-h4-leak-card input[type="range"] { width: 100%; margin: .55rem 0 1.2rem; accent-color: var(--h4-royal); direction: ltr; }
.ab-h4-leak-label { margin: .2rem 0 0; font-size: .82rem; color: var(--h4-muted); }
.ab-h4-leak-out {
  margin: .1rem 0 .3rem; font-weight: 900; line-height: 1.25; font-variant-numeric: tabular-nums;
  font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.7rem); color: var(--h4-gold-ink);
}
.ab-h4-leak-formula { margin: 0 0 1.2rem; font-size: .76rem; line-height: 1.8; color: var(--color-text-subtle, #667085); }
.ab-h4-btn-block { display: flex; width: 100%; justify-content: center; }

/* ── why (lifted dark band, reworded) ─────────────────────────────────────── */

.ab-h4-why .ab-diff-card h3 { font-weight: 900; }

/* ── spotlight: a conversation with your own data ─────────────────────────── */

.ab-h4-spot { background: var(--h4-paper); }
.ab-h4-spot-card {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 1rem + 3vw, 4rem); align-items: center;
}
.ab-h4-spot-card + .ab-h4-spot-card { margin-top: var(--h4-pad); }
.ab-h4-spot-copy p { line-height: 2.05; color: var(--h4-muted); margin: 0 0 1.4rem; }
.ab-h4-chat {
  margin: 0; padding: 0; border-radius: 24px; overflow: hidden;
  background: var(--h4-mist); box-shadow: 0 1px 0 var(--h4-line), 0 36px 70px -48px rgba(15, 33, 94, .5);
}
.ab-h4-chat-head {
  display: flex; align-items: center; gap: .6rem; padding: .8rem 1rem;
  background: var(--h4-paper); border-bottom: 1px solid var(--h4-line);
}
.ab-h4-chat-avatar {
  width: 2rem; height: 2rem; border-radius: 50%;
  background: conic-gradient(from 200deg, var(--h4-azure), var(--h4-royal), var(--h4-azure));
}
.ab-h4-chat-head b { font-size: .92rem; }
.ab-h4-chat-status { margin-inline-start: auto; font-size: .74rem; color: var(--h4-ok); }
.ab-h4-chat-status::before { content: ""; display: inline-block; width: .45rem; height: .45rem; border-radius: 50%; background: var(--h4-ok); margin-inline-end: .35rem; }
/* Fixed height, newest at the bottom, the oldest scrolls out of view. */
.ab-h4-chat-log {
  display: flex; flex-direction: column; justify-content: flex-end; gap: .6rem;
  height: 22rem; overflow: hidden; padding: 1rem;
  -webkit-mask: linear-gradient(to bottom, transparent 0, #000 3rem); mask: linear-gradient(to bottom, transparent 0, #000 3rem);
}
.ab-h4:not(.is-js) .ab-h4-chat-log { height: auto; -webkit-mask: none; mask: none; }
.ab-h4-bubble { animation: ab-h4-bubble .35s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes ab-h4-bubble { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
.ab-h4-bubble--tool {
  align-self: flex-end; max-width: 88%; margin: 0; font-size: .76rem; color: var(--h4-royal-ink);
  padding: .3rem .7rem; border-radius: 999px; background: var(--h4-royal-soft);
}
.ab-h4-bubble--tool::before { content: ""; display: inline-block; width: .7rem; height: .7rem; margin-inline-end: .4rem; vertical-align: -.1rem; border-radius: 50%; border: 2px solid var(--h4-royal); border-inline-end-color: transparent; animation: ab-h4-spin .8s linear infinite; }
@keyframes ab-h4-spin { to { transform: rotate(360deg); } }
.ab-h4-bubble--typing { align-self: flex-end; display: inline-flex; gap: .25rem; padding: .7rem .9rem; }
.ab-h4-bubble--typing i { width: .4rem; height: .4rem; border-radius: 50%; background: var(--h4-muted); animation: ab-h4-dot 1s ease-in-out infinite; }
.ab-h4-bubble--typing i:nth-child(2) { animation-delay: .15s; }
.ab-h4-bubble--typing i:nth-child(3) { animation-delay: .3s; }
@keyframes ab-h4-dot { 0%, 100% { opacity: .3; transform: none; } 50% { opacity: 1; transform: translateY(-3px); } }
.ab-h4-chat-input {
  display: flex; align-items: center; gap: .2rem; margin: 0 1rem 1rem; padding: .65rem .9rem; min-height: 2.9rem;
  border-radius: 14px; background: var(--h4-paper); box-shadow: 0 0 0 1px var(--h4-line);
  font-size: .9rem; color: var(--h4-ink);
}
.ab-h4-chat-caret { width: 2px; height: 1.1rem; background: var(--h4-royal); animation: ab-h4-caret 1s steps(1) infinite; }
@keyframes ab-h4-caret { 50% { opacity: 0; } }
.ab-h4-chat-send { margin-inline-start: auto; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--h4-royal); position: relative; flex: none; }
.ab-h4-chat-send::after { content: ""; position: absolute; inset: 0; margin: auto; width: .55rem; height: .55rem; border: solid #fff; border-width: 2px 2px 0 0; transform: translateX(.08rem) rotate(-135deg); }
.ab-h4-chat figcaption { padding: 0 1rem 1rem; }
.ab-h4-bubble { margin: 0; max-width: 88%; padding: .75rem 1rem; line-height: 1.9; font-size: .92rem; border-radius: 18px; }
.ab-h4-bubble--q { align-self: flex-start; background: var(--h4-royal); color: #fff; border-start-start-radius: 6px; }
.ab-h4-bubble--a { align-self: flex-end; background: var(--h4-paper); color: var(--h4-ink); border-end-end-radius: 6px; box-shadow: 0 1px 0 var(--h4-line); }
.ab-h4-chat figcaption { font-size: .74rem; color: var(--color-text-subtle, #667085); }

/* ── the price, in the open ───────────────────────────────────────────────── */

.ab-h4-price { background: var(--h4-mist); }
.ab-h4-price-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 1rem + 3vw, 4rem); align-items: start; }
.ab-h4-price-card { padding: clamp(1.4rem, 1rem + 1.5vw, 2.2rem); border-radius: 24px; background: var(--h4-paper); box-shadow: 0 1px 0 var(--h4-line); }
.ab-h4-price-card > p { color: var(--h4-muted); margin: 0 0 1rem; }
/* Ledger leaders between each tier and its price. */
.ab-h4-tiers { list-style: none; margin: 0 0 1rem; padding: 0; }
.ab-h4-tiers li { display: flex; align-items: baseline; gap: .6rem; padding: .55rem 0; }
.ab-h4-tiers li::after { content: ""; order: 2; flex: 1 1 auto; border-bottom: 2px dotted var(--h4-line); transform: translateY(-.3rem); }
.ab-h4-tiers span { order: 1; font-size: .95rem; }
.ab-h4-tiers b { order: 3; font-weight: 900; font-size: 1.2rem; color: var(--h4-royal-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ab-h4-price-note { font-size: .82rem; line-height: 1.9; color: var(--h4-muted); margin: 0 0 1rem; }
.ab-h4-steps ol { list-style: none; margin: 0 0 1.6rem; padding: 0; display: grid; gap: 1.1rem; }
.ab-h4-steps li { display: grid; grid-template-columns: 2.6rem 1fr; gap: .9rem; align-items: start; }
.ab-h4-step-n {
  display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%;
  font-weight: 900; font-size: 1.1rem; color: var(--h4-royal); background: var(--h4-paper);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--h4-royal) 30%, transparent);
}
.ab-h4-steps h3 { margin: .35rem 0 .25rem; font-size: 1.05rem; font-weight: 900; }
.ab-h4-steps p { margin: 0; line-height: 1.9; color: var(--h4-muted); }

/* ── rivals under the vs-Excel table ──────────────────────────────────────── */

.ab-h4-rivals { margin-top: 2rem; }
.ab-h4-rivals-h { font-size: 1.1rem; font-weight: 900; margin: 0 0 .9rem; }
.ab-h4-rivals-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; margin-bottom: 1rem; }
.ab-h4-rival {
  display: flex; flex-direction: column; gap: .3rem; padding: 1rem 1.1rem; text-decoration: none; color: inherit;
  border-radius: 14px; background: var(--h4-paper); border-inline-start: 4px solid var(--h4-royal);
  box-shadow: 0 1px 0 var(--h4-line);
}
.ab-h4-rival:hover { background: var(--h4-royal-soft); }
.ab-h4-rival b { font-size: 1rem; }
.ab-h4-rival span { font-size: .84rem; color: var(--h4-muted); line-height: 1.7; }

/* ── closing band: the hero's ticket on the dark ──────────────────────────── */

.ab-h4-close h2 { font-weight: 900; font-size: clamp(1.8rem, 1.3rem + 2vw, 2.8rem); }
.ab-h4-close .ab-h4-ticket { margin: 1.6rem auto 0; text-align: start; }

/* ── mobile sticky trial bar ──────────────────────────────────────────────── */

.ab-h4-bar { display: none; }
@media (max-width: 47.9375rem) {
  .ab-h4-bar {
    display: flex; align-items: center; justify-content: space-between; gap: .8rem;
    position: fixed; inset-inline: .6rem; bottom: .6rem; z-index: 60;
    padding: .5rem .55rem .5rem 1rem; border-radius: 999px;
    background: color-mix(in srgb, var(--h4-paper) 94%, transparent); backdrop-filter: blur(10px);
    box-shadow: 0 0 0 1px var(--h4-line), 0 18px 40px -18px rgba(15, 33, 94, .5);
    transform: translateY(160%); transition: transform .3s cubic-bezier(.2, .8, .2, 1);
  }
  .ab-h4-bar.is-on { transform: none; }
  .ab-h4-bar-txt { font-size: .82rem; color: var(--h4-muted); }
  .ab-h4-bar-txt b { color: var(--h4-ink); }
}

/* ── responsive ───────────────────────────────────────────────────────────── */

@media (max-width: 61.9375rem) {
  /* minmax(0, …), not 1fr: a plain 1fr is minmax(auto, 1fr), and the
     scrollable tab strips inside would widen the column past the screen. */
  .ab-h4-hero-grid, .ab-h4-define-grid, .ab-h4-config-grid, .ab-h4-shot,
  .ab-h4-leak-grid, .ab-h4-spot-card, .ab-h4-price-grid { grid-template-columns: minmax(0, 1fr); }
  .ab-h4-rivals-grid { grid-template-columns: 1fr; }
  .ab-h4-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 47.9375rem) {
  .ab-h4-ticket-row { flex-direction: column; }
  .ab-h4-ticket-btn { width: 100%; justify-content: center; }
  .ab-h4-ripple { padding: .8rem; border-radius: 22px; }
  /* On a phone the answer and its button come first; the constellation
     follows as a compact grid of icons. */
  .ab-h4-sky { grid-template-columns: repeat(auto-fill, minmax(4.4rem, 1fr)); gap: .35rem; padding: .7rem; }
  .ab-h4-star { padding: .45rem .2rem; }
  .ab-h4-star img { width: 30px; height: 30px; border-radius: 8px; }
  .ab-h4-star b { font-size: .64rem; }
  .ab-h4-hero::before { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ab-h4-scn.is-play .ab-h4-entry, .ab-h4-scn.is-play .ab-h4-flow::before,
  .ab-h4-scn.is-play .ab-h4-flow li, .ab-h4-scn.is-play .ab-h4-flow-ok,
  .ab-h4-scn.is-play .ab-h4-flow-sum { animation: none; }
  .ab-h4-star, .ab-h4-rail-stop::before, .ab-h4-bar { transition: none; }
}

/* ── the flip board: today / with Abrak ───────────────────────────────────── */

.ab-h4-flip { background: var(--h4-mist); }
.ab-h4-flip-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: 1.8rem; }
.ab-h4-flip-head .ab-h4-head { margin-bottom: 0; }
/* The switch is the only control; the cards answer it. */
.ab-h4-switch {
  display: inline-flex; align-items: center; gap: .7rem; cursor: pointer;
  font: inherit; font-weight: 700; padding: .5rem .8rem; border-radius: 999px;
  border: 0; background: var(--h4-paper); color: var(--h4-muted);
  box-shadow: 0 0 0 1px var(--h4-line), 0 12px 30px -20px rgba(15, 33, 94, .5);
}
.ab-h4-switch-knob { position: relative; width: 3.4rem; height: 1.8rem; border-radius: 999px; background: color-mix(in srgb, var(--color-danger) 22%, var(--h4-mist)); transition: background .3s ease; }
.ab-h4-switch-knob::after {
  content: ""; position: absolute; top: .2rem; inset-inline-start: .2rem; width: 1.4rem; height: 1.4rem; border-radius: 50%;
  background: var(--h4-paper); box-shadow: 0 2px 6px rgba(15, 33, 94, .35); transition: transform .3s cubic-bezier(.3, 1.4, .5, 1);
}
.ab-h4-switch[aria-pressed="true"] .ab-h4-switch-knob { background: var(--h4-ok); }
.ab-h4-switch[aria-pressed="true"] .ab-h4-switch-knob::after { transform: translateX(-1.6rem); }
.ab-h4-switch-off { color: var(--color-danger); }
.ab-h4-switch[aria-pressed="true"] .ab-h4-switch-off { color: var(--h4-muted); }
.ab-h4-switch[aria-pressed="true"] .ab-h4-switch-on { color: var(--h4-ok); }
.ab-h4-switch:focus-visible { outline: 2px solid var(--h4-royal); outline-offset: 3px; }

.ab-h4-flipboard { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; perspective: 1400px; }
.ab-h4-card { position: relative; display: grid; min-height: 9.5rem; }
.ab-h4-card-face {
  grid-area: 1 / 1; display: flex; flex-direction: column; gap: .5rem;
  padding: 1.1rem 1.2rem; border-radius: 18px; line-height: 1.9; font-size: .98rem;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  transition: transform .6s cubic-bezier(.3, .7, .2, 1); transition-delay: calc(var(--i) * .08s);
}
.ab-h4-card-face em { font-style: normal; font-size: .74rem; font-weight: 700; }
.ab-h4-card-before {
  background: var(--h4-paper); color: var(--h4-muted);
  box-shadow: 0 0 0 1px var(--h4-line);
  background-image: repeating-linear-gradient(-45deg, transparent 0 14px, color-mix(in srgb, var(--color-danger) 5%, transparent) 14px 15px);
}
.ab-h4-card-before em { color: var(--color-danger); }
.ab-h4-card-after {
  background: var(--h4-paper); color: var(--h4-ink); font-weight: 700;
  box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--h4-ok) 55%, transparent), 0 18px 36px -26px var(--h4-ok);
  transform: rotateX(180deg);
}
.ab-h4-card-after em { color: var(--h4-ok); }
.ab-h4-card-after em::before { content: "✓ "; }
.ab-h4-flipboard.is-after .ab-h4-card-before { transform: rotateX(-180deg); }
.ab-h4-flipboard.is-after .ab-h4-card-after { transform: rotateX(0); }
/* Without the script both sides are simply listed. */
.ab-h4:not(.is-js) .ab-h4-card { gap: .5rem; }
.ab-h4:not(.is-js) .ab-h4-card-face { grid-area: auto; transform: none; }
.ab-h4:not(.is-js) .ab-h4-switch { display: none; }

/* ── pricing modes ────────────────────────────────────────────────────────── */

.ab-h4-modes { display: grid; grid-template-columns: minmax(0, 1.25fr) repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: stretch; }
.ab-h4-mode {
  position: relative; display: flex; flex-direction: column;
  padding: 1.5rem; border-radius: 22px; background: var(--h4-paper);
  box-shadow: 0 1px 0 var(--h4-line);
}
.ab-h4-mode h3 { margin: 0 0 .2rem; font-weight: 900; font-size: 1.15rem; }
.ab-h4-mode-sub { margin: 0 0 1rem; font-size: .84rem; color: var(--h4-muted); }
.ab-h4-mode .ab-h4-textlink { margin-top: auto; }
.ab-h4-mode--flat { background: linear-gradient(160deg, var(--h4-royal-ink), var(--h4-royal)); color: #fff; box-shadow: 0 30px 60px -40px var(--h4-royal-ink); }
.ab-h4-mode--flat h3 { color: #fff; }
.ab-h4-mode--flat .ab-h4-mode-sub, .ab-h4-mode--flat .ab-h4-mode-per { color: rgba(255, 255, 255, .78); }
.ab-h4-mode--flat .ab-h4-textlink { color: #fff; text-decoration-color: rgba(255, 255, 255, .45); }
.ab-h4-mode-price { margin: 0; font-size: .9rem; }
.ab-h4-mode-price b { display: block; font-weight: 900; font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.2rem); line-height: 1.35; font-variant-numeric: tabular-nums; color: var(--c-gold-300, #f6d488); }
.ab-h4-mode-price span { opacity: .8; }
.ab-h4-mode-per { margin: .2rem 0 0; font-size: .82rem; }
.ab-h4-mode-even { margin: 1rem 0 1rem; padding: .6rem .8rem; border-radius: 12px; background: rgba(255, 255, 255, .12); font-size: .84rem; line-height: 1.8; }
.ab-h4-mode-flag {
  position: absolute; top: -.8rem; inset-inline-end: 1.2rem; margin: 0;
  padding: .3rem .8rem; border-radius: 999px; font-size: .78rem; font-weight: 900;
  background: var(--h4-gold); color: var(--h4-ink); box-shadow: 0 8px 18px -10px var(--h4-gold-ink);
}

/* ── bundles: tickets with a rubber stamp ─────────────────────────────────── */

.ab-h4-bundles { margin-top: 2.6rem; }
.ab-h4-bundles-head h3 { margin: 0 0 .3rem; font-weight: 900; font-size: 1.2rem; }
.ab-h4-bundles-head p { margin: 0 0 1.2rem; color: var(--h4-muted); font-size: .92rem; }
.ab-h4-bundle-rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(16.5rem, 1fr); gap: 1rem;
  overflow-x: auto; padding: 1.4rem .2rem 1rem; scroll-snap-type: x mandatory; scrollbar-width: thin;
}
.ab-h4-bundle {
  position: relative; scroll-snap-align: start; display: flex; flex-direction: column; gap: .45rem;
  padding: 1.3rem 1.2rem 1.1rem; border-radius: 18px; text-decoration: none; color: var(--h4-ink);
  background: var(--h4-paper); box-shadow: 0 0 0 1px var(--h4-line);
  transition: transform .25s ease, box-shadow .25s ease;
}
/* the tear line of a ticket */
.ab-h4-bundle::before {
  content: ""; position: absolute; inset-inline: 1rem; bottom: 3.3rem; border-top: 1.5px dashed var(--h4-line);
}
.ab-h4-bundle:hover { transform: translateY(-4px) rotate(-.4deg); box-shadow: 0 0 0 1.5px var(--h4-royal), 0 24px 46px -30px var(--h4-royal-ink); }
.ab-h4-bundle.is-featured { box-shadow: 0 0 0 2px var(--h4-royal), 0 26px 50px -32px var(--h4-royal-ink); background: linear-gradient(180deg, var(--h4-royal-soft), var(--h4-paper) 45%); }
.ab-h4-bundle-crown { align-self: flex-start; font-size: .72rem; font-weight: 900; color: #fff; background: var(--h4-royal); padding: .2rem .6rem; border-radius: 999px; }
.ab-h4-bundle-name { font-weight: 900; font-size: 1.05rem; padding-inline-end: 4.2rem; }
.ab-h4-bundle-tag { font-size: .8rem; line-height: 1.8; color: var(--h4-muted); min-height: 3.6em; }
.ab-h4-fan { display: flex; align-items: center; padding-inline-start: .4rem; margin: .2rem 0 .3rem; }
.ab-h4-fan img { width: 34px; height: 34px; border-radius: 10px; margin-inline-start: -.45rem; background: var(--h4-paper); box-shadow: 0 0 0 2.5px var(--h4-paper), 0 4px 10px -6px rgba(15, 33, 94, .5); transition: transform .25s ease; }
.ab-h4-bundle:hover .ab-h4-fan img { transform: translateY(-3px); }
.ab-h4-bundle:hover .ab-h4-fan img:nth-child(2n) { transform: translateY(-6px) rotate(-6deg); }
.ab-h4-fan em { font-style: normal; font-size: .76rem; font-weight: 700; color: var(--h4-muted); margin-inline-start: .5rem; }
.ab-h4-bundle-price { font-size: .78rem; color: var(--h4-muted); }
.ab-h4-bundle-price b { font-weight: 900; font-size: 1.05rem; color: var(--h4-royal-ink); font-variant-numeric: tabular-nums; }
.ab-h4-bundle-go { margin-top: .6rem; font-weight: 700; font-size: .86rem; color: var(--h4-royal-ink); }
/* A rubber stamp, slightly crooked, as if pressed by hand. */
.ab-h4-stamp {
  position: absolute; top: -.9rem; inset-inline-end: .9rem; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 4.4rem; height: 4.4rem; border-radius: 50%; transform: rotate(-14deg);
  color: var(--color-danger); font-size: .66rem; font-weight: 900; line-height: 1.1;
  border: 2.5px solid currentColor; box-shadow: inset 0 0 0 3px var(--h4-paper), inset 0 0 0 4.5px currentColor;
  background: color-mix(in srgb, var(--h4-paper) 88%, transparent);
}
.ab-h4-stamp b { font-size: 1.15rem; }
.ab-h4-bundle.is-featured .ab-h4-stamp { background: var(--color-danger); color: #fff; box-shadow: inset 0 0 0 3px var(--color-danger), inset 0 0 0 4.5px #fff; }

.ab-h4-steps { margin-top: 2.8rem; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 2fr) auto; gap: 1rem 2rem; align-items: center; padding: 1.6rem; border-radius: 22px; background: var(--h4-paper); box-shadow: 0 1px 0 var(--h4-line); }
.ab-h4-steps h3 { margin: 0; font-weight: 900; font-size: 1.25rem; }
.ab-h4-steps ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.ab-h4-steps li { display: grid; grid-template-columns: 2.4rem 1fr; gap: .7rem; align-items: start; }
.ab-h4-steps h4 { margin: .3rem 0 .2rem; font-size: .95rem; font-weight: 900; }
.ab-h4-steps p { margin: 0; font-size: .82rem; line-height: 1.8; color: var(--h4-muted); }

/* ── migration ────────────────────────────────────────────────────────────── */

.ab-h4-migrate { background: var(--h4-paper); }
.ab-h4-migrate-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(1.5rem, 1rem + 3vw, 4rem); align-items: center; }
.ab-h4-migrate-copy p { line-height: 2; color: var(--h4-muted); margin: 0 0 1.4rem; }
.ab-h4-migrate-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.ab-h4-migrate-list details { border-radius: 14px; background: var(--h4-mist); transition: background .2s ease, box-shadow .2s ease; }
.ab-h4-migrate-list details[open] { background: var(--h4-paper); box-shadow: 0 0 0 1.5px var(--h4-royal), 0 18px 36px -26px var(--h4-royal-ink); }
.ab-h4-migrate-list summary {
  position: relative; display: grid; gap: .15rem; cursor: pointer; list-style: none;
  padding: .9rem 1rem; padding-inline-end: 3.6rem; border-radius: 14px;
}
.ab-h4-migrate-list summary::-webkit-details-marker { display: none; }
.ab-h4-migrate-list summary:focus-visible { outline: 2px solid var(--h4-royal); outline-offset: 2px; }
.ab-h4-migrate-list b { font-size: .95rem; }
.ab-h4-migrate-list summary span { font-size: .84rem; color: var(--h4-muted); line-height: 1.8; }
/* The plus opens the row; open, it turns into a close mark. */
.ab-h4-plus {
  position: absolute; inset-inline-end: 1rem; top: 50%; width: 1.7rem; height: 1.7rem; margin-top: -.85rem;
  border-radius: 9px; background: var(--h4-royal); transition: transform .25s ease, background .25s ease;
}
.ab-h4-plus::before, .ab-h4-plus::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: .75rem; height: 2px; border-radius: 2px; background: #fff;
}
.ab-h4-plus::after { transform: rotate(90deg); }
.ab-h4-migrate-list details[open] .ab-h4-plus { transform: rotate(45deg); background: var(--h4-royal-ink); }
.ab-h4-migrate-list details > p { margin: 0 1rem .7rem; line-height: 2; font-size: .9rem; color: var(--h4-ink); }
.ab-h4-migrate-list details > a { display: inline-block; margin: 0 1rem 1rem; font-size: .88rem; }

/* ── voices ───────────────────────────────────────────────────────────────── */

.ab-h4-voices { background: var(--h4-mist); }
.ab-h4-voices-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: 1rem; }
.ab-h4-voice { margin: 0; padding: 1.4rem; border-radius: 20px; background: var(--h4-paper); box-shadow: 0 1px 0 var(--h4-line); display: flex; flex-direction: column; gap: 1rem; }
.ab-h4-voice blockquote { margin: 0; line-height: 2.05; font-size: .98rem; }
.ab-h4-voice blockquote::before { content: "«"; }
.ab-h4-voice blockquote::after { content: "»"; }
.ab-h4-voice figcaption { margin-top: auto; padding-top: .8rem; border-top: 1.5px dashed var(--h4-line); }
.ab-h4-voice figcaption b { display: block; font-weight: 900; }
.ab-h4-voice figcaption span { font-size: .82rem; color: var(--h4-muted); }

@media (max-width: 61.9375rem) {
  .ab-h4-flipboard { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ab-h4-modes, .ab-h4-migrate-grid { grid-template-columns: minmax(0, 1fr); }
  .ab-h4-steps { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 47.9375rem) {
  .ab-h4-flipboard, .ab-h4-steps ol { grid-template-columns: minmax(0, 1fr); }
  .ab-h4-card { min-height: 7.5rem; }
  .ab-h4-chat-log { height: 19rem; }
}
@media (prefers-reduced-motion: reduce) {
  .ab-h4-card-face, .ab-h4-switch-knob, .ab-h4-switch-knob::after, .ab-h4-bundle, .ab-h4-fan img { transition: none; }
  .ab-h4-bubble, .ab-h4-bubble--typing i, .ab-h4-chat-caret, .ab-h4-bubble--tool::before { animation: none; }
}


/* ── the working day: a recorded session, replayed ────────────────────────
   Frames are real screenshots of a demo tenant; the pointer, its ripple and
   the step bars are drawn here so the frames stay sharp and small. Pointer
   positions are percentages of the frame, in the frame's own (left-to-right)
   geometry, which is why left/top are physical and not logical. */
.ab-h4-reel { margin: 0; display: flex; flex-direction: column; }
.ab-h4-reel-stage { position: relative; aspect-ratio: 1080 / 675; overflow: hidden; background: var(--h4-paper); }
.ab-h4-reel-stage img { display: block; width: 100%; height: auto; }
/* The camera: pushes in toward the click while the pointer travels, pulls
   back as the result fades in. Stronger on phones, where the frame is small. */
.ab-h4-reel-cam { position: absolute; inset: 0; transform-origin: 50% 50%; transition: transform .95s cubic-bezier(.33, .1, .2, 1); }
.ab-h4-reel.is-zoom .ab-h4-reel-cam { transform: scale(1.2); }
@media (max-width: 47.9375rem) { .ab-h4-reel.is-zoom .ab-h4-reel-cam { transform: scale(1.55); } }
.ab-h4.is-js .ab-h4-reel-shot { position: absolute; inset: 0; height: 100%; opacity: 0; transition: opacity .42s ease; }
.ab-h4.is-js .ab-h4-reel-shot.is-on { opacity: 1; }
.ab-h4-reel-pointer {
  position: absolute; z-index: 3; left: 72%; top: 88%; width: clamp(13px, 2.4%, 22px);
  opacity: 0; pointer-events: none;
  transition: left .8s cubic-bezier(.33, .1, .2, 1), top .8s cubic-bezier(.33, .1, .2, 1), opacity .3s ease;
  filter: drop-shadow(0 3px 3px rgba(15, 23, 42, .32));
}
.ab-h4-reel-pointer.is-on { opacity: 1; }
.ab-h4-reel-pointer svg { display: block; width: 100%; height: auto; overflow: visible; transform-origin: 7% 5%; transition: transform .12s ease; }
.ab-h4-reel-pointer path { fill: #fff; stroke: var(--h4-ink); stroke-width: 1.7; stroke-linejoin: round; }
.ab-h4-reel-pointer.is-press svg { transform: scale(.86); }
.ab-h4-reel-ripple {
  position: absolute; left: 7%; top: 5%; width: 300%; aspect-ratio: 1; translate: -50% -50%;
  border-radius: 50%; border: 2px solid var(--h4-royal);
  background: color-mix(in srgb, var(--h4-royal) 20%, transparent); opacity: 0;
}
.ab-h4-reel-pointer.is-press .ab-h4-reel-ripple { animation: ab-h4-reel-ripple .62s ease-out; }
@keyframes ab-h4-reel-ripple { from { opacity: .95; scale: .15; } to { opacity: 0; scale: 1.25; } }

.ab-h4-reel-bars { position: absolute; z-index: 2; top: 8px; inset-inline: 10px; display: flex; gap: 4px; }
.ab-h4-reel-bars b {
  position: relative; flex: 1; height: 4px; border-radius: 2px; overflow: hidden; cursor: pointer;
  background: color-mix(in srgb, var(--h4-ink) 16%, transparent);
}
.ab-h4-reel-bars b::after {
  content: ""; position: absolute; inset: 0; background: var(--h4-royal);
  transform: scaleX(0); transform-origin: right;
}
.ab-h4-reel-bars b.is-done::after { transform: none; }
.ab-h4-reel-bars b.is-now::after { animation: ab-h4-reel-fill var(--d, 3s) linear forwards; }
.ab-h4-reel.is-paused .ab-h4-reel-bars b.is-now::after { animation-play-state: paused; }
@keyframes ab-h4-reel-fill { from { transform: scaleX(0); } to { transform: none; } }

.ab-h4-reel-cap {
  display: flex; align-items: center; gap: .8rem; min-height: 3.3rem; padding: .65rem 1rem;
  background: var(--h4-paper); border-top: 1px solid var(--h4-line);
}
.ab-h4-reel-note { flex: 1; min-width: 0; font-weight: 700; font-size: .95rem; line-height: 1.75; }
.ab-h4-reel-note.is-new { animation: ab-h4-reel-note .45s ease both; }
@keyframes ab-h4-reel-note { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.ab-h4-reel-toggle {
  flex: none; padding: .3rem .95rem; border: 1px solid var(--h4-line); border-radius: 999px;
  background: var(--h4-mist); color: var(--h4-royal-ink); font: inherit; font-size: .84rem; font-weight: 700; cursor: pointer;
}
.ab-h4-reel-toggle:hover { background: var(--h4-royal-soft); }
.ab-h4-reel-toggle:focus-visible { outline: 2px solid var(--h4-royal); outline-offset: 2px; }
.ab-h4-reel-play, .ab-h4-reel.is-paused .ab-h4-reel-pause { display: none; }
.ab-h4-reel.is-paused .ab-h4-reel-play { display: inline; }
/* Without the script the steps read as a list under the first frame; with it
   they stay in the page for screen readers and search, and the caption line
   shows the step on screen. */
.ab-h4-reel-script { margin: 0; padding: .2rem 2.4rem 1rem 1rem; background: var(--h4-paper); font-size: .88rem; line-height: 1.95; color: var(--h4-muted); }
.ab-h4.is-js .ab-h4-reel-script {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.ab-h4:not(.is-js) .ab-h4-reel-cap { display: none; }
@media (prefers-reduced-motion: reduce) {
  .ab-h4.is-js .ab-h4-reel-shot, .ab-h4-reel-pointer, .ab-h4-reel-cam { transition: none; }
  .ab-h4-reel.is-zoom .ab-h4-reel-cam { transform: none; }
  .ab-h4-reel-note.is-new, .ab-h4-reel-pointer.is-press .ab-h4-reel-ripple { animation: none; }
}