/* Page layouts for the MATRIZ previews. Tokens only. */

/* ---------- site: hero ---------- */
.hero { padding-block: var(--mz-space-8) var(--mz-space-9); } /* BP 2026-10-15 mobile fix: never zero the .wrap side gutter */
.hero__copy { grid-column: 1 / span 6; display: grid; gap: var(--mz-space-5); align-content: center; }
/* The one logo on the home view: the official Flow motion file; under prefers-reduced-motion the official static lockup
   (the motion file's own reduced-motion group still fades in, so the still is the deterministic end state). Both are sized so
   the lockup itself is logo-hero tall: the motion viewBox (342 x 171) carries the lockup at 68% of its width. */
.hero__logo { height: var(--mz-size-logo-hero); width: auto; }
.hero__logo--motion { height: calc(var(--mz-size-logo-hero) * 2.62); margin: calc(var(--mz-size-logo-hero) * -0.81) 0 calc(var(--mz-size-logo-hero) * -0.81) calc(var(--mz-size-logo-hero) * -0.83); }
.hero__logo--still { display: none; }
@media (prefers-reduced-motion: reduce) { .hero__logo--motion { display: none; } .hero__logo--still { display: block; } .hero__logo--still.only-dark { display: none; } [data-theme="dark"] .hero__logo--still.only-dark { display: block; } [data-theme="dark"] .hero__logo--still.only-light { display: none; } }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--mz-space-3); }
.hero__note { font: var(--mz-type-small); color: var(--mz-color-text-muted); }
.hero__mock { grid-column: 7 / span 6; align-self: center; }
.mock { display: grid; grid-template-columns: 1fr; background: var(--mz-color-surface); }
.mock__chat { padding: var(--mz-space-4); display: grid; gap: var(--mz-space-3); border-bottom: var(--mz-stroke-hairline) solid var(--mz-color-border); }
.mock__bar { display: flex; align-items: center; gap: var(--mz-space-2); font: var(--mz-type-small); color: var(--mz-color-text-muted); }
.mock__bar b { color: var(--mz-color-text); font: var(--mz-type-mono); font-weight: var(--mz-font-weight-medium); }
.bubble { corner-shape: bevel; border-radius: var(--mz-chamfer-md); justify-self: end; max-width: 85%; background: var(--mz-color-accent-subtle); color: var(--mz-color-on-accent-subtle); padding: var(--mz-space-2) var(--mz-space-3); font: var(--mz-type-small); }
.answer { display: grid; gap: var(--mz-space-2); font: var(--mz-type-small); }
.answer__meta { display: flex; align-items: center; gap: var(--mz-space-2); font: var(--mz-type-small-strong); }
.answer__meta .mark { width: var(--mz-size-icon-sm); height: var(--mz-size-icon-sm); }
.step { display: flex; align-items: center; gap: var(--mz-space-2); color: var(--mz-color-text-muted); }
.step .ic { color: var(--mz-color-success); }
.composer { corner-shape: bevel; border-radius: var(--mz-chamfer-sm); border: var(--mz-stroke-hairline) solid var(--mz-color-border-strong); padding: var(--mz-space-2) var(--mz-space-2) var(--mz-space-2) var(--mz-space-3); display: flex; align-items: center; gap: var(--mz-space-2); color: var(--mz-color-text-muted); font: var(--mz-type-small); }
.composer .send { corner-shape: bevel; border-radius: var(--mz-chamfer-xs); width: var(--mz-size-control-sm); height: var(--mz-size-control-sm); display: grid; place-items: center; background: var(--mz-color-accent); color: var(--mz-color-on-accent); }
.mock__proof { padding: var(--mz-space-4); display: grid; gap: var(--mz-space-2); background: var(--mz-color-raised); }
.mock__cap { font: var(--mz-type-small); color: var(--mz-color-text-muted); margin-top: var(--mz-space-2); }

