/* The slerp.com nav, bold version. Master copy: slerp-website/pages/_system/nav/.
   Tokens copied from tokens.css (the nav sits outside .slerp). The header always takes 64px (--nav-h);
   the bar inside it floats into a dark pill once the page scrolls. Every rule starts with .sx so the
   theme's element resets (Bootstrap, style.css) can't outrank it. Desktop above 1000px, sheet below. */
.sx {
  --sx-ink: #1e1e28;
  --sx-ink-2: #2a2a36;
  --sx-brand: #d092dd;
  --sx-brand-dark: #b86ec8;
  --sx-glow: rgba(208, 146, 221, .45);
  --sx-paper: #f4f2ee;
  --sx-h: 64px;
  --sx-wrap: 1280px;
  --sx-slant: 26px;
  --sx-ease: cubic-bezier(.2, .7, .2, 1);
  --sx-font: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;

  position: sticky; top: 0; z-index: 1000; height: var(--sx-h);
  font-family: var(--sx-font); font-weight: 400; color: var(--sx-ink); text-align: left;
}
/* the nav sizes its boxes one way on every page; the shared system's pages set border-box everywhere, which took
   the padding out of each menu's width and cut its right side off (07/10/2026) */
.sx, .sx *, .sx *::before, .sx *::after { box-sizing: content-box; }
.sx ul, .sx li, .sx p { margin: 0; padding: 0; list-style: none; }
.sx a, .sx a:hover, .sx a:visited { color: inherit; text-decoration: none; box-shadow: none; }
.sx button { font: inherit; color: inherit; background: none; border: 0; margin: 0; padding: 0; cursor: pointer; text-align: left; }
.sx img { border: 0; border-radius: 0; box-shadow: none; max-width: 100%; }
.sx svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sx a:focus-visible, .sx button:focus-visible { outline: 2px solid var(--sx-brand); outline-offset: 3px; border-radius: 10px; }

/* ---------- The bar: light at the top, a floating dark pill once scrolled ---------- */
.sx .sx-shell {
  position: absolute; z-index: 3; top: 0; left: 0; right: 0; height: var(--sx-h);
  display: flex; align-items: center; gap: 28px;
  padding: 0 max(24px, calc((100% - var(--sx-wrap)) / 2 + 24px));
  background: #fff; border-radius: 0; box-shadow: 0 1px 0 rgba(30, 30, 40, .06);
  transition: top .45s var(--sx-ease), left .45s var(--sx-ease), right .45s var(--sx-ease), height .45s var(--sx-ease),
              padding .45s var(--sx-ease), border-radius .45s var(--sx-ease), background .3s ease, box-shadow .3s ease;
}
.sx.is-float .sx-shell, .sx.is-open .sx-shell {
  top: 8px; left: max(12px, calc((100% - 1180px) / 2)); right: max(12px, calc((100% - 1180px) / 2)); height: 52px;
  padding: 0 8px 0 22px; border-radius: 18px;
  background: rgba(30, 30, 40, .88); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: 0 18px 40px rgba(15, 15, 20, .22), inset 0 0 0 1px rgba(255, 255, 255, .06);
  color: #fff;
}
.sx .sx-logo { position: relative; display: block; flex-shrink: 0; width: 90px; height: 20px; line-height: 0; }
.sx .sx-logo img { position: absolute; inset: 0; width: 90px; height: 20px; transition: opacity .3s ease; }
.sx .sx-logo-light, .sx.is-float .sx-logo-dark, .sx.is-open .sx-logo-dark { opacity: 0; }
.sx.is-float .sx-logo-light, .sx.is-open .sx-logo-light { opacity: 1; }

.sx .sx-items { position: relative; display: flex; align-items: center; gap: 0; flex: 1; }
.sx .sx-trigger {
  position: relative; z-index: 1; display: inline-flex; align-items: center; height: 38px; padding: 0 15px;
  font-size: 15px; font-weight: 500; letter-spacing: -.01em; white-space: nowrap; color: inherit; opacity: .8;   /* 600 -> 500, a touch lighter (Liam, 06/10/2026) */
  transition: opacity .18s ease, color .18s ease;
}
.sx .sx-trigger:hover, .sx .sx-trigger[aria-expanded="true"] { opacity: 1; }
.sx .sx-trigger[aria-expanded="true"] { color: var(--sx-brand-dark); }
.sx.is-float .sx-trigger[aria-expanded="true"], .sx.is-open .sx-trigger[aria-expanded="true"] { color: var(--sx-brand); }
/* the highlight that slides to whichever item is under the pointer */
.sx .sx-blob {
  position: absolute; left: 0; top: 50%; height: 38px; margin-top: -19px; width: 0; border-radius: 12px;
  background: var(--sx-paper); opacity: 0; pointer-events: none;
  transition: transform .35s var(--sx-ease), width .35s var(--sx-ease), opacity .2s ease, background .3s ease;
}
.sx.is-float .sx-blob, .sx.is-open .sx-blob { background: rgba(255, 255, 255, .1); }

.sx .sx-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.sx .sx-login { display: inline-flex; align-items: center; height: 38px; padding: 0 14px; font-size: 15px; font-weight: 500; opacity: .8; transition: opacity .18s ease; }
.sx .sx-login:hover { opacity: 1; }
.sx .sx-cta {
  position: relative; overflow: hidden; display: inline-flex; align-items: center; height: 40px; padding: 0 20px; border-radius: 13px;
  background: var(--sx-brand); color: #fff; font-size: 14px; font-weight: 600; white-space: nowrap;
  box-shadow: 0 8px 22px var(--sx-glow); transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.sx .sx-cta span { position: relative; z-index: 1; }
.sx .sx-cta::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent); transform: skewX(-20deg);
}
.sx .sx-cta:hover { color: #fff; background: var(--sx-brand-dark); transform: translateY(-1px); box-shadow: 0 14px 30px rgba(208, 146, 221, .6); }
.sx .sx-cta:hover::after { left: 130%; transition: left .6s ease; }
.sx .sx-burger { display: none; }

/* ---------- The dropdown: one dark card that changes size and slides between menus ---------- */
.sx .sx-drop {
  position: absolute; z-index: 2; top: calc(var(--sx-h) + 4px); left: 0; width: 0; height: 0;
  opacity: 0; visibility: hidden; transform: translateY(-8px) scale(.98); transform-origin: top center;
  transition: opacity .2s ease, transform .35s var(--sx-ease), visibility 0s linear .35s;
}
.sx.is-open .sx-drop { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.sx .sx-drop-bg {
  position: absolute; top: 0; left: 0; width: 600px; height: 400px; border-radius: 22px;
  background: radial-gradient(420px 300px at 100% 100%, rgba(208, 146, 221, .26), transparent 70%), var(--sx-ink);
  box-shadow: 0 40px 80px rgba(15, 15, 20, .35), inset 0 0 0 1px rgba(255, 255, 255, .06);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--sx-slant)), 0 100%);
  transition: width .4s var(--sx-ease), height .4s var(--sx-ease), transform .4s var(--sx-ease);
}
.sx .sx-drop.no-move, .sx .sx-drop.no-move .sx-drop-bg { transition: none; }
.sx .sx-pane {
  position: absolute; top: 0; left: 0; color: #fff;
  opacity: 0; visibility: hidden; pointer-events: none; transform: translateX(28px);
  transition: opacity .22s ease, transform .4s var(--sx-ease), visibility 0s linear .4s;
}
.sx .sx-pane.is-before { transform: translateX(-28px); }
.sx .sx-pane.is-active { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition-delay: .05s, 0s, 0s; }
.sx .sx-pane-head, .sx .sx-pane--link, .sx .sx-sheet-foot { display: none; }
.sx .sx-pane-in { padding: 30px 32px calc(var(--sx-slant) + 30px); }

