/* ForgeOS public site — the product, shown as the product (read with
 * forgeos-site-product.js).
 *
 * Owner, 2026-10-17: "The website as is doesn't represent the signed-in
 * experience and Ember." So the homepage leads with the chat a customer
 * actually works in: Ember's face, what they said in one soft bubble on the
 * right, Ember's replies as plain well-set text beside its face, a plan, the
 * build's steps, and a preview. The recipe below is the signed-in chat's own
 * (forgeos-chat.css, the "--e-" layer): warm paper mixed from the platform
 * tokens, the same column, bubble, type and composer metrics -- restated
 * here rather than loading that 116 KB sheet on a page a visitor has to wait
 * for. Its class names are "hc-" so the chat's own scripts (forgeos-guide.js
 * looks for .cw-composer-wrap) never mistake this page for the chat.
 *
 * Every colour is a platform token or a mix of two, so light and dark both
 * follow the theme. Ember's orange is decoration only -- never the colour of
 * words -- because orange on paper does not reach AA.
 */
:root {
  --e-warm: var(--m19-state-warning);
  --e-paper: color-mix(in oklab, var(--m19-surface) 96.5%, var(--e-warm));
  --e-bubble: color-mix(in oklab, var(--e-paper) 91%, var(--m19-state-warning-ink));
  --e-hair: color-mix(in oklab, var(--m19-line) 88%, var(--e-warm));
  --e-hair-2: color-mix(in oklab, var(--m19-line-strong) 88%, var(--e-warm));
  --ember-a: #ffb547; --ember-b: #ff6a1f; --ember-c: #e8452c;
  --ember-glow: color-mix(in srgb, var(--ember-b) 34%, transparent);
}

