/* Dimly website. One stylesheet, no external requests.
   Design source: design canvas v0.17 Website, variant B (landing 1440 and 390, privacy, support).
   Ground, ink and glass values come from the app (src/theme/aurora.ts, src/components/aurora). */

/* Fonts: self-hosted, SIL Open Font License (assets/fonts/LICENSE-OFL.txt).
   latin + latin-ext subsets; latin-ext carries the Czech letters. */
@font-face {
  font-family: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/instrument-serif-latin-ext-400-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/instrument-serif-latin-400-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/instrument-serif-latin-ext-400-italic.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/instrument-serif-latin-400-italic.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/instrument-sans-latin-ext-400-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/instrument-sans-latin-400-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/instrument-sans-latin-ext-500-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/instrument-sans-latin-500-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/instrument-sans-latin-ext-600-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/instrument-sans-latin-600-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Tokens */
:root {
  color-scheme: dark;
  --ground-top: #071a2e;
  --ground: #04101c;
  --ground-deep: #030b14;
  --ink-head: #f2faf7;
  --ink-body: rgba(234, 246, 242, 0.86);
  --ink-2: rgba(234, 246, 242, 0.74);
  --ink-num: rgba(234, 246, 242, 0.62);
  --ink-faint: rgba(234, 246, 242, 0.55);
  --link: rgba(234, 246, 242, 0.92);
  --link-line: rgba(234, 246, 242, 0.4);
  --glass: rgba(255, 255, 255, 0.12);
  --glass-filter: blur(28px) saturate(140%);
  --radius: 26px;
  --cream: #e6dfcb;
  --scrim: 3, 11, 20;
  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --max: 1040px;
  --gutter: 24px;
}

@media (min-width: 760px) {
  :root {
    --gutter: clamp(20px, 4vw, 40px);
  }
}

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

html {
  background: var(--ground-deep);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink-body);
  background: var(--ground-deep);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  color: var(--ink-head);
}

p,
ul,
ol,
dl,
dd {
  margin: 0;
}

strong {
  font-weight: 600;
  color: var(--ink-head);
}

a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--link-line);
  text-underline-offset: 4px;
  transition: color 160ms ease, text-decoration-color 160ms ease;
}

a:hover {
  color: #fff;
  text-decoration-color: rgba(255, 255, 255, 0.8);
}

a:focus {
  outline: none;
}

a:focus-visible {
  outline: 2px solid var(--ink-head);
  outline-offset: 4px;
  border-radius: 6px;
}

.quiet {
  text-decoration: none;
}

/* Skip link: off screen until it gets keyboard focus */
.skip {
  position: absolute;
  z-index: 30;
  left: 16px;
  top: -120px;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 14px;
  background: var(--ink-head);
  color: var(--ground);
  font-weight: 600;
  text-decoration: none;
}

.skip:focus,
.skip:focus-visible {
  top: 16px;
  color: var(--ground);
}

/* Page frame: ground gradient, backdrop layers, content, grain */
.page {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, var(--ground-top) 0, var(--ground) 1000px, var(--ground-deep) 2000px);
}

.page--doc {
  background: linear-gradient(180deg, var(--ground-top) 0, var(--ground) 900px, var(--ground-deep) 2400px);
}

@media (min-width: 760px) {
  .page--landing {
    background: linear-gradient(180deg, var(--ground-top) 0, var(--ground) 900px, var(--ground-deep) 1600px);
  }
}

.backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* The aurora: a seamless 24 s loop rendered from the app's curtain shader.
   Tall video below 760 px, wide video above. The bottom fades into the ground. */
.aurora {
  position: absolute;
  left: 0;
  right: 0;
  top: -260px;
  height: 844px;
  overflow: hidden;
  background: var(--ground) url(assets/aurora/aurora-tall-still.webp) 50% 0 / cover no-repeat;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 50%, transparent 82%);
  mask-image: linear-gradient(180deg, #000 0%, #000 50%, transparent 82%);
}

.aurora video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0%;
}

/* Safari on iPhone blocks autoplay in Low Power Mode and draws its own Play button over the video.
   The videos are decoration, so hide every native control: the still frame behind them stays visible. */
