/* Homepage platform story (1.6): hero dashboard shot, continuous discovery,
   the five-step loop, finding states, trend proof, architecture and signed
   bundles. Uses the page tokens (--navy, --navy-soft, --slate, --warm, --line,
   --accent, --good). */

/* hero: real dashboard screenshot */
@media (min-width:981px){.hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:48px}.hero-grid h1{font-size:42px}}
.hero-shot{margin:0;background:#fff;border:1px solid rgba(243,239,231,.25);border-radius:12px;overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.35)}
.hero-shot .tour-bar{background:#f7f4ee}
.hero-shot img{display:block;width:100%;height:auto}
.hero-shot-cap{font-size:12.5px;color:var(--warm);opacity:.7;margin:10px 0 0}
.hero-shot-cap a{color:inherit}

/* chips */
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.chips li{font-size:12.5px;font-weight:600;color:var(--navy);background:#fff;border:1px solid var(--line);
  border-radius:20px;padding:4px 11px;line-height:1.4}

/* continuous discovery flow */
.dflow{display:grid;grid-template-columns:minmax(0,1.25fr) auto minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr);
  gap:14px;align-items:stretch;margin-top:8px}
.dflow .step{background:#fff;border:1px solid var(--line);border-radius:10px;padding:18px 18px 16px}
.dflow .step h3{font-size:16px;margin:0 0 8px;color:var(--navy)}
.dflow .step p{font-size:14px;color:var(--slate);margin:0}
.dflow .step .chips{margin-top:2px}
.dflow .arrow{align-self:center;color:var(--accent);font-weight:700;font-size:20px}
.dflow .step.out{background:var(--navy);border-color:var(--navy)}
.dflow .step.out h3{color:#fff}
.dflow .step.out p{color:var(--warm)}
.dnotes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:28px 0 0;padding:0;list-style:none}
.dnotes li{font-size:14px;color:var(--slate);border-left:3px solid var(--accent);padding:2px 0 2px 12px}
.dnotes b{color:var(--navy)}

/* five-step loop */
.loop{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin:0;padding:0;list-style:none;counter-reset:l}
.loop>li{background:#fff;border:1px solid var(--line);border-radius:10px;padding:20px 18px;position:relative}
.loop>li::before{counter-increment:l;content:"0" counter(l);font:700 12px 'JetBrains Mono',Menlo,monospace;color:var(--accent)}
.loop h3{font-size:19px;margin:6px 0 10px;color:var(--navy);letter-spacing:.02em;text-transform:uppercase}
.loop .chips{margin-bottom:12px}
.loop .chips li{background:var(--warm);font-size:12px}
.loop p{font-size:14px;color:var(--slate);margin:0}
.loop-links{display:flex;gap:22px;flex-wrap:wrap;margin-top:24px;font-size:14px;font-weight:600}

/* finding states */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:48px;align-items:center}
.states{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 14px;padding:0;list-style:none}
.states li{font-size:13px;font-weight:700;padding:6px 12px;border-radius:20px;background:#fff;border:1px solid var(--line);color:var(--navy)}
.states li.arr{border:0;background:none;padding:0;color:var(--accent)}
.states li.done{background:var(--good);border-color:var(--good);color:#fff}
.states.side li{font-weight:600;color:var(--slate)}
.split ul.pts{font-size:15px;color:var(--slate);padding-left:18px;margin:18px 0 0}
.split ul.pts li{margin-bottom:6px}
.split ul.pts b{color:var(--navy)}

/* trend proof */
.proof{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:0 0 14px}
.proof div{background:#fff;border:1px solid var(--line);border-radius:10px;padding:20px 22px}
.proof span{display:block;font-size:13px;font-weight:600;color:var(--slate);margin-bottom:6px}
.proof b{font-size:34px;line-height:1.1;color:var(--navy);font-variant-numeric:tabular-nums}
.proof b i{font-style:normal;color:var(--accent);margin:0 8px}
.proof b em{font-style:normal;color:var(--good)}
.proof-cap{font-size:13px;color:var(--slate);margin:0 0 24px}
.proof-pts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:0;padding:0;list-style:none}
.proof-pts li{font-size:14px;color:var(--slate)}
.proof-pts b{display:block;color:var(--navy);font-size:15px;margin-bottom:2px}

/* architecture */
.arch{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;text-align:left;margin-top:8px;padding:0;list-style:none}
.arch>li{background:rgba(255,255,255,.06);border:1px solid rgba(243,239,231,.18);border-radius:10px;padding:16px 14px;position:relative}
.arch>li+li::before{content:"→";position:absolute;left:-12px;top:50%;transform:translate(-50%,-50%);color:var(--accent-soft);font-weight:700}
.arch h3{font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--accent-soft);margin:0 0 10px}
.arch ul{list-style:none;margin:0;padding:0}
.arch ul li{display:block;background:none;border:0;border-radius:0;font-size:14px;color:#fff;padding:3px 0;border-top:1px solid rgba(243,239,231,.1)}
.arch ul li:first-child{border-top:0}

/* signed bundle */
.bundle{margin-top:40px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:26px 28px}
.bundle h3{font-size:20px;margin:0 0 6px;color:var(--navy)}
.bundle>p{font-size:15px;color:var(--slate);margin:0 0 18px;max-width:760px}
.bflow{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 20px;padding:0;list-style:none}
.bflow li{font-size:14px;font-weight:700;color:var(--navy);background:var(--warm);border:1px solid var(--line);border-radius:8px;padding:9px 14px}
.bflow li.arr{background:none;border:0;padding:0;color:var(--accent)}
.bflow li.zone{border-style:dashed}
.bclaims{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:0;padding:0;list-style:none}
.bclaims li{font-size:14px;color:var(--slate)}
.bclaims b{display:block;color:var(--navy);margin-bottom:2px}

/* coverage table extras */
.badge-tier{display:inline-block;margin-left:6px;font-size:10.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
  color:var(--navy);border:1px solid var(--line);border-radius:10px;padding:1px 7px;vertical-align:middle}
.detect tr.group td{background:var(--warm);font-size:12px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--slate);padding-top:14px}

@media (max-width:1100px){
  .dflow{grid-template-columns:minmax(0,1fr)}
  .dflow .arrow{transform:rotate(90deg);justify-self:center}
  .loop{grid-template-columns:repeat(2,minmax(0,1fr))}
  .arch{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
  .arch>li+li::before{content:none}
  .bclaims{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:880px){
  .dnotes,.proof,.proof-pts{grid-template-columns:minmax(0,1fr)}
  .split{grid-template-columns:minmax(0,1fr);gap:28px}
  .loop{grid-template-columns:minmax(0,1fr)}
  .arch{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bclaims{grid-template-columns:minmax(0,1fr)}
  .proof b{font-size:28px}
}
@media (max-width:600px){
  .detect{table-layout:fixed;width:100%}
  .detect th,.detect td{overflow-wrap:anywhere;hyphens:auto}
  .detect th:nth-child(2),.detect td:nth-child(2){width:96px}
}