/* Comparison, provider alignment, and setup composition. */

/* Align the two modes around the same reading sequence. */
.evolved #modes .modegrid{gap:20px}
.evolved #modes .mode{display:grid;grid-template-rows:auto auto auto 1fr auto;padding:36px;border-color:#deded5;border-radius:20px;box-shadow:0 8px 30px #18181a04}
.evolved #modes .modeheading{margin-bottom:20px;gap:16px}
.evolved #modes .modeheading h3{font-size:32px;letter-spacing:-.04em}
.evolved #modes .modeheading small{font-size:12px;padding:5px 10px;background:transparent;border:1px solid #d7d9cd}
.evolved #modes .mode>p{margin:0;max-width:none;font-size:16px;line-height:1.65}
.evolved #modes .direct-example{align-self:start;margin:20px 0;padding:0;border:0;background:transparent;border-radius:0;gap:10px 12px}
.evolved #modes .direct-example label,.evolved #modes .direct-example>small{margin:0;font-size:12px;line-height:1.5}
.evolved #modes .direct-example>div{min-height:61px;padding:14px;border-radius:11px;border-color:#c6c8bd;background:#fff;box-shadow:0 3px 8px #18181a04}
.evolved #modes .direct-example input{font:400 14px/1.5 Manrope,Arial,sans-serif;opacity:1;color:#62625e}
.evolved #modes .direct-example>div>span{font-size:13px}
.evolved #modes .vault-example{display:grid;justify-items:start;gap:10px;margin:20px 0;align-self:start;padding:0}
.evolved #modes .example-label{font-size:12px;line-height:1.5;color:#62625e}
.evolved #modes .mode-description{padding-top:0;padding-bottom:24px}
.evolved #modes .mode-description p{font-size:16px;line-height:1.8;max-width:none;margin:0}
.evolved #modes .mode-description p+p{margin-top:16px}
.evolved #modes .mode>.textcta{margin:0;padding:18px 0 2px;font-size:15px;font-weight:700;line-height:1.5;align-self:end;align-items:center;gap:16px;min-height:44px;cursor:pointer}
.evolved #modes .mode>.textcta>span:first-child{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.evolved #modes .mode>.textcta:hover>span:first-child{text-decoration-thickness:2px}
.evolved #modes .mode>.textcta:focus-visible{outline:2px solid #526900;outline-offset:5px;border-radius:2px}
.evolved #modes .billing{font-size:13px;line-height:1.8;margin-top:24px;max-width:900px}

/* One regular grid across every provider group, without individual boxes. */
.providers-section .provider-group{grid-template-columns:180px minmax(0,1fr);gap:44px;padding:30px 0}
.providers-section .provider-list{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px 18px;align-items:center}
.providers-section .provider{display:flex;gap:11px;min-width:0;min-height:40px;font-size:14px;line-height:1.4}
.providers-section .provider img{width:28px;height:28px;flex:0 0 28px;object-fit:contain}
.providers-section .provider-group h3{font-size:14px;line-height:1.6;max-width:170px;padding-top:8px}

/* Two open setup columns share a single divider. */
.evolved .buildgrid{gap:0;margin-top:44px;border-top:1px solid #414144;align-items:start}
.evolved .buildgrid .codepath,.evolved .buildgrid .aipath{border:0;border-radius:0;background:transparent;padding:38px 0 0;min-width:0;box-shadow:none}
.evolved .buildgrid .codepath{padding-right:48px}
.evolved .buildgrid .aipath{padding-left:48px;border-left:1px solid #414144}
.evolved .buildgrid .visual-icon{width:32px;height:32px;border:0;border-radius:0;background:transparent;color:#bdbdb6;margin-bottom:20px}
.evolved .buildgrid .visual-icon svg{width:28px;height:28px}
.evolved .buildgrid h3{font-size:27px;line-height:1.3;letter-spacing:-.035em;margin-bottom:24px}
.evolved .buildgrid .install-inline{max-width:none;min-height:65px;background:#222224;border-color:#515154;border-radius:11px}
.evolved .buildgrid .install-inline code{font-size:14px}
.evolved .buildgrid .shared-sdk-title{margin-top:32px;font-size:19px}
.evolved .buildgrid .codepath>.textcta{width:max-content;max-width:100%;border:0;padding-top:0;margin-top:26px;font-size:15px;text-decoration:underline;text-underline-offset:5px}
.evolved .buildgrid .prompt-preview{border:0;border-left:2px solid #52564a;border-radius:0;background:transparent;padding:2px 0 2px 20px;margin:26px 0;font-size:13px;line-height:1.9;color:#d3d3cb}
.evolved .buildgrid .setup-note{margin-top:22px;line-height:1.8;max-width:480px}
.evolved .buildgrid details{margin-top:20px;font-size:14px}
.evolved .buildgrid details pre{padding:20px 0 0}
.evolved .build-section .sdk-links{margin-top:44px;border-color:#414144;padding-top:25px}

@media(max-width:1100px){
  .providers-section .provider-group{grid-template-columns:155px minmax(0,1fr);gap:28px}
  .providers-section .provider-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 16px}
  .evolved #modes .mode{padding:28px;grid-template-rows:auto auto auto 1fr auto}
  .evolved .buildgrid .codepath{padding-right:30px}
  .evolved .buildgrid .aipath{padding-left:30px}
}
@media(max-width:740px){
  .evolved #modes .modegrid{gap:18px}
  .evolved #modes .mode{padding:26px;grid-template-rows:auto auto auto auto auto}
  .evolved #modes .modeheading{gap:12px;margin-bottom:18px}
  .evolved #modes .modeheading h3{font-size:29px}
  .evolved #modes .modeheading small{padding:4px 8px;font-size:11px}
  .evolved #modes .direct-example,.evolved #modes .vault-example{margin:20px 0;padding-top:0}
  .evolved #modes .mode-description{padding-top:0;padding-bottom:26px}
  .providers-section .provider-group{display:block;padding:28px 0}
  .providers-section .provider-group h3{max-width:none;padding:0;margin-bottom:22px}
  .providers-section .provider-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 18px}
  .providers-section .provider{font-size:14px;gap:10px;min-height:40px}
  .providers-section .provider img{width:25px;height:25px;flex-basis:25px}
  .evolved .buildgrid{margin-top:32px;gap:34px}
  .evolved .buildgrid .codepath,.evolved .buildgrid .aipath{padding:30px 0 0;border-left:0}
  .evolved .buildgrid .aipath{border-top:1px solid #414144}
  .evolved .buildgrid h3{font-size:25px}
  .evolved .buildgrid .install-inline code{font-size:13px}
}
@media(max-width:380px){
  .evolved #modes .mode{padding:22px}
  .evolved #modes .modeheading{flex-wrap:wrap}
  .evolved #modes .direct-example{column-gap:6px}
  .evolved #modes .direct-example>small{font-size:11px}
  .evolved #modes .direct-example input{font-size:12px}
  .providers-section .provider-list{gap:20px 12px}
  .providers-section .provider{font-size:13px;gap:8px}
}