/* Wedge v17 · app surface (onboarding + sign-in). Layers on site.css
   tokens. Same language as the site, pure black, glass pills, hairlines,
   defocus transitions. The one licensed exception to the no-translate
   taste rule is the step-6 entrance, where David asked for movement. */

/* ---------- shell ---------- */

.app-body { min-height: 100svh; overflow-x: clip; }

/* faint drifting color field behind everything, far dimmer than the hero */
.app-glow {
  position: fixed; inset: -20%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(38% 30% at 22% 24%, rgba(126, 196, 227, .10), transparent 70%),
    radial-gradient(34% 30% at 78% 70%, rgba(126, 234, 155, .07), transparent 70%),
    radial-gradient(30% 26% at 62% 18%, rgba(160, 130, 255, .08), transparent 70%);
  filter: blur(70px);
  animation: app-glow-drift 36s ease-in-out infinite alternate;
}
@keyframes app-glow-drift {
  from { transform: translate3d(-2%, -1%, 0); }
  to { transform: translate3d(2%, 2%, 0); }
}
@media (prefers-reduced-motion: reduce) { .app-glow { animation: none; } }

.app-top {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10;
  height: var(--head-h);
  display: flex; align-items: center; justify-content: space-between;
  padding-inline: clamp(18px, 3vw, 30px);
}
.app-top .btn { height: 38px; padding-inline: 18px; font-size: 14px; }

.app-progress {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  height: 2px; background: var(--line);
}
.app-progress i {
  display: block; height: 100%; width: 0%;
  background: var(--paper);
  transition: width .5s var(--ease);
}

.app-main {
  position: relative; z-index: 1;
  min-height: 100svh;
  display: grid; place-items: center;
  padding: calc(var(--head-h) + 30px) 20px 56px;
}

/* ---------- steps ---------- */

.step { display: none; width: min(640px, 100%); }
.step.wide { width: min(1560px, 100%); }
.step.on { display: block; }
.step.out { opacity: 0; filter: blur(10px); transition: opacity .2s var(--ease), filter .22s var(--ease); }
.step.out * { animation: none !important; }
@keyframes step-in {
  from { opacity: 0; filter: blur(10px); }
  to { opacity: 1; filter: blur(0); }
}
/* the step arrives as a cascade, eyebrow then question then body then the
   items, every element its own defocus */
.step.on .step-eyebrow { animation: step-in .35s var(--ease) both; }
.step.on h1 { animation: step-in .45s var(--ease) both .07s; }
.step.on .step-sub { animation: step-in .45s var(--ease) both .14s; }

.step-eyebrow {
  font-size: 12.5px; font-weight: 500; letter-spacing: .14em;
  text-transform: uppercase; color: var(--tx-faint);
}
.step h1 {
  margin-top: 14px;
  font-family: var(--disp); font-weight: 500;
  font-size: clamp(30px, 4.6vw, 46px);
  letter-spacing: -.03em; line-height: 1.06;
  color: var(--tx);
  max-width: none; margin-inline: 0; /* the site's h1 auto-centers, the app is left-set */
}
.step-sub { margin-top: 14px; font-size: 15.5px; color: var(--tx-mut); max-width: 46ch; }

/* options resolve in with a small per-item stagger, pure defocus */
/* block flow with margins, NOT grid gap: a collapsed opt-extra must
   contribute zero space, and grid gaps cannot collapse around it */
