/* Inter and Roboto Flex: SIL Open Font License; licenses in assets/fonts. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/inter-1.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/inter-2.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/inter-3.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/inter-4.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/inter-5.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/inter-6.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/inter-7.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Roboto Flex';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/roboto-flex-8.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Roboto Flex';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/roboto-flex-9.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Roboto Flex';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/roboto-flex-10.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: 'Roboto Flex';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/roboto-flex-11.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Roboto Flex';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/roboto-flex-12.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Roboto Flex';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/roboto-flex-13.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{
 --brand-primary:#2563eb;--brand-primary-hover:#1d4ed8;--brand-purple:#2563eb;
 --brand-ink:#111827;--brand-muted:#64748b;--brand-line:#e2e8f0;
 --brand-paper:#fff;--brand-canvas:#f8fafc;--brand-lavender:#eff6ff;--brand-lavender-line:#bfdbfe;
 --brand-green:var(--brand-primary);--brand-mint:var(--brand-lavender);--brand-mint-line:var(--brand-lavender-line);
 --brand-body-font:Inter,Arial,sans-serif;--brand-heading-font:'Roboto Flex',Inter,Arial,sans-serif;
 --brand-control-radius:8px;--brand-card-radius:16px;--brand-hero-radius:16px;
 --brand-shadow:0 4px 16px #1e2b4a08;
 --app-title-size:42px;--app-section-size:24px;--app-body-size:14px;--app-control-height:44px;
 --ink:var(--brand-ink);--muted:var(--brand-muted);--line:var(--brand-line);--purple:var(--brand-primary);--purple-dark:var(--brand-primary-hover);
 --green:var(--brand-primary);--mint:var(--brand-lavender);--lavender:var(--brand-lavender);--lavender-line:var(--brand-lavender-line);
 --ui-green:var(--brand-lavender);--ui-green-ink:var(--brand-primary);--ui-aqua:var(--brand-lavender);--ui-aqua-soft:var(--brand-lavender);--ui-aqua-ink:var(--brand-primary);
 --studio-lime:var(--brand-lavender);--studio-lime-soft:var(--brand-lavender);--studio-lime-ink:var(--brand-primary);
}
body{font-family:var(--brand-body-font);color:var(--brand-ink);background:#fff;-webkit-font-smoothing:antialiased}
body #top :is(h1,h2,h3,h4,h5,h6){font-family:var(--brand-heading-font);font-weight:700;line-height:1.25;letter-spacing:-.025em;color:var(--brand-ink)}
body #top h1{font-size:42px}body #top h2{font-size:32px}body #top h3{font-size:26px}body #top h4{font-size:22px}body #top h5{font-size:20px}body #top h6{font-size:18px}
body #top :is(h1,h2,h3,h4,h5,h6) :is(.serif,em,strong){font-family:inherit;font-size:inherit;font-weight:inherit;font-style:normal}
body #top .hero-focus h1{font-size:clamp(42px,4.5vw,64px);font-weight:700;line-height:1.12;letter-spacing:-.035em}
body #top .hero-focus h1 .serif{color:var(--brand-primary)}
body #top .section-heading h2{font-size:36px;line-height:1.2}
body #top .feature-card h3{font-size:32px;line-height:1.25}
body #top :is(.hero-focus .hero-desc,.section-heading > p,.journal-intro > p){font-size:16px;line-height:1.75;color:#475569}
body #top .hero-preview-draft h2{font-size:26px}
body #top :is(.tool-workspace h2,.tools-directory-card h2,.tools-directory-card h3){font-size:22px}
body #top .prose{font-size:16px;line-height:1.8;color:#475569}
body #top .prose h2{font-size:30px}body #top .prose h3{font-size:26px}body #top .prose h4{font-size:22px}body #top .prose h5{font-size:20px}body #top .prose h6{font-size:18px}
body :is(button,input,select,textarea){font-family:var(--brand-body-font)}
body :is(.btn,.btn-small,.btn-dark,.price-btn,.btn-primary),body #top .featured .price-btn{min-height:44px;box-sizing:border-box;border-radius:8px;background:var(--brand-primary);border-color:var(--brand-primary);color:#fff;box-shadow:none;font-size:14px;font-weight:600}
body :is(.btn,.btn-small,.btn-dark,.price-btn,.btn-primary):hover,body #top .featured .price-btn:hover{background:var(--brand-primary-hover);border-color:var(--brand-primary-hover);color:#fff}
body :is(.btn-outline,.tool-clear){min-height:44px;border-radius:8px;background:#fff;border-color:#cbd5e1;color:#1e3a8a}
body :is(.btn-outline,.tool-clear):hover{background:var(--brand-lavender);border-color:var(--brand-lavender-line)}
body .header{background:#fff;border-color:var(--brand-line)}
body .announcement{background:var(--brand-lavender);color:#1e3a8a;border-color:var(--brand-lavender-line)}
body .announcement a{color:var(--brand-primary)}
body .header .brand-image{filter:hue-rotate(-28deg)}
body .menu-btn svg{stroke:currentColor}
body.is-home #top .hero.hero-focus{background:linear-gradient(120deg,#eff6ff,#fff)}
body.is-home #top :is(.workflow,.faq){background:var(--brand-canvas)}
body #top :is(.tools-directory-card,.tool-workspace,.tool-metric,.journal-card,.journal-featured,.price-card,.pricing-addons,.prose){background:#fff;border-color:var(--brand-line);border-radius:16px;box-shadow:var(--brand-shadow)}
body #top .tool-workspace[data-free-tool=serp]{padding:0}
body #top :is(.snippet-editor,.tool-cta,.generator-quota){background:var(--brand-canvas);border-color:var(--brand-line)}
body #top .tool-workspace :is(input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea){border-color:#cbd5e1;border-radius:8px;font-size:14px;min-height:44px;background:#fff}
body #top .tool-workspace .snippet-meter-field textarea{border:0;border-radius:0}
body #top .tool-workspace :is(input,select,textarea):focus{border-color:var(--brand-primary);box-shadow:0 0 0 3px #2563eb14}
body #top :is(.feature-example,.tone-box,.organize-box,.hero-preview-window,.draft-card){border-color:var(--brand-line);background:#fff;box-shadow:0 12px 32px #1e2b4a0a}
body #top :is(.hero-preview-toolbar,.hero-preview-inspector,.tone-paragraph){background:var(--brand-canvas);border-color:var(--brand-line)}
body #top :is(.hero-topic-pills span,.example-ideas span,.tone-choice,.polished-chip,.hero-score-status){background:var(--brand-lavender);border-color:var(--brand-lavender-line);color:#1e3a8a}
body #top .tone-choice.active{background:var(--brand-primary);color:#fff;border-color:var(--brand-primary)}
body #top :is(.feature-eyebrow,.feature-checkline,.feature-explore,.hero-preview-checks .sketch-icon,.step-num){color:var(--brand-primary)}
body #top .feature-demo::before,body #top .workflow-visual::before{background:var(--brand-lavender)}
body #top .hero-underline{color:var(--brand-lavender-line)}
body #top .hero-score circle:last-child{stroke:var(--brand-primary)}
body #top .faq-list details{padding:18px 20px;border:1px solid var(--brand-line);border-radius:10px;background:var(--brand-canvas);margin-bottom:10px}
body #top .faq-list details[open]{border-color:var(--brand-lavender-line);background:var(--brand-lavender)}
body #top .faq-list summary{color:var(--brand-ink);font-size:16px;font-weight:600}
body #top .faq-list summary::after{background:#fff;color:var(--brand-primary)}
body #top .comparison-table .comparison-featured{background:var(--brand-lavender)}
body #top .pricing-refresh .price-card:not(.featured) .price-btn{background:#fff;color:#1e3a8a;border-color:#cbd5e1;border-radius:8px}
body #top .pricing-refresh .price-card:not(.featured) .price-btn:hover{background:var(--brand-lavender);color:var(--brand-primary);border-color:var(--brand-lavender-line)}
body #top .comparison-included{color:var(--brand-primary)}
body #top .statement{background:#1e2b4a}
body #top .statement h2,body #top .statement h2 .serif{color:#fff}
body #top .statement .btn-light{background:#fff;border-color:#fff;color:var(--brand-primary)}
body #top .statement .btn-light:hover{background:var(--brand-lavender);border-color:var(--brand-lavender-line);color:var(--brand-primary-hover)}
body #top .final-cta{background:var(--brand-primary);border-color:var(--brand-primary);color:#fff}
body #top .final-cta :is(h2,h2 .serif){color:#fff;font-size:38px}
body #top .final-cta p{color:#dbeafe;font-size:16px}
body #top .final-cta :is(.btn,.btn-dark){background:#fff;border-color:#fff;color:var(--brand-primary)}
body #top .final-cta :is(.btn,.btn-dark):hover{background:var(--brand-lavender);color:var(--brand-primary-hover)}
body:is(.is-home,.inner-page) .footer{background:#1e2b4a;color:#cbd5e1;border-color:#34415e}
body .footer :is(p,a,.footer-bottom){color:#cbd5e1;border-color:#34415e}
body .footer :is(strong,h3,h4){color:#fff}
body .footer a:hover{color:#fff}

body :is(a,button,summary,input,select,textarea):focus-visible{outline:2px solid var(--brand-primary);outline-offset:3px}
body .footer :is(a,button):focus-visible{outline-color:#93c5fd}
::selection{background:#dbeafe;color:#1e3a8a}
@media(max-width:800px){
 body #top h1{font-size:34px}body #top .section-heading h2{font-size:30px}body #top .feature-card h3{font-size:28px}
 body #top .hero-focus h1{font-size:42px}
 body #top .tool-workspace :is(input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea){font-size:16px}
}
@media(max-width:480px){body #top .hero-focus h1{font-size:38px}body #top .final-cta :is(h2,h2 .serif){font-size:30px}body #top .prose{padding:22px}body #top .prose h2{font-size:28px}body #top .prose h3{font-size:24px}}


/* Website content uses the same reading scale as the content editor. */
:root{--app-title-size:42px;--app-section-size:30px;--app-body-size:16px;--app-label-size:13px;--app-small-size:13px}
body{font-size:16px;line-height:1.8}
body #top h1{font-size:42px;line-height:1.2}
body #top h2{font-size:30px;line-height:1.3}
body #top h3{font-size:26px;line-height:1.3}
body #top h4{font-size:22px}body #top h5{font-size:20px}body #top h6{font-size:18px}
body #top :is(h1,h2,h3,h4,h5,h6){font-weight:700}
body #top .hero-focus h1,body #top .post-header h1{font-size:42px;line-height:1.2}
body #top .section-heading h2{font-size:30px;line-height:1.3}
body #top .feature-card h3{font-size:26px;line-height:1.3}
body #top :is(.tool-workspace h2,.tools-directory-card h2){font-size:30px}
body #top .tools-directory-card h3{font-size:26px}
body #top :is(p,li){font-size:16px;line-height:1.8}
body #top :is(.hero-focus .hero-desc,.section-heading > p,.journal-intro > p,.feature-card p,.final-cta p){font-size:16px;line-height:1.8}
body #top .final-cta :is(h2,h2 .serif){font-size:30px;line-height:1.3}
body #top :is(.prose,.post-body){font-size:16px;line-height:1.8}
body #top :is(.prose,.post-body) h1{font-size:36px}
body #top :is(.prose,.post-body) h2{font-size:30px}
body #top :is(.prose,.post-body) h3{font-size:26px}
body #top :is(.prose,.post-body) h4{font-size:22px}
body #top :is(.prose,.post-body) h5{font-size:20px}
body #top :is(.prose,.post-body) h6{font-size:18px}
/* Compact interface labels and controls keep the editor's control sizes. */
body :is(.btn,.btn-small,.btn-dark,.price-btn,.btn-primary),body #top :is(.tool-clear,.comparison-table .btn){font-size:14px}
body #top .tool-workspace label{font-size:13px}
body #top :is(.tool-hint,.tools-group-description,.pricing-note,.pricing-addons p,.comparison-footnote){font-size:13px}
body #top :is(.eyebrow,.section-kicker,.feature-eyebrow,.hero-preview-label,.post-category){font-size:12px}
body :is(.nav-links a,.nav-actions .login){font-size:14px}
body #top .post-aside h2{font-size:20px}
@media(max-width:800px){
 body #top h1,body #top .hero-focus h1,body #top .post-header h1{font-size:34px}
 body #top h2,body #top .section-heading h2,body #top :is(.tool-workspace h2,.tools-directory-card h2){font-size:28px}
 body #top h3,body #top .feature-card h3,body #top .tools-directory-card h3{font-size:24px}
 body #top .final-cta :is(h2,h2 .serif){font-size:28px}
 body #top :is(.prose,.post-body) h1{font-size:32px}
 body #top :is(.prose,.post-body) h2{font-size:28px}
 body #top :is(.prose,.post-body) h3{font-size:24px}
}

/* Keep the original icon detail visible next to the inverse footer wordmark. */
body .footer .footer-wordmark{display:inline-flex;align-items:center;gap:2px;line-height:1.2;text-decoration:none;white-space:nowrap}
body .footer .footer-brand-icon{display:block;width:48px;height:48px;object-fit:contain;flex-shrink:0;filter:hue-rotate(-28deg)}
body .footer .footer-brand-name{font:700 24px/1.2 var(--brand-body-font);letter-spacing:-.035em;color:#fff}
body .footer .footer-brand-name > span{color:#93c5fd}