/* ==========================================================================
   AmpleTravel — design system
   --------------------------------------------------------------------------
   Visual language modelled on amplemarket.com: warm off-white paper, near-black
   ink, very large headings at regular weight with tight negative tracking,
   hairline borders, pastel gradient meshes, and a colour-coded pillar system.

   Sections
     01  Tokens
     02  Reset & base
     03  Typography
     04  Layout primitives
     05  Buttons & links
     06  Tags, eyebrows, badges
     07  Cards & surfaces
     08  Decorative gradients & grain
     09  Navigation
     10  Hero
     11  Sections & components
     12  Marquee
     13  Forms
     14  Prose (blog & legal)
     15  Footer
     16  Motion & reveal
     17  Responsive
     18  Print & reduced motion
     19  RTL & scripts
   ========================================================================== */

/* ==========================================================================
   01  TOKENS
   ========================================================================== */

:root {
  /* --- Ink & paper (amplemarket primary/secondary scale) --- */
  --at-ink:            #111111;
  --at-ink-90:         rgba(17, 17, 17, 0.9);
  --at-ink-60:         rgba(17, 17, 17, 0.6);
  --at-ink-45:         rgba(17, 17, 17, 0.45);
  --at-paper:          #f6f5f3;
  --at-paper-2:        #fbfaf9;
  --at-white:          #ffffff;
  --at-ink-secondary:  #272625;

  /* --- Neutrals --- */
  --at-n2: #373634;
  --at-n3: #494846;
  --at-n4: #5e5c5a;
  --at-n5: #787673;
  --at-n6: #a7a6a4;
  --at-n7: #dcdbda;
  --at-n8: #ecebea;

  /* --- Borders (hairline is the house style) --- */
  --at-border:        rgba(17, 17, 17, 0.05);
  --at-border-medium: rgba(17, 17, 17, 0.08);
  --at-border-strong: rgba(17, 17, 17, 0.3);
  --at-border-light:  rgba(255, 255, 255, 0.05);
  --at-border-light-medium: rgba(255, 255, 255, 0.08);
  --at-border-light-strong: rgba(255, 255, 255, 0.3);

  /* --- Accent --- */
  --at-accent:      #2d72f0;
  --at-accent-ink:  #1b4fb0;
  --at-highlight:   #e8400d;

  /* --- Pillar colours (one per product area) --- */
  --at-flights: #328efa;
  --at-hotels:  #e16540;
  --at-portal:  #fbc768;
  --at-api:     #47d096;

  /* --- Pastel gradient stops used in the mesh backgrounds --- */
  --at-g-cyan:   #99fff9;
  --at-g-aqua:   #c6ece9;
  --at-g-peach:  #ffeed8;
  --at-g-violet: #d0b2ff;
  --at-g-mint:   #b7efb2;
  --at-g-pink:   #ffd7f0;
  --at-g-canary: #ffef99;

  /* --- Semantic --- */
  --at-success:    #1c7d51;
  --at-success-bg: #e8f6ef;
  --at-danger:     #b3320f;
  --at-danger-bg:  #fdece6;

  /* --- Direction ---------------------------------------------------------
     Layout uses logical properties (inline-start/end) and needs no help. These
     two exist for the handful of places CSS logic cannot reach: transforms,
     which are always physical, and transform-origin, which takes a keyword.
     §19 flips them for RTL, so no rule has to be written twice. */
  --at-dir:   1;      /* multiplier for translateX/scaleX */
  --at-start: left;   /* the inline-start edge, as a keyword */

  /* --- Type --- */
  --at-font: 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont,
             'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --at-font-mono: ui-monospace, 'SF Mono', SFMono-Regular, 'Cascadia Mono',
                  Menlo, Consolas, monospace;

  /* Arabic script. Inter Tight has no Arabic coverage, so IBM Plex Sans Arabic
     leads and Latin follows for brand names, codes and prices inside Arabic
     copy. The system fallbacks cover Apple, Windows and Android. */
  --at-font-ar: 'IBM Plex Sans Arabic', 'Noto Sans Arabic', 'Geeza Pro',
                'Segoe UI', Tahoma, 'Inter Tight', sans-serif;

  /* Fluid heading scale. Tracking is applied per-size in §03 — large sizes
     need much tighter tracking than small ones to read as one system. */
  --at-t-display: clamp(3rem, 1.6rem + 6.2vw, 5.75rem);
  --at-t-h1:      clamp(2.5rem, 1.5rem + 4.4vw, 4rem);
  --at-t-h2:      clamp(2rem, 1.35rem + 2.9vw, 3rem);
  --at-t-h3:      clamp(1.5rem, 1.2rem + 1.3vw, 2rem);
  --at-t-h4:      clamp(1.25rem, 1.13rem + 0.5vw, 1.5rem);
  --at-t-h5:      1.125rem;
  --at-t-body-lg: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  --at-t-body:    1rem;
  --at-t-sm:      0.875rem;
  --at-t-xs:      0.8125rem;
  --at-t-micro:   0.6875rem;

  /* --- Space --- */
  --at-gutter:      3.5rem;
  --at-container:   83rem;
  --at-container-narrow: 48rem;
  --at-section-y:   clamp(4rem, 2rem + 7vw, 7.5rem);
  --at-section-y-sm: clamp(3rem, 2rem + 4vw, 4.5rem);

  /* --- Radius --- */
  --at-r-sm:  0.375rem;
  --at-r:     0.5rem;
  --at-r-md:  0.625rem;
  --at-r-lg:  0.875rem;
  --at-r-xl:  1.25rem;
  --at-r-pill: 999px;

  /* --- Elevation (used sparingly — borders do most of the work) --- */
  --at-shadow-sm: 0 1px 2px rgba(17, 17, 17, 0.04);
  --at-shadow:    0 2px 8px rgba(17, 17, 17, 0.05), 0 1px 2px rgba(17, 17, 17, 0.04);
  --at-shadow-lg: 0 18px 48px -12px rgba(17, 17, 17, 0.16), 0 2px 8px rgba(17, 17, 17, 0.04);
  --at-shadow-nav: 0 8px 32px -12px rgba(17, 17, 17, 0.14);

  /* --- Motion --- */
  --at-ease:      cubic-bezier(0.23, 1, 0.32, 1);
  --at-ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --at-dur:       0.25s;
  --at-dur-slow:  0.6s;

  --at-nav-h: 4.5rem;
}

/* ==========================================================================
   02  RESET & BASE
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--at-nav-h) + 1rem);
}

body {
  margin: 0;
  background-color: var(--at-paper);
  color: var(--at-ink);
  font-family: var(--at-font);
  font-size: var(--at-t-body);
  line-height: 1.5;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
  overflow-x: hidden;
}

body.at-no-scroll { overflow: hidden; }

img, svg, video { display: block; max-width: 100%; height: auto; }

button { font: inherit; color: inherit; }

a { color: inherit; }

ul, ol { margin: 0; padding: 0; list-style: none; }

hr {
  border: 0;
  border-top: 1px solid var(--at-border-medium);
  margin: 0;
}

::selection { background: var(--at-ink); color: var(--at-paper); }

:focus-visible {
  outline: 2px solid var(--at-accent);
  outline-offset: 3px;
  border-radius: var(--at-r-sm);
}

.at-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip link */
.at-skip {
  position: absolute;
  top: -100%;
  inset-inline-start: 1rem;
  z-index: 200;
  padding: 0.75rem 1.25rem;
  background: var(--at-ink);
  color: var(--at-paper);
  border-radius: var(--at-r);
  font-size: var(--at-t-sm);
  text-decoration: none;
  transition: top var(--at-dur) var(--at-ease);
}
.at-skip:focus { top: 1rem; }

