/* Field note 008, Private Model. Site look from lab.css; dark only where the ciphertext lives. */
:root{ --vault:#11161b; --vault-ink:#2b3743; --open:#2fbf8a }
.vh{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.small{font-size:14px; color:var(--muted)}

/* Hero */
.pm-hero{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:clamp(24px,4vw,56px); align-items:center; padding-block:56px 40px}
.pm-hero h1{font-size:clamp(40px,5.8vw,72px); margin-top:14px; display:grid}
.pm-hero h1 span{opacity:0; transform:translateY(14px); animation:pm-rise .7s cubic-bezier(.2,.7,.2,1) forwards}
.pm-hero h1 span:nth-child(2){animation-delay:.3s}
.pm-hero h1 .em{animation-delay:.6s; color:var(--accent); font-style:italic; font-weight:600}
@keyframes pm-rise{to{opacity:1; transform:none}}
.pm-hero .sub{font-size:20px; color:var(--muted); margin:18px 0 0; max-width:42ch}
.pm-hero .tag{font-family:var(--display); font-size:20px; font-style:italic; margin:20px 0 0}
.pm-vault{margin:0}
.vault-screen{position:relative; height:clamp(300px,36vw,420px); background:var(--vault); border-radius:8px; overflow:hidden; box-shadow:0 24px 50px -24px rgba(22,27,32,.55); border:1px solid #0b0e12}
.rain{position:absolute; inset:0; margin:0; padding:14px; font:12.5px/1.45 var(--mono); color:var(--vault-ink); white-space:pre-wrap; word-break:break-all; user-select:none}
.rain .p{color:#8ff0c6; background:rgba(47,191,138,.14); text-shadow:0 0 12px rgba(47,191,138,.85)}
.vault-label{position:absolute; left:14px; bottom:12px; font:500 .6875rem var(--mono); letter-spacing:.14em; text-transform:uppercase; color:#8a96a3; background:var(--vault); padding:3px 8px; border:1px solid #2b3540; border-radius:3px}
.key{display:inline-flex; align-items:center; gap:10px; margin-top:14px; font:600 16px var(--body); padding:12px 18px; border-radius:4px; border:1.5px solid var(--ink); background:var(--surface); color:var(--ink); cursor:pointer; touch-action:none; user-select:none}
.key.held{background:var(--ink); color:var(--paper)}
.key-ico{width:16px; height:16px; border:2.5px solid currentColor; border-radius:50%; position:relative}
.key-ico::after{content:''; position:absolute; left:11px; top:4px; width:9px; height:3px; background:currentColor}
.pm-vault figcaption{font-size:14px; color:var(--muted); margin-top:10px; max-width:48ch}

/* Stats */
.pm-stats{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); margin:12px 0 40px}
.pm-stats div{padding:22px 18px; border-right:1px solid var(--rule)}
.pm-stats div:last-child{border-right:0}
.pm-stats b{display:block; font:700 clamp(28px,3.4vw,42px) var(--display)}
.pm-stats span{font-family:var(--mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}

/* Drag-the-key slider */
.pm-block{padding-block:40px 8px}
.pm-block h2{font-size:clamp(28px,3.6vw,40px); margin:8px 0 12px}
.pm-block .narrow p{color:var(--muted)}
.slider{position:relative; margin:24px 0 0; border:1px solid var(--rule); border-radius:8px; overflow:hidden; min-height:480px; --x:55%; touch-action:pan-y; cursor:ew-resize}
.layer{position:absolute; inset:0; padding:24px clamp(18px,3vw,32px)}
.layer h3{font:500 .6875rem var(--mono); letter-spacing:.14em; text-transform:uppercase; margin:20px 0 8px}
.layer pre{margin:0; font:12.5px/1.55 var(--mono); white-space:pre-wrap; word-break:break-all; max-height:7.8em; overflow:hidden}
.cipher{background:var(--vault); color:#7d8a98}
.cipher h3{color:#8a96a3}
.cipher pre.err{color:#ff9a85; word-break:normal}
.plain{background:var(--surface); clip-path:inset(0 0 0 var(--x))}
.plain h3{color:var(--muted)}
.plain pre{color:var(--ink)}
.plain pre.big{font:700 clamp(22px,3vw,32px) var(--display)}
.plain pre.ok{color:var(--accent); font-weight:500}
.stamp{display:inline-block; font:500 .6875rem var(--mono); letter-spacing:.12em; text-transform:uppercase; border-radius:3px; padding:3px 8px; margin:0}
.stamp.host{border:1.5px solid #8a96a3; color:#c3ccd5}
.plain .stamp{float:right; border:1.5px solid var(--ink); color:var(--ink)}
.handle{position:absolute; top:0; bottom:0; left:var(--x); width:0; z-index:3}
.handle::before{content:''; position:absolute; top:0; bottom:0; left:-1px; width:2px; background:var(--accent)}
.handle span{position:absolute; top:50%; left:-22px; width:44px; height:44px; margin-top:-22px; border-radius:50%; background:var(--paper); border:2px solid var(--accent); box-shadow:0 6px 18px rgba(22,27,32,.25)}
.handle span::before{content:''; position:absolute; inset:12px; border:2.5px solid var(--accent); border-radius:50%}
.handle:focus-visible span{outline:3px solid var(--accent); outline-offset:3px}

/* What we proved, checkpoints */
.proved{padding-left:22px}
.proved li{margin:0 0 14px}
.steps{width:100%; border-collapse:collapse; font-size:16px; font-variant-numeric:tabular-nums; margin:8px 0 6px}
.steps th,.steps td{text-align:left; padding:7px 8px; border-top:1px solid var(--rule)}
.steps th{font-weight:600; color:var(--muted)}
.steps td.same{color:#0d6b4f; font-weight:600}

/* Terminal */
.term{margin:20px auto 8px; max-width:880px; background:var(--vault); border:1px solid #0b0e12; border-radius:8px; overflow:hidden; box-shadow:0 24px 50px -28px rgba(22,27,32,.55)}
.chrome{display:flex; align-items:center; gap:7px; padding:10px 14px; background:#1a2027; font:.75rem var(--mono); color:#8a96a3}
.chrome i{width:10px; height:10px; border-radius:50%; background:#3a444f} .chrome span{margin-left:10px}
.screen{font:13.5px/1.7 var(--mono); padding:16px 18px; min-height:280px; max-height:420px; overflow:auto; color:#c9d2dc}
.screen .host{color:#b7a9ff} .screen .owner{color:#8ff0c6} .screen .dim{color:#5f6b78} .screen .err{color:#ff9a85}
.screen .out{color:#fff; font-size:19px} .screen .out em{font-style:normal; background:var(--open); color:#06130d; padding:0 4px; border-radius:3px}
.prompt{display:flex; gap:10px; align-items:center; border-top:1px solid #222a33; padding:10px 14px; font:15px var(--mono); color:#8ff0c6}
.prompt input{flex:1; min-width:0; background:transparent; border:0; color:#fff; font:inherit; outline:none}
.prompt button{font:600 14px var(--body); border:0; border-radius:4px; padding:8px 14px; background:var(--paper); color:var(--ink); cursor:pointer}

/* Steps list */
.pm-steps{list-style:none; margin:20px 0 18px; padding:0; display:grid}
.pm-steps li{display:grid; grid-template-columns:7.5rem minmax(0,1fr); gap:4px 18px; padding:16px 0; border-top:1px solid var(--rule)}
.pm-steps .s{grid-row:1 / span 2; align-self:start; justify-self:start; font:500 .6875rem var(--mono); letter-spacing:.12em; text-transform:uppercase; border:1.5px solid var(--ink); border-radius:3px; padding:3px 8px}
.pm-steps .s.sealed{background:var(--ink); color:var(--paper)}
.pm-steps .t{font:700 22px var(--display)}
.pm-steps .d{font-size:16px; color:var(--muted)}
.compare th{width:auto}
.compare td{font-variant-numeric:tabular-nums}

/* The Private Model offer */
.offer{background:var(--ink); color:var(--paper); border-radius:10px; padding:clamp(24px,4vw,44px); margin:56px 0 24px}
.offer .eyebrow{color:#9fb6d6}
.offer h2{font-size:clamp(30px,4.6vw,48px); margin:10px 0 12px; color:var(--paper)}
.offer .pitch{font-size:21px; max-width:46ch; margin:0 0 24px; color:#e6e1d6}
.offer-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin:0 0 22px}
.offer-grid div{border-top:2px solid #9fb6d6; padding-top:12px}
.offer-grid h3{font-size:22px; margin:0 0 6px; color:var(--paper)}
.offer-grid p{font-size:16px; margin:0; color:#d6d0c3}
.offer .for{font-size:16px; color:#d6d0c3; max-width:70ch; margin:0}
.btn.light{background:var(--paper); color:var(--ink)}
.btn.ghost.light{background:transparent; color:var(--paper); border-color:var(--paper)}

@media (max-width:860px){
  .pm-hero{grid-template-columns:1fr}
  .pm-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pm-stats div:nth-child(2){border-right:0} .pm-stats div:nth-child(-n+2){border-bottom:1px solid var(--rule)}
  .slider{min-height:560px}
  .pm-steps li{grid-template-columns:1fr} .pm-steps .s{grid-row:auto}
  .offer-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){ .pm-hero h1 span{animation:none; opacity:1; transform:none} }