/* Plus Jakarta Sans, self-hosted (SIL OFL 1.1 — see fonts/plus-jakarta-sans/OFL.txt).
   Not loaded from Google Fonts: that leaks every visitor's IP to
   Google on first paint, which German courts have held is a GDPR
   violation without consent (LG München I, Az. 3 O 17493/20). */
@font-face {
    font-family: "Plus Jakarta Sans";
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url("/static/fonts/plus-jakarta-sans/PlusJakartaSans-Variable.woff2") format("woff2");
}

:root {
    --paper: #F3F8EF;
    --paper-raised: #FFFFFF;
    --ink: #17291D;
    --muted: #5E7566;
    --line: #DAE6D5;
    --accent: #2E9E63;
    --accent-strong: #227A4C;
    --accent-soft: #E3F3E7;
    --sun: #F0B429;
    --on-accent: #FBFFF9;
    --on-sun: #2B2000;
    --warn: #C97F0E;
    --warn-soft: #FBEEDA;
    --danger: #C1503A;
    --danger-soft: #FBE7E1;
    --shadow: 0 1px 2px rgba(23, 41, 29, 0.06), 0 4px 14px rgba(23, 41, 29, 0.05);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --paper: #0F1C15;
        --paper-raised: #16261D;
        --ink: #E7F3EA;
        --muted: #93AD9C;
        --line: #274434;
        --accent: #52C285;
        --accent-strong: #7ED9A6;
        --accent-soft: #1B3527;
        --sun: #F2C34E;
        --on-accent: #08150E;
        --on-sun: #2B2000;
        --warn: #E8B84B;
        --warn-soft: #2E2717;
        --danger: #E2887A;
        --danger-soft: #3A2019;
        --shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 4px 16px rgba(0, 0, 0, 0.25);
    }
}

:root[data-theme="dark"] {
    --paper: #0F1C15;
    --paper-raised: #16261D;
    --ink: #E7F3EA;
    --muted: #93AD9C;
    --line: #274434;
    --accent: #52C285;
    --accent-strong: #7ED9A6;
    --accent-soft: #1B3527;
    --sun: #F2C34E;
    --on-accent: #08150E;
    --on-sun: #2B2000;
    --warn: #E8B84B;
    --warn-soft: #2E2717;
    --danger: #E2887A;
    --danger-soft: #3A2019;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 4px 16px rgba(0, 0, 0, 0.25);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: "Plus Jakarta Sans", -apple-system, "Segoe UI", Roboto, sans-serif;
    line-height: 1.55;
    background-image: radial-gradient(ellipse 60% 40% at 12% -10%, var(--accent-soft) 0%, transparent 60%),
    radial-gradient(ellipse 50% 35% at 100% 0%, var(--warn-soft) 0%, transparent 55%);
    background-repeat: no-repeat;
    background-attachment: fixed;
}

h1, h2, .brand {
    font-family: "Plus Jakarta Sans", -apple-system, sans-serif;
    font-weight: 700;
    letter-spacing: -0.01em;
}

a {
    color: var(--accent-strong);
}

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    row-gap: 0.7rem;
    gap: 1.2rem;
    padding: 0.9rem 1.5rem;
    border-bottom: 1px solid var(--line);
    background: var(--paper-raised);
}

@media (max-width: 700px) {
    .pub-nav {
        order: 3;
        flex-basis: 100%;
        justify-content: center;
        gap: 1.1rem;
    }
}

@media (max-width: 460px) {
    .pub-actions .btn-ghost {
        display: none;
    }
}

.brand {
    font-weight: 800;
    letter-spacing: 0.01em;
    text-decoration: none;
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.05rem;
}

.brand .dot {
    width: 1.1em;
    height: 1.1em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    line-height: 1;
    transition: transform 0.2s ease;
}

.brand .dot::before {
    content: "🌱";
}

.brand:hover .dot {
    transform: scale(1.12);
}

.topnav {
    display: flex;
    gap: 1.3rem;
    font-size: 0.9rem;
    flex: 1;
}

.topnav a {
    color: var(--muted);
    text-decoration: none;
    font-weight: 600;
    padding: 0.2em 0;
    border-bottom: 2px solid transparent;
}

.topnav a:hover {
    color: var(--ink);
    border-bottom-color: var(--line);
}

.usermenu {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.82rem;
    color: var(--muted);
}

.usermenu form {
    display: inline;
}

.orgpicker {
    display: flex;
    gap: 0.4rem;
}

