/* FAME plan product page — the content area only.
 *
 * The look is the uploaded design's: its colour tokens, its cards, its two
 * columns and its dark summary panel. The TYPE is deliberately the theme's own
 * (the design's Newsreader / Source Sans 3 are not loaded) because the site's
 * fonts stay as they are — only weights, sizes and spacing follow the design.
 *
 * Everything is scoped under .fame-pp so no other page can be reached.
 */

.fame-pp {
    --pp-ink: #16243C;
    --pp-body: #44536E;
    --pp-meta: #6B7A93;
    --pp-line: #DDE4EF;
    --pp-line-soft: #F0F3F9;
    --pp-ground: #F4F7FC;
    --pp-surface: #FFFFFF;
    --pp-action: #0B57C4;
    --pp-action-ink: #0B3F92;
    --pp-action-tint: #F2F7FF;
    --pp-action-line: #C8D7F0;
    --pp-save: #0B7B55;
    --pp-save-tint: #E6F4EE;
    --pp-save-line: #C9E6DA;
    --pp-warm: #FDF6E9;
    --pp-warm-line: #F0DFBD;
    --pp-warm-ink: #8A5A00;
    --pp-warm-body: #6B4B10;
    --pp-radius: 16px;

    background: var(--pp-ground);
    color: var(--pp-body);
    padding: 0 0 56px;

    /* The theme's page wrapper is a flex row, so an article that only asks for
       its content width would sit at the start of that row and read as pinned
       to the left. Taking the whole row back means the tinted background runs
       edge to edge and .fame-pp-wrap centres inside it, on the theme's own
       container width. */
    width: 100%;
    flex: 1 1 100%;
    min-width: 0;
}

.fame-pp *,
.fame-pp *::before,
.fame-pp *::after { box-sizing: border-box; }

/* The same widths as the theme's own .container, so the page sits centred and
   flush with the header and the footer above and below it. */
.fame-pp-wrap {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    padding: 0 12px;
}

.fame-pp h1,
.fame-pp h2,
.fame-pp h3 { color: var(--pp-ink); margin: 0; }
.fame-pp p { margin: 0; }
.fame-pp ul { margin: 0; padding: 0; list-style: none; }

/* Prices line up column by column wherever they are stacked. */
.fame-pp-amount,
.fame-pp-term-price,
.fame-pp-term-rate,
.fame-pp-course-n,
.fame-pp-stat-n { font-variant-numeric: tabular-nums; }

/* ----------------------------------------------------------- the breadcrumb */
/* The trail sits on the page's own ground — no white strip behind it. The 70px
   above is clearance for the theme's sticky header, which otherwise sits over
   the top of this page. */
.fame-pp-crumbs {
    background: transparent;
    margin-top: 70px;
}
.fame-pp-crumbs ol {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    /* no side padding: the wrap's own gutter keeps the trail flush with the
       page content below it */
    min-height: 44px; margin: 0; padding: 8px 0; list-style: none;
    font-size: 13px; color: var(--pp-meta);
}
.fame-pp-crumbs a { color: var(--pp-meta); text-decoration: none; }
.fame-pp-crumbs a:hover { color: var(--pp-action); text-decoration: underline; }
.fame-pp-crumbs [aria-current="page"] { color: var(--pp-ink); }
.fame-pp-crumb-sep { color: #B9C8E0; }

/* ------------------------------------------------------------------ the hero */

.fame-pp-hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; padding-top: 34px; }

.fame-pp-shot {
    margin: 0; border-radius: var(--pp-radius); overflow: hidden;
    background: var(--pp-surface); border: 1px solid var(--pp-line);
}
.fame-pp-shot img { display: block; width: 100%; height: auto; }
/* The slot is always drawn. Without a cover it holds a frame rather than a gap. */
.fame-pp-shot.is-empty {
    aspect-ratio: 16 / 9; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 10px; padding: 24px;
    background: #EDF2FA; border: 1.5px dashed #B9C8E0; color: #8FA5C6;
}
.fame-pp-shot.is-empty figcaption {
    font-size: 15px; font-weight: 700; color: var(--pp-body);
    text-align: center; max-width: 380px;
}

