/* Night Foundry. Layout: one centered column (~44rem) for reading, widening to a 72rem grid for card sections; the network image appears only in page heroes. */
:root {
	--night: #0b1017;
	--night-2: #101822;
	--panel: #141e2a;
	--line: #223040;
	--fg: #e9edf1;
	--muted: #aab4bf;
	--dim: #74828f;
	--bronze: #d08a43;
	--bronze-hi: #e8a965;
	--verdigris: #63b5aa;
	--copper: #c4703a;
	--tin: #b4bcc4;
	--display: "Bricolage Grotesque", "Avenir Next", "Helvetica Neue", Arial, sans-serif;
	--body: "IBM Plex Sans", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--mono: "IBM Plex Mono", "SFMono-Regular", Menlo, Consolas, monospace;
	color-scheme: dark;
}
* { box-sizing: border-box; }
/* Elements hidden with the hidden attribute stay hidden even when a rule gives them a display (the pop-up, the home page's scroll arrow). */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { background: var(--night); color: var(--fg); font-family: var(--body); font-size: 17px; line-height: 1.6; margin: 0; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; }
a { color: var(--bronze-hi); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--bronze-hi); outline-offset: 3px; }

/* ---------- frame ---------- */
.gutter { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.col { max-width: 44rem; margin: 0 auto; min-width: 0; }
.wide { max-width: 72rem; margin: 0 auto; min-width: 0; }
section.band { padding-block: clamp(3.5rem, 8vw, 6rem); }
section.band.alt { background: var(--night-2); border-block: 1px solid var(--line); }

/* ---------- type ---------- */
h1, h2, h3 { margin: 0; text-wrap: balance; }
h1 { font-family: var(--display); font-weight: 700; font-size: clamp(2.6rem, 8vw, 4.6rem); line-height: 1.0; letter-spacing: -0.025em; }
h2 { font-family: var(--display); font-weight: 700; font-size: clamp(1.9rem, 4.6vw, 2.7rem); line-height: 1.08; letter-spacing: -0.02em; }
h3 { font-family: var(--body); font-weight: 600; font-size: 1.05rem; line-height: 1.35; }
p { margin: 0; }
.eyebrow { font-family: var(--mono); font-size: 0.76rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--verdigris); margin-bottom: 1rem; }
.section-head { display: grid; gap: 1rem; margin-bottom: 2.4rem; max-width: 60rem; }
/* A sentence in a heading stays on one line when it fits; lines break between sentences first. */
.phrase { display: inline-block; }
/* The product name is always set as bold robuster.ai. */
.brand-name { font-weight: 600; white-space: nowrap; }
h1 .brand-name, h2 .brand-name, h3 .brand-name, .answer .brand-name, .verified .brand-name { font-weight: inherit; }
.section-head p { color: var(--muted); font-size: 1.08rem; max-width: 60ch; }
.stack { display: grid; gap: 1.1rem; }
.stack p { max-width: 62ch; }
.muted { color: var(--muted); }
.closer { font-family: var(--display); font-size: clamp(1.3rem, 3vw, 1.6rem); font-weight: 500; letter-spacing: -0.01em; margin-top: 2.4rem; color: var(--fg); }
sup.fn { font-family: var(--mono); font-size: 0.68em; line-height: 0; vertical-align: 0.55em; margin-left: 0.12em; }
sup.fn a { color: var(--bronze); text-decoration: none; padding: 0 0.08em; }
sup.fn a:hover { text-decoration: underline; }

