.skip-link { position: fixed; left: 12px; top: -80px; z-index: 100; padding: 10px 14px; background: var(--paper-hi); color: var(--ink); }
.skip-link:focus { top: 12px; }

.hero { background: var(--paper-hi); padding: 176px 0 var(--s-sec); }
.hero__copy { grid-column: 1 / span 7; }
.hero__h { max-width: 14ch; text-wrap: balance; }
.hero__aside { grid-column: 8 / span 5; align-self: end; }
.hero__d { max-width: 40ch; }
.hero__actions { display: flex; align-items: center; gap: 24px; margin-top: 28px; }
.hero__text-link { font-size: 15px; font-weight: 600; text-underline-offset: 4px; }

.bench { position: relative; isolation: isolate; overflow: hidden; padding-block: 72px 84px; }
.bench::before { content: ""; position: absolute; inset: 0; z-index: -2; background: url("img/bench-wash.jpg") right center / cover no-repeat; opacity: .88; }
.bench::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, var(--dark) 14%, rgba(26,28,33,.84) 46%, rgba(26,28,33,.72) 100%); }
.bench > * { position: relative; z-index: 1; }
.bench__h { grid-column: 1 / span 7; margin: 0; max-width: 28ch; }
.bench__d { grid-column: 8 / span 5; align-self: end; margin: 0; max-width: 46ch; }
.bench__dwg { grid-column: 1 / -1; margin-top: 40px; }

.deal-schematic { border-radius: 26px; padding: 26px 28px 22px; background: rgba(232,227,214,.04); border: 1px solid var(--rule-dark); display: flex; flex-direction: column; gap: 20px; }
.deal-schematic__hd { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; padding-bottom: 18px; border-bottom: 1px solid var(--rule-dark); }
.deal-schematic__id { display: flex; align-items: baseline; gap: 8px; }
.schematic-title { font-size: 18px; }
.schematic-tag { padding: 4px 10px; border: 1px solid rgba(217,164,65,.45); border-radius: 999px; color: var(--accent); font: 500 11px/1.4 var(--mono); }

.flow-chart { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; position: relative; margin-top: 6px; }
.flow-node { display: flex; flex-direction: column; gap: 12px; position: relative; min-width: 0; }
.flow-node__head { display: flex; align-items: center; position: relative; }
.flow-node__icon { width: 44px; height: 44px; border-radius: 14px; background: rgba(26,28,33,.9); border: 1.5px solid var(--rule-dark); display: flex; align-items: center; justify-content: center; color: var(--on-dark); flex-shrink: 0; z-index: 2; box-shadow: 0 4px 12px rgba(0,0,0,.25); }
.flow-node__icon--acc { border-color: var(--accent); color: var(--accent); background: rgba(217,164,65,.12); }
.flow-node__track-line { flex: 1; height: 2px; background: var(--rule-dark); position: relative; margin-left: 8px; }
.flow-node:last-child .flow-node__track-line { display: none; }
.flow-node__track-line::after { content: ""; position: absolute; right: 0; top: -3px; width: 0; height: 0; border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-left: 6px solid var(--rule-dark); }
.flow-node__card { border-radius: 16px; padding: 14px 14px 12px; background: rgba(232,227,214,.03); border: 1px solid var(--rule-dark); display: flex; flex-direction: column; gap: 4px; min-height: 148px; }
.flow-node__card--acc { border-color: rgba(217,164,65,.35); background: rgba(217,164,65,.05); }
.flow-node__num { font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--on-dark-mu); display: flex; justify-content: space-between; }
.flow-node__title { font-size: 15px; font-weight: 600; letter-spacing: -.02em; color: var(--on-dark); margin-top: 2px; line-height: 1.25; }
.flow-node__desc { font-size: 12px; line-height: 1.35; color: var(--on-dark-mu); margin: 0; }
.flow-node__meta { margin-top: auto; padding-top: 8px; border-top: 1px solid var(--rule-dark); display: flex; justify-content: space-between; gap: 6px; color: var(--on-dark-mu); font-size: 11px; font-family: var(--mono); }
.acc-label { color: var(--accent); }

