/*
 * GLASS (2026-10-07): the lender- and partner-first home (`/`) and the consumer
 * page (`/refinance`) of a brand on `landing.layout` "glass" (ezauto).
 *
 * Served from /public and linked by the pages that use it
 * (src/app/(public)/_glass/assets.ts: bump the `v` query on every edit).
 *
 * Its own system (DESIGN.md "Glass"), from direction 2 of the lender-site board
 * Victor picked (~/.gstack/projects/brain/designs/ezauto-lender-site-20261007/),
 * plus the "flare" pass of the same day: drifting panes and a breathing glow,
 * colour orbs, frosted cards, a deep-indigo band, scroll reveals.
 * Every rule is scoped under `.gl`, the wrapper only these pages render, so
 * nothing here can reach the funnel, the compliance pages, ops or the painted
 * pages, and nothing here may name a brand (tests/marketing-assets.test.ts).
 *
 * MOTION RULES: transform and opacity only (no layout, so no CLS); every
 * animation lives inside `prefers-reduced-motion: no-preference`, so reduced
 * motion is fully static with all content visible; scroll reveals use CSS
 * scroll-driven animations inside @supports, so a browser without them just
 * shows the content. No script.
 *
 * Contrast (measured on the tokens): ink #121833 on #EEF0F4 15.9:1; muted
 * #4F5872 on #EEF0F4 6.4:1, on white 7.2:1; white on accent #3730A3 10.4:1;
 * on the dark band and the footer, white on #121833 17.4:1 and #C7CAE6 on
 * #1E1B5C 9.6:1 (11.3:1 on #121833).
 * Hero copy never sits on the dark panes.
 *
 * The funnel's globals.css + theme.css still load first (same route group), so
 * the first block neutralises the element-level rules they set that this
 * system does not want: the 24px body gutter, the bone ground, the 640px column
 * on header/main/footer, `img { max-width: 100% }` and the green link accent.
 */

body:has(> .gl) {
  padding: 0;
  background: #eef0f4;
}

.gl {
  --bg: #eef0f4;
  --surface: #f8f9fb;
  --ink: #121833;
  --muted: #4f5872;
  --accent: #3730a3;
  --accent-2: #2d2789; /* hover */
  --accent-ink: #ffffff;
  --accent-soft: #e2e3f3; /* quiet indigo panel */
  --line: #d7dbe5;
  --deep: #121833;
  --deep-2: #1e1b5c;
  --on-deep: #ffffff;
  --on-deep-muted: #c7cae6;
  --glass-fill: rgba(255, 255, 255, 0.58);
  --glass-edge: rgba(255, 255, 255, 0.85);
  --glass-shadow: 0 1px 0 rgba(18, 24, 51, 0.04), 0 30px 70px -36px rgba(30, 27, 92, 0.45);
  --font: var(--font-geist), ui-sans-serif, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --gutter: clamp(16px, 5.6vw, 88px);
  --max: 1240px;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

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

.gl :is(header, main, footer) {
  max-width: none;
  margin-inline: 0;
}

.gl img {
  display: block;
  max-width: none;
}

.gl a {
  color: inherit;
}

.gl :is(p, h1, h2, h3, dl, dd, ol, ul, figure) {
  margin: 0;
}

.gl :is(ol, ul) {
  padding: 0;
  list-style: none;
}

.gl :focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

.gl .wrap {
  position: relative;
  width: 100%;
  max-width: calc(var(--max) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ---------- frosted glass ---------- */
.gl .glass,
.gl .rec {
  background: var(--glass-fill);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  backdrop-filter: blur(22px) saturate(160%);
  border-radius: 22px;
}

/* ---------- colour orbs ---------- */
.gl .orb-host,
.gl .band-dark {
  position: relative;
  isolation: isolate;
}

.gl .orbs {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.gl .block > .orbs--light {
  /* the orbs are clipped at the section box; fade them out at the top and
     bottom so a section never ends on a hard tinted line (Victor 2026-10-08,
     exposed once the door panel stopped covering the contact section's edge) */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 70%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 70%, transparent 100%);
}

.gl .orbs span {
  position: absolute;
  border-radius: 50%;
  filter: blur(48px);
  opacity: 0.9;
}

.gl .orbs--light span:nth-child(1) {
  width: 46vmax;
  height: 46vmax;
  right: -14vmax;
  top: -18vmax;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.32), rgba(99, 102, 241, 0) 65%);
}

.gl .orbs--light span:nth-child(2) {
  width: 34vmax;
  height: 34vmax;
  left: -12vmax;
  bottom: -16vmax;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.24), rgba(139, 92, 246, 0) 65%);
}

