/* ═══════════════════════════════════════════════════════════════
   SearchStack brand layer (Design A · "Daylight")
   Overrides the Silicon theme's primary + typography and defines the
   shared brand components (logo lockup, cards, steps, demo).
   ═══════════════════════════════════════════════════════════════ */

:root {
	/* sampled from the definitive logo artwork (wwwroot/img/searchstack-icon.png) */
	--ss-orange: #FD8802;
	--ss-orange-rgb: 253, 136, 2;
	--ss-ember: #D97400;      /* hover / deep orange */
	--ss-slate: #515C62;      /* the logo's layer grey */
	--ss-ink: #171A1E;        /* near-black with a slate bias */
	--ss-paper: #FBFAF7;      /* warm page ground, light theme */
	--si-font-sans-serif: "Segoe UI Variable Display", "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}

:root, [data-bs-theme=light] {
	--si-primary: var(--ss-orange);
	--si-primary-rgb: var(--ss-orange-rgb);
	--si-primary-text-emphasis: #c66f00;
	--si-primary-bg-subtle: #fff4e3;
	--si-primary-border-subtle: #ffe3ba;
	--si-link-color: var(--ss-ember);
	--si-link-color-rgb: 221, 117, 0;
}

[data-bs-theme=dark] {
	--si-primary: var(--ss-orange);
	--si-primary-rgb: var(--ss-orange-rgb);
	--si-primary-text-emphasis: #ffb75e;
	--si-primary-bg-subtle: #2a1c05;
	--si-primary-border-subtle: #54380a;
	--si-link-color: var(--ss-orange);
	--si-link-color-rgb: var(--ss-orange-rgb);
}

/* Silicon compiles the old primary into .btn-primary as literals; re-point them */
.btn-primary {
	--si-btn-color: #231503;
	--si-btn-bg: var(--ss-orange);
	--si-btn-border-color: var(--ss-orange);
	--si-btn-hover-color: #fff;
	--si-btn-hover-bg: var(--ss-ember);
	--si-btn-hover-border-color: var(--ss-ember);
	--si-btn-focus-shadow-rgb: var(--ss-orange-rgb);
	--si-btn-active-color: #fff;
	--si-btn-active-bg: var(--ss-ember);
	--si-btn-active-border-color: var(--ss-ember);
	--si-btn-disabled-color: #231503;
	--si-btn-disabled-bg: var(--ss-orange);
	--si-btn-disabled-border-color: var(--ss-orange);
}

/* ── Brand typeface: Poppins for the wordmark and headings (matches the logo lockup) ── */
@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('/fonts/poppins-600-latin.woff2') format('woff2');
}
@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('/fonts/poppins-700-latin.woff2') format('woff2');
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
	font-family: 'Poppins', var(--si-font-sans-serif);
}

/* ── Page ground: warm paper in light, theme default in dark ── */
body { background-color: var(--ss-paper); }
[data-bs-theme=dark] body { background-color: var(--si-body-bg); }

/* ── Navbar: flat white surface with a hairline, no shadow band ── */
.ss-navbar {
	background-color: #fff;
	border-bottom: 1px solid #EDEAE2;
	box-shadow: none;
}
[data-bs-theme=dark] .ss-navbar {
	background-color: var(--si-body-bg);
	border-bottom-color: var(--si-border-color);
}
.ss-navbar .nav-link { font-weight: 500; }
/* The active top-nav item marks the current *section*, but it still links to that
   section's landing page (e.g. "Lessons" → /lessons while you're on /lessons/recommendations).
   The Silicon theme sets pointer-events:none on .nav-link.active, which strands you on the
   sub-page; re-enable clicks so the section link always works. */
.ss-navbar .nav-link.active { pointer-events: auto; }

