/* Stratamize page layer (brand-restore spec section 5): the shared blocks every public page composes on top of
   stratamize-core.css. Values are --stz-* tokens or --_local variables built from them. No new --stz-* names,
   no .stz-* rules, no colour literals. Breakpoints: 1440 / 1280 / 1024 / 768. */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-padding-top: var(--stz-header-h); }
body { min-width: 320px; overflow-x: clip; }
button, input, select, textarea { font: inherit; }
img { height: auto; }
address { font-style: normal; }

/* Layout */
.wrap { width: min(100% - 2 * var(--stz-space-8), var(--stz-container-max)); margin-inline: auto; }
.section { padding-block: var(--stz-section-y); background-color: var(--stz-surface-canvas); }
.section--panel { background-color: var(--stz-surface-panel); }
.section > .wrap > :last-child { margin-bottom: 0; }

/* Section heading: dash eyebrow and a two-line H2 left, a muted aside bottom-right. */
.section-heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 35ch); align-items: end; gap: var(--stz-space-6) var(--stz-space-13); margin-bottom: var(--stz-space-12); }
.section-heading .stz-overline { margin: 0 0 var(--stz-space-5); color: var(--stz-text); }
.section-heading h2 { margin: 0; font-size: clamp(var(--stz-size-h5), 4.5vw, var(--stz-size-h2)); font-weight: var(--stz-weight-medium); line-height: var(--stz-leading-display); letter-spacing: var(--stz-tracking-h2); text-wrap: balance; }
.section-heading h2 span { display: block; }
.section-heading__aside { margin: 0; color: var(--stz-text-muted); }
.section-heading__aside a { white-space: nowrap; }

/* Display pair (hero titles): an outlined first line, a solid second line. */
.display { margin: 0; font-size: clamp(var(--stz-size-h4), 9vw, var(--stz-size-display-page)); font-weight: var(--stz-weight-medium); line-height: var(--stz-leading-display); letter-spacing: var(--stz-tracking-display); }
.display__outline,
.display__solid { display: block; }
.display__outline { color: transparent; -webkit-text-fill-color: transparent; -webkit-text-stroke: var(--stz-numeral-stroke-width) var(--stz-text); }
.hero .display__outline { -webkit-text-stroke-color: var(--stz-on-surface-brand); }
.display__solid { margin-top: calc(var(--stz-leading-display) * -0.05em); }
.page-title { font-size: clamp(var(--stz-size-h5), 5vw, var(--stz-size-h1)); font-weight: var(--stz-weight-medium); line-height: var(--stz-leading-display); }

/* Hero actions: Apply now and the call button, then the short note. */
.apply-row { display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--stz-space-3); margin: 0; }
.apply-cta { display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--stz-space-3); margin-top: var(--stz-space-8); }
.hero-note { margin: var(--stz-space-3) 0 0; color: var(--stz-text-muted); font-size: var(--stz-size-small); }

/* Homepage hero: the crimson field */
.hero { display: flex; min-height: calc(100svh - var(--stz-header-h)); padding-block: var(--stz-space-13) var(--stz-space-14); }
.hero > .wrap { display: flex; flex-direction: column; justify-content: center; }
.hero .stz-overline { margin: 0 0 var(--stz-space-8); color: var(--stz-on-surface-brand); }
.hero h1 { color: var(--stz-on-surface-brand); }
.hero-bottom { position: relative; display: grid; grid-template-columns: minmax(0, 46ch) auto; justify-content: space-between; align-items: end; gap: var(--stz-space-8) var(--stz-space-13); margin-top: var(--stz-space-11); padding-top: var(--stz-space-10); }
.hero-bottom::before { content: ""; position: absolute; top: 0; inset-inline: 0; height: var(--stz-border-width-hairline); background-color: currentColor; opacity: 0.3; }
.hero-lead { max-width: 46ch; margin: 0; color: var(--stz-on-surface-brand); font-size: var(--stz-size-lead); line-height: var(--stz-lh-lead); }
.hero .hero-note { color: var(--stz-on-surface-brand); }

