/* /work/altro-partners/ in Altro's own look (altro-partner-site/assets/site.css):
   Source Sans 3, logo blue #004990 headlines, navy #133660, gold #ba8748 for figures,
   rules and buttons, the pale ice triangle as the one device. Scoped under .cs-altro. */
.cs-altro{--navy:#133660;--blue:#004990;--gold:#ba8748;--gold-l:#d9b483;--ice:#dee1f0;--ice-l:#eef0f8;
  --ink:#101c29;--text:#465664;--muted:#7a8794;--line:#e4e8ee;
  background:#fff;color:var(--text);font:400 17px/1.6 'Source Sans 3',system-ui,sans-serif;overflow:hidden}
.cs-altro *{box-sizing:border-box}
.cs-altro h1,.cs-altro h2,.cs-altro h3{font-family:'Source Sans 3',system-ui,sans-serif;font-weight:600;color:var(--blue);
  letter-spacing:-.012em;line-height:1.12;max-width:none;margin:0 0 .45em}
.cs-altro h1{font-size:clamp(40px,4.6vw,60px)}
.cs-altro h2{font-size:clamp(28px,3vw,40px)}
.cs-altro h3{font-size:21px;color:var(--navy)}
.cs-altro p{margin:0 0 1em}
.cs-altro img{display:block;max-width:100%;height:auto}
.cs-altro .w{max-width:1180px;margin:0 auto;padding:0 24px;position:relative}
.cs-altro .eye{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);
  display:flex;align-items:center;gap:12px;margin-bottom:16px}
.cs-altro .eye::before{content:"";width:28px;height:2px;background:var(--gold)}
.cs-altro .note{font-size:14px;color:var(--muted);margin:14px 0 0}
.cs-altro .btn{display:inline-flex;align-items:center;padding:13px 22px;border-radius:999px;font-weight:600;
  font-size:16px;text-decoration:none;border:1.5px solid transparent;transition:transform .15s}
