/* LastZ wiki — mobile-first. Palette ported from kitchen-sink. */
:root {
    --bg-0: #0f0f23;
    --bg-1: #1a1a2e;
    --bg-2: #16213e;
    --surface: rgba(255, 255, 255, 0.05);
    --surface-hover: rgba(255, 255, 255, 0.09);
    --border: rgba(255, 255, 255, 0.1);
    --brand: #e8026a;
    --error: #f96b6b;
    --accent: #6366f1;
    --accent-text: color-mix(in srgb, var(--accent) 65%, #fff);
    --accent-soft: rgba(99, 102, 241, 0.18);
    --pink: #ec4899;
    --link: #93c5fd;
    --text: #f0eeff;
    --text-heading: color-mix(in srgb, var(--text) 86%, var(--bg-0));
    --text-body: color-mix(in srgb, var(--text) 78%, var(--bg-0));
    --text-dim: color-mix(in srgb, var(--text) 72%, var(--bg-0));
    --topbar-h: 56px;
    --menu-w: 300px;
}

* {
    box-sizing: border-box;
}

/* pretty scrollbars — all breakpoints (Firefox + WebKit) */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}
::-webkit-scrollbar {
    width: 9px;
    height: 9px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 8px;
    border: 2px solid transparent;
    background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--text-dim);
    background-clip: content-box;
}

html {
    min-height: 100%;
    background: var(
        --bg-0
    ); /* solid canvas: overscroll / fallback, behind the gradient */
}
body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    background: transparent; /* let the fixed gradient (::before) show through */
    color: var(--text);
    overscroll-behavior: none;
    font-family:
        -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
        sans-serif;
    -webkit-font-smoothing: antialiased;
}
/* fixed gradient backdrop via a pinned pseudo-element — iOS Safari ignores
   background-attachment: fixed (which rendered the page white there). */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(ellipse 80% 60% at 50% 100%, rgba(232, 2, 106, 0.18) 0%, transparent 70%),
        linear-gradient(135deg, var(--bg-0) 0%, var(--bg-1) 50%, var(--bg-2) 100%);
}

body.menu-open {
    overflow: hidden;
}

/* ---------- top bar ---------- */
.topbar {
    position: sticky;
    top: 0;
    z-index: 51;
    height: var(--topbar-h);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 8px;
    padding: 0 12px 0 10px;
    padding-top: env(safe-area-inset-top);
    background: rgba(15, 15, 35, 0.92);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
}

.topbar-brand {
    display: inline-flex;
    flex-direction: row; /* inline, to the right of the logo */
    align-items: center;
    gap: 7px;
    grid-column: 1;
    justify-self: start;
    text-decoration: none;
    color: var(--text);
}
.brand-logo {
    height: 20px;
    width: auto;
    color: var(--brand);
} /* cropped mark; keep ratio. mobile size; widened on desktop */
.brand-wordmark {
    font-weight: 500;
    font-style: italic;
    letter-spacing: -0.01em;
    font-size: 16px;
    line-height: 1;
    white-space: nowrap;
    transform: translateY(1px);
    color: var(--accent-text);
}
/* no "+" separator — POWRA and LAST Z are spaced by the .topbar-brand gap */

/* Mobile: logo alone on the left; the bar centre rolls between the brand
   ("Last Z", on load) and the page title. The title rolls up into view once the
   page's first heading scrolls under the bar (body.title-shown, set by wiki.js).
   Desktop restores the inline lockup + a static title (see the media query). */
.brand-wordmark--inline {
    display: none;
}

