/* Go Premium page */
.premium-page { display: grid; width: 100%; max-width: 1000px; gap: 18px; margin-top: 24px; }
.premium-kicker { color: var(--accent); font-size: 12px; font-weight: 700; }
.premium-note { color: var(--muted-text); font-size: 13px; line-height: 1.55; }

.premium-hero,
.premium-card {
    background: radial-gradient(ellipse at 12% 0%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 68%), color-mix(in srgb, var(--panel-bg) 88%, transparent);
    border: 1px solid color-mix(in srgb, var(--border) 76%, var(--accent) 24%);
    border-radius: 14px;
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 6%, transparent);
}

.premium-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px; overflow: hidden; padding: 34px 32px; }
.premium-hero::before {
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 20%, transparent));
    content: "";
}
.premium-hero-copy { display: grid; gap: 10px; max-width: 620px; }
.premium-hero h2 { color: var(--text); font-size: 32px; line-height: 1.15; }
.premium-intro { color: var(--muted-text); font-size: 15px; line-height: 1.6; }
.premium-status { justify-self: start; margin-top: 4px; padding: 7px 14px; color: var(--text); background: var(--soft-bg); border: 1px solid var(--border); border-radius: 999px; font-size: 12px; font-weight: 600; }
.premium-status.is-premium { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
.premium-hero-mark { display: grid; width: 132px; height: 132px; place-items: center; background: color-mix(in srgb, var(--accent) 10%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border)); border-radius: 50%; box-shadow: none; }
.premium-hero-mark svg { width: 64px; height: 64px; fill: var(--accent); }

.premium-card { display: grid; gap: 14px; padding: 24px; }
.premium-card[hidden] { display: none; }
.premium-card-heading,
.premium-section-heading { display: grid; gap: 6px; }
.premium-card h2,
.premium-section-heading h2 { color: var(--text); font-size: 20px; }

/* Free month progress */
.premium-trial-progress { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; }
.premium-requirement { display: grid; gap: 8px; padding: 14px 16px; background: var(--soft-bg); border: 1px solid var(--border); border-radius: 10px; }
.premium-requirement-heading { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 6px; }
.premium-requirement-heading strong { color: var(--text); font-size: 13px; }
.premium-requirement-heading span { color: var(--muted-text); font-size: 12px; }
.premium-requirement.is-met .premium-requirement-heading span { color: var(--accent); font-weight: 700; }
.premium-requirement-track { height: 8px; overflow: hidden; background: color-mix(in srgb, var(--text) 8%, transparent); border-radius: 999px; }
.premium-requirement-track span { display: block; height: 100%; background: var(--accent); border-radius: inherit; }
.premium-trial-message { grid-column: 1 / -1; padding: 14px 16px; color: var(--text); background: color-mix(in srgb, var(--accent) 10%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border)); border-radius: 10px; font-size: 13px; line-height: 1.5; }

