/* ==========================================================================
   Screen-specific layout. Anything reused by more than one screen lives in
   components.css instead.
   ========================================================================== */

/* ------------------------------- Calendar -------------------------------- */

.cal-head__row {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}

.cal-head__badge {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-mute);
  border: 1px solid var(--line);
  border-radius: var(--r-chip);
  padding: 2px var(--sp-3);
}

.cal-head__hijri {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--fg-dim);
  margin-block-start: 5px;
}

.cal-filters {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  flex-wrap: wrap;
  margin-block-end: var(--sp-7);
  padding: var(--sp-5) var(--sp-6);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}

.cal-filters__group {
  display: flex;
  align-items: center;
  gap: 7px;
}

.cal-filters__label {
  font-size: 11px;
  font-weight: 600;
  color: var(--fg-mute);
}

.cal-filters__sep {
  width: 1px;
  height: 20px;
  background: var(--line);
}

.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--fg-dim);
}

.cal-wrap {
  display: flex;
  gap: var(--sp-7);
  align-items: flex-start;
}

.cal-board {
  flex: 1;
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.cal-aside {
  width: 270px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}

.cal-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-bottom: 1px solid var(--line);
}

.cal-row:last-child {
  border-bottom: none;
}

.cal-weekday {
  padding: var(--sp-3) var(--sp-3);
  font-size: 11px;
  font-weight: 700;
  color: var(--fg-mute);
  text-align: center;
  border-inline-start: 1px solid var(--line);
}

.cal-day {
  min-height: 104px;
  padding: var(--sp-3) var(--sp-3) var(--sp-2);
  border-inline-start: 1px solid var(--line);
  background: var(--surface);
}

.cal-day--outside {
  background: var(--ground-1);
  opacity: 0.5;
}

.cal-day--blackout {
  background: var(--st-failed-bg);
}

.cal-day--today {
  background: var(--signal-soft);
  box-shadow: inset 0 0 0 1.5px var(--signal);
}

.cal-day__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-block-end: 5px;
}

.cal-day__num {
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--fg-dim);
}

.cal-day--outside .cal-day__num { color: var(--fg-mute); }

.cal-day--today .cal-day__num {
  font-weight: 700;
  color: var(--accent-ink);
}

.cal-day__hijri {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--fg-mute);
}

.cal-day__blackout {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 700;
  color: var(--st-failed);
  background: var(--st-failed-bg);
  border-radius: var(--r-chip);
  padding: 3px 7px;
  margin-block-end: var(--sp-1);
}

.cal-day__cadence {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--fg-mute);
  margin-block-start: 2px;
}

/* Week view */

.cal-week {
  padding: var(--sp-1);
}

.cal-week__row {
  display: grid;
  grid-template-columns: 52px repeat(7, 1fr);
}

.cal-week__row--slot {
  border-top: 1px solid var(--line);
  min-height: 52px;
}

.cal-week__col {
  text-align: center;
  padding: var(--sp-3) var(--sp-1);
  border-inline-start: 1px solid var(--line);
}

.cal-week__wd {
  font-size: 11px;
  font-weight: 600;
  color: var(--fg-mute);
}

.cal-week__num {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 14px;
  color: var(--fg-dim);
}

.cal-week__num--today { color: var(--accent-ink); }

.cal-week__time {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--fg-mute);
  padding: var(--sp-2) var(--sp-3);
  text-align: end;
}

.cal-week__cell {
  border-inline-start: 1px solid var(--line);
  padding: var(--sp-1);
}

.cal-week__cell .chip {
  min-height: 36px;
}

/* Cadence + preferred slots aside */

.cadence-row {
  margin-block-end: var(--sp-5);
}

.cadence-row:last-child { margin-block-end: 0; }

.cadence-row__head {
  display: flex;
  justify-content: space-between;
  font-size: 11.5px;
  margin-block-end: var(--sp-1);
}

.cadence-row__chan {
  color: var(--fg-dim);
  font-weight: 600;
}

.cadence-row__count {
  font-family: var(--font-mono);
  color: var(--fg-dim);
}

.cadence-row--full .cadence-row__count { color: var(--st-failed); }

.slot-list {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}

.slot {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--accent-ink);
  background: var(--signal-soft);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 5px var(--sp-3);
}

.blackout-note {
  margin-block-start: var(--sp-6);
  padding-block-start: var(--sp-5);
  border-top: 1px solid var(--line);
  font-size: 11.5px;
  color: var(--fg-dim);
  line-height: 1.55;
}

/* ------------------------------- Approvals ------------------------------- */

.appr {
  display: flex;
  height: 100%;
}

