/* Brand typefaces (self-hosted, OFL) — mirror the app: Manrope ExtraBold for
   display/headings, Inter for body & UI. Files live in /fonts. */
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/fonts/Inter-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/fonts/Inter-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/fonts/Inter-SemiBold.woff2") format("woff2");
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/fonts/Inter-Bold.woff2") format("woff2");
}
@font-face {
  font-family: "Manrope"; font-style: normal; font-weight: 800; font-display: swap;
  src: url("/fonts/Manrope-ExtraBold.woff2") format("woff2");
}

/* LineSqip site — brand tokens mirror the app's Theme.swift (lsPurple 0x6A2FB5,
   lsBG 0xF6F5F2/0x121316, lsInk 0x1A1C1E/0xF2F3F5, lsInk2 0x4A4F54/0xB7BDC4). */
:root {
  --purple: #6a2fb5;
  --purple-tint: #efe6fb;
  --green: #1f5c3d;
  --green-tint: #e8f1ea;
  --bg: #f6f5f2;
  --card: #ffffff;
  --ink: #1a1c1e;
  --ink2: #4a4f54;
  --ink3: #8a9097;
  --line: #e5e3de;
}
@media (prefers-color-scheme: dark) {
  :root {
    --purple: #a578e0;
    --purple-tint: #2a2136;
    --green: #2e7d52;
    --green-tint: #16241c;
    --bg: #121316;
    --card: #1c1e22;
    --ink: #f2f3f5;
    --ink2: #b7bdc4;
    --ink3: #7d838a;
    --line: #2a2d31;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* Inter 400 reads too thin for LineSqip — baseline body weight is Medium. */
  font-weight: 500;
  line-height: 1.55;
}
/* Display / headings render in Manrope (only ships at ExtraBold/800). */
.brand, h1, h2, h3 {
  font-family: "Manrope", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 800;
}
.wrap { max-width: 720px; margin: 0 auto; padding: 20px; }
header.wrap { display: flex; align-items: center; padding-bottom: 0; }
.brand { font-size: 22px; letter-spacing: -0.02em; }
.brand span { color: var(--purple); }
.hero { padding: 28px 0 8px; }
h1 { font-size: 34px; letter-spacing: -0.02em; margin: 0 0 10px; }
h2 { font-size: 19px; margin: 0 0 8px; }
h3 { font-size: 15px; margin: 0 0 4px; }
.lead { font-size: 17px; color: var(--ink2); margin: 0 0 14px; }
.cta-note { font-weight: 650; color: var(--purple); }
section { margin: 22px 0; }
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px 18px;
}
.card p { color: var(--ink2); margin: 6px 0 0; font-size: 14.5px; }
.features { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 560px) { .features { grid-template-columns: 1fr; } }
.feature .icon { font-size: 22px; margin-bottom: 6px; }
.feature p { font-size: 13.5px; }
.btn-outline {
  display: inline-block;
  margin-top: 8px;
  padding: 11px 18px;
  border: 1px solid var(--purple);
  border-radius: 12px;
  color: var(--purple);
  font-weight: 700;
  text-decoration: none;
}
footer.wrap { color: var(--ink3); font-size: 13px; padding-top: 0; }
footer a { color: var(--purple); text-decoration: none; }
.fine { font-size: 12px; }

/* Legal pages */
.legal h1 { font-size: 26px; }
.legal .updated { color: var(--ink2); font-weight: 650; font-size: 13.5px; }
.legal .callout {
  background: var(--purple-tint);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 13.5px;
  font-weight: 600;
}
.legal h2 { font-size: 17px; margin-top: 26px; }
.legal p { color: var(--ink2); font-size: 14px; margin: 8px 0; }
.legal .back { display: inline-block; margin-bottom: 8px; color: var(--purple); text-decoration: none; font-weight: 700; }

/* Get-the-app fallback */
.getapp { text-align: center; padding-top: 48px; }
.getapp .big { font-size: 44px; }

