/* Managers — direction J, a calmer page under site.css's bar on the ground, words + the Issues register,
   then F's ruled sections. Reuses ../../styles.css tokens; nothing here adds a colour. */

/* ---------- hero: words, then the register on a sunk band ---------- */
.m-hero { padding-top: 48px; }
.m-hero-words { display: grid; gap: 20px; }
.m-hero h1 { font-size: 44px; line-height: 1.02; font-weight: 700; letter-spacing: -.04em; text-wrap: balance; max-width: 13ch; }
.m-side { display: flex; flex-direction: column; }
.m-side .lead { margin-top: 0; }
.m-note { margin-top: 20px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.5; color: var(--ink-3); }
.m-hero-fig { margin-top: 40px; padding-bottom: 56px; background: linear-gradient(180deg, var(--ground) 0 120px, var(--sunk) 120px); }

/* app window (Home's palette idiom) */
.win { background: var(--surface); border-radius: var(--r-3); box-shadow: 0 0 0 1px rgba(24,23,21,.08), var(--sh-3); overflow: hidden; }

/* the Issues register: a 2 x 2 cell block per row on a phone, four tabular columns from 760 */
.reg-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.reg-title { font-size: 16px; font-weight: 700; letter-spacing: -.012em; }
.reg-count { font-size: 14px; color: var(--ink-3); }
/* phone: flex-wrap so the Issue line and the Stage line size independently (Issue + Lot, then Stage + Prepared) */
.reg-row { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: baseline;
  padding: 12px 16px; border-bottom: 1px solid var(--line); font-size: 15px; line-height: 1.4; color: var(--ink-2); }