.orgpicker .linklike {
    border: 1px solid var(--line);
    border-radius: 99px;
    padding: 0.25em 0.7em;
    text-decoration: none;
    color: var(--muted);
    background: none;
}

.orgpicker .linklike.active {
    background: var(--accent);
    color: var(--on-accent);
    border-color: var(--accent);
}

.orgname {
    font-weight: 700;
    color: var(--ink);
}

.orgnew {
    color: var(--muted);
    text-decoration: none;
    font-size: 0.8rem;
}

.orgnew:hover {
    color: var(--accent-strong);
}

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

.theme-switch {
    margin-left: auto;
    flex-shrink: 0;
    display: inline-flex;
    border: 1px solid var(--line);
    border-radius: 999px;
    overflow: hidden;
}

.theme-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--muted);
    cursor: pointer;
    padding: 0.45em 0.65em;
    font: inherit;
}

.theme-btn + .theme-btn {
    border-left: 1px solid var(--line);
}

.theme-btn[data-theme-btn="light"] {
    background: var(--accent);
    color: var(--on-accent);
}

:root[data-theme="dark"] .theme-btn[data-theme-btn="light"] {
    background: none;
    color: var(--muted);
}

:root[data-theme="dark"] .theme-btn[data-theme-btn="dark"] {
    background: var(--accent);
    color: var(--on-accent);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .theme-btn[data-theme-btn="light"] {
        background: none;
        color: var(--muted);
    }

    :root:not([data-theme="light"]) .theme-btn[data-theme-btn="dark"] {
        background: var(--accent);
        color: var(--on-accent);
    }
}

.wrap {
    max-width: 880px;
    margin: 0 auto;
    padding: 2.2rem 1.5rem 4rem;
}

.page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

h1 {
    margin: 0;
    font-size: 1.85rem;
    font-weight: 800;
}

.sub {
    color: var(--muted);
    margin: 0.35rem 0 0;
    font-size: 0.94rem;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    padding: 0.6em 1.15em;
    border-radius: 999px;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 700;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}

.btn-primary {
    background: var(--accent);
    color: var(--on-accent);
    box-shadow: var(--shadow);
}

.btn-primary:hover {
    background: var(--accent-strong);
    transform: translateY(-1px);
}

.btn-ghost {
    border-color: var(--line);
    color: var(--ink);
    background: var(--paper-raised);
}

.btn-ghost:hover {
    border-color: var(--accent);
    color: var(--accent-strong);
    transform: translateY(-1px);
}

.catfilter {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 1.6rem;
}

.catfilter a {
    text-decoration: none;
    font-size: 0.82rem;
    color: var(--muted);
    border: 1px solid var(--line);
    padding: 0.35em 0.8em;
    border-radius: 99px;
    background: var(--paper-raised);
}

.catfilter a:hover {
    border-color: var(--accent);
    color: var(--accent-strong);
}

.catfilter a.active {
    background: var(--accent);
    color: var(--on-accent);
    border-color: var(--accent);
}

.catgroup {
    margin-bottom: 2rem;
}

