/* Soft pages: the homepage's look for case studies, guides, the blog and the knowledge
   graph page. Cream ground, pastel cards without borders, Fraunces display headings with
   one highlighter mark, mono labels, square corners. Loaded by baseof on every page; all
   rules sit under .sf or on sf- components, so templates that don't opt in are untouched.
   Palette and type are the homepage's (layouts/partials/desk.html), light and dark. */
:root {
  --sf-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sf-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  --sf-ink: #1F1D18; --sf-text: #4A463D; --sf-muted: #6A6358; --sf-teal: #07876D;
  --sf-mark: #BFE6D6; --sf-ic: rgba(255, 255, 255, .62); --sf-rule: #E3DDCF; --sf-surface: #FBF9F3;
  --sf-code: #ECE7DA; --sf-chip: rgba(255, 255, 255, .55); --sf-chip-line: rgba(31, 29, 24, .14);
  --sf-btn: #00D4AA; --sf-btn-hover: #00BD97; --sf-btn-ink: #07241D;
  --sf-mint: #DDF0E6; --sf-mint-k: #0B4A3C; --sf-peach: #FBE9D2; --sf-peach-k: #6A3410;
  --sf-lav: #E6E8FA; --sf-lav-k: #232A6B; --sf-rose: #FBE2DC; --sf-rose-k: #6E2218;
  --sf-slate: #E1E6EC; --sf-slate-k: #1D2A38; --sf-sky: #DDEEF8; --sf-sky-k: #0E3E5C;
}
:root[data-theme="dark"] {
  --sf-ink: #E8E4DC; --sf-text: #C9C4BA; --sf-muted: #9A958C; --sf-teal: #34E3C2;
  --sf-mark: rgba(0, 212, 170, .32); --sf-ic: rgba(255, 255, 255, .08); --sf-rule: #2A2A2A; --sf-surface: #1A1A1A;
  --sf-code: #262626; --sf-chip: rgba(255, 255, 255, .06); --sf-chip-line: rgba(255, 255, 255, .14);
  --sf-mint: #0E241E; --sf-mint-k: #BDEAD8; --sf-peach: #261A10; --sf-peach-k: #F8D8B2;
  --sf-lav: #161931; --sf-lav-k: #D3D7FA; --sf-rose: #29150F; --sf-rose-k: #F8CEC4;
  --sf-slate: #191F28; --sf-slate-k: #D8E0EA; --sf-sky: #0E202D; --sf-sky-k: #C4E2F5;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --sf-ink: #E8E4DC; --sf-text: #C9C4BA; --sf-muted: #9A958C; --sf-teal: #34E3C2;
    --sf-mark: rgba(0, 212, 170, .32); --sf-ic: rgba(255, 255, 255, .08); --sf-rule: #2A2A2A; --sf-surface: #1A1A1A;
    --sf-code: #262626; --sf-chip: rgba(255, 255, 255, .06); --sf-chip-line: rgba(255, 255, 255, .14);
    --sf-mint: #0E241E; --sf-mint-k: #BDEAD8; --sf-peach: #261A10; --sf-peach-k: #F8D8B2;
    --sf-lav: #161931; --sf-lav-k: #D3D7FA; --sf-rose: #29150F; --sf-rose-k: #F8CEC4;
    --sf-slate: #191F28; --sf-slate-k: #D8E0EA; --sf-sky: #0E202D; --sf-sky-k: #C4E2F5;
  }
}

/* a card or block picks one pastel pair */
.sf-mint { --sf-cb: var(--sf-mint); --sf-ck: var(--sf-mint-k); }
.sf-peach { --sf-cb: var(--sf-peach); --sf-ck: var(--sf-peach-k); }
.sf-lav { --sf-cb: var(--sf-lav); --sf-ck: var(--sf-lav-k); }
.sf-rose { --sf-cb: var(--sf-rose); --sf-ck: var(--sf-rose-k); }
.sf-slate { --sf-cb: var(--sf-slate); --sf-ck: var(--sf-slate-k); }
.sf-sky { --sf-cb: var(--sf-sky); --sf-ck: var(--sf-sky-k); }

