/* ==========================================================================
   GrimoirePrint — General Markdown Converter Styles
   Apple-inspired: light, airy, rounded corners, generous whitespace
   ========================================================================== */

/* ---- Variables ---- */
:root {
    --color-bg: #fbfbfd;
    --color-surface: #ffffff;
    --color-surface-alt: #f5f5f7;
    --color-border: #e5e5ea;
    --color-border-light: #f0f0f2;
    --color-text: #1d1d1f;
    --color-text-secondary: #86868b;
    --color-text-tertiary: #aeaeb2;
    --color-accent: #0071e3;
    --color-accent-hover: #0077ed;
    --color-accent-light: #147ce5;
    --color-accent-surface: rgba(0, 113, 227, 0.06);
    --color-accent-glow: rgba(0, 113, 227, 0.1);
    --color-success: #34c759;
    --color-warning: #ff9f0a;
    --color-danger: #ff3b30;
    --font-body: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --radius: 12px;
    --radius-sm: 8px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
    --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04);
    --transition: 0.2s ease;
}

/* ---- Reset ---- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-body);
    background: var(--color-bg);
    color: var(--color-text);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    color: var(--color-accent);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.container {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ===== NAV ===== */
.nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 32px;
    gap: 12px;
    height: 52px;
    background: rgba(251, 251, 253, 0.72);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.nav-logo {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 17px;
    color: var(--color-text);
    text-decoration: none;
}

.nav-logo:hover {
    text-decoration: none;
}

.nav-logo-icon {
    font-size: 20px;
}

.nav-logo-text {
    font-weight: 600;
    letter-spacing: -0.02em;
}

.nav-links {
    display: flex;
    gap: 28px;
    align-items: center;
    margin-left: auto;
    /* When the row still will not fit, the links are what gives: the account
       control is the one thing in the nav that has no second home. */
    min-width: 0;
    overflow: hidden;
}

/* ---- Account control (sign in / signed-in chip) ----
   A sibling of .nav-links rather than a child, so it survives the widths at
   which the links row gives way. */
.nav-account {
    display: flex;
    align-items: center;
    margin-left: 20px;
    flex-shrink: 0;
}

.nav-account[hidden] {
    display: none;
}

.nav-account-btn {
    font-family: inherit;
    /* Signed in the control is an <a>, and the nav underlines its links; the
       flex centring is what keeps the text in the middle of the full-width
       target it becomes inside the phone menu. */
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text);
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: 20px;
    padding: 6px 14px;
    max-width: 190px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    transition: all var(--transition);
}

.nav-account-btn:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

/* ---- Phone-width menu ----
   The toggle is only given a size once nav.js has set data-nav-menu="ready":
   a page that fails to load the script keeps the nav it had rather than
   offering a button that does nothing. */
.nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-left: auto;
    padding: 0;
    background: none;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    color: var(--color-text);
    cursor: pointer;
    transition: all var(--transition);
}

.nav-toggle:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.nav-toggle-bars {
    position: relative;
}

.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
}

.nav-toggle-bars::before,
.nav-toggle-bars::after {
    content: '';
    position: absolute;
    left: 0;
    transition: transform var(--transition), top var(--transition);
}

.nav-toggle-bars::before {
    top: -6px;
}

.nav-toggle-bars::after {
    top: 6px;
}

/* Open, the bars are a close button. */
.nav[data-nav-open="true"] .nav-toggle-bars {
    background: transparent;
}

.nav[data-nav-open="true"] .nav-toggle-bars::before {
    top: 0;
    transform: rotate(45deg);
}

.nav[data-nav-open="true"] .nav-toggle-bars::after {
    top: 0;
    transform: rotate(-45deg);
}

/* The menu carries an account host of its own. Above the breakpoint the bar's
   host is the visible one, so this stays out of the row. */
.nav-account-menu {
    display: none;
}

/* ---- "Sign in to save your credits" ---- */
.signin-nudge {
    font-family: inherit;
    font-size: 11px;
    color: var(--color-text-secondary);
    background: none;
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-sm);
    padding: 5px 10px;
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--transition);
}

.signin-nudge:hover {
    color: var(--color-accent);
    border-color: var(--color-accent);
}

.signin-nudge[hidden] {
    display: none;
}

/* ---- Which account a purchase tops up ---- */
.buyer-account {
    display: block;
    text-align: center;
    font-size: 13px;
    color: var(--color-text-secondary);
    margin: -20px 0 28px;
}

.buyer-account[hidden] {
    display: none;
}

/* "Signed in as" breaks after itself, never inside itself. */
.buyer-account-lead {
    white-space: nowrap;
}

.buyer-account-email {
    font-weight: 600;
    color: var(--color-accent);
    /* A long address wraps rather than pushing the line off a phone. */
    overflow-wrap: anywhere;
}

.buyer-account-sep {
    opacity: 0.5;
}

.buyer-account-action {
    font-family: inherit;
    font-size: inherit;
    color: var(--color-text-secondary);
    background: none;
    border: none;
    border-bottom: 1px solid var(--color-border);
    padding: 0;
    cursor: pointer;
    transition: color var(--transition), border-color var(--transition);
}

.buyer-account-action:hover {
    color: var(--color-accent);
    border-bottom-color: var(--color-accent);
}

.buyer-account-action:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
}

/* In the dialog the line sits between the copy and the tiles, and the modal's
   own paragraph rule is more specific than the one above. */
.credits-modal-content .buyer-account {
    font-size: 12px;
    color: var(--color-text-secondary);
    margin: -8px 0 16px;
}

/* ---- Sign-in dialog (reuses .credits-modal for its frame) ---- */
.account-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 14px;
}

.account-input {
    font-family: inherit;
    font-size: 14px;
    color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 11px 14px;
    width: 100%;
}

.account-input:focus {
    outline: none;
    border-color: var(--color-accent);
}

/* .btn and .account-form both set a display, which beats the hidden attribute
   on its own. The dialog swaps between its two states with `hidden`. */
.account-form[hidden],
.account-modal .btn[hidden] {
    display: none;
}

.account-note {
    font-size: 13px;
    line-height: 1.5;
    margin: 0 0 14px;
    color: var(--color-text-secondary);
}

.account-note-ok {
    color: var(--color-success);
}

.account-note-error {
    color: var(--color-danger);
}

.account-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.account-email {
    color: var(--color-text);
}

.account-toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    z-index: 10000;
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: min(92vw, 460px);
    font-size: 13px;
    color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 12px 16px;
    box-shadow: var(--shadow-lg);
}

.account-toast-action {
    font-family: inherit;
    font-size: 12px;
    color: var(--color-accent);
    background: none;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 5px 10px;
    cursor: pointer;
    white-space: nowrap;
}

.nav-links a {
    font-size: 13px;
    font-weight: 400;
    color: var(--color-text);
    text-decoration: none;
    opacity: 0.8;
    transition: opacity var(--transition);
}

.nav-links a:hover {
    opacity: 1;
    text-decoration: none;
}

.nav-ttrpg {
    background: var(--color-text);
    color: #fff !important;
    opacity: 1 !important;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px !important;
    font-weight: 500 !important;
    transition: all var(--transition);
}

.nav-ttrpg:hover {
    background: #333;
}

/* ===== HERO ===== */
.hero {
    padding: 132px 32px 80px;
    text-align: center;
    background: var(--color-bg);
}

.hero-content {
    max-width: 640px;
    margin: 0 auto;
}

.hero-badge {
    display: inline-block;
    font-size: 12px;
    font-weight: 500;
    color: var(--color-accent);
    background: var(--color-accent-surface);
    padding: 5px 14px;
    border-radius: 20px;
    margin-bottom: 20px;
    letter-spacing: 0.01em;
}

.hero h1 {
    font-family: var(--font-display);
    font-size: clamp(40px, 6vw, 64px);
    font-weight: 700;
    line-height: 1.06;
    letter-spacing: -0.04em;
    margin-bottom: 16px;
    color: var(--color-text);
}

.hero-sub {
    font-size: 19px;
    color: var(--color-text-secondary);
    line-height: 1.4;
    margin-bottom: 32px;
    font-weight: 400;
}

.hero-sub code {
    background: var(--color-accent-surface);
    color: var(--color-accent);
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 17px;
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
}

