/* Art.Industries · Version T colour system (10 Oct 2026): S with two colour layers. Loaded after s.css on every page.
   UI layer: white, greys, black and ONE accent, ocean mist, with a smooth scale.
     Not blue, so calls to action don't read as Artlogic. Buttons are ocean mist with black text
     and turn yellow lime on hover. Coloured text (links, hovers, "you are here") uses #018472.
   Brand layer: the six palette colours exactly as they are, only as flat blocks.
     Bands that carry running text use only the light colours (soft blue, yellow lime);
     red, violet and ocean mist stay in blocks with little or no text. */

:root{
  /* UI accent: ocean mist, only the values on the palette chart (Light, Base, Vivid) */
  --a-light:#ACEEDE;--a400:#00B49B;--a600:#018472;
  --hover:#EBF14D;
  /* UI greys */
  --g50:#F2F2F2;--g100:#F2F2F2;--g200:#E0E0E0;--g400:#8B8B90;--g500:#8B8B90;--g600:#5F5F63;--g900:#111111;
  /* Brand layer: flat only, never tinted, never as text */
  --b-ultra:#2D46C8;--b-red:#F14E46;--b-ocean:#00B49B;--b-violet:#9B86E6;--b-soft:#9AC4E0;--b-lime:#EBF14D;
}
html.tl .page{--accent:var(--a600);--green:#00B49B;--green-text:#111;--red-text:#111}
html.tl ::selection{background:var(--a-light);color:#111}

/* ── UI LAYER ───────────────────────────────────────────── */

/* focus */
html.tl .page a:focus-visible,html.tl .page button:focus-visible,html.tl .page summary:focus-visible{outline:2px solid var(--a600);outline-offset:3px}
html.tl .closing a:focus-visible,html.tl .closing button:focus-visible{outline-color:var(--a400)}

/* buttons: ocean mist with black text, yellow lime on hover */
html.tl .button,html.tl .nav .nav-cta,html.tl .s-join button,html.tl .p-bar a,html.tl .mega-ask-row button,html.tl .ask-row button,html.tl main.wl .wl-submit{background:var(--a400)!important;color:#111!important;transition:background-color .2s ease}
html.tl .button:hover,html.tl .nav .nav-cta:hover,html.tl .s-join button:hover,html.tl .p-bar a:hover,html.tl .mega-ask-row button:hover,html.tl .ask-row button:hover,html.tl main.wl .wl-submit:hover{background:var(--hover)!important;color:#111!important}
/* the closing is black: same green button, same lime hover */
html.tl .closing .button,html.tl .closing .s-join button{background:var(--a400)!important;color:#111!important}
html.tl .closing .button:hover,html.tl .closing .s-join button:hover{background:var(--hover)!important;color:#111!important}

/* email fields */
html.tl .s-join:focus-within{border-color:var(--a600);box-shadow:0 0 0 3px var(--a-light)}
html.tl .closing .s-join:focus-within{border-color:var(--a400);box-shadow:none}

/* text links: ink at rest, deep ocean mist on hover */
html.tl .text-link,html.tl .b2-t .link,html.tl .mega-ask-open,html.tl .closing-meta a{transition:color .2s ease}
html.tl .text-link:hover,html.tl .b2-t .link:hover,html.tl .feature-list details .feature-more:hover,html.tl .mega-ask-open:hover{color:var(--a600)!important}
html.tl .closing .text-link:hover,html.tl .closing-meta a:hover{color:var(--a400)!important}

/* menu (10 Oct): each menu keeps its own colour, as in S, for the menus only.
   Platform = soft blue Vivid, Industries = red Vivid, Compare = ocean mist Vivid. Plans and the buttons stay as T. */
html.tl #mega-platform{--mega-accent:#0177AC}
html.tl #mega-solutions{--mega-accent:#E5011A}
html.tl #mega-compare{--mega-accent:#2D46C8}
html.tl .nav-trigger[aria-controls=mega-platform]+.nav-sub{--sub-accent:#0177AC!important}
html.tl .nav-trigger[aria-controls=mega-solutions]+.nav-sub{--sub-accent:#E5011A!important}
html.tl .nav-trigger[aria-controls=mega-compare]+.nav-sub{--sub-accent:#2D46C8!important}
html.tl .mega-intro .label,html.tl .mega-ask-q strong{color:var(--mega-accent)}
html.tl .nav .nav-sub a{color:var(--sub-accent)}
html.tl .nav .nav-sub a:hover,html.tl .nav .nav-sub a:focus-visible{color:#111}
html.tl .nav .nav-sub .nav-soon{color:var(--sub-accent)}
@media (min-width:901px){
  html.tl .nav-trigger,html.tl .nav>a.nav-link{transition:color .2s ease}
  html.tl .nav-trigger[aria-controls=mega-platform]:hover,html.tl .nav-trigger[aria-controls=mega-platform][aria-expanded=true]{color:#0177AC!important}
  html.tl .nav-trigger[aria-controls=mega-solutions]:hover,html.tl .nav-trigger[aria-controls=mega-solutions][aria-expanded=true]{color:#E5011A!important}
  html.tl .nav-trigger[aria-controls=mega-compare]:hover,html.tl .nav-trigger[aria-controls=mega-compare][aria-expanded=true]{color:#2D46C8!important}
  html.tl .nav>a.nav-link:hover,html.tl .nav>a.nav-link[aria-current=page]{color:var(--a600)!important}
  html.tl .mega-item[aria-current=page] .mega-title{color:var(--mega-accent)}
}

/* section labels: black type and a black square, told apart by the words, not a colour */
html.tl .page .label.rule-draw{color:#111!important}
html.tl .closing .label.rule-draw{color:#fff!important;--sq:#fff}

/* industries: hover pairs name and object in the accent; the plus is green with a black cross */
html.tl .ind-list a.is-hot{color:var(--a600)}
html.tl .ind-wall .plus{background:var(--a400)}
html.tl .ind-wall .plus:before,html.tl .ind-wall .plus:after{background:#111!important}

/* ticks and integration rules: ink, not colour-coded */
html.tl .included li:before{border-color:#111}
html.tl #integrations .integration:before{height:1px!important;background:#E0E0E0!important}

/* phone / idle bar: neutral outline, green button */
html.tl .p-bar.p-bar{border-color:var(--g200)!important;background:rgba(255,255,255,.96)!important}

/* number changes in the cards flash by opacity, not by turning green */
html.tl .flash{animation:tl-flash .6s ease}
@keyframes tl-flash{0%{opacity:.3}100%{opacity:1}}

/* ── BRAND LAYER ────────────────────────────────────────── */

/* "Built around your catalogue": white section, grey cards, each illustration sits on one flat palette colour */
html.tl .s-night{background:#fff}
html.tl .bento2 .b2{background:var(--g100)!important}
html.tl .bento2 .b2-ill,html.tl .bento2 .b2:nth-child(n) .b2-ill{background:var(--fill)!important;margin:22px 12px 12px!important;border-radius:4px}
@media (min-width:1101px){html.tl .bento2 .b2:nth-child(4) .b2-ill,html.tl .bento2 .b2:nth-child(5) .b2-ill{margin:12px!important}}
html.tl .bento2 .b2:nth-child(1){--fill:var(--b-soft)}
html.tl .bento2 .b2:nth-child(2){--fill:var(--b-lime)}
html.tl .bento2 .b2:nth-child(3){--fill:var(--b-red)}
html.tl .bento2 .b2:nth-child(4){--fill:var(--b-ultra)}
html.tl .bento2 .b2:nth-child(5){--fill:var(--b-violet)}
html.tl .bento2 .b2:nth-child(6){--fill:var(--b-ocean)}
html.tl .bento2 .ui,html.tl .bento2 .s-note{border:0!important}
html.tl .bento2 .ui .ui-h{background:#fff}
@media (hover:hover){html.tl .bento2 .b2:hover{box-shadow:none}}

/* status chips inside the cards: flat Base fills, black text. No tints. */
html.tl .ill .chip,html.tl .s-night .chip{background:var(--t,var(--b-ocean));color:var(--c,#111)}

/* full section bands with running text: light colours only, black text */
html.tl .included{background:var(--b-soft)!important;color:#111}
html.tl .included p,html.tl .included li{color:#111}
html.tl .included li{border-color:#111!important}
html.tl #story{background-color:var(--b-lime)!important;color:#111!important}

/* ── EVERY OTHER PAGE ───────────────────────────────────── */

/* labels, numbers and ticks: ink. Hovers and focus: the one accent */
html.tl .page .label.rule,html.tl .page .in-red,html.tl .page .cp-blue,html.tl .page .rec-label{color:#111!important}
html.tl .page .in-red.rule:before,html.tl .page .in-red .rule:before,html.tl .page .cp-blue.rule:before{background:#111!important}
html.tl .in-tags li{color:var(--g600)}
html.tl .in-fields li:before,html.tl .rec-list li:before{border-color:#111}
html.tl .next a:before{background:#111}
html.tl .next a:hover .t,html.tl .more:hover,html.tl .in-also a:hover,html.tl .rec-more:hover,html.tl .rec-close:hover,html.tl .ind:hover,html.tl .cp-checked a:hover,html.tl a.ref:hover,html.tl .cp-sources a:hover,html.tl .cp-note a:hover,html.tl .src-block h2 a:hover,html.tl a.ov-item:hover h2,html.tl a.kit:hover .kit-body b{color:var(--a600)!important}
html.tl #faq .feature-list summary:hover,html.tl #faq .feature-list details[open] summary,html.tl .feature-list details.ask summary:hover,html.tl .feature-list details.ask[open] summary{color:var(--a600)!important}
html.tl .feature-list details.ask summary{color:#111!important}
html.tl .ask-form textarea:focus,html.tl .ask-form input:focus{border-color:var(--a600)!important;box-shadow:0 0 0 1px var(--a600)!important}
html.tl .follow-track:focus-visible{outline-color:var(--a600)}
@media (min-width:901px){
  html.tl .nav-trigger[aria-controls=mega-platform],html.tl .nav-trigger[aria-controls=mega-solutions],html.tl .nav-trigger[aria-controls=mega-compare]{color:#111}
  html.tl.f-platform .nav-trigger[aria-controls=mega-platform],html.tl.f-inventory .nav-trigger[aria-controls=mega-platform]{color:#0177AC!important}
  html.tl.f-industry .nav-trigger[aria-controls=mega-solutions]{color:#E5011A!important}
  html.tl.f-compare .nav-trigger[aria-controls=mega-compare],html.tl.f-overview .nav-trigger[aria-controls=mega-compare]{color:#2D46C8!important}
  html.tl.f-pricing .nav>a.nav-link[href="pricing.html"]{color:var(--a600)!important}
}

/* interface illustrations: the pale tints become the flat Base colours, text inside is black */
html.tl .ill{--blue-t:#9AC4E0;--red-t:#F14E46;--green-t:#00B49B;--yellow-t:#EBF14D;--green-d:#111;--red-d:#111}
html.tl .ill .chip,html.tl .ill .copies span{color:#111!important}
html.tl .ill .copies .s{color:var(--g600)!important;background:var(--g200)}
html.tl .ill .blk.on{border-color:#111;background:#9AC4E0;color:#111}
html.tl .ill .fan .ui{color:#111}

/* Platform pages: each illustration panel is one flat colour, a different pair per page */
html.tl .pf-shot.ill{background:var(--f1,var(--b-soft))!important}
html.tl .pf-row:nth-of-type(even) .pf-shot.ill{background:var(--f2,var(--b-lime))!important}
html.tl-network{--f1:#9B86E6;--f2:#EBF14D}
html.tl-marketing{--f1:#F14E46;--f2:#9AC4E0}
html.tl-website-studio{--f1:#9AC4E0;--f2:#EBF14D}
html.tl-sales{--f1:#2D46C8;--f2:#EBF14D}
html.tl-events{--f1:#F14E46;--f2:#00B49B}
html.tl-shipping{--f1:#9AC4E0;--f2:#F14E46}
html.tl-opportunities{--f1:#9B86E6;--f2:#EBF14D}
html.tl-print-on-demand{--f1:#00B49B;--f2:#9AC4E0}

/* Inventory: structure cards and language cards sit on flat colours instead of grey gradients */
html.tl.f-inventory .struct>.ill{background:var(--b-soft)}
html.tl.f-inventory .struct:nth-child(2)>.ill{background:var(--b-lime)}
html.tl.f-inventory .struct:nth-child(3)>.ill{background:var(--b-ocean)}
html.tl .lcard .s-art{background:var(--b-soft)}
html.tl .lcard:nth-child(6n+2) .s-art{background:var(--b-lime)}
html.tl .lcard:nth-child(6n+3) .s-art{background:var(--b-red)}
html.tl .lcard:nth-child(6n+4) .s-art{background:var(--b-violet)}
html.tl .lcard:nth-child(6n+5) .s-art{background:var(--b-ocean)}
html.tl .lcard:nth-child(6n+6) .s-art{background:var(--b-ultra)}

/* Industries (Galleries): the band with running text moves to a light colour */
html.tl #audience.band{background:var(--b-lime)!important}

/* Compare: "Art.Industries" column and status marks in ink and the accent, not violet */
html.tl .cp-sources li:target{background:var(--a-light)}
html.tl .st[data-k=soon]{box-shadow:inset 0 0 0 2px #111}
html.tl .st[data-k=soon]:after{background:#111}

/* Compare overview diagram: black centre, each tool tile a flat colour with black icons, grey lines */
html.tl.f-overview .hub-core,html.tl.f-overview .kits-name{background:#111!important;color:#fff!important}
html.tl.f-overview a.hub-sat.is-link{border-color:#111}
html.tl.f-overview a.hub-sat.is-link:hover,html.tl.f-overview a.hub-sat.is-link:focus-visible{background:#111!important;color:#fff!important}
html.tl.f-overview .hub-sat em,html.tl.f-overview .kit-body b em{color:var(--g600)}
html.tl.f-overview .kits{--line:#E0E0E0}
html.tl.f-overview .kits-bar,html.tl.f-overview .kits-drop,html.tl.f-overview .kits-name:after{background:#E0E0E0}
html.tl.f-overview .kit.is-link .kit-tile{background:var(--b-soft)!important}
html.tl.f-overview .kit.is-link:nth-child(2) .kit-tile{background:var(--b-lime)!important}
html.tl.f-overview .kit.is-link:nth-child(3) .kit-tile{background:var(--b-red)!important}
html.tl.f-overview .kit.is-link:nth-child(4) .kit-tile{background:var(--b-violet)!important}
html.tl.f-overview .kit.is-link:nth-child(5) .kit-tile{background:var(--b-ocean)!important}

/* Plans: plan colours stay only on the matrix squares; controls and the total are neutral */
html.tl.f-pricing .ticks li:before,html.tl.f-pricing .plan:nth-child(n) .ticks li:before{border-color:#111!important}
html.tl.f-pricing .matrix td:nth-child(2) .tick{background:var(--b-ultra)}
html.tl.f-pricing .seg button[aria-pressed=true],html.tl.f-pricing .seg button[aria-pressed=true] *{background:#111!important;color:#fff!important}
html.tl.f-pricing .seg button[aria-pressed=true] *{background:none!important}
html.tl.f-pricing .seg button[aria-pressed=false]:hover{background:var(--g200)!important}
html.tl.f-pricing .total{background:#111!important;--pc-ink:#fff!important;color:#fff!important}
html.tl.f-pricing .stepper button:hover:not(:disabled){background:var(--a400)!important;color:#111!important}

/* Start for free (waitlist): soft blue page, black text, green button */
html.tl main.wl{--wl-bg:#9AC4E0;--wl-ink:#111;--wl-soft:#111111;--wl-field-line:#111}
html.tl main.wl .wl-field input:focus,html.tl main.wl .wl-field select:focus{border-color:#111;box-shadow:0 0 0 1px #111;outline:none}
html.tl main.wl .wl-done{border-color:#111}

/* ── LANDING HOVERS (10 Oct, 10:11) ── */

/* "Everything you need to run your business" accordion: text stays black,
   the + sits in a square that fills ocean mist on hover and when open */
html.tl-index .feature-list summary:hover,html.tl-index .feature-list details[open] summary{color:#111!important}
html.tl-index .accordion-icon{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:5px;background:transparent;color:#111;transition:background-color .25s ease,transform .45s var(--ease)}
html.tl-index .feature-list summary:hover .accordion-icon,html.tl-index .feature-list details[open] .accordion-icon{background:#00B49B}

/* "Made for creative commerce": the hovered industry name and the plus on its object turn soft blue Vivid */
html.tl-index .ind-list a.is-hot{color:#0177AC}
html.tl-index .ind-wall .plus{background:#0177AC}
html.tl-index .ind-wall .plus:before,html.tl-index .ind-wall .plus:after{background:#fff!important}

/* Plans menu item: violet Vivid on hover and on the Plans page (Compare already uses the green) */
@media (min-width:901px){
  html.tl .nav>a.nav-link[href="pricing.html"]:hover,html.tl .nav>a.nav-link[href="pricing.html"][aria-current=page],html.tl.f-pricing .nav>a.nav-link[href="pricing.html"]{color:#7049CA!important}
}
html.tl .nav>a.nav-link[href="pricing.html"]:focus-visible{outline-color:#7049CA}

/* Landing "Backed by industry experience": light grey background (same grey as the Industries pages), black text (10 Oct, 10:18) */
html.tl-index #story{background-color:#F2F2F2!important;color:#111!important}

/* Industries pages (10 Oct, 10:19): red squares before the section labels (text stays black) and red ticks */
html.tl.f-industry .page .label.rule:before,html.tl.f-industry .page .in-red.rule:before,html.tl.f-industry .page .in-red .rule:before{background:#F14E46!important}
html.tl.f-industry .in-fields li:before{border-color:#F14E46!important}

/* Industries pages (10 Oct, 10:22) */
/* "In every record": a small black square before each line, so it reads as a list (different from the red ticks) */
html.tl.f-industry .in-common li{position:relative;padding:3px 0 3px 16px}
html.tl.f-industry .in-common li:before{content:'';position:absolute;left:0;top:calc(3px + .72em - 2.5px);width:5px;height:5px;border-radius:1px;background:#111}
/* "Why it is managed differently": the small checked keywords in ultramarine */
html.tl.f-industry .in-tags li{color:#2D46C8!important}

/* Industries pages (10 Oct, 10:24) */
/* Galleries band: ultramarine with white text (was yellow lime) */
html.tl #audience.band{background:#2D46C8!important}
html.tl #audience.band,html.tl #audience.band *{color:#fff!important}
html.tl.f-industry #audience.band .label.rule:before{background:#fff!important}

/* ── FAQs on every page (10 Oct, 10:26) ──
   Each family uses its menu colour (--fq):
   questions are black and turn that colour on hover only (also when open);
   the last, bold question is black, turns that colour on hover,
   and its italic part (the page name) is always in that colour. */
html.tl.f-platform,html.tl.f-inventory{--fq:#0177AC}
html.tl.f-industry{--fq:#E5011A}
html.tl.f-compare,html.tl.f-overview{--fq:#2D46C8}
html.tl.f-pricing{--fq:#7049CA}
html.tl #faq .feature-list summary,html.tl #faq .feature-list details[open] summary,
html.tl #faq .feature-list details.ask summary,html.tl #faq .feature-list details.ask[open] summary{color:#111!important}
html.tl #faq .feature-list summary:hover,html.tl #faq .feature-list details.ask summary:hover{color:var(--fq,#111)!important}
html.tl #faq .feature-list details.ask .ask-name{color:var(--fq,#111)!important}
html.tl #faq .ask-form textarea:focus,html.tl #faq .ask-form input:focus{border-color:var(--fq)!important;box-shadow:0 0 0 1px var(--fq)!important}

/* ── Plans (10 Oct, 10:32): one colour per plan, no blue, Vivid values with white text.
   Core = ocean mist Vivid (new #018472, white text), Advanced = violet Vivid, Max = soft blue Vivid ── */
html.tl.f-pricing .seg-1{--tab:#018472}
html.tl.f-pricing .seg-2{--tab:#7049CA}
html.tl.f-pricing .seg-3{--tab:#0177AC}
/* "Choose a system": the selected plan fills with its colour, white text */
html.tl.f-pricing .seg button[aria-pressed=true]{background:var(--tab)!important;color:#fff!important}
html.tl.f-pricing .seg button[aria-pressed=true] *{background:none!important;color:#fff!important}
/* the estimate panel stays black; its "Start for free" button takes the selected plan's colour with white text, lime on hover */
html.tl.f-pricing .total .button{background:var(--pc)!important;color:#fff!important}
html.tl.f-pricing .total .button:hover{background:#EBF14D!important;color:#111!important}
html.tl.f-pricing .stepper button:hover:not(:disabled){background:var(--pc)!important;color:#fff!important}
/* "Side by side" table: the plan squares match, with white ticks */
html.tl.f-pricing .matrix td:nth-child(2) .tick{background:#018472!important}
html.tl.f-pricing .matrix td:nth-child(3) .tick{background:#7049CA!important}
html.tl.f-pricing .matrix td:nth-child(4) .tick{background:#0177AC!important}
html.tl.f-pricing .matrix .tick:before,html.tl.f-pricing .matrix .tick:after{border-color:#fff!important}
/* Core is the button green; trying white text and ticks on it (10 Oct, 10:35; 2.6:1, judged by eye) */
/* plan columns at the top: ticks in each plan's colour (Core uses the green Vivid so thin ticks read on the grey card) */
html.tl.f-pricing .plans .plan:nth-child(1) .ticks li:before{border-color:#018472!important}
html.tl.f-pricing .plans .plan:nth-child(2) .ticks li:before{border-color:#7049CA!important}
html.tl.f-pricing .plans .plan:nth-child(3) .ticks li:before{border-color:#0177AC!important}
/* "Estimate your price" buttons in the plan columns: each plan's Light colour, black text; hover outlines it in the plan colour */
html.tl.f-pricing .plans .plan:nth-child(1){--pl:#ACEEDE;--pv:#018472}
html.tl.f-pricing .plans .plan:nth-child(2){--pl:#DED8FF;--pv:#7049CA}
html.tl.f-pricing .plans .plan:nth-child(3){--pl:#CBE2F2;--pv:#0177AC}
html.tl.f-pricing .plans .s-pick{background:var(--pl);color:#111;box-shadow:none}
html.tl.f-pricing .plans .s-pick:hover{box-shadow:inset 0 0 0 1.5px var(--pv)}
/* Plans: violet squares before the section labels (text stays black), like the red ones on Industries */
html.tl.f-pricing .page .label.rule:before{background:#9B86E6!important}
/* Platform pages (incl. Inventory): soft blue Base squares before the section labels (text stays black) */
html.tl.f-platform .page .label.rule:before,html.tl.f-inventory .page .label.rule:before{background:#9AC4E0!important}
/* Closing on black, every page: the small square before "Ready when you are" is yellow lime (text stays white) */
html.tl .closing .label.rule-draw:before,html.tl .closing .label.rule:before{background:#EBF14D!important}

/* ── 10 Oct, 10:56 ── */
/* Text links everywhere: black text, the underline turns ocean mist Base and thicker on hover (no dark green text) */
html.tl .text-link:hover,html.tl .feature-list details .feature-more:hover,html.tl .mega-ask-open:hover{color:#111!important}
html.tl .text-link:hover:after,html.tl .mega-ask-open:hover:after{transform:none;height:2px;background:#00B49B}
html.tl .closing .text-link:hover,html.tl .closing-meta a:hover{color:#fff!important}
html.tl .b2-t .link{transition:border-color .2s ease,box-shadow .2s ease}
html.tl .b2-t .link:hover{color:#111!important;border-bottom-color:#00B49B;box-shadow:0 1px 0 #00B49B}
html.tl .next a:hover .t,html.tl .more:hover,html.tl .in-also a:hover,html.tl .rec-more:hover,html.tl .ind:hover,html.tl .cp-checked a:hover,html.tl a.ref:hover,html.tl .cp-sources a:hover,html.tl .cp-note a:hover,html.tl .src-block h2 a:hover,html.tl a.ov-item:hover h2,html.tl a.kit:hover .kit-body b{color:#111!important;text-decoration:underline;text-decoration-color:#00B49B;text-decoration-thickness:2px;text-underline-offset:4px}
html.tl .rec-close:hover{color:#111!important}
/* Platform label squares: soft blue Vivid (the Base looked too faint on white) */
html.tl.f-platform .page .label.rule:before,html.tl.f-inventory .page .label.rule:before{background:#0177AC!important}
/* one light grey everywhere */
html.tl .ill{--grey:#F2F2F2}
/* Compare pages (incl. overview): ultramarine squares before the section labels (text stays black) (10 Oct, 11:07) */
html.tl.f-compare .page .label.rule:before,html.tl.f-overview .page .label.rule:before,html.tl.f-compare .page .cp-blue.rule:before,html.tl.f-overview .page .cp-blue.rule:before{background:#2D46C8!important}

/* ── Compare tables (10 Oct, 11:20): from the "Compare Table Test", on all five comparison pages ──
   Soft round status icons (Light discs with a stronger mark), the Art.Industries column as a light grey
   panel with rounded corners instead of the outline, black text in the key. On phones the header is plain. */
html.tl.f-compare .st{width:20px;height:20px;border-radius:50%!important;box-shadow:none!important}
html.tl.f-compare .st[data-k=good]{background:#ACEEDE}
html.tl.f-compare .st[data-k=good]:before{border-color:#018472!important}
html.tl.f-compare .st[data-k=part],html.tl.f-compare .st[data-k=addon]{background:#DFE49F}
html.tl.f-compare .st[data-k=part]:after,html.tl.f-compare .st[data-k=addon]:after{background:#111!important}
html.tl.f-compare .st[data-k=no]{background:#FFD2CC}
html.tl.f-compare .st[data-k=no]:before,html.tl.f-compare .st[data-k=no]:after{background:#E5011A!important;width:10px;left:5px}
html.tl.f-compare .st[data-k=unknown]{background:#E0E0E0}
html.tl.f-compare .st[data-k=unknown]:after{background:#5F5F63!important}
html.tl.f-compare .st[data-k=soon]{background:#DED8FF}
html.tl.f-compare .st[data-k=soon]:after{background:#7049CA!important}

/* Art.Industries column: a soft grey panel with rounded corners instead of the outline (10 Oct, 11:16) */
html.tl.f-compare .cp-table .c-us,html.tl.f-compare .cp-table thead .c-us,html.tl.f-compare .cp-table tbody tr:last-child .c-us{border-left:0!important;border-right:0!important;border-top:0!important;background:#F2F2F2;color:#111!important}
html.tl.f-compare .cp-table thead th.c-us{border-radius:16px 16px 0 0}
html.tl.f-compare .cp-table tbody tr:last-child td.c-us{border-bottom:0!important;border-radius:0 0 16px 16px}
html.tl.f-compare .cp-table td.c-us{padding-left:18px;padding-right:18px}
/* key above the table: black text */
html.tl.f-compare .cp-legend{color:#111!important}
@media (max-width:800px){
  /* headers: plain names over a straight black line, no grey shape */
  html.tl.f-compare .cp-table thead th.c-us{background:none;border-radius:0;padding-left:0;border-bottom:1px solid #111!important}
  /* Art.Industries answers: a small grey box each */
  html.tl.f-compare .cp-table td.c-us,html.tl.f-compare .cp-table tbody tr:last-child td.c-us{padding-left:12px;border-radius:6px;border-bottom:0!important}
}

/* Compare FAQ: "Spotted something incorrect or out of date?" is always ultramarine */
html.tl.f-compare #faq .feature-list details.ask summary,html.tl.f-compare #faq .feature-list details.ask[open] summary,html.tl.f-compare #faq .feature-list details.ask summary:hover{color:#2D46C8!important}

/* ── Inventory Manager, intro carousel (10 Oct, 11:27) ──
   Rounded cards whose outline is one palette colour each; the caption square takes that colour when the card is in view. */
html.tl.f-inventory .fc:nth-child(1){--fcc:#9AC4E0}
html.tl.f-inventory .fc:nth-child(2){--fcc:#F14E46}
html.tl.f-inventory .fc:nth-child(3){--fcc:#9B86E6}
html.tl.f-inventory .fc:nth-child(4){--fcc:#00B49B}
html.tl.f-inventory .fc:nth-child(5){--fcc:#EBF14D}
html.tl.f-inventory .fc:nth-child(6){--fcc:#9AC4E0}
/* outlines in the Base colours at 1px (10 Oct, 11:31; 2px Base overpowered the content, Light was the alternative) */
html.tl.f-inventory .fc-frame{border:1px solid var(--fcc,#E0E0E0);border-radius:12px}
/* captions without the small square */
html.tl.f-inventory .fc-cap:before{display:none}
/* the new last card: the work on a client's wall, with the record updated after the sale */
html.tl.f-inventory .fc-wall{background:#F2F2F2;padding:0}
html.tl.f-inventory .fc-wall .m-wall{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:28px 28px 0}
html.tl.f-inventory .fc-wall .m-wall:after{content:'';position:absolute;left:0;right:0;bottom:0;height:26%;background:#E0E0E0}
html.tl.f-inventory .fc-wall .m-wall-art{position:relative;z-index:1;height:72%;max-height:240px;display:flex;align-items:center;justify-content:center}
html.tl.f-inventory .fc-wall .m-wall-art img{max-height:100%;max-width:100%;object-fit:contain;filter:drop-shadow(0 14px 14px rgba(0,0,0,.18))}
html.tl.f-inventory .fc-wall .m-wall-note{position:relative;z-index:1;margin:0 16px 16px;padding:12px 14px 6px;background:#fff;border-radius:8px}
/* Inventory, Schemas (10 Oct, 11:35): this page links to the Industries pages, so the schema list uses red.
   The prompt above the list is red and bolder; a hovered industry turns red (no underline); the + still turns. */
html.tl.f-inventory .s-pick-hint{color:#0177AC!important}
html.tl.f-inventory .s-ind:hover,html.tl.f-inventory .s-ind:focus-visible{color:#0177AC!important;text-decoration:none!important}
html.tl.f-inventory .s-ind:hover i,html.tl.f-inventory .s-ind:focus-visible i{color:#0177AC}
/* Inventory structures (10 Oct, 11:39): fourth card on violet instead of repeating soft blue */
html.tl.f-inventory .struct:nth-child(4)>.ill{background:var(--b-violet)}

/* Inventory, Location and agreements (10 Oct, 11:41): the table becomes an interface card on a flat red panel.
   Each item: thumbnail, name, where it is held (pin) and a status chip in a flat palette colour. No "owned by". */
html.tl.f-inventory .loc-card{margin:40px 0 0;padding:clamp(20px,3vw,40px);border-radius:12px;background:#F14E46;display:flex;flex-direction:column;align-items:center}
html.tl.f-inventory .loc-ui{width:min(460px,100%);padding-bottom:6px}
html.tl.f-inventory .loc-row{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 14px;border-bottom:1px solid #F2F2F2}
html.tl.f-inventory .loc-row:last-child{border-bottom:0}
html.tl.f-inventory .loc-th{width:44px;height:44px;margin:0;border-radius:6px;background:#F2F2F2;display:flex;align-items:center;justify-content:center;padding:5px}
html.tl.f-inventory .loc-th img{max-width:100%;max-height:100%;object-fit:contain}
html.tl.f-inventory .loc-txt{min-width:0}
html.tl.f-inventory .loc-txt b{display:block;font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.tl.f-inventory .loc-txt small{display:flex;align-items:center;gap:6px;margin-top:2px;font-size:12px;color:#5F5F63}
html.tl.f-inventory .loc-pin{width:8px;height:8px;flex-shrink:0;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:#111}
html.tl.f-inventory .loc-st{padding:3px 9px;border-radius:4px;font-family:var(--mono,'Geist Mono',monospace);font-size:11px;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;background:var(--t);color:var(--c)}
html.tl.f-inventory .loc-cap{margin-top:14px;font-size:12px;color:#111;align-self:flex-start}
@media (max-width:560px){html.tl.f-inventory .loc-row{grid-template-columns:40px minmax(0,1fr)}html.tl.f-inventory .loc-st{grid-column:2;justify-self:start}}
/* Inventory: no divider lines between sections (the rest of the site doesn't use them) */
html.tl.f-inventory section[id]{border-top:0!important}
/* Platform pages incl. Inventory (10 Oct, 11:42): accordion questions are black and turn soft blue Vivid on hover (not green) */
html.tl.f-inventory .page,html.tl.f-platform .page{--accent:#0177AC}
html.tl.f-inventory .feature-list summary,html.tl.f-inventory .feature-list details[open] summary,html.tl.f-platform .feature-list summary,html.tl.f-platform .feature-list details[open] summary{color:#111!important}
html.tl.f-inventory .feature-list summary:hover,html.tl.f-platform .feature-list summary:hover{color:#0177AC!important}
/* labels inside black sections (Inventory: Multilingual records) are white (10 Oct, 14:36) */
html.tl .s-dark .label.rule,html.tl .s-dark .label.rule span{color:#fff!important}

/* Inventory, Connected platform (10 Oct, 14:39): much smaller. The six large blocks become one row of compact link chips;
   the descriptions are dropped. Hover fills the chip with soft blue Light. */
html.tl.f-inventory #connected{padding-top:clamp(48px,5vw,80px)!important;padding-bottom:clamp(48px,5vw,80px)!important}
html.tl.f-inventory #connected .intro{margin-bottom:24px!important}
html.tl.f-inventory #connected .next{display:flex!important;flex-wrap:wrap;gap:8px;column-gap:8px}
html.tl.f-inventory #connected .next a,html.tl.f-inventory #connected .next .is-soon{display:inline-flex;align-items:center;padding:10px 14px;border:1px solid #E0E0E0;border-top:1px solid #E0E0E0;border-radius:6px;background:#fff;transition:background-color .2s ease,border-color .2s ease}
html.tl.f-inventory #connected .next a:before{display:none}
html.tl.f-inventory #connected .next .t{gap:10px;font-size:15px;font-weight:500;letter-spacing:-.01em}
html.tl.f-inventory #connected .next .d{display:none}
html.tl.f-inventory #connected .next a:hover{background:#CBE2F2;border-color:#CBE2F2}
html.tl.f-inventory #connected .next a:hover .t{color:#111!important;text-decoration:none!important}
html.tl.f-inventory #connected .next .is-soon{border-style:dashed;color:#5F5F63}
html.tl.f-inventory #connected .next .is-soon .t:after{content:'Coming soon';margin-left:4px;padding:2px 6px;border-radius:4px;background:#F2F2F2;font-family:var(--mono,'Geist Mono',monospace);font-size:10px;font-weight:400;letter-spacing:.06em;text-transform:uppercase;color:#5F5F63}

/* ── Compare overview (10 Oct, 14:42): the six squares of the mark are the six parts of the platform ──
   Desktop: the mark stays in place while the six parts scroll past. Mobile: a small mark sticks at the top.
   Inactive square: grey outline. Passed: black. Current: ultramarine. End: the solid black logo. */
html.tl.f-overview .ovl{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);column-gap:8%;margin-top:clamp(56px,6vw,96px)}
html.tl.f-overview .ovl-stage{position:relative}
html.tl.f-overview .ovl-sticky{position:sticky;top:calc(50vh - 190px);display:flex;flex-direction:column;align-items:flex-start;gap:28px}
html.tl.f-overview .ovl-mark{width:min(320px,100%);height:auto;overflow:visible}
html.tl.f-overview .ovl-mark rect{fill:#111;stroke:none;transform-box:fill-box;transform-origin:center;transition:fill .5s ease,stroke .5s ease,opacity .35s ease,transform .5s cubic-bezier(.3,1.4,.5,1)}
html.tl.f-overview .ovl.is-live .ovl-mark rect{fill:transparent;stroke:#C8C8CC;stroke-width:4}
html.tl.f-overview .ovl.is-live .ovl-mark rect.is-on{fill:#111;stroke:#111}
html.tl.f-overview .ovl.is-live .ovl-mark rect.is-now{fill:#2D46C8;stroke:#2D46C8;transform:scale(1.04)}
html.tl.f-overview .ovl.is-complete .ovl-mark rect{fill:#111;stroke:#111;transform:none}
html.tl.f-overview .ovl.is-hover .ovl-mark rect{opacity:.28}
html.tl.f-overview .ovl.is-hover .ovl-mark rect.is-hover{opacity:1;fill:#2D46C8;stroke:#2D46C8}
html.tl.f-overview .ovl-done{margin:0!important;font-size:clamp(20px,1.8vw,26px)!important;line-height:1.2!important;font-weight:600;letter-spacing:-.02em;color:#111}
html.tl.f-overview .ovl.is-live .ovl-done{opacity:0;transform:translateY(8px);transition:opacity .7s ease,transform .7s ease}
html.tl.f-overview .ovl.is-complete .ovl-done{opacity:1;transform:none}
html.tl.f-overview .ovl-parts{display:flex;flex-direction:column}
html.tl.f-overview .ovl-part{min-height:46vh;display:flex;flex-direction:column;justify-content:center;padding:28px 0;border-top:1px solid #E0E0E0}
html.tl.f-overview .ovl-part:first-child{border-top:0}
html.tl.f-overview .ovl-num{margin:0 0 10px!important;font-family:var(--mono,'Geist Mono',monospace);font-size:11px!important;letter-spacing:.08em;color:#5F5F63}
html.tl.f-overview .ovl-part h3{font-size:clamp(22px,2vw,28px);font-weight:600;letter-spacing:-.02em;line-height:1.15;transition:color .3s ease}
html.tl.f-overview .ovl-part.is-now h3{color:#2D46C8}
html.tl.f-overview .ovl-part>p:not(.ovl-num){margin-top:12px!important;max-width:34em;font-size:16px!important;line-height:1.55!important;color:#111}
html.tl.f-overview .ovl-link{display:inline-flex;align-items:center;gap:10px;align-self:flex-start;margin-top:18px;font-size:14px;font-weight:500;color:#111;border-bottom:1px solid currentColor;padding-bottom:2px;transition:border-color .2s ease}
html.tl.f-overview .ovl-link:hover{border-bottom-color:#2D46C8;box-shadow:0 1px 0 #2D46C8}
html.tl.f-overview .ovl-soon{align-self:flex-start;margin-top:18px;padding:2px 8px;border-radius:4px;background:#F2F2F2;font-family:var(--mono,'Geist Mono',monospace);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#5F5F63}
html.tl.f-overview .ovl-claim{margin:0 0 20px!important;font-size:clamp(24px,2.4vw,34px)!important;line-height:1.15!important;font-weight:600;letter-spacing:-.025em}
@media (max-width:900px){
  html.tl.f-overview .ovl{grid-template-columns:minmax(0,1fr)}
  html.tl.f-overview .ovl-stage{position:sticky;top:64px;z-index:5;background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:10px 0;margin-bottom:8px}
  html.tl.f-overview .ovl-sticky{position:static;flex-direction:row;align-items:center;gap:16px}
  html.tl.f-overview .ovl-mark{width:56px}
  html.tl.f-overview .ovl.is-live .ovl-mark rect{stroke-width:24}
  html.tl.f-overview .ovl-done{font-size:15px!important}
  html.tl.f-overview .ovl-part{min-height:0;padding:32px 0}
}
@media (prefers-reduced-motion:reduce){html.tl.f-overview .ovl-mark rect,html.tl.f-overview .ovl-done{transition:none}}

/* ── Compare overview v2, "assemble" (10 Oct, 14:46) ──
   Six tiles in the six palette colours start scattered and tilted; scrolling swings each into its place in the
   stepped mark; at the end the colours drain to black and the tiles are the logo (the logo itself stays black).
   The headline is shorter: the sub-line is gone. */
html.tl.f-overview .cp-h1{font-size:clamp(34px,3.6vw,52px)!important;line-height:1.05!important}
html.tl.f-overview .asm{--L:min(400px,34vw,52vh)}
html.tl.f-overview .asm-tile:nth-child(1){--c:#2D46C8;--ink:#fff}
html.tl.f-overview .asm-tile:nth-child(2){--c:#9AC4E0;--ink:#111}
html.tl.f-overview .asm-tile:nth-child(3){--c:#F14E46;--ink:#111}
html.tl.f-overview .asm-tile:nth-child(4){--c:#9B86E6;--ink:#111}
html.tl.f-overview .asm-tile:nth-child(5){--c:#EBF14D;--ink:#111}
html.tl.f-overview .asm-tile:nth-child(6){--c:#00B49B;--ink:#111}
/* static layout (reduced motion / no script): black logo beside the list of six parts */
html.tl.f-overview .asm{padding:clamp(48px,5vw,80px) var(--gutter)}
html.tl.f-overview .asm-stage{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8%;align-items:center}
html.tl.f-overview .asm-board{order:-1;display:flex;justify-content:center}
html.tl.f-overview .asm-logo{position:relative;width:var(--L);aspect-ratio:1}
html.tl.f-overview .asm-tile{position:absolute;width:30.94%;height:30.94%;border-radius:3.1%/3.1%;background:#111;display:flex;flex-direction:column;justify-content:space-between;padding:7%;color:#fff;will-change:transform}
html.tl.f-overview .asm-tile[data-i="0"]{left:0;top:69.06%}
html.tl.f-overview .asm-tile[data-i="1"]{left:34.53%;top:69.06%}
html.tl.f-overview .asm-tile[data-i="2"]{left:69.06%;top:69.06%}
html.tl.f-overview .asm-tile[data-i="3"]{left:34.53%;top:34.53%}
html.tl.f-overview .asm-tile[data-i="4"]{left:69.06%;top:34.53%}
html.tl.f-overview .asm-tile[data-i="5"]{left:69.06%;top:0}
html.tl.f-overview .asm-ic,html.tl.f-overview .asm-name{display:none}
html.tl.f-overview .asm-cap{padding:18px 0;border-top:1px solid #E0E0E0}
html.tl.f-overview .asm-num{margin:0 0 6px!important;font-family:var(--mono,'Geist Mono',monospace);font-size:11px!important;letter-spacing:.08em;color:#5F5F63}
html.tl.f-overview .asm-cap h3{font-size:clamp(20px,1.8vw,26px);font-weight:600;letter-spacing:-.02em;line-height:1.15}
html.tl.f-overview .asm-cap>p:not(.asm-num){margin-top:8px!important;font-size:16px!important;line-height:1.5!important;max-width:30em}
html.tl.f-overview .asm-link{display:inline-flex;gap:10px;margin-top:14px;font-size:14px;font-weight:500;color:#111;border-bottom:1px solid currentColor;padding-bottom:2px}
html.tl.f-overview .asm-link:hover{border-bottom-color:#2D46C8;box-shadow:0 1px 0 #2D46C8}
html.tl.f-overview .asm-soon{display:inline-block;margin-top:14px;padding:2px 8px;border-radius:4px;background:#F2F2F2;font-family:var(--mono,'Geist Mono',monospace);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#5F5F63}
html.tl.f-overview .asm-end{display:none}
/* live: a tall section; the stage sticks for the length of the scroll */
html.tl.f-overview .asm.is-live{height:560vh;padding:0}
html.tl.f-overview .asm.is-live .asm-stage{position:sticky;top:0;height:100vh;max-width:none;padding:0 var(--gutter);grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
html.tl.f-overview .asm.is-live .asm-board{order:0}
html.tl.f-overview .asm.is-live .asm-tile{background:color-mix(in srgb,var(--c) calc(100% - var(--k,0) * 100%),#111);color:var(--ink);box-shadow:0 calc((1 - var(--k,0)) * 18px) calc((1 - var(--k,0)) * 40px) -18px rgba(17,17,17,.35);transition:box-shadow .3s ease}
html.tl.f-overview .asm.is-live .asm-tile.is-set{box-shadow:none}
html.tl.f-overview .asm.is-live .asm-ic{display:block;width:30%;opacity:calc(1 - var(--k,0))}
html.tl.f-overview .asm.is-live .asm-ic svg{display:block;width:100%;height:auto;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
html.tl.f-overview .asm.is-live .asm-name{display:block;font-size:clamp(10px,.95vw,13px);font-weight:600;line-height:1.15;letter-spacing:-.005em;opacity:calc(1 - var(--k,0))}
html.tl.f-overview .asm.is-live .asm-caps{position:relative;height:300px}
html.tl.f-overview .asm.is-live .asm-cap,html.tl.f-overview .asm.is-live .asm-end{position:absolute;inset:0 0 auto 0;border:0;padding:0;opacity:0;transform:translateY(22px);transition:opacity .45s ease,transform .6s cubic-bezier(.2,.7,.2,1);pointer-events:none}
html.tl.f-overview .asm.is-live .asm-cap.is-on,html.tl.f-overview .asm.is-live .asm-end.is-on{opacity:1;transform:none;pointer-events:auto}
html.tl.f-overview .asm.is-live .asm-end{display:block}
html.tl.f-overview .asm-end-t{margin:0!important;font-size:clamp(28px,2.8vw,40px)!important;line-height:1.05!important;font-weight:600;letter-spacing:-.03em}
html.tl.f-overview .asm-end-d{margin-top:10px!important;font-size:16px!important;color:#5F5F63}
@media (max-width:800px){
  html.tl.f-overview .asm{--L:min(68vw,40vh)}
  html.tl.f-overview .asm-stage{grid-template-columns:minmax(0,1fr)!important;gap:24px}
  html.tl.f-overview .asm.is-live .asm-stage{align-content:center;padding-top:64px}
  html.tl.f-overview .asm.is-live .asm-board{order:-1}
  html.tl.f-overview .asm.is-live .asm-caps{height:220px}
  html.tl.f-overview .asm.is-live .asm-name{display:none}
  html.tl.f-overview .asm.is-live .asm-ic{width:40%}
}
html.tl.f-overview .asm-caps{position:relative;z-index:2}
html.tl.f-overview .asm-board{position:relative;z-index:1}
/* Compare overview, 10 Oct 14:54: new order. Catalogue is the cornerstone (bottom right), then Website (bottom middle),
   Network and marketing (bottom left), Sales (middle), Events (middle right), the app (top). Colours follow each part. */
html.tl.f-overview .asm-tile[data-slot="br"]{left:69.06%!important;top:69.06%!important}
html.tl.f-overview .asm-tile[data-slot="bm"]{left:34.53%!important;top:69.06%!important}
html.tl.f-overview .asm-tile[data-slot="bl"]{left:0!important;top:69.06%!important}
html.tl.f-overview .asm-tile[data-slot="mm"]{left:34.53%!important;top:34.53%!important}
html.tl.f-overview .asm-tile[data-slot="mr"]{left:69.06%!important;top:34.53%!important}
html.tl.f-overview .asm-tile[data-slot="tr"]{left:69.06%!important;top:0!important}
html.tl.f-overview .asm-tile[data-col="ultra"]{--c:#2D46C8!important;--ink:#fff!important}
html.tl.f-overview .asm-tile[data-col="soft"]{--c:#9AC4E0!important;--ink:#111!important}
html.tl.f-overview .asm-tile[data-col="violet"]{--c:#9B86E6!important;--ink:#111!important}
html.tl.f-overview .asm-tile[data-col="red"]{--c:#F14E46!important;--ink:#111!important}
html.tl.f-overview .asm-tile[data-col="lime"]{--c:#EBF14D!important;--ink:#111!important}
html.tl.f-overview .asm-tile[data-col="ocean"]{--c:#00B49B!important;--ink:#111!important}
/* captions: the old one disappears almost at once, the new one comes in just after, so two never overlap */
html.tl.f-overview .asm.is-live .asm-cap,html.tl.f-overview .asm.is-live .asm-end{transform:translateY(10px);transition:opacity .1s linear,transform .1s linear}
html.tl.f-overview .asm.is-live .asm-cap.is-on,html.tl.f-overview .asm.is-live .asm-end.is-on{transition:opacity .22s ease .1s,transform .3s cubic-bezier(.2,.7,.2,1) .1s}
/* Compare overview, 10 Oct 14:56: the stack builds on the left, the text changes on the right.
   At "One platform." the tiles keep their colours and each gets a black outline (Narooa's call for this page). */
html.tl.f-overview .asm.is-live .asm-stage{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)!important}
html.tl.f-overview .asm.is-live .asm-board{order:-1!important}
html.tl.f-overview .asm.is-live .asm-tile{background:var(--c)!important;box-shadow:inset 0 0 0 calc(var(--k,0) * 3px) #111!important}
html.tl.f-overview .asm.is-live .asm-ic{opacity:1!important}
@media (max-width:800px){html.tl.f-overview .asm.is-live .asm-tile{box-shadow:inset 0 0 0 calc(var(--k,0) * 2px) #111!important}}
/* Compare overview, 10 Oct 14:59: shorter scroll, text above and below closer, thinner final outline */
html.tl.f-overview .ov-after{padding-top:0!important}
html.tl.f-overview .ov-after .ov-text{margin-top:clamp(16px,2vw,32px)!important}
html.tl.f-overview .asm.is-live .asm-tile{box-shadow:inset 0 0 0 calc(var(--k,0) * 1.5px) #111!important}
@media (max-width:800px){html.tl.f-overview .asm.is-live .asm-tile{box-shadow:inset 0 0 0 calc(var(--k,0) * 1px) #111!important}}
/* Compare overview, 10 Oct 15:03: no pinned full-screen area. The section keeps its natural height in the page;
   the tiles assemble one at a time as it scrolls up to the middle of the window. */
html.tl.f-overview .asm.is-live{padding:clamp(24px,3vw,48px) 0!important}
html.tl.f-overview .asm.is-live .asm-stage{position:relative!important;top:auto;height:auto!important;max-width:1180px;margin:0 auto;padding:0 var(--gutter)}
@media (max-width:800px){html.tl.f-overview .asm.is-live .asm-stage{padding-top:0!important}}
/* Compare overview, 15:05: the stage (not full screen) holds in the middle of the window while the tiles assemble.
   Section height and the stage's top are set by the script. */
html.tl.f-overview .asm.is-live{padding:0!important}
html.tl.f-overview .asm.is-live .asm-stage{position:sticky!important;padding-top:clamp(16px,2vw,32px);padding-bottom:clamp(16px,2vw,32px)}
@media (max-width:800px){html.tl.f-overview .asm.is-live .asm-stage{grid-template-columns:minmax(0,1fr)!important}}
/* Compare overview, 10 Oct 15:13: no black outline, no icons in the tiles, no part numbers; tiles fly in from off-screen */
html.tl.f-overview .asm.is-live .asm-tile{box-shadow:none!important}
html.tl.f-overview .asm-ic{display:none!important}
html.tl.f-overview .asm.is-live .asm-tile{justify-content:flex-end}
html.tl.f-overview .asm.is-live .asm-tile[data-col="red"]{--ink:#111!important}
/* Compare overview, 10 Oct 15:17: smaller squares, no text on them, nothing pinned (the section scrolls with the page) */
html.tl.f-overview .asm{--L:min(280px,24vw,38vh)}
html.tl.f-overview .asm.is-live .asm-name{display:none!important}
html.tl.f-overview .asm.is-live{height:auto!important;padding:clamp(32px,4vw,64px) 0!important}
html.tl.f-overview .asm.is-live .asm-stage{position:relative!important;top:auto!important}
html.tl.f-overview .asm.is-live .asm-caps{height:220px}
@media (max-width:800px){html.tl.f-overview .asm{--L:min(56vw,30vh)}}
/* Compare overview, 10 Oct 15:23: mark sits higher; tiles released by scrolling; comparison links as chips below */
html.tl.f-overview .asm.is-live{padding:8px 0 clamp(24px,3vw,40px)!important}
html.tl.f-overview .cmp-links-t{margin:0 0 14px!important;font-size:15px!important;font-weight:500;color:#111}
html.tl.f-overview .cmp-chips{display:flex;flex-wrap:wrap;gap:8px}
html.tl.f-overview .cmp-chips a{display:inline-flex;align-items:center;gap:10px;padding:10px 14px;border:1px solid #E0E0E0;border-radius:6px;background:#fff;font-size:15px;font-weight:500;letter-spacing:-.01em;color:#111;transition:background-color .2s ease,border-color .2s ease}
html.tl.f-overview .cmp-chips a:hover{background:#CBE2F2;border-color:#CBE2F2}
/* Compare overview, 10 Oct 15:35: tiles tied to scroll; stage holds briefly under the header; title on two lines;
   comparison links closer to the mark with a larger heading than the chips */
html.tl.f-overview .asm.is-live{box-sizing:content-box}
html.tl.f-overview .asm.is-live .asm-stage{position:sticky!important;top:72px!important}
html.tl.f-overview .cp-h1{max-width:none!important}
html.tl.f-overview .cmp-links{padding-bottom:clamp(64px,7vw,104px)!important}
html.tl.f-overview .cmp-links-t{margin:0 0 18px!important;font-size:clamp(22px,2vw,28px)!important;line-height:1.15!important;font-weight:600!important;letter-spacing:-.02em}
@media (max-width:800px){html.tl.f-overview .asm.is-live .asm-stage{padding-top:20px!important}html.tl.f-overview .asm.is-live .asm-caps{height:180px}}
/* Plans, "Side by side" table, 10 Oct 15:35: same tick style as the Compare tables — a round Light disc with a Vivid mark */
html.tl.f-pricing .matrix .tick{border-radius:50%!important}
html.tl.f-pricing .matrix td:nth-child(2) .tick{background:#ACEEDE!important;--tk:#018472}
html.tl.f-pricing .matrix td:nth-child(3) .tick{background:#DED8FF!important;--tk:#7049CA}
html.tl.f-pricing .matrix td:nth-child(4) .tick{background:#CBE2F2!important;--tk:#0177AC}
html.tl.f-pricing .matrix .tick:before,html.tl.f-pricing .matrix .tick:after{border-color:var(--tk)!important}
/* Plans page: its own menu item links to #top, so the violet rule above missed it (it showed green) */
@media (min-width:901px){html.tl.f-pricing .nav>a.nav-link[aria-current=page]{color:#7049CA!important;border-color:#7049CA!important;text-decoration-color:#7049CA!important}
html.tl.f-pricing .nav>a.nav-link[aria-current=page]:after,html.tl.f-pricing .nav>a.nav-link[aria-current=page]:before{background:#7049CA!important;border-color:#7049CA!important}}
/* 10 Oct 15:35: never round. Ticks and status marks are squares with 10% rounded corners (Plans table and Compare tables) */
html.tl.f-pricing .matrix .tick,html.tl.f-compare .st,html.tl.f-overview .st,html.cpv2 .st{border-radius:10%!important}
/* 10 Oct 15:37: closing (black footer) headline smaller on every page, e.g. "Start with your catalogue" (was 56–88px) */
html.tl h2[style*="clamp(56px,6.1vw,88px)"]{font-size:clamp(48px,5.2vw,74px)!important;line-height:1.02!important;letter-spacing:-.033em!important;margin:22px 0 30px!important}
/* audit 10 Oct 15:45: the "coming soon" mark inside the Compare status square was a round dot; square with 10% corners */
html.tl .st:after,html.tl .st:before{border-radius:10%!important}
/* ===== Platform pages v2 (test on Sales, 10 Oct 15:55): chapters like the Industry pages =====
   Each block of .pf-flow becomes a full-width chapter with its own background (grey / white), no separator lines,
   a small label opens each chapter, the centred statement becomes the ultramarine band, illustration panels in a Light colour. */
html.pv2 .pf-flow{margin-top:var(--section)}
html.pv2 #top{padding-bottom:0!important}
html.pv2 .pf-flow>*{position:relative;border-top:0!important;margin-top:0!important;padding-top:var(--section)!important;padding-bottom:var(--section)!important;
  background:var(--pv-bg,#fff);box-shadow:0 0 0 100vmax var(--pv-bg,#fff);clip-path:inset(0 -100vmax)}
html.pv2 .pf-flow>:nth-child(odd){--pv-bg:#F2F2F2}
html.pv2 .pf-flow>:nth-child(even){--pv-bg:#FFFFFF}
html.pv2 .pf-flow>.pf-center{--pv-bg:#2D46C8;color:#fff}
html.pv2 .pf-flow>.pf-center h2,html.pv2 .pf-flow>.pf-center p{color:#fff!important}
html.pv2 .pf-flow>.pf-center p:not(.pf-num):not(.pf-soon){font-size:20px!important}
html.pv2 .pf-flow>.pf-center>*{max-width:760px}
html.pv2 .pf-flow>.pf-row{align-items:center}
html.pv2 .pf-card{border-top:0!important;padding-top:0!important}
html.pv2 .pv-head{grid-column:1/-1;margin-bottom:clamp(32px,3.5vw,56px)}
html.pv2 .pv-lab{margin:0 0 18px!important}
html.pv2 .pf-row .pv-lab+h2{font-size:clamp(28px,2.5vw,36px)!important;line-height:1.1!important;letter-spacing:-.028em!important}
html.pv2 .pf-shot.ill{background:#CBE2F2!important;border-radius:12px!important}
/* FAQ follows a white chapter, so keep its grey; if the last chapter is grey, the FAQ turns white */
html.pv2 .pf-flow>:last-child:nth-child(odd){--pv-bg:#FFFFFF}
/* full-width backgrounds drawn by one layer (the shadow trick left a hairline seam) */
html.pv2 .pf-flow>*{background:none!important;box-shadow:none!important;clip-path:none!important;isolation:isolate}
html.pv2 .pf-flow>*:before{content:'';position:absolute;top:0;bottom:0;left:50%;width:100vw;margin-left:-50vw;background:var(--pv-bg,#fff);z-index:-1;pointer-events:none}
html.pv2 body{overflow-x:clip}
html.pv2 .pf-flow>.pf-row:nth-of-type(n) .pf-shot.ill{background:#CBE2F2!important}
/* Platform v2, 10 Oct 16:55: illustration panels styled like the Inventory cards: white, 12px corners, 1px outline in a Base colour */
html.pv2 .pf-flow>.pf-row:nth-of-type(n) .pf-shot.ill{background:#fff!important;border:1px solid var(--pvc,#9AC4E0);border-radius:12px!important}
html.pv2 .pf-flow>.pf-row:nth-child(1){--pvc:#9AC4E0}
html.pv2 .pf-flow>.pf-row:nth-child(2){--pvc:#9B86E6}
/* the app screens inside sit on white now, so they get a quiet grey edge instead of relying on the coloured panel */
html.pv2 .pf-shot.ill .ui{border:1px solid #E0E0E0}
/* Platform v2, 10 Oct 16:56: no outer card. The app screen itself carries the coloured 1px outline (no card on card) */
html.pv2 .pf-flow>.pf-row:nth-of-type(n) .pf-shot.ill{background:transparent!important;border:0!important;padding:0!important;min-height:0!important}
html.pv2 .pf-shot.ill>.ui,html.pv2 .pf-shot.ill>.stack{width:min(480px,100%)}
html.pv2 .pf-shot.ill .ui{border:1px solid var(--pvc,#9AC4E0)!important;border-radius:12px!important;overflow:hidden;box-shadow:none!important}
/* Platform v2, 10 Oct 17:00: private sales + online checkout in ONE chapter (one label, one background) */
html.pv2 .pv-group>.pf-row{padding:0!important;border:0!important}
html.pv2 .pv-group>.pf-row+.pf-row{margin-top:clamp(64px,7vw,112px)!important}
html.pv2 .pv-glab{margin-bottom:clamp(28px,3vw,44px)!important}
html.pv2 .pv-group{--pvc:#9AC4E0}
html.pv2 .pv-group>.pf-row+.pf-row{--pvc:#9B86E6}
/* the coloured outline was clipped at the top when the screen lifted on hover/tap: no clipping, no lift */
html.pv2 .pf-shot.ill{overflow:visible!important}
html.pv2 .pf-row:hover .pf-shot.ill>.ui,html.pv2 .pf-row:hover .pf-shot.ill>.stack{transform:none!important}
html.pv2 .pf-flow .pf-row:nth-of-type(n) .pf-shot.ill{background:transparent!important;border:0!important;padding:0!important;min-height:0!important;overflow:visible!important}
html.pv2 .pf-flow .pf-row h2{font-size:clamp(28px,2.5vw,36px)!important;line-height:1.1!important;letter-spacing:-.028em!important}
html.pv2 .pv-group>.pf-row{align-items:center}
/* fix: the "last chapter turns white" rule must never touch the band */
html.pv2 .pf-flow>.pf-center:last-child{--pv-bg:#2D46C8!important}
/* Compare pages, "Beyond <category>" table (test on email marketing, 10 Oct 17:45):
   the other parts of the platform, one row each, with the logo colour as a small square by the name */
html.tl .bz-intro{display:grid;grid-template-columns:1.15fr 1fr;gap:6%;align-items:end;margin:8px 0 28px}
html.tl .bz-intro p{color:#111;max-width:480px;font-size:16px;line-height:1.55}
html.tl .cp-beyond th[scope=row]{vertical-align:top}
html.tl .bz-name{display:flex;align-items:center;gap:10px;font-weight:600;color:#111}
html.tl .bz-line{display:block;margin-top:4px;padding-left:20px;font-weight:400;font-size:14px;line-height:1.45;color:#5F5F63}
html.tl .bz-sq{display:inline-block;flex:none;width:10px;height:10px;border-radius:10%}
html.tl .bz-sq[data-col=ultra]{background:#2D46C8}html.tl .bz-sq[data-col=violet]{background:#9B86E6}
html.tl .bz-sq[data-col=red]{background:#F14E46}html.tl .bz-sq[data-col=ocean]{background:#00B49B}
html.tl .bz-sq[data-col=soft]{background:#9AC4E0}html.tl .bz-sq[data-col=lime]{background:#EBF14D}
@media (max-width:800px){html.tl .bz-intro{grid-template-columns:minmax(0,1fr);gap:12px}}
/* 10 Oct 17:45: no colour squares by the part names in the "Beyond" table */
html.tl .bz-sq{display:none!important}
html.tl .bz-line{padding-left:0!important}
html.tl .cp-plans{color:#111;border-bottom:1px solid #111;padding-bottom:1px;font-weight:500}
html.tl .cp-plans:hover{border-bottom:2px solid #00B49B}
/* 10 Oct 18:12: Compare menu items get the same inner padding as the Platform and Industries menus,
   so the hover arrow sits inside its own column instead of touching the next one */
html.tl #mega-compare .mega-item{padding:14px 16px 16px!important}
/* 10 Oct 19:45: Industries "Why it is managed differently" tags in red (Industries family red Vivid), not ultramarine */
html.tl.f-industry .in-tags li{color:#E5011A!important}
/* 10 Oct 19:46: the call to action on the left of each desktop menu sits on a soft panel in the section's Light colour,
   and its Send button uses the section colour (never the green) */
@media (min-width:901px){
  html.tl #mega-platform{--ask-bg:#CBE2F2;--ask-c:#0177AC}
  html.tl #mega-solutions{--ask-bg:#FFD2CC;--ask-c:#E5011A}
  html.tl #mega-compare{--ask-bg:#CBE2F2;--ask-c:#2D46C8}
}
html.tl .mega-ask-row button[type=submit]{background:var(--ask-c,#111)!important;color:#fff!important;border-color:var(--ask-c,#111)!important}
html.tl .mega-ask-row button[type=submit]:hover{background:#111!important;border-color:#111!important}
/* 10 Oct 19:47: no panel behind the menu call to action (back as before); only the Send button keeps the section colour */
/* 10 Oct 19:53: the menu question itself ("Don't see your industry?") opens the message box; no second link */
html.tl .mega-ask-head{margin-top:0!important;padding:0 0 2px!important;color:var(--mega-accent)!important;font:600 15px/1.3 'Geist',sans-serif!important;letter-spacing:-.01em}
html.tl .mega-ask-head:after{height:1px!important;background:currentColor!important;transform:scaleX(0)!important;transition:transform .3s ease!important}
html.tl .mega-ask-head:hover:after{transform:scaleX(1)!important}
html.tl .mega-ask-head:hover{color:var(--mega-accent)!important}
html.tl .mega-ask-head[aria-expanded=true]{display:inline-flex!important;pointer-events:none}
html.tl .mega-ask-head[aria-expanded=true] .arrow{display:none}
html.tl .mega-ask-head+.mega-ask-q{margin-top:4px!important}
/* ===== Landing, 10 Oct 20:25 ===== */
/* every small label square on the landing page is yellow lime */
html.tl-index .page .label:before,html.tl-index .page .label.rule-draw:before{background:#EBF14D!important}
/* accordion: no green box behind the +; the + turns a quarter on hover (like the Schemas list on Inventory) and becomes × when open */
html.tl-index .feature-list summary:hover .accordion-icon,html.tl-index .feature-list details[open] .accordion-icon{background:transparent!important}
html.tl-index .feature-list summary:hover .accordion-icon{transform:rotate(90deg)}
html.tl-index .feature-list details[open] .accordion-icon,html.tl-index .feature-list details[open] summary:hover .accordion-icon{transform:rotate(45deg)}
/* Made for creative commerce: as in Version R, the hovered industry turns red with its arrow; no green underline anywhere */
html.tl-index .ind:hover,html.tl-index .ind:hover *{text-decoration:none!important}
html.tl-index .ind-list a.is-hot,html.tl-index .ind-list a:hover{color:#E5011A!important}
/* Landing, 10 Oct 20:28: label squares in our green (ocean mist Base) instead of yellow; light green where the section itself is green; black closing keeps yellow */
html.tl-index .page .label:before,html.tl-index .page .label.rule-draw:before{background:#00B49B!important}
html.tl-index #story .label:before,html.tl-index #story .label.rule-draw:before{background:#ACEEDE!important}
html.tl-index .closing .label.rule-draw:before{background:#EBF14D!important}
/* the + buttons on the industry photos: green with a black cross */
html.tl-index .ind-wall .plus{background:#00B49B!important}
html.tl-index .ind-wall .plus:before,html.tl-index .ind-wall .plus:after{background:#111!important}
/* accordion: the turning + is green */
html.tl-index .feature-list summary:hover .accordion-icon,html.tl-index .feature-list details[open] .accordion-icon{color:#00B49B!important;font-weight:400}
/* ===== Platform pages, fuller structure (10 Oct 21:30, from the approved Sales preview) =====
   grey rows chapter, white cards chapter (each card with a small illustration), soft blue band,
   grey "Everything included" chapter, white "Works with" chapter, then the grey FAQ */
html.tl.f-platform.pv2 .pf-flow>.pf-cards{--pv-bg:#FFFFFF!important}
html.tl.f-platform.pv2 .pf-flow>.pf-center{--pv-bg:#0177AC!important}
html.pv2 .pf-flow>.px-all{--pv-bg:#F2F2F2!important}
html.pv2 .pf-flow>.px-with{--pv-bg:#FFFFFF!important}
html.pv2 .px-band h2{font-size:clamp(32px,3.4vw,48px)!important;letter-spacing:-.03em}
/* invoice card (Sales) */
html.pv2 .px-inv{width:min(480px,100%);border:1px solid #9AC4E0;border-radius:12px;background:#fff;overflow:hidden;font-size:13px}
html.pv2 .px-inv-h{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid #E0E0E0}
html.pv2 .px-inv-h b{font-weight:600;font-size:14px}
html.pv2 .px-chip{padding:3px 8px;border-radius:4px;font-family:var(--mono,'Geist Mono',monospace);font-size:11px;letter-spacing:.04em;text-transform:uppercase}
html.pv2 .px-chip-paid{background:#ACEEDE;color:#036556}
html.pv2 .px-inv-r{display:grid;grid-template-columns:44px 1fr auto;gap:12px;align-items:center;padding:14px 16px;border-bottom:1px solid #F2F2F2}
html.pv2 .px-inv-r .th{width:44px;height:44px;margin:0;border-radius:6px;background:#F2F2F2;display:flex;align-items:center;justify-content:center;padding:5px}
html.pv2 .px-inv-r .th img{max-width:100%;max-height:100%;object-fit:contain}
html.pv2 .px-inv-r b{display:block;font-weight:600}html.pv2 .px-inv-r small{color:#5F5F63}
html.pv2 .px-inv-l,html.pv2 .px-inv-t{display:flex;justify-content:space-between;padding:10px 16px;border-bottom:1px solid #F2F2F2}
html.pv2 .px-inv-t{border-bottom:0;padding:14px 16px;font-size:14px}html.pv2 .px-inv-t b{font-weight:600}
html.pv2 .px-inv-row .pf-shot.ill{background:transparent!important;border:0!important;padding:0!important;min-height:0!important}
html.pv2 .pv-group>.px-inv-row{margin-bottom:0!important}
/* small illustrations on the cards */
html.pv2 .px-cards .pf-card{display:flex;flex-direction:column}
html.pv2 .px-mini{margin-bottom:20px;padding:14px;border:1px solid #E0E0E0;border-radius:12px;background:#fff;font-size:12px;display:flex;flex-direction:column;gap:8px;min-height:148px;justify-content:center}
html.pv2 .px-m-row{display:flex;align-items:center;gap:10px}
html.pv2 .px-m-row .th{width:30px;height:30px;margin:0;border-radius:5px;background:#F2F2F2;display:flex;align-items:center;justify-content:center;padding:3px}
html.pv2 .px-m-row .th img{max-width:100%;max-height:100%}
html.pv2 .px-av{width:30px;height:30px;border-radius:5px;background:#F2F2F2;display:flex;align-items:center;justify-content:center;font-style:normal;font-size:11px;font-weight:600}
html.pv2 .px-m-btn{align-self:flex-start;margin-top:4px;padding:6px 10px;border-radius:5px;background:#111;color:#fff;font-size:11px;font-weight:500}
html.pv2 .px-m-l{display:flex;justify-content:space-between;gap:12px;padding-bottom:6px;border-bottom:1px solid #F2F2F2}
html.pv2 .px-m-l:last-child{border-bottom:0}html.pv2 .px-m-l b{font-weight:600}
html.pv2 .px-ok{color:#018472}html.pv2 .px-due{color:#7049CA}
html.pv2 .px-bar{height:6px;border-radius:3px;background:#F2F2F2;overflow:hidden}html.pv2 .px-bar i{display:block;height:100%;background:#00B49B}
html.pv2 .px-soon{align-self:flex-start;padding:2px 8px;border-radius:4px;background:#DED8FF;color:#5F48AA;font-family:var(--mono,'Geist Mono',monospace);font-size:10px;letter-spacing:.05em;text-transform:uppercase}
/* everything included */
html.pv2 .px-all .h-sec,html.pv2 .px-with .h-sec{margin-bottom:clamp(28px,3vw,44px)}
html.pv2 .px-all-grid{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:32px}
html.pv2 .px-g h3{font-size:16px;font-weight:600;padding-bottom:12px;border-bottom:1px solid #111;margin-bottom:6px}
html.pv2 .px-g ul{list-style:none;margin:0;padding:0}
html.pv2 .px-g li{position:relative;padding:8px 0 8px 18px;font-size:14px;line-height:1.4;border-bottom:1px solid #E0E0E0}
html.pv2 .px-g li:before{content:'';position:absolute;left:0;top:14px;width:8px;height:8px;border-radius:10%;background:#0177AC}
/* works with */
html.pv2 .px-with-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
html.pv2 .px-with-grid a{display:flex;flex-direction:column;gap:6px;padding:18px;border:1px solid #9AC4E0;border-radius:12px;color:#111;transition:background-color .2s}
html.pv2 .px-with-grid a b{font-weight:600}html.pv2 .px-with-grid a span{font-size:14px;color:#5F5F63}
html.pv2 .px-with-grid a:hover{background:#CBE2F2}
@media (max-width:1000px){html.pv2 .px-all-grid,html.pv2 .px-with-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){html.pv2 .px-all-grid,html.pv2 .px-with-grid{grid-template-columns:minmax(0,1fr)}}
/* 10 Oct 21:27: bands vary by page instead of the same blue everywhere (palette Vivid/Dark values, white text) */
html.tl.f-platform.tl-events.pv2 .pf-flow>.pf-center{--pv-bg:#7049CA!important}
html.tl.f-platform.tl-marketing.pv2 .pf-flow>.pf-center{--pv-bg:#018472!important}
html.tl.f-platform.tl-print-on-demand.pv2 .pf-flow>.pf-center{--pv-bg:#5F48AA!important}
html.tl.f-platform.tl-shipping.pv2 .pf-flow>.pf-center{--pv-bg:#2D46C8!important}
/* "Everything included" is grey and now the last chapter, so on these pages the FAQ turns white to keep the alternation */
html.tl.f-platform.pv2 #faq{background:#FFFFFF!important}
/* 10 Oct 21:32, Platform pages (incl. Inventory): the last FAQ question is fully soft blue Vivid, not only the page name;
   when it is open, the message box lines and the Send button are the same blue */
html.tl.f-platform #faq .feature-list details.ask summary,html.tl.f-platform #faq .feature-list details.ask[open] summary,html.tl.f-platform #faq .feature-list details.ask summary:hover,
html.tl.f-inventory #faq .feature-list details.ask summary,html.tl.f-inventory #faq .feature-list details.ask[open] summary,html.tl.f-inventory #faq .feature-list details.ask summary:hover{color:#0177AC!important}
html.tl.f-platform #faq .ask-form textarea,html.tl.f-platform #faq .ask-form input,html.tl.f-inventory #faq .ask-form textarea,html.tl.f-inventory #faq .ask-form input{border-color:#0177AC!important}
html.tl.f-platform #faq .ask-row button,html.tl.f-inventory #faq .ask-row button{background:#0177AC!important;border-color:#0177AC!important;color:#fff!important}
html.tl.f-platform #faq .ask-row button:hover,html.tl.f-inventory #faq .ask-row button:hover{background:#111!important;border-color:#111!important}
html.tl.f-platform #faq details.ask .accordion-icon{color:#0177AC!important}

/* Landing clean-up approved 10 Oct 2026, 23:45 (from the landing-v2 preview; "More than inventory" still to decide) */
/* 2 · From catalogue to market: its own grey chapter, so it no longer runs into "Made for creative commerce";
   accordion questions at the size of the Schemas list on Inventory, not headline size */
html.tl-index #tools{background:#F2F2F2!important}
html.tl-index #tools .feature-list summary{padding:16px 0!important}
html.tl-index #tools .feature-list h3{font-size:18px!important;font-weight:500!important;letter-spacing:-.012em!important}
html.tl-index #tools .feature-list details{border-color:#E0E0E0}
html.tl-index #tools .feature-list details>p,html.tl-index #tools .feature-list details>div{font-size:15px}

/* 3 · Already built in: the Light soft blue instead of the strong Base blue, so it reads as a quiet list */
html.tl-index .included{background:#CBE2F2!important}

/* 4 · Integrations: the logos sit closer to their heading (there was a 200px empty gap) */
html.tl-index .int-grid{margin-top:clamp(48px,5vw,80px)!important}

/* 5 · Backed by industry experience: smaller, calmer statement text */
html.tl-index #story p{font-size:clamp(18px,1.6vw,22px)!important;line-height:1.5!important;max-width:760px!important}