/* AI Story Builders – marketing theme tokens (ported from AIStoryBuildersWebsite) */

:root {
    --asb-primary: #5B4BE1;
    --asb-primary-2: #7A6CF0;
    --asb-bg: #FFFFFF;
    --asb-bg-soft: #F4F1FB;
    --asb-surface: #ECE8FA;
    --asb-text: #1F2233;
    --asb-muted: #6B7080;
    --asb-border: #E6E2F4;
    --asb-radius-lg: 16px;
    --asb-radius-pill: 999px;
    --asb-shadow-card: 0 8px 24px rgba(91, 75, 225, 0.08);
    --asb-shadow-card-hover: 0 12px 32px rgba(91, 75, 225, 0.16);
}

/* Layout container */
.asb-container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 24px;
    width: 100%;
    box-sizing: border-box;
}

.asb-section {
    padding: 40px 0;
}

.asb-text-primary {
    color: var(--asb-primary);
}

.asb-muted {
    color: var(--asb-muted);
}

/* Buttons */
.asb-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: var(--asb-radius-pill);
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform .08s ease, box-shadow .15s ease;
}

.asb-btn:hover {
    text-decoration: none;
    transform: translateY(-1px);
}

.asb-btn-primary {
    background: linear-gradient(135deg, var(--asb-primary) 0%, var(--asb-primary-2) 100%);
    color: #fff;
    box-shadow: var(--asb-shadow-card);
}

.asb-btn-outline {
    background: #fff;
    color: var(--asb-text);
    border-color: var(--asb-border);
}

/* Hero */
.asb-hero {
    position: relative;
    padding: 48px 0 40px;
    background: linear-gradient(180deg, var(--asb-bg-soft) 0%, var(--asb-bg) 100%);
    border-radius: var(--asb-radius-lg);
    overflow: hidden;
}

.asb-hero__eyebrow {
    display: inline-block;
    color: var(--asb-primary);
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.04em;
    margin-bottom: 12px;
}

.asb-hero__title {
    font-size: 40px;
    line-height: 1.12;
    margin: 0 0 14px;
    font-weight: 800;
    color: var(--asb-text);
}

.asb-hero__lead {
    color: var(--asb-muted);
    font-size: 17px;
    margin: 0 0 20px;
    max-width: 620px;
}

.asb-hero__ctas {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

/* Tagline */
.asb-tagline {
    text-align: center;
    padding: 32px 0 8px;
}

.asb-tagline__title {
    font-size: 26px;
    font-weight: 800;
    margin: 0 0 6px;
}

.asb-tagline__sub {
    color: var(--asb-muted);
    margin: 0;
}

/* Feature grid */
.asb-feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

.asb-feature-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: #fff;
    border: 1px solid var(--asb-border);
    border-radius: var(--asb-radius-lg);
    padding: 22px;
    text-decoration: none;
    color: var(--asb-text);
    box-shadow: var(--asb-shadow-card);
    transition: transform .1s ease, box-shadow .15s ease;
}

.asb-feature-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--asb-shadow-card-hover);
    text-decoration: none;
}

.asb-feature-card__icon {
    font-size: 26px;
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--asb-surface);
}

.asb-feature-card__title {
    font-size: 17px;
    font-weight: 700;
    margin: 0;
}

.asb-feature-card__body {
    color: var(--asb-muted);
    font-size: 14px;
    margin: 0;
    line-height: 1.5;
}

/* Closing CTA */
.asb-cta-card {
    margin-top: 8px;
    text-align: center;
    background: linear-gradient(135deg, var(--asb-primary) 0%, var(--asb-primary-2) 100%);
    color: #fff;
    border-radius: var(--asb-radius-lg);
    padding: 36px 24px;
}

.asb-cta-card h3 {
    color: #fff;
    margin: 0 0 8px;
    font-size: 24px;
}

.asb-cta-card p {
    margin: 0 0 18px;
    opacity: .92;
}

.asb-cta-card .asb-btn-outline {
    background: #fff;
    color: var(--asb-primary);
    border-color: #fff;
}

@media (max-width: 640px) {
    .asb-hero__title { font-size: 32px; }
}

/* ==========================================================================
   Feature 26 — Public marketing site.
   Light-first, scannable, low-motion. See docs/feature-26-public-marketing-website.md
   §7.5 for the list of techniques that are deliberately absent here.
   ========================================================================== */