.sx .sx-label { margin-bottom: 12px; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .45); }
.sx .sx-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; font-size: 14px; font-weight: 700; color: var(--sx-brand); }
.sx .sx-more svg { width: 14px; height: 14px; transition: transform .18s ease; }
.sx .sx-more:hover { color: var(--sx-brand); }
.sx .sx-more:hover svg { transform: translateX(4px); }

/* Product: big type on the left, a picture and one line on the right that follow the pointer */
.sx .sx-pane--product .sx-pane-in { display: grid; grid-template-columns: 470px 380px; gap: 36px; width: 950px; }
.sx .sx-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.sx .sx-list a {
  position: relative; display: flex; align-items: center; gap: 10px; padding: 6px 0;
  font-size: 19px; font-weight: 700; letter-spacing: -.025em; line-height: 1.25; color: rgba(255, 255, 255, .62);
  transition: color .18s ease, transform .25s var(--sx-ease);
}
.sx .sx-list a::before { content: ''; width: 0; height: 2px; border-radius: 2px; background: var(--sx-brand); transition: width .25s var(--sx-ease); }
.sx .sx-list a:hover, .sx .sx-list a.is-on { color: #fff; }
.sx .sx-list a.is-on::before { width: 14px; }
.sx .sx-list--small a { font-size: 16px; font-weight: 600; padding: 5px 0; }

.sx .sx-stage { display: flex; flex-direction: column; gap: 16px; }
/* four phones fanned out; the product under the pointer brings its screen to the front */
.sx .sx-stage-frame {
  position: relative; display: block; height: 300px; border-radius: 16px; overflow: hidden;
  background: radial-gradient(240px 190px at 50% 78%, rgba(208, 146, 221, .42), transparent 70%), var(--sx-ink-2);
}
.sx .sx-phone {
  position: absolute; left: 50%; bottom: -34px; width: 132px; height: auto; transform-origin: 50% 100%;
  transform: translateX(calc(-50% + var(--x))) rotate(var(--r)) scale(.8);
  opacity: .5; filter: brightness(.72); z-index: var(--z);
  transition: transform .55s var(--sx-ease), opacity .3s ease, filter .3s ease;
}
.sx .sx-phone[data-phone="welcome"] { --x: -118px; --r: -10deg; --z: 1; }
.sx .sx-phone[data-phone="menu"] { --x: -40px; --r: -3deg; --z: 2; }
.sx .sx-phone[data-phone="dish"] { --x: 40px; --r: 3deg; --z: 2; }
.sx .sx-phone[data-phone="tracking"] { --x: 118px; --r: 10deg; --z: 1; }
.sx .sx-stage-frame[data-active="welcome"] .sx-phone[data-phone="welcome"],
.sx .sx-stage-frame[data-active="menu"] .sx-phone[data-phone="menu"],
.sx .sx-stage-frame[data-active="dish"] .sx-phone[data-phone="dish"],
.sx .sx-stage-frame[data-active="tracking"] .sx-phone[data-phone="tracking"] {
  z-index: 5; opacity: 1; filter: drop-shadow(0 26px 30px rgba(0, 0, 0, .5));
  transform: translateX(-50%) translateY(-12px) rotate(0deg) scale(1.02);
}
.sx .sx-stage-note {
  position: absolute; z-index: 6; top: 12px; left: 14px; padding: 4px 10px; border-radius: 999px;
  background: rgba(20, 19, 25, .6); font-size: 11px; font-weight: 600; color: rgba(255, 255, 255, .7);
}
.sx .sx-stage-line { min-height: 48px; transition: opacity .15s ease; font-size: 18px; font-weight: 700; letter-spacing: -.02em; line-height: 1.3; }
.sx .sx-stage-line.is-swapping { opacity: 0; }
.sx .sx-stage-line em, .sx .sx-big strong { font-style: normal; color: var(--sx-brand); }

/* Case studies: one big number that changes with the photo under the pointer */
.sx .sx-pane--stories .sx-pane-in { display: grid; grid-template-columns: 290px 560px; gap: 12px 36px; width: 950px; }
.sx .sx-big { display: flex; flex-direction: column; justify-content: center; }
.sx .sx-big strong { font-size: 76px; font-weight: 900; letter-spacing: -.05em; line-height: .95; transition: opacity .2s ease, transform .3s var(--sx-ease); }
.sx .sx-big span { margin-top: 12px; font-size: 20px; font-weight: 700; letter-spacing: -.02em; line-height: 1.25; }
.sx .sx-big small { margin-top: 8px; font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, .55); }
.sx .sx-big.is-swapping strong { opacity: 0; transform: translateY(10px); }
.sx .sx-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sx .sx-tiles a { position: relative; display: block; height: 150px; border-radius: 14px; overflow: hidden; background: var(--sx-ink-2); }
.sx .sx-tiles img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .72; transition: opacity .3s ease, transform .6s var(--sx-ease); }
.sx .sx-tiles a::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(20, 19, 25, .8)); }
.sx .sx-tiles a:hover img, .sx .sx-tiles a.is-on img { opacity: 1; transform: scale(1.05); }
.sx .sx-tiles a.is-on { box-shadow: inset 0 0 0 2px var(--sx-brand); }
.sx .sx-tile-name { position: absolute; z-index: 1; left: 14px; bottom: 12px; font-size: 14px; font-weight: 700; }
.sx .sx-tile-cap { display: none; }
.sx .sx-more--end { grid-column: 2; justify-self: end; margin-top: 4px; }

/* Resources */
.sx .sx-pane--resources .sx-pane-in { display: grid; grid-template-columns: repeat(3, 170px) 230px; gap: 28px; width: 820px; }
.sx .sx-card {
  position: relative; display: flex; flex-direction: column; padding: 20px; border-radius: 16px;
  background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); transition: background .18s ease;
}
.sx .sx-card:hover { background: rgba(208, 146, 221, .16); }
.sx .sx-card b { font-size: 18px; font-weight: 800; letter-spacing: -.02em; }
.sx .sx-card span { margin-top: 4px; font-size: 14px; color: rgba(255, 255, 255, .6); }
.sx .sx-card svg { width: 18px; height: 18px; margin-top: auto; padding-top: 0; color: var(--sx-brand); transition: transform .18s ease; }
.sx .sx-card:hover svg { transform: translateX(4px); }
.sx .sx-cards { display: flex; flex-direction: column; gap: 12px; }   /* log in, and contact support under it (JP, 26/10/2026) */
.sx .sx-cards .sx-card { flex: 1; }

@media (prefers-reduced-motion: reduce) {
  .sx *, .sx *::before, .sx *::after { transition-duration: 0s !important; animation: none !important; }
}

