/* Design system lifted from the 2ndlifephones marketing site
   (/opt/2ndlifephones-theme: snippets/slp-tokens.liquid + assets/slp-base.css)
   so the wholesale site looks like the rest of the brand. Everything is
   scoped under .slp and cannot touch the portal's own app.css.
   Re-sync by re-running the copy step if the marketing theme changes. */

.slp {
    /* ── 01 · Colour ─────────────────────────────────────────────────────
       Six core colours. Blue is the only accent — no second colour, no
       gradients. If a section needs a seventh colour, the section is wrong. */
    --slp-ink:            #131720;
    --slp-blue:           #1B4B73;
    --slp-panel:          #F2F5F8;
    --slp-page:           #FFFFFF;
    --slp-muted:          #58616E;
    --slp-border:         #DFE5EC;
    --slp-label-on-dark:  #8FB6D4;
    --slp-text-on-dark:   #AEB7C4;

    /* Derived support tints. Not new colours — tints of the eight above,
       fixed so sections cannot invent their own. */
    --slp-rule-strong:    var(--slp-ink);   /* heavy 1px rule opening a stat bar or list */
    --slp-hairline:       #EDF1F5;          /* row divider inside cards and tables      */
    --slp-table-head:     #EAEFF4;          /* mono column header strip                  */
    --slp-outline:        #CBD4DE;          /* decorative chip + divider border           */
    /* Interactive edges — buttons, inputs and cards that are links. Held at
       3:1 against the page so the control is visible to a low-vision reader.
       Decorative hairlines stay light: the design is built on hairlines and
       darkening all of them would turn the page into a grid. */
    --slp-outline-strong: #8895A6;          /* 3.05:1 on white                            */
    --slp-note-text:      #2A313C;          /* callout body copy                         */
    --slp-dark-rule:      #262D38;          /* grid line inside a dark section           */
    --slp-dark-underline: #5D6570;          /* text-link underline on dark, 3.04:1 on ink */
    --slp-dark-outline:   #5B87AC;          /* outlined button on dark                   */
    --slp-on-dark-btn:    #F4F7FA;          /* light button face on dark                 */

    /* ── 02 · Type ───────────────────────────────────────────────────────
       Two families, two weights (400/700). clamp() between the mobile and
       desktop sizes rather than breakpoint jumps. Two size floors: prose
       stops at 13px, mono caps labels stop at 10px. */
    --slp-font:      Helvetica Neue, Helvetica, Arial, sans-serif;
    --slp-mono:      ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --slp-size-page-heading:    clamp(2.5rem,  1.60rem + 3.85vw, 3.625rem); /* 40 → 58 */
    --slp-size-section-heading: clamp(1.5rem,  0.95rem + 2.35vw, 2.125rem); /* 24 → 34 */
    --slp-size-data:            clamp(1.75rem, 1.30rem + 1.92vw, 2.125rem); /* 28 → 34 */
    --slp-size-lead:            clamp(1rem,    0.85rem + 0.64vw, 1.1875rem); /* 16 → 19 */
    --slp-size-card-title:      clamp(0.9375rem, 0.79rem + 0.62vw, 1.125rem); /* 15 → 18 */
    --slp-size-body:            clamp(0.875rem, 0.81rem + 0.27vw, 0.9375rem); /* 14 → 15 */
    --slp-size-label:           clamp(0.625rem, 0.58rem + 0.19vw, 0.6875rem); /* 10 → 11 */
    --slp-size-floor-prose:     0.8125rem;  /* 13px — prose never goes below this */

    --slp-lh-page-heading: 1.02;
    --slp-lh-heading:      1.08;
    --slp-lh-lead:         1.5;
    --slp-lh-body:         1.6;

    --slp-ls-page-heading: -0.035em;
    --slp-ls-heading:      -0.025em;
    --slp-ls-data:         -0.02em;
    --slp-ls-label:        0.14em;

    /* ── 04 · Radius and borders ─────────────────────────────────────────
       Four radii, each with one job — smaller means smaller element.
       Borders are always 1px. No shadows anywhere on the site. */
    --slp-radius-chip:   2px;   /* grade chips and small tags only  */
    --slp-radius-button: 3px;   /* every button and input           */
    --slp-radius-card:   4px;   /* cards, tables, panels, media     */
    --slp-radius-pill:   999px; /* FAQ category chips on mobile only */
    --slp-border-width:  1px;

    /* ── 05 · Spacing and layout ─────────────────────────────────────── */
    --slp-gutter:         16px;  /* mobile first */
    --slp-section-pad:    32px;
    --slp-card-pad:       20px;
    --slp-column-gap:     24px;
    --slp-measure:        68ch;

    /* Accessibility: tap targets never below 44px. */
    --slp-tap-min:        44px;
  }

  @media (min-width: 900px) {
    .slp {
      --slp-gutter:      40px;
      --slp-section-pad: 72px;
      --slp-card-pad:    32px;
      --slp-column-gap:  64px;
    }
  }

