/* Timesake beta page. Colours come from the app icon: the deep blue tile, the amber
   folder and the red second hand. System fonts only, so the page loads nothing from
   other sites. */

:root {
  --navy: #14224a;
  --blue: #2a5c9e;
  --amber: #f6b443;
  --red: #d94050;
  --ink: #1b2233;
  --muted: #5b6475;
  --line: #e2e6ee;
  --paper: #ffffff;
  --soft: #f4f6fa;
  --card: #ffffff;
  --focus: #2a5c9e;
  --radius: 18px;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #e8ecf4;
    --muted: #a3acbd;
    --line: #2b3346;
    --paper: #0f1424;
    --soft: #151c30;
    --card: #1a2238;
    --focus: #8fb5ee;
  }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 17px/1.6 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

.wrap { width: min(1080px, 100% - 32px); margin-inline: auto; }

h1, h2, h3 {
  font-family: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

h2 { font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.2rem); margin: 0 0 0.6em; }
h3 { font-size: 1.2rem; margin: 0.4em 0 0.5em; }

.intro { color: var(--muted); max-width: 46rem; margin: 0 0 2rem; }
.small { color: inherit; opacity: 0.8; font-size: 0.92rem; }

/* Hero */

.hero {
  color: #fff;
  background:
    radial-gradient(1100px 500px at 85% -10%, rgba(246, 180, 67, 0.22), transparent 60%),
    linear-gradient(180deg, #2a5c9e 0%, #14224a 78%);
  padding: clamp(48px, 8vw, 96px) 0 clamp(56px, 9vw, 110px);
}

.hero-inner { text-align: center; }

.hero-icon {
  width: clamp(112px, 16vw, 160px);
  margin: 0 auto 24px;
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.35));
}

.eyebrow {
  display: inline-block;
  margin: 0 0 18px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.hero h1 {
  font-size: clamp(3rem, 2rem + 6vw, 5.6rem);
  margin: 0 0 0.25em;
  font-weight: 800;
}

.tagline {
  margin: -0.2em 0 0.9em;
  color: var(--amber);
  font-family: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: clamp(1.2rem, 1rem + 1vw, 1.6rem);
  font-weight: 700;
  letter-spacing: 0.01em;
}

.lead {
  font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.65rem);
  font-weight: 600;
  max-width: 38rem;
  margin: 0 auto 0.8em;
}

.sub { max-width: 40rem; margin: 0 auto 2rem; opacity: 0.88; }

.actions { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 0; }

.button {
  display: inline-block;
  padding: 14px 28px;
  border: 0;
  border-radius: 999px;
  background: var(--amber);
  color: #1d1a10;
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.button:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22); }
.button:disabled { opacity: 0.6; cursor: progress; transform: none; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
.hero :focus-visible { outline-color: #fff; }

/* How it works */

section { padding: clamp(56px, 8vw, 96px) 0; }
.wrap.how, .wrap.split, .wrap.join, .wrap.faq { padding-inline: 0; }

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px;
}

.card p { margin: 0; color: var(--muted); }

.num {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--amber);
  font-weight: 800;
}

