/* sections.css: the website's sections, top to bottom: the hero and its
   Venn, "Why our clock", the steps with their phone outlines, changing
   your day, the promise, the HUD, and the questions. The base look
   (colours, type, cards, buttons) is in style.css. */

/* ---------- 1. Hero ---------- */

.hero { padding-top: 48px; }
.hero-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center; }
.brand { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 28px; }
.wordmark { margin: 0; font-size: 26px; font-weight: 700; letter-spacing: -0.5px; line-height: 1; }
.hero h1 { margin-bottom: 18px; }
.lede { font-size: 19px; line-height: 1.55; max-width: 34em; margin-bottom: 28px; }
.start { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-bottom: 18px; }
.start p { margin: 0; }
.quiet-link { font-size: 15px; color: var(--muted); }
/* YOUR TIME · THEIR TIME · OUR TIME */
.caps { margin: 28px 0 0; font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.venn { width: 100%; max-width: 440px; margin: 0 auto; }

/* The Venn plays once, about 2 seconds, then stays still: the circles
   drift together, the overlap turns yellow, then the hands appear. Without
   these rules (reduced motion) it's simply shown already overlapped. */
@media (prefers-reduced-motion: no-preference) {
  .venn-blue { animation: drift-left 1.3s cubic-bezier(0.3, 0.7, 0.2, 1) both; }
  .venn-rose { animation: drift-right 1.3s cubic-bezier(0.3, 0.7, 0.2, 1) both; }
  .venn-gold { animation: appear 0.5s ease-out 1.15s both; }
  .venn-hands { animation: appear 0.4s ease-out 1.6s both; }
}
@keyframes drift-left { from { transform: translateX(-46px); } }
@keyframes drift-right { from { transform: translateX(46px); } }
@keyframes appear { from { opacity: 0; } }

/* ---------- 2. Why our clock ---------- */

.prose { max-width: 720px; }
.card.prose { margin: 0 auto; padding: 40px 44px; font-size: 17px; }
/* "You share your routine, not your whereabouts.": larger, with an ink rule. */
.pull {
  margin: 24px 0; padding-left: 18px; border-left: 4px solid var(--ink);
  font-size: clamp(21px, 3vw, 25px); font-weight: 600; line-height: 1.35; letter-spacing: -0.3px;
}

/* ---------- 3. How it works, and 4. Changing your day ---------- */

.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 56px; }
.step, .split { display: grid; grid-template-columns: 1fr auto; gap: 48px; align-items: center; }
/* Desktop: every other step has its picture on the left. */
.step:nth-child(even) .phone { order: -1; }
.step-text { max-width: 30em; font-size: 17px; }
.step h3 { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; font-size: 24px; }
.step-n {
  flex: none; display: inline-grid; place-items: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--ink); color: var(--card); font-size: 16px; letter-spacing: 0;
}
.split .prose { font-size: 17px; }

/* A drawn phone: a rounded outline in thin ink with a small speaker slot,
   and the screenshot inside. Nothing borrowed from any real phone. */
.phone {
  position: relative; width: 264px; max-width: 72vw;
  padding: 30px 10px 12px;
  border: 2px solid var(--ink); border-radius: 40px;
  background: var(--card);
}
.phone::before {
  content: ''; position: absolute; top: 13px; left: 50%;
  width: 54px; height: 6px; margin-left: -27px;
  border-radius: 3px; background: var(--ink);
}
.phone img { width: 100%; border-radius: 26px; background: var(--ground); }

/* ---------- 5. Our promise ---------- */

.promise { list-style: none; margin: 0 0 24px; display: grid; gap: 14px; font-size: 17px; }
.promise li { padding-left: 22px; position: relative; }
.promise li::before { content: ''; position: absolute; left: 0; top: 0.65em; width: 8px; height: 8px; border-radius: 50%; background: var(--ink); }

/* ---------- 6. The HUD ---------- */

.huds { list-style: none; margin: 0 0 28px; padding: 0; display: flex; gap: 20px; flex-wrap: wrap; }
.huds li { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.huds img { width: 112px; height: 112px; border-radius: 20px; }

/* ---------- 7. Questions ---------- */

.q-group { margin-bottom: 36px; scroll-margin-top: 24px; }
.q-group h3 { margin-bottom: 8px; }
.q-group details { border-bottom: 1px solid var(--line); }
.q-group summary {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 14px 0; cursor: pointer; font-weight: 600; list-style: none;
}
.q-group summary::-webkit-details-marker { display: none; }
/* A plus that turns into a minus when the question is open. */
.q-group summary::after { content: '+'; flex: none; font-size: 22px; line-height: 1; font-weight: 500; }
.q-group details[open] summary::after { content: '−'; }
.q-group .a { padding: 0 0 16px; color: var(--ink); }
.q-group .a ul { margin: 0 0 12px; padding-left: 22px; }
.q-group .a p:last-child { margin-bottom: 0; }
.more { margin-top: 8px; }

/* ---------- Phone: one column ---------- */

@media (max-width: 820px) {
  .hero-grid, .step, .split { grid-template-columns: 1fr; gap: 28px; }
  /* The picture above its step, centred. */
  .step .phone, .split .phone { order: -1; justify-self: center; }
  .split .phone { order: 1; }
  .card.prose { padding: 28px 22px; font-size: 16px; }
  .lede { font-size: 17px; }
  .huds { justify-content: space-between; gap: 12px; }
  .huds img { width: 92px; height: 92px; }
}