/* Solutions pages: production network, creative team, platform, services.
   Loaded after /styles.css and /pages.css. Every class here is prefixed "sl-" (or a short page prefix)
   so nothing collides with the shared landing styles.
   Pillar colour is passed in through --c on a wrapper: network = cobalt, team = coral, platform = purple. */

/* ---------- Page wrappers ---------- */
.sl-page { --c: var(--purple); }
.sl-page.is-network { --c: var(--cobalt); }
.sl-page.is-team { --c: var(--coral); }
.sl-page.is-platform { --c: var(--purple); }
.sl-page section[id] { scroll-margin-top: 140px; }

/* ---------- Type: balanced headings, no orphaned last words in copy ---------- */
.sl-page :is(h1, h2, h3, .h2) { text-wrap: balance; }
.sl-page :is(p, .lead, blockquote, .faq-a, .sl-points span, .sv-body > p) { text-wrap: pretty; }

/* ---------- Focus: one visible ring for every control on these pages ---------- */
.sl-page :is(a, button, select, summary, [tabindex]):focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }

/* ---------- No scroll reveal ----------
   Text and cards are visible straight away (James: no fade or slide-in on text). .sl-rv stays as a hook: JS still adds
   .in when it comes into view, which only drives small graphic animations inside it (e.g. the bar chart). */

