/*
 * /pricing/ — page layer.
 *
 * Two components live here rather than in p-shared.css because nothing else
 * needs them: the plans x features comparison table, and the variation grid
 * that shows why one t-shirt is twelve items.
 *
 * .cap in p-shared.css is the wrong shape for the comparison — it is a
 * capability matrix keyed by sales channel, and this one is keyed by plan and
 * has to carry a price row. Its .cap__mark glyph is reused as-is, so the tick
 * and cross mean the same thing on both tables.
 *
 * Same constraint as everywhere else: no literal colour, radius or font size.
 */

/* The base anchor is `color: inherit; text-decoration: none`, which is right for
   nav and card links but leaves a link inside a sentence invisible. The FAQ
   answer pointing at the refund policy is the one link on this page a reader
   has to be able to find. */
.note a,
.faq__a a { color: var(--accent); text-decoration: underline; }

/* ---------- plan comparison ----------
   Twelve rows of five columns does not fit a laptop half-window, let alone a
   phone. Between 720px and roughly 1000px the table scrolls inside its own
   wrapper; below 720px each row becomes a card and the plan name is repeated
   per cell from data-label, so the column headers can go away entirely. */

.plans-scroll { overflow-x: auto; }
.plans-scroll::-webkit-scrollbar { height: 6px; }
.plans-scroll::-webkit-scrollbar-thumb { background: var(--line); border-radius: var(--r-full); }

.plans {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--white);
  overflow: hidden;
}
.plans caption {
  caption-side: bottom;
  padding-top: var(--s-3);
  font-size: var(--t-sm);
  color: var(--muted);
  text-align: left;
}
.plans th, .plans td {
  padding: var(--s-3) var(--s-4);
  font-size: var(--t-sm);
  text-align: left;
  vertical-align: top;
}
.plans thead th {
  background: var(--surface);
  color: var(--ink);
  font-weight: 700;
  vertical-align: bottom;
  border-bottom: 1px solid var(--line);
}
.plans tbody th { font-weight: 600; color: var(--ink); }
.plans tbody tr + tr th,
.plans tbody tr + tr td { border-top: 1px solid var(--line); }
.plans tbody tr:last-child td { color: var(--ink); font-weight: 700; }

.plans__plan { display: flex; flex-direction: column; gap: var(--s-1); }
.plans__amt { font-weight: 500; color: var(--muted); font-size: var(--t-xs); }

/* The tint sits on <col> rather than on twelve cells, so moving the featured
   plan is one class. Body cells declare no background of their own, or they
   would paint over it. */
.plans__col--featured { background: var(--accent-tint); }
.plans thead th.is-featured { background: var(--accent-tint); color: var(--accent); }
.plans thead th.is-featured .plans__amt { color: var(--accent); }

@media (min-width: 721px) {
  .plans { min-width: 780px; }
}

@media (max-width: 720px) {
  .plans, .plans caption, .plans tbody, .plans tr, .plans th, .plans td { display: block; }
  .plans { min-width: 0; }
  .plans thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .plans tbody tr { border-top: 1px solid var(--line); padding: var(--s-3) 0; }
  .plans tbody tr:first-child { border-top: 0; }
  .plans tbody th { padding-bottom: var(--s-2); }
  .plans tbody tr + tr th,
  .plans tbody tr + tr td { border-top: 0; }
  .plans td {
    display: grid;
    grid-template-columns: 7ch 1fr;
    gap: var(--s-3);
    align-items: baseline;
    padding: var(--s-1) var(--s-4);
  }
  .plans td::before { content: attr(data-label); color: var(--muted); font-size: var(--t-xs); }
}

/* ---------- variation grid ----------
   The single biggest source of billing surprise is a seller reading "1,000
   items" as "1,000 products". Numbering the cells 1 to 12 makes the arithmetic
   impossible to misread, which a sentence alone does not. */

.item-math {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--white);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.item-math__head,
.item-math__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  font-size: var(--t-sm);
}
.item-math__head {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  font-weight: 700;
  color: var(--ink);
}
.item-math__tag { font-weight: 500; color: var(--muted); font-size: var(--t-xs); }
.item-math__foot { border-top: 1px solid var(--line); color: var(--muted); }