/* Features */
.premium-features { display: grid; gap: 14px; }
.premium-feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.premium-feature {
    display: grid;
    align-content: start;
    gap: 9px;
    padding: 22px;
    background: color-mix(in srgb, var(--panel-bg) 88%, transparent);
    border: 1px solid var(--border);
    border-radius: 12px;
}
.premium-feature-wide { grid-column: 1 / -1; border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
/* The aura card hints at the effect with soft ribbons of accent light. */
.premium-feature-aura { position: relative; overflow: hidden; }
.premium-feature-aura::before {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(176deg, transparent 30%, color-mix(in srgb, var(--accent) 11%, transparent) 46%, transparent 62%),
        linear-gradient(183deg, transparent 52%, color-mix(in srgb, var(--accent) 7%, transparent) 66%, transparent 80%);
    filter: blur(6px);
    content: "";
    pointer-events: none;
}
.premium-feature-aura > * { position: relative; }
/* Title on the left, icon in the top-right corner, on one line. */
.premium-feature-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.premium-feature-icon { display: grid; width: 40px; height: 40px; flex: 0 0 40px; place-items: center; background: color-mix(in srgb, var(--accent) 12%, transparent); border-radius: 10px; }
.premium-feature-icon svg { width: 22px; height: 22px; fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.premium-feature h3 { color: var(--text); font-size: 16px; }
.premium-feature p,
.premium-feature li { color: var(--muted-text); font-size: 13px; line-height: 1.55; }
.premium-feature ul { display: grid; gap: 7px; margin: 0; padding-left: 18px; }
.premium-feature li::marker { color: var(--accent); }
.premium-feature strong { color: var(--text); }

/* Free vs Premium table */
.premium-table-wrap { max-width: 100%; overflow-x: auto; }
.premium-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.premium-table th,
.premium-table td { padding: 11px 12px; border-bottom: 1px solid var(--border); }
.premium-table thead th { color: var(--muted-text); font-size: 12px; font-weight: 700; text-align: center; }
.premium-table thead th:first-child,
.premium-table tbody th { text-align: left; }
.premium-table tbody th { color: var(--text); font-weight: 500; }
.premium-table td { width: 90px; color: var(--accent); font-weight: 700; text-align: center; }
.premium-table td:first-of-type { color: var(--muted-text); }
.premium-table tr.is-premium-row td:first-of-type { color: color-mix(in srgb, var(--muted-text) 60%, transparent); font-weight: 400; }
.premium-table tbody tr:last-child th,
.premium-table tbody tr:last-child td { border-bottom: 0; }
.premium-table tr.is-premium-row th { color: var(--accent); font-weight: 600; }

/* Upgrade */
.premium-buy { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 20px; }
.premium-buy-copy { display: grid; gap: 6px; }
.premium-buy-action { display: grid; justify-items: end; gap: 8px; }
.premium-buy-button { padding: 13px 30px; color: var(--accent-ink); background: var(--accent); border: 0; border-radius: 999px; cursor: pointer; font-size: 15px; font-weight: 700; box-shadow: 0 8px 26px color-mix(in srgb, var(--accent) 30%, transparent); }
.premium-buy-button:hover { background: color-mix(in srgb, var(--accent) 88%, white); }
.premium-buy-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Beta access dialog */
.premium-dialog { width: min(440px, calc(100vw - 32px)); max-width: none; margin: auto; padding: 0; color: var(--text); background: var(--panel-bg); border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border)); border-radius: 14px; box-shadow: 0 24px 60px rgb(0 0 0 / 45%); }
.premium-dialog::backdrop { background: rgb(7 9 13 / 68%); backdrop-filter: blur(5px); }
.premium-dialog[open] { animation: premium-dialog-enter 200ms cubic-bezier(0.2, 0.75, 0.25, 1) both; }
.premium-dialog-form { display: grid; gap: 14px; padding: 22px; }
.premium-dialog-heading { display: flex; align-items: center; gap: 12px; }
.premium-dialog-heading > div { flex: 1; min-width: 0; }
.premium-dialog-heading h2 { margin-top: 2px; color: var(--text); font-size: 20px; }
.premium-dialog-close { align-self: flex-start; width: 30px; height: 30px; color: var(--muted-text); background: transparent; border: 1px solid var(--border); border-radius: 6px; cursor: pointer; font-size: 20px; line-height: 1; }
.premium-dialog-close:hover { color: var(--text); }
.premium-code-field { display: grid; gap: 6px; color: var(--text); font-size: 12px; font-weight: 600; }
.premium-code-field input { padding: 11px 12px; color: var(--text); background: var(--soft-bg); border: 1px solid var(--border); border-radius: 8px; font-family: ui-monospace, Consolas, monospace; font-size: 15px; letter-spacing: 1px; text-transform: uppercase; }
.premium-code-field input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.premium-code-field input::placeholder { color: var(--muted-text); letter-spacing: 0; text-transform: none; font-family: inherit; font-size: 13px; }
.premium-code-status { padding: 10px 12px; color: var(--text); background: color-mix(in srgb, var(--accent) 10%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border)); border-radius: 8px; font-size: 12px; line-height: 1.45; }
.premium-code-status.is-error { color: #ff8a92; background: color-mix(in srgb, #e95d68 10%, transparent); border-color: color-mix(in srgb, #e95d68 40%, var(--border)); }
.premium-code-status[hidden] { display: none; }
.premium-dialog-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.premium-dialog-actions .premium-buy-button { padding: 10px 22px; font-size: 13px; box-shadow: none; }
.premium-dialog-actions .premium-buy-button:disabled { cursor: wait; opacity: .6; }
.premium-dialog-secondary { padding: 10px 16px; color: var(--text); background: var(--soft-bg); border: 1px solid var(--border); border-radius: 999px; cursor: pointer; font-size: 13px; font-weight: 600; }
@keyframes premium-dialog-enter {
    from { opacity: 0; transform: translateY(8px) scale(.98); }
    to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .premium-dialog[open] { animation: none; } }

@media (max-width: 820px) {
    .premium-feature-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 600px) {
    .premium-hero { grid-template-columns: minmax(0, 1fr); padding: 26px 20px; }
    /* A smaller crown in the bottom-right corner instead of beside the text. */
    .premium-hero { padding-bottom: 30px; }
    .premium-hero-mark { position: absolute; right: 16px; bottom: 16px; width: 54px; height: 54px; box-shadow: none; }
    .premium-hero-mark svg { width: 26px; height: 26px; }
    .premium-status { max-width: calc(100% - 66px); }
    .premium-hero h2 { font-size: 26px; }
    .premium-card { padding: 18px; }
    .premium-trial-progress { grid-template-columns: minmax(0, 1fr); }
    .premium-buy { grid-template-columns: minmax(0, 1fr); }
    .premium-buy-action { justify-items: stretch; }
    /* Both plan columns stay on screen next to the feature names. */
    .premium-table { font-size: 12px; }
    .premium-table th,
    .premium-table td { padding: 10px 6px; }
    .premium-table td { width: 58px; }
    .premium-table thead th { font-size: 9px; letter-spacing: .5px; }
}

/* ----- Buying with Stripe: monthly or yearly, then Stripe's secure payment page ----- */
.premium-buy-action[hidden], .premium-plans[hidden], .premium-manage[hidden], .premium-billing-status[hidden] { display: none; }
.premium-plans { display: grid; justify-items: stretch; gap: 12px; width: min(100%, 420px); }
.premium-plan-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.premium-plan { display: grid; gap: 4px; padding: 14px 16px; color: var(--text); text-align: left; background: var(--soft-bg); border: 1px solid var(--border); border-radius: 14px; cursor: pointer; font: inherit; transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease; }
.premium-plan:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); }
.premium-plan[aria-checked="true"] { background: color-mix(in srgb, var(--accent) 10%, var(--soft-bg)); border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 10px 26px color-mix(in srgb, var(--accent) 18%, transparent); transform: translateY(-1px); }
.premium-plan:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.premium-plan-name { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--muted-text); font-size: 12px; font-weight: 600; }
.premium-plan-save { padding: 2px 7px; color: var(--accent-ink); background: var(--accent); border-radius: 999px; font-size: 10px; font-style: normal; letter-spacing: .3px; }
.premium-plan-save:empty { display: none; }
.premium-plan-price { font-size: 24px; line-height: 1.1; }
/* What a year costs paying monthly, crossed out next to the yearly price. */
.premium-plan-prices { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.premium-plan-full { color: var(--muted-text); font-size: 14px; font-weight: 600; text-decoration-thickness: 1.5px; }
.premium-plan-full:empty { display: none; }
.premium-plan small { color: var(--muted-text); font-size: 11px; }
.premium-plans-note { color: var(--muted-text); font-size: 12px; text-align: center; }
.premium-plans-free { padding: 10px 12px; color: var(--text); background: color-mix(in srgb, var(--accent) 8%, var(--soft-bg)); border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border)); border-radius: 12px; font-size: 13px; text-align: center; }
.premium-plans-terms { color: var(--muted-text); font-size: 11px; line-height: 1.5; text-align: center; }
.premium-plans-terms a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.premium-text-button { justify-self: center; padding: 2px; color: var(--muted-text); background: none; border: 0; cursor: pointer; font-size: 12px; text-decoration: underline; text-underline-offset: 3px; }
.premium-text-button:hover { color: var(--accent); }
.premium-manage { display: grid; justify-items: start; gap: 10px; }
.premium-billing-status { color: var(--text); font-size: 13px; }
.premium-billing-status.is-error { color: #ff7a85; }
body[data-mode="light"] .premium-plan-save { color: var(--accent-ink) !important; }
@media (max-width: 480px) {
    .premium-plan-options { grid-template-columns: 1fr; }
}
.premium-plans, .premium-manage, .premium-billing-status { grid-column: 1 / -1; }
.premium-plans { justify-self: center; }