/* claimhard site styles. Colours come from tokens.css or the site tokens below. */
:root,
:root[data-theme="light"]{
  --band-bg:#1F2633;
  --band-text:#EEF1F6;
  --band-muted:#AAB3C2;
  --band-edge:rgba(255,255,255,.14);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --band-bg:#283449;
    --band-text:#EEF1F6;
    --band-muted:#AAB3C2;
    --band-edge:rgba(255,255,255,.22);
  }
}
:root[data-theme="dark"]{
  --band-bg:#283449;
  --band-text:#EEF1F6;
  --band-muted:#AAB3C2;
  --band-edge:rgba(255,255,255,.22);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:72px}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--font-ui);font-size:var(--text-md);line-height:var(--lh-md);
  min-height:100vh;display:flex;flex-direction:column;
}
main{flex:1}
a{color:var(--brand)}
a:hover{color:var(--brand-strong)}
h1,h2,h3{line-height:1.15;margin:0 0 var(--space-4)}
h1{font-size:clamp(30px,6vw,52px);font-weight:800}
h2{font-size:clamp(24px,4vw,34px);font-weight:700}
p{margin:0 0 var(--space-4)}
code,.mono,.num{font-family:var(--font-mono);font-variant-numeric:tabular-nums}

:focus-visible{outline:3px solid var(--brand);outline-offset:2px;border-radius:var(--radius-xs)}

.container{width:100%;max-width:1120px;margin-inline:auto;padding-inline:var(--space-4)}
@media (min-width:768px){.container{padding-inline:var(--space-6)}}

.skip{
  position:absolute;left:var(--space-4);top:-100px;z-index:var(--z-modal);
  background:var(--brand);color:var(--brand-contrast);padding:var(--space-2) var(--space-4);
  border-radius:var(--radius-sm);text-decoration:none;
}
.skip:focus{top:var(--space-2)}

/* Buttons */
.btn{
  display:inline-block;padding:var(--space-2_5) var(--space-5);border-radius:var(--radius-md);
  background:var(--brand);color:var(--brand-contrast);font-weight:var(--weight-semibold);
  text-decoration:none;border:1px solid transparent;font:inherit;font-weight:var(--weight-semibold);
  cursor:pointer;transition:background-color var(--dur-fast) var(--ease);
}
.btn:hover{background:var(--brand-strong);color:var(--brand-contrast)}
.btn--ghost{background:transparent;color:var(--brand);border-color:var(--hairline-strong)}
.btn--ghost:hover{background:var(--brand-tint);color:var(--brand-strong)}

/* Nav */
.sitenav{
  position:sticky;top:0;z-index:var(--z-sticky);
  background:var(--bg);border-bottom:1px solid var(--hairline);
}
.sitenav__bar{display:flex;align-items:center;justify-content:space-between;min-height:60px;gap:var(--space-4)}
.sitenav__brand{
  font-weight:800;font-size:var(--text-xl);letter-spacing:-.01em;color:var(--text);text-decoration:none;
}
.sitenav__brand:hover{color:var(--brand)}
.sitenav__menu{display:flex;align-items:center;gap:var(--space-6)}
.sitenav__menu a:not(.btn){color:var(--text);text-decoration:none;font-weight:var(--weight-medium)}
.sitenav__menu a:not(.btn):hover{color:var(--brand)}
.sitenav__toggle{
  display:none;background:transparent;color:var(--text);border:1px solid var(--hairline-strong);
  border-radius:var(--radius-md);padding:var(--space-2) var(--space-3);font:inherit;cursor:pointer;
  min-height:44px;min-width:44px;
}
@media (max-width:767.98px){
  /* Without JS there is nothing to toggle: the menu stays open and the button stays hidden. */
  .sitenav[data-js] .sitenav__toggle{display:inline-block}
  /* An always-open menu would cover a third of a phone screen if it stayed stuck to the top. */
  .sitenav:not([data-js]){position:static}
  .sitenav__bar{flex-wrap:wrap;padding-block:var(--space-1)}
  .sitenav__menu{
    flex-basis:100%;flex-direction:column;align-items:stretch;gap:0;
    padding-bottom:var(--space-3);
  }
  .sitenav__menu a:not(.btn){padding:var(--space-3) 0;border-top:1px solid var(--hairline)}
  .sitenav__menu .btn{text-align:center;margin-top:var(--space-2)}
  /* Only hide when JS is there to open it again. */
  .sitenav[data-js] .sitenav__menu[data-open="false"]{display:none}
}

