/* FAIM Experience inner pages (catalogue, cart, contact, 76 product pages), FAIM x Cityscape.
   Loaded after exp.css. Content markup is the original; this file only re-dresses it. */
.xs{--faimB:var(--teal);--faim:var(--teal);--void:var(--paper);--card:var(--mist);--dim:var(--muted);--edge2:var(--line);--glass:var(--paper)}
.xs .mono{font-family:var(--f);font-variant-numeric:tabular-nums}
.xs main.wrap{padding-top:8px;padding-bottom:clamp(48px,7vw,96px)}

/* ---------- heroes: copy left, picture right (product .hero and page .pagehero) */
.xs .hero,.xs .pagehero{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:clamp(24px,4vw,64px);align-items:center;max-width:var(--maxw);margin:0 auto;padding:clamp(28px,4vw,56px) var(--gutR) clamp(28px,4vw,56px) var(--gut);min-height:0!important;border:0;overflow:visible}
.xs .hero>img.bg,.xs .pagehero>img.phbg{position:relative;inset:auto;order:2;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r);background:var(--mist-2);box-shadow:0 30px 60px -40px var(--shade)}
.xs .pagehero>img.phbg{aspect-ratio:16/11}
.xs .hero .shade,.xs .pagehero .phshade{display:none}
.xs .hero .inner,.xs .pagehero .inner{order:1;position:relative;padding:0;margin:0;max-width:none;width:auto;animation:xsIn .9s var(--e-in) both}
.xs .hero>img.bg,.xs .pagehero>img.phbg{animation:xsImg 1.1s var(--e-in) .08s both}
@keyframes xsIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes xsImg{from{opacity:0;transform:scale(.97);clip-path:inset(6% 6% 6% 6% round 22px)}to{opacity:1;transform:none;clip-path:inset(0 0 0 0 round 22px)}}
.xs .hero h1{font-size:clamp(2.6rem,5.4vw,5rem)!important;font-weight:700;letter-spacing:-.02em;line-height:1;margin-top:18px!important;text-transform:none!important}
.xs .hero h2{font-size:clamp(1.2rem,2vw,1.6rem)!important;font-weight:300!important;color:var(--ink-2);opacity:1!important;margin-top:10px;letter-spacing:-.005em}
.xs .hero .row{gap:10px}
.xs .pagehero .kick{display:flex;align-items:center;gap:12px;font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);line-height:1.4}
.xs .pagehero .kick::before,.xs .blk>h2.mono::before{content:"";width:28px;height:1px;background:currentColor;flex:none}
.xs .pagehero h1{font-size:clamp(2.6rem,5.4vw,5rem);font-weight:300;text-transform:none;line-height:1.02;margin-top:16px;letter-spacing:-.02em}
.xs .pagehero h1 em{font-style:normal;font-weight:700;color:var(--ink)}

