/* ============================================================================
   niswosakit · Issue 01 — Woonsocket Votes
   First slice of the design system: tokens → base → components.
   Stark look, warm words. Light + dark, auto. Nonpartisan palette
   (deliberately NOT red/blue — those read partisan). Fluid, REM-based.
   ============================================================================ */

@layer tokens, base, components, utilities;

/* Git Sans: the logo / display font. All caps, special headings only. */
@font-face {
  font-family: "Git Sans";
  src: url("fonts/git-sans.woff") format("woff"),
       url("fonts/git-sans.ttf") format("truetype");
  font-weight: 400 900;
  font-display: swap;
}

/* Formula Condensed: the monument. Used by the infooter H2 + P1.
   Declared here so index.html (which loads only styles.css) has it too. */
@font-face {
  font-family: "Formula Condensed";
  src: url("fonts/formula-condensed-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Formula Condensed";
  src: url("fonts/formula-condensed-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Plus Jakarta Sans (body) + Geist Mono (labels/support), self-hosted variable
   fonts so live visitors get the brand type, no third-party font call. */
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("fonts/plus-jakarta-sans.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("fonts/geist-mono.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------------------------------------------------------------- tokens -- */
@layer tokens {
  :root {
    /* palette — light (default) */
    --bg:        #f7f5f1;   /* warm off-white */
    --surface:   #fffdf9;   /* raised cards */
    --ink:       #171310;   /* warm near-black */
    --ink-soft:  #4b453e;   /* secondary text */
    --muted:     #8a8279;   /* tertiary / captions */
    --line:      #e4ded4;   /* hairlines */
    --accent:    #a85a12;   /* warm ochre — civic, nonpartisan */
    --accent-ink:#ffffff;   /* text on accent */
    --focus:     #2b6cb0;   /* focus ring only (not a brand color) */
    --hint:      color-mix(in srgb, var(--ink) 45%, transparent); /* the semi-transparent gray consent line */
    /* brand pops — the logo pink + the support green, straight from css/brand.css */
    --pink:      #FDAEF1;   /* brand logo pink — primary CTA fill (light, needs dark text) */
    --green:     #5FFF78;   /* support / niswosakit */
    --footer-bg: #212121;   /* footer band: dark grey (kept theme-independent) */
    --footer-fg: #f4f1eb;   /* footer band text */

    /* fluid type — clamp() on a REM scale, breathes from phone to desktop */
    --step--1: clamp(0.83rem, 0.80rem + 0.15vw, 0.92rem);
    --step-0:  clamp(1.00rem, 0.95rem + 0.25vw, 1.13rem);
    --step-1:  clamp(1.20rem, 1.10rem + 0.50vw, 1.50rem);
    --step-2:  clamp(1.44rem, 1.25rem + 0.95vw, 2.00rem);
    --step-3:  clamp(1.73rem, 1.40rem + 1.65vw, 2.75rem);
    --step-4:  clamp(2.07rem, 1.55rem + 2.60vw, 3.75rem);
    --step-5:  clamp(2.49rem, 1.65rem + 4.20vw, 5.25rem);

    /* space scale */
    --space-1: 0.375rem;  --space-2: 0.625rem;  --space-3: 1rem;
    --space-4: 1.5rem;    --space-5: 2.5rem;     --space-6: 4rem;   --space-7: 6rem;

    --radius: 14px;
    --radius-lg: 26px;   /* softer, for larger containers like the signup */
    --measure: 66ch;               /* readable line length */
    /* one adaptive side gutter for the whole page: a comfy ~20px on phones,
       opening up to roomy on desktop. Applied ONCE (on body) so nothing doubles. */
    --gutter: clamp(1.25rem, 5vw, var(--space-6));
    --ease: cubic-bezier(.2,.7,.2,1);
    --dur: 240ms;

    color-scheme: light;
  }

  /* dark — auto by device, unless a data-theme override wins */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --bg:#100e0c; --surface:#191512; --ink:#f3efe8; --ink-soft:#c3bcb0;
      --muted:#8f877c; --line:#2a2521; --accent:#e6a35a; --accent-ink:#171310;
      --focus:#7cb3e8; --hint: color-mix(in srgb, var(--ink) 42%, transparent);
      color-scheme: dark;
    }
  }
  :root[data-theme="dark"] {
    --bg:#100e0c; --surface:#191512; --ink:#f3efe8; --ink-soft:#c3bcb0;
    --muted:#8f877c; --line:#2a2521; --accent:#e6a35a; --accent-ink:#171310;
    --focus:#7cb3e8; --hint: color-mix(in srgb, var(--ink) 42%, transparent);
    color-scheme: dark;
  }
}

/* ------------------------------------------------------------------ base -- */
@layer base {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }

  /* Background on <html> too, not just <body>: iOS Safari (26+, which dropped the
     theme-color meta) paints the toolbar + overscroll/safe-area from a viewport-edge
     element's color. When the green infooter opens as position:fixed inset:0 it samples
     green, and with no bg on <html> there's nothing to snap back to, so it sticks above
     the header. An explicit black canvas here keeps the safe area black. */
  html { -webkit-text-size-adjust: 100%; scroll-snap-type: y proximity; scroll-padding-top: var(--space-4); overflow-x: clip; background: var(--bg); }
  body {
    background: var(--bg);
    color: var(--ink);
    font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: var(--step-0);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    padding: clamp(var(--space-4), 5vw, var(--space-7)) var(--gutter);
    /* full-height column so the footer bottoms out even when content is short */
    min-height: 100vh; min-height: 100dvh;
    display: flex; flex-direction: column;
  }

  h1, h2, h3 { line-height: 1.05; letter-spacing: -0.02em; font-weight: 700; text-wrap: balance; }
  p  { text-wrap: pretty; }
  a  { color: inherit; text-underline-offset: 0.18em; }

  :focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  }
}

