/* SlashCouponCode — policy pages (affiliate disclosure today; privacy and terms
 * can route through the same file later without another design).
 *
 * Self-contained and small. Typeface and colours come from type.css.
 */

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

/* THE PAGE IS NARROWER THAN THE REST OF THE SITE, DELIBERATELY.
   The shared box is 1250px. A comfortable measure for solid prose is ~700px and
   a link rail is ~260px, which leaves 250px of nothing between the two — the gap
   that made the text and the rail look unrelated. Sizing the page to what the
   content actually needs removes it: 980px holds the column, the gap and the
   rail exactly, and lands the prose near 75 characters a line. */
.scc-page,
.scc-legal-page{ max-width:980px; margin-left:auto; margin-right:auto; margin-top:0;
  padding-top:8px !important; padding-left:0 !important; padding-right:0 !important; }

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

/* ---- Header ---- */
.scc-l-head{ margin:0 0 26px; padding-bottom:22px; border-bottom:1px solid var(--line); }
.scc-l-h1{ margin:0; font-size:clamp(23px,2.2vw,28px); line-height:1.2; font-weight:800;
  letter-spacing:-.018em; color:var(--ink); text-wrap:balance; }
.scc-l-date{ margin:12px 0 0; font-size:12.5px; color:var(--muted); font-variant-numeric:tabular-nums; }
.scc-l-date time{ font-weight:700; color:var(--ink); }

/* ---- Layout ----
   The body column takes what is left after the rail, and is NOT capped again on
   top of that: a max-width inside a sized column is what created the gap. The
   column itself is the measure. */
