/* ==========================================================================
   Story Starter Pack (/story-starter-pack/) — WS-3 · prefix pk-
   Named from the SKU noun, never the occasion or the slug (DP-59). gift.css
   holds the gft- form; that split keeps the pk-only invariant true.
   Contract (DESIGN §2.1, §4.6), all tested: tokens CONSUMED from
   styles.css:1-88 and none DEFINED (one definition repaints the slim footer
   everywhere); loaded through head_extra; no shipped class restyled except
   beneath a pk- ancestor, geometry or contrast only.
   ⚠ 7 KB for the WHOLE sheet, shared with BTS-2.12. BTS-3.3 paid for its
   block by compressing these comments, not by raising the budget.
   ========================================================================== */

/* --- Page-scoped overrides, both bound to .pk-page ----------------------- */

/* WCAG 1.4.3 (DESIGN §3.1a): .hero-sub is --driftwood (landing.css:313),
   3.69:1 on cream against 4.5:1. Charcoal is 14.92:1. */
.pk-page .hero-sub {
    color: var(--color-text-primary);
}

/* Content first, image second at 375px (DESIGN §3.1, DP-58): landing.css:698
   sets .hero-image{order:-1}, floating 438px of art above the price. */
@media (max-width: 767px) {
    .pk-page .hero-image {
        order: 0;
    }
}

/* --- pk-offer, the fold (BTS-3.2, DESIGN §3.2). 540 of 667px at 375x667, so
   a padding value here is a fold value. NEVER cut pk-includes (the price
   case) or pk-ccr (the law). ------------------------------------------- */

.pk-offer {
    scroll-margin-top: 5rem;
    margin-top: var(--space-3); /* the standfirst already adds 24px */
    background: var(--cloud);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: var(--space-4); /* space-4 at <=375 buys 16px of fold back */
}

@media (min-width: 376px) { .pk-offer { padding: var(--space-5); } }
@media (min-width: 768px) { .pk-offer { padding: var(--space-6); } }

/* Forest, not gold: .pricing-price's treatment without borrowing the class. */
.pk-price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2);
    margin: 0 0 var(--space-3);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--text-4xl);
    line-height: 1.1;
    color: var(--forest-moss);
}

.pk-price-unit {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: var(--text-base);
    color: var(--color-text-primary);
}

/* ⚠ MEASURED 95px against §3.2's 48px budget. Not cut: it is the price case. */
.pk-includes {
    margin: 0 0 var(--space-3);
    padding: var(--space-3);
    list-style: none;
    background: var(--parchment);
    border-radius: var(--radius-md);
}

.pk-includes-item {
    display: flex;
    gap: var(--space-2);
    font-size: var(--text-sm);
    font-weight: 500;
    line-height: 1.5;
    color: var(--color-text-primary);
}

/* Tick = included, star = exclusive. Both aria-hidden; the adjacent text
   carries the meaning, never the glyph (R-3). */
.pk-includes-glyph,
.pk-offer-tick {
    flex-shrink: 0;
    color: var(--forest-moss);
}

/* --- pk-ccr, the reg 37 consent checkbox (FR-208 AC-1) ------------------- */

/* The LABEL is the target, so 44px is met by the row, not the 24px box. */
.pk-ccr {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    min-height: 44px;
    padding: var(--space-2) 0;
    margin-bottom: var(--space-2);
    cursor: pointer;
}

.pk-ccr-input {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    margin: 0;
    accent-color: var(--color-primary);
}

.pk-ccr-input:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* ⛔ CHARCOAL ON PARCHMENT, NEVER .form-error RED (DP-40): a required box is
   not a mistake the parent made. */
.pk-ccr-error {
    margin: 0 0 var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    background: var(--parchment);
}

.pk-ccr-text,
.pk-ccr-error,
.pk-precontract {
    font-size: var(--text-sm);
    line-height: 1.5;
    color: var(--color-text-primary);
}

.pk-precontract {
    margin: 0 0 var(--space-3);
    font-size: var(--text-xs);
}

/* One CTA, 52px. The logged-out variant is an anchor, so the box model is
   stated rather than inherited from a button. */
.pk-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 52px;
    text-align: center;
    text-decoration: none;
}

/* --- Below the CTA in DOM order; allowed to fall below the fold ---------- */

/* ⛔ Never gold, never a strikethrough: a factual price comparison dressed as
   a discount reads as an offer claim. */
.pk-offer-sub,
.pk-offer-note {
    margin: 0 0 var(--space-3);
    font-size: var(--text-sm);
    line-height: 1.6;
    color: var(--color-text-primary);
}

.pk-offer-sub { margin-top: var(--space-4); }
.pk-offer-note { margin-bottom: 0; }

.pk-offer-list {
    margin: 0 0 var(--space-3);
    padding: 0;
    list-style: none;
}

.pk-offer-list-item {
    display: flex;
    gap: var(--space-2);
    font-size: var(--text-base);
    line-height: 1.6;
    color: var(--color-text-primary);
}

.pk-includes-item + .pk-includes-item,
.pk-offer-list-item + .pk-offer-list-item {
    margin-top: var(--space-2);
}

/* --- pk-starters, the below-fold showcase (BTS-3.3, DESIGN §3.15, DP-61).
   The component the price rests on, and almost all borrowed vocabulary:
   lib-section--alt, lib-stories-grid, lib-story-card, lib-badge and the
   mk-excerpt family. New: the pill row and two corrections. ------------- */

/* DP-41: ONE seasonal chip, below the fold — DP-55 rules what it says, never
   that it costs 32px of the fold. .lib-badge's checked pair, not gold. */
.pk-season-chip {
    display: block;
    width: max-content;
    margin: 0 auto var(--space-4);
}

/* Group names as pills: the shape of the set at a glance. */
.pk-starters-groups {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2);
    max-width: 640px;
    margin: 0 auto var(--space-6);
    padding: 0;
    list-style: none;
}

/* ⚠ NOT LINKS: there is nowhere to send a non-owner and DP-61 draws the line
   at the label, so the shipped hover lift offers an absent interaction. */
.pk-starters .lib-story-card:hover {
    transform: none;
    box-shadow: var(--shadow-sm);
}

.pk-starters .lib-stories-grid {
    margin-bottom: var(--space-6);
}

/* FR-211's sample: the native player on the excerpt measure. */
.pk-sample-audio {
    display: block;
    width: 100%;
    max-width: 640px;
    margin: 0 auto var(--space-6);
}

/* FR-211's secondary CTA; btn-cta-ghost carries the look.
   ⛔ Never named pk-cta*: the fold test counts primary CTAs by that token. */
.pk-secondary-cta {
    display: block;
    width: max-content;
    max-width: 100%;
    margin: var(--space-5) auto 0;
    text-align: center;
}