/* Shared by the landing pages only. index.html carries its own styles and
   stays a single self-contained file. */
:root{
  /* Same ground as the app, minus the marks — a visitor who lands here and
     clicks through should not feel they changed sites. The gesture layer
     stays in index.html; these pages are meant to be read. */
  --bg:#0a1620; --panel:#0e1d26; --line:#2b4552;
  --txt:#fff; --dim:#c9d6de; --dim2:#a5b8c4; --ink:#fff;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{margin:0;color:var(--txt);font-family:var(--sans);
  line-height:1.6;-webkit-font-smoothing:antialiased;
  background:var(--bg) fixed;
  background-image:
    radial-gradient(122% 80% at 50% 110%, rgba(40,92,90,.42) 0%, rgba(40,92,90,0) 62%),
    linear-gradient(180deg,#33465a 0%, #24404f 15%, #1b3746 36%,
                            #142c3a 55%, #17323c 77%, #22414a 100%);
  background-attachment:fixed}
.wrap{max-width:720px;margin:0 auto;padding:26px 20px 72px}
a{color:var(--txt)}
header.top{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:34px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:800;
  letter-spacing:4px;font-size:13px}
.brand svg{width:22px;height:22px;color:#fff}
.top nav{display:flex;gap:16px;font-size:12.5px;color:var(--dim2)}
.top nav a{color:var(--dim2);text-decoration:none}
.top nav a:hover{color:var(--txt)}
h1{font-size:clamp(30px,7vw,46px);line-height:1.08;letter-spacing:-1.2px;font-weight:800;margin:0 0 14px}
h2{font-size:clamp(20px,4.4vw,26px);letter-spacing:-.5px;font-weight:800;margin:44px 0 10px}
h3{font-size:16px;font-weight:750;margin:26px 0 6px}
p{color:var(--dim);margin:0 0 14px}
.lede{font-size:clamp(15px,3.4vw,18px);color:var(--dim)}
strong{color:var(--txt);font-weight:700}
ul{color:var(--dim);padding-left:20px}
li{margin:6px 0}

/* ---- the timer ---- */
.t{border:1px solid var(--line);border-radius:18px;padding:22px 20px 20px;margin:26px 0 8px;
  background:var(--panel);text-align:center;transition:background .2s}
.t.rest,.t.prep{background:#08171e}
.t-phase{font-size:11px;letter-spacing:3.4px;text-transform:uppercase;font-weight:800;color:var(--dim2)}
.t-clock{font-family:var(--mono);font-weight:800;letter-spacing:-4px;line-height:.9;
  font-size:clamp(66px,19vw,118px);font-variant-numeric:tabular-nums;margin:8px 0 2px}
.t.rest .t-clock,.t.prep .t-clock{color:#7e7e87}
.t.paused .t-clock{opacity:.45}
.t-left{font-size:12px;color:var(--dim2)}
.t-bar{height:8px;background:#ffffff14;border-radius:99px;overflow:hidden;margin:16px 0 18px;position:relative}
.t-bar i{position:absolute;inset:0 auto 0 0;background:#fff;width:0;transition:width .25s linear}
.t-ctrls{display:flex;gap:10px;justify-content:center}
.t-ctrls button{font-family:inherit;cursor:pointer;border:1px solid var(--line);background:#ffffff10;
  color:var(--txt);border-radius:13px;padding:14px 18px;font-weight:750;font-size:15px;min-width:112px}
.t-ctrls button.t-go{background:#fff;color:#000;border-color:#fff;font-weight:850}
.t-set{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:18px}
.t-set label{font-size:11px;letter-spacing:1.6px;text-transform:uppercase;color:var(--dim2);
  font-weight:800;display:flex;flex-direction:column;gap:6px;align-items:center}
.t-set input{width:88px;background:#ffffff0d;border:1px solid var(--line);border-radius:10px;
  padding:10px;color:var(--txt);font-family:var(--mono);font-size:16px;text-align:center}
.hint{font-size:12px;color:var(--dim2);text-align:center;margin-top:14px}

/* ---- call to action ---- */
.cta{border:1px solid var(--line);border-radius:18px;padding:22px;margin:38px 0 0;background:var(--panel)}
.cta .big{font-size:clamp(19px,4.4vw,24px);font-weight:800;letter-spacing:-.5px;margin-bottom:8px}
.btn{display:inline-block;background:#fff;color:#000;text-decoration:none;font-weight:850;
  border-radius:13px;padding:14px 22px;margin-top:8px}

/* ---- FAQ ---- */
details{border-top:1px solid var(--line);padding:14px 0}
details summary{cursor:pointer;font-weight:700;list-style:none;display:flex;justify-content:space-between;gap:14px}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+";color:var(--dim2);font-weight:800}
details[open] summary::after{content:"–"}
details p{margin:10px 0 0}

footer{border-top:1px solid var(--line);margin-top:52px;padding-top:22px;
  font-size:12.5px;color:var(--dim2);display:flex;gap:16px;flex-wrap:wrap}
footer a{color:var(--dim2);text-decoration:none}
footer a:hover{color:var(--txt)}

/* ---- terms and privacy ----
   Long-form legal text that is meant to be read on a phone: a wider
   measure than the marketing pages would use, and the two things that
   actually matter — the health disclaimer and the subscription caveat —
   given a box so they cannot be scrolled past. */
.legal main{max-width:64ch}
.legal h2{font-size:clamp(18px,4vw,22px);margin:38px 0 8px}
.legal h3{font-size:15px;margin:22px 0 6px}
.legal .updated{font-size:12px;letter-spacing:1.6px;text-transform:uppercase;
  font-weight:800;color:var(--dim2);margin:-6px 0 20px}
.legal .warn{border:1px solid #7d5545;border-left:3px solid #dd5238;border-radius:14px;
  background:rgba(120,58,40,.16);padding:4px 18px 14px;margin:26px 0}
.legal .warn h2{margin-top:20px}
.legal .callout{border:1px solid var(--line);border-radius:12px;background:var(--panel);
  padding:14px 16px;margin:18px 0}
.legal .warn p,.legal .callout p{color:var(--dim)}
.copyline{font-size:11.5px;color:var(--dim2);text-align:center;margin:18px 0 0}