/*
 * PayoutPress
 * The one custom stylesheet, loaded after bootstrap.min.css. Every value comes from docs/design.md: change a value
 * there first, then here. Light only; there is no dark mode.
 */

/* 1. Tokens ------------------------------------------------------------------------------------------------------ */

:root,
[data-bs-theme="light"] {
    --paper: #FAF8F2;
    --paper-raised: #FFFFFF;
    --paper-sunken: #F3EFE6;
    --ink: #1B1A17;
    --text: #2B2A26;
    --muted: #6B6861;
    --dim: #9A968C;
    --border: #E6E1D6;
    --border-strong: #CFC9BA;
    --pencil: #F2B705;
    --pencil-dark: #D9A200;
    --pencil-pale: #FFF4CC;
    --graphite: #4A4740;

    --success: #2E7D32;
    --success-pale: #E8F3E9;
    --danger: #C62828;
    --danger-pale: #FBEAEA;
    --warning: #B26A00;
    --warning-pale: #FFF4CC;

    --font-body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-display: "Plus Jakarta Sans", "Figtree", system-ui, sans-serif;

    --shadow-card: 0 1px 2px rgba(27, 26, 23, 0.04);
    --shadow-raised: 0 1px 2px rgba(27, 26, 23, 0.06), 0 12px 32px rgba(27, 26, 23, 0.08);
    --focus-ring: 0 0 0 3px rgba(242, 183, 5, 0.35);

    /* Bootstrap mapping (design.md section 8) */
    --bs-primary: #F2B705;
    --bs-primary-rgb: 242, 183, 5;
    --bs-primary-text-emphasis: #B26A00;
    --bs-primary-bg-subtle: #FFF4CC;
    --bs-primary-border-subtle: #F0D27A;

    --bs-success: #2E7D32;
    --bs-success-rgb: 46, 125, 50;
    --bs-success-text-emphasis: #2E7D32;
    --bs-success-bg-subtle: #E8F3E9;
    --bs-success-border-subtle: #BFDCC2;

    --bs-danger: #C62828;
    --bs-danger-rgb: 198, 40, 40;
    --bs-danger-text-emphasis: #C62828;
    --bs-danger-bg-subtle: #FBEAEA;
    --bs-danger-border-subtle: #E8B4B4;

    --bs-warning: #F2B705;
    --bs-warning-rgb: 242, 183, 5;
    --bs-warning-text-emphasis: #B26A00;
    --bs-warning-bg-subtle: #FFF4CC;
    --bs-warning-border-subtle: #F0D27A;

    --bs-info: #4A4740;
    --bs-info-rgb: 74, 71, 64;
    --bs-secondary: #6B6861;
    --bs-secondary-rgb: 107, 104, 97;

    --bs-body-bg: #FAF8F2;
    --bs-body-color: #2B2A26;
    --bs-emphasis-color: #1B1A17;
    --bs-secondary-color: #6B6861;
    --bs-tertiary-color: #9A968C;
    --bs-tertiary-bg: #F3EFE6;
    --bs-border-color: #E6E1D6;
    --bs-border-radius: 10px;
    --bs-border-radius-lg: 14px;
    --bs-border-radius-pill: 999px;

    --bs-link-color: #1B1A17;
    --bs-link-hover-color: #1B1A17;
    --bs-link-color-rgb: 27, 26, 23;
    --bs-link-hover-color-rgb: 27, 26, 23;

    --bs-body-font-family: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
    --bs-body-font-size: 0.95rem;
    --bs-body-line-height: 1.55;
    --bs-heading-color: #1B1A17;

    --bs-focus-ring-color: rgba(242, 183, 5, 0.35);
}

/* 2. Base -------------------------------------------------------------------------------------------------------- */

body {
    background: var(--paper);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

a {
    color: var(--ink);
    text-decoration: underline;
    text-decoration-color: var(--pencil);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}
a:hover { color: var(--ink); text-decoration-color: var(--pencil-dark); }

h1, h2, h3, h4, .display-number {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--ink);
    text-wrap: balance;
}

code, .mono { font-family: var(--bs-font-monospace); font-size: 0.85em; }

.caption { font-size: 0.8rem; color: var(--dim); }
.text-muted-ink { color: var(--muted); }

/* 3. Page container ---------------------------------------------------------------------------------------------- */

.app-main { flex: 1 0 auto; }

.app-page {
    max-width: 1100px;
    margin: 0 auto;
    padding: 28px 24px 48px;
}

