/* Sleep++ — shared styles. */

/* Source Sans 3 (the open-source successor to Source Sans Pro, the face on the old site), Latin
   subset, variable weight. Self-hosted so the site makes no third-party requests. */
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/source-sans-3-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Source Sans 3";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/source-sans-3-latin-italic.woff2") format("woff2");
}

/* The site is always dark. */
:root {
  color-scheme: dark;
  --bg: #0b0c26;
  --bg-soft: #171b4f;
  --fg: #e8eafc;
  --muted: #a4a9d2;
  --rule: #3a418d;
  --link: #8fa9ff;
  /* Section headings on the document pages: lavender-white, distinct from link blue. */
  --heading: #c8cdf6;
  --accent: #517ff1;
  --accent-fg: #ffffff;
  /* Buttons: dark enough for white text (5.2:1) while still standing out from the page (3.7:1). */
  --button-bg: #4263d8;
  /* The night sky behind the header and hero, from the app icon and the old site. */
  --night-top: #04051a;
  --night-bottom: #12166a;
  --night-glow: #517ff1;
  --on-night: #ffffff;
  --on-night-muted: rgb(255 255 255 / 0.82);
  --nav-bg: #04051a;
  /* Laid over the hero's sky to darken it a little. */
  --hero-dim: rgb(4 5 26 / 0.4);
  /* Darkens the sky behind the hero's text (on the left) and fades out before the moon. */
  --hero-scrim: linear-gradient(to right, rgb(7 8 38 / 0.72), rgb(7 8 38 / 0.45) 38%, rgb(7 8 38 / 0) 62%);
  --card: #21266b;
  --shadow-filter: drop-shadow(0 2px 3px rgb(0 0 0 / 0.35)) drop-shadow(0 16px 32px rgb(0 0 0 / 0.5));
}

/* The light theme, kept for if we bring it back. Nothing sets data-theme, so it never applies.
   To follow the visitor's setting again, put these values in :root (with color-scheme: light
   dark) and wrap the dark ones above in @media (prefers-color-scheme: dark). */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #ffffff;
  --bg-soft: #eef1fd;
  --fg: #14163a;
  --muted: #545a7e;
  --rule: #dce0f4;
  --link: #3551cc;
  --heading: #3551cc;
  --accent: #3551cc;
  --button-bg: #3551cc;
  --night-top: #070826;
  --night-bottom: #1a1f8a;
  --nav-bg: #08092a;
  --hero-dim: transparent;
  --card: #ffffff;
  --shadow-filter: drop-shadow(0 2px 3px rgb(16 18 60 / 0.12)) drop-shadow(0 16px 32px rgb(16 18 60 / 0.22));
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 18px/1.55 "Source Sans 3", "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--link); }
/* Keyboard focus: browsers' default rings can disappear on these dark blues. */
:focus-visible { outline: 2px solid #ffffff; outline-offset: 3px; border-radius: 4px; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { font-weight: 600; }

.wrap { max-width: 68rem; margin: 0 auto; padding: 0 20px; }
.wrap-narrow { max-width: 42rem; margin: 0 auto; padding: 0 20px; }

/* Night band: the header, plus the hero on the home page. The hero's moon and star trails are
   vector art (hero-sky.svg, drawn by design/scripts/hero-sky.py after the old site's header) so
   they stay sharp at any size. */

.top {
  background:
    radial-gradient(ellipse 60% 70% at 50% 110%, rgb(81 127 241 / 0.35), transparent 70%),
    linear-gradient(var(--night-top), var(--night-bottom));
  color: var(--on-night);
}
.home .top {
  background:
    var(--hero-scrim),
    linear-gradient(var(--hero-dim), var(--hero-dim)),
    url("hero-sky.svg") center / cover,
    linear-gradient(var(--night-top), var(--night-bottom));
}

/* A solid bar for the nav, like the headers on our other apps' sites. */
.site-header { background: var(--nav-bg); box-shadow: 0 1px 0 rgb(255 255 255 / 0.06); }
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  min-height: 84px;
  flex-wrap: wrap;
  padding-top: 14px;
  padding-bottom: 14px;
}
.brand { display: flex; align-items: center; gap: 0.75rem; color: inherit; font-size: 1.2rem; font-weight: 700; text-decoration: none; }
/* The icon artwork has its own rounded shape, so shadow the shape rather than the box. */
.brand img { width: 64px; height: 64px; filter: drop-shadow(0 0 10px rgb(81 127 241 / 0.45)); }
.site-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1.75rem; font-size: 1.12rem; }
.site-nav a { color: var(--on-night-muted); text-decoration: none; padding: 0.2rem 0; border-bottom: 2px solid transparent; }
.site-nav a:hover, .menu summary:hover { color: var(--on-night); }

