/* Shared design system for the homepage, use-case directory and guide hub.
   Loaded after each page's inline <style>, so it is the single place that
   decides type scale, colour, rhythm and components for all fifteen pages.
   Visual reference: sophoninc.com — white canvas, warm bands, one blue,
   restrained rules instead of boxes, and headings that relax for CJK. */
.site-shell {
  /* Ink and surfaces */
  --cue-ink: #1d1a1a;
  --cue-muted: #555;
  --cue-label: #6e6e6e;
  --cue-line: #ecedf0;
  --cue-line-strong: #dfe1e6;
  --cue-surface: #f7f8fa;
  --cue-band: #f4f3f1;
  /* One accent, used for actions and focus only */
  --cue-blue: #2563eb;
  --cue-blue-hover: #1d4ed8;
  --cue-blue-surface: #eff4fe;
  --cue-blue-line: #cbdcfb;
  /* Radii: Sophon's five steps. Illustrations that depict other software
     (window chrome, chat bubbles, key caps) keep their own shapes. */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;
  /* Measure and rhythm */
  --cue-wrap: 1240px;
  --cue-gutter: clamp(20px, 0.9rem + 1.5vw, 32px);
  --cue-band-space: clamp(72px, 3rem + 5vw, 120px);
  /* Type scale */
  --cue-hero: clamp(36px, 1.2rem + 5.4vw, 84px);
  --cue-head: clamp(30px, 1.45rem + 2.2vw, 50px);
  --cue-h3: clamp(19px, 1.05rem + 0.35vw, 23px);
  --cue-lead: clamp(17px, 1rem + 0.35vw, 21px);
  --cue-body: 16px;
  --cue-small: 15px;
  --cue-xs: 13px;
  /* Tracking and leading tighten for Latin, relax for CJK below */
  --cue-track-hero: -.042em;
  --cue-track-head: -.032em;
  --cue-track-h3: -.02em;
  --cue-track-label: .08em;
  --cue-lead-hero: 1.06;
  --cue-lead-head: 1.1;
  --cue-measure-hero: 15ch;
  --cue-measure-head: 20ch;
  --cue-measure-deck: 640px;
  color: var(--cue-ink);
  background: #fff;
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
}
/* CJK glyphs are square and already dense: negative tracking makes them
   collide and tight leading clips their strokes. Sophon relaxes the same
   four values; Cue follows so one stylesheet serves five languages. */
:is(html[lang="ja"], html[lang="ko"], html[lang^="zh"]) .site-shell {
  --cue-hero: clamp(38px, 0.9rem + 7.4vw, 80px);
  --cue-track-hero: -.015em;
  --cue-track-head: -.012em;
  --cue-track-h3: -.005em;
  --cue-track-label: .04em;
  --cue-lead-hero: 1.2;
  --cue-lead-head: 1.28;
  --cue-measure-hero: 13em;
  --cue-measure-head: 15em;
  --cue-measure-deck: 34em;
}
.site-shell .page, .site-shell > .wrap { width: min(var(--cue-wrap), calc(100% - 2 * var(--cue-gutter))); max-width: var(--cue-wrap); padding: 0; margin-inline: auto; overflow-wrap: normal; }
.site-shell .divider { max-width: var(--cue-wrap); border-color: var(--cue-line); }
.site-shell a, .site-shell summary { -webkit-tap-highlight-color: transparent; }
.site-shell :is(a, summary, button):focus-visible { outline: 3px solid var(--cue-blue); outline-offset: 3px; border-radius: 5px; }
.site-shell h1, .site-shell h2, .site-shell h3 { text-wrap: balance; overflow-wrap: normal; }
.site-shell :is(p, .lede, .section-desc) { text-wrap: pretty; }
html[lang="ko"] .site-shell :is(h1,h2,h3,p,dt,dd) { word-break: keep-all; overflow-wrap: break-word; }

/* ── Full-bleed bands ───────────────────────────────────────────────────
   Alternating white and warm grey replaces a page full of hairline rules.
   The shadow spread paints past the container and clip-path keeps it from
   widening the document, so no viewport gains a horizontal scrollbar. */
.site-shell .ia-band {
  background: var(--cue-band);
  box-shadow: 0 0 0 100vmax var(--cue-band);
  clip-path: inset(0 -100vmax);
}
.site-home :is(#usecases, #talk, #faq, .team-section, .trust-bar) {
  background: var(--cue-band);
  box-shadow: 0 0 0 100vmax var(--cue-band);
  clip-path: inset(0 -100vmax);
}
.site-home hr.divider { display: none; }
.site-home :is(.ia-section, .section, .team-section, .final-cta) { padding: var(--cue-band-space) 0; }
.site-home #product { padding-bottom: var(--cue-band-space); }
.site-home #usecases { margin: 0; padding: var(--cue-band-space) 0; border-radius: 0; }
.site-home .hero { padding: clamp(64px, 2rem + 4vw, 104px) 0 clamp(56px, 2rem + 3vw, 88px); }
/* #faq sits outside .page, so give its own children the shared measure. */
.site-home #faq > * { width: min(var(--cue-wrap), calc(100% - 2 * var(--cue-gutter))); margin-inline: auto; }
.site-home .trust-bar { padding: 26px var(--cue-gutter); margin: 0; border: 0; }

