/* Shared customer frame: the logo, navigation and progress never jump between steps. */
html{height:100%;overflow:hidden}
body{height:100dvh;min-height:0;overflow:hidden}
body[data-flow-step] .experience{height:calc(100dvh - var(--demo-strip-height,24px));min-height:0;overflow:hidden}
body[data-flow-step] .app-area{height:100%;min-height:0;display:flex;flex-direction:column}
body[data-flow-step] .mobile-header{width:100%;max-width:520px;padding:12px 20px 10px;min-height:64px;flex:none;justify-content:center}
body[data-flow-step] .mobile-header img{width:144px;height:42px;object-fit:contain}
body[data-flow-step] .workspace{width:100%;max-width:520px;margin:0 auto;padding:0 20px max(12px,env(safe-area-inset-bottom));flex:1;min-height:0;display:flex;flex-direction:column}
body[data-flow-step] .flow-header{position:static;inset:auto;display:flex;align-items:center;justify-content:space-between;flex:none;min-height:44px;margin:0 0 12px;gap:12px}
body[data-flow-step] .icon-button{width:44px;height:44px;font-size:25px;line-height:1}
body[data-flow-step] .language-shortcut{min-height:44px;max-width:calc(100% - 56px);padding:8px 12px;margin-left:auto;gap:9px;border-radius:13px;font-size:15px;line-height:1.25}
.shortcut-flag{font-size:22px}
body[data-flow-step] .progress-steps{flex:none;gap:6px;margin:0 0 18px;min-height:4px}
body[data-flow-step] .progress-steps i{height:4px}
body[data-flow-step] #view{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-gutter:stable}
body[data-flow-step] #view>section{min-height:0}
body[data-flow-step] .step-title{font-size:30px;line-height:1.15;margin:0 0 12px}
body[data-flow-step] .step-description{font-size:17px;line-height:1.45;margin:0 0 18px}
body[data-flow-step] .trip-chip{padding:10px 12px;margin:0 0 16px;min-height:42px}
/* The first screen has no navigation; retain the same brand position and content rhythm. */
body[data-flow-step=language] .workspace{padding-top:12px}
body[data-flow-step=language] .client-focus .step-title{margin:0 0 24px}
body[data-flow-step=language] .focus-language-choice{min-height:80px;padding:16px 20px;border-radius:18px}
body[data-flow-step=language] .focus-more-languages{min-height:72px;margin-top:18px;padding:15px 20px;border-radius:18px}
/* PIN: visible digits and a large keypad that uses the available height. */
body[data-flow-step=pin] #view{overflow:hidden;scrollbar-gutter:auto;display:flex}
body[data-flow-step=pin] #view>section{flex:1;min-width:0;height:100%;display:grid;grid-template-rows:auto auto clamp(58px,9dvh,76px) 40px minmax(0,1fr);gap:8px}
body[data-flow-step=pin] .pin-intro .step-title{font-size:32px;line-height:1.15;margin:0}
body[data-flow-step=pin] .trip-chip{margin:0;min-height:40px;padding:7px 12px;justify-content:center;gap:12px}
body[data-flow-step=pin] .trip-chip b{font-size:20px}
body[data-flow-step=pin] .pin-dots{margin:0;gap:12px;align-self:center}
body[data-flow-step=pin] .pin-dots span{width:clamp(58px,16vw,72px);height:clamp(58px,9dvh,76px);border:1.5px solid #d4e1e7;border-radius:15px;font-size:clamp(32px,5dvh,42px);font-weight:700;font-variant-numeric:tabular-nums;line-height:1;color:#001a26}
body[data-flow-step=pin] .pin-dots span.filled{background:#eaf1f5;border-color:#7093a4}
body[data-flow-step=pin] .pin-dots span.filled::after{content:none}
body[data-flow-step=pin] .pin-status{height:40px;min-height:40px;font-size:14px;line-height:20px;padding:0;margin:0}
body[data-flow-step=pin] .keypad{width:100%;max-width:360px;min-height:0;max-height:360px;height:100%;margin:0 auto;align-self:end;grid-template-rows:repeat(4,minmax(0,1fr));gap:10px 14px}
body[data-flow-step=pin] .keypad button{min-height:0;height:auto;border-radius:18px;background:#e8f0f4;font-size:34px;font-weight:650;line-height:1;box-shadow:inset 0 0 0 1px #dbe6eb}
body[data-flow-step=pin] .keypad button.erase{font-size:27px;background:transparent;box-shadow:none}
/* Long parties and waiver text scroll inside the shared frame, never the page. */
body[data-flow-step=group] #party-form>.primary{position:sticky;bottom:0;z-index:2;box-shadow:0 -8px 15px #f8fafbe6,0 7px 18px #bd26351c}
body[data-flow-step=handoff] .queue-count{margin:0 0 12px}
body[data-flow-step=handoff] .handoff-art{height:78px;margin:8px 0 16px}
body[data-flow-step=handoff] .signing-for{margin:12px 0;padding:12px}
body[data-flow-step=success] .success-hero{margin:6px 0 18px}
body[data-flow-step=success] .success-symbol{width:56px;height:56px;margin-bottom:16px}
body[data-flow-step=journey] #view{overflow:hidden;scrollbar-gutter:auto}
body[data-flow-step=journey] .journey-heading{margin-top:0}
@media(max-height:700px){
 body[data-flow-step] .mobile-header{min-height:52px;padding-top:6px;padding-bottom:6px}
 body[data-flow-step] .mobile-header img{width:132px;height:40px}
 body[data-flow-step] .flow-header{margin-bottom:8px}
 body[data-flow-step] .progress-steps{margin-bottom:12px}
 body[data-flow-step] .step-title{font-size:28px}
 body[data-flow-step=language] .client-focus .step-title{margin-bottom:16px}
 body[data-flow-step=language] .focus-quick-choices{gap:10px}
 body[data-flow-step=language] .focus-language-choice{min-height:68px;padding:12px 18px}
 body[data-flow-step=language] .focus-more-languages{min-height:64px;margin-top:14px}
 body[data-flow-step=pin] .keypad{gap:7px 12px;max-height:290px}
 body[data-flow-step=pin] .keypad button{font-size:31px;border-radius:15px}
 body[data-flow-step=pin] #view>section{gap:6px}
}
@media(max-width:350px){body[data-flow-step] .workspace{padding-left:16px;padding-right:16px}.language-shortcut .shortcut-flag{font-size:20px}body[data-flow-step=pin] .pin-dots{gap:10px}}
@media(min-height:701px){body[data-flow-step=pin] .keypad{max-height:440px;align-self:start}}
@media(max-height:480px) and (min-width:560px){
 body[data-flow-step] .mobile-header{min-height:44px;padding:4px 20px}
 body[data-flow-step] .mobile-header img{height:36px;width:122px}
 body[data-flow-step] .flow-header{margin-bottom:5px}
 body[data-flow-step] .progress-steps{margin-bottom:8px}
 body[data-flow-step=pin] .workspace{max-width:760px}
 body[data-flow-step=pin] #view>section{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);grid-template-rows:auto auto 58px minmax(22px,1fr);column-gap:24px;row-gap:6px}
 body[data-flow-step=pin] .pin-intro{grid-column:1;grid-row:1}
 body[data-flow-step=pin] .trip-chip{grid-column:1;grid-row:2}
 body[data-flow-step=pin] .pin-dots{grid-column:1;grid-row:3;gap:8px}
 body[data-flow-step=pin] .pin-dots span{width:48px;height:54px;font-size:30px}
 body[data-flow-step=pin] .pin-status{grid-column:1;grid-row:4;height:auto;min-height:22px;align-self:start}
 body[data-flow-step=pin] .keypad{grid-column:2;grid-row:1/-1;gap:6px 10px;align-self:stretch;max-height:none}
 body[data-flow-step=pin] .keypad button{font-size:25px;border-radius:12px}
}
body[data-flow-step=group] .fields{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
body[data-flow-step=group] .person-card{padding:14px;margin-bottom:12px}
body[data-flow-step=group] .person-top{margin-bottom:12px;font-size:16px}
body[data-flow-step=group] .person-top .person-note{font-size:13px}
body[data-flow-step=group] .group-toggle{margin-bottom:16px}
body[data-flow-step=group] .group-toggle button{min-height:48px;font-size:15px;padding:9px 7px}
@media(max-height:570px){body[data-flow-step=journey] #view{overflow:auto}}
/* Every departure uses the same time and driver columns, whatever the text width. */
.tour-choice{color:var(--navy);display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) 22px;gap:12px;align-items:center}
.tour-choice .tour-time{width:100%;min-width:0;font-variant-numeric:tabular-nums;letter-spacing:-.7px;font-size:clamp(22px,6.6vw,27px)}
.tour-choice .tour-info{min-width:0;min-height:42px;padding-left:14px;align-self:stretch}
.tour-choice .tour-info b{overflow-wrap:anywhere}
.tour-choice .arrow{margin-left:0;justify-self:end}
.person-avatar svg,.party-choice-icon svg{display:block;width:22px;height:25px;fill:currentColor;flex:none}
.person-avatar.child svg{width:23px;height:23px}
.party-choices{display:grid;gap:16px;margin-top:24px}
.party-choice{display:flex;align-items:center;gap:18px;width:100%;min-height:110px;padding:20px;border:1px solid #d8e4e9;border-radius:20px;background:#fff;color:#173c49;text-align:left;box-shadow:0 5px 20px #001a2604;transition:background .25s,transform .25s,border-color .25s}
.party-choice:hover{background:#edf4f6;border-color:#9db9c6}.party-choice:active{transform:scale(.98)}
.party-choice strong{font-size:21px;line-height:1.35;flex:1}
.party-choice-icon{display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:17px;background:#eaf1f5;color:#426779;flex:none}
.party-family-icon{gap:0;background:#fbf0e8;color:#956447}.party-family-icon svg{width:22px}.party-family-icon svg+svg{width:19px;align-self:center;margin-top:7px}
body[data-flow-step=party] #view{overflow:auto}
.pin-confirmation{position:fixed;inset:0;z-index:110;display:grid;place-items:center;overflow:hidden;pointer-events:all;background:#f8fafb44;backdrop-filter:blur(2px)}
.pin-confirm-orb{width:140px;height:140px;display:grid;place-items:center;border-radius:50%;background:#e1f5e9;box-shadow:0 0 0 12px #ffffffb3;color:#268451;will-change:transform,opacity}
.pin-confirm-orb svg{width:76px;height:76px;fill:none;stroke:currentColor;stroke-width:6;stroke-linecap:round;stroke-linejoin:round}
@media(max-height:700px){body[data-flow-step=language] .focus-language-choice{min-height:64px;padding:10px 18px}body[data-flow-step=language] .focus-language-flag{height:40px}.party-choices{margin-top:18px}.party-choice{min-height:96px;padding:16px}.party-choice strong{font-size:19px}}
@media(prefers-reduced-motion:reduce){.party-choice{transition:none}.pin-confirmation{backdrop-filter:none}}
@media(max-height:700px){
 body[data-flow-step=language] .focus-language-choice{min-height:60px;padding:8px 16px}
 body[data-flow-step=language] .focus-language-name{font-size:22px}
 body[data-flow-step=language] .focus-language-flag{height:36px;font-size:30px}
 body[data-flow-step=language] .focus-more-languages{min-height:58px;padding:12px 16px;gap:12px}
 body[data-flow-step=language] .focus-more-languages>svg{width:28px;height:28px}
 body[data-flow-step=language] .focus-more-languages>span{display:flex;align-items:center;gap:8px}
 body[data-flow-step=language] .focus-more-languages strong{font-size:18px}
 body[data-flow-step=language] .focus-more-languages small{font-size:14px;margin:0}
}
.party-choice-copy{flex:1;min-width:0}.party-choice-copy strong{display:block}.party-choice-copy small{display:block;font-size:14px;line-height:1.45;color:#5c7886;font-weight:500;margin-top:6px}
.guardian-trigger{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;min-height:58px;padding:13px 14px;border:1px solid #c9dbe4;border-radius:12px;background:#f6fafc;color:#587380;font-size:17px;font-weight:500;text-align:left;transition:border-color .2s,background .2s}
.guardian-trigger.has-selection{color:#173c49;font-weight:650;background:#eef5f7}.guardian-trigger:hover{border-color:#7e9eaf;background:#edf4f7}.guardian-trigger[aria-invalid=true]{border-color:#bd2635;box-shadow:0 0 0 1px #bd2635}
.guardian-trigger>span{flex:1;min-width:0;line-height:1.4;overflow-wrap:anywhere}.guardian-trigger svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
dialog.guardian-sheet{position:fixed;inset:auto 0 0;margin:0 auto;width:min(100%,520px);max-width:100%;max-height:80dvh;padding:12px 0 0;border-radius:26px 26px 0 0;background:#f8fafb;color:#173c49;overflow:hidden;box-shadow:0 -12px 60px #001a2630}
dialog.guardian-sheet[open]{display:flex;flex-direction:column;animation:focusSheetIn .35s cubic-bezier(.22,.8,.25,1)}
dialog.guardian-sheet::backdrop{background:#071f2d77;backdrop-filter:blur(5px)}
.guardian-sheet-grip{height:4px;width:42px;border-radius:3px;background:#c6d6de;margin:0 auto 16px;flex:none}
.guardian-sheet-head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:0 20px 18px;flex:none}
.guardian-sheet-head h2{margin:0;font:400 24px/1.3 Bourton,var(--font);letter-spacing:0;overflow-wrap:anywhere}
.guardian-sheet-close{width:44px;height:44px;flex:none;border:0;border-radius:50%;background:#e8f0f4;color:#244957;font-size:28px}
.guardian-options{display:grid;gap:10px;padding:0 16px calc(18px + env(safe-area-inset-bottom));overflow:auto;overscroll-behavior:contain;min-height:0}
.guardian-option{display:flex;align-items:center;gap:14px;width:100%;min-height:82px;padding:15px;border:1px solid #dce6eb;border-radius:16px;background:white;color:#173c49;text-align:left;transition:background .2s,border-color .2s}
.guardian-option:hover,.guardian-option:focus-visible{background:#edf5f7;border-color:#9ab8c7}.guardian-option[aria-selected=true]{background:#e9f4ed;border-color:#8fb69e}
.guardian-option-copy{flex:1;min-width:0}.guardian-option-copy strong{display:block;font-size:20px;line-height:1.35;overflow-wrap:anywhere}.guardian-option-copy small{display:block;font-size:14px;color:#5c7886;margin-top:4px}
.guardian-option-check{width:24px;height:24px;flex:none;border:1.5px solid #d6e2e7;border-radius:50%;display:grid;place-items:center;font-size:16px;font-weight:750;color:#fff}
.guardian-option[aria-selected=true] .guardian-option-check{background:#39805a;border-color:#39805a}
@media(prefers-reduced-motion:reduce){dialog.guardian-sheet[open]{animation:none}.guardian-trigger,.guardian-option{transition:none}}
body[data-flow-step=success] .signed-person>div{flex:1;min-width:0}
body[data-flow-step=success] .signed-person b{overflow-wrap:anywhere}
body[data-flow-step=success] .signed-person .signed-check{display:grid;place-items:center;width:34px;flex:none;font-size:26px;font-weight:650;line-height:1.2;color:#39805a}

#modal:has(> .duplicate-signing-list) {
  width: min(420px, calc(100% - 28px));
  max-width: none;
  max-height: calc(100dvh - 32px);
  padding: clamp(16px, 5vw, 24px);
  border-radius: 20px;
  box-shadow: 0 18px 56px #001a2633;
  container-type: inline-size;
  overscroll-behavior: contain;
}
#modal:has(> .duplicate-signing-list) > h2 {
  margin: 0 0 10px;
  font: 750 23px/1.2 var(--font);
  letter-spacing: -.025em;
  text-transform: none;
}
html[lang="fr"] #modal:has(> .duplicate-signing-list) > h2 {
  font-size: min(23px, 7cqi);
  white-space: nowrap;
}
#modal:has(> .duplicate-signing-list) > p {
  margin: 0 0 16px;
  color: #46606f;
  font-size: 15px;
  line-height: 1.5;
}
.duplicate-signing-list {
  display: grid;
  gap: 8px;
  max-height: 30dvh;
  overflow: auto;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}
.duplicate-signing-list li {
  display: grid;
  gap: 2px;
  padding: 9px 12px;
  border-inline-start: 3px solid #cb901e;
  border-radius: 8px;
  background: #fff6e2;
  color: #513710;
  overflow-wrap: anywhere;
}
.duplicate-signing-list time { font-size: 13px; font-variant-numeric: tabular-nums; }
.duplicate-signing-actions { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; }
.duplicate-signing-actions button { margin: 0; padding: 8px 12px; min-height: 46px; font-size: 14px; }
.duplicate-signing-actions button:focus-visible { outline: 2px solid #46606f; outline-offset: 2px; }