/* "Our Other Apps" dropdown */

.menu { position: relative; }
.menu summary {
  list-style: none;
  cursor: pointer;
  color: var(--on-night-muted);
  padding: 0.2rem 0;
  border-bottom: 2px solid transparent;
}
.menu summary::-webkit-details-marker { display: none; }
.menu summary::after { content: "▾"; margin-left: 0.3rem; font-size: 0.8em; }
.menu[open] summary { color: var(--on-night); }
.menu-list {
  /* Plain panel in the header's colour, like the menus on our other apps' sites. */
  position: absolute;
  right: 0;
  top: calc(100% + 12px);
  z-index: 10;
  margin: 0;
  padding: 0.5rem 1rem;
  list-style: none;
  background: var(--nav-bg);
  text-align: right;
}
.menu-list a {
  display: block;
  padding: 0.2rem 0;
  border: 0;
  color: var(--on-night);
  white-space: nowrap;
}
.menu-list a:hover { color: var(--on-night); text-decoration: underline; }
/* On phones the nav wraps and the menu lands near the left edge, so open it rightwards. */
@media (max-width: 600px) {
  .menu-list { left: 0; right: auto; text-align: left; }
}
.site-nav a[aria-current="page"] { color: var(--on-night); border-bottom-color: currentColor; }

.hero .wrap {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 40px;
  padding-top: 43px;
}
/* Centred in the night sky: the bottom padding matches the hero's top padding. */
.hero-text { align-self: center; padding-bottom: 43px; }
.hero h1 { font-size: clamp(2.8rem, 8vw, 4.6rem); line-height: 1.05; margin: 0 0 0.75rem; letter-spacing: -0.01em; }
.hero .lede { font-size: clamp(1.2rem, 2.5vw, 1.5rem); color: var(--on-night-muted); max-width: 30rem; margin: 0 0 1.75rem; }
.hero .lede strong { color: var(--on-night); }
/* The underline under "automatically", like the hand-drawn one on the old site. */
.hero .lede em {
  font-style: normal;
  text-decoration: underline;
  text-decoration-color: var(--night-glow);
  text-decoration-thickness: 3px;
  text-underline-offset: 5px;
}
/* How far the hero phone hangs into the first row, which is pushed down by the same amount. */
.home { --hero-overhang: 100px; }
.hero-shot { width: 300px; margin-bottom: calc(-1 * var(--hero-overhang)); }

.app-store-badge { display: inline-block; }
.app-store-badge img { height: 54px; width: auto; }

/* A screenshot: the art already includes the phone, so it only needs a shadow. */
.shot { display: block; }
.shot img { width: 100%; height: auto; aspect-ratio: 1404 / 2896; filter: var(--shadow-filter); }

@media (max-width: 760px) {
  .hero .wrap { grid-template-columns: 1fr; text-align: center; gap: 0; padding-top: 29px; }
  .hero .lede { margin-left: auto; margin-right: auto; }
  .hero-text { padding-bottom: 36px; }
  /* The text is centred above the phone here, so darken the top of the sky instead. */
  .home { --hero-overhang: 40px; --hero-scrim: linear-gradient(rgb(7 8 38 / 0.62), rgb(7 8 38 / 0.4) 45%, rgb(7 8 38 / 0) 75%); }
  .hero-shot { width: 220px; margin-left: auto; margin-right: auto; }
}

/* Home: feature rows (text beside a screenshot, alternating) */

