/* The partner routes. Chrome (header, pill, plate, card, footer) comes from
 * the site's own stylesheets; this file adds only the blocks these five pages
 * introduce: the title band, the tier table and its switch, the journey band,
 * the three levels, the form, the cabinet door, the doors onward. Every colour
 * and length resolves through design/ or site/partners.tokens.css — a literal
 * here would weld the palette to a component, which this repo forbids.
 *
 * Ported from mocks/pages/d/pages-d.css, his v1 pick. The tier cards and the
 * calculator were v2 only and left with it. */

/* A state node that is hidden stays hidden whatever display its class sets. */
[hidden] { display: none !important; }

/* --- the flat page shell -------------------------------------------------- */
/* The main page opens on a photograph and its sheet rides over it. A standalone
   route has no hero: the fixed header sits on white from the first pixel, so the
   sheet is flat and clears the header itself. Lifted from the picked mock's
   main2.css, the only two rules of it the site did not already carry — added
   here beside the routes that need it, never carved into site/base.css. */
.stage-flat {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding-top: calc(var(--resurs-header-height) + var(--resurs-gap-section));
  padding-bottom: 0;
  border-radius: 0;
  box-shadow: none;
}
.stage-flat > .site-footer { margin-top: auto; }

/* --- the title band ------------------------------------------------------ */
.page-title {
  font-size: var(--resurs-size-page-title);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.022em;
  text-wrap: balance;
}
.page-lead {
  margin-top: 18px;
  max-width: 56ch;
  font-size: var(--resurs-size-lead);
  line-height: 1.5;
  color: var(--resurs-ink-muted);
}
.title-band { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: end; }
.title-actions { display: grid; gap: 10px; justify-items: start; }
.lead-note { font-size: var(--resurs-size-small); color: var(--resurs-ink-muted); max-width: 40ch; line-height: 1.4; }
.block { margin-top: var(--resurs-gap-block); }
.block-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; }
.block-heading {
  margin-top: 6px;
  font-size: var(--resurs-size-title);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.02em;
}
.block-head .section-subtitle { padding-top: 0; max-width: 46ch; }
.site-nav a[aria-current='page'] { opacity: 1; font-weight: 500; }

/* --- the segmented pill --------------------------------------------------- */
.segments {
  display: inline-flex;
  padding: 4px;
  border-radius: var(--resurs-radius-pill);
  background: var(--resurs-segment-ground);
  max-width: 100%;
  overflow-x: auto;
}
.segment {
  flex: none;
  padding: 9px 22px;
  border: 1px solid transparent;
  border-radius: var(--resurs-radius-pill);
  background: transparent;
  font: inherit;
  font-size: var(--resurs-size-small);
  font-weight: 500;
  color: var(--resurs-segment-ink);
  cursor: pointer;
  transition: background var(--resurs-quick) var(--resurs-ease), color var(--resurs-quick) var(--resurs-ease);
}
.segment:hover { color: var(--resurs-segment-ink-selected); }
.segment[aria-selected='true'] {
  background: var(--resurs-segment-selected);
  border-color: var(--resurs-segment-selected-edge);
  color: var(--resurs-segment-ink-selected);
}
.tier-summary {
  margin-top: 16px;
  font-size: var(--resurs-size-body);
  line-height: 1.45;
  color: var(--resurs-ink-muted);
  max-width: 70ch;
}
.tier-summary strong { color: var(--resurs-ink); font-weight: 500; }

/* --- the tier table ------------------------------------------------------- */
/* The VTB packages table: a pale rounded band per capability row, one icon
   object per row, three tier columns, the selected tier on the tint. On a
   narrow screen the table scrolls inside its own box, never the page. */
