/* =====================================================================
   solutions.css  (group: solutions; prefix .sol-)
   Pages: procurement, it-asset-tracking, end-of-life,
          leased-devices-management, iso27001-and-itam
   Restrained, editorial: type + whitespace + 1px hairline rules do the
   work. No shadows, glows, gradients, hover lift, tinted chips or boxed
   card grids. Orange only for the hero kicker, list dashes, links, CTA.

   HERO        header.band-dark.page-hero.sol-hero > .wrap
               > p.kicker, h1.h1, p.lead.sol-hero-lead, [.sol-hero-cta],
                 div.hero-media.sol-hero-shot > img   (flat, 1px border)
               (.sol-hero-shot.plain for transparent cut-out images: no border)
   SPLIT       .wrap.split(.reverse).sol-split
               > div.sol-copy  (ALL text: [.icon-chip], h2.h2, p.body.sol-lead,
                                ul.check-list.sol-checks, [a.read-more])
               > div.media-frame.plain.sol-media > img   (image alone, flat panel)
   SHOWCASE    centered short intro: .section-head > h2 + p.sol-lead, then
               .media-frame.plain.sol-showcase-media > img, then
               .sol-points(.cols-3) > .sol-point > p.body
               (columns separated by a 1px top rule, no boxes)
   STEPS       .section-head > h2, then ol.sol-steps > li.sol-step
               > p.sol-step-num (the existing "01" text, large Rubik Light) + h3.h3
               (top hairline per column, no cards)
   INTEGRATIONS .wrap.split.sol-split > .sol-copy (title, lead, read-more)
               + div.sol-logos > span.logo-tile > img  (hairline grid of cells)
   FEATURES    .section-head > h2, then div.sol-features > div.sol-feature
               > span.icon-chip > img|svg, p.body   (2-col ruled list, not cards)
   FAQ         .wrap.sol-faq > div.sol-faq-head > h2|p(.h2)  +  div.sol-faq-list > details.faq
               (title left, questions right)
   STORY       .wrap.split.sol-story > div.sol-copy (eyebrow label, h2, intro)
               + div.quote-card.sol-quote > p.quote, div.person, a.read-more
   Bands alternate band-light / band-muted down the page; hero and final CTA are dark.
   ===================================================================== */

/* ---------- Hero ---------- */
.sol-hero .wrap{display:flex;flex-direction:column;align-items:flex-start;gap:18px;}
.sol-hero .h1{max-width:20ch;}
.sol-hero-lead{color:rgba(255,255,255,.78);max-width:56ch;}
.sol-hero-cta{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin-top:10px;}
.sol-hero-cta .body{color:rgba(255,255,255,.66);}
.sol-hero-shot{width:100%;max-width:1100px;}
.sol-hero-shot img{width:100%;height:auto;border-radius:var(--radius-sm);}
.sol-hero-shot.plain{max-width:960px;align-self:center;}
.sol-hero-shot.plain img{border:0;border-radius:0;}

/* ---------- Split (all text one column, image alone) ---------- */
.sol-split{align-items:center;}
.sol-copy{display:flex;flex-direction:column;align-items:flex-start;gap:18px;}
.sol-copy > .h2{max-width:18ch;}
.sol-lead{font-size:18px;line-height:1.6;color:var(--ink-muted);max-width:50ch;}
.sol-checks{margin-top:8px;padding-top:24px;border-top:1px solid var(--surface-border);width:100%;max-width:52ch;}
.sol-checks li{color:var(--ink-secondary);}
.sol-copy .read-more{margin-top:6px;}
.sol-media{border-radius:var(--radius-md);}
.sol-media img{width:100%;max-width:460px;height:auto;}
.sol-media.wide{min-height:300px;}
.sol-media .sol-strip{background:var(--surface-light);border:1px solid var(--border-soft);border-radius:var(--radius-sm);padding:clamp(20px,3vw,32px);width:100%;}
.sol-media .sol-strip img{max-width:100%;}

/* ---------- Showcase (short centered intro, framed image, ruled points) ---------- */
.sol-showcase-media{max-width:880px;margin:0 auto clamp(40px,5vw,56px);border-radius:var(--radius-md);}
.sol-showcase-media img{width:100%;max-width:440px;height:auto;}
.sol-points{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 40px;max-width:880px;margin-inline:auto;}
.sol-points.cols-3{grid-template-columns:repeat(3,minmax(0,1fr));max-width:none;}
.sol-point{border-top:1px solid var(--ink-primary);padding-top:20px;}
.sol-point .body{color:var(--ink-secondary);font-size:17px;}
@media (max-width:860px){.sol-points,.sol-points.cols-3{grid-template-columns:1fr;}}

/* ---------- Steps ---------- */
.sol-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 40px;}
.sol-step{border-top:1px solid var(--ink-primary);padding-top:24px;display:flex;flex-direction:column;gap:20px;}
.sol-step-num{font-family:var(--font-display);font-weight:300;font-size:56px;line-height:1;color:var(--ink-primary);margin:0;letter-spacing:-.01em;}
.sol-step .h3{font-size:22px;max-width:20ch;}
@media (max-width:860px){.sol-steps{grid-template-columns:1fr;gap:36px;}}

