/* Shared Outfit typography, berry/olive/rose palette, and glass surfaces. */
:root {
  --font-ui:"Outfit",system-ui,-apple-system,"Segoe UI",sans-serif;
  --brand-50:#f9edf3; --brand-100:#f4dce8; --brand-300:#e381a5;
  --brand-500:#bd2479; --brand-700:#a50064; --brand-800:#870051; --brand-900:#530b35;
  --olive:#929b3c; --olive-ink:#565d22; --olive-soft:#eef0da;
  --rose:#e381a5; --rose-soft:#f5e4eb;
  --sunshine:#fbe28d; --sunshine-soft:#fbf4d9;
  --coral:#f18a50; --coral-soft:#fce9de;
  --sky:#c4e1ef; --sky-soft:#edf6fa;
  --plum:var(--brand-700); --ink:#292826; --muted:#6d6863;
  --page:#fdfbf7; --cream:var(--page); --border:#e5dfd8; --line:var(--border);
  --neutral-soft:#eeebe6; --surface:#fffefa;
  --glass-fill:rgba(255,255,255,.78); --glass-border:rgba(255,255,255,.9);
  --glass-shadow:0 14px 40px rgba(49,44,38,.07),inset 0 1px 0 rgba(255,255,255,.9);
  --shadow-card:var(--glass-shadow); --shadow-raised:0 18px 44px rgba(49,44,38,.12);
  font-family:var(--font-ui);
}
html { background:var(--page); }
body { font-family:var(--font-ui); background:var(--page); }
.editor-shell,body.reference-mode,.reference-app { background:var(--page); }
h1,h2,h3,.brand,.brand__name { font-family:var(--font-ui); }
h1,h2 { letter-spacing:-.035em; }
.brand,.brand__name { color:var(--brand-900); font-weight:500; letter-spacing:-.03em; }
.brand__name { transform:none; }
/* Preserve the complete, stacked user-supplied lockup without cropping. */
.brand .brand__logo,.site-header .brand img.brand__logo {
  display:block; width:300px; height:auto; max-width:100%;
  object-fit:contain; object-position:center; flex:0 1 auto;
}
.editor-header .brand .brand__logo { width:230px; height:auto; }
.reference-brand-fix .brand__logo { width:100%; height:auto; object-fit:contain; }
.mobile-header__top { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,300px) minmax(0,1fr); align-items:center; }
.mobile-header__top > .brand { grid-column:2; grid-row:1; justify-self:center; }
.mobile-header__tools { grid-column:3; grid-row:1; justify-self:end; }
.site-header { flex-direction:column; justify-content:center; gap:12px; }
.site-header .brand { justify-self:center; align-self:center; }
.site-header nav { justify-content:center; }
.editor-header { grid-template-columns:minmax(0,1fr) 230px minmax(0,1fr); }
.editor-header > .brand { display:inline-flex; grid-column:2; grid-row:1; justify-self:center; }
.editor-header > .event-name { grid-column:1; grid-row:1; padding:0; border:0; min-width:0; }
.editor-header > .editor-actions { grid-column:3; grid-row:1; justify-content:flex-end; flex-wrap:wrap; }
@media(max-width:1100px) {
  .mobile-header__top { grid-template-columns:1fr; gap:14px; }
  .mobile-header__top > .brand { grid-column:1; grid-row:1; }
  .mobile-header__tools { grid-column:1; grid-row:2; justify-self:center; }
  .editor-header { display:grid; grid-template-columns:1fr; gap:12px; }
  .editor-header > .brand { grid-column:1; grid-row:1; }
  .editor-header > .event-name { grid-column:1; grid-row:2; text-align:center; }
  .editor-header > .editor-actions { grid-column:1; grid-row:3; justify-content:center; }
}
@media(max-width:760px) {
  .brand .brand__logo,.site-header .brand img.brand__logo,
  .editor-header .brand .brand__logo { width:230px; height:auto; }
}
/* Blur structural surfaces only. Inputs and moving canvas items stay crisp. */
.mobile-header,.mobile-panel,.mobile-choice,.mobile-actions,.onboarding-event-details,
.editor-header,.inspector,.floating-toolbar,.reference-modal,.consent-panel,
.site-header,.card,.calculator,details,.panel {
  background:var(--glass-fill); border-color:var(--glass-border); box-shadow:var(--glass-shadow);
  -webkit-backdrop-filter:blur(20px) saturate(130%); backdrop-filter:blur(20px) saturate(130%);
}
.button--primary,.button:not(.button--secondary):not(.button--ghost):not(.button--light):not(.button--danger),
.reference-modal__save,.consent-panel__actions button[data-consent-all] {
  color:#fff; border-color:var(--brand-800); background:linear-gradient(135deg,var(--brand-700),var(--brand-800));
  box-shadow:0 8px 22px rgba(165,0,100,.18),inset 0 1px 0 rgba(255,255,255,.25);
}
.button--secondary,.button--ghost,.button--light,.language-picker,.mobile-help-link { color:var(--ink); border-color:var(--border); background:rgba(255,255,255,.85); }
.mobile-choice.is-selected { border-color:var(--brand-700); background:rgba(255,255,255,.88); box-shadow:0 0 0 2px rgba(165,0,100,.08),var(--glass-shadow); }
.mobile-choice:focus-visible,.button:focus-visible { outline:3px solid var(--brand-500); outline-offset:3px; }
.language-picker__icon,.mobile-help-link__icon,.mobile-stepper button,.area-summary,.mobile-mixed { background:var(--neutral-soft); }
.mobile-stepper button:active { background:#e4ded6; }
.mobile-capacity.reference-capacity-value { background:rgba(255,255,255,.9); }
.mobile-capacity.reference-capacity-value b { font-family:var(--font-ui); }
.mobile-venue-shell { background:var(--neutral-soft); }
.canvas-wrap { background:#e8e4de; }
.venue-theme--wedding,.venue-theme--engagement,.venue-theme--other { --venue-accent:#6d6863; --venue-soft:var(--neutral-soft); }
.hero { background:radial-gradient(ellipse at 20% 10%,#e6e1d8,transparent 60%),var(--page); }
.hero h1 { font-weight:500; }
.site-header .brand { color:var(--brand-900); font-family:var(--font-ui); }
.onboarding-app { max-width:1180px; padding:24px 24px 36px; }
.onboarding-app { padding-top:0; }
/* A compact masthead keeps the complete event picker above the fold. */
.onboarding-chrome { display:grid; grid-template-columns:220px minmax(0,1fr); align-items:center; gap:12px 28px; margin-bottom:24px; }
.onboarding-utility { grid-column:1 / -1; }
.onboarding-utility { display:flex; flex-wrap:wrap; justify-content:flex-end; align-items:center; gap:4px 16px; min-height:38px; border-bottom:1px solid var(--border); }
.onboarding-help { display:inline-flex; align-items:center; min-height:36px; color:var(--muted); font-size:13px; text-decoration:none; white-space:nowrap; }
.onboarding-help:hover { color:var(--brand-700); }
.onboarding-utility .language-picker { min-height:32px; padding:0; border:0; border-radius:0; color:var(--muted); background:transparent; box-shadow:none; }
.onboarding-utility .language-picker__icon { display:none; }
.onboarding-utility .language-picker select { min-width:110px; min-height:32px; padding:4px 20px 4px 0; font-size:13px; font-weight:400; background:transparent; }
.onboarding-header { display:flex; justify-content:flex-start; align-items:center; padding:8px 0; }
.onboarding-header .brand { justify-self:center; background:none; border:0; padding:0; cursor:pointer; }
.onboarding-header .brand__logo { width:200px; height:auto; }
.onboarding-progress { padding:0; min-width:0; container:planning-progress / inline-size; }
.onboarding-progress ol { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); max-width:660px; margin-block:0; margin-inline:auto 0; padding:5px; gap:5px; list-style:none; border:1px solid var(--border); border-radius:18px; background:rgba(255,255,255,.8); box-shadow:0 4px 16px rgba(49,44,38,.03); }
.onboarding-progress li > span:last-child { min-width:0; line-height:1.2; overflow-wrap:anywhere; }
.onboarding-progress li { position:relative; display:flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:7px 9px; border-radius:13px; color:var(--muted); font-size:14px; font-weight:500; text-align:center; }
.onboarding-progress li:not(:last-child)::after { content:none; }
.onboarding-progress li.is-complete::after { background:var(--brand-300); }
.onboarding-progress__number { flex:none; display:grid; place-items:center; width:26px; height:26px; border:1px solid var(--border); border-radius:9px; background:var(--surface); font-size:12px; font-weight:600; }
.onboarding-progress li[aria-current] { color:var(--ink); font-weight:500; }
.onboarding-progress li[aria-current] .onboarding-progress__number { color:#fff; border-color:var(--brand-700); background:var(--brand-700); }
.onboarding-progress li.is-complete .onboarding-progress__number { color:var(--brand-700); border-color:var(--brand-300); }
@media(max-width:760px) {
  .onboarding-app { padding-top:0; }
  .onboarding-chrome { grid-template-columns:1fr; gap:10px; margin-bottom:18px; }
  .onboarding-header { justify-content:center; padding:0; }
  .onboarding-header .brand__logo { width:150px; }
  .onboarding-progress ol { margin-inline:auto; }
  .onboarding-progress li { font-size:12px; }
}
@media (max-width:900px) and (max-height:500px) and (orientation:landscape) {
  .onboarding-app { padding-inline:20px; }
  .onboarding-chrome { grid-template-columns:160px minmax(0,1fr); gap:6px 18px; margin-bottom:12px; }
  .onboarding-utility { min-height:32px; }
  .onboarding-header { justify-content:flex-start; padding:0; }
  .onboarding-header .brand__logo { width:150px; }
  .onboarding-progress ol { max-width:520px; }
  .onboarding-progress li { gap:5px; font-size:12px; min-height:36px; }
  .mobile-step h1 { margin-bottom:16px; font-size:clamp(26px,3vw,34px); }
}
@media(pointer:coarse) {
  .onboarding-help,.onboarding-utility .language-picker select { min-height:44px; }
}
.mobile-header { padding:20px 24px; border:1px solid var(--glass-border); border-radius:24px; margin-bottom:32px; }
.mobile-header nav { margin-top:20px; }
.mobile-step h1 { max-width:720px; margin:0 0 28px; font-weight:500; font-size:clamp(30px,4.5vw,52px); line-height:1.1; }
.mobile-events { grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.mobile-events .mobile-choice { padding:20px; }
.mobile-events .mobile-choice img,.mobile-events .mobile-choice svg {
  display:block; width:100%; height:180px; max-height:none;
  object-fit:contain; object-position:center; margin-inline:auto;
}
.mobile-events .mobile-choice b { font-size:20px; font-weight:500; }
.onboarding-event-details { width:100%; margin:20px 0 0; padding:18px 22px; display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px; border:1px solid var(--glass-border); border-radius:18px; color:var(--ink); text-align:start; cursor:pointer; }
.onboarding-event-details b { font-size:19px; font-weight:500; }
.onboarding-event-details span { color:var(--muted); }
.onboarding-event-details em { margin-inline-start:auto; color:var(--brand-700); font-style:normal; }
.mobile-actions { position:static; border:1px solid var(--glass-border); border-radius:18px; margin-top:24px; padding:14px; justify-content:flex-end; }
.mobile-actions .button { flex:0 1 auto; min-width:150px; }
.mobile-choice.is-selected::after { color:#fff; background:var(--brand-700); opacity:1; }
.mobile-header [aria-current] i { background:var(--brand-700); }
.mobile-header nav span:not([aria-current]) i { background:var(--neutral-soft); }
.site-header nav a { color:var(--muted); }
.site-header nav a[aria-current="page"] { color:var(--brand-700); }
@media(max-width:760px) { .site-header nav a { background:var(--neutral-soft); } }
.onboarding-app .reference-modal { position:fixed; left:50%; top:50%; transform:translate(-50%,-50%); width:min(560px,calc(100% - 32px)); height:auto; max-height:calc(100svh - 32px); overflow:auto; z-index:100; padding:28px; border:1px solid var(--glass-border); border-radius:24px; }
.onboarding-app .reference-modal h2 { font-family:var(--font-ui); }
.onboarding-app .reference-modal__backdrop { position:fixed; inset:0; z-index:99; background:rgba(64,20,40,.26); }
.onboarding-app .reference-modal__grid { grid-template-columns:1fr; }
.onboarding-app .reference-modal input { font-family:var(--font-ui); background:rgba(255,255,255,.96); }
@media(min-width:761px) {
  .onboarding-step-2 .mobile-step,.onboarding-step-4 .mobile-step { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:24px; align-items:start; }
  .onboarding-step-2 .mobile-step h1,.onboarding-step-4 .mobile-step h1 { grid-column:1/-1; }
  .onboarding-step-2 .mobile-venue-shell,.onboarding-step-4 .mobile-venue-shell { width:100%; min-height:360px; margin:0; }
  .onboarding-step-2 .mobile-venue-shell .mobile-venue,.onboarding-step-4 .mobile-venue-shell .mobile-venue { min-height:360px; max-height:460px; }
  .onboarding-step-3 .mobile-step { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); gap:18px; align-items:start; }
  .onboarding-step-3 .mobile-step h1 { grid-column:1/-1; }
  .onboarding-step-3 .mobile-step > .mobile-panel { margin:0; }
  .onboarding-step-3 .mobile-step > .mobile-panel:nth-of-type(2) { grid-column:2; grid-row:2/4; }
  .onboarding-step-3 .mobile-capacity,.onboarding-step-3 .mobile-mixed { grid-column:1/-1; }
}
@media(max-width:760px) {
  .onboarding-app { padding:0 16px 28px; }
  .mobile-header { padding:16px; margin-bottom:24px; }
  .mobile-header__top,.mobile-header__tools { flex-wrap:wrap; }
  .mobile-events { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .mobile-events .mobile-choice { padding:12px; }
  .mobile-events .mobile-choice img,.mobile-events .mobile-choice svg { height:140px; }
  .mobile-events .mobile-choice b { font-size:16px; }
  .mobile-actions .button { flex:1; min-width:0; }
  .onboarding-event-details span { flex-basis:100%; order:3; }
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) { :root { --glass-fill:#fffefa; } }
@media(prefers-reduced-transparency:reduce) {
  :root { --glass-fill:#fffefa; }
  .mobile-header,.mobile-panel,.mobile-choice,.mobile-actions,.editor-header,.inspector,.floating-toolbar,
  .reference-modal,.consent-panel,.site-header,.card,.calculator,details,.panel { -webkit-backdrop-filter:none; backdrop-filter:none; }
}

/* A unified rose palette preserves furnishing and affiliation colors. */
.mobile-choice.is-selected { background:rgba(245,228,235,.65); }
.area-summary,.mobile-mixed { background:var(--rose-soft); }
.area-summary strong { color:var(--brand-700); }
.site-header nav a:hover { color:var(--brand-700); }
.hero { background:var(--page); }
/* Active, upcoming, and completed stages share one brand hue. */
.onboarding-app { --stage-color:var(--brand-700); --stage-tint:var(--rose-soft); }
.onboarding-progress li { --step-color:var(--brand-700); --step-tint:var(--rose-soft); --step-line:var(--rose); }
.onboarding-progress__number { transition:background 180ms ease,border-color 180ms ease,box-shadow 180ms ease; background:var(--step-tint); border-color:var(--step-line); color:var(--step-color); }
.onboarding-progress li[aria-current] .onboarding-progress__number { background:var(--step-color); border-color:var(--step-color); color:#fff; box-shadow:none; }
.onboarding-progress li[aria-current] { background:var(--step-tint); }
.onboarding-progress li[aria-current] { color:var(--step-color); }
.onboarding-progress li.is-complete .onboarding-progress__number { background:var(--step-tint); border-color:var(--step-line); color:var(--step-color); }
.onboarding-progress li.is-complete::after { height:2px; background:var(--step-line); }
.onboarding-app .mobile-step h1 { border-inline-start:0; padding-inline-start:0; }
.onboarding-app .mobile-panel { border-top:1px solid var(--glass-border); background:linear-gradient(140deg,var(--stage-tint),rgba(255,254,250,.50)); }
.onboarding-app .mobile-choice.is-selected { border-color:var(--stage-color); box-shadow:0 0 0 2px var(--stage-tint),var(--glass-shadow); }
.onboarding-app .mobile-choice.is-selected::after { background:var(--stage-color); }
.onboarding-step-2 .mobile-choice.is-selected,.onboarding-step-3 .mobile-choice.is-selected { background:var(--stage-tint); }
.onboarding-step-4 .mobile-summary dd { color:var(--stage-color); }
.onboarding-app .mobile-actions { background:linear-gradient(100deg,var(--stage-tint),rgba(255,254,250,.45)); border-color:var(--stage-tint); }
/* Event cards share the detail bar tint, with a slightly deeper selection. */
.mobile-events .mobile-choice { border:1px solid var(--glass-border); background:linear-gradient(110deg,var(--rose-soft),rgba(255,254,250,.5)); transition:transform 180ms ease,box-shadow 180ms ease,border-color 180ms ease; }
.mobile-events .mobile-choice.is-selected { background:#f1dce6; border-color:var(--brand-700); }
.onboarding-event-details { border-inline-start:1px solid var(--glass-border); background:linear-gradient(110deg,var(--rose-soft),rgba(255,254,250,.5)); }
@media (hover:hover) { .mobile-events .mobile-choice:hover { transform:translateY(-3px); box-shadow:0 12px 28px rgba(49,44,38,.10); } }
/* Only route changes animate; selecting a card keeps the current page steady. */
.onboarding-step-1 { height:100svh; min-height:580px; display:grid; grid-template-rows:auto minmax(0,1fr) auto; gap:16px; padding-bottom:20px; }
.onboarding-step-1 .onboarding-chrome { margin-bottom:0; }
.onboarding-step-1 .mobile-step { min-height:0; display:grid; grid-template-rows:auto minmax(0,1fr) auto; gap:14px; }
.onboarding-step-1 .mobile-step h1 { max-width:none; margin:0; font-size:clamp(28px,3.1vw,42px); }
.onboarding-step-1 .mobile-events { min-height:0; grid-template-rows:repeat(2,minmax(0,1fr)); gap:14px; }
.onboarding-step-1 .mobile-events .mobile-choice { min-height:0; padding:10px 16px; gap:4px; border-radius:20px; }
.onboarding-step-1 .mobile-events .mobile-choice img { flex:1 1 0; min-height:0; height:0; width:100%; }
.onboarding-step-1 .mobile-events .mobile-choice b { flex:none; font-size:clamp(15px,1.4vw,19px); line-height:1.25; }
.onboarding-step-1 .onboarding-event-details { min-height:44px; margin:0; padding:9px 16px; border-radius:14px; }
.onboarding-step-1 .onboarding-event-details b { font-size:16px; }
.onboarding-step-1 .onboarding-event-details span { font-size:14px; }
.onboarding-step-1 .mobile-actions { margin:0; padding:8px; border-radius:16px; }
.onboarding-step-1 .mobile-actions .button { min-height:44px; padding:10px 24px; }
@media (max-width:760px) and (orientation:portrait) {
  .onboarding-step-1 { min-height:660px; gap:12px; }
  .onboarding-step-1 .mobile-events { grid-template-rows:repeat(3,minmax(0,1fr)); gap:10px; }
  .onboarding-step-1 .mobile-step { gap:12px; }
  .onboarding-step-1 .mobile-step h1 { font-size:28px; }
  .onboarding-step-1 .onboarding-event-details { gap:4px 8px; }
  .onboarding-step-1 .onboarding-event-details b { font-size:14px; }
  .onboarding-step-1 .onboarding-event-details span { font-size:12px; }
}
@media (max-height:500px) and (orientation:landscape) {
  .onboarding-step-1 .onboarding-utility { min-height:28px; }
  .onboarding-step-1 .onboarding-help,.onboarding-step-1 .onboarding-utility .language-picker select { min-height:28px; }
  .onboarding-step-1 .onboarding-header .brand__logo { width:120px; }
  .onboarding-step-1 { min-height:360px; gap:8px; padding-bottom:10px; }
  .onboarding-step-1 .mobile-step { gap:8px; }
  .onboarding-step-1 .mobile-step h1 { font-size:25px; }
  .onboarding-step-1 .mobile-events { gap:8px; }
  .onboarding-step-1 .mobile-events .mobile-choice { padding:5px 10px; border-radius:14px; }
  .onboarding-step-1 .mobile-events .mobile-choice b { font-size:13px; }
  .onboarding-step-1 .onboarding-event-details { min-height:36px; padding:6px 12px; }
  .onboarding-step-1 .onboarding-event-details b,.onboarding-step-1 .onboarding-event-details span { font-size:12px; }
  .onboarding-step-1 .mobile-actions { padding:4px; }
  .onboarding-step-1 .mobile-actions .button { min-height:36px; padding:6px 18px; font-size:14px; }
}
/* Browser-supported transitions also connect the guide and help pages. */
@view-transition { navigation:auto; }
@keyframes site-slide-out { to { opacity:0; transform:translateX(-36px); } }
@keyframes site-slide-in { from { opacity:0; transform:translateX(36px); } }
::view-transition-old(root) { animation:260ms cubic-bezier(.22,1,.36,1) both site-slide-out; }
::view-transition-new(root) { animation:300ms cubic-bezier(.22,1,.36,1) both site-slide-in; }
@media (prefers-reduced-motion:reduce) {
  ::view-transition-old(root),::view-transition-new(root) { animation:none; }
}
@media (prefers-reduced-motion:reduce) { .onboarding-progress__number,.mobile-events .mobile-choice { transition:none; } .mobile-events .mobile-choice:hover { transform:none; } }
@media (prefers-reduced-transparency:reduce) { .onboarding-app .mobile-panel,.onboarding-app .mobile-actions { background:var(--stage-tint); } .mobile-events .mobile-choice { background:var(--surface); } }

/* Illustrated planning journey: semantic labels stay separate from artwork. */
.onboarding-progress ol { max-width:760px; padding:6px; gap:8px; border-color:#eed8e1; border-radius:28px; background:linear-gradient(125deg,#fff,rgba(255,250,252,.92)); box-shadow:0 8px 26px rgba(165,0,100,.045); }
.onboarding-progress li { gap:10px; min-height:76px; padding:9px 10px; border-radius:23px; isolation:isolate; font-weight:500; }
.onboarding-progress li[aria-current] { background:linear-gradient(125deg,#f7e0eb,#fff1f5); color:var(--brand-700); }
.onboarding-progress__visual { position:relative; flex:0 0 56px; width:56px; height:56px; }
.onboarding-progress__visual img { display:block; width:100%; height:100%; object-fit:contain; opacity:.78; transition:opacity 180ms ease,transform 240ms cubic-bezier(.22,1,.36,1); }
.onboarding-progress li[aria-current] .onboarding-progress__visual img { opacity:1; transform:rotate(-4deg); }
.onboarding-progress li.is-complete .onboarding-progress__visual img { opacity:1; }
.onboarding-progress .onboarding-progress__number { position:absolute; inset-block-start:-3px; inset-inline-start:-3px; width:22px; height:22px; border-radius:50%; font-size:12px; border:1px solid #f2c5d8; background:#fff0f6; color:var(--brand-700); box-shadow:0 2px 5px rgba(165,0,100,.10); }
.onboarding-progress li[aria-current] .onboarding-progress__number { color:#fff; background:var(--brand-700); border-color:var(--brand-700); }
.onboarding-progress li.is-complete .onboarding-progress__number { color:var(--brand-700); background:#f7e4ed; border-color:#e381a5; }
.onboarding-progress__label { position:relative; z-index:1; flex:1 1 auto; min-width:0; max-width:100%; text-align:start; white-space:normal; word-break:normal; overflow-wrap:anywhere; overflow:visible; text-overflow:clip; line-height:1.35; }
.onboarding-progress li:not(:last-child)::after { content:""; position:absolute; inset-inline-end:-13px; top:50%; width:18px; height:12px; background:transparent; border-top:2px dotted #e9afc7; border-radius:50%; z-index:-1; }
.onboarding-progress li[aria-current]::before { content:"✦"; position:absolute; inset-inline-start:60px; top:5px; color:var(--brand-700); font-size:12px; }
@media(max-width:760px) {
  .onboarding-progress ol { gap:5px; border-radius:23px; }
  .onboarding-progress li { flex-direction:column; gap:4px; padding:7px 4px; min-height:88px; border-radius:18px; font-size:12px; }
  .onboarding-progress__visual { flex-basis:44px; width:44px; height:44px; }
  .onboarding-progress__label { text-align:center; }
  .onboarding-progress .onboarding-progress__number { width:19px; height:19px; font-size:10px; }
  .onboarding-progress li[aria-current]::before { inset-inline-start:auto; inset-inline-end:8px; top:5px; font-size:10px; }
  .onboarding-progress li:not(:last-child)::after { inset-inline-end:-9px; top:32px; width:12px; }
}
@media(max-width:900px) and (max-height:500px) and (orientation:landscape) {
  .onboarding-progress li { flex-direction:row; min-height:42px; padding:5px; gap:5px; font-size:11px; }
  .onboarding-progress__visual { flex-basis:30px; width:30px; height:30px; }
  .onboarding-progress .onboarding-progress__number { width:16px; height:16px; font-size:9px; }
  .onboarding-progress li::before,.onboarding-progress li:not(:last-child)::after { content:none; }
}
@media(prefers-reduced-motion:reduce) { .onboarding-progress__visual img { transition:none; transform:none!important; } }

/* Adapt to the actual navigation width, not just the page breakpoint. */
@container planning-progress (max-width:620px) {
  .onboarding-progress li { flex-direction:column; gap:5px; padding:7px 4px; font-size:12px; min-height:80px; }
  .onboarding-progress__visual { flex-basis:40px; width:40px; height:40px; }
  .onboarding-progress__label { flex:none; width:100%; text-align:center; }
  .onboarding-progress li:not(:last-child)::after { top:30px; inset-inline-end:-9px; width:12px; }
  .onboarding-progress li[aria-current]::before { inset-inline-start:auto; inset-inline-end:7px; top:5px; font-size:10px; }
}
@media(max-width:900px) and (max-height:500px) and (orientation:landscape) {
  @container planning-progress (max-width:480px) {
    .onboarding-progress li { flex-direction:column; min-height:52px; gap:2px; padding:4px 2px; font-size:11px; }
    .onboarding-progress__visual { flex-basis:26px; width:26px; height:26px; }
  }
}