/* Public portal pages (the merchant apply flow, sign-in and error pages) on top of stratamize.com's site.css and
   public-shell.css (vendored in brand/site). Values are --stz-* tokens or --_local variables built from them; no
   colour literals, no new --stz-* names. Breakpoints follow the site: 1280 / 1024 / 768. */

/* Header: the portal shows no Apply now button, so the phone number has room to show from 1024px up. */
@media (min-width: 1024px) {
  .stzp-public .site-header__phone-text { position: static; width: auto; height: auto; clip-path: none; }
}
.site-header--minimal .site-header__inner { justify-content: space-between; }
.stzp-header-note { margin: 0; color: var(--stz-on-surface-shell-muted); font-size: var(--stz-size-small); }

/* Page hero: dash eyebrow, the outlined display title, the intro and the path. */
.stzp-hero { padding-block: var(--stz-section-y-md) var(--stz-space-11); }
.stzp-hero .stz-overline { margin: 0 0 var(--stz-space-5); color: var(--stz-text); }
/* The site's -5px display tracking is tuned for 120px type; at this size the h1 tracking keeps the outlined strokes apart. */
.stzp-title { max-width: 20ch; margin: 0; font-size: clamp(var(--stz-size-h5), 5vw, var(--stz-size-h1)); letter-spacing: var(--stz-tracking-h1); text-wrap: balance; }
/* The outlined line sits on its own line with room for its descenders above the solid line. */
.stzp-title .display__outline { display: block; }
.stzp-title .display__solid { display: block; margin-top: var(--stz-space-3); }
.stzp-lead { max-width: 62ch; margin-top: var(--stz-space-6); color: var(--stz-text-muted); font-size: var(--stz-size-body-lg); }
.stzp-lead p { margin: 0 0 var(--stz-space-3); }
.stzp-lead p:last-child { margin-bottom: 0; }
.stzp-lead strong { color: var(--stz-text); }

/* The path: four steps with outlined numerals; the current one carries the crimson rule. */
.stzp-steps { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--stz-space-3) var(--stz-space-6); max-width: calc(var(--stz-container-max) * 0.75); margin: var(--stz-space-10) 0 0; padding: 0; list-style: none; }
.stzp-steps > li { --_rule: var(--stz-border-hairline); display: flex; align-items: center; gap: var(--stz-space-3); min-height: var(--stz-touch-target); padding-top: var(--stz-space-3); border-top: var(--stz-border-width-strong) solid var(--_rule); color: var(--stz-text-muted); font-size: var(--stz-size-small); font-weight: var(--stz-weight-medium); line-height: var(--stz-lh-label); }
.stzp-steps .stz-numeral-outline { font-size: var(--stz-size-h6); font-weight: var(--stz-weight-bold); line-height: 1; -webkit-text-stroke-width: var(--stz-border-width-hairline); -webkit-text-stroke-color: var(--stz-text-muted); }
.stzp-steps > li.is-done { --_rule: var(--stz-border-default); }
.stzp-steps > li.is-next { --_rule: var(--stz-border-accent); color: var(--stz-text); }
.stzp-steps > li[aria-current="step"] { --_rule: var(--stz-accent-decor); color: var(--stz-text); }
.stzp-steps > li[aria-current="step"] .stz-numeral-outline { -webkit-text-stroke-width: var(--stz-numeral-stroke-width); -webkit-text-stroke-color: var(--stz-accent-decor); }
.stzp-steps__state { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Body: the raised panel beside a short "talk to our team" column. */
.stzp-body { padding-block: var(--stz-section-y-md); }
.stzp-body__grid { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--stz-space-10) var(--stz-space-13); align-items: start; }
.stzp-panel { padding: var(--stz-space-10); }
.stzp-panel > :first-child { margin-top: 0; }
.stzp-panel > :last-child { margin-bottom: 0; }
.stzp-panel p { margin: 0 0 var(--stz-space-4); }
.stzp-panel h2 { margin: var(--stz-space-8) 0 var(--stz-space-4); font-size: var(--stz-size-title-lg); line-height: var(--stz-lh-label); letter-spacing: var(--stz-tracking-normal); }
.stzp-panel .stzp-form > h2:first-of-type { margin-top: 0; }
.stzp-panel h3 { margin: var(--stz-space-6) 0 var(--stz-space-3); font-size: var(--stz-size-title); line-height: var(--stz-lh-label); letter-spacing: var(--stz-tracking-normal); }
.stzp-panel a:not(.stz-btn) { color: var(--stz-text); text-decoration: underline; text-underline-offset: 0.2em; }
.stzp-panel a:not(.stz-btn):hover { color: var(--stz-text-muted); }
.stzp-panel a[href^="tel:"],
.stzp-alert a[href^="tel:"] { white-space: nowrap; }
.stzp-panel__title { margin: 0 0 var(--stz-space-2); color: var(--stz-text); font-size: var(--stz-size-title-lg); line-height: var(--stz-lh-label); }
.stzp-panel__intro { color: var(--stz-text-muted); }
.stzp-help { color: var(--stz-text-muted); }
.stzp-help .stz-overline { margin: 0 0 var(--stz-space-5); color: var(--stz-text); }
.stzp-help p { margin: 0 0 var(--stz-space-4); }
.stzp-help__phone { display: inline-flex; align-items: center; min-height: var(--stz-touch-target); color: var(--stz-text); font-size: var(--stz-size-title-lg); font-weight: var(--stz-weight-medium); }
.stzp-help a { color: var(--stz-text); }
.stzp-help a:hover { color: var(--stz-accent-text); }
.stzp-help address { margin: var(--stz-space-4) 0 0; color: var(--stz-text-muted); line-height: var(--stz-lh-label); }
.stzp-facts { margin: var(--stz-space-6) 0; padding: 0; list-style: none; border-top: var(--stz-border-width-hairline) solid var(--stz-border-hairline); }
.stzp-facts li { padding-block: var(--stz-space-3); border-bottom: var(--stz-border-width-hairline) solid var(--stz-border-hairline); font-size: var(--stz-size-small); line-height: var(--stz-lh-label); }