/* ── Navigation ────────────────────────────────────────────────────────── */
.site-shell nav.ia-nav { position: relative; inset: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; width: min(var(--cue-wrap), calc(100% - 2 * var(--cue-gutter))); max-width: var(--cue-wrap); min-height: 60px; height: auto; padding: 8px 0; margin: 0 auto; background: transparent; border: 0; z-index: 50; }
.site-shell > .wrap > nav.ia-nav { width: 100%; }
.ia-logo { display: inline-flex; align-items: center; min-height: 44px; gap: 8px; color: var(--cue-ink); font-size: 21px; font-weight: 800; letter-spacing: -.045em; text-decoration: none; }
.ia-logo img { width: 25px; height: 25px; }
.ia-links { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; font-size: 15px; font-weight: 400; line-height: 1.45; }
.ia-links a, .ia-links summary { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 12px; color: var(--cue-muted); border-radius: 8px; text-decoration: none; transition: color .15s, background-color .15s; }
.ia-links a:hover, .ia-links summary:hover { color: var(--cue-ink); background: var(--cue-surface); }
.ia-links details { position: relative; }
.site-shell .ia-language .language-nav { display: block; padding: 6px; margin: 0; font-size: inherit; }
.ia-links summary { cursor: pointer; list-style: none; gap: 7px; }
.ia-links summary::-webkit-details-marker { display: none; }
.ia-links summary::after { content: ''; width: 6px; height: 6px; border-right: 1.5px solid; border-bottom: 1.5px solid; transform: rotate(45deg) translateY(-2px); opacity: .7; }
.ia-links details[open] summary { color: var(--cue-ink); background: var(--cue-surface); }
.ia-links details[open] summary::after { transform: rotate(225deg) translate(-2px,-1px); }
.ia-menu { position: absolute; top: calc(100% + 6px); right: 0; left: auto; min-width: 190px; max-width: 240px; padding: 6px; background: #fff; border: 1px solid var(--cue-line); border-radius: var(--r-md); box-shadow: 0 16px 40px rgb(29 26 26 / .10), 0 2px 6px rgb(29 26 26 / .04); z-index: 30; }
.ia-menu a { display: flex; padding: 9px 12px; border-radius: 8px; }
.ia-menu a:hover, .ia-menu [aria-current] { background: var(--cue-blue-surface); color: var(--cue-blue); }
.site-shell .ia-links > :is(.btn-nav,.cta) { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; margin-left: 8px; padding: 0 18px; background: var(--cue-blue); color: #fff!important; border: 1px solid transparent; border-radius: 999px; font-size: 15px; font-weight: 600; letter-spacing: -.01em; text-decoration: none; line-height: 1.4; box-shadow: 0 1px 2px rgb(37 99 235 / .3); transition: background-color .15s, transform .15s, box-shadow .15s; }
.site-shell .ia-links > :is(.btn-nav,.cta):hover { background: var(--cue-blue-hover); opacity: 1; transform: translateY(-1px); box-shadow: 0 12px 28px -14px rgb(37 99 235 / .7); }

/* ── Section heads ─────────────────────────────────────────────────────
   One scale for every section title on every page type, centred on the
   homepage narrative and above each directory. */
.ia-section, .site-shell .section { scroll-margin-top: 24px; }
.ia-section .section-label, .site-shell .section-label, .site-shell .eyebrow {
  color: var(--cue-label); font-size: 12px; line-height: 1.5; font-weight: 600;
  letter-spacing: var(--cue-track-label); text-transform: uppercase; margin: 0 0 14px;
}
.site-shell :is(.ia-section > h2, .section > .section-title, .final-cta > h2) {
  max-width: var(--cue-measure-head); font-size: var(--cue-head); font-weight: 700;
  letter-spacing: var(--cue-track-head); line-height: var(--cue-lead-head); margin: 0 0 16px;
}
.site-shell :is(.ia-section > p, .section > .section-desc, .final-cta > p) {
  max-width: var(--cue-measure-deck); color: var(--cue-muted); font-size: var(--cue-lead);
  line-height: 1.55; margin: 0;
}
.site-home :is(.ia-section, .section, .final-cta) > :is(.section-label, .eyebrow, h2, .section-title, p, .section-desc) { margin-inline: auto; text-align: center; }
.site-home :is(.ia-section, .section) > :is(h2, .section-title) + p { margin-bottom: 0; }
.site-home :is(.ia-section, .section) > :is(p, .section-desc) { margin-bottom: 0; }
.site-home .ia-grid, .site-home .steps, .site-home .first-task, .site-home .scene-block, .site-home .faq-list, .site-home .compare-wrap { margin-top: 48px; }
.site-home .ia-section > .ia-mode-note { margin-top: 28px; font-size: var(--cue-xs); line-height: 1.7; max-width: 62em; color: var(--cue-label); }

/* ── Cards ─────────────────────────────────────────────────────────────
   Two families only. Rule-topped columns say "this is a capability or a
   step"; bordered cards say "this is a task you can open". */
.ia-grid { display: grid; gap: 20px; }
.ia-card { min-width: 0; color: var(--cue-ink); text-decoration: none; }
.ia-card h3 { font-size: var(--cue-h3); font-weight: 700; letter-spacing: var(--cue-track-h3); line-height: 1.3; margin: 0 0 10px; }
.ia-card p { font-size: var(--cue-small); line-height: 1.6; color: var(--cue-muted); margin: 0; }
.ia-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 38px; height: 38px; background: var(--cue-blue-surface); color: var(--cue-blue); border-radius: var(--r-sm); }
.ia-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ia-action { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--cue-blue); font-size: var(--cue-small); font-weight: 600; line-height: 1.45; text-decoration: none; }
.ia-action::after, .guide-card h3 a::after { content: '→'; flex-shrink: 0; font-size: 18px; font-weight: 400; transition: transform .18s ease; }
a.ia-action:hover::after, a.ia-card:hover .ia-action::after, .guide-card:hover h3 a::after { transform: translateX(3px); }

