/* Static SEO pages (services, journal, products, hubs). Uses the tokens from site.css. */
body.sp{padding-top:calc(58px + env(safe-area-inset-top,0px))}
.sp-bar{position:fixed;left:0;right:0;top:0;z-index:40;background:#000;border-bottom:1px solid var(--line);padding-top:env(safe-area-inset-top,0px)}
.sp-bar-in{display:flex;align-items:center;gap:22px;height:58px}
.sp-nav{display:flex;gap:20px;margin-left:auto}
.sp-nav a{text-decoration:none;color:var(--mute2)}
.sp-nav a:hover{color:var(--hi)}
.sp-langs{display:flex;gap:2px}
.sp-langs a{padding:6px;text-decoration:none;color:var(--mute);letter-spacing:.06em}
.sp-langs a[aria-current]{color:var(--fg)}
.sp-langs a:hover{color:var(--hi)}
.sp-bar .btn{min-height:38px;padding:0 18px;font-size:12px}
@media (max-width:1000px){.sp-nav{display:none}.sp-langs{margin-left:auto}}
@media (max-width:420px){.sp-bar-in{gap:10px}.sp-bar .btn{padding:0 14px}}

.sp-main{min-height:60vh}
.sp-crumbs{padding:22px var(--gx) 0;max-width:1600px;margin:0 auto}
.sp-crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.sp-crumbs li+li::before{content:"/";margin-right:6px;color:var(--ring)}
.sp-crumbs a{text-decoration:none;color:var(--mute)}
.sp-crumbs a:hover{color:var(--hi)}

/* service + product */
.sp-svc,.sp-prod{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,64px);padding-block:32px clamp(64px,8vw,120px);align-items:start}
.sp-svc-ph .ph{aspect-ratio:4/5}
.sp-prod .sp-svc-ph .ph{aspect-ratio:4/5;background:#ECE9E3}
.sp-prod .sp-svc-ph .ph img{object-fit:contain;padding:8%}
.sp-svc-ph .noimg{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:#000;text-align:center}
.sp-svc-ph .noimg .d{font-size:40px}
@media (min-width:861px){.sp-svc-ph{position:sticky;top:84px}}
.sp-svc-t{display:flex;flex-direction:column;gap:20px;max-width:760px}
.sp-svc-t > .cap a{color:inherit}
.sp-svc-t h1{margin:0;font-size:clamp(52px,7vw,104px);line-height:.88;letter-spacing:-.01em;text-wrap:balance}
.sp-svc-t .lead{margin:0;font-size:clamp(22px,2vw,28px);line-height:1.3;color:var(--mute2)}
.sp-txt p{margin:0 0 14px;font-size:17px;line-height:1.7;color:#DCD8CF}
.sp-card{background:var(--paper);color:var(--ink);padding:24px 24px 26px;display:flex;flex-direction:column;gap:12px}
.sp-card h2{margin:0;color:var(--pmute)}
.sp-card .who-l{margin:0;color:var(--pmute)}
.sp-card .acts,.sp-hub .acts,.sp-svc-t .acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.sp-price{margin:0;font-size:40px;line-height:1}
.sp-pbody{padding-top:8px;max-width:none;margin:0}
.sp-pbody ul{border-top:1px solid var(--line)}
.sp-pbody li{padding:12px 0;border-bottom:1px solid var(--line)}

.sp-faq{margin-top:12px}
.sp-faq h2{margin:0 0 10px;font-size:clamp(30px,3vw,40px);line-height:1.04}
.sp-faq details{border-top:1px solid var(--line);padding:4px 0}
.sp-faq details:last-child{border-bottom:1px solid var(--line)}
.sp-faq summary{cursor:pointer;list-style:none;padding:14px 32px 14px 0;font-size:17px;font-weight:600;position:relative}
.sp-faq summary::-webkit-details-marker{display:none}
.sp-faq summary::after{content:"+";position:absolute;right:4px;top:12px;font-weight:400;font-size:20px;color:var(--mute)}
.sp-faq details[open] summary::after{content:"–"}
.sp-faq details p{margin:0 0 16px;font-size:16px;line-height:1.65;color:#DCD8CF}
.rd-body .sp-faq{margin-top:44px}

.sp-rel{display:flex;flex-direction:column;gap:4px;padding:18px 0 0;border-top:1px solid var(--line);text-decoration:none}
.sp-rel .d{font-size:clamp(26px,2.4vw,34px);line-height:1.05}
.sp-rel:hover .d{color:var(--hi);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}
.sp-others{border-top:1px solid var(--line);padding-top:18px}
.sp-others h2{margin:0 0 10px}
.sp-others ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 18px}
.sp-others a{color:var(--mute2);text-decoration:none}
.sp-others a:hover{color:var(--hi);text-decoration:underline}

/* articles: reuse the reader layout */
.sp-art{padding-bottom:40px}
.sp-art .rd-next a{display:flex;flex-direction:column;gap:6px;text-decoration:none}
.sp-art .rd-next a:hover .d{color:var(--hi);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}

/* hubs */
.sp-hub{padding-block:32px clamp(64px,8vw,120px);display:flex;flex-direction:column;gap:18px}
.sp-hub h1{margin:0;font-size:clamp(56px,8vw,124px);line-height:.86}
.sp-hub .lead{margin:0 0 18px;font-size:clamp(20px,1.8vw,26px);line-height:1.35;color:var(--mute2);max-width:860px}
.sp-hub > h2.cap{margin:22px 0 0}
.sp-hub > h2.d{margin:40px 0 0;font-size:clamp(34px,3.4vw,52px);line-height:1;scroll-margin-top:80px}
.sp-hub > p.mu2{margin:0;max-width:760px}
.sp-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.sp-list a{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:16px 0;border-bottom:1px solid var(--line);text-decoration:none}
.sp-list .d{font-size:clamp(26px,2.6vw,38px);line-height:1.05}
.sp-list small{white-space:nowrap}
.sp-list a:hover .d{color:var(--hi)}
.sp-jlist{max-width:980px}
.sp-jlist .jitem{text-decoration:none}
.sp-jlist .jitem h2{margin:4px 0 6px;font-size:27px;line-height:1.02;text-wrap:balance}
.sp-jlist .jitem:hover h2{color:var(--hi);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}
@media (max-width:560px){.sp-list a{flex-direction:column;gap:4px}}

/* footer */
.sp-visit{padding-block:clamp(56px,7vw,96px) 48px}
.sp-vh{margin:0 0 40px;font-size:clamp(64px,9vw,140px);line-height:.8}
.sp-index{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 36px;padding-block:40px;border-top:1px solid var(--line)}
.sp-index ul{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.sp-index a{text-decoration:none;color:var(--mute2)}
.sp-index a:hover{color:var(--hi)}
.sp-index .sp-ih{color:var(--fg)}

@media (max-width:860px){
  .sp-svc,.sp-prod{grid-template-columns:1fr}
  .sp-svc-ph .ph{aspect-ratio:4/3}
  .sp-prod .sp-svc-ph .ph{aspect-ratio:1/1}
  .sp-index{grid-template-columns:1fr}
}