.page-title {
    font-size: 1.6rem;
    line-height: 1.2;
    letter-spacing: -0.01em;
    margin: 0;
}
.page-subtitle { color: var(--muted); margin: 6px 0 0; }
.page-header { margin-bottom: 24px; }
/* A page header with buttons on the right (Dashboard, Articles); they drop below the title on a phone */
.page-header-actions { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
a.link-quiet { color: inherit; text-decoration: none; }
a.link-quiet:hover { color: var(--ink); text-decoration: underline; }

/* The dashboard: this month in four figures, the latest articles and bulk batches, and shortcuts to start writing */
.dash-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 32px; }
.dash-stat .big-number { font-size: 2rem; }
.dash-list { list-style: none; margin: 0; padding: 0; }
.dash-list li + li { border-top: 1px solid var(--border); }
.dash-list-item { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 20px; color: inherit; text-decoration: none; }
.dash-list-item:hover { background: var(--paper); }
.dash-list-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.dash-list-title { font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-list-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.dash-templates { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dash-template .card-body { display: flex; flex-direction: column; gap: 4px; padding: 16px; }
.dash-template-name { font-weight: 600; color: var(--ink); }
.dash-template-bulk { border-style: dashed; }
.dash-project-select { width: auto; max-width: 220px; }
@media (max-width: 991.98px) {
    .dash-stats { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 575.98px) {
    .dash-stats { gap: 12px; }
    .dash-stat .card-body { padding: 14px; }
    .dash-stat .big-number { font-size: 1.6rem; }
    .dash-templates { grid-template-columns: 1fr; }
    .dash-list-item { padding: 12px 14px; }
}

/* The dashboard's "Your writing": figures, twelve weeks of bars (one series, graphite, so no legend; the current
 *  week is labeled), weeks in a row, and milestones */
.writing-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 32px; align-items: end; }
.writing-figures { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 24px; margin: 0; }
.writing-figures dt { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.writing-figures dd { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; color: var(--ink); margin: 2px 0 0; font-variant-numeric: tabular-nums; }
.writing-streak { font-size: 0.85rem; color: var(--muted); background: var(--pencil-pale); border-radius: 999px; padding: 2px 12px; }
.writing-streak b { color: var(--ink); }
.writing-chart figcaption { display: block; margin-bottom: 8px; }
.writing-bars { display: flex; align-items: flex-end; gap: 2px; height: 104px; border-bottom: 1px solid var(--border); padding-top: 18px; }
.writing-bar { position: relative; flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; outline: none; }
.writing-bar-fill { display: block; width: 100%; max-width: 28px; background: var(--graphite); border-radius: 4px 4px 0 0; }
.writing-bar.is-now .writing-bar-fill { background: var(--ink); }
.writing-bar-value { position: absolute; top: -18px; font-size: 0.75rem; font-weight: 600; color: var(--ink); }
.writing-bar:hover .writing-bar-fill, .writing-bar:focus-visible .writing-bar-fill { background: var(--pencil-dark); }
.writing-bar:hover::after, .writing-bar:focus-visible::after {
    content: attr(data-tip); position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%); z-index: 2;
    white-space: nowrap; background: var(--ink); color: #fff; font-size: 0.75rem; padding: 4px 8px; border-radius: 6px; pointer-events: none;
}
.writing-bar:first-child:hover::after, .writing-bar:first-child:focus-visible::after { left: 0; transform: none; }
.writing-bar:last-child:hover::after, .writing-bar:last-child:focus-visible::after { left: auto; right: 0; transform: none; }
.writing-axis { display: flex; justify-content: space-between; margin-top: 6px; }
.writing-milestones { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 32px; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--border); }
.writing-reached { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.writing-reached .caption { margin-right: 4px; }
.badge-milestone { background: var(--pencil-pale); color: var(--ink); }
@media (max-width: 767.98px) {
    .writing-grid { grid-template-columns: 1fr; gap: 24px; }
    .writing-milestones { grid-template-columns: 1fr; }
}
@media (max-width: 399.98px) {
    .writing-figures { grid-template-columns: repeat(2, 1fr); }
}

/* The dashboard's Get started, until the first article exists: the step's form beside the three steps */
.get-started { border-color: var(--border-strong); }
.get-started .card-body { padding: 28px; }
.get-started-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 40px; }
.get-started-title { font-size: 1.5rem; margin: 4px 0 6px; }
.get-started-steps { list-style: none; margin: 0; padding: 0 0 0 32px; border-left: 1px solid var(--border); display: flex; flex-direction: column; gap: 20px; justify-content: center; }
.get-started-steps li { display: flex; gap: 14px; align-items: flex-start; }
.get-started-number {
    flex-shrink: 0; width: 28px; height: 28px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
    font-weight: 600; font-size: 0.85rem; border: 1px solid var(--border-strong); color: var(--muted); background: var(--paper-raised);
}
.get-started-step-name { font-weight: 600; color: var(--ink); }
.get-started-steps li.is-current .get-started-number { background: var(--pencil); border-color: var(--pencil); color: var(--ink); }
.get-started-steps li.is-done .get-started-number { background: var(--ink); border-color: var(--ink); color: #fff; }
.get-started-steps li.is-next .get-started-step-name { color: var(--muted); }
@media (max-width: 991.98px) {
    .get-started-grid { grid-template-columns: 1fr; gap: 24px; }
    .get-started-steps { padding: 20px 0 0; border-left: 0; border-top: 1px solid var(--border); }
}
@media (max-width: 575.98px) {
    .get-started .card-body { padding: 20px; }
}

/* Articles: the filters above the list, and the pages below it */
.filter-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.filter-bar .form-select { width: auto; }
.filter-search { flex: 1 1 220px; }
.pager { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 16px; }
@media (max-width: 575.98px) {
    .filter-bar .form-select, .filter-bar .btn { flex: 1 1 auto; }
}

.panel-heading { font-size: 1.15rem; line-height: 1.3; margin: 0 0 12px; }

.form-narrow { max-width: 560px; }

@media (max-width: 575.98px) {
    .app-page { padding: 20px 16px 40px; }
}

/* Inline code (Bootstrap's default is pink, which this palette doesn't have) */
code { color: var(--ink); background: var(--paper-sunken); border-radius: 6px; padding: 1px 5px; font-size: 0.85em; }

/* 4. Nav bar ----------------------------------------------------------------------------------------------------- */

.navbar {
    background: var(--paper);
    border-bottom: 1px solid var(--border);
    min-height: 56px;
    padding: 0;
}
.navbar .app-nav-inner {
    max-width: 1100px;
    width: 100%;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    min-height: 56px;
}
.navbar-brand { padding: 0; margin-right: 28px; display: flex; align-items: center; }
.navbar-brand img { height: 28px; width: auto; display: block; }

.navbar .nav-link {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--muted);
    text-decoration: none;
    padding: 18px 2px;
    margin-right: 22px;
    transition: color 0.15s ease, box-shadow 0.15s ease;
}
.navbar .nav-link:hover,
.navbar .nav-link:focus { color: var(--ink); }
.navbar .nav-link.active {
    color: var(--ink);
    background: none;
    box-shadow: inset 0 -2px 0 var(--pencil);
}

.nav-balance {
    font-size: 0.8rem;
    color: var(--dim);
    white-space: nowrap;
    margin-left: auto;
    margin-right: 16px;
}
.nav-balance b {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--ink);
    font-size: 0.95rem;
}

.navbar-toggler {
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    padding: 6px 10px;
}
.navbar-toggler:focus { box-shadow: var(--focus-ring); }
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%236B6861' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    width: 1.25em;
    height: 1.25em;
}

