/* CTAurl homepage prototype — below-the-hero sections, Slack homepage structure.
   Structure measured on slack.com/intl/en-gb at 1440px, 27 Oct 2026 (getBoundingClientRect / getComputedStyle).
   Tokens: CTAURL UI Specification (tokens.css). Hero above is Grok's, unchanged.
   Every class here is prefixed x- so nothing collides with the site CSS. */

:root {
  --x-ink: var(--text-primary, #10221B);
  --x-ink2: var(--text-secondary, #355247);
  --x-mute: var(--text-muted, #66776E);
  --x-line: var(--border-default, #D6E1D8);
  --x-canvas: var(--bg-canvas, #F7F8F4);
  --x-brand: var(--brand, #1ED760);
  --x-brand-press: var(--brand-pressed, #0D9D3F);
  --x-link: var(--link, #08783B);
  --x-dark: #0E1F17;            /* CTAurl ink family in place of Slack aubergine #481A54 */
  --x-dark2: #15291F;
  --x-ease: var(--ease-standard, cubic-bezier(.2,.8,.2,1));
  --x-head: 80px;               /* set from the real header height by JS */
}

.x-wrap { width: min(1230px, 100% - 64px); margin-inline: auto; }
.x-center { text-align: center; }
.x-nowrap { white-space: nowrap; }
.x-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.x-btn-lg { min-height: 56px; padding-inline: 32px; font-size: .9375rem; }
.x-btn-light { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.55); }
.x-btn-light:hover { background: rgba(255,255,255,.1); border-color: #fff; color: #fff; }

/* shared type (Slack: section H2 32/40 w700; band H2 50/56 w600; body 18/28) */
.x-h2 { font-size: 32px; line-height: 40px; font-weight: 700; letter-spacing: -.012em; color: var(--x-ink); margin: 0; }
.x-h2--light { color: #fff; }
.x-band__h, .x-ch__h { font-size: 50px; line-height: 56px; font-weight: 700; letter-spacing: -.02em; margin: 0 auto; text-wrap: balance; }
.x-band__sub, .x-ch__sub { font-size: 18px; line-height: 28px; margin: 12px auto 0; text-wrap: pretty; }
.x-fine { font-size: 13px; line-height: 20px; color: var(--x-mute); margin: 16px 0 0; }
.x-lead-sm { font-size: 14px; color: var(--x-mute); margin: 8px 0 0; }
.x-arrow-link { display: inline-flex; align-items: center; gap: 6px; font-size: 16px; line-height: 24px; font-weight: 700; color: var(--x-link); text-decoration: none; }
.x-arrow-link::after { content: "→"; transition: transform .16s var(--x-ease); }
.x-arrow-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.x-arrow-link:hover::after { transform: translateX(3px); }
.x-sample { display: inline-block; font-size: 11px; line-height: 16px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--x-ink2); background: var(--bg-muted, #EEF3EC); border-radius: 999px; padding: 2px 8px; }
.x-tag { display: inline-block; font-size: 12px; line-height: 18px; font-weight: 700; color: var(--x-link); background: var(--brand-subtle, #DDF7E7); border-radius: 999px; padding: 2px 10px; }
:is(.x-band, .x-sec, .x-ch, .x-foot) :focus-visible { outline: 3px solid var(--focus-ring, rgba(30,215,96,.5)); outline-offset: 3px; border-radius: 6px; }

/* reveal (only hides when JS is running) */
.x-js .x-rv { opacity: 0; transform: translateY(16px); transition: opacity .32s var(--x-ease), transform .32s var(--x-ease); }
.x-js .x-rv.x-in { opacity: 1; transform: none; }

/* ============ 1. DARK BAND (Slack: pad 72/72, grid 492/676, gap 5%) ============ */
.x-band--dark { background: var(--x-dark); color: #fff; position: relative; overflow: hidden; isolation: isolate; }
.x-band--dark::before { content: ""; position: absolute; inset: auto -20% -60% -20%; height: 120%; background: radial-gradient(50% 50% at 50% 50%, rgba(30,215,96,.16), transparent 70%); z-index: -1; pointer-events: none; }
#reimagine { padding: 88px 0 80px; scroll-margin-top: var(--x-head); }
#reimagine .x-band__h { color: #fff; max-width: 820px; text-align: center; }
#reimagine .x-band__sub { color: rgba(255,255,255,.78); max-width: 740px; text-align: center; }
.x-switch { display: grid; grid-template-columns: 40% 55%; gap: 5%; align-items: center; margin-top: 48px; }
.x-switch__list { display: flex; flex-direction: column; gap: 12px; }
.x-pill { position: relative; overflow: hidden; text-align: left; font: inherit; font-size: 18px; line-height: 24px; font-weight: 600; color: #fff; background: transparent; border: 1.5px solid rgba(255,255,255,.32); border-radius: 999px; padding: 16px 28px; cursor: pointer; transition: background .2s var(--x-ease), border-color .2s var(--x-ease); }
.x-pill:hover { border-color: rgba(255,255,255,.7); }
.x-pill[aria-selected="true"] { background: rgba(255,255,255,.1); border-color: #fff; }
.x-pill__bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--x-brand); }
.x-pill[aria-selected="true"] .x-pill__bar { width: var(--p, 0%); }
.x-switch__view { position: relative; }
.x-shot { margin: 0; border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 24px 60px rgba(8,17,13,.18), 0 0 0 1px rgba(16,34,27,.08); }
.x-shot--dark { background: var(--x-dark2); box-shadow: 0 30px 80px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.08); }
.x-win__bar { display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; background: rgba(255,255,255,.06); border-bottom: 1px solid rgba(255,255,255,.08); }
.x-win__bar i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.25); }
.x-win__url { margin-left: 10px; font-size: 12px; color: rgba(255,255,255,.6); }
.x-sample--dark { margin-left: auto; color: rgba(255,255,255,.75); background: rgba(255,255,255,.1); }
.x-shot__frame { position: relative; aspect-ratio: 16 / 9.3; background: #fff; }
.x-shot__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top left; opacity: 0; transition: opacity .4s var(--x-ease); }
.x-shot__frame img.x-is-on { opacity: 1; }
.x-pause { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; font: inherit; font-size: 14px; font-weight: 600; color: var(--x-ink2); background: transparent; border: 0; cursor: pointer; padding: 4px 8px 4px 4px; border-radius: 999px; }
.x-pause svg { width: 28px; height: 28px; padding: 8px; border-radius: 50%; background: var(--bg-muted, #EEF3EC); fill: currentColor; }
.x-pause--dark { color: rgba(255,255,255,.85); }
.x-pause--dark svg { background: rgba(255,255,255,.12); }
.x-pause .x-i-play { display: none; }
.x-pause[aria-pressed="true"] .x-i-play { display: inline; }
.x-pause[aria-pressed="true"] .x-i-pause { display: none; }

/* ============ 2. CAROUSEL (Slack "What's new": pad 42, cards 400×440 r16, gap 48) ============ */
.x-sec--carousel { background: #fff; padding: 72px 0 64px; overflow: hidden; }
.x-sec__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 32px; }
.x-sec__head .x-arrow-link { margin-top: 8px; }
.x-arrows { display: flex; gap: 12px; }
.x-arr { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--x-line); background: #fff; display: grid; place-items: center; cursor: pointer; transition: border-color .16s, background .16s; }
.x-arr svg { width: 16px; height: 16px; fill: none; stroke: var(--x-ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.x-arr:hover:not(:disabled) { border-color: var(--x-ink); }
.x-arr:disabled { opacity: .35; cursor: default; }
.x-rail { display: flex; gap: 32px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: max(32px, (100% - 1230px) / 2); padding: 4px max(32px, (100% - 1230px) / 2) 24px; scrollbar-width: none; }
.x-rail::-webkit-scrollbar { display: none; }
.x-vcard { flex: 0 0 380px; scroll-snap-align: start; border: 1px solid var(--x-line); border-radius: 16px; overflow: hidden; background: #fff; display: flex; flex-direction: column; transition: transform .2s var(--x-ease), box-shadow .2s var(--x-ease); }
.x-vcard:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(16,34,27,.1); }
.x-vcard__img { aspect-ratio: 16 / 9; overflow: hidden; background: var(--x-canvas); }
.x-vcard__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.x-vcard__b { padding: 20px 24px 24px; }
.x-vcard h3 { margin: 12px 0 4px; font-size: 24px; line-height: 30px; font-weight: 700; color: var(--x-ink); letter-spacing: -.01em; }
.x-vcard p { margin: 0; font-size: 16px; line-height: 24px; color: var(--x-ink2); }
.x-idn { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.x-idn li { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--x-ink); background: var(--x-canvas); border: 1px solid var(--x-line); border-radius: 8px; padding: 4px 10px; font-family: var(--font-latin), var(--font-zh-hk), var(--font-ko), var(--font-ja), var(--font-th), sans-serif; }
.x-only { margin-top: 16px !important; font-size: 14px !important; font-weight: 600; color: var(--x-mute) !important; }

/* ============ 3. STICKY TABS + CHAPTERS (Slack: tabs 4×307 h57; chapter H2 50/56; list 427 + visual) ============ */
.x-toc { position: sticky; top: var(--x-head); z-index: 30; background: rgba(255,255,255,.97); -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--x-line); }
.x-toc__in { display: grid; grid-template-columns: repeat(4, 1fr); }
.x-toc a { display: grid; place-items: center; height: 57px; font-size: 16px; font-weight: 700; color: #747474; text-decoration: none; border-bottom: 3px solid transparent; margin-bottom: -1px; transition: color .16s, border-color .16s; }
.x-toc a:hover { color: var(--x-ink); }
.x-toc a.x-is-on { color: var(--x-ink); border-bottom-color: var(--x-brand-press); }
.x-ch { background: #fff; padding: 96px 0; scroll-margin-top: calc(var(--x-head) + 56px); }
.x-ch--muted { background: var(--x-canvas); }
.x-ch__h { color: var(--x-ink); max-width: 900px; text-align: center; }
.x-ch__sub { color: var(--x-ink2); max-width: 615px; text-align: center; }
.x-ch__grid { display: grid; grid-template-columns: 427px 1fr; gap: 72px; align-items: start; margin-top: 56px; padding-left: 28px; }
.x-acc__i { border-left: 4px solid transparent; padding: 0 0 0 24px; margin-bottom: 24px; transition: border-color .2s; }
.x-acc__i.x-is-on { border-left-color: var(--x-brand-press); }
.x-acc__t { font: inherit; font-size: 24px; line-height: 32px; font-weight: 600; color: var(--x-ink); background: none; border: 0; padding: 0; text-align: left; cursor: pointer; letter-spacing: -.01em; }
.x-acc__t:hover { color: var(--x-link); }
.x-acc__i.x-is-on .x-acc__t { color: var(--x-link); }
.x-acc__b { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .32s var(--x-ease); }
.x-acc__b > * { overflow: hidden; }
.x-acc__b > p { margin: 0; font-size: 18px; line-height: 28px; color: var(--x-ink); }
.x-acc__i.x-is-on .x-acc__b { grid-template-rows: 1fr; }
.x-acc__i.x-is-on .x-acc__b > p { margin-top: 8px; }
.x-acc__i:not(.x-is-on) .x-acc__b .x-arrow-link { display: none; }
.x-acc__b .x-arrow-link { margin-top: 12px; }
.x-acc__b { grid-template-rows: auto; }
.x-acc__i:not(.x-is-on) .x-acc__b > p { display: none; }
.x-stat { margin-top: 40px; padding-left: 28px; }
.x-stat b { display: block; font-size: 64px; line-height: 64px; font-weight: 800; letter-spacing: -.03em; color: var(--x-link); }
.x-stat b small { font-size: 32px; letter-spacing: 0; }
.x-stat > span { display: block; margin-top: 8px; font-size: 16px; line-height: 24px; font-weight: 600; color: var(--x-ink); max-width: 340px; }
.x-stat sup a { color: var(--x-link); text-decoration: none; font-size: 12px; }

.x-vis { position: relative; min-height: 420px; }
.x-vis__p { display: none; animation: x-fade .4s var(--x-ease); }
.x-vis__p.x-is-on { display: block; }
@keyframes x-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.x-shot img { display: block; width: 100%; height: auto; }
.x-shot figcaption { font-size: 12px; font-weight: 600; color: var(--x-mute); padding: 10px 16px; border-top: 1px solid var(--x-line); background: #fff; }

/* chapter visuals */
.x-cmp { background: #fff; border-radius: 16px; padding: 12px; box-shadow: 0 24px 60px rgba(16,34,27,.1), 0 0 0 1px rgba(16,34,27,.06); }
.x-cmp__row { display: grid; grid-template-columns: 1fr; gap: 6px; padding: 22px 24px; border-radius: 12px; }
.x-cmp__row + .x-cmp__row { margin-top: 4px; }
.x-cmp__k { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--x-mute); }
.x-cmp__row code { font-family: inherit; font-size: 30px; line-height: 38px; font-weight: 700; letter-spacing: -.02em; color: #8a978f; }
.x-cmp__row em { font-style: normal; font-size: 15px; color: var(--x-ink2); }
.x-cmp__row--good { background: var(--brand-subtle, #DDF7E7); }
.x-cmp__row--good code { color: var(--x-ink); }
.x-cmp__row--good code b { color: var(--x-link); }
.x-cmp__bad { text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: rgba(179,38,30,.5); }

.x-sms { display: grid; grid-template-columns: 300px 1fr; gap: 32px; align-items: center; }
.x-sms__phone { background: #fff; border-radius: 36px; padding: 18px; box-shadow: 0 24px 60px rgba(16,34,27,.14), 0 0 0 8px #10221B; min-height: 380px; display: flex; flex-direction: column; }
.x-sms__top { text-align: center; font-size: 13px; font-weight: 700; color: var(--x-ink); padding: 8px 0 14px; border-bottom: 1px solid var(--x-line); }
.x-sms__bubble { margin-top: 20px; align-self: flex-start; max-width: 90%; background: #E9ECEA; color: #111; border-radius: 18px 18px 18px 6px; padding: 12px 14px; font-size: 16px; line-height: 23px; font-family: var(--font-zh-hk), var(--font-latin), sans-serif; word-break: break-all; }
.x-sms__bubble a { color: #0B57D0; }
.x-sms__meter { margin-top: auto; font-size: 13px; font-weight: 700; color: var(--x-ink2); }
.x-sms__meter i { display: block; height: 8px; border-radius: 99px; background: var(--bg-muted, #EEF3EC); margin-top: 8px; overflow: hidden; }
.x-sms__meter b { display: block; height: 100%; width: 0; background: var(--x-brand); border-radius: 99px; transition: width .4s var(--x-ease); }
.x-sms__opts { display: flex; flex-direction: column; gap: 10px; }
.x-sms__opts button { font: inherit; text-align: left; font-size: 15px; font-weight: 600; color: var(--x-ink); background: #fff; border: 1px solid var(--x-line); border-radius: 12px; padding: 14px 16px; cursor: pointer; transition: border-color .16s, background .16s; }
.x-sms__opts button:hover { border-color: var(--x-ink); }
.x-sms__opts button[aria-checked="true"] { border-color: var(--x-brand-press); background: var(--brand-subtle, #DDF7E7); }
.x-sms .x-fine { grid-column: 1 / -1; }

.x-langs { background: #fff; border-radius: 16px; padding: 8px 24px 20px; box-shadow: 0 24px 60px rgba(16,34,27,.1), 0 0 0 1px rgba(16,34,27,.06); }
.x-langs__row { display: grid; grid-template-columns: 96px 1fr; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--x-line); }
.x-langs__row span { font-size: 14px; font-weight: 700; color: var(--x-mute); }
.x-langs__row code { font-family: var(--font-latin), var(--font-zh-hk), var(--font-ko), var(--font-ja), var(--font-th), sans-serif; font-size: 24px; line-height: 32px; font-weight: 700; color: var(--x-ink); }

.x-jobs, .x-promise { position: relative; border-radius: 16px; overflow: hidden; box-shadow: 0 24px 60px rgba(16,34,27,.12); background: #fff; }
.x-jobs img, .x-promise img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.x-jobs__t { list-style: none; margin: 0; padding: 16px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; counter-reset: j; }
.x-jobs__t li { border: 1px solid var(--x-line); border-radius: 12px; padding: 12px 14px; }
.x-jobs__t li.x-is-on { border-color: var(--x-brand-press); background: var(--brand-subtle, #DDF7E7); }
.x-jobs__t small { display: block; font-size: 12px; color: var(--x-mute); font-weight: 600; }
.x-jobs__t b { font-size: 16px; color: var(--x-ink); }
.x-promise__card { position: absolute; left: 20px; right: 20px; bottom: 20px; background: rgba(255,255,255,.96); border-radius: 14px; padding: 18px 20px; box-shadow: 0 10px 30px rgba(0,0,0,.12); }
.x-promise__card b { display: block; font-size: 20px; line-height: 27px; color: var(--x-ink); }
.x-promise__card > span { display: block; margin-top: 6px; font-size: 13px; line-height: 19px; color: var(--x-ink2); }

.x-ec { background: #fff; border-radius: 16px; padding: 24px; box-shadow: 0 24px 60px rgba(16,34,27,.1), 0 0 0 1px rgba(16,34,27,.06); }
.x-ec table { width: 100%; border-collapse: collapse; }
.x-ec caption { text-align: left; font-size: 18px; font-weight: 700; color: var(--x-ink); padding-bottom: 12px; }
.x-ec th, .x-ec td { text-align: left; padding: 14px 8px; border-bottom: 1px solid var(--x-line); font-size: 15px; color: var(--x-ink); }
.x-ec thead th { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--x-mute); }
.x-ec tbody th { font-size: 18px; font-weight: 800; }
.x-ec__bar { display: inline-block; vertical-align: middle; height: 10px; width: calc(var(--v) * 8px); max-width: 130px; border-radius: 99px; background: var(--x-brand); margin-right: 10px; }

.x-places { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.x-places img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px; display: block; }

.x-rec { background: #fff; border-radius: 16px; padding: 24px; box-shadow: 0 24px 60px rgba(16,34,27,.1), 0 0 0 1px rgba(16,34,27,.06); }
.x-rec__h { display: flex; justify-content: space-between; align-items: center; font-size: 18px; font-weight: 700; color: var(--x-ink); margin-bottom: 8px; }
.x-rec dl { margin: 0; }
.x-rec dl > div { display: grid; grid-template-columns: 160px 1fr; padding: 14px 0; border-bottom: 1px solid var(--x-line); }
.x-rec dt { font-size: 14px; font-weight: 600; color: var(--x-mute); }
.x-rec dd { margin: 0; font-size: 16px; font-weight: 600; color: var(--x-ink); }

.x-utm { background: #fff; border-radius: 16px; padding: 28px; box-shadow: 0 24px 60px rgba(16,34,27,.1), 0 0 0 1px rgba(16,34,27,.06); }
.x-utm__url { margin: 0; font-size: 18px; line-height: 30px; word-break: break-all; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.x-u-h { color: var(--x-ink); }
.x-u-q { color: var(--x-mute); }
.x-u-v { color: var(--x-link); font-weight: 700; background: var(--brand-subtle, #DDF7E7); border-radius: 4px; padding: 0 3px; }
.x-utm__flow { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--x-line); }
.x-utm__flow code { font-family: inherit; font-size: 22px; font-weight: 700; color: var(--x-ink); }
.x-utm__flow code b { color: var(--x-link); }
.x-utm__flow svg { width: 40px; height: 12px; fill: none; stroke: var(--x-ink2); stroke-width: 1.6; }
.x-utm__flow span { font-size: 14px; font-weight: 600; color: var(--x-ink2); }

/* ============ 4. STORIES (Slack customer cards; pad 80) ============ */
.x-sec--stories { background: #fff; padding: 96px 0 80px; }
.x-stories { display: grid; grid-template-columns: 2.1fr 1fr 1fr 1fr; gap: 16px; margin-top: 40px; }
.x-story { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 360px; border-radius: 16px; overflow: hidden; color: #fff; text-decoration: none; padding: 24px; isolation: isolate; }
.x-story img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 15%; z-index: -2; transition: transform .6s var(--x-ease); }
.x-story::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(8,17,13,0) 30%, rgba(8,17,13,.55) 58%, rgba(8,17,13,.9)); }
.x-story:hover img { transform: scale(1.04); }
.x-story__tag { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .9; }
.x-story b { display: block; margin-top: 6px; font-size: 20px; line-height: 27px; font-weight: 700; }
.x-story--wide b { font-size: 26px; line-height: 33px; max-width: 420px; }
.x-story__go { margin-top: 14px; display: inline-flex; align-self: flex-start; gap: 6px; font-size: 14px; font-weight: 700; background: #fff; color: var(--x-ink); border-radius: 999px; padding: 8px 16px; }
.x-story__go::after { content: "→"; }
.x-dualcta { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 40px; }

/* ============ 5. FACTS BAND (Slack stats: numbers 80/84 w700) ============ */
.x-band--stats { padding: 64px 0 72px; }
.x-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 40px; text-align: center; }
.x-fact b { display: block; font-size: 80px; line-height: 84px; font-weight: 800; letter-spacing: -.03em; color: #fff; }
.x-fact > span { display: block; max-width: 280px; margin: 10px auto 0; font-size: 18px; line-height: 26px; font-weight: 600; color: rgba(255,255,255,.82); font-family: var(--font-latin), var(--font-zh-hk), var(--font-ko), var(--font-ja), var(--font-th), sans-serif; }

/* ============ 6. PLANS + PROMISES ============ */
.x-sec--plans { background: var(--x-canvas); padding: 96px 0; }
.x-plans { display: grid; grid-template-columns: 1.25fr 1fr; gap: 64px; align-items: start; }
.x-tiers { list-style: none; margin: 32px 0 0; padding: 0; border-top: 1px solid var(--x-line); }
.x-tiers li { display: grid; grid-template-columns: 170px 110px 1fr; align-items: baseline; gap: 16px; padding: 20px 4px; border-bottom: 1px solid var(--x-line); }
.x-tiers li.x-is-rec { background: linear-gradient(90deg, var(--brand-subtle, #DDF7E7), transparent); border-radius: 8px; }
.x-tiers__n { font-size: 18px; font-weight: 700; color: var(--x-ink); }
.x-tiers__n em { display: inline-block; margin-left: 6px; font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--on-brand, #062912); background: var(--x-brand); border-radius: 999px; padding: 2px 8px; vertical-align: 2px; }
.x-tiers__p { font-size: 28px; font-weight: 800; letter-spacing: -.02em; color: var(--x-ink); }
.x-tiers__p small { font-size: 14px; font-weight: 600; color: var(--x-mute); letter-spacing: 0; }
.x-tiers__d { font-size: 15px; line-height: 22px; color: var(--x-ink2); }
.x-plans__l .btn { margin-top: 24px; }
.x-plans__r { background: #fff; border: 1px solid var(--x-line); border-radius: 20px; padding: 36px; }
.x-plans__r h3 { margin: 0 0 20px; font-size: 24px; line-height: 30px; font-weight: 700; color: var(--x-ink); }
.x-checks { list-style: none; margin: 0; padding: 0; }
.x-checks li { position: relative; padding: 14px 0 14px 40px; font-size: 18px; line-height: 26px; font-weight: 600; color: var(--x-ink); border-bottom: 1px solid var(--x-line); }
.x-checks li::before { content: ""; position: absolute; left: 0; top: 15px; width: 24px; height: 24px; border-radius: 50%; background: var(--x-brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 12.5l3.2 3.2L17 9' fill='none' stroke='%23062912' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 24px no-repeat; }

/* ============ 7. DEEP DIVE (Slack promos: 4 × 285×420, shadow 0 0 16px rgba(0,0,0,.1)) ============ */
.x-sec--deep { padding: 80px 0 72px; background: #fff; }
.x-deep { display: grid; grid-template-columns: repeat(4, 1fr); gap: 29px; margin-top: 40px; }
.x-dcard { display: flex; flex-direction: column; min-height: 420px; background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 0 16px rgba(0,0,0,.1); text-decoration: none; color: var(--x-ink); transition: transform .2s var(--x-ease), box-shadow .2s var(--x-ease); }
.x-dcard:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,.14); }
.x-dcard img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.x-dcard .x-tag { margin: 20px 24px 0; align-self: flex-start; }
.x-dcard b { margin: 12px 24px 0; font-size: 22px; line-height: 30px; font-weight: 700; letter-spacing: -.01em; }
.x-dcard__go { margin: auto 24px 24px; padding-top: 16px; font-size: 15px; font-weight: 700; color: var(--x-link); }
.x-dcard__go::after { content: " →"; }
.x-fns { margin: 48px 0 0; padding-left: 18px; font-size: 13px; line-height: 20px; color: var(--x-mute); max-width: 900px; }
.x-fns li { margin-top: 4px; }
.x-fns li:target { color: var(--x-ink); background: var(--brand-subtle, #DDF7E7); }

/* ============ 8. CLOSING CTA (Slack: dark, pad 80, H 50/56) ============ */
.x-band--cta { padding: 96px 0; }
.x-band--cta .x-band__h { color: #fff; max-width: 860px; }
.x-hero__cta { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 32px; }

/* ============ FOOTER (Slack: region row, logo + 5 columns, legal row) ============ */
.x-foot { background: #fff; border-top: 1px solid var(--x-line); padding: 32px 0 40px; }
.x-foot__top { display: flex; justify-content: space-between; align-items: center; padding-bottom: 28px; border-bottom: 1px solid var(--x-line); }
.x-foot__lang select { font: inherit; font-size: 14px; font-weight: 700; color: var(--x-ink); border: 1px solid var(--x-line); border-radius: 8px; padding: 8px 32px 8px 12px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23355247' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") right 12px center no-repeat; appearance: none; cursor: pointer; }
.x-foot__grid { display: grid; grid-template-columns: 120px repeat(5, 1fr); gap: 24px; padding: 40px 0; }
.x-foot__grid h4 { margin: 0 0 14px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--x-ink); }
.x-foot__grid a { display: block; font-size: 14px; line-height: 22px; padding: 4px 0; color: var(--x-ink2); text-decoration: none; }
.x-foot__grid a:hover { color: var(--x-ink); text-decoration: underline; }
.x-foot__legal { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 24px; border-top: 1px solid var(--x-line); font-size: 13px; color: var(--x-mute); }

/* ============ RESPONSIVE ============ */
@media (max-width: 1100px) {
  .x-ch__grid { grid-template-columns: 380px 1fr; gap: 48px; padding-left: 0; }
  .x-deep { grid-template-columns: repeat(2, 1fr); }
  .x-stories { grid-template-columns: 1fr 1fr; }
  .x-story--wide { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .x-wrap { width: calc(100% - 32px); }
  .x-band__h, .x-ch__h { font-size: 32px; line-height: 38px; }
  .x-band__sub, .x-ch__sub { font-size: 16px; line-height: 24px; }
  .x-h2 { font-size: 26px; line-height: 32px; }
  #reimagine { padding: 64px 0 56px; }
  .x-switch { grid-template-columns: 1fr; gap: 24px; margin-top: 32px; }
  .x-switch__list { flex-direction: row; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding-inline: 16px; }
  .x-switch__list::-webkit-scrollbar { display: none; }
  .x-pill { flex: 0 0 auto; font-size: 15px; padding: 12px 18px; white-space: nowrap; }
  .x-sec--carousel { padding: 56px 0 48px; }
  .x-arrows { display: none; }
  .x-rail { gap: 16px; padding-inline: 16px; scroll-padding-inline: 16px; }
  .x-vcard { flex-basis: 82%; }
  .x-toc__in { width: 100%; display: flex; overflow-x: auto; scrollbar-width: none; }
  .x-toc__in::-webkit-scrollbar { display: none; }
  .x-toc a { flex: 0 0 auto; padding: 0 18px; height: 50px; font-size: 15px; }
  .x-ch { padding: 64px 0; }
  .x-ch__grid { grid-template-columns: 1fr; gap: 32px; margin-top: 36px; }
  .x-acc__t { font-size: 20px; line-height: 28px; }
  .x-acc__b > p { font-size: 16px; line-height: 25px; }
  .x-stat { margin-top: 24px; padding-left: 0; }
  .x-stat b { font-size: 48px; line-height: 52px; }
  .x-vis { min-height: 0; }
  .x-cmp__row code { font-size: 22px; line-height: 30px; }
  .x-sms { grid-template-columns: 1fr; }
  .x-sms__phone { min-height: 300px; max-width: 320px; margin: 8px auto 0; width: calc(100% - 16px); }
  .x-langs__row { grid-template-columns: 72px 1fr; }
  .x-langs__row code { font-size: 18px; line-height: 26px; }
  .x-jobs__t { grid-template-columns: 1fr; }
  .x-promise__card { position: relative; inset: auto; margin: -12px 20px 0; }
  .x-rec dl > div { grid-template-columns: 120px 1fr; }
  .x-utm { padding: 20px; }
  .x-utm__url { font-size: 14px; line-height: 24px; }
  .x-sec--stories, .x-sec--plans { padding: 64px 0; }
  .x-stories { grid-template-columns: 1fr; }
  .x-story { min-height: 300px; }
  .x-story--wide { min-height: 360px; }
  .x-story::after { background: linear-gradient(180deg, rgba(8,17,13,0) 20%, rgba(8,17,13,.7) 50%, rgba(8,17,13,.92)); }
  .x-story--wide b { font-size: 22px; line-height: 28px; }
  .x-win__url { display: none; }
  .x-sample--dark { font-size: 10px; }
  .x-vis { order: -1; }
  .x-acc__i { margin-bottom: 18px; }
  .x-facts { grid-template-columns: 1fr; gap: 28px; }
  .x-fact b { font-size: 64px; line-height: 68px; }
  .x-plans { grid-template-columns: 1fr; gap: 32px; }
  .x-tiers li { grid-template-columns: 1fr auto; row-gap: 4px; }
  .x-tiers__d { grid-column: 1 / -1; }
  .x-plans__r { padding: 24px; }
  .x-deep { grid-template-columns: 1fr; }
  .x-dcard { min-height: 0; }
  .x-band--cta { padding: 72px 0; }
  .x-foot__grid { grid-template-columns: 1fr 1fr; }
  .x-foot__grid > img { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  .x-js .x-rv { opacity: 1; transform: none; transition: none; }
  .x-vis__p, .x-shot__frame img, .x-vcard, .x-dcard, .x-story img { animation: none; transition: none; }
}

/* ============ MOBILE PASS 2 (27 Oct): readable product screens, inline accordion visuals, swipe rails ============ */
.x-crop { position: relative; }
.x-crop img { display: block; width: 100%; height: auto; }
@media (max-width: 900px) {
  /* product screenshots: crop to the part that matters instead of shrinking the whole desktop screen */
  .x-crop { aspect-ratio: 4 / 3; overflow: hidden; background: #fff; }
  .x-crop img { position: absolute; top: 0; width: var(--z, 160%); max-width: none; left: calc((100% - var(--z, 160%)) * var(--fx, 0)); }
  .x-shot__frame { aspect-ratio: 4 / 3; }
  .x-shot__frame img { width: var(--z, 160%); max-width: none; height: auto; left: calc((100% - var(--z, 160%)) * var(--fx, 0)); right: auto; object-fit: initial; }
  .x-switch__view .x-pause { margin-top: 10px; }

  /* horizontal scrollers get a fade so the cut-off item reads as "more" */
  .x-toc__in, .x-switch__list { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }

  /* accordion: the active item's visual sits inside it (moved by JS), so a tap shows its result right there */
  .x-acc__i { padding-left: 16px; border-left-width: 3px; margin-bottom: 12px; }
  .x-acc__i .x-vis { margin: 16px 0 8px; }
  .x-acc__i:not(.x-is-on) .x-vis { display: none; }
  .x-acc__t { display: block; width: 100%; padding: 6px 28px 6px 0; position: relative; }
  .x-acc__t::after { content: ""; position: absolute; right: 4px; top: 50%; width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-70%) rotate(45deg); transition: transform .2s var(--x-ease); }
  .x-acc__i.x-is-on .x-acc__t::after { transform: translateY(-30%) rotate(-135deg); }
  .x-acc__i:not(.x-is-on) { border-left-color: var(--x-line); }
  .x-stat { padding-left: 19px; margin-top: 28px; }
  .x-ch__grid { display: block; }

  /* stories + deep dive: swipe rails instead of four full-screen cards each */
  .x-stories, .x-deep { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: -16px; padding: 4px 16px 16px; scroll-padding-inline: 16px; scrollbar-width: none; }
  .x-stories::-webkit-scrollbar, .x-deep::-webkit-scrollbar { display: none; }
  .x-story { flex: 0 0 78%; min-height: 340px; scroll-snap-align: start; }
  .x-story--wide { flex-basis: 86%; min-height: 340px; }
  .x-dcard { flex: 0 0 74%; scroll-snap-align: start; min-height: 0; }
  .x-dcard b { font-size: 19px; line-height: 26px; }
  .x-sec--deep { padding: 56px 0 48px; }
  .x-fns { margin-top: 24px; }
  .x-sec--carousel .x-sec__head { margin-bottom: 20px; }
}
@media (max-width: 900px) {
  .x-band--stats { padding: 48px 0 52px; }
  .x-facts { grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 28px; }
  .x-fact b { font-size: 44px; line-height: 48px; }
  .x-fact > span { font-size: 13px; line-height: 18px; margin-top: 6px; }
}

/* ============ MOTION — Slack behaviours, measured on slack.com 27 Oct 2026 ============ */
/* 1. timed tabs: 4px track per item, active one fills over 8s (x-motion.js sets --p 0→1) */
.x-acc--timed .x-acc__i { position: relative; border-left: 0; padding-left: 28px; }
.x-acc--timed .x-acc__i::before,
.x-acc--timed .x-acc__i::after { content: ""; position: absolute; left: 0; top: 0; width: 4px; border-radius: 4px; }
.x-acc--timed .x-acc__i::before { bottom: 0; background: var(--x-line); opacity: .7; }
.x-acc--timed .x-acc__i::after { height: calc(var(--p, 0) * 100%); background: var(--x-brand-press); }
.x-acc--timed .x-acc__i:not(.x-is-on) .x-acc__t { color: var(--x-mute); }
.x-acc--timed .x-acc__i:not(.x-is-on) .x-acc__t:hover { color: var(--x-ink); }
.x-vis__p { animation-duration: .25s; animation-timing-function: linear; }
@media (max-width: 900px) {
  .x-acc--timed .x-acc__i { padding-left: 16px; }
  .x-acc--timed .x-acc__i::before, .x-acc--timed .x-acc__i::after { width: 3px; }
  .x-acc--timed .x-acc__i.x-is-on::after { height: 100%; }
}

/* 2. hover float: scale 1.05 + soft shadow, .42s cubic-bezier(.165,.84,.44,1) */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .x-vcard, .x-dcard, .s-card { transition: transform .42s cubic-bezier(.165,.84,.44,1), box-shadow .42s cubic-bezier(.165,.84,.44,1); }
  .x-vcard:hover, .x-dcard:hover, .s-card:hover,
  .x-vcard:focus-visible, .x-dcard:focus-visible, .s-card:focus-visible { transform: scale(1.05); box-shadow: 0 16px 32px rgba(16,34,27,.1); position: relative; z-index: 2; }
}

/* 3. hover expand: the hovered card widens (Slack: 183 → 580 px, width .65s; caption fades in 1s, .4s delay) */
@media (min-width: 1101px) {
  .x-stories[data-expand] { display: flex; gap: 16px; }
  .x-stories[data-expand] > .x-story { flex: 1 1 0; min-width: 0; transition: flex-grow .65s cubic-bezier(.165,.84,.44,1); }
  .x-stories[data-expand] > .x-story.x-is-on { flex-grow: 3.17; }
  .x-stories[data-expand] > .x-story b, .x-stories[data-expand] > .x-story .x-story__go { opacity: 0; transition: opacity .2s; }
  .x-stories[data-expand] > .x-story.x-is-on b, .x-stories[data-expand] > .x-story.x-is-on .x-story__go { opacity: 1; transition: opacity 1s ease-in .4s; }
  .x-stories[data-expand] > .x-story.x-is-on b { font-size: 26px; line-height: 33px; max-width: 420px; }
  .x-stories[data-expand] > .x-story:not(.x-is-on) b { white-space: nowrap; overflow: hidden; }
  .x-stories[data-expand] > .x-story:not(.x-is-on) .x-story__go { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .x-stories[data-expand] > .x-story { transition: none; }
  .x-stories[data-expand] > .x-story b, .x-stories[data-expand] > .x-story .x-story__go { transition: none; }
}
/* at tablet and phone widths the stories fall back to the grid / rail with every caption visible */
/* a word in place of a number ("ZERO") is wider than a digit: keep it inside its column on phones */
@media (max-width: 600px) { .x-fact b.x-word { font-size: 34px; letter-spacing: -.01em; } }

/* rail dots (phone): one dot per item, the current one is a longer bar, with "2 / 6" beside them */
.x-dots { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; }
.x-dots[hidden] { display: none !important; }
.x-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: var(--x-line); cursor: pointer; transition: width .25s cubic-bezier(.165,.84,.44,1), background .25s; position: relative; }
.x-dots button::before { content: ""; position: absolute; inset: -10px -4px; }
.x-dots button.x-is-on { width: 24px; background: var(--x-brand-press); }
.x-dots__n { margin-left: 6px; font-size: 13px; font-weight: 700; color: var(--x-mute); font-variant-numeric: tabular-nums; min-width: 34px; }
.x-dots--dark button { background: rgba(255,255,255,.28); }
.x-dots--dark button.x-is-on { background: var(--x-brand); }
.x-dots--dark .x-dots__n { color: rgba(255,255,255,.7); }
@media (min-width: 901px) { .x-dots { display: none; } }
.x-switch .x-dots { margin-top: -6px; }