style.css

/* Homebody landing page
   The same language as the dashboard: a cream enclosure, dark displays for anything live,
   Instrument Serif for the human side, DM Mono for the machine side, one signal colour.
   Fonts are the dashboard's own subset WOFF2 files, so the page makes no outside requests. */

@font-face { font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("homebody/static/InstrumentSerif-Regular.woff2") format("woff2"); }
@font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url("homebody/static/InstrumentSerif-Italic.woff2") format("woff2"); }
@font-face { font-family: "DM Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("homebody/static/DMMono-Regular.woff2") format("woff2"); }
@font-face { font-family: "DM Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("homebody/static/DMMono-Medium.woff2") format("woff2"); }

:root {
  color-scheme: light;
  --paper: #f1ebe0;
  --paper-2: #e9e2d4;
  --paper-3: #fbf8f2;
  --ink: #17140f;
  --ink-2: #5f584d;
  --rule: rgba(23, 20, 15, .5);
  --line: rgba(23, 20, 15, .14);
  --line-strong: rgba(23, 20, 15, .3);
  --screen: #15120f;
  --screen-2: #211c18;
  --screen-ink: #f4ede1;
  --screen-dim: #9a9083;
  --screen-line: rgba(244, 237, 225, .14);
  --orange: #ff6b2c;
  --orange-ink: #1a0b03;
  --orange-text: #d4470f;
  --violet: #8c7bff;
  --ok: #1f9a68;
  --serif: "Instrument Serif", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --mono: "DM Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --paper: #0f0e10;
    --paper-2: #171518;
    --paper-3: #1d1a1d;
    --ink: #f2ece2;
    --ink-2: #9b948a;
    --rule: rgba(242, 236, 226, .3);
    --line: rgba(242, 236, 226, .1);
    --line-strong: rgba(242, 236, 226, .22);
    --screen: #1a1719;
    --screen-2: #252022;
    --orange-text: #ff8a55;
    --ok: #2fbf84;
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper) radial-gradient(ellipse at 50% -10%, rgba(255, 248, 236, .9) 0, transparent 55%); color: var(--ink); -webkit-font-smoothing: antialiased; }
@media (prefers-color-scheme: dark) { body { background: var(--paper); } }
a { color: inherit; }
code { font-family: var(--mono); font-size: .9em; }
::selection { color: var(--orange-ink); background: var(--orange); }
a:focus-visible, [tabindex="0"]:focus-visible { outline: 2.5px solid var(--orange); outline-offset: 4px; }

/* Displays: the dark surfaces where something live is shown. */
.display { position: relative; color: var(--screen-ink); background: var(--screen); }
.display::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 3px); pointer-events: none; }
.display > * { position: relative; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 10; width: min(1240px, calc(100% - 48px)); height: 72px; margin: 0 auto; display: flex; align-items: center; gap: 28px; border-bottom: 1.5px solid var(--rule); background: var(--paper); }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-family: var(--serif); font-size: 1.5rem; letter-spacing: -.01em; }
.brand-mark { width: 30px; height: 30px; flex: 0 0 auto; }
.brand-visor { fill: var(--paper); }
.site-header nav { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.site-header nav a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 15px; border-radius: 999px; color: var(--ink-2); text-decoration: none; font-size: .9rem; font-weight: 600; transition: color .2s ease, background .2s ease; }
.site-header nav a:hover, .site-header nav a:focus-visible { color: var(--ink); background: rgba(127, 120, 110, .12); }
.site-header .nav-cta { margin-left: 8px; color: var(--paper); background: var(--ink); }
.site-header .nav-cta:hover, .site-header .nav-cta:focus-visible { color: var(--paper); background: var(--ink); filter: brightness(1.15); }

main, footer { width: min(1240px, calc(100% - 48px)); margin: 0 auto; }

/* Type */
.eyebrow, .number, .feature-tag, .node-label { margin: 0; font-family: var(--mono); font-size: .68rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--orange-text); }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; letter-spacing: -.02em; }

