/* ============================================================
   landing.css — the public homepage.
   Structure follows the 1500 Blueprint layout; the palette is the
   same blue the app uses so the two halves feel like one product.
   ============================================================ */

:root {
  --lp-ink: #0b2a5b;            /* headings */
  --lp-body: #3f4a5a;           /* paragraphs */
  --lp-muted: #626d7e;   /* was #6b7688 — failed AA on the sky ground */
  --lp-blue: #1a6fd0;           /* the app's blue */
  --lp-blue-dark: #14589f;
  --lp-sky: #ebf7ff;            /* page ground */
  --lp-line: #d9e6f5;
  --lp-green: #16a34a;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

body.lp {
  margin: 0;
  background: var(--lp-sky);
  color: var(--lp-body);
  font-family: "Quicksand", "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

body.lp a { color: inherit; text-decoration: none; }

/* Same reason as app.css — inputs and buttons need this told to them. */
body.lp input,
body.lp select,
body.lp textarea,
body.lp button { font-family: inherit; }

.lp-wrap { max-width: 1160px; margin: 0 auto; padding: 0 24px; }

h1, h2, h3 { color: var(--lp-ink); margin: 0; line-height: 1.15; }

/* ---------- Buttons ---------- */

.lp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 100px;
  padding: 17px 34px;
  font: inherit;
  font-size: 1.02rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
  white-space: nowrap;
}

.lp-btn--primary {
  background: var(--lp-blue);
  color: #fff;
  box-shadow: 0 8px 22px rgba(31, 122, 224, 0.28);
}

.lp-btn--primary:hover { background: var(--lp-blue-dark); transform: translateY(-1px); }
.lp-btn--primary[disabled] { opacity: 0.6; cursor: not-allowed; transform: none; }

.lp-btn--ghost { background: #dcecfb; color: var(--lp-blue); }
.lp-btn--ghost:hover { background: #cfe4fa; }
.lp-btn--sm { padding: 11px 22px; font-size: 0.94rem; }

/* ---------- Nav ---------- */

.lp-nav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--lp-line);
}

.lp-nav__inner {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 0;
}

.lp-brand { display: flex; align-items: center; flex: 1 1 0; min-width: 0; }

.lp-brand__name {
  font-family: "Quicksand", "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 1.32rem;
  font-weight: 700;
  color: var(--lp-ink);
  letter-spacing: -0.01em;
}

/* ---------- Wordmark: the whole "i" is an upward arrow, stem and
   all — not a dot swapped for an icon. Same construction as
   .app-brand__name in app.css — one brand, whether you're signed
   in or looking at the sales page. ---------- */

.lp-brand__name em { font-style: normal; color: var(--lp-blue); }

.brand-i {
  width: 0.56em;
  height: 1.4em;
  margin: 0 0.04em 0 0.01em;
  vertical-align: -0.1em;
  color: var(--lp-blue);
  transition: transform 0.2s ease;
}

.lp-brand:hover .brand-i { transform: translateY(-2px); }

.lp-nav__right { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex: 1 1 0; min-width: 0; }

/* ---------- Section nav ----------
   The same pill the app uses: the row sits in a capsule and one
   highlight glides to whatever you point at, rather than separate
   backgrounds blinking on and off. Centred on its own row so the
   brand and the buttons can't pull it off-centre. */

/* The slot holds the pills' place in the row. On a narrow screen it
   takes a full line of its own, which is what forces the capsule
   onto its own row instead of just shuffling along beside the
   buttons. */
.lp-tabs__slot { flex: 0 0 auto; display: flex; justify-content: center; min-width: 0; }

.lp-tabs {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 5px;
  width: max-content;
  max-width: 100%;
  background: rgba(11, 42, 91, 0.04);
  border: 1px solid rgba(11, 42, 91, 0.08);
  border-radius: 999px;
  overflow-x: auto;
  scrollbar-width: none;
}

.lp-tabs::-webkit-scrollbar { display: none; }

/* The travelling highlight. Sits behind the links; JS positions it. */
.lp-tabs__glide {
  position: absolute;
  top: 5px;
  bottom: 5px;
  left: 0;
  width: 0;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(11, 42, 91, 0.05), 0 1px 3px rgba(11, 42, 91, 0.07);
  opacity: 0;
  transition: transform 0.34s cubic-bezier(0.22, 0.61, 0.36, 1),
              width 0.34s cubic-bezier(0.22, 0.61, 0.36, 1),
              opacity 0.2s ease, background 0.2s ease;
  pointer-events: none;
  z-index: 0;
}

.lp-tabs__glide--on { opacity: 1; }

/* Tinted while pointing somewhere other than the section you're in. */
.lp-tabs__glide--hover { background: var(--lp-blue); }

.lp-tab {
  position: relative;
  z-index: 1;
  padding: 9px 18px;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 600;
  white-space: nowrap;
  color: var(--lp-body);
  transition: color 0.22s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.lp-tab:hover { color: var(--lp-ink); }
.lp-tab--active { color: var(--lp-ink); }

/* When the highlight leaves the current section it turns blue, so
   whatever it lands on has to flip to white to stay readable. */
.lp-tab--lit,
.lp-tab--lit:hover { color: #fff; }

.lp-tab:focus-visible {
  outline: 2px solid var(--lp-blue);
  outline-offset: 2px;
}

/* The header is sticky, so anchored sections need to clear it. */
#top, #features, #pricing, #faqs { scroll-margin-top: 92px; }

/* Keeps the old #enroll links working now that the section owns
   #pricing — it marks the same spot without taking any space. */
.lp-anchor { display: block; height: 0; scroll-margin-top: 92px; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .lp-tabs__glide { transition: opacity 0.2s ease, background 0.2s ease; }
}

@media (max-width: 900px) {
  .lp-nav__inner { flex-wrap: wrap; row-gap: 12px; }
  .lp-brand { flex: 0 0 auto; }
  .lp-nav__right { flex: 1 1 auto; }
  .lp-tabs__slot { order: 3; flex: 0 0 100%; }

  /* Two rows of header here, so anchors need to clear more of it. */
  #top, #features, #pricing, #faqs, .lp-anchor { scroll-margin-top: 152px; }
}

@media (max-width: 720px) {
  .lp-tabs { width: 100%; justify-content: flex-start; }
  .lp-tab { padding: 8px 14px; font-size: 0.9rem; }
}

/* ---------- Hero ---------- */

.lp-hero { padding: 66px 0 74px; }

.lp-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
  gap: 54px;
  align-items: center;
}

.lp-hero__title { font-size: 3.2rem; font-weight: 700; letter-spacing: -0.025em; margin-bottom: 26px; }

.lp-list { list-style: none; margin: 0 0 32px; padding: 0; }

.lp-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 13px;
  font-size: 1.05rem;
  color: var(--lp-body);
}

.lp-tick {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: var(--lp-blue);
  color: #fff;
  flex-shrink: 0;
  margin-top: 3px;
}

/* Right-hand card: video slot + countdown */
.lp-card {
  background: #fff;
  border: 1px solid var(--lp-line);
  border-radius: 18px;
  box-shadow: 0 14px 40px rgba(11, 42, 91, 0.09);
  overflow: hidden;
}

.lp-video {
  aspect-ratio: 16 / 9;
  background: linear-gradient(140deg, #1e3a63, #0f1f3d);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.92rem;
  text-align: center;
  padding: 20px;
}

.lp-video iframe, .lp-video video { width: 100%; height: 100%; border: 0; display: block; }

.lp-countdown { padding: 20px 22px 24px; text-align: center; }
.lp-countdown__note { font-size: 0.96rem; color: var(--lp-body); margin-bottom: 14px; }

.lp-clock { display: flex; align-items: flex-start; justify-content: center; gap: 8px; }
.lp-clock__unit { min-width: 58px; }

.lp-clock__num {
  font-size: 2rem;
  font-weight: 700;
  color: var(--lp-ink);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.lp-clock__label { font-size: 0.78rem; color: var(--lp-muted); margin-top: 4px; }
.lp-clock__sep { font-size: 1.6rem; font-weight: 700; color: var(--lp-ink); line-height: 1.1; }

/* ---------- Section scaffolding ---------- */

.lp-section { padding: 78px 0; }
.lp-section--white { background: #fff; }

.lp-section__head { text-align: center; max-width: 720px; margin: 0 auto 48px; }
.lp-section__title { font-size: 2.4rem; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 14px; }
.lp-section__sub { font-size: 1.08rem; color: var(--lp-body); margin: 0; }

/* ---------- Features ---------- */

.lp-features { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }

.lp-feature {
  display: flex;
  flex-direction: column;
  background: var(--lp-sky);
  border: 1px solid var(--lp-line);
  border-radius: 18px;
  padding: 30px 32px 32px;
}

.lp-section--white .lp-feature { background: var(--lp-sky); }

.lp-feature__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 13px;
  background: var(--lp-blue);
  color: #fff;
  margin-bottom: 18px;
}

.lp-feature__title { font-size: 1.35rem; font-weight: 700; margin-bottom: 14px; }
.lp-feature__list { list-style: none; margin: 0 0 24px; padding: 0; flex: 1; }

.lp-feature__list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 11px;
  font-size: 1rem;
}

.lp-feature__list li::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--lp-blue);
  flex-shrink: 0;
  margin-top: 9px;
}