/* ------------------------------------------------------------ components -- */
@layer components {
  /* the content column: body already supplies the side gutter (--gutter), so the
     wrap adds none of its own (no doubling). min-width:0 lets it shrink cleanly. */
  .wrap { max-width: 74ch; margin-inline: auto; display: flex; flex-direction: column; flex: 1 0 auto; min-width: 0; }

  /* nav.js token bridge: it expects --ink = dark ground + --paper = light ink;
     the vote page names them the other way, so remap only within the nav scope.
     The masthead is a body child, so it already sits inside body's --gutter. */
  .masthead[data-niswo-nav] { --paper: var(--ink); }
  .lensmenu { --ink: #0B0B0C; --paper: #EBEBEB; --muted: #9A968C; }

  .prose { max-width: var(--measure); }

  .issue-tag { color: var(--muted); font-size: var(--step--1); letter-spacing:0.02em; text-transform: uppercase; }

  /* Git Sans, applied only to special headings via .display */
  .display { font-family: "Git Sans", "Plus Jakarta Sans", system-ui, sans-serif; text-transform: uppercase; letter-spacing: -0.01em; }

  /* the urgent line + countdown */
  .urgent { margin: var(--space-4) 0 var(--space-6); }
  .urgent h1 { font-size: var(--step-5); }
  .urgent .lead { color: var(--ink-soft); font-size: var(--step-1); margin-top: var(--space-3); max-width: var(--measure); }
  .countdown { display:flex; gap: var(--space-4); margin-top: var(--space-4); flex-wrap: wrap; }
  .count { display:flex; flex-direction:column; }
  .count b { font-size: var(--step-3); font-variant-numeric: tabular-nums; color: var(--accent); }
  .count span { font-size: var(--step--1); color: var(--muted); text-transform: uppercase; letter-spacing:0.06em; }

  /* section rhythm */
  section { padding-block: var(--space-5); border-top: 1px solid var(--line); }
  section > h2 { font-size: var(--step-3); margin-bottom: var(--space-4); }

  /* who's running — the field at a glance (roster only, no scorecards) */
  .glance { display: grid; gap: var(--space-4) var(--space-5); align-items: start;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
  .glance__h { font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--muted); font-weight: 700; margin: 0 0 var(--space-2); }
  .glance__list { list-style: none; margin: 0; padding: 0; }
  .glance__list li { padding: var(--space-2) 0; border-top: 1px solid var(--line); }
  .glance__list b { font-weight: 700; }
  .glance__list span { display: block; font-size: var(--step--1); color: var(--muted); margin-top: 2px; }
  /* the long council list wraps into two short sub-columns when there's room */
  .glance__list--split { columns: 2 8rem; column-gap: var(--space-4); }
  .glance__list--split li { break-inside: avoid; }
  .glance__sub { font-size: var(--step--1); color: var(--muted); margin: var(--space-2) 0 0; }
  .glance__note { font-size: var(--step--1); color: var(--muted); margin-top: var(--space-4); }

  /* "Who's running" is the header for the whole candidates block: bigger than a
     section h2 (an H1.5), and no divider line beneath the intro so it flows into
     the Mayor race below it. */
  #field-h { font-size: var(--step-4); line-height: 1.02; }
  #mayor { border-top: 0; padding-top: 0; }

  /* ways-to-vote cards — container-aware grid */
  .ways { display:grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
  .card { background: var(--surface); border:1px solid var(--line); border-radius: var(--radius);
          padding: var(--space-4); display:flex; flex-direction:column; gap: var(--space-2); }
  .card h3 { font-size: var(--step-1); }
  .card .when { color: var(--accent); font-weight:600; font-size: var(--step--1); }

  /* ballot list */
  .ballot { display:grid; gap: var(--space-3); }
  .ballot-item { padding: var(--space-3) 0; border-bottom:1px solid var(--line); }
  .ballot-item h3 { font-size: var(--step-1); margin-bottom: var(--space-1); }
  .ballot-item p { color: var(--ink-soft); max-width: var(--measure); }
  .ballot-item .open { color: var(--accent); font-weight:600; }

  /* ballot-question accordions (native <details>) */
  .questions { display:grid; gap: var(--space-2); margin-top: var(--space-3); }
  .q { border:1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow:hidden; }
  .q > summary {
    cursor:pointer; padding: var(--space-3) var(--space-4); font-weight:600; list-style:none;
    display:flex; justify-content:space-between; align-items:center; gap: var(--space-3);
  }
  .q > summary::-webkit-details-marker { display:none; }
  .q > summary::after { content:"+"; color: var(--accent); font-weight:700; font-size:1.25em; line-height:1; }
  .q[open] > summary::after { content:"\2212"; } /* minus sign, not a dash */
  .q .amount { color: var(--accent); font-weight:700; font-variant-numeric: tabular-nums; margin-left:.4em; }
  .q .q-body { padding: 0 var(--space-4) var(--space-4); color: var(--ink-soft); max-width: var(--measure); }
  .q-note { margin-top: var(--space-3); font-size: var(--step--1); color: var(--muted); }

  /* buttons */
  .btn { display:inline-flex; align-items:center; gap:.5em; font: inherit; font-weight:600;
         padding: .7em 1.1em; border-radius: 999px; border:1px solid var(--ink);
         background: var(--ink); color: var(--bg); text-decoration:none; cursor:pointer;
         transition: transform var(--dur) var(--ease), background var(--dur) var(--ease); }
  .btn:hover { transform: translateY(-1px); }
  .btn.ghost { background: transparent; color: var(--ink); }
  .btn.small { padding:.45em .8em; font-size: var(--step--1); }
  /* primary action, brand pink (pastel, so dark ink text for contrast) */
  .btn--pink { background: var(--pink); border-color: var(--pink); color: var(--ink); }
  .btn--pink:hover { background: color-mix(in srgb, var(--pink) 86%, #000); border-color: color-mix(in srgb, var(--pink) 86%, #000); }

  /* hero call-to-action row (two buttons under the lead) */
  .cta-row { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }

  /* signup */
  .signup { background: var(--surface); border:1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-5); margin-top: clamp(var(--space-6), 9vw, var(--space-7)); }
  /* last content block: soaks up spare height so the footer bottoms out (sticky footer) */
  .wrap > .signup { margin-bottom: auto; }
  .signup h2 { font-size: var(--step-3); }
  .field { display:flex; gap: var(--space-2); margin-top: var(--space-3); flex-wrap: wrap; }
  .field input[type=email] {
    flex:1 1 16rem; font: inherit; padding:.75em 1em; border-radius: 999px;
    border:1px solid var(--line); background: var(--bg); color: var(--ink);
  }
  .field input::placeholder { color: var(--muted); }
  /* the soft, half-transparent gray consent line the owner asked for */
  .consent { margin-top: var(--space-2); font-size: var(--step--1); color: var(--hint); max-width: var(--measure); }

  /* footer / trust: dark-grey band, sits above the support infooter (theme-independent).
     Full-bleed edge to edge (no card, no rounding), the same break-out the green
     infooter below uses; an inner wrapper holds the text at the 74ch page measure. */
  .site-footer { margin-top: var(--space-6); background:var(--footer-bg);
                 width: 100vw; margin-inline: calc(50% - 50vw);
                 padding-block: clamp(1.75rem,5vw,3rem);
                 color:color-mix(in srgb, var(--footer-fg) 82%, transparent);
                 font-size: var(--step--1); }
  .site-footer__inner { width: 100%; max-width: 74ch; margin-inline: auto;
                 padding-inline: clamp(var(--space-3), 5vw, var(--space-6));
                 display:grid; gap: var(--space-3); }
  .site-footer strong { color:var(--footer-fg); }
  .site-footer a { color:var(--footer-fg); text-underline-offset:.18em; }

  /* (theme toggle styling now lives with the page bar, up top) */
}

/* ------------------------------------------------------------- utilities -- */
@layer utilities {
  .visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
  .stack > * + * { margin-top: var(--space-3); }
}

/* ------------------------------------------------ infooter (full-bleed green) */
/* "Infooter" = our info + footer. Full-width edge to edge; inner content keeps
   the container shape (74ch, centered). Collapsed = a slim green strip with an
   inviting bounce-arrow. Scroll/swipe DOWN at the end of the page and you feel
   resistance; break past the threshold and it locks open to a full-screen green
   panel (JS-driven; see app.js). Click the arrow / Enter opens it too; Esc
   closes. Scoped palette, identical in light + dark: green #5FFF78, black ink. */
@layer components {
  :root { --infooter-h: 4.75rem; }

  /* reserve room so the fixed strip never covers the legal footer */
  body { padding-bottom: 0; }

  .infooter {
    --if-green:    #5FFF78;
    --if-ink:      #000;
    --if-ink-soft: color-mix(in srgb, #000 62%, transparent);
    --if-line:     color-mix(in srgb, #000 22%, transparent);
    --if-hover:    color-mix(in srgb, #000 10%, transparent);
    --pull: 0;

    position: static;                       /* parked in-flow at the bottom of the page */
    width: 100vw; margin-inline: calc(50% - 50vw);   /* full-bleed out of the 74ch wrap */
    padding: 0; border: 0;                  /* cancel the base <section> block padding + border-top */
    background: var(--if-green); color: var(--if-ink);
    box-shadow: 0 -1px 0 color-mix(in srgb, #000 14%, transparent);
    display: flex; flex-direction: column;
    margin-top: var(--space-6);            /* breathing room above the green bar */
  }
  /* lock the page behind any full-screen payment/support overlay */
  html.no-scroll { overflow: hidden; }
  /* OPEN = full-screen takeover that rises from the bottom; parked in-flow when closed */
  .infooter.is-open {
    position: fixed; inset: 0; z-index: 100;
    width: 100%; margin: 0; height: 100dvh;
    box-shadow: none; animation: if-rise .34s var(--ease);
  }
  @keyframes if-rise { from { transform: translateY(100%); } to { transform: translateY(0); } }
  /* tactile feedback while flicking the parked bar upward (before it breaks open) */
  .infooter.is-pulling:not(.is-open) { transition: none; transform: translateY(calc(var(--pull, 0) * -14px)); }
  /* and while flicking the open panel back up to close it (same resistance, drags down) */
  .infooter.is-open.is-closing { transition: none; transform: translateY(calc(var(--rev, 0) * 90px)); }

  .infooter__bar {
    flex: none; height: var(--infooter-h);
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
    width: 100%; max-width: 74ch; margin-inline: auto;
    padding-inline: clamp(var(--space-3), 5vw, var(--space-6));
  }
  .infooter__ask { font-size: var(--step-1); font-weight: 700; letter-spacing: -0.02em; }

  .infooter__toggle {
    flex: none; width: 3rem; height: 3rem; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--if-ink); background: transparent; border: 2px solid var(--if-ink);
    cursor: pointer; transition: transform .2s var(--ease), background .2s var(--ease);
  }
  .infooter__toggle:hover { background: var(--if-hover); transform: translateY(-1px); }
  /* chevron points UP when closed (open me), DOWN when open (close me) */
  .infooter__arrow { display: block; transform: rotate(180deg); transition: transform .3s var(--ease); }
  .infooter.is-open .infooter__arrow { transform: rotate(0deg); }

  @keyframes if-nudge {
    0%   { transform: translateY(0); }
    8%   { transform: translateY(4px); }
    16%  { transform: translateY(0); }
    24%  { transform: translateY(4px); }
    32%  { transform: translateY(0); }
    100% { transform: translateY(0); }
  }

  .infooter__panel {
    width: 100%; max-width: 74ch; margin-inline: auto;
    padding-inline: clamp(var(--space-3), 5vw, var(--space-6));
    max-height: 0; overflow: hidden; opacity: 0;    /* collapsed while parked */
  }
  .infooter.is-open .infooter__panel {
    flex: 1 1 auto; min-height: 0; max-height: none; overflow-y: auto; overscroll-behavior: contain;
    opacity: 1; display: flex; flex-direction: column; justify-content: center;
    padding-block: var(--space-5) var(--space-6);
  }
  .infooter__panel > * + * { margin-top: var(--space-3); }

  .infooter__h { font-family: "Formula Condensed", "Plus Jakarta Sans", system-ui, sans-serif;
    font-weight: 700; font-size: clamp(2rem, 1.4rem + 3vw, 3.2rem);
    line-height: 1.02; letter-spacing: 0; max-width: 30ch; }
  .infooter__p1 { font-family: "Formula Condensed", "Plus Jakarta Sans", system-ui, sans-serif;
    font-weight: 400; font-size: clamp(1.3rem, 1.05rem + 1.1vw, 1.7rem);
    line-height: 1.22; max-width: 38ch; }

  .infooter__tiers { display: flex; flex-wrap: wrap; gap: var(--space-2); }
  .infooter .tier {
    display: inline-flex; align-items: center; justify-content: center; min-width: 4.25rem;
    padding: .7em 1.15em; cursor: pointer; text-decoration: none; font-weight: 700;
    font-variant-numeric: tabular-nums; color: #fff;
    background: var(--if-ink); border: 2px solid var(--if-ink); border-radius: 999px;
    transition: background .15s var(--ease), color .15s var(--ease), transform .15s var(--ease);
  }
  .infooter .tier:hover { background: color-mix(in srgb, var(--if-ink) 88%, #fff); color: #fff; transform: translateY(-1px); }

  /* grey fine print under the tiers: what contributions are, and are not. */
  .infooter__fine { margin-top: var(--space-3); max-width: 54ch;
    font-size: clamp(.78rem, .74rem + .2vw, .9rem); line-height: 1.5; color: var(--if-ink-soft); }

  .infooter__alt { border-top: 1px solid var(--if-line); padding-top: var(--space-4); margin-top: var(--space-4); }
  .infooter__alt-lead { color: var(--if-ink-soft); }
  .infooter__alt-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
  .if-btn {
    display: inline-flex; align-items: center; gap: .5em; font: inherit; font-weight: 700;
    padding: .7em 1.1em; border-radius: 999px; cursor: pointer; text-decoration: none;
    color: var(--if-green); background: var(--if-ink); border: 2px solid var(--if-ink);
    transition: transform .15s var(--ease); }
  .if-btn:hover { transform: translateY(-1px); }
  .if-btn.ghost { background: transparent; color: var(--if-ink); }

  /* tax-deductible line: dead link for now (typeform flow to come). */
  .infooter__tax { display: inline-flex; align-items: center; gap: .4em; margin-top: var(--space-4);
    max-width: 60ch; text-decoration: none; color: var(--if-ink-soft); cursor: pointer;
    transition: color .2s var(--ease); }
  .infooter__tax:hover { color: var(--if-ink); }
  .infooter__tax-arrow { flex: 0 0 auto; width: 1.2em; height: 1.2em; fill: currentColor;
    transition: transform .22s var(--ease); }
  .infooter__tax:hover .infooter__tax-arrow { transform: translateX(5px); }
  @media (prefers-reduced-motion: reduce) { .infooter__tax-arrow { transition: none; } }
  /* decorative headline break: only on larger displays; wraps naturally below. */
  @media (max-width: 768px) { .infooter .br-lg { display: none; } }

  .infooter :focus-visible { outline: 2px solid var(--if-ink); outline-offset: 3px; }

  @media (max-width: 560px) {
    .infooter__ask { font-size: var(--step-0); }
  }
}

/* --------------------------------------------- custom checkout modal (Stripe Element) */
@layer components {
  .co-overlay {
    position: fixed; inset: 0; z-index: 100;
    display: grid; place-items: center; padding: var(--space-3);
    background: color-mix(in srgb, #000 55%, transparent);
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
    animation: co-fade .18s var(--ease);
  }
  @keyframes co-fade { from { opacity: 0; } }
  .co-modal {
    position: relative; width: min(30rem, 100%); max-height: 92dvh; overflow-y: auto;
    background: var(--surface); color: var(--ink);
    border: 1px solid var(--line); border-radius: var(--radius-lg);
    padding: clamp(var(--space-4), 5vw, var(--space-5));
    box-shadow: 0 30px 70px color-mix(in srgb, #000 35%, transparent);
  }
  .co-close {
    position: absolute; top: var(--space-3); right: var(--space-3);
    width: 2rem; height: 2rem; border-radius: 50%; border: 0; cursor: pointer;
    background: transparent; color: var(--muted); font-size: 1.5rem; line-height: 1;
  }
  .co-close:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 8%, transparent); }
  .co-eyebrow { color: var(--muted); font-size: var(--step--1); text-transform: uppercase; letter-spacing: .06em; }
  .co-amount { font-size: var(--step-4); font-weight: 800; letter-spacing: -0.02em; margin: var(--space-1) 0 var(--space-4); }
  .co-element { margin-bottom: var(--space-3); min-height: 3rem; }
  .co-err { color: #c0392b; font-size: var(--step--1); min-height: 1.2em; margin-bottom: var(--space-2); }
  .co-pay {
    width: 100%; font: inherit; font-weight: 700; font-size: var(--step-0);
    background: var(--ink); color: var(--bg); border: 0; border-radius: 999px;
    padding: .95em 1.2em; cursor: pointer; transition: transform .15s var(--ease), opacity .15s;
  }
  .co-pay:hover { transform: translateY(-1px); }
  .co-pay:disabled { opacity: .6; cursor: default; transform: none; }
  .co-secure { text-align: center; color: var(--muted); font-size: var(--step--1); margin-top: var(--space-3); }

  /* custom amount keypad (full-screen, Cash App style) -> then the card modal */
  .pad-overlay {
    position: fixed; inset: 0; z-index: 110;
    background: var(--bg); color: var(--ink);
    animation: co-fade .18s var(--ease);
  }
  .pad {
    display: flex; flex-direction: column; height: 100%;
    width: min(28rem, 100%); margin-inline: auto;
    padding: max(var(--space-3), env(safe-area-inset-top)) var(--space-4) max(var(--space-4), env(safe-area-inset-bottom));
  }
  .pad__top { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) 0; }
  .pad__back {
    flex: none; width: 2.75rem; height: 2.75rem; display: grid; place-items: center;
    background: transparent; border: 0; color: var(--ink); cursor: pointer; border-radius: 50%;
  }
  .pad__back:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }
  .pad__label { font-size: var(--step--1); color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
  .pad__amount {
    flex: 1 1 auto; display: flex; align-items: center; justify-content: center;
    font-weight: 500; letter-spacing: -0.03em; font-size: clamp(3rem, 14vw, 5rem); line-height: 1;
    font-variant-numeric: tabular-nums;
  }
  .pad__keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
  .pad__key {
    font: inherit; font-size: 1.55rem; font-weight: 500; color: var(--ink);
    background: color-mix(in srgb, var(--ink) 5%, transparent); border: 0; border-radius: 999px;
    padding: .6em 0; cursor: pointer; display: grid; place-items: center;
    transition: background .12s var(--ease);
  }
  .pad__key:active { background: color-mix(in srgb, var(--ink) 15%, transparent); }
  .pad__err { min-height: 1.2em; text-align: center; color: var(--accent); font-size: var(--step--1); margin: var(--space-2) 0 0; }
  .pad__pay {
    margin-top: var(--space-2); width: 100%; font: inherit; font-weight: 700; font-size: var(--step-0);
    background: var(--ink); color: var(--bg); border: 0; border-radius: 999px; padding: .95em 1.2em; cursor: pointer;
    transition: transform .15s var(--ease);
  }
  .pad__pay:hover { transform: translateY(-1px); }
  .pad__hint { text-align: center; color: var(--muted); font-size: var(--step--1); margin: var(--space-3) 0 0; }
}