/* ===== BUTTONS ===== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 14px;
    padding: 10px 20px;
    border-radius: var(--radius-xl);
    border: none;
    cursor: pointer;
    transition: all var(--transition);
    text-decoration: none;
    white-space: nowrap;
}

.btn:hover {
    text-decoration: none;
}

.btn-primary {
    background: var(--color-accent);
    color: #fff;
    font-weight: 400;
}

.btn-primary:hover {
    background: var(--color-accent-hover);
}

.btn-primary:disabled {
    opacity: 0.4;
    pointer-events: none;
}

.btn-hero {
    font-size: 17px;
    padding: 12px 28px;
    border-radius: var(--radius-xl);
}

.btn-outline {
    background: transparent;
    color: var(--color-accent);
    border: 1px solid var(--color-border);
}

.btn-outline:hover {
    background: var(--color-accent-surface);
    border-color: var(--color-accent);
}

.btn-full {
    width: 100%;
}

.btn-icon {
    font-size: 16px;
}

/* ===== CONVERTER ===== */
.converter {
    padding: 0 0 80px;
}

.converter-app {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: clip;
    box-shadow: var(--shadow-lg);
    position: relative;
}

/* ===== CONVERTER TOOLBAR — Horizontal flex strip ===== */
.converter-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 16px;
    align-items: flex-start;
    border-bottom: 1px solid var(--color-border-light);
    background: var(--color-surface);
}

.toolbar-controls {
    flex: 1 1 400px;
    min-width: 0;
}

.toolbar-row {
    margin-bottom: 10px;
}

.toolbar-row:last-child {
    margin-bottom: 0;
}

.toolbar-row label,
.toolbar-options label,
.option-thumbs label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-secondary);
    margin-bottom: 6px;
}

.toolbar-options {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
}

.option-thumbs {
    flex: 0 0 auto;
}

/* ---- Actions (Download / Upload / Credits) — top-right ---- */
.toolbar-actions {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    min-width: 160px;
}

.btn-upload-main {
    background: var(--color-surface);
    color: var(--color-accent);
    border: 1.5px dashed var(--color-border);
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 500;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.btn-upload-main:hover {
    border-color: var(--color-accent);
    background: var(--color-accent-surface);
}

.btn-convert {
    font-size: 12px;
    padding: 10px 16px;
    white-space: nowrap;
}

.free-counter {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    padding: 4px 8px;
    min-width: 40px;
}

.free-counter-num {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-accent);
    line-height: 1;
    font-family: var(--font-display);
}

.free-counter-label {
    font-size: 9px;
    color: var(--color-text-tertiary);
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.credits-low .free-counter-num {
    color: var(--color-warning);
}

.credits-exhausted .free-counter-num {
    color: var(--color-danger);
}

.btn-unlock {
    font-size: 10px;
    color: var(--color-text-tertiary);
    text-align: center;
    padding: 4px 6px;
    text-decoration: none;
    display: block;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    transition: all var(--transition);
}

/* ---- Settings Gear (hidden on wide, visible on narrow) ---- */
.btn-settings-gear {
    display: none;
    /* shown via container query */
    background: none;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 6px 10px;
    font-size: 18px;
    cursor: pointer;
    line-height: 1;
    transition: all var(--transition);
}

.btn-settings-gear:hover {
    border-color: var(--color-accent);
    background: var(--color-accent-surface);
}

/* ===== THUMB GRIDS ===== */
.thumb-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 6px;
}

.thumb-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 8px 6px;
    background: var(--color-surface);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition);
    min-width: 0;
}

.thumb-btn:hover {
    border-color: var(--color-accent);
    box-shadow: var(--shadow-sm);
}

.thumb-btn.active {
    border-color: var(--color-accent);
    background: var(--color-accent-surface);
    box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.12);
}

.thumb-label {
    font-size: 10px;
    color: var(--color-text-secondary);
    font-weight: 500;
}

.thumb-btn.active .thumb-label {
    color: var(--color-accent);
}

/* ---- Font Preview Swatches ---- */
.font-preview {
    font-size: 22px;
    font-weight: 500;
    color: var(--color-text);
    line-height: 1;
    height: 28px;
    display: flex;
    align-items: center;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif;
}

.font-preview-academic {
    font-family: 'Merriweather', Georgia, serif;
    font-size: 20px;
}

.font-preview-technical {
    font-family: 'Source Sans 3', 'Roboto', sans-serif;
}

.font-preview-literary {
    font-family: 'Lora', Georgia, serif;
    font-style: italic;
    font-size: 20px;
}

.font-preview-minimal {
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 300;
    color: var(--color-text-secondary);
}

.font-preview-elegant {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700;
    font-style: italic;
    font-size: 20px;
}

.font-preview-compact {
    font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif;
    font-weight: 500;
    font-size: 20px;
    letter-spacing: -0.02em;
}

.font-preview-modern {
    font-family: 'Outfit', 'Inter', sans-serif;
    font-weight: 400;
    font-size: 21px;
    letter-spacing: 0.01em;
}

/* ---- Options Row ---- */
.thumb-grid-inline {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
}

.option-thumb {
    min-width: 0;
    padding: 6px 4px;
}

.option-icon {
    font-size: 16px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 22px;
}

/* ---- Column Icon Thumbnails ---- */
.column-icon {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 3px;
    width: 28px;
    height: 22px;
    background: var(--color-surface-alt);
    border: 1.5px solid var(--color-border);
    border-radius: 3px;
    padding: 3px;
    font-size: 0;
}

.column-icon .col-line {
    flex: 1;
    background: var(--color-text-secondary);
    border-radius: 1px;
    opacity: 0.4;
}

.column-icon-2 {
    gap: 2px;
}

.column-icon-2 .col-line {
    flex: 1;
}

.thumb-btn.active .column-icon {
    border-color: var(--color-accent);
    background: rgba(0, 113, 227, 0.08);
}

.thumb-btn.active .column-icon .col-line {
    background: var(--color-accent);
    opacity: 0.6;
}

/* ---- Advanced Settings Button ---- */
.btn-advanced-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 10px;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 11px;
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--color-border);
    background: var(--color-surface-alt);
    color: var(--color-text-secondary);
    cursor: not-allowed;
    transition: all var(--transition);
    letter-spacing: 0.01em;
    flex: 1 0 auto;
}

.btn-advanced-toggle.btn-locked {
    opacity: 0.6;
    pointer-events: none;
}

/* ===== PANEL TABS (Editor | Preview) ===== */
.panel-tabs {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 0 16px;
    background: var(--color-surface-alt);
    border-bottom: 1px solid var(--color-border-light);
    /* Narrow panes cannot fit the tabs and the action buttons on one line;
       without wrapping, Clear lands outside the clipped .converter-app. */
    flex-wrap: wrap;
}

.panel-tab {
    padding: 10px 20px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all var(--transition);
}

.panel-tab:hover {
    color: var(--color-text);
}

.panel-tab.active {
    color: var(--color-accent);
    border-bottom-color: var(--color-accent);
}

.panel-tabs .editor-actions {
    display: flex;
    gap: 4px;
    margin-left: auto;
}

/* ===== EDITOR / PREVIEW PANELS — flex-wrap ===== */
.converter-panels {
    display: flex;
    flex-wrap: wrap;
    min-height: 500px;
}

.panel {
    flex: 1 1 320px;
    /* Without this a flex item floors at its content's min-content width, and
       the preview's two columns push the pane past the clipped .converter-app. */
    min-width: 0;
    display: flex;
    flex-direction: column;
    min-height: 300px;
}

/* The pane's own width, not the viewport's, decides whether two columns of
   preview text still fit — so its responsive rules key off a container query. */
.panel-preview {
    container-type: inline-size;
    container-name: preview-pane;
    /* Anchors the page-count chip, which sits outside the replaced #preview. */
    position: relative;
}

.panel-gap {
    flex: 0 0 1px;
    background: var(--color-border-light);
}

/* On narrow containers, only the active panel is visible.
   JS adds .is-narrow class via ResizeObserver. */
.converter-panels.is-narrow .panel-editor {
    display: none;
}

.converter-panels.is-narrow .panel-gap {
    display: none;
}

.converter-panels.is-narrow.showing-editor .panel-editor {
    display: flex;
}

.converter-panels.is-narrow.showing-editor .panel-preview {
    display: none;
}

