/* ═══════════════════════════════════════════════════════════════════════
   Atlora — Pricing page stylesheet
   Scoped under .pricing-body / .pricing-page to avoid conflicts with the
   app's dark-theme site.css.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Reset & base ───────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

.pricing-body {
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
    background: #FAF9F5;
    color: #1A1815;
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

.pricing-body a { text-decoration: none; color: inherit; }
.pricing-body strong { font-weight: 600; }

/* ── Design tokens (pricing scope) ─────────────────────────────────────── */
.pricing-body {
    --p-bg:         #FAF9F5;
    --p-surface:    #ffffff;
    --p-raised:     #ECEBE2;
    --p-border:     #C8C5BB;
    --p-border-f:   #E0DED8;
    --p-text:       #1A1815;
    --p-text-md:    #4E4B44;
    --p-text-lt:    #7A7770;
    --p-text-gh:    #968F87;
    --p-accent:     #D97757;
    --p-accent-dk:  #b85f3e;
    --p-teal:       #007f9b;
    --p-teal-dk:    #005f75;
    --p-teal-lt:    #e0f4f8;
    --p-green:      #5FA876;
    --p-shadow:     0 2px 8px rgba(0,0,0,0.07);
    --p-shadow-feat:0 4px 24px rgba(0,127,155,0.18);
    --p-r-sm:       6px;
    --p-r-md:       12px;
    --p-r-lg:       20px;
}

/* ── Page shell ─────────────────────────────────────────────────────────── */
.pricing-page { padding-top: 72px; }

/* ── Hero ───────────────────────────────────────────────────────────────── */
.p-hero        { text-align: center; padding: 4rem 1.5rem 2rem; }
.p-hero h1     { font-size: 2.5rem; font-weight: 800; letter-spacing: -0.03em; margin-bottom: .5rem; }
.p-hero-sub    { font-size: 1.15rem; color: var(--p-text-md); margin: .25rem 0; }
.p-hero-sub2   { font-size: .95rem; color: var(--p-text-lt); margin-top: .25rem; }

/* ── Toggle ─────────────────────────────────────────────────────────────── */
.p-toggle {
    display: inline-flex; gap: 0;
    border: 1px solid var(--p-border); border-radius: var(--p-r-lg);
    overflow: hidden; margin-top: 1.5rem;
}
.p-toggle-btn {
    padding: .5rem 1.5rem; text-decoration: none; color: var(--p-text-lt);
    font-weight: 500; font-size: .9rem; transition: background .15s, color .15s;
    white-space: nowrap;
}
.p-toggle-btn--active,
.pricing-body a.p-toggle-btn--active { background: var(--p-teal); color: #fff; }
.p-badge-save {
    background: var(--p-accent); color: #fff; border-radius: 20px;
    font-size: .68rem; padding: 1px 7px; margin-left: 6px; vertical-align: middle;
    font-weight: 700;
}

/* ── Plan Grid ──────────────────────────────────────────────────────────── */
.p-grid {
    display: grid; gap: 1.25rem; padding: 2rem 2rem;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    max-width: 1360px; margin: 0 auto;
}

/* ── Plan Card ──────────────────────────────────────────────────────────── */
.p-card {
    background: var(--p-surface); border: 1.5px solid var(--p-border-f);
    border-radius: var(--p-r-md); padding: 1.75rem 1.5rem;
    box-shadow: var(--p-shadow); display: flex; flex-direction: column;
    position: relative; transition: transform .15s, box-shadow .15s;
}
.p-card:hover         { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0,0,0,0.10); }
.p-card--featured     { border-color: var(--p-teal); box-shadow: var(--p-shadow-feat); }
.p-card--enterprise   { border-style: dashed; }