.topbar-center {
    grid-column: 2;
    justify-self: center;
    overflow: hidden;
    height: 22px;
    max-width: 60vw;
}
.topbar-center-inner {
    display: flex;
    flex-direction: column;
}
.topbar-center-brand {
    display: none;
}
.topbar-center .topbar-title {
    display: block;
}
.topbar-center-inner {
    display: flex;
    flex-direction: column;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.topbar-center-brand,
.topbar-center .topbar-title {
    height: 22px;
    line-height: 22px;
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 60vw;
    text-align: center;
}
.topbar-center-brand {
    /* "Last Z" — accent color */
    letter-spacing: -0.01em;
    color: var(--accent-text);
}
.topbar-center .topbar-title {
    color: var(--text);
}
body.title-shown .topbar-center-inner {
    transform: translateY(-22px);
} /* roll up to the title */

/* hamburger */
.nav-toggle {
    grid-column: 3;
    justify-self: end;
    width: 40px;
    height: 40px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
}
.nav-toggle-bar {
    width: 18px;
    height: 2px;
    background: var(--text);
    border-radius: 2px;
    transition:
        transform 0.22s ease,
        opacity 0.18s ease;
}
body.menu-open .nav-toggle-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
body.menu-open .nav-toggle-bar:nth-child(2) {
    opacity: 0;
}
body.menu-open .nav-toggle-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ---------- off-canvas menu (mobile) ---------- */
.menu-overlay {
    position: fixed;
    inset: 0;
    z-index: 45;
    background: rgba(0, 0, 0, 0.55);
    opacity: 0;
    transition: opacity 0.25s ease;
}
.menu-overlay.show {
    opacity: 1;
}

.side-menu {
    position: fixed;
    top: var(--topbar-h);
    right: 0;
    z-index: 50;
    width: var(--menu-w);
    max-width: 86vw;
    height: calc(100% - var(--topbar-h));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0;
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    background: rgba(15, 15, 35, 0.98);
    border-left: 1px solid var(--border);
    transform: translateX(100%);
    transition: transform 0.26s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
}
.side-menu.open {
    transform: translateX(0);
}

.side-menu-brand {
    display: block;
    padding: 16px 16px 12px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--border);
    text-decoration: none;
    line-height: 1;
}
.side-menu-brand .brand-wordmark {
    font-style: normal;
}
.side-menu-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.side-menu-title {
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-dim);
}

/* nav groups + links */
.nav-group {
    margin-bottom: 1px;
}

/* Every nav row — links and collapsible headers alike — shares one look. A header
   is just a row with a chevron; a link reserves an invisible chevron slot so its
   label lines up with sibling headers. --depth drives the indent so nesting reads. */
.nav-row {
    display: flex;
    align-items: center;
    gap: 5px;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 8px 12px 8px calc(10px + var(--depth, 0) * 14px);
    font: inherit;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.3;
    text-align: left;
    color: var(--text);
    text-decoration: none;
    background: transparent;
    border: none;
    border-left: 3px solid transparent;
    border-radius: 10px;
    cursor: pointer;
}
.nav-row:hover {
    background: var(--surface-hover);
}
.nav-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.nav-chevron {
    flex: none;
    width: 16px;
    height: 16px;
    color: var(--text-dim);
    transition: transform 0.2s ease;
}
.nav-chevron--leaf {
    visibility: hidden;
} /* keeps leaf labels aligned with header labels */
.nav-group.is-open > .nav-group-toggle .nav-chevron {
    transform: rotate(90deg);
}

.nav-link.is-active {
    background: var(--accent-soft);
    border-left-color: var(--accent);
    font-weight: 600;
}
.nav-link.is-disabled {
    color: var(--text-dim);
    cursor: default;
}
.nav-icon {
    display: none;
}
.nav-icon-svg {
    display: inline-block;
    vertical-align: middle;
    color: var(--accent-text);
    flex-shrink: 0;
}

/* collapse — scoped to the DIRECT child container so nested groups collapse independently */
.nav-group-items {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.24s ease;
}
.nav-group.is-open > .nav-group-items {
    grid-template-rows: 1fr;
}
.nav-group-inner {
    overflow: hidden;
    min-height: 0;
}

.nav-badge {
    margin-left: auto;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 3px 7px;
    border-radius: 999px;
    color: var(--text);
    background: linear-gradient(45deg, var(--accent), var(--pink));
}

