/* ============================================
   PolDoc AI — layout
   ============================================ */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--pad);
}

/* --- Full-bleed tinted band --- */
.band {
  background: var(--bg-alt);
  border-top: 1px solid var(--line-06);
  border-bottom: 1px solid var(--line-06);
}

/* --- Section rhythm ---
   padding-block only: these classes are sometimes set on the same element
   as .container, and a `padding` shorthand would wipe its inline padding. */
.s-hero        { padding-block: clamp(52px, 7vw, 88px) 24px; }
.s-upload      { padding-block: 40px var(--section-y); }
.s-institutions{ padding-block: 0 var(--section-y); }
.s-how         { padding-block: var(--section-y); }
.s-features    { padding-block: var(--section-y); }
.s-example     { padding-block: 0 var(--section-y); }
.s-audiences   { padding-block: var(--section-y); }
.s-trust       { padding-block: var(--section-y); }
.s-faq         { padding-block: 0 clamp(56px, 7vw, 80px); }
.s-pricing     { padding-block: 0 var(--section-y); }
.s-cta         { padding-block: 0 clamp(56px, 7vw, 88px); }

/* --- Grids --- */
.grid { display: grid; gap: 12px; }

.grid--2      { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid--split  { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; align-items: stretch; }
.grid--inst   { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.grid--steps  { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.grid--feat   { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid--aud    { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.grid--trust  { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.grid--price  { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; max-width: 840px; margin-inline: auto; }

/* --- Section headers --- */
.sec-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 30px;
}
.sec-head .lead { max-width: 420px; }

.sec-head--center {
  display: block;
  text-align: center;
  max-width: 620px;
  margin: 0 auto 32px;
}
.sec-head--center .lead { max-width: none; margin-top: 10px; }

/* --- Visibility helpers (single breakpoint: 860px) --- */
.only-desktop { display: flex; }
.only-mobile  { display: none; }

@media (max-width: 860px) {
  .only-desktop { display: none !important; }
  .only-mobile  { display: flex !important; }
}