/* Homepage only. Use DESIGN.md prose palette: canvas #f8fafc, action #0052cc.
   Shared chrome and global design tokens deliberately retain their existing values. */
.cg-home {
   --cg-blue: #0052cc;
   --cg-ink: #0f172a;
   --cg-muted: #475569;
   --cg-border: #e2e8f0;
   max-width: 1280px;
   margin: 0 auto;
   padding: 24px 32px 40px;
   color: var(--cg-ink);
   font-family: Inter, sans-serif;
   font-size: 14px;
   line-height: 1.6;
   background: #f8fafc
}

.cg-home * {
   box-sizing: border-box
}

.cg-home [hidden] {
   display: none !important
}

.cg-home a {
   text-decoration: none;
   color: inherit
}

.cg-home img {
   max-width: 100%;
   display: block
}

.cg-home h1,
.cg-home h2,
.cg-home h3 {
   font-family: Geist, Inter, sans-serif;
   color: var(--cg-ink);
   letter-spacing: -.025em;
   margin: 0;
   font-weight: 650
}

.cg-home h2 {
   font-size: 30px;
   line-height: 1.2
}

.cg-home h3 {
   font-size: 18px;
   line-height: 1.35
}

.cg-home p {
   margin: 0;
   color: var(--cg-muted)
}

.cg-home a:focus-visible,
.cg-home button:focus-visible,
.cg-home summary:focus-visible {
   outline: 3px solid var(--cg-blue);
   outline-offset: 4px
}

.cg-home .cg-eyebrow {
   font: 500 10px/1.6 'JetBrains Mono', monospace;
   letter-spacing: .08em;
   color: #64748b;
   margin-bottom: 4px
}

.cg-home .cg-link {
   color: var(--cg-blue);
   font-size: 13px;
   font-weight: 500;
   display: inline-flex;
   align-items: center;
   gap: 10px
}

.cg-home .cg-link:hover {
   text-decoration: underline
}

.cg-home .cg-button {
   display: inline-flex;
   justify-content: center;
   align-items: center;
   gap: 18px;
   background: var(--cg-blue);
   color: #fff;
   min-height: 44px;
   padding: 10px 22px;
   border-radius: 4px;
   font-size: 14px;
   font-weight: 500
}

.cg-home .cg-button:hover {
   background: #0c66e4
}

.cg-section {
   margin-top: 32px
}

.cg-section-head {
   display: flex;
   justify-content: space-between;
   align-items: end;
   gap: 16px;
   margin-bottom: 16px
}

.cg-section-head>div>p:not(.cg-eyebrow) {
   margin-top: 8px
}

.cg-grid {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 16px
}

.cg-hero {
   position: relative;
   overflow: hidden;
   border-radius: 8px;
   border: 1px solid var(--cg-border);
   background: #eaf1ff
}

.cg-carousel-controls {
   position: absolute;
   z-index: 2;
   bottom: 16px;
   left: 24px;
   right: 24px;
   display: flex;
   align-items: center;
   gap: 8px;
   justify-content: center
}

.cg-carousel-controls button {
   width: 36px;
   height: 36px;
   border: 1px solid #cbd5e1;
   border-radius: 4px;
   background: #fff;
   color: var(--cg-blue);
   display: grid;
   place-items: center
}

.cg-tile,
.cg-product,
.cg-policy,
.cg-guide {
   background: #fff;
   border: 1px solid var(--cg-border);
   border-radius: 8px;
   overflow: hidden;
   box-shadow: 0 1px 3px #0f172a05
}

.cg-tile:hover,
.cg-product:hover,
.cg-policy:hover {
   border-color: #b2c5ff;
   box-shadow: 0 8px 24px -4px #0f172a0f
}

.cg-tile>img {
   width: 100%;
   height: 154px;
   object-fit: cover
}

.cg-tile>div {
   position: relative;
   padding: 16px 56px 16px 18px
}

.cg-tile p {
   font-size: 13px;
   margin-top: 5px;
   max-width: 260px
}

.cg-arrow {
   position: absolute;
   right: 16px;
   top: 24px;
   width: 32px;
   height: 32px;
   display: grid;
   place-items: center;
   border-radius: 50%;
   background: #eaf1ff;
   color: var(--cg-blue);
   font-size: 20px
}