/* Footer */
.sitefoot{border-top:1px solid var(--hairline);padding-block:var(--space-8);color:var(--muted);font-size:var(--text-base)}
.sitefoot__links{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-6);margin:0 0 var(--space-4);padding:0;list-style:none}
.sitefoot a{color:var(--muted)}
.sitefoot a:hover{color:var(--text)}
.sitefoot p{margin:0 0 var(--space-1_5)}

/* Page basics */
.page{padding-block:var(--space-10)}
.page--narrow{max-width:720px}
.prose h2{font-size:var(--text-lg);margin:var(--space-8) 0 var(--space-2)}
.prose p,.prose ul{margin:0 0 var(--space-3)}
.prose ul{padding-left:var(--space-6)}
.lede{color:var(--muted);font-size:var(--text-lg);line-height:var(--lh-lg)}

/* Stamp: a brand overlay, real text, never colour alone. */
.stamp{
  display:inline-block;font-family:var(--font-mono);font-weight:var(--weight-semibold);
  font-size:var(--text-sm);letter-spacing:var(--label-tracking);text-transform:uppercase;
  color:var(--danger);border:2px solid var(--danger);border-radius:var(--radius-xs);
  padding:var(--space-0_5) var(--space-2);transform:rotate(-4deg);
}

/* Home sections */
.section{padding-block:var(--space-10)}
@media (min-width:768px){.section{padding-block:calc(var(--space-10) * 2)}}
.section__head{max-width:720px;margin-bottom:var(--space-8)}
.eyebrow{
  font-family:var(--font-mono);font-size:var(--text-sm);letter-spacing:var(--label-tracking);
  text-transform:uppercase;color:var(--muted);font-weight:var(--weight-semibold);margin:0 0 var(--space-3);
}

.hero{padding-block:var(--space-10) var(--space-10)}
.hero__copy{max-width:760px;margin-bottom:var(--space-10)}
.hero__copy .lede{max-width:620px;margin-bottom:var(--space-6)}

/* "The mess you have now": five sources converging on one screen. */
.mess{margin:0}
.mess__sources{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--space-3);margin:0;padding:0;list-style:none}
.mess__source{
  position:relative;background:var(--surface);border:1px dashed var(--hairline-strong);border-radius:var(--radius-lg);
  padding:var(--space-3_5) var(--space-4);
}
.mess__source strong{display:block;font-weight:var(--weight-semibold);margin-bottom:var(--space-1)}
.mess__source span{display:block;color:var(--muted);font-size:var(--text-sm);line-height:var(--lh-sm)}
.mess__source::after{
  content:"";position:absolute;left:50%;top:100%;width:1px;height:var(--space-6);background:var(--hairline-strong);
}
.mess__join{height:var(--space-6);margin:var(--space-6) 10% 0;border:1px solid var(--hairline-strong);border-bottom:0;border-radius:var(--radius-sm) var(--radius-sm) 0 0}
.mess__target{
  position:relative;max-width:520px;margin:0 auto;background:var(--surface);border:2px solid var(--brand);
  border-radius:var(--radius-xl);padding:var(--space-4) var(--space-5);text-align:center;box-shadow:var(--shadow-md);
}
.mess__target::before{
  content:"";position:absolute;left:50%;bottom:100%;width:1px;height:var(--space-6);background:var(--hairline-strong);
}
.mess__target strong{display:block;font-size:var(--text-xl);font-weight:800;letter-spacing:-.01em}
.mess__target span{color:var(--muted);font-size:var(--text-base)}
.mess__join + .mess__target{margin-top:var(--space-6)}
@media (max-width:899.98px){
  .mess__sources{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mess__source::after,.mess__join{display:none}
  .mess__target{margin-top:var(--space-6)}
  .mess__target::before{height:var(--space-6)}
}

/* Two-column copy + shot rows, and the two steps in #all-of-it. */
.split{display:grid;gap:var(--space-8)}
.steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-6);margin:0 0 var(--space-10);padding:0;list-style:none;counter-reset:step}
.steps li{border-top:2px solid var(--brand);padding-top:var(--space-4)}
.steps h3{font-size:var(--text-lg)}
.steps p{color:var(--muted)}
@media (max-width:767.98px){.steps{grid-template-columns:minmax(0,1fr)}}
.section--alt{background:var(--surface);border-block:1px solid var(--hairline)}