.catgroup h2 {
    font-size: 1.1rem;
    margin: 0 0 0.7rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.count {
    font-family: ui-monospace, Menlo, monospace;
    font-size: 0.75rem;
    color: var(--muted);
    font-weight: 400;
}

.entrylist {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.entry {
    border: 1px solid var(--line);
    background: var(--paper-raised);
    border-radius: 12px;
    padding: 0.95rem 1.2rem;
    box-shadow: var(--shadow);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.entry:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(23, 41, 29, 0.08), 0 8px 20px rgba(23, 41, 29, 0.08);
}

.entry-q {
    font-weight: 700;
    margin-bottom: 0.35rem;
}

.entry-a {
    color: var(--muted);
    font-size: 0.92rem;
    white-space: pre-wrap;
}

.entry-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 0.7rem;
    font-size: 0.78rem;
    color: var(--muted);
}

.entry-meta a {
    color: var(--muted);
}

.entry-meta .spacer {
    flex: 1;
}

.linklike {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: var(--muted);
    cursor: pointer;
    text-decoration: underline;
}

.linklike.danger {
    color: var(--danger);
}

.empty {
    color: var(--muted);
    background: var(--paper-raised);
    border: 1px dashed var(--line);
    border-radius: 12px;
    padding: 1.4rem 1.2rem;
}

.entryform {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.entryform label {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: var(--muted);
    font-weight: 700;
}

.entryform input, .entryform select, .entryform textarea {
    font: inherit;
    padding: 0.65em 0.8em;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--paper-raised);
    color: var(--ink);
    resize: vertical;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.entryform input:focus, .entryform select:focus, .entryform textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.entryform label.inline {
    flex-direction: row;
    align-items: center;
    gap: 0.4em;
    font-weight: 400;
}

.current-evidence {
    font-size: 0.85rem;
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: 0.8em;
    flex-wrap: wrap;
}

.form-actions {
    display: flex;
    gap: 0.8rem;
    margin-top: 0.4rem;
}

.grid3 {
    display: grid;
    grid-template-columns:1fr 1fr 1fr;
    gap: 1rem;
}

.hint {
    font-size: 0.88rem;
    color: var(--ink);
    background: var(--accent-soft);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 0.85em 1.1em;
    margin-bottom: 1.1rem;
}

.hint a {
    font-weight: 700;
}

.form-error {
    font-size: 0.88rem;
    color: var(--danger);
    background: var(--paper-raised);
    border: 1px solid var(--danger);
    border-radius: 10px;
    padding: 0.7em 1em;
    margin-bottom: 1rem;
}

.tbl-wrap {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: var(--shadow);
}

.datatable {
    border-collapse: collapse;
    width: 100%;
    font-size: 0.88rem;
}

.datatable th, .datatable td {
    text-align: left;
    padding: 0.6em 0.9em;
    border-bottom: 1px solid var(--line);
}

.datatable thead th {
    background: var(--paper-raised);
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
}

.datatable tbody tr {
    background: var(--paper-raised);
}

.datatable tbody tr:hover {
    background: var(--accent-soft);
}

.datatable tbody tr:last-child td {
    border-bottom: none;
}

.datatable code {
    font-family: ui-monospace, Menlo, monospace;
    font-size: 0.85em;
}

.datatable .muted {
    color: var(--muted);
    font-size: 0.85em;
}

.sheet-preview h2 {
    font-size: 1.1rem;
    margin: 0 0 0.6rem;
}

.preview-legend {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.2rem 0.4rem;
    font-size: 0.82rem;
}

.swatch {
    display: inline-block;
    width: 0.9em;
    height: 0.9em;
    border-radius: 3px;
    vertical-align: -0.12em;
    margin-right: 0.15em;
}

.swatch-question {
    background: var(--accent-soft);
    border: 1px solid var(--accent);
}

.swatch-answer {
    background: var(--warn-soft);
    border: 1px solid var(--warn);
}

.swatch-start {
    background: none;
    border-top: 2px solid var(--accent-strong);
    border-radius: 0;
    height: 0;
    width: 1.1em;
    margin-bottom: 0.45em;
}

.datatable th.col-question, .datatable td.col-question {
    background: var(--accent-soft);
}

.datatable th.col-answer, .datatable td.col-answer {
    background: var(--warn-soft);
}

.datatable tbody tr.row-start td, .datatable tbody tr.row-start th {
    border-top: 2px solid var(--accent-strong);
}

.datatable tbody tr.row-end td, .datatable tbody tr.row-end th {
    border-bottom: 2px solid var(--accent-strong);
}

.badge {
    font-family: ui-monospace, Menlo, monospace;
    font-size: 0.72rem;
    padding: 0.25em 0.6em;
    border-radius: 99px;
    border: 1px solid var(--line);
    color: var(--muted);
    text-transform: uppercase;
}

.badge-uploaded {
    color: var(--warn);
    border-color: var(--warn);
    background: var(--warn-soft);
}

.badge-imported, .badge-matched {
    color: var(--accent-strong);
    border-color: var(--accent);
    background: var(--accent-soft);
}

.badge-reviewed, .badge-exported {
    color: var(--accent-strong);
    border-color: var(--accent);
    background: var(--accent-soft);
}

.badge-sim-high {
    color: var(--accent-strong);
    border-color: var(--accent);
    background: var(--accent-soft);
}

.badge-sim-exact, .badge-sim-very_high {
    color: var(--on-accent);
    border-color: var(--accent-strong);
    background: var(--accent-strong);
}

.badge-sim-low {
    color: var(--danger);
    border-color: var(--danger);
    background: var(--danger-soft);
}

.progress-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--paper-raised);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 0.9rem 1.2rem;
    margin-bottom: 1.2rem;
    box-shadow: var(--shadow);
}

.progress-track {
    flex: 1;
    height: 10px;
    border-radius: 99px;
    background: var(--line);
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--accent), var(--sun));
    transition: width 0.4s ease;
}

.progress-msg {
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--ink);
    white-space: nowrap;
}

