/* ============================================================
   style-dev-tools.css - Create / Ember hub  (A368+)
   Uses --jv-* tokens from tokens.css / style-shared.css.
   Character theme: Ember  (--jv-ember, --jv-ember-ink, --jv-ember-soft)
   ============================================================ */

body {
    font-family: var(--jv-font-body, 'Inter', sans-serif);
    background: var(--jv-bg);
    color: var(--jv-text);
    overflow-x: hidden;
}

/* Active nav chip */
.nav-link[data-page~="dev-tools"] {
    background: var(--jv-ember-soft);
    color: var(--jv-ember-ink);
    border: 1px solid rgba(242,99,122,0.35);
}
.nav-link[data-page~="dev-tools"]:hover {
    background: rgba(242,99,122,0.22);
    color: var(--jv-ember);
}

/* ── Hero ── */
.page-hero {
    padding: 32px 28px 28px;
    text-align: center;
    background: var(--jv-bg);
    position: relative;
    overflow: hidden;
}

.ember-create-hero {
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(160px, 0.5fr);
    align-items: center;
    gap: clamp(24px, 5vw, 48px);
    padding: clamp(32px, 5vw, 56px) clamp(18px, 6vw, 54px) clamp(32px, 5vw, 48px);
    text-align: left;
    background:
        linear-gradient(135deg, rgba(242,99,122,0.18), rgba(46,181,165,0.06) 38%, transparent 70%),
        radial-gradient(circle at 82% 22%, rgba(242,99,122,0.10), transparent 34%),
        var(--jv-bg);
    position: relative;
}

/* Decorative blob shapes */
.ember-create-hero::after {
    content: '';
    position: absolute;
    width: 340px;
    height: 340px;
    right: -60px;
    top: 40px;
    border-radius: 62% 38% 54% 46% / 48% 52% 48% 52%;
    background: radial-gradient(ellipse, var(--jv-ember-soft) 0%, transparent 70%);
    pointer-events: none;
    animation: blob-drift 12s ease-in-out infinite alternate;
}
.ember-create-hero::before {
    content: '';
    position: absolute;
    width: 240px;
    height: 240px;
    left: -40px;
    bottom: 60px;
    border-radius: 44% 56% 44% 56% / 52% 48% 52% 48%;
    background: radial-gradient(ellipse, rgba(46,181,165,0.10) 0%, transparent 70%);
    pointer-events: none;
    animation: blob-drift 16s ease-in-out infinite alternate-reverse;
}
@keyframes blob-drift {
    0%   { transform: translate(0, 0) scale(1); }
    100% { transform: translate(20px, -20px) scale(1.08); }
}

.ember-hero-copy,
.ember-hero-mascot {
    position: relative;
    z-index: 1;
}
.ember-hero-copy .hero-sub {
    margin-left: 0;
    margin-right: 0;
    max-width: 650px;
}
.ember-hero-copy .hero-badges {
    justify-content: flex-start;
}
.ember-hero-mascot {
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.ember-hero-mascot img {
    width: min(220px, 82%);
    max-height: 280px;
    object-fit: contain;
    filter: drop-shadow(0 28px 42px rgba(0,0,0,0.35));
    transform: translateY(8px);
}
.ember-speech {
    width: min(360px, 100%);
    margin-top: -18px;
    padding: 15px 16px;
    border: 1px solid var(--jv-line);
    border-radius: 18px;
    background: var(--jv-surface);
    box-shadow: var(--jv-shadow-2);
}
.ember-speech strong,
.ember-speech span { display: block; }
.ember-speech strong {
    color: var(--jv-text);
    font-family: var(--jv-font-display);
    font-size: 1.05rem;
    margin-bottom: 4px;
}
.ember-speech span {
    color: var(--jv-text-muted);
    font-size: 0.88rem;
    line-height: 1.5;
}

.hero-eyebrow {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--jv-ember-ink);
    border: 1.5px solid rgba(242,99,122,0.35);
    border-radius: var(--jv-radius-pill);
    padding: 5px 16px;
    display: inline-block;
    margin-bottom: 20px;
}
.hero-title {
    font-family: var(--jv-font-display);
    font-size: clamp(2.6rem, 7vw, 4.8rem);
    font-weight: 700;
    color: var(--jv-text);
    line-height: 1.05;
    margin-bottom: 18px;
}
.hero-title .accent { color: var(--jv-ember); }
.hero-sub {
    font-size: clamp(0.95rem, 2vw, 1.1rem);
    color: var(--jv-text-muted);
    line-height: 1.75;
    max-width: 560px;
    margin: 0 auto 32px;
}
.hero-badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 36px;
}
.hero-badge {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: var(--jv-radius-pill);
    color: var(--jv-text-muted);
    background: var(--jv-surface);
    border: 1px solid var(--jv-line);
}
.hero-stats {
    display: flex;
    gap: 40px;
    justify-content: center;
    flex-wrap: wrap;
}
.hero-stat { text-align: center; }
.hero-stat-num {
    font-family: var(--jv-font-display);
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--jv-ember);
    line-height: 1;
}
.hero-stat-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--jv-text-muted);
    margin-top: 4px;
}