/* Security band */
.band{
  background:var(--band-bg);color:var(--band-text);
  border-block:1px solid var(--band-edge);
}
.band .muted{color:var(--band-muted)}

/* Feature cards, CCM/RPM, integrations, operators, FAQ */
.features{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-5);margin:0;padding:0;list-style:none}
.feature{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius-lg);padding:var(--space-5)}
.feature__icon{color:var(--brand);margin-bottom:var(--space-3);display:block}
.feature h3{font-size:var(--text-lg)}
.feature p{color:var(--muted);margin:0}
@media (max-width:899.98px){.features{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:599.98px){.features{grid-template-columns:minmax(0,1fr)}}
.split--two{grid-template-columns:minmax(0,1fr)}
@media (min-width:768px){.split--two{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-10)}}
.split--two h3{font-size:var(--text-lg)}
.muted{color:var(--muted)}
.names{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-4);margin:0 0 var(--space-8);padding:0;list-style:none}
.names li{border-top:2px solid var(--brand);padding-top:var(--space-3)}
.names strong{display:block;font-size:var(--text-lg)}
.names span{color:var(--muted);font-size:var(--text-base)}
@media (max-width:899.98px){.names{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:479.98px){.names{grid-template-columns:minmax(0,1fr)}}
.callout{font-size:var(--text-xl);font-weight:var(--weight-semibold);margin-bottom:var(--space-2)}
.ops{max-width:720px;margin:0;padding:0;list-style:none;display:grid;gap:var(--space-4)}
.ops li{border-left:3px solid var(--brand);padding-left:var(--space-4);font-size:var(--text-lg);line-height:var(--lh-lg)}
.band__list{margin:0 0 var(--space-6);padding:0;list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3) var(--space-8);max-width:820px}
.band__list li{border-top:1px solid var(--band-edge);padding-top:var(--space-3)}
@media (max-width:599.98px){.band__list{grid-template-columns:minmax(0,1fr)}}
.band a,.band__link{color:var(--band-text);font-weight:var(--weight-semibold)}
.band a:hover{color:var(--band-muted)}
.band :focus-visible{outline-color:var(--band-text)}
.faq{max-width:720px;border-top:1px solid var(--hairline)}
.faq details{border-bottom:1px solid var(--hairline)}
.faq summary{cursor:pointer;padding:var(--space-4) 0;font-weight:var(--weight-semibold);font-size:var(--text-lg)}
.faq details p{color:var(--muted);margin:0 0 var(--space-4)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none !important;animation:none !important;scroll-behavior:auto !important}
}

/* Contact form */
.form{display:grid;gap:var(--space-4);max-width:560px}
.form__row{display:grid;gap:var(--space-1_5)}
.form label{font-weight:var(--weight-semibold)}
.form input,.form select,.form textarea{
  width:100%;min-height:44px;padding:var(--space-2_5) var(--space-3);
  font:inherit;font-size:16px;color:var(--text);background:var(--surface);
  border:1px solid var(--muted);border-radius:var(--radius-md);
}
.form textarea{min-height:120px;resize:vertical}
.form [aria-invalid="true"]{border-color:var(--danger);border-width:2px}
.form__error{color:var(--danger-fg);margin:0;font-size:var(--text-base)}
.form__error:empty{display:none}
.form__notice{color:var(--muted);margin:0}
.form .btn{justify-self:start;min-height:44px;cursor:pointer}
.form .btn:disabled{opacity:.6;cursor:progress}
.form__status{margin:0;min-height:1.5em}
.hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.form__next{margin-top:var(--space-8);font-size:var(--text-xl)}