/* ============================================================
   Relay — marketing site styles
   Ported from the Claude Design prototype (Relay-*.dc.html).
   Palette: bg #F6F6F3 · ink #0C0F0E · teal #0F6E56/#16A085 · amber #E0932F
   Type: Space Grotesk (display) · Inter (body) · IBM Plex Mono (data)
   ============================================================ */

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:#F6F6F3;
  color:#0C0F0E;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:#0F6E56}
a:hover{color:#0C5C48}
img{max-width:100%;height:auto}
.tnum{font-variant-numeric:tabular-nums}
:focus-visible{outline:2px solid #16A085;outline-offset:2px}
.rl-skip{position:absolute;left:-9999px;top:0;z-index:100;background:#0C0F0E;color:#fff;padding:10px 16px;border-radius:0 0 8px 0;font:600 14px Inter,sans-serif;text-decoration:none}
.rl-skip:focus{left:0}

/* ---- scroll-reveal (progressive enhancement: only hides when JS is on) ---- */
.rl-reveal{opacity:1;transform:none}
.js .rl-reveal{
  opacity:0;transform:translateY(18px);
  transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);
}
.js .rl-in{opacity:1 !important;transform:none !important}

/* ---- keyframes (union of all pages) ---- */
@keyframes rl-pulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(22,160,133,0.45)}50%{opacity:.75;box-shadow:0 0 0 5px rgba(22,160,133,0)}}
@keyframes rl-amberpulse{0%,100%{box-shadow:0 0 0 0 rgba(224,147,47,0.5)}50%{box-shadow:0 0 0 5px rgba(224,147,47,0)}}
@keyframes rl-shimmer{0%{transform:translateX(-120%)}60%,100%{transform:translateX(320%)}}
@keyframes rl-run{0%{left:6%}100%{left:92%}}
@keyframes rl-dash{to{stroke-dashoffset:-24}}
@keyframes rl-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

@media (prefers-reduced-motion:reduce){
  .js .rl-reveal{opacity:1 !important;transform:none !important}
  [data-run],[data-float]{animation:none !important}
}

/* ============================================================
   NAV
   ============================================================ */