/* Waitlist form */
.form-card { margin-top: 18px; }
.form-intro { color: var(--ink2); font-size: 14.5px; margin: 4px 0 16px; }
.roles {
  border: 0; padding: 0; margin: 0 0 16px;
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px;
}
@media (max-width: 460px) { .roles { grid-template-columns: 1fr; } }
.roles legend { font-weight: 700; font-size: 14px; margin-bottom: 8px; padding: 0; }
.role { position: relative; }
.role input { position: absolute; opacity: 0; pointer-events: none; }
.role span {
  display: block; text-align: center;
  padding: 12px 8px; border: 1px solid var(--line); border-radius: 12px;
  font-weight: 650; font-size: 14px; color: var(--ink2);
  cursor: pointer; user-select: none; transition: border-color .12s, background .12s, color .12s;
}
.role input:checked + span {
  border-color: var(--green); background: var(--green-tint); color: var(--green);
}
.role input:focus-visible + span { outline: 2px solid var(--green); outline-offset: 2px; }

/* Two fields side by side (First/Last name). Stacks on narrow screens. */
.field-row { display: flex; gap: 10px; }
.field-row .field { flex: 1; }
@media (max-width: 380px) { .field-row { flex-direction: column; gap: 0; } }

.field { display: block; margin-bottom: 14px; }
/* `.field { display:block }` (an author rule) otherwise overrides the browser's
   default [hidden]{display:none}, leaving role-conditional fields visible. Force
   hidden to win so a Shopper never sees the Business/Event fields. */
.field[hidden] { display: none; }
.field-label { display: block; font-weight: 650; font-size: 13.5px; margin-bottom: 6px; }
.field-label .opt { color: var(--ink3); font-weight: 500; }
.field-label .req { color: #c0392b; font-weight: 700; }
@media (prefers-color-scheme: dark) { .field-label .req { color: #ff8a7a; } }
.field input {
  width: 100%; padding: 12px 14px; font-size: 16px;
  color: var(--ink); background: var(--bg);
  border: 1px solid var(--line); border-radius: 12px;
  -webkit-appearance: none; appearance: none;
}
.field input:focus { outline: none; border-color: var(--green); }
/* Autofill: WebKit paints its own background + animates the text color in
   (the "white then black" flash on iOS/Chrome). Pin the fill color so text is
   readable immediately, and mask the yellow autofill background by parking a
   background-color transition far in the future. */
.field input:-webkit-autofill,
.field input:-webkit-autofill:hover,
.field input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ink);
  caret-color: var(--ink);
  -webkit-box-shadow: 0 0 0 1000px var(--bg) inset;
  box-shadow: 0 0 0 1000px var(--bg) inset;
  transition: background-color 9999s ease-out 0s;
}

/* Honeypot — kept in the DOM but off-screen for humans, tempting for bots. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.btn-solid {
  width: 100%; margin-top: 4px; padding: 14px 18px;
  border: 0; border-radius: 12px; background: var(--green); color: #fff;
  font-weight: 750; font-size: 16px; cursor: pointer;
}
.btn-solid:disabled { opacity: 0.6; cursor: default; }

/* Success state: the button pops and draws a checkmark before the confirmation
   view is revealed. */
.btn-solid.done { opacity: 1; pointer-events: none; animation: btn-pop 0.3s ease; }
@keyframes btn-pop { 0% { transform: scale(1); } 45% { transform: scale(0.96); } 100% { transform: scale(1); } }
.check-svg { width: 26px; height: 26px; display: block; margin: 0 auto; }
.check-circle {
  fill: none; stroke: rgba(255,255,255,0.55); stroke-width: 3;
  stroke-dasharray: 151; stroke-dashoffset: 151;
  animation: check-draw-circle 0.4s ease forwards;
}
.check-mark {
  stroke: #fff; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 40; stroke-dashoffset: 40;
  animation: check-draw-mark 0.3s 0.35s ease forwards;
}
@keyframes check-draw-circle { to { stroke-dashoffset: 0; } }
@keyframes check-draw-mark { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .btn-solid.done { animation: none; }
  .check-circle, .check-mark { animation-duration: 0.01s; animation-delay: 0s; }
}

.form-error { color: #c0392b; font-size: 13.5px; font-weight: 600; margin: 0 0 10px; }
@media (prefers-color-scheme: dark) { .form-error { color: #ff8a7a; } }

.form-success { text-align: center; padding: 12px 0 4px; }
.form-success .success-mascot { width: 140px; height: 140px; object-fit: contain; margin: 0 auto 4px; }
.form-success h3 { font-size: 18px; margin: 6px 0 4px; }
.form-success p { color: var(--ink2); font-size: 14.5px; margin: 0; }