/* Honky Tonkin' landing page. The app's own palette (dark-native, gold for action) with
   the light variant following the phone's setting. Standalone: no kit JavaScript, only
   the kit's fonts. */

:root {
  color-scheme: dark;
  --bg: #050a12; --surface: #0d1520; --surface-2: #152232;
  --ink: #f4f1e8; --soft: #d5d8d8; --muted: #a9b1be;
  --line: #324050;
  --accent: #d8a83e; --accent-hover: #f0c96a; --on-accent: #181000; --link: #f0c96a;
}
@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --bg: #faf7f0; --surface: #ffffff; --surface-2: #f7f1e4;
    --ink: #171208; --soft: #3f3620; --muted: #5b4f31;
    --line: #e4dcc9;
    --accent: #7d600f; --accent-hover: #71560e; --on-accent: #ffffff; --link: #71560e;
  }
}

* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased;
}
.lp {
  max-width: 640px; margin: 0 auto;
  padding: 1.5rem max(1.25rem, env(safe-area-inset-right)) 3rem max(1.25rem, env(safe-area-inset-left));
}

.lp-top { display: flex; align-items: center; gap: .9rem; margin: .5rem 0 1.4rem; }
.lp-mark { width: 56px; height: 56px; border-radius: 14px; flex: none; }
.lp-title {
  font-family: "Montserrat", "Roboto", system-ui, sans-serif; font-weight: 700;
  font-size: 1.75rem; line-height: 1.1; margin: 0; color: var(--ink);
}
.lp-tag { margin: .3rem 0 0; color: var(--soft); font-size: 1.0625rem; line-height: 1.4; }

.lp-cta {
  display: block; text-align: center; background: var(--accent); color: var(--on-accent);
  text-decoration: none; font-weight: 700; font-size: 1.25rem; padding: 1rem 1.25rem;
  border-radius: 12px; min-height: 56px; transition: background .16s ease;
}
.lp-cta:hover, .lp-cta:focus-visible { background: var(--accent-hover); outline: 3px solid var(--accent-hover); outline-offset: 2px; }
.lp-sub { color: var(--muted); font-size: .9375rem; text-align: center; margin: .7rem 0 1.6rem; }

.lp-hero { display: block; width: 100%; height: auto; border-radius: 14px; margin: 0 0 2rem; background: var(--surface); }

h2 {
  font-family: "Montserrat", "Roboto", system-ui, sans-serif; font-weight: 700;
  font-size: 1.25rem; line-height: 1.25; margin: 0 0 .65rem; color: var(--ink);
}
section { margin: 0 0 2rem; }
p { margin: 0 0 .75rem; color: var(--soft); }
ul, ol { margin: 0; padding-left: 1.25rem; color: var(--soft); }
li { margin: 0 0 .65rem; }
li b, p b { color: var(--ink); font-weight: 600; }
a { color: var(--link); }

.lp-install { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 1.1rem 1.2rem 1rem; }
.lp-install p { color: var(--muted); }
.lp-install li { margin-bottom: .8rem; }

.lp-foot { border-top: 1px solid var(--line); padding-top: 1.25rem; }
.lp-foot p { color: var(--muted); font-size: .9375rem; }

@media (prefers-reduced-motion: reduce) { .lp-cta { transition: none; } }
@media (min-width: 720px) {
  .lp { padding-top: 3rem; }
  .lp-title { font-size: 2.25rem; }
}