/* base.css
   OBYR website — reset, typography scale, page shell, section canvases.
   ---------------------------------------------------------------- */

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit}
:focus-visible{outline:3px solid var(--teal);outline-offset:3px;border-radius:var(--r-sm)}

h1,h2,h3,h4{font-family:var(--display);font-weight:800;letter-spacing:-.03em;line-height:1.02;margin:0}
h1{font-size:clamp(2.9rem,6.4vw,5.2rem)}
h2{font-size:clamp(2.2rem,4.4vw,3.5rem)}
h3{font-size:clamp(1.25rem,2vw,1.6rem);letter-spacing:-.02em;line-height:1.15}
p{margin:0}

.wrap{width:min(1200px,100% - 48px);margin-inline:auto}
.lede{font-size:clamp(1.05rem,1.5vw,1.28rem);color:var(--muted-fg);line-height:1.6;max-width:62ch}

/* eyebrow — the small label that names the section's role */
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:.72rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--teal-active);
}
.eyebrow::before{content:"";width:8px;height:8px;border-radius:var(--r-pill);background:var(--gold)}

/* ============================================================
   Section canvases — teal is the dominant field
   ============================================================ */
section.band{padding:clamp(72px,9vw,124px) 0;position:relative}
.band--white{background:var(--bg)}
.band--mint{background:var(--mint)}
.band--mint .lede{color:#2c4f49}
.band--ink{background:var(--teal-ink);color:#fff}
.band--ink .lede{color:#9FD9CF}
.band--ink .eyebrow{color:var(--teal)}
.band--ink h2,.band--ink h3,.band--ink summary{color:#fff}
.band--ink .faq details{border-color:rgba(255,255,255,.13)}
.band--ink .faq p{color:#9FD9CF}
.band--ink .faq summary::before{background:rgba(0,189,167,.18)}
.band--teal{background:var(--teal);color:#fff}
.band--teal .lede{color:rgba(255,255,255,.86)}
.band--teal .eyebrow{color:#fff}

/* the spectrum rail — the signature device.
   five stops = the five demand sources OBYR merges into one stream */
.rail{height:6px;background:var(--brand-gradient);width:100%}
.rail--thin{height:3px}