/* ==========================================================================
   Services (services.html), after Stripe's Professional services page.
   Stripe's structure, kept: a hero with line art beside the copy and a diagonal
   colour band under it; alternating white and light sections with angled edges
   (a skewed layer behind, so no clip-path); dashed guide lines on a four-column
   grid; a small icon + ruled title + text for every item; a closing band with two
   side links. Case studies become a labelled sample engagement and partners become
   Store templates, because Manelink has neither customers nor partners to show yet.
   ========================================================================== */
.sv{position:relative;overflow:hidden;padding:112px 0}
.sv-in{position:relative;z-index:1;max-width:1128px;margin:0 auto;padding:0 24px}
.sv-guides{position:absolute;top:0;bottom:0;left:24px;right:24px;pointer-events:none;z-index:0}
.sv-guides i{position:absolute;top:0;bottom:0;width:1px;
  background-image:linear-gradient(180deg,rgba(66,71,112,.09) 50%,transparent 50%);background-size:1px 8px}
.sv-guides i:nth-child(1){left:0}
.sv-guides i:nth-child(2){left:25%}
.sv-guides i:nth-child(3){left:50%}
.sv-guides i:nth-child(4){left:75%}
.sv-guides i:nth-child(5){right:0}

/* light sections: a straight grey layer behind, the full height of the section */
.sv-light:before{content:"";position:absolute;left:0;right:0;top:0;bottom:0;background:#fafafa;z-index:0}

/* ---- type ------------------------------------------------------------------- */
.sv-eye{display:block;margin:0 0 12px;font:600 15px/24px var(--ui);color:var(--btn)}
.sv h2{margin:0;font:500 40px/1.18 var(--display);letter-spacing:-.02em;color:var(--navy);max-width:640px}
.sv-lead{margin:16px 0 0;max-width:620px;font:400 18px/28px var(--ui);color:var(--mute)}
.sv-h3{margin:0;font:600 26px/1.3 var(--display);letter-spacing:-.01em;color:var(--navy)}

/* an item: icon, ruled title, text */
.sv-item{display:flex;flex-direction:column;gap:10px}
.sv-ico{display:grid;place-items:center;width:40px;height:40px;border-radius:6px;background:var(--sky);margin-bottom:6px}
.sv-ico img{width:22px;height:22px}
.sv-item h3{position:relative;margin:0;padding-left:16px;font:600 15px/24px var(--ui);color:var(--navy)}
.sv-item h3:before{content:"";position:absolute;left:0;top:5px;width:1px;height:15px;background:var(--blue)}
.sv-item p{margin:0;padding-left:16px;font:400 15px/1.6 var(--ui);color:var(--mute)}

.sv-list{margin:14px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.sv-list li{position:relative;padding-left:28px;font:400 15px/1.5 var(--ui);color:var(--ink)}
.sv-list li:before{content:"";position:absolute;left:0;top:2px;width:18px;height:18px;border-radius:50%;background:var(--sky) url(../assets/icons/gt-check.svg) center/12px no-repeat}
.sv-listh{margin:24px 0 0;font:600 15px var(--ui);color:var(--navy)}

.sv-more{display:inline-flex;align-items:center;gap:6px;font:600 15px var(--ui);color:var(--btn);text-decoration:none}
.sv-more:after{content:"";width:6px;height:6px;border:solid currentColor;border-width:1.5px 1.5px 0 0;transform:rotate(45deg)}
.sv-more:hover{color:var(--navy)}
.sv-btn{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 16px;border-radius:6px;background:var(--btn);color:#fff;font:600 15px var(--ui);text-decoration:none}
.sv-btn:after{content:"";width:6px;height:6px;border:solid currentColor;border-width:1.5px 1.5px 0 0;transform:rotate(45deg)}
.sv-btn:hover{background:var(--btn-h)}

/* ---- hero -------------------------------------------------------------------- */
.sv-hero{padding:88px 0 112px}
.sv-hero .sv-in{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.sv-hero h1{margin:0;font:500 56px/1.1 var(--display);letter-spacing:-.03em;color:var(--navy)}
.sv-hero .sv-lead{margin:24px 0 28px}
.sv-hero .draft{margin-top:28px}
/* line art: a board of rails with seats on it */
.sv-art{position:relative;height:460px}
.sv-art i{position:absolute;display:block}
.sv-rail{background:#d9e0ea}
.sv-h{height:1px}
.sv-v{width:1px}
.sv-box{border:1px solid #d9e0ea;border-radius:6px;background:rgba(255,255,255,.7)}
.sv-dia{width:26px;height:26px;border:1px solid #cdd5e0;transform:rotate(45deg);background:#fff}
.sv-arc{border:1px solid #d9e0ea;border-radius:50%}
.sv-seat{width:46px;height:46px;border-radius:50%;background-size:cover;background-position:center;box-shadow:0 0 0 4px #fff,0 8px 20px rgba(10,37,64,.18)}
.sv-chip{padding:6px 10px;border-radius:6px;background:#fff;box-shadow:0 6px 16px rgba(10,37,64,.12);font:600 12px var(--ui);color:var(--navy);white-space:nowrap}
.sv-chip b{color:var(--btn);font-weight:600}

/* ---- roles ------------------------------------------------------------------- */
.sv-roles{display:grid;grid-template-columns:1fr 1fr;gap:56px 64px;margin-top:64px;max-width:900px}

/* ---- setup: four benefits, then text + visual --------------------------------- */
.sv-four{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;margin:56px 0 96px}
.sv-split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.sv-split .sv-lead{font-size:17px}
.sv-lead+.sv-split{margin-top:56px}
.sv-item .sv-more{margin:4px 0 0 16px}

/* visual card: a setup checklist */
.sv-card{position:relative;padding:28px;border-radius:8px;background:#fff;box-shadow:0 30px 60px -12px rgba(2,37,79,.25),0 18px 36px -18px rgba(0,0,0,.3)}
.sv-card small{display:block;font:600 11px var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--t4);margin-bottom:14px}
.sv-steps{display:flex;flex-direction:column;gap:10px}
.sv-steps span{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:6px;background:#f6f9fc;font:500 14.5px var(--ui);color:var(--ink)}
.sv-steps span b{margin-left:auto;font:600 12px var(--ui);color:var(--t4)}
.sv-steps img{flex:0 0 auto;width:18px;height:18px}
.sv-steps .sv-now{background:var(--sky);color:var(--blue);font-weight:600}
.sv-tag{position:absolute;right:18px;top:18px;font:600 11px var(--ui);letter-spacing:.08em;text-transform:uppercase;color:#98a3b3}

/* ring visual */
.sv-ring{position:relative;display:grid;place-items:center;width:320px;height:320px;margin:0 auto;background:url(../assets/art/sv-ring.svg) center/contain no-repeat}
.sv-ring span{max-width:130px;text-align:center;font:600 15px/1.35 var(--ui);color:var(--navy)}
.sv-ring em{display:block;font:500 13px var(--ui);font-style:normal;color:var(--t4);margin-top:4px}

.sv-three{display:flex;flex-direction:column;gap:28px;margin-top:40px}

/* ---- sample engagement (Stripe's case study layout) --------------------------- */
.sv-case{display:grid;grid-template-columns:1fr 1fr;gap:28px 64px;margin-top:8px}
.sv-case .sv-h3{font-size:34px;line-height:1.2}
.sv-case>p{margin:0;font:400 17px/1.6 var(--ui);color:var(--mute);align-self:end}
.sv-cols{display:flex;flex-direction:column;gap:28px}
.sv-proof{border-radius:8px;padding:28px;color:#fff;background:linear-gradient(150deg,#1a3190 0,#2946b6 55%,#3a57c4 100%);box-shadow:0 30px 60px -12px rgba(2,37,79,.25)}
.sv-proof small{display:block;font:600 11px var(--ui);letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.75);margin-bottom:12px}
.sv-proof h4{margin:0 0 14px;font:600 20px/1.35 var(--display);color:#fff}
.sv-seats{display:flex;flex-direction:column;gap:10px}
.sv-seats>span{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:6px;background:rgba(255,255,255,.12);font:500 14px/1.4 var(--ui)}
.sv-seats i{flex:0 0 auto;width:34px;height:34px;border-radius:50%;background-size:cover;background-position:center;box-shadow:0 0 0 2px rgba(255,255,255,.8)}
.sv-seats b{display:block;font-weight:600}
.sv-pills{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.sv-pills span{padding:4px 10px;border-radius:6px;background:rgba(255,255,255,.16);font:600 12px var(--ui)}

/* ---- templates (Stripe's partners) --------------------------------------------- */
.sv-tpl{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.sv-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:20px;margin-top:24px}
.sv-dots{position:relative;height:340px}
.sv-dots span{position:absolute;display:grid;place-items:center;border-radius:50%;background:#fff;box-shadow:0 12px 28px rgba(10,37,64,.16);font:600 13px var(--ui);color:var(--navy);text-align:center;line-height:1.2;padding:8px}
.sv-dots .sv-d1{left:8%;top:14%;width:92px;height:92px;background:#fef3e2}
.sv-d2{left:42%;top:0;width:78px;height:78px}
.sv-dots .sv-d3{left:72%;top:18%;width:104px;height:104px;background:var(--sky)}
.sv-d4{left:22%;top:56%;width:84px;height:84px}
.sv-dots .sv-d5{left:56%;top:52%;width:96px;height:96px;background:#e6f6ee}
.sv-d6{left:84%;top:66%;width:66px;height:66px}
/* the four workspace kinds in the logo's four colours, as the site does colour: a
   clear tint, a ring and a label in the colour, the same soft shadow as the cards;
   seats and routines stay white. Every circle is sized so its label sits inside
   with room to spare (the longest, Organization, is about 84px at 13px). */
.sv-dots span{border:1.5px solid var(--line);box-shadow:0 12px 28px -10px rgba(2,37,79,.18);padding:10px;overflow:hidden}
.sv-dots .sv-d1{width:112px;height:112px;background:#fdf0dc;border-color:#f0c27e;color:#9a5a0c}
.sv-dots .sv-d3{width:108px;height:108px;background:#e7ebf9;border-color:#adb8e5;color:var(--blue-d)}
.sv-dots .sv-d5{width:108px;height:108px;background:#e3f5ec;border-color:#9fd6bb;color:#1c7f5d}
.sv-dots .sv-d4{width:96px;height:96px;background:#fdebf2;border-color:#f0b3cb;color:#b83a6c}
.sv-dots .sv-d2{width:84px;height:84px;background:#fff}
.sv-dots .sv-d6{width:88px;height:88px;background:#fff;left:min(84%,calc(100% - 92px))}

/* ---- closing ----------------------------------------------------------------- */
.sv-end{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px;align-items:start}
.sv-end h2{font-size:30px}
.sv-end .sv-lead{margin-bottom:24px}

@media (max-width:991px){
  .sv{padding:88px 0}
  .sv-hero{padding:56px 0 88px}
  .sv-hero .sv-in{grid-template-columns:1fr}
  .sv-hero h1{font-size:46px}
  .sv-art{height:360px;max-width:560px}
  .sv-four{grid-template-columns:1fr 1fr;margin-bottom:72px}
  .sv-split,.sv-tpl,.sv-case{grid-template-columns:1fr;gap:40px}
  .sv-end{grid-template-columns:1fr 1fr}
  .sv-end>div:first-child{grid-column:1/3}
  .sv h2{font-size:34px}
}
@media (max-width:767px){
  .sv-guides i:nth-child(2),.sv-guides i:nth-child(4){display:none}
  .sv-hero h1{font-size:38px}
  .sv-roles{grid-template-columns:1fr;gap:36px;margin-top:44px}
  .sv-lead{font-size:17px;line-height:26px}
  .sv-case .sv-h3{font-size:28px}
}
@media (max-width:479px){
  .sv{padding:72px 0}
  .sv-hero{padding:48px 0 72px}
  .sv-in{padding:0 16px}
  .sv-guides{left:16px;right:16px}
  .sv-hero h1{font-size:32px}
  .sv h2{font-size:28px}
  .sv-art{height:280px}
  .sv-four{grid-template-columns:1fr;gap:28px}
  .sv-ring{width:260px;height:260px}
  .sv-card,.sv-proof{padding:20px}
  .sv-end{grid-template-columns:1fr}
  .sv-end>div:first-child{grid-column:1}
  .sv-dots{height:280px}
  .sv-art .sv-a1{width:150px;height:150px;left:26%}
  .sv-art .sv-a2,.sv-art .sv-b2,.sv-art .sv-c2{display:none}
  .sv-dots span{font-size:11px;padding:8px}
  .sv-dots .sv-d1{width:92px;height:92px;left:0}
  .sv-dots .sv-d2{width:70px;height:70px}
  .sv-dots .sv-d3{width:84px;height:84px;left:64%}
  .sv-dots .sv-d4{width:76px;height:76px}
  .sv-dots .sv-d5{width:88px;height:88px;left:46%}
  .sv-dots .sv-d6{width:72px;height:72px;left:min(74%,calc(100% - 76px))}
}

/* hero line art: positions */
.sv-r1{left:6%;top:18%;width:88%}
.sv-r2{left:10%;top:52%;width:80%}
.sv-r3{left:4%;top:84%;width:70%}
.sv-r4{left:24%;top:6%;height:80%}
.sv-r5{left:58%;top:0%;height:92%}
.sv-r6{left:86%;top:14%;height:72%}
.sv-a1{left:30%;top:22%;width:200px;height:200px}
.sv-a2{left:64%;top:58%;width:120px;height:120px}
.sv-b1{left:6%;top:30%;width:120px;height:64px}
.sv-b2{left:66%;top:6%;width:132px;height:58px}
.sv-b3{left:36%;top:70%;width:140px;height:60px}
.sv-q1{left:48%;top:46%}
.sv-q2{left:84%;top:40%}
.sv-q3{left:14%;top:76%}
.sv-s1{left:20%;top:14%}
.sv-s2{left:54%;top:30%}
.sv-s3{left:82%;top:10%}
.sv-s4{left:26%;top:60%}
.sv-s5{left:74%;top:74%}
.sv-c1{left:4%;top:44%}
.sv-c2{left:60%;top:48%}

/* a caption under an illustration, in place of a SAMPLE badge */
.sv-cap{margin:12px 0 0;text-align:center;font-size:12.5px;color:var(--t4)}

/* template bubbles in the site palette: the four workspace kinds in royal blue, from the
   deep royal of the buttons to the pale periwinkle wash; Seats and Routines are white
   with a slim glass ring, as the journey card's dots */
.sv-dots span{border:0;box-shadow:0 18px 36px -18px rgba(30,57,163,.35)}
.sv-dots .sv-d1{background:linear-gradient(150deg,#2946b6,#1e39a3);color:#fff}
.sv-dots .sv-d3{background:linear-gradient(150deg,#6f86e0,#4a68d2);color:#fff}
.sv-dots .sv-d5{background:#d3dcf7;color:var(--btn)}
.sv-dots .sv-d4{background:#e4ecfb;color:var(--btn)}
.sv-dots .sv-d2,.sv-dots .sv-d6{background:#fff;color:var(--navy);box-shadow:0 0 0 4px rgba(41,70,182,.08),0 0 0 5px rgba(41,70,182,.14),0 14px 28px -16px rgba(30,57,163,.3)}