/* pricing.css — the plan cards for /pricing.
   Loaded after /acct/account.css, which carries the palette, the fonts, the header, the footer,
   the buttons and the focus ring. Everything here is only what the four plan cards (look-around,
   Learner, Teacher, School) and the monthly/yearly switch need. Seat picker and seat table removed 10 Nov 2026.

   The card rules are the same ones index.html uses for its own price section, copied so the two
   pages look identical: index.html keeps its CSS in a <style> block of its own, which the strict
   CSP on /pricing forbids (style-src 'self', no unsafe-inline), so it cannot be shared as a file.

   No inline <style> and no style= attributes anywhere. Written 9 Nov 2026. */

.wrap.wide { max-width: 1080px; }

main { padding-top: 24px; }

/* ---- the switch between paying monthly and paying for a year ---- */

.cycle {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 20px 0 4px;
  padding: 8px;
  border: 2px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  width: fit-content;
  max-width: 100%;
}
.cycle .cyclabel { font-weight: 700; padding: 0 8px; font-size: .95rem; }
.cycle button {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1rem;
  padding: 10px 20px;
  min-height: 46px;
  border-radius: 999px;
  border: 2px solid transparent;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.cycle button:hover { background: var(--clay-pale); }
.cycle button[aria-pressed="true"] {
  background: var(--clay-dark);
  border-color: var(--clay-dark);
  color: #fff;
}

/* ---- the cards ---- */

.plans { display: grid; gap: 16px; margin-top: 24px; grid-template-columns: 1fr; }
.plan {
  background: var(--card);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
}
.plan.feature { border-color: var(--clay); border-width: 3px; }
.plan .who { font-size: .86rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--clay-dark); margin: 0 0 6px; }
.plan h3 { font-size: 1.3rem; margin-bottom: .2em; }
.price { font-family: var(--display); font-size: 1.75rem; font-weight: 700; line-height: 1.2; margin: 6px 0 2px; color: var(--ink); }
.price small { font-family: var(--body); font-size: .95rem; font-weight: 600; color: var(--ink-soft); display: block; line-height: 1.5; }
.founding {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--mustard-pale);
  border: 2px solid var(--mustard-line);
  font-size: .92rem;
  color: #6E4F08;
}
.plan ul { margin: 14px 0 0; padding-left: 1.1em; font-size: .95rem; color: var(--ink-soft); }
.plan li { margin: .25em 0; }
.plan .foot { margin: 14px 0 0; font-size: .9rem; color: var(--ink-soft); }

/* ---- buying, which is not open yet ---- */

.buy { margin: 18px 0 0; }
.buy .btn { width: 100%; }
.buy .btn[disabled] { background: var(--paper-2); color: var(--ink-soft); border-color: var(--line); cursor: not-allowed; opacity: 1; }
.buy .why { display: block; margin: 8px 0 0; font-size: .9rem; color: var(--ink-soft); }

/* the card the viewer is already on */
.plan.mine { border-color: var(--sage); border-width: 3px; }
.yours {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--display);
  font-weight: 600;
  font-size: .86rem;
  background: var(--sage-pale);
  border: 2px solid var(--sage-line);
  color: #0D4F33;
  border-radius: 999px;
  padding: 3px 12px;
  margin: 0 0 8px;
}

/* ---- the questions people ask before paying ---- */

.terms {
  margin-top: 22px;
  background: var(--paper-2);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 18px;
}
.terms h2 { margin-top: 0; }
.terms dl { margin: 0; display: grid; gap: 16px; }
.terms .term { break-inside: avoid; }
.terms dt { font-weight: 700; font-family: var(--display); font-size: 1.03rem; }
.terms dd { margin: 2px 0 0; color: var(--ink-soft); font-size: .96rem; }

@media (min-width: 620px) {
  .plans { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) {
  .plans { grid-template-columns: repeat(2, 1fr); }
  .buy .btn { width: auto; min-width: 16rem; }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .founding { color: #F2D79A; }
  :root:not([data-theme="light"]) .cycle button[aria-pressed="true"] { color: #15121E; }
  :root:not([data-theme="light"]) .yours { color: #9FE3BE; }
  :root:not([data-theme="light"]) .buy .btn[disabled] { background: var(--paper-2); color: var(--ink-soft); border-color: var(--line); }
}