/* The plan's page (/the-50-dollar-month/): on top of site.css. Checkout state comes from month.js:
   body.s-on (checkout open) or body.s-off («Checkout opens soon» + the free week 1). */

/* ---------- buy box ---------- */
.buy { margin-top: 28px; max-width: 520px; }
.price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
.price .now { font-size: clamp(40px, 10vw, 52px); line-height: 1.05; }
.price .was { font: 800 22px/1 var(--sans); color: var(--mute); text-decoration-thickness: 2px; }
.price .what { flex-basis: 100%; font: 700 14.5px/1.4 var(--sans); color: var(--ink); }
[hidden] { display: none !important; }
.if-on, .if-off { display: none; }
.s-on .if-on, .no-js .if-on, .s-off .if-off { display: block; }
.buy .if-on .btn { margin-top: 18px; width: 100%; }
.codeline { margin-top: 12px; font: 750 15px/1.45 var(--sans); color: var(--esp); }
.codeline b { background: var(--saf); border-radius: 6px; padding: 1px 7px; letter-spacing: 0.06em; }
.soon-t { margin-top: 16px; font: 700 16px/1.45 var(--sans); color: var(--ink); }
.soon-t b { color: var(--esp); }
.if-off .signup { margin-top: 12px; }
.err-line { margin-top: 12px; font: 750 15px/1.45 var(--sans); color: #9a2c13; }

/* ---------- hero: the plan's pages on the table ---------- */
.pdp .hero-media .frame { aspect-ratio: 4 / 5; }
.pdp .hero-media .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.stack { position: absolute; left: 50%; top: 48%; width: 54%; aspect-ratio: 900 / 1165; transform: translate(-50%, -50%); }
.stack img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 4px; background: #f6f1e8;
  box-shadow: 0 2px 4px rgba(28, 23, 18, 0.12), 0 18px 34px -10px rgba(28, 23, 18, 0.45); transition: transform 1.2s var(--ease); }
.stack .p3 { transform: translate(17%, 5%) rotate(7deg); }
.stack .p2 { transform: translate(-15%, 3%) rotate(-6deg); }
.stack .p1 { transform: rotate(-1deg); }
@media (hover: hover) {
  .hero-media:hover .stack .p3 { transform: translate(24%, 6%) rotate(9deg); }
  .hero-media:hover .stack .p2 { transform: translate(-22%, 4%) rotate(-8deg); }
}

/* ---------- the four weeks ---------- */
.weeks { padding: 64px 0 40px; }
.wk-grid { display: grid; gap: 18px; margin-top: 34px; }
.wk { background: var(--white); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); }
.wk-img { aspect-ratio: 3 / 2; overflow: hidden; background: #e9e0d0; }
.wk-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
@media (hover: hover) { .wk:hover .wk-img img { transform: scale(1.04); } }
.wk-txt { padding: 22px 22px 18px; }
.wk-n { display: flex; justify-content: space-between; align-items: center; font: 800 12.5px/1 var(--sans); letter-spacing: 0.2em; text-transform: uppercase; color: var(--deep); }
.wk-n .mk { font-size: 19px; letter-spacing: -0.01em; color: var(--esp); }
.wk h3 { font: 800 26px/1.15 var(--sans); letter-spacing: -0.01em; margin-top: 10px; }
.wk ul { list-style: none; margin-top: 14px; }
.wk li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 9px 0; border-top: 1px solid var(--rule); font: 700 15.5px/1.3 var(--sans); }
.wk li .m { flex: none; font: 700 13.5px/1 var(--sans); color: var(--ink); white-space: nowrap; }
.wk li .m .mk { font-size: 14px; color: var(--esp); }
.mins-note { font: 650 13px/1.5 var(--sans); color: var(--mute); margin-top: 16px; }

/* ---------- the list page on the dark band ---------- */
.list-media .sheet { max-width: 460px; margin: 0 auto; transform: rotate(2deg); }
.list-media .sheet img { width: 100%; border-radius: 6px; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.85); }

/* ---------- cards, final card, sticky ---------- */
.cards4 { grid-template-columns: 1fr; }
.buy-card .if-on .btn, .buy-card .if-off .btn { margin-top: 26px; }
.buy-card .fine { color: rgba(28, 23, 18, 0.72); }
.bsticky { position: fixed; left: 12px; right: 84px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 50; transform: translateY(140%); opacity: 0;
  pointer-events: none; transition: transform 0.5s var(--ease), opacity 0.4s; }
.bsticky.show { transform: none; opacity: 1; pointer-events: auto; }
.bsticky .btn { width: 100%; box-shadow: 0 16px 34px -12px rgba(28, 23, 18, 0.55); }
.bsticky b { font-weight: 850; }

@media (min-width: 720px) {
  .wk-grid { grid-template-columns: 1fr 1fr; gap: 22px; }
  .cards4 { grid-template-columns: 1fr 1fr; }
  .buy .if-on .btn { width: auto; }
  .bsticky { display: none; }
}
@media (min-width: 960px) {
  .pdp .hero-media .frame { aspect-ratio: 4 / 5.2; }
  .cards4 { grid-template-columns: repeat(4, 1fr); }
  .weeks { padding: 90px 0 56px; }
}
@media (prefers-reduced-motion: reduce) { .stack img, .wk-img img { transition: none; } }

/* ---------- thanks page ---------- */
.thanks .btn { margin-top: 22px; }
.thanks .wait { display: flex; align-items: center; gap: 12px; margin-top: 22px; font: 700 16px/1.5 var(--sans); color: var(--ink); }
.thanks .spin { width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--rule); border-top-color: var(--saf); animation: spin 0.9s linear infinite; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }

/* the month's numbers are longer than the week's ($179.77), so the stat row runs a size smaller */
.pdp .stat b { font-size: clamp(38px, 10vw, 62px); }