/* Hallmark · shape: Photographic (draw 20de97) · genre: playful · theme: Sticker (deal 2/3, seed free-claude-skill-files-3157·15135e3a·2026-10-28·r0) · redesign: full
 * hero: Poster, set as one big die-cut on the sheet · nav: floating pill · footer: mast (swapped from index columns: no sitemap) · imagery: the product (stills from the reels and the studio renders) · signature: the reel caption, stuck on as a sticker · sticker: sheet, lime swapped for Max's yellow
 * job: buy, a sticky buy bar · axes: light/display-heavy/chromatic-magenta · posture: full-palette · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S5 R4 V4 · weakest: R, the hero tag carries the one motion and the band is the only full-width picture */
/* Hallmark · dropped .rise (the scroll reveal, the theme keeps still) and .pack-art (its dialogue moved to the Ping band) · reworded the hero line, 58 names its length
 * Hallmark · reworded "Questions" to "Before you buy" · 54 names it · straight quotes set typographic (F1) · duo.webp and ping.webp re-rendered wider from the same studio scene as hero-wide.webp and ping-band.webp
 * Hallmark · waive 58 hero: the Ping tag is the signature, the reel caption itself · waive 39b: the 52px pill measures 55px only because its plate is tilted 1 degree */
@import url("./tokens.css");
@import url("./base.css");

:root {
  /* the show's own two colours: Max's caption yellow stands in for the theme's lime, Ping's violet marks only Ping */
  --color-accent-2: #ffd23f;
  --color-max: #ffd23f;
  --color-ping: #b69cff;
  --color-caption: oklch(17% 0.03 285);
  --color-caption-ink: oklch(99.5% 0.003 82);
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --tilt-a: -2deg; --tilt-b: 1.6deg;
  --bar-h: 76px;
}

body { padding-bottom: calc(var(--bar-h) + var(--space-lg)); }
section { padding-block: var(--section-gap-s); }
.lead { color: var(--color-ink-2); margin-top: var(--space-md); }

/* die-cut surfaces */
.diecut { border: 6px solid var(--color-white); border-radius: var(--radius-card); box-shadow: var(--shadow-card); background: var(--color-paper-3); }
.diecut--photo { border-radius: 22px; overflow: hidden; background: var(--color-caption); }
.diecut--photo img { width: 100%; height: 100%; object-fit: cover; }
.rule { border-top: var(--rule-bar) dashed var(--color-rule); }

/* controls */
.btn { display: inline-flex; align-items: center; gap: var(--space-xs); height: 52px; line-height: 1; padding: 0 var(--space-lg); border-radius: var(--radius-pill);
  font-weight: 700; font-size: var(--text-md); color: var(--color-ink); text-decoration: none; white-space: nowrap; box-shadow: inset 0 0 0 2px var(--color-ink);
  transition: translate var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out); }
.btn:hover { background: var(--color-paper-2); }
.btn:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 4px; }
.btn--primary { background: var(--color-accent); color: var(--color-accent-ink); box-shadow: 0 0 0 5px var(--color-white), 5px 6px 0 var(--color-ink); }
.btn--primary:hover { background: var(--color-accent-deep); translate: 0 -2px; }
.btn--primary:active { translate: 4px 5px; box-shadow: 0 0 0 5px var(--color-white), var(--shadow-press); }
.btn .price { font-family: var(--font-display); font-weight: 400; }
.link { font-weight: 700; color: var(--color-ink); text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 2px;
  transition: text-decoration-color var(--dur-micro) var(--ease-out); display: inline-flex; gap: var(--space-xs); align-items: center; padding-block: var(--space-2xs); }
.link:hover { text-decoration-color: var(--color-accent); }
.link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.link i { font-size: 1.1em; }

/* the reel caption, as a sticker: the page's signature */
.caption { display: inline-block; background: var(--color-caption); color: var(--color-caption-ink); border: 6px solid var(--color-white);
  border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: var(--space-sm) var(--space-md) var(--space-md); max-width: 30ch; }
.caption .who { display: inline-block; font-weight: 700; font-size: var(--text-sm); line-height: 1; padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-pill); color: var(--color-ink); }
.who.max { background: var(--color-max); }
.who.ping { background: var(--color-ping); }
.caption p { font-family: var(--font-display); font-size: var(--text-xl); line-height: 1.12; margin-top: var(--space-xs); }
.caption .w { transition: color var(--dur-micro) linear; }
.caption .w.hot, .caption .hot-word { color: var(--color-max); }

/* nav: a floating pill */
.nav { position: sticky; top: var(--space-md); z-index: var(--z-sticky-nav); padding-inline: var(--gutter); }
.nav__pill { max-width: calc(var(--container) - 2 * var(--gutter)); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--space-md);
  height: 64px; padding: 0 var(--space-xs) 0 var(--space-md); border-radius: var(--radius-pill); background: var(--color-white); box-shadow: inset 0 0 0 2px var(--color-ink), 4px 5px 0 var(--color-ink); }