/* ── Plan badge ─────────────────────────────────────────────────────────── */
.p-plan-badge {
    display: inline-block; font-size: .7rem; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase;
    padding: 3px 10px; border-radius: 20px; margin-bottom: .75rem;
}
.p-plan-badge--teal   { background: var(--p-teal-lt); color: var(--p-teal-dk); }
.p-plan-badge--accent { background: #fdeee8; color: var(--p-accent-dk); }
.p-plan-badge--spacer { visibility: hidden; }

/* ── Plan name & desc ───────────────────────────────────────────────────── */
.p-plan-name { font-size: 1.25rem; font-weight: 700; margin: 0 0 .25rem; }
.p-plan-desc { font-size: .85rem; color: var(--p-text-lt); margin-bottom: 1rem; }

/* ── Price ──────────────────────────────────────────────────────────────── */
.p-price      { margin-bottom: 1.25rem; }
.p-price-num  { font-size: 2.2rem; font-weight: 800; letter-spacing: -0.03em; }
.p-price-per  { font-size: .95rem; color: var(--p-text-lt); }
.p-price-note { font-size: .78rem; color: var(--p-text-lt); margin-top: .2rem; }

/* ── Limits list ────────────────────────────────────────────────────────── */
.p-limits {
    list-style: none; padding: 0; margin: 0 0 1.25rem;
    font-size: .875rem; display: flex; flex-direction: column; gap: .5rem; flex: 1;
}
.p-lv       { font-weight: 600; }
.p-lh       { color: var(--p-text-lt); font-size: .78rem; display: block; }
.p-l-addon  { color: var(--p-accent-dk); font-weight: 500; font-size: .82rem; }

/* ── CTA ────────────────────────────────────────────────────────────────── */
.p-cta      { margin-top: auto; }
.p-btn {
    display: block; width: 100%; padding: .625rem 1.25rem;
    border-radius: var(--p-r-sm); font-weight: 600; font-size: .9rem;
    text-align: center; transition: background .15s, color .15s, border-color .15s;
    cursor: pointer; border: 2px solid transparent;
}
.p-btn-teal,
.pricing-body a.p-btn-teal   { background: var(--p-teal); color: #fff; border-color: var(--p-teal); }
.p-btn-teal:hover,
.pricing-body a.p-btn-teal:hover { background: var(--p-teal-dk); color: #fff; border-color: var(--p-teal-dk); }
.p-btn-outline { background: transparent; color: var(--p-teal); border-color: var(--p-teal); }
.p-btn-outline:hover { background: var(--p-teal-lt); }
.p-overage-hint { font-size: .72rem; color: var(--p-text-gh); text-align: center; margin-top: .75rem; min-height: 1em; }

/* ── Shared section shell ───────────────────────────────────────────────── */
.p-section { max-width: 960px; margin: 3rem auto; padding: 0 1.5rem; }
.p-section h2 { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.02em; margin-bottom: .75rem; }
.p-section h3 { font-size: 1.15rem; font-weight: 700; margin-bottom: .5rem; }
.p-section p  { color: var(--p-text-md); margin-bottom: .6rem; }

/* ── Table shared ───────────────────────────────────────────────────────── */
.p-table-wrap { overflow-x: auto; margin-top: 1.25rem; }
.p-table {
    width: 100%; border-collapse: collapse; font-size: .9rem;
}
.p-table th,
.p-table td { padding: .6rem 1rem; border-bottom: 1px solid var(--p-border-f); text-align: left; }
.p-table th {
    font-weight: 700; color: var(--p-text-lt); font-size: .75rem;
    text-transform: uppercase; letter-spacing: .05em;
}
.p-saving { color: var(--p-green); font-weight: 700; }

/* ── Consumption section ────────────────────────────────────────────────── */
.p-consumption {
    background: var(--p-raised); border-radius: var(--p-r-md);
    padding: 2rem 2rem; max-width: 960px;
}

/* ── Web Search add-on ──────────────────────────────────────────────────── */
.p-addon {
    display: flex; gap: 1.5rem; align-items: flex-start;
    border-left: 4px solid var(--p-accent);
    background: #fdf7f4; border-radius: 0 var(--p-r-md) var(--p-r-md) 0;
    padding: 1.5rem 2rem; max-width: 960px;
}
.p-addon-icon { font-size: 2rem; line-height: 1; flex-shrink: 0; }
.p-addon-body h3 { margin-top: 0; }
.p-addon-example {
    margin-top: .75rem; background: var(--p-surface);
    border: 1px solid var(--p-border-f);
    padding: .5rem 1rem; border-radius: var(--p-r-sm); font-size: .9rem;
}

/* ── Page calc note ─────────────────────────────────────────────────────── */
.p-page-note {
    background: var(--p-raised); border-radius: var(--p-r-md);
    padding: 1.25rem 1.5rem; max-width: 960px;
}

/* ── Savings section ────────────────────────────────────────────────────── */
.p-savings { text-align: left; max-width: 960px; }

/* ── Comparison table ───────────────────────────────────────────────────── */
.p-comparison { max-width: 1100px; }
.p-comp-wrap  { overflow-x: auto; margin-top: 1.25rem; }
.p-comp-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.p-comp-table th,
.p-comp-table td {
    padding: .5rem .875rem; border-bottom: 1px solid var(--p-border-f);
    text-align: center;
}
.p-comp-label-col   { text-align: left; min-width: 200px; }
.p-comp-featured-col { color: var(--p-teal); font-weight: 700; }
.p-feat-group td {
    background: var(--p-raised); font-weight: 700; font-size: .75rem;
    text-transform: uppercase; letter-spacing: .06em; text-align: left;
    padding: .4rem .875rem;
}
.p-feat-y { color: var(--p-teal); font-weight: 700; font-size: 1rem; }
.p-feat-n { color: var(--p-border); }

/* ── FAQ ────────────────────────────────────────────────────────────────── */
.p-faq       { max-width: 780px; }
.p-faq-list  { display: flex; flex-direction: column; gap: .5rem; margin-top: 1.25rem; }
.p-faq-item  { border: 1px solid var(--p-border-f); border-radius: var(--p-r-sm); }
.p-faq-item summary {
    padding: 1rem 1.25rem; font-weight: 600; cursor: pointer; list-style: none;
    display: flex; justify-content: space-between; align-items: center;
    font-size: .95rem;
}
.p-faq-item summary::-webkit-details-marker { display: none; }
.p-faq-item summary::after  { content: "+"; font-size: 1.2rem; color: var(--p-text-lt); }
.p-faq-item[open] summary::after { content: "−"; }
.p-faq-item p { padding: .25rem 1.25rem 1rem; margin: 0; font-size: .9rem; color: var(--p-text-md); }

/* ── Footer ─────────────────────────────────────────────────────────────── */
.p-footer {
    display: flex; align-items: center; justify-content: center;
    gap: 2rem; padding: 2rem 1.5rem 3rem;
    font-size: .85rem; color: var(--p-text-lt);
    border-top: 1px solid var(--p-border-f); margin-top: 4rem;
}
.p-footer a { color: var(--p-text-lt); transition: color .15s; }
.p-footer a:hover { color: var(--p-text); }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .p-hero h1 { font-size: 2rem; }
    .p-addon { flex-direction: column; gap: .75rem; }
}

@media (max-width: 768px) {
    .p-grid { grid-template-columns: 1fr 1fr; padding: 1.5rem 1rem; }
    .nav-right { display: none; }
}

@media (max-width: 480px) {
    .p-grid { grid-template-columns: 1fr; }
    .p-hero h1 { font-size: 1.7rem; }
    .p-footer { flex-direction: column; gap: .75rem; }
}