/* ---------- Pricing ---------- */

.lp-price { text-align: center; max-width: 760px; margin: 0 auto; }
.lp-price__pitch { font-size: 1.15rem; margin: 0 0 6px; }
.lp-price__pitch b { color: var(--lp-ink); }
.lp-price__sub { font-size: 1.05rem; color: var(--lp-muted); margin: 0 0 32px; }

.lp-price__tag {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  background: #fff;
  border: 1px solid var(--lp-line);
  border-radius: 100px;
  padding: 14px 30px;
  margin-bottom: 34px;
  box-shadow: 0 10px 26px rgba(11, 42, 91, 0.08);
}

.lp-price__amount { font-size: 2.6rem; font-weight: 700; color: var(--lp-ink); letter-spacing: -0.03em; }
.lp-price__per { font-size: 1.05rem; color: var(--lp-muted); font-weight: 600; }

/* ---------- Enrol card ---------- */

.lp-enroll {
  max-width: 560px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--lp-line);
  border-radius: 20px;
  box-shadow: 0 18px 48px rgba(11, 42, 91, 0.12);
  overflow: hidden;
}

.lp-enroll__head {
  background: var(--lp-ink);
  color: #fff;
  padding: 22px 30px;
}

.lp-enroll__plan { font-size: 1.15rem; font-weight: 700; }
.lp-enroll__terms { font-size: 0.9rem; opacity: 0.78; margin-top: 3px; }

