/* Homepage-only visual system. Existing copy, markup order and tool behavior are retained. */
.homepage {
    --page: #fafbf9 !important;
    --surface: #ffffff !important;
    --soft: #f0f4f0 !important;
    --ink: #202e29 !important;
    --muted: #68736d !important;
    --line: #dfe6df !important;
    --accent: #28634d !important;
    --tint: #e8f0e8 !important;
    background: var(--page) !important;
    color: var(--ink) !important;
    font-family: 'Manrope', sans-serif !important;
    -webkit-font-smoothing: antialiased !important;
}
.dark .homepage {
    --page: #17181a !important;
    --surface: #202124 !important;
    --soft: #252629 !important;
    --ink: #ececee !important;
    --muted: #abacb2 !important;
    --line: #38393e !important;
    --accent: #a4d6b6 !important;
    --tint: #2c2d31 !important;
    color-scheme: dark;
}
.homepage .font-display, .homepage .font-body { font-family: 'Manrope', sans-serif !important; }
.homepage :is(h1,h2,h3,h4,h5) { color: var(--ink) !important; text-wrap: balance !important; letter-spacing: -.035em !important; }
.homepage h2 { font-size: clamp(1.9rem, 3.2vw, 2.8rem) !important; line-height: 1.2 !important; font-weight: 700 !important; }
.homepage h3 { letter-spacing: -.025em !important; }
.homepage p { text-wrap: pretty !important; line-height: 1.8 !important; }
.homepage :is(p,li)[class*='text-'], .homepage .text-gray-400, .homepage .text-gray-500 { color: var(--muted) !important; }
.homepage .neo-border { border: 1px solid var(--line) !important; }
.homepage [class*='shadow-neo'] { box-shadow: none !important; }
.homepage [class*='bg-grid-pattern'] { background-image: none !important; }
.homepage [class*='animate-blob'], .homepage [class*='blur-3xl'] { display: none !important; }
.homepage .animate-bounce { animation: none !important; }
.homepage [class*='-rotate-'] { transform: none !important; }
.homepage .uppercase { text-transform: none !important; letter-spacing: .01em !important; }
.homepage .font-black { font-weight: 700 !important; }
.homepage :is(.text-primary,.text-blue-950) { color: var(--ink) !important; }
.homepage [class*='text-indigo-'], .homepage [class*='text-emerald-'], .homepage [class*='text-green-'], .homepage [class*='text-amber-'], .homepage [class*='text-sky-'], .homepage .text-lavender { color: var(--accent) !important; }
.homepage :is(.bg-white,.bg-lavender,.bg-indigo-50,.bg-yellow-200,.bg-rose-100,.bg-emerald-100,.bg-sky-100,.bg-accent) { background-color: var(--surface) !important; }
.homepage :is(button,a) { transition: color .18s, background-color .18s, box-shadow .18s, transform .18s !important; }
.homepage :is(button,a,textarea):focus-visible { outline: 3px solid var(--accent) !important; outline-offset: 4px !important; }
.homepage button:active { transform: translateY(1px) !important; }
.homepage button:disabled { opacity: .55 !important; cursor: wait !important; }
.homepage :is(.max-w-7xl,.max-w-6xl) { max-width: 1184px !important; }
.homepage > nav { background: var(--surface) !important; border-bottom: 1px solid var(--line) !important; }
.homepage > nav .h-16 { height: 80px !important; }
.homepage > nav img { height: 30px !important; }
.homepage > nav .text-2xl { font-size: 18px !important; letter-spacing: -.055em !important; }
.homepage > nav a { font-size: 13px !important; font-weight: 600 !important; }
.homepage > nav a:hover { color: var(--accent) !important; }
.homepage > nav a.neo-border { background: var(--accent) !important; color: var(--surface) !important; border: 0 !important; border-radius: 8px !important; padding: 12px 21px !important; }
.homepage > nav button { color: var(--muted) !important; border-radius: 8px !important; }
.homepage #mobile-menu { background: var(--surface) !important; border-color: var(--line) !important; }
.homepage > header { padding: 140px 24px 64px !important; background: var(--page) !important; }
.homepage > header > .relative > .text-center { margin-bottom: 34px !important; }
.homepage h1 { font-size: clamp(2.35rem, 4.5vw, 4rem) !important; line-height: 1.12 !important; font-weight: 700 !important; letter-spacing: -.055em !important; margin-bottom: 20px !important; }
.homepage h1 span span { color: var(--accent) !important; }
.homepage h1 svg { display: none !important; }
.homepage h1 + p { font-size: 16px !important; line-height: 1.85 !important; max-width: 650px !important; margin-top: 20px !important; font-weight: 400 !important; }
.homepage h1 + p span { background: transparent !important; padding: 0 !important; color: var(--ink) !important; font-weight: 600 !important; }
.homepage h1 ~ .flex { margin-top: 24px !important; opacity: 1 !important; filter: none !important; gap: 26px !important; color: var(--muted) !important; }
.homepage h1 ~ .flex .material-icons-outlined { color: var(--accent) !important; font-size: 17px !important; }
.homepage h1 ~ .flex .text-xs { font-size: 11px !important; font-weight: 500 !important; }
/* A single connected editor surface, with the action in a quiet bottom toolbar. */
.homepage header .mt-12 { margin-top: 0 !important; }
.homepage header .neo-border:has(#inputText) { padding: 0 !important; border-radius: 16px !important; border: 1px solid var(--line) !important; background: var(--surface) !important; box-shadow: 0 16px 48px -24px #254a3838, 0 2px 8px #254a3806 !important; }
.homepage header .grid:has(#inputText) { gap: 0 !important; }
.homepage header .order-1, .homepage header .order-3:has(#outputText) { padding: 0 !important; }
.homepage header .order-1 { border-right: 1px solid var(--line) !important; }
.homepage header .order-1 > .flex, .homepage header .order-3 > .flex { padding: 15px 24px !important; border-bottom: 1px solid var(--line) !important; min-height: 60px !important; }
.homepage header .order-1 > .relative, .homepage header .order-3 > .relative { border: none !important; border-radius: 0 !important; background: var(--surface) !important; }
.homepage header .order-3 > .relative { background: var(--soft) !important; }
.homepage header .h-3 { width: 7px !important; height: 7px !important; background: #a5afa8 !important; }
.homepage header .bg-emerald-400 { background: var(--accent) !important; }
.homepage header .text-xs { color: var(--ink) !important; font-weight: 600 !important; }
.homepage #inputText, .homepage #outputText { height: 266px !important; padding: 24px 24px 52px !important; font-family: 'Manrope', sans-serif !important; font-size: 15px !important; line-height: 1.85 !important; font-style: normal !important; color: var(--ink) !important; border-radius: 0 !important; }
.homepage textarea::placeholder { color: var(--muted) !important; opacity: .85 !important; }
.homepage header .relative:focus-within:has(> textarea) { box-shadow: inset 0 0 0 2px var(--accent) !important; }
.homepage #wordCountLabel { background: transparent !important; box-shadow: none !important; color: var(--muted) !important; font-size: 11px !important; font-weight: 500 !important; font-variant-numeric: tabular-nums !important; }
/* ── Advanced Mode CTA (Brand-aligned, sleek left pill) ── */
#advancedModeLink {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 7px 13px !important;
    border-radius: 9px !important;
    text-decoration: none !important;
    background: var(--tint) !important;
    border: 1px solid rgba(40, 99, 77, 0.22) !important;
    color: var(--ink) !important;
    cursor: pointer !important;
    box-shadow: 0 1px 3px rgba(40, 99, 77, 0.06) !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
#advancedModeLink:hover {
    background: #dbebe0 !important;
    border-color: var(--accent) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(40, 99, 77, 0.14) !important;
}
.dark #advancedModeLink {
    background: rgba(164, 214, 182, 0.08) !important;
    border: 1px solid rgba(164, 214, 182, 0.25) !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2) !important;
}
.dark #advancedModeLink:hover {
    background: rgba(164, 214, 182, 0.16) !important;
    border-color: var(--accent) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35) !important;
}
#advancedModeLink .cta-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--accent) !important;
    color: #ffffff !important;
    border-radius: 6px !important;
    width: 24px !important;
    height: 24px !important;
    flex-shrink: 0 !important;
}
.dark #advancedModeLink .cta-icon {
    color: #17181a !important;
}
#advancedModeLink .cta-icon .material-icons-outlined {
    font-size: 15px !important;
}
#advancedModeLink .cta-text {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}
#advancedModeLink .cta-tag {
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    background: rgba(40, 99, 77, 0.12) !important;
    color: var(--accent) !important;
    padding: 2px 7px !important;
    border-radius: 4px !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
}
.dark #advancedModeLink .cta-tag {
    background: rgba(164, 214, 182, 0.18) !important;
    color: var(--accent) !important;
}
#advancedModeLink .cta-headline {
    font-size: 12.5px !important;
    font-weight: 500 !important;
    color: var(--ink) !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    line-height: 1.4 !important;
}
#advancedModeLink .cta-headline strong {
    font-weight: 800 !important;
    text-decoration: underline !important;
    text-underline-offset: 2px !important;
    color: var(--accent) !important;
}
#advancedModeLink .cta-arrow {
    width: 14px !important;
    height: 14px !important;
    color: var(--accent) !important;
    flex-shrink: 0 !important;
    transition: transform 0.2s ease !important;
}
#advancedModeLink:hover .cta-arrow {
    transform: translateX(2px) translateY(-1px) !important;
}
.homepage :is(#clearInputBtn,#copyOutputBtn,#downloadOutputBtn) { font-size: 11px !important; font-weight: 500 !important; padding: 6px 10px !important; border-radius: 5px !important; color: var(--muted) !important; background: transparent !important; }
.homepage :is(#clearInputBtn,#copyOutputBtn,#downloadOutputBtn):hover { background: var(--tint) !important; color: var(--ink) !important; }
.homepage header .order-2:has(#humanizeBtn) { margin: 0 !important; padding: 14px 24px !important; display: flex !important; flex-direction: row !important; justify-content: space-between !important; align-items: center !important; gap: 16px !important; border-top: 1px solid var(--line) !important; background: var(--surface) !important; flex-wrap: wrap !important; }
.homepage #humanizeBtn { height: 47px !important; padding: 0 24px !important; border: 1px solid transparent !important; border-radius: 8px !important; background: var(--accent) !important; color: var(--surface) !important; gap: 10px !important; box-shadow: 0 3px 8px #244e3020 !important; }
.homepage #humanizeBtn > .absolute { display: none !important; }
.homepage #humanizeBtn:hover { transform: translateY(-1px) !important; box-shadow: 0 5px 14px #244e3035 !important; }
.homepage #humanizeBtn .text-lg { font-size: 13px !important; font-weight: 600 !important; }
.homepage #humanizeBtn .material-icons-outlined { font-size: 21px !important; }
.homepage #outputLoading { background: var(--surface) !important; opacity: .94 !important; }
/* Consistent reading rhythm across every existing section. */
.homepage > header + div { padding: 33px 24px 40px !important; background: var(--page) !important; border: 0 !important; border-bottom: 1px solid var(--line) !important; }
.homepage > header + div p { font-size: 11px !important; margin-bottom: 22px !important; }
.homepage > header + div h3 { color: var(--muted) !important; font-size: 23px !important; letter-spacing: -.055em !important; }
.homepage > section { padding: 88px 0 !important; background: var(--surface) !important; border: 0 !important; border-bottom: 1px solid var(--line) !important; color: var(--ink) !important; }
.homepage > section:nth-of-type(even) { background: var(--page) !important; }
.homepage > section .mb-16 { margin-bottom: 44px !important; }
.homepage > section .text-lg { font-size: 16px !important; }
.homepage > section .underline { text-decoration: none !important; color: var(--accent) !important; }
.homepage > section .inline-block.neo-border { background: var(--tint) !important; border: 0 !important; border-radius: 5px !important; padding: 7px 11px !important; color: var(--accent) !important; }
.homepage > section .inline-block.neo-border span { font-size: 11px !important; color: var(--accent) !important; }
.homepage > section .neo-border { border-radius: 12px !important; background-color: var(--surface) !important; }
.homepage > section .neo-border .neo-border { background: var(--soft) !important; border: 0 !important; border-radius: 8px !important; }
.homepage #features > div > .grid { grid-template-columns: repeat(3,minmax(0,1fr)) !important; gap: 0 !important; border: 1px solid var(--line) !important; border-radius: 16px !important; overflow: hidden !important; }
.homepage #features > div > .grid > div { padding: 32px !important; border: 0 !important; border-radius: 0 !important; background: var(--surface) !important; box-shadow: none !important; }
.homepage #features > div > .grid > div:not(:nth-child(3n)) { border-right: 1px solid var(--line) !important; }
.homepage #features > div > .grid > div:nth-child(-n+3) { border-bottom: 1px solid var(--line) !important; }
.homepage #features > div > .grid > div:hover { background: var(--soft) !important; }
.homepage #features .absolute { display: none !important; }
.homepage #features .w-14 { width: 43px !important; height: 43px !important; background: var(--tint) !important; border: 0 !important; border-radius: 9px !important; margin-bottom: 25px !important; }
.homepage #features .material-icons-outlined { color: var(--accent) !important; font-size: 24px !important; }
.homepage #features h3 { font-size: 18px !important; }
.homepage #features p { font-size: 14px !important; font-weight: 400 !important; }
.homepage > section .flex-wrap > div { border: 1px solid var(--line) !important; background: var(--surface) !important; color: var(--ink) !important; box-shadow: none !important; transform: none !important; }
.homepage > section .flex-wrap > div:hover { background: var(--tint) !important; }
.homepage > section .grid > .text-center { background: var(--surface) !important; }
.homepage > section .text-yellow-500 { color: #9b7e39 !important; }
.homepage > section img.rounded-full { border-radius: 50% !important; border: 0 !important; }
.homepage article { max-width: 740px !important; margin: auto !important; font-size: 16px !important; line-height: 1.9 !important; color: var(--muted) !important; }
.homepage article strong { color: var(--ink) !important; font-weight: 600 !important; }
.homepage article h2 { font-size: 32px !important; }
.homepage article h3 { padding-top: 12px !important; font-size: 23px !important; }
.homepage article .not-prose > div { background: var(--soft) !important; border: 0 !important; border-radius: 10px !important; }
.homepage #faq { margin-top: 80px !important; padding: 80px 0 0 !important; background: var(--page) !important; border-top: 1px solid var(--line) !important; }
.homepage #faq .space-y-6 > div { background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--line) !important; border-radius: 0 !important; padding: 25px 0 !important; margin: 0 !important; box-shadow: none !important; }
.homepage #faq h4 { font-size: 16px !important; }
.homepage #faq h4 span { background: var(--tint) !important; color: var(--accent) !important; border-radius: 7px !important; flex-shrink: 0 !important; }
.homepage #faq .pl-11 { font-size: 14px !important; color: var(--muted) !important; font-weight: 400 !important; }
.homepage > footer { background: var(--page) !important; color: var(--ink) !important; border-top: 1px solid var(--line) !important; padding-top: 64px !important; }
.homepage footer .text-white { color: var(--ink) !important; }
.homepage footer > div > .neo-border { padding: 44px !important; background: var(--tint) !important; border: 0 !important; border-radius: 16px !important; margin-bottom: 64px !important; }
.homepage footer .neo-border a { background: var(--accent) !important; color: var(--surface) !important; border: 0 !important; border-radius: 8px !important; font-size: 13px !important; padding: 16px 24px !important; }
.homepage footer h3 { font-size: 30px !important; }
.homepage footer h4 { font-size: 12px !important; }
.homepage footer li a { font-size: 13px !important; font-weight: 500 !important; }
.homepage footer a:hover { color: var(--accent) !important; }
.homepage footer .neo-border a:hover { color: var(--surface) !important; opacity: .9 !important; }
.homepage footer .border-t { border-color: var(--line) !important; }
.homepage footer .animate-pulse { animation: none !important; color: var(--accent) !important; }
.homepage footer img { filter: brightness(0) !important; }
.dark .homepage footer img { filter: none !important; }
@media (max-width: 1023px) {
    .homepage header .order-1 { border-right: 0 !important; }
    .homepage header .order-2:has(#humanizeBtn) { border-bottom: 1px solid var(--line) !important; }
    .homepage #inputText, .homepage #outputText { height: 230px !important; }
    .homepage > nav .space-x-8 { gap: 18px !important; }
    .homepage > nav .space-x-8 > * { margin-left: 0 !important; }
}
@media (max-width: 767px) {
    .homepage > nav .h-16 { height: 68px !important; }
    .homepage > nav .text-2xl { font-size: 16px !important; }
    .homepage > nav img { height: 26px !important; }
    .homepage > nav .gap-4 { gap: 4px !important; }
    .homepage > header { padding: 108px 16px 36px !important; }
    .homepage > header > div > .text-center { padding: 0 !important; }
    .homepage h1 { font-size: clamp(2.1rem, 7vw, 3rem) !important; }
    .homepage h1 + p { font-size: 14px !important; line-height: 1.8 !important; }
    .homepage h1 ~ .flex { gap: 15px !important; }
    .homepage h1 ~ .flex .text-xs { font-size: 10px !important; }
    .homepage > section { padding: 60px 0 !important; }
    .homepage > section .gap-16 { gap: 40px !important; }
    .homepage #features > div > .grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
    .homepage #features > div > .grid > div { padding: 24px !important; border: 0 !important; border-bottom: 1px solid var(--line) !important; }
    .homepage #features > div > .grid > div:nth-child(odd) { border-right: 1px solid var(--line) !important; }
    .homepage #features > div > .grid > div:nth-last-child(-n+2) { border-bottom: 0 !important; }
    .homepage footer > div > .neo-border { padding: 32px 24px !important; }
    .homepage footer .gap-12 { gap: 32px !important; }
    .homepage article h2 { font-size: 27px !important; }
}
@media (max-width: 480px) {
    .homepage #humanizeBtn { width: 100% !important; }
    .homepage #features > div > .grid { grid-template-columns: 1fr !important; }
    .homepage #features > div > .grid > div { border-right: 0 !important; border-bottom: 1px solid var(--line) !important; }
    .homepage #features > div > .grid > div:nth-child(odd) { border-right: 0 !important; }
    .homepage #features > div > .grid > div:nth-last-child(2) { border-bottom: 1px solid var(--line) !important; }
    .homepage #features > div > .grid > div:last-child { border-bottom: 0 !important; }
    .homepage > section .grid-cols-2 > .neo-border { padding: 20px 14px !important; }
    .homepage > section .-right-6 { right: 8px !important; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto !important; }
    .homepage *, .homepage *::before, .homepage *::after { animation: none !important; transition: none !important; }
}

/* Keep the complete writing action within a typical laptop viewport. */
@media (min-width: 1024px) {
    .homepage > header { padding-top: 112px !important; }
    .homepage h1 { font-size: clamp(2.8rem, 4.2vw, 3.5rem) !important; margin-bottom: 16px !important; }
    .homepage h1 + p { margin-top: 16px !important; line-height: 1.7 !important; }
    .homepage h1 ~ .flex { margin-top: 18px !important; }
    .homepage > header > .relative > .text-center { margin-bottom: 26px !important; }
    .homepage #inputText, .homepage #outputText { height: 200px !important; }
}
/* Editor refinements: readable labels, stable text metrics and deliberate focus states. */
.homepage header .order-1 > .flex,
.homepage header .order-3 > .flex {
    padding: 12px 24px !important;
    background: var(--surface) !important;
}
.homepage header .order-1 > .flex .text-xs,
.homepage header .order-3 > .flex .text-xs {
    font-size: 13px !important;
    letter-spacing: -.01em !important;
}
.homepage :is(#clearInputBtn, #copyOutputBtn, #downloadOutputBtn) {
    min-height: 34px !important;
    min-width: 44px !important;
    font-size: 12px !important;
    border: 1px solid var(--line) !important;
    border-radius: 7px !important;
    color: var(--ink) !important;
}
.homepage #clearInputBtn { border-color: transparent !important; color: var(--muted) !important; }
.homepage #inputText,
.homepage #outputText {
    display: block !important;
    font-size: 16px !important;
    line-height: 1.75 !important;
    letter-spacing: .005em !important;
    caret-color: var(--accent) !important;
    scrollbar-gutter: stable;
}
.homepage #inputText:focus-visible,
.homepage #outputText:focus-visible { outline: none !important; }
.homepage header .relative:has(> textarea) {
    transition: box-shadow .18s ease !important;
}
.homepage header .relative:focus-within:has(> textarea) {
    box-shadow: inset 0 0 0 1px var(--accent) !important;
}
.homepage header .relative:has(> #inputText) > .absolute {
    padding: 10px 22px !important;
    background: var(--surface) !important;
    bottom: 1px !important;
    left: 1px !important;
    right: 1px !important;
}
.homepage #wordCountLabel { padding: 2px 0 !important; font-size: 11px !important; }
.homepage header .order-2:has(#humanizeBtn) { padding: 12px 24px !important; }
.dark .homepage header .neo-border:has(#inputText) {
    box-shadow: 0 16px 48px -24px #00000080, 0 1px 0 #ffffff05 inset !important;
}
.dark .homepage #humanizeBtn,
.dark .homepage #humanizeBtn:hover { box-shadow: 0 3px 10px #00000025 !important; }
@media (max-width: 480px) {
    .homepage header .order-1 > .flex,
    .homepage header .order-3 > .flex { padding: 10px 18px !important; }
    .homepage #inputText,
    .homepage #outputText { padding-left: 20px !important; padding-right: 20px !important; }
}