/* AI Pay brand layer for the marketing site.
 * Tokens and the liquid material are copied verbatim from the product's brand.css
 * ("One blue hue; refraction changes lightness, never the semantic state.").
 * Only the product-page selectors (.oauth-page …) were swapped for site classes. */
:root {
  color-scheme: light dark;
  --page: #f1f7fc;
  --surface: #fbfdff;
  --surface-subtle: #e8f0f8;
  --surface-strong: #dce8f4;
  --ink: #192735;
  --muted: #536474;
  --muted-strong: #3d5368;
  --border: #cedcea;
  --border-strong: #788ea5;
  --accent: #019ff9;
  --accent-hover: #33acfc;
  --accent-soft: #d4e9fe;
  --on-accent: #192735;
  --link: #0b5fcc;
  --warning: #85500f;
  --warning-soft: #faf0da;
  --danger: #a42c31;
  --danger-soft: #fbe9e8;
  --success: #0b7744;
  --success-soft: #ddf1e5;
  --shadow-dialog: 0 8px 20px rgb(17 40 66 / 5%), 0 24px 64px rgb(17 40 66 / 13%);
  --motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --radius-sm: 10px;
  --radius-control: 16px;
  --radius-popover: 24px;
  --radius-panel: 24px;
  --radius-surface: 28px;
  --glass-tint: 76%;
  --glass-clear: 62%;
  --canvas-light: rgb(1 159 249 / 13%);
  --canvas-shade: rgb(11 95 204 / 6%);
  --glass-panel-bg: rgb(251 253 255 / 56%);
  --glass-panel-wash: linear-gradient(
    132deg,
    rgb(255 255 255 / 36%),
    transparent 42%,
    rgb(1 159 249 / 3%)
  );
  --glass-popover-bg: rgb(251 253 255 / 90%);
  --glass-bar-bg: rgb(246 251 255 / 70%);
  --glass-input-bg: rgb(255 255 255 / 62%);
  --glass-edge: rgb(255 255 255 / 82%);
  --glass-line: rgb(41 86 128 / 13%);
  --glass-inset: inset 0 1px 0 rgb(255 255 255 / 94%), inset 0 -1px 0 rgb(255 255 255 / 36%);
  --glass-elevation: 0 12px 32px -20px rgb(14 52 92 / 25%), 0 2px 5px rgb(14 52 92 / 3%);
  --glass-rim: rgb(255 255 255 / 78%);
  --glass-highlight: rgb(255 255 255 / 60%);
  --glass-neutral-selection: rgb(11 146 240 / 24%);
  --selection-ink: #0b4583;
  --selection-border: rgb(11 105 190 / 46%);
  --selection-solid: #c5e2fe;
  --glass-shadow: rgb(9 98 180 / 14%);
  /* The product meter's "on hold" segment (styles.css .seg-held). */
  --held: #d09b2c;
}
@media (prefers-color-scheme: dark) {
  :root {
    /* Neutral charcoal carries the material; blue marks actions; semantic state keeps its own colours. */
    --page: #17191c;
    --surface: #25282c;
    --surface-subtle: #202327;
    --surface-strong: #30343a;
    --ink: #f2f4f7;
    --muted: #aab2ba;
    --muted-strong: #c8cdd3;
    --border: #3d434a;
    --border-strong: #69727d;
    --accent: #49b5fe;
    --accent-hover: #74c6ff;
    --accent-soft: #22405c;
    --on-accent: #192735;
    --link: #8cc8ff;
    --warning: #f0c583;
    --warning-soft: #41331f;
    --danger: #ffb4b4;
    --danger-soft: #45282c;
    --success: #7ae6af;
    --success-soft: #203e2e;
    --shadow-dialog: 0 8px 20px rgb(0 0 0 / 16%), 0 24px 64px rgb(0 0 0 / 30%);
    --glass-tint: 82%;
    --glass-clear: 68%;
    --canvas-light: rgb(255 255 255 / 3%);
    --canvas-shade: rgb(0 0 0 / 8%);
    --glass-panel-bg: rgb(42 46 52 / 42%);
    --glass-panel-wash: linear-gradient(
      132deg,
      rgb(255 255 255 / 8%),
      transparent 42%,
      rgb(255 255 255 / 2%)
    );
    --glass-popover-bg: rgb(35 39 44 / 94%);
    --glass-bar-bg: rgb(49 54 61 / 58%);
    --glass-input-bg: rgb(255 255 255 / 6%);
    --glass-edge: rgb(255 255 255 / 18%);
    --glass-line: rgb(255 255 255 / 12%);
    --glass-inset: inset 0 1px 0 rgb(255 255 255 / 14%), inset 0 -1px 0 rgb(255 255 255 / 4%);
    --glass-elevation: 0 14px 34px -20px rgb(0 0 0 / 48%), 0 2px 5px rgb(0 0 0 / 6%);
    --glass-rim: rgb(255 255 255 / 34%);
    --glass-highlight: rgb(255 255 255 / 18%);
    --glass-neutral-selection: rgb(73 181 254 / 23%);
    --selection-ink: #cde6ff;
    --selection-border: rgb(140 200 255 / 54%);
    --selection-solid: #254766;
    --glass-shadow: rgb(0 0 0 / 24%);
  }
}

