*, *::before, *::after { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  html { -webkit-text-size-adjust: 100%; }
  body {
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--surface);
    color: var(--ink-900);
    font-family: var(--font-body);
    overflow-x: hidden;
    overscroll-behavior-y: none;
  }
  button { font-family: inherit; }
  img { display: block; max-width: 100%; }
  ::selection { background: var(--cv-cyan-100); color: var(--ink-900); }

  /* ---------- App shell ----------------------------------- */

  .app {
    --pad: clamp(20px, 5vw, 56px);
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    position: relative;
    isolation: isolate;
  }

  /* Soft brand background — visible on the welcome step only */
  .app[data-step="welcome"]::before {
    content: "";
    position: absolute; inset: 0; z-index: -1;
    background:
      radial-gradient(60vmax 60vmax at 88% -10%, var(--cv-cyan-50) 0%, transparent 55%),
      radial-gradient(50vmax 50vmax at -8% 105%, var(--sol-50) 0%, transparent 50%),
      #fff;
  }
  .app::before { content: ""; position: absolute; inset: 0; z-index: -1; background: #fff; }

  /* ---------- Top bar ------------------------------------- */
  .topbar {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px var(--pad);
    background: rgba(255,255,255,0.78);
    backdrop-filter: saturate(160%) blur(14px);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    border-bottom: 1px solid transparent;
    transition: border-color var(--dur-base) var(--ease-out);
  }
  .app[data-scrolled="true"] .topbar { border-bottom-color: var(--ink-100); }

  .topbar .logo { height: 26px; }
  @media (min-width: 640px) { .topbar .logo { height: 30px; } }

  .iconbtn {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    border: 1px solid var(--ink-200);
    color: var(--ink-700);
    width: 40px; height: 40px;
    border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
  }
  .iconbtn:hover { background: var(--ink-050); color: var(--ink-900); border-color: var(--ink-300); }
  .iconbtn:active { transform: scale(0.96); }
  .iconbtn[disabled] { opacity: 0; pointer-events: none; }

  /* ---------- Progress ------------------------------------ */
  .progress {
    padding: 4px var(--pad) 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .progress-meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 12px;
    color: var(--ink-500);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 600;
  }
  .progress-meta strong { color: var(--ink-900); font-weight: 700; }
  .progress-track {
    position: relative;
    height: 4px;
    background: var(--ink-100);
    border-radius: 999px;
    overflow: hidden;
  }
  .progress-fill {
    position: absolute; inset: 0 auto 0 0;
    background: linear-gradient(90deg, var(--cv-cyan-500), var(--cv-cyan-700));
    border-radius: inherit;
    transform-origin: left center;
    transition: width var(--dur-slow) var(--ease-out);
    box-shadow: 0 0 12px rgba(0,171,200,0.4);
  }

  /* Hide the chrome on welcome / final */
  .app[data-step="welcome"] .topbar { background: transparent; }
  .app[data-step="welcome"] .progress,
  .app[data-step="success"] .progress { display: none; }

  /* ---------- Step viewport ------------------------------- */
  .stage {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 0 var(--pad) calc(var(--pad) + env(safe-area-inset-bottom));
    position: relative;
  }
  .stage-inner {
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  .step {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 12px 0 24px;
  }

  /* Step transition */
  .step-enter { animation: stepIn 420ms var(--ease-out) both; }
  .step-exit  { animation: stepOut 200ms var(--ease-out) both; }
  @keyframes stepIn {
    from { opacity: 0; transform: translateY(14px); filter: blur(6px); }
    to   { opacity: 1; transform: translateY(0);   filter: blur(0); }
  }
  @keyframes stepOut {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(-10px); }
  }

  /* Stagger children of a step */
  .stagger > * { animation: childIn 520ms var(--ease-out) both; }
  .stagger > *:nth-child(1) { animation-delay: 60ms; }
  .stagger > *:nth-child(2) { animation-delay: 130ms; }
  .stagger > *:nth-child(3) { animation-delay: 200ms; }
  .stagger > *:nth-child(4) { animation-delay: 270ms; }
  .stagger > *:nth-child(5) { animation-delay: 340ms; }
  .stagger > *:nth-child(6) { animation-delay: 410ms; }
  .stagger > *:nth-child(7) { animation-delay: 480ms; }
  @keyframes childIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* ---------- Headings ------------------------------------ */
  .eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--cv-cyan-700); font-weight: 700;
    margin: 0 0 12px;
  }
  .eyebrow::before {
    content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--cv-cyan-500);
    box-shadow: 0 0 0 4px var(--cv-cyan-100);
  }
  h1.step-title {
    font-family: var(--font-body);
    font-size: clamp(28px, 6vw, 38px);
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--ink-900);
    font-weight: 800;
    margin: 0 0 8px;
    text-wrap: balance;
  }
  p.step-sub {
    margin: 0 0 24px;
    color: var(--ink-500);
    font-size: 15px;
    line-height: 1.5;
    text-wrap: pretty;
  }

  /* ---------- Buttons ------------------------------------- */
  .btn {
    -webkit-appearance: none;
    appearance: none;
    border: 0;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    padding: 0 28px;
    height: 56px;
    border-radius: 999px;
    background: var(--ink-900);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.005em;
    font-family: inherit;
    transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
    box-shadow: 0 6px 20px rgba(31,32,36,0.18);
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }
  .btn:hover { background: #000; box-shadow: 0 10px 28px rgba(31,32,36,0.24); }
  .btn:active { transform: scale(0.97); }
  .btn[disabled] { background: var(--ink-200); color: var(--ink-500); box-shadow: none; cursor: not-allowed; transform: none; }

  .btn.primary {
    background: var(--cv-cyan-500);
    box-shadow: var(--shadow-cyan);
  }
  .btn.primary:hover { background: var(--cv-cyan-700); }
  .btn.primary[disabled] { background: var(--ink-200); color: var(--ink-500); box-shadow: none; }

  .btn.ghost { background: transparent; color: var(--ink-700); box-shadow: none; border: 1px solid var(--ink-200); }
  .btn.ghost:hover { background: var(--ink-050); color: var(--ink-900); }

  .btn.sol { background: var(--sol-400); color: var(--ink-900); box-shadow: 0 8px 22px rgba(255,198,41,0.4); }
  .btn.sol:hover { background: var(--sol-300); }

  .btn-block { width: 100%; }
  .btn-arrow { transition: transform var(--dur-base) var(--ease-out); }
  .btn:hover .btn-arrow { transform: translateX(3px); }

  /* Bottom action bar — sticky on mobile, inline on desktop */
  .actions {
    margin-top: auto;
    display: flex;
    gap: 12px;
    padding-top: 24px;
  }
  .actions .btn { flex: 1; }
  .actions .btn.ghost { flex: 0 0 auto; padding: 0 22px; }

  /* ---------- Welcome step -------------------------------- */
  .welcome {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-align: left;
    gap: 24px;
    padding: 8px 0 24px;
  }
  .welcome-hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 0;
    flex: 0 0 auto;
  }
  .photo-frame {
    position: relative;
    width: min(84vw, 360px);
    aspect-ratio: 4 / 3;
    border-radius: 28px;
    overflow: hidden;
    background: var(--ink-100);
    box-shadow: 0 30px 60px -20px rgba(0,131,173,0.35), 0 8px 24px rgba(0,0,0,0.06);
    transform: rotate(-2deg);
  }
  .photo-frame img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
  .floaty {
    position: absolute;
    border-radius: 999px;
    pointer-events: none;
    will-change: transform;
  }
  .floaty.f1 { width: 84px; height: 84px; background: var(--sol-400); top: 0; right: 6%; box-shadow: 0 18px 30px rgba(255,198,41,0.45); animation: float1 7s var(--ease-in-out) infinite; }
  .floaty.f2 { width: 56px; height: 56px; background: var(--cv-cyan-500); bottom: 16%; left: 4%; box-shadow: 0 14px 24px rgba(0,171,200,0.45); animation: float2 9s var(--ease-in-out) infinite; }
  .floaty.f3 { width: 28px; height: 28px; background: var(--ink-900); top: 22%; left: 12%; animation: float3 6s var(--ease-in-out) infinite; }
  .floaty.f4 { width: 18px; height: 18px; border-radius: 4px; background: var(--cv-cyan-200); bottom: 8%; right: 14%; animation: float3 8s var(--ease-in-out) infinite reverse; }
  @keyframes float1 { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-14px) rotate(8deg); } }
  @keyframes float2 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(10px,-10px); } }
  @keyframes float3 { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

  .welcome-copy h1 {
    font-family: var(--font-body);
    font-size: clamp(36px, 9vw, 56px);
    line-height: 1;
    letter-spacing: -0.03em;
    font-weight: 800;
    margin: 0 0 12px;
    color: var(--ink-900);
    text-wrap: balance;
  }
  .welcome-copy h1 .accent { color: var(--cv-cyan-500); }
  .welcome-copy h1 .yellow-mark {
    display: inline-block;
    background: var(--sol-400);
    padding: 0 8px;
    border-radius: 6px;
    transform: rotate(-1.5deg);
  }
  .welcome-copy p {
    color: var(--ink-600); font-size: 16px; line-height: 1.55; margin: 0 0 24px;
    max-width: 36ch;
  }
  .welcome-meta {
    display: flex; align-items: center; gap: 10px;
    margin-top: 16px;
    color: var(--ink-500);
    font-size: 13px;
  }
  .welcome-meta .dot { width: 5px; height: 5px; border-radius: 999px; background: var(--ink-300); }

  /* ---------- Input field --------------------------------- */
  .field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
  .field-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-700);
    letter-spacing: 0.01em;
  }
  .field-control {
    position: relative;
    display: flex;
    align-items: center;
    border: 1.5px solid var(--ink-200);
    border-radius: 16px;
    background: #fff;
    transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
  }
  .field-control:hover { border-color: var(--ink-300); }
  .field-control.focused {
    border-color: var(--cv-cyan-500);
    box-shadow: 0 0 0 4px var(--cv-cyan-50);
  }
  .field-control.invalid { border-color: var(--brand-onyx); box-shadow: 0 0 0 4px rgba(55,58,54,0.06); }
  .field-control.valid::after {
    content: "";
    position: absolute;
    right: 18px;
    width: 18px; height: 18px;
    border-radius: 999px;
    background: var(--cv-cyan-500);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M5 12l4 4L19 7'/></svg>") center/16px no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M5 12l4 4L19 7'/></svg>") center/16px no-repeat;
    animation: pop 220ms var(--ease-out);
  }
  @keyframes pop { from { transform: scale(0.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
  .field-icon {
    width: 22px; height: 22px; margin-left: 16px;
    color: var(--ink-400);
    flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    transition: color var(--dur-fast) var(--ease-out);
  }
  .field-control.focused .field-icon { color: var(--cv-cyan-500); }
  .field-input {
    flex: 1;
    border: 0;
    background: transparent;
    padding: 16px 14px 16px 12px;
    font-family: inherit;
    font-size: 16px;
    color: var(--ink-900);
    width: 100%;
    outline: none;
  }
  .field-input::placeholder { color: var(--ink-400); }
  .field-error {
    color: var(--brand-onyx);
    font-size: 12px;
    font-weight: 500;
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: 6px;
    animation: childIn 200ms var(--ease-out) both;
  }
  .field-error::before {
    content: ""; width: 14px; height: 14px;
    background: var(--brand-onyx);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' d='M12 8v5M12 16.5v.5'/><circle cx='12' cy='12' r='9' fill='none' stroke='white' stroke-width='2'/></svg>") center/contain no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' d='M12 8v5M12 16.5v.5'/><circle cx='12' cy='12' r='9' fill='none' stroke='white' stroke-width='2'/></svg>") center/contain no-repeat;
  }

  /* ---------- Selectable cards ---------------------------- */
  .opt-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 8px;
  }
  @media (min-width: 540px) { .opt-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

  .opt-card {
    -webkit-appearance: none;
    appearance: none;
    border: 1.5px solid var(--ink-200);
    background: #fff;
    border-radius: 18px;
    padding: 16px 14px;
    text-align: left;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 92px;
    position: relative;
    transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
    font-family: inherit;
    color: var(--ink-900);
    -webkit-tap-highlight-color: transparent;
  }
  .opt-card:hover { border-color: var(--cv-cyan-300); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
  .opt-card:active { transform: scale(0.98); }
  .opt-card.selected {
    border-color: var(--cv-cyan-500);
    background: var(--cv-cyan-50);
    box-shadow: 0 8px 22px rgba(0,171,200,0.18);
  }
  .opt-card.selected::after {
    content: "";
    position: absolute; top: 10px; right: 10px;
    width: 22px; height: 22px;
    border-radius: 999px;
    background: var(--cv-cyan-500);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M5 12l4 4L19 7'/></svg>") center/14px no-repeat var(--cv-cyan-500);
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M5 12l4 4L19 7'/></svg>") center/14px no-repeat;
    background: var(--cv-cyan-500);
    animation: pop 280ms var(--ease-out);
  }
  .opt-card .opt-eyebrow {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-500);
    font-weight: 600;
  }
  .opt-card.selected .opt-eyebrow { color: var(--cv-cyan-700); }
  .opt-card .opt-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--ink-900);
    line-height: 1.2;
  }
  .opt-card .opt-foot {
    margin-top: auto;
    padding-top: 6px;
    font-size: 11px;
    font-weight: 600;
    color: var(--ink-500);
    letter-spacing: 0.01em;
  }
  .opt-card.selected .opt-foot { color: var(--cv-cyan-700); }
  .opt-card.no-branch { background: #fff; border-style: dashed; border-color: var(--ink-200); }
  .opt-card.no-branch .opt-foot { color: var(--cv-cyan-600); font-style: italic; }

  /* Department badge on branch cards (when showing branches outside selected dept) */
  .branch-dep {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--cv-cyan-50);
    color: var(--cv-cyan-700);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    vertical-align: middle;
  }
  .branch-card.selected .branch-dep { background: #fff; color: var(--cv-cyan-800); }

  /* ---------- Geolocation CTA ---------------------------- */
  .geo-cta {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    background: #fff;
    border: 1.5px dashed var(--cv-cyan-300);
    color: var(--cv-cyan-700);
    border-radius: 16px;
    padding: 12px 16px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    margin-bottom: 14px;
    transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
    text-align: left;
    -webkit-tap-highlight-color: transparent;
  }
  .geo-cta:hover:not(:disabled) { background: var(--cv-cyan-50); transform: translateY(-1px); }
  .geo-cta:active { transform: scale(0.99); }
  .geo-cta.active {
    background: var(--cv-cyan-50);
    border-style: solid;
    border-color: var(--cv-cyan-500);
    color: var(--cv-cyan-800);
  }
  .geo-cta .geo-icon {
    width: 28px; height: 28px; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--cv-cyan-100);
    color: var(--cv-cyan-700);
    flex: 0 0 28px;
  }
  .geo-cta.active .geo-icon { background: var(--cv-cyan-500); color: #fff; }
  .geo-cta .geo-text { flex: 1; line-height: 1.3; }
  .geo-cta .geo-check {
    width: 22px; height: 22px; border-radius: 999px;
    background: var(--cv-cyan-500); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    flex: 0 0 22px;
    animation: pop 280ms var(--ease-out);
  }
  .mini-spinner {
    width: 14px; height: 14px;
    border-radius: 999px;
    border: 2px solid var(--cv-cyan-200);
    border-top-color: var(--cv-cyan-600);
    animation: spin 700ms linear infinite;
  }

  /* ---------- Floating CTA (appears on selection, avoids long scroll) ---- */
  .floating-cta {
    position: fixed;
    left: 0; right: 0;
    bottom: 0;
    z-index: 50;
    display: flex;
    justify-content: center;
    padding: 14px var(--pad) calc(14px + env(safe-area-inset-bottom));
    background: linear-gradient(to top, rgba(255,255,255,0.98) 60%, rgba(255,255,255,0));
    transform: translateY(120%);
    opacity: 0;
    pointer-events: none;
    transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
  }
  .floating-cta.visible { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .floating-cta .btn { max-width: 560px; }

  /* ---------- Branch card --------------------------------- */
  .branch-list { display: flex; flex-direction: column; gap: 12px; }
  .branch-card {
    position: relative;
    -webkit-appearance: none;
    appearance: none;
    background: #fff;
    border: 1.5px solid var(--ink-200);
    border-radius: 20px;
    padding: 18px;
    cursor: pointer;
    display: grid;
    grid-template-columns: 56px 1fr auto;
    gap: 14px;
    align-items: start;
    text-align: left;
    font-family: inherit;
    color: var(--ink-900);
    transition: border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
    -webkit-tap-highlight-color: transparent;
  }
  .branch-body { display: block; min-width: 0; }
  .branch-card:hover { border-color: var(--cv-cyan-300); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
  .branch-card.selected { border-color: var(--cv-cyan-500); background: var(--cv-cyan-50); box-shadow: 0 10px 24px rgba(0,171,200,0.16); }
  .branch-thumb {
    width: 56px; height: 56px;
    border-radius: 14px;
    background: var(--ink-050);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    position: relative;
  }
  .branch-thumb img { width: 44px; height: 44px; object-fit: contain; }
  .branch-card.selected .branch-thumb { background: #fff; }
  .branch-name { font-weight: 700; font-size: 15px; line-height: 1.2; margin-bottom: 6px; }
  .branch-meta { font-size: 13px; color: var(--ink-600); line-height: 1.45; }
  .branch-meta-row { display: flex; align-items: flex-start; gap: 6px; }
  .branch-meta-row + .branch-meta-row { margin-top: 4px; }
  .branch-meta-row svg { flex: 0 0 14px; color: var(--ink-400); margin-top: 2px; }
  .branch-meta-row > span { min-width: 0; word-break: break-word; }
  .branch-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    padding: 7px 12px;
    border-radius: 999px;
    background: var(--ink-050);
    color: var(--ink-800);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
  }
  .branch-link:hover { background: var(--cv-cyan-500); color: #fff; transform: translateY(-1px); }
  .branch-link svg { color: currentColor; }
  .branch-card.selected .branch-link { background: #fff; color: var(--cv-cyan-800); }
  .branch-card.selected .branch-link:hover { background: var(--cv-cyan-700); color: #fff; }
  .branch-dist {
    background: var(--ink-050);
    color: var(--ink-700);
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
    white-space: nowrap;
    letter-spacing: 0.02em;
  }
  .branch-card.selected .branch-dist { background: var(--cv-cyan-500); color: #fff; }
  .branch-card.selected::before {
    content: "";
    position: absolute; top: 10px; right: 10px;
    width: 20px; height: 20px;
    border-radius: 999px;
    background: var(--cv-cyan-500);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M5 12l4 4L19 7'/></svg>") center/13px no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M5 12l4 4L19 7'/></svg>") center/13px no-repeat;
  }

  /* ---------- Calendar ----------------------------------- */
  .cal {
    background: #fff;
    border-radius: 24px;
    border: 1px solid var(--ink-100);
    padding: 18px;
    box-shadow: var(--shadow-xs);
  }
  .cal-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 14px;
  }
  .cal-month {
    font-size: 16px; font-weight: 700; color: var(--ink-900);
    text-transform: capitalize;
    letter-spacing: -0.01em;
  }
  .cal-nav { display: flex; gap: 6px; }
  .cal-nav .iconbtn { width: 36px; height: 36px; }
  .cal-dow {
    display: grid; grid-template-columns: repeat(7, 1fr);
    margin-bottom: 6px;
  }
  .cal-dow span {
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    color: var(--ink-400);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 4px 0;
  }
  .cal-grid {
    display: grid; grid-template-columns: repeat(7, 1fr);
    gap: 4px;
  }
  .cal-day {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    border: 0;
    padding: 0;
    aspect-ratio: 1;
    border-radius: 14px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    color: var(--ink-800);
    cursor: pointer;
    position: relative;
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
    -webkit-tap-highlight-color: transparent;
  }
  .cal-day.empty { visibility: hidden; }
  .cal-day.disabled { color: var(--ink-300); cursor: not-allowed; }
  .cal-day:not(.disabled):hover { background: var(--cv-cyan-50); color: var(--cv-cyan-700); }
  .cal-day.today { color: var(--cv-cyan-700); }
  .cal-day.today::after {
    content: ""; position: absolute; left: 50%; bottom: 6px;
    width: 4px; height: 4px; border-radius: 999px; background: var(--cv-cyan-500);
    transform: translateX(-50%);
  }
  .cal-day.selected {
    background: var(--cv-cyan-500);
    color: #fff;
    box-shadow: 0 8px 18px rgba(0,171,200,0.35);
    transform: scale(1.04);
  }
  .cal-day.selected::after { background: #fff; }

  /* ---------- Time chips --------------------------------- */
  .chips {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 10px;
  }
  @media (min-width: 540px) { .chips { grid-template-columns: repeat(4, minmax(0,1fr)); } }
  .chip {
    -webkit-appearance: none;
    appearance: none;
    background: #fff;
    border: 1.5px solid var(--ink-200);
    border-radius: 14px;
    padding: 14px 10px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    color: var(--ink-900);
    cursor: pointer;
    transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
    -webkit-tap-highlight-color: transparent;
  }
  .chip:hover:not(:disabled) { border-color: var(--cv-cyan-300); transform: translateY(-2px); }
  .chip:active { transform: scale(0.97); }
  .chip.selected { background: var(--cv-cyan-500); border-color: var(--cv-cyan-500); color: #fff; box-shadow: 0 8px 18px rgba(0,171,200,0.3); }
  .chip:disabled { color: var(--ink-300); background: var(--ink-050); border-color: var(--ink-100); cursor: not-allowed; text-decoration: line-through; text-decoration-color: var(--ink-300); }
  .chip-section {
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-500);
    font-weight: 700;
    margin: 16px 0 8px;
    display: flex; align-items: center; gap: 8px;
  }
  .chip-section:first-of-type { margin-top: 4px; }
  .chip-section::after {
    content: ""; flex: 1; height: 1px; background: var(--ink-100);
  }

  /* ---------- Summary list ------------------------------- */
  .summary {
    background: #fff;
    border: 1px solid var(--ink-100);
    border-radius: 22px;
    overflow: hidden;
    box-shadow: var(--shadow-xs);
  }
  .summary-row {
    display: grid;
    grid-template-columns: 18px 96px 1fr;
    align-items: start;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--ink-100);
  }
  .summary-row:last-child { border-bottom: 0; }
  .summary-row svg { color: var(--ink-400); margin-top: 1px; }
  .summary-key { color: var(--ink-500); font-size: 13px; font-weight: 500; }
  .summary-val { color: var(--ink-900); font-size: 14px; font-weight: 600; text-align: right; }
  .summary-row.split { background: var(--cv-cyan-50); }
  .summary-row.split .summary-key { color: var(--cv-cyan-700); }
  @media (max-width: 380px) {
    .summary-row { grid-template-columns: 16px 80px 1fr; padding: 12px 14px; }
  }

  .checkbox-row {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 18px 6px 6px;
    cursor: pointer;
    user-select: none;
  }
  .checkbox-row input { position: absolute; opacity: 0; pointer-events: none; }
  .checkbox-box {
    flex: 0 0 22px;
    width: 22px; height: 22px;
    border-radius: 7px;
    border: 1.5px solid var(--ink-300);
    background: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
    margin-top: 1px;
  }
  .checkbox-row:hover .checkbox-box { border-color: var(--cv-cyan-500); }
  .checkbox-row input:checked + .checkbox-box {
    background: var(--cv-cyan-500); border-color: var(--cv-cyan-500); transform: scale(1.05);
  }
  .checkbox-box svg { opacity: 0; transition: opacity var(--dur-fast) var(--ease-out); }
  .checkbox-row input:checked + .checkbox-box svg { opacity: 1; }
  .checkbox-label { font-size: 14px; color: var(--ink-700); line-height: 1.45; }

  /* ---------- Loading ------------------------------------ */
  .loader-overlay {
    position: fixed; inset: 0;
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 100;
    display: flex; align-items: center; justify-content: center;
    flex-direction: column;
    gap: 20px;
    animation: childIn 220ms var(--ease-out) both;
  }
  .loader-ring {
    width: 56px; height: 56px;
    border-radius: 999px;
    border: 4px solid var(--cv-cyan-100);
    border-top-color: var(--cv-cyan-500);
    animation: spin 800ms linear infinite;
  }
  @keyframes spin { to { transform: rotate(360deg); } }
  .loader-text { color: var(--ink-700); font-size: 14px; font-weight: 500; letter-spacing: 0.02em; }

  /* ---------- Success ------------------------------------ */
  .success {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px 0 32px;
    position: relative;
  }
  .check-badge {
    width: 112px; height: 112px;
    border-radius: 999px;
    background: var(--cv-cyan-500);
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff;
    margin: 0 auto 24px;
    position: relative;
    animation: badgePop 700ms var(--ease-out) both;
    box-shadow: 0 20px 40px rgba(0,171,200,0.35);
  }
  .check-badge::before {
    content: "";
    position: absolute; inset: -10px;
    border-radius: 999px;
    border: 2px solid var(--cv-cyan-200);
    animation: ringPulse 1.6s var(--ease-out) infinite;
  }
  @keyframes badgePop {
    0%   { transform: scale(0.3); opacity: 0; }
    60%  { transform: scale(1.08); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
  }
  @keyframes ringPulse {
    0%   { transform: scale(1); opacity: 0.7; }
    100% { transform: scale(1.35); opacity: 0; }
  }
  .check-badge svg { width: 56px; height: 56px; }
  .check-badge .check-path {
    stroke-dasharray: 60;
    stroke-dashoffset: 60;
    animation: drawCheck 600ms 380ms var(--ease-out) forwards;
  }
  @keyframes drawCheck { to { stroke-dashoffset: 0; } }
  .success h1 {
    font-size: clamp(28px, 6vw, 38px);
    line-height: 1.05;
    letter-spacing: -0.02em;
    font-weight: 800;
    margin: 0 0 10px;
    color: var(--ink-900);
    text-wrap: balance;
  }
  .success p.lead { color: var(--ink-600); max-width: 32ch; margin: 0 auto 28px; font-size: 15px; line-height: 1.55; }

  .receipt {
    width: 100%;
    background: #fff;
    border: 1px solid var(--ink-100);
    border-radius: 24px;
    padding: 20px;
    box-shadow: var(--shadow-sm);
    margin-bottom: 24px;
    text-align: left;
    position: relative;
    overflow: hidden;
  }
  .receipt::before, .receipt::after {
    content: "";
    position: absolute;
    width: 18px; height: 18px;
    border-radius: 999px;
    background: var(--ink-050);
    top: 50%; transform: translateY(-50%);
  }
  .receipt::before { left: -9px; }
  .receipt::after { right: -9px; }
  .receipt-code {
    display: flex; justify-content: space-between; align-items: center;
    padding-bottom: 14px;
    border-bottom: 1.5px dashed var(--ink-200);
    margin-bottom: 14px;
  }
  .receipt-code .code-key { font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-500); font-weight: 700; }
  .receipt-code .code-val { font-family: var(--font-mono); font-size: 18px; font-weight: 700; color: var(--ink-900); letter-spacing: 0.04em; }
  .receipt-list { display: flex; flex-direction: column; gap: 10px; }
  .receipt-list .row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
  .receipt-list .row .k { color: var(--ink-500); font-size: 13px; }
  .receipt-list .row .v { color: var(--ink-900); font-size: 14px; font-weight: 600; text-align: right; }

  .success-actions {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .success-actions .btn-block.full { grid-column: 1 / -1; }

  /* Confetti */
  .confetti {
    position: fixed;
    pointer-events: none;
    inset: 0;
    z-index: 80;
    overflow: hidden;
  }
  .confetti i {
    position: absolute;
    top: -10vh;
    width: 8px; height: 14px;
    opacity: 0;
    animation: fall linear forwards;
    border-radius: 2px;
  }
  @keyframes fall {
    0%   { transform: translate3d(0, -10vh, 0) rotate(0deg); opacity: 0; }
    10%  { opacity: 1; }
    100% { transform: translate3d(var(--dx), 110vh, 0) rotate(var(--rot)); opacity: 0.9; }
  }

  /* Small helpers */
  .helper-hint {
    margin-top: 8px;
    background: var(--cv-cyan-50);
    color: var(--cv-cyan-800);
    border-radius: 14px;
    padding: 10px 12px;
    font-size: 13px;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    line-height: 1.4;
  }
  .helper-hint svg { flex: 0 0 16px; color: var(--cv-cyan-600); margin-top: 1px; }

  .legal {
    text-align: center;
    color: var(--ink-400);
    font-size: 11px;
    margin-top: 18px;
    letter-spacing: 0.02em;
  }

  /* Desktop polish: a soft card around the wizard */
  @media (min-width: 900px) {
    .app::before {
      background:
        radial-gradient(50vmax 50vmax at 110% -10%, var(--cv-cyan-50) 0%, transparent 50%),
        radial-gradient(40vmax 40vmax at -10% 110%, var(--sol-50) 0%, transparent 45%),
        #fff;
    }
    .stage-inner { max-width: 600px; }
    .branch-card { padding: 20px; }
  }