/* Rise Ultra — /sponsors, the one-pager Alex sends to brands on WhatsApp.
   Loads AFTER tokens.css and sales.css and adds only what the sales page has
   no component for: the scrimmed hero, the involvement cards, the week rows
   and the print sheet. Buttons, .wrap, .section, .eyebrow, h2.h, .legal and
   the footer all come from sales.css unchanged. */

/* ------------------------------------------------------------------ hero
   Photo with a top-down scrim, as on the static ads: mountains readable in
   the upper third, text sitting on near-solid charcoal below it. */
.sp-hero{position:relative;isolation:isolate;background:var(--charcoal);
  color:var(--cream);text-align:center;padding:26px 0 34px;overflow:hidden}
.sp-hero::before{content:"";position:absolute;inset:0;z-index:-2;
  background:url('/assets/img/ridgeline-runner-700.jpg') center 22% / cover no-repeat}
/* Kept deliberately light at the top so the ridgeline still reads as a
   photograph. The eyebrow sits 30-34% down, where the scrim is thinnest, so
   its contrast is bought with the TEXT colour (see .sp-hero .eyebrow below),
   not by darkening the picture. */
.sp-hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to bottom,
    rgba(22,19,15,.34) 0%, rgba(22,19,15,.62) 30%,
    rgba(22,19,15,.93) 58%, rgba(22,19,15,.98) 100%)}
.sp-hero .wrap{max-width:660px}
.sp-mark{width:104px;height:auto;margin:0 auto 90px;display:block}
@media (min-width:560px),(-webkit-min-device-pixel-ratio:1.5),(min-resolution:144dpi){
  .sp-hero::before{background-image:url('/assets/img/ridgeline-runner-1200.jpg')}
}
/* --light-clay (#E08A5C) is the shared on-dark accent, and it works on solid
   charcoal. Over the photograph it does not: measured against the composited
   ridgeline at 390px it is 3.02:1, an AA fail at 11.5px. The scrim is staying
   light so the picture still reads as a picture, so the contrast comes from a
   paler tone of the same warm hue -- 5.36:1, measured the same way. */