.converter-panels.is-narrow.showing-editor .panel-gap {
    display: none;
}

.converter-panels.is-narrow.showing-preview .panel-editor {
    display: none;
}

.converter-panels.is-narrow.showing-preview .panel-preview {
    display: flex;
}




/* Editor action buttons (Clear, Populate) */
.editor-actions {
    display: flex;
    gap: 4px;
    margin-left: auto;
}

.btn-editor-action {
    padding: 3px 8px;
    background: transparent;
    color: var(--color-text-tertiary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm, 4px);
    font-size: 11px;
    cursor: pointer;
    transition: all var(--transition, 0.2s);
    white-space: nowrap;
    line-height: 1.3;
}

.btn-editor-action:hover:not(:disabled) {
    color: var(--color-accent);
    border-color: var(--color-accent);
    background: var(--color-accent-surface, rgba(0, 113, 227, 0.06));
}

.btn-editor-action:disabled {
    opacity: 0.35;
    cursor: default;
}

/* A finger needs more than the 22px these read at on a pointer device. The
   badge stays the size it is; only the hit area grows, and only where taps
   are how the page is driven. */
@media (pointer: coarse) {
    .btn-editor-action {
        min-height: 44px;
        padding-left: 12px;
        padding-right: 12px;
    }

    .panel-tab {
        min-height: 44px;
    }
}

#editor {
    flex: 1;
    width: 100%;
    padding: 20px;
    background: var(--color-surface);
    border: none;
    color: var(--color-text);
    font-family: 'SF Mono', 'Fira Code', 'Consolas', 'JetBrains Mono', monospace;
    font-size: 13px;
    line-height: 1.6;
    resize: none;
    outline: none;
}

#editor::placeholder {
    color: var(--color-text-tertiary);
}

.preview-content {
    flex: 1;
    /* No pane padding: .preview-sheet carries the PDF's real @page margins. */
    padding: 0;
    background: #fff;
    color: var(--color-text);
    overflow-y: auto;
    /* Anchors the watermark overlay below. */
    position: relative;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif;
    font-size: 14px;
    line-height: 1.7;
    /* Long unbroken tokens (URLs, code) would otherwise set the pane's floor. */
    overflow-wrap: break-word;
}

/* ---- Page boundaries ----
   The sheet is the PDF's page box: its padding is the real @page margin, scaled
   against whatever width the pane got, so the boundaries move when the paper
   size or the mode's orientation does. Set from preview-pages.js; the fallbacks
   keep the pane readable if that script never runs. */
.preview-sheet {
    box-sizing: border-box;
    position: relative;
    width: 100%;
    max-width: 820px;
    margin: 0 auto;
    padding: var(--pg-margin-top, 28px) var(--pg-margin-sides, 24px) var(--pg-margin-bottom, 28px);
    min-height: calc(var(--pg-usable, 0px) + var(--pg-margin-top, 0px) + var(--pg-margin-bottom, 0px));
}

/* One repeating gradient draws every boundary, so document length costs
   nothing; the mask turns the rule into dashes. Sits below the watermark's
   z-index 2 — a watermarked preview shows both. */
.preview-page-rules {
    position: absolute;
    left: 0;
    right: 0;
    top: var(--pg-margin-top, 0px);
    bottom: var(--pg-margin-bottom, 0px);
    pointer-events: none;
    z-index: 1;
    background-image: repeating-linear-gradient(to bottom,
            transparent 0,
            transparent calc(var(--pg-usable, 100%) - 1px),
            rgba(0, 0, 0, 0.28) calc(var(--pg-usable, 100%) - 1px),
            rgba(0, 0, 0, 0.28) var(--pg-usable, 100%));
    -webkit-mask-image: repeating-linear-gradient(to right, #000 0 7px, transparent 7px 14px);
    mask-image: repeating-linear-gradient(to right, #000 0 7px, transparent 7px 14px);
}

/* Lives outside #preview, which is replaced wholesale on every keystroke. */
.preview-page-chip {
    position: absolute;
    right: 14px;
    bottom: 14px;
    z-index: 3;
    padding: 3px 10px;
    border-radius: 999px;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: #555;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(0, 0, 0, 0.14);
    pointer-events: none;
}

.preview-page-chip[hidden] {
    display: none;
}

/* Preview watermark — the on-screen half of the PDF's stamp, drawn only while
   app.js has flagged the render as watermarked (#preview.show-watermark).
   Tiled rather than centred once: the pane scrolls as a single document where
   the PDF repeats the mark on every page. */
.preview-content.show-watermark::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27360%27%20height%3D%27360%27%3E%3Ctext%20x%3D%27180%27%20y%3D%27180%27%20transform%3D%27rotate%28-35%20180%20180%29%27%20text-anchor%3D%27middle%27%20dominant-baseline%3D%27middle%27%20font-family%3D%27Inter%2C%20-apple-system%2C%20Helvetica%2C%20Arial%2C%20sans-serif%27%20font-size%3D%2730%27%20font-weight%3D%27700%27%20letter-spacing%3D%273%27%20fill%3D%27rgba%280%2C0%2C0%2C0.09%29%27%3Egrimoireprint.com%3C%2Ftext%3E%3C%2Fsvg%3E');
    background-size: 360px 360px;
    background-repeat: repeat;
    pointer-events: none;
    z-index: 2;
}

.preview-content h1 {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 700;
    color: var(--color-text);
    margin-top: 0;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--color-border);
    letter-spacing: -0.02em;
}

.preview-content h2 {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 600;
    color: var(--color-text);
    margin-top: 32px;
    margin-bottom: 8px;
    letter-spacing: -0.01em;
}

.preview-content h3 {
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 600;
    color: var(--color-text);
    margin-top: 24px;
    margin-bottom: 6px;
}

.preview-content h4 {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-secondary);
    margin-top: 16px;
    margin-bottom: 4px;
}

.preview-content p {
    margin-bottom: 14px;
}

.preview-content strong {
    font-weight: 600;
}

.preview-content code {
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 0.86em;
    background: var(--color-surface-alt);
    padding: 2px 6px;
    border-radius: 5px;
    color: #e73c7e;
}

.preview-content pre {
    background: var(--color-surface-alt);
    padding: 16px 20px;
    border-radius: var(--radius);
    overflow-x: auto;
    margin: 16px 0;
}

.preview-content pre code {
    background: none;
    padding: 0;
    color: var(--color-text);
    font-size: 13px;
    line-height: 1.5;
}

.preview-content blockquote {
    margin: 14px 0;
    padding: 12px 18px;
    border-left: 3px solid var(--color-accent);
    background: var(--color-accent-surface);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    color: var(--color-text-secondary);
}

.preview-content blockquote p:last-child {
    margin-bottom: 0;
}

.preview-content ul,
.preview-content ol {
    margin: 0 0 14px;
    padding-left: 24px;
}

.preview-content li {
    margin-bottom: 4px;
}

.preview-content hr {
    border: none;
    height: 1px;
    background: var(--color-border);
    margin: 24px 0;
}

.preview-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 16px 0;
    font-size: 13px;
}

.preview-content thead {
    background: var(--color-surface-alt);
}

.preview-content th {
    font-weight: 600;
    text-align: left;
    padding: 10px 14px;
    font-size: 12px;
    color: var(--color-text-secondary);
    border-bottom: 1px solid var(--color-border);
}

.preview-content td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--color-border-light);
}

.preview-content tbody tr:hover {
    background: rgba(0, 113, 227, 0.02);
}

.preview-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius);
    margin: 14px 0;
}

/* ---- Callout Blocks ---- */
.preview-content .callout {
    margin: 14px 0;
    padding: 14px 18px;
    border-radius: var(--radius);
    border-left: 4px solid;
}

.preview-content .callout-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
}

.preview-content .callout-note {
    background: #f0f5ff;
    border-color: #3b82f6;
}

.preview-content .callout-note .callout-label {
    color: #2563eb;
}

.preview-content .callout-tip {
    background: #f0fdf4;
    border-color: #22c55e;
}

.preview-content .callout-tip .callout-label {
    color: #16a34a;
}

.preview-content .callout-important {
    background: #faf5ff;
    border-color: #a855f7;
}

.preview-content .callout-important .callout-label {
    color: #9333ea;
}