.nav-pinned {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

/* Legal block: pinned to the bottom of the side menu.
   margin-top: auto pushes it past any leading nav content in the flex column. */
.nav-legal {
    margin-top: auto;
    padding: 16px 16px 20px;
    border-top: 1px solid var(--border);
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    color: var(--text-dim);
    font-size: 13px;
    line-height: 1.45;
}
.nav-legal-link {
    color: var(--text-dim);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    padding-bottom: 1px;
    transition: color 0.15s, border-color 0.15s;
}
.nav-legal-link:hover {
    color: var(--text);
    border-bottom-color: var(--text-dim);
}
.nav-legal-note {
    flex-basis: 100%;
    margin: 6px 0 0;
    font-size: 12px;
    font-style: italic;
    opacity: 0.8;
}

/* ---------- content ---------- */
.content {
    max-width: 760px;
    margin: 0 auto;
    padding: 22px 18px calc(48px + env(safe-area-inset-bottom));
}

/* page hero — a wide banner image under the title (frontmatter `hero:`).
   Full-width on mobile; on desktop it widens past the text column (see the
   media query) while staying left-aligned with the content, so it extends into
   the right gutter and never overlaps the sidebar. */
.page-hero {
    margin: 0 0 24px;
    width: 100%;
}
.page-hero img {
    display: block;
    width: 100%;
    aspect-ratio: 2.17; /* banner band; full image is shown when expanded */
    object-fit: cover;
    object-position: center 20%; /* default; per-page `hero_y` frontmatter overrides inline to frame each face */
    border: 1px solid var(--border);
    border-radius: 12px;
    cursor: pointer;
}

.prose {
    line-height: 1.65;
}
.prose h2 {
    font-size: 26px;
    margin: 0 0 14px;
    color: var(--text-heading);
}
.prose h3 {
    font-size: 19px;
    margin: 26px 0 10px;
    color: var(--text-heading);
}

/* the page title is no longer pinned — it scrolls normally; the bar centre rolls
   to show it once it scrolls under (see .topbar-center / body.title-shown). */
.prose p {
    color: var(--text-body);
}
.prose li {
    color: var(--text-body);
    margin: 4px 0;
}
.prose a {
    color: var(--link);
}
.prose a.cta-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--accent-text);
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    border: 1.5px solid var(--accent);
    border-radius: 8px;
    padding: 8px 18px;
    transition: background 0.15s, color 0.15s;
}
.prose a.cta-link:hover {
    background: var(--accent);
    color: #fff;
}
.prose blockquote {
    margin: 18px 0;
    padding: 12px 16px;
    border-left: 3px solid var(--accent);
    background: var(--surface);
    border-radius: 0 10px 10px 0;
    color: var(--text-dim);
}
.prose code {
    background: var(--surface);
    padding: 2px 6px;
    border-radius: 5px;
    font-size: 0.9em;
}

/* tables (e.g. price tiers) — styled; scroll horizontally on mobile if they overflow */
.prose table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    width: max-content;
    border-collapse: collapse;
    margin: 18px 0;
    font-size: 14.5px;
    border: 1px solid var(--border);
}
.prose th,
.prose td {
    padding: 9px 16px;
    border-bottom: 1px solid var(--border);
}
.prose th {
    background: var(--surface);
    color: var(--text);
    font-weight: 700;
    letter-spacing: 0.02em;
}
.prose td {
    color: var(--text-dim);
}
.prose tbody tr:last-child td {
    border-bottom: 0;
}
.prose tbody tr:hover td {
    background: var(--surface);
}

/* content images (screenshots) — capped so phone-sized captures don't dominate.
   mobile: 85% of viewport; desktop override (below) caps near an iPhone width. */
.prose img {
    display: block;
    width: auto;
    max-width: 85vw;
    height: auto;
    margin: 18px 0;
    border: 1px solid var(--border);
    border-radius: 10px;
}