/* ---------- Hero: the shared page hero, plus a gradient stage underneath ---------- */
.sl-hero { padding-bottom: 0; background: linear-gradient(180deg, var(--white) 0%, #FAFAFA 140px, var(--grey) 70%, var(--white) 100%); }
.sl-hero .badge, .sv-hero .badge { margin: 0 auto 18px; }

.sl-hero .lead { max-width: 620px; }

/* Calendly-style stage: rounded, soft drifting gradient in the pillar colour, tone-on-tone pattern either side */
.sl-stage { position: relative; isolation: isolate; overflow: hidden; width: min(1180px, 100%); margin: 64px auto 0; min-height: 540px; border-radius: 32px; display: flex; align-items: center; justify-content: space-between; text-align: left; }
.sl-bg { position: absolute; inset: 0; z-index: -1; background-size: 200% 200%; animation: drift 18s ease-in-out infinite alternate; }
/* Same recipes as the landing pillar stage (styles.css .pbg .l0/.l1/.l2) */
.sl-bg.net { background-image: radial-gradient(60% 70% at 85% 15%, rgba(79, 115, 232, .95), transparent 65%), radial-gradient(45% 55% at 15% 30%, rgba(79, 115, 232, .55), transparent 60%), radial-gradient(50% 55% at 8% 92%, rgba(223, 217, 246, .95), transparent 60%), var(--grad-primary); }
.sl-bg.team { background-image: radial-gradient(60% 70% at 12% 12%, rgba(232, 111, 175, .9), transparent 65%), radial-gradient(45% 55% at 88% 30%, rgba(232, 111, 175, .55), transparent 60%), radial-gradient(55% 55% at 92% 90%, rgba(223, 217, 246, .9), transparent 60%), var(--grad-primary); }
.sl-bg.plat { background-image: radial-gradient(60% 60% at 80% 85%, rgba(223, 217, 246, .95), transparent 60%), radial-gradient(50% 55% at 15% 15%, rgba(112, 76, 199, .9), transparent 60%), var(--grad-primary); }
/* On the gradient the pattern is white, tone-on-tone */
.sl-stage .bars { height: 540px; }
.sl-stage .bars i { width: 26px; background: rgba(255, 255, 255, .2); }
.sl-stage .bars.dots { grid-template-columns: repeat(2, 36px); gap: 16px; }
.sl-stage .bars.dots i { width: 36px; height: 36px; }
.sl-stage .bars.stripes i, .sl-stage .bars.stripes i:nth-child(n) { width: 6px; background: rgba(255, 255, 255, .22); }
.sl-stage .bars:first-child { margin-left: 0; }
.sl-stage .bars:last-child { margin-right: 0; }
.sl-stage-ui { position: relative; z-index: 1; flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; align-items: center; padding: 48px 16px; }

/* ---------- Badge row in section heads ---------- */
.sl-kicker { display: inline-flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 700; color: var(--black); }

/* ---------- Feature rows: text + tinted visual panel ---------- */
.sl-feature { display: grid; grid-template-columns: 1fr 1.1fr; gap: 72px; align-items: center; }
.sl-feature.flip { grid-template-columns: 1.1fr 1fr; }
/* Stepper rows: top aligned, so a step description opening never nudges the column up or down */
.sl-feature[data-steps] { align-items: start; }
.sl-feature.flip > .sl-ftext { order: 2; }
.sl-ftext { display: flex; flex-direction: column; gap: 16px; }
.sl-ftext .h2 { font-size: 44px; line-height: 48px; letter-spacing: -0.04em; max-width: 520px; }
.sl-ftext .lead { max-width: 480px; }
.sl-points { list-style: none; display: flex; flex-direction: column; gap: 18px; margin-top: 12px; }
/* Text-only points: a thin accent rule on the left keeps them scannable without icon tiles */
.sl-points li { padding-left: 16px; border-left: 2px solid color-mix(in srgb, var(--c) 30%, white); }
.sl-points b { display: block; font-size: 17px; line-height: 24px; font-weight: 700; }
.sl-points span { display: block; color: var(--body); font-size: 15px; line-height: 22px; margin-top: 2px; }

/* Tinted visual panel with the pillar pattern down both sides (as on the landing pillar card) */
.sl-vis { position: relative; min-height: 520px; border-radius: var(--r-card); background: color-mix(in srgb, var(--c) 12%, white); display: flex; align-items: center; justify-content: space-between; overflow: hidden; }
.cr-ledger .bars, .cov-pat .bars { align-self: stretch; height: auto; }
/* Pattern columns sit behind the UI so the mockup can use the full panel width */
.sl-vis > .bars { position: absolute; top: 0; bottom: 0; height: auto; }
.sl-vis > .bars:first-child { left: -10px; }
.sl-vis > .bars:last-child { right: -10px; }
/* Keep each pattern column inside the panel's 56px side padding, so no sliver ever peeks out from behind a mockup */
.sl-vis > .bars { gap: 4px; padding: 0 6px; }
.sl-vis > .bars i { width: 10px; }
.sl-vis > .bars.dots { grid-template-columns: repeat(2, 20px); gap: 8px; padding: 0 8px; }
.sl-vis > .bars.dots i { width: 20px; height: 20px; }
.sl-vis > .bars.stripes { gap: 6px; padding: 0 12px; }
.sl-vis > .bars.stripes i:nth-child(n+5) { display: none; }
.sl-vis-ui { position: relative; z-index: 1; flex: 1; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; align-items: center; padding: 48px 56px; min-width: 0; }

/* Base UI card used inside stages and panels */
.sl-ui { width: 100%; max-width: 440px; background: var(--white); border-radius: var(--r-ui); box-shadow: var(--shadow-ui); padding: 20px; font-size: 14px; line-height: 20px; }
.sl-ui-h { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.sl-ui-h strong { font-size: 16px; font-weight: 700; }
.sl-ui small { color: var(--label); font-size: 12px; }
.sl-field { display: flex; flex-direction: column; gap: 4px; padding: 9px 12px; border-radius: 10px; background: var(--grey); }
.sl-field small { font-weight: 600; }
.sl-field span { font-size: 13px; font-weight: 600; }
.sl-pill { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: 999px; font-size: 12px; font-weight: 700; background: color-mix(in srgb, var(--c) 14%, white); color: var(--c); white-space: nowrap; }
.sl-pill.ok { background: #E3F6EA; color: #1F8A4C; }
.sl-pill.grey { background: var(--grey); color: var(--body); }
.sl-pill svg { width: 14px; height: 14px; }
.sl-av { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: var(--white); background: var(--c); font-size: 11px; font-weight: 700; }
.sl-av svg { width: 16px; height: 16px; }

/* Mini buttons inside mockups (not page buttons, so pill shaped like the product UI) */
.sl-mbtn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 0 18px; border-radius: 999px; background: var(--purple); color: var(--white); font-size: 14px; font-weight: 600; white-space: nowrap; transition: background-color .2s; }
.sl-mbtn:hover { background: var(--purple-deep); }
.sl-mbtn.ghost { background: var(--grey); color: var(--black); }
.sl-mbtn.ghost:hover { background: #ECECEF; }
.sl-mbtn.done { background: var(--success); }
.sl-mbtn svg { width: 15px; height: 15px; }

/* ---------- Segmented control / chips ---------- */
.sl-seg { display: inline-flex; padding: 4px; gap: 2px; border-radius: 999px; background: var(--grey); }
.sl-seg button { display: inline-flex; align-items: center; justify-content: center; text-align: center; min-height: 32px; padding: 0 14px; border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--label); transition: background-color .25s, color .25s, box-shadow .25s; }
.sl-seg button:hover { color: var(--black); }
.sl-seg button[aria-selected="true"], .sl-seg button.on { background: var(--white); color: var(--black); box-shadow: 0 1px 3px rgba(27, 27, 27, .12); }
.sl-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sl-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 16px; border-radius: 999px; background: var(--white); border: 1px solid var(--border); font-size: 14px; font-weight: 600; color: var(--body); transition: background-color .2s, color .2s, border-color .2s; }
.sl-chip:hover { border-color: #C7CCD3; color: var(--black); }
.sl-chip[aria-pressed="true"], .sl-chip[aria-selected="true"] { background: var(--black); border-color: var(--black); color: var(--white); }

/* ---------- Stepper: numbered steps on the left drive the panel on the right ---------- */
.sl-steps { list-style: none; display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.sl-step { position: relative; display: grid; grid-template-columns: 32px 1fr; gap: 14px; width: 100%; padding: 16px 18px; border-radius: 16px; color: var(--label); overflow: hidden; transition: background-color .3s, color .3s, box-shadow .3s; }
.sl-step:hover { color: var(--black); }
.sl-step[aria-selected="true"] { background: var(--white); color: var(--black); box-shadow: 0 1px 2px rgba(27, 27, 27, .04), 0 8px 24px -8px rgba(27, 27, 27, .1); }
.sl-step .n { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: #ECECEF; color: var(--label); font-size: 14px; font-weight: 800; transition: background-color .3s, color .3s; }
.sl-step[aria-selected="true"] .n { background: var(--c); color: var(--white); }
.sl-step .n + span { padding-top: 4px; }
.sl-step b { display: block; font-size: 17px; line-height: 24px; font-weight: 700; }
.sl-step .d { display: block; font-size: 15px; line-height: 22px; color: var(--body); max-height: 0; opacity: 0; overflow: hidden; transition: max-height .5s var(--ease), opacity .4s, margin .4s; }
.sl-step[aria-selected="true"] .d { max-height: 90px; opacity: 1; margin-top: 4px; }
.sl-step .bar { position: absolute; left: 18px; bottom: 0; height: 2px; width: 0; border-radius: 2px; background: var(--c); }
.sl-step[aria-selected="true"] .bar { animation: slFill var(--dur, 5.5s) linear forwards; }
.sl-steps.paused .bar { animation-play-state: paused; }
@keyframes slFill { to { width: calc(100% - 36px); } }
/* Panes stack on top of each other and cross-fade, like the landing workspace views */
.sl-panes { position: relative; width: 100%; max-width: 440px; min-height: 360px; }
.sl-pane { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transform: scale(.97) translateY(10px); filter: blur(3px); pointer-events: none; transition: opacity .6s cubic-bezier(.22, 1, .36, 1), transform .8s cubic-bezier(.22, 1, .36, 1), filter .6s; }
.sl-pane.on { opacity: 1; transform: none; filter: none; pointer-events: auto; }

/* ---------- Quote cards (approved testimonials only) ---------- */

/* ---------- Stats strip (approved stats only) ---------- */
.sl-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.sl-stat { padding: 28px; border-radius: var(--r-card); background: var(--white); }
.sl-stat .num { display: block; font-size: 56px; line-height: 60px; font-weight: 800; letter-spacing: -0.05em; }
.sl-stat .lbl { display: block; margin-top: 8px; font-size: 15px; line-height: 22px; font-weight: 600; color: var(--body); }

/* ---------- Pillar cross-links (reuses the menu tile look from the header) ---------- */
.sl-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.sl-pillars .menu-tile { padding: 12px 12px 22px; border-radius: 20px; }
.sl-pillars .menu-illus { height: 168px; }
.sl-pillars .menu-illus img { height: 140px; }
.sl-pillars .menu-tile strong { font-size: 20px; line-height: 28px; margin-top: 6px; }
.sl-pillars .menu-tile > span { font-size: 15px; line-height: 22px; }
.sl-pillars .menu-tile .go { margin-top: 10px; padding: 0 6px; font-size: 15px; font-weight: 600; color: var(--black); }
.sl-pillars .svc-tile { --c: var(--orange); }
.sl-pillars .svc-tile .menu-illus { border-radius: 12px; }
.sl-pillars .svc-tile .menu-illus img.ph { object-position: 50% 22%; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 12px; }

/* Closing CTA illustration (same template as the use case pages) */
.sl-cta-illus { display: block; width: 220px; height: auto; margin: 0 auto 24px; }

/* Section backgrounds: soft grey wash that fades in and out, no hard edges */
.sl-wash { background: linear-gradient(180deg, var(--white) 0%, var(--grey) 120px, var(--grey) calc(100% - 120px), var(--white) 100%); }
.sl-faq-wrap { display: grid; grid-template-columns: .8fr 1.2fr; gap: 64px; align-items: start; }
.sl-faq-wrap .h2 { font-size: 44px; line-height: 48px; letter-spacing: -0.04em; }
.sl-faq-wrap .lead { margin-top: 14px; }
.sl-faq-wrap .lead a { color: var(--purple); font-weight: 600; }

/* =========================================================================
   Production network
   ========================================================================= */
/* Booking card: same visual language as the landing calendar card, but interactive */
.bk { position: relative; display: flex; gap: 20px; width: 520px; max-width: 100%; padding: 22px; }
.bk-l { flex: 1.25; min-width: 0; display: flex; flex-direction: column; }
.bk-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; font-size: 14px; }
.bk-h span { width: 26px; height: 26px; border-radius: 50%; background: var(--grey); display: grid; place-items: center; color: var(--label); }
.bk-g { flex: 1; display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; align-content: space-between; justify-items: center; text-align: center; font-size: 12px; }
.bk-g .wd { color: var(--label); font-size: 11px; font-weight: 600; height: 22px; display: grid; place-items: center; }
.bk-g button, .bk-g span.d { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; color: #B4B4BA; font-size: 12px; text-align: center; }
.bk-g button { color: var(--cobalt); background: color-mix(in srgb, var(--cobalt) 12%, white); font-weight: 700; transition: background-color .2s, color .2s, transform .3s var(--ease); }
.bk-g button:hover { background: color-mix(in srgb, var(--cobalt) 24%, white); }
.bk-g button[aria-pressed="true"] { background: var(--cobalt); color: var(--white); animation: popday .5s var(--ease); }
.bk-r { flex: 1; min-width: 150px; display: flex; flex-direction: column; gap: 8px; text-align: center; }
.bk-r .sl-seg { align-self: center; margin-bottom: 6px; }
.bk-r .sl-seg button { padding: 0 10px; font-size: 12px; }
.bk-r b { font-size: 15px; }
.bk-city { align-self: center; height: 30px; border: 0; border-radius: 999px; padding: 0 28px 0 12px; font: inherit; font-size: 12px; font-weight: 600; color: var(--body); background: var(--grey) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23787878' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 10px center / 12px no-repeat; appearance: none; cursor: pointer; margin-bottom: 4px; }
.bk-t { display: flex; height: 40px; }
.bk-t button { flex: 1; border-radius: 9px; border: 1px solid color-mix(in srgb, var(--cobalt) 35%, white); color: var(--cobalt); font-weight: 700; font-size: 13px; text-align: center; transition: background-color .3s, color .3s, border-color .3s, flex .45s var(--ease), margin .45s var(--ease); }
.bk-t button:hover { border-color: var(--cobalt); }
.bk-t .go { flex: 0; padding: 0; border: 0; overflow: hidden; background: var(--cobalt); color: var(--white); }
.bk-t.sel .pick { background: #6E717A; border-color: #6E717A; color: var(--white); }
.bk-t.sel .go { flex: 1; margin-left: 4px; }
.bk-done { position: absolute; left: 50%; bottom: -18px; transform: translate(-50%, 10px); white-space: nowrap; background: var(--black); color: var(--white); font-size: 13px; font-weight: 600; padding: 8px 14px; border-radius: 999px; opacity: 0; pointer-events: none; transition: opacity .45s var(--ease), transform .45s var(--ease); }
.bk-done.show { opacity: 1; transform: translate(-50%, 0); }

/* How booking works: pane mockups */
.nw-brief .sl-field + .sl-field { margin-top: 8px; }
.nw-total { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; font-size: 13px; color: var(--label); }
.nw-total b { color: var(--purple); }
.nw-match { display: flex; flex-direction: column; gap: 12px; }
.nw-match .who { display: flex; align-items: center; gap: 12px; }
.nw-match .who .sl-av { width: 48px; height: 48px; }
.nw-match .who .sl-av svg { width: 22px; height: 22px; }
.nw-ticks { display: flex; flex-direction: column; }
.nw-ticks span { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid #EEEEF0; font-weight: 600; font-size: 13px; }
.nw-ticks span:last-child { border: 0; }
.nw-ticks svg { width: 16px; height: 16px; color: var(--success); }
.nw-sheet { display: flex; flex-direction: column; }
.nw-sheet div { display: grid; grid-template-columns: 70px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid #EEEEF0; font-size: 13px; }
.nw-sheet div:last-child { border: 0; }
.nw-sheet em { font-style: normal; font-weight: 700; color: var(--cobalt); }
.nw-files { display: flex; flex-direction: column; gap: 10px; }
.nw-file { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; }
.nw-file .fi { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: color-mix(in srgb, var(--cobalt) 12%, white); color: var(--cobalt); }
.nw-file .fi svg { width: 16px; height: 16px; }
.nw-file b { display: block; font-size: 13px; }
.nw-prog { height: 5px; margin-top: 6px; border-radius: 3px; background: var(--grey); overflow: hidden; }
.nw-prog i { display: block; height: 100%; width: 0; border-radius: 3px; background: var(--cobalt); }
.sl-pane.on .nw-prog i { animation: slUp 1.6s var(--ease) forwards; animation-delay: calc(.3s + var(--i, 0) * .45s); }
@keyframes slUp { to { width: 100%; } }
.nw-file .ok { opacity: 0; transition: opacity .3s; }
.sl-pane.on .nw-file .ok { opacity: 1; transition-delay: calc(1.9s + var(--i, 0) * .45s); }
.nw-landed { margin-top: 6px; opacity: 0; transform: translateY(6px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.sl-pane.on .nw-landed { opacity: 1; transform: none; transition-delay: 3.2s; }

/* Coverage explorer */
.cov { position: relative; overflow: hidden; border-radius: var(--r-panel); background: color-mix(in srgb, var(--cobalt) 10%, white); padding: 56px; }
.cov-pat { position: absolute; inset: 0; z-index: 0; pointer-events: none; display: flex; justify-content: space-between; align-items: center; }
.cov-pat .bars { height: 100%; }
.cov-card { position: relative; z-index: 1; max-width: 940px; margin: 0 auto; background: var(--white); border-radius: var(--r-card); box-shadow: var(--shadow-ui); padding: 28px; }
.cov-top { display: flex; gap: 12px; justify-content: space-between; align-items: center; flex-wrap: wrap; }
.cov-search { position: relative; flex: 1 1 260px; max-width: 360px; }
.cov-search svg { position: absolute; left: 14px; top: 50%; width: 18px; height: 18px; margin-top: -9px; color: var(--label); pointer-events: none; }
.cov-search input { width: 100%; height: 46px; border-radius: 12px; border: 1px solid var(--border); padding: 0 16px 0 42px; font: inherit; font-size: 15px; background: var(--white); }
.cov-search input:focus { outline: none; border-color: var(--cobalt); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cobalt) 18%, white); }
.cov-regions { margin-top: 18px; }
.cov-regions .sl-chip { min-height: 40px; }
.cov-regions .sl-chip[aria-selected="true"] { background: var(--cobalt); border-color: var(--cobalt); }
.cov-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; height: 300px; overflow-y: auto; align-content: flex-start; padding: 2px 2px 28px; -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 44px), transparent); }
.cov-city { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 999px; background: color-mix(in srgb, var(--cobalt) 9%, white); color: #2F4FB8; font-size: 13px; font-weight: 600; animation: slChip .45s var(--ease) both; animation-delay: calc(var(--i, 0) * 12ms); }
.cov-city small { color: var(--label); font-size: 12px; font-weight: 500; }
.cov-city mark { background: color-mix(in srgb, var(--cobalt) 30%, white); color: inherit; border-radius: 3px; }
@keyframes slChip { from { opacity: 0; transform: translateY(6px) scale(.96); } to { opacity: 1; transform: none; } }
.cov-list[hidden] { display: none; }
/* Empty state takes the list’s place at the same height, so the card never jumps */
.cov-empty { display: none; height: 300px; margin-top: 22px; align-items: center; justify-content: center; padding: 28px; border-radius: 16px; background: var(--grey); text-align: center; color: var(--body); font-size: 15px; }
.cov-empty a { color: var(--purple); font-weight: 600; }
.cov-empty.show { display: flex; }
.cov-foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 20px; padding-top: 18px; border-top: 1px solid #EEEEF0; font-size: 14px; color: var(--label); flex-wrap: wrap; }
.cov-foot b { color: var(--black); }

/* Vetting card */
.nw-vet .row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid #EEEEF0; font-size: 14px; font-weight: 600; }
.nw-vet .row:last-of-type { border: 0; }
.nw-vet .tick { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--grey); color: transparent; transition: background-color .4s, color .4s; flex: none; }
.nw-vet .tick svg { width: 14px; height: 14px; }
.nw-vet.in .tick { background: var(--success); color: var(--white); transition-delay: calc(.3s + var(--i) * .35s); }
.nw-vet .verdict { margin-top: 12px; opacity: 0; transition: opacity .5s; }
.nw-vet.in .verdict { opacity: 1; transition-delay: 2.2s; }
.nw-trio { margin-top: 48px; }
.nw-trio .card-grey h3 { font-size: 19px; line-height: 26px; font-weight: 700; margin: 0 0 6px; }
.nw-trio .card-grey p { color: var(--body); font-size: 15px; line-height: 22px; }

/* Brief to creators + footage flow */
/* One surface per card: a soft cobalt gradient, with the mock UI sitting straight on it */
.nw-duo .card-grey { padding: 0; overflow: hidden; display: flex; flex-direction: column; background: var(--grey); }
.nw-duo .txt { padding: 32px 32px 0; }
.nw-duo h3 { font-size: 26px; line-height: 32px; font-weight: 800; letter-spacing: -0.03em; }
.nw-duo p { color: var(--body); font-size: 16px; line-height: 24px; margin-top: 8px; max-width: 440px; }
.nw-duo .nw-vis { position: relative; flex: 1; min-height: 340px; display: grid; place-items: center; padding: 28px 32px 32px; }
.nw-cbrief .sl-ui-h small { display: block; }
.nw-cbrief .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.nw-cbrief .sl-field.wide { grid-column: 1 / -1; }
/* Footage pipeline: camera > upload > project > editor, with a pulse travelling down the line (behind the cards, visible in the gaps) */
.nw-flow { position: relative; width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 26px; }
.nw-flow::before { content: ""; position: absolute; left: 27px; top: 28px; bottom: 52px; width: 2px; background: repeating-linear-gradient(180deg, color-mix(in srgb, var(--cobalt) 40%, white) 0 6px, transparent 6px 12px); }
.nw-node { position: relative; z-index: 2; display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 14px; background: var(--white); box-shadow: 0 6px 18px -8px rgba(27, 27, 27, .18); }
.nw-node .sl-av { width: 30px; height: 30px; border-radius: 9px; }
.nw-node b { display: block; font-size: 14px; }
.nw-node small { display: block; font-size: 12px; color: var(--label); }
.nw-node .sl-pill { margin-left: auto; }
.nw-pulse { position: absolute; left: 24px; top: 26px; width: 8px; height: 8px; border-radius: 50%; background: var(--cobalt); box-shadow: 0 0 0 4px color-mix(in srgb, var(--cobalt) 20%, transparent); animation: slTravel 4s cubic-bezier(.65, 0, .35, 1) infinite; z-index: 1; }
@keyframes slTravel { 0% { transform: translateY(0); opacity: 0; } 8% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateY(calc(var(--h, 210px))); opacity: 0; } }

/* =========================================================================
   Creative team
   ========================================================================= */
/* Hero: "your team" card */
.tm-card { max-width: 460px; }
.tm-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid #EEEEF0; opacity: 0; transform: translateX(-8px); animation: slIn .6s var(--ease) forwards; animation-delay: calc(.3s + var(--i) * .12s); }
.tm-row:last-of-type { border: 0; }
.tm-row b { display: block; font-size: 14px; }
.tm-row small { display: block; }
.tm-row .sl-pill { margin-left: auto; }
@keyframes slIn { to { opacity: 1; transform: none; } }
.tm-now { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 12px; border-radius: 12px; background: color-mix(in srgb, var(--coral) 10%, white); font-size: 13px; }
.tm-now b { font-size: 13px; }
.tm-now .sl-pill { margin-left: auto; background: var(--white); }

/* Org chart */
.org { display: grid; grid-template-columns: 1.15fr .85fr; gap: 24px; align-items: stretch; }
.org-chart { position: relative; padding: 40px 24px; border-radius: var(--r-card); background: color-mix(in srgb, var(--coral) 10%, white); display: flex; flex-direction: column; align-items: center; gap: 28px; overflow: hidden; }
.org-chart .bars { position: absolute; top: 0; bottom: 0; }
.org-chart .bars:first-child { left: -10px; } .org-chart .bars:last-child { right: -10px; }
.org-tier { position: relative; z-index: 1; display: flex; justify-content: center; gap: 12px; width: 100%; }
/* Connector from each tier up to the one above */
.org-tier + .org-tier::before { content: ""; position: absolute; left: 50%; top: -28px; width: 2px; height: 28px; background: color-mix(in srgb, var(--coral) 40%, white); }
.org-tier.leaves::after { content: ""; position: absolute; left: calc(100% / 6); right: calc(100% / 6); top: -14px; height: 2px; background: color-mix(in srgb, var(--coral) 40%, white); }
.org-tier.leaves::before { height: 14px; }
.org-tier.leaves .org-node::before { content: ""; position: absolute; left: 50%; top: -14px; width: 2px; height: 14px; background: color-mix(in srgb, var(--coral) 40%, white); }
.org-tier.leaves .org-node { flex: 1; max-width: 200px; }
.org-node { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 150px; padding: 16px 14px 14px; border-radius: 18px; background: var(--white); text-align: center; box-shadow: 0 1px 2px rgba(27, 27, 27, .04), 0 8px 20px -10px rgba(27, 27, 27, .16); transition: box-shadow .3s, transform .4s var(--ease); }
.org-node:hover { transform: translateY(-2px); }
.org-node[aria-selected="true"] { box-shadow: 0 0 0 2px var(--coral), 0 12px 28px -10px rgba(232, 111, 175, .45); }
.org-node .ico { --c: #C9C9CF; transition: background-color .3s; }
.org-node[aria-selected="true"] .ico, .org-node.lit .ico { --c: var(--coral); }
.org-node b { font-size: 15px; line-height: 20px; font-weight: 700; }
.org-node small { font-size: 12px; color: var(--label); }
.org-node.you { min-width: 0; padding: 10px 16px; flex-direction: row; border-radius: 999px; background: var(--black); color: var(--white); box-shadow: none; }
.org-node.you small { color: rgba(255, 255, 255, .7); }
.org-heads { display: flex; margin-top: 2px; }
.org-heads i { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--white); margin-left: -6px; background: color-mix(in srgb, var(--coral) 45%, white); }
.org-heads i:first-child { margin-left: 0; }
.org-detail { position: relative; padding: 32px; border-radius: var(--r-card); background: var(--grey); display: flex; flex-direction: column; gap: 14px; }
.org-detail .k { display: flex; align-items: center; gap: 12px; }
.org-detail h3 { font-size: 28px; line-height: 34px; font-weight: 800; letter-spacing: -0.03em; }
.org-detail p { color: var(--body); font-size: 16px; line-height: 24px; }
.org-detail ul { list-style: none; display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.org-detail li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 22px; font-weight: 600; }
.org-detail li::before { content: ""; width: 18px; height: 18px; margin-top: 2px; border-radius: 50%; flex-shrink: 0; background: color-mix(in srgb, var(--coral) 20%, white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E86FAF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 11px no-repeat; }
.org-detail .swap { animation: slSwap .5s var(--ease); }
@keyframes slSwap { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.org-hint { font-size: 13px; color: var(--label); margin-top: auto; display: flex; align-items: center; gap: 6px; }
.org-hint svg { width: 14px; height: 14px; }

/* Brand memory */
.bm { max-width: 460px; }
.bm-kit { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; padding: 14px; border-radius: 12px; background: var(--grey); }
.bm-logo { width: 52px; height: 52px; border-radius: 12px; display: grid; place-items: center; background: var(--black); color: var(--white); font-weight: 800; font-size: 18px; }
.bm-sw { display: flex; gap: 6px; margin-top: 6px; }
.bm-sw i { width: 22px; height: 22px; border-radius: 6px; }
.bm-tabs { margin: 16px 0 12px; display: flex; }
.bm-tabs .sl-seg { width: 100%; }
.bm-tabs .sl-seg button { flex: 1; padding: 0 8px; }
.bm-notes { display: flex; flex-direction: column; gap: 8px; min-height: 200px; }
.bm-note { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid #EEEEF0; font-size: 13px; font-weight: 600; animation: slSwap .45s var(--ease) both; animation-delay: calc(var(--i, 0) * 70ms); }
.bm-note svg { width: 16px; height: 16px; color: var(--coral); flex: none; }
.bm-note.sum { background: var(--grey); border-color: var(--grey); color: var(--body); }
.bm-note.sum svg { color: var(--success); }
.bm-note.new { border-color: color-mix(in srgb, var(--coral) 40%, white); background: color-mix(in srgb, var(--coral) 6%, white); }
.bm-note.new::after { content: "Learned"; margin-left: auto; font-size: 11px; font-weight: 700; color: var(--coral); }

/* Quality checks */
.qc .row { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid #EEEEF0; font-size: 14px; font-weight: 600; }
.qc .row:last-of-type { border: 0; }
.qc .row small { margin-left: auto; font-weight: 500; white-space: nowrap; }
.qc .tick { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--grey); color: transparent; transition: background-color .35s, color .35s; }
.qc .tick svg { width: 14px; height: 14px; }
.qc .row.done .tick { background: var(--success); color: var(--white); }
.qc .row.checking .tick { background: color-mix(in srgb, var(--coral) 20%, white); animation: slPulse 1s ease-in-out infinite; }
@keyframes slPulse { 50% { transform: scale(.85); } }
.qc-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; }
.qc-foot .sl-pill { transition: background-color .4s, color .4s; }

/* Extension tiles: one white surface, a small graphic on top, then title and copy */
.ext-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ext-tile { user-select: none; }
.ext-tile h3 { font-size: 20px; line-height: 28px; font-weight: 700; margin: 22px 0 6px; }
.ext-tile p { color: var(--body); font-size: 16px; line-height: 24px; margin: 0; max-width: 420px; }
/* Grey box holds only the graphic; title and copy sit underneath on the page */
.ext-g { height: 280px; display: grid; place-items: center; padding: 28px 24px; border-radius: var(--r-card); background: var(--grey); }
.ext-list { width: 100%; max-width: 320px; display: grid; gap: 8px; }
.ext-row { display: flex; align-items: center; gap: 12px; height: 46px; padding: 0 12px; border-radius: 12px; background: var(--white); font-size: 14px; }
.ext-row b { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ext-row .sl-av { --c: var(--purple); width: 28px; height: 28px; font-size: 10px; }
.ext-row .sl-av.you { --c: var(--black); }
.ext-row .sl-pill { margin-left: auto; height: 26px; }
.ext-tile .sl-pill { --c: var(--purple); }
.ext-row .sl-pill.grey { background: var(--grey); }
.ext-t { width: 64px; flex: none; color: var(--label); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ext-bars { width: 100%; max-width: 320px; height: 100%; display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; align-items: end; }
.ext-bars > div { height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 8px; }
.ext-bars i { width: 100%; height: calc(var(--h) * 1.3px); border-radius: 8px; background: var(--lavender); transform-origin: bottom; }
.ext-bars .hi i { background: var(--purple); }
.ext-bars small { color: var(--label); font-size: 12px; font-weight: 600; line-height: 16px; }
.ext-bars .sl-pill { height: 24px; padding: 0 9px; font-size: 11px; }
.sl-rv .ext-bars i { transform: scaleY(.2); transition: transform .9s var(--ease) .2s; }
.sl-rv.in .ext-bars i { transform: none; }

/* =========================================================================
   Platform
   ========================================================================= */
/* In-page sub navigation (sticky under the header) */
.sl-subnav { position: sticky; top: 84px; z-index: 20; display: flex; justify-content: center; margin: 40px 16px 0; pointer-events: none; }
/* Hidden until the feature sections are in view (JS adds .is-shown) */
.sl-subnav nav { opacity: 0; transform: translateY(-8px); visibility: hidden; transition: opacity .35s ease, transform .35s var(--ease), visibility 0s .35s; }
.sl-subnav.is-shown nav { opacity: 1; transform: none; visibility: visible; transition: opacity .35s ease, transform .35s var(--ease), visibility 0s; }
.sl-subnav nav { pointer-events: auto; display: flex; gap: 2px; padding: 5px; border-radius: 999px; background: rgba(255, 255, 255, .82); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); box-shadow: 0 1px 2px rgba(27, 27, 27, .05), 0 10px 30px -10px rgba(27, 27, 27, .18); overflow-x: auto; scrollbar-width: none; max-width: 100%; }
.sl-subnav nav::-webkit-scrollbar { display: none; }
.sl-subnav a { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: 999px; font-size: 14px; font-weight: 700; color: var(--label); white-space: nowrap; transition: background-color .25s, color .25s; }
.sl-subnav a:hover { color: var(--black); }
.sl-subnav a.on { background: var(--lavender); color: var(--purple); }
.sl-subnav a svg { width: 16px; height: 16px; }

/* Hero workspace mockup (style of the landing "Now work as one" workspace) */
.pf-ws { display: flex; width: 860px; max-width: 100%; height: 440px; background: var(--white); border-radius: 24px; overflow: hidden; box-shadow: 0 1px 2px rgba(27, 27, 27, .04), 0 24px 48px -12px rgba(27, 27, 27, .16), 0 60px 120px -24px rgba(27, 27, 27, .2); text-align: left; }
.pf-ws .ws-rail { gap: 12px; }
.pf-ws .rail-i { transition: background-color .25s, color .25s; }
.pf-ws button.rail-i:hover { color: var(--black); }
.pf-main { position: relative; flex: 1; min-width: 0; }
.pf-view { position: absolute; inset: 0; padding: 26px 30px; display: flex; flex-direction: column; gap: 12px; opacity: 0; transform: scale(.97) translateY(8px); filter: blur(3px); pointer-events: none; transition: opacity .6s cubic-bezier(.22, 1, .36, 1), transform .8s cubic-bezier(.22, 1, .36, 1), filter .6s; }
.pf-view.on { opacity: 1; transform: none; filter: none; pointer-events: auto; }
.pf-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.pf-card { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pf-card .th { height: 110px; border-radius: 14px; overflow: hidden; }
.pf-card .th svg { width: 100%; height: 100%; display: block; }
.pf-card b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-card .status { align-self: flex-start; font-size: 11px; padding: 3px 9px 3px 19px; }
.pf-card .status::before { left: 8px; width: 5px; height: 5px; margin-top: -2.5px; }
.pf-mini-chat { display: flex; flex-direction: column; gap: 10px; flex: 1; }
.pf-mini-files { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.pf-folder { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 14px; background: var(--grey); font-size: 13px; font-weight: 700; }
.pf-folder svg { width: 22px; height: 22px; color: var(--purple); }
.pf-folder small { font-weight: 500; }

/* Brief builder */
.br { max-width: 460px; }
.br .sl-seg { width: 100%; margin-bottom: 14px; }
.br .sl-seg button { flex: 1; }
.br label, .br .lbl { display: block; font-size: 12px; font-weight: 700; color: var(--label); margin: 12px 0 6px; }
.br-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.br-opt { min-height: 34px; padding: 0 12px; border-radius: 999px; background: var(--grey); font-size: 13px; font-weight: 600; transition: background-color .25s, color .25s; }
.br-opt:hover { background: #ECECEF; }
.br-opt[aria-pressed="true"] { background: var(--purple); color: var(--white); }
.br-x { display: flex; flex-direction: column; gap: 6px; }
.br-x label { display: flex; align-items: center; gap: 10px; margin: 0; padding: 9px 12px; border-radius: 10px; background: var(--grey); font-size: 13px; font-weight: 600; color: var(--black); cursor: pointer; min-height: 40px; }
.br-x input { width: 16px; height: 16px; accent-color: var(--purple); }
.br-x label em { margin-left: auto; white-space: nowrap; font-style: normal; color: var(--label); font-weight: 600; }
.br-hours { display: flex; align-items: center; gap: 10px; }
.br-hours button { width: 40px; height: 40px; border-radius: 12px; background: var(--grey); display: grid; place-items: center; font-size: 18px; font-weight: 700; text-align: center; }
.br-hours button:hover { background: #ECECEF; }
.br-hours output { min-width: 84px; text-align: center; font-weight: 700; }
.br-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 16px; padding-top: 14px; border-top: 1px solid #EEEEF0; }
.br-total { font-size: 13px; color: var(--label); }
.br-total b { display: inline-block; color: var(--purple); font-size: 15px; }
.br-total b.bump { animation: popday .45s var(--ease); }
.br-note { margin-top: 10px; font-size: 12px; color: var(--label); }
/* Both panes share one grid cell, so switching service never changes the card height */
.br-panes { display: grid; }
.br-panes > .br-pane { grid-area: 1 / 1; }
.br-panes > .br-pane[hidden] { display: block; visibility: hidden; }

/* Assistant chat */
.ch { max-width: 460px; display: flex; flex-direction: column; height: 400px; padding: 0; overflow: hidden; }
.ch-h { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid #EEEEF0; }
.ch-h b { font-size: 15px; }
.ch-h .sl-pill { margin-left: auto; }
.ch-log { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; scroll-behavior: smooth; }
.ch-msg { max-width: 86%; padding: 10px 13px; border-radius: 14px; background: var(--grey); font-size: 13px; line-height: 19px; animation: slSwap .4s var(--ease); }
.ch-msg.me { align-self: flex-end; background: var(--purple); color: var(--white); }
.ch-msg ol { margin: 6px 0 0 18px; }
.ch-typing { display: inline-flex; gap: 4px; padding: 4px 0; }
.ch-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--label); animation: blink 1s infinite; }
.ch-typing i:nth-child(2) { animation-delay: .15s; } .ch-typing i:nth-child(3) { animation-delay: .3s; }
.ch-opts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ch-opts button { min-height: 32px; padding: 0 12px; border-radius: 999px; background: var(--white); border: 1px solid var(--border); font-size: 12px; font-weight: 700; transition: background-color .2s, border-color .2s; }
.ch-opts button:hover { border-color: var(--purple); color: var(--purple); }
.ch-brief { align-self: stretch; max-width: none; background: var(--white); border: 1px solid #EEEEF0; padding: 14px; }
.ch-brief .r { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid #F1F1F3; }
.ch-brief .r:last-of-type { border: 0; }
.ch-brief .r small { color: var(--label); font-size: 12px; }
.ch-brief .r span { font-weight: 600; text-align: right; }
.ch-brief .sl-mbtn { width: 100%; margin-top: 10px; min-height: 38px; }
.ch-sug { display: flex; gap: 6px; padding: 0 18px 10px; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); }
.ch-sug button:last-child { margin-right: 24px; }
.ch-sug::-webkit-scrollbar { display: none; }
.ch-sug button { flex: none; min-height: 34px; padding: 0 12px; border-radius: 999px; background: var(--lavender); color: var(--purple); font-size: 12px; font-weight: 700; transition: background-color .2s; }
.ch-sug button:hover { background: #D2CAF2; }
.ch-in { display: flex; gap: 8px; padding: 12px 18px 16px; border-top: 1px solid #EEEEF0; }
.ch-in input { flex: 1; min-width: 0; height: 42px; border-radius: 12px; border: 1px solid var(--border); padding: 0 14px; font: inherit; font-size: 14px; }
.ch-in input:focus { outline: none; border-color: var(--purple); box-shadow: 0 0 0 3px var(--lavender); }
.ch-in button { width: 42px; height: 42px; border-radius: 12px; background: var(--purple); color: var(--white); display: grid; place-items: center; transition: background-color .2s; }
.ch-in button:hover { background: var(--purple-deep); }
.ch-in button svg { width: 18px; height: 18px; }

/* Review */
.rvw { max-width: 480px; padding: 16px; }
.rvw-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px; }
.rvw-top .sl-seg button { padding: 0 12px; font-size: 12px; min-height: 30px; }
.rvw-frame { position: relative; border-radius: 12px; overflow: hidden; aspect-ratio: 16 / 9; background: var(--black); }
.rvw-frame img { width: 100%; height: 100%; object-fit: cover; }
.rvw-frame .tag { position: absolute; left: 12px; top: 12px; background: rgba(27, 27, 27, .6); color: var(--white); font-size: 12px; font-weight: 700; padding: 4px 9px; border-radius: 999px; }
.rvw-bar { position: relative; height: 26px; margin-top: 10px; cursor: pointer; touch-action: manipulation; }
.rvw-bar::before { content: ""; position: absolute; left: 0; right: 0; top: 10px; height: 6px; border-radius: 3px; background: var(--grey); }
.rvw-bar b { position: absolute; left: 0; top: 10px; height: 6px; width: 0; border-radius: 3px; background: var(--purple); pointer-events: none; }
.rvw-bar i { position: absolute; top: 6px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--orange); border: 2px solid var(--white); box-shadow: 0 1px 3px rgba(0, 0, 0, .2); pointer-events: none; animation: popday .45s var(--ease); }
.rvw-hint { display: flex; justify-content: space-between; font-size: 12px; color: var(--label); }
.rvw-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; height: 120px; overflow-y: auto; padding-top: 4px; -webkit-mask-image: linear-gradient(180deg, transparent, #000 14px); mask-image: linear-gradient(180deg, transparent, #000 14px); }
.rvw-c { display: flex; gap: 8px; align-items: flex-start; animation: slSwap .4s var(--ease); }
.rvw-c .sl-av { width: 26px; height: 26px; font-size: 10px; margin-top: 3px; }
.rvw-c p { background: var(--grey); padding: 7px 11px; border-radius: 12px; font-size: 13px; line-height: 18px; }
.rvw-c p b { color: var(--purple); margin-right: 4px; }
.rvw-foot { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; margin-top: 12px; }
.rvw-foot .sl-seg { justify-self: start; }
.rvw-foot .sl-mbtn { justify-self: end; }
.rvw-foot small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; font-size: 12px; }

/* Storage */
.stg { max-width: 480px; }
.stg-top { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; }
.stg-top .cov-search { max-width: none; }
.stg-top .cov-search input { height: 40px; font-size: 14px; }
.stg-top .cov-search input:focus { border-color: var(--purple); box-shadow: 0 0 0 3px var(--lavender); }
.stg .sl-chips { gap: 6px; margin-bottom: 12px; }
.stg .sl-chip { min-height: 34px; padding: 0 12px; font-size: 13px; }
.stg .sl-chip[aria-pressed="true"] { background: var(--purple); border-color: var(--purple); }
.stg-folders { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px; }
.stg-folder { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 12px; background: var(--grey); font-size: 12px; font-weight: 700; line-height: 16px; transition: background-color .2s; }
.stg-folder svg { width: 20px; height: 20px; color: var(--purple); }
.stg-folder:hover, .stg-folder[aria-pressed="true"] { background: var(--lavender); }
.stg-rows { display: flex; flex-direction: column; height: 236px; overflow-y: auto; padding-bottom: 20px; -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 36px), transparent); }
.stg-row { display: grid; grid-template-columns: 32px 1fr auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid #F1F1F3; animation: slSwap .35s var(--ease) both; }
.stg-row:last-child { border: 0; }
.stg-row .fi { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: var(--lavender); color: var(--purple); }
.stg-row .fi svg { width: 15px; height: 15px; }
.stg-row b { display: block; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stg-row small { display: block; }
.stg-row .dl { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; color: var(--label); }
.stg-row .dl svg { width: 16px; height: 16px; }
.stg-empty { padding: 20px; text-align: center; color: var(--label); font-size: 13px; }

/* Credits */
.cr-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cr-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cr-cards .card-grey h3 { font-size: 18px; line-height: 24px; font-weight: 700; margin: 0 0 6px; }
.cr-cards .card-grey p { color: var(--body); font-size: 15px; line-height: 22px; }
.cr-ledger { position: relative; overflow: hidden; border-radius: var(--r-card); background: var(--grad-primary); display: flex; align-items: center; justify-content: space-between; min-height: 100%; }
.cr-ledger .bars.stripes i { background: rgba(255, 255, 255, .22); }
.cr-ledger .sl-ui { margin: 32px auto; max-width: 360px; }
.cr-bal { display: flex; align-items: baseline; gap: 8px; margin: 4px 0 10px; }
.cr-bal b { font-size: 40px; line-height: 44px; font-weight: 800; letter-spacing: -0.04em; }
.cr-meter { height: 10px; border-radius: 5px; background: var(--grey); overflow: hidden; }
.cr-meter i { display: block; height: 100%; width: 56%; border-radius: 5px; background: var(--purple); }
.cr-row { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid #F1F1F3; font-size: 13px; font-weight: 600; }
.cr-row:last-child { border: 0; }
.cr-row em { font-style: normal; color: var(--purple); white-space: nowrap; }

/* =========================================================================
   Services overview
   ========================================================================= */
/* Service tiles (Our work style): no card surface, image then name, one line and a grey timing note */
.sv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px 24px; }
.sv-card { scroll-margin-top: 150px; display: flex; flex-direction: column; transition: opacity .45s var(--ease), transform .45s var(--ease); }
.sv-card.wide { grid-column: 1 / -1; }
.sv-card:target .sv-media { box-shadow: 0 0 0 3px var(--purple); }
.sv-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r-card); background: var(--grey); }
/* Lead tile: full width, image left and text right, vertically centred */
.sv-card.wide { display: grid; grid-template-columns: 2fr 1fr; gap: 40px; align-items: center; }
.sv-card.wide .sv-media { aspect-ratio: 16 / 9; }
.sv-card.wide .sv-body { padding: 0; }
.sv-card.wide .sv-body h2 { font-size: 32px; line-height: 38px; letter-spacing: -0.03em; }
.sv-link { display: block; color: inherit; }
.sv-link h2 { transition: color .2s; }
.sv-link:hover h2 { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.sv-media img, .sv-media video { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.22, 1, .36, 1); }
.sv-card:hover .sv-media img, .sv-card:hover .sv-media video { transform: scale(1.04); }
.sv-body { display: flex; flex-direction: column; gap: 6px; padding: 20px 4px 0; }
.sv-body h2 { font-size: 22px; line-height: 28px; font-weight: 700; letter-spacing: -0.02em; }
.sv-body > p { color: var(--body); font-size: 16px; line-height: 24px; max-width: 560px; }
.sv-body > p.sv-meta { margin-top: 4px; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--label); }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) and (min-width: 961px) {
  .sl-feature { gap: 40px; }
}
@media (max-width: 960px) {
  /* Pattern columns step aside on small screens so the mockups get the full width */
  .sl-stage > .bars, .sl-vis > .bars, .cov-pat .bars, .cr-ledger .bars { display: none; }
  .sl-stage { min-height: 0; margin-top: 40px; border-radius: 24px; }
  .sl-stage-ui { padding: 28px 12px; }
  .sl-feature, .sl-feature.flip { grid-template-columns: 1fr; gap: 32px; }
  .sl-feature.flip > .sl-ftext { order: 0; }
  .sl-ftext .h2, .sl-faq-wrap .h2 { font-size: 32px; line-height: 38px; }
  .sl-vis { min-height: 0; justify-content: center; }
  .sl-vis-ui { padding: 24px 12px; }
  .sl-panes { min-height: 380px; }
  .sl-pillars, .ext-tiles { grid-template-columns: 1fr; }
  .ext-g { height: 210px; }
  .sl-stats { grid-template-columns: 1fr 1fr; }
  .sl-stat { padding: 20px; }
  .sl-stat .num { font-size: 40px; line-height: 44px; }
  .sl-faq-wrap { grid-template-columns: 1fr; gap: 28px; }
  .sl-cta-illus { width: 180px; }

  .bk { flex-direction: column; gap: 16px; padding: 18px; }
  .cov { padding: 16px; border-radius: 24px; }
  .cov-card { padding: 18px; }
  .cov-regions { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -18px; padding-inline: 18px; }
  .cov-regions .sl-chip { flex: none; }
  .cov-search { max-width: none; }
  .nw-duo .txt { padding: 24px 24px 0; }
  .nw-duo h3 { font-size: 22px; line-height: 28px; }
  .nw-duo .nw-vis { min-height: 0; padding: 20px 16px 16px; }

  .org { grid-template-columns: 1fr; }
  .bm-notes { min-height: 240px; }
  .org-chart { padding: 28px 12px; gap: 24px; }
  .org-chart > .bars { display: none; }
  .org-node { min-width: 0; padding: 12px 8px; }
  .org-node b { font-size: 13px; line-height: 17px; }
  .org-node small { display: none; }
  .org-node .ico.md { width: 36px; height: 36px; }
  .org-tier.leaves { gap: 8px; }
  .org-tier .org-node:not(.you) { min-width: 140px; }
  .org-tier.leaves .org-node { min-width: 0; }
  .org-detail { padding: 24px; min-height: 480px; }
  .org-detail h3 { font-size: 24px; line-height: 30px; }

  .sl-subnav { top: 72px; margin-top: 28px; }
  .sl-subnav a { padding: 0 9px; font-size: 13px; }
  .pf-ws { height: 400px; }
  .pf-ws .ws-rail { width: 56px; }
  .pf-ws .rail-i, .pf-ws .rail-add { width: 36px; height: 36px; }
  .pf-view { padding: 18px 16px; }
  .pf-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .pf-grid .pf-card:nth-child(n+5) { display: none; }
  .pf-card .th { height: 84px; }
  .pf-mini-files { grid-template-columns: 1fr 1fr; }
  .ch { height: 440px; }
  .cr-wrap, .cr-cards { grid-template-columns: 1fr; }

  .sv-grid { grid-template-columns: 1fr 1fr; gap: 36px 16px; }
  .sv-card.wide { grid-column: 1 / -1; }
  .sv-card.wide { grid-template-columns: 1fr; gap: 0; }
  .sv-card.wide .sv-body { padding: 20px 4px 0; }
  .sv-card.wide .sv-body h2 { font-size: 24px; line-height: 30px; }
        .sl-subnav a svg { display: none; }
}
@media (max-width: 520px) {
  /* Tap targets in the interactive mockups stay at 40px or more on phones */
  .sl-seg button, .rvw-top .sl-seg button, .br-opt, .stg .sl-chip, .ch-sug button, .ch-opts button { min-height: 40px; }
  .bk-g button, .bk-g span.d { width: 36px; height: 36px; }
    .stg-folders { grid-template-columns: 1fr 1fr; }
  .stg-folders .stg-folder:nth-child(3) { display: none; }
  .pf-ws .ws-rail { display: none; }
  .nw-cbrief .grid { grid-template-columns: 1fr; }
}
@media (max-width: 440px) {
  /* Review footer: the button takes its own full-width row so "Revision requested" never wraps */
  .rvw-foot { grid-template-columns: auto minmax(0, 1fr); }
  .rvw-foot small { text-align: right; }
  .rvw-foot .sl-mbtn { grid-column: 1 / -1; justify-self: stretch; }
}

@media (prefers-reduced-motion: reduce) {
  .sl-rv .ext-bars i { transform: none; transition: none; }
  .sl-rv { opacity: 1; transform: none; }
  .sl-page .bm-note, .sl-page .cov-city, .sl-page .org-detail .swap, .sl-page .ch-msg, .sl-page .rvw-c, .sl-page .stg-row,
  .sl-page .tm-row, .sl-page .bk-g button, .sl-page .rvw-bar i, .sl-page .br-total b, .sl-page .bars i, .sl-page .qc .tick { animation: none; }
  .sl-page .nw-prog i { animation: none; width: 100%; }
  .sl-page .sl-step .bar { display: none; }
  .nw-vet .tick { background: var(--success); color: var(--white); }
  .nw-vet .verdict { opacity: 1; }
  .sl-bg { animation: none; }
  .tm-row { opacity: 1; transform: none; }
  .nw-pulse { display: none; }
  .sl-pane { transition: none; }
}

/* Scroll areas inside cards scroll without a visible scrollbar; the soft fade shows there's more */
.cov-list, .ch-log, .rvw-list, .stg-rows { scrollbar-width: none; -ms-overflow-style: none; overscroll-behavior: contain; }
.cov-list::-webkit-scrollbar, .ch-log::-webkit-scrollbar, .rvw-list::-webkit-scrollbar, .stg-rows::-webkit-scrollbar { display: none; }

/* Customer quotes (Dovetail-style): wide purple quote card + stat card, rows alternate */
.tq-row { display: grid; grid-template-columns: 1.85fr 1fr; gap: 24px; }
.tq-row + .tq-row { margin-top: 24px; }
.tq-row.flip { grid-template-columns: 1fr 1.85fr; }
.tq-quote { position: relative; isolation: isolate; overflow: hidden; margin: 0; min-height: 360px; padding: 48px 48px 40px; border-radius: var(--r-card); background: var(--purple); color: var(--white); display: flex; flex-direction: column; justify-content: space-between; gap: 40px; }
/* Faint texture, like Dovetail's character pattern: small dots that fade towards the text */
.tq-quote::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(rgba(255, 255, 255, .16) 1.2px, transparent 1.6px); background-size: 18px 18px; -webkit-mask-image: linear-gradient(200deg, #000, transparent 70%); mask-image: linear-gradient(200deg, #000, transparent 70%); }
.tq-quote::after { content: ""; position: absolute; right: -120px; bottom: -160px; z-index: -1; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(196, 177, 246, .45), transparent 70%); }
.tq-quote blockquote { font-size: 28px; line-height: 38px; font-weight: 600; letter-spacing: -0.02em; text-wrap: pretty; max-width: 640px; }
.tq-quote figcaption { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.tq-who b { display: block; font-size: 16px; font-weight: 700; }
.tq-who small { display: block; font-size: 14px; color: rgba(255, 255, 255, .78); margin-top: 2px; }
.tq-logo { height: 30px; width: auto; max-width: 170px; object-fit: contain; filter: brightness(0) invert(1); opacity: .95; }
.tq-stat { border-radius: var(--r-card); background: var(--grey); padding: 44px 40px 40px; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; min-height: 360px; }
.tq-num { font-size: 96px; line-height: 1; font-weight: 800; letter-spacing: -0.05em; color: var(--black); }
.tq-num em { font-style: normal; color: var(--purple); font-size: .6em; margin-left: 4px; vertical-align: .45em; }
.tq-lbl b { display: block; font-size: 17px; font-weight: 700; margin-bottom: 6px; }
.tq-lbl { color: var(--body); font-size: 15px; line-height: 23px; max-width: 280px; }
@media (max-width: 960px) {
  .tq-row, .tq-row.flip { grid-template-columns: 1fr; gap: 12px; }
  .tq-row + .tq-row { margin-top: 12px; }
  .tq-row.flip .tq-stat { order: 2; }
  .tq-quote { min-height: 0; padding: 32px 26px 28px; gap: 28px; }
  .tq-quote blockquote { font-size: 21px; line-height: 30px; }
  .tq-stat { min-height: 0; padding: 30px 26px; gap: 22px; }
  .tq-num { font-size: 64px; }
  .tq-logo { height: 24px; }
}
/* Vetting: plain soft grey panel behind the card (no pattern) on a white section */
#vetting .sl-vis { background: var(--grey); justify-content: center; }

/* Customer story cards (old Dovetail style): purple duotone photo, white logo, story headline,
   thin dividers between cards, horizontal row that bleeds off the right edge */
/* Even darkening so the centred white logo reads; lightens on hover */

/* Customer logo carousel under each solutions hero (marquee styles shared from styles.css) */
.sl-logos { display: flex; flex-direction: column; align-items: center; gap: 28px; padding: 88px 0 24px; overflow-x: clip; }
.sl-logos .micro { font-weight: 600; color: var(--black); margin-bottom: 8px; }
.sl-logos .logo-marquee { max-width: 1180px; }
.sl-logos .marquee-track.back { margin-left: -60px; }
@media (max-width: 960px) { .sl-logos { padding: 48px 0 0; gap: 16px; } }

/* ---------- Floating hero (solutions intros): live platform pieces around the headline ----------
   .fh fills the screen below the header; cards are absolutely placed by --x/--y, depth --d sets how far they move
   with the pointer and on scroll (JS writes --mx/--my/--sp). Each card bobs gently on its own timing. */
.fh { position: relative; min-height: max(620px, calc(100vh - 72px - 80px)); display: grid; place-items: center; margin: -80px -16px 0; padding: 80px 16px 40px; }
.fh-copy { position: relative; z-index: 2; }
.fh-cards { position: absolute; inset: 40px max(16px, (100% - 1320px) / 2) 0; pointer-events: none; }
.fh-card { position: absolute; left: var(--x); top: var(--y); z-index: 1;
  transform: translate3d(calc(var(--mx, 0) * var(--d) * 22px + var(--sx, 0px) * var(--d)), calc(var(--my, 0) * var(--d) * 16px + var(--sy, 0px) * var(--d)), 0) rotate(var(--r));
  opacity: calc(1 - var(--sp, 0) * 1.4); transition: transform .5s cubic-bezier(.2, .7, .2, 1); will-change: transform; }
.fh-in { background: var(--white); border-radius: 16px; padding: 12px 14px; box-shadow: 0 18px 40px -18px rgba(27, 27, 27, .28), 0 0 0 1px rgba(27, 27, 27, .04);
  font-size: 13px; line-height: 18px; width: 230px; animation: fhBob 6s ease-in-out infinite; animation-delay: calc(var(--d) * -2.3s); user-select: none; }
@keyframes fhBob { 50% { translate: 0 -6px; } }
.fh-h, .fh-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.fh-h b { font-size: 14px; font-weight: 700; }
.fh-row { margin-top: 10px; padding-top: 10px; border-top: 1px solid #EEEEF0; }
.fh-row small, .fh-h small { color: var(--label); font-size: 12px; }
.fh-row b { margin-right: auto; font-weight: 600; }
.fh-pill { flex: none; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--lavender); color: var(--purple); }
.fh-chat, .fh-ai, .fh-ok, .fh-team { display: flex; align-items: center; gap: 10px; width: auto; max-width: 260px; }
.fh-chat p, .fh-ai p { margin: 0; }
.fh-chat em { font-style: normal; font-weight: 700; color: var(--cobalt); margin-right: 4px; }
.fh-av { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--c); color: var(--white); font-size: 10px; font-weight: 700; }
.fh-team .fh-av + .fh-av { margin-left: -16px; box-shadow: 0 0 0 2px var(--white); }
.fh-team small { color: var(--label); font-weight: 600; margin-left: 2px; }
.fh-spark { flex: none; width: 28px; height: 28px; border-radius: 9px; background: var(--purple) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l1.9 5.1L19 10l-5.1 1.9L12 17l-1.9-5.1L5 10l5.1-1.9z'/%3E%3C/svg%3E") center / 16px no-repeat; }
.fh-ok b { font-weight: 600; }
.fh-tick { flex: none; width: 22px; height: 22px; border-radius: 50%; background: #E3F6EA url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F8A4C' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat; }
.fh-bar { margin-top: 10px; height: 6px; border-radius: 6px; background: var(--grey); overflow: hidden; }
.fh-bar i { display: block; height: 100%; width: 0; background: var(--purple); border-radius: 6px; animation: fhUp 3.4s cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes fhUp { 0% { width: 4%; } 75%, 100% { width: 100%; } }
.fh-thumb { position: relative; padding: 6px; width: 200px; }
.fh-thumb img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 11px; }
.fh-play { position: absolute; left: 16px; bottom: 16px; width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 255, 255, .92) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6.5v11l9-5.5z' fill='%231B1B1B'/%3E%3C/svg%3E") 55% 50% / 16px no-repeat; }
.fh-tag { position: absolute; right: 14px; top: 14px; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: var(--white); }
@media (max-width: 1100px) { .fh-card:nth-child(n+5) { display: none; } }
@media (max-width: 960px) { .fh-cards { display: none; } .fh { min-height: 0; margin: 0; padding: 0; } }
@media (prefers-reduced-motion: reduce) { .fh-in, .fh-bar i { animation: none; } .fh-card { transition: none; } }
/* When the hero is the floating intro (no window under it), the logos follow closely */
.sl-hero:has(> .fh:last-child), .sl-hero:has(> .mh:last-child), .sl-hero:has(> .th:last-child) { padding-bottom: 0; }
.sl-hero:has(> .fh:last-child) + .sl-logos { padding-top: 8px; }
.sl-hero:has(> .mh:last-child) + .sl-logos, .sl-hero:has(> .th:last-child) + .sl-logos { padding-top: 48px; }

/* ---------- Map hero (production network): dotted world map behind the headline ----------
   Base dots are a soft lavender; a purple copy of the dots is masked to a circle that follows the pointer (--px/--py).
   Pins are placed by % on the map box (same aspect as the map art), so they line up at any width. */
.mh { position: relative; overflow: hidden; min-height: max(620px, calc(100vh - 72px - 80px)); display: grid; place-items: center; margin: -80px -16px 0; padding: 80px 16px 40px; }
.mh-copy { position: relative; z-index: 2; pointer-events: none; }
.mh-copy a, .mh-copy button { pointer-events: auto; }
/* Map art stretched 1.32x wide and 1.2x tall (round dots kept) so the land sits further out from the headline */
/* Scaled up past the screen edges so the continents sit wide of the headline (sides crop, nothing is distorted) */
.mh-map { position: absolute; left: 50%; top: 52%; width: min(2300px, 128vw); aspect-ratio: 1478 / 756; translate: -50% -50%; z-index: 1; cursor: crosshair; }
.mh-dots, .mh-lit { position: absolute; inset: 0; -webkit-mask: url("/assets/solutions/world-dots-wide.svg") center / 100% 100% no-repeat; mask: url("/assets/solutions/world-dots-wide.svg") center / 100% 100% no-repeat; }
.mh-dots { background: #E2DDF5; }
.mh-lit { background: var(--purple);
  -webkit-mask: url("/assets/solutions/world-dots-wide.svg") center / 100% 100% no-repeat, radial-gradient(circle 180px at var(--px, -999px) var(--py, -999px), #000 0, transparent 100%);
  -webkit-mask-composite: source-in; mask: url("/assets/solutions/world-dots-wide.svg") center / 100% 100% no-repeat, radial-gradient(circle 180px at var(--px, -999px) var(--py, -999px), #000 0, transparent 100%); mask-composite: intersect; }
/* Soft white wash behind the copy so the headline always reads over the map */
.mh-map::after { content: ""; position: absolute; z-index: 2; left: 50%; top: 48%; width: 54%; height: 58%; translate: -50% -50%; background: radial-gradient(closest-side, rgba(249, 249, 249, .97) 55%, rgba(249, 249, 249, 0)); pointer-events: none; }
.mh-pins { position: absolute; inset: 0; z-index: 1; }
.mh-pin { position: absolute; left: var(--x); top: var(--y); width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--purple); box-shadow: 0 0 0 3px rgba(120, 82, 212, .18); }
.mh-pin::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--purple); opacity: 0; animation: mhPulse 3.2s ease-out infinite; animation-delay: var(--dl, 0s); }
@keyframes mhPulse { 0% { opacity: .7; transform: scale(.6); } 80%, 100% { opacity: 0; transform: scale(2.6); } }
.mh-card { position: absolute; z-index: 4; display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 10px; border-radius: 14px;
  background: var(--white); box-shadow: 0 18px 40px -16px rgba(27, 27, 27, .3), 0 0 0 1px rgba(27, 27, 27, .04); font-size: 13px; line-height: 17px; white-space: nowrap; pointer-events: none;
  animation: mhCardIn .45s cubic-bezier(.2, .9, .3, 1.2) both; }
.mh-card b { display: block; font-size: 14px; }
.mh-card small { color: var(--label); }
.mh-card .mh-tick { flex: none; width: 26px; height: 26px; border-radius: 50%; background: #E3F6EA url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F8A4C' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 13px no-repeat; }
.mh-card.out { animation: mhCardOut .4s ease both; }
@keyframes mhCardIn { from { opacity: 0; transform: translateY(8px) scale(.9); } }
@keyframes mhCardOut { to { opacity: 0; transform: translateY(-6px) scale(.96); } }
.mh-pin.hit { background: #1F8A4C; box-shadow: 0 0 0 4px rgba(31, 138, 76, .2); }
.mh-hint { position: absolute; z-index: 2; left: 50%; bottom: 20px; translate: -50% 0; display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--label); transition: opacity .4s; }
.mh-hint svg { width: 16px; height: 16px; }
.mh-hint.gone { opacity: 0; }
@media (max-width: 960px) { .mh { min-height: 0; margin: 0; padding: 0 0 260px; } .mh-map { top: auto; bottom: 0; translate: -50% 0; width: 150vw; } .mh-map::after { display: none; } .mh-hint { display: none; } }
@media (prefers-reduced-motion: reduce) { .mh-pin::after { animation: none; } .mh-card { animation: none; } }

/* ---------- Team hero (creative team): your team orbits the headline ----------
   JS positions each .tm-orb on an ellipse (and towards a row as you scroll) via transform. Hovering one pauses the
   orbit and shows what they'd say. */
.th { position: relative; min-height: max(640px, calc(100vh - 72px - 80px)); display: grid; place-items: center; margin: -80px -16px 0; padding: 80px 16px 40px; }
.th-copy { position: relative; z-index: 2; pointer-events: none; }
.th-copy a { pointer-events: auto; }
.th-orbit { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.tm-orb { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: auto; cursor: default; will-change: transform; user-select: none; }
.tm-orb img { width: 92px; height: 92px; border-radius: 50%; object-fit: cover; border: 4px solid var(--white); box-shadow: 0 16px 34px -14px rgba(27, 27, 27, .35); transition: transform .35s var(--ease); }
.tm-orb-role { font-size: 13px; font-weight: 700; white-space: nowrap; padding: 5px 11px; border-radius: 999px; background: var(--white); box-shadow: 0 8px 20px -12px rgba(27, 27, 27, .3); }
.tm-orb-say { position: absolute; bottom: calc(100% + 14px); left: 50%; translate: -50% 6px; width: max-content; max-width: 230px; padding: 10px 13px; border-radius: 14px;
  background: var(--black); color: var(--white); font-size: 13px; line-height: 18px; font-weight: 600; text-align: center; opacity: 0; pointer-events: none; transition: opacity .25s ease, translate .3s var(--ease); }
/* Tail centred under the bubble, pointing down at the headshot */
.tm-orb-say::after { content: ""; position: absolute; left: 50%; top: 100%; width: 12px; height: 12px; margin: -6px 0 0 -6px; background: var(--black); border-radius: 0 0 3px 0; transform: rotate(45deg); }
.tm-orb:hover img { transform: scale(1.08); }
.tm-orb:hover .tm-orb-say { opacity: 1; translate: -50% 0; }
.tm-orb:hover { z-index: 5; }
@media (max-width: 960px) { .th-orbit { display: none; } .th { min-height: 0; margin: 0; padding: 0; } }
/* Solutions hero headings: a step up from other inner pages, in line with the landing hero */
.sl-hero h1 { font-size: 72px; line-height: 76px; max-width: 940px; }
@media (max-width: 960px) { .sl-hero h1 { font-size: 44px; line-height: 50px; } }

@media (max-width: 600px) {
  /* Phones: one column with shorter 16:10 images and tighter type, so the 11 services read as a list, not a scroll marathon */
  .sv-grid { grid-template-columns: 1fr; gap: 32px; }
  .sv-media, .sv-card.wide .sv-media { aspect-ratio: 16 / 10; border-radius: 20px; }
  .sv-body { padding-top: 14px; gap: 4px; }
  .sv-body h2, .sv-card.wide .sv-body h2 { font-size: 20px; line-height: 26px; }
  .sv-body > p { font-size: 15px; line-height: 22px; }
}

/* ---------- Services intro: a deck of service cards that fans out as you scroll ----------
   The section is tall and its frame pins; /js/solutions.js sets --p (0 stacked to 1 fanned) and positions each card
   on an arc from it. Cards link to their service pages. */
.svfan { position: relative; height: 210vh; margin-top: -72px; margin-bottom: 40px; }
/* Cards fade out over the bottom of the frame instead of being cut by a hard edge as the next section arrives */
.svfan-pin { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; flex-direction: column; align-items: center; padding: 136px 16px 0;
  -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent 100%); mask-image: linear-gradient(180deg, #000 78%, transparent 100%); }
.svfan-head { position: relative; z-index: 2; text-align: center; max-width: 960px; }
.svfan-head .eyebrow { display: inline-block; margin-bottom: 16px; }
.svfan-head h1 { font-size: 72px; line-height: 76px; font-weight: 800; letter-spacing: -0.04em; text-wrap: balance; }
.svfan-head .lead { max-width: 600px; margin: 20px auto 0; }
.svfan-head .hero-actions { display: flex; justify-content: center; margin-top: 28px; }
.svfan-deck { position: relative; flex: 1; width: 100%; max-width: 1400px; }
.fan-card { position: absolute; left: 50%; top: 10%; width: min(170px, 22vh); margin-left: calc(min(170px, 22vh) / -2); border-radius: 20px; overflow: hidden; background: var(--white);
  box-shadow: 0 24px 50px -24px rgba(27, 27, 27, .4), 0 0 0 1px rgba(27, 27, 27, .04); transform-origin: 50% 120%; will-change: transform; transition: box-shadow .3s; z-index: calc(20 - var(--i)); }
.fan-card img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.fan-card span { display: block; padding: 10px 12px 12px; font-size: 13px; line-height: 17px; font-weight: 700; color: var(--black); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fan-card:hover { box-shadow: 0 30px 60px -22px rgba(27, 27, 27, .5), 0 0 0 2px var(--purple); z-index: 30; }
.fan-card:focus-visible { outline: 3px solid var(--purple); outline-offset: 3px; z-index: 30; }
@media (max-width: 960px) {
  .svfan { height: auto; margin-top: 0; }
  .svfan-pin { position: static; height: auto; padding: 40px 16px 24px; }
  .svfan-head h1 { font-size: 44px; line-height: 50px; }
  .svfan-deck { display: flex; gap: 12px; overflow-x: auto; scrollbar-width: none; margin: 32px -16px 0; padding: 0 16px 8px; width: calc(100% + 32px); }
  .fan-card { position: static; flex: none; width: 150px; margin: 0; }
}
/* Platform page: feature panels use the soft lavender gradient (as on the creators apply section), no pattern graphics */
.is-platform .sl-vis { background: linear-gradient(135deg, #F1EEFB 0%, #E2DCF7 45%, #DCD5F5 70%, #EAE6FA 100%); }
.is-platform .cr-ledger { background: linear-gradient(135deg, #F1EEFB 0%, #E2DCF7 45%, #DCD5F5 70%, #EAE6FA 100%); }

/* Booking cursor on the map hero (js/solutions.js): the brand pixel camera, lens on the pointer; JS tilts .mh-cur-body */
.mh.has-cursor, .mh.has-cursor .mh-map { cursor: none; }
.mh.has-cursor a, .mh.has-cursor button { cursor: pointer; }
.mh-cursor { position: absolute; left: 0; top: 0; z-index: 5; pointer-events: none; opacity: 0; transition: opacity .15s; will-change: transform; }
.mh-cursor.on { opacity: 1; }
/* 56px camera; its lens sits at 50% / 57.7% of the art, so that point is placed on the pointer and is the pivot */
.mh-cur-body { position: absolute; left: -28px; top: -24.7px; width: 56px; transform-origin: 50% 57.7%; will-change: transform; filter: drop-shadow(0 4px 0 rgba(27, 27, 27, .14)); }
.mh-cur-body > svg:first-child { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.mh-cur-body.kick { animation: crKick .14s ease-out; }
.mh-cur-spark { width: 48px; height: 48px; margin: -24px 0 0 -6px; }
/* Services page: logo carousel under the fan, then a centred heading over the tiles */
.svfan + .sl-logos { padding-top: 24px; }
.sv-all { padding-top: 96px; }
.sv-head { text-align: center; margin-bottom: 48px; }
.sv-head .h2 { font-size: 48px; line-height: 52px; letter-spacing: -0.04em; max-width: 760px; margin: 0 auto; text-wrap: balance; }
@media (max-width: 960px) { .sv-all { padding-top: 64px; } .sv-head { margin-bottom: 32px; } .sv-head .h2 { font-size: 32px; line-height: 38px; } }
/* Floating hero: cards spread outward on scroll, so clip them at the screen edge (no sideways scroll) */
.fh { overflow-x: clip; }
/* Phones: map runs edge to edge, no side margins */
@media (max-width: 960px) { .mh { margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; } .mh-map { width: 180vw; } }
/* Phones: the map sits fully below the Book a demo button with breathing room, never behind it */
@media (max-width: 960px) { .mh { padding-bottom: calc(180vw * 756 / 1478 - 40px); } .mh .hero-actions { margin-bottom: 0; } }
/* Phones: the credit card sits inside its lavender panel with an even 16px frame (it was touching the sides) */
@media (max-width: 960px) {
  .cr-ledger { padding: 16px; }
  .cr-ledger .sl-ui { margin: 0 auto; width: 100%; }
  /* Logo carousel under the hero: clear space from the button above */
  .sl-hero + .sl-logos, .page-hero + .sl-logos { padding-top: 56px; }
}
@media (max-width: 960px) { .sl-hero:has(> .fh:last-child) + .sl-logos { padding-top: 56px; } }
/* Phones: the section tabs scroll sideways, so fade the right edge to show there is more */
@media (max-width: 960px) {
  .sl-subnav nav { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .sl-subnav nav.at-end { -webkit-mask-image: none; mask-image: none; }
}