.public-marketing {
    --pm-bg: #ffffff;
    --pm-bg-alt: #f7f8fb;
    --pm-bg-tint: #f2f6ff;
    --pm-ink: #16181d;
    --pm-ink-muted: #52596b;
    --pm-border: #e3e6ee;
    --pm-accent: var(--asb-primary);
    --pm-accent-ink: #ffffff;
    --pm-radius: 14px;
    --pm-shadow: 0 6px 24px rgba(16, 24, 40, .07);
    --pm-band-y: 72px;

    background: var(--pm-bg);
    color: var(--pm-ink);
    font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Scoped to .public-marketing so it never outranks the button and nav colour rules below,
   which are all written at the same or higher specificity on purpose. */
.public-marketing a { color: var(--pm-accent); }
.public-marketing p { color: var(--pm-ink-muted); }

.public-marketing :focus-visible {
    outline: 2px solid var(--pm-accent);
    outline-offset: 2px;
    border-radius: 4px;
}

.public-marketing .pm-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    background: var(--pm-accent);
    color: var(--pm-accent-ink);
    padding: 10px 16px;
    border-radius: 0 0 8px 0;
}

.public-marketing .pm-skip:focus {
    left: 0;
}

.pm-container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 24px;
    width: 100%;
    box-sizing: border-box;
}

.pm-band {
    padding: var(--pm-band-y) 0;
    border-bottom: 1px solid var(--pm-border);
}

.pm-band--alt { background: var(--pm-bg-alt); }
.pm-band--tint { background: var(--pm-bg-tint); }
.pm-band--tight { --pm-band-y: 40px; }

.pm-eyebrow {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: .1em;
    font-size: 12px;
    font-weight: 700;
    color: var(--pm-accent);
    margin-bottom: 12px;
}

.pm-slogan {
    margin: 4px 0 12px;
    font-size: clamp(1.05rem, 2.2vw, 1.35rem);
    font-weight: 600;
    line-height: 1.35;
    color: var(--pm-ink);
    max-width: 46ch;
}

.pm-h1 {
    font-size: clamp(32px, 5.2vw, 52px);
    line-height: 1.1;
    font-weight: 800;
    margin: 0 0 16px;
    color: var(--pm-ink);
    max-width: 18ch;
}

.pm-h2 {
    font-size: clamp(26px, 3.6vw, 40px);
    line-height: 1.18;
    font-weight: 800;
    margin: 0 0 14px;
    color: var(--pm-ink);
    max-width: 26ch;
}

.pm-h3 {
    font-size: 19px;
    font-weight: 700;
    margin: 0 0 8px;
    color: var(--pm-ink);
}

.pm-lead {
    font-size: clamp(17px, 1.9vw, 20px);
    line-height: 1.55;
    max-width: 62ch;
    margin: 0 0 24px;
}

.pm-note { font-size: 14px; }

/* ---- Hero supporting fine print ---- */
.pm-fineprint {
    font-size: 14px;
    line-height: 1.6;
    color: var(--pm-ink-muted);
    max-width: 62ch;
    margin: 0 0 20px;
}

.pm-fineprint p { margin: 0; }
.pm-fineprint p + p { margin-top: 10px; }
.pm-fineprint strong { color: var(--pm-ink); font-weight: 600; }

@media (max-width: 640px) {
    .pm-fineprint { font-size: 13px; }
}

/* ---- Sign-up credit offer (shown only while the free-credit budget can cover a grant) ---- */
.pm-offer {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    margin: 0 0 20px;
    padding: 10px 16px;
    border: 1px solid var(--pm-accent);
    border-radius: 999px;
    background: var(--pm-bg-tint);
}

.pm-offer__amount { font-weight: 700; color: var(--pm-ink); }
.pm-offer__note { font-size: 13px; color: var(--pm-ink-muted); }

/* ---- Buttons ---- */
.pm-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.pm-cta,
.pm-cta--ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    min-width: 44px;
    padding: 12px 26px;
    border-radius: var(--asb-radius-pill);
    font-weight: 700;
    font-size: 16px;
    text-decoration: none;
    border: 2px solid transparent;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.pm-cta {
    background: var(--pm-accent);
    color: var(--pm-accent-ink);
}

.pm-cta:hover { background: var(--asb-primary-2); color: var(--pm-accent-ink); }

.pm-cta--ghost {
    background: transparent;
    color: var(--pm-accent);
    border-color: var(--pm-border);
}

.pm-cta--ghost:hover { border-color: var(--pm-accent); }

/* The generic link and nav colour rules are also (0,1,1), so the button colours are restated
   here at (0,2,0). Without this the solid button renders accent-on-accent and the label vanishes. */
