/* Overtime — website styles
   Design language mirrors the app: warm cream paper, muted green accent,
   SF Rounded typography (ui-rounded), calm whitespace, soft rounded cards.
   Deliberately avoids the generic "AI" look (no Inter, no purple gradients,
   no 3-icon grids, no thick one-sided card borders). */

:root {
  --paper-top: #FCFBF8;
  --paper-bot: #F1EADF;
  --ink:       #221F1B;
  --ink-soft:  #6E665D;
  --accent:    #3A9E76;
  --accent-deep: #2E815F;
  --accent-soft: #9ED4BC;
  --card:      rgba(255, 255, 255, 0.66);
  --card-line: rgba(34, 31, 27, 0.07);
  --shadow:    0 18px 40px rgba(70, 60, 45, 0.10);
  --radius:    28px;
  --max:       880px;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: ui-rounded, "SF Pro Rounded", "Hiragino Maru Gothic ProN",
               -apple-system, "Segoe UI", system-ui, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(58,158,118,0.07), transparent 60%),
    linear-gradient(160deg, var(--paper-top), var(--paper-bot));
  background-attachment: fixed;
  min-height: 100vh;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; }

/* ---- header ---- */
.nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 26px 0 10px;
}
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--ink); }
.brand .mark { width: 26px; height: 26px; position: relative; flex: none; }
.brand b { font-weight: 700; font-size: 19px; letter-spacing: -0.01em; }
.nav a.text { color: var(--ink-soft); text-decoration: none; font-weight: 600; font-size: 15px; }
.nav a.text:hover { color: var(--accent-deep); }

/* ---- hero ---- */
.hero { text-align: center; padding: 30px 0 8px; }
.hero .circle { margin: 8px auto 30px; }
.hero h1 {
  font-size: clamp(34px, 6vw, 52px);
  line-height: 1.05; letter-spacing: -0.025em; font-weight: 700;
  margin: 0 0 14px;
}
.hero p.lead {
  font-size: clamp(17px, 2.4vw, 20px); color: var(--ink-soft);
  max-width: 30ch; margin: 0 auto 26px;
}
.accent { color: var(--accent-deep); }

.cta { display: inline-flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-weight: 700; font-size: 16px; text-decoration: none;
  padding: 14px 22px; border-radius: 999px; border: 1px solid transparent;
}
.btn-primary { background: var(--accent); color: #fff; box-shadow: 0 10px 24px rgba(58,158,118,0.28); }
.btn-primary:hover { background: var(--accent-deep); }
.btn-ghost { background: rgba(255,255,255,0.6); color: var(--ink); border-color: var(--card-line); }
.btn-ghost:hover { background: rgba(255,255,255,0.85); }
.note { color: var(--ink-soft); font-size: 14px; margin-top: 14px; }

/* ---- the live circle (mirrors the app's stamp button) ---- */
.circle { width: 232px; height: 232px; position: relative; }
.circle .disc {
  position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(60% 55% at 42% 38%, #ffffff, #EFE6D4);
  box-shadow: 0 22px 50px rgba(70,60,45,0.16), inset 0 1px 0 rgba(255,255,255,0.7);
}
.circle .ring {
  position: absolute; inset: -14px; border-radius: 50%;
  background: conic-gradient(from -80deg,
      rgba(58,158,118,0) 0deg,
      rgba(58,158,118,0.10) 70deg,
      rgba(58,158,118,0.40) 210deg,
      rgba(58,158,118,0.85) 320deg,
      rgba(58,158,118,0) 331deg);
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 11px), #000 calc(100% - 11px));
          mask: radial-gradient(closest-side, transparent calc(100% - 11px), #000 calc(100% - 11px));
  animation: spin 3s linear infinite;
}
.circle.small { width: 26px; height: 26px; }
.circle.small .ring {
  inset: -2px;
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
          mask: radial-gradient(closest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .circle .ring { animation: none; } }

/* ---- features ---- */
.section { padding: 56px 0; }
.section h2 {
  font-size: clamp(24px, 3.4vw, 30px); letter-spacing: -0.02em;
  margin: 0 0 6px; font-weight: 700;
}
.section .sub { color: var(--ink-soft); margin: 0 0 30px; font-size: 16px; }

/* editorial numbered list — no icon grid, no decorative dots */
.features { border-top: 1px solid var(--card-line); }
.feature {
  display: grid; grid-template-columns: 46px 1fr; gap: 20px;
  padding: 26px 2px; border-bottom: 1px solid var(--card-line);
  align-items: baseline;
}
.feature .num {
  font-variant-numeric: tabular-nums; font-weight: 700; font-size: 14px;
  color: var(--accent-deep); letter-spacing: 0.04em;
}
.feature h3 { margin: 0 0 6px; font-size: 19px; letter-spacing: -0.01em; }
.feature p  { margin: 0; color: var(--ink-soft); font-size: 16px; max-width: 56ch; }

/* App Store badge */
.badge {
  display: inline-flex; align-items: center; gap: 11px;
  background: #14110E; color: #fff; border-radius: 15px;
  padding: 11px 18px; text-decoration: none; border: 1px solid #14110E;
}
.badge:hover { background: #000; }
.badge svg { width: 23px; height: 23px; flex: none; }
.badge .b-top { font-size: 11px; line-height: 1; opacity: 0.82; letter-spacing: 0.02em; }
.badge .b-main { font-size: 19px; line-height: 1.15; font-weight: 600; letter-spacing: -0.01em; }

/* placeholder email shown until a real support address is set */
.ph { background: rgba(224,138,60,0.14); border-radius: 8px; padding: 1px 7px; color: #8a5a23; }

/* ---- privacy band ---- */
.band {
  text-align: center; background: var(--card); border: 1px solid var(--card-line);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 38px 28px;
}
.band h2 { margin: 0 0 8px; }
.band p { color: var(--ink-soft); max-width: 46ch; margin: 0 auto; }

/* ---- prose pages (privacy / imprint) ---- */
.prose {
  background: var(--card); border: 1px solid var(--card-line);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 34px 34px; margin: 18px 0 40px;
}
.prose h1 { font-size: 30px; letter-spacing: -0.02em; margin: 0 0 6px; }
.prose .updated { color: var(--ink-soft); font-size: 14px; margin: 0 0 22px; }
.prose h2 { font-size: 19px; margin: 26px 0 8px; }
.prose p, .prose li { color: #36322C; font-size: 16px; }
.prose a { color: var(--accent-deep); }
.placeholder { background: rgba(224,138,60,0.12); border-radius: 8px; padding: 1px 7px; }

/* ---- footer ---- */
footer {
  border-top: 1px solid var(--card-line); margin-top: 30px;
  padding: 26px 0 40px; color: var(--ink-soft); font-size: 14px;
  display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; justify-content: space-between;
}
footer a { color: var(--ink-soft); text-decoration: none; font-weight: 600; }
footer a:hover { color: var(--accent-deep); }
footer .links { display: flex; gap: 22px; flex-wrap: wrap; }