.deal-schematic__outcomes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding-top: 16px; border-top: 1px solid var(--rule-dark); }
.outcome-branch { border-radius: 12px; padding: 10px 14px; background: rgba(232,227,214,.02); border: 1px solid var(--rule-dark); display: flex; align-items: center; gap: 10px; font-size: 12px; line-height: 1.4; }
.outcome-branch--acc { border-color: rgba(217,164,65,.35); background: rgba(217,164,65,.06); }
.outcome-mark { flex: none; color: var(--accent); }

.deal-schematic.flow-ready .flow-node,
.deal-schematic.flow-ready .deal-schematic__outcomes {
  opacity: 0;
  transform: translateY(18px);
}
.deal-schematic.flow-ready.is-in .flow-node,
.deal-schematic.flow-ready.is-in .deal-schematic__outcomes {
  opacity: 1;
  transform: none;
  transition: opacity .5s ease, transform .65s cubic-bezier(.2,.8,.2,1);
}
.deal-schematic.flow-ready.is-in .flow-node:nth-child(1) { transition-delay: .08s; }
.deal-schematic.flow-ready.is-in .flow-node:nth-child(2) { transition-delay: .2s; }
.deal-schematic.flow-ready.is-in .flow-node:nth-child(3) { transition-delay: .32s; }
.deal-schematic.flow-ready.is-in .flow-node:nth-child(4) { transition-delay: .44s; }
.deal-schematic.flow-ready.is-in .flow-node:nth-child(5) { transition-delay: .56s; }
.deal-schematic.flow-ready.is-in .deal-schematic__outcomes { transition-delay: .72s; }

.diff { padding-block: var(--s-sec); background: var(--grey-150); }
.diff__h { grid-column: 1 / span 8; }
.diff__st { grid-column: 9 / span 4; align-self: end; max-width: 42ch; }
.diff__cards { grid-column: 1 / -1; margin-top: var(--s-16); }
.bubs { display: grid; border-top: 1px solid var(--ink); }
.bub { min-height: 0; display: grid; grid-template-columns: 1.2fr 1fr 2.2fr auto; align-items: start; gap: 24px; padding: 22px 0; border-bottom: 1px solid var(--rule); }
.bub__k { display: flex; align-items: center; gap: 9px; }
.bub__k::before { content: ""; width: 5px; height: 5px; flex: none; background: currentColor; opacity: .5; }
.bub__big { font-size: 28px; font-weight: 400; line-height: 1.05; letter-spacing: -.04em; }
.bub p { margin: 0; }
.bub a { color: inherit; font-weight: 600; white-space: nowrap; }

.cta-sec { padding-block: var(--s-sec) calc(var(--s-sec) * 1.05); border-top: 1px solid var(--rule); background: var(--paper-hi); }
.cta-sec__in { max-width: 1360px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; }
.cta-sec__h { grid-column: 1 / span 6; max-width: 22ch; margin: 0; }
.cta-sec__d { grid-column: 7 / span 5; max-width: 52ch; margin: 0; font-size: 18px; line-height: 1.5; }
.cta-sec__act { grid-column: 7 / span 5; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }

@media (max-width: 1024px) {
  .hero__copy { grid-column: 1 / span 7; }
  .hero__aside { grid-column: 8 / -1; }
  .bench__h, .bench__d, .bench__dwg, .diff__h, .diff__st, .diff__cards { grid-column: 1 / -1; }
  .bench__d, .diff__st { margin-top: var(--s-8); }
  .bub { grid-template-columns: 1fr 1fr; }
  .bub p, .bub a { grid-column: 2; }
  .cta-sec__h, .cta-sec__d, .cta-sec__act { grid-column: 1 / -1; }
}

@media (max-width: 800px) {
  .flow-chart { grid-template-columns: 1fr; }
  .flow-node { display: grid; grid-template-columns: 44px 1fr; column-gap: 12px; align-items: start; }
  .flow-node__head { grid-column: 1; }
  .flow-node__track-line { display: none; }
  .flow-node__card { grid-column: 2; min-height: 0; }
}

@media (max-width: 640px) {
  .hero { padding: 112px 0 48px; }
  .hero__copy, .hero__aside { grid-column: 1 / -1; }
  .hero__aside { margin-top: 36px; }
  .hero__actions { align-items: flex-start; flex-direction: column; gap: 18px; }
  .deal-schematic { padding: 18px 16px; border-radius: 18px; }
  .deal-schematic__outcomes { grid-template-columns: 1fr; }
  .bub { grid-template-columns: 1fr; gap: 10px; }
  .bub p, .bub a { grid-column: 1; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
}