.nav-account .dropdown-toggle {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--muted);
    text-decoration: none;
    background: none;
    border: 0;
    padding: 6px 0;
}
.nav-account .dropdown-toggle:hover { color: var(--ink); }
.dropdown-menu {
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow-raised);
    padding: 6px;
    font-size: 0.875rem;
}
.dropdown-item { border-radius: 8px; text-decoration: none; color: var(--text); padding: 7px 12px; }
.dropdown-item:hover, .dropdown-item:focus { background: var(--paper-sunken); color: var(--ink); }
.dropdown-item:active { background: var(--paper-sunken); color: var(--ink); }
.dropdown-header { color: var(--dim); font-size: 0.8rem; padding: 6px 12px; }

@media (max-width: 767.98px) {
    .navbar .app-nav-inner { padding: 0 16px; }
    .navbar-brand { margin-right: 12px; }
    .navbar-collapse { flex-basis: 100%; padding-bottom: 12px; }
    .navbar .nav-link { padding: 10px 0; margin-right: 0; }
    .navbar .nav-link.active { box-shadow: inset 3px 0 0 var(--pencil); padding-left: 12px; }
    .nav-balance { margin-right: 10px; }
    .nav-account { padding-top: 8px; border-top: 1px solid var(--border); }
    .navbar-collapse .btn { width: 100%; margin-top: 8px; }
}

/* The public site's nav (logged out): collapses below 992px; the Start writing button stays visible beside the toggler */
.navbar-public .nav-public-account .nav-link { margin-right: 16px; }
.nav-cta-compact { margin-right: 10px; white-space: nowrap; }
@media (max-width: 991.98px) {
    .navbar-public .navbar-collapse { flex-basis: 100%; padding-bottom: 12px; }
    .navbar-public .nav-link { padding: 10px 0; margin-right: 0; }
    .navbar-public .nav-link.active { box-shadow: inset 3px 0 0 var(--pencil); padding-left: 12px; }
    .navbar-public .nav-public-account { border-top: 1px solid var(--border); margin-top: 6px; padding-top: 4px; }
}
@media (max-width: 359.98px) {
    .nav-cta-compact { display: none !important; }
}

/* 5. Buttons ----------------------------------------------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font: 600 0.875rem/1.5 var(--font-body);
    border-radius: 10px;
    padding: 0.5625rem 1rem;
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.btn-primary,
.btn-primary:active,
.btn-primary.active,
.btn-primary:disabled,
.btn-primary.disabled {
    background: var(--pencil);
    color: var(--ink);
    border: 1px solid transparent;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-check:checked + .btn-primary { background: var(--pencil-dark); color: var(--ink); border-color: transparent; }
.btn-primary:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(242, 183, 5, 0.40); }
.btn-primary:disabled, .btn-primary.disabled { opacity: 0.6; cursor: not-allowed; }

.btn-lg-cta { padding: 0.875rem 1.5rem; font-size: 1rem; }

.btn-outline-secondary,
.btn-secondary {
    background: var(--paper-raised);
    border: 1px solid var(--border-strong);
    color: var(--ink);
}
.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-secondary:hover,
.btn-secondary:focus { background: var(--paper-sunken); border-color: var(--border-strong); color: var(--ink); }
.btn-outline-secondary:focus-visible,
.btn-secondary:focus-visible { box-shadow: var(--focus-ring); }

.btn-ghost {
    background: transparent;
    border: 1px solid transparent;
    color: var(--muted);
}
.btn-ghost:hover, .btn-ghost:focus { background: var(--paper-sunken); color: var(--ink); }

.btn-danger-outline {
    background: transparent;
    border: 1px solid #E8B4B4;
    color: var(--danger);
}
.btn-danger-outline:hover, .btn-danger-outline:focus { background: var(--danger-pale); color: var(--danger); border-color: #E8B4B4; }

.btn-sm { padding: 0.375rem 0.75rem; font-size: 0.8rem; border-radius: 10px; }

@media (max-width: 575.98px) {
    form .btn-block-mobile { width: 100%; }
}

/* 6. Cards, alerts, badges --------------------------------------------------------------------------------------- */

.card {
    background: var(--paper-raised);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow-card);
}
.card-body { padding: 20px; }
.card-title { font-family: var(--font-display); font-weight: 700; font-size: 1rem; line-height: 1.4; color: var(--ink); margin-bottom: 12px; }
a.card-link-card { text-decoration: none; color: inherit; transition: border-color 0.15s ease; display: block; }
a.card-link-card:hover { border-color: var(--border-strong); }
.card-raised { box-shadow: var(--shadow-raised); }

@media (max-width: 575.98px) {
    .card-body { padding: 16px; }
}

.empty-state { text-align: center; padding: 40px 20px; }
.empty-state p { color: var(--muted); margin-bottom: 16px; }