/* heading anchors — id'd headings with a hover "#" link; offset for the sticky topbar */
html {
    scroll-behavior: smooth;
}
.prose :is(h2, h3, h4) {
    position: relative;
    scroll-margin-top: calc(var(--topbar-h) + 12px);
}
.heading-anchor {
    margin-left: 0.4em;
    color: var(--text-dim);
    text-decoration: none;
    font-weight: 400;
    opacity: 0;
    transition: opacity 0.15s ease;
}
.prose :is(h2, h3, h4):hover .heading-anchor {
    opacity: 0.55;
}
.heading-anchor:hover {
    opacity: 1;
    color: var(--link);
}

/* home: section cards (thumbnail + label, image slot per section) */
.section-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    margin: 20px 0;
}

/* hero grid — portrait + name cards; 4/row on mobile, more on wider screens */
.hero-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin: 14px 0 26px;
}
@media (min-width: 620px) {
    .hero-grid {
        grid-template-columns: repeat(5, 1fr);
        gap: 12px;
    }
}
@media (min-width: 900px) {
    .hero-grid {
        grid-template-columns: repeat(6, 1fr);
    }
}
.prose a.hero-grid-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    background: var(--surface);
    color: var(--text);
    text-decoration: none;
    transition:
        border-color 0.15s ease,
        transform 0.15s ease;
}
.prose a.hero-grid-card:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
}
.hero-grid-thumb {
    display: block;
    aspect-ratio: 1 / 1;
    background: linear-gradient(
        135deg,
        var(--accent-soft),
        rgba(236, 72, 153, 0.14)
    );
    overflow: hidden;
}
.prose .hero-grid-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%; /* per-card inline overrides this with the hero's hero_y */
    display: block;
    margin: 0;
    border: 0;
    border-radius: 0;
    max-width: none;
    /* zoom toward the face so the square tile reads as a portrait, not a full-body shrink.
     transform-origin Y is set inline per-card to the hero's face (hero_y). */
    transform: scale(1.7);
    transform-origin: center 20%;
}
.hero-grid-name {
    display: block;
    padding: 6px 6px 8px;
    font-size: 12.5px;
    font-weight: 600;
    text-align: center;
    line-height: 1.25;
}
@media (min-width: 620px) {
    .section-cards {
        grid-template-columns: repeat(3, 1fr);
    }
}
.prose a.section-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    background: var(--surface);
    color: var(--text);
    text-decoration: none;
    transition:
        border-color 0.15s ease,
        background 0.15s ease,
        transform 0.15s ease;
}
.prose a.section-card:hover {
    border-color: var(--accent);
    background: var(--surface-hover);
    transform: translateY(-2px);
}
.section-card-thumb {
    display: block;
    aspect-ratio: 16 / 9;
    background: linear-gradient(
        135deg,
        var(--accent-soft),
        rgba(236, 72, 153, 0.14)
    );
    background-size: cover;
    background-position: center;
}
.section-card:nth-child(2) .section-card-thumb {
    background: linear-gradient(
        135deg,
        rgba(99, 102, 241, 0.2),
        rgba(56, 189, 248, 0.16)
    );
}
.section-card:nth-child(3) .section-card-thumb {
    background: linear-gradient(
        135deg,
        rgba(16, 185, 129, 0.16),
        rgba(99, 102, 241, 0.18)
    );
}
.prose .section-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    max-width: none;
    margin: 0;
    border: 0;
    border-radius: 0;
}
.section-card-body {
    display: block;
    padding: 12px 14px 14px;
}
.section-card-body strong {
    display: block;
    font-size: 16px;
    margin-bottom: 4px;
    color: var(--text);
}
.section-card-body span {
    color: var(--text-dim);
    font-size: 13px;
    line-height: 1.5;
}

/* prev / next page links (foot of each page) — plain text, no button box */
.page-nav {
    display: flex;
    gap: 12px;
    margin-top: 36px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}
/* each link is a big transparent tap target filling its half of the row,
   so the whole grouping (label + title) is active — not just the text */