.appr__list {
  width: 370px;
  flex-shrink: 0;
  border-inline-end: 1px solid var(--line);
  background: var(--ground-1);
  display: flex;
  flex-direction: column;
}

.appr__list-head {
  padding: var(--sp-8) var(--sp-8) var(--sp-5);
}

.appr__list-title {
  font-size: 19px;
  font-weight: 800;
}

.appr__list-sub {
  font-size: 12px;
  color: var(--fg-mute);
  margin-block-start: 3px;
}

.appr__items {
  flex: 1;
  overflow-y: auto;
  padding: 0 var(--sp-4) var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.appr-item {
  width: 100%;
  text-align: start;
  padding: var(--sp-5) var(--sp-5);
  border-radius: 11px;
  border: 1px solid var(--line);
  background: var(--surface);
  font-family: inherit;
  color: var(--fg);
  cursor: pointer;
}

.appr-item[aria-selected='true'] {
  border-color: var(--signal);
  box-shadow: 0 0 0 1px var(--signal), var(--shadow);
}

.appr-item--rejected {
  opacity: 0.72;
}

.appr-item__top,
.appr-item__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}

.appr-item__top { margin-block-end: var(--sp-2); }

.appr-item__title {
  font-weight: 700;
  font-size: 13.5px;
  line-height: 1.4;
  margin-block-end: 7px;
}

.appr-item__meta {
  font-size: 11px;
  color: var(--fg-mute);
}

.appr-item__signals {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}

.appr-item__conf {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--st);
}

.sens-dot {
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: var(--st-failed);
  box-shadow: 0 0 0 3px var(--st-failed-bg);
}

.appr__detail {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  padding: var(--sp-10) 30px;
}

.appr__detail-inner {
  max-width: 720px;
}

.appr__detail-top {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-block-end: var(--sp-6);
  flex-wrap: wrap;
}

.sens-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--st-failed);
  background: var(--st-failed-bg);
  border: 1px solid var(--st-failed);
  border-radius: 7px;
  padding: var(--sp-1) var(--sp-4);
}

.appr__title {
  font-size: 24px;
  font-weight: 800;
  margin-block-end: var(--sp-9);
}

.appr__grid {
  display: grid;
  grid-template-columns: 1fr 210px;
  gap: var(--sp-8);
  align-items: start;
  margin-block-end: var(--sp-9);
}

/* The reasoning paragraph is the most important text on the screen. */
.reasoning {
  border-inline-start: 3px solid var(--signal);
}

.reasoning__label {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin-block-end: 11px;
}

.reasoning__text {
  font-size: var(--fs-read);
  line-height: 1.85;
  color: var(--fg);
}

.appr__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  flex-wrap: wrap;
}

.appr__retained {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 11px var(--sp-8);
  background: var(--st-failed-bg);
  color: var(--st-failed);
  border: 1px solid var(--st-failed);
  border-radius: var(--r-control);
  font-weight: 700;
  font-size: 13.5px;
}

.appr__hint {
  margin-inline-start: auto;
  font-size: 11.5px;
  color: var(--fg-mute);
  line-height: 1.5;
  max-width: 230px;
}

@media (max-width: 860px) {
  .appr {
    flex-direction: column;
    height: auto;
  }

  .appr__list {
    width: 100%;
    border-inline-end: none;
    border-bottom: 1px solid var(--line);
  }

  .appr__grid { grid-template-columns: 1fr; }
  .appr__detail { padding: var(--sp-7); }
}

/* ------------------------------ Post detail ------------------------------ */

.post__crumbs {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-block-end: 5px;
  font-size: 12px;
  color: var(--fg-mute);
}

.post__note {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: 11.5px;
  color: var(--fg-dim);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-chip);
  padding: 7px var(--sp-5);
}

.draft {
  border-radius: 14px;
}

.draft__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-block-end: var(--sp-6);
}

.draft__id {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-weight: 700;
  font-size: 14px;
}

.draft__caption {
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--fg);
  margin-block-end: var(--sp-4);
}

.draft__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-block-end: var(--sp-6);
}

.hashtag {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent-ink);
  background: var(--signal-soft);
  border-radius: var(--r-chip);
  padding: 3px var(--sp-3);
}

.draft__budget {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-block-end: 5px;
}

.draft__budget-count {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--fg-dim);
}

.draft--over-budget .draft__budget-count { color: var(--st-failed); }

