/* Exotic Wraps — component styles. Every value reads a token from tokens.css. */
.xw-root, body { font-family: var(--font-sans); background: var(--bg); color: var(--ink); -webkit-font-smoothing: antialiased; }
body { margin: 0; }
.xw-icon { flex: none; display: inline-block; vertical-align: middle; }
:where(.xw-btn, .xw-iconbtn, .xw-tab, .xw-seg-item, .xw-chip, .xw-swatch, .xw-cal-day, .xw-acc-q, .xw-upload, .xw-switch, .xw-look, .xw-finish, .xw-ba-handle, .xw-nav-link, .xw-input):focus-visible {
  outline: var(--border-focus) solid var(--violet-text); outline-offset: 2px;
}

/* Brand ------------------------------------------------------------ */
.xw-logo { display: inline-flex; flex-direction: column; gap: var(--space-2); }
.xw-logo img { display: block; width: auto; }
.xw-logo-text { font-family: var(--font-display); font-weight: 900; font-style: italic; letter-spacing: -0.02em; color: var(--ink); line-height: 1; }
.xw-logo-text b { color: var(--violet); font-weight: 900; }
.xw-logo-tag { font-size: 11px; letter-spacing: 0.42em; color: var(--ink-soft); text-transform: uppercase; }
.xw-slash { display: block; width: 2px; height: 22px; background: var(--violet); transform: rotate(var(--slash-angle)); transform-origin: center; margin: var(--space-3) 0 0 var(--space-2); border-radius: 1px; }
.xw-eyebrow { margin: 0; font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase; }
.xw-eyebrow-violet { color: var(--violet-text); }
.xw-eyebrow-ink { color: var(--ink); }
.xw-eyebrow-muted { color: var(--ink-soft); }
.xw-eyebrow-rule { display: flex; align-items: center; gap: var(--space-4); }
.xw-eyebrow-rule::before { content: ""; width: 40px; height: 1px; background: currentColor; }
.xw-sidenote { display: flex; flex-direction: column; font-size: 12px; line-height: 19px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ink-soft); }
.xw-sidenote-right { align-items: flex-start; }
.xw-sidenote-tilt { transform: rotate(-8deg); transform-origin: left bottom; }
.xw-stephead-row { display: flex; align-items: center; gap: var(--space-4); }
.xw-stephead-num { font-family: var(--font-display); font-weight: 800; font-size: 30px; line-height: 1; color: var(--violet-text); }
.xw-stephead-rule { width: 64px; height: 1px; background: var(--violet-text); }
.xw-stephead-kicker { font-size: 11px; font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase; color: var(--ink-soft); }
.xw-stephead-title { margin: var(--space-2) 0 0; font-family: var(--font-display); font-weight: 700; font-size: 30px; line-height: 36px; letter-spacing: -0.01em; color: var(--ink); }
.xw-stephead-body { margin: var(--space-2) 0 0; max-width: 34ch; font-size: 15px; line-height: 23px; color: var(--ink-soft); }

.xw-hero { position: relative; color: var(--ink); display: flex; justify-content: space-between; gap: var(--space-8); padding: var(--space-12); background: var(--bg) var(--xw-hero-img, none) right center / cover no-repeat; overflow: hidden; }
.xw-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--bg) 0%, var(--bg) 35%, rgba(4, 4, 4, 0) 75%); pointer-events: none; }
[data-theme="day"] .xw-hero::before, .xw-hero[data-theme="day"]::before { background: linear-gradient(90deg, var(--bg) 0%, var(--bg) 40%, rgba(248, 248, 248, 0) 80%); }
.xw-hero-inner, .xw-hero-note { position: relative; }
.xw-hero-center { text-align: center; justify-content: center; }
.xw-hero-title { margin: var(--space-4) 0 var(--space-3); font-family: var(--font-display); font-weight: 800; font-size: 52px; line-height: 0.96; letter-spacing: -0.01em; text-transform: uppercase; color: var(--ink); }
.xw-hero-title span { display: block; }
.xw-hero-sub { margin: 0; font-size: 18px; line-height: 26px; color: var(--ink-soft); }
.xw-hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }

