/*
 * The signed-out landing page (index.html).
 *
 * Moved out of wyldcards.css by scripts/css-split.cjs (see there), in their
 * order. Loads right after wyldcards.css; the page lists it in its <head> with
 * data-page-sheet, and page-chrome.js loads it on htmx-boosted visits.
 */

body.landing-body main.landing-page {
    /* Override base.css main { max-inline-size: var(--eff-line-length) } */
    max-inline-size: none;
    inline-size: 100%;
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 0 0 var(--wc-space-6);
    text-align: left;
}

/* Logo centred over the hero as the page's masthead, Sign in on the right
   gutter. The empty first column mirrors Sign in's so the logo stays on the
   page's centre line whether or not Sign in is shown. */
.landing-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--wc-space-4);
    width: var(--landing-column);
    margin: 0 auto;
    padding: var(--wc-space-6) 0 var(--wc-space-2);
}

.landing-top-logo {
    width: clamp(9rem, 20vw, 14rem);
    flex-shrink: 0;
}

.landing-dealer-field {
    max-width: 26rem;
    min-height: 2.25rem;
    padding: 0 var(--wc-space-3);
    border-radius: var(--wc-radius-pill);
    background: var(--wc-surface-raised);
    border: 1px solid color-mix(in srgb, var(--fg) 14%, transparent);
    box-shadow: var(--wc-shadow-sm);
    color: var(--muted-fg);
    display: inline-flex;
    align-items: center;
    gap: var(--wc-space-2);
    cursor: pointer;
    flex-grow: 1;
    margin: 0 var(--wc-space-2);
    transition: border-color var(--wc-duration-fast) var(--wc-ease), box-shadow var(--wc-duration-fast) var(--wc-ease), background-color var(--wc-duration-fast) var(--wc-ease);
}

.landing-dealer-field:hover,
.landing-dealer-field:focus-visible {
    border-color: var(--accent);
    background: var(--wc-surface-overlay);
    box-shadow: var(--wc-shadow-overlay);
    color: var(--fg);
    outline: none;
}

.landing-dealer-field .nav-dealer-label {
    font-weight: 600;
    color: var(--fg);
    font-size: var(--wc-text-sm);
}

.landing-dealer-field .nav-dealer-hint {
    flex-grow: 1;
    font-size: var(--wc-text-xs);
    color: var(--muted-fg);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
}

.landing-dealer-field .kb-mod-k {
    font-size: var(--wc-text-2xs);
    padding: calc(0.1rem * var(--wc-density)) calc(0.35rem * var(--wc-density));
    border-radius: var(--wc-radius-xs);
    background: color-mix(in srgb, var(--fg) 6%, transparent);
    border: 1px solid color-mix(in srgb, var(--fg) 14%, transparent);
    color: var(--muted-fg);
}

.landing-top-actions {
    display: inline-flex;
    align-items: center;
    gap: var(--wc-space-2);
    flex-shrink: 0;
}

.landing-top-actions .landing-top-signin {
    white-space: nowrap;
}

.landing-top-signin {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    padding: var(--wc-space-2) var(--wc-space-4);
    border: 1px solid var(--jungle-600);
    border-radius: var(--border-radius);
    background: var(--bg);
    box-shadow: var(--wc-shadow-card);
    color: var(--jungle-800);
    font-size: 0.95rem;
    font-weight: 700;
    text-decoration: none;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.landing-top-signin:hover,
.landing-top-signin:focus-visible {
    border-color: var(--jungle-800);
    background: var(--jungle-50);
    box-shadow: var(--wc-shadow-raised);
    outline: none;
}

.landing-top-logo img {
    display: block;
    width: 100%;
    height: auto;
}

.landing-top-logo .landing-logo-dark {
    display: none;
}

:root.-dark-theme .landing-top-logo .landing-logo-light {
    display: none;
}

:root.-dark-theme .landing-top-logo .landing-logo-dark {
    display: block;
}

@media (prefers-color-scheme: dark) {
    :root:not(.-no-dark-theme) .landing-top-logo .landing-logo-light {
        display: none;
    }

    :root:not(.-no-dark-theme) .landing-top-logo .landing-logo-dark {
        display: block;
    }
}

.landing-hero {
    background-image: url("/images/wyldcards-jungle-hero.webp");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: center;
    width: var(--landing-column);
    margin: var(--wc-space-5) auto 0;
    min-height: auto;
    padding: var(--landing-hero-pad-block) var(--landing-hero-pad-inline);
    border-radius: var(--wc-radius-2xl);
    box-sizing: border-box;
    /* The headline sizes itself off this width (cqi); see .landing-headline. */
    container-type: inline-size;
}

.landing-hero-copy {
    max-width: 34rem;
    min-width: 0;
    /* The artwork's foliage fills the hero's outer edges and its middle is
       clear paper, so beside the preview the copy hugs the inner edge of its
       column (and the preview the inner edge of its own) to sit on the paper
       rather than on the leaves. Stacked, below, it centres again. */
    justify-self: end;
    text-align: center;
    animation: landing-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.landing-logo {
    display: block;
    width: min(100%, 28rem);
    height: auto;
    margin: 0 0 var(--wc-space-5);
    object-fit: contain;
    object-position: left center;
}

.landing-brand {
    margin: 0;
    font-family: var(--brand-font);
    /* Sized to fit the copy column at both ends: Nunito 800 sets "Wyldcards" at
       roughly 5em wide, so anything larger than this is a word that cannot
       break pushing the hero off the right edge on a phone and breaking itself
       mid-word inside the 28rem column on a desktop. */
    font-size: clamp(2.1rem, 10.5vw, 3.5rem);
    font-weight: 800;
    line-height: 0.92;
    letter-spacing: -0.02em;
    color: var(--landing-ink);
}

.landing-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--wc-space-3) var(--wc-space-4);
    margin-top: var(--wc-space-6);
}

