/* CTAurl inner pages — Slack page templates, measured on slack.com/intl/en-gb at 1440px on 27 Oct 2026.
   Billboard pad 128/80, text column 492, media 676 · zigzag pad 80/80, media 600 r8, text 495 · H1 50/56 · H2 32/40 · body 18/28
   FAQ 864 wide, items 816, 18px bold · pricing columns 307 joined, r12 outer corners · article: TOC aside + content column.
   Tokens: CTAURL UI Specification (tokens.css). No multi-colour gradients (founder rule). Prefix s-. */

:root { --s-tint: #EEF6F0; --s-tint2: #F7F8F4; --s-ink: var(--text-primary, #10221B); --s-ink2: var(--text-secondary, #355247); --s-mute: var(--text-muted, #66776E); --s-line: var(--border-default, #D6E1D8); --s-link: var(--link, #08783B); --s-brand: var(--brand, #1ED760); --s-press: var(--brand-pressed, #0D9D3F); }
body.s-page { background: #fff; color: var(--s-ink); }
.s-page main { display: block; }
.s-page h1, .s-page h2, .s-page h3 { letter-spacing: -.015em; }
.s-page a { text-underline-offset: 3px; }
.s-eyebrow { margin: 0 0 10px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--s-link); }
.s-reviewed { margin: 20px 0 0; font-size: 13px; color: var(--s-mute); }
.s-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; padding: 0; font-size: 13px; color: var(--s-mute); }
.s-crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--s-line); }
.s-crumbs a { color: var(--s-ink2); text-decoration: none; }
.s-crumbs a:hover { text-decoration: underline; }
.s-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
:is(.s-page) :focus-visible { outline: 3px solid var(--focus-ring, rgba(30,215,96,.5)); outline-offset: 3px; border-radius: 6px; }

/* ---------- billboard (Slack c-billboard) ---------- */
.s-bill { position: relative; background: var(--s-tint); padding: 112px 0 120px; overflow: hidden; }
.s-bill__in { display: grid; grid-template-columns: 492px 1fr; gap: 64px; align-items: center; }
.s-bill h1 { margin: 0; font-size: 50px; line-height: 56px; font-weight: 800; color: var(--s-ink); text-wrap: balance; }
.s-bill__sub { margin: 18px 0 0; font-size: 20px; line-height: 30px; color: var(--s-ink2); text-wrap: pretty; }
.s-bill__media { min-width: 0; }
.s-arc { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 64px; fill: #fff; }
.s-bill--center .s-bill__in { grid-template-columns: 1fr; text-align: center; gap: 48px; }
.s-bill--center .s-bill__text { max-width: 860px; margin: 0 auto; }
.s-bill--center .s-crumbs ol, .s-bill--center .s-ctas { justify-content: center; }
.s-bill--center .s-bill__sub { max-width: 640px; margin-inline: auto; }
.s-bill--center .s-bill__media { max-width: 960px; margin: 0 auto; width: 100%; }
.s-bill--plain { background: #fff; }
.s-bill--plain .s-arc { display: none; }

/* product screenshots and photos */
.s-shot { margin: 0; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 24px 60px rgba(16,34,27,.12), 0 0 0 1px rgba(16,34,27,.07); }
.s-shot img { display: block; width: 100%; height: auto; }
.s-shot figcaption { font-size: 12px; font-weight: 600; color: var(--s-mute); padding: 10px 16px; border-top: 1px solid var(--s-line); }
.s-photo { border-radius: 12px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--s-tint2); }
.s-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.s-photo--wide { aspect-ratio: 3 / 2; }

/* ---------- fact strip (stands in for Slack's logo bar: we have no customer logos to show) ---------- */
.s-facts { padding: 40px 0 8px; }
.s-facts ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; text-align: center; }
.s-facts b { display: block; font-size: 32px; line-height: 40px; font-weight: 800; color: var(--s-ink); font-variant-numeric: tabular-nums; }
.s-facts li > span { display: block; margin-top: 4px; font-size: 15px; line-height: 22px; color: var(--s-ink2); }