/* Jump chips (inline style block updated too) */
.hero-jump-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    align-items: center;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--jv-line);
}
.hero-jump-label {
    font-size: 0.72rem;
    color: var(--jv-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
    flex-shrink: 0;
    margin-right: 4px;
}
.hero-jump-chip {
    background: var(--jv-surface);
    border: 1px solid var(--jv-line);
    border-radius: var(--jv-radius-pill);
    padding: 7px 16px;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--jv-text-muted);
    cursor: pointer;
    transition: background var(--jv-ease), border-color var(--jv-ease), color var(--jv-ease);
    font-family: inherit;
    line-height: 1;
}
.hero-jump-chip:hover,
.hero-jump-chip:focus-visible {
    background: var(--jv-ember-soft);
    border-color: rgba(242,99,122,0.45);
    color: var(--jv-ember-ink);
    outline: none;
}

/* ── Creative Paths ── */
.start-paths {
    max-width: 1200px;
    margin: clamp(28px, 5vw, 44px) auto 0;
    padding: clamp(24px, 5vw, 36px);
    border: 1px solid var(--jv-line);
    border-radius: var(--jv-radius-lg);
    background: var(--jv-surface);
}
.start-paths-head {
    max-width: 780px;
    margin-bottom: 24px;
}
.start-paths-head h2 {
    font-family: var(--jv-font-display);
    font-size: clamp(1.6rem, 3vw, 2.35rem);
    line-height: 1.1;
    color: var(--jv-text);
    margin: 6px 0 8px;
}
.start-paths-head p {
    color: var(--jv-text-muted);
    font-size: 0.94rem;
    line-height: 1.65;
}
.purpose-eyebrow {
    color: var(--jv-ember-ink);
    font-weight: 800;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}
.start-path-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}
.start-path-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 220px;
    padding: 20px;
    border-radius: var(--jv-radius-md);
    border: 1px solid var(--jv-line);
    background: var(--jv-surface-2);
    color: var(--jv-text);
    text-decoration: none;
    transition: transform var(--jv-ease), border-color var(--jv-ease), box-shadow var(--jv-ease);
    border-top: 4px solid var(--jv-ember);
}
.start-path-card.path-artist { border-top-color: var(--jv-lumo); }
.start-path-card.path-maker  { border-top-color: var(--jv-pip); }
.start-path-card.path-sound  { border-top-color: var(--jv-echo); }
.start-path-card:hover {
    transform: translateY(-4px);
    border-color: var(--jv-ember);
    box-shadow: var(--jv-shadow-2);
}
.start-path-card.path-artist:hover { border-color: var(--jv-lumo); }
.start-path-card.path-maker:hover  { border-color: var(--jv-pip); }
.start-path-card.path-sound:hover  { border-color: var(--jv-echo); }
.start-path-label {
    color: var(--jv-ember-ink);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.path-artist .start-path-label { color: var(--jv-lumo-ink); }
.path-maker  .start-path-label { color: var(--jv-pip-ink); }
.path-sound  .start-path-label { color: var(--jv-echo-ink); }
.start-path-card h3 {
    color: var(--jv-text);
    font-family: var(--jv-font-display);
    font-size: 1.2rem;
    line-height: 1.15;
    margin: 0;
}
.start-path-card p {
    color: var(--jv-text-muted);
    font-size: 0.84rem;
    line-height: 1.55;
    margin: 0;
}
.start-path-flow {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: auto;
}
.start-path-flow span {
    font-family: var(--jv-font-mono, 'JetBrains Mono', monospace);
    font-size: 0.66rem;
    border-radius: var(--jv-radius-pill);
    padding: 5px 8px;
    background: var(--jv-surface);
    color: var(--jv-text-muted);
    border: 1px solid var(--jv-line);
}

/* ── Tools Section ── */
.tools-section {
    padding: 80px 28px;
    background: var(--jv-bg);
}
.section-eyebrow {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--jv-ember-ink);
    background: var(--jv-ember-soft);
    border: 1px solid rgba(242,99,122,0.25);
    border-radius: var(--jv-radius-pill);
    padding: 4px 14px;
    display: inline-block;
    margin-bottom: 14px;
}
.section-title {
    font-family: var(--jv-font-display);
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    font-weight: 700;
    color: var(--jv-text);
    line-height: 1.1;
}
.section-title--on-dark { color: var(--jv-text); }
.section-sub {
    font-size: 0.95rem;
    color: var(--jv-text-muted);
    line-height: 1.65;
    max-width: 500px;
    margin: 10px auto 0;
}
.section-header {
    text-align: center;
    margin: 0 auto 34px;
    max-width: 760px;
}

