/* The pricing page, in the landing page's clay: the same plain navbar, frames, paper panels, pill buttons,
   die-cut edge stickers and giant clay footer (craft.css and home.css do most of it). Prices are set in the
   HTML. */

/* Hero: the headline over a clay sky (a looping render, centre kept clear), stickers standing on its hills. */
.price-hero { position: relative; overflow: hidden; display: grid; place-items: center; text-align: center; background: #c4e8f6 !important;
  padding: clamp(60px, 8vw, 110px) 20px clamp(130px, 14vw, 190px) !important; }
.price-hero.paint::before { display: none; }
.price-sky { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 72%; pointer-events: none; }
.price-copy { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; }
.price-copy .lede { max-width: 30em; margin: 16px 0 0; font-size: clamp(16px, 1.3vw, 19px); font-weight: 500; text-wrap: balance; }
.price-crowd { position: absolute; inset: 0 14px; z-index: 1; pointer-events: none; }
.pst { position: absolute; width: clamp(54px, calc(var(--s) * 1%), 140px); height: auto; rotate: var(--r); filter: drop-shadow(0 10px 8px rgba(40, 30, 10, 0.16)); }
@media (max-width: 760px) { .price-hero { padding: 56px 16px 110px !important; } .pst { width: 58px; } .pst:nth-child(3), .pst:nth-child(4) { display: none; } }
.price-h1 { margin: 0; font-size: clamp(48px, 7vw, 104px); line-height: 0.95; letter-spacing: -0.03em; font-weight: 760; max-width: 8em; text-wrap: balance;
  color: var(--sun); paint-order: stroke fill; -webkit-text-stroke: 0.09em var(--ink); text-shadow: 0.05em 0.07em 0 var(--ink); }

/* The plans: three paper panels in an ink frame. */
.tiers-frame { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
@media (max-width: 980px) { .tiers-frame { grid-template-columns: minmax(0, 1fr); } }
.tier { position: relative; padding: 26px 24px 26px !important; display: flex; flex-direction: column; gap: 16px; border-radius: 14px 6px 18px 8px / 8px 16px 6px 14px !important; box-shadow: none !important; margin: 0; }
.tier .mascot { position: absolute; width: 84px; height: 84px; top: 12px; right: 12px; rotate: 8deg; }
.tier .name { font-weight: 760; font-size: 30px; letter-spacing: -0.04em; }
.tier .for { margin: -10px 0 0; max-width: calc(100% - 90px); color: var(--mute); }
.tier .price { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.tier .price b { font-weight: 800; font-size: clamp(58px, 6vw, 84px); line-height: 0.9; letter-spacing: -0.05em; paint-order: stroke fill; -webkit-text-stroke: 0.06em var(--ink); text-shadow: 0.04em 0.05em 0 var(--ink); color: var(--white); }
.tier.sun .price b { color: var(--white); } .tier:not(.sun):not(.sky) .price b { color: var(--sun); }
.tier .price span { font: 13px var(--mono); }
.tier ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.tier li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 16px; line-height: 1.35; }
.tier li img { width: 22px; height: 22px; }
.tier .btn { margin-top: auto; justify-content: center; }
.tier.sun .for, .tier.sun .price span { color: #5d4300; }
.tier.sky { color: var(--white); } .tier.sky .for, .tier.sky .price span { color: rgba(255, 255, 255, 0.85); }
.tier .fave { position: absolute; z-index: 2; left: 18px; top: 12px; display: inline-flex; align-items: center; gap: 4px; background: var(--white); padding: 4px 12px 4px 4px; border-radius: 999px; font: 600 12px var(--mono); box-shadow: 0 0 0 2px var(--ink); rotate: -4deg; }
.tier.pro { padding-top: 58px !important; }
.tier .fave img { width: 30px; height: 30px; margin: -8px 0; }
.note-line { margin-top: 16px; }

/* Compare: the table on a paper panel in a grass frame. */
.compare-panel { padding: 0; overflow-x: auto; }
.compare-panel .compare thead th { background: var(--white); }

/* Questions: a sticker on one side, the answers on the other, in a pink frame. */
.faq-frame2 { grid-template-columns: minmax(0, 0.6fr) minmax(0, 1.4fr); align-items: stretch; }
@media (max-width: 860px) { .faq-frame2 { grid-template-columns: minmax(0, 1fr); } }
.faq-side { padding: 24px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.faq-side img { width: 120px; rotate: -6deg; }
.faq-side p { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -0.02em; }
.faq-list { padding: 8px 22px; }
.faq-list details { border-bottom: 1.5px dashed var(--line); }
.faq-list details:last-child { border-bottom: 0; }
.faq-list summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 0; font-size: 18px; font-weight: 650; letter-spacing: -0.02em; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary img { width: 26px; height: 26px; transition: rotate 0.3s cubic-bezier(0.3, 1.6, 0.5, 1); flex-shrink: 0; }
.faq-list details[open] summary img { rotate: 45deg; }
.faq-list details p { margin: 0 0 16px; color: var(--mute); max-width: 44em; }

/* On phones the right-edge sticker sits in the middle of the hills, between the two sticker groups. */
@media (max-width: 760px) { .pricing-page .t-stickers { left: 50%; right: auto; bottom: 64px; translate: -50% 0; } }