/* ── hero, three columns ─────────────────────────────────────────
   Loaded after landing.css; overrides only the hero block. Layout mirrors the
   reference: claims (280) · app (380–440) · live context (280), the app in
   the middle because it's the product, not an illustration of it. */
.hero.hero-grid{padding:40px 0 clamp(56px,8vw,90px);}
.hero-cols{position:relative;display:grid;
  grid-template-columns:280px minmax(380px,440px) 280px;
  justify-content:center;align-items:start;gap:24px;}

/* side cards */
.hero-side{display:flex;flex-direction:column;gap:16px;}
.hcard{display:block;background:var(--forge-panel);border:1px solid var(--forge-line);
  border-radius:18px;padding:20px 20px 18px;}
.hcard-ic{display:inline-flex;color:var(--parchment);margin-bottom:10px;}
.hcard h3{font-family:var(--font-display);font-weight:700;font-size:15px;
  letter-spacing:-.01em;margin-bottom:6px;color:var(--parchment);}
.hcard p{font-size:13.5px;line-height:1.5;color:var(--parchment-dim);}
.hcard p a{color:var(--parchment);text-decoration:underline;
  text-decoration-color:var(--copper);text-underline-offset:3px;}

/* right column: rates */
.hcard-title{display:flex;align-items:center;gap:8px;margin-bottom:12px;}
.rate-list{list-style:none;display:flex;flex-direction:column;gap:6px;}
.rate-row{display:flex;justify-content:space-between;align-items:center;gap:10px;
  font-family:var(--font-mono);font-size:12px;color:var(--parchment);padding:4px 0;}
.rate-row.muted{color:var(--parchment-faint);}
.rate-pair{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;}
.rate-pair .arrow{color:var(--parchment-faint);margin:0 2px;}
.rate-pair .ic{width:16px;height:16px;border-radius:50%;display:inline-flex;
  align-items:center;justify-content:center;background:var(--forge-char);
  font-size:9px;color:var(--parchment-dim);overflow:hidden;flex:none;}
.rate-pair .ic img{width:100%;height:100%;object-fit:contain;display:block;}
.rate-val{color:var(--parchment-dim);font-variant-numeric:tabular-nums;}
.hcard-foot{display:flex;align-items:center;gap:8px;margin-top:14px;padding-top:12px;
  border-top:1px solid var(--forge-line);font-family:var(--font-mono);
  font-size:11px;color:var(--parchment-faint);}

/* right column: promo — copper only on the title, it's the action signal */
.hcard-promo{position:relative;padding-right:56px;transition:border-color .18s;}
.hcard-promo:hover{border-color:var(--copper);}
.hcard-promo h3{color:var(--copper-bright);}
.hcard-tag{position:absolute;top:12px;right:12px;font-family:var(--font-mono);
  font-size:10px;letter-spacing:.08em;text-transform:uppercase;padding:3px 7px;
  border-radius:999px;background:var(--mint);color:var(--forge-black);}

/* centre: undo landing.css's two-column placement (justify-self:end / start) */
.hero-grid .hero-app{max-width:none;justify-self:stretch;margin-top:0;}
.hero-app-head{display:flex;align-items:center;gap:10px;margin-bottom:14px;
  font-family:var(--font-display);font-weight:700;font-size:18px;color:var(--parchment);}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}

/* ── responsive ──────────────────────────────────────────────────── */
/* three columns don't fit: app on top, side columns side by side below */
@media(max-width:1080px){
  .hero-cols{grid-template-columns:1fr 1fr;max-width:720px;}
  .hero-grid .hero-app{grid-column:1/-1;order:-1;max-width:480px;justify-self:center;}
}
/* phone: one column, app first */
@media(max-width:680px){
  .hero.hero-grid{padding-top:24px;}
  .hero-cols{grid-template-columns:1fr;gap:16px;}
  .hero-grid .hero-app{max-width:none;}
}