/* ZIA Traders — design language adapted from openjev.com principles:
   warm paper, ink hard-borders, hard shadows, zero gradients,
   mono micro-labels + heavy grotesk headings, honest data tables.
   Palette kept professional: no purple/blue gradients. */

:root{
  --ink:#1A1917;
  --paper:#F7F6F0;
  --panel:#FFFDF8;
  --line:#C8C5B7;
  --muted:#66645E;
  --lime:#D9FF3D;
  --green:#0C5C36;
  --green-soft:#E4EFE6;
  --red:#B42318;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--paper);color:var(--ink)}
body{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace}
a{color:inherit}

.page{width:min(1160px,calc(100% - 32px));margin:auto;padding:22px 0 50px}

/* compliance notice */
.notice{margin:0 0 14px;border:1.5px solid var(--ink);background:var(--panel);padding:9px 12px;font-size:.68rem;line-height:1.5}
.notice strong{text-transform:uppercase}

/* mast */
.mast{display:flex;justify-content:space-between;gap:20px;align-items:center;padding-bottom:14px;border-bottom:1.5px solid var(--ink);font-size:.72rem;font-weight:900;text-transform:uppercase}
.brand{color:inherit;text-decoration:none;font-size:1.5rem;letter-spacing:-.08em;font-family:Arial,Helvetica,sans-serif;font-weight:900}
.tagline{text-align:right;color:var(--muted)}
.mast-actions{display:flex;align-items:center;gap:16px}

/* buttons — hard shadow, no gradient, no radius */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1.5px solid var(--ink);background:var(--lime);box-shadow:3px 3px 0 var(--ink);padding:12px 15px;color:var(--ink);cursor:pointer;font:900 .72rem/1 ui-monospace,monospace;text-transform:uppercase;text-decoration:none;white-space:nowrap}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.btn.small{padding:10px 12px;font-size:.65rem}
.btn.big{padding:15px 20px;font-size:.8rem}
.btn.ghost{background:#fff;box-shadow:2px 2px 0 var(--ink)}

/* hero */
.hero{padding:42px 0 28px}
.eyebrow{margin:0 0 8px;font-size:.65rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.hero h1{max-width:920px;margin:0;font:900 clamp(2.5rem,5vw,5rem)/.92 Arial,Helvetica,sans-serif;letter-spacing:-.06em}
.hero mark{display:inline-block;background:var(--lime);padding:0 .08em;color:var(--ink)}
.lede{max-width:730px;margin:28px 0 24px;font:500 1rem/1.6 Arial,Helvetica,sans-serif;color:#2b2a26}
.truth-strip{display:flex;flex-wrap:wrap;border-top:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink)}
.truth-strip span{padding:10px 16px 10px 0;margin-right:16px;font-size:.68rem;font-weight:900;text-transform:uppercase}
.truth-strip span:last-child{color:var(--green)}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.device-note{margin:12px 0 0;color:var(--muted);font-size:.7rem;font-weight:700;max-width:640px;line-height:1.5}

/* cards */
.card{background:var(--panel);border:1.5px solid var(--ink);padding:24px;margin-top:20px}
.section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}
.section-head h2{margin:0;font:900 1.6rem/1 Arial,Helvetica,sans-serif;letter-spacing:-.04em}
.explain{color:var(--muted);font-size:.72rem;line-height:1.55;max-width:720px}
.fine{margin:12px 0 0;color:var(--muted);font-size:.65rem;line-height:1.5}
.fine code{background:#ECEBE3;padding:1px 5px}

/* stock table */
.quality-card{margin:14px 0 0;border:1.5px solid var(--ink);background:#fff}
.quality-heading{display:flex;justify-content:space-between;gap:12px;padding:10px 12px;border-bottom:1.5px solid var(--ink);font-size:.62rem;text-transform:uppercase}
.quality-heading span{color:var(--muted);text-align:right}
.quality-scroll{overflow-x:auto}
.quality-card table{width:100%;border-collapse:collapse;font-size:.7rem}
.quality-card th,.quality-card td{padding:10px 12px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}
.quality-card th{font-size:.6rem;text-transform:uppercase;color:var(--muted)}
.quality-card th:last-child,.quality-card td:last-child{border-right:0}
.quality-card tbody tr:last-child td{border-bottom:0}
.quality-card tbody tr.selected{background:var(--lime);font-weight:900}
.quality-card>p{margin:0;border-top:1.5px solid var(--ink);padding:9px 12px;color:var(--muted);font-size:.62rem;line-height:1.5}

/* phases */
.phases{display:grid;grid-template-columns:1fr 1fr 1fr;border:1.5px solid var(--ink);margin-top:16px;background:#fff}
.phase{min-height:118px;padding:14px;border-right:1.5px solid var(--ink)}
.phase:last-child{border:0}
.phase small{display:block;font-size:.6rem;text-transform:uppercase;font-weight:900;color:var(--green)}
.phase strong{display:block;margin:12px 0 7px;font-size:1.4rem;font-family:Arial,Helvetica,sans-serif;letter-spacing:-.03em}
.phase span{display:block;font-size:.66rem;color:var(--muted);line-height:1.5}

/* method map */
.method-map{display:grid;grid-template-columns:1.15fr auto 1fr auto 1.4fr;gap:12px;align-items:center;margin:20px 0}
.method-map>div:not(.arrow):not(.fork),.method-outputs div{border:1.5px solid var(--ink);background:var(--panel);padding:14px}
.method-map small{display:block;margin-bottom:8px;font-size:.58rem;font-weight:900;text-transform:uppercase;color:var(--muted)}
.method-map strong{font-size:.74rem}
.method-model{background:var(--lime)!important}
.method-model small{color:var(--ink)}
.arrow,.fork{text-align:center;font-size:1.4rem;font-weight:900}
.method-outputs{display:grid;gap:7px}
.method-outputs div:last-child{background:var(--green-soft)}

/* order form */
.inputs{display:grid;grid-template-columns:1.25fr 1fr;gap:18px;margin-top:18px}
.inputs label{font-size:.66rem;font-weight:900;text-transform:uppercase;display:block}
.inputs textarea,.inputs input{display:block;width:100%;margin-top:7px;border:1.5px solid var(--ink);border-radius:0;background:#fff;padding:11px;color:var(--ink);font:500 .82rem/1.5 ui-monospace,monospace}
.inputs textarea{min-height:170px;resize:vertical}
.order-side{display:grid;gap:12px;align-content:start}
.order-actions{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:12px}
.order-actions button{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1.5px solid var(--ink);background:var(--green);box-shadow:3px 3px 0 var(--ink);padding:13px 15px;color:#fff;cursor:pointer;font:900 .72rem/1 ui-monospace,monospace;text-transform:uppercase}
.order-actions button:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.order-actions span{color:var(--muted);font-size:.65rem;font-weight:900}
.phases.three{margin-top:18px}

/* race lanes */
.race{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:20px}
.lane{display:flex;flex-direction:column;min-height:420px;border:1.5px solid var(--ink);background:var(--panel);padding:22px}
.lane.direct{box-shadow:inset 0 -8px 0 var(--lime)}
.lane.generated{box-shadow:inset 0 -8px 0 var(--green)}
.lane-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.lane h2{margin:0;font:900 1.6rem/1 Arial,Helvetica,sans-serif;letter-spacing:-.04em}
.badge{padding:6px 8px;background:var(--lime);font-size:.58rem;font-weight:900;text-transform:uppercase;white-space:nowrap}
.badge.dark{background:var(--ink);color:var(--lime)}
.output{flex:1;margin:12px 0 16px;border-top:1px solid var(--line);padding:14px 0;font:700 .76rem/1.6 ui-monospace,monospace}
.choice{display:grid;grid-template-columns:minmax(150px,1.2fr) 1fr 52px;gap:8px;align-items:center;margin:0 0 11px}
.choice-label{display:grid;grid-template-columns:22px 1fr;align-items:center;gap:5px;min-width:0}
.choice-label b{font-size:.76rem;color:var(--green)}
.choice-label small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.64rem}
.bar{height:20px;border:1.5px solid var(--ink);background:#fff}
.bar i{display:block;height:100%;background:var(--lime)}
.lane.generated .bar i{background:var(--green)}
.choice em{font-style:normal;text-align:right}
.output.terms p{font:500 .76rem/1.6 Arial,Helvetica,sans-serif;margin:0 0 12px;color:#2b2a26}
.output.terms p b{text-transform:uppercase;font-size:.68rem;font-family:ui-monospace,monospace}
.muted{color:var(--muted)}
.metrics{display:grid;grid-template-columns:repeat(3,1fr);margin:0;border-top:1.5px solid var(--ink);padding:0}
.metrics div{padding:11px 8px 0;border-right:1px solid var(--line)}
.metrics div:last-child{border:0}
.metrics dt{font-size:.56rem;text-transform:uppercase;color:var(--muted)}
.metrics dd{margin:6px 0 0;font-weight:900;font-size:.78rem}

/* verdict */
.verdict{display:grid;grid-template-columns:1fr auto;align-items:center;margin-top:20px;border:1.5px solid var(--ink);background:var(--ink);color:var(--paper);padding:24px;gap:8px}
.verdict span{font-size:.66rem;font-weight:900;text-transform:uppercase}
.verdict strong{font-size:1.5rem;font-family:Arial,Helvetica,sans-serif;letter-spacing:-.03em}
.verdict strong a{color:var(--lime);text-decoration:none;border-bottom:3px solid var(--lime)}
.verdict p{grid-column:1/-1;margin:10px 0 0;color:#BBB9B0;font-size:.66rem;line-height:1.6}
.verdict .hl{color:var(--lime)}

/* faq */
details{margin-top:20px;border:1.5px solid var(--ink);background:var(--panel)}
summary{cursor:pointer;padding:17px 20px;font-size:.75rem;font-weight:900;text-transform:uppercase}
.details-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px 24px;padding:0 20px 18px;border-top:1px solid var(--line)}
.details-grid p{font:500 .78rem/1.6 Arial,Helvetica,sans-serif}

footer{display:flex;justify-content:space-between;gap:15px;margin-top:40px;padding-top:12px;border-top:1.5px solid var(--ink);font-size:.65rem;font-weight:700;flex-wrap:wrap}

@media(max-width:750px){
  .page{width:calc(100% - 16px);padding:12px 0 30px}
  .mast{flex-direction:column;align-items:flex-start}
  .tagline{text-align:left}
  .hero{padding:26px 0 18px}
  .hero h1{font-size:clamp(2.2rem,11vw,3.8rem)}
  .card,.lane{padding:16px}
  .section-head{flex-direction:column}
  .method-map{grid-template-columns:1fr;margin:14px 0}
  .arrow,.fork{transform:rotate(90deg)}
  .inputs,.race,.details-grid,.phases{grid-template-columns:1fr}
  .phase{min-height:auto;border-right:0;border-bottom:1.5px solid var(--ink)}
  .phase:last-child{border-bottom:0}
  .verdict{grid-template-columns:1fr}
  .hero-actions .btn{flex:1}
}