.opts { display: block; margin-top: 32px; }
.opts > .opt { margin-bottom: 10px; }
.step.on .opt { animation: step-in .38s var(--ease) both; animation-delay: calc(var(--i, 0) * 50ms + 180ms); }
.opt {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  width: 100%; text-align: left;
  padding: 17px 20px; border-radius: 16px;
  font-family: var(--sans); font-size: 16px; font-weight: 500; color: var(--tx);
  background: var(--fill); border: 1px solid var(--line-2);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14);
  cursor: pointer;
  transition: background .22s var(--ease), border-color .22s var(--ease), color .22s var(--ease);
}
.opt:hover { background: var(--fill-2); border-color: rgba(255, 255, 255, .32); }
.opt .tick {
  flex: none; width: 20px; height: 20px; border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, .35);
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color .22s var(--ease), background .22s var(--ease);
}
.opt .tick svg { width: 11px; height: 11px; stroke: #000; stroke-width: 2.6; fill: none; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity .18s var(--ease); }
.opt.sel { background: var(--paper); border-color: var(--paper); color: #000; }
.opt.sel .tick { border-color: rgba(0, 0, 0, .8); background: transparent; }
.opt.sel .tick svg { opacity: 1; }

/* ---------- expanding extras under an option (calendar, own amount).
   closed by default, resolve open through the grid-row glide ---------- */

.opt-extra {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .45s var(--ease), margin-bottom .45s var(--ease);
  margin-bottom: 0;
}
.opt-extra > div { overflow: hidden; min-height: 0; }
.opt-extra.open { grid-template-rows: 1fr; margin-bottom: 10px; }
.opt-extra-inner { padding-bottom: 2px; }

/* the calendar. one glass panel, hairline weekday rule, ghost day pills */
.cal {
  border-radius: 18px; padding: 18px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--line-2);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14);
}
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.cal-title { font-family: var(--disp); font-weight: 600; font-size: 15px; color: var(--tx); }
.cal-nav { display: flex; gap: 6px; }
.cal-nav button {
  width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line-2);
  background: var(--fill); color: var(--tx); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .2s var(--ease), border-color .2s var(--ease), opacity .2s var(--ease);
}
.cal-nav button:hover { background: var(--fill-2); }
.cal-nav button[disabled] { opacity: .3; cursor: default; }
.cal-nav svg { width: 12px; height: 12px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.cal-dow, .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-dow {
  padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid var(--line);
}
.cal-dow span {
  text-align: center; font-size: 10.5px; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase; color: var(--tx-faint);
}
.cal-grid button {
  aspect-ratio: 1; border-radius: 10px; border: 1px solid transparent;
  background: none; color: var(--tx-mid); font: inherit; font-size: 13px;
  font-variant-numeric: tabular-nums; cursor: pointer;
  transition: background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.cal-grid button:hover { background: var(--fill-2); color: var(--tx); }
.cal-grid button[disabled] { color: rgba(255, 255, 255, .18); cursor: default; background: none; }
.cal-grid button.adj { color: rgba(255, 255, 255, .26); } /* adjacent months */
.cal-grid button.adj[disabled] { color: rgba(255, 255, 255, .12); }
.cal-grid button.today { border-color: var(--line-2); }
.cal-grid button.sel { background: var(--paper); color: #000; font-weight: 600; }

/* the title is a control: it opens the month + year picker, which morphs
   in OVER the day grid inside the same square, through a defocus */
.cal-title {
  display: inline-flex; align-items: center; gap: 7px;
  background: none; border: 0; padding: 4px 8px; margin-left: -8px;
  border-radius: 9px; cursor: pointer;
  transition: background .2s var(--ease);
}
.cal-title:hover { background: var(--fill-2); }
.cal-title svg { width: 10px; height: 10px; stroke: var(--tx-faint); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; transition: rotate .3s var(--ease); }
.cal.pick .cal-title svg { rotate: 180deg; }
.cal-body { position: relative; }
.cal-days { transition: opacity .3s var(--ease), filter .35s var(--ease); }
.cal.pick .cal-days { opacity: 0; filter: blur(9px); pointer-events: none; }
.cal-picker {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  opacity: 0; filter: blur(9px); pointer-events: none;
  transition: opacity .3s var(--ease), filter .35s var(--ease);
}
.cal.pick .cal-picker { opacity: 1; filter: blur(0); pointer-events: auto; }
.cal-yrow {
  display: flex; align-items: center; justify-content: center; gap: 18px;
  padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid var(--line);
}
.cal-yrow b {
  font-family: var(--disp); font-weight: 600; font-size: 16px; color: var(--tx);
  font-variant-numeric: tabular-nums; min-width: 58px; text-align: center;
}
.cal-months { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; flex: 1; }
.cal-months button {
  border-radius: 12px; border: 1px solid transparent;
  background: none; color: var(--tx-mid); font: inherit; font-size: 12.5px;
  cursor: pointer;
  transition: background .18s var(--ease), color .18s var(--ease);
}
.cal-months button:hover { background: var(--fill-2); color: var(--tx); }
.cal-months button[disabled] { color: rgba(255, 255, 255, .18); cursor: default; background: none; }
.cal-months button.sel { background: var(--paper); color: #000; font-weight: 600; }

/* own amount */
.own-amt { display: flex; gap: 10px; align-items: center; }
.own-amt .amt-wrap {
  flex: 1; display: flex; align-items: center; gap: 2px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--line-2); border-radius: 14px;
  padding: 0 16px;
  transition: border-color .22s var(--ease), background .22s var(--ease);
}
.own-amt .amt-wrap:focus-within { border-color: rgba(255, 255, 255, .5); background: rgba(255, 255, 255, .08); }
.own-amt .amt-wrap b { color: var(--tx-faint); font-weight: 500; font-size: 16px; }
.own-amt input {
  flex: 1; border: 0; background: none; padding: 14px 4px;
  font: inherit; font-size: 16px; color: var(--tx);
  font-variant-numeric: tabular-nums;
}
.own-amt input:focus { outline: none; }
.own-amt input::placeholder { color: var(--tx-faint); }
.own-amt .btn { height: 46px; }

/* ---------- fields ---------- */

.fields { display: grid; gap: 16px; margin-top: 32px; }
.step.on .field { animation: step-in .38s var(--ease) both; animation-delay: calc(var(--i, 0) * 55ms + 180ms); }
.field label { display: block; font-size: 13px; color: var(--tx-mut); margin-bottom: 8px; }
.field input, .field textarea {
  width: 100%;
  font: inherit; font-size: 16px; color: var(--tx);
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--line-2); border-radius: 14px;
  padding: 14px 16px;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: border-color .22s var(--ease), background .22s var(--ease);
}
.field textarea { resize: vertical; min-height: 120px; }
.field input::placeholder, .field textarea::placeholder { color: var(--tx-faint); }
.field input:focus, .field textarea:focus {
  outline: none;
  border-color: rgba(255, 255, 255, .5);
  background: rgba(255, 255, 255, .08);
}
.field .field-note { margin-top: 7px; font-size: 12.5px; color: var(--tx-faint); }

/* ---------- custom validation (native bubbles are suppressed).
   errors rise in from below and the offending field shakes ---------- */

.field input.bad, .field textarea.bad {
  border-color: rgba(242, 183, 108, .62);
  background: rgba(242, 183, 108, .05);
  animation: field-shake .38s var(--ease);
}
@keyframes field-shake {
  20%, 60% { translate: -5px 0; }
  40%, 80% { translate: 5px 0; }
}
.field-err {
  margin-top: 7px; font-size: 12.5px; color: var(--acc-amber);
  display: none;
}
.field-err.show { display: block; animation: err-in .45s var(--ease); }
.step-err.show { animation: err-in .45s var(--ease); }
@keyframes err-in {
  from { opacity: 0; transform: translateY(7px); filter: blur(5px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

/* a Continue that cannot fire yet is visibly asleep, but still CLICKABLE,
   clicking it animates in the message saying what is missing */
.btn-primary.asleep { opacity: .32; cursor: not-allowed; }

/* an optional field says so, right in the label */
.opt-tag {
  font-style: normal; margin-left: auto;
  font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--tx-faint);
}
.field label { display: flex; align-items: baseline; gap: 10px; }

/* ---------- password strength, in the house language: one hairline
   track with a glowing fill, a quiet uppercase readout, and glass pill
   criteria that light as they pass ---------- */

.pw-meta { display: flex; align-items: center; gap: 14px; margin-top: 12px; }
.pw-track {
  flex: 1; height: 2px; border-radius: 2px; background: var(--line);
  overflow: visible;
}
.pw-track i {
  display: block; height: 100%; width: 0%;
  border-radius: 2px;
  background: var(--tx-faint);
  transition: width .4s var(--ease), background .4s var(--ease), box-shadow .4s var(--ease);
}
.pw-meta[data-score="1"] .pw-track i { width: 25%; background: var(--red); box-shadow: 0 0 12px rgba(200, 16, 46, .5); }
.pw-meta[data-score="2"] .pw-track i { width: 50%; background: var(--acc-amber); box-shadow: 0 0 12px rgba(242, 183, 108, .35); }
.pw-meta[data-score="3"] .pw-track i { width: 75%; background: var(--acc-amber); box-shadow: 0 0 12px rgba(242, 183, 108, .4); }
.pw-meta[data-score="4"] .pw-track i { width: 100%; background: var(--acc-green); box-shadow: 0 0 14px rgba(126, 234, 155, .45); }
.pw-label {
  flex: none; min-width: 74px; text-align: right;
  font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--tx-faint);
  transition: color .3s var(--ease);
}
.pw-meta[data-score="4"] .pw-label { color: var(--acc-green); }
.pw-meta[data-score="2"] .pw-label, .pw-meta[data-score="3"] .pw-label { color: var(--acc-amber); }
.pw-meta[data-score="1"] .pw-label { color: var(--red); }

.pw-crit { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; padding: 0; }
.pw-crit .pw-chip {
  list-style: none;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px; border-radius: 99px;
  font-size: 12px; font-weight: 500; color: var(--tx-faint);
  background: var(--fill); border: 1px solid var(--line);
  transition: color .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease);
}
.pw-chip svg {
  width: 9px; height: 9px; flex: none;
  stroke: var(--acc-green); stroke-width: 2.6; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
  opacity: 0; margin-left: -3px;
  transition: opacity .2s var(--ease), margin .25s var(--ease);
}
.pw-chip.ok {
  color: var(--tx-mid);
  border-color: rgba(126, 234, 155, .35);
  background: rgba(126, 234, 155, .06);
}
.pw-chip.ok svg { opacity: 1; margin-left: 0; }

/* ---------- step nav ---------- */

.step-nav { display: flex; align-items: center; gap: 18px; margin-top: 32px; }
.step.on .step-nav { animation: step-in .38s var(--ease) both .3s; }
.btn-back {
  background: none; border: 0; padding: 8px 2px; cursor: pointer;
  font: inherit; font-size: 14.5px; color: var(--tx-mut);
  transition: color .2s var(--ease);
}
.btn-back:hover { color: var(--tx); }

.step-err {
  margin-top: 16px; font-size: 13.5px; color: var(--acc-amber);
  opacity: 0; filter: blur(6px);
  transition: opacity .25s var(--ease), filter .3s var(--ease);
}
.step-err.show { opacity: 1; filter: blur(0); }

.spin {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, .25); border-top-color: #000;
  animation: spin .7s linear infinite;
  display: none; margin-right: 10px;
}
.btn.busy .spin { display: inline-block; }
@keyframes spin { to { rotate: 360deg; } }

/* ---------- success ---------- */

.done-mark { width: 54px; height: 54px; fill: var(--tx); }
.step.on .done-mark { animation: step-in .6s var(--ease) both; }
.step.on .done-copy { animation: step-in .5s var(--ease) both .18s; }

/* ---------- the wizard shell. the steps keep a fixed reading column on
   the left, a gradient hairline divides, and the Wedge app preview is a
   PERSISTENT companion on the right for every step, allowed to run off
   the right edge of the viewport. it enters once, on load; after that it
   only switches pages and lets its data update as answers land. ---------- */

.wiz-grid {
  width: min(1560px, 100%);
  display: grid;
  grid-template-columns: minmax(330px, 440px) 1px minmax(0, 1fr);
  gap: 0 clamp(32px, 4vw, 64px);
  align-items: center;
}
.wiz-steps { min-width: 0; }
.wiz-steps .step { width: 100%; }
.wiz-div {
  width: 1px; height: min(560px, 66vh); align-self: center;
  background: linear-gradient(180deg, transparent, var(--line-2) 18%, var(--line-2) 82%, transparent);
  transform-origin: 50% 50%;
}
html.js .wiz-div { animation: div-grow .8s var(--ease) both .45s; }
@keyframes div-grow {
  from { transform: scaleY(0); opacity: 0; }
  to { transform: scaleY(1); opacity: 1; }
}

/* the frame glides in from the right while resolving from a blur, and its
   interior cascades after it, once per visit */
.app-mock { min-width: 0; }
html.js .app-mock { animation: app-in .8s var(--ease) both .35s; }
@keyframes app-in {
  from { opacity: 0; filter: blur(16px); transform: translateX(72px); }
  to { opacity: 1; filter: blur(0); transform: translateX(0); }
}
html.js .am-row { animation: step-in .5s var(--ease) both; animation-delay: calc(var(--i, 0) * 65ms + 650ms); }

/* a piece of app data that just changed resolves in from a defocus, so
   answers visibly land in the workspace */
.am-flash { animation: am-flash .5s var(--ease); }
@keyframes am-flash {
  from { opacity: 0; filter: blur(7px); }
  to { opacity: 1; filter: blur(0); }
}

@media (max-width: 1059px) {
  .wiz-grid { grid-template-columns: 1fr; }
  .app-mock, .wiz-div { display: none; }
}

/* ---------- the Wedge app frame ---------- */

.am-frame {
  position: relative; /* the demo cursor and its ripples anchor here */
  display: grid; grid-template-columns: 192px minmax(0, 1fr);
  width: 100%; min-width: 780px;
  height: clamp(540px, 74vh, 780px);
  border-radius: 24px; overflow: hidden;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--line-2);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 50px 110px -46px rgba(0, 0, 0, .9);
  font-size: 13px;
}

