/* Tale Roll site pages: Home, Pricing, Sign up. Loaded after site.css and built from its colours,
   display type and cut corners. Class names start with pg- so nothing here touches the game. */
.pg { position: relative; z-index: 1; min-height: 100vh; display: flex; flex-direction: column; }
.pg-wrap { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 16px; }
.pg a { color: inherit; }
.pg .btn { display: inline-block; text-decoration: none; text-align: center; }
.pg .btn.big { font-size: 1.35rem; padding: 16px 26px; }
.pg .btn.primary.big { clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%); }

/* Top bar */
.pg-nav { display: flex; align-items: center; gap: 8px 18px; flex-wrap: wrap; padding-top: 14px; padding-bottom: 14px; }
.pg-nav .brand { margin-right: auto; display: block; transform: rotate(-2deg); }
.pg-nav .brand img { width: 128px; height: auto; display: block; }
.pg-nav .link { font: 800 .95rem/1 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); padding: 8px 2px; border-bottom: 3px solid transparent; }
.pg-nav .link:hover, .pg-nav .link[aria-current="page"] { border-bottom-color: var(--accent); }

/* Section headings */
.pg-sec { padding-top: 56px; padding-bottom: 56px; }
.pg-sec.band { background: var(--slab); }
.pg-eyebrow { font: 700 .72rem/1.2 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--accent); margin: 0 0 10px; }
.pg-h { font: 800 clamp(2rem, 5.5vw, 3.4rem)/.95 var(--display); letter-spacing: .02em; text-transform: uppercase; margin: 0 0 14px; text-wrap: balance; }
.pg-lead { color: var(--muted); font-size: 1.1rem; max-width: 60ch; margin: 0; }
.pg-lead strong { color: var(--ink); }

/* Home hero */
.pg-hero { display: grid; gap: 28px; align-items: center; padding-top: 24px; padding-bottom: 56px; }
.pg-hero .logo-img { width: min(100%, 460px); height: auto; display: block; transform: rotate(-3deg); transform-origin: left bottom; margin-bottom: 18px; }
.pg-hero h1 { font: 800 clamp(1.5rem, 4vw, 2.3rem)/1.05 var(--display); letter-spacing: .05em; text-transform: uppercase; margin: 0 0 12px; text-wrap: balance; }
.pg-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
.pg-art { position: relative; aspect-ratio: 16 / 10; background: var(--slab); box-shadow: 10px 10px 0 var(--accent); }
.pg-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pg-art figcaption { position: absolute; left: 0; bottom: 0; background: var(--slab); color: var(--ink); padding: 8px 14px; font: 800 .9rem/1 var(--display); letter-spacing: .1em; text-transform: uppercase; border-left: 5px solid var(--accent); }
@media (min-width: 860px) {
  .pg-hero { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); padding-top: 40px; }
  .pg-art { clip-path: polygon(9% 0, 100% 0, 91% 100%, 0 100%); box-shadow: none; aspect-ratio: 16 / 11; }
  .pg-art figcaption { left: 6%; }
}

/* How it works */
.pg-steps { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); counter-reset: step; }
.pg-steps li { counter-increment: step; background: var(--bg); border-left: 5px solid var(--accent); padding: 18px 18px 20px; clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%); }
.pg-steps li::before { content: counter(step); display: block; font: 800 3rem/.8 var(--display); color: var(--accent); margin-bottom: 12px; }
.pg-steps h3, .pg-cards h3 { font: 800 1.4rem/1 var(--display); letter-spacing: .04em; text-transform: uppercase; margin: 0 0 8px; }
.pg-steps p, .pg-cards p { margin: 0; color: var(--muted); }

/* Journey cards on the home page */
.pg-cards { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.pg-cards li { background: var(--slab); border-left: 5px solid var(--c, var(--accent)); display: flex; flex-direction: column; }
.pg-cards img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.pg-cards .body { padding: 14px 16px 18px; }
.pg-cards .genre { color: var(--c, var(--accent)); margin-bottom: 6px; display: block; }

/* Closing call to action */
.pg-close { display: grid; gap: 20px; align-items: center; }
@media (min-width: 760px) { .pg-close { grid-template-columns: 1fr auto; } }

/* Footer */
.pg-foot { margin-top: auto; background: var(--slab); border-top: 3px solid var(--accent); padding: 22px 0; color: var(--muted); font-size: .88rem; }
.pg-foot .pg-wrap { display: flex; gap: 10px 22px; flex-wrap: wrap; align-items: center; }
.pg-foot .name { font: 800 1rem/1 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); margin-right: auto; }
.pg-foot a { text-decoration: none; } .pg-foot a:hover { color: var(--ink); }

