/* How Bidding Software Works — package explainer page (site.css system) */

.bid-narrow{width:min(880px,92%);margin:0 auto}

/* Honest-status note panel (meta-panel pattern) */
.note-panel{position:relative;overflow:hidden;background:#fff;border:1.5px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.7rem 1.9rem}
.note-panel::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;background:linear-gradient(90deg,var(--blue) 0%,var(--nav-blue) 45%,var(--orange) 100%)}
.note-panel h3{font-size:1.25rem;margin-bottom:.45rem}
.note-panel p{color:#43536a;font-size:1rem}
.note-panel strong{color:var(--blue-ink)}

/* Component cards (find-card pattern) */
.comp-grid{display:grid;gap:1.4rem;margin-top:2.2rem}
.comp-card{position:relative;overflow:hidden;background:#fff;border:1.5px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.6rem 1.7rem 1.7rem}
.comp-card::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;background:linear-gradient(90deg,var(--blue) 0%,var(--nav-blue) 45%,var(--orange) 100%)}
.comp-card h3{font-size:1.3rem;line-height:1.2;margin-bottom:.5rem}
.comp-card p{color:var(--muted);font-size:.98rem}
.comp-card p strong{color:var(--blue-ink)}
.comp-card.wide{grid-column:1/-1}

/* Plug-in section */
.plug-points{display:grid;gap:1.2rem;margin-top:2rem}
.plug-card{position:relative;overflow:hidden;background:#fff;border:1.5px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.7rem 1.8rem}
.plug-card::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;background:linear-gradient(90deg,var(--blue) 0%,var(--nav-blue) 45%,var(--orange) 100%)}
.plug-card h3{font-size:1.35rem;margin-bottom:.5rem}
.plug-card p{color:#43536a;font-size:1rem}
.plug-card p + p{margin-top:.8rem}
.plug-card p strong{color:var(--blue-ink)}
.demo-cta{display:flex;flex-wrap:wrap;gap:.9rem;align-items:center;margin-top:1.4rem}

/* Your Turn cards (q-card pattern) */
.ask-grid{display:grid;gap:1.2rem;margin-top:2.2rem}
.ask-card{background:#fff;border:1.5px solid var(--line);border-radius:var(--radius);box-shadow:0 8px 24px rgba(2,60,120,.06);padding:1.3rem 1.4rem 1.4rem}
.ask-card .num{font-family:var(--font-head);font-size:1.9rem;font-weight:700;line-height:1;background:linear-gradient(180deg,var(--blue),var(--blue-dark));-webkit-background-clip:text;background-clip:text;color:transparent}
.ask-card h3{font-size:1.12rem;margin-top:.55rem;line-height:1.25}
.ask-card p{color:#43536a;font-size:.97rem;margin-top:.4rem}

@media(min-width:720px){
  .comp-grid{grid-template-columns:repeat(2,1fr)}
  .ask-grid{grid-template-columns:repeat(2,1fr)}
  .plug-points{grid-template-columns:repeat(2,1fr)}
}
@media(min-width:1000px){
  .comp-grid{grid-template-columns:repeat(3,1fr)}
}