.row { padding: 79px 0; }
/* Tighter than the other rows: the text sits mid-watch, so the watch already adds space above and below it. */
.home main > .row:first-child { padding: calc(50px + var(--hero-overhang)) 0 50px; }
.row.alt { background: var(--bg-soft); }
.row .wrap {
  display: grid;
  grid-template-columns: 1fr 260px;
  align-items: center;
  gap: 32px 72px;
}
.row.flip .wrap { grid-template-columns: 260px 1fr; }
.row.flip .row-text { order: 2; }
.row h2 { font-size: clamp(1.8rem, 4.2vw, 2.5rem); line-height: 1.12; margin: 0 0 0.75rem; }
.row p { margin: 0 0 1rem; color: var(--muted); font-size: 1.1rem; }
.row p:last-child { margin-bottom: 0; }
.row .shot { width: 260px; }
/* The watch is smaller than a phone, so it sits centred in the phone's column. */
.row .watch { width: 200px; justify-self: center; filter: var(--shadow-filter); }

@media (max-width: 760px) {
  .row { padding: 58px 0; }
  .home main > .row:first-child { padding: calc(58px + var(--hero-overhang)) 0 58px; }
  .row .wrap, .row.flip .wrap { grid-template-columns: 1fr; }
  .row.flip .row-text { order: 0; }
  .row .shot { width: 220px; margin: 0 auto; }
  .row .watch { width: 190px; }
}

.tag {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  margin-bottom: 0.75rem;
  border: 1px solid currentColor;
  color: var(--link);
}

/* Home: the old site's bedroom illustration beside its text. The band uses the illustration's
   own colours, top to bottom, and the picture sits on the band's bottom edge with its other
   edges faded out, so it reads as part of the background rather than a box. */

.night {
  background: linear-gradient(#211948, #28289a);
  color: var(--on-night);
  padding-top: 40px;
  overflow: hidden;
}
.night .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  align-items: center;
  gap: 0 56px;
}
.night .bedroom {
  align-self: end;
  width: 100%;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 88%, transparent), linear-gradient(transparent, #000 18%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 88%, transparent), linear-gradient(transparent, #000 18%);
  mask-composite: intersect;
}
.night-text { padding: 40px 0 80px; }
.night h2 { font-size: clamp(1.8rem, 4.2vw, 2.5rem); line-height: 1.12; margin: 0 0 0.75rem; }
.night p { margin: 0 0 1rem; color: var(--on-night-muted); font-size: 1.1rem; }
.night p:last-child { margin-bottom: 0; }

@media (max-width: 760px) {
  .night { padding-top: 58px; }
  .night .wrap { grid-template-columns: 1fr; }
  .night-text { order: -1; padding: 0 0 8px; }
  /* Run the picture to the screen's edges so no box shows beside it. */
  .night .bedroom { width: calc(100% + 40px); margin: 0 -20px; }
}

/* Home: more features grid */

/* Tinted, with Free and Premium below it, so the bands alternate after the Apple Health section. */
.more { padding: 79px 0; background: var(--bg-soft); }
.section-title { text-align: center; font-size: clamp(1.8rem, 4.2vw, 2.5rem); line-height: 1.15; margin: 0 0 0.5rem; }
.section-lede { text-align: center; color: var(--muted); font-size: 1.1rem; max-width: 36rem; margin: 0 auto 2.5rem; }

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.feature { background: var(--card); border: 1px solid var(--rule); border-radius: 18px; padding: 1.25rem 1.25rem 1.1rem; }
.feature .icon {
  width: 40px; height: 40px; border-radius: 10px;
  display: grid; place-items: center;
  background: linear-gradient(#517ff1, #3551cc); color: var(--accent-fg);
  margin-bottom: 0.85rem;
}
/* Icons are copied inline from the SVG files in assets/icons; they take the text colour. */
.glyph { display: block; width: 24px; height: 24px; }
.feature h3 { font-size: 1.12rem; margin: 0 0 0.3rem; }
.feature p { margin: 0; color: var(--muted); font-size: 1rem; }

/* Phones: two cards per row, a little more compact. */
@media (max-width: 600px) {
  .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .feature { padding: 0.9rem 0.85rem 0.85rem; border-radius: 14px; }
  .feature .icon { width: 34px; height: 34px; border-radius: 9px; margin-bottom: 0.6rem; }
  .feature .icon .glyph { width: 20px; height: 20px; }
  .feature h3 { font-size: 1rem; line-height: 1.25; }
  .feature p { font-size: 0.88rem; line-height: 1.45; }
}

/* Home: Free and Premium, laid out like Check the Weather's */

.plans { padding: 0 0 79px; background: var(--bg-soft); }
.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; max-width: 52rem; margin: 0 auto; }
.plan { border: 1px solid var(--rule); border-radius: 18px; padding: 1.4rem 1.5rem 0.6rem; background: var(--card); }
.plan.premium { border-color: var(--button-bg); box-shadow: 0 0 0 1px var(--button-bg); }
.plan h3 { margin: 0 0 0.75rem; font-size: 1.25rem; }
.plan ul { margin: 0 0 1rem; padding-left: 1.2rem; color: var(--muted); }
.plan li { margin-bottom: 0.4rem; }

