/* v34: full-screen phone Articles, fluid Mission, tablet captions and scroll.
   The original v27 site source remains untouched. Loaded after all other CSS. */

/* Captions were 100% tall PLUS padding in the inherited content-box model.
   That pushed Scan / Verify / Document copy past the bottom of the viewport. */
.caps .cp .cw {
  box-sizing: border-box;
  min-height: 0;
}

/* Mission text must adapt to BOTH dimensions, especially a small browser window. */
@media (max-width: 1280px) {
  .mission .mrow {
    box-sizing: border-box;
    max-width: 100%;
    min-width: 0;
    align-items: start;
    gap: clamp(11px, min(2.2vw, 2.5svh), 26px);
    padding: clamp(15px, min(3vw, 3svh), 35px);
    border-radius: clamp(17px, 2.4vw, 28px);
  }
  .mission .mrow p {
    min-width: 0;
    max-width: none;
    margin: 0;
    overflow-wrap: break-word;
    font-size: clamp(1rem, min(2.35vw, 3.3svh), 1.85rem);
    line-height: 1.29;
    text-wrap: pretty;
  }
  .mission .eyebrow { margin: 0; }
}

/* Tablets: native scroll is deliberate. Sections may be taller than one
   screen, but no scripted intermediate stop should cut through a heading. */
@media (min-width: 821px) and (max-width: 1280px) {
  html.native-scroll {
    scroll-snap-type: none !important;
    overscroll-behavior-y: auto !important;
    scrollbar-width: auto;
    scroll-padding-top: 94px;
  }
  html.native-scroll::-webkit-scrollbar { display: initial; }
  html.native-scroll body {
    touch-action: pan-y !important;
    overscroll-behavior-y: auto !important;
    min-height: 100%;
  }
  html.native-scroll #features,
  html.native-scroll #roadmap,
  html.native-scroll #team,
  html.native-scroll #articles,
  html.native-scroll #contact,
  html.native-scroll .mission {
    height: auto;
    min-height: 100svh;
    scroll-margin-top: 94px;
  }
  .caps .cp:not(.hh) .cw {
    height: 100svh;
    justify-content: flex-end;
    align-items: flex-start;
    padding-top: clamp(86px, 12svh, 132px);
    padding-bottom: clamp(32px, 7.5svh, 76px);
  }
  .caps .cp:not(.hh) .cw > * {
    max-width: min(68ch, 600px);
    margin-left: 0;
    margin-right: 0;
  }
  .caps .cp:not(.hh) h2 { font-size: clamp(2rem, min(4.6vw,5svh), 3.6rem); }
  .caps .cp:not(.hh) p { font-size: clamp(.97rem, min(1.85vw,2.2svh),1.15rem); line-height: 1.38; }
}

/* The narrowest (phone) composition also includes small portrait tablets.
   Keep captions visibly inside the region above the fixed contact bar. */
@media (max-width: 820px) {
  html.m29 #articles {
    box-sizing: border-box;
    height: auto !important;
    min-height: 100svh !important;
    justify-content: center !important;
    padding-top: clamp(96px, 13svh, 130px) !important;
    padding-bottom: calc(38px + env(safe-area-inset-bottom)) !important;
  }
  html.m29 #articles > .wrap { width: 100%; }
  html.m29 #contact {
    box-sizing: border-box;
    min-height: 100svh !important;
    height: auto !important;
    justify-content: center !important;
    padding-top: clamp(90px, 12svh, 118px) !important;
    padding-bottom: 35px !important;
  }
  /* stronger than the v29 !important 'always on' rule */
  html.m29 .mbar.v34-concealed,
  html.m29 .mbar.away.v34-concealed {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(calc(100% + 20px)) !important;
  }
  .mission {
    box-sizing: border-box;
    min-height: 100svh !important;
    padding-top: clamp(82px, 12svh, 112px) !important;
    padding-bottom: calc(22px + var(--bar) + env(safe-area-inset-bottom)) !important;
  }
  .mission > .wrap.mrow {
    width: calc(100% - 32px) !important;
    max-width: 760px;
    margin-inline: auto !important;
    gap: clamp(9px, 1.75svh, 16px);
    padding: clamp(13px, min(4vw, 2.7svh), 26px);
  }
  .mission .mrow p {
    font-size: clamp(.91rem, min(4.7vw, 3.5svh), 1.5rem);
    line-height: 1.25;
    max-width: none;
  }
  .caps .cp:not(.hh) .cw {
    width: calc(100% - 44px);
    height: 100svh;
    justify-content: flex-end;
    padding-top: 82px;
    padding-bottom: calc(var(--bar) + 25px + env(safe-area-inset-bottom));
  }
  .caps .cp:not(.hh) .cw > * {
    max-width: min(100%, 540px);
    margin-left: 0;
    margin-right: 0;
  }
  .caps .cp:not(.hh) h2 { font-size: clamp(1.85rem, min(6vw,5.4svh), 3rem); }
  .caps .cp:not(.hh) p { font-size: clamp(.88rem, min(3.5vw,2.2svh), 1.05rem); line-height:1.38; }
}