/* ---------- nav ---------- */
.nav { position: absolute; inset: 0 0 auto; z-index: 5; padding-top: calc(env(safe-area-inset-top, 0px) + 1rem); }
.nav .wide { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.brand { display: flex; align-items: center; gap: 0.6rem; color: var(--fg); text-decoration: none; font-weight: 600; letter-spacing: 0.01em; }
.brand img { width: 30px; height: 30px; }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: clamp(0.9rem, 2.5vw, 1.8rem); font-size: 0.93rem; }
.nav a.link { color: var(--fg); text-decoration: none; opacity: 0.85; }
.nav a.link:hover, .nav a.link[aria-current="page"] { opacity: 1; color: var(--bronze-hi); }
@media (max-width: 640px) { .nav li.optional { display: none; } .brand span { display: none; } }

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; overflow: clip; background: var(--night); isolation: isolate; }
.hero > img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; z-index: -2; filter: saturate(0.78) brightness(0.9); }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 70% 55% at 50% 42%, rgba(11,16,23,0.72) 0%, rgba(11,16,23,0.35) 70%), linear-gradient(180deg, rgba(11,16,23,0.6) 0%, rgba(11,16,23,0.2) 45%, var(--night) 100%); }
.hero .inner { padding-block: calc(env(safe-area-inset-top, 0px) + 6.5rem) clamp(4rem, 9vw, 6.5rem); text-align: center; display: grid; justify-items: center; gap: 1.3rem; }
/* On short screens the robot shrinks with the screen's height, so the buttons and the scroll arrow under them stay in view. */
.hero .robot { width: min(clamp(130px, 26vw, 175px), max(95px, 18vh)); filter: drop-shadow(0 10px 30px rgba(0,0,0,0.55)); margin-bottom: 0.6rem; }
.hero .lede { font-size: clamp(1.08rem, 2.4vw, 1.28rem); color: #d4dbe2; max-width: 36ch; }
.hero.short .inner { padding-block: calc(env(safe-area-inset-top, 0px) + 7rem) 4rem; }
.hero.short .robot { width: 110px; }
/* The robot alone, without its name underneath, at about the same height. */
.hero.short .robot.solo { width: 92px; }
/* The home page's "more below" arrow: it sits under the hero's buttons and sticks to the foot of the screen when they reach it, until the first section is fully in view. Hidden, it keeps its space so nothing jumps. The hero clips rather than hides its overflow so the arrow can stick. */
.scroll-cue { position: sticky; bottom: calc(env(safe-area-inset-bottom, 0px) + 1rem); z-index: 5; margin: 0.3rem 0 -2.5rem; width: 2.75rem; height: 2.75rem; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(208,138,67,0.55); background: rgba(11,16,23,0.6); color: var(--bronze-hi); }
.scroll-cue.gone { visibility: hidden; }
.scroll-cue:hover { border-color: var(--bronze-hi); background: rgba(11,16,23,0.85); }
.scroll-cue svg { width: 1.3rem; height: 1.3rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-reduced-motion: no-preference) { .scroll-cue svg { animation: cue-bounce 1.8s ease-in-out infinite; } }
@keyframes cue-bounce { 0%, 100% { transform: translateY(-3px); } 50% { transform: translateY(4px); } }

/* ---------- buttons ---------- */
.actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.8rem; margin-top: 0.6rem; }
.btn { display: inline-block; font-family: var(--body); font-weight: 600; font-size: 0.98rem; padding: 0.8rem 1.25rem; border-radius: 4px; text-decoration: none; border: 1.5px solid transparent; cursor: pointer; }
.btn.primary { background: var(--bronze); color: #150d05; }
.btn.primary:hover { background: var(--bronze-hi); }
.btn.ghost { border-color: rgba(233,237,241,0.32); color: var(--fg); }
.btn.ghost:hover { border-color: var(--bronze-hi); color: var(--bronze-hi); }
@media (prefers-reduced-motion: no-preference) { .btn { transition: background 140ms ease, border-color 140ms ease, color 140ms ease; } }

/* ---------- lists of claims ---------- */
.claims { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.claims li { padding-block: 1.4rem; border-top: 1px solid var(--line); display: grid; gap: 0.4rem; }
.claims li:last-child { border-bottom: 1px solid var(--line); }
.claims li p { color: var(--muted); max-width: 62ch; }
.claims h3 { color: var(--fg); }

/* ---------- grids ---------- */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); gap: 2rem 2.4rem; }
.grid .item { display: grid; gap: 0.45rem; align-content: start; min-width: 0; padding-top: 1rem; border-top: 1px solid var(--line); }
.grid .item p { color: var(--muted); }
.grid .item .tag { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bronze); }