/* Honeypot — off-screen but not display:none, so bots still fill it. */
.at-hp {
  position: absolute !important;
  /* Physical `left` on purpose: the trap must sit off-screen in both
     directions, and inset-inline-start would place it at +9999px in RTL. */
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* ==========================================================================
   03  TYPOGRAPHY
   --------------------------------------------------------------------------
   The signature move: large sizes at weight 400 with heavy negative tracking.
   Uppercase display headings jump to weight 800/900 with line-height < 1.
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.at-display,
.at-h1  { font-size: var(--at-t-h1);  letter-spacing: -0.042em; line-height: 1.02; }
.at-h2  { font-size: var(--at-t-h2);  letter-spacing: -0.038em; line-height: 1.06; }
.at-h3  { font-size: var(--at-t-h3);  letter-spacing: -0.03em;  line-height: 1.1; }
.at-h4  { font-size: var(--at-t-h4);  letter-spacing: -0.024em; line-height: 1.15; }
.at-h5  { font-size: var(--at-t-h5);  letter-spacing: -0.018em; line-height: 1.2; }

.at-display {
  font-size: var(--at-t-display);
  letter-spacing: -0.048em;
  line-height: 0.96;
}

/* Uppercase display — the heavy caps treatment. */
.at-caps-display {
  font-size: var(--at-t-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  line-height: 0.84;
}

.at-lead {
  font-size: var(--at-t-body-lg);
  line-height: 1.45;
  letter-spacing: -0.011em;
  color: var(--at-ink-60);
  text-wrap: pretty;
}

.at-body    { font-size: var(--at-t-body); line-height: 1.55; color: var(--at-ink-60); }
.at-body-sm { font-size: var(--at-t-sm);   line-height: 1.55; color: var(--at-ink-60); }

.at-ink      { color: var(--at-ink); }
.at-ink-soft { color: var(--at-ink-60); }
.at-mono {
  font-family: var(--at-font-mono);
  font-size: 0.9em;
  letter-spacing: 0;
}

/* Inline accent used inside headings via copy_text() */
.accent   { color: var(--at-highlight); }
.italic   { font-style: italic; }
.underline-soft {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  text-decoration-color: var(--at-border-strong);
}

/* Numeric emphasis — tabular so stat rows align */
.at-num {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.04em;
}

/* ==========================================================================
   04  LAYOUT PRIMITIVES
   ========================================================================== */

.at-section {
  position: relative;
  padding-inline: var(--at-gutter);
}

.at-container {
  width: 100%;
  max-width: var(--at-container);
  margin-inline: auto;
}

.at-container-narrow {
  width: 100%;
  max-width: var(--at-container-narrow);
  margin-inline: auto;
}

.at-block   { padding-block: var(--at-section-y); }
.at-block-sm { padding-block: var(--at-section-y-sm); }
.at-block-t { padding-top: var(--at-section-y); }
.at-block-b { padding-bottom: var(--at-section-y); }

/* Hairline rules between stacked sections */
.at-rule-t { border-top: 1px solid var(--at-border-medium); }
.at-rule-b { border-bottom: 1px solid var(--at-border-medium); }

.at-grid { display: grid; gap: 1.25rem; }
.at-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.at-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.at-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.at-stack   { display: flex; flex-direction: column; gap: 1rem; }
.at-stack-sm { display: flex; flex-direction: column; gap: 0.5rem; }
.at-stack-lg { display: flex; flex-direction: column; gap: 2rem; }

.at-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.at-center { text-align: center; }
.at-measure { max-width: 42rem; }
.at-measure-sm { max-width: 34rem; }

/* Dark panels — the final CTA and occasional feature block */
.at-dark {
  background-color: var(--at-ink);
  color: var(--at-paper);
}
.at-dark .at-lead,
.at-dark .at-body,
.at-dark .at-body-sm,
.at-dark .at-ink-soft { color: rgba(255, 255, 255, 0.62); }
.at-dark .at-eyebrow { color: rgba(255, 255, 255, 0.62); }
.at-dark .at-eyebrow::before { background: rgba(255, 255, 255, 0.3); }

/* Section header — eyebrow + title + lead, used everywhere */
.at-head {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 46rem;
}
.at-head--center {
  align-items: center;
  text-align: center;
  margin-inline: auto;
}
.at-head--wide { max-width: 58rem; }

/* ==========================================================================
   05  BUTTONS & LINKS
   ========================================================================== */

.at-btn {
  --btn-bg: var(--at-ink);
  --btn-fg: var(--at-paper);
  --btn-bd: var(--at-ink);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.8125rem 1.25rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  border-radius: var(--at-r);
  font-size: var(--at-t-sm);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform var(--at-dur) var(--at-ease),
              background-color var(--at-dur) var(--at-ease),
              border-color var(--at-dur) var(--at-ease),
              color var(--at-dur) var(--at-ease),
              box-shadow var(--at-dur) var(--at-ease);
}

.at-btn:hover {
  --btn-bg: var(--at-ink-secondary);
  --btn-bd: var(--at-ink-secondary);
  transform: translateY(-1px);
  box-shadow: var(--at-shadow);
}
.at-btn:active { transform: translateY(0); box-shadow: none; }

.at-btn .at-icon { width: 1.0625rem; height: 1.0625rem; }
.at-btn .at-icon:last-child {
  transition: transform var(--at-dur) var(--at-ease);
}
.at-btn:hover .at-icon:last-child { transform: translateX(calc(2px * var(--at-dir))); }

/* Secondary — hairline outline on paper */
.at-btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--at-ink);
  --btn-bd: var(--at-border-strong);
}
.at-btn--ghost:hover {
  --btn-bg: rgba(17, 17, 17, 0.04);
  --btn-bd: var(--at-ink);
  --btn-fg: var(--at-ink);
}

/* Quiet — no border until hover. Used in nav. */
.at-btn--quiet {
  --btn-bg: transparent;
  --btn-fg: var(--at-ink);
  --btn-bd: transparent;
}
.at-btn--quiet:hover {
  --btn-bg: rgba(17, 17, 17, 0.05);
  --btn-bd: transparent;
  box-shadow: none;
}

/* On dark panels */
.at-btn--invert {
  --btn-bg: var(--at-paper);
  --btn-fg: var(--at-ink);
  --btn-bd: var(--at-paper);
}
.at-btn--invert:hover {
  --btn-bg: var(--at-white);
  --btn-bd: var(--at-white);
}

.at-btn--invert-ghost {
  --btn-bg: transparent;
  --btn-fg: var(--at-paper);
  --btn-bd: rgba(255, 255, 255, 0.28);
}
.at-btn--invert-ghost:hover {
  --btn-bg: rgba(255, 255, 255, 0.08);
  --btn-bd: rgba(255, 255, 255, 0.5);
}

.at-btn--lg { padding: 1rem 1.5rem; font-size: var(--at-t-body); }
.at-btn--sm { padding: 0.5rem 0.875rem; font-size: var(--at-t-xs); }
.at-btn--block { width: 100%; }

/* Text link with sliding arrow */
.at-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--at-ink);
  font-size: var(--at-t-sm);
  font-weight: 500;
  letter-spacing: -0.01em;
  text-decoration: none;
  transition: gap var(--at-dur) var(--at-ease), color var(--at-dur) var(--at-ease);
}
.at-link .at-icon { width: 1rem; height: 1rem; }
.at-link:hover { gap: 0.625rem; color: var(--at-accent); }

.at-link--soft { color: var(--at-ink-60); }
.at-link--soft:hover { color: var(--at-ink); }

/* Inline prose link */
.at-a {
  color: var(--at-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: var(--at-border-strong);
  transition: text-decoration-color var(--at-dur) var(--at-ease), color var(--at-dur) var(--at-ease);
}
.at-a:hover { color: var(--at-accent); text-decoration-color: currentColor; }

/* Icon glyph sizing default */
.at-icon {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  vertical-align: middle;
}

/* ==========================================================================
   06  TAGS, EYEBROWS, BADGES
   ========================================================================== */

/* Eyebrow — micro uppercase label with a leading rule */
.at-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--at-t-micro);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--at-ink-60);
}
.at-eyebrow::before {
  content: '';
  width: 1.25rem;
  height: 1px;
  background: var(--at-border-strong);
  flex: none;
}
.at-eyebrow--bare::before { display: none; }

/* Pill tag */
.at-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.3125rem 0.625rem;
  border: 1px solid var(--at-border-medium);
  border-radius: var(--at-r-pill);
  background: var(--at-white);
  font-size: var(--at-t-micro);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--at-ink-60);
  white-space: nowrap;
}
.at-tag--solid {
  background: var(--at-ink);
  border-color: var(--at-ink);
  color: var(--at-paper);
}
.at-tag--dot::before {
  content: '';
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: var(--accent-c, var(--at-accent));
}

/* Assurance row — "No sign-up fee · No contracts · 24/7" */
.at-assurances {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  align-items: center;
}
.at-assurance {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  font-size: var(--at-t-sm);
  color: var(--at-ink-60);
  letter-spacing: -0.01em;
}
.at-assurance .at-icon {
  width: 1rem;
  height: 1rem;
  color: var(--at-success);
}
.at-dark .at-assurance { color: rgba(255, 255, 255, 0.62); }
.at-dark .at-assurance .at-icon { color: var(--at-api); }

/* Accent driver — set on any element to colour its children */
[data-accent='flights'] { --accent-c: var(--at-flights); }
[data-accent='hotels']  { --accent-c: var(--at-hotels); }
[data-accent='portal']  { --accent-c: var(--at-portal); }
[data-accent='api']     { --accent-c: var(--at-api); }

/* ==========================================================================
   07  CARDS & SURFACES
   ========================================================================== */

.at-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.5rem;
  background: var(--at-white);
  border: 1px solid var(--at-border-medium);
  border-radius: var(--at-r-lg);
  transition: border-color var(--at-dur) var(--at-ease),
              box-shadow var(--at-dur) var(--at-ease),
              transform var(--at-dur) var(--at-ease);
}

.at-card--flat { background: var(--at-paper-2); }
.at-card--bare { background: transparent; border-color: var(--at-border); }
.at-card--pad-lg { padding: 2rem; }

