/* Kzoo-only visual layer. Shared forms, state and provider behavior stay intact. */
.passenger-page {
  --kz-nav: #103e3c;
  --kz-action: #12645d;
  --kz-bg: #f7f5ef;
  --kz-text: #193e3a;
  --kz-secondary: #536761;
  --kz-border: #d7ded7;
  --kr-warm: #e2b77a;
  background: var(--kz-bg);
  text-rendering: optimizeLegibility;
}
.passenger-page h1, .passenger-page h2, .passenger-page h3 { text-wrap: balance; }
.passenger-page h1 { letter-spacing: -.04em; }
.passenger-page a { color: #115f59; }
.passenger-page :focus-visible { outline: 3px solid #a85c13; outline-offset: 4px; }
.passenger-page .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; }
.passenger-page .btn, .passenger-page button { border-radius: 10px; min-height: 48px; }
.passenger-page summary { min-height: 44px; padding-block: 10px; cursor: pointer; }
.passenger-page .btn-primary { background: var(--kz-action); border-color: var(--kz-action); color: #fff; }
.passenger-page .btn-primary:hover { background: #0b4c47; border-color: #0b4c47; }
.passenger-page .btn-outline-primary { border-color: #779e94; color: #115f59; background: #fffdfa; }
.passenger-page .btn-outline-secondary { border-color: #b4c2b9; color: #435d52; background: #fffdfa; }
.passenger-page button:disabled, .passenger-page .btn:disabled { opacity: .65; cursor: not-allowed; }
.passenger-page input:not([type=checkbox]):not([type=radio]):not([type=hidden]),
.passenger-page select, .passenger-page textarea { border-color: #8caaa0; border-radius: 10px; background: #fffefa; }
.passenger-page textarea { min-height: 108px; }
.passenger-page label:has(input[type=checkbox]) { min-height: 44px; cursor: pointer; }
.passenger-page .kz-field:has(input[type=checkbox]) label { min-height: 44px; display: flex; align-items: center; }
.passenger-page .kz-card, .passenger-page .kz-ride-row, .passenger-page .kz-board-toolbar { border-radius: 18px; background: #fffefa; box-shadow: 0 3px 14px #193e3a04; }
.passenger-page .kz-card { padding: 28px; }
.passenger-page .kz-card h2 { margin-top: 0; }
.passenger-page .kz-main { padding-top: 28px; }
.passenger-page .kz-brand { letter-spacing: -.035em; font-size: 1.35rem; color: var(--kz-nav); }
.passenger-page .kz-monogram { background: var(--kz-nav) url("../images/kzoo/mark.051cad421f0f.svg") center/contain no-repeat; color: transparent; border-radius: 11px; width: 38px; height: 38px; }
.passenger-page .kz-shell-header { background: #fffefa; }
.passenger-page .kz-menu summary { border: 1px solid var(--kz-border); border-radius: 10px; background: #fffefa; }
.passenger-page .kz-simple-nav a[aria-current] { background: #dfebe3; box-shadow: inset 0 -3px 0 var(--kz-action); }
.passenger-page .kz-banner { letter-spacing: .025em; }
.passenger-page .kz-page-heading h1 { font-size: clamp(2rem, 3.5vw, 2.85rem); }
.passenger-page .kz-status { border-radius: 100px; padding: 7px 12px; }
.passenger-page .kz-next-step { border-left: 4px solid var(--kz-action); background: #f0f6ef; }
.passenger-page .kz-next-hint { font-weight: 650; }
.passenger-page .kz-ride-state .kz-row-link { text-decoration: underline; text-underline-offset: 5px; }
.passenger-page .kz-attention { background: #edf3eb; border-color: #b8cdbf; border-left-color: var(--kz-action); }
.passenger-page .kz-attention-grid { gap: 12px; }
.passenger-page .kz-attention-grid > a { padding: 20px; border-radius: 15px; border-color: var(--kz-border); background: #fffefa; }
.passenger-page .kz-attention-grid strong { font-size: 2rem; color: var(--kz-nav); }
.passenger-page .kz-attention-grid > a:hover { border-color: var(--kz-action); background: #edf3eb; }
.passenger-page .kz-filters a[aria-current], .passenger-page .kz-actions a[aria-current] { background: var(--kz-nav); color: white; border-color: var(--kz-nav); }
.passenger-page .kz-route-review { background: #edf3eb; border-color: #b8cdbf; border-radius: 14px; padding: 20px; }
.passenger-page .kz-saved-username { background: #e8f0e8; }
.passenger-page .kr-nav-group { display: grid; gap: 4px; }
.passenger-page .kr-nav-label { font-size: .6875rem; text-transform: uppercase; letter-spacing: .13em; font-weight: 750; color: var(--kz-secondary); padding: 16px 16px 4px; margin: 0; }
.passenger-page .kz-rail-label { margin: 16px 12px 4px; }
.passenger-page .kz-rail .kr-nav-label { color: #b6cfc2; }
.passenger-page .kz-rail .kz-primary-nav a { padding: 11px 14px; font-size: .9rem; }
.passenger-page .kz-rail .kz-primary-nav a[aria-current] { background: #245b51; box-shadow: inset 3px 0 0 var(--kr-warm); }
.passenger-page .kz-rail .kz-primary-nav a:hover { background: #245b51; }
.passenger-page .kz-rail .kz-account { font-size: .8125rem; padding-top: 18px; }
.passenger-page .kz-rail .kz-monogram { background-color: #1d504a; }
.passenger-page .kz-rail .kz-brand { color: #fff8e9; }
.passenger-page .kz-account a { padding: 7px 0; }
.passenger-page .kr-account-note { font-size: .8125rem; color: var(--kz-secondary); }
.passenger-page .kr-sms-identity { max-width: 900px; margin: 24px auto 0; padding: 16px 24px; background: #edf3eb; font-size: .875rem; }

/* The same brand in the public pages. The approved pricing presenter is unchanged. */
.passenger-page.kz-public { background: var(--kz-bg); }
.kz-public .kp-header { min-height: 94px; border-bottom: 1px solid var(--kz-border); }
.kz-public .kp-header nav a { min-height: 44px; display: inline-flex; align-items: center; }
.passenger-page.kz-public nav a { min-width: 44px; }
.kz-public .kp-signin { background: #fffefa; border-color: #b4c2b9; border-radius: 10px; }
.kz-public .kp-hero { grid-template-columns: 1.15fr 1fr; gap: 56px; padding: 56px 0 72px; align-items: center; }
.kz-public .kp-hero h1 { font-size: clamp(2.55rem, 4.5vw, 4.45rem); line-height: 1.03; letter-spacing: -.065em; }
.kz-public .kp-hero h1 span { color: #367166; }
.kz-public .kp-pill { border-color: #b9c8b9; color: #3f594e; background: transparent; font-size: .75rem; letter-spacing: .09em; }
.kz-public .kp-intro { font-size: 1.125rem; line-height: 1.7; }
.kz-public .kp-caveat { color: #536761; }
.kz-public .kp-band, .kz-public .kp-pricing-section { background: #edf1e9; }
/* Both legacy paragraph selectors, including the important intro, use this theme. */
.kz-public .kp-community-band { background: var(--kz-nav); --kp-community-copy: #fff8ec; }
.kz-public .kp-community-band h2, .kz-public .kp-community-band p, .kz-public .kp-community-band a { color: #fff8ec; }
.kz-public .kp-community-band a:focus-visible { outline-color: var(--kr-warm); }
.kz-public .kp-decision-card, .kz-public .kp-driver-card, .kz-public .kp-beta-path { background: #fffefa; border-color: var(--kz-border); border-radius: 22px; }
.kz-public .kp-driver-card { background: #e7ede4; }
.kz-public .kp-faq details { background: transparent; border-color: var(--kz-border); }
.kz-public .kp-faq summary { min-height: 48px; }
.kz-public .kp-footer { padding-top: 40px; border-top: 1px solid #c8d4c8; }
.kz-public .kp-footer nav a { min-height: 44px; display: inline-flex; align-items: center; }
.kz-public .kp-section { padding-top: 72px; padding-bottom: 72px; }
.kz-public .kp-form-layout { gap: 56px; }
.kz-public .kp-back { min-height: 44px; display: inline-flex; align-items: center; }
.kz-public .kp-note { background: #e9eee4; border-color: #b7c8b7; }
.kz-public .kp-reading { overflow-wrap: anywhere; }
.kr-city { position: relative; margin: 0; overflow: hidden; isolation: isolate; background: #193e3a; border-radius: 24px; color: #fff; }
.kr-city picture { display: block; height: 100%; }
.kr-city img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: 50% 60%; }
.kr-city figcaption { position: absolute; inset: 0; padding: 36px; background: linear-gradient(180deg, #072e3280, transparent 48%, #072e3226); }
.passenger-page .kr-photo-eyebrow { font-size: .6875rem; text-transform: uppercase; letter-spacing: .15em; font-weight: 650; color: #fff6e8; }
.passenger-page .kr-photo-title { font-size: clamp(2.4rem, 4vw, 4rem); font-weight: 720; line-height: 1.02; letter-spacing: -.045em; color: #fff6e8; margin-top: 14px; }
.passenger-page .kr-photo-note { font-size: .875rem; color: #fff6e8; margin-top: 18px; }
.kr-hero-photo { height: 570px; transform: rotate(1deg); border-bottom-right-radius: 80px; }

/* Photo failure leaves the form, identity and every action independent and usable. */
.kr-auth .kp-header { min-height: 84px; }
.kr-signin { width: min(1120px, calc(100% - 64px)); margin: 36px auto 64px; display: grid; grid-template-columns: 1.05fr 1fr; border: 1px solid var(--kz-border); border-radius: 26px; background: #fffefa; overflow: hidden; }
.kr-signin-photo { border-radius: 0; min-height: 690px; }
.kr-signin-photo picture { position: absolute; inset: 0; }
.kr-signin-panel { min-width: 0; padding: 44px 48px 36px; }
.passenger-page .kr-signin-panel h1 { font-size: 2.5rem; margin-bottom: 8px; }
.passenger-page .kr-signin-intro { color: var(--kz-secondary); margin-bottom: 28px; }
.passenger-page .kr-signin-panel .kz-field { margin-bottom: 18px; }
.kr-signin-submit { width: 100%; margin-top: 2px; }
.kr-username-help { display: flex; align-items: center; gap: 12px; margin: 12px 0; }
.passenger-page .kr-username-help .kz-copy-result { min-height: 0; margin: 0; }
.passenger-page .kr-username-help button { font-size: .8125rem; padding: 6px 10px; min-height: 44px; }
.kr-signin-join { border-top: 1px solid var(--kz-border); margin-top: 22px; padding-top: 20px; font-size: .875rem; }
.kr-signin-join a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 650; margin-right: 20px; }
.passenger-page .kr-signin-join p { margin-bottom: 0; }
.passenger-page .kr-login-error { padding: 12px 14px; background: #fff0e7; border: 1px solid #d5a68d; border-radius: 10px; }
@media (min-width: 1000px) {
  .passenger-page.kz-role-owner { padding-left: 256px; }
  .passenger-page .kz-rail { width: 256px; padding: 24px 18px; }
}
@media (max-width: 999px) {
  .passenger-page .kz-menu[open] summary { width: max-content; margin-left: auto; }
  .passenger-page .kz-menu-content .kr-nav-group { padding-bottom: 8px; border-bottom: 1px solid var(--kz-border); }
  .kr-signin-panel { padding: 32px; }
  .kz-public .kp-hero { gap: 32px; }
}
@media (max-width: 760px) {
  .kz-public .kp-header { min-height: 80px; }
  .kz-public .kp-hero { grid-template-columns: minmax(0, 1fr); padding: 36px 0 48px; gap: 32px; }
  .kz-public .kp-hero h1 { font-size: clamp(2.55rem, 9.5vw, 3.8rem); }
  .kr-hero-photo { height: 350px; transform: none; border-bottom-right-radius: 56px; }
  .kr-city figcaption { padding: 26px; }
  .kr-hero-photo img { object-position: 50% 58%; }
  .kz-public .kp-section { padding-top: 48px; padding-bottom: 48px; }
  .kz-public .kp-form-layout { gap: 24px; }
  .passenger-page .kz-card { padding: 20px; border-radius: 16px; }
  .passenger-page .kz-route-review { padding: 16px; }
  .kr-auth .kp-header { width: calc(100% - 32px); min-height: 72px; flex-wrap: nowrap; }
  .kr-auth .kp-header nav { width: auto; border: 0; padding: 0; }
  .kr-auth .kp-header nav a { padding: 8px 0; font-size: .8125rem; }
  .kr-signin { width: min(520px, calc(100% - 32px)); margin: 16px auto 40px; grid-template-columns: minmax(0, 1fr); border-radius: 18px; }
  .kr-signin-photo { min-height: 0; height: 132px; }
  .kr-signin-photo img { object-position: 50% 62%; }
  .kr-signin-photo figcaption { padding: 16px 20px; background: linear-gradient(90deg, #082e32b3, #082e320d); }
  .passenger-page .kr-signin-photo .kr-photo-title { font-size: 1.85rem; margin-top: 6px; }
  .kr-signin-photo .kr-photo-note, .kr-signin-photo .kr-photo-eyebrow { display: none; }
  .kr-signin-panel { padding: 24px 22px; }
  .passenger-page .kr-signin-panel h1 { font-size: 1.85rem; }
  .passenger-page .kr-signin-panel .kr-signin-intro { margin-bottom: 20px; }
  .passenger-page .kr-signin-panel .kz-field { margin-bottom: 14px; }
  .passenger-page .kr-signin-panel .kz-eyebrow { font-size: .6875rem; }
  .passenger-page .kz-attention-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .passenger-page .kz-attention-grid > a { padding: 16px; }
  .passenger-page .kz-attention-grid span { font-size: .8125rem; }
}
@media (forced-colors: active) {
  .passenger-page .kz-monogram { background: none; color: CanvasText; }
  .passenger-page a[aria-current] { outline: 2px solid LinkText; }
}