.page-nav a {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 0;
    min-width: 0;
    padding: 12px 14px;
    border-radius: 12px;
    color: var(--text);
    text-decoration: none;
}
.page-nav a:hover,
.page-nav a:active {
    background: var(--surface-hover);
}
.page-nav-prev {
    align-items: flex-start;
    text-align: left;
}
.page-nav-next {
    align-items: flex-end;
    text-align: right;
}
.page-nav-dir {
    font-size: 12px;
    color: var(--text-dim);
}
.page-nav-title {
    font-size: 15px;
    font-weight: 600;
}
.page-nav a:hover .page-nav-title {
    color: var(--link);
}
.page-nav > span {
    flex: 1 1 0;
} /* empty placeholder keeps a lone link in its half */

/* --- content images: tall thumbnails + image-stack decks --- */
.prose img.zoomable {
    cursor: pointer;
}

/* figure + caption (standalone images) */
.prose figure {
    margin: 18px 0;
    width: fit-content;
    max-width: 100%;
}
.prose figure img {
    margin: 0;
}
.prose figcaption {
    margin-top: 6px;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--text-dim);
}

/* a tall image (e.g. a portrait screenshot) caps to a top-aligned square;
   click opens the full image in a new tab */
.prose img.is-tall {
    width: 300px;
    max-width: 80vw;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: top;
}

/* image stack — a deck of overlapping cards: top card flat, up to 2 peek behind
   (offset + fading); a +N badge when there are more. */
.img-stack {
    position: relative;
    width: 168px;
    max-width: 62vw;
    aspect-ratio: 1 / 1;
    margin: 22px 0 30px;
    cursor: pointer;
}
.img-stack p {
    display: contents;
} /* unwrap markdown-image paragraphs */
.prose .img-stack img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    max-width: none;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: top;
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: 14px;
    transition: transform 0.18s ease;
}
.prose .img-stack img:nth-child(1) {
    z-index: 3;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4);
}
.prose .img-stack img:nth-child(2) {
    z-index: 2;
    transform: translate(7px, 8px) rotate(2.5deg);
    opacity: 0.78;
}
.prose .img-stack img:nth-child(3) {
    z-index: 1;
    transform: translate(13px, 15px) rotate(5deg);
    opacity: 0.5;
}
.prose .img-stack img:nth-child(n + 4) {
    display: none;
}
.img-stack:hover img:nth-child(1) {
    transform: translate(-2px, -3px) rotate(-1deg);
}
.img-stack[data-extra]::after {
    content: "+" attr(data-extra);
    position: absolute;
    right: -6px;
    bottom: -6px;
    z-index: 4;
    min-width: 26px;
    height: 26px;
    padding: 0 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    background: var(--accent);
    border-radius: 999px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* fullscreen image modal */
body.lightbox-open {
    overflow: hidden;
}
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(0, 0, 0, 0.92);
    opacity: 0;
    visibility: hidden; /* hidden state must not capture clicks */
    pointer-events: none;
    transition:
        opacity 0.2s ease,
        visibility 0.2s ease;
}
.lightbox.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.lightbox img {
    max-width: 94vw;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 8px;
}
.lightbox-caption {
    position: absolute;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
    max-width: 88vw;
    text-align: center;
    font-size: 13px;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.88);
    background: rgba(0, 0, 0, 0.45);
    padding: 6px 12px;
    border-radius: 8px;
}
.lightbox button {
    position: absolute;
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
    border: none;
    border-radius: 10px;
    cursor: pointer;
    line-height: 1;
}
.lightbox-close {
    top: 14px;
    right: 16px;
    width: 40px;
    height: 40px;
    font-size: 26px;
}
.lightbox-nav {
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 58px;
    font-size: 30px;
}
.lightbox-prev {
    left: 12px;
}
.lightbox-next {
    right: 12px;
}

