/* ════════════════════════════════════════════════════════════════
   memora · collage 设计系统（2026-10-18）
   整站共用这套：index / features / pricing / download …
   ────────────────────────────────────────────────────────────────
   语言：纸白 + 墨黑 + 芥末黄（主色块）+ 砖红/靛蓝少量
        杂志式超大字号 / 发丝线 / 胶带 / 便签微旋转 / 手绘涂鸦
   规矩：无渐变 · 无 emoji · 无纯黑 · 无三列等宽 · 动效只 transform/opacity
   ════════════════════════════════════════════════════════════════ */
:root{
  --paper:#fdfcf7; --paper2:#f5f2e8; --card:#fff;
  --ink:#1a1a16; --ink2:#403f38; --muted:#6a675d; --hair:#e2ddd0;
  --y:#ffe27a; --y2:#f7cf45; --red:#bd3f28; --blue:#2f4fd8;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Songti SC",serif;
  --sans:-apple-system,"Segoe UI",system-ui,"PingFang SC","Microsoft YaHei",sans-serif;
  --mono:"SF Mono",ui-monospace,Consolas,monospace;
  --hand:"Segoe Print","Bradley Hand","Comic Sans MS",cursive;
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);
     line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:1200px;margin:0 auto;padding:0 30px}
.mono{font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;color:var(--muted)}
.hand{font-family:var(--hand);font-size:15px;color:var(--red);line-height:1.25}

/* ── 顶条（全站一致 ✓）── */
.top{border-bottom:1.5px solid var(--ink);background:var(--paper);position:sticky;top:0;z-index:30}
.top .in{display:flex;align-items:center;gap:22px;height:54px}
.logo{display:flex;align-items:center;gap:8px;font-weight:800;font-size:17px;letter-spacing:-.03em}
.logo .mark{width:22px;height:22px;border-radius:6px;background:var(--y);border:1.5px solid var(--ink);
            display:grid;place-items:center;font-size:13px;transform:rotate(-6deg)}
.top nav{display:flex;gap:18px;margin-left:6px}
.top nav a{font-size:13.5px;color:var(--ink2);border-bottom:1.5px solid transparent;padding-bottom:1px}
.top nav a:hover,.top nav a.on{border-color:var(--ink);color:var(--ink)}
.top .sp{flex:1}
.pill{font-size:13px;border:1.5px solid var(--ink);border-radius:99px;padding:7px 15px;
      transition:transform .16s cubic-bezier(.22,1,.36,1),background .16s}
.pill.y{background:var(--y)}
.pill:hover{transform:translateY(-2px)}

/* ── 排版件 ── */
.stamp{display:inline-flex;align-items:center;gap:8px;border:1.5px solid var(--ink);border-radius:4px;
       padding:4px 9px;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;
       transform:rotate(-1.4deg);background:var(--y);margin-bottom:18px}
h1.mast{font-size:clamp(44px,7vw,88px);line-height:.95;letter-spacing:-.045em;font-weight:800;margin:0 0 10px}
h1.mast i,h2.sec i{font-family:var(--serif);font-style:italic;font-weight:400}
h2.sec{font-size:clamp(26px,3.2vw,44px);letter-spacing:-.032em;font-weight:800;margin:0}
.sub{font-size:16.5px;line-height:1.6;color:var(--ink2);max-width:48ch;margin:24px 0}
.sub b{background:linear-gradient(transparent 62%,var(--y) 62%);padding:0 2px}
.kicker{display:flex;align-items:center;gap:14px;margin:0 0 28px}
.kicker .ln{flex:1;height:1.5px;background:var(--ink)}
.big{display:inline-block;font-size:14.5px;font-weight:650;background:var(--ink);color:#fff;border-radius:8px;
     padding:13px 22px;box-shadow:3px 3px 0 var(--y2);transition:transform .16s,box-shadow .16s}
.big:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--y2)}
.line-b{font-size:14.5px;font-weight:600;border-bottom:2px solid var(--ink);padding-bottom:1px}
.row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.rule{height:1.5px;background:var(--ink);border:0;margin:0}

/* ── 真实截图 + 胶带（全站复用 ✓）── */
.shot{position:relative;background:var(--card);border:1.5px solid var(--ink);border-radius:10px;
      box-shadow:7px 8px 0 rgba(26,26,22,.10);overflow:hidden}
.shot img{width:100%;height:auto}
.shot .tape{position:absolute;top:-11px;left:50%;transform:translateX(-50%) rotate(-2deg);
            width:92px;height:22px;background:rgba(255,255,255,.62);
            border-left:1px dashed rgba(0,0,0,.12);border-right:1px dashed rgba(0,0,0,.12);z-index:2}
.shot .cap{position:absolute;bottom:0;left:0;right:0;padding:5px 10px;font-family:var(--mono);font-size:9.5px;
           color:var(--ink2);background:color-mix(in srgb,var(--paper) 88%,transparent);
           border-top:1px solid var(--hair)}