.cg-product-link {
   display: flex;
   flex-direction: column;
   height: 100%
}

.cg-product-image {
   height: 200px;
   background: #f1f5f9;
   overflow: hidden
}

.cg-product-image picture,
.cg-product-image img {
   width: 100%;
   height: 100%;
   object-fit: cover
}

.cg-no-image {
   height: 100%;
   display: flex;
   gap: 12px;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   color: #64748b
}

.cg-no-image i {
   font-size: 40px
}

.cg-product-body {
   padding: 14px 16px 16px;
   display: flex;
   flex-direction: column;
   gap: 8px;
   flex: 1
}

.cg-product-meta {
   font-size: 10px;
   display: flex;
   justify-content: space-between;
   gap: 12px;
   text-transform: uppercase;
   letter-spacing: .04em;
   color: #64748b
}

.cg-stock {
   color: #006a61
}

.cg-sold-out {
   color: #64748b
}

.cg-product h3 {
   font-size: 17px;
   letter-spacing: -.015em
}

.cg-price {
   font: 500 16px/1.6 'JetBrains Mono', monospace;
   color: var(--cg-blue);
   font-variant-numeric: tabular-nums
}

.cg-specs {
   display: flex;
   gap: 6px;
   flex-wrap: wrap
}

.cg-specs span {
   font: 400 11px/1.5 'JetBrains Mono', monospace;
   background: #f1f5f9;
   padding: 3px 6px;
   border-radius: 3px;
   color: #475569
}

.cg-product-description {
   font-size: 12px;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden
}

.cg-product-cta {
   display: flex;
   justify-content: center;
   gap: 12px;
   align-items: center;
   min-height: 40px;
   border-radius: 4px;
   background: var(--cg-blue);
   color: #fff;
   font-size: 12px;
   margin-top: auto
}

.cg-category-links {
   display: flex;
   gap: 8px;
   flex-wrap: wrap;
   margin-top: 16px
}

.cg-category-links a {
   border: 1px solid var(--cg-border);
   border-radius: 4px;
   background: #fff;
   padding: 8px 12px;
   font-size: 12px;
   color: var(--cg-blue)
}

.cg-switch {
   margin-top: 32px;
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 24px;
   background: #eaf3ff;
   padding: 24px;
   border-radius: 8px;
   overflow: hidden
}

.cg-switch-intro {
   position: relative;
   min-width: 0;
   display: flex;
   flex-direction: column
}

.cg-switch-intro>p:not(.cg-eyebrow) {
   margin-top: 10px;
   position: relative;
   z-index: 1
}

.cg-switch-intro>img {
   width: 100%;
   height: 240px;
   object-fit: cover;
   object-position: center 53%;
   margin-top: 16px;
   border-radius: 4px;
   mix-blend-mode: multiply
}

.cg-switch-options {
   display: flex;
   flex-direction: column;
   justify-content: center;
   gap: 16px
}

.cg-switch-cards {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 12px
}

.cg-switch-card {
   display: flex;
   flex-direction: column;
   padding: 16px;
   background: #fff;
   border: 1px solid #e2e8f0;
   border-radius: 8px
}

.cg-switch-card>img {
   width: 100%;
   height: 180px;
   object-fit: contain
}

.cg-switch-card h3 {
   font-size: 16px
}

.cg-switch-card p {
   font-size: 12px;
   margin: 6px 0 12px
}

.cg-switch-card>span {
   margin-top: auto;
   display: flex;
   justify-content: center;
   gap: 12px;
   padding: 7px;
   background: #eaf3ff;
   border-radius: 4px;
   color: var(--cg-blue);
   font-size: 12px
}

.cg-switch-actions {
   display: flex;
   gap: 12px;
   align-items: center;
   justify-content: space-between;
   flex-wrap: wrap
}

.cg-switch-actions .cg-link {
   font-size: 11px
}

.cg-switch-actions .cg-button {
   font-size: 12px;
   padding: 8px 14px
}

.cg-switch-products .cg-product-link {
   display: grid;
   grid-template-columns: 38% 62%
}

.cg-switch-products .cg-product-image {
   height: 100%;
   min-height: 170px;
   background: #fff
}

