/*
 * Canonical shared CSS for every Pages site (blueprint decision 7).
 * SOURCE OF TRUTH: pages/_shared/zisa.css — each site commits a VERBATIM copy
 * at public/assets/zisa.css, and CI fails on any drift (no build step; deploys
 * stay a bare wrangler pages deploy). Edit HERE, then re-copy into every site.
 */

:root {
  color-scheme: light dark;
  --fg: #1d1d1f;
  --fg-muted: #6e6e73;
  --bg: #fbfbfd;
  --card: #ffffff;
  --border: #d2d2d7;
  --accent: #0071e3;
  --key-bg: #f5f5f7;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fg: #f5f5f7;
    --fg-muted: #a1a1a6;
    --bg: #000000;
    --card: #1c1c1e;
    --border: #38383a;
    --accent: #2997ff;
    --key-bg: #2c2c2e;
  }
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  font-family:
    -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: var(--fg);
  background: var(--bg);
}
.card {
  width: 100%;
  max-width: 520px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 40px 36px;
  text-align: center;
}
h1 {
  font-size: 24px;
  font-weight: 600;
  margin: 0 0 8px;
}
p {
  color: var(--fg-muted);
  font-size: 15px;
  line-height: 1.5;
  margin: 0 0 16px;
}
/* States: exactly one is visible at a time. Authored HTML activates an
   actionable static recovery; a running script may transition to loading. */
[data-state] {
  display: none;
}
[data-state].is-active {
  display: block;
}
.spinner {
  width: 28px;
  height: 28px;
  margin: 0 auto 20px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .spinner {
    animation: none;
  }
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.license-key {
  font-family: ui-monospace, "SF Mono", Menlo, Monaco, monospace;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.04em;
  background: var(--key-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 18px;
  margin: 0 0 16px;
  user-select: all;
  word-break: break-all;
}
.plan-line {
  font-size: 13px;
  color: var(--fg-muted);
  margin: 0 0 24px;
}
.actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
button,
.button {
  appearance: none;
  font: inherit;
  font-size: 16px;
  font-weight: 500;
  border-radius: 12px;
  padding: 12px 20px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--fg);
}
button.primary,
.button.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #ffffff;
}
.emailed {
  margin: 20px 0 0;
  font-size: 13px;
  color: var(--fg-muted);
}
.fallback-links {
  margin-top: 8px;
}
a {
  color: var(--accent);
}

/* Portal (account.zisa.ai) — list rows and secondary text. */
.muted {
  color: var(--fg-muted);
  font-size: 0.9rem;
}

.section-title {
  font-size: 1.1rem;
  margin: 1.5rem 0 0.5rem;
}

.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--border);
}

.row:last-child {
  border-bottom: none;
}

.field {
  width: 100%;
  padding: 0.6rem 0.8rem;
  font-size: 1rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  color: var(--fg);
}

/* --- Pricing plan cards (v5) -------------------------------------------
   Every colour here is a TOKEN, never one of the mock's literals. The mock
   is drawn in this stylesheet's own dark palette, so tokenising it costs
   nothing and buys light mode, which the mock itself does not have.
   `.plan-card`, not `.card`: `.card` is already the page container. */
.plans {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: stretch;
}
@media (max-width: 720px) {
  .plans {
    grid-template-columns: 1fr;
  }
}
.plan-card {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 32px 28px 26px;
  text-align: left;
}
.plan-card--featured {
  border-color: var(--accent);
}
.card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  min-height: 34px;
}
.eyebrow {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.09em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.badge {
  display: inline-block;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--accent);
  color: #ffffff; /* matches .button.primary's literal — not a token */
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}
.price {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 18px 0 0;
}
.price-amount {
  font-size: 48px;
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1;
}
.price-qualifier {
  font-size: 17px;
  color: var(--fg-muted);
}
.blurb {
  margin: 12px 0 0;
  color: var(--fg-muted);
}
.rule {
  height: 1px;
  background: var(--border);
  margin: 22px 0;
}
.features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.features li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.features svg {
  flex: none;
  margin-top: 2px;
}
.card-footer {
  margin-top: auto;
  padding-top: 26px;
}
.seats-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.seats-label {
  color: var(--fg-muted);
}
.seats-row .field {
  width: 96px;
}
.total {
  margin: 0 0 16px;
  font-size: 17px;
  font-weight: 500;
}
.card-footer .button {
  width: 100%;
  text-align: center;
}
/* The closing line under the plan grid. The mock sets `margin: 45px 0 0` at a
   1302px page width; scaled to this page's 960px container that is ~33px, and
   32px also matches `.plans`'s own gap so the vertical rhythm is one number.
   Without it the links sit FLUSH against the cards — measured at 0px. */
.plans ~ .closing {
  margin-top: 32px;
}
/* The pricing page's container ONLY. `.card` is 520px — right for the single
 * -column pages that share it, and half what two plan cards need: the two-card
 * grid rendered at ~185px a card, wrapping "one-time" mid-phrase, running the
 * feature text to five lines and breaking "Buy Personal" across two. The
 * approved mock lays the same grid out at 1302px. A MODIFIER rather than a
 * change to `.card`, so every other page keeps its measure; same specificity as
 * `.card`, so being later in source is what makes it win. Mobile is unaffected
 * — the grid collapses to one column at 720px, well inside this width. */
.card--wide {
  max-width: 960px;
}

/* The `hidden` attribute must always win: author-origin display rules on
 * .button defeat the UA-origin [hidden] default, so restate it here. Equal
 * specificity + last-in-source keeps this rule on top — KEEP IT LAST, and
 * mean it: the v5 pricing block was appended BELOW this rule, which handed
 * `display` back to seven selectors (.badge, .plans, .price, .plan-card,
 * .card-head, .features, .seats-row) for any element carrying `hidden`.
 * Nothing shipped was visibly broken only because `.total` — the one v5
 * element that is ever hidden — sets no `display` of its own; giving it one
 * later would have silently un-hidden it. APPEND ABOVE THIS RULE, always. */
[hidden] {
  display: none;
}