.landing-cta-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--wc-space-2);
    min-height: 2.9rem;
    padding: calc(0.82rem * var(--wc-density)) calc(1.5rem * var(--wc-density));
    border: 1px solid var(--jungle-600);
    border-radius: var(--border-radius);
    background: linear-gradient(180deg, var(--jungle-300), var(--jungle-400));
    box-shadow: var(--wc-shadow-raised), inset 0 1px 0 color-mix(in srgb, var(--jungle-50) 70%, transparent);
    color: var(--jungle-950);
    font-size: 0.95rem;
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
}

/* The arrow nudges forward on hover by transform, not by a wider gap, so the
   button keeps its length and the buttons beside it stay put. */
.landing-cta-primary svg,
.landing-cta-primary > span[aria-hidden="true"] {
    transition: transform 0.2s ease;
}

.landing-cta-primary:hover svg,
.landing-cta-primary:focus-visible svg,
.landing-cta-primary:hover > span[aria-hidden="true"],
.landing-cta-primary:focus-visible > span[aria-hidden="true"] {
    transform: translateX(0.2rem);
}

.landing-cta-primary:hover,
.landing-cta-primary:focus-visible {
    border-color: var(--jungle-700);
    background: linear-gradient(180deg, var(--jungle-200), var(--jungle-300));
    box-shadow: var(--wc-shadow-overlay), inset 0 1px 0 color-mix(in srgb, var(--jungle-50) 70%, transparent);
    color: var(--jungle-950);
    outline: none;
    transform: translateY(-1px);
}

.landing-cta-primary:active {
    transform: translateY(1px);
}

.landing-cta-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.9rem;
    padding: calc(0.72rem * var(--wc-density)) calc(1.25rem * var(--wc-density));
    border: 1px solid var(--jungle-600);
    border-radius: var(--border-radius);
    background: var(--bg);
    box-shadow: var(--wc-shadow-card);
    color: var(--jungle-800);
    font-size: 0.95rem;
    font-weight: 700;
    text-decoration: none;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.landing-cta-secondary:hover,
.landing-cta-secondary:focus-visible {
    border-color: var(--jungle-800);
    background: var(--jungle-50);
    box-shadow: var(--wc-shadow-raised);
    outline: none;
}

.landing-features {
    width: var(--landing-column);
    margin: var(--landing-section-gap) auto 0;
    padding: 0;
    animation: landing-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both;
}

.landing-features-heading {
    margin: 0;
    font-family: var(--brand-font);
    font-size: clamp(1.35rem, 3vw, 1.75rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--landing-ink);
}

.landing-feature-list {
    list-style: none;
    margin: var(--wc-space-6) 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    border-top: 1px solid var(--border);
}

.landing-feature {
    display: flex;
    flex-direction: column;
    gap: var(--wc-space-3);
    padding: var(--wc-space-5);
    border: none;
    border-right: 1px solid var(--border);
    background: transparent;
    box-shadow: none;
    transition: none;
}

.landing-feature:last-child {
    border-right: none;
    padding-right: 0;
}

.landing-feature:first-child {
    padding-left: 0;
}

.landing-feature:hover {
    border-color: var(--border);
    box-shadow: none;
}

.landing-feature-index {
    font-family: var(--brand-font);
    font-size: var(--wc-text-caption);
    font-weight: 800;
    letter-spacing: 0.12em;
    color: var(--muted-fg);
}

.landing-feature-body h3 {
    margin: 0 0 calc(0.4rem * var(--wc-density));
    font-size: var(--wc-text-base);
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--fg);
}

.landing-feature-body p {
    margin: 0;
    font-size: var(--wc-text-sm);
    line-height: 1.55;
    color: var(--muted-fg);
}

.landing-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--wc-space-3);
    width: var(--landing-column);
    margin: auto auto 0;
    padding: var(--landing-section-gap) 0 0;
    animation: landing-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.28s both;
}