/* Capabilities: a 2px rule, an icon beside the title, one action baseline. */
#product .ia-grid { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 28px 32px; }
#product .ia-card { display: flex; flex-direction: column; padding: 18px 0 0; border: 0; border-top: 2px solid var(--cue-ink); border-radius: 0; background: none; text-align: left; }
.ia-capability-top { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.ia-mode { color: var(--cue-label); font-size: 12px; font-weight: 600; letter-spacing: var(--cue-track-label); text-transform: uppercase; }
#product .ia-card h3 { margin: 0 0 8px; }
.ia-capability-actions { display: flex; flex-wrap: wrap; gap: 0 20px; padding-top: 14px; margin-top: auto; }
.ia-capability-actions .ia-action { padding: 0; min-height: 44px; }
.ia-capability-actions .ia-action::after { font-size: 16px; }

/* Tasks: what you bring on the left, what you get back on the right. */
#usecases .ia-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; }
.ia-task-card { display: flex; flex-direction: column; padding: 24px 26px; background: #fff; border: 1px solid var(--cue-line); border-radius: var(--r-md); text-align: left; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.ia-task-card:hover, .ia-task-card:focus-visible { border-color: var(--cue-blue-line); box-shadow: 0 10px 30px -18px rgb(29 26 26 / .35); transform: translateY(-1px); }
.ia-task-top { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.ia-task-top .ia-icon { width: 32px; height: 32px; border-radius: var(--r-sm); background: var(--cue-surface); color: #596778; }
.ia-task-top .ia-icon svg { width: 18px; height: 18px; }
.ia-group { color: var(--cue-label); font-size: 12px; font-weight: 600; line-height: 1.5; letter-spacing: var(--cue-track-label); text-transform: uppercase; }
.ia-flow { display: grid; grid-template-columns: 1fr 16px 1fr; gap: 14px; align-items: start; margin: 4px 0 18px; }
.ia-flow-part { min-width: 0; margin: 0; }
.ia-flow dt { font-size: 11px; color: var(--cue-label); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 5px; }
.ia-flow dd { font-size: 14px; line-height: 1.6; margin: 0; color: #424955; }
.ia-flow-arrow { color: #9aa2b1; align-self: center; }
.ia-task-card > .ia-action { border-top: 1px solid var(--cue-line); padding-top: 12px; margin-top: auto; justify-content: space-between; width: 100%; }
.ia-all { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 28px; color: var(--cue-blue); font-size: var(--cue-small); font-weight: 600; text-decoration: none; }
.ia-all::after { content: '→'; font-size: 18px; transition: transform .18s ease; }
.ia-all:hover::after { transform: translateX(3px); }
.site-home #usecases .ia-all { margin-inline: auto; display: flex; width: fit-content; }

/* ── Homepage hero ─────────────────────────────────────────────────────── */
.site-home .hero { background: #fff; display: flex; flex-direction: column; align-items: center; text-align: center; }
.site-home .hero-copy { width: 100%; max-width: var(--cue-wrap); position: relative; }
.site-home .hero h1 { font-size: var(--cue-hero); font-weight: 800; letter-spacing: var(--cue-track-hero); line-height: var(--cue-lead-hero); max-width: var(--cue-measure-hero); margin: 0 auto 26px; text-wrap: balance; }
.site-home .hero-sub { font-size: var(--cue-lead); line-height: 1.55; max-width: 44ch; color: var(--cue-muted); margin: 0 auto 36px; }
:is(html[lang="ja"], html[lang="ko"], html[lang^="zh"]) .site-home .hero-sub { max-width: 26em; }
.site-home .hero > .hero-copy > h1, .site-home .hero-sub, .site-home .hero-actions { animation: none; opacity: 1; transform: none; }
/* The action rail is Cue's version of Sophon's hero dock: one quiet strip
   holding the platform note and both downloads. */
.site-home .hero-action-rail { display: flex; align-items: center; justify-content: center; gap: 22px; width: fit-content; max-width: 100%; margin: 0 auto; padding: 8px 8px 8px 24px; border: 1px solid var(--cue-line); border-radius: 999px; background: #fff; box-shadow: 0 8px 26px rgb(29 26 26 / .05); }
.site-home .hero-platform { font-size: var(--cue-xs); line-height: 1.6; color: var(--cue-label); margin: 0; text-align: left; }
.site-home .hero-actions { display: flex; gap: 8px; flex-shrink: 0; flex-wrap: wrap; margin: 0; }
.site-home .hero-actions .btn-primary, .site-home .hero-actions .btn-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 24px!important; border-radius: 999px!important; font-size: 16px!important; font-weight: 600; letter-spacing: -.01em; transition: background-color .18s, border-color .18s, transform .18s, box-shadow .18s; }
.site-home .hero-actions .btn-primary, .site-shell .final-cta .btn-primary { background: var(--cue-blue); color: #fff; border: 1px solid transparent; box-shadow: 0 1px 2px rgb(37 99 235 / .3); }
.site-home .hero-actions .btn-primary:hover, .site-shell .final-cta .btn-primary:hover { background: var(--cue-blue-hover); opacity: 1; transform: translateY(-1px); box-shadow: 0 12px 28px -14px rgb(37 99 235 / .7); }
.site-home .hero-actions .btn-ghost { background: #fff; color: var(--cue-ink); border: 1px solid color-mix(in srgb, var(--cue-ink) 22%, transparent); }
.site-home .hero-actions .btn-ghost:hover { border-color: color-mix(in srgb, var(--cue-ink) 45%, transparent); color: var(--cue-ink); transform: translateY(-1px); }
.site-home .hero-proofline { margin-top: 22px; font-size: var(--cue-xs); line-height: 1.7; }
.site-home .hero-proofline a { color: var(--cue-label); border-bottom: 1px solid var(--cue-line-strong); }
.site-home .hero-proofline a:hover { color: var(--cue-ink); border-color: var(--cue-ink); }

/* Hero media: a light frame and one deep, soft shadow carry the product
   shot. Shadows never widen the document, so this is safe at 320px. */
.site-home .hero-visual { width: 100%; max-width: var(--cue-wrap); margin: clamp(40px, 2rem + 2.5vw, 68px) auto 0; padding: clamp(8px, .9vw, 14px); border: 1px solid #fff; border-radius: var(--r-xl); background: linear-gradient(180deg, #fff, #eef1f6); box-shadow: inset 0 1px 0 #fff, 0 40px 90px -42px rgb(29 26 26 / .45), 0 60px 120px -70px rgb(37 99 235 / .45), 0 2px 8px rgb(29 26 26 / .05); overflow: hidden; }
.site-home .hero-visual video { border-radius: var(--r-md); }

/* ── Video caption ─────────────────────────────────────────────────────── */
.site-home .hero-visual figcaption { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px 28px; align-items: center; padding: 18px 20px 14px; background: #fff; text-align: left; }
.video-caption-copy { min-width: 0; }
.video-caption-label { display: block; color: var(--cue-label); font-size: 11px; font-weight: 600; line-height: 1.5; letter-spacing: var(--cue-track-label); text-transform: uppercase; margin-bottom: 8px; }
.hero-visual figcaption strong { display: block; color: var(--cue-ink); font-size: 18px; font-weight: 650; line-height: 1.4; letter-spacing: var(--cue-track-h3); }
.site-home .hero-visual figcaption p { color: var(--cue-muted); font-size: var(--cue-xs); line-height: 1.6; margin: 8px 0 0; max-width: 62em; }
.site-home .hero-visual figcaption .ia-action { align-self: center; padding: 0; color: var(--cue-blue); font-size: var(--cue-small); text-decoration: none; }

/* ── Homepage narrative sections ───────────────────────────────────────── */
.site-home .visual-workflows .scene-header { position: relative; min-height: 84px; padding-left: 104px; margin-bottom: 28px; text-align: left; }
.site-home .visual-workflows .scene-avatar { display: block; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 80px; height: 80px; object-fit: contain; pointer-events: none; filter: drop-shadow(0 8px 16px rgb(29 36 50 / .10)); }
.site-home .visual-workflows .scene-label { color: var(--cue-label); font-size: 12px; font-weight: 600; letter-spacing: var(--cue-track-label); text-transform: uppercase; margin: 0 0 8px; }
.site-home .visual-workflows .scene-header h3 { font-size: clamp(24px, 1.2rem + 1.5vw, 34px); font-weight: 700; line-height: var(--cue-lead-head); letter-spacing: var(--cue-track-head); margin-bottom: 10px; }
.site-home .visual-workflows .scene-header .voice-cmd { font-style: normal; font-size: var(--cue-body); line-height: 1.7; color: var(--cue-muted); max-width: 46em; }
.site-home .visual-workflows .mockup-wrap { border: 1px solid var(--cue-line); border-radius: var(--r-lg); background: var(--cue-surface); }
.site-home .visual-workflows .scene-block:nth-of-type(even) .mockup-wrap { background: #f8f8f6; }
.site-home .visual-workflows .scene-block { margin-bottom: clamp(48px, 2rem + 3vw, 80px); }
.site-home .visual-workflows .scene-block:last-of-type { margin-bottom: 0; }
.site-home .visual-workflows .scene-footer { justify-content: flex-start; }

/* Steps and first-task entries reuse the capability rule instead of adding
   a third and fourth card shape to the same page. */
.site-home .steps { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 28px 32px; background: none; border-radius: 0; overflow: visible; text-align: left; }
.site-home .steps .step { background: none; padding: 18px 0 0; border-top: 2px solid var(--cue-ink); }
.site-home .steps .step-num { color: var(--cue-label); letter-spacing: var(--cue-track-label); margin-bottom: 14px; }
.site-home .steps .step h3 { font-size: 17px; font-weight: 700; letter-spacing: var(--cue-track-h3); margin-bottom: 8px; }
.site-home .steps .step p { font-size: 14px; color: var(--cue-muted); line-height: 1.65; }
.site-home .first-task { margin-top: clamp(48px, 2rem + 3vw, 72px); text-align: left; }
.site-home .first-task > h3 { font-size: var(--cue-h3); font-weight: 700; letter-spacing: var(--cue-track-h3); line-height: 1.3; margin-bottom: 8px; }
.site-home .first-task > p { font-size: var(--cue-small); color: var(--cue-muted); line-height: 1.7; max-width: 62em; }
.site-home .first-task-grid { gap: 28px 32px; margin: 26px 0 16px; }
.site-home .first-task-grid article { padding: 18px 0 0; border: 0; border-top: 2px solid var(--cue-ink); border-radius: 0; background: none; }
.site-home .first-task-grid h4 { font-size: 16px; font-weight: 700; letter-spacing: var(--cue-track-h3); line-height: 1.45; margin-bottom: 8px; }
.site-home .first-task-grid p { font-size: 14px; color: var(--cue-muted); line-height: 1.7; }
.site-home .first-task-grid a { color: var(--cue-blue); text-decoration: none; font-weight: 600; font-size: var(--cue-small); }
.site-home .first-task-grid a:hover { color: var(--cue-blue-hover); text-decoration: underline; text-underline-offset: 4px; }
.site-home .first-task .first-task-note { font-size: var(--cue-xs); color: var(--cue-label); line-height: 1.7; }
.site-home .trust-bar { color: var(--cue-label); }
.site-home .trust-item { font-size: var(--cue-xs); color: var(--cue-label); }
.site-home .team-section { text-align: left; }
.site-home .final-cta { text-align: center; }
.site-home .final-cta h2 { max-width: var(--cue-measure-head); }
.site-home .faq-list { text-align: left; }
.site-home .faq-q { font-size: var(--cue-body); font-weight: 650; letter-spacing: var(--cue-track-h3); }
.site-home .faq-item { border-color: var(--cue-line); }

/* ── Directory and hub page headers ────────────────────────────────────── */
.site-usecases .hero, .site-guides main > header { max-width: 100%; padding: clamp(56px, 2rem + 4vw, 96px) 0 clamp(28px, 1rem + 2vw, 44px); margin: 0; border: 0; text-align: center; }
.site-usecases .hero h1, .site-guides main > header h1 { max-width: var(--cue-measure-head); margin: 0 auto 18px; font-size: var(--cue-head); font-weight: 700; letter-spacing: var(--cue-track-head); line-height: var(--cue-lead-head); }
.site-usecases .lede, .site-guides .lede { max-width: var(--cue-measure-deck); margin: 0 auto; font-size: var(--cue-lead); line-height: 1.55; color: var(--cue-muted); }
.site-shell .topic-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; position: static; height: auto; width: auto; padding: 0 0 clamp(32px, 1rem + 2vw, 48px); margin: 0; background: none; border: 0; backdrop-filter: none; }
.site-shell .topic-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px; color: var(--cue-muted); background: #fff; border: 1px solid var(--cue-line-strong); border-radius: 999px; font-size: 14px; font-weight: 500; line-height: 1.4; text-decoration: none; transition: border-color .15s, color .15s, background-color .15s; }
.site-shell .topic-nav a:hover { background: var(--cue-blue-surface); border-color: var(--cue-blue-line); color: var(--cue-blue); }
.ia-task-group { display: grid; grid-template-columns: 208px minmax(0,1fr); gap: 40px; padding: clamp(36px, 1.5rem + 2vw, 52px) 0; border-top: 1px solid var(--cue-line); scroll-margin-top: 24px; }
.ia-task-group > h2 { font-size: var(--cue-h3); font-weight: 700; line-height: 1.35; letter-spacing: var(--cue-track-h3); margin: 2px 0 0; }
.ia-task-group .ia-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; margin: 0; }
.ia-task-group .ia-task-card { padding: 22px 24px; background: #fff; }
/* An odd last card keeps its column: a stretched full-width card reads as
   a different kind of entry than the ones beside it. */
.site-usecases .section { padding: clamp(40px, 1.5rem + 2vw, 56px) 0; border-color: var(--cue-line); }
.site-usecases .section h2 { font-size: var(--cue-h3); font-weight: 700; letter-spacing: var(--cue-track-h3); line-height: 1.35; }
.site-usecases .section > .ia-mode-note { font-size: var(--cue-xs); color: var(--cue-label); line-height: 1.7; }

/* ── Guide hub ─────────────────────────────────────────────────────────── */
.site-guides section { padding: clamp(40px, 1.5rem + 2vw, 60px) 0; border-color: var(--cue-line); scroll-margin-top: 24px; }
.site-guides section > h2 { font-size: clamp(22px, 1.15rem + 0.8vw, 28px); font-weight: 700; letter-spacing: var(--cue-track-head); line-height: var(--cue-lead-head); margin-bottom: 10px; }
.site-guides section > p { max-width: 62em; font-size: var(--cue-small); color: var(--cue-muted); line-height: 1.65; margin: 0 0 24px; }
.site-guides .guide-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; margin-top: 24px; }
.site-guides .guide-card { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); column-gap: 24px; padding: 24px 26px; border: 1px solid var(--cue-line); background: #fff; border-radius: var(--r-md); transition: border-color .18s, box-shadow .18s, transform .18s; }
.site-guides .guide-card:hover, .site-guides .guide-card:focus-within { border-color: var(--cue-blue-line); box-shadow: 0 10px 30px -18px rgb(29 26 26 / .35); transform: translateY(-1px); }
.site-guides .guide-card h3 { grid-column: 1/-1; margin: 0 0 18px; font-size: var(--cue-h3); font-weight: 700; letter-spacing: var(--cue-track-h3); line-height: 1.35; }
.site-guides .guide-card h3 a { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; color: var(--cue-ink); text-decoration: none; }
.site-guides .guide-card h3 a::before { content: ''; position: absolute; inset: 0; border-radius: var(--r-md); }
.site-guides .guide-card h3 a::after { color: var(--cue-blue); line-height: 1.45; }
.site-guides .guide-card p { margin: 0; color: #424955; font-size: 14px; line-height: 1.6; }
.site-guides .guide-card strong { display: block; font-size: 11px; line-height: 1.5; font-weight: 600; color: var(--cue-label); margin-bottom: 5px; letter-spacing: .04em; text-transform: uppercase; }
.site-guides .path-grid { gap: 32px; }
.site-guides .path-grid h3 { font-size: var(--cue-h3); font-weight: 700; letter-spacing: var(--cue-track-h3); }
.site-guides .path-grid ol { color: var(--cue-muted); }
.site-guides .path-grid a { text-decoration-color: var(--cue-blue-line); text-underline-offset: 5px; color: var(--cue-blue-hover); }
.site-guides .boundaries li { background: var(--cue-surface); border: 1px solid var(--cue-line); border-radius: var(--r-md); color: var(--cue-muted); font-size: 14px; line-height: 1.75; }
.site-guides .help { background: var(--cue-surface); border-color: var(--cue-line); border-radius: var(--r-lg); padding: 28px; }
.site-guides .help h2 { font-size: var(--cue-h3); font-weight: 700; letter-spacing: var(--cue-track-h3); }
.site-guides .help p { font-size: var(--cue-small); color: var(--cue-muted); }
.site-shell footer { border-color: var(--cue-line); }

.ia-evidence { opacity: 1!important; padding: 30px; border: 1px solid var(--cue-line); border-radius: var(--r-lg); background: var(--cue-surface); text-align: left; max-width: 100%; overflow-wrap: anywhere; }
.ia-evidence h2 { font-size: var(--cue-h3); font-weight: 700; line-height: 1.3; letter-spacing: var(--cue-track-h3); margin: 12px 0; }
.ia-evidence p { font-size: 14px; line-height: 1.7; color: var(--cue-muted); margin: 12px 0; }
.ia-evidence blockquote { margin: 20px 0; padding: 16px; background: #fff; border-radius: var(--r-sm); font-size: var(--cue-small); line-height: 1.7; color: #222; }
.ia-evidence ul { padding-left: 20px; }
.ia-evidence a { font-size: 14px; color: var(--cue-blue-hover); }
.ia-evidence small { font-size: 12px; line-height: 1.6; display: block; }

@media (max-width: 1080px) {
  #product .ia-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 26px 28px; }
  .ia-task-group { grid-template-columns: 1fr; gap: 20px; }
  .ia-task-group > h2 { max-width: 650px; }
  .ia-links { gap: 2px 2px; }
  .ia-links a, .ia-links summary { padding: 6px 8px; }
}
@media (max-width: 860px) {
  /* Both download labels and the platform note stop fitting on one line
     here in the longer locales, so the rail becomes a stacked panel. */
  .site-home .hero-action-rail { flex-direction: column; gap: 14px; width: 100%; max-width: 440px; padding: 16px; border-radius: var(--r-lg); }
  .site-home .hero-platform { text-align: center; }
  .site-home .hero-actions { width: 100%; flex-direction: column; align-items: stretch; }
  .site-home .hero-actions .btn-primary, .site-home .hero-actions .btn-ghost { width: 100%; }
  .site-home .steps { grid-template-columns: 1fr; gap: 22px; }
  .site-home .first-task-grid { grid-template-columns: 1fr; gap: 22px; }
}
@media (max-width: 700px) {
  .site-shell nav.ia-nav { padding: 10px 0; gap: 6px; min-height: 60px; }
  .ia-links { width: 100%; gap: 0 2px; font-size: 14px; }
  /* Sophon shows the globe only on the desktop bar; on a phone the row
     needs the width more than it needs the mark. */
  .ia-links .nav-globe { display: none; }
  .ia-links a, .ia-links summary { min-height: 44px; padding: 4px 8px; }
  .site-shell .ia-links details { position: static; }
  .site-shell .ia-links .ia-menu { left: 0; right: 0; top: 100%; width: 100%; min-width: 0; max-width: none; }
  /* The download stays on the logo line; it is pinned to the same right
     edge as the nav itself so it can never sit inside or outside it. */
  .site-shell .ia-links > :is(.btn-nav,.cta) { position: absolute; top: 8px; right: 0; margin-left: 0; min-height: 44px; padding: 0 16px; font-size: 14px; }
  .site-home .hero-visual { border-radius: var(--r-lg); padding: 6px; }
  .site-home .hero-visual video { border-radius: var(--r-sm); }
  .site-home #usecases .ia-grid { grid-template-columns: 1fr; gap: 14px; }
  .ia-task-group .ia-grid, .site-guides .guide-grid { grid-template-columns: 1fr; }
  .site-home .visual-workflows .scene-header { padding-left: 84px; min-height: 68px; }
  .site-home .visual-workflows .scene-avatar { width: 66px; height: 66px; }
  .site-shell .topic-nav { gap: 6px; }
  .site-shell .topic-nav a { padding: 8px 13px; font-size: 13px; }
  .site-home .hero-visual figcaption { grid-template-columns: 1fr; gap: 6px; padding: 16px 14px 12px; }
  .hero-visual figcaption strong { font-size: 16px; }
  .site-home .hero-visual figcaption .ia-action { justify-self: start; }
  .ia-evidence { padding: 22px; }
}
@media (max-width: 560px) {
  #product .ia-grid { grid-template-columns: 1fr; gap: 22px; }
  .ia-card h3 { font-size: 20px; }
  .ia-task-card, .ia-task-group .ia-task-card { padding: 20px; }
  .ia-flow { gap: 10px; grid-template-columns: 1fr 14px 1fr; }
  .site-guides .guide-card { padding: 20px; column-gap: 18px; }
  .site-home .visual-workflows .scene-header { padding-left: 0; min-height: 0; }
  .site-home .visual-workflows .scene-avatar { position: static; transform: none; width: 64px; height: 64px; margin-bottom: 14px; }
}
@media (max-width: 430px) {
  .ia-links { font-size: 13px; }
  .ia-links a, .ia-links summary { padding: 4px 6px; }
  .ia-links summary { gap: 5px; }
  .site-shell .ia-links > :is(.btn-nav,.cta) { padding: 0 14px; font-size: 13px; }
  .ia-flow { grid-template-columns: 1fr; gap: 12px; }
  .ia-flow-arrow { display: none; }
  .site-guides .guide-card { grid-template-columns: 1fr; }
  .site-guides .guide-card p + p { margin-top: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .site-shell :is(.ia-card, .ia-action::after, .guide-card, .guide-card h3 a::after, .btn-nav, .btn-primary, .btn-ghost, .ia-all::after) { transition: none; }
}

/* Homepage hero phrasing spans, previously duplicated inline on five pages. */
.hero-phrase { display: inline-block; }
html[lang="ko"] .site-home .hero h1 { word-break: keep-all; }
.site-home :is(#compare .compare-method, #compare .compare-scroll-hint) { text-align: center; max-width: var(--cue-measure-deck); margin-inline: auto; }

/* Team block sits on the warm band: the label needs the shared contrast and
   the cards need to be lighter than what they sit on. */
.site-home .team-label { color: var(--cue-label); font-size: 12px; font-weight: 600; letter-spacing: var(--cue-track-label); margin-bottom: 36px; }
.site-home .team-card { background: #fff; border-color: var(--cue-line); border-radius: var(--r-md); }
.site-home .team-card:hover { border-color: var(--cue-line-strong); }
.site-home .team-story p { font-size: var(--cue-body); line-height: 1.75; color: var(--cue-muted); }
.site-home .team-badge { color: var(--cue-label); background: #fff; border-color: var(--cue-line); }
.site-home .trust-item svg { opacity: .8; }

/* Japanese carries the longest approved hero phrase (nine glyphs), so it is
   set from that phrase rather than from the shared CJK step; otherwise it
   dangles a third line on a phone. */
html[lang="ja"] .site-shell { --cue-hero: clamp(30px, 11.4vw - 0.41rem, 74px); }

/* The scene result line belongs to the mockup above it, not to the page:
   one outcome in ink, one quiet caution, no pill that looks clickable. */
.site-home .visual-workflows .scene-footer { align-items: baseline; gap: 8px 14px; margin-top: 16px; padding: 0 4px; }
.site-home .visual-workflows .scene-footer .result { font-size: var(--cue-small); font-weight: 650; color: var(--cue-ink); letter-spacing: var(--cue-track-h3); }
.site-home .visual-workflows .scene-footer .money-tag { padding: 0; border: 0; background: none; color: var(--cue-label); font-size: var(--cue-xs); font-weight: 400; }
.site-home .visual-workflows .scene-footer .money-tag::before { content: '·'; margin-right: 10px; color: var(--cue-line-strong); }
.site-home .visual-workflows .scene-footer .meta { font-size: var(--cue-xs); color: var(--cue-label); }

/* ── Sticky top bar ────────────────────────────────────────────────────
   Sophon's header: 60px, translucent white over a saturating blur, no
   border, sitting above the page at z-index 50. The bar's own box is the
   content container, so the ::before carries the glass across the full
   viewport; body overflow is clipped rather than hidden so that clipping
   does not turn the body into a scroll container and break sticky. */
body.site-shell { overflow-x: clip; }
@media (min-width: 768px) {
  .site-shell nav.ia-nav { position: sticky; top: 0; }
  /* The glass spreads past the container with a shadow rather than a
     negative inset, so it never widens the document. Only the page's own
     empty gutters fall outside the blurred box, so the seam never shows. */
  .site-shell nav.ia-nav::before {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background: rgb(255 255 255 / .84);
    box-shadow: 0 0 0 100vmax rgb(255 255 255 / .84);
    clip-path: inset(0 -100vmax);
    -webkit-backdrop-filter: saturate(1.8) blur(18px);
    backdrop-filter: saturate(1.8) blur(18px);
  }
  /* Anchors land below the bar instead of behind it. */
  .site-shell :is(.ia-section, .section, .ia-task-group, .site-guides section, [id]) { scroll-margin-top: 76px; }
}
@media (min-width: 768px) and (prefers-reduced-transparency: reduce) {
  .site-shell nav.ia-nav::before { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ── Actions ───────────────────────────────────────────────────────────
   One button treatment everywhere: a pill, Sophon's lift on hover and the
   same slow highlight sweep across the blue fill. */
.site-shell :is(.ia-links > .btn-nav, .ia-links > .cta, .hero-actions .btn-primary, .hero-actions .btn-ghost, .final-cta .btn-primary) {
  position: relative; overflow: hidden; border-radius: 999px;
  transition: background-color .18s, border-color .18s, color .18s, transform .18s, box-shadow .18s;
}
.site-shell :is(.ia-links > .btn-nav, .ia-links > .cta, .hero-actions .btn-primary, .final-cta .btn-primary)::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(-45deg, rgb(255 255 255 / 0) 36%, rgb(255 255 255 / .12) 50%, rgb(255 255 255 / .45) 60%, rgb(255 255 255 / .12) 70%, rgb(255 255 255 / 0) 84%) -55% -55% / 300% 300% no-repeat;
  transition: background-position .9s cubic-bezier(.32, .2, .25, 1);
}
.site-shell :is(.ia-links > .btn-nav, .ia-links > .cta, .hero-actions .btn-primary, .final-cta .btn-primary):hover::after { background-position: 100% 100%; }
.site-shell :is(.ia-links > .btn-nav, .ia-links > .cta, .hero-actions .btn-primary, .final-cta .btn-primary):hover {
  background: var(--cue-blue-hover); color: #fff;
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 12px 28px -14px rgb(37 99 235 / .7);
}
.site-shell :is(.ia-links > .btn-nav, .ia-links > .cta, .hero-actions .btn-primary, .hero-actions .btn-ghost, .final-cta .btn-primary):active { transform: translateY(0); box-shadow: none; }
.site-home .hero-actions .btn-ghost:hover { background: rgb(255 255 255 / .7); border-color: color-mix(in srgb, var(--cue-ink) 45%, transparent); transform: translateY(-1px); }
/* The closing download sat on a rounded rectangle while every other action
   was a pill; it now matches the hero. */
.site-shell .final-cta .btn-primary { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; font-weight: 600; letter-spacing: -.01em; box-shadow: 0 1px 2px rgb(37 99 235 / .3); }
.site-shell .final-cta .final-meta { margin-top: 16px; font-size: var(--cue-xs); color: var(--cue-label); }
.site-shell .final-cta .final-meta a { color: var(--cue-muted); text-underline-offset: 4px; }

/* Language selector carries Sophon's globe. */
.ia-links .nav-globe { width: 15px; height: 15px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.6; opacity: .75; }

/* Footer chrome at Sophon's weight. */
.site-shell footer { border-top: 1px solid var(--cue-line); }
.site-shell footer :is(.footer-left, .footer-links a) { font-size: var(--cue-xs); color: var(--cue-muted); }
.site-shell footer .footer-links a:hover { color: var(--cue-ink); }

@media (prefers-reduced-motion: reduce) {
  .site-shell :is(.btn-nav, .cta, .btn-primary, .btn-ghost) { transition: background-color .15s, color .15s; }
  .site-shell :is(.btn-nav, .cta, .btn-primary, .btn-ghost):hover { transform: none; }
  .site-shell :is(.btn-nav, .cta, .btn-primary, .btn-ghost)::after { display: none; }
}

/* ── Video stage ───────────────────────────────────────────────────────
   The native play control is a small corner glyph. A stage-sized scrim
   and a large round button make starting the video obvious, and both
   disappear once it plays. clip-path — not border-radius — rounds the
   video, because the browser's own control bar is not clipped by a
   radius and was squaring off the bottom corners. */
.site-shell .video-stage { position: relative; display: block; line-height: 0; }
.site-shell .video-stage video { display: block; width: 100%; }
.site-shell .video-play {
  position: absolute; inset: 0; display: grid; place-items: center;
  width: 100%; border: 0; padding: 0; margin: 0; cursor: pointer;
  background: linear-gradient(rgb(0 0 0 / .14), rgb(0 0 0 / .38));
  border-radius: inherit; transition: opacity .2s;
}
.site-shell .video-play[hidden] { display: none; }
.site-shell .video-stage:not(.is-idle) .video-play { display: none; }
.site-shell .video-play-icon {
  display: grid; place-items: center;
  width: clamp(60px, 6.5vw, 88px); height: clamp(60px, 6.5vw, 88px);
  border-radius: 50%; background: #fff;
  box-shadow: 0 14px 40px -12px rgb(0 0 0 / .6);
  transition: transform .2s;
}
.site-shell .video-play-icon::before {
  content: ''; width: 0; height: 0; margin-left: 9%;
  border-style: solid; border-width: .82em 0 .82em 1.38em;
  border-color: transparent transparent transparent var(--cue-ink);
  font-size: clamp(14px, 1.4vw, 19px);
}
.site-shell .video-play:hover .video-play-icon { transform: scale(1.06); }
.site-shell .video-play:focus-visible { outline: 3px solid #fff; outline-offset: -6px; }
.site-home .hero-visual .video-stage { border-radius: var(--r-md); overflow: hidden; }
.site-home .hero-visual video { clip-path: inset(0 round var(--r-md)); }

/* ── Gemma team talk ───────────────────────────────────────────────────
   Sophon's evidence module, carried over: the recorded segment beside
   what was said in it, with the figures attributed to the case study. */
.site-home #talk .talk { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(28px, 2rem + 2vw, 56px); align-items: center; margin-top: 48px; text-align: left; }
.site-home .talk-frame { position: relative; border-radius: var(--r-lg); overflow: hidden; background: #141414; box-shadow: 0 30px 70px -30px rgb(29 26 26 / .45), 0 2px 6px rgb(29 26 26 / .12); }
.site-home .talk-frame video { display: block; width: 100%; height: auto; aspect-ratio: 1280 / 608; clip-path: inset(0 round var(--r-lg)); }
.site-home .talk-copy h3 { margin: 0 0 12px; font-size: var(--cue-h3); font-weight: 700; letter-spacing: var(--cue-track-h3); line-height: 1.3; }
.site-home .talk-copy p { margin: 0; color: var(--cue-muted); font-size: var(--cue-small); line-height: 1.7; max-width: 46em; }
.site-home .talk-copy .talk-note { margin-top: 14px; font-size: var(--cue-xs); color: var(--cue-label); }
.site-home .talk-copy .talk-note a { color: var(--cue-blue); text-underline-offset: 4px; }
@media (max-width: 860px) {
  .site-home #talk .talk { grid-template-columns: 1fr; gap: 26px; }
}
/* Cue's own overlay pill and proposal box join the scale; the surrounding
   window chrome, chat bubbles and slide cards keep the shapes of the
   software they depict. */
.site-home .visual-workflows .cue-pill { border-radius: var(--r-pill); }
.site-home .visual-workflows .save-proposal { border-radius: var(--r-md); }

/* Only the line directly under a section title is a deck. A .section-desc
   that comes after the section's content is a next-step note and keeps the
   small, quiet treatment instead of being promoted to lead size. */
.site-shell :is(.ia-section, .section) > :is(.steps, .ia-grid, .first-task, .talk, .compare-wrap, .faq-list, .scene-block) ~ .section-desc {
  max-width: 60em; font-size: var(--cue-small); line-height: 1.75; color: var(--cue-muted); margin-top: 32px;
}

/* ── Scenario stages ───────────────────────────────────────────────────
   Sophon stages a scene rather than framing it: a soft vertical gradient
   with a hairline inset instead of a border, and the app window lifted
   off it by a deep, wide shadow. Cue's panels were flat with a shadow so
   shallow the window read as pasted on. The depicted software keeps its
   own chrome; only the staging changes. */
.site-home .visual-workflows .mockup-wrap {
  border: 0;
  background: linear-gradient(#edeff2, #e2e5ea);
  box-shadow: inset 0 0 0 1px rgb(29 26 26 / .06);
  padding: clamp(18px, 4vw, 64px);
}
.site-home .visual-workflows .scene-block:nth-of-type(even) .mockup-wrap {
  background: linear-gradient(#f1efec, #e8e5e0);
}
.site-home .visual-workflows :is(.win, .gen-box) {
  box-shadow: 0 24px 60px -24px rgb(29 26 26 / .40), 0 1px 3px rgb(29 26 26 / .12);
}
.site-home .visual-workflows .gen-box { border-radius: var(--r-md); }

/* ── Floating download dock ─────────────────────────────────────────────
   Sophon's dock: a glass pill fixed under the bar, hidden until the hero's
   own download rail has scrolled away. While it is up, the bar's download
   button steps aside so one offer is on screen at a time. It is
   aria-hidden and its links are out of the tab order because the same
   controls already exist in the hero and the bar. */
.site-home .dock { position: fixed; top: 70px; left: 0; right: 0; z-index: 45; display: flex; justify-content: center; padding-inline: 16px; opacity: 0; transform: translateY(-10px); pointer-events: none; transition: opacity .25s, transform .25s; }
.site-home .dock.is-shown { opacity: 1; transform: none; pointer-events: auto; }
.dock-inner { display: flex; align-items: center; gap: 16px; width: min(100%, 1000px); padding: 6px 6px 6px 22px; border-radius: var(--r-pill); background: rgb(255 255 255 / .72); border: 1px solid rgb(255 255 255 / .85); box-shadow: inset 0 1px 0 rgb(255 255 255 / .9), 0 1px 2px rgb(29 26 26 / .06), 0 18px 40px -22px rgb(29 26 26 / .35); -webkit-backdrop-filter: blur(22px) saturate(1.6); backdrop-filter: blur(22px) saturate(1.6); }
.dock-name { font-weight: 600; font-size: 17px; letter-spacing: -.01em; color: var(--cue-ink); }
.dock-note { font-size: var(--cue-xs); color: var(--cue-label); white-space: nowrap; }
.dock-btns { margin-left: auto; display: flex; gap: 8px; flex: 0 0 auto; }
.site-home .dock :is(.btn-primary, .btn-ghost) { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 18px; border-radius: var(--r-pill); font-size: 15px; font-weight: 600; letter-spacing: -.01em; text-decoration: none; transition: background-color .18s, border-color .18s, transform .18s, box-shadow .18s; }
.site-home .dock .btn-primary { background: var(--cue-blue); color: #fff; border: 1px solid transparent; box-shadow: 0 1px 2px rgb(37 99 235 / .3); }
.site-home .dock .btn-primary:hover { background: var(--cue-blue-hover); transform: translateY(-1px) scale(1.02); box-shadow: 0 12px 28px -14px rgb(37 99 235 / .7); }
.site-home .dock .btn-ghost { background: transparent; color: var(--cue-ink); border: 1px solid color-mix(in srgb, var(--cue-ink) 22%, transparent); }
.site-home .dock .btn-ghost:hover { background: rgb(255 255 255 / .7); border-color: color-mix(in srgb, var(--cue-ink) 45%, transparent); transform: translateY(-1px); }
html.has-dock .site-home .ia-links > .btn-nav { opacity: 0; pointer-events: none; transition: opacity .2s; }
@media (max-width: 767px) {
  /* The bar is not sticky on phones, so the dock is the floating download there. */
  .site-home .dock { top: 8px; }
  .dock-note, .dock-ghost { display: none; }
  .dock-inner { padding-left: 16px; }
}
/* The inline script still toggles nav.scrolled; Sophon's bar carries no rule or shadow when scrolled. */
.site-shell nav.ia-nav.scrolled { box-shadow: none; border-bottom-color: transparent; }

/* ── Scenario timelines ──────────────────────────────────────────────────
   The request pill now sits over the lower edge of the app window, the way
   Cue's own overlay sits over the app it is working in. With motion
   allowed and JavaScript present, a scene plays as: pill rises → waveform
   runs while the words reveal → the draft settles in. Everything is fully
   visible by default, so a static render is complete. */
.site-home .visual-workflows .mockup-wrap { padding-bottom: clamp(44px, 4.4vw, 60px); }
.site-home .visual-workflows .cue-pill { position: absolute; left: 50%; bottom: clamp(12px, 1.5vw, 20px); transform: translateX(-50%); z-index: 3; display: inline-flex; align-items: center; gap: 12px; max-width: min(84%, 680px); padding: 11px 20px 11px 16px; background: #1f1e1e; color: #f4f3f1; font-size: 14px; line-height: 1.5; box-shadow: 0 24px 60px -16px rgb(0 0 0 / .55); }
.site-home .visual-workflows .cue-wave { display: inline-flex; align-items: center; gap: 3px; height: 18px; flex: 0 0 auto; }
.site-home .visual-workflows .cue-wave i { display: block; width: 3px; height: 6px; border-radius: 2px; background: #60a5fa; transform: scaleY(.45); transform-origin: center; }
.site-home .visual-workflows .cue-wave i:nth-child(3n) { height: 9px; }
.site-home .visual-workflows .cue-wave i:nth-child(5n) { height: 5px; }
.site-home .visual-workflows .cue-text { min-width: 0; }
@media (max-width: 600px) {
  .site-home .visual-workflows .cue-pill { max-width: calc(100% - 28px); font-size: 13px; padding: 9px 14px 9px 12px; }
}
@media (prefers-reduced-motion: no-preference) {
  @keyframes cue-wave { 50% { transform: scaleY(2.4); } }
  @keyframes cue-say { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
  @keyframes cue-blink { 50% { opacity: 0; } }
  .site-home .scene-block.has-motion .cue-pill { opacity: 0; transform: translate(-50%, 14px); transition: opacity .35s ease, transform .35s ease; }
  .site-home .scene-block.has-motion [data-out] { opacity: 0; transform: translateY(10px); transition: opacity .5s ease, transform .5s ease; }
  .site-home .scene-block.is-playing .cue-pill { opacity: 1; transform: translate(-50%, 0); transition-delay: .15s; }
  .site-home .scene-block.is-playing .cue-text { animation: cue-say 1.6s steps(40, end) .55s both; }
  .site-home .scene-block.is-playing .cue-wave i { animation: cue-wave .9s ease-in-out infinite; }
  .site-home .scene-block.is-playing .cue-wave i:nth-child(2n) { animation-delay: 120ms; }
  .site-home .scene-block.is-playing .cue-wave i:nth-child(3n) { animation-delay: 240ms; }
  .site-home .scene-block.is-playing .cue-wave i:nth-child(5n) { animation-delay: 60ms; }
  .site-home .scene-block.is-said .cue-wave i { animation: none; transform: scaleY(.45); transition: transform .3s; }
  .site-home .scene-block.is-playing [data-out] { opacity: 1; transform: none; transition-delay: 2.3s; }
  .site-home .scene-block.is-playing .cursor { animation: cue-blink 1s step-end infinite; }
  .site-home .visual-workflows .cursor { animation: none; }
  .site-home .scene-block.is-playing .visual-workflows .cursor, .site-home .visual-workflows .scene-block.is-playing .cursor { animation: cue-blink 1s step-end infinite; }
}

/* ── Layout review fixes ────────────────────────────────────────────────
   The closing call to action's deck sat flush against its button because
   the shared deck rule zeroes margins; the trust strip wrapped into two
   uneven left-aligned rows; and where FAQ, trust and team run as one warm
   band, the spacing inside it read as three separate voids. */
/* :is(.section > .section-desc, …) carries two classes of specificity, so the
   deck rule beat a plain .final-cta > p; the body's two classes settle it. */
.site-shell.site-home .final-cta > p { margin-bottom: 28px; }
.site-shell .final-cta > p + div { margin-bottom: 14px; }
.site-home .trust-bar { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 32px; max-width: var(--cue-wrap); margin-inline: auto; padding: 28px var(--cue-gutter); }
.site-home .trust-item { justify-content: center; text-align: center; }
/* In the English edition the FAQ sits inside a .page wrapper and the trust strip
   follows that wrapper, so the wrapper is what precedes the strip. */
.site-home #faq:has(~ .trust-bar), .site-home .page:has(> #faq):has(~ .trust-bar) > #faq { padding-bottom: clamp(40px, 3vw, 56px); }
.site-home .trust-bar ~ .page .team-section { padding-top: clamp(44px, 3.2vw, 68px); }
.site-home .faq-list { max-width: 760px; }
.site-home .faq-q { padding-block: 22px; }
/* The pill's resting (pre-play) offset stays inside its stage on every viewport. */
@media (prefers-reduced-motion: no-preference) {
  .site-home .scene-block.has-motion .cue-pill { transform: translate(-50%, 8px); }
}

/* ── Scenario mocks ─────────────────────────────────────────────────────
   Five real work situations from the use-case directory, drawn with the
   structure of the apps they happen in. Sizes and chrome follow the real
   applications; every generated output is labelled a draft to review. */
.mk { font-size: 12.5px; line-height: 1.5; color: #1d1a1a; }
.mk p { margin: 0 0 6px; }
.mk-muted { color: #6e6e6e; }
.mk-win { display: flex; flex-direction: column; min-height: 360px; background: #fff; border-radius: 12px; overflow: hidden; }
.mk-bar { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; height: 40px; padding: 0 14px; background: #f6f6f7; border-bottom: 1px solid #e9e9ec; font-size: 12px; color: #6e6e6e; }
.mk-bar .mk-title { margin-left: 6px; font-weight: 500; color: #4a4a4a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-dots { display: inline-flex; gap: 6px; flex: 0 0 auto; }
.mk-dots i { width: 10px; height: 10px; border-radius: 50%; background: #ff5f56; }
.mk-dots i:nth-child(2) { background: #ffbd2e; } .mk-dots i:nth-child(3) { background: #27c93f; }
.mk-body { display: flex; flex: 1; min-height: 0; }
.mk-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mk-side { flex: 0 0 172px; padding: 12px 10px; background: #f8f9fb; border-right: 1px solid #ecedf0; font-size: 12px; color: #555; }
.mk-side--slack { background: #3f0e40; color: #d1c4d2; border: 0; }
.mk-side--slack .mk-ws { color: #fff; font-weight: 700; font-size: 14px; padding: 6px 8px 12px; }
.mk-side--slack .mk-sec { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; opacity: .7; padding: 10px 8px 4px; }
.mk-side--slack span { display: block; padding: 4px 8px; border-radius: 6px; }
.mk-side--slack .is-on { background: #1164a3; color: #fff; }
.mk-head { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid #eee; font-size: 12px; color: #5f6368; }
.mk-head b { color: #1d1a1a; font-size: 13px; }
.mk-list { padding: 6px 0; }
.mk-item { display: flex; gap: 10px; padding: 8px 14px; }
.mk-avatar { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: #fff; background: #6b7280; }
.mk-avatar--round { border-radius: 50%; }
.mk-msg { min-width: 0; } .mk-msg b { font-weight: 600; } .mk-msg time { color: #8a8a8a; font-size: 11px; margin-left: 6px; }
.mk-compose { margin: auto 14px 14px; border: 1px solid #d9d9de; border-radius: 8px; background: #fff; }
.mk-compose .mk-text { padding: 10px 12px; min-height: 44px; }
.mk-compose .mk-tools { display: flex; align-items: center; gap: 12px; padding: 6px 12px; border-top: 1px solid #ececef; font-size: 11px; color: #8a8a8a; }
.mk-compose .mk-tools .mk-end { margin-left: auto; }
.mk-cursor { display: inline-block; width: 2px; height: 14px; background: #2563eb; vertical-align: -2px; margin-left: 1px; }
.mk-chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 600; background: #eff4fe; color: #2563eb; white-space: nowrap; }
.mk-rec { display: inline-flex; align-items: center; gap: 6px; color: #e5484d; font-weight: 600; font-size: 11px; }
.mk-rec::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.mk-panel { background: #fff; border-radius: var(--r-md); padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.mk-panel h4 { margin: 0; font-size: 13.5px; font-weight: 700; }
.mk-panel ol, .mk-panel ul { margin: 0; padding-left: 18px; }
.mk-panel li { margin: 5px 0; }
.mk-panel li small, .mk-src { display: block; font-size: 11px; color: #8a8a8a; }
.mk .gen-label { font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #8a8a8a; margin-bottom: 6px; }
/* Gmail */
.mk-gm-rail { flex: 0 0 56px; background: #f6f8fc; display: grid; gap: 14px; align-content: start; justify-items: center; padding: 12px 0; }
.mk-gm-rail i { width: 22px; height: 22px; border-radius: 6px; background: #dfe3ea; }
.mk-gm-rail i:first-child { width: 40px; height: 40px; border-radius: 14px; background: #c2e7ff; }
.mk-gm-subject { font-size: 15px; font-weight: 500; padding: 14px 18px 4px; }
.mk-gm-mail { padding: 6px 18px 10px; }
/* PDF viewer */
.mk-pdf { display: flex; flex: 1; background: #ececee; min-height: 0; }
.mk-thumbs { flex: 0 0 64px; padding: 10px 8px; display: grid; gap: 8px; align-content: start; }
.mk-thumbs i { display: block; aspect-ratio: 3 / 4; background: #fff; border: 1px solid #d6d6da; border-radius: 2px; }
.mk-thumbs i.is-on { outline: 2px solid #2563eb; outline-offset: 1px; }
.mk-page { flex: 1; min-width: 0; margin: 14px; background: #fff; padding: 22px 26px; box-shadow: 0 1px 3px rgb(0 0 0 / .15); font-size: 11.5px; line-height: 1.65; }
.mk-page h5 { margin: 0 0 10px; font-size: 13px; }
.mk-page p { margin: 0 0 8px; }
.mk mark { background: #fff3bf; color: inherit; padding: 0 2px; }
/* Meeting */
.mk-meet { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px; background: #1c1c1e; }
.mk-tile { position: relative; aspect-ratio: 16 / 10; border-radius: 8px; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 18px; background: linear-gradient(135deg, #3b3f4a, #23262e); }
.mk-tile--a { background: linear-gradient(135deg, #5b6cff, #2a3aa8); } .mk-tile--b { background: linear-gradient(135deg, #f0a35e, #b4632a); } .mk-tile--c { background: linear-gradient(135deg, #44b89d, #1f6f5c); }
.mk-tile small { position: absolute; left: 8px; bottom: 6px; font-size: 10px; font-weight: 500; background: rgb(0 0 0 / .45); padding: 2px 6px; border-radius: 4px; }
.mk-ctl { display: flex; justify-content: center; gap: 14px; padding: 10px 8px; background: #111; color: #ddd; font-size: 10.5px; text-align: center; }
.mk-ctl span::before { content: ''; display: block; width: 16px; height: 16px; margin: 0 auto 3px; border-radius: 4px; background: #3a3a3c; }
.mk-ctl .is-end { color: #ff6b6b; } .mk-ctl .is-end::before { background: #e5484d; }
/* Document */
.mk-doc { flex: 1; padding: 22px 28px; font-size: 12.5px; }
.mk-doc h5 { font-size: 18px; margin: 0 0 14px; }
.mk-doc h6 { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: #6e6e6e; margin: 12px 0 4px; }
.mk-doc ul { margin: 0; padding-left: 18px; } .mk-doc li { margin: 3px 0; }
.mk-tag { display: inline-block; font-size: 10px; padding: 1px 6px; border-radius: 4px; background: #eef2f7; color: #4b5563; margin-left: 6px; vertical-align: 1px; }
.mk-tag--fact { background: #e9f7ef; color: #166534; } .mk-tag--plan { background: #eef2ff; color: #3730a3; }
.site-home .visual-workflows .scene-footer .ia-action { margin-left: auto; padding: 0; min-height: 44px; font-size: var(--cue-small); }
@media (max-width: 700px) {
  .mk-side, .mk-gm-rail, .mk-thumbs { display: none; }
  .mk-win { min-height: 0; }
  .mk-meet { grid-template-columns: 1fr 1fr; padding: 8px; gap: 6px; }
  .mk-ctl { gap: 8px; font-size: 9.5px; }
  .mk-page { margin: 10px; padding: 16px; }
  .mk-doc { padding: 16px 18px; }
  .site-home .visual-workflows .scene-footer .ia-action { margin-left: 0; width: 100%; }
}
/* Panels match the window beside them; the rest of a PDF page is drawn as
   faint lines; on phones the request pill sits under the window rather
   than over the composer it would otherwise cover. */
.mk .mk-panel { align-self: stretch; }
.mk-win { min-height: 320px; }
.mk-lines { display: grid; gap: 7px; margin-top: 10px; }
.mk-lines i { display: block; height: 7px; border-radius: 3px; background: #e8e8ea; }
@media (max-width: 600px) {
  .site-home .visual-workflows .cue-pill { position: static; transform: none; margin: 12px auto 0; max-width: 100%; }
  .site-home .visual-workflows .mockup-wrap { padding-bottom: 18px; }
  .site-home .scene-block.has-motion .cue-pill { transform: translateY(8px); }
  .site-home .scene-block.is-playing .cue-pill { transform: none; }
}
/* Keynote's light table: white slides on a grey surface, the title slide
   set larger, each slide numbered as the app numbers them. */
.mk-deck { flex: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 12px; align-content: start; padding: 16px; background: #ececee; }
.mk-slide { position: relative; aspect-ratio: 16 / 9; background: #fff; border-radius: 4px; padding: 10px 11px; box-shadow: 0 1px 3px rgb(0 0 0 / .16); }
.mk-slide-t { font-size: 10.5px; font-weight: 700; line-height: 1.25; }
.mk-slide.is-title { display: grid; place-items: center; text-align: center; background: #1d1a1a; color: #fff; }
.mk-slide.is-title .mk-slide-t { font-size: 12px; }
.mk-slide.is-title i { display: none; }
.mk-slide i { display: block; height: 4px; width: 78%; margin-top: 6px; border-radius: 2px; background: #e6e6e9; }
.mk-slide i:last-of-type { width: 56%; }
.mk-slide-n { position: absolute; left: 0; bottom: -15px; font-size: 9.5px; color: #8a8a8a; }
@media (max-width: 700px) { .mk-deck { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 12px; } }