/*
  garage.autos, every page. One stylesheet so the home page, pricing and the
  thanks page read as one site.

  The look is a sister brand's on purpose (the owner, 17 October 2026): the
  near-black header and footer, one sky blue, pill buttons whose arrow slides
  on hover, slanted bars as the mark that repeats, IBM Plex Sans. Nothing on
  the site names or links that brand. Every colour goes through a token below.

  The layout is calm on purpose (the owner, 17 October 2026: "simple, sort of
  like apple"): one light page from top to bottom instead of alternating dark
  and light bands, big short headlines, lots of room, and the product drawn as
  dark screens that sit on the page. The motion is small and always optional:
  without JavaScript, or with reduced motion asked for, everything is shown
  as it is and nothing moves.

  Contrast: white text never sits on the bright sky blue (3.3:1). On light
  backgrounds buttons and links use the deep blue (6:1 with white); on the
  black chrome they use the bright blue with near-black text (over 9:1). The
  sky blue on white (3.4:1) is only ever large headline text.
*/
:root {
  --bg: #FFFFFF;
  --fg: #0B0D10;
  --fg-soft: #3B434E;
  --muted-fg: #5E6772;
  --tile: #F3F5F7;
  --card: #FFFFFF;
  --card-fg: #0B0D10;
  --border: #E3E7EB;
  --primary: #05689F;
  --primary-hover: #095883;
  --primary-fg: #FFFFFF;
  --sky: #1097D4;
  --sky-bright: #3BBCF5;
  --sky-pale: #7FD2FA;
  --sky-soft: rgb(16 151 212 / 0.10);
  --sky-line: rgb(16 151 212 / 0.35);
  --on-sky: #04121A;
  --headline-accent: var(--sky);
  --destructive: #B42318;
  --mini-shadow: 0 1px 2px rgb(4 18 26 / 0.06), 0 10px 24px -12px rgb(4 18 26 / 0.22);
  --window-shadow: 0 50px 100px -30px rgb(4 18 26 / 0.45), 0 18px 40px -20px rgb(4 18 26 / 0.35);
  /* The chrome is the same in both themes: it is the signature. */
  --chrome: #050607;
  --chrome-card: #0E1116;
  --chrome-raised: #161B21;
  --chrome-fg: #C9CED6;
  --chrome-muted: #8E97A3;
  --chrome-heading: #F5F7FA;
  --chrome-border: #1E232A;
  /* The three made-up brokerages the brand demo switches between. */
  --demo-1: #2563EB;
  --demo-2: #047857;
  --demo-3: #C2410C;
  /* Form fields need an edge you can see: about 3:1 on their background. */
  --field-border: #8E97A3;
  /* The top plan and the apply panel are chrome on a light page; on a dark page they lift off it. */
  --raised-chrome: var(--chrome);
  --raised-border: var(--chrome-border);
  --top-plan-border: var(--chrome-border);
  --radius: 18px;
  --radius-lg: 28px;
  --pill: 999px;
  --section: clamp(96px, 12vw, 168px);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #07080A;
    --fg: #F2F4F7;
    --fg-soft: #C3CAD3;
    --muted-fg: #98A1AC;
    --tile: #121519;
    --card: #15191E;
    --card-fg: #F2F4F7;
    --border: #252A31;
    --primary: #3BBCF5;
    --primary-hover: #7FD2FA;
    --primary-fg: #04121A;
    --sky-soft: rgb(59 188 245 / 0.12);
    --sky-line: rgb(59 188 245 / 0.35);
    --headline-accent: var(--sky-bright);
    --destructive: #F97066;
    --mini-shadow: 0 0 0 1px #252A31;
    --window-shadow: 0 0 0 1px #1E232A, 0 50px 100px -30px rgb(0 0 0 / 0.8);
    --field-border: #5E6772;
    --raised-chrome: var(--chrome-card);
    --raised-border: #252A31;
    --top-plan-border: rgb(59 188 245 / 0.45);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #07080A;
  --fg: #F2F4F7;
  --fg-soft: #C3CAD3;
  --muted-fg: #98A1AC;
  --tile: #121519;
  --card: #15191E;
  --card-fg: #F2F4F7;
  --border: #252A31;
  --primary: #3BBCF5;
  --primary-hover: #7FD2FA;
  --primary-fg: #04121A;
  --sky-soft: rgb(59 188 245 / 0.12);
  --sky-line: rgb(59 188 245 / 0.35);
  --headline-accent: var(--sky-bright);
  --destructive: #F97066;
  --mini-shadow: 0 0 0 1px #252A31;
  --window-shadow: 0 0 0 1px #1E232A, 0 50px 100px -30px rgb(0 0 0 / 0.8);
  --field-border: #5E6772;
  --raised-chrome: var(--chrome-card);
  --raised-border: #252A31;
  --top-plan-border: rgb(59 188 245 / 0.45);
  color-scheme: dark;
}

/* Base. */
*, *::before, *::after { box-sizing: border-box; }
/* A jump link stops below the sticky header, not under it. */
html { scroll-behavior: smooth; scroll-padding-top: 96px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: 'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
a { color: inherit; text-decoration: none; }
img, svg { display: block; }
h1, h2, h3 { margin: 0; letter-spacing: -0.02em; text-wrap: balance; }
h1 { font-weight: 700; font-size: clamp(2.9rem, 8.2vw, 6rem); line-height: 1.02; letter-spacing: -0.045em; }
h2 { font-weight: 700; font-size: clamp(2.1rem, 5vw, 3.6rem); line-height: 1.06; letter-spacing: -0.035em; }
h3 { font-weight: 600; font-size: 1.25rem; line-height: 1.3; }
p { margin: 0; }
.wrap { width: min(1160px, 100% - 32px); margin-inline: auto; }
.narrow { width: min(820px, 100% - 32px); margin-inline: auto; }
.muted { color: var(--muted-fg); }
.nowrap { white-space: nowrap; }
.center { text-align: center; margin-inline: auto; }
.accent { color: var(--headline-accent); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 60; background: var(--sky-bright); color: var(--on-sky); font-weight: 700; padding: 10px 16px; border-radius: var(--pill); }
.skip:focus { top: 10px; }

/* The mark that repeats: two slanted bars, then an uppercase label. */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--primary);
}
.eyebrow::before {
  content: ""; width: 22px; height: 12px; flex: none;
  background: linear-gradient(90deg, var(--sky) 0 40%, transparent 40% 60%, var(--sky) 60% 100%);
  transform: skewX(-24deg);
}
.on-dark .eyebrow { color: var(--sky-bright); }