.logo { display: flex; align-items: center; gap: var(--space-xs); font-family: var(--font-display); font-size: var(--text-lg); text-decoration: none; color: var(--color-ink); }
.logo img { width: 36px; height: 36px; border-radius: 50%; }
.logo:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; border-radius: var(--radius-pill); }
.nav__links { display: flex; align-items: center; gap: var(--space-lg); }
.nav__links .btn { height: 48px; }

/* hero: Poster, one big die-cut on the sheet */
.hero { padding-block: var(--space-xl) var(--space-4xl); }
.hero__stage { position: relative; display: grid; }
.hero__photo { height: min(66dvh, 620px); min-height: 400px; rotate: -1deg; }
.hero__photo img { object-position: 0% 50%; }
.hero__plate { position: relative; z-index: var(--z-raised); margin: calc(-1 * var(--space-3xl)) 0 0 var(--space-xl); max-width: 640px; padding: var(--space-xl); rotate: 1deg; }
.hero__plate h1 { font-size: min(var(--text-display), 3.75rem); }
.hero__plate .lead { margin-bottom: var(--space-lg); }
.ctas { display: flex; flex-wrap: wrap; gap: var(--space-md) var(--space-lg); align-items: center; }
.hero__tag { position: absolute; z-index: var(--z-raised); top: var(--space-xl); left: var(--space-xl); rotate: -3deg; }
@media (min-width: 60rem) {
  .hero__stage { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); }
  .hero__photo { grid-column: 1 / -1; grid-row: 1; }
  .hero__plate { grid-column: 1 / 7; grid-row: 1; align-self: end; margin: 0 0 calc(-1 * var(--space-3xl)) calc(-1 * var(--space-md)); }
}

