/* ============================================================
   AI PREVENTIVI — Design System (single source of truth)
   Warm cream / amber-orange identity, Inter typography.
   Loaded globally via base.html and on standalone pages.
   ============================================================ */

:root {
    /* Brand */
    --ap-orange: #ea580c;
    --ap-orange-2: #f97316;
    --ap-orange-dark: #c2410c;
    --ap-amber: #f59e0b;
    --ap-amber-2: #fbbf24;
    --ap-amber-dark: #d97706;
    --ap-green: #16a34a;
    --ap-green-2: #22c55e;

    /* Gradients */
    --ap-grad-primary: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%);
    --ap-grad-primary-hover: linear-gradient(135deg, #ea580c 0%, #c2410c 100%);
    --ap-grad-orange: linear-gradient(135deg, #fb923c 0%, #ea580c 100%);
    --ap-grad-amber: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    --ap-grad-green: linear-gradient(135deg, #4ade80 0%, #16a34a 100%);
    --ap-grad-dark: linear-gradient(135deg, #57534e 0%, #1c1917 100%);
    --ap-grad-brown: linear-gradient(135deg, #d6a679 0%, #92400e 100%);

    /* Neutrals (stone) */
    --ap-ink: #1c1917;
    --ap-ink-soft: #292524;
    --ap-body: #57534e;
    --ap-muted: #78716c;
    --ap-line: #e7e5e4;
    --ap-line-soft: #f0eeec;
    --ap-surface: #ffffff;
    --ap-cream: #fffaf2;
    --ap-cream-2: #fef6ea;
    --ap-cream-3: #fdeed7;

    /* Page backgrounds */
    --ap-bg: #fffdf9;

    /* Radii */
    --ap-r-sm: 10px;
    --ap-r: 14px;
    --ap-r-lg: 20px;
    --ap-r-xl: 26px;
    --ap-r-pill: 999px;

    /* Shadows */
    --ap-shadow-xs: 0 1px 2px rgba(28,25,23,.05);
    --ap-shadow-sm: 0 2px 8px rgba(28,25,23,.06);
    --ap-shadow: 0 6px 22px rgba(28,25,23,.07);
    --ap-shadow-lg: 0 18px 44px rgba(28,25,23,.12);
    --ap-shadow-orange: 0 10px 26px rgba(234,88,12,.28);

    /* Type */
    --ap-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Layout */
    --ap-maxw: 1140px;
}

/* ---------- Base ---------- */
body {
    font-family: var(--ap-font);
    background-color: var(--ap-bg);
    color: var(--ap-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.ap-display, .ap-h2, .ap-h3 {
    font-family: var(--ap-font);
    color: var(--ap-ink);
    font-weight: 800;
    letter-spacing: -0.02em;
}

.ap-accent { color: var(--ap-orange); }

/* Disable any leftover dark-mode styles (no dark mode in this product) */
body.dark-mode { background-color: var(--ap-bg) !important; color: var(--ap-body) !important; }

/* ---------- Layout helpers ---------- */
.ap-section {
    padding: clamp(3.5rem, 7vw, 6rem) 0;
}
.ap-section--tight { padding: clamp(2.5rem, 5vw, 4rem) 0; }
.ap-section--cream { background: var(--ap-cream); }
.ap-section--cream-2 {
    background: linear-gradient(180deg, var(--ap-cream-2) 0%, var(--ap-cream) 100%);
}
.ap-section--ink { background: var(--ap-ink); }
.ap-section--ink .ap-h2,
.ap-section--ink .ap-display { color: #fff; }
.ap-section--ink .ap-lead { color: #d6d3d1; }

.ap-container {
    width: 100%;
    max-width: var(--ap-maxw);
    margin: 0 auto;
    padding-inline: 1.25rem;
}

/* ---------- Eyebrow / badge pill ---------- */
.ap-badge {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem 1.1rem;
    background: var(--ap-surface);
    border: 1px solid var(--ap-line);
    border-radius: var(--ap-r-pill);
    box-shadow: var(--ap-shadow-sm);
    font-size: .9rem;
    font-weight: 500;
    color: var(--ap-body);
}
.ap-badge i, .ap-badge .ap-badge__icon { color: var(--ap-orange); }

/* ---------- Headings ---------- */
.ap-display {
    font-size: clamp(2.4rem, 6vw, 4rem);
    line-height: 1.05;
    font-weight: 800;
}
.ap-h2 {
    font-size: clamp(1.9rem, 4vw, 2.8rem);
    line-height: 1.12;
    font-weight: 800;
}
.ap-h3 { font-size: clamp(1.2rem, 2.2vw, 1.45rem); font-weight: 700; }
.ap-lead {
    font-size: clamp(1.05rem, 1.6vw, 1.22rem);
    line-height: 1.6;
    color: var(--ap-body);
    font-weight: 400;
}
.ap-section-head { max-width: 760px; margin: 0 auto 3rem; text-align: center; }
.ap-section-head .ap-lead { margin-top: 1rem; }

/* ---------- Buttons ---------- */
.ap-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    padding: .9rem 1.6rem;
    border-radius: var(--ap-r);
    font-weight: 600;
    font-size: 1rem;
    line-height: 1;
    text-decoration: none;
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}
.ap-btn:hover { transform: translateY(-2px); }
.ap-btn--primary {
    background: var(--ap-grad-primary);
    color: #fff;
    box-shadow: var(--ap-shadow-orange);
}
.ap-btn--primary:hover { background: var(--ap-grad-primary-hover); color: #fff; box-shadow: 0 14px 30px rgba(234,88,12,.34); }
.ap-btn--outline {
    background: var(--ap-surface);
    color: var(--ap-ink);
    border-color: var(--ap-line);
    box-shadow: var(--ap-shadow-xs);
}
.ap-btn--outline:hover { border-color: var(--ap-orange); color: var(--ap-orange); }
.ap-btn--white {
    background: #fff;
    color: var(--ap-orange);
}
.ap-btn--white:hover { color: var(--ap-orange-dark); }
.ap-btn--ghost { background: transparent; color: var(--ap-ink); }
.ap-btn--ghost:hover { color: var(--ap-orange); }
.ap-btn--lg { padding: 1.05rem 2rem; font-size: 1.05rem; }
.ap-btn--block { width: 100%; }

/* ---------- Cards ---------- */
.ap-card {
    background: var(--ap-surface);
    border: 1px solid var(--ap-line);
    border-radius: var(--ap-r-lg);
    box-shadow: var(--ap-shadow-sm);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.ap-card--pad { padding: 1.75rem; }
.ap-card--hover:hover { transform: translateY(-6px); box-shadow: var(--ap-shadow-lg); }

/* ---------- Gradient icon tile ---------- */
.ap-icon {
    width: 54px;
    height: 54px;
    border-radius: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.5rem;
    box-shadow: var(--ap-shadow-sm);
    flex: 0 0 auto;
}
.ap-icon--orange { background: var(--ap-grad-orange); }
.ap-icon--amber  { background: var(--ap-grad-amber); }
.ap-icon--green  { background: var(--ap-grad-green); }
.ap-icon--dark   { background: var(--ap-grad-dark); }
.ap-icon--brown  { background: var(--ap-grad-brown); }

/* ---------- Feature card ---------- */
.ap-feature {
    background: var(--ap-surface);
    border: 1px solid var(--ap-line);
    border-radius: var(--ap-r-lg);
    box-shadow: var(--ap-shadow-sm);
    padding: 1.6rem;
    height: 100%;
    transition: transform .25s ease, box-shadow .25s ease;
}
.ap-feature:hover { transform: translateY(-6px); box-shadow: var(--ap-shadow-lg); }
.ap-feature .ap-icon { margin-bottom: 1.1rem; }
.ap-feature h3 { font-size: 1.18rem; font-weight: 700; margin-bottom: .55rem; color: var(--ap-ink); }
.ap-feature p { color: var(--ap-muted); font-size: .97rem; line-height: 1.55; margin: 0; }

/* ---------- Numbered steps ---------- */
.ap-step { text-align: center; }
.ap-step__num {
    width: 64px; height: 64px;
    border-radius: 50%;
    background: var(--ap-grad-orange);
    color: #fff;
    font-size: 1.5rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.1rem;
    box-shadow: var(--ap-shadow-orange);
}
.ap-step h3 { font-size: 1.2rem; font-weight: 700; margin-bottom: .5rem; }
.ap-step p { color: var(--ap-muted); font-size: .97rem; margin: 0; }

/* ---------- Stat tiles ---------- */
.ap-stat {
    background: var(--ap-surface);
    border: 1px solid var(--ap-line);
    border-radius: var(--ap-r);
    padding: 1.1rem 1.25rem;
    height: 100%;
}
.ap-stat__label { font-size: .9rem; color: var(--ap-muted); margin-bottom: .35rem; }
.ap-stat__num { font-size: 1.55rem; font-weight: 800; color: var(--ap-ink); line-height: 1.1; }
.ap-stat__num--orange { color: var(--ap-orange); }
.ap-stat__num--amber  { color: var(--ap-amber-dark); }
.ap-stat__num--green  { color: var(--ap-green); }

/* ---------- Pricing ---------- */
.ap-price-card {
    background: var(--ap-surface);
    border: 1px solid var(--ap-line);
    border-radius: var(--ap-r-xl);
    box-shadow: var(--ap-shadow-sm);
    padding: 2rem 1.75rem;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.ap-price-card__name { font-size: 1.35rem; font-weight: 800; color: var(--ap-ink); }
.ap-price { font-size: 2.6rem; font-weight: 800; color: var(--ap-ink); line-height: 1; margin: .5rem 0; }
.ap-price__period { font-size: 1rem; font-weight: 500; color: var(--ap-muted); }
.ap-price-card__desc { color: var(--ap-muted); font-size: .96rem; margin-bottom: 1.25rem; }
.ap-feat-list { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; gap: .7rem; }
.ap-feat-list li { display: flex; gap: .6rem; align-items: flex-start; font-size: .96rem; color: var(--ap-body); }
.ap-feat-list li i { color: var(--ap-orange); margin-top: .15rem; flex: 0 0 auto; }
.ap-price-card .ap-btn { margin-top: auto; }

/* Featured (orange) pricing card */
.ap-price-card--featured {
    background: var(--ap-grad-orange);
    border-color: transparent;
    color: #fff;
    box-shadow: var(--ap-shadow-orange);
    position: relative;
    transform: translateY(-6px);
}
.ap-price-card--featured .ap-price-card__name,
.ap-price-card--featured .ap-price { color: #fff; }
.ap-price-card--featured .ap-price__period,
.ap-price-card--featured .ap-price-card__desc { color: rgba(255,255,255,.9); }
.ap-price-card--featured .ap-feat-list li { color: #fff; }
.ap-price-card--featured .ap-feat-list li i { color: #fff; }
.ap-price-badge {
    position: absolute;
    top: 1.25rem; left: 1.75rem;
    background: rgba(255,255,255,.22);
    color: #fff;
    border-radius: var(--ap-r-pill);
    padding: .3rem .9rem;
    font-size: .8rem;
    font-weight: 600;
}

/* ---------- Audience cards (two-tone) ---------- */
.ap-aud-card {
    border-radius: var(--ap-r-xl);
    padding: 2.5rem;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.ap-aud-card--light {
    background: linear-gradient(160deg, var(--ap-cream-2) 0%, var(--ap-cream) 100%);
    border: 1px solid var(--ap-line);
}
.ap-aud-card--dark { background: var(--ap-ink); }
.ap-aud-card h3 { font-size: 1.7rem; font-weight: 800; margin: 1.2rem 0 .8rem; }
.ap-aud-card--dark h3 { color: #fff; }
.ap-aud-card p { line-height: 1.6; margin-bottom: 1.6rem; }
.ap-aud-card--light p { color: var(--ap-body); }
.ap-aud-card--dark p { color: #d6d3d1; }
.ap-aud-card .ap-btn { margin-top: auto; }

/* ---------- Reassurance check cards ---------- */
.ap-check-card {
    background: var(--ap-surface);
    border: 1px solid var(--ap-line);
    border-radius: var(--ap-r-lg);
    box-shadow: var(--ap-shadow-sm);
    padding: 2rem 1.25rem;
    text-align: center;
    height: 100%;
}
.ap-check-card__icon {
    font-size: 1.8rem;
    color: var(--ap-orange);
    margin-bottom: .9rem;
}
.ap-check-card p { font-weight: 600; color: var(--ap-ink); margin: 0; font-size: 1rem; }

/* ---------- Result card (analysis) ---------- */
.ap-result-card {
    background: var(--ap-surface);
    border: 1px solid var(--ap-line);
    border-radius: var(--ap-r-xl);
    box-shadow: var(--ap-shadow-lg);
    padding: clamp(1.5rem, 3vw, 2.25rem);
}

/* ============================================================
   NAVBAR
   ============================================================ */
.ap-navbar {
    background: rgba(255,255,255,.9);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--ap-line);
    box-shadow: 0 1px 16px rgba(28,25,23,.04);
    padding: .6rem 0;
}
.ap-brand {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    text-decoration: none;
}
.ap-brand img { height: 40px; width: auto; object-fit: contain; }
.ap-brand__name {
    font-weight: 800;
    font-size: 1.2rem;
    color: var(--ap-ink);
    letter-spacing: -0.02em;
}
.ap-navbar .nav-link {
    color: var(--ap-body) !important;
    font-weight: 500;
    font-size: .97rem;
    padding: .5rem .9rem !important;
    border-radius: 8px;
    transition: color .2s ease, background .2s ease;
}
.ap-navbar .nav-link:hover { color: var(--ap-orange) !important; background: rgba(234,88,12,.06); }
.ap-navbar .dropdown-menu { border: 1px solid var(--ap-line); border-radius: var(--ap-r); box-shadow: var(--ap-shadow); }

.ap-nav-login {
    border: 1.5px solid var(--ap-line) !important;
    color: var(--ap-ink) !important;
    border-radius: var(--ap-r-pill) !important;
    padding: .5rem 1.2rem !important;
    font-weight: 600;
}
.ap-nav-login:hover { border-color: var(--ap-orange) !important; color: var(--ap-orange) !important; background: transparent !important; }
.ap-nav-register {
    background: var(--ap-grad-primary);
    color: #fff !important;
    border-radius: var(--ap-r-pill) !important;
    padding: .5rem 1.3rem !important;
    font-weight: 600;
    box-shadow: var(--ap-shadow-orange);
}
.ap-nav-register:hover { background: var(--ap-grad-primary-hover) !important; color: #fff !important; }

/* ============================================================
   FOOTER
   ============================================================ */
.ap-footer {
    background: var(--ap-ink);
    color: #d6d3d1;
    padding: 3.5rem 0 1.75rem;
}
.ap-footer h5, .ap-footer h6 { color: #fff; font-weight: 700; }
.ap-footer .ap-footer__brand { display: inline-flex; align-items: center; gap: .55rem; margin-bottom: .9rem; }
.ap-footer .ap-footer__brand img { height: 34px; width: auto; }
.ap-footer .ap-footer__brand span { font-weight: 800; color: #fff; font-size: 1.1rem; }
.ap-footer a { color: #d6d3d1; text-decoration: none; transition: color .2s ease; }
.ap-footer a:hover { color: var(--ap-amber-2); }
.ap-footer address p, .ap-footer p { color: #a8a29e; }
.ap-footer .ap-footer__divider { border-color: rgba(255,255,255,.12); }
.ap-footer__bottom { color: #a8a29e; font-size: .85rem; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 991.98px) {
    .ap-navbar .navbar-nav { padding-top: .5rem; }
    .ap-navbar .nav-link { padding: .65rem .5rem !important; }
    .ap-nav-login, .ap-nav-register { display: inline-block; margin-top: .4rem; }
}
@media (max-width: 767.98px) {
    .ap-aud-card { padding: 1.75rem; }
    .ap-price-card--featured { transform: none; }
    .ap-section { padding: 3rem 0; }
    .ap-brand img { height: 34px; }
    .ap-brand__name { font-size: 1.05rem; }
}

/* Utility */
.ap-text-muted { color: var(--ap-muted) !important; }
.ap-text-body { color: var(--ap-body) !important; }
.ap-disclaimer {
    color: var(--ap-muted);
    font-size: .9rem;
    font-style: italic;
}

/* ===== Accessibility: visible keyboard focus ===== */
.ap-btn:focus-visible,
.ap-navbar .nav-link:focus-visible,
.ap-nav-login:focus-visible,
.ap-nav-register:focus-visible,
.ap-footer a:focus-visible,
.ap-accordion .accordion-button:focus-visible,
.ap-price-card .ap-btn:focus-visible {
    outline: 3px solid var(--ap-orange);
    outline-offset: 2px;
    border-radius: var(--ap-r-sm, 8px);
}
.ap-section--ink .ap-btn:focus-visible,
.ap-aud-card--dark .ap-btn:focus-visible {
    outline-color: #fff;
}

/* ============================================================
   APP NAVBAR (authenticated) — calm, focused "workspace" nav.
   Neutral ink/stone accents (no orange), active-page pill,
   and an elegant account chip with initials avatar.
   ============================================================ */
.ap-navbar.ap-navbar--app { padding: .45rem 0; }

.ap-navbar.ap-navbar--app .navbar-nav.mx-auto { gap: .15rem; }

.ap-navbar.ap-navbar--app .nav-link {
    color: var(--ap-body) !important;
    font-weight: 500;
    font-size: .94rem;
    padding: .42rem .85rem !important;
    border-radius: 11px;
    transition: color .2s ease, background .2s ease, box-shadow .2s ease;
}
.ap-navbar.ap-navbar--app .nav-link:hover {
    color: var(--ap-ink) !important;
    background: rgba(28,25,23,.055);
}
/* current page = elegant ink pill (the signature touch) */
.ap-navbar.ap-navbar--app .nav-link.active {
    color: #fff !important;
    background: var(--ap-ink);
    box-shadow: 0 4px 14px rgba(28,25,23,.22);
}
.ap-navbar.ap-navbar--app .nav-link.active:hover {
    color: #fff !important;
    background: var(--ap-ink-soft);
}

/* account chip */
.ap-navbar.ap-navbar--app .ap-account {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    max-width: 230px;
    padding: .28rem .8rem .28rem .32rem !important;
    border: 1px solid var(--ap-line);
    border-radius: var(--ap-r-pill);
    background: #fff;
    box-shadow: var(--ap-shadow-xs);
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.ap-navbar.ap-navbar--app .ap-account:hover,
.ap-navbar.ap-navbar--app .ap-account[aria-expanded="true"] {
    border-color: #d6d3d1;
    box-shadow: var(--ap-shadow-sm);
    transform: translateY(-1px);
    background: #fff;
}
.ap-navbar.ap-navbar--app .ap-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--ap-grad-dark);
    color: #fff;
    font-weight: 700;
    font-size: .76rem;
    letter-spacing: .02em;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.ap-navbar.ap-navbar--app .ap-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
.ap-navbar.ap-navbar--app .ap-account__name {
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
    font-size: .9rem;
    color: var(--ap-ink);
}
.ap-navbar.ap-navbar--app .ap-account.dropdown-toggle::after {
    margin-left: .1rem;
    color: var(--ap-muted);
    vertical-align: middle;
}

/* dropdown polish */
.ap-navbar.ap-navbar--app .ap-account__menu {
    margin-top: .55rem;
    min-width: 230px;
    padding: .4rem;
    border: 1px solid var(--ap-line);
    border-radius: 16px;
    box-shadow: var(--ap-shadow);
}
.ap-navbar.ap-navbar--app .ap-account__menu .dropdown-item {
    display: flex;
    align-items: center;
    border-radius: 10px;
    padding: .56rem .7rem;
    font-size: .9rem;
    font-weight: 500;
    color: var(--ap-body);
    transition: background .15s ease, color .15s ease;
}
.ap-navbar.ap-navbar--app .ap-account__menu .dropdown-item i { color: var(--ap-muted); }
.ap-navbar.ap-navbar--app .ap-account__menu .dropdown-item:hover {
    background: rgba(28,25,23,.055);
    color: var(--ap-ink);
}
.ap-navbar.ap-navbar--app .ap-account__menu .dropdown-item:hover i { color: var(--ap-ink); }
.ap-navbar.ap-navbar--app .ap-account__menu .ap-account__logout:hover,
.ap-navbar.ap-navbar--app .ap-account__menu .ap-account__logout:hover i {
    color: #b91c1c;
    background: rgba(185,28,28,.07);
}

/* focus-visible for the new app-nav controls (neutral, not orange) */
.ap-navbar.ap-navbar--app .nav-link:focus-visible,
.ap-navbar.ap-navbar--app .ap-account:focus-visible {
    outline: 3px solid var(--ap-ink);
    outline-offset: 2px;
}

@media (max-width: 991.98px) {
    .ap-navbar.ap-navbar--app .navbar-nav.mx-auto { gap: 0; padding-top: .5rem; }
    .ap-navbar.ap-navbar--app .ap-account {
        margin-top: .6rem;
        max-width: 100%;
        width: fit-content;
    }
    .ap-navbar.ap-navbar--app .ap-account__name { max-width: 60vw; }
}