/* ==========================================================================
   Figure Four — 官网
   色值、字体、四种轮廓全部取自 App 的 src/style.css 与 src/hub.js,官网和产品
   必须是同一套视觉。

   结构上刻意避开同批三个参考站的做法:
     LazyPickaxe   深色 hero + 编号时间线 + 密集数据表
     Snap Judgment 米白 + 深绿数字带 + 左右交替全宽区块
     Squarehopper  彩色便当格 + 渐变 hero + 设备样机
   三家都是**单列纵向堆叠**,而且都有一条大数字统计带。

   这里的中心结构是 **2×2 象限**:把 App 大厅那四张卡直接搬成网页布局,
   每个象限用它自己那张卡的真实 clip-path 轮廓(fold / ribbon / arrow / stamp)。
   四个玩法之间没有顺序,并列摆放比纵向罗列更诚实,也正好是「四则」这个名字。
   ========================================================================== */

:root{
  /* 取自 App 的 :root */
  --paper:#f8f1e3; --paper2:#fdfaf3; --paper3:#f0e6d3; --paper4:#e6d9c0;
  --line-1:#d5c3a2; --line-2:#6f5a38;
  --ink:#2f3d4f; --ink-1:#66727f; --ink-2:#98a2ad; --ink-d:#1d2735;
  --gold:#c9962f; --gold-b:#e6bd5c; --gold-d:#9d7220; --bar-edge:#b5872a;
  --green:#3f7d4f; --red:#b8442e;

  --serif:Georgia,"Times New Roman","Songti SC","SimSun",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC",
         "Microsoft YaHei",sans-serif;
  --gut:clamp(1.1rem,3.5vw,3rem);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:1rem; line-height:1.6;
  /* 纸纹:和 App body 背景同一手法 */
  background-image:
    repeating-linear-gradient(0deg, rgba(0,0,0,.016) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.012) 0 1px, transparent 1px 4px);
}
a{color:var(--ink)}
a:focus-visible,button:focus-visible{outline:2px solid var(--bar-edge);outline-offset:3px}
img{max-width:100%;height:auto;display:block}

.wrap{max-width:74rem;margin:0 auto;padding:0 var(--gut)}

/* ---------- 顶栏:法务页在这里,不在页脚 ---------------------------------
   隐私 / 条款 / 支持 是这个产品的卖点之一(它什么都不收集),
   放页脚等于把最该被读到的页放在最难到达的位置。                          */
.top{
  position:sticky; top:0; z-index:30;
  background:var(--paper3); border-bottom:2px solid var(--line-2);
}
.top-in{
  max-width:74rem; margin:0 auto; padding:0 var(--gut);
  display:flex; align-items:center; gap:1rem; min-height:3.25rem;
}
.brand{
  display:flex; align-items:center; gap:.55rem; text-decoration:none;
  font-family:var(--serif); font-weight:700; font-size:1rem;
  letter-spacing:.15em; text-transform:uppercase; white-space:nowrap;
}
/* 四个小方块 = 四个玩法,和下面的 2×2 呼应 */
.brand i{
  width:.95rem; height:.95rem; flex:none; display:block;
  background:
    linear-gradient(var(--bar-edge),var(--bar-edge)) 0 0/44% 44% no-repeat,
    linear-gradient(var(--ink),var(--ink))       100% 0/44% 44% no-repeat,
    linear-gradient(var(--ink),var(--ink))         0 100%/44% 44% no-repeat,
    linear-gradient(var(--bar-edge),var(--bar-edge)) 100% 100%/44% 44% no-repeat;
}
.nav{
  margin-left:auto; display:flex; flex-wrap:wrap; gap:.3rem;
  font-size:.75rem; letter-spacing:.1em; text-transform:uppercase;
}
.nav a{
  padding:.3rem .6rem; text-decoration:none; color:var(--ink-1);
  border:1px solid transparent;
}
.nav a:hover{color:var(--ink);border-color:var(--line-1);background:var(--paper2)}
.nav a[aria-current="page"]{color:var(--ink);border-color:var(--bar-edge);background:var(--paper2)}

