/* Spica Portal — style (brand/SYSTEM.md 準拠・完全自己完結) */
/* フォントは自前ホスト(Latin woff2)。日本語はシステムフォントへフォールバック(portal/DEPLOY.md 方針) */
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/plex-sans-400.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:500;font-display:swap;src:url("/fonts/plex-sans-500.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:600;font-display:swap;src:url("/fonts/plex-sans-600.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:700;font-display:swap;src:url("/fonts/plex-sans-700.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Serif";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/plex-serif-400.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Serif";font-style:normal;font-weight:500;font-display:swap;src:url("/fonts/plex-serif-500.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/plex-mono-400.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url("/fonts/plex-mono-500.woff2") format("woff2")}

  /* ============================================================
     Spica Portal — LP draft v2 (performance-led / night cinematic)
     Palette & type per onmt/spica brand/SYSTEM.md + tokens.json
     ============================================================ */
  :root{
    color-scheme: dark;
    --night-950:#0b0d14; --night-900:#0f121b; --night-850:#141826;
    --night-800:#1b2030; --night-700:#262c3e; --night-600:#38405a;
    --on-900:#f2f4f9; --on-700:#c3c9d8; --on-500:#8b93a7;
    --line:#2a3144;
    --spica:#1f5fe6; --spica-400:#4f80f7; --spica-300:#84a9ff;
    --starlight:#b9d2ff;
    --ok:#2e9e6b; --warn:#c8861e;
    --serif:"IBM Plex Serif","Hiragino Mincho ProN","Yu Mincho","YuMincho","Noto Serif JP",serif;
    --sans:"IBM Plex Sans","Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic","Noto Sans JP",sans-serif;
    --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
    --container:1140px; --measure:38em;
    --dur:200ms; --ease:cubic-bezier(.2,.7,.3,1);
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    margin:0; background:var(--night-950); color:var(--on-700);
    font-family:var(--sans); font-size:16px; line-height:1.9;
    -webkit-font-smoothing:antialiased; overflow-x:hidden;
  }
  ::selection{background:rgba(31,95,230,.35); color:var(--on-900)}
  a{color:var(--starlight); text-decoration:none}
  a:hover{text-decoration:underline; text-underline-offset:3px}
  :focus-visible{outline:3px solid rgba(79,128,247,.55); outline-offset:2px; border-radius:4px}

  #sky{position:fixed; inset:0; z-index:0; pointer-events:none}
  .page{position:relative; z-index:1}
  .wrap{max-width:var(--container); margin:0 auto; padding:0 24px}

  .eyebrow{
    font-family:var(--mono); font-size:11px; letter-spacing:.18em;
    text-transform:uppercase; color:var(--on-500); display:flex;
    align-items:center; gap:10px;
  }
  .eyebrow::before{content:""; width:22px; height:1px; background:var(--night-600); flex:none}
  .eyebrow .blue{color:var(--spica-300)}

  /* ---- header ---- */
  header{
    position:sticky; top:0; z-index:10;
    background:rgba(11,13,20,.82); backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
  }
  .nav{display:flex; align-items:center; gap:12px; height:56px}
  .brandmark{display:flex; align-items:center; gap:10px; color:var(--on-900)}
  .brandmark svg{width:18px; height:18px; color:var(--starlight)}
  .brandmark b{font-family:var(--mono); font-weight:600; letter-spacing:.14em; font-size:13px}
  .nav .tag{font-family:var(--mono); font-size:10px; letter-spacing:.12em; color:var(--on-500);
    border:1px solid var(--line); border-radius:999px; padding:3px 10px}
  .nav-links{margin-left:auto; display:flex; gap:20px; font-family:var(--mono); font-size:11px; letter-spacing:.1em}
  .nav-links a{color:var(--on-500)}
  .nav-links a:hover{color:var(--on-900); text-decoration:none}
  @media(max-width:560px){.nav-links{display:none}}

  /* ---- hero ---- */
  .hero{padding:88px 0 64px; position:relative}
  .hero .glint{width:44px; height:44px; margin-bottom:34px; position:relative}
  .hero .glint svg{width:100%; height:100%}
  .hero .glint::after{
    content:""; position:absolute; inset:-26px; border-radius:50%;
    background:radial-gradient(circle,rgba(132,169,255,.22),transparent 65%);
  }
  h1{
    font-family:var(--serif); font-weight:600; color:var(--on-900);
    font-size:clamp(2.3rem,9vw,4.4rem); line-height:1.3;
    letter-spacing:.01em; margin:26px 0 22px;
  }
  .dim{color:var(--on-500)}
  .hero p.lead{max-width:var(--measure); font-size:clamp(1rem,2.6vw,1.12rem); color:var(--on-700); margin:0 0 34px}
  .hero p.lead b, .section-lead b{color:var(--on-900); font-weight:600}
  .cta-row{display:flex; flex-wrap:wrap; gap:14px; align-items:center}
  .btn{
    display:inline-flex; align-items:center; gap:10px;
    font-family:var(--mono); font-size:13px; letter-spacing:.06em;
    padding:14px 26px; border-radius:5px; border:1px solid transparent;
    transition:transform var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease);
  }
  .btn:hover{text-decoration:none; transform:translateY(-1px)}
  .btn-primary{background:var(--spica); color:#fff}
  .btn-primary:hover{background:var(--spica-400)}
  .btn-ghost{border-color:var(--night-600); color:var(--on-700)}
  .btn-ghost:hover{border-color:var(--spica-300); color:var(--on-900)}
  .cta-note{font-family:var(--mono); font-size:11px; color:var(--on-500); letter-spacing:.04em; width:100%}

  /* ---- prompter demo ---- */
  .demo{
    margin:64px auto 0; max-width:860px; position:relative;
    border:1px solid var(--line); border-radius:12px; overflow:hidden;
    background:linear-gradient(180deg,var(--night-900),var(--night-950));
    box-shadow:0 30px 80px -30px rgba(0,0,0,.8);
  }
  .demo-bar{
    display:flex; align-items:center; gap:10px; padding:10px 16px;
    border-bottom:1px solid var(--line); background:var(--night-900);
    font-family:var(--mono); font-size:10px; letter-spacing:.14em; color:var(--on-500);
  }
  .demo-bar .rec{width:7px; height:7px; border-radius:50%; background:var(--ok); box-shadow:0 0 8px rgba(46,158,107,.7); flex:none}
  .demo-bar .right{margin-left:auto; display:flex; gap:14px}
  .demo-view{position:relative; height:min(58vh,420px); overflow:hidden}
  .demo-view::before,.demo-view::after{
    content:""; position:absolute; left:0; right:0; height:26%; z-index:3; pointer-events:none;
  }
  .demo-view::before{top:0; background:linear-gradient(180deg,var(--night-950),transparent)}
  .demo-view::after{bottom:0; background:linear-gradient(0deg,var(--night-950),transparent)}
  .marker{
    position:absolute; top:40%; left:0; right:0; z-index:2; pointer-events:none;
    border-top:1px solid rgba(79,128,247,.65);
  }
  .marker::before{
    content:""; position:absolute; left:14px; top:-7px;
    border:7px solid transparent; border-left-color:var(--spica-400);
  }
  /* 実機仕様に忠実に: 字サイズは全行均一(個別サイズ変更なし)・左揃え(センター揃えなし)。
     色の違いのみ強調記法(*色*)として実在する。 */
  .script{
    position:absolute; left:0; right:0; top:0; z-index:1;
    padding:40% 10% 0 14%; text-align:left;
    font-family:var(--serif); color:var(--on-900);
    font-size:clamp(1.3rem,4.4vw,2rem); line-height:2.05; font-weight:500;
    will-change:transform;
  }
  .script .s{display:block}
  .script .note{color:var(--on-500)}
  .script .em{color:var(--starlight)}
  .script rt{font-size:.4em; color:var(--on-500)}
  .demo-caption{
    text-align:center; font-family:var(--mono); font-size:11px; color:var(--on-500);
    letter-spacing:.08em; margin:14px 0 0;
  }

  /* ---- sections ---- */
  section{padding:96px 0; border-top:1px solid var(--line); position:relative}
  section.deep{background:linear-gradient(180deg,rgba(15,18,27,.6),transparent)}
  h2{
    font-family:var(--serif); font-weight:600; color:var(--on-900);
    font-size:clamp(1.7rem,5.6vw,2.6rem); line-height:1.45; margin:18px 0 16px;
  }
  .section-lead{max-width:var(--measure); color:var(--on-700); margin:0 0 48px}

  /* ---- stats strip ---- */
  .stats{
    display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line);
    border:1px solid var(--line); border-radius:12px; overflow:hidden; margin-top:56px;
  }
  .stats>div{background:var(--night-900); padding:22px 18px}
  .stats .v{font-family:var(--mono); color:var(--on-900); font-size:clamp(1.3rem,3.6vw,1.8rem);
    font-variant-numeric:tabular-nums; letter-spacing:.02em}
  .stats .v small{font-size:.55em; color:var(--on-500)}
  .stats .l{font-family:var(--mono); font-size:10px; letter-spacing:.12em; color:var(--on-500); margin-top:6px; display:block}
  @media(max-width:680px){.stats{grid-template-columns:1fr 1fr}}

  /* ---- engine philosophy note ---- */
  .engine-note{
    border:1px solid var(--line); border-radius:12px; background:var(--night-900);
    padding:26px 28px; margin:0 0 26px; max-width:860px;
  }
  .engine-note .k{font-family:var(--mono); font-size:10px; letter-spacing:.18em;
    color:var(--spica-300); text-transform:uppercase; display:block; margin-bottom:14px}
  .engine-note ul{list-style:none; margin:0; padding:0; font-size:.88rem; color:var(--on-500)}
  .engine-note li{padding:12px 0; border-top:1px solid var(--line); line-height:1.9}
  .engine-note li:first-child{border-top:none; padding-top:0}
  .engine-note li b{color:var(--on-900); font-weight:600}

  /* ---- real UI screenshots ---- */
  .fx-shot{padding:0; overflow:hidden; flex-direction:column; align-items:stretch; min-height:0; margin:0}
  .fx-shot img{width:100%; display:block}
  .fx-shot .shotbar{display:flex; justify-content:space-between; gap:12px; padding:10px 14px;
    font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; color:var(--on-500);
    border-top:1px solid var(--line)}
  .fx-shot .shotbar .ok{color:#7fd4ab}

  /* ---- flagship showcase ---- */
  .flag{
    display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center;
    padding:64px 0; border-bottom:1px solid var(--line);
  }
  .flag:last-of-type{border-bottom:none; padding-bottom:12px}
  .flag:nth-child(even) .fx{order:-1}
  @media(max-width:760px){
    .flag{grid-template-columns:1fr; gap:28px; padding:48px 0}
    .flag:nth-child(even) .fx{order:0}
  }
  .flag .k{font-family:var(--mono); font-size:10px; letter-spacing:.18em; color:var(--spica-300);
    text-transform:uppercase; display:block; margin-bottom:16px}
  .flag h3{
    font-family:var(--serif); font-weight:600; color:var(--on-900);
    font-size:clamp(1.35rem,4.4vw,1.8rem); line-height:1.55; margin:0 0 14px;
  }
  .flag p{margin:0; font-size:.92rem; color:var(--on-500); max-width:34em}
  .flag .spec{font-family:var(--mono); font-size:11px; color:var(--on-700); letter-spacing:.05em;
    margin-top:18px; display:flex; flex-wrap:wrap; gap:8px}
  .flag .spec span{border:1px solid var(--line); border-radius:4px; padding:4px 10px; background:var(--night-900)}
  .flag .spec .num{color:var(--starlight); font-variant-numeric:tabular-nums}

  /* fx panels (CSS diagrams) */
  .fx{
    border:1px solid var(--line); border-radius:12px; background:var(--night-900);
    padding:28px; min-height:220px; display:flex; align-items:center; justify-content:center;
    position:relative; overflow:hidden;
  }
  /* live edit fx */
  .fx-edit{flex-direction:column; gap:18px; font-family:var(--serif); color:var(--on-900)}
  .fx-edit .line{font-size:1.25rem; position:relative; text-align:center; line-height:1.9}
  .fx-edit .typed{color:var(--starlight); border-bottom:1px dashed rgba(132,169,255,.4)}
  .fx-edit .caret{display:inline-block; width:2px; height:1.15em; background:var(--spica-300);
    vertical-align:-0.22em; animation:blink 1.1s steps(1) infinite}
  @keyframes blink{50%{opacity:0}}
  .fx-edit .keep{font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; color:#7fd4ab}
  .fx-edit .readline{width:70%; border-top:1px solid rgba(79,128,247,.55); position:relative}
  /* multi output fx — 改行・読み位置は全出力で同一。違うのは見える範囲だけ */
  .fx-multi{gap:16px; flex-wrap:wrap}
  .fx-multi .mon{
    border:1px solid var(--night-600); border-radius:6px; background:var(--night-950);
    position:relative; padding:14px 10px; text-align:center;
    font-family:var(--serif); color:var(--on-900); line-height:1.9;
    display:flex; flex-direction:column; justify-content:center; overflow:hidden;
    white-space:nowrap; /* 折返しは明示 <br> のみ＝「改行一致」を図でも保証 */
  }
  .fx-multi .m1{width:44%; font-size:.98rem}
  .fx-multi .m2{width:21%; font-size:.6rem; padding-top:20px; padding-bottom:20px}
  .fx-multi .m3{width:24%; font-size:.64rem}
  .fx-multi .m3 .flip{display:block; transform:scaleX(-1)}
  .fx-multi .mon i{font-style:normal; color:var(--starlight)}
  .fx-multi .mon .ctx{color:var(--on-500); opacity:.55}
  .fx-multi .mon .hit{position:relative; display:block}
  .fx-multi .mon .hit::before{
    content:""; position:absolute; left:-14px; right:-14px; top:-.12em;
    border-top:1px solid rgba(79,128,247,.6);
  }
  .fx-multi .lbl{position:absolute; left:0; right:0; bottom:4px;
    font-family:var(--mono); font-size:8.5px; letter-spacing:.1em; color:var(--on-500)}
  .fx-multi .fxnote{
    width:100%; text-align:center; font-family:var(--mono); font-size:9.5px;
    letter-spacing:.1em; color:var(--on-500); margin-top:6px;
  }
  /* smooth fx */
  .fx-smooth{flex-direction:column; gap:8px}
  .fx-smooth svg{width:100%; max-width:340px; height:auto; display:block}
  .fx-smooth .cap{display:flex; justify-content:space-between; width:100%; max-width:340px;
    font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; color:var(--on-500)}
  /* restyle fx (size/leading/tracking live) */
  .fx-restyle{flex-direction:column; gap:22px}
  .fx-restyle .sample{
    font-family:var(--serif); color:var(--on-900); font-size:1.15rem; line-height:1.9;
    text-align:center;
  }
  .fx-restyle .sample .live{display:inline-block}
  @keyframes grow{from{font-size:1em; letter-spacing:0}to{font-size:1.32em; letter-spacing:.08em}}
  .fx-restyle .sample .live{animation:grow 3.4s ease-in-out infinite alternate}
  .fx-restyle .sliders{display:flex; flex-direction:column; gap:12px; width:100%; max-width:250px}
  .fx-restyle .sl{display:grid; grid-template-columns:44px 1fr; gap:12px; align-items:center;
    font-family:var(--mono); font-size:9.5px; letter-spacing:.12em; color:var(--on-500)}
  .fx-restyle .track{position:relative; border-top:1px solid var(--night-600); height:0}
  .fx-restyle .knob{
    position:absolute; top:-4px; left:30%; width:8px; height:8px; border-radius:50%;
    background:var(--spica-300);
  }
  @keyframes slide{from{left:22%}to{left:64%}}
  .fx-restyle .sl:first-child .knob{animation:slide 3.4s ease-in-out infinite alternate}
  .fx-restyle .keep{font-family:var(--mono); font-size:10px; letter-spacing:.12em; color:#7fd4ab}
  @media(prefers-reduced-motion:reduce){
    .fx-restyle .sample .live,.fx-restyle .sl:first-child .knob{animation:none}
  }
  /* output preview fx (operator screen with per-output thumbs) */
  .fx-preview{flex-direction:column; gap:12px; align-items:stretch}
  .fx-preview .opscreen{
    border:1px solid var(--night-600); border-radius:6px; background:var(--night-950);
    padding:16px 12px 12px; position:relative; font-family:var(--serif); color:var(--on-900);
    text-align:center; font-size:.86rem; line-height:2;
  }
  .fx-preview .opscreen .ctx{color:var(--on-500); opacity:.55}
  .fx-preview .band{
    position:absolute; left:6px; right:6px; top:30%; height:42%;
    background:rgba(31,95,230,.13); border:1px dashed rgba(79,128,247,.45); border-radius:3px;
  }
  .fx-preview .rlabel{
    position:absolute; right:9px; top:calc(30% + 4px);
    font-family:var(--mono); font-size:7px; letter-spacing:.08em; color:var(--spica-300);
  }
  .fx-preview .oplbl{
    display:block; margin-top:10px; font-family:var(--mono); font-size:8.5px;
    letter-spacing:.1em; color:var(--on-500);
  }
  .fx-preview .thumbs{display:flex; gap:8px}
  .fx-preview .thumb{
    flex:1; border:1px solid var(--night-600); border-radius:4px; background:var(--night-950);
    padding:9px 4px 7px; text-align:center; font-family:var(--serif); font-size:.56rem;
    color:var(--on-900); line-height:1.7; white-space:nowrap; overflow:hidden;
  }
  .fx-preview .thumb .t{display:block}
  .fx-preview .thumb .flipx{transform:scaleX(-1)}
  .fx-preview .thumb .flipy{transform:scaleY(-1)}
  .fx-preview .thumb .tag{
    display:block; margin-top:7px; font-family:var(--mono); font-size:7.5px;
    letter-spacing:.1em; color:var(--spica-300); border-top:1px solid var(--line); padding-top:6px;
  }
  .fx-preview .fxnote{
    text-align:center; font-family:var(--mono); font-size:9.5px;
    letter-spacing:.1em; color:var(--on-500);
  }
  /* voice fx (pace governor) */
  .fx-voice{flex-direction:column; gap:14px}
  .fx-voice svg{width:100%; max-width:340px; height:auto; display:block}
  .fx-voice .cap{display:flex; justify-content:space-between; width:100%; max-width:340px;
    font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; color:var(--on-500)}
  .fx-voice .cap .b{color:var(--spica-300)}
  /* typography fx */
  .fx-type{gap:34px}
  .fx-type .vtext{
    writing-mode:vertical-rl; font-family:var(--serif); color:var(--on-900);
    font-size:1.3rem; line-height:2.4; letter-spacing:.14em; height:190px;
  }
  .fx-type rt{font-size:.45em; color:var(--on-500); letter-spacing:0}
  .fx-type .vnote{writing-mode:vertical-rl; font-family:var(--mono); font-size:9.5px;
    letter-spacing:.3em; color:var(--on-500); height:190px}

  /* secondary features */
  .grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(255px,1fr)); gap:14px; margin-top:8px}
  .card{
    border:1px solid var(--line); border-radius:12px; padding:26px 24px;
    background:var(--night-900);
    transition:border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
  }
  .card:hover{border-color:var(--night-600); transform:translateY(-2px)}
  .card .ic{width:26px; height:26px; color:var(--starlight); margin-bottom:16px}
  .card .ic svg{width:100%; height:100%; stroke:currentColor; fill:none; stroke-width:1.5;
    stroke-linecap:round; stroke-linejoin:round}
  .card .k{font-family:var(--mono); font-size:10px; letter-spacing:.16em; color:var(--spica-300);
    text-transform:uppercase; display:block; margin-bottom:14px}
  .card h3{margin:0 0 8px; font-size:1rem; color:var(--on-900); font-weight:600}
  .card p{margin:0; font-size:.85rem; color:var(--on-500); line-height:1.8}
  .card .num{font-family:var(--mono); color:var(--starlight); font-variant-numeric:tabular-nums}

  /* ---- airgap architecture diagram ---- */
  .airgap{
    display:grid; grid-template-columns:1fr auto 1fr; gap:0; align-items:stretch;
    max-width:860px; margin:0 0 64px;
  }
  .device{
    border:1px solid var(--spica-400); border-radius:12px; background:var(--night-900);
    padding:22px; position:relative;
    box-shadow:0 0 0 1px rgba(79,128,247,.15), 0 0 44px -14px rgba(31,95,230,.5);
  }
  .device .dlabel, .cloud .dlabel{
    font-family:var(--mono); font-size:10px; letter-spacing:.16em; color:var(--on-500);
    text-transform:uppercase; display:flex; align-items:center; gap:8px; margin-bottom:16px;
  }
  .device .dlabel{color:var(--spica-300)}
  .chips{display:flex; flex-wrap:wrap; gap:8px}
  .chip{
    font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--on-900);
    border:1px solid var(--night-600); border-radius:5px; padding:7px 12px;
    background:var(--night-850); display:inline-flex; align-items:center; gap:7px;
  }
  .chip::before{content:"✓"; color:var(--ok); font-size:10px}
  .gap-paths{
    display:flex; flex-direction:column; justify-content:center; gap:20px;
    padding:0 6px; min-width:120px;
  }
  .path{position:relative; text-align:center}
  .path .wire{
    border-top:1px dashed var(--night-600); position:relative; margin:0 -7px;
  }
  .path .x{
    position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
    font-family:var(--mono); color:#e07b63; background:var(--night-950);
    padding:0 8px; font-size:.95rem; line-height:1;
  }
  .path .plabel{
    font-family:var(--mono); font-size:9px; letter-spacing:.1em; color:var(--on-500);
    display:block; margin-top:12px;
  }
  .cloud{
    border:1px dashed var(--night-600); border-radius:12px; padding:22px;
    color:var(--on-500); display:flex; flex-direction:column; justify-content:center;
    background:repeating-linear-gradient(-45deg,transparent 0 10px,rgba(42,49,68,.25) 10px 11px);
  }
  .cloud .items{font-family:var(--mono); font-size:11px; letter-spacing:.06em; line-height:2.4;
    text-decoration:line-through; text-decoration-color:rgba(224,123,99,.6)}
  @media(max-width:720px){
    .airgap{grid-template-columns:1fr}
    .gap-paths{flex-direction:row; justify-content:space-around; padding:26px 10px; min-width:0}
    .path{flex:1}
    .path .wire{margin:0; border-top:none; border-left:1px dashed var(--night-600);
      height:34px; width:0; margin:0 auto}
    .path .x{padding:4px 0}
  }

  /* ---- pricing compare strip ---- */
  .paycmp{
    max-width:860px; margin:8px 0 40px; border:1px solid var(--line); border-radius:12px;
    overflow:hidden; font-family:var(--mono);
  }
  .paycmp .prow{
    display:grid; grid-template-columns:130px 1fr; gap:0; align-items:center;
    padding:18px 22px; background:var(--night-900);
  }
  .paycmp .prow+.prow{border-top:1px solid var(--line)}
  .paycmp .who{font-size:10px; letter-spacing:.14em; color:var(--on-500); text-transform:uppercase}
  .paycmp .prow.spica .who{color:var(--spica-300)}
  .paycmp .lane{display:flex; align-items:center; gap:0; overflow:hidden; white-space:nowrap}
  .paycmp .yen{
    font-size:11px; color:var(--on-700); border:1px solid var(--night-600);
    border-radius:4px; padding:3px 8px; margin-right:14px; flex:none;
  }
  .paycmp .prow.subs .yen{color:#e07b63; border-color:rgba(224,123,99,.35)}
  .paycmp .prow.spica .yen{color:var(--starlight); border-color:rgba(132,169,255,.4)}
  .paycmp .cont{flex:1; border-top:1px dashed var(--night-600); position:relative}
  .paycmp .endnote{font-size:10px; letter-spacing:.1em; color:var(--on-500); margin-left:14px; flex:none}
  @media(max-width:560px){
    .paycmp .prow{grid-template-columns:1fr; gap:10px; padding:16px 18px}
    .paycmp .yen{margin-right:10px}
    .paycmp .endnote{margin-left:10px}
  }

  /* ---- constellation (studio) ---- */
  .constellation{
    max-width:640px; margin:52px auto 0; display:block; width:100%;
  }
  .constellation .cl-line{stroke:var(--night-600); stroke-width:.6; stroke-dasharray:2 3}
  .constellation .cl-label{font-family:var(--mono); font-size:7.5px; letter-spacing:.12em; fill:var(--on-500)}
  .constellation .cl-status{font-size:6px; fill:var(--night-600); letter-spacing:.1em}
  .constellation .cl-main-label{fill:var(--starlight)}
  @keyframes twinkle{50%{opacity:.45}}
  .constellation .tw{animation:twinkle 3.2s ease-in-out infinite}
  .constellation .tw2{animation:twinkle 4.4s ease-in-out .8s infinite}
  .constellation .tw3{animation:twinkle 5.1s ease-in-out 1.6s infinite}
  @media(prefers-reduced-motion:reduce){
    .constellation .tw,.constellation .tw2,.constellation .tw3{animation:none}
  }

  /* security ledger (compact) */
  .ledger{border-top:1px solid var(--line); max-width:860px}
  .row{
    display:grid; grid-template-columns:44px 1fr auto; gap:18px; align-items:baseline;
    padding:24px 4px; border-bottom:1px solid var(--line);
  }
  .row .glyph{font-family:var(--mono); font-size:1.05rem; text-align:center; color:var(--ok)}
  .row .glyph.w{color:var(--warn)}
  .row .glyph.p{color:var(--on-500)}
  .row h3{margin:0 0 6px; font-size:1.02rem; color:var(--on-900); font-weight:600; letter-spacing:.02em}
  .row p{margin:0; font-size:.88rem; color:var(--on-500); max-width:var(--measure)}
  .row .st{
    font-family:var(--mono); font-size:10px; letter-spacing:.14em; color:var(--on-500);
    border:1px solid var(--line); border-radius:999px; padding:4px 12px; white-space:nowrap;
  }
  .row .st.ok{color:#7fd4ab; border-color:rgba(46,158,107,.4)}
  .row .st.beta{color:#e6b566; border-color:rgba(200,134,30,.4)}
  @media(max-width:560px){
    .row{grid-template-columns:32px 1fr}
    .row .st{grid-column:2; justify-self:start; margin-top:10px}
  }
  .fineprint{
    margin-top:34px; padding:18px 22px; border-left:2px solid var(--night-600);
    font-size:.85rem; color:var(--on-500); max-width:var(--measure);
  }
  .fineprint b{color:var(--on-700); font-weight:600}

  /* pricing */
  .plans{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:8px}
  @media(max-width:860px){.plans{grid-template-columns:1fr}}
  .plan{border:1px solid var(--line); border-radius:12px; padding:30px 26px; background:var(--night-900); position:relative}
  .plan.pro{border-color:rgba(79,128,247,.45); background:linear-gradient(180deg,rgba(31,95,230,.10),var(--night-900) 55%)}
  .plan .rec{
    position:absolute; top:-11px; left:24px; font-family:var(--mono); font-size:9.5px;
    letter-spacing:.16em; color:#fff; background:var(--spica); border-radius:999px; padding:4px 12px;
  }
  .plan .name{font-family:var(--mono); font-size:11px; letter-spacing:.16em; color:var(--on-500); text-transform:uppercase}
  .plan .price{font-family:var(--mono); color:var(--on-900); font-size:1.9rem; margin:14px 0 4px; font-variant-numeric:tabular-nums}
  .plan .per{font-size:.78rem; color:var(--on-500); font-family:var(--mono); letter-spacing:.06em}
  .plan ul{list-style:none; margin:22px 0 0; padding:0; font-size:.86rem; color:var(--on-700)}
  .plan li{padding:7px 0; border-top:1px solid var(--line)}
  .plan li::before{content:"✓ "; font-family:var(--mono); color:var(--ok)}
  .volume{
    margin-top:14px; border:1px dashed var(--night-600); border-radius:12px;
    padding:20px 26px; display:flex; flex-wrap:wrap; gap:8px 26px; align-items:baseline;
    font-size:.85rem; color:var(--on-500);
  }
  .volume b{color:var(--on-900); font-weight:600; font-size:.92rem}
  .volume .num{font-family:var(--mono); color:var(--starlight); font-variant-numeric:tabular-nums}
  .no-sub{margin-top:26px; font-family:var(--serif); color:var(--on-700); font-size:1.05rem; max-width:var(--measure)}

  /* studio */
  .studio{background:linear-gradient(180deg,transparent,rgba(15,18,27,.85))}
  .promises{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line);
    border:1px solid var(--line); border-radius:12px; overflow:hidden; margin:44px 0 0}
  .promises>div{background:var(--night-900); padding:22px 20px}
  .promises b{display:block; color:var(--on-900); font-weight:600; font-size:.95rem; margin-bottom:4px}
  .promises span{font-size:.82rem; color:var(--on-500); line-height:1.7; display:block}
  @media(max-width:680px){.promises{grid-template-columns:1fr}}
  .apps{margin-top:44px; border-top:1px solid var(--line)}
  .app{
    display:grid; grid-template-columns:1fr auto; gap:8px 18px; align-items:baseline;
    padding:20px 4px; border-bottom:1px solid var(--line);
  }
  .app b{color:var(--on-900); font-weight:600; font-size:.98rem}
  .app small{display:block; color:var(--on-500); font-size:.84rem; grid-column:1}
  .app .st{font-family:var(--mono); font-size:10px; letter-spacing:.14em; color:var(--on-500)}
  .tagline{
    margin:64px 0 0; font-family:var(--serif); color:var(--on-900);
    font-size:clamp(1.3rem,4.4vw,1.9rem); line-height:1.7;
  }

  /* footer */
  footer{border-top:1px solid var(--line); padding:56px 0 72px; font-size:.82rem; color:var(--on-500)}
  .foot{display:flex; flex-wrap:wrap; gap:12px 28px; align-items:center}
  .foot .links{display:flex; flex-wrap:wrap; gap:20px; font-family:var(--mono); font-size:11px; letter-spacing:.08em}
  .foot .copy{margin-left:auto; font-family:var(--mono); font-size:11px; letter-spacing:.06em}
  @media(max-width:640px){.foot .copy{margin-left:0}}
  .foot-note{margin-top:26px; font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; color:var(--night-600)}

  /* reveals */
  .rv{opacity:0; transform:translateY(18px); transition:opacity .7s var(--ease), transform .7s var(--ease)}
  .rv.in{opacity:1; transform:none}
  @media(prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    .rv{opacity:1; transform:none; transition:none}
    .btn{transition:none}
    .fx-edit .caret{animation:none}
  }