/* badges */
.xs .badge,.xs .eng{display:inline-flex;align-items:center;width:auto;min-height:30px;padding:0 12px;border-radius:99px;border:1px solid var(--line);background:var(--paper);color:var(--ink-2);font-family:var(--f);font-size:12px!important;font-weight:600;letter-spacing:.08em;text-transform:uppercase;border-collapse:separate;white-space:nowrap}
.xs .badge.prem{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.xs .eng{border-color:color-mix(in srgb,var(--go) 45%,var(--line));background:var(--go-soft);color:var(--go-text);white-space:normal;min-height:30px;line-height:1.25;padding:5px 12px}

/* buttons: the original solid .btn becomes the ink primary, .ghost the outline */
.xs .btn{letter-spacing:.02em}
.xs .btn:not(.ghost){background:var(--ink);border-color:var(--ink);color:var(--paper)}
.xs .btn:not(.ghost):hover{background:var(--teal-deep);border-color:var(--teal-deep);color:var(--paper);transform:none}
.xs .btn.ghost{background:transparent;border-color:var(--line);color:var(--ink)}
.xs .btn.ghost:hover{border-color:var(--teal);color:var(--teal)}
.xs .btn[style*="25D366"]{background:var(--go)!important;border-color:var(--go)!important;color:#0B1A06!important}
.xs .vobtn{font-family:var(--f);color:var(--ink);cursor:pointer}
.xs .vobtn.on::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='7' y='7' width='10' height='10' rx='1.5' fill='white'/%3E%3C/svg%3E");background-position:50% 50%}
.xs .vobtn:hover{border-color:var(--teal);color:var(--teal)}

/* ---------- product sections: label column on the left, content on the right */
.xs section.blk{display:grid;grid-template-columns:minmax(180px,250px) minmax(0,1fr);column-gap:clamp(24px,5vw,72px);padding:clamp(40px,6vw,76px) 0;border-bottom:1px solid var(--line);align-items:start}
.xs section.blk>*{grid-column:2;min-width:0}
.xs section.blk>h2.mono{grid-column:1;grid-row:1 / span 12;position:sticky;top:calc(var(--navh) + 24px);display:flex;align-items:flex-start;gap:12px;font-size:12.5px;font-weight:600;letter-spacing:.14em;line-height:1.5;text-transform:uppercase;color:var(--teal)!important;margin:0}
.xs .blk>h2.mono::before{margin-top:.75em}
.xs section.blk>h2.mono+p{font-size:clamp(1.45rem,2.6vw,2.2rem)!important;font-weight:300;line-height:1.18;letter-spacing:-.015em;color:var(--ink);margin-top:0!important;max-width:30ch!important}
.xs section.blk p{color:var(--ink-2)}
.xs section.blk p b{color:var(--ink)}
.xs section.blk ol{max-width:none!important;border-top:1px solid var(--line);margin-top:24px!important;counter-reset:none}
.xs section.blk ol li{border-bottom:1px solid var(--line)!important;padding:16px 0!important;align-items:baseline}
.xs section.blk ol li>span:first-child{color:var(--teal)!important;font-weight:700;font-size:13px!important;letter-spacing:.08em}
.xs section.blk ol li>span+span{font-size:17px!important;color:var(--ink)}
.xs .gal{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:14px;margin-top:0}
.xs .gal img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;border-radius:var(--r);border:0;background:var(--mist-2)}

/* the signal chain and the live demo stay dark panels in both themes: their drawings are light on dark */
.xs .diag,.xs .demo{--faimB:#8DD866;--line:#24302E;--ink:#EEF3F1;background:#0C1514!important;border:1px solid #24302E!important;border-radius:var(--r);padding:clamp(14px,2vw,24px);margin-top:22px;color:#EEF3F1;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.xs .diag{overflow-x:auto;scrollbar-width:thin}
.xs .diag svg{min-width:680px}
.xs .demo canvas{display:block;width:100%;height:auto;max-width:100%;background:#03110a;border-radius:12px;margin-top:10px;touch-action:manipulation}
.xs .demo .row b,.xs .demo .mono{font-size:12.5px;letter-spacing:.12em}
.xs .demo p{color:#C5D0CE!important}

/* interactive lab link: a teal band */
.xs .jarvislink{display:block;margin-top:22px;padding:22px 24px;border-radius:var(--r);background:var(--panel)!important;border:0!important;color:#E7F1F0!important;text-decoration:none;box-shadow:none!important;backdrop-filter:none!important;--faimB:#FFFFFF;transition:transform .3s var(--e-std),box-shadow .3s var(--e-std)}
.xs .jarvislink b{font-size:13px;letter-spacing:.12em}
.xs .jarvislink span{display:block;margin-top:6px;font-size:15px!important;opacity:.9!important}
.xs .jarvislink:hover{transform:translateY(-2px);box-shadow:0 24px 40px -28px var(--shade)!important}

/* related products */
.xs .minirow{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr));gap:14px;margin-top:0}
.xs .mini{position:relative;background:var(--paper)!important;border:1px solid var(--line)!important;border-radius:18px;overflow:hidden;box-shadow:none!important;backdrop-filter:none!important;transition:transform .3s var(--e-std),box-shadow .3s var(--e-std),border-color .3s}
.xs .mini:hover{transform:translateY(-3px);box-shadow:0 18px 34px -22px var(--shade)!important;border-color:color-mix(in srgb,var(--teal) 35%,var(--line))!important}
.xs .mini>a{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--mist-2)}
.xs .mini img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--e-std)}
.xs .mini:hover img{transform:scale(1.05)}
.xs .mini .t{padding:12px 14px 14px;font-size:13.5px;color:var(--muted);line-height:1.35}
.xs .mini .t .code{display:block;font-size:11.5px;font-weight:700;letter-spacing:.1em}
.xs .mini .t b{display:block;font-size:15.5px;margin:2px 0}
.xs .mini .t b a::after{content:"";position:absolute;inset:0}

