@font-face{font-family:"Cormorant Garamond";src:url(fonts/cormorant.woff2) format("woff2");font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url(fonts/cormorant-italic.woff2) format("woff2");font-weight:300 700;font-style:italic;font-display:swap}
@font-face{font-family:"Outfit";src:url(fonts/outfit.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Inter";src:url(fonts/inter.woff2) format("woff2");font-weight:100 900;font-display:swap}
:root{--green:#3F5A4A;--green-deep:#334B3D;--sage:#DCE5D9;--ink:#2B2B2B;--paper:#FAF8F4;--card:#FFFDF9;--muted:#6F6A62;--line:rgba(43,43,43,.11);
--serif:"Cormorant Garamond",Georgia,serif;--ui:"Outfit","Inter",system-ui,sans-serif;--body:"Inter",system-ui,sans-serif}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.55 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
header.top{display:flex;align-items:center;justify-content:space-between;padding:16px 0}
header.top .logo svg{height:26px;width:auto;display:block}
.pill{font:500 13px var(--ui);padding:9px 16px;border-radius:999px;border:1px solid var(--line);text-decoration:none;background:var(--card)}
.hero{padding:22px 0 8px}
.eyebrow{display:inline-block;font:500 11.5px var(--ui);letter-spacing:.16em;text-transform:uppercase;color:var(--green);background:var(--sage);padding:6px 12px;border-radius:999px}
h1{font:500 44px/1.02 var(--serif);margin:16px 0 12px;letter-spacing:-.01em}
h1 em,h2 em{color:var(--green);font-style:italic}
.lede{color:var(--muted);margin:0 0 6px;max-width:30em}
.layout{display:grid;grid-template-columns:minmax(0,1fr);gap:22px;padding:18px 0 40px}
@media(min-width:900px){.layout{grid-template-columns:minmax(0,1fr) 360px;align-items:start}.preview-col{position:sticky;top:20px;order:2}h1{font-size:60px}}
/* phone preview */
.preview-col{display:flex;flex-direction:column;align-items:center}
.phone{width:min(62vw,250px);aspect-ratio:1179/2556;border-radius:38px;padding:7px;background:#1b1d1c;box-shadow:0 30px 60px -28px rgba(30,40,34,.45),0 0 0 1px rgba(0,0,0,.06);position:relative}
.phone canvas{width:100%;height:100%;border-radius:31px;display:block}
.phone .island{position:absolute;top:15px;left:50%;transform:translateX(-50%);width:28%;height:3.4%;background:#0b0b0b;border-radius:99px}
.phone .clock{position:absolute;left:0;right:0;top:9%;text-align:center;pointer-events:none;color:var(--clock,#2B2B2B)}
.phone .clock small{display:block;font:500 11px var(--ui);opacity:.8}
.phone .clock b{display:block;font:600 58px/1 var(--ui);letter-spacing:-.02em}
.phone-note{font:400 12px var(--body);color:var(--muted);margin-top:10px;text-align:center}
/* themes */
.themes{display:flex;gap:10px;flex-wrap:wrap}
.theme{appearance:none;border:0;background:none;padding:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;font:500 12px var(--ui);color:var(--muted)}
.theme i{width:46px;height:46px;border-radius:50%;display:block;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);position:relative}
.theme[aria-pressed=true]{color:var(--ink)}
.theme[aria-pressed=true] i{box-shadow:0 0 0 2px var(--paper),0 0 0 3.5px var(--green)}
.theme i:after{content:"";position:absolute;inset:14px;border-radius:50%;background:var(--dot)}
/* form */
form.card,.result{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:22px 18px}
.step{padding:4px 0 22px;border-bottom:1px solid var(--line);margin-bottom:22px}
.step:last-of-type{border:0;margin:0;padding-bottom:6px}
.step h2{font:500 26px/1.1 var(--serif);margin:0 0 4px;display:flex;gap:10px;align-items:baseline}
.step h2 span{font:500 12px var(--ui);color:var(--green);letter-spacing:.1em}
.hint{font-size:13.5px;color:var(--muted);margin:0 0 14px}
label.f{display:block;font:500 12.5px var(--ui);color:var(--muted);margin:12px 0 6px;letter-spacing:.02em}
input,select{font:400 16px var(--body);color:var(--ink);width:100%;padding:12px 13px;border-radius:12px;border:1px solid rgba(43,43,43,.16);background:#fff;min-height:46px;min-width:0;-webkit-appearance:none;appearance:none}
input[type=date]{display:block}
input:focus,select:focus{outline:2px solid rgba(63,90,74,.35);outline-offset:1px;border-color:var(--green)}
select{background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:32px}
.seg{display:grid;grid-template-columns:repeat(3,1fr);background:#F1EEE8;border-radius:14px;padding:4px;gap:4px}
.seg button{appearance:none;border:0;background:none;border-radius:11px;padding:11px 4px;font:500 14.5px var(--ui);color:var(--muted);cursor:pointer}
.seg button[aria-pressed=true]{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.08)}
.chips{display:flex;flex-wrap:wrap;gap:7px;margin:4px 0 14px}
.chip{appearance:none;font:500 13px var(--ui);padding:8px 12px;border-radius:999px;border:1px dashed rgba(63,90,74,.45);background:transparent;color:var(--green);cursor:pointer}
.chip[disabled]{opacity:.35;cursor:default}
.rot{border:1px solid var(--line);border-radius:16px;padding:12px;margin-bottom:10px;background:#fff}
.rot .row1{display:flex;gap:8px;align-items:center}
.rot .n{font:500 12px var(--ui);color:var(--green);width:14px;flex:none}
.rot .name{flex:1}
.rot .tools{display:flex;gap:2px}
.rot .tools button{appearance:none;border:0;background:none;width:30px;height:36px;border-radius:10px;color:var(--muted);font:400 17px var(--ui);cursor:pointer}
.rot .tools button:active{background:#F1EEE8}
.rot .dates{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;margin-top:10px}
.rot .dates label{font:500 11px var(--ui);color:var(--muted);display:block;margin-bottom:4px;letter-spacing:.04em}
.rot .dates input{font-size:15px;padding:10px 8px;min-height:42px}
.add{appearance:none;width:100%;padding:12px;border-radius:14px;border:1px dashed rgba(43,43,43,.2);background:none;font:500 14px var(--ui);color:var(--ink);cursor:pointer}
.check{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--muted);margin-top:12px}
.check input{width:20px;height:20px;min-height:0;flex:none;margin:1px 0 0;padding:0;border-radius:6px;-webkit-appearance:checkbox;appearance:auto;accent-color:var(--green)}
.btn{appearance:none;border:0;display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:16px 18px;border-radius:999px;background:var(--green);color:#fff;font:500 16px var(--ui);cursor:pointer;text-decoration:none;margin-top:16px}
.btn:active{background:var(--green-deep)}
.btn.ghost{background:#fff;color:var(--ink);border:1px solid var(--line)}
.btn[disabled]{opacity:.6}
.err{color:#9B4A3C;font-size:13.5px;margin:10px 0 0;min-height:1em}
.fine{font-size:12.5px;color:var(--muted);text-align:center;margin:12px 0 0}
/* result */
.result{display:none;margin-top:22px}
.result.on{display:block}
.result h2{font:500 32px/1.05 var(--serif);margin:0 0 6px}
.result .grid{display:grid;gap:10px}
.howto{margin:18px 0 0;padding:14px 16px;background:#F4F1EB;border-radius:14px;font-size:14px}
.howto ol{margin:6px 0 0;padding-left:20px}
.loop{display:flex;gap:12px;align-items:flex-start;margin-top:14px;padding:14px 16px;border:1px solid var(--line);border-radius:14px;font-size:14px}
.loop b{font-weight:600}
.upsell{margin-top:18px;padding:18px;border-radius:18px;background:var(--green);color:#F3F1EA}
.upsell h3{font:500 25px/1.1 var(--serif);margin:0 0 6px;color:#fff}
.upsell p{margin:0;font-size:14px;color:#D9E2D6}
.upsell a{display:inline-block;margin-top:12px;font:500 14px var(--ui);color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.5);padding-bottom:2px}
.faq{padding:8px 0 30px;max-width:680px}
.faq h2{font:500 30px var(--serif);margin:0 0 8px}
details{border-top:1px solid var(--line);padding:14px 0}
summary{font:500 15.5px var(--ui);cursor:pointer;list-style:none}
summary::-webkit-details-marker{display:none}
details p{margin:8px 0 0;color:var(--muted);font-size:14.5px}
footer{border-top:1px solid var(--line);padding:22px 0 36px;font-size:13px;color:var(--muted)}
footer .logo svg{height:20px;width:auto}
.wpimg{display:block;width:62%;max-width:240px;margin:16px auto 4px;border-radius:24px;box-shadow:0 20px 40px -24px rgba(30,40,34,.45)}
.wpcap{text-align:center;font-size:12.5px;color:var(--muted);margin:6px 0 12px}

/* auto-update */
.auto{margin-top:14px;padding:16px;border:1px solid var(--line);border-radius:16px;background:#fff}
.auto .tag{display:inline-block;font:500 11.5px var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--green);background:var(--sage);padding:5px 10px;border-radius:999px}
.auto h3{font:500 24px/1.1 var(--serif);margin:10px 0 4px}
.auto .hint{margin-bottom:6px}
.auto .btn{margin-top:10px}
.steps,.diy ol{margin:8px 0 0;padding-left:20px;font-size:14px}
.steps li,.diy li{margin:4px 0}
.diy{margin-top:12px;padding:10px 0 0;border-top:1px solid var(--line)}
.diy summary{font:500 14px var(--ui);color:var(--green)}
.auto code{font:500 12.5px ui-monospace,Menlo,monospace;background:#F4F1EB;padding:1px 5px;border-radius:5px;word-break:break-all}
.auto .fine{text-align:left}
.copied{min-height:18px;margin:8px 0 0;text-align:center;font-size:13px;color:var(--green)}
[hidden]{display:none!important}