/* Actions ---------------------------------------------------------- */
.xw-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3); font: 600 15px/20px var(--font-sans); border-radius: var(--radius-sm); border: var(--border-hairline) solid transparent; cursor: pointer; text-decoration: none; transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s; white-space: nowrap; }
.xw-btn-sm { height: 36px; padding: 0 var(--space-4); }
.xw-btn-md { height: 44px; padding: 0 var(--space-6); }
.xw-btn-lg { height: 52px; padding: 0 var(--space-8); font-size: 17px; }
.xw-btn-full { width: 100%; }
.xw-btn-primary { background: var(--violet); color: var(--on-violet); box-shadow: var(--shadow-glow); }
.xw-btn-primary:hover { background: var(--violet-press); }
.xw-btn-outline { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.xw-btn-outline:hover { border-color: var(--violet-text); background: var(--violet-soft); }
.xw-btn-ghost { background: transparent; color: var(--ink); padding-left: var(--space-3); padding-right: var(--space-3); }
.xw-btn-ghost:hover { color: var(--violet-text); }
.xw-btn-link { background: transparent; color: var(--violet-text); padding: 0; height: auto; letter-spacing: 0.2em; text-transform: uppercase; font-size: 13px; }
.xw-btn-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.xw-btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.xw-iconbtn { display: inline-grid; place-items: center; padding: 0; border-radius: var(--radius-full); border: var(--border-hairline) solid transparent; background: transparent; color: var(--ink); cursor: pointer; }
.xw-iconbtn-ghost:hover { background: var(--violet-soft); color: var(--violet-text); }
.xw-iconbtn-outline { border-color: var(--line-strong); }
.xw-iconbtn-outline:hover { border-color: var(--violet-text); }
.xw-iconbtn-solid { background: var(--ink); color: var(--bg); }

/* Navigation ------------------------------------------------------- */
.xw-nav { display: flex; align-items: center; gap: var(--space-8); height: 64px; padding: 0 var(--space-12); background: var(--bg); border-bottom: var(--border-hairline) solid var(--line); }
.xw-nav-brand { display: inline-flex; }
.xw-nav-links { display: flex; gap: var(--space-6); flex: 1; justify-content: center; }
.xw-nav-link { position: relative; white-space: nowrap; font-size: 14px; line-height: 20px; color: var(--ink); text-decoration: none; padding: var(--space-2) 0; }
.xw-nav-link:hover { color: var(--violet-text); }
.xw-nav-link.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--violet); }
.xw-nav-end { display: flex; align-items: center; gap: var(--space-4); }
@media (max-width: 720px) { .xw-nav { padding: 0 var(--space-4); gap: var(--space-4); } .xw-nav-links { display: none; } .xw-nav-end { margin-left: auto; } }
.xw-crumbs { display: flex; align-items: center; gap: var(--space-2); font-size: 13px; line-height: 19px; letter-spacing: 0.04em; }
.xw-crumbs a { color: var(--ink-soft); text-decoration: none; }
.xw-crumbs a:hover { color: var(--ink); }
.xw-crumbs-sep { color: var(--ink-muted); }
.xw-crumbs-current { color: var(--violet-text); }
.xw-tabs { display: flex; gap: var(--space-8); }
.xw-tab { position: relative; background: none; border: 0; padding: var(--space-2) 0; font: 500 15px/20px var(--font-sans); color: var(--ink-soft); cursor: pointer; }
.xw-tab:hover { color: var(--ink); }
.xw-tab.is-active { color: var(--ink); }
.xw-tab.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; background: var(--violet); }
.xw-stepper { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; gap: var(--space-4); }
.xw-step { display: flex; align-items: center; gap: var(--space-4); flex: 1; }
.xw-step:last-child { flex: none; }
.xw-step-dot { display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--radius-full); border: var(--border-hairline) solid var(--line-strong); font: 500 15px/1 var(--font-sans); color: var(--ink); flex: none; }
.xw-step-label { font-size: 14px; color: var(--ink-soft); white-space: nowrap; }
.xw-step-line { flex: 1; height: 1px; background: var(--line-strong); min-width: 24px; }
.xw-step.is-done .xw-step-line { height: 2px; background: var(--violet); }
.xw-step.is-current .xw-step-dot { background: var(--violet); border-color: var(--violet); color: var(--on-violet); }
.xw-step.is-current .xw-step-label { color: var(--ink); font-weight: 600; }
.xw-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); flex-wrap: wrap; padding: var(--space-8) var(--space-12); background: var(--bg); border-top: var(--border-hairline) solid var(--line); }
.xw-footer-tag { margin: var(--space-3) 0 0; font-size: 11px; letter-spacing: 0.42em; color: var(--ink-soft); }
.xw-footer-end { display: flex; align-items: center; gap: var(--space-6); }
.xw-footer-mail { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--ink); text-decoration: none; font-size: 14px; }
.xw-footer-mail:hover { color: var(--violet-text); }
.xw-footer-social { display: flex; gap: var(--space-4); padding-left: var(--space-6); border-left: var(--border-hairline) solid var(--line-strong); }
.xw-footer-social a { color: var(--ink); }
.xw-footer-social a:hover { color: var(--violet-text); }