/* ---------- Phones and tablets: a full-screen dark sheet ---------- */
@media (max-width: 1000px) {
  .sx .sx-shell, .sx.is-float .sx-shell { padding: 0 8px 0 20px; gap: 12px; }
  .sx .sx-items, .sx .sx-actions { display: none; }
  .sx .sx-burger { display: grid; place-content: center; gap: 6px; width: 44px; height: 44px; margin-left: auto; border-radius: 12px; }
  .sx .sx-burger span { display: block; width: 22px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .3s var(--sx-ease); }
  .sx.is-sheet .sx-burger span:first-child { transform: translateY(4px) rotate(45deg); }
  .sx.is-sheet .sx-burger span:last-child { transform: translateY(-4px) rotate(-45deg); }
  /* fixed, not absolute: locking the page scroll stops the sticky header sticking, so an absolute bar (and its X) scrolled off screen (Liam, 30/10/2026) */
  .sx.is-sheet .sx-shell { position: fixed; top: 0; left: 0; right: 0; height: var(--sx-h); padding: 0 8px 0 20px; border-radius: 0; background: var(--sx-ink); box-shadow: none; color: #fff; }
  .sx.is-sheet .sx-logo-dark { opacity: 0; }
  .sx.is-sheet .sx-logo-light { opacity: 1; }

  .sx .sx-drop, .sx.is-open .sx-drop {
    position: fixed; inset: 0; top: 0; width: auto; height: auto; padding-top: var(--sx-h);
    display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain;
    background: radial-gradient(500px 400px at 100% 100%, rgba(208, 146, 221, .3), transparent 70%), var(--sx-ink);
    opacity: 1; visibility: hidden; transform: none;
    clip-path: circle(0 at calc(100% - 40px) 32px);
    transition: clip-path .55s var(--sx-ease), visibility 0s linear .55s;
  }
  .sx.is-sheet .sx-drop { visibility: visible; clip-path: circle(150% at calc(100% - 40px) 32px); transition-delay: 0s; }
  html.sx-locked, html.sx-locked body { overflow: hidden; }
  .sx .sx-drop-bg { display: none; }

  .sx .sx-pane, .sx .sx-pane.is-before, .sx .sx-pane.is-active {
    position: static; opacity: 0; visibility: visible; pointer-events: auto; transform: translateY(18px);
    margin: 0 20px; border-bottom: 1px solid rgba(255, 255, 255, .1);
    transition: opacity .4s ease, transform .5s var(--sx-ease);
  }
  .sx.is-sheet .sx-pane { opacity: 1; transform: none; }
  .sx.is-sheet .sx-pane:nth-of-type(1) { transition-delay: .12s; }
  .sx.is-sheet .sx-pane:nth-of-type(2) { transition-delay: .18s; }
  .sx.is-sheet .sx-pane:nth-of-type(3) { transition-delay: .24s; }
  .sx.is-sheet .sx-pane:nth-of-type(4) { transition-delay: .30s; }
  .sx .sx-pane--link { display: block; }
  .sx .sx-pane-head {
    display: flex; align-items: baseline; gap: 14px; width: 100%; padding: 18px 0;
    font-size: 38px; font-weight: 800; letter-spacing: -.04em; line-height: 1.05; color: #fff;
  }
  .sx .sx-pane-head i { font-style: normal; font-size: 13px; font-weight: 700; letter-spacing: 0; color: var(--sx-brand); transform: translateY(-14px); }
  .sx .sx-pane.is-expanded .sx-pane-head { color: var(--sx-brand); }

  .sx .sx-pane-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--sx-ease); }
  .sx .sx-pane.is-expanded .sx-pane-body { grid-template-rows: 1fr; }
  .sx .sx-pane-body > .sx-pane-in { min-height: 0; overflow: hidden; }
  .sx .sx-pane-in, .sx .sx-pane--product .sx-pane-in, .sx .sx-pane--stories .sx-pane-in, .sx .sx-pane--resources .sx-pane-in {
    display: block; width: auto; padding: 0;
  }
  .sx .sx-pane.is-expanded .sx-pane-in { padding-bottom: 22px; }
  .sx .sx-stage, .sx .sx-big { display: none; }
  .sx .sx-cols { display: block; }
  .sx .sx-cols > div + div, .sx .sx-pane--resources .sx-pane-in > div + div { margin-top: 18px; }
  .sx .sx-list a { font-size: 20px; padding: 5px 0; color: rgba(255, 255, 255, .8); }
  .sx .sx-list a::before { display: none; }
  .sx .sx-card { margin-top: 20px; }
  .sx .sx-cards .sx-card + .sx-card { margin-top: 0; }
  .sx .sx-card svg { position: absolute; right: 20px; top: 50%; margin-top: -9px; }

  .sx .sx-tiles { display: flex; gap: 12px; margin: 0 -20px; padding: 0 20px 4px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 20px; scrollbar-width: none; }
  .sx .sx-tiles li { flex: 0 0 76%; scroll-snap-align: start; }
  .sx .sx-tiles a { height: 210px; }
  .sx .sx-tiles img { opacity: .85; }
  .sx .sx-tiles a::after { background: linear-gradient(180deg, rgba(20, 19, 25, .1) 20%, rgba(20, 19, 25, .88)); }
  .sx .sx-tile-cap { position: absolute; z-index: 1; left: 16px; right: 16px; bottom: 38px; display: block; font-size: 15px; font-weight: 600; line-height: 1.3; }
  .sx .sx-tile-cap b { display: block; font-size: 34px; font-weight: 900; letter-spacing: -.04em; line-height: 1; color: var(--sx-brand); }
  .sx .sx-tile-name { left: 16px; bottom: 14px; font-size: 12px; opacity: .7; }

  .sx .sx-sheet-foot { display: block; position: sticky; bottom: 0; margin-top: auto; padding-top: 24px; background: linear-gradient(180deg, transparent, var(--sx-ink) 28px); }
  .sx .sx-ticker { overflow: hidden; padding: 10px 0; border-top: 1px solid rgba(255, 255, 255, .1); border-bottom: 1px solid rgba(255, 255, 255, .1); }
  .sx .sx-ticker > div { display: flex; width: max-content; animation: sx-tick 28s linear infinite; }
  .sx .sx-ticker span { padding: 0 22px; font-size: 13px; color: rgba(255, 255, 255, .6); white-space: nowrap; }
  .sx .sx-ticker b { color: var(--sx-brand); font-weight: 800; }
  .sx .sx-sheet-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px)); }
  .sx .sx-sheet-actions .sx-login, .sx .sx-sheet-actions .sx-cta { justify-content: center; height: 52px; border-radius: 16px; font-size: 15px; opacity: 1; }
  .sx .sx-sheet-actions .sx-login { color: #fff; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .2); }
}
@keyframes sx-tick { to { transform: translateX(-50%); } }

/* ---------- 07/10/2026 (Liam): always the dark pill; products by theme; case studies with a quote,
   who we work with and a clear button; integrations as a menu ---------- */
