/* Shared visual language for the complete creator workspace and public site. */
.site-page {
    --bg-input: #fafbf8; --bg-secondary: #f1f4ed; --border: #dce2d8;
    --accent-dim: #fff0e4; --accent-glow: transparent;
    --secondary: #526747; --secondary-dim: #edf2e8;
    --success: #276341; --error: #b33434; --warning: #805f13;
    --shadow-sm: 0 2px 8px #25352108; --shadow-md: 0 8px 30px #2535210d;
    --shadow-lg: 0 16px 50px #25352114; --shadow-glow: none;
    color-scheme: light;
}
.site-page .card { background: #fff; border: 1px solid var(--border); box-shadow: none; border-radius: 14px; }
.site-page .form-input { color: var(--text-primary); background: var(--bg-input); border-color: #cdd5c9; border-radius: 8px; }
.site-page .form-input:focus { border-color: #a34e27; box-shadow: 0 0 0 3px #ff803d1c; }
.site-page .form-input::placeholder { color: #727b70; }
.site-page .form-label { color: #384332; font-weight: 600; }
.site-page .form-hint { font-size: 12px; color: var(--text-secondary); margin-top: 8px; }
.site-page .btn-outline { border: 1px solid #c7d0c0; color: #34402e; background: transparent; }
.site-page .btn-outline:hover { background: #f0f4eb; }
.site-page .btn:disabled { opacity: .55; cursor: not-allowed; }
.site-page .btn-sm { min-height: 38px; padding: 9px 15px; font-size: 12px; }
.site-page .btn-full { width: 100%; }
.site-page .alert-success { background: #edf6ee; color: #28633b; border-color: #c3dec8; }
.site-page .alert-error, .site-page .bl-alert.error { background: #fff0ef; color: #a72c2c; border-color: #f1c8c4; }
.site-page .alert-info { background: #eef3f7; color: #36536b; border-color: #cddce7; }
.site-page .alert-warning, .site-page .bl-alert.warn { background: #fff6e4; color: #805419; border-color: #edd5ac; }
.site-page .plan-badge.free, .site-page .bl-plan-pill.free { background: #edf2e8; color: #506740; }
.site-page .plan-badge.starter, .site-page .bl-plan-pill.starter { background: #eaf4ec; color: #2c6343; }
.site-page .plan-badge.pro, .site-page .bl-plan-pill.pro { background: #fff0e3; color: #92451f; }
.site-page .current-plan-badge { background: #edf2e8; color: #47603b; }
.site-page .credits-progress { background: #e7ece3; }
.site-page .credits-progress-fill { background: #66815a; }
.site-page .credits-progress-fill.warning { background: #cf743c; }
.site-page .credits-count { color: #9d471d; font-family: var(--font-display); font-weight: 500; }
.site-page .credits-count small { color: #687160; }
.site-page .credits-bar { background: #f0f4ea; border: 1px solid #dce4d3; box-shadow: none; border-radius: 12px; }
.site-page .workspace-nav { padding-top: 78px; border-bottom: 1px solid var(--border); background: #f6f7f1; }
.site-page .workspace-nav nav { display: flex; gap: 24px; overflow-x: auto; }
.site-page .workspace-nav a { display: inline-flex; align-items: center; gap: 8px; padding: 19px 0 16px; white-space: nowrap; font-size: 12px; color: #606d59; border-bottom: 2px solid transparent; }
.site-page .workspace-nav a[aria-current] { color: #91421d; border-color: #df7744; }
.site-page .workspace-nav .mk-icon { width: 17px; height: 17px; }
.site-page.workspace-surface .dashboard, .site-page.workspace-surface .generation-page { padding-top: 40px; min-height: 60vh; }
.site-page .dash-header { align-items: flex-start; margin-bottom: 30px; gap: 24px; }
.site-page .dash-greeting h1, .site-page .dash-header h1 { font-size: clamp(27px, 3vw, 38px); font-weight: 500; letter-spacing: -.045em; line-height: 1.25; }
.site-page .dash-header p { margin-top: 10px; color: var(--text-secondary); }
.site-page .back-link { display: inline-block; margin-bottom: 16px; font-size: 12px; color: #63715a; }
.site-page .generator-card { padding: 30px; }
.site-page .gen-tabs, .site-page .admin-tabs { border-bottom-color: var(--border); }
.site-page .gen-tab-btn, .site-page .admin-tab-btn { color: #66725e; }
.site-page .gen-tab-btn.active, .site-page .admin-tab-btn.active { color: #97441d; border-bottom-color: #d87645; background: #fff6ed; }
.site-page .additional-settings-header { color: #495a40; }
.site-page .settings-grid { gap: 20px; }
.site-page .tool-card { background: #fff; border: 1px solid var(--border); padding: 24px; box-shadow: none; }
.site-page .tools-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.site-page .tools-grid > .tool-card { min-width: 0; max-width: 100%; }
.site-page .tool-card-name { color: #303d29; }
.site-page .gen-tabs, .site-page .admin-tabs { max-width: 100%; overflow-x: auto; }
.site-page .table-scroll { max-width: 100%; overflow-x: auto; }
.site-page .tool-card:hover { border-color: #aebba4; background: #fafbf7; transform: none; box-shadow: none; }
.site-page .tool-card-icon { color: #8b4b2a; background: #f7ede3; }
.site-page .tool-card-credit { color: #53664a; background: #eef3e9; }
.site-page .history-item { border-color: var(--border); background: #fff; }
.site-page .history-item:hover { background: #f6f8f1; border-color: #bac5b1; }
.site-page .history-thumb-placeholder { background: #edf1e6; }
.site-page .title-card { background: #fff; border-color: var(--border); box-shadow: none; }
.site-page .title-card:hover { border-color: #b7c2ad; }
.site-page .title-card.best { background: #fff7ee; border-color: #ddb28f; }
.site-page .ctr-badge.high { color: #2c6740; background: #eaf4e9; }
.site-page .ctr-badge.medium { color: #885e1e; background: #fff3da; }
.site-page .ctr-badge.low { color: #a23434; background: #ffeceb; }
.site-page .status-badge.completed { color: #326840; background: #eaf4ea; }
.site-page .ctr-badge.ctr-high, .site-page .ctr-badge.strong, .site-page .status-badge.status-completed { color: #286039; background: #eaf4e9; }
.site-page .ctr-badge.ctr-mid, .site-page .ctr-badge.decent, .site-page .status-badge.status-pending, .site-page .status-badge.status-transcribing, .site-page .status-badge.status-generating { color: #805f16; background: #fff2da; }
.site-page .ctr-badge.ctr-low, .site-page .ctr-badge.weak, .site-page .status-badge.status-failed { color: #a33131; background: #ffedeb; }
.site-page .btn-compare { color: #4e6540; background: #edf3e5; border-color: #d2dec6; }
.site-page .title-example.bad .title-example-label, .site-page .thumb-ba-tag-before { color: #a43834; }
.site-page .title-example.good .title-example-label, .site-page .thumb-ba-tag-after { color: #2e6941; }
.site-page .tag { color: #4b6042; background: #eff3e9; border-color: #d6dfcc; }
.site-page .admin-table th { background: #f3f5ed; color: #5d6c54; }
.site-page .admin-table td { border-color: var(--border); }
.site-page .admin-table tbody tr:hover { background: #f8faf3; }
.site-page .modal-overlay { background: #25322170; }
.site-page .modal, .site-page .modal-content { background: #fffdf9; border-color: #d5ddcc; box-shadow: var(--shadow-lg); }
.site-page .prompt-textarea, .site-page .ql-container { background: #fff; color: #263123; }
.site-page .ql-toolbar.ql-snow, .site-page .ql-container.ql-snow { border-color: #cdd7c3; }
.site-page .ql-snow .ql-stroke { stroke: #47583c; }
.site-page .ql-snow .ql-fill { fill: #47583c; }
.site-page .ql-snow .ql-picker { color: #47583c; }
.site-page .thumb-upload-area { background: #f7f9f2; border-color: #bdcbb0; }
.site-page .thumb-style-card { background: #f9faf6; border-color: #d7dfce; color: #33442b; }
.site-page .thumb-style-card.active { background: #fff3e7; border-color: #d08b57; }
.site-page .feedback-invite { display: flex; align-items: center; justify-content: space-between; gap: 28px; background: #f0f4e8; border: 1px solid #dce4d1; border-radius: 12px; padding: 28px 32px; margin: 28px 0 38px; }
.site-page .feedback-invite .mk-eyebrow { margin-bottom: 5px; }
.site-page .feedback-invite h2 { font-size: 23px; font-weight: 500; letter-spacing: -.03em; }
.site-page .feedback-invite p:last-child { color: #63715b; font-size: 13px; margin-top: 7px; }
.site-page .feedback-invite .btn { flex-shrink: 0; }
.site-page .feedback-layout { display: grid; grid-template-columns: .9fr 1.1fr; gap: 70px; align-items: start; }
.site-page .feedback-intro h1 { font-size: clamp(30px, 3vw, 42px); font-weight: 500; letter-spacing: -.04em; line-height: 1.2; margin-bottom: 25px; }
.site-page .feedback-intro > p:not(.mk-eyebrow) { color: #606d59; margin-bottom: 18px; }
.site-page .feedback-card { padding: 30px; }
.site-page .review-consent { display: flex; align-items: flex-start; gap: 11px; font-size: 13px; line-height: 1.6; color: #53634a; margin: 20px 0; cursor: pointer; }
.site-page .review-consent input { margin-top: 4px; accent-color: #a5502a; width: 17px; height: 17px; flex-shrink: 0; }
.site-page .review-status { background: #f0f4e8; padding: 14px; margin-bottom: 22px; border-radius: 6px; font-size: 12px; }
.site-page .review-withdraw { border-top: 1px solid var(--border); padding-top: 20px; margin-top: 24px; }
.site-page .review-actions { display: flex; gap: 12px; margin-top: 20px; }
.site-page .admin-review-list { display: grid; gap: 20px; max-width: 900px; }
.site-page .admin-review-list a { overflow-wrap: anywhere; }
.site-page .review-quote { white-space: pre-wrap; overflow-wrap: anywhere; margin: 20px 0; border-left: 2px solid #d68b57; padding-left: 20px; }

/* Authentication has an editorial introduction and a quiet, focused form. */
.site-page .auth-main { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; max-width: 1160px; margin: auto; padding: 148px 40px 80px; align-items: center; }
.site-page .auth-page { padding: 0; min-height: 0; display: block; }
.site-page .auth-card { max-width: none; padding: 36px; }
.site-page .auth-card > .nav-logo { display: none; }
.site-page .auth-card h1 { font-size: 29px; font-weight: 500; letter-spacing: -.04em; text-align: left; }
.site-page .auth-card .subtitle { text-align: left; font-size: 14px; }
.site-page .auth-intro h2 { font-size: clamp(30px, 3vw, 43px); font-weight: 500; letter-spacing: -.045em; line-height: 1.25; }
.site-page .auth-intro > p:not(.mk-eyebrow) { color: #617156; margin-top: 23px; }
.site-page .auth-editorial-mark { width: 155px; height: 155px; background: #f2dfca; border-radius: 45% 45% 10% 10%; margin-top: 38px; display: grid; place-items: center; transform: rotate(-6deg); }
.site-page .auth-editorial-mark .brand-mark { width: 84px; height: auto; }
.site-page .auth-intro .auth-intro-note { font-size: 11px; }

/* Guides, categories, legal pages and error states use the same typography. */
.site-page .hero { padding: 160px 0 60px; background: #f5f6ef; }
.site-page .hero::before, .site-page .hero::after { display: none; }
.site-page .hero-title, .site-page .hero-subtitle, .site-page .hero-cta, .site-page .hero-badge { animation: none; }
.site-page .hero-title { margin-bottom: 18px; }
.site-page .hero .display-xl { font-size: clamp(36px, 4.4vw, 60px); line-height: 1.1; font-weight: 500; letter-spacing: -.05em; }
.site-page .hero-title .accent { color: #a74c23; background: none; -webkit-text-fill-color: currentColor; }
.site-page .hero-subtitle { color: #606e57; font-size: 17px; margin-bottom: 32px; }
.site-page .hero-badge, .site-page .section-tag { color: #99512d; background: transparent; border: 0; border-radius: 0; font-size: 11px; letter-spacing: .06em; }
.site-page .section-title { font-weight: 500; letter-spacing: -.035em; }
.site-page .section { padding: 64px 0; }
.site-page .feature-card, .site-page .page-card { background: #fff; border: 1px solid var(--border); box-shadow: none; }
.site-page .feature-icon { background: #f3f0e5; color: #865830; }
.site-page .category-hero { background: #f1f4ea; padding-bottom: 55px; }
.site-page .category-hero h1 { font-weight: 500; letter-spacing: -.045em; }
.site-page .page-card-link { color: #914a2a; }
.site-page .legal-page { padding: 130px 0 70px; }
.site-page .legal-page .container { max-width: 880px; }
.site-page .legal-page h1 { font-size: clamp(34px, 4vw, 48px); font-weight: 500; letter-spacing: -.04em; }
.site-page .legal-content { background: #fff; border-top: 1px solid var(--border); margin-top: 32px; padding-top: 32px; }
.site-page .legal-content h2 { font-size: 22px; font-weight: 500; }
.site-page .seo-content { color: #4e5d45; }
.site-page .seo-content h2, .site-page .seo-content h3 { color: #273321; font-weight: 500; }
.site-page .seo-content table { background: #fff; }
.site-page .seo-content th { background: #edf2e5; color: #34462b; }
.site-page .faq-item { border-color: var(--border); }
.site-page .demo-preview { margin-top: 0; padding: 24px 0 0; }
.site-page .guide-page { padding-top: 65px; }
.site-page .guide-content h2 { font-weight: 500; font-size: 28px; letter-spacing: -.035em; }
.site-page .guide-content h3 { font-weight: 600; }
.site-page .guide-content table { display: block; max-width: 100%; overflow-x: auto; }
.site-page .demo-window { background: #fff; border-color: #d6dfcd; box-shadow: var(--shadow-md); }
.site-page .demo-topbar { background: #f4f6ee; border-color: var(--border); }
.site-page .demo-thumb-placeholder, .site-page .demo-comp-thumb { background: #e9efdf; color: #5b704b; }
.site-page .demo-tab.active { background: #fff0e4; color: #98471d; }
.site-page .demo-tab, .site-page .demo-label { color: #526347; }
.site-page .demo-title-item.best { background: #fff5e9; border-color: #dfb893; }
.site-page .demo-score, .site-page .demo-comp-ctr { color: #3a6234; }
.site-page .demo-tag { background: #f1f5e9; border-color: #d6e0c9; color: #536946; }

/* Real reviews, with native scrolling as a no-JavaScript fallback. */
.site-page .mk-review-track { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; padding-bottom: 16px; }
.site-page .mk-review-track .mk-review-card { flex: 0 0 calc((100% - 40px) / 3); min-width: 0; display: flex; flex-direction: column; scroll-snap-align: start; }
.site-page .mk-review-track blockquote { white-space: pre-wrap; overflow-wrap: anywhere; flex: 1; }
.site-page .mk-review-author { margin-top: 25px; }
.site-page .mk-review-disclosure { font-size: 10px; color: #6d755f; margin-top: 18px; }
.site-page .mk-carousel-controls { display: flex; align-items: center; justify-content: flex-end; gap: 20px; margin-top: 10px; font-size: 12px; color: #647056; }
.site-page .mk-carousel-controls .btn { min-width: 46px; padding: 10px; }
.site-page .mk-review-empty { display: flex; gap: 24px; align-items: center; border-block: 1px solid #dbe1d1; padding: 35px 0; }
.site-page .mk-review-empty > span { width: 65px; height: 65px; display: grid; place-items: center; background: #edf2e4; border-radius: 50%; color: #687b50; }
.site-page .mk-review-empty h3 { font-size: 22px; font-weight: 500; letter-spacing: -.025em; }
.site-page .mk-review-empty p { color: #657257; font-size: 14px; margin-top: 8px; }
.site-page .mk-review-invite > span { font-size: 12px; color: #647056; }
@media (max-width: 1000px) {
    .site-page .auth-main { gap: 32px; }
    .site-page .feedback-layout { gap: 32px; }
    .site-page .mk-review-track .mk-review-card { flex-basis: calc((100% - 20px) / 2); }
}
@media (max-width: 700px) {
    .site-page .container, .site-page .nav-inner { padding-inline: 20px; }
    .site-page .workspace-nav nav { gap: 22px; }
    .site-page .workspace-nav { padding-top: 72px; }
    .site-page .workspace-nav a { font-size: 11px; }
    .site-page.workspace-surface .dashboard, .site-page.workspace-surface .generation-page { padding-top: 26px; }
    .site-page .dash-header { flex-wrap: wrap; gap: 16px; }
    .site-page .dash-header > div { min-width: 0; }
    .site-page .dash-greeting p { overflow-wrap: anywhere; }
    .site-page .generator-card, .site-page .feedback-card, .site-page .auth-card { padding: 22px; }
    .site-page .feedback-layout { grid-template-columns: 1fr; gap: 22px; }
    .site-page .feedback-invite { flex-direction: column; align-items: flex-start; padding: 24px; gap: 20px; }
    .site-page .auth-main { display: block; padding: 105px 20px 45px; max-width: 560px; }
    .site-page .auth-intro { margin-bottom: 28px; }
    .site-page .auth-intro h2 { font-size: 27px; }
    .site-page .auth-intro > p:not(.mk-eyebrow), .site-page .auth-editorial-mark { display: none; }
    .site-page .hero { padding: 118px 0 42px; }
    .site-page .legal-page { padding-top: 105px; }
    .site-page .admin-tabs { overflow-x: auto; flex-wrap: nowrap; }
    .site-page .admin-tab-btn { white-space: nowrap; }
    .site-page .gen-tabs { width: 100%; }
    .site-page .gen-tab-btn { padding: 10px; font-size: 12px; flex: 1; }
    .site-page .gen-tab-btn .mk-icon { width: 15px; height: 15px; }
    .site-page .tools-grid { grid-template-columns: minmax(0, 1fr); }
    .site-page .tool-card { padding: 18px; gap: 12px; }
    .site-page .title-option { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 12px; padding: 16px; }
    .site-page .title-option .number { grid-column: 1; grid-row: 1; align-self: start; }
    .site-page .title-option .text { grid-column: 2 / -1; grid-row: 1; min-width: 0; overflow-wrap: anywhere; }
    .site-page .title-option .ctr-badge { grid-column: 2; grid-row: 2; justify-self: start; }
    .site-page .title-option .copy-btn { grid-column: 3; grid-row: 2; }
    .site-page .mk-review-track .mk-review-card { flex-basis: 90%; }
    .site-page .mk-review-empty { align-items: flex-start; }
    .site-page .mk-review-empty > span { display: none; }
    .site-page .mk-review-invite > span { display: block; }
}