/* Hero */
.hero { min-height: 680px; display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: clamp(40px, 6vw, 90px); padding: 70px 0 90px; border-bottom: 1.5px solid var(--rule); }
.hero h1 { margin: 22px 0 26px; font-size: clamp(3.6rem, 7.6vw, 7rem); line-height: .9; text-wrap: balance; }
.hero h1 em { font-style: italic; color: var(--orange); }
.lede { max-width: 640px; margin: 0; color: var(--ink-2); font-size: clamp(1.05rem, 1.6vw, 1.25rem); line-height: 1.6; text-wrap: pretty; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 34px; }
.button { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0 20px; border: 1.5px solid var(--ink); border-radius: 999px; text-decoration: none; font-size: .9rem; font-weight: 650; transition: transform .2s ease, filter .2s ease, background .2s ease; }
.button:hover, .button:focus-visible { transform: translateY(-1px); }
.button.primary { color: var(--paper); background: var(--ink); }
.button.primary:hover { filter: brightness(1.15); }
.button.secondary { color: var(--ink); background: transparent; }
.button.secondary:hover { background: rgba(127, 120, 110, .12); }
.proof { display: flex; flex-wrap: wrap; gap: 28px; margin-top: 42px; color: var(--ink-2); font-size: .78rem; }
.proof span { display: flex; flex-direction: column; gap: 4px; }
.proof strong { color: var(--ink); font-family: var(--mono); font-weight: 500; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; }

/* The hero photo sits in a device display. */
.hero-media { margin: 0; padding: 14px 14px 16px; border-radius: 28px; box-shadow: inset 0 0 0 1px #000, 0 0 0 6px var(--paper-2), 0 0 0 7.5px var(--ink), 0 30px 60px -30px rgba(23, 20, 15, .6); }
@media (prefers-color-scheme: dark) { .hero-media { box-shadow: inset 0 0 0 1px rgba(242, 236, 226, .12), 0 0 0 6px var(--paper-2), 0 0 0 7.5px rgba(242, 236, 226, .22); } }
.hero-media-top { display: flex; justify-content: space-between; gap: 12px; padding: 6px 8px 12px; color: var(--screen-dim); font-family: var(--mono); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; }
.hero-media-top i { display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 10px var(--orange); vertical-align: 1px; }
.hero-media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 14px; }
.hero-media figcaption { padding: 14px 8px 2px; color: var(--screen-dim); font-size: .72rem; line-height: 1.55; }

/* Three roles */
.mode-strip { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1.5px solid var(--rule); }
.mode-strip article { padding: 48px 3.5vw 52px 0; }
.mode-strip article + article { padding-left: 3.5vw; border-left: 1px solid var(--line); }
.mode-strip h2 { margin: 20px 0 12px; font-size: clamp(1.8rem, 3vw, 2.5rem); line-height: 1.05; }
.mode-strip p:last-child { margin: 0; max-width: 560px; color: var(--ink-2); line-height: 1.65; }

/* Sections */
.section { padding: 110px 0; border-bottom: 1.5px solid var(--rule); }
.section-heading { display: grid; grid-template-columns: 1fr 1.1fr; column-gap: 7vw; align-items: start; }
.section-heading .eyebrow { grid-column: 1; }
.section-heading h2 { grid-column: 1; margin: 22px 0 0; font-size: clamp(2.8rem, 5.6vw, 5.2rem); line-height: .96; text-wrap: balance; }
.section-heading > p:last-child { grid-column: 2; grid-row: 1 / span 2; margin: 0; max-width: 550px; color: var(--ink-2); font-size: 1.08rem; line-height: 1.75; }
.section-heading a { text-underline-offset: 4px; text-decoration-color: var(--line-strong); }
.section-heading.compact { display: block; }
.section-heading.compact h2 { max-width: 800px; }