/* Home: Apple Health and privacy band + the small print */

.promise { padding: 79px 0; text-align: center; }
.promise .section-lede { margin-bottom: 0; }
.promise .section-lede + .section-lede { margin-top: 1rem; }
.pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; list-style: none; padding: 0; margin: 1.75rem 0 0; }
.pills li { padding: 0.5rem 1.1rem; border-radius: 999px; background: var(--card); border: 1px solid var(--rule); font-weight: 600; }
.promise .app-store-badge { margin-top: 2rem; }

.footnotes { padding: 28px 0; text-align: center; color: var(--muted); font-size: 0.88rem; }
.footnotes p { margin: 0.2rem 0; }


/* Document pages (FAQs, Privacy, Terms) */

.doc { padding: 43px 0 22px; }
.doc { line-height: 1.65; }
.doc h1 { font-size: clamp(2.1rem, 5vw, 2.7rem); line-height: 1.15; margin: 0 0 0.35rem; }
/* Section headings in the brand blue, with a hairline, to break up the long pages. */
.doc h2 {
  font-size: 1.55rem;
  line-height: 1.25;
  color: var(--heading);
  margin: 2.6rem 0 0.9rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--rule);
}
.doc h3 { font-size: 1.18rem; font-weight: 650; line-height: 1.35; margin: 1.6rem 0 0.35rem; }
.doc p, .doc ul, .doc ol { margin: 0 0 1rem; }
.doc ul, .doc ol { padding-left: 1.25rem; }
.doc li { margin-bottom: 0.4rem; }
.doc a { overflow-wrap: anywhere; }
.doc .updated { color: var(--muted); margin-bottom: 2rem; }

.contact { margin: 1.25rem 0 0.5rem; padding: 1rem 1.1rem; border: 1px solid var(--rule); border-radius: 16px; }
.contact p { margin: 0 0 0.75rem; color: var(--muted); }

.button {
  display: inline-block;
  padding: 0.65rem 1.4rem;
  border-radius: 999px;
  background: var(--button-bg);
  color: var(--accent-fg);
  font-weight: 600;
  text-decoration: none;
}

/* Footer: same colour as the nav bar, laid out like our other apps' sites */

.site-footer {
  background: var(--nav-bg);
  color: var(--on-night);
  padding: 50px 0 25px;
}
.footer-main { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 40px; }
.footer-brand { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.footer-brand > a:first-child img { width: 112px; height: 112px; filter: drop-shadow(0 0 18px rgb(81 127 241 / 0.4)); }
.footer-brand .app-store-badge img { height: 40px; }
.footer-cols { display: flex; flex-wrap: wrap; gap: 32px 64px; }
.footer-cols h2 {
  margin: 0 0 0.75rem;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.footer-cols ul { list-style: none; margin: 0; padding: 0; font-size: 1rem; }
.footer-cols li { margin-bottom: 0.45rem; }
.footer-cols a { color: var(--on-night); }
.copyright { margin: 48px 0 0; text-align: center; font-size: 0.88rem; color: var(--on-night-muted); }

@media (max-width: 600px) {
  .footer-main { flex-direction: column; align-items: center; text-align: center; }
  .footer-cols { justify-content: center; }
}