.cg-switch-products .cg-product-body {
   padding: 12px;
   gap: 6px
}

.cg-switch-products .cg-product h3 {
   font-size: 15px
}

.cg-switch-products .cg-product-meta {
   font-size: 9px
}

.cg-switch-products .cg-product-cta {
   background: #eaf3ff;
   color: var(--cg-blue);
   min-height: 34px
}

.cg-switch-products .cg-price {
   font-size: 13px
}

.cg-switch-products .cg-specs {
   display: none
}

.cg-policy-grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 16px
}

.cg-policy>img {
   width: 100%;
   height: 170px;
   object-fit: cover;
   object-position: center 48%
}

.cg-policy-body {
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 14px
}

.cg-policy-body>i {
   flex: none;
   background: #eaf3ff;
   color: var(--cg-blue);
   font-size: 24px;
   width: 44px;
   height: 44px;
   display: grid;
   place-items: center;
   border-radius: 4px
}

.cg-policy h3 {
   font-size: 16px
}

.cg-policy p {
   font-size: 12px;
   line-height: 1.5;
   margin-top: 3px
}

.cg-policy-body>.cg-link {
   flex: none;
   margin-left: auto;
   font-size: 11px
}

.cg-note {
   font-size: 11px;
   color: #64748b
}

.cg-guide-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 16px
}

.cg-guide summary {
   list-style: none;
   cursor: pointer;
   display: flex;
   gap: 16px;
   padding: 10px;
   align-items: center
}

.cg-guide summary::-webkit-details-marker {
   display: none
}

.cg-guide summary>img {
   width: 38%;
   height: 120px;
   object-fit: cover;
   border-radius: 4px
}

.cg-guide summary>span {
   flex: 1
}

.cg-guide strong {
   font-family: Geist, Inter, sans-serif;
   font-size: 16px;
   display: block;
   line-height: 1.3
}

.cg-guide small {
   display: block;
   color: #475569;
   font-size: 12px;
   line-height: 1.5;
   margin: 6px 0
}

.cg-guide-content {
   border-top: 1px solid var(--cg-border);
   padding: 16px;
   font-size: 13px;
   color: #334155
}

.cg-guides,
.cg-guide {
   scroll-margin-top: 120px
}

.cg-posts {
   display: flex;
   gap: 16px;
   margin-top: 16px
}

.cg-posts a {
   flex: 1;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 16px;
   border-bottom: 1px solid var(--cg-border);
   padding: 12px 0;
   font-size: 13px
}

.cg-posts a>span:last-child {
   color: var(--cg-blue)
}

@media(min-width:1600px) {
   .cg-home {
      max-width: 1360px
   }
}

@media(max-width:1000px) {
   .cg-home {
      padding: 16px 24px 32px
   }

   .cg-home h2 {
      font-size: 26px
   }

   .cg-policy-body {
      flex-wrap: wrap
   }

   .cg-policy-body>.cg-link {
      margin-left: 56px
   }

   .cg-switch {
      gap: 16px;
      padding: 20px
   }

   .cg-switch-card {
      padding: 12px
   }

   .cg-switch-card>img {
      height: 140px
   }

   .cg-product-image {
      height: 170px
   }

   .cg-switch-products .cg-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr))
   }
}

@media(max-width:760px) {
   .cg-home {
      padding: 12px 16px 28px
   }

   .cg-home h2 {
      font-size: 24px
   }

   .cg-section {
      margin-top: 28px
   }

   .cg-section-head {
      align-items: start;
      flex-wrap: wrap;
      gap: 8px
   }

   .cg-section-head .cg-link {
      font-size: 12px
   }

   .cg-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px
   }

   .cg-explore {
      grid-template-columns: 1fr
   }

   .cg-tile {
      display: grid;
      grid-template-columns: 38% 62%
   }

   .cg-tile>img {
      height: 100%;
      min-height: 126px
   }

   .cg-tile>div {
      padding: 18px 44px 18px 16px
   }

   .cg-tile h3 {
      font-size: 17px
   }

   .cg-arrow {
      right: 10px;
      width: 26px;
      height: 26px
   }

   .cg-switch {
      grid-template-columns: 1fr;
      padding: 20px;
      margin-top: 28px
   }

   .cg-switch-intro>img {
      height: 220px
   }

   .cg-switch-card>img {
      height: 180px
   }

   .cg-policy-grid,
   .cg-guide-grid {
      grid-template-columns: 1fr
   }

   .cg-policy>img {
      height: 190px
   }

   .cg-policy-body {
      flex-wrap: nowrap
   }

   .cg-policy-body>.cg-link {
      margin-left: auto
   }

   .cg-guide summary>img {
      height: 115px
   }

   .cg-posts {
      flex-direction: column;
      gap: 0
   }

   .cg-note {
      font-size: 10px
   }
}