/* ── Brand lockup (navbar, footer): the icon is the real logo artwork ── */
.ss-logo { width: 42px; height: 42px; flex: none; object-fit: contain; }
.ss-wordmark {
	font-family: 'Poppins', var(--si-font-sans-serif);
	font-weight: 700;
	letter-spacing: -.02em;
	font-size: 1.4rem;
	line-height: 1;
	color: var(--ss-ink);
}
.ss-wordmark .ss-dev { color: var(--ss-orange); }
[data-bs-theme=dark] .ss-wordmark { color: #fff; }
footer .ss-logo { width: 28px; height: 28px; }
footer .ss-wordmark { font-size: 1rem; }

/* ── Home page (Design A · Daylight) ── */
.home-page {
	padding-top: 67px; /* offset for fixed navbar */
}

.home-page .hero {
	width: 100%;
	padding: 4.5rem 0 4rem;
	position: relative;
	z-index: 0;
	overflow-x: clip;
}
.home-page .hero::after {
	content: "";
	position: absolute;
	top: -90px;
	right: -170px;
	width: 620px;
	height: 620px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(var(--ss-orange-rgb), .11) 0%, transparent 65%);
	z-index: -1;
	pointer-events: none;
}

.home-page .hero-grid {
	display: grid;
	grid-template-columns: 1.05fr .95fr;
	gap: 4rem;
	align-items: center;
}

.ss-eyebrow {
	font-size: .76rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ss-ember);
	margin-bottom: 1.1rem;
}
[data-bs-theme=dark] .ss-eyebrow { color: var(--ss-orange); }

.ss-h1 {
	font-size: 3.4rem;
	font-weight: 800;
	letter-spacing: -.035em;
	line-height: 1.06;
	text-wrap: balance;
}
.ss-h1 .ss-dot { color: var(--ss-orange); }

.ss-sub {
	font-size: 1.2rem;
	margin-top: 1.3rem;
	max-width: 32em;
}

.ss-meta {
	display: flex;
	gap: .6rem 1.4rem;
	flex-wrap: wrap;
	margin-top: 2.1rem;
	font-size: .86rem;
	font-weight: 500;
	color: var(--si-body-color);
}
.ss-meta span::before {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--ss-orange);
	margin-right: 8px;
	vertical-align: 2px;
}

/* ── live demo card (class deliberately NOT .ss-demo — that's the demos bundle's root) ── */
.ss-livedemo {
	background: #fff;
	border: 1px solid #E7E3DA;
	border-radius: 16px;
	box-shadow: 0 24px 60px -18px rgba(23, 26, 30, .14);
	overflow: hidden;
}
[data-bs-theme=dark] .ss-livedemo {
	background: var(--si-secondary-bg);
	border-color: var(--si-border-color);
	box-shadow: 0 24px 60px -18px rgba(0, 0, 0, .5);
}
/* Ask overlay theming. The widget ships brand-neutral (indigo placeholder) so it can be
   embedded on any site, and the host supplies the accent. These live here rather than in
   the Reference sidebar because the overlay is opened from more than one page now — the
   docs box and the home-page launcher — and a scoped copy meant the home page rendered it
   in the package's placeholder colours.

   Set ON the card, not just :root: the package's own prefers-color-scheme block declares
   these on .searchstack-ask-card, and a declaration on the element beats an inherited one.
   Scoping ours to `html .searchstack-ask-card` outranks it, so this site's own light/dark
   toggle decides the overlay's appearance rather than the visitor's OS setting. */
html .searchstack-ask-card {
	--searchstack-ask-accent-color: #FD8802;
	--searchstack-ask-hover-color: rgba(253, 136, 2, .12);
	--searchstack-ask-selected-color: rgba(253, 136, 2, .24);
	--searchstack-ask-background-color: #fff;
	--searchstack-ask-text-color: #1f2937;
	--searchstack-ask-border-color: #e5e7eb;
	--searchstack-ask-muted-color: #8a94a6;
}
html.dark .searchstack-ask-card {
	--searchstack-ask-hover-color: rgba(253, 136, 2, .18);
	--searchstack-ask-selected-color: rgba(253, 136, 2, .32);
	--searchstack-ask-background-color: #1c2530;
	--searchstack-ask-text-color: #e5e7eb;
	--searchstack-ask-border-color: #374151;
	--searchstack-ask-muted-color: #9aa4b2;
}
/* The row lives in the suggestion dropdown, outside the card. */
html .searchstack-ask-row {
	--searchstack-ask-accent-color: #FD8802;
	--searchstack-ask-hover-color: rgba(253, 136, 2, .12);
	--searchstack-ask-selected-color: rgba(253, 136, 2, .24);
	--searchstack-ask-border-color: #e5e7eb;
	--searchstack-ask-muted-color: #8a94a6;
}