/* ---------- zigzag (Slack c-zigzag) ---------- */
.s-zz { padding: 80px 0; }
.s-zz__in { display: grid; grid-template-columns: 600px 1fr; gap: 132px; align-items: center; }
.s-zz--flip .s-zz__media { order: 2; }
.s-zz--flip .s-zz__in { grid-template-columns: 1fr 600px; }
.s-zz__media { min-width: 0; }
.s-zz__text { max-width: 495px; min-width: 0; }
.s-zz h2 { margin: 0; font-size: 32px; line-height: 40px; font-weight: 800; color: var(--s-ink); text-wrap: balance; }
.s-zz p, .s-blade p { margin: 14px 0 0; font-size: 18px; line-height: 28px; color: var(--s-ink); }
.s-zz ul, .s-blade ul { margin: 16px 0 0; padding: 0; list-style: none; }
.s-zz li, .s-blade li { position: relative; padding: 6px 0 6px 28px; font-size: 17px; line-height: 26px; color: var(--s-ink); }
.s-zz li::before, .s-blade li::before { content: ""; position: absolute; left: 2px; top: 13px; width: 14px; height: 8px; border-left: 2.5px solid var(--s-press); border-bottom: 2.5px solid var(--s-press); transform: rotate(-45deg); }
.s-zz .x-arrow-link, .s-blade .x-arrow-link { margin-top: 20px; }
.s-zz code, .s-blade code, .s-art code, .s-tbl code { font-family: inherit; font-weight: 700; background: var(--s-tint); color: var(--s-ink); padding: 1px 6px; border-radius: 6px; }

/* ---------- promo blade ---------- */
.s-blade-wrap { padding: 40px 0 80px; }
.s-blade > * { min-width: 0; }
.s-blade { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; background: var(--s-tint2); border-radius: 24px; padding: 56px 56px; }
.s-blade h2 { margin: 0; font-size: 32px; line-height: 40px; font-weight: 800; }

/* ---------- section heads + cards ---------- */
.s-sec { padding: 80px 0; }
.s-sec--tint { background: var(--s-tint2); }
.s-sec__head { max-width: 760px; margin: 0 0 36px; }
.s-sec__head--center { margin-inline: auto; text-align: center; }
.s-sec__head p { margin: 10px 0 0; font-size: 18px; line-height: 28px; color: var(--s-ink2); }
.s-cards { display: grid; gap: 24px; }
.s-cards--3 { grid-template-columns: repeat(3, 1fr); }
.s-cards--4 { grid-template-columns: repeat(4, 1fr); }
.s-cards--2 { grid-template-columns: repeat(2, 1fr); }
.s-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--s-line); border-radius: 16px; overflow: hidden; text-decoration: none; color: var(--s-ink); }
.s-card__img { aspect-ratio: 16 / 9; background: var(--s-tint2); overflow: hidden; }
.s-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.s-card__b { padding: 22px 24px 24px; display: flex; flex-direction: column; flex: 1; }
.s-card h3 { margin: 10px 0 0; font-size: 22px; line-height: 29px; font-weight: 800; }
.s-card p { margin: 8px 0 0; font-size: 16px; line-height: 24px; color: var(--s-ink2); }
.s-card__go { margin-top: auto; padding-top: 16px; font-size: 15px; font-weight: 700; color: var(--s-link); }
.s-card__go::after { content: " →"; }
.s-card .x-tag { align-self: flex-start; }

/* ---------- FAQ (Slack o-section__faq) ---------- */
.s-faq { padding: 80px 0; }
.s-faq__in { max-width: 864px; }
.s-faq .x-h2 { margin-bottom: 28px; }
.s-faq__i { border-bottom: 1px solid var(--s-line); }
.s-faq__i summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px; align-items: center; padding: 26px 4px; font-size: 18px; line-height: 28px; font-weight: 700; color: var(--s-ink); }
.s-faq__i summary::-webkit-details-marker { display: none; }
.s-faq__i summary i { position: relative; flex: 0 0 18px; height: 18px; }
.s-faq__i summary i::before, .s-faq__i summary i::after { content: ""; position: absolute; left: 0; top: 8px; width: 18px; height: 2px; background: currentColor; transition: transform .2s; }
.s-faq__i summary i::after { transform: rotate(90deg); }
.s-faq__i[open] summary i::after { transform: rotate(0deg); }
.s-faq__a { padding: 0 4px 26px; font-size: 17px; line-height: 27px; color: var(--s-ink2); }
.s-faq__a p { margin: 0 0 10px; }

/* ---------- tables ---------- */
.s-tbl { overflow-x: auto; border: 1px solid var(--s-line); border-radius: 14px; background: #fff; }
.s-tbl table { width: 100%; border-collapse: collapse; min-width: 520px; }
.s-tbl th, .s-tbl td { text-align: left; padding: 14px 18px; border-bottom: 1px solid var(--s-line); font-size: 15px; line-height: 22px; vertical-align: top; }
.s-tbl thead th { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--s-mute); background: var(--s-tint2); }
.s-tbl tbody th { font-weight: 700; color: var(--s-ink); }
.s-tbl tr:last-child > * { border-bottom: 0; }
.s-answer { margin: 0 0 8px; padding: 18px 22px; background: var(--s-tint); border-left: 4px solid var(--s-press); border-radius: 0 12px 12px 0; font-size: 18px; line-height: 28px; color: var(--s-ink); }
.s-fine { font-size: 13px; line-height: 20px; color: var(--s-mute); margin: 12px 0 0; }