.lp-enroll__body { padding: 28px 30px 30px; }

.lp-field { margin-bottom: 18px; text-align: left; }
.lp-field__label { display: block; font-size: 0.9rem; font-weight: 700; color: var(--lp-ink); margin-bottom: 7px; }

.lp-input {
  width: 100%;
  border: 1px solid var(--lp-line);
  border-radius: 11px;
  padding: 14px 16px;
  font: inherit;
  font-size: 1rem;
  color: var(--lp-ink);
  background: #fff;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.lp-input:focus { border-color: var(--lp-blue); box-shadow: 0 0 0 3px rgba(31, 122, 224, 0.15); }
.lp-input--bad { border-color: #dc2626; }

.lp-hint { font-size: 0.86rem; color: var(--lp-muted); margin: 8px 0 0; line-height: 1.55; }
.lp-error { font-size: 0.9rem; color: #dc2626; margin: 10px 0 0; }

.lp-enroll .lp-btn { width: 100%; margin-top: 6px; }

/* The Stripe reassurance strip under the button */
.lp-secure {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 16px;
  font-size: 0.88rem;
  color: var(--lp-muted);
}

.lp-included {
  list-style: none;
  margin: 22px 0 0;
  padding: 20px 0 0;
  border-top: 1px solid var(--lp-line);
}

.lp-included li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 9px;
  font-size: 0.95rem;
}

.lp-included li:last-child { margin-bottom: 0; }

.lp-included .lp-tick { width: 18px; height: 18px; background: var(--lp-green); margin-top: 2px; }

/* ---------- Guarantee ---------- */

.lp-guarantee {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: #fff;
  border: 1px solid var(--lp-line);
  border-radius: 16px;
  padding: 22px 28px;
  max-width: 640px;
  margin: 44px auto 0;
  text-align: left;
}

.lp-guarantee__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #e7f7ed;
  color: var(--lp-green);
  flex-shrink: 0;
}

.lp-guarantee__title { font-weight: 700; color: var(--lp-ink); }
.lp-guarantee__note { font-size: 0.94rem; color: var(--lp-muted); }

/* ---------- FAQ ---------- */

.lp-faq { max-width: 780px; margin: 0 auto; }

.lp-faq__item {
  background: #fff;
  border: 1px solid var(--lp-line);
  border-radius: 14px;
  margin-bottom: 12px;
  overflow: hidden;
}

.lp-faq__q {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  border: 0;
  background: none;
  padding: 20px 24px;
  font: inherit;
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--lp-ink);
  text-align: left;
  cursor: pointer;
}