.preview-content .callout-warning {
    background: #fffbeb;
    border-color: #f59e0b;
}

.preview-content .callout-warning .callout-label {
    color: #d97706;
}

.preview-content .callout-caution {
    background: #fef2f2;
    border-color: #ef4444;
}

.preview-content .callout-caution .callout-label {
    color: #dc2626;
}

/* ---- [!CONTENTS] table of contents box ---- */
.preview-content .toc-box {
    background: #f8fafc;
    border-color: #94a3b8;
}

.preview-content .toc-box .callout-label {
    color: #334155;
}

.preview-content .toc-list {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.preview-content .toc-list li {
    margin: 0 0 6px;
    line-height: 1.35;
}

.preview-content .toc-list li.toc-sub {
    margin-left: 18px;
    font-size: 0.95em;
}

.preview-content .toc-list a {
    color: inherit;
    text-decoration: none;
}

.preview-content .toc-list li.toc-main a {
    font-weight: 600;
}

/* ---- Preview Placeholder ---- */
.preview-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--color-text-tertiary);
}

.preview-placeholder-icon {
    font-size: 48px;
    margin-bottom: 12px;
    opacity: 0.4;
}

.preview-placeholder p {
    font-size: 15px;
    font-weight: 400;
}

/* ---- Cheatsheet ---- */
.cheatsheet {
    border-top: 1px solid var(--color-border-light);
    padding: 14px 20px;
    background: var(--color-surface-alt);
}

.cheatsheet-header {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-secondary);
    margin-bottom: 8px;
}

.cheatsheet-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 20px;
}

.cheatsheet-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
}

.cheatsheet-row code {
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: 11px;
    background: var(--color-surface);
    padding: 1px 6px;
    border-radius: 4px;
    color: var(--color-accent);
    border: 1px solid var(--color-border-light);
}

.cheatsheet-row span {
    color: var(--color-text-secondary);
    font-size: 11px;
}

/* ---- Download Bar ---- */
.converter-download-bar {
    padding: 14px 16px;
    border-top: 1px solid var(--color-border-light);
    background: var(--color-surface-alt);
    display: flex;
    justify-content: center;
}

.btn-download-bottom {
    max-width: 300px;
    width: 100%;
}

/* ===== CREDITS MODAL ===== */
.credits-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.credits-modal[hidden] {
    display: none;
}

.credits-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.credits-modal-content {
    position: relative;
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: 36px;
    max-width: 480px;
    width: 90%;
    text-align: center;
    box-shadow: var(--shadow-lg);
}

.credits-modal-icon {
    font-size: 48px;
    margin-bottom: 12px;
}

.credits-modal-content h3 {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 10px;
    letter-spacing: -0.02em;
}

.credits-modal-content p {
    color: var(--color-text-secondary);
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 20px;
}

.credits-modal-packs {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-bottom: 16px;
}

.credits-modal-pack {
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    position: relative;
}

/* The modal's pack tiles are the exhausted-state checkout, so they are buttons.
   Everything visual still comes from .credits-modal-pack above. */
button.credits-modal-pack {
    font: inherit;
    color: inherit;
    cursor: pointer;
    text-align: center;
}

button.credits-modal-pack:disabled {
    cursor: default;
    opacity: 0.55;
}

.pack-popular {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.1);
}

.pack-badge {
    position: absolute;
    top: -10px;
    background: var(--color-accent);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
}

.pack-amount {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 700;
    color: var(--color-text);
}

.pack-label {
    font-size: 11px;
    color: var(--color-text-secondary);
    text-transform: uppercase;
}

.pack-price {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-accent);
    margin-top: 4px;
}

.credits-modal-sub {
    font-size: 12px !important;
    color: var(--color-text-tertiary) !important;
}

/* ===== FEATURES ===== */
.features {
    padding: 80px 0;
    background: var(--color-surface-alt);
}

.section-header {
    text-align: center;
    margin-bottom: 52px;
}

.section-tag {
    display: inline-block;
    font-size: 12px;
    font-weight: 500;
    color: var(--color-accent);
    background: var(--color-accent-surface);
    padding: 4px 12px;
    border-radius: 16px;
    margin-bottom: 12px;
    letter-spacing: 0.02em;
}

.section-header h2 {
    font-family: var(--font-display);
    font-size: clamp(28px, 3.5vw, 40px);
    font-weight: 700;
    letter-spacing: -0.03em;
    margin-bottom: 8px;
    color: var(--color-text);
}

.section-header p {
    font-size: 17px;
    color: var(--color-text-secondary);
    font-weight: 400;
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.feature-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    padding: 28px 24px;
    transition: all var(--transition);
}

.feature-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.feature-icon {
    font-size: 28px;
    margin-bottom: 14px;
}

.feature-card h3 {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 6px;
    letter-spacing: -0.01em;
}

.feature-card p {
    font-size: 13px;
    color: var(--color-text-secondary);
    line-height: 1.5;
}

.feature-card code {
    font-size: 12px;
    background: var(--color-accent-surface);
    color: var(--color-accent);
    padding: 1px 6px;
    border-radius: 4px;
    font-family: 'SF Mono', 'Fira Code', monospace;
}

/* ===== PRICING ===== */
.pricing {
    padding: 80px 0;
    background: var(--color-bg);
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    max-width: 960px;
    margin: 0 auto;
}

.pricing-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 32px 24px;
    text-align: center;
    transition: all var(--transition);
}

.pricing-card:hover {
    box-shadow: var(--shadow-md);
}

.pricing-featured {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.1);
}

.pricing-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    background: var(--color-accent);
    padding: 3px 10px;
    border-radius: 10px;
    margin-bottom: 8px;
}

.pricing-tier {
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 600;
    margin-bottom: 8px;
    letter-spacing: -0.01em;
}

.pricing-price {
    margin-bottom: 24px;
}

.pricing-amount {
    font-family: var(--font-display);
    font-size: 40px;
    font-weight: 700;
    color: var(--color-text);
    letter-spacing: -0.03em;
}

.pricing-period {
    font-size: 14px;
    color: var(--color-text-secondary);
}

.pricing-features {
    list-style: none;
    text-align: left;
    margin-bottom: 24px;
}

.pricing-features li {
    font-size: 13px;
    padding: 5px 0;
    color: var(--color-text-secondary);
}

.pricing-features .muted {
    opacity: 0.5;
}

/* ===== FOOTER ===== */
.footer {
    padding: 48px 0 24px;
    border-top: 1px solid var(--color-border-light);
    background: var(--color-surface-alt);
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr repeat(4, 1fr);
    gap: 32px;
    margin-bottom: 32px;
}

.footer-brand p {
    font-size: 13px;
    color: var(--color-text-secondary);
    margin-top: 8px;
}

.footer-links h5 {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text);
    margin-bottom: 14px;
}

.footer-links a {
    display: block;
    font-size: 13px;
    color: var(--color-text-secondary);
    padding: 3px 0;
    transition: color var(--transition);
    text-decoration: none;
}

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

.footer-bottom {
    border-top: 1px solid var(--color-border-light);
    padding-top: 16px;
    text-align: center;
}

.footer-bottom p {
    font-size: 12px;
    color: var(--color-text-tertiary);
}

/* ===== FONT PRESET PREVIEW STYLES ===== */
.preview-content.font-academic {
    font-family: 'Merriweather', Georgia, serif;
}

.preview-content.font-academic h1,
.preview-content.font-academic h2,
.preview-content.font-academic h3,
.preview-content.font-academic h4 {
    font-family: 'Merriweather', Georgia, serif;
}

.preview-content.font-technical {
    font-family: 'Source Sans 3', 'Roboto', sans-serif;
}

.preview-content.font-technical h1,
.preview-content.font-technical h2,
.preview-content.font-technical h3,
.preview-content.font-technical h4 {
    font-family: 'Source Sans 3', 'Roboto', sans-serif;
}

.preview-content.font-literary {
    font-family: 'Lora', Georgia, serif;
}

.preview-content.font-literary h1,
.preview-content.font-literary h2,
.preview-content.font-literary h3,
.preview-content.font-literary h4 {
    font-family: 'Lora', Georgia, serif;
}