@media(max-width:480px) {
   .cg-grid {
      grid-template-columns: 1fr
   }

   .cg-product-image {
      height: 220px
   }

   .cg-switch-products .cg-grid {
      grid-template-columns: 1fr
   }

   .cg-switch-products .cg-product-image {
      min-height: 160px;
      height: 100%
   }

   .cg-switch-card>img {
      height: 125px
   }

   .cg-switch-card h3 {
      font-size: 14px
   }

   .cg-policy-body {
      flex-wrap: wrap
   }

   .cg-policy-body>div {
      flex: 1
   }

   .cg-policy-body>.cg-link {
      margin-left: 56px
   }

   .cg-home h2 {
      font-size: 23px
   }

   .cg-switch {
      padding: 16px
   }

   .cg-switch-actions {
      align-items: stretch;
      flex-direction: column
   }

   .cg-switch-actions .cg-link {
      min-height: 36px
   }

   .cg-tile>div {
      padding-right: 38px
   }
}

@media(prefers-reduced-motion:no-preference) {

   .cg-tile,
   .cg-product,
   .cg-policy,
   .cg-button {
      transition: background .15s, border-color .15s, box-shadow .15s
   }
}

/* Editorial cards navigate to the administrator-selected articles. */
.cg-home .cg-article-link {
   display: flex;
   align-items: center;
   gap: 16px;
   padding: 12px;
   height: 100%
}

.cg-article-link>img,
.cg-article-placeholder {
   width: 38%;
   height: 130px;
   object-fit: cover;
   border-radius: 4px;
   flex-shrink: 0
}

.cg-article-placeholder {
   display: grid;
   place-items: center;
   background: #f1f5f9;
   color: #64748b;
   font-size: 32px
}

.cg-article-link>div {
   min-width: 0
}

.cg-home .cg-article-link h3 {
   font-size: 17px;
   line-height: 1.4
}

.cg-article-link p {
   font-size: 12px;
   margin: 8px 0;
   display: -webkit-box;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
   overflow: hidden
}

.cg-article-link .cg-link {
   margin-top: 8px
}

.cg-guide:has(.cg-article-link):hover {
   border-color: #b2c5ff;
   box-shadow: 0 8px 24px -4px #0f172a0f
}

.cg-compatibility {
   font-size: 12px;
   scroll-margin-top: 120px
}

.cg-compatibility summary {
   cursor: pointer;
   color: #0052cc
}

.cg-compatibility p {
   padding-top: 8px
}

@media(max-width:480px) {
   .cg-home .cg-article-link {
      gap: 12px
   }

   .cg-home .cg-article-link h3 {
      font-size: 16px
   }

   .cg-article-link>img,
   .cg-article-placeholder {
      height: 120px
   }
}

/* Display the complete administrator-uploaded banner without overlay or cropping. */
.cg-home .cg-slide {
   display: block;
   position: relative;
   min-height: 0;
   width: 100%
}

.cg-home .cg-hero-image {
   display: block;
   position: static;
   width: 100%;
   height: 100%;
   object-fit: cover
}

.cg-home .cg-hero {
   background: #fff;
   width: 100%;
   max-width: 1920px;
   aspect-ratio: 1920 / 600;
   margin-inline: auto
}

.cg-home .cg-carousel-controls {
   position: absolute;
   bottom: 8px;
   left: 8px;
   right: 8px;
   padding: 0;
   background: transparent;
   border: 0
}

