/*
Theme Name: Address Circle
Theme URI: https://addresscircle.example
Author: Mobile Team - The Address Holding
Description: Dark-themed financial landing page for Address Circle. Brokerages & Freelancers platform. Pixel-matched to Figma with commission tracking, Masarefak Express, and app download sections. Hover + scroll motion enabled.
Version: 8.39.19
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: address-circle
*/

/* ============================================================
   DESIGN TOKENS  (from Figma)
   ============================================================ */
:root {
  --ac-bg:            #0a090c;
  --ac-bg-2:          #100e13;
  --ac-panel:         #0c0a10; /* header/drawer/badge surfaces */
  --ac-surface:       rgba(var(--ac-text-rgb),.02);
  --ac-surface-2:     rgba(var(--ac-line-rgb),.04);
  --ac-border:        rgba(var(--ac-line-rgb),.10);
  --ac-border-strong: rgba(var(--ac-line-rgb),.16);

  /* RGB triplets (no alpha) for the two colors most often used inside
     rgba(...) throughout this file — border/overlay tints and text tints.
     Dozens of rules write rgba(var(--ac-line-rgb),X) or rgba(var(--ac-text-rgb),X)
     directly rather than through a variable, because they each need their
     own one-off alpha. Routing the base colour through a variable
     (rgba(var(--ac-line-rgb),X)) means those same rules automatically
     flip to dark-on-light in the light theme below, without having to turn
     every single one into its own named variable. */
  --ac-line-rgb: 255,255,255; /* border/surface tint base */
  --ac-text-rgb: 248,248,248; /* text tint base */

  /* Figma text tiers */
  --ac-text:          rgba(var(--ac-text-rgb),.95);
  --ac-text-2:        rgba(var(--ac-text-rgb),.70);
  --ac-text-3:        rgba(var(--ac-text-rgb),.50);
  /* Product names lifted out of body copy: pure white on the dark page,
     pure black on the light one, so they read as highlighted against the
     dimmed body text around them. */
  --ac-brand-term:    #ffffff;
  --ac-grey:          #c5c5c9;

  /* Semantic accent/status colours used for links, department labels,
     current-nav-item, and success/error badges. Bright versions read well
     on the dark background (12.6:1 / 10.1:1 contrast) but drop to as low as
     1.45:1 on the light background — effectively invisible — so the light
     theme below swaps in darker variants of the same hues instead. */
  --ac-accent-orange:       #e0703a;
  --ac-accent-orange-hover: #f0925f;
  --ac-accent-pink:         #ff6a8a;
  --ac-status-success:      #7ee2a8;
  --ac-status-error:        #f2a5a5;

  /* Scrolled header / nav-dropdown / modal frosted-glass surface. Needs its
     own alpha-tuned value per theme (not just --ac-bg) so the frosted-glass
     effect survives the switch instead of turning fully opaque or losing
     contrast with whatever content scrolls behind it. */
  --ac-glass-bg:        rgba(10,9,12,.82);
  --ac-glass-bg-strong: rgba(10,9,12,.96);
  --ac-panel-rgb: 16,14,21; /* matches --ac-panel, for gradients that fade INTO it */

  /* General-purpose shadow colour. Every box-shadow written as
     rgba(var(--ac-shadow-rgb),X) throughout this file is routed through this instead, so
     ALL of them recolour in light mode (not just the handful of elements
     with a hand-tuned override below) — pure black in dark mode (identical
     to before), a deep brand purple in light mode. */
  --ac-shadow-rgb: 0,0,0;

  /* Brand gradient (Figma exact stops) */
  --ac-magenta:       #99187f;
  --ac-grad-brand:    linear-gradient(90deg,#de6e20 17.308%,#dc481b 24.519%,#c60730 36.058%,#8a1d98 52.404%,#541360 65.865%);
  --ac-grad-app:      linear-gradient(90deg,#d44327 37.019%,#b41e4e 49.038%,#951676 56.25%);
  --ac-grad-btn:      linear-gradient(93deg,#DD511C 6.64%,#B50D4D 47.45%,#811C93 91.96%);
  --ac-grad-headline: linear-gradient(106.89deg,rgba(var(--ac-text-rgb),.9) 0%,rgba(var(--ac-text-rgb),.5) 100.1%);

  --ac-font-display:  'Lexend Deca', system-ui, sans-serif;   /* Headlines */
  --ac-font-body:     'Work Sans', system-ui, sans-serif;      /* Body copy */
  --ac-font-desc:     'Work Sans', system-ui, sans-serif;      /* Hero description */
  --ac-font-ui:       'Outfit', system-ui, sans-serif;
  --ac-font-jakarta:  'Plus Jakarta Sans', system-ui, sans-serif;
  --ac-font-ar:       'Rakkas', 'Amiri', serif; /* Farisi-style Arabic display */

  /* Content type scale (fluid) — consistent body/subtitle/eyebrow sizing */
  --ac-fs-lead:   clamp(16px, 1.3vw, 18px);   /* large intro/lead copy */
  --ac-fs-body:   clamp(15px, 1.3vw, 17px);   /* standard body/description */
  --ac-fs-sub:    clamp(15px, 1.2vw, 17px);   /* subtitles under headings */
  --ac-fs-small:  14px;                        /* small print */
  --ac-lh-body:   1.7;                         /* comfortable reading */

  --ac-max:           1240px;
  --ac-content:       1120px;
  --ac-radius:        18px;
  --ac-radius-lg:     28px;
  --ac-radius-xl:     48px;
  --ac-ease:          cubic-bezier(.22,.61,.36,1);
}

/* ============================================================
   LIGHT THEME
   Overrides only the CORE page-chrome tokens — background, panel
   surfaces, borders, and text tiers — which is what the header,
   footer, section backgrounds, body copy, and most card/border
   styling actually draw from. Because those are also the tokens
   used to build the two RGB-triplet variables above, this single
   block re-themes the majority of the site's visual surface.

   A few specific dark treatments are deliberately left as-is: the
   loading backdrop behind the hero image/video, the glass dropdown
   behind the desktop nav submenu, and a couple of modal/badge panels
   built for photo/video contrast. Those are backdrop plates *behind
   media*, not page chrome, so they stay dark in both themes by
   design — the same way a photo's own background doesn't change
   colour just because the page around it does.

   Toggled via [data-theme="light"] on <html>, set by inline script in
   <head> (before first paint, to avoid a flash of the wrong theme)
   and by the header toggle button afterwards. See functions.php /
   main.js for the two halves of that mechanism.
   ============================================================ */
html[data-theme="light"] {
  --ac-brand-term:    #000000;
  --ac-bg:            #ffffff;
  --ac-bg-2:          #ffffff;
  --ac-panel:         #ffffff;
  --ac-surface:       rgba(10,9,12,.025);
  --ac-surface-2:     rgba(10,9,12,.04);
  --ac-border:        rgba(10,9,12,.10);
  --ac-border-strong: rgba(10,9,12,.16);

  /* Flips every rule written as rgba(var(--ac-line-rgb),X) or
     rgba(var(--ac-text-rgb),X) from white-on-dark to dark-on-light. */
  --ac-line-rgb: 10,9,12;
  --ac-text-rgb: 20,18,24;
  --ac-grey:          #55525c;

  /* Same hues, darkened until they clear WCAG AA (4.5:1) against the light
     background — verified: orange 5.4:1, pink 6.0:1, green 5.0:1, red 5.8:1. */
  --ac-accent-orange:       #a8481a;
  --ac-accent-orange-hover: #8a3813;
  --ac-accent-pink:         #b02456;
  --ac-status-success:      #1e7a37;
  --ac-status-error:        #b32d2e;

  /* Light frosted glass — same alpha levels, light base colour so the
     header/dropdown/modal read as "frosted white" rather than staying a
     dark bar floating over an otherwise light page. */
  --ac-glass-bg:        rgba(247,245,248,.86);
  --ac-glass-bg-strong: rgba(255,255,255,.97);
  --ac-panel-rgb: 255,255,255;
  --ac-shadow-rgb: 84,19,96; /* deep brand purple, same hue used for the hand-tuned shadows below */
}

/* ============================================================
   LIGHT-MODE SHADOWS — creative, not just "less dark"
   Reusing the dark theme's heavy black shadows at lower opacity still
   reads as a muddy grey smudge on a light surface. Instead these use a
   soft tint pulled from the darkest stop of the brand gradient
   (#541360 → 84,19,96), at a much lower opacity and a softer spread —
   the shadow reads as ambient brand-tinted depth rather than a harsh
   dark blob, which is the same technique many light-mode products use
   instead of a plain grey card shadow.
   ============================================================ */
html[data-theme="light"] {
  /* Dropdown/submenu: was 0 30px 70px rgba(var(--ac-shadow-rgb),.7) */
  --ac-shadow-dropdown: 0 20px 45px rgba(84,19,96,.14);
  /* Preferred Agent popup panel: was 0 40px 100px -30px rgba(var(--ac-shadow-rgb),.85) */
  --ac-shadow-modal: 0 30px 70px -20px rgba(84,19,96,.18);
  /* Floating sticky download-app CTA: was 0 20px 50px rgba(var(--ac-shadow-rgb),.45) */
  --ac-shadow-sticky: 0 14px 34px rgba(84,19,96,.16);
  /* Scrolled header: no shadow before (border-bottom only) — a whisper of
     lift reads better than a flat line once the surface is light. */
  --ac-shadow-header: 0 8px 24px rgba(84,19,96,.06);
  /* Preferred Agent card, on hover: was 0 30px 60px -24px rgba(var(--ac-shadow-rgb),.7) */
  --ac-shadow-agent: 0 20px 40px -20px rgba(84,19,96,.16);
}
html[data-theme="light"] .ac-nav__menu .sub-menu { box-shadow: var(--ac-shadow-dropdown), inset 0 1px 0 rgba(var(--ac-line-rgb),.06); }
html[data-theme="light"] .ac-modal__panel { box-shadow: var(--ac-shadow-modal); }
html[data-theme="light"] .ac-sticky-app { box-shadow: var(--ac-shadow-sticky); }
html[data-theme="light"] .ac-header.is-scrolled { box-shadow: var(--ac-shadow-header); }
html[data-theme="light"] .ac-agent:hover { box-shadow: var(--ac-shadow-agent); }
/* This logo's drop-shadow (blur 40px, .25 opacity) blends subtly into the
   dark page but shows up as a visible pink halo once the page is pure
   white — same class of issue as the other oversized shadows fixed
   earlier, just on a filter instead of a box-shadow. Shared by Express,
   Sell & Win, and Refer & Win (the screenshot that caught this was Refer
   & Win), so fixing this one selector covers all three. */
html[data-theme="light"] .ac-express-hero__logo {
  /* Tried reducing this drop-shadow first (40px→16px blur, .25→.10 opacity)
     but it was still visible as a soft halo — this logo spans up to 460px
     wide, so even a modest blur reads as a smudge on a clean white page
     rather than a subtle touch. Removed entirely for light mode; the
     logo's own gradient provides plenty of visual interest without it. */
  filter: none;
}
html[data-theme="light"] .ac-benefit:hover {
  box-shadow:
    inset 0 1px 0 rgba(var(--ac-line-rgb),.1),
    0 30px 55px -30px rgba(84,19,96,.24),
    0 0 40px -14px rgba(181,13,77,.3);
}
html[data-theme="light"] .ac-ab-hero__badge { box-shadow: 0 20px 45px -20px rgba(84,19,96,.16); }

/* The large decorative background glows (.ac-glow, on hero/features/page-hero
   sections) are colourful blurred circles tuned to blend subtly into a dark
   backdrop. At the same size/opacity on a light background they show up as a
   visible colour smear instead — the opposite of the clean, clear white
   background asked for, so they're turned off entirely in light mode rather
   than just dimmed. */
html[data-theme="light"] .ac-glow { display: none; }

/* ============================================================
   LIGHT-MODE "BOXES" (cards)
   Card backgrounds throughout the site are built as very low-opacity
   tints (2-16%) meant to blend subtly into the dark page. On the now-
   white page those same low opacities read as almost no card at all —
   just a faint smudge, no real separation from the page. Light mode
   gives these a proper solid surface instead: a clean white card (one
   shade lighter than the very slightly toned page background, so it
   still floats visibly above it), a clearer border, and a soft
   brand-tinted shadow for lift — the "enhanced box" look.
   ============================================================ */
html[data-theme="light"] .ac-benefit {
  background:
    radial-gradient(140% 100% at 100% 0%, rgba(181,13,77,.07), transparent 55%),
    #ffffff;
  border: 1px solid var(--ac-border-strong);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 24px 50px -30px rgba(84,19,96,.22);
}
html[data-theme="light"] .ac-agent {
  background: #ffffff;
  border: 1px solid var(--ac-border-strong);
  box-shadow: 0 16px 34px -24px rgba(84,19,96,.18);
}
html[data-theme="light"] .ac-tile {
  background: #ffffff;
  border: 1px solid var(--ac-border-strong);
  box-shadow: 0 16px 34px -24px rgba(84,19,96,.15);
}
html[data-theme="light"] .ac-job {
  background: #ffffff;
  border: 1px solid var(--ac-border-strong);
}
html[data-theme="light"] .ac-job:hover {
  background: #fdfaff;
  box-shadow: 0 16px 34px -26px rgba(84,19,96,.2);
}
html[data-theme="light"] .ac-vac-pill {
  background: #ffffff;
  border: 1px solid var(--ac-border-strong);
}
html[data-theme="light"] .ac-xcard__inner {
  background: #ffffff;
  border: 1px solid var(--ac-border-strong);
  box-shadow: 0 24px 50px -30px rgba(84,19,96,.2);
}
html[data-theme="light"] .ac-xcard__screen {
  background: rgba(84,19,96,.04);
}
html[data-theme="light"] .ac-vac-pill__dot { box-shadow: 0 0 0 3px rgba(30,122,55,.2); }
html[data-theme="light"] .ac-collab {
  background: #ffffff;
  border: 1px solid var(--ac-border-strong);
  box-shadow: 0 24px 55px -32px rgba(84,19,96,.2);
}
html[data-theme="light"] .ac-applybox {
  background: #ffffff;
  border: 1px solid var(--ac-border-strong);
}
/* The hero preview's shadow was 120px blur at .6 opacity — barely visible
   as a subtle dark glow on the dark page, but the same size/strength
   recoloured to purple reads as a glowing halo instead of a shadow once the
   page is light. Both the blur and the opacity come down hard here. */
html[data-theme="light"] .ac-hero__preview {
  /* The frame's border and dark gradient backdrop are drawn for the dark
     page. On a white page they read as a hard box around the video, so both
     are dropped here. border-color rather than border:0 keeps the 1px of
     geometry, so nothing shifts by a pixel when the theme is toggled. */
  border-color: transparent;
  background: transparent;
  /* A soft surround rather than a drop below: a hairline edge to define the
     frame against white, a low ambient glow on all four sides, and a small
     lift underneath. Kept tight — a wide blur in a purple tint reads as a
     halo against white rather than a shadow. */
  box-shadow:
    0 0 0 1px rgba(10,9,12,.06),
    0 2px 12px rgba(84,19,96,.09),
    0 10px 26px -12px rgba(84,19,96,.16);
}
/* Same halo risk as the hero preview above (100px blur, .55 opacity) —
   product mockup images and the active carousel frame. */
html[data-theme="light"] .ac-prod__img {
  box-shadow: 0 20px 40px -20px rgba(84,19,96,.16);
}
html[data-theme="light"] .ac-carousel__slide--active .ac-carousel__frame {
  box-shadow: 0 20px 40px -20px rgba(84,19,96,.16);
}
html[data-theme="light"] .ac-collab__frame {
  box-shadow: 0 24px 50px -24px rgba(198,7,48,.15), 0 16px 34px -20px rgba(84,19,96,.14);
}

/* ============================================================
   RESET / BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--ac-bg); color: var(--ac-text);
  font-family: var(--ac-font-body); font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
h1,h2,h3,h4 { font-family: var(--ac-font-display); font-weight: 600; line-height: 1.1; margin: 0; letter-spacing: -.02em; }

/* The side padding floor was 16px, which on a 390px phone left text 8px from
   the screen edge once the device's own bezel rounding is taken into account.
   20px is the smallest gutter that still reads as a margin rather than an
   accident. env(safe-area-inset) keeps clear of the notch in landscape. */
.ac-container { width: 100%; max-width: var(--ac-max); margin: 0 auto; padding: 0 clamp(20px, 5.5vw, 28px); padding-left: max(clamp(20px, 5.5vw, 28px), env(safe-area-inset-left)); padding-right: max(clamp(20px, 5.5vw, 28px), env(safe-area-inset-right)); }
.ac-content { width: 100%; max-width: var(--ac-content); margin: 0 auto; padding: 0 clamp(20px, 5.5vw, 28px); padding-left: max(clamp(20px, 5.5vw, 28px), env(safe-area-inset-left)); padding-right: max(clamp(20px, 5.5vw, 28px), env(safe-area-inset-right)); }

/* Gradient text helpers */
.ac-grad-brand,
.ac-grad-app,
.ac-grad-head {
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  /* Keep the gradient stable regardless of element width so the same colors
     show on every screen size. */
  background-size: 100% 100%;
}
.ac-grad-brand { background-image: var(--ac-grad-brand); }
.ac-grad-app   { background-image: var(--ac-grad-app); }
.ac-grad-head  { background-image: var(--ac-grad-headline); }

/* Tagline pill */
.ac-tagline {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 4px 16px; border: 1.5px solid currentColor; border-radius: 16px;
  font-family: var(--ac-font-body); font-weight: 600; font-size: 12px;
  /* Two fixes here. The border was a hard-coded #fff, invisible on the light
     page, so the pill lost its outline everywhere in light mode —
     currentColor follows the text and works in both. And --ac-text-3 at 80%
     measured 3.6:1 on the dark page, under the 4.5:1 that 12px text needs;
     --ac-text-2 at the same opacity reads 6.2:1 while staying subdued. */
  letter-spacing: .6px; text-transform: uppercase; color: var(--ac-text-2); opacity: .8;
}
html[data-theme="light"] .ac-tagline { opacity: 1; }

.ac-glow { position: absolute; border-radius: 50%; filter: blur(130px); pointer-events: none; z-index: 0; }

/* ============================================================
   BUTTONS
   ============================================================ */
.ac-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 26px; border-radius: 999px; border: 0;
  font-family: var(--ac-font-display); font-weight: 600; font-size: 15px;
  transition: transform .25s var(--ac-ease), box-shadow .25s var(--ac-ease);
}
.ac-btn--primary { background: var(--ac-grad-btn); color: #fff; box-shadow: 0 8px 30px rgba(181,13,77,.35); }
.ac-btn--primary:hover { transform: translateY(-3px); box-shadow: 0 14px 40px rgba(181,13,77,.5); }
.ac-btn--ghost { background: transparent; color: var(--ac-text); }
.ac-btn--ghost:hover { color: var(--ac-text); }

/* ============================================================
   HEADER / NAV
   ============================================================ */
.ac-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: 20px 0; transition: background .3s var(--ac-ease), backdrop-filter .3s var(--ac-ease), padding .3s var(--ac-ease); }
.ac-header.is-scrolled { background: var(--ac-glass-bg); backdrop-filter: blur(18px); border-bottom: 1px solid var(--ac-border); padding: 12px 0; }
.ac-nav { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
/* position + z-index so the absolutely-positioned centre menu pill (z-index 5,
   below) can never end up stacked over the logo and swallow the click. */
.ac-logo { position: relative; z-index: 6; display: flex; align-items: center; gap: 10px; }
.ac-logo__img { height:42px; width:auto; display:block; }
.ac-logo__mark { width: 44px; height: 44px; border-radius: 50%; object-fit: contain; }
/* Mobile-only CTA lives inside the menu drawer; hidden on desktop */
.ac-mobile-cta { display: none; }
/* Absolutely center the menu pill in the header, independent of logo/actions width */
.ac-nav__menu-wrap { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 4px; background: rgba(var(--ac-line-rgb),.04); border: 1px solid var(--ac-border); padding: 6px; border-radius: 999px; z-index: 5; }

/* The mobile drawer and its backdrop are only used on phones. They are hidden
   by default (desktop) and revealed inside the mobile media query — otherwise
   the drawer's menu renders as a stray visible block at the top of the desktop
   page (the "duplicate menu" bug). */
.ac-mobile-drawer,
.ac-menu-backdrop { display: none; }
.ac-drawer-head { display: none; } /* only shown inside the mobile drawer */
.ac-nav__menu { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.ac-nav__menu li { position: relative; }
.ac-nav__menu a { display: block; padding: 8px 16px; border-radius: 999px; font-size: 15px; font-weight: 500; color: var(--ac-text-3); transition: color .2s, background .2s; }
.ac-nav__menu a:hover, .ac-nav__menu .current-menu-item > a { color: var(--ac-text); background: rgba(var(--ac-line-rgb),.06); }
.ac-nav__menu .menu-item-has-children > a::after { content: "▾"; margin-left: 6px; font-size: 10px; opacity: .6; }
/* Bridge the visual gap so hover never breaks between item and dropdown */
.ac-nav__menu .menu-item-has-children::after {
  content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 22px; z-index: 90;
}
.ac-nav__menu .sub-menu {
  position: absolute; top: calc(100% + 14px); left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 210px; list-style: none; margin: 0; padding: 8px;
  background: var(--ac-glass-bg);
  backdrop-filter: blur(28px) saturate(160%); -webkit-backdrop-filter: blur(28px) saturate(160%);
  border: 1px solid rgba(var(--ac-line-rgb),.10);
  border-radius: 18px; box-shadow: 0 30px 70px rgba(var(--ac-shadow-rgb),.7), inset 0 1px 0 rgba(var(--ac-line-rgb),.06);
  opacity: 0; visibility: hidden; z-index: 100;
  transition: opacity .22s var(--ac-ease), transform .22s var(--ac-ease);
}
.ac-nav__menu li:hover > .sub-menu,
.ac-nav__menu li:focus-within > .sub-menu {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
.ac-nav__menu .sub-menu a {
  color: rgba(var(--ac-line-rgb),.85); border-radius: 10px;
  padding: 9px 14px; font-size: 14px; font-weight: 400; white-space: nowrap;
}
.ac-nav__menu .sub-menu a:hover { color: var(--ac-text); background: rgba(var(--ac-line-rgb),.07); }
.ac-nav__actions { display: flex; align-items: center; gap: 14px; }
.ac-nav__login { font-size: 15px; font-weight: 500; color: var(--ac-text-3); transition: color .2s; }
.ac-nav__login:hover { color: var(--ac-text); }
/* touch-action: manipulation tells the browser this is a discrete tap
   target, not a pan surface. Without it, Android Chrome's gesture
   recognizer can treat a tap near the top of a scrollable, fixed-position
   header as an ambiguous scroll attempt and cancel the pointer sequence
   (firing pointercancel instead of pointerup) rather than completing it —
   which is why the menu button could fail to open specifically on Android
   while working fine on iOS and desktop. */
.ac-nav__toggle { display: none; background: none; border: 0; color: var(--ac-text); padding: 6px; touch-action: manipulation; }

/* ============================================================
   DARK / LIGHT THEME TOGGLE
   The button appears in two contexts: the header, and the mobile
   drawer's own head bar. Both now flip their background with the
   theme (the header via var(--ac-glass-bg), the drawer via
   var(--ac-panel)), so the icon colour flips too rather than staying
   fixed white — a fixed white icon would go invisible against either
   surface once it turns light.
   ============================================================ */
.ac-theme-toggle {
  position: relative;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--ac-border);
  background: rgba(var(--ac-line-rgb),.05);
  /* The header (and the hero behind it, before scrolling) now both flip to
     light in light mode — same fix as the burger icon and nav links. This
     was left as a fixed white on the old assumption that the header always
     stayed dark; once that changed, the toggle for switching OUT of light
     mode would itself have gone invisible against the light header. */
  color: var(--ac-text);
  cursor: pointer;
  flex: 0 0 auto;
  transition: background .2s, border-color .2s;
}
.ac-theme-toggle:hover { background: rgba(var(--ac-line-rgb),.1); }
.ac-theme-toggle svg {
  position: absolute; width: 18px; height: 18px;
  transition: opacity .3s ease, transform .4s var(--ac-ease);
}
/* Dark theme (default): sun is showing — "tap to switch to light". */
.ac-theme-toggle__sun { opacity: 1; transform: rotate(0deg) scale(1); }
.ac-theme-toggle__moon { opacity: 0; transform: rotate(-90deg) scale(.5); }
/* Light theme: moon is showing — "tap to switch to dark". */
html[data-theme="light"] .ac-theme-toggle__sun { opacity: 0; transform: rotate(90deg) scale(.5); }
html[data-theme="light"] .ac-theme-toggle__moon { opacity: 1; transform: rotate(0deg) scale(1); }
@media (prefers-reduced-motion: reduce) {
  .ac-theme-toggle svg { transition: opacity .15s linear; }
}
.ac-nav__toggle svg { width: 26px; height: 26px; }
/* CSS hamburger icon (morphs to X when the menu is open) */
.ac-burger { display: block; position: relative; width: 24px; height: 18px; margin: 0 auto; }
.ac-burger__line {
  position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px; background: currentColor;
  transition: transform .38s var(--ac-ease), opacity .25s var(--ac-ease), width .38s var(--ac-ease);
}
.ac-burger__line--1 { top: 0; }
.ac-burger__line--2 { top: 50%; transform: translateY(-50%); width: 78%; }
.ac-burger__line--3 { bottom: 0; }
.ac-header.is-menu-open .ac-burger__line--1 { top: 50%; transform: translateY(-50%) rotate(45deg); }
.ac-header.is-menu-open .ac-burger__line--2 { opacity: 0; transform: translateY(-50%) scaleX(0); }
.ac-header.is-menu-open .ac-burger__line--3 { bottom: 50%; transform: translateY(50%) rotate(-45deg); width: 100%; }

/* ============================================================
   HERO
   ============================================================ */
.ac-hero { position: relative; padding: 160px 0 60px; text-align: center; overflow: hidden; }
.ac-hero .ac-glow--1 { width: 1200px; height: 700px; background: rgba(198,7,48,.18); top: -260px; left: 50%; transform: translateX(-50%); border-radius: 50%; }
.ac-hero__inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.ac-hero__title { font-size: clamp(26px, 3.6vw, 38px); line-height: 1.16; letter-spacing: -.02em; max-width: 600px; }
/* Brand-gradient hero title. If it has no [bracketed] span, the whole title is
   gradient; if it does, only that inner span is gradient (outer stays light). */
.ac-hero__title--grad {
  background-image: var(--ac-grad-brand);
  background-repeat: no-repeat; background-size: 100% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.ac-hero__title--grad:has(.ac-grad-brand) {
  background: none; -webkit-text-fill-color: var(--ac-text); color: var(--ac-text);
}
.ac-hero__subtitle { font-family: var(--ac-font-body); font-weight: 400; font-size: var(--ac-fs-sub); line-height: 1.65; letter-spacing: .01em; color: var(--ac-grey); max-width: 620px; margin: 0; }
.ac-hero__cta { margin-top: 10px; display: flex; gap: 14px; justify-content: center; }

/* dashboard statement card */
.ac-hero__preview { position: relative; z-index: 2; max-width: var(--ac-content); margin: 56px auto 0; border-radius: var(--ac-radius-lg); overflow: hidden; border: 1px solid var(--ac-border-strong); background: linear-gradient(180deg, rgba(30,26,38,.9), rgba(13,11,16,.9)); box-shadow: 0 40px 120px rgba(var(--ac-shadow-rgb),.6); }
.ac-hero__preview img { width: 100%; display: block; }
.ac-hero__preview-fallback { aspect-ratio: 1176 / 836; display: grid; place-items: center; background: radial-gradient(120% 120% at 50% 0%, rgba(198,7,48,.12), transparent 60%), var(--ac-bg-2); }


/* Video fills a wide, short banner (cropped to cover) rather than its full native height. */
.ac-hero__video { width:100%; height:auto; display:block; }
.ac-hero__embed { position:relative; width:100%; aspect-ratio:16/9; }
.ac-hero__embed iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }

/* Desktop: wide banner, capped at 500px tall so it stays a controlled band. */
@media (min-width: 901px) {
  .ac-hero__preview { max-width: min(1320px, 94vw); }
  .ac-hero__video.ac-hero__media--desktop,
  .ac-hero__video:not(.ac-hero__media--mobile) {
    height: auto; aspect-ratio: 16 / 9; object-fit: cover;
    max-height: 500px;
  }
  .ac-hero__embed.ac-hero__media--desktop,
  .ac-hero__embed:not(.ac-hero__media--mobile) { aspect-ratio: 16 / 9; max-height: 500px; }
  .ac-hero__preview img { aspect-ratio: 16 / 9; object-fit: cover; max-height: 500px; }
}
/* Mobile: a taller banner so a portrait/vertical mobile video isn't cropped.
   The dedicated mobile video gets a tall ratio; the fallback (desktop video
   shown on small screens) keeps a gentler ratio. */
@media (max-width: 900px) {
  .ac-hero__video { aspect-ratio: 16 / 12; object-fit: cover; }
  .ac-hero__preview img { aspect-ratio: 16 / 12; object-fit: cover; }
}
@media (max-width: 600px) {
  /* The actual mobile video is usually portrait — give it real height and
     show the whole frame so nothing important is cut off. */
  .ac-hero__video.ac-hero__media--mobile {
    aspect-ratio: 3 / 4; object-fit: cover; max-height: 78vh;
  }
}

/* Responsive video visibility — these must override the base display above,
   so they come after and target the same elements specifically. */
.ac-hero__video.ac-hero__media--desktop,
.ac-hero__embed.ac-hero__media--desktop { display: block; }
.ac-hero__video.ac-hero__media--mobile,
.ac-hero__embed.ac-hero__media--mobile { display: none; }
@media (max-width:600px){
  .ac-hero__video.ac-hero__media--desktop,
  .ac-hero__embed.ac-hero__media--desktop { display: none; }
  .ac-hero__video.ac-hero__media--mobile,
  .ac-hero__embed.ac-hero__media--mobile { display: block; }
}

.ac-hero__play { position: absolute; inset: 0; margin: auto; width: 74px; height: 74px; border-radius: 50%; background: var(--ac-grad-btn); border: 0; display: grid; place-items: center; box-shadow: 0 10px 40px rgba(198,7,48,.5); transition: transform .3s var(--ac-ease); }
.ac-hero__play:hover { transform: scale(1.1); }
.ac-hero__play svg { width: 26px; height: 26px; fill: #fff; margin-left: 3px; }

/* ============================================================
   SECTION SHELL
   ============================================================ */
.ac-section { position: relative; padding: clamp(48px, 8vw, 90px) 0; }
.ac-section__head { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; margin-bottom: 56px; }
.ac-section__title { font-size: clamp(28px, 4vw, 40px); line-height: 1.18; letter-spacing: -.02em; }

/* ============================================================
   FEATURES — title + shape image (admin-controlled)
   ============================================================ */
.ac-features {
  position: relative;
  /* overflow:hidden is here to stop the big decorative glow from widening the
     page. It also clips the orbit tooltips, and the bottom bubble's tip needs
     ~95px below the orbit box against ~90px of section padding — so it was cut
     in half. `overflow: clip` does the same containment but honours
     overflow-clip-margin, which lets the tooltip escape by a set amount while
     the glow stays contained. The hidden declaration stays first as the
     fallback for engines that don't support clip. */
  overflow: hidden;
  overflow: clip;
  overflow-clip-margin: 160px;
}
.ac-features .ac-glow--2 { width: 900px; height: 670px; background: rgba(138,29,152,.14); top: 12%; left: 50%; transform: translateX(-50%); }
.ac-features__shape { position: relative; z-index: 2; margin: 56px auto 0; }
.ac-features__shape img { width: 100%; height: auto; display: block; }
.ac-features__placeholder {
  position: relative; z-index: 2; max-width: 560px; margin: 56px auto 0; aspect-ratio: 1/.78;
  display: grid; place-items: center; text-align: center; padding: 24px;
  border: 1px dashed var(--ac-border-strong); border-radius: 24px;
  background: radial-gradient(120% 120% at 50% 30%, rgba(198,7,48,.08), transparent 70%);
}
.ac-features__placeholder span { color: var(--ac-text-3); font-family: var(--ac-font-body); font-size: 14px; max-width: 320px; }

/* ============================================================
   ORBIT — 4 product bubbles in a plus layout, connected to a
   central logo. Connector lines draw in (start) and settle (end)
   when the section scrolls into view; bubbles float gently.
   ============================================================ */
.ac-orbit {
  position: relative; z-index: 2; width: min(680px, 90vw); aspect-ratio: 1 / 1;
  /* The bottom margin is room for the bottom bubble's hover tooltip, for
     engines that clip regardless of overflow-clip-margin (Safari). */
  margin: 40px auto 56px;
}

/* Connector lines (SVG) from center out to each bubble. */
.ac-orbit__spokes { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 1; fill: none; }

/* Outer dashed ring passing through the four bubbles. */
.ac-orbit__ring-path {
  fill: none; stroke: rgba(var(--ac-line-rgb),.5); stroke-width: 2;
  stroke-dasharray: 3 4; stroke-linecap: round; vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 4px rgba(181,13,77,.5));
  /* Draw-in: the whole ring traces around. Circumference ≈ 2πr = 2π·38 ≈ 239 user units. */
  stroke-dashoffset: 239; opacity: 0;
  transition: stroke-dashoffset 1.6s var(--ac-ease), opacity .6s ease;
}
.ac-orbit.is-visible .ac-orbit__ring-path,
.ac-reveal.is-visible .ac-orbit__ring-path { stroke-dashoffset: 0; opacity: 1; }
/* Keep the dashes visible after the draw-in completes. */
@supports (stroke-dasharray: 3 4) {
  .ac-orbit.is-visible .ac-orbit__ring-path { animation: acRingDash 1.6s var(--ac-ease) forwards; }
}
@keyframes acRingDash {
  from { stroke-dasharray: 239; stroke-dashoffset: 239; }
  to   { stroke-dasharray: 3 4; stroke-dashoffset: 0; }
}

/* Solid inner curves arcing toward the center — bolder so the connections read. */
.ac-orbit__curve {
  fill: none; stroke: rgba(var(--ac-line-rgb),.28); stroke-width: 1.6;
  stroke-linecap: round; vector-effect: non-scaling-stroke;
  stroke-dasharray: 38; stroke-dashoffset: 38; opacity: 0;
  transition: stroke-dashoffset 1.1s var(--ac-ease), opacity .5s ease;
}
.ac-orbit.is-visible .ac-orbit__curve,
.ac-reveal.is-visible .ac-orbit__curve { stroke-dashoffset: 0; opacity: 1; }
.ac-orbit__curve:nth-of-type(1) { transition-delay: .5s; }
.ac-orbit__curve:nth-of-type(2) { transition-delay: .7s; }
.ac-orbit__curve:nth-of-type(3) { transition-delay: .9s; }
.ac-orbit__curve:nth-of-type(4) { transition-delay: 1.1s; }

/* Bubbles — positioned in a plus around the center (static layout). */
.ac-orbit__bubble {
  position: absolute; width: 26%; aspect-ratio: 1 / 1;
  left: 50%; top: 50%; margin: -13% 0 0 -13%; z-index: 2;
  text-decoration: none; cursor: pointer;
}
.ac-orbit__bubble--top    { transform: translateY(-142%); }
.ac-orbit__bubble--right  { transform: translateX(142%); }
.ac-orbit__bubble--bottom { transform: translateY(142%); }
.ac-orbit__bubble--left   { transform: translateX(-142%); }

/* Inner circle: floats gently and fades/scales in after its line connects. */
.ac-orbit__bubble-inner {
  position: absolute; inset: 0; border-radius: 50%;
  display: grid; place-items: center; text-align: center;
  /* Layered glass: brand-tinted top sheen fading into deep dark, so the circle
     reads as a rounded glossy disc rather than a flat fill. */
  background:
    radial-gradient(90% 70% at 50% 12%, rgba(var(--ac-line-rgb),.09) 0%, rgba(var(--ac-line-rgb),0) 42%),
    radial-gradient(130% 130% at 50% 18%, #2a2336 0%, #191320 46%, #0c0912 100%);
  border: 1px solid rgba(var(--ac-line-rgb),.10);
  box-shadow:
    0 30px 60px -20px rgba(var(--ac-shadow-rgb),.75),
    0 0 40px -14px rgba(181,13,77,.30),
    inset 0 1px 0 rgba(var(--ac-line-rgb),.12),
    inset 0 -18px 40px -20px rgba(var(--ac-shadow-rgb),.7);
  opacity: 0; transform: scale(.82);
  transition: transform .5s var(--ac-ease), box-shadow .4s var(--ac-ease), border-color .4s, opacity .5s ease;
}
.ac-orbit.is-visible .ac-orbit__bubble-inner,
.ac-reveal.is-visible .ac-orbit__bubble-inner {
  /* `transform: none`, NOT `scale(1)`. The bubbles reveal from scale(.82),
     which puts them on a compositor layer that gets rasterised at 0.82 of
     their real size. A transform that merely EQUALS the identity still
     counts as a transform, so the layer — and its under-sampled raster —
     survives the transition and the SVG art stays visibly blocky. Ending on
     `none` lets the layer be dropped and the art re-rasterised at 1:1. */
  opacity: 1; transform: none;
  animation: acFloat 6s ease-in-out infinite;
}
/* Reveal each bubble just after its connector line reaches it. */
.ac-orbit__bubble--top    .ac-orbit__bubble-inner { transition-delay: .45s; animation-delay: 0s; }
.ac-orbit__bubble--right  .ac-orbit__bubble-inner { transition-delay: .65s; animation-delay: -1.5s; }
.ac-orbit__bubble--bottom .ac-orbit__bubble-inner { transition-delay: .85s; animation-delay: -3s; }
.ac-orbit__bubble--left   .ac-orbit__bubble-inner { transition-delay: 1.05s; animation-delay: -4.5s; }

@keyframes acFloat {
  0%,100% { translate: 0 0; }
  50%     { translate: 0 -8px; }
}

/* Hover: scale up + brand glow + brighter rim. */
.ac-orbit__bubble:hover .ac-orbit__bubble-inner {
  transform: scale(1.08);
  border-color: rgba(221,81,28,.55);
  box-shadow:
    0 44px 90px -22px rgba(var(--ac-shadow-rgb),.85),
    0 0 0 1px rgba(221,81,28,.4),
    0 0 70px -6px rgba(181,13,77,.6),
    inset 0 1px 0 rgba(var(--ac-line-rgb),.16),
    inset 0 -18px 40px -20px rgba(var(--ac-shadow-rgb),.7);
}
.ac-orbit__bubble-label {
  font-family: var(--ac-font-display); font-weight: 600;
  font-size: clamp(15px, 1.9vw, 24px); line-height: 1.22; color: var(--ac-text);
  padding: 0 8px; position: relative; z-index: 1;
}
/* When a bubble uses an uploaded illustration (which already includes its own
   circle + ring), let the SVG BE the circle — no extra CSS background or
   border, so there's only one clean circle edge (the SVG's own). */
.ac-orbit__bubble-inner:has(img),
.ac-orbit__bubble--img .ac-orbit__bubble-inner {
  background: none;
  border: 0;
  box-shadow: 0 30px 60px -22px rgba(var(--ac-shadow-rgb),.7);
  overflow: visible;
}
.ac-orbit__bubble--img:hover .ac-orbit__bubble-inner {
  box-shadow: 0 40px 80px -20px rgba(var(--ac-shadow-rgb),.8), 0 0 60px -8px rgba(181,13,77,.5);
}
/* SVG art fills the whole bubble so its own circle is the edge. */
.ac-orbit__bubble-inner img { width: 100%; height: 100%; object-fit: contain; position: relative; z-index: 1; }

/* Center logo orb. */
.ac-orbit__center {
  position: absolute; left: 50%; top: 50%; width: 18%; aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%) scale(.7); opacity: 0;
  border-radius: 50%; display: grid; place-items: center; z-index: 4;
  background: radial-gradient(120% 120% at 50% 20%, #23202b, #0b090f 80%);
  border: 3px solid rgba(var(--ac-line-rgb),.85);
  box-shadow: 0 30px 60px -18px rgba(var(--ac-shadow-rgb),.75), 0 0 40px -6px rgba(181,13,77,.35);
  transition: transform .55s var(--ac-ease), opacity .5s ease;
}
.ac-orbit.is-visible .ac-orbit__center,
.ac-reveal.is-visible .ac-orbit__center {
  /* Reveals from scale(.7) — a 30% under-sample, which is why the centre
     logo was the blurriest thing in the diagram. The translate has to stay
     (it does the centring) but the scale is dropped at rest. */
  opacity: 1; transform: translate(-50%, -50%);
  animation: acFloat 5s ease-in-out infinite;
}
.ac-orbit__center img { width: 72%; height: auto; border-radius: 50%; }
/* When the center is an uploaded illustration (own circle + ring baked in),
   drop the CSS background/border and let the image fill the whole orb. */
.ac-orbit__center--img {
  background: none; border: 0;
  box-shadow: 0 30px 60px -18px rgba(var(--ac-shadow-rgb),.6), 0 0 50px -8px rgba(181,13,77,.4);
  width: 20%;
}
.ac-orbit__center--img img { width: 100%; height: 100%; object-fit: contain; border-radius: 0; }
.ac-orbit__center-fallback { font-family: var(--ac-font-display); font-weight: 700; font-size: 11px; text-align: center; color: var(--ac-text); padding: 0 6px; }

/* Respect reduced-motion preferences: show everything, no motion. */
@media (prefers-reduced-motion: reduce) {
  .ac-orbit__ring-path, .ac-orbit__curve { stroke-dashoffset: 0; opacity: 1; transition: none; animation: none; }
  .ac-orbit__bubble-inner, .ac-orbit__center { opacity: 1; transform: none; animation: none !important; transition: none; }
  .ac-orbit__center { transform: translate(-50%, -50%); }
}
/* ============================================================
   ORBIT — RESPONSIVE GEOMETRY
   The dashed ring is drawn at r=38 in a 0-100 viewBox, i.e. 38% of the
   box width. For the design to read correctly the bubbles must sit
   CENTRED ON that ring, so:
        translate = 0.38 / bubble-fraction
   With a 28% bubble that is 136%. (An earlier 125% left the bubbles
   sitting inside the ring, which is why there was a visible gap between
   the bubbles and the dashed circle.)
   Shape width = 2 x (0.38 + bubble/2) x box = 1.04 x box, so a 93vw box
   keeps everything inside .ac-features, which clips with overflow:hidden.
   ============================================================ */

/* Tablets / large phones */
@media (max-width: 900px) {
  .ac-orbit { width: min(68vw, 500px); margin-top: 32px; }
  .ac-orbit__bubble { width: 28%; margin: -14% 0 0 -14%; }
  .ac-orbit__bubble--top    { transform: translateY(-136%); }
  .ac-orbit__bubble--right  { transform: translateX(136%); }
  .ac-orbit__bubble--bottom { transform: translateY(136%); }
  .ac-orbit__bubble--left   { transform: translateX(-136%); }
  .ac-orbit__center { width: 22%; }
}

/* Phones */
@media (max-width: 560px) {
  /* Tighten the run-up to the orbit — the section head's 56px margin plus the
     orbit's own margin left a large empty band above the diagram on phones. */
  .ac-features .ac-section__head { margin-bottom: 24px; }
  .ac-features { padding-top: clamp(32px, 6vw, 48px); padding-bottom: clamp(24px, 5vw, 40px); }
  .ac-orbit {
    width: 93vw;
    max-width: 400px;
    margin: 8px auto 0;
  }
  .ac-orbit__bubble { width: 28%; margin: -14% 0 0 -14%; }
  .ac-orbit__bubble--top    { transform: translateY(-136%); }
  .ac-orbit__bubble--right  { transform: translateX(136%); }
  .ac-orbit__bubble--bottom { transform: translateY(136%); }
  .ac-orbit__bubble--left   { transform: translateX(-136%); }
  /* Labels were too small to read on a phone. Bigger, tighter, and allowed
     to use the full bubble width. */
  .ac-orbit__bubble-label {
    font-size: clamp(12px, 3.6vw, 16px);
    line-height: 1.15;
    padding: 0 4px;
    max-width: 96%;
  }
  .ac-orbit__center { width: 22%; }
}

/* ============================================================
   TRUSTED / LOGO MARQUEE
   ============================================================ */
.ac-trusted__head { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; margin-bottom: 44px; }
.ac-marquee { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.ac-marquee__track { display: flex; gap: 80px; width: max-content; align-items: center; animation: ac-scroll 30s linear infinite; }
.ac-marquee:hover .ac-marquee__track { animation-play-state: paused; }
.ac-marquee__item { display: flex; align-items: center; height: 56px; opacity: .5; transition: opacity .3s, filter .3s; font-family: var(--ac-font-display); font-weight: 700; font-size: 26px; color: var(--ac-text-3); white-space: nowrap; }
.ac-marquee__item img { height: 34px; width: auto; object-fit: contain; filter: grayscale(1) brightness(1.7); }
/* The brightness(1.7) above washes the logo out toward white/light-grey so
   it reads as a subtle mark against the DARK page. On the light page that
   same push-toward-white makes it a light mark on a light background —
   invisible. Light mode instead pushes it toward black, so the logo reads
   as a subtle dark mark on white, matching the same "muted until hover"
   intent in both themes. */
html[data-theme="light"] .ac-marquee__item img { filter: grayscale(1) brightness(.55); }
/* Dark mode reveals the logo's real brand colour on hover. Light mode
   instead goes to solid black — brightness(0) after grayscale crushes it
   to pure black rather than showing colour, per request. */
html[data-theme="light"] .ac-marquee__item:hover img { filter: grayscale(1) brightness(0); }

/* Auto-darkens a bundled product logo that's a near-white SVG (designed for
   the dark page) when no custom light-mode logo has been uploaded for it —
   see the PHP templates for exactly which logos this applies to. invert(1)
   turns #F8F8F8 into #070707, i.e. white becomes black. Only ever added
   when there's no data-light-src on the same image, so an uploaded custom
   light-mode logo is never affected by this filter. */
html[data-theme="light"] .ac-logo--auto-dark { filter: invert(1); }

/* Dark backdrop chip for the Express gradient-mesh logo (see PHP notes on
   the three places it's used). Padding + rounded corners give the logo a
   small guaranteed-dark plate to sit on, so any near-white gradient stops
   stay visible regardless of the page behind it. */
html[data-theme="light"] .ac-logo--needs-backdrop {
  background: #17141c;
  border-radius: 14px;
  padding: 10px 16px;
  box-shadow: 0 10px 24px -14px rgba(84,19,96,.3);
}
.ac-marquee__item:hover { opacity: 1; color: var(--ac-text); }
.ac-marquee__item:hover img { filter: grayscale(0) brightness(1); }
@keyframes ac-scroll { to { transform: translateX(-50%); } }

/* ============================================================
   PRODUCT SECTIONS (Express / Calculate / Sell & Win)
   ============================================================ */

/* ---- Express centered section header (مصاريفك Express + subtitle) ---- */
.ac-express-head { text-align: center; max-width: 800px; margin: 0 auto 70px; }
.ac-express-head__lockup { display: inline-flex; flex-direction: column; align-items: center; line-height: 1; }
.ac-express-head__ar { font-family: var(--ac-font-ar); font-size: 40px; line-height: 1; margin-bottom: -6px; }
.ac-express-head__ar-img { height: 46px; width: auto; display: block; margin: 0 auto 2px; }
.ac-express-head__en { font-family: var(--ac-font-display); font-weight: 600; font-size: clamp(36px, 5vw, 56px); line-height: 1; letter-spacing: -.02em; color: var(--ac-text); }
.ac-express-head__sub { font-family: var(--ac-font-body); font-weight: 400; font-size: var(--ac-fs-sub); line-height: 1.65; color: var(--ac-text-3); margin: 20px auto 0; max-width: 560px; }
@media (max-width: 768px) {
  .ac-express-head { margin-bottom: 44px; }
  .ac-express-head__ar { font-size: 30px; }
  .ac-express-head__ar-img { height: 34px; }
}

.ac-prod { position: relative; padding: clamp(40px, 6vw, 70px) 0; overflow: hidden; }
.ac-prod__row { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; max-width: var(--ac-content); margin: 0 auto; }
.ac-prod__row--rev .ac-prod__media { order: 2; }
.ac-prod__heading { display: grid; justify-items: start; margin-bottom: 24px; }
.ac-prod__ar { font-family: var(--ac-font-ar); font-size: 56px; line-height: 1; color: var(--ac-text-3); margin-left: 44px; }
.ac-prod__ar-img { width: 148px; height: auto; margin-left: 44px; margin-bottom: -18px; }
.ac-prod__en { font-family: var(--ac-font-display); font-weight: 600; font-size: clamp(34px, 4.5vw, 52px); line-height: 1; margin-top: -12px; }
.ac-prod__head-img { max-width:100%; height:auto; max-height:80px; width:auto; display:block; }
.ac-prod__en--plain { color: var(--ac-text); }
/* Dimming lives in the colour alpha, not in `opacity`: opacity applies to the
   whole subtree and would cap the highlighted product names too. .50 x .85 is
   .425, so the body copy renders exactly as before. */
.ac-prod__text { font-family: var(--ac-font-body); font-weight: 400; font-size: var(--ac-fs-lead); line-height: 1.75; color: rgba(var(--ac-text-rgb),.425); max-width: 503px; }

/* ---- Express glass card (pure CSS, Figma-exact) ---- */
.ac-xcard { position: relative; }
.ac-xcard__inner { position: relative; border: 1px solid var(--ac-border); border-radius: var(--ac-radius-xl); padding: 24px; overflow: hidden; background: linear-gradient(180deg, rgba(var(--ac-text-rgb),.03), rgba(var(--ac-text-rgb),.01)); }
.ac-xcard__glow { position: absolute; inset: 0; border-radius: var(--ac-radius-xl); background: radial-gradient(120% 90% at 20% 20%, rgba(198,7,48,.16), transparent 55%), radial-gradient(120% 90% at 90% 80%, rgba(138,29,152,.16), transparent 55%); z-index: 0; }
.ac-xcard__screen { position: relative; z-index: 1; background: rgba(var(--ac-line-rgb),.10); border-radius: 26px; padding: 25px 20px; overflow: hidden; }
.ac-xcard__title { font-family: var(--ac-font-ui); font-weight: 600; font-size: 26px; line-height: 1.3; color: var(--ac-text); margin: 0 0 8px; max-width: 354px; }
.ac-xcard__ar-img { height:1.1em; width:auto; vertical-align:-.12em; display:inline-block; }
.ac-xcard__title .ar { font-family: var(--ac-font-ar); font-size: 34px; font-weight: 400; }
.ac-xcard__sub { font-family: var(--ac-font-ui); font-size: 14px; letter-spacing: .07px; color: var(--ac-text); margin: 0 0 20px; }
.ac-xcard__field { position: relative; display: flex; align-items: center; height: 48px; padding: 0 16px; margin-bottom: 12px; background: rgba(var(--ac-line-rgb),.13); border: .5px solid var(--ac-border); border-radius: 12px; font-family: var(--ac-font-ui); font-size: 14px; color: var(--ac-text-2); letter-spacing: -.14px; }
.ac-xcard__field .chev { margin-left: auto; opacity: .7; }
.ac-xcard__row2 { display: flex; gap: 12px; }
.ac-xcard__row2 .ac-xcard__field { flex: 1; }
.ac-xcard__amount { display: flex; align-items: center; height: 57px; padding: 8px 12px 8px 16px; margin-bottom: 12px; background: rgba(var(--ac-line-rgb),.12); border: .5px solid var(--ac-border); border-radius: 14px; }
.ac-xcard__amount .label { font-family: var(--ac-font-jakarta); font-weight: 600; font-size: 14px; color: var(--ac-text); letter-spacing: .07px; }
.ac-xcard__amount .val { margin-left: auto; font-family: var(--ac-font-ui); color: var(--ac-magenta); }
.ac-xcard__amount .val b { font-weight: 700; font-size: 18px; }
.ac-xcard__amount .val span { font-size: 16px; }
.ac-xcard__tabs { display: flex; align-items: center; gap: 4px; background: rgba(var(--ac-line-rgb),.28); border-radius: 16px; padding: 5px; }
.ac-xcard__tab { flex: 1; text-align: center; padding: 9px; border-radius: 12px; font-family: var(--ac-font-ui); font-size: 14px; letter-spacing: .2px; color: var(--ac-text-2); }
.ac-xcard__tab--active { background: rgba(var(--ac-line-rgb),.4); color: var(--ac-text); font-weight: 600; }

/* floating glass badges */
.ac-badge { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 8px; padding: 7px 18px 7px 7px; border-radius: 68px; background: rgba(var(--ac-line-rgb),.10); backdrop-filter: blur(16px); box-shadow: 0 18px 26px -12px rgba(18,18,18,.4), inset 2px 4px 16px 0 rgba(var(--ac-text-rgb),.06); }
.ac-badge__icon { width: 32px; height: 32px; border-radius: 32px; display: grid; place-items: center; border: 1px solid rgba(var(--ac-line-rgb),.4); background: rgba(40,40,40,.6); backdrop-filter: blur(16px); }
.ac-badge__icon svg { width: 16px; height: 16px; stroke: #fff; fill: none; }
.ac-badge span { font-family: var(--ac-font-body); font-weight: 500; font-size: 13px; color: var(--ac-text); opacity: .9; white-space: nowrap; }
.ac-badge--tl { left: -32px; top: 42%; animation: ac-float 3s ease-in-out infinite; }
.ac-badge--tr { right: -14px; top: 6%; animation: ac-float 3.6s ease-in-out infinite .4s; }
.ac-xcard:hover .ac-badge--tl, .ac-xcard:hover .ac-badge--tr { animation-play-state: paused; }
@keyframes ac-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

/* product image mockups (Calculate / Sell&Win use uploaded PNGs) */
.ac-prod__img { position: relative; z-index: 1; width: 100%; border-radius: var(--ac-radius-xl); box-shadow: 0 40px 100px rgba(var(--ac-shadow-rgb),.55); transition: transform .4s var(--ac-ease); }
.ac-prod__video { display: block; height: auto; object-fit: cover; }
.ac-prod__media:hover .ac-prod__img { transform: translateY(-4px); }

/* ============================================================
   DOWNLOAD / CTA
   ============================================================ */
.ac-cta { position: relative; padding: 60px 0 0; overflow: hidden; }
.ac-cta__inner { position: relative; max-width: var(--ac-content); margin: 0 auto; border-radius: 40px; padding: 80px 24px 0; text-align: center; overflow: hidden; background: radial-gradient(120% 80% at 50% 0%, rgba(198,7,48,.16), transparent 55%), rgba(var(--ac-line-rgb),.02); border: 1px solid var(--ac-border); }
.ac-cta__stars { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.ac-cta__title { position: relative; z-index: 2; font-family: var(--ac-font-display); font-weight: 600; font-size: clamp(32px, 4.5vw, 52px); line-height: 1.08; letter-spacing: -.02em; color: rgba(var(--ac-text-rgb),.95); opacity: .8; }
.ac-cta__sub { position: relative; z-index: 2; font-family: var(--ac-font-body); font-weight: 400; font-size: var(--ac-fs-lead); line-height: 1.6; color: var(--ac-text-2); margin-top: 18px; }
.ac-cta__stores { position: relative; z-index: 2; display: flex; gap: 14px; justify-content: center; margin-top: 30px; flex-wrap: wrap; }
.ac-store { display: inline-flex; align-items: center; gap: 10px; padding: 8px 20px 8px 8px; border-radius: 14px; background: rgba(var(--ac-line-rgb),.05); border: 1px solid var(--ac-border-strong); transition: transform .25s var(--ac-ease), background .25s; }
.ac-store:hover { transform: translateY(-3px); background: rgba(var(--ac-line-rgb),.09); }
.ac-store__ic { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; }
.ac-store__ic svg { width: 24px; height: 24px; }
/* The App Store glyph uses currentColor and should match the page text
   colour — the button's own background is just a subtle 5% tint sitting
   directly on the page (not an opaque dark chip), so a fixed white glyph
   went invisible once the page turned light. The Google Play glyph carries
   its own per-path hex colors and must keep them, so only currentColor
   paths are tinted, never the coloured ones. */
.ac-store__ic svg path[fill="currentColor"],
.ac-store__ic svg path:not([fill]) { fill: var(--ac-text); }
.ac-store small { display: block; font-family: var(--ac-font-ui); font-size: 11px; color: var(--ac-text-3); }
.ac-store strong { font-family: var(--ac-font-display); font-size: 15px; }

.ac-app-mockup { width:100%; max-width:1000px; height:auto; display:block; margin:40px auto 0; position:relative; z-index:2; }
/* Keep the mockup sharp when the browser scales it down: high-quality
   downscaling instead of the fast/blurry default, and never let it be
   upscaled past its natural size (which is what looks "low resolution"). */
.ac-app-mockup { image-rendering: auto; }
@media (max-width: 768px) {
  .ac-app-mockup:not(.ac-app-mockup--ph) {
    /* Full container width. A previous version bled past the container with
       negative margins, which pushed the document wider than the viewport and
       created a horizontal scrollbar / sideways drag on phones. */
    width: 100%;
    max-width: 100%;
    margin-top: 28px;
  }
}
.ac-app-mockup--ph { aspect-ratio:16/8; display:grid; place-items:center; border:1px dashed var(--ac-border-strong); border-radius:24px; background:radial-gradient(120% 120% at 50% 0%, rgba(198,7,48,.08), transparent 70%); }
.ac-app-mockup--ph span { color:var(--ac-text-3); font-family:var(--ac-font-body); font-size:14px; }

.ac-cta__phones { position: relative; z-index: 2; margin-top: 50px; display: flex; justify-content: center; gap: 24px; flex-wrap: wrap; padding-bottom: 0; }
.ac-phone { width: 260px; height: 240px; border-radius: 30px 30px 0 0; border: 1px solid var(--ac-border); border-bottom: 0; padding: 20px; overflow: hidden; }
.ac-phone--dark { background: linear-gradient(180deg, rgba(30,26,38,.9), transparent); }
.ac-phone--light { background: linear-gradient(180deg, #fff, transparent); display: grid; place-items: center; }
.ac-phone--light strong { color: #111; font-family: var(--ac-font-display); }
.ac-phone__label { font-family: var(--ac-font-body); font-size: 12px; color: var(--ac-text-3); margin-bottom: 10px; }
.ac-phone__bar { height: 60px; border-radius: 12px; background: var(--ac-grad-btn); }
.ac-phone-img { width: 260px; height: auto; align-self: flex-end; }

/* ============================================================
   FOOTER
   ============================================================ */
.ac-footer { padding: 60px 0 30px; border-top: 1px solid var(--ac-border); margin-top: 40px; }
.ac-footer__grid { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 40px; max-width: var(--ac-max); margin: 0 auto; }
.ac-footer__brand p { color: var(--ac-text-3); font-family: var(--ac-font-body); font-size: 14px; max-width: 258px; margin: 16px 0 20px; }
.ac-footer__social { display: flex; gap: 12px; }
.ac-footer__social a { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(var(--ac-line-rgb),.05); border: 1px solid var(--ac-border); transition: background .2s, transform .2s; color: var(--ac-text-2); }
.ac-footer__social a:hover { background: var(--ac-grad-btn); transform: translateY(-2px); color: #fff; }
.ac-footer__social svg { width: 16px; height: 16px; fill: currentColor; }
.ac-footer__col h4 { font-family: var(--ac-font-display); font-size: 15px; margin-bottom: 18px; }
.ac-footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.ac-footer__col a { font-family: var(--ac-font-body); font-size: 14px; color: var(--ac-text-3); transition: color .2s; }
.ac-footer__col a:hover { color: var(--ac-text); }
.ac-footer__bottom { display: flex; justify-content: space-between; gap: 20px; max-width: var(--ac-max); margin: 50px auto 0; padding: 24px 24px 0; border-top: 1px solid var(--ac-border); font-family: var(--ac-font-body); font-size: 13px; color: var(--ac-text-3); }
.ac-footer__bottom-links { display: flex; gap: 24px; }
.ac-footer__bottom-links a:hover { color: var(--ac-text); }

/* ============================================================
   SCROLL REVEAL
   Content is VISIBLE by default. The hidden starting state is only
   applied once JS has confirmed it is running, by adding .ac-js to
   <html>. Previously .ac-reveal started at opacity:0 unconditionally,
   so if main.js was slow (it loads in the footer) or failed, whole
   sections stayed blank — which looked like a very slow page.
   ============================================================ */
.ac-reveal { opacity: 1; transform: none; }
.ac-js .ac-reveal {
  opacity: 0; transform: translateY(28px);
  transition: opacity .7s var(--ac-ease), transform .7s var(--ac-ease);
}
.ac-js .ac-reveal.is-visible { opacity: 1; transform: none; }
/* Stagger. This stopped at 3, so the fourth card in any grid — and every
   card after it — had no delay and the run arrived as one block instead of
   in sequence. Steps of 70ms: enough to read as a cascade, short enough that
   the last item is not left waiting. */
.ac-js .ac-reveal[data-delay="1"] { transition-delay: .07s; }
.ac-js .ac-reveal[data-delay="2"] { transition-delay: .14s; }
.ac-js .ac-reveal[data-delay="3"] { transition-delay: .21s; }
.ac-js .ac-reveal[data-delay="4"] { transition-delay: .28s; }
.ac-js .ac-reveal[data-delay="5"] { transition-delay: .35s; }
.ac-js .ac-reveal[data-delay="6"] { transition-delay: .42s; }
.ac-js .ac-reveal[data-delay="7"] { transition-delay: .49s; }
.ac-js .ac-reveal[data-delay="8"] { transition-delay: .56s; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 980px) {
  .ac-hiw__grid { grid-template-columns: 1fr; max-width: 460px; }
  .ac-prod__row { grid-template-columns: 1fr; gap: 36px; }
  .ac-prod__row--rev .ac-prod__media { order: 0; }
  .ac-footer__grid { grid-template-columns: 1fr 1fr; }
  .ac-badge--tl { left: -12px; }
  .ac-badge--tr { right: 4px; }
}
@media (max-width: 768px) {
  /* ============================================================
     MOBILE DRAWER — clean rebuild (v7.43)
     The drawer (.ac-mobile-drawer) and backdrop are separate elements
     OUTSIDE the header, direct children of <body>, so their
     position:fixed anchors to the viewport (not a header box). They are
     always in the DOM and slide in with a pure GPU transform. No
     backdrop-filter, no `contain`, no `will-change` juggling — those are
     what caused the blank panel and jank.
     ============================================================ */

  /* Hide the desktop pill nav on mobile — the drawer is a separate element. */
  .ac-nav__menu-wrap { display: none; }

  .ac-nav__toggle { display: inline-flex; align-items: center; justify-content: center; }
  .ac-nav__actions .ac-nav__login,
  .ac-nav__actions .ac-btn--primary { display: none; }

  /* The header must not create a containing block for the (now external)
     drawer, but keeping it clean here is also good hygiene. */
  .ac-header.is-menu-open,
  .ac-header.is-menu-open.is-scrolled {
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }

  /* The sliding panel */
  .ac-mobile-drawer {
    display: block; /* override the desktop `display:none` */
    position: fixed; top: 0; right: 0; bottom: 0; left: auto;
    width: min(86vw, 360px); height: 100%;
    padding: 0 18px 28px;
    background: var(--ac-panel);
    border-left: 1px solid rgba(var(--ac-line-rgb),.10);
    z-index: 1200;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    transform: translate3d(100%, 0, 0);
    transition: transform .3s cubic-bezier(.22,.61,.36,1);
    visibility: hidden;
  }
  body.ac-menu-open .ac-mobile-drawer {
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }

  /* Drawer header (title + close), sticky at the top */
  .ac-drawer-head {
    display: flex; align-items: center; justify-content: space-between;
    position: sticky; top: 0; z-index: 2;
    margin: 0 -18px 10px; padding: 18px 18px 14px;
    background: var(--ac-panel);
    border-bottom: 1px solid rgba(var(--ac-line-rgb),.06);
  }
  .ac-drawer-head__title {
    font-family: var(--ac-font-display); font-weight: 600; font-size: 12px;
    letter-spacing: .16em; text-transform: uppercase; color: var(--ac-text-3);
    display: flex; align-items: center; gap: 9px;
  }
  .ac-drawer-head__title::before {
    content: ""; width: 20px; height: 2px; border-radius: 2px; background: var(--ac-grad-btn);
  }
  .ac-drawer-close {
    width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--ac-border);
    background: rgba(var(--ac-line-rgb),.05); color: var(--ac-text); display: grid; place-items: center;
    cursor: pointer; flex: 0 0 auto;
    transition: background .2s, border-color .2s;
  }
  .ac-drawer-close:active { background: var(--ac-grad-btn); border-color: transparent; color: #fff; }
  .ac-drawer-close svg { width: 18px; height: 18px; }
  .ac-drawer-head__actions { display: flex; align-items: center; gap: 8px; }
  /* No drawer-specific override needed here any more — the base
     .ac-theme-toggle rule already uses var(--ac-text), which is correct
     for both the header and the drawer now that both flip with the theme. */

  /* Backdrop — plain dim, no blur, opacity-only. Direct body child. */
  .ac-menu-backdrop {
    display: block; /* override the desktop `display:none` */
    position: fixed; inset: 0; background: rgba(4,3,6,.68);
    z-index: 1100; opacity: 0; pointer-events: none;
    transition: opacity .3s ease;
  }
  body.ac-menu-open .ac-menu-backdrop { opacity: 1; pointer-events: auto; }

  /* Menu list */
  .ac-nav__menu { flex-direction: column; align-items: stretch; gap: 2px; }
  .ac-nav__menu > li { border-bottom: 1px solid rgba(var(--ac-line-rgb),.05); }
  .ac-nav__menu > li > a {
    font-size: 16px; padding: 15px 12px; border-radius: 12px; color: var(--ac-text); font-weight: 500;
    display: flex; align-items: center; justify-content: space-between;
    transition: background .2s, color .2s;
  }
  .ac-nav__menu > li > a:active,
  .ac-nav__menu > li.current-menu-item > a { background: rgba(var(--ac-line-rgb),.06); }
  .ac-nav__menu > li.current-menu-item > a { color: var(--ac-accent-orange); }

  /* Chevron for items with a sub-menu */
  .ac-nav__menu .menu-item-has-children > a::after {
    content: "\25BE"; font-size: 12px; line-height: 1;
    margin-left: auto; width: 26px; height: 26px; border-radius: 50%;
    display: grid; place-items: center;
    background: rgba(var(--ac-line-rgb),.07); color: var(--ac-text-2);
    flex: 0 0 auto;
    transition: transform .25s ease, background .2s, color .2s;
  }
  .ac-nav__menu .menu-item-has-children.is-expanded > a::after {
    transform: rotate(180deg); background: var(--ac-grad-btn); color: #fff;
  }
  .ac-nav__menu .menu-item-has-children::after { content: none; }

  /* Accordion sub-menu — height transition only, no per-item animations.
     The desktop rules use position:absolute, min-width:210px and nowrap
     links, which overflow the narrow drawer; all of that is reset here. */
  .ac-nav__menu .sub-menu {
    position: static; transform: none; opacity: 1; visibility: visible;
    box-shadow: none; border: 0; border-radius: 10px;
    min-width: 0; width: auto; max-width: 100%;
    background: rgba(var(--ac-line-rgb),.03);
    margin: 0 4px 6px; padding: 0 0 0 6px;
    max-height: 0; overflow: hidden;
    transition: max-height .28s ease, padding .28s ease, margin .28s ease;
  }
  /* Hover must not reveal the sub-menu on touch — only the accordion class does. */
  .ac-nav__menu li:hover > .sub-menu,
  .ac-nav__menu li:focus-within > .sub-menu {
    opacity: 1; visibility: visible; transform: none;
  }
  .ac-nav__menu .menu-item-has-children.is-expanded > .sub-menu {
    max-height: 520px; padding: 5px 0 6px 6px;
  }
  .ac-nav__menu .sub-menu a {
    font-size: 14.5px; padding: 11px 14px; color: var(--ac-text-2);
    border-radius: 9px; margin: 1px 5px;
    /* Long labels must wrap inside the drawer instead of forcing it wider. */
    white-space: normal; word-break: normal; overflow-wrap: anywhere;
    transition: background .2s, color .2s;
  }
  .ac-nav__menu .sub-menu a:active { background: rgba(var(--ac-line-rgb),.07); color: var(--ac-text); }
  .ac-nav__menu .menu-item-has-children.is-expanded > a { background: rgba(var(--ac-line-rgb),.04); }

  /* CTAs inside the drawer */
  .ac-mobile-cta {
    display: flex; flex-direction: column; gap: 10px; margin-top: 22px;
  }
  .ac-mobile-cta a {
    text-align: center; padding: 14px; border-radius: 999px; font-weight: 600; font-size: 16px;
  }
  .ac-mobile-cta .ac-mobile-login {
    border: 1px solid var(--ac-border-strong); color: var(--ac-text);
    transition: background .2s;
  }
  .ac-mobile-cta .ac-mobile-login:active { background: rgba(var(--ac-line-rgb),.06); }

  /* Hamburger -> X */
  /* The drawer has its own close (X) button in its header. The burger also
     morphs into an X, and sat above the drawer at a higher z-index, so both
     X's overlapped. Hide the burger entirely while the drawer is open. */
  .ac-nav__toggle { position: relative; z-index: 1050; width: 46px; height: 46px; border-radius: 13px; transition: background .2s, opacity .2s; }
  .ac-header.is-menu-open .ac-nav__toggle {
    opacity: 0; pointer-events: none; visibility: hidden;
  }

  .ac-hero { padding-top: 120px; }
  .ac-footer__grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .ac-footer__bottom { flex-direction: column; }
  /* Scroll lock lives outside this media query (see ac-menu-open below), so it
     can never desync when the viewport crosses the breakpoint mid-open. */
}
@media (max-width: 520px) {
  .ac-footer__grid { grid-template-columns: 1fr; }
  .ac-hero__cta { flex-direction: column; }
}

/* ============================================================
   RESPONSIVE POLISH — glass card, badges, spacing refinements
   ============================================================ */
/* Tablet & below: keep floating badges within bounds so they don't clip */
@media (max-width: 900px) {
  .ac-badge--tl { left: 0; }
  .ac-badge--tr { right: 0; }
  .ac-prod__media { margin-top: 8px; }
}
/* Phones: tuck badges inside the card, tighten glass card internals */
@media (max-width: 600px) {
  .ac-badge { padding: 6px 14px 6px 6px; gap: 7px; }
  .ac-badge__icon { width: 28px; height: 28px; }
  .ac-badge__icon svg { width: 14px; height: 14px; }
  .ac-badge span { font-size: 11px; }
  .ac-badge--tl { left: 6px; top: 38%; }
  .ac-badge--tr { right: 6px; top: 2%; }

  .ac-xcard__inner { padding: 16px; border-radius: 32px; }
  .ac-xcard__screen { padding: 20px 16px; border-radius: 22px; }
  .ac-xcard__title { font-size: 22px; }
  .ac-xcard__title .ar { font-size: 28px; }
  .ac-xcard__row2 { flex-direction: column; }
  .ac-xcard__amount .val b { font-size: 16px; }

}
/* Very small phones */
@media (max-width: 380px) {
  .ac-xcard__field { font-size: 13px; padding: 0 12px; }
  .ac-xcard__tab { font-size: 12px; padding: 8px 4px; }
  .ac-footer__social a { width: 38px; height: 38px; }
}
/* Comfortable tap targets on touch devices */
@media (max-width: 768px) {
  .ac-footer__col ul { gap: 4px; }
  .ac-footer__col a { display: inline-block; padding: 8px 0; font-size: 15px; }
  .ac-footer__bottom { gap: 14px; text-align: center; }
  .ac-footer__bottom-links { justify-content: center; }
  .ac-footer__bottom-links a { padding: 6px 0; }
  .ac-footer__social a { width: 42px; height: 42px; }
}



/* ============================================================
   COLLABORATIONS PAGE  (1:1 Figma — card 1280x576, rounded-108,
   details 555 wide, image frame 490 overflowing card edge by ~22px)
   ============================================================ */
.ac-collab-list { padding: 30px 0 90px; }
.ac-collab {
  position: relative; display: grid; align-items: center;
  grid-template-columns: 555px 1fr; column-gap: 40px;
  width: 100%; max-width: 1280px; min-height: 576px;
  margin: 0 auto 40px; padding: 0 64px;
  border-radius: 108px; border: 1px solid rgba(var(--ac-line-rgb),.4);
  background:
    linear-gradient(146deg, rgba(var(--ac-text-rgb),.03) 0%, rgba(var(--ac-text-rgb),0) 46.5%),
    linear-gradient(180deg, rgba(var(--ac-text-rgb),.02) 0%, rgba(var(--ac-text-rgb),0) 100%);
}
/* image on RIGHT (Soil, MQR): text col first */
.ac-collab--imgright { grid-template-columns: 555px 1fr; }
.ac-collab--imgright .ac-collab__text  { order: 1; }
.ac-collab--imgright .ac-collab__media { order: 2; justify-self: end; margin-right: -46px; }
/* image on LEFT (Spaces): image col first */
.ac-collab--imgleft { grid-template-columns: 1fr 555px; }
.ac-collab--imgleft .ac-collab__media { order: 1; justify-self: start; margin-left: -46px; }
.ac-collab--imgleft .ac-collab__text   { order: 2; }

.ac-collab__text { max-width: 555px; }
.ac-collab__title {
  font-family: var(--ac-font-display); font-weight: 600;
  font-size: clamp(30px, 3.6vw, 48px); line-height: 1.18; letter-spacing: -.02em;
  color: var(--ac-text); margin: 0 0 24px;
}
.ac-collab__addr {
  display: flex; align-items: center; gap: 12px; margin: 0 0 24px;
  font-family: var(--ac-font-ui); font-weight: 400; font-size: 16px; line-height: 40px;
  color: rgba(var(--ac-line-rgb),.8);
}
.ac-collab__pin { width: 24px; height: 24px; color: var(--ac-magenta); flex-shrink: 0; }
.ac-collab__desc {
  font-family: var(--ac-font-body); font-weight: 300;
  /* Same reasoning as .ac-prod__text: .50 x .80 = .40, folded into the alpha
     so the emphasised product names are not dimmed with the paragraph. */
  font-size: 20px; line-height: 40px; color: rgba(var(--ac-text-rgb),.40);
  max-width: 503px; margin: 0;
  /* 503px at 20px is about 50 characters a line — under the ~60 that
     justification needs to distribute slack invisibly, so this follows the
     same rule as the other narrow columns and stays left-aligned. */
  text-align: left;
  text-wrap: pretty;
  hyphens: none; -webkit-hyphens: none;
}
.ac-collab__desc + .ac-collab__desc { margin-top: 20px; }

/* image frame: 490 wide, rounded-48 outer, photo rounded-38, soft glow */
.ac-collab__media { width: 490px; }
.ac-collab__frame {
  position: relative; width: 490px; padding: 24px; border-radius: 48px;
  border: 1px solid rgba(var(--ac-line-rgb),.10);
  background: linear-gradient(180deg, rgba(var(--ac-text-rgb),.03) 0%, rgba(var(--ac-text-rgb),.01) 79.8%);
  box-shadow: 0 40px 90px -20px rgba(198,7,48,.25), 0 30px 80px rgba(var(--ac-shadow-rgb),.5);
}
.ac-collab__img { position: relative; border-radius: 38px; overflow: hidden; aspect-ratio: 464/446; }
.ac-collab__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ac-collab__ph {
  width: 100%; height: 100%; display: grid; place-items: center;
  background: radial-gradient(120% 120% at 50% 0%, rgba(198,7,48,.18), var(--ac-bg-2));
}
.ac-collab__ph span { font-family: var(--ac-font-display); font-weight: 600; color: var(--ac-text-3); font-size: 18px; text-align: center; padding: 0 20px; }

/* ---- Collab card gallery ------------------------------------------------
   Native scroll-snap rather than a JS-driven transform track: touch swipe,
   momentum and accessibility come free from the platform, and the arrows/dots
   just call scrollTo(). One slide is always exactly one frame wide. */
.ac-gal { position: absolute; inset: 0; }
.ac-gal__track {
  display: flex; height: 100%; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain; /* don't trigger browser back-swipe */
}
.ac-gal__track::-webkit-scrollbar { display: none; }
.ac-gal__slide {
  flex: 0 0 100%; width: 100%; height: 100%; scroll-snap-align: center; scroll-snap-stop: always;
  padding: 0; margin: 0; border: 0; background: none; cursor: zoom-in; display: block;
  -webkit-appearance: none; appearance: none;
}
.ac-gal__img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.ac-gal__slide:focus-visible { outline: 2px solid var(--ac-magenta); outline-offset: -4px; }

.ac-gal__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; display: grid; place-items: center; z-index: 2;
  border-radius: 50%; border: 1px solid rgba(255,255,255,.28); color: #fff;
  background: rgba(10,9,12,.45); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  cursor: pointer; opacity: 0; transition: opacity .25s ease, background .2s ease, transform .2s ease;
}
.ac-gal:hover .ac-gal__nav, .ac-gal:focus-within .ac-gal__nav { opacity: 1; }
.ac-gal__nav:hover { background: rgba(10,9,12,.7); }
.ac-gal__nav:active { transform: translateY(-50%) scale(.94); }
.ac-gal__nav[disabled] { opacity: 0 !important; pointer-events: none; }
.ac-gal__nav--prev { left: 10px; }
.ac-gal__nav--next { right: 10px; }
.ac-gal__nav svg { width: 20px; height: 20px; }

.ac-gal__dots {
  position: absolute; left: 0; right: 0; bottom: 12px; z-index: 2;
  display: flex; justify-content: center; gap: 7px;
}
.ac-gal__dot {
  width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,.45); transition: background .2s ease, width .2s ease;
}
.ac-gal__dot.is-active { background: #fff; width: 18px; border-radius: 4px; }

/* Touch devices have no hover, so the arrows would never appear. */
@media (hover: none) {
  .ac-gal__nav { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ac-gal__track { scroll-behavior: auto; }
}

/* ---- Lightbox -----------------------------------------------------------
   Built once by JS and reused by every gallery on the page. */
.ac-lb {
  position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center;
  background: rgba(6,5,8,.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  opacity: 0; visibility: hidden; transition: opacity .28s ease, visibility .28s ease;
  padding: 5vh 4vw;
}
.ac-lb.is-open { opacity: 1; visibility: visible; }
.ac-lb__figure { margin: 0; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; gap: 14px; align-items: center; }
.ac-lb__img {
  max-width: 100%; max-height: 78vh; display: block; border-radius: 14px;
  box-shadow: 0 40px 120px rgba(0,0,0,.6);
  opacity: 0; transform: scale(.985); transition: opacity .25s ease, transform .25s ease;
}
.ac-lb__img.is-ready { opacity: 1; transform: none; }
.ac-lb__cap { color: rgba(255,255,255,.72); font-size: 15px; text-align: center; margin: 0; }
.ac-lb__count { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,.6); font-size: 14px; letter-spacing: .04em; }
.ac-lb__btn {
  position: absolute; display: grid; place-items: center; cursor: pointer; color: #fff;
  width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.08); transition: background .2s ease, transform .2s ease;
}
.ac-lb__btn:hover { background: rgba(255,255,255,.18); }
.ac-lb__btn:active { transform: scale(.94); }
.ac-lb__btn svg { width: 22px; height: 22px; }
.ac-lb__close { top: 14px; right: 14px; }
.ac-lb__prev { left: 16px; top: 50%; margin-top: -23px; }
.ac-lb__next { right: 16px; top: 50%; margin-top: -23px; }
.ac-lb__btn[hidden] { display: none; }
body.ac-lb-open { overflow: hidden; }
@media (max-width: 560px) {
  .ac-lb { padding: 8vh 3vw; }
  .ac-lb__prev { left: 8px; } .ac-lb__next { right: 8px; }
  .ac-lb__btn { width: 40px; height: 40px; }
  .ac-lb__img { max-height: 68vh; }
}
@media (prefers-reduced-motion: reduce) {
  .ac-lb, .ac-lb__img { transition: none; }
}

@media (max-width: 1180px) {
  .ac-collab, .ac-collab--imgright, .ac-collab--imgleft {
    grid-template-columns: 1fr; row-gap: 32px; padding: 40px; min-height: 0; border-radius: 56px;
  }
  .ac-collab__text { max-width: none; order: 1 !important; }
  .ac-collab__media { width: 100%; max-width: 490px; margin: 0 auto !important; justify-self: center !important; order: 2 !important; }
  .ac-collab__frame { width: 100%; }
  .ac-collab__addr, .ac-collab__desc { line-height: 32px; }
}
@media (max-width: 560px) {
  .ac-collab { padding: 24px; border-radius: 40px; }
  .ac-collab__frame { padding: 14px; border-radius: 32px; }
  .ac-collab__img { border-radius: 22px; }
  .ac-collab__addr { font-size: 14px; align-items: flex-start; }
  .ac-collab__pin { margin-top: 8px; }
  .ac-collab__desc { font-size: 17px; }
}

/* ============================================================
   PEOPLE OF CIRCLE PAGE  (1:1 Figma)
   center card 512x494, side cards 444x429, arrows 48px circles
   ============================================================ */
.ac-poc-carousel { padding: 20px 0 40px; }
.ac-carousel { display: flex; align-items: center; justify-content: center; gap: 20px; }
.ac-carousel__nav {
  flex-shrink: 0; width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid var(--ac-border-strong); background: rgba(var(--ac-line-rgb),.03); color: var(--ac-text);
  display: grid; place-items: center; cursor: pointer; transition: background .2s, transform .2s, border-color .2s;
}
.ac-carousel__nav:hover { background: rgba(var(--ac-line-rgb),.1); border-color: var(--ac-text-3); transform: scale(1.06); }
.ac-carousel__nav:active { transform: scale(.96); }
.ac-carousel__nav svg { width: 20px; height: 20px; }
.ac-carousel__stage {
  position: relative; flex: 1; display: flex; align-items: center; justify-content: center;
  min-height: 460px; overflow: hidden;
}
.ac-carousel__slide {
  position: absolute; top: 50%; left: 50%; width: 392px;
  transition: transform .5s var(--ac-ease), opacity .5s var(--ac-ease);
  will-change: transform, opacity;
}
/* Center (active) */
.ac-carousel__slide--active {
  transform: translate(-50%, -50%) scale(1); opacity: 1; z-index: 3; cursor: default;
}
/* Left neighbour */
.ac-carousel__slide--left {
  transform: translate(calc(-50% - 300px), -50%) scale(.86); opacity: .4; z-index: 2; cursor: pointer;
}
/* Right neighbour */
.ac-carousel__slide--right {
  transform: translate(calc(-50% + 300px), -50%) scale(.86); opacity: .4; z-index: 2; cursor: pointer;
}
.ac-carousel__slide--left:hover, .ac-carousel__slide--right:hover { opacity: .6; }
/* Off-stage slides (more than one away from center) */
.ac-carousel__slide--hidden {
  transform: translate(-50%, -50%) scale(.7); opacity: 0; z-index: 1; pointer-events: none;
}
.ac-carousel__frame {
  border-radius: 44px; padding: 20px; border: 1px solid var(--ac-border);
  background: linear-gradient(180deg, rgba(var(--ac-text-rgb),.03), rgba(var(--ac-text-rgb),.01) 79.8%);
  transition: box-shadow .5s var(--ac-ease), border-color .5s;
}
.ac-carousel__slide--active .ac-carousel__frame { box-shadow: 0 40px 100px rgba(var(--ac-shadow-rgb),.55); border-color: var(--ac-border-strong); }
.ac-carousel__img {
  position: relative; border-radius: 38px; overflow: hidden; aspect-ratio: 464/446;
  display: grid; place-items: center;
  background: radial-gradient(120% 120% at 50% 30%, rgba(198,7,48,.22), var(--ac-bg-2));
}
.ac-carousel__slide--active .ac-carousel__img { aspect-ratio: 464/460; }

/* Poster fills the frame; the Play button opens the video in the modal. */
.ac-carousel__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* The in-slide video/embed players were removed: People of Circle videos
   now open in the shared modal, like the Preferred Agent ones. */

.ac-carousel__img img.ac-carousel__poster { width: 100%; height: 100%; object-fit: cover; }
.ac-carousel__play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 84px; height: 84px; border-radius: 50%; border: 0; cursor: pointer; z-index: 3;
  background: rgba(var(--ac-line-rgb),.25); backdrop-filter: blur(6px);
  display: grid; place-items: center; transition: transform .3s var(--ac-ease), background .3s, opacity .3s;
}
.ac-carousel__play:hover { transform: translate(-50%, -50%) scale(1.1); background: rgba(var(--ac-line-rgb),.4); }
.ac-carousel__play svg { width: 30px; height: 30px; fill: #fff; margin-left: 3px; }
/* Play button only on the active/center slide (side slides just show poster). */
.ac-carousel__slide--left .ac-carousel__play,
.ac-carousel__slide--right .ac-carousel__play,
.ac-carousel__slide--hidden .ac-carousel__play { display: none; }

.ac-poc-desc-sec { padding: 40px 0 90px; }
.ac-poc-desc { text-align: center; max-width: 940px; margin: 0 auto; }
.ac-poc-desc__title { font-family: var(--ac-font-display); font-weight: 600; font-size: clamp(28px, 4vw, 40px); line-height: 1.18; letter-spacing: -.02em; margin-bottom: 26px; }
.ac-poc-desc__text { font-family: var(--ac-font-body); font-weight: 400; font-size: var(--ac-fs-lead); line-height: 1.75; color: var(--ac-text-3); }

@media (max-width: 820px) {
  .ac-carousel { gap: 10px; }
  .ac-carousel__stage { min-height: 380px; }
  /* On mobile show only the centered slide full-width; neighbours off-stage. */
  .ac-carousel__slide { width: min(88vw, 440px); }
  .ac-carousel__slide--left { transform: translate(-150%, -50%) scale(.86); opacity: 0; pointer-events: none; }
  .ac-carousel__slide--right { transform: translate(50%, -50%) scale(.86); opacity: 0; pointer-events: none; }
}
@media (max-width: 480px) {
  .ac-carousel__nav { width: 40px; height: 40px; }
  .ac-carousel__frame { border-radius: 32px; padding: 14px; }
  .ac-carousel__img { border-radius: 24px; }
  .ac-carousel__play { width: 64px; height: 64px; }
  .ac-carousel__stage { min-height: 340px; }
}

/* ============================================================
   MASAREFAK EXPRESS PAGE  (1:1 Figma)
   ============================================================ */
.ac-express-hero { text-align: center; }
.ac-express-hero__lockup { display: inline-grid; justify-items: center; position: relative; }
.ac-express-hero__ar { width: 220px; height: auto; margin-bottom: -28px; }
.ac-express-hero__en { font-family: var(--ac-font-display); font-weight: 600; font-size: clamp(44px, 6vw, 68px); line-height: 1; letter-spacing: -.02em; }
.ac-express-hero__sub { font-family: var(--ac-font-body); font-weight: 300; font-size: 20px; line-height: 32px; color: var(--ac-text-2); margin-top: 24px; }
@media (max-width: 768px) {
  .ac-express-hero__ar { width: 150px; margin-bottom: -18px; }
}

/* ============================================================
   INNER PAGES  (About, Features, Contact, Blog, 404)
   ============================================================ */
.ac-pagehero { position: relative; padding: 170px 0 60px; text-align: center; overflow: hidden; }
.ac-pagehero .ac-glow--p { width: 900px; height: 500px; background: rgba(198,7,48,.16); top: -180px; left: 50%; transform: translateX(-50%); }
.ac-pagehero__inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.ac-pagehero__title { font-size: clamp(28px, 3.8vw, 42px); line-height: 1.14; letter-spacing: -.02em; max-width: 700px; }
.ac-pagehero__sub { font-family: var(--ac-font-body); font-size: var(--ac-fs-sub); line-height: 1.65; color: var(--ac-grey); max-width: 620px; margin: 0; }
.ac-breadcrumb { font-family: var(--ac-font-body); font-size: 13px; color: var(--ac-text-3); }
.ac-breadcrumb a:hover { color: var(--ac-text); }

.ac-page { padding: 40px 0 90px; }
.ac-page__body { max-width: 820px; margin: 0 auto; font-family: var(--ac-font-body); font-size: 17px; line-height: 1.75; color: var(--ac-text-2); }
.ac-page__body h2 { font-size: 32px; margin: 40px 0 16px; color: var(--ac-text); }
.ac-page__body h3 { font-size: 22px; margin: 30px 0 12px; color: var(--ac-text); }
.ac-page__body p { margin: 0 0 18px; }
.ac-page__body a { color: var(--ac-accent-pink); }
.ac-page__body ul, .ac-page__body ol { margin: 0 0 18px; padding-left: 22px; }
.ac-page__body li { margin-bottom: 8px; }
.ac-page__body img { border-radius: 16px; margin: 24px 0; }
.ac-page__body blockquote { border-left: 3px solid var(--ac-magenta); margin: 24px 0; padding: 6px 20px; color: var(--ac-text); background: rgba(var(--ac-line-rgb),.03); border-radius: 0 12px 12px 0; }

/* value / feature cards grid */
.ac-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: var(--ac-content); margin: 0 auto; }
.ac-card { padding: 28px; border-radius: 20px; background: var(--ac-surface-2); border: 1px solid var(--ac-border); transition: transform .35s var(--ac-ease), border-color .35s var(--ac-ease); }
.ac-card:hover { transform: translateY(-6px); border-color: var(--ac-border-strong); }
.ac-card__ic { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: var(--ac-grad-btn); margin-bottom: 18px; }
.ac-card__ic svg { width: 26px; height: 26px; stroke: #fff; fill: none; stroke-width: 1.8; }
.ac-card__title { font-family: var(--ac-font-display); font-weight: 600; font-size: 20px; margin-bottom: 10px; }
.ac-card__text { font-family: var(--ac-font-body); font-size: 15px; color: var(--ac-text-3); line-height: 1.6; }

/* stats strip */
.ac-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; max-width: var(--ac-content); margin: 0 auto; text-align: center; }
.ac-stat__num { font-family: var(--ac-font-display); font-weight: 700; font-size: 48px; line-height: 1; }
.ac-stat__label { font-family: var(--ac-font-body); font-size: 14px; color: var(--ac-text-3); margin-top: 8px; }

/* contact */
.ac-contact { display: grid; grid-template-columns: 1fr 1.2fr; gap: 48px; max-width: var(--ac-content); margin: 0 auto; align-items: start; }
.ac-contact__info h3 { font-size: 26px; margin-bottom: 16px; }
.ac-contact__info p { color: var(--ac-text-2); margin-bottom: 20px; }
.ac-contact__item { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; font-family: var(--ac-font-body); color: var(--ac-text-2); }
.ac-contact__item svg { width: 22px; height: 22px; stroke: var(--ac-magenta); fill: none; stroke-width: 1.8; flex-shrink: 0; }
.ac-form { display: grid; gap: 16px; padding: 32px; border-radius: 24px; background: var(--ac-surface-2); border: 1px solid var(--ac-border); }
.ac-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ac-field { display: grid; gap: 6px; }
.ac-field label { font-family: var(--ac-font-body); font-size: 13px; color: var(--ac-text-3); }
.ac-field input, .ac-field textarea { font-family: var(--ac-font-body); font-size: 15px; color: var(--ac-text); background: rgba(var(--ac-line-rgb),.04); border: 1px solid var(--ac-border); border-radius: 12px; padding: 12px 14px; transition: border-color .2s; }
.ac-field input:focus, .ac-field textarea:focus { outline: none; border-color: var(--ac-magenta); }
.ac-field textarea { min-height: 130px; resize: vertical; }

/* blog grid */
.ac-posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; max-width: var(--ac-content); margin: 0 auto; }
.ac-post { border-radius: 20px; overflow: hidden; background: var(--ac-surface-2); border: 1px solid var(--ac-border); transition: transform .35s var(--ac-ease), border-color .35s var(--ac-ease); display: flex; flex-direction: column; }
.ac-post:hover { transform: translateY(-6px); border-color: var(--ac-border-strong); }
.ac-post__thumb { aspect-ratio: 16/9; background: radial-gradient(120% 120% at 50% 0%, rgba(198,7,48,.2), var(--ac-bg-2)); display: block; }
.ac-post__thumb img { width: 100%; height: 100%; object-fit: cover; }
.ac-post__body { padding: 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.ac-post__meta { font-family: var(--ac-font-body); font-size: 12px; color: var(--ac-text-3); text-transform: uppercase; letter-spacing: .05em; }
.ac-post__title { font-family: var(--ac-font-display); font-weight: 600; font-size: 20px; line-height: 1.3; }
.ac-post__title a:hover { color: var(--ac-accent-pink); }
.ac-post__excerpt { font-family: var(--ac-font-body); font-size: 14px; color: var(--ac-text-3); line-height: 1.6; }
.ac-post__more { margin-top: auto; font-family: var(--ac-font-display); font-weight: 600; font-size: 14px; color: var(--ac-accent-pink); }

/* single post */
.ac-single { max-width: 780px; margin: 0 auto; }
.ac-single__hero-img { width: 100%; border-radius: 24px; margin-bottom: 32px; }

/* pagination */
.ac-pagination { display: flex; justify-content: center; gap: 8px; margin-top: 50px; }
.ac-pagination .page-numbers { display: inline-grid; place-items: center; min-width: 42px; height: 42px; padding: 0 12px; border-radius: 12px; background: var(--ac-surface-2); border: 1px solid var(--ac-border); font-family: var(--ac-font-body); color: var(--ac-text-2); transition: background .2s, color .2s; }
.ac-pagination .page-numbers:hover, .ac-pagination .page-numbers.current { background: var(--ac-grad-btn); color: #fff; border-color: transparent; }

/* 404 */
.ac-404 { text-align: center; padding: 160px 0 120px; }
.ac-404__code { font-family: var(--ac-font-display); font-weight: 800; font-size: 140px; line-height: 1; letter-spacing: -4px; }
.ac-404__msg { font-family: var(--ac-font-body); font-size: 18px; color: var(--ac-text-2); margin: 16px 0 30px; }

/* CTA band (reusable) */
.ac-band { position: relative; margin: 40px auto 0; max-width: var(--ac-content); border-radius: 32px; padding: 60px 40px; text-align: center; overflow: hidden; background: radial-gradient(120% 90% at 50% 0%, rgba(198,7,48,.16), transparent 55%), rgba(var(--ac-line-rgb),.02); border: 1px solid var(--ac-border); }
.ac-band__title { font-family: var(--ac-font-display); font-weight: 600; font-size: 40px; letter-spacing: -.8px; }
.ac-band__sub { font-family: var(--ac-font-body); color: var(--ac-text-2); margin: 14px 0 26px; }

@media (max-width: 900px) {
  .ac-cards, .ac-posts { grid-template-columns: 1fr 1fr; }
  .ac-stats { grid-template-columns: 1fr 1fr; }
  .ac-contact { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .ac-cards, .ac-posts, .ac-stats { grid-template-columns: 1fr; }
  .ac-form__row { grid-template-columns: 1fr; }
  .ac-404__code { font-size: 96px; }
}


.ac-cta__stores { display:flex; gap:16px; justify-content:center; margin-top:30px; flex-wrap:wrap; position:relative; z-index:2; }
/* Store buttons — crisp glass pills (no raster, sharp at any resolution) */
.ac-store {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 11px 22px; border-radius: 999px;
  background: rgba(var(--ac-line-rgb),.06); border: 1px solid rgba(var(--ac-line-rgb),.14);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  color: var(--ac-text); transition: transform .25s var(--ac-ease), background .25s, border-color .25s;
}
.ac-store:hover { transform: translateY(-3px); background: rgba(var(--ac-line-rgb),.1); border-color: rgba(var(--ac-line-rgb),.22); }
.ac-store__ic { width: 30px; height: 30px; flex-shrink: 0; display: grid; place-items: center; }
.ac-store__ic svg { width: 28px; height: 28px; }
.ac-store__txt { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.ac-store__txt small { font-family: var(--ac-font-body); font-size: 11px; font-weight: 400; opacity: .8; letter-spacing: .02em; }
.ac-store__txt strong { font-family: var(--ac-font-display); font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
@media (max-width: 480px) {
  .ac-store { padding: 10px 18px; gap: 10px; }
  .ac-store__txt strong { font-size: 16px; }
  .ac-store__ic { width: 26px; height: 26px; }
  .ac-store__ic svg { width: 24px; height: 24px; }
}

/* ============================================================
   ACCESSIBILITY
   ============================================================ */
:focus-visible { outline: 2px solid #ff4d7d; outline-offset: 3px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .ac-reveal { opacity: 1; transform: none; }
}

/* ============================================================
   BENEFITS / FEATURE GRID (reusable inner-page block)
   ============================================================ */
.ac-benefits { position: relative; overflow: hidden; }
.ac-benefits__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  margin-top: 48px;
  align-items: stretch;               /* equal-height rows */
}

.ac-benefit {
  position: relative; height: 100%;
  display: flex; flex-direction: column;   /* fill the stretched cell top→bottom */
  padding: 36px 32px; border-radius: 26px;
  background:
    radial-gradient(140% 100% at 100% 0%, rgba(181,13,77,.16), transparent 55%),
    linear-gradient(165deg, rgba(var(--ac-line-rgb),.09), rgba(var(--ac-line-rgb),.028) 60%, rgba(var(--ac-line-rgb),.02));
  border: 1px solid rgba(var(--ac-line-rgb),.14);
  box-shadow:
    inset 0 1px 0 rgba(var(--ac-line-rgb),.08),
    0 20px 50px -28px rgba(var(--ac-shadow-rgb),.8);
  overflow: hidden;
  transition: transform .4s var(--ac-ease), border-color .4s var(--ac-ease), box-shadow .4s var(--ac-ease), background .4s var(--ac-ease);
}
/* Persistent thin gradient accent along the top edge — grows full-width on hover. */
.ac-benefit::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--ac-grad-btn);
  transform: scaleX(.32); transform-origin: left;
  opacity: .7;
  transition: transform .5s var(--ac-ease), opacity .4s ease;
}
/* Soft corner glow bloom that intensifies on hover. */
.ac-benefit::after {
  content: ""; position: absolute; top: -40%; right: -30%; width: 70%; height: 80%;
  background: radial-gradient(circle, rgba(221,81,28,.18), transparent 70%);
  opacity: .5; pointer-events: none;
  transition: opacity .45s ease;
}
.ac-benefit:hover {
  transform: translateY(-8px); border-color: rgba(221,81,28,.5);
  box-shadow:
    inset 0 1px 0 rgba(var(--ac-line-rgb),.1),
    0 40px 74px -30px rgba(var(--ac-shadow-rgb),.85),
    0 0 54px -14px rgba(181,13,77,.5);
  background:
    radial-gradient(140% 100% at 100% 0%, rgba(181,13,77,.22), transparent 55%),
    linear-gradient(165deg, rgba(var(--ac-line-rgb),.12), rgba(var(--ac-line-rgb),.04) 60%, rgba(var(--ac-line-rgb),.025));
}
.ac-benefit:hover::before { transform: scaleX(1); opacity: 1; }
.ac-benefit:hover::after { opacity: 1; }

.ac-benefit__ic {
  flex: 0 0 auto; position: relative; z-index: 1;
  width: 60px; height: 60px; border-radius: 18px; display: grid; place-items: center;
  background: var(--ac-grad-btn); margin-bottom: 24px; color: #fff;
  box-shadow: 0 16px 34px -10px rgba(181,13,77,.6), inset 0 1px 0 rgba(var(--ac-line-rgb),.3);
  transition: transform .4s var(--ac-ease), box-shadow .4s var(--ac-ease);
}
.ac-benefit:hover .ac-benefit__ic {
  transform: scale(1.08) rotate(-5deg);
  box-shadow: 0 20px 42px -8px rgba(181,13,77,.75), inset 0 1px 0 rgba(var(--ac-line-rgb),.35);
}
.ac-benefit__ic svg { width: 28px; height: 28px; }
.ac-benefit__title { position: relative; z-index: 1; font-family: var(--ac-font-display); font-weight: 600; font-size: 21px; line-height: 1.3; margin: 0 0 13px; color: var(--ac-text); }
/* Text is clamped to a few lines by default so cards stay compact and equal
   height; the "Read more" button (shown by JS only when text overflows)
   expands it. flex:1 keeps the button anchored to the card bottom. */
.ac-benefit__text {
  position: relative; z-index: 1; font-family: var(--ac-font-body);
  font-size: var(--ac-fs-body); line-height: 1.7; color: rgba(var(--ac-text-rgb),.62);
  margin: 0; flex: 0 0 auto;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4;
  overflow: hidden;
}
.ac-benefit__text.is-expanded {
  -webkit-line-clamp: unset; display: block; overflow: visible;
}
.ac-benefit__more {
  position: relative; z-index: 1; margin-top: auto; align-self: flex-start;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 0; border: 0; background: none; cursor: pointer;
  font-family: var(--ac-font-ui); font-weight: 600; font-size: 13.5px; letter-spacing: .01em;
  color: var(--ac-accent-orange);
  transition: color .25s ease, gap .25s ease;
}
/* Small gap above the button so it never touches the text directly. */
.ac-benefit__more { padding-top: 18px; margin-top: auto; }
.ac-benefit__more:hover { color: var(--ac-accent-orange-hover); gap: 8px; }
.ac-benefit__more svg { width: 14px; height: 14px; transition: transform .35s var(--ac-ease); }
.ac-benefit__more[aria-expanded="true"] svg { transform: rotate(180deg); }
/* The [hidden] attribute must win over the display rule above, otherwise the
   button shows on every card even when JS marks it hidden. */
.ac-benefit__more[hidden] { display: none !important; }
@media (max-width: 980px) {
  .ac-benefits__grid { grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 40px; }
}
@media (max-width: 640px) {
  .ac-benefits__grid { grid-template-columns: 1fr; gap: 16px; margin-top: 34px; }
  .ac-benefit { padding: 28px 24px; }
}

/* ============================================================
   GENERIC CONTENT PAGE (FAQ, Help, Terms, Privacy, etc.)
   ============================================================ */
.ac-doc { position: relative; padding: 20px 0 40px; }
.ac-doc__body { max-width: 820px; margin: 0 auto; }
.ac-doc__body h2 { font-family: var(--ac-font-display); font-weight: 600; font-size: clamp(24px, 3.2vw, 32px); margin: 40px 0 14px; color: var(--ac-text); }
.ac-doc__body h3 { font-family: var(--ac-font-display); font-weight: 600; font-size: 20px; margin: 28px 0 10px; color: var(--ac-text); }
/* The mobile app policy nests one level deeper than the website policy, so
   h4 needs a size of its own or it inherits the browser default and reads
   smaller than the body text around it. */
.ac-doc__body h4 { font-family: var(--ac-font-display); font-weight: 600; font-size: 16px; margin: 22px 0 8px; color: var(--ac-text); }
/* Separates the two policies on the page. */
.ac-doc__rule { border: 0; border-top: 1px solid var(--ac-border); margin: 56px 0 8px; }
.ac-doc__body h2 + .ac-doc__meta { margin-top: 0; }
.ac-doc__body p, .ac-doc__body li { font-family: var(--ac-font-body); font-size: var(--ac-fs-body); line-height: 1.8; color: var(--ac-text-3); }
.ac-doc__body p { margin: 0 0 18px; }
.ac-doc__body ul, .ac-doc__body ol { margin: 0 0 18px; padding-left: 22px; }
.ac-doc__body li { margin-bottom: 8px; }
.ac-doc__body a { color: var(--ac-accent-orange); text-decoration: underline; }
.ac-doc__meta { color: var(--ac-text-3); font-size: 14px; margin-bottom: 30px; opacity: .7; }

/* FAQ accordion */
.ac-faq { max-width: 820px; margin: 40px auto 0; display: flex; flex-direction: column; gap: 14px; }
.ac-faq__item { border: 1px solid var(--ac-border); border-radius: 16px; background: rgba(var(--ac-line-rgb),.03); overflow: hidden; transition: border-color .3s; }
.ac-faq__item[open] { border-color: rgba(221,81,28,.35); }
.ac-faq__q { cursor: pointer; list-style: none; padding: 20px 24px; font-family: var(--ac-font-display); font-weight: 500; font-size: 17px; color: var(--ac-text); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.ac-faq__q::-webkit-details-marker { display: none; }
.ac-faq__q::after { content: '+'; font-size: 24px; color: var(--ac-text-3); transition: transform .3s; line-height: 1; }
.ac-faq__item[open] .ac-faq__q::after { transform: rotate(45deg); }
.ac-faq__a { padding: 0 24px 20px; font-family: var(--ac-font-body); font-size: var(--ac-fs-body); line-height: 1.75; color: var(--ac-text-3); }

/* Card grid for Careers / Blog / Help */
.ac-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 48px; }
.ac-tile {
  display: flex; flex-direction: column; border-radius: 22px; overflow: hidden;
  background: rgba(var(--ac-line-rgb),.03); border: 1px solid var(--ac-border);
  transition: transform .35s var(--ac-ease), border-color .35s var(--ac-ease);
  text-decoration: none;
}
.ac-tile:hover { transform: translateY(-6px); border-color: rgba(221,81,28,.35); }
.ac-tile__media { aspect-ratio: 16/10; position: relative; overflow: hidden; }
.ac-tile__media svg, .ac-tile__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ac-tile__body { padding: 24px; }
.ac-tile__tag { font-family: var(--ac-font-body); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ac-accent-orange); margin-bottom: 10px; display: block; }
.ac-tile__title { font-family: var(--ac-font-display); font-weight: 600; font-size: 19px; color: var(--ac-text); margin: 0 0 8px; }
.ac-tile__text { font-family: var(--ac-font-body); font-size: 14px; line-height: 1.6; color: var(--ac-text-3); margin: 0; }
.ac-tile__foot { margin-top: 16px; font-family: var(--ac-font-body); font-size: 13px; color: var(--ac-text-3); display: flex; gap: 14px; }
@media (max-width: 900px) { .ac-tiles { grid-template-columns: 1fr; gap: 16px; margin-top: 36px; } }

/* Contact layout */
.ac-contact { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; max-width: 980px; margin: 40px auto 0; }
.ac-contact__form { display: flex; flex-direction: column; gap: 16px; }
.ac-contact__field { display: flex; flex-direction: column; gap: 7px; }
.ac-contact__field label { font-family: var(--ac-font-body); font-size: 13px; color: var(--ac-text-2); }
.ac-contact__field input, .ac-contact__field textarea {
  background: rgba(var(--ac-line-rgb),.04); border: 1px solid var(--ac-border); border-radius: 12px;
  padding: 13px 16px; color: var(--ac-text); font-family: var(--ac-font-body); font-size: 15px; width: 100%;
  transition: border-color .2s;
}
.ac-contact__field input:focus, .ac-contact__field textarea:focus { outline: none; border-color: rgba(221,81,28,.5); }
.ac-contact__field textarea { min-height: 130px; resize: vertical; }
.ac-contact__info { display: flex; flex-direction: column; gap: 22px; }
.ac-contact__row { display: flex; gap: 14px; align-items: flex-start; }
.ac-contact__row-ic { width: 44px; height: 44px; flex-shrink: 0; border-radius: 12px; display: grid; place-items: center; background: var(--ac-grad-btn); color: #fff; }
.ac-contact__row-ic svg { width: 22px; height: 22px; }
.ac-contact__row h4 { font-family: var(--ac-font-display); font-weight: 600; font-size: 16px; margin: 0 0 4px; color: var(--ac-text); }
.ac-contact__row p { font-family: var(--ac-font-body); font-size: 14px; color: var(--ac-text-3); margin: 0; line-height: 1.6; }
@media (max-width: 820px) { .ac-contact { grid-template-columns: 1fr; gap: 32px; } }

/* ============================================================
   PREFERRED AGENTS GRID
   ============================================================ */
.ac-agents { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.ac-agent {
  border-radius: 22px; overflow: hidden; text-align: center;
  background: linear-gradient(180deg, rgba(var(--ac-text-rgb),.04), rgba(var(--ac-text-rgb),.01));
  border: 1px solid var(--ac-border);
  transition: transform .35s var(--ac-ease), border-color .35s var(--ac-ease), box-shadow .35s var(--ac-ease);
}
.ac-agent:hover { transform: translateY(-6px); border-color: rgba(221,81,28,.35); box-shadow: 0 30px 60px -24px rgba(var(--ac-shadow-rgb),.7); }

/* Video / cover top bar */
.ac-agent__cover {
  position: relative; aspect-ratio: 16 / 10; display: grid; place-items: center;
  overflow: hidden;
}
/* No darkening overlay on the card cover either, so the same photo looks the
   same here as it does in the modal. Everything that sits on this cover — the
   play button, the verified badge, the developer chip — carries its own
   background, and the initials only appear when there is no photo at all
   (the cover is then a solid gradient), so nothing depended on it. */
.ac-agent__cover-initials {
  position: relative; z-index: 1; font-family: var(--ac-font-display);
  font-weight: 700; font-size: 46px; color: rgba(var(--ac-line-rgb),.92);
  letter-spacing: .04em;
  /* Legibility aid against the gradient behind it, not a themed shadow —
     stays neutral black in both modes so it reads as depth, not as a purple
     colour cast. */
  text-shadow: 0 4px 24px rgba(0,0,0,.35);
}
.ac-agent__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.ac-agent__play {
  position: absolute; z-index: 3; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 58px; height: 58px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center; color: #fff;
  background: rgba(15,12,20,.55); backdrop-filter: blur(6px);
  box-shadow: 0 8px 30px -6px rgba(var(--ac-shadow-rgb),.6), inset 0 0 0 1px rgba(var(--ac-line-rgb),.35);
  transition: transform .25s var(--ac-ease), background .25s;
}
.ac-agent__play::before {
  content: ""; position: absolute; inset: -8px; border-radius: 50%;
  border: 1px solid rgba(var(--ac-line-rgb),.35); animation: acPlayPulse 2.4s ease-out infinite;
}
@keyframes acPlayPulse { 0% { transform: scale(.85); opacity: .8; } 100% { transform: scale(1.35); opacity: 0; } }
.ac-agent__play svg { width: 24px; height: 24px; margin-left: 3px; }
.ac-agent:hover .ac-agent__play { transform: translate(-50%, -50%) scale(1.08); background: var(--ac-grad-btn); }
.ac-agent__badge {
  position: absolute; z-index: 3; right: 12px; top: 12px; width: 30px; height: 30px;
  color: #fff; background: rgba(15,12,20,.5); backdrop-filter: blur(6px);
  border-radius: 50%; display: grid; place-items: center;
}
.ac-agent__badge svg { width: 20px; height: 20px; }
/* Developer logo chip on the cover.

   The background is deliberately NOT themed. It used to be
   rgba(var(--ac-line-rgb),.92), which is near-white on the dark page but
   flips to near-black (10,9,12) in light mode — and the developer logos it
   holds are dark artwork, so they vanished into it. The chip also sits on a
   photo or video cover rather than on the page background, so it has no
   reason to follow the theme: a light plate reads correctly against either. */
.ac-agent__dev {
  position: absolute; z-index: 3; left: 12px; bottom: 12px;
  height: 30px; padding: 0 12px; border-radius: 999px;
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(10,9,12,.06);
  display: inline-flex; align-items: center;
  box-shadow: 0 6px 18px -6px rgba(0,0,0,.45);
}
.ac-agent__dev img { max-height: 18px; max-width: 74px; width: auto; object-fit: contain; display: block; }

/* Card body */
.ac-agent__body { padding: 22px 24px 26px; }
.ac-agent__name { font-family: var(--ac-font-display); font-weight: 600; font-size: 20px; margin: 0 0 4px; color: var(--ac-text); }
.ac-agent__position { font-family: var(--ac-font-body); font-size: 13px; color: var(--ac-accent-orange); margin: 0 0 10px; font-weight: 500; }
.ac-agent__area { display: inline-flex; align-items: center; gap: 6px; font-family: var(--ac-font-body); font-size: 14px; color: var(--ac-text-3); margin: 0 0 18px; }
.ac-agent__area svg { width: 15px; height: 15px; }
.ac-agent__stats { display: flex; justify-content: center; gap: 40px; padding: 16px 0; border-top: 1px solid var(--ac-border); border-bottom: 1px solid var(--ac-border); margin-bottom: 18px; }
.ac-agent__stat { display: flex; flex-direction: column; gap: 2px; }
.ac-agent__stat b { font-family: var(--ac-font-display); font-weight: 700; font-size: 20px; color: var(--ac-text); }
.ac-agent__stat small { font-family: var(--ac-font-body); font-size: 12px; color: var(--ac-text-3); }
.ac-agent__btn { width: 100%; justify-content: center; cursor: pointer; }
@media (max-width: 900px) { .ac-agents { grid-template-columns: 1fr 1fr; gap: 16px; } }
@media (max-width: 560px) { .ac-agents { grid-template-columns: 1fr; } }

/* ============================================================
   MODAL SYSTEM (agent profile + video popups)
   ============================================================ */
.ac-modal {
  position: fixed; inset: 0; z-index: 2000; display: none;
  align-items: center; justify-content: center; padding: 20px;
}
.ac-modal.is-open { display: flex; }
.ac-modal__backdrop {
  position: absolute; inset: 0; background: rgba(6,5,9,.72);
  backdrop-filter: blur(6px); animation: acModalFade .3s ease;
}
@keyframes acModalFade { from { opacity: 0; } to { opacity: 1; } }
.ac-modal__panel {
  position: relative; z-index: 1; width: 100%; max-width: 480px;
  background: var(--ac-glass-bg-strong); border: 1px solid rgba(var(--ac-line-rgb),.1);
  border-radius: 26px; overflow: hidden;
  box-shadow: 0 40px 100px -30px rgba(var(--ac-shadow-rgb),.85);
  animation: acModalPop .35s var(--ac-ease);
}
@keyframes acModalPop { from { opacity: 0; transform: translateY(24px) scale(.96); } to { opacity: 1; transform: none; } }
.ac-modal__close {
  position: absolute; z-index: 5; right: 14px; top: 14px; width: 38px; height: 38px;
  border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center;
  background: rgba(15,12,20,.55); backdrop-filter: blur(6px); color: #fff;
  transition: background .25s, transform .25s;
}
.ac-modal__close:hover { background: var(--ac-grad-btn); transform: rotate(90deg); }
.ac-modal__close svg { width: 20px; height: 20px; }

/* Profile modal */
.ac-modal__cover { position: relative; aspect-ratio: 2 / 1; display: grid; place-items: center; }
/* The cover photo is shown at full strength. There used to be a gradient veil
   over the whole thing, fading it into the panel colour — it washed the
   photo out, and the agent's face is the point of this modal. */
.ac-modal__cover-initials { position: relative; z-index: 1; font-family: var(--ac-font-display); font-weight: 700; font-size: 60px; color: rgba(var(--ac-line-rgb),.95); text-shadow: 0 4px 24px rgba(var(--ac-shadow-rgb),.4); }
.ac-modal__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.ac-modal__content { padding: 4px 30px 30px; margin-top: -30px; position: relative; z-index: 2; text-align: center; }
/* This badge overlaps the bottom of the cover photo, so its background has to
   be opaque. It used to be 12% green, which only worked because the veil
   behind it flattened whatever the photo was doing — over a bright patch of
   photo the text fell to about 1.3:1. Solid plate, ~10:1 dark / ~4.8:1 light. */
.ac-modal__badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--ac-font-body); font-size: 12px; font-weight: 600;
  color: var(--ac-status-success);
  background: #12261a;
  border: 1px solid rgba(126,226,168,.35);
  padding: 6px 14px; border-radius: 999px; margin-bottom: 14px;
}
html[data-theme="light"] .ac-modal__badge {
  background: #e8f4ea;
  border-color: rgba(30,122,55,.28);
}
.ac-modal__badge svg { width: 15px; height: 15px; }
.ac-modal__name { font-family: var(--ac-font-display); font-weight: 600; font-size: 26px; color: var(--ac-text); margin: 0 0 4px; }
.ac-modal__position { font-family: var(--ac-font-body); font-size: 14px; color: var(--ac-accent-orange); font-weight: 500; margin: 0 0 8px; }
.ac-modal__area { display: inline-flex; align-items: center; gap: 6px; font-family: var(--ac-font-body); font-size: 14px; color: var(--ac-text-3); margin: 0 0 20px; }
.ac-modal__dev { display: inline-flex; align-items: center; gap: 12px; margin: -8px 0 20px; padding: 8px 16px; border-radius: 999px; background: rgba(var(--ac-line-rgb),.05); border: 1px solid var(--ac-border); }
.ac-modal__dev-label { font-family: var(--ac-font-body); font-size: 12px; color: var(--ac-text-3); }
/* Developer logos are dark artwork on a transparent background, so on the
   modal's dark panel they were nearly invisible.

   Rather than putting a light plate behind them — which depends on a
   background actually painting, and looks heavy inside a small chip — the
   logo itself is recoloured. brightness(0) flattens every pixel to black
   while keeping the alpha channel, so the shape survives whatever colour the
   original artwork is; invert(1) then turns that silhouette white for the
   dark panel. A partner who supplies a white logo comes out identical,
   which a plate could never guarantee. */
.ac-modal__dev img {
  max-height: 22px; max-width: 96px; width: auto;
  object-fit: contain;
  filter: brightness(0) invert(1);   /* dark page: white logo */
}
html[data-theme="light"] .ac-modal__dev img {
  filter: brightness(0);             /* light page: black logo */
}
/* The stats row used to sit above this and carried the rule that separated
   the header from the bio. With it gone the divider moves here, so the modal
   still reads as two parts rather than one run-on block. */
.ac-modal__brief {
  font-family: var(--ac-font-body); font-size: 15px; line-height: 1.7;
  color: var(--ac-text-3); text-align: left;
  margin: 0 0 24px;
  padding-top: 20px;
  border-top: 1px solid var(--ac-border);
}
.ac-modal__actions { display: flex; gap: 12px; }
.ac-modal__actions .ac-btn { flex: 1; justify-content: center; }

/* Video modal */
.ac-modal__panel--video { max-width: 860px; background: #000; border-radius: 18px; }
.ac-modal__video { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; }
.ac-modal__video iframe, .ac-modal__video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Vertical source (a YouTube Short): a tall, narrow frame instead of a 16:9
   one, capped by viewport height so it can't run off the screen. */
.ac-modal__video.is-portrait { aspect-ratio: 9 / 16; max-height: 82vh; width: auto; margin: 0 auto; }
.ac-modal__panel--video:has(.ac-modal__video.is-portrait) { max-width: min(460px, 92vw); background: transparent; }

@media (max-width: 560px) {
  .ac-modal__content { padding: 4px 20px 24px; }
  .ac-modal__name { font-size: 22px; }
  .ac-modal__actions { flex-direction: column; }
}
body.ac-modal-open { overflow: hidden; }

/* ============================================================
   CAREERS — job list
   ============================================================ */
.ac-jobs { display: flex; flex-direction: column; gap: 14px; margin-top: 44px; }
.ac-job {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 24px 28px; border-radius: 18px; text-decoration: none;
  background: rgba(var(--ac-line-rgb),.03); border: 1px solid var(--ac-border);
  transition: transform .3s var(--ac-ease), border-color .3s, background .3s;
}
.ac-job:hover { transform: translateX(6px); border-color: rgba(221,81,28,.35); background: rgba(var(--ac-line-rgb),.05); }
.ac-job__dept { font-family: var(--ac-font-body); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ac-accent-orange); }
.ac-job__title { font-family: var(--ac-font-display); font-weight: 600; font-size: 19px; color: var(--ac-text); margin: 6px 0 10px; }
.ac-job__meta { display: flex; flex-wrap: wrap; gap: 18px; }
.ac-job__meta span { display: inline-flex; align-items: center; gap: 6px; font-family: var(--ac-font-body); font-size: 13px; color: var(--ac-text-3); }
.ac-job__meta svg { width: 15px; height: 15px; }
.ac-job__arrow { flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--ac-border-strong); display: grid; place-items: center; color: var(--ac-text); transition: background .3s, transform .3s; }
.ac-job:hover .ac-job__arrow { background: var(--ac-grad-btn); border-color: transparent; }
.ac-job__arrow svg { width: 18px; height: 18px; }
@media (max-width: 560px) {
  .ac-job { flex-direction: row; padding: 20px; }
  .ac-job__arrow { width: 38px; height: 38px; }
}

/* Help search box */
.ac-helpsearch {
  max-width: 640px; margin: 0 auto; display: flex; align-items: center; gap: 12px;
  padding: 4px 4px 4px 20px; border-radius: 999px;
  background: rgba(var(--ac-line-rgb),.05); border: 1px solid var(--ac-border);
}
.ac-helpsearch svg { width: 20px; height: 20px; color: var(--ac-text-3); flex-shrink: 0; }
.ac-helpsearch input { flex: 1; background: transparent; border: 0; outline: none; color: var(--ac-text); font-family: var(--ac-font-body); font-size: 15px; padding: 14px 0; }
.ac-helpsearch input::placeholder { color: var(--ac-text-3); }

/* ============================================================
   JOB DETAIL + APPLY FORM
   ============================================================ */
.ac-pagehero__inner--left { text-align: left; align-items: flex-start; }
.ac-job__meta--hero { margin-top: 18px; }
.ac-job__meta--hero span { font-size: 15px; }

.ac-jobdetail { display: grid; grid-template-columns: 1fr 380px; gap: 48px; align-items: start; max-width: 1040px; margin: 0 auto; }
.ac-jobdetail__body { max-width: none; }
.ac-jobdetail__apply { position: sticky; top: 100px; }
.ac-applybox {
  padding: 28px; border-radius: 22px;
  background: linear-gradient(180deg, rgba(var(--ac-text-rgb),.05), rgba(var(--ac-text-rgb),.01));
  border: 1px solid var(--ac-border);
}
.ac-applybox__title { font-family: var(--ac-font-display); font-weight: 600; font-size: 20px; margin: 0 0 20px; color: var(--ac-text); }
.ac-applybox__closed { font-family: var(--ac-font-body); color: var(--ac-text-3); font-size: 15px; }
.ac-applyform { display: flex; flex-direction: column; gap: 14px; }
.ac-applyform .ac-btn { justify-content: center; margin-top: 4px; }

.ac-formmsg { display: flex; gap: 12px; align-items: flex-start; padding: 16px; border-radius: 14px; font-family: var(--ac-font-body); font-size: 14px; line-height: 1.5; }
.ac-formmsg p { margin: 0; }
.ac-formmsg svg { width: 22px; height: 22px; flex-shrink: 0; }
.ac-formmsg--ok { background: rgba(26,127,55,.12); border: 1px solid rgba(26,127,55,.35); color: var(--ac-status-success); }
.ac-formmsg--err { background: rgba(179,45,46,.12); border: 1px solid rgba(179,45,46,.35); color: var(--ac-status-error); }

.ac-empty { text-align: center; padding: 60px 24px; border: 1px dashed var(--ac-border-strong); border-radius: 22px; margin-top: 40px; }
.ac-empty p { font-family: var(--ac-font-body); color: var(--ac-text-3); font-size: 16px; max-width: 480px; margin: 0 auto; }

@media (max-width: 900px) {
  .ac-jobdetail { grid-template-columns: 1fr; gap: 32px; }
  .ac-jobdetail__apply { position: static; }
}

/* Apply box share row */
.ac-applybox__share { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--ac-border); }
.ac-applybox__share > span { display: block; font-family: var(--ac-font-body); font-size: 13px; color: var(--ac-text-3); margin-bottom: 12px; }
.ac-applybox__share-links { display: flex; gap: 10px; }
.ac-applybox__share-links a {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(var(--ac-line-rgb),.05); border: 1px solid var(--ac-border); color: var(--ac-text-2);
  transition: background .25s, transform .25s, color .25s, border-color .25s;
}
.ac-applybox__share-links a:hover { background: var(--ac-grad-btn); border-color: transparent; color: #fff; transform: translateY(-2px); }
.ac-applybox__share-links svg { width: 18px; height: 18px; }

/* ============================================================
   ABOUT PAGE — full redesign
   ============================================================ */
.ac-about2 { overflow: hidden; }
.ac-ab-hero { position: relative; padding: 160px 0 60px; }
.ac-ab-hero .ac-glow--p { top: -10%; left: -10%; }
.ac-ab-hero .ac-glow--2 { bottom: -30%; right: -10%; }
.ac-ab-hero__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: center; }
.ac-ab-hero__lead .ac-tagline { margin-bottom: 20px; }
.ac-ab-hero__title { font-family: var(--ac-font-display); font-weight: 600; font-size: clamp(34px, 5vw, 60px); line-height: 1.08; letter-spacing: -.02em; color: var(--ac-text); margin: 0 0 22px; }
.ac-ab-hero__sub { font-family: var(--ac-font-body); font-size: var(--ac-fs-lead); line-height: 1.7; color: var(--ac-text-3); max-width: 540px; margin: 0 0 32px; }
.ac-ab-hero__cta { display: flex; gap: 14px; flex-wrap: wrap; }

/* Hero art: floating orbs + a stat badge */
.ac-ab-hero__art { position: relative; aspect-ratio: 1/1; display: grid; place-items: center; }
.ac-ab-orb { position: absolute; border-radius: 50%; filter: blur(2px); }
.ac-ab-orb--1 { width: 62%; height: 62%; background: radial-gradient(circle at 30% 30%, rgba(222,110,32,.55), rgba(198,7,48,.15) 60%, transparent 72%); top: 6%; left: 8%; animation: acFloat 7s ease-in-out infinite; }
.ac-ab-orb--2 { width: 44%; height: 44%; background: radial-gradient(circle at 40% 30%, rgba(138,29,152,.55), rgba(84,19,96,.12) 62%, transparent 74%); bottom: 8%; right: 6%; animation: acFloat 9s ease-in-out infinite reverse; }
.ac-ab-orb--3 { width: 30%; height: 30%; background: radial-gradient(circle at 40% 30%, rgba(181,13,77,.5), transparent 70%); top: 40%; left: 44%; animation: acFloat 6s ease-in-out infinite; }
.ac-ab-hero__badge { position: relative; z-index: 2; text-align: center; padding: 28px 34px; border-radius: 26px; background: var(--ac-glass-bg); backdrop-filter: blur(20px); border: 1px solid rgba(var(--ac-line-rgb),.12); box-shadow: 0 30px 70px -20px rgba(var(--ac-shadow-rgb),.7); }
.ac-ab-hero__badge-num { display: block; font-family: var(--ac-font-display); font-weight: 700; font-size: clamp(40px, 5vw, 60px); line-height: 1; }
.ac-ab-hero__badge-label { display: block; font-family: var(--ac-font-body); font-size: 14px; color: var(--ac-text-3); margin-top: 8px; }

/* Interactive mouse-reactive balls in the about hero */
.ac-ab-hero__art { will-change: transform; }
.ac-ab-ball {
  position: absolute; z-index: 1; width: 18px; height: 18px; border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, #f0a072, #c60730 62%, #811c93 100%);
  box-shadow: 0 8px 22px -6px rgba(198,7,48,.55), inset 0 1px 2px rgba(var(--ac-line-rgb),.35);
  transition: transform .5s cubic-bezier(.22,.61,.36,1);
  pointer-events: none;
}
.ac-ab-ball--sm { width: 11px; height: 11px; opacity: .85; }
.ac-ab-ball--lg { width: 26px; height: 26px; background: radial-gradient(circle at 32% 30%, #f5b98f, #dc481b 55%, #8a1d98 100%); }
.ac-ab-orb { transition: transform .6s cubic-bezier(.22,.61,.36,1); }
@media (prefers-reduced-motion: reduce) {
  .ac-ab-ball, .ac-ab-orb { transition: none !important; }
}

/* Stats band */
.ac-ab-stats { padding: 40px 0; }
.ac-ab-stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding: 40px; border-radius: 26px; background: linear-gradient(180deg, rgba(var(--ac-text-rgb),.04), rgba(var(--ac-text-rgb),.01)); border: 1px solid var(--ac-border); }
.ac-ab-stat { text-align: center; }
.ac-ab-stat__num { display: block; font-family: var(--ac-font-display); font-weight: 700; font-size: clamp(30px, 3.5vw, 44px); line-height: 1; color: var(--ac-text); }
.ac-ab-stat__label { display: block; font-family: var(--ac-font-body); font-size: 14px; color: var(--ac-text-3); margin-top: 10px; }

/* Mission split */
.ac-ab-mission { padding: 70px 0; }
.ac-ab-mission__grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 56px; }
.ac-ab-mission__sticky { position: sticky; top: 110px; align-self: start; }
.ac-ab-mission__title { font-family: var(--ac-font-display); font-weight: 600; font-size: clamp(28px, 3.5vw, 42px); line-height: 1.15; letter-spacing: -.02em; margin: 16px 0 0; }
.ac-ab-mission__body p { font-family: var(--ac-font-body); font-size: var(--ac-fs-lead); line-height: 1.8; color: var(--ac-text-3); margin: 0 0 22px; }
/* The closing line of the mission copy, set apart from the paragraph above:
   full-strength text colour rather than the dimmed body tone, heavier, and a
   step larger — so it reads as the statement it is. */
.ac-ab-mission__body p.ac-ab-mission__kicker {
  color: var(--ac-text);
  font-weight: 700;
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.45;
  margin: 4px 0 0;
  text-align: left;
  text-align-last: auto;
  hyphens: none; -webkit-hyphens: none;
}
html[data-theme="light"] .ac-ab-mission__body p.ac-ab-mission__kicker { color: #000; }
.ac-ab-mission__body p:first-child::first-letter { font-family: var(--ac-font-display); font-weight: 700; font-size: 3.4em; float: left; line-height: .8; margin: 6px 12px 0 0; background: var(--ac-grad-brand); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* Timeline */
.ac-ab-timeline-sec { padding: 40px 0 70px; }
.ac-timeline { position: relative; max-width: 860px; margin: 50px auto 0; }
.ac-timeline::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: linear-gradient(180deg, transparent, var(--ac-border-strong) 10%, var(--ac-border-strong) 90%, transparent); transform: translateX(-50%); }
.ac-tl { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-bottom: 40px; align-items: center; }
.ac-tl__year { font-family: var(--ac-font-display); font-weight: 700; font-size: 30px; color: var(--ac-text); }
.ac-tl__dot { position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; border-radius: 50%; background: var(--ac-grad-btn); transform: translate(-50%, -50%); box-shadow: 0 0 0 5px rgba(181,13,77,.15); z-index: 2; }
.ac-tl__card { padding: 22px 24px; border-radius: 18px; background: rgba(var(--ac-line-rgb),.03); border: 1px solid var(--ac-border); }
.ac-tl__title { font-family: var(--ac-font-display); font-weight: 600; font-size: 19px; margin: 0 0 8px; color: var(--ac-text); }
.ac-tl__text { font-family: var(--ac-font-body); font-size: 14px; line-height: 1.6; color: var(--ac-text-3); margin: 0; }
/* Alternate sides */
.ac-tl:nth-child(odd) .ac-tl__year { text-align: right; }
.ac-tl:nth-child(odd) .ac-tl__card { grid-column: 2; }
.ac-tl:nth-child(even) .ac-tl__year { grid-column: 2; order: 2; }
.ac-tl:nth-child(even) .ac-tl__card { grid-column: 1; grid-row: 1; text-align: right; }

@media (max-width: 900px) {
  .ac-ab-hero__grid { grid-template-columns: 1fr; gap: 40px; }
  .ac-ab-hero__art { max-width: 380px; margin: 0 auto; }
  .ac-ab-stats__grid { grid-template-columns: 1fr 1fr; gap: 28px; padding: 30px; }
  .ac-ab-mission__grid { grid-template-columns: 1fr; gap: 24px; }
  .ac-ab-mission__sticky { position: static; }
  .ac-timeline::before { left: 8px; }
  .ac-tl { grid-template-columns: 1fr; gap: 8px; padding-left: 34px; }
  .ac-tl__dot { left: 8px; }
  .ac-tl:nth-child(odd) .ac-tl__year,
  .ac-tl:nth-child(even) .ac-tl__year { text-align: left; grid-column: 1; order: 0; }
  .ac-tl:nth-child(odd) .ac-tl__card,
  .ac-tl:nth-child(even) .ac-tl__card { grid-column: 1; grid-row: auto; text-align: left; }
}
@media (max-width: 480px) {
  .ac-ab-stats__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   CONTACT PAGE — full redesign
   ============================================================ */
.ac-contact2 { overflow: hidden; }
.ac-ct-hero { position: relative; padding: 150px 0 80px; }
.ac-ct-hero .ac-glow--p { top: 0; right: -10%; }
.ac-ct-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 56px; align-items: start; }
.ac-ct-left .ac-tagline { margin-bottom: 18px; }
.ac-ct-title { font-family: var(--ac-font-display); font-weight: 600; font-size: clamp(40px, 6vw, 72px); line-height: 1.02; letter-spacing: -.02em; color: var(--ac-text); margin: 0 0 20px; }
.ac-ct-sub { font-family: var(--ac-font-body); font-size: var(--ac-fs-lead); line-height: 1.7; color: var(--ac-text-3); max-width: 440px; margin: 0 0 36px; }
.ac-ct-methods { display: flex; flex-direction: column; gap: 12px; max-width: 440px; }
.ac-ct-method { display: flex; align-items: center; gap: 16px; padding: 16px 18px; border-radius: 16px; background: rgba(var(--ac-line-rgb),.03); border: 1px solid var(--ac-border); text-decoration: none; transition: transform .25s var(--ac-ease), border-color .25s, background .25s; }
a.ac-ct-method:hover { transform: translateX(4px); border-color: rgba(221,81,28,.35); background: rgba(var(--ac-line-rgb),.05); }
.ac-ct-method__ic { width: 46px; height: 46px; flex-shrink: 0; border-radius: 12px; display: grid; place-items: center; background: var(--ac-grad-btn); color: #fff; }
.ac-ct-method__ic svg { width: 22px; height: 22px; }
.ac-ct-method__body { display: flex; flex-direction: column; gap: 3px; }
.ac-ct-method__body b { font-family: var(--ac-font-display); font-weight: 600; font-size: 15px; color: var(--ac-text); }
.ac-ct-method__body small { font-family: var(--ac-font-body); font-size: 14px; color: var(--ac-text-3); }

/* Form panel */
.ac-ct-formpanel { position: relative; border-radius: 28px; padding: 1px; }
.ac-ct-formpanel__glow { position: absolute; inset: -1px; border-radius: 28px; background: linear-gradient(140deg, rgba(221,81,28,.5), rgba(129,28,147,.5)); opacity: .5; filter: blur(20px); z-index: 0; }
.ac-ct-formpanel__inner { position: relative; z-index: 1; padding: 40px; border-radius: 27px; background: var(--ac-panel); border: 1px solid rgba(var(--ac-line-rgb),.1); }
.ac-ct-formpanel__title { font-family: var(--ac-font-display); font-weight: 600; font-size: 24px; margin: 0 0 24px; color: var(--ac-text); }
.ac-ct-form { display: flex; flex-direction: column; gap: 16px; }
.ac-ct-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ac-ct-form__submit { justify-content: center; margin-top: 6px; }

@media (max-width: 900px) {
  .ac-ct-grid { grid-template-columns: 1fr; gap: 40px; }
  .ac-ct-methods, .ac-ct-sub { max-width: none; }
}
@media (max-width: 560px) {
  .ac-ct-formpanel__inner { padding: 26px; }
  .ac-ct-form__row { grid-template-columns: 1fr; }
}

/* ============================================================
   SINGLE VACANCY — full redesign
   ============================================================ */
.ac-vac { overflow: hidden; }
.ac-vac-hero { position: relative; padding: 130px 0 50px; }
.ac-vac-hero .ac-glow--p { top: -10%; left: 10%; }
.ac-vac-hero .ac-glow--2 { top: 20%; right: -5%; }
.ac-vac-hero__main { max-width: 760px; margin-top: 24px; }
.ac-vac-hero__dept { display: inline-block; font-family: var(--ac-font-body); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ac-accent-orange); padding: 6px 14px; border-radius: 999px; border: 1px solid rgba(221,81,28,.35); background: rgba(221,81,28,.08); margin-bottom: 20px; }
.ac-vac-hero__title { font-family: var(--ac-font-display); font-weight: 600; font-size: clamp(32px, 5vw, 56px); line-height: 1.06; letter-spacing: -.02em; margin: 0 0 18px; }
.ac-vac-hero__summary { font-family: var(--ac-font-body); font-size: var(--ac-fs-lead); line-height: 1.7; color: var(--ac-text-3); margin: 0 0 26px; max-width: 620px; }
.ac-vac-hero__pills { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 30px; }
.ac-vac-pill { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; background: rgba(var(--ac-line-rgb),.04); border: 1px solid var(--ac-border); font-family: var(--ac-font-body); font-size: 14px; color: var(--ac-text-2); }
.ac-vac-pill svg { width: 16px; height: 16px; }
.ac-vac-pill--open { color: var(--ac-status-success); border-color: rgba(26,127,55,.4); background: rgba(26,127,55,.1); }
.ac-vac-pill--closed { color: var(--ac-status-error); border-color: rgba(179,45,46,.4); background: rgba(179,45,46,.1); }
.ac-vac-pill__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ac-status-success); box-shadow: 0 0 0 3px rgba(67,215,135,.2); animation: acPulse 2s ease-in-out infinite; }
@keyframes acPulse { 0%,100% { opacity: 1; } 50% { opacity: .4; } }
.ac-vac-hero__apply { margin-top: 4px; }

.ac-vac-body { padding: 30px 0 40px; }
.ac-vac-grid { display: grid; grid-template-columns: 1fr 400px; gap: 56px; align-items: start; }
.ac-vac-content { font-family: var(--ac-font-body); font-size: var(--ac-fs-body); line-height: 1.85; color: var(--ac-text-3); }
.ac-vac-content h2 { font-family: var(--ac-font-display); font-weight: 600; font-size: clamp(22px, 3vw, 28px); color: var(--ac-text); margin: 36px 0 14px; }
.ac-vac-content h3 { font-family: var(--ac-font-display); font-weight: 600; font-size: 19px; color: var(--ac-text); margin: 28px 0 10px; }
.ac-vac-content p { margin: 0 0 18px; }
.ac-vac-content ul, .ac-vac-content ol { margin: 0 0 18px; padding-left: 4px; list-style: none; }
.ac-vac-content li { position: relative; padding-left: 30px; margin-bottom: 12px; }
.ac-vac-content ul li::before { content: ''; position: absolute; left: 4px; top: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--ac-grad-btn); }

.ac-vac-side { position: relative; }
.ac-vac-apply { position: sticky; top: 100px; border-radius: 26px; padding: 1px; }
.ac-vac-apply__glow { position: absolute; inset: -1px; border-radius: 26px; background: linear-gradient(150deg, rgba(221,81,28,.45), rgba(129,28,147,.45)); opacity: .45; filter: blur(18px); z-index: 0; }
.ac-vac-apply__inner { position: relative; z-index: 1; padding: 30px; border-radius: 25px; background: var(--ac-panel); border: 1px solid rgba(var(--ac-line-rgb),.1); }
.ac-vac-apply__title { font-family: var(--ac-font-display); font-weight: 600; font-size: 22px; margin: 0 0 4px; color: var(--ac-text); }
.ac-vac-apply__note { font-family: var(--ac-font-body); font-size: 13px; color: var(--ac-text-3); margin: 0 0 22px; }

@media (max-width: 980px) {
  .ac-vac-grid { grid-template-columns: 1fr; gap: 36px; }
  .ac-vac-apply { position: static; }
}

/* Section intro lead paragraph (e.g. Features section) */
.ac-section__lead {
  font-family: var(--ac-font-body); font-size: var(--ac-fs-lead); line-height: 1.7;
  color: var(--ac-text-3); max-width: 680px; margin: 16px auto 0; text-align: center;
}

/* Benefit logos replacing product-page text titles.
   Logos vary in aspect ratio (Express is wide, Sell/Refer are tall), so we
   constrain by HEIGHT and cap the width, and scale down fluidly on small screens. */
.ac-express-hero__logo {
  display: block; margin: 0 auto;
  height: clamp(72px, 12vw, 128px);
  width: auto; max-width: min(90vw, 460px); object-fit: contain;
  filter: drop-shadow(0 12px 40px rgba(181,13,77,.25));
}
.ac-prod__heading .ac-prod__logo {
  display: block;
  height: clamp(52px, 8vw, 84px);
  width: auto; max-width: min(80vw, 300px); object-fit: contain;
  margin: 0 0 6px;
}
@media (max-width: 640px) {
  .ac-express-hero__logo { height: clamp(60px, 18vw, 92px); }
  .ac-prod__heading .ac-prod__logo { height: clamp(46px, 13vw, 68px); }
}
@media (max-width: 400px) {
  .ac-express-hero__logo { height: 56px; }
  .ac-prod__heading .ac-prod__logo { height: 42px; }
}

/* ============================================================
   Commission Calculator — real inputs styled inside the original
   xcard field chrome (transparent controls over the field pills).
   ============================================================ */
.ac-xcard__field--select,
.ac-xcard__field--input { padding: 0; }
.ac-xcard__field--select select,
.ac-xcard__field--input input {
  width: 100%; height: 100%; box-sizing: border-box;
  background: transparent; border: 0; outline: none;
  padding: 0 16px; color: var(--ac-text);
  font-family: var(--ac-font-ui); font-size: 14px; letter-spacing: -.14px;
}
.ac-xcard__field--select { padding-right: 40px; }
.ac-xcard__field--select select {
  appearance: none; -webkit-appearance: none; cursor: pointer; color: var(--ac-text-2);
}
.ac-xcard__field--select select option { background: var(--ac-panel); color: var(--ac-text); }
.ac-xcard__field--input input::placeholder { color: var(--ac-text-3); opacity: .8; }
.ac-xcard__field--input input:focus,
.ac-xcard__field--select select:focus { color: var(--ac-text); }
.ac-xcard__field--rate { max-width: 110px; }
/* The live result number uses the brand magenta from the original design. */
.ac-xcard__amount .val b#ac-calc-amount { color: var(--ac-magenta); }

/* ============================================================
   MOBILE PERFORMANCE — cut GPU-heavy effects on phones
   backdrop-filter and simultaneous infinite animations are the
   main cause of jank on mid/low-end mobile. Rather than listing
   every class (easy to miss one), we kill them globally and then
   restore solid backgrounds where the blur provided contrast.
   ============================================================ */
@media (max-width: 768px) {
  /* 1. Remove EVERY backdrop-filter. This is the single biggest win —
        backdrop-filter forces the GPU to re-composite the layers behind
        an element on every frame, which tanks scrolling on phones. */
  *, *::before, *::after {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  /* Restore opaque backgrounds where the blur used to supply contrast. */
  .ac-header.is-scrolled { background: var(--ac-glass-bg-strong); }
  /* Animating padding re-runs layout on every scroll frame, which stutters on
     phones. Keep the header height fixed and only transition the (cheap)
     background so the sticky header stays smooth. */
  .ac-header {
    /* Fixed height on mobile — padding does not change between states, so
       scrolling never triggers a layout pass. Only the background transitions.
       IMPORTANT: no `contain` and no `will-change` here. Either one turns the
       header into a containing block, which makes the drawer inside it (also
       position:fixed) anchor to the ~60px header instead of the viewport — that
       clipped the drawer to a sliver and showed it blank, especially once
       scrolled. */
    padding: 16px 0;
    transition: background .25s ease;
  }
  .ac-header.is-scrolled { padding: 16px 0; }
  .ac-badge { background: var(--ac-glass-bg-strong); }
  .ac-badge__icon { background: rgba(var(--ac-line-rgb),.16); }
  .ac-menu-backdrop { background: rgba(4,3,6,.8); }
  .ac-ab-hero__badge { background: var(--ac-glass-bg-strong); }
  .ac-nav__menu .sub-menu { background: var(--ac-glass-bg-strong); }
  .ac-modal, .ac-modal__panel { background: var(--ac-glass-bg-strong); }
  .ac-vid__play, .ac-vid__badge { background: rgba(15,12,20,.9); }

  /* 2. Stop every perpetual animation. Decorative loops (floating badges,
        pulsing dots, drifting orbs, the logo marquee) each keep a
        compositor layer awake permanently, burning battery and frames. */
  .ac-badge--tl, .ac-badge--tr,
  .ac-ab-orb--1, .ac-ab-orb--2, .ac-ab-orb--3,
  .ac-vac-pill__dot,
  .ac-vid__play::after, .ac-vid__play::before,
  .ac-orbit.is-visible .ac-orbit__bubble-inner,
  .ac-reveal.is-visible .ac-orbit__bubble-inner,
  .ac-orbit.is-visible .ac-orbit__center,
  .ac-reveal.is-visible .ac-orbit__center {
    animation: none !important;
  }
  /* The marquee is a brand element, so keep it but slow it right down. */
  .ac-marquee__track { animation-duration: 60s; gap: 44px; }
  /* Tighter logo sizing so more fit on a narrow screen, and a softer mask
     (a wide fade on a small viewport hides most of the row). */
  .ac-marquee {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  }
  .ac-marquee__item { height: 44px; font-size: 20px; }
  .ac-marquee__item img { height: 26px; }

  /* 3. Drop expensive multi-layer shadows and filters on decorative bits. */
  /* The decorative glows use filter: blur(130px) on elements up to 1200px wide.
     A blur that large is one of the most expensive things a mobile GPU can
     render, and these glows sit on the hero, features, AND every inner page.
     Replace the real blur with a soft radial-gradient that looks nearly
     identical but costs almost nothing to paint. This is a big scroll win. */
  .ac-glow {
    filter: none !important;
    background-image: radial-gradient(closest-side, currentColor, transparent 70%) !important;
    opacity: .5;
  }
  .ac-hero .ac-glow--1 { color: rgba(198,7,48,.18); background-color: transparent !important; }
  .ac-features .ac-glow--2,
  .ac-ab-hero .ac-glow--2,
  .ac-vac-hero .ac-glow--2 { color: rgba(138,29,152,.14); background-color: transparent !important; }
  .ac-pagehero .ac-glow--p,
  .ac-ab-hero .ac-glow--p,
  .ac-ct-hero .ac-glow--p,
  .ac-vac-hero .ac-glow--p { color: rgba(198,7,48,.16); background-color: transparent !important; }

  .ac-orbit__ring-path, .ac-orbit__curve { filter: none; }
  .ac-hero::before, .ac-hero::after { filter: none; }

  /* NOTE: content-visibility was removed here. It skips rendering for
     offscreen sections, but it also breaks elements that rely on
     intrinsic width (the logo marquee uses width:max-content plus a
     mask), causing them to disappear entirely on mobile. The other
     optimisations above give the bulk of the benefit without that risk. */
}

/* ============================================================
   JUSTIFIED BODY COPY

   Justification is only as good as the two things it depends on:

   1. Measure. Slack has to be shared across enough gaps to stay
      invisible. These columns run 60-76 characters per line, which
      is the range good typography aims for. Narrow columns (cards,
      half-width product copy) are left-aligned instead — at ~40
      characters a line has four or five gaps to absorb the slack
      and no setting can hide that.

   2. Hyphenation. This is the part that was missing. Without it a
      line holding one long word can only be justified by stretching
      the spaces, which is what produced the rivers of white space.
      Turning it on lets the browser break the word instead and keeps
      word spacing near normal.

   hyphenate-limit-chars stops the ugly breaks hyphenation is famous
   for: never hyphenate a word shorter than 6 letters, and never
   leave fewer than 3 letters on either side of the break.
   ============================================================ */
.ac-ab-hero__sub,
.ac-ab-mission__body p,
.ac-section__sub,
.ac-section__lead,
.ac-cta__sub {
  text-align: justify;
  text-justify: inter-word;

  -webkit-hyphens: auto;
  hyphens: auto;
  -webkit-hyphenate-limit-before: 3;
  -webkit-hyphenate-limit-after: 3;
  hyphenate-limit-chars: 6 3 3;

  /* Balances the closing lines so a paragraph doesn't end on a single
     stranded word. */
  text-wrap: pretty;

  /* A long unbroken string (a URL, say) must still not be forced to
     stretch a line — it wraps rather than blowing the measure open. */
  overflow-wrap: break-word;
}

/* The last line of a justified block is never stretched. It follows the
   block's own alignment: flush left for left-aligned copy, centred for the
   centred intro paragraphs, so it reads as deliberate rather than stray. */
.ac-ab-hero__sub,
.ac-ab-mission__body p { text-align-last: left; }

.ac-section__sub,
.ac-section__lead,
.ac-cta__sub { text-align-last: center; }

/* Narrow columns: never justified, at any width — the measure is simply
   too short for it to look like anything but gappy. */
.ac-prod__text,
.ac-benefit__text,
.ac-features__intro {
  text-align: left;
  text-wrap: pretty;
  hyphens: none; -webkit-hyphens: none;
}

/* Below this width the column is the viewport, which is only a handful of
   words per line — back to left-aligned. */
@media (max-width: 900px) {
  .ac-ab-hero__sub,
  .ac-ab-mission__body p,
  .ac-section__sub,
  .ac-section__lead,
  .ac-cta__sub {
    text-align: left;
    text-align-last: auto;
    hyphens: none; -webkit-hyphens: none;
  }
}

/* ============================================================
   SCROLL LOCK (menu drawer)
   Deliberately OUTSIDE any media query. The JS sets body.style.top
   to a negative offset while the drawer is open; if the matching
   position:fixed rule were breakpoint-scoped, rotating or resizing
   past the breakpoint would leave the offset applied without the
   fixed positioning, which shifts the page and breaks scrolling.
   ============================================================ */
body.ac-menu-open {
  position: fixed;
  left: 0; right: 0; width: 100%;
  overflow: hidden;
  /* NOTE: no `contain` here. contain:layout makes the body a containing block
     for its position:fixed children (the drawer + backdrop), so once the page
     is scrolled — when body also has a negative top offset — the drawer
     anchored to the shifted body and rendered blank/off-screen. That was the
     "open blank after scrolling" bug. */
}

/* ============================================================
   VIDEO SCROLL PERFORMANCE (mobile)
   A playing video repaints constantly. Without containment the
   browser may re-evaluate layout for the surrounding section on
   every frame, which is felt as scroll stutter while the video
   buffers. `contain` scopes that work to the element itself.
   ============================================================ */
.ac-hero__video,
.ac-prod__video {
  contain: layout paint style;
  /* Promote to its own compositor layer so video repaints never dirty
     the rest of the page. */
  transform: translateZ(0);
  backface-visibility: hidden;
}
@media (max-width: 900px) {
  /* Give the slot a stable size so a late-arriving video cannot reflow
     the page mid-scroll. */
  .ac-hero__preview { contain: layout paint; }
  .ac-prod__media { contain: layout paint; }
}

/* ============================================================
   MOBILE ANIMATION TIMING
   Long fades that feel elegant on desktop read as lag on a phone,
   where sections arrive one after another while scrolling. The
   reveal is shortened and the stagger removed on small screens so
   content appears promptly.
   ============================================================ */
@media (max-width: 900px) {
  .ac-js .ac-reveal {
    transform: translateY(16px);
    /* A gentle cubic-bezier reads smoother than ease-out, and a slightly
       longer opacity fade feels softer without dragging. Only opacity and
       transform animate, so it stays on the GPU. */
    transition: opacity .5s cubic-bezier(.22,.61,.36,1),
                transform .5s cubic-bezier(.22,.61,.36,1);
  }
  .ac-js .ac-reveal.is-visible { opacity: 1; transform: none; }
  /* Stagger delays make later cards feel like they are lagging behind. */
  .ac-js .ac-reveal[data-delay] { transition-delay: 0s; }
}

/* ============================================================
   VIDEO FADE-IN
   A <video> shows nothing until it has decoded its first frame, so
   even inside a revealed section it "pops" in abruptly. It starts
   dimmed and fades up once JS marks it ready (on the first painted
   frame), so it appears smoothly instead of snapping on.
   ============================================================ */
.ac-hero__video,
.ac-prod__video {
  opacity: 0;
  transition: opacity .5s ease;
}
.ac-hero__video.ac-video-ready,
.ac-prod__video.ac-video-ready {
  opacity: 1;
}
/* If JS is unavailable the video must still be visible. */
.no-js .ac-hero__video,
.no-js .ac-prod__video { opacity: 1; }

/* ============================================================
   IMAGE FADE-IN
   Content images fade up once decoded so they don't pop in. Only
   applied under .ac-js (JS running) and .ac-img-ready is added by
   JS on load, so images are never left hidden if scripts fail.
   ============================================================ */
.ac-js .ac-prod__img:not(.ac-prod__video),
.ac-js .ac-app-mockup,
.ac-js .ac-gal__img,
.ac-js .ac-carousel__poster,
.ac-js .ac-hero__preview img,
.ac-js .ac-benefit-logo,
.ac-js .ac-express-head__ar-img {
  opacity: 0;
  transition: opacity .5s ease;
}
.ac-js .ac-img-ready {
  opacity: 1 !important;
}

/* ============================================================
   FLOATING STICKY DOWNLOAD-APP CTA
   A small persistent prompt, independent of the full Download App
   section, that appears once the visitor has scrolled past the hero
   and hides again once the real section (or the mobile menu) is in
   view. Positioned bottom-LEFT on desktop deliberately, so it never
   collides with a bottom-right chat widget if one is added later.
   Shown/hidden with opacity+transform only (GPU-cheap, no layout cost),
   consistent with the rest of the theme's mobile performance work —
   no backdrop-filter here, just a solid brand-gradient surface.
   ============================================================ */
.ac-sticky-app {
  position: fixed;
  left: 20px; bottom: 20px;
  z-index: 950; /* above content, below the mobile drawer (1100-1200) */
  display: flex; align-items: center; gap: 12px;
  max-width: 360px;
  padding: 12px 14px;
  border-radius: 999px;
  background: var(--ac-grad-btn);
  /* A fixed white highlight, not the theme-flipping line-rgb — this sits on
     the brand gradient (always colourful, never affected by site theme), so
     a white "glass" edge is correct in both themes. Flipping it to a dark
     tint in light mode would have made the edge look muddy instead of
     glassy. */
  border: 1px solid rgba(255,255,255,.28);
  box-shadow: 0 20px 50px rgba(var(--ac-shadow-rgb),.45);
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px) scale(.96);
  transition: opacity .35s ease, transform .35s ease, visibility .35s;
  pointer-events: none;
}
.ac-sticky-app.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.ac-sticky-app__close {
  position: absolute; top: -8px; right: -8px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--ac-panel); border: 1px solid rgba(var(--ac-line-rgb),.2);
  color: var(--ac-text); display: grid; place-items: center;
  cursor: pointer; padding: 0;
}
.ac-sticky-app__close svg { width: 11px; height: 11px; }

.ac-sticky-app__icon {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
  /* White, not dark. The logo's wordmark is drawn in black, designed to sit
     on a light pill (exactly how it appears in the site's own header) — a
     dark badge behind it would make the text invisible. */
  background: #fff; overflow: hidden;
  display: grid; place-items: center;
  border: 1px solid rgba(var(--ac-line-rgb),.25);
  padding: 3px;
}
/* object-fit: contain (not cover) — a non-square source is scaled to fit
   whole inside the circle rather than cropped to fill it. */
.ac-sticky-app__icon img { width: 100%; height: 100%; object-fit: contain; }

.ac-sticky-app__txt { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; flex: 1; }
.ac-sticky-app__txt strong {
  font-family: var(--ac-font-ui); font-size: 13px; font-weight: 600; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ac-sticky-app__txt span {
  font-family: var(--ac-font-body); font-size: 11.5px;
  /* Fixed white, matching the title above — both sit on the always-
     colourful gradient, so this must not flip to near-black in light mode
     (which is what rgba(var(--ac-line-rgb),X) would have done here). */
  color: rgba(255,255,255,.8);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.ac-sticky-app__links { display: flex; gap: 6px; flex: 0 0 auto; }
.ac-sticky-app__link {
  width: 32px; height: 32px; border-radius: 50%;
  /* Same reasoning as the border above: this circle sits on the always-
     colourful gradient, so it stays a fixed white "glass" tint rather than
     flipping to a dark smudge in light mode. */
  background: rgba(255,255,255,.18);
  display: grid; place-items: center; color: #fff;
  transition: background .2s, transform .2s;
}
.ac-sticky-app__link:hover { background: rgba(255,255,255,.3); transform: translateY(-2px); }
.ac-sticky-app__link svg { width: 16px; height: 16px; }

/* Fully hidden while the real Download section is in view, or while the
   mobile drawer is open (avoids two floating fixed elements colliding). */
body.ac-menu-open .ac-sticky-app { display: none; }

@media (max-width: 640px) {
  /* Sized to match the chat widget's own footprint on mobile (a 58px
     circle) so the two floating elements read as the same scale/importance
     rather than one looking like an afterthought next to the other.
     38px icon + 10px vertical padding = 58px total height. */
  .ac-sticky-app {
    left: 14px; right: auto;
    bottom: 14px;
    bottom: calc(14px + env(safe-area-inset-bottom));
    max-width: min(66vw, 264px);
    padding: 10px 14px;
    padding-right: 14px;
    gap: 10px;
    border-radius: 999px;
  }
  .ac-sticky-app__icon { width: 38px; height: 38px; }
  .ac-sticky-app__icon img { width: 100%; height: 100%; }
  .ac-sticky-app__txt strong { font-size: 13.5px; }
  .ac-sticky-app__txt span { display: none; } /* subtitle only, keeps the pill compact */
  .ac-sticky-app__links { gap: 6px; }
  .ac-sticky-app__link { width: 34px; height: 34px; }
  .ac-sticky-app__link svg { width: 16px; height: 16px; }
}

/* If a companion floating widget (e.g. the AC Chat plugin) is present and
   also anchored bottom-left, main.js adds this class so the two stack
   vertically instead of overlapping. See the JS collision check. */
.ac-sticky-app.ac-sticky-app--stacked {
  bottom: 92px;
}

/* ============================================================
   ORBIT HOVER DESCRIPTIONS
   A short blurb per bubble, on hover and on keyboard focus.
   ============================================================ */
.ac-orbit__tip {
  position: absolute;
  left: 50%;
  width: max-content;
  max-width: 230px;
  padding: 11px 14px;
  border-radius: 14px;
  background: var(--ac-glass-bg, rgba(20,16,24,.92));
  border: 1px solid var(--ac-border);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 18px 40px -18px rgba(0,0,0,.55);
  text-align: left;
  z-index: 20;
  opacity: 0;
  visibility: hidden;
  pointer-events: none; /* never steals the click from the bubble */
  transition: opacity .22s var(--ac-ease), transform .22s var(--ac-ease), visibility .22s;
}
.ac-orbit__tip-title {
  display: block;
  font-family: var(--ac-font-display);
  font-weight: 600;
  font-size: 14px;
  /* --ac-text-1 does not exist in this theme; --ac-text is the full-strength
     token. The invalid one made this declaration a no-op, so the tooltip title
     rendered in the same colour as its description text. */
  color: var(--ac-text);
  margin-bottom: 3px;
}
.ac-orbit__tip-text {
  display: block;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ac-text-3);
}

/* Each tip opens AWAY from the centre of the orbit, so it never covers the
   logo in the middle or the bubble it belongs to. */
.ac-orbit__bubble--top    .ac-orbit__tip { bottom: 100%; margin-bottom: 12px; transform: translate(-50%, 6px); }
.ac-orbit__bubble--bottom .ac-orbit__tip { top: 100%;    margin-top: 12px;    transform: translate(-50%, -6px); }
/* The LEFT bubble opens further left, the RIGHT bubble further right. Getting
   these the wrong way round points both tips inwards, where they land on top
   of the centre logo. */
.ac-orbit__bubble--left   .ac-orbit__tip { top: 50%; left: auto; right: 100%; margin-right: 12px; transform: translate(6px, -50%); }
.ac-orbit__bubble--right  .ac-orbit__tip { top: 50%; left: 100%; margin-left: 12px; transform: translate(-6px, -50%); }

.ac-orbit__bubble:hover .ac-orbit__tip,
.ac-orbit__bubble:focus-visible .ac-orbit__tip {
  opacity: 1;
  visibility: visible;
}
.ac-orbit__bubble--top:hover    .ac-orbit__tip,
.ac-orbit__bubble--top:focus-visible    .ac-orbit__tip,
.ac-orbit__bubble--bottom:hover .ac-orbit__tip,
.ac-orbit__bubble--bottom:focus-visible .ac-orbit__tip { transform: translate(-50%, 0); }
.ac-orbit__bubble--left:hover   .ac-orbit__tip,
.ac-orbit__bubble--left:focus-visible   .ac-orbit__tip,
.ac-orbit__bubble--right:hover  .ac-orbit__tip,
.ac-orbit__bubble--right:focus-visible  .ac-orbit__tip { transform: translate(0, -50%); }

/* The side tips would overflow a narrow viewport, so below the desktop
   breakpoint every tip drops underneath its bubble instead. */
@media (max-width: 900px) {
  .ac-orbit__tip { max-width: 180px; font-size: 12px; }
  .ac-orbit__bubble--left  .ac-orbit__tip,
  .ac-orbit__bubble--right .ac-orbit__tip {
    top: 100%; left: 50%; right: auto;
    margin: 12px 0 0; transform: translate(-50%, -6px);
  }
  .ac-orbit__bubble--left:hover   .ac-orbit__tip,
  .ac-orbit__bubble--left:focus-visible   .ac-orbit__tip,
  .ac-orbit__bubble--right:hover  .ac-orbit__tip,
  .ac-orbit__bubble--right:focus-visible  .ac-orbit__tip { transform: translate(-50%, 0); }
}

/* Touch devices have no hover, and a tap follows the link — so the tooltip
   would flash and vanish. Hidden there rather than fighting the platform. */
@media (hover: none) {
  .ac-orbit__tip { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ac-orbit__tip { transition: opacity .01s; }
}

/* ============================================================
   ANIMATED NUMBER COUNTERS
   ============================================================ */
.ac-count {
  /* Tabular figures keep every digit the same width, so the surrounding text
     doesn't jitter left and right while the number is counting up. */
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
/* The parts are inline so a counter behaves exactly like the plain text it
   replaced — including inside a heading, where it sits mid-sentence. */
.ac-count__pre,
.ac-count__num,
.ac-count__suf { display: inline; }

/* Product names lifted out of body copy. Weight and colour only — no size
   change, so the line rhythm of the paragraph is untouched.

   This used to set var(--ac-text-1), a token that does not exist in this
   theme (they are --ac-text, --ac-text-2, --ac-text-3). An undefined custom
   property makes the whole declaration invalid, so the colour was dropped
   and the words went bold but stayed the same grey as the body copy. */
.ac-brand-term {
  font-weight: 700;
  color: var(--ac-brand-term, currentColor);
}

/* ============================================================
   HOW IT WORKS — commission calculator

   The live calculator sits higher up this same page, so the
   explanation is built as its sibling: the same glass panel, the
   same brand glow, the same field rhythm and total row. Reusing
   the product's own material is what keeps this from looking like
   a generic three-card explainer bolted onto the page.
   ============================================================ */
.ac-how { position: relative; }
.ac-how__grid {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1fr);
  gap: clamp(36px, 5vw, 72px);
  align-items: center;
}

/* ---- Words ---------------------------------------------------------- */
.ac-how__title {
  font-family: var(--ac-font-display);
  font-weight: 600;
  font-size: clamp(30px, 3.3vw, 44px);
  line-height: 1.12;
  letter-spacing: -.022em;
  margin: 0 0 20px;
  text-wrap: balance;
  color: var(--ac-text);
}
.ac-how__lead,
.ac-how__why {
  font-family: var(--ac-font-body);
  line-height: 1.72;
  max-width: 46ch;
  text-wrap: pretty;
}
.ac-how__lead { font-size: clamp(16px, 1.4vw, 19px); color: var(--ac-text-2); margin: 0; }
.ac-how__why {
  font-size: var(--ac-fs-lead);
  /* --ac-text-3 (50% alpha) measures 3.5:1 on the light page, under the 4.5:1
     needed for body text. This is a full paragraph, not a caption, so it uses
     the stronger tone. */
  color: var(--ac-text-2);
  margin: 24px 0 0;
  padding-top: 24px;
  border-top: 1px solid var(--ac-border);
}

/* ---- Panel ---------------------------------------------------------- */
.ac-how__panel {
  position: relative;
  border: 1px solid var(--ac-border);
  border-radius: var(--ac-radius-xl);
  padding: 24px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(var(--ac-text-rgb),.03), rgba(var(--ac-text-rgb),.01));
}
.ac-how__glow {
  position: absolute; inset: 0; border-radius: var(--ac-radius-xl); z-index: 0;
  background:
    radial-gradient(120% 90% at 20% 20%, rgba(198,7,48,.16), transparent 55%),
    radial-gradient(120% 90% at 90% 80%, rgba(138,29,152,.16), transparent 55%);
}
.ac-how__screen {
  position: relative; z-index: 1;
  background: rgba(var(--ac-line-rgb),.10);
  border-radius: 26px;
  padding: 22px 20px;
}

/* ---- Steps ---------------------------------------------------------- */
.ac-how__rows { list-style: none; margin: 0 0 14px; padding: 0; }
.ac-how__row {
  display: flex; align-items: center; gap: 14px;
  min-height: 60px;
  padding: 0 16px;
  margin-bottom: 12px;
  background: rgba(var(--ac-line-rgb),.13);
  border: .5px solid var(--ac-border);
  border-radius: 14px;
  transition: transform .35s var(--ac-ease), border-color .35s var(--ac-ease), background .35s var(--ac-ease);
}
.ac-how__row:hover {
  transform: translateX(4px);
  border-color: rgba(198,7,48,.32);
  background: rgba(var(--ac-line-rgb),.18);
}
/* The numeral rides in a gradient chip — the sequence is real, and this is
   the one repeated element that carries brand colour. */
.ac-how__n {
  flex: 0 0 auto;
  width: 30px; height: 30px; border-radius: 10px;
  display: grid; place-items: center;
  font-family: var(--ac-font-display);
  font-weight: 700; font-size: 14px; line-height: 1;
  font-variant-numeric: tabular-nums;
  color: #fff;
  background: var(--ac-grad-btn);
  box-shadow: 0 8px 18px -6px rgba(181,13,77,.55);
}
.ac-how__what {
  font-family: var(--ac-font-display);
  font-weight: 500;
  font-size: clamp(15px, 1.3vw, 17px);
  line-height: 1.4;
  color: var(--ac-text);
  letter-spacing: -.01em;
}
.ac-how__chev { margin-left: auto; opacity: .45; display: grid; place-items: center; color: var(--ac-text); }
.ac-how__chev svg { width: 17px; height: 17px; }
.ac-how__row:hover .ac-how__chev { opacity: .85; }

/* ---- Result --------------------------------------------------------- */
.ac-how__result {
  padding: 18px 18px 20px;
  border-radius: 16px;
  background: rgba(var(--ac-line-rgb),.12);
  border: .5px solid rgba(198,7,48,.28);
}
.ac-how__result-label {
  display: block;
  font-family: var(--ac-font-display);
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 8px;
  color: var(--ac-text);
}
.ac-how__result-text {
  margin: 0;
  font-family: var(--ac-font-body);
  font-size: 15px;
  line-height: 1.66;
  color: var(--ac-text-2);
}

@media (max-width: 900px) {
  .ac-how__grid { grid-template-columns: 1fr; gap: 34px; }
  .ac-how__lead, .ac-how__why { max-width: none; }
  .ac-how__panel { padding: 16px; }
  .ac-how__screen { padding: 18px 14px; border-radius: 22px; }
  .ac-how__row { min-height: 56px; padding: 0 13px; gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .ac-how__row { transition: none; }
  .ac-how__row:hover { transform: none; }
}

/* ---- How it works: light mode ----------------------------------------
   The base rules are written as rgba(var(--ac-line-rgb), X), which flips
   from white-on-dark to black-on-white. Layered three deep that produced a
   stack of greys on the light page — panel #f8f8f8, screen #e0e0e0, rows
   #c4c4c4 — instead of the white card the calculator above it uses. These
   mirror the treatment .ac-xcard already has, so the two panels match. */
html[data-theme="light"] .ac-how__panel {
  background: #ffffff;
  border: 1px solid var(--ac-border-strong);
  box-shadow: 0 24px 50px -30px rgba(84,19,96,.2);
}
/* The glow is tuned for a dark panel; at full strength on white it reads as
   a pink wash rather than a light source. */
html[data-theme="light"] .ac-how__glow {
  background:
    radial-gradient(120% 90% at 20% 20%, rgba(198,7,48,.07), transparent 55%),
    radial-gradient(120% 90% at 90% 80%, rgba(138,29,152,.07), transparent 55%);
}
html[data-theme="light"] .ac-how__screen {
  background: rgba(84,19,96,.04);
}
/* Rows read as fields, so on a light panel they are white with a defined
   edge — a grey fill would look disabled. */
html[data-theme="light"] .ac-how__row {
  background: #ffffff;
  border: 1px solid rgba(10,9,12,.10);
  box-shadow: 0 2px 6px -3px rgba(84,19,96,.18);
}
html[data-theme="light"] .ac-how__row:hover {
  background: #ffffff;
  border-color: rgba(198,7,48,.38);
  box-shadow: 0 6px 16px -8px rgba(198,7,48,.3);
}
html[data-theme="light"] .ac-how__result {
  background: #ffffff;
  border: 1px solid rgba(198,7,48,.26);
  box-shadow: 0 2px 8px -4px rgba(84,19,96,.16);
}

/* ============================================================
   REFER & WIN — how it works

   A referral is a chain: you introduce a company, they trade, you
   keep earning. Two steps are set as a linked pair rather than a
   card grid, and the line that carries the whole idea is already
   written as an equation, so it is set as one. That line is the
   only place brand colour appears at scale.
   ============================================================ */
.ac-rw { position: relative; }
/* One sentence under a centred heading: centred, not justified. Justifying a
   single short line just stretches it. */
.ac-rw__lead {
  font-family: var(--ac-font-body);
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.7;
  color: var(--ac-text-2);
  margin: 0 auto;
  max-width: 56ch;
  text-align: center;
  text-wrap: pretty;
}

/* ---- The two steps ---------------------------------------------------- */
.ac-rw__chain {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  position: relative;
}
.ac-rw__step {
  position: relative;
  display: flex; align-items: flex-start; gap: 20px;
  padding: 30px 30px 32px;
  border-radius: 22px;
  background: linear-gradient(165deg, rgba(var(--ac-line-rgb),.08), rgba(var(--ac-line-rgb),.025));
  border: 1px solid rgba(var(--ac-line-rgb),.12);
}
/* The link between the two steps — the thing that makes them a chain rather
   than a pair of boxes. Only drawn where they sit side by side. */
@media (min-width: 901px) {
  .ac-rw__step:first-child::after {
    content: "";
    position: absolute;
    top: 50%; left: 100%;
    width: 22px; height: 2px;
    transform: translateY(-50%);
    background: linear-gradient(90deg, rgba(221,81,28,.7), rgba(181,13,77,.35));
  }
}
.ac-rw__step-n {
  flex: 0 0 auto;
  width: 46px; height: 46px; border-radius: 14px;
  display: grid; place-items: center;
  font-family: var(--ac-font-display);
  font-weight: 700; font-size: 19px; line-height: 1;
  font-variant-numeric: tabular-nums;
  color: #fff;
  background: var(--ac-grad-btn);
  box-shadow: 0 14px 28px -10px rgba(181,13,77,.55);
}
.ac-rw__step-body { display: block; }
.ac-rw__step-label {
  display: block;
  font-family: var(--ac-font-body);
  font-size: 13px; font-weight: 600;
  /* --ac-text-3 measures 3.5:1 on the light card, under the 4.5:1 small text
     needs. --ac-text-2 keeps it secondary without going faint. */
  color: var(--ac-text-2);
  margin-bottom: 7px;
}
.ac-rw__step-text {
  display: block;
  font-family: var(--ac-font-display);
  font-weight: 500;
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.5;
  color: var(--ac-text);
  letter-spacing: -.01em;
}

/* ---- The worked example ----------------------------------------------- */
/* Hangs off the left edge on its asterisk, the way a footnote does, rather
   than sitting in a box of its own. */
.ac-rw__example {
  margin: 30px auto 0;
  padding-left: 22px;
  border-left: 2px solid rgba(221,81,28,.45);
  font-family: var(--ac-font-body);
  font-size: clamp(15px, 1.3vw, 17px);
  line-height: 1.65;
  color: var(--ac-text-2);
  /* Same axis as the justified columns below, so the section has one spine. */
  max-width: 64ch;
  box-sizing: content-box;
  text-wrap: pretty;
}

/* ---- Why it works ----------------------------------------------------- */
/* Both trailing blocks are centred columns, matching how the rest of the
   site presents a section of prose. */
.ac-rw__why { margin-top: clamp(56px, 6vw, 80px); }
.ac-rw__who { margin-top: clamp(44px, 4.5vw, 62px); }
.ac-rw__why,
.ac-rw__who { max-width: 760px; margin-left: auto; margin-right: auto; }
/* The heads inside this section carry less air than a top-level one, so the
   blocks read as parts of one argument rather than separate sections. */
.ac-rw__why .ac-section__head,
.ac-rw__who .ac-section__head { margin-bottom: 26px; }
/* Justified, using the same recipe as the rest of the site: hyphenation ON,
   because without it a line holding one long word can only be justified by
   stretching the gaps, which is exactly the rivers to avoid. The measure is
   held at 64 characters, inside the 60-75 band justification needs. */
.ac-rw__text,
.ac-rw__point {
  font-family: var(--ac-font-body);
  font-size: var(--ac-fs-lead);
  line-height: 1.75;
  color: var(--ac-text-2);
  max-width: 64ch;
  margin-left: auto; margin-right: auto;
  text-align: justify;
  text-justify: inter-word;
  -webkit-hyphens: auto;
  hyphens: auto;
  -webkit-hyphenate-limit-before: 3;
  -webkit-hyphenate-limit-after: 3;
  hyphenate-limit-chars: 6 3 3;
  /* The closing line of a justified block is never stretched. */
  text-align-last: left;
  overflow-wrap: break-word;
  text-wrap: pretty;
}
.ac-rw__text { margin-top: 0; margin-bottom: 0; }
.ac-rw__point { margin-top: 20px; margin-bottom: 0; }
.ac-rw__point-label { color: var(--ac-text); font-weight: 700; }

/* The signature line. Large, set on its own, and the one moment of scale in
   the section — it is the argument the whole page makes. */
/* The equation completes the sentence above it, so it stays in the flow —
   but it is banded between two rules so it reads as the statement it is
   rather than a loose line of large type in the middle of a paragraph. */
.ac-rw__eq {
  margin: 30px 0 0;
  padding: 30px 0 32px;
  border-top: 1px solid var(--ac-border);
  border-bottom: 1px solid var(--ac-border);
  text-align: center;
  font-family: var(--ac-font-display);
  font-weight: 700;
  font-size: clamp(23px, 3.2vw, 42px);
  line-height: 1.18;
  letter-spacing: -.025em;
  text-wrap: balance;
}

@media (max-width: 900px) {
  .ac-rw__text,
  .ac-rw__point {
    text-align: left;
    text-align-last: auto;
    hyphens: none; -webkit-hyphens: none;
  }
  .ac-rw__eq { padding: 24px 0 26px; }
  .ac-rw__chain { grid-template-columns: 1fr; gap: 16px; }
  .ac-rw__step { padding: 24px 22px 26px; gap: 16px; }
  .ac-rw__step-n { width: 40px; height: 40px; font-size: 17px; border-radius: 12px; }
  .ac-rw__example { margin-top: 22px; padding-left: 18px; }
  .ac-rw__text, .ac-rw__point, .ac-rw__lead { max-width: none; }
}

/* ---- Light mode -------------------------------------------------------
   The step panels are written as rgba(var(--ac-line-rgb), X), which flips to
   black-on-white and would render as grey blocks. White cards with a defined
   edge instead, matching the other panels on the site. */
html[data-theme="light"] .ac-rw__step {
  background: #ffffff;
  border: 1px solid var(--ac-border-strong);
  box-shadow: 0 20px 44px -28px rgba(84,19,96,.2);
}

/* ============================================================
   SELL & WIN — how it works

   The copy is about progress toward milestones and names its own
   metaphor: a loyalty card you keep stamping. So each step is a
   card with its number punched into the top edge, and the rail
   runs between them — the steps are stamps on a run, not four
   tiles floating in space.
   ============================================================ */
.ac-sw { position: relative; }
/* Headings use the site's .ac-section__head / .ac-section__title, so these
   sections sit with the rest of the page rather than reading as bolt-ons. */

/* ---- The track -------------------------------------------------------- */
.ac-sw__track {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(var(--ac-sw-count, 4), 1fr);
  gap: 20px;
  /* Stretch, so every card ends on the same line however long its text is —
     the ragged bottoms were most of what made this look unfinished. */
  align-items: stretch;
  position: relative;
}

.ac-sw__stop {
  position: relative;
  display: flex; flex-direction: column;
  padding: 46px 26px 30px;
  border-radius: 20px;
  background: linear-gradient(168deg, rgba(var(--ac-line-rgb),.075), rgba(var(--ac-line-rgb),.02));
  border: 1px solid rgba(var(--ac-line-rgb),.11);
}

/* The rail crosses the gap between one card and the next, at the height of
   the numbers that sit on their edges. */
.ac-sw__stop:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 0; left: 100%;
  width: 20px; height: 2px;
  background: linear-gradient(90deg, rgba(221,81,28,.7), rgba(181,13,77,.3));
  z-index: 1;
}

/* The number is punched into the card's top edge rather than sitting inside
   it — that is the stamp. */
.ac-sw__node {
  position: absolute;
  top: 0; left: 26px;
  transform: translateY(-50%);
  z-index: 2;
}
.ac-sw__n {
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--ac-font-display);
  font-weight: 700; font-size: 17px; line-height: 1;
  font-variant-numeric: tabular-nums;
  color: #fff;
  background: var(--ac-grad-btn);
  box-shadow: 0 12px 26px -10px rgba(181,13,77,.6);
  /* Ring in the page colour so the card edge and the rail both stop cleanly
     at the number. */
  outline: 6px solid var(--ac-bg);
}

.ac-sw__body { display: block; }
.ac-sw__step-title {
  display: block;
  font-family: var(--ac-font-display);
  font-weight: 600;
  font-size: clamp(16px, 1.35vw, 18px);
  line-height: 1.38;
  letter-spacing: -.012em;
  color: var(--ac-text);
  margin-bottom: 10px;
  text-wrap: balance;
}
.ac-sw__step-text {
  display: block;
  font-family: var(--ac-font-body);
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ac-text-2);
  text-wrap: pretty;
}

/* ---- Why ------------------------------------------------------------- */
.ac-sw__why { margin-top: clamp(72px, 8vw, 112px); }
/* Claim on the left, explanation on the right, separated by rules. A second
   card grid stacked under the first is what makes a page look templated. */
/* Constrained and centred so the list sits under the centred heading rather
   than running the full container width. */
.ac-sw__reasons { margin: 0 auto; padding: 0; max-width: 1000px; }
.ac-sw__reason {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr);
  gap: clamp(24px, 4vw, 60px);
  padding: 30px 0;
  border-top: 1px solid var(--ac-border);
}
.ac-sw__claim {
  margin: 0;
  font-family: var(--ac-font-display);
  font-weight: 600;
  font-size: clamp(18px, 1.7vw, 23px);
  line-height: 1.35;
  letter-spacing: -.015em;
  color: var(--ac-text);
  text-wrap: balance;
}
.ac-sw__detail {
  margin: 0;
  font-family: var(--ac-font-body);
  font-size: var(--ac-fs-lead);
  line-height: 1.75;
  color: var(--ac-text-2);
  text-wrap: pretty;
}

/* Two-up before stacking, so four narrow columns don't turn into slivers. */
@media (max-width: 1100px) {
  .ac-sw__track { grid-template-columns: 1fr 1fr; gap: 20px 20px; row-gap: 46px; }
  /* The rail only makes sense along a row; it is dropped once the run wraps. */
  .ac-sw__stop:not(:last-child)::before { display: none; }
}
/* The claim/detail split needs real width for both halves; below this the
   claim column was down to ~250px and every heading wrapped to three lines. */
@media (max-width: 860px) {
  .ac-sw__reason { grid-template-columns: 1fr; gap: 12px; padding: 26px 0; }
}
@media (max-width: 620px) {
  .ac-sw__track { grid-template-columns: 1fr; row-gap: 42px; }
  .ac-sw__stop { padding: 42px 22px 26px; }
}

/* ---- Light mode ------------------------------------------------------
   The card is written as rgba(var(--ac-line-rgb), X), which flips to
   black-on-white and would render as a grey block. White card with a
   defined edge instead, matching the other panels on the site. */
html[data-theme="light"] .ac-sw__stop {
  background: #ffffff;
  border: 1px solid var(--ac-border-strong);
  box-shadow: 0 20px 44px -30px rgba(84,19,96,.22);
}
html[data-theme="light"] .ac-sw__n {
  box-shadow: 0 12px 26px -12px rgba(181,13,77,.45);
}

/* ============================================================
   JUSTIFIED BODY COPY — one system, every page

   Justification only works when two conditions hold, so both are
   enforced here rather than left to each block:

   1. MEASURE. Slack has to be shared across enough gaps to stay
      invisible. The caps below are in `ch`, so they follow the
      font size and a block can never drift out of the 60-75
      character band good typography asks for. Several blocks were
      running 96-140 characters a line, which is past readable
      before justification is even considered.

   2. HYPHENATION. Without it, a line holding one long word can
      only be justified by stretching the spaces — the rivers of
      white space this is meant to prevent. hyphenate-limit-chars
      stops the ugly breaks hyphenation is otherwise known for:
      nothing under 6 letters is broken, and never fewer than 3
      letters either side.

   Blocks whose measure is too short to justify well are listed
   further down and stay left-aligned instead.
   ============================================================ */
.ac-page__body p,
.ac-doc__body p,
.ac-faq__a,
.ac-vac-content p,
.ac-vac-hero__summary,
.ac-poc-desc__text,
.ac-express-head__sub,
.ac-sw__detail {
  text-align: justify;
  text-justify: inter-word;
  -webkit-hyphens: auto;
  hyphens: auto;
  -webkit-hyphenate-limit-before: 3;
  -webkit-hyphenate-limit-after: 3;
  hyphenate-limit-chars: 6 3 3;
  /* The closing line of a justified block is never stretched. */
  text-align-last: left;
  /* A long unbroken string (a URL) wraps instead of blowing the measure. */
  overflow-wrap: break-word;
  text-wrap: pretty;
}

/* Measure caps. In ch so they track the font size. */
.ac-page__body   { max-width: 68ch; }
.ac-doc__body,
.ac-vac-content,
.ac-poc-desc__text { max-width: 68ch; }
.ac-faq__a       { max-width: 74ch; }   /* has 24px of its own side padding */

/* Below this width the column is only 45-55 characters, and no amount of
   tuning makes justification look even at that measure. */
@media (max-width: 900px) {
  .ac-page__body p,
  .ac-doc__body p,
  .ac-faq__a,
  .ac-vac-content p,
  .ac-vac-hero__summary,
  .ac-poc-desc__text,
  .ac-express-head__sub,
  .ac-sw__detail {
    text-align: left;
    text-align-last: auto;
    hyphens: none; -webkit-hyphens: none;
  }
  .ac-page__body,
  .ac-doc__body,
  .ac-vac-content,
  .ac-poc-desc__text,
  .ac-faq__a { max-width: none; }
}

/* ============================================================
   FOOTER HOTLINE

   Just the handset and the number. No chip, no circle, no
   underline: the other footer columns are a heading and text, so
   anything with a container reads as a widget dropped into the
   layout. The one spot of colour is the handset itself, which
   rings on a slow loop — idle most of the time, so it draws the
   eye without nagging.
   ============================================================ */
.ac-hotline { display: inline-block; text-decoration: none; }

.ac-hotline__label {
  display: block;
  font-family: var(--ac-font-display);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.4;
  color: var(--ac-text);
  margin-bottom: 10px;
}

.ac-hotline__row {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  /* The numeral carries its own left side bearing, so a 12px gap measured
     about 20px on screen and the two pieces read as separate things. */
  gap: 9px;
  max-width: 100%;
}

.ac-hotline__ic {
  flex: 0 0 auto;
  /* Sized against the numeral's cap height rather than picked by eye, so the
     two read as one object instead of a small mark beside a big one. */
  width: clamp(25px, 2.4vw, 30px);
  height: clamp(25px, 2.4vw, 30px);
  stroke-width: 1.7;
  color: #dc481b;
  /* Pivot near the earpiece, so the handset rocks the way a ringing phone
     does rather than spinning about its middle. */
  transform-origin: 60% 40%;
  animation: acHotlineRing 5s ease-in-out infinite;
}

/* Two quick shakes, then four seconds of stillness. A constant wobble in a
   footer is noise; a ring that happens now and then is a signal. */
@keyframes acHotlineRing {
  0%, 70%, 100% { transform: rotate(0deg); }
  72%  { transform: rotate(-13deg); }
  75%  { transform: rotate(11deg); }
  78%  { transform: rotate(-8deg); }
  81%  { transform: rotate(6deg); }
  84%  { transform: rotate(-3deg); }
  87%  { transform: rotate(0deg); }
}
/* Ring on demand when someone points at it. */
.ac-hotline:hover .ac-hotline__ic { animation: acHotlineRing 1s ease-in-out; }

.ac-hotline__num {
  font-family: var(--ac-font-display);
  font-weight: 700;
  /* Capped so a longer hotline still fits the ~193px column on one line. */
  font-size: clamp(34px, 3.4vw, 44px);
  line-height: 1;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  color: var(--ac-text);
  white-space: nowrap;
  transition: opacity .3s var(--ac-ease);
}
.ac-hotline:hover .ac-hotline__num { opacity: .8; }
.ac-hotline:focus-visible { outline: 2px solid var(--ac-magenta); outline-offset: 5px; border-radius: 6px; }

.ac-hotline__note {
  display: block;
  margin-top: 13px;
  font-family: var(--ac-font-body);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ac-text-2);
}

@media (prefers-reduced-motion: reduce) {
  .ac-hotline__ic { animation: none; }
  .ac-hotline:hover .ac-hotline__ic { animation: none; }
  .ac-hotline__num { transition: none; }
}

/* Honeypot. Hidden from people without display:none, because some bots skip
   display:none fields — this is off-screen and unreachable by keyboard, but
   still a real input in the DOM for anything filling every field it finds. */
.ac-hp {
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

/* ============================================================
   TYPOGRAPHY — ONE SYSTEM FOR SUBTITLES AND BODY COPY

   Everything below is the single source of truth for how a
   paragraph is sized, coloured and aligned. It sits at the end of
   the file so it settles the conflicts that had built up: the
   twelve subtitle classes between them were using four font
   sizes, four weights, five line-heights, six max-widths and
   three colours for what is visually one thing.
   ============================================================ */

/* ---- Shared behaviour -------------------------------------------------- */
.ac-hero__subtitle,
.ac-pagehero__sub,
.ac-express-hero__sub,
.ac-ab-hero__sub,
.ac-section__sub,
.ac-section__lead,
.ac-express-head__sub,
.ac-cta__sub,
.ac-ct-sub,
.ac-poc-desc__text,
.ac-rw__lead,
.ac-how__lead,
.ac-steps__lead {
  font-family: var(--ac-font-body);
  font-weight: 400;
  line-height: 1.7;
  /* --ac-text-3 measures 3.5:1 on the light page, under the 4.5:1 that body
     text needs. --ac-text-2 is 6.9:1 light and 9.2:1 dark, and still reads as
     secondary beside a heading. */
  color: var(--ac-text-2);
  letter-spacing: 0;
  /* Subtitles are one or two sentences under a heading. Justifying a block
     that short leaves one stretched line and one ragged one, so they stay
     centred at every width. */
  text-align: center;
  text-align-last: auto;
  hyphens: none;
  -webkit-hyphens: none;
  word-break: normal;
  overflow-wrap: break-word;
  text-wrap: pretty;
  margin-left: auto;
  margin-right: auto;
}

/* Tier 1: under a hero. */
.ac-hero__subtitle,
.ac-pagehero__sub,
.ac-express-hero__sub,
.ac-ab-hero__sub {
  font-size: clamp(16px, 1.45vw, 19px);
  max-width: 46ch;
}

/* Tier 2: under a section heading. */
.ac-section__sub,
.ac-section__lead,
.ac-express-head__sub,
.ac-cta__sub,
.ac-poc-desc__text,
.ac-rw__lead,
.ac-steps__lead {
  font-size: clamp(15px, 1.25vw, 17px);
  max-width: 42ch;
}

/* These two sit in a column rather than under a centred heading, so they keep
   the same type but align left. */
.ac-ct-sub,
.ac-how__lead {
  font-size: clamp(15px, 1.25vw, 17px);
  max-width: 46ch;
  text-align: left;
  margin-left: 0;
  margin-right: 0;
}

/* ---- Justified body copy ----------------------------------------------
   Longer prose only. Justification needs enough words per line for the
   slack to disappear into the gaps, which a two-line subtitle never has.
   ------------------------------------------------------------------------ */
.ac-page__body p,
.ac-doc__body p,
.ac-doc__body li,
.ac-faq__a,
.ac-vac-content p,
.ac-vac-hero__summary,
.ac-prod__text,
.ac-benefit__text,
.ac-features__intro,
.ac-collab__desc,
.ac-ab-mission__body p,
.ac-sw__detail,
.ac-rw__text,
.ac-rw__point,
.ac-how__why {
  text-align: justify;
  text-justify: inter-word;
  /* Words are never split, per the brief. The cost is real and worth being
     clear about: with hyphenation off, justification can only absorb slack in
     the word gaps, so a narrow column will show wider spaces. The measure
     caps below are what keep that within reason. */
  hyphens: none;
  -webkit-hyphens: none;
  /* The last line is never stretched. */
  text-align-last: left;
  word-break: normal;
  overflow-wrap: break-word;
  text-wrap: pretty;
}

/* Measure caps in ch, so they track the font size rather than breaking the
   moment the type scale changes. */
.ac-page__body,
.ac-doc__body,
.ac-vac-content       { max-width: 68ch; }
.ac-faq__a            { max-width: 72ch; }
.ac-prod__text        { max-width: 52ch; }
.ac-benefit__text     { max-width: 46ch; }
.ac-collab__desc      { max-width: 52ch; }
.ac-sw__detail        { max-width: 56ch; }
.ac-rw__text,
.ac-rw__point         { max-width: 60ch; margin-left: auto; margin-right: auto; }
.ac-how__why          { max-width: 48ch; }
.ac-ab-mission__body p { max-width: 66ch; }

/* ---- Mobile -------------------------------------------------------------
   The viewport is the column here, so the ch caps stop doing anything and are
   released. Justification stays on, as asked. A 16px floor also stops iOS
   zooming the page when a field is focused.
   ------------------------------------------------------------------------ */
@media (max-width: 640px) {
  .ac-hero__subtitle,
  .ac-pagehero__sub,
  .ac-express-hero__sub,
  .ac-ab-hero__sub,
  .ac-section__sub,
  .ac-section__lead,
  .ac-express-head__sub,
  .ac-cta__sub,
  .ac-ct-sub,
  .ac-poc-desc__text,
  .ac-rw__lead,
  .ac-how__lead,
  .ac-steps__lead {
    font-size: 16px;
    line-height: 1.65;
    max-width: none;
  }

  .ac-page__body,
  .ac-doc__body,
  .ac-vac-content,
  .ac-faq__a,
  .ac-prod__text,
  .ac-benefit__text,
  .ac-collab__desc,
  .ac-sw__detail,
  .ac-rw__text,
  .ac-rw__point,
  .ac-how__why,
  .ac-ab-mission__body p { max-width: none; }

  /* Justified, per the brief, and kept as even as a narrow column allows.
     text-wrap: pretty lets the browser balance the closing lines instead of
     stranding a single word, which is where the worst gaps show. */
  .ac-page__body p,
  .ac-doc__body p,
  .ac-doc__body li,
  .ac-faq__a,
  .ac-vac-content p,
  .ac-vac-hero__summary,
  .ac-prod__text,
  .ac-benefit__text,
  .ac-features__intro,
  .ac-collab__desc,
  .ac-ab-mission__body p,
  .ac-sw__detail,
  .ac-rw__text,
  .ac-rw__point,
  .ac-how__why {
    text-align: justify;
    text-align-last: left;
    line-height: 1.75;
    text-wrap: pretty;
  }

  /* A long unbroken string (a URL, an email address) would otherwise force a
     line far wider than the others and blow the justification apart. */
  .ac-doc__body a,
  .ac-page__body a { overflow-wrap: anywhere; }
}

/* ============================================================
   ABOUT

   The page makes a claim, backs it with figures, hands over to the
   mark, then sets out the principles. Chrome is used where it
   carries information and dropped where it would only decorate:
   the figures are cards because they are discrete quantities, the
   values are a list because they are not.
   ============================================================ */
.ac-abx { position: relative; }
.ac-abx__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
.ac-abx__statement {
  margin: 0;
  font-family: var(--ac-font-display);
  font-weight: 600;
  font-size: clamp(26px, 3.4vw, 44px);
  line-height: 1.16;
  letter-spacing: -.022em;
  color: var(--ac-text);
  text-wrap: balance;
}
.ac-abx__body { display: grid; gap: 20px; }
.ac-abx__para {
  margin: 0;
  font-family: var(--ac-font-body);
  font-size: var(--ac-fs-lead);
  line-height: 1.8;
  color: var(--ac-text-2);
  max-width: 56ch;
}

/* Emphasis written as *asterisks* in the source copy. */
.ac-hl { font-weight: 700; color: var(--ac-text); }
.ac-abx__statement .ac-hl {
  background: var(--ac-grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ---- Figures -----------------------------------------------------------
   Four identical tiles would say the four numbers matter equally. The years
   of experience is the claim the copy opens with, so its card takes the
   width of two and the others sit beside it.
   ------------------------------------------------------------------------ */
.ac-abx__stats {
  list-style: none;
  margin: clamp(48px, 6vw, 76px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}
.ac-abx__stat {
  grid-column: span 2;
  position: relative;
  padding: 30px 26px 28px;
  border-radius: 18px;
  background: rgba(var(--ac-line-rgb),.045);
  border: 1px solid rgba(var(--ac-line-rgb),.10);
}



/* A rule that draws itself across the top of the card as it arrives. One
   accent per card, and it is a line rather than a coloured cloud. */
.ac-abx__stat-rule {
  position: absolute; left: 0; right: 0; top: 0; height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--ac-grad-brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .75s var(--ac-ease);
}
.ac-abx__stat.is-visible .ac-abx__stat-rule { transform: scaleX(1); }

.ac-abx__stat-num {
  display: block;
  font-family: var(--ac-font-display);
  font-weight: 700;
  font-size: clamp(32px, 3.4vw, 44px);
  line-height: 1;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  color: var(--ac-text);
}
.ac-abx__stat--lead .ac-abx__stat-num {
  font-size: clamp(40px, 4.6vw, 62px);
  background: var(--ac-grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.ac-abx__stat-label {
  display: block;
  margin-top: 12px;
  font-family: var(--ac-font-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ac-text-2);
}

/* ============================================================
   THE HANDOVER
   ============================================================ */
.ac-gap { overflow: hidden; }
.ac-gap__stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(220px, 30vh, 320px);
  text-align: center;
}
.ac-gap__line,
.ac-gap__mark { grid-area: 1 / 1; }
.ac-gap__line {
  margin: 0;
  font-family: var(--ac-font-display);
  font-weight: 600;
  font-size: clamp(24px, 3.6vw, 46px);
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--ac-text);
  text-wrap: balance;
  opacity: 0; transform: translateY(14px);
  transition: opacity .6s var(--ac-ease), transform .6s var(--ac-ease);
}
.ac-gap__mark { width: min(70vw, 300px); }
.ac-gap__video {
  display: block; width: 100%; height: auto; background: transparent;
  /* The reveal lives here rather than on the wrapper: an ancestor with opacity
     isolates blending, but the blended element's own opacity does not. */
  opacity: 0;
  transform: scale(.94);
  transition: opacity .7s var(--ac-ease), transform .7s var(--ac-ease);
}
/* The light clip has a solid white background baked into the file, and MP4
   cannot carry alpha, so it cannot simply be made transparent. Multiplying it
   against the page drops pure white to nothing while leaving the black
   wordmark and the colour gradient untouched, which is the same result.
   Verified against the file: its corners are exactly 255,255,255.
   The dark clip needs no equivalent — its background is 9,8,11, which is the
   dark page colour, so it already blends. */
html[data-theme="light"] .ac-gap__video { mix-blend-mode: multiply; }
/* The wrapper must not paint anything either, or the blend has a white box to
   multiply against instead of the page. */
html[data-theme="light"] .ac-gap__mark,
html[data-theme="light"] .ac-gap__stage { background: transparent; }
.ac-gap.is-asking .ac-gap__line { opacity: 1; transform: none; }
.ac-gap.is-answered .ac-gap__line { opacity: 0; transform: translateY(-14px); }
.ac-gap.is-answered .ac-gap__video { opacity: 1; transform: none; }

/* ============================================================
   MISSION, VISION, VALUES
   ============================================================ */
.ac-mv__pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.ac-mv__card {
  padding: 34px 32px 36px;
  border-radius: 22px;
  background: rgba(var(--ac-line-rgb),.05);
  border: 1px solid rgba(var(--ac-line-rgb),.11);
}
.ac-mv__label {
  margin: 0 0 14px;
  font-family: var(--ac-font-display);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -.01em;
  color: var(--ac-text-2);
}
.ac-mv__text {
  margin: 0;
  font-family: var(--ac-font-body);
  font-size: var(--ac-fs-lead);
  line-height: 1.75;
  color: var(--ac-text-2);
}
.ac-mv__card--vision .ac-mv__text {
  font-family: var(--ac-font-display);
  font-weight: 500;
  font-size: clamp(19px, 1.9vw, 25px);
  line-height: 1.45;
  color: var(--ac-text);
  letter-spacing: -.012em;
}

.ac-mv__values { margin-top: clamp(56px, 6vw, 88px); }
.ac-mv__values-head { max-width: 46ch; margin: 0 auto 10px; text-align: center; }
.ac-mv__values-title {
  margin: 0 0 8px;
  font-family: var(--ac-font-display);
  font-weight: 600;
  font-size: clamp(22px, 2.2vw, 30px);
  letter-spacing: -.018em;
  color: var(--ac-text);
}
.ac-mv__values-sub {
  margin: 0;
  font-family: var(--ac-font-body);
  font-size: clamp(15px, 1.25vw, 17px);
  color: var(--ac-text-2);
}

/* ---- The values ---------------------------------------------------------
   A list, not a grid of cards: these are five principles, not five products,
   and they are not a sequence, so there is nothing to number. Hairlines carry
   the separation that a card border would otherwise duplicate.
   ------------------------------------------------------------------------ */
.ac-mv__list {
  list-style: none;
  margin: 34px auto 0;
  padding: 0;
  max-width: 860px;
}
/* (superseded by the bento rules further down) */
/* (removed: the values are tiles now, not a hairline-separated list) */

.ac-mv__ic {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: 14px;
  color: var(--ac-text);
  border: 1px solid var(--ac-border);
  transition: color .35s var(--ac-ease), border-color .35s var(--ac-ease);
}
/* The icons draw themselves rather than fading in. pathLength="1" on every
   path normalises the geometry, so one dash rule covers all five icons
   regardless of how long their real paths are. */
.ac-mv__ic svg path,
.ac-mv__ic svg circle {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.ac-mv__value.is-visible .ac-mv__ic svg path,
.ac-mv__value.is-visible .ac-mv__ic svg circle {
  animation: acDraw 1.1s var(--ac-ease) forwards;
}
/* Each stroke starts a little after the one before, so a two-part icon reads
   as being drawn rather than appearing at once. */
.ac-mv__ic svg > *:nth-child(2) { animation-delay: .18s; }
.ac-mv__ic svg > *:nth-child(3) { animation-delay: .32s; }
.ac-mv__ic svg > *:nth-child(4) { animation-delay: .46s; }

@keyframes acDraw { to { stroke-dashoffset: 0; } }

/* Hovering redraws it. Motion that answers what someone did. */
.ac-mv__value:hover .ac-mv__ic { color: #dc481b; border-color: rgba(220,72,27,.4); }
.ac-mv__value:hover .ac-mv__ic svg path,
.ac-mv__value:hover .ac-mv__ic svg circle {
  animation: acDraw .7s var(--ac-ease) forwards;
}

.ac-mv__value-text {
  margin: 0;
  font-family: var(--ac-font-body);
  font-size: clamp(15px, 1.3vw, 17px);
  line-height: 1.75;
  color: var(--ac-text-2);
  max-width: 62ch;
}

/* ---- Light mode -------------------------------------------------------- */
html[data-theme="light"] .ac-abx__stat,
html[data-theme="light"] .ac-mv__card,
html[data-theme="light"] .ac-mv__value {
  background: #ffffff;
  box-shadow: 0 20px 44px -30px rgba(84,19,96,.18);
}
html[data-theme="light"] .ac-abx__stat--lead { background: #ffffff; }
/* The resting ring needs more contrast on white than the white-tinted one the
   dark theme uses. */
html[data-theme="light"] .ac-abx__stat::before,
html[data-theme="light"] .ac-mv__card::before,
html[data-theme="light"] .ac-mv__value::before {
  background: linear-gradient(160deg, rgba(10,9,12,.16), rgba(10,9,12,.07) 40%, rgba(10,9,12,.05));
}
html[data-theme="light"] .ac-mv__spot {
  background: radial-gradient(240px circle at var(--mx) var(--my), rgba(198,7,48,.10), transparent 70%);
}
html[data-theme="light"] .ac-mv__ic { background: rgba(10,9,12,.05); }

/* ---- Responsive -------------------------------------------------------- */
@media (max-width: 1000px) {
  .ac-abx__grid { grid-template-columns: 1fr; gap: 28px; }
  .ac-abx__para { max-width: none; }
  .ac-abx__stats { grid-template-columns: 1fr 1fr; }
  .ac-abx__stat,
  .ac-abx__stat--lead,
  .ac-abx__stat--lead + .ac-abx__stat { grid-column: auto; }
  /* (the mission/vision pair stacks itself via auto-fit further down) */
}
@media (max-width: 560px) {
  .ac-abx__stats { gap: 12px; }
  .ac-abx__stat { padding: 22px 18px 20px; border-radius: 15px; }
  .ac-abx__stat-label { font-size: 13px; margin-top: 9px; }
  .ac-mv__card { padding: 26px 22px 28px; border-radius: 18px; }
  .ac-mv__value { grid-template-columns: 40px 1fr; gap: 15px; padding: 22px 2px; }
  .ac-mv__ic { width: 38px; height: 38px; border-radius: 12px; }
  .ac-mv__ic svg { width: 24px; height: 24px; }
  .ac-gap__stage { min-height: 190px; }
}
@media (prefers-reduced-motion: reduce) {
  .ac-abx__stat-rule { transition: none; transform: scaleX(1); }
  .ac-mv__ic, .ac-mv__ic svg path, .ac-mv__ic svg circle { transition: none; animation: none; stroke-dashoffset: 0; }
  .ac-gap__line, .ac-gap__mark { transition: none; }
}

/* ============================================================
   SCROLL BRUSH (About)
   Two wide, heavily blurred washes fixed behind the page. They
   move only with scroll, driven by a CSS variable the script
   updates, so nothing animates while the page is still.
   ============================================================ */
.ac-brush {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  /* Set by JS: 0 at the top of the page, 1 at the bottom. */
  --ac-p: 0;
}
.ac-brush span {
  position: absolute;
  display: block;
  border-radius: 50%;
  filter: blur(120px);
  /* transform and opacity only, so this stays on the compositor and never
     triggers layout or paint while scrolling. */
  will-change: transform;
}
.ac-brush__a {
  width: 46vw; height: 46vw;
  min-width: 320px; min-height: 320px;
  left: -8vw; top: 4vh;
  background: radial-gradient(circle, rgba(198,7,48,.30), transparent 68%);
  transform: translate3d(calc(var(--ac-p) * 26vw), calc(var(--ac-p) * 42vh), 0);
}
.ac-brush__b {
  width: 40vw; height: 40vw;
  min-width: 280px; min-height: 280px;
  right: -10vw; top: 46vh;
  background: radial-gradient(circle, rgba(138,29,152,.28), transparent 68%);
  /* Opposite direction and a shorter throw, so the two never travel as a pair. */
  transform: translate3d(calc(var(--ac-p) * -18vw), calc(var(--ac-p) * -34vh), 0);
}
/* The page content sits above it. */
/* z-index here would create a stacking context, and an element with
   mix-blend-mode cannot blend past one. .ac-gap is positioned but given no
   z-index, so the logo can still blend with the page; it paints above the
   fixed brush anyway by coming later in the document. */
.ac-abx, .ac-mv, .ac-ab-hero { position: relative; z-index: 1; }
.ac-gap { position: relative; }

html[data-theme="light"] .ac-brush__a { background: radial-gradient(circle, rgba(198,7,48,.13), transparent 68%); }
html[data-theme="light"] .ac-brush__b { background: radial-gradient(circle, rgba(138,29,152,.12), transparent 68%); }

/* A 120px blur across half the viewport is expensive on a phone GPU, and the
   effect is barely visible at that size, so it is dropped rather than made
   smaller. */
@media (max-width: 780px) { .ac-brush { display: none; } }
@media (prefers-reduced-motion: reduce) { .ac-brush span { transform: none; } }

/* ============================================================
   ABOUT — scroll-linked statement and ring
   ============================================================ */
/* The claim sits over the ring, so the section needs a stacking context. */
.ac-abx .ac-content { position: relative; z-index: 1; }

/* The 360 ring. The copy is about a 360 ecosystem and the brand is a circle,
   so this is the section's decoration rather than another blurred blob. */
.ac-abx__ring {
  position: absolute;
  z-index: 0;
  top: 50%;
  right: clamp(-160px, -6vw, -40px);
  transform: translateY(-50%);
  width: clamp(320px, 34vw, 480px);
  height: auto;
  pointer-events: none;
  color: rgba(var(--ac-line-rgb), .10);
  /* Set by the script: 0 before the section, 1 once it has been read. */
  --ac-ring: 0;
  opacity: calc(.35 + var(--ac-ring) * .65);
  transition: opacity .3s linear;
}
/* The arc travels round as the section is read. rotate only, so it stays on
   the compositor. */
.ac-abx__ring-arc {
  transform-origin: 200px 200px;
  transform: rotate(calc(-90deg + var(--ac-ring) * 300deg));
  stroke-dashoffset: calc(0.34 - var(--ac-ring) * 0.34);
}
.ac-abx__ring.is-on .ac-abx__ring-arc { transform: rotate(210deg); stroke-dashoffset: 0; }

/* ---- Word-by-word reveal ------------------------------------------------
   The statement lights up as the section rises through the viewport. Without
   JS, or with reduced motion, .ac-words-ready is never added and the text is
   simply visible.
   ------------------------------------------------------------------------ */
.ac-abx__statement.ac-words-ready .ac-word {
  opacity: .18;
  transition: opacity .45s var(--ac-ease), color .45s var(--ac-ease);
}
.ac-abx__statement.ac-words-ready .ac-word.is-lit { opacity: 1; }
/* A highlighted word stays dim until lit, then takes the gradient, so the
   emphasis arrives with the word rather than being visible from the start. */
.ac-abx__statement.ac-words-ready .ac-hl .ac-word { opacity: .18; }
.ac-abx__statement.ac-words-ready .ac-hl .ac-word.is-lit { opacity: 1; }

@media (max-width: 1000px) {
  .ac-abx__ring { right: -30%; width: 70vw; opacity: calc(.22 + var(--ac-ring) * .4); }
}
@media (max-width: 640px) {
  .ac-abx__ring { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ac-abx__statement.ac-words-ready .ac-word { opacity: 1; transition: none; }
  .ac-abx__ring-arc { transition: none; }
}

/* ============================================================
   ABOUT — figures, mission/vision and values, rebuilt

   Three changes over the previous pass: the tiles are no longer
   all the same size, the border carries the accent instead of a
   fill, and each tile responds to where the pointer is. The
   border is drawn with a masked gradient rather than a coloured
   outline, so it can hold the brand gradient at 1px.
   ============================================================ */

/* ---- Shared: gradient border + pointer spotlight ----------------------- */
.ac-abx__stat,
.ac-mv__card,
.ac-mv__value {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 0;                 /* the ring below replaces it */
  background: rgba(var(--ac-line-rgb), .045);
  --mx: 50%;
  --my: 0%;
  transition: background .4s var(--ac-ease), transform .4s var(--ac-ease);
}

/* A 1px ring painted with the brand gradient. Two backgrounds clipped
   against each other leave only the border area visible, which is how a
   gradient can sit in a border at all. */
.ac-abx__stat::before,
.ac-mv__card::before,
.ac-mv__value::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(160deg,
    rgba(var(--ac-line-rgb), .16),
    rgba(var(--ac-line-rgb), .06) 40%,
    rgba(var(--ac-line-rgb), .04));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  pointer-events: none;
  transition: background .45s var(--ac-ease);
  z-index: 0;
}
.ac-abx__stat:hover::before,
.ac-abx__stat:focus-visible::before,
.ac-mv__card:hover::before,
.ac-mv__card:focus-visible::before,
.ac-mv__value:hover::before,
.ac-mv__value:focus-visible::before {
  background: linear-gradient(160deg, #de6e20, #c60730 45%, #8a1d98);
}

/* The spotlight itself: a soft light under the content, centred on the
   pointer. */
.ac-mv__spot {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(240px circle at var(--mx) var(--my),
    rgba(198, 7, 48, .22), transparent 70%);
  transition: opacity .35s var(--ac-ease);
}
.ac-abx__stat:hover .ac-mv__spot,
.ac-abx__stat:focus-visible .ac-mv__spot,
.ac-mv__card:hover .ac-mv__spot,
.ac-mv__card:focus-visible .ac-mv__spot,
.ac-mv__value:hover .ac-mv__spot,
.ac-mv__value:focus-visible .ac-mv__spot { opacity: 1; }

.ac-abx__stat:focus-visible,
.ac-mv__card:focus-visible,
.ac-mv__value:focus-visible { outline: 2px solid var(--ac-magenta); outline-offset: 3px; }

/* ---- Values as a bento -------------------------------------------------
   Five equal tiles would say the five values are interchangeable and would
   also leave a hole in a three-column grid. Two wide, three narrow fills the
   space and gives the first two the room their longer copy needs.
   ------------------------------------------------------------------------ */
.ac-mv__list {
  list-style: none;
  margin: 34px auto 0;
  padding: 0;
  max-width: 1080px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}
.ac-mv__value {
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
  padding: 26px 24px 28px;
  border-radius: 18px;
}
.ac-mv__value:nth-child(1),
.ac-mv__value:nth-child(2) { grid-column: span 3; }

.ac-mv__ic {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: 14px;
  color: var(--ac-text);
  background: rgba(var(--ac-line-rgb), .06);
  transition: color .35s var(--ac-ease), background .35s var(--ac-ease);
}
.ac-mv__value:hover .ac-mv__ic,
.ac-mv__value:focus-visible .ac-mv__ic { color: #de6e20; background: rgba(222,110,32,.12); }

.ac-mv__ic svg path,
.ac-mv__ic svg circle { stroke-dasharray: 1; stroke-dashoffset: 1; }
.ac-mv__value.is-visible .ac-mv__ic svg path,
.ac-mv__value.is-visible .ac-mv__ic svg circle { animation: acDraw 1.1s var(--ac-ease) forwards; }
.ac-mv__ic svg > *:nth-child(2) { animation-delay: .18s; }
.ac-mv__ic svg > *:nth-child(3) { animation-delay: .32s; }
.ac-mv__ic svg > *:nth-child(4) { animation-delay: .46s; }
@keyframes acDraw { to { stroke-dashoffset: 0; } }
.ac-mv__value:hover .ac-mv__ic svg path,
.ac-mv__value:hover .ac-mv__ic svg circle { animation: acDraw .7s var(--ac-ease) forwards; }

.ac-mv__value-text {
  margin: 0;
  font-family: var(--ac-font-body);
  font-size: clamp(15px, 1.3vw, 17px);
  line-height: 1.7;
  color: var(--ac-text-2);
}

/* ---- Mission and vision ------------------------------------------------ */
.ac-mv__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ac-mv__card { padding: 34px 32px 36px; border-radius: 22px; }
.ac-mv__card:hover,
.ac-mv__value:hover { transform: translateY(-3px); }

/* ---- Figures ----------------------------------------------------------- */
.ac-abx__stat { border-radius: 18px; padding: 30px 26px 28px; }
.ac-abx__stat-rule { z-index: 1; }
.ac-abx__stat-num,
.ac-abx__stat-label { position: relative; z-index: 1; }

@media (max-width: 1000px) {
  .ac-mv__list { grid-template-columns: 1fr 1fr; }
  .ac-mv__value,
  .ac-mv__value:nth-child(1),
  .ac-mv__value:nth-child(2) { grid-column: auto; }
}
@media (max-width: 620px) {
  .ac-mv__list { grid-template-columns: 1fr; gap: 12px; }
  .ac-mv__value { padding: 22px 20px 24px; gap: 13px; border-radius: 15px; }
  .ac-mv__ic { width: 40px; height: 40px; border-radius: 12px; }
  .ac-mv__ic svg { width: 25px; height: 25px; }
}
@media (prefers-reduced-motion: reduce) {
  .ac-abx__stat, .ac-mv__card, .ac-mv__value, .ac-mv__spot, .ac-mv__ic { transition: none; }
  .ac-mv__card:hover, .ac-mv__value:hover { transform: none; }
  .ac-mv__ic svg path, .ac-mv__ic svg circle { animation: none; stroke-dashoffset: 0; }
}

/* ============================================================
   ABOUT — figures as dials

   The previous cards were mostly empty: a number, a label, and a
   lot of padding. Each figure now sits inside a ring that closes
   as the number counts, which fills the card with the thing the
   card is about and ties it to the brand mark. The ring always
   completes, so it reads as a reveal rather than claiming to be a
   percentage of something.
   ============================================================ */
.ac-abx__ring { display: none; }   /* the loose background ring is gone */

.ac-abx__stats {
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.ac-abx__stat {
  grid-column: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 18px;
  padding: 30px 20px 26px;
  border-radius: 20px;
}

.ac-abx__dial {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(112px, 11vw, 138px);
  aspect-ratio: 1;
}
.ac-abx__dial-svg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  color: rgba(var(--ac-line-rgb), .10);
  transform: rotate(-90deg);   /* start the arc at twelve o'clock */
}
.ac-abx__dial-arc {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.6s var(--ac-ease);
}
/* Driven by the same .is-visible the counter uses, so the ring and the number
   run together rather than being two separate animations. */
.ac-abx__stat.is-visible .ac-abx__dial-arc { stroke-dashoffset: 0; }

.ac-abx__stat-num {
  position: relative;
  z-index: 1;
  display: block;
  font-family: var(--ac-font-display);
  font-weight: 700;
  font-size: clamp(26px, 2.6vw, 34px);
  line-height: 1;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  color: var(--ac-text);
}
.ac-abx__stat-label {
  display: block;
  margin: 0;
  font-family: var(--ac-font-body);
  font-size: 14px;
  line-height: 1.45;
  color: var(--ac-text-2);
  max-width: 18ch;
}

@media (max-width: 900px) {
  .ac-abx__stats { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .ac-abx__stat { padding: 24px 14px 22px; gap: 14px; border-radius: 16px; }
  .ac-abx__dial { width: 100px; }
  .ac-abx__stat-num { font-size: 24px; }
  .ac-abx__stat-label { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .ac-abx__dial-arc { transition: none; stroke-dashoffset: 0; }
}

/* ============================================================
   MISSION & VISION — responsive fix and text alignment

   The mobile rules for this pair were written before the tiles
   were rebuilt, so they sit earlier in the file than the desktop
   ones. Media queries add no specificity, which means the later
   two-column rule was winning on phones and the pair never
   stacked. These come last, so they hold.
   ============================================================ */
.ac-mv__pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 16px;
  align-items: stretch;
}
/* auto-fit rather than a fixed breakpoint: the pair stacks as soon as the
   columns would fall under 360px, whatever the viewport is, so a later
   container change cannot catch it out. 360 rather than 320 because at 320 a
   two-up card holds only about 36 characters a line, which is readable but
   uncomfortably narrow for a paragraph. */

.ac-mv__card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* min-width:0 stops a long unbroken word forcing the grid track wider than
     its share, which is what tears a two-column grid on a narrow screen. */
  min-width: 0;
}

/* ---- Text alignment ----------------------------------------------------
   Left-aligned, not justified. The mission runs about 30 words in a column of
   roughly 45 characters; justifying that with hyphenation off leaves visible
   gaps, and the vision is a single display-size sentence, where justification
   would stretch one line and leave the other short. Ragged-right is the
   better read at this measure.
   ------------------------------------------------------------------------ */
.ac-mv__text,
.ac-mv__card--vision .ac-mv__text {
  text-align: left;
  text-align-last: auto;
  hyphens: none;
  -webkit-hyphens: none;
  word-break: normal;
  overflow-wrap: break-word;
  text-wrap: pretty;
  max-width: 46ch;
}

@media (max-width: 620px) {
  .ac-mv__card { padding: 26px 22px 28px; border-radius: 18px; }
  .ac-mv__label { font-size: 16px; margin-bottom: 10px; }
  .ac-mv__text { font-size: 16px; line-height: 1.7; max-width: none; }
  .ac-mv__card--vision .ac-mv__text { font-size: 20px; line-height: 1.4; }
}
@media (max-width: 380px) {
  .ac-mv__pair { grid-template-columns: 1fr; }
  .ac-mv__card { padding: 22px 18px 24px; }
}

/* ============================================================
   MISSION & VISION

   Three earlier attempts were all the same thing: text arranged
   on a page. In a page already full of type, that gives the eye
   nothing to rest on. This is a composition instead — the vision
   line sits inside a circle, because that is what the line is
   about, and the mission runs alongside it as supporting copy.
   ============================================================ */
.ac-mvx {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(32px, 6vw, 88px);
  align-items: center;
  max-width: 1040px;
  margin: 0 auto;
}

.ac-mvx__label {
  display: block;
  font-family: var(--ac-font-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ac-text-3);
  margin-bottom: 14px;
}

.ac-mvx__mission {
  margin: 0;
  font-family: var(--ac-font-body);
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.8;
  color: var(--ac-text-2);
  max-width: 46ch;
  text-align: left;
  hyphens: none; -webkit-hyphens: none;
  text-wrap: pretty;
}

/* ---- The circle -------------------------------------------------------- */
.ac-mvx__orb {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(280px, 34vw, 420px);
  aspect-ratio: 1;
  margin: 0;
  flex: 0 0 auto;
}
.ac-mvx__ring {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  color: rgba(var(--ac-line-rgb), .12);
  transform: rotate(-90deg);
}
/* The arc closes as the section arrives, the same drawn language the figures
   above use, so it belongs to the page rather than arriving as a new idea. */
.ac-mvx__ring-arc {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.8s var(--ac-ease);
}
.ac-mvx__orb.is-visible .ac-mvx__ring-arc { stroke-dashoffset: 0; }

.ac-mvx__orb-body {
  position: relative;
  z-index: 1;
  text-align: center;
  /* Held well inside the ring so the words never touch the stroke. */
  max-width: 68%;
}
.ac-mvx__vision {
  margin: 0;
  font-family: var(--ac-font-display);
  font-weight: 600;
  font-size: clamp(19px, 2.1vw, 26px);
  line-height: 1.35;
  letter-spacing: -.015em;
  /* Solid, not a gradient. Colour belongs on the 2.5px arc, where it reads as
     brand; spread across a whole sentence at display size it reads as cheap. */
  color: var(--ac-text);
  text-wrap: balance;
}
.ac-mvx__vision .ac-hl { color: inherit; font-weight: 700; }

@media (max-width: 900px) {
  .ac-mvx {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: 40px;
  }
  /* Alignment for the stacked layout is set in the 900px block further down,
     which centres these. Leaving the old left-alignment here would be dead
     code that reads as if it were still in force. */
  .ac-mvx__mission { max-width: 52ch; }
}
@media (max-width: 420px) {
  .ac-mvx__orb { width: min(88vw, 300px); }
  .ac-mvx__orb-body { max-width: 74%; }
}
@media (prefers-reduced-motion: reduce) {
  .ac-mvx__ring-arc { transition: none; stroke-dashoffset: 0; }
}

/* ============================================================
   MOBILE PASS

   Measured rather than guessed. On a phone, justified text with
   hyphenation off can only absorb slack in the word gaps, and how
   bad that looks depends entirely on how many gaps a line has:

     320px  35 chars/line   up to 8px extra per gap   visible
     360px  40 chars/line   up to 7px                 visible
     390px  44 chars/line   up to 6px                 acceptable
     414px  47 chars/line   up to 6px                 acceptable
     480px  55 chars/line   up to 5px                 acceptable

   So justification stays on for normal phones and is dropped
   below 400px, where the lines are simply too short to justify
   evenly. That is the whole of the "big spaces" problem.
   ============================================================ */
@media (max-width: 400px) {
  .ac-page__body p,
  .ac-doc__body p,
  .ac-doc__body li,
  .ac-faq__a,
  .ac-vac-content p,
  .ac-vac-hero__summary,
  .ac-prod__text,
  .ac-benefit__text,
  .ac-features__intro,
  .ac-collab__desc,
  .ac-ab-mission__body p,
  .ac-sw__detail,
  .ac-rw__text,
  .ac-rw__point,
  .ac-how__why,
  .ac-abx__para,
  .ac-mv__value-text {
    text-align: left;
    text-align-last: auto;
  }
  /* .ac-mvx__mission is deliberately absent: it is centred once the section
     stacks (see the 900px block), so listing it here as left-aligned would be
     overridden anyway and only mislead. */
}

/* ---- Vertical rhythm ---------------------------------------------------
   Sections were 48px apart at the small end, which on a phone reads as one
   continuous run of content rather than separate sections. 56 is enough to
   separate them without wasting a screen.
   ------------------------------------------------------------------------ */
@media (max-width: 640px) {
  .ac-section { padding: clamp(56px, 11vw, 72px) 0; }
  .ac-section__head { margin-bottom: 32px; }

  /* Headings were sized for desktop and only shrank by viewport width, which
     left them large next to 16px body copy on a phone. */
  .ac-section__title { font-size: clamp(25px, 6.4vw, 30px); line-height: 1.22; }

  /* Cards across the site: a little less inset, so the text inside keeps its
     measure instead of the padding eating the column. */
  .ac-benefit,
  .ac-tile,
  .ac-card { padding: 24px 20px 26px; }
}

/* ---- Touch targets -----------------------------------------------------
   Anything tappable needs about 44px of reachable area. Several controls were
   sized to their icon, which is smaller than a fingertip.
   ------------------------------------------------------------------------ */
@media (hover: none) {
  .ac-nav__toggle,
  .ac-theme-toggle,
  .ac-carousel__arrow,
  .ac-modal__close,
  .ac-lb__close,
  .ac-lb__nav {
    min-width: 44px;
    min-height: 44px;
  }
  /* Footer and inline links get vertical breathing room so neighbouring
     links are not one continuous strip of tap target. */
  .ac-footer__col li + li { margin-top: 4px; }
  .ac-footer__col a,
  .ac-footer__bottom a { display: inline-block; padding: 6px 0; }
}

/* ---- Long strings ------------------------------------------------------
   An email address or URL in body copy is the usual cause of a phone-only
   horizontal scrollbar: it cannot wrap, so it pushes the whole column wide.
   ------------------------------------------------------------------------ */
@media (max-width: 640px) {
  .ac-doc__body a,
  .ac-page__body a,
  .ac-ct-method,
  .ac-faq__a a { overflow-wrap: anywhere; }
}

/* ============================================================
   BRAND NAME IN RUNNING TEXT
   "Address Circle" is emphasised wherever it appears in a
   paragraph, alongside the product names.
   ============================================================ */
/* Inside gradient text the fill is transparent and the colour comes from a
   clipped background, so setting a colour here would knock a hole in it.
   Weight only in those contexts. */
.ac-grad-brand .ac-brand-term,
.ac-grad-head .ac-brand-term,
.ac-abx__statement .ac-brand-term,
.ac-mvx__vision .ac-brand-term,
.ac-mvx__vision-text .ac-brand-term,
.ac-hotline__num .ac-brand-term {
  color: inherit;
  -webkit-text-fill-color: inherit;
}

/* A heading is already emphatic; a bolder run inside it reads as a mistake
   rather than emphasis, so the brand name inherits the heading's weight. */
h1 .ac-brand-term, h2 .ac-brand-term, h3 .ac-brand-term,
.ac-section__title .ac-brand-term { font-weight: inherit; color: inherit; }

/* ============================================================
   MOBILE: TAP TARGETS AND THE VISION BLOCK
   ============================================================ */

/* ---- Decoration must never intercept a tap ----------------------------
   These four sit at inset: 0 over their section, so on a touch screen a tap
   anywhere in that area landed on the graphic instead of whatever was under
   it. Purely decorative layers are made inert. */
.ac-abx__dial-svg,
.ac-mvx__ring,
.ac-how__glow,
.ac-xcard__glow { pointer-events: none; }

/* ---- The header must always be reachable -------------------------------
   The header sits at z-index 100 while the sticky app bar and the drawer are
   at 950 and above. Raising the header above the page content, but keeping it
   below the drawer it opens, means no section can ever cover the menu button.
   ------------------------------------------------------------------------ */
.ac-header { z-index: 1000; }

/* A generous, square tap area for the menu button on touch. The icon is 26px,
   which is smaller than a fingertip. */
@media (hover: none) {
  .ac-nav__toggle {
    min-width: 46px;
    min-height: 46px;
    display: inline-grid;
    place-items: center;
    /* Reaches past the visible button so a near miss still opens the menu. */
    position: relative;
  }
  .ac-nav__toggle::after {
    content: "";
    position: absolute;
    inset: -6px;
  }
}

/* ---- Vision block on mobile -------------------------------------------
   The stacked layout centred the whole block, then a blanket rule pushed
   every label left, including the Vision label sitting inside the circle.
   The result was a left-aligned label over centred text. The mission label
   is the one that belongs on the left; the vision label belongs with its
   words.
   ------------------------------------------------------------------------ */
@media (max-width: 900px) {
  .ac-mvx__label { text-align: inherit; }
  /* Centred once the section stacks. On desktop the mission sits in a left
     column beside the circle, so left alignment reads correctly there; stacked
     under a centred heading it looked misaligned against everything around it.
     margin auto is needed as well as text-align, because the paragraph has a
     max-width and would otherwise stay pinned to the left of its box. */
  .ac-mvx__words { width: 100%; text-align: center; }
  .ac-mvx__words .ac-mvx__label { text-align: center; }
  .ac-mvx__mission {
    text-align: center;
    text-align-last: center;
    margin-left: auto;
    margin-right: auto;
  }
  .ac-mvx__orb { text-align: center; }
  .ac-mvx__orb .ac-mvx__label { text-align: center; }
  .ac-mvx__orb-body { max-width: 72%; }
}

/* ============================================================
   ANDROID / TOUCH: HORIZONTAL OVERFLOW ON THE HOME PAGE

   The orbit tooltips are hover-only, so on a touch device they can
   never be shown — but visibility:hidden still occupies layout, and
   they are positioned outside their bubble (right:100% / left:100%,
   up to 230px wide). The features section allows content to paint
   160px past its edges via overflow-clip-margin, so on a narrow
   screen those tips push the page wider than the viewport. Chrome
   on Android surfaces that as a horizontally scrollable, misaligned
   page; other engines happen to absorb it.

   display:none removes them from layout entirely rather than just
   hiding them, which is the actual fix — nothing is lost, because
   they were unreachable on touch anyway.
   ============================================================ */
@media (hover: none), (max-width: 900px) {
  .ac-orbit__tip { display: none; }
  /* With the tips gone there is nothing that needs to escape the section,
     so the clip margin that let them out is no longer required. */
  .ac-features { overflow-clip-margin: 0; }
}

/* overflow-x was set on body only. Per spec the value propagates from body to
   the viewport only while html is `visible`, and that propagation is exactly
   what several Android builds get wrong — leaving the root element free to
   scroll horizontally. Setting it on html too removes the ambiguity. `clip`
   is used rather than `hidden` because it contains the overflow without
   turning the element into a scroll container, which would break
   position:sticky inside it. */
html {
  overflow-x: clip;
  max-width: 100%;
}

/* ============================================================
   CTA BAND — MOBILE

   The band had no responsive rules at all: a 40px title and
   60px/40px padding on every screen. On a 360px phone that left
   240px of inner width for a title whose longest word needs
   ~264px, so it overflowed its own box. Desktop is deliberately
   untouched — every rule here is inside the phone breakpoint.
   ============================================================ */
@media (max-width: 640px) {
  .ac-band {
    /* Side padding was eating 80px of a 320px container. 22px keeps the
       card feeling inset without starving the text. */
    padding: 38px 22px 34px;
    /* 32px reads as a very round blob once the box is small. */
    border-radius: 24px;
    margin-top: 24px;
  }

  .ac-band__title {
    /* Scales with the screen instead of sitting at a fixed 40px. The lower
       bound keeps it clearly a heading; the upper bound stops it reaching
       desktop size on a large phone. */
    font-size: clamp(25px, 7vw, 31px);
    line-height: 1.2;
    letter-spacing: -.02em;
    /* Balances the two lines rather than leaving one word stranded. */
    text-wrap: balance;
  }

  .ac-band__sub {
    font-size: 15px;
    line-height: 1.6;
    margin: 12px auto 22px;
    /* A readable measure even though the band is centred. */
    max-width: 34ch;
  }

  /* Full-width button: on a phone the CTA is the whole point of the band,
     and a pill floating in the middle is both a smaller tap target and a
     weaker call to action. 50px clears the 44px minimum comfortably. */
  .ac-band .ac-btn {
    display: flex;
    width: 100%;
    min-height: 50px;
    font-size: 16px;
    padding: 12px 20px;
  }

  /* The lift-on-hover has no meaning on touch and can leave the button
     visually stuck after a tap. */
  .ac-band .ac-btn--primary:hover { transform: none; }
}