/* 咖錄 Kalu — platform styles. Light, clean, one olive accent. Brown lives only inside the logo mark. */
:root{
  --bg:#FFFFFF; --soft:#F6F7F3; --soft-2:#EEF0E6;
  --ink:#1E211A; --ink-2:#3B4035; --mute:#6A7062; --line:#E5E7DE; --line-2:#D6D9CC;
  --accent:#5E6630; --accent-2:#4C5326; --accent-soft:#EEF0E1; --accent-ink:#FFFFFF;
  --ok:#2F7A4F; --bad:#B23A2E; --warn:#9A6B00;
  --r:20px; --r-sm:12px;
  --sans:"DM Sans","Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,sans-serif;
  --zh:"Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,sans-serif;
  --mono:"DM Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html,body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.7 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{overflow-x:hidden}
h1,h2,h3,p{margin:0}
h1,h2,h3{font-family:var(--zh);font-weight:700;letter-spacing:-.01em;text-wrap:balance;line-height:1.25}
a{color:inherit}
img{max-width:100%;display:block}
.tnum{font-variant-numeric:tabular-nums}
.wrap{max-width:1160px;margin:0 auto;padding-inline:clamp(16px,4vw,40px)}
.kicker{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.lede{color:var(--ink-2);font-size:clamp(16px,1.6vw,18px);max-width:38em}
.mute{color:var(--mute)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}

/* header */
.top{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.9);-webkit-backdrop-filter:saturate(1.4) blur(12px);backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid transparent;transition:border-color .2s}
.top.scrolled{border-bottom-color:var(--line)}
.top .in{display:flex;align-items:center;gap:12px;min-height:64px}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;min-width:0}
.brand img{width:38px;height:auto;flex:none}
.brand b{font-family:var(--zh);font-size:19px;font-weight:700;letter-spacing:.02em}
.brand i{font-style:normal;font-size:14px;color:var(--mute);font-weight:500}
.top nav{margin-left:auto;display:flex;align-items:center;gap:2px}
.top nav a.opt{text-decoration:none;font-size:15px;color:var(--ink-2);padding:8px 12px;border-radius:999px}
.top nav a.opt:hover{background:var(--soft)}
@media (max-width:720px){.top nav a.opt{display:none}}
@media (max-width:380px){.top nav .btn.sm{padding:0 11px;font-size:13.5px}.brand i{display:none}}

