/* ==========================================================================
   Saving Sprint — design layer (loaded after app.css + modernist.css).
   1. re-points the old theme's variables at the Saving Sprint palette, so every
      page (designed or not) takes the new colours, fonts and radii;
   2. the design's own components (sp-*) for the header, footer, home, store,
      category, guide and about pages.
   ========================================================================== */

:root {
  /* Saving Sprint palette */
  --sp-night: #150f23;
  --sp-ink: #1f1633;
  --sp-line: #362d59;
  --sp-mute: #79628c;
  --sp-soft: #bdb8c0;
  --sp-purple: #6a5fc1;
  --sp-deep: #422082;
  --sp-lime: #c2ef4e;
  --sp-pink: #fa7faa;
  --sp-border: #e5e7eb;
  --sp-border-2: #cfcfdb;
  --sp-tint: #f7f6fa;
  --sp-display: "Archivo", "Rubik", system-ui, sans-serif;
  --sp-wrap: 1450px;
  --sp-pad: clamp(16px, 4vw, 32px);

  /* the old theme's variables, re-pointed */
  --color-bg: #fff;
  --color-surface: var(--sp-tint);
  --color-text: var(--sp-ink);
  --color-accent: var(--sp-deep);
  --color-accent-2: var(--sp-purple);
  --color-divider: var(--sp-border);
  --color-neutral-100: #f7f6fa;
  --color-neutral-200: #efedf3;
  --color-neutral-300: #e5e7eb;
  --color-neutral-400: #cfcfdb;
  --color-neutral-500: #bdb8c0;
  --color-neutral-600: #9a90a6;
  --color-neutral-700: #79628c;
  --color-neutral-800: #4d4160;
  --color-neutral-900: #2a2142;
  --color-accent-100: #f3f0fb;
  --color-accent-200: #e6e0f6;
  --color-accent-300: #cfc4ee;
  --color-accent-400: #a99ae0;
  --color-accent-500: #6a5fc1;
  --color-accent-600: #422082;
  --color-accent-700: #351a69;
  --color-accent-800: #2a1452;
  --color-accent-900: #1f1633;
  --font-heading: var(--sp-display);
  --font-display: var(--sp-display);
  --font-heading-weight: 800;
  --font-body: "Rubik", -apple-system, system-ui, "Segoe UI", Helvetica, Arial, sans-serif;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --dw-wrap: var(--sp-wrap);
  --dw-pad: var(--sp-pad);
}