.landing-footer-link {
    font-size: var(--wc-text-sm);
    font-weight: 500;
    color: var(--muted-fg);
    text-decoration: none;
    transition: color 0.2s ease;
}

.landing-footer-link:hover,
.landing-footer-link:focus-visible {
    color: var(--landing-ink);
    outline: none;
}

.landing-footer-sep {
    color: var(--border);
    user-select: none;
}

/* What a stack is, in one line under the headline. */
.landing-lede {
    max-width: 30rem;
    margin: var(--wc-space-3) auto 0;
    font-size: var(--wc-text-lg);
    line-height: 1.4;
    color: var(--muted-fg);
}

.landing-headline {
    margin: 0;
    font-family: var(--brand-font);
    /* The headline was sized for "Imagine your stack." (about 8.8em wide in
       Nunito 800). "Artisan ePub, Screenplay & Songbook Studio." is about twice
       that, so it runs to two lines; text-wrap: balance splits it evenly
       rather than leaving one word alone on the second line. Beside the
       preview the copy column is a little under half the hero (capped at
       34rem), so 4.2cqi keeps each line inside it; stacked (below) the column
       is the whole hero. */
    font-size: clamp(1.5rem, 4.2cqi, 3.1rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.06;
    text-wrap: balance;
    color: var(--landing-ink);
}

/* The landing wordmark: a fixed "wyld" and a word that changes, then settles.
   The changing words share one grid cell, so the rotator is as wide as the
   longest word and the line never reflows mid-cycle. The first four words
   each get a 2.6s slot: one pass of landing-word-pass fades a word in, holds
   it and fades it out, and the passes overlap slightly to cross-fade. The last word,
   "cards", fades in after them and stays: the run plays once and stops on it. */
.landing-wordmark {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    gap: 0 0.28em;
    margin: 0 0 var(--wc-space-4);
    font-family: var(--brand-font);
    /* Sized so the longest pairing ("wyld screenplay") sits on one line at
       both ends: the cap keeps it inside the 28rem copy column on a desktop,
       and the vw middle keeps it inside a narrow phone. Past either end the
       rotator wraps and the changing word drops below "wyld", which still
       reads, but the line is meant to be one. */
    font-size: clamp(1.6rem, 7.75vw, 3.2rem);
    font-weight: 800;
    line-height: 0.95;
    letter-spacing: -0.02em;
    color: var(--landing-ink);
}

.landing-wordmark-rotator {
    display: inline-grid;
    align-items: baseline;
    color: color-mix(in srgb, var(--landing-ink) 45%, var(--jungle-500));
}

/* Only "cards", the word the run settles on, takes up room: the passing
   words hang off its left edge. Sized by the longest word, the rotator left
   "cards" floating in the middle of a gap once the run stopped, and the
   line read as two words that had drifted apart. */
.landing-wordmark-rotator {
    position: relative;
    justify-items: start;
}

.landing-wordmark-word:not(:last-child) {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    white-space: nowrap;
}

.landing-wordmark-word:nth-child(2) { animation-delay: 2.6s; }
.landing-wordmark-word:nth-child(3) { animation-delay: 5.2s; }
.landing-wordmark-word:nth-child(4) { animation-delay: 7.8s; }

.landing-preview {
    /* The demo's cards are paper in either theme. */
    --landing-paper: #fff;
    position: relative;
    width: 100%;
    max-width: 32rem;
    justify-self: start;
    min-width: 0;
    padding: var(--wc-space-4);
    border: 1px solid var(--border);
    border-radius: var(--wc-radius-2xl);
    background: color-mix(in srgb, var(--bg) 90%, #8cc5ae);
    box-shadow: 0 30px 80px -35px rgba(12, 18, 34, 0.4);
    text-align: left;
}

.landing-preview-bar,
.landing-preview-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--wc-space-4);
    font-size: var(--wc-text-xs);
}

.landing-preview-bar {
    padding: var(--wc-space-1) var(--wc-space-1) var(--wc-space-4);
    color: var(--landing-ink);
    font-weight: 600;
}

.landing-preview-workspace {
    position: relative;
    display: grid;
    grid-template-columns: 3.9rem minmax(0, 1fr);
    overflow: hidden;
    border: 1px solid #d3e2da;
    border-radius: var(--wc-radius-lg);
    background: #eef5f1;
}

.landing-preview-rail {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(0.6rem * var(--wc-density));
    padding: calc(0.9rem * var(--wc-density)) calc(0.55rem * var(--wc-density));
    border-right: 1px solid #d3e2da;
    background: #e5f0ea;
}

