/* LYRC design-token skin for pricing.html (paywall / plans page).
 * Revert: remove `lyrc-app` from <body class> OR delete the <link> in pricing.html.
 * Visual layer only - prices, plan names, copy, button behaviour and the
 * Stripe / redeem-code JS are untouched. Tokens come from cutflux-tokens.css. */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

body.lyrc-app {
  /* Map the page's own variables onto the shared tokens */
  --bg: var(--cf-bg);
  --bg-2: var(--cf-panel);
  --ink: var(--cf-text);
  --dim: var(--cf-text-2);
  --line: var(--cf-border-subtle);
  --card: var(--cf-surface);
  --accent: var(--cf-accent);
  --accent-2: var(--cf-accent);
  --accent-3: var(--cf-accent);
  --gold: var(--cf-warn);
  font-family: var(--cf-font);
  background: var(--cf-bg); /* flat - no radial glows */
}
body.lyrc-app button,
body.lyrc-app input { font-family: var(--cf-font); }

/* ── Header ── */
body.lyrc-app header {
  background: rgba(10, 10, 13, 0.85);
  border-bottom-color: var(--cf-border-subtle);
}
body.lyrc-app .brand img { box-shadow: none; border-radius: var(--cf-r-card); }
body.lyrc-app .brand span { font-weight: 700; }
body.lyrc-app nav a { font-weight: 500; color: var(--cf-text-2); transition: color var(--cf-t-fast); }
body.lyrc-app nav a:hover,
body.lyrc-app nav a.on { color: var(--cf-text); }
body.lyrc-app nav a.on { color: var(--cf-accent); }
body.lyrc-app .h-cta {
  background: var(--cf-accent);
  color: #fff;
  border-radius: var(--cf-r-button);
  font-weight: 600;
  box-shadow: none;
  transition: background-color var(--cf-t-fast);
}
body.lyrc-app .h-cta:hover { background: var(--cf-accent-hover); color: #fff; }

/* ── Hero ── */
body.lyrc-app .eyebrow {
  font-weight: 600;
  color: var(--cf-accent);
  background: var(--cf-accent-soft);
  border-color: rgba(59, 130, 246, 0.35);
  border-radius: var(--cf-r-pill);
}
body.lyrc-app h1 {
  font-family: var(--cf-font);
  font-weight: 700;
  letter-spacing: -0.035em;
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: var(--cf-text);
}
body.lyrc-app h1 em { color: var(--cf-accent); font-style: normal; }
body.lyrc-app .sub { color: var(--cf-text-2); }

/* ── Billing toggle (segmented control) ── */
body.lyrc-app .toggle {
  background: var(--cf-surface);
  border-color: var(--cf-border);
}
body.lyrc-app .toggle button {
  font-weight: 600;
  color: var(--cf-text-2);
  transition: background-color var(--cf-t-base), color var(--cf-t-base);
}
body.lyrc-app .toggle button:hover { color: var(--cf-text); }
body.lyrc-app .toggle button.on {
  background: var(--cf-accent);
  color: #fff;
  box-shadow: none;
}
body.lyrc-app .save-tag { color: var(--cf-warn); font-weight: 600; }
body.lyrc-app .toggle button.on .save-tag { color: #fff; }

/* ── Plans ── */
body.lyrc-app .plan {
  background: var(--cf-surface);
  border: 1px solid var(--cf-border-subtle);
  border-radius: var(--cf-r-panel);
  box-shadow: none;
  transition: transform var(--cf-t-slow), border-color var(--cf-t-base);
}
body.lyrc-app .plan:hover { border-color: var(--cf-border-strong); }
body.lyrc-app .plan.popular {
  background: var(--cf-surface);
  border: 1px solid var(--cf-accent);
  box-shadow: none;
}
body.lyrc-app .plan .badge {
  background: var(--cf-accent);
  color: #fff;
  font-weight: 700;
  border-radius: var(--cf-r-pill);
  box-shadow: none;
}
/* status chip, not a control - flat warn colour */
body.lyrc-app .plan.lifetime .badge { background: var(--cf-warn); color: #1a1102; }
body.lyrc-app .plan h3 {
  font-family: var(--cf-font);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--cf-text);
}
body.lyrc-app .plan .tag { color: var(--cf-text-2); }
body.lyrc-app .price .amt { font-weight: 700; color: var(--cf-text); }
body.lyrc-app .price .per,
body.lyrc-app .price-alt { color: var(--cf-text-2); }
body.lyrc-app .price-alt s { opacity: 1; color: var(--cf-text-3); }
body.lyrc-app .feats li { color: var(--cf-text-2); }
body.lyrc-app .feats li::before { background: var(--cf-accent); box-shadow: none; }
body.lyrc-app .feats li::after { border-color: #fff; }

/* Buttons: flat accent for primary, flat surface + border for secondary */
body.lyrc-app .cta {
  background: var(--cf-raised);
  color: var(--cf-text);
  border: 1px solid var(--cf-border);
  border-radius: var(--cf-r-button);
  font-weight: 600;
  box-shadow: none;
  transition: background-color var(--cf-t-fast), border-color var(--cf-t-fast), color var(--cf-t-fast);
}
body.lyrc-app .cta:hover { background: var(--cf-hover); border-color: var(--cf-border-strong); }
body.lyrc-app .cta.primary {
  background: var(--cf-accent);
  color: #fff;
  border: 1px solid var(--cf-accent);
  box-shadow: none;
}
body.lyrc-app .cta.primary:hover { background: var(--cf-accent-hover); border-color: var(--cf-accent-hover); transform: none; }
/* Lifetime keeps its own button, now flat secondary (orange is status-only) */
body.lyrc-app .cta.gold {
  background: var(--cf-raised);
  color: var(--cf-text);
  border: 1px solid var(--cf-border-strong);
  box-shadow: none;
}
body.lyrc-app .cta.gold:hover { background: var(--cf-hover); border-color: var(--cf-accent); }
body.lyrc-app .cta:focus-visible,
body.lyrc-app .toggle button:focus-visible,
body.lyrc-app nav a:focus-visible,
body.lyrc-app .q summary:focus-visible { outline: none; box-shadow: var(--cf-focus); }

/* Loading: while checkout / redeem is working the JS disables the button -
   show a small accent spinner in front of its (unchanged) label. */
body.lyrc-app .cta:disabled { cursor: progress; }
body.lyrc-app .cta:disabled::before {
  content: "";
  display: inline-block;
  width: 14px; height: 14px;
  margin-right: 8px;
  vertical-align: -2px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  animation: lyrcSpin 0.8s linear infinite;
}
@keyframes lyrcSpin { to { transform: rotate(360deg); } }
body.lyrc-app .foot { color: var(--cf-text-3); }

/* ── Invite code ── */
body.lyrc-app .redeem h2 { font-weight: 600; }
body.lyrc-app .redeem-sub { opacity: 1; color: var(--cf-text-2); }
body.lyrc-app .redeem-row input {
  background: var(--cf-input);
  border: 1px solid var(--cf-border);
  border-radius: var(--cf-r-button);
  font-family: var(--cf-font);
  font-weight: 600;
  transition: border-color var(--cf-t-fast);
}
body.lyrc-app .redeem-row input::placeholder { color: var(--cf-text-4); }
body.lyrc-app .redeem-row input:hover { border-color: var(--cf-border-strong); }
body.lyrc-app .redeem-row input:focus { outline: none; border-color: var(--cf-accent); box-shadow: var(--cf-focus); }
body.lyrc-app .redeem-msg { transition: color var(--cf-t-base); }
body.lyrc-app .redeem-msg.ok { color: var(--cf-ok); }

/* ── FAQ ── */
body.lyrc-app .faq h2 {
  font-family: var(--cf-font);
  font-weight: 700;
  letter-spacing: -0.03em;
}
body.lyrc-app .q {
  background: var(--cf-surface);
  border-color: var(--cf-border-subtle);
  border-radius: var(--cf-r-card);
  transition: border-color var(--cf-t-base);
}
body.lyrc-app .q:hover,
body.lyrc-app .q[open] { border-color: var(--cf-border); }
body.lyrc-app .q summary { font-weight: 600; color: var(--cf-text); border-radius: var(--cf-r-xs); }
body.lyrc-app .q summary::after { color: var(--cf-text-2); transition: transform var(--cf-t-base), color var(--cf-t-base); }
body.lyrc-app .q[open] summary::after { color: var(--cf-accent); }
body.lyrc-app .q p { color: var(--cf-text-2); }

/* ── Footer ── */
body.lyrc-app footer { border-top-color: var(--cf-border-subtle); color: var(--cf-text-3); }
body.lyrc-app footer a { color: var(--cf-text-2); transition: color var(--cf-t-fast); }
body.lyrc-app footer a:hover { color: var(--cf-text); }

@media (prefers-reduced-motion: reduce) {
  body.lyrc-app .cta:disabled::before { animation: none; }
  body.lyrc-app .plan { transition: none; }
}

/* Narrow phones (<=400px): the header ran out of room and "Open App" wrapped
   over the logo. Keep the logo and the one action; the "Editor" link duplicates
   "Open App" and "Pricing" is this page. (2026-10-16) */
@media (max-width: 400px) {
  body.lyrc-app header nav a:not(.h-cta) { display: none; }
  body.lyrc-app header .h-cta { white-space: nowrap; }
}