.public-marketing .pm-cta,
.public-marketing .pm-cta:hover,
.public-marketing .pm-cta:visited { color: var(--pm-accent-ink); }

.public-marketing .pm-cta--ghost,
.public-marketing .pm-cta--ghost:hover,
.public-marketing .pm-cta--ghost:visited { color: var(--pm-accent); }

/* For ghost buttons sitting on a saturated surface, where the accent colour would be
   accent-on-accent. White text and border keep contrast well above 4.5:1. */
.pm-cta--on-dark,
.public-marketing .pm-cta--on-dark {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, .7);
}

.pm-cta--on-dark:hover,
.public-marketing .pm-cta--on-dark:hover {
    background: rgba(255, 255, 255, .16);
    border-color: #fff;
    color: #fff;
}

.pm-cta--on-dark:focus-visible {
    outline-color: #fff;
}

.pm-cta--sm { min-height: 40px; padding: 8px 18px; font-size: 15px; }

/* ---- Cards & grids ---- */
.pm-card {
    background: var(--pm-bg);
    border: 1px solid var(--pm-border);
    border-radius: var(--pm-radius);
    box-shadow: var(--pm-shadow);
    padding: 24px;
}

.pm-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

.pm-grid--2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }

.pm-list { margin: 0; padding-left: 20px; color: var(--pm-ink-muted); line-height: 1.65; }
.pm-list li { margin-bottom: 6px; }

/* ---- Hero ---- */
.pm-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    gap: 40px;
    align-items: center;
}

.pm-hero__media img,
.pm-screenshot img {
    width: 100%;
    height: auto;
    border-radius: var(--pm-radius);
    border: 1px solid var(--pm-border);
    box-shadow: var(--pm-shadow);
    display: block;
}

.pm-screenshot { margin: 0; }
.pm-screenshot-band { padding-block: 0; }

@media (max-width: 900px) {
    .pm-hero { grid-template-columns: 1fr; gap: 24px; }
    .pm-hero__media { order: 2; }
    :root { --pm-band-y: 48px; }
}

/* ---- Trust strip ---- */
.pm-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 32px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.pm-trust li {
    font-weight: 600;
    color: var(--pm-ink);
    font-size: 15px;
}

/* ---- Workflow ---- */
.pm-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: pm-step;
}

.pm-steps li {
    background: var(--pm-bg);
    border: 1px solid var(--pm-border);
    border-radius: var(--pm-radius);
    padding: 18px;
}

.pm-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--pm-accent);
    color: var(--pm-accent-ink);
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 10px;
}

/* ---- Pipeline tables ---- */
.pm-table-wrap { overflow-x: auto; }

.pm-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
    background: var(--pm-bg);
}

.pm-table th,
.pm-table td {
    text-align: left;
    padding: 10px 14px;
    border-bottom: 1px solid var(--pm-border);
    vertical-align: top;
}

.pm-table th { font-weight: 700; color: var(--pm-ink); }
.pm-table td { color: var(--pm-ink-muted); }
.pm-table td:first-child { color: var(--pm-ink); font-weight: 600; white-space: nowrap; }

/* ---- Sample / findings ---- */
.pm-finding {
    border: 1px solid var(--pm-border);
    border-left: 4px solid var(--pm-accent);
    border-radius: var(--pm-radius);
    background: var(--pm-bg);
    padding: 18px 20px;
    margin-bottom: 14px;
}

.pm-finding q {
    display: block;
    margin-top: 8px;
    color: var(--pm-ink);
    font-style: italic;
}

.pm-where {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--pm-ink-muted);
}

.pm-badge {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: var(--asb-radius-pill);
    background: var(--pm-bg-tint);
    color: var(--pm-accent);
    border: 1px solid var(--pm-border);
    margin-right: 6px;
}

/* ---- FAQ ---- */
.pm-faq details {
    border: 1px solid var(--pm-border);
    border-radius: var(--pm-radius);
    background: var(--pm-bg);
    padding: 14px 18px;
    margin-bottom: 10px;
}

.pm-faq summary {
    cursor: pointer;
    font-weight: 700;
    color: var(--pm-ink);
    list-style: revert;
}

.pm-faq p { margin: 10px 0 0; }

/* ---- Diagrams and screenshots (feature 27 §7) ---- */
.pm-diagram {
    margin: 24px 0 8px;
    padding: 18px;
    border: 1px solid var(--pm-border);
    border-radius: var(--pm-radius);
    background: var(--pm-bg);
}

.pm-diagram svg { display: block; width: 100%; height: auto; }