.landing-preview-rail-label {
    margin-bottom: calc(0.15rem * var(--wc-density));
    color: #718195;
    font-size: 0.59rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.landing-preview-thumb,
.landing-preview-add {
    display: grid;
    place-items: center;
    width: 2.15rem;
    height: 1.7rem;
    border: 1px solid #c8dbd1;
    border-radius: 0.3rem;
    color: #718195;
    background: var(--slate-50);
    font-size: 0.62rem;
    font-weight: 700;
}

.landing-preview-count {
    color: #718195;
    font-weight: 500;
}

/* The rail's cards and the demo's buttons are labels, and base.css makes
   every label a padded block; these put them back to the shapes drawn. */
.landing-preview .landing-preview-thumb {
    display: grid;
    padding: 0;
    line-height: 1;
    margin: 0;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.landing-preview-thumb:hover {
    border-color: #6fb89c;
    color: var(--jungle-700);
}

#landing-card-1:checked ~ .landing-preview-rail [for="landing-card-1"],
#landing-card-2:checked ~ .landing-preview-rail [for="landing-card-2"],
#landing-card-3:checked ~ .landing-preview-rail [for="landing-card-3"] {
    border-color: #6fb89c;
    color: var(--jungle-700);
    background: #d6efe4;
    box-shadow: 0 0 0 2px rgba(111, 184, 156, 0.18);
}

#landing-card-1:focus-visible ~ .landing-preview-rail [for="landing-card-1"],
#landing-card-2:focus-visible ~ .landing-preview-rail [for="landing-card-2"],
#landing-card-3:focus-visible ~ .landing-preview-rail [for="landing-card-3"] {
    outline-offset: 2px;
}

.landing-preview-add {
    height: 1.25rem;
    border-style: dashed;
    background: transparent;
    font-size: var(--wc-text-sm);
    font-weight: 400;
}

/* Every card shares one grid cell, so the stack is as tall as its tallest
   card and switching never moves the page. */
.landing-preview-cards {
    display: grid;
    min-width: 0;
    background: var(--slate-50);
}

.landing-preview-card {
    grid-area: 1 / 1;
    min-width: 0;
    padding: clamp(1.25rem, 3vw, 2rem);
    color: #1a2333;
    opacity: 0;
    visibility: hidden;
    transform: translateX(0.75rem);
    transition: opacity 0.25s ease, transform var(--wc-duration-slow) cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear var(--wc-duration-slow);
}

#landing-card-1:checked ~ .landing-preview-cards .landing-preview-card--1,
#landing-card-2:checked ~ .landing-preview-cards .landing-preview-card--2,
#landing-card-3:checked ~ .landing-preview-cards .landing-preview-card--3 {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
}

.landing-preview-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--wc-space-4);
}

.landing-preview-card-header > span {
    color: #8492a2;
    font-size: 0.65rem;
}

.landing-preview-meta {
    margin: 0;
    color: #4c6259;
    line-height: 1.5;
}

.landing-preview-card h2 {
    margin: calc(1.75rem * var(--wc-density)) 0 calc(0.65rem * var(--wc-density));
    font-family: var(--brand-font);
    font-weight: 800;
    font-size: clamp(1.4rem, 2.5vw, 2rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: #1a2333;
}

.landing-preview-field {
    margin: 1.5rem 0;
    padding: 1rem;
    border: 1px solid #d3e2da;
    border-radius: var(--wc-radius-md);
    background: #fff;
}

.landing-preview-field > span {
    color: #4c6259;
    font-size: var(--wc-text-2xs);
    font-weight: 600;
}

.landing-preview-field p {
    margin: 0.5rem 0 0;
    font-size: 0.95rem;
    line-height: 1.7;
}

.landing-preview-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: calc(0.45rem * var(--wc-density));
}