.alert {
    border-radius: 14px;
    border: 1px solid;
    padding: 12px 16px;
    font-size: 0.95rem;
}
.alert-success { background: var(--success-pale); color: var(--success); border-color: #BFDCC2; }
.alert-danger { background: var(--danger-pale); color: var(--danger); border-color: #E8B4B4; }
.alert-warning { background: var(--warning-pale); color: var(--warning); border-color: #F0D27A; }
.alert-neutral { background: var(--paper-sunken); color: var(--text); border-color: var(--border); }
.alert a { color: inherit; }
.alert ul { margin: 6px 0 0; padding-left: 18px; }

.banner-past-due { margin: 16px auto 0; max-width: 1052px; }
@media (max-width: 1100px) {
    .banner-past-due { margin: 16px 24px 0; }
}
@media (max-width: 575.98px) {
    .banner-past-due { margin: 12px 16px 0; }
}

.badge {
    border-radius: 999px;
    padding: 2px 10px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.5;
}
.badge-queued, .badge-neutral { background: var(--paper-sunken); color: var(--muted); }
.badge-generating { background: var(--pencil-pale); color: var(--warning); animation: press-pulse 1.6s ease-in-out infinite; }
.badge-warning { background: var(--pencil-pale); color: var(--warning); }
.badge-ready, .badge-success { background: var(--success-pale); color: var(--success); }
.badge-failed, .badge-danger { background: var(--danger-pale); color: var(--danger); }
.badge-comp { background: var(--paper-sunken); color: var(--ink); }

@keyframes press-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
}

.quick-pick {
    background: var(--pencil-pale);
    border-left: 4px solid var(--pencil);
    border-radius: 10px;
    padding: 14px 16px;
}

.progress { height: 8px; border-radius: 999px; background: var(--paper-sunken); }
.progress-bar { background: var(--pencil); border-radius: 999px; transition: width 0.4s ease; }

.big-number {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 2.5rem;
    line-height: 1;
    letter-spacing: -0.01em;
    color: var(--ink);
}

/* 7. Forms ------------------------------------------------------------------------------------------------------- */

.form-label {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--dim);
    margin-bottom: 0.375rem;
}
.form-group { margin-bottom: 14px; }

.form-control, .form-select {
    background-color: var(--paper-raised);
    color: var(--ink);
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    padding: 0.5625rem 0.75rem;
    font: 400 0.9375rem/1.5 var(--font-body);
}
.form-select {
    padding-right: 2.25rem;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%236B6861' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
.form-control::placeholder { color: var(--dim); }
.form-control:focus, .form-select:focus {
    border-color: var(--pencil-dark);
    outline: none;
    box-shadow: var(--focus-ring);
    background-color: var(--paper-raised);
    color: var(--ink);
}
.form-control:disabled, .form-control[readonly] { background: var(--paper-sunken); color: var(--muted); }
.form-control.is-invalid { border-color: var(--danger); }
.form-text { font-size: 0.8rem; color: var(--dim); margin-top: 6px; }
.invalid-feedback { font-size: 0.8rem; color: var(--danger); }

.form-check-input { border-color: var(--border-strong); }
.form-check-input:checked { background-color: var(--ink); border-color: var(--ink); }
.form-check-input:focus { box-shadow: var(--focus-ring); border-color: var(--pencil-dark); }
.form-switch .form-check-input:checked { background-color: var(--ink); border-color: var(--ink); }

/* The plan picker on signup and billing: two choices as cards */
.plan-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.plan-choice input { position: absolute; opacity: 0; pointer-events: none; }
.plan-choice label {
    display: block;
    background: var(--paper-raised);
    border: 1px solid var(--border-strong);
    border-radius: 14px;
    padding: 14px 16px;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    height: 100%;
}
.plan-choice label:hover { border-color: var(--ink); }
.plan-choice input:checked + label { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.plan-choice input:focus-visible + label { box-shadow: var(--focus-ring); }
.plan-choice .plan-name { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--dim); }
.plan-choice .plan-price { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; color: var(--ink); line-height: 1.2; margin-top: 4px; }
.plan-choice .plan-price small { font-family: var(--font-body); font-weight: 500; font-size: 0.85rem; color: var(--muted); }
.plan-choice .plan-note { font-size: 0.8rem; color: var(--muted); margin-top: 2px; }
@media (max-width: 399.98px) {
    .plan-choice { grid-template-columns: 1fr; }
}
/* The three tiers in the picker: one row each, name and words on the left, the price on the right */
.plan-choice-tiers { grid-template-columns: 1fr; gap: 8px; }
.plan-choice-tiers label { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.plan-tier-main, .plan-tier-price { display: flex; flex-direction: column; }
.plan-tier-price { text-align: right; }
.plan-choice-tiers .plan-price { margin-top: 0; font-size: 1.25rem; }

/* The length picker (Phase 2) and any other segmented control */
.segmented { display: inline-flex; }
.segmented .btn { border-radius: 0; margin-left: -1px; }
.segmented .btn:first-of-type { border-radius: 10px 0 0 10px; margin-left: 0; }
.segmented .btn:last-of-type { border-radius: 0 10px 10px 0; }
.segmented .btn-check:checked + .btn { background: var(--ink); color: #FFFFFF; border-color: var(--ink); }

/* 8. Tables ------------------------------------------------------------------------------------------------------ */

.table { --bs-table-bg: transparent; --bs-table-hover-bg: var(--paper); margin-bottom: 0; font-size: 0.875rem; color: var(--text); }
.table > :not(caption) > * > * { border-bottom-color: var(--border); padding: 0.625rem; vertical-align: middle; }
.table thead th {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--dim);
    white-space: nowrap;
}
.table tbody tr:hover > * { background: var(--paper); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table .secondary { color: var(--muted); }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.table-dense > :not(caption) > * > * { padding: 0.5rem; }

/* 9. Logged-out screens: landing, signup, login, reset ----------------------------------------------------------- */

.auth-page { max-width: 460px; margin: 0 auto; padding: 48px 24px 64px; }
.auth-page .page-title { text-align: center; margin-bottom: 6px; }
.auth-page .page-subtitle { text-align: center; margin-bottom: 24px; }
.auth-page .auth-switch { text-align: center; margin-top: 18px; font-size: 0.9rem; color: var(--muted); }
@media (max-width: 575.98px) {
    .auth-page { padding: 28px 16px 48px; }
}

.landing { max-width: 960px; margin: 0 auto; padding: 72px 24px; }
.landing-hero { margin-bottom: 96px; }
.landing-eyebrow { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--warning); margin: 0 0 14px; }
.landing-headline {
    font-size: clamp(2.25rem, 4.5vw, 3.25rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: 0 0 18px;
    max-width: 760px;
}
.landing-lead { font-size: 1.125rem; line-height: 1.6; color: var(--muted); max-width: 680px; margin: 0 0 32px; }
.landing-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 16px; }
.landing-fineprint { color: var(--dim); font-size: 0.875rem; margin: 0; }

.landing-section { margin-bottom: 96px; scroll-margin-top: 24px; }
.landing-heading {
    font-size: clamp(1.6rem, 3vw, 2.1rem);
    line-height: 1.2;
    letter-spacing: -0.01em;
    margin: 0 0 16px;
    max-width: 720px;
}
.landing-heading-sm { font-size: 1.25rem; margin-bottom: 8px; }
.landing-section-lead { font-size: 1.05rem; line-height: 1.6; color: var(--muted); max-width: 680px; margin: 0 0 32px; }
.landing-section p { line-height: 1.6; }
.landing-note { color: var(--muted); font-size: 0.9rem; margin: 20px 0 0; }

.landing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.landing-grid .card-body { padding: 22px; }
.landing-grid p { color: var(--muted); margin: 0; font-size: 0.95rem; }
.landing-card-title { font-size: 1.05rem; line-height: 1.3; margin: 0 0 8px; color: var(--ink); }

.landing-steps { list-style: none; counter-reset: step; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.landing-steps li { counter-increment: step; border-top: 2px solid var(--pencil); padding-top: 16px; }
.landing-steps li::before {
    content: counter(step);
    display: block;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--ink);
    margin-bottom: 6px;
}
.landing-steps p { color: var(--muted); margin: 0; font-size: 0.95rem; }

.landing-template { border-top: 1px solid var(--border); padding: 12px 0; }
.landing-template:last-child { padding-bottom: 0; }
.landing-template-name { font-weight: 600; color: var(--ink); }

.landing-prices { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 28px; }
.landing-prices .card-body { padding: 24px; display: flex; flex-direction: column; }
.landing-prices .card.is-featured { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.landing-prices .plan-words { margin-top: 18px; color: var(--ink); }
.landing-prices .plan-words + .plan-note { margin-bottom: 20px; }
.landing-prices .plan-cta { margin-top: auto; }
.plan-tag { display: inline-block; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.02em; text-transform: none; background: var(--pencil-pale); color: var(--ink); padding: 2px 8px; border-radius: 999px; margin-left: 6px; vertical-align: 1px; }
.landing-includes-title { font-weight: 600; color: var(--ink); margin: 0 0 8px; }
@media (max-width: 1199.98px) {
    .landing-prices { grid-template-columns: 1fr 1fr; }
}

/* Prices: the annual or monthly switch, on the public pages and in the plan picker; .show-annual or .show-monthly on
   the prices' container decides which amounts show */
.price-period, .plan-period { display: inline-flex; gap: 4px; padding: 4px; background: var(--paper-sunken); border-radius: 999px; margin-bottom: 16px; }
.price-period input, .plan-period input { position: absolute; opacity: 0; pointer-events: none; }
.price-period label, .plan-period label { padding: 6px 16px; border-radius: 999px; font-weight: 600; font-size: 0.9rem; color: var(--muted); cursor: pointer; }
.price-period input:checked + label, .plan-period input:checked + label { background: var(--paper-raised); color: var(--ink); box-shadow: 0 1px 2px rgba(27, 26, 23, 0.12); }
.price-period input:focus-visible + label, .plan-period input:focus-visible + label { box-shadow: var(--focus-ring); }
.plan-save { font-size: 0.72rem; font-weight: 600; background: var(--pencil-pale); color: var(--ink); padding: 1px 7px; border-radius: 999px; margin-left: 4px; }
.show-annual .for-monthly, .show-monthly .for-annual { display: none; }
.landing-prices .plan-name { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--dim); }
.landing-prices .plan-price { font-family: var(--font-display); font-weight: 700; font-size: 2.25rem; color: var(--ink); line-height: 1.1; margin: 6px 0 4px; }
.landing-prices .plan-price small { font-family: var(--font-body); font-weight: 500; font-size: 1rem; color: var(--muted); }
.landing-prices .plan-note { color: var(--muted); font-size: 0.9rem; }
.landing-includes-list { color: var(--text); padding-left: 20px; margin: 0 0 28px; max-width: 640px; }
.landing-includes-list li { margin-bottom: 6px; }

.landing-faq { max-width: 760px; }
.landing-faq details { border-top: 1px solid var(--border); padding: 16px 0; }
.landing-faq details:last-child { border-bottom: 1px solid var(--border); }
.landing-faq summary { font-weight: 600; color: var(--ink); cursor: pointer; list-style: none; position: relative; padding-right: 28px; }
.landing-faq summary::-webkit-details-marker { display: none; }
.landing-faq summary::after { content: "+"; position: absolute; right: 4px; top: -2px; font-size: 1.25rem; color: var(--muted); }
.landing-faq details[open] summary::after { content: "−"; }
.landing-faq details p { color: var(--muted); margin: 10px 0 0; }

.landing-closing { text-align: center; padding: 56px 24px; background: var(--paper-sunken); border-radius: 14px; }
.landing-closing .landing-heading { margin: 0 auto 20px; }

@media (max-width: 991.98px) {
    .landing-grid { grid-template-columns: 1fr 1fr; }
    .landing-steps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 575.98px) {
    .landing { padding: 40px 16px 56px; }
    .landing-hero, .landing-section { margin-bottom: 64px; }
    .landing-grid, .landing-steps, .landing-prices { grid-template-columns: 1fr; }
    .landing .btn-lg-cta { width: 100%; }
    .landing-actions .btn-ghost { width: 100%; }
    .landing-closing { padding: 40px 16px; }
}

/* The landing hero: a full-width white band with a print-dot texture, the pitch on the left and the proof sheet on
   the right (what you paste, the page it prints, ink proof marks on what makes it convert), then a strip of figures */
.hero {
    background-color: var(--paper-raised);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Ccircle cx='2' cy='2' r='1.1' fill='%23E6E1D6'/%3E%3C/svg%3E");
    border-bottom: 1px solid var(--border);
}
.hero-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 72px 24px 56px;
    display: grid;
    grid-template-columns: 1fr 1.08fr;
    gap: 56px;
    align-items: center;
}
.hero-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--ink); background: var(--paper); border: 1px solid var(--border);
    border-radius: 999px; padding: 5px 12px 5px 8px; margin: 0 0 22px;
}
.hero-eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: var(--pencil); }
.hero-headline {
    font-size: clamp(2.25rem, 4.5vw, 3.25rem);
    line-height: 1.08;
    letter-spacing: -0.02em;
    margin: 0 0 20px;
}
.hero-mark { box-shadow: inset 0 -0.3em 0 var(--pencil); padding: 0 2px; }
.hero-lead { font-size: 1.125rem; line-height: 1.6; color: var(--muted); margin: 0 0 28px; max-width: 520px; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 22px; }
.hero-assurances { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 0.875rem; color: var(--muted); }
.hero-assurances li::before { content: "\2713"; color: var(--success); font-weight: 700; margin-right: 6px; }

