/* Relay — light theme (2026-10-05). Loaded after each page's own <style>, so it only overrides:
   brighter backgrounds, more white space, a livelier accent, stronger text contrast, and every section
   as its own full-width band with clearly separated cards. */
:root{
  --bg:#ffffff; --band:#f3f7ff; --pan:#ffffff; --pan2:#eef3ff; --line:#dbe3f1;
  --txt:#0d1530; --mut:#46526e; --dim:#6b7590;
  --acc:#2563eb; --vio:#7c3aed; --grn:#059669; --amb:#b45309; --red:#dc2626;
  --grad:linear-gradient(135deg,#2563eb 0%,#7c3aed 100%);
  --shadow:0 1px 2px rgba(16,32,80,.06),0 8px 24px rgba(16,32,80,.07);
  --shadow-hi:0 2px 4px rgba(16,32,80,.07),0 18px 40px rgba(37,99,235,.14);
  color-scheme:light;
}
html,body{background:#fff}
body{color:var(--txt);background:#fff radial-gradient(1200px 520px at 50% -8%,#e6efff 0%,#ffffff 62%) no-repeat;font-size:17px}
a{color:var(--acc)}

/* header */
header{background:rgba(255,255,255,.86)!important;border-bottom:1px solid var(--line);box-shadow:0 1px 0 rgba(16,32,80,.03)}
.brand{color:var(--txt)!important}
.links a{color:var(--mut)!important}.links a:hover{color:var(--acc)!important}

/* type */
h1{color:var(--txt);letter-spacing:-1.4px}
h2{color:var(--txt)}
.lede,.sub{color:var(--mut)}
.eyebrow{color:var(--acc);background:#e8f0ff;border-color:#c7d8ff}
.fine{color:var(--dim)}

/* buttons */
.btn{box-shadow:0 6px 18px rgba(37,99,235,.28)}
.btn:hover{filter:brightness(1.06)}
.btn.ghost{background:#fff;border-color:#c9d4ea;color:var(--txt);box-shadow:var(--shadow)}

/* sections: full-width bands, alternating white / soft blue, with clear edges and generous space */
main > section{position:relative;padding:72px 0;scroll-margin-top:70px}
main > section:nth-of-type(even){background:var(--band);box-shadow:0 0 0 100vmax var(--band);clip-path:inset(0 -100vmax)}
main > section + section{border-top:1px solid var(--line)}
main > section:nth-of-type(even) + section,main > section + section:nth-of-type(even){border-top-color:#d6e1f5}
main > section.hero{padding:84px 0 64px;border-top:0}

/* cards: distinct boxes with border + shadow, lift on hover */
.card,.vid,details,.ent,.plan{background:var(--pan)!important;border:1px solid var(--line)!important;box-shadow:var(--shadow);border-radius:18px}
.card{padding:26px}
.card h3,.vid h3{color:var(--txt)}
.card p,.vid p,details p{color:var(--mut)}
.card:hover,.plan:hover{box-shadow:var(--shadow-hi);border-color:#c3d3f3!important;transition:box-shadow .2s,border-color .2s}
.grid3,.grid2,.plans,.vids,.contact,.faq{gap:22px}
.ico{background:#e8f0ff;color:var(--acc)}
.plan.hi{border:2px solid var(--acc)!important;box-shadow:var(--shadow-hi)}
.plan .pn,.plan ul{color:var(--mut)}
.tag{color:var(--mut);border-color:var(--line);background:#fff}
.tag.warn{color:var(--amb);background:#fff7e6;border-color:#f5d48f}
.quote blockquote{color:var(--txt);border-left-color:#c7d8ff}
.ent{background:linear-gradient(135deg,#eef4ff,#f4efff)!important;border:1px solid #c7d8ff!important}
.ent li{color:var(--mut)}
details summary{color:var(--txt)}
.step .n{color:#fff}

/* phone frames keep their dark bezel so the screenshots read as phones */
.frame{box-shadow:0 24px 60px rgba(16,32,80,.22),inset 0 0 0 6px #05060a}
.phone figcaption{color:var(--txt)}
.phone figcaption span{color:var(--mut)}

/* forms on light */
input,select,textarea{background:#fff!important;color:var(--txt)!important;border:1px solid #c9d4ea!important}
input:focus,select:focus,textarea:focus{border-color:var(--acc)!important;outline:3px solid #dbe7ff}
label{color:var(--txt)}

/* explainer video */
.explainer{margin-top:8px;background:#0d1530;border-radius:20px;overflow:hidden;box-shadow:var(--shadow-hi);border:1px solid #c7d8ff}
.explainer video{display:block;width:100%;aspect-ratio:16/9;background:#0d1530}

/* footer */
footer{color:var(--dim);border-top:1px solid var(--line)}
footer a{color:var(--mut)}

@media (max-width:900px){main > section{padding:52px 0}main > section.hero{padding:44px 0 40px}}
.card.step{padding-left:80px}
.step .n{left:24px;top:24px}