/* Sky Clock — one stylesheet, no external requests.
   Nothing here loads a font, a script or a tracker, which keeps the site fast
   and keeps the privacy policy honest. */

:root {
  --bg: #06090f;
  --bg-soft: #0b1220;
  --panel: rgba(255, 255, 255, 0.035);
  --panel-solid: #0e1524;
  --border: rgba(255, 255, 255, 0.09);
  --border-bright: rgba(94, 234, 212, 0.35);
  --text: #e7edf6;
  --muted: #93a2b8;
  --accent: #5eead4;
  --accent-ink: #042420;
  --radius: 16px;
  --container: 1060px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* A faint starfield, drawn rather than downloaded. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(1.2px 1.2px at 12% 18%, rgba(255,255,255,0.55), transparent),
    radial-gradient(1px 1px at 27% 62%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1.4px 1.4px at 43% 12%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 58% 78%, rgba(255,255,255,0.35), transparent),
    radial-gradient(1.2px 1.2px at 71% 33%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 84% 68%, rgba(255,255,255,0.32), transparent),
    radial-gradient(1.3px 1.3px at 91% 22%, rgba(255,255,255,0.45), transparent),
    radial-gradient(1px 1px at 8% 84%, rgba(255,255,255,0.3), transparent),
    radial-gradient(1px 1px at 36% 91%, rgba(255,255,255,0.28), transparent),
    radial-gradient(1.1px 1.1px at 64% 8%, rgba(255,255,255,0.4), transparent);
  opacity: 0.9;
}

/* The glow of a sky just after sunset, low on the page. */
body::after {
  content: "";
  position: fixed;
  inset: auto 0 0 0;
  height: 45vh;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(to top, rgba(14, 62, 74, 0.5), rgba(6, 9, 15, 0) 75%);
}

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: blur(12px);
  background: rgba(6, 9, 15, 0.72);
  border-bottom: 1px solid var(--border);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 62px;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 650;
  font-size: 1.02rem;
  letter-spacing: -0.01em;
  color: var(--text);
  text-decoration: none;
}

.wordmark svg { flex: none; }

.site-nav {
  display: flex;
  align-items: center;
  gap: 22px;
  font-size: 0.93rem;
}

.site-nav a {
  color: var(--muted);
  text-decoration: none;
}

.site-nav a:hover { color: var(--text); }

@media (max-width: 620px) {
  .site-nav { gap: 16px; font-size: 0.88rem; }
  .site-nav .hide-narrow { display: none; }
}

/* ---------- Type ---------- */

h1, h2, h3 {
  line-height: 1.18;
  letter-spacing: -0.022em;
  margin: 0 0 0.5em;
  font-weight: 660;
}

h1 { font-size: clamp(2.1rem, 5.4vw, 3.35rem); }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.15rem); }
h3 { font-size: 1.14rem; }

p { margin: 0 0 1.1em; }

a { color: var(--accent); }

.lede {
  font-size: clamp(1.06rem, 2vw, 1.22rem);
  color: var(--muted);
  max-width: 56ch;
}

.eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 640;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 22px;
  border-radius: 999px;
  font-weight: 620;
  font-size: 0.98rem;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
}

.btn-primary {
  background: var(--accent);
  color: var(--accent-ink);
}

.btn-primary:hover { filter: brightness(1.08); }

.btn-ghost {
  border-color: var(--border);
  color: var(--text);
  background: var(--panel);
}

.btn-ghost:hover { border-color: var(--border-bright); }

/* Used while the app is still in review: honest, and one attribute from
   becoming a real link. */
.btn-pending {
  background: var(--panel);
  border-color: var(--border-bright);
  color: var(--text);
  cursor: default;
}

a:focus-visible,
.btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-top: 28px;
}

.btn-note {
  font-size: 0.86rem;
  color: var(--muted);
  margin: 14px 0 0;
}

/* ---------- Hero ---------- */

.hero {
  padding: clamp(56px, 9vw, 104px) 0 clamp(40px, 6vw, 72px);
}

.hero .container {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}

@media (max-width: 860px) {
  .hero .container { grid-template-columns: 1fr; }
  .hero-art { order: -1; }
}

.hero-art {
  display: flex;
  justify-content: center;
}

/* ---------- Phone frame ---------- */

.phone {
  position: relative;
  width: 100%;
  max-width: 288px;
  border-radius: 40px;
  padding: 8px;
  background: linear-gradient(160deg, #2a3446, #10161f);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.phone img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 33px;
}

.phone-sm { max-width: 208px; }

/* ---------- Sections ---------- */

section { padding: clamp(48px, 7vw, 84px) 0; }

.section-head {
  max-width: 62ch;
  margin-bottom: clamp(28px, 4vw, 44px);
}

.section-head p:last-child { margin-bottom: 0; }

.rule { border-top: 1px solid var(--border); }

/* ---------- Feature rows ---------- */

.feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
  padding: clamp(34px, 5vw, 56px) 0;
}

