/* The customer pages: the landing (hero, plans, steps, terms) and the account page (status, key,
   purchases). Tokens and controls: base.css. */

/* Landing ----------------------------------------------------------------------------------- */

.hero { padding: 88px 0 24px; }
.hero-text { display: grid; gap: 18px; max-width: 680px; }
.hero h1 { font-size: clamp(40px, 6vw, 68px); font-stretch: 116%; font-weight: 700; line-height: 1.02; letter-spacing: -0.028em; }
.lede { max-width: 60ch; color: var(--text-2); font-size: 17px; line-height: 1.6; }
.requires { color: var(--text); font-weight: 500; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.free-note { color: var(--text-3); font-size: 13.5px; }

.manager-shot { margin: 64px 0 0; max-width: 858px; }
.manager-shot img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
}
.manager-shot figcaption { margin-top: 14px; color: var(--text-3); font-size: 13.5px; }

.section { padding-top: 96px; }
.section-head { display: grid; gap: 10px; max-width: 640px; margin-bottom: 28px; }
.section-head h2 { font-size: clamp(26px, 3vw, 32px); }
.section-head p { color: var(--text-2); }

/* Plans: a price list, one row per plan. */
.plan-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.plan {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 150px;
  align-items: center;
  gap: 8px 32px;
  padding: 20px 4px;
  border-bottom: 1px solid var(--line-soft);
}
.plan-name { font-family: var(--display); font-size: 21px; font-stretch: 112%; font-weight: 600; overflow-wrap: anywhere; }
.plan-price { font-variant-numeric: tabular-nums; white-space: nowrap; }
.plan-amount { font-size: 21px; font-weight: 600; }
.plan-days { color: var(--text-2); }
.plan-action .btn { width: 100%; }
.plan-error { grid-column: 1 / -1; text-align: right; }
.plan-empty { display: block; padding: 24px 4px; color: var(--text-2); }
.plan-skeleton { grid-template-columns: 1fr auto; padding: 28px 4px; }
.plan-skeleton .bar, .skeleton .bar {
  display: block;
  width: 180px;
  height: 12px;
  border-radius: 3px;
  background: var(--raised);
  animation: loading 900ms ease-in-out infinite alternate;
}
.plan-skeleton .bar-short { width: 110px; }
@keyframes loading { from { opacity: 0.45; } to { opacity: 1; } }

.plans-note { margin-top: 14px; color: var(--text-3); font-size: 13.5px; }

.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.steps li { display: grid; align-content: start; gap: 10px; padding-top: 18px; border-top: 1px solid var(--line); counter-increment: step; }
.steps li::before {
  content: counter(step);
  color: var(--text-3);
  font: 300 44px/1 var(--display);
  font-stretch: 112%;
  font-variant-numeric: tabular-nums;
}
.steps h3 { font-size: 19px; }
.steps p { color: var(--text-2); }

.terms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 48px; margin: 0; }
.terms dt { font-family: var(--display); font-size: 17px; font-stretch: 112%; font-weight: 600; }
.terms dd { margin: 6px 0 0; max-width: 58ch; color: var(--text-2); }

/* Account ----------------------------------------------------------------------------------- */

.gate { display: grid; justify-items: center; padding: 72px 0 24px; }
.gate-panel {
  display: grid;
  gap: 18px;
  width: min(420px, 100%);
  padding: 28px;
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  background: var(--surface);
}
.gate-panel h1 { font-size: 24px; }
.gate-panel > p { color: var(--text-2); }
.gate-slot { display: grid; gap: 14px; }

.account { display: grid; gap: 28px; padding-top: 48px; }
.account-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; }
.account-head h1 { font-size: clamp(30px, 4vw, 40px); font-stretch: 116%; }
.account-head p { color: var(--text-3); font-size: 13.5px; }

.paid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  padding: 14px 18px;
  border: 1px solid color-mix(in oklab, var(--c) 35%, transparent);
  border-radius: 10px;
  background: color-mix(in oklab, var(--c) 9%, var(--bg));
  --c: var(--info);
}
.paid.is-done { --c: var(--good); }
.paid.is-late { --c: var(--warn); }
.paid-text { flex: 1 1 360px; color: var(--text); }
.paid-text strong { color: var(--c); font-weight: 600; }

.status {
  --c: var(--text-3);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px 24px;
  padding: 30px 32px 32px;
  border: 1px solid color-mix(in oklab, var(--c) 32%, transparent);
  border-radius: 14px;
  background: color-mix(in oklab, var(--c) 6%, var(--surface));
}
.status.is-active { --c: var(--good); }
.status.is-expired, .status.is-revoked { --c: var(--bad); }
.status-main { display: grid; gap: 10px; }
.status-big {
  font-family: var(--display);
  font-size: clamp(40px, 6vw, 64px);
  font-stretch: 112%;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.028em;
  font-variant-numeric: tabular-nums;
}
.status-detail { max-width: 64ch; color: var(--text-2); font-size: 15.5px; }
.status-detail strong { color: var(--text); font-weight: 600; }
.status-state {
  align-self: start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 13px;
  border-radius: 15px;
  background: color-mix(in oklab, var(--c) 16%, transparent);
  color: color-mix(in oklab, var(--c) 80%, var(--text));
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.status-state::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }

.account-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 20px; }
.panel-box { display: grid; align-content: start; gap: 14px; padding: 22px 24px 24px; border: 1px solid var(--line-soft); border-radius: 12px; background: var(--surface); }
.panel-box h2 { font-size: 19px; }
.panel-box p { color: var(--text-2); }

.key-body { display: grid; gap: 14px; }
.key-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 12px 12px 12px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
}
.key-code {
  flex: 1 1 260px;
  color: var(--text);
  font-family: var(--mono);
  font-size: 19px;
  font-variant-ligatures: none;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.key-code.is-shown { user-select: all; }
.key-player { font-size: 13.5px; }

.account-section { display: grid; gap: 16px; padding-top: 20px; }
.account-section h2 { font-size: 24px; }
.account-section > p { color: var(--text-2); }

.table-wrap { overflow-x: auto; border: 1px solid var(--line-soft); border-radius: 10px; }
.table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.table th {
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
  color: var(--text-3);
  font-size: 12.5px;
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
}
.table td { padding: 11px 16px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; white-space: nowrap; }
.table tr:last-child td { border-bottom: 0; }
.table .num { text-align: right; }
.table .empty td { padding: 22px 16px; color: var(--text-2); white-space: normal; }

/* Narrow screens ---------------------------------------------------------------------------- */

@media (max-width: 860px) {
  .steps, .terms, .account-grid { grid-template-columns: minmax(0, 1fr); }
  .steps { gap: 28px; }
}

@media (max-width: 600px) {
  .page { width: calc(100% - 32px); }
  .hero { padding-top: 48px; }
  .manager-shot { margin-top: 44px; }
  .section { padding-top: 72px; }
  .plan { grid-template-columns: minmax(0, 1fr) auto; }
  .plan-action { grid-column: 1 / -1; }
  .plan-error { text-align: left; }
  .status { grid-template-columns: minmax(0, 1fr); padding: 22px 20px 24px; }
  .status-state { order: -1; justify-self: start; }
  .panel-box { padding: 18px; }
  .key-code { font-size: 16px; }
}