.aurora video::-webkit-media-controls,
.aurora video::-webkit-media-controls-panel,
.aurora video::-webkit-media-controls-overlay-play-button,
.aurora video::-webkit-media-controls-start-playback-button,
.phone__aurora::-webkit-media-controls,
.phone__aurora::-webkit-media-controls-panel,
.phone__aurora::-webkit-media-controls-overlay-play-button,
.phone__aurora::-webkit-media-controls-start-playback-button {
  display: none !important;
  -webkit-appearance: none;
}

@media (min-width: 760px) {
  .aurora {
    top: -100px;
    height: 1000px;
    background-image: url(assets/aurora/aurora-wide-still.webp);
    background-position: 50% 35%;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 100%);
  }

  .page--doc .aurora {
    top: -180px;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 52%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 52%, transparent 100%);
  }

  .aurora video {
    object-position: 50% 35%;
  }
}

/* Scrims: a soft dark band behind the header, and a soft pool behind the hero text */
.scrim-top {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 170px;
  background: linear-gradient(180deg, rgba(var(--scrim), 0.84) 0%, rgba(var(--scrim), 0.66) 42%, rgba(var(--scrim), 0.26) 75%, rgba(var(--scrim), 0) 100%);
}

.scrim-hero {
  position: absolute;
  left: -90px;
  top: 40px;
  width: 570px;
  height: 520px;
  background: radial-gradient(closest-side, rgba(var(--scrim), 0.58) 0%, rgba(var(--scrim), 0.32) 55%, rgba(var(--scrim), 0) 100%);
}

@media (min-width: 760px) {
  .scrim-top {
    height: 240px;
  }

  .scrim-hero {
    left: 0;
    top: 270px;
    width: min(1100px, 100%);
    height: 760px;
    background: radial-gradient(closest-side at 46% 58%, rgba(var(--scrim), 0.66) 0%, rgba(var(--scrim), 0.4) 55%, rgba(var(--scrim), 0) 100%);
  }

  .page--doc .scrim-hero {
    left: 50%;
    top: 170px;
    width: 1040px;
    height: 620px;
    margin-left: -520px;
    background: radial-gradient(closest-side, rgba(var(--scrim), 0.66) 0%, rgba(var(--scrim), 0.42) 55%, rgba(var(--scrim), 0) 100%);
  }
}

/* Film grain: the app's grain tile over the whole page */
.grain {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  background: url(assets/aurora/grain.png) 0 0 / 256px 256px repeat;
  opacity: 0.42;
  mix-blend-mode: soft-light;
}

/* Header */
.site-header,
.site-main,
.site-footer {
  position: relative;
  z-index: 2;
}

.site-header {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 24px var(--gutter) 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.wordmark {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 35px;
  line-height: 44px;
  letter-spacing: -0.01em;
  color: #fff;
  text-decoration: none;
}

.wordmark:hover {
  color: #fff;
}

.lang {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-right: -4px;
  padding: 0 4px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink-2);
  text-decoration: none;
}

@media (min-width: 760px) {
  .site-header {
    padding-top: 28px;
  }

  .wordmark {
    font-size: 46px;
    line-height: 56px;
  }

  .lang {
    margin-right: 0;
  }
}

.site-main {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}

/* Glass: flat frosted fill, no border, no shadow */
.glass {
  background: var(--glass);
  -webkit-backdrop-filter: var(--glass-filter);
  backdrop-filter: var(--glass-filter);
  border-radius: var(--radius);
}

/* Landing: hero */
.hero {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 32px var(--gutter) 64px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.hero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
}

.hero h1 {
  font-size: clamp(2.5rem, 13.4vw, 3.25rem);
  line-height: 1;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.lede {
  margin: 16px 0 28px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  line-height: 1.3;
  color: var(--ink-body);
  text-wrap: pretty;
}

.badges {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  gap: 10px;
}

.badge {
  height: 56px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 18px;
  border-radius: 16px;
}

.badge__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.badge__small {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.01em;
  color: var(--ink-2);
}

.badge__store {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.1;
  color: var(--ink-head);
}

.hero__note {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-2);
}

