html{-webkit-text-size-adjust:100%}
body{margin:0;color:var(--text-heading);background:var(--surface-page);font-family:var(--font-primary);font-size:var(--font-size-body);line-height:var(--line-height-body);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
h1,h2,h3,h4,h5,h6{margin-top:0;letter-spacing:var(--letter-spacing-heading);font-weight:var(--font-weight-semibold);color:var(--text-heading)}
h1{font-size:var(--font-size-h1);line-height:1.08}
h2{font-size:var(--font-size-h2);line-height:1.12}
h3{font-size:var(--font-size-h3);line-height:var(--line-height-heading)}
h4{font-size:var(--font-size-h4);line-height:var(--line-height-h4)}
p{margin-top:0;text-wrap:pretty}
a{color:var(--text-link);text-decoration:none;transition:opacity var(--duration-standard) var(--ease-standard),color var(--duration-standard) var(--ease-standard)}
a:hover{color:var(--action-primary-bg-hover);text-decoration:underline;text-underline-offset:3px}
:where(.brava-dark) a{color:var(--color-cyan)}
:where(.brava-dark) a:hover{color:#7ad9ff}
img{max-width:100%;display:block}
*,*::before,*::after{box-sizing:border-box}
:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}

/* Layout helpers used across kits and templates */
.brava-container{width:min(calc(100% - (var(--gutter-desktop) * 2)),var(--container-main));margin-inline:auto}
.brava-container--wide{width:min(calc(100% - (var(--gutter-wide) * 2)),var(--container-wide))}
.brava-section{padding-block:var(--section-standard)}
.brava-section--large{padding-block:var(--section-large)}
.brava-section--compact{padding-block:var(--section-compact)}
.brava-section--soft{background:var(--surface-soft)}
.brava-dark{color:var(--text-on-dark);background:var(--surface-darkest)}
.brava-dark h1,.brava-dark h2,.brava-dark h3,.brava-dark h4{color:var(--text-on-dark)}
.brava-copy{max-width:var(--content-reading)}
.brava-gradient-text{background:var(--gradient-brand);-webkit-background-clip:text;background-clip:text;color:transparent}

@media (max-width:767px){
  .brava-container{width:min(calc(100% - (var(--gutter-mobile) * 2)),100%)}
  .brava-section,.brava-section--large{padding-block:var(--section-mobile)}
}