/* ---------- page shell ---------- */
.sf { max-width: 1180px; margin: 0 auto; padding: 52px 0 8px; color: var(--text); }
.sf *, .sf *::before, .sf *::after { box-sizing: border-box; }
.sf-col { max-width: 760px; margin-left: auto; margin-right: auto; }
.sf-ico { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- hero: kicker, title, lede, date and tags ---------- */
.sf-hero { text-align: center; max-width: 1000px; margin: 0 auto 40px; }
.sf-kick { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 10px; margin: 0 0 20px; font: 500 12px/1.4 var(--sf-mono); text-transform: uppercase; letter-spacing: .12em; color: var(--sf-teal); }
.sf-kick > span + span::before { content: "·"; margin-right: 10px; opacity: .55; }
.sf-title { margin: 0; color: var(--sf-ink); font: 600 clamp(34px, 4.4vw, 60px)/1.05 var(--sf-serif); letter-spacing: -.022em; font-variation-settings: "opsz" 144; text-wrap: balance; }
.sf-title.sf-long { font-size: clamp(30px, 3.4vw, 46px); line-height: 1.1; }
.sf-title .sf-sub { display: block; margin: .5em auto 0; max-width: 32em; color: var(--sf-muted); font-size: clamp(19px, 2vw, 27px); font-weight: 400; line-height: 1.28; letter-spacing: -.01em; font-variation-settings: "opsz" 40; }
.sf-title .sf-cap::first-letter { text-transform: uppercase; }
.sf-hl { background-image: linear-gradient(var(--sf-mark), var(--sf-mark)); background-repeat: no-repeat; background-position: 0 88%; background-size: 0% 30%; -webkit-box-decoration-break: clone; box-decoration-break: clone; animation: sf-mark .9s cubic-bezier(.2, .8, .2, 1) .35s forwards; }
@keyframes sf-mark { to { background-size: 100% 30%; } }
.sf-lede { max-width: 40em; margin: 24px auto 0; color: var(--sf-text); font-size: clamp(17px, 1.45vw, 19.5px); line-height: 1.6; text-wrap: pretty; }
.sf-meta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin-top: 26px; }
.sf-date { font: 500 12px/1.4 var(--sf-mono); letter-spacing: .04em; color: var(--sf-muted); margin-right: 8px; }
.sf-chip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px 5px 9px; font-size: 12.5px; line-height: 1.25; color: var(--sf-ink); background: var(--sf-chip); border: 1px solid var(--sf-chip-line); }
.sf-chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--sf-dot, var(--sf-teal)); flex: none; }
.sf-chip:nth-child(6n+2) { --sf-dot: #07876D; } .sf-chip:nth-child(6n+3) { --sf-dot: #E48A34; } .sf-chip:nth-child(6n+4) { --sf-dot: #4F5BD5; }
.sf-chip:nth-child(6n+5) { --sf-dot: #D9553F; } .sf-chip:nth-child(6n) { --sf-dot: #2A7DB8; } .sf-chip:nth-child(6n+1) { --sf-dot: #D9A21B; }

/* ---------- media under the hero (demo video, cover image) ---------- */
.sf-media { display: block; margin: 0 auto 8px; max-width: 960px; }
.sf-media.sf-col { max-width: 760px; }
.sf .ps-demo-video { margin: 0 auto 8px !important; }
.sf .ps-demo-video video { border-radius: 0 !important; border: 0 !important; }
.sf .ps-demo-video figcaption { font-size: 13.5px !important; line-height: 1.55; color: var(--sf-muted) !important; margin-top: 10px !important; text-align: center; }
.sf img.sf-media { width: 100%; height: auto; border-radius: 0; }

/* ---------- sections, labels, cards ---------- */
.sf-sec { margin-top: 56px; }
.sf-label { margin: 0 0 14px; font: 500 11.5px/1.4 var(--sf-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--sf-teal); }
.sf-sec-h { margin: 0 0 22px; color: var(--sf-ink); font: 600 clamp(28px, 3vw, 42px)/1.08 var(--sf-serif); letter-spacing: -.02em; font-variation-settings: "opsz" 144; text-wrap: balance; }
.sf-grid { display: grid; gap: 18px; }
.sf-g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sf-g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sf-g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sf-card { display: flex; flex-direction: column; gap: 12px; padding: 26px 24px 28px; background: var(--sf-cb); color: var(--sf-ck); }
.sf-card .sf-ic, .sf-ic { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 12px; background: var(--sf-ic); color: var(--sf-ck, var(--sf-ink)); }
.sf-ic svg { width: 22px; height: 22px; }
.sf-card h3 { margin: 0; color: inherit; font: 600 23px/1.15 var(--sf-serif); letter-spacing: -.01em; }
.sf-card p { margin: 0; font-size: 15.5px; line-height: 1.6; opacity: .9; }
.sf-card a { color: inherit; font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a.sf-card { text-decoration: none; transition: transform .25s cubic-bezier(.2, .8, .2, 1); }
a.sf-card:hover { text-decoration: none; transform: translateY(-3px); }
a.sf-card .sf-go { margin-top: auto; padding-top: 6px; font: 500 12px/1.4 var(--sf-mono); text-transform: uppercase; letter-spacing: .09em; }

/* numbers: one pastel card per measured value */
.sf-stat { padding: 22px 22px 24px; background: var(--sf-cb); color: var(--sf-ck); }
.sf-num { font: 600 clamp(40px, 4.2vw, 58px)/1 var(--sf-serif); letter-spacing: -.02em; font-variation-settings: "opsz" 144; }
.sf-num.sf-num-long { font-size: clamp(32px, 3.4vw, 46px); }
.sf-stat .sf-lab { margin-top: 14px; font: 500 11.5px/1.45 var(--sf-mono); text-transform: uppercase; letter-spacing: .08em; }
.sf-stat .sf-small { margin-top: 6px; font-size: 14px; line-height: 1.45; opacity: .85; }

/* reveal: cards rise in as they reach the screen (the script adds .sf-js; without it, all shows) */
.sf-js .sf-reveal { opacity: 0; transform: translateY(12px); transition: opacity .6s cubic-bezier(.2, .8, .2, 1), transform .6s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--sf-i, 0) * 70ms); }
.sf-js .sf-reveal.sf-in { opacity: 1; transform: none; }

/* ---------- buttons ---------- */
.sf-btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border: 0; border-radius: 0; cursor: pointer; background: var(--sf-btn); color: var(--sf-btn-ink) !important; font: 600 15px/1 'Inter', sans-serif; text-decoration: none !important; transition: background .15s ease, transform .15s ease; }
.sf-btn:hover { background: var(--sf-btn-hover); transform: translateY(-1px); }
.sf-btn.sf-quiet { background: transparent; color: inherit !important; box-shadow: inset 0 0 0 1px currentColor; }
.sf-btn.sf-quiet:hover { background: var(--sf-chip); }
.sf-link { color: var(--sf-teal); font-weight: 600; text-decoration: none; }
.sf-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- article body ---------- */
.sf-body { font-size: 16.5px; line-height: 1.72; color: var(--text); overflow-wrap: break-word; }
.sf-body > :first-child { margin-top: 0; }
.sf-body p { margin: 0 0 1.15em; }
.sf-body h2 { margin: 1.9em 0 .5em; color: var(--sf-ink); font: 600 clamp(25px, 2.3vw, 31px)/1.15 var(--sf-serif); letter-spacing: -.016em; font-variation-settings: "opsz" 144; text-wrap: balance; }
.sf-body h3 { margin: 1.7em 0 .45em; color: var(--sf-ink); font: 600 21px/1.25 var(--sf-serif); letter-spacing: -.01em; }
.sf-body h4 { margin: 1.6em 0 .4em; font: 600 17px/1.4 'Inter', sans-serif; }
.sf-body a { color: var(--sf-teal); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
.sf-body a:hover { text-decoration-color: currentColor; }
.sf-body strong { font-weight: 600; color: var(--sf-ink); }
.sf-body ul, .sf-body ol { margin: 0 0 1.2em; padding-left: 1.35em; }
.sf-body li { margin: 0 0 .5em; padding-left: .2em; }
.sf-body li::marker { color: var(--sf-teal); }
.sf-body ol > li::marker { font: 500 .82em var(--sf-mono); }
.sf-body blockquote { margin: 1.7em 0; padding: 22px 26px; border: 0; background: var(--sf-mint); color: var(--sf-mint-k); font-style: normal; }
.sf-body blockquote p:last-child { margin-bottom: 0; }
.sf-body blockquote strong, .sf-body blockquote a { color: inherit; }
.sf-body code { padding: .12em .38em; border-radius: 3px; background: var(--sf-code); font: .86em/1.5 var(--sf-mono); }
.sf-body pre { margin: 1.7em 0; padding: 20px 22px; overflow-x: auto; border: 0; border-radius: 0; background: var(--sf-surface) !important; color: var(--text); font-size: 13.5px; line-height: 1.65; }
.sf-body pre code { padding: 0; background: none; font-size: inherit; color: inherit; }
.sf-body .highlight { margin: 1.7em 0; }
.sf-body .highlight pre { margin: 0; }
.sf-body img { max-width: 100%; height: auto; margin: 1.6em 0; border-radius: 0; cursor: zoom-in; }
.sf-body figure { margin: 1.8em 0; }
.sf-body figcaption { margin-top: 8px; font-size: 13.5px; line-height: 1.5; color: var(--sf-muted); }
.sf-body hr { height: 1px; margin: 3em 0; border: 0; background: var(--sf-rule); }
.sf-body details { margin: 1.4em 0; }
.sf-body details > summary { cursor: pointer; display: inline-flex; gap: 10px; align-items: baseline; list-style: none; font-weight: 600; color: var(--sf-ink); }
.sf-body details > summary::-webkit-details-marker { display: none; }
.sf-body details > summary::after { content: "+"; font: 600 14px/1 var(--sf-mono); color: var(--sf-teal); }
.sf-body details[open] > summary::after { content: "−"; }
.sf-body table { width: 100%; margin: 1.8em 0; border-collapse: collapse; border: 1px solid var(--sf-rule); background: var(--sf-surface); font-size: 15px; line-height: 1.5; }
.sf-body table th { padding: 14px 16px 10px; border: 0; border-bottom: 1px solid var(--sf-rule); background: transparent; color: var(--sf-muted); font: 500 11px/1.4 var(--sf-mono); text-transform: uppercase; letter-spacing: .08em; text-align: left; vertical-align: bottom; }
.sf-body table td { padding: 13px 16px; border: 0; border-bottom: 1px solid var(--sf-rule); background: transparent; vertical-align: top; }
.sf-body table tr:last-child td { border-bottom: 0; }
.sf-body table tr:nth-child(even) td { background: transparent; }
.sf-body table code { font-size: 13px; word-break: break-word; }
@media (max-width: 700px) {
  .sf-body table { display: block; overflow-x: auto; }
  .sf-body img { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
}

/* in-article boxes from shortcodes */
.sf-aside { margin: 1.8em 0; padding: 18px 22px; background: var(--sf-cb, var(--sf-mint)); color: var(--sf-ck, var(--sf-mint-k)); font-size: 15px; line-height: 1.6; }
.sf-aside strong { color: inherit; }
.sf-aside a { color: inherit !important; font-weight: 600; }

/* ---------- FAQ ---------- */
.sf-faq { max-width: 760px; margin: 60px auto 0; }
.sf-faq h2 { margin: 0 0 20px; color: var(--sf-ink); font: 600 clamp(28px, 3vw, 40px)/1.1 var(--sf-serif); letter-spacing: -.02em; font-variation-settings: "opsz" 144; }
.sf-faq details { border-top: 1px solid var(--sf-rule); }
.sf-faq details:last-of-type { border-bottom: 1px solid var(--sf-rule); }
.sf-faq summary { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 14px 0; cursor: pointer; list-style: none; color: var(--sf-ink); font: 600 17.5px/1.35 var(--sf-serif); letter-spacing: -.005em; }
.sf-faq summary::-webkit-details-marker { display: none; }
.sf-faq summary::after { content: "+"; flex: none; width: 30px; height: 30px; display: grid; place-items: center; background: var(--sf-mint); color: var(--sf-mint-k); font: 500 17px/1 var(--sf-mono); }
.sf-faq details[open] summary::after { content: "−"; }
.sf-faq summary:hover { color: var(--sf-teal); }
.sf-faq details p { max-width: 44em; margin: 0; padding: 0 0 22px; color: var(--sf-text); font-size: 16px; line-height: 1.7; }

/* ---------- the next-step card ---------- */
.sf-cta { max-width: 760px; margin: 60px auto 0; padding: 36px 36px 34px; background: var(--sf-cb, var(--sf-mint)); color: var(--sf-ck, var(--sf-mint-k)); }
.sf-cta.sf-full { max-width: none; }
.sf-cta .sf-label { color: inherit; opacity: .78; }
.sf-cta h2, .sf-cta h3 { margin: 0 0 12px; color: inherit; font: 600 clamp(26px, 2.8vw, 38px)/1.1 var(--sf-serif); letter-spacing: -.02em; font-variation-settings: "opsz" 144; text-wrap: balance; }
.sf-cta p { max-width: 36em; margin: 0 0 22px; font-size: 16.5px; line-height: 1.6; opacity: .92; }
.sf-cta .cal-embed { margin: 6px 0 0; }
.sf-cta .cal-trio { color: inherit !important; opacity: .8; font-weight: 500 !important; font-size: 13.5px !important; }
.sf-cta .sf-note { margin: 12px 0 0; font-size: 13.5px; opacity: .8; }

/* ---------- related reading, case proof, production path ---------- */
.sf-related { max-width: 760px; margin: 60px auto 0; }
.sf-related .sf-grid > :first-child { grid-column: 1 / -1; }
.sf-rel { display: flex; flex-direction: column; gap: 6px; padding: 16px 20px 18px; background: var(--sf-cb); color: var(--sf-ck); text-decoration: none; transition: transform .25s cubic-bezier(.2, .8, .2, 1); }
.sf-rel:hover { text-decoration: none; transform: translateY(-3px); }
.sf-rel b { font: 600 18px/1.25 var(--sf-serif); letter-spacing: -.01em; }
.sf-rel span { font-size: 14px; line-height: 1.5; opacity: .85; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sf-rel small { font: 500 11px/1.4 var(--sf-mono); text-transform: uppercase; letter-spacing: .09em; opacity: .75; }

.sf-proof { max-width: 760px; margin: 60px auto 0; }
.sf-proof .sf-card h3 { font-size: 20px; line-height: 1.22; }
.sf-proof-links { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 16px 0 0; font-size: 14.5px; }
.sf-proof-links a { color: var(--sf-teal); font-weight: 600; text-decoration: none; }
.sf-proof-links a:hover { text-decoration: underline; text-underline-offset: 3px; }
.sf-qual { margin-top: 56px; text-align: center; color: var(--sf-text); font-size: 16px; line-height: 1.6; }

/* the newsletter box (partials/subscribe-inline.html) in the homepage palette */
.sf .nl-inline { max-width: 760px; margin: 60px auto 0; padding: 32px 34px 26px; border: 0; border-radius: 0; background: var(--sf-peach); color: var(--sf-peach-k); }
.sf .nl-inline h4 { margin: 0 0 8px; color: inherit; font: 600 clamp(24px, 2.4vw, 32px)/1.12 var(--sf-serif); letter-spacing: -.02em; font-variation-settings: "opsz" 144; }
.sf .nl-inline p.nli-lead { color: inherit; opacity: .88; font-size: 15.5px; margin-bottom: 18px; }
.sf .nl-inline input[type=email] { border-radius: 0; border-color: transparent; background: var(--sf-surface); padding: 13px 14px; font-size: 15px; }
.sf .nl-inline input[type=email]:focus { border-color: var(--sf-peach-k); }
.sf .nl-inline button { border-radius: 0; padding: 13px 22px; font-weight: 600; font-size: 15px; background: var(--sf-peach-k); border-color: var(--sf-peach-k); color: var(--sf-peach); }
.sf .nl-inline .nli-privacy { color: inherit; opacity: .75; }
.sf .nl-inline .nli-success { border-radius: 0; border: 0; background: var(--sf-surface); }

.prod-path { margin: 32px 0; padding: 24px 26px 24px; background: var(--sf-sky); color: var(--sf-sky-k); }
.prod-path .pp-kicker { margin: 0 0 8px; font: 500 11.5px/1.4 var(--sf-mono); text-transform: uppercase; letter-spacing: .1em; opacity: .8; }
.prod-path .pp-text { margin: 0 0 14px; font-size: 15.5px; line-height: 1.6; }
.prod-path .pp-links { display: flex; flex-wrap: wrap; gap: 20px; font-size: 14.5px; font-weight: 600; }
.prod-path .pp-links a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.sf .prod-path { max-width: 760px; margin: 40px auto 0; }

/* ---------- list pages ---------- */
.sf-list .sf-hero { margin-bottom: 44px; }
.sf-posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 24px; }
.sf-post { display: flex; flex-direction: column; gap: 10px; color: var(--text); text-decoration: none; }
.sf-post:hover { text-decoration: none; }
.sf-cover { display: block; width: 100%; aspect-ratio: 1200 / 630; object-fit: cover; background: var(--sf-cb, var(--sf-surface)); transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
.sf-post:hover .sf-cover { transform: translateY(-4px); }
.sf-cover-ph { display: flex; flex-direction: column; justify-content: space-between; padding: 20px 22px; color: var(--sf-ck); }
.sf-cover-ph small { font: 500 11px/1.4 var(--sf-mono); text-transform: uppercase; letter-spacing: .1em; opacity: .8; }
.sf-feature .sf-cover-ph b { font-size: clamp(30px, 3.2vw, 46px); }
.sf-cover-ph b { font: 600 clamp(20px, 1.9vw, 27px)/1.08 var(--sf-serif); letter-spacing: -.018em; font-variation-settings: "opsz" 144; text-wrap: balance; }
.sf-post-text { display: flex; flex-direction: column; gap: 9px; padding-top: 6px; }
.sf-post .sf-date { margin: 0; }
.sf-posts-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sf-list-note { max-width: 46em; margin: -8px 0 24px; color: var(--sf-text); font-size: 16px; line-height: 1.6; }
.sf-post h2, .sf-post h3 { margin: 0; color: var(--sf-ink); font: 600 21px/1.24 var(--sf-serif); letter-spacing: -.01em; text-wrap: balance; }
.sf-post h2 span, .sf-post h3 span { background-image: linear-gradient(var(--sf-mark), var(--sf-mark)); background-repeat: no-repeat; background-position: 0 88%; background-size: 0% 30%; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-size .45s cubic-bezier(.2, .8, .2, 1); }
.sf-post:hover h2 span, .sf-post:hover h3 span, .sf-post:focus-visible h2 span { background-size: 100% 30%; }
.sf-post p { margin: 0; color: var(--sf-text); font-size: 14.5px; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sf-feature { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 36px; align-items: center; padding: 0 0 8px; }
.sf-feature .sf-cover { aspect-ratio: 16 / 9; }
.sf-feature h2, .sf-feature h3 { font-size: clamp(24px, 2.4vw, 32px); line-height: 1.15; letter-spacing: -.016em; font-variation-settings: "opsz" 144; }
.sf-feature p { -webkit-line-clamp: 5; font-size: 16px; }
.sf-play { display: inline-flex; align-items: center; gap: 8px; font: 500 12px/1.4 var(--sf-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--sf-teal); }

.sf .pager { margin: 56px 0 0; }
.sf .pager a, .sf .pager span { border-radius: 0; border-color: var(--sf-rule); font-family: var(--sf-mono); font-size: 13px; }
.sf .pager .current { background: var(--sf-ink); color: var(--bg); border-color: var(--sf-ink); }

/* ---------- small screens, motion ---------- */
@media (max-width: 960px) {
  .sf-g3, .sf-g4, .sf-posts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sf-feature { grid-template-columns: minmax(0, 1fr); gap: 18px; }
}
@media (max-width: 640px) {
  .sf { padding-top: 36px; }
  .sf-hero { margin-bottom: 32px; text-align: left; }
  .sf-kick, .sf-meta, .sf-kg .kg-ctas { justify-content: flex-start; }
  .sf-title .sf-sub { margin-left: 0; }
  .sf-g2, .sf-g3, .sf-posts { grid-template-columns: minmax(0, 1fr); }
  .sf-g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .sf-g4 .sf-stat { padding: 18px 16px 18px; }
  .sf-card { padding: 22px 20px 24px; }
  .sf-cta { padding: 28px 22px 26px; }
  .sf-body { font-size: 16.5px; }
  .sf-related .sf-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .sf-hl { animation: none; background-size: 100% 30%; }
  .sf-js .sf-reveal { opacity: 1; transform: none; transition: none; }
  a.sf-card, .sf-rel, .sf-cover, .sf-btn { transition: none; }
}