/* ---------- site: sections ---------- */
.sec { padding: var(--mz-space-9) 0; border-top: var(--mz-stroke-hairline) solid var(--mz-color-border); }
.sec__head { display: grid; gap: var(--mz-space-3); max-width: calc(var(--mz-measure-prose) * 1ch); margin-bottom: var(--mz-space-7); }
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--mz-grid-gutter); counter-reset: step; }
.steps li { display: grid; gap: var(--mz-space-3); align-content: start; padding-top: var(--mz-space-4); border-top: var(--mz-stroke-ui) solid var(--mz-color-border-strong); position: relative; }
.steps li::before { content: ""; position: absolute; top: calc(-1 * var(--mz-stroke-ui)); left: 0; width: var(--mz-space-6); height: var(--mz-stroke-ui); background: var(--mz-color-accent); }
.steps .ic { color: var(--mz-color-accent-ink); }
.steps p { color: var(--mz-color-text-muted); }
.feats { display: grid; gap: var(--mz-space-4); margin-top: var(--mz-space-6); }
.feat { display: grid; grid-template-columns: var(--mz-size-icon) 1fr; gap: var(--mz-space-3); align-items: start; }
.feat .ic { color: var(--mz-color-accent-ink); }
.feat b { display: block; font: var(--mz-type-body-strong); }
.feat span { display: block; color: var(--mz-color-text-muted); font: var(--mz-type-small); }
.proof__copy { grid-column: 1 / span 5; }
.proof__log { grid-column: 6 / span 7; }
.checks { padding: var(--mz-space-4); display: grid; gap: var(--mz-space-3); border-bottom: var(--mz-stroke-hairline) solid var(--mz-color-border); background: var(--mz-color-raised); }
.checks__cap { display: flex; align-items: center; justify-content: space-between; gap: var(--mz-space-3); font: var(--mz-type-small-strong); }
.cta { padding: var(--mz-space-9) 0; }
.cta__card { text-align: center; display: grid; gap: var(--mz-space-4); justify-items: center; padding: var(--mz-space-8) var(--mz-space-6); }
.foot { border-top: var(--mz-stroke-hairline) solid var(--mz-color-border); padding: var(--mz-space-7) 0 var(--mz-space-6); }
.foot__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--mz-grid-gutter); }
.foot h4 { font: var(--mz-type-eyebrow); letter-spacing: var(--mz-type-eyebrow-tracking); text-transform: uppercase; margin-bottom: var(--mz-space-3); }
.foot li { margin-bottom: var(--mz-space-2); }
.foot a { color: var(--mz-color-text); text-decoration: none; font: var(--mz-type-small); display: inline-flex; min-height: var(--mz-size-target-min); align-items: center; }
.foot a:hover { color: var(--mz-color-accent-ink); text-decoration: underline; }
.foot__tag { color: var(--mz-color-text-muted); font: var(--mz-type-small); max-width: 40ch; }
.foot__bar { display: flex; align-items: center; gap: var(--mz-space-3); margin-top: var(--mz-space-7); padding-top: var(--mz-space-4); border-top: var(--mz-stroke-hairline) solid var(--mz-color-border); font: var(--mz-type-small); color: var(--mz-color-text-muted); }