/* ── The hero: a greeting, a headline, and the chat ───────────────────── */
.hc-hero { position: relative; overflow: hidden; min-height: 0; display: block; padding: clamp(24px, 4vw, 56px) 0 clamp(40px, 5vw, 72px); background: var(--canvas); text-align: left; }
.hc-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(38% 50% at 18% 34%, color-mix(in srgb, var(--ember-b) 15%, transparent), transparent 70%),
    radial-gradient(36% 48% at 78% 58%, color-mix(in srgb, var(--indigo-500) 12%, transparent), transparent 72%),
    radial-gradient(28% 36% at 40% 92%, color-mix(in srgb, var(--ember-a) 12%, transparent), transparent 72%);
}
.hc-hero > .wrap { position: relative; max-width: var(--wrap); display: grid; gap: 28px clamp(32px, 4vw, 64px); grid-template-columns: 1fr; grid-template-areas: "head" "chat" "trust"; }
.hc-head { grid-area: head; text-align: center; max-width: 720px; margin: 0 auto; }
.hc-window { grid-area: chat; }
.hc-trust { grid-area: trust; }
@media (min-width: 1100px) {
  .hc-hero > .wrap { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "head chat" "trust chat"; align-items: center; }
  .hc-head { text-align: left; margin: 0; align-self: end; }
  .hc-head .lede { margin-left: 0; }
  .hc-hero .hc-trust { align-self: start; text-align: left; }
  .hc-head .ask-examples { justify-content: flex-start; }
}
.hc-hello {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px; padding: 5px 16px 5px 6px;
  border-radius: var(--r-pill); background: var(--e-paper); border: 1px solid var(--e-hair);
  box-shadow: var(--e-1); font-size: 15px; color: var(--ink-2);
}
.hc-hello b { color: var(--ink); font-weight: 600; }
.hc-face { display: inline-grid; place-items: center; flex: none; }
.hc-face:empty { width: 32px; height: 32px; border-radius: 50%; background: radial-gradient(circle at 46% 62%, #ffe9a8, var(--ember-b)); }
.hc-hello .hc-face svg { width: 32px; height: 32px; }
.hc-hero .hc-head .display { margin: 0; font-size: clamp(40px, 5.4vw, 76px); line-height: 1.02; letter-spacing: -0.035em; }
.hc-head .display em {
  font-style: normal; background: linear-gradient(95deg, var(--ember-c), var(--ember-b) 50%, #f59e0b);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hc-hero .hc-head .lede { margin-top: 18px; max-width: 34em; color: var(--ink-2); }

/* The window: the signed-in chat, drawn with its own recipe. */
.hc-window {
  width: 100%; max-width: 920px; margin: 0 auto; text-align: left; border-radius: 24px; overflow: hidden;
  background: var(--e-paper); border: 1px solid var(--e-hair);
  box-shadow: 0 1px 0 color-mix(in srgb, #fff 60%, transparent) inset, 0 40px 90px -40px color-mix(in srgb, var(--ember-c) 38%, transparent), var(--e-3);
}
.hc-bar {
  display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 14px;
  border-bottom: 1px solid var(--e-hair); color: var(--ink-2); font-size: 14px;
}
.hc-dots { display: flex; gap: 6px; }
.hc-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--e-hair-2); }
.hc-bar-title { font-weight: 500; color: var(--ink); }
.hc-bar-note { margin-left: auto; font-size: 12.5px; color: var(--ink-3); }
.hc-scenes { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 14px 0; }
.hc-scenes[hidden] { display: none; }
.hc-scene {
  min-height: 36px; padding: 6px 14px; border-radius: var(--r-pill); border: 1px solid var(--e-hair-2);
  background: transparent; color: var(--ink-2); font: inherit; font-size: 14px; cursor: pointer;
}
.hc-scene:hover { background: var(--e-bubble); color: var(--ink); }
.hc-scene[aria-pressed="true"] { background: var(--ink); color: var(--canvas); border-color: var(--ink); }

/* The thread: one reading column, as in the chat. */
.hc-thread {
  list-style: none; margin: 0; padding: 22px clamp(16px, 4vw, 40px) 18px; display: flex; flex-direction: column; gap: 20px;
  height: clamp(320px, 42vh, 420px); overflow-y: auto; overscroll-behavior: contain; scroll-behavior: smooth;
  scrollbar-width: thin;
  -webkit-mask-image: linear-gradient(transparent, #000 28px); mask-image: linear-gradient(transparent, #000 28px);
}
.hc-thread[hidden] { display: none; }
.hc-msg { display: flex; gap: 12px; max-width: 740px; width: 100%; margin-inline: auto; }
.hc-msg--you { justify-content: flex-end; }
.hc-msg--you p {
  margin: 0; max-width: min(520px, 86%); padding: 10px 16px; border-radius: 20px; background: var(--e-bubble);
  color: var(--ink); font-size: 16.5px; line-height: 1.55;
}
.hc-who { flex: none; width: 28px; height: 28px; margin-top: 1px; }
.hc-who svg { width: 28px; height: 28px; }
.hc-body { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 10px; color: var(--ink); font-size: 16.5px; line-height: 1.66; }
.hc-body > p { margin: 0; }
.hc-plan { margin: 0; padding: 12px 16px 12px 34px; border: 1px solid var(--e-hair); border-radius: 14px; background: var(--m19-surface); font-size: 15px; line-height: 1.5; display: grid; gap: 4px; }
.hc-plan li::marker { color: var(--ember-b); }
.hc-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 15px; color: var(--ink-2); }
.hc-steps li { display: flex; align-items: center; gap: 10px; }
.hc-steps li::before {
  content: ""; flex: none; width: 18px; height: 18px; border-radius: 50%;
  background: var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4L18 8' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.hc-steps li.hc-busy::before { background: transparent; border: 2px solid var(--e-hair-2); border-top-color: var(--ember-b); animation: hc-spin .8s linear infinite; }
@keyframes hc-spin { to { transform: rotate(360deg); } }
.hc-preview { margin: 2px 0 0; border: 1px solid var(--e-hair-2); border-radius: 14px; overflow: hidden; background: var(--m19-surface); box-shadow: var(--e-2); max-width: 560px; }
.hc-chrome { display: flex; align-items: center; gap: 8px; padding: 7px 12px; border-bottom: 1px solid var(--e-hair); font: 12px/1.3 var(--mono); color: var(--ink-3); }
.hc-chrome b { font-family: var(--font); font-weight: 500; color: var(--ink-2); font-size: 12.5px; }
.hc-chrome .avail-tag { margin-left: auto; }
.hc-preview img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.hc-preview figcaption { padding: 8px 12px; font-size: 12.5px; color: var(--ink-3); border-top: 1px solid var(--e-hair); }
.hc-thinking { display: flex; align-items: center; gap: 12px; max-width: 740px; width: 100%; margin-inline: auto; color: var(--ink-3); font-size: 15px; }
.hc-thinking span:last-child {
  background: linear-gradient(90deg, var(--ink-3) 30%, var(--ink) 50%, var(--ink-3) 70%) 0 0 / 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: hc-shimmer 1.6s linear infinite;
}
@keyframes hc-shimmer { to { background-position: -200% 0; } }

/* Replay states, set only by the script. */
.hc-thread .hc-wait { display: none; }
.hc-thread .hc-in { animation: hc-in .42s var(--ease) both; }
@keyframes hc-in { from { opacity: 0; transform: translateY(8px); } }

/* The composer: the homepage box, in the chat's own shape. */
.hc-compose { padding: 12px clamp(12px, 3vw, 28px) 16px; border-top: 1px solid var(--e-hair); background: color-mix(in oklab, var(--e-paper) 70%, var(--m19-surface)); }
.hc-compose-h { margin: 0 auto 8px; max-width: 760px; font-size: 13.5px; color: var(--ink-2); display: flex; align-items: center; gap: 8px; }
.hc-compose-h::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ember-b); box-shadow: 0 0 0 4px var(--ember-glow); }
.hc-window .ask-box { max-width: 760px; margin: 0 auto; border-radius: 22px; background: var(--m19-surface); border: 1px solid var(--e-hair-2); box-shadow: 0 2px 12px -4px color-mix(in srgb, #000 22%, transparent); }
.hc-window .ask-box:focus-within { border-color: var(--line-2); box-shadow: 0 2px 12px -4px color-mix(in srgb, #000 30%, transparent), 0 0 0 3px color-mix(in srgb, var(--indigo-500) 40%, transparent); }
.hc-window .ask-kinds, .hc-window .ask-examples, .hc-window .ask-note { max-width: 760px; margin-inline: auto; }
.hc-window .ask-avail { font-size: 12.5px; color: var(--ink-3); }
.hc-window .ask-note { margin-top: 10px; }
.hc-hero .hc-trust { margin: 0; font-size: 14px; color: var(--ink-2); }
@media (max-width: 1099px) { .hc-hero .hc-trust { text-align: center; } }
/* The starts, as the chat's own suggestion pills rather than big tiles. */
.hc-window .ask-kinds { justify-content: flex-start; gap: 5px; margin: 10px 0 0; padding: 2px 0; flex-wrap: wrap; overflow: visible; }
.hc-window .ask-kind { display: inline-flex; align-items: center; gap: 6px; min-width: 0; min-height: 34px; padding: 3px 10px 3px 4px; border: 1px solid var(--e-hair-2); border-radius: var(--r-pill); background: var(--m19-surface); color: var(--ink-2); font-size: 13.5px; }
.hc-window .ask-kind .ico { width: 24px; height: 24px; border: 0; border-radius: 50%; background: var(--e-bubble); }
.hc-window .ask-kind svg { width: 15px; height: 15px; }
.hc-window .ask-kind:hover, .hc-window .ask-kind:focus-visible { border-color: var(--line-2); color: var(--ink); box-shadow: var(--focus); }
.hc-window .ask-kind:hover { box-shadow: none; }
.hc-head .ask-examples { margin-top: 20px; }
.hc-window .ask-box { padding: 12px 64px 12px 16px; }
.hc-window .ask-box textarea { min-height: 48px; font-size: 16px; }
.hc-window .ask-go { right: 10px; bottom: 10px; }


/* ── Ember: a night band with its 3D body as a still ───────────────────── */
.em-band { position: relative; overflow: hidden; background: radial-gradient(70% 90% at 22% 40%, #3a1a0c 0%, var(--n-050) 62%); color: var(--n-ink); }
.em-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 5vw, 72px); align-items: center; }
.em-art { position: relative; margin: 0; }
.em-art img { width: 100%; max-width: 440px; height: auto; margin-inline: auto; border-radius: 32px; -webkit-mask-image: radial-gradient(closest-side, #000 72%, transparent); mask-image: radial-gradient(closest-side, #000 72%, transparent); }
.em-art figcaption { text-align: center; font-size: 13px; color: var(--n-ink-3); margin-top: 4px; }
.em-band .eyebrow { color: #ffc58a; }
.em-band .h2 { color: var(--n-ink); }
.em-band .lede, .em-band p { color: var(--n-ink-2); }
.em-points { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 14px; }
.em-points li { display: grid; grid-template-columns: 32px 1fr; gap: 14px; align-items: start; }
.em-points .hc-face svg { width: 32px; height: 32px; }
.em-points b { display: block; color: var(--n-ink); font-weight: 600; }
.em-points span { color: var(--n-ink-2); font-size: 15px; }
.em-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 28px; }
.em-actions .link { color: #ffd2a6; text-decoration: underline; text-underline-offset: 3px; }
.em-band .ember-entry { margin: 0; }
.em-band .ember-entry-btn { background: color-mix(in srgb, #fff 8%, transparent); border-color: color-mix(in srgb, #fff 18%, transparent); color: var(--n-ink); }
.em-band .ember-entry-btn span span { color: var(--n-ink-2); }

/* ── Real screens of the signed-in product ─────────────────────────────── */
.ps-grid { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: clamp(20px, 3vw, 40px); align-items: end; }
.ps-shot { margin: 0; }
.ps-frame { border-radius: 16px; overflow: hidden; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--e-3); }
.ps-frame img { width: 100%; height: auto; }
.ps-phone .ps-frame { border-radius: 34px; border: 8px solid var(--n-200); box-shadow: var(--e-3); }
.ps-shot figcaption { margin-top: 12px; font-size: 13.5px; color: var(--ink-2); line-height: 1.5; }
.ps-note { margin: 18px 0 0; font-size: 13px; color: var(--ink-3); max-width: 760px; }

/* ── The gallery: real first screens instead of drawings ───────────────── */
.sl-gallery .sl-strip { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.sl-shot .sl-real { margin: 0 0 12px; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); background: var(--surface-2); aspect-ratio: 16 / 10; }
.sl-shot .sl-real img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .5s var(--ease); }
.sl-shot:hover .sl-real img { transform: scale(1.03); }
.sl-shot .avail-tag { margin: 6px 0 0; align-self: flex-start; }

/* ── A product picture beside a page's own words (pricing, docs, press) ── */
.pp-figure { margin: 0; }
.pp-figure .ps-frame { position: relative; overflow: visible; }
.pp-figure .ps-frame > img { border-radius: 15px; }
.pp-figure figcaption { margin-top: 30px; font-size: 13px; color: var(--ink-2); }
.pp-ember { position: absolute; right: 16px; bottom: -18px; white-space: nowrap; display: flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--e-2); font-size: 13.5px; color: var(--ink); }
.pp-ember .hc-face svg { width: 30px; height: 30px; }
.pp-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; }

/* ── The missing page ─────────────────────────────────────────────────── */
.nf-go { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 28px auto 0; max-width: 720px; text-align: left; }
.nf-go a { display: block; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); box-shadow: var(--e-1); }
.nf-go a:hover { border-color: var(--line-2); box-shadow: var(--e-2); }
.nf-go b { display: block; color: var(--ink); }
.nf-go span { font-size: 14px; color: var(--ink-2); }

@media (max-width: 900px) {
  .em-grid, .ps-grid, .pp-split { grid-template-columns: 1fr; }
  .em-art img { max-width: 300px; }
  .ps-phone { max-width: 260px; margin-inline: auto; }
  .pp-ember { right: 8px; left: 8px; bottom: -16px; white-space: normal; }
  .pp-figure figcaption { margin-top: 26px; }
}
@media (max-width: 640px) {
  .hc-hello { font-size: 14px; }
  .hc-window { border-radius: 18px; margin-inline: calc(-1 * var(--s-1)); }
  .hc-bar-note { display: none; }
  .hc-thread { height: 300px; padding-top: 16px; gap: 16px; }
  .hc-scenes { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .hc-scene { flex: none; }
  .hc-hello { margin-bottom: 12px; }
  .hc-head .ask-examples { display: none; }
  .hc-hero > .wrap { gap: 20px; }
  .hc-window .ask-kinds { display: flex; }
  .hc-msg--you p, .hc-body { font-size: 15.5px; }
  .hc-who, .hc-who svg { width: 24px; height: 24px; }
  .hc-msg { gap: 10px; }
  .nf-go { grid-template-columns: 1fr; }
  .hc-window .ask-kinds { gap: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .hc-thread { scroll-behavior: auto; }
  .hc-thread .hc-in, .hc-steps li.hc-busy::before, .hc-thinking span:last-child, .sl-shot .sl-real img { animation: none !important; transition: none !important; }
}
.sl-gallery .sl-strip { grid-template-columns: repeat(auto-fill, minmax(min(260px, 42vw), 1fr)); }
.sl-shot b.avail-tag { font: 500 11px/1.6 var(--mono); letter-spacing: 0; color: var(--ink-2); }
.sl-shot b.avail-tag[data-availability=here] { color: var(--ok-ink); }
.sl-shot b.avail-tag[data-availability=experimental] { color: var(--tint-ink); }
.nf-hero { text-align: center; background: radial-gradient(60% 70% at 50% 20%, #3a1a0c 0%, var(--n-050) 70%); }
.nf-hero .lede { margin-inline: auto; }
.nf-ember { width: 180px; height: auto; margin: 0 auto 8px; -webkit-mask-image: radial-gradient(closest-side, #000 70%, transparent); mask-image: radial-gradient(closest-side, #000 70%, transparent); }
.nf-more { text-align: center; margin: 24px 0 0; color: var(--ink-2); font-size: 15px; }
/* Pricing: room under the big word, and the two halves the same height. */
.plan .big { margin-bottom: 22px; }
.plan .r { display: flex; flex-direction: column; }
.plan .r .more { margin-top: auto; padding-top: 18px; }
/* Docs: the chat beside the page's own words. */
.doc-hero { align-items: center; }
.doc-hero .pp-figure figcaption { color: var(--n-ink-2); }
.doc-hero .ps-frame { border-color: var(--n-line-2); box-shadow: var(--e-n); }
.press-ember img { max-width: 360px; border-radius: 24px; background: #1a0d07; }
.pf-shot { max-width: 960px; margin: 48px auto 0; text-align: left; }
.pf-shot .ps-frame { border-color: var(--n-line-2); box-shadow: var(--e-n), 0 0 0 1px rgba(255,255,255,.04); }
.pf-shot figcaption, .night .pp-figure figcaption { color: var(--n-ink-2); text-align: center; }
.night .pp-ember { background: var(--n-200); border-color: var(--n-line-2); color: var(--n-ink); }
.hc-msg--ember + .hc-msg--ember .hc-who { visibility: hidden; }