@media (prefers-color-scheme: dark) { .num { background: var(--blue); color: #fff; } }

/* Screenshots */

.shots { background: var(--soft); }

.shot-row {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: clamp(24px, 5vw, 64px);
  align-items: center;
  justify-content: center;
}

.phone img {
  border-radius: 38px;
  box-shadow: 0 24px 50px rgba(20, 34, 74, 0.22), 0 0 0 8px #1b1f2b;
  background: #f2f2f7;
}

.watches { display: flex; flex-wrap: wrap; gap: 28px; justify-content: center; }

.watch img {
  width: 184px;
  border-radius: 44px;
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.28), 0 0 0 9px #22252e;
  background: #000;
}

figure { margin: 0; }

/* Live timers drawn over the screenshots so all three count up together. Positions and
   sizes are fractions of each screenshot, so they stay in place at any width. Font sizes
   use the screenshot's width (cqw), matching the app's point sizes. */
.screen { position: relative; container-type: inline-size; }
.screen img { width: 100%; }
.live {
  position: absolute;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  line-height: 1;
  white-space: nowrap;
  font-family: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
.live-phone-timer {
  left: 26.53%; top: 28.6%; width: 46.43%; height: 5.61%;
  justify-content: center;
  background: #fffeff; color: #000;
  font-size: 12.94cqw; font-weight: 300;
}
.live-phone-row, .live-phone-total {
  justify-content: flex-end;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  font-size: 4.23cqw;
}
.live-phone-row { left: 79.6%; top: 52.94%; width: 11.81%; height: 2.21%; padding-right: 0.7%; background: #fffeff; color: #000; }
.live-phone-total { left: 72.97%; top: 47.75%; width: 18.36%; height: 2.14%; padding-right: 0.7%; background: #f4f4f8; color: #8e8e93; font-weight: 600; }
.live-watch-timer {
  left: 21.74%; top: 40.18%; width: 57.07%; height: 12.5%;
  justify-content: center;
  background: #000; color: #fff;
  font-size: 14.5cqw; font-weight: 500;
}
.live-complication {
  left: 64.67%; top: 50.45%; width: 18.48%; height: 5.36%;
  justify-content: center;
  background: #000; color: #fff;
  font-size: 6.15cqw; font-weight: 600;
}
figcaption { margin-top: 22px; font-size: 0.95rem; color: var(--muted); text-align: center; max-width: 24rem; margin-inline: auto; }
.watch figcaption { max-width: 184px; }

@media (max-width: 760px) {
  .shot-row { grid-template-columns: 1fr; }
  .phone { max-width: 300px; margin: 0 auto; }
}

/* Two column prose */

.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(32px, 5vw, 64px);
}

.split p { color: var(--muted); }
.split h2 { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.8rem); }

.testers { background: var(--navy); color: #fff; }
.testers p { color: rgba(255, 255, 255, 0.82); }

/* Who's behind this */

.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 46rem) 300px;
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}

.about-body { max-width: 46rem; }
/* The photo's top lines up with the first paragraph. */
.about-body > p:first-child { margin-top: 0; }

.portrait img {
  width: 100%;
  border-radius: var(--radius);
  box-shadow: 0 18px 40px rgba(20, 34, 74, 0.18);
}

@media (max-width: 760px) {
  .about-grid { grid-template-columns: 1fr; }
  .portrait { max-width: 280px; }
}
.about-body p { color: var(--muted); }
.about-body .about-lead { color: var(--ink); font-size: 1.15rem; }
.about-body a { color: var(--blue); text-underline-offset: 3px; }
@media (prefers-color-scheme: dark) { .about-body a { color: var(--focus); } }

/* Form */

.form {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(20px, 4vw, 36px);
  max-width: 760px;
}

.row { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 20px; }

.field { display: block; margin: 0 0 20px; border: 0; padding: 0; min-width: 0; }
.field > span, .field > legend { display: block; font-weight: 600; margin-bottom: 6px; padding: 0; }

input[type="text"], input[type="email"], select, textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
}

input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--focus); }

.choices { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.choices label, .check { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.check { margin: 4px 0 24px; }
input[type="radio"], input[type="checkbox"] { width: 18px; height: 18px; margin-top: 4px; accent-color: var(--blue); flex: none; }

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

.status { margin: 12px 0 0; padding: 12px 16px; border-radius: 10px; background: var(--soft); }
.status.ok { background: #e3f4e8; color: #17562b; }
.status.err { background: #fbe4e6; color: #7d1622; }
@media (prefers-color-scheme: dark) {
  .status.ok { background: #173523; color: #b8ecc6; }
  .status.err { background: #3d1820; color: #f6c2c8; }
}

/* Questions */

.faq details { border-top: 1px solid var(--line); padding: 16px 0; max-width: 760px; }
.faq details:last-of-type { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; font-weight: 600; font-size: 1.05rem; }
.faq p { color: var(--muted); margin: 10px 0 0; }

/* Footer */

.footer { border-top: 1px solid var(--line); padding: 28px 0 40px; color: var(--muted); font-size: 0.9rem; }