/* Selanix public education site. Static, dependency-free, responsive, accessible. */
:root{
  color-scheme:light;
  --navy:#1e2a44;--blue:#053374;--sky:#afd3e2;--green:#08795c;
  --ink:#18243a;--muted:#49566b;--border:#dce7ed;--page:#f9fcfd;
  --white:#fff;--soft:#eef6f8;--mint:#dff5ed;--shadow:0 22px 65px rgba(12,43,78,.08);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--page);line-height:1.65;-webkit-font-smoothing:antialiased}
a{color:var(--blue)}
a:hover{text-decoration-thickness:2px}
a:focus-visible,summary:focus-visible{outline:3px solid #0f8261;outline-offset:4px;border-radius:4px}
img{max-width:100%;height:auto}
h1,h2,h3,p{margin-top:0}
h1,h2,h3{letter-spacing:-.035em;line-height:1.13}
h1{font-size:clamp(2.65rem,5.1vw,5.1rem);font-weight:750;max-width:800px}
h2{font-size:clamp(2rem,3.2vw,3.4rem);font-weight:730}
h3{font-size:1.27rem;font-weight:750;letter-spacing:-.025em}
p{color:var(--muted)}
.skip-link{position:absolute;left:1.2rem;top:-100px;z-index:50;padding:.8rem 1rem;background:var(--blue);color:white}
.skip-link:focus{top:1rem}
.site-header{background:rgba(255,255,255,.98);border-bottom:1px solid var(--border);position:relative;z-index:3}
.header-inner{max-width:1300px;margin:0 auto;min-height:92px;padding:1rem clamp(1.2rem,4.4vw,3.6rem);display:flex;align-items:center;gap:2rem;justify-content:space-between}
.brand{display:inline-flex;align-items:center;gap:.7rem;color:var(--blue);font-size:1.72rem;letter-spacing:-.065em;line-height:1;text-decoration:none;font-weight:770;white-space:nowrap}
.brand img{width:42px;height:42px;object-fit:contain}
.brand-point{color:#0e9f77}
.site-header nav{display:flex;align-items:center;gap:clamp(.7rem,1.8vw,1.6rem)}
.site-header nav a{color:#32435a;font-size:.875rem;text-decoration:none;font-weight:650;white-space:nowrap}
.site-header nav a:hover{color:var(--blue);text-decoration:underline}
.header-cta{border-radius:100px;background:var(--blue);color:white;padding:.72rem 1.2rem;text-decoration:none;font-size:.875rem;white-space:nowrap;font-weight:750}
.header-cta:hover,.button.primary:hover{background:#164b89;color:white}
main{max-width:1300px;margin:0 auto;padding:0 clamp(1.2rem,4.4vw,3.6rem)}
.hero{position:relative;display:flex;align-items:center;min-height:545px;padding:clamp(4rem,7vw,7.2rem) 0 clamp(3rem,6vw,5rem);gap:3rem}
.hero-home{min-height:680px}
.hero::before{content:"";position:absolute;pointer-events:none;width:60vw;height:49vw;min-width:300px;min-height:300px;max-width:770px;max-height:660px;border-radius:50%;right:-9%;top:2%;background:radial-gradient(ellipse,rgba(175,211,226,.45),rgba(225,247,235,.24) 54%,transparent 70%);z-index:-1}
.hero-copy{flex:1 1 50%;max-width:810px}
.eyebrow{display:inline-flex;align-items:center;gap:.65rem;color:#125e55;background:#e0f4ed;border:1px solid #bce4d5;padding:.55rem 1rem;border-radius:100px;font-size:.79rem;font-weight:780;letter-spacing:.02em;margin-bottom:2rem}
.eyebrow-dot{width:8px;height:8px;background:#12a57b;border-radius:50%}
.hero h1{color:var(--navy);margin-bottom:1.55rem}
.hero .lede{font-size:clamp(1.08rem,1.65vw,1.28rem);max-width:635px;line-height:1.75}
.hero-actions{display:flex;gap:.85rem;align-items:center;flex-wrap:wrap;margin-top:2rem}
.button{display:inline-flex;justify-content:center;align-items:center;gap:.6rem;min-height:52px;padding:.86rem 1.4rem;border-radius:12px;text-decoration:none;font-size:.95rem;font-weight:755;line-height:1.25;transition:background .15s ease,box-shadow .15s ease}
.button.primary{background:var(--blue);color:white;box-shadow:0 9px 19px rgba(5,51,116,.14)}
.button.secondary{background:white;color:var(--blue);border:1px solid #c7dae6}
.button.secondary:hover{background:var(--soft)}
.availability-note{margin:1.65rem 0 0;max-width:590px;font-size:.82rem;line-height:1.55;color:#536075;border-left:3px solid #6fbda5;padding-left:1rem}
.availability-note strong{color:#274a40}
.illustration{flex:0 1 42%;position:relative;max-width:465px;border:1px solid #d8e7e9;border-radius:26px;background:linear-gradient(145deg,#fff,#f0f9f8 75%,#e7f3f5);box-shadow:var(--shadow);padding:clamp(1.25rem,2.7vw,2.1rem);transform:rotate(1deg)}
.illustration:before{position:absolute;content:"";height:95px;width:95px;right:-27px;top:-36px;border-radius:22px;background:linear-gradient(130deg,rgba(16,185,129,.18),rgba(175,211,226,.3));transform:rotate(17deg);z-index:-1}
.illustration-top{display:flex;gap:.55rem;align-items:center;color:var(--blue);font-size:.85rem;font-weight:770;letter-spacing:-.015em}
.tiny-dot{background:#14a57d;width:9px;height:9px;border-radius:100%}
.illustration-chip{margin-left:auto;font-size:.66rem;color:#517367;font-weight:750;background:#dff6eb;border-radius:999px;padding:.25rem .55rem}
.illustration-hello{color:#1e3652;font-size:1.85rem;line-height:1.25;letter-spacing:-.06em;font-weight:750;max-width:260px;margin:2.2rem 0 1.6rem}
.illustration-card{display:flex;align-items:center;gap:.85rem;border-radius:14px;background:white;border:1px solid #ddebed;padding:.95rem;box-shadow:0 4px 10px rgba(23,64,94,.035);margin:.55rem 0}
.illustration-card strong{display:block;font-size:.83rem;color:#244361;line-height:1.4}
.illustration-card span:not(.ico-circle){display:block;font-size:.72rem;color:#617384;line-height:1.45;padding-top:.2rem}
.ico-circle{display:grid;place-items:center;flex:none;height:43px;width:43px;border-radius:12px;background:#ecf5fb;color:#087d64;font-size:1.5rem}
.illustration-card:nth-of-type(3) .ico-circle{background:#eaf8f2}
.illustration-card:nth-of-type(4) .ico-circle{background:#e8edf9}
.illustration-caption{font-size:.65rem;color:#718094;margin-top:1.2rem;text-align:center;letter-spacing:.01em}
.section{padding:5rem 0;border-top:1px solid var(--border)}
.section-heading{max-width:750px;margin-bottom:2.2rem}
.kicker{font-size:.72rem;text-transform:uppercase;letter-spacing:.14em;color:var(--green);font-weight:820;display:block;margin-bottom:1rem}
.section-heading h2{margin-bottom:0}
.feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem}
.feature{border:1px solid #dce8eb;border-radius:20px;padding:2rem;background:white;box-shadow:0 5px 15px rgba(13,42,73,.03)}
.feature-num{display:inline-flex;align-items:center;justify-content:center;font-size:.77rem;color:#0a8666;letter-spacing:.08em;font-weight:780;background:#e6f6ef;border-radius:11px;width:44px;height:44px;margin-bottom:1.6rem}
.feature h3{color:#1f3654;margin-bottom:.7rem}
.feature p{font-size:.92rem;line-height:1.75;margin-bottom:0}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr);gap:clamp(2rem,6vw,7rem);align-items:center}
.split-reverse .split-copy{order:2}
.split-reverse .checklist{order:1}
.split-copy h2{max-width:550px}
.split-copy p{font-size:1.07rem;line-height:1.8;max-width:565px}
.checklist{border-radius:22px;background:linear-gradient(145deg,#eaf6f8,#f3faf4);padding:clamp(1.4rem,3vw,2.5rem);border:1px solid #d8eae9}
.checklist ul{list-style:none;padding:0;margin:0}
.checklist li{display:flex;align-items:flex-start;gap:1rem;color:#28455a;font-weight:660;font-size:.98rem;line-height:1.6;padding:.95rem 0}
.checklist li+li{border-top:1px solid rgba(44,94,107,.13)}
.check-mark{display:grid;flex:none;place-items:center;background:#d0f0e3;color:#126950;border-radius:50%;height:27px;width:27px;font-weight:900;font-size:.84rem}
.faq{max-width:900px;margin:0 auto}
.faq h2{margin-bottom:1.65rem}
.faq-items{display:grid;gap:.85rem}
.faq details{background:white;border:1px solid #dce8eb;border-radius:12px;padding:1.15rem 1.5rem}
.faq summary{cursor:pointer;font-size:1.04rem;font-weight:760;color:#203951}
.faq details p{padding:.85rem 1rem 0 0;margin:0;line-height:1.7}
.closing{margin:2rem 0 6rem;background:linear-gradient(114deg,#053374 2%,#1b5364 66%,#08795c);color:white;border-radius:25px;padding:clamp(2rem,4vw,4rem);display:flex;align-items:center;justify-content:space-between;gap:3rem}
.closing h2{color:white;max-width:650px;margin-bottom:1rem}
.closing p{color:#e8f2f6;max-width:590px;margin:0}
.closing .kicker{color:#bee8d4}
.closing .button.primary{background:white;color:#083c62;flex:none}
.closing .button.primary:hover{background:#e6f6ef}
.site-footer{background:#142843;color:#fff;padding:3.5rem clamp(1.2rem,4.4vw,3.6rem) 1.2rem}
.footer-content,.footer-bottom{max-width:1185px;margin:auto}
.footer-content{display:flex;align-items:start;justify-content:space-between;gap:3rem;padding-bottom:3.6rem}
.footer-lead{max-width:360px}
.footer-lead .brand{color:white}
.footer-lead p{color:#c0cedc;font-size:.89rem;line-height:1.8;margin:1.15rem 0 0}
.site-footer nav{display:grid;grid-template-columns:repeat(2,max-content);gap:.7rem 2.5rem}
.site-footer nav a{color:#e2edf5;text-decoration:none;font-size:.88rem}
.site-footer nav a:hover{text-decoration:underline}
.footer-bottom{display:flex;justify-content:space-between;gap:1.5rem;border-top:1px solid #35506c;padding-top:1.3rem;color:#c0cedc;font-size:.76rem}
@media(max-width:1110px){
  .header-inner{flex-wrap:wrap;gap:1rem}.site-header nav{order:3;flex-basis:100%;justify-content:space-between;flex-wrap:wrap}
  .hero-home{min-height:550px}
}
@media(max-width:800px){
  .hero{flex-direction:column;align-items:stretch;padding-top:4rem}
  .hero h1{max-width:750px}.illustration{width:100%;max-width:600px;margin:1.5rem auto 0;transform:none}
  .feature-grid{grid-template-columns:1fr}.feature{padding:1.55rem}
  .split{grid-template-columns:1fr;gap:1.4rem}.split-reverse .split-copy,.split-reverse .checklist{order:initial}
  .section{padding:3.3rem 0}.closing{flex-direction:column;align-items:flex-start}
}
@media(max-width:580px){
  .header-inner{padding:1rem}.site-header nav{gap:.4rem 1.1rem;justify-content:start}
  .site-header nav a{font-size:.76rem}.header-cta{font-size:.73rem;padding:.58rem .85rem}
  .brand{font-size:1.4rem}.brand img{width:34px;height:34px}
  main{padding:0 1rem}.hero{padding:3.2rem 0 2.8rem;gap:1rem}.hero h1{font-size:clamp(2.4rem,10vw,3.45rem)}
  .eyebrow{margin-bottom:1.3rem}.hero-actions{align-items:stretch}
  .hero-actions .button{width:100%}.closing{margin-bottom:3rem}
  .footer-content,.footer-bottom{flex-direction:column}.site-footer nav{grid-template-columns:1fr 1fr;gap:1rem}.illustration{padding:1rem}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}.button{transition:none}
}