/* sidebar */
.am-side {
  padding: 20px 14px 16px;
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 6px;
  min-height: 0;
}
.am-logo {
  display: flex; align-items: center; gap: 8px;
  padding: 2px 10px 14px;
  font-family: var(--disp); font-weight: 600; font-size: 15px; color: var(--tx);
}
.am-logo svg { width: 16px; height: 16px; fill: var(--tx); flex: none; }
.am-badge {
  background: #fff; color: #000;
  font-family: var(--sans); font-size: 9.5px; font-weight: 600; letter-spacing: .08em;
  border-radius: 5px; padding: 2px 7px;
}
.am-search {
  display: flex; align-items: center; gap: 8px;
  margin: 0 2px 10px; padding: 8px 11px; border-radius: 10px;
  background: rgba(255, 255, 255, .05); border: 1px solid var(--line);
  color: var(--tx-faint); font-size: 12px;
}
.am-search svg { width: 12px; height: 12px; stroke: currentColor; stroke-width: 1.8; fill: none; stroke-linecap: round; flex: none; }
.am-search kbd {
  margin-left: auto; font-family: var(--sans); font-size: 10px;
  border: 1px solid var(--line-2); border-radius: 5px; padding: 1px 5px;
  color: var(--tx-faint);
}
.am-nav { display: grid; gap: 2px; }
.am-nav span {
  display: flex; align-items: center; gap: 10px;
  padding: 8.5px 11px; border-radius: 10px;
  color: var(--tx-faint); font-weight: 500; font-size: 13px;
  transition: background .35s var(--ease), color .35s var(--ease);
}
.am-nav span svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 1.7; fill: none; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.am-nav span.act { background: rgba(255, 255, 255, .1); color: var(--tx); }
.am-nav .am-count {
  margin-left: auto; font-size: 10.5px; font-weight: 600;
  color: var(--acc-amber); background: rgba(242, 183, 108, .12);
  border-radius: 99px; padding: 1px 7px;
  font-variant-numeric: tabular-nums;
}
.am-client {
  margin-top: auto; display: flex; align-items: center; gap: 9px;
  padding: 12px 10px 2px; border-top: 1px solid var(--line);
  color: var(--tx-mut); font-size: 12px;
}
.am-client .am-ava { width: 22px; height: 22px; font-size: 9px; }
.am-client .on-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--acc-green); flex: none; margin-left: auto; }

/* main column */
.am-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.am-topbar {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 22px;
  border-bottom: 1px solid var(--line);
}
.am-crumb { font-size: 12px; color: var(--tx-faint); }
.am-crumb b { color: var(--tx); font-weight: 600; font-family: var(--disp); font-size: 14px; }
.am-phase {
  font-size: 10.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--acc-blue); background: rgba(126, 196, 227, .12);
  border: 1px solid rgba(126, 196, 227, .3);
  padding: 3px 9px; border-radius: 99px;
}
.am-top-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
/* no overlap on the avatar cluster, the stacked crescent read as a bug */
.am-avas { display: flex; gap: 5px; }
.am-ava {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  background: rgba(255, 255, 255, .14);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 600; color: var(--tx);
}
.am-ava.wedge { background: var(--paper); color: #000; }
.am-bell { position: relative; color: var(--tx-mut); display: inline-flex; }
.am-bell svg { width: 15px; height: 15px; stroke: currentColor; stroke-width: 1.7; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.am-bell i {
  position: absolute; top: -2px; right: -2px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--red);
}

/* pages, stacked and crossfading through a defocus */
.am-pages { position: relative; flex: 1; min-height: 0; }
.am-page {
  position: absolute; inset: 0;
  padding: 20px 22px;
  display: flex; flex-direction: column; gap: 14px;
  opacity: 0; filter: blur(9px); pointer-events: none;
  transition: opacity .5s var(--ease), filter .55s var(--ease);
  overflow: hidden;
}
.am-page.on { opacity: 1; filter: blur(0); }

/* shared page furniture */
.am-kpis {
  display: grid; grid-template-columns: 1.3fr 1fr 1fr;
  border: 1px solid var(--line); border-radius: 14px;
  flex: none;
}
.am-kpi { padding: 14px 16px; min-width: 0; }
.am-kpi + .am-kpi { border-left: 1px solid var(--line); }
.am-kpi b { display: block; font-family: var(--disp); font-size: 19px; font-weight: 600; color: var(--tx); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.am-kpi span { display: block; margin-top: 3px; font-size: 11px; color: var(--tx-faint); }
.am-kpi .am-bar { height: 3px; border-radius: 2px; background: var(--line-2); margin-top: 9px; overflow: hidden; }
.am-kpi .am-bar i { display: block; height: 100%; width: 62%; background: var(--paper); border-radius: 2px; }
.am-kpi .amber { color: var(--acc-amber); }

.am-card {
  border: 1px solid var(--line); border-radius: 14px;
  padding: 14px 16px;
}
.am-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.am-card-head b { font-size: 13px; font-weight: 600; color: var(--tx); }
.am-card-head span { font-size: 11px; color: var(--tx-faint); flex: none; }
.am-card p { font-size: 12.5px; line-height: 1.55; color: var(--tx-mut); }
.am-approve-row { display: flex; gap: 8px; margin-top: 11px; }
.am-btn {
  border-radius: 99px; padding: 7px 14px; font-size: 12px; font-weight: 600;
  border: 1px solid transparent;
}
.am-btn.pri { background: var(--paper); color: #000; }
.am-btn.sec { background: rgba(255, 255, 255, .07); color: var(--tx-mid); border-color: var(--line-2); }
.am-ok {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; color: var(--acc-green);
}
.am-ok svg { width: 12px; height: 12px; stroke: currentColor; stroke-width: 2.2; fill: none; stroke-linecap: round; stroke-linejoin: round; }

.am-2col { display: grid; grid-template-columns: 1.25fr 1fr; gap: 14px; min-height: 0; }

.am-author { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.am-author .am-ava { width: 22px; height: 22px; font-size: 8.5px; border: 0; }
.am-author b { font-size: 12px; font-weight: 600; color: var(--tx-mid); }
.am-author time { font-size: 10.5px; color: var(--tx-faint); margin-left: auto; }

.am-feed { display: grid; gap: 0; margin: 0; padding: 0; }
.am-feed li {
  list-style: none; display: flex; align-items: center; gap: 10px;
  padding: 10px 2px; border-bottom: 1px solid var(--line);
  color: var(--tx-mut); font-size: 12.5px;
}
.am-feed li:last-child { border-bottom: 0; }
.am-feed .f-dot { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.am-feed .f-dot.g { background: var(--acc-green); }
.am-feed .f-dot.b { background: var(--acc-blue); }
.am-feed .f-dot.a { background: var(--acc-amber); }
.am-feed b { color: var(--tx-mid); font-weight: 500; }
.am-feed time { color: var(--tx-faint); font-size: 11px; margin-left: auto; flex: none; }

.am-sec-label {
  font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--tx-faint);
}

/* ---------- preview page. a browser frame inside the app, the example
   site rendered light so it reads as a real website, comment pins, a live
   selection outline, and the editing toolbar floating over it ---------- */

.am-pv-head { display: flex; align-items: center; gap: 12px; flex: none; }
.am-live {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--tx-mid);
}
.am-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--acc-green); animation: am-pulse 2.2s var(--ease) infinite; }
@keyframes am-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(126, 234, 155, .5); }
  50% { box-shadow: 0 0 0 5px rgba(126, 234, 155, 0); }
}
.am-pv-note { margin-left: auto; font-size: 11px; color: var(--tx-faint); }