/* Content page hero */
.page-hero { padding-block: var(--stz-section-y-md) var(--stz-section-y); }
.page-hero__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--stz-space-10) var(--stz-space-13); align-items: start; }
.page-hero__copy .stz-overline { margin: 0 0 var(--stz-space-5); color: var(--stz-text); }
.page-hero__lead { max-width: 60ch; margin: var(--stz-space-6) 0 var(--stz-space-8); font-size: var(--stz-size-body-lg); }
.crumbs { margin-bottom: var(--stz-space-6); color: var(--stz-text-muted); font-size: var(--stz-size-small); }
.crumbs a { color: var(--stz-text-muted); }
.crumbs a:hover { color: var(--stz-text); }

/* Proof strip */
.proof { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--stz-space-6) var(--stz-space-8); margin: 0; padding: var(--stz-space-10) 0; list-style: none; font-size: var(--stz-size-small); line-height: var(--stz-lh-label); }
.proof li { margin: 0; }
.proof__n { display: block; margin-bottom: var(--stz-space-2); color: var(--stz-accent-text); font-weight: var(--stz-weight-medium); }
.proof a { color: var(--stz-text); white-space: nowrap; }
.proof b { display: block; margin-bottom: var(--stz-space-1); color: var(--stz-text); font-size: var(--stz-size-body-sm); }

/* Hairline arrow rows (every list of links) */
.rows { margin: 0; padding: 0; list-style: none; border-top: var(--stz-border-width-hairline) solid var(--stz-border-hairline); }
.rows li { border-bottom: var(--stz-border-width-hairline) solid var(--stz-border-hairline); }
.rows > li > a,
.rows__item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--stz-space-1) var(--stz-space-5); min-height: var(--stz-touch-target); padding-block: var(--stz-space-4); color: var(--stz-text); font-size: var(--stz-size-body); font-weight: var(--stz-weight-medium); }
.rows__arrow { grid-row: 1 / span 2; grid-column: 2; color: var(--stz-accent-decor); }
.address-card .rows__arrow { display: inline-block; width: var(--stz-icon-xs); height: var(--stz-icon-xs); vertical-align: -0.1em; }
.rows__meta { grid-column: 1; max-width: 80ch; color: var(--stz-text-muted); font-size: var(--stz-size-small); font-weight: var(--stz-weight-regular); }
.rows > li > a:hover { color: var(--stz-accent-text); }
.rows__text a { color: var(--stz-text); text-decoration: underline; text-underline-offset: 0.2em; }
.rows-title { margin: 0 0 var(--stz-space-4); color: var(--stz-text); font-size: var(--stz-size-title); font-weight: var(--stz-weight-medium); }
.rows-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--stz-space-10) var(--stz-space-13); }

/* Numbered service lines */
.services { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--stz-space-12) var(--stz-space-13); margin: 0; padding: 0; list-style: none; }
.services { --_num-w: calc(var(--stz-size-h1) * 1.3); }
.services > li { display: grid; grid-template-columns: var(--_num-w) minmax(0, 1fr); gap: var(--stz-space-6); padding-top: var(--stz-space-8); border-top: var(--stz-border-width-hairline) solid var(--stz-border-hairline); }
.services > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.services > li > .stz-numeral-outline { font-variant-numeric: tabular-nums; }
.services h3 { margin: 0 0 var(--stz-space-3); font-size: var(--stz-size-h6); line-height: var(--stz-lh-h6); }
.services > li > div { display: flex; flex-direction: column; }
.services p { max-width: 60ch; margin: 0 0 var(--stz-space-5); }
.services__links { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: var(--stz-space-4) var(--stz-space-6); }

/* Steps (the only step style) */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--stz-space-10) var(--stz-space-11); margin: 0; padding: 0; list-style: none; }
.steps > li { padding-top: var(--stz-space-6); border-top: var(--stz-border-width-hairline) solid var(--stz-border-hairline); }
.steps .stz-numeral-outline { display: block; margin-bottom: var(--stz-space-5); }
.steps h3 { margin: 0 0 var(--stz-space-3); font-size: var(--stz-size-title-lg); line-height: var(--stz-lh-label); }
.steps p { margin: 0; }
.steps-actions { margin-top: var(--stz-space-11); }