/* free files: a grid of reel stills */
.reels { list-style: none; margin: var(--space-2xl) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2xl) var(--gap-columns); }
.reel { display: flex; flex-direction: column; }
.reel .diecut--photo { aspect-ratio: 9 / 13; rotate: var(--tilt-a); }
.reel:nth-child(even) .diecut--photo { rotate: var(--tilt-b); }
.reel .diecut--photo img { object-position: 50% 0; }
.reel h3 { margin-top: var(--space-lg); }
.reel p { color: var(--color-ink-2); margin: var(--space-xs) 0 var(--space-md); flex: 1; }
@media (min-width: 60rem) { .reels { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .reels { grid-template-columns: minmax(0, 1fr); } .reel .diecut--photo { aspect-ratio: 4 / 5; } }

/* the pack: an Offer */
.offer { background: var(--color-paper-2); }
.offer__grid { display: grid; gap: var(--space-2xl) var(--gap-columns); margin-top: var(--space-2xl); }
.offer__price { background: var(--color-accent); color: var(--color-accent-ink); padding: var(--space-xl); rotate: var(--tilt-a); display: grid; gap: var(--space-md); align-content: start; }
.offer__price .figure { font-variant-numeric: tabular-nums; font-family: var(--font-display); font-size: clamp(6rem, 12vw, 11rem); line-height: .9; }
.offer__price p { font-weight: 600; font-size: var(--text-lead); max-width: 28ch; }
.offer__buy { margin-top: var(--space-xl); }
.offer__buy .btn--primary { box-shadow: 0 0 0 5px var(--color-white), 5px 6px 0 var(--color-ink); }
.offer__list { padding: var(--space-xl); rotate: var(--tilt-b); }
.group + .group { margin-top: var(--space-lg); padding-top: var(--space-lg); border-top: var(--rule-bar) dashed var(--color-rule); }
.group h3 { font-family: var(--font-body); font-weight: 700; font-size: var(--text-sm); color: var(--color-muted); letter-spacing: 0; }
.group ul { list-style: none; margin: var(--space-sm) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.group li { font-weight: 600; padding: var(--space-xs) var(--space-md); border-radius: var(--radius-pill); box-shadow: inset 0 0 0 2px var(--color-ink); }
.offer__note { color: var(--color-muted); font-size: var(--text-sm); margin-top: var(--space-lg); }
@media (min-width: 60rem) {
  .offer__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
  .offer__grid > div:first-child { grid-column: 1 / 6; }
  .offer__list { grid-column: 7 / 13; }
}

/* Ping band: the one full-width picture, with the dialogue stuck on */
.band__photo { position: relative; aspect-ratio: 21 / 9; min-height: 420px; }
.band__photo img { object-position: 50% 22%; }
.band__lines { position: absolute; z-index: var(--z-raised); left: var(--space-xl); bottom: var(--space-xl); display: grid; gap: var(--space-md); justify-items: start; }
.band__lines .caption:nth-child(1) { rotate: -2deg; }
.band__lines .caption:nth-child(2) { rotate: 1.5deg; margin-left: var(--space-2xl); }
@media (max-width: 40rem) {
  .band__photo { aspect-ratio: 4 / 5; min-height: 0; }
  .band__lines { left: var(--space-md); right: var(--space-md); bottom: var(--space-md); }
  .band__lines .caption:nth-child(2) { margin-left: var(--space-lg); }
}

/* install: rows */
.rows { list-style: none; margin: var(--space-2xl) 0 0; padding: 0; }
.rows li { display: grid; gap: var(--space-xs) var(--gap-columns); padding-block: var(--space-xl); border-top: var(--rule-bar) dashed var(--color-rule); }
.rows li:last-child { border-bottom: var(--rule-bar) dashed var(--color-rule); }
.rows h3 { font-size: var(--text-title); }
.rows p { color: var(--color-ink-2); font-size: var(--text-lead); }
.path { display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: center; margin-bottom: var(--space-sm); }
kbd { font: 400 var(--text-sm)/1 var(--font-mono); color: var(--color-ink); padding: var(--space-xs) var(--space-sm); border-radius: 8px; background: var(--color-white); box-shadow: inset 0 0 0 2px var(--color-ink), 2px 3px 0 var(--color-ink); }
.path i { color: var(--color-muted); }
@media (min-width: 60rem) {
  .rows li { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: baseline; }
  .rows h3 { grid-column: 1 / 5; }
  .rows li > div, .rows li > p { grid-column: 5 / 13; }
}

/* questions: stuck-down cards */
.faq { display: grid; gap: var(--space-xl) var(--gap-columns); margin-top: var(--space-2xl); }
.faq article { padding: var(--space-xl); }
.faq article:nth-child(odd) { rotate: -1deg; }
.faq article:nth-child(even) { rotate: 1.2deg; }
.faq h3 { margin-bottom: var(--space-sm); }
.faq p { color: var(--color-ink-2); }
code { font: 400 var(--text-sm) var(--font-mono); color: var(--color-ink); background: var(--color-paper-2); padding: var(--space-3xs) var(--space-xs); border-radius: 6px; }
@media (min-width: 60rem) { .faq { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* footer: a mast */
.footer { background: var(--color-ink); color: var(--color-paper); padding-block: var(--space-3xl) var(--space-2xl); margin-top: var(--section-gap-s); }
.footer .footer__mast { color: var(--color-paper); font-family: var(--font-display); font-size: clamp(3rem, 10vw, 9rem); line-height: .95; overflow-wrap: break-word; min-width: 0; }
.footer__row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-md) var(--space-xl); margin-top: var(--space-xl); padding-top: var(--space-lg); border-top: var(--rule-bar) dashed var(--color-ink-2); }
.footer p { color: var(--color-rule); font-size: var(--text-sm); }
.footer .links { display: flex; gap: var(--space-lg); }
.footer .link { color: var(--color-paper); }

/* sticky buy bar */
.buybar { position: fixed; z-index: var(--z-sticky); left: 50%; bottom: var(--space-md); translate: -50% 0; width: min(560px, calc(100% - 2 * var(--space-md)));
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); height: var(--bar-h); padding: 0 var(--space-sm) 0 var(--space-lg);
  border-radius: var(--radius-pill); background: var(--color-white); box-shadow: inset 0 0 0 2px var(--color-ink), 4px 5px 0 var(--color-ink);
  transition: opacity var(--dur-short) var(--ease-out), translate var(--dur-short) var(--ease-out); }
.buybar p { font-weight: 700; line-height: 1.2; }
.buybar p span { display: block; font-weight: 400; color: var(--color-muted); font-size: var(--text-sm); }
.buybar.is-away { opacity: 0; translate: -50% 140%; pointer-events: none; }

@media (max-width: 40rem) {
  .nav__links a.link { display: none; }
  .hero__photo { height: auto; aspect-ratio: 4 / 5; min-height: 0; }
  .hero__photo img { object-position: 40% 32%; }
  .hero__tag { position: relative; top: auto; left: auto; justify-self: end; margin: calc(-1 * var(--space-2xl)) var(--space-xs) 0 0; rotate: 2deg; }
  .hero__tag .caption p { font-size: var(--text-lg); }
  .hero__plate h1 { font-size: 2.5rem; }
  .hero__plate { margin: var(--space-md) var(--space-xs) 0; padding: var(--space-lg); rotate: -1deg; }
  .hero { padding-bottom: var(--space-2xl); }
  .logo { font-size: var(--text-md); }
  .nav__links .btn { height: 44px; padding: 0 var(--space-md); }
  .ctas .btn { flex: 1 1 auto; justify-content: center; }
  .offer__price, .offer__list { padding: var(--space-lg); }
}
@media (prefers-reduced-motion: reduce) {
  .btn--primary:hover { translate: none; }
  .buybar { transition: none; }
}

/* privacy & terms page */
.legal main { max-width: 720px; margin: 0 auto; padding: var(--space-2xl) var(--gutter) var(--space-3xl); }
.legal main h1 { font-size: var(--text-section); margin: var(--space-xl) 0 var(--space-xs); }
.legal main h2 { font-size: var(--text-title); margin: var(--space-xl) 0 var(--space-xs); }
.legal main p, main li { color: var(--color-ink-2); }
.legal main p + p { margin-top: var(--space-sm); }
.legal main .date { color: var(--color-muted); font-size: var(--text-sm); }
body.legal { padding-bottom: 0; }