:root {
  color-scheme: light;
  --ink: #1d1d1f;
  --secondary: #424245;
  --accent: #1559c1;
  --accent-hover: #004aaf;
  --paper: #f5f5f7;
  --white: #fff;
  --line: #d2d2d7;
  --header-bg: #f5f5f7;
  --header-glass: rgba(245, 245, 247, 0.72);
  --header-ink: #1d1d1f;
  --header-muted: #424245;
  --local-bg: #fff;
  --local-glass: rgba(255, 255, 255, 0.78);
  --local-border: #d2d2d7;
  --article-tint: #eaf2ff;
  --card: #f5f5f7;
  --card-hover: #ececf0;
  --focus: #0066cc;
  --switch-blue: #0071e3;
  --switch-text: #0066cc;
  --code-key: #0b4fb0;
  --code-string: #a1300f;
  --code-literal: #8a2bb0;
  --code-punct: #6e6e73;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    color-scheme: dark;
    --ink: #f5f5f7;
    --secondary: #b8b8bd;
    --accent: #6eafff;
    --accent-hover: #a6cfff;
    --paper: #161617;
    --white: #1d1d1f;
    --line: #424245;
    --header-bg: #1d1d1f;
    --header-glass: rgba(29, 29, 31, 0.76);
    --header-ink: #f5f5f7;
    --header-muted: #c7c7cc;
    --local-bg: #161617;
    --local-glass: rgba(22, 22, 23, 0.78);
    --local-border: #49494d;
    --article-tint: #202c42;
    --card: #2a2a2d;
    --card-hover: #323236;
    --focus: #9ecbff;
    --switch-text: #2997ff;
    --code-key: #7ab8ff;
    --code-string: #f5a57f;
    --code-literal: #e3a3ff;
    --code-punct: #98989d;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #f5f5f7;
  --secondary: #b8b8bd;
  --accent: #6eafff;
  --accent-hover: #a6cfff;
  --paper: #161617;
  --white: #1d1d1f;
  --line: #424245;
  --header-bg: #1d1d1f;
  --header-glass: rgba(29, 29, 31, 0.76);
  --header-ink: #f5f5f7;
  --header-muted: #c7c7cc;
  --local-bg: #161617;
  --local-glass: rgba(22, 22, 23, 0.78);
  --local-border: #49494d;
  --article-tint: #202c42;
  --card: #2a2a2d;
  --card-hover: #323236;
  --focus: #9ecbff;
  --switch-text: #2997ff;
  --code-key: #7ab8ff;
  --code-string: #f5a57f;
  --code-literal: #e3a3ff;
  --code-punct: #98989d;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif; font-size: 19px; line-height: 1.5; letter-spacing: normal; font-synthesis: none; font-kerning: normal; -webkit-font-smoothing: antialiased; }
h1, h2, h3, p { margin-top: 0; letter-spacing: normal; }
h1, h2, h3 { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial, sans-serif; font-weight: 600; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent-hover); }
a:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; border-radius: 4px; }
.site-container { width: min(calc(100% - 48px), 1120px); margin-inline: auto; }
.skip-link { position: fixed; top: -100px; left: 16px; z-index: 10; padding: 12px 18px; background: var(--ink); color: var(--white); font-size: 18px; }
.skip-link:focus { top: 12px; color: var(--white); }
.site-header { position: sticky; top: 0; z-index: 6; background: var(--header-bg); color: var(--header-ink); }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header { background: var(--header-glass); -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px); }
}
.global-nav { min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
/* The homepage hero already shows Cue's mascot, so its header drops the brand and centers the links. */
.global-nav--centered { justify-content: center; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 600; line-height: 1.2; }
.brand img { display: block; width: 32px; height: 32px; border-radius: 22%; }
.site-header .brand { gap: 8px; font-size: 17px; }
.site-header .brand img { width: 24px; height: 24px; }
.global-links { display: flex; align-items: center; gap: clamp(18px, 3vw, 36px); font-size: 12px; font-weight: 400; }
.global-links a { display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap; }
.global-links a { color: var(--header-muted); }
.global-links a[aria-current], .site-header a:hover { color: var(--header-ink); }
.site-header a:focus-visible, .local-nav a:focus-visible { outline-color: var(--focus); }
.site-header--image { background: transparent; color: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
.site-header--image .global-links a { color: rgb(255 255 255 / 0.82); }
.site-header--image .global-links a[aria-current], .site-header--image a:hover { color: #fff; }
.site-header--image a:focus-visible { outline-color: #fff; }
.home .site-header--image { color: #1d1d1f; }
.home .site-header--image .global-links a { color: rgb(29 29 31 / 0.82); }
.home .site-header--image .global-links a[aria-current], .home .site-header--image a:hover { color: #1d1d1f; }
.home .site-header--image a:focus-visible { outline-color: #1d1d1f; }
/* Once the hero scrolls away, the image header becomes the same translucent bar as every other page. */
.site-header--image.is-scrolled { background: var(--header-bg); color: var(--header-ink); }
.site-header--image.is-scrolled .global-links a { color: var(--header-muted); }
.site-header--image.is-scrolled .global-links a[aria-current], .site-header--image.is-scrolled a:hover { color: var(--header-ink); }
.site-header--image.is-scrolled a:focus-visible { outline-color: var(--focus); }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header--image.is-scrolled { background: var(--header-glass); -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px); }
}
.hero { position: relative; overflow: hidden; background-color: #b6d7f8; background-image: url("/images/backgrounds/world.png"); background-position: center; background-size: cover; background-repeat: no-repeat; padding: clamp(72px, 9vw, 128px) 0 clamp(88px, 11vw, 144px); color: #1d1d1f; }
.home .hero { display: flex; align-items: center; justify-content: center; min-height: 100svh; margin-top: -44px; padding: calc(44px + clamp(24px, 4svh, 48px)) 0 clamp(24px, 4svh, 48px); }
.hero-inner { position: relative; text-align: center; }
.hero-mascot { position: relative; display: block; width: clamp(176px, 19vw, 240px); aspect-ratio: 192 / 208; margin: 0 auto 24px; padding: 0; border: 0; background: none; color: inherit; cursor: default; }
.hero-mascot:focus-visible { outline: none; }
.hero-mascot-fallback, .hero-mascot-sprite { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.hero-mascot-sprite { opacity: 0; }
.hero-mascot.is-ready .hero-mascot-fallback { visibility: hidden; }
.hero-mascot.is-ready .hero-mascot-sprite { opacity: 1; }
.hero-mascot:focus-visible :is(.hero-mascot-fallback, .hero-mascot-sprite) { filter: drop-shadow(0 0 5px #003d78) drop-shadow(0 0 8px #fff); }
h1 { max-width: 850px; margin: 0 auto 24px; font-size: clamp(48px, 6vw, 76px); line-height: 1.1; }
.hero p { max-width: 680px; margin: 0 auto 25px; color: #1d1d1f; font-size: clamp(22px, 2.4vw, 26px); line-height: 1.42; }
.hero .text-link { color: #003d78; text-decoration: underline; text-underline-offset: 4px; }
.hero .text-link:hover { color: #002c59; text-decoration-thickness: 2px; }
.hero .text-link:focus-visible { outline-color: #003d78; }
:root[data-theme="dark"] .hero { background-color: #0b174b; background-image: url("/images/backgrounds/world-dark.png"); color: #fff; }
:root[data-theme="dark"] .hero p { color: #fff; }
:root[data-theme="dark"] .hero .text-link { color: #d9ecff; }
:root[data-theme="dark"] .hero .text-link:hover { color: #fff; }
:root[data-theme="dark"] .hero .text-link:focus-visible { outline-color: #fff; }
:root[data-theme="dark"] .home .site-header--image:not(.is-scrolled) { color: #fff; }
:root[data-theme="dark"] .home .site-header--image:not(.is-scrolled) .global-links a { color: rgb(255 255 255 / 0.82); }
:root[data-theme="dark"] .home .site-header--image:not(.is-scrolled) .global-links a[aria-current],
:root[data-theme="dark"] .home .site-header--image:not(.is-scrolled) a:hover { color: #fff; }
:root[data-theme="dark"] .home .site-header--image:not(.is-scrolled) a:focus-visible { outline-color: #fff; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) .hero { background-color: #0b174b; background-image: url("/images/backgrounds/world-dark.png"); color: #fff; }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .hero p { color: #fff; }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .hero .text-link { color: #d9ecff; }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .hero .text-link:hover { color: #fff; }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .hero .text-link:focus-visible { outline-color: #fff; }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .home .site-header--image:not(.is-scrolled) { color: #fff; }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .home .site-header--image:not(.is-scrolled) .global-links a { color: rgb(255 255 255 / 0.82); }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .home .site-header--image:not(.is-scrolled) .global-links a[aria-current],
  :root:not([data-theme="light"]):not([data-theme="dark"]) .home .site-header--image:not(.is-scrolled) a:hover { color: #fff; }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .home .site-header--image:not(.is-scrolled) a:focus-visible { outline-color: #fff; }
}
.text-link { display: inline-flex; align-items: baseline; gap: 9px; color: var(--accent); font-size: 20px; font-weight: 650; }
.text-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.section { padding: clamp(80px, 9vw, 128px) 0; }
.workflow, .personalize { background: var(--white); }
.capabilities { background: var(--paper); }
.section-intro { margin-bottom: 54px; text-wrap: balance; }
h2 { margin-bottom: 20px; font-size: clamp(38px, 4.2vw, 56px); line-height: 1.16; }
.section-intro p { margin-bottom: 0; color: var(--secondary); font-size: 22px; line-height: 1.45; }
.workflow-list { border-top: 1px solid var(--line); }
.workflow-row { display: grid; grid-template-columns: 80px minmax(220px, 0.9fr) minmax(360px, 1.2fr); gap: 28px; align-items: start; padding: 36px 0; border-bottom: 1px solid var(--line); }
.step-number { color: var(--accent); font-size: 20px; font-weight: 600; line-height: 1.4; }
h3 { font-size: clamp(26px, 2.7vw, 32px); line-height: 1.23; }
.workflow-row h3 { margin-bottom: 0; }
.workflow-row p, .capability p, .split-section p { margin-bottom: 0; color: var(--secondary); font-size: 19px; line-height: 1.56; }
.workflow-row p { max-width: 530px; }
.capability-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 80px; row-gap: 56px; }
.capability { border-top: 1px solid var(--line); padding-top: 26px; }
.capability h3 { margin-bottom: 14px; }
.capability p { max-width: 480px; }
.section-link { margin-top: 52px; }
.split-section { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: start; }
.split-section h2 { max-width: 470px; margin-bottom: 0; }
.split-section p { max-width: 530px; font-size: 21px; }
.site-footer { background: var(--header-bg); }
.footer-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; padding-top: 74px; padding-bottom: 70px; }
.footer-about p { max-width: 320px; margin: 20px 0 0; color: var(--secondary); font-size: 19px; }
.footer-about .theme-switch { margin-top: 24px; }
.footer-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px; }
.footer-links h2 { margin-bottom: 18px; font-size: 22px; line-height: 1.25; }
.footer-links a { display: block; width: fit-content; margin-top: 14px; color: var(--secondary); font-size: 18px; }
.footer-links a:hover { color: var(--accent-hover); text-decoration: underline; text-underline-offset: 4px; }
.theme-switch { display: inline-flex; align-items: center; width: 130px; height: 24px; padding: 1px; border: 1px solid var(--switch-blue); border-radius: 999px; }
.theme-switch label { position: relative; display: inline-flex; flex: 1; align-items: center; justify-content: center; min-width: 0; height: 20px; border-radius: 999px; color: var(--switch-text); font-size: 12px; line-height: 1; white-space: nowrap; cursor: pointer; }
.theme-switch input { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); }
.theme-switch label:hover { background: color-mix(in srgb, var(--switch-blue) 12%, transparent); }
.theme-switch label:has(input:checked), .theme-switch label:has(input:checked):hover { background: var(--switch-blue); color: #fff; }
.theme-switch label:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }

/* A live HTML illustration of the Mac window; its type and controls follow the app scale. */
.app-preview { background: var(--white); }
.app-preview-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 620px); gap: clamp(44px, 6vw, 88px); align-items: center; }
.app-preview-copy h2 { max-width: 450px; }
.app-preview-copy > p { max-width: 420px; color: var(--secondary); font-size: 21px; line-height: 1.5; }
.preview-tabs { display: flex; width: fit-content; gap: 6px; margin-top: 34px; padding: 5px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 8%, var(--white)); }
.preview-tab { min-height: 42px; padding: 7px 18px; border: 0; border-radius: 999px; background: none; color: var(--ink); font: inherit; font-size: 17px; font-weight: 600; cursor: pointer; }
.preview-tab.is-active { background: var(--white); box-shadow: 0 1px 5px rgb(0 0 0 / 0.12); }
.preview-tab:not(.is-active):hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.preview-tab:focus-visible, .preview-scenario:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.preview-scenarios { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.preview-scenario { padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--secondary); font: inherit; font-size: 16px; cursor: pointer; }
.preview-scenario:hover, .preview-scenario.is-active { border-color: var(--accent); color: var(--accent); }
.app-preview-copy > .preview-note { margin-top: 26px; margin-bottom: 0; color: var(--secondary); font-size: 18px; line-height: 1.5; }
.app-preview-stage { position: relative; z-index: 1; min-width: 0; }
.preview-symbols { position: absolute; width: 0; height: 0; overflow: hidden; }
.cue-window { width: 100%; height: 650px; overflow: hidden; border: 1px solid #434650; border-radius: 16px; background: #22252d; box-shadow: 0 28px 70px rgb(12 18 35 / 0.22), 0 2px 8px rgb(12 18 35 / 0.1); font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif; font-size: 16px; line-height: 1.3; }
.cue-window [hidden], .app-preview [hidden] { display: none !important; }
.cue-window-header { display: flex; align-items: center; height: 32px; padding: 0 15px 0 8.5px; border-bottom: 1px solid rgb(255 255 255 / 0.1); background: #252830; color: #e2e3e9; white-space: nowrap; }
.window-lights { display: flex; flex: 0 0 70px; align-items: center; gap: 9px; }
.window-lights span { width: 14px; height: 14px; border: 1px solid rgb(255 255 255 / 0.15); border-radius: 50%; box-shadow: inset 0 1px 2px rgb(255 255 255 / 0.4); }
.window-lights span:nth-child(1) { background: #ff6057; }
.window-lights span:nth-child(2) { background: #ffbd2e; }
.window-lights span:nth-child(3) { background: #28c840; }
.window-provider, .window-character, .window-folder, .window-actions { display: flex; align-items: center; min-width: 0; }
.window-provider { flex: 0 0 155px; gap: 5px; font-size: 13px; font-weight: 700; }
.window-provider img { flex: none; object-fit: contain; }
.window-provider > svg, .window-character > svg { width: 13px; height: 13px; margin-left: 2px; color: #a4a6ae; }
.window-character { flex: 0 0 105px; gap: 3px; font-size: 13px; }
.window-folder { flex: 1 1 auto; gap: 10px; overflow: hidden; color: #aaacb4; font-size: 13px; }
.window-folder span { overflow: hidden; text-overflow: ellipsis; }
.window-folder img { width: 16px; height: 16px; flex: none; object-fit: contain; }
.window-actions { flex: none; gap: 15px; margin-left: 12px; color: #aaacb4; }
.window-actions svg { width: 17px; height: 17px; }
.cue-window svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cue-window-body { position: relative; height: calc(100% - 32px); background: linear-gradient(rgb(12 18 34 / 0.22), rgb(12 18 34 / 0.22)), url("/images/backgrounds/world.png") center / cover no-repeat; }
.preview-screen { position: absolute; inset: 0 0 72px; overflow: hidden; }
.preview-suggestions { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; }
.preview-suggestion-group { width: 100%; min-width: 0; }
.preview-suggestion-group h3 { margin: 0 18px 26px; color: #103f52; font-size: 20px; font-weight: 400; line-height: 1.25; text-align: center; }
.preview-card-viewport { width: 100%; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; }
.preview-card-viewport::-webkit-scrollbar { display: none; }
.preview-card-track { display: flex; width: max-content; gap: 14px; padding: 0 max(40px, calc((620px - 500px) / 2)); }
.preview-card { display: flex; flex: 0 0 min(500px, calc(100vw - 120px)); width: 500px; min-height: 155px; gap: 11px; padding: 16px; border: 0; border-radius: 16px; color: #fff; font: inherit; text-align: left; scroll-snap-align: center; cursor: pointer; }
.preview-card--orange { background: linear-gradient(110deg, #654b43, #45393c); }
.preview-card--purple { background: linear-gradient(110deg, #664054, #423a4f); }
.preview-card--teal { background: linear-gradient(110deg, #305b60, #31434a); }
.preview-card:hover { filter: brightness(1.08); }
.preview-card:focus-visible, .preview-card-controls button:focus-visible { outline: 3px solid #fff; outline-offset: -5px; }
.preview-avatar { display: flex; flex: none; align-items: center; justify-content: center; width: 38px; height: 38px; gap: 4px; border-radius: 10px; transform: translateY(1px); }
.preview-avatar--orange { background: #ff7817; }
.preview-avatar--purple { background: #a263ec; border-radius: 50%; }
.preview-avatar--teal { background: #4ac4aa; border-radius: 13px; }
.preview-avatar span { width: 5px; height: 10px; border-radius: 4px; background: #17212b; transform: rotate(-23deg); }
.preview-card-text { display: flex; flex: 1; flex-direction: column; gap: 5px; min-width: 0; }
.preview-card-text strong { font-size: 16px; font-weight: 650; line-height: 1.2; }
.preview-card-text > span { color: #edf5f7; font-size: 13px; line-height: 1.35; }
.preview-card-text small { color: #d4e2e5; font-size: 11px; font-weight: 500; }
.preview-card-more { flex: none; align-self: flex-start; margin-top: -2px; font-size: 18px; line-height: 1; }
.preview-card-controls { display: flex; justify-content: flex-end; gap: 8px; height: 36px; margin: 8px max(44px, calc((100% - 500px) / 2)) 0; }
.preview-card-controls button { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #103f52; cursor: pointer; }
.preview-card-controls button:hover { background: rgb(255 255 255 / 0.3); }
.preview-card-controls button:disabled { cursor: default; opacity: 0.45; }
.preview-card-controls svg { width: 16px; height: 16px; }
.preview-history-link { display: flex; align-items: center; justify-content: center; gap: 9px; margin-top: 2px; color: #28556a; font-size: 13px; }
.preview-history-link svg { width: 16px; height: 16px; }
.preview-messages { display: flex; flex-direction: column; justify-content: flex-end; }
.preview-transcript { display: flex; flex-direction: column; gap: 16px; width: 100%; max-height: 100%; overflow-y: auto; padding: 18px 26px 8px; scrollbar-width: thin; }
.preview-message { max-width: 82%; padding: 12px 14px; border-radius: 18px; font-size: 20px; line-height: 1.4; }
.preview-message p { margin: 0; }
.preview-message p + p { margin-top: 14px; }
.preview-message--user { align-self: flex-end; background: #1f6be0; color: #fff; }
.preview-message--assistant { align-self: flex-start; background: rgb(46 49 56 / 0.96); color: #e2e3e9; }
.preview-message strong { font-weight: 650; }
.preview-attachment { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding: 10px; border: 1px solid rgb(255 255 255 / 0.08); border-radius: 12px; background: rgb(255 255 255 / 0.04); font-size: 13px; }
.preview-attachment-icon { display: block; flex: none; width: 28px; height: 28px; object-fit: contain; }
.preview-attachment-name { display: flex; flex-direction: column; min-width: 0; font-weight: 600; }
.preview-attachment-name small { color: #afb2ba; font-size: 11px; font-weight: 400; }
.preview-composer { position: absolute; right: 16px; bottom: 14px; left: 16px; display: flex; align-items: center; height: 47px; padding: 0 17px; border: 1px solid rgb(77 121 211 / 0.75); border-radius: 22px; background: rgb(35 65 123 / 0.6); box-shadow: 0 4px 10px rgb(0 0 0 / 0.15), inset 0 1px 1px rgb(255 255 255 / 0.14); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); color: #c5cbe1; font-size: 20px; }
.preview-composer span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.preview-composer.has-draft { color: #fff; }

@media (max-width: 1100px) {
  .app-preview-layout { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .app-preview-copy { width: min(100%, 620px); }
  .app-preview-copy h2, .app-preview-copy > p { max-width: 620px; }
  .app-preview-stage { width: min(100%, 620px); }
}
@media (max-width: 680px) {
  .app-preview-copy > p { font-size: 19px; }
  .cue-window { height: 560px; }
  .cue-window-header { padding-right: 10px; }
  .window-lights { flex-basis: 58px; gap: 5px; }
  .window-lights span { width: 12px; height: 12px; }
  .window-provider { flex-basis: 126px; font-size: 12px; }
  .window-character { flex-basis: 60px; font-size: 12px; }
  .window-folder { display: none; }
  .window-actions { gap: 9px; margin-left: auto; }
  .window-actions svg { width: 15px; height: 15px; }
  .preview-card-track { padding-inline: 40px; }
  .preview-card { flex-basis: min(500px, calc(100vw - 116px)); width: min(500px, calc(100vw - 116px)); min-height: 174px; padding: 13px; }
  .preview-card-text strong { font-size: 14px; }
  .preview-card-text > span { font-size: 12px; }
  .preview-card-text small { font-size: 10px; }
  .preview-avatar { width: 32px; height: 32px; }
  .preview-message { font-size: 16px; }
  .preview-transcript { padding-inline: 14px; }
  .preview-composer { font-size: 17px; }
}
@media (max-width: 420px) {
  .window-provider { flex-basis: 114px; }
  .window-character { flex-basis: 45px; }
  .window-actions svg:first-child { display: none; }
  .preview-card { flex-basis: calc(100vw - 104px); width: calc(100vw - 104px); }
  .preview-card-track { padding-inline: 34px; }
}

/* Homepage sections share one surface (the page's white) and get their structure from tiles, as on
   the provider guide. Each tile pairs a small piece of Cue's interface with a short headline, so a
   section reads as things Cue does rather than paragraphs under rules. */
.home-section { padding: clamp(72px, 8vw, 112px) 0 0; background: var(--white); }
.home-section:last-of-type { padding-bottom: clamp(80px, 9vw, 128px); }
.home-section .section-intro { margin-bottom: 40px; }
.home-icons { position: absolute; width: 0; height: 0; overflow: hidden; }
.home-section svg { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; }
.tile { --tile-ink: var(--ink); --tile-text: var(--secondary); --tile-inner: var(--white); --tile-inner-line: color-mix(in srgb, var(--ink) 9%, transparent); display: flex; flex-direction: column; justify-content: space-between; gap: 32px; min-width: 0; padding: 36px 40px 38px; overflow: hidden; border-radius: 22px; background: var(--card); color: var(--tile-text); }
.tile--span-6 { grid-column: span 6; }
.tile--span-12 { grid-column: 1 / -1; }
.tile--split { flex-direction: row; align-items: center; }
.tile--split .tile-copy { flex: 1 1 0; }
.tile--split .mini { flex: 0 1 380px; }
.tile-copy h3, .tile-title { display: block; max-width: 520px; margin: 0 0 10px; color: var(--tile-ink); font-size: clamp(23px, 2.2vw, 28px); font-weight: 600; line-height: 1.22; }
.tile-copy p { max-width: 520px; margin: 0; color: var(--tile-text); font-size: 18px; line-height: 1.5; }
.tile-copy .text-link { margin-top: 20px; font-size: 18px; }
.tile-marks { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.tile-marks img, .tile-marks .provider-icon { width: 28px; height: 28px; object-fit: contain; }

/* Accent tiles carry Cue's one brand color, the app's message-bubble blue, as a solid fill with white ink in both themes. */
.tile--accent { --tile-ink: #fff; --tile-text: rgb(255 255 255 / 0.86); --tile-inner: rgb(255 255 255 / 0.14); --tile-inner-line: rgb(255 255 255 / 0.14); background: #1f6be0; }
.tile--accent .text-link { color: #fff; text-decoration: underline; text-underline-offset: 4px; }

/* The whole provider strip is one link to the provider guide. */
.tile--link { flex-direction: row; align-items: center; gap: 40px; }
.tile--link:hover .text-link { text-decoration: underline; text-underline-offset: 4px; }
.tile--link:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.tile--link .tile-copy { flex: 1 1 0; }
.tile--link .text-link { margin-top: 6px; }
.provider-chips { display: flex; flex: 0 1 560px; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }


/* Interface vignettes follow the app's type scale, like the window reproduction above. */
.mini { color: var(--tile-ink); font-size: 15px; line-height: 1.3; }
.mini-panel { padding: 8px 16px; border-radius: 14px; background: var(--tile-inner); }
.mini-panel-title { padding: 8px 0 4px; color: var(--tile-text); font-size: 13px; font-weight: 600; }
.mini-row { display: flex; align-items: center; gap: 10px; min-height: 44px; border-top: 1px solid var(--tile-inner-line); }
.mini-panel-title + .mini-row, .mini-row:first-child { border-top: 0; }
.mini-row > small { margin-left: auto; color: var(--tile-text); font-size: 13px; white-space: nowrap; }
.mini-row code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
.mini-glyph { display: grid; flex: none; place-items: center; width: 24px; height: 24px; border-radius: 6px; color: #fff; }
.mini-glyph svg { width: 15px; height: 15px; stroke-width: 2.1; }
.mini-glyph--blue { background: linear-gradient(#3e8cff, #1f6be0); }
.mini-glyph--sky { background: linear-gradient(#5ac8fa, #2f9ee6); }
.mini-glyph--teal { background: linear-gradient(#40c8b4, #1b9e8c); }
.mini-glyph--amber { background: linear-gradient(#ffb340, #f08a00); }
.mini-glyph--indigo { background: linear-gradient(#7d7aff, #5856d6); }
.mini-glyph--purple { background: linear-gradient(#c17bf0, #9a4fd6); }
.mini-glyph--gray { background: linear-gradient(#a1a1a6, #7c7c80); }
.mini-switch { position: relative; flex: none; width: 34px; height: 20px; margin-left: auto; border-radius: 999px; background: color-mix(in srgb, var(--tile-ink) 18%, transparent); }
.mini-switch::after { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / 0.25); content: ""; }
.mini-switch.is-on { background: #34c759; }
.mini-switch.is-on::after { left: 16px; }

.mini-screening .mini-row { min-height: 50px; }
.mini-source { flex: none; width: 52px; color: var(--tile-text); font-size: 13px; }
.mini-status { display: inline-flex; flex: none; align-items: center; gap: 4px; margin-left: auto; padding: 3px 9px 3px 6px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.mini-status svg { width: 13px; height: 13px; stroke-width: 2.4; }
.mini-status--kept { background: rgb(52 199 89 / 0.16); color: #1c7c3a; }
.mini-status--out { background: rgb(255 69 58 / 0.14); color: #c4271c; }
.is-left-out { color: var(--tile-text); }
.mini-struck { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--tile-text) 60%, transparent); }
:root[data-theme="dark"] .mini-status--kept { color: #6fe08f; }
:root[data-theme="dark"] .mini-status--out { color: #ff8a80; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) .mini-status--kept { color: #6fe08f; }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .mini-status--out { color: #ff8a80; }
}

.mini-options .mini-row { min-height: 64px; }
.mini-options img { flex: none; object-fit: contain; }
.mini-radio { flex: none; width: 18px; height: 18px; border: 1.5px solid color-mix(in srgb, var(--tile-ink) 35%, transparent); border-radius: 50%; }
.is-selected .mini-radio { border: 5px solid #1f6be0; }
.mini-option-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mini-option-text strong { font-weight: 600; }
.mini-option-text span { overflow: hidden; color: var(--tile-text); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }

.doc-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.doc-cell { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 6px 12px; border-radius: 14px; background: var(--tile-inner); color: var(--tile-ink); font-size: 13px; font-weight: 500; }
.doc-cell img { width: 48px; height: 48px; object-fit: contain; }
.doc-html { display: grid; place-items: center; width: 44px; height: 44px; margin: 2px; border-radius: 11px; background: linear-gradient(#5e6b7d, #3a4452); color: #fff; }
.doc-html svg { width: 26px; height: 26px; stroke-width: 2.2; }
.tile-app-icon { display: block; width: 104px; height: 104px; margin: -6px 0 0 -8px; }

.mini-chip { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 5px 13px 5px 10px; border-radius: 999px; background: var(--tile-inner); color: var(--tile-ink); font-size: 15px; font-weight: 500; white-space: nowrap; }
.mini-chip img, .mini-chip .provider-icon { width: 20px; height: 20px; object-fit: contain; }
.mini-chip .mini-glyph { width: 20px; height: 20px; border-radius: 5px; }
.mini-chip .mini-glyph svg { width: 13px; height: 13px; }

.mini-capture { display: flex; justify-content: flex-start; }
.mini-capture-frame { position: relative; display: flex; flex-direction: column; gap: 9px; width: min(100%, 300px); padding: 0 0 16px; overflow: hidden; border-radius: 10px; background: var(--tile-inner); outline: 2px dashed color-mix(in srgb, #1f6be0 70%, transparent); outline-offset: 6px; }
.mini-capture-bar { display: flex; gap: 6px; padding: 9px 10px; background: color-mix(in srgb, var(--tile-ink) 6%, transparent); }
.mini-capture-bar i { width: 9px; height: 9px; border-radius: 50%; background: color-mix(in srgb, var(--tile-ink) 22%, transparent); }
.mini-capture-line { height: 8px; margin: 0 16px; border-radius: 4px; background: color-mix(in srgb, var(--tile-ink) 12%, transparent); }
.mini-capture-line--short { width: 45%; }

.mini-glyph--green { background: linear-gradient(#3fd27f, #1fa45a); }
.mini-routing { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.mini-bubble { max-width: 90%; padding: 10px 14px; border-radius: 18px; background: #1f6be0; color: #fff; font-size: 15px; }
.skill-shelf { display: grid; flex: 0 1 460px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.skill-cell { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 6px 12px; border-radius: 16px; background: var(--tile-inner); color: var(--tile-ink); font-size: 14px; font-weight: 600; text-align: center; }
.skill-cell img { width: 72px; height: 72px; }
.skill-pick { display: flex; align-items: center; gap: 10px; padding: 8px 16px 8px 8px; border-radius: 16px; background: var(--tile-inner); color: var(--tile-ink); font-size: 13px; }
.skill-pick img { width: 40px; height: 40px; }
.skill-pick span { display: flex; flex-direction: column; color: var(--tile-text); }
.skill-pick strong { color: var(--tile-ink); font-size: 15px; font-weight: 600; }
.skill-share { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 104px; }
.skill-share > img { width: 36px; height: 36px; object-fit: contain; }
.skill-share .skill-share-hub { width: 80px; height: 80px; }
.skill-share-line { flex: 0 1 72px; border-top: 2px dotted color-mix(in srgb, var(--tile-ink) 30%, transparent); }
.mini-step { display: grid; flex: none; place-items: center; width: 20px; height: 20px; border-radius: 50%; }
.mini-step.is-done { background: #34c759; color: #fff; }
.mini-step.is-done svg { width: 13px; height: 13px; stroke-width: 2.6; }
.mini-step.is-working { border: 2px solid color-mix(in srgb, var(--tile-ink) 18%, transparent); border-top-color: #1f6be0; }
.mini-history img { flex: none; object-fit: contain; }

/* Characters introduce themselves: tall portrait cards that speak their greeting, as companion apps
   present a cast, then a card that opens the creator. Phones swipe through them. */
.cast { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.cast-card { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; aspect-ratio: 3 / 5; overflow: hidden; border-radius: 22px; background: #161b2f; color: #fff; isolation: isolate; }
.cast-card::after { position: absolute; z-index: -1; inset: 30% 0 0; background: linear-gradient(transparent, rgb(6 8 18 / 0.55) 35%, rgb(6 8 18 / 0.92)); content: ""; }
.cast-portrait { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform 0.4s ease; }
.cast-card:hover .cast-portrait { transform: scale(1.03); }
/* The whole card is a link: hover keeps the card's own colors and only underlines its action. */
.cast-card:hover { color: #fff; }
.tile--link:hover { color: inherit; }
.cast-card:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.cast-tags { position: absolute; top: 16px; left: 16px; display: flex; flex-wrap: wrap; gap: 6px; }
.cast-tags span { padding: 4px 10px; border-radius: 999px; background: rgb(255 255 255 / 0.2); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); color: #fff; font-size: 13px; font-weight: 600; }
.cast-body { display: flex; flex-direction: column; gap: 6px; padding: 22px; }
.cast-bubble { align-self: flex-start; margin-bottom: 12px; padding: 11px 14px; border-radius: 18px 18px 18px 6px; background: rgb(255 255 255 / 0.18); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); color: #fff; font-size: 16px; line-height: 1.38; }
.cast-name { color: inherit; font-size: 24px; font-weight: 600; line-height: 1.2; }
.cast-tagline { color: rgb(255 255 255 / 0.82); font-size: 16px; line-height: 1.4; }
.cast-action { margin-top: 10px; color: #fff; font-size: 16px; font-weight: 600; }
.cast-card:hover .cast-action { text-decoration: underline; text-underline-offset: 4px; }
.cast-card--create { background: #1f6be0; color: #fff; }
.cast-card--create::after { display: none; }
.cast-card--create .cast-tagline { color: rgb(255 255 255 / 0.86); }
.cast-glyphs { display: grid; flex: 1; grid-template-columns: repeat(2, 1fr); place-items: center; gap: 4px; padding: 28px 28px 0; }
.cast-glyphs img { width: 100%; max-width: 104px; height: auto; transition: transform 0.4s ease; }
.cast-card--create:hover .cast-glyphs img:nth-child(odd) { transform: rotate(-8deg); }
.cast-card--create:hover .cast-glyphs img:nth-child(even) { transform: rotate(8deg); }
.cast-more { margin-top: 30px; }
@media (prefers-reduced-motion: reduce) { .cast-portrait, .cast-glyphs img { transition: none; } }
@media (max-width: 1000px) {
  .cast { display: flex; gap: 14px; margin-inline: calc(50% - 50vw); padding: 0 max(24px, calc(50vw - 50%)) 6px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: max(24px, calc(50vw - 50%)); scrollbar-width: none; }
  .cast::-webkit-scrollbar { display: none; }
  .cast-card { flex: 0 0 min(300px, 76vw); scroll-snap-align: start; }
}

@media (max-width: 1000px) {
  .tile--span-6 { grid-column: 1 / -1; }
  .tile--link { flex-direction: column; align-items: flex-start; }
  .provider-chips { flex-basis: auto; justify-content: flex-start; }
}
@media (max-width: 760px) {
  .tile--split { flex-direction: column; align-items: stretch; }
  .tile--split .mini, .tile--split .skill-shelf { flex-basis: auto; }
}
@media (max-width: 680px) {
  .bento { gap: 14px; }
  .tile { gap: 26px; padding: 26px 22px 28px; border-radius: 18px; }
}
@media (max-width: 420px) {
  .mini-source { display: none; }
}

/* Interior pages use Analytical v3's article type and open reading layout. */
/* A page with a local nav pins only that: the global header scrolls away above it, as on Apple's product pages. */
.site-header:has(+ .local-nav) { position: relative; }
.local-nav { position: sticky; top: 0; z-index: 5; background: var(--local-bg); border-bottom: 1px solid var(--local-border); color: var(--ink); }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .local-nav { background: var(--local-glass); -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px); }
}
.local-nav-inner { min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 26px; }
.local-nav-title { flex: none; font-size: 21px; font-weight: 600; }
.local-nav-links { display: flex; align-items: center; gap: clamp(18px, 2.5vw, 34px); min-width: 0; overflow-x: auto; white-space: nowrap; scrollbar-width: thin; }
.local-nav-links a { position: relative; display: inline-flex; align-items: center; min-height: 51px; color: var(--secondary); font-size: 12px; font-weight: 400; }
.local-nav-links a[aria-current], .local-nav a:hover { color: var(--ink); }
.local-nav-links a[aria-current]::after { position: absolute; right: 0; bottom: 0; left: 0; height: 1px; background: currentColor; content: ""; }
.article-main { background: var(--white); }
.article-hero { background: linear-gradient(180deg, var(--article-tint) 0%, var(--white) 100%); padding: clamp(64px, 8vw, 112px) 24px 56px; text-align: center; }
.article-hero-inner { max-width: 980px; margin: 0 auto; padding-bottom: 52px; border-bottom: 1px solid var(--line); }
.article-hero h1 { max-width: 930px; margin: 0 auto; font-size: clamp(40px, 5vw, 64px); line-height: 1.08; font-weight: 600; }
.article-hero p { max-width: 740px; margin: 22px auto 0; color: var(--secondary); font-size: clamp(20px, 2.4vw, 25px); line-height: 1.4; }
.article-body { width: min(calc(100% - 48px), 760px); margin: 0 auto; padding: 24px 0 104px; color: var(--ink); }
.article-body section { margin-top: 58px; scroll-margin-top: 68px; }
.article-body section:first-child { margin-top: 0; }
.article-body h2 { margin-bottom: 20px; font-size: clamp(27px, 3vw, 34px); line-height: 1.2; font-weight: 600; }
.article-body h3 { margin-bottom: 16px; font-size: 23px; line-height: 1.25; font-weight: 600; }
.article-body p, .article-body li { color: var(--ink); font-size: 18px; line-height: 1.55; }
.article-body p { margin-bottom: 1.25em; }
.article-body p:last-child { margin-bottom: 0; }
.article-body strong { color: var(--ink); font-weight: 600; }
.article-body code { padding: 2px 5px; border-radius: 4px; background: var(--paper); color: var(--ink); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 18px; }
.article-body a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.article-body a:hover { color: var(--accent-hover); }
/* Code examples keep their line breaks and scroll sideways rather than wrap JSON at narrow widths. */
.article-body pre { margin: 0; padding: 20px 22px; overflow-x: auto; border-radius: 12px; background: var(--paper); font-size: 18px; line-height: 1.5; }
.article-body pre code { padding: 0; background: none; white-space: pre; }
.article-body pre:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.article-body th code { font-weight: 400; }
/* JSON examples are marked up by hand so keys read apart from their values; braces and commas recede. */
.article-body pre.json code { color: var(--code-punct); }
.article-body pre.json .json-key { color: var(--code-key); font-weight: 600; }
.article-body pre.json .json-string { color: var(--code-string); }
.article-body pre.json .json-escape { color: var(--code-literal); }
.article-body pre.json .json-literal { color: var(--code-literal); }
.provider-list { margin-top: 30px; border-top: 1px solid var(--line); }
.provider-entry { padding: 28px 0 32px; border-bottom: 1px solid var(--line); }
.provider-entry p { margin-bottom: 0; }
.table-scroll { max-width: 100%; margin: 28px 0 28px; overflow-x: auto; }
.table-scroll:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.article-body table { width: 100%; min-width: 650px; border-collapse: collapse; text-align: left; font-size: 18px; line-height: 1.45; }
.article-body th, .article-body td { padding: 16px 18px 16px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.article-body thead th { color: var(--ink); font-weight: 600; }
.article-body tbody th { width: 34%; color: var(--ink); font-weight: 600; }
.article-body td { color: var(--ink); }
.article-next { padding-bottom: 4px; }
.article-next .text-link { margin-top: 6px; }
@media (max-width: 800px) {
  .workflow-row { grid-template-columns: 56px 1fr; gap: 12px 20px; }
  .workflow-row p { grid-column: 2; }
  .capability-grid { gap: 44px; }
  .split-section { gap: 38px; }
}
@media (max-width: 620px) {
  .site-container { width: min(calc(100% - 36px), 1120px); }
  .global-nav { min-height: 44px; }
  .hero { padding: 76px 0 94px; }
  .hero-mascot { margin-bottom: 20px; }
  h1 { font-size: clamp(46px, 12vw, 60px); }
  .hero p { font-size: 22px; }
  .section { padding: 82px 0; }
  .section-intro { margin-bottom: 42px; }
  h2 { font-size: clamp(38px, 9vw, 48px); }
  .workflow-row { grid-template-columns: 48px 1fr; gap: 8px 16px; padding: 28px 0; }
  .workflow-row p { grid-column: 2; }
  .workflow-row h3 { margin-bottom: 4px; }
  .capability-grid, .split-section, .footer-main { grid-template-columns: 1fr; }
  .capability-grid { gap: 38px; }
  .split-section { gap: 22px; }
  .footer-main { gap: 46px; }
  .local-nav-inner { gap: 18px; }
  .local-nav-title { font-size: 18px; }
  .local-nav-links { gap: 20px; }
  .article-hero { padding-top: 64px; padding-bottom: 40px; }
  .article-hero-inner { padding-bottom: 44px; }
  .article-body { width: min(calc(100% - 36px), 760px); padding-bottom: 82px; }
  .article-body section { margin-top: 52px; }
}
@media (max-width: 390px) {
  .global-nav { gap: 12px; }
  .global-links { gap: 12px; }
  .footer-links { gap: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Provider-specific type and spacing follow the site's article scale. */
.provider-guide { padding: 0 0 48px; }
.guide-section { width: min(calc(100% - 48px), 1120px); margin: 0 auto; padding: 38px 0 0; scroll-margin-top: 68px; }
.guide-copy { max-width: 760px; }
.guide-copy h2 { margin-bottom: 12px; font-size: 30px; line-height: 1.25; }
.guide-copy p, .guide-steps li, .family-intro { font-size: 18px; line-height: 1.56; }
.guide-copy p { margin-bottom: 16px; }
.guide-copy p:last-child { margin-bottom: 0; }
.provider-guide strong { font-weight: 650; }
.provider-guide code { padding: 2px 5px; border-radius: 4px; background: var(--paper); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 18px; }
.product-figure { margin: 36px 0 0; }
.screenshot-stage { position: relative; aspect-ratio: 1120 / 650; overflow: hidden; border-radius: 14px; background: linear-gradient(rgba(7, 12, 29, 0.42), rgba(7, 12, 29, 0.42)), url("/images/providers/provider-backdrop.png") center / cover no-repeat; isolation: isolate; }
.screenshot-window { position: absolute; z-index: 1; width: 72%; left: 14%; bottom: -22.3%; filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.24)); }
.screenshot-window img { display: block; width: 100%; height: auto; clip-path: inset(2.5% 3% 4.5% 3% round 20px); }
.screenshot-window::after { position: absolute; inset: 2.5% 3% 4.5%; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 20px; content: ""; pointer-events: none; }
.screenshot-stage--local { aspect-ratio: 1120 / 470; }
.screenshot-stage--local .screenshot-window { bottom: -66.8%; }
.provider-family { margin-top: 36px; }
.provider-family h3, .setup-card h3 { margin-bottom: 8px; font-size: 23px; line-height: 1.3; }
.family-intro { margin: 0 0 18px; color: var(--secondary); }
.provider-icon { display: block; width: 32px; height: 32px; flex: none; }
.provider-icon--apple { background: #ad52de; -webkit-mask: url("/images/providers/icons/apple-intelligence.png") center / contain no-repeat; mask: url("/images/providers/icons/apple-intelligence.png") center / contain no-repeat; }

/* Provider choices are cards because each one links to its setup card. Each card is full bleed in its
   provider's toy-world art (scripts/520_generate_provider_art.py): a daylight scene in the light theme and the
   same scene at dusk in the dark one, kept upper right and anchored right. The text sits on a fade into the
   art's calm lower half, dark ink on a pale fade in light, white on a dark fade in dark. */
.choice-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.choice-grid li { display: flex; }
.choice-card { --choice-art: var(--choice-day); --choice-surface: #f5f5f7; --choice-fade: 250 250 252; --choice-ink: #1d1d1f; --choice-text: rgb(29 29 31 / 0.8); --choice-code: rgb(29 29 31 / 0.08); position: relative; display: flex; flex: 1; flex-direction: column; justify-content: flex-end; gap: 6px; min-height: 300px; padding: 28px 28px 30px; overflow: hidden; border-radius: 18px; background: var(--choice-surface) var(--choice-art) right center / cover no-repeat; color: var(--choice-text); font-size: 18px; line-height: 1.5; isolation: isolate; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) .choice-card { --choice-art: var(--choice-dusk); --choice-surface: #1d1d1f; --choice-fade: 16 16 18; --choice-ink: #fff; --choice-text: rgb(255 255 255 / 0.84); --choice-code: rgb(255 255 255 / 0.14); }
}
:root[data-theme="dark"] .choice-card { --choice-art: var(--choice-dusk); --choice-surface: #1d1d1f; --choice-fade: 16 16 18; --choice-ink: #fff; --choice-text: rgb(255 255 255 / 0.84); --choice-code: rgb(255 255 255 / 0.14); }
.choice-card::before { position: absolute; z-index: -1; inset: 0; background: linear-gradient(180deg, rgb(var(--choice-fade) / 0) 18%, rgb(var(--choice-fade) / 0.88) 80%); content: ""; transition: opacity 0.2s ease; }
.choice-card:hover { color: var(--choice-text); }
.choice-card:hover::before { opacity: 0.82; }
.choice-card:focus-visible { outline-offset: 3px; border-radius: 18px; }
.choice-card img, .choice-card .provider-icon { width: 48px; height: 48px; margin-bottom: 12px; object-fit: contain; }
.choice-card strong { color: var(--choice-ink); font-size: 21px; font-weight: 600; line-height: 1.3; }
.provider-guide .choice-card code { background: var(--choice-code); color: var(--choice-ink); }
.choice-card--claude { --choice-day: url("/images/providers/cards/claude-toy-day.webp"); --choice-dusk: url("/images/providers/cards/claude-toy.webp?v=logo"); }
.choice-card--codex { --choice-day: url("/images/providers/cards/codex-toy-day.webp"); --choice-dusk: url("/images/providers/cards/codex-toy.webp?v=logo"); }
.choice-card--antigravity { --choice-day: url("/images/providers/cards/antigravity-toy-day.webp"); --choice-dusk: url("/images/providers/cards/antigravity-toy.webp?v=logo"); }
.choice-card--openrouter { --choice-day: url("/images/providers/cards/openrouter-toy-day.webp"); --choice-dusk: url("/images/providers/cards/openrouter-toy.webp?v=logo"); }
.choice-card--local { --choice-day: url("/images/providers/cards/local-toy-day.webp"); --choice-dusk: url("/images/providers/cards/local-toy.webp?v=logo"); }
.choice-card--apple { --choice-day: url("/images/providers/cards/apple-toy-day.webp"); --choice-dusk: url("/images/providers/cards/apple-toy.webp?v=logo"); }
.provider-guide .setup-card code { background: var(--white); }

.setup-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 28px; }
.setup-card { padding: 36px 40px 38px; overflow: hidden; border-radius: 22px; background: var(--card); scroll-margin-top: 112px; }
.setup-card--wide { grid-column: 1 / -1; }
.setup-card-head { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin-bottom: 18px; }
.setup-card-head h3 { margin: 0; }
.setup-card-head > img, .setup-card-head > .provider-icon { width: 48px; height: 48px; flex: none; object-fit: contain; }
.setup-icons { display: flex; flex: none; gap: 10px; }
.setup-icons img { width: 48px; height: 48px; object-fit: contain; }
/* A setup card with a screenshot is two parts: steps on the card surface, then the backdrop and
   window edge to edge across its bottom, cancelling the card's side and bottom padding. */
.setup-card .product-figure { margin: 32px -40px -38px; }
.setup-card .screenshot-stage { aspect-ratio: 1120 / 600; border-radius: 0; }
.setup-card .screenshot-stage--local { aspect-ratio: 1120 / 440; }
/* Settings pane names carry the app's sidebar icons (scripts/530_render_settings_icons.py). */
.pane-path { white-space: nowrap; }
.pane-icon { display: inline-block; width: 1.15em; height: 1.15em; margin: 0 0.3em 0 0.05em; vertical-align: -0.22em; }
.pane-icon--mark { object-fit: contain; }
.pane-icon.provider-icon { display: inline-block; width: 1.15em; height: 1.15em; }
.guide-steps { max-width: 760px; margin: 0; padding-left: 1.5em; }
.guide-steps li { padding-left: 5px; margin: 0 0 10px; }
.guide-steps li:last-child { margin-bottom: 0; }
.guide-steps li::marker { color: var(--accent); font-weight: 700; }
@media (max-width: 960px) {
  .choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .setup-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .choice-card::before { transition: none; } }
@media (max-width: 700px) {
  .guide-section { width: min(calc(100% - 36px), 1120px); padding-top: 34px; }
  .choice-grid { grid-template-columns: 1fr; gap: 14px; }
  .choice-card { min-height: 220px; padding: 22px 24px 24px; }
  .setup-card { padding: 26px 22px 28px; border-radius: 18px; }
  .setup-card .product-figure { margin: 26px -22px -28px; }
  .pane-path { white-space: normal; }
  .product-figure { margin-top: 28px; }
  .screenshot-stage, .screenshot-stage--local { aspect-ratio: auto; padding: 24px 16px 0; }
  .screenshot-window, .screenshot-stage--local .screenshot-window { position: relative; inset: auto; width: 100%; max-height: 420px; overflow: hidden; filter: none; }
  .screenshot-stage--local .screenshot-window { max-height: 200px; }
  .screenshot-window img { clip-path: inset(2.5% 3% 0 3% round 14px 14px 0 0); }
  .screenshot-window::after { display: none; }
}
.article-main:has(.provider-guide) .article-hero { padding: 44px 24px 0; background: var(--white); text-align: left; }
.article-main:has(.provider-guide) .article-hero-inner { max-width: 1120px; padding-bottom: 0; border-bottom: 0; }
.article-main:has(.provider-guide) .article-hero h1 { max-width: 760px; margin: 0; font-size: 42px; line-height: 1.15; }
.article-main:has(.provider-guide) .article-hero p { max-width: 760px; margin: 12px 0 0; font-size: 19px; line-height: 1.5; }
@media (max-width: 700px) {
  .article-main:has(.provider-guide) .article-hero { padding: 36px 18px 0; }
  .article-main:has(.provider-guide) .article-hero-inner { padding-bottom: 26px; }
  .article-main:has(.provider-guide) .article-hero h1 { font-size: 36px; }
  .article-main:has(.provider-guide) .article-hero p { font-size: 18px; }
}

/* The provider guide opens on a masthead: the page title over the overview screenshot, on the
   same backdrop the screenshots use. The stage drops its own panel so the window rises from the
   masthead's bottom edge. */
/* Like the homepage hero, the masthead image starts at the top of the page and runs under the
   sticky global header (44px) and local nav (52px + 1px rule); both keep their translucent surfaces. */
.provider-masthead { margin-top: -97px; padding-top: 97px; background: #b6d7f8 url("/images/backgrounds/toy-world.jpg") center top / cover no-repeat; color: #1d1d1f; overflow: hidden; }
.masthead-copy { width: min(calc(100% - 48px), 1120px); margin: 0 auto; text-align: center; padding: clamp(72px, 9vw, 128px) 0 0; }
.provider-masthead h1 { max-width: 1000px; margin: 0 auto; font-size: clamp(48px, 6vw, 76px); line-height: 1.1; }
.provider-masthead p { max-width: 800px; margin: 24px auto 0; font-size: clamp(22px, 2.4vw, 26px); line-height: 1.42; }
.provider-masthead strong { font-weight: 600; }
.provider-masthead :is(h1, p, strong) { color: inherit; }
:root[data-theme="dark"] .provider-masthead { background-color: #091a49; background-image: url("/images/backgrounds/toy-world-dark.jpg"); color: #fff; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) .provider-masthead { background-color: #091a49; background-image: url("/images/backgrounds/toy-world-dark.jpg"); color: #fff; }
}
.provider-masthead .screenshot-stage { width: min(calc(100% - 48px), 1120px); margin: clamp(-70px, -5vw, -16px) auto 0; border-radius: 0; background: none; overflow: visible; clip-path: inset(0 -100vw); }
.provider-guide .guide-section:first-child { padding-top: 64px; }
@media (max-width: 700px) {
  .masthead-copy { width: min(calc(100% - 36px), 1120px); padding-top: 64px; }
  .provider-masthead h1 { font-size: clamp(40px, 11vw, 56px); }
  .provider-masthead p { font-size: 20px; }
  .provider-masthead .screenshot-stage { width: 100%; margin-top: 20px; }
}