/* CabFare hire car invitation page. Shared by both versions of the page.
   Mobile first. The brand world is the approved ad set: a black hire car on a green cyclorama (#3FAF5C) in hard sun
   from the upper left, white Archivo 800 headlines, the limo wordmark, the ink stamp, the black pill.
   Graphics stand on their own textured surfaces (the empty green room, a dark grained card), never on the copy's
   ground, and cast the set's hard shadow down and to the right.
   Motion: html.motion is set in <head> only when the visitor has not asked to reduce motion. Without it (or without
   script) every element renders in its final state. */

/* Archivo 600 to 800 (Latin subset) is inlined as a data URI in each page head by build/build.py. */

:root {
  --green: #3FAF5C;
  --green-deep: #10532B;   /* the ads' bottom gradient over the green room */
  --green-text: #1B7A3C;   /* green that passes AA on white */
  --green-tone: #E1F1E5;
  --ink: #0B1A10;
  --body: #26352C;
  --muted: #56645B;
  --paper: #FFFFFF;
  --tone: #F2F5F2;
  --hair: rgba(11, 26, 16, .09);
  --r: 18px;
  --wrap: 1200px;
  --gut: 20px;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --display: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --sun: rgba(4, 44, 18, .30);   /* the set's hard shadow, down and to the right */
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  /* the motion-modules theming contract (internal/motion-modules), bridged to the brand */
  --bg: var(--paper); --bg-2: var(--tone); --bg-elev: #fff; --rule: var(--hair); --rule-3: rgba(11, 26, 16, .16);
  --ink-2: var(--body); --ink-3: var(--muted); --accent: var(--green); --accent-glow: rgba(63, 175, 92, .35);
  --font-display: var(--display); --font-body: var(--sans);
  interpolate-size: allow-keywords;
}
@media (min-width: 760px) { :root { --gut: 40px; } }