.fame-pp-gallery { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
/* The line under the cover: where the reader goes if the picture has not sold
   them yet. */
.fame-pp-cap {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 8px 16px; font-size: 13px; color: var(--pp-meta);
}
.fame-pp-cap a {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 14.5px; font-weight: 700; color: var(--pp-action); text-decoration: none;
}
.fame-pp-cap a:hover { text-decoration: underline; }

.fame-pp-flags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fame-pp-flag {
    display: inline-flex; align-items: center; height: 26px; padding: 0 10px;
    border-radius: 6px; background: #E8F0FD; color: var(--pp-action);
    font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.fame-pp-flag.is-green { background: var(--pp-save-tint); color: var(--pp-save); }

.fame-pp-title { font-size: 34px; line-height: 1.08; font-weight: 700; letter-spacing: -.02em; }
.fame-pp-lede { font-size: 17px; line-height: 1.55; color: var(--pp-body); }

.fame-pp-from { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin-top: 4px; }
.fame-pp-from-label,
.fame-pp-from-meta { font-size: 14px; color: var(--pp-meta); }
.fame-pp-from-price { font-size: 30px; font-weight: 700; color: var(--pp-ink); line-height: 1; font-variant-numeric: tabular-nums; }

.fame-pp-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin-top: 12px; }
.fame-pp-stat { display: flex; flex-direction: column; gap: 2px; }
.fame-pp-stat-n { font-size: 22px; font-weight: 700; color: var(--pp-ink); line-height: 1.1; }
.fame-pp-stat-t { font-size: 13px; color: var(--pp-meta); }
.fame-pp-stat-bar { width: 1px; height: 34px; background: var(--pp-line); }

.fame-pp-offer { display: flex; flex-direction: column; gap: 13px; }

/* ----------------------------------------------------------------- the steps */

.fame-pp-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; margin-top: 34px; align-items: start; }
.fame-pp-steps { display: flex; flex-direction: column; gap: 22px; min-width: 0; }

.fame-pp-card {
    background: var(--pp-surface); border: 1px solid var(--pp-line);
    border-radius: var(--pp-radius); padding: 22px 20px 24px;
    display: flex; flex-direction: column; gap: 16px;
}

.fame-pp-cardhead { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px; }
.fame-pp-stepno {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--pp-ink); color: #FFF; font-size: 13px; font-weight: 700; flex-shrink: 0;
}
.fame-pp-h2 { font-size: 23px; font-weight: 700; letter-spacing: -.01em; }
.fame-pp-cardhead > div { display: flex; align-items: center; gap: 12px; min-width: 0; }
.fame-pp-hint { font-size: 14px; color: var(--pp-meta); }

/* specialty grid — more than one may be chosen */
.fame-pp-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }

.fame-pp-pick {
    width: 100%; display: block; text-align: left; cursor: pointer;
    padding: 15px 16px; border-radius: 12px;
    background: var(--pp-surface); border: 1.5px solid var(--pp-line);
    font: inherit; color: inherit;
    transition: border-color .12s ease, background-color .12s ease, box-shadow .12s ease;
}
.fame-pp-pick:hover { border-color: var(--pp-action-line); background: var(--pp-action-tint); }
.fame-pp-pick:focus-visible { outline: 3px solid rgba(11, 87, 196, .35); outline-offset: 2px; }
.fame-pp-pick.is-on {
    background: var(--pp-action-tint); border: 2px solid var(--pp-action);
    box-shadow: 0 2px 10px rgba(11, 87, 196, .12); padding: 14.5px 15.5px;
}
.fame-pp-pick-in { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fame-pp-pick-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fame-pp-pick-name { font-size: 16px; font-weight: 700; color: var(--pp-ink); }
.fame-pp-pick.is-on .fame-pp-pick-name { color: var(--pp-action-ink); }
.fame-pp-pick-meta { font-size: 13px; color: var(--pp-meta); }

.fame-pp-tick {
    flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--pp-surface); border: 1.5px solid #C6D0E0;
}
.fame-pp-tick svg { display: none; }
.fame-pp-pick.is-on .fame-pp-tick,
.fame-pp-term.is-on .fame-pp-tick { background: var(--pp-action); border: 2px solid var(--pp-action); }
.fame-pp-pick.is-on .fame-pp-tick svg,
.fame-pp-term.is-on .fame-pp-tick svg { display: block; }

/* duration ladder */
.fame-pp-terms { display: flex; flex-direction: column; gap: 10px; }
.fame-pp-term {
    width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 13px 16px; border-radius: 12px; cursor: pointer; text-align: left;
    background: var(--pp-surface); border: 1.5px solid var(--pp-line);
    font: inherit; color: inherit;
    transition: border-color .12s ease, background-color .12s ease;
}
.fame-pp-term:hover { border-color: var(--pp-action-line); background: var(--pp-action-tint); }
.fame-pp-term:focus-visible { outline: 3px solid rgba(11, 87, 196, .35); outline-offset: 2px; }
.fame-pp-term.is-on { background: var(--pp-action-tint); border: 2px solid var(--pp-action); padding: 12.5px 15.5px; }
.fame-pp-term[disabled] { cursor: not-allowed; opacity: .55; background: var(--pp-surface); border-style: dashed; }
.fame-pp-term[disabled]:hover { border-color: var(--pp-line); background: var(--pp-surface); }

