/* Mode chapters extend the existing BARD landing page without changing downloads. */
.mode-band {padding-block: 22px; background: #091725}
.modes {grid-template-columns: repeat(3,minmax(0,1fr))}
.mode,.mode:first-child {padding: 28px 30px; min-width: 0}
.mode+.mode {border: 0}
.mode:not(:nth-child(3n+1)) {border-left: 1px solid var(--line)}
.mode:nth-child(n+4) {border-top: 1px solid var(--line)}
.mode:hover {background: #e5c57906}
.mode h2 {font-size: clamp(19px,1.6vw,25px)}
.mode svg {flex: 0 0 32px; width: 32px}
.mode p {line-height: 1.7}
.mode-chapter {scroll-margin-top: 24px}
.mode-chapter h2 {font-size: clamp(38px,3.6vw,60px); margin-top: 22px; letter-spacing: -.045em}
.mode-lead {margin-top: 18px; color: var(--gold); font-size: clamp(18px,1.5vw,24px); line-height: 1.7; font-weight: 500}
.mode-chapter .chapter-intro {font-size: 16px; line-height: 1.95; margin-top: 17px}
.mode-chapter .feature-list {margin-top: 28px}
.mode-chapter .feature-list>div {padding-block: 19px}
.mode-chapter kbd {font-family: inherit; padding: 0 7px; border: 1px solid #e5c57955; border-radius: 4px; color: var(--gold)}
.mode-tinted {background: #0c1c2b; border-block: 1px solid #ffffff09}
.mode-chapter .product-figure {min-width: 0}
.mode-chapter .product-figure>a {box-shadow: 0 24px 70px #00000035}
.tft-chapter {background: radial-gradient(ellipse at 50% 60%,#24404b38,transparent 67%)}
.tft-introduction {display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 90px; margin-bottom: 45px}
.tft-introduction .chapter-intro {max-width: 600px; margin: 0; padding-bottom: 4px}
.tft-figure {width: 100%; max-width: 1250px; margin-inline: auto}
.tft-feature-grid {display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 40px; margin-top: 45px!important}
.tft-feature-grid>div {border-top: 1px solid var(--line); border-bottom: 0}
.everyday {background: #0c1c2b; border-top: 1px solid var(--line); padding-block: 90px}
.everyday h2 {font-size: clamp(30px,3vw,46px)}
.everyday-grid {display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 28px}
.everyday-grid article {border: 1px solid var(--line); border-radius: 16px; background: #07132155; padding: 32px}
.tool-number {color: #c8ae72; font-size: 12px; letter-spacing: .1em}
.everyday h3 {font-size: 22px; margin-top: 27px}
.everyday-grid p {font-size: 14px; line-height: 1.95; color: var(--muted); margin-top: 15px}
.automation-summary {margin-top: 40px; padding-top: 35px; border-top: 1px solid var(--line)}
.automation-summary h3 {margin-top: 0}
.automation-summary p {font-size: 14px; line-height: 1.9; color: var(--muted); margin-top: 12px}
.automation-modes {display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; margin-top: 24px}
.automation-modes>div {padding: 20px; background: #071321; border: 1px solid var(--line); border-radius: 10px}
.automation-modes dt {font-size: 14px; color: var(--muted)}
.automation-modes dd {margin: 9px 0 0; font-size: 18px; font-weight: 600; color: var(--gold)}
@media (max-width:1190px) {
  .mode,.mode:first-child {padding: 25px 20px; gap: 16px}
  .mode svg {flex-basis: 28px; width: 28px}
  .tft-introduction {gap: 45px}
  .everyday-grid article {padding: 24px}
}
@media (max-width:900px) {
  .mode svg {display: none}
  .mode-chapter .chapter-copy {max-width: none}
  .mode-chapter h2 {font-size: 44px}
  .mode-chapter .chapter-intro {max-width: 720px}
  .tft-introduction {grid-template-columns: 1fr; gap: 22px}
  .tft-feature-grid {gap: 24px}
  .everyday-grid {gap: 15px}
  .everyday h3 {font-size: 20px}
  .automation-modes {grid-template-columns: repeat(2,minmax(0,1fr))}
}
@media (max-width:600px) {
  .mode-band {padding-block: 8px}
  .modes {grid-template-columns: repeat(2,minmax(0,1fr))}
  .mode,.mode:first-child {padding: 22px 12px; display: block}
  .mode:nth-child(n) {border: 0}
  .mode:nth-child(even) {border-left: 1px solid var(--line)}
  .mode:nth-child(n+3) {border-top: 1px solid var(--line)}
  .mode svg,.mode>span {display: none}
  .mode small {font-size: 7px; letter-spacing: .04em}
  .mode h2 {font-size: 17px; margin-top: 7px}
  .mode p {font-size: 11px; margin-top: 6px}
  .mode-chapter h2 {font-size: clamp(31px,8.5vw,42px); margin-top: 18px}
  .mode-lead {font-size: 17px; margin-top: 13px}
  .mode-chapter .chapter-intro {font-size: 14px; margin-top: 17px}
  .mode-chapter .feature-list {margin-top: 23px}
  .mode-chapter .feature-list>div {padding-block: 17px}
  .tft-introduction {margin-bottom: 30px; gap: 20px}
  .tft-feature-grid {display: block; margin-top: 27px!important}
  .tft-feature-grid>div {border-top: 0; border-bottom: 1px solid var(--line)}
  .everyday {padding-block: 66px}
  .everyday-grid {grid-template-columns: 1fr; gap: 14px}
  .everyday-grid article {padding: 26px}
  .everyday h3 {margin-top: 18px}
  .automation-modes>div {padding: 17px 13px}
  .automation-modes dd {font-size: 16px}
}