/* Shared building blocks for the concept demo sites. Each page sets its own colours through the --x-* variables. */
.xs{padding:100px 0;position:relative}
.xs .x-lead{color:var(--x-muted);max-width:560px;margin-top:14px}
.x-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:50px;counter-reset:s}
.x-step{position:relative;padding:28px 24px;border:1px solid var(--x-line);background:var(--x-card,transparent);border-radius:var(--x-r,0)}
.x-step::before{counter-increment:s;content:"0" counter(s);display:block;font-size:34px;line-height:1;color:var(--x-accent);font-family:var(--x-head,inherit);margin-bottom:14px;opacity:.9}
.x-step h3{font-family:var(--x-head,inherit);font-weight:500;font-size:19px;margin-bottom:6px}
.x-step p{color:var(--x-muted);font-size:14px}
.x-quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:50px}
.x-quote{padding:30px 26px;border:1px solid var(--x-line);background:var(--x-card,transparent);border-radius:var(--x-r,0)}
.x-quote p{font-family:var(--x-head,inherit);font-size:18px;line-height:1.5;color:var(--x-text)}
.x-quote p::before{content:"“";display:block;font-size:46px;line-height:.6;color:var(--x-accent);margin-bottom:8px}
.x-quote footer{all:unset;display:block;margin-top:18px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--x-muted)}
.x-quote footer b{display:block;color:var(--x-text);letter-spacing:.04em;text-transform:none;font-size:14px;font-weight:600;margin-bottom:2px}
.x-table{width:100%;border-collapse:collapse;margin-top:44px;font-size:15px}
.x-table th,.x-table td{text-align:left;padding:16px 14px;border-bottom:1px solid var(--x-line);vertical-align:top}
.x-table th{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--x-muted);font-weight:600}
.x-table td:first-child{color:var(--x-text);font-weight:600}
.x-table td{color:var(--x-muted)}
.x-table tr:hover td{background:var(--x-hover,rgba(255,255,255,.03))}
.x-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.x-band{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--x-line);border:1px solid var(--x-line);margin-top:50px}
.x-band div{background:var(--x-bg2,var(--x-bg));padding:30px 22px}
.x-band b{display:block;font-family:var(--x-head,inherit);font-weight:500;font-size:clamp(28px,3.4vw,44px);line-height:1;color:var(--x-accent)}
.x-band span{display:block;margin-top:10px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--x-muted)}
.x-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:50px}
.x-card{border:1px solid var(--x-line);background:var(--x-card,transparent);border-radius:var(--x-r,0);overflow:hidden;transition:transform .35s,border-color .35s}
.x-card:hover{transform:translateY(-6px);border-color:var(--x-accent)}
.x-card .art{height:210px;display:grid;place-items:center;position:relative;overflow:hidden}
.x-card .art svg{width:70%;height:90%}
.x-card .in{padding:24px}
.x-card small{color:var(--x-accent);letter-spacing:.2em;text-transform:uppercase;font-size:11px;font-weight:600}
.x-card h3{font-family:var(--x-head,inherit);font-weight:500;font-size:23px;margin:6px 0 8px}
.x-card p{color:var(--x-muted);font-size:14px}
.x-card ul{list-style:none;margin-top:14px;display:grid;gap:6px;font-size:13px;color:var(--x-muted)}
.x-card li{display:flex;justify-content:space-between;border-top:1px solid var(--x-line);padding-top:6px}
.x-card li b{color:var(--x-text);font-weight:600}
.x-faq{margin-top:44px;max-width:820px;border-top:1px solid var(--x-line)}
.x-faq details{border-bottom:1px solid var(--x-line)}
.x-faq summary{list-style:none;cursor:pointer;padding:22px 40px 22px 0;font-family:var(--x-head,inherit);font-size:19px;position:relative;color:var(--x-text)}
.x-faq summary::-webkit-details-marker{display:none}
.x-faq summary::after{content:"+";position:absolute;right:6px;top:50%;margin-top:-14px;font-size:26px;line-height:1;color:var(--x-accent);transition:transform .3s}
.x-faq details[open] summary::after{transform:rotate(45deg)}
.x-faq details p{padding:0 40px 22px 0;color:var(--x-muted);font-size:15px}
.x-form{margin-top:36px;display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:760px}
.x-form label{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--x-muted)}
.x-form label.wide{grid-column:1/-1}
.x-form input,.x-form select,.x-form textarea{display:block;width:100%;margin-top:6px;padding:13px 14px;background:var(--x-field,rgba(255,255,255,.05));border:1px solid var(--x-line);color:var(--x-text);font:400 15px var(--sans,Inter,system-ui,sans-serif);border-radius:var(--x-r,0);outline:none;transition:border-color .2s}
.x-form input:focus,.x-form select:focus,.x-form textarea:focus{border-color:var(--x-accent)}
.x-form button{grid-column:1/-1;justify-self:start;padding:15px 32px;background:var(--x-accent);color:var(--x-on-accent,#111);border:0;font:700 12px var(--sans,Inter,system-ui,sans-serif);letter-spacing:.2em;text-transform:uppercase;cursor:pointer;border-radius:var(--x-r,0);transition:filter .2s}
.x-form button:hover{filter:brightness(1.12)}
.x-note{margin-top:14px;font-size:14px;color:var(--x-muted);min-height:22px}
.x-foot{border-top:1px solid var(--x-line);padding:64px 0 100px;background:var(--x-foot,transparent);text-align:left;letter-spacing:normal;font-size:14px;color:var(--x-text)}
.x-foot .cols{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:40px}
.x-foot h4{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--x-muted);margin-bottom:14px;font-weight:600}
.x-foot a{display:flex;align-items:center;min-height:44px;color:var(--x-text);opacity:.82;font-size:14px;padding:4px 0}
.x-foot a:hover{opacity:1;color:var(--x-accent)}
.x-foot .blurb{color:var(--x-muted);font-size:14px;max-width:320px;margin-top:12px}
.x-foot .legal{margin-top:46px;padding-top:22px;border-top:1px solid var(--x-line);color:var(--x-muted);font-size:12px;line-height:1.8}
@media(max-width:900px){
  .x-steps,.x-quotes,.x-cards{grid-template-columns:1fr}
  .x-band{grid-template-columns:repeat(2,1fr)}
  .x-foot .cols{grid-template-columns:1fr 1fr}
  .x-form{grid-template-columns:1fr}
  .xs{padding:76px 0}
}

@media(max-width:700px){
  .xs{padding:64px 0}
  .x-quotes{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;margin-left:-20px;margin-right:-20px;padding:0 20px 8px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .x-quotes::-webkit-scrollbar{display:none}
  .x-quote{flex:0 0 84%;scroll-snap-align:start}
}