.reg-row > .c-issue { flex: 1 0 calc(100% - 96px); min-width: 0; }
.reg-row > .c-lot { flex: 0 0 auto; margin-left: auto; text-align: right; }
.reg-row > .c-stage { flex: 1 1 40%; }
.reg-row > .c-prep { flex: 0 1 auto; margin-left: auto; }
.c-issue { grid-area: issue; display: flex; align-items: baseline; gap: 8px; color: var(--ink); font-weight: 600; }
.c-issue .ic { width: 16px; height: 16px; align-self: center; color: var(--ink-3); }
.c-lot { grid-area: lot; }
.c-stage { grid-area: stage; }
.c-prep { grid-area: prep; }
.reg-cols { padding-top: 10px; padding-bottom: 10px; background: #fcfbfa; font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--ink-3); }
.reg-cols .c-issue { color: var(--ink-3); font-weight: 600; }
.is-you .c-issue .ic { color: var(--blue-press); }
.chip-now { display: inline-block; white-space: nowrap; padding: 2px 8px; border-radius: 6px; font-size: 14px; font-weight: 600; line-height: 1.45; color: var(--blue-press); background: var(--blue-tint); box-shadow: inset 0 0 0 1px var(--blue-tint-line); }
.is-quiet, .is-quiet .c-issue { color: var(--ink-3); font-weight: 400; }
.reg-foot { display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 16px; background: #fcfbfa; font-size: 15px; line-height: 1.35; }
.reg-foot > .ic { width: 20px; height: 20px; color: var(--ink-3); }
.rf-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rf-copy .muted { font-size: 14px; }

/* ---------- prepared, not phoned in: head left, body right ---------- */
.split { display: grid; gap: 24px; }
.split-head { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.split-body { display: flex; flex-direction: column; gap: 16px; }
.split-body .lead { margin-top: 0; color: var(--ink); }

/* ---------- benefits: ruled columns, never cards ---------- */
.sec-gains { padding-top: 8px; }
.gains { display: grid; border-top: 1px solid var(--ink); }
.gain { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 28px 0; border-bottom: 1px solid var(--line); }
.gain p { color: var(--ink-2); max-width: 62ch; }

/* ---------- the honest line + the approval step ---------- */
.honest { display: grid; gap: 40px; }
.honest-copy { display: flex; flex-direction: column; gap: 16px; }
.honest-copy .lead { margin-top: 8px; }
.wo-in { padding: 18px 16px 18px; }
.wo-title { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 700; letter-spacing: -.012em; line-height: 1.3; }
.wo-title .ic { width: 18px; height: 18px; color: var(--ink-3); }
.wo-rows { margin-top: 12px; border-top: 1px solid var(--line); }
.wo-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 15px; color: var(--ink-2); }
.wo-k { display: inline-flex; align-items: center; gap: 8px; }
.wo-k .ic { width: 16px; height: 16px; color: var(--ink-3); }
.wo-v { font-weight: 600; color: var(--ink); }
.wo-approved { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin-top: 14px; padding: 10px 12px; border-radius: var(--r-2);
  background: var(--blue-tint); box-shadow: inset 0 0 0 1px var(--blue-tint-line); color: var(--blue-press); font-size: 15px; font-weight: 600; line-height: 1.4; }
.wo-approved > span:not(.avs) { flex: 1 1 200px; min-width: 0; }
.wo-approved > .ic { width: 16px; height: 16px; flex: none; }
.avs { display: inline-flex; }
.avs .av { width: 26px; height: 26px; font-size: 12px; margin-left: -6px; box-shadow: 0 0 0 2px var(--blue-tint); }
.avs .av:first-child { margin-left: 0; }
.wo .i-actions { margin-top: 16px; }

/* ---------- final call + Also ---------- */
.final-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.also { display: flex; flex-direction: column; align-items: flex-start; gap: 0; margin-top: 4px; }

/* ---------- >= 760 ---------- */
@media (min-width: 760px) {
  .m-hero { padding-top: 72px; }
  .m-hero h1 { font-size: 60px; }
  .m-hero-fig { margin-top: 56px; padding-bottom: 72px; }
  .reg-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, .8fr) minmax(0, 1.3fr) minmax(190px, 1.5fr); grid-template-areas: "issue lot stage prep"; gap: 16px; padding: 14px 20px; }
  .reg-row > .c-lot, .reg-row > .c-prep { justify-self: start; text-align: left; margin-left: 0; }
  .reg-head, .reg-foot { padding-left: 20px; padding-right: 16px; }
  .reg-cols { padding-top: 10px; padding-bottom: 10px; }
  .rf-copy { flex-direction: row; align-items: baseline; gap: 12px; }
  .gains { grid-template-columns: repeat(3, 1fr); }
  .gain { padding: 28px 28px 32px; border-bottom: 0; border-left: 1px solid var(--line); }
  .gain:first-child { border-left: 0; padding-left: 0; }
  .gain:last-child { padding-right: 0; }
  .also { flex-direction: row; gap: 32px; }
  .wo-in { padding: 22px 22px 22px; }
}

/* ---------- >= 1080 ---------- */
@media (min-width: 1080px) {
  .m-hero { padding-top: 96px; }
  /* the headline across the measure, then the lead beside its actions: reading order kept left to right */
  .m-hero-words { gap: 40px; }
  .m-hero h1 { font-size: 76px; line-height: .98; max-width: 16ch; }
  .m-side { display: grid; grid-template-columns: 7fr 5fr; column-gap: 64px; align-items: end; }
  .m-side .lead { font-size: 20px; max-width: 58ch; }
  .m-act .actions { margin-top: 0; }
  .m-hero-fig { margin-top: 72px; padding-bottom: 104px; background: linear-gradient(180deg, var(--ground) 0 160px, var(--sunk) 160px); }
  .reg-row { font-size: 16px; padding: 16px 24px; }
  .reg-cols { font-size: 13px; padding-top: 12px; padding-bottom: 12px; }
  .reg-head { padding: 16px 20px 16px 24px; }
  .reg-foot { padding: 12px 16px 12px 24px; }
  .split { grid-template-columns: 5fr 6fr; column-gap: 64px; align-items: start; }
  .sec-gains { padding-top: 16px; }
  .gains { margin-top: 0; }
  .gain { padding: 36px 36px 8px; }
  .honest { grid-template-columns: 5fr 6fr; gap: 64px; align-items: center; }
  .final-actions { justify-content: center; }
  .also { justify-content: center; margin-top: 8px; }
}