:root {
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #142c28;
  background: #f6f9f8;
  font-synthesis: none;
  --forest: #164d3d;
  --sea: #0f766e;
  --mint: #c7f2df;
  --ink: #142c28;
  --muted: #657772;
  --line: #dfe8e4;
  --paper: #fff;
  --coral: #ed917b;
}
* { box-sizing: border-box; letter-spacing: 0; }
body { margin: 0; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; touch-action: manipulation; }
button, a, input, select, textarea, summary { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible { outline: 3px solid #248fdf; outline-offset: 4px; }
button:disabled { cursor: default; }
button, input, select, textarea { max-width: 100%; }
img { max-width: 100%; }
svg { flex-shrink: 0; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3, strong, button { overflow-wrap: anywhere; }
h1, h2, h3 { line-height: 1.12; }
p { line-height: 1.6; }
small { line-height: 1.45; }
hr { border: 0; border-top: 1px solid var(--line); margin: 24px 0; }
.icon { width: 22px; height: 22px; vertical-align: middle; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.loading { min-height: 100dvh; display: grid; place-content: center; justify-items: center; padding: 28px; text-align: center; }
#app { min-height: 100dvh; display: flex; flex-direction: column; }
.site-header { height: 90px; flex-shrink: 0; background: #fff; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; padding: 0 38px; gap: 24px; z-index: 5; }
.brand { display: flex; align-items: center; gap: 10px; text-align: left; background: transparent; border: 0; padding: 0; flex-shrink: 0; min-height: 48px; }
.brand > span { font-size: 23px; font-weight: 780; }
.brand small { display: block; color: var(--muted); font-size: 10px; font-weight: 500; margin-top: 2px; }
.site-header nav, .header-actions { display: flex; gap: 8px; align-items: center; }
.button { border: 1px solid var(--line); background: #fff; min-height: 48px; padding: 11px 18px; border-radius: 6px; display: inline-flex; justify-content: center; align-items: center; gap: 10px; font-size: 14px; font-weight: 650; line-height: 1.3; transition: background .16s, border-color .16s, transform .16s; }
.button:hover { border-color: #79a798; background: #f1f9f5; }
.button:active { transform: translateY(1px); }
.button.primary { background: var(--forest); border-color: var(--forest); color: #fff; min-height: 52px; padding: 14px 21px; }
.button.primary:hover { background: #0d362a; }
.button.secondary { background: #fff; }
.button.ghost, .button.text-button { border-color: transparent; background: transparent; padding-left: 0; padding-right: 0; }
.button.ghost:hover, .button.text-button:hover { color: var(--sea); }
.button.icon-button { width: 48px; min-width: 48px; padding: 11px; font-size: 0; gap: 0; }
.button.icon-button .icon { width: 20px; height: 20px; }
.button.nav { background: transparent; border-color: transparent; font-weight: 550; color: #5e706a; }
.button.nav.active { background: #eef6f1; color: var(--forest); }
.button.auto-button { border-color: var(--forest); color: var(--forest); }
.site-footer { min-height: 48px; padding: 6px 34px; display: flex; align-items: center; justify-content: space-between; gap: 15px; border-top: 1px solid var(--line); background: #fff; flex-shrink: 0; font-size: 11px; color: var(--muted); }
.site-footer > span, .site-footer > div { display: flex; align-items: center; gap: 9px; }
.site-footer .icon { width: 16px; height: 16px; }
.site-footer .button { font-size: 11px; min-height: 34px; }
.site-footer > div { gap: 24px; }
.app-main { display: flex; flex: 1; min-height: 0; }
main { flex: 1; min-width: 0; outline: none; }
.journey-rail { width: 106px; flex-shrink: 0; background: #fff; border-right: 1px solid var(--line); display: flex; flex-direction: column; overflow-y: auto; gap: 3px; padding: 14px 8px; }
.rail-item { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; background: transparent; border: 1px solid transparent; border-radius: 6px; min-height: 74px; flex-shrink: 0; color: #5b7065; padding: 8px 3px; }
.rail-item > span:first-child { position: relative; }
.rail-item small { width: 100%; font-size: 9px; font-weight: 600; text-align: center; overflow-wrap: normal; }
.rail-item:hover { background: #f6faf8; color: var(--forest); }
.rail-item.selected { background: #eaf5ee; border-color: #d1e9db; color: var(--forest); }
.rail-item .rail-index { display: none; }
.complete-dot { position: absolute; right: -4px; top: -1px; width: 7px; height: 7px; background: var(--sea); border: 1px solid #fff; border-radius: 50%; }
.home { height: 100%; }
.hero { position: relative; min-height: 570px; height: 63vh; max-height: 760px; overflow: hidden; background: #123c2e; color: #fff; }
.hero-photo { position: absolute; right: 0; top: 0; height: 100%; width: 76%; object-fit: cover; object-position: center 42%; }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, #0b3026 0%, #0b3026f2 24%, #0b30267c 48%, #0b302600 76%), linear-gradient(0deg, #08271f99 0%, transparent 30%); }
.hero-copy { position: relative; width: 54%; padding: 68px 0 55px 6%; display: flex; align-items: flex-start; flex-direction: column; justify-content: center; height: 100%; }
.eyebrow { display: block; font-size: 11px; font-weight: 750; color: #638275; text-transform: uppercase; margin-bottom: 14px; }
.eyebrow.light { color: #c5e9d4; }
.hero h1 { font-size: 72px; font-weight: 700; line-height: 1.04; margin-bottom: 25px; }
.hero h1 em { font-style: normal; color: #bee8cb; }
.hero p { max-width: 440px; color: #e1ece4; font-size: 16px; margin-bottom: 28px; }
.hero .primary { background: #d5f2dc; border-color: #d5f2dc; color: #123d2c; }
.hero-secondary { background: #ffffff0d; color: #fff; border-color: #ffffff50; }
.hero-secondary:hover { background: #ffffff24; color: #fff; }
.actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.hero-caption { position: absolute; right: 5%; bottom: 32px; font-size: 14px; font-weight: 650; }
.hero-caption small { display: block; font-size: 10px; color: #e9f0e8; margin-top: 5px; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: #baf8be; display: inline-block; margin-right: 7px; }
.hero-number { position: absolute; right: 5%; top: 35px; display: flex; gap: 15px; align-items: center; }
.hero-number strong { font-size: 42px; font-weight: 450; color: #ffffff8a; }
.hero-number span { font-size: 11px; line-height: 1.5; color: #fff; }
.home-stories { padding: 25px 5% 30px; background: #f8faf9; }
.band-heading { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 18px; }
.band-heading .eyebrow { margin: 0 0 6px; }
.band-heading h2 { font-size: 25px; font-weight: 650; margin: 0; }
.story-strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(174px, 1fr); gap: 12px; overflow-x: auto; padding: 1px 1px 12px; scroll-snap-type: x proximity; }
.story-tile { position: relative; border: 1px solid #dee7e1; background: #fff; border-radius: 8px; text-align: left; min-height: 130px; padding: 17px; display: flex; flex-direction: column; align-items: flex-start; gap: 9px; scroll-snap-align: start; transition: border .2s, transform .2s; }
.story-tile:hover { border-color: var(--forest); transform: translateY(-2px); }
.tile-icon { width: 30px; height: 30px; display: grid; place-items: center; color: var(--sea); }
.tone-1 .tile-icon { color: #a15b44; }
.tone-2 .tile-icon { color: #456d99; }
.tone-3 .tile-icon { color: #887027; }
.story-tile strong { font-size: 14px; }
.story-tile small { color: var(--muted); font-size: 10px; max-width: 140px; }
.tile-arrow { position: absolute; top: 19px; right: 15px; width: 16px; height: 16px; color: #98a89d; }
.story-layout { display: grid; grid-template-columns: minmax(260px, .75fr) minmax(450px, 1.25fr); gap: 5%; max-width: 1640px; height: 100%; margin: auto; padding: 48px 4%; }
.story-narrative { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.story-kicker { display: flex; align-items: center; gap: 15px; color: #668174; font-size: 11px; font-weight: 600; margin-bottom: 20px; }
.story-kicker > span:first-child { border-right: 1px solid #ccd9d0; padding-right: 15px; white-space: nowrap; }
.story-narrative h1 { font-size: 47px; line-height: 1.1; font-weight: 650; margin-bottom: 22px; }
.story-description { color: var(--muted); max-width: 480px; font-size: 15px; margin-bottom: 25px; }
.stage-nav { list-style: none; padding: 0; margin: 0 0 24px; display: flex; flex-direction: column; gap: 6px; }
.stage-nav button { background: transparent; border: 1px solid transparent; min-height: 47px; padding: 7px 12px 7px 0; display: flex; align-items: center; gap: 13px; width: 100%; font-size: 13px; text-align: left; color: #63776a; border-radius: 6px; }
.stage-nav button > span { width: 33px; height: 33px; border: 1px solid #dce6de; border-radius: 50%; font-size: 11px; display: grid; place-items: center; flex-shrink: 0; background: #fff; }
.stage-nav .current { color: var(--forest); font-weight: 700; }
.stage-nav .current > span { background: var(--forest); color: #fff; border-color: var(--forest); }
.stage-nav .past { color: #567e69; }
.stage-nav .icon { width: 15px; height: 15px; }
.value-line { display: flex; align-items: flex-start; gap: 10px; padding-top: 18px; border-top: 1px solid #dbe6de; color: var(--forest); max-width: 410px; }
.value-line .icon { width: 18px; height: 18px; margin-top: 2px; }
.value-line p { font-size: 12px; font-weight: 600; margin: 0; }
.story-narrative > .text-button { align-self: flex-start; font-size: 11px; color: var(--muted); margin-top: 8px; }
.story-bottom { display: flex; gap: 10px; margin-top: 20px; }
.story-bottom .secondary { font-size: 12px; }
.experience { min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.experience-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 14px; }
.experience-heading .eyebrow { margin: 0; font-size: 10px; }
.experience-counter { display: inline-flex; align-items: center; gap: 6px; color: #5d7166; font-size: 10px; flex-shrink: 0; }
.experience-counter .icon { width: 13px; height: 13px; }
.workspace { background: #fff; border: 1px solid #d9e5dc; border-radius: 8px; box-shadow: 0 20px 65px #1b4b2d0b; display: flex; flex-direction: column; overflow: hidden; min-height: 530px; }
.workspace-bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 16px 25px; border-bottom: 1px solid #e5ece7; color: #547461; }
.workspace-bar > span:first-child { display: flex; gap: 9px; align-items: center; font-size: 12px; font-weight: 650; }
.workspace-bar .icon { width: 17px; height: 17px; }
.workspace-body { padding: 26px 29px; flex: 1; min-height: 0; overflow-y: auto; }
.workspace-action { padding: 18px 27px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border-top: 1px solid #e5ece7; background: #fbfdfb; }
.workspace-action p { font-size: 10px; line-height: 1.6; color: var(--muted); margin: 0; max-width: 280px; }
.workspace-action .button { font-size: 12px; min-height: 48px; max-width: 58%; }
.experience-caption { display: flex; justify-content: space-between; align-items: center; gap: 14px; font-size: 9px; color: #61736a; margin-top: 10px; }
.experience-caption .button { font-size: 10px; min-height: 26px; padding-top: 0; padding-bottom: 0; }
.experience-caption .icon { width: 14px; height: 14px; }
.auto-progress { height: 3px; margin-top: 8px; }
.auto-progress[hidden] { display: block; visibility: hidden; }
progress { width: 100%; height: 3px; display: block; accent-color: var(--sea); border: 0; }
progress::-webkit-progress-bar { background: #dfece4; }
progress::-webkit-progress-value { background: var(--sea); }
.badge { display: inline-flex; align-items: center; font-size: 10px; font-weight: 600; color: #68786d; background: #f1f5f1; border-radius: 4px; padding: 5px 8px; line-height: 1.4; max-width: 100%; }
.badge.green { background: #e8f6ed; color: #31754b; }
.badge.blue { background: #eaf2fd; color: #426793; }
.badge.coral { background: #ffede7; color: #a6614e; }
.badge.amber { background: #fcf5de; color: #8b722c; }
.overline { display: block; font-size: 10px; color: #64786a; margin-bottom: 6px; }
.pet-heading { display: flex; align-items: center; gap: 20px; margin-bottom: 24px; }
.pet-heading > img { width: 128px; height: 128px; object-fit: cover; border-radius: 8px; }
.pet-heading h2 { font-size: 34px; font-weight: 650; margin: 0 0 5px; }
.pet-heading p { font-size: 12px; color: var(--muted); margin: 0; }
.pet-heading > .badge { margin-left: auto; align-self: flex-start; }
.pet-heading.small { gap: 14px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.pet-heading.small > img { width: 63px; height: 63px; }
.pet-heading.small h2 { font-size: 23px; }
.tabs { display: flex; gap: 24px; border-bottom: 1px solid var(--line); margin-bottom: 20px; overflow-x: auto; }
.tabs button { font-size: 12px; padding: 12px 0; border: 0; background: transparent; color: var(--muted); border-bottom: 2px solid transparent; white-space: nowrap; min-height: 46px; }
.tabs button.active { border-bottom-color: var(--forest); color: var(--forest); font-weight: 700; }
.timeline { list-style: none; margin: 15px 0; padding: 0; }
.timeline li { display: flex; gap: 15px; position: relative; padding-bottom: 23px; }
.timeline li::before { position: absolute; content: ''; left: 5px; top: 13px; bottom: 0; border-left: 1px solid #dfebe2; }
.timeline li:last-child::before { display: none; }
.timeline li:last-child { padding-bottom: 4px; }
.timeline-dot { width: 11px; height: 11px; border: 3px solid #d6ede0; background: #538368; border-radius: 50%; flex-shrink: 0; margin-top: 4px; }
.timeline .blue .timeline-dot { background: #4d7ba4; border-color: #e1ebf8; }
.timeline strong { font-size: 12px; font-weight: 650; }
.timeline p { font-size: 11px; color: var(--muted); margin: 4px 0 0; }
.identity-line { font-size: 10px; color: #6c8476; display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--line); padding-top: 15px; margin-top: 17px; }
.identity-line .icon { width: 15px; height: 15px; }
.detail-row { display: flex; align-items: center; gap: 13px; padding: 16px 0; border-bottom: 1px solid #edf1ed; }
.detail-row > div { flex: 1; min-width: 0; }
.detail-row strong, .document-row strong, .provider-row strong, .event-row strong { display: block; font-size: 13px; font-weight: 650; }
.detail-row small, .document-row small, .provider-row small, .event-row small { display: block; color: var(--muted); font-size: 10px; margin-top: 4px; }
.detail-row .button { font-size: 10px; min-height: 44px; }
.row-icon { color: #7d9b8a; width: 32px; height: 36px; display: grid; place-items: center; flex-shrink: 0; }
.row-icon .icon { width: 22px; height: 22px; }
.section-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 4px 0 17px; }
.section-heading h3 { margin: 0; font-size: 17px; font-weight: 650; }
.section-heading > span { color: var(--muted); font-size: 10px; text-align: right; }
.document-row { display: flex; width: 100%; border: 0; border-bottom: 1px solid var(--line); background: transparent; gap: 12px; padding: 18px 0; align-items: center; text-align: left; }
.document-row > span:nth-child(2) { flex: 1; }
.document-row > .icon { color: var(--sea); width: 18px; }
.document-row:hover { background: #f7faf7; }
.fine { color: var(--muted); font-size: 10px; margin-top: 18px; }
.lead { font-size: 14px; color: #587263; line-height: 1.7; }
.chart-button { width: 100%; background: #f7faf8; border: 1px solid var(--line); border-radius: 6px; padding: 13px 20px; text-align: left; margin-top: 12px; }
.chart-button > div { display: flex; justify-content: space-between; font-size: 12px; }
.chart-button svg { display: block; height: 55px; width: 100%; margin-top: 10px; }
.chart-button small { font-size: 9px; color: var(--muted); }
.form-grid { display: grid; gap: 18px; margin: 15px 0 20px; }
.form-grid label, .field { display: flex; flex-direction: column; gap: 8px; font-size: 12px; font-weight: 600; }
input:not([type=checkbox]), textarea, select { border: 1px solid #d5e2d8; border-radius: 5px; background: #fff; min-height: 47px; padding: 11px 13px; color: var(--ink); width: 100%; }
textarea { resize: vertical; line-height: 1.6; }
input[type=checkbox] { accent-color: var(--sea); width: 19px; height: 19px; flex-shrink: 0; }
.notice { padding: 15px 16px; margin: 19px 0 7px; background: #f0f6ef; color: #5f7766; font-size: 11px; line-height: 1.65; border-left: 3px solid #b9d5bf; border-radius: 0; display: flex; gap: 10px; align-items: flex-start; }
.notice > .icon { width: 17px; height: 17px; margin-top: 1px; }
.notice.blue { background: #f0f5fb; color: #57708c; border-left-color: #b7cfe8; }
.notice.coral { background: #fff1eb; color: #996451; border-left-color: #edbaaa; }
.notice.amber { background: #fff8e5; color: #896f2c; border-left-color: #e1c56e; }
.success-band { background: #ecf7ef; border-left: 3px solid #7ab991; display: flex; gap: 12px; align-items: center; padding: 17px 19px; margin-bottom: 21px; }
.success-band > .icon { color: #44845a; }
.success-band strong { font-size: 13px; display: block; }
.success-band span { font-size: 10px; display: block; color: #71917a; margin-top: 4px; }
.qr-scene { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: center; min-height: 320px; }
.qr-copy .pet-heading .badge { display: none; }
.qr-copy h3 { font-size: 30px; margin: 20px 0 15px; }
.qr-copy p { font-size: 12px; color: var(--muted); }
.qr-block { margin: 0; background: #fff; padding: 15px; }
.qr-block img { display: block; width: 100%; aspect-ratio: 1; image-rendering: pixelated; }
.qr-block figcaption { text-align: center; font-size: 9px; color: var(--muted); line-height: 1.6; margin-top: 12px; }
.choice-list { margin: 15px 0; }
.check-option { display: flex; align-items: center; gap: 12px; padding: 15px 4px; font-size: 12px; border-bottom: 1px solid #edf2ee; }
.check-option .icon { color: #6b8977; width: 20px; }
.intake-option { width: 100%; text-align: left; background: #fff; border: 0; border-bottom: 1px solid var(--line); display: flex; gap: 18px; align-items: center; min-height: 85px; padding: 12px 7px; }
.intake-option > span { flex: 1; }
.intake-option strong { display: block; font-size: 15px; }
.intake-option small { color: var(--muted); font-size: 10px; display: block; margin-top: 4px; }
.intake-option .icon { color: var(--sea); }
.intake-option:hover { background: #f5faf7; }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 23px 0; }
.facts small { display: block; color: var(--muted); font-size: 10px; margin-bottom: 6px; }
.facts strong { display: block; font-size: 13px; font-weight: 600; }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; margin: 25px 0; }
.stats > div { border-right: 1px solid var(--line); padding-right: 10px; }
.stats > div:last-child { border: 0; }
.stats strong { font-size: 25px; display: block; font-weight: 650; margin-bottom: 7px; }
.stats span { font-size: 10px; color: var(--muted); }
.puppy-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; margin: 25px 0 0; }
.puppy { text-align: left; padding: 0; border: 0; background: transparent; }
.puppy img { aspect-ratio: 1.2; object-fit: cover; border-radius: 6px; width: 100%; }
.puppy strong { font-size: 13px; margin: 9px 0 5px; display: block; }
.puppy span { color: var(--muted); font-size: 9px; display: block; }
.transfer { display: flex; justify-content: center; align-items: center; gap: 35px; padding: 20px 0; }
.transfer > div { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.transfer > div > .icon { width: 35px; height: 35px; color: var(--sea); margin-bottom: 6px; }
.transfer strong { font-size: 14px; }
.transfer small { font-size: 11px; color: var(--muted); }
.adoption-hero { height: 235px; overflow: hidden; position: relative; margin: -26px -29px 23px; background: #244f35; }
.adoption-hero > img { position: absolute; right: 0; height: 100%; width: 60%; object-fit: cover; object-position: center 12%; }
.adoption-hero::after { position: absolute; content: ''; inset: 0; background: linear-gradient(0deg, #122e21da, transparent 75%); }
.adoption-hero > div { position: absolute; left: 28px; bottom: 20px; z-index: 1; color: #fff; }
.adoption-hero h2 { font-size: 32px; margin: 8px 0 4px; }
.adoption-hero p { margin: 0; font-size: 12px; }
.collection-total { text-align: center; padding: 24px 0; }
.collection-total > span { color: var(--muted); font-size: 13px; }
.collection-total > strong { font-size: 68px; display: block; margin: 10px 0 20px; color: var(--forest); }
.collection-total strong small { font-size: 24px; font-weight: 400; }
.stepper { display: flex; gap: 10px; justify-content: center; }
.stepper .button { font-size: 12px; }
.locality { display: flex; align-items: center; justify-content: space-between; font-size: 11px; color: #8b9c8f; margin: 24px 0 12px; }
.locality .icon { width: 15px; height: 15px; }
.provider-row { padding: 20px 0; display: flex; gap: 15px; align-items: center; width: 100%; border: 0; border-bottom: 1px solid var(--line); background: transparent; text-align: left; }
.provider-row > span:nth-child(2) { flex: 1; }
.provider-symbol { width: 50px; height: 50px; background: #edf5f8; color: #618698; display: grid; place-items: center; border-radius: 6px; }
.booking-service { display: flex; gap: 14px; background: #f4f8f5; padding: 18px; margin: 22px 0; align-items: center; }
.booking-service strong, .booking-service span { display: block; font-size: 13px; }
.booking-service span { font-size: 11px; color: var(--muted); margin-top: 4px; }
.slot-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; margin: 22px 0; }
.slot { min-height: 52px; border: 1px solid var(--line); background: #fff; border-radius: 5px; font-size: 14px; }
.slot.selected { background: var(--forest); color: #fff; border-color: var(--forest); }
.certificate { text-align: center; padding: 10px 20px; }
.certificate-icon { display: block; color: #b99546; margin-bottom: 17px; }
.certificate-icon .icon { width: 47px; height: 47px; }
.certificate h2 { font-size: 29px; margin: 14px 0 8px; }
.certificate p { font-size: 12px; color: var(--muted); }
.certificate > small { font-size: 10px; color: #8d9b90; line-height: 1.6; display: block; }
.book-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 22px 0 18px; }
.book { background: transparent; border: 0; padding: 0; text-align: left; }
.book img { width: 100%; aspect-ratio: .8; object-fit: cover; border-radius: 6px; object-position: center; }
.book strong { display: block; font-size: 12px; margin-top: 12px; }
.book > span { display: flex; align-items: center; gap: 6px; color: var(--sea); font-size: 10px; margin-top: 7px; }
.book .icon { width: 13px; height: 13px; }
.event-row { width: 100%; display: flex; gap: 18px; padding: 22px 0; text-align: left; border: 0; border-bottom: 1px solid var(--line); align-items: center; background: transparent; }
.event-date { min-width: 52px; min-height: 58px; display: grid; place-items: center; padding: 10px; background: #f8ede8; color: #9c674f; font-size: 12px; font-weight: 700; max-width: 55px; text-align: center; }
.event-row > span:nth-child(2) { flex: 1; }
.event-row > .icon { width: 18px; height: 18px; }
.public-qr { display: flex; align-items: center; gap: 25px; }
.public-qr > img { width: 42%; max-width: 200px; }
.public-qr h3 { font-size: 22px; margin-bottom: 10px; }
.public-qr p { font-size: 18px; color: var(--sea); }
.public-qr span { font-size: 12px; color: var(--muted); line-height: 1.6; }
.catalog-page, .roles-page { padding: 45px 4%; max-width: 1640px; margin: auto; }
.page-title { display: flex; justify-content: space-between; align-items: center; gap: 30px; margin-bottom: 30px; }
.page-title h1 { font-size: 39px; font-weight: 650; margin-bottom: 14px; }
.page-title p { font-size: 14px; color: var(--muted); margin-bottom: 0; }
.page-title .eyebrow { margin-bottom: 9px; }
.catalog-count { display: grid; grid-template-columns: auto auto; gap: 0 11px; align-items: center; flex-shrink: 0; }
.catalog-count strong { font-size: 30px; font-weight: 500; }
.catalog-count span { font-size: 11px; color: var(--muted); }
.filters { display: flex; gap: 14px; padding: 20px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.search-field { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid #d7e2d9; border-radius: 6px; padding: 0 13px; flex: 1; }
.search-field > .icon { width: 18px; color: var(--muted); }
.search-field input { border: 0; background: transparent; padding-left: 0; }
.select-field { display: flex; flex-direction: column; gap: 6px; min-width: 170px; font-size: 10px; color: var(--muted); }
.select-field select { font-size: 12px; min-height: 44px; }
.result-count { font-size: 11px; color: var(--muted); margin: 20px 0; }
.feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 36px; row-gap: 35px; }
.feature-group { border-top: 2px solid #dce7df; padding-top: 20px; }
.feature-group-title { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.feature-group-title > .icon { width: 22px; color: var(--sea); }
.feature-group h2 { font-size: 17px; margin: 0; }
.feature-group > p { font-size: 11px; color: var(--muted); min-height: 37px; margin-bottom: 13px; }
.feature-link { display: flex; align-items: center; gap: 12px; justify-content: space-between; width: 100%; text-align: left; border: 0; border-bottom: 1px solid var(--line); background: transparent; padding: 14px 1px; min-height: 64px; }
.feature-link > span:first-child { flex: 1; font-size: 12px; line-height: 1.5; }
.feature-link:hover { color: var(--sea); }
.feature-link > .icon { width: 16px; height: 16px; }
.status-inline { display: block; font-size: 9px; margin-top: 5px; }
.status-available { color: #6a8d73; }
.status-limited { color: #9b7b48; }
.roles-layout { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; }
.role-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-content: start; }
.role-item { text-align: left; border: 1px solid var(--line); border-radius: 6px; min-height: 86px; padding: 16px; background: #fff; display: flex; align-items: center; gap: 12px; }
.role-item > span { flex: 1; }
.role-item > .icon:first-child { color: #6d9180; }
.role-item > .icon:last-child { width: 15px; height: 15px; }
.role-item strong { font-size: 12px; display: block; line-height: 1.4; }
.role-item small { display: block; font-size: 9px; color: var(--muted); margin-top: 5px; }
.role-item.selected { border-color: #4b9274; background: #ecf6ef; }
.role-detail { position: sticky; top: 22px; align-self: start; border-left: 1px solid var(--line); padding: 30px 0 30px 36px; }
.role-detail h2 { font-size: 27px; }
.role-detail > p { color: var(--muted); font-size: 14px; }
.large-icon { display: block; color: #a9c4b3; margin-bottom: 25px; }
.large-icon .icon { width: 52px; height: 52px; }
.scenario-list { margin: 24px 0; }
.scenario-item { display: flex; gap: 15px; align-items: center; width: 100%; padding: 21px 0; border: 0; border-bottom: 1px solid var(--line); background: transparent; text-align: left; }
.scenario-item > span { color: #9aad9f; font-size: 13px; }
.scenario-item > div { flex: 1; }
.scenario-item strong { font-size: 13px; font-weight: 600; }
.scenario-item small { display: block; font-size: 10px; color: var(--muted); margin-top: 6px; }
.scenario-item > .icon { width: 18px; }
.scenario-layout .story-narrative h1 { font-size: 35px; }
.scenario-steps { margin-bottom: 25px; }
.scenario-steps button { display: flex; align-items: center; gap: 13px; background: transparent; width: 100%; border: 0; border-bottom: 1px solid var(--line); min-height: 56px; text-align: left; font-size: 12px; padding: 10px 0; color: var(--muted); }
.scenario-steps button > span { color: #8da797; min-width: 22px; }
.scenario-steps .selected { color: var(--forest); font-weight: 700; }
.scenario-steps .icon { width: 15px; height: 15px; }
.empty { padding: 40px 18px; text-align: center; }
.empty > span:first-child { display: block; color: #84a490; margin-bottom: 18px; }
.empty > span:first-child .icon { width: 38px; height: 38px; }
.empty h2, .empty h3 { font-size: 24px; margin-top: 20px; }
.empty p { font-size: 13px; color: var(--muted); max-width: 450px; margin: 10px auto 24px; }
.modal { color: var(--ink); border: 1px solid #d9e5db; border-radius: 8px; padding: 0; max-width: min(700px, calc(100% - 32px)); width: 700px; max-height: calc(100dvh - 56px); background: #fff; box-shadow: 0 30px 100px #0b251d44; }
.modal.wide { width: 960px; max-width: min(960px, calc(100% - 40px)); }
.modal::backdrop { background: #0e2c22a1; backdrop-filter: blur(8px); }
.modal-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 26px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: #fff; z-index: 2; }
.modal-header h2 { font-size: 20px; margin: 0; font-weight: 650; }
.modal-header .icon-button { border-color: transparent; flex-shrink: 0; }
.modal-body { padding: 26px 30px 32px; font-size: 14px; }
.modal-body > h3 { font-size: 23px; margin: 24px 0 15px; }
.modal-body > p { color: #62766b; }
.modal-body details { border-top: 1px solid var(--line); margin-top: 25px; padding-top: 20px; font-size: 12px; overflow-wrap: anywhere; }
.modal-body summary { cursor: pointer; min-height: 44px; font-weight: 650; }
.modal-body code { font-size: 11px; }
.modal-body .feature-link { min-height: 66px; }
.feature-preview { border-top: 1px solid var(--line); padding: 23px 0; margin-top: 22px; }
.feature-preview .adoption-hero { margin: 0 0 20px; border-radius: 6px; }
.scope-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding: 20px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 25px 0; }
.scope-grid strong { display: block; font-size: 30px; font-weight: 550; }
.scope-grid span { font-size: 11px; color: var(--muted); }
.result-hero { text-align: center; padding: 20px 10px 15px; }
.result-hero > .icon { width: 50px; height: 50px; color: var(--sea); margin-bottom: 20px; }
.result-hero .eyebrow { margin: 10px 0 14px; }
.result-hero h3 { font-size: 28px; margin: 0 auto 15px; max-width: 440px; }
.result-hero p { font-size: 13px; color: var(--muted); }
.print-document { padding: 10px 0 24px; }
.print-document h3 { font-size: 25px; margin: 28px 0; }
.print-document table { width: 100%; border-collapse: collapse; margin: 25px 0; }
.print-document td, .print-document th { text-align: left; padding: 15px 0; font-size: 12px; border-bottom: 1px solid var(--line); }
.document-stamp { color: #a76b48; border: 1px solid #eed4c4; padding: 12px; font-size: 10px; margin: 20px 0; }
.email-preview h3 { margin-top: 30px; font-size: 27px; }
@media (min-width: 1500px) {
  .story-narrative h1 { font-size: 58px; }
  .story-description { font-size: 17px; }
  .workspace { min-height: 640px; }
  .workspace-body { padding: 30px 36px; }
  .pet-heading > img { width: 150px; height: 150px; }
  .workspace-action p { font-size: 11px; }
  .workspace-action .button { font-size: 13px; }
  .hero h1 { font-size: 90px; }
  .hero-copy { padding-left: 7%; }
  .hero p { font-size: 18px; max-width: 470px; }
  .detail-row { padding: 20px 0; }
  .timeline li { padding-bottom: 28px; }
}
@media (min-width: 1101px) and (min-height: 750px) {
  #app { height: 100dvh; overflow: hidden; }
  .app-main { overflow: hidden; }
  main { overflow-y: auto; }
  .story-layout { min-height: 0; }
  .experience { min-height: 0; }
  .workspace { min-height: 0; max-height: calc(100dvh - 270px); flex: 1; }
  .hero { min-height: 0; height: calc(100dvh - 365px); }
}
@media (max-width: 1250px) {
  .site-header { padding: 0 22px; gap: 15px; }
  .site-header nav { gap: 0; }
  .button.nav { padding: 11px 12px; font-size: 12px; }
  .header-actions { gap: 5px; }
  .auto-button { font-size: 12px; padding: 11px; }
  .brand small { display: none; }
  .journey-rail { width: 86px; }
  .story-layout { gap: 4%; padding: 35px 3.5%; grid-template-columns: minmax(240px, .8fr) minmax(400px, 1.2fr); }
  .story-narrative h1 { font-size: 40px; }
  .hero h1 { font-size: 62px; }
  .hero-copy { padding-left: 5%; }
  .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  .site-header { height: 76px; padding: 0 18px; }
  .brand > span { font-size: 20px; }
  .brand > img { width: 30px; }
  .button.nav { font-size: 11px; padding: 9px; }
  .button.nav .icon { width: 17px; height: 17px; }
  .fullscreen { display: none; }
  .story-layout { grid-template-columns: minmax(200px, .75fr) minmax(340px, 1.25fr); gap: 28px; padding: 35px 25px; }
  .story-narrative h1 { font-size: 34px; }
  .story-description { font-size: 13px; }
  .experience-counter { display: none; }
  .workspace-body { padding: 20px; }
  .workspace-action { flex-direction: column; align-items: stretch; padding: 16px 20px; }
  .workspace-action p { max-width: none; }
  .workspace-action .button { max-width: 100%; }
  .workspace-bar { padding: 16px 20px; }
  .workspace-bar > .badge { display: none; }
  .workspace { min-height: 580px; }
  .pet-heading > img { width: 98px; height: 98px; }
  .pet-heading > .badge { display: none; }
  .pet-heading.small > img { width: 54px; height: 54px; }
  .pet-heading h2 { font-size: 28px; }
  .pet-heading.small h2 { font-size: 22px; }
  .hero { min-height: 540px; }
  .hero-copy { width: 62%; }
  .hero p { max-width: 370px; font-size: 14px; }
  .hero .actions { gap: 8px; }
  .hero .button { font-size: 12px; }
  .hero h1 { font-size: 58px; }
  .story-kicker { flex-direction: column; align-items: flex-start; gap: 9px; }
  .story-kicker > span:first-child { border: 0; }
  .experience-caption { flex-direction: column; align-items: flex-start; }
  .adoption-hero { margin: -20px -20px 20px; }
  .roles-layout { gap: 22px; }
  .role-grid { grid-template-columns: 1fr; }
  .role-detail { padding-left: 22px; }
  .page-title h1 { font-size: 31px; }
  .filters { flex-wrap: wrap; }
  .search-field { min-width: 100%; }
  .select-field { flex: 1; }
  .catalog-count { display: none; }
  .qr-scene { grid-template-columns: 1fr; }
  .qr-copy h3 { font-size: 24px; }
  .qr-block { width: 225px; margin: auto; }
}
@media (max-width: 760px) {
  .site-header { height: 68px; gap: 9px; padding: 0 12px; }
  .brand { gap: 6px; }
  .brand > span { font-size: 17px; }
  .brand > img { width: 27px; height: 27px; }
  .site-header nav { margin-left: auto; gap: 2px; }
  .button.nav, .button.auto-button { width: 42px; min-width: 42px; min-height: 44px; padding: 10px; font-size: 0; gap: 0; }
  .button.nav .icon, .button.auto-button .icon { width: 20px; height: 20px; }
  .header-actions > .icon-button { display: none; }
  .button.auto-button { border-color: transparent; }
  .app-main { flex-direction: column; }
  .journey-rail { width: 100%; height: 75px; padding: 5px 8px; border-right: 0; border-bottom: 1px solid var(--line); flex-direction: row; overflow-x: auto; overflow-y: hidden; }
  .rail-item { width: 77px; min-height: 62px; padding: 7px 3px; gap: 5px; }
  .rail-item small { font-size: 8px; }
  .rail-item .icon { width: 20px; height: 20px; }
  .hero { min-height: 630px; height: calc(100dvh - 125px); max-height: 760px; }
  .hero-photo { width: 100%; height: 100%; object-position: 30% center; }
  .hero-shade { background: linear-gradient(0deg, #092b22 0%, #092b22e6 35%, #092b2244 75%, #092b2222); }
  .hero-copy { justify-content: flex-end; width: 100%; padding: 40px 25px 80px; }
  .hero-copy .eyebrow { max-width: 240px; font-size: 9px; }
  .hero h1 { font-size: 48px; margin-bottom: 18px; }
  .hero p { font-size: 13px; max-width: 350px; margin-bottom: 20px; }
  .hero .actions { gap: 10px; }
  .hero .button { padding: 12px 14px; }
  .hero-caption { left: 25px; right: auto; bottom: 24px; font-size: 11px; }
  .hero-caption small { font-size: 8px; }
  .hero-number { right: 23px; top: 23px; }
  .hero-number span { font-size: 9px; }
  .hero-number strong { font-size: 32px; }
  .home-stories { padding: 25px 20px; }
  .band-heading { align-items: start; }
  .band-heading h2 { font-size: 23px; }
  .band-heading .text-button { display: none; }
  .story-strip { grid-auto-columns: 165px; }
  .story-layout { grid-template-columns: 1fr; padding: 28px 20px 30px; gap: 25px; height: auto; }
  .story-kicker { flex-direction: row; gap: 12px; font-size: 9px; margin-bottom: 15px; }
  .story-narrative h1 { font-size: 32px; margin-bottom: 14px; }
  .story-description { font-size: 13px; margin-bottom: 12px; }
  .stage-nav { flex-direction: row; gap: 6px; margin-bottom: 0; padding: 8px 0; }
  .stage-nav li { flex: 1; min-width: 0; }
  .stage-nav button { flex-direction: column; gap: 8px; text-align: center; font-size: 9px; padding: 6px 0; }
  .stage-nav button > span { width: 29px; height: 29px; font-size: 10px; }
  .value-line, .story-narrative > .text-button, .story-bottom { display: none; }
  .workspace { min-height: 0; }
  .workspace-body { padding: 21px 18px; }
  .workspace-action { padding: 17px 18px; }
  .workspace-action .button { font-size: 13px; min-height: 50px; }
  .workspace-action p { font-size: 10px; }
  .experience-heading { margin-bottom: 11px; }
  .experience-heading .eyebrow { font-size: 9px; }
  .experience-caption { gap: 4px; }
  .pet-heading { gap: 15px; }
  .pet-heading > img { width: 100px; height: 100px; }
  .pet-heading p { font-size: 11px; }
  .detail-row { padding: 17px 0; gap: 10px; }
  .detail-row > .badge { max-width: 95px; text-align: center; font-size: 8px; }
  .detail-row strong { font-size: 12px; }
  .detail-row .button { font-size: 9px; }
  .detail-row .button .icon { width: 16px; }
  .detail-row .row-icon { width: 24px; }
  .site-footer { flex-direction: column; padding: 13px 17px; gap: 5px; }
  .site-footer > span { font-size: 8px; align-items: flex-start; line-height: 1.5; text-align: center; }
  .site-footer > span .icon { width: 13px; height: 13px; }
  .site-footer > div { gap: 24px; }
  .site-footer .button { font-size: 10px; min-height: 44px; }
  .catalog-page, .roles-page { padding: 26px 20px; }
  .page-title { flex-direction: column; align-items: flex-start; gap: 12px; }
  .page-title h1 { font-size: 30px; }
  .page-title p { font-size: 12px; }
  .feature-grid { grid-template-columns: 1fr; }
  .select-field { min-width: 0; }
  .select-field select { font-size: 10px; }
  .search-field input { font-size: 12px; }
  .filters { gap: 10px; }
  .roles-layout { grid-template-columns: 1fr; }
  .role-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .role-item { padding: 13px 10px; gap: 9px; min-height: 90px; }
  .role-item strong { font-size: 10px; }
  .role-item small { font-size: 8px; }
  .role-item > .icon:last-child { display: none; }
  .role-item > .icon:first-child { width: 19px; }
  .role-detail { position: static; padding: 26px 0; border-left: 0; border-top: 1px solid var(--line); }
  .role-detail h2 { font-size: 25px; }
  .scenario-layout .story-narrative h1 { font-size: 29px; }
  .scenario-steps { display: flex; overflow-x: auto; gap: 10px; margin-bottom: 5px; }
  .scenario-steps button { min-width: 125px; max-width: 125px; border: 1px solid var(--line); border-radius: 5px; padding: 10px; font-size: 9px; align-items: flex-start; }
  .scenario-steps button > span { min-width: 12px; }
  .scenario-layout .experience-heading { flex-wrap: wrap; gap: 9px; }
  .scenario-layout .story-narrative > .text-button { display: flex; font-size: 11px; }
  .scenario-layout .experience > .text-button { font-size: 11px; }
  .qr-scene { grid-template-columns: 1fr; gap: 5px; }
  .qr-copy h3 { font-size: 26px; }
  .qr-block { width: 230px; padding: 12px; }
  .adoption-hero { margin: -21px -18px 20px; height: 225px; }
  .puppy-list { gap: 10px; }
  .puppy span { font-size: 8px; }
  .stats { gap: 10px; }
  .stats strong { font-size: 22px; }
  .stats span { font-size: 9px; }
  .book-grid { gap: 10px; }
  .book strong { font-size: 10px; }
  .book > span { font-size: 8px; }
  .book .icon { width: 11px; height: 11px; }
  .event-row { gap: 12px; }
  .event-row strong { font-size: 12px; }
  .transfer { gap: 20px; }
  .transfer strong { font-size: 12px; }
  .modal, .modal.wide { max-width: calc(100% - 20px); max-height: calc(100dvh - 25px); }
  .modal-header { padding: 12px 17px; }
  .modal-header h2 { font-size: 17px; }
  .modal-body { padding: 22px 20px; font-size: 13px; }
  .modal-body .feature-link { flex-wrap: wrap; gap: 8px; }
  .modal-body .feature-link > span:first-child { min-width: 65%; }
  .modal-body .feature-link > .badge { font-size: 8px; }
  .scope-grid { gap: 12px; grid-template-columns: 1fr 1fr; }
  .result-hero h3 { font-size: 25px; }
  .public-qr { flex-direction: column; text-align: center; }
  .public-qr > img { width: 200px; }
}
.story-photo { position: absolute; inset: 0; display: block; overflow: hidden; pointer-events: none; }
.story-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.story-photo img[hidden] { display: none; }
.story-photo.photo-unavailable { background: #163e33; }
.position-living img { object-position: 38% 52%; }
.position-clinic img { object-position: 67% 48%; }
.position-puppies img { object-position: 68% 42%; }
.position-adoption img { object-position: 67% 45%; }
.position-shelter img { object-position: 72% 48%; }
.position-grooming img { object-position: 50% 54%; }
.position-park img { object-position: 58% 70%; }
.position-gen-care img, .position-gen-discover img { object-position: 24% 50%; }
.position-gen-safety img, .position-gen-services img { object-position: 79% 50%; }
.position-gen-vet img, .position-gen-breeder img { object-position: 75% 48%; }
.position-gen-adoption img { object-position: 78% 50%; }
.position-gen-help img { object-position: 72% 48%; }
.position-gen-trust img { object-position: 90% 48%; }
.position-gen-platform img { object-position: 88% 52%; }
.position-gen-training img, .position-gen-hotel img { object-position: 78% 50%; }
.photo-story { position: relative; isolation: isolate; min-height: 740px; height: 100%; overflow: hidden; color: #fff; background: #102d28; }
.photo-copy { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; min-height: inherit; height: 100%; width: 56%; max-width: 830px; padding: 65px 0 110px 6%; }
.photo-copy h1 { font-size: 64px; line-height: 1.07; font-weight: 650; margin: 10px 0 26px; text-wrap: balance; }
.photo-copy > p:not(.photo-honesty) { font-size: 18px; color: #edf4ef; max-width: 480px; line-height: 1.7; margin-bottom: 30px; }
.photo-copy .primary { color: #123d2c; background: #d5f2dc; border-color: #d5f2dc; }
.photo-copy .primary:hover { background: #edfff1; }
.photo-copy .actions { gap: 14px; }
.photo-bottom { position: absolute; bottom: 30px; left: 6%; right: 5%; display: flex; justify-content: space-between; align-items: flex-end; gap: 18px; color: #edf4ef; font-size: 10px; }
.photo-bottom > span:first-child { display: flex; align-items: center; gap: 20px; }
.photo-bottom strong { font-size: 14px; font-weight: 600; }
.photo-story > .auto-progress { position: absolute; bottom: 0; left: 0; right: 0; margin: 0; }
.copy-right .photo-copy { margin-left: auto; padding: 65px 5% 110px 0; width: 49%; }
.story-benefits { list-style: none; margin: 0 0 30px; padding: 0; display: grid; gap: 17px; max-width: 480px; }
.story-benefits li { display: flex; align-items: flex-start; gap: 12px; font-size: 16px; line-height: 1.55; }
.story-benefits .icon { width: 20px; height: 20px; margin-top: 3px; color: #c7f2df; }
.photo-copy .photo-honesty { margin: 20px 0 0; max-width: 470px; font-size: 11px; color: #d4e0dc; }
.photo-home .hero { background: #102d28; }
.photo-home .hero-copy { margin-left: auto; width: 49%; padding: 35px 5% 60px 0; }
.photo-home .hero h1 { font-size: 68px; }
.photo-home .hero-caption { left: 5%; right: auto; bottom: 28px; text-shadow: 0 1px 10px #000; }
.photo-tile { min-height: 172px; padding: 17px; overflow: hidden; background: #163e33; color: #fff; justify-content: flex-end; border: 0; }
.photo-tile::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, #081e18f5, #081e1840 75%, transparent); pointer-events: none; }
.photo-tile .story-photo { inset: 0; }
.photo-tile .story-photo source { display: none; }
.photo-tile > :not(.story-photo) { position: relative; z-index: 1; }
.photo-tile .tile-icon { color: #e7f6ee; height: 22px; width: 22px; margin-bottom: auto; }
.photo-tile .tile-icon .icon { width: 21px; height: 21px; }
.photo-tile small { color: #e1eae5; font-size: 10px; }
.photo-tile > .tile-arrow { position: absolute; color: #fff; }
.photo-work { position: relative; isolation: isolate; min-height: 100%; background: #f6f9f8; }
.photo-work .story-layout { position: relative; max-width: none; grid-template-columns: minmax(250px, .7fr) minmax(430px, 1.3fr); gap: 7%; padding: 38px 4%; min-height: inherit; }
.photo-work .story-narrative { color: #fff; padding-top: 160px; justify-content: flex-end; }
.photo-work .story-narrative h1 { font-size: 38px; margin-bottom: 17px; }
.photo-work .story-description { color: #e2ece6; font-size: 14px; }
.photo-work .story-kicker, .photo-work .value-line, .photo-work .story-narrative > .text-button { color: #d2e9dc; }
.photo-work .stage-nav { margin-bottom: 16px; gap: 2px; }
.photo-work .stage-nav button { color: #ecf4ef; }
.photo-work .stage-nav button > span { background: #123d3099; border-color: #c3dec96e; color: #fff; }
.photo-work .stage-nav .current { background: #ffffff1a; }
.photo-work .stage-nav .current > span { background: #d5f2dc; color: #123d2c; }
.photo-work .value-line { border-color: #c3dec94d; }
.photo-work .story-bottom { gap: 8px; }
.photo-work .story-bottom .button { font-size: 11px; padding: 10px 12px; }
.story-outcome-link { font-size: 12px; min-height: 32px; align-self: flex-end; }
@media (min-width: 1500px) {
  .photo-copy h1 { font-size: 76px; }
  .photo-home .hero h1 { font-size: 84px; }
  .photo-work .story-narrative h1 { font-size: 46px; }
  .photo-home .home-stories { padding-top: 23px; }
}
@media (min-width: 1101px) and (min-height: 750px) {
  .photo-story { min-height: 0; height: calc(100dvh - 143px); }
  .photo-copy { min-height: 100%; }
  .photo-work { height: auto; }
  .photo-work .story-layout { height: auto; min-height: calc(100dvh - 143px); }
  .photo-work .story-narrative { padding-top: 100px; }
  .photo-work .workspace { max-height: calc(100dvh - 305px); }
  .photo-home .hero { height: calc(100dvh - 390px); min-height: 440px; }
}
@media (min-width: 1101px) and (max-height: 850px) {
  .photo-work .story-layout { padding-top: 24px; padding-bottom: 24px; }
  .photo-work .story-narrative { padding-top: 0; }
  .photo-work .story-narrative h1 { font-size: 33px; margin-bottom: 15px; }
  .photo-work .story-description { font-size: 12px; margin-bottom: 17px; }
  .photo-work .stage-nav button { min-height: 40px; padding-top: 4px; padding-bottom: 4px; }
  .photo-work .stage-nav button > span { width: 28px; height: 28px; }
  .photo-work .story-bottom { margin-top: 12px; }
  .photo-work .story-bottom .button { min-height: 40px; }
}
@media (min-width: 761px) and (max-width: 1250px) {
  .photo-copy h1 { font-size: 48px; }
  .photo-copy > p:not(.photo-honesty) { font-size: 16px; }
  .photo-copy { width: 59%; padding-left: 5%; }
  .copy-right .photo-copy { width: 53%; }
  .photo-home .hero h1 { font-size: 58px; }
  .photo-work .story-layout { gap: 6%; padding: 30px 3%; grid-template-columns: minmax(230px, .7fr) minmax(350px, 1.3fr); }
  .photo-work .story-narrative h1 { font-size: 32px; }
  .photo-work .story-description { font-size: 12px; }
  .photo-work .stage-nav button { font-size: 11px; }
  .photo-work .story-bottom { flex-wrap: wrap; }
}
@media (max-width: 760px) {
  .photo-story { height: auto; min-height: 790px; display: flex; flex-direction: column; }
  .photo-copy, .copy-right .photo-copy { width: 100%; max-width: none; min-height: 0; padding: 410px 24px 105px; margin: 0; justify-content: flex-end; flex: 1; }
  .photo-copy h1 { font-size: 38px; margin: 0 0 20px; }
  .photo-copy .eyebrow { font-size: 9px; line-height: 1.6; }
  .photo-copy > p:not(.photo-honesty) { font-size: 14px; margin-bottom: 23px; }
  .photo-copy .actions { gap: 10px; }
  .photo-copy .actions .button { font-size: 12px; padding: 12px 14px; min-height: 46px; }
  .photo-bottom { bottom: 22px; left: 24px; right: 24px; flex-wrap: wrap; gap: 9px; font-size: 9px; }
  .photo-bottom strong { font-size: 12px; }
  .story-benefits { gap: 13px; margin-bottom: 25px; }
  .story-benefits li { font-size: 14px; }
  .photo-ending .photo-copy { padding-top: 410px; }
  .photo-home .hero { min-height: 760px; height: auto; max-height: none; }
  .photo-home .hero-copy { width: 100%; padding: 430px 24px 95px; margin: 0; justify-content: flex-end; }
  .photo-home .hero h1 { font-size: 46px; }
  .photo-home .hero-caption { bottom: 24px; left: 24px; }
  .photo-tile { min-height: 172px; }
  .photo-work .story-layout { grid-template-columns: minmax(0, 1fr); padding: 0; gap: 0; }
  .photo-work .story-narrative { padding: 190px 24px 24px; min-height: 540px; background: linear-gradient(0deg, #102d28 0%, #102d2800 65%); }
  .photo-work .story-narrative h1 { font-size: 30px; }
  .photo-work .story-description { font-size: 13px; }
  .photo-work .story-kicker { font-size: 9px; }
  .photo-work .stage-nav { margin-bottom: 0; }
  .photo-work .stage-nav button { font-size: 9px; min-height: 64px; padding: 7px 3px; }
  .photo-work .stage-nav button > span { width: 29px; height: 29px; }
  .photo-work .experience { padding: 24px 16px; background: #f6f9f8; }
  .photo-work .workspace { min-height: 0; }
  .story-outcome-link { margin-top: 10px; }
}
/* One photographic stage beneath navigation and the interactive surface. */
#app.immersive { position: relative; isolation: isolate; background: #102d28; }
.immersive-backdrop, .immersive-scrim { position: fixed; inset: 0; pointer-events: none; }
.immersive-backdrop { z-index: -2; overflow: hidden; background: #102d28; }
.immersive-backdrop > .story-photo { inset: 0; mask-image: none; }
.immersive-scrim { z-index: -1; background: linear-gradient(90deg, #041b15df 0%, #041b15b3 38%, #041b1510 70%), linear-gradient(180deg, #041b15b8 0%, #041b1500 23%, #041b1500 68%, #041b15d9 100%); }
.copy-on-right .immersive-scrim { background: linear-gradient(270deg, #041b15e8 0%, #041b15b3 38%, #041b1500 72%), linear-gradient(180deg, #041b15b8, #041b1500 23%, #041b1500 65%, #041b15dc), linear-gradient(90deg, #041b1533, transparent 22%); }
.immersive .app-main { position: relative; }
.immersive .site-header, .immersive .site-footer, .immersive .journey-rail { background: transparent; border-color: transparent; color: #f5fcf8; }
.immersive .site-header { border: 0; }
.immersive .brand { color: #fff; }
.immersive .brand > img { filter: brightness(0) invert(1); }
.immersive .brand small { color: #edf6f0; }
.immersive .site-header .button { background: #06251d26; border-color: #ffffff38; color: #f5fcf8; }
.immersive .site-header .button.nav { border-color: transparent; }
.immersive .site-header .button.nav.active, .immersive .site-header .button:hover { background: #ffffff20; border-color: #ffffff48; color: #fff; }
.immersive .site-header .auto-button { border-color: #e3f6e796; }
.immersive .site-header button:focus-visible, .immersive .journey-rail button:focus-visible, .immersive .site-footer button:focus-visible { outline-color: #d5f2dc; outline-offset: 2px; }
.immersive .journey-rail { width: 96px; padding: 10px 7px; border: 0; scrollbar-width: thin; scrollbar-color: #ffffff70 transparent; }
.immersive .rail-item { min-height: 65px; color: #f3fbf5; text-shadow: 0 1px 8px #041b15a6; }
.immersive .rail-item:hover { background: #ffffff14; color: #fff; }
.immersive .rail-item.selected { background: #c7f2df20; border-color: #d5f2dc60; color: #e2ffea; }
.immersive .complete-dot { background: #c7f2df; border-color: #174b39; }
.immersive .site-footer { position: relative; border: 0; text-shadow: 0 1px 8px #041b15; }
.immersive .site-footer .text-button { color: #f5fcf8; }
.immersive .site-footer .text-button:hover { color: #c7f2df; }
.immersive .photo-story, .immersive .photo-work, .immersive .photo-home .hero { background: transparent; isolation: auto; }
.immersive .photo-work .story-layout, .immersive .scenario-layout { grid-template-columns: minmax(250px, .86fr) minmax(400px, 1.14fr); gap: 7%; max-width: 1800px; }
.immersive .story-narrative { color: #fff; }
.immersive .story-narrative h1 { max-width: 540px; }
.immersive .story-description { color: #f2f8f4; }
.immersive .story-kicker, .immersive .value-line, .immersive .story-narrative > .text-button, .immersive .scenario-layout .eyebrow { color: #e1f5e9; }
.immersive .experience-heading .eyebrow, .immersive .experience-counter, .immersive .experience-caption, .immersive .experience-caption .button, .immersive .story-outcome-link, .immersive .scenario-layout .experience > .text-button { color: #f5fcf8; text-shadow: 0 1px 9px #041b15; }
.immersive .experience-heading .eyebrow { font-size: 11px; }
.immersive .experience-counter { font-size: 11px; }
.immersive .workspace { --muted: #3b534b; --line: #254c3f24; color: #142c28; background: #f9fdfbf5; border: 1px solid #ffffff70; box-shadow: 0 18px 65px #041b1526; }
.immersive .workspace-bar { color: #385649; border-bottom-color: #254c3f24; background: #ffffff26; }
.immersive .workspace-body { background: transparent; }
.immersive .workspace-action { background: #ffffff38; border-top-color: #254c3f24; }
.immersive .workspace .intake-option { background: transparent; }
.immersive .workspace .intake-option:hover, .immersive .workspace .document-row:hover { background: #ffffff55; }
.immersive .workspace .overline, .immersive .workspace .identity-line, .immersive .workspace .locality, .immersive .workspace .lead, .immersive .workspace .certificate > small, .immersive .workspace .success-band span { color: #3b534b; }
.immersive .scenario-steps button { color: #edf6f0; border-bottom-color: #ffffff30; }
.immersive .scenario-steps button > span { color: #c7f2df; }
.immersive .scenario-steps .selected { color: #c7f2df; }
.immersive .scenario-layout .story-narrative .text-button { color: #edf6f0; }
.immersive .catalog-page, .immersive .roles-page { max-width: none; min-height: 100%; background: #f7fcf9f0; }
.immersive .photo-home { display: flex; flex-direction: column; }
.immersive .photo-home .hero { flex: 1; height: auto; max-height: none; min-height: 440px; }
.immersive .photo-home .hero-copy { min-height: inherit; }
.immersive .photo-home .hero-caption { bottom: 18px; }
.immersive .home-stories { background: transparent; color: #f5fcf8; padding-top: 18px; padding-bottom: 16px; }
.immersive .home-stories .eyebrow { color: #d8efdf; }
.immersive .home-stories .text-button { color: #f5fcf8; }
.immersive .photo-tile { min-height: 135px; border: 1px solid #ffffff30; box-shadow: none; }
.immersive .photo-tile:hover { border-color: #d5f2dc; }
@supports ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) {
  .immersive .workspace { background: #f9fdfbcc; -webkit-backdrop-filter: blur(10px) saturate(110%); backdrop-filter: blur(10px) saturate(110%); }
}
@media (min-width: 1101px) and (max-height: 950px) {
  .immersive .photo-work .story-layout { padding-top: 24px; padding-bottom: 24px; }
  .immersive .photo-work .story-narrative { padding-top: 0; justify-content: center; }
  .immersive .photo-work .story-narrative h1 { font-size: 36px; }
}
@media (min-width: 1101px) and (max-height: 850px) {
  .immersive .photo-work .story-narrative h1 { font-size: 32px; }
}
@media (min-width: 761px) and (max-width: 1250px) {
  .immersive .photo-work .story-layout, .immersive .scenario-layout { grid-template-columns: minmax(220px, .82fr) minmax(340px, 1.18fr); gap: 5%; padding-left: 3%; padding-right: 3%; }
}
@media (max-width: 760px) {
  .immersive .journey-rail { width: 100%; height: 75px; padding: 5px 8px; }
  .immersive .rail-item { min-height: 62px; }
  .immersive .site-header { background: transparent; }
  .immersive .site-header .button.nav, .immersive .site-header .auto-button { border-color: transparent; }
  .immersive-backdrop > .position-gen-care img, .immersive-backdrop > .position-gen-discover img { object-position: 24% 50%; }
  .immersive-backdrop > .position-gen-trust img { object-position: 90% 48%; }
  .immersive-scrim, .copy-on-right .immersive-scrim { background: linear-gradient(180deg, #041b15a8 0%, #041b1510 25%, #041b1533 40%, #041b15df 70%, #041b15f5 100%), linear-gradient(90deg, #041b151a, transparent 60%); }
  .immersive .photo-copy, .immersive .copy-right .photo-copy { padding-top: 290px; padding-bottom: 110px; min-height: 730px; }
  .immersive .photo-work .story-layout, .immersive .scenario-layout { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0; }
  .immersive .photo-work .story-narrative, .immersive .scenario-layout .story-narrative { background: transparent; min-height: 510px; padding: 185px 24px 26px; }
  .immersive .photo-work .experience, .immersive .scenario-layout .experience { background: transparent; padding: 20px 16px; }
  .immersive .scenario-layout .story-narrative { min-height: 0; padding-top: 150px; }
  .immersive .photo-home .hero { min-height: 740px; }
  .immersive .photo-home .hero-copy { padding-top: 330px; min-height: 740px; padding-bottom: 90px; }
  .immersive .home-stories { padding-top: 20px; }
  .immersive .photo-tile { min-height: 155px; }
  .immersive .catalog-page, .immersive .roles-page { padding: 28px 20px; }
  .immersive .workspace { background: #f9fdfbdc; }
}
.role-picker { color: #fff; padding: 34px 5% 40px; max-width: 1800px; margin: auto; }
.role-picker-heading h1 { font-size: 42px; max-width: 850px; margin-bottom: 12px; }
.role-picker-heading > p { color: #edf6f0; font-size: 15px; margin-bottom: 16px; }
.role-picker-heading > .button { min-height: 42px; font-size: 12px; }
.view-roles .immersive-scrim { background: #041b15c9; }
.role-picker-groups { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; margin-top: 28px; }
.role-picker-group h2 { font-size: 12px; color: #c7f2df; font-weight: 600; margin-bottom: 12px; }
.role-picker-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.role-choice { min-height: 76px; display: flex; align-items: center; gap: 12px; text-align: left; color: #fff; background: #082a21c9; border: 1px solid #d6f2e240; border-radius: 8px; padding: 12px 14px; }
.role-choice:hover { background: #174d3de8; border-color: #c7f2df; }
.role-choice > span { flex: 1; min-width: 0; }
.role-choice strong { font-size: 13px; line-height: 1.3; display: block; }
.role-choice small { display: block; font-size: 10px; margin-top: 5px; color: #d7ebe0; }
.role-choice > .icon:first-child { color: #c7f2df; width: 25px; height: 25px; }
.role-choice > .icon:last-child { width: 16px; height: 16px; }
.role-choice:focus-visible { outline-color: #c7f2df; }
.role-tour-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 4% 0; color: #fff; }
.role-tour-top > span { font-size: 13px; }
.role-tour-top .button { font-size: 12px; min-height: 42px; }
.immersive .role-presentation .story-layout { min-height: calc(100dvh - 205px); padding: 24px 4%; }
.immersive .role-presentation .story-narrative { padding-top: 0; justify-content: center; }
.immersive .role-presentation .story-narrative h1 { font-size: 44px; }
.role-presentation .story-description { font-size: 15px; line-height: 1.7; max-width: 520px; }
.role-presentation .workspace { min-height: 0; height: min(640px, calc(100dvh - 305px)); max-height: none; flex: none; }
.role-presentation .experience-heading { flex-wrap: wrap; gap: 8px; }
.role-presentation .experience-heading .eyebrow { margin: 0; }
.role-result { display: flex; align-items: flex-start; gap: 10px; border-top: 1px solid #ffffff38; padding-top: 18px; color: #d6f2df; font-size: 13px; line-height: 1.6; max-width: 520px; }
.role-result .icon { width: 19px; height: 19px; margin-top: 2px; }
.role-slide-nav { display: flex; align-items: stretch; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.role-slide-nav .button { min-height: 46px; font-size: 12px; }
.role-slide-nav > .button:first-child { width: 46px; padding: 10px; }
.role-slide-nav .button:disabled { opacity: .4; }
.role-progress { list-style: none; display: flex; align-items: center; gap: 5px; padding: 0; margin: 20px 0 0; max-width: 520px; }
.role-progress li { flex: 1; min-width: 0; }
.role-progress button { display: block; width: 100%; min-height: 30px; border: 0; padding: 0; background: transparent; position: relative; }
.role-progress button::after { content: ''; height: 3px; position: absolute; inset: 13px 0 auto; background: #ffffff60; }
.role-progress button[aria-current]::after { background: #c7f2df; height: 5px; top: 12px; }
.role-caveat { max-width: 520px; color: #edf6f0; font-size: 11px; line-height: 1.6; }
.role-caveat summary { cursor: pointer; min-height: 30px; padding: 6px 0; }
.role-caveat p { margin: 6px 0 12px; }
.role-finish .photo-copy { width: 65%; }
.role-finish .photo-copy h1 { white-space: pre-line; }
.role-finish .photo-copy > .button { margin-top: 18px; }
.partner-cover { position: relative; height: 170px; overflow: hidden; margin: -26px -29px 24px; }
.partner-cover img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
.partner-cover span { position: absolute; bottom: 0; left: 0; right: 0; padding: 24px 22px 12px; color: #fff; background: linear-gradient(transparent, #041b15e0); font-size: 11px; }
.partner-cover .icon { width: 15px; height: 15px; }
.partner-tags { display: flex; flex-wrap: wrap; gap: 7px; margin: 16px 0; }
@media (min-width: 761px) and (max-height: 850px) {
  .role-picker { padding-top: 18px; padding-bottom: 18px; }
  .role-picker-heading h1 { font-size: 34px; }
  .role-picker-heading > p { margin-bottom: 10px; }
  .role-picker-heading > .button { min-height: 36px; padding-top: 8px; padding-bottom: 8px; }
  .role-picker-groups { gap: 14px; margin-top: 14px; }
  .role-picker-group h2 { margin-bottom: 8px; }
  .role-choice { min-height: 54px; padding: 7px 12px; }
  .role-choice strong { font-size: 12px; }
  .role-choice small { margin-top: 2px; font-size: 9px; }
  .immersive .role-presentation .story-narrative h1 { font-size: 34px; }
  .role-presentation .story-description { font-size: 13px; }
}
@media (min-width: 761px) and (max-width: 1100px) {
  .role-picker { padding: 26px; }
  .role-picker-groups { gap: 20px; }
  .role-picker-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .immersive .role-presentation .story-layout { gap: 4%; grid-template-columns: minmax(220px, .9fr) minmax(330px, 1.1fr); }
  .immersive .role-presentation .story-narrative h1 { font-size: 32px; }
}
@media (max-width: 760px) {
  .role-picker { padding: 32px 20px; }
  .view-role-story .immersive-scrim { background: linear-gradient(180deg, #041b158f 0%, #041b156b 24%, #041b15b8 48%, #041b15e6 72%, #041b15f5 100%); }
  .role-picker-heading h1 { font-size: 32px; }
  .role-picker-heading > p { font-size: 13px; }
  .role-picker-groups { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .role-picker-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .role-choice { min-height: 84px; padding: 11px; gap: 8px; }
  .role-choice strong { font-size: 12px; }
  .role-choice > .icon:first-child { width: 20px; height: 20px; }
  .role-choice > .icon:last-child { display: none; }
  .role-tour-top { padding: 16px; flex-wrap: wrap; gap: 10px; }
  .role-tour-top > span { order: -1; width: 100%; color: #d6f2df; }
  .role-tour-top .button { font-size: 11px; padding: 10px; }
  .immersive .role-presentation .story-layout { padding: 0; min-height: 0; }
  .immersive .role-presentation .story-narrative { min-height: 0; padding: 110px 24px 14px; }
  .immersive .role-presentation .story-narrative h1 { font-size: 32px; }
  .role-presentation .story-description { font-size: 14px; }
  .role-progress { margin-top: 12px; }
  .role-presentation .workspace { height: auto; max-height: none; }
  .role-presentation .workspace-body { overflow: visible; }
  .role-presentation .workspace-action { flex-direction: row; }
  .role-presentation .workspace-action > .button { font-size: 11px; flex-shrink: 0; }
  .role-finish .photo-copy { width: 100%; }
  .partner-cover { margin: -21px -18px 20px; height: 150px; }
}
.immersive .site-footer .registration-trigger { min-height: 36px; padding: 3px 10px 3px 4px; gap: 8px; color: #f6fff9; background: #0a2d23b8; border-color: #c7f2df80; text-align: left; font-size: 11px; }
.registration-trigger > span:nth-child(2) { display: block; }
.registration-trigger small { display: block; color: #d1efdf; font-size: 9px; margin-top: 2px; font-weight: 400; }
.registration-trigger-icon { width: 28px; height: 28px; display: grid; place-items: center; background: #f7fff9; color: #164d3d; border-radius: 4px; }
.site-footer .registration-trigger-icon .icon { width: 23px; height: 23px; }
.registration-modal.modal.wide { width: 960px; background: #123e32; color: #fff; border-color: #c7f2df60; }
.registration-modal .modal-header { background: #123e32; border-bottom-color: #ffffff20; padding-top: 14px; padding-bottom: 14px; }
.registration-modal .modal-header h2 { font-size: 15px; }
.registration-modal .modal-header .button { background: transparent; color: #fff; border-color: #ffffff38; }
.registration-modal .modal-body { padding: 0; }
.registration-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 392px); gap: 36px; align-items: center; padding: 32px; color: #fff; }
.registration-logo { display: block; max-width: 180px; height: auto; margin-bottom: 44px; }
.registration-copy h2 { font-size: 38px; font-weight: 650; line-height: 1.15; margin-bottom: 22px; }
.registration-copy > p { font-size: 14px; line-height: 1.75; max-width: 360px; color: #e6f3eb; }
.registration-copy .registration-assurance { display: flex; align-items: flex-start; gap: 9px; font-size: 11px; color: #c7f2df; margin: 28px 0 0; }
.registration-assurance .icon { width: 18px; height: 18px; margin-top: 2px; }
.registration-scan { min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; }
.registration-code { width: 392px; max-width: 100%; margin: 0; padding-top: 36px; position: relative; }
.registration-code figcaption { position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 1; width: max-content; max-width: calc(100% - 24px); padding: 11px 20px; border-radius: 6px; background: #c7f2df; color: #123e32; font-size: 15px; font-weight: 750; }
.registration-code figcaption::after { content: ''; position: absolute; left: 26px; bottom: -9px; border: 10px solid transparent; border-top-color: #c7f2df; border-left-color: #c7f2df; border-bottom: 0; }
.registration-qr-frame { border: 3px solid #c7f2df; padding: 13px; border-radius: 8px; background: #fff; }
.registration-qr-frame img { display: block; width: 100%; height: auto; aspect-ratio: 1; image-rendering: pixelated; }
.registration-domain { margin-top: 16px; font-size: 23px; color: #fff; }
.registration-link { min-height: 44px; display: inline-flex; align-items: center; gap: 7px; color: #d1f5df; text-decoration: underline; text-underline-offset: 4px; font-size: 12px; }
.registration-link .icon { width: 16px; height: 16px; }
.registration-scan > small { font-size: 10px; color: #d4e8dc; }
.registration-modal .button:focus-visible, .registration-link:focus-visible { outline-color: #c7f2df; }
.immersive .role-finish { padding: 24px 4%; max-width: 1350px; margin: auto; color: #fff; }
.role-finish-heading > h1 { font-size: 25px; max-width: 850px; margin-bottom: 14px; }
.role-finish .registration-panel { background: #0b3026dc; border: 1px solid #c7f2df45; border-radius: 8px; }
.role-finish-actions { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.role-finish-actions .button { font-size: 12px; }
@media (prefers-reduced-motion: no-preference) {
  .registration-qr-frame, .immersive .registration-trigger { animation: registration-invitation 7s ease-in-out infinite; }
  @keyframes registration-invitation {
    0%, 56%, 88%, 100% { box-shadow: 0 0 0 0 #c7f2df00; }
    65%, 79% { box-shadow: 0 0 0 6px #c7f2df25; }
    72% { box-shadow: 0 0 0 2px #c7f2df0d; }
  }
}
@media (min-width: 761px) and (max-height: 850px) {
  .registration-panel { grid-template-columns: minmax(0, 1fr) minmax(0, 347px); padding: 24px; gap: 30px; }
  .registration-code { width: 347px; }
  .registration-logo { margin-bottom: 30px; }
  .registration-copy h2 { font-size: 34px; }
  .registration-domain { margin-top: 12px; font-size: 21px; }
  .immersive .role-finish { padding-top: 18px; padding-bottom: 18px; }
  .role-finish-heading > h1 { font-size: 22px; margin-bottom: 10px; }
  .role-finish .registration-panel { padding-top: 18px; padding-bottom: 18px; }
  .role-finish-actions { margin-top: 10px; }
}
@media (max-width: 760px) {
  .immersive .site-footer .registration-trigger { min-height: 44px; padding: 5px 8px; font-size: 10px; }
  .site-footer > div { gap: 14px; flex-wrap: wrap; justify-content: center; }
  .registration-panel { grid-template-columns: minmax(0, 1fr); padding: 24px 18px; gap: 26px; }
  .registration-copy { text-align: center; }
  .registration-logo { width: 150px; margin: 0 auto 20px; }
  .registration-copy .eyebrow { font-size: 9px; }
  .registration-copy h2 { font-size: 27px; margin-bottom: 16px; }
  .registration-copy > p { font-size: 12px; margin: 0 auto; }
  .registration-copy .registration-assurance { justify-content: center; margin: 16px auto 0; font-size: 10px; }
  .registration-code { width: 302px; }
  .registration-code figcaption { font-size: 13px; padding: 10px 17px; }
  .registration-modal .modal-header { padding: 10px 14px; }
  .registration-modal .modal-header h2 { font-size: 13px; }
  .immersive .role-finish { padding: 26px 16px; }
  .role-finish-heading > h1 { font-size: 22px; }
  .role-finish .registration-scan { order: -1; }
  .role-finish-actions .button { width: 100%; min-height: 44px; }
}
@media (max-width: 360px) {
  .registration-code { width: 257px; }
  .role-finish .registration-code { width: 212px; }
}
@media (prefers-reduced-transparency: reduce) {
  .immersive .workspace { background: #f9fdfbf7; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (forced-colors: active) {
  .immersive-backdrop, .immersive-scrim { display: none; }
  #app.immersive, .immersive .site-header, .immersive .site-footer, .immersive .journey-rail, .immersive .workspace { background: Canvas; color: CanvasText; }
  .immersive .brand > img { filter: none; }
  .immersive .workspace { -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .workspace-body, .hero-copy, .page-title { animation: arrive .32s ease both; }
  @keyframes arrive { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
@media print {
  #app, #announcement, .modal-header, .modal-body > .button, .modal-body > .actions { display: none !important; }
  body, #overlay { background: #fff; color: #000; }
  dialog.modal { position: static; display: block; overflow: visible; border: 0; max-height: none; max-width: none; width: 100%; box-shadow: none; margin: 0; }
  .modal::backdrop { display: none; }
  .modal-body { padding: 16mm; }
  .print-document { break-inside: avoid; }
}