/* cardtallyapp.com: the homepage (docs/design-brief.md, "Homepage round 2") and the About and Privacy pages. One stylesheet, no framework.
   Colours and sizes come from the approved frames. The pictures are built from HTML and CSS in `em`: inside .pic, 1em is one pixel of the phone drawing
   (390 wide), scaled with the screen (--u); a piece is placed by its centre (--cx, --cy) and turned by --r. Text inside a picture sets only its own
   font-size in em, and its box (height, padding) sits on a wrapper, so the two never multiply. */
@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 200 800; font-display: swap; src: url('/fonts/bricolage-grotesque-latin-wght-normal.woff2') format('woff2'); }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 300 900; font-display: swap; src: url('/fonts/figtree-latin-wght-normal.woff2') format('woff2'); }

:root {
  color-scheme: light dark;
  --gold: #F5B942; --ink: #111111; --black: #0B0B0C; --grey: #F4F4F2; --cream: #F1E7CF; --white: #FFFFFF;
  --green: #17703A; --mint: #DDF0E3; --red: #B3382C; --line: #DCDCD8; --muted: #5E5E5E;
  --head: 'Bricolage Grotesque', system-ui, sans-serif; --body: 'Figtree', system-ui, sans-serif;
  /* The hero follows the system: gold in light, black with a gold glow in dark (frame Bf0u3). */
  --hero-bg: var(--gold); --hero-ink: #111111; --hero-sub: rgba(17, 17, 17, .9); --hero-fine: rgba(17, 17, 17, .7);
  --btn-bg: #111111; --btn-ink: #FFFFFF; --field-bg: #FFFFFF; --field-ink: #111111; --field-line: #111111; --field-hint: #5E5E5E;
  --u: calc(min(100vw, 560px) / 390);   /* one pixel of the phone drawing */
  --pw: calc(390 * var(--u));
}
@media (prefers-color-scheme: dark) {
  :root {
    --hero-bg: var(--black); --hero-ink: #FFFFFF; --hero-sub: #D8D8D4; --hero-fine: #A3A3A0;
    --btn-bg: var(--gold); --btn-ink: #111111; --field-bg: #1A1A1C; --field-ink: #FFFFFF; --field-line: #4A4A4D; --field-hint: #A3A3A0;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--black); color: var(--ink); font: 400 18px/1.45 var(--body); min-height: 100dvh; display: flex; flex-direction: column; position: relative; overflow-x: hidden; }
h1, h2, h3, p, ul { margin: 0; }
a { color: inherit; text-underline-offset: 3px; }
:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; border-radius: 6px; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 8px; top: -60px; background: #fff; color: #111; padding: 12px 16px; border-radius: 8px; z-index: 10; font-weight: 700; }
.skip:focus { top: 8px; }
.defs { position: absolute; }

/* ---------------------------------------------------------------- the lockup (50% logo) and the header */
.lockup { display: inline-flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; min-height: 48px; }
.mark { display: block; width: 48px; height: 48px; background: currentColor; -webkit-mask: url(/mark.svg) center / contain no-repeat; mask: url(/mark.svg) center / contain no-repeat; flex: none; }
.name { font: 800 22px/1 var(--head); }
.top { position: absolute; left: 0; right: 0; top: 0; z-index: 2; height: 72px; padding: 12px 24px; display: flex; align-items: center; justify-content: space-between; color: var(--hero-ink); }
.top .login, .top nav a { display: inline-flex; align-items: center; min-height: 44px; font: 700 16px/1 var(--body); color: inherit; text-decoration: none; }
.top .login:hover, .top nav a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- bands */
.band { position: relative; overflow: hidden; }
.hero { background: var(--hero-bg); color: var(--hero-ink); padding-top: 72px; }
.s-cost { background: var(--grey); color: var(--ink); }
.s-trade { background: var(--black); color: #FFFFFF; }
.s-show { background: var(--cream); color: var(--ink); }
.s-dealer { background: var(--gold); color: var(--ink); }
.copy { max-width: 560px; margin: 0 auto; padding: 96px 24px 0; }
.hero .copy { padding-top: 20px; }
h1 { font: 800 52px/1 var(--head); letter-spacing: -.0192em; }
h2 { font: 800 40px/1.02 var(--head); letter-spacing: -.03em; }
.copy > p { text-wrap: pretty; margin-top: 16px; font-size: 18px; line-height: 1.45; }
.hero .copy > p.sub { margin-top: 18px; color: var(--hero-sub); }
.s-cost .copy > p, .s-show .copy > p { color: rgba(17, 17, 17, .85); }
.s-dealer .copy > p { color: rgba(17, 17, 17, .9); }
.s-trade .copy > p { color: #D8D8D4; }
.pic-wrap { padding-bottom: 56px; }

/* ---------------------------------------------------------------- the waitlist form */
.cta { max-width: 560px; margin: 0 auto; padding: 0 24px; }
.hero .cta { margin-top: 18px; padding: 0; max-width: none; }
.join { display: flex; flex-direction: column; gap: 12px; }
.join input[type="email"] { width: 100%; height: 56px; border-radius: 28px; border: 2px solid var(--field-line); background: var(--field-bg); color: var(--field-ink); padding: 0 22px; font: 500 17px/1 var(--body); -webkit-appearance: none; appearance: none; }
.join input[type="email"]::placeholder { color: var(--field-hint); opacity: 1; }
.join input[type="email"]:focus { outline: 3px solid var(--hero-ink); outline-offset: 2px; }
.btn { display: flex; align-items: center; justify-content: center; width: 100%; height: 56px; border: 0; border-radius: 28px; background: var(--btn-bg); color: var(--btn-ink); font: 700 17px/1 var(--body); cursor: pointer; -webkit-appearance: none; appearance: none; }
.btn:hover { filter: brightness(1.12); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .65; cursor: progress; }
.fine { font-size: 14px; line-height: 1.2; color: var(--hero-fine); margin: 0; }
.news { display: flex; align-items: center; gap: 12px; min-height: 44px; font-size: 16px; line-height: 1.3; cursor: pointer; }
.news input { color-scheme: light; width: 24px; height: 24px; margin: 0; flex: none; accent-color: #111111; }
.status { margin: 0; font-size: 15px; line-height: 1.3; font-weight: 600; }
.status:empty { display: none; }
.thanks, .oops { display: none; }
.thanks strong { display: block; font: 800 28px/1.1 var(--head); letter-spacing: -.02em; }
.thanks span { display: block; margin-top: 6px; font-size: 17px; line-height: 1.35; }
.oops { margin: 0 0 12px; font-size: 17px; line-height: 1.35; font-weight: 600; }
.thanks.on, .thanks:target, .oops:target { display: block; }
.thanks, .oops { scroll-margin-top: 120px; }
.cta:has(.thanks.on) .join, .cta:has(.thanks:target) .join { display: none; }
.s-dealer .cta { padding-bottom: 72px; }
.s-dealer .pic-wrap { padding-bottom: 16px; }
.s-dealer .fine { color: rgba(17, 17, 17, .72); }
.s-dealer .join input[type="email"] { --field-line: #111111; background: #FFFFFF; color: #111111; }
.s-dealer .join input[type="email"]::placeholder { color: #5E5E5E; }
.s-dealer .btn { background: #111111; color: #FFFFFF; }
.s-dealer .news { color: #111111; }

/* ---------------------------------------------------------------- the pictures */
.pic { position: relative; font-size: var(--u); width: 390em; height: 470em; margin: 28px auto 0; }
.pic-dealer { height: 380em; margin-top: max(28px, calc(var(--u) * 32)); }   /* the slab at the top left reaches 29 units above the picture */
.pic * { margin: 0; }
.at { position: absolute; left: var(--cx); top: var(--cy); transform: translate(-50%, -50%) rotate(var(--r, 0deg)); }
.glow { position: absolute; left: var(--cx); top: var(--cy); width: var(--d); height: var(--d); transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, var(--gc, #F5B942E6), var(--gc0, #F5B94200)); }
.glow.white { --gc: #FFFFFFE6; --gc0: #FFFFFF00; }

/* a slab: a graded card in its case */
.sl { --aw: 98em; --bh: 26em; --ah: 130em; width: calc(var(--aw) + 14em); height: calc(var(--bh) + var(--ah) + 20em); background: #FFFFFF; border-radius: 9em; box-shadow: 0 14em 30em #00000040, inset 0 0 0 1em #CFCFCB; }
.sl .band-l { position: absolute; left: 7em; top: 7em; width: var(--aw); height: var(--bh); background: #F1E7CF; border-radius: 4em; }
.sl .band-l::before { content: ""; position: absolute; left: 6em; top: calc(var(--bh) / 2 - 2em); width: calc(var(--aw) * .46); height: 4em; border-radius: 2em; background: #7F5B0C88; }
.sl .band-l::after { content: ""; position: absolute; right: 6em; top: calc(var(--bh) / 2 - 6em); width: 16em; height: 12em; border-radius: 3em; background: #7F5B0C; }
.sl .art { position: absolute; left: 7em; top: calc(var(--bh) + 13em); width: var(--aw); height: var(--ah); border-radius: 5em; background: linear-gradient(190deg, #1D4F86, #8DBDEC); }
.sl .art.ember { background: linear-gradient(190deg, #B3382C, #F5B942); }
.sl .art.gold { background: linear-gradient(190deg, #2B2B2D, #B8892B); }
.star { position: absolute; left: calc(50% - 14em); top: calc(50% - 14em); width: 28em; height: 28em; fill: none; stroke: #FFFFFFAA; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* a panel: a piece of the app, drawn smaller */
.card { width: var(--w); background: #FFFFFF; border: 1em solid var(--line); border-radius: 14em; box-shadow: 0 20em 44em #00000040; overflow: hidden; color: #111111; }
.card .ttl { display: flex; align-items: center; justify-content: space-between; height: 46em; padding: 0 14em; }
.card .ttl-t { font: 700 16em/1.2 var(--head); }
.rw { display: flex; align-items: center; justify-content: space-between; height: 44em; padding: 0 14em; border-top: 1em solid var(--line); }
.k { font-size: 13em; line-height: 1.2; color: var(--muted); font-weight: 400; }
.v { font-size: 15em; line-height: 1.2; font-weight: 700; color: #111111; }
.rw.big { height: 52em; }
.rw.big .k { font-size: 12em; }
.rw.big .v { font-size: 20em; line-height: 1.2; }
.win { background: var(--mint); color: var(--green); }
.win > span { display: block; font-weight: 700; color: var(--green); }
.tagpill { display: inline-flex; align-items: center; height: 22em; padding: 0 10em; border-radius: 6em; background: #DDE8F4; color: #1D4F86; }
.tagpill span { font-size: 12em; line-height: 1; font-weight: 700; }
.tagpill.active { height: 20em; padding: 0 8em; background: var(--mint); color: var(--green); }

.chip { display: flex; align-items: center; justify-content: center; background: #FFFFFF; padding: 12em 25em; border-radius: 23em; box-shadow: 0 12em 24em #00000040; white-space: nowrap; }
.chip span { font: 800 19em/1.21 var(--head); }
.chip.up span { color: var(--green); }
.badge { display: flex; align-items: center; justify-content: center; background: #111111; color: var(--gold); box-shadow: inset 0 0 0 2em var(--gold); }
.badge svg { width: 22em; height: 22em; }
.ico { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* the phone */
.phone { width: 270em; height: 620em; background: #0F0F10; border-radius: 44em; box-shadow: 0 24em 50em #00000055, inset 0 0 0 1em #3A3A3D; }
.screen { position: absolute; left: 9em; top: 9em; width: 252em; height: 602em; background: #F4F4F2; border-radius: 36em; overflow: hidden; padding: 46em 12em 0; display: flex; flex-direction: column; gap: 10em; color: #111111; }
.island { position: absolute; left: 97em; top: 19em; width: 76em; height: 22em; border-radius: 11em; background: #0F0F10; z-index: 2; }
.ph-t { display: block; font: 700 20em/1.2 var(--head); }
.ph-p { background: #FFFFFF; border: 1em solid var(--line); border-radius: 12em; overflow: hidden; flex: none; }
.ph-p .pt { height: 29em; padding: 10em 12em 0; }
.ph-p .pt span { font: 700 14em/1.2 var(--head); }
.ph-r { display: flex; align-items: center; height: 47em; padding: 0 12em; border-top: 1em solid var(--line); }
.thumb { position: relative; width: 24em; height: 32em; background: #F1E7CF; border-radius: 4em; flex: none; margin-right: 8em; }
.thumb::before { content: ""; position: absolute; left: 4em; top: 4em; width: 16em; height: 5em; border-radius: 2em; background: #7F5B0C88; }
.ph-r .nm { flex: 1; font-size: 13em; font-weight: 600; line-height: 1.2; }
.ph-r .am { font-size: 13em; font-weight: 700; line-height: 1.2; }
.ph-p.win { background: var(--mint); border-color: #17703A44; }
.ph-p.win .rbox { height: 56em; padding: 4em 12em 0; }
.ph-p.win .res { display: block; font-size: 17em; line-height: 1.25; font-weight: 700; color: var(--green); }
.res-big { padding: 16em 16em 0; height: 92em; }
.res-big span { font-size: 26em; line-height: 1.15; }
.res-show { display: flex; flex-direction: column; gap: 2em; padding: 14em; height: 109em; }
.res-show .lab { font-size: 14em; line-height: 1.2; font-weight: 600; color: var(--green); }
.res-show .num { font: 800 52em/1.2 var(--head); letter-spacing: -.02em; color: var(--green); }
.photo { background: linear-gradient(200deg, #3A3A3D, #111111); border-radius: 26em; box-shadow: 0 20em 44em #00000055; color: var(--gold); display: flex; align-items: center; justify-content: center; }
.photo svg { width: 56em; height: 56em; }
.into { background: #111111; color: var(--gold); padding: 12em 38em; border-radius: 23em; box-shadow: 0 12em 24em #00000040; white-space: nowrap; }
.into span { font: 800 18em/1.2 var(--head); }

/* where each piece sits in each picture (centre and turn, in phone-drawing pixels; the turn is the drawing's, reversed for CSS) */
.h-l { --cx: 23.5em; --cy: 300em; --r: -14deg; }
.h-r { --cx: 372.5em; --cy: 190.5em; --r: 12deg; --aw: 94em; --bh: 26em; --ah: 125em; }
.h-phone { --cx: 195.5em; --cy: 365.5em; --r: -4deg; }
.h-t1 { --cx: 90em; --cy: 29.5em; --r: -7deg; }
.hero-glow { --cx: 195em; --cy: 250em; --d: 380em; }
@media (prefers-color-scheme: dark) { .glow.hero-glow { --cx: 195em; --cy: 260em; --d: 540em; --gc: #F5B942E6; --gc0: #F5B94200; } }
.c-glow { --cx: 215em; --cy: 210em; --d: 360em; }
.c-sl { --cx: 104em; --cy: 332.5em; --r: 9deg; --aw: 136em; --bh: 35em; --ah: 177em; }
.c-card { --cx: 218em; --cy: 170em; --r: -3deg; --w: 313em; }
.c-tag { --cx: 232.5em; --cy: 432em; --r: 4deg; }
.t-glow { --cx: 195em; --cy: 250em; --d: 380em; }
.t-sl { --cx: 43.5em; --cy: 128.5em; --r: 14deg; --aw: 82em; --bh: 23em; --ah: 108em; }
.t-pile { --cx: 252em; --cy: 111.5em; --r: -5deg; --w: 252em; height: 150em; }
.t-res { --cx: 190em; --cy: 331.5em; --r: 3deg; --w: 330em; height: 196em; }
.t-swap { --cx: 195em; --cy: 209em; width: 46em; height: 46em; border-radius: 50%; }
.s-glow { --cx: 195em; --cy: 285em; --d: 370em; }
.s-a { --cx: 108.5em; --cy: 100em; --r: 18deg; --aw: 90em; --bh: 24em; --ah: 118em; }
.s-b { --cx: 278em; --cy: 100em; --r: -14deg; --aw: 90em; --bh: 24em; --ah: 118em; }
.s-c { --cx: 193em; --cy: 77.5em; --r: 3deg; --aw: 90em; --bh: 24em; --ah: 118em; }
.s-card { --cx: 195em; --cy: 303.5em; --r: -2deg; --w: 330em; height: 295em; }
.d-a { --cx: 39.5em; --cy: 60em; --r: 16deg; --aw: 86em; --bh: 23em; --ah: 113em; }
.d-b { --cx: 350.5em; --cy: 300em; --r: -14deg; --aw: 86em; --bh: 23em; --ah: 113em; }
.d-photo { --cx: 195em; --cy: 190em; --r: 2deg; width: 342em; height: 300em; }

/* ---------------------------------------------------------------- the footer */
.foot { background: var(--black); color: #FFFFFF; padding: 48px 24px; display: flex; flex-direction: column; gap: 28px; }
.foot .links { display: flex; flex-wrap: wrap; column-gap: 28px; margin: -12px 0; }
.foot .links a { display: inline-flex; align-items: center; min-height: 44px; font: 600 16px/1 var(--body); color: #FFFFFF; text-decoration: none; }
.foot .links a:hover { text-decoration: underline; }
.foot .copyright { font-size: 13px; line-height: 1.2; color: #A3A3A0; margin: 0; }

/* ---------------------------------------------------------------- wide screens: the text on one side, the picture on the other */
@media (min-width: 1080px) {
  :root { --u: min(1.25px, calc(100vw / 1024)); }
  .top { height: 88px; padding: 20px 80px; }
  .top .login, .top nav a { font-size: 18px; }
  .hero { padding-top: 104px; }
  .hero-in, .sec-in { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) var(--pw); column-gap: 72px; align-items: center; }
  .hero-in { padding: 0 68px 0 80px; align-items: start; column-gap: 40px; }
  .hero .copy { max-width: 620px; margin: 0; padding: 58px 0 58px; }
  h1 { font-size: clamp(60px, 6.875vw, 88px); letter-spacing: -.025em; }
  .hero .copy > p.sub { margin-top: 24px; font-size: 22px; }
  .hero .cta { margin: 24px 0 0; padding: 0; max-width: 520px; }
  .join { flex-direction: row; flex-wrap: wrap; gap: 14px 12px; }
  .join input[type="email"], .btn { height: 64px; border-radius: 32px; font-size: 19px; }
  .join input[type="email"] { flex: 1 1 240px; width: auto; min-width: 0; padding: 0 26px; }
  .btn { flex: 0 0 auto; width: auto; padding: 0 34px; }
  .join .fine, .join .news, .join .status { flex: 0 0 100%; }
  .fine { font-size: 15px; }
  .pic, .pic-dealer { margin: 0; }
  .hero .pic { margin: 16px 0 0; }
  .sec-in { padding: 96px 100px 0; }
  .sec-in .copy { max-width: 520px; margin: 0; padding: 0; }
  .sec-in .copy > p { margin-top: 22px; font-size: 22px; }
  h2 { font-size: clamp(42px, 4.375vw, 56px); letter-spacing: -.032em; }
  .pic-wrap { padding-bottom: 0; }
  .s-trade .sec-in, .s-dealer .sec-in { grid-template-columns: var(--pw) minmax(0, 1fr); }
  .s-trade .sec-in .pic, .s-dealer .sec-in .pic { order: -1; }
  .s-dealer .sec-in { grid-template-areas: "pic copy" "pic cta"; grid-template-rows: 1fr 1fr; padding-bottom: 96px; align-items: stretch; }
  .s-dealer .pic { grid-area: pic; align-self: center; }
  .s-dealer .copy { grid-area: copy; align-self: end; }
  .s-dealer .cta { grid-area: cta; align-self: start; margin: 0; padding: 22px 0 0; max-width: 520px; }
  .s-dealer .pic-wrap { display: contents; }
  .foot { max-width: none; padding: 0 80px; height: 160px; flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; }
  .foot .links { margin: 0; column-gap: 36px; }
  .foot .links a { font-size: 17px; }
  .foot .copyright { font-size: 14px; }
}

/* ---------------------------------------------------------------- About and Privacy */
body.page { background: var(--grey); color: var(--ink); }
.page .top { position: relative; background: var(--hero-bg); }
.page .top nav { display: flex; gap: 4px; margin-right: -8px; }
.page .top nav a { padding: 0 10px; border-radius: 8px; }
.page .top nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; }
.page main { flex: 1; width: 100%; max-width: 760px; margin: 0 auto; padding: 40px 24px 56px; }
.page h1 { font: 800 clamp(36px, 8vw, 52px)/1.04 var(--head); letter-spacing: -.03em; margin: 0 0 16px; }
.page h2 { font: 800 24px/1.2 var(--head); letter-spacing: -.02em; margin: 40px 0 8px; }
.page p, .page ul { margin: 0 0 14px; font-size: 18px; line-height: 1.55; }
.page ul { padding-left: 22px; }
.page li { margin-bottom: 8px; }
.page main a { color: #7F5B0C; position: relative; }
.page main p a::after, .page main li a::after { content: ""; position: absolute; left: 0; right: 0; top: -11px; bottom: -11px; }   /* the tap area of a link in a sentence is 44 px tall; the text does not move */
.page code { font-size: .92em; background: #00000012; padding: 1px 5px; border-radius: 4px; }
.page .lead { font-size: 21px; line-height: 1.45; }
.page .small { font-size: 15px; color: var(--muted); }
.page .status { display: inline-block; padding: 12px 16px; background: var(--cream); border: 1px solid var(--line); border-radius: 14px; font-weight: 600; }
@media (prefers-color-scheme: dark) {
  body.page { background: var(--black); color: #F5F5F3; }
  .page .small { color: #A3A3A0; }
  .page main a { color: var(--gold); }
  .page code { background: #FFFFFF1F; }
  .page .status { background: #2A2415; border-color: #2B2B2D; color: #F5F5F3; }
  .page .foot { border-top: 1px solid #2B2B2D; }
}
@media (min-width: 1080px) { .page .top { height: 88px; } .page main { padding-top: 64px; } }