/* SlashCouponCode — About page.
 *
 * Shopper-facing and deliberately warmer than Partner With Us: gold accents
 * alongside the purple and an interface built in HTML instead of a
 * photograph. Typeface from type.css.
 */

.scc-about-page{
  --purple:#746093; --purple-d:#5b4a76; --magenta:#A24592;
  --gold:#FFD84D; --gold-d:#F2C200;
  --purple-bg:#f0ebf5;
  --ink:#1f2026; --muted:#6b6c76; --line:#e9e7ef; --bg:#f4f2f8;
  color:var(--ink);
}

.scc-page,
.scc-about-page{ max-width:1180px; margin-left:auto; margin-right:auto; margin-top:0;
  padding-top:8px !important; padding-left:0 !important; padding-right:0 !important; }

.scc-about-page .scc-crumb{ font-size:12.5px; color:var(--muted); margin:0 0 14px; }
.scc-about-page .scc-crumb a{ color:var(--purple); text-decoration:none; }
.scc-about-page .scc-crumb span{ margin:0 2px; }

/* ---- Shared ---- */
.scc-ab-sec{ margin:60px 0 0; }
.scc-ab-h2{ margin:0 0 16px; font-size:clamp(22px,2.4vw,30px); line-height:1.18; font-weight:800;
  letter-spacing:-.022em; color:var(--ink); text-align:center; text-wrap:balance; }