.landing-preview .landing-preview-button {
    display: inline-block;
    line-height: 1.2;
    margin: 0;
    padding: calc(0.4rem * var(--wc-density)) calc(0.65rem * var(--wc-density));
    border: 1px solid #cadfd4;
    border-radius: 0.3rem;
    color: #2f5a4c;
    background: #f2f8f5;
    font-size: var(--wc-text-xs);
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.landing-preview .landing-preview-button:hover {
    border-color: #6fb89c;
    background: #e3f3ec;
}

.landing-preview .landing-preview-button--primary {
    border-color: #1a2333;
    color: var(--slate-50);
    background: #1a2333;
}

.landing-preview .landing-preview-button--primary:hover {
    border-color: #1f3a31;
    background: #1f3a31;
}

/* Card 01: a title page, set centred like the first page of a book. */
.landing-preview-title-page {
    margin: var(--wc-space-5) 0;
    padding: var(--wc-space-5) var(--wc-space-4);
    border: 1px solid var(--jungle-100);
    border-radius: var(--wc-radius-md);
    background: var(--landing-paper);
    text-align: center;
}

.landing-preview-title-page h2 {
    margin: var(--wc-space-2) 0;
    font-family: var(--wc-font-line-serif);
    font-weight: 700;
    letter-spacing: 0;
}

.landing-preview-title-page p {
    margin: 0;
    color: var(--slate-600);
    font-family: var(--wc-font-line-serif);
    font-size: var(--wc-text-sm);
}

.landing-preview-title-page .landing-preview-kicker {
    font-family: inherit;
    font-size: var(--wc-text-2xs);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* Card 02: the chapter's text, set as a manuscript page. */
.landing-preview-manuscript p {
    font-family: var(--wc-font-line-serif);
    text-indent: 1.5em;
}

.landing-preview-manuscript span + p {
    text-indent: 0;
}

/* Card 03: the book as a file. The checkbox is the Export button: ticked,
   the file lights up and the button says it's done. */
.landing-export-file {
    display: flex;
    align-items: center;
    gap: var(--wc-space-3);
    margin: calc(1.25rem * var(--wc-density)) 0 var(--wc-space-5);
    padding: var(--wc-space-3);
    border: 1px solid var(--jungle-100);
    border-radius: var(--wc-radius-md);
    background: var(--landing-paper);
    transition: border-color var(--wc-duration) ease, background var(--wc-duration) ease;
}

.landing-export-cover {
    display: grid;
    flex-shrink: 0;
    place-items: end center;
    width: 2.4rem;
    height: 3.2rem;
    padding-bottom: var(--wc-space-1);
    border-radius: var(--wc-radius-xs);
    background: linear-gradient(160deg, var(--jungle-500), var(--jungle-800));
    box-shadow: var(--wc-shadow-sm);
    color: var(--landing-paper);
    font-size: var(--wc-text-2xs);
    font-weight: 800;
}

.landing-export-name {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: var(--wc-space-1);
    font-size: var(--wc-text-sm);
    line-height: 1.3;
}

.landing-export-name strong {
    overflow-wrap: break-word;
}

.landing-export-name span {
    color: var(--slate-600);
    font-size: var(--wc-text-xs);
}

.landing-export-name .landing-export-done {
    display: none;
    color: var(--jungle-800);
    font-weight: 700;
}

.landing-export-toggle:checked + .landing-export-file {
    border-color: var(--jungle-400);
    background: var(--jungle-50);
}

.landing-export-toggle:checked + .landing-export-file .landing-export-todo {
    display: none;
}

.landing-export-toggle:checked + .landing-export-file .landing-export-done {
    display: inline;
}

.landing-export-again,
.landing-export-toggle:checked ~ .landing-preview-card-actions .landing-export-start {
    display: none;
}

.landing-export-toggle:checked ~ .landing-preview-card-actions .landing-export-again {
    display: inline;
}

.landing-export-toggle:focus-visible ~ .landing-preview-card-actions .landing-preview-button--primary {
    outline-offset: 2px;
}

.landing-preview-script {
    display: block;
    margin-top: var(--wc-space-4);
    padding: calc(0.55rem * var(--wc-density)) calc(0.7rem * var(--wc-density));
    border-radius: var(--wc-radius-sm);
    background: #10231d;
    color: #d5ebe1;
    font-family: var(--wc-font-mono);
    font-size: 0.74rem;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.landing-preview-script span {
    color: #8fdcbc;
}

/* Small drawings in the use-case and how-it-works tiles: they show what
   the headings name, so the page does not need paragraphs to say it. */
.landing-use-art {
    margin-top: calc(1.1rem * var(--wc-density));
    height: 4.5rem;
    border-radius: var(--wc-radius-md);
    overflow: hidden;
}

.landing-use-art--script {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: calc(0.2rem * var(--wc-density));
    padding: calc(0.6rem * var(--wc-density)) calc(0.8rem * var(--wc-density));
    background: rgba(255, 255, 255, 0.72);
    color: #1a2333;
    font-family: "Courier New", Courier, monospace;
    font-size: var(--wc-text-xs);
    line-height: 1.3;
}

.landing-art-scene {
    font-weight: 700;
}

.landing-art-character,
.landing-art-line {
    align-self: center;
}

.landing-art-character {
    margin-top: calc(0.15rem * var(--wc-density));
    font-weight: 700;
    letter-spacing: 0.06em;
}

.landing-use-art--book {
    display: flex;
    align-items: center;
    gap: var(--wc-space-3);
    padding: 0 calc(0.8rem * var(--wc-density));
    background: rgba(255, 255, 255, 0.72);
}

.landing-art-cover {
    flex-shrink: 0;
    width: 2.2rem;
    height: 3rem;
    border-radius: var(--wc-radius-xs);
    background: linear-gradient(160deg, var(--jungle-500), var(--jungle-800));
    box-shadow: var(--wc-shadow-sm);
}

.landing-art-pages {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: calc(0.4rem * var(--wc-density));
}

.landing-art-pages span {
    height: 0.4rem;
    width: 80%;
    border-radius: var(--wc-radius-pill);
    background: var(--slate-300);
}

.landing-art-pages span:nth-child(2) { width: 64%; }
.landing-art-pages span:nth-child(3) { width: 72%; }

.landing-art-badge {
    flex-shrink: 0;
    padding: var(--wc-space-1) var(--wc-space-2);
    border-radius: var(--wc-radius-pill);
    color: var(--jungle-800);
    background: var(--jungle-100);
    font-size: var(--wc-text-2xs);
    font-weight: 800;
    letter-spacing: 0.04em;
}

.landing-use-art--list {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: calc(0.45rem * var(--wc-density));
    padding: 0 calc(0.8rem * var(--wc-density));
    background: rgba(255, 255, 255, 0.72);
}

.landing-use-art--list span {
    display: flex;
    align-items: center;
    gap: var(--wc-space-2);
}

.landing-use-art--list span::before {
    content: "";
    flex-shrink: 0;
    width: 0.8rem;
    height: 0.8rem;
    border: 1.5px solid #8a7462;
    border-radius: var(--wc-radius-xs);
}

.landing-use-art--list span::after {
    content: "";
    height: 0.4rem;
    width: 70%;
    border-radius: var(--wc-radius-pill);
    background: #d9c8ba;
}

.landing-use-art--list span:nth-child(2)::after { width: 52%; }
.landing-use-art--list span:nth-child(3)::after { width: 62%; }

.landing-use-art--list span.is-done::before {
    border-color: #8a7462;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2 5 8.5l4.5-5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat,
        #8a7462;
}

.landing-use-art--list span.is-done::after {
    opacity: 0.55;
}

.landing-step-art {
    margin-top: calc(0.9rem * var(--wc-density));
}

.landing-step-art--stack {
    position: relative;
    width: 5.5rem;
    height: 3.6rem;
}

.landing-step-art--stack span {
    position: absolute;
    inset: 0 auto auto 0;
    width: 4.6rem;
    height: 3.1rem;
    border: 1px solid var(--border);
    border-radius: var(--wc-radius-sm);
    background: var(--bg);
    box-shadow: 0 6px 14px -10px rgba(12, 18, 34, 0.45);
}

.landing-step-art--stack span:nth-child(1) { transform: translate(0.9rem, 0.5rem) rotate(6deg); }
.landing-step-art--stack span:nth-child(2) { transform: translate(0.45rem, 0.25rem) rotate(3deg); }

.landing-step-art--parts {
    display: flex;
    align-items: center;
    gap: var(--wc-space-2);
    height: 3.6rem;
}

.landing-step-field,
.landing-step-button {
    font-size: var(--wc-text-xs);
    font-weight: 600;
    color: var(--muted-fg);
}

.landing-step-field {
    flex: 0 0 6rem;
    padding: 0.45rem 0.6rem;
    border: 1px dashed color-mix(in srgb, var(--muted-fg) 55%, transparent);
    border-radius: var(--wc-radius-sm);
}

.landing-step-button {
    padding: calc(0.45rem * var(--wc-density)) calc(0.7rem * var(--wc-density));
    border: 1px solid var(--border);
    border-radius: var(--wc-radius-pill);
    background: var(--bg);
}

.landing-feature .landing-preview-script {
    display: inline-block;
    max-width: 100%;
    box-sizing: border-box;
}

.landing-possibilities,
.landing-invitation {
    width: var(--landing-column);
    margin: var(--landing-section-gap) auto 0;
}

.landing-use-cases {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--wc-space-5);
    margin-top: var(--wc-space-6);
}

.landing-use-cases article {
    padding: var(--wc-space-5);
    border: 1px solid var(--border);
    border-radius: 0.85rem;
    background: color-mix(in srgb, var(--bg) 85%, #9ccfb9);
}

.landing-use-cases--pairs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.landing-use-cases--pairs article h3 {
    margin-top: 0;
}

.landing-use-icon {
    font-size: var(--wc-text-xs);
    font-weight: 600;
    color: var(--muted-fg);
}

.landing-use-cases h3 {
    margin: var(--wc-space-5) 0 var(--wc-space-2);
    font-size: var(--wc-text-lg);
    color: var(--landing-ink);
}

.landing-use-cases p,
.landing-invitation p {
    margin: 0;
    color: var(--muted-fg);
    font-size: var(--wc-text-sm);
    line-height: 1.65;
}

.landing-invitation {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--wc-space-6);
    padding: var(--wc-space-6);
    border: 1px solid var(--border);
    border-radius: var(--wc-radius-xl);
}

.landing-invitation p {
    max-width: 34rem;
    margin-top: var(--wc-space-3);
}

.landing-invitation .landing-cta-primary {
    flex-shrink: 0;
}

/* Start from a template: every template as a chip, each a link to its preview. */
.landing-templates {
    width: var(--landing-column);
    margin: var(--landing-section-gap) auto 0;
}

.landing-templates-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--wc-space-4);
    flex-wrap: wrap;
}

