/* WootWatcher — shared styles
   Brand carried over from the Android app: Poppins, orange #FF5A00, green #387E3D. */

:root {
  --paper: #ffffff;
  --paper-2: #f6f3ef;
  --ink: #16130f;
  --ink-soft: #57514a;
  --line: #e5e0d9;
  --orange: #ff5a00;
  --green: #2f6b33;
  --radius: 18px;
  /* Font-independent on purpose: `ch` resolves against each element's own font, so a
     mono caption and a Poppins paragraph would get different widths and ragged right edges. */
  --measure: 43rem;
  --pad: clamp(1.25rem, 5vw, 3rem);
  --shell: 1180px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #121110;
    --paper-2: #1b1917;
    --ink: #f4f0ea;
    --ink-soft: #a49c92;
    --line: #2f2b26;
    --orange: #ff6b1a;
    --green: #6cc072;
  }
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Poppins, "Helvetica Neue", Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; display: block; }

a { color: inherit; }

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--pad);
}

/* ---------- type ---------- */

.display {
  font-size: clamp(2.6rem, 7.4vw, 5.25rem);
  font-weight: 800;
  line-height: 0.96;
  letter-spacing: -0.04em;
  margin: 0;
  text-wrap: balance;
}

h2 {
  font-size: clamp(1.7rem, 3.8vw, 2.6rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin: 0 0 0.75rem;
  text-wrap: balance;
}

h3 {
  font-size: 1.0625rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  margin: 0 0 0.35rem;
}

p { margin: 0 0 1rem; }

.lede {
  font-size: clamp(1.05rem, 1.9vw, 1.3rem);
  color: var(--ink-soft);
  max-width: 46ch;
  font-weight: 350;
}

/* The mono face marks anything the app evaluates as a rule: keywords, prices, times. */
.mono {
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

.eyebrow {
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--green);
  margin: 0 0 1rem;
  font-weight: 500;
}

/* ---------- header ---------- */

.masthead {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

.masthead__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 68px;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-decoration: none;
  margin-right: auto;
  font-size: 1.05rem;
}

.mark { width: 30px; height: 30px; flex: none; }

.masthead nav {
  display: flex;
  gap: 1.4rem;
  font-size: 0.92rem;
}

.masthead nav a {
  text-decoration: none;
  color: var(--ink-soft);
  padding: 0.35rem 0;
  border-bottom: 1.5px solid transparent;
}

.masthead nav a:hover { color: var(--ink); border-bottom-color: var(--orange); }

@media (max-width: 620px) {
  .masthead nav { display: none; }
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--orange);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  padding: 0.9rem 1.6rem;
  border-radius: 999px;
  border: 0;
  transition: transform 0.16s ease, filter 0.16s ease;
}

.btn:hover { transform: translateY(-2px); filter: brightness(1.06); }

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--line);
}

.btn--ghost:hover { border-color: var(--ink); filter: none; }

/* ---------- hero ---------- */

.hero { padding: clamp(3rem, 8vw, 6rem) 0 clamp(2.5rem, 6vw, 4rem); }

.hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}

.hero__note {
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin-top: 1.1rem;
}

@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; }
}

/* ---------- signature: the watcher rule card ---------- */

.rule {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem;
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.875rem;
}

.rule__head {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px dashed var(--line);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.7rem;
  color: var(--ink-soft);
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  flex: none;
  animation: pulse 2.4s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--green) 55%, transparent); }
  60%      { box-shadow: 0 0 0 8px transparent; }
}

.rule__row {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 0.75rem;
  padding: 0.55rem 0;
  align-items: start;
}

.rule__key { color: var(--ink-soft); font-size: 0.78rem; padding-top: 0.15rem; }

.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.chip {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.15rem 0.65rem;
  font-size: 0.8rem;
}

.chip--and { border-style: dashed; color: var(--ink-soft); }

.rule__match {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--line);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.rule__count { color: var(--green); font-weight: 600; }

.badge {
  background: var(--orange);
  color: #fff;
  border-radius: 999px;
  padding: 0.1rem 0.6rem;
  font-size: 0.78rem;
  font-weight: 600;
}

/* ---------- schedule strip (real worker times) ---------- */

.schedule {
  border-block: 1px solid var(--line);
  background: var(--paper-2);
  padding: clamp(2rem, 5vw, 3rem) 0;
}

.schedule__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 4vw, 3rem);
}

.slot__time {
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: clamp(1.5rem, 3.4vw, 2.25rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--orange);
}

.slot__label {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-soft);
  margin-top: 0.2rem;
}

@media (max-width: 620px) {
  .schedule__grid { grid-template-columns: 1fr; gap: 1.25rem; }
  .slot { display: flex; align-items: baseline; gap: 1rem; }
  .slot__label { margin-top: 0; }
}