.gl .orbs--light span:nth-child(3) {
  width: 22vmax;
  height: 22vmax;
  left: 38%;
  top: 30%;
  background: radial-gradient(circle, rgba(129, 140, 248, 0.2), rgba(129, 140, 248, 0) 65%);
}

.gl .orbs--dark span:nth-child(1) {
  width: 52vmax;
  height: 52vmax;
  right: -18vmax;
  top: -26vmax;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.55), rgba(99, 102, 241, 0) 62%);
}

.gl .orbs--dark span:nth-child(2) {
  width: 40vmax;
  height: 40vmax;
  left: -16vmax;
  bottom: -22vmax;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.45), rgba(139, 92, 246, 0) 62%);
}

.gl .orbs--dark span:nth-child(3) {
  width: 26vmax;
  height: 26vmax;
  left: 42%;
  top: 40%;
  background: radial-gradient(circle, rgba(165, 180, 252, 0.22), rgba(165, 180, 252, 0) 62%);
}

/* ---------- nav ---------- */
.gl .nav {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 84px;
}

/* The approved logo artwork (inline SVG, sized by its viewBox): 28px tall is
   ~227px wide, well over the kit's 120px minimum for the horizontal lockup. */
.gl .wm--art {
  display: inline-flex;
  align-items: center;
  padding: 10px 0;
}

.gl .logo-art,
.gl .logo-art svg {
  display: block;
  height: 28px;
  width: auto;
}

.gl .wm {
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.02em;
  text-decoration: none;
  color: var(--ink);
  padding: 12px 0;
  white-space: nowrap;
}

/* The links sit on a frosted pill: on wide screens the nav runs over the dark
   panes of the art, and the pill keeps them at full ink contrast. */
.gl .links {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  font-size: 15px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.7);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
}

.gl .links a,
.gl .menu a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 999px;
  color: var(--ink);
  font-weight: 500;
  text-decoration: none;
}

.gl .links a:hover {
  background: rgba(18, 24, 51, 0.06);
}

.gl .links a.door-link,
.gl .menu a.door-link {
  color: var(--ink);
  font-weight: 600;
}

.gl .links a.door-link {
  margin-left: 4px;
  padding: 0 18px;
  background: var(--ink);
  color: #fff;
}

.gl .links a.door-link:hover {
  background: #242c52;
}

.gl .menu {
  display: none;
  position: relative;
}

.gl .menu summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
}

.gl .menu summary::-webkit-details-marker {
  display: none;
}

.gl .menu ul {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 232px;
  padding: 8px;
  display: grid;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 24px 48px -24px rgba(18, 24, 51, 0.35);
}

.gl .menu a {
  display: flex;
  min-height: 48px;
  font-size: 16px;
  color: var(--ink);
}

/* ---------- hero ---------- */
.gl .hero {
  --copy: min(560px, 41vw);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: clamp(640px, 88svh, 800px);
  padding-bottom: clamp(48px, 8vh, 96px);
}

/* The art box starts just right of the copy column (inside the centred wrap),
   covers the rest of the hero, and fades in from its left edge so the image's
   own ground melts into the page's. A size container, so the glow over the
   disc can be placed in `cqh` (the image is scaled to the box height). */
.gl .art {
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  right: 0;
  left: calc(max(var(--gutter), (100% - var(--max)) / 2) + var(--copy) + 8px);
  container-type: size;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%);
  mask-image: linear-gradient(90deg, transparent 0, #000 22%);
}

