/* Fairhold home, round 4. Mobile first (390 px), then wider. */
@font-face { font-family: "Bricolage Grotesque"; src: url("fonts/bricolage-800.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Inter Tight"; src: url("fonts/inter-tight-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Inter Tight"; src: url("fonts/inter-tight-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Inter Tight"; src: url("fonts/inter-tight-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
/* metric-matched fallbacks: while a web font is still loading, Arial is drawn at the same width and line metrics,
   so nothing moves when the real font arrives (layout shift 0) */
@font-face { font-family: "Inter Tight Fallback"; src: local("Arial"), local("ArialMT"); font-weight: 500; size-adjust: 97.63%; ascent-override: 99.23%; descent-override: 24.71%; line-gap-override: 0%; }
@font-face { font-family: "Inter Tight Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"); font-weight: 600; size-adjust: 93.25%; ascent-override: 103.89%; descent-override: 25.87%; line-gap-override: 0%; }
@font-face { font-family: "Inter Tight Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"); font-weight: 700; size-adjust: 95.21%; ascent-override: 101.75%; descent-override: 25.33%; line-gap-override: 0%; }
@font-face { font-family: "Bricolage Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"); font-weight: 800; size-adjust: 98.40%; ascent-override: 94.51%; descent-override: 27.44%; line-gap-override: 0%; }
/* figures and $: the papers use tabular figures, wider than Arial's */
@font-face { font-family: "Inter Tight Fallback"; src: local("Arial"), local("ArialMT"); font-weight: 500; unicode-range: U+0024, U+0030-0039; size-adjust: 108.92%; ascent-override: 88.94%; descent-override: 22.15%; line-gap-override: 0%; }
@font-face { font-family: "Inter Tight Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"); font-weight: 600; unicode-range: U+0024, U+0030-0039; size-adjust: 112.92%; ascent-override: 85.79%; descent-override: 21.36%; line-gap-override: 0%; }
@font-face { font-family: "Inter Tight Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"); font-weight: 700; unicode-range: U+0024, U+0030-0039; size-adjust: 115.95%; ascent-override: 83.55%; descent-override: 20.80%; line-gap-override: 0%; }

:root {
  --forest: #0B4F37;      /* brand deep green */
  --green: #116B4B;       /* brand green; also the app's green answer */
  --paper: #F2F1EB;       /* the app's paper */
  --sheet: #FFFFFF;       /* the rate con */
  --ink: #17181A;
  --ink2: #3B3E42;
  --muted: #55585C;
  --line: #D6D4CA;
  --red: #B23B32;         /* the app's red answer, used for nothing else */
  --gold: #F2C95A;        /* the coin in the logo: Free, on green */
  --on-green: #FFFFFF;
  --on-green-2: #D3E6DB;
  --pw: min(358px, calc(100vw - 32px));   /* phone frame width */
  --display: "Bricolage Grotesque", "Bricolage Fallback", system-ui, sans-serif;
  --text: "Inter Tight", "Inter Tight Fallback", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 500 18px/1.45 var(--text); }
img { display: block; max-width: 100%; }
h1, h2, h3, p, figure { margin: 0; }
a { color: inherit; }
b { font-weight: 700; }
:focus-visible { outline: 3px solid var(--green); outline-offset: 4px; border-radius: 6px; }

.skip:focus-visible { outline-color: var(--gold); }
.skip { position: absolute; left: 12px; top: -80px; z-index: 5; background: var(--paper); color: var(--forest); padding: 12px 16px; border-radius: 8px; font-weight: 700; }   /* a paper button on the forest band */
.skip:focus { top: 12px; }

/* ---------- header: the name and the icon, nothing else ---------- */
.top { padding: 8px 20px 0; max-width: 1280px; margin: 0 auto; }
.brand:focus-visible { outline-color: var(--gold); }
/* the masthead: the name and the headline on the brand's deep green, edge to edge (the badge stays on paper) */
.top, h1 { border-image: linear-gradient(var(--forest), var(--forest)) fill 0 / / 0 100vmax; }   /* one paint, no seam, no sideways scroll */
.brand { display: inline-flex; align-items: center; gap: 10px; min-height: 56px; text-decoration: none; }
.brand img:first-child { width: 40px; height: 40px; border-radius: 10px; }
.brand-word { width: 114px; height: 28px; }

