/* Public landing page (ai-upgrade.me/welcome). Same design language as the app
   — paper/ink palette, Fraunces headings, Inter body, IBM Plex Mono numbers —
   but standalone: this file is served to LOGGED-OUT visitors, so it must not
   depend on styles.css or on anything behind requireAuth. */
:root {
  --paper: #eef1f4;
  --ink: #14171c;
  --ink-soft: #3a4049;
  --red: #dd3b2c;
  --sage: #2c7a57;
  --amber: #bc7a12;
  --card: #fff;
  --line: #dce2e8;
  --muted: #697079;
  --radius: 14px;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --body: "Inter", system-ui, sans-serif;
  --display: "Fraunces", Georgia, serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  background: var(--paper); color: var(--ink);
  font-family: var(--body); line-height: 1.55; -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--display); font-weight: 600; line-height: 1.12; }
a { color: inherit; }
.wrap { max-width: 940px; margin: 0 auto; padding: 0 1.1rem; }

/* ---- Sticky top bar ---- */
.topnav {
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(8px); border-bottom: 1px solid var(--line);
}
.topnav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; min-height: 58px; }
.logo { display: flex; align-items: center; gap: 0.5rem; font-family: var(--display); font-weight: 600; font-size: 1.02rem; text-decoration: none; }
.logo img { width: 28px; height: 28px; border-radius: 7px; }
.navbtns { display: flex; align-items: center; gap: 0.45rem; }