.qa-list {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.qa-item {
    border: 1px solid var(--line);
    background: var(--paper-raised);
    border-radius: 12px;
    padding: 0.95rem 1.2rem;
    box-shadow: var(--shadow);
}

.qa-question {
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.qa-question code {
    font-family: ui-monospace, Menlo, monospace;
    font-weight: 400;
    color: var(--muted);
    font-size: 0.82em;
    margin-right: 0.4em;
}

.qa-answer {
    font-size: 0.9rem;
}

.qa-answer .badge {
    margin-right: 0.6em;
    margin-bottom: 0.4em;
    display: inline-block;
}

.qa-answer.muted {
    color: var(--muted);
}

.alt-list {
    margin: 0.5rem 0 0;
    padding-left: 1.2rem;
    font-size: 0.87rem;
    color: var(--muted);
}

.alt-list li {
    margin-bottom: 0.35rem;
}

.alt-list .badge {
    margin-right: 0.4em;
}

.qa-matched-question {
    font-size: 0.86rem;
    color: var(--muted);
    margin: 0.35rem 0;
}

.alt-question {
    display: block;
    color: var(--muted);
    font-style: italic;
}

.alt-pick {
    font-size: 0.76rem;
    margin-left: 0.5em;
    border: 1px solid var(--accent);
    color: var(--accent-strong);
    background: none;
    border-radius: 99px;
    padding: 0.15em 0.75em;
    cursor: pointer;
}

.alt-pick:hover {
    background: var(--accent);
    color: var(--on-accent);
}

.qa-item textarea {
    width: 100%;
    font: inherit;
    font-size: 0.9rem;
    margin-top: 0.6rem;
    padding: 0.65em 0.8em;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--paper-raised);
    color: var(--ink);
    resize: vertical;
}

.qa-item textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.qa-controls {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 0.6rem;
    font-size: 0.82rem;
    color: var(--muted);
}

.qa-controls label.inline {
    display: flex;
    align-items: center;
    gap: 0.4em;
    font-weight: 400;
}

.qa-controls select {
    font: inherit;
    font-size: 0.82rem;
    padding: 0.35em 0.6em;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--paper-raised);
    color: var(--ink);
}

/* ---------------------------------------------------------------------
   Public marketing area (landing page, pricing page) — same tokens and
   component language as the app itself (rounded cards, soft shadows,
   Plus Jakarta Sans), extended with a few section-level layout patterns
   the narrow authenticated .wrap doesn't need.
--------------------------------------------------------------------- */

.pub-nav {
    display: flex;
    gap: 1.5rem;
    font-size: 0.92rem;
    flex: 1;
}

.pub-nav a {
    color: var(--muted);
    text-decoration: none;
    font-weight: 600;
}

.pub-nav a:hover {
    color: var(--ink);
}

.pub-actions {
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

/* One control, whichever element it is (a link on the public pages, a
   button in the app): the whole pill switches to the other language. */
.lang-switch {
    display: inline-flex;
    border: 1px solid var(--line);
    border-radius: 999px;
    overflow: hidden;
    font: inherit;
    font-size: 0.78rem;
    background: none;
    padding: 0;
    cursor: pointer;
    text-decoration: none;
}

.lang-btn {
    color: var(--muted);
    padding: 0.4em 0.75em;
}

.lang-btn + .lang-btn {
    border-left: 1px solid var(--line);
}

.lang-btn.active {
    background: var(--accent);
    color: var(--on-accent);
}

.pub-wrap {
    max-width: 1080px;
    margin: 0 auto;
    padding: clamp(2rem, 5vw, 3.5rem) 1.5rem 4rem;
    display: flex;
    flex-direction: column;
    gap: clamp(3rem, 6vw, 4.5rem);
}

.pub-footer {
    text-align: center;
    padding: 2rem 1.5rem 3rem;
    color: var(--muted);
    font-size: 0.82rem;
}

.pub-footer-src {
    display: block;
    margin-top: 0.4rem;
    font-size: 0.76rem;
    opacity: 0.85;
}

.pub-footer-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem 1.4rem;
    margin-bottom: 1.1rem;
    font-size: 0.86rem;
}

.pub-footer-nav a {
    color: var(--muted);
    text-decoration: none;
}

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

/* Breadcrumb trail backing the BreadcrumbList structured data — Google
   only honours the markup when the trail is visible on the page. */
.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    font-size: 0.82rem;
    color: var(--muted);
    margin-bottom: -1.5rem;
}

.breadcrumb a {
    color: var(--muted);
}

