/* ============================================================================
   /pricing (sub page system v1.1, 9 Oct 2026): a plain page, no instrument.
   The page's idea is its brevity. Two chapters, the two ways Timer is sold (founder,
   2026-09-23): 01 Solo and Max for a small business, 02 Enterprise for an organization.
   The plans are square framed cards (the app's own plan card, read in the site's grammar):
   name and cadence, who it is for, the price, the terms, one line. Stacked on a phone, two
   side by side from 760px; the Enterprise card puts its price on one side and its terms on
   the other from 760px. Tokens only (no hex outside tos-site.css), every rule under .sp,
   logical properties only, so right to left needs nothing of its own.
   ============================================================================ */

/* ---- the header: the three terms (the old chips) as a ruled list, never pills ---- */
.sp .pricing-terms { margin-top: 28px; border-top: 1px solid var(--lp-ink); }
.sp .pricing-terms li { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 10px 0; border-bottom: 1px solid var(--lp-rule); font-size: 16px; font-weight: 600; line-height: 1.35; color: var(--lp-ink); }
.sp .pricing-terms li::before { content: ""; width: 8px; height: 8px; background: var(--lp-ink); flex: none; }
.sp .pricing-note { margin-top: 20px; max-width: 36em; }
.sp .pricing-note + .cta { margin-top: 24px; }
.sp .cta + .pricing-note { margin-top: 18px; }
/* a link inside a sentence: ink, an orange underline, and a 44px tall target that does not
   move the line (vertical padding on an inline box widens what you can tap, not the layout) */
.sp .pricing-note a { color: var(--lp-ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--lp-accent); text-decoration-thickness: 2px; text-underline-offset: 4px; padding-block: 13px; }
.sp .pricing-note a:hover { text-decoration-color: var(--lp-ink); }

/* ---- the plans ---- */
.sp .plans { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.sp .plan { display: flex; flex-direction: column; border: 1px solid var(--lp-rule-2); background: var(--lp-paper); padding: 20px; min-width: 0; }
.sp .plan-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; column-gap: 12px; row-gap: 4px; }
.sp .plan-top h3 { margin: 0; overflow-wrap: anywhere; }
.sp .plan-cad { display: inline-flex; align-items: center; gap: 8px; color: var(--lp-muted); }
.sp .plan-cad::before { content: ""; width: 7px; height: 7px; background: var(--lp-ink); flex: none; }
.sp .plan-who { margin-top: 4px; color: var(--lp-muted); }
/* the price: the figure in the heading face, the currency raised to its cap height, the
   period small beside it. Plain inline text, so the bidi algorithm orders it in Arabic. */
.sp .plan-amt { margin-top: 22px; font: 600 clamp(44px, 12vw, 60px)/1 var(--tos-font-body); letter-spacing: -.04em; color: var(--lp-ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.sp .plan-cur { font-size: .42em; letter-spacing: 0; vertical-align: .95em; margin-inline-end: 2px; }
.sp .plan-per { font-size: 15px; font-weight: 500; letter-spacing: 0; color: var(--lp-muted); margin-inline-start: 6px; }
.sp .plan-from { display: block; margin-bottom: 8px; font-size: 15px; font-weight: 500; letter-spacing: 0; line-height: 1.3; color: var(--lp-muted); }
.sp .plan-terms { margin-top: 22px; border-top: 1px solid var(--lp-rule); }
.sp .plan-terms li { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 8px 0; border-bottom: 1px solid var(--lp-rule); font-size: 15px; line-height: 1.4; color: var(--lp-ink); }
.sp .plan-terms li::before { content: ""; width: 7px; height: 7px; background: var(--lp-ink); flex: none; }
.sp .plan-x { margin-top: 16px; font-size: 16px; line-height: 1.55; color: var(--lp-ink-2); }
/* Enterprise: the price block, then the terms block (stacked on a phone) */
.sp .plan.is-ent .plan-b { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--lp-rule); }
.sp .plan.is-ent .plan-b .plan-x { margin-top: 0; }

@media (min-width: 760px) {
  .sp .pricing-terms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; border-top: 0; }
  .sp .pricing-terms li { border-top: 1px solid var(--lp-ink); align-items: flex-start; padding-top: 14px; }
  .sp .pricing-terms li::before { margin-top: 6px; }
  .sp .plans.is-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sp .plan { padding: 24px; }
  .sp .plans.is-2 .plan-x { margin-top: auto; padding-top: 16px; }
  .sp .plan.is-ent { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
  .sp .plan.is-ent .plan-a, .sp .plan.is-ent .plan-b { display: flex; flex-direction: column; min-width: 0; }
  .sp .plan.is-ent .plan-amt { margin-top: auto; padding-top: 22px; }
  .sp .plan.is-ent .plan-b { margin-top: 0; padding-top: 0; border-top: 0; padding-inline-start: 32px; border-inline-start: 1px solid var(--lp-rule); }
  .sp .plan.is-ent .plan-b .plan-x { margin-bottom: 22px; }
  .sp .plan.is-ent .plan-b .plan-terms { margin-top: auto; }
}
@media (min-width: 1180px) {
  .sp .plan-amt { font-size: clamp(48px, 3.6vw, 60px); }
}