:root {
    --meloim-orange: #ff8c00;
    --meloim-orange-strong: #f36f00;
    --meloim-orange-soft: #fff2df;
    --meloim-ink: #152337;
    --meloim-text: #354153;
    --meloim-muted: #6d7683;
    --meloim-line: #e5eaf0;
    --meloim-bg: #fbfaf7;
    --meloim-soft: #f4f6f8;
    --meloim-card: #ffffff;
    --meloim-green: #12835f;
    --meloim-shadow: 0 18px 42px rgba(21, 35, 55, .10);
    --meloim-shadow-soft: 0 10px 28px rgba(21, 35, 55, .07);

    --primary: var(--meloim-orange) !important;
    --primary-dark: var(--meloim-orange-strong) !important;
    --primary2: #ffb347 !important;
    --bg: var(--meloim-bg) !important;
    --dark: var(--meloim-bg) !important;
    --card: var(--meloim-card) !important;
    --card2: var(--meloim-soft) !important;
    --text: var(--meloim-ink) !important;
    --muted: var(--meloim-muted) !important;
    --border: var(--meloim-line) !important;
    --line: var(--meloim-line) !important;
    --ink: var(--meloim-ink) !important;
    --ink-soft: var(--meloim-text) !important;
    --paper: var(--meloim-bg) !important;
    --paper-strong: #fffaf2 !important;
    --surface: var(--meloim-card) !important;
}

html {
    background: var(--meloim-bg) !important;
    scroll-behavior: smooth;
}

body {
    background: var(--meloim-bg) !important;
    color: var(--meloim-ink) !important;
    overflow-x: hidden !important;
    -webkit-font-smoothing: antialiased;
}

main,
section,
.container,
.page,
.content,
.main-content,
.hero,
.page-header,
.card,
.form-card,
.doc,
.toc,
.kb-wrap,
.articles-wrap,
.timeline-wrap {
    min-width: 0;
}

h1,
h2,
h3,
h4,
.section-title,
.page-header h1,
.hero h1,
.article-title,
.kb-title,
.card-title,
.release-date,
.brand,
.logo,
.nav-logo {
    color: var(--meloim-ink) !important;
    letter-spacing: 0 !important;
}

p,
li,
.hero-sub,
.hero p,
.page-header p,
.section-sub,
.article-text,
.kb-desc,
.faq-a,
.faq-a-inner,
.detail-row,
.value,
.change-content p,
.form-help,
.pro-target div,
.footer-tagline {
    color: var(--meloim-text) !important;
}

a {
    text-underline-offset: 3px;
}

