/* tattletown-www — placeholder landing. Self-contained, no external assets (CSP/offline safe). */
:root {
  --bg: #0e0f13;
  --ink: #f4f1ea;
  --muted: #9aa0ab;
  --accent: #e8b64c;   /* lantern amber — ambient page accent (pin glow, dot) */
  --cta: #d82f26;      /* app red — primary action; darkened so white text clears 4.5:1 (WCAG AA) */
  --cta-hi: #ff4b41;   /* lighter red for hover */
  --line: #24262e;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(232,182,76,.10), transparent 60%),
    var(--bg);
  color: var(--ink);
  font: 16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  display: flex; flex-direction: column; min-height: 100%;
  -webkit-font-smoothing: antialiased;
}
.stage {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 8vh 24px 4vh; gap: 14px;
}
.pin { font-size: 44px; filter: drop-shadow(0 6px 18px rgba(232,182,76,.35)); animation: bob 4s ease-in-out infinite; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.wordmark {
  margin: 0; font-size: clamp(40px, 9vw, 88px); font-weight: 800; letter-spacing: -.02em;
  background: linear-gradient(180deg, #fff, #cfd3db);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.tagline { margin: 4px 0 0; font-size: clamp(18px, 3.4vw, 26px); color: var(--accent); font-weight: 600; }
.sub { margin: 8px 0 0; max-width: 40ch; color: var(--muted); }
/* Primary action — App Store download (app-red brand). */
.cta {
  margin-top: 22px; display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 30px; border-radius: 999px; text-decoration: none;
  background: var(--cta); color: #fff; font-size: 17px; font-weight: 700; letter-spacing: .01em;
  box-shadow: 0 10px 28px rgba(229,52,43,.38); transition: background .15s, transform .1s, box-shadow .15s;
}
.cta:hover { background: var(--cta-hi); box-shadow: 0 12px 34px rgba(229,52,43,.46); }
.cta:active { transform: translateY(1px); }
.cta:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.cap { margin: 12px 0 0; color: var(--muted); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }

/* iPhone-framed app screenshot — pure CSS bezel + Dynamic Island, no external assets. */
.phone {
  position: relative; margin: 34px auto 0; width: 100%; max-width: 276px;
  padding: 10px; border-radius: 46px;
  background: linear-gradient(160deg, #26282f, #101116);
  box-shadow: 0 0 0 1px #000, 0 22px 60px rgba(0,0,0,.55), inset 0 0 0 2px #2f3138;
}
.phone-screen {
  position: relative; overflow: hidden; border-radius: 38px; background: #000;
  aspect-ratio: 276 / 600;
}
.phone-screen img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Dynamic Island pill floating over the top of the screen. */
.phone-screen::after {
  content: ""; position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  width: 34%; height: 22px; border-radius: 999px; background: #000; z-index: 2;
}

/* ── Feature highlights — crawlable, keyword-rich content distilled from the app catalog ── */
.features {
  width: 100%; max-width: 960px; margin: 64px auto 8px; text-align: left;
}
.features h2 {
  margin: 0 0 6px; text-align: center; font-size: clamp(22px, 4vw, 30px); font-weight: 800;
  letter-spacing: -.01em; color: var(--ink);
}
.feature-grid {
  list-style: none; margin: 28px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px;
}
.feature-grid li {
  background: #14151b; border: 1px solid var(--line); border-left: 3px solid var(--cta);
  border-radius: 12px; padding: 18px 20px;
}
.feature-grid h3 { margin: 0 0 7px; font-size: 17px; font-weight: 700; color: var(--ink); }
.feature-grid p { margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.55; }
/* Secondary CTA under the feature list. */
.cta-sm { margin: 34px auto 0; display: flex; width: fit-content; padding: 12px 26px; font-size: 15px; }
.foot {
  display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: center;
  padding: 22px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px;
}
.foot a { color: var(--muted); text-decoration: none; border-bottom: 1px solid transparent; }
.foot a:hover { color: var(--ink); border-bottom-color: var(--accent); }