/* The two plans, on the home page (#pricing) and on /pricing (w88; big cards and the questions as
   a dropdown, w89). Tokens live in style.css.
   What shows is set by the server before the page is sent, so nothing moves once it's up:
   data-billing="soon" until payments open (no buttons: "Payments open soon"), "open" after;
   data-plan is a signed-in player's own plan ("free" for none). pricing.js does the buttons. */

/* two big cards side by side, one under the other on a phone */
.plans {
  display: grid; grid-template-columns: repeat(2, minmax(0, 400px)); justify-content: center; gap: 32px;
  align-items: stretch;
}
.plan {
  position: relative; display: flex; flex-direction: column; min-width: 0;
  background: var(--card); color: var(--ink); border: 2.5px solid var(--outline); border-radius: var(--radius);
  box-shadow: 8px 8px 0 var(--outline); padding: 40px 32px 32px;
}
/* the one we suggest: a green tint, a "Best value" flag and the filled button */
.plan-yearly { background: color-mix(in srgb, var(--meadow-soft) 62%, var(--card)); }
:root[data-theme="night"] .plan-yearly { background: color-mix(in srgb, var(--meadow) 24%, var(--card)); }

/* the flag on the card's top edge ("Best value", or "Your plan" on yours): over the edge, so it
   takes no room and the two cards stay the same */
.plan-flag {
  position: absolute; top: 0; left: 50%; translate: -50% -50%; display: none;
  padding: 5px 16px; border: 2px solid var(--outline); border-radius: 999px; white-space: nowrap;
  font-size: .76rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; line-height: 1.4;
}
.plan-flag.best { display: block; background: var(--meadow); color: #FFFBF0; }
.plan-flag.mine { background: var(--sun); color: #2A251D; }

.plan-name { font-family: var(--display); font-weight: 700; font-size: 1.5rem; line-height: 1.2; margin: 0; color: var(--ink); }
.plan-price { margin: 16px 0 8px; display: flex; align-items: baseline; gap: 6px; }
.plan-price .amount {
  font-family: var(--display); font-weight: 750; font-size: 4.5rem; line-height: .9; letter-spacing: -.03em; color: var(--ink);
}
.plan-price .per { font-weight: 700; font-size: 1.1rem; color: var(--ink-soft); }
/* two lines tall in both cards, so their lists start level */
.plan-note { margin: 0; color: var(--ink-soft); min-height: 3em; line-height: 1.5; }
.plan-save { color: var(--meadow-deep); font-weight: 800; white-space: nowrap; }
:root[data-theme="night"] .plan-save { color: #8EE0AE; }

/* what you get, each with a drawn check (a cut-out, no tile) */
.plan-gets { list-style: none; margin: 24px 0 32px; padding: 0; font-size: 1.02rem; }
.plan-gets li { position: relative; padding-left: 34px; line-height: 1.5; }
.plan-gets li + li { margin-top: 12px; }
.plan-gets li::before {
  content: ''; position: absolute; left: 0; top: .1em; width: 22px; height: 22px; background: var(--meadow);
  -webkit-mask: var(--check) center / contain no-repeat; mask: var(--check) center / contain no-repeat;
}
:root[data-theme="night"] .plan-gets li::before { background: #8EE0AE; }
.plans {
  --check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}

/* the card's one action, at its foot; each state has its own, so the cards keep their size */
.plan-act { margin-top: auto; min-height: 56px; display: flex; align-items: center; justify-content: center; text-align: center; }
.plan-btn {
  width: 100%; min-height: 56px; display: inline-flex; align-items: center; justify-content: center;
  font: inherit; font-weight: 700; font-size: 1.08rem; cursor: pointer;
  color: var(--ink); background: var(--card); border: 2px solid var(--outline); border-radius: 999px;
  box-shadow: 3px 3px 0 var(--outline); padding: 0 24px;
  transition: transform .12s ease, box-shadow .12s ease;
}
.plan-btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--outline); }
.plan-btn:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--outline); }
.plan-btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--sky) 55%, transparent); outline-offset: 2px; }
.plan-btn.primary { background: var(--meadow); color: #FFFBF0; }
.plan-btn[aria-busy="true"] { cursor: progress; opacity: .75; }
.plan-quiet { color: var(--muted); font-weight: 700; }

/* which action shows */
.plan-act > * { display: none; }
.plans[data-billing="soon"] .plan-act .soon { display: block; }
.plans[data-billing="open"][data-plan="free"] .plan-act .choose { display: inline-flex; }
.plans[data-billing="open"][data-plan="monthly"] .plan-monthly .plan-act .manage,
.plans[data-billing="open"][data-plan="yearly"] .plan-yearly .plan-act .manage { display: inline-flex; }
.plans[data-billing="open"][data-plan="monthly"] .plan-yearly .plan-act .switch,
.plans[data-billing="open"][data-plan="yearly"] .plan-monthly .plan-act .switch { display: block; }
/* your plan's card says so (on Yearly, instead of "Best value") */
.plans[data-billing="open"][data-plan="monthly"] .plan-monthly .plan-flag.mine,
.plans[data-billing="open"][data-plan="yearly"] .plan-yearly .plan-flag.mine { display: block; }
.plans[data-billing="open"][data-plan="yearly"] .plan-yearly .plan-flag.best { display: none; }

/* under the cards: the small print, and in its place what went wrong (the two share one spot, as
   tall as the taller, so a message moves nothing) */
.plans-foot { display: grid; max-width: 832px; margin: 24px auto 0; text-align: center; }
.plans-foot > p { grid-area: 1 / 1; margin: 0; font-size: .9rem; line-height: 1.5; }
.plans-msg { font-weight: 600; color: var(--c-blunder); }
.plans-fine { color: var(--muted); }
.plans-msg:not(:empty) + .plans-fine { visibility: hidden; }

/* Free: what's true today (no paywall), as wide as the two cards, a tint and no border */
.plans-free {
  display: flex; align-items: center; justify-content: space-between; gap: 8px 24px; flex-wrap: wrap;
  max-width: 832px; margin: 32px auto 0; padding: 20px 28px; border-radius: var(--radius);
  background: color-mix(in srgb, var(--ink) 6%, transparent);
}
.plans-free p { margin: 0; color: var(--ink-soft); line-height: 1.5; flex: 1 1 22rem; }
.plans-free b { font-family: var(--display); font-weight: 700; font-size: 1.25rem; color: var(--ink); margin-right: 8px; }
.plans-free a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; white-space: nowrap; }