nav,
#mainNav,
.topbar,
.site-header,
header.topbar {
    background: rgba(255, 255, 255, .92) !important;
    border-bottom: 1px solid rgba(21, 35, 55, .08) !important;
    box-shadow: none !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

nav a,
#mainNav a,
.topbar a,
.nav-link {
    color: var(--meloim-text) !important;
}

nav a:hover,
#mainNav a:hover,
.topbar a:hover,
.nav-link:hover {
    color: var(--meloim-ink) !important;
    background: var(--meloim-soft) !important;
}

.brand span,
.logo span,
.nav-logo span {
    color: var(--meloim-orange-strong) !important;
}

.hero,
.page-header {
    background:
        radial-gradient(circle at 78% 18%, rgba(255, 140, 0, .14), transparent 30%),
        linear-gradient(180deg, #fffaf2 0%, var(--meloim-bg) 100%) !important;
    border-bottom: 1px solid var(--meloim-line) !important;
}

.hero h1,
.page-header h1 {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.06 !important;
    overflow-wrap: break-word;
}

.hero h1 em,
.hero h1 span,
.page-header h1 em,
.page-header h1 span,
.highlight,
.accent {
    color: var(--meloim-orange-strong) !important;
}

.hero-badge,
.hero-eyebrow,
.eyebrow,
.section-eyebrow,
.release-version,
.pro-cat,
.updated,
.badge {
    background: var(--meloim-orange-soft) !important;
    border-color: rgba(255, 140, 0, .22) !important;
    color: var(--meloim-orange-strong) !important;
}

.btn-primary,
.btn-main,
.btn-submit,
.submit-btn,
.search-btn,
.nav-cta,
.mobile-nav-cta,
.pricing-btn.btn-orange,
button[type="submit"] {
    background: var(--meloim-orange) !important;
    border-color: var(--meloim-orange) !important;
    color: #fff !important;
    border-radius: 12px !important;
    box-shadow: 0 12px 26px rgba(255, 140, 0, .24) !important;
}

.btn-primary:hover,
.btn-main:hover,
.btn-submit:hover,
.submit-btn:hover,
.search-btn:hover,
.nav-cta:hover,
.mobile-nav-cta:hover,
button[type="submit"]:hover {
    background: var(--meloim-orange-strong) !important;
    border-color: var(--meloim-orange-strong) !important;
}

.btn-secondary,
.btn-ghost,
.btn-light,
.btn-outline,
.btn-catalog,
.back-link,
.panel-link {
    background: #fff !important;
    color: var(--meloim-ink) !important;
    border: 1px solid var(--meloim-line) !important;
    border-radius: 12px !important;
    box-shadow: 0 6px 16px rgba(21, 35, 55, .04) !important;
}

.card,
.content-box,
.doc,
.toc,
.section-card,
.kb-card,
.article-card,
.article,
.feature-card,
.data-card,
.trust-card,
.step-card,
.step,
.audience-card,
.cta-panel,
.request-panel,
.request-box,
.system-intro-box,
.si-col,
.pricing-card,
.review-card,
.pro-cta-box,
.alert-box,
.change-item,
.input-card,
.field-box,
.search-box,
.empty-state,
.modal-content,
.pro-card,
.form-card,
.portal-card,
#summary,
.ai-desc {
    background: var(--meloim-card) !important;
    border: 1px solid var(--meloim-line) !important;
    color: var(--meloim-ink) !important;
    border-radius: 16px !important;
    box-shadow: var(--meloim-shadow-soft) !important;
}

.content-box,
.doc,
.form-card {
    box-shadow: var(--meloim-shadow) !important;
}

input,
select,
textarea,
.search-input,
.trad-input,
.trad-select,
.form-control,
.field-control,
.ai-textarea {
    background: #fff !important;
    color: var(--meloim-ink) !important;
    border: 1px solid #dbe3ec !important;
    border-radius: 12px !important;
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus,
.search-input:focus {
    border-color: var(--meloim-orange) !important;
    box-shadow: 0 0 0 4px rgba(255, 140, 0, .13) !important;
}

.alert-success {
    background: #ecfdf5 !important;
    border-color: #bbf7d0 !important;
    color: #166534 !important;
}

.alert-error {
    background: #fff1f2 !important;
    border-color: #fecdd3 !important;
    color: #be123c !important;
}

footer {
    background: #fff !important;
    border-top: 1px solid var(--meloim-line) !important;
    color: var(--meloim-muted) !important;
}

@media (max-width: 720px) {
    body {
        width: 100%;
    }

    .hero,
    .page-header {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    .hero h1,
    .page-header h1 {
        font-size: clamp(2rem, 8vw, 2.45rem) !important;
    }

    .hero p,
    .page-header p {
        font-size: 1rem !important;
    }

    .card,
    .content-box,
    .doc,
    .toc,
    .form-card {
        border-radius: 14px !important;
    }
}

/* 2026-05-14: public pages visually aligned to the cleaner index direction. */
body {
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

.wrap,
.container,
.main-content,
.content-wrap,
.kb-wrap,
.articles-wrap {
    width: min(1180px, calc(100% - 36px)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

nav,
#mainNav,
.topbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    min-height: 70px !important;
    height: auto !important;
    padding: 0 28px !important;
}

#mainNav .wrap,
nav .wrap,
.topbar .wrap {
    min-height: 70px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 18px !important;
}

#mainNav .nav-links,
nav .nav-links,
.topbar .nav-links {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 4px !important;
    min-width: 0 !important;
}

#mainNav .nav-link,
nav .nav-link,
.topbar .nav-link {
    font-size: .82rem !important;
    padding: 9px 8px !important;
    white-space: nowrap !important;
}

.nav-logo {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-family: Inter, ui-sans-serif, system-ui, sans-serif !important;
    font-size: 1.28rem !important;
    font-weight: 900 !important;
    color: var(--meloim-ink) !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}

.nav-logo::before {
    content: "m";
    width: 32px;
    height: 32px;
    display: inline-grid;
    place-items: center;
    border: 3px solid var(--meloim-orange-strong);
    border-bottom-color: transparent;
    border-radius: 9px 9px 5px 5px;
    color: var(--meloim-ink);
    font-weight: 950;
    line-height: 1;
    text-transform: lowercase;
}

.nav-logo span {
    color: var(--meloim-orange-strong) !important;
}

.nav-cta,
.nav-button,
.btn-primary,
.btn-main,
.btn-submit,
.submit-btn,
.search-btn,
.mobile-nav-cta,
button[type="submit"] {
    border-radius: 8px !important;
    min-height: 44px !important;
    font-weight: 850 !important;
    letter-spacing: 0 !important;
}

.btn-secondary,
.btn-ghost,
.btn-light,
.btn-outline,
.btn-catalog,
.back-link,
.panel-link {
    border-radius: 8px !important;
    min-height: 44px !important;
}

.hero,
.page-header {
    padding-top: clamp(88px, 10vw, 112px) !important;
    padding-bottom: clamp(38px, 6vw, 62px) !important;
    text-align: center !important;
}

.page-header .hero-grid,
.hero-inner {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 22px !important;
    align-items: center !important;
}

.hero-copy,
.page-header .hero-copy,
.hero-inner > div:first-child {
    align-items: center !important;
    text-align: center !important;
}

.hero h1,
.page-header h1 {
    font-family: Inter, ui-sans-serif, system-ui, sans-serif !important;
    max-width: 860px !important;
    margin: 18px auto 14px !important;
    font-size: clamp(2.15rem, 5vw, 3.75rem) !important;
    line-height: 1.04 !important;
    letter-spacing: 0 !important;
}

.hero-copy,
.hero-sub,
.hero-copy p,
.hero p,
.page-header p,
.section-sub,
.sec-sub {
    max-width: 680px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.hero-eyebrow,
.hero-badge,
.eyebrow,
.section-eyebrow,
.sec-eyebrow,
.release-version,
.badge {
    text-transform: none !important;
    letter-spacing: 0 !important;
    border-radius: 999px !important;
    font-weight: 850 !important;
}

.hero-actions,
.hero-btns,
.hero-tools,
.hero-pills {
    justify-content: center !important;
}

.hero-note,
.trust-row,
.hero-pills,
.hero-tools {
    max-width: 980px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.trust-row {
    gap: 10px !important;
}

.trust-item,
.hero-pill,
.topic-chip,
.visual-pill,
.recommendation-reason {
    border-radius: 8px !important;
    box-shadow: none !important;
}

.card,
.content-box,
.doc,
.toc,
.section-card,
.kb-card,
.article-card,
.article,
.feature-card,
.data-card,
.trust-card,
.step-card,
.step,
.audience-card,
.cta-panel,
.request-panel,
.request-box,
.system-intro-box,
.si-col,
.pricing-card,
.review-card,
.pro-cta-box,
.alert-box,
.change-item,
.input-card,
.field-box,
.search-box,
.empty-state,
.modal-content,
.pro-card,
.form-card,
.portal-card,
.hero-panel,
.ai-finder-panel,
#summary,
.ai-desc {
    border-radius: 8px !important;
    box-shadow: var(--meloim-shadow-soft) !important;
}

input,
select,
textarea,
.search-input,
.trad-input,
.trad-select,
.form-control,
.field-control,
.ai-textarea {
    border-radius: 8px !important;
}

.section,
section.section {
    padding-top: clamp(46px, 7vw, 74px) !important;
    padding-bottom: clamp(46px, 7vw, 74px) !important;
}

.section-title,
.sec-title {
    font-family: Inter, ui-sans-serif, system-ui, sans-serif !important;
    font-size: clamp(1.7rem, 3.4vw, 2.7rem) !important;
    letter-spacing: 0 !important;
    line-height: 1.12 !important;
}

.stats-bar {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 18px 20px !important;
}

.stats-inner {
    width: min(1180px, calc(100% - 36px)) !important;
    margin: 0 auto !important;
    padding: 18px !important;
    background: #fff !important;
    border: 1px solid var(--meloim-line) !important;
    border-radius: 8px !important;
    box-shadow: var(--meloim-shadow-soft) !important;
}

.stat-lbl,
.results-count,
.toc-title,
.field-label,
.ai-desc-label,
.lead-quality-title {
    text-transform: none !important;
    letter-spacing: 0 !important;
}

.bottom-cta {
    background:
        linear-gradient(135deg, #fff7ed 0%, #fff 62%) !important;
    border: 1px solid rgba(255, 140, 0, .18) !important;
    color: var(--meloim-ink) !important;
    border-radius: 8px !important;
    box-shadow: var(--meloim-shadow-soft) !important;
}

.bottom-cta h2,
.bottom-cta p,
.bottom-cta .bottom-note {
    color: var(--meloim-ink) !important;
}

.bottom-cta .btn-primary {
    background: var(--meloim-orange) !important;
    color: #fff !important;
}

.pro-card-placeholder::before,
.bottom-cta::before,
.hero::before {
    opacity: .8 !important;
}

footer {
    background: #fff !important;
    color: var(--meloim-muted) !important;
}

@media (max-width: 900px) {
    nav,
    #mainNav,
    .topbar {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    #mainNav .nav-links,
    nav .nav-links,
    .topbar .nav-links {
        display: none !important;
    }

    .hero,
    .page-header {
        padding-top: 88px !important;
    }

    .hero h1,
    .page-header h1 {
        font-size: clamp(2rem, 8vw, 2.8rem) !important;
    }

    .stats-inner {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 620px) {
    .wrap,
    .container,
    .main-content,
    .content-wrap,
    .kb-wrap,
    .articles-wrap,
    .stats-inner {
        width: min(100% - 28px, 1180px) !important;
    }

    .nav-logo {
        font-size: 1.12rem !important;
    }

    .nav-logo::before {
        width: 30px;
        height: 30px;
    }

    .stats-inner {
        grid-template-columns: 1fr !important;
    }

    .hero-actions,
    .hero-btns {
        align-items: stretch !important;
    }
}