/* SlashCouponCode — partner / about page.
 *
 * Premium but light. No animation library, no gradients beyond two soft brand
 * washes, no stock photography. Typeface and figures come from type.css.
 */

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

.scc-page,
.scc-partner-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-partner-page .scc-crumb{ font-size:12.5px; color:var(--muted); margin:0 0 14px; }
.scc-partner-page .scc-crumb a{ color:var(--purple); text-decoration:none; }
.scc-partner-page .scc-crumb span{ margin:0 2px; }

/* ---- Shared type ---- */
.scc-p-h2{ margin:0 0 14px; font-size:clamp(22px,2.4vw,29px); line-height:1.2; font-weight:800;
  letter-spacing:-.02em; color:var(--ink); text-wrap:balance; }
.scc-p-h2--center{ text-align:center; margin-bottom:22px; }
.scc-p-sec{ margin:56px 0 0; }
.scc-p-sec > p{ margin:0 0 .85em; font-size:16px; line-height:1.7; color:#3f4048; }
/* Written as `.scc-p-sec > p.scc-p-intro` on purpose. As a bare class it lost to
   `.scc-p-sec > p` on specificity, which reset `margin:0 auto` to `margin:0 0`
   and left every "centred" paragraph on this page sitting against the left edge
   with only its text centred inside a full-width box. */
.scc-p-sec > p.scc-p-intro,
.scc-p-intro{ margin:0 auto 22px; max-width:70ch; font-size:16px; line-height:1.7;
  color:#3f4048; text-align:center; }
.scc-p-note{ margin:16px auto 0; max-width:70ch; font-size:12.5px; line-height:1.6;
  color:var(--muted); text-align:center; }
/* A closing line that sits under a block and reads as its conclusion. */
.scc-p-sec > p.scc-p-note-mid,
.scc-p-note-mid{ margin:22px auto 0; max-width:70ch; font-size:15px; line-height:1.65;
  color:var(--muted); text-align:center; }

/* ---- Buttons ---- */
.scc-p-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; letter-spacing:-.005em;
  text-decoration:none; cursor:pointer;
  transition:background-color .15s, border-color .15s, transform .12s; }
.scc-p-btn--solid{ background:var(--purple); color:#fff; }
.scc-p-btn--solid:hover{ background:var(--purple-d); color:#fff; }
.scc-p-btn--ghost{ background:#fff; color:var(--ink); border-color:var(--line); }
.scc-p-btn--ghost:hover{ border-color:var(--purple); background:var(--purple-bg); }
.scc-p-btn:active{ transform:translateY(1px); }
.scc-p-btn:focus-visible{ outline:3px solid var(--gold); outline-offset:2px; }
.scc-p-btn--lg{ min-height:54px; padding:0 32px; font-size:16px; }

/* ---- 1. Hero ---- */
.scc-p-hero{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:40px; align-items:center; margin:8px 0 0; }
.scc-p-eyebrow{ margin:0 0 12px; font-size:12px; font-weight:800; letter-spacing:.1em;
  text-transform:uppercase; color:var(--purple); }
.scc-p-h1{ margin:0; font-size:clamp(30px,4vw,46px); line-height:1.1; font-weight:800;
  letter-spacing:-.028em; color:var(--ink); text-wrap:balance; }
.scc-p-lede{ margin:16px 0 0; font-size:16.5px; line-height:1.65; color:#3f4048; max-width:56ch; }
.scc-p-cta{ display:flex; flex-wrap:wrap; gap:12px; margin:26px 0 0; }

/* ---- The hero visual ----
   A fixed 4:3 box so the hero cannot jump while the image loads, with the image
   cropped to fill it. The radius matches the cards used everywhere else on the
   page rather than inventing an organic shape that would fight the rest of the
   design system. */
/* 3:2, which is the shape most photographs come in — including the handshake
   supplied for this page. A 4:3 frame would crop the sides off it, and cropping
   a photo that is already small throws away detail it cannot spare. */
.scc-p-visual{ position:relative; border-radius:20px; overflow:hidden;
  aspect-ratio:3/2; background:var(--purple-bg);
  box-shadow:0 14px 40px rgba(60,40,90,.10); }
.scc-p-visual-img{ display:block; width:100%; height:100%; object-fit:cover; }

/* No featured image yet: a brand panel, not an empty hole. */
.scc-p-visual-fallback{ position:absolute; inset:0;
  background:
    radial-gradient(circle at 78% 22%, rgba(255,216,77,.30) 0%, transparent 46%),
    radial-gradient(circle at 20% 82%, rgba(162,69,146,.22) 0%, transparent 52%),
    linear-gradient(150deg,#6d5a8c 0%,#7d6699 46%,#9a5a96 100%); }
.scc-p-visual-hint{ position:absolute; left:16px; right:16px; bottom:16px; margin:0;
  padding:10px 12px; border-radius:10px; background:rgba(255,255,255,.94);
  font-size:12px; line-height:1.45; font-weight:600; color:var(--ink); }

/* ---- 2. The journey ----
   Four steps across, in order, with a connector between them. It reads left to
   right the way the journey happens, and it no longer has to match the height of
   a column of prose beside it. */
.scc-p-journey{ list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; }
.scc-p-journey li{ position:relative; display:flex; flex-direction:column; gap:12px;
  padding:22px 20px; background:#fff; border:1px solid var(--line); border-radius:16px; }
/* The connector that turns four cards into one journey. */
.scc-p-journey li:not(:last-child)::after{ content:""; position:absolute; left:100%; top:50%;
  width:18px; height:2px; background:var(--line); }
.scc-p-journey-t{ font-size:14.5px; line-height:1.5; font-weight:600; color:var(--ink); }

/* ---- Icon tile ---- */
.scc-p-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); }

/* ---- 3. Stats ---- */
.scc-p-stats{ list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:16px; }
.scc-p-stat{ padding:24px 18px; text-align:center; background:#fff;
  border:1px solid var(--line); border-radius:16px; }
.scc-p-stat-v{ display:block; font-size:clamp(26px,2.6vw,34px); font-weight:800;
  letter-spacing:-.028em; color:var(--purple-d); font-variant-numeric:tabular-nums; }
.scc-p-stat-l{ display:block; margin-top:7px; font-size:13px; line-height:1.4; color:var(--muted); }

/* ---- Cards ---- */
.scc-p-grid{ display:grid; gap:18px; }
.scc-p-grid--3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.scc-p-grid--2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.scc-p-card{ display:flex; flex-direction:column; padding:24px;
  background:#fff; border:1px solid var(--line); border-radius:16px; height:100%; }
.scc-p-card-h{ margin:14px 0 0; font-size:16px; font-weight:800; letter-spacing:-.012em; color:var(--ink); }
.scc-p-card-p{ margin:8px 0 0; font-size:14.5px; line-height:1.65; color:#54525e; }
.scc-p-card--lg{ padding:28px; }
/* A 44px target, not a 17px line of text. These are the per-card CTAs and they
   are tapped with a thumb; the inline-flex plus min-height gives them a real
   hit area without changing how they look. */
.scc-p-cardlink{ margin-top:14px; align-self:flex-start; display:inline-flex; align-items:center;
  min-height:44px; padding:4px 0; font-size:14px; font-weight:700;
  color:var(--purple); text-decoration:none; }
.scc-p-cardlink:hover{ text-decoration:underline; }
.scc-p-cardlink:focus-visible{ outline:2px solid var(--purple); outline-offset:2px; }

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

/* ---- 6. Brands ---- */
.scc-p-brands{ list-style:none; margin:0 0 22px; padding:0;
  display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px; }
.scc-p-brand{ display:flex; align-items:center; justify-content:center; min-height:74px;
  padding:14px; background:#fff; border:1px solid var(--line); border-radius:14px;
  text-decoration:none; color:var(--ink); }
.scc-p-brand-t{ font-size:15px; font-weight:700; letter-spacing:-.01em; text-align:center; }
/* FULL COLOUR, ALWAYS. These were greyed out and only came to life on hover,
   which on a page meant to show off brand experience hid the very thing it is
   showing — and did nothing at all on a phone, where there is no hover. */
.scc-p-brand img{ max-width:100%; height:34px; width:auto; object-fit:contain; }
a.scc-p-brand:hover{ border-color:var(--purple); }
a.scc-p-brand:focus-visible{ outline:2px solid var(--purple); outline-offset:2px; }

/* ---- 7. What we look for ---- */
.scc-p-look{ padding:34px; border-radius:20px; border:1px solid #ddd3ea;
  background:linear-gradient(155deg,#f7f4fb 0%,#f1ebf7 100%); }
.scc-p-look > p{ margin:0 0 14px; font-size:16px; line-height:1.7; color:#3f4048; }
/* Written with the parent so it beats the rule above on specificity — the same
   trap that left every other "centred" paragraph on this page against the left
   edge with only its text centred. */
.scc-p-look > p.scc-p-intro{ margin:0 auto 20px; max-width:70ch; text-align:center; }
.scc-p-checks{ list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 24px; }
.scc-p-checks li{ position:relative; padding-left:30px; font-size:15px; line-height:1.5;
  font-weight:600; color:var(--ink); }
/* A drawn tick, not a bullet or a coloured dot: the meaning is "yes, this one",
   and it must not depend on colour alone. */
.scc-p-checks li::before{ content:""; position:absolute; left:2px; top:.3em;
  width:14px; height:8px; border-left:2.5px solid var(--purple);
  border-bottom:2.5px solid var(--purple); transform:rotate(-45deg); }
/* The closing line is a conclusion, not an eighth checklist item: a rule above
   it, space around it, and centred so it reads as the section signing off. */
.scc-p-look > .scc-p-note-mid{ margin:24px auto 0; padding-top:20px;
  border-top:1px solid rgba(116,96,147,.22); color:#54525e; }

/* ---- 8. Final CTA ---- */
.scc-p-final{ margin:56px 0 0; padding:44px 34px; text-align:center; border-radius:22px;
  background:linear-gradient(140deg,#5b4a76 0%,#746093 48%,#8d5390 100%); color:#fff; }
.scc-p-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-p-final-p{ margin:14px auto 0; max-width:70ch; font-size:16px; line-height:1.65;
  color:rgba(255,255,255,.92); }
.scc-p-final-l{ margin:26px 0 12px; font-size:12px; font-weight:800; letter-spacing:.09em;
  text-transform:uppercase; color:rgba(255,255,255,.78); }
.scc-p-chips{ list-style:none; margin:0 0 28px; padding:0;
  display:flex; flex-wrap:wrap; gap:9px; justify-content:center; }
.scc-p-chips li{ padding:8px 15px; border-radius:999px; font-size:13.5px; font-weight:600;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.22); color:#fff; }
/* Gold from the start, not on hover. It was white and only turned gold when a
   cursor touched it — which meant the page's single most important button was
   never gold at all on a phone. */
.scc-p-final .scc-p-btn--solid{ background:var(--gold); color:var(--ink); }
.scc-p-final .scc-p-btn--solid:hover{ background:var(--gold-d,#f2c200); color:var(--ink); }

/* ---- 9. Form ----
   scroll-margin-top clears the theme's fixed navbar, so the heading is not
   hidden behind the purple bar when a CTA jumps here. */
.scc-p-formsec{ margin:56px 0 0; scroll-margin-top:calc(var(--scc-navbar,90px) + 20px); }
.scc-p-formcard{ position:relative; padding:30px; background:#fff;
  border:1px solid var(--line); border-radius:20px; }
.scc-p-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.scc-p-field{ margin:0 0 18px; }
.scc-p-field label{ display:block; margin:0 0 7px; font-size:13.5px; font-weight:700; color:var(--ink); }
.scc-p-req{ color:var(--magenta); }
.scc-p-opt{ font-weight:600; color:var(--muted); font-size:12.5px; }
.scc-p-field input[type=text],
.scc-p-field input[type=email],
.scc-p-field input[type=url],
.scc-p-field textarea,
.scc-p-selwrap select{
  width:100%; box-sizing:border-box; font:inherit; font-size:16px; line-height:1.5;
  color:var(--ink); background:#fff; border:1.5px solid var(--line); border-radius:11px;
  padding:12px 14px; -webkit-appearance:none; appearance:none;
  transition:border-color .15s, box-shadow .15s; }
.scc-p-field textarea{ resize:vertical; min-height:130px; }
.scc-p-field input:focus,
.scc-p-field textarea:focus,
.scc-p-selwrap select:focus{ outline:none; border-color:var(--purple);
  box-shadow:0 0 0 4px rgba(116,96,147,.14); }
.scc-p-selwrap{ position:relative; }
.scc-p-selwrap::after{ content:""; position:absolute; right:16px; top:50%; width:8px; height:8px;
  border-right:2px solid var(--muted); border-bottom:2px solid var(--muted);
  transform:translateY(-70%) rotate(45deg); pointer-events:none; }
.scc-p-selwrap select{ padding-right:38px; cursor:pointer; }

.scc-p-err{ margin:7px 0 0; font-size:12.5px; line-height:1.45; font-weight:600; color:var(--bad); }
.scc-p-field.is-bad input,
.scc-p-field.is-bad textarea,
.scc-p-field.is-bad select{ border-color:var(--bad); background:#fffafa; }

.scc-p-consent label{ display:flex; align-items:flex-start; gap:11px;
  min-height:44px; padding:4px 0; cursor:pointer;
  font-size:14px; font-weight:500; line-height:1.55; color:#3f4048; }
.scc-p-consent input{ flex:none; width:20px; height:20px; margin-top:1px; accent-color:var(--purple); }
.scc-p-consent a{ color:var(--purple); font-weight:700; }

.scc-p-actions{ margin-top:24px; display:flex; justify-content:center; }
.scc-p-spin{ display:none; width:17px; height:17px; margin-left:10px; border-radius:50%;
  border:2.5px solid rgba(255,255,255,.4); border-top-color:#fff;
  animation:scc-p-rot .7s linear infinite; }
.scc-p-btn.is-busy .scc-p-spin{ display:block; }
@keyframes scc-p-rot{ to{ transform:rotate(360deg); } }
.scc-p-alert{ margin:16px 0 0; padding:12px 14px; border-radius:11px; font-size:13.5px;
  line-height:1.5; font-weight:600; color:var(--bad); background:#fdf1f0; border:1px solid #f3d3d0; }
.scc-p-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.scc-p-done{ text-align:center; padding:28px 10px 22px; }
.scc-p-tick{ display:inline-block; color:var(--ok); }
.scc-p-doneh{ margin:14px 0 0; font-size:20px; font-weight:800; letter-spacing:-.015em; color:var(--ink); }
.scc-p-donep{ margin:8px auto 0; max-width:44ch; font-size:15px; line-height:1.6; color:var(--muted); }

/* ---- No entrance animation, on purpose ----
   Two attempts were made and both had the same failure mode: content that
   starts at opacity 0 and depends on something else to reveal it. First an
   IntersectionObserver, which leaves the page blank if it never fires. Then a
   CSS keyframe with animation-fill-mode:both — which holds the `from` state,
   opacity 0, whenever the animation does not run at all.
   A fade is decoration. A blank page is a lost partner. The page carries its
   weight through layout, the gradient panels and the cards; the only motion
   left is on hover and focus, where nothing is hidden if it fails. */

/* ---- Tablet ---- */
@media (max-width:991px){
  .scc-p-hero{ grid-template-columns:1fr; gap:28px; }
  .scc-p-stats{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .scc-p-grid--3{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .scc-p-journey{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .scc-p-journey li:nth-child(2n)::after{ display:none; }
  .scc-p-brands{ grid-template-columns:repeat(4,minmax(0,1fr)); }
}

/* ---- Phone ---- */
@media (max-width:782px){
  .scc-p-sec,
  .scc-p-final,
  .scc-p-formsec{ margin-top:42px; }
  .scc-p-lede{ font-size:15.5px; }
  .scc-p-cta{ gap:10px; }
  .scc-p-cta .scc-p-btn{ flex:1 1 auto; min-width:0; }
  .scc-p-visual{ border-radius:16px; aspect-ratio:3/2; }
  /* Two metric cards per row, as asked. */
  .scc-p-stats{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .scc-p-stat{ padding:18px 12px; }
  .scc-p-grid--3,
  .scc-p-grid--2,
  .scc-p-journey{ grid-template-columns:1fr; }
  /* Stacked, so the connector turns to run downwards. */
  .scc-p-journey li:not(:last-child)::after{ left:50%; top:100%; width:2px; height:14px; }
  .scc-p-card,
  .scc-p-card--lg{ padding:20px; }
  .scc-p-brands{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .scc-p-look{ padding:22px 18px; border-radius:16px; }
  .scc-p-checks{ grid-template-columns:1fr; }
  .scc-p-final{ padding:32px 20px; border-radius:18px; }
  .scc-p-formcard{ padding:20px 16px; border-radius:16px; }
  .scc-p-row{ grid-template-columns:1fr; gap:0; }
  .scc-p-actions .scc-p-btn{ width:100%; }
}

/* Motion is decoration; every state is readable without it. */
@media (prefers-reduced-motion:reduce){
  .scc-p-btn,
  .scc-p-card,
  .scc-p-field input,
  .scc-p-field textarea,
  .scc-p-brand img{ transition:none; }
  .scc-p-spin{ animation-duration:1.6s; }
}