/* ---------- pricing (Slack /pricing) ---------- */
.s-price-hero { padding: 112px 0 40px; text-align: center; background: #fff; }
.s-price-hero h1 { margin: 0 auto; max-width: 860px; font-size: 50px; line-height: 56px; font-weight: 800; text-wrap: balance; }
.s-price-hero .s-bill__sub { max-width: 600px; margin-inline: auto; }
.s-price-hero .s-crumbs ol { justify-content: center; }
.s-bill-toggle { display: inline-flex; margin-top: 28px; padding: 4px; border-radius: 999px; background: var(--s-tint2); border: 1px solid var(--s-line); }
.s-bill-toggle button { font: inherit; font-size: 15px; font-weight: 700; padding: 10px 20px; border: 0; border-radius: 999px; background: transparent; color: var(--s-ink2); cursor: pointer; }
.s-bill-toggle button[aria-pressed="true"] { background: #fff; color: var(--s-ink); box-shadow: 0 2px 8px rgba(16,34,27,.12); }
.s-plans { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 40px; border: 1px solid var(--s-line); border-radius: 16px; overflow: hidden; background: #fff; }
.s-plan { position: relative; display: flex; flex-direction: column; padding: 32px 28px; border-left: 1px solid var(--s-line); }
.s-plan:first-child { border-left: 0; }
.s-plan--rec { background: var(--s-tint); box-shadow: inset 0 4px 0 var(--s-press); }
.s-plan__rec { position: absolute; top: 16px; right: 16px; font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--on-brand, #062912); background: var(--s-brand); border-radius: 999px; padding: 3px 9px; }
.s-plan h3 { margin: 0; font-size: 24px; line-height: 32px; font-weight: 800; }
.s-plan__for { margin: 6px 0 0; min-height: 48px; font-size: 15px; line-height: 24px; color: var(--s-ink2); }
.s-plan__price { margin-top: 18px; font-size: 44px; line-height: 48px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.s-plan__price small { font-size: 15px; font-weight: 600; color: var(--s-mute); letter-spacing: 0; }
.s-plan__note { margin: 6px 0 0; min-height: 22px; font-size: 14px; color: var(--s-link); font-weight: 700; }
.s-plan .btn { margin-top: 22px; width: 100%; justify-content: center; min-height: 52px; }
.s-plan ul { list-style: none; margin: 24px 0 0; padding: 20px 0 0; border-top: 1px solid var(--s-line); }
.s-plan li { position: relative; padding: 6px 0 6px 26px; font-size: 15px; line-height: 22px; }
.s-plan li::before { content: ""; position: absolute; left: 2px; top: 12px; width: 12px; height: 7px; border-left: 2.5px solid var(--s-press); border-bottom: 2.5px solid var(--s-press); transform: rotate(-45deg); }
.s-compare th, .s-compare td { text-align: center; }
.s-compare tbody th { text-align: left; }
.s-compare thead th:first-child { text-align: left; }
.s-compare .s-grp th { background: var(--s-tint2); text-align: left; font-size: 13px; letter-spacing: .05em; text-transform: uppercase; color: var(--s-ink2); }
.s-compare td.y { color: var(--s-press); font-weight: 800; }
.s-compare td.n { color: #9aa7a0; }
.s-compare thead { position: sticky; top: 0; }
.s-promise { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.s-promise div { padding: 26px; border-radius: 16px; background: #fff; border: 1px solid var(--s-line); }
.s-promise b { display: block; font-size: 19px; line-height: 26px; }
.s-promise p { margin: 8px 0 0; font-size: 15px; line-height: 23px; color: var(--s-ink2); }

/* ---------- domains gallery (Slack /features/templates gallery) ---------- */
.s-langtabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.s-langtabs button { font: inherit; font-size: 15px; font-weight: 700; padding: 10px 18px; border-radius: 999px; border: 1px solid var(--s-line); background: #fff; color: var(--s-ink2); cursor: pointer; }
.s-langtabs button[aria-selected="true"] { background: var(--s-ink); border-color: var(--s-ink); color: #fff; }
.s-doms { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.s-dom { border: 1px solid var(--s-line); border-radius: 16px; padding: 22px 22px 20px; background: #fff; display: flex; flex-direction: column; gap: 6px; }
.s-dom__intent { font-size: 12px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--s-link); }
.s-dom__name { font-size: 24px; line-height: 32px; font-weight: 800; color: var(--s-ink); font-family: var(--font-latin), var(--font-zh-hk), var(--font-ko), var(--font-ja), var(--font-th), sans-serif; word-break: break-word; }
.s-dom__ex { font-size: 15px; color: var(--s-ink2); font-family: var(--font-latin), var(--font-zh-hk), var(--font-ko), var(--font-ja), var(--font-th), sans-serif; word-break: break-word; }
.s-dom__use { font-size: 14px; color: var(--s-mute); }
.s-dom__copy { align-self: flex-start; margin-top: 10px; font: inherit; font-size: 13px; font-weight: 700; padding: 7px 12px; border-radius: 8px; border: 1px solid var(--s-line); background: var(--s-tint2); color: var(--s-ink); cursor: pointer; }
.s-dom--none { background: var(--s-tint2); border-style: dashed; }
.s-dom--none .s-dom__name { color: var(--s-mute); font-size: 18px; }

/* ---------- resource library (Slack /resources) ---------- */
.s-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.s-filter button { font: inherit; font-size: 14px; font-weight: 700; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--s-line); background: #fff; color: var(--s-ink2); cursor: pointer; }
.s-filter button[aria-pressed="true"] { background: var(--s-ink); border-color: var(--s-ink); color: #fff; }
.s-cards [hidden] { display: none !important; }

/* ---------- article (Slack /resources/using-slack/<article>) ---------- */
.s-art-hero { background: var(--s-tint); padding: 96px 0 64px; }
.s-art-hero h1 { margin: 0; max-width: 860px; font-size: 50px; line-height: 56px; font-weight: 800; text-wrap: balance; }
.s-art-hero .s-bill__sub { max-width: 760px; }
.s-art { display: grid; grid-template-columns: 260px minmax(0, 720px); gap: 72px; padding: 56px 0 40px; }
.s-toc { position: sticky; top: 104px; align-self: start; }
.s-toc p { margin: 0 0 10px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--s-mute); }
.s-toc ol { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--s-line); }
.s-toc a { display: block; padding: 7px 0 7px 16px; margin-left: -2px; border-left: 2px solid transparent; font-size: 14px; line-height: 20px; color: var(--s-ink2); text-decoration: none; }
.s-toc a:hover { color: var(--s-ink); }
.s-toc a.is-on { color: var(--s-link); border-left-color: var(--s-press); font-weight: 700; }
.s-prose { font-size: 18px; line-height: 30px; color: var(--s-ink); }
.s-prose h2 { margin: 48px 0 12px; font-size: 30px; line-height: 38px; font-weight: 800; scroll-margin-top: 104px; }
.s-prose h3 { margin: 28px 0 8px; font-size: 21px; line-height: 28px; font-weight: 800; }
.s-prose p { margin: 0 0 16px; }
.s-prose ul, .s-prose ol { margin: 0 0 18px; padding-left: 24px; }
.s-prose li { margin: 6px 0; }
.s-prose a { color: var(--s-link); font-weight: 600; }
.s-prose .s-tbl { margin: 8px 0 22px; }
.s-prose pre { background: var(--s-ink); color: #E8F5EC; padding: 16px 18px; border-radius: 12px; overflow-x: auto; font-size: 15px; }
.s-prose pre code { background: none; color: inherit; padding: 0; }
.s-prose .s-answer { margin-bottom: 24px; }
.s-callout { margin: 8px 0 22px; padding: 16px 20px; border-radius: 12px; background: #FFF6E6; border: 1px solid #F1D9A8; font-size: 16px; line-height: 25px; }
.s-useful { margin: 40px 0 0; padding: 24px; border-radius: 16px; background: var(--s-tint2); display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.s-useful b { font-size: 17px; margin-right: 8px; }
.s-useful button { font: inherit; font-size: 15px; font-weight: 700; padding: 9px 18px; border-radius: 999px; border: 1px solid var(--s-line); background: #fff; cursor: pointer; }
.s-useful button[aria-pressed="true"] { background: var(--s-ink); color: #fff; border-color: var(--s-ink); }
.s-useful output { flex-basis: 100%; font-size: 15px; color: var(--s-ink2); }
.s-sources { margin: 32px 0 0; padding-top: 20px; border-top: 1px solid var(--s-line); font-size: 14px; line-height: 22px; color: var(--s-mute); }
.s-sources h2 { font-size: 13px !important; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 8px !important; line-height: 20px !important; }

/* ---------- tools ---------- */
.s-tool-hero { background: var(--s-tint); padding: 96px 0 72px; }
.s-tool-hero .s-head { max-width: 760px; margin: 0 auto 36px; text-align: center; }
.s-tool-hero h1 { margin: 0; font-size: 50px; line-height: 56px; font-weight: 800; }
.s-tool-hero .s-crumbs ol { justify-content: center; }
.s-tool { max-width: 980px; margin: 0 auto; display: grid; grid-template-columns: 1fr 340px; gap: 0; background: #fff; border-radius: 20px; box-shadow: 0 30px 70px rgba(16,34,27,.12), 0 0 0 1px rgba(16,34,27,.06); overflow: hidden; }
.s-tool--one { grid-template-columns: 1fr; max-width: 820px; }
.s-tool form { padding: 32px; display: grid; gap: 16px; }
.s-tool__out { background: var(--s-tint2); padding: 32px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; border-left: 1px solid var(--s-line); }
.s-tool__out svg { width: 100%; max-width: 260px; height: auto; background: #fff; border-radius: 10px; }
.s-f label { display: block; font-size: 14px; font-weight: 700; margin-bottom: 6px; color: var(--s-ink); }
.s-f input, .s-f select { width: 100%; font: inherit; font-size: 16px; padding: 13px 14px; border: 1px solid var(--s-line); border-radius: 12px; background: #fff; color: var(--s-ink); }
.s-f input:focus, .s-f select:focus { outline: none; border-color: var(--s-press); box-shadow: 0 0 0 3px var(--focus-ring, rgba(30,215,96,.3)); }
.s-f small { display: block; margin-top: 5px; font-size: 13px; color: var(--s-mute); }
.s-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.s-out { font-size: 15px; line-height: 23px; word-break: break-all; padding: 14px 16px; background: var(--s-tint); border-radius: 12px; min-height: 52px; color: var(--s-ink); font-weight: 600; }
.s-msg { min-height: 20px; margin: 0; font-size: 14px; color: var(--s-ink2); }
.s-msg.err { color: var(--danger, #B3261E); }
.s-msg.ok { color: var(--s-press); font-weight: 700; }
.s-tool .btn { justify-self: start; }
.s-btnrow { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- about (Slack /about) ---------- */
.s-about-hero { padding: 120px 0 72px; text-align: center; }
.s-about-hero h1 { margin: 0 auto; max-width: 960px; font-size: 56px; line-height: 62px; font-weight: 800; text-wrap: balance; }
.s-about-hero .s-crumbs ol { justify-content: center; }
.s-about-hero .s-bill__sub { max-width: 680px; margin-inline: auto; }
.s-beliefs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.s-beliefs div { padding: 28px; border-top: 4px solid var(--s-press); background: var(--s-tint2); border-radius: 0 0 16px 16px; }
.s-beliefs b { display: block; font-size: 22px; line-height: 29px; }
.s-beliefs p { margin: 10px 0 0; font-size: 16px; line-height: 25px; color: var(--s-ink2); }
.s-company { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.s-company dt { font-size: 13px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--s-mute); }
.s-company dd { margin: 6px 0 0; font-size: 20px; line-height: 28px; font-weight: 700; }

/* ---------- SMS demo reused on Email & SMS ---------- */
.s-smsbox { background: #fff; border-radius: 20px; padding: 24px; box-shadow: 0 24px 60px rgba(16,34,27,.12), 0 0 0 1px rgba(16,34,27,.07); }

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .s-bill__in { grid-template-columns: 1fr 1fr; gap: 40px; }
  .s-zz__in, .s-zz--flip .s-zz__in { grid-template-columns: 1fr 1fr; gap: 56px; }
  .s-plans { grid-template-columns: repeat(2, 1fr); }
  .s-plan:nth-child(3) { border-left: 0; }
  .s-plan:nth-child(n+3) { border-top: 1px solid var(--s-line); }
  .s-cards--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .s-bill { padding: 48px 0 72px; }
  .s-bill__in, .s-zz__in, .s-zz--flip .s-zz__in, .s-blade { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .s-bill h1, .s-price-hero h1, .s-art-hero h1, .s-tool-hero h1 { font-size: 34px; line-height: 40px; }
  .s-about-hero h1 { font-size: 36px; line-height: 42px; }
  .s-bill__sub { font-size: 17px; line-height: 26px; }
  .s-zz { padding: 48px 0; }
  .s-zz--flip .s-zz__media { order: 0; }
  .s-zz h2, .s-blade h2 { font-size: 26px; line-height: 32px; }
  .s-zz p, .s-blade p { font-size: 16px; line-height: 25px; }
  .s-blade { padding: 28px 22px; border-radius: 18px; }
  .s-blade-wrap { padding: 16px 0 48px; }
  .s-facts ul { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .s-facts b { font-size: 22px; line-height: 28px; }
  .s-facts li > span { font-size: 12px; line-height: 17px; }
  .s-sec, .s-faq { padding: 52px 0; }
  .s-cards--3, .s-cards--4, .s-cards--2 { grid-template-columns: 1fr; }
  .s-price-hero { padding: 48px 0 20px; }
  .s-plans { grid-template-columns: 1fr; }
  .s-plan { border-left: 0; border-top: 1px solid var(--s-line); }
  .s-plan:first-child { border-top: 0; }
  .s-plan__for { min-height: 0; }
  .s-promise, .s-beliefs, .s-company { grid-template-columns: 1fr; }
  .s-doms { grid-template-columns: 1fr; }
  .s-art-hero, .s-tool-hero { padding: 44px 0 36px; }
  .s-art { grid-template-columns: minmax(0, 1fr); gap: 24px; padding-top: 28px; }
  .s-toc { position: static; background: var(--s-tint2); border-radius: 14px; padding: 16px; }
  .s-prose { font-size: 17px; line-height: 28px; }
  .s-prose h2 { font-size: 24px; line-height: 31px; margin-top: 36px; }
  .s-tool { grid-template-columns: 1fr; }
  .s-tool__out { border-left: 0; border-top: 1px solid var(--s-line); }
  .s-tool form, .s-tool__out { padding: 22px; }
  .s-grid2 { grid-template-columns: 1fr; }
  .s-about-hero { padding: 48px 0 32px; }
  .s-faq__i summary { font-size: 16px; line-height: 24px; padding: 20px 2px; }
}
.s-faq.s-faq--compact-top { padding-top: 24px; }
@media (prefers-reduced-motion: reduce) { .s-card, .s-faq__i summary i::before, .s-faq__i summary i::after { transition: none; } }
.s-prose code { overflow-wrap: break-word; }
.s-zz code, .s-blade code { white-space: nowrap; }
.s-page .btn { text-decoration: none; }
.s-page .btn-ghost { background: #fff; color: var(--s-ink); border-color: color-mix(in srgb, var(--s-ink) 35%, transparent); }
.s-page .btn-ghost:hover { border-color: var(--s-ink); background: var(--s-tint2); }
.s-plans { text-align: left; }
.s-plan__price { display: flex; align-items: baseline; gap: 6px; }
.s-plan__per { font-size: 15px; font-weight: 600; color: var(--s-mute); letter-spacing: 0; }
.s-plan__billed { margin: 4px 0 0; min-height: 20px; font-size: 14px; color: var(--s-mute); }

/* tables of three columns or fewer fit the phone instead of scrolling */
@media (max-width: 600px) { .s-tbl--fit table { min-width: 0; } .s-tbl--fit th, .s-tbl--fit td { padding: 12px 12px; } }

/* Grok's base sheet caps every h1 at 18ch with no auto margin, which pushes centred headlines left. */
.s-page main h1 { max-width: none; }
.s-page main .s-bill--center h1, .s-page main .s-tool-hero h1, .s-page main .s-price-hero h1, .s-page main .s-about-hero h1 { max-width: 760px; margin-inline: auto; }

/* timed tabs on inner pages (component shared with the homepage chapters) */
.s-tabs .x-acc__b ul { margin: 12px 0 0; padding: 0; list-style: none; }
.s-tabs .x-acc__b li { position: relative; padding: 5px 0 5px 28px; font-size: 17px; line-height: 26px; color: var(--s-ink); }
.s-tabs .x-acc__b li::before { content: ""; position: absolute; left: 2px; top: 12px; width: 14px; height: 8px; border-left: 2.5px solid var(--s-press); border-bottom: 2.5px solid var(--s-press); transform: rotate(-45deg); }
.s-tabs .x-acc__b code { font-family: inherit; font-weight: 700; background: var(--s-tint); color: var(--s-ink); padding: 1px 6px; border-radius: 6px; white-space: nowrap; }
.s-tabs .x-acc__i:not(.x-is-on) .x-acc__b > * { display: none; }
.s-tabs .x-vis .s-photo, .s-tabs .x-vis .s-shot { margin: 0; }
/* fixed visual box so auto-advancing tabs never move the page below them */
@media (min-width: 901px) {
  .s-tabs .x-vis { aspect-ratio: 5 / 4; }
  .s-tabs .x-vis .s-shot img { max-height: 500px; object-fit: cover; object-position: top left; }
}

/* pricing, premium treatment: whole dollars, small raised currency sign, quiet billing line, one accent on the toggle */
.s-bill-toggle button { display: inline-flex; align-items: center; gap: 8px; }
.s-save { font-size: 12px; font-weight: 800; letter-spacing: .01em; color: var(--s-link); background: var(--s-tint); border-radius: 999px; padding: 3px 8px; }
.s-bill-toggle button[aria-pressed="true"] .s-save { background: var(--s-brand); color: var(--on-brand, #062912); }
.s-plan__price { margin-top: 20px; align-items: flex-start; gap: 0; font-size: 52px; line-height: 52px; font-weight: 800; letter-spacing: -.03em; }
.s-cur { font-size: 24px; line-height: 28px; font-weight: 700; margin: 4px 3px 0 0; letter-spacing: 0; }
.s-amt { display: inline-block; font-variant-numeric: tabular-nums; }
.s-plan__price .s-plan__per { align-self: flex-end; margin: 0 0 6px 8px; font-size: 14px; line-height: 18px; font-weight: 600; letter-spacing: 0; color: var(--s-mute); }
.s-plan__billed { margin: 10px 0 0; min-height: 20px; font-size: 14px; line-height: 20px; color: var(--s-ink2); }
.s-amt--in { animation: s-amt-in .32s cubic-bezier(.165,.84,.44,1); }
@keyframes s-amt-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* article lists: the base sheet strips list markers; Slack articles keep bullets and step numbers */
.s-prose ul { list-style: disc outside; }
.s-prose ol { list-style: decimal outside; }
.s-prose li { padding-left: 4px; }
.s-prose li::marker { color: var(--s-press); font-weight: 700; }
/* short inline codes never break mid-word; only very long ones (query strings) may wrap */
.s-prose code { white-space: nowrap; }
.s-prose code.s-long, .s-prose p > code:only-child { white-space: normal; overflow-wrap: anywhere; }
/* article tables keep their width and scroll sideways on phones: their code chips cannot wrap, so squeezing them breaks words */
@media (max-width: 600px) { .s-prose .s-tbl--fit table { min-width: 520px; } }

/* ---------- pages added 28 Oct: legal nav, flow diagram, code sample, contact, help, link checker ---------- */
.s-legal-nav ol + p { margin-top: 22px; }
.s-legal-nav a[aria-current="page"] { color: var(--s-ink); font-weight: 800; border-left-color: var(--s-press); }
.s-beliefs--4 { grid-template-columns: repeat(4, 1fr); }
.s-sec--tight { padding-block: 32px 0; }
.s-flow ol { list-style: none; margin: 0; padding: 28px; display: grid; gap: 14px; background: #fff; border-radius: 16px; box-shadow: 0 24px 60px rgba(16,34,27,.12), 0 0 0 1px rgba(16,34,27,.06); counter-reset: f; }
.s-flow li { position: relative; display: grid; grid-template-columns: 110px 1fr; gap: 14px; align-items: baseline; padding: 14px 16px 14px 52px; border-radius: 12px; background: var(--s-tint2); counter-increment: f; }
.s-flow li::before { content: counter(f); position: absolute; left: 14px; top: 13px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--s-press); color: #fff; font-size: 13px; font-weight: 800; }
.s-flow b { font-size: 17px; }
.s-flow span { font-size: 15px; line-height: 22px; color: var(--s-ink2); }
.s-flow code, .s-code code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.s-code { background: #0E1F17; color: #E8F3EC; border-radius: 16px; padding: 24px; box-shadow: 0 24px 60px rgba(16,34,27,.18); }
.s-code pre { margin: 0; overflow-x: auto; font-size: 14px; line-height: 22px; white-space: pre; }
.s-code p { margin: 14px 0 0; font-size: 12px; color: rgba(232,243,236,.6); }
.s-contact-hero { background: var(--s-tint); padding: 96px 0 88px; }
.s-contact-hero__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px); gap: 64px; align-items: start; }
.s-contact-hero h1 { margin: 0; font-size: 50px; line-height: 56px; font-weight: 800; letter-spacing: -.02em; text-wrap: balance; }
.s-contact-hero__mail { margin: 20px 0 0; font-size: 16px; }
.s-ticks { list-style: none; margin: 20px 0 0; padding: 0; }
.s-ticks li { position: relative; padding: 6px 0 6px 28px; font-size: 17px; line-height: 26px; }
.s-ticks li::before { content: ""; position: absolute; left: 2px; top: 13px; width: 14px; height: 8px; border-left: 2.5px solid var(--s-press); border-bottom: 2.5px solid var(--s-press); transform: rotate(-45deg); }
.s-contact { background: #fff; border-radius: 20px; padding: 32px; display: grid; gap: 16px; box-shadow: 0 30px 70px rgba(16,34,27,.12), 0 0 0 1px rgba(16,34,27,.06); }
.s-contact__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.s-field { display: grid; gap: 6px; font-size: 14px; font-weight: 700; color: var(--s-ink); }
.s-field input, .s-field textarea { font: inherit; font-weight: 400; font-size: 16px; padding: 14px 16px; min-height: 52px; border: 1px solid var(--s-line); border-radius: 10px; background: #fff; color: var(--s-ink); width: 100%; box-sizing: border-box; }
.s-field textarea { min-height: 110px; resize: vertical; }
.s-field input:focus, .s-field textarea:focus { outline: 3px solid rgba(30,215,96,.35); border-color: var(--s-press); }
.s-contact .btn { justify-self: start; }
.s-help-cats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.s-help-cat { display: grid; gap: 4px; padding: 18px 20px; border: 1px solid var(--s-line); border-radius: 14px; background: #fff; text-decoration: none; color: var(--s-ink); }
.s-help-cat b { font-size: 17px; }
.s-help-cat span { font-size: 14px; color: var(--s-mute); }
.s-help-cat:hover { border-color: var(--s-press); }
.s-copy { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 8px 0 22px; padding: 14px 16px; border-radius: 12px; background: var(--s-tint2); }
.s-copy code { font-size: 17px; }
.s-tool--one > form, .s-tool--one > .s-lc, .s-tool--one > .s-fine { padding-inline: 32px; }
.s-tool--one > .s-fine { padding-bottom: 28px; margin: 0; }
.s-lc:empty { display: none; }
.s-lc { display: grid; gap: 10px; padding-bottom: 8px; }
.s-lc__row { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; padding: 12px 14px; border-radius: 10px; background: var(--s-tint2); font-size: 15px; line-height: 22px; }
.s-lc__row b { font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--s-mute); }
.s-lc__row span { overflow-wrap: anywhere; }
.s-lc__row--warn { background: #FFF6E6; }
.s-lc__row--ok { background: var(--s-tint); }
@media (max-width: 1100px) { .s-help-cats { grid-template-columns: repeat(3, 1fr); } .s-beliefs--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) {
  .s-contact-hero { padding: 44px 0 48px; }
  .s-contact-hero__in { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .s-contact-hero h1 { font-size: 34px; line-height: 40px; }
  .s-contact__grid { grid-template-columns: minmax(0, 1fr); }
  .s-contact { padding: 22px; }
  .s-help-cats { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .s-beliefs--4 { grid-template-columns: minmax(0, 1fr); }
  .s-flow li { grid-template-columns: minmax(0, 1fr); padding-left: 52px; }
  .s-tool--one > form, .s-tool--one > .s-lc, .s-tool--one > .s-fine { padding-inline: 22px; }
  .s-lc__row { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}
/* the few inline style attributes moved here so a strict content-security policy can block inline styles later */
.s-band-sub { color: rgba(255,255,255,.78); text-align: center; max-width: 640px; }
.s-art--single { grid-template-columns: minmax(0, 760px); justify-content: center; }
.s-sec--flush { padding-top: 0; }
.s-prose--narrow { max-width: 760px; }
.s-filter__count { margin: 0 0 0 auto; align-self: center; }
.x-foot__links { display: flex; flex-wrap: wrap; gap: 4px 6px; font-size: 13px; }
.x-foot__links a { color: inherit; text-decoration: none; }
.x-foot__links a:hover { text-decoration: underline; }

/* wide tables (5+ columns) scroll sideways on phones instead of breaking words mid-letter */
.s-tbl th, .s-tbl td { overflow-wrap: normal; word-break: normal; hyphens: manual; }
.s-tbl--wide table { min-width: 760px; }
@media (max-width: 600px) { .s-code { padding: 18px; } .s-code pre { font-size: 12px; line-height: 20px; } }
/* code blocks inside long-form pages keep their line breaks and dark styling */
.s-prose .s-code { margin: 14px 0 22px; padding: 20px 22px; box-shadow: none; }
.s-code code, .s-prose .s-code code { white-space: pre; background: none; color: inherit; padding: 0; font-weight: 400; border-radius: 0; font-size: inherit; }
@media (max-width: 600px) { .s-prose :not(pre) > code { white-space: normal; overflow-wrap: anywhere; } }
.s-prose .s-code { max-width: 100%; min-width: 0; overflow: hidden; }
.s-prose .s-code pre { background: none; padding: 0; border-radius: 0; font-size: 14px; line-height: 22px; overflow-x: auto; }
.s-art__body, .s-prose { min-width: 0; }