/* ---------- desktop (sparse persistent sidebar) ---------- */
@media (min-width: 900px) {
    .topbar {
        padding: 0 20px;
        padding-top: env(safe-area-inset-top);
    }
    .nav-toggle,
    .side-menu-head {
        display: none;
    }
    .menu-overlay {
        display: none !important;
    }
    .side-menu {
        position: fixed;
        top: var(--topbar-h);
        left: 0;
        right: auto;
        width: 260px;
        height: calc(100% - var(--topbar-h));
        transform: none;
        border-left: none;
        border-right: 1px solid var(--border);
        background: rgba(15, 15, 35, 0.6);
        padding-top: 16px;
    }
    .content {
        margin-left: 260px;
    }
    body.menu-open {
        overflow: auto;
    }

    /* denser menu rows on desktop (mouse target — no need for big tap rows) */
    .nav-row {
        padding-top: 5px;
        padding-bottom: 5px;
        font-size: 14px;
    }
    .nav-group {
        margin-bottom: 1px;
    }

    /* cap content images near an iPhone screen width on desktop */
    .prose img {
        max-width: 400px;
    }

    /* hero matches the content/prose width (724px) — no gutter bleed */
    /* shorter banner band on desktop (~2/3 the mobile height): 2.17 * 1.5 */
    .page-hero img {
        aspect-ratio: 3.25;
    }

    /* brand lockup is larger on desktop; mobile keeps it compact (logo 20px) */
    .brand-logo {
        height: 20px;
    } /* match mobile size (shrunk from 28px) */
    .brand-wordmark {
        font-size: 16px;
        font-weight: 700;
        font-style: normal;
        transform: translateY(1px);
    } /* match mobile brand: smaller, non-italic */

    /* desktop: logo stays bar-left; "Last Z" wordmark heads the sidebar menu instead */
    .brand-wordmark--inline {
        display: none;
    }
    .side-menu-brand {
        display: block;
        padding: 0 16px 12px;
        margin-bottom: 4px;
        border-bottom: 1px solid var(--border);
        text-decoration: none;
        line-height: 1;
    }
    .side-menu-brand .brand-wordmark {
        font-size: 16px;
    } /* match the desktop page title size */
    .topbar-center {
        grid-column: 2;
        justify-self: center;
        overflow: visible;
        height: auto;
        max-width: 50vw;
    }
    .topbar-center-brand {
        display: none;
    }
}

/* ==================== AI Coach widget ==================== */
#powra-coach {
    --coach-bg: #3a0924;
    --coach-border: rgba(232, 2, 106, 0.38);
    --coach-purple: rgba(0, 0, 0, 0.35);
    --coach-purple-mid: #a855f7;
    --coach-purple-light: #c084fc;
    --coach-pink: #e8026a;
    --coach-radius: 14px;
    cursor: default;
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: min(680px, calc(100vw - 12px));
    z-index: 1000;
    font-family:
        -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
        sans-serif;
    font-size: 16px;
    color: var(--text);
    border: 1px solid var(--coach-border);
    border-bottom: none;
    border-radius: var(--coach-radius) var(--coach-radius) 0 0;
    background: var(--coach-bg);
    box-shadow: 0 -4px 32px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    transition: height 0.25s ease;
    overflow: hidden;
}

/* Handle — always visible, acts as the drawer tab */
.coach-handle {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 14px 12px;
    cursor: pointer;
    user-select: none;
    border-radius: var(--coach-radius) var(--coach-radius) 0 0;
}

.coach-grip-target {
    padding: 6px 10px;
}

.coach-dragging,
.coach-dragging * {
    cursor: grab !important;
}
.coach-dragging .coach-grip-target,
.coach-dragging .coach-grip-target * {
    cursor: grabbing !important;
}

.coach-grip {
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.25);
    flex-shrink: 0;
}

.coach-handle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.coach-brand {
    display: flex;
    align-items: center;
    gap: 7px;
    font-weight: 600;
    font-size: 14px;
    color: var(--accent-text);
}
.coach-brand svg {
    width: 14px;
    height: 14px;
    color: var(--accent-text);
}