/* 窄屏:六个导航项会折成三行。粘在顶部的话那三行会吃掉小半个手机屏,
   所以窄屏取消 sticky 并收紧。六项一个都不能省 —— 法务页在导航里是硬要求。 */
@media (max-width:52rem){
  .top{position:static}
  .top-in{flex-wrap:wrap;align-items:center;gap:.45rem 0;
    padding-top:.55rem;padding-bottom:.6rem;min-height:0}
  .nav{margin-left:0;width:100%;gap:.28rem;font-size:.68rem;letter-spacing:.07em}
  .nav a{padding:.26rem .5rem;border-color:var(--line-1);background:var(--paper)}
}

/* ---------- 报头 ---------- */
.mast{padding:clamp(2.2rem,6vw,4.5rem) 0 clamp(1.6rem,4vw,2.6rem)}
.mast h1{
  font-family:var(--serif); font-weight:700; margin:0 0 .9rem;
  font-size:clamp(2.4rem,9vw,5.5rem); line-height:.95; letter-spacing:-.015em;
}
.mast h1 span{display:block;color:var(--bar-edge)}
.mast p{max-width:37rem;margin:0;font-size:clamp(1rem,2vw,1.15rem)}
.mast p b{font-weight:600}

/* ---------- 2×2 象限(整站的核心结构)-----------------------------------
   每格用对应玩法在大厅里的真实卡片轮廓。clip-path 会裁掉 border,
   所以描边靠 drop-shadow 叠加 —— 和 App 的 .hub-card 同一个手法。         */
.quads{
  display:grid; gap:clamp(.9rem,2.2vw,1.6rem);
  grid-template-columns:1fr;
  padding-bottom:clamp(2rem,5vw,3.5rem);
}
@media (min-width:56rem){ .quads{grid-template-columns:1fr 1fr} }

.quad{
  position:relative; padding:clamp(1.4rem,3vw,2.2rem);
  filter:
    drop-shadow(2px 0 0 var(--line-2)) drop-shadow(-2px 0 0 var(--line-2))
    drop-shadow(0 2px 0 var(--line-2)) drop-shadow(0 -2px 0 var(--line-2));
}
/* 四种轮廓,取自 src/hub.js 的 SHAPES */
.q-fold  {background:var(--paper2);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 42px),calc(100% - 42px) 100%,0 100%)}
.q-ribbon{background:var(--paper3);
  clip-path:polygon(0 0,100% 0,calc(100% - 30px) 50%,100% 100%,0 100%,30px 50%)}
.q-arrow {background:var(--paper4);
  clip-path:polygon(0 0,calc(100% - 40px) 0,100% 50%,calc(100% - 40px) 100%,0 100%,22px 50%)}
.q-stamp {background:var(--gold-b);
  clip-path:polygon(34px 0,calc(100% - 34px) 0,100% 34px,100% calc(100% - 34px),
                    calc(100% - 34px) 100%,34px 100%,0 calc(100% - 34px),0 34px)}
/* 箭头/缎带两格左右被削,正文要让开,否则字会顶到斜边上 */
.q-ribbon > *{padding-left:1.6rem;padding-right:1.2rem}
.q-arrow  > *{padding-left:1.2rem;padding-right:1.9rem}

