/* ================================================================
   RIYO STUDIO — "Telemetry" design system, on the "As built" structure
   One dark theme, one signal colour (sampled from the logo), mono readouts.
   Tokens live on :root and are repeated on body.ab-page so a page that also
   loads plan.css (the free-check results) keeps these values, not plan.css's.
   ================================================================ */

@font-face{font-family:'Archivo';font-style:normal;font-weight:300 800;font-stretch:100%;font-display:swap;src:url(assets/fonts/archivo-variable-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Archivo';font-style:normal;font-weight:300 800;font-stretch:100%;font-display:swap;src:url(assets/fonts/archivo-latin-v2.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:100 800;font-display:swap;src:url(assets/fonts/jetbrains-mono-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:100 800;font-display:swap;src:url(assets/fonts/jetbrains-mono-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/plex-arabic-400.woff2) format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/plex-arabic-500.woff2) format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:600;font-display:swap;src:url(assets/fonts/plex-arabic-600.woff2) format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:700;font-display:swap;src:url(assets/fonts/plex-arabic-700.woff2) format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;}

/* ── Tokens ──────────────────────────────────────────────────────── */
:root, body.ab-page {
  --bg: #11161D;
  --bg-deep: #0C1016;
  --bg-2: #161C24;
  --bg-3: #1C232C;
  --line: #263140;
  --line-2: #324154;
  --fg: #E6EDF3;
  --fg-2: #C3CED8;
  --fg-3: #9FB0C0;
  --signal: #6FD8B3;
  --em-2: var(--signal);
  --on-signal: #06201C;
  --warn: #F5B14B;
  --bad: #F87171;
  --signal-text: var(--signal);
  --rule: var(--line);
  --sans: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --arabic: 'IBM Plex Sans Arabic', 'Archivo', system-ui, sans-serif;
  --wrap: 1280px;
  --gutter: 24px;
  --sec: clamp(36px, 4.2vw, 56px);
  --r: 4px;
  --r-card: 6px;
  /* plan.css variables, repointed so the free-check results inherit the theme */
  --ink: #11161D;
  --ivory: #E6EDF3;
  --mist: #C3CED8;
  --dim: #9FB0C0;
  --mint: #6FD8B3;
  --mint-2: #6FD8B3;
  --mint-soft: rgba(111, 216, 179, 0.1);
}

/* ── Site styles a visitor can pick ──────────────────────────────────
   Blueprint is the set above. theme.js puts data-theme on <html> before the
   first paint, and only pages that load it can switch; Paper and Navy
   repoint the same tokens, so content and layout never change, only colour. */
/* Screen only: a printed or saved page keeps the print design, whichever style is picked. */
@media screen {
html[data-theme="paper"], html[data-theme="paper"] body.ab-page {
  --bg: #F3F1EA;
  --bg-deep: #E9E5D9;
  --bg-2: #F8F6F0;
  --bg-3: #FBFAF6;
  --line: #CFC8B8;
  --line-2: #8D8676;
  --fg: #11161D;
  --fg-2: #2A323C;
  --fg-3: #535C67;
  --signal: #0B6B4E;
  --on-signal: #FFFFFF;
  --warn: #9A5A00;
  --bad: #B42318;
  --signal-text: #0B6B4E;
  --ivory: #11161D;
  --mist: #2A323C;
  --dim: #535C67;
  --mint: #0B6B4E;
  --mint-2: #0B6B4E;
  --mint-soft: rgba(11, 107, 78, 0.08);
  --text-main: var(--fg);
  --text: var(--fg);
  --text-dim: var(--fg-2);
  --text-faint: var(--fg-2);
  --text-muted: var(--fg-3);
  --border: var(--line);
  --border-hover: var(--line-2);
  --border-accent: var(--line-2);
  --ink: var(--bg);
  --ink-2: var(--bg-2);
  --ink-3: var(--bg-3);
  --em: var(--signal);
  --em-2: var(--signal);
  --em-soft: var(--mint-soft);
  --accent: var(--signal);
  --accent-dim: var(--signal);
  --accent-bright: var(--signal);
  --accent-soft: var(--mint-soft);
  --accent-glow: transparent;
  --gold: var(--warn);
}
/* Paper is a drawing sheet: a faint grid under the page. */
html[data-theme="paper"] .ab-hero { background-image: linear-gradient(rgba(17, 22, 29, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(17, 22, 29, 0.05) 1px, transparent 1px); background-size: 24px 24px; }
html[data-theme="navy"], html[data-theme="navy"] body.ab-page {
  --bg: #13233A;
  --bg-deep: #0F1D31;
  --bg-2: #182B45;
  --bg-3: #1D3250;
  --line: #2A4163;
  --line-2: #46638C;
  --fg: #F3F1EA;
  --fg-2: #D5DEEA;
  --fg-3: #A9B9CE;
  --signal: #6FD8B3;
  --on-signal: #06201C;
  --warn: #F5B14B;
  --bad: #FCA5A5;
  --signal-text: #6FD8B3;
  --ivory: #F3F1EA;
  --mist: #D5DEEA;
  --dim: #A9B9CE;
  --mint: #6FD8B3;
  --mint-2: #6FD8B3;
  --mint-soft: rgba(111, 216, 179, 0.12);
  --text-main: var(--fg);
  --text: var(--fg);
  --text-dim: var(--fg-2);
  --text-faint: var(--fg-2);
  --text-muted: var(--fg-3);
  --border: var(--line);
  --border-hover: var(--line-2);
  --border-accent: var(--line-2);
  --ink: var(--bg);
  --ink-2: var(--bg-2);
  --ink-3: var(--bg-3);
  --em: var(--signal);
  --em-2: var(--signal);
  --em-soft: var(--mint-soft);
  --accent: var(--signal);
  --accent-dim: var(--signal);
  --accent-bright: var(--signal);
  --accent-soft: var(--mint-soft);
  --accent-glow: transparent;
  --gold: var(--warn);
}
/* The main button stays the strongest thing on the page: dark ink on Paper, paper-white on Navy. */
html[data-theme="paper"] body :is(.ab-btn--primary, .ab-nav .nav-cta-btn, a.rs-btn--solid, a.art-btn) { background: #11161D !important; border-color: #11161D !important; color: #F3F1EA !important; }
html[data-theme="paper"] body :is(.ab-btn--primary:hover, .ab-nav .nav-cta-btn:hover, a.rs-btn--solid:hover, a.art-btn:hover) { background: #0B6B4E !important; border-color: #0B6B4E !important; color: #FFFFFF !important; }
html[data-theme="navy"] body :is(.ab-btn--primary, .ab-nav .nav-cta-btn, a.rs-btn--solid, a.art-btn) { background: #F3F1EA !important; border-color: #F3F1EA !important; color: #13233A !important; }
html[data-theme="navy"] body :is(.ab-btn--primary:hover, .ab-nav .nav-cta-btn:hover, a.rs-btn--solid:hover, a.art-btn:hover) { background: #6FD8B3 !important; border-color: #6FD8B3 !important; color: #06201C !important; }
/* The older top bar paints its own glass background and nav colours. */
html.ab-alt body:not(.home) #main-nav { --ivory: var(--fg); --mist: var(--fg-2); --dim: var(--fg-3); --em-2: var(--signal); }
/* The sample report page is white paper: on Paper and Navy it gets a firmer edge and a soft shadow so it reads as a sheet. */
html.ab-alt .ab-sample-pdf { border-color: var(--line-2); box-shadow: 0 1px 2px color-mix(in srgb, var(--fg) 10%, transparent), 0 16px 36px -16px color-mix(in srgb, var(--fg) 35%, transparent); }
html.ab-alt .ab-sample-pdf:hover { border-color: var(--signal); }
/* The sample monthly email copies a light mail app; in Paper and Navy it takes the page's own colours. */
html.ab-alt .rs-mail-actions span { color: var(--fg-2); background: var(--bg-3); border-color: var(--line-2); }
html.ab-alt .rs-mail-actions .rs-mail-reply { color: var(--bg); background: var(--fg); border-color: var(--fg); }
html.ab-alt .rs-mail-changes li.wip time { color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, transparent); }

}
/* The switcher: three dots in the top bar, each a real button with its name. */
.ab-themes { display: flex; align-items: center; gap: 2px; }
.ab-themes-label { display: none; font-size: 14px; font-weight: 500; color: var(--fg-2); margin-inline-end: auto; }
.ab-themes button { display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.ab-themes button::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--dot); box-shadow: 0 0 0 1px var(--line-2); }
.ab-themes button[aria-pressed="true"]::before { box-shadow: 0 0 0 2px var(--bg-2), 0 0 0 3.5px var(--signal); }
.ab-themes button:focus-visible { outline: 2px solid var(--signal); outline-offset: 1px; }
.ab-themes [data-theme-set="blueprint"] { --dot: #11161D; }
.ab-themes [data-theme-set="paper"] { --dot: #F3F1EA; }
.ab-themes [data-theme-set="navy"] { --dot: #1F3A5F; }

/* ── Base ────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); overflow-x: clip; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body.ab-page {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  padding: 0;
  padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  -webkit-font-smoothing: antialiased;
}
body.ab-page::before, body.ab-page::after { content: none; display: none; }
body.ab-page.has-site-nav { padding-top: 0; }
body.ab-page > main { flex: 1; }
img { max-width: 100%; display: block; }
body.ab-page:not(.ab-fam-report) svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--signal); }
p, h1, h2, h3, h4, ul, ol, dl, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
:where(body.ab-page:not(.ab-fam-report)) :where(button, input) { font: inherit; color: inherit; }
::selection { background: var(--signal); color: var(--on-signal); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }

@view-transition { navigation: auto; }
/* Between pages the top bar stays where it is and only the page beneath it
   changes: the old page fades out, the new one rises a few pixels into place. */
#main-nav { view-transition-name: ab-nav; }
::view-transition-old(root) { animation: ab-vt-out 0.18s ease both; }
::view-transition-new(root) { animation: ab-vt-in 0.34s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
::view-transition-group(ab-nav) { animation-duration: 0.2s; }
@keyframes ab-vt-out { to { opacity: 0; } }
@keyframes ab-vt-in { from { opacity: 0; transform: translateY(10px); } }
/* A change of site style is one circle from the pressed dot (theme.js draws it),
   across the whole page, top bar included. */
html.ab-vt-theme #main-nav { view-transition-name: none; }
html.ab-vt-theme::view-transition-old(root), html.ab-vt-theme::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

.ab-skip { position: absolute; inset-inline-start: 16px; top: -60px; z-index: 50; padding: 10px 14px; background: var(--signal); color: var(--on-signal); font-weight: 700; border-radius: var(--r); }
.ab-skip:focus-visible { top: 12px; color: var(--on-signal); }

.ab-wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.ab-sec { padding-block: var(--sec); }
.ab-sec--band { background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ab-sec + .ab-sec:not(.ab-sec--band) { border-top: 1px solid var(--line); }

/* ── Type ────────────────────────────────────────────────────────── */
/* Two label voices: a mono readout (status strip, panel headers, section
   numbers, figure captions) and a plain sentence-case label for everything
   else (kickers, section notes, card meta, footer labels). */
.ab-mono { font-family: var(--sans); font-size: 13px; line-height: 1.5; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--fg-3); }
.ab-kicker { font-family: var(--sans); font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--fg-3); }
.ab-h1 { font-size: clamp(30px, 2.7vw, 40px); line-height: 1.12; font-weight: 700; letter-spacing: -0.02em; font-variation-settings: 'wdth' 100; text-wrap: balance; }
.ab-h1--upper { text-transform: none; }
.ab-h2 { font-size: clamp(22px, 1.9vw, 28px); line-height: 1.18; font-weight: 700; letter-spacing: -0.015em; text-wrap: balance; }
/* About title: second part in the accent green (same treatment as the Care plans titles). */
#about-heading em { font-style: normal; font-weight: inherit; color: var(--em-2); -webkit-text-fill-color: var(--em-2); }
.ab-h2--big { font-size: clamp(22px, 1.9vw, 28px); line-height: 1.18; letter-spacing: -0.015em; }
.ab-h3 { font-size: 22px; line-height: 1.2; font-weight: 700; }
.ab-lede { font-size: 17px; line-height: 1.6; color: var(--fg); max-width: 60rem; }
.ab-body { font-size: 17px; line-height: 1.6; color: var(--fg); max-width: 36em; }
.ab-small { font-size: 14px; color: var(--fg-3); }
.ab-lat { direction: ltr; unicode-bidi: isolate; }

/* ── Buttons, inputs ─────────────────────────────────────────────── */
.ab-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 22px; border-radius: var(--r); border: 1px solid transparent; font-size: 15px; font-weight: 700; line-height: 1.2; cursor: pointer; background: none; text-align: center; }
.ab-btn--primary { background: var(--signal); border-color: var(--signal); color: var(--on-signal); }
.ab-btn--primary:hover { background: var(--fg); border-color: var(--fg); color: var(--on-signal); }
.ab-btn--secondary { border-color: var(--line-2); color: var(--fg); }
.ab-btn--secondary:hover { border-color: var(--fg-3); color: var(--fg); }
.rs-cur-ref { display: inline-block; margin-inline-start: 8px; font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--fg-3); }
.ab-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ab-btn--wa svg { fill: currentColor; stroke: none; }
.ab-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.ab-stack { display: flex; flex-direction: column; gap: 12px; min-width: 260px; }

.ab-join { display: flex; flex-wrap: wrap; max-width: 720px; }
.ab-join input, .ck-row input { flex: 1 1 260px; min-width: 0; height: 60px; padding: 0 20px; background: var(--bg-2); border: 1px solid var(--line-2); border-start-start-radius: var(--r); border-end-start-radius: var(--r); border-start-end-radius: 0; border-end-end-radius: 0; border-inline-end: 0; color: var(--fg); font-size: 18px; box-shadow: none; }
.ab-join input::placeholder, .ck-row input::placeholder { color: var(--fg-3); }
.ab-join input:focus, .ck-row input:focus { outline: 2px solid var(--signal); outline-offset: 2px; border-color: var(--line-2); box-shadow: none; }
.ab-join button, .ck-row .pl-btn { height: 60px; min-height: 0; padding: 0 26px; border-radius: 0; border-start-end-radius: var(--r); border-end-end-radius: var(--r); background: var(--signal); color: var(--on-signal); border: 1px solid var(--signal); font-size: 17px; font-weight: 700; box-shadow: none; transform: none; }
.ab-join button:hover, .ck-row .pl-btn:hover { background: var(--fg); border-color: var(--fg); color: var(--on-signal); transform: none; }
@media (max-width: 560px) {
  .ab-join input, .ck-row input { border-inline-end: 1px solid var(--line-2); border-radius: var(--r) var(--r) 0 0; }
  .ab-join button, .ck-row .pl-btn { width: 100%; border-radius: 0 0 var(--r) var(--r); }
}

/* ── Status strip ────────────────────────────────────────────────── */
.ab-head { display: contents; }
.ab-strip { background: var(--bg-2); border-bottom: 1px solid var(--line); padding-top: env(safe-area-inset-top, 0px); }
.ab-strip-in { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 24px; padding-block: 10px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--fg-2); line-height: 1.5; }
.ab-strip-in > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ab-strip-in > span:last-child { text-align: end; }
.ab-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--signal); vertical-align: middle; margin-inline-end: 8px; }
.ab-dot--warn { background: var(--warn); }
.ab-dot--bad { background: var(--bad); }
.ab-strip-phone { display: none; }
@media (max-width: 960px) { .ab-strip-in { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ab-strip-in > span:nth-child(2n) { text-align: end; } }
@media (max-width: 767px) {
  .ab-strip-in { grid-template-columns: 1fr; gap: 2px; padding-block: 8px; }
  .ab-strip-in > span { display: none; text-align: start !important; }
  .ab-strip-in > .ab-strip-phone { display: block; }
}

/* ── Navigation (one for the whole site) ─────────────────────────── */
.ab-nav { position: sticky; top: 0; z-index: 100; background: var(--bg-2); border: 0; border-bottom: 1px solid var(--line); box-shadow: none; backdrop-filter: none; padding-top: env(safe-area-inset-top, 0px); }
.ab-nav .nav-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; width: 100%; max-width: var(--wrap); margin-inline: auto; padding: 14px var(--gutter); }
.ab-nav .nav-brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 16px; letter-spacing: 0; text-transform: none; color: var(--fg); }
.ab-nav .nav-brand-icon-img { width: 26px; height: 26px; }
.ab-nav .nav-links { display: flex; flex-wrap: wrap; gap: 4px 22px; font-size: 14px; font-weight: 500; }
.ab-nav .nav-link { color: var(--fg-3); padding: 6px 0; border-bottom: 2px solid transparent; }
.ab-nav .nav-link:hover, .ab-nav .nav-link.active { color: var(--fg); }
.ab-nav .nav-link[aria-current="page"] { color: var(--fg); border-bottom-color: var(--signal); }
.ab-nav .nav-end { display: flex; align-items: center; gap: 18px; margin-inline-start: auto; }
.ab-nav .nav-lang { font-size: 14px; font-weight: 500; color: var(--fg-2); }
.ab-nav .nav-cta-btn { display: inline-flex; align-items: center; padding: 10px 16px; border-radius: var(--r); background: var(--signal); color: var(--on-signal); font-size: 14px; font-weight: 700; }
.ab-nav .nav-cta-btn:hover { background: var(--fg); color: var(--on-signal); }
.ab-menu { display: none; font-family: var(--sans); font-size: 15px; font-weight: 600; line-height: 1; padding: 11px 14px; border: 1px solid var(--line-2); border-radius: var(--r); background: none; color: var(--fg); cursor: pointer; }
.ab-menu:hover { border-color: var(--fg-3); }
@media (max-width: 767px) {
  .ab-nav .nav-inner { gap: 8px; padding-inline: 16px; }
  .ab-nav .nav-brand { order: 1; margin-inline-end: auto; gap: 8px; font-size: 15px; }
  .ab-nav .nav-brand-icon-img { width: 23px; height: 23px; }
  .ab-nav .nav-end { display: contents; }
  .ab-nav .nav-cta-btn { order: 2; padding: 9px 13px; font-size: 13.5px; }
  .ab-menu { display: inline-block; order: 3; padding: 9px 12px; font-size: 14px; }
  .ab-nav .nav-links { order: 4; width: 100%; flex-direction: column; align-items: stretch; text-align: start; gap: 0; padding-top: 6px; border-top: 1px solid var(--line); }
  .ab-nav .nav-link { padding: 12px 0; border-bottom: 1px solid var(--line); }
  .ab-nav .nav-lang { order: 5; display: block; width: 100%; padding: 12px 0; border-bottom: 1px solid var(--line); }
  html.ab-js .ab-nav:not(.is-open) .nav-links, html.ab-js .ab-nav:not(.is-open) .nav-lang { display: none; }
  .ab-nav .ab-themes { order: 5; width: 100%; gap: 4px; padding: 4px 0; border-bottom: 1px solid var(--line); }
  .ab-themes-label { display: block; }
  .ab-themes button { width: 44px; height: 44px; }
  html.ab-js .ab-nav:not(.is-open) .ab-themes { display: none; }
  .ab-hero { padding-block: 40px 48px; }
  .ab-hero-copy > .ab-kicker { margin-bottom: 14px; }
}

/* ── Hero ────────────────────────────────────────────────────────── */
.ab-hero { padding-block: 72px 56px; }
.ab-hero-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.ab-hero-copy > .ab-kicker { margin-bottom: 20px; }
.ab-hero-copy > .ab-lede { margin-top: 24px; }
.ab-hero-copy > .ab-actions { margin-top: 32px; }
.ab-tz { margin-top: 20px; font-size: 14px; color: var(--fg-3); }
.ab-hero-form { margin-top: 36px; max-width: 560px; }
.ab-hero-form-label { width: 100%; margin-bottom: 10px; }
.ab-hero-form input { height: 54px; font-size: 16px; }
.ab-hero-form button { height: 54px; font-size: 15px; padding-inline: 20px; }
.ab-note a { color: var(--fg-2); text-decoration: underline; text-underline-offset: 3px; }
.ab-note a:hover { color: var(--signal); }
.ab-note-btn { font: inherit; letter-spacing: 0; text-transform: none; color: var(--fg-2); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.ab-note-btn:hover { color: var(--signal); }
.ab-dim { display: flex; align-items: center; margin-top: 28px; max-width: 520px; }
.ab-dim::before, .ab-dim::after { content: ""; width: 1px; height: 14px; background: var(--line-2); }
.ab-dim > span { flex: 1; position: relative; border-top: 1px solid var(--line-2); }
.ab-dim > span > b { position: absolute; left: 50%; top: -10px; transform: translateX(-50%); padding: 0 10px; background: var(--bg); font-family: var(--sans); font-weight: 500; font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--fg-3); white-space: nowrap; }
.ab-hero-panels { display: grid; gap: 16px; }
@media (max-width: 960px) { .ab-hero-grid { grid-template-columns: 1fr; gap: 40px; } }

/* ── Panels (live panel, response panel, data tables) ────────────── */
.ab-panel { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; }
.ab-panel-head { display: flex; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); font-family: var(--sans); font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--fg-3); }
.ab-live > .ab-panel-head, .ab-response .ab-panel-head { font-family: var(--mono); font-size: 12px; font-weight: 400; letter-spacing: 0.05em; text-transform: uppercase; color: var(--fg-2); }
.ab-panel-head > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ab-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); }
.ab-tile { background: var(--bg-2); padding: 18px 16px; min-width: 0; }
.ab-tile-label { font-family: var(--sans); font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--fg-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ab-tile-value { font-size: clamp(30px, 2.3vw, 36px); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; color: var(--fg); }
.ab-tile-value .ab-unit { font-size: 16px; font-weight: 500; letter-spacing: 0; color: var(--fg-3); margin-inline-start: 4px; }
.ab-g--good { color: var(--signal); }
.ab-g--warn { color: var(--warn); }
.ab-g--bad { color: var(--bad); }
.ab-panel-row { padding: 16px; border-top: 1px solid var(--line); }
.ab-panel-row > .ab-mono { display: flex; justify-content: space-between; gap: 12px; }
.ab-bars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
.ab-bar { height: 6px; background: var(--line); overflow: hidden; }
.ab-bar > i { display: block; height: 100%; background: var(--signal); transform-origin: 0 50%; }
[dir="rtl"] .ab-bar > i { transform-origin: 100% 50%; }
.ab-bar > i.ab-bar--warn { background: var(--warn); }
.ab-rows { font-family: var(--mono); font-size: 12px; line-height: 1.5; letter-spacing: 0.02em; }
.ab-row { display: grid; grid-template-columns: 180px minmax(0, 1fr) 20px; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--line); }
.ab-row:last-child { border-bottom: 0; }
.ab-row-k { color: var(--fg-2); }
.ab-row-v { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg); }
.ab-row-ok { color: var(--signal); text-align: center; }
.ab-row-ok--no { color: var(--bad); }
.ab-row-v--plain { font-family: var(--sans); font-size: 13px; line-height: 18px; letter-spacing: 0; white-space: normal; text-overflow: clip; cursor: help; }
html[lang="ar"] .ab-response .ab-row-v--plain { font-family: var(--arabic); font-size: 13px; line-height: 18px; letter-spacing: 0; text-transform: none; text-align: left; }
.ab-caption { padding: 14px 16px; border-top: 1px solid var(--line); font-family: var(--sans); font-size: 14px; line-height: 1.5; color: var(--fg-2); text-transform: none; letter-spacing: 0; }
.ab-response { direction: ltr; }
[dir="rtl"] .ab-response .ab-caption { direction: rtl; font-family: var(--arabic); }
@media (max-width: 480px) { .ab-row { grid-template-columns: minmax(0, 1fr) 20px; padding: 8px 16px; row-gap: 2px; column-gap: 10px; } .ab-row-k { grid-column: 1; grid-row: 1; } .ab-row-ok { grid-column: 2; grid-row: 1; } .ab-row-v { grid-column: 1 / -1; grid-row: 2; } .ab-caption { padding: 12px 16px; } .ab-tile { padding: 14px 10px; } .ab-tile-label { font-size: 12px; } .ab-tile-value { font-size: clamp(22px, 6.5vw, 28px); } .ab-response .ab-panel-head { flex-wrap: nowrap; font-size: clamp(9.8px, 2.7vw, 11px); column-gap: 8px; } .ab-response .ab-panel-head > span { white-space: nowrap; overflow: visible; text-overflow: clip; } }