/* Interactive card (whole card is a link target) */
.at-card--link { text-decoration: none; }
.at-card--link:hover {
  border-color: var(--at-border-strong);
  box-shadow: var(--at-shadow);
  transform: translateY(-2px);
}
.at-card--link:hover .at-card__arrow { transform: translate(calc(2px * var(--at-dir)), -2px); }

.at-card__arrow {
  position: absolute;
  top: 1.25rem;
  inset-inline-end: 1.25rem;
  color: var(--at-ink-45);
  transition: transform var(--at-dur) var(--at-ease), color var(--at-dur) var(--at-ease);
}
.at-card--link:hover .at-card__arrow { color: var(--at-ink); }

/* Accent rail across the card top */
.at-card--rail { overflow: hidden; }
.at-card--rail::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--accent-c, var(--at-accent));
}

/* Icon chip */
.at-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--at-r-md);
  background: color-mix(in srgb, var(--accent-c, var(--at-accent)) 14%, transparent);
  color: color-mix(in srgb, var(--accent-c, var(--at-accent)) 78%, var(--at-ink));
  flex: none;
}
.at-chip .at-icon { width: 1.25rem; height: 1.25rem; }
.at-chip--lg { width: 3rem; height: 3rem; border-radius: var(--at-r-lg); }
.at-chip--lg .at-icon { width: 1.5rem; height: 1.5rem; }
.at-chip--plain {
  background: var(--at-paper);
  color: var(--at-ink);
  border: 1px solid var(--at-border-medium);
}
.at-dark .at-chip--plain {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--at-border-light-medium);
  color: var(--at-paper);
}

/* Stat tile */
.at-stat { display: flex; flex-direction: column; gap: 0.375rem; }
.at-stat__value {
  font-size: clamp(2rem, 1.4rem + 2.2vw, 3rem);
  letter-spacing: -0.045em;
  line-height: 0.98;
  font-variant-numeric: tabular-nums;
}
.at-stat__label {
  font-size: var(--at-t-sm);
  font-weight: 500;
  letter-spacing: -0.01em;
}
.at-stat__note {
  font-size: var(--at-t-xs);
  color: var(--at-ink-45);
  line-height: 1.45;
}
.at-dark .at-stat__note { color: rgba(255, 255, 255, 0.45); }

/* Stat strip — divided row */
.at-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border: 1px solid var(--at-border-medium);
  border-radius: var(--at-r-lg);
  background: var(--at-white);
  overflow: hidden;
}
.at-stats > * {
  padding: 1.75rem;
  border-inline-end: 1px solid var(--at-border-medium);
}
.at-stats > *:last-child { border-inline-end: 0; }
.at-dark .at-stats {
  background: rgba(255, 255, 255, 0.03);
  border-color: var(--at-border-light-medium);
}
.at-dark .at-stats > * { border-inline-end-color: var(--at-border-light-medium); }

/* Feature list with check marks */
.at-checks { display: flex; flex-direction: column; gap: 0.75rem; }
.at-checks li {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  font-size: var(--at-t-sm);
  line-height: 1.5;
  color: var(--at-ink-60);
}
.at-checks .at-icon {
  width: 1.0625rem;
  height: 1.0625rem;
  margin-top: 0.1875rem;
  color: var(--at-success);
  flex: none;
}
.at-checks--no .at-icon { color: var(--at-ink-45); }
.at-checks--accent .at-icon { color: var(--accent-c, var(--at-accent)); }
.at-dark .at-checks li { color: rgba(255, 255, 255, 0.62); }

/* Bullet list, tight */
.at-bullets { display: flex; flex-direction: column; gap: 0.625rem; }
.at-bullets li {
  position: relative;
  padding-inline-start: 1rem;
  font-size: var(--at-t-sm);
  line-height: 1.55;
  color: var(--at-ink-60);
}
.at-bullets li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 0.55em;
  width: 0.3125rem;
  height: 0.3125rem;
  border-radius: 50%;
  background: var(--accent-c, var(--at-border-strong));
}

/* ==========================================================================
   08  DECORATIVE GRADIENTS & GRAIN
   --------------------------------------------------------------------------
   Heavily blurred pastel blobs behind the hero and feature sections, plus a
   fine grain overlay in `overlay` blend mode. Purely decorative.
   ========================================================================== */

.at-mesh {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  contain: paint;
}

.at-mesh__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(72px);
  opacity: 0.55;
  will-change: transform;
}

/* Hero arrangement */
.at-mesh--hero .at-mesh__blob:nth-child(1) {
  width: 34vw; height: 34vw; min-width: 260px; min-height: 260px;
  top: -8%; left: 4%;
  background: var(--at-g-cyan);
}
.at-mesh--hero .at-mesh__blob:nth-child(2) {
  width: 30vw; height: 30vw; min-width: 240px; min-height: 240px;
  top: 6%; right: 2%;
  background: var(--at-g-peach);
  opacity: 0.7;
}
.at-mesh--hero .at-mesh__blob:nth-child(3) {
  width: 26vw; height: 26vw; min-width: 200px; min-height: 200px;
  bottom: -14%; left: 32%;
  background: var(--at-g-violet);
  opacity: 0.42;
}
.at-mesh--hero .at-mesh__blob:nth-child(4) {
  width: 22vw; height: 22vw; min-width: 180px; min-height: 180px;
  bottom: 2%; right: 22%;
  background: var(--at-g-mint);
  opacity: 0.4;
}

/* Softer arrangement for interior sections */
.at-mesh--soft .at-mesh__blob:nth-child(1) {
  width: 40vw; height: 26vw;
  top: -10%; left: -6%;
  background: var(--at-g-aqua);
  opacity: 0.5;
}
.at-mesh--soft .at-mesh__blob:nth-child(2) {
  width: 34vw; height: 24vw;
  bottom: -12%; right: -4%;
  background: var(--at-g-pink);
  opacity: 0.38;
}

/* Fade the mesh out towards the section edges so it never hard-clips */
.at-mesh::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    var(--at-paper) 0%,
    transparent 18%,
    transparent 74%,
    var(--at-paper) 100%);
}

/* Grain overlay */
.at-grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: overlay;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E");
}

/* Any section that hosts a mesh needs its content lifted above it */
.at-layer { position: relative; z-index: 2; }

/* ==========================================================================
   09  NAVIGATION
   ========================================================================== */

.at-nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  padding-top: 1rem;
  transition: padding-top var(--at-dur) var(--at-ease);
}
.at-nav[data-scrolled='true'] { padding-top: 0.5rem; }

.at-nav__bar {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  padding: 0.625rem 0.75rem 0.625rem 1.25rem;
  border: 1px solid transparent;
  border-radius: var(--at-r-xl);
  transition: background-color var(--at-dur) var(--at-ease),
              border-color var(--at-dur) var(--at-ease),
              box-shadow var(--at-dur) var(--at-ease),
              backdrop-filter var(--at-dur) var(--at-ease);
}
.at-nav[data-scrolled='true'] .at-nav__bar,
.at-nav[data-open='true'] .at-nav__bar {
  background: rgba(246, 245, 243, 0.82);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  backdrop-filter: blur(16px) saturate(180%);
  border-color: var(--at-border-medium);
  box-shadow: var(--at-shadow-nav);
}

/* Logo */
.at-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: var(--at-ink);
  flex: none;
}
.at-logo__mark {
  width: 1.75rem;
  height: 1.75rem;
  flex: none;
}
.at-logo__word {
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.038em;
}
.at-logo__word span { font-weight: 400; color: var(--at-ink-60); }

/* Primary links */
.at-nav__links {
  display: flex;
  align-items: center;
  gap: 0.125rem;
  flex: 1;
}

.at-nav__item { position: relative; }

.at-nav__trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem 0.6875rem;
  background: transparent;
  border: 0;
  border-radius: var(--at-r);
  font-size: var(--at-t-sm);
  font-weight: 500;
  letter-spacing: -0.012em;
  color: var(--at-ink);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--at-dur) var(--at-ease), color var(--at-dur) var(--at-ease);
}
.at-nav__trigger:hover,
.at-nav__item[data-open='true'] .at-nav__trigger { background: rgba(17, 17, 17, 0.05); }
.at-nav__trigger[aria-current='page'] { color: var(--at-ink); }
.at-nav__trigger[aria-current='page']::after {
  content: '';
  position: absolute;
  bottom: 0.1875rem;
  inset-inline: 0.6875rem;
  height: 1.5px;
  background: var(--at-ink);
  border-radius: 2px;
}
.at-nav__trigger .at-icon {
  width: 0.875rem;
  height: 0.875rem;
  color: var(--at-ink-45);
  transition: transform var(--at-dur) var(--at-ease);
}
.at-nav__item[data-open='true'] .at-nav__trigger .at-icon { transform: rotate(180deg); }