/* ---------- steps + proof ---------- */
.how { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: 3rem; align-items: start; }
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; display: grid; gap: 1.4rem; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 2.4rem 1fr; gap: 0.6rem; }
.steps li::before { content: counter(step); font-family: var(--mono); color: var(--bronze); font-size: 0.95rem; border: 1px solid var(--line); border-radius: 50%; width: 2rem; height: 2rem; display: grid; place-items: center; }
.steps li div { min-width: 0; }
.steps p { color: var(--muted); }
.example { display: grid; gap: 1rem; min-width: 0; }
.example .setup { color: var(--muted); font-size: 0.98rem; }
.proof { font-family: var(--mono); font-size: 0.82rem; line-height: 1.6; background: #0a121b; border: 1px solid var(--line); border-radius: 6px; padding: 1.1rem 1.2rem; overflow-x: auto; white-space: pre; color: #cdd5dd; }
.proof .k { color: var(--bronze-hi); }
.proof .c { color: var(--dim); }
.proof .q { color: var(--verdigris); }

/* ---------- contact ---------- */
.contact { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: 2.5rem; align-items: start; }
form.contact-form { display: grid; gap: 1rem; min-width: 0; }
.contact-form label { display: grid; gap: 0.35rem; font-weight: 500; font-size: 0.95rem; }
.contact-form .optional { color: var(--dim); font-weight: 400; }
.contact-form input, .contact-form textarea { font: inherit; color: var(--fg); background: var(--panel); border: 1.5px solid var(--line); border-radius: 4px; padding: 0.7rem 0.8rem; width: 100%; }
.contact-form textarea { min-height: 8rem; resize: vertical; }
.contact-form input:focus, .contact-form textarea:focus { border-color: var(--bronze); }
.contact-form button { justify-self: start; }
.honeypot { position: absolute; left: -9999px; }
.form-note { font-size: 0.88rem; color: var(--verdigris); }

/* ---------- sources ---------- */
ol.sources { margin: 0; padding-left: 1.8rem; display: grid; gap: 1rem; color: var(--muted); }
ol.sources li { padding-left: 0.3rem; overflow-wrap: anywhere; scroll-margin-top: 2rem; }
ol.sources li::marker { font-family: var(--mono); color: var(--bronze); }
ol.sources li:target { color: var(--fg); background: rgba(208,138,67,0.08); outline: 1px solid rgba(208,138,67,0.35); outline-offset: 6px; border-radius: 2px; }
ol.sources .used { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.7rem; }
ol.sources .used a { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.95rem; font-weight: 600; color: var(--bronze-hi); text-decoration: none; border: 1.5px solid var(--bronze); border-radius: 4px; padding: 0.45rem 0.9rem; }
ol.sources .used a:hover { background: rgba(208,138,67,0.14); }
/* the source a footnote just opened: its way back is the main button */
ol.sources li:target .used a { background: var(--bronze); color: #150d05; }
ol.sources li:target .used a:hover { background: var(--bronze-hi); }

/* ---------- footer ---------- */
footer.site { border-top: 1px solid var(--line); padding-block: 2.2rem calc(env(safe-area-inset-bottom, 0px) + 2.2rem); font-size: 0.9rem; color: var(--dim); }
footer.site .wide { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; }
footer.site nav { display: flex; gap: 1.4rem; flex-wrap: wrap; }
footer.site a { color: var(--muted); text-decoration: none; }
footer.site a:hover { color: var(--bronze-hi); }

/* ---------- mini exchange (home page preview of how.html) ---------- */
.mini { display: grid; gap: 0.55rem; background: #0a1118; border: 1px solid var(--line); border-radius: 10px; padding: 1rem; min-width: 0; }
.mini-turn { max-width: 88%; border-radius: 8px; padding: 0.5rem 0.75rem; display: grid; gap: 0.3rem; font-size: 0.88rem; line-height: 1.45; min-width: 0; }
.mini-turn.llm { justify-self: start; background: var(--panel); border: 1px solid var(--line); border-top-left-radius: 2px; }
.mini-turn.rob { justify-self: end; background: linear-gradient(180deg, rgba(208,138,67,0.10), rgba(208,138,67,0.04)); border: 1px solid rgba(208,138,67,0.45); border-top-right-radius: 2px; }
.mini-turn.out { border-style: dashed; }
.mini-label { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); }
.mini-turn.rob .mini-label { color: var(--bronze); }
.mini-turn.out .mini-label { color: var(--verdigris); }
.mini-doc { display: inline-block; font-family: var(--mono); font-size: 0.7rem; color: var(--tin); border: 1px solid var(--line); border-left: 2px solid var(--tin); border-radius: 3px; padding: 0.05rem 0.45rem; margin-left: 0.2rem; white-space: nowrap; }
.mini-answer { font-family: var(--display); font-weight: 700; font-size: 1rem; line-height: 1.25; }
.mini-answer span { color: var(--bronze-hi); }
.mini-sum { font-family: var(--mono); font-size: 0.7rem; color: var(--muted); }
.mini-step { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); gap: 0.4rem; border-top: 1px solid rgba(208,138,67,0.2); padding-top: 0.3rem; }
.mini-step > span:first-child { font-family: var(--mono); font-size: 0.74rem; color: var(--bronze-hi); }
.mini-step i { display: block; font-style: normal; font-family: var(--mono); font-size: 0.7rem; color: var(--muted); }
.mini-seal { justify-self: start; display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.25rem 0.7rem 0.25rem 0.35rem; border: 1px solid var(--bronze); border-radius: 999px; background: linear-gradient(90deg, rgba(208,138,67,0.18), rgba(208,138,67,0.04)); font-family: var(--display); font-weight: 700; font-size: 0.82rem; color: var(--bronze-hi); }
.mini-seal img { width: 1.15rem; height: 1.15rem; }
.mini-turn:nth-last-child(2) { opacity: 0.55; }
.mini-more { text-align: center; font-size: 1.4rem; line-height: 1; letter-spacing: 0.2em; color: var(--dim); padding-top: 0.1rem; }


/* ---------- footnote pop-ups ---------- */
.fn-pop { position: absolute; z-index: 20; width: max-content; max-width: min(24rem, calc(100vw - 32px)); background: var(--panel); border: 1px solid var(--line); border-top: 2px solid var(--bronze); border-radius: 6px; padding: 0.8rem 0.95rem; box-shadow: 0 14px 40px rgba(0,0,0,0.5); display: grid; gap: 0.45rem; font-size: 0.86rem; line-height: 1.5; color: var(--muted); }
.fn-pop-n { font-family: var(--mono); font-size: 0.72rem; color: var(--bronze); }
.fn-pop-cite { color: var(--fg); overflow-wrap: anywhere; }
.fn-pop a { color: var(--bronze-hi); }
.fn-pop-go { font-size: 0.82rem; text-decoration: none; }
.fn-pop-go:hover { text-decoration: underline; }
.item[id] { scroll-margin-top: 1.5rem; }
.item:target { outline: 1px solid rgba(208,138,67,0.45); outline-offset: 10px; border-radius: 2px; }

/* ---------- alloy equations (vision page) ---------- */
.alloy-eq { display: grid; grid-template-columns: minmax(0, 1fr) 2.2rem minmax(0, 1fr) 2.2rem minmax(0, 1fr); align-items: stretch; gap: 0.6rem; margin-top: 1rem; }
.alloy-eq + .alloy-eq { margin-top: 1.2rem; }
.metal { background: var(--panel); border: 1px solid var(--line); border-top: 3px solid var(--metal); border-radius: 4px; padding: 1rem 1.1rem; display: grid; gap: 0.3rem; align-content: start; min-width: 0; }
.metal .sym { font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.06em; color: var(--metal); }
.metal .sym .brand-name { font-weight: 500; }
.metal > b { font-family: var(--display); font-size: 1.3rem; font-weight: 700; line-height: 1.15; }
.metal small { font-size: 0.9rem; color: var(--muted); }
.metal.cu { --metal: var(--copper); }
.metal.sn { --metal: var(--tin); }
.metal.br { --metal: var(--bronze); background: linear-gradient(180deg, rgba(208,138,67,0.14), var(--panel) 65%); }
.op { display: grid; place-items: center; font-family: var(--display); font-size: 1.6rem; color: var(--dim); }
.op.plus::before { content: "+"; }
.op.makes::before { content: "\2192"; color: var(--bronze-hi); }
.col-left { max-width: 44rem; margin-top: 2.4rem; }
@media (max-width: 720px) {
	.alloy-eq { grid-template-columns: minmax(0, 1fr); gap: 0.3rem; }
	/* Stacked, the two equations would run together; a rule marks where one ends and the next begins. */
	.alloy-eq + .alloy-eq { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--line); }
	.op { font-size: 1.3rem; }
	.op.makes::before { content: "\2193"; }
}
/* A closing line kept on one line wherever the screen is wide enough; on narrow screens it breaks between its sentences. */
@media (min-width: 900px) { .closer.one-line { white-space: nowrap; } }
/* It follows its paragraph more closely than a section's usual closing line: about one line less space above it. */
.closer.one-line { margin-top: 0.8rem; }