/* ============================================================
     P02 · MANIFESTO — FINAL (對照宣言式)
     Synthesis: concept 1's glowing ledger spine (skeleton) +
       concept 2's animated deny→give hero & final-belief line +
       concept 3's 不是/是/是 stance primer, semantic <table>,
       sticky method rail, and dedicated 風險揭露 band.
     Page-local CSS only — reuses base tokens + classes throughout;
     nothing here duplicates or edits the shared kit.
     ============================================================ */

  /* ---------- HERO: animated deny → give, asymmetric, ghost word ---------- */
  .mf-hero{position:relative; padding:clamp(132px,19vh,200px) 0 clamp(46px,7vh,82px); overflow:hidden}
  .mf-hero .wrap{position:relative; z-index:2}
  .mf-hero .inner{max-width:940px}
  .mf-hero .kicker{display:flex; align-items:center; gap:14px; margin-bottom:24px}
  .mf-hero .kicker .rule{height:1px; width:clamp(36px,7vw,104px);
    background:linear-gradient(90deg,var(--cyan),transparent)}
  /* denial line — oversized, with animated red strike on 不給明牌 */
  .mf-deny{font-family:var(--sans); font-weight:900; letter-spacing:-.012em;
    font-size:clamp(36px,7.2vw,90px); line-height:1.03; color:var(--text);
    text-shadow:0 0 70px rgba(91,95,255,.16)}
  .mf-deny .strike{position:relative; color:var(--muted-2); white-space:nowrap}
  .mf-deny .strike::after{content:""; position:absolute; left:-3%; right:-3%; top:54%;
    height:max(3px,.06em); background:var(--error); border-radius:2px;
    transform:scaleX(0); transform-origin:left; opacity:.9;
    transition:transform 1s cubic-bezier(.2,.7,.2,1) .4s}
  .reveal.in .mf-deny .strike::after{transform:scaleX(1)}
  /* give line — gradient promise */
  .mf-give{font-family:var(--sans); font-weight:900; letter-spacing:-.012em;
    font-size:clamp(30px,5.6vw,66px); line-height:1.08; margin-top:16px; max-width:18ch}
  .mf-give .grad{background:linear-gradient(100deg,var(--cyan),var(--cta-2) 55%,var(--violet));
    -webkit-background-clip:text; background-clip:text; color:transparent;
    filter:drop-shadow(0 0 24px rgba(91,192,190,.22))}
  .mf-hero .lede{margin:26px 0 0; max-width:620px; color:var(--muted);
    font-size:clamp(16px,1.8vw,20px); font-weight:300}
  .mf-hero .lede strong{color:#c3cee0; font-weight:500}
  .mf-hero .quietlink{margin-top:30px}
  .mf-hero .quietlink a{color:var(--cyan); text-decoration:none; font-family:var(--latin);
    font-size:14px; letter-spacing:.04em; border-bottom:1px solid transparent;
    transition:border-color .25s, color .25s; padding-bottom:2px}
  .mf-hero .quietlink a:hover{color:var(--text); border-bottom-color:var(--cyan)}
  /* faint giant ghost word behind the manifesto (from concept 1) */
  .ghost-word{position:absolute; z-index:1; right:-2vw; top:48%; transform:translateY(-50%);
    font-family:var(--latin); font-weight:900; font-size:min(44vw,600px); line-height:.8;
    letter-spacing:-.04em; color:transparent; pointer-events:none; user-select:none;
    background:linear-gradient(180deg,rgba(190,199,217,.18),rgba(91,192,190,.07));
    -webkit-background-clip:text; background-clip:text; text-shadow:none;
    -webkit-text-stroke:1px rgba(148,166,191,.055)}
  @media(max-width:880px){.ghost-word{display:none}}

  /* ---------- STANCE primer: 不是 / 是 / 是 (from concept 3) ---------- */
  .stance{border-top:1px solid var(--line); margin-top:6px}
  .stance-row{display:grid; grid-template-columns:auto 1fr auto; gap:26px; align-items:center;
    padding:24px 4px; border-bottom:1px solid var(--line-soft); transition:background .3s}
  .stance-row:hover{background:rgba(91,95,255,.04)}
  .stance-mark{width:42px; height:42px; flex:none; border-radius:50%; display:grid; place-items:center;
    font-family:var(--latin); font-weight:900; font-size:18px; border:1px solid var(--line)}
  .stance-mark.no{color:var(--error); background:rgba(248,113,113,.07); border-color:rgba(248,113,113,.32)}
  .stance-mark.yes{color:var(--cyan); background:rgba(91,192,190,.08); border-color:rgba(91,192,190,.34)}
  .stance-row .lab{font-family:var(--latin); font-size:11px; font-weight:700; letter-spacing:.18em;
    text-transform:uppercase; display:block; margin-bottom:6px}
  .stance-row.no .lab{color:var(--muted-2)}
  .stance-row.yes .lab{color:var(--cyan)}
  .stance-row h3{font-size:clamp(19px,2.6vw,26px); font-weight:700; line-height:1.25}
  .stance-row.no h3{color:#c3cee0}
  .stance-row p{color:var(--muted); font-weight:300; margin-top:6px; font-size:14.5px; max-width:640px}
  .stance-row .tail{font-family:var(--latin); font-size:11px; letter-spacing:.14em; color:var(--muted-2);
    text-align:right; flex:none}
  @media(max-width:680px){
    .stance-row{grid-template-columns:auto 1fr; gap:18px; padding:22px 2px}
    .stance-row .tail{display:none}
  }

  /* ---------- THE LEDGER (centerpiece): glowing spine over a semantic table ---------- */
  .ledger-head{margin-bottom:clamp(26px,4vh,44px)}
  .ledger{position:relative; border:1px solid var(--line); border-radius:var(--r-lg);
    overflow:hidden; background:linear-gradient(180deg,rgba(20,27,45,.5),rgba(10,14,23,.7));
    backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px)}
  /* glowing center divider — concept 1's "spine", drawn over the table column gap */
  .ledger::before{content:""; position:absolute; top:0; bottom:0; left:50%; width:1px;
    transform:translateX(-.5px); pointer-events:none; z-index:4;
    background:linear-gradient(180deg,transparent,rgba(91,192,190,.55) 12%,rgba(91,95,255,.55) 50%,rgba(124,77,255,.5) 88%,transparent);
    box-shadow:0 0 26px 1px var(--glow-cyan)}

  .lz{width:100%; border-collapse:collapse; table-layout:fixed}
  .lz col.col-aspect{width:0}            /* axis lives inside the rows; spacer */
  .lz col.col-signal{width:50%}
  .lz col.col-vta{width:50%}
  /* header band */
  .lz thead th{padding:24px clamp(18px,3vw,38px); vertical-align:middle;
    border-bottom:1px solid var(--line)}
  .lz thead .h-sig{text-align:right}
  .lz thead .h-vta{text-align:left;
    background:linear-gradient(90deg,rgba(91,192,190,.07),transparent)}
  .lz thead .col-name{font-weight:900; font-size:clamp(18px,2.3vw,24px); letter-spacing:-.01em; display:inline-flex; align-items:center; gap:11px}
  .lz thead .h-sig .col-name{color:var(--muted-2); flex-direction:row-reverse}
  .lz thead .h-vta .col-name{color:var(--text)}
  .lz thead .col-tag{font-family:var(--latin); font-size:11px; letter-spacing:.16em;
    text-transform:uppercase; border:1px solid var(--line); border-radius:var(--r-pill); padding:4px 11px; flex:none; font-weight:700}
  .lz thead .h-sig .col-tag{color:var(--muted-2)}
  .lz thead .h-vta .col-tag{color:var(--cyan); border-color:rgba(91,192,190,.4); box-shadow:0 0 22px -6px var(--glow-cyan)}
  .lz thead .col-name small{display:block; font-family:var(--sans); font-weight:300; font-size:12.5px;
    letter-spacing:0; margin-top:4px}
  .lz thead .h-sig .col-name small{color:var(--muted-2)}
  .lz thead .h-vta .col-name small{color:var(--muted)}

  /* body cells */
  .lz tbody td{padding:20px clamp(18px,3vw,38px); vertical-align:middle; min-height:96px;
    border-top:1px solid var(--line-soft); position:relative}
  .lz tbody .c-sig{text-align:right;
    background:linear-gradient(90deg,transparent,rgba(248,113,113,.035))}
  .lz tbody .c-vta{text-align:left;
    background:linear-gradient(90deg,rgba(91,192,190,.05),transparent)}
  .lz tbody tr:hover .c-vta{background:linear-gradient(90deg,rgba(91,192,190,.09),transparent)}
  .lz tbody .ctag{font-family:var(--latin); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; display:block; margin-bottom:5px}
  .lz tbody .c-sig .ctag{color:rgba(248,113,113,.55)}
  .lz tbody .c-vta .ctag{color:var(--cyan)}
  .lz tbody .c-sig .txt{color:var(--muted-2); font-weight:500; font-size:clamp(15px,1.7vw,18px); line-height:1.5;
    text-decoration:line-through; text-decoration-color:rgba(110,122,147,.45); text-decoration-thickness:1px}
  .lz tbody .c-vta .txt{color:var(--text); font-weight:500; font-size:clamp(15px,1.7vw,18px); line-height:1.5}
  .lz tbody .c-vta .hl{color:var(--cyan); font-weight:700}
  /* ✓/✗ glyphs — colorblind-safe reinforcement (concept 3) */
  .gly{display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px;
    border-radius:50%; font-family:var(--latin); font-size:12px; font-weight:900; vertical-align:-3px}
  .gly.no{color:var(--error); background:rgba(248,113,113,.10); margin-left:9px}
  .gly.yes{color:var(--cyan); background:rgba(91,192,190,.14); margin-right:9px;
    box-shadow:0 0 10px -1px rgba(91,192,190,.55)}
  /* the 面向 axis label — pill straddling the spine.
     Anchored to the right edge of the signal cell (== the 50% column gap
     where the spine sits), kept as valid <td> content (not a bare <tr> child). */
  .lz th, .lz td{position:relative}
  .axis-chip{position:absolute; left:100%; top:50%; transform:translate(-50%,-50%); z-index:5;
    font-size:12px; font-weight:700; color:#9fb0cb; letter-spacing:.02em; line-height:1.2;
    background:rgba(10,14,23,.86); border:1px solid var(--line); border-radius:var(--r-pill);
    padding:6px 13px; white-space:nowrap; backdrop-filter:blur(4px)}
  .lz thead .h-sig .axis-chip{color:var(--muted-2); font-family:var(--latin); font-size:11px;
    letter-spacing:.16em; text-transform:uppercase}

  /* compliance footnote LANDED INSIDE the frame (concept 1) */
  .ledger-foot{border-top:1px solid var(--line-soft); padding:18px clamp(20px,3.4vw,40px);
    color:var(--muted-2); font-size:13px; font-weight:300; text-align:center; position:relative; z-index:2}
  .ledger-foot b{color:#9fb0cb; font-weight:500}

  /* mobile: collapse table → stacked compare cards; hide the spine */
  @media(max-width:760px){
    .ledger::before{display:none}
    .lz, .lz thead, .lz tbody, .lz tr, .lz th, .lz td, .lz col, .lz colgroup{display:block; width:auto}
    .lz thead{display:none}
    .lz tbody tr{border-top:1px solid var(--line); padding:18px 20px 20px}
    .lz tbody tr:first-child{border-top:none}
    .lz tbody td{padding:0; border:none; min-height:auto; text-align:left!important; background:none!important}
    .axis-chip{position:static; left:auto; transform:none; display:inline-block; margin-bottom:12px;
      font-family:var(--latin); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
      color:var(--cyan); background:rgba(91,95,255,.06)}
    .lz tbody .c-sig{padding:12px 14px!important; border-radius:var(--r-sm);
      border:1px solid var(--line-soft); margin-bottom:10px; text-align:left!important;
      background:linear-gradient(90deg,rgba(248,113,113,.04),transparent)!important}
    .lz tbody .c-vta{padding:12px 14px!important; border-radius:var(--r-sm);
      border-left:2px solid var(--cyan)!important; text-align:left!important;
      background:linear-gradient(90deg,rgba(91,192,190,.06),transparent)!important}
    .lz tbody .c-sig .txt,.lz tbody .c-vta .txt{font-size:15px}
    .gly.no{margin-left:0; margin-right:8px}
  }

  /* ---------- METHOD: sticky left-rail + gradient big-numeral principles (concept 3) ---------- */
  .method{display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(36px,6vw,72px); align-items:start}
  .method-lead{position:sticky; top:104px}
  .method-lead .sec-title{margin-top:14px}
  .method-lead p{color:var(--muted); font-weight:300; margin-top:16px; font-size:15.5px; max-width:340px}
  .principles{display:flex; flex-direction:column}
  .principle{display:grid; grid-template-columns:auto 1fr; gap:clamp(20px,3vw,38px); align-items:baseline;
    padding:clamp(26px,4vh,38px) 0; border-top:1px solid var(--line-soft)}
  .principle:first-child{border-top:none; padding-top:0}
  .principle .pn{font-family:var(--latin); font-weight:900; line-height:.78;
    font-size:clamp(54px,8vw,96px); letter-spacing:-.04em;
    background:linear-gradient(180deg,var(--text),rgba(148,166,191,.20));
    -webkit-background-clip:text; background-clip:text; color:transparent}
  .principle .body h3{font-size:clamp(20px,2.6vw,28px); font-weight:700; line-height:1.2}
  .principle .body h3 em{font-style:normal; color:var(--cyan)}
  .principle .body p{color:var(--muted); font-weight:300; margin-top:10px; font-size:15px; max-width:480px}
  .principle .body .seq{font-family:var(--latin); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
    color:var(--muted-2); display:inline-block; margin-top:14px;
    border:1px solid var(--line); border-radius:var(--r-pill); padding:5px 12px}
  .principle .body .seq b{color:var(--cyan); font-weight:700}
  @media(max-width:880px){
    .method{grid-template-columns:1fr; gap:34px}
    .method-lead{position:static}
    .principle{grid-template-columns:auto 1fr; gap:20px}
  }

  /* ---------- ORIGIN / TEAM + final belief + 風險揭露 band ---------- */
  .origin{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(34px,6vw,68px); align-items:center}
  .origin .copy .sec-title{margin-top:14px}
  .origin .copy p{color:var(--muted); font-weight:300; margin-top:16px; font-size:15.5px; max-width:460px}
  .origin .copy .belief{margin-top:26px; padding-left:18px; border-left:2px solid var(--cyan);
    color:#dfe9f3; font-weight:500; font-size:clamp(17px,2.2vw,21px); line-height:1.5}
  /* roster — restrained list (no decorative radial card; DESIGN.md restraint) */
  .roster{border:1px solid var(--line); border-radius:var(--r-lg); padding:8px clamp(20px,3vw,28px);
    background:linear-gradient(180deg,var(--surface),var(--ink-2))}
  .roster .rc-head{display:flex; align-items:center; justify-content:space-between; gap:12px;
    padding:18px 0 14px; border-bottom:1px solid var(--line-soft)}
  .roster .rc-head .lab{font-family:var(--latin); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--cyan)}
  .mate{display:flex; align-items:center; gap:16px; padding:18px 2px;
    border-bottom:1px solid var(--line-soft); color:inherit; border-radius:var(--r-sm)}
  .mate:last-of-type{border-bottom:none}
  .mate .avatar{width:44px; height:44px; flex:none; border-radius:50%; display:grid; place-items:center;
    font-family:var(--latin); font-weight:900; font-size:14px; color:var(--cyan);
    background:radial-gradient(circle at 30% 30%,var(--surface-2),var(--ink-2)); border:1px solid var(--line)}
  .mate .nm{font-family:var(--latin); font-weight:900; letter-spacing:.02em; font-size:18px;
    color:var(--text)}
  .mate .ro{color:var(--muted); font-weight:300; font-size:14px; margin-top:2px}
  @media(max-width:820px){.origin{grid-template-columns:1fr; gap:32px}}

  /* final-belief oversized line (concept 2) — emotional button before disclosure */
  .final-belief{font-family:var(--sans); font-weight:900; letter-spacing:-.01em;
    font-size:clamp(24px,3.6vw,42px); line-height:1.16; margin:clamp(40px,6vh,72px) auto 0;
    max-width:18ch; text-align:center}
  .final-belief em{font-style:normal; color:var(--cyan)}

  /* dedicated 風險揭露 compliance band (concept 3) — prominent, auditable close */
  .compliance{margin-top:clamp(24px,4vh,38px); border:1px solid var(--line); border-radius:var(--r-md);
    padding:clamp(22px,3vw,30px) clamp(24px,4vw,34px);
    background:linear-gradient(160deg,rgba(20,27,45,.6),rgba(10,14,23,.55))}
  .compliance .lab{font-family:var(--latin); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
    color:var(--muted-2); display:block; margin-bottom:10px}
  .compliance p{color:var(--muted); font-weight:300; font-size:14px; line-height:1.75}
  .compliance b{color:#c3cee0; font-weight:500}

.vta-philosophy { position: relative; z-index: 1; }