/* =====================================================================
   rto.biz site . locked brand system, gold register.
   Used by: index.html, diagnostic.html, audiences.html, access.html,
   cockpit.html.
   ===================================================================== */

:root{
  --gold: #B08D57;
  --gold-hi: #C9A672;
  --gold-deep: #7E5715;
  --charcoal: #111214;
  --navy: #1C2431;
  --bone: #F2EFE3;
  --bone-dim: rgba(242,239,227,0.62);
  --bone-faint: rgba(242,239,227,0.38);
  --hairline: rgba(176,141,87,0.28);
  --hairline-soft: rgba(176,141,87,0.14);

  --sans: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'JetBrains Mono', monospace;
  --serif: 'Instrument Serif', Georgia, serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{
  background:var(--charcoal);color:var(--bone);
  font-family:var(--sans);font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  font-size:16px;line-height:1.6;
}
body{min-height:100vh;overflow-x:hidden}
img{max-width:100%;display:block}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}

/* ---------- Site chrome ---------- */
.chrome{
  position:fixed;top:0;left:0;right:0;z-index:50;
  padding:20px clamp(20px,4vw,40px);
  display:flex;align-items:center;justify-content:space-between;
  background:linear-gradient(180deg,rgba(17,18,20,0.85) 0%,rgba(17,18,20,0) 100%);
  pointer-events:none;
}
.chrome > *{pointer-events:auto}
.chrome-brand{display:flex;align-items:center;gap:12px}
.chrome-brand .cb-mark{width:48px;height:auto;filter:drop-shadow(0 2px 6px rgba(0,0,0,0.5))}
.chrome-brand .cb-tag{
  font-family:var(--serif);font-style:italic;font-size:13px;
  color:var(--bone);opacity:0.9;letter-spacing:0.02em;
}
@media (max-width:600px){
  .chrome-brand .cb-tag{display:none}
  .chrome-brand .cb-mark{width:42px}
}

/* ---------- Page scaffolding ---------- */
.wrap{
  max-width:760px;margin:0 auto;
  padding:0 clamp(20px,5vw,32px);
}
.section{padding:clamp(80px,12vh,160px) 0;position:relative}
.section + .section{border-top:1px solid var(--hairline-soft)}

/* ---------- Typography ---------- */
.eyebrow{
  font-family:var(--mono);font-size:11px;letter-spacing:0.18em;
  text-transform:lowercase;color:var(--bone-dim);
  margin-bottom:24px;
}
h1, .h1{
  font-family:var(--sans);font-weight:500;
  font-size:clamp(30px,4.4vw,52px);
  line-height:1.12;letter-spacing:-0.012em;
  color:var(--bone);
}
h2, .h2{
  font-family:var(--sans);font-weight:500;
  font-size:clamp(24px,3.2vw,36px);
  line-height:1.18;letter-spacing:-0.008em;
  color:var(--bone);
}
h3, .h3{
  font-family:var(--sans);font-weight:600;
  font-size:18px;line-height:1.3;letter-spacing:0;color:var(--bone);
}
.lede{
  font-size:clamp(15px,1.2vw,17px);line-height:1.65;color:var(--bone-dim);
  max-width:640px;
}
p{font-size:16px;line-height:1.7;color:var(--bone-dim);max-width:640px}
p + p{margin-top:1.2em}
p strong{color:var(--bone);font-weight:500}

.body{color:var(--bone-dim);font-size:16px;line-height:1.7}
.body .gold{color:var(--gold)}
.body strong{color:var(--bone);font-weight:500}

.mono-strip{
  font-family:var(--mono);font-size:11px;letter-spacing:0.22em;
  text-transform:uppercase;color:var(--bone-dim);
}
.mono-strip .sep{margin:0 10px;opacity:0.5}

/* ---------- Gold trademark phrase ---------- */
.tm{
  font-size:0.40em;vertical-align:0.55em;
  letter-spacing:0.02em;margin-left:0.05em;
}
.gold-phrase{color:var(--gold)}

/* ---------- CTAs ---------- */
.cta-primary{
  display:inline-flex;align-items:center;gap:12px;
  padding:16px 32px;border-radius:2px;
  font-family:var(--sans);font-weight:600;font-size:13px;
  letter-spacing:0.18em;text-transform:uppercase;
  background:var(--gold);color:var(--charcoal);
  border:1px solid var(--gold);
  transition:opacity 200ms ease,transform 200ms ease;
  cursor:pointer;
}
.cta-primary:hover{opacity:0.92;transform:translateY(-1px)}
.cta-primary[disabled]{opacity:0.5;cursor:not-allowed;transform:none}

.cta-secondary{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 28px;border-radius:2px;
  font-family:var(--sans);font-weight:500;font-size:12px;
  letter-spacing:0.16em;text-transform:uppercase;
  background:transparent;color:var(--gold);
  border:1px solid var(--gold);
  transition:opacity 200ms ease,background 200ms ease;
}
.cta-secondary:hover{background:rgba(176,141,87,0.08);opacity:1}

.cta-row{display:flex;flex-wrap:wrap;gap:16px;align-items:center}
.text-link{
  color:var(--gold);font-size:14px;
  border-bottom:1px solid var(--hairline);padding-bottom:1px;
  transition:border-color 200ms ease;
}
.text-link:hover{border-color:var(--gold)}

/* ---------- Panels ---------- */
.panel{
  background:var(--navy);
  border:1px solid var(--hairline);
  padding:24px 28px;
}
.panel + .panel{margin-top:12px}
.panel-stack{display:flex;flex-direction:column;gap:12px}

/* ---------- Forms ---------- */
.field{display:block;margin-bottom:18px}
.field label{
  display:block;font-family:var(--mono);font-size:11px;
  letter-spacing:0.18em;text-transform:lowercase;
  color:var(--bone-dim);margin-bottom:8px;
}
.field input, .field select{
  width:100%;background:var(--navy);
  border:1px solid var(--hairline);
  padding:14px 16px;font:inherit;color:var(--bone);
  border-radius:2px;
  transition:border-color 200ms ease,background 200ms ease;
  min-height:44px;
}
.field input:focus, .field select:focus{
  outline:none;border-color:var(--gold);background:#1F2737;
}
.field input::placeholder{color:var(--bone-faint)}

.error-msg{
  color:var(--gold);font-size:13px;margin-top:8px;
  font-family:var(--mono);letter-spacing:0.04em;min-height:18px;
}

/* ---------- Footer ---------- */
.foot{
  padding:64px clamp(20px,5vw,32px) 48px;text-align:center;
  border-top:1px solid var(--hairline-soft);
}
.foot-mark{width:96px;height:auto;margin:0 auto 16px;opacity:0.95}
.foot-tag{
  font-family:var(--serif);font-style:italic;font-size:14px;
  color:var(--bone-dim);letter-spacing:0.02em;
}
.foot-line{
  margin-top:6px;font-family:var(--sans);font-size:12px;
  color:var(--bone-dim);line-height:1.5;
}
.foot-line.tiny{
  margin-top:18px;font-family:var(--mono);font-size:10px;
  letter-spacing:0.18em;color:var(--bone-faint);text-transform:uppercase;
}

/* ---------- Small utilities ---------- */
.center{text-align:center}
.spacer-sm{height:24px}
.spacer-md{height:48px}
.spacer-lg{height:80px}
.hide{display:none !important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}