/* ---------- first screen ---------- */
.stage { padding: 0 20px; }
.intro { padding: 0 0 8px; }
h1 { font: 800 clamp(38px, 10.3vw, 66px)/1.02 var(--display); letter-spacing: -0.022em; color: var(--paper); max-width: none; padding: 6px 0 24px; text-wrap: balance; }
.what { margin-top: 18px; font-size: 19px; line-height: 1.42; color: var(--ink); max-width: 31em; }
.keep { white-space: nowrap; }   /* "rate con" is one term: never "rate / con" in the headline */
.t-red { color: var(--red); }
.t-green { color: var(--green); }

/* Apple's badge: as is, 52 px tall, a quarter of its height (13 px) clear on every side; focus ring only around its link */
.badge { display: inline-block; margin: 22px 0 0; line-height: 0; border-radius: 10px; }
.badge img { width: auto; height: 52px; }
.badge:focus-visible { outline-offset: 6px; }

/* the badge and Free, with a small real iPhone beside them on phones and tablets (the big ones follow below) */
.act { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "badge mini" "free mini" "droid droid"; grid-template-rows: auto 1fr auto; column-gap: 16px; align-items: start; }
.act .badge { grid-area: badge; justify-self: start; }
.act .free { grid-area: free; margin-top: 30px; }   /* keeps the tall F of Free out of the badge clear space */
.mini { grid-area: mini; width: 112px; margin-top: 14px; }
.act .droid { grid-area: droid; }

.free { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 12px; row-gap: 0; margin-top: 18px; }
.free b { font: 800 50px/1 var(--display); letter-spacing: -0.025em; color: var(--forest); }   /* green is kept for the green answer */
.free-tx { font-size: 18px; font-weight: 600; color: var(--ink); line-height: 1.3; text-wrap: balance; }
.what, .ex-sub, .says, .get-fine, .pro-tx, .pro-fine, .foot-fine p, .d-note, .pro-price { text-wrap: pretty; }   /* no single word left alone on a last line */

.droid { margin-top: 8px; font-size: 16px; line-height: 24px; color: var(--muted); }
.droid a { display: inline-block; padding: 12px 0; font-weight: 600; color: var(--ink2); text-underline-offset: 3px; }