/* Visual slot: hatched placeholder until a generated asset is stored. */
.visual {
  position: relative;
  aspect-ratio: 16 / 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  margin-block: var(--sp-6);
  border: 1px solid var(--line);
  border-radius: var(--r-control);
  overflow: hidden;
  background: repeating-linear-gradient(
    135deg,
    var(--surface-2),
    var(--surface-2) 9px,
    transparent 9px,
    transparent 18px
  );
}

.visual__hint {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--fg-mute);
  text-align: center;
  padding-inline: var(--sp-7);
}

.visual__busy {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent-ink);
}

.visual__busy .dot {
  width: 9px;
  height: 9px;
  animation: pulse-signal 0.9s ease-in-out infinite;
}

.visual__regen {
  background: var(--ground-1);
  border: 1px solid var(--line);
  color: var(--accent-ink);
  border-radius: 7px;
  padding: 5px 11px;
  font-size: 11px;
  font-weight: 700;
}

.draft__brief {
  font-size: 12px;
  line-height: 1.7;
  color: var(--fg-dim);
  margin-block-end: var(--sp-5);
}

.draft__history {
  display: flex;
  align-items: center;
  gap: 7px;
  padding-block-start: 11px;
  border-top: 1px solid var(--line);
  font-size: 11px;
  color: var(--fg-mute);
}

.draft__history .dot { background: var(--fg-mute); }

/* ------------------------------- Dashboard ------------------------------- */

.stat__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-block-end: var(--sp-4);
}

.stat__label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 700;
  color: var(--fg-dim);
}

.stat__delta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--st-approved);
}

.stat__count {
  font-family: var(--font-mono);
  font-size: 30px;
  font-weight: 600;
  line-height: 1;
}

.stat__note {
  font-size: 11px;
  color: var(--fg-mute);
  margin: var(--sp-3) 0 var(--sp-4);
}

.stat .meter__fill { background: var(--st); }

.alert {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  width: 100%;
  text-align: start;
  padding: var(--sp-6) var(--sp-7);
  border: none;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--fg);
  font-family: inherit;
  cursor: pointer;
}

.alert:hover { background: var(--surface-2); }
.alert:last-child { border-bottom: none; }

.alert__title {
  display: block;
  font-weight: 700;
  font-size: 13px;
}

.alert__desc {
  display: block;
  font-size: 11.5px;
  color: var(--fg-mute);
  margin-block-start: 2px;
}

.alert__time {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--fg-mute);
}

.kv {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-block-end: var(--sp-2);
}

.kv__key {
  font-size: 11.5px;
  color: var(--fg-mute);
}

.kv__val {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 600;
}

/* -------------------------------- Sources -------------------------------- */

.source__name {
  display: block;
  font-weight: 700;
}

.source__prov {
  display: block;
  font-size: 11px;
  color: var(--fg-mute);
  margin-block-start: 2px;
}

.conf-value {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--st);
}

/* --------------------------------- Inbox --------------------------------- */

.inbox-item__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-5);
  margin-block-end: 11px;
}

.inbox-item__title {
  font-weight: 700;
  font-size: 14px;
  line-height: 1.4;
}

.inbox-item__flags {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
}

.inbox-item__prov {
  display: flex;
  gap: var(--sp-9);
  flex-wrap: wrap;
  font-size: 11.5px;
  color: var(--fg-mute);
}

.dedup-tag {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--fg-mute);
  background: var(--surface-2);
  border-radius: var(--r-pill);
  padding: 2px var(--sp-3);
}

/* ------------------------------- Channels -------------------------------- */

.channel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-block-end: var(--sp-5);
}

.channel__id {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}

.channel__name {
  font-weight: 700;
  font-size: 14px;
}

.channel__acct {
  font-size: 11px;
  color: var(--fg-mute);
}

.channel__token {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  color: var(--fg-dim);
  margin-block-end: var(--sp-2);
}

.channel__rate,
.channel__premium {
  font-size: 11.5px;
  color: var(--fg-mute);
  margin-block-end: var(--sp-5);
}

/* Platform error text stays LTR — it is quoted verbatim from the platform. */
.platform-error {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--st-failed);
  margin-block-start: 5px;
  direction: ltr;
  text-align: start;
}

.record {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}

.record__ch {
  font-weight: 700;
  font-size: 12px;
  min-width: 70px;
}

.record__item {
  flex: 1;
  font-size: 12.5px;
  color: var(--fg-dim);
}

/* ------------------------------- Providers ------------------------------- */

.provider__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-block-end: var(--sp-5);
}

.provider__name {
  font-weight: 800;
  font-size: 15px;
}

.provider__model {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-mute);
}

.provider__row {
  display: flex;
  justify-content: space-between;
  font-size: 11.5px;
  padding-block: 7px;
  border-top: 1px solid var(--line);
}

