/* Pricing page - reuses the tokens defined by login.css / about.css */

.pricing-hero {
    text-align: center;
    padding: 2rem 0 2.5rem;
}
.pricing-hero h1 {
    font-size: 2.2rem;
    font-weight: 800;
    margin-bottom: 0.75rem;
}
.pricing-hero .tagline {
    color: var(--login-accent);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-bottom: 1rem;
}
.pricing-hero p {
    color: var(--text-muted);
    font-size: 1.05rem;
    max-width: 640px;
    margin: 0 auto;
    line-height: 1.7;
}

.pricing-section { margin-bottom: 3rem; }
.pricing-section h2 {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 10px;
}
.pricing-section h2 i { color: var(--login-accent); font-size: 1.2rem; }
.pricing-section p,
.pricing-section li {
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.8;
}

/* --- plan cards --- */
.plan-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.25rem;
    margin-top: 1.5rem;
}
.plan-card {
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    padding: 1.5rem 1.25rem;
    display: flex;
    flex-direction: column;
    position: relative;
    background: rgba(255, 255, 255, 0.02);
}
.plan-card.featured {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent);
}
.plan-card .badge {
    position: absolute;
    top: -11px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--accent);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 3px 12px;
    border-radius: 999px;
    white-space: nowrap;
}
.plan-card h3 {
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}
.plan-card .price {
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1.2;
}
.plan-card .price small {
    display: block;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-muted);
    margin-top: 0.3rem;
}

/* Discounted pricing. The struck list price sits above the price actually
   charged, with the saving stated beside it so nobody has to do the sum.

   The one deliberate flourish is the strike rule itself, drawn in the lifted
   brand gold rather than the browser's default grey: it reads as a mark made
   on the page instead of a rendering artefact. Page-local names are prefixed
   because theme.html loads after this file and would win any shared name. */
:root {
    --pricing-was: rgba(255, 255, 255, 0.6);
}
.plan-card .price-was {
    display: block;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--pricing-was);
    text-decoration: line-through;
    text-decoration-thickness: 2px;
    text-decoration-color: var(--login-accent);
    margin-bottom: 0.15rem;
}
.plan-card .price-now {
    display: inline;
}
.plan-card .price-save {
    display: inline-block;
    vertical-align: 0.32em;
    margin-left: 0.5rem;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--login-accent);
    background: color-mix(in srgb, var(--login-accent) 16%, transparent);
    border: 1px solid color-mix(in srgb, var(--login-accent) 42%, transparent);
}
.plan-card .positioning {
    font-style: italic;
    color: var(--login-accent);
    font-size: 0.85rem;
    margin: 0.9rem 0;
    line-height: 1.5;
}
.plan-card ul { list-style: none; padding: 0; margin: 0 0 1rem; }
.plan-card ul li {
    color: var(--text-muted);
    font-size: 0.85rem;
    line-height: 1.6;
    padding: 0.3rem 0;
    display: flex;
    gap: 8px;
    align-items: flex-start;
}
.plan-card ul li i { color: var(--login-accent); font-size: 0.8rem; margin-top: 5px; }
.plan-card .plan-meta {
    margin-top: auto;
    padding-top: 0.9rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.6;
}

/* --- tables --- */
.pricing-table-wrap { overflow-x: auto; margin-top: 1rem; }
.pricing-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    min-width: 560px;
}
.pricing-table th,
.pricing-table td {
    padding: 0.6rem 0.7rem;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-muted);
    line-height: 1.5;
}
.pricing-table thead th {
    color: var(--text);
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-bottom: 2px solid var(--accent);
    white-space: nowrap;
}
.pricing-table tbody tr:hover { background: rgba(255, 255, 255, 0.03); }
.pricing-table td.yes { color: var(--login-accent); font-weight: 700; text-align: center; }
.pricing-table td.no  { text-align: center; opacity: 0.45; }
.pricing-table td.lvl { text-align: center; font-size: 0.8rem; }
.pricing-table td:first-child { color: var(--text); font-weight: 500; }

.pricing-note {
    font-size: 0.8rem;
    color: var(--text-muted);
    opacity: 0.85;
    margin-top: 0.9rem;
    line-height: 1.6;
}

.pricing-cta {
    text-align: center;
    padding: 2rem 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    margin-top: 1rem;
}
.pricing-cta p { font-size: 1.05rem; margin-bottom: 1rem; }
.pricing-cta a {
    display: inline-block;
    background: var(--accent);
    color: #fff;
    padding: 0.7rem 1.6rem;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
}
.pricing-cta a:hover { opacity: 0.9; }

@media (max-width: 640px) {
    .pricing-hero h1 { font-size: 1.7rem; }
    .plan-grid { grid-template-columns: 1fr; }
}

/* --- feature items with hover summaries -----------------------------------
   The description is always in the DOM (readable by screen readers and
   search engines). On pointer devices it is shown as a tooltip on hover or
   keyboard focus; on touch devices, where hover does not exist, it is shown
   inline instead so the content is never unreachable.                       */

.feat {
    position: relative;
    padding: 0.3rem 0;
    display: flex;
    gap: 8px;
    align-items: flex-start;
    cursor: help;
    outline: none;
}
.feat > i { color: var(--login-accent); font-size: 0.8rem; margin-top: 5px; flex-shrink: 0; }
.feat .feat-name {
    color: var(--text-muted);
    font-size: 0.85rem;
    line-height: 1.6;
    border-bottom: 1px dotted rgba(255, 255, 255, 0.25);
}
.feat:hover .feat-name,
.feat:focus .feat-name { color: var(--text); border-bottom-color: var(--login-accent); }

.feat .feat-desc {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    z-index: 30;
    width: max-content;
    max-width: 280px;
    background: #0f172a;
    color: #e2e8f0;
    border: 1px solid var(--accent);
    border-radius: 8px;
    padding: 0.6rem 0.75rem;
    font-size: 0.78rem;
    line-height: 1.55;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
    pointer-events: none;
}
.feat .feat-desc::after {              /* little arrow */
    content: "";
    position: absolute;
    top: 100%;
    left: 18px;
    border: 6px solid transparent;
    border-top-color: var(--login-accent);
}
.feat:hover .feat-desc,
.feat:focus .feat-desc {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Table rows use the same pattern but anchor the tooltip below the cell. */
.pricing-table .feat { display: inline-flex; }
.pricing-table .feat .feat-desc { bottom: auto; top: calc(100% + 8px); }
.pricing-table .feat .feat-desc::after {
    top: auto;
    bottom: 100%;
    border-top-color: transparent;
    border-bottom-color: var(--login-accent);
}

/* Touch devices: no hover, so show the summary inline instead of hiding it. */
@media (hover: none) {
    .feat { flex-wrap: wrap; cursor: default; }
    .feat .feat-name { border-bottom: none; }
    .feat .feat-desc {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        width: 100%;
        max-width: 100%;
        margin: 0.25rem 0 0.4rem 20px;
        background: transparent;
        border: none;
        border-left: 2px solid var(--accent);
        border-radius: 0;
        box-shadow: none;
        padding: 0 0 0 0.6rem;
        font-size: 0.75rem;
        color: var(--text-muted);
        opacity: 0.85;
    }
    .feat .feat-desc::after { display: none; }
    .pricing-table .feat { display: flex; }
    .pricing-table .feat .feat-desc { display: none; }   /* keep tables compact */
}