.landing-templates-all {
    font-size: var(--wc-text-sm);
    font-weight: 600;
    color: var(--accent);
    text-decoration: none;
}

.landing-templates-all:hover {
    text-decoration: underline;
}

.landing-template-chips {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--wc-space-2);
    margin: var(--wc-space-5) 0 0;
    padding: 0;
}

.landing-template-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--wc-space-2);
    padding: var(--wc-space-2) var(--wc-space-4);
    border: 1px solid var(--border);
    border-radius: var(--wc-radius-pill);
    background: var(--bg);
    font-size: var(--wc-text-sm);
    font-weight: 600;
    color: var(--landing-ink);
    text-decoration: none;
    transition: border-color var(--wc-duration) var(--wc-ease), box-shadow var(--wc-duration) var(--wc-ease);
}

.landing-template-chip:hover,
.landing-template-chip:focus-visible {
    border-color: var(--accent);
    box-shadow: var(--wc-shadow-sm);
}

.landing-page a:focus-visible {
    outline-offset: 4px;
}

@media (max-width: 600px) {
    .landing-use-cases {
        grid-template-columns: minmax(0, 1fr);
    }

    .landing-template-chip {
        padding: var(--wc-space-1) var(--wc-space-3);
    }

    .landing-use-cases h3 {
        margin-top: var(--wc-space-3);
    }

    .landing-invitation {
        flex-direction: column;
        align-items: stretch;
        gap: var(--wc-space-5);
        padding: var(--wc-space-5);
    }
}