.preview-content.font-minimal {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.preview-content.font-minimal h1,
.preview-content.font-minimal h2,
.preview-content.font-minimal h3,
.preview-content.font-minimal h4 {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.preview-content.font-elegant {
    font-family: 'Lora', Georgia, serif;
}

.preview-content.font-elegant h1,
.preview-content.font-elegant h2,
.preview-content.font-elegant h3,
.preview-content.font-elegant h4 {
    font-family: 'Playfair Display', Georgia, serif;
}

.preview-content.font-compact {
    font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif;
}

.preview-content.font-compact h1,
.preview-content.font-compact h2,
.preview-content.font-compact h3,
.preview-content.font-compact h4 {
    font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif;
}

.preview-content.font-modern {
    font-family: 'Outfit', 'Inter', sans-serif;
}

.preview-content.font-modern h1,
.preview-content.font-modern h2,
.preview-content.font-modern h3,
.preview-content.font-modern h4 {
    font-family: 'Outfit', 'Inter', sans-serif;
}

/* ===== NAV BUG BUTTON ===== */
.nav-bug {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    background: var(--color-accent);
    color: #fff;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: all var(--transition);
    font-family: var(--font-body);
}

.nav-bug:hover {
    background: var(--color-accent-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 113, 227, 0.3);
}

/* ===== BUG REPORT MODAL ===== */
.bug-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.bug-modal.open {
    opacity: 1;
    visibility: visible;
}

.bug-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.bug-modal-content {
    position: relative;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 36px 32px 32px;
    width: 90%;
    max-width: 480px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.15), 0 4px 12px rgba(0, 0, 0, 0.06);
    transform: translateY(20px) scale(0.97);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.bug-modal.open .bug-modal-content {
    transform: translateY(0) scale(1);
}

.bug-modal-close {
    position: absolute;
    top: 12px;
    right: 14px;
    background: none;
    border: none;
    font-size: 22px;
    color: var(--color-text-tertiary);
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all var(--transition);
}

.bug-modal-close:hover {
    background: var(--color-surface-alt);
    color: var(--color-text);
}

.bug-modal-header {
    text-align: center;
    margin-bottom: 24px;
}

.bug-modal-icon {
    font-size: 36px;
    display: block;
    margin-bottom: 8px;
}

.bug-modal-header h2 {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--color-text);
    margin-bottom: 4px;
}

.bug-modal-header p {
    font-size: 14px;
    color: var(--color-text-secondary);
}

.bug-form-group {
    margin-bottom: 16px;
}

.bug-form-group label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-secondary);
    margin-bottom: 6px;
}

.bug-optional {
    text-transform: none;
    font-weight: 400;
    opacity: 0.5;
}

.bug-form-control {
    width: 100%;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    color: var(--color-text);
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: 14px;
    transition: all 0.2s;
}

.bug-form-control:focus {
    outline: none;
    border-color: var(--color-accent);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.1);
}

select.bug-form-control {
    appearance: auto;
    cursor: pointer;
}

textarea.bug-form-control {
    min-height: 110px;
    resize: vertical;
    line-height: 1.5;
}

.bug-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.bug-btn-submit {
    width: 100%;
    padding: 12px;
    font-size: 15px;
    margin-top: 4px;
    border-radius: var(--radius-xl);
}

.bug-btn-submit:disabled {
    opacity: 0.5;
    pointer-events: none;
}

.bug-status {
    text-align: center;
    margin-top: 12px;
    font-size: 13px;
    min-height: 20px;
}

.bug-status.success {
    color: var(--color-success);
}

.bug-status.error {
    color: var(--color-danger);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 900px) {
    .feature-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .pricing-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* Between the menu breakpoint and a wide desktop the row wants more width
   than the nav has — measured, 936px of it. Tighten it rather than let the end
   of the row, which is where the account control sits, be clipped away. */
@media (min-width: 900px) and (max-width: 1080px) {
    .nav {
        padding: 0 16px;
    }

    .nav-links {
        gap: 12px;
    }

    .nav-links a {
        font-size: 12px;
    }

    .nav-ttrpg {
        padding: 5px 10px;
        font-size: 11px !important;
    }

    .nav-account {
        margin-left: 10px;
    }

    .nav-account-btn {
        font-size: 11px;
        padding: 5px 10px;
        max-width: 130px;
    }
}

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

    .pricing-grid {
        grid-template-columns: 1fr;
    }

    .footer-grid {
        grid-template-columns: 1fr;
    }

    .hero {
        padding: 100px 16px 48px;
    }

    .hero h1 {
        font-size: 36px;
    }
}

/* ---- The nav below the desktop breakpoint ----
   A phone gives the nav far less width than its links want; tightening only
   got as far as clipping the row silently, which left Guide, Pricing and
   Developers with no route on a phone. The same row is the menu behind the
   toggle here, sign-in included. */
