/* Saff — landing system. Light palette per docs/brand.md */
:root{
  --ground:#F1F3EE;
  --surface:#FFFFFF;
  --surface-2:#F7F9F4;
  --text:#0F1A14;
  --text-2:#3D4B42;
  --muted:#616F66;
  --rule:#DDE4D9;
  --rule-2:#C4D0C0;
  --accent:#A66200;   /* amber — SAVED only. never decoration. */
  --mint:#25714A;
  --sheen:rgba(37,113,74,.10);

  --serif:"Iowan Old Style","Charter","Bitstream Charter",Georgia,"Liberation Serif",serif;
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",system-ui,"Liberation Sans",sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,"Cascadia Mono","Liberation Mono",monospace;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--ground);
  background-image:radial-gradient(1100px 620px at 50% -10%, var(--sheen), transparent 70%);
  background-attachment:fixed;
  color:var(--text);
  font-family:var(--sans);
  font-size:16.5px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
  padding:0 24px 0;
}
.wrap{max-width:960px;margin:0 auto}
p{max-width:66ch}
a{color:var(--mint); text-decoration-color:var(--rule-2); text-underline-offset:3px}
a:hover{text-decoration-color:var(--mint)}
::selection{background:rgba(37,113,74,.16)}

/* ---------- ledger voice ---------- */
.eyebrow{
  font-family:var(--mono); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--mint); margin:0; font-weight:600;
}
.cap{
  font-family:var(--mono); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted);
}
.mono{font-family:var(--mono)}
.num{font-variant-numeric:tabular-nums}

/* ---------- the dot language ---------- */
.dot{
  width:16px; height:16px; border-radius:50%;
  border:1.5px solid var(--rule-2); background:transparent;
  flex:none; display:inline-block; position:relative; vertical-align:middle;
}
.dot.on{background:var(--mint); border-color:var(--mint)}
.dot.saved{background:var(--accent); border-color:var(--accent)}
.dot.savable{border-color:var(--accent); background:transparent}
.dot.open{border-color:var(--text)}
.dot.missed{border-color:#B4776F; background:transparent}
.dot.missed::after{
  content:""; position:absolute; left:50%; top:50%; width:14px; height:1.5px;
  background:#B4776F; transform:translate(-50%,-50%) rotate(-45deg);
}
.dot.excused{background:var(--muted); border-color:var(--muted)}
.dot.lg{width:22px; height:22px; border-width:2px}
.dot.sm{width:9px; height:9px; border-width:1px}
.dot.sm.missed::after{width:8px; height:1px}
.row{display:flex; gap:12px; align-items:center}
.row.lg{gap:16px}
.row.sm{gap:6px}

.pulse::after{
  content:""; position:absolute; inset:-5px; border-radius:50%;
  border:1.5px solid var(--accent); opacity:0;
  animation:ring 2.4s ease-out infinite;
}
@keyframes ring{0%{opacity:.7;transform:scale(.75)}70%{opacity:0;transform:scale(1.35)}100%{opacity:0}}

/* ---------- nav ---------- */
nav.top{
  display:flex; align-items:center; justify-content:space-between;
  padding:26px 0 0;
}
nav.top .brand{
  display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--text);
}
nav.top .brand .word{
  font-family:var(--serif); font-weight:600; font-size:21px; letter-spacing:-.02em;
}
nav.top .navlink{
  font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); text-decoration:none;
}
nav.top .navlink:hover{color:var(--mint)}

/* ---------- hero ---------- */
header.hero{padding:110px 0 0; text-align:left}
.mark{display:flex; align-items:baseline; gap:18px; flex-wrap:wrap}
.mark .word{
  font-family:var(--serif); font-weight:600; font-size:clamp(64px,11vw,116px);
  letter-spacing:-.045em; line-height:.9; margin:0;
}
.mark .ar{font-family:var(--serif); font-size:clamp(26px,4vw,40px); color:var(--mint); opacity:.85}
.hero .tag{
  font-family:var(--serif); font-weight:600; font-size:clamp(30px,5vw,46px);
  line-height:1.12; letter-spacing:-.02em; margin:34px 0 0; max-width:20ch; text-wrap:balance;
}
.hero .sub{color:var(--text-2); margin:20px 0 0; max-width:56ch; font-size:18px}

