:root {
      --navy: #0B1F3B;
      --navy-light: #152D54;
      --cream: #FAFAF8;
      --white: #FFFFFF;
      --gray-100: #F5F5F3;
      --gray-200: #E8E8E5;
      --gray-300: #D1D1CD;
      --gray-500: #8A8A85;
      --gray-700: #4A4A47;
      --accent: #3B82F6;
      --success: #10B981;
      --error: #EF4444;
      --shadow: 0 4px 6px -1px rgba(27, 41, 81, 0.1);
      --shadow-lg: 0 10px 15px -3px rgba(27, 41, 81, 0.1);
      --gray-50: #F9F9F7;
      --gray-600: #6B6B67;
      --gray-900: #1A1A18;
      --danger: #DC2626;
      --primary: #3B82F6;

      /* ── Transit design system v1 (see DECISIONS.md). Added additively; ──
         ── existing vars above stay until Phase 2 migrates each screen.   ── */
      --ink: #0B1F3B;          /* text / primary buttons */
      --ink-2: #16305A;        /* raised navy */
      --paper: #ECE7DD;        /* boarding-pass ground */
      --surface: #FBFAF6;      /* raised card */
      --surface-2: #FFFFFF;
      --line: rgba(11, 31, 59, 0.14);
      --muted: #5A6472;        /* navy-biased grey */
      --stamp: #B87514;        /* the one accent — departure-board amber */
      --stamp-soft: rgba(184, 117, 20, 0.14);
      --go: #1E7A4D;    --go-soft: rgba(30, 122, 77, 0.12);
      --wait: #9A6A00;  --wait-soft: rgba(154, 106, 0, 0.12);
      --stop: #B23A2F;  --stop-soft: rgba(178, 58, 47, 0.12);
      /* Hero ground: ALWAYS dark — glass sits on a dark scrim, never theme-driven. */
      --hero-base: #0B1F3B;
      --hero-scrim: linear-gradient(180deg, rgba(11,31,59,0.30) 0%, rgba(11,31,59,0.55) 55%, rgba(8,18,36,0.82) 100%);
      --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;
    }

    /* Dark-theme foundation is defined below under :root[data-theme="dark"] and
       is applied ONLY when that attribute is set (a future, deliberately-built
       toggle). It is intentionally NOT wired to @media (prefers-color-scheme:
       dark): the working screens still use some literal light colours (e.g.
       #fff inputs), so auto-applying dark would render a broken hybrid. Build
       and verify dark as a real feature before enabling it. */
    :root[data-theme="light"] {
      --ink: #0B1F3B;  --ink-2: #16305A;
      --paper: #ECE7DD;  --surface: #FBFAF6;  --surface-2: #FFFFFF;
      --line: rgba(11, 31, 59, 0.14);  --muted: #5A6472;
      --stamp: #B87514;  --stamp-soft: rgba(184, 117, 20, 0.14);
      --go: #1E7A4D;  --go-soft: rgba(30, 122, 77, 0.12);
      --wait: #9A6A00;  --wait-soft: rgba(154, 106, 0, 0.12);
      --stop: #B23A2F;  --stop-soft: rgba(178, 58, 47, 0.12);
    }
    :root[data-theme="dark"] {
      --ink: #EEF1F6;  --ink-2: #C9D3E2;
      --paper: #081326;  --surface: #0F2038;  --surface-2: #14243F;
      --line: rgba(180, 200, 230, 0.16);  --muted: #94A2B8;
      --stamp: #E2A63F;  --stamp-soft: rgba(226, 166, 63, 0.16);
      --go: #4FCB8B;  --go-soft: rgba(79, 203, 139, 0.14);
      --wait: #E5B84A;  --wait-soft: rgba(229, 184, 74, 0.14);
      --stop: #F0857A;  --stop-soft: rgba(240, 133, 122, 0.14);
    }
    * { margin: 0; padding: 0; box-sizing: border-box; }

    /* Toast (Transit pitch): a navy pill with a status dot. Always dark ground
       so it stays legible regardless of theme; replaces alert(). */
    .crewly-toast {
      position: fixed;
      bottom: 1.5rem;
      left: 50%;
      transform: translateX(-50%) translateY(0.75rem);
      display: flex;
      align-items: center;
      gap: 0.6rem;
      background: #0B1F3B;
      color: #fff;
      padding: 0.8rem 1.1rem;
      border-radius: 12px;
      font-size: 0.92rem;
      font-weight: 600;
      line-height: 1.4;
      white-space: pre-line;
      max-width: min(90vw, 440px);
      box-shadow: 0 16px 40px -12px rgba(8, 20, 40, 0.7);
      z-index: 100000;
      opacity: 0;
      transition: opacity 0.25s ease, transform 0.25s ease;
    }
    .crewly-toast.is-in { opacity: 1; transform: translateX(-50%) translateY(0); }
    .crewly-toast-dot {
      width: 9px; height: 9px; border-radius: 50%;
      background: #4FCB8B; flex-shrink: 0;
    }
    .crewly-toast-error .crewly-toast-dot { background: #F0857A; }
    @media (prefers-reduced-motion: reduce) {
      .crewly-toast { transition: none; opacity: 1; transform: translateX(-50%); }
      .crewly-toast.is-in { transform: translateX(-50%); }
    }
    body {
      font-family: 'DM Sans', sans-serif;
      background: var(--paper);
      color: var(--navy);
      min-height: 100vh;
    }
    /* Hidden by default so it can never flash on first paint, before JS has
       decided which screen to show — showScreen() explicitly reveals it
       (display: block) for the few screens that still use it. */
    .header {
      display: none;
      background: var(--navy);
      padding: 1rem 1.5rem;
      position: sticky;
      top: 0;
      z-index: 1000;
      transition: padding .2s ease;
    }
    .header-content {
      max-width: 800px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;
    }
    .logo {
      color: var(--white);
      font-family: 'Inter', Arial, sans-serif;
      font-size: 1.5rem;
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 0.4rem;
    }
    .logo svg {
      height: 1.3em;
      width: auto;
      overflow: visible;
      margin-right: 2px;
      margin-bottom: 1px;
    }
    .user-badge {
      background: rgba(255,255,255,0.15);
      color: var(--white);
      padding: 0.25rem 0.75rem;
      border-radius: 100px;
      font-size: 0.75rem;
      font-weight: 600;
      font-family: inherit;
      border: none;
      cursor: pointer;
      display: none;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      transition: background 0.2s ease;
      -webkit-tap-highlight-color: transparent;
    }
    .user-badge:hover, .user-badge:active {
      background: rgba(255,255,255,0.25);
    }
    .profile-menu {
      position: relative;
      display: none;
    }
    .profile-btn {
      background: rgba(255,255,255,0.15);
      color: var(--white);
      border: none;
      padding: 0.25rem 0.75rem;
      border-radius: 100px;
      cursor: pointer;
      font-size: 1rem;
      transition: all 0.2s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: inherit;
      line-height: 1;
    }
    .profile-btn svg {
      height: 1.3em;
      width: auto;
    }
    .profile-btn:hover {
      background: rgba(255,255,255,0.25);
    }
    .profile-dropdown {
      position: absolute;
      top: calc(100% + 0.5rem);
      right: 0;
      background: var(--white);
      border-radius: 8px;
      box-shadow: 0 4px 20px rgba(0,0,0,0.15);
      min-width: 200px;
      opacity: 0;
      visibility: hidden;
      transform: translateY(-10px);
      transition: all 0.2s ease;
      z-index: 1001;
    }
    #floatingProfileWrap .profile-dropdown {
      background: linear-gradient(180deg, rgba(255,255,255,.38), rgba(255,255,255,.25));
      border: 1px solid rgba(255,255,255,.35);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      box-shadow: 0 12px 40px rgba(0,0,0,.3);
    }
    #floatingProfileWrap .profile-dropdown-item {
      color: #0b1e3a;
      border-bottom-color: rgba(11,30,58,.1);
    }
    #floatingProfileWrap .profile-dropdown-item:hover {
      background: rgba(255,255,255,.2);
    }
    #floatingProfileWrap .profile-dropdown-item.logout-item {
      color: #dc2626;
    }
    #floatingProfileWrap #testModeToggleItem {
      background: rgba(255,255,255,.12) !important;
    }
    #floatingProfileWrap #testModeToggleItem span {
      color: #0b1e3a;
    }
    .profile-dropdown.show {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }
    .profile-dropdown-item {
      padding: 0.75rem 1rem;
      cursor: pointer;
      transition: background 0.2s ease;
      border-bottom: 1px solid var(--gray-100);
      display: flex;
      align-items: center;
      gap: 0.75rem;
      color: var(--gray-900);
      font-size: 0.875rem;
      font-weight: 600;
    }
    .profile-dropdown-item:first-child {
      border-radius: 8px 8px 0 0;
    }
    .profile-dropdown-item:last-child {
      border-radius: 0 0 8px 8px;
      border-bottom: none;
    }
    .profile-dropdown-item:hover {
      background: var(--gray-50);
    }
    .profile-dropdown-item.logout-item {
      color: var(--danger);
    }
    .profile-dropdown-item-icon {
      font-size: 1.125rem;
      width: 20px;
      text-align: center;
    }
    
    /* Test Mode Toggle */
    #testModeToggleItem {
      cursor: default;
    }
    #testModeToggleItem:hover {
      background: var(--gray-50) !important;
    }
    #testModeToggle:checked + span {
      background-color: #ff9800;
    }
    #testModeToggle:checked + span span {
      transform: translateX(20px);
    }
    
    /* Test Mode Badge - floating bubble, matches form card width */
    .test-mode-badge {
      position: fixed;
      top: 62px;
      left: 50%;
      transform: translateX(-50%);
      width: min(960px, calc(100vw - 2rem));
      box-sizing: border-box;
      background: #ff9800;
      border: none;
      color: #fff;
      padding: 0.5rem 1rem;
      font-size: 0.875rem;
      font-weight: 600;
      z-index: 999;
      border-radius: 12px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(255, 152, 0, 0.25);
      animation: bubbleIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
    }
    .test-mode-badge svg {
      width: 18px;
      height: 18px;
      flex-shrink: 0;
      stroke: #fff;
    }
    @keyframes bubbleIn {
      from { transform: translateX(-50%) scale(0.8); opacity: 0; }
      to { transform: translateX(-50%) scale(1); opacity: 1; }
    }
    .container {
      max-width: 800px;
      margin: 0 auto;
      padding: 1.5rem;
    }
    .screen { display: none; }
    /* Screens are dealt in like a ticket being placed, not a page swap */
    .screen.active { display: block; animation: ticketDeal 0.32s cubic-bezier(0.22, 0.9, 0.32, 1) both; }
    @keyframes ticketDeal {
      from { opacity: 0; transform: translateY(26px) scale(0.985) rotate(0.4deg); }
      to { opacity: 1; transform: none; }
    }

    /* One-time entrance after a fresh login (see playLoginEntrance in
       app.js): the paper background is already in place, and the top
       cards cascade in from the right instead of just appearing. */
    @keyframes cardSlideInRight {
      from { opacity: 0; transform: translateX(36px); }
      to { opacity: 1; transform: translateX(0); }
    }
    .login-cards-enter #welcomeModal { animation: cardSlideInRight 0.5s cubic-bezier(0.22, 0.9, 0.32, 1) both; }
    .login-cards-enter #socialProofCarousel { animation: cardSlideInRight 0.5s cubic-bezier(0.22, 0.9, 0.32, 1) 0.08s both; }
    .login-cards-enter #nextTripActionsPanel { animation: cardSlideInRight 0.5s cubic-bezier(0.22, 0.9, 0.32, 1) 0.16s both; }
    .login-cards-enter #tripSrcWrap { animation: cardSlideInRight 0.5s cubic-bezier(0.22, 0.9, 0.32, 1) 0.24s both; }

    /* Cards */
    .card {
      background: var(--white);
      border-radius: 16px;
      padding: 2rem;
      box-shadow: var(--shadow-lg);
      max-width: 450px;
      margin: 2rem auto;
    }
    .card-title {
      font-size: 1.5rem;
      margin-bottom: 0.5rem;
    }
    .card-subtitle {
      color: var(--gray-500);
      margin-bottom: 1.5rem;
    }
    
    /* Form elements */
    .form-group {
      margin-bottom: 1rem;
    }
    .form-label {
      display: block;
      font-size: 0.875rem;
      font-weight: 500;
      margin-bottom: 0.375rem;
      white-space: nowrap;
    }
    .form-input {
      width: 100%;
      padding: 0.75rem 1rem;
      font-size: 1rem;
      border: 2px solid var(--gray-200);
      border-radius: 10px;
      font-family: inherit;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .form-input[type="email"] {
      min-width: 0;
    }
    .form-input:focus {
      outline: none;
      border-color: var(--navy);
    }
    .form-input.error {
      border-color: var(--error);
    }
    .error-text {
      color: var(--error);
      font-size: 0.875rem;
      margin-top: 0.25rem;
      display: none;
    }
    .error-text.show { display: block; }
    
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0.875rem 1.5rem;
      font-size: 1rem;
      font-weight: 600;
      font-family: inherit;
      border: none;
      border-radius: 12px;
      cursor: pointer;
      width: 100%;
      margin-top: 1rem;
      -webkit-tap-highlight-color: transparent;
    }
    /* Primary action = the amber "stamp". Navy is reserved for structure (ticket
       headers, the pass strip); the single do-it action pops in stamp amber. */
    .btn-primary {
      background: var(--stamp);
      color: var(--white);
    }
    .btn-primary:hover { background: #9a6111; }
    .btn-primary:active { background: #9a6111; }
    .btn-primary:disabled { background: var(--gray-300); cursor: not-allowed; }
    .btn:focus-visible, .toggle-btn:focus-visible, .counter-btn:focus-visible,
    .admin-tab:focus-visible, .profile-btn:focus-visible, .user-badge:focus-visible,
    .profile-dropdown-item:focus-visible, .link:focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: 2px;
    }
    .btn-secondary {
      background: var(--gray-100);
      color: var(--navy);
      border: 1px solid var(--gray-300);
    }
    .btn-secondary:hover, .btn-secondary:active { background: var(--gray-200); }
    .feedback-emoji-btn:hover {
      background: #e9ecef !important;
      transform: scale(1.1);
    }
    
    .link {
      color: var(--accent);
      text-decoration: none;
      cursor: pointer;
    }
    .link:hover { text-decoration: underline; }
    
    /* Admin Tabs */
    .admin-tabs-container {
      display: flex;
      gap: 0.5rem;
      border-bottom: 2px solid var(--gray-200);
      margin: 2rem 0 1.5rem 0;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }
    .admin-tab {
      padding: 0.75rem 1.5rem;
      background: transparent;
      border: none;
      border-bottom: 2px solid transparent;
      color: var(--gray-600);
      font-size: 0.875rem;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s;
      white-space: nowrap;
      flex-shrink: 0;
    }
    .admin-tab:hover {
      color: var(--navy);
      background: var(--gray-50);
    }
    .admin-tab.active {
      color: var(--navy);
      border-bottom-color: var(--navy);
      font-weight: 600;
    }
    .admin-tab-content {
      display: none;
    }
    .admin-tab-content.active {
      display: block;
    }
    
    /* Admin Compounds Section Header */
    .admin-section-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 1.5rem;
      gap: 1rem;
      flex-wrap: wrap;
    }
    .admin-section-header h3 {
      font-size: 1.125rem;
      font-weight: 600;
      margin: 0;
    }
    
    /* Mobile optimizations */
    @media (max-width: 768px) {
      .admin-section-header {
        flex-direction: column;
        align-items: stretch;
      }
      .admin-section-header button {
        width: 100%;
        padding: 0.75rem 1rem !important;
        font-size: 1rem !important;
      }
    }
    
    .divider {
      text-align: center;
      margin: 1.5rem 0;
      color: var(--gray-500);
      font-size: 0.875rem;
    }
    
    /* Form sections */
    .form-section {
      background: var(--white);
      border-radius: 16px;
      padding: 1.5rem;
      padding-top: 0.5rem;
      margin-bottom: 1rem;
      box-shadow: var(--shadow);
    }
    .form-section-title {
      font-size: 0.75rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--gray-500);
      margin-bottom: 1rem;
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }
    .form-section-title svg {
      width: 20px;
      height: 20px;
      flex-shrink: 0;
    }
    .form-icon-inline {
      display: inline-flex;
      align-items: center;
      vertical-align: middle;
      margin-right: 0.35rem;
    }
    .form-icon-inline svg {
      width: 18px;
      height: 18px;
      flex-shrink: 0;
    }
    .form-row {
      display: grid;
      gap: 1rem;
    }
    @media (min-width: 640px) {
      .form-row.cols-2 { grid-template-columns: 1fr 1fr; }
      .form-row.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
    }
    
    /* Toggle */
    .toggle-group {
      display: flex;
      background: var(--gray-100);
      border-radius: 10px;
      padding: 4px;
    }
    .toggle-btn {
      flex: 1;
      padding: 0.625rem;
      font-size: 0.875rem;
      font-weight: 500;
      font-family: inherit;
      border: none;
      border-radius: 8px;
      background: transparent;
      color: var(--gray-500);
      cursor: pointer;
    }
    .toggle-btn.active {
      background: var(--white);
      color: var(--navy);
      box-shadow: var(--shadow);
    }
    
    /* Holiday Control Row - responsive layout */
    .holiday-control-row {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
      margin-bottom: 1rem;
    }
    .holiday-toggle-wrapper {
      display: flex;
      flex-direction: column;
      gap: 0.25rem;
    }
    .holiday-toggle-label {
      font-size: 0.75rem;
      font-weight: 600;
      color: var(--gray-600);
      text-transform: uppercase;
      letter-spacing: 0.025em;
    }
    .holiday-control-row .toggle-group {
      width: 100%;
    }
    .holiday-control-row .btn {
      width: 100%;
    }
    @media (min-width: 640px) {
      .holiday-control-row {
        flex-direction: row;
        align-items: flex-end;
        gap: 1rem;
      }
      .holiday-control-row .toggle-group {
        width: auto;
        min-width: 120px;
        flex-shrink: 0;
      }
      .holiday-control-row .btn {
        flex: 1;
        width: auto;
      }
    }
    
    /* Calendar */
    .calendar-container {
      background: var(--gray-100);
      border-radius: 12px;
      padding: 1rem;
    }
    .calendar-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 1rem;
    }
    .calendar-nav button {
      width: 36px;
      height: 36px;
      border: none;
      border-radius: 8px;
      background: var(--white);
      cursor: pointer;
    }
    .calendar-grid {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 2px;
    }
    .calendar-day-header {
      text-align: center;
      font-size: 0.75rem;
      font-weight: 600;
      color: var(--gray-500);
      padding: 0.5rem;
    }
    .calendar-day {
      aspect-ratio: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.875rem;
      border-radius: 8px;
      cursor: pointer;
      background: var(--white);
    }
    .calendar-day:hover:not(.disabled):not(.empty) { background: var(--gray-200); }
    .calendar-day.empty { background: transparent; cursor: default; }
    .calendar-day.disabled { color: var(--gray-300); cursor: not-allowed; background: transparent; }
    .calendar-day.selected { background: var(--navy) !important; color: var(--white) !important; }
    .calendar-day.in-range { background: var(--accent) !important; color: var(--white) !important; opacity: 0.7; }
    .calendar-day.start-date, .calendar-day.end-date { background: var(--navy) !important; color: var(--white) !important; }
    .calendar-day.holiday { 
      background: var(--holiday-bg, #DCFCE7); 
      color: var(--navy); /* Keep numbers dark blue for readability */
    }
    .calendar-day.holiday:hover:not(.disabled):not(.selected):not(.start-date):not(.end-date):not(.in-range) { 
      filter: brightness(0.95); 
    }
    .calendar-day.holiday.selected, .calendar-day.holiday.start-date, .calendar-day.holiday.end-date { 
      background: var(--navy) !important; 
      color: var(--white) !important; 
    }
    .calendar-day.holiday.in-range {
      background: var(--accent) !important;
      color: var(--white) !important;
      opacity: 0.7;
    }
    .calendar-day.holiday.disabled { 
      color: var(--gray-700); /* Darker grey for visibility on colored backgrounds */
      opacity: 0.6;
    }
    .selected-dates {
      display: flex;
      gap: 1rem;
      margin-top: 1rem;
    }
    .selected-date-box {
      flex: 1;
      background: var(--white);
      padding: 0.75rem;
      border-radius: 8px;
      text-align: center;
    }
    .selected-date-label {
      font-size: 0.75rem;
      color: var(--gray-500);
    }
    .selected-date-value {
      font-weight: 600;
      margin-top: 0.25rem;
    }
    
    /* Counter */
    .counter {
      display: flex;
      align-items: center;
      gap: 0.75rem;
    }
    .counter-btn {
      width: 36px;
      height: 36px;
      border: 2px solid var(--gray-200);
      border-radius: 8px;
      background: var(--white);
      font-size: 1.25rem;
      cursor: pointer;
    }
    .counter-value {
      font-size: 1.125rem;
      font-weight: 600;
      min-width: 2rem;
      text-align: center;
    }
    
    /* Flight section */
    .flight-section {
      border: 2px solid var(--gray-200);
      border-radius: 12px;
      padding: 1rem;
      margin-top: 1rem;
    }
    .flight-header {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      margin-bottom: 1rem;
      padding-bottom: 0.75rem;
      border-bottom: 1px solid var(--gray-200);
    }
    .flight-header h3 { font-size: 1rem; }
    
    /* Baggage */
    .baggage-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1rem;
    }
    .baggage-item { text-align: center; }
    .baggage-label { font-size: 0.75rem; color: var(--gray-500); margin-bottom: 0.5rem; }
    .baggage-icon { font-size: 1.5rem; }
    
    /* Mobile: stack baggage items vertically */
    @media (max-width: 480px) {
      .baggage-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
      }
      .baggage-item {
        display: flex;
        align-items: center;
        gap: 1rem;
        text-align: left;
      }
      .baggage-icon {
        font-size: 1.25rem;
        min-width: 2rem;
      }
      .baggage-label {
        min-width: 4rem;
        margin-bottom: 0;
      }
      .counter {
        margin-left: auto;
      }
    }
    
    /* Actions */
    .form-actions {
      display: flex;
      gap: 1rem;
      margin-top: 1.5rem;
      flex-wrap: wrap;
    }
    .form-actions .btn { 
      flex: 1;
      min-width: 140px;
    }
    
    /* Mobile: better button layout */
    @media (max-width: 640px) {
      .form-actions {
        flex-direction: column;
        gap: 0.75rem;
      }
      .form-actions .btn {
        width: 100%;
        flex: none;
      }
      #coordFilterBar {
        flex-direction: column !important;
      }
      #coordFilterBar .coord-filter-btn {
        width: 100% !important;
        flex: none !important;
      }
    }

    .coord-filter-btn {
      display: inline-block; padding: 0.4rem 1rem; border-radius: 6px;
      font-size: 0.8rem; cursor: pointer; text-align: center; flex: 1; min-width: 0;
      background: var(--white); color: var(--gray-700); font-weight: 500;
      border: 1px solid var(--gray-200);
    }
    .coord-filter-btn.coord-filter-btn-active {
      background: var(--navy); color: var(--white); font-weight: 600; border-color: var(--navy);
    }
    
    /* Compound Hero / Glass Card */
    .compound-hero {
      min-height: 100vh;
      min-height: 100dvh;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      /* Scrim over photo + solid dark base = white text stays legible on any
         image, connection, or load failure (fixes the white-on-cream collapse). */
      background-image: var(--hero-scrim), var(--hero-url, linear-gradient(180deg, #1b3658, #102033));
      background-position: center;
      background-size: cover;
      background-repeat: no-repeat;
      background-color: var(--hero-base);
      z-index: 50;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }
    .compound-hero .hero-overlay {
      display: none;
    }
    .compound-hero .glass-wrap {
      position: relative;
      z-index: 2;
      min-height: 120vh;
      min-height: 120dvh;
      display: grid;
      place-items: center;
      padding: 28px 18px 20vh;
    }
    @keyframes glassReveal {
      from { opacity: 0; }
      to { opacity: 1; }
    }
    .compound-hero .glass-card {
      width: min(520px, 100%);
      color: rgba(255,255,255,.94);
      background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.18));
      border: 1px solid rgba(255,255,255,.38);
      border-radius: 22px;
      box-shadow: 0 40px 120px rgba(0,0,0,.35), 0 0 40px rgba(255,180,120,.08);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      overflow: hidden;
      position: relative;
      transform: translateZ(0);
      animation: glassReveal .3s ease both;
    }
    .compound-hero .glass-card::before {
      content: "";
      position: absolute; inset: -2px;
      background:
        radial-gradient(800px 220px at 30% 0%, rgba(255,255,255,.22), transparent 55%),
        linear-gradient(180deg, rgba(255,255,255,.10), transparent 40%);
      pointer-events: none;
      mix-blend-mode: screen;
      opacity: .85;
    }
    .compound-hero .glass-head {
      padding: 14px 28px 18px;
      position: relative;
      z-index: 1;
    }
    .compound-hero .powered {
      font-size: 13px;
      letter-spacing: .3px;
      color: rgba(255,255,255,.78);
      text-shadow: 0 1px 4px rgba(0,0,0,.25);
      margin-bottom: 18px;
      padding-bottom: 14px;
      text-align: center;
      border-bottom: 1px solid rgba(255,255,255,.35);
    }
    .compound-hero .powered span {
      color: #fff;
      font-weight: 700;
      font-size: 14px;
    }
    .compound-hero .glass-invited {
      margin: 0 0 6px;
      color: rgba(255,255,255,.85);
      font-size: 15px;
      font-weight: 600;
      text-align: center;
      line-height: 1.4;
      text-shadow: 0 1px 6px rgba(0,0,0,.25);
    }
    .compound-hero .compound-name {
      margin: 0 0 12px;
      font-size: 38px;
      line-height: 1.12;
      font-weight: 800;
      letter-spacing: .3px;
      color: #fff;
      text-align: center;
      text-shadow: 0 2px 12px rgba(0,0,0,.35), 0 1px 3px rgba(0,0,0,.25);
    }
    .compound-hero .tagline {
      margin: 0;
      color: rgba(255,255,255,.85);
      font-size: 14.5px;
      font-weight: 600;
      line-height: 1.5;
      text-align: center;
      text-shadow: 0 1px 6px rgba(0,0,0,.25);
    }
    .compound-hero .glass-form {
      padding: 14px 28px 30px;
      display: grid;
      gap: 14px;
      position: relative;
      z-index: 1;
    }
    .compound-hero .glass-field {
      display: grid;
      gap: 7px;
    }
    .compound-hero .glass-field span {
      font-size: 13px;
      font-weight: 700;
      color: rgba(255,255,255,.85);
      text-shadow: 0 1px 3px rgba(0,0,0,.2);
    }
    #requestAccessScreen .compound-name {
      color: #fff;
    }
    #requestAccessScreen .tagline {
      color: rgba(255,255,255,.95);
      font-weight: 700;
      font-size: 14px;
    }
    #requestAccessScreen .glass-field span {
      color: rgba(255,255,255,.92);
      text-shadow: 0 1px 3px rgba(0,0,0,.2);
      font-size: 14px;
      font-weight: 700;
    }
    #requestAccessScreen .glass-field input::placeholder,
    #requestAccessScreen .glass-field textarea::placeholder {
      color: rgba(255,255,255,.9);
    }
    #requestAccessScreen #accessUploadArea {
      background: rgba(255,255,255,.12) !important;
      border: 2px dashed rgba(255,255,255,.15) !important;
    }
    #requestAccessScreen #accessUploadArea:hover {
      border-color: rgba(255,255,255,.34) !important;
      box-shadow: 0 0 0 4px rgba(255,255,255,.08);
    }
    #compoundLoginScreen .compound-name,
    #joinScreen .compound-name {
      color: #fff;
    }
    #compoundLoginScreen .glass-field span,
    #joinScreen .glass-field span {
      color: rgba(255,255,255,.92);
      text-shadow: 0 1px 3px rgba(0,0,0,.2);
      font-size: 14px;
      font-weight: 700;
    }
    #compoundLoginScreen .glass-field input::placeholder,
    #joinScreen .glass-field input::placeholder {
      color: rgba(255,255,255,.9);
    }
    #compoundLoginScreen #compoundLoginHelper {
      color: rgba(255,255,255,.9) !important;
    }
    #joinScreen .glass-invited {
      color: rgba(255,255,255,.9);
    }
    #joinScreen #signupCodeGroup p {
      color: rgba(255,255,255,.7);
    }
    .compound-hero .glass-field input {
      width: 100%;
      padding: 14px 16px;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,.15);
      background: rgba(255,255,255,.12);
      color: #fff;
      font-size: 15px;
      font-weight: 700;
      outline: none;
      box-sizing: border-box;
    }
    .compound-hero .glass-field input::placeholder {
      color: rgba(255,255,255,.50);
      font-weight: 400;
    }
    .compound-hero .glass-field select {
      width: 100%;
      padding: 14px 16px;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,.15);
      background: rgba(255,255,255,.12);
      color: #fff;
      font-size: 15px;
      font-weight: 700;
      outline: none;
      box-sizing: border-box;
    }
    .compound-hero .glass-field select option {
      background: #1b3658;
      color: #fff;
    }
    .compound-hero .glass-field textarea {
      width: 100%;
      padding: 14px 16px;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,.15);
      background: rgba(255,255,255,.12);
      color: #fff;
      font-size: 15px;
      font-weight: 700;
      outline: none;
      box-sizing: border-box;
      font-family: inherit;
    }
    .compound-hero .glass-field textarea::placeholder {
      color: rgba(255,255,255,.50);
      font-weight: 400;
    }
    .compound-hero .glass-field select:focus,
    .compound-hero .glass-field textarea:focus {
      border-color: rgba(255,255,255,.34);
      box-shadow: 0 0 0 4px rgba(255,255,255,.08);
    }
    .compound-hero .glass-field input:focus {
      border-color: rgba(255,255,255,.34);
      box-shadow: 0 0 0 4px rgba(255,255,255,.08);
    }
    .compound-hero .glass-primary {
      margin-top: 6px;
      width: 100%;
      padding: 13px 14px;
      border: none;
      border-radius: 12px;
      background: #0b1e3a;
      color: #fff;
      font-size: 15px;
      font-weight: 600;
      letter-spacing: .3px;
      cursor: pointer;
    }
    .compound-hero .glass-primary:hover {
      background: #142d52;
    }
    .compound-hero .glass-row {
      display: flex;
      justify-content: center;
      align-items: center;
      padding-top: 6px;
    }
    .compound-hero .glass-row-split {
      justify-content: space-between;
      align-items: center;
    }
    .compound-hero .glass-row-divider {
      display: flex;
      align-items: center;
      gap: 14px;
      padding-top: 8px;
    }
    .compound-hero .glass-row-divider::before,
    .compound-hero .glass-row-divider::after {
      content: "";
      flex: 1;
      height: 1px;
      background: rgba(255,255,255,.14);
    }
    .compound-hero .glass-link {
      color: rgba(255,255,255,.80);
      text-decoration: none;
      font-size: 13px;
      font-weight: 600;
      white-space: nowrap;
      text-shadow: 0 1px 4px rgba(0,0,0,.2);
    }
    .compound-hero .glass-link:hover { color: #fff; }
    .compound-hero .glass-secondary {
      flex: 1;
      color: rgba(255,255,255,.90);
      text-decoration: none;
      font-size: 13px;
      font-weight: 600;
      padding: 11px 14px;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,.20);
      background: rgba(255,255,255,.10);
      cursor: pointer;
      text-align: center;
    }
    .compound-hero .glass-secondary:hover {
      background: rgba(255,255,255,.16);
    }
    .compound-hero .glass-learn-more {
      border: none;
      background: #0b1e3a;
      color: #fff;
      font-weight: 600;
      text-shadow: none;
    }
    .compound-hero .glass-learn-more:hover {
      background: #152d54;
      color: #fff;
    }
    .compound-hero .glass-muted {
      color: rgba(255,255,255,.50);
      font-size: 13px;
    }
    .compound-hero .glass-divider {
      height: 1px;
      background: rgba(255,255,255,.14);
      margin: 8px 0 2px;
    }
    .compound-hero #accessUploadArea p,
    .compound-hero #accessUploadArea span {
      color: var(--success) !important;
      font-weight: 600;
    }
    .compound-hero .error-text {
      color: #fff;
      text-shadow: 0 0 12px rgba(255,60,60,.9), 0 0 4px rgba(255,0,0,.6);
    }
    .compound-hero .error-text.show {
      display: block !important;
    }
    @media (max-width: 768px) {
      .compound-hero {
        background-image: var(--hero-scrim), var(--hero-url-mobile, var(--hero-url)) !important;
      }
    }
    @media (max-width: 480px) {
      .compound-hero .glass-head { padding: 26px 20px 12px; }
      .compound-hero .glass-form { padding: 12px 20px 22px; }
      .compound-hero .compound-name { font-size: 28px; }
    }

    /* Form hero background — full viewport like compound-hero */
    .form-hero {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      /* Transit "calm paper" working surface (see DECISIONS.md). Logged-in
         screens are a paper ground with a light card, not photo-glass — the
         photo hero is reserved for the auth/landing screens. */
      background: var(--paper);
      z-index: 50;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      padding: 60px 1.5rem 2rem;
    }
    .form-hero > * {
      max-width: 800px;
      margin-left: auto;
      margin-right: auto;
    }
    @media (max-width: 768px) {
      .form-hero {
        background: var(--paper);
        padding: 56px 1rem 2rem;
      }
    }

    /* Paper card styling for form page (Transit "calm working surface") */
    .form-hero .card {
      background: var(--surface-2);
      border: 1px solid var(--line);
      box-shadow: var(--shadow-lg);
      color: var(--ink);
    }
    .form-hero .card-title {
      color: var(--ink);
    }
    .form-hero .card-subtitle {
      color: var(--muted);
    }
    .form-hero .form-label {
      font-family: var(--mono);
      font-size: 0.68rem;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--muted);
      font-weight: 600;
      overflow-wrap: anywhere;
      flex-wrap: wrap;
    }
    .form-hero .form-input,
    .form-hero .form-input[type="email"],
    .form-hero .form-input[type="text"],
    .form-hero .form-input[type="tel"],
    .form-hero .form-input[type="number"],
    .form-hero select.form-input,
    .form-hero textarea.form-input {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 12px;
      color: var(--ink);
      font-size: 15px;
      font-weight: 600;
    }
    .form-hero .form-input:focus,
    .form-hero select.form-input:focus,
    .form-hero textarea.form-input:focus {
      border-color: var(--stamp);
      box-shadow: 0 0 0 3px var(--stamp-soft);
      outline: none;
    }
    .form-hero .form-input::placeholder,
    .form-hero textarea.form-input::placeholder {
      color: var(--muted);
      font-weight: 400;
    }
    .form-hero select.form-input option {
      background: #fff;
      color: var(--ink);
    }
    .form-hero .btn-primary {
      background: var(--stamp);
      color: #fff;
      border: none;
      border-radius: 12px;
      font-weight: 600;
    }
    .form-hero .btn-primary:hover {
      background: #9a6111;
    }
    .btn-test-mode:hover {
      background: #ffb74d !important;
      box-shadow: 0 0 0 4px rgba(255, 152, 0, 0.3);
    }
    .form-hero .btn-secondary {
      background: transparent;
      color: var(--ink);
      border: 1px solid var(--line);
      border-radius: 12px;
      font-weight: 700;
    }
    .form-hero .btn-secondary:hover {
      background: var(--line);
      color: var(--ink);
    }
    .form-hero .error-text {
      color: #ff6b6b;
      text-shadow: 0 1px 2px rgba(0,0,0,.2);
    }
    .form-hero .tip-banner {
      background: linear-gradient(135deg, rgba(255,255,255,.4), rgba(255,255,255,.25)) !important;
      border-color: rgba(255,255,255,.4) !important;
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      color: #0b1e3a;
    }
    .form-hero .section-title {
      color: #0b1e3a;
    }
    .form-hero .form-section {
      background: var(--surface-2);
      border: 1px solid var(--line);
      box-shadow: var(--shadow);
    }
    /* Card headers styled like the boarding-pass header: a full-bleed navy bar. */
    .form-hero .form-section { overflow: hidden; }
    .form-hero .form-section-title {
      background: var(--ink);
      color: #fff;
      margin: -0.5rem -1.5rem 1.25rem -1.5rem;
      padding: 0.8rem 1.15rem;
      font-family: var(--mono);
      font-size: 0.72rem;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      font-weight: 700 !important;
      justify-content: flex-start !important;
      text-align: left !important;
      border-bottom: none !important;
    }
    .form-hero .form-section-title svg { color: #fff; }
    .form-hero .form-section-title-centred {
      justify-content: flex-start !important;
      text-align: left !important;
    }
    /* Actions footer inside a boarding-pass card (View / Change / Cancel). */
    /* Actions as flat colour tabs along the bottom of the ticket. */
    .pass-actions {
      display: flex;
      border-top: 1px solid rgba(11,31,59,.10);
    }
    .pass-actions button {
      flex: 1 1 0;
      min-width: 0 !important;
      padding: 0.8rem 0.35rem !important;
      background: transparent !important;
      border: none !important;
      border-right: 1px solid rgba(11,31,59,.10) !important;
      border-radius: 0 !important;
      box-shadow: none !important;
      font-family: var(--mono) !important;
      font-size: 0.68rem !important;
      letter-spacing: 0.09em !important;
      text-transform: uppercase;
      font-weight: 700 !important;
      cursor: pointer;
      transition: background 0.15s ease;
    }
    .pass-actions button:last-child { border-right: none !important; }
    .pass-actions button:hover { background: rgba(11,31,59,.04) !important; }
    /* History buttons carry their own filled styles — flatten them into tabs. */
    .pass-actions .btn-draft-view { color: #1E7A4D !important; }
    .pass-actions .btn-draft-load { color: var(--ink) !important; }
    .pass-actions .btn-draft-delete { color: #B23A2F !important; }
    .form-hero .field-label {
      color: #0b1e3a;
    }
    /* Segmented control on paper: a visible track so the inactive side reads as a button too */
    .form-hero .toggle-group {
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: 12px;
    }
    .form-hero .toggle-btn {
      color: var(--muted);
      font-weight: 600;
      border-radius: 9px;
      border: 1px solid transparent;
    }
    .form-hero .toggle-btn:not(.active) {
      background: var(--surface-2);
      border-color: var(--line);
    }
    .form-hero .toggle-btn.active {
      background: var(--ink);
      color: #fff;
      font-weight: 700;
      box-shadow: 0 2px 8px rgba(11,31,59,.18);
    }
    /* "Load Saved Request" is a utility, not the primary CTA — make it a light
       ghost/outline chip so the navy Submit stays the clear primary action. */
    .form-hero .dropdown-toggle,
    .form-hero .btn.btn-secondary.dropdown-toggle {
      background: var(--surface) !important;
      color: var(--ink) !important;
      border: 1px solid var(--line) !important;
      border-radius: 12px;
      font-weight: 600;
    }
    .form-hero .dropdown-toggle:hover,
    .form-hero #loadFromMenuBtn:hover {
      background: var(--surface-2) !important;
      border-color: var(--stamp) !important;
    }
    .form-hero .dropdown-menu {
      background: var(--surface-2);
      border: 1px solid var(--line);
      box-shadow: var(--shadow-lg);
    }
    .form-hero .dropdown-item {
      background: transparent;
      color: #0b1e3a;
    }
    .form-hero .dropdown-item:hover {
      background: var(--line);
    }
    .form-hero .dropdown-divider {
      border-color: rgba(11,30,58,.1);
    }
    .form-hero .social-proof-carousel #socialProofStars {
      color: #F59E0B;
    }
    .form-hero .form-actions {
      border-bottom-color: var(--line) !important;
    }
    .form-hero .form-actions:has(#mainSubmitBtn):not(#userActionButtons) .btn-secondary {
      background: transparent !important;
      border: 1px solid var(--line) !important;
      box-shadow: none;
    }
    .form-hero .form-actions:has(#mainSubmitBtn):not(#userActionButtons) .btn-secondary:hover {
      background: var(--line) !important;
    }
    .form-hero .user-action-section {
      position: relative;
    }
    .form-hero .user-action-section .form-section-title-centred {
      padding-bottom: 0.4rem;
      margin-bottom: 0.5rem;
    }
    .form-hero .user-action-section .form-actions {
      margin-top: 0.5rem;
    }
    .form-hero .user-action-section .btn-secondary {
      background: var(--stamp) !important;
      color: #fff !important;
      border: none !important;
      box-shadow: none !important;
      font-weight: 600 !important;
      padding: 0.875rem 1.5rem !important;
      font-size: 1rem !important;
    }
    .form-hero .user-action-section .btn-secondary:hover {
      background: #9a6111 !important;
    }
    .form-hero #transportEmailNotice {
      background: transparent !important;
      border: none !important;
      padding: 0 !important;
      margin-bottom: 0.75rem !important;
    }
    .form-hero #transportEmailNotice p {
      color: #0b1e3a !important;
      font-size: 0.8rem !important;
      font-weight: 600 !important;
    }
    .form-hero #transportEmailNotice a {
      color: #0b1e3a !important;
      font-weight: 600;
      text-decoration: underline;
    }
    .form-hero #transportEmailNotice .transport-br { display: block; }
    @media (min-width: 641px) {
      .form-hero #transportEmailNotice .transport-br { display: none; }
    }
    .form-hero .feedback-emoji-btn {
      background: rgba(255,255,255,.1) !important;
    }
    .form-hero .feedback-emoji-btn:hover {
      background: rgba(255,255,255,.2) !important;
    }
    .form-hero .family-pax-warning {
      color: var(--wait) !important;
    }
    .form-hero .terminal-helper {
      color: var(--muted) !important;
    }

    /* Calendar: lighter glass so dates stand out, ensure selected/range/holiday visible */
    .form-hero .calendar-container {
      background: linear-gradient(180deg, rgba(255,255,255,.38), rgba(255,255,255,.32));
      border: 1px solid rgba(255,255,255,.42);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
    }
    .form-hero .calendar-header span,
    .form-hero .calendar-day-header {
      color: #0b1e3a;
      font-weight: 700;
    }
    .form-hero .calendar-nav button {
      background: rgba(255,255,255,.32);
      color: #0b1e3a;
      border: 1px solid rgba(255,255,255,.4);
      font-weight: 700;
    }
    .form-hero .calendar-nav button:hover {
      background: rgba(255,255,255,.45);
    }
    .form-hero .calendar-day {
      background: rgba(255,255,255,.28);
      color: #0b1e3a;
      font-weight: 700;
    }
    .form-hero .calendar-day:hover:not(.disabled):not(.empty) {
      background: rgba(255,255,255,.4);
    }
    .form-hero .calendar-day.empty,
    .form-hero .calendar-day.disabled {
      background: transparent !important;
      color: rgba(11,30,58,.55) !important;
    }
    .form-hero .calendar-day.holiday:not(.disabled):not(.selected):not(.start-date):not(.end-date):not(.in-range) {
      background: var(--holiday-bg, rgba(220,252,231,.6)) !important;
      color: #0b1e3a !important;
    }
    .form-hero .selected-date-box {
      background: var(--surface);
      border: 1px solid var(--line);
    }
    /* Paper fixes for elements that were white-for-glass on the working screens */
    #floatingPills .user-badge {
      background: transparent;
      color: var(--ink);
      border: 1.5px solid var(--ink) !important;
      font-weight: 700;
    }
    #floatingPills .profile-btn {
      background: transparent;
      color: var(--ink);
      border: 1.5px solid var(--ink);
    }
    /* Profile icon ships white (for the dark header); darken it for the outline chip on paper */
    #floatingPills .profile-btn img {
      filter: brightness(0) saturate(100%);
    }
    .form-hero .field-label {
      font-family: var(--mono);
      font-size: 0.7rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--muted);
      font-weight: 600;
    }
    .social-proof-carousel [style*="#fff"],
    #socialProofQuote,
    #socialProofEmpty {
      color: var(--ink) !important;
    }
    /* Feedback carousel heading → navy full-bleed header bar (matches .form-section-title) */
    .form-hero #socialProofCarousel .social-proof-slide-heading {
      background: var(--ink) !important;
      color: #fff !important;
      margin: -1rem -1rem 1.25rem -1rem !important;
      padding: 0.8rem 1.15rem !important;
      border-bottom: none !important;
      justify-content: flex-start !important;
      font-family: var(--mono);
      font-size: 0.72rem !important;
      letter-spacing: 0.14em;
      font-weight: 700;
    }
    .form-hero #socialProofCarousel .social-proof-slide-heading svg {
      color: #fff !important;
    }
    .form-hero .selected-date-label {
      color: rgba(11,30,58,.75);
    }
    .form-hero .selected-date-value {
      color: #0b1e3a;
      font-weight: 700;
    }
    .form-hero #calendarLegend {
      border-top-color: rgba(255,255,255,.4) !important;
    }
    .form-hero #calendarLegend,
    .form-hero #calendarLegend span,
    .form-hero .calendar-legend-helper {
      color: rgba(11,30,58,.85) !important;
    }
    /* Ensure selected/range states stay visible (override form-hero base) */
    /* Trip dates: amber "stamp" endpoints + a soft amber range with dark day
       numbers — a light boarding-pass treatment instead of a heavy navy block. */
    .form-hero .calendar-day.selected,
    .form-hero .calendar-day.start-date,
    .form-hero .calendar-day.end-date {
      background: var(--stamp) !important;
      color: #fff !important;
    }
    .form-hero .calendar-day.in-range {
      background: var(--stamp-soft) !important;
      color: var(--ink) !important;
      opacity: 1;
    }
    .form-hero .calendar-day.holiday.in-range {
      background: var(--stamp-soft) !important;
      color: var(--ink) !important;
      opacity: 1;
    }

    /* Calendar: compact on desktop so nav + legend fit without scrolling */
    @media (min-width: 768px) {
      .form-hero .calendar-container {
        max-width: 520px;
        margin: 0 auto;
        padding: 1.1rem;
      }
      .form-hero .calendar-header { margin-bottom: 0.85rem; }
      .form-hero .calendar-nav button { width: 38px; height: 38px; font-size: 0.875rem; }
      .form-hero .calendar-header span { font-size: 1.05rem; }
      .form-hero .calendar-day-header { padding: 0.45rem; font-size: 0.78rem; }
      .form-hero .calendar-day { font-size: 0.9rem; }
      .form-hero #calendarLegend { margin-top: 0.85rem; padding-top: 0.85rem; font-size: 0.82rem; }
      .form-hero .selected-dates { margin-top: 0.85rem; gap: 0.85rem; }
      .form-hero .selected-date-box { padding: 0.75rem; }
      .form-hero .selected-date-label { font-size: 0.78rem; }
      .form-hero .selected-date-value { font-size: 0.95rem; }
    }

    /* Email Options: white helper text (per user request) */
    .form-hero .form-section small {
      color: var(--muted) !important;
    }
    /* Upload dropzones as clear paper buttons */
    .form-hero #itineraryUploadArea,
    .form-hero #supportUploadArea {
      border: 1.5px dashed var(--line) !important;
      background: var(--surface) !important;
      border-radius: 12px;
      padding: 1.1rem 1rem;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      cursor: pointer;
      transition: all 0.2s ease;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }
    .form-hero #itineraryUploadArea p,
    .form-hero #supportUploadArea p { margin: 0; line-height: 1.5; }
    .form-hero #itineraryUploadArea:hover,
    .form-hero #supportUploadArea:hover {
      border-color: var(--stamp) !important;
      background: var(--surface-2) !important;
      box-shadow: 0 0 0 3px var(--stamp-soft);
    }
    .form-hero #itineraryUploadArea p,
    .form-hero #itineraryUploadArea span,
    .form-hero #supportUploadArea p,
    .form-hero #supportUploadArea span {
      color: var(--ink) !important;
      font-weight: 600;
    }
    #itineraryDetails summary::-webkit-details-marker { display: none; }
    #itineraryDetails .itinerary-chevron { transform: rotate(-90deg); }
    #itineraryDetails[open] .itinerary-chevron { transform: rotate(0deg); }
    .form-hero .itinerary-helper-divider {
      margin: 0.5rem 0;
      border: none;
      border-top: 1px solid var(--line);
    }
    .form-hero .additional-luggage-helper,
    .form-hero .additional-luggage-helper span,
    .form-hero .child-seat-disclaimer,
    .form-hero .profile-helper,
    .form-hero .support-attachment-helper,
    .form-hero .pickup-time-helper,
    .form-hero .pickup-helper-line {
      color: var(--muted) !important;
    }
    .form-hero .profile-helper a {
      color: var(--ink) !important;
      text-decoration: underline;
    }
    .form-hero .pickup-helper-recommend {
      color: var(--ink) !important;
      font-weight: 700;
    }

    /* Tip Banner */
    .tip-banner {
      background: linear-gradient(135deg, #FFF9E6 0%, #FFF4D6 100%);
      border: 1px solid #FFD700;
      border-radius: 8px;
      padding: 12px 16px;
      margin-bottom: 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    }
    .tip-banner-content {
      flex: 1;
      font-size: 14px;
      line-height: 1.5;
      color: var(--navy);
    }
    .tip-banner-close {
      background: none;
      border: none;
      font-size: 24px;
      line-height: 1;
      color: var(--gray-500);
      cursor: pointer;
      padding: 0;
      width: 24px;
      height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 4px;
      transition: all 0.2s;
    }
    .tip-banner-close:hover {
      background: rgba(0,0,0,0.05);
      color: var(--navy);
    }

    /* Welcome Card (top of form, inline - not blocking) */
    .welcome-card-wrap {
      display: block;
    }
    .welcome-modal-card {
      position: relative;
      z-index: 1;
      width: 100%;
      color: rgba(255,255,255,.94);
      background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.18));
      border: 1px solid rgba(255,255,255,.38);
      border-radius: 22px;
      box-shadow: 0 40px 120px rgba(0,0,0,.35), 0 0 40px rgba(255,180,120,.08);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      overflow: hidden;
      animation: glassReveal .3s ease both;
    }
    .welcome-modal-card::before {
      content: "";
      position: absolute;
      inset: -2px;
      background:
        radial-gradient(800px 220px at 30% 0%, rgba(255,255,255,.22), transparent 55%),
        linear-gradient(180deg, rgba(255,255,255,.10), transparent 40%);
      pointer-events: none;
      mix-blend-mode: screen;
      opacity: .85;
    }
    /* Welcome card header → navy full-bleed block (matches the boarding-pass style) */
    .welcome-card-wrap .glass-head {
      background: var(--ink);
      padding: 16px 22px 18px;
      position: relative;
      z-index: 1;
    }
    .welcome-card-wrap .powered {
      font-family: var(--mono);
      font-size: 0.72rem;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: #fff;
      margin-bottom: 16px;
      padding-bottom: 12px;
      text-align: center;
      border-bottom: 1px solid rgba(255,255,255,.25);
    }
    .welcome-card-wrap .powered span {
      color: #fff;
      font-weight: 700;
    }
    .welcome-card-wrap .glass-invited {
      margin: 0 0 6px;
      color: rgba(255,255,255,.85);
      font-size: 15px;
      font-weight: 600;
      text-align: center;
      line-height: 1.4;
      text-shadow: 0 1px 6px rgba(0,0,0,.25);
    }
    .welcome-card-wrap .compound-name {
      margin: 0 0 12px;
      font-size: 32px;
      line-height: 1.12;
      font-weight: 800;
      letter-spacing: .3px;
      color: #fff;
      text-align: center;
      text-shadow: none;
    }
    .welcome-card-wrap .tagline {
      margin: 0;
      color: rgba(255,255,255,.85);
      font-size: 14px;
      font-weight: 600;
      line-height: 1.5;
      text-align: center;
      text-shadow: 0 1px 6px rgba(0,0,0,.25);
    }
    .welcome-card-wrap .glass-form {
      padding: 4px 28px 30px;
      display: grid;
      gap: 14px;
      position: relative;
      z-index: 1;
    }
    .welcome-card-wrap .glass-primary {
      margin-top: 6px;
      width: 100%;
      padding: 13px 14px;
      border: none;
      border-radius: 12px;
      background: var(--stamp);
      color: #fff;
      font-size: 15px;
      font-weight: 600;
      letter-spacing: .3px;
      cursor: pointer;
    }
    .welcome-card-wrap .glass-primary:hover {
      background: #9a6111;
    }
    .welcome-tips-tiles {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 0.5rem;
    }
    .welcome-tip-tile {
      padding: 0.6rem 0.75rem;
      background: rgba(255,255,255,.18);
      color: rgba(255,255,255,.95);
      font-weight: 700;
      border: 1px solid rgba(255,255,255,.15);
      border-radius: 10px;
      font-size: 13px;
      line-height: 1.4;
      color: rgba(255,255,255,.92);
      text-shadow: 0 1px 2px rgba(0,0,0,.2);
    }
    .welcome-tip-tile strong,
    .welcome-security-tile strong {
      display: block;
      margin-bottom: 0.15rem;
      font-size: 13px;
      color: #0b1e3a;
      font-weight: 700;
    }
    .welcome-security-tile {
      grid-column: 1 / -1;
    }
    .welcome-value-tile {
      margin-top: 0.5rem;
      line-height: 1.25;
      text-align: center;
      background: rgba(255,255,255,.22);
      border-color: rgba(255,255,255,.25);
    }
    .welcome-value-text {
      color: rgba(255,255,255,.92);
      font-weight: 700;
      line-height: 1.25;
    }
    .welcome-value-text strong {
      display: inline;
      margin: 0;
    }
    .welcome-trust-text {
      color: rgba(255,255,255,.95);
      font-weight: 700;
      display: inline-block;
    }
    .trust-line-2 { display: inline; }
    .transport-test-desktop { display: block; }
    .transport-test-mobile { display: none; }
    @media (max-width: 600px) {
      .trust-line-2 { display: block; }
      .transport-test-desktop { display: none; }
      .transport-test-mobile { display: block; }
    }
    @media (max-width: 500px) {
      .welcome-tips-tiles {
        grid-template-columns: 1fr;
      }
    }
    
    /* Dropdown Menu */
    .dropdown-toggle {
      position: relative;
    }
    .dropdown-menu {
      position: absolute;
      top: calc(100% + 4px);
      left: 0;
      background: white;
      border: 1px solid var(--gray-200);
      border-radius: 8px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
      min-width: 200px;
      z-index: 1000;
      overflow: hidden;
    }
    .dropdown-item {
      display: block;
      width: 100%;
      padding: 12px 16px;
      text-align: left;
      background: white;
      border: none;
      font-size: 14px;
      font-weight: 500;
      color: var(--navy);
      cursor: pointer;
      transition: background 0.2s;
    }
    .dropdown-item:hover {
      background: var(--gray-100);
    }
    .dropdown-item-danger {
      color: #dc2626;
    }
    .dropdown-item-danger:hover {
      background: #fee;
    }
    .dropdown-divider {
      height: 1px;
      background: var(--gray-200);
      margin: 4px 0;
    }
    
    /* Preview */
    .preview-section {
      background: var(--gray-100);
      border-radius: 12px;
      padding: 1.25rem;
      margin-top: 1rem;
    }
    .preview-row {
      display: flex;
      justify-content: space-between;
      padding: 0.5rem 0;
      border-bottom: 1px solid var(--gray-200);
    }
    .preview-row:last-child { border-bottom: none; }
    .preview-row.email-row {
      flex-direction: column;
      gap: 0.25rem;
    }
    .preview-label { color: var(--gray-500); }
    .preview-value { font-weight: 500; }
    .preview-value.email-value {
      word-break: break-all;
      font-size: 0.875rem;
    }
    .form-hero .preview-section {
      background: rgba(255,255,255,.35);
      border: 1px solid rgba(255,255,255,.4);
      border-radius: 12px;
    }
    .form-hero .preview-row {
      border-bottom-color: rgba(255,255,255,.3);
    }
    .form-hero .preview-label,
    .form-hero .preview-section h4 {
      color: rgba(11,30,58,.75) !important;
    }
    .form-hero .preview-value {
      color: #0b1e3a;
      font-weight: 600;
    }
    
    /* Success */
    .success-icon {
      width: 80px;
      height: 80px;
      background: var(--success);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 1.5rem;
      color: var(--white);
      font-size: 2rem;
    }
    /* Success overlay — fixed glass panel, sits above existing page without hiding hero */
    #successScreen {
      position: fixed;
      inset: 0;
      z-index: 1100;
      background:
        linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.45)),
        var(--hero-url, linear-gradient(180deg, #1b3658, #102033)) center/cover no-repeat;
      background-size: cover;
      align-items: center;
      justify-content: center;
      padding: 1.5rem;
      overflow-y: auto;
    }
    #successScreen.active { display: flex !important; }
    #successScreen textarea::placeholder { color: rgba(255, 255, 255, .45); }

    .draft-success-message {
      background: var(--white);
      border: 2px solid var(--success);
      border-radius: 12px;
      padding: 2rem;
      text-align: center;
      margin-top: 1.5rem;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }
    .form-hero .draft-success-message {
      position: absolute;
      inset: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.9));
      border: 1px solid rgba(255,255,255,.5);
      border-radius: 12px;
      box-shadow: 0 8px 24px rgba(0,0,0,.25);
      z-index: 10;
    }
    .form-hero .draft-success-message h3 {
      color: #0b1e3a;
    }
    .form-hero .draft-success-message p {
      color: rgba(11,30,58,.8);
    }

    /* Glass overlay for form-section containers inside hero backgrounds */
    .form-hero .form-section {
      background: var(--surface-2);
      border: 1px solid var(--line);
      border-radius: 16px;
      box-shadow: var(--shadow);
    }

    .draft-success-message h3 {
      color: var(--success);
      font-size: 1.25rem;
      font-weight: 600;
      margin: 0 0 0.5rem 0;
    }

    .draft-success-message p {
      color: var(--gray-600);
      margin: 0;
      font-size: 0.875rem;
    }

    /* ── Boarding-pass trip card (Transit pitch component) ── */
    .pass-wrap { margin-bottom: 1.1rem; }
    .pass {
      background: var(--surface-2);
      border: 1px solid var(--line);
      border-radius: 14px;
      overflow: hidden;
      box-shadow: var(--shadow);
    }
    .pass-top {
      background: var(--ink);
      color: #fff;
      padding: 0.85rem 1.1rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 0.35rem 0.75rem;
    }
    /* A trip submitted while Test Mode was on — independent of whether Test
       Mode is on RIGHT NOW, so an old test submission always reads as one. */
    .pass-top-test { background: var(--stamp); }
    .pass-route {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      font-weight: 800;
      font-size: 1.05rem;
      letter-spacing: 0.01em;
      min-width: 0;
    }
    .pass-route svg { width: 18px; height: 18px; flex-shrink: 0; }
    .pass-code {
      font-family: var(--mono);
      font-size: 0.62rem;
      letter-spacing: 0.13em;
      text-transform: uppercase;
      color: rgba(255,255,255,.72);
      text-align: right;
      flex-shrink: 0;
    }
    .pass-grid { display: grid; grid-template-columns: 1fr 1fr; }
    .pass-cell {
      padding: 0.75rem 1.1rem;
      border-top: 1px solid rgba(11,31,59,.08);
      min-width: 0;
    }
    .pass-cell:nth-child(odd) { border-right: 1px solid rgba(11,31,59,.08); }
    .pass-cell.full { grid-column: 1 / -1; }
    .pass-k {
      font-family: var(--mono);
      font-size: 0.6rem;
      letter-spacing: 0.13em;
      text-transform: uppercase;
      color: var(--muted);
      margin: 0 0 0.25rem;
    }
    .pass-v {
      font-weight: 700;
      font-size: 0.95rem;
      color: var(--ink);
      margin: 0;
      overflow-wrap: break-word;
    }
    .pass-v.data {
      font-family: var(--mono);
      font-variant-numeric: tabular-nums;
      letter-spacing: 0.01em;
    }
    .pass-submitted {
      font-family: var(--mono);
      font-size: 0.62rem;
      letter-spacing: 0.06em;
      color: var(--muted);
      margin: 0.5rem 0 0;
      text-align: center;
    }

    /* Drafts List */
    #draftsList, #historyList {
      /* Improve mobile scroll performance */
      -webkit-overflow-scrolling: touch;
    }
    
    .draft-item {
      background: var(--white);
      border: 1px solid var(--gray-200);
      border-radius: 8px;
      padding: 1rem;
      margin-bottom: 0.75rem;
      /* Prevent touch conflicts on mobile */
      touch-action: manipulation;
      display: flex;
      flex-direction: column;
      gap: 1rem;
      transition: all 0.2s ease;
    }

    /* Desktop: horizontal layout */
    @media (min-width: 640px) {
      .draft-item {
        flex-direction: row;
      align-items: center;
      justify-content: space-between;
      }
    }

    .draft-item:hover {
      border-color: var(--blue);
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }

    .draft-info {
      flex: 1;
    }

    .draft-title {
      font-weight: 600;
      color: var(--gray-900);
      margin-bottom: 0.25rem;
    }

    .draft-meta {
      font-size: 0.75rem;
      color: var(--gray-500);
    }
    .draft-meta-icon {
      display: inline-flex;
      vertical-align: -0.2em;
      margin-right: 0.15rem;
    }
    .form-hero .draft-meta,
    .form-hero .draft-meta .draft-meta-icon {
      color: var(--muted);
    }
    /* Paper: draft rows are bordered white cards on the paper surface */
    .form-hero .draft-item {
      background: var(--surface-2);
      border: 1px solid var(--line);
    }
    .form-hero .draft-item:hover {
      background: var(--surface-2);
      border-color: var(--stamp);
      box-shadow: 0 2px 10px -4px rgba(11,31,59,.2);
    }
    .form-hero .draft-title {
      color: var(--ink);
    }

    .draft-actions {
      display: flex !important;
      flex-wrap: wrap;
      gap: 8px;
      opacity: 1 !important;
      visibility: visible !important;
      position: relative !important;
      z-index: 10 !important;
      width: 100%;
    }

    .draft-actions button {
      flex: 1 1 calc(50% - 8px);
      min-width: 0;
    }

    /* Desktop: single row, natural sizing */
    @media (min-width: 768px) {
      .draft-actions {
        width: auto;
      }
      .draft-actions button {
        flex: 0 1 auto;
      }
    }

    .btn-draft-load, .btn-draft-view {
      background: var(--navy) !important; /* Match Submit button */
      color: #ffffff !important;
      border: none !important;
      padding: 0.5rem 1rem;
      border-radius: 6px;
      font-size: 0.875rem;
      font-weight: 600 !important;
      cursor: pointer;
      transition: all 0.2s ease;
      opacity: 1 !important;
      visibility: visible !important;
      display: inline-block !important;
      position: relative !important;
      z-index: 10 !important;
      flex: 1; /* Grow to fill space on mobile */
      min-width: 0;
    }

    /* Desktop: auto width for load button */
    @media (min-width: 640px) {
      .btn-draft-load, .btn-draft-view {
        flex: 0 0 auto;
        min-width: 90px;
      }
    }

    .btn-draft-load:hover, .btn-draft-view:hover {
      background: var(--navy-light) !important;
    }

    .btn-draft-delete {
      background: #dc2626 !important;
      color: #fff !important;
      border: none !important;
      padding: 0.5rem 1rem;
      border-radius: 6px;
      font-size: 0.875rem;
      font-weight: 700 !important;
      cursor: pointer;
      transition: all 0.2s ease;
      opacity: 1 !important;
      visibility: visible !important;
      display: inline-block !important;
      position: relative !important;
      z-index: 10 !important;
      flex: 1; /* Grow to fill space on mobile */
      min-width: 0;
    }

    .btn-draft-delete:hover {
      background: #b91c1c !important;
    }

    /* Desktop: auto width for delete button */
    @media (min-width: 640px) {
      .btn-draft-delete {
        flex: 0 0 auto;
        min-width: 90px;
      }
    }

    .loading-drafts {
      text-align: center;
      padding: 2rem;
      color: var(--gray-500);
    }

    .no-drafts {
      text-align: center;
      padding: 2rem;
      color: var(--gray-500);
    }

    /* Skeleton loading rows (Transit) */
    .skel-card {
      background: var(--surface-2);
      border: 1px solid var(--line);
      border-radius: 14px;
      padding: 1rem 1.1rem;
      margin-bottom: 0.9rem;
    }
    .skel {
      height: 12px;
      border-radius: 6px;
      background: linear-gradient(90deg, rgba(11,31,59,.06), rgba(11,31,59,.12), rgba(11,31,59,.06));
      background-size: 200% 100%;
      animation: skelShimmer 1.3s ease-in-out infinite;
    }
    .skel + .skel { margin-top: 0.6rem; }
    .skel.w40 { width: 40%; }
    .skel.w60 { width: 60%; }
    .skel.w80 { width: 80%; }
    @keyframes skelShimmer { to { background-position: -200% 0; } }
    @media (prefers-reduced-motion: reduce) { .skel { animation: none; } }

    /* Field groups for non-input elements */
    .field-group {
      margin-bottom: 1rem;
    }

    .field-label {
      font-size: 0.875rem;
      font-weight: 500;
      color: var(--gray-700);
      margin-bottom: 0.5rem;
      display: block;
    }
    
    .hidden { display: none !important; }
    .loading {
      display: inline-block;
      width: 20px;
      height: 20px;
      border: 2px solid rgba(255,255,255,0.3);
      border-top-color: white;
      border-radius: 50%;
      animation: spin 0.8s linear infinite;
    }
    @keyframes spin { to { transform: rotate(360deg); } }
    
    /* Animated dots for loading text */
    .loading-dots::after {
      content: '';
      animation: dots 1.5s steps(4, end) infinite;
    }
    @keyframes dots {
      0%, 20% { content: ''; }
      40% { content: '.'; }
      60% { content: '..'; }
      80%, 100% { content: '...'; }
    }
    
    .center { text-align: center; }
    .mt-1 { margin-top: 1rem; }
    .mt-2 { margin-top: 2rem; }

    /* Learn More Card (inline, replaces signup card) */
    .learn-more-card {
      display: none;
    }
    .learn-more-card.active {
      display: block;
    }
    .learn-more-card .lm-inner {
      padding: 28px 24px 24px;
      position: relative;
      z-index: 1;
    }
    .learn-more-card .lm-title {
      text-align: center;
      font-size: 13px;
      letter-spacing: .3px;
      color: #0b1e3a;
      margin-bottom: 8px;
    }
    .learn-more-card .lm-title span {
      font-weight: 700;
      font-size: 14px;
    }
    .learn-more-card .lm-divider {
      height: 1px;
      background: rgba(255,255,255,.15);
      margin: 16px 0 24px;
    }
    .learn-more-card .lm-quote {
      font-family: 'Lora', Georgia, serif;
      font-style: italic;
      font-weight: 600;
      font-size: 15px;
      line-height: 1.65;
      color: #0b1e3a;
      border-left: 3px solid #4abe82;
      padding-left: 16px;
      margin-bottom: 20px;
    }
    .learn-more-card .lm-body {
      font-size: 14px;
      line-height: 1.7;
      color: rgba(255,255,255,.85);
      font-weight: 600;
      margin-bottom: 24px;
    }
    .learn-more-card .lm-features {
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-bottom: 24px;
    }
    .learn-more-card .lm-feature {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,.1);
      border-radius: 12px;
      padding: 12px 14px;
    }
    .learn-more-card .lm-feature-icon {
      width: 32px;
      height: 32px;
      border-radius: 9px;
      background: linear-gradient(135deg, #34a06e, #4abe82);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .learn-more-card .lm-feature-icon svg {
      width: 16px;
      height: 16px;
    }
    .learn-more-card .lm-feature-title {
      font-size: 13px;
      font-weight: 700;
      color: #0b1e3a;
      margin-bottom: 2px;
    }
    .learn-more-card .lm-feature-desc {
      font-size: 12px;
      color: #fff;
      font-weight: 600;
      line-height: 1.5;
    }
    .learn-more-card .lm-security {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,.1);
      border-radius: 12px;
      padding: 12px 14px;
      margin-bottom: 24px;
    }
    .learn-more-card .lm-security-icon {
      width: 32px;
      height: 32px;
      border-radius: 9px;
      background: linear-gradient(135deg, #34a06e, #4abe82);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .learn-more-card .lm-security-icon svg {
      width: 16px;
      height: 16px;
    }
    .learn-more-card .lm-security-title {
      font-size: 13px;
      font-weight: 700;
      color: #0b1e3a;
      margin-bottom: 2px;
    }
    .learn-more-card .lm-security-desc {
      font-size: 12px;
      color: #fff;
      font-weight: 600;
      line-height: 1.5;
    }
    .learn-more-card .lm-close-btn {
      width: 100%;
      padding: 15px;
      border-radius: 14px;
      border: none;
      background: linear-gradient(135deg, #34a06e, #4abe82);
      color: #fff;
      font-family: 'DM Sans', sans-serif;
      font-size: 15px;
      font-weight: 600;
      cursor: pointer;
      transition: background 0.2s;
    }
    .learn-more-card .lm-close-btn:hover {
      background: linear-gradient(135deg, #2e9062, #42b278);
    }

/* ---- second style block (was mid-document) ---- */

.social-proof-carousel {
          background: var(--surface-2);
          border: 1px solid var(--line);
          box-shadow: var(--shadow);
          border-radius: 12px;
          margin-bottom: 1rem;
          overflow: hidden;
          cursor: pointer;
        }
        .social-proof-stars {
          display: flex;
          gap: 0.2rem;
          justify-content: center;
          color: #F59E0B;
        }
        .social-proof-track {
          display: flex;
          transition: transform 0.3s ease;
        }
        .social-proof-slide {
          min-width: 100%;
          box-sizing: border-box;
        }
        .social-proof-dots {
          display: flex;
          justify-content: center;
          gap: 0.5rem;
          padding: 0.75rem;
          border-top: 1px solid rgba(255,255,255,.2);
        }
        .social-proof-dot {
          width: 8px;
          height: 8px;
          border-radius: 50%;
          border: none;
          background: rgba(255,255,255,.4);
          cursor: pointer;
          padding: 0;
          transition: background 0.2s;
        }
        .social-proof-dot:hover { background: rgba(255,255,255,.6); }
        .social-proof-dot.active { background: #fff; }
        .social-proof-next-num { font-size: 1.5rem; font-weight: 700; color: #fff; }
        .social-proof-next-label { font-size: 0.8rem; color: #0b1e3a; }
        .social-proof-slide-heading { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; gap: 0.5rem; align-self: stretch; }
        .social-proof-slide-heading svg { width: 20px; height: 20px; flex-shrink: 0; }
        .social-proof-date-block { text-align: center; }
        .social-proof-next-trip-row > div > div { text-align: center; }
        .social-proof-carousel div:has(> .social-proof-next-num) {
          text-align: center;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          gap: 0.15rem;
        }
        .social-proof-slide[data-slide="0"] > div,
        .social-proof-slide[data-slide="1"] > div,
        .social-proof-slide[data-slide="2"] > div,
        .social-proof-slide[data-slide="3"] > div {
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
          align-items: center;
          min-height: 140px;
          padding-top: 1rem !important;
        }
        /* Mobile: hide airport block in slide 2 (shown in slide 3); show slide 3 */
        @media (max-width: 767px) {
          .social-proof-next-airport { display: none !important; }
        }
        /* Desktop: hide slide 3 and its dot; show airport in slide 2; keep all on one line */
        @media (min-width: 768px) {
          .social-proof-slide-mobile-only { display: none !important; }
          .social-proof-dot-mobile-only { display: none !important; }
          .social-proof-countries-desktop-only { display: block !important; }
          .social-proof-next-trip-row { display: flex !important; flex-wrap: nowrap !important; justify-content: center; align-items: center; gap: 2rem; }
          .social-proof-next-trip-row > * { flex-wrap: nowrap !important; margin-top: 0 !important; }
        }
        .next-trip-stats-grid {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 0.75rem 1.5rem;
          width: 100%;
          max-width: 340px;
          margin: 0 auto;
        }
        .next-trip-stats-grid > div { text-align: center; }
        @media (min-width: 768px) {
          .next-trip-stats-grid {
            display: flex;
            flex-wrap: nowrap;
            justify-content: center;
            align-items: center;
            gap: 1.5rem;
            max-width: none;
            width: auto;
          }
        }
        #socialProofQuoteContainer {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          text-align: center;
        }
        /* Welcome carousel — compact row layout */
        .welcome-carousel-slide {
          display: flex;
          align-items: center;
          gap: 1rem;
          padding: 0.85rem 1rem;
          width: 100%;
          box-sizing: border-box;
        }
        .welcome-carousel-icon {
          flex-shrink: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          width: 40px;
          height: 40px;
          background: rgba(255,255,255,0.25);
          border-radius: 8px;
        }
        .welcome-carousel-text {
          flex: 1;
          min-width: 0;
        }
        .welcome-carousel-title {
          font-size: 0.95rem;
          font-weight: 700;
          color: #0b1e3a;
          line-height: 1.2;
        }
        .welcome-carousel-desc {
          font-size: 0.82rem;
          color: rgba(11,30,58,0.8);
          line-height: 1.4;
          margin-top: 0.2rem;
        }
        .welcome-carousel-btn {
          flex-shrink: 0;
          background: rgba(255,255,255,0.3);
          border: 1px solid rgba(255,255,255,0.5);
          border-radius: 6px;
          padding: 0.3rem 0.7rem;
          font-size: 0.75rem;
          font-weight: 600;
          color: #0b1e3a;
          cursor: pointer;
          white-space: nowrap;
        }
        .welcome-carousel-btn:hover {
          background: rgba(255,255,255,0.45);
        }
        /* Override the 140px min-height for welcome carousel slides */
        #welcomeCarousel .social-proof-slide > div {
          min-height: auto !important;
          padding-top: 0 !important;
          flex-direction: row !important;
          align-items: center !important;
        }


    /* ============================================================
       WELCOME BOARDING PASS — the home card as an actual ticket:
       navy header, white body, a hero, a grid of tap-boxes (no
       carousel) and a light feedback strip. Replaces the old dark
       swiping card. The separate social-proof card is hidden; its
       first review is mirrored into the strip below.
       ============================================================ */
    .form-hero #socialProofCarousel { display: none !important; }
    /* Neutralise the glass-era wrapper decoration */
    .welcome-card-wrap.welcome-pass-wrap { background: none !important; box-shadow: none !important; }
    .welcome-card-wrap.welcome-pass-wrap::before,
    .welcome-card-wrap.welcome-pass-wrap::after { display: none !important; content: none !important; }

    .welcome-pass { background: var(--surface-2); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; box-shadow: 0 12px 30px rgba(11,31,59,.10); }
    .welcome-pass .pass-top { background: var(--ink); }
    .welcome-pass .pass-code { text-transform: uppercase; }

    .welcome-hero { padding: 1.2rem 1.15rem 1.05rem; text-align: center; border-bottom: 1px dashed var(--line); position: relative; }
    .welcome-hero-k { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--stamp); margin-bottom: 0.35rem; }
    .welcome-hero-title { font-size: 1.55rem; font-weight: 800; line-height: 1.1; letter-spacing: -0.01em; color: var(--ink); margin: 0; }
    .welcome-hero-sub { margin: 0.55rem auto 0; max-width: 32ch; font-size: 0.82rem; line-height: 1.45; color: var(--muted); font-weight: 600; }
    /* perforation notches at the hero/grid seam */
    .welcome-hero::before, .welcome-hero::after { content: ""; position: absolute; bottom: -9px; width: 16px; height: 16px; border-radius: 50%; background: var(--paper); border: 1px solid var(--line); }
    .welcome-hero::before { left: -9px; }
    .welcome-hero::after { right: -9px; }

    .welcome-grid { display: grid; grid-template-columns: 1fr 1fr; }
    .welcome-cell { padding: 0.85rem 1.05rem; border: none; border-top: 1px solid rgba(11,31,59,.08); text-align: left; background: none; cursor: pointer; display: flex; gap: 0.65rem; align-items: center; width: 100%; font-family: inherit; -webkit-tap-highlight-color: transparent; }
    .welcome-cell:nth-child(odd) { border-right: 1px solid rgba(11,31,59,.08); }
    .welcome-cell.full { grid-column: 1 / -1; }
    /* hover:hover excludes touch devices, where a tap applies :hover with no
       mouse to move away and clear it — the cell (esp. Test Mode) would
       otherwise stay visibly "lit up" after every tap. */
    @media (hover: hover) {
      .welcome-cell:not(.welcome-cell-static):hover { background: var(--surface); }
      /* Higher specificity than the rule above (same 3 class-selectors, but
         listed after) so hovering an active Test Mode cell doesn't wash the
         amber fill back out to plain grey. */
      .welcome-cell.welcome-cell-active:hover { background: var(--stamp); }
    }
    .welcome-cell-static { cursor: default; }
    .welcome-cell-ic { width: 34px; height: 34px; flex-shrink: 0; border-radius: 9px; background: var(--stamp-soft); display: flex; align-items: center; justify-content: center; }
    .welcome-cell-ic svg { width: 18px; height: 18px; stroke: var(--stamp); fill: none; }
    .welcome-cell-tx { min-width: 0; }
    .welcome-cell-k { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 0.35rem; }
    .welcome-cell-k .arr { color: var(--stamp); font-weight: 800; }
    .welcome-cell-v { display: block; font-weight: 700; font-size: 0.9rem; color: var(--ink); margin-top: 0.12rem; line-height: 1.2; }
    /* Test Mode tap-box reflects the live state — amber fill, same language
       as every other test-mode surface in the app. */
    .welcome-cell-active { background: var(--stamp); }
    .welcome-cell-active .welcome-cell-ic { background: rgba(255,255,255,.22); }
    .welcome-cell-active .welcome-cell-ic svg { stroke: #fff; }
    .welcome-cell-active .welcome-cell-k,
    .welcome-cell-active .welcome-cell-k .arr,
    .welcome-cell-active .welcome-cell-v { color: #fff; }

    .welcome-fb { border-top: 1px solid var(--line); background: var(--surface); padding: 0.8rem 1.1rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.3rem; text-align: center; }
    .welcome-fb-stars { color: var(--stamp); letter-spacing: 1px; font-size: 0.8rem; flex-shrink: 0; }
    .welcome-fb-q { font-size: 0.8rem; font-style: italic; color: var(--muted); font-weight: 600; line-height: 1.3; transition: opacity 0.25s ease; }

    /* ============================================================
       PUBLIC HOMEPAGE (hp-*) — bright paper marketing page, the
       first thing visitors see. Boarding-pass motifs, Transit tokens.
       ============================================================ */
    /* Full-bleed: cancel the .container's 1.5rem padding so the paper reaches the edges */
    .hp-screen { background: var(--paper); color: var(--ink); min-height: 100vh; margin: -1.5rem -1.5rem -1.5rem; padding: 1.5rem 1.15rem 3rem; font-family: var(--sans); }
    .hp-screen section, .hp-screen > footer { max-width: 640px; margin: 0 auto; }

    .hp-topbar { max-width: 640px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 1.1rem 0 0.5rem; }
    .hp-brand { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 800; font-size: 1.15rem; color: var(--ink); }
    .hp-brand svg { width: 20px; height: 20px; }
    .hp-nav-login { background: none; border: none; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; color: var(--ink); cursor: pointer; padding: 0.4rem 0.2rem; }

    .hp-hero { text-align: center; padding: 1.6rem 0 0.5rem; }
    .hp-eyebrow { font-family: var(--mono); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #9a6111; margin: 0 0 0.7rem; }
    .hp-h1 { font-size: 2.15rem; font-weight: 800; line-height: 1.08; letter-spacing: -0.02em; color: var(--ink); margin: 0; }
    .hp-lede { max-width: 34ch; margin: 0.85rem auto 0; font-size: 0.95rem; line-height: 1.5; color: var(--muted); font-weight: 500; }
    .hp-cta-row { display: flex; gap: 0.6rem; justify-content: center; flex-wrap: wrap; margin-top: 1.25rem; }
    /* Hero CTAs: equal width */
    .hp-hero .hp-cta-row .hp-btn { flex: 1 1 0; max-width: 180px; text-align: center; }
    .hp-btn { font-family: inherit; font-weight: 700; font-size: 0.9rem; padding: 0.75rem 1.6rem; border-radius: 10px; cursor: pointer; border: 1px solid transparent; transition: background 0.15s, transform 0.05s; }
    .hp-btn:active { transform: translateY(1px); }
    .hp-btn-primary { background: var(--stamp); color: #fff; }
    .hp-btn-primary:hover { background: #9a6111; }
    .hp-btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
    .hp-btn-ghost:hover { background: rgba(11,31,59,.05); }
    .hp-btn-ghost-dark { color: #fff; border-color: rgba(255,255,255,.4); }
    .hp-btn-ghost-dark:hover { background: rgba(255,255,255,.12); }

    /* hero boarding-pass motif */
    .hp-ticket { max-width: 380px; margin: 1.9rem auto 0; background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; box-shadow: 0 16px 40px rgba(11,31,59,.14); text-align: left; }
    .hp-ticket-top { background: var(--ink); color: #fff; padding: 0.7rem 1rem; display: flex; align-items: center; justify-content: space-between; }
    .hp-ticket-route { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 800; font-size: 0.95rem; }
    .hp-ticket-route svg { width: 16px; height: 16px; }
    .hp-ticket-code { font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.12em; color: rgba(255,255,255,.72); }
    .hp-ticket-grid { display: grid; grid-template-columns: 1fr 1fr; }
    .hp-tc { padding: 0.7rem 1rem; border-top: 1px solid rgba(11,31,59,.08); }
    .hp-tc:nth-child(odd) { border-right: 1px solid rgba(11,31,59,.08); }
    .hp-tk { display: block; font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.2rem; }
    .hp-tv { display: block; font-family: var(--mono); font-weight: 700; font-size: 0.95rem; color: var(--ink); }
    .hp-tv-go { color: var(--go); }
    /* Demo action tabs at the foot of the ticket — decorative only */
    .hp-ticket-actions { display: flex; border-top: 1px solid rgba(11,31,59,.10); pointer-events: none; }
    .hp-ticket-actions span { flex: 1 1 0; padding: 0.7rem 0.3rem; text-align: center; font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.09em; text-transform: uppercase; font-weight: 700; border-right: 1px solid rgba(11,31,59,.10); }
    .hp-ticket-actions span:last-child { border-right: none; }

    .hp-section { padding: 2rem 0 0; }
    .hp-kicker { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); text-align: center; margin: 0 0 1.1rem; }
    .hp-steps { display: flex; flex-direction: column; gap: 0.85rem; }
    .hp-step { display: flex; gap: 0.9rem; align-items: flex-start; background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 1rem 1.1rem; }
    .hp-step-n { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-weight: 700; font-size: 0.85rem; }
    .hp-step-t { font-weight: 700; font-size: 0.92rem; color: var(--ink); }
    .hp-step-d { font-size: 0.85rem; color: var(--muted); margin-top: 0.15rem; line-height: 1.4; }

    .hp-features { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; }
    .hp-feat { background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px; padding: 1.1rem 1rem; border-top: 2px solid var(--stamp); transition: transform 0.12s ease, box-shadow 0.15s ease; }
    .hp-feat:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(11,31,59,.10); }
    .hp-feat-ic { display: inline-flex; width: 42px; height: 42px; border-radius: 11px; background: var(--stamp-soft); align-items: center; justify-content: center; margin-bottom: 0.7rem; }
    .hp-feat-ic svg { width: 21px; height: 21px; stroke: var(--stamp); fill: none; }
    .hp-feat-t { font-weight: 700; font-size: 0.92rem; color: var(--ink); }
    .hp-feat-d { font-size: 0.8rem; color: var(--muted); margin-top: 0.2rem; line-height: 1.4; }

    /* What-is-Crewly story */
    .hp-quote-card { background: var(--surface-2); border: 1px solid var(--line); border-left: 3px solid var(--stamp); border-radius: 12px; padding: 1rem 1.15rem; margin: 0 0 1.1rem; font-style: italic; color: var(--ink); font-weight: 600; font-size: 0.92rem; line-height: 1.55; }
    .hp-check { flex-shrink: 0; color: var(--go); font-weight: 800; line-height: 1.35; }
    .hp-check-sub { font-size: 0.82rem; color: var(--muted); margin-top: 0.2rem; line-height: 1.4; }
    .hp-story-lede { text-align: center; max-width: 36ch; margin: 0 auto 1.2rem; font-size: 0.92rem; line-height: 1.5; color: var(--muted); font-weight: 500; }
    .hp-story-list { display: flex; flex-direction: column; gap: 0.7rem; }
    .hp-story-item { display: flex; gap: 0.75rem; align-items: flex-start; background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 0.9rem 1.05rem; }
    .hp-story-x { flex-shrink: 0; color: var(--stop); font-weight: 800; line-height: 1.35; }
    .hp-story-old { font-weight: 700; font-size: 0.88rem; color: var(--ink); }
    .hp-story-new { font-size: 0.82rem; color: var(--go); font-weight: 600; margin-top: 0.2rem; }
    .hp-story-new::before { content: "→ "; }

    .hp-proof { text-align: center; padding-bottom: 1.5rem; }
    .hp-stars { color: var(--stamp); letter-spacing: 2px; font-size: 1rem; }
    .hp-quote { font-size: 1.05rem; font-style: italic; font-weight: 600; color: var(--ink); max-width: 30ch; margin: 0.6rem auto 1.4rem; line-height: 1.4; }
    /* 2×2 on phones (no awkward 3+1 wrap), one row on wider screens */
    .hp-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem 0.75rem; max-width: 420px; margin: 0 auto; }
    @media (min-width: 480px) { .hp-stats { grid-template-columns: repeat(4, 1fr); max-width: 560px; } }
    .hp-stat { display: flex; flex-direction: column; }
    .hp-stat-n { font-family: var(--mono); font-size: 1.5rem; font-weight: 800; color: var(--ink); }
    .hp-stat-l { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-top: 0.15rem; }

    .hp-final { margin-top: 2.2rem; background: var(--ink); border-radius: 16px; padding: 2rem 1.25rem; text-align: center; }
    .hp-final-t { color: #fff; font-size: 1.35rem; font-weight: 800; margin: 0 0 1.1rem; letter-spacing: -0.01em; }
    /* Final CTA: stack the two buttons and make them the same width */
    .hp-final .hp-cta-row { flex-direction: column; align-items: center; }
    .hp-final .hp-btn { width: 100%; max-width: 260px; }

    .hp-footer { display: flex; align-items: center; justify-content: center; gap: 0.6rem; flex-wrap: wrap; padding: 1.75rem 0 0; }
    .hp-foot-brand { font-weight: 800; color: var(--ink); }
    .hp-foot-sep { color: var(--muted); }
    .hp-foot-link { background: none; border: none; color: var(--muted); font-weight: 600; font-size: 0.85rem; cursor: pointer; text-decoration: underline; }
    .hp-foot-copyright { text-align: center; font-size: 0.72rem; color: var(--muted); margin-top: 0.4rem; }

    /* Login popup */
    .hp-login-overlay { position: fixed; inset: 0; z-index: 9500; background: rgba(11,31,59,.55); overflow-y: auto; padding: 1.5rem 1rem; display: flex; align-items: flex-start; justify-content: center; }
    .hp-login-card { width: 100%; max-width: 400px; margin: auto; background: var(--surface-2); border-radius: 16px; overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,.3); }
    .hp-login-head { background: var(--ink); color: #fff; padding: 0.9rem 1.25rem; display: flex; align-items: center; justify-content: space-between; font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; }
    .hp-login-close { background: none; border: none; color: #fff; font-size: 1.4rem; line-height: 1; cursor: pointer; padding: 0 0.2rem; }
    .hp-login-body { padding: 1.35rem 1.35rem 1.5rem; }
    .hp-login-label { display: block; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.3rem; font-weight: 700; }
    .hp-login-error { color: var(--stop); font-size: 0.83rem; margin: 0 0 0.75rem; font-weight: 600; }
    .hp-login-links { display: flex; justify-content: space-between; margin-top: 0.9rem; }
    .hp-login-links a { font-size: 0.82rem; color: var(--muted); text-decoration: underline; }

    @media (max-width: 400px) { .hp-features { grid-template-columns: 1fr; } .hp-h1 { font-size: 1.85rem; } }

    /* ============================================================
       AUTH / JOIN SCREENS — paper + boarding-pass card (was photo-glass),
       to match the homepage, login popup and the rest of the app.
       ============================================================ */
    .compound-hero {
      background: var(--paper) !important;
      background-color: var(--paper) !important;
    }
    .compound-hero .glass-wrap { min-height: 100dvh; place-items: start center; padding: 26px 16px 14vh; }
    .compound-hero .glass-card {
      width: min(460px, 100%);
      color: var(--ink) !important;
      background: var(--surface-2) !important;
      border: 1px solid var(--line) !important;
      border-radius: 16px !important;
      box-shadow: 0 16px 44px rgba(11,31,59,.16) !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
    }
    .compound-hero .glass-card::before { display: none !important; }

    /* header → navy bar */
    .compound-hero .glass-head { background: var(--ink); padding: 1.15rem 1.5rem 1.3rem; }
    .compound-hero .powered {
      font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase;
      color: rgba(255,255,255,.8) !important; text-shadow: none !important;
      border-bottom-color: rgba(255,255,255,.2) !important;
    }
    .compound-hero .powered span { color: #fff !important; }
    .compound-hero .compound-name { color: #fff !important; font-size: 26px !important; text-shadow: none !important; }
    .compound-hero .glass-invited { color: rgba(255,255,255,.82) !important; text-shadow: none !important; }
    .compound-hero .tagline { color: rgba(255,255,255,.8) !important; text-shadow: none !important; }

    /* form body → white/paper */
    .compound-hero .glass-form { padding: 1.35rem 1.5rem 1.6rem; }
    .compound-hero .glass-field span { color: var(--muted) !important; text-shadow: none !important; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; }
    .compound-hero .glass-field input,
    .compound-hero .glass-field select,
    .compound-hero .glass-field textarea {
      background: var(--surface) !important; color: var(--ink) !important;
      border: 1px solid var(--line) !important; font-weight: 600 !important;
    }
    .compound-hero .glass-field input::placeholder,
    .compound-hero .glass-field textarea::placeholder { color: var(--muted) !important; font-weight: 400 !important; }
    .compound-hero .glass-field input:focus,
    .compound-hero .glass-field select:focus,
    .compound-hero .glass-field textarea:focus { border-color: var(--stamp) !important; }
    .compound-hero .glass-field select option { background: #fff; color: var(--ink); }
    .compound-hero .glass-field p { color: var(--muted) !important; text-shadow: none !important; }

    /* error banner → clean light-red */
    .compound-hero #signupErrorBanner { background: var(--stop-soft) !important; border-color: rgba(178,58,47,.35) !important; }
    .compound-hero #signupErrorText { color: var(--stop) !important; text-shadow: none !important; }
    .compound-hero #signupErrorHint { color: var(--muted) !important; }

    /* primary + links */
    .compound-hero .glass-primary { background: var(--stamp) !important; color: #fff !important; box-shadow: none !important; }
    .compound-hero .glass-primary:hover { background: #9a6111 !important; }
    .compound-hero .glass-link { color: var(--muted) !important; text-shadow: none !important; }
    .compound-hero .glass-link:hover { color: var(--ink) !important; }
    .compound-hero .glass-secondary { color: var(--ink) !important; border: 1px solid var(--line) !important; background: var(--surface) !important; text-shadow: none !important; }
    .compound-hero .glass-secondary:hover { background: rgba(11,31,59,.05) !important; }
    .compound-hero .glass-row-divider { color: var(--muted) !important; }
    .compound-hero .glass-row-divider::before,
    .compound-hero .glass-row-divider::after { background: var(--line) !important; }

    /* ============================================================
       JOIN / REQUEST-ACCESS AS POP-OVERS — compact ticket card on a
       navy scrim with the homepage visible behind, matching the login
       popup. (The openers guarantee the homepage is active beneath.)
       ============================================================ */
    .compound-hero.auth-pop { background: rgba(11,31,59,.55) !important; }
    .compound-hero.auth-pop .glass-wrap { min-height: 100dvh; padding: 1.5rem 1rem 4rem; }
    .compound-hero.auth-pop .glass-card { width: min(400px, 100%); }
    .compound-hero.auth-pop .powered { display: none; }
    /* Ticket-style compact header: kicker line + title, left-aligned */
    .compound-hero.auth-pop .glass-head { padding: 1rem 1.35rem 1.05rem; }
    .compound-hero.auth-pop .glass-invited {
      font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.12em;
      text-transform: uppercase; text-align: left; margin: 0 0 3px;
      color: rgba(255,255,255,.72) !important;
    }
    .compound-hero.auth-pop .compound-name { font-size: 1.25rem !important; margin: 0 !important; text-align: left !important; }
    .compound-hero.auth-pop .tagline { font-size: 12.5px !important; text-align: left !important; margin: 5px 0 0 !important; }
    /* Join card: the marketing lines live on the homepage now */
    #joinScreen.auth-pop .tagline, #joinScreen.auth-pop #joinSubtitle { display: none !important; }
    .compound-hero.auth-pop .glass-form { padding: 1.15rem 1.35rem 1.35rem; gap: 11px; }

    /* Desktop: paint the whole viewport paper while the homepage is showing,
       so the body's cream doesn't show as white bars beside the container. */
    body:has(#homepagePreviewScreen.active) { background: var(--paper); }

    /* Pop-over polish: no reveal flash, no hairline around the card on the scrim */
    .compound-hero.auth-pop,
    .compound-hero.auth-pop .glass-card { animation: none !important; }
    .compound-hero.auth-pop .glass-card { border: none !important; }

    /* Slim ticket-bar headers, matching the login popup ("LOG IN") */
    #requestAccessScreen.auth-pop .compound-name,
    #forgotPasswordScreen.auth-pop .compound-name {
      font-family: var(--mono);
      font-size: 0.78rem !important;
      letter-spacing: 0.14em !important;
      text-transform: uppercase;
      font-weight: 700 !important;
    }
    #requestAccessScreen.auth-pop .tagline { display: none !important; }
    #forgotPasswordScreen.auth-pop .tagline { font-size: 12px !important; margin-top: 6px !important; }
    /* Reset-sent stays a centred confirmation card */
    #resetLinkSentScreen.auth-pop .compound-name { text-align: center !important; font-size: 1.15rem !important; }
    #resetLinkSentScreen.auth-pop .tagline { text-align: center !important; }

    /* Remaining auth screens join the popup family */
    #resetPasswordScreen.auth-pop .compound-name {
      font-family: var(--mono); font-size: 0.78rem !important; letter-spacing: 0.14em !important;
      text-transform: uppercase; font-weight: 700 !important;
    }
    #resetPasswordScreen.auth-pop .tagline { font-size: 12px !important; margin-top: 6px !important; }
    #accessSuccessScreen.auth-pop .compound-name,
    #resetSuccessScreen.auth-pop .compound-name { text-align: center !important; font-size: 1.15rem !important; }
    #accessSuccessScreen.auth-pop .tagline,
    #resetSuccessScreen.auth-pop .tagline { text-align: center !important; }

    /* Session Expired: thin navy title bar + paper body, matching the
       boarding-pass card look elsewhere — not one big navy block. */
    #sessionExpiredScreen .session-expired-head {
      color: #fff;
      text-align: left;
      font-family: var(--mono);
      font-size: 0.8rem;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      font-weight: 700;
      padding: 0.9rem 1.25rem;
    }
    #sessionExpiredScreen .session-expired-body { text-align: center; padding: 1.75rem 1.35rem 1.6rem; }
    #sessionExpiredScreen .session-expired-icon { display: block; margin: 0 auto 0.9rem; }
    #sessionExpiredScreen .session-expired-msg {
      color: var(--ink) !important;
      font-size: 14.5px;
      font-weight: 600;
      line-height: 1.5;
      margin: 0 0 0.7rem;
      text-shadow: none !important;
    }
    #sessionExpiredScreen .session-expired-sub { color: var(--muted) !important; margin-bottom: 1.2rem; }

    /* Homepage "Request access" → slim REQUEST ACCESS bar on the join card */
    #joinScreen.join-slim .glass-invited { display: none !important; }
    #joinScreen.join-slim .compound-name {
      font-family: var(--mono); font-size: 0.78rem !important; letter-spacing: 0.14em !important;
      text-transform: uppercase; font-weight: 700 !important;
    }

    /* Reset Password: title only, like the login popup */
    #forgotPasswordScreen.auth-pop .tagline { display: none !important; }

    /* Pop-overs sit where the login popup sits: centred when short, scroll-safe
       when tall (flex + margin:auto — auto margins collapse when content overflows) */
    .compound-hero.auth-pop .glass-wrap { display: flex; min-height: 100dvh; padding: 1.5rem 1rem; }
    .compound-hero.auth-pop .glass-card { margin: auto; }

    /* ============================================================
       IN-CARD MENU — the menu icon lives in the welcome pass header;
       tapping it slides the pass left to reveal a second "menu"
       boarding pass hiding underneath. No more floating top bar on
       the home screen.
       ============================================================ */
    /* z-index lifts the whole deck above later in-flow siblings (the
       Trips bar, social proof) so an open pass that outgrows the wrap
       isn't painted over by them. */
    .welcome-pass-wrap { display: grid; position: relative; z-index: 3; }
    .welcome-pass-wrap > * { grid-area: 1 / 1; }
    /* Fixed deck order, never re-stacked: menu (0) < security (1) < front
       pass (2). The security pass lives between the two so it always slides
       out from UNDER the front pass and lands OVER the menu — no z-index
       swapping mid-transition, which is what caused both the show-through
       and the close-race bugs. */
    .welcome-pass-wrap .welcome-pass {
      position: relative; z-index: 2;
      transition: transform 0.38s cubic-bezier(0.22, 0.9, 0.3, 1),
                  opacity 0.15s ease;
    }
    /* The menu is a narrow stacked ticket on the right, so the front card only
       slides far enough to clear it — less travel, more of the pass stays visible. */
    .welcome-pass-wrap.menu-open .welcome-pass {
      transform: translateX(-72%);
      cursor: pointer;
    }
    .menu-pass {
      z-index: 0;
      align-self: start;      /* keep its natural (shorter) pass height */
      justify-self: end;      /* tucked on the right, where the reveal happens */
      width: 68%;
      background: var(--surface-2);
      border: 1px solid var(--line);
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 8px 20px rgba(11,31,59,.08);
      transform: scale(0.985);
      transition: transform 0.38s ease, opacity 0.15s ease;
    }
    .welcome-pass-wrap.menu-open .menu-pass { transform: scale(1); }
    /* While a deck pass is open it may be SHORTER than the menu, whose
       tail would poke out below — fade the menu once the pass has largely
       covered it (hence the delay); the base 0.15s opacity transition
       fades it straight back in when the deck starts shuffling shut. */
    .welcome-pass-wrap.security-open .menu-pass,
    .welcome-pass-wrap.invite-open .menu-pass,
    .welcome-pass-wrap.support-open .menu-pass,
    .welcome-pass-wrap.profile-open .menu-pass {
      opacity: 0;
      transition: transform 0.38s ease, opacity 0.2s ease 0.18s;
    }

    /* Deck passes (Security, Invite, Support): full-width cards in the
       same stack as the welcome pass, tucked left under it and INVISIBLE
       at rest (opacity 0) — the tucked position overhangs the wrap's left
       edge, where no amount of z-index can hide it, so opacity is what
       guarantees they never show through. Their z-index (1) is permanent:
       under the front pass (2), over the menu (0), so opening slides one
       out from under the front card over the menu, and OK tucks it back
       under while the front pass shuffles shut (see initPassMenu). They
       are the full deck width, so while one is open the front pass slides
       fully offstage instead of leaving its menu-mode tab overlapping. */
    .security-pass, .invite-pass, .support-pass, .profile-pass {
      /* Absolutely positioned so the closed (invisible) pass never adds
         height to the deck — otherwise the tallest pass sets the grid row
         and the welcome pass stretches into a blank apron below itself.
         overflow:hidden (not auto) so the seam notches clip cleanly; the
         ticket never inner-scrolls — the page scrolls to it instead. */
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
      width: 100%;
      overflow: hidden;
      background: var(--surface-2);
      border: 1px solid var(--line);
      border-radius: 16px;
      box-shadow: 0 8px 20px rgba(11,31,59,.08);
      transform: translateX(-55%);
      opacity: 0;
      pointer-events: none;
      transition: transform 0.38s cubic-bezier(0.22, 0.9, 0.3, 1),
                  opacity 0.3s ease 0.08s;
    }
    .welcome-pass-wrap.security-open .security-pass,
    .welcome-pass-wrap.invite-open .invite-pass,
    .welcome-pass-wrap.support-open .support-pass,
    .welcome-pass-wrap.profile-open .profile-pass {
      transform: translateX(0);
      opacity: 1;
      pointer-events: auto;
      /* Fade in fast so the card is already solid as it emerges from
         under the front pass; the close keeps the base delay so it slides
         back under before dissolving. */
      transition: transform 0.38s cubic-bezier(0.22, 0.9, 0.3, 1),
                  opacity 0.15s ease;
    }
    /* Front pass clears the stage entirely while a deck pass is open —
       placed after the .menu-open rule so it wins when both classes are
       set. Not clickable-to-close in this state: the OK button owns it. */
    .welcome-pass-wrap.security-open .welcome-pass,
    .welcome-pass-wrap.invite-open .welcome-pass,
    .welcome-pass-wrap.support-open .welcome-pass,
    .welcome-pass-wrap.profile-open .welcome-pass {
      /* -103% still leaves a ~3% sliver poking past the deck's left edge
         (same overhang trap as the deck passes), so fade it out at the
         end of the slide; the base 0.15s opacity transition fades it back
         in the moment the deck starts shuffling shut. */
      transform: translateX(-103%);
      opacity: 0;
      cursor: default;
      transition: transform 0.38s cubic-bezier(0.22, 0.9, 0.3, 1),
                  opacity 0.2s ease 0.3s;
    }
    .security-pass .pass-top, .invite-pass .pass-top, .support-pass .pass-top, .profile-pass .pass-top { border-radius: 15px 15px 0 0; }
    /* Ticket anatomy — same design language as the homepage demo ticket
       (.hp-ticket): full-bleed hairline rows, mono label/value cells,
       perforated seams, and a mono action footer. Shared by all deck
       passes. */
    .ticket-strip { padding: 0.8rem 1.1rem; border-top: 1px solid rgba(11,31,59,.08); }
    .ticket-strip:first-of-type { border-top: none; }
    .ticket-note { display: flex; gap: 0.75rem; align-items: flex-start; }
    .ticket-note svg { flex: 0 0 auto; width: 20px; height: 20px; color: var(--go); margin-top: 0.1rem; }
    .ticket-note p { margin: 0; font-size: 0.85rem; color: var(--ink); line-height: 1.5; }
    .invite-pass .invite-referral-line { font-size: 0.9rem; font-weight: 700; color: var(--ink); margin: 0; }
    .invite-pass .invite-referral-sub { font-size: 0.78rem; color: var(--muted); margin: 0.25rem 0 0; }
    .ticket-grid { display: grid; grid-template-columns: 1fr 1fr; }
    .ticket-cell { padding: 0.75rem 1.1rem; border-top: 1px solid rgba(11,31,59,.08); }
    .ticket-cell:nth-child(odd):not(.ticket-cell-full) { border-right: 1px solid rgba(11,31,59,.08); }
    .ticket-cell-full { grid-column: 1 / -1; }
    .ticket-k { display: block; font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.2rem; }
    .ticket-v { display: block; font-family: var(--mono); font-weight: 700; font-size: 0.95rem; color: var(--ink); overflow-wrap: break-word; }
    .ticket-v-lg { font-size: 1.15rem; letter-spacing: 0.06em; }
    /* Read-only identity values rendered as ticket text, not form fields —
       kept as (disabled) inputs because JS writes them via .value. */
    .ticket-v-input {
      display: block; width: 100%;
      border: none; background: none; padding: 0;
      font-family: var(--mono); font-weight: 700; font-size: 0.95rem;
      color: var(--ink); -webkit-text-fill-color: var(--ink); opacity: 1;
    }
    .ticket-cell-hint { margin: 0.25rem 0 0; font-size: 0.72rem; color: var(--muted); }
    .ticket-cell-hint a { color: var(--ink-2); border-bottom: 1px solid var(--stamp); text-decoration: none; }
    .ticket-section-k { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted); font-weight: 700; margin: 0 0 0.75rem; }
    /* Perforated seam — same notch trick as the welcome pass hero seam;
       the pass's overflow:hidden clips the outer halves. */
    .ticket-seam { position: relative; border-top: 1px dashed var(--line); }
    .ticket-seam::before, .ticket-seam::after { content: ""; position: absolute; top: -9px; width: 16px; height: 16px; border-radius: 50%; background: var(--paper); border: 1px solid var(--line); }
    .ticket-seam::before { left: -9px; }
    .ticket-seam::after { right: -9px; }
    .ticket-stub { display: flex; align-items: center; gap: 1rem; padding: 0.95rem 1.1rem; }
    /* Danger stub rows (security pass): the destructive actions live
       behind the perforation like a tear-off section. */
    .ticket-danger-row { padding: 0.85rem 1.1rem; }
    .ticket-danger-row + .ticket-danger-row { border-top: 1px solid rgba(11,31,59,.08); }
    .ticket-danger-btn {
      border: none; background: none; cursor: pointer; padding: 0;
      font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.09em;
      text-transform: uppercase; font-weight: 700; color: var(--stop);
      -webkit-tap-highlight-color: transparent;
    }
    .ticket-danger-btn:hover { text-decoration: underline; }
    .ticket-danger-btn:disabled { color: var(--muted); cursor: default; text-decoration: none; }
    .ticket-danger-hint { margin: 0.3rem 0 0; font-size: 0.75rem; color: var(--muted); }
    /* Support pass: the form rides inside the ticket body */
    .ticket-form { padding: 1rem 1.1rem 0.25rem; }
    .support-upload-area {
      border: 2px dashed var(--line);
      border-radius: 14px;
      padding: 1rem;
      text-align: center;
      cursor: pointer;
      transition: all 0.2s;
      background: var(--surface);
      color: var(--ink);
    }
    .ticket-copied { margin: 0; padding: 0.5rem 1.1rem; border-top: 1px solid rgba(11,31,59,.08); }
    .ticket-actions { display: flex; border-top: 1px solid rgba(11,31,59,.10); }
    .ticket-actions button {
      flex: 1 1 0; min-width: 0;
      border: none; background: none; cursor: pointer;
      padding: 0.85rem 0.3rem; text-align: center;
      font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.09em;
      text-transform: uppercase; font-weight: 700;
      border-right: 1px solid rgba(11,31,59,.10);
      -webkit-tap-highlight-color: transparent;
    }
    .ticket-actions button:last-child { border-right: none; }
    .ticket-actions button:hover { background: var(--surface); }
    #copyCodeBtn { color: var(--ink-2); }
    #copyLinkBtn { color: var(--stamp); }
    #supportCancelBtn { color: var(--muted); }
    #supportSubmitBtn { color: var(--go); }
    #profileCancelBtn { color: var(--muted); }
    #profileSaveBtn { color: var(--go); }
    #updatePasswordBtn { color: var(--ink-2); }
    .pass-ok {
      background: rgba(255,255,255,.15);
      border: 1px solid rgba(255,255,255,.3);
      border-radius: 8px;
      color: #fff;
      font-family: var(--mono);
      font-size: 0.7rem;
      letter-spacing: 0.1em;
      font-weight: 700;
      padding: 0.4rem 0.9rem;
      cursor: pointer;
    }
    .pass-ok:hover { background: rgba(255,255,255,.24); }

    .pass-top-right { display: flex; align-items: center; gap: 0.6rem; }
    .pass-menu-btn {
      background: rgba(255,255,255,.12);
      border: 1px solid rgba(255,255,255,.25);
      border-radius: 8px;
      color: #fff;
      width: 30px; height: 30px;
      display: inline-flex; align-items: center; justify-content: center;
      cursor: pointer; padding: 0;
    }
    .pass-menu-btn svg { width: 16px; height: 16px; }
    .pass-menu-btn:hover { background: rgba(255,255,255,.2); }
    .menu-pass-grid { display: grid; grid-template-columns: 1fr; align-content: start; }
    .menu-cell {
      padding: 0.9rem 1.05rem;
      border: none; border-top: 1px solid rgba(11,31,59,.08);
      background: none; cursor: pointer; text-align: left;
      font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.1em;
      text-transform: uppercase; font-weight: 700; color: var(--ink);
      display: flex; align-items: center; gap: 0.4rem;
      -webkit-tap-highlight-color: transparent;
    }
    .menu-cell.full { grid-column: 1 / -1; border-right: none !important; }
    .menu-cell:hover { background: var(--surface); }
    .menu-cell-logout { color: var(--stop); }
    .menu-cell-state { font-size: 0.62rem; color: var(--stamp); }

    /* Test mode: every navy ticket header wears amber — the colour IS the banner */
    body.test-mode .pass-top,
    body.test-mode .form-hero .form-section-title { background: var(--stamp) !important; }
    body.test-mode .menu-cell-state::before { content: "ON"; }

    /* ============================================================
       TRIP SOURCE TICKET — the "Load Saved Request" button replaced
       by a slim NEW TRIP bar that slides left (same swish as the
       menu pass) to reveal Drafts / Saved / Reset tabs underneath.
       ============================================================ */
    .trip-src-wrap { display: grid; }
    .trip-src-wrap > * { grid-area: 1 / 1; }
    .trip-src-front {
      position: relative; z-index: 1;
      background: var(--ink); color: #fff;
      border-radius: 12px;
      padding: 0.6rem 0.9rem;
      display: flex; align-items: center; justify-content: space-between;
      box-shadow: 0 8px 20px rgba(11,31,59,.14);
      transition: transform 0.38s cubic-bezier(0.22, 0.9, 0.3, 1);
    }
    .trip-src-front .pass-route { font-size: 0.95rem; }
    body.test-mode .trip-src-front { background: var(--stamp); }
    .trip-src-wrap.open .trip-src-front { transform: translateX(-72%); cursor: pointer; }
    .trip-src-options {
      z-index: 0; justify-self: end; width: 68%;
      background: var(--surface-2);
      border: 1px solid var(--line);
      border-radius: 12px;
      overflow: hidden;
      display: flex; align-items: stretch;
      box-shadow: 0 6px 16px rgba(11,31,59,.08);
      transform: scale(0.985);
      transition: transform 0.38s ease;
    }
    .trip-src-wrap.open .trip-src-options { transform: scale(1); }
    .trip-src-tab {
      flex: 1 1 0; min-width: 0;
      border: none; background: none; cursor: pointer;
      padding: 0.85rem 0.25rem; text-align: center;
      font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.08em;
      text-transform: uppercase; font-weight: 700; color: var(--ink);
      border-right: 1px solid rgba(11,31,59,.08);
      -webkit-tap-highlight-color: transparent;
    }
    .trip-src-tab:last-child { border-right: none; }
    .trip-src-tab:hover { background: var(--surface); }
    .trip-src-tab-reset { color: var(--stop); }

    /* ============================================================
       TRIP SOURCE v2 — the tabs drop DOWN from the ticket bar like a
       tear-off stub: NEW (with Reset beside it) / DRAFTS / SAVED.
       Selecting a mode swaps the content inline — no page changes.
       ============================================================ */
    .trip-src-wrap { display: block; }
    .trip-src-front2 { transition: border-radius 0.3s ease; }
    .trip-src-wrap.strip-open .trip-src-front2 { border-radius: 12px 12px 0 0; }
    .trip-strip {
      display: grid;
      grid-template-rows: 0fr;
      transition: grid-template-rows 0.35s ease;
    }
    .trip-src-wrap.strip-open .trip-strip { grid-template-rows: 1fr; }
    .trip-strip-inner {
      overflow: hidden;
      min-height: 0;
      display: flex;
      align-items: stretch;
      background: var(--surface-2);
      border: 0 solid var(--line);
      border-radius: 0 0 12px 12px;
      box-shadow: 0 6px 16px rgba(11,31,59,.08);
    }
    .trip-src-wrap.strip-open .trip-strip-inner { border-width: 0 1px 1px; }
    .trip-tab {
      flex: 1 1 0; min-width: 0;
      border: none; background: none; cursor: pointer;
      padding: 0.85rem 0.25rem; text-align: center;
      font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.08em;
      text-transform: uppercase; font-weight: 700; color: var(--muted);
      border-right: 1px solid rgba(11,31,59,.08);
      -webkit-tap-highlight-color: transparent;
    }
    .trip-tab:last-child { border-right: none; }
    .trip-tab:hover { background: var(--surface); }
    .trip-tab.active { color: var(--ink); box-shadow: inset 0 -2px 0 var(--stamp); }
    .trip-tab-reset {
      flex: 0 0 auto;
      border: none; background: none; cursor: pointer;
      padding: 0.85rem 0.7rem;
      font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.06em;
      text-transform: uppercase; font-weight: 700; color: var(--stop);
      border-right: 1px solid rgba(11,31,59,.08);
      display: none;
    }
    .trip-src-wrap.mode-new .trip-tab-reset { display: block; }
    /* Trips bar stands out from the navy passes around it. */
    .trip-src-front2 { background: var(--stamp); }

    /* Sliding trip panels: nothing shows until a tab is picked; the chosen
       panel slides DOWN from under the Trips bar, and slides back UP before
       the next one appears. */
    /* Same 0.38s pace as the in-card menu slide (.welcome-pass-wrap), so the
       two "things sliding into place" motions in the app feel consistent.
       Keep this duration in sync with PANEL_MS in initTripSrc (app.js) —
       that's what the scroll-into-view timing is measured against. */
    .trip-panel {
      display: grid;
      grid-template-rows: 0fr;
      transition: grid-template-rows 0.38s cubic-bezier(0.22, 0.9, 0.32, 1),
                  margin-bottom 0.38s cubic-bezier(0.22, 0.9, 0.32, 1);
    }
    .trip-panel > .trip-panel-inner {
      min-height: 0;
      overflow: hidden;
      visibility: hidden;
      transition: visibility 0s 0.38s;
    }
    .trip-panel.open { grid-template-rows: 1fr; margin-bottom: 1rem; }
    .trip-panel.open > .trip-panel-inner { visibility: visible; transition: visibility 0s; }
    /* Once the slide has finished, let calendars/dropdowns overflow again. */
    .trip-panel.settled > .trip-panel-inner { overflow: visible; }
    /* Always-present scroll headroom (not gated on any panel's open state):
       reaching the top needs (Trips-bar height + content below it) to cover
       the full viewport, regardless of how much sits above the bar. Tying
       this to a specific panel's .open class caused two bugs in turn: an
       unscoped #id rule outranked the base min-height:0 above via
       specificity, breaking the 0fr collapse for an inactive panel; and
       even correctly scoped to .open, the reserved space still briefly
       disappeared while a panel was mid-close (before the next one opened),
       so the page snapped away from the top during every tab switch. A
       spacer that's simply always there sidesteps both. */
    .trip-scroll-spacer { min-height: 85vh; }
    .app-footer-copyright { text-align: center; font-size: 0.72rem; color: var(--muted); padding: 0 0 1.5rem; }

    /* Profile / Invite My Crew / Data Security / Support: all slide in from
       the left as a card arriving over the current screen. No dimmed scrim
       and no opaque background of their own, so the page underneath (the
       trips bar / welcome pass) stays visible around the edges — it reads
       as a fresh card joining the one already there (same idea as the
       crew-services menu reveal), not a whole new page replacing it. Kept
       permanently laid out (never display:none) and positioned off-screen
       via transform instead, since toggling display would prevent the
       transform transition from playing at all. */
    .screen.screen-slide {
      display: block;
      z-index: 9000;
      background: transparent;
      transform: translateX(-100%);
      transition: transform 0.38s cubic-bezier(0.22, 0.9, 0.32, 1);
      animation: none !important;
      pointer-events: none;
    }
    .screen.screen-slide.active {
      transform: translateX(0);
      pointer-events: auto;
    }
    /* Land flush with the screen's own top padding — the same spot the
       welcome pass sits at underneath — instead of the base .card's
       margin: 2rem auto adding an extra 32px gap above it. */
    .screen-slide .card { margin-top: 0; }
    .screen-slide .card-title { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
    .pop-close { background: none; border: none; color: #fff; font-size: 1.35rem; line-height: 1; cursor: pointer; padding: 0; }

    /* Ticket stub: compact QR code + a line of text, used by Support and
       Invite My Crew so both popups end in the same small, printable motif. */
    .qr-stub-row { display: flex; align-items: center; gap: 1rem; border-top: 1px dashed var(--line); margin-top: 1.25rem; padding-top: 1.1rem; }
    .qr-stub { flex: 0 0 auto; padding: 6px; background: #fff; border: 1px solid var(--line); border-radius: 10px; }
    .qr-stub img, .qr-stub canvas { display: block; width: 84px; height: 84px; }
    .qr-stub-k { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); font-weight: 700; margin: 0 0 0.2rem; }
    .qr-stub-v { margin: 0; font-weight: 700; font-size: 0.92rem; }
    .qr-stub-v a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--stamp); }
    .qr-stub-hint { margin: 0.25rem 0 0; font-size: 0.75rem; color: var(--muted); }
    .qr-stub-download {
      margin-top: 0.35rem;
      border: none; background: none; padding: 0; cursor: pointer;
      font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase;
      font-weight: 700; color: var(--ink-2); border-bottom: 1px solid var(--stamp);
    }

    /* Invite My Crew content */
    .invite-referral { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--stamp); border-radius: 12px; padding: 0.9rem 1rem; margin-bottom: 1.1rem; }
    .invite-referral-line { font-size: 0.95rem; font-weight: 700; color: var(--ink); margin: 0; }
    .invite-referral-line span { color: var(--stamp); }
    .invite-referral-sub { font-size: 0.82rem; color: var(--muted); margin: 0.35rem 0 0; }
    .invite-grid { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 1.1rem; }
    .invite-cell { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 0.7rem 0.85rem; min-width: 0; }
    .invite-k { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin: 0 0 0.25rem; }
    .invite-v { font-weight: 700; font-size: 0.95rem; color: var(--ink); margin: 0; overflow-wrap: break-word; }
    .invite-v-mono { font-family: var(--mono); letter-spacing: 0.03em; }
    .invite-copied { text-align: center; color: var(--go); font-size: 0.82rem; font-weight: 700; margin: 0.75rem 0 0; }

    /* My Data Security content */

    /* Crewly confirm — mini boarding-pass dialog replacing browser confirm()
       (which surfaces as a generic "cloudflare.com says" window). */
    .crew-confirm-ov { position: fixed; inset: 0; z-index: 9700; background: rgba(11,31,59,.55); display: flex; padding: 1.5rem 1rem; overflow-y: auto; }
    .crew-confirm { margin: auto; width: 100%; max-width: 340px; background: var(--surface-2); border-radius: 14px; overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,.35); animation: ticketDeal 0.28s cubic-bezier(0.22, 0.9, 0.32, 1) both; }
    .crew-confirm .pass-top.crew-danger { background: var(--stop); }
    .crew-confirm-body { padding: 1.05rem 1.15rem; font-size: 0.92rem; color: var(--ink); line-height: 1.5; }
    .crew-confirm-actions { display: flex; border-top: 1px solid var(--line); }
    .crew-confirm-actions button { flex: 1; border: none; background: none; cursor: pointer; padding: 0.85rem; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; }
    .crew-confirm-no { color: var(--muted); border-right: 1px solid var(--line); }
    .crew-confirm-yes { color: var(--ink-2); }
    .crew-confirm.danger .crew-confirm-yes { color: var(--stop); }