.sp-hero .eyebrow{color:#F7CBAE;margin-bottom:10px}
.sp-hero h1{font-family:var(--display);font-weight:900;
  font-size:clamp(28px,8.2vw,44px);line-height:1.02;letter-spacing:-.02em;
  text-transform:uppercase;margin:0;color:var(--cream)}
.sp-hero .sub{margin:15px auto 22px;max-width:440px;font-size:15px;
  line-height:1.6;color:rgba(245,241,232,.86)}
.sp-hero .btn{max-width:330px;margin:0 auto}
/* cream on clay is 4.39:1; white on the same clay is 4.95:1 and clears AA */
.sp-hero .btn-primary,.sp-contact .btn-primary{color:#fff}
.sp-mark--print{display:none}

/* the WhatsApp CTA is the sales page's primary button with the glyph in it */
.btn .waicon{width:17px;height:17px;fill:currentColor;vertical-align:-3px;margin-right:7px}

/* --------------------------------------------------------- why it matters */
/* .eyebrow inherits clay from sales.css, which is 4.39:1 on cream. clay-dark
   is 5.73:1. Page-local, so no other page changes. .sp-hero .eyebrow keeps
   light-clay -- it sits on the photo, not on cream. */
.section .eyebrow{color:var(--clay-dark)}
.sp-why{background:var(--cream)}
/* :not(.eyebrow) matters — this rule is (0,1,1) and .eyebrow is only (0,1,0),
   so a bare `.sp-why p` repaints the eyebrow ink instead of clay. */
.sp-why p:not(.eyebrow){margin:0 auto;max-width:540px;text-align:center;font-size:15.5px;
  line-height:1.7;color:var(--ink)}

/* ------------------------------------------------------ ways to help */
.sp-lead{margin:0 auto 22px;max-width:520px;text-align:center;font-size:14.5px;
  line-height:1.6;color:var(--muted)}
.sp-feat{background:var(--card);border:1px solid var(--border);border-radius:8px;
  overflow:hidden;margin:0 0 16px}
.sp-feat img{width:100%;height:170px;object-fit:cover;display:block}
.sp-feat .in{padding:18px 18px 20px}
.sp-tag{display:inline-block;font-family:var(--display);font-weight:800;
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#fff;
  background:var(--clay);border-radius:100px;padding:4px 10px;margin:0 0 9px}
.sp-feat h3,.sp-card h3{font-family:var(--display);font-weight:800;
  font-size:16px;line-height:1.2;text-transform:uppercase;letter-spacing:.01em;
  color:var(--charcoal);margin:0 0 8px}
.sp-feat p,.sp-card p{margin:0;font-size:14.5px;line-height:1.6;color:var(--muted)}
.sp-feat .fine{margin:11px 0 0;padding-top:10px;border-top:1px solid var(--border);
  font-size:12.5px;line-height:1.5;color:var(--muted)}

.sp-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
/* the ongoing offer closes the grid on its own row */
.sp-card--wide{grid-column:1/-1}
.sp-card{background:var(--card);border:1px solid var(--border);border-radius:8px;
  padding:17px 17px 18px}

/* ------------------------------------------------------------- the week */
.sp-week{list-style:none;margin:0;padding:0;border-top:1px solid var(--border)}
.sp-week li{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;
  padding:11px 0;border-bottom:1px solid var(--border)}
.sp-week .d{font-family:var(--display);font-weight:800;font-size:12px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--charcoal);
  flex:0 0 74px}
.sp-week .w{flex:1 1 180px;font-size:14.5px;line-height:1.45;color:var(--ink)}
.sp-week .chip{font-family:var(--display);font-weight:800;font-size:10px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--clay-dark);
  background:#F6E7DF;border:1px solid #E7C9B8;border-radius:100px;padding:3px 9px}

/* ------------------------------------------------------ what you get back */
.sp-back{display:grid;grid-template-columns:200px 1fr;gap:20px;align-items:start}
.sp-back img{width:100%;height:100%;min-height:180px;object-fit:cover;
  border-radius:8px;display:block}
.sp-list{list-style:none;margin:0;padding:0}
.sp-list li{position:relative;padding:0 0 12px 22px;font-size:14.5px;
  line-height:1.6;color:var(--ink)}
.sp-list li:last-child{padding-bottom:0}
.sp-list li::before{content:"";position:absolute;left:2px;top:9px;width:7px;height:7px;
  border-radius:50%;background:var(--clay)}

/* ------------------------------------------------------------- next year */
.sp-next{margin:0;text-align:center;font-size:12.5px;line-height:1.6;
  color:var(--muted)}

/* --------------------------------------------------------------- contact */
.sp-contact{background:var(--charcoal);color:var(--cream)}
.sp-contact .wrap{text-align:center}
.sp-me{width:84px;height:84px;border-radius:50%;object-fit:cover;margin:0 auto 14px;
  display:block;border:3px solid rgba(245,241,232,.9)}
.sp-contact .nm{font-family:var(--display);font-weight:800;font-size:17px;
  text-transform:uppercase;letter-spacing:.02em;margin:0;color:var(--cream)}
.sp-contact .ro{margin:4px 0 18px;font-size:13px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--light-clay)}
.sp-contact .btn{max-width:330px;margin:0 auto}
.sp-reach{margin:16px 0 0;font-size:13.5px;line-height:1.9;color:rgba(245,241,232,.82)}
.sp-reach a{color:var(--cream)}
.sp-reach .sel{-webkit-user-select:all;user-select:all;color:var(--cream);font-weight:600}

/* only for print — hidden on screen */
.sp-print{display:none}

@media (max-width:560px){
  .sp-mark{margin-bottom:64px}
  .sp-grid{grid-template-columns:1fr}
  .sp-back{grid-template-columns:1fr;gap:14px}
  .sp-back img{min-height:150px;max-height:190px}
  .sp-feat img{height:145px}
  .sp-week .d{flex:0 0 100%}
}

/* ==================================================================== PRINT
   One A4 sheet. Two decisions worth stating:
   1. The hero goes light. A full-bleed charcoal hero relies on background
      graphics, which browsers drop by default when printing — it would come
      out as white text on white paper. Light wordmark on cream is legible
      whatever the printer does.
   2. Buttons are replaced by the address and number as text, because a
      printed page cannot be tapped. */