/* Pill buttons with the arrow that slides on hover. 46px tall for a thumb. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 46px; padding: 11px 22px; border-radius: var(--pill);
  font-weight: 700; font-size: 1rem; letter-spacing: 0.01em; border: 1.5px solid transparent;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
  cursor: pointer; font-family: inherit;
}
.btn:active { transform: scale(0.98); }
.btn-lg { min-height: 54px; padding: 14px 30px; font-size: 1.05rem; }
.arrow { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 2; margin-right: -2px; overflow: visible; flex: none; }
.arrow .line { opacity: 0; transition: opacity 160ms ease; }
.arrow .head { transition: transform 160ms ease; }
.btn:hover .arrow .line, .btn:focus-visible .arrow .line, .link-arrow:hover .arrow .line { opacity: 1; }
.btn:hover .arrow .head, .btn:focus-visible .arrow .head, .link-arrow:hover .arrow .head { transform: translateX(1.85px); }
.btn-primary { background: var(--primary); color: var(--primary-fg); }
.btn-primary:hover { background: var(--primary-hover); }
.btn-quiet { background: transparent; color: var(--fg); border-color: var(--border); }
.btn-quiet:hover { border-color: var(--primary); }
.on-dark .btn-primary { background: var(--sky-bright); color: var(--on-sky); }
.on-dark .btn-primary:hover { background: var(--sky-pale); }
.on-dark .btn-quiet { color: var(--chrome-heading); border-color: #3A414B; }
.on-dark .btn-quiet:hover { border-color: var(--sky-bright); }
.link-arrow { display: inline-flex; align-items: center; gap: 10px; color: var(--primary); font-weight: 700; font-size: 1.05rem; min-height: 46px; }
.link-arrow:hover { text-decoration: underline; text-underline-offset: 4px; }
.btn:focus-visible, a:focus-visible, button:focus-visible { outline: 2px solid var(--sky); outline-offset: 3px; }
.text-link { color: var(--primary); font-weight: 600; }
.text-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Header: black glass, bold links, the current page in sky blue. */
header.site {
  position: sticky; top: 0; z-index: 50;
  background: rgb(5 6 7 / 0.94); color: var(--chrome-fg);
  -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid rgb(255 255 255 / 0.06);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { header.site { background: var(--chrome); } }
.nav { display: flex; align-items: center; justify-content: space-between; min-height: 60px; gap: 16px; }
.mark { display: inline-flex; align-items: center; gap: 10px; color: var(--chrome-heading); font-weight: 700; font-size: 1.12rem; letter-spacing: -0.01em; }
.mark img { width: 30px; height: 30px; border-radius: 8px; }
.nav-links { display: none; gap: 32px; align-items: center; font-weight: 700; font-size: 0.86rem; letter-spacing: 0.03em; }
.nav-links a { color: var(--chrome-fg); padding: 6px 0; transition: color 160ms ease; }
.nav-links a:hover { color: var(--chrome-heading); }
.nav-links a[aria-current="page"] { color: var(--sky-bright); }
@media (min-width: 820px) { .nav-links { display: flex; } }
.nav-actions { display: flex; align-items: center; gap: 20px; }
.nav-login { font-weight: 700; font-size: 0.86rem; letter-spacing: 0.03em; color: var(--chrome-heading); padding: 10px 0; }
.nav-login:hover { color: var(--sky-bright); }
.nav-pricing[aria-current="page"] { color: var(--sky-bright); }
@media (min-width: 820px) { .nav-pricing { display: none; } }
@media (max-width: 819px) { .nav-actions { gap: 16px; } .nav .btn { min-height: 44px; } }
@media (max-width: 379px) { .mark span { display: none; } }
.nav .btn { min-height: 38px; padding: 7px 16px; font-size: 0.86rem; background: var(--sky-bright); color: var(--on-sky); }
.nav .btn:hover { background: var(--sky-pale); }

/* Sections. */
section.block { padding: var(--section) 0; }
.head { max-width: 46rem; }
.head.center { display: grid; justify-items: center; }
.head h2 { margin-top: 18px; }
.sub { margin-top: 20px; font-size: clamp(1.1rem, 1.7vw, 1.32rem); line-height: 1.5; color: var(--fg-soft); max-width: 40rem; text-wrap: pretty; }
.center .sub { margin-inline: auto; }

/*
  Reveal: a block fades up the first time it comes into view. Only once the
  page script has said it is running (.js on <html>, set in the head), and if
  the script never finishes loading the blocks show anyway after a moment.
*/
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); transition-delay: var(--d, 0s); }
.js .reveal.is-in { opacity: 1; transform: none; }
.js:not(.motion-ready) .reveal,
.js:not(.motion-ready) [data-play] .p,
.js:not(.motion-ready) [data-play] .now { animation: show-anyway 0.01s 2.5s forwards; }
.js:not(.motion-ready) [data-play] .was { animation: fade-out 0.01s 2.5s forwards; }
@keyframes show-anyway { to { opacity: 1; transform: none; } }

/* Small parts of a drawing that pop in, in order, once their drawing is in view. */
.js [data-play] .p { opacity: 0; }
.js [data-play].is-in .p { animation: pop 0.6s var(--ease) both; animation-delay: var(--d, 0s); }
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(0.97); } to { opacity: 1; transform: none; } }

