/* ═══════════════════════════════════════════════════════════════
   SLCUK SEO CONTENT PAGES - design system (v2)

   Drop-in replacement: every class name from v1 is kept, so the three
   .aspx pages need no markup changes. The hero is unchanged.

   What changed below the hero, and why:
   - The page is an article, so it is set like one. White page, one
     readable column (max 70ch at 18px), and only two things are allowed
     to break out to the wider 1080px column: the comparison photos/table,
     and the two conversion panels. Everything else is type and space.
   - One structural device throughout: a short horizontal "rail" - a
     4px navy rule - marks every h2. No trailing gradient lines, no
     card-around-everything, no repeated shadow.
   - The start widget is the one loud element (it is the entry point the
     README says matters most). The trust strip becomes a quiet white bar
     so the hero is the only gradient in the first viewport.
   - Radius carries hierarchy: 16px for the two panels, 6px for inline
     boxes, 0 for anything that is just text with a rule.
   ═══════════════════════════════════════════════════════════════ */
:root {
  --sl-navy:       #1f1a5e;
  --sl-navy-mid:   #2d2782;
  --sl-blue:       #1E70B7;
  --sl-blue-light: #e8f2fb;
  --sl-cta:        #D5317B;
  --sl-cta-hover:  #b8255e;
  --sl-yellow:     #FFD700;
  --sl-bg:         #f2f5fa;
  --sl-ink:        #26224a;   /* running text - navy-black, not grey */
  --sl-ink-soft:   #5b5877;   /* captions, sources, meta */
  --sl-rule:       #d9dcea;   /* hairlines */
  --sl-outline:    rgba(31,26,94,0.12);
  --sl-outline-md: rgba(31,26,94,0.22);
  --sl-radius:     16px;      /* panels */
  --sl-radius-sm:  6px;       /* inline boxes */
  --sl-shadow:     0 2px 8px rgba(31,26,94,0.08), 0 8px 24px rgba(31,26,94,0.05);

  /* One column width for everything - prose, table, photos and panels all
     share the same edges. Change --co-wide to resize the whole article. */
  --co-wide:       1120px;
  --co-measure:    var(--co-wide);
}

.co-hero, .co-hero *, .co-trust, .co-trust *,
.co-body, .co-body *, .co-sticky, .co-sticky * { box-sizing: border-box; }

/* Master-chrome overrides, same as suppliers.aspx. */
.sticky { position: relative !important; height: auto !important; }
header  { min-height: auto !important; }
#bottom { display: none !important; }

/* Visible focus for keyboard users - the audience for these pages needs it. */
.co-body a:focus-visible, .co-sticky a:focus-visible, .co-sticky button:focus-visible,
.co-faq summary:focus-visible {
  outline: 3px solid var(--sl-yellow); outline-offset: 3px; border-radius: 3px;
}