.item-math__grid { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-4); }
.item-math__sizes,
.item-math__row {
  display: grid;
  grid-template-columns: var(--s-8) repeat(4, 1fr);
  gap: var(--s-2);
  align-items: center;
}
.item-math__sizes span {
  text-align: center;
  font-size: var(--t-xs);
  font-weight: 700;
  color: var(--muted);
}
.item-math__label { font-size: var(--t-xs); font-weight: 600; color: var(--ink); }
.item-math__cell {
  padding: var(--s-2) 0;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  text-align: center;
  font-size: var(--t-xs);
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.item-math__n {
  font-size: var(--t-xl);
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -.02em;
  line-height: var(--lh-tight);
  font-variant-numeric: tabular-nums;
}
.item-math__foot .item-math__n { font-size: var(--t-lg); }

/* Gated on .js-reveal for the same reason every other reveal is: if fx.js never
   loads, the class is withdrawn in <head> and the rows render in place. */
@media (prefers-reduced-motion: no-preference) {
  .js-reveal .fx-in .item-math__row { opacity: 0; transform: translateY(6px); }
  .js-reveal .fx-in.is-in .item-math__row {
    opacity: 1;
    transform: none;
    transition: opacity .45s var(--fx-ease-out), transform .45s var(--fx-ease-out);
  }
  .js-reveal .fx-in.is-in .item-math__row:nth-child(3) { transition-delay: .1s; }
  .js-reveal .fx-in.is-in .item-math__row:nth-child(4) { transition-delay: .2s; }
}

/* ---------- monthly / yearly toggle ----------
   Matches the app's 10% yearly discount (APP.discount). Without fx.js the
   monthly figures stay visible and the buttons do nothing — page stays usable. */

.billing-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: var(--s-1);
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  background: var(--surface);
}
.billing-toggle__btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--body);
  font: inherit;
  font-size: var(--t-sm);
  font-weight: 600;
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-full);
  cursor: pointer;
}
.billing-toggle__btn.is-active {
  background: var(--ink);
  color: var(--white);
}
.billing-toggle__save {
  display: inline-block;
  margin-left: var(--s-2);
  padding: 0.1em 0.55em;
  border-radius: var(--r-full);
  background: var(--accent-tint);
  color: var(--accent);
  font-size: var(--t-xs);
  font-weight: 700;
}
.billing-toggle__btn.is-active .billing-toggle__save {
  background: rgba(255, 255, 255, 0.18);
  color: var(--white);
}

/* ---------- bill calculator ----------
   Same arithmetic the page already prints: monthly = rate × (shops − 1),
   because the listed plan price covers two shops, and eight is the hard cap.
   Styles stay local; p-contact's .cform is not loaded here. */

.price-calc {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--s-6);
  align-items: stretch;
  padding: var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--white);
  box-shadow: var(--shadow-md);
}
.price-calc__controls {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  min-width: 0;
}
.price-calc__field {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.price-calc__label {
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--ink);
}
.price-calc__hint {
  margin: 0;
  font-size: var(--t-xs);
  color: var(--muted);
}
.price-calc__plans {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
  padding: var(--s-1);
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  background: var(--surface);
  width: fit-content;
  max-width: 100%;
}
.price-calc__plan {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--body);
  font: inherit;
  font-size: var(--t-sm);
  font-weight: 600;
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-full);
  cursor: pointer;
}
.price-calc__plan.is-active {
  background: var(--ink);
  color: var(--white);
}
.price-calc__shops {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.price-calc__shops output {
  min-width: 2.5ch;
  font-size: var(--t-xl);
  font-weight: 800;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.price-calc__range {
  flex: 1;
  min-width: 0;
  accent-color: var(--accent);
}
.price-calc__result {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-5);
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--line);
  min-width: 0;
}
.price-calc__amt {
  font-size: var(--t-3xl);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.price-calc__amt span {
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0;
}
.price-calc__yearly {
  margin: 0;
  font-size: var(--t-sm);
  color: var(--muted);
}
.price-calc__breakdown {
  margin: 0;
  font-size: var(--t-sm);
  color: var(--body);
}
.price-calc__cap {
  margin: 0;
  font-size: var(--t-xs);
  color: var(--muted);
}
.price-calc__result .btn {
  margin-top: auto;
  align-self: flex-start;
}

@media (max-width: 720px) {
  .price-calc {
    grid-template-columns: 1fr;
    gap: var(--s-4);
    padding: var(--s-4);
  }
  .price-calc__plans {
    width: 100%;
  }
  .price-calc__plan {
    flex: 1 1 calc(50% - var(--s-1));
    text-align: center;
  }
}