/* Homepage uses the same palette and theme tokens as the signed-in app. */
.page-landing { --home-accent: var(--as-ink-2); --home-panel: var(--as-column-bg); }
.page-landing .container { max-width: 1320px; padding-inline: 32px; }
.page-landing .site-header { background: var(--bs-body-bg); }
.page-landing .site-nav { min-height: 76px; }
.page-landing .brand { font-size: 1.4rem; letter-spacing: -.055em; font-weight: 700; }
.page-landing .brand-mark { width: 28px; height: 28px; }
.page-landing .site-nav-actions .btn { padding: .65rem 1.1rem; }
.page-landing .landing-hero { padding: 84px 0 88px; }
.page-landing .hero-layout { --bs-gutter-x: 3.5rem; }
.page-landing .eyebrow { color: var(--home-accent); font-size: .8rem; text-transform: none; letter-spacing: 0; font-weight: 600; margin-bottom: 1.4rem; }
.eyebrow-mark { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 7px; background: currentColor; }
.page-landing .display-title { font-size: clamp(3rem, 4.7vw, 4.5rem); line-height: 1.05; letter-spacing: -.065em; font-weight: 700; margin-bottom: 1.5rem; }
.page-landing .display-title > span { color: var(--home-accent); }
.page-landing .lead-text { max-width: 26rem; font-size: 1.075rem; line-height: 1.75; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; margin-top: 2rem; }
.hero-actions .btn { padding: .95rem 1.2rem; font-weight: 600; }
.hero-actions .btn span { margin-left: 1rem; }
.hero-demo-link { font-size: .875rem; color: var(--as-ink); text-decoration: none; padding-block: .75rem; }
.hero-demo-link:hover { color: var(--home-accent); }
.hero-demo-link span { margin-left: .5rem; }
.hero-note { color: var(--as-muted); font-size: .75rem; margin: 1rem 0 0; }
.board-showcase { scroll-margin-top: 110px; }
.board-stage { background: #1e293b; padding: 28px 22px 22px; border-radius: 18px; }
.showcase-caption { display: flex; justify-content: space-between; gap: 1rem; align-items: center; margin-bottom: 22px; color: #fff; }
.showcase-caption h2 { color: #fff; font-size: .9rem; font-weight: 600; margin: 0; }
.demo-tour-button { padding: .3rem .6rem; border: 1px solid #ffffff2e; border-radius: 6px; background: transparent; color: #e2e8f0; font-size: .7rem; font-weight: 500; cursor: pointer; transition: background .15s ease, color .15s ease; }
.demo-tour-button:hover { background: #ffffff14; color: #fff; }
.demo-tour-button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.page-landing .demo-project { max-width: none; margin: 0; border: 0; border-radius: 10px; overflow: hidden; background: var(--as-surface); box-shadow: 0 12px 28px #0f172a26; }
.demo-toolbar { padding: 1rem; border-bottom: 1px solid var(--as-line); display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.demo-project-name { display: flex; align-items: center; gap: .65rem; }
.demo-project-mark { background: var(--home-panel); color: var(--home-accent); display: grid; place-items: center; width: 36px; height: 36px; border-radius: 8px; font-weight: 700; }
.demo-workspace { font-size: .55rem; color: var(--as-muted); letter-spacing: .08em; }
.demo-project-name h3 { font-size: .9rem; margin: .1rem 0 0; }
.demo-sprint { color: var(--as-muted); font-size: .65rem; }
.demo-sprint span { margin: 0 .35rem; }
.page-landing .mini-project { max-width: none; gap: .65rem; margin: 0; padding: 1rem; background: var(--as-column-bg); }
.page-landing .mini-col { padding: 0; border-radius: 0; background: transparent; }
.page-landing .mini-col-title { font-size: .65rem; letter-spacing: 0; text-transform: none; color: var(--as-ink-2); padding: .35rem .1rem .8rem; border: 0; }
.page-landing .mini-count { font-size: .6rem; background: var(--as-surface); padding: .05rem .3rem; border-radius: 4px; }
.page-landing .mini-list { min-height: 265px; }
.page-landing .mini-card { display: flex; flex-direction: column; gap: .6rem; padding: .8rem; margin-bottom: .65rem; border: 1px solid var(--as-line); border-radius: 7px; box-shadow: 0 2px 4px #0f172a08; }
.page-landing .mini-card:hover { border-color: var(--home-accent); }
.demo-task-key { font-family: ui-monospace, monospace; font-size: .6rem; color: var(--as-muted); }
.demo-task-title { font-size: .78rem; line-height: 1.4; font-weight: 600; }
.demo-card-meta { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: space-between; align-items: center; margin-top: .3rem; }
.demo-tag { padding: .2rem .35rem; background: var(--home-panel); border-radius: 4px; color: var(--home-accent); font-size: .55rem; }
.page-landing .mini-card b { color: var(--as-muted); font-size: .6rem; font-weight: 500; }
.demo-bottom { padding: .8rem 1rem; border-top: 1px solid var(--as-line); }
.page-landing .demo-hint { margin: 0; font-size: .7rem; }
.demo-bottom > span { display: block; margin-top: .3rem; color: var(--as-muted); font-size: .6rem; }
.page-landing .landing-section { padding: 80px 0; }
.page-landing .section-title { font-size: clamp(2rem, 3.4vw, 2.9rem); letter-spacing: -.055em; font-weight: 650; line-height: 1.12; }
.page-landing .section-lead { font-size: 1rem; max-width: 31rem; line-height: 1.75; }
.page-landing #features { background: var(--as-column-bg); border: 0; }
.page-landing .features-head .section-lead { margin-bottom: .35rem; }
.feature-sheet { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-top: 2.75rem; }
.page-landing .feature-card { height: 100%; padding: 2rem 2rem 2.1rem; border: 1px solid var(--as-line); border-radius: 16px; background: var(--as-surface); transition: border-color .2s ease; }
.page-landing .feature-card:hover { border-color: var(--as-line-strong); }
.feature-icon-badge { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 1.5rem; border-radius: 11px; background: var(--as-column-bg); color: var(--as-ink); }
.page-landing .feature-icon { display: block; color: currentColor; margin: 0; }
.page-landing .feature-card h3 { font-size: 1.075rem; letter-spacing: -.025em; margin-bottom: .55rem; }
.page-landing .feature-card p { line-height: 1.7; font-size: .875rem; }
/* Smaller features: their own half of the section, grouped and described. */
.extras-block { margin-top: 4.5rem; --bs-gutter-x: 3rem; }
.extras-intro { position: sticky; top: 110px; }
.page-landing .extras-intro .eyebrow { margin-bottom: .9rem; }
.extras-heading-title { font-size: clamp(1.5rem, 2.2vw, 1.85rem); font-weight: 650; letter-spacing: -.045em; line-height: 1.2; margin-bottom: 1rem; }
.extras-lead { color: var(--as-muted); font-size: .925rem; line-height: 1.7; max-width: 22rem; margin: 0; }
.extras-groups { display: grid; gap: 1rem; }
.extras-group-block { padding: 1.4rem 1.6rem 1.5rem; background: var(--as-surface); border: 1px solid var(--as-line); border-radius: 16px; }
.extras-group-title { margin: 0 0 1rem; color: var(--as-muted); font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.extras-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 2rem; margin: 0; padding: 0; list-style: none; }
.extras-items li { display: flex; align-items: flex-start; gap: .85rem; min-width: 0; }
.extras-item-icon { flex: 0 0 auto; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--as-column-bg); color: var(--as-ink-2); }
.extras-items strong { display: block; font-size: .9rem; font-weight: 600; color: var(--as-ink); line-height: 1.35; margin-top: .1rem; }
.extras-item-text { display: block; margin-top: .2rem; font-size: .825rem; line-height: 1.6; color: var(--as-muted); }
@media (prefers-reduced-motion: reduce) {
    .page-landing .feature-card { transition: none; }
}
@media (max-width: 991.98px) {
    .feature-sheet { grid-template-columns: repeat(2, 1fr); }
    .extras-intro { position: static; }
    .extras-block { margin-top: 3.5rem; }
}
/* Sections alternate: features grey, how it works white, FAQ grey, then the dark call to action. */
.page-landing .landing-section-alt { background: var(--as-surface); border: 0; }
.page-landing #faq { background: var(--as-column-bg); border: 0; }
.page-landing .steps-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin: 2.75rem 0 0; padding: 0; list-style: none; }
.page-landing .steps-list li { padding: 0; border: 0; font-size: inherit; color: inherit; }
.step-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--as-line); border-radius: 16px; background: var(--bs-body-bg); }
.step-visual { position: relative; display: flex; flex-direction: column; justify-content: center; gap: .75rem; height: 190px; padding: 1.5rem 1.75rem; background: var(--as-column-bg); border-bottom: 1px solid var(--as-line); }
.step-body { padding: 1.5rem 1.75rem 1.75rem; }
.page-landing .step-key { display: inline-block; width: auto; height: auto; margin-bottom: .6rem; padding: 0; border: 0; border-radius: 0; background: none; color: var(--as-muted); font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.page-landing .steps-list h3 { font-size: 1.075rem; letter-spacing: -.025em; margin-bottom: .55rem; }
.page-landing .steps-list p { font-size: .875rem; line-height: 1.7; }
/* Step 1: the new-project field. */
.step-input { display: flex; flex-direction: column; gap: .35rem; }
.step-input-label { font-size: .65rem; font-weight: 600; color: var(--as-muted); }
.step-input-field { display: flex; align-items: center; height: 40px; padding: 0 .8rem; border: 1px solid var(--as-ink-2); border-radius: 8px; background: var(--as-surface); box-shadow: 0 0 0 3px color-mix(in srgb, var(--as-ink-2) 12%, transparent); font-size: .85rem; font-weight: 500; color: var(--as-ink); }
.step-caret { width: 1.5px; height: 1.05em; margin-left: 2px; background: var(--as-ink); animation: step-blink 1.1s steps(1) infinite; }
@keyframes step-blink { 50% { opacity: 0; } }
.step-button { align-self: flex-start; padding: .45rem .8rem; border-radius: 7px; background: var(--as-ink); color: var(--as-surface); font-size: .72rem; font-weight: 600; }
/* Step 2: a filled-in task card. */
.step-task { display: flex; flex-direction: column; gap: .45rem; padding: .85rem .9rem; border: 1px solid var(--as-line); border-radius: 9px; background: var(--as-surface); box-shadow: 0 2px 6px #0f172a0d; }
.step-task .demo-task-title { font-size: .85rem; }
.step-task-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: .15rem; }
.step-task-meta > span { padding: .15rem .4rem; border-radius: 4px; background: var(--as-column-bg); color: var(--as-ink-2); font-size: .62rem; font-weight: 500; }
.step-task-meta > .step-avatar { display: grid; place-items: center; width: 22px; height: 22px; margin-left: auto; padding: 0; border-radius: 50%; background: var(--as-ink-2); color: var(--as-surface); font-size: .55rem; font-weight: 700; }
/* Step 3: a card on its way from Doing to Done. */
.step-lanes { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; height: 100%; }
.step-lane { display: flex; flex-direction: column; gap: .5rem; }
.step-lane-title { display: flex; align-items: center; gap: .4rem; font-size: .65rem; font-weight: 600; color: var(--as-ink-2); }
.step-ghost { height: 56px; border: 1.5px dashed var(--as-line-strong); border-radius: 8px; }
.step-ghost-short { height: 44px; margin-top: auto; border-style: solid; border-color: var(--as-line); background: var(--as-surface); }
.step-task-dragging { position: absolute; left: 28%; top: 30%; width: 56%; padding: .65rem .75rem; transform: rotate(-4deg); box-shadow: 0 12px 24px -8px #0f172a40; }
.step-task-dragging .demo-task-title { font-size: .75rem; }
@media (prefers-reduced-motion: reduce) { .step-caret { animation: none; } }
@media (max-width: 991.98px) {
    .page-landing .steps-list { grid-template-columns: 1fr; max-width: 560px; }
}
.page-landing .auth-panel { border-radius: 14px; padding: 1.75rem; border-color: var(--as-line); box-shadow: 0 8px 32px #0f172a0a; scroll-margin-top: 100px; }
.page-landing .auth-title { font-size: 1.5rem; letter-spacing: -.04em; }
.page-landing .segmented { border-radius: 8px; background: var(--as-column-bg); }
.page-landing .segmented button { border-radius: 6px; }
.page-landing .segmented button.active { background: var(--as-surface); color: var(--as-ink); }
.page-landing .form-control { background-color: var(--as-surface); border-color: var(--as-line-strong); color: var(--as-ink); border-radius: 7px; min-height: 44px; }
.page-landing .form-control:focus { border-color: var(--home-accent); box-shadow: 0 0 0 3px var(--home-panel); }
.page-landing .auth-panel .btn { min-height: 44px; }
.page-landing .faq-item summary { padding-block: 1.4rem; }
.page-landing .faq-item h3 { font-weight: 500; }
.page-landing .faq-item p { font-size: .9rem; line-height: 1.75; }
.page-landing .landing-cta { padding: 4.5rem 0; background: #1e293b; color: #fff; }
.page-landing .landing-cta-title { color: #fff; font-size: clamp(2.5rem, 4vw, 3.5rem); font-weight: 650; letter-spacing: -.055em; }
.page-landing .landing-cta-text { color: #cbd5e1; }
.page-landing .btn-cta { background: #fff; color: #1e293b; border-color: #fff; border-radius: 8px; padding: .9rem 1.25rem; }
.page-landing .btn-cta:hover { background: #f1f5f9; color: #1e293b; }
.page-landing .site-footer { background: var(--bs-body-bg); padding-top: 3.5rem; }
@media (max-width: 1199.98px) and (min-width: 992px) {
    .page-landing .hero-layout { --bs-gutter-x: 2rem; }
    .page-landing .display-title { font-size: 3.2rem; }
    .board-stage { padding: 22px 16px 16px; }
}
@media (max-width: 991.98px) {
    .page-landing .hero-layout { --bs-gutter-x: 2rem; }
    .page-landing .landing-hero { padding: 48px 0; }
    .page-landing .display-title { font-size: clamp(3rem, 7vw, 4.5rem); }
    .page-landing .lead-text { max-width: 36rem; }
    .page-landing .hero-account { max-width: 560px; }
    .page-landing .mini-list { min-height: 200px; }
}
@media (max-width: 767.98px) {
    .page-landing .container { padding-inline: 22px; }
    .page-landing .site-nav { min-height: 66px; }
    .page-landing .site-nav-actions .btn { padding: .65rem; }
    .page-landing .landing-hero { padding: 36px 0 44px; }
    .page-landing .display-title { font-size: clamp(2.8rem, 10vw, 4.5rem); }
    .page-landing .lead-text { font-size: 1rem; }
    .hero-actions { gap: .5rem 1.25rem; }
    .board-stage { padding: 18px 10px 10px; border-radius: 12px; }
    .showcase-caption { margin: 0 4px 16px; }
    .showcase-caption h2 { font-size: .8rem; }
    .demo-tour-button { font-size: .65rem; padding: .25rem .5rem; }
    .demo-toolbar { padding: .75rem; }
    .demo-sprint { max-width: 90px; text-align: right; line-height: 1.7; font-size: .6rem; }
    .demo-sprint span { margin: 0 .1rem; }
    .page-landing .mini-project { gap: .4rem; padding: .6rem; }
    .page-landing .mini-col-title { font-size: .6rem; gap: .2rem; padding-inline: 0; }
    .page-landing .mini-card { padding: .5rem; gap: .5rem; }
    .demo-task-title { font-size: .7rem; }
    .demo-card-meta { gap: .4rem; }
    .demo-tag { font-size: .5rem; padding: .15rem .2rem; overflow-wrap: anywhere; }
    .page-landing .mini-count { padding-inline: .2rem; }
    .demo-bottom { padding: .75rem; }
    .page-landing .landing-section { padding: 52px 0; }
    .feature-sheet { grid-template-columns: 1fr; gap: .85rem; margin-top: 2rem; }
    .page-landing .feature-card { padding: 1.4rem 1.3rem 1.5rem; border-radius: 14px; }
    .feature-icon-badge { width: 40px; height: 40px; margin-bottom: 1rem; border-radius: 10px; }
    .extras-block { margin-top: 3rem; }
    .extras-group-block { padding: 1.2rem 1.15rem 1.3rem; border-radius: 14px; }
    .extras-items { grid-template-columns: 1fr; gap: 1rem; }
    .page-landing .steps-list { gap: .85rem; margin-top: 2rem; }
    .step-visual { height: 170px; padding: 1.25rem; }
    .step-body { padding: 1.25rem 1.25rem 1.4rem; }
    .page-landing .auth-panel { padding: 1.25rem; }
    .page-landing .landing-cta { padding: 3rem 0; }
}

.page-landing .account-modal .modal-dialog { max-width: 440px; }
.page-landing .account-modal .auth-panel { position: relative; padding-top: 3rem; }
.auth-close { position: absolute; top: 1rem; right: 1rem; }

/* Direct account URLs work without the modal layer. */
.standalone-auth { width: min(440px, calc(100% - 32px)); margin: 3rem auto 4rem; }

/* ----- Demo board extras: quick actions, N to add, Ctrl K search ----- */
.page-landing .demo-project { position: relative; }
/* No transform transition on cards: Sortable moves the dragged copy with transform, so one would make it lag. */
.page-landing .mini-card { position: relative; }
.page-landing .mini-card.is-leaving { opacity: 0; scale: .96; transition: opacity .18s ease, scale .18s ease; }
/* Same drag look as the real board: a dashed slot where the card will land, and the card itself under the cursor. */
.page-landing .mini-card.is-ghost { opacity: 1; background: color-mix(in srgb, #3b82f6 8%, var(--as-surface)); border-color: transparent; box-shadow: none; outline: 2px dashed #3b82f6; outline-offset: -2px; }
.page-landing .mini-card.is-ghost > * { visibility: hidden; }
.page-landing .mini-card.is-drag { transition: none !important; cursor: grabbing; border-color: var(--as-line-strong); box-shadow: 0 16px 32px -8px #0f172a59; }
.page-landing .mini-card.is-flagged { background: #fef2f2; border-color: #fecaca; }
[data-bs-theme="dark"] .page-landing .mini-card.is-flagged { background: color-mix(in srgb, #ef4444 12%, var(--as-surface)); border-color: color-mix(in srgb, #ef4444 35%, transparent); }
/* Card head like the real board: type, key, priority and flag in one row; the assignee sits at the end of the meta row. */
.demo-card-head { display: flex; align-items: center; gap: .3rem; min-height: 14px; }
.demo-card-head [hidden] { display: none; }
.demo-card-head svg { width: 12px; height: 12px; }
.page-landing .demo-card-meta b { margin-left: auto; }
.page-landing .demo-avatar { --avatar-size: 18px; font-size: .5rem; }
.page-landing .mini-card.is-flash { animation: demo-flash 1.2s ease; }
@keyframes demo-flash { 0%, 40% { border-color: var(--as-ink-2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--as-ink-2) 18%, transparent); } }
.demo-quick { position: absolute; top: 5px; right: 5px; display: none; gap: 3px; }
.demo-project.is-quick .mini-card:hover { outline: 1px dashed var(--as-line-strong); cursor: default; }
.demo-project.is-quick .mini-card:hover .demo-quick { display: flex; }
.demo-quick button { position: relative; display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 1px solid var(--as-line); border-radius: 5px; background: var(--as-surface); color: var(--as-ink-2); cursor: pointer; }
.demo-quick button:hover { border-color: var(--as-line-strong); color: var(--as-ink); }
.demo-quick button.is-danger { color: #b91c1c; }
.demo-quick button[data-demo-quick="type"] { color: var(--task-type-color); }
.demo-quick button[data-demo-quick="priority"] { color: var(--task-priority-color); }
.demo-quick button[data-demo-quick="flag"] svg { color: #dc2626; }
.demo-quick svg { width: 12px; height: 12px; }
.demo-quick button[data-tip]::after { content: attr(data-tip); position: absolute; top: calc(100% + 4px); right: 0; padding: .15rem .4rem; border-radius: 4px; background: var(--as-ink); color: var(--as-surface); font-size: .6rem; font-weight: 600; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .1s; z-index: 2; }
.demo-quick button:hover::after { opacity: 1; }
[data-bs-theme="dark"] .demo-quick button.is-danger { color: #f87171; }
.demo-add { display: flex; flex-direction: column; gap: .3rem; margin-top: .1rem; }
.demo-add input { width: 100%; padding: .55rem .6rem; border: 1px solid var(--as-ink-2); border-radius: 7px; background: var(--as-surface); color: var(--as-ink); font-size: .75rem; outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--as-ink-2) 12%, transparent); }
.demo-add span { font-size: .58rem; color: var(--as-muted); }
.demo-search { position: absolute; inset: 0; z-index: 5; display: flex; justify-content: center; align-items: flex-start; padding: 3.25rem 1rem 1rem; background: color-mix(in srgb, #0f172a 35%, transparent); }
.demo-search-panel { width: min(340px, 100%); overflow: hidden; border: 1px solid var(--as-line); border-radius: 12px; background: var(--as-surface); box-shadow: 0 18px 40px -12px #0f172a59; }
.demo-search input { width: 100%; padding: .8rem .9rem; border: 0; border-bottom: 1px solid var(--as-line); background: transparent; color: var(--as-ink); font-size: .85rem; outline: none; }
.demo-search ul { max-height: 190px; overflow: auto; margin: 0; padding: .35rem; list-style: none; }
.demo-search li { display: flex; align-items: center; gap: .6rem; padding: .5rem .55rem; border-radius: 7px; color: var(--as-ink); font-size: .78rem; cursor: pointer; }
.demo-search li span { font-family: ui-monospace, monospace; font-size: .62rem; color: var(--as-muted); }
.demo-search li.is-active { background: var(--as-column-bg); }
.demo-search li.is-empty { color: var(--as-muted); cursor: default; }
.demo-search-foot { display: block; padding: .5rem .9rem; border-top: 1px solid var(--as-line); color: var(--as-muted); font-size: .6rem; }

/* ----- Guided tour of the demo ----- */
.home-tip { position: fixed; z-index: 1070; width: min(300px, calc(100vw - 24px)); padding: 1rem 1.1rem .95rem; border-radius: 14px; background: #0f172a; color: #e2e8f0; box-shadow: 0 20px 44px -14px #0f172a80; font-size: .85rem; line-height: 1.55; animation: home-tip-in .22s ease; }
@keyframes home-tip-in { from { opacity: 0; transform: translateY(4px); } }
.home-tip::before { content: ''; position: absolute; left: calc(var(--arrow-x, 50%) - 7px); width: 14px; height: 14px; background: inherit; transform: rotate(45deg); border-radius: 2px; }
.home-tip[data-side="below"]::before { top: -6px; }
.home-tip[data-side="above"]::before { bottom: -6px; }
.home-tip[data-side="none"]::before { display: none; }
.home-tip-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .35rem; }
.home-tip-count { color: #94a3b8; font-size: .68rem; font-weight: 600; letter-spacing: .06em; }
.home-tip-close { width: 26px; height: 26px; margin: -4px -6px 0 0; padding: 0; border: 0; border-radius: 6px; background: none; color: #94a3b8; font-size: 1.1rem; line-height: 1; cursor: pointer; }
.home-tip-close:hover { background: #ffffff14; color: #fff; }
.home-tip h3 { position: relative; margin: 0 0 .3rem; color: #fff; font-size: .95rem; font-weight: 600; letter-spacing: -.01em; }
.home-tip p { margin: 0; color: #cbd5e1; }
.home-tip p b { color: #fff; font-weight: 600; }
.home-tip-keys { display: inline-flex; align-items: center; gap: .2rem; margin: 0 .1rem; padding: 0; border: 0; background: none; color: #94a3b8; font-size: .7rem; vertical-align: 1px; cursor: pointer; }
.home-tip kbd { display: inline-block; min-width: 1.6em; padding: .12rem .4rem; border: 1px solid #475569; border-bottom-width: 2px; border-radius: 5px; background: #1e293b; color: #fff; font-family: inherit; font-size: .72rem; font-weight: 600; line-height: 1.3; text-align: center; }
.home-tip-keys:hover kbd { border-color: #94a3b8; }
.home-tip-foot { display: flex; justify-content: flex-end; align-items: center; gap: .4rem; margin-top: .9rem; }
.home-tip-back, .home-tip-next { padding: .4rem .75rem; border-radius: 7px; font-size: .75rem; font-weight: 600; text-decoration: none; cursor: pointer; }
.home-tip-back { margin-right: auto; border: 0; background: none; color: #94a3b8; }
.home-tip-back:hover { color: #fff; }
.home-tip-next { border: 1px solid #ffffff33; background: transparent; color: #fff; }
.home-tip-next:hover { background: #ffffff14; color: #fff; }
.home-tip a.home-tip-next { border-color: #fff; background: #fff; color: #0f172a; }
.home-tip a.home-tip-next:hover { background: #e2e8f0; color: #0f172a; }
.home-tip :focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* Doing the step ticks it off before the tour moves on. */
.home-tip.is-done h3::after { content: '✓'; display: inline-grid; place-items: center; width: 18px; height: 18px; margin-left: .45rem; border-radius: 50%; background: #10b981; color: #fff; font-size: .65rem; vertical-align: 2px; }
.home-tip-target { position: relative; z-index: 1; outline: 2px solid #3b82f6; outline-offset: 3px; border-radius: 7px; }
.demo-project.is-touring-end { outline: 2px solid #3b82f6; outline-offset: 3px; }
.home-pointer { position: absolute; z-index: 4; left: 0; top: 0; width: 22px; height: 22px; margin: -4px 0 0 -4px; pointer-events: none; animation: home-pointer 2.6s ease-in-out infinite; }
.home-pointer::before { content: ''; position: absolute; inset: 0; background: #0f172a; -webkit-mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3cpath d='M5 3l14 7.5-6.2 1.6L9.5 18z' fill='%23000'/%3e%3c/svg%3e") center / contain no-repeat; mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3cpath d='M5 3l14 7.5-6.2 1.6L9.5 18z' fill='%23000'/%3e%3c/svg%3e") center / contain no-repeat; filter: drop-shadow(0 0 1px #fff); }
.home-pointer[hidden] { display: none; }
@keyframes home-pointer {
    0%, 12% { transform: translate(var(--from-x), var(--from-y)) scale(1); opacity: 0; }
    20% { transform: translate(var(--from-x), var(--from-y)) scale(.85); opacity: 1; }
    70% { transform: translate(var(--to-x), var(--to-y)) scale(.85); opacity: 1; }
    80%, 100% { transform: translate(var(--to-x), var(--to-y)) scale(1); opacity: 0; }
}
[data-bs-theme="dark"] .home-tip { background: #1e293b; outline: 1px solid #334155; }
[data-bs-theme="dark"] .home-pointer::before { background: #f8fafc; filter: drop-shadow(0 0 1px #000); }
@media (prefers-reduced-motion: reduce) {
    .home-tip, .page-landing .mini-card.is-flash { animation: none; }
}