/* FAQ */
.faq { border-top: var(--stz-border-width-hairline) solid var(--stz-border-hairline); }
.faq details { border-bottom: var(--stz-border-width-hairline) solid var(--stz-border-hairline); }
.faq summary { position: relative; display: block; padding: var(--stz-space-5) var(--stz-space-10) var(--stz-space-5) 0; color: var(--stz-text); font-size: var(--stz-size-title); font-weight: var(--stz-weight-medium); line-height: var(--stz-lh-label); list-style: none; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before,
.faq summary::after { content: ""; position: absolute; top: 50%; right: var(--stz-space-1); width: var(--stz-space-4); height: var(--stz-border-width-strong); background-color: var(--stz-accent-decor); }
.faq summary::after { transform: rotate(90deg); }
.faq details[open] summary::after { transform: none; }
.faq details > p { max-width: 70ch; margin: 0; padding-bottom: var(--stz-space-6); }
.faq-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--stz-space-10) var(--stz-space-13); }
.faq-grid .section-heading { display: block; margin: 0; }
.faq-grid .section-heading__aside { margin-top: var(--stz-space-6); }

/* Media and light islands */
.media { margin: 0; overflow: hidden; border: var(--stz-border-width-hairline) solid var(--stz-border-hairline); border-radius: var(--stz-radius-media); }
.media img { display: block; width: 100%; }
.light-island { padding: var(--stz-space-8); border-radius: var(--stz-radius-card); background-color: var(--stz-surface-canvas); color: var(--stz-text-muted); }
.after-island { margin-top: var(--stz-space-10); }

/* Split (copy beside a card) */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--stz-space-10) var(--stz-space-13); align-items: start; }
.split .section-heading { display: block; margin-bottom: var(--stz-space-6); }
.body-copy { max-width: 60ch; margin: 0 0 var(--stz-space-6); }
.text-link { margin-top: var(--stz-space-2); }

/* Address card and town list. */
.address-card address { margin: var(--stz-space-3) 0; color: var(--stz-text); font-size: var(--stz-size-body-lg); line-height: var(--stz-lh-body); }
.address-card h3 { margin: 0; font-size: var(--stz-size-title-lg); line-height: var(--stz-lh-label); }
.address-card__phone { display: inline-block; margin-bottom: var(--stz-space-5); color: var(--stz-text); font-size: var(--stz-size-title); font-weight: var(--stz-weight-medium); }
.towns { display: flex; flex-wrap: wrap; gap: var(--stz-space-2); margin: 0 0 var(--stz-space-6); padding: 0; list-style: none; }
.towns li { padding: var(--stz-space-1) var(--stz-space-3); border: var(--stz-border-width-hairline) solid var(--stz-border-hairline); border-radius: var(--stz-radius-pill); font-size: var(--stz-size-small); }

/* Closing band: the second crimson field */
.close-band { padding-block: var(--stz-section-y); }
.close-band .stz-overline { margin: 0 0 var(--stz-space-6); color: var(--stz-on-surface-brand); }
.close-band__title { max-width: 16ch; margin: 0; color: var(--stz-on-surface-brand); font-size: var(--stz-size-display-page-sm); line-height: var(--stz-leading-display); letter-spacing: var(--stz-tracking-display); }
.close-band__bottom { position: relative; display: grid; grid-template-columns: minmax(0, 46ch) auto; justify-content: space-between; align-items: start; gap: var(--stz-space-8) var(--stz-space-13); margin-top: var(--stz-space-11); padding-top: var(--stz-space-10); }
.close-band__bottom::before { content: ""; position: absolute; top: 0; inset-inline: 0; height: var(--stz-border-width-hairline); background-color: currentColor; opacity: 0.3; }
.close-band__body { margin: 0; color: var(--stz-on-surface-brand); font-size: var(--stz-size-lead); line-height: var(--stz-lh-lead); }
.close-band__cta { display: grid; justify-items: start; gap: var(--stz-space-4); margin: 0; }
.close-band__actions { display: flex; flex-wrap: wrap; gap: var(--stz-space-3); margin: 0; }
.close-band__note { margin: 0; color: var(--stz-on-surface-brand); font-size: var(--stz-size-small); }
.close-band .stz-link-underline { color: var(--stz-on-surface-brand); }