.feature + .feature { border-top: 1px solid var(--border); }

.feature-art { display: flex; justify-content: center; }

@media (max-width: 780px) {
  .feature { grid-template-columns: 1fr; }
  .feature-art { order: -1; }
}

@media (min-width: 781px) {
  .feature.reverse .feature-text { order: 2; }
}

/* ---------- Lists ---------- */

.ticks {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ticks li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 11px;
  color: var(--muted);
}

.ticks li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.66em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}

.ticks strong { color: var(--text); font-weight: 600; }

/* ---------- Cards ---------- */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
  gap: 16px;
}

.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
}

.card h3 { margin-bottom: 8px; }

.card p { color: var(--muted); margin-bottom: 0; font-size: 0.97rem; }

.card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: rgba(94, 234, 212, 0.12);
  margin-bottom: 15px;
}

/* ---------- Comparison pair ---------- */

.pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  max-width: 620px;
}

.pair figure { margin: 0; }

/* Cropped in CSS rather than in the file, so the same screenshot can be
   reused elsewhere. The interesting part is the star field, not the status
   bar above it or the tab bar below. */
.pair img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center 32%;
  border-radius: 14px;
  border: 1px solid var(--border);
}

.pair figcaption {
  margin-top: 10px;
  font-size: 0.88rem;
  color: var(--muted);
  text-align: center;
}

/* ---------- Privacy panel ---------- */

.lede-wide { max-width: 64ch; }

.ticks-spaced { margin-top: 22px; }

.panel {
  background: linear-gradient(180deg, rgba(94, 234, 212, 0.07), rgba(94, 234, 212, 0.02));
  border: 1px solid var(--border-bright);
  border-radius: 22px;
  padding: clamp(26px, 4vw, 44px);
}

/* ---------- Pricing ---------- */

.price-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: 18px;
  align-items: start;
}

.price {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 28px;
}

.price.featured { border-color: var(--border-bright); }

.price-tag {
  font-size: 2rem;
  font-weight: 660;
  letter-spacing: -0.03em;
  margin: 6px 0 2px;
}

.price-tag span {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0;
}

.price-note { font-size: 0.9rem; color: var(--muted); }

.badge {
  display: inline-block;
  font-size: 0.74rem;
  font-weight: 660;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--border-bright);
  border-radius: 999px;
  padding: 3px 10px;
  margin-bottom: 10px;
}

.fineprint {
  font-size: 0.86rem;
  color: var(--muted);
  max-width: 68ch;
  margin-top: 26px;
}

/* ---------- FAQ ---------- */

.faq { max-width: 74ch; }

.faq details {
  border-bottom: 1px solid var(--border);
  padding: 18px 0;
}

.faq summary {
  cursor: pointer;
  font-weight: 600;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: "+";
  color: var(--accent);
  font-size: 1.3rem;
  line-height: 1;
  flex: none;
}

.faq details[open] summary::after { content: "\2013"; }

.faq details p {
  color: var(--muted);
  margin: 12px 0 0;
}

/* ---------- Legal pages ---------- */

.legal {
  max-width: 74ch;
  margin: 0 auto;
  padding: clamp(44px, 6vw, 76px) 24px clamp(56px, 8vw, 96px);
}

.legal h1 { margin-bottom: 12px; }

.legal h2 {
  font-size: 1.3rem;
  margin-top: 2.2em;
  padding-top: 0.6em;
  border-top: 1px solid var(--border);
}

.legal h3 { margin-top: 1.8em; font-size: 1.05rem; }

.legal .updated {
  color: var(--muted);
  font-size: 0.92rem;
  margin-bottom: 2.4em;
}

.legal ul { color: var(--muted); padding-left: 22px; }

.legal li { margin-bottom: 9px; }

.legal p { color: var(--muted); }

.legal p strong, .legal li strong { color: var(--text); }

.legal .summary-box {
  background: var(--panel);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 12px;
  padding: 20px 22px;
  margin: 0 0 2.4em;
}

.legal .summary-box p:last-child { margin-bottom: 0; }

.back-link {
  display: inline-block;
  margin-bottom: 26px;
  font-size: 0.92rem;
  text-decoration: none;
}

.back-link:hover { text-decoration: underline; }

/* ---------- Footer ---------- */

.site-footer {
  border-top: 1px solid var(--border);
  padding: 40px 0 52px;
  margin-top: 40px;
  font-size: 0.92rem;
  color: var(--muted);
}

.site-footer .container {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 30px;
  justify-content: space-between;
  align-items: center;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.site-footer a { color: var(--muted); text-decoration: none; }

.site-footer a:hover { color: var(--text); }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}