/* hopply.ai holding page. Colors and fonts match the hopply app (app/admin/theme.css). */
@font-face { font-family: "Fredoka"; src: url("fonts/Fredoka-variable.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("fonts/Figtree-variable.woff2") format("woff2"); font-weight: 300 900; font-display: swap; }

:root {
  color-scheme: light;
  --ground: #f6efe3;
  --surface: #fffcf6;
  --ink: #24211c;
  --muted: #5e5a52;
  --border: #ddd4c3;
  --action: #0d2e26;
  --action-hover: #2a4740;
  --on-action: #f6efe3;
  --coral: #f2643d;
  --coral-text: #ae3f1e;
  --display: "Fredoka", "Avenir Next Rounded", system-ui, sans-serif;
  --body: "Figtree", -apple-system, "Segoe UI", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --ground: #1c1c1e;
    --surface: #2a2a2d;
    --ink: #f3ecdf;
    --muted: #b8b8b6;
    --border: #3d3d41;
    --action: #f6efe3;
    --action-hover: #e5dccb;
    --on-action: #1c1c1e;
    --coral-text: #f58a68;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ground); color: var(--ink); font: 400 17px/1.6 var(--body); }
a { color: var(--coral-text); text-underline-offset: 3px; }
a:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; border-radius: 6px; }

.wrap { max-width: 1040px; margin: 0 auto; padding: 0 24px; }
@media (max-width: 480px) { .wrap { padding: 0 16px; } }

header.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 24px 0; }
.logo { display: block; line-height: 0; }
.logo img { height: 36px; width: auto; }
.logo .dark { display: none; }
@media (prefers-color-scheme: dark) { .logo .light { display: none; } .logo .dark { display: inline; } }
.signin { font-weight: 600; text-decoration: none; color: var(--ink); padding: 10px 4px; }
.signin:hover { text-decoration: underline; }

.hero { padding: 72px 0 56px; max-width: 720px; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 0.88rem; font-weight: 600; color: var(--muted); margin: 0 0 20px; }
.eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--coral); }
h1, h2 { font-family: var(--display); font-weight: 600; line-height: 1.08; margin: 0; text-wrap: balance; letter-spacing: -0.01em; }
h1 { font-size: clamp(2.5rem, 7vw, 4.2rem); }
h1 .dot { color: var(--coral); }
.lead { font-size: clamp(1.1rem, 2.4vw, 1.3rem); color: var(--muted); margin: 22px 0 32px; max-width: 34em; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px; border-radius: 12px; font-weight: 700; text-decoration: none; border: 2px solid var(--action); }
.button.primary { background: var(--action); color: var(--on-action); }
.button.primary:hover { background: var(--action-hover); border-color: var(--action-hover); }
.button.secondary { color: var(--ink); }
.button.secondary:hover { background: var(--surface); }
@media (max-width: 480px) { .actions .button { flex: 1 1 100%; } }

/* The one-screen teaser on the home page */
body.teaser { min-height: 100dvh; display: flex; flex-direction: column; }
body.teaser > .wrap { flex: 1; display: flex; flex-direction: column; width: 100%; }
body.teaser .hero { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 48px 0 96px; }
body.teaser .lead { margin-bottom: 36px; }

footer { border-top: 1px solid var(--border); padding: 24px 0 40px; color: var(--muted); font-size: 0.92rem; }
footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; }
footer nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }
footer a { color: var(--muted); }

/* Privacy and terms */
.doc { max-width: 680px; padding: 40px 0 72px; }
.doc h1 { font-size: clamp(2rem, 6vw, 2.8rem); margin-bottom: 8px; }
.doc .updated { color: var(--muted); margin: 0 0 32px; }
.doc h2 { font-size: 1.35rem; margin: 36px 0 10px; }
.doc p, .doc ul { margin: 0 0 14px; }
.doc ul { padding-left: 1.2rem; }
.doc li { margin-bottom: 6px; }