.stat-cap sup,
.lead sup {
    color: var(--accent-strong);
    font-weight: 700;
    margin-left: 0.1em;
}

/* The marker is the link to its note in the footer. It keeps the sup's
   own colour rather than the global link colour, so the numbers still
   read as footnote markers and not as inline links in the copy. */
.stat-cap sup a,
.lead sup a {
    color: inherit;
    text-decoration: none;
}

.stat-cap sup a:hover,
.stat-cap sup a:focus-visible,
.lead sup a:hover,
.lead sup a:focus-visible {
    text-decoration: underline;
}

.eyebrow {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent-strong);
}

.pub-wrap h2 {
    font-size: clamp(1.5rem, 3vw, 2rem);
    margin-top: 0.5rem;
    text-wrap: balance;
}

/* Text beside a visual — used by the in-app section, and anywhere else
   a block of copy needs a figure next to it. */
.split-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: clamp(2rem, 5vw, 3.5rem);
    align-items: center;
    margin-top: 1.6rem;
}

@media (max-width: 820px) {
    .split-grid { grid-template-columns: 1fr; }
}

/* ---------- hero ----------
   The flow animation carries the hero visually, so the copy above it
   is centred over the full width rather than sharing a two-column row.
------------------------------------------------------------------- */

.hero-intro {
    max-width: 60ch;
    margin: 0 auto;
    text-align: center;
}

.hero h1 {
    font-size: clamp(2.2rem, 5vw, 3.4rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin: 0.7rem 0 0;
    text-wrap: balance;
}

.hero h1 em {
    font-style: normal;
    color: var(--accent-strong);
}

.hero-sub {
    font-size: 1.08rem;
    color: var(--muted);
    max-width: 46ch;
    margin: 1.2rem auto 0;
}

.hero-cta {
    display: flex;
    justify-content: center;
    gap: 0.9rem;
    margin-top: 1.8rem;
    flex-wrap: wrap;
}

.trust-row {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 1.4rem;
}

.hero .flow-diagram-wrap {
    margin-top: clamp(2rem, 4vw, 3rem);
}

.trust-chip {
    display: inline-flex;
    align-items: center;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--accent-strong);
    background: var(--accent-soft);
    border: 1px solid var(--line);
    padding: 0.4em 0.85em;
    border-radius: 999px;
    white-space: nowrap;
}

/* ---------- hero mockup (fake product UI, not a maintained screenshot) ---------- */

.mockup-window {
    background: var(--paper-raised);
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: var(--shadow);
    overflow: hidden;
}

.mockup-titlebar {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.7rem 0.9rem;
    border-bottom: 1px solid var(--line);
    background: var(--paper);
}

.mockup-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--line);
    display: inline-block;
}

.mockup-filename {
    margin-left: 0.5rem;
    font-size: 0.76rem;
    color: var(--muted);
    font-family: ui-monospace, Menlo, monospace;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mockup-body {
    padding: 1.1rem 1.2rem 1.3rem;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.mockup-progress {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 0.2rem;
}

.mockup-progress-track {
    flex: 1;
    height: 8px;
    border-radius: 99px;
    background: var(--line);
    overflow: hidden;
}

.mockup-progress-fill {
    height: 100%;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--accent), var(--sun));
}

.mockup-row {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-size: 0.85rem;
    padding-bottom: 0.65rem;
    border-bottom: 1px dashed var(--line);
}

