/* =============================================================================
   Set-up wizard (21 Oct 2026)

   The night sky of the sign-in screen across the whole window, and one AM
   Navy card on it. The card keeps the Agent Meeko look whatever theme is
   picked (the theme is for the system behind it); the sky's glows follow the
   theme, so picking one is seen at once. 4px corners on every control.
   ============================================================================= */

.onboarding {
    --ob-navy: #19213b;
    --ob-navy-deep: #10162a;
    --ob-navy-line: #26315a;
    --ob-navy-raised: #26315a;
    --ob-text: #f3f5f8;
    --ob-muted: rgba(243, 245, 248, 0.68);
    --ob-faint: rgba(243, 245, 248, 0.5);
    --ob-glow-1: var(--signin-glow-1, #15f3ff);
    --ob-glow-2: var(--signin-glow-2, #9169ff);
    --ob-glow-3: var(--signin-glow-3, #cf24ff);
    --ob-radius: 4px;

    position: fixed;
    inset: 0;
    z-index: 900;
    display: grid;
    place-items: center;
    padding: 72px 24px 32px;
    overflow-y: auto;
    color: var(--ob-text);
    font-family: Inter, system-ui, sans-serif;
    background: var(--signin-stage-bg, #000000);
}

html.onboarding-open,
html.onboarding-open body { overflow: hidden; }

/* The black a sign-up lands on before anything has loaded (boot-night.js). */
html.am-boot-night,
html.am-boot-night body { background: #000000; }

.onboarding__sky {
    position: fixed;
    inset: 0;
    pointer-events: none;
}

.onboarding__lockup {
    position: fixed;
    top: 24px;
    left: 28px;
    width: 92px;
    height: auto;
    z-index: 1;
}

.onboarding__signout {
    position: fixed;
    top: 26px;
    right: 28px;
    z-index: 1;
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: var(--ob-radius);
    background: transparent;
    color: var(--ob-muted);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

.onboarding__signout:hover { color: var(--ob-text); border-color: rgba(255, 255, 255, 0.32); }

/* ---- Boot: "Setting up your system" ---------------------------------------- */

.onboarding__boot {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    z-index: 1;
    animation: onboarding-in 1000ms ease backwards;
    transition: opacity 1000ms ease;
}

.onboarding__boot-mark { width: 150px; height: auto; }

.onboarding__boot-line {
    margin: 0;
    font-size: 14px;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.76);
}

.onboarding--booted .onboarding__boot,
.onboarding--ready .onboarding__boot {
    opacity: 0;
    pointer-events: none;
}

/* ---- The card ------------------------------------------------------------- */

.onboarding__card {
    position: relative;
    z-index: 2;
    width: min(1000px, 100%);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 26px;
    padding: 32px 40px;
    background: var(--ob-navy);
    border: 1px solid var(--ob-navy-line);
    border-radius: 8px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}

.onboarding__card[data-step="welcome"],
.onboarding__card[data-step="privacy"],
.onboarding__card[data-step="ready"],
.onboarding__card[data-step="business"] { width: min(820px, 100%); }

.onboarding__card[data-step="welcome"],
.onboarding__card[data-step="ready"] { width: min(680px, 100%); text-align: center; }

/* Nothing of the card shows until it is called for (display: flex above
   would otherwise win over the hidden attribute). */
.onboarding__card[hidden],
.onboarding__installs[hidden] { display: none; }

.onboarding__card:not([hidden]) { animation: onboarding-in 1000ms cubic-bezier(0.2, 0.7, 0.2, 1) backwards; }

/* A step changing: its contents fade out, then the next fade in. The card
   itself stays put, so nothing jumps. */
.onboarding__card--enter > .onboarding__top,
.onboarding__card--enter .onboarding__main {
    animation: onboarding-in 700ms cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

.onboarding__card--leave .onboarding__main {
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 420ms ease, transform 420ms ease;
}

/* Before the system opens fresh: the sky fades to black under the line. */
.onboarding__sky { transition: opacity 1000ms ease; }
.onboarding--dusk .onboarding__sky { opacity: 0; }
.onboarding { transition: opacity 1000ms ease; }
.onboarding--gone { opacity: 0; }

/* ---- Welcome: room between the words and the choices; the voice picker -- */

.onboarding__choices--spaced { margin-top: 12px; }

.onboarding__voice {
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: left;
    animation: onboarding-in 500ms ease backwards;
}

.onboarding__voice[hidden] { display: none; }
.onboarding__voice label { font-size: 13px; font-weight: 600; }
.onboarding__voice-row { display: flex; gap: 8px; }
.onboarding__select { cursor: pointer; }
.onboarding__select option { background: var(--ob-navy); color: var(--ob-text); }

/* ---- Modules: what the business was taken to be ------------------------- */

.onboarding__kinds { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.onboarding__kinds-label { font-size: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--ob-muted); margin-right: 4px; }

.onboarding__kind {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid #3a4673;
    border-radius: var(--ob-radius);
    background: transparent;
    color: var(--ob-muted);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
    transition: border-color 280ms ease, background 280ms ease, color 280ms ease;
}

.onboarding__kind:hover { color: var(--ob-text); border-color: rgba(255, 255, 255, 0.4); }
.onboarding__kind.is-on { background: #ffffff; color: var(--ob-navy); border-color: #ffffff; font-weight: 600; }
.onboarding__kind:focus-visible { outline: 2px solid var(--ob-glow-1); outline-offset: 2px; }

/* The modules Meeko switched on stand out. */
.onboarding__module.is-on {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 0 22px color-mix(in srgb, var(--ob-glow-2) 22%, transparent);
}

.onboarding--leaving .onboarding__card,
.onboarding--leaving .onboarding__installs {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
    transition: opacity 1200ms ease, transform 1200ms ease;
}

.onboarding--leaving .onboarding__boot {
    opacity: 1;
    transition-delay: 900ms;
}

@keyframes onboarding-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

.onboarding__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
    color: var(--ob-muted);
}

.onboarding__card[data-step="welcome"] .onboarding__top,
.onboarding__card[data-step="ready"] .onboarding__top { justify-content: center; }

.onboarding__card[data-step="welcome"] .onboarding__count,
.onboarding__card[data-step="ready"] .onboarding__count { display: none; }

.onboarding__dots { display: flex; gap: 6px; }
.onboarding__dots i { width: 22px; height: 4px; border-radius: 4px; background: var(--ob-navy-line); }
.onboarding__dots i.is-done { background: rgba(255, 255, 255, 0.55); }
.onboarding__dots i.is-here { background: #ffffff; }

.onboarding__head { display: flex; align-items: center; gap: 14px; text-align: left; margin-bottom: 10px; }

.onboarding__head--large { flex-direction: column; text-align: center; gap: 22px; }

.onboarding__avatar {
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--ob-navy-deep);
    border: 1px solid var(--ob-navy-line);
    display: grid;
    place-items: center;
}

.onboarding__avatar img { width: 30px; height: auto; }

.onboarding__avatar--large { width: 112px; height: 112px; }
.onboarding__avatar--large img { width: 76px; }

.onboarding__head-text { display: flex; flex-direction: column; gap: 6px; }

.onboarding__title {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.2px;
    outline: none;
}

.onboarding__head--large .onboarding__title { font-size: 30px; letter-spacing: -0.4px; }

.onboarding__lead { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ob-muted); }
.onboarding__head--large .onboarding__lead { font-size: 16px; max-width: 520px; margin: 0 auto; }

.onboarding__note { margin: 0; font-size: 13px; line-height: 1.5; color: var(--ob-muted); }

.onboarding__error {
    margin: 0;
    padding: 10px 12px;
    border-radius: var(--ob-radius);
    background: rgba(255, 99, 99, 0.12);
    border: 1px solid rgba(255, 99, 99, 0.4);
    color: #ffd2d2;
    font-size: 13px;
}

.onboarding__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.onboarding__back {
    min-height: 44px;
    padding: 0 6px;
    border: 0;
    background: none;
    color: var(--ob-text);
    font: inherit;
    font-size: 14px;
    cursor: pointer;
}

.onboarding__back:hover { text-decoration: underline; }

.onboarding__primary {
    min-height: 44px;
    padding: 0 24px;
    border: 0;
    border-radius: var(--ob-radius);
    background: #ffffff;
    color: var(--ob-navy);
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

.onboarding__primary:hover:not(:disabled) { background: #e6e9f2; }
.onboarding__primary:disabled { opacity: 0.55; cursor: default; }

.onboarding__primary:focus-visible,
.onboarding__back:focus-visible,
.onboarding__choice:focus-visible,
.onboarding__module-main:focus-visible,
.onboarding__part:focus-visible,
.onboarding__widget:focus-visible,
.onboarding__switch:focus-visible,
.onboarding__icon-button:focus-visible,
.onboarding__send:focus-visible,
.onboarding__signout:focus-visible {
    outline: 2px solid var(--ob-glow-1);
    outline-offset: 2px;
}

.onboarding__visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ---- Choice cards (radio groups) -------------------------------------------- */

.onboarding__choices { display: grid; gap: 12px; }
.onboarding__choices--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.onboarding__choices--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.onboarding__choices--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.onboarding__choices--themes { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.onboarding__choice {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    min-height: 44px;
    padding: 16px;
    text-align: left;
    border: 2px solid var(--ob-navy-line);
    border-radius: var(--ob-radius);
    background: var(--ob-navy-deep);
    color: var(--ob-text);
    font: inherit;
    cursor: pointer;
    transition: border-color 280ms ease, background 280ms ease;
}

.onboarding__choice:hover { border-color: #3a4673; }

.onboarding__choice.is-on { border-color: #ffffff; background: var(--ob-navy-raised); }

.onboarding__choice strong { font-size: 15px; font-weight: 600; }
.onboarding__choice > span:not([class]) { font-size: 13px; line-height: 1.45; color: var(--ob-muted); }

.onboarding__choice-icon { color: var(--ob-glow-1); display: inline-flex; }

/* ---- Meet Meeko ------------------------------------------------------------ */

.onboarding__meet {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 0;
    border: 1px solid var(--ob-navy-line);
    border-radius: 8px;
    overflow: hidden;
    min-height: 420px;
}

.onboarding__meet-side {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 28px;
    background: var(--ob-navy-deep);
    text-align: center;
}

.onboarding__ring {
    position: relative;
    width: 190px;
    height: 190px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: conic-gradient(from 200deg, var(--ob-glow-1), var(--ob-glow-2), var(--ob-glow-3), var(--ob-glow-1));
    opacity: 0.55;
    transition: opacity 500ms ease;
}

.onboarding__ring::before,
.onboarding__ring::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.onboarding__ring::before { inset: -18px; border: 2px solid color-mix(in srgb, var(--ob-glow-2) 45%, transparent); opacity: 0; }
.onboarding__ring::after { inset: -38px; border: 1px solid color-mix(in srgb, var(--ob-glow-1) 30%, transparent); opacity: 0; }

.onboarding__ring--on { opacity: 1; }
.onboarding__ring--on::before { opacity: 1; animation: onboarding-pulse 1.6s ease-in-out infinite; }
.onboarding__ring--on::after { opacity: 1; animation: onboarding-pulse 1.6s ease-in-out 0.4s infinite; }

@keyframes onboarding-pulse {
    0%, 100% { transform: scale(1); opacity: 0.9; }
    50%      { transform: scale(1.06); opacity: 0.4; }
}

.onboarding__ring-core {
    width: 176px;
    height: 176px;
    border-radius: 50%;
    background: var(--ob-navy);
    display: grid;
    place-items: center;
}

.onboarding__ring-core img { width: 112px; height: auto; }

.onboarding__ring-label {
    margin: 22px 0 0;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--ob-glow-1);
}

.onboarding__ring-hint { margin: 0; font-size: 12px; color: var(--ob-faint); }


.onboarding__log {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
    max-height: 340px;
    padding-right: 4px;
}

.onboarding__bubble {
    margin: 0;
    max-width: 86%;
    padding: 11px 14px;
    font-size: 14px;
    line-height: 1.55;
    border-radius: 8px;
    animation: onboarding-in 650ms ease both;
}

.onboarding__bubble--meeko { align-self: flex-start; background: var(--ob-navy-raised); border-bottom-left-radius: 2px; }
.onboarding__bubble--you { align-self: flex-end; background: #ffffff; color: var(--ob-navy); border-bottom-right-radius: 2px; }

.onboarding__ask { display: flex; gap: 8px; align-items: center; }

.onboarding__input {
    flex: 1;
    width: 100%;
    min-height: 44px;
    box-sizing: border-box;
    padding: 10px 14px;
    background: var(--ob-navy-deep);
    border: 1px solid var(--ob-navy-line);
    border-radius: var(--ob-radius);
    color: var(--ob-text);
    font: inherit;
    font-size: 14px;
    resize: vertical;
}

.onboarding__input::placeholder { color: var(--ob-faint); }
.onboarding__input:focus { outline: none; border-color: var(--ob-glow-1); }

.onboarding__icon-button,
.onboarding__send {
    min-width: 44px;
    min-height: 44px;
    border-radius: var(--ob-radius);
    font: inherit;
    cursor: pointer;
}

.onboarding__icon-button {
    display: grid;
    place-items: center;
    background: var(--ob-navy-deep);
    border: 1px solid var(--ob-navy-line);
    color: var(--ob-text);
}

.onboarding__send { padding: 0 16px; border: 0; background: #ffffff; color: var(--ob-navy); font-weight: 600; }
.onboarding__send:disabled, .onboarding__icon-button:disabled { opacity: 0.45; cursor: default; }

/* ---- Modules ------------------------------------------------------------------ */

.onboarding__modules {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    max-height: 52vh;
    overflow-y: auto;
    padding-right: 4px;
}

.onboarding__module {
    border: 1.5px solid var(--ob-navy-line);
    border-radius: var(--ob-radius);
    background: var(--ob-navy-deep);
    transition: border-color 280ms ease, background 280ms ease;
}

.onboarding__module.is-on { border-color: rgba(255, 255, 255, 0.8); background: var(--ob-navy-raised); }

.onboarding__module-main {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 44px;
    padding: 14px 16px;
    border: 0;
    background: none;
    color: var(--ob-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.onboarding__module-text { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.onboarding__module-text strong { font-size: 15px; font-weight: 600; }
.onboarding__module-text span { font-size: 13px; color: var(--ob-muted); line-height: 1.4; }

.onboarding__switch {
    position: relative;
    flex: none;
    width: 40px;
    height: 22px;
    border-radius: 11px;
    background: #4a5680;
    border: 0;
    padding: 0;
    transition: background 300ms ease;
}

.onboarding__switch i {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #ffffff;
    transition: left 300ms ease;
}

.is-on > .onboarding__module-main .onboarding__switch,
.onboarding__switch.is-on { background: linear-gradient(90deg, var(--ob-glow-1), var(--ob-glow-2), var(--ob-glow-3)); }

.is-on > .onboarding__module-main .onboarding__switch i,
.onboarding__switch.is-on i { left: 21px; }

.onboarding__switch--large { width: 56px; height: 32px; border-radius: 16px; cursor: pointer; }
.onboarding__switch--large i { width: 24px; height: 24px; top: 4px; left: 4px; }
.onboarding__switch--large.is-on i { left: 28px; }

.onboarding__parts {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0 16px 14px;
    animation: onboarding-in 500ms ease both;
}

.onboarding__part,
.onboarding__widget {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 4px 10px 4px 6px;
    border: 1px solid #3a4673;
    border-radius: var(--ob-radius);
    background: transparent;
    color: var(--ob-muted);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

.onboarding__part.is-on,
.onboarding__widget.is-on { color: var(--ob-text); border-color: rgba(255, 255, 255, 0.55); background: rgba(255, 255, 255, 0.06); }

.onboarding__tick {
    width: 16px;
    height: 16px;
    flex: none;
    border-radius: 3px;
    border: 1.5px solid #4a5680;
    display: grid;
    place-items: center;
    color: transparent;
}

.is-on > .onboarding__tick { background: #ffffff; border-color: #ffffff; color: var(--ob-navy); }

/* ---- Look: Panel View demo and themes --------------------------------------- */

.onboarding__look { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 40px; margin-top: 6px; }

.onboarding__section { display: flex; flex-direction: column; gap: 14px; }
.onboarding__section-title {
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--ob-muted);
}
.onboarding__section-lead { margin: 0 0 10px; font-size: 13px; color: var(--ob-muted); line-height: 1.5; }

/* A small page that opens a panel, then a second one: beside it (the first
   moves left) or over it. On a loop, so the choice is seen, not described. */
.onboarding__demo {
    position: relative;
    display: block;
    width: 100%;
    height: 96px;
    border-radius: var(--ob-radius);
    background: #f4f5fa;
    overflow: hidden;
}

.onboarding__demo-page { position: absolute; inset: 8px auto 8px 8px; width: 46%; display: flex; flex-direction: column; gap: 6px; }
.onboarding__demo-page i { display: block; height: 6px; border-radius: 2px; background: #d3d6e0; }
.onboarding__demo-page i:nth-child(2) { width: 70%; }

.onboarding__demo-panel {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 40%;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 8px;
    box-sizing: border-box;
    background: #ffffff;
    border-left: 1px solid #d3d6e0;
    transform: translateX(105%);
}

.onboarding__demo-panel b { display: block; height: 8px; width: 60%; border-radius: 2px; background: var(--ob-navy); }
.onboarding__demo-panel i { display: block; height: 5px; border-radius: 2px; background: #d3d6e0; }

.onboarding__demo-panel--second b { background: #92969e; }

.onboarding__demo--side_by_side .onboarding__demo-panel--first { animation: demo-side-first 7s ease-in-out infinite; }
.onboarding__demo--side_by_side .onboarding__demo-panel--second { animation: demo-side-second 7s ease-in-out infinite; }
.onboarding__demo--overlay .onboarding__demo-panel--first { animation: demo-over-first 7s ease-in-out infinite; }
.onboarding__demo--overlay .onboarding__demo-panel--second {
    width: 36%;
    box-shadow: -8px 0 16px rgba(25, 33, 59, 0.28);
    animation: demo-over-second 7s ease-in-out infinite;
}

@keyframes demo-side-first {
    0%, 8%   { transform: translateX(105%); }
    22%, 38% { transform: translateX(0); }
    52%, 86% { transform: translateX(-100%); }
    100%     { transform: translateX(105%); }
}

@keyframes demo-side-second {
    0%, 38%  { transform: translateX(105%); }
    52%, 86% { transform: translateX(0); }
    100%     { transform: translateX(105%); }
}

@keyframes demo-over-first {
    0%, 8%   { transform: translateX(105%); }
    22%, 86% { transform: translateX(0); }
    100%     { transform: translateX(105%); }
}

@keyframes demo-over-second {
    0%, 38%  { transform: translateX(105%); }
    52%, 86% { transform: translateX(0); }
    100%     { transform: translateX(105%); }
}

.onboarding__swatches { display: flex; width: 100%; height: 26px; border-radius: 3px; overflow: hidden; }
.onboarding__swatches i { flex: 1; }

.onboarding__choices--themes .onboarding__choice { padding: 10px; gap: 8px; }
.onboarding__choices--themes .onboarding__choice strong { font-size: 13px; }

/* ---- Dashboard widgets ---------------------------------------------------- */

.onboarding__widgets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 8px; }

.onboarding__widget { min-height: 52px; padding: 8px 12px; justify-content: flex-start; text-align: left; }
.onboarding__widget-text { display: flex; flex-direction: column; gap: 2px; }
.onboarding__widget-text strong { font-size: 14px; font-weight: 600; }
.onboarding__widget-text span { font-size: 12px; color: var(--ob-faint); }

/* ---- About you -------------------------------------------------------------- */

.onboarding__form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; }
.onboarding__field { display: flex; flex-direction: column; gap: 6px; }
.onboarding__field--wide { grid-column: 1 / -1; }
.onboarding__field label,
.onboarding__field-label { font-size: 13px; font-weight: 600; }

/* ---- Privacy ----------------------------------------------------------------- */

.onboarding__privacy { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

.onboarding__privacy-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px;
    background: var(--ob-navy-deep);
    border: 1px solid var(--ob-navy-line);
    border-radius: var(--ob-radius);
}

.onboarding__privacy-card strong { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.onboarding__privacy-card strong .icon { color: var(--ob-glow-1); }
.onboarding__privacy-card span { font-size: 13px; line-height: 1.5; color: var(--ob-muted); }

.onboarding__meeko-switch {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 18px 20px;
    background: var(--ob-navy-raised);
    border: 1px solid #3a4673;
    border-radius: var(--ob-radius);
}

.onboarding__meeko-words { display: flex; flex-direction: column; gap: 4px; }
.onboarding__meeko-words strong { font-size: 15px; }
.onboarding__meeko-words span { font-size: 13px; color: var(--ob-muted); line-height: 1.5; }

/* ---- Installs chip --------------------------------------------------------- */

.onboarding__installs {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: var(--ob-navy);
    border: 1px solid var(--ob-navy-line);
    border-radius: var(--ob-radius);
    font-size: 13px;
    color: var(--ob-text);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
}

.onboarding__installs span { display: inline-flex; align-items: center; gap: 6px; }
.onboarding__installs .icon { color: var(--ob-glow-1); }

.onboarding__installs-bar { width: 110px; height: 4px; border-radius: 4px; background: var(--ob-navy-line); overflow: hidden; }
.onboarding__installs-bar i {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--ob-glow-1), var(--ob-glow-2), var(--ob-glow-3));
    transition: width 600ms ease;
}

.onboarding__installs.is-problem { border-color: rgba(255, 99, 99, 0.5); }

.onboarding__installs button {
    min-height: 32px;
    padding: 0 12px;
    border: 0;
    border-radius: var(--ob-radius);
    background: #ffffff;
    color: var(--ob-navy);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

/* ---- Room to breathe (24 Oct 2026) ------------------------------------------
   Text, headings and buttons were clamped together. More space inside the
   card, between its parts and inside every control; the phone block below
   takes some of it back on a small screen.
   ------------------------------------------------------------------------------ */

.onboarding__card { gap: 22px; padding: 28px 32px 30px; }
.onboarding__body { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.onboarding__card[data-step="welcome"] .onboarding__body,
.onboarding__card[data-step="ready"] .onboarding__body { align-items: stretch; }
.onboarding__head { gap: 18px; margin-bottom: 4px; }
.onboarding__head-text { gap: 10px; }
.onboarding__title { font-size: 24px; line-height: 1.25; }
.onboarding__head--large .onboarding__title { line-height: 1.2; }
.onboarding__lead { font-size: 15px; line-height: 1.65; max-width: 720px; }
.onboarding__head--large .onboarding__lead { line-height: 1.6; }
.onboarding__note { line-height: 1.6; }

.onboarding__foot {
    gap: 16px;
    padding-top: 22px;
    border-top: 1px solid var(--ob-navy-line);
}
.onboarding__primary { min-height: 48px; padding: 0 30px; }
.onboarding__back {
    min-height: 48px;
    padding: 0 20px;
    border: 1px solid var(--ob-navy-line);
    border-radius: var(--ob-radius);
}
.onboarding__back:hover { text-decoration: none; background: var(--ob-navy-raised); }

.onboarding__choices { gap: 14px; }
.onboarding__choice { gap: 8px; padding: 20px 22px; }
.onboarding__choice span { line-height: 1.55; }
.onboarding__module-main { gap: 14px; padding: 18px 20px; }
.onboarding__modules { gap: 12px; }
.onboarding__field { gap: 9px; }
.onboarding__form { gap: 20px 22px; }
.onboarding__input { padding: 12px 16px; line-height: 1.5; }
.onboarding__send { padding: 0 22px; }
.onboarding__section-title { margin-bottom: 6px; }

/* ---- Talking to Meeko, on every step ---------------------------------------- */

.onboarding__talk {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
    padding: 18px 20px;
    border: 1px solid var(--ob-navy-line);
    border-radius: 8px;
    background: var(--ob-navy-deep);
}

.onboarding__talk .onboarding__log { max-height: 220px; min-height: 64px; gap: 12px; }
.onboarding__talk--tall .onboarding__log { max-height: 340px; min-height: 200px; }

/* On Meet Meeko the talk is the right half of the two-part panel. */
.onboarding__meet .onboarding__talk { border: 0; border-radius: 0; background: transparent; padding: 24px; }

.onboarding__bubble { padding: 12px 16px; line-height: 1.6; }
.onboarding__bubble--instant { animation: none; }

.onboarding__bubble--typing { display: inline-flex; gap: 5px; align-items: center; padding: 14px 16px; }
.onboarding__bubble--typing i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ob-muted);
    animation: onboarding-typing 1.1s ease-in-out infinite;
}
.onboarding__bubble--typing i:nth-child(2) { animation-delay: 0.15s; }
.onboarding__bubble--typing i:nth-child(3) { animation-delay: 0.3s; }

@keyframes onboarding-typing {
    0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
    30% { opacity: 1; transform: translateY(-3px); }
}

.onboarding__talk.is-waiting .onboarding__send { opacity: 0.55; }

/* ---- Two columns: Meeko stays, the steps change (24 Oct 2026) --------------- */

.onboarding__card,
.onboarding__card[data-step] { width: min(1200px, 100%); text-align: left; }

.onboarding__columns {
    display: grid;
    grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
    gap: 0;
    /* A fixed height on a desktop: Meeko's conversation scrolls in its column
       and a long step scrolls in its own, so the chat box never drops off
       the bottom of the screen. */
    height: min(720px, calc(100vh - 190px));
    min-height: 520px;
    border: 1px solid var(--ob-navy-line);
    border-radius: 8px;
    overflow: hidden;
}

.onboarding__meeko {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
    min-height: 0;
    padding: 28px 24px 24px;
    background: var(--ob-navy-deep);
    border-right: 1px solid var(--ob-navy-line);
}

.onboarding__meeko-mark { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.onboarding__meeko .onboarding__ring { width: 150px; height: 150px; }
.onboarding__meeko .onboarding__ring-core { width: 138px; height: 138px; }
.onboarding__meeko .onboarding__ring-core img { width: 88px; }
.onboarding__meeko .onboarding__ring-label { margin-top: 14px; text-align: center; line-height: 1.6; }

/* The conversation fills the rest of the column and scrolls inside it. */
.onboarding__meeko .onboarding__talk {
    flex: 1;
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
}
.onboarding__meeko .onboarding__log { flex: 1; max-height: none; min-height: 160px; overflow-y: auto; }
.onboarding__meeko .onboarding__bubble { max-width: 92%; }

.onboarding__log-step {
    align-self: center;
    margin: 6px 0 0;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--ob-faint);
}

.onboarding__main {
    display: flex;
    flex-direction: column;
    gap: 22px;
    min-width: 0;
    min-height: 0;
    padding: 30px 34px 26px;
}

.onboarding__main .onboarding__modules { max-height: none; overflow: visible; }

/* The step scrolls inside the column; Back and the main button stay in view. */
.onboarding__main .onboarding__body { flex: 1; min-height: 0; overflow-y: auto; padding-right: 6px; margin-right: -6px; }

/* Meeko is on the left now, so the heads on the right carry no avatar. */
.onboarding__main .onboarding__avatar { display: none; }
.onboarding__main .onboarding__head--large { gap: 12px; }

/* Welcome and the last card keep their centred look, inside the right column. */
.onboarding__card[data-step="welcome"] .onboarding__main,
.onboarding__card[data-step="ready"] .onboarding__main { text-align: center; justify-content: center; }

/* Meet: what Meeko has learned so far, filling in as you talk. */
.onboarding__known { display: grid; gap: 12px; }
.onboarding__known-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border: 1px dashed var(--ob-navy-line);
    border-radius: var(--ob-radius);
    background: var(--ob-navy-deep);
    transition: border-color 280ms ease, background 280ms ease;
}
.onboarding__known-row.is-known { border-style: solid; border-color: rgba(255, 255, 255, 0.7); background: var(--ob-navy-raised); }
.onboarding__known-icon {
    flex: none;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: var(--ob-radius);
    background: var(--ob-navy);
    color: var(--ob-glow-1);
}
.onboarding__known-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.onboarding__known-text span { font-size: 12px; color: var(--ob-muted); }
.onboarding__known-text strong { font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.onboarding__known-row:not(.is-known) .onboarding__known-text strong { color: var(--ob-faint); font-weight: 500; }

/* ---- Phone ------------------------------------------------------------------ */

@media (max-width: 760px) {
    .onboarding { padding: 64px 12px 88px; place-items: start center; }
    .onboarding__lockup { width: 64px; top: 16px; left: 16px; }
    .onboarding__signout { top: 16px; right: 16px; }
    .onboarding__card { padding: 26px 20px 22px; gap: 22px; }
    .onboarding__columns { grid-template-columns: minmax(0, 1fr); height: auto; min-height: 0; }
    .onboarding__main .onboarding__body { overflow: visible; }
    .onboarding__meeko { border-right: 0; border-bottom: 1px solid var(--ob-navy-line); padding: 18px 16px; gap: 12px; }
    .onboarding__meeko-mark { flex-direction: row; gap: 14px; justify-content: flex-start; }
    .onboarding__meeko .onboarding__ring { width: 64px; height: 64px; }
    .onboarding__meeko .onboarding__ring-core { width: 58px; height: 58px; }
    .onboarding__meeko .onboarding__ring-core img { width: 38px; }
    .onboarding__meeko .onboarding__ring-label { margin: 0; }
    .onboarding__meeko .onboarding__log { min-height: 120px; max-height: 240px; }
    .onboarding__main { padding: 20px 16px 18px; }
    .onboarding__body { gap: 18px; }
    .onboarding__title { font-size: 21px; }
    .onboarding__talk { padding: 14px; }
    .onboarding__talk--tall .onboarding__log { min-height: 140px; }
    .onboarding__foot { padding-top: 16px; }
    .onboarding__choice { padding: 16px 18px; }
    .onboarding__input { font-size: 16px; }
    .onboarding__head--large .onboarding__title { font-size: 24px; }
    .onboarding__choices--two,
    .onboarding__choices--four,
    .onboarding__modules,
    .onboarding__look,
    .onboarding__widgets,
    .onboarding__form,
    .onboarding__privacy,
    .onboarding__meet { grid-template-columns: minmax(0, 1fr); }
    .onboarding__choices--themes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .onboarding__modules { max-height: none; }
    .onboarding__meet { min-height: 0; }
    .onboarding__meet-side { padding: 20px; }
    .onboarding__ring { width: 120px; height: 120px; }
    .onboarding__ring-core { width: 110px; height: 110px; }
    .onboarding__ring-core img { width: 72px; }
    .onboarding__dots { display: none; }
    .onboarding__installs { left: 12px; right: 12px; bottom: 12px; justify-content: space-between; }
}

@media (prefers-reduced-motion: reduce) {
    .onboarding__card--enter,
    .onboarding__boot,
    .onboarding__bubble,
    .onboarding__bubble--typing i,
    .onboarding__parts { animation: none; }
    .onboarding__ring--on::before,
    .onboarding__ring--on::after { animation: none; }
    .onboarding__demo-panel--first { animation: none !important; transform: translateX(0); }
    .onboarding__demo--side_by_side .onboarding__demo-panel--first { transform: translateX(-100%); }
    .onboarding__demo-panel--second { animation: none !important; transform: translateX(0); }
}


/* =============================================================================
   The reveal and the tour (onboarding-tour.js)
   ============================================================================= */

/* The same black and the same line the wizard left on screen, then the live
   sky fades back in. At the cut the live sky is replaced by two still copies
   of itself, one per half, and only the halves move. */
.onboarding-curtain {
    position: fixed;
    inset: 0;
    z-index: 950;
    color: #f3f5f8;
    font-family: Inter, system-ui, sans-serif;
    background: var(--signin-stage-bg, #000000);
}

.onboarding-curtain__sky {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1400ms ease;
    pointer-events: none;
}

.onboarding-curtain--sky .onboarding-curtain__sky { opacity: 1; }

.onboarding-curtain--cut { background: transparent; }
.onboarding-curtain--cut .onboarding-curtain__sky { visibility: hidden; }

.onboarding-curtain__half {
    position: absolute;
    left: 0;
    right: 0;
    height: 50%;
    overflow: hidden;
    background: var(--signin-stage-bg, #000000);
    transition: transform 1900ms cubic-bezier(0.7, 0, 0.2, 1);
    will-change: transform;
}

.onboarding-curtain__half canvas { position: absolute; left: 0; display: block; }

.onboarding-curtain__half--top { top: 0; }
.onboarding-curtain__half--bottom { bottom: 0; }

.onboarding-curtain__line {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(50% - 1px);
    height: 2px;
    z-index: 2;
    background: linear-gradient(90deg, transparent,
        var(--signin-glow-1, #15f3ff), var(--signin-glow-2, #9169ff), var(--signin-glow-3, #cf24ff), transparent);
    box-shadow: 0 0 18px color-mix(in srgb, var(--signin-glow-2, #9169ff) 70%, transparent);
    transform: scaleX(0);
    transition: transform 1100ms ease, opacity 700ms ease 600ms;
}

.onboarding-curtain__loader {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    transition: opacity 800ms ease;
}

.onboarding-curtain__loader img { width: 150px; height: auto; }
.onboarding-curtain__loader p { margin: 0; font-size: 14px; letter-spacing: 0.02em; color: rgba(255, 255, 255, 0.76); }

.onboarding-curtain--line .onboarding-curtain__loader { opacity: 0; }
.onboarding-curtain--line .onboarding-curtain__line { transform: scaleX(1); }

.onboarding-curtain--open .onboarding-curtain__half--top { transform: translateY(-101%); }
.onboarding-curtain--open .onboarding-curtain__half--bottom { transform: translateY(101%); }
.onboarding-curtain--open .onboarding-curtain__line { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
    .onboarding-curtain__half { transition: opacity 500ms ease; }
    .onboarding-curtain--open .onboarding-curtain__half--top,
    .onboarding-curtain--open .onboarding-curtain__half--bottom { transform: none; opacity: 0; }
}

/* ---- The page being shown on the tour glows ---------------------------- */

main.content-region.onboarding-glow {
    position: relative;
    animation: onboarding-glow 2.4s ease-in-out 2;
}

@keyframes onboarding-glow {
    0%, 100% { box-shadow: inset 0 0 0 0 transparent; }
    40%      { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--signin-glow-1, #15f3ff) 55%, transparent),
                           inset 0 0 18px color-mix(in srgb, var(--signin-glow-2, #9169ff) 14%, transparent); }
}

@media (prefers-reduced-motion: reduce) {
    main.content-region.onboarding-glow { animation: none; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--signin-glow-1, #15f3ff) 55%, transparent); }
}

/* ---- Meeko's tour card ------------------------------------------------------- */

.onboarding-tour {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 940;
    width: 360px;
    max-width: calc(100vw - 24px);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    background: #19213b;
    border: 1px solid #26315a;
    border-radius: 8px;
    color: #f3f5f8;
    font-family: Inter, system-ui, sans-serif;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
    animation: onboarding-in 750ms cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
    transition: opacity 600ms ease, transform 600ms ease;
}

.onboarding-tour--leaving { opacity: 0; transform: translateY(10px); }
.onboarding-tour--moving .onboarding-tour__line { opacity: 0.55; transition: opacity 400ms ease; }
.onboarding-tour__line { transition: opacity 400ms ease; }

.onboarding-tour__head { display: flex; align-items: center; gap: 10px; }
.onboarding-tour__head strong { font-size: 14px; }
.onboarding-tour__count { margin-left: auto; font-size: 12px; color: rgba(243, 245, 248, 0.68); }

.onboarding-tour__avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: conic-gradient(from 200deg, var(--signin-glow-1, #15f3ff), var(--signin-glow-2, #9169ff),
        var(--signin-glow-3, #cf24ff), var(--signin-glow-1, #15f3ff));
}

.onboarding-tour__avatar > span {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #19213b;
    display: grid;
    place-items: center;
}

.onboarding-tour__avatar img { width: 22px; height: auto; }

.onboarding-tour__line {
    margin: 0;
    padding: 12px 14px;
    font-size: 14px;
    line-height: 1.55;
    background: #26315a;
    border-radius: 8px 8px 8px 2px;
}

.onboarding-tour__stops { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }

.onboarding-tour__stops li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: rgba(243, 245, 248, 0.66);
}

.onboarding-tour__stops li i {
    width: 14px;
    height: 14px;
    flex: none;
    border-radius: 50%;
    border: 1.5px solid #4a5680;
}

.onboarding-tour__stops li.is-done i { background: #ffffff; border-color: #ffffff; }
.onboarding-tour__stops li.is-here { color: #ffffff; font-weight: 600; }
.onboarding-tour__stops li.is-here i {
    border: 2px solid var(--signin-glow-1, #15f3ff);
    box-shadow: 0 0 8px color-mix(in srgb, var(--signin-glow-1, #15f3ff) 60%, transparent);
}

.onboarding-tour__foot { display: flex; justify-content: space-between; align-items: center; }

.onboarding-tour__skip {
    min-height: 44px;
    border: 0;
    background: none;
    color: rgba(243, 245, 248, 0.75);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

.onboarding-tour__next {
    min-height: 44px;
    padding: 0 20px;
    border: 0;
    border-radius: 4px;
    background: #ffffff;
    color: #19213b;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.onboarding-tour__skip:focus-visible,
.onboarding-tour__next:focus-visible { outline: 2px solid var(--signin-glow-1, #15f3ff); outline-offset: 2px; }

@media (max-width: 760px) {
    .onboarding-tour { left: 12px; right: 12px; bottom: 12px; width: auto; }
    .onboarding-tour__stops { display: none; }
}

/* ---- The tour: lighting a section, the other side, how to reach Meeko ------- */

/* What Meeko is pointing at (26 Oct 2026, Leone): a light, thin line on
   every stop rather than a heavy ring, so it guides without shouting. */
.onboarding-spot {
    position: relative;
    border-radius: 5px;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--signin-glow-2, #9169ff) 60%, transparent),
                0 0 0 4px color-mix(in srgb, var(--signin-glow-2, #9169ff) 10%, transparent) !important;
    transition: box-shadow 400ms ease;
}

/* Beside an open slide-over panel, the card sits on the left. */
.onboarding-tour--left { right: auto; left: 24px; }

.onboarding-tour__extra:empty { display: none; }

.onboarding-tour__choices { display: flex; flex-direction: column; gap: 8px; }

.onboarding-tour__choice {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid #26315a;
    border-radius: 6px;
    background: #121a33;
    cursor: pointer;
}

.onboarding-tour__choice-text { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.onboarding-tour__choice-text strong { font-size: 14px; font-weight: 600; }
.onboarding-tour__choice-text span { font-size: 12.5px; color: #a7aec3; line-height: 1.45; }

.onboarding-tour__switch { position: relative; flex: none; width: 40px; height: 22px; }
.onboarding-tour__switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.onboarding-tour__switch i {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: #3a4673;
    transition: background 200ms ease;
    pointer-events: none;
}
.onboarding-tour__switch i::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #ffffff;
    transition: transform 200ms ease;
}
.onboarding-tour__switch input:checked + i { background: linear-gradient(90deg, #15f3ff, #9169ff, #cf24ff); }
.onboarding-tour__switch input:checked + i::after { transform: translateX(18px); }
.onboarding-tour__switch input:focus-visible + i { outline: 2px solid #15f3ff; outline-offset: 2px; }

.onboarding-tour__note { margin: 0; font-size: 13px; color: #a7aec3; }

@media (max-width: 760px) {
    .onboarding-tour--left { left: 12px; right: 12px; }
}

/* Getting to know you: what Meeko has kept, as it happens. */
.onboarding__learned {
    padding: 16px 18px;
    border: 1px solid var(--ob-navy-line);
    border-radius: var(--ob-radius);
    background: var(--ob-navy-deep);
}
.onboarding__learned[hidden] { display: none; }
.onboarding__learned-title {
    margin: 0 0 10px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--ob-muted);
}
.onboarding__learned-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.onboarding__learned-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.5; animation: onboarding-in 650ms ease both; }
.onboarding__learned-list .icon { flex: none; margin-top: 2px; color: var(--ob-glow-1); }

/* ---- RM-095: the tour's sample data, kept or removed (26 Oct 2026) ---------- */

.onboarding-tour__next:disabled { opacity: 0.45; cursor: not-allowed; }

.onboarding-tour__sample {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 8px;
    padding: 12px 14px;
    border: 1px solid #26315a;
    border-radius: 5px;
    background: #121a33;
}

.onboarding-tour__sample-text { display: flex; flex-direction: column; gap: 2px; }
.onboarding-tour__sample-text strong { font-size: 14px; font-weight: 600; }
.onboarding-tour__sample-text span { font-size: 12.5px; color: #a7aec3; line-height: 1.45; }

.onboarding-tour__sample-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.onboarding-tour__sample-button {
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid #33406b;
    border-radius: 5px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 160ms ease, background 160ms ease;
}
.onboarding-tour__sample-button:hover:not(:disabled) { border-color: #5a6aa3; }
.onboarding-tour__sample-button.is-on {
    border-color: transparent;
    background: linear-gradient(90deg, rgba(21, 243, 255, 0.22), rgba(145, 105, 255, 0.28));
}
.onboarding-tour__sample-button:disabled { cursor: default; opacity: 0.7; }
.onboarding-tour__sample-button:focus-visible { outline: 2px solid #15f3ff; outline-offset: 2px; }

/* The introduction from HR closes back to the system with a cross. */
.onboarding__close {
    width: 36px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}