@media (max-width: 1024px) {
  .hero__copy, .hero__mock, .proof__copy, .proof__log { grid-column: 1 / -1; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .hero { padding-block: var(--mz-space-6) var(--mz-space-7); }
  .hero__logo { height: calc(var(--mz-size-logo-hero) * 0.72); }
  .hero__logo--motion { height: calc(var(--mz-size-logo-hero) * 0.72 * 2.62); margin: calc(var(--mz-size-logo-hero) * 0.72 * -0.81) 0 calc(var(--mz-size-logo-hero) * 0.72 * -0.81) calc(var(--mz-size-logo-hero) * 0.72 * -0.83); }
  .sec { padding: var(--mz-space-7) 0; }
  .steps { grid-template-columns: 1fr; }
  .foot__grid { grid-template-columns: 1fr; }
  .mock__chat .bubble { max-width: 100%; }
}

/* ---------- auth ---------- */
.auth { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.auth__main { display: grid; grid-template-rows: auto 1fr auto; padding: var(--mz-space-4) var(--mz-grid-margin-wide); }
.auth__top { display: flex; align-items: center; gap: var(--mz-space-3); min-height: var(--mz-size-nav); }
.auth__body { display: grid; place-items: center; padding: var(--mz-space-7) 0; }
.auth__card { width: 100%; max-width: 440px; display: grid; gap: var(--mz-space-4); }
.auth__card h1 { margin-top: var(--mz-space-2); }
.auth__sub { color: var(--mz-color-text-muted); }
.auth__beta { display: flex; gap: var(--mz-space-2); align-items: flex-start; corner-shape: bevel; border-radius: var(--mz-chamfer-sm); background: var(--mz-color-info-subtle); color: var(--mz-color-on-info-subtle); padding: var(--mz-space-2) var(--mz-space-3); font: var(--mz-type-small); }
.auth__beta .ic { color: var(--mz-color-info); flex: none; }
.auth__providers { display: grid; gap: var(--mz-space-2); }
.auth__or { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--mz-space-3); color: var(--mz-color-text-muted); font: var(--mz-type-small); }
.auth__or::before, .auth__or::after { content: ""; height: var(--mz-stroke-hairline); background: var(--mz-color-border-strong); }
.auth__legal { font: var(--mz-type-small); color: var(--mz-color-text-muted); }
.auth__alt { font: var(--mz-type-small); }
.auth__legal a, .auth__alt a, .auth__foot a, .foot__bar a { display: inline-block; min-height: var(--mz-size-target-min); line-height: var(--mz-size-target-min); }
.auth__foot { display: flex; gap: var(--mz-space-4); align-items: center; font: var(--mz-type-small); color: var(--mz-color-text-muted); min-height: var(--mz-size-control); }
.auth__aside { display: grid; align-content: center; padding: var(--mz-space-8) var(--mz-grid-margin-wide); border-left: var(--mz-stroke-hairline) solid var(--mz-color-border); }
.auth__aside-in { max-width: 480px; display: grid; gap: var(--mz-space-5); }
.auth__aside ul { display: grid; gap: var(--mz-space-3); }
.auth__aside li { display: flex; align-items: center; gap: var(--mz-space-3); font: var(--mz-type-body-strong); }
.auth__aside li .ic { color: var(--mz-color-accent-ink); }
.receipt { display: grid; gap: var(--mz-space-2); }
.code-actions { display: flex; flex-wrap: wrap; gap: var(--mz-space-3) var(--mz-space-4); align-items: center; font: var(--mz-type-small); }
@media (max-width: 1024px) { .auth { grid-template-columns: 1fr; } .auth__aside { display: none; } .auth__main { padding: var(--mz-space-3) var(--mz-grid-margin-mid); } }
@media (max-width: 640px) { .auth__main { padding: var(--mz-space-2) var(--mz-grid-margin-narrow); } .auth__body { padding: var(--mz-space-5) 0; } }

/* ---------- waitlist ---------- */
.wl { padding-block: var(--mz-space-8) var(--mz-space-9); }
.wl__copy { grid-column: 1 / span 7; display: grid; gap: var(--mz-space-5); align-content: start; }
.wl__seats { grid-column: 8 / span 5; display: grid; gap: var(--mz-space-4); align-content: start; }
.wl__kv { display: grid; }
.wl__next { grid-column: 1 / -1; display: grid; gap: var(--mz-space-4); margin-top: var(--mz-space-5); }
.wl__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--mz-grid-gutter); }
.wl__cards .card { display: grid; gap: var(--mz-space-3); align-content: start; }
.wl__cards .card .ic { color: var(--mz-color-accent-ink); }
.wl__cards .card p { color: var(--mz-color-text-muted); font: var(--mz-type-small); }
.wl__cards .card .btn { justify-self: start; }
.textarea { corner-shape: bevel; border-radius: var(--mz-chamfer-sm); width: 100%; min-height: calc(var(--mz-size-control) * 2); padding: var(--mz-space-2) var(--mz-space-3); border: var(--mz-stroke-hairline) solid var(--mz-color-border-strong); background: var(--mz-color-surface); color: var(--mz-color-text); font: var(--mz-type-body); resize: vertical; }
.textarea::placeholder { color: var(--mz-color-text-muted); }
.user { display: inline-flex; align-items: center; gap: var(--mz-space-2); font: var(--mz-type-small-strong); }
.avatar { corner-shape: bevel; border-radius: var(--mz-chamfer-sm); width: var(--mz-size-control-sm); height: var(--mz-size-control-sm); display: grid; place-items: center; background: var(--mz-color-accent); color: var(--mz-color-on-accent); font: var(--mz-type-eyebrow); }
.toast-wrap { position: fixed; left: 50%; bottom: var(--mz-space-6); transform: translateX(-50%); z-index: 10; }
@media (max-width: 1024px) { .wl__copy, .wl__seats { grid-column: 1 / -1; } .wl__cards { grid-template-columns: 1fr; } }

