/* About us - the A2Z Tools story.
   Scoped to .ab so nothing leaks into the site chrome. Uses the brand
   tokens from home-atoz.css (--az-*) with fallbacks, so the page keeps its
   colours even if that file changes. */

.ab {
    --ab-a1: var(--az-a-1, #5b8def);
    --ab-a2: var(--az-a-2, #7b5bf0);
    --ab-mid: var(--az-mid, #c05ad9);
    --ab-z1: var(--az-z-1, #f0655f);
    --ab-z2: var(--az-z-2, #f89a4d);
    --ab-ink: var(--az-ink, #10162b);
    --ab-ink-2: var(--az-ink-2, #454d63);
    --ab-ink-3: var(--az-ink-3, #5f677d);
    --ab-bg: var(--az-bg, #fbf9f7);
    --ab-surface: var(--az-surface, #ffffff);
    --ab-line: var(--az-line, #e8e6e3);
    --ab-tint: #f4f2fb;
    --ab-grad: linear-gradient(100deg, var(--ab-a1) 0%, var(--ab-a2) 30%, var(--ab-mid) 58%, var(--ab-z1) 82%, var(--ab-z2) 100%);
    --ab-shadow: 0 1px 2px rgba(16, 22, 43, .05), 0 12px 32px -12px rgba(16, 22, 43, .14);
    --ab-radius: 20px;

    color: var(--ab-ink-2);
    background: var(--ab-bg);
    /* The homepage stack, named explicitly: an older global h1-h3 rule in
       site.css otherwise swaps the headings to a heavy fallback face. */
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    font-size: 17px;
    line-height: 1.7;
    overflow-x: clip;
}

.ab * { box-sizing: border-box; }

.ab-wrap {
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 20px;
}

.ab h1, .ab h2, .ab h3 {
    font-family: inherit;
    color: var(--ab-ink);
    letter-spacing: -.03em;
    line-height: 1.12;
}

.ab h2 {
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 800;
    margin: 0 0 18px;
}

.ab h3 { font-size: 21px; font-weight: 700; margin: 0 0 8px; }
.ab p { margin: 0 0 16px; }
.ab strong { color: var(--ab-ink); }

.ab-grad {
    background: var(--ab-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ---------- hero ---------- */
.ab-hero {
    position: relative;
    padding: clamp(64px, 10vw, 120px) 0 clamp(56px, 8vw, 96px);
    text-align: center;
    isolation: isolate;
}

.ab-hero-glow {
    position: absolute;
    inset: -20% -10% auto;
    height: 120%;
    z-index: -1;
    background:
        radial-gradient(40% 50% at 18% 30%, rgba(91, 141, 239, .22), transparent 70%),
        radial-gradient(35% 45% at 50% 15%, rgba(192, 90, 217, .16), transparent 70%),
        radial-gradient(40% 50% at 84% 35%, rgba(240, 101, 95, .20), transparent 70%);
    filter: blur(8px);
}

.ab-kicker, .ab-chapter-no {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    margin: 0 0 14px;
    background: var(--ab-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.ab-title {
    font-size: clamp(38px, 7vw, 72px);
    font-weight: 800;
    margin: 0 auto 22px;
    max-width: 24ch;
}

.ab-lead {
    max-width: 680px;
    margin: 0 auto 40px;
    font-size: clamp(17px, 2vw, 20px);
    color: var(--ab-ink-2);
}

.ab-hero-stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
}

.ab-stat {
    min-width: 150px;
    padding: 18px 22px;
    background: rgba(255, 255, 255, .75);
    border: 1px solid var(--ab-line);
    border-radius: 16px;
    box-shadow: var(--ab-shadow);
    backdrop-filter: blur(6px);
}

.ab-stat b {
    display: block;
    font-size: 30px;
    font-weight: 800;
    line-height: 1.1;
    background: var(--ab-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.ab-stat span { font-size: 14px; color: var(--ab-ink-3); }

/* ---------- chapters ---------- */
.ab-chapter { padding: clamp(56px, 8vw, 100px) 0; }
.ab-chapter--tint { background: var(--ab-tint); }

.ab-intro {
    max-width: 720px;
    font-size: 18px;
    margin-bottom: 36px;
}

.ab-split {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: clamp(32px, 5vw, 64px);
    align-items: center;
}

.ab-quote {
    position: relative;
    margin: 28px 0;
    padding: 24px 26px 22px 30px;
    background: var(--ab-surface);
    border-radius: 16px;
    box-shadow: var(--ab-shadow);
}

.ab-quote::before {
    content: "";
    position: absolute;
    left: 0; top: 16px; bottom: 16px;
    width: 5px;
    border-radius: 0 4px 4px 0;
    background: var(--ab-grad);
}

.ab-quote p { font-size: 19px; font-style: italic; color: var(--ab-ink); margin-bottom: 10px; }
.ab-quote cite { font-style: normal; font-weight: 700; font-size: 14px; color: var(--ab-ink-3); }

/* browser frame around the archived screenshot */
.ab-split-media { margin: 0; }

.ab-browser {
    border-radius: 14px;
    overflow: hidden;
    background: var(--ab-surface);
    box-shadow: 0 30px 60px -24px rgba(16, 22, 43, .35), 0 0 0 1px var(--ab-line);
    transform: perspective(1200px) rotateY(-6deg) rotateX(2deg);
    transition: transform .5s ease;
}

.ab-browser:hover { transform: none; }

.ab-browser-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    background: #f1eff3;
    border-bottom: 1px solid var(--ab-line);
    font-size: 12px;
    color: var(--ab-ink-3);
}

.ab-browser-bar i { width: 10px; height: 10px; border-radius: 50%; background: #e0dde4; }
.ab-browser-bar i:nth-child(1) { background: #f0655f; }
.ab-browser-bar i:nth-child(2) { background: #f8c04d; }
.ab-browser-bar i:nth-child(3) { background: #3cc47c; }
.ab-browser-bar span { margin-left: 8px; }

.ab img { display: block; max-width: 100%; height: auto; }

.ab-split-media figcaption,
.ab-shot figcaption,
.ab-note {
    font-size: 14px;
    color: var(--ab-ink-3);
    margin-top: 12px;
}

/* ---------- first tools ---------- */
.ab-chips {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.ab-chips li {
    padding: 8px 16px;
    background: var(--ab-surface);
    border: 1px solid var(--ab-line);
    border-radius: 999px;
    font-size: 15px;
    font-weight: 600;
    color: var(--ab-ink);
    box-shadow: 0 1px 2px rgba(16, 22, 43, .05);
    transition: transform .2s ease, border-color .2s ease;
}

.ab-chips li:hover { transform: translateY(-2px); border-color: var(--ab-a2); }

.ab-chips li:nth-child(5n+1) { border-left: 4px solid var(--ab-a1); }
.ab-chips li:nth-child(5n+2) { border-left: 4px solid var(--ab-a2); }
.ab-chips li:nth-child(5n+3) { border-left: 4px solid var(--ab-mid); }
.ab-chips li:nth-child(5n+4) { border-left: 4px solid var(--ab-z1); }
.ab-chips li:nth-child(5n+5) { border-left: 4px solid var(--ab-z2); }

/* ---------- timeline ---------- */
.ab-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}

.ab-timeline::before {
    content: "";
    position: absolute;
    left: 43px; top: 10px; bottom: 10px;
    width: 4px;
    border-radius: 4px;
    background: var(--ab-grad);
    background: linear-gradient(180deg, var(--ab-a1), var(--ab-a2) 35%, var(--ab-mid) 60%, var(--ab-z1) 85%, var(--ab-z2));
}

.ab-year {
    position: relative;
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 24px;
    margin-bottom: 28px;
}

.ab-year-badge {
    position: relative;
    z-index: 1;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--ab-surface);
    box-shadow: var(--ab-shadow), 0 0 0 6px var(--ab-bg);
    font-weight: 800;
    font-size: 21px;
    color: var(--ab-ink);
    text-align: center;
    line-height: 1.05;
}

.ab-year-badge small { font-size: 14px; font-weight: 700; color: var(--ab-ink-3); }

.ab-year--now .ab-year-badge {
    background: var(--ab-grad);
    color: #fff;
}

.ab-year-card {
    padding: 24px 26px;
    background: var(--ab-surface);
    border: 1px solid var(--ab-line);
    border-radius: var(--ab-radius);
    box-shadow: var(--ab-shadow);
}

.ab-year-card p:last-child { margin-bottom: 0; }

.ab-year--now .ab-year-card {
    border: 2px solid transparent;
    background: linear-gradient(var(--ab-surface), var(--ab-surface)) padding-box, var(--ab-grad) border-box;
}

.ab-shot { margin: 18px 0 0; width: 100%; }
.ab-shot img { width: 100%; }
.ab-shot figcaption { text-align: center; }

.ab-shot img {
    border-radius: 12px;
    border: 1px solid var(--ab-line);
    box-shadow: 0 16px 32px -18px rgba(16, 22, 43, .35);
}

/* ---------- logos ---------- */
.ab-logos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.ab-logo-card {
    position: relative;
    margin: 0;
    padding: 28px 24px 24px;
    background: var(--ab-surface);
    border: 1px solid var(--ab-line);
    border-radius: var(--ab-radius);
    box-shadow: var(--ab-shadow);
    transition: transform .25s ease;
}

.ab-logo-card:hover { transform: translateY(-4px); }

.ab-logo-card--now {
    border: 2px solid transparent;
    background: linear-gradient(var(--ab-surface), var(--ab-surface)) padding-box, var(--ab-grad) border-box;
}

.ab-logo-year {
    position: absolute;
    top: -13px; left: 22px;
    padding: 2px 12px;
    border-radius: 999px;
    background: var(--ab-ink);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}

.ab-logo-card--now .ab-logo-year { background: var(--ab-grad); }

.ab-logo-frame {
    height: 120px;
    display: grid;
    place-items: center;
    margin-bottom: 18px;
    border-radius: 14px;
    background: #f6f5f8;
}

.ab-logo-frame img { max-height: 70px; width: auto; }

.ab-logo-card figcaption { font-size: 15px; line-height: 1.6; }
.ab-logo-card figcaption b { color: var(--ab-ink); }

/* ---------- team ---------- */
.ab-team {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.ab-person {
    padding: 28px 26px;
    background: var(--ab-surface);
    border: 1px solid var(--ab-line);
    border-radius: var(--ab-radius);
    box-shadow: var(--ab-shadow);
}

.ab-person p:last-of-type { margin-bottom: 12px; }

.ab-avatar {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 18px;
    margin-bottom: 18px;
    color: #fff;
    font-weight: 800;
    font-size: 22px;
    letter-spacing: .02em;
}

.ab-avatar--a { background: linear-gradient(135deg, var(--ab-a1), var(--ab-a2)); }
.ab-avatar--b { background: linear-gradient(135deg, var(--ab-a2), var(--ab-mid)); }
.ab-avatar--c { background: linear-gradient(135deg, var(--ab-z1), var(--ab-z2)); }

.ab-role {
    font-size: 14px;
    font-weight: 700;
    color: var(--ab-ink-3);
    text-transform: uppercase;
    letter-spacing: .06em;
}

.ab-link { font-weight: 700; color: var(--ab-a2); text-decoration: none; }
.ab-link:hover { text-decoration: underline; }

/* ---------- values ---------- */
.ab-values {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-top: 30px;
}

.ab-value {
    padding: 24px 22px;
    background: var(--ab-surface);
    border-radius: var(--ab-radius);
    border: 1px solid var(--ab-line);
}

.ab-value h3 { font-size: 18px; }
.ab-value p { font-size: 15px; margin: 0; }

.ab-value-ic {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-bottom: 14px;
    border-radius: 12px;
    background: var(--ab-tint);
    font-size: 20px;
}

/* ---------- CTA ---------- */
.ab-cta {
    padding: clamp(64px, 9vw, 110px) 0;
    text-align: center;
    background:
        radial-gradient(50% 80% at 20% 20%, rgba(91, 141, 239, .35), transparent 70%),
        radial-gradient(50% 80% at 80% 80%, rgba(240, 101, 95, .35), transparent 70%),
        var(--ab-ink);
}

.ab-cta h2 { color: #fff; }
.ab-cta p { color: rgba(255, 255, 255, .8); max-width: 560px; margin: 0 auto 30px; }

.ab-cta-row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

.ab-btn {
    display: inline-block;
    padding: 14px 26px;
    border-radius: 999px;
    font-weight: 700;
    text-decoration: none;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .4);
    transition: transform .2s ease, background .2s ease;
}

/* WebsiteTemplate/assets/css/style.css sets
   a { color: #1c1c1c !important } on every link, which turned the button
   text near-black on navy. Only a matching !important beats an important
   element rule (home-atoz.css does the same); it stays confined to this
   page's own classes. */
.ab a.ab-btn, .ab a.ab-btn:visited, .ab a.ab-btn:hover, .ab a.ab-btn:focus { color: #fff !important; }
.ab a.ab-link, .ab a.ab-link:visited { color: var(--ab-a2) !important; }
.ab a.ab-btn:hover { transform: translateY(-2px); background: rgba(255, 255, 255, .1); }
.ab a.ab-btn--primary { background: var(--ab-grad); border-color: transparent; }
.ab a.ab-btn--primary:hover { background: var(--ab-grad); filter: brightness(1.06); }
.ab a.ab-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* ---------- FAQ ---------- */
.ab-faq-wrap { max-width: 820px; }

.ab-faq {
    margin-bottom: 12px;
    background: var(--ab-surface);
    border: 1px solid var(--ab-line);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(16, 22, 43, .05);
}

.ab-faq summary {
    cursor: pointer;
    list-style: none;
    padding: 18px 52px 18px 22px;
    position: relative;
    font-weight: 700;
    color: var(--ab-ink);
}

.ab-faq summary::-webkit-details-marker { display: none; }

.ab-faq summary::after {
    content: "+";
    position: absolute;
    right: 20px; top: 50%;
    transform: translateY(-50%);
    font-size: 22px;
    font-weight: 400;
    color: var(--ab-a2);
}

.ab-faq[open] summary::after { content: "\2212"; }
.ab-faq-a { padding: 0 22px 18px; }
.ab-faq-a p:last-child { margin-bottom: 0; }

/* reveal states live in the MOTION section at the end of this file */

/* ---------- dark theme (the site's own toggle) ---------- */
.theme-dark .ab {
    --ab-ink: #f3f4f8;
    --ab-ink-2: #c4c8d4;
    --ab-ink-3: #9aa0b2;
    --ab-bg: #0f1324;
    --ab-surface: #171c31;
    --ab-line: #2a3050;
    --ab-tint: #131830;
}

.theme-dark .ab-stat { background: rgba(23, 28, 49, .8); }
.theme-dark .ab-browser-bar { background: #1d2340; }
.theme-dark .ab-logo-frame { background: #f6f5f8; }
.theme-dark .ab-cta { background: radial-gradient(50% 80% at 20% 20%, rgba(91, 141, 239, .35), transparent 70%), radial-gradient(50% 80% at 80% 80%, rgba(240, 101, 95, .35), transparent 70%), #0a0d1a; }

/* ---------- responsive ---------- */
@media (max-width: 980px) {
    .ab-values { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
    .ab-split { grid-template-columns: 1fr; }
    .ab-browser { transform: none; }
    .ab-logos, .ab-team { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
    .ab { font-size: 16px; }
    .ab-wrap { padding: 0 16px; }
    .ab-stat { min-width: calc(50% - 7px); }
    .ab-timeline::before { left: 27px; }
    .ab-year { grid-template-columns: 58px 1fr; gap: 14px; }
    .ab-year-badge { width: 58px; height: 58px; font-size: 15px; }
    .ab-year-badge small { font-size: 11px; }
    .ab-year-card { padding: 20px 18px; }
    .ab-values { grid-template-columns: 1fr; }
}

/* real team photo (wwwroot/Image/about/team-<slug>.webp), same footprint as the initials tile */
.ab-avatar--photo {
    object-fit: cover;
    padding: 0;
    background: var(--ab-tint);
    box-shadow: 0 0 0 3px var(--ab-surface), 0 0 0 5px var(--ab-a2);
}

/* =====================================================================
   NEW SECTIONS: interludes, "A2Z today", then-and-now slider, meters
   ===================================================================== */

/* one big line between chapters, read like a page turn */
.ab-interlude {
    max-width: 960px;
    margin: 0 auto;
    padding: clamp(48px, 7vw, 88px) 20px;
    text-align: center;
    font-size: clamp(26px, 4.4vw, 48px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.03em;
    color: var(--ab-ink);
}
.ab-interlude span { display: inline-block; }

.ab-chip-count { font-size: 15px; color: var(--ab-ink-3); margin: -14px 0 18px; }
.ab-chip-count b { font-size: 34px; font-weight: 800; color: var(--ab-ink); margin-right: 6px; vertical-align: -3px; }

/* growth meter inside each year card */
.ab-meter { display: flex; align-items: center; gap: 12px; margin: 14px 0 4px; font-size: 13px; }
.ab-meter i { flex: 1; display: block; height: 8px; border-radius: 8px; overflow: hidden; background: var(--ab-tint); }
.ab-meter span { display: block; height: 100%; width: var(--w); border-radius: 8px; background: var(--ab-grad); transform-origin: left; }
.ab-meter b { flex: 0 0 auto; min-width: 118px; color: var(--ab-ink); font-weight: 700; }
.ab-meter--now b { background: var(--ab-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- chapter 4: everything under one A ---------- */
.ab-chapter--today {
    --ab-ink: #f3f4f8;
    --ab-ink-2: #c4c8d4;
    --ab-ink-3: #9aa0b2;
    --ab-surface: rgba(255, 255, 255, .045);
    --ab-line: rgba(255, 255, 255, .11);
    position: relative;
    isolation: isolate;
    overflow: hidden;
    color: var(--ab-ink-2); /* .ab resolved the colour already, so restate it with the dark tokens */
    background: #0d1124;
}
.ab-chapter--today::before {
    content: "";
    position: absolute;
    inset: -30%;
    z-index: -1;
    background:
        radial-gradient(28% 32% at 20% 25%, rgba(91, 141, 239, .35), transparent 70%),
        radial-gradient(26% 30% at 78% 30%, rgba(192, 90, 217, .28), transparent 70%),
        radial-gradient(30% 34% at 60% 85%, rgba(240, 101, 95, .26), transparent 70%);
}

.ab-today { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }

.ab .ab-prod {
    --acc: var(--ab-a1);
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 24px 22px 20px;
    border-radius: var(--ab-radius);
    border: 1px solid var(--ab-line);
    background:
        radial-gradient(240px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--acc) 22%, transparent), transparent 70%),
        var(--ab-surface);
    text-decoration: none;
    transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.ab .ab-prod:hover { border-color: color-mix(in srgb, var(--acc) 60%, transparent); box-shadow: 0 24px 50px -24px color-mix(in srgb, var(--acc) 70%, transparent); }
.ab .ab-prod--tools { grid-column: span 2; }
.ab .ab-prod--embed { --acc: var(--ab-a2); }
.ab .ab-prod--widgets { --acc: #3cc47c; }
.ab .ab-prod--apps { --acc: var(--ab-mid); }
.ab .ab-prod--ext { --acc: #f8c04d; }
.ab .ab-prod--mobile { --acc: var(--ab-z1); }
.ab .ab-prod--fonts { --acc: var(--ab-z2); }

/* the template's a{color !important} again, see the CTA note above */
.ab a.ab-prod, .ab a.ab-prod:visited, .ab a.ab-prod:hover { color: var(--ab-ink-2) !important; }
.ab a.ab-prod:focus-visible { outline: 3px solid var(--acc); outline-offset: 3px; }

.ab-prod-ic {
    display: grid;
    place-items: center;
    width: 46px; height: 46px;
    margin-bottom: 16px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--acc) 20%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--acc) 45%, transparent);
}
.ab-prod-ic svg { width: 24px; height: 24px; fill: none; stroke: var(--acc); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ab-prod-ic--type { font: 800 19px/1 Georgia, "Times New Roman", serif; color: var(--acc); }

.ab-prod-n {
    font-size: 40px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.03em;
    margin-bottom: 8px;
    color: #fff;
    font-variant-numeric: tabular-nums;
}
.ab-prod--tools .ab-prod-n { font-size: 56px; background: var(--ab-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ab .ab-prod h3 { font-size: 19px; margin-bottom: 6px; }
.ab .ab-prod p { font-size: 15px; line-height: 1.6; margin-bottom: 14px; flex: 1; }
.ab-prod-go { font-size: 14px; font-weight: 700; color: var(--acc); transition: letter-spacing .25s ease; }
.ab .ab-prod:hover .ab-prod-go { letter-spacing: .03em; }

/* ---------- then and now ---------- */
.ab-compare {
    position: relative;
    max-width: 980px;
    margin: 0 auto;
    aspect-ratio: 1280 / 806;
    border-radius: 18px;
    overflow: hidden;
    background: var(--ab-surface);
    box-shadow: 0 40px 80px -36px rgba(16, 22, 43, .45), 0 0 0 1px var(--ab-line);
    user-select: none;
}
.ab .ab-compare > img, .ab .ab-compare-before img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: top;
}
.ab-compare-before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ab-compare-handle {
    position: absolute;
    top: 0; bottom: 0;
    left: var(--pos);
    width: 3px;
    margin-left: -1.5px;
    background: #fff;
    box-shadow: 0 0 0 1px rgba(16, 22, 43, .15), 0 0 24px rgba(123, 91, 240, .6);
    pointer-events: none;
}
.ab-compare-handle i {
    position: absolute;
    top: 50%; left: 50%;
    width: 46px; height: 46px;
    margin: -23px 0 0 -23px;
    border-radius: 50%;
    background: var(--ab-grad);
    box-shadow: 0 6px 18px rgba(16, 22, 43, .35), 0 0 0 4px #fff;
}
.ab-compare-handle i::before, .ab-compare-handle i::after {
    content: "";
    position: absolute;
    top: 50%;
    margin-top: -6px;
    border: 6px solid transparent;
}
.ab-compare-handle i::before { left: 5px; border-right-color: #fff; }
.ab-compare-handle i::after { right: 5px; border-left-color: #fff; }
.ab-compare-tag {
    position: absolute;
    top: 14px;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    background: rgba(16, 22, 43, .78);
    pointer-events: none;
}
.ab-compare-tag--then { left: 14px; }
.ab-compare-tag--now { right: 14px; background: var(--ab-grad); }
.ab-compare-range {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: ew-resize;
    -webkit-appearance: none;
    appearance: none;
}
.ab-compare:focus-within { box-shadow: 0 40px 80px -36px rgba(16, 22, 43, .45), 0 0 0 3px var(--ab-a2); }

/* ---------- chapter map + reading progress ---------- */
.ab-progress {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 10000;
    height: 3px;
    pointer-events: none;
}
.ab-progress span {
    display: block;
    height: 100%;
    background: var(--ab-grad);
    transform: scaleX(0);
    transform-origin: left;
}

.ab-map {
    position: fixed;
    right: 18px;
    top: 50%;
    z-index: 50;
    display: none;
    flex-direction: column;
    gap: 14px;
    transform: translateY(-50%);
}
.ab .ab-map a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: 16px;
    padding-right: 24px;
    text-decoration: none;
    color: var(--ab-ink-3) !important;
    font-size: 13px;
    font-weight: 700;
}
.ab-map span {
    opacity: 0;
    transform: translateX(6px);
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--ab-surface);
    box-shadow: var(--ab-shadow);
    white-space: nowrap;
    transition: opacity .2s ease, transform .2s ease;
}
.ab-map i {
    position: absolute;
    right: 3px; top: 50%;
    margin-top: -5px;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: #c9c6d4;
    box-shadow: 0 0 0 3px var(--ab-bg);
    transition: transform .25s ease, background .25s ease;
}
.ab-map a:hover span, .ab-map a:focus-visible span, .ab-map a.is-on span { opacity: 1; transform: none; }
.ab-map a.is-on i { background: var(--ab-grad); transform: scale(1.5); }
.ab .ab-map a.is-on { color: var(--ab-ink) !important; }
@media (min-width: 1360px) { .ab-map { display: flex; align-items: flex-end; } }

/* ---------- hero alphabet + scroll cue ---------- */
.ab-hero { overflow: hidden; }
.ab-alpha {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    transition: transform .6s cubic-bezier(.2, .8, .2, 1);
    /* the letters fade out behind the headline so the text stays clean */
    -webkit-mask-image: radial-gradient(ellipse 42% 48% at 50% 50%, transparent 35%, #000 95%);
    mask-image: radial-gradient(ellipse 42% 48% at 50% 50%, transparent 35%, #000 95%);
}
.ab-alpha span {
    position: absolute;
    font-weight: 800;
    line-height: 1;
    opacity: .16;
}
.theme-dark .ab-alpha span { opacity: .24; }
@media (max-width: 700px) { .ab-alpha .ab-alpha-sm { display: none; } .ab-alpha span { opacity: .1; } }

.ab .ab-scroll {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: 44px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--ab-ink-3) !important;
}
.ab-scroll i {
    position: relative;
    width: 24px; height: 38px;
    border: 2px solid currentColor;
    border-radius: 14px;
}
.ab-scroll i::after {
    content: "";
    position: absolute;
    left: 50%; top: 7px;
    width: 4px; height: 8px;
    margin-left: -2px;
    border-radius: 2px;
    background: var(--ab-a2);
}

/* ---------- logo evolution: arrows between eras, a living border now ---------- */
@property --ab-ang { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.ab-logo-card--now {
    background: linear-gradient(var(--ab-surface), var(--ab-surface)) padding-box,
                conic-gradient(from var(--ab-ang), var(--ab-a1), var(--ab-a2), var(--ab-mid), var(--ab-z1), var(--ab-z2), var(--ab-a1)) border-box;
}
@media (min-width: 901px) {
    .ab-logo-card:not(:last-child)::after {
        content: "\2192";
        position: absolute;
        right: -22px; top: 82px;
        z-index: 2;
        width: 26px; height: 26px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        font-size: 15px;
        font-weight: 800;
        line-height: 1;
        color: #fff;
        background: var(--ab-grad);
        box-shadow: 0 0 0 4px var(--ab-tint);
    }
}

.ab-person { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .25s ease, box-shadow .25s ease; }
.ab-person:hover { box-shadow: 0 30px 60px -30px rgba(16, 22, 43, .35); }
.ab-avatar { transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.ab-person:hover .ab-avatar { transform: rotate(-6deg) scale(1.06); }

/* CTA: colour drifts slowly behind the last line of the story */
.ab-cta { position: relative; overflow: hidden; isolation: isolate; }
.ab-cta::before {
    content: "";
    position: absolute;
    inset: -40%;
    z-index: -1;
    background:
        radial-gradient(22% 30% at 30% 40%, rgba(123, 91, 240, .45), transparent 70%),
        radial-gradient(22% 30% at 70% 60%, rgba(248, 154, 77, .35), transparent 70%);
}

/* ---------- responsive for the new parts ---------- */
@media (max-width: 1100px) {
    .ab-today { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .ab-today { grid-template-columns: 1fr; }
    .ab .ab-prod--tools { grid-column: auto; }
    .ab-prod--tools .ab-prod-n { font-size: 46px; }
    .ab-meter b { min-width: 0; font-size: 12px; }
    .ab-compare { border-radius: 12px; }
    .ab-compare-handle i { width: 38px; height: 38px; margin: -19px 0 0 -19px; }
}

/* =====================================================================
   MOTION. Every looping or entrance animation sits behind
   prefers-reduced-motion: no-preference, and the hidden-then-shown
   states only exist under .ab-anim (added by about-us.js). Without
   either, each element simply sits in its final place.
   ===================================================================== */
@keyframes ab-rise { from { opacity: 0; transform: translateY(28px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes ab-pop { from { opacity: 0; transform: translateY(18px) scale(.94); } }
@keyframes ab-drift { from { transform: translate3d(0, 0, 0) rotate(-6deg); } to { transform: translate3d(14px, -26px, 0) rotate(8deg); } }
@keyframes ab-flow { to { background-position: 200% 50%; } }
@keyframes ab-wheel { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(12px); } }
@keyframes ab-breathe { 50% { transform: scale(1.08); opacity: .8; } }
@keyframes ab-spin { to { --ab-ang: 360deg; } }
@keyframes ab-orbit { to { transform: rotate(360deg); } }
@keyframes ab-pulse { 0% { box-shadow: 0 0 0 0 rgba(123, 91, 240, .55); } 100% { box-shadow: 0 0 0 16px rgba(123, 91, 240, 0); } }

@media (prefers-reduced-motion: no-preference) {
    /* the hero writes itself in, word by word */
    .ab-title .ab-w { display: inline-block; animation: ab-rise .9s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(var(--i) * 90ms); }
    .ab-hero .ab-in { animation: ab-rise .9s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(var(--i) * 90ms); }
    .ab-title .ab-grad--flow { background-size: 200% 100%; animation: ab-rise .9s cubic-bezier(.2, .8, .2, 1) backwards, ab-flow 6s linear 1.5s infinite; animation-delay: calc(var(--i) * 90ms), 1.5s; }
    .ab-hero-glow { animation: ab-breathe 9s ease-in-out infinite; }
    .ab-alpha span { animation: ab-drift 14s ease-in-out infinite alternate; }
    .ab-scroll i::after { animation: ab-wheel 1.8s ease-in-out infinite; }
    .ab-logo-card--now { animation: ab-spin 6s linear infinite; }
    .ab-cta::before { animation: ab-orbit 18s linear infinite; }
}

/* sections rise into place */
.ab-anim .ab-reveal { opacity: 0; transform: translateY(32px); transition: opacity .8s ease, transform .8s cubic-bezier(.2, .8, .2, 1); }
.ab-anim .ab-reveal.is-in { opacity: 1; transform: none; }

/* groups arrive one card at a time (backwards fill, so hover transforms still work afterwards) */
.ab-anim .ab-reveal:not(.is-in) .ab-stagger > * { opacity: 0; }
.ab-anim .ab-reveal.is-in .ab-stagger > * { animation: ab-pop .6s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(var(--i) * 55ms + 150ms); }
.ab-anim .ab-reveal.is-in .ab-chips > * { animation-delay: calc(var(--i) * 45ms + 150ms); }

/* interlude: the second half lands a beat later */
.ab-anim .ab-interlude { transform: none; }
.ab-anim .ab-interlude span { opacity: 0; transform: translateY(20px); transition: opacity .8s ease, transform .8s cubic-bezier(.2, .8, .2, 1); }
.ab-anim .ab-interlude.is-in span { opacity: 1; transform: none; }
.ab-anim .ab-interlude.is-in span + span { transition-delay: .45s; }

/* chapter 1: the old homepage swings in, the quote bar draws down */
.ab-anim .ab-reveal:not(.is-in) .ab-tilt-in .ab-browser { opacity: 0; transform: perspective(1200px) rotateY(-24deg) translateX(60px); }
.ab-anim .ab-tilt-in .ab-browser { transition: opacity 1s ease .2s, transform 1.1s cubic-bezier(.2, .8, .2, 1) .2s; }
.ab-anim .ab-quote--draw::before { transform: scaleY(0); transform-origin: top; transition: transform 1s cubic-bezier(.2, .8, .2, 1) .5s; }
.ab-anim .is-in .ab-quote--draw::before { transform: none; }

/* chapter 3: the timeline line grows with the scroll and the dot rides its tip */
.ab-anim .ab-timeline { background: linear-gradient(var(--ab-line), var(--ab-line)) no-repeat 43px 10px / 4px calc(100% - 20px); }
.ab-anim .ab-timeline::before { transform: scaleY(var(--ab-p, 0)); transform-origin: top; }
.ab-timeline-dot { display: none; }
.ab-anim .ab-timeline-dot {
    display: block;
    position: absolute;
    z-index: 2;
    left: 45px;
    top: calc(10px + var(--ab-p, 0) * (100% - 20px));
    width: 16px; height: 16px;
    margin: -8px 0 0 -8px;
    border-radius: 50%;
    background: var(--ab-grad);
    border: 3px solid var(--ab-surface);
    animation: ab-pulse 1.6s ease-out infinite;
    pointer-events: none;
}
.ab-anim .ab-year .ab-year-badge { transform: scale(.82); filter: grayscale(1); opacity: .55; transition: transform .5s cubic-bezier(.3, 1.6, .5, 1), filter .5s ease, opacity .5s ease; }
.ab-anim .ab-year.is-reached .ab-year-badge { transform: none; filter: none; opacity: 1; }
.ab-anim .ab-year .ab-year-card { opacity: 0; transform: translateX(40px); transition: opacity .7s ease, transform .8s cubic-bezier(.2, .8, .2, 1); }
.ab-anim .ab-year.is-in .ab-year-card { opacity: 1; transform: none; }
.ab-anim .ab-meter span { transform: scaleX(0); transition: transform 1.4s cubic-bezier(.2, .8, .2, 1) .5s; }
.ab-anim .ab-year.is-in .ab-meter span { transform: none; }
.ab-anim .ab-shot img { transition: transform 1.2s cubic-bezier(.2, .8, .2, 1) .3s, opacity 1s ease .3s; }
.ab-anim .ab-year:not(.is-in) .ab-shot img { transform: scale(.94) translateY(16px); opacity: 0; }

@media (max-width: 600px) {
    .ab-anim .ab-timeline { background-position: 27px 10px; }
    .ab-anim .ab-timeline-dot { left: 29px; }
}

@media (prefers-reduced-motion: reduce) {
    .ab-browser, .ab-prod, .ab-person { transform: none !important; transition: none; }
    .ab-chips li, .ab-logo-card, .ab-btn { transition: none; }
}

/* =====================================================================
   CHAPTER 6: twenty-six letters, one road of colour
   --c / --c1 / --c2 are the picked letter's colours (AzColorPalette) and
   --p its place on the road (0 = A, 1 = Z). Registering them lets the
   browser glide between letters instead of jumping.
   ===================================================================== */
@property --c { syntax: "<color>"; inherits: true; initial-value: #5b8def; }
@property --c1 { syntax: "<color>"; inherits: true; initial-value: #5b8def; }
@property --c2 { syntax: "<color>"; inherits: true; initial-value: #7b5bf0; }
@property --p { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --seen { syntax: "<number>"; inherits: true; initial-value: 0; }

.ab-az {
    --c1: var(--c);
    --c2: var(--c);
    position: relative;
    padding: clamp(22px, 4vw, 40px);
    border-radius: 28px;
    background:
        radial-gradient(60% 70% at 18% 30%, color-mix(in srgb, var(--c) 16%, transparent), transparent 70%),
        var(--ab-surface);
    border: 1px solid var(--ab-line);
    box-shadow: var(--ab-shadow);
    transition: --c .6s ease, --c1 .6s ease, --c2 .6s ease, --p .7s cubic-bezier(.3, 1.3, .5, 1), --seen .6s ease;
}

.ab-az-stage {
    display: grid;
    grid-template-columns: minmax(200px, 300px) 1fr;
    gap: clamp(20px, 4vw, 48px);
    align-items: center;
    min-height: 290px;
}

/* the big letter */
.ab-az-glyph {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    border-radius: 32px;
    perspective: 700px;
    background: color-mix(in srgb, var(--c) 9%, var(--ab-surface));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 25%, transparent);
}
.ab-az-glyph::before {
    content: "";
    position: absolute;
    inset: 22%;
    border-radius: 50%;
    background: var(--c);
    filter: blur(50px);
    opacity: .45;
}
.ab-az-glyph span {
    position: relative;
    font-size: clamp(130px, 17vw, 210px);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.05em;
    background: linear-gradient(135deg, var(--c1), var(--c2));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 10px 18px color-mix(in srgb, var(--c) 35%, transparent));
}

.ab-az-count { margin: 0 0 6px; font-size: 18px; color: var(--ab-ink-2); }
.ab-az-count b { font-size: 48px; font-weight: 800; letter-spacing: -.03em; color: var(--c); margin-right: 6px; vertical-align: -6px; font-variant-numeric: tabular-nums; }
.ab-az-note { min-height: 1.6em; margin: 0 0 14px; font-style: italic; color: var(--ab-ink); }

.ab-az-tools {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}
.ab-az-tools li { min-width: 0; }
.ab .ab-az-tools a {
    display: block;
    padding: 9px 14px 9px 30px;
    position: relative;
    border-radius: 12px;
    border: 1px solid var(--ab-line);
    background: var(--ab-surface);
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: none;
    color: var(--ab-ink) !important;
    transition: border-color .2s ease, transform .2s ease;
}
.ab-az-tools a::before {
    content: "";
    position: absolute;
    left: 13px; top: 50%;
    width: 8px; height: 8px;
    margin-top: -4px;
    border-radius: 50%;
    background: var(--c);
}
.ab .ab-az-tools a:hover { border-color: var(--c); transform: translateX(3px); }
.ab a.ab-az-all, .ab a.ab-az-all:visited { font-weight: 700; color: var(--c) !important; text-decoration: none; }
.ab a.ab-az-all:hover { text-decoration: underline; }

/* the road: the logo gradient, with a marker that glides to the letter */
.ab-az-road {
    position: relative;
    height: 10px;
    margin: 34px calc(50% / 26) 14px;
    border-radius: 10px;
    background: linear-gradient(90deg, #5b8def, #7b5bf0 25%, #c05ad9 50%, #f0655f 75%, #f89a4d);
}
.ab-az-marker {
    position: absolute;
    top: 50%;
    left: calc(var(--p) * 100%);
    transform: translate(-50%, -50%);
}
.ab-az-marker i {
    display: block;
    width: 24px; height: 24px;
    border-radius: 50%;
    background: var(--c);
    border: 4px solid #fff;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--c) 60%, transparent);
}
.ab-az-marker em {
    position: absolute;
    bottom: 30px; left: 50%;
    transform: translateX(-50%);
    padding: 2px 8px;
    border-radius: 6px;
    font: 700 11px/1.4 ui-monospace, SFMono-Regular, Consolas, monospace;
    font-style: normal;
    color: #fff;
    background: var(--c);
    white-space: nowrap;
}

/* the keys */
.ab-az-keys {
    display: grid;
    grid-template-columns: repeat(26, minmax(0, 1fr));
    gap: 6px;
}
.ab .ab-az-key {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    min-height: 34px;
    border-radius: 10px;
    border: 1px solid var(--ab-line);
    background: var(--ab-surface);
    font-size: clamp(13px, 1.4vw, 17px);
    font-weight: 800;
    text-decoration: none;
    color: var(--c) !important;
    transition: transform .25s cubic-bezier(.3, 1.6, .5, 1), background .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease;
    cursor: pointer;
}
.ab .ab-az-key:hover { transform: translateY(-4px); border-color: var(--c); background: color-mix(in srgb, var(--c) 12%, var(--ab-surface)); }
.ab .ab-az-key.is-on {
    color: #fff !important;
    border-color: transparent;
    background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 55%, #fff));
    transform: translateY(-6px) scale(1.1);
    box-shadow: 0 12px 22px -8px var(--c);
}
.ab .ab-az-key:focus-visible { outline: 3px solid var(--c); outline-offset: 2px; }
.ab-az-key.is-seen::after {
    content: "";
    position: absolute;
    bottom: -9px; left: 50%;
    width: 5px; height: 5px;
    margin-left: -2.5px;
    border-radius: 50%;
    background: var(--c);
}
.ab-az-key.is-empty { opacity: .35; cursor: default; }

/* foot: play, progress */
.ab-az-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 20px;
    margin-top: 26px;
}
.ab-az-play {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 10px 20px 10px 16px;
    border: 0;
    border-radius: 999px;
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, var(--c1), var(--c2));
    box-shadow: 0 10px 22px -10px var(--c);
    cursor: pointer;
    transition: transform .2s ease;
}
.ab-az-play:hover { transform: translateY(-2px); }
.ab-az-play:focus-visible { outline: 3px solid var(--c); outline-offset: 3px; }
.ab-az-play i { width: 0; height: 0; border-style: solid; border-width: 7px 0 7px 11px; border-color: transparent transparent transparent #fff; }
.ab-az-play[aria-pressed="true"] i { width: 11px; height: 14px; border: 0; border-left: 4px solid #fff; border-right: 4px solid #fff; }

.ab-az-progress { margin: 0; font-size: 15px; color: var(--ab-ink-3); }
.ab-az-progress b { color: var(--ab-ink); }
.ab-az-bar { flex: 1; min-width: 120px; height: 6px; border-radius: 6px; background: var(--ab-tint); overflow: hidden; }
.ab-az-bar i { display: block; height: 100%; background: var(--ab-grad); transform: scaleX(var(--seen)); transform-origin: left; }

.ab-az-done {
    margin: 22px 0 0;
    text-align: center;
    font-size: clamp(20px, 2.6vw, 28px);
    font-weight: 800;
    letter-spacing: -.02em;
    background: var(--ab-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.ab-az-burst { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.ab-az-burst span { position: absolute; font-weight: 900; line-height: 1; will-change: transform, opacity; }

@media (max-width: 900px) {
    .ab-az-stage { grid-template-columns: 1fr; min-height: 0; }
    .ab-az-glyph { max-width: 220px; width: 100%; margin: 0 auto; }
    .ab-az-keys { grid-template-columns: repeat(13, minmax(0, 1fr)); row-gap: 14px; }
    .ab-az-road { margin-left: 0; margin-right: 0; }
    /* on a narrow screen the keys come first, so picking a letter never
       means scrolling past the tool list */
    .ab-az { display: flex; flex-direction: column; }
    .ab-az-road { order: 1; margin-top: 30px; }
    .ab-az-keys { order: 2; }
    .ab-az-foot { order: 3; }
    .ab-az-stage { order: 4; margin-top: 26px; }
    .ab-az-done { order: 5; }
}
@media (max-width: 600px) {
    .ab-az-keys { grid-template-columns: repeat(7, minmax(0, 1fr)); }
    .ab .ab-az-key { min-height: 44px; font-size: 17px; }
    .ab-az-tools { grid-template-columns: 1fr; }
    .ab-az-tools li:nth-child(n+5) { display: none; }
    .ab-az-glyph { max-width: 170px; }
    .ab-az-count b { font-size: 40px; }
}

/* ---- motion for the alphabet ---- */
@keyframes ab-az-wave {
    0% { transform: none; }
    35% { transform: translateY(-12px) scale(1.18); background: var(--c); color: #fff; box-shadow: 0 14px 24px -10px var(--c); }
    100% { transform: none; }
}
@keyframes ab-az-flip-in {
    0% { transform: rotateX(-95deg) scale(.85); opacity: 0; }
    60% { transform: rotateX(12deg) scale(1.04); opacity: 1; }
    100% { transform: none; }
}
@keyframes ab-az-pop { from { opacity: 0; transform: translateY(10px) scale(.96); } }
@keyframes ab-az-cheer { 0% { transform: scale(.6); opacity: 0; } 70% { transform: scale(1.06); } 100% { transform: none; opacity: 1; } }

@media (prefers-reduced-motion: no-preference) {
    .ab-az-glyph span { transform-origin: 50% 60%; transition: transform .17s ease-in, opacity .17s ease-in; }
    .ab-az.is-flip-out .ab-az-glyph span { transform: rotateX(95deg) scale(.85); opacity: 0; }
    .ab-az.is-flip-in .ab-az-glyph span { animation: ab-az-flip-in .55s cubic-bezier(.2, .9, .3, 1.2); }
    .ab-az.is-list-in .ab-az-tools li { animation: ab-az-pop .45s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(var(--i) * 50ms); }
    .ab-az.is-sleeping .ab-az-key { opacity: .45; }
    .ab-az.is-waking .ab-az-key,
    .ab-az.is-complete .ab-az-key { animation: ab-az-wave .7s cubic-bezier(.3, 1.4, .5, 1) backwards; animation-delay: calc(var(--i) * 55ms); }
    .ab-az.is-waking .ab-az-key { animation-fill-mode: both; }
    .ab-az.is-complete .ab-az-done { animation: ab-az-cheer .7s cubic-bezier(.3, 1.4, .5, 1) 1.2s backwards; }
    .ab-az.is-playing .ab-az-key.is-on { box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 30%, transparent), 0 12px 22px -8px var(--c); }
}

/* =====================================================================
   Spell your name in A2Z tools / hero letter trail
   ===================================================================== */
.ab-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.ab-name {
    margin-top: 28px;
    padding: clamp(22px, 4vw, 36px);
    border-radius: 28px;
    background:
        linear-gradient(var(--ab-surface), var(--ab-surface)) padding-box,
        linear-gradient(100deg, #5b8def, #7b5bf0 30%, #c05ad9 58%, #f0655f 82%, #f89a4d) border-box;
    border: 2px solid transparent;
    box-shadow: var(--ab-shadow);
}
.ab-name-head h3 { font-size: clamp(22px, 2.6vw, 28px); margin-bottom: 4px; }
.ab-name-head p { margin-bottom: 18px; color: var(--ab-ink-3); }

.ab-name-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
.ab-name-input {
    flex: 1 1 260px;
    min-height: 54px;
    padding: 10px 18px;
    border-radius: 16px;
    border: 2px solid var(--ab-line);
    background: var(--ab-bg);
    font: inherit;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ab-ink);
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.ab-name-input:focus { border-color: #7b5bf0; box-shadow: 0 0 0 4px rgba(123, 91, 240, .15); }
.ab-name-input::placeholder { color: var(--ab-ink-3); letter-spacing: .04em; font-weight: 600; text-transform: none; }
.ab-name-shuffle {
    min-height: 54px;
    padding: 0 20px;
    border-radius: 16px;
    border: 2px solid var(--ab-line);
    background: var(--ab-surface);
    font: inherit;
    font-weight: 700;
    color: var(--ab-ink);
    cursor: pointer;
    transition: border-color .2s ease, transform .2s ease;
}
.ab-name-shuffle:hover { border-color: #c05ad9; transform: translateY(-2px); }
.ab-name-shuffle:hover i { display: inline-block; transform: rotate(180deg); }
.ab-name-shuffle i { display: inline-block; font-style: normal; transition: transform .4s ease; }
.ab-name-shuffle:focus-visible { outline: 3px solid #7b5bf0; outline-offset: 2px; }

/* the acrostic: one card per letter, in a row that wraps */
.ab-name-out {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
    gap: 10px;
    min-height: 120px;
}
.ab-name-item {
    --c: #7b5bf0;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 12px 12px;
    border-radius: 18px;
    background: color-mix(in srgb, var(--c) 10%, var(--ab-surface));
    border: 1px solid color-mix(in srgb, var(--c) 30%, transparent);
    perspective: 600px;
}
.ab-name-item b {
    display: grid;
    place-items: center;
    width: 54px; height: 54px;
    border-radius: 14px;
    font-size: 30px;
    font-weight: 900;
    color: #fff;
    background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 55%, #fff));
    box-shadow: 0 10px 20px -10px var(--c);
}
.ab .ab-name-item a, .ab .ab-name-item span {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
    text-decoration: none;
    color: var(--ab-ink) !important;
}
.ab .ab-name-item a:hover { color: var(--c) !important; text-decoration: underline; }
.ab-name-item span { color: var(--ab-ink-3) !important; font-weight: 600; }
.ab-name-item.is-other b { background: var(--ab-tint); color: var(--ab-ink-3); box-shadow: none; }
.ab-name-gap { min-height: 1px; }

@media (max-width: 600px) {
    .ab-name-out { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ab-name-input { font-size: 19px; }
}

/* hero trail layer */
.ab-trail { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.ab-trail span { position: absolute; font-weight: 900; line-height: 1; will-change: transform, opacity; }
.ab-hero { cursor: crosshair; }
.ab-hero a, .ab-hero .ab-wrap p, .ab-hero h1 { cursor: auto; }
.ab-hero a { cursor: pointer; }

@keyframes ab-name-in {
    0% { opacity: 0; transform: rotateY(-80deg) translateY(10px) scale(.8); }
    60% { opacity: 1; transform: rotateY(10deg) scale(1.04); }
    100% { transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
    .ab-name-item { animation: ab-name-in .6s cubic-bezier(.2, .9, .3, 1.2) backwards; animation-delay: var(--d, 0ms); transform-origin: left center; }
}

/* =====================================================================
   More of the story: background alphabet, tabs, terminal, value cards,
   the a-2-z easter egg
   ===================================================================== */

/* a huge faint letter that walks A to Z as the page scrolls */
.ab-bgletter {
    --bgc: #5b8def;
    position: fixed;
    right: -1vw;
    bottom: -8vh;
    z-index: 0;
    pointer-events: none;
    display: none;
}
.ab-bgletter span {
    display: block;
    font-size: min(44vw, 560px);
    font-weight: 900;
    line-height: .8;
    letter-spacing: -.06em;
    color: var(--bgc);
    opacity: .055;
    transition: color .6s ease;
}
@media (min-width: 1000px) { .ab-bgletter { display: block; } }
.theme-dark .ab-bgletter span { opacity: .08; }

/* chapter 1: tabs */
.ab-tabs { position: relative; margin: 26px 0 28px; }
.ab-tabs-bar {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 44px;
    padding: 8px 8px 0;
    border-radius: 14px 14px 0 0;
    background: #e8e5ee;
    overflow: hidden;
}
.ab-tabs-bar span {
    flex: 1 1 0;
    min-width: 0;
    max-width: 140px;
    padding: 8px 10px;
    border-radius: 9px 9px 0 0;
    background: #f7f6fa;
    font-size: 12px;
    font-weight: 600;
    color: var(--ab-ink-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: max-width .45s cubic-bezier(.2, .8, .2, 1), padding .45s ease, opacity .3s ease, margin .45s ease;
}
.ab-tabs:not(.is-play) .ab-tabs-bar span { display: none; }
.ab-tabs-one {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 260px;
    padding: 8px 18px;
    border-radius: 9px 9px 0 0;
    font-size: 13px;
    font-weight: 800;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    background: linear-gradient(100deg, #5b8def, #7b5bf0 35%, #c05ad9 60%, #f0655f 85%, #f89a4d);
    transition: max-width .6s cubic-bezier(.2, .8, .2, 1), padding .6s ease, opacity .4s ease;
}
.ab-tabs-one i { width: 10px; height: 10px; border-radius: 3px; background: #fff; opacity: .85; }
.ab-tabs-page {
    position: relative;
    min-height: 74px;
    padding: 18px 20px;
    border: 1px solid var(--ab-line);
    border-top: 0;
    border-radius: 0 0 14px 14px;
    background: var(--ab-surface);
    box-shadow: var(--ab-shadow);
}
.ab-tabs-page p {
    position: absolute;
    left: 20px; right: 20px; top: 50%;
    margin: 0;
    transform: translateY(-50%);
    font-weight: 700;
    transition: opacity .5s ease, transform .5s ease;
}
.ab-tabs-many { color: var(--ab-ink-3); opacity: 0; }
.ab-tabs-single { color: var(--ab-ink); font-size: 19px; }
.ab-tabs-replay {
    position: absolute;
    right: 10px; bottom: 10px;
    padding: 4px 12px;
    border: 1px solid var(--ab-line);
    border-radius: 999px;
    background: var(--ab-surface);
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    color: var(--ab-ink-3);
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease;
}

/* the play: tabs pile in, squeeze, then fold into one */
.ab-tabs.is-play .ab-tabs-bar span { max-width: 0; padding-left: 0; padding-right: 0; opacity: 0; margin-right: -3px; }
.ab-tabs.is-play .ab-tabs-bar span.is-on { max-width: 140px; padding-left: 10px; padding-right: 10px; opacity: 1; margin-right: 0; }
.ab-tabs.is-play .ab-tabs-bar span.is-on:last-of-type { background: #fff; }
.ab-tabs.is-play:not(.is-merged) .ab-tabs-one { max-width: 0; padding-left: 0; padding-right: 0; opacity: 0; }
.ab-tabs.is-play:not(.is-merged) .ab-tabs-many { opacity: 1; }
.ab-tabs.is-play:not(.is-merged) .ab-tabs-single { opacity: 0; transform: translateY(-20%); }
.ab-tabs.is-merged .ab-tabs-bar span.is-on { max-width: 0; padding-left: 0; padding-right: 0; opacity: 0; margin-right: -3px; transition-delay: calc((11 - var(--k)) * 35ms); }
.ab-tabs.is-merged .ab-tabs-one { animation: ab-tab-glow 1.2s ease .3s; }
.ab-tabs.is-done .ab-tabs-replay { opacity: 1; pointer-events: auto; }
@keyframes ab-tab-glow { 50% { box-shadow: 0 0 0 4px rgba(192, 90, 217, .25), 0 0 30px rgba(123, 91, 240, .5); } }

/* chapter 2: terminal */
.ab-term {
    margin: 0 0 30px;
    max-width: 760px;
    border-radius: 14px;
    overflow: hidden;
    background: #0f1324;
    box-shadow: 0 30px 60px -30px rgba(16, 22, 43, .55);
}
.ab-term-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    background: #1a2038;
    font: 12px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
    color: #8a91aa;
}
.ab-term-bar i { width: 10px; height: 10px; border-radius: 50%; }
.ab-term-bar i:nth-child(1) { background: #f0655f; }
.ab-term-bar i:nth-child(2) { background: #f8c04d; }
.ab-term-bar i:nth-child(3) { background: #3cc47c; }
.ab-term-bar span { margin-left: 8px; }
.ab-term-body {
    margin: 0;
    padding: 16px 18px 18px;
    overflow-x: auto;
    background: transparent;
    border: 0;
    font: 13.5px/1.75 ui-monospace, SFMono-Regular, Consolas, monospace;
    color: #d6d9e6;
}
.ab-term-body code { font: inherit; color: inherit; background: none; padding: 0; white-space: pre; }
.ab-term-line { display: inline-block; }
.ab-term-line em { font-style: normal; color: #f8c04d; }
.ab-term-line b { font-weight: 400; color: #7fa8ff; }
.ab-term-line u { text-decoration: none; color: #3cc47c; }
.ab-term-end { color: #c05ad9; }
.ab-term figcaption { padding: 0 18px 16px; font-size: 14px; color: #8a91aa; background: #0f1324; }
@keyframes ab-type { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes ab-caret { 50% { opacity: 0; } }
.ab-anim .ab-reveal:not(.is-in) .ab-term-line { clip-path: inset(0 100% 0 0); }
.ab-anim .ab-reveal.is-in .ab-term-line { animation: ab-type .45s steps(28, end) backwards; animation-delay: calc(var(--k) * 240ms + 300ms); }
.ab-term-end::after { content: "\2588"; margin-left: 6px; color: #d6d9e6; animation: ab-caret 1s steps(1) infinite; }

/* values that turn over */
.ab-values { perspective: 1200px; }
.ab .ab-value {
    display: grid;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    outline: none;
}
.ab-value > div {
    grid-area: 1 / 1;
    padding: 24px 22px;
    border-radius: var(--ab-radius);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transition: transform .7s cubic-bezier(.3, 1.3, .5, 1);
}
.ab-value-front { background: var(--ab-surface); border: 1px solid var(--ab-line); }
.ab-value-back {
    display: flex;
    flex-direction: column;
    justify-content: center;
    transform: rotateY(180deg);
    color: #fff;
    background: linear-gradient(140deg, #5b8def, #7b5bf0 40%, #c05ad9 75%, #f0655f);
}
.ab-value:nth-child(2) .ab-value-back { background: linear-gradient(140deg, #7b5bf0, #c05ad9 60%, #f0655f); }
.ab-value:nth-child(3) .ab-value-back { background: linear-gradient(140deg, #c05ad9, #f0655f 60%, #f89a4d); }
.ab-value:nth-child(4) .ab-value-back { background: linear-gradient(140deg, #f0655f, #f89a4d); }
.ab-value-back span { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; opacity: .85; margin-bottom: 8px; }
.ab .ab-value-back p { color: #fff; font-size: 15px; line-height: 1.55; }
.ab-value.is-flipped .ab-value-front { transform: rotateY(-180deg); }
.ab-value.is-flipped .ab-value-back { transform: none; }
.ab-value:focus-visible .ab-value-front, .ab-value:focus-visible .ab-value-back { box-shadow: 0 0 0 3px #7b5bf0; }
@media (hover: hover) and (pointer: fine) {
    .ab-value:hover .ab-value-front { transform: rotateY(-180deg); }
    .ab-value:hover .ab-value-back { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .ab-value > div { transition: none; }
}

/* easter egg */
.ab-egg-hint { margin: 26px 0 0 !important; font-size: 13px; color: rgba(255, 255, 255, .55) !important; }
.ab-egg-hint kbd {
    display: inline-block;
    min-width: 22px;
    margin: 0 2px;
    padding: 1px 6px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, .3);
    background: rgba(255, 255, 255, .08);
    font: 700 12px/1.6 ui-monospace, Consolas, monospace;
    color: #fff;
    text-align: center;
}
.ab-rain { position: fixed; inset: 0; z-index: 10001; pointer-events: none; overflow: hidden; }
.ab-rain span { position: absolute; top: 0; font-weight: 900; line-height: 1; will-change: transform, opacity; text-shadow: 0 2px 8px rgba(0, 0, 0, .12); }
@keyframes ab-egg-bar { 0% { filter: none; } 50% { filter: hue-rotate(180deg) saturate(1.6); } 100% { filter: none; } }
.ab-egg .ab-progress span { animation: ab-egg-bar 1.2s ease 2; transform: scaleX(1) !important; }

@media (max-width: 600px) {
    .ab-tabs-bar span { font-size: 11px; }
    .ab-tabs-single { font-size: 17px; }
    .ab-term-body { font-size: 12px; }
}

/* chapter 2: the team committing, pushing and pulling */
.ab-git {
    position: relative;
    margin: 0 18px 16px;
    padding: 16px 12px 12px;
    border-radius: 12px;
    background: radial-gradient(60% 80% at 50% 0%, rgba(123, 91, 240, .18), transparent 70%), #141a30;
    border: 1px solid rgba(255, 255, 255, .06);
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
}
.ab-git-remote {
    display: flex;
    align-items: center;
    gap: 8px;
    width: max-content;
    margin: 0 auto 40px;
    padding: 6px 14px;
    border-radius: 999px;
    background: #1f2747;
    border: 1px solid rgba(123, 91, 240, .45);
    font-size: 12px;
    color: #c9cde0;
}
.ab-git-remote i { width: 9px; height: 9px; border-radius: 50%; background: #3cc47c; box-shadow: 0 0 8px #3cc47c; }
.ab-git-remote b { color: #fff; }
.ab-git-remote span { color: #8a91aa; }
.ab-git-remote.is-hit { animation: ab-git-hit .6s ease; }

.ab-git-team {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
}
/* faint wires from origin down to each person */
.ab-git-team::before {
    content: "";
    position: absolute;
    left: 10%; right: 10%; top: -22px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(123, 91, 240, .45), transparent);
}
.ab-git-dev {
    --dc: #7b5bf0;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.ab-git-dev::before {
    content: "";
    position: absolute;
    top: -22px; left: 50%;
    width: 1px; height: 22px;
    background: rgba(123, 91, 240, .35);
}
.ab-git-dev.d1 { --dc: #5b8def; }
.ab-git-dev.d2 { --dc: #7b5bf0; }
.ab-git-dev.d3 { --dc: #c05ad9; }
.ab-git-dev.d4 { --dc: #f0655f; }
.ab-git-dev.d5 { --dc: #f89a4d; }
.ab-git-dev span {
    display: grid;
    place-items: center;
    width: 40px; height: 40px;
    border-radius: 12px;
    font: 800 14px/1 Inter, system-ui, sans-serif;
    color: #fff;
    background: linear-gradient(135deg, var(--dc), color-mix(in srgb, var(--dc) 55%, #fff));
    box-shadow: 0 0 0 0 transparent;
}
.ab-git-dev small {
    max-width: 100%;
    font-size: 10.5px;
    color: #9aa0b8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ab-git-dev.is-commit span { animation: ab-git-commit .5s cubic-bezier(.3, 1.6, .5, 1); }
.ab-git-dev.is-push span { animation: ab-git-ring .7s ease; }
.ab-git-dev.is-pull span { animation: ab-git-ring .7s ease; }

.ab-git-bubble {
    position: absolute;
    bottom: 100%;
    left: 50%;
    z-index: 2;
    max-width: 150px;
    margin-bottom: 4px;
    padding: 4px 8px;
    border-radius: 8px;
    background: #fff;
    color: #10162b;
    font-size: 11px;
    font-style: normal;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .35);
}
.ab-git-packet {
    position: absolute;
    left: 0; top: 0;
    z-index: 3;
    width: 12px; height: 12px;
    margin: -6px 0 0 -6px;
    border-radius: 50%;
    pointer-events: none;
}
.ab-git-packet.is-up { background: #f8c04d; box-shadow: 0 0 12px #f8c04d; }
.ab-git-packet.is-down { background: #3cc47c; box-shadow: 0 0 12px #3cc47c; }

.ab-git-log {
    margin: 14px 2px 0 !important;
    min-height: 1.5em;
    font-size: 12px;
    color: #c9cde0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ab-git-log > span { color: #8a91aa; }
.ab-git-line { font-weight: 400; }
.ab-git-line.is-new { animation: ab-git-line .35s ease; }
.ab-git-line .c-commit { color: #7fa8ff; font-weight: 700; }
.ab-git-line .c-push { color: #f8c04d; font-weight: 700; }
.ab-git-line .c-pull { color: #3cc47c; font-weight: 700; }

@keyframes ab-git-commit { 40% { transform: scale(1.18) rotate(-4deg); } }
@keyframes ab-git-ring { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--dc) 70%, transparent); } 100% { box-shadow: 0 0 0 14px transparent; } }
@keyframes ab-git-hit { 40% { transform: scale(1.08); border-color: #f8c04d; box-shadow: 0 0 18px rgba(248, 192, 77, .45); } }
@keyframes ab-git-line { from { opacity: 0; transform: translateY(4px); } }

@media (max-width: 600px) {
    .ab-git { margin: 0 10px 14px; padding: 14px 6px 10px; }
    .ab-git-dev span { width: 34px; height: 34px; font-size: 12px; border-radius: 10px; }
    .ab-git-dev small { font-size: 9px; }
    .ab-git-bubble { max-width: 110px; font-size: 10px; }
}

/* =====================================================================
   CHAPTER 8: milestones reached, then the road ahead
   ===================================================================== */
@property --v { syntax: "<number>"; inherits: true; initial-value: 0; }

/* the reached milestones sit on a solid road; the goals continue it dashed */
.ab-miles {
    position: relative;
    list-style: none;
    margin: 0 0 44px;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 10px;
}
.ab-miles::before {
    content: "";
    position: absolute;
    left: 4%; right: 4%; top: 19px;
    height: 4px;
    border-radius: 4px;
    background: linear-gradient(90deg, #5b8def, #7b5bf0 30%, #c05ad9 60%, #f0655f 85%, #f89a4d);
    transform-origin: left;
}
.ab-mile { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; min-width: 0; }
.ab-mile-flag {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 40px; height: 40px;
    margin-bottom: 8px;
    border-radius: 50%;
    font-size: 17px;
    font-weight: 900;
    color: #fff;
    background: linear-gradient(135deg, #5b8def, #c05ad9);
    box-shadow: 0 0 0 5px var(--ab-bg), 0 8px 18px -8px rgba(123, 91, 240, .8);
}
.ab-mile:nth-child(2) .ab-mile-flag { background: linear-gradient(135deg, #6d77ee, #b45ddc); }
.ab-mile:nth-child(3) .ab-mile-flag { background: linear-gradient(135deg, #7b5bf0, #c05ad9); }
.ab-mile:nth-child(4) .ab-mile-flag { background: linear-gradient(135deg, #a35ae3, #e0607a); }
.ab-mile:nth-child(5) .ab-mile-flag { background: linear-gradient(135deg, #c05ad9, #f0655f); }
.ab-mile:nth-child(6) .ab-mile-flag { background: linear-gradient(135deg, #e0607a, #f0655f); }
.ab-mile:nth-child(7) .ab-mile-flag { background: linear-gradient(135deg, #f0655f, #f89a4d); }
.ab-mile small { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ab-ink-3); }
.ab-mile b { font-size: 15px; line-height: 1.3; color: var(--ab-ink); }
.ab-mile-note { font-size: 13px; line-height: 1.45; color: var(--ab-ink-3); }

.ab-mile--here .ab-mile-flag { background: var(--ab-surface); box-shadow: 0 0 0 5px var(--ab-bg), inset 0 0 0 3px #f89a4d; }
.ab-mile--here .ab-mile-flag i { width: 14px; height: 14px; border-radius: 50%; background: #f89a4d; }
.ab-mile--here b { background: var(--ab-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* goals */
.ab-goals {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    padding-top: 26px;
}
/* the dashed road that leads on from "you are here" */
.ab-goals::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 4px;
    background: repeating-linear-gradient(90deg, #f89a4d 0 14px, transparent 14px 26px);
    opacity: .7;
}
.ab-goal {
    --gc: #7b5bf0;
    position: relative;
    padding: 24px 22px;
    border-radius: var(--ab-radius);
    border: 2px dashed color-mix(in srgb, var(--gc) 45%, transparent);
    background: color-mix(in srgb, var(--gc) 6%, var(--ab-surface));
    transition: transform .25s ease, border-style .25s ease, box-shadow .25s ease;
}
.ab-goal:hover { transform: translateY(-4px); border-style: solid; box-shadow: 0 22px 44px -26px var(--gc); }
.ab-goal h3 { font-size: 19px; }
.ab-goal p { font-size: 15px; margin-bottom: 8px; }
.ab-goal-tag { font-size: 12px !important; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--gc); margin: 0 0 6px !important; }

.ab-ring {
    position: absolute;
    right: 18px; top: 18px;
    display: grid;
    place-items: center;
    width: 76px; height: 76px;
    border-radius: 50%;
    background:
        radial-gradient(closest-side, var(--ab-surface) 76%, transparent 78%),
        conic-gradient(var(--gc) calc(var(--v) * 1%), color-mix(in srgb, var(--gc) 14%, transparent) 0);
    transition: --v 1.6s cubic-bezier(.2, .8, .2, 1) .2s;
}
.ab-ring b { font-size: 20px; font-weight: 800; color: var(--ab-ink); letter-spacing: -.02em; }
.ab-ring small { font-size: 11px; color: var(--ab-ink-3); font-weight: 700; }
.ab-goal:has(.ab-ring) h3, .ab-goal:has(.ab-ring) .ab-goal-tag { padding-right: 86px; }

.ab-goal-ic {
    display: grid;
    place-items: center;
    width: 44px; height: 44px;
    margin-bottom: 14px;
    border-radius: 12px;
    font-size: 20px;
    font-weight: 800;
    color: var(--gc);
    background: color-mix(in srgb, var(--gc) 16%, transparent);
}
.ab-goal-ic--type { font-family: Georgia, "Times New Roman", serif; }
.ab-goal--you { border-style: solid; background: linear-gradient(140deg, color-mix(in srgb, var(--gc) 12%, var(--ab-surface)), var(--ab-surface)); }

/* motion: the road draws, flags tick on one by one, "you are here" pulses, rings fill */
@keyframes ab-mile-pop { 0% { transform: scale(0); } 70% { transform: scale(1.2); } 100% { transform: none; } }
@keyframes ab-here { 0% { box-shadow: 0 0 0 5px var(--ab-bg), inset 0 0 0 3px #f89a4d, 0 0 0 5px rgba(248, 154, 77, .5); } 100% { box-shadow: 0 0 0 5px var(--ab-bg), inset 0 0 0 3px #f89a4d, 0 0 0 22px rgba(248, 154, 77, 0); } }
.ab-anim .ab-reveal:not(.is-in) .ab-miles::before { transform: scaleX(0); }
.ab-anim .ab-miles::before { transition: transform 1.6s cubic-bezier(.2, .8, .2, 1) .2s; }
.ab-anim .ab-reveal:not(.is-in) .ab-mile { opacity: 0; }
.ab-anim .ab-reveal.is-in .ab-mile { animation: ab-pop .5s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(var(--i) * 220ms + 200ms); }
.ab-anim .ab-reveal.is-in .ab-mile-flag { animation: ab-mile-pop .5s cubic-bezier(.3, 1.6, .5, 1) backwards; animation-delay: calc(var(--i) * 220ms + 300ms); }
.ab-anim .ab-reveal.is-in .ab-mile--here .ab-mile-flag { animation: ab-mile-pop .5s cubic-bezier(.3, 1.6, .5, 1) backwards calc(var(--i) * 220ms + 300ms), ab-here 1.6s ease-out 3s infinite; }
.ab-anim .ab-reveal:not(.is-in) .ab-ring { --v: 0; }
.ab-anim .ab-reveal:not(.is-in) .ab-goals::before { clip-path: inset(0 100% 0 0); }
.ab-anim .ab-goals::before { transition: clip-path 1.4s ease 1.6s; }

@media (max-width: 1000px) {
    .ab-goals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    /* the road turns vertical */
    .ab-miles { grid-template-columns: 1fr; gap: 16px; padding-left: 4px; }
    .ab-miles::before { left: 21px; right: auto; top: 10px; bottom: 10px; width: 4px; height: auto; background: linear-gradient(180deg, #5b8def, #c05ad9 60%, #f89a4d); transform-origin: top; }
    .ab-anim .ab-reveal:not(.is-in) .ab-miles::before { transform: scaleY(0); }
    .ab-mile { display: grid; grid-template-columns: 40px 1fr; column-gap: 16px; align-items: start; text-align: left; }
    .ab-mile-flag { grid-row: span 3; margin: 0; }
}
@media (max-width: 600px) {
    .ab-goals { grid-template-columns: 1fr; }
}

/* =====================================================================
   Share the story / press kit
   ===================================================================== */
.ab-share { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 34px; }
.ab .ab-share-btn, .ab-share-native {
    --sc: #7b5bf0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 18px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--sc) 35%, var(--ab-line));
    background: var(--ab-surface);
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    color: var(--ab-ink) !important;
    cursor: pointer;
    transition: transform .2s cubic-bezier(.3, 1.6, .5, 1), background .2s ease, color .2s ease, border-color .2s ease;
}
.ab .ab-share-btn::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--sc); }
.ab .ab-share-btn:hover, .ab-share-native:hover { transform: translateY(-3px); background: var(--sc); border-color: var(--sc); color: #fff !important; }
.ab .ab-share-btn:hover::before { background: #fff; }
.ab .ab-share-btn:focus-visible, .ab-share-native:focus-visible { outline: 3px solid var(--sc); outline-offset: 2px; }
.ab .ab-share-native { --sc: #7b5bf0; background: var(--ab-grad); color: #fff !important; border-color: transparent; }
.ab .s-wa { --sc: #25d366; } .ab .s-x { --sc: #10162b; } .ab .s-li { --sc: #0a66c2; } .ab .s-fb { --sc: #1877f2; }
.ab .s-rd { --sc: #ff4500; } .ab .s-tg { --sc: #229ed9; } .ab .s-mail { --sc: #c05ad9; } .ab .s-copy { --sc: #f0655f; }
.theme-dark .ab .s-x { --sc: #e7e9f0; }
.ab .ab-share-btn.is-done { background: #3cc47c; border-color: #3cc47c; color: #fff !important; }

.ab-press {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: 22px;
}
.ab-press-main, .ab-press-side {
    padding: clamp(22px, 3.4vw, 34px);
    border-radius: 24px;
    background: var(--ab-surface);
    border: 1px solid var(--ab-line);
    box-shadow: var(--ab-shadow);
}
.ab-press-main h3 { font-size: clamp(22px, 2.6vw, 28px); }
.ab-press-sub { margin: 22px 0 10px !important; font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ab-ink-3); }
.ab-press-side .ab-press-sub:first-child { margin-top: 0 !important; }

.ab-blurb {
    margin-top: 18px;
    border-radius: 16px;
    background: var(--ab-tint);
    border-left: 5px solid #7b5bf0;
    overflow: hidden;
}
.ab-blurb-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px 0; }
.ab-blurb-head b { font-size: 14px; color: var(--ab-ink); }
.ab-blurb p { padding: 8px 16px 14px; margin: 0; font-size: 15px; line-height: 1.65; }
.ab-mini {
    min-height: 34px;
    padding: 4px 14px;
    border-radius: 999px;
    border: 1px solid var(--ab-line);
    background: var(--ab-surface);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    color: var(--ab-ink);
    cursor: pointer;
}
.ab-mini:hover { border-color: #7b5bf0; }
.ab-mini.is-done { background: #3cc47c; border-color: #3cc47c; color: #fff; }

.ab-angles { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ab-angles li {
    position: relative;
    padding: 12px 14px 12px 40px;
    border-radius: 14px;
    border: 1px solid var(--ab-line);
    font-size: 15px;
    line-height: 1.55;
}
.ab-angles li::before {
    content: "";
    position: absolute;
    left: 14px; top: 17px;
    width: 14px; height: 14px;
    border-radius: 4px;
    background: var(--ab-grad);
}
.ab-angles b { color: var(--ab-ink); }

.ab-press-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.ab a.ab-btn--ghost, .ab a.ab-btn--ghost:visited { color: var(--ab-ink) !important; border-color: var(--ab-line); background: var(--ab-surface); }
.ab a.ab-btn--ghost:hover { background: var(--ab-tint); }

.ab-facts { margin: 0; display: grid; gap: 2px; }
.ab-facts div { display: grid; grid-template-columns: 100px 1fr; gap: 10px; padding: 9px 0; border-bottom: 1px dashed var(--ab-line); font-size: 14.5px; }
.ab-facts dt { font-weight: 700; color: var(--ab-ink-3); }
.ab-facts dd { margin: 0; color: var(--ab-ink); font-weight: 600; }

.ab-logo-dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ab .ab-logo-dl a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 10px 8px;
    border-radius: 14px;
    border: 1px solid var(--ab-line);
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    color: var(--ab-ink) !important;
    transition: transform .2s ease, border-color .2s ease;
}
.ab .ab-logo-dl a:hover { transform: translateY(-3px); border-color: #7b5bf0; }
.ab-logo-dl span { display: grid; place-items: center; width: 100%; height: 56px; border-radius: 10px; background: #f6f5f8; }
.ab-logo-dl img { max-height: 40px; width: auto; }

.ab-copied {
    position: fixed;
    left: 50%; bottom: 24px;
    z-index: 10002;
    margin: 0 !important;
    padding: 10px 18px;
    border-radius: 999px;
    background: #10162b;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    transform: translate(-50%, 140%);
    opacity: 0;
    pointer-events: none;
}
.ab-copied.is-on { animation: ab-toast 2.2s ease; }
@keyframes ab-toast { 0% { transform: translate(-50%, 140%); opacity: 0; } 12%, 80% { transform: translate(-50%, 0); opacity: 1; } 100% { transform: translate(-50%, 140%); opacity: 0; } }

@media (max-width: 900px) {
    .ab-press { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .ab-facts div { grid-template-columns: 88px 1fr; }
}

/* the big goal: two columns wide, with every industry drifting past */
.ab-goal--star {
    grid-column: span 2;
    border-style: solid;
    background:
        radial-gradient(60% 90% at 0% 0%, rgba(91, 141, 239, .14), transparent 70%),
        radial-gradient(50% 90% at 100% 100%, rgba(248, 154, 77, .14), transparent 70%),
        var(--ab-surface);
    border-image: none;
}
.ab-goal--star h3 { font-size: clamp(22px, 2.4vw, 28px); }
.ab-goal--star .ab-ring { width: 92px; height: 92px; }
.ab-goal--star:has(.ab-ring) h3, .ab-goal--star:has(.ab-ring) .ab-goal-tag { padding-right: 104px; }

.ab-industries {
    display: flex;
    overflow: hidden;
    margin-top: 14px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ab-industries ul {
    flex: 0 0 auto;
    display: flex;
    gap: 8px;
    margin: 0;
    padding: 0 8px 0 0;
    list-style: none;
}
.ab-industries li {
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--ab-line);
    background: var(--ab-surface);
    font-size: 13px;
    font-weight: 700;
    color: var(--ab-ink);
    white-space: nowrap;
}
.ab-industries li:nth-child(5n+1) { border-color: rgba(91, 141, 239, .5); }
.ab-industries li:nth-child(5n+2) { border-color: rgba(123, 91, 240, .5); }
.ab-industries li:nth-child(5n+3) { border-color: rgba(192, 90, 217, .5); }
.ab-industries li:nth-child(5n+4) { border-color: rgba(240, 101, 95, .5); }
.ab-industries li:nth-child(5n+5) { border-color: rgba(248, 154, 77, .5); }
@keyframes ab-marquee { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: no-preference) {
    .ab-industries ul { animation: ab-marquee 38s linear infinite; }
    .ab-goal--star:hover .ab-industries ul { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) {
    .ab-industries { -webkit-mask-image: none; mask-image: none; }
    .ab-industries ul { flex-wrap: wrap; row-gap: 8px; }
    .ab-industries ul + ul { display: none; }
}
@media (max-width: 600px) {
    .ab-goal--star { grid-column: auto; }
    .ab-goal--star:has(.ab-ring) h3, .ab-goal--star:has(.ab-ring) .ab-goal-tag { padding-right: 0; }
    .ab-goal--star .ab-ring { position: static; margin-bottom: 12px; }
}

/* =====================================================================
   The people: Salman's spotlight card, then the team of four
   ===================================================================== */
.ab-team { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ab-avatar--d { background: linear-gradient(135deg, var(--ab-mid), var(--ab-z1)); }
.ab-avatar--e { background: linear-gradient(135deg, var(--ab-z1), var(--ab-z2)); }
.ab-avatar--c { background: linear-gradient(135deg, var(--ab-a2), var(--ab-mid)); }
.ab-avatar--b { background: linear-gradient(135deg, var(--ab-a1), var(--ab-a2)); }

.ab-person--lead {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: clamp(20px, 3vw, 36px);
    align-items: center;
    padding: clamp(24px, 3.4vw, 36px);
    border: 2px solid transparent;
    background:
        radial-gradient(50% 120% at 0% 0%, rgba(91, 141, 239, .12), transparent 70%),
        linear-gradient(var(--ab-surface), var(--ab-surface)) padding-box,
        linear-gradient(100deg, #5b8def, #7b5bf0 30%, #c05ad9 58%, #f0655f 82%, #f89a4d) border-box;
}
.ab-lead-avatar { position: relative; }
.ab-lead-avatar::before {
    content: "";
    position: absolute;
    inset: -8px;
    border-radius: 34px;
    background: conic-gradient(from var(--ab-ang, 0deg), #5b8def, #7b5bf0, #c05ad9, #f0655f, #f89a4d, #5b8def);
    opacity: .55;
    filter: blur(10px);
}
.ab-person--lead .ab-avatar {
    position: relative;
    width: clamp(96px, 11vw, 132px);
    height: clamp(96px, 11vw, 132px);
    margin: 0;
    border-radius: 28px;
    font-size: clamp(34px, 4vw, 46px);
}
.ab-person--lead h3 { font-size: clamp(26px, 3vw, 34px); margin-bottom: 10px; }
.ab-person--lead .ab-role {
    margin-bottom: 4px;
    background: var(--ab-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.ab-person--lead p { font-size: 16.5px; max-width: 760px; }
.ab-lead-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 16px; padding: 0; }
.ab-lead-tags li {
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    color: var(--ab-ink);
    background: var(--ab-tint);
    border: 1px solid var(--ab-line);
}
.ab-lead-tags li:last-child { color: #fff; background: var(--ab-grad); border-color: transparent; }
@media (prefers-reduced-motion: no-preference) {
    .ab-lead-avatar::before { animation: ab-spin 8s linear infinite; }
}
@media (max-width: 1000px) {
    .ab-team { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .ab-team { grid-template-columns: 1fr; }
    .ab-person--lead { grid-template-columns: 1fr; text-align: left; }
}

/* Shahnawaz: the second spotlight, a step quieter than the first */
.ab-team { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ab-person--second {
    background:
        radial-gradient(50% 120% at 0% 0%, rgba(192, 90, 217, .12), transparent 70%),
        linear-gradient(var(--ab-surface), var(--ab-surface)) padding-box,
        linear-gradient(100deg, #7b5bf0, #c05ad9 55%, #f0655f) border-box;
}
.ab-person--second .ab-avatar { width: clamp(84px, 9vw, 108px); height: clamp(84px, 9vw, 108px); font-size: clamp(30px, 3.4vw, 38px); }
.ab-person--second h3 { font-size: clamp(23px, 2.6vw, 29px); }
.ab-person--second .ab-lead-tags li:last-child { background: linear-gradient(100deg, #7b5bf0, #c05ad9, #f0655f); }
@media (max-width: 1000px) {
    .ab-team { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .ab-team { grid-template-columns: 1fr; }
}

/* Syed Imran on top: the owner's card, calm blue, same shape as the spotlights */
.ab-person--owner {
    background:
        radial-gradient(50% 120% at 0% 0%, rgba(91, 141, 239, .16), transparent 70%),
        linear-gradient(var(--ab-surface), var(--ab-surface)) padding-box,
        linear-gradient(100deg, #3f6fd8, #5b8def 45%, #7b5bf0) border-box;
}
.ab-person--owner .ab-avatar { width: clamp(84px, 9vw, 108px); height: clamp(84px, 9vw, 108px); font-size: clamp(30px, 3.4vw, 38px); }
.ab-person--owner h3 { font-size: clamp(23px, 2.6vw, 29px); }
.ab-person--owner .ab-role { background: linear-gradient(100deg, #3f6fd8, #7b5bf0); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ab-person--owner .ab-lead-tags li:last-child { background: linear-gradient(100deg, #3f6fd8, #5b8def, #7b5bf0); }
.ab-person--owner .ab-lead-avatar::before { background: conic-gradient(from var(--ab-ang, 0deg), #3f6fd8, #5b8def, #7b5bf0, #3f6fd8); }
.ab-avatar--f { background: linear-gradient(135deg, #3cc47c, #229ed9); }

/* Names and roles only: two rows of three, the first row larger */
.ab-team .ab-person--lead {
    grid-column: auto;
    grid-template-columns: 1fr;
    justify-items: center;
    align-items: start;
    align-content: start;
    text-align: center;
    gap: 18px;
    padding: 30px 22px 26px;
}
.ab-team .ab-person--lead h3 { font-size: clamp(21px, 2.2vw, 25px); margin: 4px 0 0; }
.ab-team .ab-person--lead .ab-role { margin: 0; }
.ab-team .ab-person--lead .ab-lead-body { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ab-team .ab-person--lead .ab-lead-body h3 { order: 1; }
.ab-team .ab-person--lead .ab-lead-body .ab-role { order: 2; }
.ab-team .ab-person--lead .ab-link { order: 3; margin-top: 6px; font-size: 14px; }
.ab-team .ab-person--lead .ab-avatar,
.ab-team .ab-person--owner .ab-avatar,
.ab-team .ab-person--second .ab-avatar { width: 96px; height: 96px; font-size: 34px; border-radius: 26px; }
.ab-team .ab-person:not(.ab-person--lead) { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 24px 18px 20px; }
.ab-team .ab-person:not(.ab-person--lead) .ab-avatar { margin-bottom: 12px; }
.ab-team .ab-person:not(.ab-person--lead) .ab-role { margin: 0; }

/* Reliable Software Technology: the company behind the team */
.ab-rst {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(220px, .8fr) 1.6fr;
    gap: clamp(22px, 4vw, 48px);
    align-items: center;
    margin-top: 28px;
    padding: clamp(26px, 4vw, 44px);
    border-radius: 26px;
    background: linear-gradient(135deg, #0c1226, #141b36 55%, #0f1a33);
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 30px 70px -40px rgba(16, 22, 43, .7);
    color: #c9cde0;
}
.ab-rst-glow {
    position: absolute;
    inset: -40% -10% auto auto;
    width: 60%;
    height: 160%;
    z-index: -1;
    background: radial-gradient(closest-side, rgba(66, 160, 230, .28), transparent 70%);
}
.ab-rst-brand img { width: 100%; max-width: 280px; height: auto; }
.ab-rst-kicker { margin: 14px 0 0 !important; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #6fb3ee; }
.ab .ab-rst h3 { color: #fff; font-size: clamp(21px, 2.4vw, 27px); margin-bottom: 8px; }
.ab .ab-rst p { color: #c9cde0; }
.ab-rst-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 20px; padding: 0; }
.ab .ab-rst-tags a {
    display: inline-block;
    padding: 6px 13px;
    border-radius: 999px;
    border: 1px solid rgba(111, 179, 238, .35);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    color: #dbe7f7 !important;
    transition: background .2s ease, border-color .2s ease;
}
.ab .ab-rst-tags a:hover { background: rgba(111, 179, 238, .15); border-color: #6fb3ee; }
.ab-rst-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.ab .ab-rst a.ab-btn--primary { background: linear-gradient(100deg, #2f7fd0, #42a0e6); }
@media (max-width: 800px) {
    .ab-rst { grid-template-columns: 1fr; }
    .ab-rst-brand img { max-width: 230px; }
}