@media (max-width: 899px) {
    .nav[data-nav-menu="ready"] {
        padding: 0 16px;
    }

    .nav[data-nav-menu="ready"] .nav-toggle {
        display: flex;
    }

    /* Sign-in moves into the menu, where it gets a full-width target instead of
       the chip it had to shrink to to survive beside the logo. */
    .nav[data-nav-menu="ready"] > .nav-account {
        display: none;
    }

    .nav[data-nav-menu="ready"] .nav-links {
        display: none;
    }

    .nav[data-nav-menu="ready"][data-nav-open="true"] .nav-links {
        display: flex;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        margin: 0;
        padding: 4px 16px 12px;
        /* Opaque, unlike the bar above it: text scrolling underneath an open
           menu has to not read through the items. */
        background: var(--color-bg);
        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
        /* The menu scrolls itself when it outgrows the screen; the page behind
           it is left alone, so opening it never traps a scroll. */
        max-height: 78vh;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .nav[data-nav-menu="ready"] .nav-links > a,
    .nav[data-nav-menu="ready"] .nav-links > button {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        min-height: 48px;
        margin: 0;
        padding: 0 4px;
        font-size: 15px;
        font-weight: 400;
        color: var(--color-text);
        text-align: left;
        opacity: 1;
        border: 0;
        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
        border-radius: 0;
        background: none;
        box-shadow: none;
        transform: none;
    }

    /* The edition switch is a filled pill in the row and declares it with
       !important; in the menu it is a row like any other. Nothing else here
       needs this — the current-page colour is an inline style, and left alone. */
    .nav[data-nav-menu="ready"] .nav-links > a.nav-ttrpg {
        color: var(--color-text) !important;
        opacity: 1 !important;
        font-size: 15px !important;
        font-weight: 400 !important;
    }

    .nav[data-nav-menu="ready"] .nav-links .nav-account-menu {
        display: flex;
        margin: 14px 0 0;
    }

    .nav[data-nav-menu="ready"] .nav-links .nav-account-menu[hidden] {
        display: none;
    }

    .nav[data-nav-menu="ready"] .nav-account-menu .nav-account-btn {
        width: 100%;
        min-height: 48px;
        max-width: none;
        font-size: 14px;
        justify-content: center;
        text-align: center;
    }

    /* No script, no toggle — and then the row is all there is. It keeps the
       squeeze it had before the menu existed rather than being left at full
       desktop size in a nav that cannot hold it. */
    .nav:not([data-nav-menu="ready"]) .nav-links {
        gap: 8px;
    }

    .nav:not([data-nav-menu="ready"]) .nav-links a {
        font-size: 11px;
    }

    .nav:not([data-nav-menu="ready"]) .nav-ttrpg {
        padding: 4px 8px;
        font-size: 10px !important;
    }

    .nav:not([data-nav-menu="ready"]) .nav-links a.nav-developers {
        display: none;
    }

    .nav:not([data-nav-menu="ready"]) .nav-account-btn {
        font-size: 10px;
        padding: 4px 9px;
        max-width: 120px;
    }
}

/* ===== NARROW VIEWPORT — JS adds .is-narrow via ResizeObserver ===== */
/* Toolbar: hide controls, show gear */
.converter-app.is-narrow .toolbar-controls {
    display: none;
}

.converter-app.is-narrow .toolbar-actions {
    display: none;
}

.converter-app.is-narrow .btn-settings-gear {
    display: flex;
}

/* Bottom bar: fixed to viewport bottom on narrow */
.converter-download-bar {
    display: none;
    /* hidden on desktop */
    padding: 10px 16px;
    background: var(--color-surface);
    border-top: 1px solid var(--color-border-light);
    gap: 8px;
    align-items: center;
}

.converter-app.is-narrow .converter-download-bar {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 50;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
}

.btn-upload-bottom {
    flex: 0 0 auto;
    padding: 8px 12px;
    font-size: 12px;
}

.btn-download-bottom {
    flex: 1;
    font-size: 13px;
    padding: 10px 16px;
}

.free-counter-bottom {
    flex-direction: row;
    gap: 4px;
}

/* Settings Bottom-Sheet (opened by gear button) */
.settings-sheet {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    max-height: 70vh;
    background: var(--color-surface);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    transform: translateY(100%);
    transition: transform 0.3s ease;
    overflow-y: auto;
    padding: 16px;
}

.settings-sheet.open {
    transform: translateY(0);
}

.settings-sheet-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.settings-sheet-backdrop.open {
    opacity: 1;
    pointer-events: auto;
}

/* ---- Report Mode Preview Styles ---- */
.preview-mode-report {
    font-family: 'Source Sans 3', 'Source Sans Pro', -apple-system, sans-serif;
}

.preview-mode-report h1,
.preview-mode-report h2,
.preview-mode-report h3 {
    font-family: 'Crimson Text', Georgia, 'Times New Roman', serif;
    color: #0a3d62;
}

.preview-mode-report h1 {
    font-size: 26pt;
    border-bottom: 2px solid #e0e0e0;
    padding-bottom: 8px;
}

.preview-mode-report h2 {
    font-size: 18pt;
    border-bottom: 1px solid #e8e8e8;
    padding-bottom: 6px;
}

.preview-mode-report h3 {
    font-size: 14pt;
}

.preview-mode-report p {
    text-align: justify;
}

.preview-mode-report blockquote {
    border-left: 4px solid #0a3d62;
    background: #f4f7fa;
    border-radius: 0 6px 6px 0;
    padding: 12px 16px;
    margin: 16px 0;
}

.preview-mode-report table thead {
    background: #0a3d62;
    color: #fff;
}

.preview-mode-report table th {
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.9em;
}

/* Report Cover Page Preview */
.report-cover-preview {
    text-align: center;
    padding: 40px 20px;
    margin-bottom: 32px;
    border-bottom: 2px solid #e0e0e0;
}

.report-cover-preview h1 {
    font-family: 'Crimson Text', Georgia, serif !important;
    font-size: 28pt;
    font-weight: 700;
    color: #0a3d62;
    margin: 0 0 8px 0;
    line-height: 1.2;
    border-bottom: none;
    padding-bottom: 0;
}

.report-cover-preview .report-cover-rule {
    width: 80px;
    height: 3px;
    background: linear-gradient(90deg, #0a3d62, #3c6382);
    margin: 16px auto;
    border: none;
}

.report-cover-preview .report-subtitle {
    font-size: 14pt;
    font-weight: 300;
    color: #3c6382;
    margin: 0;
    letter-spacing: 0.02em;
}

.report-cover-preview .report-meta {
    margin-top: 24px;
    font-size: 11pt;
    color: #666;
}

.report-cover-preview .report-meta div {
    margin: 4px 0;
}

/* ---- Newspaper Mode Preview Styles ---- */

.preview-mode-newspaper-times {
    font-family: 'Lora', Georgia, 'Times New Roman', serif;
    background-color: #fbf9f4;
    color: #1a1a1a;
}

.preview-cols-2 {
    column-count: 2;
    column-gap: 24px;
    column-rule: 1px solid var(--color-border);
}

/* A two-column pane is at least both columns' min-content wide, so below the
   width where that fits the on-screen preview reads as one column. The PDF is
   still laid out in two — this is the screen approximation only. */
@container preview-pane (max-width: 460px) {
    .preview-cols-2 {
        column-count: 1;
        column-rule: none;
    }
}

.preview-mode-newspaper-times .preview-cols-2 {
    column-rule: 1px solid #d4d4d4;
    text-align: justify;
}

.preview-mode-newspaper-times .newspaper-masthead {
    text-align: center;
    border-bottom: 4px double #1a1a1a;
    border-top: 1px solid #1a1a1a;
    padding: 24px 0 12px 0;
    margin-bottom: 24px;
}

.preview-mode-newspaper-times .newspaper-masthead h1 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 36px;
    font-weight: 900;
    color: #111;
    margin: 0 0 8px 0;
    line-height: 1;
    text-transform: uppercase;
    border-bottom: none;
    padding-bottom: 0;
}

.preview-mode-newspaper-times .newspaper-subtitle {
    font-family: 'Lora', Georgia, serif;
    font-size: 16px;
    font-style: italic;
    color: #333;
    margin: 0 0 16px 0;
}

.preview-mode-newspaper-times .newspaper-meta-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 2px solid #1a1a1a;
    border-bottom: 1px solid #1a1a1a;
    padding: 6px 12px;
    font-family: 'Playfair Display', sans-serif;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.preview-mode-newspaper-times .newspaper-meta-item:first-child {
    text-align: left;
}

.preview-mode-newspaper-times .newspaper-meta-item:nth-child(2) {
    text-align: center;
    font-weight: 900;
}

.preview-mode-newspaper-times .newspaper-meta-item:last-child {
    text-align: right;
}

.preview-mode-newspaper-times h1:not(.newspaper-masthead h1) {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 28px;
    font-weight: 900;
    text-align: center;
    border-bottom: 1px solid #ccc;
}

.preview-mode-newspaper-times h2 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 20px;
    font-weight: 700;
    text-transform: uppercase;
    border-bottom: 1px solid #1a1a1a;
    padding-bottom: 4px;
}

.preview-mode-newspaper-times p {
    text-indent: 1.5em;
    margin-bottom: 0;
}

.preview-mode-newspaper-times h2+p,
.preview-mode-newspaper-times h3+p,
.preview-mode-newspaper-times .newspaper-masthead+p,
.preview-mode-newspaper-times .preview-cols-2>p:first-child {
    text-indent: 0;
}

.preview-mode-newspaper-times h2+p::first-letter,
.preview-mode-newspaper-times .preview-cols-2>p:first-child::first-letter {
    float: left;
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 3.2em;
    font-weight: 900;
    line-height: 0.8;
    padding-top: 0.1em;
    padding-right: 0.08em;
    padding-bottom: 0.1em;
    color: #111;
}

.preview-mode-newspaper-times img {
    filter: grayscale(100%) contrast(1.2) sepia(20%);
    border: 1px solid #333;
    padding: 2px;
    background: #fff;
    margin: 12px 0;
}

/* ---- Newspaper Tabloid Mode Preview Styles ---- */

.preview-mode-newspaper-tabloid {
    font-family: 'Roboto', -apple-system, sans-serif;
    background-color: #ffffff;
    color: #000;
}

.preview-mode-newspaper-tabloid .preview-cols-2 {
    column-rule: 2px solid #000;
    text-align: justify;
}

.preview-mode-newspaper-tabloid .newspaper-masthead-tabloid {
    text-align: center;
    background-color: #e60000;
    color: #ffffff;
    padding: 20px 10px 15px 10px;
    margin-bottom: 24px;
    border: 3px solid #000;
}

.preview-mode-newspaper-tabloid .newspaper-masthead-tabloid h1 {
    font-family: 'Oswald', Impact, sans-serif;
    font-size: 48px;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: -0.03em;
    border-bottom: none;
    padding-bottom: 0;
}

.preview-mode-newspaper-tabloid .newspaper-subtitle {
    font-family: 'Oswald', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #000;
    background-color: #ffcc00;
    display: inline-block;
    padding: 4px 12px;
    margin: 10px 0 0 0;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    border: 2px solid #000;
}

.preview-mode-newspaper-tabloid .newspaper-meta-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 3px solid #000;
    border-bottom: 3px solid #000;
    margin-top: 15px;
    padding: 6px 12px;
    font-family: 'Oswald', sans-serif;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    color: #000;
    background-color: #fff;
}

.preview-mode-newspaper-tabloid .newspaper-meta-item:first-child {
    text-align: left;
}

.preview-mode-newspaper-tabloid .newspaper-meta-item:nth-child(2) {
    text-align: center;
    font-weight: 900;
}

.preview-mode-newspaper-tabloid .newspaper-meta-item:last-child {
    text-align: right;
}

