/* GENERATED by tools/build-css.js from assets/fonts/fonts.css, assets/css/tokens.css, assets/css/sales.css, assets/css/modal.css.
   Edit those files, not this one: it is rebuilt on every deploy. */
/* ---- assets/fonts/fonts.css ---- */
/* Self-hosted Google Fonts for the homepage (Archivo, Hanken Grotesk: both SIL Open
   Font Licence). Copied rule for rule from the Google Fonts CSS for
   Archivo:wght@600;800;900 and Hanken Grotesk:wght@400;500;600;700 (display=swap),
   so rendering is identical; only the file URLs point here. The two latin files
   are preloaded in the page head. */
/* vietnamese */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/archivo-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/archivo-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/archivo-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;
}
/* vietnamese */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/archivo-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/archivo-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/archivo-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;
}
/* vietnamese */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 900;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/archivo-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 900;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/archivo-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 900;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/archivo-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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/hanken-grotesk-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/hanken-grotesk-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/hanken-grotesk-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/hanken-grotesk-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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/hanken-grotesk-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/hanken-grotesk-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/hanken-grotesk-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/hanken-grotesk-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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/hanken-grotesk-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/hanken-grotesk-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/hanken-grotesk-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/hanken-grotesk-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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/hanken-grotesk-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/hanken-grotesk-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/hanken-grotesk-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/hanken-grotesk-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;
}

/* ---- assets/css/tokens.css ---- */
/* Rise Ultra — design tokens + reset. Shared by all three routes. */
:root{
  /* The site is light-only by design. Without this, a phone in dark mode still
     renders the PAGE correctly but draws the NATIVE controls dark: the panel
     that opens from a <select>, the tint Chrome and Safari paint over an
     autofilled field, and desktop scrollbars. That gives dark-grey UI against
     cream, and in the autofill case dark text on a dark tint. Declaring the
     scheme pins all of it to light. */
  color-scheme: light;
  --cream:#F5F1E8;
  --charcoal:#16130F;
  --ink:#211C16;
  --clay:#B5532E;
  --clay-dark:#9A4526;
  --light-clay:#E08A5C;
  --muted:#574E43;
  --border:#D8D0C0;
  --card:#FCFAF6;
  --display:'Archivo',system-ui,sans-serif;
  --body:'Hanken Grotesk',system-ui,sans-serif;
}
*{box-sizing:border-box}
/* No `scroll-behavior:smooth` here on purpose. In-page anchors are animated by
   app.js on a fixed 650ms ease-out curve; a native smooth scroll would fight
   that loop frame by frame. Anything that still wants the native animation
   asks for it explicitly with behavior:'smooth'. */
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
img{max-width:100%;display:block}
[hidden]{display:none!important}

/* Vidalytics embeds. The inline embed scripts set their own padding-top for
   aspect ratio; these wrappers only constrain width and centre them. */
.vid-vsl{border-radius:8px;overflow:hidden}
.vid-portrait{max-width:360px;margin-left:auto;margin-right:auto;border-radius:8px;overflow:hidden}

/* "Privacy policy" link in every page footer: takes the footer's own colour,
   always underlined so it reads as a link. */
.pp-link{color:inherit;text-decoration:underline;text-underline-offset:2px;white-space:nowrap}
.pp-link:hover{text-decoration-thickness:2px}
.pp-link:focus-visible{outline:3px solid var(--clay);outline-offset:2px;border-radius:2px}
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---- assets/css/sales.css ---- */
/* Rise Ultra — sales page (/). Ported from rise-ultra-full-page.html. */

.stickybar{position:sticky;top:0;z-index:50;background:var(--charcoal);border-bottom:1px solid rgba(245,241,232,.12)}
.stickybar a{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;padding:9px 16px;text-decoration:none;color:var(--cream);font-family:var(--display);font-weight:800;font-size:11.5px;letter-spacing:.11em;text-transform:uppercase}
.stickybar .dot{width:6px;height:6px;border-radius:50%;background:var(--light-clay);flex:none}
.stickybar .sep{color:rgba(245,241,232,.35)}
.stickybar .go{color:var(--light-clay)}
/* Section tab: hangs under the bar (the bar is positioned, so it anchors it),
   so nothing in the bar moves and nothing on the page jumps when it changes. */
.stickybar .where{position:absolute;top:100%;left:50%;display:flex;align-items:center;gap:7px;padding:2px 11px 4px;
  border:1px solid rgba(245,241,232,.12);border-top:0;border-radius:0 0 10px 10px;background:var(--charcoal);color:var(--cream);
  font-family:var(--display);font-weight:700;font-size:10.5px;letter-spacing:.05em;white-space:nowrap;
  opacity:0;transform:translate(-50%,-6px);pointer-events:none;transition:opacity .2s ease,transform .2s ease}
.stickybar .where.is-on{opacity:1;transform:translate(-50%,0)}
@media (prefers-reduced-motion:reduce){.stickybar .where{transition:none}}

.wrap{max-width:640px;margin:0 auto;padding:0 20px}
.section{padding:44px 0}
.dark{background:var(--charcoal);color:var(--cream)}
.eyebrow{font-weight:600;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--clay);text-align:center;margin:0 0 8px}
.dark .eyebrow{color:var(--light-clay)}
h2.h{font-family:var(--display);font-weight:800;font-size:clamp(26px,6vw,30px);line-height:1.1;text-transform:uppercase;letter-spacing:-.01em;text-align:center;margin:0 0 18px;color:var(--charcoal)}
.dark h2.h{color:var(--cream)}
.lede{text-align:center;max-width:460px;margin:0 auto 26px;font-size:15px;line-height:1.65;color:var(--muted)}
.dark .lede{color:rgba(245,241,232,.72)}
.ph{background:#fff;border:1px dashed var(--border);border-radius:8px;display:flex;align-items:center;justify-content:center;color:#6F675D;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;text-align:center;padding:12px}

/* hero
   The hero gets its own wider container than the 640px body column so the
   headline sits on two lines at desktop widths instead of four. Mobile is
   unchanged — 900px never binds below 900px viewport. */
.hero{background:var(--charcoal);color:var(--cream);padding:34px 0 40px;text-align:center}
.hero .wrap{max-width:900px}
.hero .date{font-weight:700;font-size:14.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--cream);margin:0 0 12px}
/* Floor is 27px, not 30px. The .ln spans below force "MOROCCO'S EPIC" onto its
   own line, so it can no longer reflow to absorb a narrow viewport: at 320px and
   a 30px floor it cleared its container by 2px, and any wider fallback face
   (Archivo failing to load) would split it as "MOROCCO'S / EPIC". 27px gives it
   ~30px of headroom there and is indistinguishable at 360px and up. */
.hero h1{font-family:var(--display);font-weight:900;font-size:clamp(27px,8.4vw,44px);line-height:1.02;text-transform:uppercase;margin:0;letter-spacing:-.02em}
/* From 640px up the headline scales off the 900px hero container so both
   halves stay on one line each — two lines total. 5.4vw is the largest ratio
   that still fits "Morocco's epic 60km ultra." at every width in the range;
   50px is where it stops growing. Below 640px the clamp above is untouched. */
/* ==========================================================================
   DESKTOP TYPE SCALE (640px up). Mobile is deliberately untouched by all of
   this — the 390×700 fold spec at the bottom of this file depends on the
   mobile sizes staying exactly as they are.
   ========================================================================== */