.scc-l-wrap{ display:grid; grid-template-columns:minmax(0,1fr) 250px; gap:36px; }
.scc-l-body{ min-width:0; font-size:16px; line-height:1.7; color:#3f4048; }
.scc-l-body p{ margin:0; }
/* Several sections run to two or more paragraphs; without this they butt
   together and read as one block with a stray line break in it. Every container
   that holds prose is listed, not just the one that needed it first. */
.scc-l-sec > p + p,
.scc-t-sec > p + p,
.scc-l-body > p + p{ margin-top:.85em; }
/* A list is followed by the paragraph that concludes it, and preceded by the
   one that introduces it; both need the same air as a paragraph break. */
.scc-l-sec > ul + p,
.scc-t-sec > ul + p{ margin-top:.85em; }
.scc-t-sec > h3 + p{ margin-top:0; }
.scc-l-body a{ color:var(--purple); text-decoration:underline; text-underline-offset:2px; font-weight:600; }
.scc-l-body a:focus-visible{ outline:2px solid var(--purple); outline-offset:2px; }

/* The compensation list. Square-ish purple markers rather than browser dots, so
   the list reads as part of the page instead of as pasted-in text. */
.scc-l-bullets{ list-style:none; margin:9px 0 12px; padding:0;
  display:flex; flex-direction:column; gap:7px; }
.scc-l-bullets li{ position:relative; padding-left:18px; }
.scc-l-bullets li::before{ content:""; position:absolute; left:0; top:.62em;
  width:6px; height:6px; border-radius:2px; background:var(--purple); }

/* The sample disclosure line. Quoted, because it is the exact sentence a reader
   may have seen on a coupon page and arrived here to check. */
.scc-l-quote{ margin:12px 0 0; padding:14px 18px; border-left:3px solid var(--gold);
  background:#fffdf3; border-radius:0 10px 10px 0;
  font-size:15px; line-height:1.6; font-style:italic; color:var(--ink); }

/* ---- Sections ----
   Icon and heading on one line, text beneath aligned to the heading, so the
   icons form a single column down the left and the page scans in one pass. */
.scc-l-sec{ margin:26px 0 0; }
.scc-l-sech{ display:flex; align-items:center; gap:12px; margin:0 0 9px; }
.scc-l-sech h2{ margin:0; font-size:17.5px; line-height:1.25; font-weight:800;
  letter-spacing:-.015em; color:var(--ink); text-wrap:balance; }
.scc-l-ico{ flex:none; display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:11px;
  background:var(--purple-bg); color:var(--purple); }
.scc-l-sec > p,
.scc-l-sec > ul,
.scc-l-sec > blockquote{ padding-left:50px; }  /* 38px tile + 12px gap = the heading's left edge */
.scc-l-sec > blockquote{ margin-left:50px; padding-left:18px; }

/* ---- The summary ----
   The most important element on the page, so it is given the weight of one.
   Most people read only this, which is why it carries the whole disclosure. */
/* ---- The opening statement ----
   The two paragraphs that carry the disclosure itself, set slightly larger than
   the body and in a tinted panel, so the part that legally matters is the part
   the eye lands on first. */
.scc-l-tldr{ margin:0; padding:22px 24px; border-radius:14px;
  background:var(--purple-bg); border:1px solid #ddd3ea; border-left:4px solid var(--purple); }
.scc-l-tldr p{ margin:0; font-size:15.5px; line-height:1.62; font-weight:550; color:var(--ink); }
.scc-l-tldr p + p{ margin-top:11px; }

/* ---- Rail ----
   The aside is left to STRETCH down the full row (no align-items:start on the
   grid), because that column is the sticky card's travel space. The card itself
   is what sticks; putting position:sticky on the aside instead looks correct in
   the stylesheet and does nothing at all, since a shrink-to-fit item has no room
   inside its own grid area to move.

   THE OFFSET HAS TO CLEAR THE THEME'S FIXED NAVBAR.
   An earlier 20px offset parked the card underneath it, so it stuck perfectly
   and could not be seen - only its last line showed below the purple bar. The
   navbar height lives in type.css as --scc-navbar; this adds a 16px gap. */
.scc-l-aside{ min-width:0; }
.scc-l-card{ position:sticky; top:calc(var(--scc-navbar,90px) + 16px);
  background:#fff; border:1px solid var(--line); border-radius:14px; padding:18px; }
.scc-l-ch{ margin:0 0 12px; font-size:12px; font-weight:800; letter-spacing:.07em;
  text-transform:uppercase; color:var(--ink); }
.scc-l-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
.scc-l-list a{ font-size:14px; font-weight:600; color:var(--purple); text-decoration:none; }
.scc-l-list a:hover{ text-decoration:underline; }
.scc-l-list a:focus-visible{ outline:2px solid var(--purple); outline-offset:2px; }
.scc-l-list .is-on{ font-size:14px; font-weight:700; color:var(--muted); }

/* ---- Narrow ----
   THE LINKS MOVE TO THE TOP, NOT THE BOTTOM.
   Stacking a right-hand rail underneath the article is the default and it is
   wrong here: the three links ended up below ~1700px of document, so on any
   screen too narrow for two columns they were effectively invisible. `order:-1`
   lifts them above the article, where they are seen in the first screenful, and
   they become a row of chips rather than a card pretending to be a sidebar.

   The breakpoint is 820px rather than the usual 991px so the two-column layout
   survives a small laptop and a browser at 125-150% zoom, which is where this
   was first noticed. */
@media (max-width:820px){
  .scc-l-wrap{ grid-template-columns:1fr; gap:22px; }
  .scc-l-aside{ order:-1; }
  .scc-l-card{ position:static; padding:0; background:none; border:0; }
  .scc-l-ch{ margin-bottom:9px; }
  .scc-l-list{ flex-direction:row; flex-wrap:wrap; gap:8px; }
  .scc-l-list a,
  .scc-l-list .is-on{ display:inline-flex; align-items:center; min-height:38px;
    padding:8px 14px; border-radius:999px; background:#fff;
    border:1px solid var(--line); font-size:13.5px; }
  .scc-l-list a:hover{ text-decoration:none; border-color:var(--purple); background:var(--purple-bg); }
}

/* ---- Phone ----
   The indent under each heading goes: on a 375px screen, 50px of it is a
   seventh of the width, and the text ends up in a column of its own. */
@media (max-width:640px){
  .scc-l-head{ margin-bottom:22px; padding-bottom:18px; }
  .scc-l-body{ font-size:15.5px; line-height:1.68; }
  .scc-l-sec{ margin-top:22px; }
  .scc-l-sech{ gap:10px; }
  .scc-l-sech h2{ font-size:16.5px; }
  .scc-l-ico{ width:34px; height:34px; border-radius:10px; }
  .scc-l-sec > p,
  .scc-l-sec > ul{ padding-left:0; }
  .scc-l-sec > blockquote{ margin-left:0; }
  .scc-l-tldr{ padding:17px 16px; border-radius:12px; }
  .scc-l-tldr p{ font-size:15px; }
}


/* =====================================================================
 * TERMS AND CONDITIONS
 * Twenty-four sections. The page is built for finding a clause, not for
 * reading front to back, so the index is the first thing after the intro
 * and every heading is its own anchor.
 * ===================================================================== */

/* ---- Contents ----
   Two columns, laid flat. A scrollable panel was tried on the article pages and
   rejected; with 24 entries the answer is to show them all at once, not to put
   them in a box you have to scroll. */
.scc-t-toc{ margin:26px 0 0; padding:20px 22px; background:#fff;
  border:1px solid var(--line); border-radius:14px; }
.scc-t-toc-h{ margin:0 0 13px; font-size:12px; font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink); }
.scc-t-toc-list{ list-style:none; margin:0; padding:0; columns:2; column-gap:28px; }
.scc-t-toc-list li{ break-inside:avoid; margin:0 0 3px; }
.scc-t-toc-list a{ display:flex; gap:9px; align-items:baseline; padding:5px 0;
  font-size:14px; line-height:1.4; color:var(--ink); text-decoration:none; font-weight:500; }
.scc-t-toc-list a:hover{ color:var(--purple); }
.scc-t-toc-list a:focus-visible{ outline:2px solid var(--purple); outline-offset:2px; border-radius:4px; }
.scc-t-toc-n{ flex:none; min-width:17px; font-size:12px; font-weight:800; color:var(--purple);
  font-variant-numeric:tabular-nums; }

/* ---- Sections ----
   The number is what a reader quotes back at you ("clause 15"), so it is a real
   element rather than a list marker that cannot be selected or linked. */
.scc-t-sec{ margin:34px 0 0; scroll-margin-top:calc(var(--scc-navbar,90px) + 16px); }
.scc-t-h{ display:flex; gap:12px; align-items:baseline; margin:0 0 11px;
  font-size:17.5px; line-height:1.3; font-weight:800; letter-spacing:-.015em;
  color:var(--ink); text-wrap:balance; }
.scc-t-num{ flex:none; display:inline-flex; align-items:center; justify-content:center;
  min-width:28px; height:28px; padding:0 7px; border-radius:8px;
  background:var(--purple-bg); color:var(--purple);
  font-size:13px; font-weight:800; font-variant-numeric:tabular-nums;
  position:relative; top:-1px; }
.scc-t-sec > p,
.scc-t-sec > ul,
.scc-t-sec > h3{ padding-left:40px; }

/* Sub-headings inside a clause. The privacy policy divides several of its
   sections into lettered or named parts ("A. Information You Provide
   Directly", "Legitimate Interests"); without a level between the numbered
   heading and the body they read as stray bold lines. */
.scc-t-h3{ margin:1.5em 0 .5em; font-size:15px; line-height:1.35; font-weight:800;
  letter-spacing:-.008em; color:var(--ink); }
.scc-t-sec > h3:first-of-type{ margin-top:1.2em; }   /* 28px badge + 12px gap = the heading's left edge */
.scc-t-sec > .scc-l-tldr{ margin-left:40px; }

/* ---- The link that closes the document ----
   A document this long should end with somewhere to go, not trail off. No email
   address is printed anywhere on the page: plain text on a crawlable page is
   scraped within days, and the form is the better route in any case. */
.scc-t-cta{ margin:14px 0 0; padding-left:40px; }
.scc-t-cta a{ display:inline-flex; align-items:center; min-height:44px;
  padding:11px 20px; border-radius:11px; background:var(--purple); color:#fff;
  font-size:14.5px; font-weight:700; text-decoration:none; }
.scc-t-cta a:hover{ background:#63527f; }
.scc-t-cta a:focus-visible{ outline:3px solid var(--gold); outline-offset:2px; }

@media (max-width:820px){
  .scc-t-toc-list{ columns:1; }
}

@media (max-width:640px){
  .scc-t-toc{ padding:17px 16px; border-radius:12px; }
  .scc-t-sec{ margin-top:28px; }
  .scc-t-h{ font-size:16.5px; gap:10px; }
  .scc-t-num{ min-width:26px; height:26px; font-size:12.5px; }
  .scc-t-sec > p,
  .scc-t-sec > ul,
  .scc-t-sec > h3,
  .scc-t-cta{ padding-left:0; }
  .scc-t-sec > .scc-l-tldr{ margin-left:0; }
}