/* ---------- Integrations / partner logos (hairline cell grid) ---------- */
.sol-logos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--surface-border);border-left:1px solid var(--surface-border);}
.sol-logos .logo-tile{height:96px;border:0;border-right:1px solid var(--surface-border);border-bottom:1px solid var(--surface-border);border-radius:0;background:transparent;}
.sol-logos .logo-tile img{max-height:36px;max-width:76%;height:auto;}
@media (max-width:520px){.sol-logos{grid-template-columns:repeat(2,minmax(0,1fr));}.sol-logos .logo-tile{height:80px;padding:14px;}}

/* ---------- Feature list (ruled 2-col list, not cards) ---------- */
.sol-features{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(40px,6vw,88px);max-width:1000px;margin-inline:auto;border-bottom:1px solid var(--surface-border);}
.sol-feature{display:flex;align-items:flex-start;gap:20px;padding-block:26px;border-top:1px solid var(--surface-border);}
.sol-feature .icon-chip{width:36px;height:36px;}
.sol-feature .icon-chip img,.sol-feature .icon-chip svg{width:32px;height:32px;}
.sol-feature .icon-chip svg{stroke:var(--ink-primary);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
.sol-feature .icon-chip svg .acc{stroke:var(--brand-orange);}
.sol-feature .body{color:var(--ink-secondary);font-size:17px;padding-top:4px;}
@media (max-width:760px){.sol-features{grid-template-columns:1fr;}}

/* ---------- Ruled columns with title + link (ISO overview) ---------- */
.sol-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 40px;}
.sol-tile{border-top:1px solid var(--ink-primary);padding-top:24px;display:flex;flex-direction:column;gap:14px;}
.sol-tile .h3{color:var(--ink-primary);}
.sol-tile .body{flex:1;color:var(--ink-secondary);}
@media (max-width:860px){.sol-tiles{grid-template-columns:1fr;gap:36px;}}
.sol-logo-strip{display:block;width:100%;max-width:1000px;height:auto;margin:0 auto clamp(56px,7vw,88px);opacity:.7;filter:grayscale(1);}

/* ---------- FAQ ---------- */
.sol-faq{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:clamp(32px,6vw,96px);align-items:start;}
.sol-faq-head{position:sticky;top:110px;}
.sol-faq-head .h2{margin:0;text-align:left;}
.sol-faq-list{border-top:1px solid var(--surface-border);}
@media (max-width:860px){.sol-faq{grid-template-columns:1fr;gap:20px;}.sol-faq-head{position:static;}}

/* ---------- Customer story ---------- */
.sol-story{align-items:flex-start;}
.sol-story .sol-copy .h2{max-width:20ch;}
.sol-story .eyebrow{font-family:var(--font-body);font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-muted);text-align:left;margin:0;}
.sol-story .sol-intro{color:var(--ink-muted);max-width:48ch;}
.sol-quote{gap:24px;}
.sol-quote .person .body{line-height:1.45;}

/* ---------- Stat line (leased) ---------- */
.sol-statband{padding-block:clamp(56px,7vw,88px);}
.sol-statband .h2{font-family:var(--font-display);font-weight:300;font-size:clamp(30px,4.2vw,50px);max-width:24ch;margin:0;}

/* ---------- Statement + webinar line (ISO) ---------- */
.sol-statement{max-width:760px;margin:0 auto;text-align:center;display:flex;flex-direction:column;align-items:center;gap:18px;}
.sol-statement .sol-lead{max-width:60ch;}
.sol-statement .icon-chip{justify-content:center;width:56px;height:56px;}
.sol-statement .icon-chip img{width:52px;height:52px;}
.sol-statement .btn-primary{margin-top:8px;}
.sol-callout{display:flex;align-items:center;justify-content:space-between;gap:24px 48px;flex-wrap:wrap;border-block:1px solid var(--surface-border);padding-block:clamp(28px,4vw,40px);}
.sol-callout .body{font-family:var(--font-display);font-weight:300;font-size:clamp(20px,2.2vw,26px);line-height:1.4;margin:0;flex:1 1 420px;max-width:44ch;}
.sol-callout .btn-ghost{cursor:default;}

@media (max-width:860px){
  .sol-copy > .h2,.sol-story .sol-copy .h2{max-width:none;}
}
.sol-inline-link{border-bottom:1px solid var(--brand-orange);}
.sol-inline-link:hover{color:var(--brand-orange);}
/* icon sizing: PNG line icons carry inner whitespace */
.sol-copy > .icon-chip{width:52px;height:52px;}
.sol-copy > .icon-chip img{width:52px;height:52px;}
.sol-feature .icon-chip{width:44px;height:44px;}
.sol-feature .icon-chip img{width:44px;height:44px;}
.sol-feature .icon-chip svg{width:30px;height:30px;margin-left:4px;}
.sol-feature .body{padding-top:10px;}