/* ── Liquid material (verbatim recipe) ───────────────────────────────────────
 * Pseudo-elements refract the background; labels keep their original rendering. */
.liquid-surface,
.liquid-selection {
  position: relative;
  isolation: isolate;
  border-radius: 999px;
  --liquid-body: color-mix(in srgb, var(--surface) var(--glass-clear), transparent);
  --liquid-reflection: #ffffff38;
}
.liquid-button,
.liquid-selection {
  --liquid-body: color-mix(in srgb, var(--accent) var(--glass-tint), transparent);
}
.liquid-surface::before,
.liquid-selection::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(ellipse 38% 100% at 10% -15%, var(--liquid-reflection), transparent 70%),
    linear-gradient(160deg, transparent 60%, rgb(9 40 72 / 6%)), var(--liquid-body);
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
  backdrop-filter: var(--liquid-optics, blur(12px)) saturate(1.1);
  box-shadow:
    inset 0 1px 1px var(--glass-rim),
    inset 0 -1px 1px var(--glass-highlight),
    inset 2px 0 5px #ffffff3d,
    inset -2px 0 5px #ffffff33,
    0 3px 5px rgb(20 52 84 / 5%),
    0 12px 20px -9px var(--glass-shadow);
}
.liquid-surface::after,
.liquid-selection::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 1px;
  border: 1px solid var(--glass-edge);
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(ellipse 9% 40% at 5% 22%, #ffffffcc, #ffffff26 45%, transparent 75%),
    radial-gradient(ellipse 6% 38% at 97% 75%, #ffffffa8, transparent 78%),
    radial-gradient(ellipse 62% 9% at 54% 98%, #ffffffe6, #ffffff6b 30%, transparent 78%),
    radial-gradient(
      ellipse 42% 90% at var(--liquid-x, 28%) var(--liquid-y, 0%),
      #ffffff0d,
      transparent 72%
    );
}
.liquid-nav::after {
  opacity: 0.45;
}
.liquid-nav {
  position: relative;
  padding: 5px;
}
.liquid-selection {
  --liquid-optics: blur(8px);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  pointer-events: none;
}
.liquid-nav > :is(a, button) {
  position: relative;
  z-index: 1;
}
.liquid-optics-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}
@media (prefers-reduced-transparency: reduce) {
  .liquid-surface,
  .liquid-selection {
    --liquid-body: var(--surface);
  }
  .liquid-button,
  .liquid-selection {
    --liquid-body: var(--accent);
  }
  .liquid-surface::before,
  .liquid-selection::before {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .liquid-surface::after,
  .liquid-selection::after {
    display: none;
  }
}
@media (forced-colors: active) {
  .liquid-surface::before,
  .liquid-surface::after,
  .liquid-selection {
    display: none;
  }
  .liquid-surface {
    border: 1px solid ButtonText;
  }
}

/* ── Brand symbol (verbatim) ─────────────────────────────────────────────── */
.brand-symbol {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 11px;
  color: var(--on-accent);
  background: var(--accent);
  box-shadow: inset 0 1px 0 var(--glass-rim);
}
.brand-symbol svg {
  width: 18px;
  height: 18px;
}

/* ── Glass panel / bar (the product's .card / .idp / console panel recipes) ── */
.glass {
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius-surface);
  background: var(--glass-panel-wash), var(--glass-panel-bg);
  box-shadow: var(--glass-inset), var(--glass-elevation);
}
.glass-blur {
  -webkit-backdrop-filter: blur(20px) saturate(1.08);
  backdrop-filter: blur(20px) saturate(1.08);
}
.glass-bar {
  border: 1px solid var(--glass-edge);
  background: var(--glass-bar-bg);
  box-shadow: var(--glass-inset), var(--glass-elevation);
  -webkit-backdrop-filter: blur(22px);
  backdrop-filter: blur(22px);
}
@media (prefers-reduced-transparency: reduce), (forced-colors: active) {
  .glass,
  .glass-bar {
    background: var(--surface);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}