/* ============================================================
   Bedhead home page — the app's sky, night to day and back.
   Night sections, a sunrise band, day sections, then dusk into the
   footer. Text sits on the sky; the pictures are real app cards cut
   from the App Store screenshots, shown bare (no frame or shadow).
   Glass is used once, on the pricing panel.
   Privacy, Support and Terms still use styles.css.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: #1a1840; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; color: #fff; background: #1a1840;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", system-ui, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
.wrap { position: relative; max-width: 1120px; margin: 0 auto; padding: 0 40px; }

/* ---------- the sky ---------- */
.part { position: relative; overflow: hidden; }
/* Overlap by a pixel so no seam shows between sky sections. */
.part + .part { margin-top: -1px; }
.night { background: linear-gradient(180deg, #2c2a7c, #3a3589 40%, #2a2670); }
.dawn { height: 280px; background:
  radial-gradient(ellipse 45% 40% at 50% 52%, rgba(255,200,110,.5), rgba(255,200,110,0) 100%),
  linear-gradient(180deg, #2a2670, #6a73c0 45%, #589bde); }
.day { color: #0a2350; background: linear-gradient(180deg, #589bde, #8ebeed 55%, #aed0f2); }
.dusk { padding-top: 1px; background: linear-gradient(180deg, #aed0f2, #6a73c0 30%, #2c2a7c 60%, #1a1840); }
/* Soft colour the pricing glass blurs, plus the moon and sunrise glow. */
.glow { position: absolute; border-radius: 50%; filter: blur(90px); pointer-events: none; }
.stars {
  position: absolute; inset: 0 0 auto 0; height: 2600px; pointer-events: none;
  background:
    radial-gradient(1.5px 1.5px at 8% 98px, #fff 98%, transparent),
    radial-gradient(1px 1px at 18% 224px, rgba(255,255,255,.6) 98%, transparent),
    radial-gradient(1px 1px at 27% 63px, #fff 98%, transparent),
    radial-gradient(1.5px 1.5px at 44% 280px, rgba(255,255,255,.6) 98%, transparent),
    radial-gradient(1px 1px at 61% 210px, rgba(255,255,255,.6) 98%, transparent),
    radial-gradient(1.5px 1.5px at 70% 56px, #fff 98%, transparent),
    radial-gradient(1px 1px at 93% 252px, #fff 98%, transparent),
    radial-gradient(1px 1px at 14% 1136px, #fff 98%, transparent),
    radial-gradient(1px 1px at 38% 1585px, rgba(255,255,255,.6) 98%, transparent),
    radial-gradient(1.5px 1.5px at 86% 1250px, #fff 98%, transparent),
    radial-gradient(1px 1px at 56% 2106px, rgba(255,255,255,.6) 98%, transparent);
}

/* ---------- nav ---------- */
.nav { position: relative; display: flex; justify-content: flex-end; gap: 30px; max-width: 1120px; margin: 0 auto; padding: 22px 40px; font-size: 15px; }
.nav a { text-decoration: none; padding: 10px 0; }
.nav a:hover { text-decoration: underline; }

/* ---------- type ---------- */
.k { display: block; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #c9c6ff; margin-bottom: 10px; }
h2 { font-size: 38px; font-weight: 700; letter-spacing: -.015em; line-height: 1.12; margin: 0 0 12px; text-wrap: balance; }
p { font-size: 17px; line-height: 1.55; margin: 0; color: #dedcf0; }
.prem { display: inline-block; margin-top: 16px; font-size: 12px; font-weight: 600; padding: 4px 11px; border-radius: 99px;
  background: rgba(255,255,255,.18); color: #fff; border: 1px solid rgba(255,255,255,.3); }
.day .k { color: #4240c0; }
.day p { color: #1d3560; }
.day .prem { background: rgba(66,64,192,.12); color: #4240c0; border-color: rgba(66,64,192,.2); }

/* ---------- hero ---------- */
.hero { position: relative; display: grid; grid-template-columns: 1fr 1fr; align-items: center; padding: 30px 0; }
.lock img { width: 104px; filter: drop-shadow(0 0 30px rgba(255,255,255,.45)); }
.wm { font-size: 50px; font-weight: 700; letter-spacing: -.01em; line-height: 1; margin: 14px 0 0; }
.tag { font-size: 22px; font-weight: 500; color: #ecebfa; margin: 16px 0 0; }
.lede { margin: 18px 0 28px; max-width: 28em; }
.meta { display: block; font-size: 14px; color: #cfcde4; margin-top: 14px; max-width: 34em; }
.app-store-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; background: #000; color: #fff;
  border: 1px solid #a6a6a6; border-radius: 12px; padding: 8px 20px 8px 16px; text-decoration: none; }
.app-store-btn svg { width: 22px; height: 27px; fill: #fff; }
.asb-label small { display: block; font-size: 11px; line-height: 1; }
.asb-label strong { display: block; font-size: 22px; line-height: 1.1; font-weight: 600; }
.stage { position: relative; height: 640px; perspective: 1400px; }
.phone { position: absolute; border-radius: 13.9% / 6.7%; }
.phone.front { left: 170px; top: 20px; width: 280px; z-index: 2;
  transform: rotateY(-18deg) rotateX(6deg) rotateZ(4deg); filter: drop-shadow(-40px 50px 60px rgba(10,8,40,.55)); }
.phone.back { left: 20px; top: 100px; width: 240px;
  transform: rotateY(-18deg) rotateX(6deg) rotateZ(-6deg); filter: drop-shadow(-30px 40px 50px rgba(10,8,40,.45)); }

/* ---------- features ---------- */
.feat { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; padding-top: 120px; }
.feat.rev .txt { order: 2; }
.pic { display: flex; justify-content: center; }
.real { width: 100%; border-radius: 18px; }
.w-s { max-width: 400px; }
.w-m { max-width: 460px; }
/* What Moves: each habit card cut on its own, so the sky shows between them. */
.stack { display: grid; gap: 12px; width: 100%; max-width: 460px; }
.stack .real { border-radius: 14px; }
.widgets { position: relative; width: 100%; max-width: 460px; height: 330px; }
.widgets img { position: absolute; box-shadow: 0 24px 50px rgba(8,6,40,.4); }
.widgets .m { right: 0; top: 0; width: 78%; border-radius: 7.7% / 16.4%; }
.widgets .s { left: 0; bottom: 0; width: 36%; border-radius: 16.5%; }

/* ---------- pricing (the one glass panel) ---------- */
.price { position: relative; display: grid; grid-template-columns: 1fr 1fr 1fr; margin-top: 140px; border-radius: 36px; overflow: hidden; color: #0a2350;
  background: linear-gradient(140deg, rgba(255,255,255,.42), rgba(255,255,255,.16)); border: 1px solid rgba(255,255,255,.6);
  -webkit-backdrop-filter: blur(28px) saturate(1.4); backdrop-filter: blur(28px) saturate(1.4);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 30px 70px rgba(20,60,120,.18); }
.price > div { padding: 38px 42px; }
.price > div + div { border-left: 1px solid rgba(10,35,80,.12); }
.price .t { display: block; font-size: 15px; font-weight: 600; color: #4240c0; }
.price .amt { font-size: 34px; font-weight: 700; margin: 4px 0 2px; }
.price .per { font-size: 17px; font-weight: 500; color: #545a64; }
.price small { font-size: 14px; color: #545a64; }
.price ul { margin: 18px 0 0; padding-left: 20px; font-size: 16px; line-height: 1.5; color: #1d3560; display: grid; gap: 8px; }
.save { display: inline-block; margin-left: 6px; font-size: 11px; font-weight: 700; color: #fff; background: #4240c0;
  padding: 2px 8px; border-radius: 99px; vertical-align: 1px; }
.price-note { position: relative; text-align: center; font-size: 14px; color: #2b3f66; margin: 16px 0 0; }
@media (prefers-contrast: more) { .price { background: rgba(255,255,255,.94); } }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .price { background: rgba(255,255,255,.9); } }

/* ---------- privacy + close ---------- */
.privacy { text-align: center; padding-top: 200px; }
.privacy h2 { font-size: 32px; }
.privacy p { max-width: 34em; margin: 0 auto; }
.close { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 60px 0 90px; }
.close img { width: 64px; filter: drop-shadow(0 0 24px rgba(255,255,255,.4)); }
.close .wm { font-size: 30px; margin-top: 10px; }
.close p { margin: 8px 0 22px; }

/* ---------- footer ---------- */
.foot { background: #1a1840; color: #c8c6d8; padding: 34px 0 44px; }
.foot-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px; }
.brand { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-size: 17px; font-weight: 700; text-decoration: none; }
.brand img { width: 20px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 4px 20px; font-size: 15px; }
.foot-links a { text-decoration: none; padding: 10px 0; }
.foot-links a:hover { text-decoration: underline; }
.foot-fine { width: 100%; font-size: 13px; line-height: 1.6; color: #c8c6d8; margin: 10px 0 0; }
.foot-fine a { color: #b4ddff; }

:focus-visible { outline: 3px solid #b4ddff; outline-offset: 3px; border-radius: 6px; }
.day :focus-visible { outline-color: #0046b0; }

/* ---------- phones ---------- */
@media (max-width: 900px) {
  .wrap { padding: 0 16px; }
  .nav { justify-content: center; gap: 18px; padding: 12px 16px; }
  .hide-sm { display: none; }
  .hero { grid-template-columns: 1fr; padding: 20px 8px 10px; }
  .stage { height: 520px; }
  .phone.front { left: 50%; width: 220px; margin-left: -70px; }
  .phone.back { left: 50%; width: 190px; margin-left: -170px; top: 80px; }
  .feat { grid-template-columns: 1fr; gap: 32px; padding-top: 84px; }
  .feat.rev .txt { order: 0; }
  h2 { font-size: 28px; }
  .widgets { height: 250px; }
  .price { grid-template-columns: 1fr; }
  .price > div + div { border-left: 0; border-top: 1px solid rgba(10,35,80,.12); }
  .price > div { padding: 28px 24px; }
  .privacy { padding-top: 150px; }
}