/* Skarbnik site, Revamp layer (on top of css/panyl.css and css/site.css): the Home hero scope chips, the lifecycle
   caption under the Vinyl logo, the five step strip, the problem, the five stages, the three real examples, the two
   paths, the page headers and tables of For vendors and For agents, the scope cards of How it works, and the Home
   section rail with labels and hints (wide) and the section pill (phones). Taken from the Revamp design package;
   every colour is a token variable. The page root carries data-ver="new". */
/* ---- Revamp, shared ---- */
.sk .dev.dev2{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:22px;padding-top:20px;border-top:1px solid var(--ln)}
@container sk (max-width:900px){.sk .dev.dev2{grid-template-columns:minmax(0,1fr)}}
.sk .n-scope{display:flex;flex-wrap:wrap;gap:8px}
.sk .n-sc{display:inline-flex;align-items:center;gap:8px;min-height:32px;padding:0 12px;border-radius:999px;border:1px solid var(--ln2);background:rgba(var(--s1-rgb),.8);color:var(--tx2);font:600 13px/1.2 var(--fu)}
.sk .n-sc i{width:7px;height:7px;border-radius:50%;background:var(--am);flex:none}
.sk .n-h1{font:var(--wd) calc(clamp(34px,4.1cqw,60px) * var(--hs,1))/1.06 var(--fd);letter-spacing:calc(-.03em * var(--trk));text-wrap:balance}
.sk[data-lay="console"] .n-h1,.sk[data-lay="cdock"] .n-h1{font-size:calc(clamp(32px,3.4cqw,50px) * var(--hs,1))}
.sk .n-h2{font:var(--wd) calc(clamp(32px,3.7cqw,50px) * var(--hs,1))/1.06 var(--fd);letter-spacing:calc(-.025em * var(--trk));text-wrap:balance}
.sk .n-hero{background:radial-gradient(900px 460px at 82% -4%,rgba(var(--am-rgb),.075),transparent 70%),var(--bg)}
.sk .n-hero-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:64px;align-items:center}
.sk .n-hero-copy{display:flex;flex-direction:column;gap:30px}
.sk .n-relay{margin-top:56px}
.sk .n-relay .relay{position:relative}
.sk[data-lay="console"] main.home>section.n-hero>.wrap{padding-top:64px!important}
@container sk (min-width:701px){.sk[data-lay="cdock"] main.home>section.n-hero>.wrap{padding-top:64px!important}}
.sk .n-vals{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px;margin-top:84px;padding-top:34px;border-top:1px solid var(--ln)}
.sk .n-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-top:44px}
.sk .n-opt{padding:30px;display:flex;flex-direction:column;gap:16px}
.sk .n-opt .n-ic{width:52px;height:52px;border-radius:calc(14px * var(--rs));display:flex;align-items:center;justify-content:center;background:var(--bg2);border:1px solid var(--ln);color:var(--tx)}
.sk .n-opt .n-ic svg.i{width:24px;height:24px}
.sk .n-opt.bad .n-ic{color:var(--co);border-color:rgba(var(--co-rgb),.5)}
.sk .n-solve{margin-top:22px;padding:34px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:40px;align-items:start}
.sk .n-sol3{display:flex;flex-direction:column;gap:16px}
.sk .n-sol3>div{display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;align-items:start}
.sk .n-sol3 .n-ic{width:44px;height:44px;border-radius:calc(12px * var(--rs));display:flex;align-items:center;justify-content:center;background:var(--bg2);border:1px solid var(--ln);color:var(--am)}
.sk .n-det{border:1px solid var(--ln);border-radius:calc(14px * var(--rs));background:var(--bg2)}
.sk .n-det>summary{min-height:48px;display:flex;align-items:center;padding:0 16px;cursor:pointer;font:600 15px/1.2 var(--fu);color:var(--tx);list-style:none}
.sk .n-det>summary::-webkit-details-marker{display:none}
.sk .n-det>summary::after{content:"+";margin-left:auto;font-size:20px;color:var(--am);line-height:1}
.sk .n-det[open]>summary::after{content:"\2212"}
.sk .n-det>div{padding:2px 16px 16px;display:flex;flex-direction:column;gap:10px}
.sk .n-gloss{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.sk .n-gloss dt{font:600 14px/1.3 var(--fu);color:var(--tx)}
.sk .n-gloss dd{margin:4px 0 0;font-size:14px;line-height:1.5;color:var(--tx2)}
/* five stages */
.sk .n-flow{display:flex;flex-direction:column;margin-top:44px}
.sk .n-st{position:relative;display:grid;grid-template-columns:64px minmax(0,1fr);gap:22px;padding-bottom:28px}
.sk .n-st:last-child{padding-bottom:0}
.sk .n-st::before{content:"";position:absolute;left:31px;top:66px;bottom:2px;width:2px;background:var(--ln2)}
.sk .n-st:last-child::before{display:none}
.sk .n-sn{width:64px;height:64px;border-radius:calc(18px * var(--rs));display:flex;align-items:center;justify-content:center;background:var(--bg2);border:1px solid var(--ln);font:var(--wd) calc(26px * var(--hs,1))/1 var(--fd);color:var(--tx)}
.sk .n-st.priv .n-sn{border:1.5px dashed rgba(var(--am-rgb),.75);color:var(--am)}
.sk .n-st.proof .n-sn{border-color:rgba(var(--mn-rgb),.65);color:var(--mn)}
.sk .n-sb{padding:22px 24px;display:flex;flex-direction:column;gap:12px}
.sk .n-sb .n-who{font:600 12px/1 var(--fu);letter-spacing:.14em;text-transform:uppercase;color:var(--tx3)}
.sk .n-st.priv .n-who{color:var(--am)}
.sk .n-st.proof .n-who{color:var(--mn)}
.sk .n-notes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:36px}
.sk .n-notes>div{display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;padding:14px 16px;border-radius:calc(12px * var(--rs));border:1px solid var(--ln);background:var(--bg2);font-size:14.5px;line-height:1.5;color:var(--tx2)}
.sk .n-notes svg.i{color:var(--am);margin-top:2px}
.sk .n-twoway{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:22px}
.sk .n-twoway>div{align-items:flex-start;padding:18px 20px;border-radius:calc(14px * var(--rs));border:1px solid var(--ln);background:var(--bg2);display:flex;flex-direction:column;gap:8px}
/* examples */
.sk .n-ex3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:44px;align-items:stretch}
.sk .n-ex{padding:26px;display:flex;flex-direction:column;gap:14px}
.sk .n-ex .n-kv{display:flex;flex-direction:column;gap:6px;margin-top:auto;padding-top:14px;border-top:1px solid var(--ln)}
.sk .n-ex .n-kv>div{display:flex;justify-content:space-between;gap:12px;font-size:13.5px;color:var(--tx2)}
.sk .n-ex .n-kv b{color:var(--tx);font-weight:600;text-align:right}
.sk .n-big{font:var(--wd) calc(30px * var(--hs,1))/1.15 var(--fd);letter-spacing:calc(-.02em * var(--trk))}
/* take part */
.sk .n-part{padding:34px;display:flex;flex-direction:column;gap:22px}
.sk .n-ul{display:flex;flex-direction:column;gap:12px}
.sk .n-ul li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;font-size:15.5px;line-height:1.5;color:var(--tx2)}
.sk .n-ul li svg.i{color:var(--mn);margin-top:2px}
.sk .n-ul.warn li svg.i{color:var(--am)}
.sk .n-ul li b{color:var(--tx);font-weight:600}
/* rows */
.sk .n-links .vrow{grid-template-columns:44px minmax(0,1fr) 20px}
/* page headers and tables */
.sk .n-ph{padding:80px 0 56px;background:radial-gradient(800px 380px at 88% -10%,rgba(var(--am-rgb),.06),transparent 70%),var(--bg)}
.sk .n-ph h1{font:var(--wd) calc(clamp(34px,4.4cqw,62px) * var(--hs,1))/1.06 var(--fd);letter-spacing:calc(-.03em * var(--trk));text-wrap:balance}
.sk .n-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:40px}
.sk .n-4>div{padding:22px;display:flex;flex-direction:column;gap:10px}
.sk .n-4 .n-who{font:600 12px/1 var(--fu);letter-spacing:.14em;text-transform:uppercase;color:var(--tx3)}
.sk .n-vis{display:flex;flex-direction:column;gap:6px;margin-top:auto;padding-top:12px;border-top:1px solid var(--ln);font-size:13px;color:var(--tx2)}
.sk .n-vis b{color:var(--tx);font-weight:600}
.sk .n-tab{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--ln);border-radius:calc(16px * var(--rs));overflow:hidden;margin-top:30px}
.sk .n-tab th,.sk .n-tab td{padding:16px 18px;text-align:left;vertical-align:top;border-bottom:1px solid var(--ln);font-size:15px;line-height:1.5}
.sk .n-tab th{font:600 12px/1.2 var(--fu);letter-spacing:.12em;text-transform:uppercase;color:var(--tx3);background:rgba(var(--bg2-rgb),.5)}
.sk .n-tab tr:last-child td{border-bottom:0}
.sk .n-tab td:first-child{width:22%;color:var(--tx);font-weight:600}
.sk .n-tab td{color:var(--tx2)}
.sk .n-q{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:30px}
.sk .n-q>div{padding:20px 22px}
.sk .n-res{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:36px}
.sk .n-res a{display:flex;flex-direction:column;gap:6px;padding:20px 22px;text-decoration:none;color:inherit;transition:border-color .25s}
.sk .n-res a:hover{border-color:var(--am)}
.sk .n-res a:hover .h4{color:var(--am)}
.sk .n-res .mono{font-size:13px;color:var(--tx3);overflow-wrap:anywhere}
@container sk (max-width:1080px){
 .sk .n-hero-grid,.sk .n-solve{grid-template-columns:minmax(0,1fr);gap:44px}
 .sk .n-ex3,.sk .n-res{grid-template-columns:minmax(0,1fr)}
 .sk .n-4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@container sk (max-width:900px){
 .sk .n-two,.sk .n-notes,.sk .n-twoway,.sk .n-q,.sk .n-gloss{grid-template-columns:minmax(0,1fr)}
}
@container sk (max-width:760px){
 .sk .n-vals{grid-template-columns:minmax(0,1fr);gap:26px;margin-top:56px}
 .sk .n-4{grid-template-columns:minmax(0,1fr)}
 .sk .n-st{grid-template-columns:44px minmax(0,1fr);gap:14px}
 .sk .n-sn{width:44px;height:44px;font-size:19px;border-radius:calc(12px * var(--rs))}
 .sk .n-st::before{left:21px;top:48px}
 .sk .n-sb{padding:18px 16px}
 .sk .n-solve,.sk .n-part,.sk .n-opt{padding:22px 18px}
 .sk .n-ph{padding:52px 0 40px}
 .sk .n-hero .actions .btn{flex:1 1 100%}
 .sk .n-tab th{display:none}
 .sk .n-tab tr{display:block;border-bottom:1px solid var(--ln);padding:12px 0}
 .sk .n-tab td{display:block;width:auto!important;border:0;padding:4px 16px}
}


/* ---- Revamp 2 ---- */
.sk [hidden]{display:none!important}
.sk .r-art{display:flex;flex-direction:column;align-items:center;gap:18px;min-width:0}
.sk .r-art .hart{position:relative;left:auto;top:auto;transform:none;width:100%;max-width:520px;opacity:1}
.sk .r-life{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 4px;margin:0;padding:0;list-style:none;font:600 13px/1.2 var(--fu);color:var(--tx2)}
.sk .r-life li{display:inline-flex;align-items:center;gap:6px}
.sk .r-life li b{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;border:1px solid var(--ln2);font:600 11px/1 var(--fm);color:var(--am)}
.sk .r-life li:not(:last-child)::after{content:"";display:inline-block;width:14px;height:1px;background:var(--ln2);margin-left:2px}
.sk .relay.r5 .h3{font-size:calc(21px * var(--hs,1))}
.sk .r-isnt{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-top:40px}
.sk .r-isnt .card{padding:28px;display:flex;flex-direction:column;gap:14px}
.sk .r-priv{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:8px}
.sk .r-priv>div{padding:18px;border-radius:calc(14px * var(--rs));border:1px solid var(--ln);background:var(--bg2);display:flex;flex-direction:column;gap:8px}
.sk .r-priv>div.p{border:1.5px dashed rgba(var(--am-rgb),.7)}
.sk .r-priv b.k{font:600 11px/1 var(--fu);letter-spacing:.14em;text-transform:uppercase;color:var(--tx3)}
.sk .r-priv>div.p b.k{color:var(--am)}
.sk .r-cmd{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:10px 22px;align-items:baseline}
.sk .r-cmd dt{font:500 14px/1.4 var(--fm);color:var(--tx)}
.sk .r-cmd dd{margin:0;font-size:14.5px;line-height:1.5;color:var(--tx2)}
.sk .r-tn{display:flex;gap:10px;align-items:flex-start;padding:10px 14px;border-radius:calc(10px * var(--rs));border:1px dashed var(--ln2);font-size:13.5px;line-height:1.45;color:var(--tx2)}
.sk .r-tn svg.i{flex:none;color:var(--am);margin-top:1px}
.sk .r-compat{padding:28px;display:flex;flex-direction:column;gap:16px}
.sk .r-compat .n-tab{margin-top:0}
.sk .r-live{display:inline-flex;align-items:center;gap:8px;font:600 12px/1 var(--fu);letter-spacing:.12em;text-transform:uppercase;color:var(--mn)}
.sk .r-live i{width:8px;height:8px;border-radius:50%;background:var(--mn)}
@container sk (min-width:1081px){
 .sk .r-art{grid-column:2;grid-row:1}
 .sk .hero .relay.r5{grid-template-columns:repeat(5,minmax(0,1fr));gap:0 24px}
 .sk .hero .relay.r5 .rrow::before{right:-18px}
}
@container sk (max-width:1080px){
 .sk .r-art .hart{width:min(320px,76%)}
 .sk .r-priv{grid-template-columns:repeat(2,minmax(0,1fr))}
 .sk .r-isnt{grid-template-columns:minmax(0,1fr)}
}
@container sk (max-width:760px){
 .sk .r-priv{grid-template-columns:minmax(0,1fr)}
 .sk .r-cmd{grid-template-columns:minmax(0,1fr);gap:4px}
 .sk .r-cmd dd{margin-bottom:12px}
 .sk .r-life{font-size:12px;gap:6px 3px}
 .sk .r-life li{gap:4px}
 .sk .r-life li b{width:18px;height:18px;font-size:10px}
 .sk .r-life li:not(:last-child)::after{width:8px}
}

/* Home section rail (labels and hints) and the phone section pill */
.sk .ln-w{display:flex;flex-direction:column;gap:2px;min-width:0}
.sk .ln-d{display:none;font:400 12.5px/1.35 var(--fb);color:var(--tx3)}
@container sk (min-width:701px){
 .sk[data-ver="new"][data-lay="cdock"] .ln-d{display:block}
 .sk[data-ver="new"][data-lay="cdock"] .ln-i{align-items:flex-start}
 .sk[data-ver="new"][data-lay="cdock"] .ln-n{padding-top:3px}
 .sk[data-ver="new"][data-lay="cdock"] .ln-i[aria-current=true]::before{margin-top:7px}
}
@container sk (max-width:700px){
 .sk[data-ver="new"]:is([data-lay="dock"],[data-lay="cdock"]) .lay-nav{display:none}
 .sk[data-ver="new"]:is([data-lay="dock"],[data-lay="cdock"]) .lay-ctl{display:flex;position:sticky;bottom:12px;z-index:40;align-items:center;gap:8px;width:calc(100% - 20px);margin:0 auto 12px;padding:6px;border-radius:999px;background:rgba(var(--s1-rgb),.94);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--ln2);box-shadow:0 18px 50px rgba(0,0,0,.35)}
 .sk[data-ver="new"]:is([data-lay="dock"],[data-lay="cdock"]) .ln-name{display:block;flex:1 1 auto;min-width:0;order:0;font:600 14px/1.2 var(--fu);text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .sk[data-ver="new"]:is([data-lay="dock"],[data-lay="cdock"]) .ln-c{display:none}
 .sk[data-ver="new"]:is([data-lay="dock"],[data-lay="cdock"]) .ln-b{width:44px;height:44px;flex:none}
}

/* the collapsed Console rail shows only the numbers */
@container sk (min-width:1001px){.sk[data-lay="cdock"][data-rail="collapsed"] .ln-w{display:none}}
/* Evidence: the example cards (bounties 24, 32, 17 and 33) */
.sk .n-ex4{grid-template-columns:repeat(2,minmax(0,1fr))}
@container sk (max-width:900px){.sk .n-ex4{grid-template-columns:minmax(0,1fr)}}
/* the header: six page links fold into the menu button when they no longer fit */
@container sk (max-width:1240px){.sk .nav-links{display:none}.sk .menu-btn{display:inline-flex}}
.sk .n-ul.no li svg.i{color:var(--co)}
/* For vendors: the real commands are longer than the design's, so they get a wider column */
.sk .r-cmd.r-cmd-w{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:14px 28px}
.sk .r-cmd.r-cmd-w dt{overflow-wrap:anywhere}
@container sk (max-width:760px){.sk .r-cmd.r-cmd-w{grid-template-columns:minmax(0,1fr);gap:4px}}
@container sk (max-width:900px){.sk :where(.p-vendors) .n-4{grid-template-columns:minmax(0,1fr)!important}}
/* For agents: the six first answers and the key lists in two columns, the outcomes in three; one column on phones */
.sk .n-4.a-three{grid-template-columns:repeat(3,minmax(0,1fr))}
.sk .n-4.a-six,.sk .n-4.a-two{grid-template-columns:repeat(2,minmax(0,1fr))}
.sk .n-4 .chip{align-self:flex-start}
.sk .r-compat .n-tab+.n-tab{margin-top:8px}
@container sk (max-width:760px){.sk .n-4.a-six,.sk .n-4.a-three,.sk .n-4.a-two{grid-template-columns:minmax(0,1fr)}}
/* labels inside table cells, shown only when the table stacks into cards on phones */
.sk .n-tab .tlab{display:none}
@container sk (max-width:760px){.sk .n-tab .tlab{display:inline;font:600 12px/1.2 var(--fu);letter-spacing:.08em;text-transform:uppercase;color:var(--tx3);margin-right:6px}}
/* "Who sees what": the matrix fits its own width (it sits inside the Home panel and on How it works). From 901 px of
   matrix width: a narrower picker beside the table, tighter cells, item labels that wrap, slightly smaller chip text
   (tap targets stay 44 px), no sideways scroll. From 621 to 900 px: the picker goes above the table, four across.
   Narrower: the phone rules of css/panyl.css (one party column at a time) or sideways scroll inside the table. */
.sk .mech-c{container:mech/inline-size}
@container mech (min-width:901px){
 .sk[data-th] .mech-c>.mech{grid-template-columns:minmax(0,236px) minmax(0,1fr);gap:24px;margin-top:8px}
 .sk[data-th] .mech-c .pick{display:flex;flex-direction:column;gap:8px}
 .sk[data-th] .mech-c .pbtn{grid-template-columns:40px minmax(0,1fr);gap:10px;padding:10px 12px 10px 10px}
 .sk[data-th] .mech-c .pico{width:40px;height:40px}
}
@container mech (min-width:621px) and (max-width:900px){
 .sk[data-th] .mech-c>.mech{grid-template-columns:minmax(0,1fr);gap:20px;margin-top:8px}
 .sk[data-th] .mech-c .pick{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
 .sk[data-th] .mech-c .pbtn{grid-template-columns:minmax(0,1fr);gap:6px;padding:10px;justify-items:start}
 .sk[data-th] .mech-c .pico{width:44px;height:44px}
}
@container mech (min-width:621px){
 .sk[data-th] .mech-c .mx{min-width:0;width:100%}
 .sk[data-th] .mech-c .mx th{padding:14px 4px 10px;font-size:14px;white-space:nowrap}
 .sk[data-th] .mech-c .mx td{padding:5px 4px}
 .sk[data-th] .mech-c .mx td.rowh,.sk[data-th] .mech-c .mx th.first{padding-left:14px;padding-right:8px;min-width:96px;width:24%}
 .sk[data-th] .mech-c .mx td.rowh{font-size:14px;line-height:1.3;white-space:normal}
 .sk[data-th] .mech-c .cell{padding:0 6px;gap:5px;font-size:13px;white-space:nowrap;min-height:44px}
 .sk[data-th] .mech-c .cell svg.i{width:15px;height:15px}
}