.cta-block{margin-top:40px; display:flex; align-items:center; gap:22px; flex-wrap:wrap}
.appstore{
  display:inline-flex; align-items:center; gap:12px;
  background:var(--text); color:var(--ground); text-decoration:none;
  border-radius:12px; padding:13px 24px 13px 20px;
  font-weight:600; font-size:16px; letter-spacing:-.01em;
  transition:transform .18s ease, opacity .18s ease;
}
.appstore:hover{transform:translateY(-1px); opacity:.92}
.appstore svg{flex:none}
.appstore .two{line-height:1.15; text-align:left}
.appstore .two small{
  display:block; font-family:var(--mono); font-size:9.5px; letter-spacing:.14em;
  text-transform:uppercase; font-weight:400; opacity:.72;
}
.soon{font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}

.heroline{
  margin-top:64px; padding:30px 0 28px;
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
  display:flex; align-items:flex-start; gap:48px; flex-wrap:wrap;
}
.heroline .streaknum{
  font-family:var(--serif); font-weight:600; font-size:40px;
  letter-spacing:-.03em; line-height:1; margin-top:10px;
}
.heroline .read{max-width:32ch; font-size:14.5px; color:var(--text-2); margin-top:9px; line-height:1.55}

/* hero dot entrance */
.heroline .row .dot{opacity:0; transform:scale(.4); animation:pop .5s cubic-bezier(.34,1.4,.5,1) forwards}
.heroline .row .dot:nth-child(1){animation-delay:.25s}
.heroline .row .dot:nth-child(2){animation-delay:.42s}
.heroline .row .dot:nth-child(3){animation-delay:.59s}
.heroline .row .dot:nth-child(4){animation-delay:.9s}
.heroline .row .dot:nth-child(5){animation-delay:1.12s}
@keyframes pop{to{opacity:1; transform:scale(1)}}

@media (prefers-reduced-motion: reduce){
  .heroline .row .dot{animation:none; opacity:1; transform:none}
  .pulse::after{animation:none; opacity:0}
  *{animation-duration:.001s !important; transition-duration:.001s !important}
}

/* ---------- sections ---------- */
.sec{border-top:1px solid var(--rule); padding-top:20px; margin-top:110px}
.sec > h2{
  font-family:var(--serif); font-weight:600; font-size:clamp(28px,4.2vw,40px);
  line-height:1.1; letter-spacing:-.02em; margin:14px 0 0; text-wrap:balance;
}
.sec > .lede{color:var(--text-2); font-size:18px; margin:16px 0 0; max-width:58ch}
h3{
  font-family:var(--serif); font-weight:600; font-size:22px;
  letter-spacing:-.01em; margin:44px 0 8px; text-wrap:balance;
}

.grid2{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:2px; margin-top:36px}
.blk{border:1px solid var(--rule); padding:22px; background:transparent}
.blk h5{
  font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--mint); margin:0 0 10px; font-weight:600;
}
.blk p{margin:0; font-size:14.5px; color:var(--text-2); line-height:1.6}

/* days ledger (streak mechanic) */
.days{margin-top:36px; border-top:1px solid var(--rule)}
.day{
  display:grid; grid-template-columns:120px auto 1fr; gap:24px; align-items:center;
  padding:16px 0; border-bottom:1px solid var(--rule);
}
.day .dl{font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}
.day .note{font-size:14px; color:var(--text-2); text-align:right}
@media (max-width:640px){
  .day{grid-template-columns:88px auto; grid-template-rows:auto auto; gap:8px 16px}
  .day .note{grid-column:1 / -1; text-align:left}
}

/* ---------- the save (amber lives here, only here) ---------- */
.save{
  margin-top:120px; border-radius:20px;
  background:var(--surface);
  border:1px solid var(--rule);
  border-top:2px solid var(--accent);
  padding:clamp(36px,6vw,72px);
  box-shadow:0 20px 50px -24px rgba(10,26,20,.18);
}
.save .eyebrow{color:var(--accent)}
.save h2{
  font-family:var(--serif); font-weight:600; font-size:clamp(32px,5.4vw,52px);
  line-height:1.06; letter-spacing:-.02em; margin:16px 0 0; text-wrap:balance;
}
.save .lede{color:var(--text-2); font-size:18px; margin:18px 0 0; max-width:56ch}
.save .stage{
  margin:44px 0 0; padding:34px 0 30px;
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:22px;
}
.save .stage .rowclosed{
  font-family:var(--serif); font-weight:600; font-size:clamp(24px,3.6vw,32px);
  letter-spacing:-.02em; line-height:1.15; margin:0;
}
.save .stage .capline{font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}
.save .stage .countdown{
  font-family:var(--mono); font-size:26px; letter-spacing:-.01em;
  color:var(--accent); font-variant-numeric:tabular-nums;
}
.save .honest{margin-top:32px; font-size:15px; color:var(--text-2); max-width:58ch}
.save .honest strong{color:var(--text); font-weight:600}
.save .amberword{color:var(--accent)}