/* ── 黄带 ── */
.band{background:var(--y);border-top:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink)}
.band .in{display:flex;align-items:baseline;gap:26px;padding:22px 0;flex-wrap:wrap}
.band h2{margin:0;font-size:clamp(20px,2.4vw,29px);letter-spacing:-.025em;font-weight:750}
.band h2 i{font-family:var(--serif);font-style:italic;font-weight:400}
.band .mono{color:#5a4a10}

/* ── 卡片（参差 ✓ 不是三列等宽 ✓）── */
.sec{padding:64px 0 16px}
.stagger{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.item{border:1.5px solid var(--ink);border-radius:10px;padding:20px;background:var(--card);
      box-shadow:4px 4px 0 rgba(26,26,22,.08);transition:transform .18s cubic-bezier(.22,1,.36,1),box-shadow .18s}
.item:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 rgba(26,26,22,.12)}
.item .no{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--muted);display:block;margin-bottom:12px}
.item h3{margin:0 0 8px;font-size:18px;letter-spacing:-.015em;font-weight:750}
.item p{margin:0;font-size:13.5px;line-height:1.6;color:var(--ink2);max-width:44ch}
.s-a{grid-column:span 7}.s-b{grid-column:span 5;background:var(--paper2)}
.s-c{grid-column:span 4}.s-d{grid-column:span 8;background:var(--ink);color:#f6f3e9;border-color:var(--ink)}
.s-d p{color:#cbc7b8}.s-d h3{color:#fbf9f1}.s-d .no{color:#9a9683}
.kbd{font-family:var(--mono);font-size:10.5px;border:1.2px solid var(--hair);border-bottom-width:2.5px;
     border-radius:4px;padding:1px 5px;background:var(--card);color:var(--ink2)}
.s-d .kbd{background:#25251d;border-color:#43433a;color:#eae6d8}

/* ── 撕票定价 ── */
.tickets{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:start}
.ticket{position:relative;background:var(--card);border:1.5px solid var(--ink);border-radius:4px;
        padding:22px 20px 20px;transition:transform .18s}
.ticket::before{content:"";position:absolute;left:0;right:0;top:-1px;height:8px;
      background:repeating-linear-gradient(90deg,var(--ink) 0 6px,transparent 6px 12px);opacity:.18}
.ticket:hover{transform:translateY(-3px)}
.ticket .k{font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:#4b3a06}
.ticket .pr{font-family:var(--serif);font-size:44px;line-height:1;letter-spacing:-.03em;margin:6px 0 2px}
.ticket .pr small{font-family:var(--sans);font-size:12px;color:var(--muted)}
.ticket .blurb{font-size:12px;color:var(--muted);margin:0 0 14px;min-height:2.4em}
.ticket ul{list-style:none;margin:0 0 16px;padding:0}
.ticket li{font-size:12.5px;color:var(--ink2);padding:5.5px 0;border-bottom:1px dashed var(--hair)}
.ticket .go{display:block;text-align:center;font-size:13.5px;font-weight:650;padding:10px;
            border:1.5px solid var(--ink);border-radius:6px;box-shadow:2.5px 2.5px 0 var(--ink);
            transition:transform .16s,box-shadow .16s}
.ticket .go:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}
.ticket.star{background:var(--y);transform:rotate(-1.2deg)}
.ticket.star .go{background:var(--ink);color:#fff;box-shadow:2.5px 2.5px 0 var(--red)}
.tape2{position:absolute;top:-12px;right:16px;width:74px;height:20px;background:rgba(255,255,255,.6);transform:rotate(7deg)}

/* ── 剪报 / FAQ / 尾 / 页脚 ── */
.clip{background:var(--paper2);border:1.5px solid var(--ink);border-radius:6px;padding:26px 28px;transform:rotate(-.5deg)}
.clip blockquote{margin:0;font-family:var(--serif);font-size:clamp(19px,2.3vw,26px);line-height:1.44}
.clip .who{margin-top:14px;font-size:12.5px;color:var(--muted)}
.faq{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.faq .q{border-top:2.5px solid var(--ink);padding-top:12px}
.faq .q dt{font-size:14px;font-weight:750;margin-bottom:6px}
.faq .q dd{margin:0;font-size:12.5px;line-height:1.62;color:var(--ink2)}
.tail{border-top:1.5px solid var(--ink);margin-top:52px;background:var(--y2)}
.tail .in{display:flex;align-items:center;justify-content:space-between;gap:22px;padding:34px 0;flex-wrap:wrap}
.tail h2{margin:0;font-size:clamp(24px,3vw,38px);letter-spacing:-.035em;font-weight:800}
.tail h2 i{font-family:var(--serif);font-style:italic;font-weight:400}
footer{padding:28px 0 44px;font-size:12px;color:var(--muted)}
.fg{display:flex;gap:26px;flex-wrap:wrap;justify-content:space-between}
.fg .cols{display:flex;gap:26px;flex-wrap:wrap}
.fg .cols div{min-width:96px}
.fg .cols b{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--ink2);margin-bottom:7px}
.fg a:hover{color:var(--ink)}

@media (max-width:1000px){
  .s-a,.s-b,.s-c,.s-d{grid-column:span 12}
  .tickets,.faq{grid-template-columns:1fr}
  .top nav{display:none}
  .ticket.star{transform:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
