/* ============================================================================
   App mocks : hairline drawings of the product in the site's own type.
   Every name, number and date in a mock is invented. No client facts.
   ========================================================================= */

.win{position:relative; border:1px solid var(--line); border-radius:18px; overflow:hidden;
  background:linear-gradient(180deg, rgba(18,13,46,.88), rgba(9,8,20,.94));
  box-shadow:0 50px 100px -50px rgba(0,0,0,.9), 0 0 0 1px rgba(184,153,104,.06)}
.win .chrome{display:flex; align-items:center; gap:12px; padding:12px 16px; border-bottom:1px solid var(--line-2); background:rgba(18,14,44,.88)}
.win .dots{display:flex; gap:6px}
.win .dots i{width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.13)}
.win .addr{font-family:var(--mono); font-size:10px; letter-spacing:.1em; color:var(--faint); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.win .head{display:flex; align-items:center; gap:12px 14px; flex-wrap:wrap; padding:15px 22px; border-bottom:1px solid var(--line-2)}
.mno{font-family:var(--mono); font-size:10px; letter-spacing:.16em; color:var(--gold-deep)}
.mname{font-family:var(--disp); font-weight:600; font-size:14.5px; color:var(--ink); letter-spacing:-.01em}
.mtag{font-family:var(--mono); font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-2);
  border:1px solid var(--line-2); border-radius:999px; padding:4px 9px; white-space:nowrap}
.mtag.gold{color:var(--gold-soft); border-color:var(--line-gold)}
.mtag.sp{margin-left:auto}

.tabs{display:flex; gap:22px; padding:0 22px; border-bottom:1px solid var(--line-2); overflow:hidden}
.tabs span{font-size:12px; font-weight:600; color:var(--faint); padding:12px 0; letter-spacing:.02em; white-space:nowrap}
.tabs span.on{color:var(--gold-soft); box-shadow:inset 0 -1px 0 var(--gold)}

/* conversation */
.thread{padding:26px 22px 20px; display:flex; flex-direction:column; gap:22px}
.turn{display:grid; grid-template-columns:76px 1fr; gap:16px; align-items:start}
.turn .who{font-family:var(--mono); font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:var(--faint); padding-top:4px}
.turn.you .said{font-family:var(--disp); font-weight:600; font-size:15px; line-height:1.6; color:var(--ink)}
.turn.it .said{font-size:14.4px; line-height:1.72; color:var(--ink-2); font-weight:500}
.turn.it .who{color:var(--gold-deep)}
.said b{color:var(--ink); font-weight:600}
.cite{margin-top:12px; display:flex; flex-wrap:wrap; gap:7px}
.cite span{font-family:var(--mono); font-size:9.5px; letter-spacing:.08em; color:var(--gold-soft);
  border:1px solid var(--line-gold); border-radius:6px; padding:4px 8px; background:rgba(184,153,104,.06)}
.rail{display:flex; flex-wrap:wrap; gap:8px 14px; padding:12px 22px; border-top:1px solid var(--line-2); background:rgba(255,255,255,.02)}
.rail .rk{font-family:var(--mono); font-size:9px; letter-spacing:.18em; text-transform:uppercase; color:var(--faint)}
.rail .rv2{font-size:12px; color:var(--ink-2); font-weight:500}
.composer{display:flex; align-items:center; gap:10px; margin:4px 22px 20px; padding:11px 14px;
  border:1px solid var(--line); border-radius:12px; background:rgba(255,255,255,.03)}
.composer .ph{font-size:13.5px; color:var(--faint); font-weight:500; min-width:0}
.composer .slash{margin-left:auto; font-family:var(--mono); font-size:9.5px; letter-spacing:.14em; color:var(--gold-deep);
  border:1px solid var(--line-2); border-radius:6px; padding:3px 7px; white-space:nowrap}
.mic{width:26px; height:26px; border-radius:50%; border:1px solid var(--line-gold); display:flex; align-items:center; justify-content:center; color:var(--gold-soft); flex:0 0 auto}
.mic svg{width:12px; height:12px}