/* ---------- base ---------- */
body.dw { font-family: var(--font-body); color: var(--sp-ink); background: #fff; -webkit-font-smoothing: antialiased; }
.dw ::selection { background: var(--sp-lime); color: var(--sp-ink); }
.dw h1, .dw h2, .dw h3 { font-stretch: 80%; }
.dw .sp-wrap { max-width: var(--sp-wrap); margin: 0 auto; padding: 0 var(--sp-pad); }

/* buttons: ink on light, white on dark (as in the design) */
.dw .btn { border-radius: 8px; font-family: var(--font-body); font-weight: 700; font-size: 14px; letter-spacing: .2px; text-transform: uppercase; }
.dw .btn-primary { background: var(--sp-ink); color: #fff; border: 1px solid var(--sp-ink); }
.dw .btn-primary:hover { background: var(--sp-deep); border-color: var(--sp-deep); color: #fff; }
.dw .btn-primary:active { background: var(--sp-night); }
.dw .btn-secondary { background: transparent; color: var(--sp-ink); border: 1px solid var(--sp-border-2); }
.dw .btn-secondary:hover { border-color: var(--sp-ink); background: transparent; }
.dw .tag { border-radius: 4px; }

/* shared bits */

 .dw .sp-label { color: var(--sp-mute); }
.dw .sp-label { margin: 0 0 16px; font-size: 10px; font-weight: 600; letter-spacing: .25px; text-transform: uppercase; }

/* ---------- header ---------- */
.dw .dw-hdr { background: var(--sp-night); border-bottom: 1px solid var(--sp-line); color: #fff; }
.dw .dw-hdr__in { max-width: var(--sp-wrap); padding: 0 var(--sp-pad); height: 68px; gap: 28px; }
.dw .sp-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: #fff; flex-shrink: 0; }
.dw a.sp-logo, .dw a.sp-logo:hover { color: #fff; text-decoration: none; }
.dw .sp-mark { position: relative; width: 30px; height: 20px; flex: none; background: var(--sp-lime); clip-path: polygon(0 0, 68% 0, 100% 50%, 68% 100%, 0 100%); }
.dw .sp-mark i { position: absolute; left: 58%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--sp-night); }
.dw .sp-logo__img { display: block; height: 44px; width: auto; max-width: 100%; }

.dw .sp-logo__text { font-family: var(--sp-display); font-stretch: 84%; font-weight: 800; font-size: 23px; letter-spacing: -.4px; line-height: 1; white-space: nowrap; }
.dw .dw-nav { gap: 22px; }
.dw .dw-nav__link { padding: 8px 0; font-size: 15px; font-weight: 500; color: var(--sp-soft); border-bottom: 0; }
.dw .dw-nav__link:hover, .dw .dw-nav__link.is-active { color: #fff; border-bottom-color: transparent; }
.dw .dw-nav__drop { background: var(--sp-night); border-color: var(--sp-line); border-radius: 8px; overflow: hidden; }
.dw .dw-nav__drop a { color: #fff; }
.dw .dw-nav__drop a:hover { background: var(--sp-ink); color: var(--sp-lime); }
.dw .dw-search { background: rgba(255,255,255,.08); border: 1px solid var(--sp-line); border-radius: 8px; height: 40px; color: var(--sp-soft); }
.dw .dw-search:hover, .dw .dw-search:focus-within { border-color: var(--sp-mute); background: rgba(255,255,255,.14); }
.dw .dw-search__input { color: #fff; font-family: var(--font-body); }
.dw .dw-search__input::placeholder { color: var(--sp-soft); }
.dw .dw-search__kbd { font-family: Monaco, Menlo, monospace; border: 1px solid #3f3849; border-radius: 4px; color: var(--sp-soft); opacity: 1; }
.dw .dw-lang__btn { height: 40px; border: 1px solid var(--sp-line); border-radius: 8px; color: #fff; font-family: var(--font-body); font-weight: 600; }
.dw .dw-lang__btn:hover { border-color: var(--sp-mute); }
.dw .dw-lang__menu { border-radius: 8px; overflow: hidden; border-color: var(--sp-border); }
.dw .dw-lang__menu a:hover { background: var(--sp-tint); color: var(--sp-ink); }
.dw .dw-lang__menu a.is-active { color: var(--sp-deep); }
.dw .dw-hdr__cta { height: 40px; background: #fff; color: var(--sp-ink); border-color: #fff; }
.dw .dw-hdr__cta:hover { background: var(--sp-lime); border-color: var(--sp-lime); color: var(--sp-ink); }
.dw .dw-burger { background: #fff; color: var(--sp-ink); border: 0; border-radius: 8px; height: 40px; }
.dw .dw-sp { border-top: 1px solid var(--sp-line); }
.dw .dw-sp .tag-outline { border-radius: 6px; }

/* ---------- home: hero ---------- */

/* ---------- bands ---------- */

/* featured slides (dark) */

/* store tiles + A–Z */

/* guide cards */

/* category rows */

/* latest list */

/* old home pieces that stay (guide rail, disclosure note): new skin */
.dw .dw-head { border-top: 0; }
.dw .dw-head h2 { font-family: var(--font-body); font-stretch: 100%; font-weight: 500; }
.dw .dw-kicker { color: var(--sp-mute); font-weight: 500; letter-spacing: .6px; }
.dw .dw-rail { scrollbar-width: none; }
.dw .dw-rcard img, .dw .dw-photo { border-radius: 12px; }
.dw .dw-rail__btn { border-radius: 8px; border-color: var(--sp-border-2); }
.dw .dw-rail__btn:hover:not(:disabled) { border-color: var(--sp-ink); }
.dw .dw-note { background: var(--sp-night); color: #fff; }
.dw .dw-note__label { display: inline-block; background: var(--sp-pink); color: var(--sp-ink); font-weight: 700; font-size: 12px; letter-spacing: .4px; text-transform: uppercase; padding: 4px 12px; border-radius: 12px 12px 12px 2px; }
.dw .dw-note__lead { color: #fff; font-family: var(--sp-display); font-stretch: 80%; }
.dw .dw-note__body { color: var(--sp-soft); }

/* ---------- store page ---------- */

/* offer rows: badge | title + detail | action — the first one is the dark lead card */
.dw .ticket { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 22px 0; border-bottom: 1px solid var(--sp-border); }
.dw .ticket .ticket__logo { display: none; }
.dw .ticket .dw-kind { font-size: 10px; font-weight: 600; letter-spacing: .25px; text-transform: uppercase; padding: 3px 8px; border-radius: 4px; border: 1px solid var(--sp-border-2); background: #fff; color: var(--sp-ink); }
.dw .ticket .dw-kind--code { background: var(--sp-ink); color: #fff; border-color: var(--sp-ink); }
.dw .ticket__store { color: var(--sp-mute); font-weight: 400; font-size: 14px; }
.dw .ticket__title { font-family: var(--font-body); font-stretch: 100%; font-size: 17px; font-weight: 600; line-height: 1.35; }
.dw .ticket__desc, .dw .ticket__stats { color: var(--sp-mute); }
.dw .ticket__discount { color: var(--sp-deep); font-family: var(--sp-display); font-stretch: 80%; }
.dw .ticket__cta { min-height: 44px; height: auto; border-radius: 8px; font-family: var(--font-body); font-weight: 700; font-size: 13px; letter-spacing: .2px; text-transform: uppercase; background: transparent; color: var(--sp-ink); border: 1px solid var(--sp-ink); }
.dw .ticket__cta:hover { background: var(--sp-ink); color: #fff; border-color: var(--sp-ink); }
.dw .ticket__cta.is-code { background: var(--sp-ink); color: #fff; }
.dw .ticket__cta.is-code:hover { background: var(--sp-deep); border-color: var(--sp-deep); }
.dw .ticket__cta.is-deal { color: var(--sp-ink); }
.dw .deals-feed > .ticket:first-child:not(.ticket--expired) { background: var(--sp-night); color: #fff; border-radius: 12px; padding: clamp(24px, 3vw, 32px); border: 0; margin-bottom: 24px; grid-template-columns: auto minmax(0, 1fr) auto; gap: 20px; }
.dw .deals-feed > .ticket:first-child:not(.ticket--expired) .ticket__logo { display: block; width: 52px; height: 52px; border-radius: 10px; border: 0; padding: 6px; }
.dw .deals-feed > .ticket:first-child:not(.ticket--expired) .ticket__title { color: #fff; font-size: clamp(22px, 2.4vw, 28px); font-weight: 500; }
.dw .deals-feed > .ticket:first-child:not(.ticket--expired) .ticket__desc, .dw .deals-feed > .ticket:first-child:not(.ticket--expired) .ticket__stats, .dw .deals-feed > .ticket:first-child:not(.ticket--expired) .ticket__store { color: var(--sp-soft); }
.dw .deals-feed > .ticket:first-child:not(.ticket--expired) .dw-kind { background: var(--sp-line); color: #fff; border-color: var(--sp-line); }
.dw .deals-feed > .ticket:first-child:not(.ticket--expired) .ticket__discount { color: var(--sp-lime); }
.dw .deals-feed > .ticket:first-child:not(.ticket--expired) .ticket__cta { background: #fff; color: var(--sp-ink); border-color: #fff; box-shadow: 0 0 8px 6px var(--sp-night); }
.dw .deals-feed > .ticket:first-child:not(.ticket--expired) .ticket__cta:hover { background: var(--sp-lime); border-color: var(--sp-lime); }
.dw .dw-expired-head { margin-top: 32px; font-size: 10px; font-weight: 600; letter-spacing: .25px; text-transform: uppercase; color: var(--sp-mute); }
@media (max-width: 600px) {
  .dw .ticket, .dw .deals-feed > .ticket:first-child:not(.ticket--expired) { grid-template-columns: 1fr; }
  .dw .deals-feed > .ticket:first-child:not(.ticket--expired) .ticket__logo { display: none; }
}

.dw .sp-prose { font-size: 16px; line-height: 1.9; max-width: 680px; }
.dw .sp-prose p { margin: 0 0 16px; }

/* sidebar: plain lists, as in the design */
.dw .dw-side__panel { background: transparent; border: 0; padding: 0; box-shadow: none; }
.dw .dw-side__title { font-size: 14px; font-weight: 500; letter-spacing: .6px; text-transform: uppercase; color: var(--sp-mute); }

.dw .dw-side__post { border-bottom: 1px solid var(--sp-border); }
.dw .dw-side__post img { border-radius: 8px; }
.dw .dw-popstore img { border-radius: 8px; }
.dw .dw-side__cat { border-bottom: 1px solid var(--sp-border); }

/* coupon modal (dark) */
.dw .cmodal { background: rgba(21, 15, 35, .78); }
.dw .cmodal__card { background: var(--sp-night); color: #fff; border: 1px solid var(--sp-line); border-radius: 12px; }
.dw .cmodal__close { background: rgba(255,255,255,.12); color: #fff; border: 0; border-radius: 12px; }
.dw .cmodal__logo { background: #fff; border-radius: 8px; }
.dw .cmodal__kicker, .dw .cmodal__status, .dw .cmodal__instruction { color: var(--sp-soft); }
.dw .cmodal__title { color: #fff; font-family: var(--font-body); font-stretch: 100%; font-weight: 500; }
.dw .code-box { border: 1.5px dashed var(--sp-mute); border-radius: 8px; background: transparent; }
.dw .code-text { color: #fff; font-family: Monaco, Menlo, monospace; letter-spacing: 3px; }
.dw .btn-copy { background: #fff; color: var(--sp-ink); border-radius: 8px; }
.dw .btn-copy.copied { background: var(--sp-lime); color: var(--sp-ink); }
.dw .cmodal__visit { background: #fff; color: var(--sp-ink); border-radius: 8px; text-transform: uppercase; font-weight: 700; letter-spacing: .2px; }
.dw .cmodal__visit:hover { background: var(--sp-lime); color: var(--sp-ink); }

/* ---------- category page ---------- */

.dw .dw-catsub { border-radius: 12px; }

/* ---------- pages that keep their own structure: headings + panels in the new skin ---------- */
.dw .dw-page { background: #fff; border-bottom: 1px solid var(--sp-border); }
.dw .dw-page h1 { font-family: var(--sp-display); font-stretch: 80%; font-weight: 800; }
.dw .dw-crumb { color: var(--sp-mute); }
.dw .dw-crumb a { color: var(--sp-mute); }
.dw .dw-crumb a:hover { color: var(--sp-ink); }
.dw .dw-verified { background: var(--sp-lime); color: var(--sp-ink); border-radius: 4px; }
.dw .hx-pager__page, .dw .hx-pager__btn { border-radius: 8px; }
.dw .hx-pager__page.is-active { background: var(--sp-ink); color: #fff; border-color: var(--sp-ink); }
.dw .dw-empty { border-radius: 12px; }

/* guide article: centred column, contents list on the left */
.dw .dw-art__content { font-size: 18px; line-height: 1.9; }
.dw .dw-art__content h2 { font-family: var(--font-body); font-stretch: 100%; font-weight: 500; font-size: 27px; line-height: 1.25; }
.dw .dw-art__content h3 { font-family: var(--font-body); font-stretch: 100%; font-weight: 600; }
.dw .dw-art__content img { border-radius: 12px; }
.dw .hx-toc__title { font-size: 10px; font-weight: 600; letter-spacing: .25px; text-transform: uppercase; color: var(--sp-mute); }
.dw .hx-toc a { border-left: 2px solid var(--sp-border); color: var(--sp-ink); }
.dw .hx-toc a:hover, .dw .hx-toc a.is-active { border-left-color: var(--sp-ink); }
.dw .hx-share__btn { border-radius: 8px; }
.dw .hx-post-nav__link { border-radius: 12px; }

/* ---------- footer ---------- */

/* ---------- small screens: the old theme's header/filter tweaks, at this file's weight ---------- */
@media (max-width: 720px) {
  .dw .dw-hdr__in { gap: 10px; }
  
  
  
}
@media (max-width: 560px) {
  .dw .dw-hdr__in { gap: 8px; }
  .dw .sp-logo__text { font-size: 20px; }
}

/* guide article on desktop: contents list on the left, reading column capped at 680px (as in the design) */
@media (min-width: 1025px) {
  .dw .dw-art:has(> .hx-toc) { grid-template-columns: 220px minmax(0, 680px); justify-content: center; gap: 72px; }
  .dw .dw-art > .hx-toc { order: -1; }
}

/* ==========================================================================
   Pages outside the Claude design (stores A–Z, categories, guides list, contact,
   info/legal pages, 410, /go redirect), built from DESIGN.md.
   ========================================================================== */

/* buttons: primary on light (night violet) and ghost */
.dw .sp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 22px; border-radius: 8px; background: var(--sp-night); border: 1px solid var(--sp-night); font-family: var(--font-body); font-size: 14px; font-weight: 700; letter-spacing: .2px; text-transform: uppercase; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.dw .sp-btn, .dw a.sp-btn, .dw a.sp-btn:hover { color: #fff; }
.dw .sp-btn:hover { background: var(--sp-deep); border-color: var(--sp-deep); }
.dw .sp-btn:active, .dw a.sp-btn:active { background: #efefef; border-color: #efefef; color: #1a1a1a; }

.dw :focus-visible { outline: 3px solid #9dc1f5; outline-offset: 2px; }

/* dark page head (dot field) shared by the listing pages */

/* A–Z jump row on dark */

/* filter field on dark (hero-search look) */

/* light directory body */

/* categories: two-column rows + subcategory chips */

/* the old theme styles #catGrid by id (borders, fixed 3/2/1 columns); match its weight */

.dw #catGrid .hx-cat-group { border-right: 0; border-bottom: 1px solid var(--sp-border); }

/* guides list: lead + side guides in the dark head */

/* empty states + the "hmm." sticker (DESIGN.md sticker layer) */

.dw .sp-sticker { display: inline-block; margin-bottom: 24px; padding: 8px 16px 10px; background: var(--sp-pink); color: var(--sp-ink); border: 2.5px solid var(--sp-night); border-radius: 12px 12px 12px 2px; box-shadow: 4px 4px 0 var(--sp-night); font-family: var(--sp-display); font-stretch: 80%; font-weight: 900; font-size: 30px; line-height: 1; transform: rotate(-8deg); transition: transform .25s; user-select: none; }
.dw .sp-sticker:hover { transform: rotate(0) scale(1.04); }
@media (max-width: 639px) { .dw .sp-sticker { display: none; } }

/* light info head (contact, legal) */

.dw .sp-prose-doc a { color: var(--sp-purple); text-underline-offset: 3px; }
.dw .sp-prose-doc a:hover { color: var(--sp-deep); }
.dw .sp-prose-doc ul { list-style: disc; padding-left: 1.4em; }
.dw .sp-prose-doc ol { list-style: decimal; padding-left: 1.4em; }
.dw .sp-prose-doc li { margin: 0 0 8px; }

/* contact: form card + hairline contact rows */
.dw .sp-contact { display: flex; flex-wrap: wrap; align-items: flex-start; gap: clamp(32px, 5vw, 64px); padding-top: clamp(40px, 5vw, 56px); padding-bottom: clamp(64px, 8vw, 96px); }
.dw .sp-contact__form { flex: 1.4 1 440px; min-width: 0; }
.dw .sp-contact__info { flex: 1 1 300px; min-width: 0; }
.dw .sp-formcard { background: #fff; border: 1px solid var(--sp-border); border-radius: 12px; padding: clamp(20px, 3vw, 32px); }
.dw .sp-formcard h2, .dw .sp-contact__info h2 { margin: 0; font-family: var(--font-body); font-stretch: 100%; font-size: 24px; font-weight: 500; line-height: 1.25; color: var(--sp-ink); }
.dw .sp-formcard__sub { margin: 8px 0 24px; font-size: 15px; color: var(--sp-mute); }
.dw .sp-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); column-gap: 16px; }
.dw .sp-field { margin-bottom: 18px; }
.dw .sp-field label { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 500; color: var(--sp-ink); }
.dw .sp-field input, .dw .sp-field textarea { display: block; width: 100%; min-height: 52px; padding: 8px 14px; background: #fff; border: 1px solid var(--sp-border-2); border-radius: 6px; font-family: var(--font-body); font-size: 16px; font-weight: 500; line-height: 1.5; color: var(--sp-ink); transition: border-color .15s, box-shadow .15s; }
.dw .sp-field textarea { min-height: 160px; padding-top: 12px; resize: vertical; }
.dw .sp-field input::placeholder, .dw .sp-field textarea::placeholder { color: var(--sp-mute); font-weight: 400; }
.dw .sp-field input:focus, .dw .sp-field textarea:focus { outline: 0; border-color: var(--sp-ink); box-shadow: rgba(0,0,0,.15) 0 2px 10px inset, 0 0 0 3px #9dc1f5; }

.dw .sp-alert { margin-bottom: 20px; padding: 14px 16px; border-radius: 8px; font-size: 15px; line-height: 1.5; }
.dw .sp-alert--ok { display: flex; align-items: center; gap: 10px; background: var(--sp-night); color: #fff; }
.dw .sp-alert--ok::before { content: "\2713"; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 4px; background: var(--sp-lime); color: var(--sp-ink); font-weight: 700; }
.dw .sp-alert--err { background: #fff; border: 1px solid var(--sp-pink); color: var(--sp-ink); }
.dw .sp-alert ul { margin: 0; padding-left: 1.2em; list-style: disc; }
.dw .sp-contact__text { margin-top: 12px; font-size: 16px; line-height: 1.8; color: var(--sp-mute); }
.dw .sp-contact__text p { margin: 0 0 12px; }

.dw .sp-contact__info .sp-label { margin: 28px 0 12px; }
.dw .sp-contact__social { display: flex; gap: 8px; }
.dw .sp-contact__social a { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--sp-border-2); border-radius: 8px; color: var(--sp-ink); font-size: 18px; text-decoration: none; }
.dw .sp-contact__social a:hover { border-color: var(--sp-ink); }

/* pagination (all listings) */
.dw .hx-pager { gap: 8px; margin-top: clamp(40px, 5vw, 56px); padding-top: 28px; border-top: 1px solid var(--sp-border); }
.dw .hx-pager__page, .dw .hx-pager__btn { min-width: 44px; height: 44px; padding: 0 14px; background: #fff; border: 1px solid var(--sp-border-2); border-radius: 8px; color: var(--sp-ink); font-family: var(--font-body); font-size: 13px; font-weight: 500; letter-spacing: .2px; text-transform: uppercase; text-decoration: none; transform: none; transition: border-color .15s, background .15s, color .15s; }
.dw .hx-pager__page:hover, .dw .hx-pager__btn:hover { background: #fff; border-color: var(--sp-ink); color: var(--sp-ink); transform: none; }
.dw .hx-pager__page.is-active { background: var(--sp-ink); border-color: var(--sp-ink); color: #fff; }
.dw .hx-pager__btn span { display: inline; }
.dw .hx-pager__ellipsis { color: var(--sp-mute); }
@media (max-width: 560px) {
  .dw .hx-pager__btn span { display: none; }
  .dw .hx-pager__btn { padding: 0; }
  .dw .hx-pager__btn--prev::before { content: "\2190"; }
  .dw .hx-pager__btn--next::after { content: "\2192"; }
}

/* /go redirect interstitial: night, dot field, one lime moment (the progress bar) */
body.dw.redirect-page { background-color: var(--sp-night); color: #fff;
  background-image: radial-gradient(rgba(255,255,255,.14) 1px, transparent 1.6px), radial-gradient(rgba(255,255,255,.07) 1px, transparent 1.6px);
  background-size: 61px 61px, 97px 97px; background-position: 0 0, 31px 17px; }
.dw .redirect-card { width: min(500px, 100%); background: var(--sp-ink); color: #fff; border: 1px solid var(--sp-line); border-radius: 12px; padding: clamp(24px, 4vw, 32px); box-shadow: none; }
.dw .redirect-badge { padding: 4px 8px; background: var(--sp-line); color: #fff; border: 0; border-radius: 4px; font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.dw .redirect-spinner { border-color: var(--sp-line); border-top-color: #fff; }
.dw .redirect-title { font-family: var(--font-body); font-stretch: 100%; font-size: 24px; font-weight: 500; line-height: 1.25; color: #fff; }
.dw .redirect-desc, .dw .redirect-hint { color: var(--sp-soft); }
.dw .redirect-progress { height: 4px; background: var(--sp-line); border-radius: 2px; }
.dw .redirect-progress span { background: var(--sp-lime); }
.dw .redirect-hint a { color: #fff; text-decoration-color: var(--sp-mute); }
.dw .redirect-cancel { color: var(--sp-soft); font-weight: 700; letter-spacing: .2px; text-transform: uppercase; }
.dw .redirect-cancel:hover { color: #fff; }

@media (max-width: 560px) { .dw .dw-hdr .sp-logo__img { height: 36px; } }

/* ==========================================================================
   Home rhythm + hero ticket visual (DESIGN.md page recipe and coupon-ticket).
   ========================================================================== */

/* hero: copy + photo/ticket visual (desktop only) */

/* the note band becomes the night "statement" between the light runs (home only; About keeps its own) */
.dw.page-home .dw-note { padding: 0; }
.dw.page-home .dw-note__in { max-width: var(--sp-wrap); padding: clamp(72px, 9vw, 112px) var(--sp-pad); grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: start; }
.dw.page-home .dw-note__label { margin-bottom: 24px; }
.dw.page-home .dw-note__lead { max-width: 22ch; font-family: var(--sp-display); font-stretch: 80%; font-weight: 700; font-size: clamp(34px, 5.4vw, 60px); line-height: 1.1; letter-spacing: 0; text-wrap: balance; }
.dw.page-home .dw-note__body { max-width: 640px; font-size: 17px; line-height: 1.9; color: var(--sp-soft); opacity: 1; }

/* guide rail closes the light run before the footer */

/* --- home polish: balanced hero, 4×2 store tiles, lead text column, two-column statement, rail ---- */

@media (min-width: 900px) {
  .dw.page-home .dw-note__in { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); column-gap: clamp(40px, 6vw, 96px); align-items: end; }
  .dw.page-home .dw-note__body { padding-bottom: 8px; }
}

.dw .dw-head h2 { color: var(--sp-ink); }
.dw .dw-rcard { border-top: 0; padding-top: 0; }
.dw .dw-rcard h4 { margin: 0; font-family: var(--font-body); font-stretch: 100%; font-size: 16px; font-weight: 500; line-height: 1.35; }
.dw .dw-rcard .tag { padding: 3px 8px; border: 1px solid var(--sp-border-2); border-radius: 4px; background: #fff; color: var(--sp-ink); font-size: 10px; font-weight: 600; line-height: 1.8; letter-spacing: .25px; text-transform: uppercase; }
.dw .dw-rcard img { height: 150px; }

/* guides-only home (2026-10-07): calmer hero heading, guide card meta, topics-only search suggestions */

.dw .dw-sp__cols--one { grid-template-columns: minmax(0, 1fr); }

/* ==========================================================================
   About page (Renovex split hero + Indage values + Realspace statement/FAQ/CTA,
   in the Saving Sprint system).
   ========================================================================== */

/* 1 · split hero */

/* 2 · what we do + numbers */

/* 3 · night values band */

/* 4 · story rows + details accordion */

/* 5 · quote */

/* 6 · CTA card */

/* ==========================================================================
   Guide article + category page rebuilt to DESIGN.md, and photos on every list.
   ========================================================================== */

/* --- guide article --- */

.dw .sp-article__content { font-size: 18px; line-height: 1.9; color: var(--sp-ink); }
.dw .sp-article__content p { margin: 0 0 22px; text-wrap: pretty; }
.dw .sp-article__content h2 { margin: 48px 0 12px; font-family: var(--font-body); font-stretch: 100%; font-size: 27px; font-weight: 500; line-height: 1.25; scroll-margin-top: 96px; }
.dw .sp-article__content h3 { margin: 32px 0 10px; font-family: var(--font-body); font-stretch: 100%; font-size: 20px; font-weight: 600; line-height: 1.3; scroll-margin-top: 96px; }
.dw .sp-article__content a { color: var(--sp-purple); text-underline-offset: 3px; }
.dw .sp-article__content a:hover { color: var(--sp-deep); }
.dw .sp-article__content ul, .dw .sp-article__content ol { margin: 0 0 22px; padding-left: 1.3em; }
.dw .sp-article__content ul { list-style: disc; }
.dw .sp-article__content ol { list-style: decimal; }
.dw .sp-article__content li { margin: 0 0 8px; }
.dw .sp-article__content img { max-width: 100%; height: auto; border-radius: 12px; }

/* generated blocks inside guides: coupon rows, offer analysis, comparison table, related list */
.dw .sp-article__content .ss-coupon-block { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "store cta" "title cta"; gap: 2px 16px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--sp-border); }
.dw .sp-article__content :not(.ss-coupon-block) + .ss-coupon-block { margin-top: 8px; border-top: 1px solid var(--sp-ink); }
.dw .sp-article__content .ss-coupon-block + :not(.ss-coupon-block) { margin-top: 28px; }
.dw .ss-coupon-store { grid-area: store; font-size: 10px; font-weight: 600; line-height: 1.8; letter-spacing: .25px; text-transform: uppercase; color: var(--sp-mute); }
.dw .ss-coupon-title { grid-area: title; font-size: 17px; font-weight: 600; line-height: 1.35; color: var(--sp-ink); }
.dw .sp-article__content .ss-coupon-cta { grid-area: cta; display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1px solid var(--sp-ink); border-radius: 8px; font-size: 13px; font-weight: 700; letter-spacing: .2px; text-transform: uppercase; text-decoration: none; white-space: nowrap; color: var(--sp-ink); transition: background .15s, color .15s; }
.dw .sp-article__content .ss-coupon-cta:hover { background: var(--sp-ink); color: #fff; }
.dw .sp-article__content .ss-offer-analysis { margin: 40px 0; padding: clamp(20px, 3vw, 32px); background: var(--sp-tint); border-radius: 12px; }
.dw .sp-article__content .ss-offer-analysis h2 { margin-top: 0; }
.dw .sp-article__content .ss-offer-analysis p:last-child { margin-bottom: 0; }
.dw .sp-article__content table { width: 100%; margin: 8px 0 28px; border-collapse: collapse; font-size: 16px; line-height: 1.5; }
.dw .sp-article__content th { padding: 0 12px 10px 0; border-bottom: 1px solid var(--sp-ink); font-size: 10px; font-weight: 600; letter-spacing: .25px; text-align: left; text-transform: uppercase; color: var(--sp-mute); }
.dw .sp-article__content td { padding: 14px 12px 14px 0; border-bottom: 1px solid var(--sp-border); vertical-align: top; }
.dw .sp-article__content td:first-child { font-weight: 600; }
.dw .sp-article__content .ss-related { margin: 48px 0 0; }
.dw .sp-article__content .ss-related__list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--sp-ink); }
.dw .sp-article__content .ss-related__list li { margin: 0; border-bottom: 1px solid var(--sp-border); }
.dw .sp-article__content .ss-related__list a { display: flex; justify-content: space-between; gap: 16px; padding: 16px 0; font-size: 17px; font-weight: 500; line-height: 1.4; text-decoration: none; color: var(--sp-ink); }
.dw .sp-article__content .ss-related__list a::after { content: "\2192"; flex: none; }
.dw .sp-article__content .ss-related__list a:hover { color: var(--sp-deep); }

/* --- category page --- */

/* --- photo tiles for categories (home + category pages) --- */

/* --- latest guides rows with a thumbnail --- */

/* --- category rows with a 76px photo (categories index) --- */

/* the old themes boxed "More Smart Shopping Guides" (tint panel + bordered 2-col links): back to plain hairline rows */
.dw .sp-article__content .ss-related { margin: 48px 0 0; padding: 0; border: 0; background: none; }
.dw .sp-article__content .ss-related h2 { margin: 0 0 14px; padding: 0; border: 0; font-size: 24px; }
.dw .sp-article__content .ss-related__list { display: block; padding: 0; }
.dw .sp-article__content .ss-related__list a { border: 0; border-radius: 0; background: none; transform: none; }
.dw .sp-article__content .ss-related__list a:hover { background: none; color: var(--sp-deep); }
.dw .sp-article__content .ss-offer-analysis h2 { margin-top: 0; padding-top: 0; border-top: 0; }

.dw .sp-contact__photo { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; margin: 0 0 28px; border-radius: 18px; background: #f3f2f7; }

/* --- contact (Untitled grid head + method cards, Slothui fields, Stepone form/info split) --- */
.dw .sp-contact-hero { position: relative; overflow: hidden; padding: 28px 0 clamp(48px, 6vw, 72px); background: #fff; }
.dw .sp-contact-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(var(--sp-border) 1px, transparent 1px), linear-gradient(90deg, var(--sp-border) 1px, transparent 1px);
  background-size: 64px 64px; background-position: center -1px;
  -webkit-mask-image: radial-gradient(ellipse 65% 55% at 50% 28%, #000 25%, transparent 75%); mask-image: radial-gradient(ellipse 65% 55% at 50% 28%, #000 25%, transparent 75%); }
.dw .sp-contact-hero > .sp-wrap { position: relative; }
.dw .sp-contact-hero__head { max-width: 760px; margin: clamp(24px, 4vw, 48px) auto clamp(40px, 5vw, 64px); text-align: center; }
.dw .sp-contact-hero__title { margin: 0; font-family: var(--sp-display); font-stretch: 78%; font-weight: 900; font-size: clamp(48px, 8vw, 96px); line-height: .98; color: var(--sp-ink); text-wrap: balance; }
.dw .sp-contact-hero__title span { color: var(--sp-lime); -webkit-text-stroke: 1.5px var(--sp-ink); }
.dw .sp-contact-hero__sub { margin: 18px auto 0; max-width: 560px; font-size: 19px; line-height: 1.7; color: var(--sp-mute); text-wrap: pretty; }
.dw .sp-contact-hero__mail { margin: 8px 0 0; font-size: 16px; color: var(--sp-ink); }
.dw .sp-contact-hero__mail a { font-weight: 600; color: var(--sp-purple); text-underline-offset: 3px; }
.dw .sp-contact-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 20px; }
.dw .sp-ccard { display: flex; flex-direction: column; align-items: flex-start; min-height: 230px; padding: 24px; background: #fff; border: 1px solid var(--sp-border); border-radius: 12px; transition: border-color .15s, transform .15s; }
.dw .sp-ccard:hover { border-color: var(--sp-ink); transform: translateY(-2px); }
.dw .sp-ccard__icon { width: 44px; height: 44px; margin-bottom: auto; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--sp-border-2); border-radius: 10px; font-size: 20px; color: var(--sp-ink); }
.dw .sp-ccard h2 { margin: 32px 0 6px; font-family: var(--font-body); font-stretch: 100%; font-size: 18px; font-weight: 600; line-height: 1.3; color: var(--sp-ink); }
.dw .sp-ccard p { margin: 0 0 14px; font-size: 15px; line-height: 1.55; color: var(--sp-mute); }
.dw .sp-ccard a { font-size: 15px; font-weight: 600; color: var(--sp-ink); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.dw .sp-ccard a:hover { color: var(--sp-deep); }
@media (prefers-reduced-motion: reduce) { .dw .sp-ccard { transition: none; } .dw .sp-ccard:hover { transform: none; } }

.dw .sp-input { position: relative; display: block; }
.dw .sp-input > i, .dw .sp-input > svg { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); font-size: 18px; color: var(--sp-mute); pointer-events: none; }
.dw .sp-field .sp-input input { padding-left: 44px; }
.dw .sp-field .sp-input:focus-within > i, .dw .sp-field .sp-input:focus-within > svg { color: var(--sp-ink); }
.dw .sp-btn--block { width: 100%; min-height: 56px; margin-top: 8px; }
.dw .sp-formcard__note { margin: 12px 0 0; font-size: 13px; text-align: center; color: var(--sp-mute); }
.dw .sp-contact__panel h2 { margin: 0; font-family: var(--font-body); font-stretch: 100%; font-size: 24px; font-weight: 500; line-height: 1.25; }
.dw .sp-contact__photo { margin-bottom: 24px; }
.dw .sp-ccard__icon { margin-bottom: 40px; }
.dw .sp-ccard h2 { margin-top: 0; }
.dw .sp-ccard a { margin-top: auto; }

/* ==========================================================================
   Category pages, rebuilt from the user's references (Realspace / Renovex / Indage)
   in the Saving Sprint system: light, photo-led, rounded.
   ========================================================================== */

/* staggered photo strip (Realspace) */

/* hero fact pills (were stat cards: two big boxes repeated the hero) */

/* "start here" image card (Realspace mission card) */

/* on phones the text fills the card, so the light top of a photo sits behind it */

/* sp-cards--wide2/4: first 2 or 4 cards go two-up so the last row is always full */

/* categories index: pill search, bento, photo cards */