@media (max-width: 719px) {
  .plans { grid-template-columns: minmax(0, 440px); gap: 40px; }
  .plan { padding: 36px 24px 24px; box-shadow: 6px 6px 0 var(--outline); }
  .plan-note { min-height: 0; }
  .plan-price .amount { font-size: 3.75rem; }
  .plan-gets { margin: 20px 0 28px; }
  .plans-free { max-width: 440px; padding: 16px 20px; }
  .plans-foot { max-width: 440px; }
}

/* --------------------------------------------------------------- /pricing */
/* everything centered on one column as wide as the two cards (the logo, the cards, the questions
   and the links at the foot share one left edge) */
.mod-top.pricing-top, .pricing-main { max-width: 872px; }
.pricing-hero { text-align: center; margin: 16px auto 48px; }
.pricing-hero h1 { font-size: clamp(2.4rem, 1.8rem + 2vw, 3.4rem); line-height: 1.1; margin: 0 0 12px; }
.pricing-main .pricing-hero .sub { margin: 0 auto; max-width: 36em; font-size: 1.12rem; }

/* the questions: a row each, opened and closed with a tap or the keyboard (<details>); opening one
   moves only what's under it */
.pricing-faq { max-width: 832px; margin: 72px auto 0; }
.pricing-faq h2 { text-align: center; font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); margin: 0 0 24px; }
.faq { border-top: 1.5px solid var(--line-strong); interpolate-size: allow-keywords; }
.faq-item { border-bottom: 1.5px solid var(--line-strong); }
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 64px; padding: 16px 4px; cursor: pointer; list-style: none;
  font-family: var(--display); font-weight: 650; font-size: 1.15rem; line-height: 1.35; color: var(--ink);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::marker { content: ''; }
.faq-item summary:hover { color: var(--meadow-deep); }
:root[data-theme="night"] .faq-item summary:hover { color: #8EE0AE; }
.faq-item summary:focus-visible { outline: 3px solid color-mix(in srgb, var(--sky) 55%, transparent); outline-offset: 2px; border-radius: 8px; }
.faq-chev {
  flex: none; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; transition: rotate .2s ease;
}
.faq-item[open] .faq-chev { rotate: 180deg; }
.faq-a { padding: 0 44px 24px 4px; }
.faq-a p { margin: 0; max-width: 62ch; line-height: 1.6; color: var(--ink-soft); }
/* the answer slides open where the browser can (a quick one, and none for reduced motion) */
@supports selector(::details-content) {
  .faq-item::details-content {
    block-size: 0; overflow: clip;
    transition: block-size .2s ease, content-visibility .2s allow-discrete;
  }
  .faq-item[open]::details-content { block-size: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .faq-chev { transition: none; }
  .faq-item::details-content { transition: none; }   /* (a rule of its own: a browser without it drops the whole rule) */
}

@media (max-width: 719px) {
  .mod-top.pricing-top, .pricing-main { padding-left: 16px; padding-right: 16px; }
  .pricing-hero { margin: 8px auto 40px; }
  .pricing-faq { margin-top: 56px; max-width: 440px; }   /* (as wide as the cards over it) */
  .faq-item summary { font-size: 1.05rem; padding: 14px 0; }
  .faq-a { padding: 0 0 20px; }
}

/* ----------------------------------------------------- the home page's section */
/* the same cards, a little tighter */
.pricing-section { padding: 3rem max(24px, 5vw) 6rem; max-width: 1180px; margin: 0 auto; }
.pricing-section .section-title h2 { text-wrap: balance; }
.pricing-section .plan { padding: 36px 28px 28px; }
.pricing-section .plan-price .amount { font-size: 4rem; }
.pricing-section .plans-more { text-align: center; margin: 12px 0 0; font-weight: 700; }
.pricing-section .plans-more a { display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 760px) { .pricing-section { padding: 2rem 16px 4rem; } }
@media (max-width: 719px) {
  .pricing-section .plan { padding: 36px 24px 24px; }
  .pricing-section .plan-price .amount { font-size: 3.75rem; }
}