/* Order summary (Clover order hand-off): a hairline card above the form. */
.stzp-order { margin: 0 0 var(--stz-space-8); padding: var(--stz-space-6); border: var(--stz-border-width-hairline) solid var(--stz-border-default); border-inline-start: var(--stz-border-width-strong) solid var(--stz-accent-decor); border-radius: var(--stz-radius-card); background-color: var(--stz-surface-panel); }
.stzp-order .stz-overline { margin: 0 0 var(--stz-space-2); color: var(--stz-text-muted); }
.stzp-order p { margin: 0; }
.stzp-order strong { display: block; margin-bottom: var(--stz-space-1); color: var(--stz-text); font-size: var(--stz-size-title); line-height: var(--stz-lh-label); }
.stzp-order ul { margin: var(--stz-space-4) 0 0; padding: var(--stz-space-3) 0 0; list-style: none; border-top: var(--stz-border-width-hairline) solid var(--stz-border-hairline); }
.stzp-order li { padding-block: var(--stz-space-1); color: var(--stz-text); }
.stzp-order-ref { font-family: var(--stz-font-utility); white-space: nowrap; }

/* Notices: error summary and success/info lines. */
.stzp-alert { margin: 0 0 var(--stz-space-8); padding: var(--stz-space-5) var(--stz-space-6); border: var(--stz-border-width-hairline) solid var(--stz-border-default); border-inline-start: var(--stz-border-width-strong) solid var(--stz-status-danger); border-radius: var(--stz-radius-card); background-color: var(--stz-surface-panel); color: var(--stz-text); }
.stzp-alert--ok { border-inline-start-color: var(--stz-status-success); }
.stzp-alert p { margin: 0; }
.stzp-alert__title { color: var(--stz-text); font-weight: var(--stz-weight-medium); }
.stzp-alert ul { margin: var(--stz-space-2) 0 0; padding-inline-start: var(--stz-space-5); }
.stzp-alert li { padding-block: var(--stz-space-1); }
.stzp-alert a { color: var(--stz-text); text-decoration: underline; text-underline-offset: 0.2em; }
.stzp-alert__more { margin-top: var(--stz-space-2) !important; color: var(--stz-text-muted); }
.stzp-field-error { margin: var(--stz-space-1) 0 0; color: var(--stz-status-danger); font-size: var(--stz-size-small); font-weight: var(--stz-weight-medium); line-height: var(--stz-lh-label); }

