/* shared rules for the lower pages: one spacing scale, one button size, one card style
   (proximity / alignment / repetition / contrast) */
:root{--s1:8px;--s2:16px;--s3:24px;--s4:40px;--s5:64px;--s6:104px}

/* header: MENU and CTA are the same height and sit on one line */
.hd-r{gap:10px}
.hd-r .menu-btn,.hd-r .cta{height:42px;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;padding-top:0;padding-bottom:0;line-height:1}
@media (max-width:760px){.hd-r .menu-btn,.hd-r .cta{height:40px}}

/* buttons: one height, primary = filled, secondary = outline */
.ty-btn,.ft-btn,.send,.back{min-height:54px;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;padding:0 26px;line-height:1.4}
.ty-btn+.ty-btn{margin-left:12px}

/* page head: label → title → lead → action, each step tighter than the gap to the next block */
.p-head .label{margin-bottom:var(--s1)}
.p-head h1{margin:0 0 var(--s2)}
.p-head .catch{margin:0 0 var(--s2)!important}
.p-head p+p{margin-top:var(--s1)}
.p-head>.ty-btn,.p-head .stats+.ty-btn{margin-top:var(--s3)}
.p-head .stats{margin:var(--s3) 0 0}

/* sections: the heading column and its body share one top line; space between sections is the largest */
.sec{padding:var(--s6) 0;gap:var(--s3) var(--s5)}
.sec h2{margin-top:var(--s1)}
.sec .body>*:first-child{margin-top:0}
.sec .body h3.sub{margin-top:var(--s4)}
.sec .body h3.sub:first-child{margin-top:0}
@media (max-width:760px){.sec{padding:var(--s5) 0;gap:var(--s3)}}

/* cards: same border everywhere; only the item to stand out gets the offset shadow */
.way,.svc,.pr,.lane,.extra,.confirm,.code-card{border-width:2px}

/* headings break only between phrases (<wbr>) */
.p-head h1,.sec h2{word-break:keep-all;overflow-wrap:anywhere}