:root{color-scheme:light;--bg:#FBFAF6;--surface:#FFFFFF;--surface-soft:#F4F6F1;--surf2:#F4F6F1;--surface-warm:#FBF6EE;--sage:#176B49;--dark:#0F4F35;--tint:#E6F1E8;--ink:#20292B;--mute:#747E76;--line:#E4EAE1;--cream:#FBF6ED;--peach:#FBE7DB;--lav:#F0EBF8;--coral:#D96D5C;--okbg:#E7F2E9;--ok:#276642;--red:#A4473D;--radius-card:22px;--radius-control:14px;
  --shadow-card:0 1px 2px rgba(22,47,32,.05),0 8px 22px -14px rgba(22,47,32,.16);
  --shadow-lift:0 2px 6px rgba(22,47,32,.06),0 16px 34px -18px rgba(22,47,32,.24);
  --shadow-float:0 -12px 40px rgba(20,35,24,.12);
  --ease:cubic-bezier(.22,.61,.36,1)}
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;background-color:var(--bg);background-image:linear-gradient(180deg,rgba(23,107,69,.13),rgba(23,107,69,.05) 32%,rgba(23,107,69,0) 60%);background-repeat:no-repeat;background-attachment:fixed;background-size:100% 100%;color:var(--ink);font-family:'DM Sans',system-ui,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
button,input,textarea,select{font:inherit}
button{-webkit-tap-highlight-color:transparent}
button:disabled{cursor:not-allowed;opacity:.58}
.serif{font-family:'Fraunces',Georgia,serif;font-weight:600 !important;letter-spacing:-.022em;line-height:1.08}
html,body{overflow-x:hidden}
:root{--page-x:20px;--section-gap:30px;--card-pad:18px;--nav-h:64px}
.navbtn{outline:none;border:0;background:transparent;-webkit-tap-highlight-color:transparent;min-height:56px}
.navbtn:focus,.navbtn:focus:not(:focus-visible){outline:none;box-shadow:none}
.navbtn:focus-visible{outline:none;background:var(--tint);border-radius:14px}
.pcard{padding:var(--card-pad)}
.psec{margin-top:var(--section-gap)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-card);box-shadow:var(--shadow-card);transition:box-shadow .25s var(--ease),transform .2s var(--ease),border-color .2s var(--ease)}
.surf2{background:var(--surface-soft)}
.surf-warm{background:var(--surface-warm)}
.btn-p,.btn-s,.btn-o{min-height:44px;border-radius:999px;font-weight:600;transition:background-color .18s var(--ease),border-color .18s var(--ease),box-shadow .2s var(--ease),transform .14s var(--ease);display:inline-flex;align-items:center;justify-content:center;gap:8px}
.btn-p{background:var(--sage);color:#fff;border:1px solid var(--sage);box-shadow:0 1px 1px rgba(15,79,53,.14),0 10px 22px -12px rgba(15,79,53,.6)}
.btn-p:hover{background:var(--dark);border-color:var(--dark)}
.btn-p:active,.btn-s:active,.btn-o:active{transform:scale(.978)}
.btn-s{background:var(--tint);color:var(--dark);border:1px solid transparent}
.btn-s:hover{background:#DCEBDD}
.btn-o{background:#fff;border:1px solid var(--line);color:var(--ink)}
.btn-o:hover{background:var(--surface-soft);border-color:#CCD6CC}
.btn-hero{min-height:54px;font-size:16px;letter-spacing:-.01em;border-radius:16px}
.txt-sage{color:var(--sage)}.txt-dark{color:var(--dark)}.txt-mute{color:var(--mute)}.bg-tint{background:var(--tint)}
.fade{animation:fade .34s var(--ease) both}
@keyframes fade{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.chk{width:22px;height:22px;border:1.5px solid #C5CEC5;border-radius:7px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;background:#fff;transition:background-color .16s,border-color .16s}
.chk.on{background:var(--sage);border-color:var(--sage)}
button.chk{position:relative}
button.chk::after{content:'';position:absolute;inset:-11px}
.step-txt{resize:none;overflow:hidden;line-height:1.4;min-height:24px;word-break:break-word;overflow-wrap:anywhere}
.step-ctl{opacity:.55;min-width:32px;min-height:32px;display:inline-flex;align-items:center;justify-content:center;border-radius:8px}
.step-ctl:hover,.step-ctl:focus-visible{opacity:1;background:var(--surface-soft)}
input,textarea,select{outline:none;color:var(--ink)}
.inp{width:100%;min-height:44px;border:1px solid var(--line);border-radius:var(--radius-control);padding:10px 12px;background:#fff;transition:border-color .15s,box-shadow .15s}
.inp:focus{border-color:var(--sage);box-shadow:0 0 0 3px rgba(23,107,69,.12)}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid rgba(23,107,69,.32);outline-offset:3px}
.sheet{position:fixed;inset:0;z-index:50;display:flex;align-items:flex-end;justify-content:center;background:rgba(25,35,28,.42);animation:fadein .2s ease both}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.sheet>div{width:100%;max-width:480px;max-height:min(90vh,800px);overflow:auto;padding:22px 20px calc(22px + env(safe-area-inset-bottom));border-radius:26px 26px 0 0;background:#fff;box-shadow:var(--shadow-float);animation:sheetup .3s var(--ease) both}
@keyframes sheetup{from{transform:translateY(26px);opacity:.6}to{transform:none;opacity:1}}
@media (min-width:700px){body{background:#EBEFE8}#root>div{background-color:var(--bg);background-image:linear-gradient(180deg,rgba(23,107,69,.12),rgba(23,107,69,.045) 32%,rgba(23,107,69,0) 60%);background-repeat:no-repeat;background-size:100% 100vh;box-shadow:0 0 0 1px rgba(20,35,24,.04),0 30px 80px -40px rgba(20,35,24,.2)}}
.onb{background:#FBF8F4;margin:0 -20px;padding-left:20px;padding-right:20px}
.spin{animation:sp 1.2s linear infinite}@keyframes sp{to{transform:rotate(360deg)}}
.pulse{animation:pl 1.6s ease-in-out infinite}@keyframes pl{50%{opacity:.4;transform:scale(.9)}}
.hscroll{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;margin:0 -20px;padding:0 20px 4px}
.hscroll::-webkit-scrollbar{display:none}
.sec{display:flex;justify-content:space-between;align-items:center;margin:var(--section-gap) 0 12px}
.sec>div{font-family:'Fraunces',serif;font-weight:600;font-size:21px;letter-spacing:-.018em}
.hero{background:linear-gradient(120deg,var(--cream) 0%,#F7F1E6 60%,var(--peach) 140%);border-radius:24px;position:relative;overflow:hidden}
.feature{background:radial-gradient(120% 90% at 100% 0%,rgba(251,231,219,.55) 0%,rgba(251,231,219,0) 55%),linear-gradient(168deg,#FFFFFF 0%,#FCF8F1 62%,#F4F6F1 100%);border:1px solid var(--line);border-radius:26px;padding:20px;box-shadow:0 2px 6px rgba(22,47,32,.05),0 24px 48px -26px rgba(22,47,32,.28)}
.ringcard{background:linear-gradient(135deg,#F2F7F1,var(--tint));border-radius:22px}
.pp-ring circle{transition:stroke-dashoffset .7s var(--ease)}
.reccard{background:linear-gradient(160deg,#fff 55%,var(--cream));border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow-card)}
.qa{border-radius:20px;transition:transform .15s var(--ease),box-shadow .2s var(--ease)}.qa:active,.press:active{transform:scale(.97)}
.press{transition:transform .15s var(--ease),box-shadow .22s var(--ease)}
@media (hover:hover){.card:hover{box-shadow:var(--shadow-lift)}.press:hover{transform:translateY(-1px)}.qa:hover{box-shadow:var(--shadow-lift)}}
.chip{font-size:11px;padding:3px 9px;border-radius:999px;white-space:nowrap;flex-shrink:0;font-weight:600;letter-spacing:.01em}
.chip-peach{background:var(--peach);color:#B4533F}.chip-coral{background:#FBE3DE;color:var(--coral)}
.chip-ok{background:var(--tint);color:var(--sage)}.chip-n{background:#F1F2EF;color:var(--mute)}
.banner{background:linear-gradient(110deg,var(--cream),var(--peach));border-radius:20px}
.overdue{background:linear-gradient(160deg,#FFF8F1,var(--peach));border:1px solid #F3D9CB;border-left:4px solid var(--coral);border-radius:20px}
.navbtn{position:relative}.navbtn[aria-current=page]::before{content:'';position:absolute;top:0;left:35%;right:35%;height:3px;border-radius:0 0 3px 3px;background:var(--sage)}
.chk.on{animation:pop .3s ease both}
.skel{position:relative;overflow:hidden;background:var(--surface-soft);border-radius:12px}
.skel::after{content:'';position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);animation:shim 1.3s infinite}
@keyframes shim{100%{transform:translateX(100%)}}
.cfwrap{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.cf{position:absolute;top:-10px;width:7px;height:11px;border-radius:2px;animation:cf 1.6s ease-in forwards}
@keyframes cf{to{transform:translateY(340px) rotate(540deg);opacity:0}}
.pop{animation:pop .5s cubic-bezier(.2,1.4,.4,1) both}@keyframes pop{from{transform:scale(.3);opacity:0}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto !important;animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}.cf{display:none}}