@media (prefers-reduced-motion: no-preference) {
  .ab-bar > i { animation: ab-grow 0.4s ease-out both; }
  .ab-response .ab-row { animation: ab-fade 0.3s ease-out both; animation-delay: calc(var(--i, 0) * 40ms); }
}
@keyframes ab-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes ab-fade { from { opacity: 0; } to { opacity: 1; } }

/* ── Fleet strip ─────────────────────────────────────────────────── */
.ab-fleet { background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ab-fleet-in { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; padding-block: 18px; font-family: var(--sans); font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--fg-3); }
.ab-fleet-in b { font-weight: 700; }
.ab-fleet-note { margin-inline-start: auto; cursor: help; }
/* On a phone, keep the three builds on one row (dropping the small status dots to
   make room) and move the note to its own line. */
@media (max-width: 560px) { .ab-fleet-in { gap: 6px 11px; font-size: 12px; } .ab-fleet-in .ab-fleet-dot { display: none; } .ab-fleet-note { flex-basis: 100%; margin-inline-start: 0; font-size: 12.5px; } }
@media (max-width: 374px) { .ab-fleet-in { gap: 5px 8px; font-size: 11px; } }

/* ── Section header pattern ──────────────────────────────────────── */
.ab-sh { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px 20px; padding-bottom: 14px; border-bottom: 1px solid var(--rule); }
.ab-num { font-family: var(--mono); font-size: 12px; letter-spacing: 0.05em; color: var(--signal-text); }
.ab-note { margin-inline-start: auto; font-family: var(--sans); font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--fg-3); }
@media (max-width: 760px) { .ab-note { margin-inline-start: 0; width: 100%; } }

/* ── Scope list / spec list (bill-of-quantities rows) ────────────── */
.ab-scope { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0 48px; }
.ab-clause { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 0 16px; padding: 26px 0; border-bottom: 1px solid var(--rule); }
.ab-clause > .ab-cn { font-family: var(--mono); font-size: 13px; letter-spacing: 0.05em; color: var(--fg-3); padding-top: 5px; }
.ab-clause p { margin-top: 6px; color: var(--fg-2); }
.ab-clause .ab-h3 { font-size: 22px; }
@media (max-width: 639px) {
  /* On phones, drop the fixed 56px number column so each scene and its copy use
     the full width, instead of being indented behind a near-empty label column.
     The number becomes a small label stacked above, like .ab-spec--row. */
  .ab-scope .ab-clause { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 24px 0; }
  .ab-scope .ab-clause > .ab-cn { padding-top: 0; margin-bottom: 10px; }
}
.ab-spec { border-top: 1px solid var(--rule); }
.ab-spec .ab-clause { padding: 20px 0; }
.ab-spec .ab-h3 { font-size: 19px; font-weight: 600; }
.ab-spec .ab-clause:last-child { border-bottom: 0; }

/* ── Project captions ────────────────────────────────────────────── */
.ab-fig-cap { display: flex; justify-content: space-between; gap: 12px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--fg-2); }
.ab-fig-go { display: inline-block; margin-top: 10px; font-family: var(--sans); font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--signal); }

/* ── Sequence ────────────────────────────────────────────────────── */
.ab-seq { position: relative; margin-top: 48px; }
.ab-seq-line { position: absolute; inset-inline: 20px; top: 19px; border-top: 1px solid var(--line-2); }
.ab-seq-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 32px; position: relative; }
.ab-node { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--bg); display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 12px; letter-spacing: 0.05em; color: var(--fg); }
.ab-node--on { background: var(--signal); border-color: var(--signal); color: var(--on-signal); }
.ab-seq-list .ab-h3 { margin-top: 18px; }
.ab-seq-list p { margin-top: 6px; color: var(--fg-2); }
@media (max-width: 760px) { .ab-seq-line { display: none; } }

/* ── Split layouts ───────────────────────────────────────────────── */
.ab-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 56px; align-items: start; }
.ab-split-copy > .ab-kicker { margin-bottom: 18px; }
.ab-split-copy > .ab-body, .ab-split-copy > .ab-lede { margin-top: 18px; }
.ab-split-copy > .ab-actions { margin-top: 30px; }
@media (max-width: 900px) { .ab-split { grid-template-columns: 1fr; gap: 36px; } }

/* ── Instruments grid ────────────────────────────────────────────── */
.ab-grid-lines { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: 36px; }
.ab-inst { display: block; background: var(--bg-2); padding: 26px; color: var(--fg); }
.ab-inst:hover { background: var(--bg-3); color: var(--fg); }
.ab-inst-name { margin-top: 10px; font-size: 22px; font-weight: 700; }
.ab-inst p { margin-top: 6px; color: var(--fg-2); font-size: 15px; }
.ab-tag { font-family: var(--sans); font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--fg-3); }

/* ── Data table ──────────────────────────────────────────────────── */
.ab-table .ab-trow { display: flex; justify-content: space-between; gap: 16px; padding: 12px 16px; border-bottom: 1px solid var(--line); font-family: var(--sans); font-size: 14px; font-weight: 500; }
.ab-table .ab-trow:last-child { border-bottom: 0; }
.ab-table .ab-trow > span:first-child { color: var(--fg-3); }
.ab-table .ab-trow > span:last-child { text-align: end; color: var(--fg); }

/* ── Engineer ────────────────────────────────────────────────────── */
.ab-sign { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 32px; padding-top: 14px; border-top: 1px solid var(--rule); font-family: var(--sans); font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--fg-3); }

/* ── Enquiry ─────────────────────────────────────────────────────── */
.ab-enquiry { display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-end; justify-content: space-between; }
.ab-enquiry > div:first-child { flex: 1 1 520px; min-width: 0; }
.ab-enquiry .ab-body { margin-top: 20px; }
.ab-enquiry .ab-kicker { margin-bottom: 18px; }
/* The build standard as a row of four under the process, and the engineer's note under the enquiry */
.ab-spec--row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 32px; margin-top: 56px; }
.ab-spec--row .ab-clause { grid-template-columns: minmax(0, 1fr); padding: 20px 0 0; border-bottom: 0; }
.ab-spec--row .ab-clause > .ab-cn { padding-top: 0; margin-bottom: 8px; }
/* "What it costs" — the pricing explainer that closes How we build; reuses the
   .ab-case row style (Free / Fixed / Quoted). */
.ab-pricing { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--rule); }
.ab-pricing .ab-kicker { margin: 0 0 14px; }
@media (min-width: 640px) { .ab-pricing .ab-case-row { grid-template-columns: 80px minmax(0, 1fr); } }
.ab-aboutbar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: 24px 56px; align-items: end; margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--line); scroll-margin-top: 96px; }
.ab-aboutbar .ab-body { max-width: 40em; }
.ab-aboutbar .ab-sign { margin-top: 0; }
.ab-sign a { color: var(--fg-2); text-decoration: none; border-bottom: 1px solid var(--line-2); }
.ab-sign a:hover { color: var(--signal); border-bottom-color: var(--signal); }
#tools .ab-grid-lines { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1023px) { #tools .ab-grid-lines { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) {
  #tools .ab-grid-lines { grid-template-columns: minmax(0, 1fr); }
  /* Tighten the tool cells into a scannable directory that signals each one opens
     a tool, instead of tall feature-cards with empty space. Tag and name sit on
     one line; the description is a tight supporting line. */
  #tools .ab-inst { position: relative; padding: 15px 44px 15px 16px; }
  #tools .ab-inst .ab-tag { display: block; }
  #tools .ab-inst-name { font-size: 18px; margin-top: 3px; }
  #tools .ab-inst p { margin-top: 4px; font-size: 14px; }
  #tools .ab-inst::after {
    content: "\2192"; position: absolute; top: 50%; inset-inline-end: 18px; margin-top: -9px;
    font-family: var(--mono); font-size: 17px; line-height: 1; color: var(--fg-3);
    transition: transform .18s ease, color .18s ease;
  }
  #tools .ab-inst:hover::after, #tools .ab-inst:active::after { color: var(--signal); transform: translateX(3px); }
  html[lang="ar"] #tools .ab-inst::after { content: "\2190"; }
  html[lang="ar"] #tools .ab-inst:hover::after, html[lang="ar"] #tools .ab-inst:active::after { transform: translateX(-3px); }
}
@media (max-width: 1023px) { .ab-spec--row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .ab-aboutbar { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 639px) { .ab-spec--row { grid-template-columns: minmax(0, 1fr); margin-top: 40px; } .ab-spec--row .ab-clause { padding: 20px 0; border-bottom: 1px solid var(--rule); } .ab-spec--row .ab-clause:last-child { border-bottom: 0; } }
.ab-email { display: inline-block; margin-top: 18px; font-size: 17px; font-weight: 500; color: var(--signal); }

/* ── Title block ─────────────────────────────────────────────────── */
.ab-title { border-top: 1px solid var(--line); background: var(--bg-2); margin-top: auto; }
.ab-tb { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); border-inline-start: 1px solid var(--line); }
.ab-tb-cell { padding: 16px 18px; border-inline-end: 1px solid var(--line); border-bottom: 1px solid var(--line); min-width: 0; }
.ab-tb-k { font-family: var(--sans); font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--fg-3); }
.ab-tb-v { margin-top: 6px; font-weight: 600; font-size: 15px; color: var(--fg); overflow-wrap: anywhere; }
.ab-tb-v a { color: var(--fg); }
.ab-tb-v a:hover { color: var(--signal); }
.ab-tb-links { display: flex; flex-wrap: wrap; gap: 14px; }
.ab-tb-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding: 16px 0 28px; font-family: var(--sans); font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--fg-3); }
.ab-tb-bottom nav { display: flex; gap: 18px; }

/* ── Website check page ──────────────────────────────────────────── */
.ab-inspect { padding-block: 72px 56px; }
.ab-inspect .ab-kicker { margin-bottom: 20px; }
.ab-inspect .ab-h1 { max-width: 12em; }
.ab-inspect > .ab-wrap > .ab-h1 { margin: 0; }
.ab-facts { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 24px; }
.ab-facts .ab-mono { font-family: var(--mono); font-size: 12px; letter-spacing: 0.05em; color: var(--fg-3); }
/* The form is rendered by website-check.js after the page paints; holding its
   height keeps the fact row below it from moving (layout shift). */
