/* /work/optivo/ in Optivo's own look (optivo-site/assets/style.css): Poppins 600 headings,
   Manrope body, ink #132540, blue #1477c8, orange #ef8f22 and the orange-to-blue gradient,
   white and #f4f7fb grounds, 16px cards. Scoped under .cs-optivo. */
.cs-optivo{--ink:#132540;--body:#465a72;--mute:#74849a;--line:#e4eaf1;--line2:#d3dde8;--alt:#f4f7fb;
  --blue:#1477c8;--blue-d:#0d5aa0;--blue-s:#eaf3fb;--orange:#ef8f22;
  --grad:linear-gradient(120deg,#ef8f22 0%,#f0a93f 30%,#3aa0e0 72%,#1477c8 100%);
  --shadow:0 1px 2px rgba(16,40,70,.04),0 8px 24px -10px rgba(16,40,70,.14);
  --shadow-lg:0 30px 60px -24px rgba(16,40,70,.28);
  background:#fff;color:var(--body);font:400 17px/1.62 'Manrope',system-ui,sans-serif;overflow:hidden}
.cs-optivo *{box-sizing:border-box}
.cs-optivo h1,.cs-optivo h2,.cs-optivo h3{font-family:'Poppins',system-ui,sans-serif;font-weight:600;color:var(--ink);
  letter-spacing:-.02em;line-height:1.12;max-width:none;margin:0 0 .5em}
.cs-optivo h1{font-size:clamp(40px,5vw,62px);letter-spacing:-.03em}
.cs-optivo h2{font-size:clamp(28px,3.2vw,40px)}
.cs-optivo h3{font-size:18px;letter-spacing:-.01em}
.cs-optivo p{margin:0 0 1em}
.cs-optivo img{display:block;max-width:100%;height:auto}
.cs-optivo figure{margin:0}
.cs-optivo figcaption,.cs-optivo .note{font-size:13.5px;color:var(--mute);margin-top:12px}
.cs-optivo .w{max-width:1140px;margin:0 auto;padding:0 24px;position:relative}
.cs-optivo .eye{display:inline-flex;align-items:center;gap:9px;font-family:'Poppins',sans-serif;font-weight:600;font-size:12.5px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--blue);margin-bottom:16px}
.cs-optivo .eye::before{content:"";width:24px;height:2px;border-radius:2px;background:var(--grad)}
.cs-optivo .btn{display:inline-flex;align-items:center;font-family:'Poppins',sans-serif;font-weight:600;font-size:16px;
  padding:14px 28px;border-radius:10px;text-decoration:none;border:1.5px solid transparent;transition:.18s}
.cs-optivo .btn.pri{background:var(--blue);color:#fff;box-shadow:0 8px 20px -8px rgba(20,119,200,.6)}
.cs-optivo .btn.pri:hover{background:var(--blue-d)}
.cs-optivo .btn.ghost{background:#fff;border-color:var(--line2);color:var(--ink)}
.cs-optivo .btn.ghost:hover{border-color:var(--blue);color:var(--blue)}

/* opening: centred, as optivo.uk's own inner pages are */
.cs-optivo .open{text-align:center;padding:84px 0 56px;
  background:radial-gradient(520px 360px at 8% 0%,rgba(239,143,34,.10),transparent 70%),
             radial-gradient(560px 380px at 96% 10%,rgba(20,119,200,.09),transparent 70%)}
.cs-optivo .badge{display:inline-flex;align-items:center;gap:12px;border:1px solid var(--line2);border-radius:999px;
  padding:6px 16px 6px 6px;font-size:14px;color:var(--body);background:#fff;margin-bottom:26px}
.cs-optivo .badge span{background:var(--blue-s);color:var(--blue-d);font-weight:700;font-size:13px;border-radius:999px;padding:4px 12px}
.cs-optivo h1{max-width:15ch;margin-left:auto;margin-right:auto}
.cs-optivo h1 em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.cs-optivo .dek{font-size:19px;max-width:40em;margin:0 auto}
.cs-optivo .acts{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:30px}

/* the delivery rail: the one component used nowhere else */
.cs-optivo .rail{background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow-lg);padding:30px 32px 26px}
.cs-optivo .railhead{display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap;margin-bottom:26px}
.cs-optivo .railhead .eye{margin:0}
.cs-optivo .railhead .hint{font-size:14px;color:var(--mute)}
.cs-optivo .rail ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,1fr);gap:18px;position:relative}
.cs-optivo .rail ol::before{content:"";position:absolute;left:0;right:0;top:17px;height:4px;border-radius:4px;background:var(--grad)}
.cs-optivo .rail li{position:relative;display:flex;flex-direction:column}
.cs-optivo .rail .dot{width:38px;height:38px;border-radius:50%;background:#fff;border:3px solid var(--blue);color:var(--blue);
  font-family:'Poppins',sans-serif;font-weight:600;display:grid;place-items:center;position:relative;z-index:1;margin-bottom:16px}
.cs-optivo .rail li:nth-child(1) .dot,.cs-optivo .rail li:nth-child(2) .dot{border-color:var(--orange);color:#c46d0c}
.cs-optivo .rail li:nth-child(3) .dot{border-color:#9aa77a;color:#6c7a4a}
.cs-optivo .rail li:nth-child(4) .dot{border-color:#3aa0e0;color:#1d7fbf}
.cs-optivo .rail h3{margin-bottom:4px}
.cs-optivo .rail p{font-size:14.5px;line-height:1.45;min-height:2.9em;margin-bottom:14px}
.cs-optivo .docs{display:flex;flex-direction:column;gap:8px}
.cs-optivo .doc{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:600;color:var(--ink);
  border:1px solid var(--line);border-radius:9px;padding:7px 9px;background:var(--alt)}
.cs-optivo .doc i{font-style:normal;width:22px;height:26px;border-radius:4px;display:grid;place-items:center;color:#fff;
  font-family:'Poppins',sans-serif;font-size:12px;flex:none}
.cs-optivo .doc.word i{background:#2b5797}
.cs-optivo .doc.excel i{background:#1f7a46}
.cs-optivo .none{font-size:13.5px;color:var(--mute);border:1px dashed var(--line2);border-radius:9px;padding:9px 10px}

/* the hub: illustration running off the left edge */
.cs-optivo .hub{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:56px;align-items:center;
  max-width:1140px;margin:104px auto 0;padding:0 24px}
.cs-optivo .hub .hubshot{margin-left:calc(-1 * max(24px, (100vw - 1140px) / 2 + 24px))}
.cs-optivo .hub .hubshot img{border-radius:0 16px 16px 0;border:1px solid var(--line);border-left:0;box-shadow:var(--shadow-lg)}
.cs-optivo .hub .hubshot figcaption{padding-left:max(24px, (100vw - 1140px) / 2 + 24px)}
.cs-optivo .hub .txt p{font-size:17.5px}

/* scorecard */
.cs-optivo .score{display:grid;grid-template-columns:5fr 6fr;gap:64px;align-items:center;margin-top:112px}
.cs-optivo .card img{border-radius:16px;border:1px solid var(--line);box-shadow:var(--shadow-lg)}
.cs-optivo .arrow{font-family:'Poppins',sans-serif;font-weight:600;color:var(--blue);text-decoration:none}

/* prices on the light blue-grey ground */
.cs-optivo .alt{background:var(--alt);margin-top:112px;padding:88px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.cs-optivo .prices{display:grid;grid-template-columns:6fr 5fr;gap:56px;align-items:start}
.cs-optivo .home img{border-radius:16px;box-shadow:var(--shadow-lg)}
.cs-optivo .price{position:relative;background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px 22px 6px;
  margin-top:14px;box-shadow:var(--shadow);display:grid;grid-template-columns:1fr auto;gap:2px 16px}
.cs-optivo .price.lead{border:1.5px solid var(--blue);margin-top:26px}
.cs-optivo .price .tag{position:absolute;top:-12px;left:20px;background:var(--grad);color:#fff;font-size:12px;font-weight:700;
  padding:3px 12px;border-radius:999px}
.cs-optivo .pn b{display:block;font-family:'Poppins',sans-serif;font-weight:600;color:var(--ink);font-size:18px}
.cs-optivo .pn span,.cs-optivo .pv span{font-size:13.5px;color:var(--mute)}
.cs-optivo .pv{text-align:right}
.cs-optivo .pv b{display:block;font-family:'Poppins',sans-serif;font-weight:600;color:var(--ink);font-size:24px;line-height:1.1}
.cs-optivo .price p{grid-column:1/-1;font-size:14.5px;margin:10px 0 12px;padding-top:10px;border-top:1px solid var(--line)}

/* decisions: two to a row */
.cs-optivo .decs{margin-top:104px}
.cs-optivo .dhead{text-align:center;margin-bottom:40px}
.cs-optivo .dgrid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.cs-optivo .dec{border:1px solid var(--line);border-radius:16px;padding:28px 30px 12px;box-shadow:var(--shadow);background:#fff}
.cs-optivo .dn{display:block;font-family:'Poppins',sans-serif;font-weight:600;font-size:30px;line-height:1;margin-bottom:14px;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.cs-optivo .dec p{font-size:16px}

.cs-optivo .outcome{display:grid;grid-template-columns:7fr 5fr;gap:48px;align-items:center;margin-top:96px;margin-bottom:104px}
.cs-optivo .ob p{font-size:18px}
.cs-optivo .stack{font-size:14px !important;color:var(--mute)}
.cs-optivo .next{display:flex;flex-direction:column;gap:6px;background:var(--blue);color:#fff;text-decoration:none;border-radius:16px;
  padding:26px 30px;box-shadow:0 18px 40px -16px rgba(20,119,200,.7);transition:.18s;position:relative}
.cs-optivo .next:hover{background:var(--blue-d)}
.cs-optivo .next span{font-size:12.5px;letter-spacing:.13em;text-transform:uppercase;font-weight:700;opacity:.8}
.cs-optivo .next b{font-family:'Poppins',sans-serif;font-weight:600;font-size:26px}
.cs-optivo .next i{position:absolute;right:28px;top:50%;transform:translateY(-50%);font-style:normal;font-size:28px}

@media (max-width:980px){
  .cs-optivo .open{padding:52px 0 36px}
  .cs-optivo .badge{font-size:12.5px;text-align:left}
  .cs-optivo .dek{font-size:17px}
  .cs-optivo .rail{padding:22px 18px}
  .cs-optivo .rail ol{grid-template-columns:1fr;gap:18px;padding-left:54px}
  .cs-optivo .rail ol::before{left:17px;right:auto;top:8px;bottom:8px;width:4px;height:auto;
    background:linear-gradient(180deg,#ef8f22,#f0a93f 30%,#3aa0e0 72%,#1477c8)}
  .cs-optivo .rail .dot{position:absolute;left:-54px;top:-4px}
  .cs-optivo .rail p{min-height:0;margin-bottom:10px}
  .cs-optivo .docs{flex-direction:row;flex-wrap:wrap}
  .cs-optivo .hub,.cs-optivo .score,.cs-optivo .prices,.cs-optivo .outcome{grid-template-columns:1fr;gap:28px}
  .cs-optivo .hub{margin-top:64px}
  .cs-optivo .hub .hubshot{margin-left:-24px}
  .cs-optivo .hub .hubshot figcaption{padding-left:24px}
  .cs-optivo .score{margin-top:64px}
  .cs-optivo .alt{margin-top:64px;padding:56px 0}
  .cs-optivo .dgrid{grid-template-columns:1fr}
  .cs-optivo .decs{margin-top:64px}
  .cs-optivo .dhead{text-align:left}
  .cs-optivo .outcome{margin:64px auto 72px}
  .cs-optivo .next b{font-size:22px}
}