/*
 * 5PACE v27 — compact layout for short landscape viewports.
 * Added separately so the original v27 index.html remains byte-for-byte intact.
 * The original wheel section-stepper measures each section's rendered height.
 * When Features exceeds innerHeight it creates an extra scroll stop, so reduce
 * actual content height instead of masking overflowing content or forcing zoom.
 */
@media (min-width: 821px) and (max-height: 900px) {
  /* Reserve the space occupied by the floating fixed navigation. */
  #features {
    min-height: 100svh;
    padding-top: clamp(86px, 10svh, 96px);
    padding-bottom: clamp(15px, 2.5svh, 28px);
  }
  #features .head { padding-top: clamp(14px, 2.2svh, 26px); }
  #features .fg { row-gap: 0; }
  #features .f {
    padding: clamp(16px, 2.2svh, 22px) clamp(18px, 1.65vw, 26px);
  }
  #features .f.loc {
    padding: clamp(16px, 2.2svh, 22px) clamp(20px, 2vw, 30px);
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 20px;
  }
  #features .f.loc svg { width: 54px; height: 54px; }
  #features .f h4 {
    font-size: clamp(1.28rem, 1.65vw, 1.55rem);
    margin: 10px 0 6px;
    line-height: 1.1;
  }
  #features .f.loc h4 { font-size: clamp(1.4rem, 1.85vw, 1.7rem); margin: 7px 0 4px; }
  #features .f p {
    font-size: clamp(.9rem, 1.05vw, .99rem);
    line-height: 1.42;
  }
  /* Putting the icon beside the explanatory text saves a full row of height. */
  #features .why {
    margin-top: clamp(16px, 2.8svh, 26px);
    gap: 26px;
    align-items: start;
  }
  #features .why .devs { gap: clamp(12px, 1.4vw, 20px); }
  #features .why .devs li {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    column-gap: 12px;
    row-gap: 3px;
    align-content: start;
  }
  #features .devs svg {
    grid-row: 1 / 3;
    width: 44px;
    height: 44px;
    padding: 5px;
    margin: 0;
  }
  #features .devs b {
    font-size: clamp(1.05rem, 1.36vw, 1.23rem);
    line-height: 1.2;
  }
  #features .devs span { font-size: clamp(.85rem, .98vw, .93rem); line-height: 1.42; }
  /* Other chapter sections should also fit short laptops where practical. */
  #roadmap { padding-top: 86px; padding-bottom: 24px; }
  #roadmap .head { margin-bottom: clamp(18px, 4svh, 40px); }
  #roadmap .mwrap { width: min(100%, calc((100svh - 185px) * 1200 / 620)); }
  #team { padding-top: 85px; padding-bottom: 30px; }
  #team .tcut { --sh: min(55svh, 490px); }
  #team .head { margin-bottom: 16px; }
  #articles { padding-top: 85px; padding-bottom: 28px; }
  #articles .head { margin-bottom: 22px; }
  #contact { padding-top: 86px; padding-bottom: 26px; }
  #contact .contact { padding: clamp(32px, 6svh, 62px) 24px; }
}

@media (min-width: 821px) and (max-height: 700px) {
  #features { padding-top: 80px; padding-bottom: 14px; }
  #features .f { padding-block: 13px; }
  #features .f.loc { padding-block: 12px; }
  #features .f h4 { font-size: 1.2rem; margin-top: 7px; margin-bottom: 4px; }
  #features .f.loc h4 { font-size: 1.35rem; }
  #features .f p { font-size: .9rem; line-height: 1.34; }
  #features .why { margin-top: 12px; }
  #features .devs svg { width: 38px; height: 38px; }
  #features .why .devs li { grid-template-columns: 38px minmax(0, 1fr); column-gap: 10px; }
  #features .devs b { font-size: 1rem; }
  #features .devs span { font-size: .83rem; line-height: 1.32; }
  #roadmap .mwrap { width: min(100%, calc((100svh - 140px) * 1200 / 620)); }
  #team .tcut { --sh: min(49svh, 420px); }
}

/* Do not shrink typography or touch layout on phones/tablets. */