.provider__row:last-of-type { padding-block-end: var(--sp-5); }

.provider__row-key { color: var(--fg-mute); }
.provider__row-val { color: var(--fg-dim); }

.routing-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--sp-3);
  border-bottom: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--fg-dim);
}

.routing-row:last-child { border-bottom: none; }

.routing-row__prov {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--accent-ink);
}

/* --------------------------------- Brand --------------------------------- */

.token-row {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  gap: var(--sp-5);
  align-items: center;
}

.swatch {
  width: 34px;
  height: 34px;
  border-radius: var(--r-chip);
  border: 1px solid var(--line);
  background: var(--swatch);
}

.swatch--sample {
  display: grid;
  place-items: center;
  color: var(--swatch-on);
  font-weight: 800;
  font-size: 13px;
}

.token-row__name {
  display: block;
  font-weight: 700;
  font-size: 12.5px;
}

.token-row__meta {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--fg-mute);
}

.token-row__reject {
  display: block;
  font-size: 11px;
  color: var(--st-failed);
  margin-block-start: 3px;
}

.font-row,
.policy-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--sp-3);
  border-bottom: 1px solid var(--line);
}

.font-row:last-child,
.policy-row:last-child { border-bottom: none; }

.font-row__role {
  font-size: 11.5px;
  color: var(--fg-mute);
}

.font-row__name {
  font-weight: 800;
  font-size: 15px;
}

.policy-row {
  align-items: flex-start;
  gap: var(--sp-4);
}

.policy-row__v {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 12px;
  min-width: 26px;
}

.policy-row__note {
  display: block;
  font-size: 12px;
  color: var(--fg-dim);
  line-height: 1.5;
}

.policy-row__date {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fg-mute);
}

/* -------------------------------- Members -------------------------------- */

.member {
  display: flex;
  align-items: center;
  gap: 11px;
}

.member__name {
  display: block;
  font-weight: 700;
}

.member__email {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-mute);
}

/* -------------------------------- Billing -------------------------------- */

.billing-totals {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  margin-block-end: var(--sp-6);
}

.billing-total__key {
  font-size: 11.5px;
  color: var(--fg-mute);
}

.billing-total__val {
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: 600;
}

.billing-total__val--muted { color: var(--fg-dim); }

.per-provider {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--sp-3);
  border-bottom: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--fg-dim);
}

.per-provider:last-child { border-bottom: none; }

.per-provider__figures {
  display: flex;
  gap: var(--sp-5);
}

.per-provider__tokens {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-mute);
}

.per-provider__cost {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  min-width: 44px;
  text-align: end;
}

/* ---------------------------- Component gallery -------------------------- */

.gallery__swatches {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  gap: var(--sp-4);
}

.gallery__ground {
  height: 54px;
  border-radius: var(--r-card);
  border: 1px solid var(--line);
  background: var(--ground-sample);
}

.gallery__ground-name {
  font-size: 11px;
  font-weight: 600;
  margin-block-start: var(--sp-2);
}

.gallery__ground-token {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fg-mute);
}

.gallery__row {
  display: flex;
  gap: var(--sp-4);
  flex-wrap: wrap;
}

.gallery__type {
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.gallery__arcs {
  display: flex;
  gap: var(--sp-10);
  align-items: flex-end;
  flex-wrap: wrap;
}

.gallery__arc {
  text-align: center;
}

.gallery__arc-value {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 16px;
  color: var(--st);
}

.gallery__arc-tier {
  font-size: 11px;
  color: var(--fg-mute);
}

.gallery__toast-sample {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-4);
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-inline-start: 3px solid var(--signal);
  border-radius: var(--r-card);
  padding: var(--sp-5) var(--sp-7);
  font-weight: 600;
  font-size: 13px;
}

.gallery__span {
  grid-column: 1 / -1;
}

.gallery__motif {
  display: flex;
  align-items: center;
  gap: var(--sp-9);
  flex-wrap: wrap;
}

.gallery__motif-note {
  flex: 1;
  min-width: 280px;
  font-size: 13px;
  color: var(--fg-dim);
  line-height: 1.7;
}

/* ------------------------------- Marketing ------------------------------- */

.mkt {
  max-width: 1080px;
  margin-inline: auto;
  padding: 110px var(--sp-10) 70px;
}

.mkt__brand {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-block-end: 30px;
  font-weight: 800;
  font-size: 17px;
}

.mkt__eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--accent-ink);
  text-transform: uppercase;
  margin-block-end: var(--sp-7);
}