.gl .art .scene {
  position: absolute;
  inset: 0;
  transform-origin: 70% 50%;
}

.gl .art picture,
.gl .art img {
  display: block;
  width: 100%;
  height: 100%;
}

.gl .art img {
  object-fit: cover;
  object-position: 100% 50%;
}

/* The disc sits ~0.41 box-heights from the right edge, half-way down, radius
   ~0.27 box-heights (d2-glass.jpg is scaled to the box height). */
.gl .art .glow {
  position: absolute;
  right: 10cqh;
  top: 19cqh;
  width: 62cqh;
  height: 62cqh;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(236, 242, 255, 0.85) 0%, rgba(199, 210, 254, 0.35) 38%, rgba(199, 210, 254, 0) 68%);
  mix-blend-mode: screen;
  opacity: 0.45;
  pointer-events: none;
}

.gl .hero-grid {
  display: grid;
  grid-template-columns: minmax(0, var(--copy)) minmax(0, 1fr);
  align-items: center;
  gap: 48px;
  padding-top: clamp(32px, 8vh, 104px);
}

.gl .hero-grid--solo {
  grid-template-columns: minmax(0, var(--copy));
}

.gl h1 {
  font-weight: 600;
  font-size: clamp(40px, 4.4vw, 66px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.gl .lede {
  margin-top: 24px;
  max-width: 46ch;
  font-size: clamp(17px, 1.3vw, 19px);
  line-height: 1.5;
  color: var(--muted);
}

.gl .ctas {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
}

.gl .go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 26px;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font: 600 16px/1 var(--font);
  letter-spacing: -0.005em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 12px 28px -14px rgba(55, 48, 163, 0.75);
}

.gl .go:hover {
  background: var(--accent-2);
}

.gl .go:active {
  transform: translateY(1px);
}

.gl .go--quiet {
  background: #fff;
  color: var(--accent);
  border: 1.5px solid var(--accent);
  box-shadow: none;
}

.gl .go--quiet:hover {
  background: var(--accent-soft);
}

.gl .door {
  font-size: 15px;
  color: var(--muted);
}

.gl .door a {
  color: var(--ink);
  font-weight: 600;
  text-underline-offset: 4px;
  text-decoration-thickness: 1.5px;
  display: inline-block;
  padding: 12px 0;
  margin: -12px 0;
}

/* ---------- the sample application record (hero product visual) ---------- */
.gl .rec {
  justify-self: end;
  width: min(100%, 440px);
  padding: 22px 22px 18px;
  background: rgba(255, 255, 255, 0.62);
}

.gl .rec-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(18, 24, 51, 0.1);
}

.gl .rec-kicker {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.gl .rec-live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

.gl .rec-live i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4f46e5;
  box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.18);
}

.gl .rec-rows {
  display: grid;
  margin-top: 6px;
}

.gl .rec-rows li {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  column-gap: 12px;
  align-items: center;
  padding: 11px 0;
  border-bottom: 1px solid rgba(18, 24, 51, 0.07);
}

.gl .rec-rows li:last-child {
  border-bottom: 0;
}

.gl .tick {
  grid-row: span 2;
  position: relative;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent);
}

.gl .tick::after {
  content: "";
  position: absolute;
  left: 9px;
  top: 6px;
  width: 6px;
  height: 11px;
  border: solid #fff;
  border-width: 0 2.25px 2.25px 0;
  transform: rotate(45deg);
}

.gl .rec-label {
  font-weight: 600;
  font-size: 15px;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.gl .rec-detail {
  font-size: 13.5px;
  line-height: 1.35;
  color: var(--muted);
}

.gl .rec-rows .rec-fit {
  grid-template-columns: 26px minmax(0, 1fr) auto;
  column-gap: 12px;
}

.gl .rec-fit .tick {
  grid-row: auto;
  background: #1f7a4d; /* the one "pass" colour; white tick 5.4:1 */
}

.gl .rec-pill {
  padding: 5px 12px;
  border-radius: 999px;
  background: #1f7a4d;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
}

.gl .rec-note {
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--muted);
}

