.df-page {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  gap: 36px;
  padding: 32px 44px;
  color: #f0f3e9;
  background: #121c19;
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
}
.df-page *, .df-page *::before, .df-page *::after { box-sizing: border-box; }
.df-page h1, .df-page h2, .df-page p, .df-page figure, .df-page blockquote { margin: 0; }
.df-page svg { display: block; width: 24px; height: 24px; flex-shrink: 0; }
.df-kicker { display: flex; gap: 20px; color: #d0f5a5; font: 12px/1.4 Menlo, Consolas, monospace; }
.df-kicker span { color: #a2b0a8; font-family: Inter, "Helvetica Neue", Arial, sans-serif; }
.df-heading h1 { margin-top: 20px; font-size: clamp(36px, 4.5cqw, 64px); font-weight: 550; line-height: 1.05; letter-spacing: -.055em; text-transform: uppercase; }
.df-heading h1 > span { color: #d0f5a5; }
.df-agent .df-heading h1 > span { color: #c2b8ff; }

.df-results { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; margin-block: auto; padding-block: 36px; }
.df-result { min-width: 0; }
.df-result h2 { max-width: 22ch; font-size: clamp(26px, 2.4cqw, 34px); font-weight: 500; line-height: 1.2; letter-spacing: -.035em; }
.df-result .df-copy { margin-top: 18px; max-width: 47ch; color: #c6d1c9; font-size: 19px; line-height: 1.5; }
.df-base { border-left: 1px solid #35453d; padding-left: 44px; }
.df-selection { margin-top: 40px !important; }
.df-selection-flow { display: flex; align-items: center; gap: 24px; }
.df-variants { display: flex; gap: 10px; }
.df-variants span { display: grid; place-items: center; width: 80px; height: 86px; border: 1px solid #61745c; border-radius: 12px; color: #d0f5a5; font-size: 44px; line-height: 1; }
.df-variants span + span { border-color: #696481; color: #c2b8ff; }
.df-flow-arrow { color: #a2b0a8; }
.df-flow-arrow svg { width: 38px; height: 28px; }
.df-winner { display: flex; align-items: center; gap: 9px; color: #d0f5a5; font-size: 23px; font-weight: 500; }
.df-winner svg { width: 26px; height: 26px; }
.df-selection figcaption { margin-top: 16px; color: #a2b0a8; font-size: 13px; }
.df-metrics { display: grid; gap: 0; list-style: none; margin: 30px 0 0; padding: 0; }
.df-metrics li { display: flex; align-items: center; gap: 16px; padding: 19px 0; border-bottom: 1px solid #35453d; font-size: 20px; line-height: 1.3; }
.df-metrics svg { color: #c2b8ff; width: 28px; height: 28px; }

.df-apps { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px 24px; margin-top: 24px !important; font-size: 16px; line-height: 1.4; }
.df-apps strong { color: #f0f3e9; font-weight: 500; }
.df-apps > span { color: #a2b0a8; }
.df-setup { display: grid; grid-template-columns: minmax(0, 1.05fr) 42px minmax(0, 1fr); align-items: center; gap: 34px; margin-block: auto; }
.df-request, .df-agent-work { min-width: 0; }
.df-request h2, .df-agent-work h2 { color: #a2b0a8; font-size: 16px; font-weight: 400; line-height: 1.5; }
.df-request blockquote { margin-top: 16px; padding: 26px 28px; border-radius: 16px 16px 16px 3px; background: #232c27; color: #f0f3e9; font-size: 23px; line-height: 1.5; letter-spacing: -.02em; }
.df-setup-arrow { color: #c2b8ff; }
.df-setup-arrow svg { width: 42px; height: 28px; }
.df-agent-steps { display: grid; gap: 0; list-style: none; margin: 10px 0 0; padding: 0; }
.df-agent-steps li { display: flex; align-items: baseline; gap: 16px; padding: 15px 0; border-bottom: 1px solid #35453d; font-size: 22px; line-height: 1.3; letter-spacing: -.025em; }
.df-agent-steps li > span { color: #c2b8ff; font: 12px/1.4 Menlo, Consolas, monospace; flex-shrink: 0; }
.df-scenarios { margin-top: 17px !important; color: #a2b0a8; font-size: 13px; line-height: 1.5; }
.df-finish { padding-top: 20px; border-top: 1px solid #35453d; font-size: 25px; line-height: 1.3; letter-spacing: -.025em; }
.df-finish strong { color: #d0f5a5; font-weight: 500; }

@container reader (max-width: 1100px) {
  .df-page { gap: 26px; padding: 26px 28px; }
  .df-results { gap: 30px; padding-block: 24px; }
  .df-base { padding-left: 28px; }
  .df-result .df-copy { font-size: 17px; }
  .df-selection-flow { gap: 16px; }
  .df-variants span { width: 58px; height: 68px; font-size: 34px; }
  .df-winner { gap: 6px; font-size: 19px; }
  .df-metrics li { font-size: 18px; }
  .df-setup { grid-template-columns: minmax(0, 1fr) 32px minmax(0, 1fr); gap: 24px; }
  .df-setup-arrow svg { width: 32px; }
  .df-request blockquote { padding: 22px; font-size: 20px; }
  .df-agent-steps li { font-size: 19px; }
  .df-finish { font-size: 23px; }
}

@container reader (max-width: 740px) {
  .df-page { gap: 30px; padding: 24px 20px; }
  .df-heading h1 { font-size: clamp(30px, 6.8cqw, 46px); }
  .df-results { grid-template-columns: minmax(0, 1fr); gap: 34px; padding: 0; }
  .df-result h2 { max-width: none; font-size: 27px; }
  .df-base { border-left: 0; border-top: 1px solid #35453d; padding: 30px 0 0; }
  .df-selection { margin-top: 24px !important; }
  .df-selection-flow { flex-wrap: wrap; gap: 14px; }
  .df-variants span { width: 52px; height: 62px; font-size: 32px; }
  .df-flow-arrow svg { width: 28px; }
  .df-winner { font-size: 17px; }
  .df-winner svg { width: 22px; }
  .df-metrics { margin-top: 18px; }
  .df-apps { display: grid; gap: 9px; margin-top: 20px !important; }
  .df-setup { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .df-setup-arrow { justify-self: center; }
  .df-setup-arrow svg { transform: rotate(90deg); }
  .df-request blockquote { padding: 22px; font-size: 20px; }
  .df-finish { font-size: 23px; }
}