/* ---------- the two examples: paper, what Fairhold says, the phone ---------- */
.ex { padding-top: 48px; }
.ex-red { --c: var(--red); --tint: #FBEEEC; --edge: rgba(178, 59, 50, .34); }
.ex-green { --c: var(--green); --tint: #E9F2ED; --edge: rgba(17, 107, 75, .34); }
.ex-h { font: 800 30px/1.1 var(--display); letter-spacing: -0.015em; color: var(--c); }
.ex-sub { margin-top: 4px; font-size: 18px; font-weight: 600; color: var(--ink2); }

/* the rate con itself: a plain white sheet, typeset like the paper drivers get */
.paper { margin-top: 16px; }
.doc { background: var(--sheet); border: 1px solid var(--line); border-radius: 6px; padding: 18px 18px 14px;
  box-shadow: 0 1px 0 rgba(23, 24, 26, .04), 0 14px 28px -18px rgba(23, 24, 26, .28); font-variant-numeric: tabular-nums; }
.d-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding-bottom: 10px; border-bottom: 2px solid var(--ink); }
.d-title { font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.d-no { font-size: 14px; color: var(--muted); white-space: nowrap; }
.d-no b { color: var(--ink); font-size: 17px; }
.d-row { display: flex; gap: 10px; margin-top: 10px; font-size: 16px; }
.d-row span { color: var(--muted); }
.d-lane { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; margin-top: 6px; font-size: 17px; }
.d-lane span { color: var(--muted); }
.d-lane .arr { display: block; }   /* drawn: the fonts have no arrow glyph, so a text arrow fell back to a system font */
.d-dates { display: flex; gap: 18px; font-size: 14px; color: var(--muted); }
.d-lines { margin-top: 12px; border-top: 1px solid var(--line); }
.d-lines p, .d-total { display: flex; justify-content: space-between; gap: 12px; }
.d-lines p { padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 17px; }
.d-lines b { font-weight: 600; }
.d-total { margin-top: 2px; padding: 10px 0 4px; border-top: 3px double var(--ink); font-size: 22px; font-weight: 700; }
.d-total b { font-size: 26px; letter-spacing: -0.01em; }
.d-note { margin-top: 10px; font-size: 13px; color: var(--muted); }

/* what is inside the file: set apart from the sheet, in the answer's colour, because no one sees it by looking */
.file { margin-top: 10px; padding: 12px 18px 13px; background: var(--tint); border: 1px solid var(--edge); border-radius: 6px; font-variant-numeric: tabular-nums; }
.file-h { font-size: 15px; font-weight: 700; color: var(--c); }
.file-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-top: 4px; font-size: 17px; }
.file-row span { color: var(--ink2); }
.file-row b { color: var(--c); white-space: nowrap; }

/* what Fairhold says about the paper: one statement on a rule in the answer's colour, running down to the phone */
.says { position: relative; margin-top: 20px; padding: 2px 0 2px 24px; font-size: 19px; line-height: 1.42; color: var(--ink2); }
.says::before { content: ""; position: absolute; left: 6px; top: 4px; bottom: -14px; width: 4px; border-radius: 2px; background: var(--c); transform-origin: top; }
.says::after { content: ""; position: absolute; left: 0; bottom: -24px; border: 8px solid transparent; border-top: 10px solid var(--c); border-bottom: 0; }
.says-lead { display: block; font: 800 24px/1.15 var(--display); letter-spacing: -0.01em; color: var(--c); margin-bottom: 4px; }
.says b { color: var(--c); }

/* Apple's iPhone frame, straight on and whole; the app's still sits in its screen, clipped to the screen's corners */
.phone { margin: 34px 0 0 calc((100% - var(--pw)) / 2); width: var(--pw); }   /* centred on the screen even when 8 px wider than the column */
.phone-in { position: relative; aspect-ratio: 1350 / 2760; }
.phone-scr { position: absolute; left: 5.3333%; top: 2.5%; width: 89.3333%; height: 95%; border-radius: 15.75% / 7.25%; object-fit: cover; }
.phone-frame { position: absolute; inset: 0; width: 100%; height: 100%; }
.phone figcaption { margin-top: 10px; text-align: center; font-size: 15px; color: var(--muted); }

/* a plain text install button after the red result: for the driver who is sold right there */
.ex-get { margin-top: 22px; }
.ex-get a { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 0 14px; border: 2px solid var(--forest);
  border-radius: 12px; color: var(--forest); font-weight: 700; font-size: 18px; text-decoration: none; }
.ex-get a span { font-size: 26px; line-height: 1; }

/* ---------- install again, and the price ---------- */
.get { margin-top: 56px; background: var(--forest); color: var(--on-green); padding: 52px 20px 48px; }
.get-in { max-width: 640px; margin: 0 auto; }
.get-icon { width: 64px; height: 64px; border-radius: 15px; }
.get-h { margin-top: 18px; font: 800 34px/1.06 var(--display); letter-spacing: -0.02em; max-width: 13em; text-wrap: balance; }
.get-fine { margin-top: 14px; font-size: 16px; color: var(--on-green-2); max-width: 30em; }
.get-b { margin-top: 28px; background: var(--paper); color: var(--ink); border-radius: 18px; padding: 22px 20px 22px; }
.get .badge { margin-top: 0; }
.get .free { margin-top: 30px; }   /* clear of the badge's 13 px space, like the first screen */
.pro { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.pro-h { font-size: 18px; font-weight: 700; line-height: 1.3; color: var(--ink); text-wrap: balance; }
.pro-tx { margin-top: 6px; font-size: 16px; color: var(--ink2); }
.pro-price { margin-top: 8px; font-size: 17px; font-weight: 600; line-height: 1.4; color: var(--ink); font-variant-numeric: tabular-nums; }   /* plainly readable, still far quieter than Free (50 px) */
.nw { white-space: nowrap; }
.pro-fine { margin-top: 10px; font-size: 14px; line-height: 1.5; color: var(--muted); }

/* ---------- footer ---------- */
.foot { padding: 36px 20px 40px; color: var(--muted); }
.foot-in { max-width: 1184px; margin: 0 auto; }
.foot-word { width: 122px; height: 30px; }
.foot-nav { margin-top: 12px; display: flex; flex-wrap: wrap; column-gap: 24px; }
.foot-nav a { display: inline-flex; align-items: center; min-height: 48px; color: var(--forest); font-size: 17px; font-weight: 600; text-underline-offset: 3px; }
.foot-fine { margin-top: 12px; padding-top: 16px; border-top: 1px solid var(--line); display: grid; gap: 10px; font-size: 14px; line-height: 1.5; }
.foot-fine p { max-width: 44em; }   /* about 80 characters a line; the rule above still runs the full width */

/* ---------- 720 px and up: each example becomes paper | phone ---------- */
@media (min-width: 720px) {
  :root { --pw: 300px; }
  .top { padding: 16px 32px 0; max-width: 760px; }   /* the logo on the same left edge as the headline and examples */
  .stage { max-width: 760px; margin: 0 auto; padding: 0 32px; }
  .intro { padding-top: 0; max-width: 620px; }
  h1 { padding: 14px 0 34px; }
  .what { margin-top: 24px; }
  .mini { width: 128px; margin-top: 22px; }   /* tablets keep the small iPhone in the first screen: the big one is still a scroll away; its top on the badge's top */
  .act { grid-template-areas: "badge mini" "free mini" "droid mini"; grid-template-rows: auto auto 1fr; }   /* the Android line right under Free, beside the phone */
  .ex { padding-top: 72px; display: grid; grid-template-columns: minmax(0, 1fr) var(--pw); column-gap: 36px;
    grid-template-areas: "h h" "sub sub" "paper phone" "says phone" "get phone" "x phone"; grid-template-rows: auto auto auto auto auto 1fr; }
  .ex-h { grid-area: h; }
  .ex-sub { grid-area: sub; margin-bottom: 18px; }
  .paper { grid-area: paper; margin-top: 0; }
  .says { grid-area: says; margin-top: 22px; }
  .ex-get { grid-area: get; justify-self: start; }
  .says::before { bottom: 4px; }
  .says::after { display: none; }
  .phone { grid-area: phone; margin: 0; }
  .get { margin-top: 80px; padding: 64px 32px 60px; }
  .get-h { font-size: 42px; }
  .foot { padding-left: 32px; padding-right: 32px; }
  .get-in, .foot-in { max-width: 696px; }   /* the band and the footer on that same edge */
}

/* ---------- 1120 px and up: words | paper | phone ---------- */
@media (min-width: 1120px) {
  :root { --pw: 336px; }
  .top { padding: 8px 48px; max-width: 1280px; }   /* 72 px: the icon 16 px from each edge of the band, as on phones */
  /* wide screens: the headline sits in its column beside the edited example, so the band holds the name only */
  h1 { color: var(--forest); border-image: none; padding: 0; max-width: 11.5em; }
  h1 .keep { white-space: normal; }   /* the narrow column here would leave single words on lines (5 lines); 4 lines as accepted */
  .what { margin-top: 14px; }
  .stage { max-width: 1280px; padding: 0 48px; display: grid; grid-template-columns: minmax(0, 1fr) 392px var(--pw); column-gap: 56px; }
  .intro { grid-column: 1; grid-row: 1; align-self: center; padding: 0 0 40px; max-width: none; }
  .act { display: block; }
  .mini { display: none; }   /* the big edited example is in the same view from here up */
  h1 { font-size: 58px; }
  .what { font-size: 20px; }
  /* the edited one sits beside the first words */
  .ex-red { grid-column: 2 / 4; grid-row: 1; padding-top: 24px; grid-template-columns: 392px var(--pw); column-gap: 56px; }
  /* the clean one: its words in the first column, the paper and phone under the edited ones */
  .ex-green { grid-column: 1 / 4; grid-row: 2; padding-top: 96px; grid-template-columns: minmax(0, 1fr) 392px var(--pw); column-gap: 56px;
    grid-template-areas: "h paper phone" "sub paper phone" "says paper phone" "x paper phone"; grid-template-rows: auto auto auto 1fr; }
  .ex-green .ex-sub { margin-bottom: 0; }
  .ex-green .paper { align-self: start; }
  .ex-get { display: none; }   /* the badge is in the same view up here */
  .get { margin-top: 104px; padding: 80px 48px 76px; }
  .get-in { max-width: 1184px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 56px; align-items: start; }
  .get-h { font-size: 48px; }
  .get-b { margin-top: 0; padding: 32px 32px 28px; }
  .foot { padding: 44px 48px 44px; }
  .foot-in { max-width: 1184px; }
}

/* 1120 to 1279 px: the same three columns, set narrower so the first words keep a readable column */
@media (min-width: 1120px) and (max-width: 1279px) {
  :root { --pw: 300px; }
  .stage, .ex-green { grid-template-columns: minmax(0, 1fr) 340px var(--pw); column-gap: 40px; }
  .ex-red { grid-template-columns: 340px var(--pw); column-gap: 40px; }
  h1 { font-size: 50px; }
  .what { font-size: 19px; }
}

/* =====================================================================================================
   ALIVE. Motion, depth and light on the same page. Three rules:
   1. Every scene ends in exactly the still page (the live site), so nothing is ever less clear.
   2. Nothing waits on JavaScript to be readable: the hidden starting states exist only under html.alive,
      which a one-line script sets and takes back if the main script never arrives.
   3. The motion plays for everyone, also under prefers-reduced-motion (many phones report it without the
      driver having asked for it), so it is kept gentle: no pinning, no big parallax, no flashing.
   ===================================================================================================== */
:root { --ease: cubic-bezier(.2, .7, .2, 1); --mark: #F4907F; }
.ex-red { --cg: 178, 59, 50; }
.ex-green { --cg: 17, 107, 75; }
main { overflow-x: clip; }   /* the light behind the phones is wider than the page */

/* ---------- first screen: plain CSS, plays without the script ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(.42em); } to { opacity: 1; transform: none; } }
@keyframes rise-s { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
h1 .w { display: inline-block; position: relative; z-index: 1; animation: rise .75s var(--ease) both; animation-delay: calc(var(--i) * 60ms + 40ms); }
/* "edited" gets spotted: a marker line draws under it */
h1 .ed::after { content: ""; position: absolute; left: -.02em; right: -.03em; bottom: -.03em; height: .085em; border-radius: .05em; background: var(--mark);
  transform: scaleX(0) rotate(-.6deg); transform-origin: 0 50%; animation: mark .55s cubic-bezier(.6, 0, .2, 1) .95s both; }
@media (min-width: 1120px) { h1 .ed::after { background: var(--red); } }   /* on paper the mark is the app's red */
@keyframes mark { to { transform: scaleX(1) rotate(-.6deg); } }
.what { animation: rise-s .7s var(--ease) .3s both; }
.act .free { animation: rise-s .7s var(--ease) .44s both; }
.act .droid { animation: rise-s .7s var(--ease) .54s both; }
/* Red and Green come on like two lights, one after the other */
.what .t-red { animation: lamp-r 1.5s ease 1.15s both; }
.what .t-green { animation: lamp-g 1.5s ease 1.6s both; }
@keyframes lamp-r { 0% { color: var(--ink); text-shadow: 0 0 0 rgba(178, 59, 50, 0); } 35% { color: var(--red); text-shadow: 0 0 16px rgba(178, 59, 50, .65); } 100% { color: var(--red); text-shadow: 0 0 0 rgba(178, 59, 50, 0); } }
@keyframes lamp-g { 0% { color: var(--ink); text-shadow: 0 0 0 rgba(17, 107, 75, 0); } 35% { color: var(--green); text-shadow: 0 0 16px rgba(17, 107, 75, .65); } 100% { color: var(--green); text-shadow: 0 0 0 rgba(17, 107, 75, 0); } }

/* Free: the gold of the coin in the logo runs across the word now and then */
.free b { background: linear-gradient(100deg, var(--forest) 41%, #B8892A 46%, var(--gold) 50%, #B8892A 54%, var(--forest) 59%) 100% 0 / 320% 100% no-repeat;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: glint 5.5s ease-in-out 1.3s infinite; }
@keyframes glint { 0% { background-position: 100% 0; } 24%, 100% { background-position: 0 0; } }

/* the small iPhone on the first screen wakes up and throws the red of its answer on the page */
.mini .phone-in { isolation: isolate; }
.mini .phone-in::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: 250%; height: 130%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(178, 59, 50, .5), rgba(178, 59, 50, .2) 46%, rgba(178, 59, 50, 0) 74%);
  transform: translate(-50%, -50%); animation: bloom 1.4s var(--ease) .5s both, breathe 3.2s ease-in-out 1.9s infinite alternate; }
.mini .phone-scr { animation: wake 1s ease .45s both; }
@keyframes wake { from { filter: brightness(.14) saturate(.4); } to { filter: none; } }
@keyframes bloom { from { opacity: 0; transform: translate(-50%, -50%) scale(.55); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes breathe { from { opacity: 1; } to { opacity: .5; } }

/* ---------- light on the green band (a layer between the band's paint and its words) ---------- */
.sky { display: none; }
.alive .sky { display: block; position: absolute; left: 0; top: 0; width: 100%; height: var(--band, 0px); overflow: hidden; pointer-events: none; z-index: 0; }
.brand { position: relative; z-index: 1; }
.sky i { position: absolute; border-radius: 50%; will-change: transform; }
.sky i:nth-child(1) { width: 560px; height: 560px; left: -240px; top: -330px; background: radial-gradient(closest-side, rgba(70, 190, 130, .5), rgba(70, 190, 130, 0)); animation: drift-a 9s ease-in-out infinite alternate; }
.sky i:nth-child(2) { width: 480px; height: 480px; right: -220px; top: -40px; background: radial-gradient(closest-side, rgba(242, 201, 90, .26), rgba(242, 201, 90, 0)); animation: drift-b 12s ease-in-out infinite alternate; }
/* a band of light crosses now and then, like headlights going by */
.sky b { position: absolute; top: -20%; bottom: -20%; left: 0; width: 46%; background: linear-gradient(100deg, rgba(255, 255, 255, 0) 20%, rgba(214, 255, 232, .2) 50%, rgba(255, 255, 255, 0) 80%); transform: translateX(-120%) skewX(-14deg); animation: pass 7s cubic-bezier(.45, 0, .55, 1) 1.2s infinite; }
.sky::after, .get::after { content: ""; position: absolute; inset: 0; background: url("img/grain.png"); opacity: .38; pointer-events: none; }
@keyframes drift-a { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(230px, 90px, 0) scale(1.3); } }
@keyframes drift-b { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-240px, -70px, 0) scale(1.25); } }
@keyframes pass { 0% { transform: translateX(-120%) skewX(-14deg); } 34%, 100% { transform: translateX(340%) skewX(-14deg); } }

/* ---------- things that rise into place as you reach them ---------- */
.alive [data-rise] { opacity: 0; transform: translateY(18px); transition: opacity .6s ease var(--rd, 0ms), transform .75s var(--ease) var(--rd, 0ms); }
.alive [data-rise].on { opacity: 1; transform: none; }

/* ---------- the check, played on the sample rate con ---------- */
.alive .paper { position: relative; }
.alive .doc { position: relative; z-index: 2; overflow: hidden; transform: translateY(26px); opacity: 0;
  transition: transform .8s var(--ease), opacity .45s ease, box-shadow .9s ease; }
.alive .go .doc { transform: none; opacity: 1;
  box-shadow: 0 1px 0 rgba(23, 24, 26, .04), 0 2px 5px rgba(23, 24, 26, .05), 0 26px 46px -24px rgba(23, 24, 26, .46); }
/* the light that reads the sheet: a bright edge with a soft tail, top to bottom */
.beam { position: absolute; left: 0; right: 0; top: 0; height: 100%; pointer-events: none; transform: translateY(-101%);
  background: linear-gradient(to bottom, rgba(17, 107, 75, 0) calc(100% - 130px), rgba(17, 107, 75, .13) calc(100% - 3px), rgba(17, 107, 75, .9) calc(100% - 3px), rgba(17, 107, 75, .9) 100%); }
.go .beam { animation: sweep var(--scan, 1100ms) linear var(--t0, 380ms) both; }
@keyframes sweep { from { transform: translateY(-100%); } to { transform: translateY(130px); } }
/* each money line answers as the light passes it */
.alive .d-lines p, .alive .d-total { position: relative; }
.alive .d-lines p::before, .alive .d-total::before { content: ""; position: absolute; inset: 0 -18px; background: rgba(17, 107, 75, .1); opacity: 0; pointer-events: none; }
.go .d-lines p::before, .go .d-total::before { animation: answer .7s ease var(--d, 0ms) both; }
[data-scan="red"] .d-total::before { background: rgba(178, 59, 50, .14); }
@keyframes answer { 0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: 0; } }
/* edited sample: for a moment the light shows the total that an earlier version of the file holds,
   then that number drops into the box below, where the page states it. The sheet ends as it began. */
.alive .d-total b { transition: opacity .16s ease; }
.alive .xray .d-total b { opacity: 0; }
.ghost { position: absolute; z-index: 4; left: 0; top: 0; margin: 0; font-size: 26px; font-weight: 700; letter-spacing: -.01em; line-height: 1.45; color: var(--red);
  font-variant-numeric: tabular-nums; white-space: nowrap; pointer-events: none; opacity: 0; transform-origin: 100% 0; will-change: transform, opacity; }
/* what is inside the file comes out from under the sheet */
.alive .file { position: relative; z-index: 1; transform: translateY(calc(-100% - 12px)); opacity: 0; transition: transform .7s var(--ease), opacity .18s ease; }
.alive .found .file { transform: none; opacity: 1; }
.alive .file-row b { display: inline-block; opacity: 0; transform: scale(1.28); transform-origin: 100% 60%; transition: opacity .25s ease, transform .5s var(--ease); }
.alive .file-row + .file-row b { transition-delay: .16s; }
.alive .landed .file-row b { opacity: 1; transform: none; }

/* what Fairhold says: the words come up, the answer's colour comes on, the rule runs down to the phone */
.alive .says { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .7s var(--ease); }
.alive .says.on { opacity: 1; transform: none; }
.alive .says::before { transform: scaleY(0); transition: transform .65s var(--ease) .2s; }
.alive .says::after { opacity: 0; transition: opacity .25s ease .7s; }
.alive .says.on::before { transform: none; }
.alive .says.on::after { opacity: 1; }
.alive .says.on .says-lead { animation: lamp 1.4s ease .1s both; }
@keyframes lamp { 0% { text-shadow: 0 0 0 rgba(var(--cg), 0); } 30% { text-shadow: 0 0 20px rgba(var(--cg), .6); } 100% { text-shadow: 0 0 0 rgba(var(--cg), 0); } }

/* ---------- the iPhone: the screen comes on, its answer lights the page. The frame itself is untouched. ---------- */
.alive .ex .phone-in { isolation: isolate; transform: translateY(calc(var(--py, 0px) + 26px)); transition: transform .9s var(--ease); }
.alive .ex .lit .phone-in { transform: translateY(var(--py, 0px)); }
.alive .ex .phone.settled .phone-in { transition: none; }
.alive .ex .phone-scr { filter: brightness(.38) saturate(.45); transition: filter .9s ease .1s; }
.alive .ex .lit .phone-scr { filter: none; }
.glow { position: absolute; z-index: -1; left: 50%; top: 48%; width: 210%; height: 118%; pointer-events: none; opacity: 0; transform: translate(-50%, -50%) scale(.6);
  background: radial-gradient(closest-side, rgba(var(--cg), .5), rgba(var(--cg), .2) 44%, rgba(var(--cg), 0) 74%); transition: opacity 1.1s ease .15s, transform 1.5s var(--ease) .15s; }
.lit .glow { opacity: 1; transform: translate(-50%, -50%) scale(1); animation: breathe 3.2s ease-in-out 1.8s infinite alternate; }
.floor { position: absolute; z-index: -1; left: 9%; right: 9%; bottom: -2.4%; height: 5%; pointer-events: none; opacity: 0; transition: opacity 1s ease .2s;
  background: radial-gradient(closest-side, rgba(23, 24, 26, .34), rgba(23, 24, 26, 0)); }
.lit .floor { opacity: 1; }
/* a reflection crosses the glass of the screen (never the frame) */
.glare { position: absolute; left: 5.3333%; top: 2.5%; width: 89.3333%; height: 95%; border-radius: 15.75% / 7.25%; overflow: hidden; pointer-events: none; }
.glare::before { content: ""; position: absolute; inset: -10% -70%; background: linear-gradient(104deg, rgba(255, 255, 255, 0) 43%, rgba(255, 255, 255, .3) 50%, rgba(255, 255, 255, 0) 57%); transform: translateX(-75%); }
.lit .glare::before { animation: glare 6.5s ease-in-out .55s infinite; }
@keyframes glare { 0% { transform: translateX(-75%); } 18%, 100% { transform: translateX(75%); } }
@supports not (overflow-x: clip) { .glow { width: 100%; } .mini .phone-in::before { width: 100%; } }

/* the install button after the red answer: its arrow keeps pointing */
.ex-get a span { display: inline-block; animation: nudge 2.4s ease-in-out infinite; }
@keyframes nudge { 0%, 60%, 100% { transform: none; } 78% { transform: translateX(5px); } }
.ex-get a { transition: background-color .2s ease, color .2s ease; }
.ex-get a:hover { background: var(--forest); color: var(--paper); }

/* ---------- the green band at the end: light moving on it, the card lifted off it ---------- */
.get { position: relative; overflow: hidden; isolation: isolate; }
.get-in { position: relative; z-index: 1; }
.get::before { content: ""; position: absolute; z-index: 0; width: 760px; height: 760px; left: -300px; top: -420px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(70, 190, 130, .42), rgba(70, 190, 130, 0)); animation: drift-a 17s ease-in-out infinite alternate; }
.get::after { z-index: 0; }
.get-b { box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .55), 0 2px 0 rgba(255, 255, 255, .5) inset; }
.get-icon { animation: coin 4.5s ease-in-out infinite alternate; }
@keyframes coin { from { filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .35)) drop-shadow(0 0 0 rgba(242, 201, 90, 0)); } to { filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .35)) drop-shadow(0 0 20px rgba(242, 201, 90, .5)); } }
/* the film: never behind the words. Phones and tablets: a strip across the top of the band that fades into the
   green; the words start where it ends. Wide screens: a window under the words, in the space beside the card. */
.get { --strip: clamp(238px, calc(34vw + 108px), 345px); }
.get-film { overflow: hidden; pointer-events: none; opacity: 0; transition: opacity 1.4s ease; }
.get-film.playing { opacity: 1; }
.get-film video, .get-film img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.get > .get-film { position: absolute; left: 0; right: 0; top: 0; height: var(--strip); z-index: 0;
  -webkit-mask-image: linear-gradient(to bottom, #000 66%, rgba(0, 0, 0, 0)); mask-image: linear-gradient(to bottom, #000 66%, rgba(0, 0, 0, 0)); }
.get > .get-film::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(11, 79, 55, .3), rgba(11, 79, 55, .16) 50%, rgba(11, 79, 55, .55)); }
.get-a > .get-film video, .get-a > .get-film img { object-position: 50% 44%; }
.get-a > .get-film { position: relative; margin-top: 28px; height: 210px; border-radius: 18px; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6); }
.get-a > .get-film::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(to bottom, rgba(11, 79, 55, .26), rgba(11, 79, 55, .12)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
@media (max-width: 1119.98px) { .get.has-film { padding-top: calc(var(--strip) - 8px); } }