.coach-handle-right {
    display: flex;
    align-items: center;
    gap: 10px;
}
.coach-turns {
    font-size: 14px;
    color: var(--text-dim);
    font-variant-numeric: tabular-nums;
}
.coach-turns-empty {
    color: var(--error);
}
.coach-turns-cta {
    color: var(--brand);
    text-decoration: none;
    font-size: 14px;
    cursor: pointer;
}
.coach-turns-cta:hover {
    text-decoration: underline;
}

.coach-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}
.coach-body-inner {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

.coach-thread {
    flex: 1;
    overflow-y: auto;
    padding: 0 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 12px;
    padding-bottom: 4px;
}

/* Collapsed peek — 1 line sliver, text fades at bottom */
#powra-coach:not(.coach-expanded) .coach-thread {
    flex: none;
    height: 96px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, black 45%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 45%, transparent 100%);
}
#powra-coach:not(.coach-expanded) .coach-input-row {
    display: none !important;
}
#powra-coach:not(.coach-expanded) .coach-consent {
    display: none !important;
}

.coach-input-row {
    padding: 10px 14px 14px;
    background: linear-gradient(to bottom, transparent 0px, var(--coach-bg) 28px);
}

.coach-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

/* Messages */
.coach-msg {
    line-height: 1.55;
    max-width: 88%;
}
.coach-msg-user {
    align-self: flex-end;
    background: var(--coach-purple);
    border-radius: 10px 10px 2px 10px;
    padding: 7px 12px;
    color: #fff;
}
.coach-msg-assistant {
    align-self: flex-start;
    color: var(--text);
    background: rgba(0, 0, 0, 0.35);
    border-radius: 10px 10px 10px 2px;
    padding: 7px 12px;
}

/* Input */
.coach-input {
    width: 100%;
    background: transparent;
    border: 1px solid rgba(232, 2, 106, 0.45);
    border-radius: 24px;
    color: var(--text);
    font-size: 16px;
    padding: 12px 52px 12px 18px;
    outline: none;
    box-sizing: border-box;
}
.coach-input::placeholder {
    color: rgba(255, 255, 255, 0.45);
}

/* "Here I am" pulse — triggered when user opens the chat from the side menu.
   Three pulses (~2.1s total); JS removes the class after to allow re-trigger. */
@keyframes coach-input-pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(232, 2, 106, 0);
        border-color: rgba(232, 2, 106, 0.45);
    }
    50% {
        box-shadow: 0 0 0 6px rgba(232, 2, 106, 0.25),
                    0 0 18px rgba(232, 2, 106, 0.5);
        border-color: rgba(240, 80, 150, 0.9);
    }
}
.coach-input.coach-input-pulse {
    animation: coach-input-pulse 0.7s ease-in-out 3;
}

.coach-consent {
    margin: 0 4px 8px;
    font-size: 11px;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.42);
    text-align: center;
}
.coach-consent a {
    color: rgba(255, 255, 255, 0.55);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.coach-consent a:hover {
    color: rgba(255, 255, 255, 0.85);
}
.coach-consent-hidden {
    display: none;
}

.coach-send {
    position: absolute;
    right: 6px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    background: var(--coach-purple);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition:
        opacity 0.15s,
        background 0.15s;
}
.coach-send:disabled {
    opacity: 0.35;
    cursor: default;
}
.coach-send:not(:disabled):hover {
    background: #6d28d9;
}

@media (max-width: 600px) {
    .coach-send {
        display: none;
    }
    .coach-input {
        padding-right: 18px;
    }
}

/* Cap gate */
.coach-cap-gate {
    padding: 12px 14px;
    background: rgba(236, 72, 153, 0.08);
    border-top: 1px solid rgba(236, 72, 153, 0.2);
    text-align: center;
}
.coach-cap-gate p {
    margin: 0 0 8px;
    color: var(--text-dim);
    font-size: 13px;
}
.coach-cap-cta {
    display: inline-block;
    padding: 6px 16px;
    background: var(--accent);
    color: #fff;
    border-radius: 6px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: background 0.15s;
}
.coach-cap-cta:hover {
    background: #4f46e5;
}
.coach-email-input {
    display: block;
    width: 100%;
    margin: 8px 0 6px;
    padding: 7px 10px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.06);
    color: var(--text);
    font-size: 13px;
    box-sizing: border-box;
    outline: none;
}
.coach-email-submit {
    padding: 6px 16px;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
}
.coach-email-note {
    margin: 6px 0 0;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.3);
}
.coach-email-done {
    color: var(--text-dim);
    font-size: 13px;
}

