.svc-hero{min-height:100svh;align-items:flex-end}
.svc-hero .phero__body{padding-block:calc(150px * var(--s)) calc(90px * var(--s));width:min(calc(100% - var(--edge) * 2),var(--field))}
.svc-hero__grid{display:grid;grid-template-columns:1fr auto;gap:var(--gut);align-items:end}
.svc-hero h1{color:#fff;max-width:calc(920px * var(--s))}
.svc-hero .t-read{color:rgba(255,255,255,.78);max-width:calc(560px * var(--s))}
.svc-ring{position:relative;color:#fff;width:calc(300px * var(--s));height:calc(300px * var(--s));flex:none}
.svc-ring .ring{width:100%;height:100%;display:block}
.svc-ring .ring text{font-size:12.5px;letter-spacing:2.4px}
.svc-ring__c{position:absolute;inset:0;display:grid;place-items:center}
.svc-ring__c a{width:calc(64px * var(--s));height:calc(64px * var(--s));border:1px solid rgba(255,255,255,.55);border-radius:50%;display:grid;place-items:center;color:#fff;transition:background .6s var(--ease),color .6s var(--ease),border-color .6s var(--ease)}
.svc-ring__c a:hover{background:#fff;color:var(--c-ink);border-color:#fff}
.svc-ring__c svg{width:calc(14px * var(--s));height:calc(14px * var(--s));stroke:currentColor;fill:none;stroke-width:1.5}

.svc-acc{border-top:1px solid var(--t-head)}
.svc-takeover{border-top:1px solid var(--t-line);padding-top:calc(40px * var(--s))}
.acc__tag{display:block;font-size:var(--fs-ui);line-height:var(--lh-ui);letter-spacing:var(--tr-ui);color:var(--t-text);margin-top:calc(6px * var(--s));font-weight:500;text-transform:none}
.svc-acc .acc__body{padding-top:calc(8px * var(--s));padding-bottom:calc(48px * var(--s))}
.svc-acc .acc__body .media img{transition:transform 1.4s var(--ease)}
.svc-acc .acc__row.is-open .acc__body .media img{transform:scale(1)}
.svc-acc .acc__row.is-open .acc__btn .idx__t{color:var(--t-head)}
.svc-acc .acc__btn .idx__t{transition:transform .6s var(--ease)}
.svc-acc .acc__btn:hover .idx__t{transform:translateX(10px)}

.svc-diagram{display:grid;grid-template-columns:1fr 1fr;gap:calc(60px * var(--s)) var(--gut);align-items:center}
.svc-diagram__fig{margin:0}
.svc-diagram svg{width:100%;height:auto;display:block;overflow:visible}
.svc-diagram .draw path{stroke:rgba(255,255,255,.35)}
.svc-diagram .draw path.accent{stroke:var(--c-accent);stroke-width:1.5}
.svc-diagram .node{fill:var(--c-ink);stroke:rgba(255,255,255,.7)}
.svc-diagram .node--main{fill:var(--c-ink);stroke:#fff;stroke-width:1.5}
.svc-diagram .node--you{fill:var(--c-accent);stroke:var(--c-accent)}
.svc-diagram .lbl{font-family:"Hanken Grotesk",sans-serif;font-size:13px;fill:rgba(255,255,255,.7);letter-spacing:.6px;text-transform:uppercase;font-weight:500}
.svc-diagram .lbl--main{fill:#fff;font-size:14px;letter-spacing:3px}
.svc-diagram .lbl--you{fill:#fff}
.svc-diagram .node,.svc-diagram .lbl{opacity:0;transition:opacity .9s var(--ease) .6s}
.svc-diagram .draw.is-drawn .node,.svc-diagram .draw.is-drawn .lbl{opacity:1}
.svc-diagram .draw.is-drawn .node--you,.svc-diagram .draw.is-drawn .lbl--you{transition-delay:1.6s}
.svc-diagram__body{max-width:calc(690px * var(--s))}

#earns .deck__card{min-height:calc(480px * var(--s))}
#earns .deck__body{justify-content:center}

#takeover .marquee{border-top:0}

@media (max-width:980px){
  .svc-hero{min-height:0}
  .svc-hero__grid{grid-template-columns:1fr}
  .svc-ring{width:calc(220px * var(--s));height:calc(220px * var(--s));margin-left:auto}
  .svc-diagram{grid-template-columns:1fr}
  .svc-diagram__fig{order:2}
}
@media (max-width:640px){
  .svc-ring{display:none}
}