.sx .sx-shell { transition: none; }
.sx .sx-pane--product .sx-pane-in { grid-template-columns: 640px 300px; width: 976px; }   /* width = the columns, so the card fits its content */
.sx .sx-cols--3 { grid-template-columns: repeat(3, 1fr); gap: 22px; align-content: space-between; }
.sx .sx-cols--3 .sx-list a { font-size: 17px; }
.sx .sx-cols-foot { grid-column: 1 / -1; display: flex; align-items: center; gap: 24px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, .7); }
.sx .sx-cols-foot a:hover { color: #fff; }
.sx .sx-cols-foot .sx-more { margin: 0 0 0 auto; }
.sx .sx-pane--product .sx-stage-frame { height: 260px; }
/* case studies */
.sx .sx-pane--stories .sx-pane-in { grid-template-columns: 290px 560px; grid-template-rows: auto auto; width: 886px; }
.sx .sx-tiles a { border-radius: 4px; }   /* much less rounding (Liam) */
.sx .sx-quote { margin: 0; align-self: end; }
.sx .sx-quote blockquote { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.45; color: rgba(255, 255, 255, .88); }
.sx .sx-quote figcaption { margin-top: 8px; font-size: 13px; color: rgba(255, 255, 255, .55); }
.sx .sx-quote figcaption b { color: #fff; font-weight: 700; }
.sx .sx-who { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.sx .sx-who .sx-label { margin: 0; width: 100%; }
.sx .sx-who ul { display: flex; flex-wrap: wrap; gap: 6px 16px; flex: 1; }
.sx .sx-who a { font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, .72); }
.sx .sx-who a:hover { color: #fff; }
.sx .sx-btn { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 18px; border-radius: 10px; background: var(--sx-brand); color: var(--sx-ink); font-size: 14px; font-weight: 700; white-space: nowrap; transition: background .18s ease; }
.sx .sx-btn svg { width: 14px; height: 14px; transition: transform .18s ease; }
.sx .sx-btn:hover { background: #fff; color: var(--sx-ink); }
.sx .sx-btn:hover svg { transform: translateX(3px); }
/* integrations */
.sx .sx-pane--integrations .sx-pane-in { display: grid; grid-template-columns: 470px 260px; gap: 32px; width: 762px; }
.sx .sx-logos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.sx .sx-logos li { display: grid; place-items: center; height: 62px; padding: 0 14px; border-radius: 6px; background: rgba(255, 255, 255, .06); }
.sx .sx-logos img { max-height: 24px; max-width: 100%; width: auto; filter: brightness(0) invert(1); opacity: .85; }
.sx .sx-int-links { display: flex; align-items: center; gap: 22px; margin-top: 18px; font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, .7); }
.sx .sx-int-links .sx-more { margin: 0; }
.sx .sx-int-links a:hover { color: #fff; }
.sx .sx-card--stack { background: linear-gradient(150deg, rgba(208, 146, 221, .28), rgba(208, 146, 221, .08)); }
.sx .sx-card--stack b { font-size: 20px; line-height: 1.2; }
.sx .sx-card--stack span { margin-top: 10px; line-height: 1.45; }
@media (max-width: 1000px) {
  .sx .sx-pane--integrations .sx-pane-in { display: block; width: auto; padding: 0; }
  /* Phone sheet (Liam, 30/10/2026): no About column under Resources, and All integrations straight under the heading */
  .sx .sx-pane--resources .sx-res-about { display: none; }
  .sx .sx-pane--integrations .sx-pane-in > div:first-child { display: flex; flex-direction: column; }
  .sx .sx-pane--integrations .sx-pane-in > div:first-child .sx-label { order: 0; }
  .sx .sx-pane--integrations .sx-pane-in > div:first-child .sx-int-links { order: 1; margin: 0 0 16px; }
  .sx .sx-pane--integrations .sx-pane-in > div:first-child .sx-logos { order: 2; }
  .sx .sx-logos { grid-template-columns: repeat(2, 1fr); }
  .sx .sx-cols--3 { display: block; }
  .sx .sx-cols--3 > div + div { margin-top: 18px; }
  .sx .sx-quote, .sx .sx-who { margin-top: 18px; }
}

/* 07/10/2026 (Liam): content no longer hangs past the card while it resizes, pink column labels, square corners */
@media (min-width: 1001px) {
  /* the drop itself resizes with the card and clips to it; its shadow is a filter, so the clip doesn't cut it off */
  .sx .sx-drop { overflow: hidden; filter: drop-shadow(0 30px 44px rgba(15, 15, 20, .32));
    transition: opacity .2s ease, transform .35s var(--sx-ease), visibility 0s linear .35s, left .4s var(--sx-ease), width .4s var(--sx-ease), height .4s var(--sx-ease); }
  .sx .sx-drop-bg { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
}
.sx .sx-label { color: var(--sx-brand); }
.sx.is-float .sx-shell, .sx.is-open .sx-shell { border-radius: 4px; }
.sx .sx-drop-bg { border-radius: 4px; }
.sx .sx-blob, .sx .sx-cta, .sx .sx-btn, .sx .sx-card, .sx .sx-stage-frame, .sx .sx-stage-note,
.sx .sx-tiles a, .sx .sx-logos li, .sx a:focus-visible, .sx button:focus-visible { border-radius: 2px; }
@media (max-width: 1000px) {
  .sx .sx-burger, .sx .sx-sheet-actions .sx-login, .sx .sx-sheet-actions .sx-cta { border-radius: 2px; }
}

/* ---------- 07/10/2026 (Liam): option B, then his changes the same day. A flat white bar, the same at
   every scroll position, with the sliding highlight on the menus (no underline). The menus open into one
   white card the size of the menu, a small gap below the bar, ending in Slerp's diagonal with an ink line along
   it. Slight rounding everywhere. Buttons stay as they were, in Bubble. The side calls to action in Resources
   and Integrations are a line of text, not a box. Phones keep the dark full-screen sheet. ---------- */
.sx .sx-shell, .sx.is-open .sx-shell {
  top: 0; left: 0; right: 0; height: var(--sx-h); border-radius: 0;
  padding: 0 max(24px, calc((100% - var(--sx-wrap)) / 2 + 24px));
  background: #fff; box-shadow: 0 1px 0 rgba(30, 30, 40, .08); color: var(--sx-ink);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.sx .sx-logo-dark, .sx.is-open .sx-logo-dark { opacity: 1; }
.sx .sx-logo-light, .sx.is-open .sx-logo-light { opacity: 0; }
.sx .sx-blob, .sx.is-open .sx-blob { background: var(--sx-paper); }
.sx .sx-trigger[aria-expanded="true"], .sx.is-open .sx-trigger[aria-expanded="true"] { color: var(--sx-brand); }

/* slight rounding on everything */
.sx .sx-blob, .sx .sx-cta, .sx .sx-btn, .sx .sx-stage-frame, .sx .sx-tiles a, .sx .sx-card,
.sx a:focus-visible, .sx button:focus-visible { border-radius: 8px; }
.sx .sx-stage-note { border-radius: 6px; }
@media (max-width: 1000px) {
  .sx .sx-shell, .sx.is-open .sx-shell { padding: 0 8px 0 20px; }
  .sx .sx-burger, .sx .sx-sheet-actions .sx-login, .sx .sx-sheet-actions .sx-cta { border-radius: 8px; }
}

@media (min-width: 1001px) {
  .sx .sx-drop { top: calc(var(--sx-h) + 10px); right: auto;
    filter: drop-shadow(0 24px 40px rgba(30, 30, 40, .14)) drop-shadow(0 2px 6px rgba(30, 30, 40, .06)); transform: translateY(-6px); }
  .sx.is-open .sx-drop { transform: none; }
  /* the panel is an ink shape with a white one inside it, 2px shorter, so the diagonal gets its line */
  .sx .sx-drop-bg { border-radius: 4px 4px 0 0; background: var(--sx-ink); box-shadow: none;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--sx-slant)), 0 100%); }
  .sx .sx-drop-bg::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: #fff;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--sx-slant) - 2px), 0 calc(100% - 2px)); }
  .sx .sx-pane { left: 0; color: var(--sx-ink); }
  .sx .sx-pane-in { padding: 30px 32px calc(var(--sx-slant) + 32px); }

  .sx .sx-label { color: var(--sx-brand); }
  .sx .sx-more, .sx .sx-more:hover { color: var(--sx-ink); }
  .sx .sx-more svg { color: var(--sx-brand); }
  .sx .sx-list a { color: rgba(30, 30, 40, .72); }
  .sx .sx-list a:hover, .sx .sx-list a.is-on { color: var(--sx-ink); }
  .sx .sx-cols-foot { border-top-color: rgba(30, 30, 40, .1); color: rgba(30, 30, 40, .72); }
  .sx .sx-cols-foot a:hover { color: var(--sx-ink); }

  .sx .sx-stage-frame { background: radial-gradient(240px 190px at 50% 78%, rgba(208, 146, 221, .5), transparent 70%), #f7e8fa; }
  .sx .sx-phone { filter: none; opacity: .55; }
  .sx .sx-stage-frame[data-active="welcome"] .sx-phone[data-phone="welcome"],
  .sx .sx-stage-frame[data-active="menu"] .sx-phone[data-phone="menu"],
  .sx .sx-stage-frame[data-active="dish"] .sx-phone[data-phone="dish"],
  .sx .sx-stage-frame[data-active="tracking"] .sx-phone[data-phone="tracking"] { opacity: 1; filter: drop-shadow(0 22px 26px rgba(30, 30, 40, .3)); }
  .sx .sx-stage-line em, .sx .sx-big strong { color: var(--sx-brand); }

  .sx .sx-big small { color: rgba(30, 30, 40, .6); }
  .sx .sx-tile-name { color: #fff; }
  .sx .sx-quote blockquote { color: var(--sx-ink); }
  .sx .sx-quote figcaption { color: rgba(30, 30, 40, .6); }
  .sx .sx-quote figcaption b { color: var(--sx-ink); }
  .sx .sx-who a { color: rgba(30, 30, 40, .72); }
  .sx .sx-who a:hover { color: var(--sx-ink); }
  .sx .sx-who .sx-btn { color: var(--sx-ink); }   /* the button as it was: Bubble, ink type */

  /* Resources and Integrations: the call to action is a line of text by a Bubble rule, not a box */
  .sx .sx-card, .sx .sx-card--stack { display: block; padding: 2px 0 2px 20px; line-height: 1.3; border-radius: 0; background: none; box-shadow: inset 2px 0 0 var(--sx-brand); align-self: start; }
  .sx .sx-card:hover, .sx .sx-card--stack:hover { background: none; }
  .sx .sx-card b, .sx .sx-card--stack b { display: inline; font-size: 17px; font-weight: 700; line-height: 1.3; letter-spacing: -.02em; }
  .sx .sx-card svg { display: inline-block; width: 15px; height: 15px; margin: 0 0 -2px 6px; padding: 0; color: var(--sx-brand); vertical-align: baseline; }
  .sx .sx-card span, .sx .sx-card--stack span { display: block; margin-top: 6px; font-size: 14px; line-height: 1.45; color: rgba(30, 30, 40, .62); }
  .sx .sx-card:hover b { color: var(--sx-brand); }

  .sx .sx-logos li { height: 52px; padding: 0 10px; background: none; box-shadow: none; }
  .sx .sx-logos img { filter: brightness(0); opacity: .75; }
  .sx .sx-int-links { color: rgba(30, 30, 40, .72); }
  .sx .sx-int-links a:hover { color: var(--sx-ink); }
}

/* 07/10/2026 (Liam): the menus were cut off on the right while the card grew to the new menu's size.
   The card now resizes quickly and the new menu fades in once it has, from a small slide the padding absorbs. */
@media (min-width: 1001px) {
  .sx .sx-drop { transition: opacity .2s ease, transform .35s var(--sx-ease), visibility 0s linear .35s, left .22s var(--sx-ease), width .22s var(--sx-ease), height .22s var(--sx-ease); }
  .sx .sx-drop-bg { transition: width .22s var(--sx-ease), height .22s var(--sx-ease); }
  .sx .sx-pane { transform: translateX(12px); transition: opacity .16s ease, transform .3s var(--sx-ease), visibility 0s linear .3s; }
  .sx .sx-pane.is-before { transform: translateX(-12px); }
  .sx .sx-pane.is-active { transform: none; transition-delay: .2s, .2s, 0s; }
  .sx .sx-drop.no-move .sx-pane.is-active { transition-delay: 0s; }
  /* case studies without the quote: the number takes the left column, who we work with sits under the photos */
  .sx .sx-pane--stories .sx-big { grid-row: 1 / span 2; }
  .sx .sx-pane--stories .sx-who { grid-column: 2; }
}
/* each case study tile carries the brand's logo, white, in place of its name */
.sx .sx-tiles .sx-tile-logo, .sx .sx-tiles a:hover .sx-tile-logo, .sx .sx-tiles a.is-on .sx-tile-logo {
  position: absolute; z-index: 1; inset: auto auto 14px 16px; width: auto; height: auto; max-width: 130px; max-height: 46px;
  object-fit: contain; opacity: 1; transform: none; }
.sx .sx-pane--resources .sx-pane-in { grid-template-columns: repeat(3, 170px) 250px; width: 840px; }
/* phones: the desktop widths above don't apply in the sheet */
@media (max-width: 1000px) {
  .sx .sx-pane--product .sx-pane-in, .sx .sx-pane--stories .sx-pane-in, .sx .sx-pane--resources .sx-pane-in, .sx .sx-pane--integrations .sx-pane-in { display: block; width: auto; padding: 0; }
  .sx .sx-pane.is-expanded .sx-pane-in { padding-bottom: 22px; }
}
@media (max-width: 1000px) {
  .sx .sx-who ul { flex-basis: 100%; }
  .sx .sx-who .sx-btn { color: var(--sx-ink); }
}
/* the options in Product and Resources a step lighter: 700/600 to 500 (Liam, 07/10/2026) */
@media (min-width: 1001px) {
  .sx .sx-list a, .sx .sx-cols--3 .sx-list a, .sx .sx-list--small a { font-weight: 500; letter-spacing: -.015em; }
}
/* the hover line on every menu, not only the ones that swap a picture (Liam, 09/10/2026) */
@media (min-width: 1001px) { .sx .sx-list a:hover::before, .sx .sx-list a:focus-visible::before { width: 14px; } }

/* ---- The four menus in the "sell direct" style (Liam, 13/10/2026) ----
   Each menu fills the whole dropdown: tinted panels deepening paper > pink > ink, mixed-case headings ending
   on a Bubble word. Product: each product shows its own picture from the home page's "Everything you need to
   sell direct" section, on the ink panel. Case studies: four photos in a row. Resources and Integrations: plain
   links and logos on the panels, the log-in and stack builder cards as the ink panel. Desktop only; the phone
   sheet is unchanged. Built from the previews made by sell-direct-options.py, stories-options.py and
   menus-options.py, in this order. */
/*  design 10: Full bleed  */
@media (min-width: 1001px) {
  .sx .sx-pane--product .sx-label.sx-label--big { margin: 0 0 14px; font-size: 19px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; text-transform: none; color: #1e1e28; }
  .sx .sx-pane--product .sx-label.sx-label--big span { color: #d092dd; }
  .sx .sx-pane--product .sx-cols--3 .sx-list a { white-space: nowrap; letter-spacing: -.01em; }
  .sx .sx-pane--product .sx-cols-foot { padding-top: 14px; }

  .sx .sx-pane--product .sx-cols--3 .sx-list a::before { display: none !important; }
  .sx .sx-pane--product .sx-cols--3 { gap: 10px; }
  .sx .sx-pane--product .sx-cols--3 > div:not(.sx-cols-foot) { padding: 20px 18px 18px; background: #f4f2ee; }
  .sx .sx-pane--product .sx-cols--3 > div:nth-child(2) { background: #f7e8fa; }
  .sx .sx-pane--product .sx-cols--3 > div:nth-child(3) { background: linear-gradient(150deg, #efd6f4, #f7e8fa 75%); }
  .sx .sx-pane--product .sx-label.sx-label--big { margin: 0 0 14px; font-size: 19px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; text-transform: none; color: #1e1e28; }
  .sx .sx-pane--product .sx-label.sx-label--big span { color: #d092dd; }
  .sx .sx-pane--product .sx-cols--3 .sx-list { display: flex; flex-direction: column; gap: 6px; }
  .sx .sx-pane--product .sx-cols--3 .sx-list a { display: flex; justify-content: space-between; align-items: center; padding: 9px 12px; border-radius: 4px; background: rgba(255,255,255,.75); color: #1e1e28; font-size: 14px; letter-spacing: -.01em; white-space: nowrap; font-weight: 600; transition: background .2s, color .2s; }
  .sx .sx-pane--product .sx-cols--3 .sx-list a::before { display: none !important; }
  .sx .sx-pane--product .sx-cols--3 .sx-list a::after { content: '\203A'; opacity: .4; transition: transform .2s, opacity .2s; }
  .sx .sx-pane--product .sx-cols--3 .sx-list a:hover, .sx .sx-pane--product .sx-cols--3 .sx-list a.is-on, .sx .sx-pane--product .sx-cols--3 .sx-list a:focus-visible { background: #1e1e28; color: #fff; }
  .sx .sx-pane--product .sx-cols--3 .sx-list a:hover::after, .sx .sx-pane--product .sx-cols--3 .sx-list a.is-on::after { opacity: 1; transform: translateX(2px); }
  .sx .sx-pane--product .sx-cols-foot { padding-top: 14px; }
  .sx .sx-pane--product .sx-pane-in { padding: 0; gap: 0; grid-template-columns: 690px 300px; width: 990px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--sx-slant)), 0 100%); }
  .sx .sx-pane--product .sx-cols--3 { gap: 0; grid-template-rows: 1fr auto; align-content: stretch; }
  .sx .sx-pane--product .sx-cols--3 > div:not(.sx-cols-foot) { grid-row: 1 / 3; padding: 30px 26px calc(var(--sx-slant) + 74px); }
  .sx .sx-pane--product .sx-cols--3 > div:nth-child(1) { grid-column: 1; }
  .sx .sx-pane--product .sx-cols--3 > div:nth-child(2) { grid-column: 2; }
  .sx .sx-pane--product .sx-cols--3 > div:nth-child(3) { grid-column: 3; }
  .sx .sx-pane--product .sx-cols--3 > .sx-cols-foot { grid-row: 2; grid-column: 1 / -1; z-index: 1; padding: 14px 26px calc(var(--sx-slant) + 18px); border-top: 1px solid rgba(30,30,40,.1); }
  .sx .sx-pane--product .sx-stage { padding: 30px 26px calc(var(--sx-slant) + 22px); background: radial-gradient(260px 220px at 100% 100%, rgba(208,146,221,.3), transparent 70%), #1e1e28; }
  .sx .sx-pane--product .sx-stage-line { color: #fff; min-height: 3.9em; }
  .sx .sx-pane--product .sx-label.sx-label--big span { display: block; }
  .sx .sx-pane--product .sx-stage-frame { height: 250px; }

  .sx .sx-pane--product .sx-stage-frame { background: none; border-radius: 0; overflow: visible; }
  .sx .sx-pane--product .sx-stage-frame .sx-pic { position: absolute; left: 50%; bottom: 0; height: 100%; width: auto; max-width: 100%; object-fit: contain; object-position: 50% 100%;
      transform: translate(-50%, 10px) scale(.96); opacity: 0; transition: opacity .3s ease, transform .45s var(--sx-ease); }
  .sx .sx-pane--product .sx-stage-frame .sx-pic--laptop { height: auto; width: 100%; bottom: 30px; }
  .sx .sx-pane--product .sx-stage-frame .sx-pic--card { height: auto; width: 100%; bottom: 26px; }
  .sx .sx-pane--product .pc-google { display: block; padding: 14px 14px 0; border-radius: 12px; overflow: hidden; background: #fff; color: #1f1f1f; font-size: 11.5px; line-height: 1.35; text-align: left; }
  .sx .sx-pane--product .pc-google .g-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; padding: 6px 10px; border-radius: 99px; background: #f1f3f4; color: #5f6368; }
  .sx .sx-pane--product .pc-google .g-logo { width: 15px; height: 15px; flex: none; }
  .sx .sx-pane--product .pc-google > b { display: block; font-size: 17px; font-weight: 600; }
  .sx .sx-pane--product .pc-google small { display: block; margin-top: 3px; color: #5f6368; font-size: 11px; }
  .sx .sx-pane--product .pc-google .g-btns { display: flex; gap: 6px; margin: 10px 0 12px; }
  .sx .sx-pane--product .pc-google .g-btns span { padding: 5px 10px; border: 1px solid #dadce0; border-radius: 99px; color: #1a73e8; font-weight: 600; white-space: nowrap; }
  .sx .sx-pane--product .pc-google .g-btns .g-order { background: #1a73e8; border-color: #1a73e8; color: #fff; }
  .sx .sx-pane--product .pc-google .g-map { display: block; height: 60px; margin: 0 -14px; background: linear-gradient(115deg, transparent 46%, #fff 46.5%, #fff 50%, transparent 50.5%), linear-gradient(25deg, transparent 60%, #fde293 60.5%, #fde293 64%, transparent 64.5%), linear-gradient(160deg, #e8eaed, #dfe3e7); }
  .sx .sx-pane--product .sx-stage-line { text-align: center; }
  .sx .sx-pane--product .sx-stage-frame[data-active="web"] .sx-pic[data-phone="web"] { opacity: 1; transform: translate(-50%, 0); }
  .sx .sx-pane--product .sx-stage-frame[data-active="app"] .sx-pic[data-phone="app"] { opacity: 1; transform: translate(-50%, 0); }
  .sx .sx-pane--product .sx-stage-frame[data-active="google"] .sx-pic[data-phone="google"] { opacity: 1; transform: translate(-50%, 0); }
  .sx .sx-pane--product .sx-stage-frame[data-active="delivery"] .sx-pic[data-phone="delivery"] { opacity: 1; transform: translate(-50%, 0); }
  .sx .sx-pane--product .sx-stage-frame[data-active="collect"] .sx-pic[data-phone="collect"] { opacity: 1; transform: translate(-50%, 0); }
  .sx .sx-pane--product .sx-stage-frame[data-active="catering"] .sx-pic[data-phone="catering"] { opacity: 1; transform: translate(-50%, 0); }
  .sx .sx-pane--product .sx-stage-frame[data-active="table"] .sx-pic[data-phone="table"] { opacity: 1; transform: translate(-50%, 0); }
  .sx .sx-pane--product .sx-stage-frame[data-active="loyalty"] .sx-pic[data-phone="loyalty"] { opacity: 1; transform: translate(-50%, 0); }
  .sx .sx-pane--product .sx-stage-frame[data-active="wallet"] .sx-pic[data-phone="wallet"] { opacity: 1; transform: translate(-50%, 0); }
  .sx .sx-pane--product .sx-stage-frame[data-active="crm"] .sx-pic[data-phone="crm"] { opacity: 1; transform: translate(-50%, 0); }
}
/*  case studies A1: Four tall photos, deeper shade, brighter pink  */
@media (min-width: 1001px) {
  .sx .sx-pane--stories .sx-pane-in { display: grid; padding: 0; gap: 0; width: 990px; grid-template-rows: auto auto;
      clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--sx-slant)), 0 100%); }
  .sx .sx-pane--stories .sx-tiles a { border-radius: 0; }
  .sx .sx-pane--stories .sx-tiles a.is-on { box-shadow: none; }
  .sx .sx-pane--stories .sx-who { grid-column: 1 / -1; padding: 18px 26px calc(var(--sx-slant) + 20px); gap: 10px 14px; }
  .sx .sx-pane--stories .sx-who .sx-label { width: auto; margin: 0 6px 0 0; font-size: 17px; font-weight: 700; letter-spacing: -.02em; text-transform: none; color: #1e1e28; }
  .sx .sx-pane--stories .sx-who { flex-wrap: nowrap; }
  .sx .sx-pane--stories .sx-who ul { gap: 6px; flex-wrap: nowrap; }
  .sx .sx-pane--stories .sx-who ul a { display: block; padding: 8px 10px; white-space: nowrap; font-size: 13.5px !important; border-radius: 4px; background: rgba(255,255,255,.8); color: #1e1e28; font-size: 14px; transition: background .2s, color .2s; }
  .sx .sx-pane--stories .sx-who ul a:hover { background: #1e1e28; color: #fff; }
  .sx .sx-pane--stories .sx-who .sx-btn { border-radius: 4px; background: #1e1e28; color: #fff; }
  .sx .sx-pane--stories .sx-who .sx-btn:hover { background: #d092dd; color: #1e1e28; }

  .sx .sx-pane--stories .sx-tile-cap { position: absolute; z-index: 1; left: 20px; right: 20px; bottom: 82px; display: block; color: #fff; font-size: 15px; font-weight: 600; line-height: 1.3; }
  .sx .sx-pane--stories .sx-tile-cap b { display: block; margin-bottom: 4px; font-size: 40px; font-weight: 900; letter-spacing: -.04em; line-height: 1; color: #d092dd; }

  .sx .sx-pane--stories .sx-pane-in { grid-template-columns: 1fr; }
  .sx .sx-pane--stories .sx-big { display: none; }
  .sx .sx-pane--stories .sx-tiles { grid-template-columns: repeat(4, 1fr); gap: 0; }
  .sx .sx-pane--stories .sx-tiles a { height: 300px; }
  .sx .sx-pane--stories .sx-tiles img { opacity: .9; }
  .sx .sx-pane--stories .sx-tiles a::after { background: linear-gradient(180deg, transparent 30%, rgba(20,19,25,.9)); }
  .sx .sx-pane--stories .sx-who { background: linear-gradient(100deg, #f4f2ee 15%, #f7e8fa 60%, #efd6f4); }

  .sx .sx-pane--stories .sx-tiles a::after { background: linear-gradient(180deg, rgba(20,19,25,0) 20%, rgba(20,19,25,.55) 45%, rgba(20,19,25,.94) 80%); }
  .sx .sx-pane--stories .sx-tile-cap { text-shadow: 0 2px 14px rgba(0,0,0,.45); }

  .sx .sx-pane--stories .sx-tile-cap b { color: #eab8f4; }

  /* sized by eye for equal weight, not one box: Nell's is heavy so smaller, B Bagel square so taller, the two thin
     wordmarks wider; all sit on one line, left-aligned with the words above */
  .sx .sx-pane--stories .sx-tiles .sx-tile-logo, .sx .sx-pane--stories .sx-tiles a:hover .sx-tile-logo, .sx .sx-pane--stories .sx-tiles a.is-on .sx-tile-logo { inset: auto auto 22px 20px; max-width: 210px; max-height: 46px; }
  .sx .sx-pane--stories .sx-tiles .sx-tile-logo[alt^="Harley"] { width: 168px; height: auto; filter: drop-shadow(.7px 0 0 #fff) drop-shadow(-.7px 0 0 #fff) drop-shadow(0 .5px 0 #fff); }
  .sx .sx-pane--stories .sx-tiles .sx-tile-logo[alt^="Nell"] { width: auto; height: 32px; }
  .sx .sx-pane--stories .sx-tiles .sx-tile-logo[alt="B Bagel"] { width: auto; height: 42px; bottom: 17px; }
  .sx .sx-pane--stories .sx-tiles .sx-tile-logo[alt="Sourdough Sophia"] { width: 200px; height: auto; bottom: 26px; filter: drop-shadow(.5px 0 0 #fff) drop-shadow(-.5px 0 0 #fff); }
}
/*  resources and integrations  */
@media (min-width: 1001px) {
  /* Resources: three tinted panels deepening left to right, white buttons, the log-in card as the ink panel */
  .sx .sx-pane--resources .sx-pane-in { display: grid; grid-template-columns: 260px 245px 245px 240px; gap: 0; width: 990px; padding: 0; clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--sx-slant)), 0 100%); }
  .sx .sx-pane--resources .sx-pane-in > div { padding: 30px 24px calc(var(--sx-slant) + 30px); background: #f4f2ee; }
  .sx .sx-pane--resources .sx-pane-in > div:nth-child(2) { background: #f7e8fa; }
  .sx .sx-pane--resources .sx-pane-in > div:nth-child(3) { background: linear-gradient(150deg, #efd6f4, #f7e8fa 75%); }
  .sx .sx-pane--resources .sx-label { margin: 0 0 14px; font-size: 19px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; text-transform: none; color: #1e1e28; }
  .sx .sx-pane--resources .sx-label span { color: #d092dd; }
  .sx .sx-pane--resources .sx-list { display: flex; flex-direction: column; gap: 6px; }
  .sx .sx-pane--resources .sx-list a { display: flex; justify-content: space-between; align-items: center; padding: 9px 12px; border-radius: 4px; background: rgba(255,255,255,.75); color: #1e1e28; font-size: 14px; font-weight: 600; white-space: nowrap; transition: background .2s, color .2s; }
  .sx .sx-pane--resources .sx-list a::before { display: none !important; }
  .sx .sx-pane--resources .sx-list a::after { content: '\203A'; opacity: .4; }
  .sx .sx-pane--resources .sx-list a:hover { background: #1e1e28; color: #fff; }
  .sx .sx-pane--resources .sx-list a:hover::after { opacity: 1; }
  .sx .sx-pane--resources .sx-card { display: flex; flex-direction: column; margin: 0; padding: 30px 24px calc(var(--sx-slant) + 30px); border-radius: 0; align-self: stretch; box-shadow: none;
      background: radial-gradient(260px 220px at 100% 100%, rgba(208,146,221,.3), transparent 70%), #1e1e28; }
  .sx .sx-pane--resources .sx-card b { display: block; font-size: 22px; line-height: 1.15; color: #fff; }
  .sx .sx-pane--resources .sx-card span { order: 1; display: block; margin: 8px 0 24px; color: rgba(255,255,255,.7); }
  .sx .sx-pane--resources .sx-card svg { order: 2; display: block; width: 40px; height: 40px; margin: auto 0 0; padding: 12px; border-radius: 4px; background: #d092dd; color: #1e1e28; }
  .sx .sx-pane--resources .sx-card:hover b, .sx .sx-pane--integrations .sx-card:hover b { color: #fff; }
  .sx .sx-pane--resources .sx-card:hover svg, .sx .sx-pane--integrations .sx-card:hover svg { transform: translateX(4px); }
  .sx .sx-pane--integrations .sx-card:hover, .sx .sx-pane--resources .sx-card:hover { background: radial-gradient(260px 220px at 100% 100%, rgba(208,146,221,.45), transparent 70%), #1e1e28; }

  /* Integrations: the logos as white tiles on a panel warming to pink, the stack builder as the ink panel */
  .sx .sx-pane--integrations .sx-pane-in { display: grid; grid-template-columns: 690px 300px; gap: 0; width: 990px; padding: 0; clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--sx-slant)), 0 100%); }
  .sx .sx-pane--integrations .sx-pane-in > div { padding: 30px 26px calc(var(--sx-slant) + 26px); background: linear-gradient(100deg, #f4f2ee 15%, #f7e8fa 65%, #efd6f4); }
  .sx .sx-pane--integrations .sx-label { margin: 0 0 14px; font-size: 19px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; text-transform: none; color: #1e1e28; }
  .sx .sx-pane--integrations .sx-label span { color: #d092dd; }
  .sx .sx-pane--integrations .sx-logos { gap: 8px; }
  .sx .sx-pane--integrations .sx-logos li { height: 70px; border-radius: 4px; background: #fff; transition: transform .2s; }
  .sx .sx-pane--integrations .sx-logos li:hover { transform: translateY(-2px); }
  .sx .sx-pane--integrations .sx-logos img { filter: none; opacity: 1; max-height: 26px; }
  .sx .sx-pane--integrations .sx-int-links { gap: 8px; margin-top: 16px; }
  .sx .sx-pane--integrations .sx-int-links a { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 4px; background: rgba(255,255,255,.8); color: #1e1e28; transition: background .2s, color .2s; }
  .sx .sx-pane--integrations .sx-int-links .sx-more { background: #1e1e28; color: #fff; }
  .sx .sx-pane--integrations .sx-int-links a:hover { background: #d092dd; color: #1e1e28; }
  .sx .sx-pane--integrations .sx-card { display: flex; flex-direction: column; margin: 0; padding: 30px 26px calc(var(--sx-slant) + 26px); border-radius: 0; align-self: stretch; box-shadow: none;
      background: radial-gradient(260px 220px at 100% 100%, rgba(208,146,221,.3), transparent 70%), #1e1e28; }
  .sx .sx-pane--integrations .sx-card b { display: block; font-size: 24px; line-height: 1.15; color: #fff; }
  .sx .sx-pane--integrations .sx-card b em { font-style: normal; color: #d092dd; }
  .sx .sx-pane--integrations .sx-card span { order: 1; display: block; margin: 10px 0 24px; color: rgba(255,255,255,.7); }
  .sx .sx-pane--integrations .sx-card svg { order: 2; display: block; width: 40px; height: 40px; margin: auto 0 0; padding: 12px; border-radius: 4px; background: #d092dd; color: #1e1e28; }
}
/*  no white containers  */
@media (min-width: 1001px) {
  .sx .sx-pane--product .sx-cols--3 .sx-list, .sx .sx-pane--resources .sx-list { gap: 2px; }
  .sx .sx-pane--product .sx-cols--3 .sx-list a, .sx .sx-pane--resources .sx-list a { justify-content: flex-start; gap: 0; padding: 6px 0; background: none; color: rgba(30,30,40,.78); font-size: 16px; font-weight: 600; transition: color .2s; }
  .sx .sx-pane--product .sx-cols--3 .sx-list a::after, .sx .sx-pane--resources .sx-list a::after { content: none; }
  .sx .sx-pane--product .sx-cols--3 .sx-list a::before, .sx .sx-pane--resources .sx-list a::before { display: block !important; content: ''; width: 0; height: 2px; margin-right: 0; border-radius: 2px; background: #d092dd; transition: width .25s, margin .25s; }
  .sx .sx-pane--product .sx-cols--3 .sx-list a:hover, .sx .sx-pane--product .sx-cols--3 .sx-list a.is-on, .sx .sx-pane--product .sx-cols--3 .sx-list a:focus-visible, .sx .sx-pane--resources .sx-list a:hover { background: none; color: #1e1e28; }
  .sx .sx-pane--product .sx-cols--3 .sx-list a:hover::before, .sx .sx-pane--product .sx-cols--3 .sx-list a.is-on::before, .sx .sx-pane--resources .sx-list a:hover::before { width: 14px; margin-right: 10px; }
  .sx .sx-pane--integrations .sx-logos { gap: 26px 30px; margin: 10px 0 6px; }
  .sx .sx-pane--integrations .sx-logos li { height: 40px; padding: 0; background: none; justify-items: start; }
  .sx .sx-pane--integrations .sx-logos li { justify-items: center; }
  .sx .sx-pane--integrations .sx-logos img { max-height: 23px; max-width: 112px; }
  /* the arrow straight after the heading, small, no box */
  .sx .sx-pane--resources .sx-card, .sx .sx-pane--integrations .sx-card { display: block; }
  .sx .sx-pane--resources .sx-card b, .sx .sx-pane--integrations .sx-card b { display: inline; }
  .sx .sx-pane--resources .sx-card svg, .sx .sx-pane--integrations .sx-card svg { display: inline-block; width: 18px; height: 18px; margin: 0 0 -2px 8px; padding: 0; border-radius: 0; background: none; color: #d092dd; vertical-align: baseline; }
  .sx .sx-pane--resources .sx-card span, .sx .sx-pane--integrations .sx-card span { margin-bottom: 0; }
  .sx .sx-pane--resources .sx-card { padding-left: 22px; padding-right: 18px; }
  .sx .sx-pane--resources .sx-card b { font-size: 19px; }
  /* case studies: every photo zooms the same, only while the pointer is on it (the menu used to keep one zoomed) */
  .sx .sx-pane--stories .sx-tiles a.is-on img { opacity: .9; transform: none; }
  .sx .sx-pane--stories .sx-tiles a:hover img { opacity: 1; transform: scale(1.06); }
  .sx .sx-pane--stories .sx-tile-cap, .sx .sx-pane--stories .sx-tiles .sx-tile-logo { transition: transform .4s var(--sx-ease); }
  .sx .sx-pane--stories .sx-tiles a:hover .sx-tile-cap { transform: translateY(-4px); }
}
/* lines (Liam, 13/10/2026): a rule under each heading in Product and Resources, and a faint one between the case
   studies. The logos are sized by their alt text, not their file, so they survive the review site inlining them. */
@media (min-width: 1001px) {
  .sx .sx-pane--product .sx-label.sx-label--big, .sx .sx-pane--resources .sx-label { padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid rgba(30, 30, 40, .16); }
  .sx .sx-pane--stories .sx-tiles li + li a::before { content: ''; position: absolute; z-index: 2; top: 0; bottom: 0; left: 0; width: 1px; background: rgba(255, 255, 255, .32); }
}
/* Product and Resources: the three panels as one gradient, paper to pink, not three blocks (Liam, 13/10/2026) */
@media (min-width: 1001px) {
  .sx .sx-pane--product .sx-cols--3 { background: linear-gradient(90deg, #f4f2ee 0%, #f6ecf3 35%, #f4e0f6 70%, #ecc9f3 100%); }
  .sx .sx-pane--product .sx-cols--3 > div:not(.sx-cols-foot), .sx .sx-pane--product .sx-cols--3 > div:nth-child(2), .sx .sx-pane--product .sx-cols--3 > div:nth-child(3) { background: none; }
  /* the three columns end where the ink card starts (750 of 990px) */
  .sx .sx-pane--resources .sx-pane-in { background: linear-gradient(90deg, #f4f2ee 0%, #f6ecf3 27%, #f4e0f6 53%, #ecc9f3 76%, #1e1e28 76%); }
  .sx .sx-pane--resources .sx-pane-in > div, .sx .sx-pane--resources .sx-pane-in > div:nth-child(2), .sx .sx-pane--resources .sx-pane-in > div:nth-child(3) { background: none; }
}
/* a line between each column in Product and Resources, and under the Integrations heading (Liam, 13/10/2026) */
@media (min-width: 1001px) {
  .sx .sx-pane--product .sx-cols--3 > div:not(.sx-cols-foot), .sx .sx-pane--resources .sx-pane-in > div { position: relative; }
  .sx .sx-pane--product .sx-cols--3 > div:nth-child(2)::before, .sx .sx-pane--product .sx-cols--3 > div:nth-child(3)::before { content: ''; position: absolute; left: 0; width: 1px; background: rgba(30, 30, 40, .14); top: 30px; bottom: calc(var(--sx-slant) + 74px); }
  .sx .sx-pane--resources .sx-pane-in > div:nth-child(2)::before, .sx .sx-pane--resources .sx-pane-in > div:nth-child(3)::before { content: ''; position: absolute; left: 0; width: 1px; background: rgba(30, 30, 40, .14); top: 30px; bottom: calc(var(--sx-slant) + 30px); }
  .sx .sx-pane--integrations .sx-label { padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid rgba(30, 30, 40, .16); }
}
/* and a line under the eight integration logos, above the button (Liam, 13/10/2026) */
@media (min-width: 1001px) {
  .sx .sx-pane--integrations .sx-logos { padding-bottom: 16px; border-bottom: 1px solid rgba(30, 30, 40, .16); }
}

/* ---------- 15/10/2026 (Liam): the dropdown card. A light outline all round, drawn outside the card so the photos
   can't cover it; 2px corners; and no white flash between menus. The card used to resize over .4s while the menu
   inside swapped in .2s (then faded in), so the white card showed past the photos and panels. Now the card takes its
   new size and the contents swap in the same instant. The whole dropdown still fades in when the nav first opens. */
@media (min-width: 1001px) {
  .sx.sx .sx-drop, .sx.sx.is-open .sx-drop {
    filter: drop-shadow(1px 0 0 #d3d0da) drop-shadow(-1px 0 0 #d3d0da) drop-shadow(0 1px 0 #d3d0da) drop-shadow(0 -1px 0 #d3d0da)
      drop-shadow(0 24px 40px rgba(30, 30, 40, .14)) drop-shadow(0 2px 6px rgba(30, 30, 40, .06));
    border-radius: 2px;
    transition: opacity .2s ease, transform .35s var(--sx-ease), visibility 0s linear .35s;
  }
  .sx.sx .sx-drop-bg { transition: none; border-radius: 2px 2px 0 0; }
  .sx.sx .sx-pane, .sx.sx .sx-pane.is-active, .sx.sx .sx-pane.is-before { transition: none; transform: none; }
}

/* ---------- 16/10/2026 (Liam): every corner inside the dropdown matches the card's 2px. They were 4px (link rows,
   tiles, logo boxes, buttons, icons) and 12px (the Google mock-up). The Google search bar and buttons inside the
   mock-up keep their pill shape, as they are a picture of Google. */
@media (min-width: 1001px) {
  .sx.sx .sx-drop .sx-list a, .sx.sx .sx-drop .sx-tiles a, .sx.sx .sx-drop .sx-who ul a, .sx.sx .sx-drop .sx-btn,
  .sx.sx .sx-drop .sx-logos li, .sx.sx .sx-drop .sx-int-links a, .sx.sx .sx-drop .sx-card svg, .sx.sx .sx-drop .pc-google,
  .sx.sx .sx-drop .sx-stage-note { border-radius: 2px; }
}