/* ── HERO (unchanged from v1) ─────────────────────────── */
.co-hero {
  background: linear-gradient(135deg, #1f1a5e 0%, #2d2782 40%, #1E70B7 100%);
  padding: 3rem 5vw 2.5rem;
  position: relative; overflow: hidden;
}
.co-hero::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 90% at 95% 50%, rgba(255,215,0,0.07) 0%, transparent 65%);
  pointer-events: none;
}
.co-hero__inner { position: relative; z-index: 2; max-width: 1440px; margin: 0 auto; }
.co-hero__eyebrow {
  font-size: 0.68rem; font-weight: 800; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--sl-yellow);
  margin-bottom: 8px; display: block;
}
.co-hero h1 {
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  font-weight: 700; color: #fff; line-height: 1.15; margin-bottom: 10px;
}
.co-hero__sub { font-size: 1rem; color: #fff; max-width: 640px; line-height: 1.6; }
.co-hero__meta { font-size: 0.75rem; color: rgba(255,255,255,0.72); margin-top: 12px; }

/* ── TRUST STRIP ──────────────────────────────────────── */
/* Was a second navy gradient directly under the hero. Now a plain white bar
   with a rule beneath it - three facts, not a second banner. */
.co-trust {
  background: #fff;
  border-bottom: 1px solid var(--sl-rule);
  padding: 0.9rem 5vw;
}
.co-trust__inner {
  max-width: 1440px; margin: 0 auto;
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 0.6rem 2.6rem;
}
.co-trust__item {
  display: flex; align-items: center; gap: 10px;
  font-size: 0.95rem; font-weight: 600; color: var(--sl-navy);
}
.co-trust__item svg {
  width: 22px; height: 22px; flex-shrink: 0;
  fill: none; stroke: var(--sl-blue); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}

/* ── BODY ─────────────────────────────────────────────── */
.co-body { background: #fff; padding: 2.75rem 5vw 5rem; }
.co-body__inner { max-width: 1440px; margin: 0 auto; }

/* The article is a single centred column and every direct child fills it, so
   text, tables, photos and panels all line up on the same left and right edges. */
.co-prose article { max-width: var(--co-wide); margin: 0 auto; }
.co-prose article > * { max-width: var(--co-measure); margin-left: auto; margin-right: auto; }
.co-prose article > .co-compare,
.co-prose article > .co-table-wrap,
.co-prose article > .co-start,
.co-prose article > .co-cta { max-width: var(--co-wide); }
/* Components set their own vertical margins below; these keep them centred
   regardless of specificity. */
.co-prose article > .co-answer, .co-prose article > .co-facts, .co-prose article > .co-callout,
.co-prose article > .co-nudge, .co-prose article > .co-faq, .co-prose article > .co-related,
.co-prose article > .co-sources, .co-prose article > .co-heading { margin-left: auto; margin-right: auto; }

/* ── RUNNING TEXT ─────────────────────────────────────── */
/* 18px with a 70ch measure. v1 was 16px on 980px: ~140 characters a line. */
.co-prose { color: var(--sl-ink); font-size: 1.125rem; line-height: 1.65; }
.co-prose p { margin-top: 0; margin-bottom: 1.15rem; }
.co-prose strong { color: var(--sl-navy); font-weight: 700; }
.co-prose a { color: var(--sl-blue); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.co-prose a:hover { color: var(--sl-navy); }
.co-prose ul, .co-prose ol { margin-top: 0.5rem; margin-bottom: 1.4rem; padding-left: 1.35rem; }
.co-prose li { margin-bottom: 0.65rem; padding-left: 0.2rem; }
.co-prose ul li::marker { color: var(--sl-blue); }
.co-prose h3 { font-size: 1.2rem; font-weight: 700; color: var(--sl-navy); margin-top: 1.9rem; margin-bottom: 0.6rem; line-height: 1.3; }
.co-prose .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ── SECTION HEADING - the rail ───────────────────────── */
/* One device for the whole page: a short navy rule above the heading. The
   v1 trailing gradient line is gone. */
.co-heading {
  display: block;
  font-size: clamp(1.45rem, 2.2vw, 1.75rem); font-weight: 700; line-height: 1.25;
  color: var(--sl-navy);
  margin: 3.2rem auto 1rem; padding-top: 0.9rem;
  position: relative;
}
.co-heading::before {
  content: ''; position: absolute; top: 0; left: 0;
  width: 44px; height: 4px; background: var(--sl-navy); border-radius: 2px;
}
.co-heading::after { content: none; }

/* Headings that live inside a component drop the rail and size down - the
   component's own edge is doing that job. */
.co-answer .co-heading, .co-start .co-heading, .co-cta .co-heading,
.co-facts .co-heading, .co-related .co-heading {
  margin: 0 0 0.5rem; padding-top: 0;
}
.co-answer .co-heading::before, .co-start .co-heading::before, .co-cta .co-heading::before,
.co-facts .co-heading::before, .co-related .co-heading::before { content: none; }

/* ── ANSWER CARD - the bit answer engines lift ─────────── */
/* Sits directly under the hero, so it is the first thing read and the first
   thing quoted. Tinted panel, thick navy edge, the largest body type on the page. */
.co-answer {
  background: var(--sl-blue-light);
  border-left: 6px solid var(--sl-navy);
  border-radius: 0 var(--sl-radius-sm) var(--sl-radius-sm) 0;
  padding: 1.4rem 1.75rem 1.5rem; margin: 0 auto 2.4rem;
}
.co-answer h2 { font-size: 1.05rem; font-weight: 700; color: var(--sl-blue); margin-bottom: 0.5rem; }
.co-answer p { font-size: 1.25rem; line-height: 1.55; color: var(--sl-navy); }
.co-answer p:last-child { margin-bottom: 0; }

/* ── KEY-FACTS CARD ───────────────────────────────────── */
.co-facts {
  background: var(--sl-bg);
  border-radius: var(--sl-radius-sm);
  padding: 1.3rem 1.6rem 1.1rem; margin: 1.8rem auto;
}
.co-facts h2, .co-facts h3 { font-size: 1.05rem; font-weight: 700; color: var(--sl-navy); margin: 0 0 0.7rem; }
.co-facts ul { margin: 0; padding-left: 1.25rem; }
.co-facts li { margin-bottom: 0.5rem; }
.co-facts li:last-child { margin-bottom: 0; }

/* ── COMPARISON FIGURE ────────────────────────────────── */
/* Two specimens side by side. Photo, then a navy name plate, then one line. */
.co-compare {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem;
  margin: 0 auto 2.4rem;
}
.co-compare figure { margin: 0; }
.co-compare img {
  width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block;
  border-radius: var(--sl-radius-sm) var(--sl-radius-sm) 0 0;
}
.co-compare figcaption {
  border-left: 1px solid var(--sl-rule); border-right: 1px solid var(--sl-rule); border-bottom: 1px solid var(--sl-rule);
  border-radius: 0 0 var(--sl-radius-sm) var(--sl-radius-sm);
  padding: 0 1.15rem 1.05rem;
}
.co-compare figcaption strong {
  display: inline-block; background: var(--sl-navy); color: #fff;
  font-size: 0.95rem; font-weight: 700; letter-spacing: 0.01em;
  padding: 0.35rem 0.85rem; border-radius: 0 0 var(--sl-radius-sm) var(--sl-radius-sm);
  margin: 0 0 0.7rem -1.15rem;
}
.co-compare figcaption span { display: block; font-size: 1rem; color: var(--sl-ink-soft); line-height: 1.5; }

/* ── TABLE ────────────────────────────────────────────── */
.co-table-wrap { overflow-x: auto; margin: 0 auto 1.6rem; border: 1px solid var(--sl-rule); border-radius: var(--sl-radius-sm); background: #fff; }
.co-table { width: 100%; border-collapse: collapse; font-size: 1.05rem; min-width: 560px; }
.co-table th, .co-table td { text-align: left; padding: 0.95rem 1.2rem; border-bottom: 1px solid var(--sl-rule); vertical-align: top; line-height: 1.45; }
/* The master has an unscoped th colour rule that beats us on specificity; the
   !important is the fix and must stay. */
.co-table th { background: var(--sl-navy); color: #fff !important; font-weight: 700; border-bottom: 0; font-size: 1.05rem; }
.co-table thead th, .co-table tr:first-child th { background: var(--sl-navy); color: #fff !important; }
/* First column is the row label: bold navy on a tint, so the table reads as
   three columns with a stub, not as nine equal cells. */
.co-table td:first-child { font-weight: 700; color: var(--sl-navy); background: var(--sl-bg); width: 26%; }
.co-table tr:last-child td { border-bottom: 0; }

/* ── CALLOUT ──────────────────────────────────────────── */
.co-callout {
  background: #fff8db;
  border-left: 6px solid var(--sl-yellow);
  border-radius: 0 var(--sl-radius-sm) var(--sl-radius-sm) 0;
  padding: 1.05rem 1.4rem; margin: 1.8rem auto;
}
.co-callout p { margin: 0; }

/* ── INLINE NUDGE ─────────────────────────────────────── */
/* Just a sentence with a pink edge. v1 boxed it like the answer card; a nudge
   should be lighter than the content it follows, not heavier. */
.co-nudge {
  border-left: 6px solid var(--sl-cta);
  padding: 0.25rem 0 0.25rem 1.3rem; margin: 1.8rem auto 2.2rem;
}
.co-nudge p { margin: 0; font-size: 1.1rem; }
.co-nudge a { color: var(--sl-cta); font-weight: 700; }
.co-nudge a:hover { color: var(--sl-cta-hover); }

/* ── START WIDGET - the one loud thing on the page ────── */
/* Asks the wizard's own first question. Big panel, two big answers, and a
   staircase drawn in the corner so the panel says what it is about before
   anyone reads it. */
.co-start {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--sl-navy) 0%, var(--sl-navy-mid) 55%, var(--sl-blue) 100%);
  border-radius: var(--sl-radius); box-shadow: var(--sl-shadow);
  padding: 2.2rem 2.4rem 2rem; margin: 2.6rem auto 3rem; color: #fff;
}
.co-start::after {
  /* stepped line = a staircase, yellow, faint */
  content: ''; position: absolute; right: -10px; bottom: -14px; width: 320px; height: 220px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 220' fill='none' stroke='%23FFD700' stroke-width='6' stroke-linejoin='round'%3E%3Cpath d='M0 220 H50 V176 H100 V132 H150 V88 H200 V44 H250 V0 H320'/%3E%3C/svg%3E") no-repeat right bottom / contain;
  opacity: 0.35; pointer-events: none;
}
.co-start > * { position: relative; z-index: 1; }
.co-start h2 { font-size: clamp(1.5rem, 2.4vw, 1.9rem); font-weight: 700; color: #fff; margin: 0 0 0.4rem; line-height: 1.2; }
.co-start .co-start__sub { font-size: 1.05rem; color: rgba(255,255,255,0.86); margin: 0 0 1.4rem; line-height: 1.55; max-width: 620px; }
.co-start__opts { display: flex; gap: 14px; flex-wrap: wrap; max-width: 760px; }
.co-start .co-start__opts a {
  flex: 1 1 0; min-width: 220px; min-height: 68px;
  display: flex; align-items: center; justify-content: center; text-align: center;
  background: #fff; color: var(--sl-navy) !important; text-decoration: none;
  font-size: 1.1rem; font-weight: 700; border-radius: 10px; padding: 0.9rem 1.2rem;
  border: 3px solid #fff;
  transition: background 0.15s, border-color 0.15s;
}
.co-start .co-start__opts a:hover { background: var(--sl-yellow); border-color: var(--sl-yellow); }
.co-start .co-start__foot { font-size: 0.92rem; color: rgba(255,255,255,0.72); margin: 1rem 0 0; }

/* ── CTA BLOCK ────────────────────────────────────────── */
/* Same family as the start widget but quieter: flat navy, no staircase, so the
   two panels are related without competing. */
.co-cta {
  background: var(--sl-navy);
  border-radius: var(--sl-radius);
  padding: 2.4rem 2rem; margin: 3.2rem auto; text-align: center; color: #fff;
}
.co-cta h2 { font-size: clamp(1.4rem, 2.2vw, 1.75rem); font-weight: 700; color: #fff; margin: 0 0 0.6rem; line-height: 1.2; }
.co-cta h2.co-heading { display: block; margin: 0 auto 0.6rem; }
.co-cta h2.co-heading::after, .co-cta h2.co-heading::before { content: none; }
.co-cta p { color: rgba(255,255,255,0.86); margin: 0 auto 1.5rem; font-size: 1.05rem; max-width: 560px; }
.co-cta a {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--sl-cta); color: #fff !important; text-decoration: none;
  font-weight: 700; font-size: 1.1rem; padding: 1rem 2.4rem; border-radius: 10px;
  transition: background 0.2s;
}
.co-cta a:hover { background: var(--sl-cta-hover); }
.co-cta a svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; }

/* ── FAQ ──────────────────────────────────────────────── */
/* A ruled list, not a stack of cards. Question in navy at reading size, a
   chevron that turns when open, answer indented under the question. */
.co-faq { margin: 0 auto 1rem; border-top: 1px solid var(--sl-rule); }
.co-faq details { border-bottom: 1px solid var(--sl-rule); padding: 0; margin: 0; }
.co-faq summary {
  list-style: none; cursor: pointer; position: relative;
  font-size: 1.15rem; font-weight: 700; color: var(--sl-navy); line-height: 1.4;
  padding: 1.05rem 2.6rem 1.05rem 0;
}
.co-faq summary::-webkit-details-marker { display: none; }
.co-faq summary::after {
  content: ''; position: absolute; right: 8px; top: calc(50% - 7px);
  width: 11px; height: 11px;
  border-right: 3px solid var(--sl-blue); border-bottom: 3px solid var(--sl-blue);
  transform: rotate(45deg); transition: transform 0.2s;
}
.co-faq details[open] summary::after { transform: rotate(225deg); top: calc(50% - 2px); }
.co-faq details[open] summary { color: var(--sl-blue); }
.co-faq details p { margin: 0 0 1.2rem; padding-right: 2.6rem; font-size: 1.05rem; line-height: 1.6; }

/* ── RELATED ──────────────────────────────────────────── */
.co-related { margin: 3rem auto 0; padding-top: 1rem; }
.co-related h2 { font-size: 1.05rem; font-weight: 700; color: var(--sl-ink-soft); margin: 0 0 0.4rem; }
.co-related ul { margin: 0; padding: 0; list-style: none; }
.co-related li { margin: 0; border-top: 1px solid var(--sl-rule); }
.co-related li:last-child { border-bottom: 1px solid var(--sl-rule); }
.co-related a {
  display: block; padding: 0.95rem 0.25rem; font-size: 1.1rem; font-weight: 700;
  color: var(--sl-navy); text-decoration: none;
}
.co-related a:hover { color: var(--sl-blue); text-decoration: underline; }

/* ── SOURCES ──────────────────────────────────────────── */
.co-sources { font-size: 0.9rem; color: var(--sl-ink-soft); margin-top: 2.6rem; padding-top: 1.1rem; border-top: 1px solid var(--sl-rule); line-height: 1.5; }
.co-sources ul, .co-sources ol { margin: 0.4rem 0 0; padding-left: 1.2rem; }
.co-sources li { margin-bottom: 0.35rem; }
.co-sources a { color: var(--sl-blue); }

/* ── STICKY BAR (phones) ──────────────────────────────── */
.co-sticky {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: var(--sl-navy);
  padding: 0.7rem 0.9rem calc(0.7rem + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -4px 18px rgba(0,0,0,0.22);
}
.co-sticky.is-on { display: block; }
.co-sticky a {
  display: block; background: var(--sl-cta); color: #fff !important; text-decoration: none;
  text-align: center; font-weight: 700; font-size: 1.05rem; padding: 0.95rem; border-radius: 10px;
}
.co-sticky .co-sticky__dismiss {
  position: absolute; top: -14px; right: 12px; width: 30px; height: 30px; border-radius: 50%;
  background: #fff; color: var(--sl-navy); border: 0; font-size: 17px; line-height: 1; font-weight: 700;
  cursor: pointer;
}

/* ── RESPONSIVE ───────────────────────────────────────── */
@media (max-width: 1240px) {
  .co-prose article > .co-compare,
  .co-prose article > .co-table-wrap,
  .co-prose article > .co-start,
  .co-prose article > .co-cta { max-width: 100%; }
}

@media (max-width: 640px) {
  .co-hero { padding: 2.2rem 4vw 1.8rem; }
  .co-trust { padding: 0.75rem 4vw; }
  .co-trust__inner { justify-content: flex-start; gap: 0.45rem 1.4rem; }
  .co-trust__item { font-size: 0.9rem; }
  .co-body { padding: 1.8rem 4vw 6.5rem; }
  .co-prose { font-size: 1.0625rem; }
  .co-heading { margin-top: 2.4rem; }
  .co-answer { padding: 1.1rem 1.15rem 1.2rem; }
  .co-answer p { font-size: 1.15rem; }
  .co-compare { grid-template-columns: 1fr; gap: 1.1rem; }
  .co-compare img { aspect-ratio: 16 / 10; }
  .co-start { padding: 1.6rem 1.25rem 1.5rem; }
  .co-start::after { display: none; }
  .co-start__opts { flex-direction: column; }
  .co-start__opts a { min-width: 0; min-height: 60px; }
  .co-cta { padding: 1.9rem 1.25rem; }
  /* Let all three columns fit on a phone - a comparison table with the
     second option scrolled off-screen is not a comparison. */
  .co-table { font-size: 0.95rem; min-width: 0; }
  .co-table th, .co-table td { padding: 0.7rem 0.6rem; }
  .co-table td:first-child { width: 30%; }
  .co-faq details p { padding-right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .co-start__opts a, .co-cta a, .co-faq summary::after { transition: none; }
}