/* /sponsors/d (ENG-485) — additions on top of sponsors.css. Everything is scoped
   under body.spd so the production page is untouched. */

/* Dark header, continuous with the dark hero (the /sponsors/b look). Same layout;
   the pills become outlines (inset shadow, so their size doesn't change). */
body.spd .header { background: #0E1C2E; color: #FFFFFF; border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
body.spd .header__title { color: #FFFFFF; }
body.spd .header__subtitle { color: #B8B0A6; }
body.spd .header__lang-mobile,
body.spd .header__hamburger { background: transparent; color: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22); }

/* Full-bleed dark band without widening the page: border-image's outset paints
   the fill 100vmax past each side of .sp-main (no layout width, no seam).
   Negative top margin meets the header (cancels .sp-intro's 28px). */
.spd-dark { display: flex; flex-direction: column; gap: 8px; margin: -28px 0 12px; padding: 14px 0 0; border-image: linear-gradient(#0E1C2E, #0E1C2E) fill 0 / / 0 100vmax; color: #FFFFFF; }
.spd-dark .sp-h2 { color: #FFFFFF; font-size: 32px; line-height: 1.02; letter-spacing: -0.03em; text-wrap: balance; }
@media (min-width: 600px) { .spd-dark .sp-h2 { font-size: 48px; } }
.spd-dark .sp-lead { color: #D9D2C8; }

/* Hero button: white "See rates", with the entry price as a quiet line under it.
   White keeps the orange for the phone's ad slot. */
.spd-hero { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.spd .spd-hero__btn { display: inline-flex; align-items: center; justify-content: center; min-width: 170px; min-height: 48px; padding: 0 28px; border-radius: 12px; background: #FFFFFF; color: #1A1714; font-size: 16.5px; font-weight: 700; }
.spd .spd-hero__btn:hover { color: #1A1714; background: #F1ECE5; }
.spd-hero__from { font-size: 14px; font-weight: 500; color: rgba(255, 255, 255, 0.62); }
.spd-hero__reach { display: none; }
.spd-hero__proof { display: none; } /* desktop only: on phones it pushed See our reach below the fold */
.spd-proofband__h { display: none; }
.spd #numbers { scroll-margin-top: 0; }

.spd-hero__note[hidden] { display: none; }
.spd-hero__note { margin: 0; font-size: 13px; line-height: 1.45; color: #B8B0A6; }

/* Proof numbers straight on the white: no box, no cards, bigger type */
/* Full-bleed sand band for the proof numbers. -28px = .spd-band's 18px bottom
   margin + .sp-intro's 10px flex gap, so it butts up to the dark strip. */
.spd-proofband { margin: -28px 0 8px; padding: 16px 0 20px; display: flex; flex-direction: column; gap: 14px; border-image: linear-gradient(#FBF6F0, #FBF6F0) fill 0 / / 0 100vmax; border-bottom: 1px solid #EFE4D6; }
.spd .spd-stats { gap: 18px 16px; margin: 0; }
/* 2x2 at every width: the page column is 560px on desktop, too narrow for four
   one-line labels (production switches to 4 columns at 600px) */
.spd .spd-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Phones: extra room between the rows keeps the second pair clear of the fold */
@media (max-width: 599px) { .spd .spd-stats { row-gap: 30px; } }
.spd .spd-stats .sp-mini { background: none; border: 0; border-radius: 0; padding: 0; gap: 4px; }
/* Number on top; below it a small icon (globe, Instagram, calendar, people) sits
   on the label line, so the icons add no height. */
.spd .spd-stats .sp-mini { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 6px; }
.spd .spd-stats .sp-mini b { grid-column: 1 / -1; }
.spd .spd-stats .sp-mini__ic { grid-column: 1; grid-row: 2; width: auto; height: auto; margin: 0; background: none; }
.spd .spd-stats .sp-proof__t { grid-column: 2; grid-row: 2; font-size: 15px; white-space: nowrap; }
html[lang="es"] .spd .spd-stats .sp-proof__t { white-space: normal; } /* Spanish labels run longer ("seguidores en Instagram"): let them wrap instead of widening the page */
/* Numbers line up across the row even if a label runs long */
.spd .spd-stats { align-items: start; }
.spd-plus { font-style: normal; }
.spd .spd-stats .sp-mini b { font-size: 34px; letter-spacing: -0.03em; line-height: 1; }
/* One line per label ("website visitors"); the shared copy has line breaks for the boxed layout */
.spd .spd-stats .sp-proof__t { color: #4A4640; }
/* One-line source note, set off from the numbers by a hairline */
.spd-stats__cap { margin: 0; padding-top: 12px; border-top: 1px solid #EFE4D6; font-size: 13px; font-weight: 500; line-height: 1.4; color: #7A756D; }
/* Current sponsors strip (the /sponsors/b "Already on the feed" row): dark,
   full-bleed like .spd-dark, a hairline rule between it and the phone. */
/* -22px = .spd-dark's 12px bottom margin + .sp-intro's 10px flex gap, so it butts up to the band */
/* Hairline and a shade over the phone's bottom edge (it tucks behind the line), then space */
/* -23px, not -22: a 1px overlap so the two dark fills never leave a hairline seam
   at fractional pixel positions (it showed as a full-width line on some screens). */
.spd-band { position: relative; margin: -23px 0 18px; padding: 16px 0 18px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; border-image: linear-gradient(#0E1C2E, #0E1C2E) fill 0 / / 0 100vmax; }
/* Eased shade over the phone's bottom edge, ending in the column-width hairline
   (the line is the shade's last pixel, one layer, so no pale sliver can open
   between them at fractional pixel positions). Lines up with "Current sponsors". */
.spd-band::after { content: ''; position: absolute; left: 0; right: 0; top: -34px; height: 35px; background: linear-gradient(rgba(14, 28, 46, 0) 0, rgba(14, 28, 46, 0.12) 10px, rgba(14, 28, 46, 0.45) 20px, rgba(14, 28, 46, 0.85) 28px, #0E1C2E 34px, #22364F 34px, #22364F 35px); pointer-events: none; }
.spd-band .spd-hero { margin: 0 0 22px; align-self: center; }
.spd-band__l { margin-bottom: 4px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #9A928A; }
/* Sponsor ads as a swipe row: ~1.5 banners visible, the rest scroll-snap in.
   It runs off the right edge of the screen (-20px = .sp-main's side padding)
   so the half banner reads as "there's more". */
.spd .spd-ads { list-style: none; margin: 0 -20px 0 0; padding: 0 20px 0 0; align-self: stretch; display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.spd .spd-ads::-webkit-scrollbar { display: none; }
.spd .spd-ads li { flex: 0 0 62%; scroll-snap-align: start; }
.spd .spd-ads img { display: block; width: 100%; height: auto; aspect-ratio: 1292 / 344; object-fit: cover; border-radius: 8px; }
@media (min-width: 600px) { .spd .spd-ads li { flex-basis: 44%; } }
/* Soft fade over the right edge hints there's more; hidden once the row reaches its end */
.spd-ads-wrap { position: relative; align-self: stretch; }
/* 2px overhang top and bottom, and solid for its last few px so the screen edge
   never shows an unfaded column (invisible, dark on dark): the row sits on a fractional pixel, and a flush fade
   rounded differently from the images, leaving an unfaded sliver at the top. */
.spd-ads-wrap::after { content: ''; position: absolute; top: -2px; bottom: -2px; right: -20px; width: 56px; background: linear-gradient(90deg, rgba(14, 28, 46, 0), #0E1C2E 88%); pointer-events: none; transition: opacity 0.2s; }
.spd-ads-wrap.is-end::after { opacity: 0; }

/* Hero phone: shot-top-hero.png (666x1393, Sep 29 feed, region banner cropped off),
   pinned to the top of the screen and cropped at the bottom. The default crop is 840px;
   on phones sponsors-d.js then sizes the screen so the first pair of proof numbers ends
   right at the fold (the second pair starts below it). The live ad sits at y 417-586,
   x 15-650, placed in cqw so it stays on the ad whatever height the screen gets. */
/* Everything left-aligned except the phone, which is centered and flush on the band's bottom edge (no fade). */
.spd-stage { margin: 8px 0 0; display: flex; justify-content: center; }
.spd-shot { position: relative; margin: 0; width: 210px; flex: none; }
/* Thin near-black bezel with a faint light rim so the phone reads against the
   dark band; the screen inside gets the matching inner radius (26 - 6). */
.spd-shot__phone { border: 6px solid #0C0A09; border-bottom: 0; border-radius: 26px 26px 0 0; overflow: hidden; background: #1C1C1E;
  /* Light rim on top and sides only; a full spread shadow also drew a pale edge along the cut-off bottom */
  box-shadow: -1px 0 0 rgba(255, 255, 255, 0.14), 1px 0 0 rgba(255, 255, 255, 0.14), 0 -1px 0 rgba(255, 255, 255, 0.14); }
/* Dark-mode Safari-style address bar, part of the screen rather than the bezel */
.spd-shot .sp-phone__bar { height: 26px; padding: 0 16px; background: #1C1C1E; border-bottom: 1px solid #2C2C2E; box-sizing: border-box; }
.spd-shot .sp-phone__url { height: 16px; background: #3A3A3C; color: #D1D1D6; font-size: 8px; font-weight: 500; }
.spd-shot__screen { position: relative; aspect-ratio: 666 / 840; overflow: hidden; container-type: inline-size; }
.spd-shot__screen img { position: absolute; top: 0; left: 0; width: 100%; height: auto; display: block; }
/* Fade over the whole phone, frame included, so it melts into the dark band
   instead of ending on a hard edge. */
.spd-shot__slot { position: absolute; left: 2.25%; width: 95.35%; top: 62.61cqw; height: 25.38cqw; border-radius: 8px; background: #FB4000; color: #FFFFFF; display: flex; align-items: center; justify-content: center; text-align: center; font-size: min(11px, 5.6cqw); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; box-shadow: 0 0 0 3px rgba(251, 64, 0, 0.35), 0 0 28px rgba(251, 64, 0, 0.55); }
/* Detail-section phones match the hero phone: near-black bezel, dark Safari bar,
   glowing orange "Your Business Here" slot (production keeps its dark slot). */
.spd .sp-phone__frame { border-color: #0C0A09; background: #1C1C1E; }
.spd .sp-phone__bar { background: #1C1C1E; border-bottom: 1px solid #2C2C2E; }
.spd .sp-phone__url { background: #3A3A3C; color: #D1D1D6; font-weight: 500; }
.spd .sp-adslot { background: #FB4000; border-radius: 8px; box-shadow: 0 0 0 3px rgba(251, 64, 0, 0.35), 0 0 28px rgba(251, 64, 0, 0.55); }
.spd .sp-adslot span { color: #FFFFFF; letter-spacing: 0.08em; }
/* Cut off below the ad like the hero phone: no bottom bezel, screenshot pinned to
   the top, and a fade into the white page. Slots are placed in cqw (fractions of
   the screen width) so they stay on the ad whatever height the screen gets. */
.spd .sp-phone__frame { position: relative; border-bottom: 0; border-radius: 26px 26px 0 0; }
.spd .sp-phone__frame::after { content: ''; position: absolute; left: -6px; right: -6px; bottom: 0; height: 40px; background: linear-gradient(rgba(255, 255, 255, 0), #FFFFFF 90%); pointer-events: none; }
.spd .sp-phone__screen { container-type: inline-size; overflow: hidden; }
.spd .sp-phone__screen img { bottom: auto; height: auto; }
/* Top of Feed: the hero's screenshot (shot-top-hero.png, 666x1393), same 840px crop.
   Live ad at y 417-586, x 15-650. */
.spd .spd-screen--hero { aspect-ratio: 666 / 840; }
.spd .spd-screen--hero .sp-adslot { left: 2.25%; width: 95.35%; top: 62.61cqw; height: 25.38cqw; }
/* Middle of Feed (shot-mid-full.png, 510x1108): same screen height as Top of Feed.
   Its ad sits at 140.56cqw (64.7% of the shot), so the shot is scrolled up 78cqw
   (a feed scrolled to the middle) to land the ad where the Top ad sits. */
.spd .sp-phone__screen--mid { aspect-ratio: 666 / 840; }
.spd .sp-phone__screen--mid img { top: -78cqw; }
.spd .sp-phone__screen--mid .sp-adslot--mid { top: 62.56cqw; height: 26.94cqw; }

/* "or" divider between the Month and Season cards: a hairline with the word
   centred on it, so the two read as alternatives, not two things to buy */
.spd .spd-or { display: flex; align-items: center; gap: 12px; margin: -2px 6px; font-size: 13px; font-weight: 600; color: #9A928A; }
.spd .spd-or::before, .spd .spd-or::after { content: ''; flex: 1; height: 1px; background: #E5DACB; }

/* Spot sections: no "High Season" tag on each card (the whole page is high-season
   prices, it's in the intro); the projection footnote sits under the buttons */
.spd .sp-card__season { display: none; }
.spd .sp-pricecol > .sp-projnote { margin: 2px 4px 0; }

/* Trial "Compare the spots" (#compare): three plan cards, season price first.
   Phones: stacked. Desktop (900px+, below): three across, Both Spots raised. */
/* Phones keep the original Pick your spot cards; this panel is desktop-only (900px+) */
.spd-plans { display: none; padding: 28px 0 32px; border-top: 1px solid #E5E1DA; }
.spd .spd-plans__sub { margin: 0 auto 20px; max-width: 34em; text-align: center; text-wrap: balance; }
.spd .spd-plans__h { margin: 0 0 8px; font-size: 26px; line-height: 1.1; letter-spacing: -0.02em; text-align: center; }
.spd-plans__bill { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 30px; }
.spd-plans__grid { display: flex; flex-direction: column; gap: 14px; }
.spd-plan { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 26px 22px 20px; border: 1px solid #E5DACB; border-radius: 16px; background: #FFFFFF; color: #1F1D1A; }
/* Mini phones on the compare cards are pre-rendered PNGs (3x, EN and ES) so browser
   minimum font sizes and zoom can't move the slot or its label */
.spd-minis-img { display: block; height: auto; margin: 14px auto 4px; }
.spd .spd-plan__name { margin: 4px 0 0; font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
.spd-plan__desc { margin: 6px 0 0; max-width: 22em; font-size: 14.5px; line-height: 1.45; color: #7A756D; text-wrap: balance; }
.spd-plan__price { margin-top: 16px; display: flex; align-items: baseline; gap: 6px; }
.spd-plan__price b { font-size: 44px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.spd-plan__price span { font-size: 14px; color: #7A756D; }
.spd-plan__alt { margin-top: 6px; font-size: 13px; color: #7A756D; }
.spd-plan__save { font-weight: 700; color: #1F7A3E; }
/* Season: struck monthly price, then the per-month rate in green (like the Pick your spot cards) */
.spd-plan__alt.is-eff { text-wrap: balance; } /* same grey as the monthly line */
.spd-plan__instead { white-space: nowrap; }
.spd-plan__toseason { padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(122, 117, 109, 0.5); cursor: pointer; } /* "or $1,530 for the season": flips the switch */
.spd-plan__toseason:hover { color: #1F1D1A; text-decoration-color: currentColor; }
.spd-plan__toseason:focus-visible { outline: 2px solid #1F1D1A; outline-offset: 2px; border-radius: 4px; }
.spd-plan__alt.is-eff s { font-weight: 500; color: #9A928A; }
.spd-plan__reach { align-self: stretch; margin-top: 12px; padding-top: 12px; border-top: 1px solid #EFE4D6; font-size: 14.5px; line-height: 1.5; }
/* Reach lines left-justified with the section cards' icons: person = people, eye = ad views */
/* Grid centres the pair of lines as a block while each stays left-aligned on its icon */
.spd-plan__reach { text-align: left; display: grid; justify-content: center; justify-items: start; gap: 6px; }
.spd-plan__m { display: flex; align-items: flex-start; gap: 8px; }
.spd-plan__m svg { flex: none; margin-top: 3px; }
.spd-plan__m:first-child { font-weight: 600; }
.spd-plan__m .spd-ic-eye, .spd-plan__m.is-views .spd-ic-person { display: none; }
.spd-plan__m.is-views .spd-ic-eye { display: block; }
/* Spots left as the card's footer strip, edge to edge (cancels the card padding) */
.spd-plan__left { align-self: stretch; margin: auto -22px -20px; padding: 12px 0 13px; border-top: 1px solid #EFE4D6; border-radius: 0 0 15px 15px; background: #FAF7F2; font-size: 13px; font-weight: 700; color: #7A756D; }
.spd-plan__reach + .spd-plan__left { margin-top: 16px; }
/* Same colours as the Pick your spot cards: orange scarcity on Top and Both,
   Both Spots as the cream card with the orange border (no dark card) */
.spd-plan__left--hot { border-top-color: #F3C0AE; background: #FBE9E3; color: #C43300; }
.spd-plan--best .spd-plan__left { border-radius: 0 0 14px 14px; }
.spd-plan--best { background: #FBF6F0; border: 2px solid #FB4000; box-shadow: 0 6px 18px rgba(251, 64, 0, 0.16); }
.spd .spd-plans__note--ask { display: none; }
.spd-plans__ask { width: 100%; max-width: 480px; margin: 12px auto 0; }
.spd-star { font-style: normal; color: #FB4000; }
.spd-plans__foot::before { content: "*"; color: #FB4000; }
.spd-plans__foot { margin: 16px auto 0; max-width: 40em; font-size: 12.5px; line-height: 1.45; color: #7A756D; text-align: center; }

.spd .spd-faq[hidden] { display: none; }
/* Why lead line is desktop-only (the split layout); phones keep the stacked cards */
.spd-why__lead { display: none; }
/* Contact panel: quick-answers line under the intro, before the buttons */
/* Contact card, phones and desktop alike: pitch, then the form (already open),
   'or', WhatsApp, then phone and email. 'Have questions?' is covered by the form's reply line. */
.spd .spd-cta__side { display: flex; flex-direction: column; gap: 12px; order: 2; }
.spd .sp-cta > .sp-cta__num { order: 3; }
.spd .sp-cta > .spd-cta__q { display: none; }
.spd .spd-cta__side > .sp-form, .spd .spd-cta__side > .sp-form__ok { order: 1; }
.spd .spd-cta__side > .spd-cta__or { order: 2; color: #9A928A; }
.spd .spd-cta__side > .sp-cta__btns { order: 3; margin: 0; }
.spd .spd-cta__side > .spd-form__reply { order: 4; }
.spd .spd-cta__or::before, .spd .spd-cta__or::after { background: rgba(255, 255, 255, 0.16); }
/* Reply-time promise right under the form's button */
.spd .spd-form__reply { margin: 2px 0 0; font-size: 13px; color: #BDB5AB; text-align: center; }
/* Phone and email now sit inside the dark contact card */
.spd .sp-cta .sp-cta__num { margin: 4px 0 0; flex-wrap: nowrap; gap: 6px 16px; color: #EFE9E1; } /* phone and email side by side */
@media (max-width: 400px) { .spd .sp-cta .sp-cta__num { gap: 12px; font-size: 13.5px; } .spd .sp-cta .sp-cta__item { gap: 5px; } }
@media (max-width: 359px) { .spd .sp-cta .sp-cta__num { flex-wrap: wrap; } } /* tiny phones: stack again */
/* Tiny phones: one-line stat labels ('Instagram followers') would push the page 2px wide */
@media (max-width: 359px) { .spd .spd-stats { column-gap: 10px; } .spd .spd-stats .sp-proof__t { font-size: 13.5px; } }
/* 'Have questions?' on its own line, same look as the paragraph above it */
.spd .spd-cta__q { margin-top: -8px; }

/* Quick comparison at the top of pricing */
/* padding-bottom: breathing room between the cards and the Top of Feed divider */
.spd-compare { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; padding-bottom: 36px; margin-bottom: var(--spd-picks-pad, 0px); } /* fill as margin: the sticky switch lets go when the cards end */
/* "Pick your spot" leads the pricing, so it outranks the spot titles below (24px) */
.spd .sp-picks__h { font-size: 30px; line-height: 1.05; }
/* Breathing room above "Pick your spot" when the hero button jumps here */
.spd #spots { scroll-margin-top: 24px; }
@media (max-width: 899px) { .spd .sp-intro > #spots, .spd .sp-intro > .sp-picks__sub { text-align: center; } .spd .sp-intro > .sp-picks__sub { text-wrap: balance; } .spd .sp-intro > #spots { justify-content: center; } .spd .sp-intro > #spots { scroll-margin-top: 0; padding-top: calc(28px + var(--spd-picks-top, 0px)); } }
/* Monthly / Season: full-width primary switch (currency lives in the header) */
.spd .spd-bill { display: flex; align-self: center; width: 100%; max-width: 340px; margin-top: 8px; padding: 3px; box-sizing: border-box; }
.spd .spd-bill button { flex: 1; min-height: 40px; padding: 0 10px; font-size: 14.5px; font-weight: 700; }
.spd .spd-bill button[aria-pressed="true"] { background: #1F1D1A; color: #FFFFFF; }
.spd-bill__save { margin-left: 2px; font-size: 12.5px; font-weight: 700; color: #C43300; }
.spd-bill button[aria-pressed="true"] .spd-bill__save { color: #F6B48C; }
/* Line under the switch: grey "cancel anytime" on Monthly, the orange Oct 15 offer on Season */
.spd .spd-bill__promo { align-self: center; margin: 2px 0 0; min-height: 1.4em; line-height: 1.4; color: #7A756D; font-size: 14px; font-weight: 600; text-align: center; }
/* The Oct 15 offer reads in the same grey as 'cancel anytime' (was orange) */
.spd .spd-bill__promo.is-offer { color: #7A756D; font-weight: 600; }
.spd .spd-bill__promo--below { margin-top: 10px; min-height: 2.8em; text-wrap: balance; } /* two lines reserved: the Season wording wraps, Monthly doesn't, and the cards must not jump */
/* Season card: "Book by Oct 15" sits at the bottom as a note under a hairline */
.spd .sp-card > .sp-promo { margin-top: 6px; padding-top: 10px; border-top: 1px solid #EFE4D6; font-size: 13.5px; }
/* Keyboard focus ring in brand dark, not the browser blue after a tap */
.spd .spd-bill button:focus { outline: none; }
.spd .spd-bill button:focus-visible { outline: 2px solid #1F1D1A; outline-offset: 2px; }
/* Pick your spot on phones: one full-width card per spot, stacked. Icon | name + spots left |
   price, with "See details" under the price (the season's per-month rate lives in the details). */
.spd .spd-compare .spd-bill { margin-top: 8px; max-width: 264px; }
.spd .spd-compare .spd-bill button { min-height: 34px; font-size: 13.5px; }
.spd .spd-compare .spd-bill__save { font-size: 11.5px; }
.spd-rows { display: flex; flex-direction: column; gap: 18px; margin-top: 14px; }
.spd .spd-row { position: relative; display: grid; grid-template-columns: 30px 1fr auto; grid-template-areas: "ic name price" "ic left ." "ic reach reach" "go go go"; column-gap: 14px; row-gap: 2px; align-items: center; padding: 20px 16px 14px; border: 1px solid #E5DACB; border-radius: 14px; background: #FFFFFF; color: #1F1D1A; text-decoration: none; transition: transform 0.1s, border-color 0.15s; }
.spd .spd-row:hover { color: #1F1D1A; border-color: #FB4000; }
.spd .spd-row:active { transform: scale(0.99); }
.spd .spd-row:focus-visible { outline: 2px solid #1F1D1A; outline-offset: 2px; }
.spd .spd-row--best { background: #FBF6F0; border: 2px solid #FB4000; box-shadow: 0 6px 18px rgba(251, 64, 0, 0.16); }
/* Desktop Pick your spot cards: top label pill, centred on the card's top edge.
   Most reach is orange; Most visible and Lowest price outlined. */
.spd-col__tag { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); padding: 3px 9px; border-radius: 999px; background: #FB4000; color: #FFFFFF; font-size: 11px; font-weight: 700; white-space: nowrap; }
.spd-col__tag--quiet { padding: 2px 9px; border: 1px solid #D9CEC1; background: #FFFFFF; color: #4A4640; }
.spd-row__tag { position: absolute; top: -11px; left: 14px; padding: 3px 9px; border-radius: 999px; background: #FB4000; color: #FFFFFF; font-size: 11px; font-weight: 700; white-space: nowrap; }
.spd-row__tag--quiet { padding: 2px 9px; border: 1px solid #D9CEC1; background: #FFFFFF; color: #4A4640; }
.spd-row__ic { grid-area: ic; }
.spd-row__name { grid-area: name; font-size: 18px; font-weight: 700; line-height: 1.2; }
.spd-row__left { grid-area: left; align-self: start; font-size: 13.5px; font-weight: 700; color: #C43300; }
.spd-row__left--muted { color: #7A756D; }
.spd-row__price { grid-area: price; justify-self: end; font-size: 26px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; white-space: nowrap; }
.spd-row__per { font-size: 14px; font-weight: 500; color: #7A756D; letter-spacing: 0; }
.spd-row__go { grid-area: go; justify-self: stretch; margin: 12px -16px -14px; padding: 11px 0 12px; border-top: 1px solid #EFE4D6; border-radius: 0 0 13px 13px; background: #FAF7F2; text-align: center; font-size: 14.5px; font-weight: 700; color: #C43300; } /* full-width "See details" strip: the card's open control */
.spd .spd-row--best .spd-row__go { border-top-color: #F3C0AE; background: #FBE9E3; border-radius: 0 0 12px 12px; }
.spd .spd-acc.is-open .spd-row__go { border-radius: 0; }
/* Pesos run longer (MX$37,720/season) */
.spd-cur-mxn .spd-row__price { font-size: 22px; }
/* Same glowing orange as the "Your Ad Here" slot in the phone mockups */
.spd-slot { fill: #FB4000; filter: drop-shadow(0 0 2px rgba(251, 64, 0, 0.55)); }
/* Detail-section labels ("Most visible") in quiet sentence case, not orange all-caps */
.spd .sp-place .sp-kicker { text-transform: lowercase; letter-spacing: 0; font-size: 13.5px; font-weight: 600; color: #7A756D; }
/* Shared copy is Title Case ("Most Visible"); render it as sentence case here */
.spd .sp-place .sp-kicker::first-letter { text-transform: uppercase; }

/* FAQ */
.spd-faq__list { display: flex; flex-direction: column; border-top: 1px solid #E5E1DA; }
.spd-faq details { border-bottom: 1px solid #E5E1DA; }
.spd-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 14px; min-height: 52px; padding: 12px 0; font-size: 16px; font-weight: 600; line-height: 1.35; }
.spd-faq summary::-webkit-details-marker { display: none; }
.spd-faq summary::after { content: '+'; flex: none; font-size: 22px; font-weight: 400; color: #FB4000; line-height: 1; }
.spd-faq details[open] summary::after { content: '−'; }
.spd-faq details p { margin: 0 0 14px; font-size: 15px; line-height: 1.5; color: #4A4640; }

/* ---------- Desktop (900px+): two-column hero like /sponsors/b ----------
   Phones: .spd-top is display: contents, so the stacked layout above is untouched.
   Desktop: .spd-top becomes a wide dark grid. .spd-dark and .spd-band dissolve into
   it (display: contents): headline, intro and button on the left, the whole phone
   on the right, then all four current sponsors across the full width. The numbers
   band below goes wide too, four in a row. The page column stays 560px; these two
   bands break out of it to 1040px. */
.spd-top { display: contents; }
@media (min-width: 900px) {
  .spd .spd-top {
    --spd-wide: min(1040px, calc(100vw - 64px));
    display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.8fr); column-gap: 48px; /* phone centred in the right column */
    /* Empty 1fr rows above the headline and below the button centre the text on the phone */
    grid-template-areas: ". phone" "h2 phone" "lead phone" "cta phone" ". phone";
    grid-template-rows: 1fr auto auto auto 1fr; align-items: start;
    width: var(--spd-wide); margin: -28px 0 0 calc((100% - var(--spd-wide)) / 2); padding: 24px 0 20px;
    border-image: linear-gradient(#0E1C2E, #0E1C2E) fill 0 / / 0 100vmax; color: #FFFFFF;
  }
  .spd .spd-top.is-fill { min-height: var(--spd-hero-min); box-sizing: border-box; } /* set by sponsors-d.js */
  .spd .spd-top .spd-dark, .spd .spd-top .spd-band { display: contents; }
  .spd .spd-top .spd-band::after { content: none; }
  .spd .spd-top .sp-h2 { grid-area: h2; margin: 0; font-size: 68px; line-height: 1; }
  /* 22em + balance: breaks after "locals", two even lines */
  .spd .spd-top .sp-lead { grid-area: lead; margin: 20px 0 0; max-width: 22em; font-size: 21px; line-height: 1.45; text-wrap: balance; }
  .spd .spd-top .spd-hero { grid-area: cta; align-self: start; align-items: flex-start; gap: 10px; margin: 32px 0 0; }
  /* Desktop: orange button (on phones it stays white, under the orange ad slot) */
  .spd .spd-top .spd-hero__btn { min-height: 56px; padding: 0 34px; font-size: 18px; background: #FB4000; color: #FFFFFF; border-bottom: 5px solid #B32D00; box-sizing: border-box; }
  .spd .spd-top .spd-hero__from { font-size: 15px; }
  .spd .spd-top .spd-hero__btn:hover { background: #FF5A1F; color: #FFFFFF; }
  .spd .spd-top .spd-stage { grid-area: phone; align-self: center; margin: 0; justify-content: center; } /* centred like the text beside it */
  /* Whole phone at real proportions (about 2.1:1 tall): bottom bezel and corners back */
  .spd .spd-top .spd-shot { width: 200px; } /* ~425px tall: hero + sponsors + stats fit a 1280x800 laptop */
  .spd .spd-top .spd-shot__phone { border-bottom: 6px solid #0C0A09; border-radius: 34px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 30px 60px rgba(0, 0, 0, 0.45); }
  .spd .spd-top .spd-shot__screen { aspect-ratio: 666 / 1360; }
  /* All four sponsor ads in one row across the hero, no scrolling or edge fade */
  /* Numbers: same wide column, four across */
  .spd .spd-proofband { --spd-wide: min(1040px, calc(100vw - 64px)); width: var(--spd-wide); margin: -10px 0 8px calc((100% - var(--spd-wide)) / 2); padding: 22px 0 24px; } /* -10px: .sp-intro's flex gap, so the sand butts up to the dark hero */
  .spd .spd-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .spd .spd-stats .sp-mini b { font-size: 44px; }

  /* Wider page on desktop: the column grows to 1040px. Pricing and the three spot
     sections sit in an 880px lane; reading sections (FAQ, contact, etc.) in 760px. */
  .spd .sp-main { max-width: 1080px; }
  .spd .sp-picks, .spd .sp-picks__sub, .spd .spd-compare, .spd .sp-place { width: 100%; max-width: 880px; margin-inline: auto; box-sizing: border-box; }
  .spd .sp-sec, .spd .sp-become { width: 100%; max-width: 760px; margin-inline: auto; box-sizing: border-box; }
  /* Growth plan and Why become a sponsor, after Sante's /sponsors/b: open layouts
     instead of card grids, big tight left-aligned headlines. */
  .spd .sp-growth-wrap, .spd .sp-why { width: 100%; max-width: 880px; margin-inline: auto; box-sizing: border-box; }
  .spd .sp-growth-wrap .sp-h2, .spd .sp-why .sp-h2 { font-size: 44px; line-height: 1.04; letter-spacing: -0.035em; }

  /* Growth: full-bleed sand band; numbers, then three items hung on a hairline */
  .spd .sp-growth-wrap { margin-top: 24px; padding: 128px 0 120px; border-top: 0; border-image: linear-gradient(#FBF6F0, #FBF6F0) fill 0 / / 0 100vmax; }
  .spd .sp-growth__h { margin: 0 0 44px; }
  .spd .sp-growth { padding: 0; background: none; border-radius: 0; gap: 44px; }
  .spd .sp-growth__hd { align-items: flex-start; text-align: left; }
  .spd .sp-growth__kick { display: none; }
  .spd .sp-growth__nums { display: flex; align-items: center; gap: 28px; }
  .spd .sp-gnum { text-align: left; }
  .spd .sp-gnum__v { font-size: 56px; letter-spacing: -0.035em; }
  .spd .sp-plan { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; }
  .spd .sp-plan__item { position: relative; flex-direction: column; gap: 0; padding-top: 34px; border-top: 1.5px solid #E2D6C6; }
  .spd .sp-plan__ic { position: absolute; top: -22px; left: 0; width: 44px; height: 44px; border: 1.5px solid #E2D6C6; box-sizing: border-box; }
  .spd .sp-plan__ic svg { width: 20px; height: 20px; }
  .spd .sp-plan__txt { gap: 8px; }
  .spd .sp-plan__t { font-size: 20px; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; }
  .spd .sp-plan__d { font-size: 15px; line-height: 1.55; color: #4A4640; }
  /* Simple note under a hairline, not a boxed card */
  .spd .sp-guarantee--growth { margin: 44px 0 0; padding: 18px 0 0; border-top: 1px solid #E2D6C6; font-style: normal; font-size: 14px; color: #4A4640; }

  /* Why: split, headline and lead on the left, the benefits as an open list on the right */
  .spd .sp-why { margin-top: 0; padding: 136px 0 120px; border-top: 0; display: grid; grid-template-columns: 5fr 7fr; column-gap: 64px; row-gap: 14px; align-items: start;
    grid-template-areas: "h list" "lead list" "plus list" ". list"; grid-template-rows: auto auto auto 1fr; }
  .spd .sp-why > .sp-h2 { grid-area: h; }
  .spd .spd-why__lead { display: block; grid-area: lead; margin: 6px 0 0; font-size: 19px; line-height: 1.5; color: #2E2B27; }
  .spd .sp-why > .sp-grid1 { grid-area: list; gap: 30px; }
  /* The Plus note balances the left column: a soft panel under the lead */
  .spd .sp-why > .sp-plus { grid-area: plus; margin: 18px 0 0; padding: 16px 18px; border-radius: 12px; background: #FBF6F0; font-size: 14.5px; line-height: 1.5; }
  .spd .sp-benefit { flex-direction: row; gap: 18px; padding: 0; border: 0; border-radius: 0; }
  .spd .sp-benefit__ic { width: 44px; height: 44px; }
  .spd .sp-benefit__ic svg { width: 20px; height: 20px; }
  .spd .sp-benefit__txt { gap: 6px; }
  .spd .sp-benefit__t { font-size: 20px; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; }
  .spd .sp-benefit__d { font-size: 15px; line-height: 1.55; color: #4A4640; }

  /* Contact: the phone card's single column (pitch, form, or, WhatsApp, reply line,
     phone and email), 600px wide on a full-width dark band. */
  .spd .sp-become { max-width: 600px; padding: 64px 0 12px; }
  /* Dark background runs the full page width; the content stays in the 600px column */
  .spd .sp-cta { padding: 128px 0 120px; gap: 16px; border-radius: 0; border-image: linear-gradient(#0E1C2E, #0E1C2E) fill 0 / / 0 100vmax; }
  .spd .sp-cta__h { font-size: 44px; line-height: 1.04; letter-spacing: -0.03em; }
  .spd .sp-cta__p { font-size: 18px; }
  .spd .sp-cta__btns .sp-wa { min-height: 54px; }
  /* Fine print lines up with the contact card's edges */
  .spd .sp-foot { box-sizing: border-box; width: min(1040px, calc(100vw - 64px)); max-width: none; margin-inline: calc((100% - min(1040px, calc(100vw - 64px))) / 2); padding-top: 24px; text-align: left; } /* same width as the hero, so the note runs in fewer lines */
  /* Pricing: 760px lane, taller cards with more air and larger type */
  .spd .spd-compare { max-width: 760px; gap: 10px; padding-bottom: 40px; }
  .spd .sp-picks { padding-top: 24px; justify-content: center; }
  /* Title and intro centred over the centred switch and cards */
  .spd .sp-picks__h, .spd .sp-picks__sub { text-align: center; }
  .spd .sp-picks__h { font-size: 40px; }
  .spd .sp-picks__sub { max-width: 34em; text-wrap: balance; } /* ~2 even lines, not one long one */
  /* Spot sections: phone(s) left, prices right */
  /* Trial compare section: three across in the 1040px column, dark card raised */
  .spd .spd-plans { display: block; width: 100%; max-width: 1040px; margin-inline: auto; padding: 24px 0 40px; border-top: 0; }
  /* Desktop: the three-across panel replaces the original Pick your spot cards
     (still in the page for phones; git tag sponsors-d-before-compare-swap = old desktop) */
  .spd .sp-intro > #spots, .spd .sp-intro > .sp-picks__sub, .spd .sp-intro > .spd-compare { display: none; }
  /* ...and the three long spot sections: the panel shows all three side by side (phones keep them) */
  .spd .sp-place { display: none; }
  .spd .spd-plans__h { font-size: 36px; margin-bottom: 10px; }
  .spd .spd-plans__sub { margin-bottom: 26px; }
  /* Smaller Monthly / Season switch on desktop */
  .spd .spd-plans .spd-bill { max-width: 280px; }
  .spd .spd-plans .spd-bill button { min-height: 34px; font-size: 13.5px; }
  .spd .spd-plans .spd-bill__save { font-size: 11.5px; }
  /* Desktop: "cancel anytime" / "Book by Oct 15" sits right under the switch (as on phones) */
  .spd .spd-plans__ask { margin-top: 32px; }
  /* Both Spots column ~12% wider and taller than its neighbours so it pops */
  .spd .spd-plans__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr) minmax(0, 1fr); gap: 20px; align-items: center; }
  .spd .spd-plan { padding: 32px 18px 22px; }
  .spd .spd-plan__left { margin: 18px -18px -22px; }
  /* Each reach line stays on one line, even in Spanish at 900px */
  .spd .spd-plan__reach { font-size: 13.5px; }
  .spd .spd-plan__m span { white-space: nowrap; }
  .spd .spd-plan--best { padding-block: 52px 36px; box-shadow: 0 14px 34px rgba(251, 64, 0, 0.2); }
  .spd .spd-plan--best .spd-plan__left { margin-bottom: -36px; margin-top: 24px; }
  .spd .spd-plan--best .spd-plan__price b { font-size: 56px; }
  .spd .spd-plan__price b { font-size: 50px; }

  /* Spot sections: prices and buttons left, full phone(s) right (the hero's rhythm) */
  .spd .sp-stack { flex-direction: row-reverse; align-items: flex-start; justify-content: center; gap: 48px; } /* phone lines up with the top of the prices */
  /* Full phones on desktop: bottom bezel and corners back, no fade, taller screen */
  .spd .sp-phone__frame { border-bottom: 6px solid #0C0A09; border-radius: 28px; box-shadow: 0 10px 24px rgba(31, 24, 18, 0.14); }
  .spd .sp-phone__frame::after { content: none; }
  /* Desktop shows the whole section at once: no sticky section header or season tabs
     (on phones they stick). A pinned white header was cutting across the phone's shadow. */
  .spd .sp-head { position: static; margin: 0; padding: 0; background: none; }
  .spd .sp-tog { position: static; box-shadow: none; }
  .spd .spd-screen--hero, .spd .sp-phone__screen--mid { aspect-ratio: 666 / 1360; }
  /* Middle shot scrolled less so it fills the taller screen (image is 217cqw tall) */
  .spd .sp-phone__screen--mid img { top: -20cqw; }
  .spd .sp-phone__screen--mid .sp-adslot--mid { top: 120.56cqw; }
  /* Every desktop phone matches the hero's: 200px wide, same screen height */
  .spd .sp-stack > .sp-phone { width: 200px; }
  .spd .sp-stack > .sp-phones { flex: none; width: 414px; } /* two 200px phones + 14px gap */
  .spd .sp-phones .sp-phone { max-width: none; }
  .spd .sp-stack > .sp-pricecol { flex: 1; max-width: 520px; }
}

/* Phones: the phone leads the hero, then the headline. Its fade and divider move with it. */
@media (max-width: 899px) {
  .spd-dark .spd-stage { order: -1; position: relative; margin: 0 0 8px; }
  .spd-dark .spd-stage::after { content: ''; position: absolute; left: calc(50% - 50vw); right: calc(50% - 50vw); bottom: 0; height: 35px; background: linear-gradient(rgba(14, 28, 46, 0) 0, rgba(14, 28, 46, 0.12) 10px, rgba(14, 28, 46, 0.45) 20px, rgba(14, 28, 46, 0.85) 28px, #0E1C2E 34px, #22364F 34px, #22364F 35px); pointer-events: none; }
  /* The dark hero (phone, headline, button) fills the first screen: sponsors-d.js splits the
     spare height (--spd-hero-fill) above the phone and below the button. The band dissolves so
     its sponsor strip sits on white under the hero, above the numbers. */
  .spd .spd-dark .spd-shot { width: 200px; } /* same size and crop as the Top of Feed phone */
  .spd .spd-dark .spd-stage { margin-top: var(--spd-hero-fill, 0px); }
  .spd .spd-band { display: contents; }
  .spd .spd-band .spd-hero { align-self: stretch; align-items: flex-start; margin: -23px 0 0; padding: 20px 0 16px; border-image: linear-gradient(#0E1C2E, #0E1C2E) fill 0 / / 0 100vmax; }
  /* "See our reach": centred at the bottom of the dark hero; the spare height sits above it */
  .spd .spd-hero__reach { display: inline-flex; gap: 6px; align-self: flex-start; margin-top: calc(8px + var(--spd-hero-fill, 0px)); padding: 6px 0; color: rgba(255, 255, 255, 0.78); font-size: 14.5px; font-weight: 600; text-decoration: none; }
  .spd .spd-hero__reach:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; border-radius: 6px; }
  /* Numbers first (reach backs the headline), then sponsors (who else is on it), then prices */
  .spd .sp-intro > * { order: 2; }
  .spd .sp-intro > .spd-proofband { order: 0; margin-top: -10px; }
  .spd .spd-proofband__h { display: block; margin: 20px 0 6px; line-height: 1.05; letter-spacing: -0.02em; } /* same as "Pick your spot" */
  /* The "In the 6 months..." note sits under the title, before the numbers */
  .spd .spd-stats__cap { order: -1; margin-top: -8px; padding-top: 0; border-top: 0; font-size: 14px; }
  .spd .spd-proofband__h { order: -2; }
  /* Our reach + Current sponsors read as one sand panel: the strip continues the numbers'
     band (negative margins close the flex gaps, the sand fill runs edge to edge) */
  .spd .spd-band__l { margin: 8px 0 -6px; color: #7A756D; }
  .spd .spd-ads-wrap { margin: 0; }
  .spd .sp-intro > .spd-proofband { margin-bottom: 18px; padding-bottom: 26px; border-bottom: 0; }
  .spd .spd-ads li { flex-basis: min(82%, 440px); } /* large, with a peek of the next banner */
  .spd .spd-ads-wrap::after { top: -2px; bottom: -2px; background: linear-gradient(90deg, rgba(251, 246, 240, 0), #FBF6F0 88%); }
  /* Solid brand orange with a darker orange bottom edge: the brightest thing on the navy hero, pressable */
  .spd .spd-hero__btn { background: #FB4000; color: #FFFFFF; border-bottom: 5px solid #B32D00; box-sizing: border-box; }
  .spd .spd-hero__btn:hover { background: #FF5A1F; color: #FFFFFF; }
  .spd .spd-hero__btn:active { border-bottom-width: 2px; transform: translateY(3px); }
  /* Spot headers: kicker and name on the left, chip on the right, then the subtitle across
     the full width underneath (one line where it fits) */
  .spd .sp-head { display: grid; grid-template-columns: 1fr auto; column-gap: 12px; row-gap: 3px; align-items: start; }
  .spd .sp-head__txt { display: contents; }
  .spd .sp-head .sp-kicker { grid-column: 1; grid-row: 1; }
  .spd .sp-head .sp-h3 { grid-column: 1; grid-row: 2; }
  .spd .sp-head > .sp-chip { grid-column: 2; grid-row: 1 / 3; align-self: center; margin-top: 0; }
  .spd .sp-head .sp-sub { grid-column: 1 / -1; grid-row: 3; }
  /* A step larger on phones: section titles and body copy */
  .spd .sp-picks__h, .spd .spd-proofband__h, .spd .sp-growth-wrap .sp-h2, .spd .sp-why .sp-h2 { font-size: 34px; }
  .spd .sp-h3 { font-size: 28px; }
  .spd .sp-cta__h { font-size: 36px; }
  .spd .spd-dark .sp-lead, .spd .sp-cta__p { font-size: 17px; }
  .spd .sp-picks__sub, .spd .sp-benefit__t { font-size: 16.5px; }
  .spd .spd-stats__cap, .spd .sp-plan__d, .spd .sp-benefit__d, .spd .sp-plus { font-size: 15px; }
  .spd .sp-plan__t { font-size: 16.5px; }
}

/* Hero and contact panel in deep navy (#0E1C2E, from the Los Cabos banner) so the orange ad slot and buttons stand out */
.spd .sp-cta { background: #0E1C2E; }
.spd .sp-cta .sp-form__in { background: #081422; border-color: #2A4260; }
.spd .sp-cta .sp-form__in:focus { border-color: #FB4000; }
/* Cool greys on navy (the warm beige greys came from the brown version) */
body.spd .header__subtitle { color: #A9B7C8; }
.spd-dark .sp-lead { color: #CAD5E2; }
.spd .spd-or, .spd .spd-cta__side > .spd-cta__or { color: #8C9BB0; }
.spd .sp-cta .sp-cta__p { color: #E3EAF2; }
.spd .sp-cta .sp-form__l { color: #C5D1DF; }
.spd .sp-cta .sp-form__in::placeholder { color: #7F90A6; }
.spd .sp-cta .spd-form__reply { color: #A9B7C8; }
.spd .sp-cta .sp-cta__num { color: #E3EAF2; }
.spd .sp-cta .sp-form__ok { background: #081422; }
.spd .sp-cta .sp-form__btn { min-height: 56px; border: 0; border-bottom: 5px solid #B32D00; border-radius: 12px; background: #FB4000; color: #FFFFFF; font-size: 18px; font-weight: 700; box-sizing: border-box; } /* same pressable orange as the hero's Pick your spot */
.spd .sp-cta .sp-form__btn:hover { filter: none; background: #FF5A1F; }
.spd .sp-cta .sp-form__btn:active { border-bottom-width: 2px; transform: translateY(3px); }

/* Desktop: section titles and intros a step under the hero (68px / 21px) */
@media (min-width: 900px) {
  .spd .spd-plans__h, .spd .sp-growth-wrap .sp-h2, .spd .sp-why .sp-h2, .spd .sp-cta__h { font-size: 56px; line-height: 1.02; letter-spacing: -0.035em; }
  .spd .spd-plans__h { margin-bottom: 14px; }
  .spd .spd-plans__sub, .spd .spd-why__lead, .spd .sp-cta__p { font-size: 19px; line-height: 1.5; }
}

/* Laptops (short windows): the whole Pick your spot panel (title, switch, cards, WhatsApp /
   Email) fits one screen. Smaller phones and prices, tighter spacing, no one-line descriptions.
   Tall desktop monitors keep the full-size panel above. */
@media (min-width: 900px) and (max-height: 860px) {
  .spd .spd-plans { padding: 24px 0 24px; }
  .spd .spd-plans__h, .spd .sp-intro .spd-proofband__h { font-size: 44px; } /* laptop windows: both titles 44px */
  .spd .spd-plans__h { margin-bottom: 8px; }
  .spd .spd-plans__sub { margin-bottom: 14px; font-size: 17px; }
  .spd .spd-plans__bill { margin-bottom: 18px; }
  .spd .spd-plan { padding: 22px 18px 18px; }
  .spd .spd-plan--best { padding-block: 30px 22px; }
  .spd .spd-plan__desc { display: none; }
  .spd .spd-minis-img { width: auto; height: 96px; margin: 10px auto 2px; }
  .spd .spd-plan__price { margin-top: 10px; }
  .spd .spd-plan__price b { font-size: 40px; }
  .spd .spd-plan--best .spd-plan__price b { font-size: 46px; }
  .spd .spd-plan__reach { margin-top: 8px; padding-top: 8px; }
  .spd .spd-plan__left { margin: 12px -18px -18px; padding: 9px 0 10px; }
  .spd .spd-plan--best .spd-plan__left { margin-top: 14px; margin-bottom: -22px; }
  .spd .spd-plans__ask { margin-top: 18px; }
}

/* Phones: each Pick your spot card opens into its details, as one connected card.
   The open card shows only the Month or Season box (follows the switch) and a line to flip it. */
.spd-acc__hint, .spd-acc__switch { display: none; }
@media (max-width: 899px) {
  .spd .spd-acc__hint { display: block; margin: 4px 0 -4px; text-align: center; font-size: 13.5px; color: #7A756D; }
  .spd .spd-acc { scroll-margin-top: 12px; }
  .spd .spd-row__go span[aria-hidden] { display: inline-block; transform: rotate(90deg); transition: transform 0.15s; }
  .spd .spd-acc.is-open .spd-row__go span[aria-hidden] { transform: rotate(-90deg); }
  .spd .spd-acc.is-open .spd-row { border-bottom: 0; border-radius: 14px 14px 0 0; box-shadow: none; }
  .spd .spd-acc__body { padding: 2px 16px 18px; border: 1px solid #E5DACB; border-top: 1px solid #EFE4D6; border-radius: 0 0 14px 14px; background: #FFFFFF; }
  .spd .spd-acc--best .spd-acc__body { border: 2px solid #FB4000; border-top: 1px solid #F3C0AE; background: #FBF6F0; box-shadow: 0 10px 18px rgba(251, 64, 0, 0.12); }
  .spd .spd-acc .sp-place { padding: 0; border-top: 0; gap: 12px; }
  .spd .spd-acc .sp-head { position: static; display: block; margin: 12px 0 0; padding: 0; background: none; }
  .spd .spd-acc .sp-head .sp-kicker, .spd .spd-acc .sp-head .sp-h3, .spd .spd-acc .sp-head > .sp-chip { display: none; }
  .spd .spd-acc .sp-head .sp-sub { text-align: center; }
  .spd .spd-acc .spd-or { display: none; }
  /* Open card keeps only what the header doesn't say: how you pay, the per-month rate, the offer */
  .spd .spd-acc .sp-price-lg, .spd .spd-acc .sp-price-row, .spd .spd-acc .sp-metrics { display: none; }
  .spd .spd-acc .sp-card__top { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; }
  body:not(.spd-bill-season) .spd-acc .sp-card--season, body.spd-bill-season .spd-acc .sp-card--mo { display: none; }
  .spd .spd-acc__switch { display: block; width: 100%; margin: 6px 0 0; padding: 8px; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 600; color: #C43300; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
  .spd .spd-acc__switch:focus-visible { outline: 2px solid #1F1D1A; outline-offset: 2px; border-radius: 6px; }
}

/* Phones: closed cards carry one value number (ad views, following Monthly/Season); the
   switch sticks to the top while open cards scroll under it; a next step under the cards. */
@media (max-width: 899px) {
  .spd .spd-row__reach { grid-area: reach; display: flex; flex-direction: column; gap: 2px; margin-top: 6px; font-size: 13.5px; color: #4A4640; }
  .spd .spd-row__m { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
  .spd .spd-row__m:first-child { font-weight: 600; }
  .spd .spd-row__eye { flex: none; }
  .spd .spd-bill-bar { position: sticky; top: 0; z-index: 6; display: flex; justify-content: center; margin: 0 -20px; padding: 8px 20px; background: #FFFFFF; }
  .spd .spd-bill-bar .spd-bill { margin-top: 0; }
  .spd .spd-acc__ask { margin: 10px 0 0; text-align: center; font-size: 15px; font-weight: 600; color: #1F1D1A; }
  .spd .spd-acc__askrow { margin-top: 2px; }
}
/* Desktop: the Pick your spot button lands with the panel heading in view */
@media (min-width: 900px) { .spd #compare { scroll-margin-top: 4px; } }

/* Phones: one WhatsApp/Email bar for Pick your spot, floating at the bottom of the screen while
   the cards are in view and settling under "Not sure which spot?" at the end. The per-card
   buttons and the repeated projection line give way to it. */
.spd-acc__proj { display: none; }
@media (max-width: 899px) {
  .spd .spd-acc .sp-askrow, .spd .spd-acc .sp-projnote { display: none; }
  .spd .spd-pickbar { position: sticky; bottom: 0; z-index: 6; margin: 2px -20px 0; padding: 10px 20px calc(10px + env(safe-area-inset-bottom)); background: #FFFFFF; box-shadow: 0 -8px 16px rgba(31, 29, 26, 0.06); }
  .spd .spd-acc__proj { display: block; margin: 4px 0 0; font-size: 12.5px; line-height: 1.45; color: #7A756D; text-align: center; }
}

/* Switch, hint, cards and the line under them: one column with the same spacing as before */
.spd-compare__cards { display: flex; flex-direction: column; gap: 8px; }

/* Phones: the navy contact panel runs edge to edge, like the hero */
@media (max-width: 899px) {
  .spd .sp-cta { border-radius: 0; padding: 44px 0 40px; border-image: linear-gradient(#0E1C2E, #0E1C2E) fill 0 / / 0 100vmax; }
}

/* Phones: open cards list what you get with the way you pay, instead of a near-empty price box */
.spd-terms { display: none; }
@media (max-width: 899px) {
  .spd .spd-acc .sp-panel { display: none; }
  .spd .spd-terms { display: grid; gap: 7px; margin: 4px 0 0; padding: 0; list-style: none; font-size: 15px; line-height: 1.4; color: #1F1D1A; }
  .spd .spd-terms li { display: flex; gap: 9px; }
  .spd .spd-terms li::before { content: '✓'; flex: none; font-weight: 700; color: #1F7A3E; }
  .spd .spd-acc__switch { margin: 6px 0 0; padding: 6px 0; text-align: left; }
}

/* Desktop: one proof panel under the hero, like phones: Our reach title, the 6-month note,
   four numbers, then the current sponsors at a readable size (two per row). */
@media (min-width: 900px) {
  .spd .spd-proofband { padding: 72px 0 80px; gap: 24px; border-bottom: 0; }
  .spd .spd-proofband__h { display: block; order: -2; margin: 0; font-size: 56px; line-height: 1.02; letter-spacing: -0.035em; }
  .spd .spd-stats__cap { order: -1; margin: -12px 0 8px; padding: 0; border: 0; font-size: 19px; line-height: 1.5; color: #4A4640; }
  .spd .spd-proofband .spd-band__l { margin: 24px 0 -8px; color: #7A756D; }
  .spd .spd-proofband .spd-ads { margin: 0; padding: 0; overflow: visible; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .spd .spd-proofband .spd-ads li { min-width: 0; }
  .spd .spd-proofband .spd-ads-wrap::after { content: none; }
}

/* Desktop: "See our reach" under the hero button too, as on phones */
@media (min-width: 900px) {
  .spd .spd-top .spd-hero__proof { display: block; margin-top: 2px; font-size: 15px; font-weight: 600; color: rgba(255, 255, 255, 0.78); }
  .spd .spd-top .spd-hero__reach { display: inline-flex; gap: 6px; margin-top: 14px; padding: 4px 0; color: rgba(255, 255, 255, 0.78); font-size: 15px; font-weight: 600; text-decoration: none; }
  .spd .spd-top .spd-hero__reach:hover { color: #FFFFFF; }
  .spd .spd-top .spd-hero__reach:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; border-radius: 6px; }
}

/* Both Spots card: its saving against buying the two spots separately */
.spd-plan__bundle { margin-top: 4px; font-size: 13px; font-weight: 600; color: #4A4640; }

/* Hero image: a hand holding a phone with the feed (transparent PNG/WebP). The photo's wrist
   ends in a hard edge, so the image sits in the hero's bottom-right corner: the wrist runs off the
   bottom (cut by the hero's edge) and off the right side of the screen. The box crops the lower
   wrist (aspect 900/1000), so more of the box is phone. */
.spd-hand { margin: 0; overflow: hidden; aspect-ratio: 900 / 1000; }
.spd-hand img { display: block; width: 100%; height: auto; }
@media (max-width: 899px) {
  /* Bigger on phones; shorter phones scale it down so See our reach stays on the first screen */
  .spd-hand { --spd-hw: min(94vw, 400px, max(220px, calc((100svh - 392px) * 0.9))); width: var(--spd-hw); }
  /* Phone hand image is 900x860 with the whole hand inside it: 1.163x wide so the phone keeps its size, and shifted so the phone (64.4% across) is centred on the screen; anything past the left edge is cut by the screen, not the image */
  .spd .spd-dark .spd-hand { width: calc(1.163 * var(--spd-hw)); aspect-ratio: 900 / 860; flex: none; margin-left: calc(50vw - 0.749 * var(--spd-hw)); }
  .spd .spd-dark .spd-stage { justify-content: flex-start; margin-left: -20px; margin-bottom: 0; } /* stage starts at the screen's left edge */
  /* No fade over the image: just the divider line at the hero's edge */
  .spd-dark .spd-stage::after { left: 0; right: -20px; height: 1px; background: #22364F; } /* stage starts at the screen's left edge */
}
@media (min-width: 900px) {
  .spd .spd-top .spd-stage { align-self: end; justify-content: flex-start; margin: 0 0 -20px calc(-1 * clamp(0px, (100vw - 900px) * 0.75, 90px)); } /* -20px: the hero's bottom padding; the hand starts just past the text and runs off the hero's bottom */
  .spd .spd-top .spd-hand { flex: none; width: min(45vw, 640px, calc((100vh - 271px) * 1.0588)); aspect-ratio: 900 / 850; } /* height cap: the hero ends early enough that the Our reach heading shows on the first screen */ /* zoomed in: the box crops the image's bottom, so the arm leaves through the hero's bottom edge */
}

/* Hero: rotating word (orange, soft fade); the full sentence is kept for screen readers */
.spd-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.spd-rot { display: inline-block; color: #FB4000; transition: opacity 0.25s ease; } /* last word of the headline, so changing it moves nothing */
.spd-rot.is-out { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .spd-rot { transition: none; } }

/* Footnote: continues the navy contact panel, a shade darker, with a hairline above it, full
   width and down to the bottom of the page */
.spd .sp-foot { margin-top: -12px; padding-top: 22px; padding-bottom: 40px; color: #A9B7C8; background: #0A1626; box-shadow: 0 0 0 100vmax #0A1626; clip-path: inset(0 -100vmax -100vmax); border-top: 1px solid #22364F; border-image: linear-gradient(#22364F, #22364F) 1 0 0 0 / 1px 0 0 0 / 0 100vmax; } /* shadow + outset paint full width without widening the page */

/* Short single-line labels for the growth numbers; phones only */
.spd .sp-gnum__s, .spd .sp-growth__unit { display: none; }

/* Growth numbers, phones: both figures on one top line with the arrow between, each label a
   bold line plus a quiet sub-line, so uneven label lengths no longer push the numbers apart */
@media (max-width: 899px) {
  .spd .sp-growth__nums { align-items: start; }
  .spd .sp-growth__nums .sp-arrow { align-self: start; margin-top: 8px; }
  .spd .sp-gnum__v { font-size: 34px; letter-spacing: -0.03em; }
  .spd .sp-gnum__l { display: none; }
  .spd .sp-growth__unit { display: block; margin: 4px 0 -6px; text-align: center; font-size: 15px; font-weight: 600; color: #1F1D1A; }
  .spd .sp-gnum__s { display: block; font-size: 14px; font-weight: 600; color: #1F1D1A; }
  .spd .sp-guarantee--growth { margin: 18px 0 0; font-style: normal; text-wrap: wrap; }
  .spd .sp-guarantee--growth span { flex: 1; }
}

/* Desktop: Our reach shows on the first screen, so the hero drops its visitor line and See our reach link (class set by sponsors-d.js) */
.spd .spd-top.is-roomy .spd-hero__proof, .spd .spd-top.is-roomy .spd-hero__reach { display: none; }

/* Narrow desktops: the zoomed-in hand can run past the screen's right edge; clip it there instead of scrolling sideways (clip keeps sticky bars working) */
.spd .sp { overflow-x: clip; } /* on the full-width .sp wrapper, not .sp-main: main is narrower than the screen on wide displays and would clip the full-width bands */

/* Brand orange #FB4000 on this page: overrides the shared sponsors.css rules that still use the old orange */
.spd .header__currency-sign, .spd .sp-jump b, .spd .sp-card__season, .spd .sp-gnum__v--hi, .spd .sp-ast { color: #FB4000; }
.spd .sp-year { border-top-color: #FB4000; }
.spd .sp-guarantee::before, .spd .sp-projnote::before, .spd .sp-tog__s--proj::after { color: #FB4000; }
.spd .sp-cta__pill { background: #FB4000; }
.spd .sp .sp-form__in:focus { border-color: #FB4000; }
.spd .sp-chip { background: linear-gradient(100deg, #D63800 0%, #C43300 100%); } /* white text needs the darker orange */
.spd .sp-tog button[data-season="high"][aria-pressed="true"] { background: linear-gradient(100deg, #FB4000 0%, #D63800 100%); }
.spd .sp-eyebrow, .spd .sp-towns { color: #C43300; }
.spd .sp-bar__s { color: #FF7A45; }
.spd .sp-kicker, .spd .sp-save, .spd .sp-promo, .spd .sp-plus b { color: #C43300; }

/* Plain links turn brand orange on hover; :where keeps this below every button's own hover rule (green WhatsApp stays green) */
:where(.spd) .sp a:hover { color: #FB4000; }
.spd .sp .sp-wa:hover, .spd .sp .sp-ask:hover, .spd .sp .sp-bar__btn:hover, .spd .sp .sp-wa:focus, .spd .sp .sp-ask:focus { color: #10301C; } /* green WhatsApp buttons never take the orange link hover */
/* Coral tints of #FB4000, replacing the old orange's peach tints from sponsors.css */
.spd .sp-save, .spd .sp-ic, .spd .sp-benefit__ic, .spd .sp-mini__ic { background-color: #FCE5DD; }
@media (max-width: 899px) { .spd .sp-growth { background: linear-gradient(135deg, #F9D3C6 0%, #FCE5DD 45%, #FDEFEA 100%); } } /* phones only: the desktop growth section has no panel */
.spd .sp-form__err { color: #F7A68A; }
.spd .sp-tog button[data-season="high"][aria-pressed="true"] .sp-tog__s { color: #FFE6DD; }