@media (min-width:640px){
  .hero h1{font-size:min(5.4vw,50px)}
  .hero .date{font-size:17.5px;margin-bottom:14px}

  /* Hero subline. Must stay on ONE line: at 17.5px it needs ~471px, so the
     max-width carries real headroom for font-rendering differences across
     platforms. Scoped to the hero's own direct child so the CTA subline
     lower down keeps its 400px. If you raise the size, raise the width too
     or it silently folds to two lines. */
  .hero .wrap>.sub{font-size:18.5px;font-weight:600;max-width:600px}

  /* Section headings — "Part adventure, part purpose" and its siblings.
     Safe here because the base h2.h rule is declared ABOVE this block.
     The pillar and block-title overrides are NOT — see the end of the file. */
  h2.h{font-size:33px}
}
/* MOBILE ONLY. Desktop (>=640px) must render exactly as it did before the
   shared-CSS work: "MOROCCO'S EPIC 60KM ULTRA." on one line over "UPLIFT LOCAL
   COMMUNITIES." Forcing the break at all widths added a third line and pushed
   every block below the hero down 51px. Below 640px the headline already wrapped
   to these same two lines naturally, so this only pins that break in place. */
@media (max-width:639.98px){.hero h1 .ln{display:block}}
.hero h1 .alt{color:var(--light-clay);display:block}
.hero .sub{margin:16px auto 22px;max-width:400px;font-size:15px;color:rgba(245,241,232,.78)}
/* The VSL keeps its old 600px effective width — widening the hero shouldn't
   push the pillars and CTA below the fold on desktop. */
.hero .vsl{border-radius:8px;background:rgba(245,241,232,.06);max-width:600px;margin-left:auto;margin-right:auto}
.pillars{list-style:none;margin:24px 0 0;padding:0;text-align:left;max-width:420px;margin-left:auto;margin-right:auto}
.pillars li{display:flex;gap:7px;padding:10px 0;font-size:15px;color:rgba(245,241,232,.86);line-height:1.5}
/* The marker is a small orange mountain (twin peaks, cream snowcap). Its box is
   1.163em wide with a 7px gap: at the 15px phone size the text starts 24.44px
   in, exactly where it did after the old tick, so nothing re-wraps and the
   390x700 fold stays put. Height = one line, so it sits on the first line. */
.pillars .tick{display:flex;align-items:center;flex:none;width:1.163em;height:1.5em;color:var(--light-clay)}
.pillars .tick svg{display:block;width:100%;height:auto}
.pillars b{color:var(--cream);font-weight:700}

/* buttons */
.btn{display:block;width:100%;text-align:center;cursor:pointer;font-family:var(--display);font-weight:800;font-size:15.5px;letter-spacing:.03em;text-transform:uppercase;padding:19px 14px;border-radius:6px;line-height:1.2;text-decoration:none;transition:background .18s,transform .12s}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:3px solid var(--light-clay);outline-offset:3px}
.btn-primary{background:var(--clay);color:var(--cream);border:2px solid var(--clay)}
.btn-primary:hover{background:var(--clay-dark);border-color:var(--clay-dark)}
.btn-secondary{background:transparent;color:var(--clay);border:2px solid var(--clay)}
.btn-secondary:hover{background:rgba(181,83,46,.07)}
.dark .btn-secondary{color:var(--light-clay);border-color:var(--light-clay)}
.ctablock{margin-top:26px}
.ctablock .sub{margin:12px 0 0;text-align:center;font-size:13px;color:var(--muted);line-height:1.55}
.dark .ctablock .sub{color:rgba(245,241,232,.6)}

