/* Hallmark · macrostructure: the report's verdict (copy + town tile with split card) carried into each onboarding step
 * page: Base onboarding steps (url → contact, Google connect, account picker) · sc-88652 · theme: UpHex brand (locked, Living Town)
 * Ported from the approved prototype prototypes/pack-onboarding-steps (revision 2). Loaded after pack_report_shared.css,
 * which already carries the tokens aliases, buttons, tape, town tile, split card, receipt slip, night close and tiers.
 * Everything here is scoped under .pack-onboard; no rule inlines a colour.
 * pre-emit critique: P5 H5 E4 S5 R5 V4
 */
.pack-onboard {
  --onb-copy: 34rem;

  /* ------------------------------------------------------------------ layout: copy + actions left, visual right */
  .onb__grid { display: grid; gap: var(--space-xl); padding: var(--space-xl) 0 var(--space-2xl); grid-template-areas: "copy" "actions" "visual"; }
  .onb__grid--info { grid-template-areas: "copy" "visual" "actions"; }
  .onb__copy { grid-area: copy; display: grid; gap: var(--space-md); align-content: start; min-width: 0; max-width: var(--onb-copy); }
  .onb__copy > .kicker { margin-bottom: calc(var(--space-xs) * -1); }
  .onb__actions { grid-area: actions; display: grid; gap: var(--space-sm); align-content: start; min-width: 0; max-width: var(--onb-copy); }
  .visual { grid-area: visual; position: relative; min-width: 0; margin: 0; }
  .visual--desk { display: none; }
  .onb__title { font: 800 clamp(1.875rem, 1.1rem + 2.7vw, 3.25rem)/1.06 var(--font-display); letter-spacing: -0.035em; max-width: 19ch; text-wrap: balance; overflow-wrap: anywhere; min-width: 0; }
  .onb__title em { font-weight: 500; }
  .onb__lede { font-size: var(--text-md); color: var(--color-muted); max-width: 32rem; text-wrap: pretty; }
  .onb__lede strong { color: var(--color-navy); }
  .chip { padding: 0 0.12em; border-radius: 10px; background: var(--color-blue-wash); color: var(--color-blue-deep); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
  .u-wrap { overflow-wrap: anywhere; }
  .u-nowrap { white-space: nowrap; }
  @media (min-width: 760px) {
    .visual--desk { display: block; }
    .onb__grid { padding-top: var(--space-2xl); }
  }
  @media (min-width: 960px) {
    .onb__grid, .onb__grid--info {
      min-height: calc(100svh - var(--header-h)); align-items: center; padding: var(--space-xl) 0;
      grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr); grid-template-areas: "copy visual" "actions visual"; column-gap: var(--space-2xl); row-gap: var(--space-lg);
    }
    .onb__grid > .onb__copy { align-self: end; }
    .onb__grid > .onb__actions { align-self: start; }
    .onb__grid--top { align-items: start; grid-template-rows: auto 1fr; padding-top: var(--space-2xl); }
    .onb__grid--top > .onb__copy { align-self: start; }
    .visual--sticky { position: sticky; top: calc(var(--header-h) + var(--space-lg)); align-self: start; }
  }

  /* ------------------------------------------------------------------ the three promises */
  .promises { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-md); }
  .promises li { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-sm); font-weight: 700; white-space: nowrap; }
  .promises svg { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--color-blue); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }

  /* ------------------------------------------------------------------ fields */
  .field { display: grid; gap: 6px; min-width: 0; }
  .field__label { margin: 0; font-size: var(--text-sm); font-weight: 700; color: inherit; }
  .field__note { margin: 0; font-size: var(--text-sm); color: var(--color-muted); }
  .field__note.err { color: var(--color-blue-deep); }
  .input {
    width: 100%; min-width: 0; min-height: 52px; padding: 0 var(--space-md); border: 0; border-radius: var(--radius-field);
    background: var(--color-surface); color: var(--color-navy); font: 600 var(--text-base)/1.2 var(--font-body);
    box-shadow: inset 0 0 0 1.5px var(--color-rule-strong); transition: box-shadow var(--dur-short) var(--ease-out);
  }
  .input::placeholder { color: var(--color-muted); font-weight: 500; }
  .input:hover { box-shadow: inset 0 0 0 1.5px var(--color-muted); }
  .input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--color-blue), var(--shadow-glow); }
  .input[aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--color-blue-deep); background: var(--color-soft-blue); }
  .fields { display: grid; gap: var(--space-md); }
  .field--wide { grid-column: 1 / -1; }
  @media (min-width: 600px) { .fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

  /* the website field: one pill holding the input and the action (the /pack hero start form) */
  .start__row { display: grid; gap: var(--space-xs); }
  @media (min-width: 480px) {
    .start__row { grid-template-columns: minmax(0, 1fr) auto; gap: 0; padding: 6px; border-radius: var(--radius-pill); background: var(--color-surface); box-shadow: inset 0 0 0 1.5px var(--color-rule-strong), var(--shadow-soft); }
    .start__row:focus-within { box-shadow: inset 0 0 0 2px var(--color-blue), var(--shadow-glow); }
    .start__row .input { border-radius: var(--radius-pill); box-shadow: none; padding-left: var(--space-lg); background: transparent; }
    .start__row .input[aria-invalid="true"] { background: transparent; }
  }

  /* ------------------------------------------------------------------ alerts: errors and notices in the same system */
  .alert { display: flex; gap: var(--space-sm); align-items: flex-start; margin: 0; padding: var(--space-sm) var(--space-md); border-radius: var(--radius-field); background: var(--color-soft-blue); box-shadow: inset 0 0 0 1px var(--color-blue-wash); font-size: var(--text-sm); font-weight: 600; color: var(--color-navy); }
  .alert[hidden] { display: none; }
  .alert strong { color: var(--color-blue-deep); }
  .alert svg { width: 18px; height: 18px; flex: none; margin-top: 1px; fill: none; stroke: var(--color-blue-deep); stroke-width: 2.2; stroke-linecap: round; }
  .alert--error { background: var(--color-surface); box-shadow: inset 0 0 0 1.5px var(--color-blue-deep); }

  /* ------------------------------------------------------------------ pick list (services, area, goals, accounts) */
  .picks { display: grid; border-radius: var(--radius-card); background: var(--color-surface); box-shadow: inset 0 0 0 1px var(--color-rule-strong), var(--shadow-soft); overflow: hidden; }
  .pick { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-sm) var(--space-md); min-height: 64px; padding: var(--space-sm) var(--space-md); cursor: pointer; transition: background-color var(--dur-short) var(--ease-out); }
  .pick + .pick { border-top: 1px solid var(--color-hair); }
  .pick:hover, .pick:has(input:checked) { background: var(--color-soft-blue); }
  .pick:has(input:focus-visible) { outline: 3px solid var(--color-focus); outline-offset: -3px; }
  .pick__body { display: grid; gap: 2px; min-width: 0; }
  .pick__body strong { font-weight: 800; overflow-wrap: anywhere; }
  .pick__body small { font-size: var(--text-sm); color: var(--color-muted); }
  .pick__mark { position: relative; width: 24px; height: 24px; flex: none; border-radius: 7px; box-shadow: inset 0 0 0 2px var(--color-rule-strong); background: var(--color-surface); transition: background-color var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out); }
  .pick--radio .pick__mark { border-radius: 50%; }
  .pick:has(input:checked) .pick__mark { background: var(--color-blue); box-shadow: inset 0 0 0 2px var(--color-blue); }
  .pick:has(input:checked) .pick__mark::after { content: ""; position: absolute; left: 8px; top: 4px; width: 6px; height: 11px; border: solid var(--color-surface); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
  .pick--radio:has(input:checked) .pick__mark::after { left: 7px; top: 7px; width: 10px; height: 10px; border: 0; border-radius: 50%; background: var(--color-surface); transform: none; }
  .pick__aside { font: 800 var(--text-base)/1 var(--font-display); color: var(--color-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .pick:has(input:checked) .pick__aside { color: var(--color-blue-deep); }
  .pick__icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: var(--color-soft-blue); color: var(--color-blue-deep); }
  .pick__icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .picks-count { margin: 0; font-size: var(--text-sm); font-weight: 700; color: var(--color-muted); }
  .picks-count b { color: var(--color-navy); font-variant-numeric: tabular-nums; }

  /* ------------------------------------------------------------------ town tile overlays: the route primitive, rings, tags, bubbles */
  .town-tile { position: relative; }
  .town-tile .scene__overlay { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
  .route--ghost { stroke: var(--color-navy); stroke-opacity: 0.5; stroke-width: 10; stroke-dasharray: 14 18; }
  .route--live { stroke: var(--color-blue); stroke-width: 12; filter: drop-shadow(0 0 10px var(--color-blue-glow)); stroke-dasharray: 1; stroke-dashoffset: 0; }
  .route--night.route--draw { stroke-dasharray: 1; }
  .route__end { fill: var(--color-blue); stroke: var(--color-surface); stroke-width: 5; }
  .route__halo { fill: var(--color-blue); fill-opacity: 0.25; }
  .ring { fill: none; stroke: var(--color-navy); stroke-opacity: 0.45; stroke-width: 4; stroke-dasharray: 3 12; stroke-linecap: round; }
  .bubble { position: absolute; left: var(--x); top: var(--y); display: inline-flex; align-items: center; gap: var(--space-xs); max-width: 90%; padding: 8px 12px; border-radius: var(--radius-pill); background: var(--color-surface); color: var(--color-navy); font-size: var(--text-xs); font-weight: 700; white-space: nowrap; box-shadow: var(--shadow-lift); }
  .bubble svg { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--color-blue); stroke-width: 2.4; stroke-linecap: round; }
  .bubble--night { background: var(--color-navy); color: var(--color-on-navy); }
  .bubble--night .dot { background: var(--color-teal); }
  .tag { opacity: 0; transform: translateY(6px) scale(0.96); transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out); }
  .tag.is-on { opacity: 1; transform: none; }
  @media (min-width: 760px) { .bubble { font-size: var(--text-sm); padding: 10px 16px; } }

  /* ------------------------------------------------------------------ split card states for onboarding */
  .split__title { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-sm); }
  .split__title small { font: 700 var(--text-xs)/1 var(--font-body); color: var(--color-muted); letter-spacing: 0; white-space: nowrap; }
  .split__seg { flex: 1 1 0; }
  .split__seg--done { background: var(--color-navy); }
  .split__seg--now { background: var(--color-blue); }
  .split__seg--next { background: repeating-linear-gradient(-45deg, var(--color-blue-wash) 0 5px, var(--color-soft-blue) 5px 10px); box-shadow: inset 0 0 0 1px var(--color-blue-wash); }
  .split__seg--ads { background: var(--color-navy); }
  .split__seg--fee { background: var(--color-blue); }
  .split__label { min-width: 0; }
  .split__label small { display: block; }
  .split__amount { text-align: right; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
  .split__item--now { color: var(--color-blue-deep); }
  .split__item--next { color: var(--color-muted); }
  .split__item--next .split__amount { font-weight: 600; }
  .split__item:has(.split__tick) { grid-template-columns: 18px minmax(0, 1fr) auto; }
  .split__tick { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 6px; background: var(--color-blue); }
  .split__tick svg { width: 12px; height: 12px; fill: none; stroke: var(--color-surface); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
  .split__foot { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-md); margin: var(--space-xs) 0 0; padding-top: var(--space-sm); border-top: 2px dashed var(--color-rule-strong); font-weight: 800; }
  .split__foot strong { font: 800 var(--text-xl)/1 var(--font-display); letter-spacing: -0.03em; color: var(--color-blue-deep); font-variant-numeric: tabular-nums; }
  .split__foot small { display: block; font-size: var(--text-xs); font-weight: 600; color: var(--color-muted); }
  .split__answers { display: grid; justify-items: end; }

  /* ------------------------------------------------------------------ budget: plan cards, monthly split, tier strip on paper */
  .budgets { display: grid; gap: var(--space-sm); }
  .plan-option {
    position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 2px var(--space-md); align-items: start;
    padding: var(--space-md); border-radius: var(--radius-card); background: var(--color-surface);
    box-shadow: inset 0 0 0 1px var(--color-rule-strong), var(--shadow-soft); cursor: pointer;
    transition: box-shadow var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out);
  }
  .plan-option:hover { box-shadow: inset 0 0 0 1.5px var(--color-muted), var(--shadow-soft); }
  .plan-option:has(input:checked) { background: var(--color-soft-blue); box-shadow: inset 0 0 0 2px var(--color-blue), var(--shadow-glow); }
  .plan-option:has(input:focus-visible) { outline: 3px solid var(--color-focus); outline-offset: 3px; }
  .plan-option .pick__mark { grid-row: 1 / span 3; margin-top: 2px; border-radius: 50%; }
  .plan-option:has(input:checked) .pick__mark { background: var(--color-blue); box-shadow: inset 0 0 0 2px var(--color-blue); }
  .plan-option:has(input:checked) .pick__mark::after { content: ""; position: absolute; left: 7px; top: 7px; width: 10px; height: 10px; border-radius: 50%; background: var(--color-surface); }
  .plan-option__name { font-size: var(--text-sm); font-weight: 800; color: var(--color-muted); }
  .plan-option__amount { grid-column: 2; font: 800 var(--text-xl)/1.05 var(--font-display); letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
  .plan-option__amount small { font: 700 var(--text-sm)/1 var(--font-body); color: var(--color-muted); letter-spacing: 0; }
  .plan-option__leads { grid-column: 3; grid-row: 1 / span 2; align-self: center; display: grid; justify-items: end; text-align: right; font-size: var(--text-xs); font-weight: 700; color: var(--color-muted); }
  .plan-option__leads b { font: 800 var(--text-lg)/1 var(--font-display); color: var(--color-blue-deep); font-variant-numeric: tabular-nums; }
  .plan-option__note { grid-column: 2 / -1; margin: 0; font-size: var(--text-sm); color: var(--color-muted); }
  .plan-option__flag { justify-self: start; margin-left: var(--space-xs); padding: 1px 8px; border-radius: var(--radius-pill); background: var(--color-blue); color: var(--color-surface); font-size: var(--text-xs); font-weight: 800; vertical-align: 2px; }
  .money-split { display: none; }
  .money-split.is-live { display: block; }
  .tiers--day { width: auto; margin-top: var(--space-md); grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tiers--day .tiers__step { background: var(--color-surface); box-shadow: inset 0 0 0 1px var(--color-rule-strong); }
  .tiers--day .tiers__spend, .tiers--day .tiers__step small { color: var(--color-muted); }
  .tiers--day .tiers__step strong { font-size: var(--text-lg); }
  .tiers--day .tiers__you { display: none; }
  .tiers--day .tiers__step.is-yours { background: var(--color-blue); box-shadow: 0 0 0 4px var(--color-blue-haze); color: var(--color-surface); }
  .tiers--day .tiers__step.is-yours :is(.tiers__spend, small) { color: inherit; }
  .tiers--day .tiers__step.is-yours .tiers__you { display: block; }
  @media (min-width: 760px) { .tiers--day { margin: var(--space-md) var(--space-lg) 0; grid-template-columns: repeat(2, minmax(0, 1fr)); } }

  /* ------------------------------------------------------------------ receipt lines: planned searches and the plan summary */
  .pline { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: var(--space-sm); min-height: 46px; padding: var(--space-2xs) var(--space-xs); border-bottom: 1px solid var(--color-hair); }
  .pline:last-child { border-bottom: 0; }
  .pline__mark { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; background: var(--color-soft-blue); color: var(--color-blue); transition: background-color var(--dur-long) var(--ease-out), color var(--dur-long) var(--ease-out); }
  .pline__mark svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; }
  .pline.is-read .pline__mark { background: var(--color-blue); color: var(--color-surface); }
  .pline__term { min-width: 0; font-weight: 700; overflow-wrap: anywhere; }
  .pline__cost { font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }
  .pline__cost small { font-size: var(--text-xs); font-weight: 600; color: var(--color-muted); }
  .prow { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--space-md); padding: var(--space-sm) var(--space-xs); border-bottom: 1px solid var(--color-hair); font-size: var(--text-sm); }
  .prow:last-child { border-bottom: 0; }
  .prow span { color: var(--color-muted); font-weight: 600; }
  .prow strong { font-weight: 800; text-align: right; overflow-wrap: anywhere; }
  .visual .slip-wrap { max-width: 36rem; }

  /* ------------------------------------------------------------------ the tape on analyze / research / account loading */
  .tape { min-width: 0; padding: var(--space-md); }
  .tape__row--found { background: var(--color-blue-tint); }
  [data-sorted] .tape__row--found .tape__pill { background: var(--color-blue); color: var(--color-surface); }
  .tape__foot-value { display: block; overflow-wrap: anywhere; }
  .tape__foot-value--accent { color: var(--color-on-navy-accent); }
  .tape__foot-value--small { font-size: var(--text-md); letter-spacing: -0.01em; padding-top: 0.35em; }
  .tape__window.is-settled { height: auto; max-height: calc(var(--row) * 8); overflow-y: auto; -webkit-mask-image: none; mask-image: none; }
  .tape__window.is-settled .tape__layer--sorted { position: static; }
  .tape[data-live="done"] .tape__live-dot { animation: none; background: var(--color-teal); box-shadow: none; }
  @media (min-width: 760px) { .tape { padding: var(--space-lg); } .tape__foot-value { font-size: var(--text-2xl); } .tape__foot-value.tape__foot-value--small { font-size: var(--text-md); } }
  .meter { width: 100%; height: 6px; margin: 0; border-radius: var(--radius-pill); background: var(--color-rule); overflow: hidden; }
  .meter span { display: block; height: 100%; background: var(--color-blue); transform: scaleX(0.08); transform-origin: left center; transition: transform var(--dur-long) var(--ease-out); }
  .checklist { display: none; gap: var(--space-xs); }
  @media (min-width: 760px) { .checklist { display: grid; } }
  .spin { display: none; width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid var(--color-hair); border-top-color: var(--color-muted); animation: pack-onboard-spin 0.9s linear infinite; }
  .button[data-state="loading"] .spin { display: inline-block; }
  .button[data-state="loading"] { pointer-events: none; }
  /* "Continue with the basics" (funnel/_wait_cap_continue) is a global .btn; draw it as the ghost button here */
  [data-wait-cap-continue] { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 52px; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--color-navy); font: 700 var(--text-md)/1 var(--font-body); box-shadow: inset 0 0 0 1.5px var(--color-rule-strong); cursor: pointer; }
  [data-wait-cap-continue][hidden] { display: none; }

  /* ------------------------------------------------------------------ help panel + manual customer ID (account picker) */
  .help { display: grid; gap: var(--space-sm); padding: var(--space-md) var(--space-lg); border-radius: var(--radius-card); background: var(--color-soft-blue); box-shadow: inset 0 0 0 1px var(--color-blue-wash); font-size: var(--text-sm); }
  .help[hidden] { display: none; }
  .help h2 { font: 800 var(--text-base)/1.3 var(--font-display); }
  .help p { margin: 0; }
  .manual { display: grid; gap: var(--space-sm); padding-top: var(--space-md); border-top: 1px solid var(--color-rule-strong); }
  .manual__row { display: grid; gap: var(--space-xs); }
  @media (min-width: 480px) { .manual__row { grid-template-columns: minmax(0, 1fr) auto; } }

  /* ------------------------------------------------------------------ the account step: the report's night close holding the form */
  .close { min-height: auto; display: block; }
  .close .onb__grid { position: relative; z-index: 2; }
  .close .kicker { color: var(--color-on-navy-2); }
  .close .onb__title { color: var(--color-on-navy); }
  .close .onb__title em { color: var(--color-on-navy-accent); }
  .close .onb__lede, .close .trust { color: var(--color-on-navy-2); }
  .close .field__label { color: var(--color-on-navy); }
  .close .input { box-shadow: inset 0 0 0 1.5px var(--color-line-on-navy-strong); }
  .close .alert { color: var(--color-navy); }
  .close .slip { color: var(--color-navy); }
  @media (min-width: 960px) {
    .close .onb__grid { min-height: calc(100svh - var(--header-h)); }
    .close .visual { justify-self: end; width: min(100%, 22.5rem); }
    .close .prow { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: var(--space-sm); }
  }
  @media (max-width: 759px) { .close .onb__grid { padding-top: 58vw; } }

  /* ------------------------------------------------------------------ entrance (onboard_entrance.js runs the rest; CSS carries the draws) */
  &.motion .town-tile img { animation: pack-onboard-tile 1.8s cubic-bezier(0.22, 1, 0.36, 1) both; }
  &.motion .route--draw { animation: pack-onboard-route 1.6s var(--ease-out) 0.2s both; }
  &.motion .route--night.route--draw { animation-duration: 2.2s; animation-delay: 0.4s; }
  &.motion .route__halo { animation: pack-onboard-halo 2.4s var(--ease-in-out) 1.4s infinite; transform-box: fill-box; transform-origin: center; }
  &.motion .bubble:not(.tag) { animation: pack-onboard-rise var(--dur-long) var(--ease-out) both; animation-delay: var(--d, 0.3s); }
}
@keyframes pack-onboard-spin { to { transform: rotate(360deg); } }
@keyframes pack-onboard-tile { from { transform: scale(1.08); } }
@keyframes pack-onboard-route { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes pack-onboard-halo { 50% { opacity: 0.25; transform: scale(1.6); } }
@keyframes pack-onboard-rise { from { opacity: 0; transform: translateY(8px); } }

/* ------------------------------------------------------------------ live answers (onboard_live.js lights .is-on; the server renders the saved choice lit) */
.pack-onboard {
  .ans { display: none; }
  .ans.is-on { display: block; }
  .split__answers:not(:has(.ans.is-on)) .ans--none { display: block; font-weight: 600; color: var(--color-muted); }
  .ring.is-on { stroke: var(--color-blue); stroke-opacity: 1; stroke-width: 6; stroke-dasharray: none; fill: var(--color-blue); fill-opacity: 0.12; filter: drop-shadow(0 0 8px var(--color-blue)); }
  .route--goal { stroke-dashoffset: 1; opacity: 0; transition: stroke-dashoffset 900ms var(--ease-out), opacity var(--dur-short) var(--ease-out); }
  .route--goal.is-on { stroke-dashoffset: 0; opacity: 1; }
  .money-split.is-on { display: block; }
}
.pack-onboard .pack-funnel__label { display: block; margin: 0; font-size: var(--text-sm); font-weight: 700; color: inherit; letter-spacing: 0; text-transform: none; }
.pack-onboard .close .pack-funnel__label { color: var(--color-on-navy); }
/* account picker: when Google's list never arrives, the tape gives way to the help panel */
.pack-onboard[data-account-state="empty"] [data-tape] { display: none; }
.pack-onboard .onb__form { display: grid; gap: var(--space-md); }
/* the website step's path switch: "Advertising on Google instead?" and back (epic 89274) */
.pack-onboard .path-switch { margin: 0; font-size: var(--text-sm); font-weight: 700; color: var(--color-muted); }
.pack-onboard .path-switch a { color: var(--color-blue-deep); text-decoration: underline; text-underline-offset: 3px; }
.pack-onboard .onb__copy .button--block { margin-top: var(--space-2xs); }
/* The entrance moves these with GSAP; a CSS transform transition on the same element fights it and can
   leave a button parked at its start offset, so only colour transitions here. */
.pack-onboard.motion [data-hero-copy] > .button { transition-property: background-color, box-shadow, color; }