/* Form: grouped fields, choice cards, one primary action and the call line. */
.stzp-form fieldset { min-width: 0; margin: 0 0 var(--stz-space-8); padding: 0; border: 0; }
.stzp-form legend.form-label,
.stzp-group-title { display: block; float: none; width: 100%; margin: 0 0 var(--stz-space-4); padding: 0; color: var(--stz-text); font-family: var(--stz-font-display); font-size: var(--stz-size-title); font-weight: var(--stz-weight-medium); line-height: var(--stz-lh-label); }
.stzp-group { margin: 0 0 var(--stz-space-8); }
.stzp-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--stz-space-5); }
.stzp-field { display: grid; align-content: start; gap: var(--stz-space-1); margin: 0 0 var(--stz-space-5); }
.stzp-fields > .stzp-field { margin: 0; }
.stzp-field--full { grid-column: 1 / -1; }
.stzp-field .stz-input,
.stzp-field .stz-textarea { background-color: var(--stz-surface-panel); }
.stzp-optional { color: var(--stz-text-muted); font-weight: var(--stz-weight-regular); }
.stzp-hint { margin: 0; color: var(--stz-text-muted); font-size: var(--stz-size-caption); line-height: var(--stz-lh-label); }
.stzp-fixed { margin: 0 0 var(--stz-space-8); padding: var(--stz-space-4) var(--stz-space-5); border: var(--stz-border-width-hairline) solid var(--stz-border-hairline); border-radius: var(--stz-radius-control); color: var(--stz-text); }

.stzp-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--stz-space-3); }
/* Five bands: three over two, on a six-column track, so each label keeps one line. */
.stzp-choices--5 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.stzp-choices--5 > .stzp-choice { grid-column: span 2; }
.stzp-choices--5 > .stzp-choice:nth-child(n + 4) { grid-column: span 3; }
.stzp-choices--5 .stzp-choice__label { white-space: nowrap; }
.stzp-choices--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: calc(var(--stz-container-max) / 3); }
/* Choice card: the wrapper is the card; the label's ::after covers it, so the whole card selects the radio. */
.stzp-choice { --_ring: var(--stz-border-control); --_inset: calc(var(--stz-space-4) + var(--stz-icon-sm) + var(--stz-space-3)); position: relative; display: grid; align-content: start; gap: var(--stz-space-1); min-width: 0; min-height: var(--stz-control-h-lg); padding: var(--stz-space-3) var(--stz-space-4) var(--stz-space-3) var(--_inset); border: var(--stz-border-width-hairline) solid var(--stz-border-default); border-radius: var(--stz-radius-control); background-color: var(--stz-surface-panel); }
.stzp-choice__input { position: absolute; top: 0; left: 0; width: 1px; height: 1px; margin: 0; opacity: 0; }
.stzp-choice__label { color: var(--stz-text); font-size: var(--stz-size-small); font-weight: var(--stz-weight-medium); line-height: var(--stz-lh-label); cursor: pointer; }
.stzp-choice__label::before { content: ""; position: absolute; top: calc(var(--stz-space-3) + (var(--stz-lh-label) - var(--stz-icon-sm)) / 2); left: var(--stz-space-4); width: var(--stz-icon-sm); height: var(--stz-icon-sm); border: var(--stz-border-width-hairline) solid var(--_ring); border-radius: var(--stz-radius-round); }
.stzp-choice__label::after { content: ""; position: absolute; inset: calc(var(--stz-border-width-hairline) * -1); border-radius: var(--stz-radius-control); }
.stzp-choice__hint { color: var(--stz-text-muted); font-size: var(--stz-size-caption); line-height: var(--stz-lh-label); }
.stzp-choice:hover { border-color: var(--stz-text-muted); }
.stzp-choice:has(> .stzp-choice__input:checked) { border-color: var(--stz-border-accent); background-color: var(--stz-accent-subtle); }
.stzp-choice__input:checked + .stzp-choice__label { --_ring: var(--stz-action-primary); }
.stzp-choice__input:checked + .stzp-choice__label::before { background-image: radial-gradient(circle, var(--stz-action-primary) 0 42%, transparent 48%); }
.stzp-choice__input:focus-visible + .stzp-choice__label::after { outline: var(--stz-focus-ring); outline-offset: var(--stz-focus-offset); }
.stzp-choice:has(> .stzp-choice__input[aria-invalid="true"]) { border-color: var(--stz-status-danger); }