.fame-pp-term-l { display: flex; align-items: center; gap: 13px; min-width: 0; }
.fame-pp-term-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fame-pp-term-name { font-size: 16px; font-weight: 700; color: var(--pp-ink); }
.fame-pp-term.is-on .fame-pp-term-name { color: var(--pp-action-ink); }
.fame-pp-term-when { font-size: 13px; color: var(--pp-meta); }
.fame-pp-term-r { display: flex; align-items: center; gap: 14px; }
.fame-pp-term-money { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.fame-pp-term-price { font-size: 21px; font-weight: 700; color: var(--pp-ink); line-height: 1.15; }
.fame-pp-term-rate { font-size: 12.5px; color: var(--pp-meta); }

.fame-pp-pill {
    display: inline-flex; align-items: center; height: 26px; padding: 0 10px;
    border-radius: 999px; font-size: 12.5px; font-weight: 700; white-space: nowrap;
    background: var(--pp-save-tint); color: var(--pp-save);
}
.fame-pp-pill.is-best { background: var(--pp-save); color: #FFF; }

/* ------------------------------------------------------------- the aside */

.fame-pp-aside { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

.fame-pp-panel {
    background: var(--pp-surface); border: 1px solid var(--pp-action-line);
    border-radius: var(--pp-radius); box-shadow: 0 12px 28px rgba(22, 36, 60, .07);
    overflow: hidden;
}
.fame-pp-panel-top { padding: 18px 22px; background: var(--pp-ink); display: flex; flex-direction: column; gap: 4px; }
.fame-pp-panel-label { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #93B4E8; }
.fame-pp-panel-for { font-size: 19px; font-weight: 700; color: #FFF; line-height: 1.3; }

.fame-pp-panel-in { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 16px; }
.fame-pp-price { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 12px; }
.fame-pp-price-l { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fame-pp-term-of { font-size: 13px; color: var(--pp-meta); }
/* nowrap: a price that breaks across two lines stops being one number. */
.fame-pp-amount { font-size: 31px; font-weight: 700; color: var(--pp-ink); line-height: 1.1; letter-spacing: -.02em; white-space: nowrap; }
.fame-pp-permonth { font-size: 13px; color: var(--pp-meta); }

.fame-pp-rule { height: 1px; background: var(--pp-line-soft); }

.fame-pp-says { display: flex; flex-direction: column; gap: 11px; }
.fame-pp-say { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; line-height: 1.4; color: var(--pp-body); }
.fame-pp-say svg { flex-shrink: 0; margin-top: 2px; }
.fame-pp-say strong { color: var(--pp-ink); font-weight: 700; }

.fame-pp-note {
    background: var(--pp-warm); border: 1px solid var(--pp-warm-line); border-radius: 10px;
    padding: 12px 14px; display: flex; align-items: flex-start; gap: 10px;
    font-size: 13.5px; line-height: 1.45; color: var(--pp-warm-body);
}
.fame-pp-note svg { flex-shrink: 0; margin-top: 1px; }
.fame-pp-note strong { color: #5A3D07; font-weight: 700; }

.fame-pp-cta { display: flex; flex-direction: column; gap: 10px; }
.fame-pp-buy,
.fame-pp-add {
    width: 100%; border-radius: 11px; cursor: pointer; font: inherit;
    display: flex; align-items: center; justify-content: center; gap: 8px;
}
.fame-pp-buy {
    height: 52px; border: 0; background: var(--pp-action); color: #FFF;
    font-size: 16px; font-weight: 700;
}
.fame-pp-buy:hover { background: #0A4CAB; }
.fame-pp-add {
    height: 48px; border: 1.5px solid var(--pp-action-line); background: var(--pp-surface);
    color: var(--pp-action); font-size: 15.5px; font-weight: 700;
}
.fame-pp-add:hover { background: var(--pp-action-tint); }
.fame-pp-buy:disabled,
.fame-pp-add:disabled { opacity: .6; cursor: default; }
.fame-pp-buy:focus-visible,
.fame-pp-add:focus-visible { outline: 3px solid rgba(11, 87, 196, .35); outline-offset: 2px; }

.fame-pp-fine { font-size: 12.5px; line-height: 1.45; color: var(--pp-meta); text-align: center; }
.fame-pp-fine a { color: var(--pp-action); }

.fame-pp-mini {
    background: var(--pp-surface); border: 1px solid var(--pp-line); border-radius: 14px;
    padding: 16px 18px; display: flex; align-items: center; gap: 13px;
}
.fame-pp-mini-i {
    width: 38px; height: 38px; border-radius: 10px; background: var(--pp-save-tint);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.fame-pp-mini-t { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.fame-pp-mini-t b { font-size: 14.5px; font-weight: 700; color: var(--pp-ink); }
.fame-pp-mini-t span { font-size: 13px; color: var(--pp-meta); }

/* ------------------------------------------------------------ what's inside */

.fame-pp-sep { height: 1px; background: var(--pp-line); margin: 40px 0 0; }

.fame-pp-sect { margin-top: 40px; display: flex; flex-direction: column; gap: 20px; }
.fame-pp-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--pp-action); }
.fame-pp-h2-big { font-size: 30px; font-weight: 700; letter-spacing: -.015em; line-height: 1.16; }
.fame-pp-intro { display: flex; flex-direction: column; gap: 9px; max-width: 820px; }
.fame-pp-sub { font-size: 16px; line-height: 1.55; color: var(--pp-body); }

.fame-pp-lists { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
.fame-pp-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

.fame-pp-list {
    background: var(--pp-surface); border: 1px solid var(--pp-line);
    border-radius: var(--pp-radius); padding: 22px 20px 24px;
    display: flex; flex-direction: column; gap: 16px;
}
.fame-pp-list.is-picked { border: 2px solid var(--pp-action-line); padding: 21px 19px 23px; }
.fame-pp-h3 { font-size: 21px; font-weight: 700; }
.fame-pp-count { font-size: 14.5px; color: var(--pp-meta); }
.fame-pp-listhead { display: flex; flex-direction: column; gap: 5px; }

.fame-pp-course { display: flex; align-items: center; gap: 13px; padding: 8px 0; border-bottom: 1px solid var(--pp-line-soft); }
.fame-pp-course:last-child { border-bottom: 0; }
.fame-pp-course img,
.fame-pp-course-tile {
    flex-shrink: 0; width: 56px; height: 35px; border-radius: 7px; object-fit: cover;
    display: inline-flex; align-items: center; justify-content: center;
    background: #E8F0FD; border: 1px solid #CBDDF8;
}
/* Four tints, so a long list reads as rows rather than one grey column. */
.fame-pp-course-tile.t1 { background: #E8F0FD; border-color: #CBDDF8; color: var(--pp-action); }
.fame-pp-course-tile.t2 { background: var(--pp-save-tint); border-color: var(--pp-save-line); color: var(--pp-save); }
.fame-pp-course-tile.t3 { background: var(--pp-warm); border-color: var(--pp-warm-line); color: var(--pp-warm-ink); }
.fame-pp-course-tile.t4 { background: #EFECF9; border-color: #DAD3F0; color: #5B4BB0; }
.fame-pp-course-name { font-size: 14.5px; line-height: 1.35; color: var(--pp-ink); flex-grow: 1; padding-right: 12px; }
.fame-pp-course-n { font-size: 13.5px; color: var(--pp-meta); flex-shrink: 0; }
.fame-pp-empty { font-size: 14.5px; color: var(--pp-meta); }
.fame-pp-foot { font-size: 13px; line-height: 1.45; color: var(--pp-meta); }

.fame-pp-feats { display: grid; grid-template-columns: minmax(0, 1fr); gap: 11px 28px; }
.fame-pp-feat { display: flex; align-items: center; gap: 10px; font-size: 14.5px; color: var(--pp-body); }
.fame-pp-feat svg { flex-shrink: 0; }

/* --------------------------------------------------------- how access works */

.fame-pp-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.fame-pp-info {
    background: var(--pp-surface); border: 1px solid var(--pp-line); border-radius: var(--pp-radius);
    padding: 22px; display: flex; flex-direction: column; gap: 11px;
}
.fame-pp-info-i { width: 42px; height: 42px; border-radius: 11px; background: #E8F0FD; display: flex; align-items: center; justify-content: center; }
.fame-pp-info.is-warm .fame-pp-info-i { background: var(--pp-warm); }
.fame-pp-info.is-green .fame-pp-info-i { background: var(--pp-save-tint); }
.fame-pp-info h3 { font-size: 17px; font-weight: 700; }
.fame-pp-info p { font-size: 14.5px; line-height: 1.5; color: var(--pp-body); }

/* -------------------------------------------------------------- the referral */

.fame-pp-refer {
    background: var(--pp-ink); border-radius: var(--pp-radius); padding: 26px 24px;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px;
}
.fame-pp-refer-l { display: flex; align-items: center; gap: 18px; min-width: 0; }
.fame-pp-refer-i {
    width: 52px; height: 52px; border-radius: 13px; background: rgba(255, 255, 255, .12);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.fame-pp-refer h2 { font-size: 24px; font-weight: 700; color: #FFF; }
.fame-pp-refer p { font-size: 15px; line-height: 1.45; color: #B9C8E0; max-width: 620px; margin-top: 4px; }
.fame-pp-refer-go {
    display: inline-flex; align-items: center; height: 50px; padding: 0 24px; border-radius: 11px;
    background: #FFF; color: var(--pp-ink); font-size: 15.5px; font-weight: 700; flex-shrink: 0;
}
.fame-pp-refer-go:hover { color: var(--pp-ink); text-decoration: none; background: #EEF3FB; }

/* ------------------------------------------------------------------- the faq */

.fame-pp-faq { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px 36px; }
.fame-pp-q {
    background: var(--pp-surface); border: 1px solid var(--pp-line); border-radius: 14px;
    padding: 18px 20px; display: flex; flex-direction: column; gap: 7px;
}
.fame-pp-q h3 { font-size: 16.5px; font-weight: 700; line-height: 1.35; }
.fame-pp-q p { font-size: 14.5px; line-height: 1.55; color: var(--pp-body); }

/* ------------------------------------------------------------ the phone bar */

.fame-pp-sticky {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: var(--pp-surface); border-top: 1px solid var(--pp-line);
    box-shadow: 0 -6px 20px rgba(22, 36, 60, .1); padding: 10px 14px;
}
.fame-pp-sticky-in { display: flex; align-items: center; gap: 12px; max-width: 720px; margin: 0 auto; }
.fame-pp-sticky-what { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex-grow: 1; }
.fame-pp-sticky-what strong {
    font-size: 14px; font-weight: 700; color: var(--pp-ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fame-pp-sticky-what span { font-size: 12.5px; color: var(--pp-meta); }
.fame-pp-sticky .fame-pp-buy { width: auto; min-width: 190px; height: 46px; flex-shrink: 0; }

/* ------------------------------------------------------------------ widths */

@media (min-width: 576px) {
    .fame-pp-wrap { max-width: 540px; }
    .fame-pp-feats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
    .fame-pp-wrap { max-width: 720px; }
    .fame-pp-title { font-size: 42px; }
    .fame-pp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* auto-fit: a plan with no extension rules has two cards, and they should
       share the row rather than leave a hole where the third would be. */
    .fame-pp-cards { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
    .fame-pp-faq { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fame-pp-card,
    .fame-pp-list { padding: 26px 28px 28px; }
    .fame-pp-info { padding: 24px; }
    .fame-pp-refer { padding: 30px 36px; flex-wrap: nowrap; }
}

@media (min-width: 992px) {
    .fame-pp-wrap { max-width: 960px; }
    .fame-pp-hero { grid-template-columns: minmax(0, 480px) minmax(0, 1fr); gap: 34px; align-items: start; }
    .fame-pp-body { grid-template-columns: minmax(0, 1fr) 372px; gap: 32px; }
    .fame-pp-lists { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
    .fame-pp-title { font-size: 46px; }
    /* The panel follows the two choices it is showing the result of. */
    .fame-pp-aside { position: sticky; top: 92px; }
    .fame-pp-sticky { display: none; }
}

@media (min-width: 1200px) {
    /* 1152, not 1140: the theme's own container measures 1152 here, and the two
       have to start on the same pixel. */
    .fame-pp-wrap { max-width: 1152px; }
    .fame-pp-hero { grid-template-columns: minmax(0, 560px) minmax(0, 1fr); gap: 40px; }
    .fame-pp-body { grid-template-columns: minmax(0, 1fr) 360px; gap: 32px; }
    .fame-pp-lists { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

@media (min-width: 1400px) {
    .fame-pp-wrap { max-width: 1320px; }
    .fame-pp-hero { grid-template-columns: minmax(0, 620px) minmax(0, 1fr); }
    .fame-pp-body { grid-template-columns: minmax(0, 1fr) 380px; gap: 40px; }
    .fame-pp-lists { grid-template-columns: minmax(0, 560px) minmax(0, 1fr); gap: 28px; }
}

/* A duration on offer: the regular price struck through above the offer; a 0 offer reads "Free". */
.fame-pp-term-was { display: block; font-size: 12px; color: #94a3b8; text-decoration: line-through; font-weight: 500; }
.fame-pp-term-price.is-free { color: #15803d; }