.table-scroll { margin-top: 24px; overflow-x: auto; overscroll-behavior-x: contain; }
.tier-table {
  min-width: var(--resurs-table-min);
  display: grid;
  gap: var(--resurs-gap-band);
}
.tier-head, .tier-row, .tier-foot {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  align-items: center;
  column-gap: 12px;
}
.tier-corner { font-size: var(--resurs-size-small); color: var(--resurs-ink-muted); padding-inline: 22px; }
.tier-col-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: 0;
  border-radius: var(--resurs-band-radius);
  background: transparent;
  font: inherit;
  color: var(--resurs-ink);
  text-align: left;
  cursor: pointer;
  transition: background var(--resurs-quick) var(--resurs-ease);
}
.tier-col-head .plate { width: 40px; height: 40px; }
.tier-col-name { font-size: var(--resurs-size-body); font-weight: 500; }
.tier-col-head:hover { background: var(--resurs-band); }
.tier-col-head.is-selected { background: var(--resurs-band-selected); }
.tier-row {
  padding: var(--resurs-band-pad);
  border-radius: var(--resurs-band-radius);
  background: var(--resurs-band);
  box-shadow: inset 0 0 0 1px transparent;
  transition: box-shadow var(--resurs-quick) var(--resurs-ease);
}
.tier-row:hover { box-shadow: inset 0 0 0 1px var(--resurs-band-hover-edge); }
.tier-row:hover .tier-row-label .plate { transform: translateY(-1px); --resurs-plate-cast: var(--resurs-plate-cast-lifted); }
.tier-row-label { display: flex; align-items: center; gap: 14px; min-width: 0; }
.tier-row-label .plate { width: 48px; height: 48px; }
.tier-row-label > div { display: grid; gap: 2px; min-width: 0; }
.tier-row-name { font-size: var(--resurs-size-body); font-weight: 500; line-height: 1.3; }
.tier-row-hint { font-size: var(--resurs-size-small); color: var(--resurs-ink-soft); line-height: 1.35; }
.tier-cell {
  align-self: stretch;
  display: flex;
  align-items: center;
  padding: 8px 16px;
  border-radius: var(--resurs-radius-tile);
  font-size: var(--resurs-size-cell);
  transition: background var(--resurs-quick) var(--resurs-ease);
}
.tier-cell.is-selected { background: var(--resurs-band-selected); }
.tier-foot .tier-cell { padding-block: 4px; }
.tier-foot .card-link { margin-top: 0; padding-top: 8px; }

/* --- the journey: four stages -------------------------------------------- */
.journey {
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--resurs-card-gap);
  counter-reset: stage;
}
.stage {
  display: flex;
  align-items: stretch;
  gap: 0;
  border-radius: var(--resurs-band-radius);
  background: var(--resurs-band);
  overflow: hidden;
  transition: box-shadow var(--resurs-quick) var(--resurs-ease);
}
.stage:hover { box-shadow: inset 0 0 0 1px var(--resurs-band-hover-edge); }
.stage-num {
  flex: none;
  display: grid;
  place-items: center;
  width: 72px;
  font-size: var(--resurs-size-step-num);
  font-weight: 300;
  letter-spacing: -0.03em;
  color: var(--resurs-accent);
  border-right: 1px solid var(--resurs-ground);
}
.stage-body { padding: 18px 18px 18px 16px; display: grid; gap: 8px; align-content: start; }
.stage-head { display: flex; align-items: center; gap: 10px; }
.stage-head .plate { width: 36px; height: 36px; }
.stage-name { font-size: var(--resurs-size-body); font-weight: 500; line-height: 1.3; }
.stage-hint { font-size: var(--resurs-size-small); color: var(--resurs-ink-soft); line-height: 1.4; }

/* --- the three levels ----------------------------------------------------- */
.levels { margin-top: 28px; display: grid; gap: var(--resurs-gap-band); }
.level {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 22px;
  padding: 22px 26px 22px 22px;
  border-radius: var(--resurs-band-radius);
  background: var(--resurs-band);
  transition: box-shadow var(--resurs-quick) var(--resurs-ease);
}
.level:hover { box-shadow: inset 0 0 0 1px var(--resurs-band-hover-edge); }
.level:hover > .plate { transform: translateY(-1px); --resurs-plate-cast: var(--resurs-plate-cast-lifted); }
.level > .plate { width: 64px; height: 64px; }
.level-body { display: grid; gap: 4px; }
.level-name { font-size: var(--resurs-size-title); font-weight: 500; letter-spacing: -0.02em; line-height: 1.12; }
.level-who { font-size: var(--resurs-size-body); }
.level-opens { font-size: var(--resurs-size-small); color: var(--resurs-ink-soft); }
.level-share { display: grid; gap: 6px; justify-items: end; text-align: right; }
.level-share-label { font-size: var(--resurs-size-small); color: var(--resurs-ink-muted); }
.levels-foot { margin-top: 18px; display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }

