/* Styles of the audience pages (/for/<audience>, scripts/audiences-222.mjs). Loaded after solution.css, whose tokens, header,
   type, buttons, footer, problem and solution marks, glass card, numbered steps and closing band these pages use as they are;
   only what is new is here (docs/prd/audience-pages.md). Raise ?v= of this file in scripts/audiences-222.mjs when it changes. */

/* ---------- the first screen: the product page's hero with a sentence for a heading and a stack of icons beside it ---------- */
.ah .ph__h{--fs:clamp(24px,3.1vw,44px);margin-top:clamp(12px,1.4vw,18px);line-height:1.14;text-wrap:balance}
.ah__kick{margin-top:clamp(14px,1.8vw,22px)}
.ah__kick .hl{display:inline-block;padding:.6em 1.1em .55em;border-radius:999px}
.ah__facts{display:grid;gap:10px;margin-top:clamp(18px,2.2vw,28px);max-width:40em}
.ah__facts li{position:relative;padding-inline-start:32px;font-size:clamp(15px,1.15vw,17px);line-height:1.45;font-weight:500}
.ah__facts li::before{content:"";position:absolute;inset-inline-start:0;top:.08em;width:21px;height:21px;background:url(/assets/marks/solution.png) center/contain no-repeat}
.ah__stack{padding:clamp(24px,2.8vw,40px)}
.ah__icons{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:clamp(20px,2.4vw,36px) clamp(14px,1.6vw,24px)}
.ah__icons li{display:grid;justify-items:center;gap:12px;text-align:center}
.ah__icons img{width:clamp(64px,6.4vw,96px);height:auto;filter:drop-shadow(0 8px 10px rgba(60,48,0,.2));animation:phBob 4.6s ease-in-out infinite}
.ah__icons li:nth-child(2n) img{animation-delay:-2.3s}
.ah__icons li:nth-child(3n) img{animation-delay:-1.1s}
.ah__icons span{font-family:var(--f-display);font-weight:600;font-size:14px;letter-spacing:-.01em}
@media (max-width:900px){.ah .ph__side{display:none}}

/* ---------- a section: a thin rule with the number and the kind of business, then the heading ---------- */
.as{padding-block:clamp(56px,7vw,104px)}
.as--pains,.as--steps,.as--cases{background:var(--cream)}
.as--modules,.as--faq{background:var(--cream-warm)}
.as--scale{background:var(--black);color:var(--cream)}
.as--scale .chap{border-top-color:var(--line-c)}
.as__h{margin-top:clamp(24px,3vw,44px);max-width:17em}
.as__h + *{margin-top:clamp(28px,3.6vw,52px)}

/* what gets in the way: one row per problem, the problem on the left and what changes on the right */
.ap__list{display:grid}
.ap__i{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(14px,3vw,56px);padding-block:clamp(18px,2.2vw,28px);border-top:1px solid rgba(10,10,10,.14)}
.ap__i:last-child{border-bottom:1px solid rgba(10,10,10,.14)}
.ap__i .sol__p,.ap__i .sol__s{padding-inline-start:36px}
.ap__i .sol__p::before,.ap__i .sol__s::before{left:auto;inset-inline-start:0;top:.05em;width:23px;height:23px}
.ap__i .sol__p{font-size:clamp(16px,1.3vw,19px);line-height:1.45;color:var(--ink)}
.ap__i .sol__s{font-size:clamp(17px,1.4vw,20px);line-height:1.45;font-weight:600}
@media (max-width:900px){.ap__i{grid-template-columns:minmax(0,1fr);gap:14px}}