.preview-mode-newspaper-tabloid h1:not(.newspaper-masthead-tabloid h1) {
    font-family: 'Oswald', Impact, sans-serif;
    font-size: 32px;
    font-weight: 700;
    line-height: 1;
    margin: 32px 0 16px 0;
    text-align: left;
    text-transform: uppercase;
    color: #000;
    letter-spacing: -0.02em;
    border-bottom: none;
}

.preview-mode-newspaper-tabloid h2 {
    font-family: 'Oswald', Impact, sans-serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.1;
    margin: 24px 0 10px 0;
    text-align: left;
    text-transform: uppercase;
    color: #e60000;
    letter-spacing: -0.01em;
    border-bottom: none;
    padding-bottom: 0;
}

.preview-mode-newspaper-tabloid p {
    text-indent: 0;
    margin-bottom: 10px;
}

.preview-mode-newspaper-tabloid h2+p::first-letter,
.preview-mode-newspaper-tabloid .preview-cols-2>p:first-child::first-letter {
    float: left;
    font-family: 'Oswald', Impact, sans-serif;
    font-size: 4em;
    font-weight: 700;
    line-height: 0.8;
    padding-top: 0.1em;
    padding-right: 0.08em;
    padding-bottom: 0.1em;
    color: #e60000;
}

.preview-mode-newspaper-tabloid img {
    border: 3px solid #000;
    padding: 0;
    background: #000;
    margin: 12px 0;
    filter: contrast(1.1);
}

.preview-mode-newspaper-tabloid blockquote {
    margin: 20px 0;
    padding: 16px;
    border: 3px solid #e60000;
    background-color: #ffdce0;
    font-family: 'Oswald', sans-serif;
    font-size: 18px;
    font-weight: 700;
    text-align: center;
}

.preview-mode-newspaper-tabloid blockquote p {
    color: #e60000;
    text-transform: uppercase;
}

/* ---- Resume Mode Preview Styles ---- */

.preview-mode-resume {
    font-family: 'Inter', -apple-system, sans-serif;
    color: #222;
    background-color: #ffffff;
    /* Force single column for resume preview */
    column-count: 1 !important;
}

.preview-mode-resume .preview-cols-2 {
    column-count: 1 !important;
}

.preview-mode-resume .resume-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    border-bottom: 2px solid #222;
    padding-bottom: 16px;
    margin-bottom: 24px;
}

.preview-mode-resume .resume-header-main {
    flex: 1;
}

.preview-mode-resume .resume-header-main h1 {
    font-size: 32px;
    font-weight: 700;
    margin: 0;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: #111;
    border-bottom: none;
    padding-bottom: 0;
}

.preview-mode-resume .resume-role {
    font-size: 14px;
    font-weight: 500;
    color: #555;
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.preview-mode-resume .resume-contact {
    font-size: 11px;
    text-align: right;
    line-height: 1.6;
    color: #444;
}

.preview-mode-resume .resume-contact a {
    color: #0056b3;
    text-decoration: none;
}

.preview-mode-resume .resume-contact a:hover {
    text-decoration: underline;
}

.preview-mode-resume .resume-contact .contact-item {
    display: block;
}

.preview-mode-resume h1:not(.resume-header-main h1) {
    font-size: 24px;
    font-weight: 700;
    margin: 32px 0 16px 0;
    border-bottom: 2px solid #222;
    padding-bottom: 8px;
}

.preview-mode-resume h2 {
    font-size: 18px;
    font-weight: 700;
    margin: 24px 0 12px 0;
    color: #111;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid #ddd;
    padding-bottom: 4px;
}

.preview-mode-resume h3 {
    font-size: 14px;
    font-weight: 600;
    margin: 16px 0 4px 0;
    color: #222;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.preview-mode-resume h3 em {
    font-size: 12px;
    font-weight: 400;
    color: #666;
    font-style: normal;
}

.preview-mode-resume h4 {
    font-size: 13px;
    font-weight: 600;
    margin: 8px 0 4px 0;
    color: #444;
    font-style: italic;
}

.preview-mode-resume p {
    text-align: left;
    margin-bottom: 10px;
}

.preview-mode-resume ul,
.preview-mode-resume ol {
    margin: 0 0 12px 0;
    padding-left: 20px;
}

.preview-mode-resume li {
    margin-bottom: 4px;
    line-height: 1.4;
}

.preview-mode-resume a:not(.resume-contact a) {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: #aaa;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.preview-mode-resume code {
    background: #f4f4f4;
    padding: 2px 4px;
    border-radius: 3px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85em;
}

.preview-mode-resume hr {
    border: none;
    border-top: 1px solid #ddd;
    margin: 20px 0;
}

/* =========================================
   CERTIFICATE MODE PREVIEW OVERRIDES
   ========================================= */

.preview-mode-certificate {
    font-family: 'Lora', serif;
    color: #333;
    text-align: center;
    padding: 60px 80px;
    background-color: #fdfbf7;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><rect width="100%" height="100%" fill="none" stroke="%23b89947" stroke-width="4" stroke-dasharray="10 5"/></svg>');
    background-size: calc(100% - 24px) calc(100% - 24px);
    background-position: center;
    background-repeat: no-repeat;
    /* Create the double ornate edge feel */
    border: 12px double #b89947;
    box-shadow: inset 0 0 40px rgba(184, 153, 71, 0.1);
    position: relative;
    /* We mock landscape within the portrait preview window by adjusting padding */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100%;
    /* Fill the preview pane */
}

.preview-mode-certificate h1 {
    font-family: 'Cinzel', serif;
    font-size: 42pt;
    font-weight: 700;
    color: #b89947;
    margin-bottom: 30px;
    margin-top: 0;
    text-transform: uppercase;
    letter-spacing: 2px;
    border-bottom: none;
    padding-bottom: 0;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

.preview-mode-certificate h2 {
    font-family: 'Great Vibes', cursive;
    font-size: 52pt;
    color: #2c3e50;
    margin: 40px 0;
    font-weight: 400;
    line-height: 1.2;
}

.preview-mode-certificate h3 {
    font-family: 'Lora', serif;
    font-size: 18pt;
    font-style: italic;
    color: #555;
    margin: 20px 0;
    font-weight: 400;
}

.preview-mode-certificate h4 {
    font-family: 'Cinzel', serif;
    font-size: 14pt;
    color: #777;
    margin: 15px 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.preview-mode-certificate p {
    font-size: 16pt;
    line-height: 1.6;
    margin: 20px auto;
    max-width: 80%;
}

.preview-mode-certificate strong,
.preview-mode-certificate em {
    color: #b89947;
}

/* Certificate Footer Elements inside Preview */
.preview-mode-certificate .certificate-footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-top: 60px;
    padding: 0 40px;
}

.preview-mode-certificate .cert-field {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 250px;
}

.preview-mode-certificate .cert-field-line {
    border-bottom: 2px solid #555;
    width: 100%;
    height: 50px;
    /* Space for signature/date */
    margin-bottom: 10px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    overflow: visible;
}

.preview-mode-certificate .cert-field-label {
    font-family: 'Cinzel', serif;
    font-size: 11pt;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.preview-mode-certificate .cert-signature-img {
    position: absolute;
    bottom: 5px;
    color: #2c3e50;
    white-space: nowrap;
}

.preview-mode-certificate .cert-seal {
    width: 120px;
    height: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.preview-mode-certificate .cert-seal img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* =========================================
   NEWSLETTER MODE PREVIEW OVERRIDES
   ========================================= */

.preview-mode-newsletter {
    font-family: 'Inter', -apple-system, sans-serif;
    color: #1a1a1a;
    text-align: left;
    max-width: 680px;
    margin: 0 auto;
    /* The sheet carries the margins now; this was their stand-in. */
    padding: 0;
    background-color: #f5f5f5;
}

.preview-mode-newsletter .newsletter-masthead {
    text-align: center;
    padding: 20px 0 15px;
    margin-bottom: 24px;
    border-bottom: 4px solid #e63946;
}

.preview-mode-newsletter .newsletter-masthead h1 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 36px;
    font-weight: 900;
    color: #1a1a1a;
    margin: 0 0 8px;
    letter-spacing: -0.02em;
    line-height: 1.1;
    border-bottom: none;
    padding-bottom: 0;
}

.preview-mode-newsletter .newsletter-subtitle {
    font-size: 14px;
    font-weight: 400;
    color: #666;
    font-style: italic;
    margin-bottom: 8px;
}

.preview-mode-newsletter .newsletter-meta {
    display: flex;
    justify-content: center;
    gap: 20px;
    font-size: 10px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.preview-mode-newsletter h1 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 28px;
    font-weight: 700;
    margin: 28px 0 10px;
    line-height: 1.2;
    border-bottom: none;
    padding-bottom: 0;
}

.preview-mode-newsletter h2 {
    font-family: 'Inter', sans-serif;
    font-size: 20px;
    font-weight: 700;
    margin: 24px 0 8px;
    padding-bottom: 4px;
    border-bottom: 2px solid #e63946;
}

.preview-mode-newsletter h3 {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin: 20px 0 6px;
}

.preview-mode-newsletter p {
    text-align: left;
    line-height: 1.75;
    margin-bottom: 14px;
}

.preview-mode-newsletter blockquote {
    border-left: 4px solid #e63946;
    margin: 20px 0;
    padding: 12px 20px;
    background: #fdf2f2;
    font-size: 13px;
    font-style: italic;
    color: #333;
    border-radius: 0 6px 6px 0;
}

.preview-mode-newsletter hr {
    border: none;
    text-align: center;
    margin: 24px 0;
    height: auto;
    overflow: visible;
}

.preview-mode-newsletter hr::after {
    content: '• • •';
    color: #ccc;
    font-size: 14px;
    letter-spacing: 6px;
}

.preview-mode-newsletter a {
    color: #e63946;
    text-decoration: none;
    border-bottom: 1px solid rgba(230, 57, 70, 0.3);
}

/* =========================================
   POEM MODE PREVIEW OVERRIDES
   ========================================= */

.preview-mode-poem {
    font-family: 'Lora', Georgia, serif;
    color: #2c2c2c;
    text-align: center;
    max-width: 550px;
    margin: 0 auto;
    /* The sheet carries the margins now; this was their stand-in. */
    padding: 0;
    background-color: #faf8f5;
}

.preview-mode-poem .poem-header {
    text-align: center;
    padding: 30px 0 20px;
    margin-bottom: 16px;
}

.preview-mode-poem .poem-header h1 {
    font-family: 'Cinzel', serif;
    font-size: 30px;
    font-weight: 600;
    color: #333;
    margin: 0 0 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-bottom: none;
    padding-bottom: 0;
}

.preview-mode-poem .poem-author {
    font-family: 'Lora', serif;
    font-size: 14px;
    font-style: italic;
    color: #666;
    margin-bottom: 4px;
}

.preview-mode-poem .poem-date {
    font-family: 'Lora', serif;
    font-size: 12px;
    color: #999;
}

.preview-mode-poem h1 {
    font-family: 'Cinzel', serif;
    font-size: 26px;
    font-weight: 600;
    color: #333;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-bottom: none;
    padding-bottom: 0;
    margin: 30px 0 12px;
}

.preview-mode-poem h2 {
    font-family: 'Cinzel', serif;
    font-size: 18px;
    font-weight: 400;
    color: #444;
    letter-spacing: 0.06em;
    border-bottom: none;
    margin: 24px 0 10px;
}

.preview-mode-poem h3 {
    font-family: 'Lora', serif;
    font-size: 14px;
    font-weight: 600;
    font-style: italic;
    color: #555;
    margin: 20px 0 8px;
}

.preview-mode-poem p {
    text-align: center;
    line-height: 1.8;
    margin-bottom: 14px;
    white-space: pre-line;
}

.preview-mode-poem hr {
    border: none;
    text-align: center;
    margin: 24px 0;
    height: auto;
    overflow: visible;
}

.preview-mode-poem hr::after {
    content: '❧';
    color: #b89947;
    font-size: 18px;
}

.preview-mode-poem blockquote {
    border-left: none;
    margin: 20px auto;
    padding: 10px 24px;
    max-width: 420px;
    font-style: italic;
    color: #666;
    text-align: left;
}

.preview-mode-poem table {
    margin: 20px auto;
    text-align: left;
}

.preview-mode-poem th {
    font-family: 'Cinzel', serif;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 2px solid #d4c490;
    padding: 5px 12px;
    color: #555;
}

.preview-mode-poem td {
    padding: 5px 12px;
    border-bottom: 1px solid #eee;
    color: #444;
}

.preview-mode-poem a {
    color: #8b7340;
    text-decoration: none;
    border-bottom: 1px solid rgba(139, 115, 64, 0.3);
}
/* ---- Provider sign-in buttons ----
   The Standard edition carries the same sign-in dialog, so it needs the same
   three controls. The plate is light in both editions — it is the shape people
   recognise, and it is what both providers' branding guidance asks for. The
   marks are inline SVG, so there is no third-party request and no CSP change. */
.account-providers {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 14px;
}

.account-providers[hidden] {
    display: none;
}

.btn-provider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: #1f1f1f;
    background: #fff;
    border: 1px solid #dadce0;
    border-radius: var(--radius-sm);
    padding: 11px 16px;
    text-decoration: none;
    box-shadow: none;
}

.btn-provider:hover {
    color: #1f1f1f;
    background: #f2f2f2;
    border-color: #c6c8ca;
    transform: none;
}

.provider-mark {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* Only drawn when there is something above it to divide from. */
.account-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 14px;
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--color-text-tertiary);
}

.account-divider[hidden] {
    display: none;
}

.account-divider::before,
.account-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--color-border);
}