/* ── In-hero search + filters ── */
.hero-search-wrap {
    margin: 20px 0 14px;
    max-width: 540px;
}
.hero-filter-chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 4px;
}
/* ── Search ── */
.tool-search-wrap {
    max-width: 920px;
    margin: 0 auto 24px;
    padding: 0 12px;
}
#toolSearch {
    width: 100%;
    padding: 14px 16px;
    border-radius: var(--jv-radius-md);
    border: 1.5px solid var(--jv-line);
    background: var(--jv-surface);
    color: var(--jv-text);
    font-size: 0.95rem;
    font-family: inherit;
    outline: none;
    transition: border-color var(--jv-ease), box-shadow var(--jv-ease);
}
#toolSearch:focus {
    border-color: var(--jv-ember);
    box-shadow: 0 0 0 3px var(--jv-ember-soft);
}
#toolSearch::placeholder { color: var(--jv-text-muted); }
.search-results {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: var(--jv-radius-sm);
    background: var(--jv-ember-soft);
    border: 1px solid rgba(242,99,122,0.25);
    color: var(--jv-text-muted);
    font-size: 0.85rem;
}

/* ── Filter pills ── */
.tool-filters {
    max-width: 1200px;
    margin: 0 auto 40px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}
.filter-btn {
    font-size: 0.82rem;
    font-weight: 700;
    padding: 9px 18px;
    border-radius: var(--jv-radius-pill);
    border: 1.5px solid var(--jv-line);
    background: var(--jv-surface);
    color: var(--jv-text-muted);
    cursor: pointer;
    transition: background var(--jv-ease), border-color var(--jv-ease), color var(--jv-ease), transform var(--jv-ease);
    -webkit-tap-highlight-color: transparent;
}
.filter-btn:hover {
    background: var(--jv-ember-soft);
    border-color: rgba(242,99,122,0.45);
    color: var(--jv-ember-ink);
    transform: translateY(-2px);
}
.filter-btn.active {
    background: var(--jv-ember);
    border-color: var(--jv-ember);
    color: #fff;
    box-shadow: 0 4px 16px rgba(242,99,122,0.25);
}