:root.-dark-theme .landing-hero {
    background-image: none;
    padding-inline: 0;
}

/* The drawings are paper, like the preview's cards; a translucent white
   over the dark tiles only turns them grey. */
:root.-dark-theme .landing-use-art--script,
:root.-dark-theme .landing-use-art--book,
:root.-dark-theme .landing-use-art--list {
    background: #eef2f7;
}

:root.-dark-theme .landing-cta-primary:hover,
:root.-dark-theme .landing-cta-primary:focus-visible {
    background: var(--jungle-200);
    color: #0c1f1a;
    box-shadow: 0 14px 32px -16px rgba(111, 202, 169, 0.45);
}

:root.-dark-theme .landing-cta-secondary,
:root.-dark-theme .landing-top-signin {
    border-color: var(--jungle-400);
    color: var(--jungle-200);
}

:root.-dark-theme .landing-cta-secondary:hover,
:root.-dark-theme .landing-cta-secondary:focus-visible,
:root.-dark-theme .landing-top-signin:hover,
:root.-dark-theme .landing-top-signin:focus-visible {
    border-color: var(--jungle-300);
    background: color-mix(in srgb, var(--jungle-400) 14%, var(--bg));
}

:root.-dark-theme .landing-cta-secondary:hover,
:root.-dark-theme .landing-cta-secondary:focus-visible,
:root.-dark-theme .landing-footer-link:hover,
:root.-dark-theme .landing-footer-link:focus-visible {
    color: var(--slate-200);
}
@media (prefers-color-scheme: dark) {
    :root:not(.-no-dark-theme) .landing-hero {
        background-image: none;
        padding-inline: 0;
    }
}
@media (prefers-color-scheme: dark) {
    :root:not(.-no-dark-theme) .landing-use-art--script,
    :root:not(.-no-dark-theme) .landing-use-art--book,
    :root:not(.-no-dark-theme) .landing-use-art--list {
        background: #eef2f7;
    }
}
@media (prefers-color-scheme: dark) {
    :root:not(.-no-dark-theme) .landing-cta-primary:hover,
    :root:not(.-no-dark-theme) .landing-cta-primary:focus-visible {
        background: var(--jungle-200);
        color: #0c1f1a;
        box-shadow: 0 14px 32px -16px rgba(111, 202, 169, 0.45);
    }

    :root:not(.-no-dark-theme) .landing-cta-secondary,
    :root:not(.-no-dark-theme) .landing-top-signin {
        border-color: var(--jungle-400);
        color: var(--jungle-200);
    }

    :root:not(.-no-dark-theme) .landing-cta-secondary:hover,
    :root:not(.-no-dark-theme) .landing-cta-secondary:focus-visible,
    :root:not(.-no-dark-theme) .landing-top-signin:hover,
    :root:not(.-no-dark-theme) .landing-top-signin:focus-visible {
        border-color: var(--jungle-300);
        background: color-mix(in srgb, var(--jungle-400) 14%, var(--bg));
    }

    :root:not(.-no-dark-theme) .landing-cta-secondary:hover,
    :root:not(.-no-dark-theme) .landing-cta-secondary:focus-visible,
    :root:not(.-no-dark-theme) .landing-footer-link:hover,
    :root:not(.-no-dark-theme) .landing-footer-link:focus-visible {
        color: var(--slate-200);
    }
}