.lp-faq__q:hover { background: #f7fbff; }
.lp-faq__mark { margin-left: auto; color: var(--lp-blue); transition: transform 0.2s ease; flex-shrink: 0; }
.lp-faq__item--open .lp-faq__mark { transform: rotate(45deg); }

.lp-faq__a { padding: 0 24px 22px; font-size: 1rem; color: var(--lp-body); }
.lp-faq__item:not(.lp-faq__item--open) .lp-faq__a { display: none; }

/* ---------- Final CTA + footer ---------- */

.lp-final {
  background: linear-gradient(135deg, #2f8ef0 0%, #1f7ae0 52%, #14539f 100%);
  color: #fff;
  text-align: center;
  padding: 76px 0;
}

.lp-final h2 { color: #fff; font-size: 2.3rem; font-weight: 700; margin-bottom: 12px; }
.lp-final p { font-size: 1.08rem; opacity: 0.92; margin: 0 0 30px; }
.lp-final .lp-btn--primary { background: #fff; color: var(--lp-blue); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.18); }
.lp-final .lp-btn--primary:hover { background: #f1f6ff; }

.lp-foot {
  background: #fff;
  border-top: 1px solid var(--lp-line);
  padding: 30px 0;
}

.lp-foot__inner { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.lp-foot__copy { margin-left: auto; font-size: 0.9rem; color: var(--lp-muted); }

/* ---------- Responsive ---------- */

@media (max-width: 960px) {
  .lp-hero__grid { grid-template-columns: 1fr; gap: 36px; }
  .lp-hero__title { font-size: 2.5rem; }
  .lp-features { grid-template-columns: 1fr; }
  .lp-section__title { font-size: 1.9rem; }
  .lp-final h2 { font-size: 1.8rem; }
}

@media (max-width: 560px) {
  .lp-nav__right .lp-btn--ghost { display: none; }
  .lp-clock__unit { min-width: 46px; }
  .lp-clock__num { font-size: 1.5rem; }
  .lp-enroll__body, .lp-enroll__head { padding-left: 20px; padding-right: 20px; }
}

/* ============================================================
   Auth pages (log in) — same palette as the rest of the site,
   card centred in the page rather than a dark full-bleed panel.
   ============================================================ */

/* A soft blue wash so the card has something to sit on, instead of
   the flat navy the old page used. */
body.lp--center {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(1100px 620px at 50% -8%, #d5ebff 0%, rgba(213, 235, 255, 0) 62%),
    var(--lp-sky);
}

.lp-authpage {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px 24px 76px;
}

.lp-auth {
  width: 100%;
  max-width: 440px;
  background: #fff;
  border: 1px solid var(--lp-line);
  border-radius: 20px;
  padding: 40px 40px 34px;
  box-shadow: 0 18px 48px rgba(11, 42, 91, 0.12);
}

.lp-auth__title { font-size: 2rem; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 10px; }
.lp-auth__sub { margin: 0 0 26px; color: var(--lp-body); font-size: 1rem; line-height: 1.55; }

.lp-auth .lp-btn { width: 100%; margin-top: 4px; }

.lp-auth__foot {
  margin: 22px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--lp-line);
  text-align: center;
  font-size: 0.94rem;
  color: var(--lp-muted);
}

.lp-auth__foot a { color: var(--lp-blue); font-weight: 700; }
.lp-auth__foot a:hover { text-decoration: underline; }

/* Status line under the field. login.js swaps the modifier. */
.lp-msg {
  margin: 0 0 16px;
  padding: 12px 14px;
  border-radius: 11px;
  font-size: 0.92rem;
  line-height: 1.5;
}

.lp-msg--error { background: #fdeceb; color: #b42318; border: 1px solid #f6cfcb; }
.lp-msg--success { background: #e7f7ed; color: #12703a; border: 1px solid #bfe6cd; }

@media (max-width: 480px) {
  .lp-auth { padding: 30px 24px 26px; }
  .lp-auth__title { font-size: 1.7rem; }
}