/* ── Category sections ── */
.tool-category { margin-bottom: 56px; }
.category-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 28px;
    padding-bottom: 14px;
    border-bottom: 2px solid var(--jv-line);
}
.category-emoji { font-size: 1.8rem; }
.category-label {
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: var(--jv-radius-pill);
    background: var(--jv-ember-soft);
    color: var(--jv-ember-ink);
}
/* Per-category accent colors */
[data-category="audio pipeline"] .category-label {
    background: var(--jv-lumo-soft);
    color: var(--jv-lumo-ink);
}
[data-category="level & world data"] .category-label {
    background: var(--jv-pip-soft);
    color: var(--jv-pip-ink);
}
[data-category="design docs & narrative"] .category-label {
    background: var(--jv-stardust-soft);
    color: var(--jv-stardust-ink);
}
[data-category="prototype, debug & ship"] .category-label {
    background: rgba(46,181,165,0.14);
    color: var(--jv-echo-ink);
}
.category-title {
    font-family: var(--jv-font-display);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--jv-text);
}
.category-count {
    font-size: 0.8rem;
    color: var(--jv-text-muted);
    margin-left: auto;
}
.tool-type {
    color: var(--jv-ember-ink);
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}
[data-category="audio pipeline"] .tool-type { color: var(--jv-lumo-ink); }
[data-category="level & world data"] .tool-type { color: var(--jv-pip-ink); }
[data-category="design docs & narrative"] .tool-type { color: var(--jv-stardust-ink); }
[data-category="prototype, debug & ship"] .tool-type { color: var(--jv-echo-ink); }

/* ── Tool cards ── */
.tools-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 20px;
}
.tool-card {
    background: var(--jv-surface);
    border: 1px solid var(--jv-line);
    border-radius: var(--jv-radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.22s, box-shadow 0.22s, border-color 0.22s;
    animation: tool-card-enter 0.5s ease-out backwards;
    position: relative;
    border-left: 4px solid var(--jv-ember);
}
[data-category="audio pipeline"] .tool-card { border-left-color: var(--jv-lumo); }
[data-category="level & world data"] .tool-card { border-left-color: var(--jv-pip); }
[data-category="design docs & narrative"] .tool-card { border-left-color: var(--jv-stardust); }
[data-category="prototype, debug & ship"] .tool-card { border-left-color: var(--jv-echo); }

@keyframes tool-card-enter {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
.tool-card:nth-child(1) { animation-delay: 0.05s; }
.tool-card:nth-child(2) { animation-delay: 0.10s; }
.tool-card:nth-child(3) { animation-delay: 0.15s; }
.tool-card:nth-child(4) { animation-delay: 0.20s; }
.tool-card:nth-child(5) { animation-delay: 0.25s; }
.tool-card:nth-child(6) { animation-delay: 0.30s; }
.tool-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--jv-shadow-2);
    border-color: var(--jv-ember);
}
[data-category="audio pipeline"] .tool-card:hover { border-color: var(--jv-lumo); }
[data-category="level & world data"] .tool-card:hover { border-color: var(--jv-pip); }
[data-category="design docs & narrative"] .tool-card:hover { border-color: var(--jv-stardust); }
[data-category="prototype, debug & ship"] .tool-card:hover { border-color: var(--jv-echo); }