/* Hero. */
.hero { position: relative; padding: clamp(40px, 4.5vw, 64px) 0 var(--section); text-align: center; overflow: visible; overflow-x: clip; }
.hero::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 760px; pointer-events: none;
  background: radial-gradient(55% 60% at 50% 0%, var(--sky-soft), transparent 72%);
}
/* The slanted bars, large and faint, drifting slowly behind the headline. */
.hero-bars { position: absolute; top: 0; height: 720px; width: 360px; display: flex; gap: 26px; transform: skewX(-24deg); opacity: 0.5; pointer-events: none; }
.hero-bars.left { left: -150px; }
.hero-bars.right { right: -150px; }
.hero-bars span { flex: 1; background: linear-gradient(180deg, var(--sky-soft) 0%, transparent 85%); border-radius: 4px; animation: drift 14s ease-in-out infinite alternate; }
.hero-bars span:nth-child(2) { animation-delay: -4s; }
.hero-bars span:nth-child(3) { animation-delay: -8s; }
@keyframes drift { from { transform: translateY(-24px); } to { transform: translateY(24px); } }
@media (max-width: 899px) { .hero-bars { display: none; } }
.hero-copy { position: relative; display: grid; justify-items: center; }
.hero h1 { margin-top: 16px; font-size: clamp(2.9rem, 6.6vw, 5rem); }
.hero-sub { margin-top: 18px; text-wrap: pretty; font-size: clamp(1.1rem, 1.6vw, 1.3rem); line-height: 1.5; color: var(--fg-soft); max-width: 36rem; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 30px; margin-top: 28px; }
.hero .actions { justify-content: center; }
.hero .spots { justify-content: center; margin-top: 20px; }
@media (max-width: 479px) { .spots .extra { display: none; } }
/* A page's own hero (pricing): the same light, a smaller headline, no product screen. */
.page-hero { padding-bottom: clamp(56px, 7vw, 88px); }
.page-hero h1 { font-size: clamp(2.6rem, 6.4vw, 4.75rem); }
.hero-stage { position: relative; margin-top: 40px; perspective: 1800px; }
@supports (animation-timeline: view()) {
  .js .hero-stage .window { animation: settle linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; transform-origin: 50% 0; }
  @keyframes settle { from { transform: rotateX(14deg) scale(0.94); } to { transform: none; } }
}