/* Checkbox rows (consent, readiness ticks): a 44px target with the core check. */
.stzp-check { display: flex; align-items: flex-start; gap: var(--stz-space-3); min-height: var(--stz-touch-target); padding-block: var(--stz-space-2); color: var(--stz-text); }
.stzp-check .stz-check { margin-top: calc((var(--stz-lh-label) - var(--stz-icon-sm)) / 2); }
.stzp-check label { flex: 1 1 auto; min-width: 0; font-size: var(--stz-size-small); line-height: var(--stz-lh-label); cursor: pointer; }
.stzp-check .stzp-muted { display: block; color: var(--stz-text-muted); font-weight: var(--stz-weight-regular); }
.stzp-checks { margin: 0 0 var(--stz-space-4); padding: 0; border-top: var(--stz-border-width-hairline) solid var(--stz-border-hairline); }
.stzp-checks > .stzp-check { border-bottom: var(--stz-border-width-hairline) solid var(--stz-border-hairline); padding-block: var(--stz-space-3); }
.stzp-consent { margin: 0 0 var(--stz-space-6); padding-top: var(--stz-space-6); border-top: var(--stz-border-width-hairline) solid var(--stz-border-hairline); }
.stzp-consent label { color: var(--stz-text-muted); }

.stzp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--stz-space-3) var(--stz-space-6); margin: var(--stz-space-6) 0 0; }
.stzp-actions .stz-btn { min-height: var(--stz-touch-target); }
.stzp-panel .stzp-actions__or,
.stzp-actions__or { margin: 0; color: var(--stz-text-muted); font-size: var(--stz-size-small); }
.stzp-actions__or a { color: var(--stz-text); font-weight: var(--stz-weight-medium); white-space: nowrap; }
.stzp-panel .stzp-note,
.stzp-note { margin: var(--stz-space-6) 0 0; padding-inline-start: var(--stz-space-5); border-inline-start: var(--stz-border-width-strong) solid var(--stz-accent-decor); color: var(--stz-text-muted); }
.stzp-fineprint { margin: var(--stz-space-4) 0 0; color: var(--stz-text-muted); font-size: var(--stz-size-caption); line-height: var(--stz-lh-label); }

/* Readiness checklist */
.stzp-doc { margin: 0; padding: var(--stz-space-5) 0; border-bottom: var(--stz-border-width-hairline) solid var(--stz-border-hairline); }
.stzp-docs { border-top: var(--stz-border-width-hairline) solid var(--stz-border-hairline); }
.stzp-doc .stzp-check { padding-block: 0; }
.stzp-panel .stzp-doc__title { margin: 0 0 var(--stz-space-1); color: var(--stz-text); line-height: var(--stz-lh-label); }
.stzp-doc .stzp-hint { margin: 0 0 var(--stz-space-3); }
.stzp-file { display: block; width: 100%; max-width: 100%; min-height: var(--stz-touch-target); padding: var(--stz-space-2); border: var(--stz-border-width-hairline) dashed var(--stz-border-default); border-radius: var(--stz-radius-control); background-color: var(--stz-surface-panel); color: var(--stz-text-muted); font-size: var(--stz-size-small); }
.stzp-file::file-selector-button { margin-inline-end: var(--stz-space-3); padding: var(--stz-space-2) var(--stz-space-4); border: var(--stz-border-width-hairline) solid var(--stz-action-ghost-border); border-radius: var(--stz-radius-control); background-color: transparent; color: var(--stz-text); font: inherit; cursor: pointer; }
.stzp-badge { display: inline-block; margin-inline-start: var(--stz-space-1); padding: 0 var(--stz-space-2); border: var(--stz-border-width-hairline) solid var(--stz-border-default); border-radius: var(--stz-radius-tag); color: var(--stz-text); font-size: var(--stz-size-micro); font-weight: var(--stz-weight-medium); line-height: var(--stz-lh-label); text-transform: uppercase; letter-spacing: var(--stz-tracking-overline); vertical-align: middle; }
.stzp-list { margin: 0 0 var(--stz-space-4); padding: 0; list-style: none; border-top: var(--stz-border-width-hairline) solid var(--stz-border-hairline); }
.stzp-list > li { padding-block: var(--stz-space-3); border-bottom: var(--stz-border-width-hairline) solid var(--stz-border-hairline); color: var(--stz-text); line-height: var(--stz-lh-label); }
.stzp-list .stzp-muted { display: block; margin-top: var(--stz-space-1); color: var(--stz-text-muted); font-size: var(--stz-size-small); }
.stzp-muted { color: var(--stz-text-muted); }