/* Pricing */
.pg-balance { background: var(--slab); border-left: 5px solid var(--accent); padding: 16px 18px; display: flex; gap: 12px 24px; flex-wrap: wrap; align-items: center; margin-top: 26px; }
.pg-balance .num { font: 800 2.6rem/.9 var(--display); color: var(--accent); }
.pg-balance .lbl { font: 700 .72rem/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 4px; }
.pg-balance .pass { flex: 1 1 260px; color: var(--muted); }
.pg-balance .pass strong { color: var(--ink); display: block; }
.pg-balance[data-warn="true"] { border-left-color: var(--accent2); }
.pg-note { background: var(--slab); border-left: 5px solid var(--accent2); padding: 12px 16px; margin-top: 16px; }
.pg-note[hidden] { display: none; }
.pg-note[data-good="true"] { border-left-color: var(--accent); }

.pg-pass { margin-top: 26px; background: var(--accent); color: var(--slab); padding: 24px 22px 26px; display: grid; gap: 18px; align-items: center; clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 0 100%); }
.pg-pass h2 { font: 800 clamp(1.8rem, 5vw, 2.8rem)/.95 var(--display); letter-spacing: .03em; text-transform: uppercase; margin: 0 0 8px; }
.pg-pass ul { margin: 0; padding: 0 0 0 1.1em; font-weight: 600; }
.pg-pass .price { font: 800 clamp(2.6rem, 8vw, 4rem)/.85 var(--display); white-space: nowrap; }
.pg-pass .price small { font-size: .32em; letter-spacing: .1em; text-transform: uppercase; display: block; margin-top: 8px; }
.pg-pass .btn { background: var(--slab); color: var(--accent); border-left: 0; }
.pg-pass .buy { display: grid; gap: 12px; justify-items: start; }
@media (min-width: 760px) { .pg-pass { grid-template-columns: 1fr auto; } .pg-pass .buy { justify-items: end; text-align: right; } }

.pg-packs { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.pg-packs li { position: relative; background: var(--slab); border-left: 5px solid var(--accent); padding: 20px 18px; display: flex; flex-direction: column; gap: 6px; }
.pg-packs h3 { font: 800 1.2rem/1 var(--display); letter-spacing: .08em; text-transform: uppercase; margin: 0; color: var(--muted); }
.pg-packs .tokens { font: 800 2.6rem/.9 var(--display); }
.pg-packs .tokens small { font-size: .36em; letter-spacing: .12em; color: var(--muted); margin-left: 6px; }
.pg-packs .price { font: 800 1.5rem/1 var(--display); color: var(--accent); margin-bottom: 10px; }
.pg-packs .bonus { position: absolute; top: 0; right: 0; background: var(--accent2); color: var(--slab); font: 800 .82rem/1 var(--display); letter-spacing: .1em; padding: 6px 10px; }
.pg-packs .btn { margin-top: auto; }
.pg-h2 { font: 800 1.6rem/1 var(--display); letter-spacing: .06em; text-transform: uppercase; margin: 40px 0 0; }
.pg-small { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 6px; color: var(--muted); font-size: .92rem; }
.pg-small li::before { content: "\25C6  "; color: var(--accent); font-size: .7em; }

/* Sign up */
.pg-card { background: var(--slab); border-left: 5px solid var(--accent); padding: 28px 22px 30px; max-width: 520px; margin: 40px auto 56px; display: grid; gap: 16px; clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%); }
.pg-card .pg-h { font-size: clamp(1.8rem, 6vw, 2.6rem); margin: 0; }
.pg-card p { margin: 0; color: var(--muted); }
.pg-card .who { color: var(--ink); font-weight: 700; overflow-wrap: anywhere; }
.pg-card .row { display: flex; gap: 10px; flex-wrap: wrap; }
.pg-card [hidden] { display: none; }

/* Discount code on the pricing page */
.pg-code { margin-top: 26px; background: var(--slab); border-left: 5px solid var(--accent2); padding: 14px 18px 16px; display: grid; gap: 8px 16px; grid-template-columns: auto minmax(0, 280px); align-items: center; }
.pg-code span { font: 800 1.1rem/1 var(--display); letter-spacing: .08em; text-transform: uppercase; }
.pg-code input { text-transform: uppercase; letter-spacing: .08em; }
.pg-code input::placeholder { text-transform: none; letter-spacing: 0; }
.pg-code small { grid-column: 1 / -1; color: var(--muted); font-size: .85rem; }
@media (max-width: 520px) { .pg-code { grid-template-columns: 1fr; } }

/* Keeper plans and the cost table on the Pricing page */
.pg-sub { margin: 10px 0 0; color: var(--muted); max-width: 64ch; }
.pg-tiers .tokens { font-size: 2.2rem; }
.pg-tiers .feats { list-style: none; margin: 4px 0 12px; padding: 0; display: grid; gap: 4px; font-size: .92rem; }
.pg-tiers li[data-mine="true"] { border-left-color: var(--accent2); }
.pg-costs { width: 100%; margin-top: 16px; border-collapse: collapse; background: var(--slab); }
.pg-costs th, .pg-costs td { text-align: left; padding: 11px 14px; border-bottom: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); }
.pg-costs th { font: 800 .82rem/1 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.pg-costs td:nth-child(2) { white-space: nowrap; font-weight: 700; }
.pg-costs td:nth-child(3) { white-space: nowrap; color: var(--accent); font-weight: 700; }