/* Zender, LLC — site styles. System fonts only, no external requests (matches "no tracking"). */
:root{
  --bg:#f7f4ee; --surface:#fffdf9; --ink:#1f1c18; --ink-2:#4a443c; --muted:#7a7266;
  --line:#e4ddd0; --accent:#b5541c;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,"PingFang SC","Hiragino Sans GB","Noto Sans SC",sans-serif;
}
@media (prefers-color-scheme:dark){
  :root{--bg:#171512; --surface:#211e1a; --ink:#f2ede4; --ink-2:#cfc7ba; --muted:#9a9184; --line:#36302a; --accent:#e5784a}
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.65 var(--sans);-webkit-font-smoothing:antialiased}
svg{display:block}
a{color:var(--accent);text-underline-offset:3px}
.wrap{max-width:720px;margin:0 auto;padding:0 24px}
@media (max-width:600px){.wrap{padding:0 16px}}

/* header / footer */
.site-head{border-bottom:1px solid var(--line)}
.site-head .wrap{display:flex;align-items:center;gap:20px;height:60px}
.logo{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink);font-weight:700;font-size:17px}
.logo svg{width:26px;height:26px;border-radius:22%}
.nav{display:flex;gap:20px;margin-left:auto;align-items:center}
.nav a{text-decoration:none;color:var(--ink-2);font-size:15px}
.nav a:hover,.nav a[aria-current]{color:var(--ink)}
.nav a[aria-current]{font-weight:600}
.lang{border:1px solid var(--line);border-radius:999px;padding:3px 11px;font-size:14px!important}
@media (max-width:420px){.nav{gap:14px}}
.site-foot{border-top:1px solid var(--line);margin-top:72px;padding:28px 0 48px;font-size:14px;color:var(--muted)}
.site-foot .wrap{display:flex;flex-wrap:wrap;gap:12px 32px;justify-content:space-between}
.site-foot nav{display:flex;flex-wrap:wrap;gap:6px 18px}
.site-foot a{color:var(--ink-2);text-decoration:none}

/* content */
main.wrap{padding-top:56px}
h1{font-size:34px;line-height:1.2;letter-spacing:-.015em;margin:0}
h2{font-size:20px;line-height:1.3;margin:44px 0 10px}
p,li{color:var(--ink-2)}
.sub{font-size:19px;margin:10px 0 0;color:var(--ink-2)}
.meta{color:var(--muted);font-size:15px;margin:8px 0 0}
ul{padding-left:22px}
li{margin:6px 0}
:lang(zh) h1,:lang(zh) h2{letter-spacing:0}

/* company home: app cards */
.appcard{display:flex;gap:18px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:22px}
.appcard-icon{flex:none}
.appcard-icon svg{width:72px;height:72px;border-radius:16px}
.appcard h3{margin:0;font-size:20px}
.appcard h3 a{color:var(--ink);text-decoration:none}
.appcard p{margin:6px 0 0}
.links{display:flex;flex-wrap:wrap;gap:4px 18px;margin-top:12px;font-size:15px}
@media (max-width:420px){.appcard{flex-direction:column;gap:14px}}

details{border-bottom:1px solid var(--line)}
details summary{cursor:pointer;list-style:none;padding:14px 0;font-weight:600;display:flex;justify-content:space-between;gap:16px}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+";color:var(--muted);font-weight:400}
details[open] summary::after{content:"–"}
details p{margin:0 0 16px}
.note{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 18px;margin:28px 0 0}
.note p{margin:0;color:var(--ink)}