/* Capability matrix */
.matrix-wrap { margin-top: 64px; overflow-x: auto; border: 1.5px solid var(--rule); border-radius: 20px; background: var(--paper-3); }
.matrix-wrap table { width: 100%; min-width: 820px; border-collapse: collapse; }
.matrix-wrap th, .matrix-wrap td { padding: 20px 22px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.matrix-wrap thead th { color: var(--ink-2); font-family: var(--mono); font-size: .64rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.matrix-wrap tbody th { width: 31%; color: var(--ink); font-size: .92rem; font-weight: 650; }
.matrix-wrap tbody td { color: var(--ink-2); font-size: .88rem; line-height: 1.5; }
.matrix-wrap tbody tr:last-child > * { border-bottom: 0; }

/* Architecture and diagrams: diagrams are drawn on dark, so they sit in displays. */
.architecture-figure { margin: 64px 0 0; }
.diagram-scroll { overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-gutter: stable; }
.diagram-scroll:focus-visible { outline: 2.5px solid var(--orange); outline-offset: 4px; }
.architecture-figure .diagram-scroll { border-radius: 20px; background: var(--screen); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .6), 0 0 0 5px var(--paper-2), 0 0 0 6.5px var(--rule); }
.architecture-figure img { display: block; width: 100%; min-width: 900px; height: auto; }
.architecture-figure figcaption { max-width: 900px; margin-top: 22px; color: var(--ink-2); line-height: 1.65; font-size: .88rem; }
.diagram-hint { display: none; margin: 0 0 10px; color: var(--orange-text); font-family: var(--mono); font-size: .66rem; letter-spacing: .08em; }
.diagram-summary { max-width: 960px; margin: 12px 0 0; color: var(--ink-2); font-size: .82rem; line-height: 1.65; }
.diagram-summary strong { color: var(--ink); }

/* Visual grid */
.visuals .hero-actions { margin-top: 32px; }
.agent-setup .agent-steps { margin-top: 64px; border-top: 1.5px solid var(--rule); }
.agent-setup .agent-steps h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); }
.agent-setup-shot { margin-top: 48px; }
.agent-setup-shot img { aspect-ratio: auto; }
.agent-setup-shot figcaption a { color: var(--ink); }
.visual-grid { margin-top: 64px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.visual-card { margin: 0; overflow: hidden; border: 1.5px solid var(--rule); border-radius: 20px; background: var(--paper-3); }
.visual-card-wide { grid-column: 1 / -1; }
.visual-card img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: contain; background: var(--screen); }
.visual-card-wide img { aspect-ratio: 5 / 3; }
.visual-card-wide .diagram-scroll img { width: 100%; min-width: 900px; height: auto; aspect-ratio: auto; }
.visual-card figcaption { padding: 18px 20px 22px; color: var(--ink-2); font-size: .85rem; line-height: 1.65; }
.visual-card figcaption strong { display: block; margin-bottom: 4px; color: var(--ink); }
.visual-card .diagram-summary { padding: 0 20px 22px; margin-top: -10px; }
.visual-card .diagram-hint { padding: 16px 20px 0; }