/* quotes */
.qcard{background:#fff;border:1px solid var(--border);border-radius:8px;padding:16px 18px;margin-bottom:12px}
.qcard .stars{color:var(--clay);font-size:11.5px;letter-spacing:.14em;margin:0 0 7px}
.qcard p.q{margin:0;font-size:14.5px;line-height:1.6}
/* Name and role are one line at one size — they always were. What made the role
   read smaller was weight and colour, so the fix is a marginal size lift plus a
   darker role colour, not two different font-sizes. Keep them equal. */
.qcard p.a{margin:9px 0 0;font-size:14px;color:#42392F}
.qcard p.a b{color:var(--ink);font-weight:600}

/* adventure blocks */
.blk{margin-bottom:30px}
.blk .num{font-family:var(--display);font-weight:800;font-size:14px;text-transform:uppercase;letter-spacing:.04em;text-align:center;margin:0 0 12px;color:var(--charcoal)}
.blk .num i{color:var(--clay);font-style:normal}
/* Photos are pre-cropped to 3:2 at 1200w and 700w, so they fill the frame
   exactly — object-fit is belt-and-braces for any future replacement. */
.blk .ph{aspect-ratio:3/2;border-radius:8px}
.blk img.ph{width:100%;height:auto;object-fit:cover;border:0;padding:0;background:none}
/* WebP photos sit in <picture>; keep the wrapper a block so the layout is unchanged. */
.blk picture{display:block}
.blk p.cap{margin:12px 0 0;font-size:14.5px;line-height:1.6;color:var(--muted);text-align:center}

/* itinerary timeline */
.tl{list-style:none;margin:0;padding:0;position:relative}
.tl:before{content:"";position:absolute;left:19px;top:14px;bottom:14px;width:2px;background:var(--border)}
.tl li{position:relative;padding:0 0 22px 56px;min-height:44px}
.tl li:last-child{padding-bottom:0}
.tl .pip{position:absolute;left:0;top:0;width:40px;height:40px;border-radius:50%;background:var(--clay);color:var(--cream);display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:800;font-size:16px}
.tl li:last-child .pip{background:var(--charcoal)}
.tl h4{font-family:var(--display);font-weight:800;font-size:15px;text-transform:uppercase;margin:8px 0 4px;color:var(--charcoal);letter-spacing:.01em}
.tl p{margin:0;font-size:14px;line-height:1.55;color:var(--muted)}

/* included — two-tone bullets: bold lead-in in light clay, remainder in cream */
.incl{background:var(--charcoal);color:var(--cream);border-radius:10px;padding:20px 20px}
.incl ul{list-style:none;margin:0;padding:0}
.incl li{display:flex;gap:10px;align-items:flex-start;padding:10px 0;border-bottom:1px solid rgba(245,241,232,.1);font-size:14.5px;line-height:1.5;color:rgba(245,241,232,.9)}
.incl li:last-child{border-bottom:0;padding-bottom:0}
.incl li:first-child{padding-top:0}
.incl .tick{color:var(--light-clay);font-weight:700;flex:none}
.incl b{color:var(--light-clay);font-weight:700}
.incl em{color:rgba(245,241,232,.6);font-style:normal;font-size:12.5px}
/* Not included: the lighter companion box straight under .incl (home, /start/
   thanks, /start/booked, /welcome-back). Same width; a muted dash on each
   line, not a tick and not a cross. */
.ni-box{margin:12px 0 0;background:var(--card);border:1px solid var(--border);border-radius:10px;padding:16px 20px 18px}
.ni-h{margin:0 0 6px;font-family:var(--display);font-weight:800;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.ni-box ul{list-style:none;margin:0;padding:0}
.ni-box li{display:flex;gap:10px;align-items:flex-start;padding:8px 0;border-bottom:1px solid var(--border);font-size:14.5px;line-height:1.5;color:var(--ink)}
.ni-box li:last-child{border-bottom:0;padding-bottom:0}
.ni-box .dash{color:var(--muted);flex:none;width:12px}

/* Mini CTA under the package list — jumps to the price block. Mobile only:
   on desktop the pricing is already in view and it would just be noise. */
.minicta{display:none}
.notincl{margin:13px 4px 0;font-size:13.5px;line-height:1.55;color:var(--muted);text-align:center}
@media (max-width:639px){
  .minicta{display:block;width:100%;margin:8px 0 0;text-align:center;text-decoration:none;cursor:pointer;
    background:var(--clay);color:var(--cream);border:2px solid var(--clay);border-radius:6px;
    padding:13px 12px;font-family:var(--display);font-weight:800;font-size:13px;
    letter-spacing:.06em;text-transform:uppercase;line-height:1.2}
  .minicta:active{transform:translateY(1px)}
  .minicta:focus-visible{outline:3px solid var(--light-clay);outline-offset:3px}
  .notincl{margin:12px 2px 0;font-size:11.5px;line-height:1.5}
}

/* money */
.quake{border-left:3px solid var(--clay);padding:2px 0 2px 16px;margin:0 0 26px}
.quake p{margin:0;font-size:15.5px;line-height:1.65;color:var(--ink)}
.quake b{font-weight:700}
.pill3{display:grid;gap:12px}
.pill3 .c{background:#fff;border:1px solid var(--border);border-top:3px solid var(--clay);border-radius:6px;padding:16px 16px 15px}
.pill3 h4{font-family:var(--display);font-weight:800;font-size:13.5px;text-transform:uppercase;letter-spacing:.03em;margin:0 0 6px;color:var(--charcoal)}
.pill3 p{margin:0;font-size:14px;line-height:1.55;color:var(--muted)}

/* currency + price */
/* A second h2 inside the package section, so it needs its own top gap —
   the first one gets spacing from the section padding. */
h2.h.pricing-h{margin-top:40px}
@media (max-width:620px){h2.h.pricing-h{margin-top:30px}}
.curr{display:flex;justify-content:center;gap:6px;margin:0 0 14px}
.curr button{font-family:var(--body);font-weight:600;font-size:12.5px;letter-spacing:.06em;padding:7px 15px;border-radius:100px;cursor:pointer;background:transparent;color:var(--muted);border:1px solid var(--border);transition:.15s}
.curr button:hover{border-color:var(--clay);color:var(--clay)}
.curr button[aria-pressed="true"]{background:var(--clay);border-color:var(--clay);color:var(--cream)}
.price{background:var(--charcoal);color:var(--cream);border-radius:10px;padding:26px 22px 22px;text-align:center}
.price .meta{margin:0 0 14px;font-size:13px;color:rgba(245,241,232,.82);line-height:1.5}
.price .metasub{color:rgba(245,241,232,.5);font-size:12.5px}
.price .figure{font-family:var(--display);font-weight:900;font-size:clamp(48px,13vw,64px);line-height:.95;margin:0;letter-spacing:-.02em}
.price .per{margin:10px 0 0;font-weight:600;font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:var(--light-clay)}
.price .fxline{margin:14px 0 0;font-size:12px;color:rgba(245,241,232,.45);line-height:1.4}
.price .rule{border:0;border-top:1px solid rgba(245,241,232,.16);margin:16px 0 15px}
.price .instal{margin:0;font-size:15px;font-weight:600;color:var(--cream);line-height:1.5}
.price .instal .sub{display:block;font-weight:400;font-size:13.5px;color:rgba(245,241,232,.65);margin-top:3px}

/* --- consolidated price card (/2027) -------------------------------------
   Price, plan, the rise dates and both CTAs now live in one charcoal card
   instead of three stacked blocks. Everything below recolours the pieces that
   were written for a cream background and are now sitting on charcoal. */
.price .pnow{margin:0 0 5px;font-family:var(--display);font-weight:800;font-size:10.5px;
  letter-spacing:.2em;text-transform:uppercase;color:rgba(245,241,232,.55)}
/* The monthly option was buried in .instal's small print. It is the thing most
   people actually choose, so it sits directly under the headline figure at a
   size that reads as a real alternative, not a footnote. */
.price .planline{margin:8px 0 0;font-family:var(--display);font-weight:800;
  font-size:clamp(19px,4.6vw,24px);line-height:1.15;color:var(--cream)}
.price .planline b{color:var(--light-clay);font-weight:900}
/* What the price goes up to next, and when: urgency right under the price. */
.price .pnext{margin:12px auto 0;max-width:34em;font-size:14px;line-height:1.45;font-weight:600;color:var(--light-clay);text-wrap:balance}
.price .planfine{margin:9px 0 0;font-size:12.5px;line-height:1.5;color:rgba(245,241,232,.55)}
.price .ladder{margin:0 0 20px;font-size:13.5px;line-height:1.6;
  color:rgba(245,241,232,.7);text-wrap:balance}
.price .ladder b{color:var(--cream);font-weight:700}
.price .ladder span{color:var(--light-clay);font-weight:700}
/* one CTA in a two-column grid sits in the left cell. Cap the track and
   centre it so it reads as the button for the whole card. */
.price .doors{margin:0;grid-template-columns:minmax(0,330px);justify-content:center}
.doors--solo,
.doors:has(> .door:only-child){grid-template-columns:minmax(0,330px);justify-content:center}
/* .door .note is muted brown for the cream page; unreadable on charcoal */
.price .door .note{color:rgba(245,241,232,.62)}
.price .door .note b{color:var(--cream)}
.price .btn-secondary{color:var(--light-clay);border-color:var(--light-clay);background:transparent}
.price .btn-secondary:hover{background:rgba(224,138,92,.12)}
@media (max-width:620px){
  .price .ladder{font-size:12.5px;margin-bottom:16px}
  .price .pnow{font-size:9.5px}
}
.apx{font-family:var(--body);font-weight:400;opacity:.55;margin-right:.08em}

/* decision */
.decision{margin-top:30px}
.refer{margin-top:16px;background:rgba(181,83,46,.07);border:1px solid rgba(181,83,46,.3);border-radius:8px;padding:14px 16px}
.refer p{margin:0;font-size:14px;line-height:1.55;color:var(--muted);text-align:center}
.refer b{color:var(--ink);font-weight:600}
.doors{display:grid;grid-template-columns:1fr;gap:16px}
@media (min-width:620px){.doors{grid-template-columns:1fr 1fr}}
.door{display:flex;flex-direction:column}
.door .note{margin:10px 2px 0;font-size:13px;line-height:1.5;color:var(--muted);text-align:center}
.door .note b{color:var(--ink);font-weight:600}
.waicon{width:19px;height:19px;fill:#25D366;vertical-align:-3px;margin-right:7px}
.wa{margin:14px 0 0;text-align:center;font-size:15.5px;line-height:1.5;color:var(--muted)}
.wa a{color:var(--clay);font-weight:600;text-decoration:none;border-bottom:1px solid rgba(181,83,46,.4)}
.wa a:hover{border-bottom-color:var(--clay)}
.trust{margin:0 0 12px;text-align:center;font-size:11.5px;color:#6F675D}

.founder{margin:16px 0 0;display:flex;gap:15px;align-items:flex-start;padding:18px;border:1px solid var(--border);border-radius:8px}
.founder img{width:76px;height:76px;border-radius:8px;object-fit:cover;flex:none}
/* Companion trust box: the Rise Ultra mark in a tile the same 76px square as
   the founder photo, so the two blocks read as a matched pair. The wordmark is
   letterboxed inside it rather than cropped — object-fit:cover would cut it. */
.founder .fmark{width:76px;height:76px;border-radius:8px;flex:none;display:flex;
  align-items:center;justify-content:center;background:var(--charcoal);
  border:1px solid var(--charcoal);padding:6px;box-sizing:border-box}
.founder .fmark img{width:100%;height:auto;max-height:100%;object-fit:contain;
  border-radius:0}
.founder + .founder{margin-top:10px}
/* Instagram sits immediately after the toggle, not pinned to the far right.
   The panel is a SIBLING of this row, not a child of <details> — as a child it
   grew the details' flex-basis and pushed Instagram onto its own line. */
.founder .frow{display:flex;align-items:center;flex-wrap:wrap;gap:4px 14px;margin:11px 0 0}
.founder .frow .codetails{flex:0 0 auto}
.founder .frow .iglink{flex:0 0 auto}
.founder .copanel{display:none;margin:8px 0 0;font-size:11.5px;line-height:1.55;color:#6F675D}

/* Secondary WhatsApp action: a real tap target rather than a text link, but
   deliberately lighter and narrower than "Join us" so it never competes with
   the primary CTA. Sits under whichever .doors block it follows. */
.wabtn-wrap{margin:12px 0 0;text-align:center}
.wabtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--display);font-weight:800;font-size:11.5px;letter-spacing:.04em;
  text-transform:uppercase;text-decoration:none;padding:10px 17px;border-radius:6px;
  border:2px solid var(--border);color:var(--muted);background:transparent;
  transition:border-color .15s,color .15s}
.wabtn:hover{border-color:#25D366;color:var(--ink)}
.wabtn:focus-visible{outline:3px solid #25D366;outline-offset:2px}
.wabtn .waicon{width:15px;height:15px;margin:0;flex:none}
/* on the charcoal price card the default border and text are invisible */
.price .wabtn{border-color:rgba(245,241,232,.3);color:rgba(245,241,232,.88)}
.price .wabtn:hover{border-color:#25D366;color:var(--cream)}
@media (max-width:620px){
  .wabtn{font-size:10.5px;padding:9px 13px;letter-spacing:.02em}
  .wabtn .waicon{width:14px;height:14px}
}
.founder .frow:has(.codetails[open]) + .copanel{display:block}
.founder .iglink{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;
  color:var(--clay);text-decoration:none;border-bottom:1px solid rgba(181,83,46,.35);
  padding-bottom:1px}
.founder .iglink:hover{border-bottom-color:var(--clay)}
.founder .iglink svg{width:15px;height:15px;fill:currentColor;flex:none}
/* Company details as a disclosure inside the box, rather than a jump to the
   footer. The jump landed among the FAQs and the legal line is small — this
   answers the question where it is asked, without navigating. */
.founder .codetails{margin:0}
.founder .codetails summary{display:inline-flex;align-items:center;gap:5px;cursor:pointer;
  font-size:12.5px;font-weight:600;color:var(--clay);list-style:none;
  border-bottom:1px solid rgba(181,83,46,.35);padding-bottom:1px}
.founder .codetails summary::-webkit-details-marker{display:none}
.founder .codetails summary::after{content:"+";font-weight:700;font-size:13px}
.founder .codetails[open] summary::after{content:"\2013"}
.founder .codetails summary:hover{border-bottom-color:var(--clay)}
/* the legal line is a jump target now — keep it clear of the viewport edge */
.legal{scroll-margin-bottom:24px}
.founder .fname{margin:0;font-family:var(--display);font-weight:800;font-size:14px;text-transform:uppercase;color:var(--charcoal)}
.founder .frole{margin:2px 0 8px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--clay);font-weight:600}
/* First line of the company body: the tagline. Charcoal and bold so it leads
   the two sentences, without introducing a third colour into the box. */
.founder .fbody{margin:0;font-size:13.5px;line-height:1.55;color:var(--muted)}

/* iClosed booking slot — lazy-loaded on first tap of "Book a 15-min call".
   The widget ships with a hard-coded height:620px inline style, which is what
   makes it clunky on mobile; app.js rewrites that inline height and these rules
   keep the container itself free of nested scrollbars. */
.calendar-slot{margin-top:18px}
.iclosed-shell{border:1px solid var(--border);border-radius:8px;background:#fff;overflow:hidden}
.iclosed-widget{width:100%!important;height:620px}
.iclosed-widget iframe{width:100%!important;height:100%!important;border:0;display:block}
@media (max-width:599px){.iclosed-widget{height:760px}}
.iclosed-loading{padding:26px 18px;text-align:center;color:#6F675D;font-size:13px;letter-spacing:.06em;text-transform:uppercase}

/* FAQ */
.faq details{background:var(--charcoal);border-radius:6px;margin-bottom:10px;overflow:hidden}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:14px;padding:17px 18px;color:var(--cream);font-weight:600;font-size:14.5px;line-height:1.4}
.faq summary::-webkit-details-marker{display:none}
.faq summary .plus{flex:none;font-family:var(--display);font-weight:600;font-size:19px;color:var(--light-clay);transition:transform .2s}
.faq details[open] summary .plus{transform:rotate(45deg)}
.faq .answer{padding:0 18px 18px;color:rgba(245,241,232,.76);font-size:14.5px;line-height:1.6}
.faq .answer p{margin:0 0 10px}
.faq .answer p:last-child{margin:0}
/* Links in an answer: clay on the charcoal, not the browser's dark blue */
.faq .answer a{color:var(--light-clay);font-weight:600;text-decoration:underline;text-decoration-color:rgba(224,138,92,.5);text-underline-offset:3px}
.faq .answer a:hover{text-decoration-color:var(--light-clay)}
/* "What does each package cost?" (tools/build-pricing.js packages): one small
   table per price window on the FAQ's charcoal; the current window says Now
   (data-w, like the rest of the pricing). */
.faq .answer .pk{width:100%;border-collapse:collapse;margin:16px 0 6px;font-size:13.5px;line-height:1.4}
.faq .answer .pk caption{text-align:left;padding:0 0 6px;color:var(--cream);font-weight:700;font-size:12.5px;letter-spacing:.07em;text-transform:uppercase}
.faq .answer .pk-d{font-weight:500;letter-spacing:0;text-transform:none;color:rgba(245,241,232,.6)}
.faq .answer .pk-now{display:inline-block;margin-left:4px;padding:2px 7px;border-radius:100px;background:var(--light-clay);color:var(--charcoal);font-size:10px;font-weight:800;letter-spacing:.08em;vertical-align:1px}
.faq .answer .pk th,.faq .answer .pk td{padding:8px 6px 8px 0;border-top:1px solid rgba(245,241,232,.14);text-align:left;vertical-align:top}
.faq .answer .pk thead th{white-space:nowrap;border-top:0;padding-top:0;color:rgba(245,241,232,.55);font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.faq .answer .pk tbody th{font-weight:600;color:var(--cream)}
.faq .answer .pk td{white-space:nowrap;color:var(--cream)}
.faq .answer .pk-t{display:block;font-size:12px;color:rgba(245,241,232,.6)}
.faq .answer .pk-note{margin-top:10px;font-size:13px;color:rgba(245,241,232,.6)}

.footmark{margin-top:34px;padding-top:24px;border-top:1px solid var(--border);text-align:center}
.marklogo{width:120px;height:auto;margin:0 auto 4px;display:block}
/* Company details — quiet legal line at the very bottom of every page.
   Lighter than --muted on purpose: present and legible, never competing
   with the wordmark above it. */
.legal{margin:14px auto 0;max-width:520px;font-size:11.5px;line-height:1.55;color:#6F675D;letter-spacing:.01em}
.footmark .mark{font-family:var(--display);font-weight:900;font-size:19px;letter-spacing:.14em;text-transform:uppercase;color:var(--charcoal);margin:0}
.footmark .sub{margin:8px 0 0;font-size:13px;color:var(--muted)}

/* No-JS fallback: native anchor jumps clear the sticky bar. When JS is on,
   app.js measures the bar's live height instead. */
#package,#pricing{scroll-margin-top:44px}

/* ==========================================================================
   MOBILE SCROLL SPEC — see rise-ultra-scroll-check.html
   Screen 1 (hero CTA lands here): package list, mini CTA, "not included",
   then the pricing section breaking the fold.
   Screen 2 (mini CTA lands here): value strip, price, instalments, referral,
   decision heading and the deposit button all above the fold, with the call
   button, its microcopy, the WhatsApp line and the testimonial running past it.
   Every value below exists to hit those two folds — measure before changing.
   ========================================================================== */
@media (max-width:639px){
  #package{padding-top:22px}
  .incl{padding:16px}
  .incl li{font-size:13px;line-height:1.45;padding:9px 0;gap:9px}
  .incl em{font-size:12px}
  .ni-box{padding:14px 16px 16px}
  .ni-box li{font-size:13px;line-height:1.45;gap:9px}

  #pricing{margin-top:0!important}
  .curr{margin:14px 0 9px}
  .price{padding:16px 16px 14px}
  .price .meta{margin:0 0 10px;font-size:11.5px;line-height:1.45}
  .price .metasub{font-size:11px}
  .price .figure{font-size:46px}
  .price .per{margin:8px 0 0;font-size:10.5px}
  .price .fxline{margin:10px 0 0;font-size:11px}
  .price .rule{margin:13px 0 11px}
  .price .instal{font-size:13.5px;line-height:1.4}
  .price .instal .sub{font-size:12px;margin-top:2px}

  .refer{margin-top:12px;padding:9px 12px}
  .refer p{font-size:12px;line-height:1.45}

  .decision{margin-top:14px}
  .doors{gap:11px}
  .btn{padding:15px 12px;font-size:14px}
  .door .note{margin:6px 2px 0;font-size:11.5px}
  .wa{margin:10px 0 0;font-size:12px;line-height:1.45}
  .qcard{padding:13px 14px;margin-top:14px!important}
  .qcard p.q{font-size:12.5px;line-height:1.5}

  /* Item 2: the portrait testimonial shouldn't dominate the sales page. */
  .vid-portrait{max-width:300px}
}

/* ==========================================================================
   DESKTOP TYPE BUMPS — must stay at the END of this file.
   These selectors have the same specificity as their base rules further up
   (.pillars li, .blk .num), so source order is the only thing deciding the
   winner. Put them in the min-width block near the hero instead and they are
   silently overridden by the base rules that follow it.
   ========================================================================== */
@media (min-width:640px){
  /* The three hero pillars. The BLOCK is centred on the page (max-width plus
     auto margins on .pillars itself), but the rows stay left-aligned so the
     three ticks line up in a column. Do not add justify-content:center here —
     it centres each row independently, which put the ticks at 471/441/419px
     instead of all three at 405px. */
  .pillars{max-width:470px}
  .pillars li{font-size:16.5px}

  /* The three numbered titles in the adventure section */
  .blk .num{font-size:17px}
}
/* Desktop and laptop (900px up) only; phones and tablets keep everything above.
   The VSL is at most as wide as the headline's longest line ("MOROCCO'S EPIC
   60KM ULTRA."): the hero becomes one centred grid column sized to its widest
   content (fit-content), which is the headline, and the video fills that
   column... No numbers to keep in step: if the headline's size or words
   change, the video follows. None of the hero's blocks have touching vertical
   margins, so the grid (where margins don't collapse) keeps the spacing as it
   was. The three points under it are bigger, one line each. */
@media (min-width:900px){
  .hero .wrap{display:grid;grid-template-columns:fit-content(100%);justify-content:center}
  /* ...but never so tall that the first of the three points falls below the
     fold (Alex, 31 Oct 2026): its height is capped at the window height less
     the ~287px of bar, date, headline and subline above it and the ~100px
     the first point needs below it, so on a laptop it shrinks to fit and on
     a tall monitor it stays the headline's width. Never under 500px wide
     (windows under ~700px tall can't show the point at that size).
     width:100% (not stretch) so a capped video still centres in the column. */
  .hero .vsl{width:100%;max-width:max(500px, calc((100vh - 390px) * 1.5));margin-left:auto;margin-right:auto}
  /* The three points as on phones: rows left-aligned, so the mountains line
     up in a column, and the list as a whole centred under the video (Alex,
     31 Oct 2026; it replaces the row-by-row centring of 30 Oct). */
  .pillars{width:fit-content;max-width:100%;margin:30px auto 0}
  .pillars li{font-size:20px;gap:10px;padding:11px 0}
}

/* ==========================================================================
   EARLY-BOOKING TIERS — /2027 only. Nothing on / uses these classes.
   ========================================================================== */
.tiers{margin:16px 0 14px}
.tiers-h{margin:0 0 10px;text-align:center;font-family:var(--display);font-weight:800;
  font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--clay)}
.tierlist{list-style:none;margin:0;padding:0;display:grid;gap:8px}
@media (min-width:640px){.tierlist{grid-template-columns:repeat(3,1fr)}}
@media (min-width:640px){.tierlist--2{grid-template-columns:repeat(2,1fr)}}
.tier{display:flex;flex-direction:column;gap:2px;background:#fff;
  border:1px solid var(--border);border-radius:8px;padding:12px 14px;text-align:center;justify-content:flex-start}
/* The window that is open today. Green rather than clay: clay is every CTA on
   the page, and this is a state, not a thing to click. */
.tier.is-live{background:#F1F6EE;border-color:#CBDDC0}
/* Windows that have not opened yet. These are <li>s, never links, so they were
   already unclickable — this just makes that obvious rather than implied. */
.tier.is-later{background:#FBF8F3;border-color:#E4DDCE;opacity:.95}
.tier.is-later .tp{color:var(--ink)}
.tier.is-later .tlabel{color:#6F675D}
.tier .tmo{font-size:11.5px;line-height:1.35;color:var(--muted);margin-top:1px}
.tier .tmo b{font-weight:700;color:var(--charcoal)}
.tier.is-later .tmo b{color:var(--ink)}
.tier .tw{font-size:12px;line-height:1.35;color:var(--muted);margin-top:2px}
/* the window's NAME is the thing a first-time reader anchors on */
.tier .tlabel{font-family:var(--display);font-weight:900;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin-bottom:3px}
.tier.is-live .tlabel{color:#2f4a24}
.tier .tnow{margin-top:auto;padding-top:7px;font-family:var(--display);font-weight:800;font-size:10.5px;
  letter-spacing:.12em;text-transform:uppercase;color:#fff;background:#2f4a24;
  border-radius:100px;padding:4px 10px;align-self:center}
.tier.is-live{box-shadow:0 0 0 2px #CBDDC0}
.tier .tn{font-family:var(--display);font-weight:800;margin-top:auto;padding-top:7px}
.tier .tp{font-family:var(--display);font-weight:800;font-size:23px;line-height:1.15;
  color:var(--charcoal)}
.tier.is-live .tp{color:#2f4a24}
.tier .tn{font-size:12px;line-height:1.4;color:var(--muted)}
.tier.is-live .tn{color:#4d6b40;font-weight:600}
/* Short versions of the window text, shown on phones only (below). */
.tier .tshort{display:none}
/* Phones: the three windows side by side as one row of small cards, like
   desktop but compact. The monthly amount stays: it rises much faster than the
   full price (10 x 205 -> 6 x 375 -> 4 x 615), which the cards must not hide.
   Desktop (640px and up) is untouched. */
@media (max-width:639px){
  .tiers{margin:12px 0 10px}
  .tiers-h{font-size:clamp(9px,2.75vw,12px);letter-spacing:.07em;white-space:nowrap;margin-bottom:8px}
  .tierlist{grid-template-columns:repeat(3,1fr);gap:6px}
  .tier{padding:10px 4px 9px;gap:1px;border-radius:7px}
  .tier .tlong{display:none}
  .tier .tshort{display:inline}
  .tier .tlabel{font-size:8.5px;letter-spacing:.07em;line-height:1.2;min-height:2.4em;margin-bottom:3px;
    display:flex;align-items:center;justify-content:center}
  .tier .tp{font-size:19px;line-height:1.1}
  .tier .tp .was{display:block;font-size:11px;margin:1px 0 0;vertical-align:baseline}
  .tier .tmo{font-size:11.5px;line-height:1.25;margin-top:4px}
  .tier .tmo .tmo-a{display:block;font-size:10px;color:var(--muted)}
  .tier .tmo .was{display:block;font-size:10px;margin:0}
  .tier .tw{font-size:10px;line-height:1.3;margin-top:4px}
  .tier .tnow{font-size:9px;letter-spacing:.12em;padding:3px 9px;margin-top:auto}
  .tier .tn{font-size:11px;padding-top:6px}
}
.tiers-note{margin:11px 2px 0;font-size:12.5px;line-height:1.5;color:var(--muted);
  text-align:center;text-wrap:balance}


/* ============================================================================
   TRUST PANEL — the founder + vision pair fused into one charcoal object.
   Before this, both .founder blocks had NO background at all (transparent on
   cream) behind the same hairline border as .qcard, which made the two blocks
   we most want read the FAINTEST things in the section — fainter than the
   testimonial, which at least had white. This re-tiers the stack:
       price card (charcoal) -> Join us (clay) -> quote (quiet) -> trust panel.
   The clay left edge is deliberate: without it a second charcoal slab in the
   same section reads as another pricing box.

   MUST STAY AT THE END OF THIS FILE. Every selector here is a plain override
   of a rule defined above at equal-or-lower specificity, so it wins on source
   order. Moving it up will silently revert the panel to cream.
   ========================================================================= */
/* ---- TIER 2: the two .founder blocks fused into ONE charcoal trust panel ---- */
/* Charcoal, same as the price card. What keeps the two from competing is not
   a lighter panel (tried it, the washed-out brown was worse) but the clay
   testimonial band now sitting between them. */
.decision .founder{background:var(--charcoal);border:0;border-left:3px solid var(--clay);border-radius:0;padding:20px 22px;margin:22px 0 0;gap:16px;box-shadow:0 10px 22px -18px rgba(22,19,15,.4)}
.decision .qcard + .founder,.decision .reviews + .founder{border-radius:12px 12px 0 0}
.decision .founder + .founder{margin-top:0;border-radius:0 0 12px 12px;box-shadow:inset 0 1px 0 rgba(245,241,232,.13),0 10px 22px -18px rgba(22,19,15,.4)}

/* photo + logo tile made legible on the dark ground */
.decision .founder > img{box-shadow:0 0 0 1px rgba(245,241,232,.18)}
.decision .founder .fmark{background:rgba(245,241,232,.08);border:1px solid rgba(245,241,232,.22)}

/* type re-keyed to the price-card's dark scale */
.decision .founder .fname{color:var(--cream)}
.decision .founder .frole{color:var(--light-clay)}
.decision .founder .fbody{color:rgba(245,241,232,.82)}
.decision .founder .copanel{color:rgba(245,241,232,.58)}
.decision .founder .iglink,
.decision .founder .codetails summary{color:var(--light-clay);
  border-bottom-color:rgba(224,138,92,.42)}
.decision .founder .iglink:hover,
.decision .founder .codetails summary:hover{border-bottom-color:currentColor}
.decision .founder .frow{margin-top:13px}

/* ---- TIER 3: testimonial as a light pull-quote ---- */
/* Its job is still to break up the two charcoal blocks either side of it, but
   it does that by being the one LIGHT object between them rather than a second
   filled slab — a solid clay band competed with the Join us button for
   attention and read as a third heavyweight in a row.
   Clay survives as the star rating only, and as --clay-dark rather than
   --clay: at 11px the stars are small text, and clay on this card is 4.39:1
   where clay-dark is 5.73:1. */
.decision .qcard{background:var(--card);border:1px solid var(--border);border-radius:10px;
  box-shadow:0 10px 22px -20px rgba(22,19,15,.45);padding:18px 20px;margin:18px 0 0;max-width:none}
.decision .qcard .stars{font-size:11px;color:var(--clay-dark);opacity:1;margin:0 0 7px;letter-spacing:.14em}
.decision .qcard p.q{font-size:14.5px;line-height:1.6;color:var(--ink)}
.decision .qcard p.a{font-size:13px;margin-top:9px;color:var(--muted)}
.decision .qcard p.a b{color:var(--ink);font-weight:700}

@media (max-width:639px){
  .decision .founder{padding:16px 15px;gap:12px;margin-top:20px;box-shadow:0 12px 24px -18px rgba(22,19,15,.5)}
  .decision .founder + .founder{box-shadow:inset 0 1px 0 rgba(245,241,232,.13),0 12px 24px -18px rgba(22,19,15,.5)}
  .decision .founder > img,
  .decision .founder .fmark{width:60px;height:60px}
  .decision .qcard{margin-top:14px;padding:14px 15px}
  .decision .qcard p.q{font-size:13.5px}
}

/* Thin clay outline on the price card — ties it to the Join us button below
   and stops the charcoal block reading as a plain slab. Scoped to #pricing:
   .price only exists on / and /2027, but be explicit. */
#pricing .price{border:1px solid var(--clay)}


/* ------------------------------------------------------------------ CTA SIZE
   The top CTA ran the full 618px of the wrap while Join us was capped at
   330px, so the least important button on the page was nearly twice the width
   of the one that takes the money. Both now sit at 420px, and Join us carries
   slightly larger type and more height so it still reads as the primary act.
   Kept at the end of the file: several of these override rules that appear
   earlier at equal specificity. */
.ctablock .btn{max-width:420px;margin-left:auto;margin-right:auto}
.doors--solo,
.doors:has(> .door:only-child),
.price .doors{grid-template-columns:minmax(0,420px);justify-content:center}
.door .btn-primary{font-size:17px;padding:22px 16px;letter-spacing:.04em}
@media (max-width:639px){
  .ctablock .btn{max-width:none}
  .doors--solo,
  .doors:has(> .door:only-child),
  .price .doors{grid-template-columns:minmax(0,1fr)}
  .door .btn-primary{font-size:15px;padding:17px 12px}
}

/* .ctablock .sub is --muted brown, which is right on the cream section but
   sits on the charcoal hero in the first CTA block — 2.27:1, effectively
   invisible. Scoped so the cream one is untouched. */
.hero .ctablock .sub{color:rgba(245,241,232,.72)}

/* Route to next year's event for anyone who cannot make this one. Deliberately
   quiet — it sits directly under the primary CTA and must not compete with it. */
.door .note.alt2027{margin-top:6px;font-size:12.5px;color:var(--muted)}
.door .note.alt2027 a{color:var(--clay-dark);font-weight:600;text-decoration:none;
  border-bottom:1px solid rgba(154,69,38,.42)}
.door .note.alt2027 a:hover{border-bottom-color:var(--clay-dark)}
.price .door .note.alt2027{color:rgba(245,241,232,.72)}
.price .door .note.alt2027 a{color:var(--cream);border-bottom-color:rgba(245,241,232,.5)}

/* ---------------------------------------------------------- NEXT YEAR BOX
   The 2027 route was a one-line link under the CTA and read as fine print.
   It is now a bordered block with its own button. Deliberately outlined
   rather than filled: on the cream sections it must be findable without
   competing with the clay Join us directly above it, and inside the charcoal
   price card the same markup inverts to cream-on-dark. */
.nextyear{margin:18px 0 0;padding:16px 18px 18px;border:1px solid var(--border);
  border-radius:10px;background:var(--card);text-align:center}
.ny-k{margin:0;font-weight:600;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--clay-dark)}
.ny-h{margin:6px 0 0;font-family:var(--display);font-weight:800;font-size:17px;
  line-height:1.2;text-transform:uppercase;letter-spacing:.01em;color:var(--charcoal)}
.ny-d{margin:7px auto 0;max-width:36ch;font-size:13.5px;line-height:1.55;color:var(--muted)}
.ny-btn{display:inline-block;margin:13px 0 0;padding:12px 22px;border-radius:6px;
  border:2px solid var(--clay);color:var(--clay-dark);background:transparent;
  font-family:var(--display);font-weight:800;font-size:13.5px;letter-spacing:.05em;
  text-transform:uppercase;text-decoration:none;cursor:pointer}
.ny-btn:hover{background:var(--clay);color:#fff;border-color:var(--clay)}
.ny-btn:focus-visible{outline:3px solid var(--clay);outline-offset:3px}

/* inside the charcoal price card */
.price .nextyear{background:rgba(245,241,232,.06);border-color:rgba(245,241,232,.22)}
.price .ny-k{color:var(--light-clay)}
.price .ny-h{color:var(--cream)}
.price .ny-d{color:rgba(245,241,232,.72)}
.price .ny-btn{border-color:var(--cream);color:var(--cream)}
.price .ny-btn:hover{background:var(--cream);color:var(--charcoal);border-color:var(--cream)}

@media (max-width:639px){
  .nextyear{padding:14px 14px 16px;margin-top:14px}
  .ny-h{font-size:15.5px}
  .ny-d{font-size:12.5px}
  .ny-btn{display:block;padding:13px 12px}
}

/* the refund note now points at /cancellation rather than ending in a claim
   the reader cannot check */
.door .note .c-link{display:inline-block;margin-left:2px;color:var(--clay-dark);
  font-weight:600;text-decoration:none;border-bottom:1px solid rgba(154,69,38,.4)}
.door .note .c-link:hover{border-bottom-color:var(--clay-dark)}
.price .door .note .c-link{color:var(--cream);border-bottom-color:rgba(245,241,232,.5)}

/* ---- Price windows (lib/prices.js; html[data-window] is set in <head>) ----
   Only the current window's copy of each price shows. data-plan-only hides the
   monthly option once plans close (31 May 2027). All generated by
   tools/build-pricing.js. */
html[data-window="sueb"] [data-w]:not([data-w~="sueb"]),
html[data-window="eb"] [data-w]:not([data-w~="eb"]),
html[data-window="std"] [data-w]:not([data-w~="std"]){display:none!important}
html[data-plan="closed"] [data-plan-only]{display:none!important}
/* An ended window is muted */
.tier.is-past{background:#F6F3EE;border-color:#E4DDCE;opacity:.6}
.tier.is-past .tp,.tier.is-past .tlabel{color:var(--muted)}
/* The EUR 600 back note, at the foot of the price card on both the homepage
   and /welcome-back (.price .back600 below). Deep green and white (darker than the green of "We're here
   now"), with a gentle pulse. Plain text: the currency toggle never
   converts the EUR 600 or the USD 3,000. The ring is a box-shadow, so it
   never widens the page; reduced-motion visitors get it still. */
.back600{margin:10px 0 20px;padding:10px 14px;border-radius:8px;background:#1f3317;color:#fff;
  text-align:center;font-size:14px;line-height:1.45;font-weight:500;text-wrap:balance;
  animation:back600 3s ease-in-out infinite}
.back600 b{font-family:var(--display);font-weight:800;letter-spacing:.01em;color:#fff}
@media (min-width:640px){.back600{font-size:15px;padding:11px 20px}}
@keyframes back600{
  0%{transform:scale(1);box-shadow:0 0 0 0 rgba(77,128,58,.4)}
  50%{transform:scale(1.01)}
  70%{box-shadow:0 0 0 9px rgba(77,128,58,0)}
  100%{transform:scale(1);box-shadow:0 0 0 0 rgba(77,128,58,0)}}
/* on the charcoal price card: a lighter edge and ring, or the green sinks in */
.price .back600{margin:12px 0 4px;font-size:13.5px;border:1px solid #6f9a5c;animation-name:back600-dark}
@keyframes back600-dark{
  0%{transform:scale(1);box-shadow:0 0 0 0 rgba(111,154,92,.45)}
  50%{transform:scale(1.01)}
  70%{box-shadow:0 0 0 8px rgba(111,154,92,0)}
  100%{transform:scale(1);box-shadow:0 0 0 0 rgba(111,154,92,0)}}
@media (prefers-reduced-motion:reduce){.back600{animation:none}}
/* Past runners, under the windows in every window the returner price is on
   sale (data-w): a quiet WhatsApp line with clear space under the last card. */
.tiers-ret{margin:14px 0 20px;text-align:center;font-size:14px;line-height:1.5;text-wrap:balance}
.tiers-ret a{color:var(--ink);font-weight:600;text-decoration:underline;text-decoration-color:rgba(22,19,15,.35);text-underline-offset:3px}
.tiers-ret a:hover{text-decoration-color:var(--clay)}
/* Phones: one line, close to both boxes, so the price box sits higher. */
@media (max-width:639px){.tiers-ret{margin:10px 0 12px;font-size:clamp(10px,3.3vw,14px);white-space:nowrap}}
/* /welcome-back: the public price, crossed out beside the returner price */
.price .was{font-size:.45em;font-weight:700;color:rgba(245,241,232,.5);text-decoration:line-through;text-decoration-thickness:1.5px;margin-left:.25em;vertical-align:.32em}
.price .planline .was{font-size:.78em;margin-left:.1em;vertical-align:baseline;color:rgba(245,241,232,.5)}
/* ...and in the three windows on /welcome-back (light cards) */
.tier .tp .was{font-size:.55em;font-weight:700;color:var(--muted);text-decoration:line-through;text-decoration-thickness:1.5px;margin-left:.3em;vertical-align:.25em}
.tier .tmo .was{color:var(--muted);text-decoration:line-through;margin-left:.15em}
.tier.is-live .tp .was{color:#7d9470}
/* Phones: less bland. The open window is a solid green card whose pill counts
   down the real days left, and the price jump on later windows sits in a clay
   chip. All three cards stay the same size. The dates are a touch stronger so
   each window's timing reads at a glance. Desktop is unchanged. */
@media (max-width:639px){
  .tier .tw{font-size:11px;font-weight:600;color:#4a443c;margin-top:5px}
  .tier.is-live{background:#2f4a24;border-color:#2f4a24;box-shadow:0 8px 18px -8px rgba(47,74,36,.7)}
  .tier.is-live .tlabel{color:#d3e6c6}
  .tier.is-live .tp{color:#fff}
  .tier.is-live .tp .was{color:rgba(255,255,255,.5)}
  .tier.is-live .tmo,.tier.is-live .tmo .tmo-a{color:rgba(255,255,255,.8)}
  .tier.is-live .tw{color:#fff}
  .tier.is-live .tmo b{color:#fff}
  .tier.is-live .tmo .was{color:rgba(255,255,255,.5)}
  .tier.is-live .tnow{background:#fff;color:#2f4a24;letter-spacing:.06em;white-space:nowrap}
  .tier.is-later{background:#fff;border-color:#E4DDCE}
  .tier.is-later .tn{align-self:center;margin-top:auto;padding:3px 8px;border-radius:100px;
    background:rgba(181,83,46,.11);color:var(--clay-dark);font-size:10.5px;line-height:1.3}
  .tier.is-later .tn::before{content:"\25B2\00a0";font-size:.75em;vertical-align:.12em}
}
.m-group{margin:0}
/* /welcome-back banner (tools/build-welcome-back.js) */
/* /welcome-back banner under the sticky bar: the same pulsing box as the
   EUR 600 note, in orange (a shade darker than clay, light-clay edge and
   ring), sitting on the hero's charcoal. Reduced motion: still. */
.wb-banner{background:var(--charcoal);padding:18px 16px 0}
.wb-banner p{margin:0 auto;max-width:640px;padding:10px 14px;border-radius:8px;background:var(--clay-dark);
  border:1px solid var(--light-clay);color:#fff;text-align:center;font-size:14.5px;line-height:1.5;text-wrap:balance;
  animation:wb-pulse 3s ease-in-out infinite}
.wb-banner b{font-family:var(--display);font-weight:800;letter-spacing:.01em}
@media (min-width:640px){.wb-banner p{padding:11px 20px;font-size:15px}}
@keyframes wb-pulse{
  0%{transform:scale(1);box-shadow:0 0 0 0 rgba(224,138,92,.5)}
  50%{transform:scale(1.01)}
  70%{box-shadow:0 0 0 8px rgba(224,138,92,0)}
  100%{transform:scale(1);box-shadow:0 0 0 0 rgba(224,138,92,0)}}
@media (prefers-reduced-motion:reduce){.wb-banner p{animation:none}}

/* ---- Reviews widget: under the testimonials and above the founder block
   (content/reviews.js → tools/build-reviews.js). One line on desktop; on a
   phone the words, then the three logos in a row. The logos are each
   company's own artwork, made for light backgrounds, so they sit on white
   tiles. */
.reviews{margin:18px 0 0;text-align:center}
.reviews .rv-claim{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 10px;
  margin:0;font-size:14px;line-height:1.4;font-weight:600;color:var(--ink)}
.reviews .rv-stars{color:var(--clay);font-size:13px;letter-spacing:.12em;margin-right:3px}
.reviews .rv-sites{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px}
.reviews img{display:block;width:auto;height:16px}
.reviews .rv-logo,.reviews .rv-read img{box-sizing:content-box;padding:6px 9px;background:#fff;
  border:1px solid var(--border);border-radius:8px}
.reviews .rv-logo{display:flex;align-items:center}
.reviews .rv-logo:hover,.reviews .rv-read:hover img{border-color:var(--clay)}
@media (min-width:640px){.reviews img{height:18px}.reviews .rv-logo,.reviews .rv-read img{padding:7px 11px}.reviews .rv-sites{gap:8px}}
/* the smallest phones: slightly smaller tiles, so the three still share a row */
@media (max-width:359px){.reviews img{height:13px}.reviews .rv-logo,.reviews .rv-read img{padding:5px 7px}}
.reviews .rv-more{display:flex;justify-content:center;margin:10px 0 0}
.reviews .rv-read{display:inline-flex;align-items:center;gap:9px;font-size:13.5px;color:var(--ink);text-decoration:none}
.reviews .rv-read:hover{text-decoration:underline;text-underline-offset:3px}
/* hero copy, under the first "See what's included": cream text on charcoal;
   the white tiles stay */
.reviews--top{margin-top:20px}
/* Tablet and desktop: the hero copy and the testimonials copy sit exactly
   midway, with the same space above them as the section has below them
   (hero bottom padding 40px; testimonials section 44px). */
@media (min-width:640px){.reviews--top{margin-top:40px}.reviews--runners{margin-top:44px}}
/* under the FAQs, above the closing "Join us": midway, the same 44px each side
   as the FAQ section's bottom padding */
.reviews--faq{margin:0 0 44px}
.reviews--top .rv-claim{color:var(--cream)}
.reviews--top .rv-stars{color:var(--light-clay)}
.reviews--top .rv-read{color:rgba(245,241,232,.78)}
.reviews--top .rv-logo,.reviews--top .rv-read img{border-color:transparent}
/* Desktop: the whole strip a touch bigger, in all four places. Bigger no
   longer fits one line in the 600px text column, so on desktop the strip is
   allowed 720px, centred on the column (after the modifiers above, whose
   margin shorthand would otherwise put the sides back to 0). */
@media (min-width:900px){.reviews{margin-left:calc(50% - 360px);margin-right:calc(50% - 360px)}
  .reviews .rv-claim{font-size:16px;gap:10px 12px}.reviews .rv-stars{font-size:15px}
  .reviews img{height:21px}.reviews .rv-logo,.reviews .rv-read img{padding:8px 13px;border-radius:9px}
  .reviews .rv-sites{gap:10px}.reviews .rv-read{font-size:15px}}

/* ---- assets/css/modal.css ---- */
/* Rise Ultra — deposit modal. Used on / and /welcome/call.
   Self-contained: nothing here inherits from a page's .btn, so the modal looks
   identical on both routes. */

.backdrop{position:fixed;inset:0;background:rgba(22,19,15,.72);z-index:100;display:flex;align-items:center;justify-content:center;padding:20px}
.modal{background:var(--cream);border-radius:12px;max-width:440px;width:100%;max-height:90vh;overflow:auto;padding:26px 22px}
@media (max-width:520px){.backdrop{padding:0;align-items:stretch}.modal{border-radius:0;max-height:100vh}}
.modal .m-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:6px}
.modal h4{font-family:var(--display);font-weight:800;font-size:19px;text-transform:uppercase;margin:0;color:var(--charcoal)}
.modal .x{background:none;border:0;font-size:24px;line-height:1;cursor:pointer;color:var(--muted);padding:0 4px}
.modal .x:focus-visible{outline:3px solid var(--clay);outline-offset:2px;border-radius:4px}
.modal .lead{margin:0 0 18px;font-size:14px;color:var(--muted)}
.modal .m-note{margin:2px 0 0;font-size:13px;line-height:1.5;color:var(--muted);text-align:center}

.opt{display:block;width:100%;text-align:left;background:#fff;border:2px solid var(--border);border-radius:8px;padding:16px;margin-bottom:12px;cursor:pointer;transition:border-color .15s}
.opt:hover{border-color:var(--clay)}
.opt[aria-pressed="true"]{border-color:var(--clay);background:rgba(181,83,46,.05)}
.opt:focus-visible{outline:3px solid var(--clay);outline-offset:2px}
.opt .t{font-family:var(--display);font-weight:800;font-size:15px;text-transform:uppercase;color:var(--charcoal);margin:0 0 4px}
.opt .d{margin:0;font-size:13.5px;color:var(--muted);line-height:1.5}
.opt .save{display:inline-block;margin-left:8px;background:var(--clay);color:var(--cream);font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:3px 7px;border-radius:100px;vertical-align:middle}

.modal .trust{margin:0 0 12px;text-align:center;font-size:11.5px;color:#8d8478}

/* Continue button — sends the runner to the Stripe Payment Link for the
   selected plan (see RISE_CONFIG.stripePaymentLinks in config.js). */
.m-btn{display:block;width:100%;text-align:center;cursor:pointer;font-family:var(--display);font-weight:800;font-size:15.5px;letter-spacing:.03em;text-transform:uppercase;padding:19px 14px;border-radius:6px;line-height:1.2;text-decoration:none;border:2px solid var(--clay);background:var(--clay);color:var(--cream);transition:background .18s,transform .12s}
.m-btn:hover{background:var(--clay-dark);border-color:var(--clay-dark)}
.m-btn:active{transform:translateY(1px)}
.m-btn:focus-visible{outline:3px solid var(--light-clay);outline-offset:3px}
.m-btn[aria-disabled="true"]{background:var(--border);border-color:var(--border);color:#8d8478;cursor:not-allowed}
.m-btn[aria-disabled="true"]:hover{background:var(--border);border-color:var(--border)}

/* Shown only while RISE_CONFIG.stripePaymentLinks are still blank. */
.stripebox{border:1px dashed var(--border);border-radius:8px;padding:22px 14px;text-align:center;color:#8d8478;font-size:13px;line-height:1.6;margin-bottom:12px}
.stripebox b{display:block;color:var(--muted);font-size:11px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:8px}