/*
 * KAYLA SYSTEMS / Premium Engineering visual layer
 * Public website only. Design tokens and component refinements, no business logic.
 * Loaded after responsive.css to keep one intentional, reversible presentation layer.
 */

html{background:var(--bg);scroll-padding-top:calc(var(--header-size) + 26px)}
body{background:var(--bg);color:var(--text);text-rendering:optimizeLegibility}
::selection{background:#d8e8dc;color:var(--text)}
:focus-visible{outline:2px solid var(--premium-focus);outline-offset:4px}
.container{width:min(var(--layout-max),calc(100% - var(--layout-gutter)))}
a,button{-webkit-tap-highlight-color:transparent}
h1,h2,h3{color:var(--text);text-wrap:balance}
h1{
  font-size:clamp(40px,5vw,70px);
  font-weight:740;
  line-height:1.075;
  letter-spacing:-.057em;
}
h2{
  font-size:clamp(29px,3.25vw,42px);
  line-height:1.15;
  letter-spacing:-.044em;
  font-weight:710;
}
h3{letter-spacing:-.027em;font-weight:700}
.eyebrow{
  display:flex;align-items:center;gap:11px;
  color:#3c6b55;
  font-size:11px;
  font-weight:750;
  letter-spacing:.14em;
  line-height:1.5;
  text-transform:uppercase;
  margin-bottom:17px;
}
.eyebrow::before{
  content:"";display:block;
  width:20px;height:1px;
  background:currentColor;
  flex:0 0 20px;
}
.lead{font-size:clamp(16px,1.4vw,18px);line-height:1.7;color:var(--muted);font-weight:400}
.section{padding-top:var(--section-space)}
.section-heading{margin-bottom:30px;gap:32px}
.section-heading__note{max-width:390px;font-size:14px;line-height:1.8;color:var(--muted)}
.section-footer{margin-top:26px}
.text-link{display:inline-flex;align-items:center;gap:7px;font-weight:700;text-underline-offset:5px}
.text-link:hover{text-decoration:underline}
.button{
  min-height:50px;
  border-radius:var(--button-corner);
  padding:13px 23px;
  font-size:13px;
  font-weight:700;
  letter-spacing:.004em;
  transition:background-color var(--motion-ui) ease,border-color var(--motion-ui) ease,box-shadow var(--motion-ui) ease,transform var(--motion-ui) ease;
}
.button--primary{background:var(--primary);color:#fff}
.button--primary:hover{background:var(--primary-hover);box-shadow:0 10px 22px rgba(17,64,43,.17);transform:translateY(-1px)}
.button--secondary{background:var(--primary-soft);color:var(--primary);border-color:transparent}
.button--outline{background:#fff;color:var(--primary);border-color:var(--outline-strong)}
.button--secondary:hover,.button--outline:hover{background:#dcebe0;border-color:#9bbda5}
.button--header{border-radius:999px;min-height:42px;padding:9px 19px;font-size:12px;letter-spacing:.01em}
.button:active{transform:translateY(0)}