.account-hint {
    font-size: 12px;
    line-height: 1.5;
    color: var(--color-text-secondary);
    margin: 0 0 14px;
}

/* Pre-purchase terms line: the Consumer Contracts Regulations want the
   cancellation right reachable before the buyer leaves for someone else's
   checkout, and this page is the last one we control. */
.buy-terms {
    display: block;
    text-align: center;
    font-size: 12px;
    color: var(--text-muted);
    opacity: 0.85;
    margin: 22px 0 0;
}

.buy-terms a {
    color: inherit;
    text-decoration: underline;
}

.buy-terms a:hover {
    color: var(--accent);
}

/* Preview watermark caption — the label that tells a free user the stamp is
   ours and not theirs. Pinned to the pane like the page-count chip (which owns
   the bottom-right corner), and shown by the same class the stamp itself uses,
   so the two can never disagree. Preview-only: the PDF is rendered server-side
   from the Markdown, so nothing here can reach it. */
.preview-stamp-note {
    display: none;
    position: absolute;
    top: 12px;
    right: 14px;
    z-index: 3;
    margin: 0;
    max-width: calc(100% - 28px);
    padding: 3px 10px;
    border-radius: 999px;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: #555;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(0, 0, 0, 0.14);
    pointer-events: none;
}

#preview.show-watermark ~ .preview-stamp-note {
    display: block;
}

/* Free-tier note under each Download button. Hidden in the markup and shown
   only once the server's balance says the next PDF is stamped, so a customer
   holding credits never sees it flash by while that answer is in flight. */
.watermark-note {
    margin: 0;
    font-size: 10px;
    line-height: 1.4;
    color: var(--color-text-secondary);
    text-align: center;
}

.watermark-note a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.watermark-note a:hover {
    color: var(--color-accent);
}

.watermark-note[hidden] {
    display: none;
}

/* The toolbar's action column is sized by the Download button. The note is a
   sentence, so it would widen the column and eat the controls beside it: zero
   width keeps it out of that measurement, and the minimum stretches it back to
   whatever the column ended up being. */
.toolbar-actions .watermark-note {
    width: 0;
    min-width: 100%;
}

/* The sticky bottom bar is one row of controls; the note takes a line of its
   own beneath them rather than squeezing the button. Wrapping stops the
   Download button shrinking to fit that row, which is how the three controls
   used to share it, so it is told it may shrink again. */
.converter-download-bar {
    flex-wrap: wrap;
    row-gap: 6px;
}

.converter-download-bar .btn-download-bottom {
    min-width: 0;
}

.converter-download-bar .watermark-note {
    flex: 0 0 100%;
    /* Last on screen, so the counter stays on the controls' row, while the
       markup keeps it next to the button it is about. */
    order: 1;
}

.credits-modal-watermark {
    margin: 14px 0 0;
    font-size: 12px;
    color: var(--color-text-secondary);
}