/* SailFin for providers. Colors from the SailFin mark: navy hull, teal sail. */
:root{
  --navy:#16324F; --deep:#0D2233; --teal:#2F9FAE; --sail:#4FBFCB;
  --mist:#EEF4F6; --line:#D5E1E6; --soft:#41596A; --paper:#fff;
  --display:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif;
  --body:"Atkinson Hyperlegible","Segoe UI",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-padding-top:84px}
body{margin:0;background:var(--paper);color:var(--soft);font:18px/1.6 var(--body);-webkit-font-smoothing:antialiased}
a{color:var(--teal);text-underline-offset:3px}
a:focus-visible,.btn:focus-visible{outline:3px solid var(--sail);outline-offset:3px;border-radius:6px}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
h1,h2,h3{font-family:var(--display);color:var(--navy);letter-spacing:-.015em;margin:0}
h2{font-size:clamp(30px,3.6vw,44px);line-height:1.08;font-weight:800;margin-bottom:14px}
h3{font-size:21px;font-weight:700;margin-bottom:6px}
.lede{font-size:20px;max-width:38em;margin:0 0 34px}
section{padding:80px 0}
.mist{background:var(--mist)}

/* header */
.top{position:sticky;top:0;z-index:10;background:rgba(255,255,255,.96);backdrop-filter:blur(6px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;min-height:70px;gap:18px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--display);font-weight:800;font-size:23px;color:var(--navy)}
.brand img{height:40px;width:auto}
.brand span{font-family:var(--body);font-weight:400;font-size:14px;color:var(--soft)}
.nav{display:flex;gap:22px;align-items:center;flex-wrap:wrap;font-size:16px}
.nav a{color:var(--navy);text-decoration:none}
.nav a:hover{text-decoration:underline}
.btn{display:inline-block;font:700 17px/1 var(--body);padding:15px 24px;border-radius:10px;text-decoration:none;border:2px solid transparent}
.btn-main{background:var(--navy);color:#fff}
.btn-main:hover{background:var(--deep)}
.btn-line{border-color:var(--navy);color:var(--navy)}
.nav .btn{padding:11px 18px;font-size:15px}
.nav a.btn-main{color:#fff}
.nav a.btn-main:hover{text-decoration:none}

/* hero */
.hero{padding:76px 0 40px}
.hero h1{font-weight:800;font-size:clamp(42px,6.2vw,76px);line-height:1;max-width:14ch;margin-bottom:22px}
.hero p{font-size:21px;max-width:36em;margin:0 0 30px}
.hero .actions{display:flex;gap:14px;flex-wrap:wrap}

/* the pipeline: headend to living room, the one bold element */
.pipe{margin-top:56px;display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-radius:18px;overflow:hidden;border:2px solid var(--navy)}
.pipe li{list-style:none;padding:24px 22px 26px;position:relative;background:var(--paper)}
.pipe li + li{border-left:2px solid var(--navy)}
.pipe li:nth-child(2){background:#F4FAFB}
.pipe li:nth-child(3){background:#E6F4F6}
.pipe li:nth-child(4){background:var(--navy);color:#CFE3EA}
.pipe li:nth-child(4) h3{color:#fff}
.pipe .step{font-family:var(--display);font-weight:800;font-size:15px;color:var(--teal);display:block;margin-bottom:10px}
.pipe li:nth-child(4) .step{color:var(--sail)}
.pipe p{margin:0;font-size:16px}
.pipe-wrap{margin:0;padding:0}

/* customer app */
.custview{background:var(--deep);color:#C4D8E0}
.custview h2{color:#fff}
.tvshots{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.tvshots figure{margin:0}
.tvshots img{width:100%;height:auto;display:block;border-radius:14px;border:6px solid #1C3A52}
.tvshots figcaption{font-size:16px;margin-top:10px}
.shotnote{font-size:13px;color:#7F98A5;margin:16px 0 0}
@media (max-width:900px){.tvshots{grid-template-columns:1fr}}

/* problem / answer */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.quote{font-family:var(--display);font-weight:700;color:var(--navy);font-size:clamp(26px,3vw,34px);line-height:1.2;margin:0}

/* feature list */
.feats{display:grid;grid-template-columns:repeat(3,1fr);gap:36px 40px}
.feat p{margin:0;font-size:17px}

/* ads band */
.ads{background:var(--deep);color:#C4D8E0}
.ads h2{color:#fff}
.ads .split{align-items:center}
.ads ul{margin:0;padding-left:20px}
.ads li{margin:8px 0}
.ads .kicker{font-family:var(--display);font-weight:800;color:var(--sail);font-size:clamp(34px,4vw,52px);line-height:1.05;margin:0}

/* screenshots */
.shots{display:grid;grid-template-columns:1.3fr 1fr;gap:22px}
.shots figure{margin:0}
.shots img{width:100%;height:auto;display:block;border-radius:12px;border:1px solid var(--line)}
.shots figcaption{font-size:15px;margin-top:8px}
.shots .stack{display:grid;gap:22px}

.wide{margin:0 0 26px}
.wide img,.shots2 img{width:100%;height:auto;display:block;border-radius:12px;border:1px solid var(--line)}
.wide figcaption,.shots2 figcaption{font-size:15px;margin-top:8px}
.shots2{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.shots2 figure{margin:0}
@media (max-width:900px){.shots2{grid-template-columns:1fr}}

/* features page */
.jump{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.jump a{display:inline-block;padding:9px 14px;border:2px solid var(--line);border-radius:999px;color:var(--navy);text-decoration:none;font-size:15px;background:var(--paper)}
.jump a:hover{border-color:var(--navy)}
.fgroup{padding:60px 0}
.fg{display:grid;grid-template-columns:.8fr 1.6fr;gap:48px;align-items:start}
.fg h2{font-size:clamp(26px,3vw,36px)}
.fg p{margin:0}
.fg ul{margin:0;padding-left:20px}
.fg li{margin:0 0 12px}
.fg li b{color:var(--navy)}
.fgroup.ads li b{color:#fff}
@media (max-width:900px){.fg{grid-template-columns:1fr;gap:18px}}

/* deploy + pricing */
.cards2{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.card{background:var(--paper);border:2px solid var(--line);border-radius:16px;padding:28px}
.card p{margin:0 0 10px}
.card ul{margin:10px 0 0;padding-left:20px}
.price-row{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:2px solid var(--navy);border-radius:16px;overflow:hidden;background:var(--paper)}
.price-row > div{padding:26px}
.price-row > div + div{border-left:2px solid var(--navy)}
.price-row strong{display:block;font-family:var(--display);font-size:24px;color:var(--navy);margin-bottom:6px}

/* proof */
.proof{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:10px}
.proof div{border-top:3px solid var(--teal);padding-top:14px}
.proof b{display:block;font-family:var(--display);font-size:40px;color:var(--navy);line-height:1}
.proof span{font-size:16px}

/* cta */
.cta{background:var(--navy);color:#CFE3EA;text-align:left}
.cta h2{color:#fff}
.cta .btn-main{background:var(--sail);color:var(--deep)}
.cta .btn-main:hover{background:#7AD2DA}
.cta a{color:#fff}

.foot{background:var(--deep);color:#9FB6C1;font-size:15px;padding:34px 0}
.foot .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.foot a{color:#DCE8EC}

@media (max-width:900px){
  .pipe{grid-template-columns:1fr 1fr}
  .pipe li:nth-child(3){border-left:0}
  .pipe li:nth-child(n+3){border-top:2px solid var(--navy)}
  .split,.cards2,.shots{grid-template-columns:1fr}
  .feats{grid-template-columns:1fr 1fr}
  .price-row{grid-template-columns:1fr}
  .price-row > div + div{border-left:0;border-top:2px solid var(--navy)}
  .proof{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .pipe{grid-template-columns:1fr}
  .pipe li + li{border-left:0;border-top:2px solid var(--navy)}
  .feats{grid-template-columns:1fr}
  section{padding:60px 0}
}