/* --- the form ------------------------------------------------------------- */
.lead-panel {
  margin-top: 28px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px;
  padding: 36px 40px;
  border-radius: var(--resurs-radius-panel);
  background: var(--resurs-tint);
}
.lead-aside { display: grid; gap: 18px; align-content: start; }
.lead-aside .plate { width: 64px; height: 64px; }
.lead-form { display: grid; gap: 16px; }
.field { display: grid; gap: 6px; }
.field label { font-size: var(--resurs-size-small); color: var(--resurs-ink-muted); }
.field input, .field select, .field textarea {
  width: 100%;
  min-height: var(--resurs-field-height);
  padding: 12px 16px;
  border: 1px solid var(--resurs-field-edge);
  border-radius: var(--resurs-field-radius);
  background: var(--resurs-field-ground);
  font: inherit;
  color: var(--resurs-ink);
  transition: background var(--resurs-quick) var(--resurs-ease), border-color var(--resurs-quick) var(--resurs-ease);
}
.field textarea { min-height: 96px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--resurs-field-ink-hint); }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--resurs-hairline); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: none;
  background: var(--resurs-field-ground-focus);
  border-color: var(--resurs-field-edge-focus);
  box-shadow: 0 0 0 3px var(--resurs-accent-soft);
}
.field[data-invalid='true'] input, .field[data-invalid='true'] select, .field[data-invalid='true'] textarea {
  border-color: var(--resurs-error);
  background: var(--resurs-error-soft);
}
.field-error { font-size: var(--resurs-size-small); color: var(--resurs-error); }
.field-consent { display: flex; align-items: flex-start; gap: 12px; }
.field-consent input { width: 20px; height: 20px; min-height: 0; margin: 2px 0 0; padding: 0; accent-color: var(--resurs-accent); flex: none; }
.field-consent label { color: var(--resurs-ink); font-size: var(--resurs-size-small); line-height: 1.4; }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.form-summary, .form-failed, .form-saved {
  padding: 14px 18px;
  border-radius: var(--resurs-radius-tile);
  font-size: var(--resurs-size-small);
  line-height: 1.45;
}
.form-summary, .form-failed { background: var(--resurs-error-soft); color: var(--resurs-error); }
.form-saved { background: var(--resurs-ok-soft); color: var(--resurs-ok); display: grid; gap: 6px; }
.form-saved strong { font-weight: 500; }
.form-saved .quiet-link { color: var(--resurs-ok); background: none; border: 0; padding: 0; font: inherit; font-size: var(--resurs-size-small); cursor: pointer; }
.form-submit {
  width: 100%;
  justify-content: space-between;
  border: 0;
  font: inherit;
  cursor: pointer;
}
.form-submit:disabled { opacity: 0.6; cursor: progress; }
.lead-form[data-state='saved'] .form-fields, .lead-form[data-state='saved'] .form-submit { display: none; }
.form-foot { display: flex; align-items: center; gap: 10px; font-size: var(--resurs-size-small); color: var(--resurs-ink-muted); }
.form-foot .icon { color: var(--resurs-ink-muted); flex: none; }

/* --- the cabinet door ----------------------------------------------------- */
.cabinet-door {
  margin-top: 28px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 28px;
  padding: 36px 40px;
  border-radius: var(--resurs-radius-panel);
  background: var(--resurs-tint);
}
.cabinet-door > .plate { width: 80px; height: 80px; }
.cabinet-copy { display: grid; gap: 8px; }
.cabinet-name { font-size: var(--resurs-size-title); font-weight: 500; letter-spacing: -0.02em; line-height: 1.12; }
.cabinet-behind { font-size: var(--resurs-size-nav); line-height: 1.45; }
.cabinet-note { font-size: var(--resurs-size-small); color: var(--resurs-ink-muted); max-width: 44ch; }
.cabinet-actions { display: grid; gap: 10px; justify-items: end; }
.pill[aria-disabled='true'] { opacity: 0.55; cursor: not-allowed; }
.pill[aria-disabled='true']:hover { background: var(--resurs-accent); }
.pill-accent.pill-quiet { background: var(--resurs-ground); color: var(--resurs-ink); border: 1px solid var(--resurs-hairline); }
.pill-accent.pill-quiet .dot { background: var(--resurs-accent); color: var(--resurs-on-accent); }
.pill-accent.pill-quiet:hover { background: var(--resurs-surface); }
.roles { margin-top: 18px; display: flex; gap: 10px; flex-wrap: wrap; }
/* Each chip is the door to a declared /cabinet/<role>/ route, so the chip is
   the link itself and not a label with one inside it. */