/* Forms ------------------------------------------------------------ */
.xw-field { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.xw-label { font: 600 14px/20px var(--font-sans); color: var(--ink); padding: 0; }
.xw-label-opt { font-weight: 400; color: var(--ink-muted); }
.xw-input { width: 100%; box-sizing: border-box; min-height: 44px; padding: 10px var(--space-4); font: 400 15px/22px var(--font-sans); color: var(--ink); background: var(--field); border: var(--border-hairline) solid var(--line-strong); border-radius: var(--radius-sm); }
textarea.xw-input { resize: vertical; min-height: 88px; }
.xw-input::placeholder { color: var(--ink-muted); }
.xw-input:hover { border-color: var(--ink-muted); }
.xw-input:focus { outline: none; border-color: var(--violet-text); box-shadow: 0 0 0 1px var(--violet-text); }
.xw-field.is-error .xw-input { border-color: var(--violet-text); }
.xw-hint { margin: 0; font-size: 13px; line-height: 19px; color: var(--ink-muted); }
.xw-hint-error { color: var(--violet-text); font-weight: 600; }
.xw-select { position: relative; display: flex; align-items: center; }
.xw-select select { appearance: none; padding-right: 44px; cursor: pointer; }
.xw-select.has-swatch select { padding-left: 48px; }
.xw-select-swatch { position: absolute; left: var(--space-4); width: 22px; height: 22px; border-radius: var(--radius-full); pointer-events: none; }
.xw-select-chev { position: absolute; right: var(--space-4); color: var(--ink-soft); pointer-events: none; }
.xw-radios { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.xw-radios-row { display: flex; gap: var(--space-8); }
.xw-radio, .xw-choice { position: relative; display: inline-flex; align-items: center; gap: var(--space-3); cursor: pointer; font-size: 15px; color: var(--ink); }
.xw-radio input, .xw-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.xw-radio-dot { width: 22px; height: 22px; border-radius: var(--radius-full); border: var(--border-hairline) solid var(--line-strong); display: grid; place-items: center; flex: none; box-sizing: border-box; }
input:checked + .xw-radio-dot { border: 2px solid var(--violet); }
input:checked + .xw-radio-dot::after { content: ""; width: 10px; height: 10px; border-radius: var(--radius-full); background: var(--violet); }
input:focus-visible + .xw-radio-dot { outline: var(--border-focus) solid var(--violet-text); outline-offset: 2px; }
.xw-choice { align-items: flex-start; padding: var(--space-4) var(--space-6); border: var(--border-hairline) solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface-raised); gap: var(--space-4); }
.xw-choice .xw-radio-dot { margin-top: 2px; }
.xw-choice.is-selected { border-color: var(--violet); background: var(--violet-soft); }
.xw-choice-icon { color: var(--ink); }
.xw-choice-text { display: flex; flex-direction: column; gap: var(--space-1); }
.xw-choice-title { font: 600 15px/20px var(--font-sans); color: var(--ink); }
.xw-choice-desc { font-size: 13px; line-height: 19px; color: var(--ink-soft); }
.xw-toggle { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); font-size: 15px; color: var(--ink); }
.xw-switch { width: 44px; height: 24px; padding: 2px; border-radius: var(--radius-full); border: var(--border-hairline) solid var(--line-strong); background: var(--field); cursor: pointer; display: flex; align-items: center; transition: background-color .15s; }
.xw-switch-knob { width: 18px; height: 18px; border-radius: var(--radius-full); background: var(--ink-muted); transition: transform .15s, background-color .15s; }
.xw-switch.is-on { background: var(--violet); border-color: var(--violet); }
.xw-switch.is-on .xw-switch-knob { transform: translateX(20px); background: var(--on-violet); }
.xw-seg { display: inline-flex; gap: var(--space-2); }
.xw-seg-item { min-width: 64px; height: 36px; padding: 0 var(--space-4); font: 500 13px/1 var(--font-sans); color: var(--ink); background: transparent; border: var(--border-hairline) solid var(--line-strong); border-radius: var(--radius-sm); cursor: pointer; }
.xw-seg-item:hover { border-color: var(--ink-muted); }
.xw-seg-item.is-active { border-color: var(--violet); background: var(--violet-soft); color: var(--ink); }
.xw-chips { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.xw-chip { height: 40px; padding: 0 var(--space-6); font: 500 14px/1 var(--font-sans); color: var(--ink); background: transparent; border: var(--border-hairline) solid var(--line-strong); border-radius: var(--radius-sm); cursor: pointer; }
.xw-chip:hover { border-color: var(--ink-muted); }
.xw-chip.is-active { background: var(--violet); border-color: var(--violet); color: var(--on-violet); }
.xw-chips-slots { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
.xw-chips-slots .xw-chip { height: 44px; }
.xw-swatches-grid { display: grid; grid-template-columns: repeat(4, max-content); gap: var(--space-3) var(--space-4); }
.xw-swatch { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); padding: 0; background: none; border: 0; cursor: pointer; color: var(--ink-soft); }
.xw-swatch-ball { display: block; border-radius: var(--radius-full); box-sizing: border-box; border: 2px solid var(--bg); box-shadow: 0 0 0 1px var(--line-strong);
  background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.75) 0, rgba(255, 255, 255, 0) 28%), radial-gradient(circle at 50% 120%, rgba(0, 0, 0, 0.55) 10%, rgba(0, 0, 0, 0) 60%), var(--sw); }