/* Phone: the device is drawn 320 wide; its screen is 300 x 649 (the app's 390 x 844 points at 0.769)
   and the whole phone is scaled to 0.8 on small screens. */
.phone-stage {
  position: relative;
  align-self: center;
  flex: 0 0 auto;
  width: 256px;
  height: 535.4px;
  margin-top: 40px;
}

/* Soft aurora-coloured glow behind the device, no drop shadow */
.phone-halo {
  position: absolute;
  inset: -72px;
  border-radius: 50%;
  background:
    radial-gradient(closest-side at 44% 36%, rgba(46, 214, 158, 0.3), rgba(46, 214, 158, 0)),
    radial-gradient(closest-side at 56% 66%, rgba(28, 170, 172, 0.24), rgba(28, 170, 172, 0)),
    radial-gradient(closest-side at 50% 50%, rgba(20, 120, 140, 0.18), rgba(20, 120, 140, 0));
  filter: blur(32px);
  pointer-events: none;
  animation: glow 18s ease-in-out infinite alternate;
}

/* Device: titanium rim with a light outer edge, a thin light line inside the rim, side keys */
.phone {
  position: absolute;
  left: 0;
  top: 0;
  width: 320px;
  height: 669.2px;
  padding: 3px;
  border-radius: 55px;
  background: linear-gradient(150deg, #6c7782 0%, #353e47 16%, #1d242b 46%, #262e36 74%, #5b6570 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  transform: scale(0.8);
  transform-origin: 0 0;
}

.phone__key {
  position: absolute;
  width: 3px;
  background: linear-gradient(90deg, #56616c, #2a3239);
}

.phone__key--action,
.phone__key--up,
.phone__key--down {
  left: -3px;
  border-radius: 2px 0 0 2px;
}

.phone__key--action {
  top: 120px;
  height: 28px;
}

.phone__key--up {
  top: 172px;
  height: 50px;
}

.phone__key--down {
  top: 234px;
  height: 50px;
}

.phone__key--side {
  right: -3px;
  top: 192px;
  height: 78px;
  border-radius: 0 2px 2px 0;
  background: linear-gradient(270deg, #56616c, #2a3239);
}

.phone__body {
  width: 100%;
  height: 100%;
  padding: 7px;
  border-radius: 52px;
  background: #05080b;
  box-shadow: 0 0 0 1px rgba(214, 228, 234, 0.2);
}

.phone__screen {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 45px;
  background: var(--ground);
  isolation: isolate;
}

.phone__still {
  position: absolute;
  inset: 0;
  background: url(assets/aurora/aurora-tall-still.webp) 50% 0 / cover no-repeat;
}

.phone__aurora {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0%;
}

/* The ground takes over in the lower half, as on the app's Tonight backdrop */
.phone__fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(4, 16, 28, 0) 0%, rgba(4, 16, 28, 0) 44%, rgba(4, 16, 28, 0.55) 58%, rgba(4, 16, 28, 0.8) 74%, rgba(4, 16, 28, 0.86) 100%);
}

/* A faint diagonal reflection on the glass */
.phone__glare {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(128deg, rgba(255, 255, 255, 0.075) 0%, rgba(255, 255, 255, 0.03) 30%, rgba(255, 255, 255, 0) 50%);
  pointer-events: none;
}

/* The app's Tonight screen (src/app/(tabs)/index.tsx), laid out in the app's own 390 x 844 points
   and scaled to the screen. Sizes, inks and glass follow src/theme/aurora.ts and the components. */
.hs {
  position: absolute;
  left: 0;
  top: 0;
  width: 390px;
  height: 844px;
  display: flex;
  flex-direction: column;
  padding: 67px 20px 102px;
  font-family: var(--sans);
  color: #eaf6f2;
  transform: scale(0.769231);
  transform-origin: 0 0;
}

.hs svg {
  display: block;
  flex: none;
}

.hs-status {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 54px;
}

.hs-clock {
  position: absolute;
  left: 0;
  top: 20px;
  width: 144px;
  font-family: -apple-system, system-ui, var(--sans);
  font-size: 17px;
  font-weight: 600;
  line-height: 22px;
  letter-spacing: -0.01em;
  text-align: center;
  color: #fff;
}

.hs-sys {
  position: absolute;
  right: 33px;
  top: 25px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.hs-island {
  position: absolute;
  left: 50%;
  top: 11px;
  width: 124px;
  height: 36px;
  margin-left: -62px;
  border-radius: 999px;
  background: #000;
}

.hs-head {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 18px;
}

.hs-label {
  font-size: 11px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(234, 246, 242, 0.8);
  white-space: nowrap;
}

.hs-chip {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  margin-right: -10px;
  padding: 6px 10px 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(30px);
  backdrop-filter: blur(30px);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: #f2faf7;
  white-space: nowrap;
}

.hs-hero {
  margin-top: 44px;
  padding: 0 18px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.hs-big {
  font-family: var(--serif);
  font-size: 76px;
  line-height: 0.96;
  letter-spacing: -0.02em;
  color: #f2faf7;
  white-space: nowrap;
}

.hs-lede {
  margin-top: 6px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  line-height: 1.22;
  color: rgba(234, 246, 242, 0.86);
}

.hs-grow {
  flex: 1 1 auto;
  min-height: 28px;
}

.hs-week {
  padding: 0 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hs-days {
  display: flex;
  margin: 0 -4px;
}

.hs-day {
  flex: 1 1 0;
  min-height: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.hs-mark {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hs-dot {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
}

.hs-wd {
  font-size: 11px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(234, 246, 242, 0.62);
}

.hs-day.is-tonight .hs-wd {
  font-weight: 600;
  color: #f2faf7;
}

.hs-caption {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.25;
}

.hs-link {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-right: -6px;
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: rgba(234, 246, 242, 0.92);
}

.hs-insight {
  margin-top: -2px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 21px;
  line-height: 1.24;
  color: #f2faf7;
}

.hs-glass {
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(30px) saturate(140%);
  backdrop-filter: blur(30px) saturate(140%);
}

.hs-nudge {
  margin: 18px 0 10px;
  min-height: 60px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 18px;
}

.hs-nudge__text {
  flex: 1 1 auto;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.25;
}

.hs-toggle {
  flex: none;
  width: 60px;
  height: 48px;
  margin: 0 8px 0 -10px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* On: the evening ivory (cta.ts at 25 min to bed) with a dark knob on the right */
.hs-toggle i {
  position: relative;
  display: block;
  width: 50px;
  height: 30px;
  border-radius: 15px;
  background: #b4b1a7;
}

.hs-toggle i::after {
  content: "";
  position: absolute;
  left: 23px;
  top: 3px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #04101c;
}

.hs-dock {
  padding-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hs-plan {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px 10px 18px;
}

.hs-plan__text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hs-plan__label {
  font-size: 10px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 1.76px;
  text-transform: uppercase;
  color: rgba(234, 246, 242, 0.74);
}

.hs-plan__line {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.25;
  color: #f2faf7;
}

.hs-plan__chev {
  color: rgba(234, 246, 242, 0.7);
}

/* The main action: the ivory pill, dimmed toward the ground 25 min before bed (cta.ts: #B4B1A7) */
.hs-cta {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  border-radius: 999px;
  background: #b4b1a7;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.005em;
  color: #04101c;
}

.hs-tabs {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 28px;
  display: flex;
  gap: 2px;
  padding: 6px;
  border-radius: 999px;
}

.hs-tab {
  flex: 1 1 0;
  height: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border-radius: 25px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  color: rgba(234, 246, 242, 0.6);
}

.hs-tab.is-on {
  background: rgba(255, 255, 255, 0.14);
  font-weight: 600;
  color: #f2faf7;
}

.hs-home {
  position: absolute;
  left: 50%;
  bottom: 8px;
  width: 134px;
  height: 5px;
  margin-left: -67px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.42);
}

@media (min-width: 760px) {
  .hero {
    padding-top: clamp(84px, 9vh, 116px);
    padding-bottom: 88px;
  }

  .hero__copy {
    max-width: 600px;
  }

  .hero h1 {
    font-size: clamp(3.25rem, 5.6vw, 5rem);
  }

  .lede {
    max-width: 520px;
    margin: 24px 0 36px;
    font-size: clamp(1.375rem, 1.9vw, 1.625rem);
  }

  .badges {
    flex-direction: row;
    flex-wrap: wrap;
    align-self: flex-start;
  }

  .badge {
    width: 196px;
  }

  .phone-stage {
    width: 320px;
    height: 669.2px;
    margin-top: 64px;
  }

  .phone-halo {
    inset: -90px;
    filter: blur(40px);
  }

  .phone {
    transform: none;
  }
}

@media (min-width: 980px) {
  .hero {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
  }

  .hero__copy {
    flex: 1 1 440px;
    max-width: 600px;
    align-self: auto;
    padding-bottom: 8px;
  }

  .phone-stage {
    margin-top: 0;
  }
}

/* Landing: sections */
.section {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  flex-direction: column;
}

.section h2 {
  font-size: 32px;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.steps-section {
  gap: 20px;
  padding-left: calc(var(--gutter) - 4px);
  padding-right: calc(var(--gutter) - 4px);
}

.steps-section h2 {
  padding: 0 4px;
}

.steps {
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.step {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px 22px;
}

.step__num {
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1;
  color: var(--ink-num);
}

.step h3 {
  margin-top: 4px;
  font-size: 28px;
  line-height: 1.1;
}

.step p {
  margin-top: 4px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-body);
  text-wrap: pretty;
}

.features-section {
  padding-top: 64px;
  gap: 24px;
}

.features {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
}

.feature {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.feature h3 {
  font-size: 22px;
  line-height: 1.15;
}

.feature p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-2);
  text-wrap: pretty;
}

.promise {
  padding-top: 72px;
  padding-bottom: 56px;
  align-items: flex-start;
  gap: 20px;
}

.section.promise h2 {
  max-width: 780px;
  font-size: 36px;
  line-height: 1.05;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.promise a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
}

@media (min-width: 760px) {
  .section h2 {
    font-size: 40px;
  }

  .steps-section {
    padding: 24px var(--gutter) 0;
    gap: 32px;
  }

  .steps-section h2 {
    padding: 0;
  }

  .steps {
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: 16px;
  }

  .step {
    padding: 32px;
  }

  .step h3 {
    font-size: 30px;
  }

  .features-section {
    padding-top: 112px;
    gap: 40px;
  }

  .features {
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
    gap: 44px 48px;
  }

  .feature h3 {
    font-size: 24px;
  }

  .promise {
    padding-top: 112px;
    padding-bottom: 112px;
    gap: 24px;
  }

  .section.promise h2 {
    font-size: clamp(2.25rem, 4vw, 3.5rem);
  }
}

/* Privacy and support: one readable column */
.doc {
  width: 100%;
  max-width: calc(640px + 2 * var(--gutter));
  margin: 0 auto;
  padding: clamp(96px, 14vw, 200px) var(--gutter) 96px;
  display: flex;
  flex-direction: column;
}

.doc h1 {
  font-size: clamp(2.75rem, 4.4vw, 4rem);
  line-height: 1;
  letter-spacing: -0.02em;
}

.doc h2 {
  font-size: 30px;
  line-height: 1.1;
}

.doc h3 {
  font-size: 24px;
  line-height: 1.15;
}

.doc p,
.doc li,
.doc dd {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-body);
  text-wrap: pretty;
}

.doc ul {
  padding: 0 0 0 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.doc li::marker {
  color: var(--ink-faint);
}

.doc .effective {
  margin-top: 16px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-faint);
}

.doc-section {
  margin-top: 56px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.doc-section--card {
  margin-top: 48px;
  gap: 12px;
  padding: 24px 22px;
}

.doc--support .doc-section {
  margin-top: 72px;
}

.doc--support .doc-section--card {
  margin-top: 48px;
  gap: 16px;
  padding: 24px 22px 28px;
}

.doc--support ul {
  gap: 6px;
}

.doc--support .doc-section.news {
  gap: 20px;
}

.contact-mail {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  align-self: flex-start;
  max-width: 100%;
  font-family: var(--serif);
  font-size: clamp(1.625rem, 7.4vw, 2rem);
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--ink-head);
  overflow-wrap: anywhere;
}

.contact-hint {
  margin-top: 8px;
}

.faq {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.faq > div {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.faq dt {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink-head);
}

.release {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px 22px;
}

@media (min-width: 760px) {
  .doc {
    padding-bottom: 120px;
  }

  .doc-section--card,
  .release {
    padding: 28px 32px;
  }

  .doc--support .doc-section--card {
    padding: 28px 32px 32px;
  }
}

/* 404 */
.lost {
  padding-bottom: 160px;
}

.lost p {
  margin-top: 24px;
}

.lost a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* Footer */
.site-footer {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 32px var(--gutter) 40px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.site-footer ul {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 24px;
  padding: 0;
  list-style: none;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
}

.site-footer a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.site-footer p {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-faint);
}

@media (min-width: 760px) {
  .site-footer {
    padding: 40px var(--gutter) 48px;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px 32px;
  }

  .site-footer ul {
    gap: 0 28px;
  }
}

/* Motion */
@keyframes glow {
  0% {
    opacity: 0.72;
  }
  100% {
    opacity: 1;
  }
}

@keyframes calm {
  0% {
    opacity: 0.84;
  }
  100% {
    opacity: 1;
  }
}

/* Reduce Motion: like the app, the curtain stops moving and keeps only a very slow opacity
   breathing. The videos are hidden and the still frame (the element's own background) shows. */
@media (prefers-reduced-motion: reduce) {
  .aurora video,
  .phone__aurora {
    display: none !important;
  }

  .aurora,
  .phone__still {
    animation: calm 18s ease-in-out infinite alternate;
  }

  .phone-halo {
    animation: none;
  }

  a {
    transition: none;
  }
}

/* The 404 page uses the still frame only */
.aurora--still video {
  display: none !important;
}

/* ------------------------------------------------------------------------------------------
   Motion and the demo video. No JavaScript anywhere: entrances are time based, scroll reveals
   use scroll-driven animations (browsers without them simply show everything), and the video
   window opens through :target. Everything moving sits inside "no-preference" so Reduce Motion
   keeps the calm still page.
   ------------------------------------------------------------------------------------------ */

/* Feature icons: small glass tiles */
.feature__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 6px;
  border-radius: 14px;
  color: #bff3df;
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
}

.feature,
.step {
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1), background-color 0.5s ease;
}

.feature:hover .feature__icon {
  color: #e8fff6;
  background: rgba(255, 255, 255, 0.16);
}

.step:hover {
  background-color: rgba(255, 255, 255, 0.16);
}

@media (hover: hover) {
  .step:hover {
    transform: translateY(-4px);
  }
}

/* Play button over the phone, in the app's own language: the cream pill with dark ink of the main button
   (#b4b1a7 on #04101c) and, once playing, the flat frosted glass chip. No borders, no shadows. It sits in the
   free space under the big number; the whole phone is the click target. */
.phone-play {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  /* percent padding is relative to the width: 75% of the width is about 36% of the stage height */
  padding-top: 75%;
  border-radius: 46px;
  color: #04101c;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.phone-play__pill {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 42px;
  padding: 0 19px 0 15px;
  border-radius: 999px;
  background: #b4b1a7;
  transition: background-color 0.3s ease, opacity 0.2s ease;
}

.phone-play__btn {
  display: grid;
  place-items: center;
}

.phone-play__label {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.005em;
  white-space: nowrap;
}

.phone-play:hover .phone-play__pill {
  background: #c4c1b7;
}

.phone-play:active .phone-play__pill {
  opacity: 0.75;
}

/* The demo plays on the phone's own screen. A hidden checkbox is the switch (no JavaScript, no URL change,
   no scroll jump): the label over the phone toggles it, and the video page in the frame only starts loading
   when the frame becomes visible. */
.demo-switch {
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
}

.phone__demo {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: none;
  background: #000;
}

.phone__demo iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
}

.phone__glare {
  z-index: 6;
}

.demo-switch:checked ~ .phone .phone__demo {
  display: block;
}

.demo-switch:focus-visible ~ .phone .phone-play .phone-play__pill {
  outline: 2px solid rgba(255, 255, 255, 0.85);
  outline-offset: 4px;
}

.phone-play .i-close,
.phone-play .t-close {
  display: none;
}

/* Playing: the overlay shrinks to one frosted glass chip with a close mark at the corner of the phone */
.demo-switch:checked ~ .phone .phone-play {
  inset: -12px -12px auto auto;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
}

.demo-switch:checked ~ .phone .phone-play .phone-play__pill {
  width: 44px;
  height: 44px;
  padding: 0;
  gap: 0;
  color: #f2faf7;
  background: rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(30px) saturate(140%);
  backdrop-filter: blur(30px) saturate(140%);
}

.demo-switch:checked ~ .phone .phone-play:hover .phone-play__pill {
  background: rgba(255, 255, 255, 0.24);
}

.demo-switch:checked ~ .phone .phone-play .i-play,
.demo-switch:checked ~ .phone .phone-play .t-open {
  display: none;
}

.demo-switch:checked ~ .phone .phone-play .i-close,
.demo-switch:checked ~ .phone .phone-play .t-close {
  display: block;
}

.demo-switch:checked ~ .phone .phone-play .phone-play__label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes rise {
    from {
      opacity: 0;
      transform: translateY(18px);
    }
  }

  @keyframes stage-in {
    from {
      opacity: 0;
      transform: translateY(46px) scale(0.97);
    }
  }

  @keyframes float {
    0%,
    100% {
      translate: 0 0;
    }
    50% {
      translate: 0 -9px;
    }
  }

  @keyframes breathe {
    from {
      opacity: 0.86;
    }
  }

  @keyframes fade {
    from {
      opacity: 0;
    }
  }

  @keyframes reveal {
    from {
      opacity: 0;
      transform: translateY(30px);
    }
  }

  /* Entrance: header, hero copy in turn, the phone rising last */
  .site-header {
    animation: fade 1.2s ease 0.1s backwards;
  }

  .hero h1,
  .hero .lede,
  .hero .badges,
  .hero__note {
    animation: rise 1s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
  }

  .hero .lede {
    animation-delay: 0.12s;
  }

  .hero .badges {
    animation-delay: 0.24s;
  }

  .hero__note {
    animation-delay: 0.34s;
  }

  .phone-stage {
    animation: stage-in 1.3s cubic-bezier(0.2, 0.7, 0.2, 1) 0.25s backwards;
  }

  /* The device drifts a few pixels, like it floats on the aurora */
  .phone {
    animation: float 9s ease-in-out 1.6s infinite;
  }

  .phone-play__pill {
    animation: breathe 3.6s ease-in-out 1.8s infinite alternate;
  }

  .demo-switch:checked ~ .phone .phone-play__pill {
    animation: none;
  }

  .demo-switch:checked ~ .phone .phone__demo {
    animation: fade 0.5s ease;
  }

  /* Scroll reveals, only where the browser can drive animations by scroll position */
  @supports (animation-timeline: view()) {
    .section:not(.promise) h2,
    .step,
    .feature {
      animation: reveal linear both;
      animation-timeline: view();
      animation-range: entry 4% entry 52%;
    }

    .step:nth-child(2),
    .feature:nth-child(2n) {
      animation-range: entry 10% entry 58%;
    }

    .step:nth-child(3),
    .feature:nth-child(3n) {
      animation-range: entry 16% entry 64%;
    }
  }
}

/* Store badges: Apple's and Google's own artwork, unaltered (height only), with their clear space. The App
   Store badge links to the listing (it works once the app is released). Google Play is not live yet: the
   badge is not a link and a small "coming soon" caption sits right under it, never over it. */
.badges {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  align-self: flex-start;
  gap: 14px 18px;
}

.store {
  position: relative;
  display: inline-flex;
  align-items: center;
  border-radius: 9px;
}

.store img {
  display: block;
  height: 44px;
  width: auto;
}

.store:not(.store--soon) {
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.2s ease;
}

.store:not(.store--soon):hover {
  transform: translateY(-2px);
}

.store:not(.store--soon):active {
  opacity: 0.8;
}

.store--soon {
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: default;
}

/* The caption sits right under its badge and is centred on it, so it reads as part of the same item */
.store__tag {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
  white-space: nowrap;
}