/* Mega-menu panel */
.at-mega {
  position: absolute;
  top: calc(100% + 0.625rem);
  inset-inline-start: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: repeat(var(--mega-cols, 2), minmax(13.5rem, 1fr));
  gap: 1.5rem;
  min-width: max-content;
  padding: 1.25rem;
  background: rgba(251, 250, 249, 0.96);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--at-border-medium);
  border-radius: var(--at-r-lg);
  box-shadow: var(--at-shadow-lg);

  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--at-dur) var(--at-ease),
              transform var(--at-dur) var(--at-ease),
              visibility var(--at-dur) var(--at-ease);
}
.at-nav__item[data-open='true'] .at-mega {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.at-mega--right { inset-inline-start: auto; inset-inline-end: 0; }

.at-mega__col { display: flex; flex-direction: column; gap: 0.125rem; }
.at-mega__col + .at-mega__col {
  padding-inline-start: 1.5rem;
  border-inline-start: 1px solid var(--at-border-medium);
}
.at-mega__title {
  padding: 0.25rem 0.625rem 0.5rem;
  font-size: var(--at-t-micro);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--at-ink-45);
}

.at-mega__link {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 0.5625rem 0.625rem;
  border-radius: var(--at-r);
  text-decoration: none;
  color: var(--at-ink);
  transition: background-color var(--at-dur) var(--at-ease);
}
.at-mega__link:hover { background: rgba(17, 17, 17, 0.05); }
.at-mega__link .at-chip {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--at-r-sm);
}
.at-mega__link .at-chip .at-icon { width: 0.9375rem; height: 0.9375rem; }
.at-mega__label {
  font-size: var(--at-t-sm);
  font-weight: 500;
  letter-spacing: -0.012em;
  line-height: 1.35;
}
.at-mega__desc {
  font-size: var(--at-t-xs);
  line-height: 1.35;
  color: var(--at-ink-45);
}

/* Feature promo inside the mega-menu */
.at-mega__feature {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  max-width: 16rem;
  padding: 1.125rem;
  border-radius: var(--at-r-md);
  background:
    linear-gradient(150deg,
      color-mix(in srgb, var(--accent-c, var(--at-accent)) 16%, transparent),
      transparent 65%),
    var(--at-white);
  border: 1px solid var(--at-border-medium);
  text-decoration: none;
  color: var(--at-ink);
  transition: border-color var(--at-dur) var(--at-ease);
}
.at-mega__feature:hover { border-color: var(--at-border-strong); }

/* Nav actions */
.at-nav__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: none;
}

.at-nav__burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.375rem;
  height: 2.375rem;
  background: transparent;
  border: 1px solid var(--at-border-medium);
  border-radius: var(--at-r);
  cursor: pointer;
  color: var(--at-ink);
}

/* Mobile drawer */
.at-drawer {
  position: fixed;
  inset: 0;
  z-index: 99;
  display: none;
  flex-direction: column;
  padding: calc(var(--at-nav-h) + 1.5rem) 1.25rem 2rem;
  background: var(--at-paper);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.at-drawer[data-open='true'] { display: flex; }

.at-drawer__group { border-bottom: 1px solid var(--at-border-medium); }
.at-drawer__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 1rem 0;
  background: transparent;
  border: 0;
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  text-align: start;
  cursor: pointer;
}
.at-drawer__toggle .at-icon { transition: transform var(--at-dur) var(--at-ease); }
.at-drawer__group[data-open='true'] .at-drawer__toggle .at-icon { transform: rotate(180deg); }

.at-drawer__panel { display: none; padding-bottom: 1rem; }
.at-drawer__group[data-open='true'] .at-drawer__panel { display: block; }

.at-drawer__sub {
  padding: 0.5rem 0 0.25rem;
  font-size: var(--at-t-micro);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--at-ink-45);
}
.at-drawer__link {
  display: block;
  padding: 0.5625rem 0;
  font-size: var(--at-t-body);
  letter-spacing: -0.015em;
  color: var(--at-ink-60);
  text-decoration: none;
}
.at-drawer__link:hover { color: var(--at-ink); }

.at-drawer__actions {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  margin-top: 1.75rem;
}

/* Body offset for the fixed nav */
.at-main { padding-top: var(--at-nav-h); }

/* ==========================================================================
   10  HERO
   ========================================================================== */

.at-hero {
  position: relative;
  padding-block: clamp(3.5rem, 2rem + 6vw, 6.5rem) clamp(3rem, 2rem + 4vw, 5rem);
  overflow: hidden;
}

.at-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.75rem;
  text-align: center;
  max-width: 56rem;
  margin-inline: auto;
}

.at-hero__title { font-size: var(--at-t-display); letter-spacing: -0.048em; line-height: 0.98; }
.at-hero__sub { max-width: 40rem; }

.at-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}

.at-hero__trust {
  font-size: var(--at-t-xs);
  color: var(--at-ink-45);
  letter-spacing: -0.005em;
}

/* Left-aligned hero used on interior pages */
.at-hero--start .at-hero__inner {
  align-items: flex-start;
  text-align: start;
  margin-inline: 0;
}
.at-hero--start .at-hero__actions { justify-content: flex-start; }
.at-hero--start .at-hero__title { font-size: var(--at-t-h1); }

/* --- Headline with an illustration behind it -------------------------------
   The mark is taken out of flow entirely so the headline stays exactly where
   it was — dead centre, full column width, wrapping as before. It is anchored
   to the inline-end and layered underneath, so it reads as sitting behind the
   words and emerging past their right edge.

   isolation:isolate keeps the z-index local. Without it the stack would be
   resolved against the hero section, where the mesh and grain layers live, and
   the mark could end up behind the section background instead of behind the
   text.

   Direction is free: inset-inline-end puts it on the left under RTL, which is
   where §19 mirrors it to fly towards. */
.at-hero__headline {
  position: relative;
  isolation: isolate;
  width: 100%;
}

/* Lifted above the mark. Everything else in the hero is a sibling of the
   headline, so nothing else needs a z-index. */
.at-hero__headline .at-hero__title {
  position: relative;
  z-index: 1;
}

.at-hero__illus {
  position: absolute;
  z-index: 0;
  top: 50%;
  inset-inline-end: var(--at-illus-inset);
  width: var(--at-illus-w);
  transform: translateY(-50%);
  pointer-events: none;
  /* Held back a little because near-black ink on near-black ink is muddy where
     the aircraft passes behind a letter. Raise towards 1 for more presence. */
  opacity: 0.92;
}

.at-hero__headline { --at-illus-w: 500px; --at-illus-inset: -2.5rem; }

/* The hero clips its overflow, so past this width the tail would be cut rather
   than bleeding — step the mark down instead of letting it be trimmed. */
@media (max-width: 1199px) {
  .at-hero__headline { --at-illus-w: 380px; --at-illus-inset: -1.5rem; }
}
@media (max-width: 1023px) {
  .at-hero__headline { --at-illus-w: 300px; --at-illus-inset: -1rem; }
}

/* On a phone the headline already fills the screen; a graphic behind it is
   noise rather than atmosphere. */
@media (max-width: 767px) {
  .at-hero__illus { display: none; }
}

/* Separates the hero copy from the product mock. Previously an inline style on
   the element; here so the spacing scale stays in one place and the CSP can
   eventually drop 'unsafe-inline'. */
.at-hero__mock { margin-block-start: clamp(4rem, 2.5rem + 5vw, 7rem); }

/* Product mock inside hero — abstract search UI, not a screenshot */
.at-mock {
  width: 100%;
  border: 1px solid var(--at-border-medium);
  border-radius: var(--at-r-xl);
  background: var(--at-white);
  box-shadow: var(--at-shadow-lg);
  overflow: hidden;
}
.at-mock__chrome {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--at-border-medium);
  background: var(--at-paper-2);
}
.at-mock__dot {
  width: 0.5rem; height: 0.5rem;
  border-radius: 50%;
  background: var(--at-n7);
}
.at-mock__title {
  margin-inline-start: 0.375rem;
  font-size: var(--at-t-xs);
  color: var(--at-ink-45);
}
.at-mock__body { padding: 1rem; display: flex; flex-direction: column; gap: 0.625rem; }

.at-mock__row {
  display: grid;
  grid-template-columns: 2.25rem 1fr auto auto;
  align-items: center;
  gap: 0.875rem;
  padding: 0.875rem;
  border: 1px solid var(--at-border);
  border-radius: var(--at-r-md);
  background: var(--at-paper-2);
}
.at-mock__row--head {
  background: transparent;
  border-color: transparent;
  padding-block: 0.25rem;
  font-size: var(--at-t-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--at-ink-45);
}
.at-mock__row--best {
  background: var(--at-white);
  border-color: color-mix(in srgb, var(--at-accent) 40%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--at-accent) 9%, transparent);
}
.at-mock__supplier {
  font-size: var(--at-t-sm);
  font-weight: 500;
  letter-spacing: -0.012em;
}
.at-mock__meta { font-size: var(--at-t-xs); color: var(--at-ink-45); }
.at-mock__price {
  font-size: var(--at-t-sm);
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.at-mock__price s { color: var(--at-ink-45); font-weight: 400; }

/* ==========================================================================
   11  SECTIONS & COMPONENTS
   ========================================================================== */

/* --- Pillars: four colour-coded product cards --- */
.at-pillars {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}
.at-pillar {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.5rem;
  background: var(--at-white);
  border: 1px solid var(--at-border-medium);
  border-radius: var(--at-r-lg);
  text-decoration: none;
  color: var(--at-ink);
  overflow: hidden;
  position: relative;
  transition: border-color var(--at-dur) var(--at-ease),
              box-shadow var(--at-dur) var(--at-ease),
              transform var(--at-dur) var(--at-ease);
}
.at-pillar::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--accent-c);
}
.at-pillar::after {
  content: '';
  position: absolute;
  inset: -40% -40% auto auto;
  width: 12rem; height: 12rem;
  border-radius: 50%;
  background: var(--accent-c);
  opacity: 0.1;
  filter: blur(40px);
  transition: opacity var(--at-dur) var(--at-ease);
}
.at-pillar:hover {
  border-color: var(--at-border-strong);
  box-shadow: var(--at-shadow);
  transform: translateY(-3px);
}
.at-pillar:hover::after { opacity: 0.2; }
.at-pillar > * { position: relative; z-index: 1; }
.at-pillar__foot { margin-top: auto; padding-top: 0.5rem; }