.roles a {
  display: inline-block;
  padding: 8px 14px;
  border-radius: var(--resurs-radius-pill);
  background: var(--resurs-band);
  font-size: var(--resurs-size-small);
  color: var(--resurs-ink-muted);
  text-decoration: none;
  transition: background var(--resurs-quick) var(--resurs-ease), color var(--resurs-quick) var(--resurs-ease);
}
.roles a:hover { background: var(--resurs-band-selected); color: var(--resurs-ink); }
.roles-label { font-size: var(--resurs-size-small); color: var(--resurs-ink-muted); }

/* --- the doors onward ----------------------------------------------------- */
.door-cards { margin-top: 24px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--resurs-card-gap); }
.door-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 16px 16px 14px;
  border-radius: var(--resurs-band-radius);
  background: var(--resurs-band);
  transition: box-shadow var(--resurs-quick) var(--resurs-ease);
}
.door-card:hover { box-shadow: inset 0 0 0 1px var(--resurs-band-hover-edge); }
.door-card:hover .plate { transform: translateY(-1px); --resurs-plate-cast: var(--resurs-plate-cast-lifted); }
.door-card .plate { width: 48px; height: 48px; }
.door-card-name { flex: 1; min-width: 0; font-size: var(--resurs-size-body); font-weight: 500; }
.door-card .icon-chevron { color: var(--resurs-ink-muted); flex: none; }

/* The opens rows on the partners page: the VTB icon row, four across. */
.opens-grid { margin-top: 24px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--resurs-gap-band); }
.opens-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: var(--resurs-band-pad);
  border-radius: var(--resurs-band-radius);
  background: var(--resurs-band);
  transition: box-shadow var(--resurs-quick) var(--resurs-ease);
}
.opens-row:hover { box-shadow: inset 0 0 0 1px var(--resurs-band-hover-edge); }
.opens-row:hover .plate { transform: translateY(-1px); --resurs-plate-cast: var(--resurs-plate-cast-lifted); }
.opens-row .plate { width: 56px; height: 56px; }
.opens-row > div { display: grid; gap: 3px; }
.opens-name { font-size: var(--resurs-size-body); font-weight: 500; }
.opens-hint { font-size: var(--resurs-size-small); color: var(--resurs-ink-soft); line-height: 1.4; }

/* --- reduced motion: everything instant and complete ---------------------- */
@media (prefers-reduced-motion: reduce) {
  .segment, .tier-col-head, .tier-row, .tier-cell, .stage, .level, .door-card, .opens-row, .roles a,
  .field input, .field select, .field textarea { transition: none; }
  .tier-row:hover .tier-row-label .plate, .level:hover > .plate, .door-card:hover .plate, .opens-row:hover .plate { transform: none; }
}

/* --- widths --------------------------------------------------------------- */
@media (max-width: 1080px) {
  .title-band { grid-template-columns: 1fr; gap: 24px; }
  .block-head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .journey { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .door-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lead-panel { grid-template-columns: 1fr; gap: 28px; padding: 28px; }
  .cabinet-door { grid-template-columns: auto minmax(0, 1fr); padding: 28px; }
  .cabinet-actions { grid-column: 1 / -1; justify-items: start; }
}
@media (max-width: 560px) {
  .journey, .door-cards, .opens-grid, .field-row { grid-template-columns: 1fr; }
  .stage-num { width: 56px; }
  .level { grid-template-columns: auto minmax(0, 1fr); padding: 18px; gap: 14px; }
  .level > .plate { width: 52px; height: 52px; }
  .level-share { grid-column: 1 / -1; justify-items: start; text-align: left; }
  .form-submit { width: 100%; justify-content: space-between; }
  .lead-panel { padding: 20px; }
  .cabinet-door { grid-template-columns: 1fr; padding: 20px; gap: 18px; }
  .cabinet-door > .plate { width: 64px; height: 64px; }
  .tier-corner { padding-inline: 16px; }
  .segment { min-height: 44px; }
  .roles a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* The last block clears the footer by the same gap the footer keeps above. */
.stage-flat > .page { padding-bottom: var(--resurs-gap-block); }