/* Markdown rendering */
.coach-msg-assistant h3,
.coach-msg-assistant h4 {
    margin: 8px 0 4px;
    font-size: 13px;
    color: var(--text);
}
.coach-msg-assistant p {
    margin: 0 0 10px;
}
.coach-msg-assistant p:last-child {
    margin-bottom: 0;
}
.coach-msg-assistant ul {
    margin: 4px 0 6px 16px;
    padding: 0;
}
.coach-msg-assistant li {
    margin-bottom: 3px;
}
.coach-msg-assistant code {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    padding: 1px 5px;
    font-family: monospace;
    font-size: 12px;
}

/* Push page content up so it's not hidden behind the drawer handle */
body {
    padding-bottom: 52px;
}

@media (max-width: 600px) {
    #powra-coach {
        width: calc(100vw - 16px);
    }
}

/* Auth success notice (in-thread) */
.coach-auth-notice {
    padding: 8px 12px;
    background: rgba(99, 102, 241, 0.12);
    border-left: 3px solid var(--accent);
    border-radius: 0 6px 6px 0;
    font-size: 13px;
    color: var(--text-dim);
    margin: 4px 0;
}

/* Auth modal */
.powra-auth-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.powra-auth-overlay[hidden] {
    display: none;
}
.powra-auth-modal {
    position: relative;
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 28px 28px 24px;
    width: 100%;
    max-width: 380px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
}
.powra-auth-close {
    position: absolute;
    top: 14px;
    right: 14px;
    background: none;
    border: none;
    color: var(--text-dim);
    font-size: 18px;
    cursor: pointer;
    line-height: 1;
    padding: 4px 6px;
    border-radius: 4px;
    transition: color 0.15s;
}
.powra-auth-close:hover {
    color: var(--text);
}
.powra-auth-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 0;
}
.powra-auth-tab {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-dim);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    padding: 6px 10px 10px;
    margin-bottom: -1px;
    transition: color 0.15s, border-color 0.15s;
}
.powra-auth-tab.is-active {
    color: var(--text);
    border-bottom-color: var(--accent);
}
.powra-auth-tagline {
    margin: 0 0 16px;
    font-size: 13px;
    color: var(--text-dim);
}
.powra-auth-input {
    display: block;
    width: 100%;
    margin-bottom: 10px;
    padding: 9px 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border);
    border-radius: 7px;
    color: var(--text);
    font-size: 14px;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.15s;
}
.powra-auth-input:focus {
    border-color: var(--accent);
}
.powra-auth-error {
    margin: 0 0 10px;
    font-size: 13px;
    color: #f87171;
}
.powra-auth-submit {
    width: 100%;
    padding: 10px;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 7px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, opacity 0.15s;
    margin-top: 2px;
}
.powra-auth-submit:hover:not(:disabled) {
    background: #4f46e5;
}
.powra-auth-submit:disabled {
    opacity: 0.55;
    cursor: default;
}
.powra-auth-switch-line {
    margin: 14px 0 0;
    text-align: center;
    font-size: 13px;
    color: var(--text-dim);
}
.powra-auth-switch-link {
    color: var(--accent-text);
    text-decoration: none;
}
.powra-auth-switch-link:hover {
    text-decoration: underline;
}
.powra-auth-success {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
    text-align: center;
    gap: 8px;
}
.powra-auth-success-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(99, 102, 241, 0.18);
    color: var(--accent-text);
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
}
.powra-auth-success-title {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    color: var(--text);
}
.powra-auth-success-sub {
    margin: 0;
    font-size: 13px;
    color: var(--text-dim);
}