/* review card */
.artifact{border:1px solid var(--line-2); border-radius:12px; padding:16px 18px; background:rgba(18,14,44,.9)}
.artifact .ah{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
.artifact .at{font-family:var(--disp); font-weight:600; font-size:14px; color:var(--ink)}
.artifact .aq{font-family:var(--mono); font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-soft)}
.artifact .ab{margin:10px 0 0; font-size:12.8px; line-height:1.6; color:var(--muted); font-weight:500}
.prov{margin-top:14px; display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); border:1px solid var(--line-2); border-radius:10px; overflow:hidden}
.prov div{padding:11px 13px; border-right:1px solid var(--line-2)}
.prov div:last-child{border-right:0}
.prov .k{font-family:var(--mono); font-size:8.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--faint)}
.prov .v{margin-top:6px; font-size:12px; color:var(--ink-2); font-weight:600}
.acts{display:flex; gap:9px; margin-top:14px; flex-wrap:wrap}
.mbtn{font-family:var(--disp); font-weight:700; font-size:11.5px; letter-spacing:.03em; border-radius:9px; padding:8px 14px; border:1px solid var(--line); color:var(--ink-2)}
.mbtn.go{background:linear-gradient(180deg, var(--gold-bright), var(--gold)); color:#231c0a; border:0}

/* tracker table */
.tbl{width:100%; border-collapse:collapse; font-size:12.5px}
.tbl th{font-family:var(--mono); font-weight:500; font-size:9px; letter-spacing:.18em; text-transform:uppercase; color:var(--faint); text-align:left; padding:12px 14px; border-bottom:1px solid var(--line-2)}
.tbl td{padding:14px; border-bottom:1px solid var(--line-2); color:var(--ink-2); font-weight:500; vertical-align:top; line-height:1.5}
.tbl tr:last-child td{border-bottom:0}
.tbl td b{color:var(--ink); font-weight:600}
.tbl .code{font-family:var(--mono); font-size:10px; letter-spacing:.1em; color:var(--gold-deep); white-space:nowrap}
.tbl .gen{font-family:var(--mono); font-size:8.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); display:block; margin-top:5px}
.tbl .gen.ok{color:var(--gold-soft)}
.tblscroll{overflow-x:auto}
.tblscroll .tbl{min-width:640px}

