:root {
  --bg: #607d8b;        /* Blue Grey 500 */
  --dark: #263238;      /* Blue Grey 900 */
  --dark-soft: #37474f; /* Blue Grey 800 */
  --white: #ffffff;
  --white-soft: rgba(255, 255, 255, 0.88);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* No fixed `height: 100%` here — that would make the flex body a viewport-tall
   container and clip the top of any page taller than the viewport. `min-height:
   100vh` on body (below) centers short pages yet grows for tall ones. */
html, body { overflow-x: hidden; }

body {
  background: var(--bg);
  color: var(--white);
  font-family: "Montserrat", system-ui, sans-serif;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8vh 28px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

main {
  width: 100%;
  max-width: 660px;
  animation: rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  main { animation: none; }
}

.wordmark {
  font-weight: 900;
  font-size: clamp(2.4rem, 13vw, 7rem);
  line-height: 0.95;
  letter-spacing: 0.01em;
  color: var(--white);
  margin-bottom: 0.85rem;
}

/* Small-caps treatment for mixed-case product titles (e.g. the alarm page). */
.wordmark.smallcaps {
  font-variant-caps: small-caps;
}

/* Group the wordmark + tagline and size the box to the wordmark, so the tagline
   (subtitle) spans exactly the title's width — even where the large wordmark is
   wider than the body column (no max-width cap, matching the title's own bleed). */
.brand {
  width: fit-content;
}

.tagline {
  margin-bottom: 2.6rem;
  overflow: hidden;
}

/* Home page only: fill the .brand box (sized to the wordmark) without letting the
   long tagline text widen it — width:0 keeps it out of the box's intrinsic sizing,
   min-width:100% stretches it back to the box width at layout time. (Scoped to
   .brand so it doesn't push other pages' columns wider than the viewport.) */
.brand .tagline {
  width: 0;
  min-width: 100%;
}

.tagline-track {
  font-weight: 600;
  font-size: clamp(0.78rem, 1.9vw, 0.92rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dark);
  white-space: nowrap;
  display: inline-block;
}

/* Static by default. tagline.js adds `.is-scrolling` only when the text is wider
   than its column, so a tagline that fits stays still while a longer one scrolls
   (two identical copies → seamless -50% loop). */
.tagline-track .seg { padding-right: 0; }
.tagline-track .dup { display: none; }

.tagline-track.is-scrolling { animation: marquee 16s linear infinite; }
.tagline-track.is-scrolling .seg { padding-right: 2.4rem; }
.tagline-track.is-scrolling .dup { display: inline-block; }

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Reduced motion: never animate; wrap so the whole tagline stays visible.
   (tagline.js also skips `.is-scrolling` under this preference.) */
@media (prefers-reduced-motion: reduce) {
  .tagline-track { white-space: normal; animation: none; }
}

.body-copy p {
  font-family: "Hanken Grotesk", "Montserrat", system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(1.02rem, 2.45vw, 1.2rem);
  line-height: 1.58;
  color: var(--white-soft);
  text-wrap: pretty;
  max-width: 58ch;
}

.body-copy p + p {
  margin-top: 1.1rem;
}

.contact {
  margin-top: 3.2rem;
  padding-top: 2.2rem;
  border-top: 1px solid rgba(38, 50, 56, 0.45);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.contact .label {
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--dark);
}

.contact a {
  font-family: "Hanken Grotesk", "Montserrat", system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(1.15rem, 3.2vw, 1.5rem);
  color: var(--white);
  text-decoration: none;
  width: fit-content;
  border-bottom: 2px solid transparent;
  transition: border-color 0.2s ease, opacity 0.2s ease;
}

.contact a:hover {
  border-bottom-color: var(--white);
}

/* ---------------------------------------------------------------------------
   Product page — app header (icon left of title), feature list, "coming soon".
   --------------------------------------------------------------------------- */
.app-header {
  display: flex;
  align-items: flex-start;   /* icon top-aligned with the title */
  gap: 1.4rem;
  margin-bottom: 0.85rem;
}

/* min-width:0 lets the title wrap within the space left by the icon instead of
   forcing the header (and the whole column) wider than the viewport. */
.app-header .wordmark {
  margin-bottom: 0;
  min-width: 0;
  /* Pull the title up by its top leading so the icon top (aligned to flex-start)
     lines up with the visible letter tops rather than the blank line-box space
     above them. The em here is the title's own font-size, so this scales with the
     responsive clamp. ~0.13em ≈ Montserrat's cap-to-ascent gap at line-height .95.
     (Progressive enhancement below for browsers with text-box-trim.) */
  margin-top: -0.13em;
}

@supports (text-box-edge: cap alphabetic) {
  .app-header .wordmark {
    margin-top: 0;
    text-box-trim: trim-start;
    text-box-edge: cap alphabetic;
  }
}

.app-icon {
  width: 124px;
  height: 124px;
  border-radius: 26px;
  display: block;
  flex-shrink: 0;
  box-shadow: 0 14px 34px rgba(38, 50, 56, 0.35);
}

@media (max-width: 560px) {
  /* Narrow screens: stack so the title gets its own full-width row below the icon. */
  .app-header { flex-direction: column; gap: 1rem; }
  .app-icon { width: 84px; height: 84px; border-radius: 18px; }
}

.feature-list {
  list-style: none;
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  max-width: 58ch;
}

.feature-list li {
  font-family: "Hanken Grotesk", "Montserrat", system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(0.98rem, 2.3vw, 1.1rem);
  line-height: 1.5;
  color: var(--white-soft);
  padding-left: 1.5rem;
  position: relative;
  text-wrap: pretty;
}

.feature-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--white-soft);
}