.hero-visual { position: relative; padding: 8px 0 8px 8px; }
.proof-label { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--dim); margin-bottom: 8px; }
.proof-input {
    width: 72%;
    background: var(--paper);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 14px;
    font-size: 0.78rem;
}
.proof-field {
    position: relative;
    background: var(--paper-raised); border: 1px solid var(--border-strong); border-radius: 8px;
    padding: 5px 8px; margin-top: 6px; color: var(--muted);
    white-space: nowrap; overflow: visible; text-overflow: ellipsis;
}
.proof-field span { display: inline-block; width: 44px; color: var(--dim); font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.proof-field.is-link { border-color: var(--pencil-dark); background: var(--pencil-pale); color: var(--text); }
.proof-press {
    display: inline-flex; align-items: center; gap: 8px;
    margin: 14px 0 14px 18%;
    font-size: 0.78rem; font-weight: 600; color: var(--ink);
}
.proof-press-mark { width: 26px; height: 2px; background: var(--ink); position: relative; }
.proof-press-mark::after { content: ""; position: absolute; right: -2px; top: -4px; border-left: 7px solid var(--ink); border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.proof-press-text::before { content: "\2713"; color: var(--success); margin-right: 6px; }
.proof-page {
    position: relative;
    width: 84%;
    margin: -6px 0 0 auto;
    background: var(--paper-raised);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow-raised);
    padding: 20px;
    font-size: 0.8rem;
    color: var(--text);
}
.proof-page-meta { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--dim); margin-bottom: 6px; }
.proof-page-title { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; line-height: 1.25; color: var(--ink); margin-bottom: 12px; }
.proof-pick { position: relative; background: var(--pencil-pale); border-left: 4px solid var(--pencil); border-radius: 8px; padding: 10px 12px; line-height: 1.5; margin-bottom: 12px; }
.proof-pick > b { display: block; color: var(--ink); }
.proof-page u, .proof-pick u { text-decoration-color: var(--pencil-dark); text-decoration-thickness: 2px; text-underline-offset: 2px; }
.proof-table { position: relative; border: 1px solid var(--border); border-radius: 8px; margin-bottom: 12px; font-size: 0.74rem; }
.proof-table > div { display: grid; grid-template-columns: 0.75fr 1fr 1fr; border-top: 1px solid var(--border); }
.proof-table > div:first-of-type { border-top: 0; background: var(--paper-sunken); font-weight: 600; color: var(--ink); border-radius: 8px 8px 0 0; }
.proof-table span { padding: 5px 8px; }
.proof-table > div span:first-child { color: var(--muted); }
.proof-lines span { display: block; height: 6px; border-radius: 999px; background: var(--paper-sunken); margin-bottom: 6px; }
.proof-lines span.is-short { width: 58%; }
.proof-disclosure { position: relative; color: var(--dim); font-size: 0.7rem; font-style: italic; border-top: 1px solid var(--border); padding-top: 8px; margin-top: 10px; }

