/* store.css — LiveMath 4.5 store. Rides on the lm26 tokens in
   css/livemath.css and the crisp-white `body.lmstore-page` treatment. */

.lm45 { max-width: 1040px; margin: 0 auto; }

.lm45-head { text-align: center; margin: 0 0 2rem; }
.lm45-head h1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.9rem);
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 0.5rem;
}
.lm45-lede {
  max-width: 640px;
  margin: 0 auto;
  color: #3c4d64;
  font-size: 1.05rem;
  line-height: 1.6;
}

/* ---- plan cards ---- */
.lm45-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 1.25rem;
  align-items: stretch;
}
.lm45-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #dbe3ee;
  border-radius: var(--r-lg);
  padding: 1.5rem 1.35rem;
  box-shadow: 0 1px 2px rgba(19, 36, 58, 0.06),
              0 14px 40px -28px rgba(19, 36, 58, 0.3);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.lm45-card.is-feature { border-color: #b9cfe8; }
.lm45-card.is-chosen  {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(63, 169, 255, 0.16),
              0 14px 40px -26px rgba(19, 36, 58, 0.34);
}
.lm45-card h2 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 0.15rem;
}
.lm45-sub {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6b7d95;
  margin: 0 0 1rem;
}
.lm45-price { margin: 0 0 1.15rem; display: flex; align-items: baseline; gap: 0.5rem; }
.lm45-amount {
  font-family: var(--font-display);
  font-size: 2.6rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1;
}
.lm45-per { color: #6b7d95; font-size: 0.95rem; }

/* device / seat tiers */
.lm45-tiers { border: 0; margin: 0 0 1rem; padding: 0; }
.lm45-tiers legend {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6b7d95;
  padding: 0 0 0.5rem;
}
.lm45-tier {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.7rem;
  border: 1px solid #e6ecf4;
  border-radius: var(--r-sm);
  margin-bottom: 0.4rem;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.lm45-tier:hover { background: #f6f9fc; }
.lm45-tier:has(input:checked) { border-color: var(--blue); background: #f2f8ff; }
.lm45-tier input { accent-color: var(--blue); margin: 0; }
.lm45-tier-n {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink);
  min-width: 1.4em;
}
.lm45-tier-p { margin-left: auto; color: #3c4d64; font-variant-numeric: tabular-nums; }

.lm45-support { font-size: 0.9rem; color: #6b7d95; margin: 0 0 1rem; }
.lm45-card .btn.primary { width: 100%; text-align: center; }

.lm45-note {
  max-width: 720px;
  margin: 1.75rem auto 0;
  text-align: center;
  color: #6b7d95;
  font-size: 0.95rem;
  line-height: 1.6;
}

/* ---- checkout panel ---- */
.lm45-checkout {
  max-width: 560px;
  margin: 2.5rem auto 0;
  padding: 1.75rem;
  background: #fff;
  border: 1px solid #dbe3ee;
  border-radius: var(--r-lg);
  box-shadow: 0 1px 2px rgba(19, 36, 58, 0.06),
              0 18px 50px -30px rgba(19, 36, 58, 0.35);
}
.lm45-checkout h2 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 1rem;
}
.lm45-chosen {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  flex-wrap: wrap;
  padding: 0.7rem 0.9rem;
  background: #f6f9fc;
  border-radius: var(--r-sm);
  margin-bottom: 1.25rem;
  color: var(--ink);
  font-weight: 500;
}
.lm45-linkbtn {
  background: none; border: 0; padding: 0;
  color: var(--blue); font: inherit; font-size: 0.9rem;
  cursor: pointer; text-decoration: underline;
}
.lm45-fields label {
  display: block;
  margin-bottom: 0.9rem;
  font-size: 0.95rem;
  color: #3c4d64;
}
.lm45-hint { color: #51637a; font-size: 0.85rem; }
.lm45-fields input[type="text"],
.lm45-fields input[type="email"] {
  display: block;
  width: 100%;
  margin-top: 0.3rem;
  padding: 0.6rem 0.7rem;
  font: inherit;
  color: var(--ink);
  background: #fff;
  border: 1px solid #cdd8e6;
  border-radius: var(--r-sm);
}
.lm45-fields input:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(63, 169, 255, 0.18);
}
/* honeypot: reachable to a scraper, invisible and unfocusable to a person */
.lm45-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.lm45-error {
  margin: 0 0 1rem;
  padding: 0.7rem 0.9rem;
  background: #fdf2f2;
  border: 1px solid #f2c9c9;
  border-radius: var(--r-sm);
  color: #a11;
  font-size: 0.95rem;
}
.lm45-fineprint { margin: 1rem 0 0; font-size: 0.85rem; color: #51637a; text-align: center; }

/* ---- receipt ---- */
.lm45-receipt { max-width: 620px; margin: 0 auto; }
.lm45-receipt h1 {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.6vw, 2.6rem);
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 0.5rem;
}
.lm45-key-card {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-wrap: wrap;
  margin: 1.5rem 0;
  padding: 1.25rem;
  background: #f6f9fc;
  border: 1px solid #dbe3ee;
  border-radius: var(--r-lg);
}
.lm45-key-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6b7d95;
  width: 100%;
}
.lm45-key {
  font-family: var(--font-mono);
  font-size: 1.3rem;
  color: var(--ink);
  letter-spacing: 0.04em;
  word-break: break-all;
}
.lm45-copy {
  margin-left: auto;
  padding: 0.4rem 0.9rem;
  font: inherit; font-size: 0.9rem;
  color: #fff; background: var(--blue);
  border: 0; border-radius: var(--r-sm); cursor: pointer;
}
.lm45-summary {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.4rem 1.25rem;
  margin: 1.5rem 0;
  font-size: 0.98rem;
}
.lm45-summary dt {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6b7d95;
  align-self: center;
}
.lm45-summary dd { margin: 0; color: var(--ink); }
.lm45-next { color: #3c4d64; line-height: 1.6; }

@media (max-width: 560px) {
  .lm45-checkout { padding: 1.25rem; }
  .lm45-amount   { font-size: 2.2rem; }
}

/* ---- term extensions ----
   Checkboxes rather than radios so the group can be cleared back to the base
   year; JS enforces "at most one". Styled square to signal that. */
.lm45-extend { border: 0; margin: 0 0 1rem; padding: 0.85rem 0 0; border-top: 1px solid #eef2f7; }
.lm45-extend legend {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6b7d95;
  padding: 0 0 0.5rem;
}
.lm45-opt { color: #51637a; letter-spacing: 0.08em; }
.lm45-ext {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0.7rem;
  border: 1px solid #e6ecf4;
  border-radius: var(--r-sm);
  margin-bottom: 0.4rem;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.lm45-ext:hover { background: #f6f9fc; }
.lm45-ext:has(input:checked) { border-color: #2e9e6b; background: #f1faf5; }
.lm45-ext input { accent-color: #2e9e6b; margin: 0; }
.lm45-ext-l { font-size: 0.94rem; color: #3c4d64; }
.lm45-ext-p {
  margin-left: auto;
  font-weight: 600;
  color: #1f7d52;
  font-variant-numeric: tabular-nums;
}

/* running order total */
.lm45-total {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: auto 0 0.9rem;
  padding-top: 0.85rem;
  border-top: 2px solid #dbe3ee;
}
.lm45-total-n {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1;
}
.lm45-total-t {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6b7d95;
}

/* ---- jump link + app-store section ----
   The stores sell on their own auto-renewing terms, so they live below the
   desktop cards; a jump link up top keeps them one click away. */
.lm45-jump { margin: 0.85rem 0 0; }
.lm45-jump a {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue);
  text-decoration: none;
  border-bottom: 1px solid rgba(63, 169, 255, 0.4);
  padding-bottom: 2px;
}
.lm45-jump a:hover { border-bottom-color: var(--blue); text-decoration: none; }

.lm45-stores {
  max-width: 720px;
  margin: 2.5rem auto 0;
  padding: 1.75rem;
  text-align: center;
  background: #f6f9fc;
  border: 1px solid #e2e9f2;
  border-radius: var(--r-lg);
  scroll-margin-top: 8rem;   /* clear the sticky nav on the anchor jump */
}
.lm45-stores h2 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 0.6rem;
}
.lm45-stores-lede {
  max-width: 560px;
  margin: 0 auto 1.15rem;
  color: #3c4d64;
  font-size: 0.98rem;
  line-height: 1.6;
}
.lm45-stores-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin: 0 0 0.9rem;
}
/* Badge-shaped, dark, mark on the left — the shape people already scan for. */
.lm45-store {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 1.1rem;
  min-width: 190px;
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 9px;
  color: #fff;
  text-decoration: none;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.lm45-store:hover {
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -10px rgba(19, 36, 58, 0.55);
}
.lm45-store-mark { width: 26px; height: 26px; fill: #fff; flex: none; }
.lm45-store-t {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.15;
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 600;
}
.lm45-store-t em {
  font-style: normal;
  font-size: 0.66rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.lm45-stores-note { margin: 0; font-size: 0.85rem; color: #51637a; }

/* ---- platform banner ----
   Reversed out of the page so it reads as a statement of fact rather than
   another card. It answers the question the tier lists provoke: the count is
   computers, not platforms — one key covers Mac, Windows and Linux together. */
.lm45-banner {
  /* Breaks out past the 1040px card grid to the viewport edge, less one
     gutter. Using the gutter rather than a bare 100vw means the scrollbar
     width is absorbed, so this can never cause horizontal overflow. */
  margin: 0 0 1.25rem;
  margin-inline: calc(50% - 50vw + var(--gutter));
  padding: 0.42rem 1.25rem;
  background: var(--ink);
  color: #fff;
  border-radius: var(--r-sm);
  text-align: center;
  font-size: 0.97rem;
  font-weight: 500;
  line-height: 1.3;
}

/* PayPal's card form and wallet windows render at the top of the viewport,
   exactly where the sticky nav sits — it was painting over their name fields
   and close button. Hide the nav for the duration.
   `visibility` rather than `display`: the nav keeps its space, so closing the
   overlay doesn't reflow the page under the user. */
html.lm-paying .nav { visibility: hidden; }

/* TEMPORARY dev checkout affordances (LM_DEV_FAKE_PAY). */
.lm45-devpay { width: 100%; text-align: center; }
.lm45-devnote {
  margin: 0.6rem 0 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #b06a00;
}
.lm45-simbanner {
  margin: 0 0 1.25rem;
  padding: 0.8rem 1rem;
  background: #fff7e6;
  border: 1px solid #f0d08a;
  border-radius: var(--r-sm);
  color: #8a5a00;
  font-size: 0.92rem;
  line-height: 1.5;
}

/* ---- post-download first-run tutorial (download/get.php) ---- */
.lm-tut { list-style: none; margin: 2rem 0 0; padding: 0; }
.lm-tut-step {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: center;
  padding: 2rem 0;
  border-top: 1px solid #e6ecf4;
}
.lm-tut-step:first-child { border-top: 0; }
/* Alternate which side the screenshot sits on, so the eye zig-zags down. */
.lm-tut-step:nth-child(even) .lm-tut-text { order: 2; }
.lm-tut-n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; margin-bottom: 0.6rem;
  border-radius: 50%; background: var(--ink); color: #fff;
  font-family: var(--font-mono); font-size: 0.95rem;
}
.lm-tut-text h2 {
  font-family: var(--font-display);
  font-size: 1.5rem; font-weight: 600; color: var(--ink);
  margin: 0 0 0.5rem;
}
.lm-tut-text p { color: #3c4d64; line-height: 1.6; margin: 0 0 0.75rem; }
.lm-tut-shot { margin: 0; }
.lm-tut-shot img {
  display: block; width: 100%; height: auto;
  border: 1px solid #dbe3ee; border-radius: var(--r-md);
  box-shadow: 0 14px 40px -28px rgba(19, 36, 58, 0.5);
}
.lm-tut-shot figcaption {
  margin-top: 0.5rem; font-size: 0.85rem; color: #51637a; text-align: center;
}
/* A slot with no screenshot yet: obvious to us, never a broken image to a user. */
.lm-tut-ph {
  display: flex; align-items: center; justify-content: center;
  min-height: 220px; padding: 1rem; text-align: center;
  border: 1px dashed #c3cfdf; border-radius: var(--r-md);
  background: #f6f9fc; color: #51637a;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em;
  text-transform: uppercase;
}
@media (max-width: 760px) {
  .lm-tut-step { grid-template-columns: 1fr; gap: 1.25rem; }
  .lm-tut-step:nth-child(even) .lm-tut-text { order: 0; }
}

/* Phone-shaped captures are far taller than they are wide; cap the height so
   one does not tower over the paragraph beside it. */
.lm-tut-shot.is-portrait img {
  max-height: 460px;
  width: auto;
  max-width: 100%;
  margin: 0 auto;
}

/* Two screenshots in one tutorial step (desktop key vs in-app subscription).
   They are different shapes — a wide dialog and a tall sheet — so cap the
   height and let each keep its own aspect rather than stretching either. */
.lm-tut-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  align-items: start;
}
.lm-tut-pair .lm-tut-shot img {
  max-height: 300px;
  width: auto;
  max-width: 100%;
  margin: 0 auto;
}
.lm-tut-pair figcaption { font-size: 0.8rem; }
@media (max-width: 620px) {
  .lm-tut-pair { grid-template-columns: 1fr; }
}

/* ---- promo code (checkout panel) ---- */
.lm45-promo { margin: 0.25rem 0 1rem; }
.lm45-promo > label {
  display: block;
  margin-bottom: 0.3rem;
  font-size: 0.95rem;
  color: #3c4d64;
}
.lm45-promo-row { display: flex; gap: 0.5rem; align-items: stretch; }
.lm45-promo-row input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.6rem 0.7rem;
  font: inherit;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
  background: #fff;
  border: 1px solid #cdd8e6;
  border-radius: var(--r-sm);
}
.lm45-promo-row input:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(63, 169, 255, 0.18);
}
.lm45-promo-row input.is-applied { border-color: #4caf6e; background: #f3fbf5; }
.lm45-promo-btn { flex: 0 0 auto; padding-top: 0; padding-bottom: 0; }
.lm45-promo-msg { margin: 0.5rem 0 0; font-size: 0.9rem; color: #1f7a3a; }
.lm45-promo-msg.is-error { color: #a11; }
.lm45-promo-msg .lm45-linkbtn { font-size: inherit; }
/* list price, struck through beside the promo price in the order summary */
.lm45-chosen s { color: #51637a; margin-right: 0.3rem; }
.lm45-free-note { margin: 0 0 0.75rem; font-size: 0.95rem; color: #1f7a3a; text-align: center; }
/* .btn sets display, which outranks the UA's [hidden] rule — so a hidden pay
   button still painted. Every hidden control in the panel stays hidden. */
.lm45-checkout [hidden] { display: none !important; }