/* Art.Industries S: what S takes from Q, on top of R (M's type and layout). */

/* 1 · Scroll reveals */
.js-s .s-rv{opacity:0;transform:translateY(24px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0ms)}
.js-s .s-rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js-s .s-rv{opacity:1;transform:none;transition:none}}

/* 2 · Interface illustrations in place of the grey placeholders */
.pf-shot.ill{display:flex;align-items:center;justify-content:center;aspect-ratio:auto;min-height:clamp(300px,30vw,420px);padding:clamp(20px,3vw,48px);border-radius:6px;background:#CBE2F2;overflow:hidden}
.pf-row:nth-of-type(even) .pf-shot.ill{background:#DFE49F}
.pf-shot.ill>.ui,.pf-shot.ill>.stack{width:min(410px,100%);transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.pf-row:hover .pf-shot.ill>.ui,.pf-row:hover .pf-shot.ill>.stack{transform:translateY(-6px)}
@media (prefers-reduced-motion:reduce){.pf-row:hover .pf-shot.ill>.ui,.pf-row:hover .pf-shot.ill>.stack{transform:none}}
@media (max-width:800px){.pf-shot.ill{min-height:0;padding:20px}}

/* 3 · Hero: email field under the buttons, live activity window over the painting */
.s-join{display:flex;max-width:440px;margin-top:22px;border:1px solid #E0E0E0;border-radius:6px;background:#fff;overflow:hidden}
.s-join:focus-within{border-color:#111}
.s-join input{flex:1;min-width:0;border:0;padding:13px 14px;font:inherit;font-size:14px;color:#111;background:transparent;outline:none}
.s-join input::placeholder{color:#8B8B90}
.s-join button{display:inline-flex;align-items:center;gap:14px;border:0;margin:4px;padding:9px 14px;border-radius:4px;background:#111;color:#fff;font:500 14px 'Geist',sans-serif;cursor:pointer}
.s-join button:hover{background:#333}
.s-join-done{margin-top:22px;font-size:14px;color:#111}
.closing .s-join{border-color:#5F5F63;background:transparent}
.closing .s-join:focus-within{border-color:#fff}
.closing .s-join input{color:#fff}
.closing .s-join button{background:#fff;color:#111}
.closing .s-join button:hover{background:#EBF14D}
.closing .s-join-done{color:#fff}
.s-window{position:absolute;left:0;top:clamp(40px,6vw,88px);width:min(360px,72%);z-index:2;border-radius:6px;background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:0 1px 2px rgba(0,0,0,.05),0 30px 60px -30px rgba(30,40,90,.35);overflow:hidden;font-size:13px;line-height:1.35}
.s-window-h{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid rgba(17,17,17,.06)}
.s-window-h b{font-weight:600}
.s-window-h span{display:flex;align-items:center;gap:7px;color:#5F5F63}
.s-window-h span:before{content:'';width:7px;height:7px;border-radius:50%;background:#00B49B;animation:s-pulse 2s ease-in-out infinite}
@keyframes s-pulse{50%{opacity:.35}}
.s-feed{position:relative;height:300px;padding:8px;overflow:hidden}
.s-note{position:absolute;left:8px;right:8px;display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:12px;align-items:center;padding:9px 11px;border-radius:6px;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.05),0 8px 20px -14px rgba(0,0,0,.3);transition:transform .9s cubic-bezier(.2,.7,.2,1),opacity .7s cubic-bezier(.2,.7,.2,1)}
.s-note figure{width:40px;height:40px!important;min-height:0!important;margin:0;border-radius:4px;background:#F2F2F2;display:flex;align-items:center;justify-content:center;padding:5px}
.s-note img{max-width:100%;max-height:100%;object-fit:contain}
.s-note b{display:block;font-weight:600}
.s-note small{display:block;color:#5F5F63;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.s-note time{align-self:start;font:11px 'Geist Mono',monospace;color:#5F5F63}
@media (prefers-reduced-motion:reduce){.s-window-h span:before{animation:none}.s-note{transition:none}}
@media (max-width:800px){.s-window{width:min(320px,86%);top:24px}.s-feed{height:240px}}

/* 4 · "Built around your catalogue": pale blue section (#CBE2F2, a tint of soft blue) with white cards, in M's type */
.s-night{background:#CBE2F2;color:#111}
.s-night h2,.s-night h2 em{color:#111}
.s-night p{color:#5F5F63}
/* pieces inside the cards, from Q */
.s-night .arrow{display:inline-block;transition:transform .35s var(--ease)}
.s-night a:hover .arrow.ne{transform:translate(3px,-3px)}
.s-night .ui{background:#fff;border-radius:6px;box-shadow:0 1px 2px rgba(0,0,0,.06),0 18px 40px -18px rgba(0,0,0,.28);color:var(--ink);font-size:13px;line-height:1.4}
.s-night .ui-h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-bottom:1px solid var(--line)}
.s-night .ui-h b{font-weight:600;font-size:13px}
.s-night .chip{display:inline-flex;align-items:center;gap:6px;padding:2px 8px;border-radius:4px;font-family:var(--mono);font-size:11px;letter-spacing:.04em;text-transform:uppercase;background:var(--t,var(--green-t));color:var(--c,var(--green-d));white-space:nowrap}
.s-night .rows{padding:4px 14px 10px}
.s-night .rows div{display:flex;justify-content:space-between;gap:16px;padding:7px 0;border-bottom:1px solid #F2F2F2}
.s-night .rows div:last-child{border-bottom:0}
.s-night .rows dt{color:var(--muted)}
.s-night .rows dd{text-align:right;font-variant-numeric:tabular-nums}
.s-night .site{width:min(380px,100%)}
.s-night .site .ui-h{gap:6px;justify-content:flex-start}
.s-night .site .ui-h i{width:8px;height:8px;border-radius:50%;background:#E0E0E0}
.s-night .site .ui-h span{margin-left:10px;font-family:var(--mono);font-size:11px;color:var(--muted)}
.s-night .site-body{padding:14px}
.s-night .site-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.s-night .site-grid figure{aspect-ratio:1/1.15;border-radius:6px;background:var(--grey);display:flex;align-items:flex-end;justify-content:center;padding:8px}
.s-night .site-grid img{max-height:100%;object-fit:contain}
.s-night .site-grid figcaption{font-size:11px;color:var(--muted);margin-top:6px}
.s-night .stat{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
.s-night .stat div{padding:12px 14px;border-right:1px solid var(--line)}
.s-night .stat div:last-child{border-right:0}
.s-night .stat b{display:block;font-size:20px;font-weight:500;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.s-night .stat span{font-size:11px;color:var(--muted)}
.s-night .subj{padding:14px}
.s-night .subj small{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.s-night .sale{display:grid;grid-template-columns:110px 1fr;gap:14px;padding:14px;align-items:center}
.s-night .sale figure{aspect-ratio:1;border-radius:6px;background:var(--grey);display:flex;align-items:center;justify-content:center;padding:8px}
.s-night .ticket{display:grid;grid-template-columns:1fr 92px;width:min(360px,100%);overflow:hidden}
.s-night .ticket .tl{padding:16px;border-right:1px dashed #d9d9d9}
.s-night .ticket .tl small{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.s-night .ticket .tl b{display:block;font-size:17px;font-weight:600;letter-spacing:-.01em;margin:6px 0 10px}
.s-night .ticket .tr{display:flex;align-items:center;justify-content:center;padding:12px}
.s-night .qr{width:60px;height:60px;background:
  conic-gradient(from 90deg at 30% 30%,#111 25%,transparent 0) 0 0/12px 12px,
  linear-gradient(#111,#111) 0 0/18px 18px no-repeat,linear-gradient(#111,#111) 100% 0/18px 18px no-repeat,linear-gradient(#111,#111) 0 100%/18px 18px no-repeat;opacity:.9}
.s-night .th{aspect-ratio:1;border-radius:6px;background:var(--grey);display:flex;align-items:center;justify-content:center;padding:8px}
.s-night .th img{max-height:100%;object-fit:contain}
.s-night .th{aspect-ratio:1;border-radius:6px;background:var(--grey);display:flex;align-items:center;justify-content:center;padding:8px}
.s-night .th img{max-height:100%;object-fit:contain}
.s-night .box .stagepiece{margin-top:auto;display:flex;justify-content:center;align-items:flex-end;padding:8px 0 0}
.s-night .box .stagepiece .ui{border-radius:6px 12px 0 0;box-shadow:0 1px 2px rgba(0,0,0,.05),0 -10px 30px -18px rgba(0,0,0,.25)}
.s-night .box .wide{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start;flex:1}
.s-night .box .wide>div:first-child{padding-bottom:30px}
.s-night .box .wide .stagepiece{align-self:end;height:100%}
.s-night .box .wide .stagepiece{padding-top:0}
.s-night .fan{position:relative;width:min(380px,100%);height:176px}
.s-night .fan .ui{position:absolute;left:0;right:0;padding:12px 14px;border-radius:6px;font-size:13px;transition:transform .6s var(--ease)}
.s-night .fan .ui b{display:block;font-weight:600;font-size:14px}
.s-night .fan .ui small{display:block;color:var(--muted);font-size:12px;margin-top:2px}
.s-night .fan .f1{top:0;transform:scale(.9);color:var(--red-d)}
.s-night .fan .f2{top:56px;transform:scale(.95);color:#7a6a00}
.s-night .fan .f3{top:112px;color:var(--green-d)}
.s-night .fan .f1 b,.s-night .fan .f2 b,.s-night .fan .f3 b{color:inherit}
.s-night .box:hover .fan .f1{transform:scale(.9) translateY(-6px)}
.s-night .box:hover .fan .f2{transform:scale(.95) translateY(-3px)}
@media (max-width:1100px){.s-night .box .wide{grid-template-columns:1fr}}
@media (max-width:900px){.s-night .bento{grid-template-columns:1fr}.s-night .box{grid-column:auto;padding:24px 22px 0}}
@media (max-width:560px){.s-night .sale{grid-template-columns:84px 1fr}}

.s-night .bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.s-night .box{grid-column:span var(--s,3);display:flex;flex-direction:column;gap:22px;min-width:0;padding:30px 30px 0;border-radius:6px;background:#fff;color:#111;overflow:hidden}
.s-night .box h3{font-size:clamp(20px,1.67vw,24px);font-weight:600;letter-spacing:-.022em;line-height:1.2;color:#111}
.s-night .box p.d{margin-top:10px;font-size:16px;line-height:1.5;color:#5F5F63;max-width:36em}
.s-night .box .link{display:inline-flex;align-items:center;gap:10px;margin-top:16px;font-size:14px;font-weight:500;color:#111;border-bottom:1px solid currentColor;padding-bottom:2px}
@media (max-width:900px){.s-night .bento{grid-template-columns:minmax(0,1fr)}.s-night .box{grid-column:auto;padding:24px 22px 0}}

/* 5 · Menu: Q's header and mega menu on M's markup. "Missing something?" keeps M's design
   (no grey card, title in the section colour, section colour around the fields when open). */
.site-header{padding:12px var(--gutter)!important;background:rgba(255,255,255,.94)!important}
.site-header>a:first-child{gap:9px!important;font-size:23px!important}
.site-header>a:first-child img{width:23px!important;height:23px!important}
@media (min-width:901px){
  .nav{gap:2px;font-size:15px!important}
  .nav-trigger{gap:8px!important;padding:8px 14px!important;border-radius:8px;transition:background-color .25s cubic-bezier(.2,.7,.1,1)}
  .nav-trigger:after,.nav>a.nav-link:after{display:none!important}
  .nav-trigger:hover,.nav-trigger[aria-expanded=true]{background:#F2F2F2}
  .nav>a.nav-link{padding:8px 14px;border-radius:8px;transition:background-color .25s cubic-bezier(.2,.7,.1,1)}
  .nav>a.nav-link:hover,.nav>a.nav-link[aria-current=page],.f-pricing .nav>a.nav-link{background:#F2F2F2}
  .nav .nav-cta{min-height:40px;margin-left:10px!important;padding:0 16px!important;border-radius:6px;font-size:14px}
  .mega{border-top:0!important;box-shadow:0 30px 60px -30px rgba(0,0,0,.25);transform:translateY(-8px);transition:opacity .3s cubic-bezier(.2,.7,.1,1),transform .4s cubic-bezier(.2,.7,.1,1),visibility 0s linear .4s}
  .mega.is-open{transform:none;transition-delay:0s}
  .mega-inner{gap:5%!important;padding:36px var(--gutter) 40px!important}
  .mega-grid{gap:4px!important;column-gap:4px!important}
  .mega-item{padding:14px 16px 16px!important;border-top:0!important;border-radius:6px;transition:background-color .25s cubic-bezier(.2,.7,.1,1)}
  .mega-item:hover,.mega-item:focus-visible{background:#F2F2F2}
  .mega-item[aria-current=page]{background:#F2F2F2;box-shadow:none!important;border-top:0!important}
  .mega-item[aria-current=page] .mega-title{color:var(--mega-accent)}
  .mega-item[aria-current=page] .mega-title .arrow{opacity:1;transform:none}
  .mega-item[aria-current=page]:before,.mega-item[aria-current=page]:after{display:none!important}
  .mega-title{font-weight:500!important;letter-spacing:-.01em!important}
  .mega-title .arrow{opacity:0;transform:translate(-4px,4px)}
  .mega-item:hover .mega-title .arrow,.mega-item:focus-visible .mega-title .arrow{opacity:1;transform:none}
  .mega-desc{margin-top:4px!important;font-size:14px;line-height:1.45}
  .mega-item.is-soon{cursor:default}
  .mega-item.is-soon:hover{background:none}
  .mega-item.is-soon .mega-title{color:#5F5F63}
  .mega-soon{display:inline-block!important;margin-top:8px!important;padding:2px 8px;border-radius:4px;background:#F2F2F2;font-family:'Geist Mono',monospace!important;font-style:normal!important;font-size:11px!important;letter-spacing:.06em!important;text-transform:uppercase;color:#5F5F63!important}
}
@media (prefers-reduced-motion:reduce){.mega{transition:none!important;transform:none!important}}

/* 6 · Plans: a soft grey card behind each plan, and "Estimate your price" in each column */
.f-pricing .plan{background:#F2F2F2;border-radius:6px;padding:28px 26px 30px!important;border:0!important}
.f-pricing .plans{grid-template-rows:repeat(6,auto);gap:12px;border:0!important}
.f-pricing .plan{grid-row:span 6}
@media (max-width:900px){.f-pricing .plans{grid-template-rows:none}.f-pricing .plan{grid-row:auto}}
.s-pick{display:inline-flex;align-items:center;justify-content:space-between;gap:14px;margin:4px 0 22px;min-height:42px;padding:0 14px;border:0;border-radius:6px;background:#fff;color:#111;font:500 14px 'Geist',sans-serif;cursor:pointer;box-shadow:inset 0 0 0 1px #E0E0E0;transition:box-shadow .25s ease}
.s-pick:hover{box-shadow:inset 0 0 0 1px #111}
#estimate-wrap{scroll-margin-top:84px}

/* 7 · Inventory: Q's schema list with thumbnails (M's pop-up stays), Q's structure cards */
.s-ind{display:grid!important;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:16px!important;min-height:0!important;padding:10px 0!important;font-family:inherit!important;font-size:16px!important;font-weight:500!important;letter-spacing:-.01em!important;text-transform:none!important}
.s-ind .s-th{order:0;width:48px;height:48px;margin:0;border-radius:6px;background:#F2F2F2;display:flex;align-items:center;justify-content:center;padding:6px;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.s-ind .s-th img{max-width:100%;max-height:100%;object-fit:contain}
.s-ind span{order:1}
.s-ind i{order:2;font-style:normal;font-size:20px;font-weight:400}
.s-ind:hover .s-th{transform:scale(1.06)}
@media (prefers-reduced-motion:reduce){.s-ind:hover .s-th{transform:none}}

.f-inventory #structures{background:#F2F2F2}
.f-inventory .structs{gap:12px;border-top:0!important}
.f-inventory .struct{padding:0 0 26px!important;border:0!important;border-radius:6px;background:#fff;overflow:hidden;min-width:0}
.f-inventory .struct>.ill{height:210px;margin:0 0 20px;padding:18px;display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,#F2F2F2,#F2F2F2)}
.f-inventory .struct>.ill .ui{width:100%}
.f-inventory .struct>:not(.ill){margin-left:24px;margin-right:24px}
@media (max-width:1100px){.f-inventory .struct:nth-child(n){padding:0 0 26px!important;border:0!important}}
@media (max-width:640px){.f-inventory .struct{display:flex!important;flex-direction:column}.f-inventory .struct>.ill{height:190px}}
.ill .copies{display:grid;grid-template-columns:repeat(6,1fr);gap:5px;padding:12px}
.ill .copies span{display:flex;align-items:center;justify-content:center;height:24px;border-radius:4px;font-family:var(--mono,'Geist Mono',monospace);font-size:11px;background:var(--green-t);color:var(--green-d)}
.ill .copies .r{background:var(--yellow-t);color:#111111}
.ill .copies .c{background:var(--blue-t);color:var(--blue)}
.ill .copies .s{background:#E0E0E0;color:#8B8B90}
.ill .legend{display:flex;flex-wrap:wrap;gap:10px;padding:0 12px 12px;font-size:11px;color:var(--muted)}
.ill .legend i{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:5px}
.ill .bars{padding:10px 14px 14px;display:flex;flex-direction:column;gap:10px}
.ill .bars div{font-size:12px}
.ill .bars div p{display:flex;justify-content:space-between;margin-bottom:4px}
.ill .bars div b{display:block;height:6px;border-radius:3px;background:var(--ink);width:var(--w)}
.ill .vars{width:100%;border-collapse:collapse;font-size:12px}
.ill .vars th,.ill .vars td{padding:7px 10px;border-bottom:1px solid #F2F2F2;text-align:center;font-weight:400;font-variant-numeric:tabular-nums}
.ill .vars th:first-child,.ill .vars td:first-child{text-align:left;color:var(--muted)}
.ill .sale{display:grid;grid-template-columns:110px 1fr;gap:14px;padding:14px;align-items:center}
.ill .sale figure{aspect-ratio:1;border-radius:6px;background:var(--grey);display:flex;align-items:center;justify-content:center;padding:8px}
.ill .bars div p{font-size:12px!important;line-height:1.3!important;margin:0 0 4px!important;color:#111}
.ill .ui p,.ill .ui dd,.ill .ui dt{font-size:inherit}

/* 8 · Inventory page: dark sections, one-column schema list, object images on the language cards */
.s-dark{background:#111!important;color:#fff}
.s-dark h2,.s-dark h3:not(.lcard h3){color:#fff}
.s-dark>.wrap>.two p,.s-dark .s-intro p{color:#8B8B90}
.s-intro{display:grid;grid-template-columns:1fr 1fr;gap:9%;align-items:start}
.s-intro p{font-size:clamp(17px,1.4vw,20px);line-height:1.5}
@media (max-width:900px){.s-intro{grid-template-columns:minmax(0,1fr);gap:20px}}
.f-inventory .inds{grid-template-columns:minmax(0,1fr)!important}
.s-dark .langs button{background:transparent!important;color:#fff!important;border-color:#5F5F63!important}
.s-dark .langs button:hover{border-color:#fff!important}
.s-dark .langs button[aria-pressed=true]{background:#fff!important;color:#111!important;border-color:#fff!important}
.s-dark .lcard{border-color:#5F5F63!important;border-radius:6px;overflow:hidden}
.s-dark .lcard h3{color:#111}
.lcard .s-art{display:flex;align-items:center;justify-content:center;aspect-ratio:4/5;padding:28px;background:linear-gradient(160deg,#F2F2F2,#F2F2F2)}
.lcard .s-art img{max-width:100%;max-height:100%;object-fit:contain;filter:drop-shadow(0 16px 14px rgba(0,0,0,.12))}
@media (max-width:640px){.lcard .s-art{aspect-ratio:4/3}}

/* 9 · Section labels: a small square instead of the long line */
.label.rule:before,.label.rule-draw:before,.mega-intro .label:before{width:8px!important;height:8px!important;border-radius:10%!important;transform:none!important}
.label.rule,.label.rule-draw,.mega-intro .label{gap:12px!important}
.s-dark .lcard p{color:#5F5F63!important}
.s-dark .lcard .label{color:#8B8B90!important}

/* 10 · Palette (option 5, 9 Oct 2026): compare pages use violet as their accent; small coloured text uses the deeper shades */
.page{--green-text:#0177AC;--red-text:#E5011A}
html.f-compare .page,html.f-overview .page{--accent:#7049CA}
/* text on the new light colours is black (palette rule); only ultramarine keeps white text */
#story{color:#111!important;background-color:#9AC4E0!important}
#story *{color:inherit!important}
.band[style*="#F14E46"],.band[style*="#00B49B"],#audience.band,#audience.band *{color:#111!important}
.p-bar,.p-bar span,.p-bar small{color:#111!important}
.total{color:var(--pc-ink,#fff)!important}
.total .lines,.total .lines>div{border-color:color-mix(in srgb,var(--pc-ink,#fff) 30%,transparent)!important}
.total *:not(a):not(button){color:inherit}
.f-pricing .seg-2[aria-pressed=true],.f-pricing .seg-3[aria-pressed=true]{color:#111!important}
.f-pricing .seg-2[aria-pressed=true] *,.f-pricing .seg-3[aria-pressed=true] *{color:#111!important}
.matrix td:nth-child(4) .tick:after,.matrix td:nth-child(3) .tick:after{border-color:#111!important}

/* 11 · Integrations: a line in each palette colour above each partner */
#integrations .integration:before{height:3px!important;background:var(--lc,#E0E0E0)!important}
#integrations .integration:nth-child(1){--lc:#2D46C8}
#integrations .integration:nth-child(2){--lc:#00B49B}
#integrations .integration:nth-child(3){--lc:#F14E46}
#integrations .integration:nth-child(4){--lc:#9B86E6}
#integrations .integration:nth-child(5){--lc:#9AC4E0}
#integrations .integration:nth-child(6){--lc:#EBF14D}

/* 12 · "Built around your catalogue", v2: the product at a glance. Big illustrations, one line of text,
   Catalogue leads, and each card has a slow loop while it is on screen. */
.bento2{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:auto;gap:12px}
.b2{display:flex;flex-direction:column;min-width:0;border-radius:6px;background:#fff;overflow:hidden;transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s cubic-bezier(.2,.7,.2,1)}
.b2-lead{grid-column:span 2;grid-row:span 2}
.b2-t{padding:26px 28px 0}
.b2-t h3{font-size:clamp(20px,1.67vw,24px);font-weight:600;letter-spacing:-.022em;line-height:1.2;color:#111}
.b2-t p{margin-top:8px!important;font-size:15px;line-height:1.45;color:#5F5F63!important;max-width:30em}
.b2-t .link{display:inline-flex;align-items:center;gap:10px;margin-top:12px;font-size:14px;font-weight:500;color:#111;border-bottom:1px solid currentColor;padding-bottom:2px}
.b2-ill{flex:1;display:flex;align-items:center;justify-content:center;margin:22px 0 0;padding:24px 28px 28px;min-height:280px;background:linear-gradient(160deg,#F4F8FB 0%,#E8F1F7 100%)}
.b2:nth-child(3) .b2-ill,.b2:nth-child(5) .b2-ill{background:linear-gradient(160deg,#FAFBEA 0%,#F1F4D2 100%)}
.b2-lead .b2-ill{padding:40px}
.b2 .ui{width:min(100%,420px)}
@media (hover:hover){.b2:hover{transform:translateY(-4px);box-shadow:0 18px 40px -24px rgba(30,40,90,.35)}.b2:hover .ui,.b2:hover .b2-feed{transform:translateY(-4px)}}
.b2 .ui,.b2 .b2-feed{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
/* lead record */
.rec-big{width:min(100%,560px)!important}
.rec-big .rec-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:20px;padding:18px}
.rec-img{margin:0;aspect-ratio:4/5;border-radius:6px;background:#F2F2F2;display:flex;align-items:center;justify-content:center;padding:18px}
.rec-img img{max-height:100%;object-fit:contain;filter:drop-shadow(0 14px 12px rgba(0,0,0,.12))}
.rec-big .rows{padding:0!important;align-self:center}
.rec-big .rows div{padding:9px 0!important}
.chip[data-cycle],[data-cycle="loc"],[data-cycle="paid"],[data-cycle="due"],[data-cycle="inst"],[data-cycle="paystat"]{transition:opacity .35s ease,background-color .35s ease,color .35s ease}
.is-swap{opacity:0!important}
/* website */
.b2 .site .site-grid figure{aspect-ratio:1/1.2}
.b2 .site .site-grid img{transition:opacity .45s ease}
/* sell feed */
.b2-feed{position:relative;width:min(100%,380px);height:220px;overflow:hidden}
.b2-feed .s-note{left:0;right:0}
/* invoice */
.inv .rows{padding:6px 14px 4px!important}
.inv-bar{height:6px;margin:6px 14px 0;border-radius:3px;background:#F2F2F2;overflow:hidden}
.inv-bar i{display:block;height:100%;width:var(--w);background:#2D46C8;border-radius:3px;transition:width .9s cubic-bezier(.2,.7,.2,1)}
.inv-note{margin:8px 14px 14px!important;font:11px 'Geist Mono',monospace;letter-spacing:.04em;color:#5F5F63}
/* campaign */
.camp-art{margin:14px 14px 0;aspect-ratio:16/8;border-radius:6px;background:#F2F2F2;display:flex;align-items:center;justify-content:center;overflow:hidden}
.camp-art img{height:88%;object-fit:contain}
.camp-stats{display:grid;grid-template-columns:repeat(3,1fr);margin-top:14px;border-top:1px solid #F2F2F2}
.camp-stats div{padding:12px 14px}
.camp-stats div+div{border-left:1px solid #F2F2F2}
.camp-stats b{display:block;font-size:22px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.camp-stats small{font-size:12px;color:#5F5F63}
/* tickets */
.tix-body{display:grid;grid-template-columns:96px 1fr;gap:18px;align-items:center;padding:18px}
.tix-body .qr{width:96px;height:96px;background:
  conic-gradient(from 90deg at 30% 30%,#111 25%,transparent 0) 0 0/24px 24px,
  linear-gradient(#111 0 0) 4px 4px/22px 22px no-repeat,linear-gradient(#111 0 0) 70px 4px/22px 22px no-repeat,linear-gradient(#111 0 0) 4px 70px/22px 22px no-repeat;border-radius:4px}
.tix-n{font-size:30px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.tix-n span{font-size:16px;font-weight:400;color:#5F5F63}
.tix-body small{display:block;font-size:12px;color:#5F5F63;margin:2px 0 10px}
.tix-body .inv-bar{margin:0}
.tix-body .inv-bar i{background:#00B49B}
.flash{animation:s-flash .6s ease}
@keyframes s-flash{0%{color:#018472}100%{color:inherit}}
@media (max-width:900px){.bento2{grid-template-columns:minmax(0,1fr)}.b2-lead{grid-column:auto;grid-row:auto}.rec-big .rec-body{grid-template-columns:minmax(0,.8fr) minmax(0,1fr)}.b2-ill{min-height:0;padding:20px}.b2-lead .b2-ill{padding:20px}}
@media (prefers-reduced-motion:reduce){.b2,.b2 *{transition:none!important;animation:none!important}}
.b2 .tix-n{font-size:30px!important;line-height:1.1!important;color:#111!important}
.b2 .tix-n span{font-size:16px!important;color:#5F5F63!important}
.rec-big{width:min(100%,620px)!important}
@media (max-width:600px){.rec-big .rec-body{grid-template-columns:minmax(0,1fr)}.rec-img{aspect-ratio:4/3}}
/* v3: full text back, and cards that stand clearly apart from the pale blue section */
.b2-t p{max-width:36em}
.b2-ill,.b2:nth-child(3) .b2-ill,.b2:nth-child(5) .b2-ill{background:#F2F2F2!important;margin:22px 12px 12px;border-radius:4px}
.b2-lead .b2-ill{margin:22px 12px 12px}
/* v4: original card sizes (4 · 2 / 2 · 4 / 3 · 3), whole card in warm grey, illustrations sit directly on it */
.bento2{grid-template-columns:repeat(6,minmax(0,1fr))!important}
.bento2 .b2{grid-column:span 3;grid-row:auto;background:#F2F2F2}
.bento2 .b2:nth-child(1),.bento2 .b2:nth-child(4){grid-column:span 4}
.bento2 .b2:nth-child(2),.bento2 .b2:nth-child(3){grid-column:span 2}
.bento2 .b2:nth-child(1),.bento2 .b2:nth-child(4){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:stretch}
.bento2 .b2:nth-child(1) .b2-t,.bento2 .b2:nth-child(4) .b2-t{padding:30px 0 30px 30px}
.bento2 .b2-ill,.bento2 .b2:nth-child(3) .b2-ill,.bento2 .b2:nth-child(5) .b2-ill{background:none!important;margin:0!important;border-radius:0;min-height:0;padding:22px 28px 28px}
.bento2 .b2:nth-child(1) .b2-ill,.bento2 .b2:nth-child(4) .b2-ill{padding:30px}
.bento2 .rec-big{width:100%!important}
.bento2 .rec-body{grid-template-columns:minmax(0,.85fr) minmax(0,1fr);gap:16px;padding:14px}
.bento2 .rec-img{aspect-ratio:3/4;padding:12px}
.bento2 .rec-big .rows div{padding:7px 0!important}
.bento2 .ui{box-shadow:0 1px 2px rgba(0,0,0,.05),0 18px 40px -22px rgba(0,0,0,.28)}
@media (max-width:1100px){.bento2 .b2:nth-child(1),.bento2 .b2:nth-child(4){grid-template-columns:minmax(0,1fr)}.bento2 .b2:nth-child(1) .b2-t,.bento2 .b2:nth-child(4) .b2-t{padding:26px 28px 0}}
@media (max-width:900px){.bento2{grid-template-columns:minmax(0,1fr)!important}.bento2 .b2:nth-child(n){grid-column:auto}}
@media (max-width:600px){.bento2 .rec-body{grid-template-columns:minmax(0,1fr)}.bento2 .rec-img{aspect-ratio:4/3}}
/* v5: row 1 halves (Catalogue | Website), row 2 narrow + wide (Sell | Invoices), row 3 wide + narrow (Email | Events) */
.bento2 .b2:nth-child(1){grid-column:span 3;display:flex;flex-direction:column}
.bento2 .b2:nth-child(1) .b2-t{padding:26px 28px 0}
.bento2 .b2:nth-child(1) .b2-ill{padding:22px 28px 28px}
.bento2 .b2:nth-child(2){grid-column:span 3}
.bento2 .b2:nth-child(5){grid-column:span 4;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:stretch}
.bento2 .b2:nth-child(5) .b2-t{padding:30px 0 30px 30px}
.bento2 .b2:nth-child(5) .b2-ill{padding:30px}
.bento2 .b2:nth-child(6){grid-column:span 2}
@media (max-width:1100px){.bento2 .b2:nth-child(5){grid-template-columns:minmax(0,1fr)}.bento2 .b2:nth-child(5) .b2-t{padding:26px 28px 0}}
@media (max-width:900px){.bento2 .b2:nth-child(n){grid-column:auto}}
/* v6: white cards; the illustrations get a fine outline and a soft shadow so they still read as their own objects */
.bento2 .b2{background:#fff!important}
.bento2 .ui,.bento2 .s-note{border:1px solid #E3E3E1;box-shadow:0 1px 2px rgba(0,0,0,.04),0 22px 44px -26px rgba(30,40,90,.38)!important}
.bento2 .ui .ui-h{background:#FFFFFF}
/* v7: no shadows on the illustrations, outline only */
.bento2 .ui,.bento2 .s-note{box-shadow:none!important}
.bento2 .rec-img img{filter:none}
/* v8: illustrations rise from the bottom edge of the card and are cropped by it */
.bento2 .b2-ill,.bento2 .b2:nth-child(n) .b2-ill{align-items:flex-end;padding-bottom:0!important;overflow:hidden}
.bento2 .b2-ill>.ui,.bento2 .b2-ill>.b2-feed{margin-bottom:-28px;border-bottom:0;border-radius:6px 6px 0 0}
.bento2 .b2-ill>.ui{padding-bottom:28px}
.bento2 .b2-feed{height:248px}
@media (hover:hover){.bento2 .b2:hover .ui,.bento2 .b2:hover .b2-feed{transform:translateY(-8px)}}

/* 13 · Menu: no grey highlights. The open/current item gets a line underneath and the section colour; menu items change colour on hover */
@media (min-width:901px){
  .nav-trigger,.nav>a.nav-link{background:none!important}
  .nav-trigger:after,.nav>a.nav-link:after{display:block!important;content:'';position:absolute;bottom:4px;left:14px;right:14px;height:1.5px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .35s cubic-bezier(.2,.7,.1,1)}
  .nav-trigger:hover:after,.nav-trigger[aria-expanded=true]:after,.nav>a.nav-link:hover:after,.nav>a.nav-link[aria-current=page]:after,.f-pricing .nav>a.nav-link:after{transform:scaleX(1);transform-origin:left}
  .nav-trigger[aria-controls=mega-platform][aria-expanded=true],.f-platform .nav-trigger[aria-controls=mega-platform],.f-inventory .nav-trigger[aria-controls=mega-platform]{color:#0177AC}
  .nav-trigger[aria-controls=mega-solutions][aria-expanded=true],.f-industry .nav-trigger[aria-controls=mega-solutions]{color:#E5011A}
  .nav-trigger[aria-controls=mega-compare][aria-expanded=true],.f-compare .nav-trigger[aria-controls=mega-compare],.f-overview .nav-trigger[aria-controls=mega-compare]{color:#7049CA}
  .nav>a.nav-link{position:relative}
  .mega-item,.mega-item:hover,.mega-item:focus-visible,.mega-item[aria-current=page]{background:none!important}
  .mega-item:hover .mega-title,.mega-item:focus-visible .mega-title,.mega-item[aria-current=page] .mega-title{color:var(--mega-accent)}
}

/* 14 · Colour rules (9 Oct 2026): black text on every Base and Light fill, except Ultramarine (white).
   Dark values are for small coloured text on white or grey. Yellow lime is never text. */
.closing .label.rule-draw:before{background:var(--sq,currentColor)!important}
.status{color:#111!important}
.status[style*="#2D46C8"]{color:#fff!important}
.wl.green,.wl.red{--wl-ink:#111!important;--wl-soft:rgba(17,17,17,.7)!important;--wl-field-line:#111!important}
.wl.green .wl-done,.wl.red .wl-done{border-color:#111!important}
.f-overview .hub-core,.f-overview a.hub-sat.is-link:hover,.f-overview a.hub-sat.is-link:focus-visible,.f-overview .kits-name{background:#9B86E6!important;color:#111!important}
.f-overview .hub-core *,.f-overview .kits-name *{color:inherit!important}
.f-pricing .stepper button:hover:not(:disabled){color:var(--pc-ink,#111)!important}
.f-overview .kit.is-link .kit-tile{background:#9B86E6!important}
.f-overview .kit.is-link .kit-tile svg{stroke:#111!important}

/* 15 · Platform is soft blue (10 Oct): Platform pages use soft blue Base for their section fills and soft blue Vivid for text.
   Greens that mean "done / paid / live" (status dots, chips in illustrations) stay ocean mist. */
html.f-platform .page,html.f-inventory .page{--green:#9AC4E0}
html.f-platform .p-bar,html.f-inventory .p-bar{background:#9AC4E0!important;border-color:#9AC4E0!important}