/* ─────────────────────────────────────────────────────────────
   PRICING — /pricing/

   The services rate card. Shares its visual language with /package/
   (the NitroVroom dealership pitch) so the two pricing pages read as
   siblings: same --pkg-* palette, same card grid, same toggle switch,
   same rounded table.

   The component blocks below are lifted from package.html:20-347.
   Everything under "PRICING — FIXES & ADDITIONS" is new: it either
   corrects a defect in the original or adds a section /package/
   does not have.

   Unlike package.html this lives in a stylesheet rather than a 374-line
   inline <style> block. contact.html:30 already sets that precedent.
───────────────────────────────────────────────────────────── */

/* ══ tokens ══
   package.html declares nine --pkg-* tokens but references only four;
   the five dead ones (--pkg-bg, --pkg-surface, --pkg-surface-alt,
   --pkg-black, --pkg-hash) are dropped rather than copied forward. */
:root {
--pkg-border: rgba(255, 255, 255, 0.12);
--pkg-text: #f8fafc;
--pkg-muted: #9ca3af;
--pkg-white: #ffffff;
}

/* ══ page shell, header, toggle, cards, list, button, table, retainers
  — package.html:20-347 ══ */
.pkg-page {
    position: relative;
    min-height: 100vh;
    padding: 7rem 1.2rem 4rem;
    color: var(--pkg-text);
    background: radial-gradient(circle at 10% 8%, rgba(255, 255, 255, 0.05), transparent 35%),
                radial-gradient(circle at 90% 5%, rgba(124, 124, 132, 0.12), transparent 32%),
                linear-gradient(180deg, #050506 0%, #0b0b0d 100%);
    overflow: hidden;
}

.pkg-page::before,
.pkg-page::after {
    content: "";
    position: absolute;
    width: 320px;
    height: 320px;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    pointer-events: none;
}

.pkg-page::before {
    top: -90px;
    left: -90px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.22), rgba(0, 0, 0, 0.22), rgba(124, 124, 132, 0.24));
    transform: rotate(-12deg);
}

.pkg-page::after {
    right: -100px;
    bottom: -120px;
    background: linear-gradient(145deg, rgba(124, 124, 132, 0.3), rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.4));
    transform: rotate(14deg);
}

.pkg-wrap {
    position: relative;
    z-index: 2;
    max-width: 1120px;
    margin: 0 auto;
}

.pkg-header {
    text-align: center;
    margin-bottom: 2.6rem;
}

/* Defensive override: neutralize global header styles from skills_listing.css */
header.pkg-header {
    position: static;
    top: auto;
    width: auto;
    z-index: auto;
    padding: 0;
    transition: none;
    backdrop-filter: none;
    background: transparent;
    border-bottom: none;
}

.pkg-kicker {
    display: inline-block;
    padding: 0.35rem 0.75rem;
    border: 1px solid var(--pkg-border);
    border-radius: 999px;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #d1d5db;
    background: rgba(255, 255, 255, 0.04);
    margin-bottom: 1rem;
}

.pkg-header h1 {
    font-size: clamp(1.85rem, 4vw, 2.8rem);
    letter-spacing: -0.02em;
    margin-bottom: 0.8rem;
}

.pkg-header p {
    max-width: 760px;
    margin: 0 auto;
    color: var(--pkg-muted);
    line-height: 1.65;
}

.pkg-toggle {
    width: fit-content;
    margin: 0 auto 2.4rem;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    padding: 0.45rem 0.7rem;
    background: rgba(255, 255, 255, 0.03);
}

.pkg-toggle-label {
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--pkg-muted);
    transition: color 0.25s ease;
}

.pkg-toggle-label.active {
    color: var(--pkg-white);
}

.pkg-switch {
    position: relative;
    width: 52px;
    height: 28px;
}

.pkg-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.pkg-slider {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: #151518;
    box-shadow: inset 0 2px 7px rgba(0, 0, 0, 0.85), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
    cursor: pointer;
}

.pkg-slider::before {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    left: 4px;
    top: 4px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #ffffff 0%, #d1d5db 28%, #737380 100%);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.6), inset 0 1px 1px rgba(255, 255, 255, 0.95);
    transition: transform 0.35s cubic-bezier(0.4, 1.4, 0.5, 1);
}

.pkg-switch input:checked + .pkg-slider::before {
    transform: translateX(24px);
}

.pkg-pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.1rem;
    margin-bottom: 2.5rem;
}

