/* process.php — page layout only; components come from ui-v2.css */

/* hero */
.post-hero .hero-actions{margin-top:var(--s-6)}
.post-hero .hero-proof{margin-top:var(--s-6)}
.post-hero + .section{padding-top:var(--section-pad-tight)}

/* spec cards: typography shared by every ruled grid on the page */
.card--spec h3{font-size:var(--fs-h3);font-weight:600;letter-spacing:-.015em;line-height:1.25;margin:0}
.card--spec p{font-size:var(--fs-small);margin:0}
.card--spec .list-check li{padding:10px 0 10px 18px}
.card--spec .list-check li::before{top:calc(10px + .55em)}
.section.dark .card--spec:not(.card--dark){border-top-color:var(--hair-dark)}
.section.dark .card--spec:not(.card--dark) h3,.section.dark .card--spec:not(.card--dark) b{color:#fff}
.section.dark .card--spec:not(.card--dark) p,.section.dark .card--spec:not(.card--dark) span{color:var(--text-inverse-muted)}
.section.dark .card__num{color:var(--blue-2)}

/* compare pair (hairline + dark cell) */
.process-compare .card--spec:not(.card--dark){padding-right:var(--s-4)}
.process-compare .card--spec p{font-size:var(--fs-body)}

/* four stages: hairline 4-up on desktop, vertical timeline on phones */
.process-stages .card--spec{gap:var(--s-3)}
@media (max-width:1024px){.process-stages{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:768px){
  .process-stages{grid-template-columns:minmax(0,1fr);gap:0}
  .process-stages .card--spec{display:grid;grid-template-columns:36px minmax(0,1fr);column-gap:0;row-gap:6px;align-content:start;border-top:0;padding:0 0 var(--s-5);position:relative}
  .process-stages .card__num{grid-column:1;grid-row:1;padding-top:5px}
  .process-stages h3{grid-column:2;grid-row:1}
  .process-stages p{grid-column:2;grid-row:2}
  .process-stages .card--spec::before{content:"";position:absolute;left:7px;top:24px;bottom:0;width:1px;background:var(--hair-strong)}
  .process-stages .card--spec:last-child::before{display:none}
}

/* guides row under the stages */
.process-guides{margin-top:var(--s-5);max-width:880px;padding:var(--s-3) var(--s-4);align-items:center;gap:var(--s-3)}
.process-guides::before{content:"";flex:0 0 4px;align-self:stretch;border-radius:2px;background:var(--rule-accent)}
.process-guides p{margin:0;font-size:var(--fs-small);line-height:1.5;color:var(--text-muted)}
.process-guides a{color:var(--blue);font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(62,65,173,.35)}
.process-guides a:hover{text-decoration-color:currentColor}

/* checklist + launch grids: short b/span items */
.process-checklist .card--spec{gap:6px;padding-top:var(--s-4);padding-bottom:var(--s-3)}
.process-checklist b{font-size:var(--fs-body);font-weight:600;letter-spacing:-.01em;line-height:1.3}
.process-checklist span{font-size:var(--fs-small);line-height:1.5;color:var(--text-muted)}
@media (max-width:768px){
  .process-checklist .card--spec{padding-top:12px;padding-bottom:8px}
  .process-checklist b{font-size:15px}
  .process-checklist span{font-size:13px}
}

/* ownership: ruled definition lists */
.process-owners .architecture-list{display:grid;gap:0;margin:var(--s-2) 0 0;padding:0;list-style:none}
.process-owners .architecture-list li{display:grid;grid-template-columns:120px minmax(0,1fr);gap:12px;padding:10px 0;border-top:var(--border-dark);line-height:1.45;font-size:var(--fs-small);color:var(--text-inverse-muted)}
.process-owners .architecture-list li:first-child{border-top:0}
.process-owners .architecture-list b{color:#fff;font-weight:600}
@media (max-width:768px){
  .process-owners{gap:0}
  .process-owners .card--spec+.card--spec{padding-top:var(--s-5)}
  .process-owners .architecture-list li{grid-template-columns:minmax(0,1fr);gap:2px}
}

/* review points + packages */
.process-reviews .card--spec{gap:var(--s-3)}
.process-packages .card{gap:var(--s-3)}
.process-packages .tag{align-self:flex-start;margin-top:auto}
@media (max-width:768px){
  .process-reviews{gap:0}
  .process-reviews .card--spec+.card--spec{padding-top:var(--s-4)}
  .process-reviews .card--spec{padding-bottom:var(--s-4)}
  .process-packages{gap:10px}
  .process-packages .card{padding:var(--s-4)}
}

@media (max-width:768px){
  .section-head .lead{font-size:16px}
  .section-head{margin-bottom:var(--s-5)}
}

/* FAQ */
.faq-section-clean .section-head--center h2{max-width:none}