/* --- Split: text beside a visual --- */
.at-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: center;
}
.at-split--reverse .at-split__text { order: 2; }
.at-split--reverse .at-split__visual { order: 1; }
.at-split__text { display: flex; flex-direction: column; gap: 1.25rem; }

/* --- Abstract visuals used in split blocks --- */
.at-viz {
  position: relative;
  border: 1px solid var(--at-border-medium);
  border-radius: var(--at-r-xl);
  background: var(--at-white);
  padding: 1.5rem;
  box-shadow: var(--at-shadow);
  overflow: hidden;
}
.at-viz::before {
  content: '';
  position: absolute;
  inset: auto -20% -50% auto;
  width: 18rem; height: 18rem;
  border-radius: 50%;
  background: var(--accent-c, var(--at-accent));
  opacity: 0.08;
  filter: blur(52px);
}
.at-viz > * { position: relative; }

.at-viz__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.875rem 0;
  border-bottom: 1px solid var(--at-border);
  font-size: var(--at-t-sm);
}
.at-viz__row:last-child { border-bottom: 0; }
.at-viz__row dt { color: var(--at-ink-60); }
.at-viz__row dd {
  margin: 0;
  font-weight: 500;
  letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
}
.at-viz__row--total {
  border-top: 1px solid var(--at-border-strong);
  border-bottom: 0;
  margin-top: 0.25rem;
  padding-top: 1rem;
}
.at-viz__row--total dd { font-size: var(--at-t-h4); letter-spacing: -0.03em; }

/* Bar meter used in the margin visual */
.at-meter {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-block: 0.75rem;
}
.at-meter__head {
  display: flex;
  justify-content: space-between;
  font-size: var(--at-t-xs);
  color: var(--at-ink-60);
}
.at-meter__head strong { color: var(--at-ink); font-weight: 500; }
.at-meter__track {
  height: 0.5rem;
  border-radius: var(--at-r-pill);
  background: var(--at-n8);
  overflow: hidden;
}
.at-meter__fill {
  height: 100%;
  border-radius: var(--at-r-pill);
  background: var(--accent-c, var(--at-accent));
  transform-origin: var(--at-start) center;
}

/* Code visual */
.at-code {
  padding: 1.25rem;
  border-radius: var(--at-r-lg);
  background: var(--at-ink);
  color: rgba(255, 255, 255, 0.85);
  font-family: var(--at-font-mono);
  font-size: var(--at-t-xs);
  line-height: 1.75;
  overflow-x: auto;
}
.at-code .k { color: #95d1fd; }
.at-code .s { color: #81e4ba; }
.at-code .c { color: rgba(255, 255, 255, 0.38); }
.at-code .n { color: #fbc768; }

/* Network / node visual */
.at-nodes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
  gap: 0.5rem;
}
.at-node {
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--at-border-medium);
  border-radius: var(--at-r);
  background: var(--at-paper-2);
  font-size: var(--at-t-xs);
  letter-spacing: -0.01em;
  text-align: center;
  color: var(--at-ink-60);
}
.at-node--hub {
  grid-column: 1 / -1;
  background: var(--at-ink);
  border-color: var(--at-ink);
  color: var(--at-paper);
  font-weight: 500;
  font-size: var(--at-t-sm);
  padding-block: 0.875rem;
}

/* --- Steps: numbered process --- */
.at-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0;
  border: 1px solid var(--at-border-medium);
  border-radius: var(--at-r-lg);
  background: var(--at-white);
  overflow: hidden;
}
.at-step {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  padding: 1.75rem;
  border-inline-end: 1px solid var(--at-border-medium);
}
.at-step:last-child { border-inline-end: 0; }
.at-step__n {
  font-size: var(--at-t-micro);
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--at-ink-45);
  font-variant-numeric: tabular-nums;
}

/* --- Comparison table --- */
.at-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--at-border-medium);
  border-radius: var(--at-r-lg);
  background: var(--at-white);
  -webkit-overflow-scrolling: touch;
}
.at-table {
  width: 100%;
  min-width: 38rem;
  border-collapse: collapse;
  font-size: var(--at-t-sm);
}
.at-table th,
.at-table td {
  padding: 1rem 1.25rem;
  text-align: start;
  border-bottom: 1px solid var(--at-border);
  vertical-align: middle;
}
.at-table thead th {
  font-size: var(--at-t-micro);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--at-ink-45);
  border-bottom-color: var(--at-border-medium);
  white-space: nowrap;
}
.at-table tbody tr:last-child td { border-bottom: 0; }
.at-table__row-label { font-weight: 500; letter-spacing: -0.012em; color: var(--at-ink); }
.at-table__ours {
  background: color-mix(in srgb, var(--at-accent) 4%, transparent);
  border-inline: 1px solid color-mix(in srgb, var(--at-accent) 18%, transparent);
  font-weight: 500;
  color: var(--at-ink);
}
.at-table thead .at-table__ours {
  color: var(--at-accent-ink);
  border-top: 1px solid color-mix(in srgb, var(--at-accent) 18%, transparent);
}
.at-table tbody tr:last-child .at-table__ours {
  border-bottom: 1px solid color-mix(in srgb, var(--at-accent) 18%, transparent);
}
.at-table__theirs { color: var(--at-ink-60); }
.at-table__cell {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.at-table__cell .at-icon { width: 1rem; height: 1rem; flex: none; }
.at-table__cell--yes .at-icon { color: var(--at-success); }
.at-table__cell--no .at-icon { color: var(--at-ink-45); }

/* --- Testimonials ---
   auto-fit rather than a fixed 3 columns: the component is also used with one
   or two quotes (e.g. /register, /about), and empty tracks would otherwise
   leave a single card stranded at a third of the width. The 24rem minimum
   yields 3 / 2 / 1 columns at the same widths the old breakpoints did, and
   min(…, 100%) stops it overflowing inside a narrow column. */
.at-quotes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr));
  gap: 1rem;
}
.at-quote {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 1.75rem;
  background: var(--at-white);
  border: 1px solid var(--at-border-medium);
  border-radius: var(--at-r-lg);
}
.at-quote__mark { color: var(--accent-c, var(--at-border-strong)); opacity: 0.85; }
.at-quote__text {
  font-size: var(--at-t-body-lg);
  line-height: 1.4;
  letter-spacing: -0.02em;
  text-wrap: pretty;
}
.at-quote__foot {
  margin-top: auto;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--at-border);
}
.at-quote__who { display: flex; flex-direction: column; gap: 0.125rem; }
.at-quote__name { font-size: var(--at-t-sm); font-weight: 500; letter-spacing: -0.012em; }
.at-quote__role { font-size: var(--at-t-xs); color: var(--at-ink-45); }
.at-quote__metric { text-align: end; flex: none; }
.at-quote__metric-v {
  font-size: var(--at-t-h4);
  letter-spacing: -0.03em;
  color: var(--accent-c, var(--at-ink));
  font-variant-numeric: tabular-nums;
}
.at-quote__metric-l {
  font-size: var(--at-t-micro);
  color: var(--at-ink-45);
  letter-spacing: 0.02em;
}

/* Single pull-quote block */
.at-pullquote {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  align-items: center;
  text-align: center;
  max-width: 46rem;
  margin-inline: auto;
}
.at-pullquote__text {
  font-size: var(--at-t-h3);
  line-height: 1.25;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

/* --- Accordion (FAQ) --- */
.at-accordion {
  border-top: 1px solid var(--at-border-medium);
}
.at-acc {
  border-bottom: 1px solid var(--at-border-medium);
}
.at-acc__btn {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
  padding: 1.25rem 0;
  background: transparent;
  border: 0;
  text-align: start;
  cursor: pointer;
  font-size: var(--at-t-body-lg);
  letter-spacing: -0.022em;
  line-height: 1.35;
  color: var(--at-ink);
}
.at-acc__btn:hover { color: var(--at-accent); }
.at-acc__icon {
  flex: none;
  margin-top: 0.25rem;
  color: var(--at-ink-45);
  transition: transform var(--at-dur) var(--at-ease);
}
.at-acc[data-open='true'] .at-acc__icon { transform: rotate(180deg); }

.at-acc__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--at-dur) var(--at-ease);
}
.at-acc[data-open='true'] .at-acc__panel { grid-template-rows: 1fr; }
.at-acc__inner { overflow: hidden; }
.at-acc__inner > div {
  padding-bottom: 1.5rem;
  max-width: 46rem;
  font-size: var(--at-t-body);
  line-height: 1.6;
  color: var(--at-ink-60);
}