.scc-ab-h2--light{ color:#fff; }
.scc-ab-intro{ margin:0 auto 26px; max-width:66ch; font-size:16px; line-height:1.7;
  color:#3f4048; text-align:center; }

/* ---- Buttons ---- */
.scc-ab-btn{ display:inline-flex; align-items:center; justify-content:center;
  min-height:48px; padding:0 24px; border-radius:12px; border:1.5px solid transparent;
  font:inherit; font-size:15px; font-weight:700; text-decoration:none; cursor:pointer;
  transition:background-color .15s, border-color .15s, transform .12s; }
.scc-ab-btn--solid{ background:var(--purple); color:#fff; }
.scc-ab-btn--solid:hover{ background:var(--purple-d); color:#fff; }
.scc-ab-btn--ghost{ background:#fff; color:var(--ink); border-color:var(--line); }
.scc-ab-btn--ghost:hover{ border-color:var(--purple); background:var(--purple-bg); }
.scc-ab-btn--gold{ background:var(--gold); color:var(--ink); }
.scc-ab-btn--gold:hover{ background:var(--gold-d); color:var(--ink); }
.scc-ab-btn--onDark{ background:transparent; color:#fff; border-color:rgba(255,255,255,.5); }
.scc-ab-btn--onDark:hover{ background:rgba(255,255,255,.14); color:#fff; }
.scc-ab-btn:active{ transform:translateY(1px); }
.scc-ab-btn:focus-visible{ outline:3px solid var(--gold); outline-offset:2px; }

/* ---- Icon tile ---- */
.scc-ab-ico{ flex:none; display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:12px; background:var(--purple-bg); color:var(--purple); }

/* ---- 1. Hero ---- */
.scc-ab-hero{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:44px; align-items:center; margin:8px 0 0; }
.scc-ab-eyebrow{ margin:0 0 12px; font-size:12px; font-weight:800; letter-spacing:.1em;
  text-transform:uppercase; color:var(--purple); }
.scc-ab-h1{ margin:0; font-size:clamp(29px,3.8vw,44px); line-height:1.1; font-weight:800;
  letter-spacing:-.028em; color:var(--ink); text-wrap:balance; }
.scc-ab-lede{ margin:16px 0 0; max-width:54ch; font-size:16.5px; line-height:1.65; color:#3f4048; }
.scc-ab-cta{ display:flex; flex-wrap:wrap; gap:12px; margin:26px 0 0; }
.scc-ab-cta--center{ justify-content:center; }
.scc-ab-trust{ margin:16px 0 0; max-width:52ch; font-size:13.5px; line-height:1.6; color:var(--muted); }

/* ---- The hero visual, drawn in HTML ----
   A small stylised view of the site itself: a search, a coupon, a couple of
   result rows, with a guide and a savings chip floating beside it. No image
   file, so it is sharp at any size and weighs nothing. */
.scc-ab-visual{ position:relative; padding:14px 18px 30px; }
.scc-ab-window{ position:relative; padding:18px; border-radius:18px; background:#fff;
  border:1px solid var(--line); box-shadow:0 18px 46px rgba(60,40,90,.13); }
.scc-ab-dots{ display:flex; gap:6px; margin:0 0 14px; }
.scc-ab-dots i{ width:9px; height:9px; border-radius:50%; background:#e6e2ee; }
.scc-ab-search{ display:flex; align-items:center; gap:10px; padding:11px 14px; margin:0 0 14px;
  border-radius:11px; background:var(--bg); border:1px solid var(--line);
  font-size:13px; color:var(--muted); }
.scc-ab-searchico{ flex:none; display:inline-flex; color:var(--purple); }
.scc-ab-searchico svg{ width:16px; height:16px; }

.scc-ab-coupon{ display:flex; align-items:center; gap:12px; padding:14px;
  border-radius:13px; border:1.5px dashed #d8cfe6;
  background:linear-gradient(120deg,#faf7fd 0%,#f4eefa 100%); }
.scc-ab-coupon-badge{ flex:none; padding:7px 11px; border-radius:9px;
  background:var(--gold); color:var(--ink); font-size:13px; font-weight:800; }
.scc-ab-coupon-lines{ flex:1 1 auto; display:flex; flex-direction:column; gap:6px; min-width:0; }
.scc-ab-coupon-lines i{ height:8px; border-radius:4px; background:#e6e0ef; }
.scc-ab-coupon-lines i:first-child{ width:78%; }
.scc-ab-coupon-lines i:last-child{ width:48%; }
.scc-ab-coupon-code{ flex:none; padding:8px 12px; border-radius:9px;
  background:var(--purple); color:#fff; font-size:11.5px; font-weight:800; letter-spacing:.04em; }

.scc-ab-rows{ display:flex; flex-direction:column; gap:9px; margin:14px 0 0; }
.scc-ab-rows span{ display:flex; align-items:center; gap:10px; padding:11px 12px;
  border-radius:11px; background:var(--bg); }
.scc-ab-rows i{ height:8px; border-radius:4px; background:#e6e0ef; }
.scc-ab-rows i:first-child{ width:34px; height:26px; border-radius:7px; background:#ece7f3; }
.scc-ab-rows i:last-child{ flex:1 1 auto; }
.scc-ab-rows span:last-child i:last-child{ max-width:60%; }

/* The two chips that lift the composition off the flat card. */
.scc-ab-float{ position:absolute; display:flex; align-items:center; gap:8px;
  padding:9px 13px; border-radius:999px; background:#fff;
  border:1px solid var(--line); box-shadow:0 8px 22px rgba(60,40,90,.12);
  font-size:12.5px; font-weight:700; color:var(--ink); }
.scc-ab-float--guide{ top:2px; left:0; }
.scc-ab-float--save{ bottom:4px; right:2px; }
.scc-ab-floatico{ display:inline-flex; color:var(--purple); }
.scc-ab-floatico svg{ width:15px; height:15px; }

/* ---- 2. Savings made simple ----
   Tops aligned, not centred. The copy is about 160px tall and the six cards
   about 300px, so centring pushed the heading ~70px below the first card and
   left nothing on the page lining up with anything else. */
.scc-ab-split{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:40px; align-items:start; }
.scc-ab-split-copy .scc-ab-h2{ text-align:left; }
.scc-ab-split-copy > p{ margin:0; font-size:16px; line-height:1.7; color:#3f4048; }

/* The next-step panel. Sized to bring the copy column level with the six cards
   beside it -- heading plus paragraph is about 160px, the panel adds about 140,
   and the card grid is about 300. */
.scc-ab-next{ margin:24px 0 0; padding:18px; border-radius:16px;
  background:var(--purple-bg); border:1px solid #e2daec; }
.scc-ab-next-p{ margin:0 0 12px; font-size:14.5px; line-height:1.55;
  font-weight:700; letter-spacing:-.01em; color:var(--ink); }
.scc-ab-next-btns{ display:flex; flex-wrap:wrap; gap:10px; }
.scc-ab-next .scc-ab-btn{ min-height:44px; padding:0 18px; font-size:14.5px; }
.scc-ab-exp{ list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.scc-ab-exp li{ display:flex; gap:13px; padding:16px; background:#fff;
  border:1px solid var(--line); border-radius:14px; }
.scc-ab-exp .scc-ab-ico{ width:36px; height:36px; border-radius:10px; }
.scc-ab-exp .scc-ab-ico svg{ width:19px; height:19px; }
.scc-ab-exp-b{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.scc-ab-exp-t{ font-size:14px; font-weight:800; letter-spacing:-.01em; color:var(--ink); }
.scc-ab-exp-p{ font-size:13px; line-height:1.5; color:var(--muted); }

/* ---- 3. At a glance ---- */
.scc-ab-glance{ margin:64px 0 0; padding:42px 30px 34px; border-radius:24px;
  background:linear-gradient(140deg,#5b4a76 0%,#746093 50%,#8d5390 100%); }
.scc-ab-stats{ list-style:none; margin:24px 0 0; padding:0;
  display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px; }
.scc-ab-stats li{ display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:22px 14px; border-radius:16px; text-align:center;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2); }
.scc-ab-stat-ico{ display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:10px; margin-bottom:2px;
  background:rgba(255,255,255,.16); color:var(--gold); }
.scc-ab-stat-ico svg{ width:18px; height:18px; }
.scc-ab-stat-v{ font-size:clamp(23px,2.3vw,30px); font-weight:800; letter-spacing:-.028em;
  color:#fff; font-variant-numeric:tabular-nums; }
.scc-ab-stat-l{ font-size:12.5px; line-height:1.4; color:rgba(255,255,255,.82); }
.scc-ab-note{ margin:20px auto 0; max-width:60ch; font-size:12.5px; line-height:1.6;
  color:rgba(255,255,255,.72); text-align:center; }

/* ---- Cards ---- */
.scc-ab-grid{ display:grid; gap:18px; }
.scc-ab-grid--4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.scc-ab-card{ display:flex; flex-direction:column; padding:22px;
  background:#fff; border:1px solid var(--line); border-radius:16px; height:100%; }
.scc-ab-card-h{ margin:14px 0 0; font-size:15.5px; font-weight:800; letter-spacing:-.012em; color:var(--ink); }
.scc-ab-card-p{ margin:8px 0 0; font-size:14px; line-height:1.6; color:#54525e; }
.scc-ab-cardlink{ margin-top:auto; padding-top:14px; align-self:flex-start;
  display:inline-flex; align-items:center; min-height:44px;
  font-size:13.5px; font-weight:700; color:var(--purple); text-decoration:none; }
.scc-ab-cardlink:hover{ text-decoration:underline; }
.scc-ab-cardlink:focus-visible{ outline:2px solid var(--purple); outline-offset:2px; }

@media (hover:hover) and (pointer:fine){
  .scc-ab-card{ transition:border-color .15s, box-shadow .15s, transform .15s; }
  .scc-ab-card:hover{ border-color:#d9d3e6; box-shadow:0 6px 20px rgba(60,40,90,.08);
    transform:translateY(-2px); }
}

/* ---- 6. Mission ----
   Compact on purpose: a short lead, then the one line that matters, set large. */
.scc-ab-mission{ margin:60px 0 0; padding:38px 34px; border-radius:22px; text-align:center;
  background:linear-gradient(150deg,#f8f5fc 0%,#f2ecf8 55%,#fbf3f8 100%);
  border:1px solid #ddd3ea; }
.scc-ab-mission-p{ margin:0 auto; max-width:62ch; font-size:16px; line-height:1.7; color:#3f4048; }
.scc-ab-mission-big{ margin:22px auto 0; max-width:22ch; font-size:clamp(21px,2.4vw,29px);
  line-height:1.25; font-weight:800; letter-spacing:-.022em; color:var(--purple-d);
  text-wrap:balance; }

/* ---- 8. Shopper CTA ---- */
.scc-ab-final{ margin:60px 0 0; padding:44px 30px; border-radius:22px; text-align:center;
  background:linear-gradient(140deg,#5b4a76 0%,#746093 48%,#8d5390 100%); }
.scc-ab-final-h{ margin:0; font-size:clamp(24px,2.8vw,34px); line-height:1.15; font-weight:800;
  letter-spacing:-.025em; color:#fff; text-wrap:balance; }
.scc-ab-final-p{ margin:14px auto 26px; max-width:62ch; font-size:16px; line-height:1.65;
  color:rgba(255,255,255,.92); }

/* ---- 9. Partnership strip ----
   Quiet on purpose. This page belongs to shoppers; the brand route is one line
   at the bottom, not a second call to action competing with the one above. */
.scc-ab-strip{ display:flex; align-items:center; justify-content:space-between; gap:24px;
  flex-wrap:wrap; margin:22px 0 0; padding:22px 26px; border-radius:16px;
  background:#fff; border:1px solid var(--line); }
.scc-ab-strip-h{ margin:0; font-size:15.5px; font-weight:800; letter-spacing:-.012em; color:var(--ink); }
.scc-ab-strip-p{ margin:6px 0 0; max-width:64ch; font-size:13.5px; line-height:1.6; color:var(--muted); }

/* ---- Tablet ---- */
@media (max-width:991px){
  .scc-ab-hero{ grid-template-columns:1fr; gap:30px; }
  .scc-ab-split{ grid-template-columns:1fr; gap:26px; }
  .scc-ab-split-copy .scc-ab-h2{ text-align:center; }
  .scc-ab-split-copy > p{ text-align:center; }
  /* Stacked now, so the panel centres with the rest of the column. */
  .scc-ab-next{ text-align:center; }
  .scc-ab-next-btns{ justify-content:center; }
  .scc-ab-stats{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .scc-ab-grid--4{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* ---- Phone ---- */
@media (max-width:782px){
  .scc-ab-sec,
  .scc-ab-glance,
  .scc-ab-mission,
  .scc-ab-final{ margin-top:44px; }
  .scc-ab-lede{ font-size:15.5px; }
  .scc-ab-cta .scc-ab-btn{ flex:1 1 100%; }
  .scc-ab-visual{ padding:10px 6px 26px; }
  .scc-ab-float--guide{ top:0; left:-2px; }
  .scc-ab-float--save{ bottom:0; right:-2px; }
  .scc-ab-float{ font-size:11.5px; padding:7px 11px; }
  .scc-ab-exp{ grid-template-columns:1fr; }
  .scc-ab-next .scc-ab-btn{ flex:1 1 100%; }
  .scc-ab-stats{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .scc-ab-glance{ padding:30px 18px 26px; border-radius:18px; }
  .scc-ab-grid--4{ grid-template-columns:1fr; }
  .scc-ab-mission{ padding:26px 18px; border-radius:18px; }
  .scc-ab-final{ padding:32px 18px; border-radius:18px; }
  .scc-ab-final .scc-ab-btn{ flex:1 1 100%; }
  .scc-ab-strip{ padding:18px; }
  .scc-ab-strip .scc-ab-btn{ width:100%; }
}

@media (prefers-reduced-motion:reduce){
  .scc-ab-btn,
  .scc-ab-card{ transition:none; }
}