.pkg-card {
    position: relative;
    padding: 1.6rem;
    border-radius: 18px;
    border: 1px solid var(--pkg-border);
    background: linear-gradient(160deg, rgba(18, 18, 20, 0.95), rgba(8, 8, 9, 0.95));
    box-shadow: 0 14px 26px rgba(0, 0, 0, 0.42);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.pkg-card.featured {
    border-color: rgba(255, 255, 255, 0.28);
    background: linear-gradient(160deg, rgba(21, 22, 25, 0.98), rgba(12, 12, 14, 0.98));
    transform: translateY(-4px);
}

.pkg-badge {
    width: fit-content;
    font-size: 0.63rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 999px;
    padding: 0.32rem 0.65rem;
    color: #f3f4f6;
    background: rgba(255, 255, 255, 0.08);
}

.pkg-title {
    font-size: 1.2rem;
    margin: 0;
}

.pkg-price {
    display: flex;
    align-items: baseline;
    gap: 0.45rem;
}

.pkg-price strong {
    font-size: 2.15rem;
    letter-spacing: -0.03em;
}

.pkg-price span {
    color: var(--pkg-muted);
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.pkg-desc {
    color: var(--pkg-muted);
    line-height: 1.5;
    min-height: 48px;
}

.pkg-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.72rem;
}

.pkg-list li {
    font-size: 0.92rem;
    color: #e5e7eb;
    display: flex;
    gap: 0.55rem;
    align-items: flex-start;
}

.pkg-list li::before {
    content: "-";
    color: #ffffff;
    margin-top: -1px;
}

.pkg-actions {
    margin-top: auto;
}

.pkg-btn {
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 10px;
    padding: 0.8rem 0.95rem;
    font-size: 0.9rem;
    font-weight: 600;
    background: linear-gradient(180deg, #ffffff 0%, #dde0e7 100%);
    color: #0f1115;
}

.pkg-btn.dark {
    background: linear-gradient(180deg, #25262b 0%, #111217 100%);
    color: #f8fafc;
}

.pkg-table-wrap {
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    overflow: hidden;
    background: rgba(14, 14, 17, 0.88);
    margin-bottom: 1.2rem;
}

/* Fix: package.html puts overflow-x:auto on .pkg-table-wrap itself — the same
   element doing the border-radius clipping — so the rounded corners are lost
   the moment the table starts scrolling. Scrolling happens on this inner
   element instead, leaving the wrapper free to keep clipping. */
.pkg-table-scroll {
    overflow: hidden;
}

.pkg-table {
    width: 100%;
    border-collapse: collapse;
}

.pkg-table th,
.pkg-table td {
    text-align: left;
    padding: 0.85rem 0.95rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.9rem;
}

.pkg-table th {
    color: #f3f4f6;
    background: rgba(255, 255, 255, 0.03);
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.09em;
}

.pkg-table td {
    color: #d1d5db;
}

.pkg-table tr:last-child td {
    border-bottom: none;
}

.pkg-note {
    color: #9ca3af;
    margin: 0 0 1.8rem;
    line-height: 1.6;
}

.pkg-retainers {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.9rem;
}

.pkg-retainer {
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 0.95rem;
    background: rgba(255, 255, 255, 0.02);
}

.pkg-retainer h3 {
    font-size: 0.88rem;
    margin-bottom: 0.45rem;
}

.pkg-retainer p {
    color: #e5e7eb;
    font-size: 0.94rem;
}

.pkg-retainer span {
    color: #9ca3af;
    font-size: 0.78rem;
    display: block;
    margin-top: 0.35rem;
}

/* ═════════════════════════════════════════════════════════════
   PRICING — FIXES & ADDITIONS
   Everything below either corrects a defect carried in from
   package.html or adds a section /package/ does not have.
═════════════════════════════════════════════════════════════ */

/* ── Fix: the brand typeface ──
   base.html preconnects to Google Fonts but never links a stylesheet,
   so skills_listing.css asks for 'Inter', doesn't get it, and every
   base-extending page silently falls back to the system UI font. The
   template links Outfit + JetBrains Mono; this makes the page use them. */
.pkg-page,
.pkg-page h1,
.pkg-page h2,
.pkg-page h3 {
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
}

.pkg-kicker,
.pkg-toggle-label,
.pkg-price span,
.pkg-table th,
.pkg-badge,
.speed-uplift,
.term-card h3 {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
}

/* ── Fix: featured badge alignment ──
   package.html puts .pkg-badge in normal flow, which pushes the featured
   card's title down so the three titles no longer share a baseline. Lift
   it out of flow to straddle the top border instead. */
/* The featured card is lifted 4px by .pkg-card.featured's translateY, so it
   needs exactly that much extra top padding for its title to share a baseline
   with the other two. The badge is out of flow and costs no space. */
.pkg-card.featured {
    padding-top: calc(1.6rem + 4px);
}

.pkg-badge {
    position: absolute;
    top: -0.7rem;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    background: #1b1c20;
    z-index: 2;
}

/* ── Fix: the CTA was a dead button ──
   No href, no handler, no cursor, no hover. It is wired to Calendly in
   the template; these are the states it was missing. */
.pkg-btn {
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.pkg-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.55);
    filter: brightness(1.06);
}

.pkg-btn:active { transform: translateY(0); }

.pkg-btn:focus-visible {
    outline: 2px solid var(--pkg-white);
    outline-offset: 3px;
}

/* ── Fix: currency swap should not snap ──
   Prices are rewritten by JS. A brief fade stops the numbers popping. */
.price-val {
    transition: opacity 0.18s ease;
}

.pkg-page.swapping .price-val {
    opacity: 0.25;
}

/* ── Toggle: currency rather than billing period ──
   The switch is the same component; only its job changed. The naira side
   needs a touch more room than "Managed Monthly" did. */
.pkg-toggle-note {
    text-align: center;
    color: var(--pkg-muted);
    font-size: 0.78rem;
    margin: -1.9rem 0 2.4rem;
}

/* ── Delivery speed ── */
.speed-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.9rem;
    margin-bottom: 1.2rem;
}

.speed-card {
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1.1rem;
    background: rgba(255, 255, 255, 0.02);
}

.speed-card.highlight {
    border-color: rgba(255, 255, 255, 0.26);
    background: rgba(255, 255, 255, 0.05);
}

.speed-card h3 {
    font-size: 0.95rem;
    margin: 0 0 0.5rem;
}

.speed-uplift {
    display: inline-block;
    font-size: 1.35rem;
    letter-spacing: -0.02em;
    color: var(--pkg-white);
    margin-bottom: 0.5rem;
}

.speed-card p {
    color: #d1d5db;
    font-size: 0.88rem;
    line-height: 1.55;
}

/* ── Section headings between blocks ── */
.pkg-section-head {
    margin: 2.6rem 0 1.1rem;
}

.pkg-section-head h2 {
    font-size: 1.15rem;
    margin: 0 0 0.35rem;
}

.pkg-section-head p {
    color: var(--pkg-muted);
    font-size: 0.9rem;
    line-height: 1.6;
    margin: 0;
}

/* ── Terms ── */
.terms-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.9rem;
    margin-bottom: 1.8rem;
}