/* --- Metrics row --- */
.at-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1rem;
}
.at-metric {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.75rem;
  border: 1px solid var(--at-border-medium);
  border-radius: var(--at-r-lg);
  background: var(--at-white);
}
.at-metric__v {
  font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem);
  letter-spacing: -0.042em;
  line-height: 1;
  color: var(--accent-c, var(--at-ink));
  font-variant-numeric: tabular-nums;
}

/* --- Final CTA --- */
.at-cta {
  position: relative;
  border-radius: var(--at-r-xl);
  overflow: hidden;
  background: var(--at-ink);
  color: var(--at-paper);
  padding: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
}
.at-cta::before {
  content: '';
  position: absolute;
  inset: auto -10% -60% -10%;
  height: 24rem;
  background:
    radial-gradient(40% 60% at 20% 100%, color-mix(in srgb, var(--at-g-cyan) 55%, transparent), transparent 70%),
    radial-gradient(40% 60% at 60% 100%, color-mix(in srgb, var(--at-g-violet) 45%, transparent), transparent 70%),
    radial-gradient(40% 60% at 90% 100%, color-mix(in srgb, var(--at-g-peach) 45%, transparent), transparent 70%);
  filter: blur(48px);
  opacity: 0.5;
  pointer-events: none;
}
.at-cta__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  align-items: center;
  text-align: center;
  max-width: 42rem;
  margin-inline: auto;
}
.at-cta__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; }

/* --- Blog cards ---
   auto-fit for the same reason: filtering /blog by category can leave one or
   two posts in the grid. */
.at-posts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr));
  gap: 1rem;
}
.at-post {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  padding: 1.5rem;
  background: var(--at-white);
  border: 1px solid var(--at-border-medium);
  border-radius: var(--at-r-lg);
  text-decoration: none;
  color: var(--at-ink);
  transition: border-color var(--at-dur) var(--at-ease),
              box-shadow var(--at-dur) var(--at-ease),
              transform var(--at-dur) var(--at-ease);
}
.at-post:hover {
  border-color: var(--at-border-strong);
  box-shadow: var(--at-shadow);
  transform: translateY(-2px);
}
.at-post__meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--at-t-xs);
  color: var(--at-ink-45);
}
.at-post__meta .at-tag--dot { --accent-c: var(--accent-c, var(--at-accent)); }
.at-post__title {
  font-size: var(--at-t-h4);
  letter-spacing: -0.028em;
  line-height: 1.2;
}
.at-post__foot { margin-top: auto; padding-top: 0.5rem; }

/* Featured post */
.at-post--featured {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 1rem + 3vw, 3.5rem);
  align-items: center;
  padding: clamp(1.75rem, 1.25rem + 2vw, 2.75rem);
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--accent-c, var(--at-accent)) 8%, transparent),
      transparent 55%),
    var(--at-white);
}
.at-post--featured .at-post__title {
  font-size: var(--at-t-h2);
  letter-spacing: -0.038em;
}
.at-post--featured .at-post__side {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Category filter row */
.at-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.at-filter {
  padding: 0.4375rem 0.875rem;
  border: 1px solid var(--at-border-medium);
  border-radius: var(--at-r-pill);
  background: var(--at-white);
  font-size: var(--at-t-xs);
  letter-spacing: -0.008em;
  color: var(--at-ink-60);
  text-decoration: none;
  transition: all var(--at-dur) var(--at-ease);
}
.at-filter:hover { border-color: var(--at-border-strong); color: var(--at-ink); }
.at-filter[aria-current='true'] {
  background: var(--at-ink);
  border-color: var(--at-ink);
  color: var(--at-paper);
}

/* --- Hub cards --- */
.at-hubs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: 1rem;
}

/* --- Breadcrumb --- */
.at-crumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.375rem;
  font-size: var(--at-t-xs);
  color: var(--at-ink-45);
}
.at-crumbs a { text-decoration: none; }
.at-crumbs a:hover { color: var(--at-ink); text-decoration: underline; }
.at-crumbs .at-icon { width: 0.8125rem; height: 0.8125rem; }

/* --- Contact detail list --- */
.at-details { display: flex; flex-direction: column; gap: 0.25rem; }
.at-detail {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--at-border);
}
.at-detail:last-child { border-bottom: 0; }
.at-detail__k {
  font-size: var(--at-t-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--at-ink-45);
  margin-bottom: 0.25rem;
}
.at-detail__v { font-size: var(--at-t-sm); line-height: 1.5; }

/* ==========================================================================
   12  MARQUEE (supplier logos)
   ========================================================================== */

.at-marquee {
  position: relative;
  overflow: hidden;
  /* Fade the edges so items enter and leave softly */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.at-marquee__track {
  display: flex;
  width: max-content;
  gap: 3.5rem;
  animation: at-scroll 42s linear infinite;
}
.at-marquee:hover .at-marquee__track { animation-play-state: paused; }

.at-marquee__item {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--at-ink-45);
  white-space: nowrap;
  transition: color var(--at-dur) var(--at-ease);
}
.at-marquee__item:hover { color: var(--at-ink); }

@keyframes at-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* ==========================================================================
   13  FORMS
   ========================================================================== */

.at-form { display: flex; flex-direction: column; gap: 1.125rem; }

.at-field { display: flex; flex-direction: column; gap: 0.4375rem; }

.at-label {
  font-size: var(--at-t-sm);
  font-weight: 500;
  letter-spacing: -0.012em;
}
.at-label span { color: var(--at-ink-45); font-weight: 400; }

.at-hint { font-size: var(--at-t-xs); color: var(--at-ink-45); line-height: 1.45; }

.at-input,
.at-select,
.at-textarea {
  width: 100%;
  padding: 0.75rem 0.875rem;
  background: var(--at-white);
  border: 1px solid var(--at-border-strong);
  border-radius: var(--at-r);
  font-family: inherit;
  font-size: var(--at-t-sm);
  line-height: 1.4;
  color: var(--at-ink);
  transition: border-color var(--at-dur) var(--at-ease), box-shadow var(--at-dur) var(--at-ease);
  appearance: none;
}
.at-input::placeholder,
.at-textarea::placeholder { color: var(--at-ink-45); }

.at-input:focus,
.at-select:focus,
.at-textarea:focus {
  outline: 0;
  border-color: var(--at-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--at-accent) 15%, transparent);
}

.at-textarea { min-height: 8rem; resize: vertical; }

.at-select {
  padding-inline-end: 2.25rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23787673' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9.5 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.875rem center;
  cursor: pointer;
}

.at-field[data-invalid='true'] .at-input,
.at-field[data-invalid='true'] .at-select,
.at-field[data-invalid='true'] .at-textarea {
  border-color: var(--at-danger);
  background: var(--at-danger-bg);
}

.at-error {
  display: flex;
  align-items: flex-start;
  gap: 0.375rem;
  font-size: var(--at-t-xs);
  line-height: 1.45;
  color: var(--at-danger);
}
.at-error .at-icon { width: 0.9375rem; height: 0.9375rem; margin-top: 0.0625rem; }

.at-check {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  font-size: var(--at-t-sm);
  line-height: 1.5;
  color: var(--at-ink-60);
  cursor: pointer;
}
.at-check input {
  appearance: none;
  width: 1.0625rem;
  height: 1.0625rem;
  margin: 0.1875rem 0 0;
  flex: none;
  border: 1px solid var(--at-border-strong);
  border-radius: var(--at-r-sm);
  background: var(--at-white);
  cursor: pointer;
  transition: all var(--at-dur) var(--at-ease);
}
.at-check input:checked {
  background: var(--at-ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E") center / 0.75rem no-repeat;
  border-color: var(--at-ink);
}
.at-check input:focus-visible {
  outline: 2px solid var(--at-accent);
  outline-offset: 2px;
}

/* Two-up field rows */
.at-form__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.125rem;
}

/* Flash notices */
.at-notice {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem 1.125rem;
  border-radius: var(--at-r-md);
  border: 1px solid var(--at-border-medium);
  background: var(--at-white);
  font-size: var(--at-t-sm);
  line-height: 1.55;
}
.at-notice .at-icon { flex: none; margin-top: 0.125rem; }
.at-notice--success {
  background: var(--at-success-bg);
  border-color: color-mix(in srgb, var(--at-success) 26%, transparent);
  color: #12543a;
}
.at-notice--success .at-icon { color: var(--at-success); }
.at-notice--error {
  background: var(--at-danger-bg);
  border-color: color-mix(in srgb, var(--at-danger) 26%, transparent);
  color: #7d240c;
}
.at-notice--error .at-icon { color: var(--at-danger); }
.at-notice--info .at-icon { color: var(--at-accent); }