.tool-thumb {
    height: 160px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--jv-surface-2);
}
.tool-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.tool-card:hover .tool-thumb img { transform: scale(1.06); }
.tool-emoji {
    font-size: 4rem;
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 4px 16px rgba(0,0,0,0.2));
    animation: emoji-float 3s ease-in-out infinite;
}
@keyframes emoji-float {
    0%, 100% { transform: translateY(0) scale(1); }
    50%       { transform: translateY(-8px) scale(1.05); }
}
.tool-card:hover .tool-emoji { animation: none; }
.tool-year {
    position: absolute;
    top: 12px;
    left: 14px;
    z-index: 2;
    font-family: var(--jv-font-mono, 'JetBrains Mono', monospace);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--jv-text-muted);
}
.tool-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 3;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    padding: 4px 10px;
    border-radius: var(--jv-radius-sm);
    text-transform: uppercase;
}
.tool-badge.new {
    background: var(--jv-pip-soft);
    color: var(--jv-pip-ink);
    border: 1px solid rgba(122,199,79,0.3);
}
.tool-badge.popular {
    background: var(--jv-ember-soft);
    color: var(--jv-ember-ink);
    border: 1px solid rgba(242,99,122,0.3);
}
.tool-body {
    padding: 20px 22px 24px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.tool-title {
    font-family: var(--jv-font-display);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--jv-text);
    line-height: 1.2;
}
.tool-desc {
    font-size: 0.85rem;
    color: var(--jv-text-muted);
    line-height: 1.6;
    flex: 1;
}
.tool-merged {
    font-size: 0.72rem;
    line-height: 1.5;
    color: var(--jv-text-muted);
    background: var(--jv-surface-2);
    border: 1px dashed var(--jv-line);
    border-left: 3px solid var(--jv-echo);
    border-radius: var(--jv-radius-sm);
    padding: 6px 10px;
    margin-top: 2px;
}
.tool-merged b {
    color: var(--jv-text);
    font-weight: 800;
}
.tool-make {
    font-size: 0.78rem;
    line-height: 1.55;
    color: var(--jv-text-muted);
    border-left: 3px solid var(--jv-ember, #f2637a);
    padding: 2px 0 2px 10px;
    margin-top: 6px;
}
.tool-make b {
    color: var(--jv-text);
    font-weight: 800;
}
.tool-make a {
    color: var(--jv-echo-ink, #2eb5a5);
    font-weight: 700;
    text-decoration: underline;
}
.tool-tags {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    margin-top: 4px;
}
.tool-tag {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: var(--jv-radius-pill);
    color: var(--jv-text-muted);
    background: var(--jv-surface-2);
    border: 1px solid var(--jv-line);
}
.tool-outputs {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    margin-top: 6px;
}
.tool-output-badge {
    font-family: var(--jv-font-mono, 'JetBrains Mono', monospace);
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 3px 7px;
    border-radius: var(--jv-radius-pill);
    color: var(--jv-echo-ink);
    background: rgba(46,181,165,0.10);
    border: 1px solid rgba(46,181,165,0.20);
}
.tool-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    font-weight: 800;
    padding: 10px 18px;
    border-radius: var(--jv-radius-sm);
    margin-top: 10px;
    align-self: flex-start;
    transition: filter var(--jv-ease), transform var(--jv-ease);
    color: var(--jv-ember-ink);
    background: var(--jv-ember-soft);
    border: 1px solid rgba(242,99,122,0.25);
    text-decoration: none;
}
.tool-cta:hover {
    filter: brightness(1.08);
    transform: translateY(-2px);
}

/* ── Coming soon ── */
.tool-card.coming-soon {
    opacity: 0.55;
    cursor: default;
}
.tool-card.coming-soon:hover {
    transform: translateY(0);
    box-shadow: none;
}
.coming-soon-badge {
    position: absolute;
    top: 14px;
    right: 14px;
    background: var(--jv-surface-2);
    color: var(--jv-text-muted);
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    padding: 5px 11px;
    border-radius: var(--jv-radius-sm);
    text-transform: uppercase;
    border: 1px solid var(--jv-line);
    z-index: 3;
}

/* ── Reference shelf ── */
.reference-library {
    max-width: 1200px;
    margin: 70px auto 0;
    padding: 36px;
    border-radius: var(--jv-radius-lg);
    border: 1px solid var(--jv-line);
    background: var(--jv-surface);
}
.reference-library > div:first-child {
    text-align: center;
    margin-bottom: 32px;
}
.reference-cols {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
}
.reference-col-head {
    font-family: var(--jv-font-display);
    font-size: 1rem;
    font-weight: 700;
    color: var(--jv-text);
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--jv-line);
}
.reference-col-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.reference-pill {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 6px 12px;
    border-radius: var(--jv-radius-sm);
    border: 1px solid var(--jv-line);
    background: var(--jv-surface-2);
    color: var(--jv-text-muted);
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    transition: background var(--jv-ease), border-color var(--jv-ease), color var(--jv-ease);
}
.reference-pill:hover {
    background: var(--jv-ember-soft);
    border-color: rgba(242,99,122,0.35);
    color: var(--jv-ember-ink);
}