.term-card {
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1.1rem;
    background: rgba(255, 255, 255, 0.02);
}

.term-card h3 {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--pkg-muted);
    margin: 0 0 0.75rem;
}

.term-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.6rem;
}

.term-card li {
    font-size: 0.88rem;
    color: #d1d5db;
    line-height: 1.55;
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
}

.term-card li::before {
    content: "-";
    color: #ffffff;
}

/* ── Closing CTA ── */
.pkg-final {
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 18px;
    padding: 2.4rem 1.4rem;
    background: linear-gradient(160deg, rgba(21, 22, 25, 0.98), rgba(10, 10, 12, 0.98));
    margin-top: 2.6rem;
}

.pkg-final h2 {
    font-size: clamp(1.4rem, 3vw, 2rem);
    letter-spacing: -0.02em;
    margin: 0 0 0.7rem;
}

.pkg-final p {
    color: var(--pkg-muted);
    max-width: 620px;
    margin: 0 auto 1.5rem;
    line-height: 1.65;
}

.pkg-final .pkg-btn {
    width: auto;
    min-width: 260px;
    padding: 0.9rem 2rem;
}

/* ── Fix: the missing two-column step ──
   package.html jumps 3 → 1 at 980px, so tier cards go full-width and very
   tall on tablets. Step through 2 first. */
@media (max-width: 980px) {
    .pkg-pricing-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Three cards into two columns leaves one cell over. Spanning the LAST
       card fills it — Automation | Platform on row one, Product Build across
       row two. (Spanning the featured card instead strands two empty cells,
       since it can't share row one and can't start row two alone.)

       package.html drops the featured card's 4px lift at this width, so the
       top padding that compensated for it goes too. */
    .pkg-pricing-grid > .pkg-card:last-child {
        grid-column: span 2;
    }

    .pkg-card.featured {
        transform: none;
        padding-top: 1.6rem;
    }

    .speed-grid,
    .terms-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .terms-grid .term-card:last-child {
        grid-column: span 2;
    }

    .pkg-retainers {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .pkg-pricing-grid,
    .speed-grid,
    .terms-grid {
        grid-template-columns: 1fr;
    }

    .pkg-pricing-grid > .pkg-card:last-child {
        grid-column: span 1;
    }

    .terms-grid .term-card:last-child {
        grid-column: span 1;
    }

    .pkg-retainers {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    /* The navbar is shorter on mobile — same offset package.html uses. */
    .pkg-page {
        padding-top: 6.3rem;
    }

    .pkg-table-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .pkg-table {
        min-width: 660px;
    }

    .pkg-toggle-note {
        margin: -1.4rem 0 2rem;
        padding: 0 0.5rem;
    }

    .pkg-final .pkg-btn {
        width: 100%;
        min-width: 0;
    }
}