/* Let the banner extend beyond the product grid on wide screens. */
.cg-home .cg-hero {
   width: min(1920px, calc(100vw - 64px));
   max-width: none;
   margin-inline: calc((100% - min(1920px, calc(100vw - 64px))) / 2)
}

@media(max-width:760px) {
   .cg-home .cg-hero {
      width: 100%;
      margin-inline: 0
   }
}

/* Two manual navigation controls, placed on either edge of the image. */
.cg-home .cg-carousel-controls {
   inset: 0;
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 0 24px;
   pointer-events: none
}

.cg-home .cg-carousel-controls button {
   pointer-events: auto;
   width: 48px;
   height: 48px;
   border: 1px solid rgba(203, 213, 225, .85);
   border-radius: 8px;
   background: rgba(255, 255, 255, .88);
   backdrop-filter: blur(12px);
   color: #0052cc;
   box-shadow: 0 2px 8px rgba(15, 23, 42, .1);
   cursor: pointer;
   touch-action: manipulation
}

.cg-home .cg-carousel-controls button:hover {
   background: #0052cc;
   border-color: #0052cc;
   color: #fff
}

.cg-home .cg-carousel-controls button:active {
   background: #0040a2;
   color: #fff
}

.cg-home .cg-carousel-controls button:focus-visible {
   outline: 3px solid #0052cc;
   outline-offset: 3px;
   box-shadow: 0 0 0 3px #fff
}

@media(prefers-reduced-motion:no-preference) {
   .cg-home .cg-carousel-controls button {
      transition: background .15s, color .15s, border-color .15s
   }
}

@media(max-width:760px) {
   .cg-home .cg-carousel-controls {
      padding: 0 10px
   }

   .cg-home .cg-carousel-controls button {
      width: 40px;
      height: 40px;
      border-radius: 6px
   }
}

/* Keep transitioning images inside the fixed banner frame. */
.cg-home .cg-hero .cg-slide {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%
}



/* Two-panel switch comparison matching the homepage reference. */
.cg-home .cg-switch--compare {
   grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
   gap: 24px;
   padding: 24px;
   align-items: stretch;
   background: #eaf3ff
}

.cg-switch--compare .cg-switch-intro>p {
   font-size: 15px;
   line-height: 1.7
}

.cg-switch--compare .cg-switch-intro>img {
   height: 0;
   min-height: 280px;
   flex: 1;
   width: 100%;
   object-fit: cover;
   object-position: center;
   border-radius: 6px;
   mix-blend-mode: normal;
   margin-top: 20px
}

.cg-switch--compare .cg-switch-options {
   min-width: 0;
   gap: 14px;
   justify-content: flex-start
}

.cg-home .cg-switch-options-heading h3 {
   font-size: 24px;
   line-height: 1.3;
   letter-spacing: -.025em
}

.cg-switch-options-heading p {
   font-size: 13px;
   margin-top: 6px
}

.cg-switch--compare .cg-switch-cards {
   grid-template-columns: minmax(0, 1fr);
   gap: 12px
}

.cg-switch--compare .cg-switch-card {
   display: grid;
   grid-template-columns: 94px minmax(0, 1fr) auto;
   align-items: center;
   gap: 16px;
   padding: 12px;
   min-width: 0;
   border-radius: 10px;
   box-shadow: 0 1px 3px rgba(15, 23, 42, .04)
}

.cg-switch--compare .cg-switch-card>img {
   width: 94px;
   height: 104px;
   object-fit: contain;
   margin: 0;
   border-radius: 8px;
   background: #f8fafc
}

.cg-switch-copy {
   min-width: 0
}

.cg-switch-badge {
   display: inline-block;
   padding: 4px 10px;
   border-radius: 999px;
   font-size: 10px;
   font-weight: 600;
   line-height: 1.4;
   text-transform: uppercase;
   margin-bottom: 7px
}

.cg-switch-badge--linear {
   background: #fff0f2;
   color: #b42332
}

.cg-switch-badge--tactile {
   background: #faf0e6;
   color: #92400e
}

.cg-switch-badge--clicky {
   background: #eaf3ff;
   color: #0052cc
}

.cg-switch--compare .cg-switch-card h3 {
   font-size: 23px;
   line-height: 1.2;
   margin: 0 0 6px
}