/* ============================================================================
   slp-base.css — 2ndlifephones marketing site
   Built against the style sheet contract. Every value here reads a token from
   snippets/slp-tokens.liquid. No literal hex codes, no shadows, no gradients.

   This store also serves 2ndphoneclub.com. Everything is scoped under .slp so
   nothing here can reach the D2C theme. Never add a bare element selector.
   ========================================================================== */

.slp {
  font-family: var(--slp-font);
  color: var(--slp-ink);
  background: var(--slp-page);
  -webkit-font-smoothing: antialiased;
}

.slp *,
.slp *::before,
.slp *::after { box-sizing: border-box; }

/* Accessibility — focus is always visible, always blue. */
.slp :focus-visible {
  outline: 2px solid var(--slp-blue);
  outline-offset: 2px;
  border-radius: var(--slp-radius-button);
}

/* ── 02 · Type ─────────────────────────────────────────────────────────── */

.slp-page-heading {
  font-size: var(--slp-size-page-heading);
  font-weight: 700;
  line-height: var(--slp-lh-page-heading);
  letter-spacing: var(--slp-ls-page-heading);
  margin: 0 0 14px;
  text-wrap: pretty;
}

.slp-section-heading {
  font-size: var(--slp-size-section-heading);
  font-weight: 700;
  line-height: var(--slp-lh-heading);
  letter-spacing: var(--slp-ls-heading);
  margin: 0 0 4px;
  text-wrap: pretty;
}

.slp-card-title {
  font-size: var(--slp-size-card-title);
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 6px;
}

.slp-lead {
  font-size: var(--slp-size-lead);
  font-weight: 400;
  line-height: var(--slp-lh-lead);
  color: var(--slp-muted);
  max-width: var(--slp-measure);
  margin: 0 0 22px;
}

.slp-body {
  font-size: max(var(--slp-size-body), var(--slp-size-floor-prose));
  font-weight: 400;
  line-height: var(--slp-lh-body);
  color: var(--slp-muted);
  max-width: var(--slp-measure);
  margin: 0;
}

/* Mono caps label. The one place type is allowed below the 13px prose floor,
   because it is set in caps with wide letter-spacing. */
.slp-label {
  font-family: var(--slp-mono);
  font-size: var(--slp-size-label);
  letter-spacing: var(--slp-ls-label);
  text-transform: uppercase;
  color: var(--slp-blue);
  display: block;
}

/* Prices and quantities. Tabular so columns line up. */
.slp-data {
  font-size: var(--slp-size-data);
  font-weight: 700;
  letter-spacing: var(--slp-ls-data);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.slp-num { font-variant-numeric: tabular-nums; }

/* ── 03 · Buttons and links ────────────────────────────────────────────── */

.slp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--slp-tap-min);
  padding: 15px 24px;
  border: var(--slp-border-width) solid transparent;
  border-radius: var(--slp-radius-button);
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