* { box-sizing: border-box; }
[hidden] { display: none !important; }   /* the form and its thank-you swap with the hidden attribute */
html { -webkit-text-size-adjust: 100%; overflow-x: hidden; background: var(--paper); scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--body); font: 17px/1.55 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3 { margin: 0; color: var(--ink); }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 6px; }
.hero :focus-visible, .sec--ink :focus-visible, .invite :focus-visible, .skip:focus-visible { outline-color: #fff; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--ink); color: #fff; padding: 12px 16px; border-radius: 12px; text-decoration: none; font-weight: 600; }
.skip:focus { top: 12px; }

/* ---------- review build (remove the "review" class on <html> to hide all of this) ---------- */
.review-bar, .review-tag { display: none; }
html.review .review-bar {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 2px 12px;
  min-height: 34px; padding: 7px var(--gut); background: #FFE58A; color: #1E1A05;
  font: 700 12px/1.3 var(--sans); letter-spacing: .06em; text-transform: uppercase; text-align: center;
}
html.review .review-bar a { color: inherit; font-weight: 600; letter-spacing: .02em; text-transform: none; font-size: 13px; }
html.review .review-bar a[aria-current] { text-decoration: none; opacity: .55; }
html.review .review-tag {
  display: inline-flex; position: absolute; left: 12px; bottom: 12px; z-index: 4; max-width: calc(100% - 24px);
  padding: 7px 12px; border-radius: 999px; background: rgba(255, 229, 138, .94); color: #1E1A05;
  font: 600 12px/1.3 var(--sans);
}

/* ---------- icons: Lucide geometry, filled treatment ---------- */
.ic { width: 22px; height: 22px; flex: none; color: var(--green-text); --cut: var(--green-tone); }
.ic .f { fill: currentColor; stroke: currentColor; }
.ic .c { fill: none; stroke: var(--cut); }
.ic .l { fill: none; stroke: currentColor; }

/* ---------- buttons ---------- */
.pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 0 28px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--ink); color: #fff; font: 700 17px/1 var(--display); letter-spacing: 0; text-decoration: none;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .16);
  transition: transform .15s ease, background-color .15s ease;
}
.pill:hover { background: #1A2E20; }
.pill:active { transform: scale(.98); }
.pill .ic { color: #fff; width: 18px; height: 18px; transition: translate .2s ease; }
.pill:hover .ic { translate: 3px 0; }
.pill--soft { background: var(--green-tone); color: var(--ink); box-shadow: none; }
.pill--soft:hover { background: #D3EBDA; }
.pill--soft .ic { color: var(--green-text); }
.tel { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.tel .ic { width: 18px; height: 18px; }

/* =====================================================================================================================
   HERO: the green room, as layered plates of one photograph
   ===================================================================================================================== */
.hero { position: relative; background: var(--green-deep); color: #fff; isolation: isolate;
  --cam: 3400ms; --cam-ease: cubic-bezier(.42, .08, .18, 1); --pos: 50% 0%; --cam-o: 66% 30%; }
.v-o .hero { --cam-o: 52% 28%; }
.hero__stage { position: relative; overflow: hidden; aspect-ratio: 4 / 5;
  /* the room's light before the plates land: wall above, floor below */
  background: linear-gradient(180deg, #1C8C44 0%, #22964A 42%, #36AA57 44%, #3FB35F 100%); }
.hero__cam, .hl, .hl img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hl img { object-fit: cover; object-position: var(--pos); max-width: none; }
.hl--mid, .hl--near { pointer-events: none; }
.hero__shade { position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, rgba(6, 40, 18, .26) 0%, rgba(6, 40, 18, 0) 18%, rgba(6, 40, 18, 0) 46%,
    rgba(12, 70, 34, .5) 74%, rgba(16, 83, 43, .9) 93%, #10532B 100%); }
.hero__top { position: absolute; top: 0; left: 0; right: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 16px; }
.brand { display: inline-flex; min-height: 44px; align-items: center; border-radius: 12px; }
.brand img { height: 30px; width: auto; }
.stamp { display: flex; align-items: center; gap: 8px; font: 800 11px/1 var(--display); letter-spacing: .14em; color: var(--ink); white-space: nowrap; border-radius: 999px; }
.stamp i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
/* the offer's phone plate puts the black car under the header row: both ride on brand-green chips, as on tile 2 */
@media (max-width: 699.98px) {
  .v-o .brand { background: var(--green); padding: 4px 10px; min-height: 40px; box-shadow: 0 8px 24px rgba(0, 0, 0, .28); }
  .v-o .brand img { height: 26px; }
  .v-o .stamp { background: var(--green); padding: 8px 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, .28); }
  /* "HIRE CAR DRIVERS ● 01 OCTOBER 2026" is too long beside the wordmark on a phone: two lines, the dot leads the
     date (Arthur, 24 Sep: the date in words) */
  .v-o .stamp { flex-direction: column; align-items: flex-end; gap: 4px; border-radius: 13px; padding: 8px 11px;
    font-size: 10px; letter-spacing: .12em; line-height: 1.1; }
  .v-o .stamp i { display: none; }
  /* the presence phone plate holds the sign up under the stamp: the stamp stacks under the wordmark, on clear wall */
  .v-p .hero__top { flex-direction: column; align-items: flex-start; gap: 2px; }
  .v-p .stamp { padding-left: 2px; font-size: 10px; letter-spacing: .1em; gap: 6px; }
}
.hero__head { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding-bottom: 20px; }
.hero h1 { color: #fff; font: 800 clamp(31px, 8.6vw, 40px)/1.03 var(--display); letter-spacing: -.02em; text-wrap: balance; max-width: 15em;
  text-shadow: 0 2px 18px rgba(4, 34, 14, .25); }
.hero h1 .w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .02em .12em; margin: 0 -.02em -.12em; }
.hero h1 .w > span { display: inline-block; }

.hero__band { background: var(--green-deep); padding: 22px 0 52px; }
.hero__grid { display: grid; gap: 24px; }
.hero__line { font-size: 18px; line-height: 1.42; font-weight: 600; color: #fff; max-width: 36em; }
.hero__sub { margin-top: 12px; color: rgba(255, 255, 255, .86); font-size: 17px; line-height: 1.55; max-width: 36em; }
.hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 24px; }
.hero__cta .tel, .hero__cta .tel .ic { color: #fff; }

/* the fare docket: thermal paper with torn edges; the card surcharge line gets struck off */
.docket { order: -1; justify-self: start; width: min(100%, 330px); rotate: -2deg;
  filter: drop-shadow(10px 14px 0 rgba(3, 30, 12, .34)); }
.docket__paper { position: relative; padding: 20px 22px 24px; color: var(--ink); font: 700 17px/1.2 var(--display);
  background: var(--grain), linear-gradient(180deg, #FFFFFF, #F6F5F0); background-size: 180px, auto;
  -webkit-mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / 12px 51% repeat-x,
                conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 12px 51% repeat-x;
          mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / 12px 51% repeat-x,
                conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 12px 51% repeat-x; }
.docket__top { display: flex; align-items: center; justify-content: flex-end; padding: 2px 0 10px; border-bottom: 1px dashed rgba(11, 26, 16, .22); }
.docket__date { font: 800 12px/1 var(--display); letter-spacing: .14em; }
.docket__row { position: relative; display: flex; align-items: center; gap: 10px; min-height: 30px; margin-top: 12px; font-size: 1em; }
.docket__row i { flex: 1; min-width: 20px; height: 0; border-bottom: 2px dotted rgba(11, 26, 16, .28); translate: 0 5px; }
.docket__row .ic { width: 22px; height: 22px; color: var(--green-text); --cut: #FDFDFB; }
.docket__row--x > span, .docket__row--x > i { opacity: .45; }
.docket__strike { position: absolute; left: -8px; top: calc(50% - 2px); width: calc(100% + 16px); height: 22px; translate: 0 -50%; overflow: visible; }
.docket__strike path { fill: none; stroke: var(--ink); stroke-width: 4.5px; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 0; }

@media (min-width: 700px) {
  .hero { --pos: 74% 26%; --cam-o: 70% 34%; }
  .v-o .hero { --cam-o: 68% 38%; }
  .hero__stage { aspect-ratio: auto; height: clamp(440px, min(64svh, 72vw), 860px); }
  .hero__top { padding-top: 26px; }
  .brand img { height: 40px; }
  .stamp { font-size: 13px; gap: 10px; }
  .stamp i { width: 8px; height: 8px; }
  .hero__head { padding-bottom: 40px; }
  .hero h1 { font-size: clamp(40px, 5vw, 72px); line-height: 1.01; }
  .hero__band { padding: 34px 0 64px; }
  .hero__grid { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 48px; }
  .docket { order: 0; justify-self: end; width: 320px; margin-right: 2%; }
  .hero__line { font-size: 19px; }
}
@media (min-width: 1100px) {
  .hero__line { font-size: 20px; }
  .hero__sub { font-size: 18px; }
  .docket { width: 372px; rotate: -3deg; margin-right: 5%; }
  .docket__paper { font-size: 19px; padding: 22px 26px 28px; }
}

/* THE CAMERA MOVE. One pull-back, played once on load, after every plate has decoded (the script under the hero).
   Scale by depth: a camera that moves by d changes a layer at distance z by z/(z-d), so the sign nearest the lens
   changes most, the car less, the room least. Every layer scales about the same point, the room's vanishing point,
   which is what makes it read as one camera rather than three animations. A small truck rides along by depth.
   No blur, no brightness change. */
.motion .hero__cam { opacity: 0; }
.motion .hero.is-go .hero__cam { opacity: 1; transition: opacity .6s ease-out; }
.motion .hero.is-still .hero__cam { opacity: 1; }
.motion .hl { transform-origin: var(--cam-o); }
.motion .hero.is-go .hl--plate { animation: camRoom var(--cam) var(--cam-ease) both; }
.motion .hero.is-go .hl--mid { animation: camCar var(--cam) var(--cam-ease) both; }
.motion .hero.is-go .hl--near { animation: camSign var(--cam) var(--cam-ease) both; }
.motion.motion .v-o .hero.is-go .hl--near { animation-name: camCar; }
@keyframes camRoom { from { scale: 1.05; translate: -.35% .24%; } to { scale: 1; translate: 0 0; } }
@keyframes camCar { from { scale: 1.09; translate: -.6% .4%; } to { scale: 1; translate: 0 0; } }
@keyframes camSign { from { scale: 1.15; translate: -.95% .64%; } to { scale: 1; translate: 0 0; } }
/* the headline rises word by word as the camera settles */
.motion .hero h1 .w > span { transform: translateY(112%); }
.motion .hero.is-go h1 .w > span { transform: none; transition: transform 1.1s cubic-bezier(.2, .7, .1, 1) calc(.75s + var(--i) * 60ms); }
.motion .hero.is-still h1 .w > span { transform: none; }
/* the docket lands, then the surcharge line is struck off */
.motion .docket { opacity: 0; translate: 0 22px; }
.motion .hero.is-go .docket { opacity: 1; translate: 0 0; transition: opacity .6s ease 1.5s, translate 1s cubic-bezier(.2, .7, .1, 1) 1.5s; }
.motion .hero.is-still .docket { opacity: 1; translate: 0 0; }
.motion .docket__strike path { stroke-dashoffset: 1; }
.motion .hero.is-go .docket__strike path { stroke-dashoffset: 0; transition: stroke-dashoffset .7s cubic-bezier(.6, 0, .25, 1) 2.55s; }
.motion .hero.is-still .docket__strike path { stroke-dashoffset: 0; }
.motion .docket__row--x > span, .motion .docket__row--x > i { opacity: 1; }
.motion .hero.is-go .docket__row--x > span, .motion .hero.is-go .docket__row--x > i { opacity: .5; transition: opacity .5s ease 3.1s; }
.motion .hero.is-still .docket__row--x > span, .motion .hero.is-still .docket__row--x > i { opacity: .5; }

/* =====================================================================================================================
   SECTIONS
   ===================================================================================================================== */
.sec { padding: 76px 0; }
.sec--tone { background: var(--tone); }
.sec--ink { background: var(--ink); color: rgba(255, 255, 255, .8); }
.sec--ink h2, .sec--ink h3 { color: #fff; }
.eyebrow { font: 800 12px/1.2 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--green-text); margin-bottom: 14px; }
.sec--ink .eyebrow { color: var(--green); }
.h2 { font: 800 31px/1.07 var(--display); letter-spacing: -.02em; text-wrap: balance; max-width: 15em; }
.lead { margin-top: 16px; font-size: 18px; line-height: 1.55; max-width: 34em; }
@media (min-width: 960px) {
  .sec { padding: 124px 0; }
  .h2 { font-size: 48px; line-height: 1.03; }
  .lead { font-size: 19px; }
}
/* SplitText line masks (section headings rise line by line) */
.h2 .ln-mask { overflow: clip; padding-bottom: .1em; margin-bottom: -.1em; }

/* ---------- three points: the ad set as a feed ---------- */
.pts__grid { display: grid; gap: 16px; margin-top: 32px; }
.pt { background: var(--tone); border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column; }
.pt__img { position: relative; margin: 0; aspect-ratio: 4 / 5; overflow: hidden; background: var(--green); }
.pt__img img { width: 100%; height: 100%; object-fit: cover; }
.m-receipt img { object-position: 50% 42%; }
.m-board img, .m-phone img { object-position: 50% 0%; }
.pt__body { padding: 22px 24px 28px; }
.pt__label { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font: 800 12px/1.2 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--green-text); }
.pt__label .ic { width: 16px; height: 16px; --cut: var(--tone); }
.pt h3 { font: 700 20px/1.3 var(--display); letter-spacing: -.01em; }
.pt p:not(.pt__label) { margin-top: 10px; color: var(--muted); font-size: 16px; line-height: 1.55; }
@media (min-width: 900px) {
  .pts__grid { grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 52px; }
  .pt__body { padding: 26px 28px 32px; }
}

/* ---------- feature rows: copy and a graphic on its own stage ---------- */
.feat { display: grid; gap: 40px; align-items: center; }
.feat__copy p + p { margin-top: 14px; }
@media (min-width: 960px) {
  .feat { grid-template-columns: 1fr 1fr; gap: 80px; }
  .feat--flip .stage { order: -1; }
}
.stage { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--r); aspect-ratio: 4 / 5; width: 100%;
  max-width: 520px; justify-self: center; container-type: inline-size; background: var(--green); }
.stage--po { aspect-ratio: 1 / 1; }
.stage__bg { position: absolute; inset: 0; z-index: -1; }
.stage__bg img { width: 100%; height: 100%; object-fit: cover; }

.ticks { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 2px; max-width: 30em; }
.ticks li { display: flex; align-items: center; gap: 12px; min-height: 46px; font-weight: 600; color: var(--ink); border-top: 1px solid var(--hair); transition: color .35s ease; }
.ticks li:last-child { border-bottom: 1px solid var(--hair); }
.ticks .ic { --cut: var(--tone); transition: color .35s ease, scale .35s cubic-bezier(.3, 1.6, .5, 1); }
.ticks li.is-off { color: var(--muted); }
.ticks li.is-off .ic { color: #C5CFC8; scale: .86; }
.note { margin-top: 18px; color: var(--muted); font-size: 16px; }

/* the receipt: Arthur's real Australian receipt (24 Sep) prints out of a slot on the green set. It is longer than
   the stage, so it runs off the bottom edge the way a long receipt hangs out of a printer. */
.printer { position: absolute; inset: 0; }
.printer__slot { position: absolute; left: 9cqw; right: 9cqw; top: 8.5cqw; height: 4.4cqw; border-radius: 2.2cqw; z-index: 2;
  background: linear-gradient(180deg, #25332A, #050A07 60%); box-shadow: 0 1.2cqw 2.6cqw rgba(3, 30, 12, .35), inset 0 .3cqw 0 rgba(255, 255, 255, .08); }
.printer__feed { position: absolute; left: 13cqw; right: 13cqw; top: 10.6cqw; filter: drop-shadow(2.2cqw 3cqw .3cqw var(--sun)); }
.rcpt { position: relative; background: #fff; clip-path: inset(0 0 var(--cut, 0%) 0); }
.rcpt img { display: block; width: 100%; height: auto; }
.rcpt::after { content: ""; position: absolute; inset: 0; background: var(--grain); background-size: 180px; mix-blend-mode: multiply; pointer-events: none; }
.rcpt__mark { position: absolute; left: 0; width: 0; height: 0; }
.stage--rc .review-tag { z-index: 4; }

/* ---------- payouts ---------- */
.opts { display: grid; gap: 22px; margin-top: 30px; }
.opt { padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .12); }
.opt h3 { display: flex; align-items: center; gap: 10px; font: 700 20px/1.3 var(--display); color: #fff; }
.opt h3 .ic { width: 20px; height: 20px; color: var(--green); --cut: var(--ink); }
.opt .kick { margin-top: 6px; color: var(--green); font-weight: 600; font-size: 15px; }
.opt p { margin-top: 8px; font-size: 16px; line-height: 1.55; color: rgba(255, 255, 255, .78); }
@media (min-width: 1100px) { .opts { grid-template-columns: 1fr 1fr; gap: 28px; } }

.stage--ink { background: radial-gradient(120% 90% at 16% 0%, #24442F 0%, #10211A 52%, #07110B 100%); }
.stage--ink::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--noise); background-size: 180px; opacity: .5; mix-blend-mode: overlay; pointer-events: none; }
.pay { position: absolute; left: 6cqw; right: 6cqw; top: 50%; translate: 0 -50%; padding: 6cqw 4.6cqw 4.6cqw; border-radius: 6.4cqw;
  background: var(--grain), linear-gradient(165deg, #1D2C23 0%, #0B1510 60%, #09110D 100%); background-size: 180px, auto;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 0 0 1px rgba(255, 255, 255, .05);
  filter: drop-shadow(3cqw 4cqw .5cqw var(--sun)); }
.pay__title { padding: 0 1.4cqw; font: 800 2.7cqw/1 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--green); }
.pay__track { position: relative; display: grid; gap: 2.4cqw; margin-top: 4.4cqw; }
.pay__plate { position: absolute; left: 0; right: 0; top: 0; height: calc(50% - 1.2cqw); border-radius: 4.6cqw; background: #fff;
  box-shadow: 0 3cqw 6cqw rgba(0, 0, 0, .38); }
.pay[data-on="i"] .pay__plate { translate: 0 calc(100% + 2.4cqw); }
.pay__opt { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 3cqw; min-height: 25cqw; padding: 3.4cqw 4cqw; color: rgba(255, 255, 255, .62); transition: color .35s ease; }
.pay[data-on="d"] .pay__opt--d, .pay[data-on="i"] .pay__opt--i { color: var(--ink); }
.pay__ic { display: grid; place-items: center; width: 10.4cqw; height: 10.4cqw; border-radius: 50%; background: rgba(63, 175, 92, .16); transition: background-color .35s ease; }
.pay__ic .ic { width: 5.4cqw; height: 5.4cqw; color: var(--green); --cut: #13261A; transition: color .35s ease; }
.pay[data-on="d"] .pay__opt--d .pay__ic, .pay[data-on="i"] .pay__opt--i .pay__ic { background: var(--green); }
.pay[data-on="d"] .pay__opt--d .ic, .pay[data-on="i"] .pay__opt--i .ic { color: #fff; --cut: var(--green); }
.pay__k { display: block; font: 800 2.5cqw/1.2 var(--display); letter-spacing: .12em; text-transform: uppercase; opacity: .8; }
.pay__v { display: block; margin-top: .9cqw; font: 800 4.6cqw/1.04 var(--display); letter-spacing: -.015em; white-space: nowrap; }
.pay__f { display: block; margin-top: .9cqw; font: 600 3.1cqw/1.2 var(--sans); opacity: .78; }
.pay__dots { display: grid; grid-template-columns: repeat(7, 1.5cqw); gap: .8cqw; }
.pay__dots i { width: 1.5cqw; height: 1.5cqw; border-radius: 50%; background: currentColor; opacity: .22; }
.pay__dots i.on, .pay__opt--d .pay__dots i { background: var(--green); opacity: 1; }
.pay__dots.is-off i:not(.on) { background: currentColor; opacity: .22; }
.pay__bar { width: 9cqw; height: 1.8cqw; border-radius: 1cqw; background: rgba(120, 130, 124, .28); overflow: hidden; }
.pay__bar i { display: block; height: 100%; background: var(--green); transform-origin: 0 50%; transform: scaleX(var(--fill, 1)); border-radius: inherit; }

/* ---------- the collect fare: the ads' iPhone payment image (Arthur, 24 Sep); a card taps the top of the phone ----------
   The stage is the photo, cut 4:5 around the phone. Its "Hold Here to Pay" mark sits 50.5% across and 21.4% down,
   which is 26.75cqw on a 4:5 stage. At rest the card sits clear of the screen and the tick is on the mark. */
.stage--cf { background: #2E9A4E; }
.tap { position: absolute; inset: 0; --mx: 50.3cqw; --my: 22.6cqw; }   /* the "Hold Here to Pay" mark in tap-*.jpg */
.tap__ring, .tap__pulse { position: absolute; left: var(--mx); top: var(--my); width: 19.6cqw; height: 19.6cqw; translate: -50% -50%;
  border-radius: 50%; border: .45cqw solid rgba(255, 255, 255, .9); opacity: 0; pointer-events: none; }
.tap__pulse { width: 14cqw; height: 14cqw; border-color: rgba(63, 175, 92, .95); }
/* a real card is 1.1x a phone's width: 37.4cqw against the phone's 34cqw. At rest it clears the mark by 2.6cqw. */
.card { position: absolute; left: 61cqw; top: 3.5cqw; width: 37.4cqw; aspect-ratio: 1.586; border-radius: 3.1cqw; transform: rotate(12deg);
  background: linear-gradient(130deg, #26302A 0%, #080B09 48%, #1E2621 100%); box-shadow: inset 0 0 0 .3cqw rgba(255, 255, 255, .09);
  filter: drop-shadow(2.9cqw 3.5cqw .45cqw rgba(4, 30, 12, .45)); }
.card__chip { position: absolute; left: 11%; top: 34%; width: 17%; aspect-ratio: 1.3; border-radius: 18%; background: linear-gradient(135deg, #EEDFB0, #B79A54); }
.card__nfc { position: absolute; right: 9%; top: 33%; width: 13%; height: auto; color: rgba(255, 255, 255, .72); }

/* ---------- the rate (offer only): split-flap cells on the green set ---------- */
.rate { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--r); padding: 36px 24px 34px; color: var(--ink); background: var(--green); }
.rate__bg { position: absolute; inset: 0; z-index: -1; }
.rate__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 10% 45%; }
.rate .eyebrow { color: var(--ink); }
.rate__grid { display: grid; gap: 26px; margin-top: 30px; }
.rate__num { font: 800 clamp(26px, 8.8vw, 40px)/1 var(--display); }
.rate__num--2 { font-size: clamp(22px, 6.6vw, 30px); }
.flap { display: flex; align-items: center; gap: .07em; }
.flap__c { position: relative; display: inline-grid; place-items: center; width: .82em; height: 1.16em; border-radius: .09em; overflow: hidden;
  background: linear-gradient(180deg, #16241B 0 49.4%, #0B1A10 50.6% 100%); color: #fff; font-size: 1em;
  box-shadow: 0 .08em .18em rgba(4, 44, 18, .35); }
.flap__c::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(0, 0, 0, .55); }
.flap__c--w { width: 1.06em; }   /* "%" is wider than a digit (Arthur, 24 Sep: it looked cropped on the right) */
.flap__gap { width: .26em; }
.rate__t { margin-top: 12px; font-weight: 700; font-size: 17px; }
.rate__foot { margin-top: 30px; padding-top: 18px; border-top: 1px solid rgba(11, 26, 16, .2); font-weight: 600; max-width: 40em; }
@media (min-width: 900px) {
  .rate { padding: 60px 60px 52px; }
  /* two rows of the board, each label beside its number ("2.00% + 30c" and the wider "%" do not fit side by side) */
  .rate__grid { grid-template-columns: 1fr; gap: 22px; margin-top: 40px; }
  .rate__cell { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px 22px; }
  .rate__t { margin: 0 0 .55em; }
  .rate__num { font-size: 78px; }
  .rate__num--2 { font-size: 50px; }
}

/* ---------- invitation: one form in the green room (Arthur's design, 24 Sep) ----------
   Copy on the left, the form card on the right from 960px; stacked on phones. The section carries the mode:
   data-mode="invite" (Name, Mobile, Email, Company, the call back box) or "callback" ("Rather talk first?": Name,
   Mobile, Best time to call). Lines that differ by mode sit in the same grid cell and cross-fade, so nothing jumps. */
.invite { position: relative; isolation: isolate; overflow: hidden; background: var(--green-deep); color: rgba(255, 255, 255, .9); }
.invite__bg { position: absolute; inset: 0; z-index: -2; }
.invite__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 20% 30%; }
.invite::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(7, 50, 22, .74) 0%, rgba(7, 50, 22, .52) 46%, rgba(7, 50, 22, .72) 100%); }
.invite .h2 { color: #fff; }
.invite__grid { display: grid; gap: 30px; }
.invite__copy .lead { color: rgba(255, 255, 255, .9); }
.swap { display: grid; }
.swap > [data-when] { grid-area: 1 / 1; transition: opacity .35s ease, visibility .35s; }
.invite[data-mode="invite"] .swap > [data-when="callback"], .invite[data-mode="callback"] .swap > [data-when="invite"] { opacity: 0; visibility: hidden; }
.invite[data-mode="invite"] .thanks [data-when="callback"], .invite[data-mode="callback"] .thanks [data-when="invite"] { display: none; }
.replies { margin-top: 26px; font-size: 17px; color: #fff; max-width: 34em; }
.replies a { color: #fff; font-weight: 600; text-underline-offset: 4px; }
/* inline links in running text: 44px hit area without moving the line */
.replies a, .faq details a, .status a { display: inline-block; padding: 12px 0; margin: -12px 0; }
@media (min-width: 960px) {
  .invite__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: 80px; align-items: start; }
  .invite__copy { position: sticky; top: 96px; padding-top: 12px; }
}

.fcard { position: relative; background: var(--paper); color: var(--body); border-radius: var(--r); padding: 26px 20px 22px;
  box-shadow: 18px 24px 0 -6px rgba(3, 32, 13, .28), 0 30px 60px rgba(3, 32, 13, .18); view-transition-name: invite-card; }
@media (min-width: 420px) { .fcard { padding: 30px 26px 24px; } }
@media (min-width: 960px) { .fcard { padding: 38px 36px 30px; } }
/* a flex column, not a grid: a closed row's negative margin then gives its gap back */
.form { display: flex; flex-direction: column; gap: 16px; }
.field { display: grid; gap: 7px; }
.field label { font-weight: 600; font-size: 15px; color: var(--ink); }
.field label span { font-weight: 400; color: var(--muted); }
.field input, .field select {
  width: 100%; min-height: 52px; padding: 0 16px; border: 1px solid #8A948E; border-radius: 12px;
  background: #fff; color: var(--ink); font: 400 17px/1.2 var(--sans); -webkit-appearance: none; appearance: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%230B1A10' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 44px; }
.field input:focus, .field select:focus { outline: none; border-color: var(--green-text); box-shadow: 0 0 0 3px rgba(63, 175, 92, .4); }
.field input:user-invalid, .field input[aria-invalid="true"] { border-color: #B42318; }

/* fields that come and go with the mode: the row collapses to nothing, and a disabled fieldset is neither checked
   nor sent. A closed fold gives back the form's gap so the spacing stays even. */
.fold { display: grid; grid-template-rows: 0fr; opacity: 0; visibility: hidden; margin-bottom: -16px;
  transition: grid-template-rows .45s cubic-bezier(.3, .7, .1, 1), opacity .3s ease, margin-bottom .45s cubic-bezier(.3, .7, .1, 1),
    visibility 0s linear .45s; }
.fold.is-open { grid-template-rows: 1fr; opacity: 1; visibility: visible; margin-bottom: 0; transition-delay: 0s; }
/* the clip leaves 4px round the fields for their focus rings; its negative margin keeps a closed row at zero */
.fold__clip { min-height: 0; overflow: hidden; margin: -4px; padding: 4px; }
.fold__in { display: grid; gap: 16px; min-width: 0; margin: 0; padding: 0; border: 0; }

/* the call back box */
.check { position: relative; display: flex; align-items: center; gap: 12px; min-height: 44px; margin-top: 2px; cursor: pointer;
  font-size: 16px; font-weight: 600; color: var(--ink); -webkit-tap-highlight-color: transparent; }
.check__in { position: absolute; left: -10px; top: 50%; width: 44px; height: 44px; margin: -22px 0 0; opacity: 0; cursor: pointer; }
.check__box { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; border: 1.5px solid #8A948E;
  background: #fff; transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease; }
.check__box svg { width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 22; stroke-dashoffset: 22; transition: stroke-dashoffset .28s ease .04s; }
.check__in:checked + .check__box { background: var(--green-text); border-color: var(--green-text); }
.check__in:checked + .check__box svg { stroke-dashoffset: 0; }
.check:hover .check__box { border-color: var(--green-text); }
.check__in:focus-visible + .check__box { outline: 3px solid var(--ink); outline-offset: 3px; }

/* spam traps (Arthur's back end discards any send with one filled): out of sight, out of the tab order, never filled
   in by the browser */
.trap { display: none; }

/* the security check sits just above the button and only shows when Cloudflare asks for a click */
.form__send { display: grid; margin-top: 4px; }
.cf-turnstile { min-width: 0; }
.form.has-check .cf-turnstile { margin-bottom: 14px; }

/* the button: black to ask for the invitation, light green to ask for a call back; the label cross-fades */
.form .pill { width: 100%; min-height: 56px; padding: 14px 24px; line-height: 1.2; text-align: center;
  transition: transform .15s ease, background-color .3s ease, color .3s ease, box-shadow .3s ease; }
.pill__txt { display: inline-block; text-wrap: balance; }
.pill.is-swap .pill__txt { animation: labelIn .38s cubic-bezier(.2, .7, .1, 1); }
@keyframes labelIn { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
.pill .spin { display: none; flex: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .35);
  border-top-color: #fff; animation: spin .8s linear infinite; }
.pill--soft .spin { border-color: rgba(11, 26, 16, .18); border-top-color: var(--ink); }
.pill.is-busy .spin { display: inline-block; }
.pill.is-busy .ic { display: none; }
.pill:disabled { cursor: progress; }
@keyframes spin { to { transform: rotate(360deg); } }

/* "Rather talk first?" and the way back */
.talk { align-self: center; min-height: 44px; margin-top: -6px; padding: 0 10px; border: 0; background: none; cursor: pointer;
  font: 600 16px/1.2 var(--sans); color: var(--green-text); text-decoration: underline; text-underline-offset: 4px;
  text-decoration-thickness: 1px; border-radius: 10px; }
.talk:hover { text-decoration-thickness: 2px; }
.js .talk { display: grid; }
html:not(.js) .talk { display: none; }

.status { display: none; align-items: flex-start; gap: 10px; padding: 14px 16px; border-radius: 14px; background: #FDEDEC; color: #7A1D14;
  font-weight: 600; font-size: 15px; line-height: 1.45; }
.status.is-on { display: flex; }
.status .ic { color: #B42318; --cut: #FDEDEC; width: 20px; height: 20px; margin-top: 1px; }
.status a { color: inherit; font-weight: 700; }
.status.is-quiet { display: flex; position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.motion .status.is-on:not(.is-quiet) { animation: statusIn .35s cubic-bezier(.2, .7, .1, 1); }
@keyframes statusIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.fine { font-size: 14px; line-height: 1.5; color: var(--muted); }
.fine a { color: var(--green-text); font-weight: 600; display: inline-block; padding: 14px 0; margin: -14px 0; }
.ph { background: #FFF4C2; color: #3A2E00; border-radius: 4px; padding: 0 4px; }

/* the thank-you takes the form's place */
.thanks { padding: 6px 0 8px; }
.thanks__ic { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: var(--green-tone); }
.thanks__ic svg { width: 32px; height: 32px; fill: none; stroke: var(--green-text); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.thanks__h { margin-top: 20px; font: 800 28px/1.12 var(--display); letter-spacing: -.015em; color: var(--ink); }
.thanks__h:focus { outline: none; }
.thanks p { margin-top: 12px; font-size: 17px; line-height: 1.55; color: var(--body); }
.thanks:not([data-cb]) .thanks__cb { display: none; }
.motion .thanks:not([hidden]) { animation: thanksIn .6s cubic-bezier(.2, .7, .1, 1) both; }
.motion .thanks:not([hidden]) .thanks__ic { animation: pop .55s cubic-bezier(.3, 1.5, .5, 1) .1s both; }
.motion .thanks:not([hidden]) .thanks__ic svg { stroke-dasharray: 24; animation: draw .5s ease .35s both; }
@keyframes thanksIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes pop { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes draw { from { stroke-dashoffset: 24; } to { stroke-dashoffset: 0; } }

/* the review build's note on where the form can send (never in the client copy or a release) */
html.review .review-tag--form { position: static; display: flex; max-width: none; margin: -4px 0 18px; }

/* ---------- FAQ: flat rows, hairline dividers, collapsed ---------- */
.faq { display: grid; gap: 28px; }
.faq__list { border-top: 1px solid var(--hair); }
.faq__call { margin-top: 22px; }
.faq details { border-bottom: 1px solid var(--hair); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 18px;
  min-height: 62px; padding: 14px 0; font: 700 18px/1.35 var(--display); color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ic { color: var(--ink); width: 20px; height: 20px; transition: transform .3s cubic-bezier(.3, 1.4, .5, 1); }
.faq details[open] summary .ic { transform: rotate(45deg); }
.faq details::details-content { block-size: 0; overflow: clip; transition: block-size .35s ease, content-visibility .35s allow-discrete; }
.faq details[open]::details-content { block-size: auto; }
.faq details p { padding: 0 44px 22px 0; color: var(--muted); }
.faq details a { color: var(--green-text); font-weight: 600; }
@media (min-width: 900px) {
  .faq { grid-template-columns: 1fr 1.6fr; gap: 72px; align-items: start; }
  .faq summary { font-size: 19px; }
}

/* ---------- small print and footer: the signature, big ---------- */
.sec--foot { padding: 64px 0 44px; }
.foot__sig { font: 800 clamp(40px, 9vw, 104px)/.95 var(--display); letter-spacing: -.035em; color: var(--ink); }
.foot__sig span { color: var(--green-text); white-space: nowrap; }
.foot { display: grid; gap: 16px; margin-top: 36px; padding-top: 26px; border-top: 1px solid var(--hair); }
.foot img { height: 30px; width: auto; }
.small { font-size: 14px; line-height: 1.55; color: var(--muted); }
.foot .tel { color: var(--ink); }
@media (min-width: 900px) {
  .sec--foot { padding: 96px 0 56px; }
  .foot { grid-template-columns: auto 1fr auto; align-items: center; gap: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}