.cg-switch--compare .cg-switch-card p {
   font-size: 12px;
   line-height: 1.6;
   margin: 0
}

.cg-switch-copy small {
   display: block;
   font-size: 11px;
   line-height: 1.5;
   color: #64748b;
   margin-top: 4px
}

.cg-switch--compare .cg-switch-card>span {
   margin: 0;
   min-height: 42px;
   padding: 10px 12px;
   gap: 12px;
   align-items: center;
   font-size: 12px;
   white-space: nowrap
}

.cg-switch--compare .cg-switch-card:hover {
   border-color: #b2c5ff;
   box-shadow: 0 8px 24px -4px rgba(15, 23, 42, .06)
}

.cg-switch--compare .cg-switch-card:hover>span {
   background: #0052cc;
   color: #fff
}

.cg-switch--compare .cg-switch-actions {
   display: flex;
   align-items: flex-start;
   justify-content: flex-end;
   flex-wrap: nowrap;
   gap: 16px;
   margin-top: 2px
}






.cg-switch--compare .cg-switch-actions .cg-button {
   flex-shrink: 0;
   font-size: 12px;
   min-height: 44px;
   gap: 14px;
   padding: 10px 16px
}

@media(prefers-reduced-motion:no-preference) {

   .cg-switch--compare .cg-switch-card,
   .cg-switch--compare .cg-switch-card>span {
      transition: border-color .18s, box-shadow .18s, background .18s, color .18s
   }
}

@media(min-width:761px) and (max-width:1100px) {
   .cg-home .cg-switch--compare {
      grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
      gap: 20px;
      padding: 20px
   }

   .cg-switch--compare .cg-switch-card {
      grid-template-columns: 72px minmax(0, 1fr);
      gap: 8px 12px
   }

   .cg-switch--compare .cg-switch-card>img {
      width: 72px;
      height: 90px;
      grid-row: 1 / 3
   }

   .cg-switch--compare .cg-switch-card>span {
      grid-column: 2;
      justify-self: start;
      min-height: 36px;
      padding: 6px 10px
   }

   .cg-switch--compare .cg-switch-actions {
      flex-wrap: wrap
   }
}

@media(max-width:760px) {
   .cg-home .cg-switch--compare {
      grid-template-columns: 1fr;
      padding: 16px;
      gap: 24px
   }

   .cg-switch--compare .cg-switch-intro>img {
      height: auto;
      min-height: 0;
      flex: none;
      aspect-ratio: 3 / 2
   }

   .cg-home .cg-switch-options-heading h3 {
      font-size: 23px
   }
}

@media(max-width:520px) {
   .cg-switch--compare .cg-switch-card {
      grid-template-columns: 76px minmax(0, 1fr);
      gap: 8px 12px
   }

   .cg-switch--compare .cg-switch-card>img {
      width: 76px;
      height: 96px;
      grid-row: 1 / 3
   }

   .cg-switch--compare .cg-switch-card>span {
      grid-column: 2;
      justify-content: space-between
   }

   .cg-switch--compare .cg-switch-card h3 {
      font-size: 21px
   }

   .cg-switch--compare .cg-switch-actions {
      flex-direction: column;
      align-items: stretch
   }

   .cg-switch--compare .cg-switch-actions .cg-button {
      width: 100%
   }
}

/* Keyboard layout discovery, immediately following the needs shortcuts. */
.cg-keyboard-selector {
   display: grid;
   grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
   gap: 24px;
   margin-top: 32px;
   padding: 24px;
   background: #eaf3ff;
   border-radius: 8px
}

.cg-keyboard-selector__intro {
   display: flex;
   flex-direction: column;
   min-width: 0
}

.cg-keyboard-selector__intro>p {
   margin-top: 12px;
   font-size: 15px;
   line-height: 1.7
}

.cg-keyboard-selector__intro>img {
   height: 0;
   min-height: 280px;
   flex: 1;
   width: 100%;
   object-fit: cover;
   border-radius: 6px;
   margin-top: 20px
}

.cg-keyboard-selector__options {
   min-width: 0;
   display: flex;
   flex-direction: column;
   gap: 14px
}

.cg-home .cg-keyboard-selector__options>header h3 {
   font-size: 24px;
   line-height: 1.3
}

