/* Job-to-be-done solution pages and the industries hub (parts/solution-door.php,
   parts/solution-industries.php), on top of product.css, solution-keyword.css and
   sections.css. Namespaced sd-. Light only, no dark sections. */

.sd .pp-hero h1{font-size:clamp(2.05rem,3.9vw,3.3rem);line-height:1.05;max-width:19ch}
.sd-reassure{margin:14px 0 0;font-size:14px;color:var(--muted);line-height:1.45}
.sd .pp-hero .hero-ctas{flex-wrap:wrap}
.sd .pp-hero .hero-ctas .btn{white-space:nowrap}

/* Problem and outcome */
.sd-why .kw-prose .pill{margin-bottom:14px}
.sd-why .kw-prose h2{margin-top:0}
.sd-outcome-h{font-size:1.15rem;letter-spacing:-.02em;margin:0 0 12px}

/* How it works */
.sd-how{scroll-margin-top:130px}
.sd-how-head{padding-top:clamp(40px,5vw,72px)}
.sd-how-head .sec-head{margin-bottom:0}
.sd-how .pp-feat:first-of-type{padding-top:clamp(32px,4vw,56px)}

/* Workflow */
.sd-route{scroll-margin-top:110px}
.sd-route .sec-head .pill i{background:var(--c)}
.sd-route-note{margin:36px auto 0;max-width:46ch;text-align:center;font-family:var(--fd);font-weight:600;font-size:clamp(1.05rem,1.6vw,1.25rem);color:var(--ink);line-height:1.4}

/* Video and screenshots */
.sd-screens{scroll-margin-top:110px;padding-top:0}
.sd-screens .sec-head .pill i,.sd-related .sec-head .pill i,.sd-why .pill i,.sd-how .pill i{background:var(--c)}
.sd-video{margin:0 auto 32px;max-width:880px}
.sd-player{position:relative;aspect-ratio:16/9;border-radius:20px;overflow:hidden;background:var(--bg-alt);border:1px solid var(--line);box-shadow:0 18px 50px -24px rgba(12,22,56,.25)}
.sd-player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.sd-play{all:unset;cursor:pointer;position:absolute;inset:0;display:grid;place-items:center}
.sd-play img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sd-play-i{position:relative;width:76px;height:76px;border-radius:50%;display:grid;place-items:center;background:var(--royal);color:#fff;box-shadow:0 10px 30px -8px rgba(12,22,56,.5);transition:transform .25s}
.sd-play:hover .sd-play-i{transform:scale(1.06)}
.sd-play:focus-visible{outline:3px solid var(--royal);outline-offset:-3px;border-radius:20px}
.sd-video figcaption{margin-top:12px;text-align:center;color:var(--ink-2);font-size:14.5px}
.sd-video figcaption a{color:var(--ink);font-weight:600}

.sd-shots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.sd-shots-3 .sd-shot:first-child{grid-column:1 / -1}
.sd-shot{margin:0;min-width:0}
.sd-frame{border-radius:16px;overflow:hidden;border:1px solid var(--line);background:var(--surface);box-shadow:0 18px 50px -28px rgba(12,22,56,.28)}
.sd-frame img{display:block;width:100%;height:auto}
.sd-frame-rp{border:0;background:none;overflow:visible;box-shadow:none}
.sd-shot figcaption{margin-top:10px;color:var(--ink-2);font-size:14.5px;line-height:1.5}
.sd-shots-note{margin:18px 0 0;color:var(--muted);font-size:13px}

/* Related capabilities */
.sd-related{scroll-margin-top:110px;padding-top:0}
.sd-rel-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.sd-rel{position:relative;display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;padding:18px 40px 18px 18px;border-radius:18px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);text-decoration:none;transition:border-color .25s,transform .25s}
.sd-rel:hover{border-color:var(--c);transform:translateY(-2px)}
.sd-rel .pp-tile{width:38px;height:38px;border-radius:12px;background:color-mix(in srgb,var(--c) 13%,#fff);color:var(--c);--ic-accent:var(--c)}
.sd-rel b{display:block;font-size:15.5px;line-height:1.3}
.sd-rel small{display:block;color:var(--ink-2);font-size:14px;line-height:1.5;margin-top:3px}
.sd-rel>svg{position:absolute;top:18px;right:16px;color:var(--muted)}
.sd-sub-h{font-size:1.1rem;margin:40px 0 14px}
.sd-doors{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.sd-doors a{display:inline-block;padding:8px 14px;border-radius:999px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);font-weight:600;font-size:14px;text-decoration:none;transition:border-color .25s}
.sd-doors a:hover{border-color:var(--c)}

/* Industries hub */
.sd-hub-hero{padding:clamp(48px,6vw,88px) 0 clamp(24px,3vw,40px);text-align:center}
.sd-hub-hero .pp-pill{margin:0 auto 18px}
.sd-hub-hero h1{font-size:clamp(2.1rem,4.2vw,3.5rem);line-height:1.05;letter-spacing:-.04em;max-width:20ch;margin:0 auto 18px}
.sd-hub-hero .lede{max-width:62ch;margin:0 auto}
.sd-steps{list-style:none;margin:36px auto 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:980px;counter-reset:st}
.sd-steps li{display:inline-flex;align-items:center;gap:10px;padding:8px 16px 8px 8px;border-radius:999px;border:1.5px solid var(--line);background:var(--surface);font-weight:600;font-size:14.5px;animation:sdIn .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--n) * 90ms)}
.sd-steps .pp-tile{width:30px;height:30px;border-radius:50%;background:color-mix(in srgb,var(--c) 14%,#fff);color:var(--c);--ic-accent:var(--c)}
@keyframes sdIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.sd-ind-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.sd-ind-card{position:relative;display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;padding:18px 40px 18px 18px;border-radius:20px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);text-decoration:none;transition:border-color .25s,transform .25s}
.sd-ind-card:hover{border-color:var(--k);transform:translateY(-2px)}
.sd-ind-card img{width:56px;height:56px;border-radius:50%;object-fit:cover;background:color-mix(in srgb,var(--k) 16%,#fff)}
.sd-ind-card b{display:block;font-size:16px}
.sd-ind-card small{display:block;color:var(--ink-2);font-size:14px;line-height:1.5;margin-top:4px}
.sd-ind-card>svg{position:absolute;top:18px;right:16px;color:var(--muted)}

.sd-also{padding-top:0}
.sd-also-list{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 28px}
.sd-also-list div{padding:18px 0;border-top:1px solid var(--line)}
.sd-also-list dt{font-weight:700;font-size:16px;margin-bottom:6px}
.sd-also-list dd{margin:0;color:var(--ink-2);font-size:15px;line-height:1.6}

@media (prefers-reduced-motion:reduce){
  .sd-rel,.sd-ind-card,.sd-doors a,.sd-play-i{transition:none}
  .sd-rel:hover,.sd-ind-card:hover,.sd-play:hover .sd-play-i{transform:none}
  .sd-steps li{animation:none}
}
@media (max-width:1000px){
  .sd-rel-grid,.sd-ind-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .sd-rel-grid,.sd-ind-grid,.sd-shots,.sd-also-list{grid-template-columns:minmax(0,1fr)}
  .sd-hub-hero{text-align:left}
  .sd-hub-hero .pp-pill{margin-left:0}
  .sd-hub-hero h1,.sd-hub-hero .lede{margin-left:0}
  .sd-steps{justify-content:flex-start}
  .sd-play-i{width:60px;height:60px}
  .sd .pp-hero .hero-ctas .btn{flex:1 1 100%;justify-content:center}
}