/* Primary action in the page body. */
.slp-btn--ink {
  background: var(--slp-ink);
  color: var(--slp-page);
}
.slp-btn--ink:hover { background: var(--slp-blue); }

/* The header button, and only the header button. Smaller by design. */
.slp-btn--blue {
  background: var(--slp-blue);
  color: var(--slp-page);
  min-height: 0;
  padding: 11px 18px;
  font-size: 0.875rem;
}
.slp-btn--blue:hover { background: var(--slp-ink); }

/* Always secondary. */
.slp-btn--outline {
  border-color: var(--slp-outline-strong);
  background: transparent;
  color: var(--slp-ink);
  font-weight: 400;
}
.slp-btn--outline:hover { border-color: var(--slp-ink); }

/* Text link with a hairline underline — the third-tier action. */
.slp-link {
  display: inline-block;
  font-size: 0.9375rem;
  color: var(--slp-ink);
  text-decoration: none;
  border-bottom: var(--slp-border-width) solid var(--slp-outline-strong);
  padding-bottom: 2px;
}
.slp-link:hover { color: var(--slp-blue); border-bottom-color: var(--slp-blue); }

/* On mobile, buttons are full width and stack. */
@media (max-width: 599px) {
  .slp-btn-row { display: flex; flex-direction: column; gap: 10px; }
  .slp-btn-row .slp-btn { width: 100%; }
}
@media (min-width: 600px) {
  .slp-btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
}

/* ── 05 · Sections and layout ──────────────────────────────────────────── */

.slp-section {
  padding: var(--slp-section-pad) 0;
  background: var(--slp-page);
  border-bottom: var(--slp-border-width) solid var(--slp-border);
}
/* Sections alternate white and panel. */
.slp-section--panel { background: var(--slp-panel); }

.slp-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--slp-gutter);
}

/* Everything is one column on mobile, in the same order as desktop. */
.slp-grid { display: grid; gap: var(--slp-column-gap); grid-template-columns: 1fr; }
@media (min-width: 900px) {
  .slp-grid--2 { grid-template-columns: repeat(2, 1fr); }
  .slp-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .slp-grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* ── 06 · Repeated pieces ──────────────────────────────────────────────── */

.slp-card {
  border: var(--slp-border-width) solid var(--slp-border);
  border-radius: var(--slp-radius-card);
  padding: var(--slp-card-pad);
  background: var(--slp-page);
}
.slp-card--panel { background: var(--slp-panel); }

/* Numbered step card — Quality, Returns, How to Buy. */
.slp-step__num {
  font-family: var(--slp-mono);
  font-size: 0.6875rem;
  color: var(--slp-blue);
  display: block;
  margin-bottom: 10px;
}

/* Grade chips. 2px radius, never coloured by grade. */
.slp-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.slp-chip {
  border: var(--slp-border-width) solid var(--slp-outline);
  border-radius: var(--slp-radius-chip);
  padding: 5px 10px;
  font-size: 0.75rem;
  color: var(--slp-ink);
  white-space: nowrap;
}

/* FAQ category chips on mobile. The only pill on the site. */
.slp-chip--pill { border-radius: var(--slp-radius-pill); padding: 9px 16px; }

/* Stat bar — heavy rule above, hairline below. */
.slp-stats { display: grid; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .slp-stats--4 { grid-template-columns: repeat(4, 1fr); } }
.slp-stat {
  border-top: var(--slp-border-width) solid var(--slp-rule-strong);
  border-bottom: var(--slp-border-width) solid var(--slp-border);
  padding: 18px var(--slp-gutter) 18px 0;
}
.slp-stat__value {
  font-size: var(--slp-size-data);
  font-weight: 700;
  letter-spacing: var(--slp-ls-data);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.slp-stat__label {
  font-size: var(--slp-size-floor-prose);
  color: var(--slp-muted);
  margin-top: 2px;
}

/* Live stock table — mono header, tabular numbers. */
.slp-table {
  border: var(--slp-border-width) solid var(--slp-border);
  border-radius: var(--slp-radius-card);
  overflow: hidden;
  background: var(--slp-page);
}
.slp-table__head {
  background: var(--slp-table-head);
  font-family: var(--slp-mono);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slp-muted);
  padding: 10px 16px;
}
.slp-table__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-top: var(--slp-border-width) solid var(--slp-hairline);
  font-variant-numeric: tabular-nums;
}
.slp-table__row:first-child { border-top: 0; }
.slp-table__primary { font-size: 0.9375rem; font-weight: 700; }
.slp-table__meta { font-size: 0.75rem; color: var(--slp-muted); margin-top: 3px; }
.slp-table__price { font-size: 1.0625rem; font-weight: 700; white-space: nowrap; }