/* Hero Ask demo. Occupies the frame the scripted "wireless headphones" animation used to,
   but every element is live: the bar opens the real overlay, and each example asks a real
   question of this real site. */
.ss-askdemo .ss-searchbar { width: calc(100% - 44px); background: transparent; }
/* Bottom padding matters: the chips wrap to a second row at narrower widths, and with only
   2px here the last one sat flush against the footer rule. */
.ss-ask-examples { padding: 4px 22px 18px; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.ss-ask-examples-label {
	width: 100%;
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--si-secondary-color, #8a94a6);
	margin-bottom: .1rem;
}
.ss-ask-example {
	border: 1px solid var(--si-border-color, #e5e7eb);
	background: transparent;
	border-radius: 999px;
	padding: .35rem .8rem;
	font-size: .85rem;
	color: var(--si-body-color);
	cursor: pointer;
	transition: border-color .15s ease, background-color .15s ease;
}
.ss-ask-example:hover { border-color: var(--ss-orange); background: rgba(253, 136, 2, .08); }
.ss-ask-example:focus-visible { outline: 3px solid rgba(253, 136, 2, .45); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .ss-ask-example { transition: none; } }

/* Hero "Ask this site" launcher. A button wearing a search bar's clothes — it opens the
   Ask overlay rather than accepting input, so it must look inviting without pretending to
   be a field the reader can type into on the spot. Borrows the demo bar's shape so the two
   read as the same product. */
.ss-ask-bar {
	display: flex;
	align-items: center;
	gap: .75rem;
	width: 100%;
	max-width: 32rem;
	padding: 12px 16px;
	text-align: left;
	background: var(--si-body-bg, #fff);
	border: 2px solid var(--ss-orange);
	border-radius: 12px;
	cursor: text; /* it behaves like a search box, so promise that */
	transition: box-shadow .15s ease, transform .15s ease;
}
.ss-ask-bar:hover { box-shadow: 0 6px 20px rgba(253, 136, 2, .18); }
.ss-ask-bar:focus-visible { outline: 3px solid rgba(253, 136, 2, .45); outline-offset: 2px; }
.ss-ask-bar .bx { color: var(--ss-orange); font-size: 1.25rem; flex: none; }
.ss-ask-bar-text { flex: 1 1 auto; color: var(--si-body-color); font-size: 1rem; }
.ss-ask-bar-input {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	outline: 0;
	background: transparent;
	font-family: inherit;
	font-size: 1rem;
	color: var(--si-body-color);
}
.ss-ask-bar-input::placeholder { color: var(--si-secondary-color, #8a94a6); opacity: 1; }
/* The focus ring belongs on the bar, since the input has no border of its own. */
.ss-ask-bar:focus-within { box-shadow: 0 0 0 3px rgba(253, 136, 2, .28); }
@media (prefers-reduced-motion: reduce) {
	.ss-ask-bar { transition: none; }
}

.ss-livedemo .ss-searchbar {
	display: flex;
	align-items: center;
	gap: .75rem;
	margin: 22px 22px 0;
	padding: 13px 18px;
	border: 2px solid var(--ss-orange);
	border-radius: 12px;
}
.ss-livedemo .ss-searchbar .bx { color: var(--ss-orange); font-size: 1.25rem; flex: none; }
.ss-livedemo .ss-q { font-size: 1.05rem; font-weight: 500; color: var(--si-heading-color); }
.ss-caret {
	display: inline-block;
	width: 2px;
	height: 1.15em;
	background: var(--ss-orange);
	vertical-align: -3px;
	animation: ss-blink 1.1s steps(1) infinite;
}
@keyframes ss-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ss-caret { animation: none; } }

.ss-sugg {
	list-style: none;
	margin: 10px 8px 8px;
	padding: 0;
	min-height: 178px;
}
.ss-sugg li {
	display: flex;
	align-items: center;
	gap: .75rem;
	padding: 10px 14px;
	border-radius: 9px;
	font-size: .98rem;
}
.ss-sugg li .bx { flex: none; opacity: .5; font-size: 1.05rem; }
.ss-sugg li b { color: var(--si-heading-color); }
.ss-sugg li.sel { background: #FFF3E2; }
[data-bs-theme=dark] .ss-sugg li.sel { background: rgba(var(--ss-orange-rgb), .12); }
.ss-sugg li .tag {
	margin-left: auto;
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .05em;
	text-transform: uppercase;
	opacity: .6;
}
.ss-livedemo .ss-foot {
	display: flex;
	align-items: center;
	gap: 1.1rem;
	padding: 12px 22px;
	border-top: 1px solid #F0EDE5;
	font-size: .82rem;
	background: #FCFBF8;
}
[data-bs-theme=dark] .ss-livedemo .ss-foot { border-color: var(--si-border-color); background: rgba(255, 255, 255, .03); }
.ss-livedemo .ss-foot .ok { color: #2E9E5B; font-weight: 700; }
.ss-livedemo .ss-foot .api {
	margin-left: auto;
	font-family: var(--si-font-monospace, monospace);
	font-size: .72rem;
	opacity: .55;
}

/* ── steps strip ── */
.ss-steps {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.9rem;
	padding: 2.75rem 0 0;
	border-top: 1px solid #EDEAE2;
}
[data-bs-theme=dark] .ss-steps { border-color: var(--si-border-color); }
.ss-step { display: flex; gap: 1rem; align-items: flex-start; }
.ss-step .num {
	font-family: var(--si-font-monospace, monospace);
	font-weight: 700;
	color: var(--ss-ember);
	font-size: .88rem;
	border: 1.5px solid #F1C48C;
	border-radius: 999px;
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
}
[data-bs-theme=dark] .ss-step .num { color: var(--ss-orange); border-color: #54380a; }
.ss-step h3 { font-size: 1.02rem; font-weight: 700; letter-spacing: -.01em; margin: 0; }
.ss-step p { font-size: .9rem; margin: 4px 0 0; }

/* ── feature cards (class deliberately NOT .ss-card — that's a demos-bundle class) ── */
.ss-feat {
	background: #fff;
	border: 1px solid #EAE6DD;
	border-radius: 14px;
	padding: 28px 28px 24px;
	display: flex;
	flex-direction: column;
	gap: .7rem;
	min-width: 0;
	height: 100%;
	transition: border-color .15s, box-shadow .15s, transform .15s;
}
.ss-feat:hover {
	border-color: #F2C48C;
	box-shadow: 0 14px 30px -14px rgba(23, 26, 30, .14);
	transform: translateY(-2px);
}
[data-bs-theme=dark] .ss-feat { background: var(--si-secondary-bg); border-color: var(--si-border-color); }
[data-bs-theme=dark] .ss-feat:hover { border-color: #54380a; }
@media (prefers-reduced-motion: reduce) { .ss-feat { transition: none; } .ss-feat:hover { transform: none; } }
.ss-feat .icon {
	width: 42px;
	height: 42px;
	border-radius: 10px;
	background: #FFF1DD;
	display: flex;
	align-items: center;
	justify-content: center;
}
.ss-feat .icon .bx { font-size: 1.35rem; color: var(--ss-ember); }
[data-bs-theme=dark] .ss-feat .icon { background: rgba(var(--ss-orange-rgb), .14); }
[data-bs-theme=dark] .ss-feat .icon .bx { color: var(--ss-orange); }
.ss-feat h3 { font-size: 1.16rem; font-weight: 700; letter-spacing: -.01em; margin: 0; }
.ss-feat p { font-size: .97rem; margin: 0; }
.ss-feat code.req {
	display: block;
	background: #F6F4EE;
	border-radius: 8px;
	padding: 10px 14px;
	font-size: .8rem;
	color: #5B4A16;
	overflow-x: auto;
	white-space: nowrap;
	margin-top: auto;
}
[data-bs-theme=dark] .ss-feat code.req { background: rgba(255, 255, 255, .05); color: #E8D9AF; }

/* plain-language proof elements */
.ss-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.ss-pill {
	font-size: .8rem;
	font-weight: 600;
	color: #6B5B2E;
	background: #FBF3E4;
	border: 1px solid #F0DDB8;
	border-radius: 999px;
	padding: 5px 12px;
}
[data-bs-theme=dark] .ss-pill { color: #E8C989; background: rgba(var(--ss-orange-rgb), .1); border-color: #54380a; }
.ss-say {
	font-style: italic;
	background: #FFF6EA;
	border-left: 3px solid var(--ss-orange);
	border-radius: 0 10px 10px 0;
	padding: 10px 14px;
	margin: auto 0 0 !important;
	font-size: .92rem !important;
}
[data-bs-theme=dark] .ss-say { background: rgba(var(--ss-orange-rgb), .08); }
.ss-miniac { border: 1px solid #EAE6DD; border-radius: 10px; overflow: hidden; margin-top: auto; background: #fff; }
[data-bs-theme=dark] .ss-miniac { background: rgba(255, 255, 255, .03); border-color: var(--si-border-color); }
.ss-miniac .mi {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 9px 12px;
	border-bottom: 1px solid #F0EDE5;
	font-size: .88rem;
	font-weight: 500;
}
[data-bs-theme=dark] .ss-miniac .mi { border-color: var(--si-border-color); }
.ss-miniac .mi .bx { color: var(--ss-orange); }
.ss-miniac .ms { display: flex; align-items: center; gap: 8px; padding: 7px 12px; font-size: .85rem; }
.ss-miniac .ms .bx { opacity: .5; }
.ss-miniac .ms.first { background: #FFF3E2; }
[data-bs-theme=dark] .ss-miniac .ms.first { background: rgba(var(--ss-orange-rgb), .12); }
.ss-miniac b { color: var(--si-heading-color); }

/* ── Claude / console band ── */
.ss-claude {
	margin-top: 4rem;
	background: var(--ss-ink);
	color: #F4F2ED;
	border-radius: 18px;
	padding: 52px 56px;
	display: grid;
	grid-template-columns: 1.3fr .7fr;
	gap: 2.5rem;
	align-items: center;
	position: relative;
	overflow: hidden;
}
.ss-claude > * { position: relative; }
.ss-claude .wm { position: absolute; right: -34px; bottom: -60px; opacity: .1; pointer-events: none; width: 300px; height: 300px; filter: grayscale(1) brightness(1.6); }
.ss-claude h2 { font-size: 1.8rem; font-weight: 800; letter-spacing: -.02em; color: #fff; margin: 0; }
.ss-claude p { color: #B9BEC5; margin: .8rem 0 0; }
.ss-claude .quote { font-family: var(--si-font-monospace, monospace); font-size: .86rem; color: #FFA53C; }
.ss-claude .btn { justify-self: end; white-space: nowrap; }

/* ── home-page section heads (compare / pricing), matching the one hand-rolled inline in
      _Features above the feature grid ── */
.ss-secthead { max-width: 38em; margin: 4.5rem 0 1.75rem; }
.ss-secthead h2 { letter-spacing: -.03em; }
.ss-secthead h2 .ss-dot { color: var(--ss-orange); }
.ss-sectfoot { margin: 1.5rem 0 0; }
.ss-sectfoot a { font-weight: 600; text-decoration: none; }
.ss-sectfoot a:hover { text-decoration: underline; }
.ss-sectfoot .bx { vertical-align: -2px; margin-left: .3rem; transition: transform .15s; }
.ss-sectfoot a:hover .bx { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .ss-sectfoot .bx { transition: none; } .ss-sectfoot a:hover .bx { transform: none; } }

/* ── price strip. The numbers only — the plan limits live on /pricing ── */
.ss-tiers { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; }
.ss-tier {
	background: #fff;
	border: 1px solid #EAE6DD;
	border-radius: 14px;
	padding: 22px 18px;
	text-align: center;
	min-width: 0;
}
[data-bs-theme=dark] .ss-tier { background: var(--si-secondary-bg); border-color: var(--si-border-color); }
.ss-tier.hi { background: #FFF6EA; border-color: #F0DDB8; }
[data-bs-theme=dark] .ss-tier.hi { background: rgba(var(--ss-orange-rgb), .08); border-color: #54380a; }
.ss-tier .plan {
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ss-ember);
}
[data-bs-theme=dark] .ss-tier .plan { color: var(--ss-orange); }
.ss-tier .amt { font-size: 1.85rem; font-weight: 800; letter-spacing: -.02em; margin-top: .35rem; color: var(--si-heading-color); }
.ss-tier .per { font-size: .82rem; font-weight: 500; opacity: .55; }
.ss-tier .note { font-size: .84rem; margin-top: .3rem; }
.ss-tiernote { font-size: .95rem; max-width: 52em; margin: 1.5rem 0 0; }

@media (max-width: 991.98px) {
	.home-page .hero-grid { grid-template-columns: 1fr; gap: 2.75rem; }
	.ss-h1 { font-size: 2.6rem; }
	.ss-steps { grid-template-columns: 1fr; gap: 1.4rem; }
	.ss-claude { grid-template-columns: 1fr; padding: 36px 30px; }
	.ss-claude .btn { justify-self: start; }
	.ss-secthead { margin-top: 3.5rem; }
	.ss-tiers { grid-template-columns: repeat(2, 1fr); }
	.ss-tier:last-child { grid-column: 1 / -1; }
}

/* phones: scale the hero down so the title, subhead and demo fit the screen width */
@media (max-width: 575.98px) {
	.home-page .hero-grid { gap: 2rem; }
	.ss-eyebrow { font-size: .7rem; letter-spacing: .1em; }
	.ss-h1 { font-size: 2.05rem; letter-spacing: -.03em; }
	.ss-sub { font-size: 1.05rem; margin-top: 1rem; }
	.ss-meta { margin-top: 1.6rem; gap: .5rem 1.1rem; }
}

/* ── Documentation pages ── */

/* Slide-out menus (docs sidebar + the marketing navbar's offcanvas): size to the *visible*
   viewport. These used to be `vh-100`, and 100vh on a phone is the LARGE viewport — the screen
   as it would be with the browser's toolbars retracted — so the panel ran taller than what was
   actually on screen and its bottom-pinned "Sign In" button fell below the edge. Worst on
   Samsung Internet, which keeps a bottom toolbar up the whole time. 100dvh tracks the viewport
   that is really there; the 100vh line above it is the fallback for browsers without dvh. */
#componentsNav,
.ss-navbar .offcanvas {
	height: 100vh;
	height: 100dvh;
}
/* ≥ lg the docs sidebar docks under the fixed navbar, so its height loses that strip too. */
@media (min-width: 992px) {
	#componentsNav {
		top: 67px !important;
		height: calc(100vh - 67px);
		height: calc(100dvh - 67px);
	}
}
/* The pinned footer holds its height whatever the menu above it does, and clears the gesture bar. */
#componentsNav > .offcanvas-header:last-child,
.ss-navbar .offcanvas > .offcanvas-header:last-child {
	flex-shrink: 0;
	padding-bottom: calc(var(--si-offcanvas-padding-y) + env(safe-area-inset-bottom, 0px));
}

/* Docs sidebar (Learn/Reference): white panel on the paper ground, warm active state */
#componentsNav {
	background-color: #fff;
}
[data-bs-theme=dark] #componentsNav { background-color: var(--si-body-bg); }
#componentsNav .list-group-item {
	font-size: .95rem;
	color: var(--si-body-color);
}
#componentsNav .list-group-item:hover {
	background-color: #FBF6EC;
	color: var(--si-heading-color);
}
#componentsNav .list-group-item.active {
	background-color: #FFF3E2;
	color: var(--ss-ember);
	font-weight: 600;
	box-shadow: inset 3px 0 0 var(--ss-orange);
}
[data-bs-theme=dark] #componentsNav .list-group-item:hover { background-color: rgba(255, 255, 255, .04); }
[data-bs-theme=dark] #componentsNav .list-group-item.active {
	background-color: rgba(var(--ss-orange-rgb), .12);
	color: var(--ss-orange);
}

/* Readable line lengths and consistent imagery inside docs */
.docs-container p,
.docs-container ul,
.docs-container ol {
	max-width: 56rem;
}

.docs-container h1 {
	font-weight: 800;
	letter-spacing: -.03em;
}

.docs-container img.img-fluid {
	max-width: min(100%, 56rem);
	border: 1px solid #EAE6DD;
	box-shadow: 0 .275rem .75rem -.0625rem rgba(11, 15, 25, .06);
}
[data-bs-theme=dark] .docs-container img.img-fluid { border-color: var(--si-border-color); }

/* Callouts inside docs pick up the warm neutrals instead of the theme's cool grey */
.docs-container .alert-secondary {
	--si-alert-bg: #F6F4EE;
	--si-alert-border-color: #EAE6DD;
}
[data-bs-theme=dark] .docs-container .alert-secondary {
	--si-alert-bg: rgba(255, 255, 255, .04);
	--si-alert-border-color: var(--si-border-color);
}

/* Code blocks */
.docs-container pre.hljs {
	max-width: 56rem;
	padding: 1rem 1.25rem;
	border-radius: .5rem;
	overflow: auto;
}

/* Section headings get breathing room */
.docs-container h4,
.docs-container h5.h4 {
	margin-top: 1rem;
}

/* Tables */
.docs-container .table-responsive {
	max-width: 56rem;
}

/* Placeholder figure used where a screenshot does not exist yet */
.docs-placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	max-width: 56rem;
	min-height: 11rem;
	padding: 1.5rem;
	text-align: center;
	color: #9397ad;
	background-color: rgba(var(--ss-orange-rgb), .05);
	border: 2px dashed #EAE6DD;
	border-radius: .5rem;
}

.docs-placeholder i {
	font-size: 2.5rem;
	opacity: .55;
}

.docs-placeholder span {
	font-size: .875rem;
}

[data-bs-theme="dark"] .docs-placeholder {
	background-color: rgba(var(--ss-orange-rgb), .08);
	border-color: rgba(255, 255, 255, .14);
	color: #fff;
	opacity: .7;
}

/* ── Demo pages: shared shell + centred mast above each demo app ── */
.demo-page {
	padding: calc(67px + 2.5rem) 0 4rem;
	min-height: 90vh;
}
.demo-mast {
	text-align: center;
	max-width: 44rem;
	margin: 0 auto 1.75rem;
}
.demo-mast .ss-eyebrow { margin-bottom: .6rem; }
.demo-mast h1 {
	font-weight: 700;
	letter-spacing: -.03em;
	font-size: clamp(1.8rem, 4vw, 2.5rem);
	margin: 0;
}
.demo-mast p {
	color: var(--si-gray-600);
	margin: .6rem 0 0;
}
/* In → Config → Out recipe strip: the same story every demo tells */
.demo-recipe {
	list-style: none;
	margin: 1.5rem auto 0;
	padding: 0;
	display: flex;
	align-items: stretch;
	justify-content: center;
	flex-wrap: wrap;
	gap: .55rem;
	max-width: 52rem;
}
.demo-recipe li {
	position: relative;
	flex: 1 1 0;
	min-width: 13rem;
	text-align: left;
	background: var(--si-gray-100, #f6f7f8);
	border: 1px solid rgba(0, 0, 0, .08);
	border-radius: 14px;
	padding: .7rem .9rem;
	display: flex;
	flex-direction: column;
	gap: .2rem;
}
.demo-recipe-label {
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--si-gray-600);
}
.demo-recipe-in .demo-recipe-label { color: var(--ss-orange); }
.demo-recipe-out .demo-recipe-label { color: var(--ss-ember); }
.demo-recipe-val {
	font-size: .92rem;
	line-height: 1.35;
	color: var(--ss-ink);
}
/* connectors between the three steps */
.demo-recipe li + li::before {
	content: "→";
	position: absolute;
	left: -.5rem;
	top: 50%;
	transform: translate(-50%, -50%);
	font-size: 1rem;
	line-height: 1;
	color: var(--si-gray-600);
}
[data-bs-theme=dark] .demo-recipe li {
	background: rgba(255, 255, 255, .04);
	border-color: rgba(255, 255, 255, .1);
}
[data-bs-theme=dark] .demo-recipe-val { color: #E8E6E1; }
@media (max-width: 720px) {
	.demo-recipe { flex-direction: column; }
	.demo-recipe li { min-width: 0; }
	.demo-recipe li + li::before {
		content: "↓";
		left: 50%;
		top: -.5rem;
	}
}
/* "Build this with Claude" — hand-off to the visitor's own Claude */
.demo-build {
	margin-top: 1.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: .5rem 1rem;
}
.demo-build-copy {
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	font-size: .9rem;
	color: var(--si-gray-600);
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.demo-build-copy:hover { color: var(--ss-ember); }
.demo-build-hint {
	flex-basis: 100%;
	font-size: .85rem;
	color: var(--si-gray-600);
}

/* ── Lessons: the "build it yourself" CTA under an opener's recipe ── */
.lesson-start {
	margin-top: 1.75rem;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: .5rem 1rem;
}
.lesson-start-hint {
	flex-basis: 100%;
	font-size: .85rem;
	color: var(--si-gray-600);
}
/* A lesson opener already carries the primary CTA, so the Claude hand-off sits below it as the
   secondary path — hence the tighter top margin than a demo page's standalone .demo-build. */
.lesson-start + .demo-build { margin-top: 1rem; }

/* ── Lessons index: one card per lesson. The whole card is the anchor (never nest a link). ── */
.lesson-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	border-radius: 16px;
	border: 1px solid rgba(0, 0, 0, .08);
	background: var(--si-body-bg, #fff);
	text-decoration: none;
	color: inherit;
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.lesson-card:hover {
	transform: translateY(-3px);
	border-color: var(--ss-orange);
	box-shadow: 0 12px 28px -18px rgba(20, 16, 10, .45);
}
/* Card art is a screenshot of the finished example, and those are wide UI captures of wildly
   different shapes (the movie box is ~3.7:1). `cover` would crop a 3.7:1 shot into this box and
   show a meaningless zoomed sliver, so `contain` it and let the frame letterbox — the reader sees
   the whole thing. Revisit only if we ever shoot art at a fixed ratio per lesson. */
.lesson-card-img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: contain;
	object-position: center;
	padding: .8rem;
	background: var(--si-gray-100, #f6f7f8);
	border-bottom: 1px solid rgba(0, 0, 0, .06);
}
[data-bs-theme=dark] .lesson-card-img { background: rgba(255, 255, 255, .05); }
.lesson-card-body {
	padding: 1.1rem 1.15rem 1.25rem;
	display: flex;
	flex-direction: column;
	gap: .45rem;
	flex: 1 1 auto;
}
.lesson-card-title {
	font-size: 1.1rem;
	font-weight: 700;
	letter-spacing: -.02em;
	margin: 0;
	color: var(--ss-ink);
}
.lesson-card-blurb {
	font-size: .92rem;
	line-height: 1.45;
	color: var(--si-gray-600);
	margin: 0;
}
/* The card reuses the recipe chips at a smaller size: in → out, config dropped for space. */
.lesson-card-recipe {
	margin: .35rem 0 0;
	gap: .35rem;
	max-width: none;
}
.lesson-card-recipe li {
	min-width: 0;
	border-radius: 10px;
	padding: .4rem .55rem;
}
.lesson-card-recipe .demo-recipe-val { font-size: .78rem; line-height: 1.3; }
.lesson-card-recipe li + li::before { font-size: .8rem; }
.lesson-card-steps {
	margin-top: auto;
	padding-top: .5rem;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ss-orange);
}
.lesson-card:hover .lesson-card-title { color: var(--ss-ember); }
[data-bs-theme=dark] .lesson-card {
	background: rgba(255, 255, 255, .03);
	border-color: rgba(255, 255, 255, .1);
}
[data-bs-theme=dark] .lesson-card-title { color: #E8E6E1; }
@media (max-width: 720px) {
	.lesson-card-recipe { flex-direction: column; }
	.lesson-card-recipe li + li::before { content: "↓"; left: 50%; top: -.4rem; }
}

/* ── Mast pages (Compare, Terms, Privacy): give the old template classes real styles ── */
.documentation-section-mast {
	padding: 2.5rem 0 1rem;
}
.documentation-section-mast h1,
.documentation-section-mast h2 {
	font-weight: 800;
	letter-spacing: -.03em;
}
.documentation-container {
	padding-bottom: 3.5rem;
}
.documentation-container article p,
.documentation-container article ul,
.documentation-container article ol {
	max-width: 56rem;
}

/* ── Footer: paper ground + hairline, replacing the theme's cool grey band ── */
.site-footer {
	border-top: 1px solid #EDEAE2;
}
[data-bs-theme=dark] .site-footer { border-top-color: var(--si-border-color); }