/* ==========================================================================
   14  PROSE (blog & legal)
   ========================================================================== */

.at-prose {
  font-size: 1.0625rem;
  line-height: 1.68;
  color: var(--at-ink-90);
  max-width: 40rem;
}
.at-prose > * + * { margin-top: 1.25em; }

.at-prose p { text-wrap: pretty; }

.at-prose h2 {
  margin-top: 2.25em;
  font-size: var(--at-t-h3);
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--at-ink);
}
.at-prose h3 {
  margin-top: 1.75em;
  font-size: var(--at-t-h4);
  letter-spacing: -0.024em;
  color: var(--at-ink);
}
.at-prose h2 + p,
.at-prose h3 + p { margin-top: 0.75em; }

.at-prose strong { font-weight: 600; color: var(--at-ink); }

.at-prose a {
  color: var(--at-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: var(--at-border-strong);
}
.at-prose a:hover { color: var(--at-accent); text-decoration-color: currentColor; }

.at-prose ul, .at-prose ol {
  padding-inline-start: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}
.at-prose ul { list-style: disc; }
.at-prose ol { list-style: decimal; }
.at-prose li::marker { color: var(--at-ink-45); }

.at-prose code {
  padding: 0.15em 0.4em;
  border-radius: var(--at-r-sm);
  background: var(--at-n8);
  font-family: var(--at-font-mono);
  font-size: 0.875em;
}

.at-prose blockquote {
  margin: 1.75em 0;
  padding-inline-start: 1.25rem;
  border-inline-start: 2px solid var(--at-border-strong);
  font-size: var(--at-t-h4);
  line-height: 1.4;
  letter-spacing: -0.022em;
  color: var(--at-ink);
}

.at-prose .at-lede {
  font-size: var(--at-t-body-lg);
  line-height: 1.5;
  letter-spacing: -0.016em;
  color: var(--at-ink);
}

.at-prose hr { margin-block: 2.5em; }

/* Article header */
.at-article__head {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  max-width: 44rem;
}
.at-article__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.875rem;
  font-size: var(--at-t-xs);
  color: var(--at-ink-45);
}
.at-article__meta span::before { content: '·'; margin-inline-end: 0.875rem; }
.at-article__meta > :first-child::before { content: none; margin: 0; }

/* Legal doc layout */
.at-legal { display: grid; grid-template-columns: 16rem minmax(0, 1fr); gap: 3.5rem; }
.at-legal__nav {
  position: sticky;
  top: calc(var(--at-nav-h) + 1.5rem);
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  max-height: calc(100vh - var(--at-nav-h) - 3rem);
  overflow-y: auto;
}
.at-legal__nav a {
  padding: 0.4375rem 0.75rem;
  border-radius: var(--at-r-sm);
  font-size: var(--at-t-xs);
  line-height: 1.4;
  color: var(--at-ink-60);
  text-decoration: none;
  transition: background-color var(--at-dur) var(--at-ease), color var(--at-dur) var(--at-ease);
}
.at-legal__nav a:hover { background: rgba(17, 17, 17, 0.04); color: var(--at-ink); }
.at-legal__body h2 {
  scroll-margin-top: calc(var(--at-nav-h) + 1.5rem);
}

/* ==========================================================================
   15  FOOTER
   ========================================================================== */

.at-footer {
  background: var(--at-ink);
  color: var(--at-paper);
  padding-block: clamp(3rem, 2rem + 4vw, 5rem) 2rem;
}

.at-footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) repeat(4, minmax(0, 1fr));
  gap: 2.5rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid var(--at-border-light-medium);
}

.at-footer__brand { display: flex; flex-direction: column; gap: 1rem; max-width: 18rem; }
.at-footer .at-logo { color: var(--at-paper); }
.at-footer .at-logo__word span { color: rgba(255, 255, 255, 0.55); }
.at-footer__blurb {
  font-size: var(--at-t-sm);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.55);
}

.at-footer__col { display: flex; flex-direction: column; gap: 0.75rem; }
.at-footer__title {
  font-size: var(--at-t-micro);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}
.at-footer__links { display: flex; flex-direction: column; gap: 0.5rem; }
.at-footer__links a {
  font-size: var(--at-t-sm);
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  transition: color var(--at-dur) var(--at-ease);
}
.at-footer__links a:hover { color: var(--at-white); }

.at-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding-top: 2rem;
}
.at-footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.25rem;
  font-size: var(--at-t-xs);
  color: rgba(255, 255, 255, 0.45);
}
.at-footer__legal a { text-decoration: none; color: rgba(255, 255, 255, 0.62); }
.at-footer__legal a:hover { color: var(--at-white); }

.at-social { display: flex; gap: 0.5rem; }
.at-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.125rem;
  height: 2.125rem;
  border: 1px solid var(--at-border-light-medium);
  border-radius: var(--at-r);
  color: rgba(255, 255, 255, 0.72);
  transition: all var(--at-dur) var(--at-ease);
}
.at-social a:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--at-border-light-strong);
  color: var(--at-white);
}

.at-footer__note {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--at-border-light);
  font-size: var(--at-t-xs);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.38);
  max-width: 52rem;
}

/* ==========================================================================
   16  MOTION & REVEAL
   ========================================================================== */