/* ---------- desktop (Control Panel structure) ---------- */
.dk { display: grid; grid-template-columns: var(--mz-size-sidebar) minmax(0, 1fr); min-height: 100vh; font: var(--mz-type-small); }
.dk > div { min-width: 0; }
.dk__toplogo { display: none; }
.dk__toplogo img { height: var(--mz-space-5); width: auto; }
.dk__side { background: var(--mz-color-surface); border-right: var(--mz-stroke-hairline) solid var(--mz-color-border); display: grid; grid-template-rows: auto 1fr auto; position: sticky; top: 0; height: 100vh; overflow: auto; }
.dk__brand { display: flex; align-items: center; gap: var(--mz-space-2); padding: var(--mz-space-3) var(--mz-space-3) var(--mz-space-3) var(--mz-space-4); min-height: var(--mz-size-topbar); }
.dk__brand img { height: var(--mz-space-5); width: auto; }
.dk__nav { padding: var(--mz-space-2) var(--mz-space-2); display: grid; gap: 1px; align-content: start; }
.dk__nav a, .dk__nav button { corner-shape: bevel; border-radius: var(--mz-chamfer-sm); display: flex; align-items: center; gap: var(--mz-space-3); min-height: var(--mz-size-control-sm); padding: 0 var(--mz-space-3); color: var(--mz-color-text); text-decoration: none; font: var(--mz-type-small-strong); background: transparent; border: 0; width: 100%; text-align: left; cursor: pointer; }
.dk__nav a:hover, .dk__nav button:hover { background: var(--mz-color-raised); color: var(--mz-color-text); }
.dk__nav a[aria-current="page"] { background: var(--mz-color-accent-subtle); color: var(--mz-color-on-accent-subtle); }
.dk__nav .ic { width: var(--mz-size-icon-sm); height: var(--mz-size-icon-sm); color: var(--mz-color-text-muted); }
.dk__nav a[aria-current="page"] .ic { color: currentColor; }
.dk__nav .count { margin-left: auto; font: var(--mz-type-mono); color: var(--mz-color-text-muted); }
.dk__nav .sub { padding-left: var(--mz-space-6); }
.dk__group { display: flex; align-items: center; justify-content: space-between; padding: var(--mz-space-4) var(--mz-space-3) var(--mz-space-2); font: var(--mz-type-eyebrow); letter-spacing: var(--mz-type-eyebrow-tracking); text-transform: uppercase; color: var(--mz-color-text-muted); }
.dk__group .row { gap: 0; }
.dk__user { display: flex; align-items: center; gap: var(--mz-space-2); padding: var(--mz-space-3) var(--mz-space-3) var(--mz-space-3) var(--mz-space-4); border-top: var(--mz-stroke-hairline) solid var(--mz-color-border); }
.dk__user small { display: block; color: var(--mz-color-text-muted); font: var(--mz-type-micro); }
.dk__top { display: flex; align-items: center; gap: var(--mz-space-3); min-height: var(--mz-size-topbar); padding: 0 var(--mz-space-4); border-bottom: var(--mz-stroke-hairline) solid var(--mz-color-border); background: var(--mz-color-bg); position: sticky; top: 0; z-index: 2; }
.dk__crumb { display: flex; align-items: center; gap: var(--mz-space-2); font: var(--mz-type-small-strong); min-width: 0; white-space: nowrap; }
.dk__crumb > span { overflow: hidden; text-overflow: ellipsis; }
.dk__top { min-width: 0; }
.dk__top > * { flex: none; }
.dk__top .dk__crumb { flex: 1 1 auto; }
.dk__clock { white-space: nowrap; }
.dk__crumb .ic { color: var(--mz-color-text-muted); }
.dk__clock { font: var(--mz-type-mono); font-weight: var(--mz-font-weight-medium); }
.dk__clock span { color: var(--mz-color-text-muted); font-weight: var(--mz-font-weight-regular); }
.dk__main { display: grid; grid-template-columns: minmax(0, 1fr) var(--mz-size-live-rail); min-height: calc(100vh - var(--mz-size-topbar)); }
.dk__chat { display: grid; grid-template-rows: 1fr auto; min-width: 0; }
.chat { width: 100%; max-width: var(--mz-size-chat-column); margin: 0 auto; padding: var(--mz-space-6) var(--mz-space-5); display: grid; gap: var(--mz-space-6); align-content: start; }
.turn { display: grid; gap: var(--mz-space-2); }
.turn__head { display: flex; align-items: center; gap: var(--mz-space-2); font: var(--mz-type-small-strong); min-height: var(--mz-size-target-min); }
.turn__head .t-mono { color: var(--mz-color-text-muted); }
.turn__head .actions { margin-left: auto; display: flex; gap: var(--mz-space-1); }
.turn--you .bubble { justify-self: end; font: var(--mz-type-body); }
.turn--you .turn__head { justify-content: flex-end; }
.prose { font: var(--mz-type-body); max-width: calc(var(--mz-measure-prose) * 1ch); }
.prose p + p { margin-top: var(--mz-space-3); }
.stepsbox { corner-shape: bevel; border-radius: var(--mz-chamfer-sm); border: var(--mz-stroke-hairline) solid var(--mz-color-border); background: var(--mz-color-surface); }
.stepsbox__head { display: flex; align-items: center; gap: var(--mz-space-2); padding: var(--mz-space-2) var(--mz-space-3); }
.stepsbox__head .btn { margin-left: auto; }
.stepsbox ul { border-top: var(--mz-stroke-hairline) solid var(--mz-color-border); padding: var(--mz-space-2) var(--mz-space-3); display: grid; gap: var(--mz-space-2); }
.stepsbox li { display: flex; align-items: center; gap: var(--mz-space-2); min-height: var(--mz-size-target-min); }
.stepsbox li .ic { color: var(--mz-color-success); }
.stepsbox li.running .led { animation: mz-blink calc(var(--mz-motion-duration-brand-loop) / 4) steps(1) infinite; }
.stepsbox li .t-mono { margin-left: auto; color: var(--mz-color-text-muted); }
.ack { display: flex; align-items: center; gap: var(--mz-space-2); color: var(--mz-color-text-muted); font: var(--mz-type-small); }
.ack .ic { color: var(--mz-color-success); }
.cursor { display: inline-block; width: var(--mz-grid-cell); height: 1em; vertical-align: text-bottom; background: var(--mz-color-accent-ink); animation: mz-blink 1s steps(1) infinite; }
.dk__composer { position: sticky; bottom: 0; padding: var(--mz-space-3) var(--mz-space-5) var(--mz-space-4); background: var(--mz-color-bg); }
.dk__composer-in { width: 100%; max-width: var(--mz-size-chat-column); margin: 0 auto; display: grid; gap: var(--mz-space-2); }
.composer--dk { align-items: flex-end; padding: var(--mz-space-2) var(--mz-space-2) var(--mz-space-2) var(--mz-space-3); background: var(--mz-color-surface); }
.composer--dk textarea { flex: 1; border: 0; background: transparent; resize: none; min-height: var(--mz-size-control); max-height: calc(var(--mz-size-control) * 6); padding: var(--mz-space-2) 0; font: var(--mz-type-body); color: var(--mz-color-text); }
.composer--dk textarea::placeholder { color: var(--mz-color-text-muted); }
.composer--dk textarea:focus-visible { outline: none; }
.cost { display: flex; align-items: center; gap: var(--mz-space-2); font: var(--mz-type-small); color: var(--mz-color-text-muted); }
.dk__live { border-left: var(--mz-stroke-hairline) solid var(--mz-color-border); background: var(--mz-color-surface); padding: var(--mz-space-4); display: grid; gap: var(--mz-space-4); align-content: start; }
.live__head { display: flex; align-items: center; gap: var(--mz-space-2); }
.live__head .t-mono { margin-left: auto; color: var(--mz-color-text-muted); }
.headline { display: grid; gap: var(--mz-space-2); padding: var(--mz-space-3); }
.headline p { font: var(--mz-type-body-strong); }
.headline .trend { font: var(--mz-type-small); color: var(--mz-color-text-muted); display: flex; align-items: center; gap: var(--mz-space-1); }
.meter { display: grid; gap: var(--mz-space-2); }
.meter__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--mz-space-2); font: var(--mz-type-small); }
.meter__row b { font: var(--mz-type-small-strong); }
.meter__row .t-mono { color: var(--mz-color-text-muted); }
.meter__ticks { display: flex; justify-content: space-between; font: var(--mz-type-micro); color: var(--mz-color-text-muted); }
.events { display: grid; }
.event { display: grid; grid-template-columns: auto auto 1fr auto; gap: var(--mz-space-2); align-items: center; padding: var(--mz-space-2) 0; border-top: var(--mz-stroke-hairline) solid var(--mz-color-border); min-height: var(--mz-size-control-sm); }
.event .t-mono { color: var(--mz-color-text-muted); }
.event .btn { min-height: var(--mz-size-target-min); padding: 0 var(--mz-space-2); font: var(--mz-type-micro); }
.event__raw { grid-column: 1 / -1; font: var(--mz-type-mono); color: var(--mz-color-text-muted); background: var(--mz-color-sunken); padding: var(--mz-space-2) var(--mz-space-3); corner-shape: bevel; border-radius: var(--mz-chamfer-xs); white-space: pre-wrap; word-break: break-all; }
.reading { display: flex; align-items: center; gap: var(--mz-space-2); font: var(--mz-type-small); }
.reading .ic { width: var(--mz-size-icon-sm); height: var(--mz-size-icon-sm); }
.reading--nodata { color: var(--mz-color-text-muted); }
.reading--stale { color: var(--mz-color-warning); }
.reading--unavail { color: var(--mz-color-critical); }
.dk__menu { display: none; }
@media (max-width: 1024px) {
  .dk { grid-template-columns: 1fr; }
  .dk__side { display: none; }
  .dk__main { grid-template-columns: 1fr; }
  .dk__live { border-left: 0; border-top: var(--mz-stroke-hairline) solid var(--mz-color-border); }
  .dk__menu { display: inline-flex; }
  .dk__toplogo { display: inline-flex; }
}
@media (max-width: 640px) {
  .chat { padding: var(--mz-space-4) var(--mz-space-3); }
  .dk__composer { padding: var(--mz-space-2) var(--mz-space-3) var(--mz-space-3); }
  .dk__top { padding: 0 var(--mz-space-3); gap: var(--mz-space-2); }
  .turn--you .bubble { max-width: 100%; }
}

/* BP 2026-10-15 alternative: nav lockup at the sorve.ai size (mark height 24px, lockup 3.585x wide) */
.nav__brand { display: inline-flex; align-items: center; height: var(--mz-size-control-sm); margin-right: var(--mz-space-4); }
.nav__brand img { height: 24px; width: auto; }

/* BP 2026-10-15: sorve.ai pattern - mark (40px) above the closing CTA, lockup (24px) in the footer */
.cta__mark { display: flex; justify-content: center; margin-bottom: var(--mz-space-5); }
.cta__mark img { height: 40px; width: 40px; }
.foot__brand { display: inline-flex; margin-bottom: var(--mz-space-4); }
.foot__brand img { height: 24px; width: auto; }

/* BP 2026-10-15: simple waitlist */
.wl--simple { max-width: 640px; margin: 0 auto; padding: var(--mz-space-9) var(--mz-space-4); display: grid; gap: var(--mz-space-4); text-align: center; justify-items: center; min-height: 60vh; align-content: center; }