/* ---- Buttons ---- */
.btn {
  display: inline-block; font: inherit; font-weight: 600; text-decoration: none;
  padding: 0.8rem 1.15rem; border-radius: 12px; border: 1px solid transparent;
  cursor: pointer; min-height: 46px; line-height: 1.7;
}
.btn-primary { background: var(--ink); color: var(--paper); }
.btn-primary:hover { background: #000; }
.btn-play { background: #01875f; color: #fff; }
.btn-play:hover { background: #016b4c; }
.btn-play span { color: #fff; margin-right: 0.15rem; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--ink-soft); }
.btn-sm { padding: 0.5rem 0.85rem; min-height: 38px; font-size: 0.9rem; line-height: 1.5; }

/* ---- Hero ---- */
.hero { padding: 3.2rem 0 2.6rem; text-align: center; }
.eyebrow {
  font-family: var(--mono); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--red); margin-bottom: 1rem;
}
.hero h1 { font-size: clamp(2rem, 6.4vw, 3.35rem); letter-spacing: -0.015em; }
.hero h1 em { font-style: normal; color: var(--red); }
.hero .lede { font-size: clamp(1.02rem, 2.4vw, 1.2rem); color: var(--ink-soft); max-width: 40rem; margin: 1.1rem auto 0; }
.cta-row { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; margin-top: 1.7rem; }
.trust { font-size: 0.84rem; color: var(--muted); margin-top: 1rem; }
.trust b { font-family: var(--mono); font-weight: 600; color: var(--ink-soft); }

/* ---- Sections ---- */
section { padding: 2.6rem 0; border-top: 1px solid var(--line); }
.seclabel {
  font-family: var(--mono); font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.75rem;
}
section h2 { font-size: clamp(1.5rem, 4vw, 2.1rem); max-width: 32rem; }
section > .wrap > p { max-width: 42rem; color: var(--ink-soft); margin-top: 0.9rem; }
.pull {
  font-family: var(--display); font-size: clamp(1.25rem, 3.4vw, 1.7rem);
  line-height: 1.28; border-left: 3px solid var(--red);
  padding: 0.15rem 0 0.15rem 1.1rem; margin: 1.6rem 0; max-width: 38rem;
}

/* ---- The three questions ---- */
.qs { display: grid; gap: 0.85rem; margin-top: 1.6rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.q { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.05rem; }
.q h3 { font-size: 1.08rem; margin-bottom: 0.35rem; }
.q p { font-size: 0.92rem; color: var(--muted); }

/* ---- Feature grid ---- */
.features { display: grid; gap: 0.85rem; margin-top: 1.7rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.f { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.05rem; }
.f .ico { font-size: 1.4rem; line-height: 1; display: block; margin-bottom: 0.55rem; }
.f h3 { font-size: 1.02rem; margin-bottom: 0.3rem; }
.f p { font-size: 0.9rem; color: var(--muted); }

/* ---- Pillars ---- */
.pillars { display: grid; gap: 1rem; margin-top: 1.7rem; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.pillar { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2rem; }
.pillar .n { font-family: var(--mono); font-size: 0.78rem; font-weight: 600; color: var(--red); display: block; margin-bottom: 0.5rem; }
.pillar h3 { font-size: 1.18rem; margin-bottom: 0.45rem; }
.pillar p { font-size: 0.93rem; color: var(--muted); }
.pillar .how { display: block; margin-top: 0.7rem; padding-top: 0.7rem; border-top: 1px solid var(--line); font-size: 0.84rem; color: var(--ink-soft); }
.pillar .how b { font-weight: 600; }

/* ---- Change list ---- */
.changes { list-style: none; margin-top: 1.5rem; display: grid; gap: 0.7rem; }
.changes li { display: flex; gap: 0.85rem; align-items: baseline; padding-bottom: 0.7rem; border-bottom: 1px solid var(--line); }
.changes li:last-child { border-bottom: 0; }
.changes b { font-family: var(--display); font-size: 1.05rem; font-weight: 600; min-width: 7.5rem; }
.changes span { color: var(--ink-soft); font-size: 0.95rem; }

/* ---- Privacy panel (inverted) ---- */
.invert { background: var(--ink); color: var(--paper); border-top: 0; }
.invert h2 { color: var(--paper); }
.invert .seclabel { color: #8b939d; }
.invert p { color: #c3c9d1 !important; }
.invert .plist { list-style: none; margin-top: 1.4rem; display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fit, minmax(205px, 1fr)); }
.invert .plist li { border: 1px solid #2b3038; border-radius: 12px; padding: 0.85rem 0.95rem; font-size: 0.9rem; color: #dfe4e9; }
.invert .plist b { display: block; font-family: var(--display); font-size: 1rem; color: var(--paper); margin-bottom: 0.2rem; }

/* ---- Honest notice ---- */
.notice {
  background: #f3eee3; color: var(--amber);
  border: 1px solid color-mix(in srgb, var(--amber) 28%, var(--line));
  border-radius: var(--radius); padding: 0.95rem 1.05rem; margin-top: 1.5rem;
  font-size: 0.87rem; line-height: 1.5;
}
.notice b { font-weight: 600; }
.notice p + p { margin-top: 0.45rem; }

/* ---- Price / final CTA ---- */
.price { text-align: center; }
.pricetag { font-family: var(--mono); font-size: 2.5rem; font-weight: 600; letter-spacing: -0.02em; }
.pricetag small { font-family: var(--body); font-size: 0.95rem; font-weight: 500; color: var(--muted); }
.price ul { list-style: none; margin: 1.2rem auto 0; max-width: 22rem; text-align: left; display: grid; gap: 0.4rem; font-size: 0.93rem; color: var(--ink-soft); }
.price ul li::before { content: "✓"; color: var(--sage); font-weight: 700; margin-right: 0.5rem; }

/* ---- Footer ---- */
footer { border-top: 1px solid var(--line); padding: 1.8rem 0 2.4rem; font-size: 0.82rem; color: var(--muted); }
footer .disc { background: var(--ink); color: var(--paper); border-radius: 12px; padding: 0.8rem 0.95rem; margin-bottom: 1.1rem; font-size: 0.78rem; line-height: 1.45; }
footer .fcontact { margin: 0 0 0.7rem; font-size: 0.9rem; color: var(--ink); }
footer .fcontact a { font-weight: 600; }
footer .flinks { display: flex; flex-wrap: wrap; gap: 1rem; }
footer a { text-decoration: underline; }

@media (max-width: 560px) {
  .hero { padding: 2.3rem 0 2rem; }
  .cta-row .btn { flex: 1 1 100%; text-align: center; }
  .changes li { flex-direction: column; gap: 0.15rem; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---- Bring-your-own-AI section ---- */
.aigrid { display: grid; gap: 1rem; margin-top: 1.7rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.aicol { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.15rem;
         display: flex; flex-direction: column; }
.aicol h3 { font-size: 1.08rem; margin-bottom: 0.3rem; }
.aicol > p { font-size: 0.9rem; color: var(--muted); margin-bottom: 0.85rem; }
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.chips li {
  font-family: var(--mono); font-size: 0.78rem; font-weight: 500;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 999px; padding: 0.32rem 0.7rem; white-space: nowrap;
}
.chips li.is-default { border-color: var(--sage); color: var(--sage); }
.chips li.wide { white-space: normal; }
/* Pushed to the bottom so the three cards' footnotes line up however the
   chips wrap at a given width. */
.aicol .foot { display: block; margin-top: auto; padding-top: 0.8rem; font-size: 0.84rem; color: var(--ink-soft); }
.smallprint {
  margin-top: 1.1rem; font-size: 0.82rem; color: var(--muted);
  border-top: 1px solid var(--line); padding-top: 0.9rem; max-width: 46rem;
}
.smallprint b { color: var(--ink-soft); font-weight: 600; }
.closer {
  font-family: var(--display); font-size: clamp(1.35rem, 3.8vw, 2rem); line-height: 1.22;
  margin-top: 2rem; max-width: 34rem;
}
.closer b { color: var(--red); font-weight: 600; }

/* ---- Plan cards (three SKUs, §12 two-tier pricing) ----------------------
   The middle card is the one most people should take: it is the only plan
   that works with nothing to set up. The bring-your-own-key cards are cheaper
   but assume the visitor already has an AI provider account, so they are
   presented as the enthusiast option rather than the headline. */
.plans {
  display: grid; gap: 1rem; margin: 1.6rem 0 0;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  text-align: left; list-style: none;
}
.plan {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.25rem 1.15rem; display: flex; flex-direction: column; position: relative;
}
.plan.is-featured { border-color: var(--sage); box-shadow: 0 0 0 1px var(--sage); }
.plan-badge {
  position: absolute; top: -0.62rem; left: 1.1rem;
  background: var(--sage); color: #fff; border-radius: 999px;
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; padding: 0.16rem 0.6rem;
}
.plan.is-saver .plan-badge { background: var(--amber); }
.plan h3 { font-size: 1.05rem; margin-bottom: 0.15rem; }
.plan .plan-who { font-size: 0.85rem; color: var(--muted); margin-bottom: 0.85rem; }
.plan .pricetag { font-size: 2rem; }
.plan .plan-sub { font-size: 0.82rem; color: var(--muted); margin-top: 0.15rem; min-height: 1.2em; }
.plan ul { list-style: none; margin: 0.95rem 0 0; display: grid; gap: 0.42rem; }
.plan ul li { font-size: 0.88rem; padding-left: 1.05rem; position: relative; }
.plan ul li::before { content: "·"; position: absolute; left: 0.3rem; color: var(--sage); font-weight: 700; }
.plan ul li.plan-limit::before { content: "!"; color: var(--amber); font-size: 0.78rem; top: 0.08rem; }
.plan .btn { margin-top: 1.1rem; width: 100%; text-align: center; }

/* --- Free + community rebuild (2026-08-23) -------------------------------
   The page used to open with a price and a trial countdown; it now opens with
   the deal — free, unfinished on purpose, and you are expected to contribute. */
.ea-badge {
  display: inline-block;
  background: var(--ink);
  color: var(--paper);
  border-radius: 999px;
  padding: 0.15em 0.7em;
  font-size: 0.78em;
  letter-spacing: 0.04em;
  margin-right: 0.55em;
}
.privacy-line { font-weight: 600; font-size: 1.05rem; margin: 0.2rem 0 1.4rem; }
.btn-try { font-size: 1.06rem; padding: 0.85em 1.5em; }

/* The four asks. Numbered rather than bulleted: this is a list of things to
   do, and the count is part of the message — it is four, not forty. */
.contrib { list-style: none; counter-reset: contrib; padding: 0; margin: 1.4rem 0 0; }
.contrib li {
  counter-increment: contrib;
  position: relative;
  padding: 0.7rem 0 0.7rem 2.6rem;
  border-top: 1px solid var(--line);
  line-height: 1.5;
}
.contrib li::before {
  content: counter(contrib);
  position: absolute;
  left: 0;
  top: 0.75rem;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  display: grid;
  place-items: center;
  font-size: 0.85rem;
  font-weight: 600;
}
footer .disc-ai { margin-top: 0.6rem; }

/* Instagram link. Inline SVG rather than an image so it inherits the text
   colour in both the dark community band and the light footer, and so it costs
   no extra request — the CSP on this page blocks external assets anyway. */
.ig-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  white-space: nowrap;
  font-weight: 600;
}
.ig-glyph { width: 1.05em; height: 1.05em; flex: none; }
.fsep { opacity: 0.5; margin: 0 0.15em; }
.follow-line { margin-top: 0.9rem; }

/* ---- Screenshots (2026-08-24) -------------------------------------------
   Real phone captures, 600px wide so a 2x phone screen still renders them
   sharp at the ~230px they actually occupy. Two across on a phone, four on a
   desktop; lazy-loaded with width/height set so nothing reflows as they land. */
.shots {
  display: grid; gap: 1rem; margin-top: 1.7rem;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.shots figure { margin: 0; }
.shots img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--line); border-radius: 14px;
  background: var(--card);
  box-shadow: 0 8px 22px rgba(17, 20, 24, 0.09);
}
.shots figcaption { margin-top: 0.6rem; font-size: 0.84rem; color: var(--muted); line-height: 1.45; }
.shots figcaption b { display: block; font-family: var(--display); font-size: 0.95rem; font-weight: 600; color: var(--ink); }