/* Wide tables scroll inside their own box — the page never scrolls sideways. */
.slp-table--scroll { overflow-x: auto; }

/* Callout — panel with a blue rule down the left. */
.slp-note {
  background: var(--slp-panel);
  border-left: 3px solid var(--slp-blue);
  padding: 16px 18px;
  font-size: max(0.875rem, var(--slp-size-floor-prose));
  line-height: var(--slp-lh-body);
  color: var(--slp-note-text);
}

/* ── Dark section — the repair floor, and nowhere else ─────────────────── */
/* If a third dark section appears on the site, something has gone wrong. */

.slp-dark {
  background: var(--slp-ink);
  color: var(--slp-panel);
}
.slp-dark .slp-label       { color: var(--slp-label-on-dark); }
.slp-dark .slp-body,
.slp-dark .slp-lead        { color: var(--slp-text-on-dark); }
.slp-dark .slp-btn--ink    { background: var(--slp-on-dark-btn); color: var(--slp-ink); }
.slp-dark .slp-btn--ink:hover { background: var(--slp-page); }
.slp-dark .slp-btn--outline{ border-color: var(--slp-dark-outline); color: var(--slp-on-dark-btn); }
.slp-dark .slp-btn--outline:hover { border-color: var(--slp-on-dark-btn); }
.slp-dark .slp-link        { color: var(--slp-page); font-weight: 700; border-bottom-color: var(--slp-dark-underline); }
.slp-dark .slp-link:hover  { border-bottom-color: var(--slp-label-on-dark); }
.slp-dark .slp-card        { background: var(--slp-ink); border-color: var(--slp-dark-rule); }
.slp-dark .slp-stat        { border-top-color: var(--slp-dark-rule); border-bottom-color: var(--slp-dark-rule); }
.slp-dark .slp-stat__label { color: var(--slp-text-on-dark); }
.slp-dark :focus-visible   { outline-color: var(--slp-label-on-dark); }

/* ── Media ─────────────────────────────────────────────────────────────── */
/* One video on the whole site, on the home page, with a poster and lazy
   loading. Everything else is text, hairlines and photos. */

.slp-media {
  display: block;
  width: 100%;
  border-radius: var(--slp-radius-card);
  object-fit: cover;
  background: var(--slp-panel);
}

/* A video keeps its whole frame — nothing is cropped, whatever shape it was
   filmed in. A vertical video is also capped in height so it does not push
   the rest of the page down the screen. */
.slp-media--fit {
  object-fit: contain;
  max-height: 78vh;
  margin-inline: auto;
}
@media (min-width: 900px) { .slp-media--fit { max-height: 620px; width: auto; max-width: 100%; } }

.slp img { max-width: 100%; height: auto; }