/* Long-form text */
.prose { max-width: 68ch; }
.prose h2 { margin: var(--stz-space-11) 0 var(--stz-space-4); font-size: var(--stz-size-h5); line-height: var(--stz-lh-h5); }
.prose h3, .prose h4 { margin: var(--stz-space-8) 0 var(--stz-space-3); font-size: var(--stz-size-title-lg); line-height: var(--stz-lh-label); }
.prose h3[id^="letter-"] { margin-top: var(--stz-space-11); font-size: var(--stz-size-h6); line-height: var(--stz-lh-h6); }
.prose a, main p a:not([class]) { color: var(--stz-text); text-decoration: underline; text-underline-offset: 0.2em; }
.table-scroll { max-width: 100%; overflow-x: auto; }
.table-scroll table { width: 100%; border-collapse: collapse; }
.table-scroll th,
.table-scroll td { padding: var(--stz-space-3) var(--stz-space-4); border-bottom: var(--stz-border-width-hairline) solid var(--stz-border-hairline); text-align: left; vertical-align: top; }
.table-scroll th { color: var(--stz-text); font-weight: var(--stz-weight-medium); }

/* Content pages (spec 7.1): hero variants, asides, static rows, notes */
.display--page { font-size: clamp(var(--stz-size-h4), 6vw, var(--stz-size-display-page-sm)); }
.page-hero__grid--solo { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
.page-hero__lead { color: var(--stz-text-muted); }
.page-hero__aside { min-width: 0; }
.page-hero .hero-note a { color: var(--stz-text); }
.light-island.hero-island { padding: 0; overflow: hidden; }
.hero-island--zoom img { scale: 1.2; }
.island-figure { margin: 0; }
.island-figure img,
.portrait img { display: block; width: 100%; }
.aside-list .stz-overline,
.statement-card .stz-overline { margin: 0 0 var(--stz-space-4); }
.rows__item { grid-template-columns: auto minmax(0, 1fr); color: var(--stz-text-muted); font-weight: var(--stz-weight-regular); }
.rows--static .rows__item { min-height: 0; }
.rows__n { min-width: var(--stz-space-6); color: var(--stz-accent-text); font-size: var(--stz-size-small); font-weight: var(--stz-weight-medium); }
.rows__text { display: grid; gap: var(--stz-space-1); color: var(--stz-text); }
.note { margin-top: var(--stz-space-6); padding-inline-start: var(--stz-space-5); border-inline-start: var(--stz-border-width-strong) solid var(--stz-accent-decor); }
.table-note { margin: var(--stz-space-4) 0 0; color: var(--stz-text-muted); font-size: var(--stz-size-small); }
.prose ul,
.prose ol { padding-inline-start: var(--stz-space-6); }
.prose li { margin-bottom: var(--stz-space-2); }
.prose > :first-child { margin-top: 0; }
.steps-actions .apply-cta { margin-top: 0; }
.towns--lg li { font-size: var(--stz-size-body); }
.address-card__email { display: block; margin: calc(var(--stz-space-4) * -1) 0 var(--stz-space-5); color: var(--stz-text-muted); }
.sources-list { margin: 0; padding-inline-start: var(--stz-space-6); font-size: var(--stz-size-small); }
.sources-list a { color: var(--stz-text); text-decoration: underline; }
.table-scroll th.is-pick { color: var(--stz-accent-text); }
.agent-row { display: flex; flex-wrap: wrap; gap: var(--stz-space-3); }

/* Example statement (merchant services hero). */
.statement-lines { display: grid; gap: var(--stz-space-4); margin: 0 0 var(--stz-space-5); padding: 0; list-style: none; }
.statement-lines li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--stz-space-4); align-items: start; font-size: var(--stz-size-small); }
.statement-lines b { display: block; font-size: var(--stz-size-body); }
.statement-rate { margin: 0; padding-top: var(--stz-space-4); border-top: var(--stz-border-width-hairline) solid var(--stz-border-hairline); }
.statement-card { margin: 0; }
.statement-card figcaption { margin-top: var(--stz-space-4); font-size: var(--stz-size-caption); }

