/* Race for Mobility — single stylesheet. Flattened from tokens/*.css in cascade order
   (fonts, colors, typography, spacing, base, responsive). Source of truth is tokens/;
   re-flatten in that same order after editing any token file. */

/* Race for Mobility — self-hosted webfonts.
   Generated from Google Fonts css2, latin + latin-ext subsets only.
   Serving these from our own origin removes fonts.googleapis.com and fonts.gstatic.com
   as runtime dependencies and lets them ride the same immutable cache as every other asset. */

@font-face {
  font-family: 'Homemade Apple';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/homemade-apple-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/montserrat-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/montserrat-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/montserrat-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/montserrat-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/montserrat-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/montserrat-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/montserrat-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/montserrat-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(assets/fonts/montserrat-800-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(assets/fonts/montserrat-800-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/source-sans-3-400i-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/source-sans-3-400i-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/source-sans-3-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/source-sans-3-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/source-sans-3-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/source-sans-3-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/source-sans-3-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/source-sans-3-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/source-sans-3-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/source-sans-3-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ── tokens/fonts.css ─────────────────────────────────────────────── */
/* Font family tokens.
   The Google Fonts @import that used to sit here is gone: it created a four-level
   render-blocking chain (index.html -> styles.css -> tokens/fonts.css -> fonts.googleapis.com
   -> fonts.gstatic.com) before a single glyph could download, and made the page depend on
   two origins we do not control.

   The @font-face declarations now live in assets/fonts/fonts.css (latin + latin-ext woff2,
   self-hosted) and are inlined at the top of the flattened styles.css.

   NOTE: this folder is the source of truth, but it is NOT loaded at runtime — styles.css is
   the flattened build. After editing any token file, re-flatten in this order:
   fonts -> colors -> typography -> spacing -> base -> responsive, keeping the
   assets/fonts/fonts.css faces first. */
:root{
--font-display:'Montserrat',sans-serif;
--font-body:'Source Sans 3','Source Sans Pro',sans-serif;
--font-script:'Homemade Apple',cursive;
}


/* ── tokens/colors.css ─────────────────────────────────────────────── */
:root{
--red-500:#fe0901;
--red-600:#d22f35;
--red-hover:#cb0701;
--red-on-dark:#ff534d;
  /* Hero headline only. Sampled from the hero photograph so the display type blends into the
     image instead of reading as a second brand red laid over it. Not for UI. */
  --red-hero:#f2431f;
--red-active:#b20601;
--red-tint-90:#ffe6e6;
--red-tint-80:#ffcecc;
--white:#ffffff;
--surface:#ffffff;
--surface-alt:#f3f3f4;
--surface-dark:#0e0e0e;
--surface-dark-raised:#1b1b1c;
--ink:#1b1b1c;
--ink-muted:#5f6062;
--on-dark:#ffffff;
--on-dark-muted:#c4c4c6;
--tertiary:#88898c;
--tertiary-text:#6d6e70;
--border:#dbdcdd;
--border-dark:#363738;
--success:#1a7a35;
--error:#b20601;
--focus-ring:2px solid #fe0901; /* @kind other */
--gradient-red:linear-gradient(135deg,var(--red-500),var(--red-600));
--gradient-glass-dark:rgb(14 14 14 / 0.55);
--overlay-ink-strong:rgb(14 14 14 / 0.65);
--overlay-ink-soft:rgb(14 14 14 / 0.2);
--color-bg:var(--surface);
--color-bg-alt:var(--surface-alt);
--color-bg-dark:var(--surface-dark);
--color-text:var(--ink);
--color-text-muted:var(--ink-muted);
--color-text-on-dark:var(--on-dark);
--color-text-on-dark-muted:var(--on-dark-muted);
--color-primary:var(--red-500);
--color-primary-hover:var(--red-hover);
--color-primary-active:var(--red-active);
--color-border:var(--border);
--color-border-dark:var(--border-dark);
--color-link:var(--red-hover);
--color-primary-on-dark:var(--red-on-dark);
--color-link-hover:var(--red-active);
}


/* ── tokens/typography.css ─────────────────────────────────────────────── */
:root{
--type-display-xl-size:clamp(40px,7.4vw,72px);--type-display-xl-weight:800;--type-display-xl-lh:1.05;--type-display-xl-ls:-0.02em;
--type-display-lg-size:clamp(32px,5vw,48px);--type-display-lg-weight:800;--type-display-lg-lh:1.1;
--type-headline-md-size:clamp(24px,3.4vw,32px);--type-headline-md-weight:700;--type-headline-md-lh:1.15;
--type-title-sm-size:20px;--type-title-sm-weight:700;--type-title-sm-lh:1.3;
--type-body-md-size:17.5px;--type-body-md-weight:400;--type-body-md-lh:1.7;
--type-body-sm-size:15.5px;--type-body-sm-weight:400;--type-body-sm-lh:1.62;
--type-eyebrow-size:11.5px;--type-eyebrow-weight:700;--type-eyebrow-ls:0.2em;
--type-stat-numeral-size:clamp(34px,5.6vw,56px);--type-stat-numeral-weight:800;
--type-script-accent-size:18px;--type-script-accent-weight:400;
}
.text-display-xl{font-family:var(--font-display);font-size:var(--type-display-xl-size);font-weight:var(--type-display-xl-weight);line-height:var(--type-display-xl-lh);letter-spacing:var(--type-display-xl-ls);margin:0}
.text-display-lg{font-family:var(--font-display);font-size:var(--type-display-lg-size);font-weight:var(--type-display-lg-weight);line-height:var(--type-display-lg-lh);margin:0}
.text-headline-md{font-family:var(--font-display);font-size:var(--type-headline-md-size);font-weight:var(--type-headline-md-weight);line-height:var(--type-headline-md-lh);margin:0}
.text-title-sm{font-family:var(--font-display);font-size:var(--type-title-sm-size);font-weight:var(--type-title-sm-weight);line-height:var(--type-title-sm-lh);margin:0}
.text-body-md{font-family:var(--font-body);font-size:var(--type-body-md-size);font-weight:var(--type-body-md-weight);line-height:var(--type-body-md-lh);margin:0;max-width:68ch;text-wrap:pretty}
.text-body-sm{font-family:var(--font-body);font-size:var(--type-body-sm-size);font-weight:var(--type-body-sm-weight);line-height:var(--type-body-sm-lh);margin:0;text-wrap:pretty}
.text-eyebrow{font-family:var(--font-body);font-size:var(--type-eyebrow-size);font-weight:var(--type-eyebrow-weight);letter-spacing:var(--type-eyebrow-ls);text-transform:uppercase;display:inline-flex;align-items:center;gap:10px;color:var(--color-primary-hover)}
.text-eyebrow::before{content:"";width:24px;height:2px;background:var(--color-primary)}
.text-eyebrow--on-dark{color:var(--on-dark-muted)}
.text-eyebrow--on-dark::before{background:var(--red-500)}
.text-stat-numeral{font-family:var(--font-display);font-size:var(--type-stat-numeral-size);font-weight:var(--type-stat-numeral-weight);font-variant-numeric:tabular-nums;line-height:1;margin:0}
.text-script-accent{font-family:var(--font-script);font-size:var(--type-script-accent-size);font-weight:var(--type-script-accent-weight);margin:0}


/* ── tokens/spacing.css ─────────────────────────────────────────────── */
:root{
--space-section-y-desktop:112px;
--space-section-y-mobile:64px;
--container-max:1280px;
/* Fluid gutter. It was a flat 24px, which is right on a phone but collapses the page against the
   screen edge on a narrow laptop: with --container-max at 1280px, any viewport at or below 1280
   left exactly 24px of breathing room on each side, and 1366 only reached 67px. Measured across
   the range, that band is where most laptops sit.
   The clamp floor is 24px, so PHONES ARE UNCHANGED (3.6vw only exceeds 24px above ~667px wide).
   Above that it grows to a 56px ceiling, giving 46px at 1280 and 92px at 1366.
   --gutter also drives the navbar padding and the mobile drawer inset, so the header keeps
   aligning with section content at every width. */
--gutter:clamp(24px,3.6vw,56px);
--radius-sm:6px;
--radius-md:12px;
--radius-lg:20px;
--radius-pill:999px;
--shadow-card-light:0 12px 32px rgb(14 14 14 / 0.08);
--ease-out:cubic-bezier(0.16,1,0.3,1); /* @kind other */
}
.container{width:100%;max-width:var(--container-max);margin:0 auto;padding:0 var(--gutter)}
.section{padding:clamp(64px,7.4vw,112px) 0}
.section--flush-top{padding-top:clamp(52px,6vw,88px)}
@media (max-width:768px){.section--flush-top{padding-top:52px}}


/* ── tokens/base.css ─────────────────────────────────────────────── */
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px;-webkit-text-size-adjust:100%}
body{font-family:var(--font-body);color:var(--color-text);background:var(--color-bg);margin:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;line-height:1.7;font-size:17.5px}
h1,h2,h3,h4{text-wrap:balance}
input,textarea,select{font-size:16px}
::selection{background:var(--red-500);color:#fff}
a{color:var(--color-link);text-decoration:none}
a:hover{color:var(--color-link-hover);text-decoration:underline}
button{font-family:inherit}
@keyframes rfm-marquee{from{transform:translateY(0)}to{transform:translateY(-50%)}}
@keyframes rfm-pulse{0%{box-shadow:0 0 0 0 rgb(254 9 1 / 0.45)}70%{box-shadow:0 0 0 14px rgb(254 9 1 / 0)}100%{box-shadow:0 0 0 0 rgb(254 9 1 / 0)}}
@keyframes rfm-kenburns{from{transform:scale(1.04) translate3d(0,0,0)}to{transform:scale(1.12) translate3d(-1.5%,-1%,0)}}
@keyframes rfm-rise{from{opacity:0;transform:translate3d(0,22px,0)}to{opacity:1;transform:none}}
@keyframes rfm-drift{from{transform:scale(1.04) translate3d(0,0,0)}to{transform:scale(1.04) translate3d(-0.9%,0,0)}}
@keyframes rfm-nudge{0%,100%{transform:translateY(-1px)}50%{transform:translateY(2px)}}
@keyframes rfm-rule{from{width:0}to{width:76px}}
.rfm-rule{animation:rfm-rule .8s var(--ease-out) .5s both;width:76px}
.rfm-rise{animation:rfm-rise .7s var(--ease-out) both}
@keyframes rfm-reveal{from{opacity:0;transform:translate3d(0,18px,0)}to{opacity:1;transform:none}}
.rfm-reveal{opacity:0}
.rfm-reveal.is-in,.rfm-no-js .rfm-reveal{opacity:1}
.rfm-reveal.is-in{animation:rfm-reveal .72s var(--ease-out) both}
.rfm-prose p{text-align:left;hyphens:manual}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}
@media (max-width:1180px){.rfm-nav-links{display:none!important}.rfm-nav-menu{display:inline-flex!important}}
@media (max-width:820px){.rfm-nav-phone{display:none}.rfm-nav-div{display:none}.rfm-nav-call{padding:8px!important}}
/* Nav lockups: white marks over bright photography need an edge and a backing to read before the bar goes stuck */
/* Goal card: the funding line must stay inside the card wall at every width. Class + structural
   path so it holds whether or not the compiled bundle carries .rfm-goal-line yet. */
.rfm-hero-card *{min-width:0}
.rfm-goal-line,.rfm-hero-card>*>*>*{flex-wrap:wrap!important;row-gap:2px!important}
.rfm-goal-line>span:last-child,.rfm-hero-card>*>*>*>span:last-child{flex:0 1 auto!important;overflow:hidden;text-overflow:ellipsis}
/* Nav lockups (V7): the Race for Mobility mark is set as a typographic knockout (see NavBar) so it stays
   crisp and legible over moving footage at every viewport — the supplied 232px PNG could not. HMK's mark
   sits secondary at the right; both carry an ink shadow for separation, no chip. */
.rfm-nav img{filter:drop-shadow(0 1px 2px rgb(14 14 14/.7)) drop-shadow(0 3px 16px rgb(14 14 14/.75))!important}
/* Nav brand sizing lives in ONE place: the component inline style owns desktop (and its
   condense-on-scroll shrink), tokens/responsive.css owns the phone tiers. No !important here. */
.rfm-nav-menu{display:none}
.rfm-band{scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-behavior:smooth;overscroll-behavior-x:contain;overflow-x:auto!important;overflow-y:hidden!important;touch-action:pan-x pan-y!important;align-items:stretch!important}
.rfm-band-cell{cursor:grab;user-select:none;-webkit-user-select:none}
.rfm-band:active .rfm-band-cell{cursor:grabbing}
.rfm-band::-webkit-scrollbar{display:none}
.rfm-band-fade{display:none}
@media (max-width:1200px){
.rfm-band{scroll-snap-type:x proximity!important}
.rfm-band-cell{min-width:158px!important;padding:20px 18px!important}
.rfm-band-cell:last-child{scroll-snap-align:end!important;min-width:198px!important}
.rfm-band-fade{display:block;position:absolute;top:0;right:0;bottom:0;width:44px;pointer-events:none;opacity:0;transition:opacity 240ms var(--ease-out);background:linear-gradient(90deg,rgb(14 14 14/0),rgb(14 14 14/0.82))}
.rfm-band-fade--left{right:auto;left:0;background:linear-gradient(270deg,rgb(14 14 14/0),rgb(14 14 14/0.82))}
}
@media (max-width:600px){.rfm-band-cell{min-width:168px!important;padding:18px 16px!important}}
.rfm-nav-drawer a:hover{color:var(--red-500)}

/* Accessibility. #fe0901 on white is 4.00:1 — it fails AA as TEXT, so red-on-white text resolves to
   --red-hover #cb0701 (5.88:1) in typography.css. Decorative rules and fills keep the pure campaign
   red; on ink the rule uses --red-on-dark so it reads at 5.41:1. */
.text-eyebrow--on-dark::before{background:var(--red-on-dark)}
:focus-visible{outline:var(--focus-ring);outline-offset:2px;border-radius:3px}
.rfm-nav a:focus-visible,.rfm-nav button:focus-visible{outline-color:#fff}
/* Rolled back: the nav carries no Donate pill — the hero card, The Ask and the sticky mobile bar do. */
.rfm-nav-donate{display:none!important}

/* ---- Cross-configuration hardening -------------------------------------------------------
   Three things the design cannot control from inside the layout: the OS colour scheme, the
   touch highlight, and the physical shape of the screen. */

/* The donation sheet's fields are designed on white. Without an explicit scheme, Android Chrome's
   auto-dark and iOS's own control styling repaint them and the sheet loses its contrast. */
:root{color-scheme:only light}
/* Android paints a grey flash over every tapped control. On the 10px photo dots and the Paybill
   copy chips that flash is bigger than the control and reads as a rendering fault. */
*{-webkit-tap-highlight-color:transparent}
/* Notched phones in landscape: keep the gutter clear of the rounded corner and the camera cut-out
   without shrinking it anywhere else. */
@supports (padding:max(0px)){
.container{padding-left:max(var(--gutter),env(safe-area-inset-left));padding-right:max(var(--gutter),env(safe-area-inset-right))}
}
/* Photography and long copy hold their proportions when the OS text size is scaled up. */
.rfm-prose p,.text-body-md,.text-body-sm{max-width:74ch}

/* ---- Print -------------------------------------------------------------------------------
   A supporter who prints this page is printing an ask, so the sheet must carry the story, the
   figures and the Paybill on white with the moving parts gone. Critically, scroll-reveal
   elements sit at opacity:0 until their trigger fires — without the first rule below, printing
   before scrolling produces a half-blank document. */
@media print{
  .rfm-reveal,.rfm-rise,.rfm-rule{opacity:1!important;animation:none!important;transform:none!important;width:auto}
  .rfm-nav,.rfm-nav-drawer,.rfm-mobile-cta,.rfm-hero-video,.rfm-band-fade,.rfm-modal-scrim,video,iframe{display:none!important}
  *{color:#0e0e0e!important;background-color:transparent!important;background-image:none!important;box-shadow:none!important;text-shadow:none!important;filter:none!important}
  body{font-size:11pt;line-height:1.5}
  .section{padding:16pt 0!important;break-inside:avoid}
  h1,h2,h3{break-after:avoid}
  h1{font-size:26pt}h2{font-size:17pt}h3{font-size:13pt}
  .text-eyebrow,cite,figcaption{color:#5a5a5a!important}
  /* The red rules survive as the one accent — they are what makes the printout still look like the campaign. */
  .text-eyebrow::before,.rfm-rule,blockquote{border-color:#cb0701!important}
  .text-eyebrow::before{background:#cb0701!important}
  img{max-width:100%!important;break-inside:avoid}
  /* Links are dead on paper, so print where they went. */
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:8pt;color:#5a5a5a!important;word-break:break-all}
  @page{margin:14mm}
}

/* ---- Overflow containment -------------------------------------------------------------------
   Reported on Samsung Internet (Galaxy S26): the donation sheet's figures escaped their cards.
   Reproduced in Chromium at 320/360/412/430px and at 1x-2x text scaling.

   It is not font boosting — `text-size-adjust` is already 100% and html/body already clip
   overflow-x. The cause is that flex and grid items default to `min-width: auto`, which refuses
   to shrink below the intrinsic width of their content. Paired with `white-space: nowrap` on the
   currency figures (deliberate, so "KES 1,900" never breaks mid-number), a long amount pushes its
   row past the card and then past the viewport.

   Each rule below was measured, not assumed. `min-width: 0` alone made things *worse* — children
   shrank but their own nowrap text then clipped — so the figures also need to scale. A blanket
   `flex-wrap: wrap` fixed the overflow but dropped the close button below the heading, and
   `overflow-wrap: anywhere` broke "FUNDED" into "FUND/ED", so both are scoped narrowly instead.
   Verified: 0 overflows and 0 broken words at every width/scale tested, with the close button
   pixel-identical to before. */
.rfm-modal-sheet *,
.rfm-amount-grid *{min-width:0}
.rfm-modal-sheet,
.rfm-modal-sheet *{max-width:100%}

/* Figures keep nowrap but scale down rather than escape. */
.rfm-modal-sheet [style*="nowrap"],
.rfm-amount-grid [style*="nowrap"]{font-size:clamp(12px,3.9vw,20px)!important}

/* Only rows that actually carry a figure may wrap - never the sheet header, whose flex row
   positions the close button against the title. */
.rfm-modal-sheet [style*="flex"]:has(> [style*="nowrap"]),
.rfm-modal-sheet button:has([style*="nowrap"]),
.rfm-modal-sheet span:has(> button),
.rfm-modal-sheet button[style*="flex"],
.rfm-modal-sheet span[style*="flex"]{flex-wrap:wrap}

/* The raised / goal / funded row: three columns squeeze the third to 38px while "Funded" needs
   47px at eyebrow tracking. Let it reflow to two rows instead of clipping. */
.rfm-modal-sheet div:has(> span > strong){flex-wrap:wrap;row-gap:14px}
.rfm-modal-sheet div:has(> span > strong) > span{flex:1 1 108px}

/* Page-level backstop: the hero media layer ran ~7px past the viewport at phone widths. */
.rfm-hero-media{max-width:100%;overflow:hidden}

/* ---- Motion scale ------------------------------------------------------------------------------
   Components carried eleven different transition durations (160/180/200/220/280/300/320/600/620/
   700/900ms), which is what makes a page feel assembled rather than designed. They collapse onto
   four steps, one per intent, all sharing the single --ease-out curve:

     fast    hover, colour, border, background - anything under the pointer
     base    nav chrome resizing, card lift, height and padding
     slow    photography crossfades and parallax settle
     fill    progress bars, where the length IS the message

   --dur-reveal and --stagger mirror the GSAP scroll-entrance constants (0.72s / 0.07s) so the CSS
   and JS motion languages state the same numbers instead of drifting apart. */
:root{
  --dur-fast:200ms;
  --dur-base:320ms;
  --dur-slow:640ms;
  --dur-fill:900ms;
  --dur-reveal:720ms;
  --stagger:70ms;
  --focus-ring:2px solid var(--red-500);
  --focus-ring-offset:2px;
}

/* ---- Skip link ---------------------------------------------------------------------------------
   Note on focus: this file already carried `:focus-visible{outline:var(--focus-ring)}` further up,
   but --focus-ring was never defined, so the declaration was invalid and every control fell back to
   the browser default. Defining the token in the block above revives that rule as written - no
   second focus rule is needed here. The deliberate `.rfm-nav a:focus-visible{outline-color:#fff}`
   override stays: red is hard to see against the hero photography, white is not. */
.rfm-skip{
  position:fixed;top:0;left:0;z-index:200;
  transform:translateY(-120%);
  padding:12px 20px;
  background:var(--red-hover);color:#fff;
  font-family:var(--font-display);font-weight:700;font-size:14px;
  letter-spacing:.06em;text-transform:uppercase;text-decoration:none;
  border-bottom-right-radius:var(--radius-md);
  transition:transform var(--dur-fast) var(--ease-out);
}
.rfm-skip:focus{transform:translateY(0)}


/* ── tokens/responsive.css ─────────────────────────────────────────────── */
/* Mobile system — 390×844 baseline, 768/1024 in between. Desktop layout is untouched above 900px. */
/* Wide desktop gets more air; the 900–1200 band tightens the gutter before the card wraps */
@media (min-width:1440px){.rfm-hero-grid{gap:100px!important;padding-top:176px!important;padding-bottom:128px!important}}
@media (min-width:901px) and (max-width:1200px){.rfm-hero-grid{gap:52px!important;padding-top:142px!important;padding-bottom:96px!important}
.rfm-hero-card{margin-top:-34px!important}}
/* 901–1080: two columns squeeze the reel into a slim tower — stack instead, reel centred and capped */
@media (min-width:901px) and (max-width:1080px){
.rfm-story-grid{grid-template-columns:1fr!important;gap:44px!important}
.rfm-story-media{height:auto!important;max-width:520px;width:100%;margin-inline:auto!important}
.rfm-story-video{flex:0 0 auto!important;aspect-ratio:4/5!important;min-height:0!important;max-height:min(650px,72svh)!important}
}
@media (max-width:900px){
.rfm-hero-grid{grid-template-columns:1fr!important;gap:32px!important;padding-top:114px!important;padding-bottom:58px!important;align-items:start!important}
.rfm-hero-card{justify-content:stretch!important;margin-top:0!important;align-self:stretch!important}
.rfm-hero-col{padding-bottom:0!important}
/* Hero fills the real (dynamic) viewport on phones and keeps one clear reading column */
#the-mission{min-height:100svh!important}
.rfm-hero-copy{max-width:none!important}
.rfm-hero-cta,.rfm-hero-cta>*{width:100%!important;justify-content:center!important;text-align:center!important}
.rfm-hero-card>*{max-width:none!important}
.rfm-pay-row{min-height:46px!important}
.rfm-story-grid,.rfm-who-grid{grid-template-columns:1fr!important}
/* Footer: four proportional columns collapse to two here and to one at 560px, rather than the
   old auto-fit reflow that left each column trailing an empty gutter. */
.rfm-footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:36px 28px!important}
/* Stacked story: the reel becomes a wide, capped landscape frame instead of a full-height column */
.rfm-story-media{height:auto!important;max-width:520px;width:100%;margin-inline:auto!important}
.rfm-story-video{flex:0 0 auto!important;aspect-ratio:4/5!important;min-height:0!important;max-height:70svh!important}
.rfm-ask-grid{grid-template-columns:1fr!important;gap:44px!important}
.rfm-champions-grid{grid-template-columns:1fr!important}
.rfm-gap-figures{grid-template-columns:1fr 1fr!important}
.rfm-impact-copy{grid-template-columns:1fr!important;gap:18px!important}
/* Book card: the two three-column rows can't hold 142px minimums beside the cover */
.rfm-book-meta,#meet-michael article>div>div[style*="repeat(3"]{grid-template-columns:repeat(auto-fit,minmax(112px,1fr))!important}
.rfm-book-buy{grid-template-columns:auto 1fr!important;gap:18px!important}
.rfm-bookmodal-hero{grid-template-columns:1fr!important;justify-items:center;text-align:left}
.rfm-bookmodal-hero>img{max-width:180px}
.rfm-book-buy>button{margin-left:0!important;justify-self:end!important}
.rfm-about-links{flex-direction:column!important;flex-wrap:wrap!important;gap:10px!important}
.rfm-about-links>a{width:100%!important;white-space:normal!important;text-align:center}
}
@media (max-width:760px){

/* Pillars stack full-width so each photo is seen whole, not half-cut */
.rfm-pillars{display:grid!important;grid-template-columns:1fr!important;gap:18px!important;padding-bottom:8px!important}
.rfm-pillars>article{transform:none!important;min-height:0!important}
/* Each card takes its photo's own aspect ratio, so nothing is cropped on a phone */
.rfm-pillars>article:nth-child(1){aspect-ratio:900/1600}
.rfm-pillars>article:nth-child(2){aspect-ratio:1066/1600}
.rfm-pillars>article:nth-child(3){aspect-ratio:1182/1600}
/* Journey rotates vertical: line on the left, milestones to its right */
.rfm-journey-inner{min-width:0!important}
.rfm-journey-ends{justify-content:space-between}
.rfm-journey-ends>span:nth-child(2){display:none!important}
.rfm-journey-track{flex-direction:column!important;gap:0!important}
.rfm-journey-track>div{width:100%;min-width:0!important;position:relative;padding-left:70px;padding-bottom:30px}
.rfm-journey-track>div:not(:last-child)::before{content:"";position:absolute;left:24px;top:54px;bottom:6px;width:2px;background:repeating-linear-gradient(180deg,var(--border) 0 8px,transparent 8px 16px)}
.rfm-journey-track>div:first-child::before,.rfm-journey-track>div:nth-child(2)::before{background:repeating-linear-gradient(180deg,var(--color-primary) 0 8px,transparent 8px 16px)}
.rfm-journey-track [data-motion="journey-step"]{position:absolute!important;left:0;top:0;width:auto!important}
.rfm-journey-track [data-motion="journey-rail"]{display:none!important}
.rfm-journey-track h4{min-height:0!important;margin-top:12px!important}
.rfm-journey-track p{min-height:0!important}
.rfm-journey-track [data-motion="journey-step"]+span{margin-top:2px!important}
/* Modals become full-screen sheets with a sticky action */
.rfm-modal-scrim{padding:0!important;align-items:flex-end!important}
.rfm-modal-sheet{width:100%!important;max-width:none!important;max-height:100vh!important;height:100%;border-radius:0!important}
.rfm-modal-sheet input,.rfm-modal-sheet select,.rfm-modal-sheet textarea{font-size:16px!important}
.rfm-modal-sheet button{min-height:48px}
/* Hero at phone scale: badge, lockup, qualifier, CTA — and, since V7, the goal card, now that it is
   one money bar rather than a 42-cell meter. Progress is the client's headline ask, so it stays. */
/* V8.2 — the phone hero owns the whole first screen: nothing of The Ask shows until you scroll.
   The media layer runs 80svh from the top and dissolves into the dark rather than being cropped
   into a 9:19 slot, so the rider and the handcycle stay in frame; the lockup stack is centred
   over it, on both axes. */
#the-mission{min-height:100svh!important;height:100svh!important;overflow:hidden}
/* The phone source is now the 4:5 vertical cut, so the media layer fills the whole screen with a
   gentle crop instead of a keyhole — only the last sliver dissolves into the dark. */
.rfm-hero-media{inset:0!important;height:auto!important;min-height:0!important;max-height:none!important;-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 84%,transparent 100%);mask-image:linear-gradient(180deg,#000 0%,#000 84%,transparent 100%)}
.rfm-hero-media video{object-position:50% 42%!important}
.rfm-hero-grid{padding-top:92px!important;padding-bottom:64px!important;gap:18px!important;align-items:center!important;align-content:center!important}
.rfm-hero-col{align-items:flex-start!important;text-align:left!important}
.rfm-hero-copy{margin-left:0!important;margin-right:auto!important;max-width:34ch!important}
.rfm-hero-cta{align-self:flex-start!important}
/* Phones drop the hero goal card: the same figures lead The Ask one screen down, and the sticky
   Donate bar (now armed right after the hero) carries the action — so the phone hero is the
   footage, the lockup and one line of copy. */
.rfm-hero-card{display:none!important}
.rfm-hero-col{gap:18px!important}
/* The brand lockup owns the phone hero: cap height comfortably past 48px, so the wordmark is the
   first thing read over the footage — the client's "it disappears on mobile" note. */
.rfm-hero-head{font-size:clamp(52px,16.2vw,68px)!important;line-height:0.88!important;letter-spacing:-0.045em}
.rfm-hero-copy{font-size:15.5px!important;line-height:1.62!important;max-width:none!important}
/* Gap band and story stat strip stack below 480 */
.rfm-gap-figures{grid-template-columns:1fr!important}
.rfm-gap-figures>div{padding-right:0!important}
/* Donate bar waits until the reader has passed Michael's story and the book */
/* Show/hide is opacity only. `transform` used to carry the slide (translateY(140%)) AND had a
   0.46s transition on it, which meant anything that touched transform animated the bar's position.
   transform is now reserved exclusively for visual-viewport pinning in motion.js, applied
   instantly, so the bar can never travel across the screen. */
.rfm-mobile-cta{display:flex!important;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .26s var(--ease-out),visibility 0s linear .26s}
.rfm-mobile-cta.is-on{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .26s var(--ease-out),visibility 0s linear 0s}
/* Space for the fixed bar is reserved permanently on phones, not toggled.
   It used to be applied via a .rfm-cta-on class driven by the same scroll gate that shows the bar,
   so the document grew and shrank by 76px on every toggle - which moved the scroll position, which
   re-crossed the threshold, which toggled it again. Measured on a 393px viewport: five is-on flips
   in a single thumb-scroll and two document heights alternating (12841 / 12917).
   Reserved unconditionally, the document height never changes and the bar cannot induce its own
   re-trigger. Dark background so the reserved strip reads as an extension of the footer. */
body{padding-bottom:76px;background:var(--surface-dark)}
}
/* Phone: the race band stays one scrollable rail (snapped, with edge fades and a first-view
   peek) rather than stacking, so the five facts read as one strip you swipe through */
@media (max-width:560px){
/* Payment detail rows stack on phones. Left as label-left / value-right on wider screens, which is
   the established look; below 560px the longer values wrapped while short ones stayed inline, so
   the card read ragged. Stacking all of them keeps one rhythm and removes the last overflow. */
.rfm-info-row{flex-direction:column!important;align-items:flex-start!important;row-gap:6px!important}

.rfm-footer-grid{grid-template-columns:1fr!important;gap:32px!important}

.rfm-band-cell{min-width:172px!important;padding:18px 16px!important}
/* Book card: cover over content, and the two 142px-minimum grids can't fit three columns on a phone.
   Targeted structurally as well as by class so it holds whether or not the compiled bundle carries the classes. */
.rfm-book-card,#meet-michael article{grid-template-columns:1fr!important;gap:24px!important;align-items:start!important}
.rfm-book-card>img,#meet-michael article>img{max-width:250px!important;width:100%!important;margin-inline:auto!important}
.rfm-book-card>div,#meet-michael article>div{min-width:0!important}
/* Spec rows read as a list on a phone: label left, value right, one rule per row — no orphan grid cells */
.rfm-book-meta,#meet-michael article>div>div[style*="repeat(3"]{display:flex!important;flex-direction:column!important;margin-top:2px!important;border-top:none!important;border-bottom:none!important}
.rfm-book-meta>span,#meet-michael article>div>div[style*="repeat(3"]>span{flex-direction:row!important;align-items:baseline!important;justify-content:space-between!important;gap:20px!important;padding:13px 0!important;border-left:none!important;border-top:1px solid var(--border)!important}
.rfm-book-buy{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:18px!important;padding-top:0!important}
.rfm-book-buy>span{flex-direction:row!important;align-items:baseline!important;justify-content:space-between!important;gap:20px!important;padding:14px 0 2px!important;border-top:1px solid var(--border)!important}
.rfm-book-buy>button,#meet-michael article button{width:100%!important;margin-left:0!important;justify-self:stretch!important;justify-content:center!important}
.rfm-book-card .text-script-accent,#meet-michael article .text-script-accent{font-size:17px!important;line-height:1.35!important;text-wrap:balance}
/* The Gap: the most important sentence on the site — short punchy lines, nothing below 28px */
#the-gap .rfm-gap-head{font-size:clamp(28px,8.4vw,38px)!important;line-height:1.15!important;max-width:20ch!important}
#the-gap .rfm-gap-red{display:block}
#the-gap .rfm-gap-line{font-size:20px!important}
.rfm-nav-drawer{left:16px!important;right:16px!important}
}
/* Nav brand balance (V8.5). The two-line wordmark was set at 23px on phones — taller than the
   bar's other elements, crowding the left gutter and leaving the Hope Mobility Kenya mark at 28px
   looking like a footnote beside it. The pair is now sized to the same optical height: wordmark
   cap-stack ~34px, partner mark 34px, with equal air either side of the call pill. */
@media (max-width:760px){
.rfm-nav{gap:14px!important;padding-left:18px!important;padding-right:18px!important}
.rfm-nav-brand{padding-right:2px}
.rfm-nav-wordmark{font-size:19px!important;line-height:0.9!important;letter-spacing:-0.026em!important}
.rfm-nav img[alt="Hope Mobility Kenya"]{height:34px!important;min-width:0!important;max-width:34vw!important}
}
@media (max-width:400px){
.rfm-nav{gap:10px!important;padding-left:16px!important;padding-right:16px!important}
.rfm-nav-wordmark{font-size:17.5px!important}
.rfm-nav img[alt="Hope Mobility Kenya"]{height:30px!important;max-width:30vw!important}
}
html,body{overflow-x:hidden}
/* Tablet band: hero keeps a comfortable gap under the nav and the card sits full-width below */
@media (min-width:761px) and (max-width:900px){
.rfm-hero-grid{padding-top:126px!important;padding-bottom:72px!important}
.rfm-hero-card>*{width:100%}
}
@media (min-width:761px){.rfm-mobile-cta{display:none!important}}
/* backdrop-filter removed. On a position:fixed element it forces a live blur of the scrolling
   content beneath on every frame, which on mid-range Android shows up as stutter and flicker in
   the bar - and it bought almost nothing here, since the background was already 94% opaque. The
   fill is now fully opaque and the bar composites as a flat layer. translateZ(0) keeps it on its
   own layer so scrolling content never repaints it. */
/* Deliberately the plainest possible fixed element: no will-change, no backface-visibility, no
   backdrop-filter, no transform. Each of those promotes the bar to its own compositor layer, and a
   COMPOSITED position:fixed element is precisely what Chrome Android leaves stale when the URL bar
   retracts - the compositor does not re-lay-it-out until something forces a repaint, so it sits a
   URL-bar's height off the floor with page content visible beneath it.
   That is the reported symptom, it survived every previous fix, and it is invisible to headless
   emulation because emulation has no URL bar. backdrop-filter was doing this before V8.8;
   will-change + backface-visibility replaced it and kept doing it. Both are now gone.
   If any future change needs a compositing hint here, it will reintroduce this bug. */
.rfm-mobile-cta{position:fixed;left:0;right:0;bottom:0;z-index:90;display:none;gap:12px;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:var(--surface-dark);border-top:1px solid var(--border-dark)}
.rfm-mobile-cta a{flex:1;display:inline-flex;align-items:center;justify-content:center;min-height:52px;border-radius:var(--radius-pill);font-family:var(--font-display);font-weight:800;font-size:15px;letter-spacing:.08em;text-transform:uppercase;text-decoration:none}
.rfm-mobile-cta a:hover{text-decoration:none}
.rfm-mobile-cta .rfm-cta-primary{background:var(--red-hover);color:#fff}

/* V8.4 — big-canvas phones (Nothing Phone 4a class: ~445x989 CSS px, DPR 2.75, AMOLED wide gamut).
   Two separate problems, two separate fixes. */
/* 1. Colour. On an AMOLED/HDR panel the brightness lift reads as wash: it flattens the highlights
   and lets the panel's own saturation push the reds. Phones get no brightness lift at all — the
   mask gradient does the legibility work instead. */
@media (max-width:760px){
.rfm-hero-media video{filter:brightness(1.0) contrast(1.08) saturate(1.04)!important}
}
/* 2. Sharpness. The 1440x1800 vertical has to cover the media band, so the taller the band the
   bigger the upscale: a 989 CSS px tall screen needs ~1.5x, a 873px one only ~1.33x. Capping the
   band on very tall phones cuts the upscale to ~1.2x, which is where the Lanczos detail survives.
   The hero section still owns the full screen; only the footage stops short and dissolves. */
@media (max-width:760px) and (min-height:900px){
.rfm-hero-media{inset:0 0 auto 0!important;height:82svh!important;-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 78%,transparent 100%)!important;mask-image:linear-gradient(180deg,#000 0%,#000 78%,transparent 100%)!important}
.rfm-hero-grid{padding-top:104px!important;padding-bottom:76px!important;gap:22px!important}
}
/* 3. Layout. 445 CSS px is 13% more canvas than the 390 baseline and was rendering at baseline
   sizes. This tier spends the extra width on type and gutters, not on more whitespace. */
@media (min-width:412px) and (max-width:760px){
.rfm-hero-head{font-size:clamp(60px,15.6vw,76px)!important}
.rfm-hero-copy{font-size:16.5px!important;line-height:1.6!important;max-width:36ch!important}
.rfm-hero-grid{padding-left:24px!important;padding-right:24px!important}
.rfm-mobile-cta a{min-height:54px;font-size:15.5px}
}

/* Donation modal — amount tiles go 2-up on phones, and the sheet tightens so the Paybill number
   and Account rows are on the first screen with no scroll. */
@media (max-width:560px){
.rfm-amount-grid{grid-template-columns:repeat(2,1fr)!important}
.rfm-modal-scrim{padding:12px!important;align-items:flex-start!important}
.rfm-modal-sheet{padding:20px!important;height:auto!important;max-height:96svh!important;margin-top:8px;border-radius:var(--radius-lg)!important}
.rfm-modal-scrim{align-items:flex-start!important}
}

/* The Ask reads as floating text at every width; on a phone the one drawn object — its button —
   spans the column so the tap target is unambiguous. */
@media (max-width:760px){
.rfm-ask-row{margin-bottom:32px!important}
.rfm-ask-row button{width:100%!important}
}