/* mipos-about — every card is one backlit menu-board panel in an aluminium bezel.
   Tokens follow mipos-brand/public/styles.css (accent, gradient, ink, Inter). */
:root{
  --room:#e6eaef; --panel:#ffffff; --ink:#0f172a; --text:#334155; --muted:#5b6678; --line:#e2e8f0; --line-strong:#cbd5e1;
  --accent:#f97316; --accent-ink:#c2410c; --glow:#ffe9d2;
  --gradient:linear-gradient(150deg,#ff5a4d 0%,#ff9a2e 100%);
  --bezel:linear-gradient(165deg,#fbfcfd 0%,#c3cad2 26%,#eef1f4 52%,#a7b0ba 78%,#dfe3e8 100%);
  --panel-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 22px 44px -22px rgba(15,23,42,.38),0 4px 10px -4px rgba(15,23,42,.18);
  --led:#f97316; --led-halo:rgba(249,115,22,.45);
  --off:brightness(.84) saturate(.7);
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --font-zh:'Inter','PingFang SC','Hiragino Sans GB','Noto Sans SC','Source Han Sans SC','Microsoft YaHei',sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root{
    --room:#0a0d12; --panel:#141920; --ink:#f1f5f9; --text:#cdd5df; --muted:#9aa5b4; --line:#262d37; --line-strong:#38414d;
    --accent:#fb923c; --accent-ink:#fdba74; --glow:rgba(251,146,60,.2);
    --gradient:linear-gradient(150deg,#ff6b5e 0%,#ffab47 100%);
    --bezel:linear-gradient(165deg,#59626e 0%,#262b33 28%,#454d58 54%,#1a1e24 80%,#3a414b 100%);
    --panel-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 0 0 1px rgba(0,0,0,.5),0 26px 60px -24px rgba(251,146,60,.22);
    --led:#fb923c; --led-halo:rgba(251,146,60,.6);
    --off:brightness(.6) saturate(.6);
    color-scheme:dark;
  }
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-snap-type:y proximity;scroll-behavior:smooth;-webkit-text-size-adjust:100%;scrollbar-color:var(--line-strong) var(--room)}
body{margin:0;background:var(--room);color:var(--text);font-family:var(--font);font-size:1.1875rem;line-height:1.55;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-feature-settings:'cv11','ss01'}
html:lang(zh-CN) body{font-family:var(--font-zh);line-height:1.75}
h1,h2,p,ul,dl,dd,figure{margin:0}
ul{padding:0;list-style:none}
::selection{background:var(--accent);color:#0f172a}
a{color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:8px}
.defs{position:absolute;overflow:hidden}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:fixed;left:16px;top:16px;z-index:30;padding:10px 16px;border-radius:10px;background:var(--ink);color:var(--room);
  font-weight:600;text-decoration:none;transform:translateY(-200%)}
.skip:focus{transform:none}

/* ---------- the card: one lightbox per viewport ---------- */
main{max-width:640px;margin:0 auto}
.card{min-height:100vh;min-height:100svh;display:flex;scroll-snap-align:start;
  padding:max(12px,env(safe-area-inset-top)) 34px max(12px,env(safe-area-inset-bottom)) 12px}
.panel{position:relative;flex:1;display:flex;flex-direction:column;justify-content:center;gap:28px;
  padding:84px 24px 40px;border-radius:24px;border:5px solid transparent;
  background:radial-gradient(140% 85% at 50% -10%,var(--glow) 0%,transparent 70%) padding-box,
             linear-gradient(var(--panel),var(--panel)) padding-box,var(--bezel) border-box;
  box-shadow:var(--panel-shadow)}
/* the four bezel screws of a wall-mounted menu box */
.panel::before{content:"";position:absolute;inset:9px;pointer-events:none;border-radius:16px;
  background:
    radial-gradient(circle at 0 0,var(--line-strong) 2.5px,transparent 3.2px) 0 0/100% 100% no-repeat,
    radial-gradient(circle at 100% 0,var(--line-strong) 2.5px,transparent 3.2px) 0 0/100% 100% no-repeat,
    radial-gradient(circle at 0 100%,var(--line-strong) 2.5px,transparent 3.2px) 0 0/100% 100% no-repeat,
    radial-gradient(circle at 100% 100%,var(--line-strong) 2.5px,transparent 3.2px) 0 0/100% 100% no-repeat}

/* signature moment: the backlight switches on as a panel arrives */
.js .card .panel{transition:filter 1.1s var(--ease)}
.js .card:not(.is-on) .panel{filter:var(--off)}

/* ---------- hero: the panel fully lit in brand orange ---------- */
.panel--lit{justify-content:space-between;padding-top:30px;color:#0f172a;
  background:radial-gradient(120% 60% at 30% 0%,rgba(255,255,255,.34) 0%,transparent 60%) padding-box,
             var(--gradient) padding-box,var(--bezel) border-box}
.panel--lit::before{background:
    radial-gradient(circle at 0 0,rgba(15,23,42,.28) 2.5px,transparent 3.2px) 0 0/100% 100% no-repeat,
    radial-gradient(circle at 100% 0,rgba(15,23,42,.28) 2.5px,transparent 3.2px) 0 0/100% 100% no-repeat,
    radial-gradient(circle at 0 100%,rgba(15,23,42,.28) 2.5px,transparent 3.2px) 0 0/100% 100% no-repeat,
    radial-gradient(circle at 100% 100%,rgba(15,23,42,.28) 2.5px,transparent 3.2px) 0 0/100% 100% no-repeat}
.board-head{display:flex;flex-direction:column;gap:6px;padding-right:104px}
.wordmark{width:128px;height:auto;aspect-ratio:716.2/258.36;color:#0f172a;display:block}
.locator{font-size:.95rem;font-weight:500;color:#1e293b}
.hero-body{display:flex;flex-direction:column;gap:20px;padding-bottom:6px}
.display{font-size:clamp(2.75rem,11.6vw,4.4rem);font-weight:800;line-height:1.01;letter-spacing:-.04em;color:#0f172a;text-wrap:balance}
.lede{font-size:1.3rem;font-weight:500;line-height:1.38;color:#1e293b;max-width:26ch;text-wrap:pretty}
.chip{align-self:flex-start;padding:9px 16px 10px;border-radius:999px;background:#0f172a;color:#fff;font-size:1.125rem;font-weight:600;letter-spacing:-.005em}
html:lang(zh-CN) .display{letter-spacing:-.01em;line-height:1.18;font-size:clamp(2.2rem,9.4vw,3.6rem)}
html:lang(zh-CN) .display,html:lang(zh-CN) .title{word-break:keep-all;overflow-wrap:anywhere}

/* ---------- type on the plain panels ---------- */
.title{font-size:clamp(2rem,8.6vw,3rem);font-weight:800;line-height:1.06;letter-spacing:-.034em;color:var(--ink);text-wrap:balance}
.title--big{font-size:clamp(2.8rem,12vw,4.2rem);letter-spacing:-.04em}
html:lang(zh-CN) .title{letter-spacing:0;line-height:1.28;font-size:clamp(1.8rem,7.4vw,2.6rem)}
html:lang(zh-CN) .title--big{font-size:clamp(2.4rem,10vw,3.6rem)}
.statement{font-size:clamp(1.7rem,7.2vw,2.45rem);font-weight:600;line-height:1.24;letter-spacing:-.022em;color:var(--ink);text-wrap:pretty}
html:lang(zh-CN) .statement{letter-spacing:0;line-height:1.5}
.body{font-size:1.25rem;line-height:1.6;color:var(--text);max-width:34ch;text-wrap:pretty}
html:lang(zh-CN) .body{line-height:1.85}
.foot{font-size:1.125rem;color:var(--muted)}

/* an LED indicator, the menu board's own light, marks each line item */
.menu,.proof{display:flex;flex-direction:column}
.menu-item,.proof li{position:relative;padding:18px 0 18px 26px;border-top:2px solid var(--line)}
.menu-item:last-child,.proof li:last-child{border-bottom:2px solid var(--line)}
.menu-item::before,.proof li::before{content:"";position:absolute;left:2px;top:29px;width:10px;height:10px;border-radius:50%;
  background:var(--led);box-shadow:0 0 0 3px color-mix(in srgb,var(--led) 18%,transparent),0 0 14px 2px var(--led-halo)}
.menu dt{font-size:1.5rem;font-weight:800;letter-spacing:-.02em;line-height:1.2;color:var(--ink)}
.menu dd{margin-top:6px;font-size:1.125rem;line-height:1.5;color:var(--text)}
.proof strong{display:block;font-size:2.15rem;font-weight:800;letter-spacing:-.035em;line-height:1.05;color:var(--ink)}
.proof li::before{top:24px}
.proof span{display:block;margin-top:4px;font-size:1.125rem}
html:lang(zh-CN) .menu dt,html:lang(zh-CN) .proof strong{letter-spacing:0}

/* ---------- contact ---------- */
.actions{display:flex;flex-direction:column;gap:12px}
.btn{display:flex;align-items:center;gap:14px;min-height:58px;padding:12px 20px;border-radius:14px;
  border:2px solid var(--line-strong);background:var(--panel);color:var(--ink);text-decoration:none;
  font-size:1.125rem;font-weight:600;line-height:1.25;transition:border-color .2s var(--ease),background-color .2s var(--ease),transform .2s var(--ease)}
.btn:hover{border-color:var(--accent)}
.btn:active{transform:scale(.985)}
.btn--primary{background:#0f172a;border-color:#0f172a;color:#fff}
.btn--primary:hover{background:#1e293b;border-color:#1e293b}
.ico{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.btn--primary .ico{stroke:var(--accent)}
.qr{display:flex;align-items:center;gap:18px;padding-top:6px}
.qr-code{width:112px;height:112px;flex:none;border-radius:12px;background:#fff;box-shadow:0 0 0 1px var(--line)}
.qr figcaption{font-size:1.125rem;line-height:1.45;color:var(--muted)}
.qr .url{display:block;margin-top:4px;color:var(--ink);font-weight:600}
@media (prefers-color-scheme:dark){
  .btn--primary{background:var(--accent);border-color:var(--accent);color:#0f172a}
  .btn--primary:hover{background:#fdba74;border-color:#fdba74}
  .btn--primary .ico{stroke:#0f172a}
}

/* ---------- language toggle ---------- */
.lang{position:fixed;z-index:20;top:max(26px,calc(env(safe-area-inset-top) + 14px));right:50px;display:flex;padding:4px;gap:2px;
  border-radius:999px;background:var(--panel);box-shadow:0 0 0 1px var(--line-strong),0 6px 16px -8px rgba(15,23,42,.4)}
.lang-btn{appearance:none;border:0;margin:0;min-width:48px;min-height:38px;padding:0 12px;border-radius:999px;cursor:pointer;
  background:transparent;color:var(--muted);font:600 .95rem/1 var(--font);transition:background-color .2s var(--ease),color .2s var(--ease)}
.lang-btn[lang="zh-CN"]{font-family:var(--font-zh)}
.lang-btn[aria-pressed="true"]{background:var(--ink);color:var(--panel)}
.lang-btn:hover:not([aria-pressed="true"]){color:var(--ink)}

/* ---------- progress rail ---------- */
.rail{position:fixed;z-index:20;right:2px;top:50%;transform:translateY(-50%)}
.rail ol{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:2px}
.rail a{display:grid;place-items:center;width:30px;height:30px;border-radius:50%}
.rail a::before{content:"";width:8px;height:8px;border-radius:999px;background:var(--line-strong);transition:transform .35s var(--ease),background-color .35s var(--ease)}
.rail a[aria-current="true"]::before{transform:scaleY(2.6);background:var(--accent)}

/* ---------- larger screens: same deck, centred ---------- */
@media (min-width:700px){
  .card{padding:28px 24px}
  .panel{padding:96px 48px 56px}
  .panel--lit{padding-top:40px}
  .lang{right:calc(50% - 320px + 52px);top:56px}
  .rail{right:max(8px,calc(50% - 320px - 46px))}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
  .js .card:not(.is-on) .panel{filter:none}
}