.ai-reference {
  background: #f6f3ee;
  color: #27322d;
  font-family: Onest, system-ui, sans-serif;
}
.ai-reference * { box-sizing: border-box; }
.ai-reference .ref-main { max-width: 1040px; margin: 0 auto; padding: 42px 24px 84px; }
.ai-reference .ref-top { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-bottom: 26px; border-bottom: 1px solid rgba(39,50,45,.18); }
.ai-reference .ref-brand { color: inherit; text-decoration: none; font-weight: 700; letter-spacing: -.03em; }
.ai-reference .ref-links { display: flex; flex-wrap: wrap; gap: 14px; font-size: 14px; }
.ai-reference .ref-links a, .ai-reference a { color: #1e5d49; text-underline-offset: 3px; }
.ai-reference .ref-kicker { margin: 56px 0 16px; font-size: 12px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: #4d6358; }
.ai-reference h1, .ai-reference h2, .ai-reference h3 { font-family: "Source Serif 4", Georgia, serif; color: #1c2923; }
.ai-reference h1 { max-width: 820px; margin: 0; font-size: clamp(40px, 6vw, 66px); line-height: 1.01; letter-spacing: -.045em; }
.ai-reference .ref-lede { max-width: 780px; margin: 24px 0 0; font-size: clamp(18px, 2.3vw, 23px); line-height: 1.55; }
.ai-reference .ref-note { max-width: 860px; margin-top: 30px; padding: 18px 0; border-top: 1px solid rgba(39,50,45,.18); border-bottom: 1px solid rgba(39,50,45,.18); font-size: 15px; line-height: 1.55; }
.ai-reference .doc-toc { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 32px 0 4px; padding: 16px 0; border-bottom: 1px solid rgba(39,50,45,.18); font-size: 14px; }
.ai-reference .doc-toc a { color: inherit; }
.ai-reference .ref-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 42px; margin-top: 32px; }
.ai-reference .ref-section { padding: 30px 0; border-top: 1px solid rgba(39,50,45,.18); scroll-margin-top: 20px; }
.ai-reference .ref-section.wide { grid-column: 1 / -1; }
.ai-reference h2 { margin: 0 0 12px; font-size: 29px; letter-spacing: -.025em; }
.ai-reference h3 { margin: 24px 0 8px; font-size: 22px; }
.ai-reference p, .ai-reference li { font-size: 16px; line-height: 1.62; }
.ai-reference p { margin: 0 0 14px; }
.ai-reference ul { margin: 0; padding-left: 20px; }
.ai-reference li + li { margin-top: 7px; }
.ai-reference .ref-facts { margin: 0; }
.ai-reference .ref-facts div { display: grid; grid-template-columns: 170px 1fr; gap: 16px; padding: 12px 0; border-top: 1px solid rgba(39,50,45,.11); }
.ai-reference .ref-facts dt { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #4d6358; }
.ai-reference .ref-facts dd { margin: 0; line-height: 1.5; }
.ai-reference .ref-table-wrap { overflow-x: auto; }
.ai-reference .ref-table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 15px; }
.ai-reference .ref-table caption { padding: 0 0 12px; text-align: left; font-weight: 600; }
.ai-reference .ref-table th, .ai-reference .ref-table td { padding: 12px 10px; text-align: left; vertical-align: top; border-top: 1px solid rgba(39,50,45,.16); }
.ai-reference .ref-table th { min-width: 150px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #4d6358; }
.ai-reference .ref-updated { margin-top: 40px; color: #5b675f; font-size: 14px; }
.ai-reference footer { border-top: 1px solid rgba(39,50,45,.18); padding-top: 22px; margin-top: 40px; font-size: 14px; }
@media (max-width: 680px) {
  .ai-reference .ref-top { align-items: flex-start; flex-direction: column; }
  .ai-reference .ref-grid { grid-template-columns: 1fr; }
  .ai-reference .ref-section.wide { grid-column: auto; }
  .ai-reference .ref-facts div { grid-template-columns: 1fr; gap: 4px; }
  .ai-reference .ref-table th { min-width: 110px; }
}

/* SHELL:BEGIN — generated by scripts/build-shell.mjs. Do not edit below. */

/* ---- _fonts.css ---- */
/* ============================================================
   STELAAH — TYPEFACES (self hosted)

   Two families, served from our own origin:
   · Onest      variable 300..800, the one humanist sans
   · Space Mono 400/700, tiny uppercase eyebrows only

   Self hosted rather than pulled from Google Fonts because:
   · it removes a render blocking third party request from
     every one of the ~1500 pages
   · nothing leaks to a third party on page load
   · the whole site's typography is 96 kB and cache stable

   THE ALIAS BLOCK AT THE BOTTOM IS LEAD, NOT DECORATION.
   Five legacy stylesheets (intent-pages, search-engine,
   agency-toolkit, planner-library, adhd-content) hardcode
   `Newsreader` and `Inter` across dozens of selectors with no
   token to redirect. Rather than chase every selector and risk
   missing one, those family NAMES are re declared here to point
   at the Onest files. Any rule anywhere that still asks for
   Newsreader or Inter therefore renders Onest, and no serif can
   reach production through a selector we failed to find.

   The explicit weight and tracking corrections still live in
   _shell-legacy.css. This block is the safety net; that file is
   the craft. Do not treat this as a substitute for fixing a
   rule properly when you touch one.
   ============================================================ */

/* ---- Onest, variable 300..800 ---- */
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('/fonts/onest-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('/fonts/onest-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---- Space Mono ---- */
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/space-mono-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/space-mono-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/space-mono-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/space-mono-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ------------------------------------------------------------
   LEGACY FAMILY ALIASES — see the note at the top of this file.
   `Newsreader` and `Inter` resolve to the Onest files so no
   stylesheet we have not swept can put a serif on the page.
   ------------------------------------------------------------ */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('/fonts/onest-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('/fonts/onest-latin.woff2') format('woff2');
}

/* ---- _shell.css ---- */
/* ============================================================
   STELAAH — SITE SHELL
   Single source of truth for the marketing site chrome:
   type system, spacing rhythm, navbar and footer.

   DO NOT LINK THIS FILE DIRECTLY and do not edit the copies.
   `node site/scripts/build-shell.mjs` inlines it into every entry
   stylesheet between SHELL:BEGIN / SHELL:END markers, so no page
   <head> ever has to change and no extra request is added.

   Design language: Editorial Calm.
   · One humanist sans (Onest) for everything.
   · Space Mono for tiny uppercase eyebrows only.
   · Cool near-white paper, graphite ink, hairline rules.
   · Borderless first. Whitespace and hairlines, never boxes.
   · One signature easing: cubic-bezier(.32,.72,0,1).
   ============================================================ */

/* ------------------------------------------------------------
   TOKENS
   Every token reads through to the product design system
   (stelaah.css) when that is loaded, so marketing pages inherit
   light/dark theming for free. The literal after the comma is
   the fallback used by pages that only load a lean SEO
   stylesheet and therefore have no product tokens at all.
   ------------------------------------------------------------ */
:root {
  --sh-sans: 'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --sh-mono: var(--font-mono, 'Space Mono', ui-monospace, SFMono-Regular, monospace);

  --sh-paper:      var(--bg, #fdfdfd);
  --sh-surface:    var(--surface, #ffffff);
  --sh-sunken:     var(--bg-sunken, #f7f7f8);
  --sh-ink:        var(--ink, #202124);
  --sh-ink-2:      var(--ink-2, #5f6368);
  --sh-ink-3:      var(--ink-3, #7b8087);
  --sh-ink-4:      var(--ink-4, #9aa0a6);
  --sh-line:       var(--border, rgba(32, 33, 36, .11));
  --sh-line-soft:  var(--border-subtle, rgba(32, 33, 36, .06));
  --sh-line-firm:  var(--border-strong, rgba(32, 33, 36, .18));
  --sh-hover:      var(--bg-hover, rgba(32, 33, 36, .045));
  --sh-accent:     var(--accent, #3d3d3d);
  --sh-leaf:       #739837;

  /* rhythm — matched to mkt.css so both halves of the site align */
  --sh-maxw: 1180px;
  --sh-maxw-wide: 1320px;
  --sh-maxw-prose: 720px;
  --sh-gutter: clamp(20px, 5vw, 40px);
  --sh-section: clamp(76px, 9vw, 132px);
  --sh-section-tight: clamp(48px, 6vw, 84px);

  --sh-r-sm: 9px;
  --sh-r-md: 12px;
  --sh-r-lg: 16px;
  --sh-r-pill: 999px;

  --sh-ease: var(--ease, cubic-bezier(.32, .72, 0, 1));
  --sh-t-fast: var(--t-fast, .16s);
  --sh-t-med: var(--t-med, .26s);

  --sh-nav-h: 68px;

  /* The marketing site runs on Onest, deterministically.
     stelaah.css declares --font-app: 'Aptos', 'Onest', ... because the
     product UI prefers Aptos where it is installed. That is fine inside the
     app, but on the marketing site it means a visitor with Microsoft Office
     installed sees Aptos on the home page and Onest on every SEO page, while
     a visitor without it sees Onest everywhere. Same site, two typefaces,
     depending on the reader's machine.

     These four lines only ever land on marketing pages, because this file is
     inlined into marketing stylesheets and never into the app bundle. */
  --font-app: var(--sh-sans);
  --font-serif: var(--sh-sans);
  --font-title: var(--sh-sans);
  --font-ui: var(--sh-sans);
}

/* ------------------------------------------------------------
   ONE TYPEFACE, ENFORCED

   Six pages declare a serif inside an inline <style> in their own
   <head>: guides/index.html (--g-serif: 'Newsreader'),
   ai/product-reference.html ("Source Serif 4"), made-with-stelaah.html
   (Georgia), blog/index.html, blog/editorial-principles.html and
   index.html. An inline <style> beats a linked stylesheet on source
   order, and the <head> is off limits on this work, so importance is
   the only lever that reaches those rules.

   Note the alias @font-face in _fonts.css is NOT sufficient on its own
   here. Google's real Newsreader is still linked from those heads, and
   where both a real face and our alias are registered for one family
   the browser picks the real one, so the serif came back. These rules
   are what actually settle it.

   Scope is deliberately narrow: family only, never size, weight, or
   letter-spacing. Every page keeps its own typographic scale and only
   the face changes.
   ------------------------------------------------------------ */
:root {
  --g-serif: var(--sh-sans) !important;
  --font-serif: var(--sh-sans) !important;
  /* guides/index.html also carries its own palette in that inline <style>:
     a green black ink and an olive eyebrow, where every other page is
     neutral graphite. Same importance trick, same reason. */
  --g-forest: var(--sh-ink) !important;
  --g-muted:  var(--sh-ink-2) !important;
  --g-rule:   var(--sh-line) !important;
  --g-moss:   var(--sh-ink-4) !important;
}
h1, h2, h3, h4, h5, h6,
.mk-display, .sh-display, .hc-h1 { font-family: var(--sh-sans) !important; }

/* ------------------------------------------------------------
   TYPE SCALE
   Apple-grade tracking: tight at display sizes, opening up as
   the type gets smaller. Weight and size carry the hierarchy,
   never a second typeface.
   ------------------------------------------------------------ */
.sh-display,
.sh-h1,
.sh-h2,
.sh-h3 {
  font-family: var(--sh-sans);
  color: var(--sh-ink);
  text-wrap: balance;
  margin: 0;
}
.sh-display { font-size: clamp(44px, 6.2vw, 76px); line-height: 1.03; letter-spacing: -.038em; font-weight: 600; }
.sh-h1      { font-size: clamp(36px, 4.6vw, 58px); line-height: 1.07; letter-spacing: -.032em; font-weight: 600; }
.sh-h2      { font-size: clamp(27px, 3.2vw, 40px); line-height: 1.13; letter-spacing: -.026em; font-weight: 600; }
.sh-h3      { font-size: 21px; line-height: 1.28; letter-spacing: -.016em; font-weight: 600; }

.sh-dek {
  font-size: clamp(17px, 1.5vw, 19.5px);
  line-height: 1.55;
  letter-spacing: -.008em;
  color: var(--sh-ink-2);
  max-width: 62ch;
  text-wrap: pretty;
  margin: 0;
}

.sh-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--sh-mono);
  font-size: 11px; font-weight: 400;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--sh-ink-4);
}

/* ------------------------------------------------------------
   LAYOUT
   ------------------------------------------------------------ */
.sh-container { width: 100%; max-width: var(--sh-maxw); margin-inline: auto; padding-inline: var(--sh-gutter); }
.sh-container.wide { max-width: var(--sh-maxw-wide); }
.sh-container.prose { max-width: var(--sh-maxw-prose); }
.sh-section { padding-block: var(--sh-section); }
.sh-section.tight { padding-block: var(--sh-section-tight); }

/* ============================================================
   NAVBAR
   The one navbar. These rules are deliberately self-sufficient
   so a lean SEO page gets the identical bar without pulling in
   the whole marketing stylesheet. mkt.css declares the same
   selectors with the same values; whichever lands last wins and
   the result is identical either way.
   ============================================================ */
.mk-nav { position: sticky; top: 0; z-index: 80; }

/* The frosted bar is painted by a ::before layer rather than by the bar
   itself, and this is load bearing.

   backdrop-filter creates a compositing context on the element that carries
   it. The mega panel is a descendant of the bar and deliberately overflows
   it, so when the filter sat on .mk-nav-bar the panel got composited against
   the filtered backdrop and rendered semi transparent: page headlines showed
   straight through an opaque white dropdown. mkt.css:137 has carried that
   bug on the brand pages since the nav was written.

   Moving the filter to an inset ::before keeps the frosted effect, and the
   panel is no longer inside a filtered box. Do not move it back. */
.mk-nav-bar {
  position: relative;
  min-height: var(--sh-nav-h);
  display: flex; align-items: center;
  border-bottom: 1px solid transparent;
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transition: border-color var(--sh-t-med) var(--sh-ease);
}
.mk-nav-bar::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: color-mix(in srgb, var(--sh-paper) 82%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  transition: background var(--sh-t-med) var(--sh-ease);
}
.mk-nav.scrolled .mk-nav-bar { border-bottom-color: var(--sh-line); }
.mk-nav.scrolled .mk-nav-bar::before { background: color-mix(in srgb, var(--sh-paper) 92%, transparent); }
.mk-nav-inner {
  width: 100%; max-width: var(--sh-maxw-wide); margin-inline: auto;
  padding-inline: var(--sh-gutter);
  display: flex; align-items: center; gap: 14px;
}

.mk-logo { display: inline-flex; align-items: center; gap: 10px; user-select: none; flex-shrink: 0; text-decoration: none; }
.mk-logo .mark { width: 26px; height: 26px; color: var(--sh-leaf); flex: none; }
.mk-logo .word { font-family: var(--sh-sans); font-size: 21px; font-weight: 600; letter-spacing: -.03em; color: var(--sh-ink); text-transform: none; }

.mk-nav-links { display: flex; align-items: center; gap: 2px; margin-left: 10px; }
.mk-nav-link {
  display: inline-flex; align-items: center; gap: 5px;
  height: 36px; padding: 0 11px; border: 0; background: none; cursor: pointer;
  border-radius: var(--sh-r-sm);
  font-family: var(--sh-sans); font-size: 15px; font-weight: 500;
  letter-spacing: -.011em; color: var(--sh-ink-2); text-decoration: none;
  transition: color var(--sh-t-fast) var(--sh-ease), background var(--sh-t-fast) var(--sh-ease);
}
.mk-nav-link:hover,
.mk-nav-link[aria-expanded="true"] { color: var(--sh-ink); background: var(--sh-hover); }
.mk-nav-link .caret { width: 13px; height: 13px; opacity: .55; transition: transform var(--sh-t-med) var(--sh-ease); }
.mk-nav-link[aria-expanded="true"] .caret { transform: rotate(180deg); }
.mk-nav-spacer { flex: 1; }
.mk-nav-cta { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.mk-nav-signin {
  font-family: var(--sh-sans); font-size: 14.5px; font-weight: 500;
  color: var(--sh-ink-2); padding: 0 8px; text-decoration: none;
  transition: color var(--sh-t-fast) var(--sh-ease);
}
.mk-nav-signin:hover { color: var(--sh-ink); }

/* primary pill CTA — the one filled control in the chrome */
.mk-nav-cta .mk-btn,
.sh-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 38px; padding: 0 17px;
  border: 1px solid var(--sh-ink); border-radius: var(--sh-r-pill);
  background: var(--sh-ink); color: var(--sh-paper);
  font-family: var(--sh-sans); font-size: 14.5px; font-weight: 600; letter-spacing: -.011em;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform var(--sh-t-fast) var(--sh-ease), opacity var(--sh-t-fast) var(--sh-ease);
}
.mk-nav-cta .mk-btn:hover,
.sh-btn:hover { opacity: .88; }
.mk-nav-cta .mk-btn:active,
.sh-btn:active { transform: scale(.98); }
.sh-btn.ghost {
  background: transparent; color: var(--sh-ink); border-color: var(--sh-line-firm);
}
.sh-btn.ghost:hover { opacity: 1; border-color: var(--sh-ink); }

/* ---- mega dropdown ----
   `.mk-mega` (Product, Solutions) anchors `position:absolute` against its own
   `.mk-nav-item`, flush under the trigger — correct, because those triggers
   sit near the LEFT edge of the bar with the whole viewport open to their
   right.

   `.mk-mega.right` (Resources) cannot use the same trick. `right:0` resolves
   against the nearest positioned ancestor, which is the narrow `.mk-nav-item`
   box around just the "Resources" word — not the navbar, and not the
   viewport. Resources sits mid-bar (Product/Solutions/Teams to its left,
   Pricing/Sign in/Start free to its right), so anchoring an 880px panel to
   that narrow trigger's right edge pushed the panel's LEFT edge into negative
   X and it rendered off-screen (caught live on stelaah.com: the Learn and Use
   columns were unreachable, cut off past the left edge of the browser).
   `position:fixed` with `right: var(--sh-gutter)` sidesteps ancestor lookup
   entirely and clamps to the true viewport edge, regardless of where the
   trigger happens to sit. `top` must be restated in absolute units for the
   same reason: the inherited `calc(100% + 8px)` is a percentage of the
   *viewport height* under `fixed`, not of the nav bar.

   The max-width guard applies to every mega, left or right anchored, as a
   second line of defense against a future wide panel or a narrow desktop
   window overflowing the opposite edge. */
.mk-nav-item { position: relative; }
.mk-mega {
  position: absolute; top: calc(100% + 8px); left: 0;
  max-width: calc(100vw - 2 * var(--sh-gutter));
  background: var(--sh-surface);
  border: 1px solid var(--sh-line);
  border-radius: var(--sh-r-lg);
  box-shadow: 0 24px 60px -22px rgba(32, 33, 36, .3), 0 2px 6px -2px rgba(32, 33, 36, .08);
  padding: 12px;
  opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.985);
  transform-origin: top left;
  transition: opacity var(--sh-t-med) var(--sh-ease), transform var(--sh-t-med) var(--sh-ease), visibility var(--sh-t-med);
}
.mk-mega.right {
  position: fixed; top: calc(var(--sh-nav-h) + 8px); left: auto; right: var(--sh-gutter);
  transform-origin: top right;
}
.mk-nav-item[data-open="true"] .mk-mega { opacity: 1; visibility: visible; transform: none; }

.mk-mega-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; }
.mk-mega-grid.cols-1 { grid-template-columns: 1fr; }
.mk-mega-link {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 11px 12px; border-radius: 11px; text-decoration: none;
  transition: background var(--sh-t-fast) var(--sh-ease);
}
.mk-mega-link:hover { background: var(--sh-hover); }
.mk-mega-ic { width: 19px; height: 19px; color: var(--sh-ink-3); margin-top: 2px; flex-shrink: 0; transition: color var(--sh-t-fast) var(--sh-ease); }
.mk-mega-link:hover .mk-mega-ic { color: var(--sh-accent); }
.mk-mega-tx b { display: block; font-size: 14px; font-weight: 600; color: var(--sh-ink); letter-spacing: -.012em; }
.mk-mega-tx span { display: block; font-size: 12.5px; color: var(--sh-ink-3); margin-top: 2px; line-height: 1.4; }
.mk-mega-col-label {
  font-family: var(--sh-mono); font-size: 10.5px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--sh-ink-4); padding: 8px 12px 6px;
}
.mk-mega-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 10px; padding: 12px 12px 4px; border-top: 1px solid var(--sh-line-soft);
}
.mk-mega-foot .lbl { font-family: var(--sh-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--sh-ink-4); }

/* ---- mega: live preview panel ---- */
.mk-mega-wrap { display: grid; grid-template-columns: 1fr 264px; gap: 4px; align-items: stretch; }
.mk-mega-panel {
  border-left: 1px solid var(--sh-line-soft); margin-left: 10px;
  padding: 8px 4px 8px 16px;
  display: flex; flex-direction: column; gap: 11px; min-width: 0;
}
.mk-mega-prev {
  position: relative; width: 100%; aspect-ratio: 3 / 2;
  border-radius: 11px; overflow: hidden;
  background: var(--sh-sunken); border: 1px solid var(--sh-line-soft);
}
.mk-mega-prev .pv { position: absolute; inset: 0; opacity: 0; transition: opacity .22s var(--sh-ease); pointer-events: none; }
.mk-mega-prev .pv.on { opacity: 1; }
.mk-mega-prev .pv img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mk-mega-panel .cap b { display: block; font-size: 13.5px; font-weight: 600; color: var(--sh-ink); letter-spacing: -.012em; }
.mk-mega-panel .cap span { display: block; font-size: 12.5px; line-height: 1.45; color: var(--sh-ink-3); margin-top: 3px; }
.mk-mega-more {
  margin-top: auto; font-size: 13px; font-weight: 600; letter-spacing: -.01em;
  color: var(--sh-ink); text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px;
  transition: gap var(--sh-t-fast) var(--sh-ease);
}
.mk-mega-more:hover { gap: 9px; }

/* ---- mega: thumbnail rows (Solutions) ---- */
.mk-mega-link.thumb { align-items: center; gap: 11px; padding: 8px 10px; }
.mk-mega-link.thumb .mth {
  width: 54px; flex: none; aspect-ratio: 3 / 2; border-radius: 7px; overflow: hidden;
  background: var(--sh-sunken); border: 1px solid var(--sh-line-soft);
}
.mk-mega-link.thumb .mth img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- mobile ---- */
.mk-nav-toggle {
  display: none; width: 38px; height: 38px; flex: none;
  align-items: center; justify-content: center;
  border: 0; background: none; cursor: pointer; border-radius: var(--sh-r-sm);
  color: var(--sh-ink);
}
.mk-nav-toggle:hover { background: var(--sh-hover); }
.mk-nav-toggle svg { width: 20px; height: 20px; }

.mk-nav-sheet {
  position: fixed; inset: var(--sh-nav-h) 0 0; z-index: 79;
  background: var(--sh-paper);
  padding: 18px var(--sh-gutter) 40px;
  overflow-y: auto; overscroll-behavior: contain;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity var(--sh-t-med) var(--sh-ease), transform var(--sh-t-med) var(--sh-ease), visibility var(--sh-t-med);
}
.mk-nav[data-sheet="true"] .mk-nav-sheet { opacity: 1; visibility: visible; transform: none; }
.mk-nav-sheet-group { border-top: 1px solid var(--sh-line-soft); padding: 14px 0 6px; }
.mk-nav-sheet-group:first-child { border-top: 0; }
.mk-nav-sheet-group > .lbl {
  display: block; font-family: var(--sh-mono); font-size: 10.5px;
  letter-spacing: .13em; text-transform: uppercase; color: var(--sh-ink-4); margin-bottom: 6px;
}
.mk-nav-sheet a {
  display: block; padding: 10px 0; font-size: 16px; font-weight: 500;
  letter-spacing: -.014em; color: var(--sh-ink); text-decoration: none;
}
.mk-nav-sheet a:hover { color: var(--sh-accent); }
.mk-nav-sheet .mk-nav-sheet-cta { display: grid; gap: 10px; margin-top: 22px; }
.mk-nav-sheet .mk-nav-sheet-cta .sh-btn { height: 46px; font-size: 15.5px; }

@media (max-width: 1080px) {
  .mk-mega-wrap { grid-template-columns: 1fr; }
  .mk-mega-panel { display: none; }
  /* shell.js sets a per-menu inline min-width (Product 940px, Solutions
     900px) sized for its widest column layout. min-width beats max-width
     whenever min > max, which is exactly the case here on a narrow desktop
     window, so .mk-mega's viewport clamp above was silently overridden by
     the JS min-width and the panel could still run past the right edge —
     the same overflow bug as the Resources menu, just on the left-anchored
     ones instead. Neutralizing min-width at the same breakpoint where the
     grid already drops to one column lets the clamp win from here down.

     That alone is not sufficient: shell.js also sets an inline
     grid-template-columns on .mk-mega-grid itself (e.g. "repeat(3,...)" for
     Product), which the .mk-mega-wrap rule above does not reach — collapsing
     the wrap stacks the content grid above the (now hidden) preview panel,
     but the content grid still tried to hold 3 columns inside a box that
     .mk-mega's clamp had just narrowed, squeezing every label into an
     illegible 3-line wrap. Forcing the inner grid to one column too is what
     actually produces the "long list" mobile-style layout the collapsed
     wrap was meant to trigger. A tall single column can now exceed the
     viewport height on a short window, so it also scrolls internally rather
     than running past the bottom edge. */
  .mk-mega { min-width: 0 !important; max-height: calc(100vh - var(--sh-nav-h) - 24px); overflow-y: auto; }
  .mk-mega-grid { grid-template-columns: 1fr !important; }
  /* Solutions goes a level deeper still: its persona links sit inside a
     child div carrying its own inline 2-column split (item.split in
     shell.js), a different element than .mk-mega-grid, so the rule above
     does not reach it. Collapsing every direct child of .mk-mega-grid is
     safe generally: Product/Resources' columns are plain stacked divs with
     no grid-template-columns of their own, so this is a no-op there and
     only actually changes anything where a nested split exists. */
  .mk-mega-grid > div { grid-template-columns: 1fr !important; }
}
@media (max-width: 940px) {
  .mk-nav-links, .mk-nav-signin { display: none; }
  .mk-nav-toggle { display: inline-flex; }
  .mk-nav-spacer { flex: 1; }
}
@media (min-width: 941px) {
  .mk-nav-sheet { display: none; }
}

/* ============================================================
   FOOTER
   ============================================================ */
.mk-footer {
  border-top: 1px solid var(--sh-line);
  background: var(--bg-sidebar, var(--sh-sunken));
  padding-block: clamp(56px, 7vw, 88px) 36px;
  overflow: hidden;
}
/* brand column + the five link columns (Product, Solutions, Learn, Use,
   Company). repeat(4) here silently wrapped Company onto its own row. */
.mk-footer-grid { display: grid; grid-template-columns: 1.35fr repeat(5, minmax(0, 1fr)); gap: clamp(24px, 3vw, 40px); }
.mk-footer-brand .mk-logo { margin-bottom: 16px; }
.mk-footer-brand p { font-size: 14px; color: var(--sh-ink-3); line-height: 1.6; max-width: 30ch; margin: 0 0 18px; }
.mk-footer-col h4 {
  font-family: var(--sh-mono); font-size: 11px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--sh-ink-4); margin: 0 0 14px; font-weight: 400;
}
.mk-footer-col a {
  display: block; font-size: 14px; color: var(--sh-ink-2); padding: 6px 0;
  text-decoration: none; transition: color var(--sh-t-fast) var(--sh-ease);
}
.mk-footer-col a:hover { color: var(--sh-accent); }
.mk-footer-family { display: grid; gap: 6px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--sh-line); }
.mk-footer-family-label { color: var(--sh-ink-4); font-size: 10px; font-weight: 650; letter-spacing: .09em; text-transform: uppercase; }
.mk-footer-family a { width: fit-content; color: var(--sh-ink-3); font-size: 12.5px; line-height: 1.45; text-decoration: none; transition: color var(--sh-t-fast) var(--sh-ease); }
.mk-footer-family a:hover { color: var(--sh-ink); }
.mk-footer-bottom {
  display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  margin-top: clamp(40px, 5vw, 64px); padding-top: 26px; border-top: 1px solid var(--sh-line);
}
.mk-footer-bottom .legal { display: flex; flex-wrap: wrap; gap: 18px; }
.mk-footer-bottom .legal a { font-size: 13px; color: var(--sh-ink-3); text-decoration: none; }
.mk-footer-bottom .legal a:hover { color: var(--sh-ink); }
/* the consent control is a <button> so it can open the panel, but it sits in a
   row of links and must read as one of them, not as a control */
.mk-footer-bottom .legal .sc-privacy-link {
  border: 0; background: none; padding: 0; cursor: pointer;
  font-family: var(--sh-sans); font-size: 13px; font-weight: 400;
  color: var(--sh-ink-3); letter-spacing: inherit;
}
.mk-footer-bottom .legal .sc-privacy-link:hover { color: var(--sh-ink); }
.mk-footer-bottom .copy { font-size: 13px; color: var(--sh-ink-4); }
@media (max-width: 900px) { .mk-footer-grid { grid-template-columns: 1fr 1fr 1fr; } .mk-footer-brand { grid-column: 1 / -1; } }
@media (max-width: 560px) { .mk-footer-grid { grid-template-columns: 1fr 1fr; } }

/* ------------------------------------------------------------
   FOCUS — one clean indicator, never stacked rings
   ------------------------------------------------------------ */
.mk-nav :where(a, button):focus-visible,
.mk-footer :where(a, button):focus-visible,
.sh-btn:focus-visible {
  outline: 2px solid var(--sh-accent);
  outline-offset: 3px;
  border-radius: var(--sh-r-sm);
}

@media (prefers-reduced-motion: reduce) {
  .mk-mega, .mk-nav-bar, .mk-nav-sheet, .sh-btn, .mk-nav-link .caret { transition: none; }
}

/* ---- _content-system.css ---- */
/* ============================================================
   STELAAH CONTENT SYSTEM
   Shared, product-led presentation for public articles, guides,
   resources, comparisons, templates and tools.

   Scope is explicit through data-content-family on <body>. Core
   marketing, feature, solution, Aria, pricing and legal pages do
   not receive this marker and therefore cannot inherit this layer.
   ============================================================ */

body[data-content-family] {
  --cs-wide: 1180px;
  --cs-prose: 760px;
  --cs-rail: 216px;
  --cs-gutter: clamp(20px, 4vw, 40px);
  --cs-hero-y: clamp(52px, 7vw, 80px);
  --cs-section-y: clamp(56px, 7vw, 88px);
  --cs-section-tight: clamp(40px, 5vw, 64px);
  --cs-gap: 24px;
  --cs-gap-wide: 48px;
  --cs-title: clamp(36px, 4.6vw, 56px);
  --cs-section-title: clamp(28px, 3.2vw, 40px);
  --cs-card-title: clamp(20px, 2vw, 26px);
  --cs-control: 48px;
  --cs-control-radius: 8px;
  --cs-card-radius: 14px;
  --cs-panel-radius: 20px;
  --cs-paper: var(--sh-paper);
  --cs-surface: var(--sh-surface);
  --cs-sunken: var(--sh-sunken);
  --cs-ink: var(--sh-ink);
  --cs-muted: var(--sh-ink-2);
  --cs-faint: var(--sh-ink-3);
  --cs-line: var(--sh-line);
  --cs-line-soft: var(--sh-line-soft);
  --cs-accent: var(--sh-accent);
  overflow-x: clip;
  background: var(--cs-paper);
  color: var(--cs-ink);
  font-family: var(--sh-sans);
}

body[data-content-family] main {
  min-width: 0;
}

body[data-content-family] main :where(img, video, iframe, pre, table) {
  max-width: 100%;
}

body[data-content-family] main :where(p, li, dd, td, th, a) {
  overflow-wrap: anywhere;
}

/* One frame for every content family. */
body[data-content-family] :where(
  .ip-shell,
  .se-shell,
  .at-shell,
  .pl-shell,
  .ct-shell,
  .fw-shell,
  .fw-post-shell,
  .g-shell,
  .ref-shell
) {
  width: 100%;
  max-width: var(--cs-wide);
  margin-inline: auto;
  padding-inline: var(--cs-gutter);
}

body[data-content-family] .ai-reference .ref-main {
  width: 100%;
  max-width: var(--cs-wide);
  margin-inline: auto;
  padding: var(--cs-section-tight) var(--cs-gutter) var(--cs-section-y);
}

/* Breadcrumbs remain semantic links, with one quiet visual treatment. */
body[data-content-family] :where(
  .ip-crumb,
  .se-crumb,
  .at-crumb,
  .pl-crumb,
  .ct-crumb,
  .rs-crumb,
  .fp-crumb,
  .ac-crumb,
  .fw-post-back
) {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--cs-faint);
  font: 500 13px/1.45 var(--sh-sans);
  letter-spacing: 0;
  text-transform: none;
}

body[data-content-family] :where(
  .ip-crumb,
  .se-crumb,
  .at-crumb,
  .pl-crumb,
  .ct-crumb,
  .rs-crumb,
  .fp-crumb,
  .ac-crumb
) a {
  color: var(--cs-muted);
  text-decoration: none;
}

body[data-content-family] :where(
  .ip-crumb,
  .se-crumb,
  .at-crumb,
  .pl-crumb,
  .ct-crumb,
  .rs-crumb,
  .fp-crumb,
  .ac-crumb
) a:hover {
  color: var(--cs-ink);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Content headers are deliberately shorter than conversion heroes. */
body[data-content-family] :where(
  .ip-hero,
  .ip-article-hero,
  .se-hero,
  .se-article-hero,
  .se-template-hero,
  .at-hero,
  .at-library-hero,
  .pl-hero,
  .pl-library-hero,
  .pl-premium-hero,
  .ct-library-hero,
  .ct-tool-hero,
  .fw-hero,
  .g-hero,
  .rs-hero,
  .rs-detail-hero
) {
  min-height: 0;
  padding-block: var(--cs-hero-y);
}

body[data-content-family] :where(
  .ip-hero,
  .ip-article-hero,
  .se-hero,
  .se-article-hero,
  .se-template-hero,
  .at-hero,
  .at-library-hero,
  .pl-hero,
  .pl-library-hero,
  .pl-premium-hero,
  .ct-library-hero,
  .ct-tool-hero,
  .fw-hero,
  .g-hero,
  .rs-hero,
  .rs-detail-hero
) h1,
body[data-content-family="article"] main > .mk-section:first-of-type .mk-h1 {
  max-width: 920px;
  margin: 16px 0 20px;
  color: var(--cs-ink);
  font-family: var(--sh-sans) !important;
  font-size: var(--cs-title) !important;
  font-weight: 600;
  letter-spacing: -.034em;
  line-height: 1.06;
  text-wrap: balance;
}

body[data-content-family] :where(
  .ip-dek,
  .se-dek,
  .ref-lede,
  .pl-hero-copy,
  .ct-library-hero > div > p,
  .fw-hero-intro,
  .g-intro,
  .rs-hero-copy > p,
  .rs-detail-hero .mk-container > p
) {
  max-width: 720px;
  margin: 0;
  color: var(--cs-muted);
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.58;
  text-wrap: pretty;
}

body[data-content-family] :where(
  .ip-section,
  .se-section,
  .at-tool-section,
  .at-use,
  .at-related,
  .pl-section,
  .pl-library-section,
  .ct-section,
  .fw-library
) {
  padding-block: var(--cs-section-y);
}

body[data-content-family] :where(
  .ip-section,
  .se-section,
  .at-tool-section,
  .at-related,
  .pl-section,
  .ct-section
) h2,
body[data-content-family] :where(.fw-library-head, .g-group, .rs-library-head) h2 {
  font-family: var(--sh-sans) !important;
  font-size: var(--cs-section-title);
  font-weight: 600;
  letter-spacing: -.026em;
  line-height: 1.14;
}

/* Long-form reading shells. */
body[data-content-family] :where(.ip-article-grid, .se-article-grid, .fw-post-layout) {
  display: grid;
  grid-template-columns: var(--cs-rail) minmax(0, var(--cs-prose));
  justify-content: center;
  gap: var(--cs-gap-wide);
  align-items: start;
  padding-block: var(--cs-section-y);
}

body[data-content-family="article"] .art-layout {
  display: grid;
  grid-template-columns: var(--cs-rail) minmax(0, var(--cs-prose));
  justify-content: center;
  gap: var(--cs-gap-wide);
  align-items: start;
}

body[data-content-family] :where(.ip-toc, .se-toc, .fw-toc, .art-toc) {
  position: sticky;
  top: 96px;
  align-self: start;
  max-height: calc(100vh - 120px);
  overflow: auto;
  padding: 16px 0;
  border-top: 1px solid var(--cs-line);
  border-bottom: 1px solid var(--cs-line-soft);
}

body[data-content-family] :where(.ip-toc, .se-toc, .fw-toc, .art-toc) a {
  display: block;
  padding: 8px 0;
  color: var(--cs-faint);
  font-size: 13px;
  line-height: 1.4;
  text-decoration: none;
}

body[data-content-family] :where(.ip-toc, .se-toc, .fw-toc, .art-toc) a:hover,
body[data-content-family] :where(.ip-toc, .se-toc, .fw-toc, .art-toc) a[aria-current="true"] {
  color: var(--cs-ink);
}

body[data-content-family] :where(.ip-prose, .se-prose, .fw-post-body, .mk-prose) {
  min-width: 0;
  max-width: var(--cs-prose);
  color: var(--cs-muted);
  font-size: 17px;
  line-height: 1.72;
}

body[data-content-family] :where(.ip-prose, .se-prose, .fw-post-body, .mk-prose) h2 {
  margin: 48px 0 16px;
  color: var(--cs-ink);
  font-family: var(--sh-sans) !important;
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 600;
  letter-spacing: -.024em;
  line-height: 1.16;
}

body[data-content-family] :where(.ip-prose, .se-prose, .fw-post-body, .mk-prose) h3 {
  margin: 32px 0 12px;
  color: var(--cs-ink);
  font-family: var(--sh-sans) !important;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.28;
}

body[data-content-family] :where(.ip-prose, .se-prose, .fw-post-body, .mk-prose) :where(p, ul, ol, blockquote, pre, table) {
  margin-block: 0 24px;
}

body[data-content-family] :where(.ip-prose, .se-prose, .fw-post-body, .mk-prose) :where(a) {
  color: var(--cs-ink);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

body[data-content-family] :where(.ip-prose, .se-prose, .fw-post-body, .mk-prose, .ref-main) :where(pre, code) {
  font-family: var(--sh-mono);
}

body[data-content-family] :where(.ip-prose, .se-prose, .fw-post-body, .mk-prose, .ref-main) pre {
  overflow-x: auto;
  padding: 20px;
  border: 1px solid var(--cs-line);
  border-radius: var(--cs-card-radius);
  background: var(--cs-sunken);
  font-size: 14px;
  line-height: 1.55;
}

body[data-content-family] :where(.ip-prose, .se-prose, .fw-post-body, .mk-prose, .ref-main) table {
  display: block;
  width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: 14px;
}

body[data-content-family] :where(.ip-prose, .se-prose, .fw-post-body, .mk-prose, .ref-main) :where(th, td) {
  min-width: 152px;
  padding: 16px;
  border-bottom: 1px solid var(--cs-line);
  text-align: left;
  vertical-align: top;
}

body[data-content-family] :where(.ip-prose, .se-prose, .fw-post-body, .mk-prose, .ref-main) th {
  color: var(--cs-ink);
  background: var(--cs-sunken);
  font-weight: 600;
}

/* Indexes use a small related card family, not disconnected dashboard tiles. */
body[data-content-family] :where(
  .ip-card-grid,
  .se-card-grid,
  .se-template-grid,
  .ct-hub-grid,
  .at-related-grid,
  .pl-library-grid,
  .rs-grid,
  .fw-signal-list
) {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--cs-gap);
  border: 0;
}

body[data-content-family] :where(
  .ip-index-card,
  .se-template-card,
  .ct-hub-card,
  .at-related-grid > a,
  .pl-card,
  .rs-card,
  .fw-signal
) {
  min-height: 0;
  padding: 24px 0;
  border: 0;
  border-top: 1px solid var(--cs-line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
}

body[data-content-family] :where(
  .ip-index-card,
  .se-template-card,
  .ct-hub-card,
  .at-related-grid > a,
  .pl-card,
  .rs-card,
  .fw-signal
):hover {
  background: var(--cs-sunken);
  box-shadow: none;
  transform: none;
}

body[data-content-family] :where(
  .ip-index-card,
  .se-template-card,
  .ct-hub-card,
  .at-related-grid > a,
  .pl-card,
  .rs-card
) h2,
body[data-content-family] :where(.ip-index-card, .se-template-card, .ct-hub-card, .at-related-grid > a, .pl-card, .rs-card) h3 {
  margin: 12px 0;
  font-family: var(--sh-sans) !important;
  font-size: var(--cs-card-title);
  font-weight: 600;
  letter-spacing: -.018em;
  line-height: 1.22;
}

/* Tools remain the strongest surface on their pages. */
body[data-content-family^="tool"] :where(.ip-calc-grid, .se-tool-grid) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, .82fr);
  gap: var(--cs-gap-wide);
  align-items: start;
}

body[data-content-family^="tool"] :where(.ip-calc, .se-tool-form, .se-tool-result, .ct-workspace, .at-workspace) {
  border-color: var(--cs-line);
  border-radius: var(--cs-panel-radius);
  background: var(--cs-surface);
  box-shadow: 0 16px 40px rgba(32, 33, 36, .06);
}

body[data-content-family^="tool"] :where(.ip-calc, .se-tool-form, .se-tool-result) {
  padding: 32px;
}

body[data-content-family] :where(
  .ip-calc,
  .se-tool-form,
  .se-template,
  .at-setup,
  .ct-workspace,
  .pl-workspace
) :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), textarea) {
  width: 100%;
  min-height: var(--cs-control);
  border: 1px solid var(--cs-line);
  border-radius: var(--cs-control-radius);
  background: var(--cs-surface);
  padding: 12px 16px;
  color: var(--cs-ink);
  box-shadow: none;
}

body[data-content-family] :where(
  .ip-calc,
  .se-tool-form,
  .se-template,
  .at-setup,
  .ct-workspace,
  .pl-workspace
) :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), textarea):focus {
  border-color: var(--cs-accent);
  outline: 0;
  box-shadow: none;
}

