/* ==========================================================================
   SLEEP & MATTRESS · V8, new design (15 Oct 2026)
   Every section drawn fresh in the homepage's language; none of the old
   inner-page section styles (pages.css, aiw.css) are loaded.
   ========================================================================== */

/* --- Shared ------------------------------------------------------------------ */
.sl-head { max-width: 1120px; margin-inline: auto; text-align: center; }
.sl-head .lede { margin: 18px auto 0; max-width: 50em; text-wrap: pretty; }
.page-sl main .h2 { text-wrap: balance; }
.page-sl .section--deep .h2 em { color: var(--accent-lift); }
[data-mascot] > svg, [data-sl-herobot] > svg { display: block; width: 100%; height: 100%; overflow: visible; }
.sl-uav { width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(160deg, #FFB3D0, #F2659A); color: #fff; font: 800 13px/1 var(--font); }
.sl-b { margin: 0; max-width: 86%; padding: 10px 13px; font: 500 14px/1.45 var(--font); }
.sl-b--in { align-self: flex-end; background: #4857C2; color: #fff; border-radius: 16px 16px 5px 16px; }
.sl-b--out { align-self: flex-start; background: var(--paper); color: var(--ink); border-radius: 16px 16px 16px 5px; }

/* ==========================================================================
   1 · HERO
   ========================================================================== */
.sl-hero { overflow: hidden; padding-block: clamp(32px, 4vw, 56px) clamp(64px, 7vw, 104px); background: var(--white); }
.sl-hero__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 4.5vw, 72px); align-items: center; }
.sl-hero__title { font-size: 48px; line-height: 1.08; letter-spacing: -.04em; text-wrap: balance; }
.sl-hero__lede { margin: 22px 0 0; max-width: 30em; font: 500 clamp(17px, 1.4vw, 20px)/1.55 var(--font); color: var(--ink-2); }
.sl-hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

.sl-web { position: relative; padding: 22px; border-radius: 36px; background: radial-gradient(70% 60% at 100% 0%, #DCD6FF 0%, transparent 60%), radial-gradient(60% 60% at 0% 100%, #FFE1EC 0%, transparent 60%), #EEF0FB; }
.sl-web__in { position: relative; min-height: 520px; transition: opacity .5s; }
.sl-web.is-fade .sl-web__in { opacity: 0; }
/* the store's website */
.sl-web__win { position: absolute; left: 0; top: 0; width: 100%; bottom: 70px; border-radius: 20px; overflow: hidden; background: #fff; box-shadow: 0 30px 60px -40px rgba(23, 23, 43, .45), 0 0 0 1px rgba(23, 23, 43, .05); }
.sl-web__bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: #F4F5F8; }
.sl-web__bar i { width: 9px; height: 9px; border-radius: 50%; background: #D9DCE5; }
.sl-web__bar span { margin-left: 10px; padding: 5px 12px; border-radius: var(--r-pill); background: #fff; font: 500 11px/1 var(--font); color: var(--muted); }
.sl-web__nav { display: flex; align-items: center; gap: 16px; padding: 14px 18px; border-bottom: 1px solid var(--line); font: 500 12px/1 var(--font); color: var(--ink-2); }
.sl-web__nav b { margin-right: auto; font: 800 15px/1 var(--font); letter-spacing: -.01em; color: #2A2752; }
.sl-web__cart { position: relative; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: var(--sand); color: var(--ink); font-size: 17px; }
.sl-web__cart em { position: absolute; right: -6px; top: -6px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; display: grid; place-items: center; background: #22C08F; font: 700 10.5px/1 var(--font); font-style: normal; color: #fff; transition: transform .35s var(--ease-soft), opacity .3s; }
.sl-web.is-pre:not(.is-carted) .sl-web__cart em { opacity: 0; transform: scale(.4); }
.sl-web.is-carted .sl-web__cart em { animation: slPop .5s var(--ease-soft); }
@keyframes slPop { 40% { transform: scale(1.5); } }
.sl-web__site { display: grid; gap: 10px; width: 40%; padding: 18px; }
.sl-web__pic { position: relative; height: 150px; border-radius: 16px; background: linear-gradient(180deg, #E9E6FF 0 62%, #D9D4F7 62%); overflow: hidden; }
.sl-web__mat { position: absolute; left: 10%; right: 10%; bottom: 22px; height: 46px; border-radius: 12px 12px 6px 6px; background: linear-gradient(180deg, #CBEFFF 0 26%, #FFFFFF 26% 32%, #FBC3D6 32% 60%, #CCD2FB 60% 100%); box-shadow: 0 14px 24px -14px rgba(42, 39, 82, .6); }
.sl-web__pillow { position: absolute; left: 16%; bottom: 62px; width: 26%; height: 22px; border-radius: 12px; background: #fff; box-shadow: 0 6px 12px -8px rgba(42, 39, 82, .5); }
.sl-web__h { font: 700 16px/1.2 var(--font); color: var(--ink); }
.sl-web__ln { height: 8px; width: 80%; border-radius: 4px; background: var(--sand-2); }
.sl-web__ln--s { width: 55%; }
.sl-web__shop { justify-self: start; margin-top: 4px; padding: 9px 14px; border-radius: 10px; background: #2A2752; font: 700 11.5px/1 var(--font); color: #fff; }
/* the Adovvy widget */
.sl-web__chat { position: absolute; right: -8px; bottom: -8px; width: 60%; height: 420px; display: flex; flex-direction: column; border-radius: 24px; overflow: hidden; background: #fff; box-shadow: 0 40px 80px -36px rgba(23, 23, 43, .55), 0 0 0 1px rgba(23, 23, 43, .06); }
.sl-web__head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: linear-gradient(160deg, #5967D4, #4857C2); color: #fff; }
.sl-web__bot { display: block; width: 38px; height: 38px; flex: none; border-radius: 50%; background: rgba(255, 255, 255, .16); }
.sl-web__head b { display: block; font: 700 14.5px/1.2 var(--font); }
.sl-web__head small { display: flex; align-items: center; gap: 5px; font: 500 11.5px/1.3 var(--font); color: #DCE0FF; }
.sl-web__head small::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #5BE3B2; }
.sl-web__body { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; padding: 14px; overflow: hidden; background: #FAFAFC; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 28px); mask-image: linear-gradient(180deg, transparent 0, #000 28px); }
.sl-web__body > * { flex: none; }
.sl-web__body .sl-b { max-width: 88%; font-size: 13.5px; }
.sl-web__body .sl-b--out { background: #fff; box-shadow: 0 0 0 1px var(--line); }
.sl-web.is-pre [data-w]:not(.is-in) { display: none; }
.sl-web [data-w].is-in { animation: slMsg .45s var(--ease-soft) both; }
@keyframes slMsg { from { opacity: 0; transform: translateY(10px); } }
.sl-web__chips { align-self: flex-end; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.sl-web__chips i { padding: 7px 11px; border-radius: var(--r-pill); background: #fff; box-shadow: inset 0 0 0 1.5px #AEB7FF; font: 600 12px/1 var(--font); font-style: normal; color: var(--accent-ink); transition: background-color .25s, color .25s, transform .25s; }
.sl-web__chips i.is-on { background: var(--accent); color: #fff; transform: scale(.95); }
.sl-web__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sl-web__cards > span { position: relative; display: grid; gap: 3px; padding: 10px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px var(--line); }
.sl-web__cards > span.is-best { box-shadow: inset 0 0 0 1.5px var(--accent); }
.sl-web__cards i { position: absolute; right: 8px; top: -8px; padding: 4px 7px; border-radius: var(--r-pill); background: var(--accent); font: 700 10px/1 var(--font); font-style: normal; color: #fff; }
.sl-web__thumb { display: block; height: 30px; margin-bottom: 4px; border-radius: 8px 8px 4px 4px; background: linear-gradient(180deg, #CBEFFF 0 30%, #FBC3D6 30% 60%, #CCD2FB 60% 100%); }
.sl-web__thumb--b { background: linear-gradient(180deg, #F2EADB 0 40%, #E3D3B5 40% 100%); }
.sl-web__cards b { font: 700 12.5px/1.2 var(--font); color: var(--ink); }
.sl-web__cards small { font: 500 11px/1.3 var(--font); color: var(--muted); }
.sl-web__cards strong { font: 700 12.5px/1.2 var(--font); color: var(--accent-ink); }
.sl-web__added { align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; margin: 0; padding: 9px 12px; border-radius: 13px; background: var(--green-tint); font: 700 12.5px/1.3 var(--font); color: var(--green-ink); }
.sl-web__added svg { width: 14px; height: 14px; flex: none; }
.sl-web__typing { display: none; align-self: flex-start; gap: 4px; margin: 0; padding: 12px 14px; border-radius: 16px 16px 16px 5px; background: #fff; box-shadow: 0 0 0 1px var(--line); }
.sl-web__typing.is-on { display: inline-flex; }
.sl-web__typing i { width: 7px; height: 7px; border-radius: 50%; background: #AEB7FF; animation: slDot 1s ease-in-out infinite; }
.sl-web__typing i:nth-child(2) { animation-delay: .15s; } .sl-web__typing i:nth-child(3) { animation-delay: .3s; }
@keyframes slDot { 50% { transform: translateY(-4px); opacity: .5; } }
.sl-web__input { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 12px 12px; padding: 8px 8px 8px 14px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px var(--line-2); font: 500 12.5px/1 var(--font); color: var(--muted); }
.sl-web__input i { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: var(--accent); color: #fff; font-size: 16px; }

.sl-wordmark { font: 800 21px/1 var(--font); letter-spacing: .12em; color: #5B5B6A; }
.sl-mini { display: block; width: 52px; height: 26px; border-radius: 7px 7px 4px 4px; background: linear-gradient(180deg, #CBEFFF 0 30%, #FBC3D6 30% 62%, #CCD2FB 62% 100%); }
.sl-mini--b { background: linear-gradient(180deg, #F2EADB 0 40%, #E3D3B5 40% 100%); }
.sl-mini--c { background: linear-gradient(180deg, #EEF0F4 0 28%, #C9CEF0 28% 100%); }
[data-sl-expbot] > svg { display: block; width: 100%; height: 100%; overflow: visible; }
.page-sl main p, .page-sl main li { text-wrap: pretty; }

/* ==========================================================================
   3 · THE GAPS
   ========================================================================== */
.sl-gaps { list-style: none; margin: clamp(40px, 5vw, 64px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.sl-gaps li { --cc: var(--accent); display: flex; flex-direction: column; border-radius: var(--card-r); overflow: hidden; background: #fff; box-shadow: var(--card-shadow); }
.sl-gaps h3 { margin: 0; padding: 18px 18px 0; font: 700 17px/1.25 var(--font); color: var(--ink); }
.sl-gaps p { text-wrap: wrap; margin: 6px 0 0; padding: 0 18px 22px; font: 400 15px/1.5 var(--font); color: var(--body); }
.sl-gaps__vis { position: relative; display: grid; place-items: center; align-content: center; gap: 10px; height: 150px; padding: 14px; background: color-mix(in srgb, var(--cc) 8%, #fff); }
.sl-gaps__vis small { font: 700 11.5px/1 var(--font); color: color-mix(in srgb, var(--cc) 75%, #17172B); }
.sl-gaps__vis--night { background: linear-gradient(170deg, #2A2752, #17172B); }
.sl-gaps__vis--night b { font: 700 13px/1 var(--font); color: #C9CEFF; letter-spacing: .04em; }
.sl-gaps__vis--night small { color: #FFB3C8; }
.sl-blur { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sl-blur .sl-mini { width: 48px; height: 22px; animation: slBlur 3.2s ease-in-out infinite; }
.sl-blur .sl-mini:nth-child(2) { animation-delay: -.8s; } .sl-blur .sl-mini:nth-child(3) { animation-delay: -1.6s; } .sl-blur .sl-mini:nth-child(4) { animation-delay: -2.4s; }
@keyframes slBlur { 0%, 100% { filter: blur(0); } 50% { filter: blur(2.5px); } }
.sl-q-wait { position: relative; padding: 8px 12px; border-radius: 14px 14px 14px 4px; background: rgba(255, 255, 255, .14); font: 600 12.5px/1.3 var(--font); color: #fff; }
.sl-q-wait::after { content: ''; position: absolute; right: -6px; top: -6px; width: 12px; height: 12px; border-radius: 50%; background: #F2659A; box-shadow: 0 0 0 0 rgba(242, 101, 154, .6); animation: slPing 1.8s ease-out infinite; }
@keyframes slPing { to { box-shadow: 0 0 0 10px rgba(242, 101, 154, 0); } }
.sl-sale { padding: 6px 11px; border-radius: var(--r-pill); background: var(--cc); font: 800 11.5px/1 var(--font); color: #fff; letter-spacing: .04em; text-transform: uppercase; }
.sl-wait { display: flex; align-items: flex-end; gap: 6px; height: 46px; }
.sl-wait i { width: 16px; height: calc(var(--w) * 100%); border-radius: 5px 5px 2px 2px; background: color-mix(in srgb, var(--cc) 70%, #fff); transform-origin: 50% 100%; animation: slRise 2.4s ease-in-out infinite; }
.sl-wait i:nth-child(2) { animation-delay: .2s; } .sl-wait i:nth-child(3) { animation-delay: .4s; background: var(--cc); }
@keyframes slRise { 0%, 100% { transform: scaleY(.55); } 50% { transform: scaleY(1); } }
.sl-feel { position: relative; display: block; }
.sl-feel .sl-mini { width: 92px; height: 40px; border-radius: 12px 12px 6px 6px; }
.sl-feel em { position: absolute; right: -14px; top: -16px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #fff; font: 800 16px/1 var(--font); font-style: normal; color: var(--cc); box-shadow: 0 6px 14px -8px rgba(23, 23, 43, .5); animation: slBob 2.4s ease-in-out infinite; }
@keyframes slBob { 50% { transform: translateY(-5px); } }
.sl-inbox { position: relative; display: grid; gap: 5px; width: 82%; }
.sl-inbox i { padding: 7px 10px; border-radius: 10px; background: #fff; font: 600 11.5px/1.2 var(--font); font-style: normal; color: var(--ink-2); box-shadow: 0 0 0 1px var(--line); animation: slIn 3.6s ease-in-out infinite; }
.sl-inbox i:nth-child(2) { animation-delay: .3s; } .sl-inbox i:nth-child(3) { animation-delay: .6s; color: color-mix(in srgb, var(--cc) 70%, #17172B); }
@keyframes slIn { 0%, 12% { opacity: 0; transform: translateY(-6px); } 22%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* the flowing links between each stack and the advisor */
@keyframes slFlow { to { background-position: 32px 0; } }

/* ==========================================================================
   6 · SPECIALISTS · THREE STAGE CARDS
   ========================================================================== */
.sl-stages3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: clamp(40px, 5vw, 64px); }
.sl-stg { --cc: var(--accent); display: flex; flex-direction: column; border-radius: var(--card-r); overflow: hidden; background: #fff; box-shadow: var(--card-shadow); transition: opacity .5s, transform .6s var(--ease-out), box-shadow .35s, background-color .35s; }
.sl-stg:hover { transform: translateY(-4px); box-shadow: var(--card-shadow-hover); }
.sl-stg__top { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0 12px; padding: 24px 24px 22px; background: radial-gradient(90% 120% at 100% 0%, color-mix(in srgb, var(--cc) 16%, transparent) 0%, transparent 60%), var(--ct); }
.sl-stg__n { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--cc); font: 700 15px/1 var(--font); color: #fff; box-shadow: 0 8px 18px -8px var(--cc); }
.sl-stg__k { margin: 0; font: 700 20px/1.25 var(--font); letter-spacing: -.01em; color: var(--ink); }
.sl-stg ul { list-style: none; margin: 0; padding: 6px 24px 12px; }
.sl-stg li { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 16px; align-items: center; padding: 16px 0; font: 400 15.5px/1.45 var(--font); color: var(--body); }
.sl-stg li + li { border-top: 1px solid var(--line); }
.sl-stg li b { display: block; margin-bottom: 2px; font: 700 16px/1.3 var(--font); color: var(--ink); }
.sl-stg__av { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; background: var(--ct); }
.sl-stg__bot { display: block; width: 46px; height: 46px; transition: transform .35s var(--ease-soft); }
.sl-stg li:hover .sl-stg__bot { transform: translateY(-4px) rotate(-6deg); }
.sl-stages3.is-pre .sl-stg:not(.is-in) { opacity: 0; transform: translateY(18px); }

@keyframes slWave { to { transform: scaleY(1); } }

/* --- Bands (shared) --- */

/* ==========================================================================
   9 · BUSINESS TYPES · FOUR CARDS, TWO WHITE BOXES EACH
   ========================================================================== */
.sl-biz { list-style: none; margin: clamp(40px, 5vw, 64px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: auto; column-gap: 14px; row-gap: 0; }
.sl-biz li { --cc: var(--accent); display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 8px; margin-bottom: 14px; padding: 24px 18px 18px; border-radius: var(--card-r); background: var(--sand); box-shadow: none; }
.sl-biz__ic { width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; background: var(--ct); color: var(--cc); font-size: 24px; }
.sl-biz h3 { margin: 10px 0 8px; font: 700 19px/1.25 var(--font); color: var(--ink); }
.sl-biz__box { padding: 14px 16px 16px; border-radius: 18px; background: #fff; }
.sl-biz__k { margin: 0 0 6px; font: 700 12px/1 var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.sl-biz__box p + p { margin: 0; font: 400 15.5px/1.5 var(--font); color: var(--body); }
.sl-biz__box--out { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--cc) 35%, #fff); }
.sl-biz__box--out .sl-biz__k { color: var(--cc); }
.sl-biz__box--out p + p { font-weight: 700; color: var(--ink); }

/* ==========================================================================
   11 · COMPARE · GENERIC VS SLEEP-TRAINED
   Two panels face each other; the questions sit between them.
   ========================================================================== */
.sl-vsx { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 200px minmax(0, 1fr); max-width: 1100px; margin: clamp(40px, 5vw, 64px) auto 0; }
.sl-vsx__row { display: contents; }
.sl-vsx__row > * { grid-row: var(--r); position: relative; z-index: 1; }
.sl-vsx__panel { grid-row: 1 / 7; border-radius: 30px; }
.sl-vsx__panel--no { grid-column: 1; background: var(--sand); }
.sl-vsx__panel--yes { grid-column: 3; background: radial-gradient(80% 50% at 80% 0%, #3B3484 0%, transparent 70%), linear-gradient(170deg, #24214A, #15142B); box-shadow: 0 40px 80px -40px rgba(21, 20, 43, .6); }
.sl-vsx__no { grid-column: 1; }
.sl-vsx__row > b, .sl-vsx__mid { grid-column: 2; }
.sl-vsx__yes { grid-column: 3; }
.sl-vsx__no, .sl-vsx__yes { display: flex; align-items: center; gap: 12px; min-height: 76px; padding: 14px 28px; }
.sl-vsx__row:not(.sl-vsx__row--head) .sl-vsx__no { font: 500 15.5px/1.45 var(--font); color: var(--muted); }
.sl-vsx__row:not(.sl-vsx__row--head) .sl-vsx__yes { font: 600 16px/1.45 var(--font); color: #fff; }
.sl-vsx__row:not(.sl-vsx__row--head) .sl-vsx__no::after, .sl-vsx__row:not(.sl-vsx__row--head) .sl-vsx__yes::after { content: ''; position: absolute; left: 28px; right: 28px; top: 0; height: 1px; background: var(--line-2); }
.sl-vsx__row:not(.sl-vsx__row--head) .sl-vsx__yes::after { background: rgba(255, 255, 255, .1); }
.sl-vsx__row:not(.sl-vsx__row--head) .sl-vsx__no::before, .sl-vsx__row:not(.sl-vsx__row--head) .sl-vsx__yes::before { content: ''; width: 22px; height: 22px; flex: none; border-radius: 50%; background: #D5D8E0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M7 7l6 6M13 7l-6 6' stroke='%23fff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 100%; }
.sl-vsx__row:not(.sl-vsx__row--head) .sl-vsx__yes::before { background: #22C08F url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.5l2.6 2.5L14 7.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100%; box-shadow: 0 0 0 4px rgba(34, 192, 143, .18); }
.sl-vsx__row > b { align-self: center; justify-self: center; padding: 9px 14px; border-radius: var(--r-pill); background: #fff; box-shadow: 0 0 0 1px var(--line), 0 10px 22px -16px rgba(23, 23, 43, .4); font: 700 14px/1.2 var(--font); color: var(--ink); text-align: center; white-space: nowrap; transition: background-color .35s, color .35s, box-shadow .35s; }
.sl-vsx__row.is-on > b { background: var(--accent); color: #fff; box-shadow: 0 10px 22px -12px var(--accent); }
.sl-vsx__row--head > * { min-height: 0; padding-top: 28px; padding-bottom: 18px; font: 700 18px/1.25 var(--font); }
.sl-vsx__row--head .sl-vsx__no { color: var(--ink-2); }
.sl-vsx__row--head .sl-vsx__yes { color: #fff; }
.sl-vsx__mid { align-self: center; justify-self: center; padding: 28px 0 18px; font: 700 12.5px/1 var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.sl-vsx__gen { display: block; width: 44px; height: 44px; flex: none; border-radius: 14px; background: #E3E5EB url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 34'%3E%3Crect x='9' y='11' width='16' height='13' rx='4' fill='none' stroke='%239A9AAB' stroke-width='2'/%3E%3Ccircle cx='14' cy='17.5' r='1.5' fill='%239A9AAB'/%3E%3Ccircle cx='20' cy='17.5' r='1.5' fill='%239A9AAB'/%3E%3Cpath d='M17 8v3' stroke='%239A9AAB' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 100%; }
.sl-vsx__bot { display: block; width: 56px; height: 56px; flex: none; }
[data-sl-vsxbot] > svg { display: block; width: 100%; height: 100%; overflow: visible; }
.sl-vsx__row:last-child > .sl-vsx__no, .sl-vsx__row:last-child > .sl-vsx__yes { padding-bottom: 22px; }
.sl-vsx__no, .sl-vsx__yes { transition: opacity .45s, transform .5s var(--ease-out); }
.sl-vsx.is-pre .sl-vsx__row[data-v]:not(.is-in) .sl-vsx__no { opacity: 0; transform: translateX(-10px); }
.sl-vsx.is-pre .sl-vsx__row[data-v]:not(.is-in) .sl-vsx__yes { opacity: 0; transform: translateX(10px); }

/* ==========================================================================
   13 · IMPLEMENTATION · FOUR STAGES ON ONE LINE
   Numbered nodes on a colour track, each over a bordered stage card with
   the Adovvy team's task and the brand team's task.
   ========================================================================== */
.sl-go { position: relative; margin-top: clamp(40px, 5vw, 64px); }
.sl-go__track { position: absolute; left: 12.5%; right: 12.5%; top: 34px; height: 4px; margin-top: -2px; border-radius: 2px; background: #E6E8F0; }
.sl-go__track i { display: block; height: 100%; border-radius: 2px; background: linear-gradient(90deg, #4857C2, #14A578 33%, #D9467F 67%, #E06A2B); transform-origin: 0 50%; transform: scaleX(var(--gp, 1)); transition: transform .8s var(--ease-out); }
.sl-go__steps { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.sl-go__step { --cc: var(--accent); display: flex; flex-direction: column; align-items: center; gap: 20px; }
.sl-go__node { position: relative; z-index: 1; width: 68px; height: 68px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--cc) 16%, #fff); transition: transform .5s var(--ease-soft); }
.sl-go__node b { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--cc); font: 700 20px/1 var(--font); color: #fff; box-shadow: 0 10px 22px -10px var(--cc); }
.sl-go__card { align-self: stretch; flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 24px 22px 22px; border-radius: var(--card-r); background: #fff; box-shadow: var(--card-shadow); transition: opacity .5s, transform .6s var(--ease-out); }
.sl-go__ic { width: 50px; height: 50px; border-radius: 15px; display: grid; place-items: center; background: var(--ct); color: var(--cc); font-size: 24px; }
.sl-go__card h3 { margin: 0 0 6px; font: 700 22px/1.2 var(--font); letter-spacing: -.02em; color: var(--ink); }
.sl-go__task { display: grid; gap: 6px; padding: 13px 14px 14px; border-radius: 16px; background: var(--sand); transition: opacity .45s, transform .5s var(--ease-out); }
.sl-go__task--a { background: var(--ct); }
.sl-go__task small { display: flex; align-items: center; gap: 8px; font: 700 11.5px/1 var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.sl-go__task--a small { color: color-mix(in srgb, var(--cc) 80%, #17172B); }
.sl-go__task small i { width: 22px; height: 22px; flex: none; border-radius: 7px; display: grid; place-items: center; background: #fff; color: var(--ink-2); font-size: 13px; }
.sl-go__task--a small i { background: var(--accent); }
.sl-go__task--a small svg { width: 13px; height: auto; fill: #fff; color: #fff; }
.sl-go__task p { margin: 0; font: 600 15px/1.45 var(--font); color: var(--ink); }
.sl-go.is-pre .sl-go__step:not(.is-in) .sl-go__node { transform: scale(.6); }
.sl-go.is-pre .sl-go__step:not(.is-in) .sl-go__card { opacity: 0; transform: translateY(18px); }
.sl-go.is-pre .sl-go__step:not(.is-in) .sl-go__task { opacity: 0; transform: translateY(8px); }
.sl-go__step.is-in .sl-go__task--b { transition-delay: .25s; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1100px) {
  .sl-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .sl-hero__copy, .sl-web { max-width: 680px; }
  .sl-gaps { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .sl-gaps li { grid-column: span 2; }
  .sl-gaps li:nth-child(4) { grid-column: 2 / span 2; }
  .sl-biz { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; margin-inline: auto; }
  .sl-go { max-width: 760px; margin-inline: auto; }
  .sl-go__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; }
  .sl-go__track { display: none; }
}
@media (max-width: 960px) {
  .sl-stages3 { grid-template-columns: minmax(0, 1fr); max-width: 640px; margin-inline: auto; }
}
@media (max-width: 760px) {
  .sl-gaps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sl-gaps li, .sl-gaps li:nth-child(4) { grid-column: auto; }
  .sl-gaps li:last-child { grid-column: 1 / -1; }
  .sl-vsx { grid-template-columns: minmax(0, 1fr); gap: 14px; max-width: 560px; }
  .sl-vsx__panel, .sl-vsx__row--head { display: none; }
  .sl-vsx__row { display: grid; gap: 6px; padding: 8px; border-radius: 24px; background: var(--sand); }
  .sl-vsx__row > * { grid-row: auto; grid-column: auto !important; }
  .sl-vsx__row > b { justify-self: start; margin: 4px 0 4px 4px; }
  .sl-vsx__no, .sl-vsx__yes { min-height: 0; padding: 14px 16px; border-radius: 16px; }
  .sl-vsx__no { background: #fff; }
  .sl-vsx__yes { background: linear-gradient(170deg, #24214A, #15142B); }
  .sl-vsx__row:last-child > .sl-vsx__no, .sl-vsx__row:last-child > .sl-vsx__yes { padding-bottom: 14px; }
  .sl-vsx__row.sl-vsx__row--head { display: none; }
  .sl-vsx__row:not(.sl-vsx__row--head) .sl-vsx__no, .sl-vsx__row:not(.sl-vsx__row--head) .sl-vsx__yes { flex-wrap: wrap; row-gap: 6px; }
  .sl-vsx__row:not(.sl-vsx__row--head) .sl-vsx__no::after, .sl-vsx__row:not(.sl-vsx__row--head) .sl-vsx__yes::after { display: block; position: static; order: -1; width: 100%; height: auto; background: none; font: 700 11.5px/1 var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
  .sl-vsx__row:not(.sl-vsx__row--head) .sl-vsx__no::after { content: 'Generic chatbots'; }
  .sl-vsx__row:not(.sl-vsx__row--head) .sl-vsx__yes::after { content: 'Sleep-trained agents'; color: #AEB7FF; }
}
@media (max-width: 600px) {
  .sl-hero__title { font-size: clamp(32px, 8.6vw, 48px); }
  .sl-hero__ctas .btn, .sl-band .btn { width: 100%; }
  .sl-web { padding: 12px; border-radius: 26px; }
  .sl-web__in { min-height: 500px; }
  .sl-web__win { width: 100%; bottom: auto; height: 160px; }
  .sl-web__nav span:not(.sl-web__cart):not(:nth-child(2)) { display: none; }
  .sl-web__site { display: none; }
  .sl-web__chat { left: 0; right: 0; bottom: 0; width: auto; height: 420px; }
  .sl-gaps { grid-template-columns: minmax(0, 1fr); }
  .sl-gaps__vis { height: 130px; }
  .sl-biz { grid-template-columns: minmax(0, 1fr); }
  .sl-go__steps { grid-template-columns: minmax(0, 1fr); row-gap: 14px; }
  .sl-go__step { flex-direction: row; align-items: flex-start; gap: 12px; }
  .sl-go__node { width: 48px; height: 48px; flex: none; }
  .sl-go__node b { width: 36px; height: 36px; font-size: 16px; }
  .sl-go__card { padding: 18px 16px 16px; }
  .sl-go__card h3 { font-size: 20px; }
  .sl-stg ul { padding-inline: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .sl-web__typing i, .sl-chs__wave i, .sl-blur .sl-mini, .sl-q-wait::after, .sl-wait i, .sl-feel em, .sl-inbox i, .sl-exp::before, .sl-exp::after { animation: none; }
}

/* 20 Oct · sentence-case hero title: an even split gives "Turn mattress questions"
   its own line on desktop (the 1100px rule above still stacks the hero). */
@media (min-width: 1101px) { .sl-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* ==========================================================================
   SHARED INDUSTRY DESIGNS (20 Oct) — the same presentation as the
   Automotive and Ecommerce pages, copied rule for rule with the sl- prefix.
   ========================================================================== */
/* --- Recommendations: steps beside a phone --- */
.sl-gc { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: clamp(24px, 4vw, 64px); align-items: center; max-width: 1080px; margin: clamp(40px, 5vw, 64px) auto 0; }
.sl-gc__steps { position: relative; display: grid; gap: 10px; padding-left: 0; }
.sl-gc__bar { position: absolute; left: 31px; top: 30px; bottom: 30px; width: 3px; border-radius: 2px; background: var(--line-2); }
.sl-gc__bar i { position: absolute; inset: 0; border-radius: 2px; background: linear-gradient(180deg, #4857C2, #7B5CF0, #14A578); transform-origin: 50% 0; transform: scaleY(var(--p, 0)); transition: transform .8s var(--ease-out); }
.sl-gc__step { all: unset; box-sizing: border-box; position: relative; cursor: pointer; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; align-items: start; padding: 14px 16px; border-radius: 20px; transition: background-color .3s, box-shadow .3s; }
.sl-gc__step:hover { background: var(--sand); }
.sl-gc__step:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sl-gc__step > i { position: relative; z-index: 1; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #fff; box-shadow: inset 0 0 0 2px var(--line-2); font: 800 13.5px/1 var(--font); font-style: normal; color: var(--muted); transition: background-color .3s, color .3s, box-shadow .3s; }
.sl-gc__step b { display: block; font: 700 17px/1.25 var(--font); color: var(--ink); }
.sl-gc__step small { display: block; margin-top: 4px; font: 400 15px/1.45 var(--font); color: var(--body); }
.sl-gc__step.is-on { background: #fff; box-shadow: var(--card-shadow); }
.sl-gc__step.is-on > i, .sl-gc__step.is-done > i { background: var(--accent); color: #fff; box-shadow: none; }
.sl-gc__phone { justify-self: center; width: 100%; max-width: 360px; padding: 10px; border-radius: 44px; background: #17172B; box-shadow: var(--card-shadow); }
.sl-gc__scr { position: relative; height: 560px; display: flex; flex-direction: column; border-radius: 34px; overflow: hidden; background: #FAFAFC; }
.sl-gc__top { display: flex; align-items: center; gap: 8px; padding: 18px 16px 12px; background: #fff; border-bottom: 1px solid var(--line); }
.sl-gc__bot { display: block; width: 30px; height: 30px; flex: none; }
.sl-gc__top b { flex: 1; font: 800 13px/1 var(--font); letter-spacing: .04em; text-transform: uppercase; color: var(--ink); }
.sl-gc__cart { position: relative; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: var(--sand); font-size: 17px; color: var(--ink); }
.sl-gc__cart em { position: absolute; right: -6px; top: -6px; min-width: 17px; height: 17px; border-radius: 9px; display: grid; place-items: center; background: #22C08F; font: 700 10.5px/1 var(--font); font-style: normal; color: #fff; opacity: 0; transform: scale(.4); transition: opacity .3s, transform .35s var(--ease-soft); }
.sl-gc.is-cart .sl-gc__cart em { opacity: 1; transform: none; }
.sl-gc__panel { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 9px; padding: 14px; }
.sl-gc__panel[hidden] { display: none; }
.sl-gc__panel > * { animation: slMsg2 .45s var(--ease-soft) both; }
.sl-gc__panel > :nth-child(2) { animation-delay: .5s; } .sl-gc__panel > :nth-child(3) { animation-delay: 1s; }
.sl-gc__panel .sl-b { font-size: 13.5px; max-width: 88%; }
.sl-gc__panel .sl-b--out { background: #fff; box-shadow: 0 0 0 1px var(--line); }
.sl-gc__prod { position: relative; display: flex; align-items: center; gap: 10px; padding: 9px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--accent); }
.sl-gc__prod img { width: 62px; height: 62px; flex: none; border-radius: 11px; object-fit: cover; }
.sl-gc__prod span { display: grid; gap: 2px; }
.sl-gc__prod b { font: 700 13px/1.2 var(--font); color: var(--ink); }
.sl-gc__prod small { font: 500 11.5px/1.3 var(--font); color: var(--muted); }
.sl-gc__prod strong { font: 800 13.5px/1.2 var(--font); color: var(--accent-ink); }
.sl-gc__prod em { position: absolute; right: 10px; top: -9px; padding: 4px 8px; border-radius: var(--r-pill); background: var(--accent); font: 700 10px/1 var(--font); font-style: normal; color: #fff; }
.sl-gc__cmp, .sl-gc__chart { display: grid; border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px var(--line); }
.sl-gc__cmp > span, .sl-gc__chart > span { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; padding: 8px 11px; font: 500 12px/1.3 var(--font); }
.sl-gc__cmp > span:nth-child(even), .sl-gc__chart > span:nth-child(even) { background: var(--paper); }
.sl-gc__cmp i, .sl-gc__chart i { font-style: normal; color: var(--muted); }
.sl-gc__cmp b, .sl-gc__chart b { font-weight: 700; color: var(--ink); }
.sl-gc__cmp .is-best { color: var(--accent-ink); }
.sl-gc__cmp .is-yes { color: var(--green-ink); }
.sl-gc__chart span.is-pick { background: var(--t-indigo) !important; box-shadow: inset 3px 0 0 var(--accent); }
.sl-gc__chart span.is-pick b { color: var(--i-indigo); }
.sl-gc__facts { display: flex; flex-wrap: wrap; gap: 6px; }
.sl-gc__facts i { display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: var(--r-pill); background: #fff; box-shadow: 0 0 0 1px var(--line); font: 700 11.5px/1 var(--font); font-style: normal; color: var(--ink-2); }
.sl-gc__facts .icon { font-size: 14px; color: var(--accent); }
.sl-gc__checkout { align-self: stretch; padding: 13px; border-radius: 14px; background: var(--ink); text-align: center; font: 700 13.5px/1 var(--font); color: #fff; }
/* --- Case study: story, photo and results --- */
.sl-mg__pic { position: relative; margin: 0; border-radius: var(--card-r); overflow: hidden; aspect-ratio: 16 / 10; }
.sl-mg__pic > img { width: 100%; height: 100%; object-fit: cover; }
.sl-mg__pic figcaption { position: absolute; left: 16px; bottom: 16px; display: flex; align-items: center; gap: 10px; padding: 9px 14px 9px 9px; border-radius: 16px; background: rgba(255, 255, 255, .94); }
.sl-mg__pic figcaption img { width: 30px; height: 40px; object-fit: contain; }
.sl-mg__pic b { display: block; font: 700 14.5px/1.2 var(--font); color: var(--ink); }
.sl-mg__pic small { display: block; font: 500 12px/1.3 var(--font); color: var(--muted); }
.sl-mg { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.sl-mg__copy .lede { margin: 18px 0 28px; text-wrap: pretty; }
.sl-mg__stats { list-style: none; margin: clamp(40px, 5vw, 64px) 0 0; padding: clamp(24px, 3vw, 36px) 0 0; border-top: 1px solid var(--line-deep); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.sl-mg__stats li { display: grid; gap: 6px; }
.sl-mg__stats b { font: 800 clamp(40px, 4.4vw, 60px)/1 var(--font); letter-spacing: -.04em; color: #fff; font-variant-numeric: tabular-nums; }
.sl-mg__stats span { font: 500 16px/1.4 var(--font); color: var(--on-deep-2); }
/* --- Closing band --- */

/* --- Analytics: dashboard with tabs --- */
.sl-db { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(18px, 3vw, 36px); align-items: stretch; max-width: 1120px; margin: clamp(40px, 5vw, 64px) auto 0; }
.sl-db__th { display: block; padding: 0 14px 8px; font: 700 11.5px/1 var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.sl-db__tabs { display: grid; gap: 8px; }
.sl-db__tabs button { all: unset; box-sizing: border-box; cursor: pointer; display: block; padding: 14px 16px; border-radius: 18px; background: var(--sand); transition: background-color .3s, box-shadow .3s; }
.sl-db__tabs button:hover { background: var(--sand-2); }
.sl-db__tabs button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sl-db__tabs b { display: block; font: 700 16px/1.25 var(--font); color: var(--ink); }
.sl-db__tabs small { display: block; margin-top: 4px; font: 400 14px/1.45 var(--font); color: var(--body); }
.sl-db__tabs button.is-on { background: #fff; box-shadow: 0 0 0 2px var(--accent), 0 20px 36px -28px rgba(72, 87, 194, .7); }
.sl-db__win { display: flex; flex-direction: column; border-radius: 26px; overflow: hidden; background: #fff; box-shadow: var(--card-shadow); }
.sl-db__bar { display: flex; align-items: center; gap: 6px; padding: 12px 16px; background: var(--deep); }
.sl-db__bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .2); }
.sl-db__bar span { margin-left: 8px; font: 700 12.5px/1 var(--font); color: #fff; }
.sl-db__bar .sl-db__th { margin-left: auto; padding: 0; color: var(--on-deep-3); }
.sl-db__panel { flex: 1; display: grid; gap: 16px; padding: clamp(18px, 2.4vw, 26px); min-height: 330px; align-content: start; }
.sl-db__panel[hidden] { display: none; }
.sl-db__panel.is-on { animation: slMsg2 .5s var(--ease-soft) both; }
.sl-db__cap { font: 600 12.5px/1.3 var(--font); color: var(--muted); }
.sl-db__kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.sl-db__kpis span { display: grid; gap: 6px; padding: 14px; border-radius: 16px; background: var(--paper); }
.sl-db__kpis small { font: 600 12px/1.25 var(--font); color: var(--muted); }
.sl-db__kpis b { font: 800 26px/1 var(--font); letter-spacing: -.02em; color: var(--ink); }
.sl-db__hbars { display: grid; gap: 10px; }
.sl-db__hbars span { display: grid; grid-template-columns: 96px minmax(0, 1fr) 34px; align-items: center; gap: 10px; }
.sl-db__hbars i { font: 600 13px/1.2 var(--font); font-style: normal; color: var(--ink-2); }
.sl-db__hbars em { height: 14px; border-radius: 7px; background: linear-gradient(90deg, #4857C2, #7B5CF0); transform-origin: 0 50%; transform: scaleX(var(--v)); }
.sl-db__hbars b { font: 700 13.5px/1 var(--font); color: var(--ink); text-align: right; }
.sl-db__panel.is-on .sl-db__hbars em, .sl-db__panel.is-on .sl-db__rank em { animation: slGrowX .9s var(--ease-out) both; }
.sl-db__rank { display: grid; gap: 8px; }
.sl-db__rank span { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 10px; padding: 11px 14px; border-radius: 14px; background: var(--paper); overflow: hidden; }
.sl-db__rank i { grid-row: span 2; align-self: center; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #fff; font: 800 12.5px/1 var(--font); font-style: normal; color: var(--accent); }
.sl-db__rank b { position: relative; font: 700 14px/1.25 var(--font); color: var(--ink); }
.sl-db__rank small { position: relative; font: 500 12px/1.3 var(--font); color: var(--muted); }
.sl-db__rank em { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--accent); transform-origin: 0 50%; transform: scaleX(var(--v)); }
.sl-db__legend { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.sl-db__legend span { display: inline-flex; align-items: center; gap: 6px; font: 600 12.5px/1 var(--font); color: var(--ink-2); }
.sl-db__legend span::before { content: ''; width: 10px; height: 10px; border-radius: 3px; background: var(--cc); }
.sl-db__stack, .sl-db__cols { display: flex; align-items: flex-end; gap: 10px; height: 180px; padding-bottom: 22px; }
.sl-db__stack span, .sl-db__cols span { position: relative; flex: 1; display: flex; flex-direction: column-reverse; height: 100%; }
.sl-db__stack span { gap: 2px; }
.sl-db__stack b { flex: none; height: calc(var(--h) * 72%); border-radius: 3px; background: var(--cc); }
.sl-db__cols span::before { content: ''; height: calc(var(--v) * 100%); border-radius: 6px 6px 3px 3px; background: linear-gradient(180deg, #14A578, #10827C); }
.sl-db__stack i, .sl-db__cols i { position: absolute; left: 0; right: 0; bottom: -20px; text-align: center; font: 600 11px/1 var(--font); font-style: normal; color: var(--muted); }
.sl-db__panel.is-on .sl-db__stack span, .sl-db__panel.is-on .sl-db__cols span { animation: slGrowY .8s var(--ease-out) both; transform-origin: 50% 100%; }
.sl-db__grid { display: grid; border-radius: 16px; overflow: hidden; box-shadow: 0 0 0 1px var(--line); }
.sl-db__grid > span { display: grid; grid-template-columns: minmax(0, 1.2fr) repeat(3, minmax(0, 1fr)); align-items: center; padding: 12px 14px; font: 600 14px/1.2 var(--font); }
.sl-db__grid > span:nth-child(odd) { background: var(--paper); }
.sl-db__grid i { font-style: normal; color: var(--ink-2); }
.sl-db__grid b { color: var(--ink); text-align: center; }
.sl-db__gh { background: #fff !important; border-bottom: 1px solid var(--line); }
.sl-db__gh b { font: 700 12px/1 var(--font); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.sl-db__gt { background: var(--t-indigo) !important; }
.sl-db__gt i, .sl-db__gt b { font-weight: 800; color: var(--i-indigo); }
.sl-ask { display: flex; align-items: center; gap: 20px; max-width: 900px; margin: clamp(40px, 5vw, 56px) auto 0; padding: clamp(18px, 2.5vw, 26px) clamp(20px, 3vw, 32px); border-radius: var(--card-r); background: #fff; box-shadow: var(--card-shadow); }
.sl-ask__bot { display: block; width: 64px; height: 64px; flex: none; }
.sl-ask__t { flex: 1; margin: 0; font: 700 clamp(20px, 2vw, 25px)/1.25 var(--font); letter-spacing: -.02em; color: var(--ink); text-wrap: balance; }
.sl-ask .btn { flex: none; }
@keyframes slMsg2 { from { opacity: 0; transform: translateY(10px); } }
@keyframes slWave2 { from { transform: scaleY(.3); } }
@keyframes slGrowX { from { transform: scaleX(0); } }
@keyframes slGrowY { from { transform: scaleY(0); } }
/* --- Sleep additions to the shared designs --- */
.sl-gc__chips { align-self: flex-end; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.sl-gc__chips i { padding: 7px 11px; border-radius: var(--r-pill); background: #fff; box-shadow: inset 0 0 0 1.5px #AEB7FF; font: 600 12px/1 var(--font); font-style: normal; color: var(--accent-ink); }
.sl-gc__duo { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sl-gc__duo > span { position: relative; display: grid; gap: 3px; padding: 10px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px var(--line); }
.sl-gc__duo > span.is-best { box-shadow: inset 0 0 0 1.5px var(--accent); }
.sl-gc__duo b { font: 700 12.5px/1.2 var(--font); color: var(--ink); }
.sl-gc__duo small { font: 500 11px/1.3 var(--font); color: var(--muted); }
.sl-gc__duo strong { font: 700 12.5px/1.2 var(--font); color: var(--accent-ink); }
.sl-gc__duo i { position: absolute; right: 8px; top: -8px; padding: 4px 7px; border-radius: var(--r-pill); background: var(--accent); font: 700 10px/1 var(--font); font-style: normal; color: #fff; }
.sl-gc__added { align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; margin: 0; padding: 9px 12px; border-radius: 13px; background: var(--green-tint); font: 700 12.5px/1.3 var(--font); color: var(--green-ink); }
.sl-gc__added svg { width: 14px; height: 14px; flex: none; }
.sl-db__gain { align-self: end; justify-self: start; display: inline-flex; align-items: center; gap: 7px; margin-top: 4px; padding: 9px 13px; border-radius: var(--r-pill); background: var(--green-tint); font: 700 13px/1.2 var(--font); color: var(--green-ink); }
.sl-db__gain svg { width: 14px; height: 14px; }
.sl-db__heat { display: grid; gap: 6px; }
.sl-db__heat > span { display: grid; grid-template-columns: 64px repeat(3, minmax(0, 1fr)); gap: 6px; align-items: center; }
.sl-db__heat i { font: 600 12.5px/1 var(--font); font-style: normal; color: var(--ink-2); }
.sl-db__heat b { height: 34px; border-radius: 9px; background: color-mix(in srgb, #4857C2 calc(var(--v) * 100%), #EEF0FB); }
.sl-db__hh b { height: auto; background: none; font: 700 11.5px/1 var(--font); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); text-align: center; }
.sl-mg__ask { display: flex; align-items: center; gap: 20px; margin-top: clamp(28px, 4vw, 44px); padding: clamp(18px, 2.5vw, 26px) clamp(20px, 3vw, 32px); border-radius: var(--card-r); background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px var(--line-deep); }
.sl-mg__ask > div { flex: 1; }
.sl-mg__t { margin: 0; font: 700 clamp(20px, 2vw, 25px)/1.25 var(--font); letter-spacing: -.02em; color: #fff; }
.sl-mg__ask p { margin: 6px 0 0; font: 500 16px/1.5 var(--font); color: var(--on-deep-2); }
.sl-ask__copy { flex: 1; }
.sl-ask__sub { margin: 6px 0 0; font: 500 16px/1.5 var(--font); color: var(--body); }
.sl-lg__row { list-style: none; margin: 0 auto; padding: 0; max-width: 1080px; display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: clamp(16px, 4vw, 56px); }
.sl-lg__row li { display: grid; place-items: center; height: 48px; flex: 0 1 auto; min-width: 0; }
.sl-lg__row img { height: calc(clamp(22px, 2.2vw, 32px) * var(--s, 1)); width: auto; max-width: 100%; object-fit: contain; opacity: .62; }
/* The gaps: the moments card from the other industry pages (picture in a
   tinted well inside the card). */
.sl-gaps li { padding: 14px 14px 8px; }
.sl-gaps li > :first-child { border-radius: 18px; }
.sl-gaps h3 { padding: 18px 6px 0; }
.sl-gaps p { padding: 0 6px 14px; }

/* --- Responsive: shared industry designs --- */
@media (max-width: 1000px) {
  .sl-mg__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
  .sl-gc { grid-template-columns: minmax(0, 1fr); }
  .sl-gc__phone { order: -1; }
  .sl-db__tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sl-db__tabs .sl-db__th { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  .sl-gc__scr { height: 520px; }
  .sl-gc__step small { display: none; }
  .sl-gc__step.is-on small { display: block; }
  .sl-gc__bar { display: none; }
  .sl-db__tabs { grid-template-columns: minmax(0, 1fr); }
  .sl-db__tabs button:not(.is-on) small { display: none; }
  .sl-db__kpis b { font-size: 20px; }
  .sl-db__panel { min-height: 0; }
  .sl-db__kpis span { padding: 10px; }
  .sl-db__grid > span { font-size: 12.5px; padding: 10px; }
}
@media (max-width: 1000px) { .sl-mg__ask { flex-direction: column; align-items: flex-start; } .sl-mg { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 700px) { .sl-lg__row img { height: calc(clamp(15px, 4.4vw, 22px) * var(--s, 1)); } .sl-ask { flex-direction: column; text-align: center; } .sl-ask .btn { width: 100%; justify-content: center; } }
/* Analytics: tabs above the dashboard window below 1000px (as on Automotive). */
@media (max-width: 1000px) { .sl-db { grid-template-columns: minmax(0, 1fr); } }

/* --- Previous Sleep designs, now the shared industry standard (20 Oct): expertise, channels, brand control --- */
.sl-mav { display: block; width: 30px; height: 30px; flex: none; }
.sl-exp { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 240px minmax(0, 1fr); gap: 0 clamp(20px, 3vw, 44px); align-items: center; max-width: 1120px; margin: clamp(40px, 5vw, 64px) auto 0; }
.sl-exp__col { position: relative; z-index: 1; padding: 24px; border-radius: var(--card-r); background: var(--sand); box-shadow: none; }
.sl-exp__k { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font: 700 18px/1.25 var(--font); color: var(--ink); }
.sl-exp__k span { width: 28px; height: 28px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--accent); font: 700 13px/1 var(--font); color: #fff; }
.sl-exp__col--b .sl-exp__k span { background: #14A578; }
.sl-exp__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sl-exp__col li { position: relative; display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 12px 14px; border-radius: 16px; background: #fff; font: 600 15.5px/1.35 var(--font); color: var(--ink); transition: opacity .4s, transform .5s var(--ease-out), box-shadow .35s; }
.sl-exp__col li::before { content: ''; width: 9px; height: 9px; flex: none; border-radius: 50%; background: var(--accent); }
.sl-exp__col--b li::before { background: #14A578; }
.sl-exp__col li.is-on { box-shadow: 0 0 0 1.5px var(--accent-soft), 0 14px 28px -20px rgba(23, 23, 43, .45); }
.sl-exp__col--b li.is-on { box-shadow: 0 0 0 1.5px #9EE3C8, 0 14px 28px -20px rgba(23, 23, 43, .45); }
.sl-exp.is-pre .sl-exp__col li:not(.is-in) { opacity: 0; transform: translateY(8px); }
.sl-exp::before, .sl-exp::after { content: ''; position: absolute; top: 50%; height: 2px; width: calc(50% - 120px); background: repeating-linear-gradient(90deg, #AEB7FF 0 8px, transparent 8px 16px) 0 0 / 32px 2px; animation: slFlow 1.2s linear infinite; }
.sl-exp::before { left: 0; }
.sl-exp::after { right: 0; background-image: repeating-linear-gradient(90deg, #8FDCBE 0 8px, transparent 8px 16px); animation-direction: reverse; }
.sl-exp__core { position: relative; z-index: 1; display: grid; justify-items: center; gap: 6px; padding: 26px 18px 22px; border-radius: 32px; background: radial-gradient(80% 70% at 50% 0%, #3B3484 0%, transparent 70%), linear-gradient(170deg, #24214A, #15142B); text-align: center; box-shadow: 0 30px 60px -36px rgba(21, 20, 43, .7); }
.sl-exp__bot { display: block; width: 120px; height: 120px; }
.sl-exp__core b { font: 700 18px/1.2 var(--font); color: #fff; }
.sl-exp__core small { padding: 6px 10px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .1); font: 600 12px/1 var(--font); color: #C9CEFF; transition: background-color .4s, color .4s; }
.sl-exp.is-ready .sl-exp__core small { background: #22C08F; color: #fff; }
.sl-row__k { display: flex; align-items: center; gap: 14px; margin: clamp(36px, 4.5vw, 56px) 0 16px; font: 700 13px/1 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.sl-row__k::after { content: ''; flex: 1; height: 1px; background: var(--line-2); }
.sl-row__k--store { margin-top: 32px; }
.sl-chs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.sl-chs--store { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sl-chs li { --cc: var(--accent); display: flex; flex-direction: column; border-radius: var(--card-r); overflow: hidden; background: #fff; box-shadow: var(--card-shadow); }
.sl-chs__vis { position: relative; display: grid; justify-items: center; align-content: end; gap: 10px; height: 210px; padding: 18px; background: radial-gradient(70% 60% at 50% 90%, color-mix(in srgb, var(--cc) 22%, #fff) 0%, transparent 70%), color-mix(in srgb, var(--cc) 7%, #fff); }
.sl-chs--store .sl-chs__vis { height: 260px; }
.sl-chs__q { position: relative; z-index: 1; max-width: 92%; padding: 9px 13px; border-radius: 16px 16px 16px 5px; background: #fff; font: 600 13px/1.35 var(--font); color: var(--ink); box-shadow: 0 10px 24px -16px rgba(23, 23, 43, .45); }
.sl-chs__bot { display: block; width: 100px; height: 100px; }
.sl-chs--store .sl-chs__bot { width: 130px; height: 130px; }
.sl-chs__wave { position: absolute; right: 16%; bottom: 44px; display: flex; align-items: center; gap: 3px; height: 26px; }
.sl-chs__wave i { width: 3px; height: 100%; border-radius: 2px; background: var(--cc); transform: scaleY(.3); animation: slWave .6s ease-in-out infinite alternate; }
.sl-chs__wave i:nth-child(2n) { animation-delay: -.25s; } .sl-chs__wave i:nth-child(3n) { animation-delay: -.45s; }
.sl-chs__vis--pic { align-content: start; justify-items: start; padding: 16px; }
.sl-chs__vis--pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.sl-chs h3 { display: flex; align-items: center; gap: 10px; margin: 0; padding: 18px 20px 0; font: 700 18px/1.25 var(--font); color: var(--ink); }
.sl-chs h3 .icon { flex: none; color: var(--cc); font-size: 20px; }
.sl-chs h3 img { width: 20px; height: 20px; }
.sl-chs__two { display: inline-flex; flex: none; gap: 3px; }
.sl-chs p { margin: 6px 0 0; padding: 0 20px 22px; font: 400 15px/1.5 var(--font); color: var(--body); }
.sl-ctl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.sl-ctl__copy .lede { margin-top: 18px; }
.sl-ticks { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 12px; }
.sl-ticks li { position: relative; padding-left: 34px; font: 400 16px/1.55 var(--font); color: var(--body); }
.sl-ticks li::before { content: ''; position: absolute; left: 0; top: 2px; width: 22px; height: 22px; border-radius: 50%; background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.5l2.6 2.5L14 7.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100%; }
.sl-ticks b { color: var(--ink); }
.sl-rule { border-radius: 28px; overflow: hidden; background: #fff; box-shadow: var(--card-shadow); }
.sl-rule__bar { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.sl-rule__bar b { font: 700 15px/1 var(--font); color: var(--ink); }
.sl-rule__bar small { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding: 6px 10px; border-radius: var(--r-pill); background: var(--green-tint); font: 700 11.5px/1 var(--font); color: var(--green-ink); }
.sl-rule__bar small::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #22C08F; }
.sl-rule__body { display: flex; flex-direction: column; gap: 10px; padding: 20px; min-height: 340px; }
.sl-rule__body > * { transition: opacity .45s, transform .5s var(--ease-out); }
.sl-rule.is-pre [data-rs]:not(.is-in) { opacity: 0; transform: translateY(10px); }
.sl-rule__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.sl-rule__tags i { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: var(--r-pill); background: var(--accent-tint); font: 700 11.5px/1 var(--font); font-style: normal; color: var(--accent-ink); }
.sl-rule__tags i::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.sl-hand { align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 8px 14px 8px 8px; border-radius: var(--r-pill); background: var(--sand); font: 700 13px/1.2 var(--font); color: var(--ink); }
.sl-hand img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
@media (max-width: 1100px) {
  .sl-chs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .sl-exp { grid-template-columns: minmax(0, 1fr); gap: 16px; max-width: 560px; }
  .sl-exp::before, .sl-exp::after { display: none; }
  .sl-exp__core { order: -1; grid-template-columns: auto minmax(0, 1fr); justify-items: start; align-items: center; text-align: left; column-gap: 14px; padding: 18px 20px; }
  .sl-exp__bot { grid-row: span 2; width: 80px; height: 80px; }
  .sl-rec, .sl-ctl { grid-template-columns: minmax(0, 1fr); }
  .sl-ctl__copy { max-width: 640px; }
}
@media (max-width: 600px) {
  .sl-chs, .sl-chs--store { grid-template-columns: minmax(0, 1fr); }
  .sl-chs--store .sl-chs__vis { height: 220px; }
  .sl-rule__body { min-height: 0; padding: 16px; }
  .sl-exp__col { padding: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .sl-chs__wave i, .sl-exp::before, .sl-exp::after { animation: none; }
}

/* Both lists run the full height, so the two boxes match (20 Oct). */
.sl-exp__col { align-self: stretch; display: flex; flex-direction: column; }
.sl-exp__col ul { flex: 1; grid-auto-rows: 1fr; }

/* === WIDGET START (tools/industry/widget.css, shared by every industry hero) === */
.aw { display: flex; flex-direction: column; overflow: hidden; border-radius: 20px; background: #fff; box-shadow: var(--card-shadow), 0 0 0 1px rgba(23, 23, 43, .06); }
.aw-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: linear-gradient(180deg, #ECEEFD 0%, #F6F7FE 70%, #fff 100%); border-bottom: 1px solid #EEF0F4; color: var(--ink); }
.aw-av { position: relative; width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; background: #E3E6FA; }
.aw-av__bot { display: block; width: 34px; height: 34px; }
.aw-av__bot > svg { display: block; width: 100%; height: 100%; overflow: visible; }
.aw-who { min-width: 0; }
.aw-who b { display: block; font: 800 13.5px/1.2 var(--font); letter-spacing: .03em; text-transform: uppercase; color: var(--ink); white-space: nowrap; }
.aw-icons { margin-left: auto; display: flex; align-items: center; gap: 12px; color: var(--ink-2); }
.aw-icons i { display: grid; place-items: center; }
.aw-icons svg { display: block; width: 18px; height: 18px; }
.aw-icons i:first-child svg { width: 17px; height: 17px; }
.aw-body { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; padding: 14px; overflow: hidden; background: #fff; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 28px); mask-image: linear-gradient(180deg, transparent 0, #000 28px); }
.aw-body > * { flex: none; }
.aw-u { align-self: flex-end; max-width: 84%; margin: 0; padding: 9px 14px; border-radius: 12px; background: #F5F6F8; box-shadow: inset 0 0 0 1px #E3E5EA; font: 500 13.5px/1.4 var(--font); color: var(--ink); }
.aw-a { align-self: flex-start; max-width: 94%; margin: 0; font: 400 13.5px/1.5 var(--font); color: var(--ink); }
.aw-u--voice { display: inline-flex; flex-direction: column; gap: 6px; font-style: italic; }
.aw-wave { display: flex; align-items: center; gap: 3px; height: 16px; }
.aw-wave i { width: 3px; height: 100%; border-radius: 2px; background: var(--accent); animation: awWave .6s ease-in-out infinite alternate; }
.aw-wave i:nth-child(2n) { animation-delay: -.2s; } .aw-wave i:nth-child(3n) { animation-delay: -.4s; }
@keyframes awWave { from { transform: scaleY(.3); } }
.aw-card { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px #E3E5EA; }
.aw-card__img { display: grid; place-items: center; height: 78px; border-radius: 10px; overflow: hidden; background: #F2F3F5; }
.aw-card__img img { width: 100%; height: 100%; object-fit: cover; }
.aw-card__img img.is-contain { object-fit: contain; mix-blend-mode: multiply; }
.aw-card__img .aw-mat { width: 62px; height: 34px; margin: 0; }
.aw-card__info { display: grid; gap: 4px; min-width: 0; }
.aw-tag { justify-self: start; padding: 3px 8px; border-radius: 6px; background: var(--green-tint); font: 600 11px/1.3 var(--font); font-style: normal; color: var(--green-ink); }
.aw-card b { font: 700 13px/1.25 var(--font); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aw-price { display: flex; align-items: baseline; gap: 6px; }
.aw-price strong { font: 700 13.5px/1 var(--font); color: var(--accent); }
.aw-price s { font: 500 12px/1 var(--font); color: var(--muted); }
.aw-btn { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 3px; padding: 8px 10px; border-radius: 999px; background: var(--accent); font: 700 12px/1 var(--font); color: #fff; }
.aw-btn::before { content: '+'; font: 600 16px/1 var(--font); }
.aw-chips { align-self: flex-end; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.aw-chips i { padding: 8px 12px; border-radius: 12px; background: #F5F6F8; box-shadow: inset 0 0 0 1px #E3E5EA; font: 500 12.5px/1 var(--font); font-style: normal; color: var(--ink); transition: background-color .25s, color .25s, box-shadow .25s, transform .25s; }
.aw-chips i.is-on { background: var(--accent); color: #fff; box-shadow: none; transform: scale(.96); }
.aw-done { align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; margin: 0; padding: 8px 12px; border-radius: 12px; background: var(--green-tint); font: 600 12.5px/1.3 var(--font); color: var(--green-ink); }
.aw-done svg { width: 14px; height: 14px; flex: none; }
.aw-typing { display: none; align-self: flex-start; gap: 4px; margin: 0; padding: 6px 0; }
.aw-typing.is-on { display: inline-flex; }
.aw-typing i { width: 7px; height: 7px; border-radius: 50%; background: #B9BFEA; animation: awDot 1s ease-in-out infinite; }
.aw-typing i:nth-child(2) { animation-delay: .15s; } .aw-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes awDot { 50% { transform: translateY(-4px); opacity: .5; } }
.aw-input { display: flex; align-items: center; gap: 8px; margin: 0 12px 12px; padding: 6px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px #E3E5EA; }
.aw-input span { flex: 1; min-width: 0; font: 400 12.5px/1 var(--font); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aw-ib { width: 32px; height: 32px; flex: none; border-radius: 10px; display: grid; place-items: center; box-shadow: inset 0 0 0 1px #E3E5EA; font-style: normal; color: var(--ink); }
.aw-ib svg { width: 16px; height: 16px; }
.aw-ib--mic { background: #EEF0FB; box-shadow: none; color: var(--accent); }
@media (max-width: 700px) { .aw-icons { gap: 10px; } .aw-icons svg { width: 16px; height: 16px; } }
@media (prefers-reduced-motion: reduce) { .aw-wave i, .aw-typing i { animation: none; } }
/* === WIDGET END === */
/* Case study line under the title (22 Oct SEO doc) */
.sl-mg__sub { margin: 14px 0 0; font: 700 clamp(16px, 1.3vw, 18px)/1.3 var(--font); color: var(--on-deep); }
.sl-mg__sub + .lede { margin-top: 12px; }