/* which modules fit: the glass cards of the Solutions page, each leading to its product page */
/* three cards to a row (six modules fall in two even rows); four to a row when the count is 4, 7 or 8; two on a tablet, one on a phone */
.am__list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,22px)}
.am__list--4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1100px){.am__list,.am__list--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.am__list,.am__list--4{grid-template-columns:minmax(0,1fr)}}
.am__list > li{display:flex}
.am__c{width:100%;gap:14px;padding:22px 22px 18px}
.am__c:hover,.am__c:focus-visible{transform:translateY(-3px);box-shadow:0 30px 64px rgba(70,56,0,.2),0 3px 10px rgba(70,56,0,.08),inset 0 1px 0 rgba(255,255,255,.95),inset 0 -10px 28px rgba(255,255,255,.28)}
.am__head{display:flex;align-items:center;gap:14px}
.am__ico{flex:0 0 auto;width:48px;height:48px;filter:drop-shadow(0 6px 8px rgba(60,48,0,.2))}
.am__n{display:block;font-family:var(--f-display);font-weight:600;font-size:19px;letter-spacing:-.01em;line-height:1.15}
.am__cat{display:block;margin-top:5px;font-family:var(--f-mono);font-size:10.91px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.am__why{flex:1;font-size:15px;line-height:1.5;color:var(--ink)}
.am__go{padding-top:12px;border-top:1px solid rgba(10,10,10,.1);font-family:var(--f-mono);font-size:11.45px;font-weight:500;letter-spacing:.16em;text-transform:uppercase}
.am__go b{font-weight:500}

/* how we start: the numbered blocks of the product page, three or four in a row */
.at__list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,3.4vw,56px)}
.at__list--4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1100px){.at__list--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:700px){.at__list,.at__list--4{grid-template-columns:minmax(0,1fr)}}
.at__list .body{color:var(--ink)}

/* how the system grows: the black chapter */
/* three items to a row, four when there are 4 or 5 (two columns when there are 2); two on a tablet, one on a phone */
.asc__list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,48px)}
.asc__list--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.asc__list--2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:1100px){.asc__list--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:700px){.asc__list,.asc__list--4,.asc__list--2{grid-template-columns:minmax(0,1fr)}}
.asc__i{display:grid;gap:14px;align-content:start;padding-top:18px;border-top:1px solid var(--line-c)}
.asc__n{font-family:var(--f-serif);font-style:italic;font-size:clamp(30px,3.2vw,48px);line-height:1;color:var(--yellow)}
.asc__t{max-width:24em;font-size:clamp(17px,1.4vw,20px);line-height:1.5}

/* examples */
.ac__list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:clamp(18px,2.2vw,32px)}
.ac__list > li{display:flex}
.ac__c{display:grid;gap:12px;align-content:start;width:100%;padding:clamp(20px,2.2vw,30px);border:1px solid var(--line);border-radius:20px;background:rgba(255,255,255,.5);color:inherit;text-decoration:none}
.ac__t{--fs:clamp(18px,1.6vw,24px)}
.ac__x{color:var(--ink)}
.ac__c--link{transition:border-color .3s,background .3s,transform .4s var(--ease)}
.ac__c--link::after{content:"→";font-family:var(--f-mono);font-size:16px;line-height:1;transition:transform .4s var(--ease)}
.ac__c--link:hover,.ac__c--link:focus-visible{border-color:var(--black);background:rgba(255,255,255,.8)}
.ac__c--link:hover::after{transform:translateX(5px)}
html[dir=rtl] .ac__c--link::after{content:"←"}
html[dir=rtl] .ac__c--link:hover::after{transform:translateX(-5px)}

/* the questions asked most: the answer is in the page, the browser opens and closes it */
.aq{display:grid;max-width:54em}
.aq__i{border-top:1px solid rgba(10,10,10,.18)}
.aq__i:last-child{border-bottom:1px solid rgba(10,10,10,.18)}
.aq__q{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;padding-block:22px;list-style:none;cursor:pointer;font-family:var(--f-display);font-weight:600;font-size:clamp(16px,1.5vw,21px);line-height:1.3;letter-spacing:-.01em;text-wrap:balance}
.aq__q::-webkit-details-marker{display:none}
.aq__q::after{content:"+";flex:0 0 auto;font-family:var(--f-mono);font-size:24px;font-weight:400;line-height:1;transition:transform .35s var(--ease)}
.aq__i[open] .aq__q::after{transform:rotate(45deg)}
.aq__q:hover{opacity:.78}
.aq__a{max-width:42em;padding:0 0 26px;font-size:16px;line-height:1.62;color:var(--ink);text-wrap:pretty}

@media (prefers-reduced-motion:reduce){
  .ah__icons img{animation:none}
  .am__c,.ac__c--link,.ac__c--link::after,.aq__q::after{transition:none}
}