.cs-altro .btn:hover{transform:translateY(-1px)}
.cs-altro .btn.gold{background:var(--gold);color:#fff}
.cs-altro .btn.line{border-color:var(--navy);color:var(--navy)}

/* opening: text left, the live site running off the right edge */
.cs-altro .open{position:relative;padding:72px 0 24px}
.cs-altro .tri{position:absolute;right:0;top:0;width:46%;height:100%;background:var(--ice-l);
  clip-path:polygon(28% 0,100% 0,100% 100%)}
.cs-altro .open .grid{display:grid;grid-template-columns:5fr 7fr;gap:56px;align-items:center}
.cs-altro .dek{font-size:20px;line-height:1.55;color:var(--text);max-width:34em}
.cs-altro .acts{display:flex;gap:14px;flex-wrap:wrap;margin:28px 0 36px}
.cs-altro .figs{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:0;border-top:2px solid var(--gold);padding-top:20px}
.cs-altro .figs dt{font-size:40px;font-weight:700;color:var(--gold);line-height:1}
.cs-altro .figs dd{margin:6px 0 0;font-size:15px;line-height:1.35;color:var(--navy)}
.cs-altro .site{margin:0 calc(-1 * max(24px, (100vw - 1180px) / 2 + 24px)) 0 0;position:relative}
.cs-altro .site .bar{display:flex;align-items:center;gap:7px;background:#f3f5f9;border:1px solid var(--line);
  border-bottom:0;border-radius:12px 0 0 0;padding:11px 16px}
.cs-altro .site .bar i{width:10px;height:10px;border-radius:50%;background:#d5dbe4}
.cs-altro .site .bar span{margin-left:14px;font-size:13px;color:var(--muted);background:#fff;border-radius:6px;padding:3px 14px}
.cs-altro .site img{border:1px solid var(--line);border-right:0;box-shadow:0 24px 60px rgba(19,54,96,.16)}
.cs-altro .site figcaption{font-size:14px;color:var(--muted);margin-top:12px}

/* split blocks: asymmetric two columns */
.cs-altro .split{display:grid;grid-template-columns:4fr 6fr;gap:64px;padding-top:88px;padding-bottom:16px;align-items:start}
.cs-altro .split .txt{font-size:18px}

/* who sees what */
.cs-altro .who{display:grid;grid-template-columns:4fr 8fr;gap:56px;padding-top:88px;align-items:start}
.cs-altro .whohead p:last-child{font-size:17px}
.cs-altro .mwrap{border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:0 12px 34px rgba(19,54,96,.08)}
.cs-altro .matrix{width:100%;border-collapse:collapse;font-size:16px}
.cs-altro .matrix th,.cs-altro .matrix td{padding:16px 14px;border-bottom:1px solid var(--line);text-align:center}
.cs-altro .matrix thead th{background:var(--navy);color:#fff;font-weight:600;font-size:15px;line-height:1.25}
.cs-altro .matrix thead th:first-child{text-align:left;color:var(--gold-l)}
.cs-altro .matrix tbody th{text-align:left;font-weight:600;color:var(--navy);width:34%}
.cs-altro .matrix tbody tr:last-child>*{border-bottom:0}
.cs-altro .matrix tbody tr:nth-child(even){background:var(--ice-l)}
.cs-altro .matrix td.y span{display:inline-block;width:22px;height:22px;border-radius:50%;background:var(--gold);position:relative}
.cs-altro .matrix td.y span::after{content:"";position:absolute;left:7px;top:4px;width:6px;height:11px;border:solid #fff;
  border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.cs-altro .matrix td.n{color:#c3cad3;font-weight:700}

/* the pipeline: the one component used nowhere else */
.cs-altro .pipe{margin-top:96px;padding:72px 0 64px;background:linear-gradient(180deg,var(--ice-l),#fff)}
.cs-altro .pipehead{display:grid;grid-template-columns:5fr 6fr;gap:56px;align-items:end;margin-bottom:44px}
.cs-altro .pipehead p:last-child{margin:0;font-size:17px}
.cs-altro .track{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;position:relative}
.cs-altro .track::before{content:"";position:absolute;left:20px;right:20px;top:19px;height:3px;
  background:linear-gradient(90deg,#7a8794,#ba8748,#0a6b72,#7c3aed,#2563eb,#16a34a);border-radius:2px}
.cs-altro .stage{position:relative;display:flex;flex-direction:column;gap:10px}
.cs-altro .stop{width:40px;height:40px;border-radius:50%;background:#fff;border:3px solid var(--c);display:grid;place-items:center;
  position:relative;z-index:1;margin-bottom:8px}
.cs-altro .stop .n{font-weight:700;color:var(--c);font-size:17px}
.cs-altro .pill{display:inline-flex;align-items:center;gap:7px;align-self:flex-start;padding:5px 11px;border-radius:999px;
  font-size:14px;font-weight:600;line-height:1.2}
.cs-altro .pill i{width:7px;height:7px;border-radius:50%;flex:none}
.cs-altro .sh{min-height:84px;display:flex;flex-direction:column;gap:8px}
.cs-altro .rule{font-size:14px;color:var(--muted);font-weight:600}
.cs-altro .card{background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px 13px;font-size:15px;
  box-shadow:0 2px 6px rgba(19,54,96,.06)}
.cs-altro .card b{color:var(--ink);font-weight:600;display:block}
.cs-altro .card.stale{border-color:var(--gold);box-shadow:0 0 0 3px #f6f2ea}
.cs-altro .flag{display:block;margin-top:6px;font-size:13px;font-weight:700;color:#8a5f2c}

/* white label */
.cs-altro .label{grid-template-columns:6fr 5fr;align-items:center}
.cs-altro .sides{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.cs-altro .sides .note{grid-column:1/-1;margin:0}
.cs-altro .side{background:var(--navy);border-radius:14px;padding:16px 0 18px;color:#c9d3e2;font-size:15px;
  box-shadow:0 24px 60px rgba(19,54,96,.16)}
.cs-altro .side .logo{background:#fff;border-radius:10px;margin:0 14px;padding:14px 10px;text-align:center}
.cs-altro .side .logo b{display:block;color:var(--navy);font-size:19px;font-weight:700}
.cs-altro .side .logo span{display:block;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.cs-altro .side .pow{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;text-align:center;margin:10px 0 14px;color:#8fa0b8}
.cs-altro .side .pow em{color:var(--gold-l);text-transform:none;letter-spacing:0;font-size:13px}
.cs-altro .side .it{padding:9px 18px;border-left:3px solid transparent}
.cs-altro .side .it.on{background:rgba(255,255,255,.08);border-left-color:var(--gold);color:#fff;font-weight:600}
.cs-altro .chips{list-style:none;padding:0;margin:8px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cs-altro .chips li{background:var(--ice-l);border-left:3px solid var(--gold);padding:10px 14px;border-radius:6px;
  color:var(--navy);font-weight:600;font-size:16px}

/* around the pipeline: four, level, in one row */
.cs-altro .more{padding-top:96px}
.cs-altro .four{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:2px solid var(--gold)}
.cs-altro .four>div{padding:26px 24px 8px 0}
.cs-altro .four>div+div{padding-left:24px;border-left:1px solid var(--line)}
.cs-altro .four .num{display:block;font-size:34px;font-weight:700;color:var(--gold);line-height:1;margin-bottom:14px}
.cs-altro .four p{font-size:16px}

.cs-altro .end{padding-bottom:0}
.cs-altro .stack{font-size:14px;color:var(--muted);border-top:1px solid var(--line);padding-top:14px}
.cs-altro .next{display:flex;align-items:center;gap:20px;margin:72px 0 96px;padding:26px 32px;border-radius:999px;
  background:var(--ice-l);text-decoration:none;color:var(--navy);transition:background .15s}
.cs-altro .next:hover{background:var(--ice)}
.cs-altro .next span{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.cs-altro .next b{font-size:26px;font-weight:600;color:var(--blue)}
.cs-altro .next i{margin-left:auto;font-style:normal;font-size:28px;color:var(--gold)}

@media (max-width:980px){
  .cs-altro .open{padding:44px 0 56px}
  .cs-altro .tri{width:70%;height:40%}
  .cs-altro .open .grid,.cs-altro .split,.cs-altro .who,.cs-altro .pipehead,.cs-altro .label{grid-template-columns:1fr;gap:32px}
  .cs-altro .site{margin-right:-24px}
  .cs-altro .figs{grid-template-columns:repeat(3,1fr);gap:12px}
  .cs-altro .figs dt{font-size:30px}
  .cs-altro .split,.cs-altro .who,.cs-altro .more{padding-top:64px}
  .cs-altro .matrix{font-size:13px}
  .cs-altro .matrix th,.cs-altro .matrix td{padding:12px 5px}
  .cs-altro .matrix thead th{font-size:12px}
  .cs-altro .matrix tbody th{padding-left:12px}
  .cs-altro .matrix td.y span{width:18px;height:18px}
  .cs-altro .matrix td.y span::after{left:5.5px;top:3px;width:5px;height:9px;border-width:0 2px 2px 0}
  .cs-altro .pipe{margin-top:64px;padding:48px 0}
  .cs-altro .track{grid-template-columns:1fr;gap:22px;padding-left:56px}
  .cs-altro .track::before{left:19px;right:auto;top:10px;bottom:10px;width:3px;height:auto;
    background:linear-gradient(180deg,#7a8794,#ba8748,#0a6b72,#7c3aed,#2563eb,#16a34a)}
  .cs-altro .stop{position:absolute;left:-56px;top:0}
  .cs-altro .stage{min-height:40px}
  .cs-altro .sh{min-height:0}
  .cs-altro .sides{grid-template-columns:1fr 1fr;gap:10px}
  .cs-altro .side{font-size:13px}
  .cs-altro .side .it{padding:7px 10px}
  .cs-altro .side .logo b{font-size:15px}
  .cs-altro .side .logo span{letter-spacing:.06em;font-size:9.5px}
  .cs-altro .chips{grid-template-columns:1fr}
  .cs-altro .four{grid-template-columns:1fr}
  .cs-altro .four>div,.cs-altro .four>div+div{padding:22px 0 4px;border-left:0}
  .cs-altro .four>div+div{border-top:1px solid var(--line)}
  .cs-altro .next{border-radius:18px;padding:20px 22px;flex-wrap:wrap;gap:6px 14px;margin:56px 0 64px}
  .cs-altro .next b{font-size:22px}
}