/* ---------- circles ---------- */
.circle-list{margin-top:36px; border-top:1px solid var(--rule); max-width:560px}
.member{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:15px 0; border-bottom:1px solid var(--rule);
}
.member .who{display:flex; align-items:center; gap:14px; min-width:0}
.member .av{
  width:34px; height:34px; border-radius:50%; background:var(--surface-2);
  border:1px solid var(--rule-2); display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:11px; font-weight:600; color:var(--text-2); flex:none;
}
.member .nm{font-size:15px; font-weight:600; letter-spacing:-.01em}
.member .st{font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-top:1px}

/* ---------- qaza ---------- */
.ledger{
  margin-top:36px; max-width:460px; border:1px solid var(--rule);
  background:var(--surface); border-radius:14px; padding:26px 28px;
}
.ledger .lg-count{
  font-family:var(--serif); font-weight:600; font-size:44px; letter-spacing:-.03em;
  line-height:1; margin-top:10px; font-variant-numeric:tabular-nums;
}
.ledger .lg-delta{font-family:var(--mono); font-size:13px; color:var(--mint); margin-top:12px; font-variant-numeric:tabular-nums}
.ledger .lg-note{font-size:13.5px; color:var(--muted); margin-top:14px; line-height:1.5}

/* ---------- pricing ---------- */
.pricing{ text-align:center; padding-top:20px }
.pricing .line{
  font-family:var(--serif); font-weight:600; font-style:italic;
  font-size:clamp(24px,4vw,36px); letter-spacing:-.015em; line-height:1.2;
  margin:26px auto 0; max-width:24ch; text-wrap:balance;
}
.pricing .detail{color:var(--text-2); margin:22px auto 0; max-width:52ch; font-size:15.5px}

/* ---------- final cta ---------- */
.final{
  margin-top:120px; padding:100px 0 110px; text-align:center;
  border-top:1px solid var(--rule);
}
.final .bigrow{display:flex; justify-content:center}
.final h2{
  font-family:var(--serif); font-weight:600; font-size:clamp(34px,6vw,56px);
  letter-spacing:-.025em; line-height:1.05; margin:34px 0 0; text-wrap:balance;
}
.final .sub{color:var(--text-2); margin:16px auto 0; max-width:44ch}
.final .cta-block{justify-content:center}

/* ---------- footer ---------- */
footer{
  border-top:1px solid var(--rule); padding:28px 0 48px; margin-top:0;
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
}
footer .fmark{display:flex; align-items:center; gap:12px}
footer .fword{font-family:var(--serif); font-weight:600; font-size:16px; letter-spacing:-.02em}
footer .flinks{display:flex; gap:26px; flex-wrap:wrap}
footer a{
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); text-decoration:none;
}
footer a:hover{color:var(--mint)}

/* ---------- document pages (privacy / terms) ---------- */
.doc{padding:70px 0 0}
.doc h1{
  font-family:var(--serif); font-weight:600; font-size:clamp(34px,5.5vw,52px);
  letter-spacing:-.025em; line-height:1.05; margin:16px 0 0;
}
.doc .meta{
  font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); margin-top:18px;
}
.doc hr{border:0; border-top:1px solid var(--rule); margin:44px 0}
.doc h2{
  font-family:var(--serif); font-weight:600; font-size:26px;
  letter-spacing:-.015em; margin:56px 0 12px; text-wrap:balance;
}
.doc p, .doc li{color:var(--text-2); font-size:16px; line-height:1.7}
.doc p strong, .doc li strong{color:var(--text)}
.doc ul{padding-left:22px}
.doc li{margin:8px 0}
.doc .callout{
  border:1px solid var(--rule); border-left:2px solid var(--mint);
  background:var(--surface); border-radius:0 10px 10px 0;
  padding:18px 22px; margin-top:28px;
}
.doc .callout p{margin:0}
.doc .contact{
  font-family:var(--serif); font-weight:600; font-size:22px; letter-spacing:-.01em;
}