@media print{
  @page{size:A4 portrait;margin:11mm 12mm}
  html,body{background:#fff!important;color:#000!important;font-size:9.6pt}
  .sp-hero,.sp-contact{background:#fff!important;color:#000!important;
    padding:0 0 5pt!important;text-align:left}
  .sp-hero::before,.sp-hero::after{display:none!important}
  .sp-hero h1,.sp-contact .nm{color:#000!important}
  .sp-contact .nm{font-size:11pt!important;margin:0!important}
  .sp-hero .sub,.sp-reach{color:#333!important}
  .sp-hero .eyebrow,.sp-contact .ro{color:var(--clay-dark)!important}
  .sp-hero .wrap,.wrap{max-width:none!important;padding:0!important}
  .sp-mark{margin:0 0 4pt!important;width:52px}
  .sp-hero .sp-mark{display:none!important}
  .sp-hero .sp-mark--print{display:block!important}
  .sp-contact .wrap{text-align:left!important}
  .sp-hero h1{font-size:17.5pt!important;max-width:none!important}
  .sp-hero .sub{max-width:none!important;line-height:1.38!important}
  .sp-hero .sub{margin:6pt 0 0!important;font-size:9.4pt}

  .section{padding:3pt 0!important}
  section.sp-contact{padding:0 0 5pt!important}
  h2.h{font-size:11pt!important;text-align:left!important;margin:0 0 4pt!important}
  .eyebrow{text-align:left!important;margin-bottom:2pt!important;font-size:7.6pt!important}
  .sp-why p:not(.eyebrow),.sp-lead{text-align:left!important;max-width:none!important;
    font-size:9.4pt;line-height:1.38!important}
  .sp-lead{margin-bottom:5pt!important}

  /* photos and buttons carry nothing a printed sheet can use */
  .sp-feat img,.sp-back img,.sp-me,.btn,.sp-hero .btn,.sp-contact .btn{display:none!important}
  /* On paper a grid of boxes spends most of its height on padding and white
     space. Each offer collapses to one run of bold title + sentence, and the
     featured one keeps a rule around it so it still reads as the headline. */
  .sp-feat{border:1px solid #bbb!important;background:#fff!important;
    border-radius:2pt!important;margin-bottom:5pt!important;break-inside:avoid}
  .sp-feat .in{padding:5pt 7pt!important}
  .sp-grid{display:block!important}
  .sp-card{border:0!important;background:none!important;border-radius:0!important;
    padding:0 0 2pt!important;break-inside:avoid}
  .sp-tag{font-size:7.4pt!important;padding:0!important;border:0!important;
    background:none!important;color:var(--clay-dark)!important;margin:0!important}
  .sp-tag::after{content:"  \00b7  "}
  .sp-feat h3,.sp-card h3{display:inline!important;font-size:9pt!important;margin:0!important}
  .sp-feat h3::after,.sp-card h3::after{content:" \2014 "}
  .sp-feat p,.sp-card p{display:inline!important;font-size:8.8pt!important;
    line-height:1.38!important;color:#333!important}
  .sp-feat .fine{display:block!important;margin-top:4pt!important;padding-top:3pt!important;
    font-size:7.6pt!important}

  .sp-week li{padding:2pt 0!important}
  .sp-week .d{font-size:8.4pt!important;flex-basis:62pt!important}
  .sp-week .w{font-size:8.8pt!important}
  .sp-week .chip{font-size:7.4pt!important;padding:1pt 5pt!important;
    border-color:#bbb!important;color:#000!important;background:#fff!important}

  .sp-back{display:block!important}
  .sp-list{display:grid!important;grid-template-columns:1fr 1fr!important;
    column-gap:16pt!important}
  .sp-list li{padding:0 0 3pt 13pt!important;font-size:8.8pt!important}
  .sp-list li::before{width:3.5pt;height:3.5pt;top:5pt;
    background:none!important;border:.75pt solid #666}
  .sp-next{text-align:left!important;font-size:8pt!important}

  /* the two things a reader of paper actually needs */
  .sp-contact .ro{margin-bottom:5pt!important}
  .sp-print{display:block!important;margin:4pt 0 0;font-size:9.6pt;line-height:1.7;color:#000}
  .sp-print b{font-weight:700}
  .sp-reach{margin-top:3pt!important;font-size:8.6pt!important;color:#333!important}
  .sp-reach a{color:#333!important;text-decoration:none!important}
  .sp-reach br,.sp-reach .sel{display:none!important}
  .sp-reach a~a::before{content:"  \00b7  "}

  .sp-foot{display:none!important}
  section,li,.sp-feat,.sp-card{break-inside:avoid}
}