/* Honeypot: off screen, never focusable (tabindex=-1 on the input). */
.stzp-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Sign-in, password and error pages: wordmark-only header, one centred panel, a short footer. */
.stzp-auth { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
.stzp-auth__main { flex: 1 0 auto; padding-block: var(--stz-section-y-sm) var(--stz-section-y-md); }
.stzp-auth__inner { width: min(100% - 2 * var(--stz-space-4), calc(var(--stz-container-max) * 0.4)); margin-inline: auto; }
.stzp-auth__inner > .stz-overline { margin: 0 0 var(--stz-space-5); color: var(--stz-text); }
.stzp-auth-card { padding: var(--stz-space-8); }
.stzp-auth-card > :last-child { margin-bottom: 0; }
.stzp-auth-card p { margin: 0 0 var(--stz-space-4); }
.stzp-auth-title { margin: 0 0 var(--stz-space-3); font-size: var(--stz-size-h5); line-height: var(--stz-lh-h5); letter-spacing: var(--stz-tracking-h2); }
.stzp-auth-card a:not(.stz-btn) { color: var(--stz-text); text-decoration: underline; text-underline-offset: 0.2em; }
.stzp-auth-alt { margin: var(--stz-space-5) 0 0 !important; font-size: var(--stz-size-small); }
.stzp-auth-legal { margin: var(--stz-space-5) 0 0; color: var(--stz-text-muted); font-size: var(--stz-size-small); text-align: center; }
.stzp-auth-numeral { display: block; margin-bottom: var(--stz-space-3); }
.stzp-linkbtn { padding: 0; border: 0; background: none; color: var(--stz-text); font: inherit; text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; min-height: var(--stz-touch-target); }
.stzp-qr { display: flex; justify-content: center; margin: 0 0 var(--stz-space-4); padding: var(--stz-space-4); border-radius: var(--stz-radius-card); background-color: var(--stz-surface-inverse); }
.stzp-qr svg { max-width: 100%; height: auto; }
.stzp-copyblock { margin: 0 0 var(--stz-space-4); padding: var(--stz-space-4); border: var(--stz-border-width-hairline) solid var(--stz-border-hairline); border-radius: var(--stz-radius-card); background-color: var(--stz-surface-sunken); color: var(--stz-text); font-family: var(--stz-font-utility); font-size: var(--stz-size-small); white-space: pre-wrap; }
.stzp-otp { font-family: var(--stz-font-utility); font-size: var(--stz-size-title); letter-spacing: var(--stz-tracking-overline-wide); text-align: center; }
.stzp-auth-foot { padding-block: var(--stz-space-6); border-top: var(--stz-border-width-hairline) solid var(--stz-border-hairline); color: var(--stz-on-surface-shell-muted); font-size: var(--stz-size-caption); }
.stzp-auth-foot .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--stz-space-2) var(--stz-space-5); }
.stzp-auth-foot p { margin: 0; }
.stzp-auth-foot nav { display: flex; flex-wrap: wrap; gap: 0 var(--stz-space-5); }
.stzp-auth-foot a { color: var(--stz-on-surface-shell-muted); }
.stzp-auth-foot a:hover { color: var(--stz-on-surface-shell); }

/* Titles that open a panel or a group sit flush. */
.stzp-panel .stzp-group-title,
.stzp-panel .stzp-panel__title { margin-top: 0; }

/* Responsive. Below 1280 the panel takes the full width and the "talk to our team" column follows it; the hero arc would run
   behind the path there, so it goes. */
@media (max-width: 1279.98px) {
  .stzp-body__grid { grid-template-columns: minmax(0, 1fr); }
  .stzp-help { max-width: 60ch; }
  .stzp-hero .stz-arc-layer { display: none; }
}
@media (max-width: 767.98px) {
  .stzp-hero { padding-block: var(--stz-section-y-sm) var(--stz-space-8); }
  .stzp-title { font-size: var(--stz-size-h5); letter-spacing: var(--stz-tracking-h2); }
  .stzp-lead { font-size: var(--stz-size-body); }
  .stzp-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: var(--stz-space-8); }
  .stzp-body { padding-block: var(--stz-space-6) var(--stz-section-y-sm); }
  .stzp-panel { padding: var(--stz-space-6) var(--stz-space-4); }
  .stzp-fields,
  .stzp-choices { grid-template-columns: minmax(0, 1fr); }
  .stzp-choices--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stzp-choices--5 > .stzp-choice,
  .stzp-choices--5 > .stzp-choice:nth-child(n + 4) { grid-column: auto; }
  .stzp-choices--5 > .stzp-choice:last-child { grid-column: 1 / -1; }
  .stzp-choices--5 .stzp-choice__label { white-space: normal; }
  .stzp-choices--2 { max-width: none; }
  .stzp-actions .stz-btn { flex: 1 1 100%; }
  .stzp-auth-card { padding: var(--stz-space-6) var(--stz-space-4); }
}