/* Website presentation follows assets/css/app-editorial.css in the Node app.
   Keep page layouts and product illustrations in their existing stylesheets. */
:root {
 --brand-heading-font:var(--brand-body-font);
 --app-title-size:32px; --app-section-size:18px; --app-body-size:14px;
 --app-label-size:13px; --app-small-size:12px; --app-control-height:42px;
 --lavender-line:var(--brand-lavender-line);
}
body {font:400 var(--app-body-size)/1.7 var(--brand-body-font);color:var(--brand-ink);background:var(--brand-paper);}
body #top :is(h1,h2,h3,h4,h5,h6) {font-family:var(--brand-body-font);font-weight:600;letter-spacing:-.025em;color:var(--brand-ink);}
body #top h1 {font-size:var(--app-title-size);line-height:1.25;}
body #top h2 {font-size:24px;line-height:1.35;}
body #top h3 {font-size:var(--app-section-size);line-height:1.4;}
body #top :is(h1,h2,h3) .serif {font-family:inherit;font-weight:inherit;font-style:normal;}
body #top :is(.section-heading,.journal-intro)>p {font-size:14px;line-height:1.8;color:var(--brand-muted);}
body #top .hero-focus h1 {font-size:clamp(32px,3.5vw,48px);line-height:1.16;margin-block:24px;}
body #top .hero-focus h1 .serif {display:inline;}
body #top .hero-focus .hero-desc {font-size:14px;line-height:1.8;color:var(--brand-muted);}
body #top :is(.hero-product-note,.feature-handnote,.pricing-addons-title) {font-family:var(--brand-body-font);font-size:14px;font-weight:500;}
body #top .hero-preview-draft h2 {font-size:23px;line-height:1.25;}
body #top .feature-card h3 {font-size:28px;line-height:1.25;}
body #top .section-heading h2 {font-size:32px;}
body #top .tool-workspace h2 {font-size:18px;margin-bottom:24px;}
body #top .generator-result-heading h2 {margin-bottom:0;}
body #top .snippet-editor-heading h2,body #top .snippet-preview-heading h2 {margin-bottom:8px;}
body #top .prose {font-size:14px;line-height:1.8;color:var(--brand-muted);padding:32px;border-color:var(--brand-line);border-radius:var(--brand-card-radius);background:var(--brand-paper);}
body #top .prose h2 {font-size:22px;margin-block:32px 12px;}
body #top .prose h2:first-child {margin-top:0;}
body #top .prose h3 {margin-block:24px 8px;}
body #top :is(.tools-directory-card,.tool-workspace,.journal-card,.journal-featured,.journal-empty) {border-color:var(--brand-line);border-radius:var(--brand-card-radius);box-shadow:var(--brand-shadow);}
body #top .tools-directory-card {padding:24px;background:var(--brand-paper);}
body #top .tools-directory-card :is(h2,h3) {font-size:20px;line-height:1.4;margin-bottom:12px;}
body #top .tools-directory-card p {font-size:14px;line-height:1.8;}
body #top .tool-workspace {gap:24px;padding:24px;background:var(--brand-canvas);}
body #top .tool-workspace[data-free-tool=serp] {padding:0;gap:0;background:var(--brand-paper);}
body #top .snippet-editor {background:var(--brand-canvas);}
body #top .tool-workspace label {font-size:13px;font-weight:500;line-height:1.6;margin-bottom:8px;}
body #top .tool-workspace :is(input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea) {
 font:400 14px/1.6 var(--brand-body-font);color:var(--brand-ink);background:var(--brand-paper);
 border:1px solid var(--brand-line);border-radius:var(--brand-control-radius);padding:10px 12px;min-height:42px;
}
body #top .tool-workspace .snippet-meter-field textarea {border:0;border-radius:0;}
body #top .snippet-meter-field {border-color:var(--brand-line);}
body #top .tool-workspace :is(input,select,textarea)+label {margin-top:24px;}
body #top .tool-workspace :is(input,select,textarea):focus {border-color:#9ca3af;box-shadow:0 0 0 2px #9ca3af14;}
body #top .tool-workspace .snippet-meter-field textarea:focus {box-shadow:none;}
body :is(input[type=checkbox],input[type=radio]) {accent-color:var(--brand-primary);}
body :is(button,input,select,textarea) {font-family:var(--brand-body-font);}
body :is(.btn,.btn-small,.btn-dark,.price-btn),body #top .featured .price-btn {
 min-height:42px;padding:10px 16px;border:1px solid var(--brand-primary);border-radius:var(--brand-control-radius);
 background:var(--brand-primary);color:white;font:600 14px/1.4 var(--brand-body-font);box-shadow:none;
 display:inline-flex;align-items:center;justify-content:center;gap:10px;transform:none;
}
body :is(.btn,.btn-small,.btn-dark,.price-btn):hover,body #top .featured .price-btn:hover {background:var(--brand-primary-hover);border-color:var(--brand-primary-hover);color:white;transform:none;}
body #top .tool-clear {min-height:42px;padding:10px 12px;border:1px solid var(--brand-line);border-radius:var(--brand-control-radius);background:var(--brand-paper);color:var(--brand-muted);font:500 13px/1.5 var(--brand-body-font);box-shadow:none;}
body #top .tool-clear:hover {background:var(--brand-canvas);}
body #top button:disabled {cursor:not-allowed;}
body #top :is(.tool-nav a,.journal-filter) {border-color:var(--brand-line);border-radius:var(--brand-control-radius);font-size:13px;}
body #top .tool-nav a[aria-current] {background:var(--brand-lavender);border-color:var(--brand-lavender-line);color:var(--brand-primary);}
body #top :is(.tool-hint,.tools-group-description) {color:var(--brand-muted);font-size:13px;line-height:1.7;}
body #top :is(.tool-cta,.generator-quota) {background:var(--brand-lavender);border-radius:var(--brand-card-radius);}
body #top .tool-metric {border-color:var(--brand-line);border-radius:12px;padding:16px;}
body #top .tool-metric strong {color:var(--brand-primary);}
body #top .pricing-refresh {background:var(--brand-paper);border-color:var(--brand-line);}
body #top .pricing-refresh .price-card {padding:24px;border:1px solid var(--brand-line);border-radius:var(--brand-card-radius);background:var(--brand-paper);box-shadow:var(--brand-shadow);color:var(--brand-ink);}
body #top .pricing-refresh .price-card.featured {border-color:var(--brand-lavender-line);}
body #top .pricing-refresh .price-name {font-size:20px;}
body #top .pricing-refresh :is(.price-desc,.amount span,.price-billing-caption,.price-annual,.check-list li) {color:var(--brand-muted);}
body #top .pricing-refresh .price-included {color:var(--brand-ink);}
body #top .pricing-refresh .price-rule {background:var(--brand-line);}
body #top .pricing-refresh :is(.price-plan-icon,.plan-highlight) {background:var(--brand-lavender);color:var(--brand-primary);}
body #top .pricing-refresh .check-list li>span {background:var(--brand-mint);color:var(--brand-green);}
body #top .pricing-billing {background:var(--brand-canvas);border-color:var(--brand-line);border-radius:var(--brand-control-radius);}
body #top .pricing-billing label>span {min-height:42px;box-sizing:border-box;border-radius:6px;}
body #top .pricing-billing input:checked+span {color:var(--brand-primary);box-shadow:none;background:var(--brand-paper);}
body #top .pricing-billing input:focus-visible+span {outline:2px solid #9ca3af;outline-offset:2px;}
body #top .pricing-addons {border-color:var(--brand-line);background:var(--brand-paper);border-radius:var(--brand-card-radius);}
body #top :is(.price-included,.price-billing-caption,.pricing-note,.pricing-addons p) {font-size:12px;}
body .announcement {background:var(--brand-lavender);color:var(--brand-ink);border-color:var(--brand-lavender-line);}
body .announcement a {color:var(--brand-primary);}
body .header {background:var(--brand-paper);border-color:var(--brand-line);}
body :is(.nav-links a,.nav-actions .login) {font-size:13px;font-weight:500;color:var(--brand-muted);}
body :is(.nav-links a,.nav-actions .login):hover {color:var(--brand-primary);}
body .menu-btn {min-height:42px;min-width:42px;border-color:var(--brand-line);border-radius:var(--brand-control-radius);color:var(--brand-muted);}
body .footer {background:var(--brand-canvas);border-color:var(--brand-line);color:var(--brand-muted);}
body .footer :is(p,a) {font-size:13px;color:var(--brand-muted);}
body .footer strong {font:600 13px/1.6 var(--brand-body-font);color:var(--brand-ink);}
body :is(a,button,input,textarea,select,summary,[tabindex]):focus-visible {outline:2px solid #9ca3af;outline-offset:2px;}
@media(max-width:800px) {
 :root {--app-title-size:26px;}
 body #top .tool-workspace {padding:20px;}
 body #top .tool-workspace[data-free-tool=serp] {padding:0;}
 body #top .section-heading h2 {font-size:26px;}
 body #top .feature-card h3 {font-size:24px;}
 body #top .prose {padding:24px;}
}
@media(max-width:620px) {
 body #top .hero-preview-draft h2 {font-size:18px;}
 body #top .hero-focus h1 {font-size:32px;}
 body .nav-actions .btn {font-size:12px;padding:10px;}
 body #top .tool-workspace {padding:16px;}
 body #top .tool-workspace[data-free-tool=serp] {padding:0;}
 body #top .tools-directory-card,body #top .pricing-refresh .price-card {padding:24px;}
 body #top .prose {padding:20px;}
}
/* Keep the inverse callout readable while sharing the app's control styling. */
body #top .statement h2 {color:var(--brand-paper);}
body #top .statement .btn-light {min-height:42px;padding:10px 16px;background:var(--brand-mint);border-color:var(--brand-mint-line);color:var(--brand-green);font-size:14px;}
body #top .statement .btn-light:hover {background:#dceee2;color:var(--brand-green);border-color:var(--brand-mint-line);}
body #top :is(.journal-art-note,.journal-card-note) {font:500 18px/1.5 var(--brand-body-font);}

/* New-user checkout offer. */
body .announcement {flex-wrap:wrap;text-align:center;}
body .announcement > span:nth-child(2) {display:inline;}
body #top .pricing-offer {display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 14px;max-width:560px;margin:0 auto 24px;padding:14px 18px;border:1px solid var(--brand-lavender-line);border-radius:10px;background:var(--brand-lavender);color:var(--brand-ink);text-align:center;font-size:14px;line-height:1.6;}
body #top .pricing-offer code {display:inline-block;padding:1px 7px;border:1px dashed var(--brand-primary);border-radius:5px;background:var(--brand-paper);color:var(--brand-primary);font-weight:700;letter-spacing:.04em;}
@media(max-width:480px){body .announcement{gap:4px 8px;padding:8px 12px;}body #top .pricing-offer{flex-direction:column;gap:4px;}}

/* Detailed plan comparison. */
body #top .plan-comparison {margin-top:76px;}
body #top .plan-comparison .section-heading {margin-bottom:28px;}
.comparison-scroll {overflow-x:auto;border:1px solid var(--brand-line);border-radius:16px;background:var(--brand-paper);scrollbar-width:thin;}
.comparison-scroll:focus-visible {outline:2px solid var(--brand-primary);outline-offset:4px;}
.comparison-table {width:100%;min-width:760px;border-collapse:separate;border-spacing:0;table-layout:fixed;text-align:left;}
.comparison-table :is(th,td) {padding:19px 22px;border-bottom:1px solid var(--brand-line);font-size:14px;line-height:1.6;vertical-align:middle;color:var(--brand-ink);}
.comparison-table th:first-child {width:31%;text-align:left;}
.comparison-table thead th {vertical-align:top;padding-top:26px;padding-bottom:26px;}
.comparison-table :is(td,thead th:not(:first-child)) {text-align:center;}
.comparison-plan-name {display:block;font-size:17px;font-weight:600;margin-bottom:10px;}
.comparison-price {display:block;font-size:24px;font-weight:600;letter-spacing:-.04em;}
.comparison-price small {font-size:12px;font-weight:400;letter-spacing:0;color:var(--brand-muted);}
.comparison-yearly {display:block;font-size:12px;font-weight:400;color:var(--brand-muted);margin-top:5px;}
.comparison-table .comparison-featured {background:#f8f6ff;}
.comparison-table tbody th[scope=row] {font-weight:500;}
.comparison-feature-note {display:block;color:var(--brand-muted);font-size:12px;font-weight:400;line-height:1.6;margin-top:4px;}
.comparison-table .comparison-group th {width:auto;padding:12px 22px;background:var(--brand-canvas);font-size:12px;font-weight:600;color:var(--brand-muted);letter-spacing:.03em;}
.comparison-included {color:var(--brand-green);font-size:13px;white-space:nowrap;}
.comparison-included>span {margin-right:4px;}
.comparison-unavailable {font-size:12px;color:var(--brand-muted);}
.comparison-table tfoot :is(th,td) {border-bottom:0;padding-top:24px;padding-bottom:24px;}
body #top .comparison-table .btn {display:inline-flex;justify-content:center;white-space:normal;font-size:12px;padding:10px 12px;min-height:42px;line-height:1.5;}
body #top .comparison-footnote {max-width:780px;margin:20px auto 0;color:var(--brand-muted);font-size:12px;line-height:1.8;text-align:center;}
.comparison-scroll-hint {display:none;}
@media(max-width:800px){body #top .plan-comparison{margin-top:52px;}.comparison-scroll-hint{display:block;font-size:12px;color:var(--brand-muted);margin:0 0 12px;}.comparison-table :is(th,td){padding:15px 16px;}.comparison-table th:first-child{width:29%;}.comparison-table thead th:first-child,.comparison-table tbody th[scope=row],.comparison-table tfoot th{position:sticky;left:0;z-index:1;background:var(--brand-paper);box-shadow:3px 0 6px #24203005;}.comparison-table .comparison-group th{position:static;}}

/* Keep pricing button text and background colors paired on hover and focus. */
body #top .pricing-refresh .price-card:not(.featured) .price-btn:is(:hover,:focus-visible),
body #top .comparison-table .btn-secondary:is(:hover,:focus-visible) {background:var(--brand-lavender);border-color:var(--brand-primary);color:var(--brand-primary);transform:none;}
body #top .pricing-refresh .featured .price-btn:is(:hover,:focus-visible),
body #top .comparison-table .btn-primary:is(:hover,:focus-visible) {background:var(--brand-primary-hover);border-color:var(--brand-primary-hover);color:#fff;transform:none;}
body #top .comparison-table .btn-secondary {background:var(--brand-paper);border-color:var(--brand-line);color:var(--brand-ink);}
body #top .pricing-refresh :is(.price-btn,.comparison-table .btn):focus-visible {outline:2px solid var(--brand-primary);outline-offset:3px;}

/* Separate the home-page callout from the pricing divider. */
body.is-home #top .statement {margin-bottom:32px;}
@media(max-width:620px){body.is-home #top .statement {margin-bottom:24px;}}

body #top .price-details-link {display:inline-flex;align-items:center;gap:7px;margin-top:18px;color:var(--brand-primary);font-size:12px;font-weight:500;text-decoration:none;}
body #top .price-details-link:hover {text-decoration:underline;text-underline-offset:3px;}
#compare-plans-title {scroll-margin-top:110px;}