@media (prefers-reduced-motion: reduce) {
  .slp *, .slp *::before, .slp *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ============================================================================
   Site chrome and page components
   Added for the eight page designs. Same rules apply: tokens only, .slp scope.
   ========================================================================== */

/* ── Top bar ───────────────────────────────────────────────────────────── */
.slp-topbar {
  background: var(--slp-panel);
  border-bottom: var(--slp-border-width) solid var(--slp-border);
  font-size: max(0.75rem, var(--slp-size-floor-prose));
  color: var(--slp-muted);
  padding: 9px 0;
}
.slp-topbar__inner { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.slp-topbar a { color: var(--slp-muted); text-decoration: underline; text-underline-offset: 3px; }
.slp-topbar a:hover { color: var(--slp-blue); }
.slp-topbar__aside { display: flex; gap: 20px; }
@media (max-width: 767px) {
  .slp-topbar { text-align: center; }
  .slp-topbar__inner { justify-content: center; }
  .slp-topbar__aside { display: none; }
}

/* ── Header ────────────────────────────────────────────────────────────── */
.slp-header {
  background: var(--slp-page);
  border-bottom: var(--slp-border-width) solid var(--slp-border);
  position: relative;
}
.slp-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 14px 0;
}
@media (min-width: 900px) { .slp-header__inner { padding: 18px 0; } }

.slp-wordmark {
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--slp-ink);
  text-decoration: none;
  white-space: nowrap;
}
@media (min-width: 900px) { .slp-wordmark { font-size: 1.1875rem; } }

.slp-nav { display: none; }
@media (min-width: 900px) {
  .slp-nav { display: flex; gap: 28px; font-size: 0.875rem; }
  .slp-nav a {
    color: var(--slp-ink);
    text-decoration: none;
    padding-bottom: 2px;
    border-bottom: 2px solid transparent;
  }
  .slp-nav a:hover { color: var(--slp-blue); }
  .slp-nav a[aria-current="page"] { border-bottom-color: var(--slp-blue); }
}

.slp-header__actions { display: flex; align-items: center; gap: 12px; }

/* Menu button — 44px tap target, three bars drawn with borders. */
.slp-burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: var(--slp-tap-min);
  height: var(--slp-tap-min);
  padding: 0 11px;
  border: 0;
  background: none;
  cursor: pointer;
}
.slp-burger span { display: block; height: 2px; background: var(--slp-ink); }
@media (min-width: 900px) { .slp-burger { display: none; } }

.slp-mobile-nav {
  display: none;
  border-top: var(--slp-border-width) solid var(--slp-border);
  background: var(--slp-page);
}
.slp-mobile-nav[data-open="true"] { display: block; }
.slp-mobile-nav a {
  display: block;
  padding: 14px var(--slp-gutter);
  min-height: var(--slp-tap-min);
  border-bottom: var(--slp-border-width) solid var(--slp-hairline);
  color: var(--slp-ink);
  text-decoration: none;
  font-size: 1rem;
}
@media (min-width: 900px) { .slp-mobile-nav { display: none !important; } }

/* ── Hero ──────────────────────────────────────────────────────────────── */
.slp-hero { padding: var(--slp-section-pad) 0; }
.slp-hero__grid { display: grid; gap: var(--slp-column-gap); align-items: center; }
@media (min-width: 900px) { .slp-hero__grid--split { grid-template-columns: 1fr 1fr; } }