/* Privacy states */
.privacy { display: grid; grid-template-columns: .65fr 1.35fr; column-gap: 8vw; }
.privacy .section-heading { grid-column: 1; }
.state-table { grid-column: 2; border: 1.5px solid var(--rule); border-radius: 20px; overflow: hidden; background: var(--paper-3); }
.state-row { min-height: 68px; display: grid; grid-template-columns: 1.1fr repeat(4, 1fr); align-items: center; padding: 0 22px; border-bottom: 1px solid var(--line); color: var(--ink-2); font-size: .88rem; }
.state-row:last-child { border-bottom: 0; }
.state-row strong { color: var(--ink); font-family: var(--serif); font-size: 1.25rem; font-weight: 400; }
.header-row { min-height: 48px; background: var(--paper-2); font-family: var(--mono); font-size: .62rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.state-row .on { color: var(--ok); font-weight: 650; }
.state-row .off { color: var(--orange-text); font-weight: 650; }
.privacy-note { grid-column: 2; max-width: 750px; margin: 28px 0 0; color: var(--ink-2); line-height: 1.65; font-size: .9rem; }

/* Install */
.install { display: grid; grid-template-columns: .85fr 1.15fr; gap: 8vw; align-items: center; }
.install h2 { margin: 22px 0; font-size: clamp(2.8rem, 5.6vw, 5rem); line-height: .96; }
.install-copy > p:not(.eyebrow) { color: var(--ink-2); line-height: 1.7; }
.install-links { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 30px; }
.install-links a { font-weight: 600; text-underline-offset: 5px; text-decoration-color: var(--line-strong); }
.install-links a:hover { text-decoration-color: var(--orange); }
.terminal { margin: 0; padding: 30px 32px; border-radius: 24px; color: var(--screen-ink); background: var(--screen); font-family: var(--mono); font-size: clamp(.68rem, 1.1vw, .84rem); line-height: 2; overflow-x: auto; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .6), 0 0 0 5px var(--paper-2), 0 0 0 6.5px var(--rule); }
.terminal > span { color: var(--orange); }
.terminal .terminal-comment { color: var(--screen-dim); }
.terminal .terminal-accent { color: #7fd9a8; }

/* Footer */
footer { min-height: 150px; display: flex; align-items: center; gap: 30px; }
footer div { display: flex; flex-direction: column; gap: 6px; }
footer div strong { font-family: var(--serif); font-size: 1.3rem; font-weight: 400; }
footer div span { color: var(--ink-2); font-size: .82rem; }
footer nav { margin-left: auto; display: flex; gap: 24px; }
footer a { color: var(--ink-2); text-decoration: none; font-size: .84rem; font-weight: 600; }
footer a:hover, footer a:focus-visible { color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}

@media (max-width: 980px) {
  .site-header nav a:not(.nav-cta) { display: none; }
  .hero { grid-template-columns: 1fr; min-height: 0; padding-top: 70px; }
  .mode-strip { grid-template-columns: 1fr; }
  .mode-strip article { padding: 38px 0; }
  .mode-strip article + article { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
  .section-heading { grid-template-columns: 1fr; }
  .section-heading > p:last-child { grid-column: 1; grid-row: auto; margin-top: 30px; }
  .privacy, .install { grid-template-columns: 1fr; }
  .state-table, .privacy-note { grid-column: 1; }
  .state-table { margin-top: 50px; }
  .terminal { margin-top: 25px; }
}

@media (max-width: 650px) {
  .site-header, main, footer { width: min(100% - 28px, 1240px); }
  .site-header { height: 64px; }
  .nav-cta { padding: 0 14px !important; }
  .hero { padding: 54px 0 70px; }
  .hero h1 { font-size: clamp(3.2rem, 15vw, 4.6rem); }
  .hero-media { padding: 10px 10px 12px; border-radius: 22px; box-shadow: inset 0 0 0 1px #000, 0 0 0 4px var(--paper-2), 0 0 0 5.5px var(--ink); }
  .section { padding: 80px 0; }
  .matrix-wrap { margin-top: 40px; }
  .matrix-wrap th, .matrix-wrap td { padding: 15px; }
  .architecture-figure { margin-top: 40px; }
  .diagram-hint { display: block; }
  .diagram-scroll { scrollbar-color: var(--orange) var(--paper-2); scrollbar-width: thin; }
  .diagram-scroll::-webkit-scrollbar { height: 10px; }
  .diagram-scroll::-webkit-scrollbar-track { background: var(--paper-2); }
  .diagram-scroll::-webkit-scrollbar-thumb { border: 2px solid var(--paper-2); border-radius: 999px; background: var(--orange); }
  .visual-grid { margin-top: 40px; grid-template-columns: 1fr; }
  .visual-card-wide { grid-column: 1; }
  .state-row { grid-template-columns: 1.1fr repeat(4, .9fr); padding: 0 14px; font-size: .64rem; gap: 5px; }
  .state-row strong { font-size: 1rem; }
  .header-row { font-size: .54rem; }
  footer { align-items: flex-start; flex-direction: column; justify-content: center; padding: 30px 0; }
  footer nav { margin-left: 0; flex-wrap: wrap; }
}