[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--at-dur-slow) var(--at-ease-out),
              transform var(--at-dur-slow) var(--at-ease-out);
  transition-delay: calc(var(--i, 0) * 70ms);
}
[data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* Meter fill animates once its container reveals */
[data-reveal] .at-meter__fill { transform: scaleX(0); }
[data-reveal].is-in .at-meter__fill {
  transform: scaleX(1);
  transition: transform 1s var(--at-ease-out) 160ms;
}

/* ==========================================================================
   17  RESPONSIVE
   ========================================================================== */

@media (max-width: 1180px) {
  :root { --at-gutter: 2rem; }

  .at-footer__top { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .at-footer__brand { grid-column: 1 / -1; max-width: 32rem; }

  /* .at-quotes and .at-posts are auto-fit — they reflow on their own, and a
     fixed column count here would strand a single card again. */
  .at-pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .at-stats   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .at-stats > *:nth-child(2) { border-inline-end: 0; }
  .at-stats > *:nth-child(-n+2) { border-bottom: 1px solid var(--at-border-medium); }

  .at-legal { grid-template-columns: 13rem minmax(0, 1fr); gap: 2.5rem; }
}

/* Nav collapses to a drawer */
@media (max-width: 1023px) {
  .at-nav__links { display: none; }
  .at-nav__burger { display: inline-flex; }
  .at-nav__actions .at-btn--desktop { display: none; }
  .at-nav__bar { justify-content: space-between; gap: 1rem; }

  .at-split { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .at-split--reverse .at-split__text,
  .at-split--reverse .at-split__visual { order: initial; }

  .at-post--featured { grid-template-columns: minmax(0, 1fr); }

  .at-legal { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .at-legal__nav {
    position: static;
    max-height: none;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.375rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--at-border-medium);
  }
  .at-legal__nav a {
    border: 1px solid var(--at-border-medium);
    border-radius: var(--at-r-pill);
  }
}

@media (max-width: 767px) {
  :root {
    --at-gutter: 1.25rem;
    --at-t-display: clamp(2.375rem, 1.4rem + 7vw, 3.25rem);
  }

  .at-grid-2, .at-grid-3, .at-grid-4 { grid-template-columns: minmax(0, 1fr); }

  .at-pillars,
  .at-quotes,
  .at-posts,
  .at-metrics { grid-template-columns: minmax(0, 1fr); }

  .at-stats { grid-template-columns: minmax(0, 1fr); }
  .at-stats > * {
    border-inline-end: 0;
    border-bottom: 1px solid var(--at-border-medium);
    padding: 1.25rem 1.5rem;
  }
  .at-stats > *:last-child { border-bottom: 0; }

  .at-steps { grid-template-columns: minmax(0, 1fr); }
  .at-step {
    border-inline-end: 0;
    border-bottom: 1px solid var(--at-border-medium);
  }
  .at-step:last-child { border-bottom: 0; }

  .at-form__row { grid-template-columns: minmax(0, 1fr); }

  .at-hero__actions,
  .at-cta__actions { flex-direction: column; align-self: stretch; }
  .at-hero__actions .at-btn,
  .at-cta__actions .at-btn { width: 100%; }

  .at-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }

  .at-quote__foot { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
  .at-quote__metric { text-align: start; }

  /* Two columns: content on the left, price then status stacked on the right. */
  .at-mock__row { grid-template-columns: minmax(0, 1fr) auto; gap: 0.375rem 0.75rem; align-items: start; }
  .at-mock__row .at-chip { display: none; }
  .at-mock__row--head { display: none; }
  .at-mock__row > .at-tag { grid-column: 2; justify-self: end; }
  .at-mock__price { text-align: end; white-space: nowrap; }

  .at-marquee__track { gap: 2.25rem; animation-duration: 30s; }

  .at-card, .at-pillar, .at-quote, .at-post, .at-metric { padding: 1.25rem; }
  .at-cta { border-radius: var(--at-r-lg); }
}

@media (max-width: 419px) {
  .at-footer__top { grid-template-columns: minmax(0, 1fr); }
}

/* Very small handsets (≤320px): logo + "Get free access" + burger no longer fit
   on one bar. Drop the inline CTA — the drawer carries both actions. */
@media (max-width: 359px) {
  .at-nav__actions .at-btn { display: none; }
  .at-nav__bar { padding-inline-start: 1rem; }
  .at-logo__word { font-size: 1rem; }
}

/* ==========================================================================
   18  PRINT & REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  [data-reveal] { opacity: 1; transform: none; }
  [data-reveal] .at-meter__fill { transform: scaleX(1); }
  .at-marquee__track { animation: none; }
}

@media print {
  .at-nav, .at-drawer, .at-footer, .at-cta, .at-mesh, .at-grain, .at-marquee { display: none !important; }
  .at-main { padding-top: 0; }
  body { background: #fff; color: #000; }
  .at-prose { max-width: none; }
  a[href^="http"]::after { content: ' (' attr(href) ')'; font-size: 0.8em; color: #555; }
}

/* --- Decorative illustrations ------------------------------------------------
   Inline SVG, so it inherits the tokens in §01 and needs no separate asset.
   Sized in rem against the text it sits above rather than a fixed pixel width,
   so it scales with the type ramp instead of fighting it. */

.at-illus {
  display: block;
  width: 100%;
  height: auto;
}

/* ==========================================================================
   19  RTL & SCRIPTS
   --------------------------------------------------------------------------
   The layout is written in logical properties, so switching direction is
   almost entirely free. What remains are the three things CSS cannot express
   logically — transforms, transform-origin and glyph direction in icons — plus
   the Arabic type stack.

   Everything here keys off [dir="rtl"] on <html>, which the base layout emits
   from the locale. Adding another RTL language (Hebrew, Farsi, Urdu) needs no
   further CSS: give it dir: 'rtl' in config('locales') and it inherits all of
   this. A new script only needs a font stack and one :lang() rule below.
   ========================================================================== */

[dir='rtl'] {
  --at-dir:   -1;
  --at-start: right;
}

/* --- Type ----------------------------------------------------------------
   Keyed to :lang(ar) rather than [dir='rtl'] because the font follows the
   script, not the direction — the two are separate concerns. */
:lang(ar) {
  font-family: var(--at-font-ar);
  /* Arabic has no capitals; letter-spacing breaks the cursive joins that make
     the script legible, so the Latin tracking scale is neutralised. */
  letter-spacing: normal;
}

:lang(ar) h1, :lang(ar) h2, :lang(ar) h3,
:lang(ar) h4, :lang(ar) h5, :lang(ar) h6,
:lang(ar) .at-h1, :lang(ar) .at-h2, :lang(ar) .at-h3,
:lang(ar) .at-h4, :lang(ar) .at-h5,
:lang(ar) .at-hero__title,
:lang(ar) .at-caps-display,
:lang(ar) .at-post__title {
  font-family: var(--at-font-ar);
  letter-spacing: normal;
  /* Arabic ascenders and descenders need more room than Latin at the same
     size, so the tight display leading is relaxed. */
  line-height: 1.3;
}

/* Uppercase means nothing in Arabic and turns eyebrows into noise. */
:lang(ar) .at-eyebrow,
:lang(ar) .at-tag,
:lang(ar) .at-table thead th,
:lang(ar) .at-drawer__sub,
:lang(ar) .at-mega__title,
:lang(ar) .at-footer__title,
:lang(ar) .at-step__n {
  text-transform: none;
  letter-spacing: normal;
}

/* Latin runs inside Arabic copy — brand names, IATA codes, prices, URLs. */
:lang(ar) .at-logo__word,
:lang(ar) .at-code,
:lang(ar) [dir='ltr'] {
  font-family: var(--at-font);
}

/* --- Icons ---------------------------------------------------------------
   Only icons marked at-icon--dir mean "forward"; a clock or a plane must not
   be mirrored. Icons::get() applies the class from a small allow-list. */
[dir='rtl'] .at-icon--dir { transform: scaleX(-1); }

/* The button and card hover nudges compose with the mirror, so both the flip
   and the movement have to be restated together — a transform is one value. */
[dir='rtl'] .at-btn:hover .at-icon--dir:last-child { transform: scaleX(-1) translateX(2px); }
[dir='rtl'] .at-card--link:hover .at-card__arrow { transform: scaleX(-1) translate(2px, -2px); }

/* --- Components that carry a physical direction --------------------------- */

/* Select chevron sits on the trailing edge in both directions. */
[dir='rtl'] .at-select { background-position: left 0.875rem center; }

/* Decorative meshes are asymmetric compositions; mirroring keeps the visual
   weight on the same side as the text it sits behind. */
[dir='rtl'] .at-mesh { transform: scaleX(-1); }

/* The takeoff illustration reads as forward motion, so it has to travel in the
   reading direction — an aircraft flying right-to-left reads as arriving, not
   departing. Mirroring the whole SVG is correct here precisely because it
   carries no text. */
[dir='rtl'] .at-illus--takeoff { transform: scaleX(-1); }

/* The marquee scrolls away from the reading edge, so it reverses too. */
[dir='rtl'] .at-marquee__track { animation-direction: reverse; }

/* Numbers stay LTR even inside Arabic — a price or a stat is a number, not
   prose, and bidi would otherwise reorder "500+" and "24/7". */
[dir='rtl'] .at-num,
[dir='rtl'] .at-stat__value,
[dir='rtl'] .at-metric__v,
[dir='rtl'] .at-quote__metric-v,
[dir='rtl'] .at-mock__price,
[dir='rtl'] .at-step__n {
  direction: ltr;
  unicode-bidi: isolate;
}
[dir='rtl'] .at-stat__value,
[dir='rtl'] .at-metric__v { text-align: start; }

/* --- Language switcher ---------------------------------------------------- */

.at-lang { position: relative; flex: none; }

.at-lang__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  height: 2.375rem;
  padding-inline: 0.625rem;
  background: transparent;
  border: 1px solid var(--at-border-medium);
  border-radius: var(--at-r);
  color: var(--at-ink-60);
  font-family: inherit;
  font-size: var(--at-t-xs);
  cursor: pointer;
  transition: border-color var(--at-dur) var(--at-ease), color var(--at-dur) var(--at-ease);
}
.at-lang__btn:hover { border-color: var(--at-border-strong); color: var(--at-ink); }
.at-lang__btn .at-icon { width: 0.9375rem; height: 0.9375rem; }
.at-lang__btn .at-icon:last-child {
  width: 0.75rem; height: 0.75rem;
  transition: transform var(--at-dur) var(--at-ease);
}
.at-lang[data-open='true'] .at-lang__btn .at-icon:last-child { transform: rotate(180deg); }
.at-lang[data-open='true'] .at-lang__btn { border-color: var(--at-border-strong); color: var(--at-ink); }

.at-lang__code { font-weight: 500; letter-spacing: 0.02em; }

.at-lang__menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  inset-inline-end: 0;
  z-index: 20;
  min-width: 9.5rem;
  display: flex;
  flex-direction: column;
  padding: 0.3125rem;
  background: rgba(251, 250, 249, 0.96);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--at-border-medium);
  border-radius: var(--at-r-lg);
  box-shadow: var(--at-shadow-lg);

  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--at-dur) var(--at-ease),
              transform var(--at-dur) var(--at-ease),
              visibility var(--at-dur) var(--at-ease);
}
.at-lang[data-open='true'] .at-lang__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.at-lang__opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 0.625rem;
  border-radius: var(--at-r-sm);
  font-size: var(--at-t-sm);
  color: var(--at-ink-60);
  text-decoration: none;
  transition: background-color var(--at-dur) var(--at-ease), color var(--at-dur) var(--at-ease);
}
.at-lang__opt:hover { background: rgba(17, 17, 17, 0.05); color: var(--at-ink); }
.at-lang__opt[aria-current='true'] { color: var(--at-ink); font-weight: 500; }
.at-lang__opt .at-icon { width: 0.9375rem; height: 0.9375rem; color: var(--at-accent); flex: none; }

/* Drawer variant — always visible, no popover. */
.at-drawer__langs { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0.25rem 0 0.75rem; }
.at-drawer__lang {
  padding: 0.5rem 0.875rem;
  border: 1px solid var(--at-border-medium);
  border-radius: var(--at-r);
  font-size: var(--at-t-sm);
  color: var(--at-ink-60);
  text-decoration: none;
}
.at-drawer__lang[aria-current='true'] {
  border-color: var(--at-border-strong);
  color: var(--at-ink);
  font-weight: 500;
}

/* On small screens the drawer carries the switcher, so the bar drops it. */
@media (max-width: 359px) {
  .at-lang { display: none; }
}