/* Belay site: layout shared by every page (wrapper, section heads, scroll reveal, footer).
   Built from tokens only; page-specific CSS stays in each page's <style>. */
body{margin:0;background:var(--surface);color:var(--ink)}
[hidden]{display:none!important}
html{overflow-x:clip}
.h-wrap{max-width:var(--container);margin:0 auto;padding-inline:var(--space-6)}

/* sections */
.h-sec{padding-block:var(--space-24)}
.h-sec__head{display:flex;flex-direction:column;gap:var(--space-4);margin-bottom:var(--space-12)}
.h-sec__head p{margin:0}
.h-sec__head p:not(.by-eyebrow){max-width:var(--measure);font-size:18px;line-height:25.2px;color:var(--ink-muted)}
.h-sec__head--center{align-items:center;text-align:center;max-width:820px;margin-inline:auto}

/* scroll reveal: each section fades and rises in as it enters the screen */
.js-reveal .reveal{opacity:0;transform:translateY(24px);transition:opacity .9s cubic-bezier(.22,.61,.36,1),transform .9s cubic-bezier(.22,.61,.36,1)}
.js-reveal .reveal.is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js-reveal .reveal{opacity:1;transform:none;transition:none}}

/* footer */
.h-footer{border-top:1px solid var(--hairline);padding-block:var(--space-16)}
.h-footer a{color:var(--ink);text-decoration:none}
.h-footer a.by-wordmark{color:var(--pine)}
.h-footer a.by-wordmark:hover{text-decoration:none}
.h-footer a:hover{text-decoration:underline;text-underline-offset:4px}
.h-footer a.by-link{color:inherit;text-decoration:underline;text-underline-offset:3px}
/* the house 2px focus ring on the shared nav and footer links (rule 8) */
.by-nav a:focus-visible,.h-footer a:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:2px}
/* hero cards stop hanging off the photo below 1200px, where the copy column runs up to the frame */
@media (max-width:1200px){.by-uicards--hero{left:var(--space-4)}}
.h-footer ul{list-style:none;margin:0;padding:0}
.h-footer__top{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1.8fr);gap:var(--space-12)}
.h-footer__brand{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-6)}
.h-footer__brand p{margin:0;max-width:440px;font-size:14px;line-height:20px;color:var(--ink-muted)}
.h-footer__brand strong{font-weight:400;color:var(--ink)}
.h-footer__brand .by-btn,.h-footer__brand .by-btn:hover{color:var(--on-emerald);text-decoration:none}
.h-footer__cols{display:flex;justify-content:flex-end;gap:var(--space-24)}
.h-footer__label{margin:0 0 var(--space-4);font-size:16px;line-height:24px;color:var(--ink-muted)}
.h-footer__cols ul{display:grid;gap:var(--space-3)}
.h-footer__cols li{display:flex;height:24px;align-items:center}
.h-footer__cols a{display:inline-flex;align-items:center;gap:var(--space-3);line-height:24px}
.h-footer__cols a svg{color:var(--ink-muted);flex:none}
.h-footer__bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--space-4);margin-top:var(--space-8);padding-top:var(--space-6);border-top:1px solid var(--hairline);font-size:14px;line-height:20px;color:var(--ink-muted)}
.h-footer__bottom ul{display:flex;gap:var(--space-6)}
.h-footer__bottom a{color:var(--ink-muted)}
@media (max-width:900px){.h-footer__top{grid-template-columns:1fr}.h-footer__cols{justify-content:flex-start;gap:var(--space-12)}}

/* trust strip (partials/trust.html): security marks in a bordered box, title on the top edge */
.s-trust{padding-block:var(--space-12) var(--space-16)}
.s-trust__box{position:relative;border:1px solid var(--hairline);border-radius:var(--radius-xl);padding:var(--space-16) var(--space-8) var(--space-12);display:grid;gap:var(--space-8)}
/* centered with translate, not transform: the scroll reveal resets transform */
.s-trust__title{position:absolute;top:0;left:0;right:0;width:max-content;max-width:calc(100% - var(--space-12));margin:0 auto;translate:0 -50%;padding-inline:var(--space-6);background:var(--surface);font:400 24px/31.2px var(--font-sans);color:var(--ink);text-align:center}
.s-trust__marks{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-8)}
.s-trust__marks li{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--space-2);min-width:0}
.s-trust__marks svg{width:24px;height:24px;margin-bottom:var(--space-2);color:var(--pine);fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.s-trust__marks strong{font-weight:500;font-size:16px;line-height:24px}
.s-trust__marks span{font-size:14px;line-height:20px;color:var(--ink-muted)}
.s-trust__more{margin:0;text-align:center;font-size:14px;line-height:20px}
@media (max-width:640px){.s-trust__marks{grid-template-columns:1fr}}
@media (max-width:640px){
  .s-trust__box{padding:var(--space-8) var(--space-6)}
  .s-trust__title{position:static;translate:none;width:auto;max-width:none;padding:0;background:none}
}

/* form fields (shared by /book and the /turnover calculator): label, input, hint, error */
.b-field{display:grid;gap:var(--space-2)}
.b-field label{font-size:16px;line-height:24px}
.b-field .b-opt{color:var(--ink-muted)}
.b-hint{margin:0;font-size:14px;line-height:20px;color:var(--ink-muted)}
.b-field input,.b-field select,.b-field textarea{font:400 16px/24px var(--font-sans);color:var(--ink);background:var(--surface);border:1px solid var(--ink-muted);border-radius:var(--radius-sm);padding:var(--space-3) var(--space-4);width:100%}
.b-field input:focus-visible,.b-field select:focus-visible,.b-field textarea:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.b-field [aria-invalid="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.b-err{display:flex;gap:var(--space-2);align-items:flex-start;margin:0;font-size:14px;line-height:20px;color:var(--ink)}
.b-err svg{flex:none;width:16px;height:16px;margin-top:2px}