.note {
  display: inline-block;
  margin-top: 2.4rem;
  padding: 0.55rem 1rem;
  border-radius: 999px;
  background: rgba(38, 50, 56, 0.28);
  color: var(--white);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
}

/* Footer link row (Privacy · Contact · back). */
.footer-links {
  margin-top: 3rem;
  padding-top: 1.8rem;
  border-top: 1px solid rgba(38, 50, 56, 0.45);
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.4rem;
  font-family: "Hanken Grotesk", "Montserrat", system-ui, sans-serif;
}

.footer-links a {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--white);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: border-color 0.2s ease;
}

.footer-links a:hover { border-bottom-color: var(--white); }

/* ---------------------------------------------------------------------------
   Document layout — long-form pages (privacy policy). Top-aligned, readable.
   --------------------------------------------------------------------------- */
body.doc {
  display: block;
  align-items: stretch;
  justify-content: flex-start;
  padding: 7vh 28px 12vh;
}

.doc {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  font-family: "Hanken Grotesk", "Montserrat", system-ui, sans-serif;
  animation: rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@media (prefers-reduced-motion: reduce) {
  .doc { animation: none; }
}

.doc h1 {
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 900;
  font-size: clamp(1.9rem, 6vw, 2.8rem);
  line-height: 1.05;
  margin-bottom: 0.4rem;
}

.doc .updated {
  color: var(--dark);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  margin-bottom: 2rem;
}

.doc h2 {
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(1.15rem, 3vw, 1.4rem);
  color: var(--white);
  margin-top: 2.2rem;
  margin-bottom: 0.7rem;
}

.doc p,
.doc li {
  font-weight: 400;
  font-size: clamp(1rem, 2.3vw, 1.12rem);
  line-height: 1.62;
  color: var(--white-soft);
  text-wrap: pretty;
  /* Allow long permission strings in <code> to break instead of forcing
     horizontal overflow on narrow screens. */
  overflow-wrap: anywhere;
}

.doc p + p { margin-top: 1rem; }

.doc ul {
  margin: 0.6rem 0 0 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.doc strong { color: var(--white); font-weight: 600; }

.doc code {
  font-family: ui-monospace, "Cascadia Code", "Consolas", monospace;
  font-size: 0.86em;
  background: rgba(38, 50, 56, 0.4);
  color: var(--white);
  padding: 1px 6px;
  border-radius: 4px;
}

.doc a {
  color: var(--white);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: border-color 0.2s ease;
}

.doc a:hover { border-bottom-color: var(--white); }

.doc .doc-footer {
  margin-top: 3rem;
  padding-top: 1.8rem;
  border-top: 1px solid rgba(38, 50, 56, 0.45);
  font-size: 0.95rem;
}