/* The original section 02 remains in design-checkpoints/section-02-before-jacquard. */
@font-face {
  font-family: 'Jacquard 24';
  src: url('assets/Jacquard24-Regular.ttf') format('truetype');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
:root { --feature-font: 'Jacquard 24', serif; }

.introduction .intro-copy { max-width: 850px; line-height: 1.55; }
.features .panel-headline { font-size: clamp(80px, 8vw, 112px); }
.feature-tabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: stretch;
  max-width: 1000px;
  border-top: 1px solid #83a7ff80;
  border-bottom: 1px solid #83a7ff40;
}
.feature-tab {
  position: relative;
  min-width: 44px;
  min-height: 56px;
  padding: 12px 4px 16px;
  border: 0;
  background: none;
  color: var(--paper);
  font: 400 clamp(36px, 4vw, 48px)/1.1 var(--feature-font);
  white-space: nowrap;
  cursor: pointer;
}
.feature-tab::after { content: ''; position: absolute; inset: auto 0 -1px; height: 3px; background: transparent; }
.feature-tab:hover, .feature-tab[aria-selected="true"] { color: var(--signal); }
.feature-tab[aria-selected="true"]::after { background: var(--signal); }
.feature-tab:focus-visible { outline-offset: 4px; }
.feature-tab, .feature-panel { scroll-margin-top: calc(var(--header-height) + var(--section-title-height) + 24px); }
.feature-panels { margin-top: 32px; }
.feature-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 320px); align-items: start; gap: clamp(48px, 8vw, 120px); min-height: 656px; }
.feature-panel[hidden] { display: none; }
.feature-panel:focus-visible { outline: 2px solid var(--signal); outline-offset: 8px; }
.feature-explanation { padding-top: 20px; max-width: 640px; }
.feature-explanation h3 { font-size: clamp(26px, 3vw, 32px); font-weight: 600; line-height: 1.15; margin-bottom: 20px; }
.feature-explanation > p:last-child { color: var(--paper); font-size: 20px; line-height: 1.55; max-width: 40ch; }
.feature-capture { width: min(100%, 270px); justify-self: center; }
.feature-capture img { display: block; width: 100%; height: auto; border: 1px solid #eee9de66; border-radius: 8px; background: #080d17; }

@media (max-width: 767px) {
  .features .panel-headline { font-size: clamp(64px, 18vw, 80px); }
  .feature-tab { padding-block: 10px; font-size: clamp(24px, 7.5vw, 32px); }
  .feature-panels { margin-top: 28px; }
  .feature-panel { grid-template-columns: minmax(0, 1fr); gap: 32px; min-height: 0; }
  .feature-explanation { padding-top: 0; max-width: none; }
  .feature-explanation h3 { margin-bottom: 16px; font-size: 26px; }
  .feature-explanation > p:last-child { font-size: 18px; line-height: 1.5; max-width: none; }
  .feature-capture { width: min(100%, 250px); }
}

@media (max-width: 639px) {
  .feature-tabs { display: flex; flex-wrap: wrap; }
  .feature-tab { flex: 1 1 33.333%; }
}

/* Share columns and rows so the screenshot begins at the toolbar's top. */
@media (min-width: 1200px) {
  .feature-explorer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    grid-template-rows: auto 1fr;
    column-gap: 48px;
    row-gap: 32px;
  }
  .feature-tabs {
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    z-index: 1;
    max-width: none;
  }
  .feature-tab { font-size: 40px; }
  .feature-panels,
  .feature-panel:not([hidden]) {
    display: grid;
    grid-column: 1 / -1;
    grid-row: 1 / 3;
    grid-template-columns: subgrid;
    grid-template-rows: subgrid;
    gap: inherit;
    margin-top: 0;
  }
  .feature-explanation {
    grid-column: 1;
    grid-row: 2;
    padding-top: 0;
  }
  .feature-capture {
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: start;
  }
}