@media (max-width: 900px) {
    .landing-hero {
        grid-template-columns: minmax(0, 1fr);
        min-height: auto;
        gap: var(--wc-space-6);
        text-align: center;
    }

    .landing-hero-copy {
        width: 100%;
        max-width: 34rem;
        margin: 0 auto;
    }

    .landing-hero-copy,
    .landing-preview {
        justify-self: center;
    }

    .landing-headline {
        font-size: clamp(1.5rem, 8.8cqi, 3.1rem);
    }

                    
        .landing-feature-list {
        grid-template-columns: 1fr;
        text-align: left;
    }

    .landing-feature {
        flex-direction: row;
        align-items: flex-start;
        gap: var(--wc-space-4);
        padding: var(--wc-space-5) 0;
        border-right: none;
        border-bottom: 1px solid var(--border);
    }

    .landing-feature:last-child {
        border-bottom: none;
    }
}

@media (max-width: 480px) {
    .landing-actions {
        flex-direction: column;
        width: 100%;
    }

    .landing-cta-primary,
    .landing-cta-secondary {
        width: 100%;
    }

        .landing-preview-workspace {
        grid-template-columns: 3.25rem minmax(0, 1fr);
    }

    .landing-preview-rail {
        padding-inline: calc(0.35rem * var(--wc-density));
    }
}
@media (prefers-reduced-motion: reduce) {
    .landing-hero-copy,
    .landing-features,
    .landing-footer {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}
@media (prefers-reduced-motion: reduce) {
    .landing-preview-card,
    .landing-export-file {
        transform: none;
        transition: none;
    }

}

/* Compact top layout rules */
.top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--wc-space-3);
    margin-bottom: var(--wc-space-2);
}

.top-bar nav[aria-label="Breadcrumb"] {
    margin: 0 !important;
}
.landing-notice { max-width: var(--wc-width-page); margin: 0 auto var(--wc-space-4); }

/* Floating Bottom Navigation & Telemetry HUD for Landing */
.wyldcards-landing-bottom-hud {
    position: fixed;
    bottom: calc(var(--wc-space-4) + env(safe-area-inset-bottom, 0px));
    left: 50%;
    transform: translateX(-50%);
    z-index: var(--wc-z-popover);
    display: inline-flex;
    align-items: center;
    gap: var(--wc-space-3);
    padding: var(--wc-space-1) calc(0.85rem * var(--wc-density));
    background: var(--wc-hud-glass-bg);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border: 1px solid var(--wc-hud-glass-border);
    border-radius: var(--wc-radius-pill);
    box-shadow: var(--wc-shadow-overlay);
    color: var(--fg);
    pointer-events: auto;
    max-width: calc(100vw - var(--wc-space-4));
    transition: opacity var(--wc-duration) var(--wc-ease), transform var(--wc-duration) var(--wc-ease), border-color var(--wc-duration) var(--wc-ease), box-shadow var(--wc-duration) var(--wc-ease);
}

.wyldcards-landing-bottom-hud:hover {
    border-color: color-mix(in srgb, var(--accent) 35%, transparent);
    box-shadow: var(--wc-shadow-overlay), var(--wc-hud-glow);
}

.wyldcards-landing-bottom-hud .wyldcards-bottom-hud-telemetry {
    display: inline-flex;
    align-items: center;
    gap: var(--wc-space-1);
    color: var(--muted-fg);
    font-size: var(--wc-text-2xs);
    white-space: nowrap;
}

.wyldcards-landing-bottom-hud .wyldcards-bottom-hud-sep {
    color: var(--muted-fg);
    opacity: 0.6;
}

.wyldcards-landing-bottom-hud .wyldcards-bottom-hud-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.85rem;
    min-height: 1.85rem;
    padding: 0 var(--wc-space-1);
    border-radius: var(--wc-radius-pill);
    background: transparent;
    border: 1px solid transparent;
    color: var(--muted-fg);
    cursor: pointer;
    text-decoration: none;
    font-size: var(--wc-text-xs);
    transition: color var(--wc-duration-fast) var(--wc-ease), background-color var(--wc-duration-fast) var(--wc-ease), transform var(--wc-duration-fast) var(--wc-ease);
}

.wyldcards-landing-bottom-hud .wyldcards-bottom-hud-btn:hover,
.wyldcards-landing-bottom-hud .wyldcards-bottom-hud-btn:focus-visible {
    color: var(--fg);
    background: color-mix(in srgb, var(--fg) 8%, transparent);
    transform: translateY(-1px);
}

.wyldcards-landing-bottom-hud .wyldcards-bottom-hud-kbd {
    padding: calc(0.1rem * var(--wc-density)) calc(0.35rem * var(--wc-density));
    font-size: var(--wc-text-2xs);
    font-weight: 600;
    border-radius: var(--wc-radius-xs);
    background: var(--wc-hud-kbd-bg);
    border: 1px solid var(--wc-hud-kbd-border);
    color: var(--accent);
}

.wyldcards-landing-bottom-hud .wyldcards-hud-accent-btn {
    color: var(--accent);
    font-weight: 600;
}