/* Forms: /get-started/, /book/, the help search. */
.need-list .services__links { margin: 0; }
.booking-layout { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--stz-space-10) var(--stz-space-13); }
.booking-facts { margin: var(--stz-space-6) 0; padding: 0; list-style: none; border-top: var(--stz-border-width-hairline) solid var(--stz-border-hairline); }
.booking-facts li { padding-block: var(--stz-space-3); border-bottom: var(--stz-border-width-hairline) solid var(--stz-border-hairline); }
.booking-form fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.booking-fields-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--stz-space-4) var(--stz-space-5); margin-bottom: var(--stz-space-4); }
.booking-fields-grid > div { display: grid; gap: var(--stz-space-1); }
.booking-form .stz-textarea { margin: var(--stz-space-1) 0 var(--stz-space-4); }
.booking-consent { display: flex; gap: var(--stz-space-3); align-items: start; margin-bottom: var(--stz-space-4); }
.booking-trap { position: absolute; left: -100vw; }
.booking-status { margin-top: var(--stz-space-4); }
.guide-search__controls { display: flex; gap: var(--stz-space-3); }
.search-status { margin: var(--stz-space-4) 0; }

/* Responsive */
@media (max-width: 1279.98px) {
  .section,
  .close-band { padding-block: var(--stz-section-y-md); }
  .close-band__title { font-size: var(--stz-size-h2); }
  .statement-lines li { grid-template-columns: minmax(0, 1fr); gap: var(--stz-space-2); }
  .section-heading { gap: var(--stz-space-6) var(--stz-space-10); margin-bottom: var(--stz-space-10); }
  .services,
  .split,
  .rows-pair,
  .faq-grid { column-gap: var(--stz-space-10); }
}
@media (max-width: 1023.98px) {
  .section-heading,
  .split,
  .faq-grid,
  .rows-pair,
  .services,
  .page-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .hero-bottom,
  .close-band__bottom,
  .page-hero__grid--solo,
  .booking-layout { grid-template-columns: minmax(0, 1fr); }
  .display__outline { color: inherit; -webkit-text-fill-color: currentColor; -webkit-text-stroke: 0; }
  .proof { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .display { letter-spacing: var(--stz-tracking-h1); }
  .steps { grid-template-columns: minmax(0, 1fr); gap: var(--stz-space-8); }
}
@media (max-width: 767.98px) {
  .wrap { width: calc(100% - 2 * var(--stz-space-4)); }
  .section,
  .close-band { padding-block: var(--stz-section-y-sm); }
  .hero { min-height: 0; padding-block: var(--stz-space-11) var(--stz-space-12); }
  .hero .stz-overline { margin-bottom: var(--stz-space-6); }
  .display { font-size: var(--stz-size-h3); letter-spacing: var(--stz-tracking-tight); }
  .hero-bottom,
  .close-band__bottom { margin-top: var(--stz-space-8); padding-top: var(--stz-space-8); }
  .hero-lead,
  .close-band__body { font-size: var(--stz-size-body-lg); line-height: var(--stz-lh-body); }
  .close-band__title { font-size: var(--stz-size-h4); letter-spacing: var(--stz-tracking-h2); }
  .section-heading { margin-bottom: var(--stz-space-8); }
  .proof { grid-template-columns: minmax(0, 1fr); padding-block: var(--stz-space-8); }
  .services > li { grid-template-columns: minmax(0, 1fr); gap: var(--stz-space-3); }
  .apply-row .stz-btn,
  .apply-cta .stz-btn,
  .close-band__actions .stz-btn { flex: 1 1 100%; }
  .light-island { padding: var(--stz-space-4); }
  .booking-fields-grid { grid-template-columns: minmax(0, 1fr); }
  .guide-search__controls { flex-direction: column; }
  .faq summary { font-size: var(--stz-size-body-lg); }
}
