/* Services page (patterns/dich-vu-*.php). Loaded only on pages with a block of class "sv" (functions.php).
   Scroll-driven parts (index track, step numbers) are CSS view timelines: browsers without them show the plain state. */
.sv{--sv-index:232px;--sv-top:calc(var(--nav-h) + var(--s-5));--sv-mock-h:290px;padding-inline:var(--s-4)}
.sv__page{max-width:var(--page);margin-inline:auto}
.sv__page > *{margin:0}

/* heading */
.sv-head{padding-top:var(--s-6)}
.sv-head .sv__page{display:grid;gap:var(--gap-text)}
.sv-head__title{max-width:var(--measure);font-size:var(--t-2xl);font-weight:800;letter-spacing:-0.03em;line-height:1.08}
.sv-head__title strong{font-weight:inherit;color:var(--accent)}
.sv-head__lede{max-width:var(--measure);font-size:var(--t-l);color:var(--ink-2)}

/* picker card */
.sv-pick{padding-top:var(--gap-head)}
.sv-pick__card{display:grid;gap:var(--gap-stack);padding:var(--gap-card);border:1px solid var(--rule);border-radius:var(--r-card);background:var(--paper-2)}
.sv-pick__h{font-size:var(--t-xl);font-weight:700;letter-spacing:-0.02em}

/* section heads shared by compare / industries / steps */
.sv-sechead{display:flex;justify-content:space-between;align-items:end;gap:var(--gap-grid);flex-wrap:wrap;margin-bottom:var(--gap-head)}
.sv-sechead > *{margin:0}
.sv-sechead__main{display:grid;gap:var(--s-2)}
.sv-sechead__main > *{margin:0}
.sv-sechead__h{font-size:var(--t-2xl);font-weight:800;letter-spacing:-0.03em;line-height:1.08;max-width:20ch}
.sv-sechead__p{color:var(--ink-2);max-width:42ch}

/* six services + sticky index */
.sv-main{padding-top:var(--gap-section)}
.sv-main__grid{display:grid;grid-template-columns:var(--sv-index) minmax(0,1fr);gap:var(--gap-col);align-items:start;timeline-scope:--sv-list}
.sv-index{position:sticky;top:var(--sv-top);display:grid;gap:var(--s-2)}
.sv-index > *{margin:0}
.sv-index .mono{font-size:var(--t-2xs)}
/* the kit's "On this page" style gives the script (aria-current); the look is ours, so the selectors outweigh .wp-block-list.is-style-toc */
.sv-index .sv-index__list.is-style-toc{position:relative;list-style:none;margin:0;padding:0 0 0 var(--s-4);border-inline-start:0;display:grid;gap:2px}
.sv-index__list::before,.sv-index__list::after{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;border-radius:1px;background:var(--rule)}
.sv-index__list::after{bottom:auto;height:0;background:var(--accent-fill);animation:sv-track linear both;animation-timeline:--sv-list;animation-range:cover 10% cover 90%}
@keyframes sv-track{from{height:0}to{height:100%}}
.sv-index__list li{margin:0;counter-increment:sv-idx}
.sv-index .sv-index__list.is-style-toc a{display:flex;border-inline-start:0;margin-inline-start:0;align-items:center;gap:var(--s-2);min-height:var(--ctl-s);padding:0 var(--s-2);border-radius:var(--r);color:var(--ink-2);text-decoration:none;font:500 var(--t-s)/1.2 var(--font-body);transition:color var(--dur) var(--ease-out),background-color var(--dur) var(--ease-out)}
.sv-index .sv-index__list.is-style-toc a::before{content:counter(sv-idx, decimal-leading-zero);font:500 var(--t-2xs)/1 var(--font-mono);color:var(--ink-3);min-width:2ch}
.sv-index .sv-index__list.is-style-toc a:hover{color:var(--ink);border-inline-start:0}
.sv-index .sv-index__list.is-style-toc a[aria-current]{color:var(--ink);background:var(--paper-2);font-weight:600;border-inline-start:0}
.sv-index .sv-index__list.is-style-toc a[aria-current]::before{color:var(--accent)}
.sv-main__list{display:grid;gap:var(--gap-section);view-timeline-name:--sv-list}
.sv-main__list > *{margin:0}
.sv-main .sv-sec{padding-inline:0}