#check-app { min-height: 236px; }
@media (max-width: 760px) { #check-app { min-height: 212px; } }
@media (max-width: 560px) { #check-app { min-height: 296px; } }
@media (max-width: 430px) { #check-app { min-height: 324px; } }
@media (max-width: 380px) { #check-app { min-height: 352px; } }
#check-app .ck-hero { max-width: none; margin: 0; padding: 0; }
#check-app .ck-sub { margin-top: 24px; font-size: 17px; line-height: 1.6; color: var(--fg); max-width: 56ch; }
#check-app .ck-form { margin-top: 36px; }
#check-app .ck-row { display: flex; flex-wrap: wrap; gap: 0; max-width: 720px; }
#check-app .ck-msg { min-height: 20px; margin-top: 10px; font-size: 14px; color: var(--bad); }
#check-app .ck-what { display: none; }
#check-app .ck-loading { display: flex; align-items: center; gap: 12px; margin-top: 30px; font-family: var(--sans); font-size: 15px; font-weight: 500; color: var(--fg-2); }
#check-app .pl-dots i { background: var(--signal); }
main:has(#check-report) .ab-after-form, main:has(.ck-loading) .ab-after-form, main:has(#check-report) .ab-inspect .ab-kicker, main:has(#check-report) .ab-inspect .ab-h1 { display: none; }
main:has(#check-report) .ab-inspect { padding-top: 40px; }
main:has(#check-report) .ab-inspect-grid { display: block; }

/* Free-check results on screen: the shared report keeps its own layout and
   print rules; here it only takes the theme's surfaces and radii. */
@media screen {
  body.ab-page .pd--check { background: var(--bg-2); border-color: var(--line); border-radius: var(--r-card); box-shadow: none; }
  body.ab-page.check-page .pl-btn--solid { background: var(--signal); color: var(--on-signal); box-shadow: none; }
  body.ab-page.check-page .pl-btn--solid:hover { background: var(--fg); transform: none; }
  body.ab-page.check-page .pl-btn--line, body.ab-page .pl-btn--ghost { border-color: var(--line-2); color: var(--fg); background: none; }
  body.ab-page.check-page .pl-btn { border-radius: var(--r); box-shadow: none; }
  body.ab-page #check-app .pd--check *:where(.rp-find, .rp-panel, .ck-scope, .ck-watch, .ck-audit, .ck-cta, .ck-printcta, .rp-scoped, .pd-scale) { border-radius: var(--r-card); box-shadow: none; background-image: none; }
}

/* ── Command palette (keyboard menu, kept for its shortcut) ──────── */
.cmd-palette-overlay { display: none; position: fixed; inset: 0; z-index: 1000; background: rgba(11, 15, 20, 0.9); align-items: flex-start; justify-content: center; padding: 12vh 16px 0; }
.cmd-palette-overlay.active { display: flex; }
.cmd-palette-modal { width: min(640px, 100%); background: var(--bg-2); border: 1px solid var(--line-2); border-radius: var(--r-card); overflow: hidden; }
.cmd-palette-header { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 12px; color: var(--fg-3); }
.cmd-palette-header input { flex: 1; background: none; border: 0; color: var(--fg); font-size: 16px; }
.cmd-palette-body { max-height: 50vh; overflow: auto; padding: 8px; }
.cmd-group { padding: 10px 10px 4px; font-size: 13px; font-weight: 500; color: var(--fg-3); }
.cmd-option { display: block; width: 100%; text-align: start; padding: 10px; border: 0; background: none; border-radius: var(--r); color: var(--fg-2); cursor: pointer; }
.cmd-option:hover, .cmd-option.selected { background: var(--bg-3); color: var(--fg); }

/* ── Install banner (phones, after a tool has been used) ─────────── */
#pwa-install-banner { position: fixed; inset-inline: 0; bottom: 0; z-index: 900; display: none; align-items: center; gap: 12px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); background: var(--bg-2); border-top: 1px solid var(--line); }
#pwa-install-banner.visible { display: flex; }
#pwa-install-banner .pwa-icon { width: 36px; height: 36px; border-radius: var(--r); }
#pwa-install-banner .pwa-text { flex: 1; min-width: 0; font-size: 14px; color: var(--fg-2); }
#pwa-install-banner .pwa-text strong { display: block; color: var(--fg); }
#pwa-install-banner button { padding: 8px 12px; border-radius: var(--r); border: 1px solid var(--line-2); background: none; color: var(--fg); cursor: pointer; }
#pwa-install-banner #pwa-install-btn { background: var(--signal); border-color: var(--signal); color: var(--on-signal); font-weight: 700; }
.pwa-ios-sheet { display: none; }

/* ── Installed app: the tab bar on a phone ───────────────────────────────────────────────── */
@media (display-mode: standalone) and (max-width: 768px) {
  body.ab-page { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
  body.ab-page #riyo-bottom-nav { position: fixed; inset-inline: 0; bottom: 0; z-index: 1300; display: flex !important; justify-content: space-around; align-items: stretch; height: calc(64px + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px); background: var(--bg-2); border-top: 1px solid var(--line); }
  body.ab-page .rbn-tab { position: relative; display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; gap: 4px; height: 64px; color: var(--fg-3); font-size: 11px; font-weight: 500; letter-spacing: 0; text-decoration: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
  body.ab-page .rbn-ico { display: grid; place-items: center; line-height: 1; }
  body.ab-page .rbn-ico svg { display: block; }
  body.ab-page .rbn-tab:active .rbn-ico { transform: scale(0.88); }
  body.ab-page .rbn-tab.active { color: var(--signal-text); }
  body.ab-page .rbn-tab.active::after { content: ""; position: absolute; bottom: 7px; width: 4px; height: 4px; border-radius: 50%; background: var(--signal); box-shadow: none; }
  body.ab-page .rbn-tab.rbn-feature { color: var(--signal-text); }
  body.ab-page .rbn-tab.rbn-feature .rbn-ico { width: 48px; height: 48px; margin-top: -24px; border-radius: 50%; color: var(--on-signal); background: var(--signal); box-shadow: 0 0 0 5px var(--bg-2); }
  body.ab-page .rbn-tab.rbn-feature.active .rbn-ico { box-shadow: 0 0 0 5px var(--bg-2), 0 0 0 7px var(--line-2); }
  body.ab-page .rbn-tab.rbn-feature.active::after { display: none; }
}

/* ── Installed app ───────────────────────────────────────────────── */
@media (display-mode: standalone) {
  body.home .rs-hide-app { display: none !important; }
  body.home #tools { padding-top: 32px; }
  [data-install-app], #pwa-install-banner { display: none !important; }
  /* No website chrome in the app: the status strip and the studio call to action go, and the tab bar carries the navigation. */
  .ab-strip, .ab-nav .nav-cta-btn { display: none !important; }
  body.home #tools .ab-sh .ab-num { display: none; }
}

/* ── Arabic ──────────────────────────────────────────────────────── */
html[lang="ar"] body.ab-page { font-family: var(--arabic); font-size: 17px; line-height: 1.7; letter-spacing: 0; }
html[lang="ar"] body.ab-page * { letter-spacing: 0; }
html[lang="ar"] .ab-h1 { font-size: clamp(28px, 2.5vw, 36px); line-height: 1.3; font-weight: 700; font-variation-settings: normal; text-transform: none; }
html[lang="ar"] .ab-h2, html[lang="ar"] .ab-h3, html[lang="ar"] .ab-inst-name, html[lang="ar"] .ab-sample-head { letter-spacing: 0; font-weight: 700; }
html[lang="ar"] .ab-mono, html[lang="ar"] .ab-kicker, html[lang="ar"] .ab-note, html[lang="ar"] .ab-tag, html[lang="ar"] .ab-strip-in, html[lang="ar"] .ab-panel-head, html[lang="ar"] .ab-tb-k, html[lang="ar"] .ab-tb-bottom, html[lang="ar"] .ab-fig-cap, html[lang="ar"] .ab-sign, html[lang="ar"] .ab-fleet-in, html[lang="ar"] .ab-tile-label, html[lang="ar"] .ab-table .ab-trow, html[lang="ar"] .ab-caption, html[lang="ar"] .ab-cmp-head, html[lang="ar"] .ab-sample-rows .ab-trow, html[lang="ar"] .ab-dim > span > b, html[lang="ar"] #check-app .ck-loading { font-family: var(--arabic); text-transform: none; letter-spacing: 0; font-size: 13px; }
html[lang="ar"] .ab-num, html[lang="ar"] .ab-cn, html[lang="ar"] .ab-node { font-family: var(--arabic); letter-spacing: 0; }
html[lang="ar"] .ab-lat, html[lang="ar"] .ab-response .ab-rows, html[lang="ar"] .ab-response .ab-panel-head { font-family: var(--mono); letter-spacing: 0.05em; text-transform: uppercase; direction: ltr; font-size: 12px; }
html[lang="ar"] .ab-fleet-in .ab-lat, html[lang="ar"] .ab-tb-v .ab-lat, html[lang="ar"] .ab-fig-go .ab-lat, html[lang="ar"] .ab-sign .ab-lat, html[lang="ar"] .ab-cmp-head .ab-lat, html[lang="ar"] .ab-show-note .ab-lat, html[lang="ar"] .ab-case .ab-lat { font-family: var(--sans); font-size: inherit; letter-spacing: 0; text-transform: none; }
html[lang="ar"] .ab-response .ab-rows { text-transform: none; letter-spacing: 0.02em; }
html[lang="ar"] .ab-response .ab-panel-head { text-align: left; }
html[lang="ar"] .ab-dim > span > b { left: auto; right: 50%; transform: translateX(50%); }
html[lang="ar"] .ab-btn, html[lang="ar"] .ab-nav .nav-cta-btn { font-weight: 600; }
html[lang="ar"] .ab-tile-value { font-family: var(--sans); }
html[lang="ar"] .ab-tile-value .ab-lat { font-family: var(--sans); font-size: inherit; letter-spacing: inherit; text-transform: none; }

/* ── Print ───────────────────────────────────────────────────────── */
@media print {
  .ab-head, .ab-title, .ab-after-form, .ab-skip, #pwa-install-banner, .cmd-palette-overlay { display: none !important; }
  body.ab-page { background: #fff; color: #000; }
}

/* Readout figures in the live panel's Lighthouse row: Latin digits keep the mono face, Arabic-Indic digits use the Arabic face. */
.ab-lh-vals { font-family: var(--mono); font-size: 12px; letter-spacing: 0.05em; color: var(--fg-2); }
html[lang="ar"] .ab-lh-vals { font-family: var(--arabic); letter-spacing: 0; font-size: 13px; }
.ab-lh-note { margin: 10px 0 0; font-size: 12px; line-height: 1.4; color: var(--fg-3); }

/* ── Values set deliberately: a value never breaks after its "·" ─────────────────
   .ab-g     one group of a "·" row. It never breaks inside; the row only breaks between groups.
   .ab-line  one set line of a title-block value, always on its own line.                   */
.ab-g { display: inline-block; white-space: nowrap; }
.ab-line { display: block; white-space: nowrap; }
.ab-line--sub { margin-top: 3px; font-family: var(--mono); font-size: 12px; font-weight: 400; letter-spacing: 0.02em; color: var(--fg-3); }
.ab-line--sub a, .ab-line--sub a:hover { color: var(--fg-3); }
.ab-line--sub a:hover { color: var(--signal); }
.ab-sep { margin-inline: 1px; color: var(--fg-3); }
.ab-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Status strip: four cells that size to what they hold; between groups is the only place they break. */
.ab-strip-in { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 28px; }
.ab-strip-in > span { white-space: normal; overflow: visible; text-overflow: clip; }
.ab-strip-in > span:last-child { text-align: end; }
.ab-strip-in > .ab-strip-phone { display: none; }
@media (min-width: 768px) and (max-width: 879px) { .ab-strip-gulf { display: none; } }
@media (max-width: 767px) {
  .ab-strip-in { display: block; }
  .ab-strip-in > span { display: none; text-align: start; }
  .ab-strip-in > .ab-strip-phone { display: block; }
}

/* Panel headers and figure captions: the two halves wrap as units. */
.ab-panel-head { flex-wrap: wrap; gap: 4px 12px; }
.ab-panel-head > span { overflow: visible; text-overflow: clip; white-space: normal; }
.ab-fig-cap { flex-wrap: wrap; gap: 2px 12px; }
.ab-sign > span, .ab-note { max-width: 100%; }

/* ── Title block: unequal columns, nothing wraps ─────────────────── */
.ab-tb { display: grid; grid-template-columns: repeat(3, 1fr); border-inline-start: 1px solid var(--line); }

@media (max-width: 767px) { .ab-tb { grid-template-columns: 1fr 1.5fr; } }
.ab-tb-cell { padding: 14px 16px; }
.ab-tb-k { font-family: var(--mono); font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--fg-3); }
.ab-tb-v { overflow-wrap: normal; white-space: nowrap; }
.ab-tb-links { display: block; }
.ab-tb-links a { display: inline; }
html[lang="ar"] .ab-tb-k { font-family: var(--arabic); letter-spacing: 0; text-transform: none; font-size: 13px; }
@media (max-width: 767px) { .ab-tb-cell { padding: 12px 12px; } .ab-tb-v { font-size: 14px; } }

/* Title block, final sizes: values 14px so the Links line fits, tracks keep their content width. */
.ab-tb-cell { min-width: min-content; padding: 14px 12px; }
.ab-tb-v { font-size: 14px; }
@media (max-width: 767px) {
  .ab-tb { grid-template-columns: repeat(2, 1fr); }
  .ab-tb-cell:nth-child(n+5) { grid-column: 1 / -1; }
  .ab-tb-cell { padding: 12px 12px; }
}
html[lang="ar"] .ab-line--sub:not(.ab-lat) { font-family: var(--arabic); font-size: 13px; letter-spacing: 0; }
html[lang="ar"] .ab-tb-bottom .ab-lat { text-transform: none; }

/* The English hero breaks after its comma; on a phone the first line has to fit the column. */
@media (max-width: 430px) { .ab-h1--upper { font-size: clamp(28px, calc((100vw - 48px) * 0.107), 40px); } }

/* Status strip, final: the identity line only. The self-audit badge is dropped
   everywhere (already shown in the live panel and the Checked-by row), and the
   whole bar is hidden on phones, where it would otherwise carry only that badge. */
.ab-strip-in { justify-content: space-between; }
.ab-strip-in > span:last-child { text-align: end; }
.ab-strip-right .ab-dot { margin-inline-end: 6px; }
.ab-strip-in > .ab-strip-right { display: none !important; }
@media (max-width: 767px) {
  .ab-strip-in { display: block; }
  .ab-strip-in > span { display: block; text-align: start; }
  .ab-strip-in > span:last-child { text-align: start; }
}

/* Status strip states, written by ab-status.js only from a fresh monitor reading. */
.ab-st--up { color: var(--signal); }
.ab-st--degraded { color: var(--warn); }
.ab-st--down { color: var(--bad); }
.ab-st .ab-dot { margin-inline-end: 6px; }
.ab-st--up .ab-dot { background: var(--signal); }
.ab-st--degraded .ab-dot { background: var(--warn); }
.ab-st--down .ab-dot { background: var(--bad); }

/* The Location cell's second line is a sentence, not a code: the body face, not the mono one. */
.ab-line--sub.ab-line--text { font-family: var(--sans); font-size: 13px; font-weight: 500; letter-spacing: 0; }
html[lang="ar"] .ab-line--sub.ab-line--text { font-family: var(--arabic); }
/* Six columns from 1180px (the six values need 1,126px there); 3 x 2 below, with the middle column wide enough for the Location line. */
.ab-tb { grid-template-columns: 1fr 1.7fr 1.3fr; }
@media (min-width: 1180px) { .ab-tb { grid-template-columns: 1fr 0.9fr 1.1fr 1.3fr 2.1fr 1.2fr; } }
@media (max-width: 767px) { .ab-tb { grid-template-columns: repeat(2, 1fr); } }

@media (min-width: 768px) and (max-width: 899px) { .ab-tb-cell { padding-inline: 10px; } }

/* ── Hero and check headlines ────────────────────────────────────── */
@media (max-width: 430px) { #hero-heading.ab-h1--upper { font-size: clamp(28px, 7.6vw, 32px); } }
@media (max-width: 767px) { .ab-nav { max-height: 100dvh; overflow-y: auto; } }
@media (min-width: 961px) { .ab-hero-grid { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); } }
#hero-heading.ab-h1 { text-wrap: wrap; }
@media (max-width: 1023px) { #hero-heading.ab-h1 { text-wrap: balance; } }

/* ── Signature: hero band ────────────────────────────────────────── */
.ab-hero { background: var(--bg-deep); }
.ab-hero .ab-dim > span > b { background: var(--bg-deep); }
html[lang="ar"] .ab-lh-vals { word-spacing: 0.52em; }

/* ── Site map band: a health strip, one bar per page, the board list under it ── */
.ab-sitemap { background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding-block: 18px; }
.ab-hs { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0 32px; align-items: end; }
.ab-hs-head { align-self: center; }
.ab-hs-title { margin: 0; font-size: 15px; line-height: 1.4; font-weight: 500; color: var(--fg); white-space: nowrap; }
.ab-hs-line { margin: 2px 0 0; font-family: var(--mono); font-size: 12px; letter-spacing: 0.05em; color: var(--fg-3); line-height: 1.5; white-space: nowrap; }
.ab-hs-line .ab-dot { width: 7px; height: 7px; margin-inline-end: 6px; }
.ab-hs-strip { position: relative; min-width: 0; max-width: 100%; justify-self: start; }
.ab-hs-labels { display: flex; gap: 20px; margin-bottom: 4px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--fg-3); line-height: 1.2; }
.ab-hs-labels span { flex: 0 0 auto; width: calc(var(--n, 1) * 9px + (var(--n, 1) - 1) * 4px); white-space: nowrap; }
.ab-hs-bars { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 20px; }
.ab-hs-group { display: flex; align-items: flex-end; gap: 4px; flex: 0 0 auto; height: 32px; }
.ab-hs-bar { display: block; flex: 0 0 9px; width: 9px; height: calc(32px * var(--h, 1)); border-radius: 1px; background: var(--signal); opacity: 0.45; transform-origin: bottom; }
.ab-hs-bar--warn { background: var(--warn); }
.ab-hs-bar--fail { background: var(--bad); }
.ab-hs-bar--none { background: var(--fg-3); opacity: 0.5; }
.ab-hs-group:hover .ab-hs-bar, .ab-hs-group:focus-within .ab-hs-bar, .ab-hs-group:has(.is-chip) .ab-hs-bar { opacity: 0.7; }
.ab-hs-group .ab-hs-bar:hover, .ab-hs-group .ab-hs-bar:focus-visible, .ab-hs-group .ab-hs-bar.is-chip { opacity: 1; outline: none; }
.ab-hs-bar:focus-visible { box-shadow: 0 0 0 2px var(--bg-2), 0 0 0 4px var(--signal); }
.ab-hs-chip { position: absolute; bottom: 38px; padding: 5px 8px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; white-space: nowrap; color: var(--fg); background: var(--bg-deep); border: 1px solid var(--line-2); border-radius: var(--r); pointer-events: none; transform: translateX(-50%); z-index: 2; }
html[lang="ar"] .ab-hs-chip { font-family: var(--arabic); letter-spacing: 0; font-size: 12px; }
.ab-hs-side { align-self: center; }
.ab-hs-all { font: inherit; font-size: 13px; font-weight: 500; color: var(--signal); background: none; border: 0; padding: 6px 0; cursor: pointer; white-space: nowrap; }
.ab-hs-all:hover { color: var(--fg); }
.ab-hs-all:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; border-radius: var(--r); }
.ab-hs-list { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.25s ease; }
.ab-hs-list-in { overflow: hidden; visibility: hidden; transition: visibility 0s 0.25s; }
.ab-hs-list[data-open] { grid-template-rows: 1fr; }
.ab-hs-list[data-open] .ab-hs-list-in { visibility: visible; transition-delay: 0s; }
.ab-hs-list[data-open] .ab-sm-grid { margin-top: 22px; }
html:not(.ab-js) .ab-hs-list { grid-template-rows: 1fr; }
html:not(.ab-js) .ab-hs-list-in { visibility: visible; }
html:not(.ab-js) .ab-hs-all { display: none; }
.ab-hs-foot { padding-top: 10px; }
.ab-hs-note { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--fg-3); }
html[lang="ar"] .ab-hs-labels { font-family: var(--arabic); font-size: 13px; letter-spacing: 0; text-transform: none; }
html[lang="ar"] .ab-hs-line { font-family: var(--arabic); font-size: 13px; letter-spacing: 0; }
@media (max-width: 1179px) { .ab-hs-labels { display: none; } }
@media (max-width: 767px) {
  .ab-sitemap { padding-block: 16px; }
  .ab-hs { grid-template-columns: 1fr; gap: 10px; }
  .ab-hs-title, .ab-hs-line { white-space: normal; }
  .ab-hs-strip { justify-self: stretch; }
  .ab-hs-group { gap: 3px; height: 24px; }
  .ab-hs-bar { flex-basis: 5px; width: 5px; height: calc(24px * var(--h, 1)); }
  .ab-hs-chip { bottom: calc(100% + 6px); }
  .ab-hs-side { align-self: start; }
  .ab-hs-foot { display: none; }
}
/* ── Live moments (ab-boot.js, ab-work.js) ─────────────────────────────── */
/* Boot: the panel's rows and tiles wait, then lock in one by one. */
.ab-live { position: relative; }
html.ab-booting .ab-live .ab-tile, html.ab-booting .ab-live .ab-panel-row, html.ab-booting .ab-response .ab-row { visibility: hidden; }
html.ab-booting .ab-live .ab-tile.is-in, html.ab-booting .ab-live .ab-panel-row.is-in, html.ab-booting .ab-response .ab-row.is-in { visibility: visible; animation: ab-lock 180ms ease-out both; }
@keyframes ab-lock { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
.ab-boot-line { position: absolute; inset-inline: 16px; top: 54px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--fg-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[lang="ar"] .ab-boot-line { font-family: var(--arabic); letter-spacing: 0; text-transform: none; }
/* Instrument field: the fleet steps back while a domain is being typed. */
.ab-live .ab-panel-head.is-ready { flex-wrap: nowrap; }
.ab-live .ab-panel-head.is-ready > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ab-live .ab-panel-head.is-ready > span + span { display: none; }
.ab-fleet { transition: opacity 0.3s ease; }
.ab-fleet.is-dim { opacity: 0.55; }
/* Fleet dots: 6 px, the monitor's reading; a slow breath only while online. */
.ab-fleet-dot { width: 6px; height: 6px; margin-inline-end: 8px; vertical-align: 1px; }
.ab-fleet-dot.is-live { animation: ab-breathe 3s ease-in-out infinite; }
@keyframes ab-breathe { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
/* Dimension lines draw from the centre as they come into view. */
html.ab-draw .ab-dim > span { border-top-color: transparent; }
html.ab-draw .ab-dim > span::before, html.ab-draw .ab-sh::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; transform: scaleX(0); transform-origin: center; transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
html.ab-draw .ab-dim > span::before { top: -1px; background: var(--line-2); }
html.ab-draw .ab-sh { position: relative; border-bottom-color: transparent; }
html.ab-draw .ab-sh::after { bottom: -1px; background: var(--rule); }
html.ab-draw .ab-dim.is-in > span::before, html.ab-draw .ab-sh.is-in::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  .ab-fleet-dot.is-live { animation: none; }
  html.ab-draw .ab-dim > span::before, html.ab-draw .ab-sh::after { transform: none; transition: none; }
}
/* Draw-in: once a session on pointer screens, bars rise left to right. */
@media (pointer: fine) and (prefers-reduced-motion: no-preference) {
  html.ab-hs-draw .ab-hs-bar { animation: ab-hs-rise 700ms cubic-bezier(0.2, 0.7, 0.2, 1) both; animation-delay: calc(var(--i, 0) * 12ms); will-change: transform; }
}
@keyframes ab-hs-rise { from { transform: scaleY(0); } to { transform: none; } }
/* The list keeps the status board's rows */
.ab-sm-cap { margin: 0; padding-bottom: 8px; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--fg-3); line-height: 1.5; }
html[lang="ar"] .ab-sm-cap { font-family: var(--arabic); font-size: 13px; letter-spacing: 0; text-transform: none; }
.ab-sm-grid { display: grid; grid-template-columns: 1.2fr 1fr 1.6fr 0.8fr; gap: 24px 32px; margin-top: 22px; }
.ab-sm-col { min-width: 0; }
.ab-sm-list { list-style: none; margin: 0; padding: 0; }
.ab-sm-row { display: flex; align-items: center; gap: 10px; padding: 6px 4px; border-bottom: 1px solid var(--bg-3); font-size: 14px; line-height: 1.4; color: var(--fg-2); text-decoration: none; }
.ab-sm-list li:last-child .ab-sm-row { border-bottom: 0; }
.ab-sm-row .ab-dot { flex: none; width: 7px; height: 7px; margin: 0; }
.ab-dot--none { background: var(--fg-3); }
.ab-sm-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ab-sm-count { flex: none; font-family: var(--mono); font-size: 11px; letter-spacing: 0.05em; color: var(--fg-3); }
.ab-sm-row:hover { background: var(--bg-3); color: var(--fg); }
.ab-sm-row:hover .ab-sm-name { color: var(--fg); }
.ab-sm-row:focus-visible { outline: 2px solid var(--signal); outline-offset: -2px; border-radius: var(--r); }
html[lang="ar"] .ab-sm-cap { font-family: var(--arabic); font-size: 13px; letter-spacing: 0; text-transform: none; }
html[lang="ar"] .ab-sm-count { font-family: var(--arabic); font-size: 12px; letter-spacing: 0; }
@media (min-width: 768px) and (max-width: 1023px) { .ab-sm-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 767px) { .ab-sm-grid { grid-template-columns: 1fr; gap: 16px; } }
.ab-also { margin-top: 8px; font-size: 14px; color: var(--fg-3); }
.ab-also a { color: var(--fg-2); text-decoration: underline; text-underline-offset: 3px; }
.ab-also a:hover { color: var(--signal); }
/* ── Website check: the page on the home page's grid ─────────────── */
body.ab-page.check-page .pl-main { max-width: none; width: 100%; padding: 0; }
body.ab-page.check-page .pd--check, body.ab-page.check-page .ck-cta, body.ab-page.check-page .ck-audit, body.ab-page.check-page .ck-watch--out { max-width: none; }
.ab-inspect-grid { display: grid; gap: 40px 48px; align-items: start; }
@media (min-width: 1024px) { .ab-inspect-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.ab-inspect-copy { min-width: 0; }
.ab-inspect-panel { min-width: 0; }
.ab-check-panel .ab-cp-lead { padding: 16px; border-bottom: 1px solid var(--line); }
.ab-check-panel .ab-cp-lead b { display: block; font-size: 18px; line-height: 1.3; font-weight: 700; color: var(--fg); }
.ab-check-panel .ab-cp-lead p { margin: 6px 0 0; font-size: 13px; color: var(--fg-3); }
.ab-cp-row { display: flex; justify-content: space-between; gap: 16px; padding: 13px 16px; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--fg-2); }
.ab-cp-row:last-child { border-bottom: 0; }
.ab-cp-row > span:last-child { font-family: var(--mono); font-size: 13px; }
html[lang="ar"] .ab-cp-row > span:last-child { font-family: var(--arabic); }

/* Compare: two equal columns inside the container, one divider between them */
.ab-compare { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ab-cmp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ab-cmp { display: flex; flex-direction: column; padding: 40px 40px 40px 0; border-inline-end: 1px solid var(--line); }
.ab-cmp:last-child { padding-inline: 40px 0; border-inline-end: 0; }
.ab-cmp-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; font-size: 13px; }
.ab-cmp .ab-h2 { margin-top: 14px; font-size: 28px; line-height: 1.15; }
.ab-cmp-list { margin: 24px 0 28px; display: grid; gap: 0; }
.ab-cmp-list li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 0 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.ab-cmp-list li:first-child { padding-top: 0; }
.ab-cmp-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.ab-cmp-list .ab-cn { padding-top: 3px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.05em; color: var(--signal); }
.ab-cl b { display: block; font-size: 16px; line-height: 1.35; font-weight: 600; color: var(--fg); }
.ab-cl > span { display: block; margin-top: 2px; font-size: 15px; line-height: 1.5; color: var(--fg-2); }
.ab-cmp-foot { margin: auto 0 0; padding-top: 4px; font-size: 14px; color: var(--fg-3); }
.ab-cmp .ab-btn { margin-top: auto; align-self: flex-start; }
@media (max-width: 767px) {
  .ab-cmp-grid { grid-template-columns: 1fr; }
  .ab-cmp, .ab-cmp:last-child { padding-inline: 0; border-inline-end: 0; }
  .ab-cmp:first-child { border-bottom: 1px solid var(--line); }
  .ab-cmp .ab-h2 { font-size: 24px; }
}

/* Samples: the free check as the live components build it, the audit's first page beside it */
.ab-sample { content-visibility: auto; contain-intrinsic-size: auto 1000px; }
.ab-samples { display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 1fr); gap: 32px; margin-top: 36px; align-items: start; }
.ab-sample-block { border: 1px solid var(--line); border-radius: var(--r-card); background: var(--bg-2); overflow: hidden; }
.ab-sample-head { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 16px; padding: 12px 16px; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--fg-2); line-height: 1.5; }
html[lang="ar"] .ab-sample-head { font-family: var(--arabic); font-size: 13px; letter-spacing: 0; text-transform: none; }
.ab-sample-free { max-height: 620px; overflow: auto; padding: 8px 16px 16px; overscroll-behavior: contain; }
.ab-sample-free:focus-visible { outline: 2px solid var(--signal); outline-offset: -2px; }
.ab-sample-free .rp-panel { margin: 0 0 12px; padding: 16px 18px 18px; border-radius: 16px; }
.ab-sample-free .rp-panel header { padding-bottom: 2px; }
.ab-sample-free .rp-bar { margin: 10px 0 14px; height: 5px; }
.ab-sample-free .rp-panels { columns: 1; }
.ab-sample-free .rp-strips { grid-template-columns: 1fr; }
.ab-sample-audit { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 24px; align-items: start; padding: 20px 16px; }
.ab-sample-pdf { display: block; border: 1px solid var(--line-2); border-radius: var(--r); overflow: hidden; background: #fff; }
.ab-sample-pdf img { display: block; width: 100%; height: auto; }
.ab-sample-pdf:hover { border-color: var(--fg-3); }
.ab-sample-audit-copy p { margin: 0 0 14px; font-size: 15px; line-height: 1.5; color: var(--fg-2); }
.ab-sample-audit-copy .ab-sample-facts { font-family: var(--mono); font-size: 12px; letter-spacing: 0.05em; color: var(--fg-3); }
html[lang="ar"] .ab-sample-audit-copy .ab-sample-facts { font-family: var(--arabic); font-size: 13px; letter-spacing: 0; }
.ab-link { color: var(--signal); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.ab-link:hover { color: var(--fg); }
@media (max-width: 1023px) { .ab-samples { grid-template-columns: 1fr; } .ab-sample-free { max-width: 560px; } }
@media (min-width: 1024px) and (max-width: 1279px), (max-width: 767px) { .ab-sample-audit { grid-template-columns: 1fr; } .ab-sample-pdf { max-width: 260px; } }
@media (max-width: 560px) { #check-app .ck-row input { flex: none; width: 100%; } }

/* The report's own surfaces, on screen, take the theme's tokens (print keeps its paper) */
@media screen {
  body.ab-page.check-page .rp-host, body.ab-page.check-page .rp-setup dd, body.ab-page.check-page .rp .rp-h, body.ab-page.check-page .rp-checks .rp-x, body.ab-page.check-page .rp-scoped--risk b { color: var(--fg); }
  body.ab-page.check-page .rp-sub, body.ab-page.check-page .rp h4, body.ab-page.check-page .rp-score > span:last-child, body.ab-page.check-page .rp-note, body.ab-page.check-page .rp-setup dt, body.ab-page.check-page .rp-checks small, body.ab-page.check-page .pd-eyebrow { color: var(--fg-3); }
  body.ab-page.check-page .rp-checks li, body.ab-page.check-page .rp-scoped span, body.ab-page.check-page .rp-verdict span { color: var(--fg-2); }
  body.ab-page.check-page .rp-panel, body.ab-page.check-page .rp-strip { background: var(--bg-3); border-color: var(--line); }
  body.ab-page.check-page .rp-ring { background: conic-gradient(var(--tone) calc(var(--v) * 1%), var(--line) 0); }
  body.ab-page.check-page .rp-ring::before { background: var(--bg-3); }
  body.ab-page.check-page .rp-bar { background: var(--line); }
  body.ab-page.check-page .rp-count--good { background: rgba(111, 216, 179, 0.12); color: var(--signal); }
  body.ab-page.check-page .rp-count--ok { background: rgba(245, 177, 75, 0.12); color: var(--warn); }
  body.ab-page.check-page .rp-count--poor { background: rgba(248, 113, 113, 0.12); color: var(--bad); }
  body.ab-page.check-page .rp-scoped--good, body.ab-page.check-page .rp-verdict--good { background: rgba(111, 216, 179, 0.08); border-color: rgba(111, 216, 179, 0.3); border-inline-start-color: var(--signal); }
  body.ab-page.check-page .rp-scoped--good b, body.ab-page.check-page .rp-verdict--good b { color: var(--signal); }
  body.ab-page.check-page .rp-scoped--attention, body.ab-page.check-page .rp-verdict--attention { background: rgba(245, 177, 75, 0.08); border-color: rgba(245, 177, 75, 0.3); border-inline-start-color: var(--warn); }
  body.ab-page.check-page .rp-scoped--attention b, body.ab-page.check-page .rp-verdict--attention b { color: var(--warn); }
  body.ab-page.check-page .rp-scoped--risk, body.ab-page.check-page .rp-verdict--risk { background: rgba(248, 113, 113, 0.08); border-color: rgba(248, 113, 113, 0.3); border-inline-start-color: var(--bad); }
  body.ab-page.check-page .rp-verdict--risk b { color: var(--bad); }
  body.ab-page.check-page .rp-scoped .rp-scoped-serious { color: var(--bad); }
  body.ab-page.check-page .rp-group--fix, body.ab-page.check-page .rp-group--fix span { color: var(--warn); }
  body.ab-page.check-page .rp-group--fix span { background: rgba(245, 177, 75, 0.12); }
  body.ab-page.check-page .rp-group--good, body.ab-page.check-page .rp-group--good span { color: var(--signal); }
  body.ab-page.check-page .rp-group--good span { background: rgba(111, 216, 179, 0.12); }
  body.ab-page.check-page .rp-stack .rp-panel, body.ab-page.check-page .rp-find, body.ab-page.check-page .rp-notes, .ab-sample-free .rp-panel { background: var(--bg-3); border-block-color: var(--line); border-inline-end-color: var(--line); box-shadow: none; }
  body.ab-page.check-page .rp-stack .rp-panel, body.ab-page.check-page .rp-notes, .ab-sample-free .rp-panel { border-color: var(--line); }
  body.ab-page.check-page .rp-box--fix { background: rgba(245, 177, 75, 0.06); border-color: rgba(245, 177, 75, 0.25); }
  body.ab-page.check-page .rp-box--good { background: rgba(111, 216, 179, 0.05); border-color: rgba(111, 216, 179, 0.2); }
  body.ab-page.check-page .rp-box .rp-group { border-bottom-color: var(--line); }
  body.ab-page.check-page .rp-find-head b { color: var(--fg); }
  body.ab-page.check-page .rp-find-text, body.ab-page.check-page .rp-notes p { color: var(--fg-2); }
  body.ab-page.check-page .rp-find-n { background: var(--bg-2); color: var(--fg-2); }
  body.ab-page.check-page .rp-evidence { background: var(--bg-2); border-color: var(--line-2); }
  body.ab-page.check-page .rp-evidence b { color: var(--warn); }
  body.ab-page.check-page .rp-evidence code { color: var(--fg-2); }
  body.ab-page.check-page .rp-find--critical .rp-sev, body.ab-page.check-page .rp-find--high .rp-sev { background: rgba(248, 113, 113, 0.14); color: var(--bad); }
  body.ab-page.check-page .rp-find--med .rp-sev { background: rgba(245, 177, 75, 0.14); color: var(--warn); }
  body.ab-page.check-page .rp-find .rp-sev { background: rgba(111, 155, 194, 0.16); color: #9FC3E6; }
  body.ab-page.check-page .rp-box--why { background: var(--bg-2); border-color: var(--line-2); }
  body.ab-page.check-page .rp-finds .rp-box--why .rp-find-text { color: var(--fg-2); }
  body.ab-page.check-page .rp-group--why { color: var(--fg-3); }
  body.ab-page.check-page .ck-scope { background: var(--bg-3); border-color: var(--line); }
  body.ab-page.check-page .ck-scope > h3 { color: var(--fg); }
  body.ab-page.check-page .ck-scope-col--yes > b { color: var(--signal); }
  body.ab-page.check-page .ck-scope-col--no > b, body.ab-page.check-page .ck-scope-col--no li::before, body.ab-page.check-page .ck-scope-link { color: var(--warn); }
  body.ab-page.check-page .ck-scope-col p, body.ab-page.check-page .ck-scope-col--no li { color: var(--fg-2); }
  body.ab-page.check-page .ck-scope-more { background: rgba(245, 177, 75, 0.08); border-color: rgba(245, 177, 75, 0.3); color: var(--warn); }
  body.ab-page.check-page .ck-scope-compare { color: var(--fg-3); }
  body.ab-page.check-page .ck-report-head { border-bottom-color: var(--line); }
  body.ab-page.check-page .ck-report-brand b, body.ab-page.check-page .pd-brand b { color: var(--fg); }
  body.ab-page.check-page .ck-report-brand small, body.ab-page.check-page .pd-brand small { color: var(--fg-3); }
}
.ab-sample .ab-small { margin-top: 24px; }
.ab-inspect .ab-facts { margin-top: 12px; }

/* ── Title block, Location line 2: country links; the tail drops to its own line when the cell is narrow ── */
.ab-line--sub .ab-g { white-space: nowrap; }
.ab-g--tail { display: block; }
.ab-g--tail .ab-sep { display: none; }
@media (max-width: 767px) {
  .ab-line--sub .ab-g { display: block; }
  .ab-line--sub .ab-g .ab-sep { display: none; }
  /* Footer location: let the serving countries flow inline with their "·" and wrap
     naturally instead of stacking into a dotless list; keep the tail on its own line. */
  .ab-tb-v .ab-line--text .ab-g { display: inline-block; }
  .ab-tb-v .ab-line--text .ab-g .ab-sep { display: inline; }
  .ab-tb-v .ab-line--text .ab-g--tail { display: block; }
  .ab-tb-v .ab-line--text .ab-g--tail .ab-sep { display: none; }
}
@media (min-width: 1180px) { .ab-tb { grid-template-columns: 1fr 0.9fr 1.1fr 1.3fr 2.1fr max-content; } }

/* ── Public reading pages on the site's container: the planner and the example report ── */
body.ab-fam-plan .pl-main, body.ab-wide .pl-main { max-width: var(--wrap); padding-inline: var(--gutter); }
body.ab-wide .pl-main { padding-block: 40px 56px; }
.ab-sample-head > span, .ab-panel-head > span { white-space: nowrap; }
@media (max-width: 767px) { .ab-facts .ab-g { display: block; } .ab-facts .ab-g .ab-sep { display: none; } }
/* Section-head notes flow inline and wrap between groups (keeping the "·"), so
   short notes sit on one line instead of stacking into a dotless list. */
@media (max-width: 767px) { .ab-sh .ab-note .ab-g { display: inline-block; } .ab-sh .ab-note .ab-g .ab-sep { display: inline; } }
@media (max-width: 767px) { .ab-offline .ab-tb-bottom .ab-g { display: block; } .ab-offline .ab-tb-bottom .ab-g .ab-sep { display: none; } }
main h1, main h2, .ab-hero h1 { text-wrap: balance; }
html[dir="rtl"] body.ab-page:not(.home) #main-nav .nav-links { margin: 0; }

/* On a phone the strip is one line: the studio's name is in the bar just below it. */
@media (max-width: 767px) { .ab-strip { display: none !important; } }

/* Running text and subtitles fill the line normally and only tidy the last line
   to avoid a lone word (pretty); headings still balance into even lines. */
p, li, dd, dt, figcaption, td, th, small, summary, h3 { text-wrap: pretty; }
.gd-sub, .rs-tl-sub, .tool-header-subtitle, .pl-sub, .ck-sub, .rs-hero-lede, .ab-lede, .art-lede { text-wrap: pretty; }

/* Work the browser does not need until you get there: the closed page list is not laid out, and the
   sections below the first screen are laid out when they come near it. */
.ab-hs-list:not([data-open]) .ab-hs-list-in { content-visibility: hidden; }
main > .ab-sec { content-visibility: auto; contain-intrinsic-size: auto var(--ab-h, 480px); }
main > .ab-sec:first-child { content-visibility: visible; }
/* The page name inside each bar is text for crawlers and screen readers, not for the eye */
.ab-hs-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ab-sitemap, .ab-fleet { content-visibility: auto; }
.ab-sitemap { contain-intrinsic-size: auto 151px; }
.ab-fleet { contain-intrinsic-size: auto 122px; }
@media (min-width: 600px) { .ab-fleet { contain-intrinsic-size: auto 90px; } }
@media (min-width: 768px) { .ab-sitemap { contain-intrinsic-size: auto 110px; } }
@media (min-width: 1024px) { .ab-sitemap { contain-intrinsic-size: auto 85px; } .ab-fleet { contain-intrinsic-size: auto 58px; } }
/* Room kept for a section until it is first drawn: its real height, following the page width in each range */
#services { --ab-h: calc(-80.02vw + 2221px); } #work { --ab-h: calc(17.15vw + 784px); } #process { --ab-h: calc(-166.06vw + 2243px); } #tools { --ab-h: calc(-41.67vw + 1307px); } #plans { --ab-h: calc(-64.52vw + 870px); } #contact { --ab-h: calc(-128.85vw + 2093px); }
@media (min-width: 600px) { #services { --ab-h: calc(-422.72vw + 4278px); } #work { --ab-h: calc(25.11vw + 737px); } #process { --ab-h: calc(-258.80vw + 2801px); } #tools { --ab-h: calc(-277.32vw + 2721px); } #plans { --ab-h: 483px; } #contact { --ab-h: calc(-84.93vw + 1831px); } }
@media (min-width: 768px) { #services { --ab-h: calc(-78.15vw + 1596px); } #work { --ab-h: calc(71.74vw + 531px); } #process { --ab-h: calc(18.93vw + 670px); } #tools { --ab-h: 555px; } #plans { --ab-h: 483px; } #contact { --ab-h: calc(-158.78vw + 2399px); } }
@media (min-width: 900px) { #services { --ab-h: 894px; } #work { --ab-h: calc(-457.62vw + 5295px); } #process { --ab-h: 841px; } #tools { --ab-h: calc(-18.90vw + 725px); } #plans { --ab-h: calc(-126.63vw + 1623px); } #contact { --ab-h: calc(-188.62vw + 2669px); } }
@media (min-width: 1024px) { #services { --ab-h: calc(-106.78vw + 1987px); } #work { --ab-h: calc(-5.84vw + 674px); } #process { --ab-h: calc(-18.39vw + 740px); } #tools { --ab-h: calc(-8.06vw + 509px); } #plans { --ab-h: calc(-37.14vw + 708px); } #contact { --ab-h: calc(-15.06vw + 893px); } }
@media (min-width: 1280px) { #services { --ab-h: 621px; } #work { --ab-h: 599px; } #process { --ab-h: 505px; } #tools { --ab-h: 406px; } #plans { --ab-h: 233px; } #contact { --ab-h: 701px; } }
html[lang="ar"] #services { --ab-h: calc(-92.30vw + 2285px); } html[lang="ar"] #work { --ab-h: calc(27.17vw + 733px); } html[lang="ar"] #process { --ab-h: calc(-199.20vw + 2446px); } html[lang="ar"] #tools { --ab-h: calc(-73.12vw + 1581px); } html[lang="ar"] #plans { --ab-h: calc(-25.50vw + 702px); } html[lang="ar"] #contact { --ab-h: calc(-110.94vw + 1787px); }
@media (min-width: 600px) { html[lang="ar"] #services { --ab-h: calc(-426.72vw + 4293px); } html[lang="ar"] #work { --ab-h: calc(38.19vw + 667px); } html[lang="ar"] #process { --ab-h: calc(-254.73vw + 2782px); } html[lang="ar"] #tools { --ab-h: calc(-293.89vw + 2906px); } html[lang="ar"] #plans { --ab-h: calc(-52.21vw + 862px); } html[lang="ar"] #contact { --ab-h: calc(-21.56vw + 1252px); } }
@media (min-width: 768px) { html[lang="ar"] #services { --ab-h: calc(-42.20vw + 1300px); } html[lang="ar"] #work { --ab-h: calc(71.74vw + 568px); } html[lang="ar"] #process { --ab-h: calc(44.11vw + 489px); } html[lang="ar"] #tools { --ab-h: 586px; } html[lang="ar"] #plans { --ab-h: 462px; } html[lang="ar"] #contact { --ab-h: calc(-158.78vw + 2306px); } }
@media (min-width: 900px) { html[lang="ar"] #services { --ab-h: 920px; } html[lang="ar"] #work { --ab-h: calc(-469.45vw + 5439px); } html[lang="ar"] #process { --ab-h: calc(-23.49vw + 1097px); } html[lang="ar"] #tools { --ab-h: 586px; } html[lang="ar"] #plans { --ab-h: calc(-150.64vw + 1817px); } html[lang="ar"] #contact { --ab-h: calc(-188.62vw + 2576px); } }
@media (min-width: 1024px) { html[lang="ar"] #services { --ab-h: calc(-109.87vw + 2045px); } html[lang="ar"] #work { --ab-h: calc(2.35vw + 612px); } html[lang="ar"] #process { --ab-h: calc(-10.15vw + 662px); } html[lang="ar"] #tools { --ab-h: calc(-8.82vw + 541px); } html[lang="ar"] #plans { --ab-h: calc(1.06vw + 266px); } html[lang="ar"] #contact { --ab-h: calc(3.18vw + 614px); } }
@media (min-width: 1280px) { html[lang="ar"] #services { --ab-h: 640px; } html[lang="ar"] #work { --ab-h: 642px; } html[lang="ar"] #process { --ab-h: 532px; } html[lang="ar"] #tools { --ab-h: 428px; } html[lang="ar"] #plans { --ab-h: 279px; } html[lang="ar"] #contact { --ab-h: 655px; } }

/* ── Illustrations ───────────────────────────────────────────────────
   Line drawings in the page's own ink and accent, so they follow the chosen style. */
.ab-ill { display: block; width: 96px; height: 64px; margin-bottom: 18px; fill: none; stroke: var(--fg-3); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.ab-ill--icon { width: 28px; height: 28px; margin-bottom: 12px; stroke-width: 1.6; }
.ab-ill .k { stroke: var(--signal); }
.ab-ill .a { fill: var(--signal); stroke: none; }

/* ── Scope miniatures ─────────────────────────────────────────
   Each service shows a small working screen of what it produces, drawn from the
   page's own tokens so it follows the chosen style. Decorative: hidden from
   assistive technology, the heading and text beside it carry the meaning.
   Still, each one shows the moment that matters: the enquiry arrived, the job is
   done, the booking is paid. ab-boot.js sets ab-play when motion is welcome; then
   each screen acts that moment out, the way the real thing behaves, while it is
   on screen. The pointer and the payment sheet keep their real-world colours in
   every style. */
.ab-vg { --d: 10s; --vg-ease: cubic-bezier(0.45, 0, 0.2, 1); --vg-shadow: 0 1px 2px rgba(0, 0, 0, 0.14), 0 14px 26px -12px rgba(0, 0, 0, 0.5); position: relative; display: flex; gap: 10px; height: 124px; max-width: 340px; margin-bottom: 20px; padding: 12px; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-2); box-shadow: 0 14px 30px -24px rgba(0, 0, 0, 0.45); color: var(--fg-2); font-family: var(--sans); font-size: 11px; line-height: 1.3; }
html[lang="ar"] .ab-vg, .ab-vg [lang="ar"] { font-family: var(--arabic); }
html[lang="ar"] .ab-vg [lang="en"] { font-family: var(--sans); }
.ab-vg b { color: var(--fg); font-weight: 600; }
.ab-vg-sk { display: block; width: var(--w, 70%); height: 6px; flex: none; border-radius: 3px; background: var(--line-2); transform-origin: left center; }
html[dir="rtl"] .ab-vg-sk, .ab-vg [dir="rtl"] .ab-vg-sk { transform-origin: right center; }
.ab-vg-btn { position: relative; align-self: flex-start; padding: 4px 9px; border-radius: 6px; background: var(--signal); color: var(--on-signal); font-size: 10px; font-weight: 600; white-space: nowrap; }
.ab-vg-phone { position: relative; display: flex; flex-direction: column; width: 74px; overflow: hidden; border: 1px solid var(--line-2); border-radius: 12px; background: var(--bg); }
.ab-vg-spin { width: 9px; height: 9px; flex: none; border: 1.5px solid color-mix(in srgb, var(--on-signal) 35%, transparent); border-top-color: var(--on-signal); border-radius: 50%; }

/* stacked states: only one shows at a time */
.ab-vg-send, .ab-vg-pay, .ab-vg-flip, .ab-vg-count, .ab-vg-chip, .ab-vg-state, .ab-vg-sh-l, .ab-vg--care .ab-vg-toast, .ab-vg-slot { display: inline-grid; }
:is(.ab-vg-send, .ab-vg-pay, .ab-vg-flip, .ab-vg-count, .ab-vg-chip, .ab-vg-state, .ab-vg-sh-l, .ab-vg-slot) > span, .ab-vg--care .ab-vg-toast > .ab-vg-tl { grid-area: 1 / 1; }
:is(.ab-vg-send, .ab-vg-pay, .ab-vg-chip, .ab-vg-sh-l) > span { display: flex; align-items: center; justify-content: center; gap: 5px; white-space: nowrap; }

/* the notification a scene ends on */
.ab-vg-toast { position: absolute; z-index: 2; inset-inline-end: 10px; bottom: 10px; display: flex; align-items: center; gap: 8px; width: min(206px, calc(100% - 20px)); padding: 7px 10px 7px 7px; border: 1px solid var(--line); border-radius: 11px; background: var(--bg); box-shadow: var(--vg-shadow); opacity: 0; }
html[dir="rtl"] .ab-vg-toast { padding: 7px 7px 7px 10px; }
.ab-vg-toast > span, .ab-vg-tl > span, .ab-vg-note > span { flex: 1; min-width: 0; }
.ab-vg-toast b, .ab-vg-note b { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; font-size: 10.5px; line-height: 1.25; }
.ab-vg-toast em, .ab-vg-note em { flex: none; color: var(--fg-3); font-size: 8.5px; font-style: normal; font-weight: 400; }
.ab-vg-toast small { display: block; overflow: hidden; color: var(--fg-3); font-size: 9.5px; line-height: 1.3; white-space: nowrap; text-overflow: ellipsis; }
.ab-vg-ico { display: grid; width: 24px; height: 24px; flex: none; place-items: center; border-radius: 7px; background: var(--mint-soft); color: var(--signal); }
.ab-vg-ico svg, .ab-vg-tick, .ab-vg-sendb svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ab-vg-tick { width: 11px; height: 11px; flex: none; stroke-width: 2; }

/* the fingertip: it shows only while it touches, presses, and lifts away */
.ab-vg-hand { position: absolute; z-index: 5; top: 0; left: 0; width: 0; height: 0; opacity: 0; pointer-events: none; }
.ab-vg-ptr { position: absolute; top: -10px; left: -10px; width: 20px; height: 20px; border: 1.5px solid color-mix(in srgb, var(--fg) 38%, transparent); border-radius: 50%; background: color-mix(in srgb, var(--fg) 18%, transparent); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.22), inset 0 1px 2px rgba(255, 255, 255, 0.25); opacity: 0; }
.ab-vg-tap { position: absolute; top: -13px; left: -13px; width: 26px; height: 26px; border: 1.5px solid var(--signal); border-radius: 50%; opacity: 0; }

/* 1.1 Websites */
.ab-vg--web { padding-bottom: 0; }
.ab-vg-win { display: flex; flex: 1; flex-direction: column; min-width: 0; border: 1px solid var(--line-2); border-bottom: 0; border-radius: 8px 8px 0 0; background: var(--bg); }
.ab-vg-bar { position: relative; display: flex; align-items: center; gap: 4px; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.ab-vg-bar i { width: 5px; height: 5px; flex: none; border-radius: 50%; background: var(--line-2); }
.ab-vg-url { overflow: hidden; margin-inline-start: 6px; padding: 1px 8px; border-radius: 999px; background: var(--bg-3); color: var(--fg-3); font-family: var(--sans); font-size: 10px; white-space: nowrap; text-overflow: ellipsis; }
.ab-vg-fast { flex: none; margin-inline-start: auto; padding: 1px 6px; border: 1px solid color-mix(in srgb, var(--signal) 45%, transparent); border-radius: 999px; color: var(--signal); font-family: var(--mono); font-size: 9px; font-weight: 600; }
html[lang="ar"] .ab-vg-fast { font-family: var(--arabic); }
.ab-vg-load { position: absolute; inset-inline: 0; bottom: -1px; height: 2px; background: var(--signal); transform-origin: left center; opacity: 0; }
html[dir="rtl"] .ab-vg-load { transform-origin: right center; }
.ab-vg-page { display: flex; flex-direction: column; gap: 7px; padding: 12px 10px; }
.ab-vg-hero { display: block; overflow: hidden; font-size: 13px; letter-spacing: -0.01em; line-height: 1.2; white-space: nowrap; text-overflow: ellipsis; }
.ab-vg-send > span:not(:first-child) { opacity: 0; }
.ab-vg--web .ab-vg-toast { opacity: 1; }

/* 1.2 Web apps */
.ab-vg--app { gap: 0; padding: 0; }
.ab-vg-side { display: flex; flex: none; flex-direction: column; gap: 9px; width: 84px; padding: 14px 12px; border-inline-end: 1px solid var(--line); background: var(--bg-3); }
.ab-vg-side b { color: var(--signal); }
.ab-vg-inv { display: flex; align-items: center; gap: 5px; }
.ab-vg-count { min-width: 15px; height: 15px; padding: 0 3px; place-items: center; border-radius: 999px; background: var(--signal); color: var(--on-signal); font-size: 9px; font-style: normal; font-weight: 700; }
.ab-vg-count > span:first-child, .ab-vg-flip > span:first-child { opacity: 0; }
.ab-vg-main { display: flex; flex: 1; flex-direction: column; justify-content: center; min-width: 0; padding: 4px 12px; }
.ab-vg-row { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.ab-vg-row:last-child { border-bottom: 0; }
.ab-vg-row--edit::before { content: ""; position: absolute; inset: 1px -12px; background: var(--mint-soft); opacity: 0; }
.ab-vg-row > span { position: relative; }
.ab-vg-job { overflow: hidden; color: var(--fg-2); font-size: 10.5px; white-space: nowrap; text-overflow: ellipsis; }
.ab-vg-pill { flex: none; padding: 2px 8px; border: 1px solid var(--line-2); border-radius: 999px; font-size: 10px; white-space: nowrap; }
.ab-vg-pill.is-ok, .ab-vg-flip { border-color: color-mix(in srgb, var(--signal) 55%, transparent); color: var(--signal); }
.ab-vg-flip { justify-items: center; }
.ab-vg-row > .ab-vg-menu { position: absolute; z-index: 4; top: 50%; inset-inline-end: -4px; margin-top: -27px; display: flex; flex-direction: column; min-width: 92px; padding: 3px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); box-shadow: var(--vg-shadow); opacity: 0; transform-origin: right center; }
html[dir="rtl"] .ab-vg-row > .ab-vg-menu { transform-origin: left center; }
.ab-vg-menu span { display: flex; align-items: center; height: 15px; padding: 0 7px; border-radius: 5px; color: var(--fg); font-size: 9.5px; line-height: 1.25; }
.ab-vg--app .ab-vg-toast { bottom: 8px; }

/* 1.3 Mobile apps */
.ab-vg--mob { justify-content: center; gap: 16px; padding-bottom: 0; }
.ab-vg--mob .ab-vg-phone { align-self: flex-end; width: 100px; height: 108px; border-bottom: 0; border-radius: 14px 14px 0 0; }
.ab-vg-screens { display: flex; width: 200%; height: 100%; }
.ab-vg-scr { display: flex; width: 50%; flex-direction: column; gap: 7px; padding: 14px 10px; }
.ab-vg-scr small { color: var(--fg-3); font-size: 8.5px; line-height: 1.2; }
.ab-vg-h { font-size: 12px; }
.ab-vg-scr .ab-vg-btn { padding: 3px 6px; font-size: 9px; }
.ab-vg-prog { display: block; height: 4px; overflow: hidden; border-radius: 2px; background: var(--line); }
.ab-vg-prog i { display: block; height: 100%; border-radius: 2px; background: var(--signal); transform-origin: left center; }
.ab-vg [dir="rtl"] .ab-vg-prog i { transform-origin: right center; }
.ab-vg-note { position: absolute; z-index: 2; top: 5px; inset-inline: 4px; display: flex; align-items: flex-start; gap: 5px; padding: 5px 6px; border: 1px solid var(--line); border-radius: 9px; background: var(--bg-2); box-shadow: var(--vg-shadow); opacity: 0; }
.ab-vg-note b { font-size: 8px; }
.ab-vg-note em { font-size: 7px; }
.ab-vg-note small { display: block; color: var(--fg-2); font-size: 8px; line-height: 1.25; }
.ab-vg-app { width: 14px; height: 14px; flex: none; border-radius: 4px; background: linear-gradient(135deg, var(--signal), color-mix(in srgb, var(--signal) 55%, var(--fg))); }
.ab-vg-scr .ab-vg-btn::after { content: ""; position: absolute; top: 50%; left: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border: 1.5px solid color-mix(in srgb, var(--fg) 38%, transparent); border-radius: 50%; background: color-mix(in srgb, var(--fg) 18%, transparent); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.22); opacity: 0; }

/* 1.4 Booking and payments */
.ab-vg--book, .ab-vg--chat, .ab-vg--care { flex-direction: column; justify-content: center; gap: 8px; }
.ab-vg-days, .ab-vg-times { display: flex; gap: 6px; }
.ab-vg-days span { display: flex; flex: 1; flex-direction: column; align-items: center; gap: 1px; min-width: 0; padding: 3px 0; border: 1px solid var(--line); border-radius: 7px; color: var(--fg-3); font-size: 9px; }
.ab-vg-days b { font-size: 12px; }
.ab-vg-times span { flex: 1; padding: 2px 0; border: 1px solid var(--line); border-radius: 999px; text-align: center; font-size: 10px; }
.ab-vg-days .is-on, .ab-vg-times .is-on { border-color: var(--signal); background: var(--mint-soft); color: var(--fg); }
.ab-vg-pay { align-self: stretch; padding: 5px 9px; }
.ab-vg-pay > span:first-child { opacity: 0; }
.ab-vg-sheet { position: absolute; z-index: 4; inset-inline: 8px; bottom: 0; padding: 9px 12px 10px; border-radius: 14px 14px 0 0; background: #0B0D10; color: #F2F4F7; box-shadow: 0 -10px 24px -12px rgba(0, 0, 0, 0.6); translate: 0 110%; }
.ab-vg-sheet b { color: #F2F4F7; }
.ab-vg-sh-top { display: flex; justify-content: space-between; gap: 8px; padding-bottom: 7px; border-bottom: 1px solid rgba(255, 255, 255, 0.12); font-size: 10.5px; }
.ab-vg-sh-id { display: flex; align-items: center; justify-content: center; gap: 8px; padding-top: 8px; font-size: 10px; color: #C9CED6; }
.ab-vg-face { width: 20px; height: 20px; flex: none; fill: none; stroke: #4FD1A5; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ab-vg-sh-l > span:last-child { color: #4FD1A5; opacity: 0; }

/* 1.5 AI chat */
.ab-vg-msg { align-self: flex-start; max-width: 82%; padding: 6px 10px; border-radius: 10px; border-end-start-radius: 3px; background: var(--bg-3); color: var(--fg); }
.ab-vg-msg--me { align-self: flex-end; border-radius: 10px; border-end-end-radius: 3px; background: var(--signal); color: var(--on-signal); transform-origin: right bottom; }
html[dir="rtl"] .ab-vg-msg--me { transform-origin: left bottom; }
.ab-vg-slot { align-self: flex-start; max-width: 82%; justify-items: start; }
.ab-vg-slot .ab-vg-msg { max-width: none; }
.ab-vg-typing { display: flex; align-items: center; gap: 3px; padding: 9px 10px; opacity: 0; }
.ab-vg-typing i { width: 4px; height: 4px; border-radius: 50%; background: var(--fg-3); }
.ab-vg-ans { transform-origin: left bottom; }
html[dir="rtl"] .ab-vg-ans { transform-origin: right bottom; }
.ab-vg-chip { align-self: flex-start; padding: 3px 10px; border: 1px solid var(--signal); border-radius: 999px; background: var(--signal); color: var(--on-signal); font-size: 10px; font-weight: 600; }
.ab-vg-chip > span:first-child { opacity: 0; }
.ab-vg-input { position: absolute; z-index: 2; inset-inline: 12px; bottom: 12px; display: flex; align-items: center; height: 26px; padding-inline: 11px 3px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--bg); color: var(--fg); opacity: 0; }
.ab-vg-typed { overflow: hidden; white-space: nowrap; }
.ab-vg-caret { width: 1px; height: 12px; flex: none; margin-inline-start: 1px; background: var(--fg); }
.ab-vg-sendb { display: grid; width: 20px; height: 20px; flex: none; margin-inline-start: auto; place-items: center; border-radius: 50%; background: var(--signal); color: var(--on-signal); }
.ab-vg-sendb svg { width: 11px; height: 11px; stroke-width: 2; }

/* 1.6 Care, monitoring and audits */
.ab-vg-stat { display: flex; align-items: center; gap: 6px; }
.ab-vg-stat > span { margin-inline-start: auto; color: var(--fg-3); }
.ab-vg-stat > .ab-vg-ok { color: var(--signal); font-weight: 600; }
.ab-vg-state > span:not(:first-child) { opacity: 0; }
.ab-vg-live { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--signal); }
.ab-vg-bars { height: 22px; overflow: hidden; }
.ab-vg-track { display: flex; gap: 2px; width: calc(120% + 0.4px); height: 100%; }
.ab-vg-track i { flex: 1; border-radius: 2px; background: color-mix(in srgb, var(--signal) 70%, transparent); }
.ab-vg-track .is-x { background: var(--bad); }
.ab-vg--care .ab-vg-toast { inset-inline: 10px; width: auto; }
.ab-vg-tl { display: flex; align-items: center; gap: 8px; }
.ab-vg-tl:first-child .ab-vg-ico { background: color-mix(in srgb, var(--bad) 14%, transparent); color: var(--bad); }
@media (prefers-reduced-motion: no-preference) { .ab-vg-live { animation: ab-breathe 2.6s ease-in-out infinite; } }

/* ── The scenes ── */
html.ab-play .ab-vg:not(.is-play) *, html.ab-play .ab-vg:not(.is-play) *::before, html.ab-play .ab-vg:not(.is-play) *::after { animation-play-state: paused !important; }
html.ab-play .ab-vg-hand { animation: var(--hand) var(--d) var(--vg-ease) infinite both; }
html.ab-play .ab-vg-tap { animation: var(--tap) var(--d) ease-out infinite both; }
html.ab-play .ab-vg-ptr { animation: var(--press) var(--d) linear infinite both; }
html.ab-play .ab-vg-spin { animation: vg-spin 0.7s linear infinite; }
@keyframes vg-spin { to { rotate: 360deg; } }

/* 1.1: the page loads, a visitor asks for a quote, and the enquiry lands */
html.ab-play .ab-vg--web { --d: 10s; --hand: vg-web-hand; --tap: vg-web-tap; --press: vg-web-press; }
html.ab-play .ab-vg--web .ab-vg-load { animation: vg-web-load var(--d) ease-out infinite both; }
html.ab-play .ab-vg--web .ab-vg-hero { animation: vg-web-hero var(--d) var(--vg-ease) infinite both; }
html.ab-play .ab-vg--web .ab-vg-sk { animation: vg-web-sk var(--d) var(--vg-ease) infinite both; }
html.ab-play .ab-vg--web .ab-vg-send { animation: vg-web-btn var(--d) var(--vg-ease) infinite both; }
html.ab-play .ab-vg--web .ab-vg-send > span:nth-child(1) { animation: vg-web-l1 var(--d) linear infinite both; }
html.ab-play .ab-vg--web .ab-vg-send > span:nth-child(2) { animation: vg-web-l2 var(--d) linear infinite both; }
html.ab-play .ab-vg--web .ab-vg-send > span:nth-child(3) { animation: vg-web-l3 var(--d) linear infinite both; }
html.ab-play .ab-vg--web .ab-vg-fast { animation: vg-web-fast var(--d) var(--vg-ease) infinite both; }
html.ab-play .ab-vg--web .ab-vg-toast { animation: vg-web-toast var(--d) var(--vg-ease) infinite both; }
@keyframes vg-web-load { 0% { opacity: 1; scale: 0 1; } 6% { scale: 0.8 1; } 9% { opacity: 1; scale: 1 1; } 11%, 100% { opacity: 0; scale: 1 1; } }
@keyframes vg-web-hero { 0%, 7% { opacity: 0; translate: 0 5px; } 11%, 92% { opacity: 1; translate: 0 0; } 97%, 100% { opacity: 0; translate: 0 0; } }
@keyframes vg-web-sk { 0%, 8% { opacity: 0; scale: 0.3 1; } 13%, 92% { opacity: 1; scale: 1 1; } 97%, 100% { opacity: 0; scale: 1 1; } }
@keyframes vg-web-btn { 0%, 9% { opacity: 0; scale: 0.9; background-color: var(--signal); } 14%, 31% { opacity: 1; scale: 1; background-color: var(--signal); } 32.5%, 36% { scale: 1; background-color: color-mix(in srgb, var(--signal) 80%, var(--fg)); } 37% { scale: 0.93; } 39% { scale: 1; background-color: var(--signal); } 92% { opacity: 1; scale: 1; background-color: var(--signal); } 97%, 100% { opacity: 0; scale: 1; background-color: var(--signal); } }
@keyframes vg-web-l1 { 0%, 37.5% { opacity: 1; } 38.5%, 100% { opacity: 0; } }
@keyframes vg-web-l2 { 0%, 37.5% { opacity: 0; } 38.5%, 46% { opacity: 1; } 47%, 100% { opacity: 0; } }
@keyframes vg-web-l3 { 0%, 46% { opacity: 0; } 48%, 100% { opacity: 1; } }
@keyframes vg-web-fast { 0%, 10% { opacity: 0; scale: 0.6; } 13% { opacity: 1; scale: 1.1; } 15%, 92% { opacity: 1; scale: 1; } 97%, 100% { opacity: 0; scale: 1; } }
@keyframes vg-web-toast { 0%, 50% { opacity: 0; translate: 0 140%; } 54% { opacity: 1; translate: 0 -5%; } 56%, 90% { opacity: 1; translate: 0 0; } 96%, 100% { opacity: 0; translate: 0 10%; } }
@keyframes vg-web-hand { 0%, 15% { opacity: 0; translate: var(--ex) var(--ey); } 17% { opacity: 1; } 25% { translate: calc((var(--ex) + var(--ax)) / 2 + 22px) calc((var(--ey) + var(--ay)) / 2 + 12px); } 32% { translate: calc(var(--ax) + 3px) calc(var(--ay) + 2px); } 34%, 40% { opacity: 1; translate: var(--ax) var(--ay); } 50% { opacity: 1; translate: calc(var(--ax) + 36px) calc(var(--ay) + 14px); } 56% { opacity: 0; translate: calc(var(--ax) + 44px) calc(var(--ay) + 26px); } 100% { opacity: 0; translate: var(--ex) var(--ey); } }
@keyframes vg-web-press { 0% { opacity: 0; scale: 1.4; } 34% { opacity: 0; scale: 1.4; } 36.2% { opacity: 0.95; scale: 1; } 37% { opacity: 1; scale: 0.8; } 38.2% { opacity: 0.9; scale: 0.9; } 39.6% { opacity: 0; scale: 1.15; } 100% { opacity: 0; scale: 1.15; } }
@keyframes vg-web-tap { 0%, 36.6% { opacity: 0; scale: 0.3; } 37.4% { opacity: 0.65; scale: 0.5; } 43%, 100% { opacity: 0; scale: 1.8; } }

/* 1.2: the status menu opens, the job is marked done, and its invoice goes out */
html.ab-play .ab-vg--app { --d: 11s; --hand: vg-app-hand; --tap: vg-app-tap; --press: vg-app-press; }
html.ab-play .ab-vg--app .ab-vg-menu { animation: vg-app-menu var(--d) var(--vg-ease) infinite both; }
html.ab-play .ab-vg--app .ab-vg-menu > span:last-child { animation: vg-app-opt var(--d) linear infinite both; }
html.ab-play .ab-vg--app .ab-vg-flip { animation: vg-app-pill var(--d) var(--vg-ease) infinite both; }
html.ab-play .ab-vg--app .ab-vg-flip > span:first-child { animation: vg-app-was var(--d) linear infinite both; }
html.ab-play .ab-vg--app .ab-vg-flip > span:last-child { animation: vg-app-now var(--d) linear infinite both; }
html.ab-play .ab-vg--app .ab-vg-row--edit::before { animation: vg-app-saved var(--d) ease-out infinite both; }
html.ab-play .ab-vg--app .ab-vg-count { animation: vg-app-count var(--d) var(--vg-ease) infinite both; }
html.ab-play .ab-vg--app .ab-vg-count > span:first-child { animation: vg-app-c3 var(--d) linear infinite both; }
html.ab-play .ab-vg--app .ab-vg-count > span:last-child { animation: vg-app-c4 var(--d) linear infinite both; }
html.ab-play .ab-vg--app .ab-vg-toast { animation: vg-app-toast var(--d) var(--vg-ease) infinite both; }
@keyframes vg-app-menu { 0%, 25.5% { opacity: 0; scale: 0.92; } 27%, 36% { opacity: 1; scale: 1; } 37.5%, 100% { opacity: 0; scale: 0.97; } }
@keyframes vg-app-opt { 0%, 31% { background-color: transparent; } 32%, 36.5% { background-color: var(--mint-soft); } 37.5%, 100% { background-color: transparent; } }
@keyframes vg-app-pill { 0%, 37% { border-color: color-mix(in srgb, var(--warn) 55%, transparent); color: var(--warn); scale: 1; } 24.5% { scale: 1; } 25.3% { scale: 0.92; } 26.5% { scale: 1; } 38% { border-color: color-mix(in srgb, var(--signal) 55%, transparent); color: var(--signal); scale: 1.07; } 40%, 93% { border-color: color-mix(in srgb, var(--signal) 55%, transparent); color: var(--signal); scale: 1; } 97%, 100% { border-color: color-mix(in srgb, var(--warn) 55%, transparent); color: var(--warn); scale: 1; } }
@keyframes vg-app-was { 0%, 37% { opacity: 1; } 38%, 95% { opacity: 0; } 97%, 100% { opacity: 1; } }
@keyframes vg-app-now { 0%, 37% { opacity: 0; } 38%, 95% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes vg-app-saved { 0%, 37.5% { opacity: 0; } 39% { opacity: 1; } 52%, 100% { opacity: 0; } }
@keyframes vg-app-count { 0%, 47% { scale: 1; } 50% { scale: 1.35; } 54%, 100% { scale: 1; } }
@keyframes vg-app-c3 { 0%, 48.5% { opacity: 1; } 49.5%, 95% { opacity: 0; } 97%, 100% { opacity: 1; } }
@keyframes vg-app-c4 { 0%, 48.5% { opacity: 0; } 49.5%, 95% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes vg-app-toast { 0%, 52% { opacity: 0; translate: 0 140%; } 56% { opacity: 1; translate: 0 -5%; } 58%, 89% { opacity: 1; translate: 0 0; } 95%, 100% { opacity: 0; translate: 0 10%; } }
@keyframes vg-app-hand { 0%, 7% { opacity: 0; translate: var(--ex) var(--ey); } 9% { opacity: 1; } 15% { translate: calc((var(--ex) + var(--ax)) / 2 - 6px) calc((var(--ey) + var(--ay)) / 2 + 16px); } 21% { translate: calc(var(--ax) + 3px) calc(var(--ay) + 2px); } 22.5%, 27% { opacity: 1; translate: var(--ax) var(--ay); } 31% { translate: calc(var(--bx) + 2px) calc(var(--by) + 1px); } 32%, 37% { opacity: 1; translate: var(--bx) var(--by); } 44% { opacity: 1; translate: calc(var(--bx) - 34px) calc(var(--by) + 4px); } 49% { opacity: 0; translate: calc(var(--bx) - 44px) calc(var(--by) + 10px); } 100% { opacity: 0; translate: var(--ex) var(--ey); } }
@keyframes vg-app-press { 0% { opacity: 0; scale: 1.4; } 22.2% { opacity: 0; scale: 1.4; } 24.4% { opacity: 0.95; scale: 1; } 25.2% { opacity: 1; scale: 0.8; } 26.4% { opacity: 0.9; scale: 0.9; } 27.8% { opacity: 0; scale: 1.15; } 32.2% { opacity: 0; scale: 1.4; } 34.4% { opacity: 0.95; scale: 1; } 35.2% { opacity: 1; scale: 0.8; } 36.4% { opacity: 0.9; scale: 0.9; } 37.8% { opacity: 0; scale: 1.15; } 100% { opacity: 0; scale: 1.15; } }
@keyframes vg-app-tap { 0%, 24.8% { opacity: 0; scale: 0.3; } 25.6% { opacity: 0.6; scale: 0.5; } 30%, 34.8% { opacity: 0; scale: 1.7; } 35.6% { opacity: 0.6; scale: 0.5; } 40%, 100% { opacity: 0; scale: 1.7; } }

/* 1.3: tap, the order is being made, and the message each customer waits for */
html.ab-play .ab-vg--mob { --d: 12s; }
html.ab-play .ab-vg--mob .ab-vg-btn { animation: vg-mob-press var(--d) var(--vg-ease) infinite both; }
html.ab-play .ab-vg--mob .ab-vg-btn::after { animation: vg-mob-touch var(--d) ease-out infinite both; }
html.ab-play .ab-vg--mob .ab-vg-screens { animation: vg-mob-slide var(--d) var(--vg-ease) infinite both; }
html.ab-play .ab-vg--mob [dir="rtl"] .ab-vg-screens { animation-name: vg-mob-slide-rtl; }
html.ab-play .ab-vg--mob .ab-vg-prog i { animation: vg-mob-prog var(--d) ease-in-out infinite both; }
html.ab-play .ab-vg--mob .ab-vg-note { animation: vg-mob-note var(--d) var(--vg-ease) infinite both; }
html.ab-play .ab-vg--mob .ab-vg-phone + .ab-vg-phone :is(.ab-vg-btn, .ab-vg-screens, .ab-vg-prog i, .ab-vg-note), html.ab-play .ab-vg--mob .ab-vg-phone + .ab-vg-phone .ab-vg-btn::after { animation-delay: 1.9s; }
@keyframes vg-mob-press { 0%, 7% { scale: 1; } 8.5% { scale: 0.9; } 10.5%, 100% { scale: 1; } }
@keyframes vg-mob-touch { 0%, 6.5% { opacity: 0; scale: 0.5; } 8% { opacity: 1; scale: 1; } 9.5% { opacity: 0.8; scale: 0.92; } 11.5%, 100% { opacity: 0; scale: 1.15; } }
@keyframes vg-mob-slide { 0%, 10% { opacity: 1; translate: 0 0; } 14.5%, 74% { opacity: 1; translate: -50% 0; } 77% { opacity: 0; translate: -50% 0; } 78%, 98% { opacity: 0; translate: 0 0; } 100% { opacity: 1; translate: 0 0; } }
@keyframes vg-mob-slide-rtl { 0%, 10% { opacity: 1; translate: 0 0; } 14.5%, 74% { opacity: 1; translate: 50% 0; } 77% { opacity: 0; translate: 50% 0; } 78%, 98% { opacity: 0; translate: 0 0; } 100% { opacity: 1; translate: 0 0; } }
@keyframes vg-mob-prog { 0%, 15% { scale: 0.12 1; } 22% { scale: 0.45 1; } 27% { scale: 0.62 1; } 33%, 100% { scale: 1 1; } }
@keyframes vg-mob-note { 0%, 34% { opacity: 0; translate: 0 -130%; } 37% { opacity: 1; translate: 0 6%; } 39%, 70% { opacity: 1; translate: 0 0; } 74%, 100% { opacity: 0; translate: 0 -120%; } }

/* 1.4: a day, a time, pay, Face ID, and it is booked and paid */
html.ab-play .ab-vg--book { --d: 12s; --hand: vg-book-hand; --tap: vg-book-tap; --press: vg-book-press; }
html.ab-play .ab-vg--book .ab-vg-days .is-on { animation: vg-book-day var(--d) var(--vg-ease) infinite both; }
html.ab-play .ab-vg--book .ab-vg-times .is-on { animation: vg-book-time var(--d) var(--vg-ease) infinite both; }
html.ab-play .ab-vg--book .ab-vg-pay { animation: vg-book-pay var(--d) var(--vg-ease) infinite both; }
html.ab-play .ab-vg--book .ab-vg-pay > span:first-child { animation: vg-book-l1 var(--d) linear infinite both; }
html.ab-play .ab-vg--book .ab-vg-pay > span:last-child { animation: vg-book-l2 var(--d) var(--vg-ease) infinite both; }
html.ab-play .ab-vg--book .ab-vg-sheet { animation: vg-book-sheet var(--d) var(--vg-ease) infinite both; }
html.ab-play .ab-vg--book .ab-vg-face { animation: vg-book-face var(--d) ease-in-out infinite both; }
html.ab-play .ab-vg--book .ab-vg-sh-l > span:first-child { animation: vg-book-s1 var(--d) linear infinite both; }
html.ab-play .ab-vg--book .ab-vg-sh-l > span:last-child { animation: vg-book-s2 var(--d) linear infinite both; }
@keyframes vg-book-day { 0%, 15.8% { border-color: var(--line); background-color: transparent; color: var(--fg-3); scale: 1; } 12% { border-color: var(--line-2); } 16.4% { scale: 0.92; } 18%, 93% { border-color: var(--signal); background-color: var(--mint-soft); color: var(--fg); scale: 1; } 98%, 100% { border-color: var(--line); background-color: transparent; color: var(--fg-3); scale: 1; } }
@keyframes vg-book-time { 0%, 27.8% { border-color: var(--line); background-color: transparent; color: var(--fg-2); scale: 1; } 24% { border-color: var(--line-2); } 28.4% { scale: 0.9; } 30%, 93% { border-color: var(--signal); background-color: var(--mint-soft); color: var(--fg); scale: 1; } 98%, 100% { border-color: var(--line); background-color: transparent; color: var(--fg-2); scale: 1; } }
@keyframes vg-book-pay { 0%, 37% { scale: 1; background-color: var(--signal); } 38%, 40.6% { background-color: color-mix(in srgb, var(--signal) 80%, var(--fg)); } 41.2% { scale: 0.96; } 43%, 100% { scale: 1; background-color: var(--signal); } }
@keyframes vg-book-l1 { 0%, 60% { opacity: 1; } 61%, 96% { opacity: 0; } 98%, 100% { opacity: 1; } }
@keyframes vg-book-l2 { 0%, 60% { opacity: 0; translate: 0 5px; } 63%, 93% { opacity: 1; translate: 0 0; } 97%, 100% { opacity: 0; translate: 0 0; } }
@keyframes vg-book-sheet { 0%, 42% { translate: 0 110%; } 46%, 58% { translate: 0 0; } 62%, 100% { translate: 0 110%; } }
@keyframes vg-book-face { 0%, 46% { scale: 1; opacity: 1; } 48% { scale: 1.12; } 50% { scale: 1; } 52% { scale: 1.12; } 53.5% { scale: 1; opacity: 1; } 54.5%, 100% { opacity: 0; scale: 1; } }
@keyframes vg-book-s1 { 0%, 54% { opacity: 1; } 55%, 100% { opacity: 0; } }
@keyframes vg-book-s2 { 0%, 54% { opacity: 0; } 55%, 100% { opacity: 1; } }
@keyframes vg-book-hand { 0%, 3% { opacity: 0; translate: var(--ex) var(--ey); } 5% { opacity: 1; } 10% { translate: var(--ax) calc(var(--ay) + 4px); } 13.5% { translate: calc(var(--bx) + 3px) calc(var(--by) + 2px); } 15%, 18.5% { opacity: 1; translate: var(--bx) var(--by); } 22% { translate: calc((var(--bx) + var(--cx)) / 2 + 8px) calc((var(--by) + var(--cy)) / 2); } 26% { translate: calc(var(--cx) + 2px) calc(var(--cy) + 2px); } 27%, 30.5% { translate: var(--cx) var(--cy); } 35% { translate: calc((var(--cx) + var(--dx)) / 2 + 10px) calc((var(--cy) + var(--dy)) / 2 + 2px); } 38.5% { translate: calc(var(--dx) + 3px) calc(var(--dy) + 2px); } 40%, 43% { opacity: 1; translate: var(--dx) var(--dy); } 47% { opacity: 0; translate: calc(var(--dx) + 30px) calc(var(--dy) + 26px); } 100% { opacity: 0; translate: var(--ex) var(--ey); } }
@keyframes vg-book-press { 0% { opacity: 0; scale: 1.4; } 13.6% { opacity: 0; scale: 1.4; } 15.8% { opacity: 0.95; scale: 1; } 16.6% { opacity: 1; scale: 0.8; } 17.8% { opacity: 0.9; scale: 0.9; } 19.2% { opacity: 0; scale: 1.15; } 25.6% { opacity: 0; scale: 1.4; } 27.8% { opacity: 0.95; scale: 1; } 28.6% { opacity: 1; scale: 0.8; } 29.8% { opacity: 0.9; scale: 0.9; } 31.2% { opacity: 0; scale: 1.15; } 38.2% { opacity: 0; scale: 1.4; } 40.4% { opacity: 0.95; scale: 1; } 41.2% { opacity: 1; scale: 0.8; } 42.4% { opacity: 0.9; scale: 0.9; } 43.8% { opacity: 0; scale: 1.15; } 100% { opacity: 0; scale: 1.15; } }
@keyframes vg-book-tap { 0%, 16.2% { opacity: 0; scale: 0.3; } 17% { opacity: 0.6; scale: 0.5; } 21%, 28.2% { opacity: 0; scale: 1.7; } 29% { opacity: 0.6; scale: 0.5; } 33%, 40.8% { opacity: 0; scale: 1.7; } 41.6% { opacity: 0.6; scale: 0.5; } 46%, 100% { opacity: 0; scale: 1.7; } }

/* 1.5: the question is typed and sent, answered, and booked */
html.ab-play .ab-vg--chat { --d: 12s; --hand: vg-chat-hand; --tap: vg-chat-tap; --press: vg-chat-press; }
html.ab-play .ab-vg--chat .ab-vg-input { animation: vg-chat-input var(--d) linear infinite both; }
html.ab-play .ab-vg--chat .ab-vg-typed { animation: vg-chat-type var(--d) linear infinite both; }
html.ab-play .ab-vg--chat .ab-vg-caret { animation: vg-blink 1s steps(1) infinite; }
html.ab-play .ab-vg--chat .ab-vg-sendb { animation: vg-chat-send var(--d) var(--vg-ease) infinite both; }
html.ab-play .ab-vg--chat .ab-vg-msg--me { animation: vg-chat-me var(--d) var(--vg-ease) infinite both; }
html.ab-play .ab-vg--chat .ab-vg-typing { animation: vg-chat-dots var(--d) linear infinite both; }
html.ab-play .ab-vg--chat .ab-vg-typing i { animation: vg-dot 0.9s ease-in-out infinite; }
html.ab-play .ab-vg--chat .ab-vg-typing i:nth-child(2) { animation-delay: 0.15s; }
html.ab-play .ab-vg--chat .ab-vg-typing i:nth-child(3) { animation-delay: 0.3s; }
html.ab-play .ab-vg--chat .ab-vg-ans { animation: vg-chat-ans var(--d) var(--vg-ease) infinite both; }
html.ab-play .ab-vg--chat .ab-vg-chip { animation: vg-chat-chip var(--d) var(--vg-ease) infinite both; }
html.ab-play .ab-vg--chat .ab-vg-chip > span:first-child { animation: vg-chat-c1 var(--d) linear infinite both; }
html.ab-play .ab-vg--chat .ab-vg-chip > span:last-child { animation: vg-chat-c2 var(--d) linear infinite both; }
@keyframes vg-chat-input { 0%, 19.5% { opacity: 1; } 21.5%, 97% { opacity: 0; } 100% { opacity: 1; } }
@keyframes vg-chat-type { 0%, 3% { max-width: 0; animation-timing-function: steps(24, end); } 16%, 19% { max-width: 240px; } 19.5%, 100% { max-width: 0; } }
@keyframes vg-blink { 0% { opacity: 1; } 50% { opacity: 0; } }
@keyframes vg-chat-send { 0%, 16% { scale: 1; } 17.5% { scale: 1.12; } 18.6% { scale: 0.85; } 20%, 100% { scale: 1; } }
@keyframes vg-chat-me { 0%, 19% { opacity: 0; translate: 0 26px; scale: 0.96; } 23%, 93% { opacity: 1; translate: 0 0; scale: 1; } 97%, 100% { opacity: 0; translate: 0 0; scale: 1; } }
@keyframes vg-chat-dots { 0%, 25% { opacity: 0; } 27%, 39% { opacity: 1; } 40%, 100% { opacity: 0; } }
@keyframes vg-dot { 0%, 60%, 100% { translate: 0 0; opacity: 0.5; } 30% { translate: 0 -3px; opacity: 1; } }
@keyframes vg-chat-ans { 0%, 39.5% { opacity: 0; scale: 0.88; } 43%, 93% { opacity: 1; scale: 1; } 97%, 100% { opacity: 0; scale: 1; } }
@keyframes vg-chat-chip { 0%, 47% { opacity: 0; translate: 0 5px; background-color: transparent; color: var(--signal); scale: 1; } 51%, 59.5% { opacity: 1; translate: 0 0; background-color: transparent; color: var(--signal); scale: 1; } 60.5%, 62.6% { background-color: var(--mint-soft); color: var(--signal); scale: 1; } 63.8% { color: var(--on-signal); } 63.2% { scale: 0.93; } 64.5%, 93% { opacity: 1; translate: 0 0; background-color: var(--signal); color: var(--on-signal); scale: 1; } 97%, 100% { opacity: 0; translate: 0 0; background-color: var(--signal); color: var(--on-signal); scale: 1; } }
@keyframes vg-chat-c1 { 0%, 63.5% { opacity: 1; } 64.5%, 100% { opacity: 0; } }
@keyframes vg-chat-c2 { 0%, 63.5% { opacity: 0; } 64.5%, 100% { opacity: 1; } }
@keyframes vg-chat-hand { 0%, 50% { opacity: 0; translate: var(--ex) var(--ey); } 52% { opacity: 1; } 56% { translate: calc((var(--ex) + var(--ax)) / 2 + 14px) calc((var(--ey) + var(--ay)) / 2 + 10px); } 59.5% { translate: calc(var(--ax) + 3px) calc(var(--ay) + 2px); } 61%, 66% { opacity: 1; translate: var(--ax) var(--ay); } 72% { opacity: 0; translate: calc(var(--ax) + 40px) calc(var(--ay) + 22px); } 100% { opacity: 0; translate: var(--ex) var(--ey); } }
@keyframes vg-chat-press { 0% { opacity: 0; scale: 1.4; } 60.2% { opacity: 0; scale: 1.4; } 62.4% { opacity: 0.95; scale: 1; } 63.2% { opacity: 1; scale: 0.8; } 64.4% { opacity: 0.9; scale: 0.9; } 65.8% { opacity: 0; scale: 1.15; } 100% { opacity: 0; scale: 1.15; } }
@keyframes vg-chat-tap { 0%, 62.8% { opacity: 0; scale: 0.3; } 63.6% { opacity: 0.6; scale: 0.5; } 68%, 100% { opacity: 0; scale: 1.7; } }

/* 1.6: the chart moves with each check; at 2:14 am one does not answer, and the
   owner is emailed before anyone else notices. The red bar stays as history. */
html.ab-play .ab-vg--care { --d: 12s; }
html.ab-play .ab-vg--care .ab-vg-track { animation: vg-care-track var(--d) var(--vg-ease) infinite both; }
html.ab-play .ab-vg--care .ab-vg-live { animation: ab-breathe 2.6s ease-in-out infinite, vg-care-dot var(--d) linear infinite both; }
html.ab-play .ab-vg--care .ab-vg-state > span:nth-child(1) { animation: vg-care-s1 var(--d) linear infinite both; }
html.ab-play .ab-vg--care .ab-vg-state > span:nth-child(2) { animation: vg-care-s2 var(--d) linear infinite both; }
html.ab-play .ab-vg--care .ab-vg-state > span:nth-child(3) { animation: vg-care-s3 var(--d) linear infinite both; }
html.ab-play .ab-vg--care .ab-vg-track .is-x { animation: vg-care-past var(--d) ease infinite both; }
html.ab-play .ab-vg--care .ab-vg-toast { animation: vg-care-toast var(--d) var(--vg-ease) infinite both; }
html.ab-play .ab-vg--care .ab-vg-tl:first-child { animation: vg-care-t1 var(--d) linear infinite both; }
html.ab-play .ab-vg--care .ab-vg-tl:last-child { animation: vg-care-t2 var(--d) linear infinite both; }
@keyframes vg-care-track { 0%, 8% { opacity: 1; translate: 0 0; } 9.5%, 20% { translate: -2.7778% 0; } 21.5%, 32% { translate: -5.5556% 0; } 33.5%, 44% { translate: -8.3333% 0; } 45.5%, 56% { translate: -11.1111% 0; } 57.5%, 68% { translate: -13.8889% 0; } 69.5%, 92% { opacity: 1; translate: -16.6667% 0; } 95% { opacity: 0.2; translate: -16.6667% 0; } 96.5% { opacity: 0.2; translate: 0 0; } 100% { opacity: 1; translate: 0 0; } }
@keyframes vg-care-dot { 0%, 33% { background-color: var(--signal); } 33.5%, 57% { background-color: var(--bad); } 57.5%, 100% { background-color: var(--signal); } }
@keyframes vg-care-s1 { 0%, 33% { opacity: 1; } 33.5%, 95% { opacity: 0; } 97%, 100% { opacity: 1; } }
@keyframes vg-care-s2 { 0%, 33% { opacity: 0; } 33.5%, 57% { opacity: 1; } 57.5%, 100% { opacity: 0; } }
@keyframes vg-care-s3 { 0%, 57% { opacity: 0; } 57.5%, 95% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes vg-care-toast { 0%, 35.5% { opacity: 0; translate: 0 140%; } 39% { opacity: 1; translate: 0 -5%; } 40.5%, 88% { opacity: 1; translate: 0 0; } 93%, 100% { opacity: 0; translate: 0 10%; } }
@keyframes vg-care-past { 0%, 57.5% { opacity: 1; } 62%, 100% { opacity: 0.45; } }
@keyframes vg-care-t1 { 0%, 57.5% { opacity: 1; } 58.5%, 100% { opacity: 0; } }
@keyframes vg-care-t2 { 0%, 57.5% { opacity: 0; } 58.5%, 100% { opacity: 1; } }
@media print { .ab-vg-hand, .ab-vg-toast, .ab-vg-sheet, .ab-vg-input { display: none; } }

/* ── Arrival ─────────────────────────────────────────────────────────
   theme.js sets ab-mo on the home pages when the visitor has not asked for less
   motion. Each block rises into place as it reaches the screen, illustrations draw
   themselves, and the build timeline runs left to right before its last step lights. */
html.ab-mo :is(.ab-sec .ab-sh, .ab-clause, .ab-show > *, .ab-seq-list > li, .ab-inst, .ab-split > *, .ab-enquiry > *, .ab-about2 > *) {
  opacity: 0; transform: translateY(16px);
  transition: opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
}
html.ab-mo :is(.ab-sec .ab-sh, .ab-clause, .ab-show > *, .ab-seq-list > li, .ab-inst, .ab-split > *, .ab-enquiry > *, .ab-about2 > *).is-in { opacity: 1; transform: none; transition-delay: calc(var(--mo-i, 0) * 90ms); }
html.ab-mo .ab-ill > :not(.a) { stroke-dasharray: 1; stroke-dashoffset: 1; }
html.ab-mo .is-in .ab-ill > :not(.a) { animation: ab-ill-draw 1.2s cubic-bezier(0.45, 0, 0.2, 1) 0.15s both; }
html.ab-mo .ab-ill > .a { fill-opacity: 0; }
html.ab-mo .is-in .ab-ill > .a { animation: ab-ill-fill 0.6s ease 0.8s both; }
@keyframes ab-ill-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes ab-ill-fill { from { fill-opacity: 0; } to { fill-opacity: 1; } }
html.ab-mo .ab-seq-line { transform: scaleX(0); transform-origin: left center; transition: transform 1.6s cubic-bezier(0.45, 0, 0.2, 1) 0.2s; }
html.ab-mo[dir="rtl"] .ab-seq-line { transform-origin: right center; }
html.ab-mo .ab-seq.is-in .ab-seq-line { transform: none; }
html.ab-mo .ab-node--on { background: var(--bg); border-color: var(--line-2); color: var(--fg); transition: background-color 0.5s ease, border-color 0.5s ease, color 0.5s ease; }
html.ab-mo .ab-seq.is-in .ab-node--on { background: var(--signal); border-color: var(--signal); color: var(--on-signal); transition-delay: 1.6s; }
@media print {
  html.ab-mo :is(.ab-sec .ab-sh, .ab-clause, .ab-show > *, .ab-seq-list > li, .ab-inst, .ab-split > *, .ab-enquiry > *, .ab-about2 > *) { opacity: 1; transform: none; }
  html.ab-mo .ab-ill > :not(.a) { stroke-dashoffset: 0; }
  html.ab-mo .ab-ill > .a { fill-opacity: 1; }
  html.ab-mo .ab-seq-line { transform: none; }
}

/* ── Work showcase ───────────────────────────────────────────────────
   One stage, one laptop at a time, one build on its screen.
   Frames are drawn from the page's own colour tokens, so they follow the chosen
   style. The stage keeps its shape before anything loads, so nothing moves. */
.ab-show { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.ab-show-side { padding-top: 3%; }
.ab-show-stage { position: relative; aspect-ratio: 16 / 11; }
.ab-dev { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity 0.35s ease, transform 0.35s ease, visibility 0s linear 0.35s; }
.ab-dev.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.ab-dev-screen { position: relative; overflow: hidden; background: var(--bg-deep); border: 1px solid var(--line); }
.ab-dev-screen > img, .ab-dev-screen > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.ab-dev-screen > video { opacity: 0; transition: opacity 0.3s ease; }
.ab-dev.is-playing .ab-dev-screen > video { opacity: 1; }
.ab-dev-lid { position: relative; width: 88%; padding: 1.8% 1.8% 2.4%; background: var(--bg-3); border: 1px solid var(--line-2); border-radius: 14px 14px 4px 4px; box-shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.45); }
.ab-dev-lid::before { content: ""; position: absolute; top: 0.7%; left: 50%; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--line-2); }
.ab-dev--laptop .ab-dev-screen { aspect-ratio: 16 / 10; border-radius: 3px; }
.ab-dev-base { position: relative; width: 100%; height: 14px; background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 2px 2px 14px 14px; }
.ab-dev-base::before { content: ""; position: absolute; top: -1px; left: 42%; width: 16%; height: 5px; border-radius: 0 0 6px 6px; background: var(--line); }
.ab-show-play { position: absolute; inset-inline-end: 7%; bottom: 9%; z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line-2); border-radius: 50%; background: var(--bg-2); color: var(--fg); cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease; }
.ab-show-play:hover { background: var(--bg-3); border-color: var(--signal); }
.ab-show-play:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
.ab-show-play[hidden] { display: none; }
.ab-show-play::before { content: ""; width: 0; height: 0; margin-inline-start: 3px; border-style: solid; border-width: 7px 0 7px 11px; border-color: transparent transparent transparent currentColor; }
.ab-show-play[data-state="pause"]::before { width: 11px; height: 13px; margin: 0; border: 0; border-inline: 4px solid currentColor; }
html[dir="rtl"] .ab-show-play::before { transform: scaleX(-1); }
.ab-show-pick { display: flex; flex-direction: column; gap: 8px; margin-bottom: 28px; }
.ab-show-pick button { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; width: 100%; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg-2); color: var(--fg); font: inherit; text-align: start; cursor: pointer; transition: border-color 0.2s ease, background-color 0.2s ease; }
.ab-show-pick button:hover { border-color: var(--line-2); }
.ab-show-pick button[aria-pressed="true"] { border-color: var(--signal); background: var(--bg-3); box-shadow: inset 3px 0 0 var(--signal); }
html[dir="rtl"] .ab-show-pick button[aria-pressed="true"] { box-shadow: inset -3px 0 0 var(--signal); }
.ab-show-pick button:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
.ab-show-pick-name { font-weight: 600; }
.ab-show-pick-type { font-size: 13px; color: var(--fg-3); }
.ab-show-item .ab-fig-cap { margin-bottom: 10px; }
.ab-show-title { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -0.01em; }
.ab-show-item p { margin: 8px 0 0; color: var(--fg-2); }
.ab-show-item .ab-show-note { font-size: 13px; color: var(--fg-3); }
.ab-show-item .ab-fig-go { display: inline-block; margin-top: 14px; }
/* Case-study rows: Problem / Built / Result for a selected project. Small mono
   label beside the line; the Result line carries the signal colour so the
   checkable facts read as proof. */
.ab-case { margin: 12px 0 0; display: grid; gap: 11px; }
.ab-case-row { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 0 14px; align-items: baseline; }
.ab-case dt { margin: 0; font-family: var(--mono); font-size: 11px; line-height: 1.55; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); }
.ab-case dd { margin: 0; font-size: 15px; line-height: 1.55; color: var(--fg-2); }
.ab-case-row--result dt { color: var(--signal); }
.ab-case-row--result dd { color: var(--fg); }
html[lang="ar"] .ab-case dt { font-family: var(--arabic); letter-spacing: 0; text-transform: none; font-size: 13px; }
@media (max-width: 639px) {
  .ab-case-row { grid-template-columns: minmax(0, 1fr); gap: 3px; }
}
html.ab-js .ab-show-item:not(.is-on) { display: none; }
html:not(.ab-js) .ab-show-pick { display: none; }
html:not(.ab-js) .ab-show-item + .ab-show-item { margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--line); }
@media (max-width: 900px) {
  .ab-show { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}
@media (max-width: 767px) {
  .ab-show-pick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-bottom: 22px; }
  .ab-show-pick button { flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; padding: 10px 12px; min-height: 56px; }
  .ab-show-pick button[aria-pressed="true"] { box-shadow: inset 0 -3px 0 var(--signal); }
  html[dir="rtl"] .ab-show-pick button[aria-pressed="true"] { box-shadow: inset 0 -3px 0 var(--signal); }
  .ab-show-pick-type { font-size: 12px; }
  .ab-dev-lid { width: 92%; }
  .ab-dev-base { height: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .ab-dev, .ab-dev-screen > video { transition: none; }
}

/* ── Signature motion ────────────────────────────────────────────────
   The home headline comes into focus word by word: it moves and sharpens but is
   never transparent, so the browser counts it as painted from the first frame. */
html.ab-mo .ab-h1 .ab-w { display: inline-block; animation: ab-word 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both; animation-delay: calc(var(--w, 0) * 55ms + 60ms); }
@keyframes ab-word { from { transform: translateY(0.38em); filter: blur(8px); } }
/* The build timeline fills as it scrolls through the screen, where the browser
   can tie animation to scrolling; elsewhere it draws once on arrival. */
@supports (animation-timeline: view()) {
  html.ab-mo .ab-seq-line { transition: none; animation: ab-line linear both; animation-timeline: view(); animation-range: entry 25% cover 50%; }
}
@keyframes ab-line { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* A guide shows how far through it the reader is: a thin line along the top. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    .gd-art-wrap::before { content: ""; position: fixed; inset: 0 0 auto 0; z-index: 70; height: 3px; background: var(--signal); transform-origin: 0 50%; transform: scaleX(0); animation: ab-read linear both; animation-timeline: scroll(root block); pointer-events: none; }
    html[dir="rtl"] .gd-art-wrap::before { transform-origin: 100% 50%; }
  }
}
@keyframes ab-read { to { transform: scaleX(1); } }
/* The showcase device leans a little towards the pointer (ab-work.js sets the angles). */
.ab-show-stage { perspective: 1400px; }
.ab-dev { rotate: var(--tilt, 0deg); transition: opacity 0.35s ease, transform 0.35s ease, visibility 0s linear 0.35s, rotate 0.45s cubic-bezier(0.2, 0.7, 0.2, 1); }
/* On a phone the top strip is too narrow for the Gulf line, so in the English menu
   the Arabic link carries it underneath, from its own title. */
@media (max-width: 767px) {
  html[lang^="en"] .ab-nav .nav-lang[title]::after { content: attr(title); display: block; margin-top: 4px; font-family: var(--sans); font-size: 12.5px; font-weight: 400; line-height: 1.45; letter-spacing: 0; color: var(--fg-3); }
}

/* ── Who you'll work with ────────────────────────────────────────────
   The founder's photo at a size that can be seen, beside a short first-person
   introduction and four plain points on how the work is done. */
.ab-about2 { grid-template-columns: minmax(0, 1fr); gap: 0; align-items: start; }
.ab-about2 .ab-about-copy { max-width: 760px; }
.ab-about-photo img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border: 1px solid var(--line-2); border-radius: 50%; box-shadow: 0 0 0 6px var(--bg-2), 0 0 0 7px var(--line), 0 24px 48px -32px rgba(0, 0, 0, 0.45); }
.ab-about-copy .ab-kicker { margin-bottom: 10px; }
.ab-about-copy .ab-body { margin-top: 16px; max-width: 46em; }
.ab-about-points { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px 32px; }
.ab-about-points li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; color: var(--fg-2); font-size: 15px; line-height: 1.55; }
.ab-about-points b { color: var(--fg); font-weight: 600; }
.ab-about-tick { width: 20px; height: 20px; margin-top: 2px; fill: none; stroke: var(--signal); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ab-about2 .ab-sign { margin-top: 32px; }
@media (max-width: 900px) {
  .ab-about2 { grid-template-columns: minmax(0, 1fr); }
  .ab-about-photo { max-width: 200px; }
}
@media (max-width: 600px) { .ab-about-points { grid-template-columns: minmax(0, 1fr); } }

/* The invoice page in the Invoice Maker is the document itself (it becomes the PDF),
   so in Paper and Navy it keeps the Blueprint colour settings it was designed with. */
@media screen {
  html.ab-alt #a4-paper {
    --bg: #11161D; --bg-deep: #0C1016; --bg-2: #161C24; --bg-3: #1C232C; --line: #263140; --line-2: #324154;
    --fg: #E6EDF3; --fg-2: #C3CED8; --fg-3: #9FB0C0; --signal: #6FD8B3; --on-signal: #06201C; --warn: #F5B14B; --bad: #F87171;
    --signal-text: #6FD8B3; --rule: #263140; --ink: #11161D; --ivory: #E6EDF3; --mist: #C3CED8; --dim: #9FB0C0;
    --mint: #6FD8B3; --mint-2: #6FD8B3; --mint-soft: rgba(111, 216, 179, 0.1);
    --bg-surface: var(--bg-2); --bg-surface-hover: var(--bg-3); --bg-card: var(--bg-2);
    --accent: var(--signal); --accent-dim: var(--signal); --accent-bright: var(--signal); --accent-soft: var(--bg-3);
    --text: var(--fg); --text-main: var(--fg); --text-dim: var(--fg-2); --text-faint: var(--fg-2); --text-muted: var(--fg-3);
    --border: var(--line); --border-hover: var(--line-2); --border-accent: var(--line-2);
  }
}
/* The Logo Maker's layers list is drawn by its script with fixed dark colours;
   in Paper and Navy the rows, names and arrows take the style's own. */
@media screen {
  html.ab-alt #layers-list > div { background: var(--bg-3) !important; border-color: var(--line) !important; }
  html.ab-alt #layers-list > div > span { color: var(--fg) !important; }
  html.ab-alt #layers-list > div > div > button:not(:last-child) { background: color-mix(in srgb, var(--fg) 10%, transparent) !important; color: var(--fg) !important; }
}

/* ── Free tools ──────────────────────────────────────────────────────
   Each tool is a card: what it does, what it handles, and a way in.
   File Forge, twelve tools in one, leads wide with every tool named. */
.ab-tl-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 8px; }
.ab-tl-card { display: flex; flex-direction: column; overflow: hidden; background: var(--bg-2); border: 1px solid var(--line); border-radius: 16px; color: var(--fg); text-decoration: none; transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1), border-color 0.25s ease, box-shadow 0.25s ease; }
.ab-tl-card:hover { color: var(--fg); border-color: var(--line-2); transform: translateY(-3px); box-shadow: 0 18px 40px -26px rgba(0, 0, 0, 0.5); }
.ab-tl-card:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }
.ab-tl-body { display: flex; flex-direction: column; gap: 8px; flex: 1; padding: 22px 22px 20px; }
.ab-tl-name { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
.ab-tl-badge { padding: 2px 8px; border: 1px solid var(--signal); border-radius: 999px; font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.04em; color: var(--signal); }
.ab-tl-desc { color: var(--fg-2); font-size: 15px; line-height: 1.5; }
.ab-tl-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.ab-tl-chips span { padding: 3px 9px; border: 1px solid var(--line); border-radius: 999px; font-size: 12px; color: var(--fg-3); }
.ab-tl-open { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 10px; font-size: 14px; font-weight: 600; color: var(--signal); }
.ab-tl-arrow { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.25s ease; }
.ab-tl-card:hover .ab-tl-arrow { transform: translateX(3px); }
html[dir="rtl"] .ab-tl-arrow { transform: scaleX(-1); }
html[dir="rtl"] .ab-tl-card:hover .ab-tl-arrow { transform: scaleX(-1) translateX(3px); }
.ab-tl-card--wide { grid-column: span 2; }
.ab-tl-card--wide .ab-tl-name { font-size: 22px; }
@media (max-width: 960px) { .ab-tl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .ab-tl-grid { grid-template-columns: minmax(0, 1fr); }
  .ab-tl-card--wide { grid-column: auto; }
}
@media (prefers-reduced-motion: reduce) { .ab-tl-card, .ab-tl-arrow { transition: none; } .ab-tl-card:hover { transform: none; } }

/* ── Hero titles: one phone-friendly size across every page, plus the green accent ──
   Loads after home.css and ar.css, so !important here beats their hero sizing; the
   only later sheet is as-built-pages.css (legacy) and the #pp-heading ID rule, which
   are reconciled to match. Desktop sizing is untouched (override is phone-only). */
@media (max-width: 560px) {
  body.ab-page .ab-h1, body.ab-page .rs-display, body.ab-page .rs-pp-title,
  body.ab-page .rs-tl-h1, body.ab-page .gd-h1, body.ab-page .ck-h1 {
    font-size: clamp(21px, 6.2vw, 27px) !important;
  }
  /* Homepage hero is the longest title; a touch smaller so "engineered" sits on
     the same line as "Websites and apps," — two lines instead of three. */
  body.ab-page #hero-heading { font-size: clamp(19px, 5.4vw, 22px) !important; }
  /* Audit title fits one line when a touch smaller; Arabic already fits at full size. */
  html:not([lang="ar"]) body.ab-page #au-heading { font-size: clamp(19px, 5.4vw, 22px) !important; }
}
.ab-h1 em, .ab-h2 em, .rs-display em, .rs-pp-title em, .rs-tl-h1 em, .gd-h1 em, .ck-h1 em {
  font-style: normal;
  color: var(--em-2) !important;
  -webkit-text-fill-color: var(--em-2) !important;
}

/* ── Hero top spacing: one consistent gap below the sticky header on EVERY
   page, at every width. The nav is sticky and in normal flow, so the space
   under it is simply the first section's top padding. It ranged 0-118px across
   pages (big empty gaps on some, tight on others); pin every page's first
   section to --nav-gap and clear any stray top margin, so none sits looser
   than another. !important beats the scattered rules in home.css,
   care-plan.css and as-built-pages.css; the body-scoped legal/404 selectors
   carry enough specificity to beat those sheets' own !important rules. */
:root { --nav-gap: 40px; }
body.ab-page .rs-hero,
body.ab-page .ab-hero,
body.ab-page .ab-inspect,
body.ab-page .ps-hero,
body.ab-page .cp-hero,
body.ab-page .pc-hero,
body.ab-page .rs-tl,
body.ab-page .gd-head,
body.ab-page .gd-art-wrap,
body.ab-page .rs-wt-panel:not([hidden]),
body.ab-fam-tool .tool-main,
body.ab-fam-legal #main,
body.ab-fam-nf .nf-main {
  padding-top: var(--nav-gap) !important;
  margin-top: 0 !important;
}
/* Tool apps nest their content in a wrapper whose first child's top margin
   collapses through and adds to .tool-main's padding; clear it so the gap
   stays the same 40px. */
body.ab-fam-tool .tool-main > :first-child,
body.ab-fam-tool .tool-main > .container > :first-child { margin-top: 0 !important; }