:root {
  --bg: #FAF7F1;
  --card: #FFFFFF;
  --ink: #1C3038;
  --muted: #5C7078;
  --faint: #62757D;
  --line: #E7E0D3;
  --line-soft: #C9C0B0;
  --accent: #2F7E72;
  --accent-soft: rgba(47, 126, 114, 0.13);
  --tint: #E9F1EE;
  --tint-ink: #2F6C62;
  --sand: #F0E9DB;
  --sand-ink: #7A6B4E;
  --deep: #1C3038;
  --deep-ink: #F4F1E9;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Instrument Sans', system-ui, sans-serif;
  min-height: 100%;
}

.phone {
  max-width: 430px;
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: 28px 24px 24px;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand { display: flex; align-items: center; gap: 8px; }

.wordmark {
  font-family: 'Bricolage Grotesque', 'Trebuchet MS', sans-serif;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 2px;
}

.stepname { font-size: 12.5px; color: var(--muted); font-weight: 500; }

.progress { display: flex; gap: 6px; margin-top: 16px; }
.progress .seg {
  height: 5px;
  flex: 1 1 0;
  border-radius: 99px;
  background: var(--line);
  transition: background 0.3s ease;
}
.progress .seg.on { background: var(--accent); }

.screen {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
.screen.hidden { display: none; }

h1 {
  font-family: 'Bricolage Grotesque', 'Trebuchet MS', sans-serif;
  font-weight: 600;
  font-size: 28px;
  line-height: 1.15;
  margin: 26px 0 0;
}

p { font-size: 15px; line-height: 1.55; margin: 12px 0 0; }
.sub { color: var(--muted); }
.label { font-size: 14.5px; font-weight: 600; margin-top: 26px; }
.micro { font-size: 12.5px; color: var(--faint); text-align: center; margin-top: 12px; }

.tagrow { display: flex; margin-top: 26px; }
.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
}
.tag-g { background: var(--tint); color: var(--tint-ink); }
.tag-g strong { font-family: 'Bricolage Grotesque', 'Trebuchet MS', sans-serif; font-weight: 700; }
.tag-later { background: var(--sand); color: var(--sand-ink); }

.tagrow + h1 { margin-top: 14px; }

.choices { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }

.choice {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 16px;
  border-radius: 14px;
  background: var(--card);
  border: 1.5px solid var(--line);
  min-height: 44px;
  cursor: pointer;
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--ink);
  text-align: left;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.choice.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.choice .mark {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 1.5px solid var(--line-soft);
  background: var(--card);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.choice.square .mark { border-radius: 7px; }
.choice.selected .mark { background: var(--accent); border-color: var(--accent); }
.choice .mark svg { opacity: 0; }
.choice.selected .mark svg { opacity: 1; }

.choice .body { display: flex; flex-direction: column; gap: 2px; }
.choice .body small { font-size: 13px; font-weight: 400; color: var(--muted); }

.pills { display: flex; gap: 10px; margin-top: 14px; }
.pill {
  flex: 1 1 0;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  background: var(--card);
  color: var(--ink);
  border: 1.5px solid var(--line);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.pill.selected { background: var(--accent); color: #fff; border-color: var(--accent); }

.quote {
  border-radius: 16px;
  background: var(--deep);
  color: var(--deep-ink);
  padding: 20px;
  margin: 22px 0 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.quote span {
  font-family: 'Bricolage Grotesque', 'Trebuchet MS', sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.35;
}

.timerwrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin-top: 26px;
}
.timer {
  width: 148px;
  height: 148px;
  border-radius: 999px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  cursor: pointer;
  font: inherit;
  background: var(--card);
  color: var(--ink);
  border: 4px solid rgba(47, 126, 114, 0.35);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.timer.running { background: var(--accent); color: #fff; border-color: var(--accent); }
.timer.done { background: var(--tint); color: var(--tint-ink); border-color: var(--accent); }
.timer .time {
  font-family: 'Bricolage Grotesque', 'Trebuchet MS', sans-serif;
  font-size: 30px;
  font-weight: 700;
}
.timer .timerlabel { font-size: 12.5px; font-weight: 600; letter-spacing: 0.4px; }

.griprow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}
.griprow .micro { margin: 0; }
.dots { display: flex; gap: 8px; flex: 1 1 auto; justify-content: center; }
.dot {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  background: var(--card);
  color: var(--muted);
  border: 1.5px solid var(--line);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.dot.selected { background: var(--accent); color: #fff; border-color: var(--accent); }

.nextstep {
  border-radius: 16px;
  background: var(--card);
  border: 1.5px solid var(--line);
  padding: 18px;
  margin-top: 26px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.nextstep svg { flex-shrink: 0; margin-top: 2px; }
.nextstep-label { font-size: 13px; font-weight: 600; color: var(--muted); }
.nextstep-text { font-size: 15px; font-weight: 600; line-height: 1.4; margin-top: 4px; }

.spacer { flex: 1 1 24px; min-height: 24px; }

.cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  border-radius: 14px;
  border: none;
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: filter 0.15s ease;
}
.cta:hover { filter: brightness(1.06); }
.cta:active { filter: brightness(0.95); }

@media (max-width: 360px) {
  .phone { padding: 20px 16px 20px; }
  h1 { font-size: 24px; }
  .dot { width: 40px; height: 40px; }
}