.mockup-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.mockup-row .badge {
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.mockup-q {
    color: var(--ink);
}

.mockup-caption {
    margin: 0.6rem 0 0;
    font-size: 0.74rem;
    color: var(--muted);
    text-align: center;
    opacity: 0.85;
}

/* ---------- stats ---------- */

.stats-band {
    background: var(--paper-raised);
    border: 1px solid var(--line);
    border-radius: 20px;
    box-shadow: var(--shadow);
    padding: clamp(1.6rem, 4vw, 2.4rem);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.6rem;
    margin-top: 1.6rem;
}

@media (max-width: 760px) {
    .stats-grid { grid-template-columns: 1fr; }
}

.stat {
    border-left: 3px solid var(--accent);
    padding-left: 1.1rem;
}

.stat-num {
    font-size: clamp(1.9rem, 3.4vw, 2.4rem);
    font-weight: 800;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.stat-cap {
    margin-top: 0.55rem;
    color: var(--muted);
    font-size: 0.92rem;
    max-width: 32ch;
}

.stat-src {
    margin-top: 0.5rem;
    font-size: 0.74rem;
    color: var(--muted);
    opacity: 0.8;
}

/* ---------- process flow diagram ----------
   One questionnaire travels left to right: in from the inbox, past the
   answer bank (which sends its matching answers up into it), on to the
   person who signs it off, and back out to the customer. Every leg of
   that journey is one shared 9s timeline, so the parts stay in sync —
   change the duration in one place and all of it still lines up.
------------------------------------------------------------------- */

.flow-diagram-wrap {
    margin-top: 1.6rem;
    background: var(--paper-raised);
    border: 1px solid var(--line);
    border-radius: 20px;
    box-shadow: var(--shadow);
    padding: clamp(1rem, 3vw, 1.8rem) clamp(0.8rem, 4vw, 2.2rem) 1.3rem;
}

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

.flow-track {
    fill: none;
    stroke: var(--line);
    stroke-width: 3;
    stroke-linecap: round;
}

.flow-dash {
    fill: none;
    stroke: var(--accent);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 4 16;
    animation: flow-move 1.8s linear infinite;
}

@keyframes flow-move {
    to { stroke-dashoffset: -40; }
}

/* The travelling questionnaire. Parked at the inbox when unanimated. */
.flow-doc {
    transform-box: view-box;
    transform-origin: 0 0;
    transform: translate(120px, 72px);
    animation: flow-doc-travel 9s linear infinite;
}

@keyframes flow-doc-travel {
    0%   { transform: translate(120px, 72px); opacity: 0; }
    4%   { transform: translate(120px, 72px); opacity: 1; }
    18%  { transform: translate(120px, 72px); opacity: 1; }
    28%  { transform: translate(360px, 72px); opacity: 1; }
    50%  { transform: translate(360px, 72px); opacity: 1; }
    58%  { transform: translate(600px, 72px); opacity: 1; }
    74%  { transform: translate(600px, 72px); opacity: 1; }
    84%  { transform: translate(840px, 72px); opacity: 1; }
    94%  { transform: translate(840px, 72px); opacity: 1; }
    98%  { transform: translate(840px, 72px); opacity: 0; }
    100% { transform: translate(120px, 72px); opacity: 0; }
}

/* Answers leaving the bank for the questionnaire's blank cells.
   Each pill carries its own delta as --dx / --dy. */
.flow-pill {
    transform-box: view-box;
    transform-origin: 0 0;
    opacity: 0;
    animation: flow-pill-fly 9s linear infinite;
}

@keyframes flow-pill-fly {
    0%, 32%   { transform: translate(0, 0); opacity: 0; }
    35%       { transform: translate(0, 0); opacity: 1; }
    45%       { transform: translate(var(--dx), var(--dy)); opacity: 1; }
    49%, 100% { transform: translate(var(--dx), var(--dy)); opacity: 0; }
}

/* The cells filling in as the pills land. */
.flow-answer {
    opacity: 0;
    animation: flow-answer-fill 9s linear infinite;
}

@keyframes flow-answer-fill {
    0%, 44%  { opacity: 0; }
    49%, 96% { opacity: 1; }
    100%     { opacity: 0; }
}

/* The sign-off badge, once the person has approved it. */
.flow-check {
    transform-box: fill-box;
    transform-origin: center;
    opacity: 0;
    animation: flow-check-pop 9s linear infinite;
}

@keyframes flow-check-pop {
    0%, 62%  { opacity: 0; transform: scale(0.4); }
    70%      { opacity: 1; transform: scale(1.12); }
    75%, 96% { opacity: 1; transform: scale(1); }
    100%     { opacity: 0; transform: scale(1); }
}

.flow-bank-glow {
    opacity: 0;
    animation: flow-bank-active 9s linear infinite;
}

@keyframes flow-bank-active {
    0%, 28%   { opacity: 0; }
    34%, 46%  { opacity: 0.5; }
    54%, 100% { opacity: 0; }
}

.flow-person-glow {
    opacity: 0;
    animation: flow-person-active 9s linear infinite;
}

@keyframes flow-person-active {
    0%, 58%   { opacity: 0; }
    64%, 74%  { opacity: 0.55; }
    80%, 100% { opacity: 0; }
}

/* Without motion the four stations and their captions carry the whole
   story on their own, so the travelling parts simply stay away. */
@media (prefers-reduced-motion: reduce) {
    .flow-dash,
    .flow-bank-glow,
    .flow-person-glow {
        animation: none;
    }

    .flow-doc,
    .flow-pill {
        display: none;
    }
}

.flow-captions {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.8rem;
    margin-top: 1.1rem;
    text-align: center;
}

.flow-cap-title {
    font-weight: 700;
    font-size: 0.9rem;
}

.flow-cap-sub {
    font-size: 0.78rem;
    color: var(--muted);
    margin-top: 0.2rem;
    text-wrap: pretty;
}

/* Secondary detail alongside the copy it qualifies. */
.flow-note {
    margin: 1.1rem 0 0;
    padding-left: 0.9rem;
    border-left: 2px solid var(--line);
    font-size: 0.86rem;
    color: var(--muted);
}

.split-grid p {
    margin-top: 0;
    color: var(--muted);
}

/* Below this the 960-unit diagram shrinks past legibility and the
   captions no longer sit under their stations, so the diagram steps
   aside and the captions become the numbered sequence instead.

   The journey still plays, just turned on its side: each number lights
   up as the questionnaire reaches that station and the rule between
   them fills while it travels. The beats are the same percentages as
   flow-doc-travel above, so phone and desktop tell one story at one
   pace — move a beat there and it has to move here too. */
@media (max-width: 760px) {
    .flow-diagram {
        display: none;
    }

    .flow-captions {
        grid-template-columns: 1fr;
        gap: 1.1rem;
        margin-top: 0;
        text-align: left;
        counter-reset: flowstep;
    }

    .flow-captions > div {
        counter-increment: flowstep;
        position: relative;
        padding-left: 2.4rem;
    }

    .flow-captions > div::before {
        content: counter(flowstep);
        position: absolute;
        left: 0;
        top: 0.05rem;
        width: 1.7rem;
        height: 1.7rem;
        border-radius: 999px;
        background: var(--accent-soft);
        color: var(--accent-strong);
        font-size: 0.82rem;
        font-weight: 800;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* The rule from one number down to the next. Its track is the line
       colour; the gradient on top is the part already travelled. */
    .flow-captions > div::after {
        content: "";
        position: absolute;
        left: calc(0.85rem - 1px);
        top: 1.95rem;
        bottom: -1.15rem;
        width: 2px;
        border-radius: 2px;
        background-color: var(--line);
        background-image: linear-gradient(var(--accent), var(--accent));
        background-repeat: no-repeat;
        background-size: 100% 0;
    }

    .flow-captions > div:last-child::after {
        content: none;
    }

    /* One rule per station rather than a shared animation with delays:
       a delay would shift each element's reset too, so the four numbers
       would go dark one after another instead of together. */
    .flow-captions > div:nth-child(1)::before { animation: flow-step-a 9s linear infinite; }
    .flow-captions > div:nth-child(2)::before { animation: flow-step-b 9s linear infinite; }
    .flow-captions > div:nth-child(3)::before { animation: flow-step-c 9s linear infinite; }
    .flow-captions > div:nth-child(4)::before { animation: flow-step-d 9s linear infinite; }

    .flow-captions > div:nth-child(1)::after { animation: flow-link-a 9s linear infinite; }
    .flow-captions > div:nth-child(2)::after { animation: flow-link-b 9s linear infinite; }
    .flow-captions > div:nth-child(3)::after { animation: flow-link-c 9s linear infinite; }
}

@keyframes flow-step-a {
    0%, 3%   { background: var(--accent-soft); color: var(--accent-strong); }
    5%, 96%  { background: var(--accent); color: var(--on-accent); }
    100%     { background: var(--accent-soft); color: var(--accent-strong); }
}

@keyframes flow-step-b {
    0%, 27%  { background: var(--accent-soft); color: var(--accent-strong); }
    29%, 96% { background: var(--accent); color: var(--on-accent); }
    100%     { background: var(--accent-soft); color: var(--accent-strong); }
}

@keyframes flow-step-c {
    0%, 57%  { background: var(--accent-soft); color: var(--accent-strong); }
    59%, 96% { background: var(--accent); color: var(--on-accent); }
    100%     { background: var(--accent-soft); color: var(--accent-strong); }
}

@keyframes flow-step-d {
    0%, 83%  { background: var(--accent-soft); color: var(--accent-strong); }
    85%, 96% { background: var(--accent); color: var(--on-accent); }
    100%     { background: var(--accent-soft); color: var(--accent-strong); }
}

@keyframes flow-link-a {
    0%, 18%  { background-size: 100% 0; }
    28%, 96% { background-size: 100% 100%; }
    100%     { background-size: 100% 0; }
}

@keyframes flow-link-b {
    0%, 50%  { background-size: 100% 0; }
    58%, 96% { background-size: 100% 100%; }
    100%     { background-size: 100% 0; }
}

@keyframes flow-link-c {
    0%, 74%  { background-size: 100% 0; }
    84%, 96% { background-size: 100% 100%; }
    100%     { background-size: 100% 0; }
}

/* Same bargain as the desktop diagram: without motion the numbered
   list stands on its own, so nothing lights up or fills.

   The :nth-child(n) is load-bearing, not decoration — it matches every
   child exactly as a bare selector would, but carries the same
   specificity as the :nth-child(1..4) rules that set these animations.
   Without it those rules win and the animation keeps running. */
@media (prefers-reduced-motion: reduce) {
    .flow-captions > div:nth-child(n)::before,
    .flow-captions > div:nth-child(n)::after {
        animation: none;
    }
}

/* ---------- formats / callout ---------- */

.formats-section p {
    color: var(--muted);
    max-width: 68ch;
    margin-top: 1rem;
}

.callout-box {
    margin-top: 1.3rem;
    padding: 1.1rem 1.3rem;
    background: var(--accent-soft);
    border-left: 3px solid var(--accent);
    border-radius: 0 14px 14px 0;
    max-width: 68ch;
}

.callout-box b {
    display: block;
    font-size: 0.78rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--accent-strong);
    margin-bottom: 0.4rem;
}

.callout-box span {
    font-size: 0.92rem;
    color: var(--ink);
}

/* ---------- market band ---------- */

.diff-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.2rem;
    margin-top: 1.6rem;
}

@media (max-width: 760px) {
    .diff-grid { grid-template-columns: 1fr; }
}

.diff-item {
    background: var(--paper-raised);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 1.3rem 1.4rem;
    box-shadow: var(--shadow);
}

.diff-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent-strong);
    margin-bottom: 0.9rem;
}