/* Proof marks: small ink tags pinned to the part they explain */
.proof-callout {
    position: absolute;
    z-index: 2;
    display: inline-flex; align-items: center; gap: 6px;
    font-style: normal; font-size: 0.72rem; font-weight: 600; line-height: 1;
    color: var(--paper); background: var(--ink);
    border-radius: 999px; padding: 4px 10px 4px 4px;
    white-space: nowrap;
    box-shadow: var(--shadow-card);
}
.proof-callout b { width: 18px; height: 18px; border-radius: 999px; background: var(--pencil); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; font-size: 0.7rem; }
.proof-pick .proof-callout { top: -12px; right: -26px; }
.proof-field .proof-callout { top: 50%; margin-top: -13px; left: calc(100% + 26px); }
.proof-table .proof-callout { bottom: -26px; left: -22px; }
.proof-disclosure .proof-callout { bottom: -14px; right: -22px; }

.hero-stats {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px 40px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}
.hero-stat { border-top: 2px solid var(--ink); padding-top: 12px; margin-right: 20px; }
.hero-stat b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.75rem; line-height: 1.1; color: var(--ink); }
.hero-stat span { color: var(--muted); font-size: 0.875rem; }

@media (max-width: 991.98px) {
    .hero-inner { grid-template-columns: 1fr; gap: 40px; padding-top: 48px; }
    .hero-visual { max-width: 560px; }
    .hero-stats { grid-template-columns: repeat(2, 1fr); row-gap: 20px; }
}
@media (max-width: 575.98px) {
    .hero-inner { padding: 36px 16px 40px; }
    .hero-actions .btn { width: 100%; }
    .hero-visual { padding: 6px 0 0; }
    .proof-input { width: 100%; }
    .proof-page { width: 100%; margin-left: 0; padding: 16px; }
    .proof-press { margin-left: 8px; }
    .proof-field { overflow: hidden; }
    .proof-pick .proof-callout, .proof-table .proof-callout { right: -6px; }
    .proof-field .proof-callout { display: none; }
    .proof-disclosure .proof-callout { right: -6px; }
    .proof-table .proof-callout { left: -6px; bottom: -26px; }
    .hero-stats { padding: 0 16px 32px; }
    .hero-stat { margin-right: 12px; }
    .hero-stat b { font-size: 1.45rem; }
}

/* The hero's one animation (design.md, Motion): played once on load. What you paste appears, the arrow draws, the
   page prints from the top down, then the proof marks land one by one. Off for anyone who asks for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
    .hero-visual .proof-input { animation: proof-appear 0.45s ease-out 0.1s both; }
    .hero-visual .proof-press { animation: proof-appear 0.35s ease-out 0.55s both; }
    .hero-visual .proof-press-mark { animation: proof-draw 0.35s ease-out 0.6s both; transform-origin: left center; }
    .hero-visual .proof-page { animation: proof-print 1s cubic-bezier(0.3, 0, 0.2, 1) 0.85s both; }
    .hero-visual .proof-callout { animation: proof-mark 0.3s ease-out both; }
    .hero-visual .proof-pick .proof-callout { animation-delay: 1.95s; }
    .hero-visual .proof-field .proof-callout { animation-delay: 2.2s; }
    .hero-visual .proof-table .proof-callout { animation-delay: 2.45s; }
    .hero-visual .proof-disclosure .proof-callout { animation-delay: 2.7s; }
}
@keyframes proof-appear {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}
@keyframes proof-draw {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}
@keyframes proof-print {
    /* Ends with room around the card, so the proof marks that sit past its edge and its shadow are never cut off */
    from { clip-path: inset(-60px -60px 100% -60px); }
    to { clip-path: inset(-60px -60px -60px -60px); }
}
@keyframes proof-mark {
    from { opacity: 0; transform: scale(0.85); }
    to { opacity: 1; transform: none; }
}

