.public-site {
    background: var(--ivory);
}

.public-site main {
    overflow: hidden;
}

/* Pricing and subscription */
.pricing-section {
    isolation: isolate;
    position: relative;
    margin-block: clamp(38px, 6vw, 82px);
    padding: clamp(70px, 8vw, 112px) clamp(22px, 5vw, 72px);
    overflow: hidden;
    background:
        radial-gradient(circle at 4% 2%, rgb(120 199 195 / .24), transparent 26%),
        radial-gradient(circle at 96% 12%, rgb(239 209 139 / .22), transparent 24%),
        linear-gradient(145deg, #f0f5ef 0%, #faf7f0 52%, #f4eee4 100%);
    border: 1px solid color-mix(in srgb, var(--brand-border) 55%, var(--line));
    border-radius: 34px;
    box-shadow:
        0 32px 85px rgb(var(--text-primary-rgb) / .09),
        inset 0 1px rgb(255 255 255 / .82);
}

.pricing-section::before,
.pricing-section::after {
    content: "";
    position: absolute;
    z-index: -1;
    border: 1px solid rgb(var(--brand-primary-rgb) / .08);
    border-radius: 50%;
    pointer-events: none;
}

.pricing-section::before {
    top: -245px;
    right: -190px;
    width: 520px;
    height: 520px;
}

.pricing-section::after {
    bottom: -310px;
    left: -210px;
    width: 610px;
    height: 610px;
}

.pricing-heading {
    position: relative;
    max-width: 900px;
    margin-inline: auto;
    text-align: center;
}

.pricing-heading .public-eyebrow {
    width: fit-content;
    margin-inline: auto;
    padding: 8px 13px;
    background: rgb(255 255 255 / .68);
    border: 1px solid rgb(var(--brand-primary-rgb) / .12);
    border-radius: 999px;
    box-shadow: 0 8px 22px rgb(var(--brand-primary-rgb) / .07);
}

.pricing-heading h2 {
    max-width: 820px;
    margin: 20px auto 18px;
}

.pricing-heading > p:last-child {
    max-width: 740px;
    margin-inline: auto;
}

.pricing-cards {
    position: relative;
    max-width: 1080px;
    margin: 58px auto 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 26px;
}

.pricing-card {
    position: relative;
    padding: clamp(30px, 4vw, 47px);
    display: flex;
    flex-direction: column;
    background: var(--paper);
    border: 1px solid rgb(var(--text-primary-rgb) / .11);
    border-radius: 24px;
    box-shadow:
        0 22px 55px rgb(var(--text-primary-rgb) / .09),
        inset 0 1px rgb(255 255 255 / .9);
    transition: transform .22s ease, box-shadow .22s ease;
}

.pricing-card::before {
    content: "";
    position: absolute;
    top: 0;
    right: 34px;
    left: 34px;
    height: 4px;
    background: linear-gradient(90deg, transparent, var(--brand-highlight), transparent);
    border-radius: 0 0 999px 999px;
}

.pricing-card:hover {
    transform: translateY(-4px);
    box-shadow:
        0 30px 70px rgb(var(--text-primary-rgb) / .13),
        inset 0 1px rgb(255 255 255 / .9);
}

.pricing-card.pricing-studio {
    color: #fffdf8;
    background:
        radial-gradient(circle at 92% 4%, rgb(120 199 195 / .25), transparent 31%),
        radial-gradient(circle at 8% 100%, rgb(239 209 139 / .09), transparent 30%),
        linear-gradient(145deg, #0b5145, #073b34 58%, #052e29 100%);
    border-color: rgb(239 209 139 / .45);
    box-shadow:
        0 32px 75px rgb(4 45 38 / .28),
        inset 0 1px rgb(255 255 255 / .14);
}

.pricing-card.pricing-studio::before {
    background: linear-gradient(90deg, transparent, #efd18b, transparent);
}

.pricing-card.pricing-studio:hover {
    box-shadow:
        0 40px 88px rgb(4 45 38 / .34),
        inset 0 1px rgb(255 255 255 / .14);
}

.pricing-popular {
    position: absolute;
    top: 20px;
    right: 20px;
    padding: 8px 12px;
    color: #173a33;
    background: linear-gradient(135deg, #ffe5a6, #e8c777);
    border: 1px solid rgb(255 255 255 / .36);
    border-radius: 999px;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .12em;
    box-shadow: 0 10px 25px rgb(0 0 0 / .18);
}

.pricing-card header > span,
.billing-eyebrow,
.billing-actions article > div > span,
.billing-plan-choice article > span {
    color: var(--brand-primary);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .18em;
}

.pricing-studio header > span { color: #a9d2c9; }
.pricing-card header { position: relative; }
.pricing-card h3 { margin: 11px 0 23px; font: 500 clamp(30px, 3vw, 38px)/1.08 Georgia, serif; letter-spacing: -.02em; }
.pricing-card header p { margin: 0; display: flex; align-items: baseline; gap: 8px; }
.pricing-card header p strong { font: 600 clamp(48px, 5vw, 60px)/1 Georgia, serif; letter-spacing: -.04em; }
.pricing-card header p small { color: var(--muted); font-size: var(--font-size-control); }
.pricing-studio header p small { color: #b9d6d0; }
.pricing-card header em { display: block; margin-top: 11px; color: var(--muted); font-size: var(--font-size-small); font-style: normal; }
.pricing-studio header em { color: #efd18b; }

.pricing-card ul { margin: 32px 0 34px; padding: 29px 0 0; display: grid; gap: 20px; border-top: 1px solid var(--line); list-style: none; }
.pricing-studio ul { border-top-color: rgb(255 255 255 / .14); }
.pricing-card li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; }
.pricing-card li > svg { width: 27px; height: 27px; padding: 6px; margin-top: 0; color: var(--brand-primary); background: var(--brand-soft); border: 1px solid var(--brand-border); border-radius: 50%; }
.pricing-studio li > svg { color: #efd18b; }
.pricing-studio li > svg { background: rgb(255 255 255 / .08); border-color: rgb(255 255 255 / .14); }
.pricing-card li span { display: flex; flex-direction: column; gap: 4px; }
.pricing-card li b { font-size: var(--font-size-control); line-height: 1.35; }
.pricing-card li small { color: var(--muted); font: var(--font-size-small)/1.55 Georgia, serif; }
.pricing-studio li small { color: #b9d6d0; }

.pricing-button,
.billing-actions button,
.upgrade-card button,
.upgrade-primary-link {
    min-height: 54px;
    padding: 0 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 11px;
    font-size: var(--font-size-control);
    font-weight: 850;
    text-decoration: none;
    cursor: pointer;
    transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.pricing-button { margin-top: auto; }
.pricing-button.secondary { color: var(--brand-on-primary); background: var(--brand-primary); border: 1px solid var(--brand-primary); box-shadow: 0 12px 28px rgb(var(--brand-primary-rgb) / .18); }
.pricing-button.primary, .upgrade-primary-link { color: #173a33; background: linear-gradient(135deg, #ffe4a1, #e7c570); box-shadow: 0 14px 32px rgb(0 0 0 / .24); }
.pricing-button:hover, .billing-actions button:hover, .upgrade-card button:hover, .upgrade-primary-link:hover { transform: translateY(-1px); }
.pricing-button.secondary:hover { color: var(--brand-on-primary); background: var(--brand-primary-hover); }
.pricing-button:focus-visible { outline: 3px solid rgb(120 199 195 / .48); outline-offset: 3px; }
.pricing-assurance { margin-top: 15px; color: #b7d6d0; text-align: center; font-size: var(--font-size-meta); line-height: 1.5; }

.pricing-comparison {
    position: relative;
    max-width: 1080px;
    margin: 34px auto 0;
    overflow: hidden;
    background: rgb(255 253 249 / .92);
    border: 1px solid rgb(var(--text-primary-rgb) / .11);
    border-radius: 20px;
    box-shadow: 0 20px 50px rgb(var(--text-primary-rgb) / .08);
}

.pricing-comparison > header,
.pricing-comparison > div {
    padding: 17px 24px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 130px 150px;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
}
.pricing-comparison > header { padding-block: 23px; background: linear-gradient(100deg, #f3eee5, #edf5f1); }
.pricing-comparison > header div:first-child span { color: var(--brand-primary); font-size: 9px; font-weight: 900; letter-spacing: .15em; }
.pricing-comparison > header h3 { margin: 4px 0 0; font: 500 22px Georgia, serif; }
.pricing-comparison > header div:last-child { display: contents; }
.pricing-comparison > header b { width: fit-content; min-width: 72px; margin-inline: auto; padding: 7px 10px; text-align: center; background: rgb(255 255 255 / .72); border: 1px solid var(--line); border-radius: 999px; font-size: var(--font-size-small); }
.pricing-comparison > header b:last-child { color: #fff; background: var(--brand-primary); border-color: var(--brand-primary); }
.pricing-comparison > div b { text-align: center; font-size: var(--font-size-small); }
.pricing-comparison > div > span { font: var(--font-size-control)/1.45 Georgia, serif; }
.pricing-comparison > div:nth-child(odd) { background: rgb(var(--brand-primary-rgb) / .022); }
.pricing-comparison > div > b:last-child:not(.not-included) { color: var(--brand-primary); }
.pricing-comparison > div:last-child { border-bottom: 0; }
.pricing-comparison .not-included { color: #aaa29a; font-size: 18px; font-weight: 400; }
.pricing-small-print { max-width: 850px; margin: 25px auto 0; padding: 13px 18px; color: var(--muted); background: rgb(255 255 255 / .48); border: 1px solid rgb(var(--text-primary-rgb) / .07); border-radius: 10px; font-size: var(--font-size-meta); line-height: 1.65; text-align: center; }

.billing-public-page { padding-top: 30px; }
.billing-account-page { min-height: 100vh; padding-bottom: 80px; background: var(--ivory); }
.billing-account-page .pricing-section { padding-top: 75px; }
.billing-feedback {
    width: 100%;
    padding: 22px 0;
    background: color-mix(in srgb, var(--brand-soft) 58%, var(--ivory));
    border-bottom: 1px solid var(--brand-border);
    scroll-margin-top: 90px;
}
.billing-feedback .billing-message { margin-top: 0; }
.billing-hero {
    padding: clamp(48px, 7vw, 86px) max(24px, calc((100% - 1280px) / 2));
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    align-items: center;
    gap: 55px;
    color: #fffdf8;
    background:
        radial-gradient(circle at 75% 0, rgb(109 198 185 / .22), transparent 34%),
        linear-gradient(135deg, #0b4b40, #062f2a);
}
.billing-hero h1 { margin: 10px 0 15px; font: 500 clamp(40px, 5vw, 65px)/1.03 Georgia, serif; }
.billing-hero p { max-width: 690px; margin: 0; color: #bdd8d2; font: 16px/1.65 Georgia, serif; }
.billing-eyebrow { color: #efd18b; }
.billing-status-card { padding: 24px; display: flex; flex-direction: column; gap: 7px; background: rgb(255 255 255 / .09); border: 1px solid rgb(255 255 255 / .16); border-radius: 15px; backdrop-filter: blur(10px); }
.billing-status-card > span { color: #a9d2c9; font-size: 9px; font-weight: 900; letter-spacing: .15em; }
.billing-status-card > strong { font: 600 27px Georgia, serif; }
.billing-status-card > small { color: #c3dcd7; font-size: 11px; line-height: 1.5; }
.billing-status-card.is-studio { box-shadow: inset 3px 0 #efd18b; }
.billing-message { width: min(1180px, calc(100% - 48px)); margin: 24px auto 0; padding: 14px 18px; background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--brand-primary); border-radius: 7px; }
.billing-message.error { border-left-color: #a74a4a; }
.billing-actions { width: min(1180px, calc(100% - 48px)); margin: 34px auto 0; }
.billing-manage-card, .billing-trial-card { padding: 30px; display: flex; align-items: center; justify-content: space-between; gap: 35px; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 18px 50px rgb(var(--text-primary-rgb) / .07); }
.billing-actions h2 { margin: 7px 0 8px; font: 500 27px Georgia, serif; }
.billing-actions p { max-width: 700px; margin: 0; color: var(--muted); font: 13px/1.6 Georgia, serif; }
.billing-actions button { color: #fff; background: var(--brand-primary); white-space: nowrap; }
.billing-actions button svg { width: 15px; height: 15px; margin-left: 10px; }
.billing-plan-choice { margin-top: 22px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.billing-plan-choice article { position: relative; padding: 30px; background: #fff; border: 1px solid var(--line); border-radius: 16px; }
.billing-plan-choice article.recommended { border-color: #bda158; box-shadow: inset 0 3px #d5b765; }
.billing-plan-choice article > b { position: absolute; top: 18px; right: 18px; color: #7d6629; font-size: 9px; letter-spacing: .12em; }
.billing-plan-choice h2 small { color: var(--muted); font: 12px sans-serif; }
.billing-plan-choice form { margin-top: 22px; }
.billing-plan-choice button { width: 100%; }
.billing-actions button:disabled, .upgrade-card button:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.billing-actions button[aria-busy="true"] { opacity: .76; cursor: wait; pointer-events: none; }
.billing-setup-note { margin: 16px 0 0 !important; padding: 13px 15px; color: #6d5929 !important; background: #fff8e5; border: 1px solid #e7d7a9; border-radius: 7px; }

.billing-upgrade-page { min-height: calc(100vh - 76px); padding: 70px 24px; display: grid; place-items: center; background: radial-gradient(circle at 50% 0, #dcece7, var(--ivory) 55%); }
.upgrade-card { width: min(660px, 100%); padding: clamp(35px, 6vw, 62px); text-align: center; background: #fff; border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 30px 80px rgb(var(--text-primary-rgb) / .14); }
.upgrade-icon { width: 62px; height: 62px; margin: 0 auto 22px; display: grid; place-items: center; color: #173a33; background: #efd18b; border-radius: 50%; box-shadow: 0 13px 35px rgb(143 113 43 / .22); }
.upgrade-icon svg { width: 27px; height: 27px; }
.upgrade-card h1 { margin: 12px 0 18px; font: 500 clamp(37px, 6vw, 55px)/1.04 Georgia, serif; }
.upgrade-card > p:not(.billing-eyebrow) { color: var(--muted); font: 15px/1.7 Georgia, serif; }
.upgrade-card > form { margin: 28px 0 18px; display: flex; flex-direction: column; gap: 10px; }
.upgrade-card button { color: #fff; background: var(--brand-primary); }
.upgrade-card form small { color: var(--muted); font-size: 11px; }
.upgrade-card > a:not(.upgrade-primary-link) { color: var(--brand-primary); font-size: 12px; font-weight: 800; }
.upgrade-plan-buttons { margin: 28px 0 18px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.upgrade-plan-buttons button { width: 100%; }
.upgrade-primary-link { margin: 20px auto 14px; display: flex; width: fit-content; }
.upgrade-card.success > a:last-child { display: block; }

.free-book-page { min-height: 100vh; padding: clamp(52px, 7vw, 88px) max(24px, calc((100% - 1180px) / 2)) 80px; background: radial-gradient(circle at 90% 0, #dcece7, transparent 34%), var(--ivory); }
.free-book-heading { max-width: 820px; }
.free-book-heading > span { color: #8a6d28; font-size: 10px; font-weight: 900; letter-spacing: .18em; }
.free-book-heading h1 { margin: 12px 0 18px; color: var(--text-primary); font: 500 clamp(39px, 5vw, 64px)/1.04 Georgia, serif; }
.free-book-heading p { max-width: 760px; margin: 0; color: var(--muted); font: 16px/1.7 Georgia, serif; }
.free-book-notice { margin: 34px 0 24px; padding: 18px 22px; display: flex; align-items: center; gap: 16px; color: #173a33; background: #fff9e9; border: 1px solid #e2d19e; border-radius: 14px; }
.free-book-notice svg { width: 24px; height: 24px; flex: 0 0 auto; color: #8a6d28; }
.free-book-notice strong { font: 600 17px Georgia, serif; }
.free-book-notice p { margin: 4px 0 0; color: #6e633f; font-size: 12px; line-height: 1.55; }
.free-book-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.free-book-card { min-width: 0; padding: 22px; display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 20px; background: #fff; border: 1px solid var(--line); border-radius: 17px; box-shadow: 0 15px 45px rgb(var(--text-primary-rgb) / .07); }
.free-book-cover { width: 92px; aspect-ratio: 2 / 3; display: grid; place-items: center; overflow: hidden; color: #fff; background: linear-gradient(145deg, #0b4b40, #1c7465); border-radius: 7px; box-shadow: 0 10px 22px rgb(var(--text-primary-rgb) / .17); }
.free-book-cover img { width: 100%; height: 100%; object-fit: cover; }
.free-book-cover span { font: 500 34px Georgia, serif; }
.free-book-card-copy { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.free-book-card-copy > span { color: #8a6d28; font-size: 9px; font-weight: 900; letter-spacing: .13em; }
.free-book-card h2 { max-width: 100%; margin: 8px 0; overflow-wrap: anywhere; font: 500 25px/1.16 Georgia, serif; }
.free-book-card p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.free-book-card form { width: 100%; margin-top: auto; padding-top: 18px; }
.free-book-card button { width: 100%; color: #fff; background: var(--brand-primary); }
.free-book-upgrade { margin: 26px 0 0; color: var(--muted); text-align: center; font-size: 13px; }
.free-book-upgrade a { color: var(--brand-primary); font-weight: 800; }
.locked-book-page { display: grid; place-content: center; }
.locked-book-page .free-book-heading { text-align: center; }
.locked-book-page .free-book-heading p { margin-inline: auto; }
.locked-book-actions { width: min(620px, 100%); margin: 34px auto 0; padding: 26px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 11px; background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 22px 65px rgb(var(--text-primary-rgb) / .1); }
.locked-book-actions a { min-height: 44px; padding: 12px 16px; display: grid; place-items: center; color: var(--brand-primary); background: #f4f8f6; border: 1px solid var(--brand-border); border-radius: 7px; font-size: 12px; font-weight: 800; text-align: center; }
.locked-book-actions .locked-book-primary { color: #fff; background: var(--brand-primary); border-color: var(--brand-primary); }

@media (max-width: 760px) {
    .free-book-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    .free-book-page { padding-inline: 15px; }
    .free-book-card { grid-template-columns: 74px minmax(0, 1fr); padding: 17px; gap: 15px; }
    .free-book-cover { width: 74px; }
    .locked-book-actions { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
    .pricing-cards, .billing-plan-choice, .billing-hero { grid-template-columns: 1fr; }
    .pricing-section { padding-inline: 18px; border-radius: 24px; }
    .pricing-card:hover { transform: none; }
    .pricing-popular { position: static; width: fit-content; margin-bottom: 18px; display: block; }
    .pricing-comparison > header, .pricing-comparison > div { grid-template-columns: minmax(0, 1fr) 68px 78px; padding-inline: 14px; }
    .pricing-comparison > header b { min-width: 0; padding-inline: 8px; }
    .pricing-comparison > header h3 { font-size: 17px; }
    .pricing-comparison > div > span { font-size: var(--font-size-small); }
    .pricing-comparison > header b, .pricing-comparison > div b { font-size: var(--font-size-meta); }
    .billing-hero { gap: 28px; }
    .billing-manage-card, .billing-trial-card { align-items: stretch; flex-direction: column; }
    .billing-actions form, .billing-actions button { width: 100%; }
    .upgrade-plan-buttons { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    .pricing-section { width: calc(100% - 20px); padding: 62px 12px; }
    .pricing-heading { padding-inline: 8px; }
    .pricing-heading h2 { font-size: 36px; }
    .pricing-cards { margin-top: 40px; }
    .pricing-card { padding: 28px 22px; border-radius: 20px; }
    .pricing-card header p strong { font-size: 49px; }
    .pricing-comparison > header,
    .pricing-comparison > div { grid-template-columns: minmax(0, 1fr) 60px 70px; gap: 6px; padding: 14px 10px; }
    .pricing-comparison > header h3 { font-size: 15px; }
    .pricing-comparison > header b,
    .pricing-comparison > div b { font-size: 9px; }
    .pricing-comparison > div > span { font-size: 11px; }
    .pricing-small-print { margin-inline: 5px; padding-inline: 12px; }
}

#features,
#writing-types,
#mobile,
#pricing {
    scroll-margin-top: 92px;
}

.public-header {
    position: sticky;
    top: 0;
    z-index: 100;
    height: 76px;
    background: rgba(255, 253, 250, .94);
    border-bottom: 1px solid var(--line);
    backdrop-filter: blur(14px);
}

.public-header-inner {
    width: min(1440px, calc(100% - 48px));
    height: 100%;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.public-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--ink);
    text-decoration: none;
}

.public-brand img {
    width: 42px;
    height: 42px;
    object-fit: contain;
}

.public-brand > span {
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1;
}

.public-brand strong {
    font: 750 22px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    letter-spacing: -.035em;
}

.public-brand small {
    color: var(--wine);
    font-size: var(--font-size-caption);
    font-weight: 800;
    letter-spacing: .24em;
}

.public-navigation,
.public-account-links {
    display: flex;
    align-items: center;
    gap: 7px;
}

.public-navigation > a,
.public-account-links > a,
.public-account-links button {
    min-height: 40px;
    padding: 0 13px;
    display: inline-flex;
    align-items: center;
    color: var(--muted);
    background: transparent;
    border: 0;
    border-radius: 5px;
    font-size: var(--font-size-small);
    font-weight: 700;
    text-decoration: none;
}

.public-navigation a:hover,
.public-account-links button:hover {
    color: var(--wine);
    background: var(--parchment);
}

.public-account-links {
    margin-left: 14px;
    padding-left: 14px;
    border-left: 1px solid var(--line);
}

.public-account-links form {
    margin: 0;
}

.public-account-links .public-register-link,
.public-account-links form button {
    padding-inline: 18px;
    color: var(--brand-on-primary);
    background: var(--wine);
}

.public-account-links .public-register-link:hover,
.public-account-links form button:hover {
    color: var(--brand-on-primary);
    background: var(--brand-primary-hover);
}

.public-menu-button {
    display: none;
}

.public-hero {
    position: relative;
    width: min(1440px, calc(100% - 48px));
    min-height: calc(100dvh - 76px);
    margin: auto;
    padding: clamp(70px, 9vw, 130px) 0 95px;
    display: grid;
    grid-template-columns: minmax(420px, .86fr) minmax(610px, 1.14fr);
    align-items: center;
    gap: clamp(45px, 6vw, 95px);
}

.public-hero::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -150px;
    left: -280px;
    width: 650px;
    height: 650px;
    background: radial-gradient(circle, var(--brand-soft-hover), transparent 68%);
}

.public-eyebrow {
    margin: 0;
    color: var(--wine);
    font-size: var(--font-size-meta);
    font-weight: 800;
    letter-spacing: .18em;
}

.public-hero h1 {
    max-width: 720px;
    margin: 19px 0 25px;
    font: 500 clamp(49px, 5.2vw, 79px)/1.01 Georgia, serif;
    letter-spacing: -.035em;
}

.public-hero h1 em {
    color: var(--wine);
    font-weight: inherit;
}

.public-hero-intro {
    max-width: 610px;
    margin: 0;
    color: var(--muted);
    font: 18px/1.65 Georgia, serif;
}

.public-hero-actions {
    margin-top: 31px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.public-primary-button,
.public-secondary-button {
    min-height: 49px;
    padding: 0 21px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    border-radius: 5px;
    font-size: var(--font-size-small);
    font-weight: 800;
    text-decoration: none;
}

.public-primary-button {
    color: var(--brand-on-primary);
    background: var(--wine);
    box-shadow: 0 10px 28px rgb(var(--brand-primary-rgb) / .2);
}

.public-primary-button:hover {
    background: var(--brand-primary-hover);
    transform: translateY(-1px);
}

.public-secondary-button {
    color: var(--ink);
    background: var(--paper);
    border: 1px solid var(--line);
}

.public-hero-note {
    margin: 17px 0 0;
    color: var(--muted);
    font-size: var(--font-size-meta);
}

.public-product-preview {
    overflow: hidden;
    background: var(--paper);
    border: 1px solid #d4cbc0;
    border-radius: 11px;
    box-shadow: 0 32px 75px rgba(61, 43, 35, .16);
    transform: rotate(.4deg);
}

.preview-window-bar {
    height: 42px;
    padding: 0 14px;
    display: flex;
    align-items: center;
    gap: 6px;
    background: #f1ece4;
    border-bottom: 1px solid var(--line);
}

.preview-window-bar > span {
    width: 8px;
    height: 8px;
    background: #cfc4b7;
    border-radius: 50%;
}

.preview-window-bar strong {
    margin-left: auto;
    color: var(--muted);
    font: 12px Georgia, serif;
}

.preview-workspace {
    height: 465px;
    display: grid;
    grid-template-columns: 48px 150px 1fr 143px;
}

.preview-rail {
    padding: 12px 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 17px;
    border-right: 1px solid var(--line);
}

.preview-rail img {
    width: 32px;
    margin-bottom: 8px;
}

.preview-rail i {
    width: 31px;
    height: 31px;
    display: grid;
    place-items: center;
    color: var(--muted);
    border-radius: 4px;
    font-style: normal;
}

.preview-rail i.active {
    color: var(--wine);
    background: var(--pale);
}

.preview-outline {
    padding: 18px 10px;
    border-right: 1px solid var(--line);
}

.preview-outline > small,
.preview-editor > small,
.preview-details > small {
    color: var(--wine);
    font-size: var(--font-size-caption);
    font-weight: 800;
    letter-spacing: .12em;
}

.preview-outline h2 {
    margin: 5px 4px 22px;
    font: 500 14px Georgia, serif;
}

.preview-outline > div {
    min-height: 54px;
    padding: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 4px;
}

.preview-outline > div.selected {
    color: var(--wine);
    background: var(--pale);
}

.preview-outline b {
    font: 12px Georgia, serif;
}

.preview-outline div span {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.preview-outline div strong {
    overflow: hidden;
    font: 12px Georgia, serif;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preview-outline div small {
    color: var(--muted);
    font-size: var(--font-size-caption);
}

.preview-editor {
    padding: 0 31px 32px;
    background: #fffefa;
}

.preview-toolbar {
    height: 43px;
    margin: 0 -31px 38px;
    padding: 0 15px;
    display: flex;
    align-items: center;
    gap: 17px;
    border-bottom: 1px solid var(--line);
    color: var(--muted);
    font: 12px Georgia, serif;
}

.preview-editor h2 {
    margin: 7px 0 23px;
    font: 500 25px Georgia, serif;
}

.preview-editor p,
.preview-editor blockquote {
    color: #403a35;
    font: 12px/1.75 Georgia, serif;
}

.preview-editor blockquote {
    margin: 20px 0;
    padding-left: 13px;
    color: var(--muted);
    border-left: 2px solid var(--wine);
    font-style: italic;
}

.preview-details {
    padding: 18px 13px;
    border-left: 1px solid var(--line);
    background: #fdfbf7;
}

.preview-details label {
    margin-top: 17px;
    padding-bottom: 12px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    color: var(--muted);
    border-bottom: 1px solid var(--border-soft);
    font-size: var(--font-size-caption);
    text-transform: uppercase;
}

.preview-details strong {
    color: var(--ink);
    font: 12px/1.4 Georgia, serif;
    text-transform: none;
}

.public-trust-strip {
    min-height: 70px;
    padding: 18px 5vw;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(30px, 7vw, 110px);
    color: #665f58;
    background: var(--paper);
    border-block: 1px solid var(--line);
    font-size: var(--font-size-small);
    font-weight: 700;
}

.public-trust-strip span { display: inline-flex; align-items: center; gap: 7px; }
.public-trust-strip .app-icon { width: 15px; height: 15px; flex: 0 0 15px; color: var(--wine); }

.public-section {
    width: min(1260px, calc(100% - 48px));
    margin: auto;
    padding: clamp(90px, 10vw, 145px) 0;
}

.public-section-heading {
    max-width: 760px;
    margin-bottom: 48px;
}

.public-section-heading h2,
.public-mobile-copy h2,
.public-final-cta h2,
.public-simple-hero h1 {
    margin: 13px 0 17px;
    font: 500 clamp(40px, 4.4vw, 62px)/1.08 Georgia, serif;
    letter-spacing: -.025em;
}

.public-section-heading > p:last-child,
.public-mobile-copy > p,
.public-final-cta > p:not(.public-eyebrow),
.public-simple-hero > p:last-child {
    margin: 0;
    color: var(--muted);
    font: 16px/1.65 Georgia, serif;
}

.public-feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.public-writing-types { padding-top: 72px; }
.public-writing-type-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.public-writing-type-grid.compact { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.public-writing-type-card { min-height: 190px; padding: 22px; display: flex; align-items: flex-start; flex-direction: column; gap: 8px; color: var(--text-primary); background: var(--paper); border: 1px solid var(--line); border-radius: 12px; text-decoration: none; transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; }
.public-writing-type-card:hover { border-color: var(--brand-border); box-shadow: 0 14px 35px rgb(var(--brand-primary-rgb) / .09); transform: translateY(-2px); }
.public-writing-type-card .app-icon { width: 28px; height: 28px; margin-bottom: 4px; color: var(--brand-primary); }
.public-writing-type-card strong { font: 600 19px/1.25 Georgia, serif; }
.public-writing-type-card > span { color: var(--brand-primary); font-size: var(--font-size-small); font-weight: 800; }
.public-writing-type-card p { margin: 2px 0 0; color: var(--muted); font: 13px/1.55 Georgia, serif; }
.public-writing-type-card em { margin-top: auto; color: var(--brand-primary); font-size: var(--font-size-small); font-style: normal; font-weight: 800; }
.public-writing-type-grid.compact .public-writing-type-card { min-height: 135px; }
.writing-type-hero { display: flex; align-items: center; flex-direction: column; }
.writing-type-icon { width: 72px; height: 72px; margin-bottom: 20px; display: grid; place-items: center; color: var(--brand-primary); background: var(--brand-soft); border: 1px solid var(--brand-border); border-radius: 18px; }
.writing-type-icon .app-icon { width: 38px; height: 38px; }
.writing-type-actions { margin-top: 28px; }
.writing-type-detail { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.writing-type-detail > article { padding: clamp(27px, 4vw, 45px); background: var(--paper); border: 1px solid var(--line); border-radius: 16px; }
.writing-type-detail h2 { margin: 10px 0 16px; font: 500 clamp(29px, 3vw, 42px)/1.12 Georgia, serif; }
.writing-type-detail p { color: var(--muted); font: 15px/1.7 Georgia, serif; }
.writing-type-benefits ul { margin: 25px 0 0; padding: 0; display: grid; gap: 15px; list-style: none; }
.writing-type-benefits li { display: flex; flex-direction: column; gap: 4px; }
.writing-type-benefits li strong { color: var(--brand-primary); }
.writing-type-benefits li span { color: var(--muted); font-size: var(--font-size-small); line-height: 1.55; }
.writing-type-related { padding-top: 45px; }
.writing-type-cta { margin-top: 45px; }

.public-feature-card {
    position: relative;
    min-height: 315px;
    padding: 27px;
    overflow: hidden;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 8px;
}

.public-feature-card.feature-large {
    grid-row: span 2;
    min-height: 644px;
    color: var(--brand-on-primary);
    background: var(--wine);
    border-color: var(--wine);
}

.public-feature-card.feature-wide {
    grid-column: span 2;
}

.public-feature-card.feature-full {
    grid-column: 1 / -1;
    min-height: 260px;
}

.feature-submission-card p { max-width: 720px; }
.feature-submission-card .feature-submission-status { max-width: 390px; }

.feature-number {
    position: absolute;
    top: 19px;
    right: 20px;
    color: #aaa097;
    font: 12px Georgia, serif;
}

.feature-large .feature-number {
    color: #ffffff80;
}

.feature-icon {
    width: 49px;
    height: 49px;
    display: grid;
    place-items: center;
    color: var(--wine);
    background: var(--pale);
    border-radius: 50%;
    font-size: 22px;
}

.feature-icon .app-icon { width: 24px; height: 24px; }

.feature-large .feature-icon {
    color: var(--brand-on-primary);
    background: #ffffff18;
}

.public-feature-card h3 {
    max-width: 340px;
    margin: 24px 0 11px;
    font: 500 24px/1.18 Georgia, serif;
}

.public-feature-card p {
    max-width: 500px;
    margin: 0;
    color: var(--muted);
    font: 13px/1.6 Georgia, serif;
}

.feature-large p {
    color: var(--brand-soft);
}

.feature-paper {
    position: absolute;
    right: 28px;
    bottom: -40px;
    left: 28px;
    height: 315px;
    padding: 51px 39px;
    background: var(--paper);
    border-radius: 7px 7px 0 0;
    box-shadow: 0 -10px 35px rgb(var(--brand-primary-rgb) / .26);
}

.feature-paper i {
    height: 8px;
    margin-bottom: 20px;
    display: block;
    background: #ded7cf;
    border-radius: 5px;
}

.feature-paper i:nth-child(1) { width: 58%; height: 13px; background: #9f9690; }
.feature-paper i:nth-child(3) { width: 84%; }
.feature-paper i:nth-child(4) { width: 73%; }
.feature-paper i:nth-child(5) { width: 90%; }

.knowledge-chips {
    margin-top: 31px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.knowledge-chips span {
    padding: 8px 11px;
    color: var(--wine);
    background: var(--pale);
    border-radius: 16px;
    font-size: var(--font-size-caption);
    font-weight: 800;
    letter-spacing: .1em;
}

.feature-mini-path { position: absolute; right: 27px; bottom: 27px; left: 27px; height: 42px; display: flex; align-items: center; justify-content: space-between; }
.feature-mini-path::before { content: ""; position: absolute; right: 7px; left: 7px; height: 1px; background: var(--line); }
.feature-mini-path i { position: relative; z-index: 1; width: 13px; height: 13px; background: var(--paper); border: 3px solid var(--brand-primary); border-radius: 50%; box-shadow: 0 0 0 5px var(--brand-soft); }

.feature-world-badges, .feature-format-row { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 7px; }
.feature-world-badges span, .feature-format-row span { padding: 6px 9px; color: var(--brand-primary); background: var(--brand-soft); border: 1px solid var(--brand-border); border-radius: 999px; font-size: 9px; font-weight: 850; letter-spacing: .07em; }

.feature-ai-review { background: linear-gradient(135deg, var(--paper), var(--brand-soft)); border-color: var(--brand-border); }
.feature-review-options { margin-top: 25px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.feature-review-options > span { min-width: 0; padding: 13px; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 2px 9px; background: rgb(var(--surface-rgb) / .82); border: 1px solid var(--brand-border); border-radius: 8px; }
.feature-review-options .app-icon { width: 22px; height: 22px; grid-row: span 2; color: var(--brand-primary); }
.feature-review-options b { overflow: hidden; font-size: var(--font-size-small); text-overflow: ellipsis; white-space: nowrap; }
.feature-review-options small { color: var(--muted); font-size: var(--font-size-caption); }

.feature-comparison { margin-top: 25px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.feature-comparison > span { min-height: 58px; padding: 10px; display: flex; flex-direction: column; gap: 7px; background: var(--surface-muted); border: 1px solid var(--line); border-radius: 6px; }
.feature-comparison i { height: 5px; display: block; background: #cfc8c1; border-radius: 5px; }
.feature-comparison i:nth-child(2) { width: 76%; }
.feature-comparison span:first-child i:nth-child(2) { background: #d9a5a5; }
.feature-comparison span:last-child i:nth-child(2) { background: #9fc9b5; }
.feature-comparison b { color: var(--brand-primary); font-size: 17px; }

.feature-format-row span { min-width: 42px; text-align: center; border-radius: 5px; }
.feature-submission-status { margin-top: 27px; padding: 10px 12px; display: grid; grid-template-columns: 9px 1fr auto; align-items: center; gap: 9px; color: var(--brand-primary); background: var(--brand-soft); border: 1px solid var(--brand-border); border-radius: 7px; font-size: var(--font-size-caption); font-weight: 850; letter-spacing: .06em; }
.feature-submission-status i { width: 8px; height: 8px; background: var(--brand-accent); border-radius: 50%; }
.feature-submission-status b { min-width: 23px; min-height: 23px; display: grid; place-items: center; color: var(--brand-on-primary); background: var(--brand-primary); border-radius: 50%; }

.public-mobile-section {
    width: 100%;
    max-width: none;
    padding-inline: max(24px, calc((100% - 1160px) / 2));
    display: grid;
    grid-template-columns: 420px 1fr;
    align-items: center;
    gap: clamp(65px, 10vw, 155px);
    background: #26221f;
}

.public-phone {
    width: 290px;
    margin: auto;
    padding: 13px;
    background: #171513;
    border: 1px solid #605750;
    border-radius: 40px;
    box-shadow: 0 30px 70px #0008;
}

.phone-speaker {
    position: absolute;
}

.phone-screen {
    min-height: 580px;
    padding: 18px;
    overflow: hidden;
    background: var(--ivory);
    border-radius: 29px;
}

.phone-screen > header {
    height: 43px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.phone-screen header img { width: 32px; }
.phone-screen header span { color: var(--wine); font-size: 20px; }
.phone-screen > small { color: var(--muted); font-size: var(--font-size-caption); font-weight: 800; }
.phone-screen h3 { margin: 7px 0 23px; font: 500 26px/1.08 Georgia, serif; }

.phone-screen > button {
    width: 100%;
    min-height: 120px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 13px;
    color: var(--brand-on-primary);
    background: linear-gradient(145deg, var(--brand-primary), var(--brand-secondary));
    border: 0;
    border-radius: 10px;
    text-align: left;
}

.phone-screen button > b {
    width: 39px;
    height: 39px;
    display: grid;
    place-items: center;
    background: #ffffff1b;
    border-radius: 50%;
    font-size: 25px;
}

.phone-screen button > span { display: flex; flex-direction: column; gap: 5px; }
.phone-screen button strong { font: 500 18px Georgia, serif; }
.phone-screen button small { color: var(--brand-soft-hover); font-size: var(--font-size-caption); }
.phone-screen > p { margin: 25px 0 7px; color: var(--muted); font-size: var(--font-size-caption); font-weight: 800; }
.phone-screen article { padding: 13px 4px; display: flex; flex-direction: column; gap: 5px; border-bottom: 1px solid var(--line); }
.phone-screen article small { color: var(--wine); font-size: var(--font-size-caption); font-weight: 800; }
.phone-screen article strong { font: 12px/1.4 Georgia, serif; }

.public-mobile-copy { max-width: 650px; }
.public-mobile-copy .public-eyebrow { color: var(--brand-highlight); }
.public-mobile-copy h2 { color: var(--brand-on-primary); }
.public-mobile-copy > p { color: #aaa19a; }
.public-mobile-copy ul { margin: 38px 0 0; padding: 0; display: flex; flex-direction: column; gap: 22px; list-style: none; }
.public-mobile-copy li { display: flex; align-items: flex-start; gap: 13px; }
.public-mobile-copy li > span { width: 28px; height: 28px; flex: 0 0 28px; display: grid; place-items: center; color: var(--brand-on-primary); background: var(--wine); border-radius: 50%; font-size: var(--font-size-small); }
.public-mobile-copy li div { display: flex; flex-direction: column; gap: 4px; }
.public-mobile-copy li strong { color: var(--brand-on-primary); font: 15px Georgia, serif; }
.public-mobile-copy li small { color: #918982; font-size: var(--font-size-small); }

.public-workflow ol {
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    list-style: none;
    border-block: 1px solid var(--line);
}

.public-workflow li {
    min-height: 220px;
    padding: 29px 22px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-right: 1px solid var(--line);
}

.public-workflow li:last-child { border-right: 0; }
.public-workflow li > span { width: 34px; height: 34px; display: grid; place-items: center; color: var(--wine); background: var(--pale); border-radius: 50%; font: 12px Georgia, serif; }
.public-workflow strong { font: 19px Georgia, serif; }
.public-workflow p { margin: 7px 0 0; color: var(--muted); font: 12px/1.5 Georgia, serif; }

.public-final-cta {
    padding: 110px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #f3ece6;
    text-align: center;
}

.public-final-cta > img { width: 75px; margin-bottom: 24px; }
.public-final-cta > p:not(.public-eyebrow) { max-width: 600px; }
.public-final-cta .public-primary-button { margin-top: 28px; }

.public-footer {
    color: #e8e1da;
    background: #211e1b;
}

.public-footer-inner {
    width: min(1260px, calc(100% - 48px));
    margin: auto;
    padding: 65px 0;
    display: flex;
    justify-content: space-between;
    gap: 70px;
}

.public-footer .public-brand { color: var(--brand-on-primary); }
.public-footer .public-brand img { filter: none; }
.public-footer-brand > p { max-width: 300px; color: #99918a; font: 12px/1.6 Georgia, serif; }
.public-footer nav { display: flex; gap: 100px; }
.public-footer nav > div { display: flex; flex-direction: column; gap: 11px; }
.public-footer nav strong { margin-bottom: 5px; color: var(--brand-on-primary); font-size: var(--font-size-meta); letter-spacing: .12em; }
.public-footer nav a { color: #9f9790; font-size: var(--font-size-small); text-decoration: none; }
.public-footer nav a:hover { color: var(--brand-on-primary); }
.public-footer-bottom { min-height: 55px; padding: 0 max(24px, calc((100% - 1260px) / 2)); display: flex; align-items: center; justify-content: space-between; color: #766f69; border-top: 1px solid #39342f; font-size: var(--font-size-caption); }

.public-simple-hero {
    max-width: 920px;
    margin: auto;
    padding: 120px 24px 80px;
    text-align: center;
}

.public-simple-hero.compact { padding-bottom: 55px; }
.public-simple-hero > p:last-child { max-width: 720px; margin-inline: auto; }

.public-reading-page {
    width: min(1050px, calc(100% - 48px));
    margin: 0 auto 120px;
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 90px;
}

.public-reading-page article { padding: 40px; background: var(--paper); border: 1px solid var(--line); border-radius: 8px; }
.public-reading-page h2, .public-policy-page h2 { margin: 34px 0 11px; font: 500 24px Georgia, serif; }
.public-reading-page h2:first-child { margin-top: 0; }
.public-reading-page p, .public-policy-page p { color: var(--muted); font: 14px/1.75 Georgia, serif; }
.public-reading-page aside { padding-top: 40px; text-align: center; }
.public-reading-page aside img { width: 150px; }
.public-reading-page blockquote { margin: 25px 0; color: var(--wine); font: italic 21px/1.45 Georgia, serif; }

.public-policy-page {
    width: min(850px, calc(100% - 48px));
    margin: 0 auto 120px;
    padding: 40px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 8px;
}

.public-policy-page .policy-updated { margin-top: 0; color: var(--wine); font-size: var(--font-size-small); font-weight: 800; }
.policy-warning { margin-top: 40px; padding: 18px; background: #fff8e7; border: 1px solid #e3d2a6; border-radius: 7px; }
.policy-warning strong { color: #77591e; }
.policy-warning p { margin-bottom: 0; color: #6f6249; font-size: var(--font-size-small); }

.account-deleted-page > img {
    margin-bottom: 24px;
}

.account-deleted-page .public-primary-button {
    margin: 28px auto 0;
}

@media (max-width: 1100px) {
    .public-hero { grid-template-columns: 1fr; text-align: center; }
    .public-hero-copy { max-width: 800px; margin: auto; }
    .public-hero-intro { margin-inline: auto; }
    .public-hero-actions { justify-content: center; }
    .public-product-preview { width: min(900px, 100%); margin: auto; }
    .public-feature-grid { grid-template-columns: 1fr 1fr; }
    .public-feature-card.feature-large { grid-row: span 2; }
    .public-feature-card.feature-wide { grid-column: auto; }
    .public-feature-card.feature-full { grid-column: 1 / -1; }
    .feature-review-options { grid-template-columns: 1fr; }
    .public-writing-type-grid,
    .public-writing-type-grid.compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 850px) {
    .public-header { height: 66px; }
    .public-header-inner { width: calc(100% - 28px); }
    .public-brand img { width: 35px; height: 35px; }
    .public-brand strong { font-size: 18px; }
    .public-menu-button { width: 42px; height: 42px; padding: 10px; display: flex; flex-direction: column; justify-content: center; gap: 5px; background: transparent; border: 0; }
    .public-menu-button span { width: 100%; height: 2px; background: var(--wine); transition: transform .18s ease, opacity .18s ease; }
    .public-menu-button.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .public-menu-button.open span:nth-child(2) { opacity: 0; }
    .public-menu-button.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
    .public-navigation { position: fixed; top: 66px; right: 0; left: 0; padding: 17px; display: none; align-items: stretch; flex-direction: column; background: var(--paper); border-bottom: 1px solid var(--line); box-shadow: 0 18px 40px rgb(var(--text-primary-rgb) / .12); }
    .public-navigation.open { display: flex; }
    .public-navigation > a, .public-account-links > a, .public-account-links button { width: 100%; min-height: 47px; justify-content: flex-start; }
    .public-account-links { margin: 8px 0 0; padding: 13px 0 0; align-items: stretch; flex-direction: column; border-top: 1px solid var(--line); border-left: 0; }
    .public-account-links .public-register-link, .public-account-links form button { justify-content: center; }
    .preview-workspace { grid-template-columns: 48px 150px 1fr; }
    .preview-details { display: none; }
    .public-mobile-section { grid-template-columns: 300px 1fr; gap: 50px; }
    .public-workflow ol { grid-template-columns: repeat(3, 1fr); }
    .public-workflow li:nth-child(3) { border-right: 0; }
    .public-workflow li:nth-child(-n+3) { border-bottom: 1px solid var(--line); }
    .public-reading-page { grid-template-columns: 1fr; gap: 20px; }
    .public-reading-page aside { display: none; }
}

@media (max-width: 650px) {
    .public-hero, .public-section { width: calc(100% - 30px); }
    .public-hero { min-height: auto; padding: 73px 0 70px; }
    .public-hero h1 { font-size: clamp(45px, 13vw, 61px); }
    .public-hero-intro { font-size: 16px; }
    .public-hero-actions { align-items: stretch; flex-direction: column; }
    .public-primary-button, .public-secondary-button { width: 100%; }
    .public-product-preview { margin-top: 30px; }
    .preview-workspace { height: 390px; grid-template-columns: 42px 105px 1fr; }
    .preview-outline { padding-inline: 7px; }
    .preview-outline h2 { font-size: var(--font-size-small); }
    .preview-outline > div { padding: 5px; }
    .preview-editor { padding: 0 20px 25px; }
    .preview-toolbar { margin: 0 -20px 28px; }
    .preview-editor h2 { font-size: 21px; }
    .preview-editor p, .preview-editor blockquote { font-size: var(--font-size-small); }
    .public-trust-strip { align-items: flex-start; flex-direction: column; gap: 12px; }
    .public-section-heading h2, .public-mobile-copy h2, .public-final-cta h2, .public-simple-hero h1 { font-size: 39px; }
    .public-feature-grid { grid-template-columns: 1fr; }
    .public-feature-card, .public-feature-card.feature-large { min-height: 340px; grid-row: auto; }
    .public-feature-card.feature-full { grid-column: auto; }
    .public-feature-card.feature-large { min-height: 590px; }
    .public-writing-type-grid,
    .public-writing-type-grid.compact,
    .writing-type-detail { grid-template-columns: 1fr; }
    .public-writing-type-card,
    .public-writing-type-grid.compact .public-writing-type-card { min-height: 0; }
    .public-mobile-section { padding: 85px 22px; grid-template-columns: 1fr; }
    .public-phone { order: 2; }
    .public-mobile-copy { order: 1; }
    .public-workflow ol { grid-template-columns: 1fr; }
    .public-workflow li { min-height: 135px; border-right: 0; border-bottom: 1px solid var(--line); }
    .public-footer-inner { width: calc(100% - 32px); padding: 50px 0; flex-direction: column; }
    .public-footer nav { gap: 65px; }
    .public-footer-bottom { padding: 16px; align-items: flex-start; flex-direction: column; gap: 7px; }
    .public-simple-hero { padding: 85px 18px 50px; }
    .public-reading-page, .public-policy-page { width: calc(100% - 30px); margin-bottom: 70px; }
    .public-reading-page article, .public-policy-page { padding: 23px; }
}
.public-free-section { padding-top: 30px; padding-bottom: 30px; }
.public-free-card { padding: clamp(28px, 5vw, 58px); display: flex; align-items: center; justify-content: space-between; gap: 40px; background: linear-gradient(135deg, var(--brand-soft), var(--paper)); border: 1px solid var(--brand-border); border-radius: 18px; box-shadow: 0 18px 50px rgb(var(--brand-primary-rgb) / .08); }
.public-free-card > div { max-width: 760px; }
.public-free-card h2 { margin: 8px 0 12px; font: 500 clamp(32px, 4vw, 48px)/1.08 Georgia, serif; }
.public-free-card p { margin: 0 0 12px; color: var(--muted); font: 16px/1.65 Georgia, serif; }
.public-free-card small { color: var(--muted); font-size: var(--font-size-small); line-height: 1.55; }
.public-free-card .public-primary-button { flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 700px) {
    .public-free-card { align-items: stretch; flex-direction: column; }
    .public-free-card .public-primary-button { width: 100%; }
}
.public-offline-section { display: grid; grid-template-columns: minmax(0, 1fr) minmax(380px, .85fr); align-items: center; gap: clamp(45px, 8vw, 120px); }
.public-offline-copy h2 { margin: 16px 0 20px; font: 500 clamp(37px, 4vw, 58px)/1.08 Georgia, serif; letter-spacing: -.025em; }
.public-offline-copy > p:not(.public-eyebrow) { max-width: 650px; color: var(--text-muted); font: 17px/1.7 Georgia, serif; }
.public-offline-copy ul { margin: 25px 0 19px; padding: 0; display: grid; gap: 11px; list-style: none; }
.public-offline-copy li { display: flex; align-items: center; gap: 13px; }
.public-offline-copy li > span { width: 31px; height: 31px; display: grid; place-items: center; color: var(--brand-primary); background: var(--brand-soft); border-radius: 50%; font-size: var(--font-size-small); font-weight: 800; }
.public-offline-copy li div { display: flex; flex-direction: column; gap: 3px; }
.public-offline-copy li strong { font-size: var(--font-size-control); }
.public-offline-copy li small, .public-offline-limit { color: var(--text-muted); font-size: var(--font-size-meta); line-height: 1.5; }
.public-offline-limit { display: block; max-width: 620px; padding: 12px 14px; background: var(--surface-muted); border-left: 3px solid var(--brand-accent); border-radius: 0 6px 6px 0; }
.public-offline-visual { position: relative; min-height: 430px; display: grid; place-items: center; background: radial-gradient(circle, var(--brand-soft), transparent 68%); }
.offline-page { width: min(360px, 82%); min-height: 385px; padding: 58px 45px; display: flex; flex-direction: column; gap: 17px; background: var(--surface); border: 1px solid var(--border); border-radius: 13px; box-shadow: 0 30px 65px rgb(var(--text-primary-rgb) / .13); transform: rotate(2deg); }
.offline-page i { height: 7px; background: var(--surface-muted); border-radius: 5px; }
.offline-page i:nth-child(2) { width: 86%; }.offline-page i:nth-child(3) { width: 93%; }.offline-page i:nth-child(4) { width: 72%; }.offline-page i:nth-child(5) { width: 88%; }
.offline-status { position: absolute; left: 2%; bottom: 86px; padding: 13px 17px; display: flex; align-items: center; gap: 11px; color: #fff; background: var(--brand-primary); border-radius: 10px; box-shadow: 0 16px 35px rgb(var(--brand-primary-rgb) / .25); }
.offline-status > span { width: 28px; height: 28px; display: grid; place-items: center; background: rgb(255 255 255 / .14); border-radius: 50%; }
.offline-status div { display: flex; flex-direction: column; gap: 2px; }.offline-status small { color: #9bd7ce; font-size: 9px; font-weight: 800; }.offline-status strong { font-size: 14px; }
.offline-sync { position: absolute; right: 1%; top: 83px; padding: 10px 13px; display: flex; align-items: center; gap: 8px; color: var(--brand-primary); background: var(--surface); border: 1px solid var(--border); border-radius: 999px; box-shadow: 0 10px 25px rgb(var(--text-primary-rgb) / .1); font-size: var(--font-size-meta); font-weight: 800; }
.offline-sync b { font-size: 18px; }

@media (max-width: 850px) {
    .public-offline-section { grid-template-columns: 1fr; }
    .public-offline-visual { min-height: 390px; }
}

/* Premium public homepage */
.public-home-page .public-header {
    background: rgb(5 43 38 / .94);
    border-bottom-color: rgb(255 255 255 / .1);
    box-shadow: 0 8px 28px rgb(0 0 0 / .12);
}

.public-home-page .public-brand { color: #fff; }
.public-home-page .public-header .public-brand img { filter: none; }
.public-home-page .public-brand small { color: #efd18b; }
.public-home-page .public-navigation > a,
.public-home-page .public-account-links > a,
.public-home-page .public-account-links button { color: rgb(255 255 255 / .72); }
.public-home-page .public-navigation > a:hover,
.public-home-page .public-account-links button:hover { color: #fff; background: rgb(255 255 255 / .09); }
.public-home-page .public-account-links { border-left-color: rgb(255 255 255 / .14); }
.public-home-page .public-account-links .public-register-link,
.public-home-page .public-account-links form button { color: #183d35; background: #efd18b; }
.public-home-page .public-account-links .public-register-link:hover,
.public-home-page .public-account-links form button:hover { color: #12352e; background: #ffe5a6; }
.public-home-page .public-menu-button span { background: #efd18b; }

.public-home {
    background:
        radial-gradient(circle at 8% 30%, rgb(var(--brand-primary-rgb) / .055), transparent 25%),
        var(--ivory);
}

.public-home .public-hero {
    isolation: isolate;
    width: 100%;
    min-height: min(900px, calc(100dvh - 76px));
    margin: 0;
    padding: clamp(78px, 8vw, 118px) max(24px, calc((100% - 1440px) / 2)) clamp(105px, 10vw, 145px);
    grid-template-columns: minmax(410px, .82fr) minmax(600px, 1.18fr);
    gap: clamp(54px, 6vw, 100px);
    color: #fff;
    background:
        radial-gradient(circle at 80% 18%, rgb(70 177 155 / .25), transparent 28%),
        radial-gradient(circle at 18% 88%, rgb(221 187 112 / .11), transparent 28%),
        linear-gradient(118deg, #062f2a 0%, var(--brand-primary-dark, #073a33) 42%, #0a4a40 100%);
}

.public-home .public-hero::before {
    z-index: 0;
    inset: 0;
    width: auto;
    height: auto;
    background:
        radial-gradient(circle at 13% 22%, rgb(255 255 255 / .09) 0 1px, transparent 2px),
        radial-gradient(circle at 67% 66%, rgb(255 255 255 / .07) 0 1px, transparent 2px);
    background-size: 67px 67px, 91px 91px;
    opacity: .55;
}

.public-home .public-hero::after {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 0;
    background-image:
        linear-gradient(rgb(255 255 255 / .025) 1px, transparent 1px),
        linear-gradient(90deg, rgb(255 255 255 / .025) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 52%, #000);
    mask-image: linear-gradient(90deg, transparent, #000 52%, #000);
    pointer-events: none;
}

.public-home .public-hero-copy,
.public-product-stage {
    position: relative;
    z-index: 2;
}

.public-home .public-hero .public-eyebrow {
    width: fit-content;
    padding: 7px 11px;
    color: #f1d695;
    background: rgb(255 255 255 / .075);
    border: 1px solid rgb(255 255 255 / .13);
    border-radius: 999px;
    letter-spacing: .16em;
}

.public-home .public-hero h1 {
    max-width: 760px;
    margin: 22px 0 25px;
    color: #fff;
    font-size: clamp(52px, 5vw, 78px);
    text-wrap: balance;
}

.public-home .public-hero h1 em {
    display: block;
    margin-top: 8px;
    color: #efd18b;
}

.public-home .public-hero-intro {
    color: rgb(255 255 255 / .72);
    font-size: 17px;
}

.public-home .public-hero-note {
    max-width: 580px;
    color: rgb(255 255 255 / .57);
    line-height: 1.55;
}

.public-home .public-hero-note strong {
    color: rgb(255 255 255 / .9);
}

.public-home .public-hero .public-primary-button,
.public-home .public-final-cta .public-primary-button {
    color: #183d35;
    background: linear-gradient(135deg, #f5dda3, #ddb66a);
    box-shadow: 0 14px 34px rgb(0 0 0 / .25), inset 0 1px rgb(255 255 255 / .52);
}

.public-home .public-hero .public-primary-button:hover,
.public-home .public-final-cta .public-primary-button:hover {
    color: #12352e;
    background: linear-gradient(135deg, #ffe7aa, #e8c477);
    box-shadow: 0 18px 42px rgb(0 0 0 / .3), inset 0 1px rgb(255 255 255 / .6);
}

.public-home .public-primary-button .app-icon {
    width: 17px;
    height: 17px;
    transition: transform .18s ease;
}

.public-home .public-primary-button:hover .app-icon {
    transform: translateX(3px);
}

.public-home .public-hero .public-secondary-button {
    color: #fff;
    background: rgb(255 255 255 / .07);
    border-color: rgb(255 255 255 / .2);
    backdrop-filter: blur(12px);
}

.public-home .public-hero .public-secondary-button:hover {
    background: rgb(255 255 255 / .13);
    border-color: rgb(255 255 255 / .34);
    transform: translateY(-1px);
}

.public-product-stage {
    min-width: 0;
    padding: 42px 0;
    perspective: 1300px;
}

.public-product-stage::before {
    content: "";
    position: absolute;
    inset: 8% -5% 3% 8%;
    background: radial-gradient(ellipse, rgb(82 184 161 / .33), transparent 68%);
    filter: blur(12px);
    pointer-events: none;
}

.public-home .public-product-preview {
    position: relative;
    z-index: 2;
    border-color: rgb(255 255 255 / .24);
    border-radius: 16px;
    box-shadow:
        0 45px 95px rgb(0 0 0 / .38),
        0 0 0 1px rgb(255 255 255 / .07),
        24px 24px 0 rgb(255 255 255 / .025);
    transform: rotateY(-3deg) rotateX(1deg) rotateZ(.35deg);
    transform-origin: center;
}

.public-home .public-product-preview::after {
    content: "";
    position: absolute;
    z-index: 5;
    inset: 0;
    background: linear-gradient(112deg, transparent 30%, rgb(255 255 255 / .13) 45%, transparent 58%);
    transform: translateX(-135%);
    pointer-events: none;
    animation: publicPreviewShine 8s 1.6s ease-in-out infinite;
}

.public-preview-signal {
    position: absolute;
    z-index: 4;
    min-width: 178px;
    padding: 11px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #213b35;
    background: rgb(255 253 248 / .96);
    border: 1px solid rgb(255 255 255 / .72);
    border-radius: 12px;
    box-shadow: 0 18px 42px rgb(0 0 0 / .22);
    backdrop-filter: blur(16px);
}

.public-preview-signal > span {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    display: grid;
    place-items: center;
    color: #fff;
    background: var(--brand-primary);
    border-radius: 9px;
}

.public-preview-signal .app-icon { width: 17px; height: 17px; }
.public-preview-signal div { display: flex; flex-direction: column; gap: 2px; }
.public-preview-signal small { color: #74706a; font-size: 8px; font-weight: 850; letter-spacing: .1em; }
.public-preview-signal strong { font: 600 12px Georgia, serif; white-space: nowrap; }
.preview-signal-saved { right: -28px; bottom: 4px; }
.preview-signal-intelligence { top: 2px; left: -34px; }
.preview-signal-intelligence > span { color: #173d35; background: #efd18b; }

.public-home .public-writing-types > .public-section-heading,
.public-home .public-features > .public-section-heading,
.public-home .public-workflow > .public-section-heading {
    margin-right: auto;
    margin-left: auto;
    text-align: center;
}

.public-home .public-section-heading h2 {
    text-wrap: balance;
}

.public-home .public-writing-type-card {
    isolation: isolate;
    position: relative;
    min-height: 205px;
    padding: 24px;
    overflow: hidden;
    background:
        radial-gradient(circle at 100% 0, rgb(var(--brand-primary-rgb) / .085), transparent 36%),
        var(--paper);
    border-color: color-mix(in srgb, var(--brand-border) 60%, var(--line));
    border-radius: 17px;
    box-shadow: 0 12px 32px rgb(var(--text-primary-rgb) / .045);
    transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.public-home .public-writing-type-card::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0 0 auto;
    height: 3px;
    background: linear-gradient(90deg, var(--brand-primary), var(--brand-highlight));
    opacity: .72;
}

.public-home .public-writing-type-card:hover {
    border-color: var(--brand-primary);
    box-shadow: 0 22px 48px rgb(var(--brand-primary-rgb) / .13);
    transform: translateY(-5px);
}

.public-home .public-writing-type-card > .app-icon {
    width: 43px;
    height: 43px;
    padding: 9px;
    color: var(--brand-primary);
    background: var(--brand-soft);
    border: 1px solid var(--brand-border);
    border-radius: 12px;
    transition: color .2s ease, background .2s ease, transform .2s ease;
}

.public-home .public-writing-type-card:hover > .app-icon {
    color: #fff;
    background: var(--brand-primary);
    transform: rotate(-3deg) scale(1.04);
}

.public-home .public-writing-type-card em {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.public-home .public-writing-type-card em .app-icon { width: 13px; height: 13px; }
.public-home .public-writing-type-card:hover em .app-icon { transform: translateX(3px); }

.public-home .public-trust-strip {
    width: min(1380px, calc(100% - 48px));
    min-height: 78px;
    margin: clamp(24px, 3vw, 38px) auto 0;
    padding: 20px 28px;
    gap: clamp(22px, 4vw, 64px);
    color: rgb(255 255 255 / .75);
    background: linear-gradient(120deg, #07352f, #0d4a40);
    border: 1px solid rgb(255 255 255 / .08);
    border-radius: 16px;
    box-shadow: 0 18px 50px rgb(var(--brand-primary-rgb) / .18);
}

.public-home .public-trust-strip .app-icon { color: #efd18b; }

.public-home .public-offline-section {
    margin-top: clamp(70px, 8vw, 110px);
    margin-bottom: clamp(70px, 8vw, 110px);
    padding: clamp(35px, 5vw, 62px);
    background:
        radial-gradient(circle at 95% 5%, var(--brand-soft), transparent 36%),
        var(--paper);
    border: 1px solid var(--brand-border);
    border-radius: 26px;
    box-shadow: 0 26px 70px rgb(var(--brand-primary-rgb) / .09);
}

.public-home .public-free-card {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 82% 10%, rgb(255 255 255 / .72), transparent 29%),
        linear-gradient(135deg, var(--brand-soft), color-mix(in srgb, var(--brand-highlight) 12%, var(--paper)));
    border-radius: 22px;
    box-shadow: 0 22px 58px rgb(var(--brand-primary-rgb) / .12);
}

.public-home .public-features {
    width: min(1340px, calc(100% - 48px));
    margin-top: clamp(65px, 8vw, 110px);
    margin-bottom: clamp(65px, 8vw, 110px);
    padding: clamp(60px, 7vw, 92px) clamp(24px, 4vw, 52px);
    background: linear-gradient(145deg, color-mix(in srgb, var(--brand-soft) 54%, var(--paper)), var(--paper));
    border: 1px solid var(--brand-border);
    border-radius: 30px;
    box-shadow: 0 25px 70px rgb(var(--brand-primary-rgb) / .07);
}

.public-home .public-feature-card {
    border-color: color-mix(in srgb, var(--brand-border) 52%, var(--line));
    border-radius: 17px;
    box-shadow: 0 10px 28px rgb(var(--text-primary-rgb) / .045);
    transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.public-home .public-feature-card:not(.feature-large):hover {
    border-color: var(--brand-border);
    box-shadow: 0 20px 42px rgb(var(--brand-primary-rgb) / .11);
    transform: translateY(-4px);
}

.public-home .public-feature-card.feature-large {
    background:
        radial-gradient(circle at 84% 12%, rgb(77 184 162 / .28), transparent 30%),
        linear-gradient(145deg, #07352f, #0c4c41);
    border-color: rgb(255 255 255 / .1);
    box-shadow: 0 20px 48px rgb(var(--brand-primary-rgb) / .24);
}

.public-home .feature-icon { border-radius: 13px; }
.public-home .feature-comparison b .app-icon { width: 19px; height: 19px; }

.public-home .public-mobile-section {
    isolation: isolate;
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 21% 38%, rgb(65 164 144 / .21), transparent 26%),
        linear-gradient(120deg, #052d28, #0a433a 64%, #123f37);
}

.public-home .public-mobile-section::after {
    content: "";
    position: absolute;
    z-index: 0;
    width: 520px;
    height: 520px;
    top: -280px;
    right: -190px;
    border: 1px solid rgb(255 255 255 / .08);
    border-radius: 50%;
    box-shadow: 0 0 0 75px rgb(255 255 255 / .018), 0 0 0 150px rgb(255 255 255 / .012);
}

.public-home .public-phone,
.public-home .public-mobile-copy { position: relative; z-index: 1; }
.public-home .public-phone { box-shadow: 0 38px 90px rgb(0 0 0 / .48), 0 0 0 1px rgb(255 255 255 / .08); }

.public-home .public-workflow ol {
    overflow: hidden;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: 0 16px 42px rgb(var(--text-primary-rgb) / .055);
}

.public-home .public-workflow li {
    transition: background .2s ease, transform .2s ease;
}

.public-home .public-workflow li:hover {
    background: var(--brand-soft);
    transform: translateY(-3px);
}

.public-home .public-final-cta {
    isolation: isolate;
    position: relative;
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(circle at 50% -35%, rgb(83 189 166 / .3), transparent 42%),
        linear-gradient(135deg, #062f2a, #0b473d);
}

.public-home .public-final-cta::before,
.public-home .public-final-cta::after {
    content: "";
    position: absolute;
    width: 340px;
    height: 340px;
    border: 1px solid rgb(255 255 255 / .07);
    border-radius: 50%;
}

.public-home .public-final-cta::before { top: -220px; left: -100px; }
.public-home .public-final-cta::after { right: -120px; bottom: -245px; }
.public-home .public-final-cta > * { position: relative; z-index: 1; }
.public-home .public-final-cta > img { filter: brightness(0) invert(1); }
.public-home .public-final-cta .public-eyebrow { color: #efd18b; }
.public-home .public-final-cta h2 { color: #fff; }
.public-home .public-final-cta > p:not(.public-eyebrow) { color: rgb(255 255 255 / .67); }

.public-reveal {
    opacity: 0;
    transform: translateY(25px);
    transition: opacity .62s ease, transform .62s cubic-bezier(.22, 1, .36, 1);
}

.public-reveal.is-visible {
    opacity: 1;
    transform: none;
}

@keyframes publicPreviewShine {
    0%, 64% { transform: translateX(-135%); }
    82%, 100% { transform: translateX(135%); }
}

@media (max-width: 1100px) {
    .public-home .public-hero {
        min-height: auto;
        padding-top: 90px;
        grid-template-columns: 1fr;
        text-align: center;
    }

    .public-home .public-hero-copy { max-width: 820px; margin: auto; }
    .public-home .public-hero .public-eyebrow { margin-inline: auto; }
    .public-home .public-hero-note { margin-inline: auto; }
    .public-product-stage { width: min(920px, 100%); margin: auto; }
}

@media (max-width: 850px) {
    .public-home-page .public-navigation {
        background: rgb(5 43 38 / .985);
        border-bottom-color: rgb(255 255 255 / .1);
    }

    .public-home-page .public-account-links {
        border-top-color: rgb(255 255 255 / .13);
        border-left: 0;
    }

    .public-home .public-offline-section { margin-block: 55px; }
    .public-home .public-trust-strip { flex-wrap: wrap; justify-content: flex-start; }
    .preview-signal-intelligence { left: -8px; }
    .preview-signal-saved { right: -8px; }
}

@media (max-width: 650px) {
    .public-home .public-hero {
        width: 100%;
        padding: 72px 15px 85px;
    }

    .public-home .public-hero h1 { font-size: clamp(43px, 13vw, 58px); }
    .public-product-stage { padding: 30px 0 44px; }
    .public-home .public-product-preview { transform: none; border-radius: 12px; }
    .preview-signal-intelligence { display: none; }
    .preview-signal-saved { right: 7px; bottom: 3px; }
    .public-preview-signal { min-width: 158px; padding: 9px 11px; }
    .public-preview-signal > span { width: 28px; height: 28px; flex-basis: 28px; }
    .public-home .public-trust-strip { width: calc(100% - 30px); padding: 20px; flex-direction: column; gap: 13px; border-radius: 13px; }
    .public-home .public-offline-section { width: calc(100% - 30px); padding: 27px 20px; border-radius: 20px; }
    .public-home .public-features { width: calc(100% - 30px); padding: 55px 15px; border-radius: 22px; }
    .public-home .public-writing-type-card { min-height: 0; }
    .public-home .public-mobile-section { width: 100%; }
    .public-home .public-final-cta { padding: 90px 20px; }
}

@media (prefers-reduced-motion: reduce) {
    .public-home *,
    .public-home *::before,
    .public-home *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }

    .public-reveal { opacity: 1; transform: none; }
}

/* Public product story: authorship, intelligence and human review */
#how-it-helps,
#ai-assistance,
#features,
#pricing,
#writing-types,
#mobile,
#questions { scroll-margin-top: 86px; }

.public-journey > .public-section-heading,
.public-faq > .public-section-heading {
    margin-right: auto;
    margin-left: auto;
    text-align: center;
}

.public-journey-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
}

.journey-card {
    position: relative;
    min-height: 315px;
    padding: 27px 23px 24px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 17px;
    box-shadow: 0 12px 32px rgb(var(--text-primary-rgb) / .045);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.journey-card:hover {
    border-color: var(--brand-border);
    box-shadow: 0 22px 45px rgb(var(--brand-primary-rgb) / .11);
    transform: translateY(-5px);
}

.journey-card > span {
    position: absolute;
    top: 20px;
    right: 20px;
    color: #9b948d;
    font: 12px Georgia, serif;
}

.journey-card > .app-icon {
    width: 49px;
    height: 49px;
    padding: 12px;
    color: var(--brand-primary);
    background: var(--brand-soft);
    border: 1px solid var(--brand-border);
    border-radius: 14px;
}

.journey-card h3 { margin: 28px 0 12px; font: 500 26px/1.15 Georgia, serif; }
.journey-card p { margin: 0; color: var(--muted); font: 13px/1.65 Georgia, serif; }
.journey-card small { margin-top: auto; padding-top: 27px; color: var(--brand-primary); font-size: 8px; font-weight: 900; letter-spacing: .1em; line-height: 1.55; }
.journey-card.journey-write { color: #fff; background: linear-gradient(145deg, #07352f, #0c4c41); border-color: #0c4c41; }
.journey-card.journey-write > span { color: rgb(255 255 255 / .48); }
.journey-card.journey-write > .app-icon { color: #f1d695; background: rgb(255 255 255 / .08); border-color: rgb(255 255 255 / .14); }
.journey-card.journey-write p { color: rgb(255 255 255 / .7); }
.journey-card.journey-write small { color: #efd18b; }

.public-ai-boundary {
    width: 100%;
    padding: clamp(85px, 9vw, 135px) max(24px, calc((100% - 1260px) / 2));
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(480px, 1.08fr);
    align-items: center;
    gap: clamp(55px, 8vw, 120px);
    color: #fff;
    background:
        radial-gradient(circle at 82% 20%, rgb(74 182 158 / .24), transparent 29%),
        linear-gradient(122deg, #052d28, #0a443b 62%, #123f37);
}

.public-ai-copy .public-eyebrow { color: #efd18b; }
.public-ai-copy h2,
.public-intelligence h2,
.collaboration-copy h2,
.public-assurance h2 { margin: 15px 0 20px; font: 500 clamp(39px, 4.4vw, 61px)/1.08 Georgia, serif; letter-spacing: -.028em; text-wrap: balance; }
.public-ai-copy > p:not(.public-eyebrow) { max-width: 620px; margin: 0; color: rgb(255 255 255 / .7); font: 16px/1.72 Georgia, serif; }
.public-ai-copy ul { margin: 32px 0 0; padding: 0; display: grid; gap: 18px; list-style: none; }
.public-ai-copy li { display: flex; align-items: flex-start; gap: 13px; }
.public-ai-copy li > span { width: 39px; height: 39px; flex: 0 0 39px; display: grid; place-items: center; color: #efd18b; background: rgb(255 255 255 / .08); border: 1px solid rgb(255 255 255 / .12); border-radius: 11px; }
.public-ai-copy li .app-icon { width: 19px; height: 19px; }
.public-ai-copy li div { display: flex; flex-direction: column; gap: 4px; }
.public-ai-copy li strong { font: 600 15px Georgia, serif; }
.public-ai-copy li small { color: rgb(255 255 255 / .55); font-size: var(--font-size-small); line-height: 1.5; }
.public-ai-credit-note { margin-top: 30px; padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; color: #193c35; background: linear-gradient(135deg, #f7e5b7, #dfbd73); border-radius: 12px; box-shadow: 0 15px 34px rgb(0 0 0 / .2); }
.public-ai-credit-note strong { font-size: var(--font-size-control); }
.public-ai-credit-note span { font: 12px/1.5 Georgia, serif; }

.public-review-preview {
    overflow: hidden;
    color: var(--text-primary);
    background: #fffdfa;
    border: 1px solid rgb(255 255 255 / .26);
    border-radius: 20px;
    box-shadow: 0 38px 85px rgb(0 0 0 / .38);
    transform: rotate(1deg);
}
.public-review-preview > header { padding: 21px 23px; display: grid; grid-template-columns: 43px 1fr auto; align-items: center; gap: 12px; background: #f2eee7; border-bottom: 1px solid var(--line); }
.public-review-preview > header > span { width: 43px; height: 43px; display: grid; place-items: center; color: #fff; background: var(--brand-primary); border-radius: 12px; }
.public-review-preview > header .app-icon { width: 21px; height: 21px; }
.public-review-preview > header div { display: flex; flex-direction: column; gap: 3px; }
.public-review-preview > header small { color: var(--brand-primary); font-size: 8px; font-weight: 900; letter-spacing: .12em; }
.public-review-preview > header strong { font: 600 16px Georgia, serif; }
.public-review-preview > header em { padding: 6px 8px; color: #735b21; background: #fff3cc; border: 1px solid #e8d390; border-radius: 999px; font-size: 8px; font-style: normal; font-weight: 900; letter-spacing: .08em; }
.public-review-preview blockquote { margin: 29px 29px 0; padding: 18px 20px; color: #5f5851; background: #f7f3ed; border-left: 3px solid var(--brand-primary); font: italic 14px/1.65 Georgia, serif; }
.public-review-preview > article { margin: 15px 29px 30px; padding: 22px; background: var(--brand-soft); border: 1px solid var(--brand-border); border-radius: 13px; }
.public-review-preview > article small { color: var(--brand-primary); font-size: 8px; font-weight: 900; letter-spacing: .1em; }
.public-review-preview > article h3 { margin: 8px 0 9px; font: 600 22px Georgia, serif; }
.public-review-preview > article p { margin: 0; color: var(--muted); font: 13px/1.65 Georgia, serif; }
.public-review-preview > footer { padding: 17px 23px; display: flex; align-items: center; justify-content: space-between; gap: 15px; color: #6e6761; background: #f8f5f0; border-top: 1px solid var(--line); font-size: var(--font-size-meta); }
.public-review-preview > footer span { display: inline-flex; align-items: center; gap: 7px; }
.public-review-preview > footer .app-icon { width: 15px; height: 15px; color: var(--brand-primary); }
.public-review-preview > footer strong { color: var(--brand-primary); }

.public-intelligence { display: grid; grid-template-columns: minmax(0, .9fr) minmax(470px, 1.1fr); align-items: center; gap: clamp(50px, 8vw, 115px); }
.public-intelligence-copy > p:not(.public-eyebrow),
.collaboration-copy > p:not(.public-eyebrow) { margin: 0; color: var(--muted); font: 16px/1.7 Georgia, serif; }
.intelligence-benefits { margin-top: 29px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.intelligence-benefits span { padding: 12px; display: flex; align-items: center; gap: 9px; color: var(--brand-primary); background: var(--brand-soft); border: 1px solid var(--brand-border); border-radius: 10px; font-size: var(--font-size-small); font-weight: 800; }
.intelligence-benefits .app-icon { width: 18px; height: 18px; flex: 0 0 18px; }
.intelligence-dashboard { padding: 26px; background: var(--paper); border: 1px solid var(--brand-border); border-radius: 21px; box-shadow: 0 28px 65px rgb(var(--brand-primary-rgb) / .13); }
.intelligence-dashboard > header { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.intelligence-dashboard > header div { display: flex; flex-direction: column; gap: 4px; }
.intelligence-dashboard > header small { color: var(--brand-primary); font-size: 8px; font-weight: 900; letter-spacing: .13em; }
.intelligence-dashboard > header strong { font: 600 19px Georgia, serif; }
.intelligence-dashboard > header > span { padding: 7px 9px; color: var(--brand-primary); background: var(--brand-soft); border-radius: 999px; font-size: 8px; font-weight: 900; }
.intelligence-score { margin-top: 25px; padding: 21px; display: flex; align-items: center; gap: 16px; color: #fff; background: linear-gradient(135deg, #07352f, #0c4c41); border-radius: 14px; }
.intelligence-score > strong { font: 600 45px Georgia, serif; }
.intelligence-score > span { display: flex; flex-direction: column; font: 15px Georgia, serif; }
.intelligence-score small { margin-top: 3px; color: rgb(255 255 255 / .57); font: 9px Arial, sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.intelligence-chart { height: 130px; margin: 24px 0 16px; padding: 0 11px; display: flex; align-items: flex-end; gap: 10px; border-bottom: 1px solid var(--line); background: repeating-linear-gradient(to bottom, transparent 0 31px, var(--border-soft) 32px); }
.intelligence-chart i { width: 100%; display: block; background: linear-gradient(180deg, var(--brand-highlight), var(--brand-primary)); border-radius: 6px 6px 0 0; }
.intelligence-chart i:nth-child(1) { height: 42%; }
.intelligence-chart i:nth-child(2) { height: 67%; }
.intelligence-chart i:nth-child(3) { height: 51%; }
.intelligence-chart i:nth-child(4) { height: 84%; }
.intelligence-chart i:nth-child(5) { height: 73%; }
.intelligence-chart i:nth-child(6) { height: 91%; }
.intelligence-chart i:nth-child(7) { height: 64%; }
.intelligence-list { display: grid; gap: 7px; }
.intelligence-list > span { padding: 10px 11px; display: grid; grid-template-columns: 8px 1fr auto; align-items: center; gap: 9px; background: var(--surface-muted); border-radius: 8px; }
.intelligence-list i { width: 7px; height: 7px; background: var(--brand-accent); border-radius: 50%; }
.intelligence-list b { font-size: var(--font-size-small); }
.intelligence-list small { color: var(--muted); font-size: var(--font-size-meta); }

.public-collaboration {
    width: min(1340px, calc(100% - 48px));
    margin: 35px auto clamp(85px, 10vw, 145px);
    padding: clamp(45px, 6vw, 78px);
    display: grid;
    grid-template-columns: minmax(520px, 1.12fr) minmax(0, .88fr);
    align-items: center;
    gap: clamp(50px, 7vw, 105px);
    background: linear-gradient(145deg, var(--brand-soft), var(--paper));
    border: 1px solid var(--brand-border);
    border-radius: 30px;
    box-shadow: 0 28px 75px rgb(var(--brand-primary-rgb) / .09);
}
.collaboration-copy ul { margin: 27px 0 0; padding: 0; display: grid; gap: 12px; list-style: none; }
.collaboration-copy li { position: relative; padding-left: 26px; color: #56504a; font-size: var(--font-size-small); line-height: 1.55; }
.collaboration-copy li::before { content: ""; position: absolute; top: 5px; left: 2px; width: 9px; height: 9px; background: var(--brand-primary); border: 3px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px var(--brand-border); }
.collaboration-preview { position: relative; min-height: 470px; padding-right: 155px; display: flex; align-items: center; }
.collaboration-page { min-height: 400px; padding: 55px 44px; background: #fffefa; border: 1px solid var(--line); border-radius: 13px; box-shadow: 0 24px 55px rgb(var(--text-primary-rgb) / .13); }
.collaboration-page > small { color: var(--brand-primary); font-size: 8px; font-weight: 900; letter-spacing: .12em; }
.collaboration-page h3 { margin: 8px 0 29px; font: 500 27px Georgia, serif; }
.collaboration-page p { position: relative; margin: 0 0 20px; color: #463f39; font: 14px/1.85 Georgia, serif; }
.collaboration-page .commented-passage { padding: 3px 2px; background: #fff0b7; border-bottom: 2px solid #dfba59; }
.commented-passage b { position: absolute; top: -3px; right: -72px; width: 38px; height: 38px; display: grid; place-items: center; color: #fff; background: var(--brand-primary); border-radius: 11px; box-shadow: 0 8px 18px rgb(var(--brand-primary-rgb) / .25); }
.commented-passage .app-icon { width: 18px; height: 18px; }
.commented-passage em { position: absolute; top: -7px; right: -7px; width: 17px; height: 17px; display: grid; place-items: center; color: var(--brand-primary); background: #f5d783; border: 2px solid #fff; border-radius: 50%; font: 800 8px Arial, sans-serif; }
.collaboration-preview aside { position: absolute; z-index: 2; top: 95px; right: 0; width: 285px; overflow: hidden; background: var(--paper); border: 1px solid var(--brand-border); border-radius: 15px; box-shadow: 0 25px 58px rgb(var(--brand-primary-rgb) / .2); }
.collaboration-preview aside header { padding: 16px 18px; display: flex; flex-direction: column; gap: 3px; color: #fff; background: var(--brand-primary); }
.collaboration-preview aside header span { color: #efd18b; font-size: 8px; font-weight: 900; letter-spacing: .12em; }
.collaboration-preview aside header strong { font: 600 15px Georgia, serif; }
.collaboration-preview aside blockquote { margin: 14px 15px 6px; padding: 10px; color: var(--muted); background: var(--surface-muted); border-radius: 7px; font: italic 10px/1.45 Georgia, serif; }
.collaboration-preview aside article { margin: 0 15px; padding: 11px 2px; display: flex; flex-direction: column; gap: 4px; border-bottom: 1px solid var(--line); }
.collaboration-preview aside article b { font-size: var(--font-size-meta); }
.collaboration-preview aside article small { color: var(--muted); font: 11px/1.45 Georgia, serif; }
.collaboration-preview aside footer { margin: 13px 15px 15px; padding: 10px; color: #918a84; background: #fff; border: 1px solid var(--line); border-radius: 7px; font-size: 10px; }

.public-writing-type-featured { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.writing-type-more { margin-top: 18px; background: var(--paper); border: 1px solid var(--line); border-radius: 15px; box-shadow: 0 10px 25px rgb(var(--text-primary-rgb) / .04); }
.writing-type-more > summary { min-height: 59px; padding: 0 20px; display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--brand-primary); cursor: pointer; font-size: var(--font-size-small); font-weight: 850; list-style: none; }
.writing-type-more > summary::-webkit-details-marker { display: none; }
.writing-type-more > summary .app-icon { width: 16px; height: 16px; transition: transform .2s ease; }
.writing-type-more[open] > summary .app-icon { transform: rotate(180deg); }
.writing-type-more > div { padding: 4px 18px 18px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.writing-type-more > div > a { min-height: 64px; padding: 11px 13px; display: flex; align-items: center; gap: 11px; color: var(--text-primary); background: var(--surface-muted); border: 1px solid transparent; border-radius: 10px; text-decoration: none; }
.writing-type-more > div > a:hover { border-color: var(--brand-border); background: var(--brand-soft); }
.writing-type-more a > .app-icon { width: 24px; height: 24px; flex: 0 0 24px; color: var(--brand-primary); }
.writing-type-more a > span { display: flex; flex-direction: column; gap: 3px; }
.writing-type-more a strong { font-size: var(--font-size-small); }
.writing-type-more a small { color: var(--muted); font-size: var(--font-size-caption); }

.public-assurance { width: min(1340px, calc(100% - 48px)); margin: 0 auto clamp(80px, 9vw, 130px); padding: clamp(55px, 7vw, 88px); background: #f2eee7; border: 1px solid var(--line); border-radius: 28px; }
.public-assurance > header { max-width: 760px; margin: 0 auto 43px; text-align: center; }
.public-assurance > header > p:last-child { margin: 0; color: var(--muted); font: 16px Georgia, serif; }
.public-assurance > div { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 11px; }
.public-assurance article { padding: 25px 22px; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; }
.public-assurance article > .app-icon { width: 39px; height: 39px; padding: 9px; color: var(--brand-primary); background: var(--brand-soft); border-radius: 11px; }
.public-assurance h3 { margin: 20px 0 8px; font: 600 18px Georgia, serif; }
.public-assurance article p { margin: 0; color: var(--muted); font: 12px/1.6 Georgia, serif; }
.public-assurance > aside { max-width: 780px; margin: 23px auto 0; padding: 14px 17px; display: flex; align-items: center; gap: 12px; color: #fff; background: var(--brand-primary); border-radius: 11px; }
.public-assurance > aside .app-icon { width: 24px; height: 24px; flex: 0 0 24px; color: #efd18b; }
.public-assurance > aside p { margin: 0; font: 12px/1.55 Georgia, serif; }

.public-faq { max-width: 1020px; }
.public-faq-list { display: grid; gap: 9px; }
.public-faq-list details { overflow: hidden; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 8px 22px rgb(var(--text-primary-rgb) / .035); }
.public-faq-list details[open] { border-color: var(--brand-border); }
.public-faq-list summary { min-height: 66px; padding: 15px 19px; display: flex; align-items: center; justify-content: space-between; gap: 18px; cursor: pointer; font: 600 16px Georgia, serif; list-style: none; }
.public-faq-list summary::-webkit-details-marker { display: none; }
.public-faq-list summary .app-icon { width: 17px; height: 17px; flex: 0 0 17px; color: var(--brand-primary); transition: transform .2s ease; }
.public-faq-list details[open] summary .app-icon { transform: rotate(180deg); }
.public-faq-list details p { margin: 0; padding: 0 58px 21px 19px; color: var(--muted); font: 14px/1.7 Georgia, serif; }
.public-home .public-final-cta > small { margin-top: 18px; color: rgb(255 255 255 / .52); font-size: var(--font-size-meta); }

.pricing-audience { min-height: 48px; margin: 22px 0 0; color: var(--muted); font: 13px/1.6 Georgia, serif; }
.pricing-studio .pricing-audience { color: #c3d9d4; }
.pricing-trial-callout { max-width: 1030px; margin: 33px auto 28px; padding: 22px 24px; display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 17px; background: linear-gradient(115deg, #edf6f2, #fff8e8); border: 1px solid var(--brand-border); border-radius: 16px; box-shadow: 0 14px 36px rgb(var(--brand-primary-rgb) / .08); }
.pricing-trial-callout > span { width: 48px; height: 48px; display: grid; place-items: center; color: #173d35; background: #efd18b; border-radius: 13px; }
.pricing-trial-callout svg { width: 23px; height: 23px; }
.pricing-trial-callout div { display: flex; flex-direction: column; gap: 4px; }
.pricing-trial-callout small { color: var(--brand-primary); font-size: 8px; font-weight: 900; letter-spacing: .13em; }
.pricing-trial-callout h3 { margin: 0; font: 600 18px Georgia, serif; }
.pricing-trial-callout p { margin: 0; color: var(--muted); font: 12px/1.55 Georgia, serif; }
.pricing-trial-callout > a { min-height: 40px; padding: 0 14px; display: inline-flex; align-items: center; justify-content: center; color: #fff; background: var(--brand-primary); border-radius: 8px; font-size: var(--font-size-small); font-weight: 800; text-decoration: none; white-space: nowrap; }
.pricing-comparison-three > header,
.pricing-comparison-three > div { grid-template-columns: minmax(0, 1fr) 105px 125px 105px; }
.pricing-comparison-three > header b:nth-last-child(2) { color: var(--brand-primary); background: var(--brand-soft); border-color: var(--brand-border); }
.pricing-comparison-three > div > b:nth-last-child(2):not(.not-included) { color: var(--brand-primary); }
.pricing-safety-note { max-width: 880px; margin: 26px auto 0; padding: 16px 18px; display: flex; align-items: center; gap: 13px; color: #fff; background: var(--brand-primary); border-radius: 12px; }
.pricing-safety-note svg { width: 27px; height: 27px; flex: 0 0 27px; color: #efd18b; }
.pricing-safety-note p { margin: 0; font: 12px/1.6 Georgia, serif; }

@media (max-width: 1100px) {
    .public-journey-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .public-ai-boundary,
    .public-intelligence,
    .public-collaboration { grid-template-columns: 1fr; }
    .public-ai-copy { max-width: 800px; }
    .public-review-preview { width: min(720px, 100%); transform: none; }
    .public-intelligence-copy { max-width: 780px; }
    .intelligence-dashboard { width: min(760px, 100%); }
    .public-collaboration { padding-inline: clamp(28px, 6vw, 65px); }
    .collaboration-preview { width: min(720px, 100%); }
    .public-writing-type-featured,
    .public-assurance > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
    .public-journey-grid { grid-template-columns: 1fr; }
    .journey-card { min-height: 250px; }
    .public-ai-boundary { padding: 75px 22px; grid-template-columns: minmax(0, 1fr); }
    .public-review-preview > header { grid-template-columns: 40px 1fr; }
    .public-review-preview > header em { grid-column: 1 / -1; width: fit-content; }
    .public-review-preview > footer { align-items: flex-start; flex-direction: column; }
    .public-intelligence { grid-template-columns: minmax(0, 1fr); }
    .intelligence-benefits { grid-template-columns: 1fr; }
    .public-collaboration { width: calc(100% - 30px); padding: 50px 18px; border-radius: 20px; }
    .collaboration-preview { min-height: 560px; padding: 0; align-items: flex-start; }
    .collaboration-page { width: 100%; min-height: 355px; padding: 37px 25px; }
    .commented-passage b { right: -6px; top: 34px; }
    .collaboration-preview aside { top: 300px; right: 8px; left: 8px; width: auto; }
    .public-writing-type-featured,
    .public-assurance > div,
    .writing-type-more > div { grid-template-columns: 1fr; }
    .public-assurance { width: calc(100% - 30px); padding: 50px 17px; border-radius: 20px; }
    .pricing-trial-callout { grid-template-columns: 42px 1fr; padding: 18px; }
    .pricing-trial-callout > span { width: 42px; height: 42px; }
    .pricing-trial-callout > a { grid-column: 1 / -1; }
    .pricing-comparison-three { overflow-x: auto; }
    .pricing-comparison-three > header,
    .pricing-comparison-three > div { min-width: 570px; grid-template-columns: minmax(205px, 1fr) 82px 100px 82px; }
    .pricing-safety-note { align-items: flex-start; }
}