/* ---------- catalogue */
.xs main.wrap>p:first-child{font-size:clamp(1.03rem,1.25vw,1.2rem);color:var(--ink-2);max-width:68ch;opacity:1!important;margin-top:0!important}
.xs .tools{position:sticky;top:var(--navh);z-index:30;background:color-mix(in srgb,var(--paper) 94%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);margin:20px calc(-1 * var(--gut)) 0;padding:12px var(--gut);border-bottom:1px solid var(--line);transition:top .35s var(--e-in)}
.x-hdr.hide~main .tools,.xs .x-hdr.hide~#main .tools{top:0}
.xs input.search{display:block;width:100%;max-width:440px;min-height:46px;padding:0 16px 0 44px;margin-top:0!important;border:1px solid var(--line);border-radius:99px;background:var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A6867' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E") no-repeat 16px 50%/18px;font-size:15px;color:var(--ink);box-shadow:none;backdrop-filter:none;flex:none;position:static}
.xs input.search:focus{outline:0;border-color:var(--teal);box-shadow:0 0 0 3px color-mix(in srgb,var(--teal) 18%,transparent)}
.xs .filter{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0 0}
.xs .filter button{min-height:40px;padding:0 15px;border-radius:99px;border:1px solid var(--line);background:var(--paper);backdrop-filter:none;color:var(--ink-2);font-size:14px;font-weight:500;white-space:nowrap;transition:background .2s var(--e-std),border-color .2s var(--e-std),color .2s var(--e-std),transform .1s}
.xs .filter button:hover{border-color:var(--teal)}
.xs .filter button:active{transform:scale(.97)}
.xs .filter button.on{background:var(--teal);border-color:var(--teal);color:var(--paper)}
.xs main.wrap>h2.mono{font-size:clamp(1.6rem,3vw,2.6rem)!important;font-weight:300;letter-spacing:-.015em;color:var(--ink)!important;margin-top:clamp(36px,5vw,64px)!important;scroll-margin-top:calc(var(--navh) + 150px)}
.xs .grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:14px;margin-top:20px!important}
.xs .card{position:relative;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--paper);box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;transition:transform .3s var(--e-std),box-shadow .3s var(--e-std),border-color .3s}
.xs .card:hover{transform:translateY(-3px);box-shadow:0 18px 34px -22px var(--shade);border-color:color-mix(in srgb,var(--teal) 35%,var(--line))}
.xs .card>a{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--mist-2)}
.xs .card img.ph{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--e-std)}
.xs .card:hover img.ph{transform:scale(1.05)}
.xs .card .bd{padding:14px 16px 16px;gap:8px;display:flex;flex-direction:column;flex:1}
.xs .card .bd>.row:first-child{gap:6px}
.xs .card .code{font-family:var(--f);font-size:11.5px;font-weight:700;letter-spacing:.1em;color:var(--teal);margin-right:auto}
.xs .card .badge,.xs .card .eng{min-height:24px;padding:0 9px;font-size:10.5px!important;letter-spacing:.06em}
.xs .card h3{font-size:1.15rem;font-weight:700;letter-spacing:-.01em}
.xs .card h3 a{text-decoration:none}
.xs .card p{font-size:14px;color:var(--ink-2);opacity:1;flex:1;line-height:1.45}
.xs .card .bd>.row:last-child{gap:8px;margin-top:4px}
.xs .card .btn{min-height:40px!important;padding:0 16px!important;font-size:13.5px!important}
.xs .card[style*="none"]{display:none!important}