.am-brw {
  position: relative; flex: 1; min-height: 0;
  display: flex; flex-direction: column;
  border: 1px solid var(--line-2); border-radius: 14px; overflow: hidden;
  background: #0C0C11;
}
.am-brw-bar {
  flex: none; display: flex; align-items: center; gap: 12px;
  padding: 9px 12px; border-bottom: 1px solid var(--line);
}
.am-brw-dots { display: flex; gap: 5px; }
.am-brw-dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .16); }
.am-brw-url {
  flex: 1; max-width: 300px; margin-inline: auto;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 10.5px; color: var(--tx-mut);
  background: rgba(255, 255, 255, .06); border-radius: 7px; padding: 4px 10px;
  font-variant-numeric: tabular-nums;
}
.am-brw-url svg { width: 9px; height: 9px; stroke: var(--acc-green); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.am-brw-share { font-size: 11px; color: var(--tx-faint); }

/* the example site. dark, editorial, and COMPOSED, a real page, not a
   template: split hero, display type scaled to the container (cqw), a
   full-bleed image panel with an info card, marquee band, meta footer.
   sizes use container units so it holds from 500px to 1200px wide. */
.am-site {
  position: relative; flex: 1; min-height: 0; overflow: hidden;
  background: #100F0D; color: #F4F1EA;
  font-family: var(--sans);
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto;
  container-type: inline-size;
}
.ms-nav {
  display: flex; align-items: center; gap: 16px;
  padding: 11px 22px;
  font-size: 10px; color: rgba(244, 241, 234, .55);
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.ms-nav b { font-family: var(--disp); font-size: 12.5px; color: #F4F1EA; margin-right: auto; letter-spacing: -.01em; }
.ms-cta {
  font-style: normal; font-size: 9.5px; font-weight: 600; color: #fff;
  background: #C8102E; border-radius: 99px; padding: 5px 13px;
}
.ms3-hero { display: grid; grid-template-columns: 1.08fr .92fr; min-height: 0; }
.ms3-left {
  display: flex; flex-direction: column; min-width: 0;
  padding: clamp(16px, 3.6cqw, 34px);
  padding-right: clamp(14px, 2.6cqw, 26px);
}
.ms-eyebrow {
  display: block; font-size: 8.5px; font-size: clamp(7.5px, 1.1cqw, 10px);
  font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: rgba(244, 241, 234, .45);
  margin-bottom: clamp(8px, 1.6cqw, 14px);
}
.ms3-h {
  display: block;
  font-family: var(--disp); font-weight: 600;
  font-size: 34px; font-size: clamp(24px, 5.6cqw, 52px);
  letter-spacing: -.035em; line-height: .97;
  color: #F4F1EA; text-transform: lowercase;
}
.ms3-h .red { color: #FF3B54; }
.am-site.alt .ms3-h .red { color: #7EC4E3; }
.am-site.alt .ms-cta, .am-site.alt .ms3-btn { background: #2E7DA6; }
.ms3-blurb {
  margin-top: clamp(8px, 1.8cqw, 16px);
  font-size: 10px; font-size: clamp(9px, 1.35cqw, 12.5px);
  line-height: 1.5; color: rgba(244, 241, 234, .58);
  max-width: 30ch;
}
.ms3-cta-row { display: flex; align-items: center; gap: clamp(8px, 1.6cqw, 14px); margin-top: clamp(12px, 2.4cqw, 22px); }
.ms3-btn {
  font-style: normal; font-weight: 600; color: #fff;
  font-size: 9.5px; font-size: clamp(8.5px, 1.3cqw, 12px);
  background: #C8102E; border-radius: 99px;
  padding: .55em 1.25em;
}
.ms3-link {
  font-size: 9.5px; font-size: clamp(8.5px, 1.3cqw, 12px);
  font-weight: 500; color: rgba(244, 241, 234, .65);
}
.ms3-link i { font-style: normal; color: #FF3B54; }
.ms3-stats {
  margin-top: auto; display: flex; gap: clamp(16px, 3.4cqw, 34px);
  padding-top: clamp(10px, 2cqw, 16px);
  border-top: 1px solid rgba(255, 255, 255, .08);
}
.ms3-stats b {
  display: block; font-family: var(--disp); font-weight: 600;
  font-size: 13px; font-size: clamp(11px, 1.9cqw, 17px);
  color: #F4F1EA; font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.ms3-stats span {
  display: block; margin-top: 2px;
  font-size: 7.5px; font-size: clamp(7px, 1cqw, 9px);
  letter-spacing: .12em; text-transform: uppercase;
  color: rgba(244, 241, 234, .42);
}
.ms3-img {
  position: relative; min-height: 0;
  border-left: 1px solid rgba(255, 255, 255, .06);
  background:
    radial-gradient(120% 90% at 82% 16%, rgba(255, 59, 84, .22), transparent 52%),
    radial-gradient(90% 70% at 15% 90%, rgba(126, 196, 227, .12), transparent 55%),
    linear-gradient(160deg, #1B130C, #6E3A1B 44%, #C98A4B 62%, #2A1E38 96%);
}
.ms3-img::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(8, 6, 4, .5));
}
.ms3-card {
  position: absolute; left: clamp(10px, 2cqw, 18px); bottom: clamp(10px, 2cqw, 18px); z-index: 2;
  border-radius: 10px; padding: clamp(8px, 1.6cqw, 13px) clamp(10px, 2cqw, 16px);
  background: rgba(10, 9, 7, .72);
  border: 1px solid rgba(255, 255, 255, .12);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.ms3-card span {
  display: block; font-size: 7px; font-size: clamp(6.5px, .95cqw, 8.5px);
  letter-spacing: .14em; text-transform: uppercase; color: rgba(244, 241, 234, .5);
}
.ms3-card b {
  display: block; margin-top: 3px;
  font-family: var(--disp); font-weight: 600;
  font-size: 11px; font-size: clamp(10px, 1.7cqw, 15px);
  color: #F4F1EA;
}
/* the marquee band, hairline framed, drifting slowly */
.ms2-marquee {
  overflow: hidden; white-space: nowrap;
  border-block: 1px solid rgba(255, 255, 255, .07);
  padding: clamp(5px, 1cqw, 8px) 0;
}
.ms2-marquee span {
  display: inline-block;
  font-size: 8.5px; font-size: clamp(8px, 1.15cqw, 10.5px);
  font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(244, 241, 234, .5);
  animation: ms2-drift 26s linear infinite;
}
.ms2-marquee i { font-style: normal; color: #FF3B54; margin: 0 12px; }
@keyframes ms2-drift { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ms2-marquee span { animation: none; } }
.ms-foot {
  display: flex; justify-content: space-between; align-items: center;
  padding: clamp(8px, 1.6cqw, 12px) 22px;
  font-size: 8px; font-size: clamp(7.5px, 1.05cqw, 9.5px);
  color: rgba(244, 241, 234, .4);
}
.ms-sel { position: relative; display: inline-block; padding: .06em .18em; margin-left: -.18em; }
.ms-sel::after {
  content: ""; position: absolute; inset: 0;
  border: 1.5px solid var(--acc-blue); border-radius: 4px;
  box-shadow: 0 0 0 3px rgba(126, 196, 227, .16);
}
.ms-sel-tag {
  position: absolute; top: -15px; left: -1px;
  font-size: 8px; font-weight: 600; letter-spacing: .02em; color: #0B1A22;
  background: var(--acc-blue); border-radius: 4px 4px 4px 0; padding: 2px 7px;
  white-space: nowrap; z-index: 1;
}

.am-pin {
  position: absolute; z-index: 3;
  width: 18px; height: 18px; border-radius: 50% 50% 50% 4px;
  background: #F2EFE7; color: #16130E;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 9.5px; font-weight: 600;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .5);
}
.am-pin.lit { background: var(--acc-blue); color: #0B1A22; }
.am-note {
  position: absolute; z-index: 4; width: 166px;
  border-radius: 12px 12px 12px 2px; padding: 10px 12px;
  background: rgba(12, 12, 17, .92); color: var(--tx-mid);
  border: 1px solid var(--line-2);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 44px -18px rgba(0, 0, 0, .8);
  font-size: 10.5px; line-height: 1.45;
}
.am-note b { display: block; font-size: 10px; color: var(--tx); margin-bottom: 3px; }
.am-note b time { float: right; color: var(--tx-faint); font-weight: 400; }
.am-note .am-note-re {
  display: block; margin-top: 7px; padding-top: 7px;
  border-top: 1px solid var(--line);
  color: var(--tx-faint); font-size: 10px;
}
.am-note .am-note-re i { font-style: normal; color: var(--acc-green); }

.am-tools {
  position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 5;
  display: flex; align-items: center; gap: 3px;
  padding: 5px; border-radius: 99px;
  background: rgba(12, 12, 17, .9);
  border: 1px solid var(--line-2);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: 0 14px 34px -14px rgba(0, 0, 0, .8);
}
.am-tools .tl {
  width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--tx-mut);
}
.am-tools .tl svg { width: 13px; height: 13px; stroke: currentColor; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.am-tools .tl.act { background: var(--paper); color: #000; }
.am-tools .tl-div { width: 1px; height: 16px; background: var(--line-2); margin-inline: 4px; }
.am-tools .tl-count { font-size: 10.5px; color: var(--tx-mut); padding-inline: 8px 10px; white-space: nowrap; }

/* ---------- preview page as an editor: a settings rail on the left where
   the client edits copy and settings, the live site on the right where
   they pin comments ---------- */

.pv-grid {
  flex: 1; min-height: 0;
  display: grid; grid-template-columns: 178px minmax(0, 1fr); gap: 12px;
}
.pv-rail {
  display: flex; flex-direction: column; gap: 8px;
  border: 1px solid var(--line); border-radius: 14px;
  padding: 12px; overflow: hidden;
}
.pv-rail .am-sec-label { margin-bottom: 2px; }
.pv-field {
  border: 1px solid var(--line); border-radius: 10px;
  padding: 8px 10px;
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
.pv-field label { display: flex; justify-content: space-between; align-items: center; font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--tx-faint); margin-bottom: 4px; }
.pv-field label svg { width: 10px; height: 10px; stroke: var(--tx-faint); stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.pv-field b { display: block; font-size: 11.5px; font-weight: 500; color: var(--tx-mid); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-field.live { border-color: rgba(126, 196, 227, .5); background: rgba(126, 196, 227, .06); }
.pv-field.live b { color: var(--tx); }
.pv-swatches { display: flex; gap: 6px; margin-top: 2px; }
.pv-swatches i { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid transparent; }
.pv-swatches i.on { border-color: var(--paper); }
.pv-sections { display: grid; gap: 4px; }
.pv-sec {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; color: var(--tx-mut);
  padding: 5px 7px; border-radius: 8px;
}
.pv-sec .grip { display: inline-flex; flex-direction: column; gap: 2.5px; }
.pv-sec .grip i { width: 9px; height: 1.5px; border-radius: 1px; background: rgba(255, 255, 255, .22); }
.pv-sec.on { background: var(--fill); color: var(--tx-mid); }
/* toggle pills (theme) and a mini slider (radius), so the rail reads as a
   real settings panel */
.pv-pills { display: flex; gap: 5px; margin-top: 2px; }
.pv-pills span {
  flex: 1; text-align: center;
  font-size: 10px; font-weight: 600; color: var(--tx-faint);
  border: 1px solid var(--line); border-radius: 99px; padding: 4px 0;
}
.pv-pills span.on { background: var(--paper); border-color: var(--paper); color: #000; }
.pv-slider { position: relative; height: 14px; display: flex; align-items: center; margin-top: 4px; }
.pv-slider .trk { width: 100%; height: 2px; border-radius: 2px; background: var(--line-2); }
.pv-slider .trk i { display: block; width: 62%; height: 100%; border-radius: 2px; background: var(--paper); }
.pv-slider .knob {
  position: absolute; left: 62%; top: 50%; transform: translate(-50%, -50%);
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--paper); box-shadow: 0 0 0 3px rgba(255, 255, 255, .12);
}
.pv-field label b.val { font-size: 9.5px; color: var(--tx-mut); text-transform: none; letter-spacing: 0; font-variant-numeric: tabular-nums; }

/* ---------- messages page ---------- */

.am-chat { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; overflow: hidden; }
.am-chat-day {
  align-self: center; font-size: 10px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--tx-faint);
  padding-bottom: 2px;
}
.am-msg { display: flex; gap: 9px; max-width: 78%; }
.am-msg .am-ava { width: 24px; height: 24px; font-size: 9px; border: 0; flex: none; align-self: flex-end; }
.am-msg p {
  padding: 9px 13px; border-radius: 14px 14px 14px 3px;
  background: rgba(255, 255, 255, .07); border: 1px solid var(--line);
  font-size: 12.5px; line-height: 1.5; color: var(--tx-mid);
}
.am-msg time { display: block; margin-top: 4px; font-size: 10px; color: var(--tx-faint); }
.am-msg.out { align-self: flex-end; }
.am-msg.out p {
  border-radius: 14px 14px 3px 14px;
  background: var(--paper); border-color: var(--paper); color: #000;
  transition: filter .28s var(--ease), opacity .28s var(--ease), background .3s var(--ease), color .3s var(--ease);
}
.am-msg.out time { text-align: right; }
/* the draft bubble: dim glass while empty, paper once words exist, and a
   soft defocus shimmer while keys are landing */
.am-msg.out.ghost p {
  background: rgba(255, 255, 255, .07); border-color: var(--line-2); color: var(--tx-faint);
}
.am-msg.out.typing p { filter: blur(1.5px); opacity: .82; }
.am-caret {
  display: inline-block; width: 1.5px; height: .95em; margin-left: 2px;
  background: currentColor; vertical-align: text-bottom;
  animation: caret-blink 1.05s steps(2, start) infinite;
}
@keyframes caret-blink { to { visibility: hidden; } }
.am-sysline {
  align-self: center; display: inline-flex; align-items: center; gap: 6px;
  font-size: 10.5px; color: var(--tx-faint);
}
.am-sysline svg { width: 11px; height: 11px; stroke: var(--acc-green); stroke-width: 2.2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.am-chat-input {
  flex: none; margin-top: 8px; /* the thread bottom-anchors via the chat's
    justify-content, an auto margin here would push it back to the top */
  display: flex; align-items: center; gap: 10px;
  padding: 10px 8px 10px 16px; border-radius: 99px;
  background: rgba(255, 255, 255, .05); border: 1px solid var(--line-2);
  color: var(--tx-faint); font-size: 12.5px;
}
.am-send {
  margin-left: auto; width: 30px; height: 30px; border-radius: 50%; flex: none;
  background: var(--paper); color: #000;
  display: inline-flex; align-items: center; justify-content: center;
}
.am-send svg { width: 13px; height: 13px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- updates page, a dated rail, typed entries, real artifacts ---------- */

.am-uprail { position: relative; display: grid; gap: 16px; padding-left: 4px; }
.am-uprail::before {
  content: ""; position: absolute; left: 8px; top: 10px; bottom: 10px;
  width: 1px; background: var(--line);
}
.am-up { position: relative; display: grid; grid-template-columns: 10px 1fr; gap: 14px; }
.up-dot {
  width: 9px; height: 9px; border-radius: 50%; margin-top: 4px;
  position: relative; z-index: 1;
  border: 2px solid #101014;
}
.up-dot.b { background: var(--acc-blue); }
.up-dot.g { background: var(--acc-green); }
.up-dot.a { background: var(--acc-amber); }
.up-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 5px; }
.up-head em {
  font-style: normal; font-size: 10px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--tx-mut);
}
.up-head time { font-size: 10.5px; color: var(--tx-faint); font-variant-numeric: tabular-nums; }
.am-up p { font-size: 12.5px; line-height: 1.55; color: var(--tx-mut); max-width: 52ch; }
.up-chips { display: flex; gap: 7px; margin-top: 8px; flex-wrap: wrap; }
.up-chips span {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10.5px; color: var(--tx-mut);
  border: 1px solid var(--line-2); border-radius: 99px; padding: 4px 11px;
  background: var(--fill);
}
.up-chips span svg { width: 10px; height: 10px; stroke: currentColor; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.up-receipt {
  display: flex; align-items: center; gap: 14px;
  margin-top: 6px; padding: 10px 14px;
  border: 1px solid var(--line); border-radius: 12px;
  font-size: 12px; color: var(--tx-mut);
}
.up-receipt b { font-family: var(--disp); font-size: 14px; color: var(--tx); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.up-receipt .am-ok { margin-left: auto; }

/* ---------- billing page ---------- */

.am-quote {
  border: 1px solid var(--line-2); border-radius: 16px;
  padding: 18px 20px;
  background: rgba(255, 255, 255, .03);
}
.am-quote > span {
  display: block; font-size: 10.5px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--tx-faint);
}
.am-quote b {
  display: block; margin-top: 6px;
  font-family: var(--disp); font-weight: 600; font-size: 30px;
  letter-spacing: -.03em; color: var(--tx); font-variant-numeric: tabular-nums;
}
.am-quote p { margin-top: 5px; font-size: 12px; color: var(--tx-mut); }
.am-invs { display: grid; gap: 8px; }
.am-inv {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--line); border-radius: 12px;
  padding: 11px 14px; font-size: 12px; color: var(--tx-mut);
}
.am-inv b { color: var(--tx); font-weight: 600; font-size: 12.5px; }
.am-inv .am-inv-amt { margin-left: auto; font-family: var(--disp); color: var(--tx-mid); font-variant-numeric: tabular-nums; }
.am-inv .am-inv-tag {
  flex: none; font-size: 10px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  border-radius: 99px; padding: 2.5px 9px;
  color: var(--acc-blue); background: rgba(126, 196, 227, .1); border: 1px solid rgba(126, 196, 227, .28);
}

/* the Wedge avatar carries the actual mark, not a letter */
.am-ava.wedge svg { width: 12px; height: 12px; fill: #000; }

/* ---------- the submit choreography. while the client types, their own
   typing dots ride the thread; on Send the draft finalizes, Wedge types
   back, the reply lands, then the whole app blurs away under the
   confirmation ---------- */

.am-typing { display: none; align-self: flex-start; }
.am-typing.show { display: flex; }
.am-typing .dots {
  display: inline-flex; gap: 4px; align-items: center;
  padding: 10px 14px; border-radius: 14px 14px 14px 3px;
  background: rgba(255, 255, 255, .07); border: 1px solid var(--line);
}
.am-typing .dots i {
  width: 5px; height: 5px; border-radius: 50%; background: var(--tx-mut);
  animation: ty-b 1.1s ease-in-out infinite;
}
.am-typing .dots i:nth-child(2) { animation-delay: .15s; }
.am-typing .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes ty-b { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
/* the client's own typing dots, paper, right-aligned */
.am-typing.me { align-self: flex-end; }
.am-typing.me .dots {
  background: var(--paper); border-color: var(--paper);
  border-radius: 14px 14px 3px 14px;
}
.am-typing.me .dots i { background: rgba(0, 0, 0, .5); }
/* messages that exist but have not arrived yet. arrivals MORPH in as
   bubbles, growing out of the spot where the typing dots sat, not a flat
   fade: scale from the bottom corner + defocus resolve */
@keyframes bubble-in {
  from { opacity: 0; filter: blur(10px); transform: translateY(12px) scale(.7); }
  to { opacity: 1; filter: blur(0); transform: none; }
}
.am-msg.reveal { display: none; }
.am-msg.reveal.show {
  display: flex;
  animation: bubble-in .55s cubic-bezier(.3, .6, .2, 1) both;
  transform-origin: 14% 100%;
}
.am-msg.out.reveal.show { transform-origin: 88% 100%; }
/* the typing dots arrive the same way, so dots-to-bubble reads as one
   continuous morph when they swap in the same frame */
.am-typing.show { animation: bubble-in .45s cubic-bezier(.3, .6, .2, 1) both; transform-origin: 14% 100%; }
.am-typing.me.show { transform-origin: 88% 100%; }
/* the sent draft drops its caret and SETTLES with a small lift, the
   sending gesture (this rule must sit after .am-msg.reveal.show, equal
   specificity, so it takes over the animation slot when .sent lands) */
.am-msg.out.sent .am-caret { display: none; }
@keyframes sent-settle {
  0% { transform: none; }
  40% { transform: translateY(-4px); }
  100% { transform: none; }
}
.am-msg.out.sent { animation: sent-settle .5s var(--ease); }
/* the whole app stepping back behind the confirmation. the entrance
   animation's fill would pin filter/opacity, so it is released here, and
   the selector must outweigh `html.js .app-mock` or the fill wins */
html.js .app-mock.dim, .app-mock.dim {
  animation: none;
  filter: blur(14px); opacity: .6;
  /* long and soft, the step-back must never read as a snap (the inline
     transition from sendFlow carries the same 1.4s timing) */
  transition: filter 1.4s cubic-bezier(.5, 0, .15, 1), opacity 1.4s cubic-bezier(.5, 0, .15, 1);
}
/* on send the wizard yields the page to the app. animation: none matters,
   the divider's grow-in fill would pin its opacity and leave a hairline
   down the middle of the fullscreen app */
html.js .wiz-steps.yield, .wiz-steps.yield,
html.js .wiz-div.yield, .wiz-div.yield {
  animation: none;
  opacity: 0; pointer-events: none;
  filter: blur(10px);
  transition: opacity .55s var(--ease), filter .55s var(--ease);
  /* removing .yield snaps filter off instantly (no transition in the base
     state), which matters: the done overlay is position: fixed inside
     .wiz-steps, and a lingering filter would become its containing block */
}

/* ---------- the takeover. the app expands to the REAL viewport edges and
   the page becomes the app: site chrome gone, corners squared, interior
   re-spaced for full size. story.js flies it from its measured rect to
   inset 0 with top/left/width/height transitions. ---------- */

html.app-live { overflow: hidden; }
/* must outweigh `html.js .app-top`, whose entrance animation fill pins
   opacity (the same trap as the app frame's filter and transform) */
html.js.app-live .app-top, html.app-live .app-top,
html.js.app-live .app-progress, html.app-live .app-progress {
  animation: none;
  opacity: 0; pointer-events: none;
  filter: blur(8px);
  transition: opacity .5s var(--ease), filter .5s var(--ease);
}
/* html.js variant included so animation: none OUTWEIGHS the app-in
   entrance rule (html.js .app-mock): its fill pins TRANSFORM, and a
   pinned transform silently kills the whole FLIP flight. Trap no. 5. */
html.js .app-mock.takeover, .app-mock.takeover {
  /* one shared gutter so the topbar crumb and the page content sit on the
     SAME left edge at every width, the mismatched clamps read as a bug */
  --tk-x: clamp(28px, 5vw, 84px);
  /* FLIP flight: the app snaps to its FINAL fullscreen layout in one
     reflow, story.js transforms it back onto the old rect and releases,
     and the whole glide runs on the compositor. NOTHING in here may
     transition layout properties, a mid-flight reflow is the stutter. */
  position: fixed; inset: 0; z-index: 40;
  transform-origin: 0 0;
  animation: none;
}
.app-mock.takeover.flying { will-change: transform, filter; }
.app-mock.takeover .am-frame {
  width: 100%; height: 100%; min-width: 0;
  border-radius: 0; border: 0;
  box-shadow: none;
  grid-template-columns: clamp(248px, 16vw, 300px) minmax(0, 1fr);
  font-size: clamp(14px, .45vw + 8px, 16px);
  /* backdrop-filter recomputes every frame of the resize flight and is
     the main source of jank, the takeover trades it for a solid ground */
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: #0B0B10;
}
.app-mock.takeover .am-side { padding: clamp(24px, 3.4vh, 34px) clamp(18px, 1.3vw, 26px) 24px; gap: 8px; }
.app-mock.takeover .am-topbar { padding: clamp(18px, 2.6vh, 26px) var(--tk-x); gap: 14px; }
.app-mock.takeover .am-page { padding: clamp(26px, 4.5vh, 48px) var(--tk-x); gap: 18px; }
/* while the frame flies, the interior rides a soft defocus wave, the
   reflow of a hundred small size jumps reads as one motion blur */
/* the defocus rises FAST (12%) so the one-reflow layout swap under the
   FLIP is masked from the first frames, holds through the glide, and
   sharpens on approach */
@keyframes tk-soft {
  0% { filter: blur(0) brightness(1); }
  12% { filter: blur(6px) brightness(.96); }
  58% { filter: blur(6px) brightness(.96); }
  100% { filter: blur(0) brightness(1); }
}
.app-mock.takeover.flying .am-frame { animation: tk-soft 1.55s cubic-bezier(.65, .01, .08, 1) both; }
/* touchdown: the interior settles in a small staggered wave, sidebar
   first, the app visibly finishing its own assembly */
@keyframes tk-settle {
  from { opacity: .3; filter: blur(5px); transform: translateY(9px); }
  to { opacity: 1; filter: blur(0); transform: none; }
}
.app-mock.takeover.landed .am-logo { animation: tk-settle .5s var(--ease) both; }
.app-mock.takeover.landed .am-search { animation: tk-settle .5s var(--ease) both .05s; }
.app-mock.takeover.landed .am-nav > span { animation: tk-settle .5s var(--ease) both; }
.app-mock.takeover.landed .am-nav > span:nth-child(1) { animation-delay: .1s; }
.app-mock.takeover.landed .am-nav > span:nth-child(2) { animation-delay: .15s; }
.app-mock.takeover.landed .am-nav > span:nth-child(3) { animation-delay: .2s; }
.app-mock.takeover.landed .am-nav > span:nth-child(4) { animation-delay: .25s; }
.app-mock.takeover.landed .am-nav > span:nth-child(5) { animation-delay: .3s; }
.app-mock.takeover.landed .am-nav > span:nth-child(6) { animation-delay: .35s; }
.app-mock.takeover.landed .am-nav > span:nth-child(7) { animation-delay: .4s; }
.app-mock.takeover.landed .am-client { animation: tk-settle .5s var(--ease) both .45s; }
.app-mock.takeover.landed .am-topbar { animation: tk-settle .55s var(--ease) both .1s; }
/* ambient life once the app is the page: the reply pings the bell and
   drops an unread badge on Messages, the presence dot breathes */
@keyframes pop-in {
  0% { transform: scale(0); opacity: 0; }
  60% { transform: scale(1.35); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes bell-swing {
  0%, 100% { rotate: 0deg; }
  25% { rotate: 12deg; }
  55% { rotate: -9deg; }
  80% { rotate: 4deg; }
}
.am-bell.ping i { animation: pop-in .5s var(--ease) both .15s; }
.am-bell.ping svg { animation: bell-swing .7s var(--ease); transform-origin: 50% 20%; }
.am-count.pop { animation: pop-in .5s var(--ease) both .1s; }
.am-client .on-dot { animation: dot-breathe 3.2s ease-in-out infinite; }
@keyframes dot-breathe {
  0%, 100% { opacity: 1; }
  50% { opacity: .45; }
}
/* full-size type. the shell keeps its px scale so the side preview is
   untouched, the takeover promotes every surface it shows */
.app-mock.takeover .am-logo { font-size: 1.2em; padding-bottom: 18px; }
.app-mock.takeover .am-logo svg { width: 18px; height: 18px; }
.app-mock.takeover .am-badge { font-size: .72em; }
.app-mock.takeover .am-search { font-size: .93em; padding: 10px 13px; margin-bottom: 12px; }
.app-mock.takeover .am-nav { gap: 3px; }
.app-mock.takeover .am-nav span { font-size: 1.04em; padding: 10.5px 13px; gap: 12px; border-radius: 11px; }
.app-mock.takeover .am-nav span svg { width: 16px; height: 16px; }
.app-mock.takeover .am-nav .am-count { font-size: .82em; }
.app-mock.takeover .am-client { font-size: .96em; padding-top: 14px; }
.app-mock.takeover .am-client .am-ava { width: 26px; height: 26px; font-size: 10px; }
.app-mock.takeover .am-crumb { font-size: .96em; }
.app-mock.takeover .am-crumb b { font-size: 1.2em; }
.app-mock.takeover .am-phase { font-size: .82em; padding: 4px 11px; }
.app-mock.takeover .am-top-right { gap: 14px; }
.app-mock.takeover .am-top-right .am-ava { width: 30px; height: 30px; font-size: 11px; }
.app-mock.takeover .am-bell svg { width: 17px; height: 17px; }
/* the chat reads as a real conversation column at full width, thread
   anchored to the composer like a real messenger */
.am-chat { width: 100%; max-width: 880px; margin-inline: auto; justify-content: flex-end; }
.app-mock.takeover .am-chat { gap: 13px; }
.app-mock.takeover .am-chat-day { font-size: .79em; }
.app-mock.takeover .am-msg { gap: 11px; max-width: 70%; }
.app-mock.takeover .am-msg .am-ava { width: 30px; height: 30px; font-size: 10.5px; }
.app-mock.takeover .am-msg p { font-size: 1.04em; padding: 12px 16px; border-radius: 16px 16px 16px 4px; }
.app-mock.takeover .am-msg.out p { border-radius: 16px 16px 4px 16px; }
.app-mock.takeover .am-msg time { font-size: .79em; margin-top: 5px; }
.app-mock.takeover .am-sysline { font-size: .82em; }
.app-mock.takeover .am-typing .dots { padding: 12px 16px; border-radius: 16px 16px 16px 4px; }
.app-mock.takeover .am-typing.me .dots { border-radius: 16px 16px 4px 16px; }
.app-mock.takeover .am-typing .dots i { width: 6px; height: 6px; }
.app-mock.takeover .am-chat-input { font-size: 1em; padding: 13px 10px 13px 20px; }
.app-mock.takeover .am-send { width: 36px; height: 36px; }
.app-mock.takeover .am-send svg { width: 15px; height: 15px; }
/* the other pages, in case the takeover lands elsewhere later */
.app-mock.takeover .am-kpi b { font-size: 1.64em; }
.app-mock.takeover .am-kpi span { font-size: .89em; }
.app-mock.takeover .am-card p { font-size: 1em; }
.app-mock.takeover .am-card-head b { font-size: 1.07em; }
/* the confirmation is a CENTERED overlay above the blurred app, with its
   own veil so the copy is unmistakably readable */
@keyframes done-in { from { opacity: 0; } to { opacity: 1; } }
.step[data-step="done"].on {
  position: fixed; inset: 0; z-index: 60;
  width: auto;
  display: grid; place-items: center;
  text-align: center; padding: 24px;
  background: radial-gradient(closest-side at 50% 44%, rgba(0, 0, 0, .62), rgba(0, 0, 0, .28));
  /* the veil arrives as a pure slow fade, no rise, no blur pop; the copy
     inside carries the staged movement */
  animation: done-in 1s cubic-bezier(.4, 0, .2, 1) both;
}
.done-inner { width: min(640px, 92vw); }
.done-mark { margin-inline: auto; width: 46px; height: 46px; }
.step[data-step="done"] .step-eyebrow { margin-bottom: 18px; }
.step[data-step="done"] .step-sub {
  margin-inline: auto; font-size: 16px; color: var(--tx-mid); max-width: 52ch;
}
/* the receipt, what they actually sent, played back in one glass card */
.done-receipt {
  display: grid; grid-template-columns: repeat(4, 1fr);
  margin-top: 28px;
  border: 1px solid var(--line-2); border-radius: 16px;
  background: rgba(255, 255, 255, .04);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
  text-align: left;
}
.done-receipt > div { padding: 14px 18px; min-width: 0; }
.done-receipt > div + div { border-left: 1px solid var(--line); }
.done-receipt span {
  display: block; font-size: 10px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--tx-faint);
}
.done-receipt b {
  display: block; margin-top: 5px;
  font-family: var(--disp); font-weight: 600; font-size: 14.5px;
  letter-spacing: -.01em; color: var(--tx);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 560px) {
  .done-receipt { grid-template-columns: 1fr 1fr; }
  .done-receipt > div:nth-child(3) { border-left: 0; }
  .done-receipt > div:nth-child(n+3) { border-top: 1px solid var(--line); }
}
.done-q {
  margin-top: 30px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--disp); font-weight: 500; font-size: 21px;
  letter-spacing: -.02em; color: var(--tx);
}
/* the why lives behind the eye: hover (or tap) resolves the full story
   in from a defocus, the confirmation itself stays quiet */
.done-eye {
  position: relative; width: 30px; height: 30px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .06); border: 1px solid var(--line-2);
  color: var(--tx-mut); cursor: pointer;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.done-eye:hover, .done-eye:focus-visible, .done-eye.open {
  background: rgba(255, 255, 255, .12); color: var(--tx); border-color: rgba(255, 255, 255, .3);
}
.done-eye svg { width: 15px; height: 15px; stroke: currentColor; stroke-width: 1.7; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.done-tip {
  position: absolute; bottom: calc(100% + 12px); left: 50%; transform: translateX(-50%);
  width: min(380px, 82vw);
  padding: 14px 17px; border-radius: 14px;
  background: rgba(14, 14, 18, .9);
  border: 1px solid var(--line-2);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 24px 60px -24px rgba(0, 0, 0, .8);
  font-family: var(--sans); font-size: 13px; font-weight: 400;
  line-height: 1.6; letter-spacing: 0; text-align: left; text-transform: none;
  color: var(--tx-mid);
  opacity: 0; filter: blur(6px); pointer-events: none;
  transition: opacity .4s var(--ease), filter .4s var(--ease);
  z-index: 5;
}
.done-eye:hover .done-tip, .done-eye:focus-visible .done-tip, .done-eye.open .done-tip {
  opacity: 1; filter: blur(0); pointer-events: auto;
}
.step[data-step="done"] .step-nav { justify-content: center; margin-top: 22px; }
/* the overlay itself arrives in a cascade */
.step[data-step="done"].on .done-mark { animation: step-in .5s var(--ease) both .1s; }
.step[data-step="done"].on .done-copy > * { animation: step-in .5s var(--ease) both; }
.step[data-step="done"].on .done-copy > *:nth-child(1) { animation-delay: .18s; }
.step[data-step="done"].on .done-copy > *:nth-child(2) { animation-delay: .26s; }
.step[data-step="done"].on .done-copy > *:nth-child(3) { animation-delay: .34s; }
.step[data-step="done"].on .done-copy > *:nth-child(4) { animation-delay: .46s; }
.step[data-step="done"].on .done-copy > *:nth-child(5) { animation-delay: .52s; }
.step[data-step="done"].on .done-copy > *:nth-child(6) { animation-delay: .6s; }

/* timeline page */
.am-phases { display: grid; gap: 10px; }
.am-phaserow {
  display: grid; grid-template-columns: 20px 1fr auto; gap: 12px; align-items: center;
  border: 1px solid var(--line); border-radius: 14px; padding: 13px 16px;
}
.am-phaserow.live { border-color: var(--line-2); background: rgba(255, 255, 255, .03); }
.am-ph-dot { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--line-2); justify-self: center; }
.am-phaserow.past .am-ph-dot { background: var(--acc-green); border-color: var(--acc-green); }
.am-phaserow.live .am-ph-dot { background: var(--paper); border-color: var(--paper); box-shadow: 0 0 10px rgba(255, 255, 255, .4); }
.am-ph-name { min-width: 0; }
.am-ph-name b { display: block; font-size: 13px; font-weight: 600; color: var(--tx); }
.am-ph-name span { display: block; margin-top: 2px; font-size: 11px; color: var(--tx-faint); }
.am-ph-name .am-bar { height: 3px; border-radius: 2px; background: var(--line-2); margin-top: 8px; max-width: 220px; overflow: hidden; }
.am-ph-name .am-bar i { display: block; height: 100%; width: 62%; background: var(--paper); }
.am-ph-date { font-size: 11.5px; color: var(--tx-mut); font-variant-numeric: tabular-nums; }
.am-phaserow.past .am-ph-date { color: var(--tx-faint); }

/* ---------- sign-in card ---------- */

.auth-wrap { width: min(430px, 100%); }
.auth-card {
  padding: clamp(30px, 5vw, 42px);
  border-radius: 24px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--line-2);
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
  backdrop-filter: blur(22px) saturate(1.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 30px 80px -30px rgba(0, 0, 0, .8);
  animation: step-in .55s var(--ease) both;
}
.auth-card h1 {
  font-family: var(--disp); font-weight: 500;
  font-size: 30px; letter-spacing: -.03em; color: var(--tx);
  max-width: none; margin-inline: 0;
}
.auth-sub { margin-top: 8px; font-size: 14.5px; color: var(--tx-mut); }
.auth-card .fields { margin-top: 26px; }
.auth-card .btn { width: 100%; margin-top: 24px; }
.auth-note {
  margin-top: 14px; text-align: center; font-size: 13px; color: var(--tx-faint);
  opacity: 0; filter: blur(6px);
  transition: opacity .25s var(--ease), filter .3s var(--ease);
}
.auth-note.show { opacity: 1; filter: blur(0); }
.auth-alt { margin-top: 26px; text-align: center; font-size: 14px; color: var(--tx-mut); }
.auth-alt a { color: var(--tx); text-underline-offset: 3px; }

/* ---------- page hand-offs ---------- */

html.js .app-top { animation: step-in .5s var(--ease) both; }
html.page-leave .app-top, html.page-leave .app-main {
  opacity: 0;
  transition: opacity .28s var(--ease);
}

/* ---------- reduced motion: everything lands instantly ---------- */

@media (prefers-reduced-motion: reduce) {
  .step.on .step-eyebrow, .step.on h1, .step.on .step-sub,
  .step.on .opt, .step.on .field, .step.on .step-nav,
  .step.on .app-mock, .step.on .am-row, .step.on .acct-div,
  .step.on .done-mark, .step.on .done-copy { animation: none !important; }
  .auth-card, html.js .app-top { animation: none; }
  .opt-extra { transition: none; }
  .am-page { transition: none; }
  .pw-track i, .pw-chip, .pw-label { transition: none; }
}

@media (max-width: 520px) {
  .step h1 { font-size: 30px; }
}