body[data-content-family] :where(.ip-button, .se-button, .at-button, .pl-button, .ct-button) {
  min-height: 44px;
  border-radius: var(--cs-control-radius);
  box-shadow: none;
  transform: none;
}

body[data-content-family] :where(.ip-button, .se-button, .at-button, .pl-button, .ct-button):hover {
  box-shadow: none;
  transform: translateY(-1px);
}

/* Comparisons stay wide enough to scan and become scrollable before crushing. */
body[data-content-family^="comparison"] :where(.ip-compare, .cmp-table-wrap, .alt-table-wrap) {
  width: 100%;
  max-width: var(--cs-wide);
  overflow-x: auto;
  margin-inline: auto;
}

body[data-content-family^="comparison"] :where(.ip-compare-row, .cmp-row, .alt-row) {
  min-width: 640px;
  gap: 32px;
  padding-block: 20px;
  border-bottom: 1px solid var(--cs-line);
}

/* One restrained related-content and CTA ending across every family. */
body[data-content-family] :where(.ip-related, .se-related, .at-related, .fw-next) {
  padding-block: var(--cs-section-tight);
  border-top: 1px solid var(--cs-line);
}

body[data-content-family] :where(.ip-cta, .se-cta, .ct-cta, .at-use, .pl-final-cta, .rs-related) {
  padding-block: var(--cs-section-y);
  background: var(--cs-ink);
  color: var(--cs-surface);
}