/* ---------- sections ---------- */

.section { padding: clamp(3.5rem, 9vw, 6.5rem) 0; }

.section__head { max-width: 52ch; margin-bottom: clamp(2rem, 5vw, 3rem); }

/* ---------- screenshot placeholders ---------- */

.shots {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 260px));
  justify-content: start;
  gap: clamp(1rem, 3vw, 2rem);
}

.shot {
  aspect-ratio: 9 / 19.5;
  border: 2px dashed var(--line);
  border-radius: var(--radius);
  background: var(--paper-2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  text-align: center;
  padding: 1rem;
  color: var(--ink-soft);
}

.shot__slot {
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8rem;
  color: var(--ink);
}

.shot__hint { font-size: 0.72rem; letter-spacing: 0.04em; }

@media (max-width: 760px) {
  .shots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shots > :nth-child(3) { display: none; }
}

/* ---------- features ---------- */

/* Fixed 3 columns: there are six features, so every row fills exactly.
   An auto-fit track count would leave an empty cell showing the divider colour. */
.features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

@media (max-width: 900px) {
  .features { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .features { grid-template-columns: 1fr; }
}

.feature { background: var(--paper); padding: clamp(1.5rem, 3vw, 2rem); }

.feature p { color: var(--ink-soft); font-size: 0.94rem; margin: 0; }

.feature__tag {
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--green);
  display: block;
  margin-bottom: 0.85rem;
}

/* ---------- plans ---------- */

.plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
}

.plan {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2rem);
}

.plan--pro { border-color: var(--orange); border-width: 2px; }

.plan ul { list-style: none; margin: 1rem 0 0; padding: 0; }

.plan li {
  padding: 0.45rem 0 0.45rem 1.6rem;
  position: relative;
  font-size: 0.94rem;
  color: var(--ink-soft);
}

.plan li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.05em;
  width: 10px;
  height: 2px;
  background: var(--orange);
}

/* ---------- footer ---------- */

.footer {
  border-top: 1px solid var(--line);
  padding: clamp(2.5rem, 6vw, 4rem) 0 3rem;
  font-size: 0.9rem;
  color: var(--ink-soft);
}

.footer__top {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2.5rem;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2rem;
}

.footer nav { display: flex; flex-wrap: wrap; gap: 1.5rem; }

.footer nav a { text-decoration: none; }
.footer nav a:hover { color: var(--orange); }

.disclaimer {
  font-size: 0.82rem;
  line-height: 1.6;
  max-width: 72ch;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}

/* ---------- legal documents ---------- */

.doc { padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(3rem, 7vw, 5rem); }

/* Keep the document on the same shell as the masthead and footer so the logo, the
   nav and the body text all share one left edge, then cap each block at a readable
   measure. Capping the shell itself would re-centre it and break that alignment. */
.doc__inner { max-width: var(--shell); }

.doc__inner > * { max-width: var(--measure); }

.doc__meta {
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8rem;
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 1rem 0 2.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--line);
}

/* Numbering is real here: legal clauses are referenced by number. */
.doc section { margin-bottom: 2.5rem; counter-increment: clause; }

.doc section > h2 {
  font-size: 1.3rem;
  letter-spacing: -0.02em;
  display: flex;
  gap: 0.85rem;
  align-items: baseline;
  margin-bottom: 0.6rem;
}

.doc section > h2::before {
  content: counter(clause, decimal-leading-zero);
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--orange);
  flex: none;
}

.doc { counter-reset: clause; }

.doc p, .doc li { color: var(--ink-soft); }

.doc ul { padding-left: 1.1rem; margin: 0 0 1rem; }
.doc li { margin-bottom: 0.4rem; }

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

.doc a { color: var(--orange); }

.callout {
  background: var(--paper-2);
  border-left: 3px solid var(--orange);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1.1rem 1.35rem;
  margin: 0 0 1.5rem;
}

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

/* ---------- 404 ---------- */

.notfound {
  min-height: calc(100dvh - 68px);
  display: grid;
  place-content: center;
  text-align: center;
  padding: 3rem var(--pad) 5rem;
}

.notfound .display { font-size: clamp(4rem, 18vw, 9rem); }

.notfound__rule {
  display: inline-block;
  margin: 1.5rem auto 2rem;
  text-align: left;
  max-width: 30rem;
}

.notfound__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}

/* ---------- a11y ---------- */

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

.skip {
  position: absolute;
  left: -9999px;
}

.skip:focus {
  left: var(--pad);
  top: 0.5rem;
  z-index: 50;
  background: var(--ink);
  color: var(--paper);
  padding: 0.6rem 1rem;
  border-radius: 8px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}