/* ── Step grid — 3, 4 or 5 across on desktop, one column on mobile ─────── */
.slp-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--slp-border-width);
  background: var(--slp-border);
  border: var(--slp-border-width) solid var(--slp-border);
  border-radius: var(--slp-radius-card);
  overflow: hidden;
}
.slp-steps__item { background: var(--slp-page); padding: var(--slp-card-pad); }
@media (min-width: 700px)  { .slp-steps[data-cols="3"], .slp-steps[data-cols="4"], .slp-steps[data-cols="5"] { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) {
  .slp-steps[data-cols="3"] { grid-template-columns: repeat(3, 1fr); }
  .slp-steps[data-cols="4"] { grid-template-columns: repeat(4, 1fr); }
  .slp-steps[data-cols="5"] { grid-template-columns: repeat(5, 1fr); }
}

/* ── Card grid — product lines, values, certifications, capabilities ───── */
.slp-cards { display: grid; grid-template-columns: 1fr; gap: var(--slp-column-gap); }
@media (min-width: 700px)  { .slp-cards[data-cols="3"], .slp-cards[data-cols="4"] { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) {
  .slp-cards[data-cols="2"] { grid-template-columns: repeat(2, 1fr); }
  .slp-cards[data-cols="3"] { grid-template-columns: repeat(3, 1fr); }
  .slp-cards[data-cols="4"] { grid-template-columns: repeat(4, 1fr); }
}
.slp-cards--flush { gap: var(--slp-border-width); background: var(--slp-border); border: var(--slp-border-width) solid var(--slp-border); border-radius: var(--slp-radius-card); overflow: hidden; }
.slp-cards--flush > * { background: var(--slp-page); padding: var(--slp-card-pad); border: 0; border-radius: 0; }
.slp-dark .slp-cards--flush { background: var(--slp-dark-rule); border-color: var(--slp-dark-rule); }
.slp-dark .slp-cards--flush > * { background: var(--slp-ink); }

/* Card that is a link — the whole block is the tap target. */
a.slp-card { display: block; text-decoration: none; color: inherit; border-color: var(--slp-outline-strong); }
a.slp-card:hover { border-color: var(--slp-ink); }
.slp-card__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.slp-card__count { font-family: var(--slp-mono); font-size: 0.75rem; color: var(--slp-muted); white-space: nowrap; }

/* ── Definition table — grades, shipping bands, guarantee, key lists ───── */
.slp-deftable {
  border: var(--slp-border-width) solid var(--slp-border);
  border-radius: var(--slp-radius-card);
  overflow: hidden;
  background: var(--slp-page);
}
.slp-deftable__head {
  display: grid;
  gap: 24px;
  padding: 12px var(--slp-card-pad);
  background: var(--slp-table-head);
  font-family: var(--slp-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slp-muted);
}
.slp-deftable__row {
  display: grid;
  gap: 8px 24px;
  padding: 18px var(--slp-card-pad);
  border-top: var(--slp-border-width) solid var(--slp-hairline);
  font-size: max(0.9375rem, var(--slp-size-floor-prose));
  line-height: var(--slp-lh-body);
}
.slp-deftable__row:first-child { border-top: 0; }
.slp-deftable__term { font-weight: 700; color: var(--slp-ink); }
.slp-deftable__desc { color: var(--slp-muted); }
.slp-deftable--num { font-variant-numeric: tabular-nums; }
@media (min-width: 700px) {
  .slp-deftable__head, .slp-deftable__row { grid-template-columns: 1fr 2fr; }
  .slp-deftable--tight .slp-deftable__head,
  .slp-deftable--tight .slp-deftable__row { grid-template-columns: 1fr auto; }
}
/* Coloured header strip — the returns guarantee panel. */
.slp-deftable__banner {
  background: var(--slp-blue);
  color: var(--slp-page);
  padding: 22px var(--slp-card-pad);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* ── Split section — heading one side, prose or media the other ────────── */
.slp-split { display: grid; gap: var(--slp-column-gap); align-items: start; }
@media (min-width: 900px) {
  .slp-split--even  { grid-template-columns: 1fr 1fr; }
  .slp-split--lead  { grid-template-columns: 0.8fr 1.2fr; }
  .slp-split--trail { grid-template-columns: 1.1fr 0.9fr; }
  .slp-split--center { align-items: center; }
}
.slp-prose { font-size: var(--slp-size-lead); line-height: var(--slp-lh-body); color: var(--slp-note-text); }
.slp-prose > * + * { margin-top: 18px; }
.slp-prose p { margin: 0; }

/* Placeholder for a photo that has not been supplied yet. */
.slp-placeholder {
  display: flex;
  align-items: flex-end;
  padding: 24px;
  border-radius: var(--slp-radius-card);
  background-image: repeating-linear-gradient(135deg, var(--slp-table-head) 0 12px, var(--slp-panel) 12px 24px);
}
.slp-placeholder span {
  font-family: var(--slp-mono);
  font-size: 0.75rem;
  color: var(--slp-muted);
  background: var(--slp-page);
  padding: 8px 12px;
}

/* ── Quotes ────────────────────────────────────────────────────────────── */
.slp-quote p { font-size: var(--slp-size-lead); line-height: var(--slp-lh-lead); margin: 0 0 14px; color: var(--slp-ink); }
.slp-quote cite {
  font-family: var(--slp-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slp-muted);
  font-style: normal;
}

/* ── Closing call to action — the blue band ────────────────────────────── */
.slp-cta { background: var(--slp-blue); color: var(--slp-on-dark-btn); padding: var(--slp-section-pad) 0; }
.slp-cta__inner { display: flex; flex-direction: column; gap: 24px; }
@media (min-width: 900px) { .slp-cta__inner { flex-direction: row; justify-content: space-between; align-items: center; gap: 48px; } }
.slp-cta h2 { font-size: var(--slp-size-page-heading); font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; margin: 0 0 12px; }
.slp-cta p { font-size: max(0.9375rem, var(--slp-size-body)); color: #C3D8E8; margin: 0; }
.slp-cta .slp-btn--ink { background: var(--slp-on-dark-btn); color: var(--slp-ink); }
.slp-cta .slp-btn--outline { border-color: var(--slp-dark-outline); color: var(--slp-on-dark-btn); }
.slp-cta .slp-btn--outline:hover { border-color: var(--slp-on-dark-btn); }
.slp-cta :focus-visible { outline-color: var(--slp-on-dark-btn); }

/* ── FAQ ───────────────────────────────────────────────────────────────── */
.slp-faq { display: grid; gap: var(--slp-column-gap); }
@media (min-width: 1000px) { .slp-faq { grid-template-columns: 220px 1fr; } }

.slp-faq__rail { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.slp-faq__rail a {
  display: inline-block;
  padding: 9px 16px;
  border: var(--slp-border-width) solid var(--slp-outline-strong);
  border-radius: var(--slp-radius-pill);
  font-size: 0.9375rem;
  color: var(--slp-ink);
  text-decoration: none;
  white-space: nowrap;
}
@media (min-width: 1000px) {
  .slp-faq__rail {
    position: sticky;
    top: 24px;
    flex-direction: column;
    gap: 4px;
    overflow: visible;
    align-self: start;
  }
  .slp-faq__rail a { border: 0; border-radius: var(--slp-radius-button); padding: 10px 14px; font-weight: 400; }
  .slp-faq__rail a:hover { background: var(--slp-panel); }
  .slp-faq__rail a[aria-current="true"] { background: var(--slp-ink); color: var(--slp-page); font-weight: 700; }
}

.slp-faq__group { margin-bottom: 48px; }
.slp-faq__group:last-child { margin-bottom: 0; }
.slp-faq__list { border-top: var(--slp-border-width) solid var(--slp-rule-strong); }
.slp-faq__item {
  display: grid;
  gap: 8px 40px;
  padding: 22px 0;
  border-bottom: var(--slp-border-width) solid var(--slp-border);
}
@media (min-width: 700px) { .slp-faq__item { grid-template-columns: 1fr 1.3fr; } }
.slp-faq__q { font-size: 1.0625rem; font-weight: 700; margin: 0; }
@media (min-width: 900px) { .slp-faq__q { font-size: 1.125rem; } }
.slp-faq__a { font-size: max(0.9375rem, var(--slp-size-floor-prose)); line-height: var(--slp-lh-body); color: var(--slp-muted); margin: 0; }
/* Mobile collapses; desktop stays open so the page is scannable and indexable. */
.slp-faq__item > summary { list-style: none; cursor: pointer; }
.slp-faq__item > summary::-webkit-details-marker { display: none; }
@media (min-width: 700px) { .slp-faq__item[open] > summary { cursor: default; } }

/* ── Contact ───────────────────────────────────────────────────────────── */
.slp-phone-card {
  display: block;
  background: var(--slp-blue);
  color: var(--slp-page);
  border-radius: var(--slp-radius-card);
  padding: 28px var(--slp-card-pad);
  text-decoration: none;
  margin-bottom: 12px;
}
.slp-phone-card__label {
  font-family: var(--slp-mono);
  font-size: var(--slp-size-label);
  letter-spacing: var(--slp-ls-label);
  text-transform: uppercase;
  color: #C3D8E8;
  margin-bottom: 12px;
  display: block;
}
.slp-phone-card__number {
  font-size: clamp(2rem, 1.2rem + 3.4vw, 2.875rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
}
.slp-email-card {
  display: block;
  border: var(--slp-border-width) solid var(--slp-outline-strong);
  border-radius: var(--slp-radius-card);
  padding: 20px var(--slp-card-pad);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--slp-ink);
  text-decoration: none;
  word-break: break-word;
}
.slp-email-card:hover, .slp-phone-card:hover { border-color: var(--slp-ink); }

.slp-form { display: grid; gap: 16px; }
@media (min-width: 700px) { .slp-form__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } }
.slp-field label { display: block; font-size: max(0.8125rem, var(--slp-size-floor-prose)); font-weight: 700; margin-bottom: 6px; }
.slp-field input,
.slp-field select,
.slp-field textarea {
  width: 100%;
  min-height: var(--slp-tap-min);
  padding: 13px 14px;
  border: var(--slp-border-width) solid var(--slp-outline-strong);
  border-radius: var(--slp-radius-button);
  font-family: inherit;
  font-size: 1rem;
  color: var(--slp-ink);
  background: var(--slp-page);
}
.slp-field textarea { min-height: 120px; resize: vertical; }
.slp-field input:focus, .slp-field select:focus, .slp-field textarea:focus { border-color: var(--slp-blue); }
/* Honeypot — off-screen, never visible, no captcha. */
.slp-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ── Footer ────────────────────────────────────────────────────────────── */
.slp-footer { padding: var(--slp-section-pad) 0 32px; font-size: max(0.875rem, var(--slp-size-floor-prose)); color: var(--slp-muted); border-top: var(--slp-border-width) solid var(--slp-border); }
.slp-footer__top { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 16px; padding-bottom: 32px; border-bottom: var(--slp-border-width) solid var(--slp-border); }
@media (min-width: 900px) { .slp-footer__top { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px; padding-bottom: 40px; } }
.slp-footer__brand { grid-column: 1 / -1; }
@media (min-width: 900px) { .slp-footer__brand { grid-column: auto; } }
.slp-footer__col { display: flex; flex-direction: column; gap: 9px; }
.slp-footer__col > strong { color: var(--slp-ink); font-weight: 700; }
.slp-footer a { color: var(--slp-muted); text-decoration: none; }
.slp-footer a:hover { color: var(--slp-blue); text-decoration: underline; }
.slp-footer__bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 20px; font-size: max(0.8125rem, var(--slp-size-floor-prose)); }
.slp-footer__legal { display: flex; gap: 20px; }

/* ── Country list ──────────────────────────────────────────────────────── */
.slp-countries {
  font-size: clamp(1.125rem, 0.7rem + 1.8vw, 1.625rem);
  line-height: 1.5;
  font-weight: 700;
  letter-spacing: -0.02em;
  max-width: 1100px;
}

/* ── Live data ─────────────────────────────────────────────────────────── */
/* Sections that depend on the portal feed start hidden and are revealed only
   when real numbers arrive. A failed feed shows nothing, never a zero. */
[data-slp-live] { display: none; }
[data-slp-live][data-slp-ready="true"] { display: block; }