.diff-icon svg {
    width: 1.3rem;
    height: 1.3rem;
}

.diff-item h3 {
    margin: 0 0 0.5rem;
    font-size: 1.02rem;
}

.diff-item p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--muted);
}

/* ---------- CTA band ---------- */

.cta-band {
    text-align: center;
    background: var(--accent-soft);
    border-radius: 20px;
    padding: clamp(2.2rem, 5vw, 3rem) 1.5rem;
}

.cta-band .hero-cta {
    justify-content: center;
    margin-top: 1.4rem;
}

.cta-sub {
    margin: 0.8rem auto 0;
    max-width: 52ch;
    color: var(--muted);
    font-size: 0.96rem;
}

/* ---------- pricing page ---------- */

.pricing-hero {
    text-align: center;
    max-width: 62ch;
    margin: 0 auto;
}

.pricing-hero h1 {
    font-size: clamp(2rem, 4vw, 2.8rem);
    margin-top: 0.6rem;
    text-wrap: balance;
}

.lead {
    font-size: 1.02rem;
    color: var(--muted);
    margin-top: 1.1rem;
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.2rem;
    margin-top: -1rem;
}

@media (max-width: 860px) {
    .pricing-grid { grid-template-columns: 1fr; }
}

.price-card {
    position: relative;
    background: var(--paper-raised);
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: var(--shadow);
    padding: 1.8rem 1.6rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.price-card.featured {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow);
}