/* ── CTA strip ── */
.cta-strip {
    padding: 80px 28px;
    text-align: center;
    background: var(--jv-surface);
    border-top: 1px solid var(--jv-line);
    position: relative;
    overflow: hidden;
}
.cta-strip::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 80% 0%, var(--jv-ember-soft) 0%, transparent 60%);
    pointer-events: none;
}
.cta-strip h2 {
    font-family: var(--jv-font-display);
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    font-weight: 700;
    color: var(--jv-text);
    margin-bottom: 14px;
    position: relative;
    z-index: 1;
}
.cta-strip p {
    font-size: 1rem;
    color: var(--jv-text-muted);
    line-height: 1.7;
    max-width: 480px;
    margin: 0 auto 20px;
    position: relative;
    z-index: 1;
}
.cta-stats-row {
    display: flex;
    gap: 24px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 28px;
    position: relative;
    z-index: 1;
}
.cta-stat-chip {
    font-size: 0.78rem;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: var(--jv-radius-pill);
    background: var(--jv-ember-soft);
    color: var(--jv-ember-ink);
    border: 1px solid rgba(242,99,122,0.25);
}
.cta-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}
.btn-primary {
    background: var(--jv-ember);
    color: #fff;
    font-weight: 700;
    border-radius: var(--jv-radius-md);
    padding: 14px 32px;
    font-size: 1rem;
    box-shadow: 0 4px 0 var(--jv-ember-ink);
    transition: filter var(--jv-ease), transform var(--jv-ease), box-shadow var(--jv-ease);
    border: none;
    cursor: pointer;
    text-decoration: none;
}
.btn-primary:hover {
    filter: brightness(1.08);
    transform: translateY(-2px);
    box-shadow: 0 6px 0 var(--jv-ember-ink);
}
/* Legacy alias kept for inline usage in HTML */
.btn-purple {
    background: var(--jv-ember);
    color: #fff;
    font-weight: 700;
    border-radius: var(--jv-radius-md);
    padding: 14px 32px;
    font-size: 1rem;
    box-shadow: 0 4px 0 var(--jv-ember-ink);
    transition: filter var(--jv-ease), transform var(--jv-ease), box-shadow var(--jv-ease);
    border: none;
    cursor: pointer;
    text-decoration: none;
}
.btn-purple:hover {
    filter: brightness(1.08);
    transform: translateY(-2px);
}
.btn-outline {
    background: var(--jv-surface-2);
    color: var(--jv-text);
    font-weight: 700;
    border-radius: var(--jv-radius-md);
    padding: 14px 32px;
    font-size: 1rem;
    border: 1.5px solid var(--jv-line);
    transition: background var(--jv-ease), border-color var(--jv-ease);
    cursor: pointer;
    text-decoration: none;
}
.btn-outline:hover {
    background: var(--jv-surface);
    border-color: var(--jv-ember);
}

/* ── Reveal animation ── */
.reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.45s ease-out, transform 0.45s ease-out;
}
.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ── Light theme overrides ── */
[data-theme="light"] .ember-create-hero {
    background:
        linear-gradient(135deg, rgba(242,99,122,0.10), rgba(46,181,165,0.04) 38%, transparent 70%),
        radial-gradient(circle at 82% 22%, rgba(242,99,122,0.06), transparent 34%),
        var(--jv-bg);
}
[data-theme="light"] .start-paths {
    background: #fff;
}
[data-theme="light"] .tool-card {
    background: #fff;
}
[data-theme="light"] .tool-thumb {
    background: var(--jv-surface-2);
}
[data-theme="light"] .reference-library {
    background: #fff;
}
[data-theme="light"] .cta-strip {
    background: var(--jv-surface-2);
}
[data-theme="dark"] .tools-section .section-title,
[data-theme="dark"] .reference-library .section-title { color: var(--jv-text); }

