/* Argus download page. Builds on /css/home.css tokens and components. */

/* hero */
.js-version:not(:empty) { margin-left:.5em; }
.dl-page .sec-head { max-width:880px; }
.dl-hero .hero-inner { align-items:start; padding-block:88px 96px; }
.dl-hero h1 { font-size:clamp(38px,5vw,60px); }
.dl-hero .lede { max-width:44ch; font-size:18px; }
.dl-kicker { display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; }
.dl-beta { display:inline-block; padding:3px 8px; border:1px solid rgba(20,228,208,.35); border-radius:4px; font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--teal); vertical-align:middle; }

.dl-card { margin-top:34px; max-width:500px; }
.dl-btn { display:flex; align-items:center; gap:14px; width:100%; background:var(--teal); color:var(--navy); border:0; border-radius:8px; padding:16px 20px; font:600 17px/1.2 var(--sans); text-align:left; text-decoration:none; cursor:pointer; transition:background .15s, transform .15s; }
.dl-btn:hover { background:#3FF0DF; transform:translateY(-1px); }
.dl-btn svg.apple { width:26px; height:26px; flex:none; }
.dl-btn .dl-btn-sub { display:block; margin-top:5px; font-family:var(--mono); font-weight:400; font-size:12px; letter-spacing:.04em; opacity:.8; }
.dl-btn .dl-arrow { margin-left:auto; width:20px; height:20px; flex:none; }
.dl-meta { display:flex; flex-wrap:wrap; gap:8px 20px; margin-top:16px; font-family:var(--mono); font-size:12px; letter-spacing:.04em; color:var(--on-dark-2); }
.dl-meta span { display:inline-flex; align-items:center; gap:7px; }
.dl-meta svg { width:14px; height:14px; color:var(--teal); }
.dl-alt { margin-top:16px; font-size:14px; color:var(--on-dark-2); }
.dl-alt a { color:var(--teal); text-decoration:underline; text-underline-offset:3px; }

/* agents pane, drawn as the dark ledger */
.dl-ledger .ledger-head .pill { font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:#FF7A93; }
.dl-rows { margin:0; }
.dl-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 14px; align-items:center; padding:13px 18px; border-bottom:1px solid var(--line-dark); }
.dl-row:last-child { border-bottom:0; }
.dl-row .who { display:flex; align-items:center; gap:8px; color:#fff; }
.dl-row .who i { width:7px; height:7px; border-radius:50%; flex:none; }
.dl-row .what { grid-column:1; grid-row:2; color:#8FA3BE; font-size:11.5px; overflow-wrap:anywhere; }
.dl-row .tag { grid-column:2; grid-row:1 / span 2; justify-self:end; text-transform:uppercase; white-space:nowrap; }
.dot-ok { background:var(--teal); }
.dot-watch { background:#F6B04A; }
.dot-bad { background:#FF7A93; }
.tag-ok { color:var(--teal); background:rgba(20,228,208,.08); border:1px solid rgba(20,228,208,.3); }

/* agents recognised */
.dl-agents .customers-inner { padding-block:34px; }
.chips { display:flex; flex-wrap:wrap; gap:10px; }
.chip { font-family:var(--mono); font-size:12.5px; color:var(--ink); background:var(--paper); border:1px solid var(--line-2); border-radius:4px; padding:6px 10px; }
.chip.more { background:transparent; border-style:dashed; color:var(--muted); }

/* what you get */
.dl-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:52px; }
.dl-cards .card { background:#fff; border:1px solid var(--line); border-radius:12px; padding:30px; }
.dl-cards .ico { width:42px; height:42px; border-radius:8px; background:var(--mint); color:var(--teal-deep); display:flex; align-items:center; justify-content:center; margin-bottom:20px; }
.dl-cards .ico svg { width:21px; height:21px; }
.dl-cards h3 { font-size:20px; margin-bottom:10px; }
.dl-cards p { font-size:16px; }
.dl-cards b { color:var(--ink); font-weight:600; }

/* before you start */
.prep-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:52px; }
.prep { background:#fff; border:1px solid var(--line); border-top:2px solid var(--ink); border-radius:0 0 12px 12px; padding:28px 30px; }
.prep h3 { font-family:var(--mono); font-size:12px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--ink); margin-bottom:18px; }
.prep p { font-size:15.5px; }
.prep p + p { margin-top:12px; }
.prep a, .verify a { color:var(--teal-deep); text-decoration:underline; text-underline-offset:3px; }
.prep b { color:var(--ink); font-weight:600; }
.req-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:14px; }
.req-list li { display:flex; gap:12px; font-size:15.5px; line-height:1.55; }
.req-list svg { width:18px; height:18px; color:var(--teal-deep); flex:none; margin-top:3px; }

details.verify { margin-top:24px; background:#fff; border:1px solid var(--line); border-radius:12px; }
details.verify summary { cursor:pointer; list-style:none; padding:18px 22px; display:flex; align-items:center; gap:10px; font-family:var(--mono); font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink); }
details.verify summary::-webkit-details-marker { display:none; }
details.verify summary svg { width:16px; height:16px; color:var(--teal-deep); transition:transform .2s; }
details.verify[open] summary svg { transform:rotate(90deg); }
details.verify .vbody { padding:0 22px 22px; font-size:15px; }
.mono, code { font-family:var(--mono); }
.codeblock { display:block; background:var(--navy-3); color:var(--on-dark); border-radius:8px; padding:14px 16px; font-size:12.5px; line-height:1.7; overflow-x:auto; margin:10px 0 0; white-space:pre; }
.codeblock .c { color:var(--teal); }
.hash { display:inline-block; max-width:100%; margin-top:10px; word-break:break-all; background:var(--paper); border:1px solid var(--line); border-radius:4px; padding:4px 8px; font-size:12px; color:var(--ink); }

/* install */
.dl-steps { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:52px; }
.dl-step { background:#fff; border:1px solid var(--line); border-radius:12px; padding:26px; }
.dl-step .n { font-family:var(--mono); font-size:12px; letter-spacing:.16em; color:var(--teal-deep); }
.dl-step h3 { font-size:18px; line-height:1.3; margin:10px 0 10px; }
.dl-step p { font-size:15px; }
.dl-step b { color:var(--ink); font-weight:600; }
.dl-step code { font-size:13px; color:var(--ink); }
.dl-step .tip { margin-top:12px; font-size:13.5px; line-height:1.5; background:var(--mint); border:1px solid #CDEFEB; border-radius:6px; padding:10px 12px; }

/* feedback, the closing navy band */
.dl-feedback .demo-inner { grid-template-columns:1fr; gap:0; }
.dl-feedback .cta-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; }

/* sticky download bar on phones, once the hero button has scrolled away */
.dl-sticky { position:fixed; left:0; right:0; bottom:0; z-index:60; display:none; padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px)); background:var(--navy-3); border-top:1px solid var(--line-dark); transform:translateY(110%); transition:transform .25s ease; }
.dl-sticky.on { transform:none; }
.dl-sticky .dl-btn { justify-content:center; padding:12px 16px; font-size:15px; }

.dl-hero .hero-inner > *, .prep-grid > *, .dl-cards > *, .dl-steps > * { min-width:0; }

@media (max-width: 1080px) {
  .dl-steps { grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 980px) {
  .dl-hero .hero-inner { padding-block:56px 64px; }
  .dl-cards, .prep-grid { grid-template-columns:1fr; }
  .dl-card { max-width:none; }
  .dl-sticky { display:block; }
}
@media (max-width: 560px) {
  .dl-btn { padding:14px 16px; font-size:15.5px; }
  .dl-btn svg.apple { width:22px; height:22px; }
  .dl-steps { grid-template-columns:1fr; }
  .dl-row { padding:12px 14px; }
  .prep, .dl-cards .card { padding:24px; }
  footer { padding-bottom:calc(84px + env(safe-area-inset-bottom,0px)); }
}
@media (prefers-reduced-motion: reduce) {
  .dl-sticky { transition:none; }
}
details.verify .vstep { margin-top:12px; }