/* one service */
.sv-sec{display:grid;gap:var(--gap-head);scroll-margin-top:var(--sv-top)}
.sv-sec > *{margin:0}
.sv-sec__head{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s-4);align-items:start}
.sv-sec__head > *{margin:0}
.sv-num{font:500 var(--t-s)/1 var(--font-mono);color:var(--accent);padding-top:var(--s-2)}
.sv-sec__title > *{margin:0}
.sv-sec__h{font-size:var(--t-2xl);font-weight:800;letter-spacing:-0.03em;line-height:1.08}
.sv-sec.is-pick .sv-sec__h{color:var(--accent)}
.sv-sec__tag{color:var(--ink-2);font-size:var(--t-l);margin-top:var(--s-2)}
.sv-sec__body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--gap-col);align-items:start}
.sv-sec__body > *{margin:0;min-width:0}
.sv-sec__text{display:grid;gap:var(--gap-stack)}
.sv-sec__text > *{margin:0}
.sv-sec__lede{color:var(--ink-2)}
.sv-h3{font:500 var(--t-s)/1.3 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.sv-ul{margin:0;padding:0;list-style:none;display:grid;gap:var(--s-2)}
.sv-ul li{margin:0;font-size:var(--t-s)}
.sv-ul--dot li{display:flex;gap:var(--s-3);align-items:flex-start}
.sv-ul--dot li::before{content:"";flex:none;width:calc(var(--s-2) - 2px);height:calc(var(--s-2) - 2px);margin-top:var(--s-2);border-radius:50%;background:var(--ink-3)}
.sv-meta{gap:var(--s-2)}
.sv-meta > *{margin:0}
.sv-meta__item{display:inline-flex;align-items:center;gap:var(--s-2);min-height:var(--s-6);padding:0 var(--s-3);border:1px solid var(--rule);border-radius:var(--r);font:500 var(--t-xs)/1 var(--font-mono);color:var(--ink-2)}
.sv-meta__item::before{content:"";width:var(--icon-s);height:var(--icon-s);background:currentColor;-webkit-mask:var(--sv-icon) center / contain no-repeat;mask:var(--sv-icon) center / contain no-repeat}
.sv-meta__item.ic-clock{--sv-icon:url(../../../icons/clock.svg)}
.sv-meta__item.ic-info{--sv-icon:url(../../../icons/info.svg)}
.sv-ctas{gap:var(--s-3);margin-top:var(--s-2)}
.sv-ctas .wp-block-button__link{min-height:var(--ctl-s);padding-inline:var(--s-4);font-size:var(--t-s)}
.sv-stage{position:relative;height:var(--sv-mock-h);display:flex;align-items:flex-start;justify-content:center;overflow:hidden;padding:var(--s-6) var(--s-6) 0;border:1px solid var(--rule);border-radius:var(--r-card);background:var(--paper-2)} /* window top visible, bottom cropped */

/* compare table */
.sv-cmp{padding-top:var(--gap-section)}
.sv-cmp .sv__page{display:grid;gap:var(--gap-head)}
.sv-cmp .sv-sechead{margin-bottom:0}
.sv-cmp__wrap{overflow-x:auto;overflow-y:hidden;border:1px solid var(--rule);border-radius:var(--r-card);background:var(--card);scrollbar-width:thin}
.sv-cmp__table{margin:0}
.sv-cmp__table table{border-collapse:separate;border-spacing:0;width:100%;min-width:760px;font-size:var(--t-s);border:0}
.sv-cmp__table th,.sv-cmp__table td{position:relative;padding:var(--s-3) var(--s-4);border:0;border-bottom:1px solid var(--rule);text-align:center;vertical-align:middle}
.sv-cmp__table th{font:600 var(--t-xs)/1.3 var(--font-body);color:var(--ink)}
.sv-cmp__table thead th{position:sticky;top:0;background:var(--paper-2);z-index:2}
.sv-cmp__table th:first-child,.sv-cmp__table td:first-child{text-align:left;position:sticky;left:0;background:var(--card);z-index:1;min-width:180px;color:var(--ink-2);font-weight:500}
.sv-cmp__table thead th:first-child{z-index:3;background:var(--paper-2)}
.sv-cmp__table tbody tr:last-child td{border-bottom:0}
/* crosshair without script: the row by :hover, the column by a tall pseudo-element the wrapper clips */
.sv-cmp__table tbody tr:hover td{background:var(--accent-tint)}
.sv-cmp__table tbody td:not(:first-child):hover::after{content:"";position:absolute;left:0;right:0;top:-100vh;bottom:-100vh;background:var(--accent-tint);z-index:-1;pointer-events:none}
.sv-cmp__table tbody td:not(:first-child){z-index:0}
.sv-cmp__legend{color:var(--ink-3);font-size:var(--t-xs)}

/* industries */
.sv-inds{padding-top:var(--gap-section)}
.sv-inds .sv-sechead{margin-bottom:var(--gap-head)}
.sv-inds__row{gap:var(--s-2)}
.sv-inds__row .wp-block-button__link{min-height:var(--ctl-s);padding-inline:var(--s-3);font-size:var(--t-s);font-weight:500}

/* five steps */
.sv-steps{padding-top:var(--gap-section)}
.sv-steps__row{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--gap-grid);view-timeline-name:--sv-steps}
.sv-steps__row > *{margin:0}
.sv-steps__row::before,.sv-steps__row::after{content:"";position:absolute;left:0;right:0;top:calc(var(--s-6) / 2 + var(--s-1));height:2px;border-radius:1px;background:var(--rule);z-index:0}
.sv-steps__row::after{right:auto;width:0;background:var(--accent-fill);animation:sv-steps-track linear both;animation-timeline:--sv-steps;animation-range:entry 30% entry 100%}
@keyframes sv-steps-track{from{width:0}to{width:100%}}
.sv-step{position:relative;z-index:1;display:grid;gap:var(--s-2);align-content:start}
.sv-step > *{margin:0}
.sv-step__n{width:calc(var(--s-6) + var(--s-2));height:calc(var(--s-6) + var(--s-2));border-radius:50%;border:2px solid var(--rule);background:var(--paper);display:grid;place-items:center;font:500 var(--t-xs)/1 var(--font-mono);color:var(--ink-2);animation:sv-step-lit steps(1, end) both;animation-timeline:--sv-steps;animation-range:entry var(--sv-lit-at) entry 100%}
.sv-step:nth-child(1) .sv-step__n{--sv-lit-at:37%}
.sv-step:nth-child(2) .sv-step__n{--sv-lit-at:51%}
.sv-step:nth-child(3) .sv-step__n{--sv-lit-at:65%}
.sv-step:nth-child(4) .sv-step__n{--sv-lit-at:79%}
.sv-step:nth-child(5) .sv-step__n{--sv-lit-at:93%}
@keyframes sv-step-lit{from{border-color:var(--rule);background:var(--paper);color:var(--ink-2)}to{border-color:var(--accent-fill);background:var(--accent-fill);color:var(--on-accent)}}
.sv-step .mono{font-size:var(--t-2xs)}
.sv-step__h{font:600 var(--t-m)/1.3 var(--font-display)}
.sv-step__p{color:var(--ink-2);font-size:var(--t-s)}
@supports not (animation-timeline: view()){
  .sv-step__n{border-color:var(--accent-fill);background:var(--accent-fill);color:var(--on-accent)}
  .sv-steps__row::after{width:100%}
  .sv-index__list::after{display:none}
}

@media (max-width: 1023px){
  .sv-main__grid{grid-template-columns:minmax(0,1fr)}
  .sv-index{position:static}
  .sv-index__list{display:flex;flex-wrap:wrap;gap:var(--s-2);padding-left:0}
  .sv-index__list::before,.sv-index__list::after{display:none}
  .sv-index .sv-index__list.is-style-toc a{border:1px solid var(--rule)}
  .sv-sec__body{grid-template-columns:minmax(0,1fr)}
  .sv-steps__row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sv-steps__row::before,.sv-steps__row::after{display:none}
}
@media (max-width: 767px){
  .sv-head{padding-top:var(--s-4)}
  .sv-pick__card{padding:var(--gap-card-s)}
}
@media (max-width: 479px){
  .sv-steps__row{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion: reduce){
  .sv-index__list::after,.sv-steps__row::after,.sv-step__n{animation:none}
  .sv-step__n{border-color:var(--accent-fill);background:var(--accent-fill);color:var(--on-accent)}
  .sv-steps__row::after{width:100%}
}