/* ---------- cart */
.xs #cbody{margin-top:28px!important}
.xs table.list{width:100%;border-collapse:collapse;font-size:15px;margin-top:0;border-top:1px solid var(--line)}
.xs table.list th{font-family:var(--f);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);text-align:left;padding:14px 12px;border-bottom:1px solid var(--line)}
.xs table.list td{padding:18px 12px;border-bottom:1px solid var(--line);color:var(--ink-2);vertical-align:middle}
.xs table.list td b{color:var(--ink)}
.xs table.list td.mono{font-weight:700;letter-spacing:.08em;font-size:13px;white-space:nowrap}
.xs table.list tr:hover td{background:var(--mist)}
.xs table.list .btn{min-height:38px!important;padding:0 14px!important;font-size:12.5px!important}
@media(max-width:700px){
  .xs table.list,.xs table.list tbody,.xs table.list tr,.xs table.list td{display:block;width:100%}
  .xs table.list{border-top:0}
  .xs table.list tr:first-child{display:none}
  .xs table.list tr{position:relative;border:1px solid var(--line);border-radius:16px;padding:14px 16px;margin-top:10px}
  .xs table.list td{border:0;padding:2px 0}
  .xs table.list td:first-child{display:none}
  .xs table.list td:last-child{margin-top:10px}
  .xs table.list tr:hover td{background:none}
}

/* ---------- contact */
.xs .steps{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:16px;margin-top:0}
.xs .step{border:0;border-top:2px solid var(--teal);border-radius:0;background:var(--paper);box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;padding:22px 4px;font-size:16px;color:var(--ink-2);overflow-wrap:anywhere}
.xs .step .n{font-family:var(--f);font-size:clamp(1.6rem,2.4vw,2.1rem);font-weight:300;letter-spacing:-.01em;color:var(--teal);margin-bottom:12px}
.xs .step a{font-weight:600}
.xs.pg-contact section.blk,.xs.pg-cart section.blk{display:block;border:0}

/* catalogue / cart / contact intro line under the hero */
.xs .wrap>.row{margin-top:26px!important}
.xs main.wrap>p[style*="font-size:12px"]{font-size:14px!important;color:var(--muted);opacity:1!important}

/* ---------- small screens */
@media(max-width:900px){
  .xs .hero,.xs .pagehero{grid-template-columns:1fr;gap:22px;padding-top:16px}
  .xs .hero>img.bg,.xs .pagehero>img.phbg{order:0;aspect-ratio:16/10}
  .xs section.blk{grid-template-columns:1fr}
  .xs section.blk>*{grid-column:1}
  .xs section.blk>h2.mono{grid-row:auto;position:static;margin-bottom:16px}
}
@media(max-width:760px){
  .xs .filter{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-right:calc(-1 * var(--gutR));padding-right:var(--gutR)}
  .xs .filter::-webkit-scrollbar{display:none}
  .xs input.search{max-width:none}
  .xs .hero .row .btn,.xs .hero .row .vobtn{flex:1 1 auto}
}
@media(max-width:380px){
  .xs .hero h1,.xs .pagehero h1{font-size:2.3rem!important}
  .xs .card .bd>.row:last-child .btn{flex:1}
}
@media(prefers-reduced-motion:reduce){.xs .hero .inner,.xs .pagehero .inner,.xs .hero>img.bg,.xs .pagehero>img.phbg{animation:none}}
/* fixes after first staging pass */
.xs .step a{display:inline;padding:0;min-height:0}
.xs .mini .t b a,.xs .card h3 a{text-decoration:none;color:var(--ink)!important}
@media(max-width:600px){.xs .minirow{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.xs .mini .t{padding:10px 11px 12px}}