/* documents + search */
.hit{padding:14px 22px; border-bottom:1px solid var(--line-2)}
.hit:last-child{border-bottom:0}
.hit .hd{font-family:var(--mono); font-size:10px; letter-spacing:.1em; color:var(--gold-soft)}
.hit p{margin:7px 0 0; font-size:13.2px; line-height:1.62; color:var(--ink-2); font-weight:500}
.hit mark{background:rgba(184,153,104,.2); color:var(--gold-bright); padding:0 2px; border-radius:3px}
.state{display:flex; align-items:center; gap:10px; padding:11px 22px; border-bottom:1px solid var(--line-2); font-size:12.5px; color:var(--ink-2); font-weight:500}
.state .dot{width:6px; height:6px; border-radius:50%; background:var(--gold); flex:0 0 auto}
.state .dot.rest{background:var(--faint)}
.state .nm{flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.state .stt{font-family:var(--mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); white-space:nowrap}

/* draft pane */
.page2{padding:26px 30px; font-family:'Times New Roman', Times, serif; font-size:14px; line-height:1.7; color:#e9e5f4}
.page2 h4{margin:0 0 14px; text-align:center; font-size:14px; font-weight:700; letter-spacing:.04em}
.page2 p{margin:0 0 12px}
.sug{display:block; margin:0 0 12px; padding:10px 12px; border:1px solid var(--line-gold); border-radius:8px; background:rgba(184,153,104,.07)}
.sug del{color:#d9a0a0; text-decoration-thickness:1px}
.sug ins{color:var(--gold-bright); text-decoration:none; border-bottom:1px solid var(--gold-deep)}
.sug .sa{display:flex; gap:8px; margin-top:9px; font-family:var(--disp)}
.sug .sa span{font-size:10.5px; font-weight:700; border:1px solid var(--line); border-radius:7px; padding:4px 10px; color:var(--ink-2)}
.sug .sa span.go{background:rgba(184,153,104,.2); color:var(--gold-bright); border-color:var(--line-gold)}
.side{padding:20px 20px; border-left:1px solid var(--line-2); background:rgba(255,255,255,.015)}
.side .k{font-family:var(--mono); font-size:9px; letter-spacing:.18em; text-transform:uppercase; color:var(--faint); margin-bottom:12px}
.chk{display:flex; gap:9px; padding:9px 0; border-top:1px solid var(--line-2); font-size:12px; color:var(--ink-2); font-weight:500; line-height:1.5}
.chk i{font-style:normal; font-family:var(--mono); font-size:10px; color:var(--gold-soft); flex:0 0 14px}
.chk i.x{color:#d9a0a0}
.split{display:grid; grid-template-columns:1.55fr 1fr}

/* voice */
.say{padding:22px; display:flex; flex-direction:column; gap:14px}
.say .bub{align-self:flex-start; max-width:92%; border:1px solid var(--line-2); border-radius:14px; padding:13px 16px; background:rgba(18,14,44,.9);
  font-family:var(--script); font-size:16px; line-height:1.7; color:var(--ink); font-weight:500}
.say .bub small{display:block; margin-top:6px; font-family:var(--mono); font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:var(--faint)}
.wave{display:flex; align-items:center; gap:3px; height:26px}
.wave i{width:3px; border-radius:2px; background:var(--gold); opacity:.8}

/* access */
.walled{display:flex; align-items:center; gap:14px; padding:14px 22px; border-bottom:1px solid var(--line-2)}
.walled .lk{width:28px; height:28px; border-radius:8px; border:1px solid var(--line-gold); display:flex; align-items:center; justify-content:center; color:var(--gold-soft); flex:0 0 auto}
.walled .lk svg{width:13px; height:13px}
.walled .t{font-size:13px; color:var(--ink); font-weight:600}
.walled .s2{font-size:12px; color:var(--muted); font-weight:500; margin-top:2px}
.chain{display:flex; align-items:stretch; gap:0; padding:20px 22px; overflow:hidden}
.chain .blk{flex:1 1 0; min-width:0; border:1px solid var(--line-2); padding:12px 12px; background:rgba(18,14,44,.9)}
.chain .blk + .blk{border-left:0}
.chain .blk .h{font-family:var(--mono); font-size:8.5px; letter-spacing:.12em; color:var(--gold-deep)}
.chain .blk .e{font-size:11.5px; color:var(--ink-2); font-weight:600; margin-top:7px; line-height:1.4}
.chain .blk .p{font-family:var(--mono); font-size:8.5px; color:var(--faint); margin-top:7px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

/* airy section scaffolding shared by home and product pages */
.air{padding:clamp(88px,11vw,170px) 0; position:relative}
.air > .wrap{position:relative}
.air > .wrap::before{content:""; position:absolute; inset:-80px 0; z-index:-1; pointer-events:none;
  background:radial-gradient(90% 70% at 50% 50%, rgba(7,6,15,.78), transparent 78%)}
.air + .air{border-top:1px solid var(--line-2)}
.duo{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.25fr); gap:clamp(34px,6vw,84px); align-items:center}
.duo.flip{grid-template-columns:minmax(0,1.25fr) minmax(0,.9fr)}
.duo .copy .head{max-width:14ch}
.duo .copy .lede{max-width:36ch}
.tag{display:inline-block; font-family:var(--mono); font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-soft); border:1px solid var(--line-gold); border-radius:999px; padding:5px 11px; margin-top:22px}
.soon{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:18px; margin-top:clamp(36px,5vw,60px)}
.soon .card{min-height:0}
.soon .card .pill{margin-bottom:16px}
.fine{margin-top:34px; max-width:62ch; font-size:12.5px; line-height:1.7; color:var(--faint); font-weight:500}

@media(max-width:900px){
  .duo, .duo.flip{grid-template-columns:1fr}
  .duo .copy .head, .duo .copy .lede{max-width:none}
  .split{grid-template-columns:1fr}
  .side{border-left:0; border-top:1px solid var(--line-2)}
}
@media(max-width:760px){
  .turn{grid-template-columns:1fr; gap:6px}
  .thread{padding:20px 16px 14px}
  .composer{margin:2px 16px 16px}
  .page2{padding:20px 18px}
  .chain{flex-direction:column}
  .chain .blk + .blk{border-left:1px solid var(--line-2); border-top:0}
  .win .head, .rail, .hit, .state, .walled{padding-left:16px; padding-right:16px}
}
.duo > *{min-width:0}