/* The home page redesign (October 2026), from the Claude Design handoff
   "Homepage review board". index.html only, linked after refine.css.

   Two halves. The first is the four sections that are new: the night hero,
   the three-card panel that rides over its bottom edge, Callout Cover and the
   pricing card. The second is what the redesign changes about the sections it
   kept from v1 (How it works, the trial form, the FAQ): those still draw from
   styles.css, credolex-anim.css and refine.css, and the rules here only adjust
   them, the same overrides the prototype applied inside its shadow roots.

   The page as it stood before all this is at /v1/, with its own frozen copies
   of the three shared stylesheets. */

:root {
  --gutter: clamp(20px, 4.4vw, 64px);
  /* The hero's first screen, and how far the three cards ride up over its
     bottom edge. The hero is the two together, so the overlap is only met
     once the page starts to scroll. */
  --cxh-h: clamp(620px, 100svh, 1100px);
  --cxh-ov: clamp(56px, 6vw, 96px);
}

body { color: #1A2432; }

/* ── 1. Hero ──────────────────────────────────────────────────────────────── */

.cxh {
  position: relative;
  z-index: 2;
  overflow: hidden;
  background: #060D19;
  container-type: inline-size;
  /* The first screen holds the copy and the whole building; the extra
     --cxh-ov below it is where the three cards land. */
  height: calc(var(--cxh-h) + var(--cxh-ov));
  display: flex;
  flex-direction: column;
}

.cxh__photo {
  /* Always the full width of the window, never letterboxed or blurred: wider
     than the photo's own height allows, it is simply larger, and what it
     loses is snow at the bottom. Placed so the top of the building (41% down
     the photo) lands 48% of the way down the first screen, below the
     buttons, and never so high that its bottom edge leaves a gap. --w is the
     photo's width, at least what would fill 72% of the first screen. */
  --w: max(108cqw, var(--cxh-h) * 1.29);
  position: absolute;
  left: 50%;
  width: var(--w);
  aspect-ratio: 2752 / 1536;
  top: max(var(--cxh-h) * .48 - var(--w) * .2288, var(--cxh-h) + var(--cxh-ov) - var(--w) / 1.7917);
  transform: translateX(-50%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 18%);
}
.cxh__photo img { display: block; width: 100%; height: 100%; max-width: none; }
@media (max-width: 759px) {
  .cxh__photo { --w: max(100cqw, var(--cxh-h) * .9); transform: translateX(-58%); }
}
.cxh__shade {
  position: absolute;
  inset: 0 0 auto 0;
  height: 60%;
  background: linear-gradient(180deg, rgba(15,22,33,.72) 0%, rgba(15,22,33,.38) 55%, rgba(15,22,33,0) 100%);
  pointer-events: none;
}

.cxh__head {
  position: relative;
  z-index: 3;
  width: 100%;
  margin: 0 auto;
  padding: 22px clamp(20px, 3.8vw, 72px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.cxh__logo { display: flex; align-items: center; border-radius: 9px; }
.cxh__logo img { height: 26px; width: auto; display: block; }
.cxh__logo:focus-visible { outline: 2px solid #FAF8F3; outline-offset: 4px; }

.cxh__nav { display: flex; align-items: center; gap: 30px; }
.cxh__nav a {
  color: rgba(255,255,255,.82);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  border-radius: 6px;
  transition: color 150ms cubic-bezier(.2,.7,.4,1);
}
.cxh__nav a:hover { color: #FFFFFF; }
.cxh__nav a:focus-visible { outline: 2px solid #FAF8F3; outline-offset: 4px; color: #FFFFFF; }
.cxh__nav a.cxh__navcta,
.cxh__mob .cxh__navcta {
  color: #FFFFFF;
  font-size: 14.5px;
  font-weight: 600;
  padding: 10px 18px;
  white-space: nowrap;
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 9px;
  transition: background-color 150ms cubic-bezier(.2,.7,.4,1), border-color 150ms cubic-bezier(.2,.7,.4,1);
}
.cxh__nav a.cxh__navcta:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.8); color: #FFFFFF; }
.cxh__nav a.cxh__navcta:focus-visible { outline-offset: 3px; }

.cxh__mob { display: none; align-items: center; gap: 8px; }
.cxh__mob .cxh__navcta {
  font-size: 14px;
  padding: 0 12px;
  height: 44px;
  display: flex;
  align-items: center;
  text-decoration: none;
}
.cxh__burger {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 9px;
  color: #FFFFFF;
  cursor: pointer;
}
.cxh__burger svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.cxh__mob a:focus-visible,
.cxh__burger:focus-visible { outline: 2px solid #FAF8F3; outline-offset: 3px; }

.cxh__menu {
  position: absolute;
  z-index: 4;
  top: 80px;
  left: 16px;
  right: 16px;
  padding: 8px;
  border-radius: 12px;
  background: rgba(15,22,33,.86);
  border: 1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: 0 14px 34px rgba(26,36,50,.18);
  display: flex;
  flex-direction: column;
}
.cxh__menu[hidden] { display: none; }
.cxh__menu a { color: #FFFFFF; text-decoration: none; padding: 12px 14px; border-radius: 9px; font-size: 16px; }
.cxh__menu a:hover { color: #FFFFFF; background: rgba(255,255,255,.08); }

@media (max-width: 759px) {
  .cxh__nav { display: none; }
  .cxh__mob { display: flex; }
}
@media (min-width: 760px) {
  .cxh__menu { display: none !important; }
}

/* .hero__body, .hero__eyebrow and .hero__lede keep their names because
   landingProse.test.ts reads the hero by them. Every property the v1 rules in
   styles.css set on those classes is restated here, so nothing of the old
   cream hero leaks into the night one. */
.cxh .hero__body {
  position: relative;
  z-index: 2;
  max-width: 1400px;
  width: 100%;
  margin: clamp(20px, 8vh, 96px) auto 0;
  padding: 0 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.cxh .hero__eyebrow {
  display: block;
  margin: 0 0 12px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
}
.cxh .hero__eyebrow::before { content: none; }
/* The head term is a plain description of the product and stays in the page
   for crawlers and screen readers; it is not drawn. Clipped rather than
   display:none, because display:none text is the form search engines and
   assistive tech both skip. */
.cxh .hero__eyebrow--sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.cxh__title {
  margin: 0;
  font-family: 'Averia Serif Libre', Georgia, serif;
  font-weight: 400;
  font-size: clamp(32px, min(4.6vw, 7.8vh), 88px);
  line-height: 1.06;
  letter-spacing: -.015em;
  color: #FFFFFF;
  text-wrap: balance;
}
.cxh__title span { display: block; }
.cxh .hero__lede {
  margin: clamp(18px, 3.6vh, 34px) 0 0;
  max-width: clamp(620px, 58vw, 1120px);
  text-align: center;
  font-size: clamp(17px, 1.32vw, 25px);
  line-height: 1.6;
  color: rgba(255,255,255,.9);
  text-wrap: balance;
}
/* The closing line of the lede: its own paragraph because the whole sentence
   is past landingProse.test.ts's 220 characters, and it reads better alone. */
.cxh__acts {
  margin-top: clamp(22px, 3.9vh, 40px);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  width: 100%;
  max-width: 560px;
}
.cxh__btn {
  flex: 0 1 auto;
  min-width: 190px;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 50px;
  padding: 0 32px;
  border-radius: 9px;
  background: #FAF8F3;
  color: #1D3450;
  text-decoration: none;
  font-size: 16px;
  font-weight: 600;
  transition: background-color 150ms cubic-bezier(.2,.7,.4,1), border-color 150ms cubic-bezier(.2,.7,.4,1);
}
.cxh__btn svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.cxh__btn:hover { background: #FFFFFF; color: #1D3450; }
.cxh__btn:focus-visible { outline: 2px solid #FAF8F3; outline-offset: 3px; }
.cxh__btn:active { transform: translateY(1px); }
.cxh__btn--ghost { background: transparent; border: 1px solid rgba(255,255,255,.6); color: #FFFFFF; }
.cxh__btn--ghost:hover { background: rgba(255,255,255,.12); border-color: #FFFFFF; color: #FFFFFF; }
/* On a phone the two buttons stack full width at the old size. */
@media (max-width: 759px) {
  .cxh__acts { max-width: 440px; gap: 10px; }
  .cxh__btn { flex: 1 1 190px; min-width: 0; height: 44px; padding: 0 18px; font-size: 14.5px; }
}

.cxh__spacer { flex: 1 1 0; min-height: 24px; }

/* Lines that settle into place (js/rise.js). Hidden only until the
   script has picked them up, and shown after a moment regardless, so a failed
   script never leaves the headline blank. */
.js [data-rise]:not(.is-risen) { visibility: hidden; animation: cxrise-safe 0s 1.4s forwards; }
@keyframes cxrise-safe { to { visibility: visible; } }
/* A transform needs a box: the lede's two sentences become two lines. */
.cxh .hero__lede.is-risen > span { display: inline-block; }
.cxh__photo img { transform-origin: 50% 62%; }
/* Headline letters (js/letters.js). Words stay whole so wrapping is unchanged. */
[data-letters] .lx { display: inline; }
[data-letters] .lw { display: inline-block; white-space: nowrap; perspective: 600px; }
[data-letters] .lt { display: inline-block; }
@media (prefers-reduced-motion: reduce) { .js [data-rise]:not(.is-risen) { visibility: visible; animation: none; } }

/* ── 2. The three cards, riding over the hero's bottom edge ───────────────── */

.cxp {
  position: relative;
  z-index: 4;
  margin-top: calc(-1 * var(--cxh-ov));
  padding: 0 clamp(20px, 4.4vw, 64px);
}
.cxp__panel {
  max-width: 1180px;
  margin: 0 auto;
  border: 1px solid #E4E0D6;
  border-radius: 12px;
  box-shadow: 0 14px 34px rgba(26,36,50,.18);
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  background: #E4E0D6;
  overflow: hidden;
}
.cxp__item {
  flex: 1 1 calc((100% - 2px) / 3);
  min-width: min(100%, 300px);
  padding: clamp(22px, 2.4vw, 32px) clamp(20px, 2.2vw, 32px) clamp(24px, 2.6vw, 34px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #FFFFFF;
}
.cxp__item > :first-child { display: block; min-height: 272px; margin-bottom: 8px; }
.cxp__h {
  margin: 0;
  font-family: 'Averia Serif Libre', Georgia, serif;
  font-weight: 400;
  font-size: clamp(21px, 1.7vw, 25px);
  line-height: 1.15;
  letter-spacing: -.01em;
  color: #1A2432;
  text-wrap: balance;
}
.cxp__p { margin: 0; font-size: 15px; line-height: 1.6; color: #4A5768; text-wrap: pretty; }

/* ── 3. How it works: v1's section, pulled up behind the three cards ─────── */

.cxhow { position: relative; z-index: 1; margin-top: -400px; }
.cxhow .section { margin-top: 0; }
.cxhow .section--how { padding-top: calc(400px + clamp(36px, 3.6vw, 56px)); }
.cxhow .card--how::before,
.cxhow .card::before { display: none !important; }

/* A step smaller than v1 drew it: the section was 2,600px tall at 1440. */
.cxhow .card--how { padding: clamp(24px, 3vw, 44px) clamp(20px, 3.2vw, 48px) clamp(28px, 3.2vw, 48px); }
.cxhow .h2 { font-size: clamp(24px, 1.4vw + 11px, 32px); }
.cxhow .how2-steps { margin-top: 36px; gap: 16px; }
.cxhow .how2-step { padding: 24px 28px; gap: 0 32px; }
.cxhow .how2-num { font-size: clamp(56px, 5vw, 80px); }
.cxhow .how2-title { font-size: clamp(19px, .6vw + 14px, 23px); margin-bottom: 8px; }
.cxhow .how2-text { font-size: 15px; }
.cxhow .section--how::after { background: radial-gradient(660px 520px at 98% 88%, rgba(44,74,110,.16), transparent 66%); }

/* Condensed: the four steps sit two by two, the numeral beside the title
   rather than above it, and the plate closes the card with no white under it. */
.cxhow .card--how { --how-pad-x: clamp(20px, 3.2vw, 44px); padding: clamp(22px, 2.6vw, 36px) var(--how-pad-x) 0; }
.cxhow .how2-steps { margin-top: 28px; gap: 14px; }
.cxhow .how2-step { padding: 20px 22px; gap: 14px 28px; }
.cxhow .how2-body { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; align-items: baseline; }
.cxhow .how2-num { grid-row: 1 / span 2; margin: 0; font-size: 34px; line-height: 1; }
.cxhow .how2-num::after { display: none; }
.cxhow .how2-title { font-size: clamp(18px, .4vw + 13px, 20px); margin: 0 0 4px; }
.cxhow .how2-text { font-size: 14.5px; line-height: 1.55; max-width: none; }
.cxhow .how2-safe { grid-column: 2; display: flex; gap: 7px; align-items: baseline; margin: 8px 0 0; font-size: 13.5px; line-height: 1.5; color: #4A5768; }
.cxhow .how2-safe svg { flex: none; position: relative; top: 2px; color: #2C4A6E; }
.cxhow .hx { height: 244px; }

/* One card, one step at a time (7 October 2026). With script, js/home.js
   turns the four step cards into a single panel: the steps listed down the
   left, the active one's vignette on the right, and buttons to step through.
   Each <li> becomes display: contents so its body and its art can sit in
   different columns of the one grid. Without script none of this applies and
   the four cards stand as they were. */
.cxhow .how2-steps.is-tour {
  position: relative;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  grid-template-rows: repeat(4, auto) 1fr auto;
  gap: 6px 32px;
  padding: 24px;
  border-radius: 16px;
  background: #FFFFFF;
  box-shadow: 0 0 0 1px #E4E0D6;
  overflow: hidden;
}
.cxhow .is-tour > .how2-step { display: contents; }
.cxhow .is-tour .how2-num { animation: none; }

.cxhow .is-tour .how2-body {
  grid-column: 1;
  align-items: center;
  padding: 13px 16px;
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px transparent;
  cursor: pointer;
  transition: background-color 150ms cubic-bezier(.2, .7, .4, 1), box-shadow 150ms cubic-bezier(.2, .7, .4, 1);
}
.cxhow .is-tour > .how2-step:nth-child(1) .how2-body { grid-row: 1; }
.cxhow .is-tour > .how2-step:nth-child(2) .how2-body { grid-row: 2; }
.cxhow .is-tour > .how2-step:nth-child(3) .how2-body { grid-row: 3; }
.cxhow .is-tour > .how2-step:nth-child(4) .how2-body { grid-row: 4; }
.cxhow .is-tour .how2-body:hover { background: #F4F7FB; }
.cxhow .is-tour .how2-body:focus-visible { outline: 2px solid #2C4A6E; outline-offset: 2px; }
.cxhow .is-tour > .how2-step.is-active .how2-body { background: #E8EDF4; box-shadow: inset 0 0 0 1px #D3DEEC; }

.cxhow .is-tour .how2-num {
  grid-row: 1;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: #EFF2F4;
  color: #7A8798;
  font-family: 'Inter Tight', Inter, sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  transition: background-color 150ms cubic-bezier(.2, .7, .4, 1), color 150ms cubic-bezier(.2, .7, .4, 1);
}
.cxhow .is-tour > .how2-step.is-active .how2-num { background: #2C4A6E; color: #FFFFFF; }
.cxhow .is-tour .how2-title { margin: 0; font-size: clamp(16.5px, .3vw + 13px, 18px); color: #4A5768; }
.cxhow .is-tour > .how2-step.is-active .how2-title { color: #1D3450; }
.cxhow .is-tour .how2-text { display: none; grid-column: 2; margin-top: 6px; }
.cxhow .is-tour > .how2-step.is-active .how2-text { display: block; }
.cxhow .is-tour .how2-safe { display: none; grid-column: 2; }
.cxhow .is-tour > .how2-step.is-active .how2-safe { display: flex; }

.cxhow .is-tour .how2-art { grid-column: 2; grid-row: 1 / -1; align-self: center; }
.cxhow .is-tour > .how2-step:not(.is-active) .how2-art { display: none; }

.cxhow .how2-nav {
  grid-column: 1;
  grid-row: 6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 18px;
  padding: 0 4px;
}
.cxhow .how2-nav__btns { display: flex; gap: 10px; }
.cxhow .how2-nav__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 150ms cubic-bezier(.2, .7, .4, 1), color 150ms cubic-bezier(.2, .7, .4, 1),
              box-shadow 150ms cubic-bezier(.2, .7, .4, 1), transform 150ms cubic-bezier(.2, .7, .4, 1);
}
.cxhow .how2-nav__btn svg { width: 16px; height: 16px; }
.cxhow .how2-nav__btn:active { transform: translateY(1px); }
.cxhow .how2-nav__btn:focus-visible { outline: 2px solid #2C4A6E; outline-offset: 3px; }
.cxhow .how2-nav__btn--back { background: #FFFFFF; color: #2C4A6E; box-shadow: inset 0 0 0 1px #E4E0D6; }
.cxhow .how2-nav__btn--back:hover { background: #F4F7FB; box-shadow: inset 0 0 0 1px #D3DEEC; }
.cxhow .how2-nav__btn--back:disabled { color: #C3CAD3; background: #FFFFFF; box-shadow: inset 0 0 0 1px #EEEBE3; cursor: default; transform: none; }
.cxhow .how2-nav__btn--next { background: #2C4A6E; color: #FFFFFF; box-shadow: 0 0 0 rgba(26, 36, 50, 0); }
.cxhow .how2-nav__btn--next:hover { background: #24405F; box-shadow: 0 2px 0 rgba(26, 36, 50, .2); }

/* Where the step list is not on screen, four marks say where you are: the
   open step a navy bar, the rest grey dots. Each is a way to that step. */
.cxhow .how2-nav__dots { display: none; align-items: center; gap: 6px; margin: 0; padding: 0; list-style: none; }
.cxhow .how2-nav__dot {
  display: block;
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #D9DEE5;
  cursor: pointer;
  transition: background-color 150ms cubic-bezier(.2, .7, .4, 1);
}
.cxhow .how2-nav__dot:hover { background: #A9B5C4; }
.cxhow .how2-nav__dot[aria-current] { width: 24px; background: #2C4A6E; }
.cxhow .how2-nav__dot:focus-visible { outline: 2px solid #2C4A6E; outline-offset: 3px; }

/* Narrower than the two columns need: one column, only the active step's
   words above its vignette, the buttons under it. */
@media (max-width: 940px) {
  .cxhow .how2-steps.is-tour { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 22px 16px 18px; }
  .cxhow .is-tour > .how2-step:not(.is-active) .how2-body { display: none; }
  .cxhow .is-tour > .how2-step.is-active .how2-body { grid-row: 1; background: none; box-shadow: none; padding: 0; cursor: default; }
  .cxhow .how2-steps.is-tour { grid-template-rows: auto 1fr auto auto; }
  .cxhow .is-tour .how2-art { grid-column: 1; grid-row: 3; }
  .cxhow .how2-nav { grid-column: 1; grid-row: 4; margin-top: 2px; padding: 0; }
  .cxhow .how2-nav__dots { display: flex; }
}
/* Phones: the vignettes take their phone layouts here and differ in height,
   so the buttons go to the top of the card, where nothing above them moves.
   The card still keeps its tallest step's height (home.js); the slack falls
   at the bottom instead of between the words and the picture. */
@media (max-width: 576px) {
  .cxhow .how2-steps.is-tour { grid-template-rows: auto auto auto 1fr; }
  .cxhow .how2-nav { grid-row: 1; margin: 0 0 4px; padding-bottom: 16px; border-bottom: 1px solid #E4E0D6; }
  .cxhow .is-tour > .how2-step.is-active .how2-body { grid-row: 2; }
  .cxhow .is-tour .how2-art { grid-row: 3; }
}
@media (prefers-reduced-motion: reduce) {
  .cxhow .is-tour .how2-body, .cxhow .is-tour .how2-num, .cxhow .how2-nav__btn, .cxhow .how2-nav__dot { transition: none; }
  .cxhow .how2-nav__btn:active { transform: none; }
}
.cxhow .how2-close { margin-top: 28px; padding-top: 22px; padding-bottom: 22px; }
.cxhow .how2-close__line { font-size: clamp(18px, .5vw + 13px, 21px); }
@media (min-width: 1080px) {
  .cxhow .how2-steps { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cxhow .how2-step { grid-template-columns: minmax(0, 1fr); align-items: start; align-content: start; }
  .cxhow .how2-art, .cxhow .how2-body { grid-column: 1; }
}

/* ── 3a. The comparison: your spreadsheet, sorted into Credolex ──────────────
   October 2026 redesign. Three columns: the spreadsheet as it is kept, six
   connectors carrying each row to where Credolex puts it, and the same list
   sorted by who cannot work. Heads are 52px and rows 76px on a desktop
   because the connector fallback in index.html is drawn for exactly those;
   js/compare-motion.js redraws the connectors from the real rows, so the
   numbers can move as long as both tables move together.

   This is the finished frame. compare-motion.js only ever writes inline
   styles that end where these rules already are. */
.cxhow .section--how .lede { max-width: 560px; margin: 14px auto 0; color: #4A5768; }

.cmp {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .92fr) 112px minmax(0, 1.18fr);
  align-items: start;
  margin-top: 44px;
  font-family: var(--sans);
}
.cmp__side { display: flex; flex-direction: column; gap: 14px; position: relative; min-width: 0; }
.cmp__label {
  display: flex; align-items: center; gap: 8px;
  height: 18px; margin: 0; white-space: nowrap;
  font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: #7A8798;
}
.cmp__label--cx { color: #2C4A6E; }
.cmp__label-dot { width: 7px; height: 7px; border-radius: 50%; background: #C9A227; flex: none; }

/* the spreadsheet: greyer, flatter and squarer than anything Credolex draws */
.cmp__sheet {
  position: relative;
  border: 1px solid #D6D6D2; border-radius: 6px; overflow: hidden;
  background: #FFFFFF; font-size: 15px; color: #2E3238;
  filter: saturate(.7);
}
.cmp__srow {
  display: grid; grid-template-columns: 40px 1.1fr 1.2fr .9fr;
  height: 76px; box-sizing: border-box; border-bottom: 1px solid #E6E6E2;
}
.cmp__srow:last-child { border-bottom: 0; }
.cmp__srow > span {
  display: flex; align-items: center; min-width: 0; padding: 0 14px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border-right: 1px solid #ECECE8;
}
.cmp__srow > span:last-child { border-right: 0; font-variant-numeric: tabular-nums; }
.cmp__srow > .cmp__gut {
  justify-content: center; padding: 0;
  background: #F7F7F5; border-right-color: #DCDCD8;
  font-size: 12.5px; color: #8A8F96;
}
.cmp__srow--head {
  height: 52px; background: #F1F1EE; border-bottom-color: #D6D6D2;
  font-size: 13px; font-weight: 600; color: #5A5F66;
}
.cmp__srow--head > span { border-right-color: #DCDCD8; }
.cmp__srow--head > .cmp__gut { background: transparent; }
.cmp__sheet .cmp__past { color: #9B2C24; font-weight: 600; background: rgba(252, 237, 236, .7); }

.cmp__note {
  align-self: flex-end;
  max-width: 250px; margin: -4px 18px 0 0; padding: 16px 20px 18px;
  background: #FBF0B4; color: #3A3420;
  font-family: var(--serif); font-size: 17px; line-height: 1.4;
  transform: rotate(-2.2deg);
  box-shadow: 0 10px 24px rgba(26, 36, 50, .12);
}

/* the connectors */
.cmp__links { position: relative; padding-top: 32px; }
.cmp__svg { display: block; width: 100%; overflow: visible; }
.cmp__link path { stroke-width: 1.6; stroke-linecap: round; }
.cmp__link circle { fill: #FFFFFF; stroke-width: 1.6; }
.cmp__bead { fill: currentColor; stroke: none; }

/* Credolex */
.cmp__cx {
  position: relative;
  border: 1px solid #E4E0D6; border-radius: 12px; overflow: hidden;
  background: #FFFFFF;
  box-shadow: 0 14px 34px rgba(26, 36, 50, .08);
}
.cmp__crow {
  position: relative;
  display: grid; grid-template-columns: 1.15fr 1fr 1fr;
  height: 76px; box-sizing: border-box; border-bottom: 1px solid #EFEDE5;
}
.cmp__crow > span { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 0 16px; }
.cmp__crow--head {
  height: 52px; background: #FBFCFD; border-bottom-color: #E4E0D6;
  font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #7A8798;
}
.cmp__crow--head > span:first-child { padding-left: 22px; }

.cmp__who { gap: 3px; padding-left: 19px !important; border-left: 3px solid transparent; }
.cmp__crow--expired { background: rgba(252, 237, 236, .45); }
.cmp__crow--expired .cmp__who { border-left-color: #B3261E; }
.cmp__crow--due .cmp__who { border-left-color: #C9A227; }
.cmp__name { font-family: 'Inter Tight', var(--sans); font-weight: 600; font-size: 16px; color: #1A2432; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmp__req { font-size: 13.5px; color: #7A8798; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.cmp__st { align-items: flex-start; gap: 6px; }
.cmp__pill {
  display: inline-flex; align-items: center; gap: 6px;
  height: 24px; padding: 0 10px 0 8px; box-sizing: border-box;
  border-radius: 999px; border: 1px solid;
  font-size: 13px; font-weight: 600; white-space: nowrap;
}
.cmp__pill .pill__g { width: 12px; height: 12px; flex: none; stroke-width: 1.9; }
.cmp__pill--expired { background: #B3261E; border-color: #B3261E; color: #FFFFFF; }
.cmp__pill--due { background: #FDF2E2; border-color: #F0D9B0; color: #9A5B00; }
.cmp__pill--current { background: #E7F1EE; border-color: #C8DED7; color: #0F5C4E; }
.cmp__pill--missing { background: #EFF2F4; border-color: #DDE2E7; color: #4A5768; }
.cmp__when { font-family: 'Inter Tight', var(--sans); font-size: 13.5px; color: #4A5768; font-variant-numeric: tabular-nums; white-space: nowrap; }

.cmp__rem { gap: 7px; }
.cmp__rem .cxdots { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; }
.cmp__rem .cxd {
  position: relative;
  width: 14px; height: 14px; border: 0; border-radius: 0; background: none;
  display: flex; align-items: center; justify-content: center;
}
.cmp__rem .cxd::before {
  content: ''; display: block; box-sizing: border-box;
  width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid #E4E0D6;
}
.cmp__rem .cxd--sent::before { background: #2C4A6E; border: 0; }
.cmp__rem .cxd--next::before { width: 9px; height: 9px; border: 2px solid #2C4A6E; box-shadow: 0 0 0 3px #E8EDF4; }
.cmp__sent { font-size: 13px; color: #4A5768; white-space: nowrap; }

.cmp__tally {
  display: flex; flex-wrap: wrap; gap: 8px 28px;
  margin: 0; padding: 16px 22px;
  background: #FBFCFD; border-top: 1px solid #EFEDE5;
  font-size: 13.5px; color: #4A5768;
}
.cmp__n { font-family: 'Inter Tight', var(--sans); font-variant-numeric: tabular-nums; color: #7A8798; }
.cmp__n--red { color: #B3261E; }
.cmp__n--amber { color: #9A5B00; }

/* The pass of light compare-motion.js sends across the finished table. */
.cmp__shine {
  position: absolute; top: 0; bottom: 0; left: 0; width: 38%;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.7), rgba(255,255,255,0));
  pointer-events: none; opacity: 0;
}
/* The spreadsheet's cell cursor, which reads down column C. */
.cmp__cursor {
  position: absolute; left: 0; top: 0; box-sizing: border-box;
  border: 2px solid #217346; box-shadow: inset 0 0 0 1px rgba(255,255,255,.8);
  pointer-events: none; opacity: 0;
}
.cmp__cursor::after {
  content: ''; position: absolute; right: -4px; bottom: -4px;
  width: 6px; height: 6px; background: #217346; border: 1px solid #FFFFFF;
}

/* 1080 to 1240: both tables stay side by side with a shorter bridge. */
@media (max-width: 1240px) {
  .cmp { grid-template-columns: minmax(0, .9fr) 72px minmax(0, 1.2fr); }
  .cmp__sheet { font-size: 13.5px; }
  .cmp__srow { grid-template-columns: 30px 1fr 1.3fr .9fr; }
  .cmp__srow > span { padding: 0 10px; }
  .cmp__srow > .cmp__gut { padding: 0; }
  .cmp__crow > span { padding: 0 12px; }
  .cmp__crow--head > span:first-child { padding-left: 16px; }
  .cmp__who { padding-left: 13px !important; }
  .cmp__name { font-size: 15px; }
  .cmp__req, .cmp__when { font-size: 12.5px; }
  .cmp__sent { font-size: 12.5px; }
  .cmp__note { font-size: 15.5px; max-width: 230px; }
}

/* Under 1080 the two stack, the spreadsheet first. The connectors have
   nowhere to run, so they go and the tables carry the story. */
@media (max-width: 1079px) {
  .cmp { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 32px; }
  .cmp__links { display: none; }
  .cmp__side--sheet { margin-bottom: 36px; }
  .cmp__srow { height: 56px; }
  .cmp__srow--head { height: 46px; }
  .cmp__crow { height: 70px; }
  .cmp__note { margin-right: 24px; }
}

@media (max-width: 620px) {
  .cmp { margin-top: 24px; }
  .cmp__side { gap: 12px; }
  .cmp__side--sheet { margin-bottom: 28px; }
  .cmp__sheet { font-size: 12.5px; }
  .cmp__srow { grid-template-columns: 24px 1fr 1.05fr .95fr; height: 44px; }
  .cmp__srow--head { height: 36px; font-size: 11px; }
  .cmp__srow > span { padding: 0 7px; white-space: normal; line-height: 1.25; }
  .cmp__srow > span:last-child { white-space: nowrap; }
  .cmp__srow > .cmp__gut { font-size: 11px; }
  .cmp__note { max-width: none; margin: -6px 10px 0 30px; padding: 12px 14px; font-size: 14.5px; }

  /* one card per person: who and status on top, what was sent underneath */
  .cmp__crow--head { display: none; }
  .cmp__crow {
    height: auto;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "who st" "rem rem";
    row-gap: 10px; padding: 14px 14px 13px 0;
  }
  .cmp__crow > span { padding: 0; }
  .cmp__who { grid-area: who; padding-left: 13px !important; }
  .cmp__st { grid-area: st; align-items: flex-end; }
  .cmp__rem {
    grid-area: rem; flex-direction: row !important; justify-content: flex-start !important; align-items: center; gap: 10px;
    margin-left: 16px; padding-top: 10px !important; border-top: 1px dashed #EAE6DA;
  }
  .cmp__name { font-size: 15px; }
  .cmp__tally { padding: 14px 16px; gap: 6px 18px; font-size: 13px; }
}
@media (max-width: 400px) {
  .cmp__srow { grid-template-columns: 1fr 1.05fr .95fr; }
  .cmp__srow > .cmp__gut { display: none; }
  .cmp__sheet { font-size: 12px; }
}

/* Phone layout for the whole of section 3. Nothing below 621px may scroll
   sideways or clip: the spreadsheet fits its panel instead of scrolling
   inside it, the product's table turns into one card per person (name and
   requirement on the left, status on the right, what was sent underneath),
   and the four vignettes stack (how-motion.js, its `nw` layouts). */
@media (max-width: 620px) {
  .cxhow .card--how { --how-pad-x: 14px; padding-top: 24px; }
  .cxhow .h2 { font-size: 25px; line-height: 1.2; text-wrap: balance; }
  .cxhow .how2-steps { margin-top: 24px; gap: 12px; }
  .cxhow .how2-step { padding: 18px 14px 14px; gap: 14px; }
  .cxhow .how2-body { column-gap: 12px; }
  .cxhow .how2-num { font-size: 40px; }
  .cxhow .how2-title { font-size: 19px; line-height: 1.25; text-wrap: balance; }
  .cxhow .how2-text { font-size: 15px; }
  .cxhow .hx { border-radius: 14px; }

  .cxhow .how2-close { display: grid; gap: 16px; margin-top: 20px; padding: 24px 20px 26px; text-align: left; }
  .cxhow .how2-close__line { font-size: 20px; line-height: 1.3; margin: 0; text-wrap: balance; }
  .cxhow .how2-close__cta { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; box-sizing: border-box; min-height: 52px; }
}


/* ── 4. Callout Cover ─────────────────────────────────────────────────────── */

.cxc {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #0F1621 0%, #1D3450 55%, #070D18 100%);
  padding: clamp(64px, 7vw, 104px) clamp(20px, 4.4vw, 64px);
}
.cxc__bg {
  position: absolute;
  inset: 0;
  background: url('assets/hero-night-2400.jpg') 50% 0% / cover no-repeat;
  opacity: .22;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.35) 60%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.35) 60%, transparent 100%);
}
.cxc__in { position: relative; max-width: 1180px; margin: 0 auto; }
.cxc__h {
  margin: 0;
  max-width: 720px;
  font-family: 'Averia Serif Libre', Georgia, serif;
  font-weight: 400;
  font-size: clamp(28px, 2.9vw, 40px);
  line-height: 1.12;
  letter-spacing: -.01em;
  color: #FFFFFF;
  text-wrap: balance;
}
.cxc__eb { margin: 0 0 12px; font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.62); }
.cxc__lede { margin: 14px 0 0; max-width: 620px; font-size: 16px; line-height: 1.6; color: rgba(255,255,255,.75); text-wrap: pretty; }
.cxc__motion { margin-top: clamp(36px, 4.4vw, 56px); }
.cxc__motion cx-callout-motion { display: block; }



/* ── 6. The trial form: a laptop on a desk at night ───────────────────────────
   The section is a 185vh track with a sticky stage. As it scrolls, the photo
   zooms into the laptop and the form wakes on its screen, fitted to the
   screen's four corners by a homography (js/home.js). Under 760px the photo
   stays a backdrop and the form is an ordinary card in the middle of it. */

.form { position: relative; border-radius: 16px !important; box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 30px 70px -20px rgba(0,0,0,.55) !important; }
.fx-prog { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px 12px; margin: 0 0 22px; }
.fx-pl { font-size: 13px; font-weight: 600; color: #1D3450; }
.fx-pc { font-family: 'Inter Tight', Inter, sans-serif; font-variant-numeric: tabular-nums; font-size: 12.5px; font-weight: 600; color: #7A8798; transition: color 300ms var(--ease); }
.fx-pc.full { color: #0F5C4E; }
.fx-bar { grid-column: 1 / -1; height: 4px; border-radius: 999px; background: #EFF2F4; overflow: hidden; }
.fx-bar i { display: block; height: 100%; width: 100%; border-radius: 999px; background: #2C4A6E; transform-origin: 0 50%; transform: scaleX(0); transition: transform 600ms cubic-bezier(.25,1.25,.4,1), background-color 300ms var(--ease); }
.fx-bar.full i { background: #0F5C4E; }
.field { position: relative; }
.field__input { transition: border-color 150ms var(--ease), box-shadow 200ms var(--ease), background-color 150ms var(--ease) !important; }
.field__input:focus { border-color: #2C4A6E !important; box-shadow: 0 0 0 4px #E8EDF4 !important; background: #FFFFFF !important; outline: none !important; }
.fx-ok { position: absolute; right: 12px; width: 22px; height: 22px; border-radius: 999px; background: #E7F1EE; color: #0F5C4E; display: flex; align-items: center; justify-content: center; transform: scale(0); transition: transform 420ms cubic-bezier(.3,1.6,.5,1); pointer-events: none; }
.field.ok .fx-ok { transform: scale(1); }
.field.ok .field__input { border-color: #C9DCD6 !important; }
.field select + .fx-ok { right: 36px; }
.form__submit { position: relative; overflow: hidden; transition: transform 150ms var(--ease), background-color 300ms var(--ease), box-shadow 300ms var(--ease) !important; }
.form__submit::after { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.28), rgba(255,255,255,0)); transform: skewX(-18deg); opacity: 0; }
.form__submit.ready { box-shadow: 0 12px 28px -10px rgba(44,74,110,.7) !important; }
.form__submit.ready::after { opacity: 1; animation: fxSheen 2.4s cubic-bezier(.4,0,.2,1) 2; }
@keyframes fxSheen { 0% { left: -40%; } 55%, 100% { left: 120%; } }
.form__submit:active { transform: translateY(1px); }
.form--done { animation: fxIn 700ms cubic-bezier(.2,.7,.2,1) both; }
@keyframes fxIn { 0% { opacity: 0; transform: translateY(14px) scale(.97); } 100% { opacity: 1; transform: none; } }
.form--done .form__tick polyline { stroke-dashoffset: 17; animation: fxDraw 600ms 250ms cubic-bezier(.2,.7,.2,1) forwards; }
@keyframes fxDraw { to { stroke-dashoffset: 0; } }

.rq { padding: 0 !important; background: #070D18 !important; overflow: clip; }
.rq::before, .rq::after { display: none !important; }
.rq__track { position: relative; height: 185vh; }
.rq__stage { position: -webkit-sticky; position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; transform: none !important; }
.rq__img { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; will-change: transform; display: block; user-select: none; backface-visibility: hidden; }
.rq__scrim { position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 62%, rgba(5,10,20,.25), rgba(5,10,20,.85) 75%), linear-gradient(180deg, rgba(5,10,20,.55), rgba(5,10,20,.1) 40%, rgba(5,10,20,.5)); will-change: opacity; pointer-events: none; }
.rq__lamp { position: absolute; left: 0; top: 0; width: 900px; height: 900px; margin: -450px 0 0 -450px; border-radius: 999px; background: radial-gradient(closest-side, rgba(255,206,130,.32), rgba(255,206,130,.08) 55%, transparent); mix-blend-mode: screen; will-change: transform, opacity; pointer-events: none; }
.rq__intro { position: absolute; left: 0; right: 0; top: 0; padding: 0 24px; text-align: center; display: flex; flex-direction: column; align-items: center; will-change: transform, opacity; }
.rq .request__title { margin: 0 !important; color: #FFFFFF !important; text-wrap: balance; }
.rq .request__lede { margin: 16px auto 0 !important; color: rgba(255,255,255,.86) !important; max-width: 520px; }
.rq__hint { position: absolute; left: 0; top: 0; margin: 0; will-change: transform, opacity; display: flex; white-space: nowrap; align-items: center; gap: 10px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.rq__hint i { position: relative; width: 16px; height: 24px; border-radius: 999px; border: 1.5px solid rgba(255,255,255,.55); display: block; }
.rq__hint i::after { content: ""; position: absolute; left: 50%; top: 5px; width: 2px; height: 5px; margin-left: -1px; border-radius: 2px; background: #FFFFFF; animation: rqWheel 1.6s cubic-bezier(.4,0,.2,1) infinite; }
@keyframes rqWheel { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(7px); opacity: 0; } 100% { opacity: 0; } }
.rq__screen { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform, opacity; border-radius: 4px; overflow: hidden; background: transparent; backface-visibility: hidden; opacity: 0; }
.rq__glass { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(118deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.04) 26%, rgba(255,255,255,0) 42%), radial-gradient(120% 90% at 50% 40%, rgba(0,0,0,0) 60%, rgba(10,16,28,.16) 100%); }
.rq__off { position: absolute; inset: -2px; pointer-events: none; background: #04060B; }
.rq__spill { position: absolute; left: 0; top: 0; border-radius: 999px; background: radial-gradient(closest-side, rgba(215,228,255,.34), rgba(215,228,255,.08) 60%, transparent); mix-blend-mode: screen; pointer-events: none; will-change: transform, opacity; opacity: 0; }
.rq__inner { width: 760px; height: 466px; background: #FAF8F3; }
.ui { width: 100%; height: 100%; display: flex; flex-direction: column; }
.ui__bar { flex: none; height: 26px; display: grid; grid-template-columns: 70px 1fr 70px; align-items: center; padding: 0 12px; background: #EFEDE7; border-bottom: 1px solid #E4E0D6; }
.ui__dots { display: flex; gap: 6px; }
.ui__dots i { width: 9px; height: 9px; border-radius: 999px; background: #D9D5CB; display: block; }
.ui__url { justify-self: center; display: flex; align-items: center; gap: 6px; height: 17px; padding: 0 14px; border-radius: 999px; background: #FFFFFF; border: 1px solid #E4E0D6; font-size: 10.5px; color: #4A5768; white-space: nowrap; }
.ui__body { flex: 1; min-height: 0; display: grid; grid-template-columns: 276px minmax(0, 1fr); }
.ui__side { position: relative; overflow: hidden; background: #1D3450; color: #FFFFFF; padding: 28px 26px 22px; display: flex; flex-direction: column; }
.ui__side::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(to right, rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.06) 1px, transparent 1px); background-size: 32px 32px; -webkit-mask-image: radial-gradient(260px 220px at 100% 100%, #000, transparent 75%); mask-image: radial-gradient(260px 220px at 100% 100%, #000, transparent 75%); }
.ui__logo { position: relative; height: 22px; width: auto; align-self: flex-start; }
.ui__h { position: relative; margin: 30px 0 18px; font-family: var(--serif); font-size: 30px; line-height: 1.08; letter-spacing: -.01em; color: #FFFFFF; }
.ui__ul { position: relative; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.ui__ul li { display: flex; align-items: center; gap: 10px; font-size: 13px; color: rgba(255,255,255,.88); }
.ui__ul i { flex: none; width: 18px; height: 18px; border-radius: 999px; background: #E7F1EE; color: #0F5C4E; display: flex; align-items: center; justify-content: center; }
.ui__note { position: relative; margin: auto 0 0; font-size: 11px; color: rgba(255,255,255,.62); }
.ui__note span { color: #FFFFFF; }
.ui__main { position: relative; display: flex; align-items: center; padding: 0 30px; }
.rq__form { width: 100%; margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; max-width: none !important; }
.rq .fx-prog { margin: 0 0 18px !important; }
.rq .fx-pl { font-size: 12.5px; }
.rq .fx-pc { font-size: 12px; }
/* Filled down the columns, so the work email lands in the second row and the
   three lines reserved under it for its note sit just above the consent line
   rather than opening a gap between the two rows of fields. Tab order is still
   name, email, facility, kind. */
.rq__grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; grid-auto-flow: column; gap: 10px 12px; }

/* v1's .field is a grid with a 7px gap and full-size type. On the laptop screen
   it is the prototype's compact field, and the reserved message line under each
   one shrinks with it rather than going away: see the comment over
   .field__slot in styles.css for why that line is there at all. The email's is
   three lines here, because its standing note wraps three times in a column
   206px wide. */
.rq .field { display: flex; flex-direction: column; gap: 4px; min-width: 0; margin: 0; }
.rq .field__label { font-size: 11.5px; font-weight: 600; color: #1A2432; transform: none !important; }
.rq .field:focus-within .field__label { color: #1A2432; }
.rq .field__input { height: 34px !important; padding: 0 11px !important; font-size: 13.5px !important; border-radius: 8px !important; width: 100%; background: #FFFFFF !important; border: 1px solid #E4E0D6 !important; color: #1A2432; }
.rq .field__input[aria-invalid='true'] { border-color: #C4796F !important; }
.rq .field__slot { min-height: 15px; gap: 2px; }
.rq .field__slot--two { min-height: 45px; }
.rq .field__error, .rq .field__note { font-size: 10.5px; line-height: 1.4; }
.rq .field__error { color: #B3261E; gap: 4px; }
.rq .field__error-g { width: 11px; height: 11px; }
.rq .field__note { color: #7A8798; }
.rq .fx-ok { width: 18px; height: 18px; }
.rq__check { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0 14px; font-size: 10.5px; line-height: 1.45; color: #4A5768; }
.rq__check input { margin-top: 1px; flex: none; width: 13px; height: 13px; accent-color: #2C4A6E; }
.rq__check a { color: #2C4A6E; text-decoration: underline; text-underline-offset: 2px; }
.rq .form__submit { width: 100%; height: 40px !important; margin: 0 !important; border-radius: 9px !important; font-size: 14px !important; }
.rq .form__msg { margin: 8px 0 0; padding: 6px 10px; font-size: 11.5px; border-radius: 8px; background: #FCEDEC; color: #B3261E; }
.rq__done { position: absolute; inset: 0; padding: 0 34px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: none !important; border: 0 !important; box-shadow: none !important; }
.rq__done[hidden] { display: none !important; }

/* No script, no scene: the photo is a still backdrop and the form is a card in
   the middle of it, which is where the scene ends anyway. <html class="js"> is
   set by one line in the head, so the scene's starting frame is never painted
   on a page that cannot move it. */
html:not(.js) .rq__track { height: auto; }
html:not(.js) .rq__stage { position: relative; height: auto; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 40px; padding: 120px 16px 96px; }
html:not(.js) .rq__img { width: 100%; height: 100%; object-fit: cover; }
html:not(.js) .rq__intro, html:not(.js) .rq__screen { position: relative; opacity: 1; }
html:not(.js) .rq__inner { max-width: 100%; }
html:not(.js) .rq__hint, html:not(.js) .rq__off, html:not(.js) .rq__spill, html:not(.js) .rq__lamp { display: none; }

@media (max-width: 760px) {
  .rq__inner { width: min(92vw, 420px); height: auto; }
  .ui__bar, .ui__side { display: none; }
  .ui__body { grid-template-columns: 1fr; }
  .ui__main { padding: 24px 22px; }
  .rq__screen { border-radius: 16px; }
  .rq__off, .rq__glass { display: none; }
  .rq__grid { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; }
  .rq .field__slot--two { min-height: 30px; }
  .rq__done { position: static; padding: 24px 0; }
}

/* Motion that stops. The arrow between the spreadsheet and the Credolex list
   nudges three times and rests; the ready button's sheen passes twice. A loop
   that never ends on a part of the page somebody is reading is a loop they
   learn to look past. See js/motion-clock.js. */

@media (prefers-reduced-motion: reduce) {
  .rq__hint i::after { animation: none; }
  .form__submit.ready::after { animation: none; opacity: 0; }
  .form--done, .form--done .form__tick polyline { animation: none; stroke-dashoffset: 0; }
  .cxh__btn, .cxh__nav a { transition: none; }
}

.cxh__price {
  margin: 12px 0 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(255,255,255,.82);
  text-align: center;
}

/* Phones: the lede is longer than the screen is wide, so it takes the old
   size and tighter gaps, which keeps the phone clear of the buttons. */
@media (max-width: 759px) {
  .cxh .hero__body { margin-top: clamp(8px, 4vh, 56px); }
  .cxh .hero__lede { font-size: 15px; margin-top: 14px; }
  .cxh__acts { margin-top: 18px; }
}

/* ── GPU finishes (js/gpu-finish.js) ──────────────────────────────────────── */
/* Each finish is CSS first. The canvas the script adds is hidden until it has
   drawn (.is-gpu), and the CSS it covers is what everyone else keeps. */

.gpu-canvas { position: absolute; display: block; pointer-events: none; opacity: 0;
  transition: opacity 600ms cubic-bezier(.2,.7,.4,1); }
.is-gpu > .gpu-canvas { opacity: 1; }

/* The gold rule along the top of a white panel: the brand's 3px fade, which
   the GPU turns into metal with a glint travelling along it. */
.card--how { position: relative; }
/* The span covers the whole panel, rounded like it, so the 4px bar at its
   top is clipped to the panel's corners without clipping the panel. */
.gold-rule { position: absolute; z-index: 3; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; }
.gold-rule::before, .gold-rule .gpu-canvas {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 4px;
  -webkit-mask-image: linear-gradient(90deg, #000 35%, transparent 92%);
  mask-image: linear-gradient(90deg, #000 35%, transparent 92%);
}
.gold-rule::before { background: #C9A227; }
.gold-rule.is-gpu::before { display: none; }

@media (prefers-reduced-motion: reduce) {
  .gpu-canvas { transition: none; }
}

/* ── Condensed, 11 October 2026 ───────────────────────────────────────────
   Jayson asked for every screen to be much more condensed, so a section can
   be read without scrolling inside it on a 900px-tall laptop. These override
   the spacing above rather than editing it line by line. js/compare-motion.js
   redraws the connectors from the real row heights, so the shorter rows need
   nothing from it. */
.cxhow .section--how { padding-top: calc(400px + 28px); }
.cxhow .card--how { padding-top: clamp(18px, 2vw, 26px); }
.cxhow .section--how .lede { margin-top: 8px; }
@media (min-width: 621px) {
  .cmp { margin-top: 22px; }
  .cmp__side { gap: 10px; }
  .cmp__links { padding-top: 28px; }
  .cmp__srow, .cmp__crow { height: 50px; }
  .cmp__srow--head, .cmp__crow--head { height: 38px; }
  .cmp__who { gap: 1px; }
  .cmp__st, .cmp__rem { gap: 3px; }
  .cmp__pill { height: 21px; font-size: 12.5px; }
  .cmp__name { font-size: 15px; }
  .cmp__req, .cmp__when, .cmp__sent { font-size: 12.5px; }
  .cmp__tally { padding: 10px 22px; }
  .cmp__note { margin-top: -10px; padding: 10px 16px 12px; font-size: 15px; }
}
@media (min-width: 621px) and (max-width: 1079px) {
  .cmp__side--sheet { margin-bottom: 24px; }
}
@media (min-width: 621px) {
  .cxhow .how2-steps { margin-top: 20px; }
}

.cxc { padding-top: clamp(28px, 3vw, 44px); padding-bottom: clamp(28px, 3vw, 44px); }
.cxc__eb { margin-bottom: 6px; }
.cxc__lede { margin-top: 8px; }
.cxc__motion { margin-top: 0; }

.rq__track { height: 150vh; }

.faq { padding-top: clamp(40px, 4.4vw, 64px); padding-bottom: clamp(40px, 4.4vw, 64px); }
.faq__body { gap: 24px; }
.faq__group-title { margin-bottom: 8px; }
.faq__q { padding-top: 13px; padding-bottom: 13px; font-size: 15.5px; }

.footer { padding-top: clamp(36px, 3.6vw, 52px); padding-bottom: clamp(24px, 2.4vw, 32px); }

/* Seams, 11 October 2026. With pricing gone, Callout Cover sits straight on
   the pilot section, so the sand torn edge that used to tear into it is gone
   and Callout Cover's night fades down to the pilot section's own dark. The
   laptop photo fades to that same dark at its foot instead of stopping on a
   hard line above the FAQ. */
.rq__stage::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 140px;
  z-index: 4; pointer-events: none;
  background: linear-gradient(180deg, rgba(7,13,24,0) 0%, #070D18 100%);
}

/* ── Short laptops, 16 October 2026 ───────────────────────────────────────
   On a window under about 820px tall the sections below the hero ran 1.4 to
   2.7 screens each, so none could be read whole. They are drawn at 85% there.
   Width is not the trigger: a tall narrow window already fits. The hero, the
   sticky request scene and the header are left alone, since each is sized to
   the viewport already. */
@media (min-width: 621px) and (max-height: 820px) {
  .cxp, .cxhow, .cxc, .faq, .footer { zoom: .85; }
  /* Callout Cover is one screen: its stage shrinks to what is left (js/callout-motion.js). */
  .cxc { padding-top: 24px; padding-bottom: 24px; }
}