/* ============================================================
   MHDev — /demos/ index page only
   Shared layout lives in base.css
   ============================================================ */

.hero{padding:36px 0 20px}
.hero .lede{font-size:1.16rem;max-width:700px}

/* Quiet one-line caveat, matching the homepage hero note */
.hero-note{
  display:flex;align-items:flex-start;gap:10px;
  margin-top:30px;font-size:.9rem;color:var(--ink-faint);max-width:700px;
}
.hero-note .dot{width:8px;height:8px;border-radius:50%;background:var(--terra);flex:none;margin-top:.5em}
.hero-note a{color:var(--ink-soft);text-decoration:underline;text-underline-offset:3px}
.hero-note a:hover{color:var(--green)}

/* ---------- Live demo cards ---------- */
.demo-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}

.demo-card{
  position:relative;
  display:flex;flex-direction:column;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);overflow:hidden;
  transition:transform .2s, border-color .2s, box-shadow .2s;
}
.demo-card:hover{
  transform:translateY(-3px);border-color:var(--green);
  box-shadow:0 2px 4px rgba(29,41,38,.06), 0 16px 40px rgba(29,41,38,.1);
}
.demo-card .shot{background:var(--paper-deep);border-bottom:1px solid var(--line)}
.demo-card .shot svg,.demo-card .shot img{display:block;width:100%;height:auto}
.demo-card .body{padding:26px 26px 28px;display:flex;flex-direction:column;flex:1;gap:12px}
.demo-card .cat{
  font-size:.73rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--terra-ink);
}
.demo-card h3{font-family:var(--font-display);font-size:1.34rem;font-weight:500;line-height:1.2}
.demo-card h3 a{color:var(--ink)}
/* The title link is stretched over the whole card, so clicking anywhere on the
   card follows it. "View example" below is a plain span rather than a second
   link, so each card is one tab stop with the heading as its anchor text. */
.demo-card h3 a::after{content:"";position:absolute;inset:0;z-index:1}
.demo-card:hover h3 a{color:var(--green)}
.demo-card p{font-size:.95rem}
.demo-card .chips{margin-top:2px}
.demo-card .go{
  margin-top:auto;padding-top:16px;
  display:inline-flex;align-items:center;gap:8px;
  font-weight:600;font-size:.95rem;color:var(--green);
}
.demo-card .go svg{width:15px;height:15px;transition:transform .18s}
.demo-card:hover .go svg{transform:translateX(3px)}
/* Keyboard focus rings the whole card rather than just the heading text.
   If :has() is unavailable both rules drop and the default ring on the
   anchor still shows. */
.demo-card:has(h3 a:focus-visible){outline:3px solid var(--terra);outline-offset:3px}
.demo-card:has(h3 a:focus-visible) h3 a{outline:none}

/* ---------- Planned industries ---------- */
.soon-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.soon-card{
  background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:24px 24px 26px;
}
.soon-card .cat{
  display:block;font-size:.71rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-faint);margin-bottom:8px;
}
.soon-card h3{font-size:1.06rem;font-weight:600;font-family:var(--font-body);color:var(--ink)}
.soon-card p{font-size:.9rem;margin-top:8px}
.soon-card .stages{
  display:block;margin-top:12px;font-size:.83rem;color:var(--ink-faint);
  padding-top:12px;border-top:1px solid var(--line);
}
.soon-note{margin-top:32px;font-size:.94rem;max-width:720px}

/* ---------- Behind the examples (dark band) ---------- */
.about-demos .grid-2{gap:44px;align-items:start}
.about-demos h2{max-width:620px;margin-bottom:18px}
.about-demos p+p{margin-top:16px}
.about-demos .panel h3{font-size:1.08rem}
.about-demos .panel+.panel{margin-top:20px}

@media(max-width:960px){
  .soon-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  .demo-grid,.soon-grid{grid-template-columns:1fr}
  .hero{padding:26px 0 12px}
}