.xw-swatch.is-active .xw-swatch-ball { box-shadow: 0 0 0 2px var(--violet), var(--shadow-glow); }
.xw-swatch-name { font-size: 11px; line-height: 14px; max-width: 56px; text-align: center; }
.xw-swatch.is-active .xw-swatch-name { color: var(--ink); }
.xw-swatches-current { margin: var(--space-3) 0 0; font-size: 13px; color: var(--ink-soft); }
.xw-upload { display: flex; align-items: center; justify-content: center; gap: var(--space-4); min-height: 120px; padding: var(--space-6); box-sizing: border-box; border: var(--border-hairline) dashed var(--line-strong); border-radius: var(--radius-md); color: var(--ink); cursor: pointer; text-align: left; background: transparent; }
.xw-upload:hover, .xw-upload.is-over { border-color: var(--violet-text); background: var(--violet-soft); }
.xw-upload-compact { min-height: 64px; padding: var(--space-4); }
.xw-upload-text { display: flex; flex-direction: column; gap: 2px; }
.xw-upload-title { font: 600 15px/20px var(--font-sans); }
.xw-upload-hint { font-size: 12px; line-height: 16px; color: var(--ink-muted); }
.xw-cal { background: var(--surface-raised); border: var(--border-hairline) solid var(--line); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-4) var(--space-3); color: var(--ink); }
.xw-cal-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-3); }
.xw-cal-title { font: 600 15px/20px var(--font-sans); white-space: nowrap; }
.xw-cal-nav { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; }
.xw-cal-month { font-size: 14px; min-width: 104px; text-align: center; }
.xw-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.xw-cal-dow { font-size: 11px; color: var(--ink-muted); text-align: center; padding: var(--space-1) 0 var(--space-2); }
.xw-cal-day { height: 34px; border: 0; border-radius: var(--radius-xs); background: transparent; color: var(--ink); font: 400 14px/1 var(--font-sans); cursor: pointer; }
.xw-cal-day:hover:not(:disabled) { background: var(--violet-soft); }
.xw-cal-day.is-out, .xw-cal-day:disabled { color: var(--ink-muted); cursor: default; }
.xw-cal-day.is-active { background: var(--violet); color: var(--on-violet); font-weight: 600; }