/* account menu (我的帳號 ▾): same on the home page and 我的網站 */
.acct{position:relative}
.acct > button{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 8px 0 6px;border-radius:999px;border:1px solid var(--line-2);background:#fff;font:600 14px var(--sans);color:var(--ink);cursor:pointer}
.acct > button:hover{border-color:var(--ink-2)}
.acct .av{width:28px;height:28px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font-size:13px;font-weight:700}
.acct .chev{transition:transform .2s}
.acct .nm{max-width:12em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:420px){.acct .nm{max-width:7em}}
.acct.open .chev{transform:rotate(180deg)}
.menu{position:absolute;right:0;top:calc(100% + 8px);width:min(300px,calc(100vw - 32px));background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 24px 50px -20px rgba(30,33,26,.35);padding:8px;z-index:70;opacity:0;transform:translateY(-6px) scale(.98);transform-origin:top right;visibility:hidden;transition:opacity .15s,transform .15s,visibility 0s .15s}
.acct.open .menu{opacity:1;transform:none;visibility:visible;transition:opacity .18s,transform .18s}
.menu .me{padding:10px 12px 12px;border-bottom:1px solid var(--line);margin-bottom:6px;display:grid;gap:4px}
.menu .me b{font-size:14px;overflow-wrap:anywhere}
.menu .me span{font-size:12.5px;color:var(--mute)}
.menu a,.menu button.mi{display:flex;align-items:center;gap:10px;width:100%;min-height:42px;padding:0 12px;border:0;border-radius:12px;background:none;font:500 14.5px var(--sans);color:var(--ink);text-decoration:none;cursor:pointer;text-align:left}
.menu a:hover,.menu button.mi:hover{background:var(--soft)}
.menu a svg,.menu button svg{width:18px;height:18px;flex:none;color:var(--mute)}
.menu .sep{height:1px;background:var(--line);margin:6px 4px}
.menu .danger{color:var(--bad)}
.menu .now{background:var(--accent-soft);color:var(--accent-2);font-weight:700}
.menu .now svg{color:var(--accent)}
[hidden]{display:none!important}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 20px;border-radius:999px;border:1px solid var(--line-2);background:#fff;color:var(--ink);font:600 15px/1 var(--sans);text-decoration:none;cursor:pointer;white-space:nowrap;transition:background .15s,border-color .15s,transform .15s}
.btn:hover{border-color:var(--ink-2)}
.btn:active{transform:translateY(1px)}
.btn.solid{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.solid:hover{background:var(--accent-2);border-color:var(--accent-2)}
.btn.sm{min-height:38px;padding:0 14px;font-size:14px}
.btn.lg{min-height:54px;padding:0 26px;font-size:16px}
.btn[disabled]{opacity:.55;cursor:default}

/* small pieces */
.pill{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;padding:5px 12px;border-radius:999px;background:var(--soft);color:var(--ink-2);border:1px solid var(--line)}
.pill .d{width:7px;height:7px;border-radius:50%;background:var(--ok);flex:none}
.url{font-family:var(--mono);font-size:14px;letter-spacing:-.01em}
.url b{color:var(--accent);font-weight:500}
.soon{display:inline-flex;align-items:center;font-size:12px;font-weight:600;padding:2px 9px;border-radius:999px;background:#FFF6DB;color:var(--warn);border:1px solid #F1E2AE;vertical-align:middle;white-space:nowrap}

/* phone frame that holds a live template (iframe rendered at 390px, scaled down) */
.phone{--w:280px;--s:calc(var(--w) / 390px);width:var(--w);aspect-ratio:390/800;border-radius:34px;padding:9px;background:#fff;border:1px solid var(--line-2);box-shadow:0 30px 60px -30px rgba(30,33,26,.35),0 2px 6px rgba(30,33,26,.05);position:relative;flex:none}
.phone .scr{position:relative;width:100%;height:100%;border-radius:26px;overflow:hidden;background:var(--soft);isolation:isolate}
.phone iframe{position:absolute;top:0;left:0;width:390px;height:800px;border:0;transform-origin:0 0;background:#fff}
.phone .scr::after{content:"";position:absolute;inset:0;z-index:2}
.phone.live .scr::after{display:none}

/* sections */
section{scroll-margin-top:72px}
.sec{padding:clamp(64px,9vw,112px) 0}
.sec.alt{background:var(--soft)}
.sec-h{display:grid;gap:10px;max-width:720px;margin-bottom:clamp(28px,4vw,44px)}
.sec-h h2{font-size:clamp(28px,3.6vw,40px)}

/* footer */
.site{border-top:1px solid var(--line);padding:36px 0 calc(40px + env(safe-area-inset-bottom,0px));background:#fff}
.site .in{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.made{display:flex;align-items:center;gap:14px}
.made img{width:48px;height:auto;flex:none}
.made b{display:block;font-size:15px}
.made span{font-size:13.5px;color:var(--mute)}
.made .by{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}
.made .ae{width:16px;height:16px;flex:none;overflow:visible}
.made .ae rect,.made .ae path{fill:var(--ink)}
.made .ae .p{fill:#7C9BFF}
.site .fine{font-size:13.5px;color:var(--mute);display:flex;gap:16px;flex-wrap:wrap}
.site .fine a{color:var(--mute);text-decoration:none}
.site .fine a:hover{color:var(--ink)}

/* forms (signup + admin) */
label.f{display:grid;gap:7px;font-size:14.5px;min-width:0}
label.f > b{font-weight:600;color:var(--ink)}
label.f > b i{font-style:normal;color:var(--accent);margin-left:3px}
input,select,textarea{font:inherit;font-size:16px;color:var(--ink);background:#fff;border:1px solid var(--line-2);border-radius:var(--r-sm);min-height:48px;padding:10px 14px;width:100%;min-width:0;transition:border-color .15s,box-shadow .15s}
textarea{min-height:96px;resize:vertical;line-height:1.6}
input::placeholder,textarea::placeholder{color:#A2A799}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.hint{font-size:13px;color:var(--mute)}
.err{color:var(--bad);font-size:14px}.err:empty{display:none}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}

/* device preview (devices.js): laptop + phone with a live template inside */
.devices{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(18px,3vw,36px);align-items:end;min-width:0}
.dv-laptop{min-width:0}
.dv-laptop .lid{background:#1E211A;border-radius:16px 16px 4px 4px;padding:12px 12px 14px;position:relative;box-shadow:0 40px 70px -40px rgba(30,33,26,.55),0 0 0 1px rgba(30,33,26,.12)}
.dv-laptop .lid::before{content:"";position:absolute;top:4px;left:50%;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:#3B4035}
.dv-laptop .screen{aspect-ratio:1440/900;border-radius:3px}
.dv-laptop .base{height:14px;margin:0 -5%;background:linear-gradient(#E3E5DC,#BFC2B6);border-radius:0 0 14px 14px;position:relative}
.dv-laptop .base::before{content:"";position:absolute;left:50%;top:0;width:14%;height:5px;margin-left:-7%;background:#A9AD9F;border-radius:0 0 6px 6px}
.dv-phone{width:clamp(200px,19vw,250px);background:#1E211A;border-radius:40px;padding:30px 10px 16px;position:relative;box-shadow:0 40px 70px -40px rgba(30,33,26,.55),0 0 0 1px rgba(30,33,26,.12)}
.dv-phone::after{content:"";position:absolute;top:9px;left:50%;width:62px;height:13px;margin-left:-31px;background:#000;border-radius:12px;z-index:3;pointer-events:none}
.dv-phone .screen{aspect-ratio:390/844;border-radius:6px 6px 26px 26px}
.devices .screen{position:relative;width:100%;overflow:hidden;background:#fff;isolation:isolate}
.devices .screen iframe{position:absolute;top:0;left:0;border:0;transform-origin:0 0;background:#fff}
.devices .loading{position:absolute;inset:0;z-index:2;display:grid;place-content:center;justify-items:center;gap:10px;color:var(--mute);font-size:12.5px;background:var(--soft);text-align:center;padding:10px}
.devices .loading span{width:22px;height:22px;border-radius:50%;border:2px solid var(--line-2);border-top-color:var(--accent);animation:dv-spin .8s linear infinite}
@keyframes dv-spin{to{transform:rotate(360deg)}}
.devices .cap{font-size:12px;color:var(--mute);text-align:center;margin-top:10px;letter-spacing:.06em}
@media (max-width:760px){
  .devices{grid-template-columns:minmax(0,1fr);justify-items:center;gap:22px}
  .dv-phone-wrap{order:1}
  .dv-phone{width:min(270px,72vw)}
  .dv-laptop{order:2;width:100%}
}

/* bot check box (Cloudflare Turnstile): empty and invisible unless Cloudflare asks for a click */
.k-captcha-box{display:flex;justify-content:center;margin:12px auto 0}
.k-captcha-box:empty{display:none}