/* About: the story at reading width, one pulled line, the won't-do list */
.about-story { max-width: 680px; }
.about-story p { font-size: 1.075rem; line-height: 1.7; color: var(--text); }
.about-pull {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.45rem !important;
    line-height: 1.35 !important;
    color: var(--ink) !important;
    border-left: 4px solid var(--pencil);
    padding: 4px 0 4px 20px;
    margin: 28px 0;
}
.about-list { list-style: none; padding: 0; margin: 0; }
.about-list li { border-top: 1px solid var(--border); padding: 14px 0; color: var(--muted); line-height: 1.6; }
.about-list li:last-child { border-bottom: 1px solid var(--border); }
.about-list b { color: var(--ink); }

/* How it works: each step's text beside a picture of the screen, built in HTML, alternating sides, joined by a line */
.hiw-steps { position: relative; }
.hiw-step { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; margin-bottom: 72px; position: relative; }
.hiw-step:nth-child(even) .hiw-text { order: 2; }
.hiw-number {
    width: 48px; height: 48px; border-radius: 999px;
    background: var(--pencil); color: var(--ink);
    font-family: var(--font-display); font-weight: 700; font-size: 1.35rem;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 16px;
}
.hiw-text p { color: var(--muted); line-height: 1.65; }
.hiw-time { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--warning) !important; margin: 0; }
.hiw-visual { background: var(--paper-sunken); border-radius: 14px; padding: 28px; }

.mock { background: var(--paper-raised); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-raised); padding: 18px; font-size: 0.85rem; }
.mock-title { font-family: var(--font-display); font-weight: 700; color: var(--ink); font-size: 1rem; margin-bottom: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mock-tag { font-family: var(--font-body); font-weight: 600; font-size: 0.7rem; background: var(--paper-sunken); color: var(--muted); border-radius: 999px; padding: 2px 8px; }
.mock-row { display: flex; gap: 12px; align-items: center; border-top: 1px solid var(--border); padding: 8px 0; }
.mock-label { width: 84px; flex-shrink: 0; color: var(--dim); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; }
.mock-value { color: var(--text); }
.mock-check::before { content: "\2713"; color: var(--success); font-weight: 700; margin-right: 6px; }
.mock-chips { display: flex; gap: 6px; }
.mock-chips-wrap { flex-wrap: wrap; margin-bottom: 14px; }
.mock-chip { border: 1px solid var(--border-strong); border-radius: 999px; padding: 3px 10px; font-size: 0.75rem; color: var(--muted); background: var(--paper-raised); }
.mock-chip.is-on { border-color: var(--ink); color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); font-weight: 600; }
.mock-product { border: 1px solid var(--border); border-radius: 10px; padding: 10px; margin-bottom: 10px; }
.mock-product-name { font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.mock-input { border: 1px solid var(--border-strong); border-radius: 8px; padding: 5px 8px; color: var(--muted); font-size: 0.75rem; margin-top: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mock-input.is-link { border-color: var(--pencil-dark); background: var(--pencil-pale); color: var(--text); }
.mock-note { color: var(--success); font-size: 0.78rem; font-weight: 600; }
.mock-note::before { content: "\2713"; margin-right: 6px; }
.mock-segmented { display: inline-flex; border: 1px solid var(--border-strong); border-radius: 10px; overflow: hidden; margin-bottom: 6px; }
.mock-segmented span { padding: 5px 14px; font-size: 0.8rem; color: var(--muted); }
.mock-segmented span.is-on { background: var(--ink); color: var(--paper); font-weight: 600; }
.mock-caption { color: var(--dim); font-size: 0.75rem; margin-bottom: 14px; }
.mock-generating { border-top: 1px solid var(--border); padding-top: 14px; }
.mock-generating-label { margin: 8px 0; color: var(--text); }
.mock-article-title { font-family: var(--font-display); font-weight: 700; color: var(--ink); font-size: 1.05rem; line-height: 1.3; margin-bottom: 10px; }
.mock-pick { background: var(--pencil-pale); border-left: 4px solid var(--pencil); border-radius: 8px; padding: 8px 10px; margin-bottom: 10px; line-height: 1.5; }
.mock-pick u { text-decoration-color: var(--pencil-dark); text-decoration-thickness: 2px; }
.mock-table { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; margin-bottom: 10px; font-size: 0.75rem; }
.mock-table div { display: grid; grid-template-columns: 0.8fr 1fr 1fr; border-top: 1px solid var(--border); }
.mock-table div:first-child { border-top: 0; background: var(--paper-sunken); font-weight: 600; color: var(--ink); }
.mock-table span { padding: 5px 8px; }
.mock-table div span:first-child { color: var(--muted); }
.mock-lines span { display: block; height: 7px; border-radius: 999px; background: var(--paper-sunken); margin-bottom: 6px; }
.mock-lines span.is-short { width: 60%; }
.mock-disclosure { color: var(--dim); font-size: 0.72rem; font-style: italic; border-top: 1px solid var(--border); padding-top: 8px; margin-top: 8px; }
.mock-actions { display: flex; gap: 8px; margin-top: 12px; }
.mock-button { border: 1px solid var(--border-strong); border-radius: 8px; padding: 5px 10px; font-size: 0.75rem; font-weight: 600; color: var(--text); }
.mock-button.is-primary { background: var(--pencil); border-color: var(--pencil); color: var(--ink); }

.hiw-doubts { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.hiw-doubt { background: var(--paper-raised); border: 1px solid var(--border); border-radius: 14px; padding: 22px; }
.hiw-doubt h3 { font-size: 1.1rem; line-height: 1.35; color: var(--ink); margin: 0 0 10px; }
.hiw-doubt p { color: var(--muted); margin: 0; line-height: 1.6; }

/* Pricing: one article's words as a bar */
.words-bar { display: flex; height: 44px; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); }
.words-bar-used { background: var(--pencil); display: flex; align-items: center; padding: 0 12px; font-weight: 600; color: var(--ink); font-size: 0.85rem; white-space: nowrap; }
.words-bar-back { flex: 1; background: var(--success-pale); display: flex; align-items: center; justify-content: center; color: var(--success); font-weight: 600; font-size: 0.85rem; white-space: nowrap; }
.words-bar-scale { display: flex; justify-content: space-between; color: var(--dim); font-size: 0.78rem; margin-top: 6px; }
.words-steps { margin: 0; padding-left: 20px; }
.words-steps li { margin-bottom: 8px; line-height: 1.6; color: var(--muted); }
.words-steps b { color: var(--ink); }

@media (max-width: 767.98px) {
    .hiw-step { grid-template-columns: 1fr; gap: 20px; margin-bottom: 56px; }
    .hiw-step:nth-child(even) .hiw-text { order: 0; }
    .hiw-visual { padding: 16px; }
    .hiw-doubts { grid-template-columns: 1fr; }
    .words-bar-used span, .words-bar-back span { font-size: 0.75rem; }
}

/* Legal and contact pages: long reading at a comfortable measure */
.legal-page { max-width: 760px; margin: 0 auto; padding: 56px 24px 72px; }
.legal-page h1 { margin-bottom: 6px; }
.legal-page .legal-updated { color: var(--dim); font-size: 0.875rem; margin-bottom: 32px; }
.legal-page h2 { font-size: 1.2rem; margin: 32px 0 10px; }
.legal-page p, .legal-page li { line-height: 1.65; color: var(--text); }
.legal-page ul { padding-left: 20px; }
@media (max-width: 575.98px) {
    .legal-page { padding: 32px 16px 48px; }
}

/* 10. Article preview: the rendered HTML a subscriber will publish, styled like a finished page ------------------- */

.article-preview { font-size: 1.0625rem; line-height: 1.7; color: var(--text); padding: 28px 32px; overflow-x: auto; }
.article-preview-title { font-size: 1.9rem; line-height: 1.2; letter-spacing: -0.01em; margin: 0 0 20px; }
.article-preview h2 { font-size: 1.4rem; line-height: 1.3; margin: 32px 0 12px; }
.article-preview h3 { font-size: 1.15rem; line-height: 1.35; margin: 22px 0 8px; }
.article-preview p, .article-preview ul, .article-preview ol { margin: 0 0 14px; }
.article-preview li { margin-bottom: 4px; }
.article-preview .pp-quick-pick {
    background: var(--pencil-pale);
    border-left: 4px solid var(--pencil);
    border-radius: 10px;
    padding: 14px 16px;
    margin: 0 0 20px;
}
.article-preview .pp-quick-pick p { margin: 0; }
.article-preview .pp-quick-pick strong { font-weight: 600; color: var(--ink); }
.article-preview .pp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    line-height: 1.5;
    margin: 8px 0 20px;
}
.article-preview .pp-table th {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--dim);
    text-align: left;
    border-bottom: 1px solid var(--border);
    padding: 10px;
}
.article-preview .pp-table td { border-bottom: 1px solid var(--border); padding: 10px; vertical-align: top; }
.article-preview .pp-table td:first-child { color: var(--muted); }
.article-preview .pp-disclosure {
    border-top: 1px solid var(--border);
    padding-top: 14px;
    margin-top: 28px;
    font-size: 0.875rem;
    color: var(--muted);
}
/* The HTML editor in place of the preview: wide, monospace, and its preview styled like the article */
.edit-html { font-size: 0.8125rem; line-height: 1.55; min-height: 420px; resize: vertical; }
.edit-preview { border: 1px solid var(--border); border-radius: 8px; min-height: 420px; padding: 24px; background: var(--paper-raised); }