.cg-keyboard-selector__options>header p {
   font-size: 13px;
   margin-top: 6px
}

.cg-keyboard-selector__cards {
   display: grid;
   gap: 12px
}

.cg-layout-card {
   display: grid;
   grid-template-columns: 140px minmax(0, 1fr) auto;
   align-items: center;
   gap: 14px;
   padding: 12px;
   background: #fff;
   border: 1px solid #e2e8f0;
   border-radius: 8px;
   box-shadow: 0 1px 3px rgba(15, 23, 42, .04)
}

.cg-layout-card>img {
   width: 140px;
   height: 112px;
   object-fit: contain;
   border-radius: 6px;
   background: #f1f5f9
}

.cg-layout-card>div {
   min-width: 0
}

.cg-home .cg-layout-card h4 {
   font-size: 21px;
   line-height: 1.3;
   margin: 7px 0
}

.cg-layout-card p {
   font-size: 12px;
   line-height: 1.6
}

.cg-layout-badge {
   display: inline-block;
   padding: 4px 10px;
   border-radius: 999px;
   background: #e5efff;
   color: #0052cc;
   font: 500 11px/1.5 'JetBrains Mono', monospace
}

.cg-layout-badge--balanced {
   background: #dcf5f0;
   color: #006a61
}

.cg-layout-badge--full {
   background: #e2e8f0;
   color: #475569;
   text-transform: uppercase
}

.cg-layout-card__action {
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 10px 12px;
   min-height: 42px;
   background: #eaf3ff;
   border-radius: 4px;
   color: #0052cc;
   font-size: 12px;
   white-space: nowrap
}

.cg-layout-card:hover {
   border-color: #b2c5ff;
   box-shadow: 0 8px 24px -4px rgba(15, 23, 42, .06)
}

.cg-layout-card:hover .cg-layout-card__action {
   background: #0052cc;
   color: #fff
}

.cg-keyboard-selector__actions {
   display: flex;
   align-items: center;
   justify-content: flex-end;
   gap: 16px;
   border-top: 1px solid #cfdef2;
   padding-top: 14px;
   margin-top: auto
}

.cg-keyboard-selector__actions .cg-link {
   font-size: 12px
}

.cg-keyboard-selector__actions .cg-button {
   font-size: 12px;
   padding: 10px 14px;
   flex-shrink: 0
}

@media(prefers-reduced-motion:no-preference) {

   .cg-layout-card,
   .cg-layout-card__action {
      transition: border-color .18s, box-shadow .18s, background .18s, color .18s
   }
}

@media(min-width:761px) and (max-width:1200px) {
   .cg-keyboard-selector {
      grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
      padding: 20px;
      gap: 20px
   }

   .cg-layout-card {
      grid-template-columns: 110px minmax(0, 1fr);
      gap: 8px 12px
   }

   .cg-layout-card>img {
      width: 110px;
      height: 100px;
      grid-row: 1 / 3
   }

   .cg-layout-card__action {
      grid-column: 2;
      justify-self: start;
      padding: 6px 10px;
      min-height: 36px
   }

   .cg-keyboard-selector__actions {
      flex-wrap: wrap
   }
}

@media(max-width:760px) {
   .cg-keyboard-selector {
      grid-template-columns: 1fr;
      padding: 16px;
      gap: 24px;
      margin-top: 28px
   }

   .cg-keyboard-selector__intro>img {
      height: auto;
      min-height: 0;
      flex: none;
      aspect-ratio: 3 / 2
   }

   .cg-home .cg-keyboard-selector__options>header h3 {
      font-size: 23px
   }
}

@media(max-width:520px) {
   .cg-layout-card {
      grid-template-columns: 100px minmax(0, 1fr);
      gap: 8px 12px
   }

   .cg-layout-card>img {
      width: 100px;
      height: 94px;
      grid-row: 1 / 3
   }

   .cg-layout-card__action {
      grid-column: 2;
      justify-content: space-between
   }

   .cg-home .cg-layout-card h4 {
      font-size: 20px
   }

   .cg-keyboard-selector__actions {
      flex-direction: column;
      align-items: stretch
   }

   .cg-keyboard-selector__actions .cg-button {
      width: 100%
   }
}