.mkt__headline {
  font-size: var(--fs-display);
  font-weight: 800;
  line-height: 1.16;
  max-width: 760px;
  margin-block-end: var(--sp-9);
}

.mkt__sub {
  font-size: 17px;
  line-height: 1.75;
  color: var(--fg-dim);
  max-width: 640px;
  margin-block-end: 30px;
}

.mkt__cta {
  display: flex;
  gap: var(--sp-5);
  margin-block-end: 64px;
  flex-wrap: wrap;
}

.mkt__stages {
  margin-block-end: 44px;
}

.mkt__stage-head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-block-end: var(--sp-5);
}

.mkt__stage-num {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-mute);
}

.mkt__stage-title {
  font-weight: 800;
  font-size: 16px;
  margin-block-end: var(--sp-2);
}

.mkt__stage-desc {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--fg-dim);
}

.mkt__cred {
  border-top: 1px solid var(--line);
  padding-block-start: var(--sp-9);
  font-size: 13px;
  color: var(--fg-mute);
  line-height: 1.7;
}

@media (max-width: 860px) {
  .mkt { padding: 96px var(--sp-7) 56px; }
  .mkt__headline { font-size: 34px; }
}

/* --------------------------------- Login --------------------------------- */

.login {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--sp-9);
}

.login__card {
  width: min(780px, 100%);
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-panel);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.login__pane {
  padding: 34px;
}

.login__pane--orgs {
  background: var(--ground-1);
  border-inline-start: 1px solid var(--line);
}

.login__brand {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-block-end: var(--sp-9);
  font-weight: 800;
  font-size: 16px;
}

.login__title {
  font-size: 20px;
  font-weight: 800;
  margin-block-end: 5px;
}

.login__sub {
  font-size: 12px;
  color: var(--fg-mute);
  margin-block-end: var(--sp-9);
}

.login__submit {
  margin-block: var(--sp-8) var(--sp-4);
}

.org-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.org {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  text-align: start;
  padding: 11px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  cursor: pointer;
  font-family: inherit;
  color: var(--fg);
}

.org:hover { border-color: var(--line-strong); }

.org__name {
  display: block;
  font-weight: 700;
  font-size: 13px;
}

.org__role {
  display: block;
  font-size: 11px;
  color: var(--fg-mute);
}

.org__chevron { color: var(--fg-mute); }

@media (max-width: 700px) {
  .login__card { grid-template-columns: 1fr; }
  .login__pane--orgs { border-inline-start: none; border-top: 1px solid var(--line); }
}

/* ------------------------------- Onboarding ------------------------------ */

.onboarding {
  max-width: 860px;
  margin-inline: auto;
  padding: 90px var(--sp-10) 60px;
}

.onboarding__title {
  font-size: var(--sp-10);
  font-weight: 800;
  margin-block-end: 5px;
}

.onboarding__sub {
  font-size: 13px;
  color: var(--fg-mute);
  margin-block-end: var(--sp-10);
}

.steps {
  display: flex;
  align-items: center;
  gap: var(--sp-7);
  margin-block-end: var(--sp-10);
  flex-wrap: wrap;
}

.step {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--fg-mute);
}

.step__num {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--fg-mute);
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 13px;
}

.step--current {
  font-weight: 700;
  color: var(--fg);
}

.step--current .step__num {
  background: var(--accent-ink);
  border-color: var(--accent-ink);
  color: var(--btn-fg);
}

.onboarding__panel {
  border-radius: 14px;
  padding: var(--sp-9);
}

.onboarding__label {
  font-size: 12px;
  font-weight: 700;
  color: var(--fg-dim);
  margin-block-end: var(--sp-3);
}

.dropzone {
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--r-card);
  padding: 32px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-mute);
  margin-block-end: var(--sp-9);
}

.palette {
  display: flex;
  gap: var(--sp-4);
  margin-block-end: var(--sp-9);
  flex-wrap: wrap;
}

.palette__swatch {
  width: 46px;
  height: 46px;
  border-radius: var(--r-card);
  border: 1px solid var(--line);
  background: var(--swatch);
}

.typeface {
  border: 1px solid var(--line);
  border-radius: var(--r-control);
  padding: var(--sp-5);
  background: var(--ground-1);
}

.typeface__role {
  font-size: 10.5px;
  color: var(--fg-mute);
  margin-block-end: var(--sp-1);
}

.typeface__name {
  font-size: 16px;
}

.onboarding__nav {
  display: flex;
  justify-content: space-between;
  margin-block-start: var(--sp-9);
}

@media (max-width: 860px) {
  .onboarding { padding: 90px var(--sp-7) 48px; }
}