/* Capture Card layout. Font families remain defined by the supplied theme. */
:root { --max: 1200px; --gutter: 24px; }

.vetted-nav { height: 72px; border-bottom: 3px solid var(--red); }
.vetted-nav .inner { width: min(var(--max), calc(100% - 2 * var(--gutter))); height: 100%; }
.vetted-wordmark { padding: 0; border: 0; font-size: 30px; white-space: nowrap; }
.nav-links { margin-left: auto; }
.nav-links a { height: auto; padding: 10px 0; font-size: 15px; font-weight: 500; }

.editorial-lead { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 36px; align-items: start; padding-block: 38px 46px; }
.editorial-lead > * { min-width: 0; }
.hero-story { min-width: 0; }
.hero-story > a:first-child { display: block; }
.hero-story img { width: 100%; height: 370px; padding: 20px; aspect-ratio: auto; object-fit: contain; background: #f5f5f5; }
.hero-story h1 { max-width: 680px; margin: 13px 0 0; font-size: clamp(30px, 3.1vw, 45px); line-height: 1.12; }
.feature-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin: 0; border-top: 1px solid var(--line); }
.feature-grid .feature-card { display: grid; grid-template-columns: 148px minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 0 17px; min-width: 0; padding: 16px 0; border-bottom: 1px solid var(--line); }
.feature-grid .feature-card > a:first-child { grid-row: 1 / 3; }
.feature-grid .feature-card img { width: 148px; height: 112px; padding: 8px; aspect-ratio: auto; object-fit: contain; background: #f5f5f5; }
.feature-grid .feature-card h2 { grid-column: 2; grid-row: 1 / 3; align-self: center; margin: 0; font-size: 19px; line-height: 1.25; }
.feature-grid .byline { display: none; }
.home-aside { margin-bottom: 32px; }
.home-aside .product-pick { max-width: 260px; }
.news-section { padding-block: 36px 72px; border-top: 3px solid var(--black); }
.news-section-head { align-items: center; margin-bottom: 22px; }
.news-section-head h2 { font-size: 30px; }
.news-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 24px; }
.news-grid .feature-card { min-width: 0; }
.news-grid .feature-card > a:first-child { display: block; }
.news-grid .feature-card img { width: 100%; height: 215px; padding: 14px; aspect-ratio: auto; object-fit: contain; background: #f5f5f5; }
.news-grid .feature-card h2 { margin: 12px 0 0; font-size: 21px; line-height: 1.3; }
.news-grid .byline { display: none; }

.archive-page { padding-block: 42px 80px; }
.archive-page h1 { margin-bottom: 28px; }
.archive-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 24px; }
.archive-grid .feature-card { min-width: 0; }
.archive-grid .feature-card img { width: 100%; height: 220px; padding: 14px; aspect-ratio: auto; object-fit: contain; background: #f5f5f5; }
.archive-grid .feature-card h2 { margin-top: 7px; font-size: 21px; line-height: 1.3; }
.archive-grid .byline { display: none; }

.article-shell { padding-top: 38px; }
.article-head { width: min(960px, calc(100% - 2 * var(--gutter))); max-width: none; }
.article-head h1 { max-width: 940px; margin: 14px 0; font-size: clamp(38px, 4vw, 54px); line-height: 1.08; }
.article-head .dek { max-width: 780px; margin: 0; font-size: 18px; line-height: 1.5; }
.author-block { margin: 19px 0 0; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.article-hero { width: min(960px, calc(100% - 2 * var(--gutter))); margin: 22px auto 0; }
.article-hero img { width: 100%; max-height: 300px; padding: 18px; aspect-ratio: 16 / 5; object-fit: contain; background: #f5f5f5; }
.article-layout { width: min(960px, calc(100% - 2 * var(--gutter))); max-width: none; grid-template-columns: minmax(0, 680px) minmax(0, 240px); gap: 40px; margin: 34px auto 80px; }
.article-body { min-width: 0; }
.article-body > p { margin-block: 0 1.4em; }
.article-body h2 { margin: 42px 0 15px; }
.article-body table { display: table; width: 100%; table-layout: auto; white-space: normal; }
.article-body th, .article-body td { overflow-wrap: anywhere; }
.article-body .toc { margin-bottom: 26px; padding: 12px 18px; border-top-width: 3px; font-family: var(--sans); }
.article-body .toc summary { cursor: pointer; font-size: 14px; font-weight: 700; }
.article-body .toc nav { padding-top: 10px; }
.article-body .toc a { padding: 4px 0; font-size: 14px; }
.article-aside { display: grid; align-content: start; gap: 20px; }
.article-aside .aside-card { padding-top: 13px; }
.article-aside .aside-card img { width: 100%; height: 122px; padding: 8px; aspect-ratio: auto; object-fit: contain; background: #f5f5f5; }
.article-aside .aside-card h3 { margin: 9px 0 0; font-size: 16px; line-height: 1.3; }
.product-card { overflow: hidden; }
.product-content { grid-template-columns: 190px minmax(0, 1fr); gap: 20px; align-items: center; }
.product-content img { width: 100%; height: 170px; padding: 8px; aspect-ratio: auto; object-fit: contain; }
.specs { margin-top: 0; }
.footer { border-top: 1px solid var(--line); }

@media (max-width: 900px) {
  .editorial-lead { gap: 24px; }
  .hero-story img { height: 320px; }
  .feature-grid .feature-card { grid-template-columns: 110px minmax(0, 1fr); gap: 0 12px; }
  .feature-grid .feature-card img { width: 110px; height: 100px; }
  .feature-grid .feature-card h2 { font-size: 17px; }
  .article-layout { grid-template-columns: minmax(0, 1fr); max-width: 720px; }
  .article-aside { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .news-grid, .archive-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 650px) {
  :root { --gutter: 16px; }
  .vetted-nav { height: auto; }
  .vetted-nav .inner { display: flex; align-items: center; gap: 14px; width: calc(100% - 32px); min-height: 62px; padding: 9px 0; }
  .vetted-wordmark { flex: none; font-size: 23px; }
  .nav-links { margin: 0 0 0 auto; }
  .nav-links a { font-size: 13px; }
  .editorial-lead { grid-template-columns: minmax(0, 1fr); gap: 27px; padding-block: 22px 30px; }
  .hero-story img { height: 250px; padding: 13px; }
  .hero-story h1 { max-width: none; margin-top: 7px; font-size: 32px; line-height: 1.12; }
  .feature-grid { display: grid; }
  .feature-grid .feature-card { height: auto; min-height: 103px; margin: 0; padding: 13px 0; grid-template-columns: 104px minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .feature-grid .feature-card img { width: 104px; height: 85px; padding: 5px; }
  .feature-grid .feature-card h2 { margin: 0; font-size: 16px; line-height: 1.27; }
  .news-section { padding-block: 28px 48px; }
  .news-section-head h2 { font-size: 27px; }
  .news-grid, .archive-grid { grid-template-columns: minmax(0, 1fr); gap: 23px; }
  .news-grid .feature-card, .archive-grid .feature-card { display: grid; grid-template-columns: 122px minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 0 13px; }
  .news-grid .feature-card > a:first-child, .archive-grid .feature-card > a:first-child { grid-row: 1 / 3; }
  .news-grid .feature-card img, .archive-grid .feature-card img { width: 122px; height: 102px; padding: 6px; }
  .news-grid .feature-card h2, .archive-grid .feature-card h2 { grid-column: 2; grid-row: 1 / 3; align-self: center; margin: 0; font-size: 17px; line-height: 1.25; }
  .archive-page { padding-block: 28px 60px; }
  .article-shell { padding-top: 24px; }
  .article-head { width: calc(100% - 32px); }
  .article-head h1 { margin: 11px 0; font-size: 37px; }
  .article-head .dek { font-size: 17px; }
  .article-hero { width: calc(100% - 32px); margin-top: 18px; }
  .article-hero img { max-height: none; height: 180px; padding: 10px; aspect-ratio: auto; }
  .article-layout { width: calc(100% - 32px); margin-top: 25px; }
  .article-body .toc { padding: 14px 16px; }
  .article-body table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .article-aside { grid-template-columns: minmax(0, 1fr); }
  .product-content { grid-template-columns: minmax(0, 1fr); }
.product-content img { height: 210px; }
}

/* Homepage features and comparisons. */
.story-spotlight { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); min-height: 430px; margin-block: 8px 54px; overflow: hidden; border-radius: 18px; background: #5727ca; color: #fff; }
.spotlight-art { position: relative; display: grid; min-width: 0; min-height: 430px; place-items: center; overflow: hidden; background: radial-gradient(circle at 22% 17%, #b5fcff 0, #68d8f4 33%, #2367e7 72%, #152a81 100%); }
.spotlight-art::after { position: absolute; right: -12%; bottom: -31%; width: 68%; aspect-ratio: 1; border: 2px solid rgb(255 255 255 / 22%); border-radius: 50%; content: ''; }
.spotlight-art-type { position: absolute; top: 23px; left: 30px; color: rgb(8 37 117 / 29%); font-family: var(--sans); font-size: clamp(90px, 12vw, 175px); font-weight: 700; letter-spacing: -.1em; line-height: 1; white-space: nowrap; }
.spotlight-art-type span { color: rgb(255 255 255 / 30%); }
.spotlight-art img { position: relative; z-index: 1; width: min(77%, 490px); max-height: 255px; padding: 28px; border-radius: 10px; background: #fff; box-shadow: 0 26px 50px rgb(9 26 87 / 33%); object-fit: contain; transform: rotate(-6deg); transition: transform .25s ease; }
.spotlight-art:hover img { transform: rotate(-2deg) translateY(-5px); }
.spotlight-copy { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 40px clamp(28px, 4vw, 62px); }
.spotlight-category { margin-bottom: 22px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.spotlight-copy h2 { margin: 0; font-size: clamp(31px, 3vw, 46px); line-height: 1.1; }
.spotlight-copy h2 a, .secondary-copy h2 a { color: inherit; text-decoration: none; }
.spotlight-copy p { max-width: 470px; margin: 22px 0 26px; font-size: 18px; line-height: 1.5; }
.spotlight-link { align-self: flex-start; padding-bottom: 6px; border-bottom: 2px solid currentColor; color: inherit; font-size: 15px; font-weight: 700; text-decoration: none; }
.spotlight-link span, .secondary-link span { margin-left: 12px; }

.home-guide, .home-compare { padding-block: 40px 58px; border-top: 3px solid var(--black); }
.home-guide { padding: 35px 35px 40px; border-top: 0; background: #f3f0e9; }
.home-guide .home-section-head { margin-bottom: 22px; }
.home-guide .setup-grid { gap: 12px; border: 0; }
.home-guide .setup-card, .home-guide .setup-card:first-child, .home-guide .setup-card:last-child { padding: 22px; border: 0; background: #fff; }
.home-guide .setup-card:nth-child(2) { background: #e4f0ed; }
.home-guide .setup-card:nth-child(3) { background: #fbe5d5; }
.home-section-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 40px; align-items: start; margin-bottom: 27px; }
.home-section-head h2 { margin: 0; font-size: 32px; line-height: 1.18; }
.home-section-head p { max-width: 610px; margin: 1px 0 0; font-size: 16px; line-height: 1.55; }
.setup-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-block: 1px solid var(--line); }
.setup-card { display: flex; flex-direction: column; min-width: 0; padding: 25px 23px 26px; }
.setup-card:first-child { padding-left: 0; }
.setup-card:last-child { padding-right: 0; }
.setup-card + .setup-card { border-left: 1px solid var(--line); }
.setup-card h3 { margin: 0 0 13px; font-family: var(--card-serif); font-size: 23px; line-height: 1.23; }
.setup-card p { margin: 0 0 20px; font-size: 15px; line-height: 1.58; }
.setup-card > a, .setup-links { margin-top: auto; }
.setup-card a { color: #064f7b; font-size: 13px; font-weight: 500; text-underline-offset: 3px; }
.setup-links { display: flex; flex-wrap: wrap; gap: 8px 18px; }

.story-secondary { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr); min-height: 355px; margin-block: 54px; overflow: hidden; background: #e7f440; color: #111; }
.secondary-copy { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 40px clamp(28px, 4vw, 60px); }
.secondary-category { margin-bottom: 20px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.secondary-copy h2 { max-width: 540px; margin: 0; font-size: clamp(29px, 2.9vw, 42px); line-height: 1.13; }
.secondary-copy p { max-width: 500px; margin: 18px 0 24px; font-size: 17px; line-height: 1.5; }
.secondary-link { align-self: flex-start; padding-bottom: 6px; border-bottom: 2px solid currentColor; color: inherit; font-size: 15px; font-weight: 700; text-decoration: none; }
.secondary-art { position: relative; display: grid; min-width: 0; min-height: 355px; place-items: center; overflow: hidden; background: #121d35; }
.secondary-art::before { position: absolute; inset: 18px; border: 1px solid rgb(255 255 255 / 25%); content: ''; }
.secondary-art-type { position: absolute; right: 24px; bottom: 8px; color: rgb(231 244 64 / 38%); font-size: clamp(86px, 11vw, 154px); font-weight: 700; letter-spacing: -.1em; line-height: 1; }
.secondary-art-type span { font-size: .48em; letter-spacing: -.06em; }
.secondary-art img { position: relative; z-index: 1; width: min(68%, 360px); max-height: 212px; padding: 24px; background: #fff; box-shadow: 18px 20px 0 rgb(231 244 64 / 92%); object-fit: contain; transform: rotate(5deg); transition: transform .25s ease; }
.secondary-art:hover img { transform: rotate(1deg) translateY(-5px); }

.home-compare { margin-top: 0; }
.home-compare-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.home-compare table { width: 100%; border-collapse: collapse; text-align: left; }
.home-compare th, .home-compare td { padding: 16px 14px; border-bottom: 1px solid var(--line); font-size: 14px; line-height: 1.45; vertical-align: top; }
.home-compare thead th { border-bottom: 2px solid var(--black); font-size: 12px; }
.home-compare tbody th { width: 27%; font-weight: 500; }
.home-compare tbody th a { text-decoration: underline; text-underline-offset: 3px; }
.home-compare tbody th a:hover { color: var(--red); }
.home-compare-note { max-width: 750px; margin: 17px 0 0; color: #555; font-size: 13px; line-height: 1.5; }
.news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 900px) {
  .story-spotlight { min-height: 350px; }
  .spotlight-art { min-height: 350px; }
  .spotlight-copy p { font-size: 16px; }
  .secondary-copy p { font-size: 15px; }
  .home-section-head { gap: 24px; }
  .setup-card h3 { font-size: 20px; }
}

@media (max-width: 650px) {
  .story-spotlight, .story-secondary { grid-template-columns: minmax(0, 1fr); margin-block: 8px 34px; border-radius: 0; }
  .spotlight-art { min-height: 260px; }
  .spotlight-art-type { top: 18px; left: 18px; font-size: 102px; }
  .spotlight-art img { width: min(68%, 310px); max-height: 165px; padding: 17px; }
  .spotlight-copy, .secondary-copy { padding: 29px 26px 34px; }
  .spotlight-copy h2, .secondary-copy h2 { font-size: 32px; }
  .spotlight-copy p, .secondary-copy p { margin: 16px 0 22px; font-size: 16px; }
  .spotlight-category, .secondary-category { margin-bottom: 14px; }
  .story-secondary .secondary-art { grid-row: 1; min-height: 230px; }
  .secondary-art img { max-height: 135px; padding: 14px; }
  .secondary-art-type { font-size: 95px; }
  .home-guide { padding: 24px 18px 28px; }
  .home-guide .setup-grid { gap: 9px; }
  .news-grid { grid-template-columns: minmax(0, 1fr); gap: 17px; }
  .news-grid .feature-card { height: auto; min-height: 0; margin: 0; }
  .home-guide, .home-compare { padding-block: 29px 38px; }
  .home-section-head { grid-template-columns: minmax(0, 1fr); gap: 10px; margin-bottom: 19px; }
  .home-section-head h2 { font-size: 27px; }
  .home-section-head p { font-size: 14px; }
  .setup-grid { grid-template-columns: minmax(0, 1fr); }
  .home-guide .setup-card, .home-guide .setup-card:first-child, .home-guide .setup-card:last-child { padding: 20px; }
  .setup-card h3 { font-size: 22px; }
  .setup-card p { margin-bottom: 13px; font-size: 14px; }
  .home-compare { margin-top: 0; }
  .home-compare table, .home-compare tbody, .home-compare tr { display: block; width: 100%; }
  .home-compare thead { display: none; }
  .home-compare tbody { display: grid; gap: 13px; }
  .home-compare tr { padding: 11px 13px; border: 1px solid var(--line); }
  .home-compare tbody th { display: block; width: 100%; padding: 0 0 9px; font-size: 15px; }
  .home-compare td { display: grid; grid-template-columns: 95px minmax(0, 1fr); gap: 10px; padding: 9px 0; font-size: 13px; }
  .home-compare td:last-child { border-bottom: 0; }
  .home-compare td::before { content: attr(data-label); font-weight: 500; }
}