/* Unity-Xchange / Registry — site styles */
:root{
  --navy:#14507e;
  --navy-deep:#0f3b5c;
  --teal:#3c9188;
  --teal-tint:#e6f3f1;
  --rust:#b5502f;
  --rust-tint:#fbeae3;
  --ink:#1c2b36;
  --body:#455a68;
  --slate:#657683;
  --muted:#8a97a1;
  --hairline:#e4e8ec;
  --surface:#ffffff;
  --canvas:#fbfcfd;
  --wrap:900px;
  --wrap-wide:1200px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:'Public Sans',system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
  background:var(--canvas);
  color:var(--ink);
  line-height:1.5;
}
img{max-width:100%;display:block}
a{color:var(--navy)}
a:hover{color:var(--navy-deep)}
:focus-visible{outline:3px solid var(--navy);outline-offset:2px}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--navy);color:#fff;padding:10px 16px;border-radius:0 0 6px 0;
  font-weight:700;text-decoration:none;
}
.skip-link:focus{left:0}

/* ---------- nav ---------- */
.site-nav{
  position:sticky;top:0;z-index:50;
  background:var(--surface);
  border-bottom:1px solid var(--hairline);
}
.site-nav__inner{
  max-width:var(--wrap-wide);margin:0 auto;
  padding:16px 24px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.site-nav__brand{display:flex;align-items:center;flex-shrink:0}
.site-nav__brand img{height:34px;width:auto}
.nav-toggle{
  display:none;
  background:none;border:1px solid var(--hairline);border-radius:6px;
  width:40px;height:36px;padding:0;cursor:pointer;
  flex-direction:column;align-items:center;justify-content:center;gap:5px;
}
.nav-toggle__bar{
  display:block;width:18px;height:2px;background:var(--navy);border-radius:2px;
  transition:transform .2s ease,opacity .2s ease;
}
.nav-toggle.is-open .nav-toggle__bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle.is-open .nav-toggle__bar:nth-child(2){opacity:0}
.nav-toggle.is-open .nav-toggle__bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.site-nav__list{
  list-style:none;margin:0;padding:0;
  display:flex;align-items:center;gap:26px;flex-wrap:wrap;
}
.site-nav__link{
  display:block;
  padding:6px 0;
  font-size:15px;font-weight:600;text-decoration:none;
  color:var(--navy-deep);white-space:nowrap;
  border-bottom:2px solid transparent;
}
.site-nav__link:hover{color:var(--navy);border-bottom-color:#b9ccd8}
.site-nav__link[aria-current="page"]{color:var(--navy);border-bottom-color:var(--teal)}
.site-nav__login{
  margin-left:6px;
  padding:7px 16px;border-radius:6px;
  font-size:13.5px;font-weight:700;text-decoration:none;
  color:var(--slate);background:transparent;
  border:1px solid var(--hairline);white-space:nowrap;
}
.site-nav__login:hover{color:var(--navy);border-color:#b9ccd8;background:#f7fafb}

@media (max-width:900px){
  .nav-toggle{display:flex}
  .site-nav__menu{
    display:none;width:100%;
    padding-top:8px;
  }
  .site-nav__menu.is-open{display:block}
  .site-nav__inner{flex-wrap:wrap}
  .site-nav__list{flex-direction:column;align-items:stretch;gap:0}
  .site-nav__link{
    padding:12px 2px;border-bottom:1px solid var(--hairline);
  }
  .site-nav__link[aria-current="page"]{border-bottom-color:var(--teal)}
  .site-nav__login{margin:12px 0 0;text-align:center}
}

/* ---------- layout ---------- */
.section{max-width:var(--wrap);margin:0 auto;padding:24px 24px 72px}
.section--wide{max-width:var(--wrap-wide)}
.section--intro{padding-top:72px;padding-bottom:56px}
.section--flush{padding-bottom:88px}
.section--wide h1{max-width:900px}
.section--wide .lede{max-width:780px}

.eyebrow{
  display:inline-block;
  font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--teal);background:var(--teal-tint);
  padding:6px 14px;border-radius:20px;
}
.eyebrow--problem{color:var(--rust);background:var(--rust-tint)}

h1{font-size:clamp(30px,5vw,42px);line-height:1.18;font-weight:800;margin:20px 0 18px;color:var(--navy-deep)}
h2{font-size:clamp(21px,3vw,24px);font-weight:800;color:var(--navy-deep);margin:0 0 24px}
h3{margin:0}
.lede{font-size:clamp(16px,2.2vw,18px);line-height:1.65;color:var(--body);margin:0;text-wrap:pretty}

/* ---------- hero ---------- */
.hero{
  padding:clamp(56px,9vw,96px) 24px clamp(56px,8vw,88px);
  display:flex;flex-direction:column;align-items:center;text-align:center;
  background:linear-gradient(180deg,#f3f8fa 0%,var(--canvas) 70%);
}
.hero h1{font-size:clamp(32px,6vw,52px);line-height:1.12;max-width:800px;margin:0 0 20px}
.hero__lede{font-size:clamp(17px,2.4vw,19px);line-height:1.6;max-width:620px;color:var(--body);margin:0 0 36px;text-wrap:pretty}
.btn-row{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}

.btn{
  display:inline-block;
  text-decoration:none;font-weight:700;font-size:16px;
  padding:14px 28px;border-radius:8px;
  background:var(--navy);color:#fff;border:1.5px solid var(--navy);
}
.btn:hover{background:var(--navy-deep);border-color:var(--navy-deep);color:#fff}
.btn--secondary{background:var(--surface);color:var(--navy);border-color:#c9d6de}
.btn--secondary:hover{background:#f3f8fa;border-color:#a9bcc9;color:var(--navy-deep)}
.btn--sm{font-size:15px;padding:12px 24px}

/* ---------- proof strip ---------- */
.proof{
  padding:52px 24px;
  border-top:1px solid #eef1f3;border-bottom:1px solid #eef1f3;
  background:var(--surface);
}
.proof__inner{max-width:var(--wrap-wide);margin:0 auto}
.proof__label{
  font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);margin:0 0 26px;
}
.proof__list{
  list-style:none;margin:0;padding:0;
  display:grid;gap:28px;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}
.proof__item{
  padding-top:16px;border-top:2px solid var(--teal);
  font-size:17px;font-weight:700;line-height:1.35;
  color:var(--navy-deep);text-wrap:pretty;
}

/* ---------- cards ---------- */
.card-grid{
  list-style:none;margin:0;padding:0;
  display:grid;gap:20px;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}
.card-grid--nav{grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:28px}
.card{
  height:100%;
  padding:26px;
  border:1px solid var(--hairline);border-radius:12px;
  background:var(--surface);
  display:flex;flex-direction:column;gap:10px;
}
.card--link{text-decoration:none;color:inherit}
.card--link:hover{border-color:#b9ccd8;color:inherit}
.card__step{font-size:13px;font-weight:700;color:var(--teal);text-transform:uppercase;letter-spacing:.05em}
.card__title{font-size:17px;font-weight:700;color:var(--navy-deep)}
.card--link .card__title{font-size:18px}
.card__body{font-size:14px;color:var(--slate);line-height:1.55;text-wrap:pretty}

.stack{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px}
.stack .card{padding:20px}
.stack .card__title{margin-bottom:4px}
.stack .card__body{font-size:15px}

/* ---------- callout ---------- */
.callout{
  background:#eaf3f8;border-radius:14px;
  padding:clamp(28px,4vw,44px) clamp(24px,4vw,48px);
  display:flex;flex-direction:column;gap:14px;
}
.callout p{margin:0}
.callout__label{font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--teal)}
.callout__title{
  font-size:clamp(21px,3vw,27px);font-weight:800;line-height:1.25;
  color:var(--navy-deep);text-wrap:pretty;
}
.callout__body{font-size:16.5px;color:var(--body);line-height:1.6;text-wrap:pretty}

/* louder variant for a page's closing argument */
.callout--feature .callout__title{font-size:clamp(25px,4.4vw,36px)}
.callout--feature .callout__body{font-size:17px}

/* ---------- steps ---------- */
.steps{list-style:none;margin:0;padding:0}
.step{display:flex;gap:24px}
.step__rail{display:flex;flex-direction:column;align-items:center}
.step__num{
  width:36px;height:36px;border-radius:50%;
  background:var(--navy);color:#fff;font-weight:800;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.step__line{flex:1;width:2px;background:#dfe5e9;margin:4px 0}
.step__body{padding-bottom:36px}
.step:last-child .step__body{padding-bottom:0}
.step__title{font-size:18px;font-weight:700;color:var(--navy-deep);margin:0 0 6px}
.step__text{font-size:15px;color:var(--slate);line-height:1.6;margin:0;text-wrap:pretty}

/* ---------- team ---------- */
.team{
  list-style:none;margin:0;padding:0;
  display:grid;gap:20px;
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
}
.team__member{display:flex;flex-direction:column;gap:10px;align-items:center;text-align:center}
.team__member p{margin:0}
.team__photo{
  width:100%;max-width:176px;height:auto;aspect-ratio:1;
  border-radius:50%;object-fit:cover;background:#eef2f4;
}
.team__name{font-size:15px;font-weight:700;color:var(--navy-deep)}
.team__role{font-size:12.5px;font-weight:600;color:var(--teal)}
.team__bio{font-size:12.5px;color:var(--slate);line-height:1.5;text-wrap:pretty}

/* ---------- footer ---------- */
.site-footer{
  background:var(--navy-deep);color:#cfe0ec;
  padding:40px 24px;
}
.site-footer__inner{
  max-width:var(--wrap-wide);margin:0 auto;
  display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between;
}
.site-footer__legal{display:flex;flex-direction:column;gap:6px}
.site-footer p{margin:0}
.site-footer__copy{font-size:14px;color:#9fc0d6}
.site-footer__links{font-size:13px;color:#9fc0d6}
.site-footer__links a{text-decoration:underline}
.site-footer__note{font-size:13px;color:#7fa2ba}
.site-footer__mark{display:flex;align-items:center;gap:10px;font-size:13px;color:#9fc0d6}
.site-footer__mark img{height:18px;width:auto;opacity:.85}
.site-footer a{color:#cfe0ec}
.site-footer a:hover{color:#fff}

/* ---------- Built in Tennessee badge ---------- */
.made-in-tn{
  display:flex;align-items:center;gap:14px;
  margin:22px 0 0;padding-top:22px;
  border-top:1px solid #dde7ec;
}
.made-in-tn img{width:48px;height:48px;flex-shrink:0}
.made-in-tn__text{display:flex;flex-direction:column;line-height:1.15}
.made-in-tn__kicker{
  font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--slate);
}
.made-in-tn__state{
  font-size:19px;font-weight:800;letter-spacing:.02em;text-transform:uppercase;color:var(--navy-deep);
}

/* ---------- device screenshots ---------- */
.device{
  display:block;width:100%;max-width:300px;height:auto;
  margin:0 auto;
  filter:drop-shadow(0 18px 40px rgba(15,59,92,.22));
}
.device--sm{max-width:250px}

/* hero split: copy left, device right */
.hero--split{
  display:grid;align-items:center;
  gap:clamp(32px,6vw,72px);
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  max-width:var(--wrap-wide);margin:0 auto;
  text-align:left;
}
.hero--split .hero__copy{max-width:600px}
.hero--split h1{margin-top:0;font-size:clamp(28px,3.4vw,52px)}
.hero--split .hero__lede{margin-bottom:28px}
.hero--split .btn-row{justify-content:flex-start}
.hero__device{position:relative;display:flex;justify-content:center}
.hero__device .device{max-width:330px}
.hero__caption{
  position:absolute;left:50%;bottom:-14px;transform:translateX(-50%);
  background:var(--surface);border:1px solid var(--hairline);border-radius:999px;
  padding:9px 20px;white-space:nowrap;
  font-size:13px;font-weight:700;color:var(--navy-deep);
  box-shadow:0 6px 18px rgba(15,59,92,.10);
}

/* generic two-column feature: text + device */
.feature{
  display:grid;align-items:center;
  gap:clamp(28px,5vw,64px);
  grid-template-columns:minmax(0,1fr) minmax(0,.72fr);
}
.feature--reverse{grid-template-columns:minmax(0,.72fr) minmax(0,1fr)}
.feature--reverse .feature__media{order:-1}
.feature__body{display:flex;flex-direction:column;gap:14px}
.feature__eyebrow{
  font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--teal);
}
.feature__title{
  font-size:clamp(22px,3.2vw,30px);font-weight:800;line-height:1.25;
  color:var(--navy-deep);margin:0;text-wrap:pretty;
}
.feature__text{font-size:16.5px;line-height:1.6;color:var(--body);margin:0;text-wrap:pretty}
.feature__media{display:flex;justify-content:center}

/* callout that carries a device alongside it */
.callout--media{
  display:grid;align-items:center;
  gap:clamp(28px,5vw,56px);
  grid-template-columns:minmax(0,1fr) minmax(0,.6fr);
}
.callout--media .callout__text{display:flex;flex-direction:column;gap:14px}
.callout--media .callout__text p{margin:0}
.callout--media .device{filter:drop-shadow(0 18px 40px rgba(15,59,92,.28))}

@media (max-width:1000px){
  .hero--split{grid-template-columns:1fr;text-align:center;justify-items:center}
  .hero--split h1{font-size:clamp(32px,6vw,52px)}
  .hero--split .hero__copy{max-width:620px}
  .hero--split .btn-row{justify-content:center}
  .hero__device{margin-top:20px}
  .feature,.feature--reverse,.callout--media{grid-template-columns:1fr}
  .feature--reverse .feature__media{order:0}
}