/* ============================================================
   SOA — white paper pages
   Supplements styles.css. Loads AFTER it. Every value below
   references the existing design tokens; nothing is redefined.
   ============================================================ */

/* ---- three-across card grid (styles.css only has a 2-col .tier-grid) ---- */
.paper-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:1.8rem;
  align-items:stretch;
}
.paper-card{
  background: var(--white); border:1px solid #E3E9EE; border-radius:8px;
  padding:2.2rem 2.2rem 2rem; display:flex; flex-direction:column;
  box-shadow: 0 16px 36px rgba(18,31,57,0.05);
}
.paper-card.featured{ border-color: var(--navy); box-shadow: 0 20px 44px rgba(18,31,57,0.09); }
.paper-card h3{
  font-family: var(--font-display); font-size:1.32rem; line-height:1.25;
  color: var(--navy); font-weight:500; margin-bottom:0.8rem;
}
.paper-card p{ color: var(--grey); font-size:0.95rem; margin-bottom:1.6rem; flex:1; }
.paper-card .btn{ align-self:flex-start; }
.paper-card.is-soon{ background: #FBFCFD; }
.paper-card.is-soon h3{ color: var(--navy-2); }

/* ---- intro paragraph (styles.css .lede-link is for inline anchors) ---- */
.paper-lede{
  font-size:1.15rem; line-height:1.6; color: var(--navy);
  margin:1.1rem 0 1rem; max-width:38rem;
}

/* ---- gated page: two-column hero ---- */
.gate-wrap p{ color: var(--grey); font-size:1rem; max-width:38rem; }
.gate-wrap h1{ font-size: clamp(1.9rem, 3vw, 2.6rem); margin-top:1rem; color:var(--navy); }
.gate-wrap{
  display:grid; grid-template-columns: 1.05fr 0.95fr; gap:4rem; align-items:start;
}
.gate-list{ display:flex; flex-direction:column; gap:0.95rem; margin:2rem 0 0; }
.gate-list li{
  display:flex; align-items:flex-start; gap:0.75rem; list-style:none;
  font-size:0.95rem; color: var(--navy); line-height:1.55;
}
.gate-list svg{
  width:16px; height:16px; stroke: var(--teal-deep); fill:none; stroke-width:2.2;
  flex-shrink:0; margin-top:0.28rem;
}

/* Sits under the bullets so the left column runs to roughly the same depth as
   the form card — otherwise the short column leaves a large void beside it. */
.gate-why{
  margin-top:3rem; padding-top:2.4rem; border-top:1px solid #DCE5EA;
}
.gate-why h2{
  font-family: var(--font-display); font-size:1.6rem; line-height:1.3;
  color: var(--navy); font-weight:500; margin:0.9rem 0 1rem;
}
.gate-why p{ color: var(--grey); font-size:0.98rem; margin-bottom:1rem; }
.gate-why p:last-child{ margin-bottom:0; }

/* ---- the form card ---- */
.gate-card{
  background: var(--white); border:1px solid #E3E9EE; border-radius:8px;
  padding:2.4rem; box-shadow: 0 20px 44px rgba(18,31,57,0.09);
  position:sticky; top:110px;
}
.gate-cover{
  width:100%; height:auto; border-radius:4px; margin-bottom:1.8rem;
  border:1px solid #E3E9EE;
}
.gate-card h3{
  font-family: var(--font-display); font-size:1.35rem; color: var(--navy);
  font-weight:500; margin-bottom:0.3rem;
}
.gate-card .gate-sub{
  font-family: var(--font-mono); font-size:0.7rem; letter-spacing:0.08em;
  text-transform:uppercase; color: var(--grey); margin-bottom:1.7rem;
}
.gate-card .btn{ width:100%; justify-content:center; }

/* honeypot — off-screen for people, visible to bots */
.hp{ position:absolute; left:-9999px; opacity:0; height:0; overflow:hidden; }

/* ---- confirmation page ---- */
.thanks{
  max-width:38rem; margin:0 auto; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:1.1rem;
  padding:1rem 1rem 0;
}
.thanks-icon{
  width:60px; height:60px; border-radius:50%; background: var(--navy);
  display:flex; align-items:center; justify-content:center; margin-bottom:0.4rem;
}
.thanks-icon svg{ width:26px; height:26px; stroke: var(--teal); fill:none; stroke-width:2; }
.thanks h2{
  font-family: var(--font-display); font-size:2rem; color: var(--navy); font-weight:500;
}
.thanks .lede{ color: var(--navy); font-size:1.05rem; }
.thanks .fallback{
  background: var(--ice); border-radius:4px; padding:1.1rem 1.4rem;
  font-size:0.92rem; color: var(--navy); width:100%;
}
.thanks .fallback a{ color: var(--teal-deep); font-weight:600; text-decoration:underline; }
.thanks-next{
  border-top:1px solid #E3E9EE; padding-top:2rem; margin-top:1rem; width:100%;
}
.thanks-next h4{
  font-family: var(--font-display); font-size:1.15rem; color: var(--navy);
  font-weight:500; margin-bottom:0.5rem;
}
.thanks-next p{ color: var(--grey); font-size:0.95rem; margin-bottom:1.4rem; }

/* ---- responsive ---- */
@media (max-width: 980px){
  .paper-grid{ grid-template-columns: 1fr; }
  .gate-wrap p{ color: var(--grey); font-size:1rem; max-width:38rem; }
.gate-wrap h1{ font-size: clamp(1.9rem, 3vw, 2.6rem); margin-top:1rem; color:var(--navy); }
.gate-wrap{ grid-template-columns: 1fr; gap:2.6rem; }
  .gate-card{ position:static; }
}