/* Pricing page only (loaded after site.css). Free plan leads as the dark hero tile, the later price
   sits beside it as a quieter grey tile. Clay and phone art move with scroll (--q from site.js
   [data-scrub]) and hover; everything rests at its finished frame without script or motion. */

/* hero: centred proposition, then the clay family opening one gift */
.pr-hero { text-align: center; }
.pr-hero h1 { max-width: 18ch; }
.pr-hero .answer { max-width: 60ch; }
.pr-hero .badges { justify-content: center; }
.pr-hero .note { max-width: none; }
.pr-scene { --q: 1; --scene-bg: linear-gradient(180deg, #d2d1d3, #e2e0e1); position: relative; margin: var(--s12) 0 0; border-radius: var(--radius-card); overflow: hidden; background: var(--scene-bg); transform: scale(calc(.92 + var(--q) * .08)); transform-origin: 50% 0; will-change: transform; }
.pr-scene video { display: block; width: 100%; height: auto; aspect-ratio: 1; background: #d6d5d7; }
.pr-tags { list-style: none; margin: 0; padding: var(--s2) var(--s5) var(--s6); max-width: none; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2); background: #e2e0e1; }
.pr-tags li { margin: 0; display: inline-flex; align-items: baseline; gap: var(--s2); padding: var(--s2) var(--s4); border-radius: var(--radius-pill); background: var(--bg); font-size: var(--t-small); color: var(--muted); box-shadow: 0 12px 30px -14px rgba(29, 29, 31, .35); white-space: nowrap; }
.pr-tags b { color: var(--text); font-weight: var(--wt-strong); }
/* wider screens: a wide matte stage, the square still centred at full height with its edges
   faded into the stage colour (sampled from the render), the three facts popping in beside it */
@media (min-width: 52rem) {
  .pr-scene { height: clamp(420px, 44vw, 600px); }
  .pr-scene video { width: auto; height: 100%; margin: 0 auto; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
  .pr-tags { padding: 0; background: none; }
  .pr-tags li { position: absolute; font-size: var(--t-body); padding: var(--s3) var(--s5); opacity: clamp(0, calc((var(--q) - var(--at)) * 6), 1); transform: translateY(calc((1 - clamp(0, calc((var(--q) - var(--at)) * 6), 1)) * 12px)); }
  .pt-1 { --at: .15; left: 5%; top: 22%; }
  .pt-2 { --at: .3; right: 5%; top: 40%; }
  .pt-3 { --at: .45; left: 8%; bottom: 20%; }
}

/* plans: the free tile is the hero, wider and darker; the later price is secondary */
.pr-plans { align-items: stretch; }
@media (min-width: 52rem) { .pr-plans { grid-template-columns: 1.55fr 1fr; } }
.pr-plans .plan { display: flex; flex-direction: column; padding: var(--s8) var(--pad-card); }
.pr-free { container-type: inline-size; }
.pr-plan-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s4); }
.pr-plan-head h3 { margin-bottom: var(--s4); }
.pr-tag { display: inline-flex; align-items: center; min-height: 28px; padding: 0 var(--s3); margin: 0 0 var(--s4); border-radius: var(--radius-pill); font-size: var(--t-meta); font-weight: var(--wt-medium); background: var(--bg); color: var(--muted); }
.plan-now .pr-tag { background: rgba(255, 255, 255, .14); color: #ffffff; }
.pr-clay { flex: none; display: block; width: clamp(72px, 18vw, 120px); margin: calc(var(--s2) * -1) calc(var(--s2) * -1) 0 0; }
.pr-clay img { display: block; width: 100%; height: auto; filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .22)); transition: transform .5s var(--ease); }
.pr-plans .plan:hover .pr-clay img { transform: translateY(-6px) rotate(-8deg) scale(1.06); }
.pr-free .price { font-size: clamp(3rem, 2rem + 3.6vw, 4.5rem); color: #ffffff; }
.pr-free .price small { font-size: var(--t-body); }
.pr-ticks { margin-top: var(--s6); padding-top: var(--s6); border-top: 1px solid rgba(255, 255, 255, .16); max-width: none; }
.pr-ticks li { break-inside: avoid; margin: 0 0 var(--s3); }
.pr-ticks li + li { margin-top: 0; }
@container (min-width: 34rem) { .pr-ticks { columns: 2; column-gap: var(--s8); } }
.pr-later .ticks { margin-top: var(--s6); padding-top: var(--s6); border-top: 1px solid var(--border); }
.pr-later .note { margin-top: auto; padding-top: var(--s6); }

/* stats sit closer to the plans they prove */
.pr-stats { padding-top: var(--s10); }
.pr-stats .stats { border-top: 1px solid var(--hairline); padding-top: var(--s10); }

/* statement beside a real screen that rises out of a grey tile as it scrolls in */
.pr-split-in { display: grid; gap: var(--s10); align-items: center; }
@media (min-width: 52rem) { .pr-split-in { grid-template-columns: 1fr 1fr; gap: var(--s16); } }
.pr-split .statement h2 { font-size: clamp(2.5rem, 1.6rem + 3.4vw, 4.5rem); }
.pr-split .statement p { margin-bottom: 0; }
.pr-phone { --q: 1; position: relative; margin: 0; aspect-ratio: 1; border-radius: var(--radius-card); background: var(--tile); overflow: hidden; }
.pr-phone-img { position: absolute; left: 50%; top: 12%; width: 52%; transform: translateX(-50%) translateY(calc((1 - var(--q)) * 16%)); will-change: transform; }
.pr-phone-img img { display: block; width: 100%; height: auto; filter: drop-shadow(0 30px 40px rgba(29, 29, 31, .2)); }
.pr-float { position: absolute; width: 24%; will-change: transform; }
.pr-float img { display: block; width: 100%; height: auto; filter: drop-shadow(0 16px 20px rgba(29, 29, 31, .18)); }
.pf-1 { left: 5%; top: 16%; transform: translateY(calc((1 - var(--q)) * 60%)) rotate(calc(-12deg + var(--q) * 6deg)); }
.pf-2 { right: 4%; top: 48%; transform: translateY(calc((1 - var(--q)) * 90%)) rotate(calc(10deg - var(--q) * 6deg)); }
.pr-float img { animation: pr-bob 6s var(--ease) infinite alternate; }
.pf-2 img { animation-delay: -3s; }
@keyframes pr-bob { to { transform: translateY(-8px); } }

/* cancellation and refunds: four grey tiles with clay, lifting on hover */
.pr-tiles { list-style: none; padding: 0; margin: 0; max-width: none; display: grid; gap: var(--s4); grid-template-columns: 1fr; }
@media (min-width: 40rem) { .pr-tiles { grid-template-columns: repeat(2, 1fr); gap: var(--s5); } }
@media (min-width: 64rem) { .pr-tiles { grid-template-columns: repeat(4, 1fr); } }
.pr-tiles li { margin: 0; background: var(--tile); border-radius: var(--radius-card); padding: var(--s8) var(--s6); transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.pr-tiles li:hover { transform: translateY(-4px); box-shadow: 0 24px 40px -24px rgba(29, 29, 31, .3); }
.pr-tiles picture { display: block; width: 72px; margin-bottom: var(--s5); }
.pr-tiles picture img { display: block; width: 100%; height: auto; transition: transform .5s var(--ease); }
.pr-tiles li:hover picture img { transform: translateY(-4px) rotate(-6deg) scale(1.06); }
.pr-tiles h3 { margin: 0 0 var(--s2); font-size: var(--t-lead); }
.pr-tiles p { margin: 0; color: var(--muted); font-size: var(--t-small); }
.pr-tiles a { font-weight: var(--wt-medium); overflow-wrap: anywhere; }
@media (max-width: 39.99rem) {
  .pr-tiles li { display: grid; grid-template-columns: 56px 1fr; column-gap: var(--s4); row-gap: var(--s1); padding: var(--s5); align-items: start; }
  .pr-tiles picture { grid-row: 1 / span 2; width: 56px; margin: 0; }
}

/* promises: one white tile on the grey band; phones stack each row instead of scrolling sideways */
.pr-table { max-width: 880px; margin: 0 auto; background: var(--bg); border-radius: var(--radius-card); padding: var(--s3) var(--s8); overflow: visible; }
.pr-table table { font-size: var(--t-body); }
.pr-table th, .pr-table td { padding: var(--s5) var(--s5) var(--s5) 0; }
.pr-table tbody tr:last-child th, .pr-table tbody tr:last-child td { border-bottom: 0; }
.pr-table tbody th { width: 40%; font-weight: var(--wt-strong); }
.pr-table td { color: var(--muted); }
@media (max-width: 39.99rem) {
  .pr-table { padding: var(--s2) var(--s5); }
  .pr-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .pr-table table, .pr-table tbody, .pr-table tr, .pr-table th, .pr-table td { display: block; width: auto; }
  .pr-table tr { padding: var(--s4) 0; border-bottom: 1px solid var(--hairline); }
  .pr-table tbody tr:last-child { border-bottom: 0; }
  .pr-table th, .pr-table td { padding: 0; border: 0; }
  .pr-table tbody th { width: auto; margin-bottom: var(--s1); }
  .pr-table td { font-size: var(--t-small); }
}

/* closing tile: the gradient lightened so it holds 3:1 on the dark ground */
.dl-feature .note { color: rgba(255, 255, 255, .6); }
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .dl-feature .grad { background-image: linear-gradient(90deg, #f3936b, #e58bc4 55%, #a99dff); }
}

@media (prefers-reduced-motion: reduce) {
  .pr-scene, .pr-phone-img, .pr-float { transform: none; }
  .pr-float img { animation: none; }
  .pr-clay img, .pr-tiles li, .pr-tiles picture img { transition: none; }
}

/* phones: one text left edge, hero included (house rule) */
@media (max-width: 39.99rem) {
  .pr-hero { text-align: left; }
  .pr-hero .hero-copy > * { margin-left: 0; margin-right: 0; }
  .pr-hero .badges { justify-content: flex-start; }
}