/* ---------- poster home (reference: xiaoyuzhoufm.com) ---------- */
.poster-body{background:#f4eee4;color:#141210;overflow-x:hidden}
.poster{position:relative;height:100vh;height:100svh;min-height:600px;overflow:hidden;padding:0}
.blob{position:absolute;border-radius:50%;background:#d8662f;width:105vh;height:105vh;left:14vw;top:-6vh}
.p-brand{position:absolute;z-index:4;left:4vw;top:3.2vh;display:flex;align-items:center;gap:10px;font-weight:700;font-size:clamp(15px,2.1vh,20px)}
.p-brand svg{width:clamp(30px,4.4vh,42px);height:auto;border-radius:22%}
.p-title{position:absolute;z-index:3;left:4vw;top:9vh;margin:0;color:#141210;font-weight:900;
  font-size:clamp(48px,11vh,150px);line-height:1.02;letter-spacing:-.02em;-webkit-text-stroke:.025em #141210;paint-order:stroke fill}
.zh .p-title{letter-spacing:.01em}
.p-phone{position:absolute;z-index:2;left:9vw;top:31vh;font-size:clamp(8px,1.85vh,22px)}
.p-sticker{position:absolute;z-index:4;right:8vw;top:7vh;width:clamp(120px,21vh,240px);aspect-ratio:1;rotate:-10deg;display:grid;place-items:center}
.p-sticker svg{position:absolute;inset:0;width:100%;height:100%;fill:#141210}
.p-sticker span{position:relative;color:#f4eee4;font-weight:900;text-align:center;font-size:clamp(18px,3.3vh,36px);line-height:1.1}
.p-side{position:absolute;z-index:4;right:5vw;bottom:9vh;display:flex;align-items:flex-end;gap:2.2vh}
.p-side .arrow{width:clamp(22px,3.6vh,40px);height:44vh;fill:none;stroke:#141210;stroke-width:5;stroke-linecap:square}
.p-side span{font-weight:900;color:#141210;-webkit-text-stroke:.025em #141210;paint-order:stroke fill;line-height:1}
.zh .p-side span{writing-mode:vertical-rl;font-size:clamp(56px,12.5vh,170px);letter-spacing:.02em}
.en .p-side span{font-size:clamp(36px,7vh,96px);text-align:right;line-height:1.02;letter-spacing:-.02em}
.p-foot{position:absolute;z-index:5;left:0;right:0;bottom:0;display:flex;flex-wrap:wrap;gap:4px 20px;justify-content:space-between;align-items:center;
  padding:10px 4vw calc(10px + env(safe-area-inset-bottom));font-size:13px;color:#4a443c;background:#f4eee4e6;border-top:1px solid #1412101a}
.p-foot nav{display:flex;gap:18px}
.p-foot a{color:#141210;text-decoration:none}
.p-foot a:hover{text-decoration:underline}
.p-foot span a{text-decoration:underline;text-underline-offset:3px}

/* portrait and square windows (phones, tablets, narrow desktop windows) */
@media (max-aspect-ratio:1/1){
  .blob{width:120vw;height:120vw;left:-28vw;top:34vh}
  .p-title{top:8.5vh;font-size:min(13vw,9vh)}
  .p-phone{left:-6vw;top:42vh;font-size:min(2.75vw,1.9vh)}
  .p-sticker{right:5vw;top:2.5vh;width:min(27vw,19vh)}
  .p-sticker span{font-size:min(5vw,3.4vh)}
  .p-side{right:4vw;bottom:8vh;gap:2vw}
  .p-side .arrow{height:34vh}
  .zh .p-side span{font-size:min(15vw,11vh)}
  .en .p-side span{font-size:min(9.5vw,6.5vh)}
  .p-foot{font-size:12px;justify-content:center}
  /* English words are wider than the vertical Chinese: smaller title, sticker below it, no arrow over the phone */
  .en .p-title{font-size:min(11vw,8vh)}
  .en .p-sticker{top:20vh}
  .en .p-phone{left:-9vw;font-size:min(2.4vw,1.7vh)}
  .en .p-side .arrow{display:none}
  .en .p-side span{font-size:min(8.5vw,6vh)}
}

/* cooking-screen illustration, sized in em so the poster can scale it (not a screenshot) */
.phone{width:26em;aspect-ratio:9/19.3;background:#141210;border-radius:4.2em;padding:1em;box-shadow:0 2em 4em -1.6em #0007}
.screen{height:100%;background:#f7f4ee;color:#1f1c18;border-radius:3.3em;overflow:hidden;display:flex;flex-direction:column;font-size:1em;line-height:1.4;font-family:var(--sans)}
.island{width:7.5em;height:2.1em;background:#141210;border-radius:2em;margin:.8em auto 0;flex:none}
.scr-top{display:flex;justify-content:space-between;padding:1.1em 1.6em .7em;color:#7a7266;font-size:1.05em}
.scr-top b{color:#1f1c18}
.bar{display:flex;gap:.3em;padding:0 1.6em 1em}
.bar i{flex:1;height:.4em;border-radius:.2em;background:#e4ddd0}
.bar i.on{background:#2b2723}.bar i.now{background:#d8662f}
.slot{margin:0 1em .7em;border-radius:1.4em;padding:1em 1.3em;background:#fffdf9;border:1px solid #e4ddd0}
.slot .k{font-size:.9em;color:#7a7266}
.slot .row{display:flex;justify-content:space-between;margin-top:.3em;font-weight:600;font-size:1.15em}
.slot .row .time{color:#d8662f;font-variant-numeric:tabular-nums}
.slot.now{background:#2b2723;color:#f7f4ee;border-color:#2b2723;flex:1;display:flex;flex-direction:column;padding:1.4em 1.3em 1.3em}
.slot.now .k{color:#c9bfb1}
.slot .dish{margin-top:.6em;opacity:.75;font-size:1.1em}
.slot .step{font-weight:800;font-size:2.2em;line-height:1.2;margin-top:.1em}
.slot .detail{line-height:1.5;margin-top:.7em;opacity:.8;font-size:1.1em}
.slot .qty{align-self:flex-start;margin-top:1em;font-size:1em;background:#ffffff1f;border-radius:.6em;padding:.3em .8em}
.slot .done{margin-top:auto;height:3.9em;border-radius:1.2em;background:#d8662f;color:#fff;display:grid;place-items:center;font-weight:800;font-size:1.3em}