styles.css

/* Global reset so spacing and sizing start from a clean baseline */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Include padding + border inside declared width/height */
}

/* Page‑level layout and background */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* System‑friendly type stack */
    background-color: #f7f7f4; /* Soft off‑white background for subtle contrast with cards */
    display: flex; /* Center the cards block inside the viewport */
    justify-content: center;
    align-items: center;
    min-height: 100vh; /* Ensure full‑height viewport on short pages */
    padding: 20px; /* Breathing room on small screens */
}

/* Horizontal container that holds the pricing cards */
.cards-container {
    display: flex;
    flex-direction: row;
    gap: 24px; /* Visual space between cards */
    flex-wrap: nowrap; /* Keep cards in a single row (can be made wrap if needed) */
    justify-content: center;
    align-items: flex-start; /* Align card tops to keep headers on one line */
}

/* Individual pricing card shell */
.card {
    display: flex;
    flex-direction: column; /* Stack header, content, and button vertically */
    min-height: 380px; /* Ensure enough height so buttons align across cards */
    background-color: #f2f1ed; /* Slightly darker than page for card contrast */
    border-radius: 4px; /* Subtle rounding to soften card edges */
    padding: 16px;
    width: 320px; /* Fixed width so cards feel consistent */
    flex-shrink: 0; /* Prevent cards from shrinking too tightly on narrow viewports */
}

/* Wrapper for the top portion of each card (title + price + features) */
.card-top {
    display: flex;
    flex-direction: column;
}

/* Plan title styling (Hobby / Pro) */
.card-title {
    font-size: 22px;
    line-height: 28px;
    font-weight: 400;
    color: #26251e; /* Dark neutral for strong readability */
    margin-bottom: 8px;
}

/* Price row: groups the amount and billing period */
.card-price {
    font-size: 20px;
    color: rgba(38, 37, 30, 0.5); /* Softer tone compared to the title */
    display: inline-flex; /* Keep price inline while aligning baselines */
    align-items: baseline; /* Align number and /mo. neatly on the baseline */
}

/* Main price number styling */
.card-price-amount {
    font-size: 22px;
    font-weight: 400;
    color: rgba(38, 37, 30, 0.5);
}

/* Billing cadence (e.g., /mo.) */
.card-price-period {
    font-size: 14px;
    color: rgba(38, 37, 30, 0.5);
}

/* Container for the "Includes" label and feature bullets */
.card-content {
    margin-bottom: 32px; /* Reserve room so the button has separation */
}

/* Small label above the feature list */
.includes-text {
    font-size: 16px;
    color: rgba(38, 37, 30, 0.5);
    margin: 16px 0px;
}

/* Remove default list styling so we can fully control layout */
.features-list {
    list-style: none;
    padding: 0;
}

/* Each feature row inside the list */
.features-list li {
    display: flex; /* Align checkmark and text on one row */
    align-items: center;
    margin-bottom: 8px;
    font-size: 16px;
    color: #26251e;
}

/* Checkmark icon to the left of each feature */
.checkmark {
    color: #26251e;
    font-size: 14px;
    margin-right: 10px; /* Space between icon and text */
    font-weight: 400;
}

/* Base visual style for all card buttons */
.download-button {
    margin-top: auto; /* Push button to the bottom of the card */
    width: fit-content; /* Button grows just large enough for its text */
    background-color: #e6e5e0;
    border: none;
    border-radius: 999px; /* Full pill shape */
    padding: 14px 24px;
    font-size: 16px;
    font-weight: 500;
    color: #333;
    cursor: pointer;
    transition: background-color 0.2s ease; /* Subtle hover feedback */
}

/* Hover state for the neutral (secondary) button */
.download-button:hover {
    background-color: #D8D6CE;
}

/* Active/pressed state keeps the same tone for quick taps */
.download-button:active {
    background-color: #D8D6CE;
}

/* Primary button variant used for the Pro plan */
.download-button.primary {
    background-color: #111; /* Strong contrast, feels like main CTA */
    color: #fff;
}

/* Slightly lighter hover state for the primary button */
.download-button.primary:hover {
    background-color: #333;
}

/* Keep pressed state consistent with hover for a simple interaction model */
.download-button.primary:active {
    background-color: #333;
}

.download-button.tertiary {
    background-color: transparent;
    color: #333;
    border: 1px solid #c2c1ba;
}

.download-button.tertiary:hover {
    background-color: #e0dfdb;
}

.download-button.tertiary:active {
    background-color: #e0dfdb;
}

.page-label {
    position: fixed;
    top: 16px;
    left: 50%;
    transform: translateX(-50%); /* Center horizontally by shifting half its width */
    font-size: 14px;
    color: #666;
    background: #fff;
    padding: 8px 16px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08); /* Soft, subtle elevation */
}

/* Highlight the "HTML version" text within the page label */
.page-label strong {
    color: #333;
}