.pm-diagram figcaption,
.pm-figure figcaption {
    margin-top: 12px;
    font-size: 14px;
    color: var(--pm-muted);
    line-height: 1.5;
}

.pm-figure-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-top: 28px;
}

@media (max-width: 900px) {
    .pm-figure-grid { grid-template-columns: 1fr; }
}

.pm-figure { margin: 0; }

.pm-figure img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--pm-border);
    border-radius: var(--pm-radius);
    background: var(--pm-bg-tint);
}

/* ---- Scope statement: fiction only (feature 27) ---- */
.pm-scope-line {
    display: inline-block;
    margin: 0 0 16px;
    padding: 10px 16px;
    border-left: 4px solid var(--pm-accent);
    border-radius: 6px;
    background: var(--pm-bg-tint);
    color: var(--pm-ink);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.5;
}

/* ---- Public pricing grid (feature 27 §12) ---- */
.pm-price-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 20px;
}

@media (max-width: 900px) {
    .pm-price-grid { grid-template-columns: 1fr; }
}

.pm-price {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 24px;
    border: 1px solid var(--pm-border);
    border-radius: var(--pm-radius);
    background: var(--pm-bg);
}

.pm-price.is-popular {
    border-color: var(--pm-accent);
    box-shadow: 0 0 0 2px var(--pm-accent);
}

.pm-price__badge {
    position: absolute;
    top: -11px;
    right: 18px;
    background: var(--pm-accent);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 999px;
}

.pm-price__name { font-size: 18px; font-weight: 700; margin: 0; color: var(--pm-ink); }
.pm-price__credits { font-size: 28px; font-weight: 800; color: var(--pm-ink); }
.pm-price__credits span { font-size: 14px; font-weight: 600; color: var(--pm-muted); margin-left: 6px; }
.pm-price__pages { margin: 0; font-size: 14px; color: var(--pm-muted); }
.pm-price__desc { margin: 0; font-size: 14px; color: var(--pm-muted); flex: 1; }
.pm-price__amount { font-size: 22px; font-weight: 800; color: var(--pm-accent); }
.pm-price__amount span { font-size: 13px; font-weight: 600; color: var(--pm-muted); }
.pm-price__buy { text-align: center; margin-top: 6px; }

/* ---- Shared-report brand bar (feature 27 §6) ---- */
.pr-topbar { border-bottom: 1px solid var(--pm-border); background: var(--pm-bg); }

.pr-topbar__inner {
    max-width: 1120px;
    margin: 0 auto;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.pr-topbar__actions { display: flex; align-items: center; gap: 16px; }

.pr-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    text-decoration: none;
    color: var(--pm-ink);
}

.pr-brand:hover { text-decoration: underline; }

@media (max-width: 560px) {
    .pr-topbar__actions .pm-cta { display: none; }
}

/* ---- Disclaimer scroll box ---- */
.pm-scrollbox {
    max-height: 420px;
    overflow-y: auto;
    border: 1px solid var(--pm-border);
    border-radius: var(--pm-radius);
    padding: 20px 24px;
    background: var(--pm-bg);
}

.pm-scrollbox h3 { margin-top: 18px; }
.pm-scrollbox h3:first-child { margin-top: 0; }

/* ---- Top bar ---- */
.pm-topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--pm-bg);
    border-bottom: 1px solid var(--pm-border);
}

.pm-topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 64px;
}

.pm-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
    font-size: 18px;
    color: var(--pm-ink);
    text-decoration: none;
}

/* Restated at (0,2,0) so the generic link colour cannot turn the whole wordmark accent.
   The nav rule excludes buttons, which carry their own foreground. */
.public-marketing .pm-brand { color: var(--pm-ink); }
.public-marketing .pm-nav a:not(.pm-cta):not(.pm-cta--ghost) { color: var(--pm-ink); }

.pm-brand img { height: 30px; width: auto; }
.pm-brand span span { color: var(--pm-accent); }

.pm-nav {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.pm-nav a {
    padding: 8px 12px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    color: var(--pm-ink);
    min-height: 40px;
    display: inline-flex;
    align-items: center;
}

.pm-nav a:hover { background: var(--pm-bg-alt); }

/* Buttons in the nav keep their own fill; the generic nav hover must not repaint them. */
.pm-nav a.pm-cta:hover { background: var(--asb-primary-2); }

@media (max-width: 720px) {
    .pm-nav a { padding: 8px; font-size: 14px; }
    .pm-brand span { display: none; }
}

/* ---- Footer ---- */
.pm-footer {
    background: var(--pm-bg-alt);
    border-top: 1px solid var(--pm-border);
    padding: 48px 0 24px;
    margin-top: auto;
}

.pm-footer__cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 28px;
}

