/* =========================================================
   Abby SEO — Editorial overrides layer
   Loads AFTER style.css + abby-design.css.
   Retargets legacy CSS variables and BEM-ish classes to the
   editorial Abby palette so un-migrated templates flip without
   template edits. Uses !important throughout to beat inline
   styles and high-specificity legacy rules.
   ========================================================= */

/* ---- Alias legacy CSS variables to editorial tokens ---- */
:root {
    --primary: var(--ink) !important;
    --primary-dark: var(--ginger-deep) !important;
    --accent: var(--ginger) !important;
    --success: var(--sage) !important;
    --warning: var(--amber) !important;
    --danger: var(--rust) !important;
    --bg: var(--paper) !important;
    --bg-secondary: var(--paper-2) !important;
    --surface: var(--paper) !important;
    --text: var(--ink) !important;
    --text-muted: var(--ink-2) !important;
    --border: var(--rule) !important;
    --border-color: var(--rule) !important;
    --radius: 12px !important;
    --shadow: var(--shadow-s) !important;
    --shadow-lg: var(--shadow-l) !important;
}

/* ---- Sitewide typography ---- */
html, body {
    background: var(--paper) !important;
    color: var(--ink) !important;
    font-family: var(--font-ui) !important;
}
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display) !important;
    font-weight: 500 !important;
    letter-spacing: -0.02em !important;
    color: var(--ink) !important;
}
h1 { line-height: 1.05 !important; }
h2 { line-height: 1.1 !important; }
h3, h4, h5, h6 { line-height: 1.15 !important; }
p { color: var(--ink) !important; }
a { color: var(--ginger-deep) !important; text-decoration-thickness: 1px !important; text-underline-offset: 3px !important; }
a:hover { color: var(--ink) !important; }

/* ---- Dark card context: flip forced ink back to paper so text on dark bg is readable ---- */
.card-ink, .card-ink h1, .card-ink h2, .card-ink h3, .card-ink h4, .card-ink h5, .card-ink h6,
.card-ink p, .card-ink li, .card-ink span, .card-ink div, .card-ink strong {
    color: var(--paper) !important;
}
.card-ink .eyebrow { color: var(--paper-3) !important; }
.card-ink p { color: var(--paper-3) !important; }
.card-ink a { color: var(--tennis) !important; }
.card-ink a:hover { color: var(--paper) !important; }
/* Preserve inline ginger/tennis accents inside .card-ink (step labels, bullets) */
.card-ink [style*="var(--ginger)"], .card-ink [style*="--ginger)"] { color: var(--ginger) !important; }
.card-ink [style*="var(--tennis)"] { color: var(--tennis) !important; }

