/* NetTwelve's supplied logo anchors the shared Builder palette. */
:root {
    --ink: #263451;
    --muted: #6b7890;
    --line: #e0e7f1;
    --paper: #f5f8fc;
    --soft: #eaf2fc;
    --brand-primary: #1262ae;
    --brand-navy: #303758;
    --brand-cyan: #2dabe0;
    --brand-gradient: linear-gradient(120deg, #284d99 0%, #086eb5 58%, #087cab 100%);
}

.wordmark {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    width: 190px;
    max-width: 100%;
    flex-shrink: 0;
}
.brand-logo { display: block; width: 100%; height: auto; }
.brand-product {
    color: #506787;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .3em;
    margin-left: 35%;
}
.sidebar .wordmark { width: 190px; }
.sidebar { overflow-y: auto; }
.sidebar-bottom { flex-shrink: 0; }
.workspace-label { color: #718099; margin-top: 34px; }
.sidebar nav a { color: #64728b; }
.sidebar nav a.active { color: #125caa; background: linear-gradient(100deg, #e7effd, #e8f6fc); }
.sidebar nav a:hover { background: #f0f5fc; }
.sidebar nav a.active span { color: #147cc0; }
.sidebar .sidebar-nav-icon {
    align-items: center;
    display: inline-flex;
    flex: 0 0 20px;
    height: 20px;
    justify-content: center;
    width: 20px;
}
.sidebar .sidebar-nav-icon svg { display: block; height: 18px; width: 18px; }
.sidebar-promo { margin: clamp(34px, 7vh, 76px) 3px 20px; }
.help-card { background: linear-gradient(140deg, #f0f4fd, #edf8fc); border-color: #dce8f6; }
.help-card .spark, .help-card a { color: #1869ac; }
.help-card p, .profile small { color: #647995; }
.avatar { color: #2167a7; background: #e6f1fc; }
.breadcrumb, .top-help, .icon-button { color: #657795; }
.breadcrumb strong { color: #3c506e; }

.button {
    background: var(--brand-gradient);
    border-color: #1466ab;
    box-shadow: 0 3px 9px #156aae16;
}
.button.secondary { background: #fff; color: #295d93; border-color: #cddded; box-shadow: none; }
.button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
    outline: 2px solid #1879c4;
}
.eyebrow { color: #3474ad; }
.welcome-banner {
    background: var(--brand-gradient);
    border-color: #246eac;
    box-shadow: 0 8px 28px #175ba414;
    color: white;
}
.welcome-banner h2 { color: #fff; }
.welcome-banner p { color: #e0edff; }
.welcome-banner a { color: #fff; }
.welcome-banner .pill.light { color: #eff9ff; background: #ffffff1f; border: 1px solid #ffffff30; }
.banner-art { color: #263451; }
.floating-tag { color: #27598a; }
.stat-icon { color: #3e79b5; background: #eaf2fc; }
.stat-icon.green { color: #1684b5; background: #e7f6fc; }
.stat-icon.peach { color: #646eaf; background: #edf0fd; }
.count { color: #55799e; background: #e8eff8; }
.site-image { background: #eaf0f7; }
.site-details p, .site-meta { color: #748199; }
.new-site-card { background: linear-gradient(145deg, #f1f5fd, #eff9fc); border-color: #b9d3e9; }
.new-site-card p { color: #6f8199; }
.new-site-card strong { color: #216da9; }
.plus-circle { color: #2276b5; background: #e4f1fc; border-color: #c4ddef; }
.bottom-callout { background: linear-gradient(105deg, #edf3fd, #edf8fc); border-color: #dae7f4; }
.bottom-callout p { color: #697e99; }
.bottom-callout > a, .callout-icon { color: #2675ac; }
.category-tabs a { color: #5c7390; border-color: #dce5f0; }
.category-tabs a.selected { background: var(--brand-gradient); border-color: #276faf; }
.template-preview-button { gap: 8px; }
.template-preview-button svg { display: block; flex: 0 0 17px; height: 17px; width: 17px; }
.template-card .card-actions { align-items: center; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; }
.template-card .card-actions .button { flex: 0 0 auto; padding-left: 15px; padding-right: 15px; width: auto; }
.template-card .template-live-preview { background: #fff; padding: 0; }
.template-card iframe.template-live-preview-frame { border: 0; border-radius: 0; box-shadow: none; height: 400%; inset: 0; pointer-events: none; position: absolute; transform: scale(.25); transform-origin: left top; transition: none; width: 400%; }
.template-card .template-live-preview-link { inset: 0; position: absolute; z-index: 1; }
.template-card .template-live-preview > .pill { z-index: 2; }
.dashboard-site-live-preview { background: #fff; height: 210px; padding: 0; }
.dashboard-site-live-preview iframe.dashboard-site-live-preview-frame { border: 0; border-radius: 0; box-shadow: none; height: 400%; inset: 0; pointer-events: none; position: absolute; transform: scale(.25); transform-origin: left top; transition: none; width: 400%; }
.dashboard-site-live-preview > .pill { z-index: 2; }

.panel p, .plan-card ul { color: #697c94; }
label { color: #516782; }
input, textarea, select { color: #2e4665; border-color: #d4dfed; }
select:not([multiple]) { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%233f5c78' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 8 4 4 4-4'/%3E%3C/svg%3E"); background-position: right 16px center; background-repeat: no-repeat; background-size: 15px; padding-right: 42px; }
.auth-page { background: radial-gradient(ellipse at top right, #d7eafa, transparent 65%), #f4f7fc; }
.auth-links { color: #226fac; }
.auth-signup-link { color: #718096; font-size: 13px; margin: 10px 0 22px; }
.auth-signup-link a { color: #226fac; font-weight: 650; }
.social-auth-options { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 0 18px; }
.social-auth-button {
    align-items: center;
    background: #fff;
    border: 1px solid #d7e1ec;
    border-radius: 8px;
    color: #273d57;
    display: flex;
    font-size: 13px;
    font-weight: 650;
    gap: 9px;
    justify-content: center;
    padding: 11px 10px;
}
.social-auth-button:hover { background: #f7fafc; border-color: #b9cce0; }
.social-auth-button.disabled { cursor: not-allowed; opacity: .58; }
.social-auth-button.disabled:hover { background: #fff; border-color: #d7e1ec; }
.password-field { position: relative; }
.password-field > input { padding-right: 58px; }
.password-visibility-toggle { align-items: center; background: transparent; border: 0; color: #617891; cursor: pointer; display: flex; height: 32px; justify-content: center; padding: 6px; position: absolute; right: 7px; top: 29px; width: 32px; }
.password-visibility-toggle svg { fill: none; height: 19px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; width: 19px; }
.password-visibility-toggle:hover { color: #0e4f82; }
.social-provider-mark {
    align-items: center;
    border-radius: 50%;
    display: inline-flex;
    font-size: 15px;
    font-weight: 800;
    height: 26px;
    justify-content: center;
    width: 26px;
}
.social-provider-mark.google { border: 1px solid #d9e0e7; color: #4285f4; }
.social-provider-mark.facebook { background: #1877f2; color: #fff; font-family: Arial, sans-serif; }
.social-auth-button svg { flex: 0 0 22px; height: 22px; width: 22px; }
.social-auth-button > span { line-height: 1.25; }
.auth-divider { align-items: center; color: #91a0af; display: flex; font-size: 10px; gap: 12px; margin: 24px 0 14px; text-transform: uppercase; }
.auth-divider::before,
.auth-divider::after { background: #e1e7ed; content: ""; flex: 1; height: 1px; }
.connected-accounts > p { color: #718096; margin-bottom: 20px; }
.connected-account-row { align-items: center; border-top: 1px solid #e5eaf0; display: grid; gap: 12px; grid-template-columns: auto 1fr auto; padding: 15px 0; }
.connected-account-row strong { color: #29415d; display: block; font-size: 13px; }
.connected-account-row small { display: block; margin-top: 2px; }
.connected-account-row .button { padding: 8px 13px; }
.login-dialog { background: transparent; border: 0; max-height: calc(100dvh - 32px); max-width: 540px; overflow-y: auto; padding: 0; width: calc(100% - 32px); }
.login-dialog::backdrop { background: #14294599; backdrop-filter: blur(6px); }
.login-dialog-card { background: #fff; border: 1px solid #d9e3ee; border-radius: 18px; box-shadow: 0 28px 90px #132d4d45; padding: 30px; }
.login-dialog-heading { align-items: start; display: flex; gap: 20px; justify-content: space-between; margin-bottom: 8px; }
.login-dialog-heading h2 { color: #263451; font-size: 26px; margin-bottom: 6px; }
.login-dialog-heading p { color: #718096; font-size: 13px; margin: 0; }
.login-dialog-close { background: #eff4f9; border: 0; border-radius: 50%; color: #52677e; flex: 0 0 auto; font-size: 22px; height: 34px; line-height: 1; padding: 0; width: 34px; }
.login-dialog-close:hover { background: #e3ecf5; }
.login-dialog form { margin-top: 0; }
.login-remember { align-items: center; display: flex; font-size: 11px; gap: 8px; }
.login-remember input { height: 15px; margin: 0; width: 15px; }
.login-dialog-links { align-items: center; color: #226fac; display: flex; font-size: 11px; justify-content: space-between; margin-top: 18px; }
@media (max-width: 430px) {
    .social-auth-options { grid-template-columns: 1fr; }
    .login-dialog { margin: auto 12px 12px; width: calc(100% - 24px); }
    .login-dialog-card { border-radius: 17px 17px 10px 10px; padding: 23px 19px; }
    .login-dialog-links { align-items: flex-start; flex-direction: column; gap: 8px; }
}
.landing { background: #f5f8fd; }
.landing header { border-color: #dce6f3; }
.landing h1 em {
    color: #156bb7;
    background: var(--brand-gradient);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.landing main > p, .landing .stats span { color: #61758f; }
.landing-previews img { box-shadow: 0 15px 50px #1d5b921a; }

.editor-workspace { border-color: #d7e2f0; }
.editor-intro p, .editor-upsell p { color: #6c809a; }
.editor-upsell { background: linear-gradient(130deg, #edf3fc, #eaf7fc); }
.editor-upsell a { color: #2676ae; }
.preview-area { background: #eaf0f7; }
.device-switch { background: #eef3fa; }
.device-switch button { color: #647b96; }
.device-switch button.selected { color: #1b6cb0; }
.preview-label { color: #6a8099; }
.app-footer { color: #7c899c; }

@media (max-width: 950px) {
    .editor-page .sidebar .wordmark { width: 160px; }
}
@media (max-width: 700px) {
    .landing header .wordmark { width: 150px; }
    .landing header nav { gap: 12px; }
    .landing header .button { padding: 9px 11px; font-size: 10px; }
    .auth-page > .wordmark { width: 185px; }
}
@media (max-width: 380px) {
    .landing header { padding: 16px 12px; }
    .landing header .wordmark { width: 126px; }
}

.logout-form {
    margin-top: 12px;
}
.logout-button {
    align-items: center;
    background: #fff;
    border: 1px solid #d5dfec;
    border-radius: 6px;
    color: #405a79;
    display: flex;
    font-size: 11px;
    font-weight: 600;
    gap: 9px;
    justify-content: center;
    padding: 9px 12px;
    width: 100%;
}
.sidebar-logout-icon { align-items: center; display: inline-flex; height: 18px; justify-content: center; width: 18px; }
.sidebar-logout-icon svg { display: block; height: 18px; width: 18px; }
.logout-button:hover {
    background: #edf4fc;
    border-color: #b9cde3;
    color: #155f9f;
}
.topbar-actions {
    align-items: center;
    display: flex;
    gap: 12px;
    margin-left: auto;
}
.topbar-actions .top-help { align-items: center; font-size: 13px; font-weight: 600; gap: 8px; }
.topbar-actions svg { display: block; flex: 0 0 18px; height: 18px; width: 18px; }
.topbar-actions form { margin: 0; }
.top-account,
.top-logout {
    align-items: center;
    background: #fff;
    border: 1px solid #d5dfec;
    border-radius: 6px;
    color: #405a79;
    display: inline-flex;
    font-size: 13px;
    font-weight: 650;
    gap: 7px;
    min-height: 38px;
    padding: 8px 12px;
}
.top-logout:hover,
.top-account:hover {
    background: #edf4fc;
    border-color: #b9cde3;
    color: #155f9f;
}
.admin-badge {
    background: #e5effb;
    border: 1px solid #cadaed;
    border-radius: 999px;
    color: #185f9d;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .14em;
    padding: 6px 10px;
}
.admin-page .sidebar {
    background: #202e4c;
    border-right-color: #202e4c;
    overflow-y: auto;
}
.admin-page .brand-logo {
    background: #fff;
    border-radius: 6px;
    padding: 6px;
}
.admin-page .workspace-label,
.admin-page .sidebar nav a,
.admin-page .profile small {
    color: #9fb1ce;
}
.admin-page .sidebar nav {
    gap: 3px;
}
.admin-page .sidebar nav a {
    padding: 8px 12px;
}
.admin-page .sidebar nav a:hover {
    background: #2a3d63;
    color: #fff;
}
.admin-page .sidebar nav a.active {
    background: linear-gradient(100deg, #1267b3, #178bc4);
    color: #fff;
}
.admin-page .sidebar-bottom {
    padding-top: 20px;
}
.admin-page .profile {
    border-color: #405275;
    color: #fff;
}
.admin-page .avatar {
    background: #fff;
    color: #245c9a;
}
.admin-page .logout-button {
    background: transparent;
    border-color: #506383;
    color: #d6e2f4;
}
.admin-page .logout-button:hover {
    background: #2a3d63;
    color: #fff;
}
.admin-page .topbar {
    border-bottom-color: #d8e2ef;
    box-shadow: 0 2px 10px #1734580a;
}
.admin-page .main-content {
    background: #f2f5f9;
}
.admin-heading {
    border-bottom: 1px solid #d9e2ed;
    padding-bottom: 24px;
}
.admin-search {
    max-width: 560px;
}
.admin-table-panel {
    overflow: hidden;
    padding: 0;
}
.admin-table-heading {
    align-items: center;
    border-bottom: 1px solid #e0e7f0;
    display: flex;
    justify-content: space-between;
    padding: 20px 24px;
}
.admin-table-heading h2 {
    font-size: 16px;
    letter-spacing: -.02em;
    margin: 0 0 3px;
}
.admin-table-heading p {
    margin: 0;
}
.admin-table th {
    background: #f7f9fc;
    color: #71809a;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .08em;
    padding: 12px 20px;
    text-transform: uppercase;
}
.admin-table td {
    padding: 16px 20px;
    vertical-align: middle;
}
.admin-table tbody tr:hover {
    background: #fafcff;
}
.admin-user {
    align-items: center;
    display: flex;
    gap: 11px;
    min-width: 190px;
}
.admin-user .avatar {
    flex: 0 0 34px;
}
.admin-user strong,
.admin-user small {
    display: block;
}
.admin-user strong {
    font-size: 12px;
    margin-bottom: 2px;
}
.admin-user small,
.admin-date,
.admin-protected {
    color: #7a879b;
    font-size: 10px;
}
.status-badge {
    border-radius: 999px;
    display: inline-flex;
    font-size: 9px;
    font-weight: 650;
    padding: 5px 8px;
    white-space: nowrap;
}
.role-admin { background: #e9e8fb; color: #5852a0; }
.role-customer { background: #eaf2fb; color: #306795; }
.status-active { background: #e8f5ec; color: #367649; }
.status-pending { background: #fff4da; color: #8b671d; }
.status-suspended { background: #fbe9e7; color: #a14b43; }
.admin-actions-column {
    text-align: right;
}
.admin-user-action {
    display: inline-block;
}
.admin-user-action .button {
    font-size: 10px;
    min-width: 78px;
    padding: 7px 11px;
}
.button.danger {
    background: #fff;
    border-color: #e6c7c4;
    box-shadow: none;
    color: #9b4c44;
}
.button.danger:hover {
    background: #fff5f4;
}
.admin-secondary {
    color: #7a879b;
    display: block;
    font-size: 10px;
    margin-top: 3px;
}
.admin-reference {
    color: #526783;
    display: inline-block;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 9px;
    max-width: 190px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.admin-message {
    color: #5d6d83;
    display: block;
    max-width: 320px;
    white-space: normal;
}
.admin-inline-action {
    align-items: center;
    display: inline-flex;
    gap: 7px;
}
.admin-inline-action select {
    margin: 0;
    min-width: 135px;
    padding: 7px 9px;
}
.admin-inline-action .button {
    padding: 7px 10px;
}
.admin-card-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.plans-admin-grid {
    grid-template-columns: 1fr;
}
.admin-manage-card {
    margin: 0;
}
.admin-card-header {
    align-items: flex-start;
    display: flex;
    gap: 20px;
    justify-content: space-between;
    margin-bottom: 22px;
}
.admin-card-header h2 {
    font-size: 17px;
    margin: 10px 0 4px;
}
.admin-card-header p {
    margin: 0;
}
.admin-edit-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.admin-edit-grid label {
    margin: 0;
}
.admin-edit-grid .button {
    align-self: end;
    justify-self: start;
}
.plan-edit-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.admin-upload-row {
    align-items: end;
    border-top: 1px solid #e7ebf1;
    display: flex;
    gap: 12px;
    margin-top: 20px;
    padding-top: 18px;
}
.admin-upload-row label {
    flex: 1;
    margin: 0;
}
.admin-request-card {
    margin-bottom: 16px;
}
.admin-request-copy {
    background: #f7f9fc;
    border: 1px solid #e4e9f0;
    border-radius: 7px;
    color: #4e5e73;
    line-height: 1.7;
    margin-bottom: 20px;
    padding: 16px;
    white-space: pre-wrap;
}
.admin-request-form {
    align-items: end;
    display: grid;
    gap: 14px;
    grid-template-columns: 190px minmax(280px, 1fr) auto;
}
.admin-request-form label {
    margin: 0;
}

@media (max-width: 900px) {
    .admin-page .sidebar { display: none; }
    .admin-page .main-shell { margin-left: 0; width: 100%; }
    .admin-page .mobile-menu { display: block; }
    .admin-page.nav-open .sidebar {
        box-shadow: 0 0 0 100vw #14213f66;
        display: flex;
        top: 65px;
        width: 250px;
    }
    .admin-page .topbar {
        gap: 15px;
        justify-content: flex-start;
    }
    .admin-page .admin-badge { margin-left: auto; }
    .admin-card-grid { grid-template-columns: 1fr; }
    .plan-edit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .admin-request-form { grid-template-columns: 1fr; }
    .admin-request-form .button { justify-self: start; }
}

@media (max-width: 700px) {
    .admin-page .main-content { padding: 22px 14px; }
    .admin-heading { padding-bottom: 16px; }
    .admin-heading h1 { font-size: 27px; }
    .admin-search { max-width: none; }
    .admin-table-panel { background: transparent; border: 0; }
    .admin-table-heading { background: #fff; border: 1px solid #e0e7f0; border-radius: 9px; margin-bottom: 10px; }
    .admin-table thead { display: none; }
    .admin-table,
    .admin-table tbody,
    .admin-table tr,
    .admin-table td { display: block; width: 100%; }
    .admin-table tr {
        background: #fff;
        border: 1px solid #e0e7f0;
        border-radius: 9px;
        margin-bottom: 10px;
        padding: 10px 16px;
    }
    .admin-table td {
        align-items: center;
        border-bottom: 1px solid #edf1f6;
        display: flex;
        justify-content: space-between;
        padding: 10px 0;
        text-align: right;
    }
    .admin-table td::before {
        color: #8390a3;
        content: attr(data-label);
        font-size: 9px;
        font-weight: 700;
        letter-spacing: .06em;
        text-transform: uppercase;
    }
    .admin-table td:first-child { align-items: flex-start; }
    .admin-table td:last-child { border-bottom: 0; }
    .admin-user { min-width: 0; text-align: left; }
    .admin-inline-action { align-items: stretch; flex-direction: column; width: 150px; }
    .admin-edit-grid,
    .plan-edit-grid { grid-template-columns: 1fr; }
    .admin-upload-row { align-items: stretch; flex-direction: column; }
    .admin-card-header { gap: 12px; }
}

@media (max-width: 700px) {
    .nav-open .sidebar {
        bottom: 0;
        height: auto;
        max-height: calc(100vh - 65px);
        overflow-y: auto;
    }
    .topbar-actions { gap: 5px; }
    .topbar-actions .top-help { display: none; }
    .top-account { padding: 8px 10px; }
    .top-account span:last-child { display: none; }
    .top-logout { padding: 8px 10px; }
}

/* Public Builder landing page */
.landing { color: var(--ink); }
.landing header {
    background: #fff;
    padding: 22px max(24px, 6vw);
    position: sticky;
    top: 0;
    z-index: 10;
}
.landing header nav { align-items: center; }
.landing-main { padding: 0; text-align: left; }
.landing-hero {
    background: radial-gradient(circle at 82% 18%, #dceffc 0, transparent 28%), linear-gradient(180deg, #f8fbff, #eef5fd);
    overflow: hidden;
    padding: 82px 6vw 42px;
    text-align: center;
}
.landing-hero h1 { margin-bottom: 22px; }
.landing-hero > p {
    color: #61758f;
    font-size: 16px;
    margin: 0 auto 26px;
}
.landing-actions {
    align-items: center;
    display: flex;
    gap: 22px;
    justify-content: center;
}
.landing-link { color: #315d8b; font-size: 12px; font-weight: 600; }
.landing-hero > small { display: block; margin-top: 14px; }
.landing-section {
    margin: 0 auto;
    max-width: 1180px;
    padding: 92px 40px;
}
.landing-section-heading {
    margin: 0 auto 42px;
    max-width: 650px;
    text-align: center;
}
.landing-section-heading h2,
.landing-benefit-copy h2,
.landing-cta h2 {
    font-size: clamp(30px, 4vw, 45px);
    line-height: 1.18;
    margin-bottom: 14px;
}
.landing-section-heading p,
.landing-benefit-copy p,
.landing-cta p {
    color: #687b94;
    font-size: 14px;
}
.landing-steps {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(3, 1fr);
}
.landing-steps article,
.landing-benefit-grid article,
.landing-plan {
    background: #fff;
    border: 1px solid #dfe8f2;
    border-radius: 12px;
    padding: 28px;
}
.landing-steps article > span {
    color: #2589c5;
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .14em;
    margin-bottom: 40px;
}
.landing-steps h3,
.landing-benefit-grid h3 { color: #293b59; font-size: 17px; letter-spacing: -.02em; }
.landing-steps p,
.landing-benefit-grid p { color: #6c7e96; font-size: 12px; margin: 0; }
.landing-benefits {
    align-items: center;
    background: linear-gradient(120deg, #eef4fc, #eaf8fc);
    border-radius: 18px;
    display: grid;
    gap: 60px;
    grid-template-columns: .8fr 1.2fr;
    max-width: 1100px;
    padding: 65px;
}
.landing-benefit-copy > a { color: #176cad; font-size: 12px; font-weight: 700; }
.landing-benefit-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(2, 1fr);
}
.landing-benefit-grid article { padding: 22px; }
.landing-benefit-grid article > span {
    color: #1680bd;
    display: block;
    font-size: 23px;
    margin-bottom: 18px;
}
.landing-plan-grid {
    align-items: stretch;
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(3, 1fr);
}
.landing-plan { display: flex; flex-direction: column; position: relative; }
.landing-plan.featured {
    border-color: #2384bd;
    box-shadow: 0 16px 45px #1d68a31a;
    transform: translateY(-8px);
}
.landing-plan-label {
    background: var(--brand-gradient);
    border-radius: 20px;
    color: #fff;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .12em;
    padding: 6px 10px;
    position: absolute;
    right: 18px;
    top: 18px;
}
.landing-plan-price {
    color: #223753;
    font-family: Manrope, sans-serif;
    font-size: 34px;
    font-weight: 650;
    margin: 18px 0;
}
.landing-plan-price small { font-family: 'DM Sans', sans-serif; font-weight: 400; }
.landing-plan ul {
    color: #647790;
    flex: 1;
    font-size: 12px;
    line-height: 2;
    margin: 0 0 24px;
    padding-left: 18px;
}
.landing-cta {
    align-items: center;
    background: var(--brand-gradient);
    border-radius: 18px;
    color: #fff;
    display: flex;
    gap: 40px;
    justify-content: space-between;
    margin: 20px auto 90px;
    max-width: 1100px;
    padding: 55px 60px;
}
.landing-cta .eyebrow,
.landing-cta h2 { color: #fff; }
.landing-cta p { color: #d9edff; margin: 0; }
.landing-cta .button { background: #fff; border-color: #fff; color: #1766a7; flex-shrink: 0; }
.landing-footer {
    align-items: center;
    background: #fff;
    border-top: 1px solid #dce6f3;
    display: grid;
    gap: 20px;
    grid-template-columns: 190px 1fr auto;
    padding: 45px 6vw 28px;
}
.landing-footer p { color: #718198; font-size: 11px; margin: 0; }
.landing-footer nav { display: flex; gap: 24px; font-size: 11px; }
.landing-footer > small { grid-column: 1 / -1; }

@media (max-width: 850px) {
    .landing header nav > a:not(.button):not([href="/login"]) { display: none; }
    .landing-benefits { gap: 35px; grid-template-columns: 1fr; margin-left: 20px; margin-right: 20px; padding: 45px; }
    .landing-plan-grid { grid-template-columns: 1fr; }
    .landing-plan.featured { transform: none; }
    .landing-footer { grid-template-columns: 170px 1fr; }
    .landing-footer nav { grid-column: 1 / -1; }
}

@media (max-width: 700px) {
    .landing-hero { padding: 58px 20px 30px; }
    .landing-hero h1 { font-size: 46px; }
    .landing-hero > p { font-size: 14px; }
    .landing-actions { flex-direction: column; gap: 14px; }
    .landing-section { padding: 68px 20px; }
    .landing-steps { grid-template-columns: 1fr; }
    .landing-steps article > span { margin-bottom: 20px; }
    .landing-benefits { margin: 0 14px; padding: 35px 24px; }
    .landing-benefit-grid { grid-template-columns: 1fr; }
    .landing-cta { align-items: flex-start; border-radius: 0; flex-direction: column; margin-bottom: 0; padding: 50px 24px; }
    .landing-footer { grid-template-columns: 1fr; padding: 38px 24px 25px; }
    .landing-footer nav { grid-column: auto; flex-wrap: wrap; }
    .landing-footer > small { grid-column: auto; }
}

@media (max-width: 430px) {
    .landing header nav > a[href="/login"] { display: none; }
    .landing-hero h1 { font-size: 40px; }
}

/* Editorial landing direction, aligned with the NetTwelve studio identity. */
.landing-editorial { background: #f6f8fb; }
.landing-editorial .landing-nav {
    border-bottom: 1px solid #d8e1ec;
    padding: 18px 5vw;
    position: relative;
}
.landing-editorial .landing-nav nav { gap: clamp(16px, 2.5vw, 38px); }
.landing-editorial .landing-nav nav > a { font-size: 11px; }
.landing-editorial .landing-nav .button { border-radius: 0; padding: 10px 16px; }
.editorial-main { padding: 0; text-align: left; }
.editorial-kicker {
    color: #246eaa;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .18em;
    margin-bottom: 24px;
}
.editorial-hero { padding: 80px 5vw 0; }
.editorial-hero-copy { margin: 0 auto; max-width: 1240px; }
.editorial-hero h1 {
    color: #192943;
    font-size: clamp(55px, 7.5vw, 112px);
    font-weight: 550;
    letter-spacing: -.075em;
    line-height: .94;
    margin: 0;
}
.editorial-hero h1 em {
    background: none;
    color: #2c84bd;
    font-family: Georgia, serif;
    font-weight: 400;
    -webkit-text-fill-color: currentColor;
}
.editorial-hero-bottom {
    align-items: end;
    display: grid;
    gap: 40px;
    grid-template-columns: 1fr auto;
    margin: 42px 0 58px auto;
    max-width: 700px;
}
.editorial-hero-bottom > p { color: #65768b; font-size: 14px; margin: 0; max-width: 420px; }
.editorial-hero-bottom > div { align-items: flex-start; display: flex; flex-direction: column; }
.editorial-hero-bottom .button,
.editorial-closing .button { border-radius: 0; justify-content: space-between; min-width: 190px; }
.editorial-hero-bottom small { margin-top: 9px; }
.editorial-showcase {
    align-items: end;
    display: grid;
    gap: 22px;
    grid-template-columns: minmax(0, 1.65fr) minmax(260px, .7fr);
    margin: 0 auto;
    max-width: 1280px;
}
.editorial-showcase figure { margin: 0; }
.editorial-showcase img {
    background: #e7edf5;
    display: block;
    height: auto;
    width: 100%;
}
.showcase-side { padding-bottom: 54px; }
.editorial-showcase figcaption {
    display: flex;
    justify-content: space-between;
    padding-top: 12px;
}
.editorial-showcase figcaption span:first-child { color: #263854; font-size: 12px; font-weight: 600; }
.editorial-showcase figcaption span:last-child { color: #8592a4; font-size: 8px; letter-spacing: .1em; }
.editorial-statement {
    background: #182944;
    color: #fff;
    margin-top: 100px;
    padding: 105px 8vw;
}
.editorial-statement p { color: #61bde5; font-size: 9px; letter-spacing: .2em; }
.editorial-statement h2 {
    font-size: clamp(38px, 5.4vw, 76px);
    font-weight: 450;
    letter-spacing: -.06em;
    line-height: 1.08;
    margin: 50px 0 0 20%;
    max-width: 900px;
}
.editorial-process {
    display: grid;
    gap: 8vw;
    grid-template-columns: .8fr 1.3fr;
    margin: 0 auto;
    max-width: 1240px;
    padding: 120px 5vw;
}
.editorial-intro { position: sticky; top: 40px; align-self: start; }
.editorial-intro h2,
.details-lead h2,
.plans-heading h2 {
    color: #1d304d;
    font-size: clamp(34px, 4vw, 55px);
    font-weight: 550;
    line-height: 1.08;
}
.editorial-intro > p:last-child { color: #68798f; font-size: 13px; max-width: 310px; }
.process-list { list-style: none; margin: 0; padding: 0; }
.process-list li {
    border-top: 1px solid #cfd9e5;
    display: grid;
    gap: 18px;
    grid-template-columns: 42px minmax(160px, .8fr) 1.2fr;
    padding: 32px 0 48px;
}
.process-list li > span { color: #2180bc; font-size: 10px; font-weight: 700; }
.process-list h3 { color: #263a57; font-size: 18px; letter-spacing: -.03em; }
.process-list p { color: #6a7a8e; font-size: 12px; margin: 0; }
.process-list a { color: #176ca9; font-size: 10px; grid-column: 3; font-weight: 700; }
.editorial-details {
    background: #e7f2fa;
    display: grid;
    gap: 8vw;
    grid-template-columns: 1fr 1.15fr;
    padding: 105px 8vw;
}
.details-list { border-top: 1px solid #b9cedf; }
.details-list > div {
    border-bottom: 1px solid #b9cedf;
    display: grid;
    gap: 25px;
    grid-template-columns: .8fr 1fr;
    padding: 25px 0;
}
.details-list h3 { color: #263a57; font-size: 15px; margin: 0; }
.details-list p { color: #62778d; font-size: 11px; margin: 0; }
.editorial-plans {
    display: grid;
    gap: 7vw;
    grid-template-columns: .7fr 1.3fr;
    margin: 0 auto;
    max-width: 1240px;
    padding: 120px 5vw;
}
.plans-table { border-top: 1px solid #cfd9e5; }
.plans-table article {
    align-items: center;
    border-bottom: 1px solid #cfd9e5;
    display: grid;
    gap: 25px;
    grid-template-columns: .7fr 1.2fr .55fr auto;
    padding: 28px 0;
}
.plan-name { align-items: baseline; display: flex; gap: 18px; }
.plan-name span { color: #2a83ba; font-size: 9px; }
.plan-name h3 { color: #233651; font-size: 20px; margin: 0; }
.plans-table article > p { color: #738196; font-size: 10px; margin: 0; }
.plan-cost strong { color: #243853; display: block; font-size: 18px; }
.plan-cost small { font-size: 8px; }
.plans-table article > a { color: #176ca9; font-size: 10px; font-weight: 700; white-space: nowrap; }
.editorial-closing {
    background: linear-gradient(125deg, #20448a, #087eae);
    color: #fff;
    padding: 110px 8vw;
}
.editorial-closing .editorial-kicker { color: #a9e1f5; }
.editorial-closing h2 {
    color: #fff;
    font-size: clamp(42px, 6vw, 82px);
    font-weight: 500;
    letter-spacing: -.065em;
    line-height: 1;
    margin-bottom: 45px;
    max-width: 950px;
}
.editorial-closing .button { background: #fff; border-color: #fff; color: #145f99; }
.editorial-footer {
    background: #122138;
    color: #d8e3f0;
    display: grid;
    gap: 45px;
    grid-template-columns: 1fr auto;
    padding: 65px 8vw 30px;
}
.editorial-footer .wordmark { background: #fff; border-radius: 4px; padding: 7px; width: 175px; }
.editorial-footer p { color: #92a8c1; font-size: 10px; margin: 15px 0 0; }
.editorial-footer nav { display: flex; gap: 28px; font-size: 10px; }
.editorial-footer > small { border-top: 1px solid #31435c; grid-column: 1 / -1; padding-top: 25px; }

@media (max-width: 850px) {
    .landing-editorial .landing-nav nav > a:not(.button):not([href="/login"]) { display: none; }
    .editorial-statement h2 { margin-left: 0; }
    .editorial-process,
    .editorial-plans { gap: 55px; grid-template-columns: 1fr; }
    .editorial-intro { position: static; }
    .editorial-details { grid-template-columns: 1fr; }
    .plans-table article { grid-template-columns: .65fr 1fr .5fr; }
    .plans-table article > p { display: none; }
}

@media (max-width: 700px) {
    .landing-editorial .landing-nav { padding: 15px 18px; }
    .editorial-hero { padding: 60px 20px 0; }
    .editorial-hero h1 { font-size: clamp(46px, 14vw, 64px); }
    .editorial-hero-bottom { align-items: start; grid-template-columns: 1fr; margin: 32px 0 45px; }
    .editorial-showcase { grid-template-columns: 1fr; }
    .showcase-side { display: none; }
    .editorial-statement { margin-top: 70px; padding: 75px 24px; }
    .editorial-process,
    .editorial-plans { padding: 80px 24px; }
    .process-list li { grid-template-columns: 32px 1fr; }
    .process-list li > p,
    .process-list li > a { grid-column: 2; }
    .editorial-details { padding: 75px 24px; }
    .details-list > div { grid-template-columns: 1fr; }
    .plans-table article { align-items: start; grid-template-columns: 1fr auto; }
    .plan-name { grid-column: 1; }
    .plans-table article > a { grid-column: 1 / -1; }
    .editorial-closing { padding: 80px 24px; }
    .editorial-footer { grid-template-columns: 1fr; padding: 50px 24px 25px; }
    .editorial-footer nav { flex-wrap: wrap; }
    .editorial-footer > small { grid-column: auto; }
}

@media (max-width: 430px) {
    .landing-editorial .landing-nav nav > a[href="/login"] { display: none; }
}

/* Product-led landing page: NetTwelve identity with a clear builder journey. */
.product-landing { background: #f4f8ff; color: #17253c; }
.product-landing .product-nav {
    --landing-nav-height: 80px;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 1px solid #ffffff70;
    height: var(--landing-nav-height);
    margin-bottom: calc(-1 * var(--landing-nav-height));
    padding: 12px 4vw;
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 20;
}
.product-landing .product-nav.is-scrolled {
    background: rgba(247, 250, 255, .82);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom-color: #dce7f4b8;
}
.product-nav nav { align-items: center; gap: clamp(16px, 2.2vw, 34px); }
.product-nav nav a { color: #34445c; font-size: 11px; }
.product-nav nav .login-trigger { background: none; border: 0; color: #34445c; font-size: 11px; padding: 0; }
.product-nav-cta,
.product-primary {
    background: var(--brand-gradient);
    border: 1px solid #1466ab;
    border-radius: 6px;
    color: #fff !important;
    display: inline-flex;
    font-size: 12px;
    font-weight: 650;
    justify-content: center;
    padding: 12px 22px;
}
.product-nav-cta:hover,
.product-primary:hover { filter: brightness(1.08); }
.landing.product-landing main.product-main {
    background: #fff;
    padding: 0;
    text-align: left;
}
.product-label {
    color: #2875ad;
    font-size: 9px;
    font-weight: 750;
    letter-spacing: .16em;
}
.product-hero {
    background:
        radial-gradient(circle at 10% 12%, #dceeff 0, transparent 38%),
        radial-gradient(circle at 90% 8%, #eee5ff 0, transparent 36%),
        radial-gradient(circle at 78% 82%, #ffeaf2 0, transparent 40%),
        #f7faff;
    overflow: hidden;
    padding: 150px 4vw 0;
    text-align: center;
}
.product-landing #builder,
.product-landing #pricing,
.product-landing #support { scroll-margin-top: 100px; }
.product-hero h1 {
    color: #14243d;
    font-size: clamp(52px, 6.5vw, 94px);
    font-weight: 580;
    letter-spacing: -.065em;
    line-height: .98;
    margin: 20px auto 24px;
}
.product-hero-copy {
    color: #596b82;
    font-size: 15px;
    margin: 0 auto 27px;
    max-width: 610px;
}
.product-actions { align-items: center; display: flex; gap: 25px; justify-content: center; }
.product-text-link { color: #1a5f96; font-size: 12px; font-weight: 650; }
.product-text-link span { margin-left: 12px; }
.product-hero > small { display: block; margin-top: 11px; }
.product-hero-visual {
    height: min(38vw, 510px);
    margin: 55px auto 0;
    max-width: 1220px;
    position: relative;
}
.hero-browser {
    background: transparent;
    border: 0;
    border-radius: 8px;
    box-shadow: 0 25px 70px #264f7924;
    overflow: hidden;
    padding-top: 0;
    position: absolute;
    transform-origin: top left;
}
.hero-browser > span {
    display: none;
}
.hero-browser img { display: block; width: 100%; }
.hero-browser-main { left: 20%; top: 0; width: 60%; z-index: 2; }
.hero-browser-left { left: 0; top: 16%; width: 35%; z-index: 1; }
.hero-browser-right { left: 66%; top: 22%; width: 34%; z-index: 1; }
.product-trust-line {
    border-bottom: 1px solid #e1e7ee;
    border-top: 1px solid #e1e7ee;
    display: flex;
    font-size: 11px;
    gap: 55px;
    justify-content: center;
    padding: 22px 4vw;
}
.product-trust-line span { color: #6b788a; }
.product-split {
    align-items: center;
    display: grid;
    gap: 7vw;
    grid-template-columns: .8fr 1.2fr;
    margin: 0 auto;
    max-width: 1240px;
    padding: 110px 4vw;
}
.product-copy h2,
.product-section-heading h2,
.product-foundation h2,
.product-support h2,
.product-final h2 {
    color: #172842;
    font-size: clamp(34px, 4vw, 55px);
    font-weight: 580;
    letter-spacing: -.052em;
    line-height: 1.08;
}
.product-copy > p:not(.product-label) { color: #66768b; font-size: 13px; }
.product-copy ul { color: #42546c; font-size: 12px; line-height: 2.2; margin: 25px 0 30px; padding-left: 18px; }
.builder-demo { border: 1px solid #cfdae7; border-radius: 10px; box-shadow: 0 24px 65px #244a701c; overflow: hidden; }
.builder-demo-bar {
    align-items: center;
    background: #fff;
    border-bottom: 1px solid #e0e7ef;
    display: flex;
    gap: 6px;
    height: 44px;
    padding: 0 13px;
}
.builder-demo-bar i { background: #d5dde7; border-radius: 50%; height: 6px; width: 6px; }
.builder-demo-bar span { color: #66778c; font-size: 8px; margin-left: 12px; }
.builder-demo-bar b { background: #126bb2; border-radius: 4px; color: #fff; font-size: 8px; margin-left: auto; padding: 6px 9px; }
.builder-demo-body { display: grid; grid-template-columns: 30% 70%; min-height: 390px; }
.builder-demo-panel { background: #f7f9fc; border-right: 1px solid #dce4ed; padding: 25px 18px; }
.builder-demo-panel > strong { display: block; font-size: 11px; margin-bottom: 25px; }
.builder-demo-panel label { color: #6c7b8e; font-size: 8px; margin-bottom: 16px; }
.builder-demo-panel label span { background: #fff; border: 1px solid #d8e1eb; border-radius: 3px; color: #334861; display: block; font-size: 8px; margin-top: 5px; padding: 8px; }
.builder-demo-preview { align-items: center; background: #e9eef5; display: flex; padding: 28px; }
.builder-demo-preview img { box-shadow: 0 8px 25px #17324f1c; width: 100%; }
.product-templates { background: #f2f6fb; padding: 100px 4vw; }
.product-section-heading {
    align-items: end;
    display: flex;
    justify-content: space-between;
    margin: 0 auto 38px;
    max-width: 1180px;
}
.product-section-heading h2 { margin: 10px 0 0; }
.product-section-heading > p { color: #65768b; font-size: 12px; max-width: 300px; }
.product-template-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(3, 1fr);
    margin: 0 auto;
    max-width: 1180px;
}
.product-template-grid a { min-width: 0; }
.product-template-grid img { background: #fff; border: 1px solid #d9e2ec; border-radius: 8px; display: block; width: 100%; }
.product-template-grid a > span { color: #788697; display: flex; font-size: 9px; justify-content: space-between; padding-top: 12px; }
.product-template-grid strong { color: #263951; font-size: 12px; }
.product-foundation { background: linear-gradient(115deg, #142b4b 0%, #184a76 58%, #116b9a 100%); color: #fff; padding: 100px 6vw; }
.product-foundation-heading { max-width: 750px; }
.product-foundation .product-label { color: #fff; }
.product-foundation h2 { color: #fff; }
.product-foundation-list { border-top: 1px solid #ffffff38; display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 55px; }
.product-foundation-list article { border-right: 1px solid #ffffff38; padding: 25px 25px 5px 0; }
.product-foundation-list article + article { padding-left: 25px; }
.product-foundation-list article:last-child { border-right: 0; }
.product-foundation-list span { color: #fff; font-size: 9px; }
.foundation-card-top { align-items: flex-start; display: flex; justify-content: space-between; min-height: 38px; }
.foundation-card-top svg { color: #fff; height: 30px; width: 30px; }
.product-foundation-list h3 { color: #fff; font-size: 16px; margin-top: 20px; }
.product-foundation-list p { color: #dce8f4; font-size: 11px; margin: 0; }
.product-pricing { margin: 0 auto; max-width: 1180px; padding: 110px 4vw; }
.pricing-currency-note { color: #52647a; font-size: 13px; margin: -2px 0 18px; }
.product-price-grid { border-left: 1px solid #d7e0ea; display: grid; grid-template-columns: repeat(3, 1fr); }
.product-price-grid article { border-bottom: 1px solid #d7e0ea; border-right: 1px solid #d7e0ea; border-top: 1px solid #d7e0ea; display: flex; flex-direction: column; padding: 30px; position: relative; }
.product-price-grid article.recommended { border-top: 3px solid #1683bd; padding-top: 28px; }
.price-note { color: #1677b2; font-size: 8px; font-weight: 750; letter-spacing: .1em; position: absolute; right: 22px; top: 20px; }
.product-price-grid h3 { font-size: 19px; }
.product-price-grid article > p { color: #758397; font-size: 10px; min-height: 42px; }
.product-price { margin: 18px 0 22px; }
.product-price strong { display: block; font-size: 32px; }
.product-price small { font-size: 9px; }
.product-price-grid ul { color: #52647a; flex: 1; font-size: 11px; line-height: 2.2; margin-bottom: 25px; padding-left: 18px; }
.product-price-grid article > a { background: var(--brand-gradient); border: 1px solid #1466ab; border-radius: 6px; color: #fff; font-size: 11px; font-weight: 650; padding: 10px; text-align: center; }
.product-price-grid article > a:hover { filter: brightness(1.08); }
.product-support {
    background: linear-gradient(115deg, #e4f2ff, #eef9fc);
    display: grid;
    gap: 9vw;
    grid-template-columns: 1.1fr .9fr;
    padding: 95px 8vw;
}
.product-support > div:last-child { align-self: end; }
.product-support > div:last-child p { color: #5c7087; font-size: 13px; margin-bottom: 28px; }
.product-primary.light { background: var(--brand-gradient); border-color: #1466ab; color: #fff !important; }
.product-final { padding: 110px 4vw; text-align: center; }
.product-final .product-primary { margin-top: 20px; }
.product-final small { display: block; margin-top: 11px; }
.product-footer {
    background: #14243d;
    border-top: 0;
    color: #fff;
    display: grid;
    gap: 34px;
    grid-template-columns: minmax(250px, .8fr) minmax(260px, .9fr) minmax(340px, 1.1fr);
    padding: 48px 6vw 24px;
}
.product-footer .wordmark {
    background: #fff;
    border-radius: 5px;
    padding: 7px;
    width: 175px;
}
.product-footer-brand p { color: #9eb0c7; font-size: 11px; margin: 16px 0 0; }
.product-footer-contact strong { display: block; font-size: 14px; margin-bottom: 9px; }
.product-footer-contact p { color: #9eb0c7; font-size: 12px; margin: 0 0 13px; }
.product-footer-contact a { color: #73c8ed; font-size: 12px; font-weight: 650; }
.product-footer-contact a span { margin-left: 7px; }
.product-footer-links {
    display: grid;
    gap: clamp(45px, 7vw, 100px);
    grid-template-columns: repeat(2, minmax(120px, 180px));
}
.product-footer-links nav { align-items: flex-start; display: flex; flex-direction: column; gap: 10px; min-width: 105px; }
.product-footer-links strong { color: #fff; font-size: 10px; margin-bottom: 5px; }
.product-footer-links a { color: #aebed0; font-size: 10px; }
.product-footer-links .login-trigger { background: none; border: 0; color: #aebed0; font-size: 10px; padding: 0; }
.product-footer-links a:hover { color: #fff; }
.product-footer-links .login-trigger:hover { color: #fff; }
.product-footer-links .footer-currency-switcher { align-items: center; flex-direction: row; gap: 8px; margin-top: 10px; }
.product-footer-links .footer-currency-switcher label { color: #aebed0; font-size: 11px; margin: 0; }
.product-footer-bottom {
    align-items: center;
    border-top: 1px solid #32435b;
    color: #8fa2b9;
    display: flex;
    font-size: 9px;
    flex-wrap: wrap;
    gap: 14px;
    grid-column: 1 / -1;
    justify-content: space-between;
    padding-top: 20px;
}
.product-footer-bottom small { color: inherit; }
.footer-currency-switcher { align-items: center; display: inline-flex; gap: 8px; margin: 0; white-space: nowrap; }
.footer-currency-switcher label { color: inherit; font-size: inherit; font-weight: 650; }
.footer-currency-switcher select { background: transparent; border: 1px solid #526985; border-radius: 6px; color: #e0edfa; cursor: pointer; font-size: 11px; padding: 5px 8px; }
.footer-currency-switcher option { color: #213451; }
.app-footer { align-items: center; flex-wrap: wrap; gap: 14px; }
.app-footer .footer-currency-switcher select { border-color: #c9d7e7; color: #526580; }

@media (max-width: 900px) {
    .product-nav nav > a:not(.product-nav-cta):not([href="/login"]) { display: none; }
    .product-split { gap: 45px; grid-template-columns: 1fr; }
    .product-foundation-list { grid-template-columns: repeat(2, 1fr); }
    .product-foundation-list article:nth-child(2) { border-right: 0; }
    .product-foundation-list article:nth-child(n+3) { border-top: 1px solid #ffffff38; }
    .product-footer { grid-template-columns: 1fr 1fr; }
    .product-footer-links { grid-column: 1 / -1; }
}

@media (max-width: 700px) {
    .product-landing .product-nav { --landing-nav-height: 72px; padding: 10px 18px; }
    .product-hero { padding: 120px 20px 0; }
    .product-hero h1 { font-size: 50px; }
    .product-actions { flex-direction: column; gap: 15px; }
    .product-hero-visual { height: 54vw; margin-top: 40px; }
    .hero-browser-main { left: 6%; width: 88%; }
    .hero-browser-left,
    .hero-browser-right { display: none; }
    .product-trust-line { align-items: center; flex-direction: column; gap: 5px; text-align: center; }
    .product-split { padding: 75px 20px; }
    .builder-demo-body { grid-template-columns: 1fr; min-height: 0; }
    .builder-demo-panel { display: none; }
    .builder-demo-preview { padding: 18px; }
    .product-templates { padding: 75px 20px; }
    .product-section-heading { align-items: start; flex-direction: column; gap: 20px; }
    .product-template-grid { grid-template-columns: 1fr; }
    .product-template-grid a:nth-child(n+3) { display: none; }
    .product-foundation { padding: 75px 24px; }
    .product-foundation-list { grid-template-columns: 1fr; }
    .product-foundation-list article,
    .product-foundation-list article + article { border-right: 0; border-top: 1px solid #ffffff38; padding: 25px 0; }
    .product-foundation-list article:first-child { border-top: 0; }
    .product-foundation-list h3 { margin-top: 18px; }
    .product-pricing { padding: 75px 20px; }
    .product-price-grid { grid-template-columns: 1fr; }
    .product-support { grid-template-columns: 1fr; padding: 75px 24px; }
    .product-final { padding: 80px 24px; }
    .product-footer { grid-template-columns: 1fr; padding: 45px 24px 25px; }
    .product-footer-links { gap: 24px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .product-footer-bottom { grid-column: auto; gap: 12px; }
}

@media (max-width: 430px) {
    .product-nav nav { gap: 10px; }
}

/* Homepage readability and consistency pass. */
.product-landing .product-nav nav a,
.public-template-page .product-nav nav a {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
}
.product-landing .product-nav nav .login-trigger,
.public-template-page .product-nav nav .login-trigger { font-size: 13px; font-weight: 600; line-height: 1.4; }
.product-landing .product-nav-cta,
.public-template-page .product-nav-cta {
    font-size: 13px;
    padding: 11px 20px;
}
.product-landing .product-label {
    color: #176ba7;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    line-height: 1.5;
    margin-bottom: 14px;
}
.product-landing .product-foundation .product-label { color: #fff; }
.product-landing .product-primary {
    font-size: 14px;
    padding: 13px 24px;
}
.product-landing .product-text-link {
    font-size: 14px;
}
.product-landing .product-hero-copy {
    font-size: 17px;
    line-height: 1.65;
}
.product-landing .product-hero > small,
.product-landing .product-final small {
    font-size: 11px;
}
.product-landing .product-trust-line {
    font-size: 13px;
    line-height: 1.5;
}
.product-landing .product-copy > p:not(.product-label) {
    font-size: 15px;
    line-height: 1.75;
}
.product-landing .product-copy ul {
    font-size: 14px;
    line-height: 2;
}
.product-landing .builder-demo-bar span,
.product-landing .builder-demo-bar b,
.product-landing .builder-demo-panel label,
.product-landing .builder-demo-panel label span {
    font-size: 9px;
}
.product-landing .product-section-heading > p {
    font-size: 14px;
    line-height: 1.65;
}
.product-landing .product-template-grid a > span {
    font-size: 11px;
    line-height: 1.5;
}
.product-landing .product-template-grid strong {
    font-size: 14px;
}
.product-landing .product-foundation-list span {
    font-size: 10px;
}
.product-landing .product-foundation-list h3 {
    font-size: 18px;
}
.product-landing .product-foundation-list p {
    font-size: 14px;
    line-height: 1.65;
}
.product-landing .price-note {
    font-size: 9px;
}
.product-landing .product-price-grid h3 {
    font-size: 21px;
}
.product-landing .product-price-grid article > p {
    font-size: 13px;
    line-height: 1.6;
    min-height: 62px;
}
.product-landing .product-price small {
    font-size: 11px;
}
.product-landing .product-price-grid ul {
    font-size: 13px;
    line-height: 1.9;
}
.product-landing .product-price-grid article > a {
    font-size: 13px;
    padding: 11px;
}
.product-landing .product-support > div:last-child p {
    font-size: 15px;
    line-height: 1.75;
}
.product-landing .product-footer-brand p {
    font-size: 13px;
    line-height: 1.6;
}
.product-landing .product-footer-links strong {
    font-size: 12px;
}
.product-landing .product-footer-links a {
    font-size: 12px;
    line-height: 1.5;
}
.product-landing .product-footer-links .login-trigger { font-size: 12px; line-height: 1.5; }
.product-landing .product-footer-bottom {
    font-size: 11px;
}

@media (max-width: 700px) {
    .product-landing .product-hero-copy { font-size: 16px; }
    .product-landing .product-trust-line { font-size: 12px; }
    .product-landing .product-footer-bottom { align-items: flex-start; flex-direction: column; }
}

/* Human support conversations */
.support-widget { bottom: 20px; position: fixed; right: 22px; z-index: 60; }
.support-widget > summary {
    align-items: center;
    background: linear-gradient(135deg, #2556aa, #0795c8);
    border: 0;
    border-radius: 50%;
    box-shadow: 0 8px 30px #173c6629;
    color: #fff;
    cursor: pointer;
    display: flex;
    height: 56px;
    justify-content: center;
    list-style: none;
    margin-left: auto;
    padding: 0;
    position: relative;
    width: 56px;
}
.support-widget > summary::-webkit-details-marker { display: none; }
.support-widget > summary:focus-visible { outline: 3px solid #b9e4ff; outline-offset: 3px; }
.support-launcher-icon { display: block; height: 28px; width: 28px; }
.support-widget > summary .support-unread-badge { position: absolute; right: -5px; top: -5px; }
.support-unread-badge {
    align-items: center;
    background: #ef4444;
    border-radius: 999px;
    color: #fff;
    display: inline-flex;
    font-size: 9px;
    font-weight: 750;
    height: 18px;
    justify-content: center;
    line-height: 1;
    min-width: 18px;
    padding: 0 5px;
}
.support-unread-badge[hidden] { display: none; }
.sidebar nav a .support-unread-badge { margin-left: auto; width: auto; }
.support-row-unread { background: #f0f7ff; }
.support-row-unread td:first-child { box-shadow: inset 3px 0 #1683bd; }
.support-widget-panel {
    background: #fff;
    border: 1px solid #d4e1ed;
    border-radius: 18px;
    bottom: 66px;
    box-shadow: 0 20px 70px #142c4930;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    position: absolute;
    right: 0;
    width: 380px;
}
.support-chat-header {
    align-items: center;
    background: linear-gradient(135deg, #203f83, #078fc3);
    color: #fff;
    display: flex;
    gap: 12px;
    padding: 19px 20px;
}
.support-chat-avatar {
    align-items: center;
    background: #fff;
    border: 2px solid #ffffff7a;
    border-radius: 50%;
    color: #1768a7;
    display: inline-flex;
    font-size: 15px;
    font-weight: 800;
    height: 42px;
    justify-content: center;
    width: 42px;
}
.support-chat-header strong { display: block; font-size: 16px; }
.support-chat-header small { align-items: center; color: #e9f8ff; display: flex; font-size: 11px; gap: 6px; margin-top: 3px; }
.support-chat-header small i { background: #57df91; border: 2px solid #ffffff4f; border-radius: 50%; height: 8px; width: 8px; }
.support-chat-body { background: #f5f8fb; padding: 20px; }
.support-welcome-bubble {
    background: #fff;
    border: 1px solid #dfe8f1;
    border-radius: 5px 14px 14px 14px;
    box-shadow: 0 5px 18px #203f8310;
    margin-bottom: 16px;
    max-width: 88%;
    padding: 13px 15px;
}
.support-welcome-bubble strong { color: #203550; display: block; font-size: 13px; }
.support-welcome-bubble p { color: #526980; font-size: 13px; line-height: 1.5; margin: 4px 0 0; }
.support-history-link {
    align-items: center;
    background: #e9f3fb;
    border: 1px solid #d2e4f3;
    border-radius: 11px;
    color: #176da8;
    display: grid;
    font-size: 12px;
    gap: 10px;
    grid-template-columns: auto 1fr auto;
    margin: 0 0 16px;
    padding: 11px 12px;
}
.support-history-link > span:first-child { font-size: 18px; }
.support-history-link strong { display: block; font-size: 12px; }
.support-history-link small { color: #6d8093; display: block; font-size: 10px; margin-top: 2px; }
.support-history-link b { font-size: 15px; }
.support-widget form { background: #fff; border: 1px solid #dfe8f1; border-radius: 14px; padding: 16px; }
.support-widget label { color: #40566d; font-size: 12px; font-weight: 650; margin-bottom: 13px; }
.support-widget input,
.support-widget select,
.support-widget textarea { background: #fbfcfe; border-color: #cfdae6; border-radius: 9px; font-size: 13px; margin-top: 6px; }
.support-widget textarea { line-height: 1.5; resize: vertical; }
.support-guest-fields { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }
.support-send-button { align-items: center; border-radius: 9px; display: flex; font-size: 13px; justify-content: center; margin-top: 3px; }
.support-send-button span { font-size: 16px; margin-left: 7px; }
.support-chat-note { color: #8291a1; display: block; font-size: 10px; line-height: 1.4; margin-top: 10px; text-align: center; }
.support-honeypot { height: 0 !important; left: -10000px; opacity: 0; padding: 0 !important; position: absolute; width: 0 !important; }
.support-thread-page { background: #edf3f8; min-height: 100vh; }
.support-thread-page > header { align-items: center; background: #fff; border-bottom: 1px solid #dce4ed; display: flex; justify-content: space-between; padding: 17px max(24px, 5vw); }
.support-thread-page > header .wordmark { width: 170px; }
.support-thread-page > header > a:last-child { color: #286a9e; font-size: 13px; font-weight: 650; }
.support-thread-page > main.support-conversation-main { margin: 0 auto; max-width: none; padding: 42px 24px; width: min(820px, 100%); }
.support-conversation-card { background: #fff; border: 1px solid #d7e2ed; border-radius: 18px; box-shadow: 0 18px 55px #183a5c12; overflow: hidden; }
.support-thread-heading { align-items: center; background: linear-gradient(135deg, #203f83, #078fc3); color: #fff; display: flex; justify-content: space-between; margin: 0; padding: 20px 24px; }
.support-thread-identity { align-items: center; display: flex; gap: 13px; }
.support-thread-avatar { align-items: center; background: #fff; border-radius: 50%; color: #1768a7; display: flex; font-weight: 800; height: 42px; justify-content: center; width: 42px; }
.support-thread-heading h1 { color: #fff; font-size: 18px; letter-spacing: -.02em; margin: 0; text-transform: capitalize; }
.support-thread-heading p { align-items: center; color: #e8f7ff; display: flex; font-size: 11px; gap: 6px; margin: 3px 0 0; }
.support-thread-heading p i { background: #57df91; border-radius: 50%; height: 7px; width: 7px; }
.support-thread-heading .status-badge { background: #ffffff24; color: #fff; }
.support-conversation-date { background: #f5f8fb; color: #8a98a7; font-size: 10px; padding: 13px 24px 5px; text-align: center; }
.support-messages { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.support-thread-page .support-messages { background: #f5f8fb; min-height: 340px; padding: 16px 24px 26px; }
.support-message { background: #fff; border: 1px solid #dce4ed; border-radius: 5px 14px 14px 14px; max-width: 72%; padding: 11px 14px; width: fit-content; }
.support-message.from-support { align-self: flex-start; border-left: 3px solid #1683bd; }
.support-message.from-customer { align-self: flex-end; background: #dff1fb; border-color: #c5e2f2; border-radius: 14px 5px 14px 14px; }
.support-message strong { color: #29415d; display: block; font-size: 10px; margin-bottom: 4px; }
.support-message p { color: #40546d; font-size: 14px; line-height: 1.5; margin: 0 0 5px; overflow-wrap: anywhere; white-space: pre-wrap; }
.support-message small { color: #8693a3; display: block; font-size: 9px; text-align: right; }
.support-typing-indicator {
    align-items: center;
    align-self: flex-start;
    color: #718096;
    display: flex;
    gap: 9px;
    padding: 3px 7px;
}
.support-typing-indicator[hidden] { display: none; }
.support-typing-indicator small { font-size: 10px; }
.support-typing-dots {
    align-items: center;
    background: #e8eef5;
    border-radius: 999px;
    display: flex;
    gap: 3px;
    padding: 8px 10px;
}
.support-typing-dots i {
    animation: support-typing 1.15s infinite ease-in-out;
    background: #6d8198;
    border-radius: 50%;
    height: 5px;
    width: 5px;
}
.support-typing-dots i:nth-child(2) { animation-delay: .14s; }
.support-typing-dots i:nth-child(3) { animation-delay: .28s; }
@keyframes support-typing {
    0%, 60%, 100% { opacity: .35; transform: translateY(0); }
    30% { opacity: 1; transform: translateY(-3px); }
}
.support-reply-form { align-items: end; background: #fff; border-top: 1px solid #dce4ed; display: grid; gap: 12px; grid-template-columns: 1fr auto; margin: 0; max-width: none; padding: 16px 20px 18px; }
.support-reply-form label { margin: 0; }
.support-reply-form textarea { background: #f8fafc; border-color: #cedbe7; border-radius: 11px; margin: 0; min-height: 70px; resize: none; }
.support-reply-form .button { border-radius: 6px; height: 44px; padding: 10px 18px; }
.support-resolved-note { background: #fff; border-top: 1px solid #dce4ed; color: #6d7f91; font-size: 12px; padding: 18px 22px; text-align: center; }
.sr-only { clip: rect(0, 0, 0, 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; }
.support-admin-layout { align-items: start; display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr) 330px; }
.support-admin-layout > .support-messages { background: #fff; border: 1px solid #e0e7f0; border-radius: 10px; min-height: 420px; padding: 24px; }
.support-admin-layout aside { position: sticky; top: 20px; }

@media (max-width: 800px) {
    .support-admin-layout { grid-template-columns: 1fr; }
    .support-admin-layout aside { position: static; }
}
@media (max-width: 500px) {
    .support-widget { bottom: 14px; right: 14px; }
    .support-widget-panel { max-width: calc(100vw - 28px); width: 380px; }
    .support-chat-body { padding: 15px; }
    .support-guest-fields { grid-template-columns: 1fr; }
    .support-thread-page > main.support-conversation-main { padding: 18px 12px; }
    .support-conversation-card { border-radius: 13px; }
    .support-thread-heading { padding: 16px; }
    .support-thread-page .support-messages { min-height: 300px; padding: 14px 14px 20px; }
    .support-message { max-width: 88%; }
    .support-reply-form { grid-template-columns: 1fr; padding: 13px; }
    .support-reply-form .button { width: 100%; }
}

/* Customer dashboard readability */
.customer-dashboard-page .dashboard-support-alert {
    align-items: center;
    background: #eaf5ff;
    border: 1px solid #bfdcf3;
    border-radius: 12px;
    color: #244364;
    display: flex;
    gap: 15px;
    margin-bottom: 28px;
    padding: 17px 20px;
}
.customer-dashboard-page .dashboard-support-alert:hover { background: #e3f1fd; }
.dashboard-support-alert-icon { color: #1377bd; font-size: 17px; }
.dashboard-support-alert strong,
.dashboard-support-alert small { display: block; }
.dashboard-support-alert strong { font-size: 15px; }
.dashboard-support-alert small { color: #5e7893; font-size: 12px; margin-top: 2px; }
.dashboard-support-alert b { color: #1b69a6; font-size: 12px; margin-left: auto; white-space: nowrap; }
.customer-dashboard-page .dashboard-site-actions,
.customer-dashboard-page .dashboard-site-actions.has-delete { align-items: center; display: flex; flex-direction: row; flex-wrap: wrap; gap: 7px; justify-content: flex-start; }
.customer-dashboard-page .dashboard-site-actions > * { align-items: center; display: inline-flex; flex: 0 0 38px; font-size: 12px; justify-content: center; height: 38px; min-height: 38px; padding: 0; width: 38px; }
.customer-dashboard-page .dashboard-site-actions .dashboard-site-edit { flex-basis: auto; gap: 6px; padding: 0 12px; width: auto; }
.customer-dashboard-page .dashboard-site-actions svg { display: block; flex: 0 0 17px; height: 17px; width: 17px; }
.customer-dashboard-page .dashboard-site-preview { background: #fff; border: 1px solid #cddded; border-radius: 6px; color: #1a68a5; font-weight: 650; }
.customer-dashboard-page .dashboard-site-preview:hover { background: #edf4fc; }
.customer-dashboard-page .website-grid + .stats { margin-top: 36px; }
.dashboard-site-delete { background: #fff; border: 1px solid #e6c8c8; border-radius: 6px; color: #a04747; font-size: 12px; font-weight: 650; }
.dashboard-site-delete svg { display: block; height: 18px; width: 18px; }
.dashboard-site-delete:hover { background: #fff5f5; border-color: #d7a8a8; }
.dashboard-delete-dialog { border-color: #dce6f1; color: #263451; }
.dashboard-delete-dialog h2 { font-size: 23px; margin-bottom: 12px; }
.dashboard-delete-dialog p { color: #61718a; font-size: 15px; line-height: 1.6; }
.dashboard-delete-dialog p strong { color: #263451; }
.dashboard-delete-dialog-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 24px; }
.dashboard-confirm-delete { background: #a64242; border-color: #a64242; }
.dashboard-confirm-delete:hover { background: #8e3535; }
.dashboard-archived-sites { background: #fff; border: 1px solid #dce6f1; border-radius: 12px; margin: 36px 0; padding: 18px 22px; }
.dashboard-archived-sites > summary { color: #344e6e; cursor: pointer; font-size: 15px; font-weight: 650; }
.dashboard-archived-sites > summary span { background: #e8eff8; border-radius: 5px; color: #55799e; font-size: 12px; margin-left: 6px; padding: 3px 7px; }
.dashboard-archived-row { align-items: center; border-top: 1px solid #e3eaf3; display: flex; gap: 15px; justify-content: space-between; padding: 15px 0; }
.dashboard-archived-row:first-child { margin-top: 18px; }
.dashboard-archived-row strong,
.dashboard-archived-row small { display: block; }
.dashboard-archived-row small { color: #6b7890; font-size: 12px; margin-top: 3px; }
.dashboard-archived-row form { margin: 0; }
body:not(.admin-page):not(.editor-page) .page-heading p { font-size: 15px; }
body:not(.admin-page):not(.editor-page) .welcome-banner p { font-size: 14px; line-height: 1.7; }
body:not(.admin-page):not(.editor-page) .welcome-banner a { font-size: 13px; }
body:not(.admin-page):not(.editor-page) .welcome-banner .pill.light { font-size: 10px; }
body:not(.admin-page):not(.editor-page) .stats div div > span { font-size: 12px; }
body:not(.admin-page):not(.editor-page) .section-heading h2 { font-size: 20px; }
body:not(.admin-page):not(.editor-page) .section-heading .muted { font-size: 12px; }
body:not(.admin-page):not(.editor-page) .site-details h3 { font-size: 17px; }
body:not(.admin-page):not(.editor-page) .site-details p { font-size: 13px; }
body:not(.admin-page):not(.editor-page) .site-meta { font-size: 11px; }
body:not(.admin-page):not(.editor-page) .card-actions .button { font-size: 12px; }
body:not(.admin-page):not(.editor-page) .new-site-card h3 { font-size: 17px; }
body:not(.admin-page):not(.editor-page) .new-site-card p { font-size: 13px; }
body:not(.admin-page):not(.editor-page) .new-site-card strong { font-size: 12px; }
body:not(.admin-page):not(.editor-page) .bottom-callout h3 { font-size: 15px; }
body:not(.admin-page):not(.editor-page) .bottom-callout p { font-size: 13px; }
body:not(.admin-page):not(.editor-page) .bottom-callout > a { font-size: 12px; }
body:not(.admin-page):not(.editor-page) .help-card strong { font-size: 13px; }
body:not(.admin-page):not(.editor-page) .help-card p { font-size: 12px; }
body:not(.admin-page):not(.editor-page) .help-card a { font-size: 11px; }

@media (max-width: 700px) {
    .dashboard-support-alert { align-items: flex-start !important; flex-wrap: wrap; }
    .dashboard-support-alert b { margin-left: 32px; }
    body:not(.admin-page):not(.editor-page) .stats div div > span { font-size: 11px; }
    body:not(.admin-page):not(.editor-page) .section-heading .muted { font-size: 11px; }
}

/* The editor uses the canvas width instead of the dashboard navigation. */
.editor-page .main-shell { margin-left: 0; width: 100%; }
.editor-page .main-content { margin: 0; max-width: none; padding: 18px 24px 40px; width: 100%; }
.editor-page .editor-heading {
    align-items: center;
    background: #f5f8fc;
    border-bottom: 1px solid #dce5f0;
    display: flex;
    flex-wrap: wrap;
    gap: 16px 24px;
    margin: -18px -24px 18px;
    padding: 15px 24px;
    position: sticky;
    top: 0;
    z-index: 15;
}
.editor-heading-main { flex: 1 1 190px; min-width: 0; }
.editor-back { color: #456587; display: inline-block; font-size: 12px; font-weight: 600; margin-bottom: 5px; }
.editor-back:hover { color: #1262ae; }
.editor-title-row { align-items: center; display: flex; flex-wrap: wrap; gap: 10px; }
.editor-page .editor-title-row h1 { font-size: 20px; line-height: 1.25; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.editor-title-row .pill { margin: 0; }
.editor-page .editor-actions { align-items: center; gap: 8px; justify-content: flex-end; }
.editor-page .editor-actions form, .editor-utility form { margin: 0; }
.editor-page .editor-actions .button { font-size: 12px; min-height: 38px; padding: 9px 13px; }
.editor-page #save-status { color: #637c91; font-size: 11px; margin: 0 4px; white-space: nowrap; }
.editor-panel-toggle {
    background: #fff;
    border: 1px solid #cbdcec;
    border-radius: 7px;
    color: #24669f;
    font-size: 12px;
    font-weight: 650;
    min-height: 38px;
    padding: 8px 12px;
}
.editor-panel-toggle:hover { background: #eef6fd; }
.editor-utility { align-items: center; border-left: 1px solid #dce5f0; display: flex; gap: 12px; padding-left: 18px; }
.editor-utility a, .editor-utility button { background: none; border: 0; color: #526b87; font-size: 11px; font-weight: 600; padding: 4px 0; white-space: nowrap; }
.editor-utility a:hover, .editor-utility button:hover { color: #1262ae; }
.editor-page .editor-workspace { height: clamp(620px, calc(100dvh - 145px), 960px); }
.editor-page .editor-controls { width: 320px; }
.editor-page .editor-workspace.controls-collapsed .editor-controls { display: none; }
.editor-page .editor-intro h3 { font-size: 16px; }
.editor-page .editor-intro p { font-size: 13px; }
.editor-page .editor-intro .editor-page-context { color: #1262ae; font-size: 11px; font-weight: 750; letter-spacing: .04em; margin: 12px 0 0; text-transform: uppercase; }
.editor-page .editor-controls summary { font-size: 13px; }
.editor-page .editor-controls details > summary > span:last-child:not(.editor-section-actions),
.editor-page .editor-controls .editor-section-actions > span:last-child { font-size: 0; }
.editor-page .editor-controls details > summary > span:last-child:not(.editor-section-actions)::before,
.editor-page .editor-controls .editor-section-actions > span:last-child::before { content: '+'; font-size: 17px; font-weight: 500; line-height: 1; }
.editor-page .editor-controls details[open] > summary > span:last-child:not(.editor-section-actions)::before,
.editor-page .editor-controls details[open] > summary .editor-section-actions > span:last-child::before { content: '−'; }
.editor-section-actions { align-items: center; display: inline-flex; gap: 10px; margin-left: auto; }
.editor-section-visibility { align-items: center; background: #edf6fd; border: 1px solid #c8dfef; border-radius: 6px; color: #1675b5; display: inline-flex; height: 28px; justify-content: center; padding: 0; width: 30px; }
.editor-section-visibility svg { fill: none; height: 16px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; width: 16px; }
.editor-section-visibility:hover { background: #dfedfa; border-color: #9fc9e7; }
.editor-section-visibility.is-hidden { background: #f5f6f8; border-color: #d9e0e7; color: #8290a0; }
.editor-page .field-group label.editor-visibility-field { display: none; }
.editor-page .field-group label { font-size: 12px; }
.editor-page .editor-section-appearance { background: #f7fafc; border: 1px solid #d8e4ee; border-radius: 9px; margin: 0 0 16px; overflow: visible; }
.editor-page .editor-section-appearance > summary { align-items: center; color: #38566f; display: flex; font-size: 11px; font-weight: 750; justify-content: space-between; min-height: 40px; padding: 9px 11px; }
.editor-page .editor-section-appearance > summary::marker { content: ''; }
.editor-page .editor-section-appearance > summary > span:last-child { color: #1262ae; font-size: 0; }
.editor-page .editor-section-appearance > summary > span:last-child::before { content: '+'; font-size: 16px; font-weight: 500; }
.editor-page .editor-section-appearance[open] > summary > span:last-child::before { content: '−'; }
.editor-page .editor-section-appearance-fields { border-top: 1px solid #dfe8f0; padding: 11px; }
.editor-page .editor-section-appearance-fields > label:last-child { margin-bottom: 0; }
.editor-inline-color { display: block; margin-top: 8px; }
.editor-inline-color-trigger { align-items: center; background: #f6f9fc; border: 1px solid #d5e2ed; border-radius: 6px; color: #536b82; display: inline-flex; font-size: 11px; font-weight: 750; gap: 6px; min-height: 28px; padding: 4px 8px; }
.editor-inline-color-trigger i { background: var(--text-color); border: 1px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px #c8d4df; height: 12px; width: 12px; }
.editor-inline-color-trigger:hover, .editor-inline-color-trigger[aria-expanded="true"] { background: #eaf4fc; border-color: #afd0e8; color: #1262ae; }
.editor-inline-color-panel { background: #f7fafc; border: 1px solid #d8e4ee; border-radius: 8px; display: grid; gap: 8px; margin-top: 6px; padding: 9px; }
.editor-inline-color-panel[hidden] { display: none; }
.editor-inline-color .editor-color-value { grid-template-columns: 34px 1fr; }
.editor-inline-color .editor-color-value > [data-color-preview] { height: 34px; width: 34px; }
.editor-page .editor-inline-color .editor-color-value > input { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; margin: 0; text-transform: uppercase; }
.editor-inline-color-panel > small { color: #667d92; font-size: 9px; font-weight: 750; letter-spacing: .05em; margin: 2px 0 -3px; text-transform: uppercase; }
.editor-page .editor-inline-color-panel > select { font-size: 11px; margin: 0; }
.editor-inline-color-swatches { display: flex; flex-wrap: wrap; gap: 7px; }
.editor-inline-color-swatches button { background: var(--swatch); border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px #c6d3de; height: 18px; padding: 0; width: 18px; }
.editor-inline-color-reset { background: none; border: 0; color: #276d9e; font-size: 9px; font-weight: 700; justify-self: start; padding: 0; }
.editor-inline-color.has-error .editor-inline-color-panel > input { border-color: #d77a70; }
.editor-page .field-group input, .editor-page .field-group textarea, .editor-page .field-group select { font-size: 13px; }
.editor-color-control { background: #f6f9fc; border: 1px solid #d7e3ee; border-radius: 9px; display: grid; gap: 11px; margin-top: 7px; padding: 11px; }
.editor-color-value { align-items: center; display: grid; gap: 9px; grid-template-columns: 38px 1fr; position: relative; }
.editor-color-value > [data-color-preview] { background: var(--editor-color); border: 2px solid #fff; border-radius: 7px; box-shadow: 0 0 0 1px #cbd8e4; cursor: pointer; display: block; height: 38px; padding: 0; width: 38px; }
.editor-color-value > [data-color-preview]:hover, .editor-color-value > [data-color-preview]:focus-visible { box-shadow: 0 0 0 2px #168bd2; }
.editor-custom-picker { background: #fff; border: 1px solid #cddbe7; border-radius: 10px; box-shadow: 0 16px 38px #173f4630; display: grid; gap: 10px; left: 0; padding: 11px; position: absolute; top: 46px; width: 238px; z-index: 40; }
.editor-custom-picker[hidden] { display: none; }
.editor-custom-picker-header { align-items: center; display: flex; justify-content: space-between; }
.editor-custom-picker-header strong { color: #3d566e; font-size: 10px; }
.editor-custom-picker-header button { align-items: center; background: #eef3f7; border: 0; border-radius: 50%; color: #647a8e; display: flex; font-size: 16px; height: 24px; justify-content: center; line-height: 1; padding: 0; width: 24px; }
.editor-color-spectrum { background-color: hsl(var(--picker-hue), 100%, 50%); background-image: linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, transparent); border-radius: 7px; cursor: crosshair; display: block; height: 145px; overflow: hidden; position: relative; width: 100%; }
.editor-color-spectrum > i { border: 2px solid #fff; border-radius: 50%; box-shadow: 0 1px 4px #0008; height: 14px; left: var(--picker-saturation); pointer-events: none; position: absolute; top: var(--picker-value); transform: translate(-50%, -50%); width: 14px; }
.editor-page .editor-hue-slider { appearance: none; background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); border: 0; border-radius: 6px; height: 12px; margin: 0; padding: 0; width: 100%; }
.editor-page .editor-hue-slider::-webkit-slider-thumb { appearance: none; background: #fff; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px #8496a6, 0 1px 4px #0004; height: 18px; width: 18px; }
.editor-page .editor-hue-slider::-moz-range-thumb { background: #fff; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px #8496a6, 0 1px 4px #0004; height: 14px; width: 14px; }
.editor-page .editor-color-value > input { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; font-weight: 650; letter-spacing: .04em; margin: 0; text-transform: uppercase; }
.editor-color-swatches { display: grid; gap: 6px; grid-template-columns: repeat(8, 1fr); }
.editor-color-swatches button { background: var(--swatch); border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px #c7d4e1; height: 20px; padding: 0; width: 20px; }
.editor-color-swatches button:hover { box-shadow: 0 0 0 2px #168bd2; transform: scale(1.08); }
.editor-color-reset { background: transparent; border: 0; color: #236fa8; font-size: 10px; font-weight: 700; justify-self: start; padding: 0; }
.editor-color-control.has-error { border-color: #d77a70; }
.editor-color-control.has-error .editor-color-value > input { border-color: #d77a70; }
.editor-page .field-group label.editor-field-selected { background: #eef7ff; border: 1px solid #9cccf0; border-radius: 8px; box-shadow: 0 0 0 3px #dff1ff; margin-left: -9px; margin-right: -9px; padding: 9px; transition: background .2s ease, border-color .2s ease, box-shadow .2s ease; }
.editor-page .iframe-wrap { padding: 16px; }
.editor-page #preview-page { background-color: #fff; }
.editor-page .device-switch button { align-items: center; display: inline-flex; gap: 5px; justify-content: center; }
.editor-page .device-switch button svg { fill: none; height: 14px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; width: 14px; }

@media (max-width: 1100px) {
    .editor-page .editor-actions { justify-content: flex-start; order: 3; width: 100%; }
    .editor-utility { margin-left: auto; }
}
@media (max-width: 700px) {
    .editor-page .main-content { padding: 12px 12px 30px; }
    .editor-page .editor-heading { margin: -12px -12px 12px; padding: 12px; position: static; }
    .editor-page .editor-title-row h1 { max-width: 66vw; }
    .editor-utility { border-left: 0; gap: 10px; padding-left: 0; }
    .editor-page .editor-actions { gap: 7px; }
    .editor-page .editor-actions .button, .editor-panel-toggle { font-size: 11px; min-height: 36px; padding: 8px 10px; }
    .editor-page #save-status { order: 5; width: 100%; }
    .editor-page .editor-workspace { height: auto; min-height: 0; }
    .editor-page .editor-controls { max-height: min(54dvh, 500px); width: 100%; }
    .editor-page .preview-area { height: clamp(420px, 65dvh, 600px); }
}

/* Public template browsing shares the landing navigation without workspace controls. */
.public-template-page .app-shell { flex-direction: column; }
.public-template-page .product-nav {
    align-items: center;
    background: transparent;
    border-bottom: 1px solid #dfe7f0;
    display: flex;
    gap: 28px;
    height: 80px;
    justify-content: space-between;
    padding: 12px 4vw;
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 20;
}
.public-template-page .product-nav.is-scrolled {
    background: rgba(247, 250, 255, .82);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}
.public-template-page .product-nav .wordmark { width: 190px; }
.public-template-page .product-nav nav { display: flex; gap: clamp(16px, 2.2vw, 34px); }
.public-template-page .product-nav nav a[aria-current="page"] { color: #1262ae; font-weight: 700; }
.public-template-page .main-shell { margin: 0; width: 100%; }
.public-template-page .main-content { margin: 0 auto; max-width: 1280px; padding: 48px 4vw 85px; width: 100%; }
.public-template-page .page-heading { margin-bottom: 28px; }
.public-template-page .public-template-intro { color: #3f668b; font-size: 14px; font-weight: 600; margin: 12px 0 0; }
.public-template-page .category-tabs { margin-bottom: 34px; }
.public-template-page .website-grid { gap: 22px; }
.public-template-footer {
    align-items: center;
    background: #14243d;
    color: #b5c5d8;
    display: flex;
    font-size: 12px;
    gap: 20px;
    justify-content: space-between;
    padding: 28px max(24px, 4vw);
    width: 100%;
}
.public-template-footer nav { display: flex; flex-wrap: wrap; gap: 22px; }
.public-template-footer a:hover { color: #fff; }
.legal-page { background: #f5f8fc; }
.legal-content { max-width: 900px; margin: 0 auto; padding: 88px 28px 112px; }
.legal-content h1 { color: #213451; font-size: clamp(42px, 6vw, 68px); line-height: 1.08; margin: 16px 0 28px; }
.legal-content h2 { color: #213451; font-size: clamp(23px, 3vw, 30px); margin: 44px 0 12px; }
.legal-content p { color: #526580; font-size: 17px; line-height: 1.75; margin: 0; }
.legal-content .legal-intro { font-size: 19px; }
.legal-content a { color: #146aa9; text-decoration: underline; text-underline-offset: 3px; }
.product-footer-legal { display: flex; flex-wrap: wrap; gap: 18px; }
.product-footer-legal a { color: inherit; }

.public-support-page .main-content { max-width: 1280px; padding-top: 38px; }
.public-support-hero {
    align-items: center;
    background: linear-gradient(115deg, #edf6ff 0%, #f5f8ff 55%, #eef9fd 100%);
    border: 1px solid #dce8f4;
    border-radius: 22px;
    display: grid;
    gap: 50px;
    grid-template-columns: minmax(0, 1.5fr) minmax(280px, .8fr);
    padding: clamp(36px, 5vw, 72px);
}
.public-support-hero h1 { font-size: clamp(36px, 4.2vw, 60px); letter-spacing: -.045em; line-height: 1.08; margin: 14px 0 18px; max-width: 680px; }
.public-support-hero p:not(.product-label),
.public-support-contact p:not(.product-label) { color: #60718a; font-size: 17px; line-height: 1.6; }
.public-support-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 23px; margin-top: 30px; }
.public-support-actions .product-primary,
.public-support-contact .product-primary { font-size: 14px; gap: 12px; padding: 13px 22px; }
.public-support-history { color: #1b65a3; font-size: 14px; font-weight: 650; }
.public-support-history span { margin-left: 8px; }
.public-support-hero-note { background: #fff; border: 1px solid #dce8f4; border-radius: 16px; box-shadow: 0 16px 40px #25568012; padding: 30px; }
.public-support-hero-note > span { color: #1e84bf; display: block; font-size: 30px; margin-bottom: 18px; }
.public-support-hero-note strong { color: #263451; display: block; font-size: 21px; }
.public-support-hero-note p { font-size: 15px !important; margin: 10px 0 0; }
.public-support-topics,
.public-support-answers { padding-top: 74px; }
.public-support-section-heading h2 { font-size: clamp(28px, 3vw, 39px); letter-spacing: -.035em; margin: 9px 0 0; }
.public-support-topic-grid { display: grid; gap: 18px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 30px; }
.public-support-topic-grid a { background: #fff; border: 1px solid #dce6f1; border-radius: 15px; display: flex; flex-direction: column; min-height: 194px; padding: 25px; position: relative; }
.public-support-topic-grid a:hover { border-color: #9fc6e7; box-shadow: 0 12px 30px #25568012; }
.public-support-topic-grid span { color: #2b7eb7; font-size: 12px; font-weight: 750; }
.public-support-topic-grid strong { color: #263451; font-size: 20px; margin-top: 23px; }
.public-support-topic-grid small { color: #63758f; font-size: 14px; line-height: 1.5; margin-top: 8px; }
.public-support-topic-grid b { bottom: 23px; color: #2b7eb7; font-size: 18px; position: absolute; right: 24px; }
.public-support-faq { border-top: 1px solid #dce6f1; margin-top: 28px; }
.public-support-faq details { border-bottom: 1px solid #dce6f1; padding: 0 6px; scroll-margin-top: 105px; }
.public-support-faq summary { color: #263451; cursor: pointer; font-size: 18px; font-weight: 650; list-style: none; padding: 24px 35px 24px 0; position: relative; }
.public-support-faq summary::-webkit-details-marker { display: none; }
.public-support-faq summary::after { color: #2b7eb7; content: '+'; font-size: 25px; font-weight: 400; position: absolute; right: 4px; top: 18px; }
.public-support-faq details[open] summary::after { content: '−'; }
.public-support-faq p { color: #60718a; font-size: 16px; line-height: 1.65; margin: 0 0 25px; max-width: 760px; }
.public-support-faq p a { color: #1262ae; font-weight: 650; text-decoration: underline; }
.public-support-contact { align-items: center; background: #142b49; border-radius: 18px; color: #fff; display: flex; gap: 35px; justify-content: space-between; margin-top: 80px; padding: 42px 48px; }
.public-support-contact h2 { font-size: clamp(27px, 3vw, 38px); letter-spacing: -.035em; margin: 10px 0; }
.public-support-contact p:not(.product-label) { color: #becfe2; margin: 0; }
.public-support-contact .product-label { color: #88ceef; }
.public-support-contact > div:last-child { align-items: flex-start; display: flex; flex-direction: column; flex-shrink: 0; gap: 13px; }
.public-support-email { color: #d5e6f7; font-size: 14px; }

@media (max-width: 700px) {
    .public-template-page .product-nav { gap: 12px; height: 72px; padding: 10px 18px; }
    .public-template-page .product-nav .wordmark { width: 150px; }
    .public-template-page .product-nav nav { gap: 10px; }
    .public-template-page .main-content { padding: 36px 20px 65px; }
    .public-template-page .website-grid { gap: 18px; }
    .public-template-footer { align-items: flex-start; flex-direction: column; padding: 28px 20px; }
    .public-support-page .main-content { padding-top: 24px; }
    .public-support-hero { gap: 25px; grid-template-columns: 1fr; padding: 30px 24px; }
    .public-support-hero-note { padding: 22px; }
    .public-support-topic-grid { grid-template-columns: 1fr; }
    .public-support-topic-grid a { min-height: 150px; }
    .public-support-topics, .public-support-answers { padding-top: 55px; }
    .public-support-contact { align-items: flex-start; flex-direction: column; margin-top: 60px; padding: 30px 24px; }
}
.assistant-page { margin: 0 auto; max-width: 1120px; padding: 48px 28px 80px; }
.assistant-heading { margin-bottom: 28px; max-width: 760px; }
.assistant-heading .editor-back { display: inline-flex; margin-bottom: 32px; }
.assistant-heading .eyebrow { color: #1685c5; font-size: 12px; font-weight: 800; letter-spacing: .16em; }
.assistant-heading h1 { color: #172947; font-size: clamp(36px, 5vw, 58px); letter-spacing: -.045em; margin: 12px 0; }
.assistant-heading p { color: #647694; font-size: 18px; line-height: 1.6; margin: 0; }
.assistant-heading .assistant-usage { background: #eaf4fb; border-radius: 999px; color: #315f80; display: inline-block; font-size: 13px; margin-top: 18px; padding: 8px 13px; }
.assistant-card { background: #fff; border: 1px solid #d7e3ef; border-radius: 18px; box-shadow: 0 18px 50px rgba(28, 60, 96, .07); padding: 32px; }
.assistant-card-heading { align-items: flex-start; display: flex; justify-content: space-between; margin-bottom: 26px; }
.assistant-card-heading h2 { color: #1b2d4b; font-size: 27px; margin: 6px 0 0; }
.assistant-step { color: #1685c5; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.assistant-form { display: grid; gap: 22px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.assistant-form label { color: #344c6a; display: grid; font-size: 13px; font-weight: 700; gap: 8px; }
.assistant-form input, .assistant-form textarea, .assistant-form select { background: #fff; border: 1px solid #cad9e8; border-radius: 9px; color: #172947; font: inherit; font-weight: 500; padding: 13px 14px; width: 100%; }
.assistant-form textarea { line-height: 1.55; resize: vertical; }
.assistant-form input[type="file"] { padding: 10px; }
.assistant-form small { color: #74869d; font-weight: 500; }
.assistant-wide { grid-column: 1 / -1; }
.assistant-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.assistant-notice, .assistant-error { border-radius: 10px; margin: 0 0 20px; padding: 14px 16px; }
.assistant-notice { background: #eaf7f1; border: 1px solid #b9e4cf; color: #246748; }
.assistant-error { background: #fff2f0; border: 1px solid #f1c6c0; color: #973c35; }
.assistant-palette { display: flex; gap: 7px; }
.assistant-palette span { background: var(--assistant-color); border: 3px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px #c8d5e2; height: 30px; width: 30px; }
.assistant-suggestions { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.assistant-suggestion { align-items: flex-start; background: #f7faff; border: 1px solid #d6e3ef; border-radius: 11px; cursor: pointer; display: flex; gap: 12px; padding: 15px; }
.assistant-suggestion input { margin-top: 4px; }
.assistant-suggestion span { display: grid; gap: 6px; }
.assistant-suggestion small { color: #1685c5; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.assistant-suggestion strong { color: #263c5a; font-size: 14px; line-height: 1.5; }
.field-error { color: #a43f38; font-size: 12px; font-weight: 600; }
.assistant-history { margin-top: 24px; }
@media (max-width: 720px) {
    .assistant-page { padding: 28px 16px 60px; }
    .assistant-card { padding: 22px 17px; }
    .assistant-form, .assistant-suggestions { grid-template-columns: 1fr; }
    .assistant-wide { grid-column: auto; }
    .assistant-card-heading { gap: 18px; }
}