.price-badge {
    position: absolute;
    top: -0.75rem;
    left: 50%;
    transform: translateX(-50%);
    background: var(--accent);
    color: var(--on-accent);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.3em 0.9em;
    border-radius: 999px;
}

.price-card h2 {
    margin: 0.4rem 0 0;
    font-size: 1.2rem;
}

.price-vol {
    color: var(--muted);
    font-size: 0.86rem;
    margin: 0;
}

.price-tag {
    font-size: 2.1rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    margin: 0.5rem 0 0.8rem;
}

.price-tag span {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--muted);
}

.price-terms {
    text-align: center;
    color: var(--muted);
    font-size: 0.86rem;
    margin-top: -1.5rem;
}

/* ---------- FAQ ---------- */

.faq-item {
    background: var(--paper-raised);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 1rem 1.3rem;
    box-shadow: var(--shadow);
    margin-top: 0.9rem;
}

.faq-item summary {
    cursor: pointer;
    font-weight: 700;
    list-style: none;
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item summary::before {
    content: "+";
    display: inline-block;
    width: 1.3em;
    color: var(--accent-strong);
    font-weight: 800;
}

.faq-item[open] summary::before {
    content: "\2212";
}

.faq-item p {
    margin-top: 0.8rem;
    color: var(--muted);
    font-size: 0.92rem;
}