@media screen and (min-width: 768px) {

  :root {
    --contentWidth: min(100% - 4rem, var(--siteMaxWidth));
    --headerHeight: 6.8rem;
  }

  br.mobile {
    display: none;
  }

  br.tablet {
    display: block;
  }


  /* ======================================== */
  /* HEADER - START                           */
  /* ======================================== */
  .siteLogo {
    width: 8.8rem;
  }

  .headerRightArea {
    padding-inline: 2rem;
  }

  /* ======================================== */
  /* HERO SECTION - START                     */
  /* ======================================== */
  .heroSection {
    padding-block: 2.5rem 4rem;
  }

  .heroStatsCard {
    align-self: flex-end;
    padding: 1rem 1.6rem;
  }

  .heroStatsText {
    font-size: 1.15rem;
  }

  .heroBody {
    gap: 2rem;
  }

  .heroDescription {
    font-size: 1.125rem;
  }

  .heroCaution {
    font-size: 1rem;
  }

  .heroVisualArea {
    gap: 1rem;
  }

  .heroMachineImageSmall {
    width: min(32%, 14rem);
  }

  .heroMachineImageLarge {
    width: min(53%, 20rem);
  }

  .heroCtaButton {
    padding: 1.5rem 1.5rem 1.2rem;
    border-radius: 1.9rem;
  }

  .heroCtaArrow {
    font-size: 1.3rem;
  }


  /* ======================================== */
  /* PROBLEM SECTION - START                  */
  /* ======================================== */
  .problemSection {
    padding-block: 4rem 5rem;
  }

  .sectionHeadingWrap {
    gap: 1.2rem;
    margin-bottom: 2rem;
  }

  .problemCardGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.75rem;
  }

  .problemCard {
    min-height: 22rem;
    padding: 1.8rem 1.5rem 2rem;
  }
  
    /* ======================================== */
  /* SOLUTION SECTION - START                 */
  /* ======================================== */
  .solutionSection {
    padding-block: 4rem 5rem;
  }

  .sectionHeadingWrapSolution {
    margin-bottom: 3rem;
  }

  .solutionLeadText {
    font-size: 1.125rem;
    line-height: 1.85;
  }

  .solutionArticleList {
    gap: 3.4rem;
  }

  .solutionArticleTextBox {
    padding: 1.7rem 1.5rem 1.8rem;
  }

  .solutionArticleTitle {
    font-size: 1.95rem;
  }

  .solutionArticleTag {
    font-size: 1rem;
  }

  .solutionArticleText {
    font-size: 1.125rem;
    line-height: 1.8;
  }
  /* ======================================== */
  /* SOLUTION SECTION - END                   */
  /* ======================================== */

  /* ======================================== */
  /* VOICE SECTION - START                    */
  /* ======================================== */
  .voiceSection {
    padding-block: 4rem 5rem;
  }

  .sectionHeadingWrapVoice {
    margin-bottom: 3rem;
  }

  .voiceCardGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.75rem;
  }

  .voiceCard {
    padding: 2rem 1.8rem 1.8rem;
    border-radius: 2.8rem;
  }

  .voiceCardNumber {
    font-size: 5.8rem;
    margin-bottom: 0.8rem;
  }

  .voiceCardTitle {
    font-size: 1.6rem;
    margin-bottom: 1rem;
  }

  .voiceCardText {
    font-size: 1.125rem;
    line-height: 1.8;
  }

  .voiceCardAttribution {
    font-size: 1rem;
  }
  /* ======================================== */
  /* VOICE SECTION - END                      */
  /* ======================================== */

  /* LINEUP */
  .lineupSection {
    padding-block: 4rem 5rem;
  }

  .lineupCardGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.8rem;
  }

  .lineupCard {
    padding: 1.8rem 1.6rem 2rem;
  }

  .lineupCardImageWrap {
    min-height: 17rem;
  }

  .lineupCardImage {
    max-height: 16rem;
  }

  .lineupCardName {
    font-size: 2.3rem;
  }

  .lineupCardPriceValue {
    font-size: 2.1rem;
  }

  .lineupCardPriceValueSmall {
    font-size: 1.8rem;
  }

  /* FAQ */
  .faqSection {
    padding-block: 4rem 5rem;
  }

  .faqQuestion {
    padding: 1.3rem 1.5rem;
    font-size: 1.05rem;
  }

  .faqAnswerInner {
    padding: 0 1.5rem 1.4rem 1.5rem;
  }

  .faqAnswerText {
    font-size: 1rem;
  }

  /* AREA */
  .areaSection {
    padding-block: 4rem 5rem;
  }

  .areaPill {
    padding: 0.5rem 1.4rem;
    font-size: 0.92rem;
  }

  /* BLOG */
  .blogSection {
    padding-block: 4rem 5rem;
  }

  .blogItemLink {
    grid-template-columns: 10rem 1fr auto;
    gap: 1.4rem;
    padding: 1.2rem 1.4rem;
  }

  .blogItemTitle {
    font-size: 1.1rem;
  }

  .blogItemExcerpt {
    font-size: 0.88rem;
  }

  /* CTA BAND */
  .ctaBand {
    padding-block: 4.4rem 5rem;
  }

  /* RELATED */
  .relatedSection {
    padding-block: 4rem 5rem;
  }

  .relatedCardGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem;
  }

  .relatedCardTitle {
    font-size: 1.45rem;
  }

  /* FOOTER */
  .siteFooter {
    padding-block: 2.6rem 1.8rem;
  }

  .siteFooterNavList {
    gap: 0.8rem 2rem;
  }

  /* CATCHER PAGE — TABLET */
  .catcherHero {
    padding-block: 2.5rem 4rem;
  }

  .catcherHeroStats {
    align-self: flex-end;
    padding: 1rem 1.6rem;
  }

  .catcherHeroStatLabel {
    font-size: 1rem;
  }

  .catcherHeroStatValue {
    font-size: 2rem;
  }

  .catcherHeroDescription {
    font-size: 1.1rem;
  }

  .catcherHeroCaution {
    font-size: 0.95rem;
  }

  .catcherHeroCta {
    padding: 1.5rem 1.5rem 1.2rem;
  }

  .catcherSolutionCard {
    grid-template-columns: 5rem 1fr 14rem;
    grid-template-rows: auto;
    gap: 1rem 1.4rem;
    align-items: center;
    padding: 1.4rem 1.6rem;
  }

  .catcherSolutionNumber {
    grid-row: 1 / 2;
    grid-column: 1 / 2;
    width: 4.6rem;
    height: 4.6rem;
    font-size: 1.9rem;
  }

  .catcherSolutionContent {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
  }

  .catcherSolutionMedia {
    grid-column: 3 / 4;
    grid-row: 1 / 2;
    aspect-ratio: 13 / 5;
  }

  .catcherSolutionTitle {
    font-size: 1.4rem;
  }

  .catcherSolutionText {
    font-size: 1rem;
  }

  .catcherLineupCard {
    grid-template-columns: 48% 1fr;
    gap: 2rem;
    padding: 2rem 2rem 2.2rem;
  }

  .catcherLineupName {
    font-size: 2.1rem;
  }

  .catcherFlowList {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }

  /* INDEX FLOW — TABLET */
  .indexFlowList {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }

  .catcherUsagePill {
    font-size: 0.92rem;
    padding: 0.5rem 1.3rem;
  }

  /* GT-NEX PAGE — TABLET */
  .gtnexHero {
    padding-block: 2.5rem 4rem;
  }

  .gtnexHeroStats {
    align-self: flex-end;
    padding: 1rem 1.6rem;
  }

  .gtnexHeroStatLabel {
    font-size: 1rem;
  }

  .gtnexHeroStatValue {
    font-size: 2.2rem;
  }

  .gtnexHeroDescription {
    font-size: 1.1rem;
  }

  .gtnexHeroCaution {
    font-size: 0.95rem;
  }

  .gtnexHeroCta {
    padding: 1.5rem 1.5rem 1.2rem;
  }

  .gtnexSolutionGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.4rem;
  }

  .gtnexSolutionCard {
    padding: 1.8rem 1.6rem;
  }

  .gtnexSolutionNumber {
    font-size: 3.4rem;
  }

  .gtnexSolutionTitle {
    font-size: 1.4rem;
  }

  .gtnexCostTable thead th,
  .gtnexCostTable tbody th,
  .gtnexCostTable tbody td {
    padding: 1.2rem 1.4rem;
    font-size: 1rem;
  }

  .gtnexCostPrice {
    font-size: 1.2rem;
  }

  .gtnexCostPriceHighlight {
    font-size: 1.5rem;
  }

  .gtnexLineupCard {
    grid-template-columns: 45% 1fr;
    gap: 1.8rem;
    padding: 2rem 2rem 2.2rem;
  }

  .gtnexLineupHeading {
    font-size: 1.4rem;
  }

  .gtnexLineupSpecPrice {
    font-size: 1.5rem;
  }

  .gtnexFlowList {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.1rem;
  }

  /* ABOUT PAGE — TABLET */
  .aboutHero {
    padding-block: 2.4rem 3rem;
  }

  .aboutHeroTitle {
    font-size: 2.5rem;
  }

  .aboutHeroLead {
    font-size: 1rem;
  }

  .aboutSection {
    padding-block: 4rem 4.4rem;
  }

  .aboutInfoRow {
    grid-template-columns: 10rem 1fr;
    gap: 0.4rem 2rem;
    padding-block: 1.1rem;
  }

  .aboutInfoLabel {
    font-size: 0.92rem;
  }

  .aboutInfoValue {
    font-size: 1rem;
  }

  .aboutProductGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.6rem;
  }

  .aboutProductTitle {
    font-size: 1.3rem;
  }

  /* CONTACT — TABLET */
  .contactProductGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.6rem;
  }

  .contactProductCardWide {
    grid-column: 1 / -1;
  }

  .contactFormGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.4rem 1.6rem;
  }

  .contactForm {
    padding: 2.2rem 2rem 2.4rem;
  }
}