body[data-content-family] :where(.ip-cta, .se-cta, .ct-cta, .at-use, .pl-final-cta, .rs-related) h2 {
  max-width: 760px;
  margin-inline: auto;
  font-family: var(--sh-sans) !important;
  font-size: var(--cs-section-title);
  font-weight: 600;
  letter-spacing: -.026em;
  line-height: 1.14;
}

body[data-content-family] :where(.ip-cta, .se-cta, .ct-cta, .at-use, .pl-final-cta, .rs-related) p {
  max-width: 640px;
  color: rgba(255, 255, 255, .72);
}

body[data-content-family] :where(summary, button, a, input, textarea):focus-visible {
  outline: 2px solid var(--cs-accent);
  outline-offset: 3px;
}

body[data-content-family] :where(input, textarea):focus-visible {
  outline: 0;
}

@media (max-width: 1180px) {
  body[data-content-family] :where(
    .ip-card-grid,
    .se-card-grid,
    .se-template-grid,
    .ct-hub-grid,
    .at-related-grid,
    .pl-library-grid,
    .rs-grid,
    .fw-signal-list
  ) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  body[data-content-family] :where(.ip-hero-grid, .se-hero-grid, .at-hero-grid, .pl-hero-grid, .fw-hero-grid) {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  body[data-content-family] :where(.ip-article-grid, .se-article-grid, .fw-post-layout),
  body[data-content-family="article"] .art-layout {
    grid-template-columns: minmax(0, var(--cs-prose));
  }

  body[data-content-family] :where(.ip-toc, .se-toc, .fw-toc, .art-toc) {
    position: static;
    display: flex;
    gap: 20px;
    max-height: none;
    overflow-x: auto;
    padding: 12px 0;
    white-space: nowrap;
  }

  body[data-content-family] :where(.ip-toc, .se-toc, .fw-toc, .art-toc) :where(.lbl, strong, .fw-toc-label) {
    flex: none;
    margin: 0;
    padding: 8px 0;
  }

  body[data-content-family^="tool"] :where(.ip-calc-grid, .se-tool-grid) {
    grid-template-columns: 1fr;
  }

  body[data-content-family] :where(.at-workspace, .pl-workspace) {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  body[data-content-family] {
    --cs-gutter: 20px;
    --cs-gap: 20px;
    --cs-gap-wide: 32px;
    --cs-title: clamp(34px, 10vw, 44px);
    --cs-section-title: clamp(26px, 8vw, 34px);
  }

  body[data-content-family] :where(
    .ip-card-grid,
    .se-card-grid,
    .se-template-grid,
    .ct-hub-grid,
    .at-related-grid,
    .pl-library-grid,
    .rs-grid,
    .fw-signal-list
  ) {
    grid-template-columns: minmax(0, 1fr);
  }

  body[data-content-family] :where(.ip-actions, .se-actions, .at-hero-actions, .pl-hero-actions, .ct-actions, .rs-actions) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  body[data-content-family] :where(.ip-button, .se-button, .at-button, .pl-button, .ct-button, .rs-actions .mk-btn) {
    width: 100%;
  }

  body[data-content-family^="tool"][data-content-family] main :where(button, [role="button"]) {
    min-width: 44px;
    min-height: 44px;
  }

  body[data-content-family^="tool"] :where(.ip-calc, .se-tool-form, .se-tool-result) {
    padding: 24px 20px;
    border-radius: var(--cs-card-radius);
  }

  body[data-content-family^="comparison"] :where(.ip-compare-row, .cmp-row, .alt-row) {
    min-width: 560px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-content-family] *,
  body[data-content-family] *::before,
  body[data-content-family] *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}
/* SHELL:END */