.premium-feature-link { display: inline-flex; align-items: center; gap: .5rem; margin: .5rem 0 1rem; color: var(--hp-forest-dark, #10261d); font-weight: 700; text-decoration: underline; text-underline-offset: .2em; }
    .premium-feature-link:hover { color: #80652e; }
    .premium-page {
        /*
         * Premium uses the same wide host workspace as the Host Dashboard.
         * Use the whole available content canvas on desktop.
         */
        width: 100%;
        max-width: none;
        margin: 28px 0 48px;
        padding-bottom: 28px;
    }

    .premium-hero {
        display: flex;
        justify-content: space-between;
        gap: 28px;
        align-items: center;
        margin-bottom: 18px;
        padding: 24px 28px;
        border: 1px solid #e7e1d6;
        border-radius: 24px;
        background:
            linear-gradient(135deg, #f8f5ee 0%, #fff 58%, #edf4f0 100%);
    }

    .premium-hero h1,
    .premium-section-heading h2,
    .premium-intro-card h2 {
        margin: 7px 0 10px;
        color: var(--hp-forest);
        font-family: "Playfair Display", Georgia, serif;
        font-weight: 600;
    }

    .premium-hero h1 {
        font-size: clamp(32px, 3.4vw, 46px);
        line-height: 1.03;
    }

    .premium-hero p,
    .premium-section-heading p,
    .premium-intro-card p {
        max-width: 920px;
        margin: 0;
        color: var(--hp-grey-600);
        line-height: 1.55;
    }

    .premium-eyebrow,
    .premium-plan-kicker {
        color: var(--hp-gold);
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 1.6px;
    }

    .premium-current-plan {
        flex: 0 0 auto;
        min-width: 190px;
        padding: 18px 20px;
        border: 1px solid rgba(24, 61, 50, .14);
        border-radius: 18px;
        background: rgba(255,255,255,.82);
    }

    .premium-current-plan span {
        display: block;
        margin-bottom: 4px;
        color: var(--hp-grey-600);
        font-size: 12px;
    }

    .premium-current-plan strong {
        color: var(--hp-forest);
        font-size: 18px;
    }

    .premium-current-source,
    .premium-current-expiry {
        display: block;
        margin-top: 5px;
        color: var(--hp-grey-600);
        font-size: 10px;
        line-height: 1.35;
    }

    .premium-current-source {
        color: var(--hp-gold);
        font-weight: 800;
    }

    .premium-message {
        margin-bottom: 22px;
        padding: 14px 16px;
        border: 1px solid #ead8a6;
        border-radius: 12px;
        background: #fff8e7;
        color: #6f5720;
    }

    .premium-message-success {
        border-color: #badbc3;
        background: #eaf6ed;
        color: #245b34;
    }

    .premium-section {
        margin-top: 20px;
    }

    .premium-section-heading {
        margin-bottom: 12px;
    }

    .premium-section-heading h2 {
        margin-bottom: 5px;
    }

    .premium-tool-grid {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 10px;
    }

    .premium-tool-card {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        min-height: 88px;
        padding: 13px 14px;
        border: 1px solid #e5e1d9;
        border-radius: 18px;
        background: #fff;
        color: inherit;
        text-decoration: none;
        transition: transform .15s ease, box-shadow .15s ease;
    }

    .premium-tool-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 28px rgba(23, 46, 38, .08);
    }

    .premium-tool-icon {
        display: grid;
        place-items: center;
        width: 34px;
        height: 34px;
        flex: 0 0 34px;
        border-radius: 10px;
        background: #f3eee4;
        font-size: 14px;
    }

    .premium-tool-card h3 {
        margin: 1px 0 4px;
        color: var(--hp-forest);
        font-size: 16px;
        line-height: 1.15;
    }

    .premium-tool-card p {
        margin: 0;
        color: var(--hp-grey-600);
        font-size: 11px;
        line-height: 1.35;
    }

    .premium-intro-card,
    .premium-test-panel {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
        margin-top: 14px;
        padding: 18px 22px;
        border: 1px solid #e5e1d9;
        border-radius: 20px;
        background: #fff;
    }

    .premium-plan-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 10px;
    }

    .premium-plan-card {
        position: relative;
        display: flex;
        min-width: 0;
        flex-direction: column;
        padding: 16px;
        border: 1px solid #e5e1d9;
        border-radius: 22px;
        background: #fff;
    }

    .premium-plan-card.is-current {
        border-color: var(--hp-gold);
        box-shadow: 0 12px 30px rgba(197,154,74,.12);
    }

    .premium-plan-card-featured {
        border-color: rgba(197,154,74,.62);
        box-shadow: 0 15px 34px rgba(24,61,50,.07);
    }

    .premium-plan-card-pro {
        background:
            linear-gradient(
                180deg,
                #ffffff 0%,
                #faf9f6 100%);
    }

    .premium-plan-card-free {
        background:
            linear-gradient(
                180deg,
                #ffffff 0%,
                #fbfbf9 100%);
    }

    .premium-plan-card > p {
        margin: 0 0 12px;
        color: var(--hp-grey-600);
        font-size: 12px;
        line-height: 1.45;
    }

    .premium-plan-card ul {
        margin: 12px 0 0;
        padding: 0;
        list-style: none;
    }

    .premium-plan-card li {
        position: relative;
        margin: 0 0 7px;
        padding-left: 18px;
        color: #46544e;
        font-size: 12px;
        line-height: 1.35;
    }

    .premium-plan-card li::before {
        content: "✓";
        position: absolute;
        left: 0;
        top: 0;
        color: var(--hp-forest);
        font-weight: 900;
    }

    .premium-plan-fee-free {
        background: #f5f5f1;
    }

    .premium-plan-highlight {
        position: absolute;
        top: 18px;
        right: 18px;
        display: inline-flex;
        align-items: center;
        min-height: 25px;
        padding: 5px 9px;
        border-radius: 999px;
        background: #f4e8c9;
        color: #77591f;
        font-size: 9px;
        font-weight: 900;
        letter-spacing: .06em;
        text-transform: uppercase;
    }

    .premium-plan-highlight-muted {
        background: #edf0ee;
        color: #5f6b66;
    }

    .premium-plan-card h3 {
        margin: 8px 0 10px;
        color: var(--hp-forest);
        font-family: "Playfair Display", Georgia, serif;
        font-size: 22px;
        font-weight: 600;
    }

    .premium-plan-price {
        display: grid;
        gap: 2px;
        margin: 0 0 11px;
    }

    .premium-plan-price > div {
        display: flex;
        align-items: baseline;
        gap: 5px;
    }

    .premium-plan-price > div strong {
        color: var(--hp-forest);
        font-family: "Playfair Display", Georgia, serif;
        font-size: 31px;
        font-weight: 600;
        line-height: 1;
    }

    .premium-plan-price > div span {
        color: var(--hp-grey-600);
        font-size: 11px;
    }

    .premium-plan-price small {
        color: #6f7a75;
        font-size: 10px;
        font-weight: 700;
    }

    .premium-plan-price small strong {
        color: #35584b;
    }

    .premium-plan-coming-price {
        margin: 5px 0 18px;
        color: #69746f;
        font-size: 12px;
        font-weight: 800;
    }

    .premium-plan-card p {
        min-height: 58px;
        margin: 0;
        color: var(--hp-grey-600);
        line-height: 1.5;
    }

    .premium-plan-fee {
        display: grid;
        gap: 3px;
        margin: 12px 0 3px;
        padding: 10px 12px;
        border: 1px solid #e3ddd2;
        border-radius: 12px;
        background: #faf8f2;
    }

    .premium-plan-fee-best {
        border-color: #c9dccf;
        background: #eff7f1;
    }

    .premium-plan-fee strong {
        color: var(--hp-forest);
        font-size: 12px;
    }

    .premium-plan-fee span {
        color: #6e7974;
        font-size: 9px;
    }

    .premium-plan-fee small {
        margin-top: 4px;
        padding-top: 6px;
        border-top: 1px solid rgba(32,55,47,.10);
        color: #6b7671;
        font-size: 8px;
        font-weight: 750;
        line-height: 1.4;
    }

    .premium-plan-card ul {
        margin: 12px 0 0;
        padding: 0;
        list-style: none;
    }

    .premium-plan-card li {
        position: relative;
        margin: 7px 0;
        padding-left: 24px;
        color: #43504a;
    }

    .premium-plan-card li::before {
        content: "✓";
        position: absolute;
        left: 0;
        color: var(--hp-forest);
        font-weight: 800;
    }

    .premium-plan-processing {
        margin-top: auto;
        padding-top: 17px;
        color: #7d8682;
        font-size: 9px;
        line-height: 1.5;
    }

    .premium-pricing-note {
        display: flex;
        align-items: flex-start;
        gap: 14px;
        margin-top: 18px;
        padding: 17px 19px;
        border: 1px solid #e4dfd6;
        border-radius: 16px;
        background: #faf9f6;
    }

    .premium-pricing-note-icon {
        display: grid;
        width: 35px;
        height: 35px;
        flex: 0 0 35px;
        place-items: center;
        border-radius: 50%;
        background: #eaf3ed;
        color: var(--hp-forest);
        font-size: 15px;
        font-weight: 900;
    }

    .premium-pricing-note strong {
        color: var(--hp-forest);
        font-size: 11px;
    }

    .premium-pricing-note p {
        min-height: 0;
        margin: 5px 0 0;
        color: #6f7975;
        font-size: 10px;
        line-height: 1.55;
    }

    .premium-plan-title-row {
        display: flex;
        align-items: center;
        gap: 9px;
        min-width: 0;
    }

    .premium-plan-title-row h3 {
        margin-right: 0;
    }

    .premium-plan-active-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        min-height: 22px;
        padding: 4px 8px;
        border-radius: 999px;
        background: #e7f3ec;
        color: #1f6448;
        border: 1px solid rgba(31, 100, 72, .16);
        font-size: 9px;
        font-weight: 900;
        letter-spacing: .05em;
        line-height: 1;
        text-transform: uppercase;
    }

    .premium-test-panel {
        margin-top: 34px;
        background: #f8f8f7;
    }

    .premium-test-form {
        display: flex;
        gap: 10px;
        align-items: center;
    }

    .premium-test-form select {
        min-width: 190px;
        padding: 11px 12px;
        border: 1px solid #d8d5cf;
        border-radius: 10px;
        background: #fff;
    }

    .premium-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 42px;
        padding: 10px 17px;
        border-radius: 10px;
        font-weight: 800;
        text-decoration: none;
        cursor: pointer;
    }

    .premium-button-primary {
        border: 1px solid var(--hp-forest);
        background: var(--hp-forest);
        color: #fff;
    }

    .premium-button-secondary {
        border: 1px solid #d8d5cf;
        background: #fff;
        color: var(--hp-forest);
    }

    .premium-button-disabled,
    .premium-button-disabled:disabled {
        border: 1px solid #d7d9d5;
        background: #eceeeb;
        color: #7c8580;
        cursor: not-allowed;
        opacity: 1;
    }

    .premium-manage-billing-form {
        margin-top: 8px;
    }

    .premium-inline-link {
        padding: 0;
        border: 0;
        background: transparent;
        color: var(--hp-forest);
        font-size: 11px;
        font-weight: 800;
        cursor: pointer;
    }

    .premium-plan-actions {
        display: grid;
        gap: 8px;
        margin-top: auto;
        padding-top: 18px;
    }

    .premium-plan-actions form {
        margin: 0;
    }

    .premium-plan-action-button {
        width: 100%;
    }

    .premium-plan-action-button:disabled {
        cursor: not-allowed;
        opacity: .55;
    }

    @media (min-width: 1280px) {
        .premium-current-plan {
            min-width: 170px;
            padding: 14px 16px;
        }

        .premium-intro-card h2 {
            margin-bottom: 4px;
        }

        .premium-intro-card p {
            line-height: 1.45;
        }

        .premium-plan-highlight {
            top: 14px;
            right: 14px;
        }
    }

    @media (max-width: 1350px) {
        .premium-plan-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .premium-tool-grid {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }
    }

    @media (max-width: 900px) {
        .premium-plan-grid,
        .premium-tool-grid {
            grid-template-columns: 1fr;
        }

        .premium-hero,
        .premium-intro-card,
        .premium-test-panel {
            align-items: flex-start;
            flex-direction: column;
        }

        .premium-current-plan {
            width: 100%;
        }

        .premium-test-form {
            width: 100%;
            align-items: stretch;
            flex-direction: column;
        }

        .premium-plan-highlight {
            position: static;
            align-self: flex-start;
            margin-bottom: 4px;
        }

        .premium-pricing-note {
            flex-direction: column;
        }

        .premium-plan-card p {
            min-height: 0;
        }
    }

    .premium-value-ladder {
        margin: 0 0 18px;
        padding: 20px 22px;
        border: 1px solid #dfe7e2;
        border-radius: 22px;
        background:
            linear-gradient(135deg, #123c2e 0%, #1b4f3e 62%, #244f43 100%);
        color: #fff;
        box-shadow: 0 14px 34px rgba(18, 60, 46, .10);
    }

    .premium-value-ladder .premium-eyebrow {
        color: #d7b66a;
    }

    .premium-value-ladder-copy h2 {
        margin: 7px 0 8px;
        color: #fff;
        font-family: "Playfair Display", Georgia, serif;
        font-size: 24px;
        font-weight: 600;
    }

    .premium-value-ladder-copy p {
        max-width: 1120px;
        margin: 0 0 14px;
        color: rgba(255,255,255,.76);
        line-height: 1.5;
    }

    .premium-value-ladder-grid {
        display: grid;
        grid-template-columns: minmax(0,1fr) 22px minmax(0,1fr) 22px minmax(0,1fr);
        align-items: stretch;
        gap: 6px;
    }

    .premium-value-ladder-grid article {
        padding: 14px 16px;
        border: 1px solid rgba(255,255,255,.13);
        border-radius: 16px;
        background: rgba(255,255,255,.07);
    }

    .premium-value-ladder-grid article strong {
        display: block;
        margin: 6px 0 5px;
        color: #fff;
        font-size: 16px;
    }

    .premium-value-ladder-grid article p {
        margin: 0 0 8px;
        color: rgba(255,255,255,.72);
        font-size: 11px;
        line-height: 1.45;
    }

    .premium-value-ladder-grid article small {
        color: #e3c47c;
        font-weight: 800;
    }

    .premium-value-step {
        display: inline-flex;
        padding: 4px 8px;
        border: 1px solid rgba(227,196,124,.35);
        border-radius: 999px;
        color: #e3c47c;
        font-size: 9px;
        font-weight: 900;
        letter-spacing: .9px;
    }

    .premium-value-arrow {
        display: grid;
        place-items: center;
        color: rgba(255,255,255,.45);
        font-size: 18px;
    }

    .premium-value-pro {
        background: rgba(215,182,106,.11) !important;
        border-color: rgba(215,182,106,.30) !important;
    }

    .premium-plan-processing-pro {
        border-color: #d5e3db;
        background: #f2f8f4;
        color: #465950;
    }

    .premium-plan-processing-pro strong {
        display: block;
        margin-bottom: 4px;
        color: var(--hp-forest);
    }

    @media (max-width: 900px) {
        .premium-value-ladder-grid {
            grid-template-columns: 1fr;
        }

        .premium-value-arrow {
            transform: rotate(90deg);
            min-height: 20px;
        }
    }

/* Shared comparison shell; card styling above is the existing Premium design. */
.plans-comparison-page { container-type: inline-size; }
.plans-public-page { max-width: 1420px; margin-inline: auto; }
.plans-comparison-page .premium-hero { padding: 20px 24px; }
.plans-comparison-page .premium-hero h1 { font-size: clamp(30px, 3vw, 42px); }
.plans-comparison-page .premium-plan-highlight { position: static; align-self: flex-start; margin-bottom: 8px; }
.plans-comparison-page .premium-plan-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.plans-comparison-page .premium-plan-kicker { font-size: 10px; letter-spacing: 1px; }
.plans-comparison-page .premium-plan-card h3 { font-size: 21px; overflow-wrap: anywhere; }
.plans-comparison-page .premium-plan-price > div { flex-wrap: wrap; }
.plans-comparison-page .premium-plan-card .premium-feature-link { margin-top: auto; padding-top: 16px; }
.plans-comparison-page .premium-plan-actions { margin-top: 0; }
.plans-comparison-page a:focus-visible, .plan-comparison-scroll:focus-visible { outline: 3px solid var(--hp-gold, #c59a4a); outline-offset: 3px; }
.plan-comparison { margin-top: 28px; }
.plan-comparison .premium-section-heading h2 { font-size: clamp(25px, 2.4vw, 34px); }
.plan-comparison-scroll { max-width: 100%; overflow-x: auto; border: 1px solid #ded8c9; border-radius: 18px; background: #fffdfa; overscroll-behavior-x: contain; }
.plan-comparison-table { border-collapse: collapse; width: 100%; min-width: 800px; table-layout: fixed; color: var(--hp-forest, #183d32); font-size: 13px; }
.plan-comparison-table th, .plan-comparison-table td { padding: 13px 14px; border-bottom: 1px solid #e9e4d9; vertical-align: middle; overflow-wrap: anywhere; }
.plan-comparison-table thead th { background: var(--hp-forest, #183d32); color: #fff9e9; font-weight: 700; text-align: center; }
.plan-comparison-table thead th:first-child { text-align: left; width: 32%; }
.plan-comparison-table tbody th { text-align: left; font-weight: 500; }
.plan-comparison-table tbody td { text-align: center; }
.plan-comparison-table tbody tr:not(.plan-comparison-group):hover { background: #f5f1e7; }
.plan-comparison-table small { display: block; margin-top: 4px; color: #68736d; font-size: 11px; font-weight: 400; }
.plan-comparison-table .plan-comparison-group th { background: #eee7d5; color: #203e31; font-weight: 700; border-top: 1px solid #d2b77e; }
.plan-included { color: #28553e; font-size: 20px; font-weight: 800; }
.plan-availability { display: inline-block; border: 1px solid #dbc995; background: #f7f0dd; border-radius: 8px; padding: 5px 7px; font-size: 11px; color: #755b22; }
.plan-scroll-hint { color: #657269; font-size: 12px; margin: 0 0 10px; }
.plan-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@container (max-width: 760px) { .plans-comparison-page .premium-plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (max-width: 480px) { .plans-comparison-page .premium-plan-grid { grid-template-columns: minmax(0, 1fr); } }
.plans-comparison-page .premium-plan-card .premium-availability-note { min-height: 0; margin: 8px 0 0; font-size: 10px; color: #796332; }
@container (max-width: 480px) {
    /* Keep the feature label and first plan readable before sideways scrolling. */
    .plan-comparison-table thead th:first-child { width: 24%; }
}