/* ==========================================================
   pages.css — shared type scale & rhythm for inner pages
   Matches the homepage system. Loaded last on every inner page.
   ========================================================== */
:root {
  --t-eyebrow: 12px;
  --t-lead: 16px;
  --t-body: 15px;
  --t-small: 13px;
  --t-label: 11px;
  --t-h1: clamp(40px, 4.4vw, 64px);
  --t-h2: clamp(32px, 2.95vw, 46px);
  --t-h3: clamp(19px, 1.5vw, 23px);
  --sec-y: clamp(64px, 6vw, 96px);
}
@media (max-width: 760px) {
  :root { --t-eyebrow: 11.5px; --t-lead: 15px; --t-body: 14.5px; --t-small: 12.5px; --t-label: 10.5px; --t-h1: clamp(34px, 9vw, 42px); --t-h2: clamp(29px, 7.6vw, 34px); --t-h3: 19px; --sec-y: 56px; }
}

/* Breadcrumb / hero meta */
main [class*="-hero"] nav a, main [class*="-hero"] nav span,
main [class*="breadcrumb"] a, main [class*="breadcrumb"] span,
main [class$="-edition"], main [class*="-hero-location"], main [class*="-hero-label"] {
  font-size: var(--t-label) !important; letter-spacing: .16em !important;
}

/* Eyebrows */
main .eyebrow { font-size: var(--t-eyebrow) !important; letter-spacing: .18em !important; margin-bottom: 12px !important; }

/* Headings */
main h1 { font-size: var(--t-h1) !important; line-height: 1.06 !important; letter-spacing: -.015em !important; }
main h1 em { font-size: 1em !important; }
main h2 { font-size: var(--t-h2) !important; line-height: 1.08 !important; letter-spacing: -.015em !important; }
main h2 em { font-size: 1.12em !important; }
main h3 { font-size: var(--t-h3) !important; line-height: 1.2 !important; }
main [class*="cp-"] h3, main .cp-next h3 { font-size: 17px !important; }

/* Body copy */
main p:not(.eyebrow) { font-size: var(--t-body) !important; line-height: 1.7 !important; }
main [class$="-lead"], main [class*="-hero-lead"], main [class*="-journey-copy"] { font-size: var(--t-lead) !important; line-height: 1.75 !important; }
main li { font-size: var(--t-body) !important; line-height: 1.55 !important; }
main summary { font-size: 16px !important; font-weight: 600; line-height: 1.45 !important; }
main details p { font-size: var(--t-body) !important; }
main label, main legend { font-size: 13px !important; }
main input, main select, main textarea, main option, main .cp-select-value { font-size: 15px !important; }

/* Small / meta text */
main p[class*="-note"], main p[class*="-results"], main p[class*="-caption"], main figcaption,
main .colour-selection, main [class*="-review-note"], main [class*="-form-note"] {
  font-size: var(--t-small) !important; line-height: 1.55 !important;
}
main small { font-size: var(--t-label) !important; letter-spacing: .14em; }
main [class*="-category"], main [class*="-card-label"], main [class*="-image-index"],
main [class*="-stat-label"], main [class*="-gallery-note"], main [class*="-photo-caption"] {
  font-size: var(--t-label) !important; letter-spacing: .16em !important;
}
main .swatch-label { font-size: 11.5px !important; }
main [class*="-card-description"] { font-size: 14px !important; line-height: 1.65 !important; }
main [class*="-card"] li, main .pp-card li { font-size: 12px !important; }
main [class*="-story-note"] p { font-size: clamp(20px, 1.8vw, 25px) !important; line-height: 1.35 !important; }

/* Links & buttons */
main [class*="text-link"], main [class*="-link"]:not(.button), main .cp-start-link, main .pp-finish-link {
  font-size: 14px !important; font-weight: 650;
}
main .button { min-height: 48px !important; padding: 0 26px !important; font-size: 14.5px !important; border-radius: 999px !important; gap: 12px !important; }
main .button svg { width: 18px !important; height: 18px !important; }
main [class*="-filter"], main button[role="tab"] { font-size: 14px !important; }
main .pp-details, main .pp-quote, main .cp-copy, main .cp-edit { font-size: 13px !important; }
main .pp-quote { min-height: 38px; padding: 0 16px !important; }

/* Section rhythm */
main > section:not([class*="-hero"]):not([class*="-intro"]):not([class*="-perspective"]):not([class*="-area"]):not([class*="-benefits"]):not([class*="-trust"]):not(.cp-review) {
  padding-top: var(--sec-y) !important; padding-bottom: var(--sec-y) !important;
}

@media (max-width: 760px) {
  main .button { width: 100%; justify-content: center; }
  main [class*="-hero"] .button, main .pp-quote, main .pp-details { width: auto; }
  main [class*="-card-description"] { font-size: 13.5px !important; }
}

/* Keep stat suffixes (+, %) proportional to their numbers */
main [class*="stat-number"] small { font-size: .55em !important; letter-spacing: 0 !important; }
/* Same content width as other pages */
main .gp-wrap { width: min(1220px, 90%) !important; }