/* Line 17697 (live check 9b1af22c072, OB-OZ): the landing header is sticky at top 0 (public/css/landing.css), so the search
   bar sticks just under it (--ns-say-top: the header's measured height, set by host-things-you-can-say.js) instead of sliding beneath it. */
/* Colors follow the layout theme (Bootstrap 5.3 data-bs-theme) so the sticky search bar reads in light and dark. */
.ns-things-say { background: var(--bs-body-bg, var(--ns-bg)); color: var(--bs-body-color, var(--ns-text)); }
/* Line 17697: main.landing-main clips with overflow:hidden (public/css/landing.css), which makes it a scroll container, so
   no sticky child ever sticks; overflow:clip clips the same way without one (this page only; the layout keeps its rule). */
.ns-things-say .landing-main { overflow: clip; }
.ns-say-wrap { width: min(1120px, calc(100% - 32px)); margin: 0 auto; padding: clamp(48px, 8vw, 92px) 0 80px; }
.ns-say-hero { max-width: 800px; }
.ns-say-kicker { color: var(--ns-primary, #1a73e8); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: .78rem; }
.ns-say-hero h1 { font-size: clamp(2.35rem, 7vw, 4.6rem); line-height: 1.02; letter-spacing: -.055em; margin: 10px 0 20px; }
.ns-say-hero > p:not(.ns-say-kicker):not(.ns-say-note) { color: var(--bs-secondary-color, var(--ns-text-muted)); font-size: clamp(1.05rem, 2vw, 1.3rem); max-width: 650px; }
.ns-say-examples { display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0 12px; }
.ns-say-examples button, .ns-say-phrase { min-height: 44px; border: 1px solid var(--bs-border-color, var(--ns-border)); background: var(--bs-tertiary-bg, var(--ns-card)); color: var(--bs-body-color, var(--ns-text)); border-radius: 999px; padding: 10px 16px; text-align: left; }
.ns-say-examples button:hover, .ns-say-examples button:focus-visible, .ns-say-phrase:hover { border-color: var(--ns-primary, #1a73e8); }
.ns-say-note, .ns-say-status, .ns-say-tools p { color: var(--bs-secondary-color, var(--ns-text-muted)); font-size: .9rem; }
.ns-say-browser { margin-top: 64px; }
.ns-say-tools { color: var(--bs-body-color, var(--ns-text)); display: flex; justify-content: space-between; align-items: end; gap: 24px; position: sticky; top: var(--ns-say-top, var(--landing-header-height, 0px)); z-index: 2; background: var(--bs-body-bg, var(--ns-bg)); padding: 16px 0; border-bottom: 1px solid var(--bs-border-color, var(--ns-border)); }
.ns-say-tools h2 { margin: 0; font-size: 1.55rem; }
.ns-say-tools p { margin: 4px 0 0; }
.ns-say-tools label { display: grid; gap: 6px; font-size: .78rem; font-weight: 700; min-width: min(330px, 100%); }
.ns-say-tools input { min-height: 48px; border: 1px solid var(--bs-border-color, var(--ns-border)); border-radius: 12px; background: var(--bs-tertiary-bg, var(--ns-card)); color: var(--bs-body-color, var(--ns-text)); padding: 10px 14px; font: inherit; }
.ns-say-group { margin-top: 38px; }
.ns-say-group h3 { margin: 0 0 4px; font-size: 1.15rem; }
.ns-say-count { color: var(--ns-primary, #1a73e8); margin-right: 8px; }
.ns-say-phrases { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.ns-say-phrase { font-size: .94rem; cursor: pointer; }
.ns-say-phrase[data-alias="1"] { border-style: dashed; color: var(--bs-secondary-color, var(--ns-text-muted)); }
@media (max-width: 600px) { .ns-say-wrap { width: min(100% - 24px, 1120px); padding-top: 36px; } .ns-say-tools { align-items: stretch; flex-direction: column; } .ns-say-tools label { width: 100%; } .ns-say-browser { margin-top: 42px; } }