/* ---- Container alignment ---- */
.container {
    max-width: 1240px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 24px !important;
}
.page, .page-wide {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ---- Old header/footer classes (if any template embeds them) ---- */
.navbar, body > nav.navbar { display: none !important; }
body > footer.footer, footer.footer { display: none !important; }

/* ---- Hero (landing + any other hero usage) ---- */
.hero {
    padding: 56px 0 72px !important;
    background: radial-gradient(circle at 20% 10%, rgba(201,144,82,.08), transparent 40%),
                radial-gradient(circle at 80% 90%, rgba(63,107,74,.06), transparent 40%),
                var(--paper) !important;
    text-align: left !important;
}
.hero h1 {
    font-size: clamp(40px, 5.5vw, 72px) !important;
    color: var(--ink) !important;
    margin-bottom: 20px !important;
    max-width: 18ch !important;
}
.hero-subtitle {
    font-size: 18px !important;
    color: var(--ink-2) !important;
    max-width: 58ch !important;
    line-height: 1.55 !important;
    margin-bottom: 28px !important;
}
.hero-content { max-width: 960px !important; margin: 0 auto !important; }

/* ---- Buttons ---- */
.btn, button.btn, a.btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 11px 18px !important;
    border-radius: 10px !important;
    font-family: var(--font-ui) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    text-decoration: none !important;
    border: 1px solid transparent !important;
    cursor: pointer !important;
    transition: transform .08s ease, background .12s ease, color .12s ease !important;
    min-height: 44px !important;
    line-height: 1 !important;
}
.btn-primary, button.btn-primary, a.btn-primary, input[type=submit].btn-primary {
    background: var(--ink) !important;
    color: var(--paper) !important;
    border-color: var(--ink) !important;
}
.btn-primary:hover { background: #000 !important; color: var(--paper) !important; }
.btn-secondary, a.btn-secondary, button.btn-secondary {
    background: transparent !important;
    color: var(--ink) !important;
    border-color: var(--rule) !important;
}
.btn-secondary:hover { background: var(--paper-2) !important; }
.btn-ghost { background: transparent !important; color: var(--ink) !important; border-color: var(--rule) !important; }
.btn-ghost:hover { background: var(--paper-2) !important; }
.btn-ginger { background: var(--ginger) !important; color: #fff !important; border-color: var(--ginger) !important; }
.btn-ginger:hover { background: var(--ginger-deep) !important; color: #fff !important; }
.btn-danger { background: var(--rust) !important; color: #fff !important; border-color: var(--rust) !important; }
.btn-danger:hover { background: #8B2F15 !important; color: #fff !important; }
.btn-download { background: var(--ginger) !important; color: #fff !important; border-color: var(--ginger) !important; }
.btn-download:hover { background: var(--ginger-deep) !important; }
.btn-sm { padding: 7px 12px !important; font-size: 13px !important; min-height: 36px !important; border-radius: 8px !important; }

/* ---- Forms ---- */
input[type=text], input[type=url], input[type=email], input[type=password],
input[type=number], input[type=tel], input[type=search], select, textarea {
    font-family: var(--font-ui) !important;
    background: var(--paper) !important;
    border: 1px solid var(--rule) !important;
    border-radius: 10px !important;
    color: var(--ink) !important;
    min-height: 44px !important;
}
input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 3px solid var(--ginger) !important;
    outline-offset: 2px !important;
    border-color: var(--ink) !important;
}

/* Scan form (landing + site_seo + anywhere) */
.scan-form { max-width: 680px !important; }
.input-group {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    background: var(--paper) !important;
    border: 1.5px solid var(--ink) !important;
    border-radius: 14px !important;
    padding: 6px !important;
    align-items: stretch !important;
    box-shadow: var(--shadow-m) !important;
    gap: 0 !important;
}
.scan-input, .scan-input-sm {
    border: 0 !important;
    background: transparent !important;
    font-size: 16px !important;
    padding: 14px 16px !important;
    min-height: 48px !important;
    color: var(--ink) !important;
}
.scan-input:focus, .scan-input-sm:focus { outline: none !important; box-shadow: none !important; }
.input-group .btn, .input-group .btn-primary { border-radius: 10px !important; }

/* ---- Alerts ---- */
.alert {
    padding: 12px 16px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    border: 1px solid var(--rule) !important;
    background: var(--paper-2) !important;
    color: var(--ink) !important;
}
.alert-error, .alert-danger {
    background: var(--rust-soft) !important;
    color: #6E1F0A !important;
    border-color: transparent !important;
}
.alert-success { background: var(--sage-soft) !important; color: #284B31 !important; border-color: transparent !important; }
.alert-warn, .alert-warning { background: var(--amber-soft) !important; color: #5C420A !important; border-color: transparent !important; }
.alert-info { background: var(--ginger-soft) !important; color: var(--ginger-deep) !important; border-color: transparent !important; }

/* ---- Features / cards ---- */
.features { padding: 48px 0 !important; }
.features h2 {
    font-size: clamp(32px, 4vw, 44px) !important;
    text-align: center !important;
    margin-bottom: 8px !important;
}
.feature-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
    gap: 20px !important;
    margin-top: 32px !important;
}
.feature-card {
    background: var(--paper) !important;
    border: 1px solid var(--rule) !important;
    border-radius: 14px !important;
    padding: 24px !important;
    box-shadow: none !important;
    transition: transform .12s ease, box-shadow .12s ease !important;
}
.feature-card:hover { box-shadow: var(--shadow-m) !important; transform: translateY(-2px) !important; }
.feature-icon {
    font-size: 28px !important;
    margin-bottom: 12px !important;
    background: var(--ginger-soft) !important;
    color: var(--ginger-deep) !important;
    width: 48px !important; height: 48px !important;
    display: grid !important; place-items: center !important;
    border-radius: 12px !important;
}
.feature-card h3 {
    font-size: 22px !important;
    font-family: var(--font-display) !important;
    margin-bottom: 8px !important;
}
.feature-card p { color: var(--ink-2) !important; font-size: 14.5px !important; line-height: 1.55 !important; }

/* ---- Upsell card ---- */
.upsell-card {
    background: var(--paper-2) !important;
    border: 1px solid var(--rule) !important;
    border-radius: 16px !important;
    padding: 32px !important;
}

/* ---- Scan progress ---- */
.scanning-section { padding: 64px 0 !important; }
.scan-url {
    font-family: var(--font-mono) !important;
    color: var(--ink-2) !important;
    font-size: 14px !important;
}
.progress-bar {
    background: var(--paper-3) !important;
    border-radius: 999px !important;
    height: 8px !important;
    overflow: hidden !important;
}
.progress-fill {
    background: var(--ginger) !important;
    height: 100% !important;
}
.scan-status { color: var(--ink-2) !important; font-size: 14px !important; }

/* ---- Results ---- */
.results-section { padding: 40px 0 !important; }
.results-header { margin-bottom: 32px !important; }
.score-display { display: flex !important; align-items: center !important; gap: 32px !important; flex-wrap: wrap !important; }
.score-circle {
    width: 140px !important;
    height: 140px !important;
    border: 8px solid var(--rule) !important;
    border-radius: 50% !important;
    display: grid !important;
    place-items: center !important;
    background: var(--paper) !important;
    flex-direction: column !important;
    text-align: center !important;
    font-family: var(--font-display) !important;
}
.score-good { border-color: var(--sage) !important; color: var(--sage) !important; }
.score-ok { border-color: var(--amber) !important; color: var(--amber) !important; }
.score-bad { border-color: var(--rust) !important; color: var(--rust) !important; }
.score-number { font-size: 42px !important; font-weight: 500 !important; line-height: 1 !important; font-family: var(--font-display) !important; }
.score-label { font-family: var(--font-mono) !important; font-size: 10px !important; text-transform: uppercase !important; letter-spacing: .14em !important; color: var(--ink-3) !important; opacity: 1 !important; margin-top: 4px !important; }
.score-meta { text-align: left !important; }
.checks-summary { display: flex !important; gap: 8px !important; flex-wrap: wrap !important; }

/* ---- Badges ---- */
.badge {
    display: inline-flex !important;
    align-items: center !important;
    padding: 3px 10px !important;
    border-radius: 999px !important;
    font-family: var(--font-mono) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    border: 1px solid transparent !important;
}
.badge-pass { background: var(--sage-soft) !important; color: #284B31 !important; }
.badge-warn { background: var(--amber-soft) !important; color: #5C420A !important; }
.badge-fail { background: var(--rust-soft) !important; color: #6E1F0A !important; }

/* ---- Check items (results) ---- */
.check-category {
    background: var(--paper) !important;
    border: 1px solid var(--rule) !important;
    border-radius: 14px !important;
    margin-bottom: 16px !important;
    overflow: hidden !important;
}
.check-item {
    background: var(--paper) !important;
    border-left: 4px solid var(--rule) !important;
    border-bottom: 1px solid var(--rule) !important;
    border-top: 0 !important;
    border-right: 0 !important;
    border-radius: 0 !important;
    padding: 16px 18px !important;
}
.check-pass { border-left-color: var(--sage) !important; }
.check-warn { border-left-color: var(--amber) !important; }
.check-fail { border-left-color: var(--rust) !important; }
.check-header { display: flex !important; align-items: center !important; gap: 12px !important; }
.check-icon { font-size: 18px !important; }
.check-name { font-weight: 600 !important; flex: 1 !important; color: var(--ink) !important; }
.check-status-badge {
    font-family: var(--font-mono) !important;
    font-size: 10.5px !important;
    text-transform: uppercase !important;
    letter-spacing: .08em !important;
}
.check-detail { background: var(--paper-2) !important; border-radius: 10px !important; padding: 16px !important; color: var(--ink-2) !important; }
.remediation { background: var(--paper-2) !important; border-left: 3px solid var(--ginger) !important; border-radius: 0 10px 10px 0 !important; padding: 14px 18px !important; }
.remediation-content { color: var(--ink-2) !important; font-size: 14.5px !important; }
.passing-toggle { color: var(--ink-2) !important; cursor: pointer !important; user-select: none !important; }

/* ---- Results footer ---- */
.results-footer { margin-top: 32px !important; border-top: 1px solid var(--rule) !important; padding-top: 24px !important; }

/* ---- Error / legal ---- */
.error-section, .legal-section { padding: 56px 0 !important; max-width: 820px !important; margin: 0 auto !important; }
.legal-section h1 { margin-bottom: 20px !important; font-size: clamp(36px, 4.5vw, 56px) !important; }
.legal-section h2 { margin: 32px 0 12px !important; font-size: 24px !important; }
.legal-section p, .legal-section li { color: var(--ink) !important; line-height: 1.7 !important; }

/* ---- Download page ---- */
.download-section { padding: 48px 0 !important; }
.download-card {
    background: var(--paper) !important;
    border: 1px solid var(--rule) !important;
    border-radius: 16px !important;
    padding: 32px !important;
    box-shadow: var(--shadow-s) !important;
}

/* ---- Monitor page ---- */
.monitor-section { padding: 48px 0 !important; }
.monitor-card {
    background: var(--paper) !important;
    border: 1px solid var(--rule) !important;
    border-radius: 14px !important;
    padding: 24px !important;
}
.monitor-row { display: flex !important; justify-content: space-between !important; padding: 10px 0 !important; border-bottom: 1px solid var(--rule) !important; }
.monitor-label { color: var(--ink-3) !important; font-family: var(--font-mono) !important; font-size: 12px !important; text-transform: uppercase !important; letter-spacing: .08em !important; }

/* ---- Language flags in header ---- */
.mkt-header .lang-flags { display: inline-flex; gap: 4px; margin-right: 6px; }
.mkt-header .lang-flag { opacity: 0.55; transition: opacity .15s; padding: 2px; border-radius: 3px; }
.mkt-header .lang-flag:hover, .mkt-header .lang-flag.active { opacity: 1; }
.mkt-header .lang-flag img { border-radius: 2px; display: block; }
@media (max-width: 900px) {
    .mkt-header .lang-flags { order: 4; width: 100%; justify-content: center; margin: 8px 0 0; }
}

/* ---- Cookie notice ---- */
#cookie-notice {
    position: fixed !important;
    bottom: 0 !important; left: 0 !important; right: 0 !important;
    background: var(--ink) !important;
    color: var(--paper) !important;
    padding: 14px 24px !important;
    font-size: 14px !important;
    z-index: 9999 !important;
    box-shadow: 0 -4px 16px rgba(31,26,21,0.18) !important;
}
#cookie-notice .cookie-notice-inner {
    max-width: 1240px; margin: 0 auto;
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 12px;
}
#cookie-notice p { color: var(--paper) !important; margin: 0 !important; flex: 1; min-width: 280px; }
#cookie-notice a { color: var(--tennis) !important; text-decoration: underline !important; }
#cookie-notice button {
    background: var(--ginger) !important;
    color: #fff !important;
    border: 0 !important;
    padding: 8px 20px !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    min-height: 40px !important;
    white-space: nowrap !important;
}
#cookie-notice button:hover { background: var(--ginger-deep) !important; }

/* ---- Auth pages (login/signup) — account.css uses legacy styles ---- */
.auth-container, .signup-container, .login-container {
    max-width: 440px !important;
    margin: 48px auto !important;
    padding: 32px !important;
    background: var(--paper) !important;
    border: 1px solid var(--rule) !important;
    border-radius: 16px !important;
    box-shadow: var(--shadow-m) !important;
}
.auth-container h1, .signup-container h1, .login-container h1 {
    font-size: 32px !important;
    margin-bottom: 8px !important;
}
.auth-container label, .signup-container label { color: var(--ink) !important; font-weight: 500 !important; }
.form-group { margin-bottom: 16px !important; }
.form-group label { display: block !important; margin-bottom: 6px !important; font-size: 13px !important; color: var(--ink) !important; font-weight: 500 !important; }
.form-actions { margin-top: 24px !important; }

/* ---- Dashboard (account) ---- */
.dashboard-section, .account-section { padding: 40px 0 !important; }
.dashboard-card, .account-card {
    background: var(--paper) !important;
    border: 1px solid var(--rule) !important;
    border-radius: 14px !important;
    padding: 24px !important;
}
.stat-value { font-family: var(--font-display) !important; font-size: 36px !important; font-weight: 500 !important; color: var(--ink) !important; line-height: 1 !important; }
.stat-label { font-family: var(--font-mono) !important; font-size: 11px !important; text-transform: uppercase !important; letter-spacing: .14em !important; color: var(--ink-3) !important; }

/* ---- Tables (account, compliance) ---- */
table.table, table.pretty {
    width: 100% !important;
    border-collapse: collapse !important;
    font-size: 14px !important;
    background: var(--paper) !important;
}
table.table th, table.table td, table.pretty th, table.pretty td {
    padding: 12px 14px !important;
    text-align: left !important;
    border-bottom: 1px solid var(--rule) !important;
}
table.table th, table.pretty th {
    font-family: var(--font-mono) !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: .14em !important;
    color: var(--ink-3) !important;
    font-weight: 500 !important;
    background: var(--paper-2) !important;
}

/* ---- Code + pre ---- */
code, pre {
    font-family: var(--font-mono) !important;
    background: var(--paper-2) !important;
    color: var(--ink) !important;
    border-radius: 6px !important;
}
code { padding: 2px 6px !important; font-size: 12.5px !important; }
pre { padding: 14px 16px !important; overflow-x: auto !important; font-size: 13px !important; line-height: 1.6 !important; }
pre code { background: transparent !important; padding: 0 !important; }

/* ---- Mobile header adjustments ---- */
@media (max-width: 900px) {
    .mkt-header-inner { gap: 12px !important; padding: 12px 16px !important; flex-wrap: wrap !important; }
    .mkt-nav { order: 3; width: 100%; overflow-x: auto; gap: 2px !important; }
    .mkt-nav a { padding: 6px 10px !important; font-size: 13px !important; white-space: nowrap; }
    .mkt-cta { gap: 6px !important; }
    .mkt-cta .btn { padding: 6px 12px !important; font-size: 12.5px !important; min-height: 36px !important; }
    .hero { padding: 40px 0 56px !important; }
    .hero h1 { font-size: clamp(32px, 8vw, 48px) !important; }
    .feature-grid { grid-template-columns: 1fr !important; }
}

/* ============================================================
   Landing page mobile responsiveness — 2026-04-19
   Overrides inline grid-template-columns on landing.html sections
   that otherwise force desktop layout onto narrow viewports.
   ============================================================ */
html, body { overflow-x: hidden !important; }

@media (max-width: 900px) {
    /* Section padding */
    .page { padding: 32px 20px !important; }
    .page.card-ink { margin: 0 16px !important; padding: 40px 24px !important; border-radius: 18px !important; }

    /* Landing: HERO grid stacks */
    .hero-grid { grid-template-columns: 1fr !important; gap: 36px !important; }
    .hero-grid figure { max-width: 380px; margin: 0 auto !important; }

    /* Landing: WHAT SHE CHECKS grid stacks, sticky panel unsticks */
    .what-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
    .what-grid > div:first-child { position: static !important; top: auto !important; }
    .check-grid { grid-template-columns: 1fr !important; gap: 14px !important; }

    /* Landing: HOW IT WORKS 3-step list */
    .page.card-ink ol[style*="grid-template-columns"] { grid-template-columns: 1fr !important; gap: 28px !important; }

    /* Landing: RESULTS PREVIEW */
    .preview-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
    .preview-grid .score-ring { --size: 140px !important; }

    /* Landing: UPSELL CARD + FINAL CTA cards */
    .page > .card[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
        gap: 28px !important;
        padding: 32px 22px !important;
    }
    .page > .card[style*="grid-template-columns"] ul[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }

    /* Landing: BY THE NUMBERS */
    .grid-4 { grid-template-columns: 1fr 1fr !important; gap: 24px !important; }
    .grid-4 [style*="font-size: 56px"] { font-size: 40px !important; }

    /* Display sizes on mobile */
    .display-xl { font-size: clamp(34px, 9vw, 54px) !important; }
    .display-l  { font-size: clamp(28px, 7.5vw, 44px) !important; }
    .display-m  { font-size: clamp(24px, 6.5vw, 38px) !important; }
    .display-s  { font-size: 22px !important; }

    /* Scanner — wrap Scan button under input when space is tight */
    .scanner { grid-template-columns: auto 1fr !important; }
    .scanner .btn { grid-column: 1 / -1 !important; margin-top: 8px !important; justify-content: center !important; }
    .scanner input { font-size: 16px !important; padding: 12px 12px !important; }
    .scanner .proto { padding: 0 10px !important; font-size: 13px !important; }

    /* Big abby-chip on final CTA — inline width 220px override */
    .abby-chip-lg[style*="220px"] { width: 160px !important; height: 160px !important; }
}

@media (max-width: 480px) {
    .page { padding: 24px 16px !important; }
    .page.card-ink { margin: 0 12px !important; padding: 32px 20px !important; }
    .grid-4 { grid-template-columns: 1fr 1fr !important; gap: 18px !important; }
    .grid-4 [style*="font-size: 56px"] { font-size: 36px !important; }
    .abby-chip-lg[style*="220px"] { width: 140px !important; height: 140px !important; }
}