.rl-nav-wrap{
  position:sticky;top:0;z-index:50;
  background:rgba(246,246,243,0.82);
  backdrop-filter:saturate(140%) blur(10px);
  -webkit-backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid #E7E7E2;
}
.rl-nav{max-width:1180px;margin:0 auto;padding:0 24px;height:60px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.rl-brand{display:flex;align-items:center;gap:9px;text-decoration:none;flex:none}
.rl-mark{display:inline-flex;width:24px;height:24px;border-radius:7px;background:#0F6E56;align-items:center;justify-content:center;flex:none}
.rl-word{font:600 18px/1 'Space Grotesk',sans-serif;color:#0C0F0E;letter-spacing:-0.02em}
.rl-nav-links{display:flex;align-items:center;gap:4px}
.rl-nav-link{text-decoration:none;font:500 14px/1 Inter,sans-serif;color:#5B635C;padding:9px 12px;border-radius:8px;transition:color .15s,background .15s}
.rl-nav-link:hover{color:#0C0F0E;background:rgba(12,15,14,0.04)}
.rl-nav-link.active{color:#0C0F0E;font-weight:600}
.rl-nav-cta{display:flex;align-items:center;gap:8px;flex:none}
.rl-login{text-decoration:none;font:500 14px/1 Inter,sans-serif;color:#3B433D;padding:9px 12px;border-radius:8px;transition:color .15s,background .15s}
.rl-login:hover{color:#0C0F0E;background:rgba(12,15,14,0.04)}
.rl-nav-start{text-decoration:none;font:600 14px/1 Inter,sans-serif;color:#fff;background:#0F6E56;padding:10px 15px;border-radius:9px;border:1px solid #0F6E56;box-shadow:0 1px 2px rgba(12,15,14,0.12);transition:background .15s,border-color .15s}
.rl-nav-start:hover{background:#0C5C48;border-color:#0C5C48;color:#fff}
.rl-burger{display:none;background:none;border:1px solid #E7E7E2;border-radius:8px;width:38px;height:38px;cursor:pointer;align-items:center;justify-content:center;color:#0C0F0E;flex:none}
.rl-nav-mobile{display:none;border-top:1px solid #E7E7E2;background:#F6F6F3;padding:8px 24px 16px}
.rl-nav-mobile.open{display:block}
.rl-nav-mobile a.m-link{display:block;padding:11px 4px;text-decoration:none;font:500 15px/1 Inter,sans-serif;color:#0C0F0E;border-bottom:1px solid #ECECE7}
.rl-nav-mobile .m-cta{display:flex;gap:10px;margin-top:14px}
.rl-nav-mobile .m-login{flex:1;text-align:center;text-decoration:none;font:500 14px Inter,sans-serif;color:#0C0F0E;padding:11px;border:1px solid #E7E7E2;border-radius:9px}
.rl-nav-mobile .m-start{flex:1;text-align:center;text-decoration:none;font:600 14px Inter,sans-serif;color:#fff;background:#0F6E56;padding:11px;border-radius:9px}
@media (max-width:820px){
  .rl-nav-links{display:none}
  .rl-nav-cta{display:none}
  .rl-burger{display:inline-flex}
}

/* ============================================================
   FOOTER
   ============================================================ */
.rl-foot{background:#0C0F0E;color:#EAEDEA;font-family:Inter,sans-serif}
.rl-foot-grid{max-width:1180px;margin:0 auto;padding:56px 24px 40px;display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px}
.rl-foot-brand{max-width:300px}
.rl-foot-mark{display:inline-flex;width:24px;height:24px;border-radius:7px;background:#16A085;align-items:center;justify-content:center}
.rl-foot h4{margin:0 0 14px;font:600 12px/1 Inter,sans-serif;letter-spacing:0.06em;text-transform:uppercase;color:#8A938C}
.rl-foot-col{display:flex;flex-direction:column;gap:11px}
.rl-foot-col a{text-decoration:none;font-size:14px;color:#C9CFC9}
.rl-foot-col a:hover{color:#fff}
.rl-foot-bar{border-top:1px solid #1E2422}
.rl-foot-bar-in{max-width:1180px;margin:0 auto;padding:20px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.rl-foot-legal{margin:0;font-size:12.5px;color:#8A938C}
.rl-foot-links{display:flex;gap:20px}
.rl-foot-links a{text-decoration:none;font-size:12.5px;color:#8A938C}
.rl-foot-links a:hover{color:#C9CFC9}
@media (max-width:820px){.rl-foot-grid{grid-template-columns:1fr 1fr;gap:32px}}
@media (max-width:520px){.rl-foot-grid{grid-template-columns:1fr}}

/* ============================================================
   FORM INPUTS — Demo page
   ============================================================ */
.d-in{width:100%;font:500 14px Inter,sans-serif;color:#0C0F0E;background:#fff;border:1px solid #DADAD3;border-radius:9px;padding:11px 13px;outline:none;transition:border-color .15s,box-shadow .15s}
.d-in:focus{border-color:#16A085;box-shadow:0 0 0 3px rgba(22,160,133,0.15)}
.d-in.err{border-color:#C0392B;box-shadow:0 0 0 3px rgba(192,57,43,0.12)}
.d-lbl{display:block;font:600 11px Inter,sans-serif;letter-spacing:0.03em;text-transform:uppercase;color:#8A938C;margin-bottom:6px}

/* ============================================================
   FORM INPUTS — Rate-con generator
   ============================================================ */
.rc-in{width:100%;font:500 13.5px Inter,sans-serif;color:#0C0F0E;background:#fff;border:1px solid #DADAD3;border-radius:8px;padding:9px 11px;outline:none;transition:border-color .15s,box-shadow .15s}
.rc-in:focus{border-color:#16A085;box-shadow:0 0 0 3px rgba(22,160,133,0.15)}
.rc-lbl{display:block;font:600 10.5px Inter,sans-serif;letter-spacing:0.04em;text-transform:uppercase;color:#8A938C;margin-bottom:6px}
.rc-seg{font:600 13px Inter,sans-serif;padding:9px 14px;border-radius:8px;cursor:pointer;border:1px solid #DADAD3;background:#fff;color:#5B635C;flex:1;text-align:center;transition:background .15s,color .15s,border-color .15s}
.rc-seg.on{border-color:#0C0F0E;background:#0C0F0E;color:#fff}

@media print{
  .rl-nav-wrap,.rl-foot{display:none !important}
  body{background:#fff}
  [data-noprint]{display:none !important}
  [data-doc]{box-shadow:none !important;border:1px solid #ddd !important;margin:0 !important;max-width:100% !important;position:static !important}
  @page{margin:0.5in}
}