.quad h2{
  font-family:var(--serif); font-weight:700; margin:0 0 .1rem;
  font-size:clamp(1.5rem,3.4vw,2.1rem); letter-spacing:.02em;
}
.quad .kick{
  font-family:var(--serif); font-style:italic; color:var(--ink-1);
  margin:0 0 1rem; font-size:.98rem;
}
.q-stamp .kick{color:#7a5a15}
.quad p{margin:0 0 .9rem}
.quad p:last-of-type{margin-bottom:1.1rem}

/* 每格底部三条硬数字。不是「大数字统计带」—— 三个参考站都用了那个,
   这里是贴在各自玩法下面的小字规格,不单独成节。 */
.facts{
  display:flex; flex-wrap:wrap; gap:.15rem 1.4rem;
  border-top:1px solid rgba(111,90,56,.35); padding-top:.7rem;
  font-size:.8rem;
}
.facts div{display:flex;gap:.4rem}
.facts dt{color:var(--ink-1);margin:0}
.facts dd{margin:0;font-weight:600;font-variant-numeric:tabular-nums}
.q-stamp .facts dt{color:#7a5a15}

/* ---------- 规则小样:用 CSS 画,不是截图 ---------- */
.quad .note{margin:-.5rem 0 1.1rem;font-size:.8rem;color:var(--ink-1);line-height:1.5}
.q-stamp .note{color:#7a5a15}
.demo{margin:0 0 1.1rem;display:flex;flex-wrap:wrap;gap:.5rem .9rem;align-items:center}
.strip{display:flex;gap:3px}
/* 亮线小样:画**真胶囊**,和游戏里的 .ld-bar 同一套(border-radius:999px +
   3px 描边罩在格子上)。之前用「格子涂金底」表示亮线,读起来只是「这几格被
   高亮了」,看不出「有一根条压在上面」—— 而那根条的有无正是整个规则的分界。
   2026-08-12 用户看不懂这个小样,就是因为这个。 */
.strip.barred{position:relative}
.strip.barred::after{
  content:"";position:absolute;inset:-4px -6px;border-radius:999px;
  background:rgba(201,150,47,.20);border:3px solid var(--bar-edge);
  pointer-events:none;
}
.cell{
  width:1.85rem;height:1.85rem;display:grid;place-items:center;
  font-family:var(--serif);font-weight:700;font-size:.95rem;
  background:var(--paper);border:1px solid var(--line-1);
  font-variant-numeric:tabular-nums;
}
.cell.lit{background:rgba(201,150,47,.22);border-color:var(--bar-edge)}
.cell.no {background:var(--paper);border-color:var(--line-1)}   /* 暗处:就是普通格子,不涂红 */
.cell.ok {background:rgba(63,125,79,.13);border-color:var(--green)}
.cell.on {background:var(--gold);border-color:var(--gold-d);color:var(--paper)}
.tag{font-size:.75rem;font-weight:600;letter-spacing:.03em;white-space:nowrap}
.tag.y{color:var(--green)} .tag.n{color:var(--red)}
.mini{display:grid;grid-template-columns:repeat(3,1.85rem) auto;gap:3px;align-items:center}
.mini b{font-size:.7rem;color:var(--green);padding-left:.3rem}
/* Make 24 小样:四张牌逐步合并成一张,每合一次少一张。
   之前只画了最后一步(5 × 24/5 = 24),中间两步跳掉了,24/5 凭空出现,
   看不懂 —— 2026-08-12 用户反馈。现在三步全画出来。 */
.merge{display:flex;flex-direction:column;gap:.3rem;align-items:flex-start}
.merge .row{display:flex;gap:3px;align-items:center}
.merge .op{
  font-family:var(--serif);font-size:.8rem;color:var(--ink-1);
  padding-left:.5rem;white-space:nowrap;
}
.merge .op b{color:var(--ink);font-weight:600}
.q-arrow .merge .op{color:#6b5a33}
.q-arrow .merge .op b{color:var(--ink)}

/* ---------- 截图胶片条:横向滚动,不是网格画廊 ---------------------------
   参考站分别用了「hero 里嵌一张」「居中设备样机」「便当格里塞小图」。
   这里做成一条可横向滚的胶片,把五张并置起来 —— 四个玩法是并列关系,
   一条带子比 2×2 画廊更贴。                                              */
.film{border-top:2px solid var(--line-2);border-bottom:2px solid var(--line-2);
  background:var(--paper3);padding:clamp(1.6rem,4vw,2.6rem) 0}
.film h2{
  font-family:var(--serif);font-weight:700;margin:0 0 1.1rem;
  font-size:clamp(1.3rem,3vw,1.8rem);
}
.reel{
  display:flex;gap:clamp(.8rem,2vw,1.3rem);overflow-x:auto;
  padding-bottom:.8rem;scroll-snap-type:x mandatory;
}
.reel figure{margin:0;flex:0 0 auto;width:min(12.4rem,58vw);scroll-snap-align:start}
.reel img{border:1px solid var(--line-2);background:var(--paper2)}
.reel figcaption{
  margin-top:.5rem;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-1);
}

/* ---------- 规格 ---------- */
.spec{padding:clamp(1.8rem,4.5vw,3rem) 0}
.spec h2{font-family:var(--serif);font-weight:700;margin:0 0 1.1rem;
  font-size:clamp(1.3rem,3vw,1.8rem)}
.spec dl{
  margin:0;display:grid;gap:0;grid-template-columns:1fr;
  border-top:1px solid var(--line-1);
}
@media (min-width:44rem){ .spec dl{grid-template-columns:1fr 1fr;column-gap:clamp(1rem,3vw,2.5rem)} }
.spec .row{display:flex;gap:1rem;padding:.55rem 0;border-bottom:1px solid var(--line-1)}
.spec dt{flex:0 0 9rem;color:var(--ink-1);margin:0;font-size:.82rem;
  letter-spacing:.05em;text-transform:uppercase;padding-top:.1rem}
.spec dd{margin:0;font-size:.92rem}

/* 「不含」那一行:压成一条内嵌小字,不单独成节 ——
   Snap Judgment 有个整节 "What it doesn't do",不重复那个做法。 */
.absent{
  margin-top:1.4rem;padding:.85rem 1.1rem;background:var(--ink-d);color:var(--paper);
  font-size:.85rem;display:flex;flex-wrap:wrap;gap:.3rem 1.2rem;
}
.absent b{color:var(--gold-b);font-weight:600}

/* ---------- 法务/支持页正文 ---------- */
.doc{padding:clamp(1.6rem,4vw,2.8rem) 0 clamp(2.6rem,6vw,4rem)}
.doc h1{font-family:var(--serif);font-weight:700;margin:0 0 .4rem;
  font-size:clamp(1.9rem,5.5vw,3rem);line-height:1.05}
.doc .when{font-size:.82rem;color:var(--ink-2);margin:0 0 1.8rem;
  padding-bottom:.9rem;border-bottom:2px solid var(--line-2)}
.doc section{padding:1.3rem 0;border-bottom:1px solid var(--line-1)}
.doc h2{font-family:var(--serif);font-size:1.1rem;font-weight:700;margin:0 0 .5rem}
.doc p,.doc ul{margin:0 0 .8rem;max-width:38rem}
.doc ul{padding-left:1.15em}
.doc li{margin:.3em 0}
.doc p:last-child,.doc ul:last-child{margin-bottom:0}
.doc .lead{
  background:var(--paper2);border-left:3px solid var(--bar-edge);
  padding:1rem 1.2rem;margin:0 0 1.6rem;max-width:40rem;
}
.doc .lead p{margin:0 0 .5rem}
.doc .lead p:last-child{margin:0}
.ph{color:var(--red)}   /* 占位符,替换前一眼能看见 */

/* ---------- 页脚 ---------- */
.foot{border-top:2px solid var(--line-2);padding:1.4rem 0 2.4rem;
  font-size:.8rem;color:var(--ink-1)}
.foot-in{display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;align-items:baseline}
.foot a{color:var(--ink-1)}
.foot .copy{color:var(--ink-1)}
.foot .who{font-family:var(--serif);color:var(--ink);font-weight:700;
  letter-spacing:.12em;text-transform:uppercase}