/* ---------- statement: the big type moment ---------- */
.gl .statement {
  border-top: 1px solid var(--line);
  padding: clamp(56px, 8vw, 112px) 0 clamp(48px, 6vw, 88px);
}

.gl .kicker {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.gl .mega {
  margin-top: 18px;
  font-weight: 600;
  font-size: clamp(44px, 7.4vw, 112px);
  line-height: 0.98;
  letter-spacing: -0.05em;
  text-wrap: balance;
}

.gl .mega span {
  display: inline-block;
}

.gl .mega .tint {
  color: var(--accent);
}

.gl .trio {
  margin-top: clamp(32px, 4vw, 56px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}

.gl .trio dt {
  font-weight: 600;
  font-size: 21px;
  letter-spacing: -0.015em;
}

.gl .trio dd {
  margin-top: 6px;
  color: var(--muted);
  font-size: 16px;
  max-width: 34ch;
}

/* ---------- the deep-indigo band ---------- */
.gl .band-dark {
  background: linear-gradient(160deg, var(--deep) 0%, var(--deep-2) 100%);
  color: var(--on-deep);
  padding: clamp(72px, 9vw, 128px) 0;
  overflow: hidden;
}

.gl .band-dark h2 {
  font-size: clamp(36px, 5vw, 72px);
  letter-spacing: -0.04em;
}

.gl .band-dark .sub {
  color: var(--on-deep-muted);
  font-size: clamp(17px, 1.4vw, 20px);
}

.gl .numbered {
  margin-top: clamp(40px, 5vw, 72px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.gl .glass-dark {
  padding: 28px 28px 30px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
}

.gl .num {
  display: block;
  font-weight: 600;
  font-size: clamp(64px, 7vw, 112px);
  line-height: 0.9;
  letter-spacing: -0.06em;
  background: linear-gradient(180deg, #ffffff 0%, #a5b4fc 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.gl .numbered h3 {
  margin-top: 22px;
  font-weight: 600;
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.gl .numbered p {
  margin-top: 8px;
  color: var(--on-deep-muted);
  font-size: 16px;
}

/* ---------- sections ---------- */
.gl .block {
  border-top: 1px solid var(--line);
  padding: clamp(56px, 7vw, 104px) 0;
}

.gl .band-dark + .block {
  border-top: 0;
}

.gl .split {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
}

.gl h2 {
  font-weight: 600;
  font-size: clamp(30px, 3.4vw, 48px);
  line-height: 1.06;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.gl .sub {
  margin-top: 14px;
  color: var(--muted);
  font-size: 17px;
  max-width: 40ch;
}

.gl .sub a {
  color: var(--ink);
  font-weight: 600;
  text-underline-offset: 3px;
}

.gl .list.glass {
  padding: 10px 26px;
}

.gl .list .item {
  padding: 18px 0;
  border-top: 1px solid rgba(18, 24, 51, 0.08);
}

.gl .list .item:first-child {
  border-top: 0;
}

.gl .list dt {
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.01em;
}

.gl .list dd {
  margin-top: 4px;
  color: var(--muted);
  font-size: 16px;
  max-width: 60ch;
}

.gl .list dd a {
  color: var(--ink);
  text-underline-offset: 3px;
}

.gl .card {
  display: grid;
  gap: 8px;
  justify-items: start;
  padding: 30px;
  color: var(--muted);
  font-size: 16px;
}

.gl .card .who {
  color: var(--ink);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.015em;
}

.gl .card a:not(.go) {
  color: var(--ink);
  text-underline-offset: 3px;
  display: inline-block;
  padding: 12px 0;
  margin: -12px 0;
}

.gl .card .go {
  margin-top: 12px;
}

.gl .faq details {
  border-top: 1px solid var(--line);
}

.gl .faq details:first-child {
  border-top: 0;
}

.gl .faq summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  min-height: 60px;
  padding: 14px 0;
  font-weight: 600;
  font-size: 18px;
  cursor: pointer;
}

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

.gl .faq summary::after {
  content: "+";
  flex: none;
  font-weight: 400;
  font-size: 24px;
  line-height: 1;
  color: var(--accent);
}

.gl .faq details[open] summary::after {
  content: "\2212";
}

.gl .faq details p {
  padding: 0 0 20px;
  color: var(--muted);
  font-size: 16px;
  max-width: 62ch;
}

.gl .faq details p a {
  color: var(--ink);
  text-underline-offset: 3px;
}

/* ---------- the door band ---------- */
.gl .door-band {
  /* the panel floats: the same air above it as below, never flush against
     the section before (Victor 2026-10-08) */
  padding: clamp(56px, 7vw, 96px) 0;
}

.gl .door-panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px 48px;
  padding: clamp(32px, 4vw, 52px) clamp(24px, 4vw, 52px);
  border-radius: 28px;
  background:
    radial-gradient(ellipse 60% 120% at 100% 0%, rgba(55, 48, 163, 0.16), rgba(55, 48, 163, 0) 70%),
    var(--accent-soft);
}

.gl .door-copy {
  max-width: 560px;
}

/* Optional art spot (flag GLASS_DOOR_ART): a blurred echo of the hero file,
   served as-is; the blur and the fade are CSS. */
.gl .door-art {
  position: absolute;
  z-index: -1;
  right: -6%;
  top: 50%;
  width: auto;
  height: 190%;
  transform: translateY(-50%);
  filter: blur(6px) saturate(115%);
  opacity: 0.55;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 45%);
  mask-image: linear-gradient(90deg, transparent 0, #000 45%);
  pointer-events: none;
}

.gl .door-panel .go {
  position: relative;
}

/* ---------- footer: deep indigo, the white logo (kit: white on Ink) ---------- */
.gl .gl-foot {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--deep);
  padding: 64px 0 44px;
  font-size: 15px;
  color: var(--on-deep-muted);
}

.gl .foot {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 32px 40px;
}

.gl .gl-foot p {
  margin: 0 0 6px;
}

.gl .gl-foot a {
  text-decoration: none;
  color: var(--on-deep);
}

.gl .gl-foot a:hover {
  text-decoration: underline;
}

.gl .gl-foot .foot ul {
  display: grid;
  gap: 2px;
}

.gl .gl-foot .foot ul a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
}

.gl .gl-foot .ez-legal {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.gl .gl-foot .ez-legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 24px;
}

.gl .gl-foot .ez-legal-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 14px;
}

.gl .gl-foot .ez-legal-links a,
.gl .gl-foot .ez-disclosure a {
  color: var(--on-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.gl .gl-foot .ez-disclosure {
  margin: 12px 0 0;
  color: var(--on-deep-muted);
  max-width: 92ch;
  font-size: 14px;
  line-height: 21px;
}

/* ---------- legal pages: one document card (spec 2026-10-08 phase 2) ----------
   /privacy, /terms and /licensing: the home's nav and deep footer around ONE
   light card on the pale ground, faint static orbs behind it. The copy keeps
   its funnel classes (.ez-prose, .ez-overline, ...) and reads the EZ tokens
   through data-theme="glass" on the wrapper (theme.css), so its fonts and
   colours come from the tokens; the rules below restore the document flow
   the `.gl` reset above zeroes (margins, list markers, link colour) and give
   the card its Glass surface. Text measure: 680px at most (~75 characters
   a line at 17px Geist; 820px ran ~100, long for legal reading). */
.gl .doc-head {
  position: relative;
  z-index: 3;
}

.gl .doc-ground .orbs span {
  opacity: 0.5;
}

.gl .doc {
  padding: 8px 0 clamp(56px, 8vw, 112px);
}

.gl .doc-card {
  max-width: calc(680px + 2 * 64px);
  margin: 0 auto;
  padding: 56px 64px 64px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: var(--glass-shadow);
  color: var(--ink);
}

.gl .doc-card .ez-step-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(32px, 4vw, 44px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.gl .doc-card .ez-lede {
  margin: 10px 0 0;
  font-size: 16px;
  color: var(--muted);
}

.gl .doc-card .ez-prose {
  max-width: none;
  font-size: 17px;
  line-height: 1.65;
}

.gl .doc-card .ez-section {
  margin-top: 36px;
}

/* the mono section labels: `.gl h2` above sizes every h2 as a display
   heading, so the label's own metrics are restated here */
.gl .doc-card .ez-overline {
  margin: 0 0 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-wrap: wrap;
  color: var(--muted);
}

.gl .doc-card .ez-prose p {
  margin: 0 0 16px;
}

.gl .doc-card .ez-prose :is(ul, ol) {
  margin: 0 0 16px;
  padding-left: 24px;
  list-style: revert;
}

.gl .doc-card .ez-prose li {
  margin: 0 0 8px;
}

.gl .doc-card a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.gl .doc-card a:hover {
  color: var(--accent-2);
}

@media (max-width: 720px) {
  .gl .doc {
    padding-top: 0;
  }

  .gl .doc-card {
    padding: 32px 20px 40px;
    border-radius: 18px;
  }

  .gl .doc-card .ez-prose {
    font-size: 16px;
  }
}

/* ---------- medium screens: art above, copy then the record below ---------- */
@media (max-width: 1199px) {
  .gl .hero {
    --copy: 100%;
    min-height: 0;
  }

  .gl .art {
    left: auto;
    bottom: auto;
    width: min(100%, 760px);
    height: 420px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 30%);
    mask-image: linear-gradient(90deg, transparent 0, #000 30%);
  }

  .gl .hero-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
    padding-top: 280px;
  }

  .gl .hero-copy {
    max-width: 680px;
  }

  .gl .rec {
    justify-self: start;
    width: min(100%, 520px);
  }

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

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

/* ---------- phones: no hero image (orbs instead), copy then the record ---------- */
@media (max-width: 760px) {
  .gl {
    font-size: 16px;
  }

  .gl .nav {
    height: 68px;
  }

  .gl .links {
    display: none;
  }

  .gl .menu {
    display: block;
  }

  .gl .wm {
    font-size: 19px;
  }

  .gl .logo-art,
  .gl .logo-art svg {
    height: 24px;
  }

  /* The <picture> serves phones a 1x1 transparent GIF: no download. */
  .gl .art {
    display: none;
  }

  .gl .hero-grid {
    padding-top: 28px;
    gap: 32px;
  }

  .gl h1 {
    font-size: clamp(34px, 9.6vw, 42px);
    line-height: 1.04;
  }

  .gl .lede {
    margin-top: 16px;
    font-size: 17px;
  }

  .gl .ctas {
    margin-top: 24px;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }

  .gl .go {
    width: 100%;
  }

  .gl .door {
    text-align: center;
  }

  .gl .rec {
    padding: 18px 16px 14px;
  }

  .gl .rec-kicker {
    font-size: 11px;
    padding: 4px 9px;
  }

  .gl .rec-live {
    font-size: 13px;
  }

  /* No hero image on phones: the orbs carry the colour, so they run stronger. */
  .gl .hero .orbs span {
    opacity: 1;
  }

  .gl .hero .orbs--light span:nth-child(1) {
    width: 70vmax;
    height: 70vmax;
    right: -30vmax;
    top: -22vmax;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.42), rgba(99, 102, 241, 0) 62%);
  }

  .gl .hero .orbs--light span:nth-child(2) {
    width: 60vmax;
    height: 60vmax;
    left: -24vmax;
    bottom: -14vmax;
    background: radial-gradient(circle, rgba(139, 92, 246, 0.36), rgba(139, 92, 246, 0) 62%);
  }

  .gl .hero .orbs--light span:nth-child(3) {
    width: 40vmax;
    height: 40vmax;
    left: 30%;
    top: 46%;
    background: radial-gradient(circle, rgba(56, 189, 248, 0.18), rgba(56, 189, 248, 0) 62%);
  }

  .gl .trio {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }

  .gl .glass-dark {
    padding: 22px 22px 24px;
  }

  .gl .list.glass {
    padding: 4px 18px;
  }

  .gl .card {
    padding: 22px;
  }

  /* Narrow panel: the echo moves to the bottom-right corner, behind the
     button rather than the sentence, so body text keeps its contrast. */
  .gl .door-art {
    right: -55%;
    top: auto;
    bottom: -60%;
    height: 150%;
    transform: none;
    opacity: 0.32;
    -webkit-mask-image: radial-gradient(circle at 70% 60%, #000 30%, transparent 70%);
    mask-image: radial-gradient(circle at 70% 60%, #000 30%, transparent 70%);
  }

  .gl .foot {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
}

/* ================= MOTION (no-preference only) ================= */
@media (prefers-reduced-motion: no-preference) {
  /* the glass panes drift; the glow over the disc breathes */
  .gl .art .scene {
    animation: gl-drift 24s ease-in-out infinite alternate;
  }

  .gl .art .glow {
    animation: gl-breathe 7s ease-in-out infinite alternate;
  }

  /* orbs wander slowly */
  .gl .orbs span:nth-child(1) {
    animation: gl-orb-a 26s ease-in-out infinite alternate;
  }

  .gl .orbs span:nth-child(2) {
    animation: gl-orb-b 32s ease-in-out infinite alternate;
  }

  .gl .orbs span:nth-child(3) {
    animation: gl-orb-c 20s ease-in-out infinite alternate;
  }

  /* ...except behind the legal pages' document card: static there */
  .gl .doc-ground .orbs span {
    animation: none;
  }

  /* the sample record ticks through its rows once, then the "fits" lands */
  .gl .rec-rows li {
    animation: gl-row 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both;
    animation-delay: calc(0.35s + var(--i) * 0.42s);
  }

  .gl .rec-rows .tick {
    animation: gl-tick 0.45s cubic-bezier(0.3, 1.4, 0.5, 1) both;
    animation-delay: calc(0.55s + var(--i) * 0.42s);
  }

  .gl .rec-pill {
    animation: gl-tick 0.5s cubic-bezier(0.3, 1.4, 0.5, 1) both;
    animation-delay: calc(0.8s + 5 * 0.42s);
  }

  .gl .rec-live i {
    animation: gl-pulse 2.4s ease-in-out infinite;
  }

  .gl .go:active {
    transform: translateY(1px);
  }

  /* sections and cards reveal on scroll (CSS scroll-driven; static elsewhere) */
  @supports (animation-timeline: view()) {
    .gl .reveal,
    .gl .mega span {
      animation: gl-reveal linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 70%;
    }

    .gl .numbered .reveal:nth-child(2) {
      animation-range: entry 8% entry 78%;
    }

    .gl .numbered .reveal:nth-child(3) {
      animation-range: entry 16% entry 86%;
    }

    /* a touch of parallax on the hero art as the page scrolls away */
    .gl .art {
      animation: gl-parallax linear both;
      animation-timeline: scroll(root);
      animation-range: 0 100vh;
    }
  }
}

@keyframes gl-drift {
  from {
    transform: translate3d(0, 0, 0) scale(1.04);
  }
  to {
    transform: translate3d(-2.2%, -1.6%, 0) scale(1.08);
  }
}

@keyframes gl-breathe {
  from {
    opacity: 0.25;
    transform: scale(0.94);
  }
  to {
    opacity: 0.7;
    transform: scale(1.05);
  }
}

@keyframes gl-orb-a {
  to {
    transform: translate3d(-6vmax, 4vmax, 0) scale(1.08);
  }
}

@keyframes gl-orb-b {
  to {
    transform: translate3d(5vmax, -4vmax, 0) scale(1.12);
  }
}

@keyframes gl-orb-c {
  to {
    transform: translate3d(-4vmax, -3vmax, 0) scale(0.9);
  }
}

@keyframes gl-row {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes gl-tick {
  from {
    opacity: 0;
    transform: scale(0.4);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes gl-pulse {
  0% {
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.22);
  }
  50% {
    box-shadow: 0 0 0 7px rgba(79, 70, 229, 0.04);
  }
  100% {
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.22);
  }
}

@keyframes gl-reveal {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes gl-parallax {
  to {
    transform: translateY(12vh);
  }
}