/* Pages outside the app: sign-in, plan & billing, legal. Same look as styles.css. */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
:root {
  --b: rgba(255,255,255,0.08);
  --b2: rgba(255,255,255,0.14);
  --t2: #9c9c9c;
  --t3: #7e7e7e;
  --ok: #7ee2a0;
  --warn: #f0b849;
  --r: rgba(255,90,90,0.9);
}
html, body {
  min-height: 100%; background: #000; color: #fff;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased; font-size: 14px; line-height: 1.5;
}
body {
  background: radial-gradient(1200px 600px at 50% -10%, rgba(255,255,255,.06), transparent 60%), #000;
}
a { color: inherit; }
.page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 32px 16px; }
.card { width: 100%; max-width: 400px; text-align: center; }
.card.wide { max-width: 560px; }
.card.xwide { max-width: 720px; }
.logo { display: block; margin: 0 auto 18px; width: 88px; height: 88px; }
h1 { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; }
h2 { font-size: 17px; font-weight: 650; }
h3 { font-size: 14px; font-weight: 650; margin-bottom: 6px; }
.lead { color: var(--t2); margin: 10px auto 28px; max-width: 380px; }
.fine { color: var(--t3); font-size: 12px; margin-top: 22px; }
.fine a { color: var(--t2); }
.small { font-size: 12px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; height: 44px; padding: 0 18px; border-radius: 999px;
  border: 1px solid transparent; font: inherit; font-weight: 600; cursor: pointer;
  text-decoration: none; transition: background .14s, opacity .14s, transform .12s;
}
.btn:active { transform: scale(.985); }
.btn:focus-visible, .toggle button:focus-visible, .linkbtn:focus-visible { outline: 2px solid rgba(255,255,255,.85); outline-offset: 2px; }
.btn.google, .btn.primary { background: #fff; color: #111; }
.btn.google:hover, .btn.primary:hover { background: #e9e9e9; }
.btn.google.off { opacity: .35; pointer-events: none; }
.btn.ghost { background: rgba(255,255,255,.06); color: #fff; border-color: var(--b2); }
.btn.ghost:hover { background: rgba(255,255,255,.11); }
.btn.danger { background: rgba(255,90,90,.16); color: #ffc4c4; border-color: rgba(255,90,90,.4); }
.btn.danger:hover { background: rgba(255,90,90,.24); }
.btn:disabled { opacity: .5; cursor: default; }

.err {
  margin: 0 0 16px; padding: 10px 14px; border-radius: 10px; text-align: left;
  background: rgba(255,90,90,.08); border: 1px solid rgba(255,90,90,.3); color: #ffb3b3;
}
.note {
  margin: 0 0 16px; padding: 10px 14px; border-radius: 10px; text-align: left;
  background: rgba(126,226,160,.08); border: 1px solid rgba(126,226,160,.3); color: #c6f2d3;
}

/* ── plan & billing ── */
.panel {
  text-align: left; padding: 22px; border-radius: 16px;
  background: rgba(255,255,255,.035); border: 1px solid var(--b);
  max-width: 520px; margin: 0 auto;
}
.row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.row.center { justify-content: center; margin-bottom: 14px; }
.muted { color: var(--t2); }
.warn-text { color: var(--warn); }
.status { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; white-space: nowrap; }
.status::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--t3); }
.status.on::before { background: var(--ok); }
.status.warn::before { background: var(--warn); }
.plan-name { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
.plan-name .muted { font-size: 14px; font-weight: 500; }
.lines { margin-top: 14px; display: grid; gap: 4px; }

.toggle {
  display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; margin: 0 auto 18px;
  background: rgba(255,255,255,.05); border: 1px solid var(--b);
}
.toggle button {
  height: 34px; padding: 0 16px; border-radius: 999px; border: 0; cursor: pointer;
  background: transparent; color: var(--t2); font: inherit; font-weight: 600;
  display: inline-flex; align-items: center; gap: 8px;
}
.toggle button.on { background: #fff; color: #111; }
.toggle .save {
  font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px;
  background: rgba(126,226,160,.16); color: var(--ok);
}
.toggle button.on .save { background: #111; color: var(--ok); }

.plans { display: grid; grid-template-columns: 1fr; gap: 12px; text-align: left; }
@media (min-width: 620px) { .plans.two { grid-template-columns: 1fr 1fr; } }
/* Three cards only once there is room for three; below that they stack, and
   the free one stays first because it is the one being compared against. */
@media (min-width: 900px) { .plans.three { grid-template-columns: repeat(3, 1fr); } }

/* The free card is an option, not an offer: no border highlight, and its
   list is a list of CEILINGS, so a green tick would be lying. */
.plan.free { border-color: var(--b); background: rgba(255,255,255,.02); }
.badge.ghost { background: rgba(255,255,255,.1); color: var(--t2); }
.feats.limits li { color: var(--t2); }
.feats.limits li::before { content: '·'; color: var(--t3); }
.plan {
  padding: 20px; border-radius: 16px; border: 1px solid var(--b2); background: rgba(255,255,255,.03);
  display: flex; flex-direction: column; gap: 12px;
}
.plan.featured { border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.06); }
.plan-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.plan-tag { margin-top: -8px; }
.badge {
  font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px;
  background: #fff; color: #111; letter-spacing: .01em;
}
.price { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.price .per { font-size: 14px; font-weight: 500; color: var(--t2); letter-spacing: 0; }
.price-sub { color: var(--t2); font-size: 12.5px; margin-top: 4px; min-height: 19px; }
.price-sub s { color: var(--t3); }
.plan .btn { margin-top: auto; }
.feats { list-style: none; display: grid; gap: 6px; align-content: start; color: #ddd; flex: 1; }
.feats li::before { content: '✓'; color: var(--ok); margin-right: 8px; }
.fine-print { color: var(--t3); font-size: 12.5px; margin: 16px auto 0; max-width: 560px; }
.actions { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; }
.actions.narrow { max-width: 400px; margin-left: auto; margin-right: auto; }
.who { margin-top: 18px; color: var(--t3); font-size: 12px; }
.linkbtn { background: none; border: 0; color: var(--t2); font: inherit; font-size: 12px; cursor: pointer; text-decoration: underline; }
.linkbtn.danger { color: #ff9b9b; font-size: 13px; margin-top: 6px; align-self: center; }

.confirm {
  margin-top: 16px; padding: 16px; border-radius: 12px;
  background: rgba(255,255,255,.05); border: 1px solid var(--b2);
}
.confirm.danger { border-color: rgba(255,90,90,.35); background: rgba(255,90,90,.06); }
.confirm p { color: #ddd; }
.confirm-actions { display: flex; gap: 8px; margin-top: 14px; }
.confirm-actions .btn { height: 40px; }

/* ── legal pages ── */
.legal { max-width: 720px; margin: 0 auto; padding: 48px 20px 80px; }
.legal h1 { margin: 18px 0 4px; }
.legal h2 { margin: 28px 0 8px; font-size: 16px; }
.legal p, .legal li { color: #d6d6d6; }
.legal p + p { margin-top: 10px; }
.legal ul { margin: 8px 0 0 20px; display: grid; gap: 6px; }
.legal a { color: #fff; }
.legal-back { color: var(--t2) !important; text-decoration: none; font-size: 13px; }
.legal-back:hover { color: #fff !important; }

/* ── the plans page, for somebody who has no plan yet ──────────────────────
   They may never have seen the product work, so what it does comes before
   what it costs: a price list on its own asks people to decide before they
   have been told what they are deciding about.

   (This used to be declared three times over, and what rendered was the
   accidental merge of all three.) */
.value-strip {
  list-style: none; display: grid; gap: 14px; text-align: left;
  max-width: 600px; margin: 20px auto 22px;
}
.value-strip li {
  display: grid; grid-template-columns: 116px 1fr; gap: 14px; align-items: baseline;
  color: var(--t2); font-size: 13.5px; line-height: 1.55;
}
.value-strip b {
  color: #fff; font-size: 12px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
}
@media (max-width: 560px) {
  .value-strip li { grid-template-columns: 1fr; gap: 3px; }
}

/* The line that answers "am I committing to anything?" at the moment the
   buttons are in view. */
.trust-row {
  margin: 16px auto 0; max-width: 560px;
  color: #ffc180; font-size: 13px; line-height: 1.6; letter-spacing: .01em;
}
.trust-row .sep { color: rgba(255,255,255,.25); margin: 0 7px; }

/* The three hesitations, answered under the prices. */
.reassure {
  list-style: none;
  display: grid;
  gap: 12px;
  max-width: 620px;
  margin: 22px auto 0;
  padding: 18px 20px;
  border-radius: 14px;
  background: rgba(255,255,255,.035);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.07);
  text-align: left;
}
.reassure li { color: var(--t2); font-size: 13px; line-height: 1.55; }
.reassure b { display: block; color: #fff; font-weight: 600; margin-bottom: 2px; }

/* ── movement on the plans page ─────────────────────────────────────────────
   This is the page where somebody decides whether to pay, so the motion has
   one job: let the argument arrive in the order it is meant to be read, and
   make the two things that respond to a press — the toggle and the cards —
   feel like they responded. Nothing moves on its own afterwards.

   Everything here is opt-in through a class the page adds, so a browser that
   never runs the script still shows the whole page. */
.rise {
  animation: rise .5s cubic-bezier(.2, .7, .3, 1) both;
  animation-delay: var(--d, 0ms);
}
@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* The price, when the toggle changes it. Short and vertical: the number is
   replaced, so it arrives from where the old one left. */
.price-block.swap { animation: swap .34s cubic-bezier(.2, .7, .3, 1) both; }
@keyframes swap {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* The selected side of the toggle slides its white pill rather than blinking
   it on, and the saving tag lands a beat later. */
.toggle button { transition: color .18s ease, background-color .22s ease; }
.toggle .save { transition: background-color .22s ease, color .22s ease; }

/* A card that can be pressed says so when the pointer is on it. The featured
   one is already lifted, so it lifts a little less. */
.plan {
  transition: transform .22s cubic-bezier(.2, .7, .3, 1),
              box-shadow .22s ease, border-color .22s ease;
}
.plan:hover {
  transform: translateY(-3px);
  border-color: rgba(255,255,255,.22);
  box-shadow: 0 18px 44px rgba(0,0,0,.45);
}
.plan.featured:hover {
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.55);
  box-shadow: 0 22px 54px rgba(0,0,0,.5);
}
.btn { transition: background-color .16s ease, transform .12s ease, opacity .16s ease; }
.btn:not(:disabled):active { transform: scale(.985); }

/* The one coloured line on the page, breathing slowly enough that it reads as
   a light being on rather than something asking to be clicked. */
.trust-row { animation: trust 5.5s ease-in-out 1.2s infinite; }
@keyframes trust {
  0%, 100% { opacity: .82; }
  50%      { opacity: 1; }
}

/* Motion is decoration here, never information: with it switched off the page
   is identical, just immediate. */
@media (prefers-reduced-motion: reduce) {
  .rise, .price-block.swap, .trust-row { animation: none; }
  .plan, .plan:hover, .plan.featured:hover { transition: none; transform: none; }
  .btn { transition: none; }
}