.pm-footer h2 {
    font-size: 12px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--pm-ink-muted);
    margin: 0 0 12px;
    font-weight: 700;
}

.pm-footer ul { list-style: none; margin: 0; padding: 0; }
.pm-footer li { margin-bottom: 8px; }

.pm-footer a {
    color: var(--pm-ink);
    text-decoration: none;
    font-size: 15px;
}

.pm-footer a:hover { text-decoration: underline; color: var(--pm-accent); }

.pm-footer__legal {
    margin-top: 32px;
    padding-top: 18px;
    border-top: 1px solid var(--pm-border);
    font-size: 14px;
    color: var(--pm-ink-muted);
}

.pm-footer--compact {
    background: transparent;
    border-top: 1px solid var(--asb-border);
    padding: 16px 0;
    font-size: 13px;
}

.pm-footer--compact .pm-footer__inline {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    align-items: center;
    justify-content: center;
    color: var(--asb-muted);
}

.pm-footer--compact a { font-size: 13px; color: inherit; }

/* ---- Help link ---- */
.help-email-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    font-weight: 600;
    min-height: 40px;
}

/* ---- Demo mode ---- */
.pm-demo-banner {
    background: var(--pm-bg-tint);
    border: 1px solid var(--pm-border);
    border-radius: var(--pm-radius);
    padding: 14px 18px;
    margin: 18px 0;
    font-size: 15px;
}

.pm-demo-banner strong { color: var(--pm-ink); }

.pm-demo-panes {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

@media (max-width: 980px) {
    .pm-demo-panes { grid-template-columns: 1fr; }
}

.pm-demo-story {
    max-height: 620px;
    overflow-y: auto;
    border: 1px solid var(--pm-border);
    border-radius: var(--pm-radius);
    background: var(--pm-bg);
    padding: 20px 24px;
}

.pm-demo-story h4 {
    font-size: 17px;
    font-weight: 700;
    margin: 22px 0 10px;
    color: var(--pm-ink);
}

.pm-demo-story h4:first-child { margin-top: 0; }
.pm-demo-story p { margin: 0 0 12px; line-height: 1.7; color: var(--pm-ink); }

/* Feature 27 §8 — these three rules mirror .edit-paragraph in the scoped EditStory.razor.css.
   Scoped styles cannot reach this component, so the values are duplicated deliberately; keep
   them in step with that file. */
.pm-demo-story .edit-paragraph {
    padding: 0.15rem 0.4rem;
    border-left: 3px solid transparent;
    scroll-margin-top: 1rem;
}

.pm-demo-story .edit-paragraph.is-active {
    border-left-color: #7c3aed;
    background: #f5f3ff;
}

.pm-demo-story .edit-paragraph mark {
    background: #fde68a;
    padding: 0 0.1rem;
}

.pm-demo-chat {
    border: 1px solid var(--pm-border);
    border-radius: var(--pm-radius);
    background: var(--pm-bg);
    padding: 18px 20px;
}

.pm-demo-msg { margin-bottom: 14px; }
.pm-demo-msg__who { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--pm-ink-muted); }
.pm-demo-msg__body { margin-top: 4px; line-height: 1.6; color: var(--pm-ink); }
.pm-demo-msg--user .pm-demo-msg__body { background: var(--pm-bg-alt); border-radius: 10px; padding: 10px 14px; }

.pm-demo-composer { display: flex; gap: 8px; margin-top: 14px; }
.pm-demo-composer input {
    flex: 1;
    min-height: 44px;
    padding: 10px 14px;
    border: 1px solid var(--pm-border);
    border-radius: 10px;
    font: inherit;
}

/* ---- Shared public report shell (used by /share/report/{id}) ---- */
.public-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.public-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 24px;
    border-bottom: 1px solid var(--asb-border);
}

.public-brand {
    font-weight: 800;
    font-size: 18px;
    text-decoration: none;
    color: var(--asb-text);
}

.public-content {
    flex: 1;
    max-width: 1140px;
    width: 100%;
    margin: 0 auto;
    padding: 24px;
    box-sizing: border-box;
}

.pr-explainer {
    max-width: 72ch;
    margin-inline: auto;
    font-size: 15px;
    line-height: 1.6;
}

.pr-explainer p {
    margin-bottom: 12px;
}

/* Only the four permitted motion cases ship, and all of them stop here. */
@media (prefers-reduced-motion: reduce) {
    .public-marketing *,
    .public-marketing *::before,
    .public-marketing *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}