/* Web research sources beside the preview */
.source-list { padding-left: 1.4rem; }
.source-list li { margin-bottom: 6px; overflow-wrap: anywhere; }

/* Sections list beside the preview: one row per section with its Regenerate control */
.section-list .section-item { border-top: 1px solid var(--border); padding: 10px 0; }
.section-list .section-item:first-child { border-top: 0; padding-top: 0; }
.section-list .section-item-heading { font-weight: 600; color: var(--ink); min-width: 0; overflow-wrap: anywhere; }

@media (max-width: 575.98px) {
    .article-preview { padding: 20px 16px; }
    .article-preview-title { font-size: 1.6rem; }
}

/* 11. Footer ----------------------------------------------------------------------------------------------------- */

.app-footer {
    border-top: 1px solid var(--border);
    color: var(--dim);
    font-size: 0.8rem;
    padding: 18px 24px;
    text-align: center;
}
.app-footer a { color: var(--muted); }
.app-footer nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin-bottom: 8px; }

/* 12. Admin ------------------------------------------------------------------------------------------------------ */

/* The admin pages' tabs: the nav bar's link style, on the page */
.admin-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0 22px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 24px;
}
.admin-tabs a {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--muted);
    text-decoration: none;
    padding: 10px 2px;
}
.admin-tabs a:hover, .admin-tabs a:focus { color: var(--ink); }
.admin-tabs a.active { color: var(--ink); box-shadow: inset 0 -2px 0 var(--pencil); }

/* A figure with its label: dense, for the admin overview and health */
.stat-value {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 1.1;
    color: var(--ink);
}
.stat-value.is-bad { color: var(--danger); }
.stat-row { border-top: 1px solid var(--border); padding: 12px 0; }
.stat-row:first-child { border-top: 0; padding-top: 0; }

/* The admin announcement at the top of the dashboard */
.banner-announcement {
    background: var(--paper-sunken);
    color: var(--text);
    border-radius: 14px;
    padding: 12px 16px;
    margin-bottom: 20px;
}

/* 13. Onboarding ------------------------------------------------------------------------------------------------- */

/* Get started's site or newsletter choice (the dashboard's Get started has the rest of its styles) */
.plan-choice .plan-price.plan-price-text { font-size: 1.15rem; }

/* The contact form's hidden field (Contact): off screen, not display:none, which some scripts skip */
.contact-trap { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }