/* Public landing page (templates/landing.html, served at "/" to signed-out
   visitors). Deliberately standalone: it does NOT extend base.html, because
   base.html carries the signed-in app chrome (top nav, account menu) that a
   visitor has no use for. Nothing here is shared with style.css, so the two
   can never fight over the same selectors.

   Apple-style treatment, per the user's request: the system font stack (which
   resolves to San Francisco on Apple devices), generous whitespace, tight
   negative tracking on large headings, and pill buttons. */

:root {
  --bg: #fbfbfd;
  --text: #1d1d1f;
  --dim: #6e6e73;
  --accent: #0071e3;
  --card: #ffffff;
  --hair: #d2d2d7;
  --panel: #f5f5f7;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
    "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* The app itself is light-only, but a landing page is the one surface a
   visitor may open on a phone in dark mode, so honour the OS setting here. */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000;
    --text: #f5f5f7;
    --dim: #86868b;
    --accent: #2997ff;
    --card: #1d1d1f;
    --hair: #424245;
    --panel: #1d1d1f;
  }
}

* { box-sizing: border-box; }

body.landing {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  line-height: 1.47;
  -webkit-font-smoothing: antialiased;
}

.landing .wrap { width: 100%; max-width: 980px; margin: 0 auto; padding: 0 22px; }
.landing h1, .landing h2 { margin: 0; font-weight: 600; letter-spacing: -.022em; text-wrap: balance; }
.landing p { margin: 0; }
.landing a { color: var(--accent); text-decoration: none; }

/* --- top bar --- */
.landing-nav {
  position: sticky; top: 0; z-index: 10;
  background: var(--bg);
  border-bottom: 1px solid var(--hair);
}
@supports (backdrop-filter: blur(20px)) {
  .landing-nav { background: color-mix(in srgb, var(--bg) 82%, transparent);
                 backdrop-filter: saturate(180%) blur(20px); }
}
.landing-nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 48px; }
.landing-brand { display: flex; align-items: center; gap: 9px; font-size: .95rem; font-weight: 600; letter-spacing: -.01em; }
.landing-brand img { width: 22px; height: 22px; display: block; }
.landing-nav .nav-signin { font-size: .85rem; }

/* --- hero --- */
.landing-hero { text-align: center; padding: 72px 0 40px; }
.landing-hero h1 { font-size: clamp(2.4rem, 7.5vw, 4rem); line-height: 1.05; letter-spacing: -.035em; }
.landing-hero .sub {
  margin: 20px auto 0; max-width: 34ch; color: var(--dim);
  font-size: clamp(1.05rem, 3.2vw, 1.35rem); line-height: 1.42; letter-spacing: -.01em;
}
.landing-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 32px; }

.landing .btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 12px 26px; border-radius: 980px;
  font-size: 1rem; letter-spacing: -.01em; border: 1px solid transparent;
}
.landing .btn-primary { background: var(--accent); color: #fff; }
.landing .btn-primary:hover { filter: brightness(1.08); }
.landing .btn-link { color: var(--accent); padding: 12px 4px; }
.landing .btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

/* --- the diagram --- */
.landing-shot { padding: 8px 0 12px; }
.shot-frame { background: var(--card); border: 1px solid var(--hair); border-radius: 18px; overflow: hidden; }
/* The rendered bow-tie is far wider than any phone. Panning it inside its own
   container keeps it legible instead of shrinking it to nothing, and keeps the
   page body from ever scrolling sideways. */
.shot-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.shot-scroll img { display: block; width: 100%; min-width: 760px; height: auto; }
.shot-caption { margin: 14px auto 0; text-align: center; font-size: .82rem; color: var(--dim); max-width: 60ch; }

/* --- sign in --- */
.landing-signin { padding: 56px 0; }
.signin-panel {
  background: var(--panel); border: 1px solid var(--hair);
  border-radius: 18px; padding: 36px 26px; text-align: center;
}
.signin-panel h2 { font-size: clamp(1.5rem, 4.6vw, 2.1rem); letter-spacing: -.025em; }
.signin-panel p { margin: 12px auto 0; color: var(--dim); max-width: 44ch; }
.signin-methods { display: grid; gap: 12px; max-width: 340px; margin: 26px auto 0; }
.signin-method {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; border-radius: 12px; border: 1px solid var(--hair);
  background: var(--card); color: var(--text); font-size: .98rem; letter-spacing: -.01em;
}
.signin-method.primary { background: var(--accent); color: #fff; border-color: transparent; }
.signin-method svg { width: 18px; height: 18px; flex: none; }

/* --- what a bow-tie holds --- */
.landing-flow { padding: 8px 0 72px; }
.landing-flow h2 { text-align: center; font-size: clamp(1.4rem, 4.2vw, 1.9rem); letter-spacing: -.025em; }
.flow-steps { display: grid; gap: 10px; margin-top: 26px; }
@media (min-width: 760px) { .flow-steps { grid-template-columns: repeat(5, 1fr); } }
.flow-step {
  background: var(--card); border: 1px solid var(--hair); border-radius: 14px;
  padding: 16px; display: flex; flex-direction: column; gap: 4px;
}
.flow-step .k { font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; color: var(--dim); }
.flow-step .v { font-size: .95rem; letter-spacing: -.01em; }
.flow-step.is-event { border-color: var(--accent); }

.landing-footer {
  border-top: 1px solid var(--hair); padding: 22px 0 36px;
  color: var(--dim); font-size: .78rem; text-align: center;
}

/* --- "Developed by Setech" credit, top right ---------------------------- */
/* Sits left of the Sign in link so the sign-in call to action keeps the
   far-right position it had. The logo is a PNG with everything outside the
   circle transparent, so it reads correctly on both the light and the dark
   header without needing a second asset. */
.landing-nav .nav-right { display: flex; align-items: center; gap: 14px; }

.dev-credit { display: flex; align-items: center; gap: 7px; }
.dev-credit-text { font-size: .74rem; color: var(--dim); letter-spacing: -.005em; white-space: nowrap; }
.dev-credit-logo { width: 22px; height: 22px; display: block; flex: none; }

/* On a narrow screen the header would otherwise crowd the brand, the credit
   and the sign-in link onto one 48px row. Keep the mark, drop the words. */
@media (max-width: 560px) {
  .dev-credit-text { display: none; }
  .landing-nav .nav-right { gap: 10px; }
}