/* ── Responsive ── */
@media (max-width: 900px) {
    .ember-create-hero {
        grid-template-columns: minmax(0, 1fr);
        text-align: center;
        min-height: auto;
    }
    .ember-hero-mascot { display: none; }
    .hero-search-wrap { max-width: 100%; }
    .hero-filter-chips { justify-content: center; }
    .ember-hero-copy .hero-sub { margin-left: auto; margin-right: auto; }
    .start-path-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .reference-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .start-paths { margin-left: 16px; margin-right: 16px; padding: 20px 14px; }
    .start-path-grid { grid-template-columns: minmax(0, 1fr); }
    .start-path-card { min-height: 0; }
    .tools-grid { grid-template-columns: minmax(0, 1fr); }
    .tools-section { padding: 52px 16px; }
    .page-hero { padding: 64px 16px 52px; }
    .cta-buttons { flex-direction: column; align-items: center; }
    .btn-primary, .btn-purple, .btn-outline { width: 100%; max-width: 280px; text-align: center; }
    .hero-stats { gap: 24px; }
    .category-header { align-items: flex-start; flex-wrap: wrap; }
    .category-count { margin-left: 0; width: 100%; }
    .reference-library { padding: 28px 16px; }
    .reference-cols { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}

/* Ember’s practical guide: turn the hero mascot into a first success */
.ember-steps{list-style:none;padding:0;margin:11px 0 10px;display:grid;gap:6px;counter-reset:ember-step;}
.ember-steps li{display:flex;align-items:flex-start;gap:8px;color:var(--jv-text-muted);font-size:.76rem;line-height:1.4;}
.ember-steps li::before{counter-increment:ember-step;content:counter(ember-step);display:grid;place-items:center;flex:0 0 19px;height:19px;border-radius:50%;background:var(--jv-ember-soft);color:var(--jv-ember-ink);font-size:.65rem;font-weight:900;}
.ember-steps b{color:var(--jv-text);}
.ember-starters{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;}
.ember-starters a{font-size:.7rem;font-weight:800;color:var(--jv-ember-ink);background:var(--jv-ember-soft);border:1px solid rgba(242,99,122,.22);border-radius:var(--jv-radius-pill);padding:6px 9px;text-decoration:none;}
.ember-starters a:hover{filter:brightness(1.05);transform:translateY(-1px);}
@media(max-width:700px){.ember-speech{margin:4px auto 0;text-align:left;}.ember-starters a{font-size:.68rem;}}
.ember-starters a{flex:1 1 auto;text-align:center;}

/* ── Connected mascot hand-offs ─────────────────────────────── */
.journey-future{margin:18px auto 0;max-width:620px;text-align:center;color:var(--jv-text-muted);font-size:.9rem;line-height:1.5}
.journey-future span{color:#f5a623;margin-right:5px}
.hub-handoff{display:flex;align-items:center;gap:14px;max-width:1050px;margin:22px auto;padding:14px 18px;border:1px solid var(--jv-line);border-radius:18px;background:linear-gradient(110deg,rgba(255,255,255,.96),rgba(249,247,255,.9));box-shadow:0 8px 24px rgba(47,36,49,.06)}
.hub-handoff-figure{display:grid;place-items:center;flex:0 0 52px;width:52px;height:52px;border-radius:16px;background:#fff;overflow:hidden}
.hub-handoff-figure img{display:block;width:48px;height:48px;object-fit:contain}.hub-handoff-figure--duo{display:flex;align-items:center;justify-content:center;gap:0}.hub-handoff-figure--duo img{width:38px;height:38px}.hub-handoff-figure--duo img+img{margin-left:-10px}
.hub-handoff>div:nth-child(2){display:flex;flex:1;flex-direction:column;gap:3px;min-width:0}
.hub-handoff strong{color:var(--jv-text);font-size:.88rem;line-height:1.25}
.hub-handoff span{color:var(--jv-text-muted);font-size:.78rem;line-height:1.4}
.hub-handoff>a{display:inline-flex;align-items:center;gap:5px;flex:0 0 auto;padding:9px 13px;border-radius:999px;background:var(--jv-text);color:#fff;text-decoration:none;font-size:.76rem;font-weight:800;white-space:nowrap;transition:transform .16s ease,box-shadow .16s ease}
.hub-handoff>a:hover{transform:translateY(-2px);box-shadow:0 5px 14px rgba(47,36,49,.16)}
.hub-handoff--learn{border-color:rgba(124,58,237,.18)}
.hub-handoff--create{border-color:rgba(236,72,153,.18)}
.hub-handoff--play{border-color:rgba(46,181,165,.24);margin:0 auto 20px}
@media(max-width:640px){.hub-handoff{align-items:flex-start;flex-wrap:wrap;margin-left:18px;margin-right:18px;padding:13px}.hub-handoff>a{margin-left:66px}.hub-handoff--play{margin-left:18px;margin-right:18px}}
[data-theme="dark"] .hub-handoff{background:rgba(35,29,52,.9);border-color:rgba(167,139,250,.25)}
[data-theme="dark"] .hub-handoff-figure{background:rgba(255,255,255,.08)}
[data-theme="dark"] .hub-handoff strong{color:#f4efff}
[data-theme="dark"] .hub-handoff span{color:#c4b8e8}