/* The product, drawn as a dark screen. Always dark: it is the product. */
.window {
  background: var(--chrome-card); color: var(--chrome-fg);
  border: 1px solid var(--chrome-border); border-radius: 22px;
  box-shadow: var(--window-shadow); overflow: hidden; text-align: left; font-size: 0.9rem; line-height: 1.45;
}
.window-bar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; background: #090B0E; border-bottom: 1px solid var(--chrome-border); }
.window-bar i { width: 10px; height: 10px; border-radius: 50%; background: #2A3038; }
.window-bar .url { margin-inline: auto; padding: 4px 16px; border-radius: var(--pill); background: var(--chrome-raised); color: var(--chrome-muted); font-size: 0.76rem; letter-spacing: 0.01em; transform: translateX(-12px); }
.app { display: grid; grid-template-columns: 1fr; min-height: 440px; }
@media (min-width: 680px) { .app { grid-template-columns: 230px 1fr; } }
@media (min-width: 1040px) { .app { grid-template-columns: 250px 1fr 270px; } }
.app-list, .app-profile { display: none; background: #0B0E12; }
@media (min-width: 680px) { .app-list { display: block; border-right: 1px solid var(--chrome-border); } }
@media (min-width: 1040px) { .app-profile { display: block; border-left: 1px solid var(--chrome-border); } }
.app-label { padding: 16px 18px 10px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--chrome-muted); }
.row { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; padding: 11px 18px; position: relative; }
.row.active { background: var(--chrome-raised); }
.row.active::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--sky-bright); }
.row > div { min-width: 0; }
.row b { display: block; color: var(--chrome-heading); font-weight: 600; font-size: 0.86rem; }
.row > div span { display: block; color: var(--chrome-muted); font-size: 0.78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row time { color: var(--chrome-muted); font-size: 0.72rem; align-self: start; margin-top: 2px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sky-bright); display: inline-block; }
.avatar { width: 34px; height: 34px; border-radius: 999px; background: #1F2730; color: var(--chrome-heading); display: grid; place-items: center; font-size: 0.74rem; font-weight: 700; flex: none; }
.thread { display: flex; flex-direction: column; min-width: 0; }
.thread-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--chrome-border); }
.who { display: flex; align-items: center; gap: 10px; color: var(--chrome-heading); font-weight: 600; min-width: 0; }
.who > span:not(.avatar) { white-space: nowrap; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--pill); font-size: 0.74rem; font-weight: 600; white-space: nowrap; }
.chip-dim { background: #1A1F26; color: var(--chrome-fg); border: 1px solid var(--chrome-border); }
.chip-hot { background: rgb(59 188 245 / 0.14); color: var(--sky-bright); border: 1px solid rgb(59 188 245 / 0.4); }
.thread-body { padding: 20px; display: grid; gap: 12px; align-content: start; flex: 1; }
.bubble { max-width: 80%; padding: 10px 14px; border-radius: 18px; }
.bubble.in { background: #1A1F26; color: var(--chrome-heading); border-bottom-left-radius: 6px; justify-self: start; }
.bubble.out { background: var(--sky-bright); color: var(--on-sky); justify-self: end; border-bottom-right-radius: 6px; font-weight: 500; }
.bubble small { display: block; margin-top: 4px; font-size: 0.7rem; opacity: 0.7; }
.ai-note { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: #0A1820; border: 1px dashed rgb(59 188 245 / 0.45); color: var(--chrome-fg); font-size: 0.82rem; }
.ai-note b { color: var(--sky-bright); font-weight: 700; }
.spark { width: 15px; height: 15px; flex: none; color: var(--sky-bright); margin-top: 2px; }
.replies { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 20px 20px; }
.replies span { padding: 7px 12px; border-radius: var(--pill); border: 1px solid #2B323B; color: var(--chrome-heading); font-size: 0.8rem; background: #11151A; }
.fields { padding: 0 18px 18px; display: grid; gap: 2px; }
.field-row { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--chrome-border); font-size: 0.82rem; }
.field-row:last-child { border-bottom: none; }
.field-row dt { color: var(--chrome-muted); }
.field-row dd { margin: 0; color: var(--chrome-heading); font-weight: 500; display: inline-flex; align-items: center; gap: 6px; text-align: right; }
.field-row dd .spark { width: 13px; height: 13px; margin: 0; }
.field-row dd small { color: var(--chrome-muted); font-size: 0.78rem; font-weight: 400; }
/* A value Autopilot fills in: "Not yet" gives way to the value with a sparkle. */
.fill { display: inline-grid; justify-items: end; }
.fill > * { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 6px; }
.fill .was { color: var(--chrome-muted); font-weight: 400; }
.js [data-play] .fill .now { opacity: 0; }
.js [data-play].is-in .fill .now { animation: pop 0.6s var(--ease) both; animation-delay: var(--d, 0s); }
.js [data-play].is-in .fill .was { animation: fade-out 0.3s ease both; animation-delay: var(--d, 0s); }
.fill .was { visibility: hidden; }
.js [data-play] .fill .was { visibility: visible; }
@keyframes fade-out { to { opacity: 0; } }
/* The intent chip turns from new to high in the same way. */
.swap { display: inline-grid; }
.swap > * { grid-area: 1 / 1; }
.swap .was { visibility: hidden; }
.js [data-play] .swap .was { visibility: visible; }
.js [data-play] .swap .now { opacity: 0; }
.js [data-play].is-in .swap .now { animation: pop 0.6s var(--ease) both; animation-delay: var(--d, 0s); }
.js [data-play].is-in .swap .was { animation: fade-out 0.3s ease both; animation-delay: var(--d, 0s); }

/* Feature tiles: one grid, tiles of different sizes, each with its own small drawing. */
.bento { display: grid; gap: 20px; grid-template-columns: 1fr; margin-top: clamp(48px, 6vw, 72px); }
@media (min-width: 720px) { .bento { grid-template-columns: repeat(2, 1fr); } .tile.wide { grid-column: span 2; } }
@media (min-width: 1040px) { .bento { grid-template-columns: repeat(6, 1fr); } .tile { grid-column: span 2; } .tile.wide { grid-column: span 4; } .tile.half { grid-column: span 3; } }
.tile { background: var(--tile); border-radius: var(--radius-lg); padding: clamp(26px, 3vw, 36px); display: flex; flex-direction: column; gap: 10px; overflow: hidden; min-height: 360px; }
.tile h3 { font-size: 1.32rem; }
.tile p { color: var(--muted-fg); font-size: 1rem; max-width: 36ch; }
.tile .tag { align-self: flex-start; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--primary); background: var(--sky-soft); border: 1px solid var(--sky-line); padding: 3px 9px; border-radius: var(--pill); }
.tile .art { margin-top: auto; padding-top: 26px; display: grid; gap: 10px; }
.tile-copy { display: grid; gap: 10px; align-content: start; align-self: start; }
@media (min-width: 1040px) { .tile.wide { display: grid; grid-template-columns: 0.9fr 1.1fr; column-gap: 40px; align-items: center; } .tile.wide .art { margin: 0; padding: 0; } }
.mini { background: var(--card); color: var(--card-fg); border-radius: 14px; box-shadow: var(--mini-shadow); padding: 12px 14px; font-size: 0.86rem; line-height: 1.4; display: flex; align-items: center; gap: 10px; }
.mini b { font-weight: 600; }
.mini .end { margin-left: auto; color: var(--muted-fg); font-size: 0.78rem; white-space: nowrap; }
.ch { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 8px; border-radius: 6px; background: var(--sky-soft); color: var(--primary); flex: none; min-width: 68px; text-align: center; }
.ok { width: 18px; height: 18px; color: var(--primary); flex: none; }
.pills { display: flex; flex-wrap: wrap; gap: 6px; }
.pills span { padding: 5px 10px; border-radius: 8px; background: var(--tile); border: 1px solid var(--border); font-size: 0.8rem; font-weight: 500; }
.down { width: 18px; height: 18px; color: var(--muted-fg); justify-self: center; }
.swatches { display: flex; gap: 5px; margin-left: auto; }
.swatches i { width: 14px; height: 14px; border-radius: 4px; border: 1px solid var(--border); }
.swatches i:nth-child(1) { background: #FFFFFF; }
.swatches i:nth-child(2) { background: #15181C; }
.swatches i:nth-child(3) { background: #2B5C9E; }
/* Leads handed out in turn: the new lead travels from agent to agent. */
.turns { position: relative; padding-top: 44px; }
.turns .agents { display: grid; grid-template-columns: repeat(3, 1fr); justify-items: center; gap: 8px; }
.turns .agent { display: grid; justify-items: center; gap: 6px; font-size: 0.78rem; color: var(--muted-fg); font-weight: 500; }
.turns .agent .avatar { width: 46px; height: 46px; background: var(--card); color: var(--card-fg); box-shadow: var(--mini-shadow); font-size: 0.8rem; transition: box-shadow 0.3s ease; }
.turns .runner { position: absolute; top: 0; left: 0; width: 33.333%; display: flex; justify-content: center; animation: runner 7.5s var(--ease) infinite; }
.turns .runner span { background: var(--primary); color: var(--primary-fg); font-size: 0.74rem; font-weight: 700; padding: 5px 11px; border-radius: var(--pill); white-space: nowrap; }
.turns.paused .runner, .turns.paused .avatar { animation-play-state: paused; }
@keyframes runner { 0%, 28% { transform: translateX(0); } 33%, 61% { transform: translateX(100%); } 66%, 94% { transform: translateX(200%); } 100% { transform: translateX(0); } }
.turns .agent:nth-child(1) .avatar { animation: lit 7.5s infinite; }
.turns .agent:nth-child(2) .avatar { animation: lit 7.5s 2.5s infinite; }
.turns .agent:nth-child(3) .avatar { animation: lit 7.5s 5s infinite; }
@keyframes lit { 0%, 30% { box-shadow: 0 0 0 3px var(--sky-bright), var(--mini-shadow); } 34%, 100% { box-shadow: var(--mini-shadow); } }
/* A credit application, three steps in. */
.stepper { display: grid; gap: 10px; }
.stepper .labels { display: grid; grid-template-columns: repeat(4, 1fr); font-size: 0.74rem; color: var(--muted-fg); font-weight: 500; }
.stepper .track { height: 6px; border-radius: 6px; background: var(--border); overflow: hidden; }
.stepper .track i { display: block; height: 100%; width: 75%; border-radius: 6px; background: var(--primary); transform-origin: left; }
.js [data-play] .stepper .track i { transform: scaleX(0); }
.js [data-play].is-in .stepper .track i { transition: transform 1.4s var(--ease) 0.3s; transform: none; }
.toggle { width: 34px; height: 20px; border-radius: 20px; background: var(--primary); position: relative; flex: none; margin-left: auto; }
.toggle::after { content: ""; position: absolute; top: 3px; right: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--primary-fg); }
/* A dealer's sheet becoming deals. */
.sheet { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; }
.sheet .rows { display: grid; gap: 7px; padding: 14px; }
.sheet .rows i { height: 7px; border-radius: 4px; background: var(--border); }
.sheet .rows i:nth-child(2) { width: 80%; }
.sheet .rows i:nth-child(3) { width: 90%; }
.sheet .rows i:nth-child(4) { width: 70%; }
.sheet .to { width: 22px; height: 22px; color: var(--muted-fg); }
.sheet .deals { display: grid; gap: 8px; }
.sheet .deals .mini { padding: 9px 12px; font-size: 0.8rem; }
.sheet .deals .mini b { white-space: nowrap; }

/* Autopilot: the steps scroll past while the screen beside them changes. */
.story { display: grid; grid-template-columns: 1fr; gap: 24px; margin-top: clamp(48px, 6vw, 72px); }
.story-step { padding: 8px 0; }
.story-step .n { font-weight: 700; font-size: 0.85rem; letter-spacing: 0.08em; color: var(--primary); }
.story-step h3 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-top: 10px; letter-spacing: -0.025em; }
.story-step p { margin-top: 12px; color: var(--muted-fg); font-size: 1.08rem; max-width: 30rem; }
.story-visual { margin-bottom: 40px; }
/* Side by side only once the page script runs (.motion-ready), since it picks the active step. */
@media (min-width: 960px) {
  .motion-ready .story { grid-template-columns: 1fr 1.08fr; column-gap: clamp(48px, 6vw, 96px); row-gap: 0; }
  .motion-ready .story-step { grid-column: 1; min-height: 62vh; display: flex; flex-direction: column; justify-content: center; opacity: 0.45; transition: opacity 0.5s ease; }
  .motion-ready .story-step.is-active { opacity: 1; }
  /* It lets go 80px before the section ends, so its shadow never spills into the next one. */
  .motion-ready .story-visual { grid-column: 2; grid-row: 1 / span 4; position: sticky; top: calc(50vh - 220px); align-self: start; margin: 0 0 80px; opacity: 0; transform: translateY(16px) scale(0.98); transition: opacity 0.5s ease, transform 0.6s var(--ease); pointer-events: none; }
  .motion-ready .story-visual.is-active { opacity: 1; transform: none; }
}
.story-visual .window { min-height: 420px; }
/* A reader scrolls on after a couple of seconds, so each screen plays at six tenths the hero's pace. */
.js .story [data-play].is-in .p,
.js .story [data-play].is-in .fill .now, .js .story [data-play].is-in .fill .was,
.js .story [data-play].is-in .swap .now, .js .story [data-play].is-in .swap .was { animation-delay: calc(var(--d, 0s) * 0.6); }
.js .story [data-play] .meter i.on { background: #1F252D; }
.js .story [data-play].is-in .meter i.on { animation: light-up 0.3s ease both; animation-delay: var(--d, 0s); }
.js:not(.motion-ready) .story .meter i.on { animation: light-up 0.01s 2.5s forwards; }
@keyframes light-up { to { background: var(--sky-bright); } }
.panel-pad { padding: 22px; display: grid; gap: 12px; }
.panel-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--chrome-heading); font-weight: 600; }
.meter { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.meter i { height: 10px; border-radius: 3px; background: #1F252D; transform: skewX(-24deg); }
.meter i.on { background: var(--sky-bright); }
.meter-labels { display: grid; grid-template-columns: repeat(3, 1fr); font-size: 0.72rem; color: var(--chrome-muted); }
.meter-labels span:last-child { color: var(--sky-bright); font-weight: 700; }
.signals { display: flex; flex-wrap: wrap; gap: 8px; }
.wave { display: flex; align-items: center; gap: 3px; height: 34px; }
.wave i { width: 3px; border-radius: 3px; background: #2C3540; height: var(--h, 40%); }
.wave i.heard { background: var(--sky-bright); }
.call-text { color: var(--chrome-fg); font-size: 0.86rem; }
.call-text b { color: var(--chrome-heading); }
.reply-list { display: grid; gap: 8px; }
.reply-list span { padding: 11px 14px; border-radius: 14px; border: 1px solid #2B323B; background: #11151A; color: var(--chrome-heading); font-size: 0.86rem; }
.reply-list span:first-child { border-color: rgb(59 188 245 / 0.55); box-shadow: 0 0 0 3px rgb(59 188 245 / 0.12); }
.call-list { margin: 0; padding-left: 18px; color: var(--chrome-fg); font-size: 0.84rem; display: grid; gap: 4px; }

/* The last step's height already ends the section, and the phone needs no extra room beside the text. */
@media (min-width: 960px) { .motion-ready #autopilot { padding-bottom: clamp(24px, 3vw, 40px); } .phone-stage { padding: 0; } }

/* Your brand: one phone, three made-up brokerages, switching. */
.brand-grid { display: grid; gap: clamp(48px, 6vw, 80px); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 960px) { .brand-grid { grid-template-columns: 1fr 1fr; } }
.brand-pick { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; align-items: center; }
.brand-pick .label { flex-basis: 100%; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-fg); }
.brand-pick button { font: inherit; font-size: 0.84rem; font-weight: 600; padding: 7px 13px; border-radius: var(--pill); border: 1.5px solid var(--border); background: var(--card); color: var(--fg); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: border-color 160ms ease; min-height: 44px; }
.brand-pick button i { width: 10px; height: 10px; border-radius: 50%; }
.brand-pick button[data-brand="1"] i { background: var(--demo-1); }
.brand-pick button[data-brand="2"] i { background: var(--demo-2); }
.brand-pick button[data-brand="3"] i { background: var(--demo-3); }
.brand-pick button[aria-pressed="true"] { border-color: var(--fg); }
.points { list-style: none; margin: 40px 0 0; padding: 0; display: grid; gap: 22px; }
.points li { display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: start; }
.points .icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--sky-soft); border: 1px solid var(--sky-line); color: var(--primary); }
.points .icon svg { width: 21px; height: 21px; }
.points h3 { font-size: 1.08rem; }
.points p { margin-top: 3px; color: var(--muted-fg); font-size: 0.98rem; }
.phone-stage { display: grid; place-items: center; padding: 24px 0; position: relative; }
.phone-stage::before { content: ""; position: absolute; inset: 8% 4%; border-radius: 50%; background: radial-gradient(closest-side, var(--sky-soft), transparent); }
.phone { --brand: var(--demo-1); position: relative; width: min(300px, 78vw); aspect-ratio: 300 / 610; border-radius: 46px; background: #0B0D10; padding: 12px; box-shadow: var(--window-shadow), inset 0 0 0 1.5px #2A2F36; }
.phone[data-brand="2"] { --brand: var(--demo-2); }
.phone[data-brand="3"] { --brand: var(--demo-3); }
.phone .screen { height: 100%; border-radius: 35px; background: #FFFFFF; color: #0B0D10; overflow: hidden; display: flex; flex-direction: column; font-size: 0.8rem; }
.phone .notch { position: absolute; top: 22px; left: 50%; width: 84px; height: 22px; border-radius: 12px; background: #0B0D10; transform: translateX(-50%); z-index: 2; }
.phone .bar { display: flex; align-items: center; gap: 9px; padding: 52px 18px 14px; font-weight: 700; font-size: 0.92rem; }
.phone .logo { width: 26px; height: 26px; border-radius: 8px; background: var(--brand); transition: background-color 0.6s ease; display: grid; place-items: center; color: #FFFFFF; font-size: 0.7rem; }
.names { display: inline-grid; }
.names > span { grid-area: 1 / 1; transition: opacity 0.4s ease; }
.phone[data-brand="1"] .names > span:not(:nth-child(1)),
.phone[data-brand="2"] .names > span:not(:nth-child(2)),
.phone[data-brand="3"] .names > span:not(:nth-child(3)) { opacity: 0; }
.phone .label { padding: 4px 18px 10px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #6A737D; }
.deal { margin: 0 14px 12px; border-radius: 18px; border: 1px solid #E6E9ED; overflow: hidden; }
.deal .pic { height: 118px; background: linear-gradient(160deg, color-mix(in srgb, var(--brand) 22%, #FFFFFF), #F3F5F7); display: grid; place-items: center; transition: background 0.6s ease; }
.deal .pic svg { width: 78%; color: #1B2129; }
.deal .info { padding: 12px 14px 14px; display: grid; gap: 2px; }
.deal .info b { font-size: 0.86rem; }
.deal .info span { color: #6A737D; font-size: 0.74rem; }
.deal .price { display: flex; align-items: baseline; justify-content: space-between; margin-top: 8px; }
.deal .price strong { font-size: 1.25rem; letter-spacing: -0.02em; }
.deal .price em { font-style: normal; font-size: 0.72rem; font-weight: 700; color: #FFFFFF; background: var(--brand); padding: 6px 12px; border-radius: var(--pill); transition: background-color 0.6s ease; }
.deal.small .pic { height: 70px; }
.deal.small .pic svg { width: 46%; }

/* Ten brokerages. */
.spots { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 16px; }
.spots p { font-size: 0.95rem; color: var(--muted-fg); }
.spots strong { color: var(--fg); font-weight: 700; }
.on-dark .spots p { color: var(--chrome-fg); }
.on-dark .spots strong { color: var(--chrome-heading); }
/*
  The spots: ten slanted bars, one per brokerage we take, filled when taken.
  The same slant as the eyebrow mark, so the limit reads as part of the brand.
*/
.spot-bars { display: flex; gap: 5px; transform: skewX(-24deg); margin-left: 6px; flex: none; }
.spot-bars i { width: 9px; height: 22px; border-radius: 2px; border: 1.5px solid var(--sky); }
.spot-bars i.taken { background: var(--sky); border-color: var(--sky); }
.on-dark .spot-bars i { border-color: rgb(59 188 245 / 0.7); }
.on-dark .spot-bars i.taken { background: var(--sky-bright); border-color: var(--sky-bright); }
.spot-bars.big { gap: clamp(8px, 1.6vw, 14px); margin: 0; justify-content: center; }
.spot-bars.big i { width: clamp(18px, 4.6vw, 40px); height: clamp(64px, 15vw, 128px); border-width: 2px; border-radius: 4px; }
.js .spot-bars.big[data-play] i { transform: scaleY(0.2); opacity: 0; }
.js .spot-bars.big[data-play].is-in i { animation: rise 0.7s var(--ease) both; animation-delay: calc(var(--i, 0) * 70ms + 0.2s); }
@keyframes rise { to { transform: none; opacity: 1; } }
.spot-bars.big i:nth-child(2) { --i: 1; } .spot-bars.big i:nth-child(3) { --i: 2; } .spot-bars.big i:nth-child(4) { --i: 3; }
.spot-bars.big i:nth-child(5) { --i: 4; } .spot-bars.big i:nth-child(6) { --i: 5; } .spot-bars.big i:nth-child(7) { --i: 6; }
.spot-bars.big i:nth-child(8) { --i: 7; } .spot-bars.big i:nth-child(9) { --i: 8; } .spot-bars.big i:nth-child(10) { --i: 9; }
.founding { display: grid; justify-items: center; text-align: center; }
.founding .meter-wrap { margin-top: clamp(48px, 6vw, 72px); display: grid; justify-items: center; gap: 22px; }
.spot-count { font-size: 1.15rem; color: var(--fg-soft); }
.spot-count strong { font-size: clamp(3rem, 7vw, 4.5rem); font-weight: 700; letter-spacing: -0.04em; line-height: 1; color: var(--fg); margin-right: 8px; vertical-align: -0.12em; }
.spot-key { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; font-size: 0.92rem; color: var(--muted-fg); }
.spot-key li { display: inline-flex; align-items: center; gap: 10px; text-align: left; }
.spot-key i { width: 10px; height: 16px; flex: none; border-radius: 2px; border: 1.5px solid var(--sky); transform: skewX(-24deg); }
.spot-key i.taken { background: var(--sky); border-color: var(--sky); }
.trio { display: grid; gap: 20px; grid-template-columns: 1fr; margin-top: clamp(56px, 7vw, 88px); text-align: left; width: 100%; }
@media (min-width: 860px) { .trio { grid-template-columns: repeat(3, 1fr); } }
.trio > div { background: var(--tile); border-radius: var(--radius-lg); padding: 28px; }
.trio .icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--card); box-shadow: var(--mini-shadow); color: var(--primary); }
.trio .icon svg { width: 21px; height: 21px; }
.trio h3 { margin-top: 18px; font-size: 1.15rem; }
.trio p { margin-top: 6px; color: var(--muted-fg); font-size: 0.98rem; }

/* Plans. */
.plans { display: grid; gap: 20px; margin-top: clamp(48px, 6vw, 72px); grid-template-columns: 1fr; align-items: stretch; }
@media (min-width: 1040px) { .plans { grid-template-columns: repeat(3, 1fr); } }
.plan { display: flex; flex-direction: column; gap: 16px; padding: 34px 30px 30px; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--card); color: var(--card-fg); position: relative; }
.plan.top { background: var(--raised-chrome); color: var(--chrome-fg); border-color: var(--top-plan-border); box-shadow: 0 30px 80px -30px rgb(16 151 212 / 0.45); }
.plan.top h3, .plan.top .price strong { color: var(--chrome-heading); }
.plan .tag { position: absolute; top: -13px; left: 28px; background: var(--sky-bright); color: var(--on-sky); }
.plan h3 { font-size: 1.35rem; }
.plan .price { display: flex; align-items: baseline; gap: 6px; }
.plan .price strong { font-size: 3rem; font-weight: 700; letter-spacing: -0.04em; line-height: 1; }
.plan .price span { color: var(--muted-fg); font-weight: 500; }
.plan.top .price span, .plan.top .sum { color: var(--chrome-muted); }
.plan .sum { color: var(--muted-fg); font-size: 0.98rem; }
.plan .checks { margin-top: 2px; flex: 1; }
.plan .btn { width: 100%; margin-top: 8px; }
/* The terms, said once and plainly, under the plans. */
.terms { list-style: none; margin: 34px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 30px; }
.terms li { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; color: var(--fg); }
.terms svg { width: 18px; height: 18px; color: var(--primary); flex: none; }
.plans-note { margin-top: 30px; color: var(--muted-fg); font-size: 1rem; }
.plans-note strong { color: var(--fg); }

/* Lists with a check. */
.checks { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 11px; align-content: start; }
.checks li { display: grid; grid-template-columns: 20px 1fr; gap: 12px; align-items: start; color: var(--fg-soft); font-size: 0.96rem; line-height: 1.5; }
.checks li span { text-wrap: pretty; }
.checks svg { width: 18px; height: 18px; color: var(--primary); margin-top: 3px; }
.on-dark .checks li, .plan.top .checks li { color: var(--chrome-fg); }
.on-dark .checks svg, .plan.top .checks svg { color: var(--sky-bright); }

/* Comparison table: scrolls inside itself on a phone, never the page. */
.table-wrap { margin-top: 40px; overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card); }
table.compare { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 0.97rem; }
.compare th, .compare td { padding: 16px 20px; text-align: center; border-bottom: 1px solid var(--border); }
.compare tbody th { font-weight: 500; }
.compare td svg { width: 18px; height: 18px; margin-inline: auto; }
.compare .dash { display: block; width: 12px; height: 2px; border-radius: 2px; background: var(--muted-fg); margin-inline: auto; opacity: 0.6; }
@media (max-width: 639px) {
  table.compare { min-width: 0; font-size: 0.88rem; }
  .compare th, .compare td { padding: 12px 8px; }
  .compare th:first-child, .compare td:first-child { padding-left: 14px; }
  .compare thead th:not(:first-child), .compare td { width: 64px; }
}
.compare th:first-child, .compare td:first-child { text-align: left; }
.compare thead th { font-weight: 700; background: var(--tile); }
.compare thead th.top { color: var(--primary); }
.compare tbody tr:last-child td, .compare tbody tr:last-child th { border-bottom: none; }
.compare .no { color: var(--muted-fg); }
.compare .yes { color: var(--primary); font-weight: 600; }

/* Questions. */
.faq { margin-top: 40px; display: grid; gap: 12px; }
.faq details { border-radius: var(--radius); background: var(--tile); padding: 0 24px; }
.faq summary { cursor: pointer; list-style: none; padding: 20px 0; font-weight: 600; font-size: 1.05rem; display: flex; justify-content: space-between; gap: 16px; align-items: center; min-height: 44px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.5rem; line-height: 1; color: var(--primary); font-weight: 400; transition: transform 0.25s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 0 22px; color: var(--muted-fg); max-width: 46rem; }

/* The apply panel: the one dark block on the page, rounded like the screens. */
.panel { background: var(--raised-chrome); color: var(--chrome-fg); border-radius: 40px; padding: clamp(28px, 6vw, 72px); position: relative; overflow: hidden; border: 1px solid var(--raised-border); }
.panel::before { content: ""; position: absolute; right: -120px; top: -120px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(closest-side, rgb(59 188 245 / 0.16), transparent); pointer-events: none; }
.panel h2 { color: var(--chrome-heading); }
.panel .sub { color: var(--chrome-fg); }
.apply-grid { display: grid; gap: 44px; grid-template-columns: 1fr; align-items: center; position: relative; }
@media (min-width: 940px) { .apply-grid { grid-template-columns: 1fr 1.05fr; gap: 64px; } }
.path { list-style: none; margin: 36px 0 0; padding: 0; display: grid; gap: 20px; counter-reset: path; }
.path li { display: grid; grid-template-columns: 36px 1fr; gap: 14px; counter-increment: path; }
.path li::before { content: counter(path); width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 0.9rem; color: var(--sky-bright); border: 1.5px solid rgb(59 188 245 / 0.45); }
.path b { color: var(--chrome-heading); display: block; font-weight: 600; }
.path span { color: var(--chrome-fg); font-size: 0.96rem; }
.reply-note { margin-top: 32px; color: var(--chrome-muted); font-size: 0.95rem; }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px; position: relative; }
.cta-row h2 { max-width: 18ch; }

/* The application form. */
.contact { background: var(--card); color: var(--card-fg); border-radius: var(--radius-lg); padding: clamp(22px, 3vw, 32px); display: grid; gap: 14px; }
.contact .field { display: grid; gap: 6px; }
.contact label { font-weight: 600; font-size: 0.88rem; color: var(--card-fg); }
.contact input, .contact select, .contact textarea {
  width: 100%; min-height: 48px; padding: 10px 14px; font: inherit; font-size: 16px;
  color: var(--card-fg); background: var(--tile);
  border: 1px solid var(--field-border); border-radius: 12px; transition: border-color 160ms ease, background-color 160ms ease;
}
.contact input:hover, .contact select:hover, .contact textarea:hover { border-color: var(--fg-soft); }
.contact textarea { resize: vertical; }
.contact input:focus, .contact select:focus, .contact textarea:focus { outline: 2px solid var(--sky); outline-offset: 1px; border-color: var(--sky); background: var(--card); }
.contact .row2 { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 520px) { .contact .row2 { grid-template-columns: 1fr 1fr; } }
.contact .trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.contact .form-note { font-size: 0.86rem; color: var(--muted-fg); }
.contact .form-status { min-height: 1.2em; font-size: 0.95rem; font-weight: 500; color: var(--primary); }
.contact .form-status:empty { display: none; }
.contact .form-status.error { color: var(--destructive); }
.contact .btn { width: 100%; }
.contact.sent .field, .contact.sent .row2, .contact.sent .btn, .contact.sent .form-note { display: none; }
.contact.sent .form-status { font-size: 1.1rem; padding: 28px 4px; }

/* Footer: black, in columns. */
footer.site { background: var(--chrome); color: var(--chrome-muted); border-top: 1px solid var(--chrome-border); padding: 64px 0 40px; font-size: 0.94rem; margin-top: clamp(72px, 9vw, 120px); }
.foot-grid { display: grid; gap: 32px; grid-template-columns: 1fr 1fr; }
@media (min-width: 820px) { .foot-grid { grid-template-columns: 2fr 1fr 1fr; } }
.foot-brand { grid-column: 1 / -1; }
@media (min-width: 820px) { .foot-brand { grid-column: auto; } }
.foot-brand p { margin-top: 14px; max-width: 30ch; }
.foot-title { margin: 0 0 8px; font-weight: 700; color: var(--chrome-heading); font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; }
.foot-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.foot-col a { color: var(--chrome-fg); display: inline-block; padding: 10px 0; }
.foot-col a:hover { color: var(--sky-bright); }
.foot-base { margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--chrome-border); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; }
.foot-base a { color: var(--chrome-fg); }
.foot-base a:hover { color: var(--sky-bright); }

/* Thanks page. */
.thanks { min-height: 100vh; display: grid; place-items: center; background: var(--chrome); color: var(--chrome-fg); padding: 32px 16px; text-align: center; }
.thanks main { max-width: 36rem; display: grid; justify-items: center; gap: 14px; }
.thanks img { width: 60px; height: 60px; border-radius: 16px; }
.thanks h1 { color: var(--chrome-heading); font-size: clamp(2rem, 6vw, 3rem); margin-top: 8px; }
.thanks p { font-size: 1.1rem; }
.thanks .btn { margin-top: 12px; }

/* A phone: tighter tiles, softer shadows that stay inside the screen. */
@media (max-width: 639px) {
  :root { --window-shadow: 0 24px 40px -24px rgb(4 18 26 / 0.45); }
  .tile { min-height: 0; }
  .ch { min-width: 0; font-size: 0.62rem; padding: 3px 6px; }
  .tile .art .mini { font-size: 0.82rem; }
  .panel { padding: 28px 14px 14px; border-radius: 28px; }
  .panel .apply-grid > div:first-child { padding: 0 8px; }
  .contact { padding: 20px 16px; }
  .sheet { grid-template-columns: 0.8fr auto 1.2fr; }
}
@media (max-width: 399px) { .hero .thread-top .chip-dim { display: none; } }

/* Asked for no motion: everything is where it ends up, and nothing moves. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal, .js [data-play] .p, .js [data-play] .fill .now, .js [data-play] .swap .now, .js .spot-bars.big[data-play] i { opacity: 1; transform: none; }
  .js [data-play] .fill .was, .js [data-play] .swap .was { visibility: hidden; }
  .js [data-play] .stepper .track i { transform: none; }
  .js .story [data-play] .meter i.on { background: var(--sky-bright); }
}