/* Content ---------------------------------------------------------- */
.xw-card { background: var(--surface-raised); border: var(--border-hairline) solid var(--line); border-radius: var(--radius-lg); color: var(--ink); }
.xw-card-pad { padding: var(--space-6); }
.xw-card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-4); }
.xw-card-title { margin: 0; font: 700 22px/28px var(--font-display); letter-spacing: -0.005em; }
.xw-summary { margin: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.xw-summary-row { display: flex; align-items: flex-start; gap: var(--space-4); }
.xw-summary-icon { color: var(--ink-soft); margin-top: 1px; }
.xw-summary-swatch { width: 20px; height: 20px; border-radius: var(--radius-full); flex: none; margin-top: 1px; }
.xw-summary dt { font-size: 13px; line-height: 19px; color: var(--ink-soft); }
.xw-summary dd { margin: 0; font-size: 16px; line-height: 23px; color: var(--ink); }
.xw-summary-inline .xw-summary-row { padding-bottom: var(--space-3); }
.xw-summary-inline .xw-summary-text { display: grid; grid-template-columns: 9.5em 1fr; gap: var(--space-4); width: 100%; }
.xw-summary-inline dt, .xw-summary-inline dd { font-size: 14px; line-height: 20px; }
.xw-acc { display: flex; flex-direction: column; gap: var(--space-2); }
.xw-acc-item { background: var(--surface-raised); border: var(--border-hairline) solid var(--line); border-radius: var(--radius-sm); }
.xw-acc-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) var(--space-4); background: none; border: 0; color: var(--ink); font: 500 15px/22px var(--font-sans); text-align: left; cursor: pointer; border-radius: var(--radius-sm); }
.xw-acc-item.is-open .xw-acc-q { border-bottom: var(--border-hairline) solid var(--line); border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.xw-acc-a { padding: var(--space-3) var(--space-4) var(--space-4); font-size: 14px; line-height: 21px; color: var(--ink-soft); }
.xw-look, .xw-finish, .xw-panel { position: relative; display: block; overflow: hidden; border-radius: var(--radius-sm); border: var(--border-hairline) solid var(--line); background: var(--surface); color: #ffffff; text-decoration: none; margin: 0; }
.xw-look img, .xw-finish img, .xw-panel img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.xw-look:hover img, .xw-finish:hover img { transform: scale(1.03); }
.xw-look-cap, .xw-finish-cap, .xw-panel figcaption { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); padding: var(--space-8) var(--space-6) var(--space-4); background: linear-gradient(0deg, var(--scrim) 0%, var(--scrim) 40%, rgba(4, 4, 4, 0) 100%); }
.xw-look-cap { font-size: 15px; color: #ffffff; }
.xw-look-sep { color: #c9cbd1; }
.xw-look-cta { flex: none; display: inline-flex; align-items: center; gap: var(--space-2); font-size: 13px; white-space: nowrap; }
.xw-finish { height: 270px; }
.xw-finish-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.xw-finish-name b { font: 600 17px/22px var(--font-sans); }
.xw-finish-name small { font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: #c9cbd1; }
.xw-finish-cta { flex: none; display: inline-flex; align-items: center; gap: var(--space-3); font-size: 13px; white-space: nowrap; }
.xw-finish-circle { width: 30px; height: 30px; display: grid; place-items: center; border-radius: var(--radius-full); border: var(--border-hairline) solid rgba(255, 255, 255, 0.7); }
.xw-panel { height: 300px; }
.xw-panel figcaption { justify-content: flex-start; align-items: flex-end; gap: var(--space-3); }
.xw-panel figcaption .xw-slash { margin: 0 0 4px; height: 20px; }
.xw-panel figcaption > span:last-child { display: flex; flex-direction: column; font-size: 15px; line-height: 22px; }
.xw-panel figcaption b { font: 600 16px/22px var(--font-sans); }
.xw-ba { position: relative; overflow: hidden; border-radius: var(--radius-md); user-select: none; touch-action: none; cursor: ew-resize; background: var(--surface); }
.xw-ba-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.xw-ba-before { position: absolute; inset: 0; }
.xw-ba-line { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: #ffffff; }
.xw-ba-handle { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 36px; height: 36px; border-radius: var(--radius-full); border: 0; background: #ffffff; color: #0a0a0c; display: flex; align-items: center; justify-content: center; gap: 0; cursor: ew-resize; padding: 0; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4); }
.xw-ba-tag { position: absolute; top: var(--space-4); padding: var(--space-1) var(--space-2); font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; background: rgba(4, 4, 4, 0.72); color: #ffffff; border-radius: var(--radius-xs); }
.xw-ba-tag-l { left: var(--space-4); }
.xw-ba-tag-r { right: var(--space-4); }
.xw-contacts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.xw-contacts li { display: flex; align-items: center; gap: var(--space-4); font-size: 15px; color: var(--ink); }
.xw-contacts .xw-icon { color: var(--ink); }
.xw-contacts a { color: inherit; text-decoration: none; }
.xw-contacts a:hover { color: var(--violet-text); }
.xw-process { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.xw-process-step { display: flex; gap: var(--space-4); padding: 0 var(--space-6); border-left: var(--border-hairline) solid var(--line); }
.xw-process-step:first-child { border-left: 0; padding-left: 0; }
.xw-process-dot { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--radius-full); border: var(--border-hairline) solid var(--violet-text); color: var(--violet-text); font: 500 16px/1 var(--font-sans); }
.xw-process-step.is-current .xw-process-dot { background: var(--violet); border-color: var(--violet); color: var(--on-violet); }
.xw-process h4 { margin: 8px 0 var(--space-3); font: 600 16px/22px var(--font-sans); color: var(--ink); }
.xw-process p { margin: 0; font-size: 13px; line-height: 20px; color: var(--ink-soft); }
.xw-tips-title { margin: 0 0 var(--space-4); font: 600 15px/20px var(--font-sans); color: var(--ink); }
.xw-tips ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.xw-tips li { display: flex; align-items: flex-start; gap: var(--space-3); font-size: 14px; line-height: 20px; color: var(--ink-soft); }
.xw-tips li > span:last-child { display: flex; flex-direction: column; gap: 2px; }
.xw-tips b { font: 600 15px/20px var(--font-sans); color: var(--ink); }
.xw-tips-icon { color: var(--ink); }


/* Motion ----------------------------------------------------------- */
.xw-vband { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-8); padding: var(--space-12); overflow: hidden; background: var(--bg); color: var(--ink); box-sizing: border-box; }
.xw-vband-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.xw-vband-scrim { position: absolute; inset: 0; background: linear-gradient(90deg, var(--scrim) 0%, rgba(4, 4, 4, 0.45) 45%, rgba(4, 4, 4, 0) 75%), linear-gradient(0deg, var(--scrim) 0%, rgba(4, 4, 4, 0) 45%); }
.xw-vband-center { justify-content: center; text-align: center; }
.xw-vband-center .xw-vband-scrim { background: radial-gradient(ellipse at center, var(--scrim) 0%, rgba(4, 4, 4, 0.3) 70%); }
.xw-vband-inner, .xw-vband-note { position: relative; }
.xw-vband-note { align-self: flex-start; }
.xw-vband-title { margin: var(--space-3) 0; font-family: var(--font-display); font-weight: 800; font-size: 52px; line-height: 0.96; letter-spacing: -0.01em; text-transform: uppercase; }
.xw-vband-title span { display: block; }
.xw-vband-sub { margin: 0; font-size: 18px; line-height: 26px; color: var(--ink-soft); max-width: 42ch; }
.xw-vband-toggle { position: absolute; right: var(--space-6); bottom: var(--space-6); background: rgba(4, 4, 4, 0.6); }
.xw-vcard { position: relative; margin: 0; overflow: hidden; border-radius: var(--radius-sm); border: var(--border-hairline) solid var(--line); background: var(--surface); cursor: pointer; }
.xw-vcard video { display: block; width: 100%; height: 100%; object-fit: cover; }
.xw-vcard figcaption { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: flex-end; gap: var(--space-3); padding: var(--space-8) var(--space-6) var(--space-4); background: linear-gradient(0deg, var(--scrim) 0%, rgba(4, 4, 4, 0) 100%); color: #ffffff; }
.xw-vcard figcaption .xw-slash { margin: 0 0 4px; height: 20px; }
.xw-vcard figcaption > span:last-child { display: flex; flex-direction: column; font-size: 14px; line-height: 20px; }
.xw-vcard figcaption b { font: 600 16px/22px var(--font-sans); }
.xw-vcard:focus-visible { outline: var(--border-focus) solid var(--violet-text); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .xw-btn, .xw-look img, .xw-finish img, .xw-switch, .xw-switch-knob { transition: none !important; } }