/* =====================================================================
   examina.io — Plans & Pricing page (ported from the approved mock)
   Class names deliberately mirror the mock's own stylesheet so the
   template can be diffed against the mock draft.
   ===================================================================== */

.plans-page { font-size: 15px; background: #fff; }

.pl-container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

.text-gradient {
    background: var(--ex-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.bg-gradient { background: var(--ex-gradient); }

.btn-pill {
    border-radius: 9999px;
    transition: all .3s cubic-bezier(.4, 0, .2, 1);
    padding: 12px 32px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 0;
    cursor: pointer;
    text-decoration: none;
}
.btn-pill:hover { transform: translateY(-2px); box-shadow: 0 10px 20px -5px rgba(0, 172, 172, .3); text-decoration: none; }
.btn-pill--gradient { background: var(--ex-gradient); color: #fff; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1); }
.btn-pill--gradient:hover { color: #fff; }
.btn-pill--slate-soft { background: #f8fafc; color: #475569; }
.btn-pill--slate-soft:hover { background: #f1f5f9; color: #475569; }
.btn-pill--slate { background: #0f172a; color: #fff; }
.btn-pill--slate:hover { background: #1e293b; color: #fff; }
.btn-pill--outline { background: transparent; border: 1px solid #e2e8f0; color: #475569; }
.btn-pill--outline:hover { border-color: var(--ex-teal); color: #0d9488; }
.btn-pill--amber { background: #f59e0b; color: #0f172a; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1); }
.btn-pill--amber:hover { background: #d97706; color: #0f172a; }
.btn-pill--white { background: #fff; color: #0f172a; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1); }
.btn-pill--white:hover { color: #0f172a; }

/* ------------------------------ Page hero ----------------------------- */
.pl-hero {
    background: var(--ex-soft-teal);
    padding: 80px 0;
    overflow: hidden;
    position: relative;
}
.pl-hero__blob {
    position: absolute;
    top: -96px; right: -96px;
    width: 384px; height: 384px;
    background: #ccfbf1;
    border-radius: 50%;
    filter: blur(64px);
    opacity: .5;
}
.pl-hero__inner { position: relative; z-index: 10; text-align: center; }
.pl-eyebrow {
    display: inline-block;
    padding: 6px 16px;
    margin-bottom: 24px;
    font-size: .875rem;
    font-weight: 700;
    letter-spacing: .05em;
    color: #0f766e;
    background: rgba(204, 251, 241, .5);
    border-radius: 9999px;
    text-transform: uppercase;
}
.pl-hero h1 {
    font-size: 3.75rem;
    line-height: 1.1;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 24px;
}
.pl-hero p {
    color: #475569;
    font-size: 1.25rem;
    max-width: 672px;
    margin: 0 auto;
    line-height: 1.65;
}

/* --------------------------- Currency selector ------------------------ */
.pl-currency-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 48px 24px;
}
.pl-currency {
    display: inline-flex;
    align-items: center;
    background: #fff;
    border: 1px solid #f1f5f9;
    padding: 6px;
    border-radius: 9999px;
    box-shadow: var(--ex-shadow-sm);
}
.pl-currency a {
    padding: 10px 32px;
    font-size: .875rem;
    font-weight: 700;
    color: #64748b;
    border-radius: 9999px;
    transition: all .2s;
}
.pl-currency a:hover { text-decoration: none; color: #0d9488; }
.pl-currency a.is-selected { color: #0d9488; background: #f0fdfa; }

/* ------------------------------ Pricing grid -------------------------- */
.pl-cards { padding-bottom: 96px; }
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
}
.pricing-card {
    border-radius: 24px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #edf2f7;
    transition: all .3s ease;
}
.pricing-card:hover { transform: translateY(-8px); box-shadow: 0 20px 40px -10px rgba(0, 0, 0, .05); }
.pricing-card.featured {
    border: 2px solid var(--ex-teal);
    transform: scale(1.05);
    z-index: 10;
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, .1);
}
.pricing-card.custom { border: 2px solid var(--ex-amber); }
.pricing-card__ribbon {
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 6px 0;
    text-align: center;
    letter-spacing: .2em;
    text-transform: uppercase;
}
.pricing-card.custom .pricing-card__ribbon { background: #f59e0b; color: #0f172a; }
.pricing-card__body { padding: 32px; flex: 1; }
.pricing-card h3 {
    font-size: .875rem;
    font-weight: 800;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: .1em;
    margin-bottom: 24px;
}
.pricing-card.featured h3, .pricing-card.custom h3 { color: #0f172a; }
.pricing-card__price { display: flex; align-items: baseline; gap: 4px; margin-bottom: 32px; flex-wrap: wrap; }
.pricing-card__amount { font-size: 2.25rem; font-weight: 900; color: #0f172a; font-family: var(--ex-font-display); }
.pricing-card__amount--sm { font-size: 1.5rem; }
.pricing-card__tenure { color: #94a3b8; font-size: .75rem; font-weight: 700; margin-left: 4px; }
.pricing-card ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.pricing-card li { display: flex; align-items: flex-start; gap: 8px; font-size: .875rem; color: #475569; }
.pricing-card li svg { width: 16px; height: 16px; color: #14b8a6; flex: 0 0 16px; margin-top: 3px; }
.pricing-card.custom li svg { color: #f59e0b; }
.pricing-card li.emph { font-weight: 600; color: #334155; }
.pricing-card li.star { font-weight: 700; color: #0d9488; }
.pricing-card li.ai-credit { font-weight: 700; color: #0f766e; }
.pricing-card .ai-credit__copy { display: flex; min-width: 0; flex-direction: column; line-height: 1.35; }
.pricing-card .ai-credit__copy small { margin-top: 3px; color: #64748b; font-size: .7rem; font-weight: 600; }
.pricing-card__foot { padding: 0 32px 32px; margin-top: auto; }
.pricing-card__foot .btn-pill { width: 100%; }

/* ------------------------------- Footnotes ---------------------------- */
.pl-footnotes { margin-top: 64px; }
.pl-footnotes ul {
    list-style: none;
    margin: 0; padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    font-size: .75rem;
    color: #94a3b8;
    font-weight: 500;
}
.pl-footnotes li { display: flex; align-items: flex-start; gap: 8px; }
.pl-footnotes strong { color: #0d9488; font-weight: 700; flex-shrink: 0; }

/* -------------------------- AI plan explainer ------------------------ */
.pl-ai { padding: 96px 0; background: var(--ex-soft-teal); }
.pl-ai .pl-section-head { margin-bottom: 48px; }
.pl-ai__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}
.pl-ai__card {
    padding: 32px;
    border: 1px solid #ccfbf1;
    border-radius: 24px;
    background: #fff;
    box-shadow: var(--ex-shadow-sm);
}
.pl-ai__card > span {
    display: inline-grid;
    width: 40px;
    height: 40px;
    place-items: center;
    margin-bottom: 20px;
    border-radius: 14px;
    background: #f0fdfa;
    color: #0f766e;
    font-weight: 900;
}
.pl-ai__card h3 { margin: 0 0 12px; color: #0f172a; font-size: 1.15rem; }
.pl-ai__card p { margin: 0; color: #475569; line-height: 1.7; }
.pl-ai__card strong { color: #0f766e; }
.pl-ai__action { margin-top: 32px; text-align: center; }

/* --------------------------- Comparison table ------------------------- */
.pl-compare { padding: 96px 0; background: #fff; }
.pl-section-head { text-align: center; margin-bottom: 64px; }
.pl-section-head h2 { font-size: 2.25rem; font-weight: 800; color: #0f172a; margin-bottom: 0; }
.pl-section-head p { color: #64748b; margin: 16px 0 0; }

.comparison-table-container {
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid #edf2f7;
    box-shadow: 0 4px 20px -5px rgba(0, 0, 0, .05);
}
.comparison-table-container .table-scroll { overflow-x: auto; }
.cmp-table { width: 100%; text-align: left; border-collapse: collapse; }
.cmp-table thead tr { background: #f8fafc; border-bottom: 1px solid #f1f5f9; }
.cmp-table th {
    padding: 24px;
    font-size: .875rem;
    font-weight: 700;
    color: #0f172a;
    text-align: center;
    white-space: nowrap;
}
.cmp-table th.cmp-feature-head {
    min-width: 200px;
    text-align: left;
    font-size: .75rem;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: .1em;
}
.cmp-table th.is-featured { color: #0d9488; background: rgba(240, 253, 250, .3); }
.cmp-table th.is-amber { color: #d97706; }
.cmp-table tbody tr { border-bottom: 1px solid #f8fafc; }
.cmp-table tbody tr:last-child { border-bottom: 0; }
.cmp-table td { padding: 24px; font-size: .875rem; text-align: center; color: #475569; }
.cmp-table td.cmp-feature { font-weight: 700; color: #334155; text-align: left; }
.cmp-table td.is-featured { background: rgba(240, 253, 250, .3); }

/* Comparison legend */
.pl-legend {
    margin-top: 32px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
}
.pl-legend p {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: .75rem;
    color: #64748b;
    font-weight: 700;
}

/* Font Awesome class names arrive from the pricing model (comparison cells,
   legend). The public pages do not load Font Awesome, so the glyphs are
   rendered with CSS masks instead. */
.plans-page .fa, .plans-page .far, .plans-page .fas {
    display: inline-block;
    width: 18px; height: 18px;
    vertical-align: middle;
    background-color: currentColor;
    -webkit-mask-position: center; mask-position: center;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-size: contain; mask-size: contain;
}
.plans-page .fa-check {
    color: #14b8a6;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.plans-page .fa-times {
    color: #cbd5e1;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E");
}
.plans-page .far.fa-star {
    color: #f59e0b;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linejoin='round' d='M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linejoin='round' d='M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z'/%3E%3C/svg%3E");
}
.plans-page .fas.fa-star {
    color: #f59e0b;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z'/%3E%3C/svg%3E");
}
.plans-page .fa-star-of-life {
    color: #0d9488;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' d='M12 6v12M17.196 9 6.804 15M6.804 9l10.392 6'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' d='M12 6v12M17.196 9 6.804 15M6.804 9l10.392 6'/%3E%3C/svg%3E");
}

/* ---------------------------- Custom CTA band ------------------------- */
.pl-band { padding: 64px 0; background: #0f172a; }
.pl-band__inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    text-align: left;
}
.pl-band h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: -.025em;
}
.pl-band p { color: #94a3b8; margin: 0; }

/* --------------------------------- FAQ -------------------------------- */
.pl-faq { padding: 96px 0; background: var(--ex-soft-blue); }
.pl-faq__list {
    max-width: 768px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.accordion-card {
    border-radius: 16px;
    border: 1px solid #edf2f7;
    background: #fff;
    transition: all .3s;
    padding: 0;
}
.accordion-card:hover { border-color: var(--ex-teal); }
.accordion-card[open] {
    border: 2px solid rgba(20, 184, 166, .2);
    box-shadow: var(--ex-shadow-sm);
}
.accordion-card summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    cursor: pointer;
    padding: 32px;
    list-style: none;
}
.accordion-card summary::-webkit-details-marker { display: none; }
.accordion-card summary h4 {
    font-weight: 700;
    font-size: 1.125rem;
    color: #0f172a;
    margin: 0;
}
.accordion-card summary svg {
    width: 20px; height: 20px;
    color: #94a3b8;
    flex: 0 0 20px;
    transition: transform .2s;
}
.accordion-card[open] summary svg { color: #0d9488; transform: rotate(180deg); }
.accordion-card__body {
    padding: 0 32px 32px;
    color: #475569;
    line-height: 1.65;
}
.accordion-card__body p { margin: 0 0 12px; }
.accordion-card__body p:last-child { margin-bottom: 0; }

/* ------------------------------ Responsive ---------------------------- */
@media (max-width: 1023px) {
    .pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pricing-card.featured { transform: none; }
    .pl-ai__grid { grid-template-columns: minmax(0, 1fr); }
    .pl-hero h1 { font-size: 2.75rem; }
}
@media (max-width: 767px) {
    .pricing-grid { grid-template-columns: minmax(0, 1fr); }
    .pl-hero { padding: 56px 0; }
    .pl-hero h1 { font-size: 2.25rem; }
    .pl-ai, .pl-compare, .pl-faq { padding: 64px 0; }
    .pl-band__inner { flex-direction: column; text-align: center; }
    .accordion-card summary { padding: 24px; }
    .accordion-card__body { padding: 0 24px 24px; }
}

/* Mobile-only feature labels inside comparison cells */
.comparison-label { display: none; font-weight: 600; color: var(--ex-muted); margin-right: 8px; }
@media (max-width: 767px) {
    .comparison-label { display: inline; }
}