/* Pricing (/pricing), Oct 21, 2026. Kene: "it doesn't have to look like the
 * other pages. A spinoff of the get started page with a few more details."
 *
 * Get started's frame (start.css): two 24px-radius panels 16px apart on
 * white, a white card on the left and a Forest panel on the right. Here the
 * left holds the one price card (assets/lr/pricing/price-card.css, set
 * large with .lpc--hero) and the right holds why it costs $15, four billing
 * answers and the app rising from below. Under 1100px the Forest comes
 * first, the white card slides up over it like a sheet, and the answers
 * follow it. Uses the chrome.css tokens only.
 */
body.pc-page { margin: 0; min-height: 100vh; background: #FFFFFF; }
.pc { box-sizing: border-box; min-height: 100vh; min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; padding: 16px; }
.pc *, .pc *::before, .pc *::after { box-sizing: border-box; }
.pc p, .pc h2, .pc h3 { margin: 0; }

/* ---------------------------------------------------------------- the white card */
.pc-card { position: relative; z-index: 2; display: grid; place-items: center; padding: clamp(28px, 4vh, 44px) 24px; border-radius: 24px; background: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(12, 14, 13, .08); }
.pc-col { width: 100%; max-width: 480px; text-align: center; }
.pc-logo { display: inline-block; width: 44px; margin-bottom: 12px; border-radius: 8px; }
.pc-logo svg { display: block; width: 46px; height: auto; }
.pc-switch { margin-top: 14px !important; font-size: 14.5px; color: var(--stone); }
.pc-link { font-weight: 500; color: var(--money); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: text-decoration-color .25s; }
.pc-link:hover { text-decoration-color: currentColor; }

/* ---------------------------------------------------------------- the Forest panel */
.pc-art { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; align-items: center; min-height: 640px; padding: clamp(56px, 8vh, 88px) clamp(28px, 4vw, 56px) 0; border-radius: 24px; text-align: center; color: #FFFFFF;
  background: linear-gradient(160deg, #164832 0%, #2D7555 48%, #3F936E 74%, #87CCAA 100%); }
.pc-art::before { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; background: url(/assets/lr/forest-silk-tall.webp) center / cover no-repeat; opacity: .4; mix-blend-mode: soft-light; }
.pc-art::after { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; background: radial-gradient(ellipse 60% 40% at 22% 0%, rgba(255, 255, 255, .18), transparent 70%), radial-gradient(ellipse 70% 40% at 50% 100%, rgba(168, 237, 196, .22), transparent 70%); }
.pc-art-logo { display: none; }
.pc-eyebrow { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 10px; font-size: 13px; font-weight: 500; color: #FFFFFF; background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.pc-art-h { max-width: 15ch; margin: 18px auto 0 !important; font-weight: 300; font-size: clamp(38px, 3.5vw, 54px); line-height: 1.02; letter-spacing: -.05em; text-wrap: balance; }
.pc-art-h i { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.04em; letter-spacing: -.01em; }
.pc-art-sub { max-width: 40ch; margin: 16px auto 0 !important; font-size: 15px; line-height: 1.5; color: rgba(255, 255, 255, .8); }
/* The one betting comparison (Oct 22, 2026): an "if" example, never an average. */
.pc-art-eq { max-width: 44ch; margin: 18px auto 0 !important; padding: 12px 16px; border-radius: 14px; font-size: 13.5px; line-height: 1.5; color: rgba(255, 255, 255, .86); background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); font-variant-numeric: tabular-nums lining-nums; text-wrap: pretty; }
.pc-art-eq span { display: block; margin-top: 4px; font-size: 12px; color: rgba(255, 255, 255, .6); }

.pc-faq { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; max-width: 560px; margin-top: clamp(28px, 4vh, 40px); text-align: left; }
.pc-faq-h { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pc-q { padding: 16px 18px 17px; border-radius: 18px; background: linear-gradient(135deg, rgba(255, 255, 255, .12), rgba(12, 14, 13, .14)); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 0 0 1px rgba(255, 255, 255, .12), 0 20px 40px -26px rgba(4, 30, 19, .6); }
.pc-q h3 { font-size: 15px; font-weight: 500; letter-spacing: -.01em; color: #FFFFFF; }
.pc-q p { margin-top: 6px !important; font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, .88); }
.pc-q a { color: inherit; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .4); text-underline-offset: 2px; }
.pc-q a:hover { text-decoration-color: currentColor; }

/* the app rises from the bottom edge and is cut by it */
.pc-art-phone { position: relative; flex: 1 0 230px; display: flex; justify-content: center; align-items: flex-start; align-self: stretch; overflow: hidden; margin: clamp(28px, 4vh, 44px) calc(-1 * clamp(28px, 4vw, 56px)) 0; }
.pc-phone-fade { position: absolute; inset: 0; display: flex; justify-content: center; align-items: flex-start; -webkit-mask-image: linear-gradient(#000 60%, transparent 97%); mask-image: linear-gradient(#000 60%, transparent 97%); }
.pc-phone { flex: none; --w: 280px; }
.pc-scr { background: linear-gradient(180deg, rgba(10, 46, 31, .6), rgba(10, 46, 31, .3) 60%, rgba(255, 255, 255, .06)); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.pc-les { position: absolute; inset: 60px 18px 0; text-align: left; color: #FFFFFF; }
.pc-les-who { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
.pc-pearl { width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FFFFFF, #CFEFDC 40%, #4FAF84 100%); box-shadow: 0 0 12px rgba(168, 237, 196, .55); }
.pc-les-h { margin-top: 12px !important; font-weight: 300; font-size: 23px; line-height: 1.3; letter-spacing: -.035em; }
.pc-les-h i { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.04em; letter-spacing: -.01em; }
.pc-les-card { margin-top: 16px; padding: 13px 14px; border-radius: 16px; background: linear-gradient(135deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .06)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), inset 0 0 0 1px rgba(255, 255, 255, .12); }
.pc-les-card.dim { margin-top: 10px; opacity: .72; }
.pc-les-card .lab { font-size: 10px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: #A8EDC4; }
.pc-les-card b { display: block; margin-top: 5px; font-weight: 400; font-size: 17px; letter-spacing: -.02em; }
.pc-les-card p:not(.lab) { margin-top: 3px !important; font-size: 12.5px; line-height: 1.45; color: rgba(255, 255, 255, .72); }
.pc-tag { position: absolute; left: 20px; bottom: 16px; color: rgba(255, 255, 255, .8); }
.pc-tag::before { background: #A8EDC4; }

/* ---------------------------------------------------------------- phones and narrow screens */
@media (max-width: 1100px) {
  .pc { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0; }
  .pc-art { display: contents; }
  .pc-art::before, .pc-art::after { display: none; }
  .pc-art-head { order: -2; position: relative; padding: 34px 20px 0; text-align: center; color: #FFFFFF; background: linear-gradient(180deg, #164832 0%, #24654A 100%); }
  .pc-art-logo { display: block; width: 40px; margin: 0 auto 16px; }
  .pc-art-logo svg { display: block; width: 40px; height: auto; }
  .pc-art-h { font-size: 34px; }
  .pc-art-sub { display: none; }
  .pc-art-eq { margin: 16px auto 44px !important; font-size: 13px; }
  .pc-art-phone { order: -1; flex: none; height: 262px; margin: 0; padding-top: 38px; background: linear-gradient(180deg, #24654A 0%, #3F936E 100%); }
  .pc-phone-fade { position: static; -webkit-mask-image: none; mask-image: none; }
  .pc-phone { --w: 240px; }
  .pc-les { inset: 52px 15px 0; }
  .pc-les-h { font-size: 19.5px; }
  .pc-tag { left: 50%; bottom: auto; top: 12px; transform: translateX(-50%); white-space: nowrap; font-size: 11px; }
  .pc-card { order: 0; margin-top: -30px; padding: 30px 16px 34px; border-radius: 28px 28px 0 0; box-shadow: 0 -20px 40px -26px rgba(12, 14, 13, .45); }
  .pc-col { max-width: 460px; }
  .pc-card .pc-logo { display: none; }
  .pc-faq { order: 1; grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; padding: 8px 16px 48px; }
  .pc-faq-h { position: static; width: auto; height: auto; overflow: visible; clip: auto; margin: 0 0 6px 4px; font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--stone); }
  .pc-q { background: var(--mist); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: inset 0 0 0 1px rgba(16, 117, 80, .07); }
  .pc-q h3 { color: var(--ink); }
  .pc-q p { color: var(--stone); }
  .pc-q a { color: var(--ink); text-decoration-color: var(--ink-b); }
}
@media (min-width: 641px) and (max-width: 1100px) {
  .pc-art-head { padding-top: 48px; }
  .pc-art-h { font-size: 46px; }
  .pc-art-sub { display: block; }
  .pc-art-phone { height: 300px; }
  .pc-phone { --w: 280px; }
  .pc-card { padding: 40px 32px 44px; }
  .pc-faq { grid-template-columns: 1fr 1fr; max-width: 640px; padding: 8px 32px 64px; }
  .pc-faq-h { grid-column: 1 / -1; }
}