/* v32: correct footer stacking, tablet camera stage, and fluid text/cards.
   Applied AFTER all previous styles; original v27 assets remain unmodified. */

/* The legacy `footer .wrap{display:flex}` was overriding the new three-tier footer.
   Block layout gives each row its own full width and leaves dividers unbroken. */
.site-footer .wrap.footer-shell {
  display: block;
  width: min(100%, 1360px);
  max-width: 1360px;
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 48px);
}
.site-footer .footer-social,
.site-footer .footer-grid,
.site-footer .footer-bottom { width: 100%; }
.site-footer .footer-social {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  padding: 0 0 clamp(18px, 2.4vw, 28px);
  margin: 0;
  border-bottom: 1px solid rgba(173,216,230,.22);
}
.site-footer .footer-social .flin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  min-height: 32px;
  padding: 5px;
  border: 1px solid rgba(173,216,230,.2);
  border-radius: 9px;
  background: rgba(173,216,230,.06);
  font-size: 0; /* visual: only the LinkedIn mark; accessible label stays */
}
.site-footer .footer-social .flin .insq { width: 20px; height: 20px; }
.site-footer .footer-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(22px, 3vw, 52px);
  padding-block: clamp(24px, 3.2vw, 42px);
  margin: 0;
}
.site-footer .footer-col { min-width: 0; gap: clamp(10px, 1vw, 15px); }
.site-footer .footer-col h3 { font-size: clamp(.93rem, 1vw, 1.1rem); }
.site-footer .footer-col a,
.site-footer .footer-col span {
  font-size: clamp(.8rem, .87vw, .96rem);
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.site-footer .footer-bottom {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: clamp(18px, 2.5vw, 40px);
  margin: 0;
  padding-top: clamp(16px, 2vw, 25px);
  border-top: 1px solid rgba(173,216,230,.22);
}
.site-footer .footer-bottom .footer-logo img { width: clamp(112px, 10vw, 145px); height: auto; }
.site-footer .footer-legal { display: flex; align-items: center; gap: 14px 28px; }
.site-footer .footer-legal a { font-size: clamp(.85rem, .95vw, 1rem); }

@media (min-width: 641px) and (max-width: 1050px) {
  .site-footer .footer-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px) {
  .site-footer .footer-social { flex-direction: row; align-items: center; }
  .site-footer .footer-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px 15px; }
  .site-footer .footer-col h3 { font-size: .92rem; }
  .site-footer .footer-col a,.site-footer .footer-col span { font-size: clamp(.76rem, 3.3vw, .87rem); }
  .site-footer .footer-bottom { flex-direction: row; flex-wrap: wrap; align-items: center; }
}
@media (max-width: 370px) {
  .site-footer .footer-grid { grid-template-columns: 1fr 1fr; column-gap: 10px; }
  .site-footer .footer-bottom { gap: 12px; }
  .site-footer .footer-legal { gap: 15px; }
}

/* Typography: every major content surface now responds to the actual viewport
   width instead of keeping the desktop's fixed 2–3rem sizes. Body remains legible. */
@media (min-width: 821px) {
  .mission .mrow { grid-template-columns: clamp(120px, 14vw, 200px) minmax(0,1fr); gap: clamp(18px, 2.8vw, 40px); padding: clamp(22px, 3.4vw, 54px); }
  .mission .mrow p { font-size: clamp(1.22rem, 2.05vw, 2.45rem); line-height: 1.32; max-width: 48ch; }
  .mission .eyebrow { font-size: clamp(.68rem, .78vw, .85rem); }
  #features .wrap { grid-template-columns: clamp(150px, 14vw, 200px) minmax(0,1fr); column-gap: clamp(20px, 2.7vw, 40px); }
  #features .f { padding: clamp(14px, 1.7vw, 28px); }
  #features .f.loc { padding: clamp(16px, 2vw, 32px); }
  #features .f h4 { font-size: clamp(1.08rem, 1.55vw, 1.55rem); line-height: 1.15; }
  #features .f.loc h4 { font-size: clamp(1.3rem, 1.8vw, 1.8rem); }
  #features .f p { font-size: clamp(.83rem, 1.03vw, 1.04rem); line-height: 1.5; }
  #features .head h2, #team .head h2, #articles .head h2, section#roadmap .head h2 { font-size: clamp(1.75rem, 2.5vw, 2.8rem); }
  #features .why .devs b { font-size: clamp(1rem, 1.33vw, 1.35rem); }
  #features .why .devs span { font-size: clamp(.8rem, .99vw, .96rem); }
  #roadmap .head { margin-bottom: clamp(16px, 4.2vw, 60px); }
  #team .tnames b { font-size: clamp(.87rem, 1vw, 1rem); }
  #team .tnames .role { font-size: clamp(.75rem, .86vw, .875rem); }
  #contact .contact { padding: clamp(24px, 4vw, 64px) clamp(20px, 3.5vw, 52px); }
  #contact .contact h2 { font-size: clamp(1.85rem, 3.1vw, 3.25rem); }
  #contact .contact p { font-size: clamp(.92rem, 1.15vw, 1.15rem); }
  .cp:not(.hh) h2 { font-size: clamp(2rem, 3.4vw, 4.5rem); }
  .cp:not(.hh) p { font-size: clamp(.95rem, 1.22vw, 1.25rem); }
}

/* Portrait tablets should still stack Mission; this wins over the fluid grid. */
@media (min-width:821px) and (max-width:1080px) and (orientation:portrait) {
  .mission .mrow { grid-template-columns: 1fr; gap: 16px; }
  #features .wrap { display: block; }
  #features .f p { font-size: clamp(.91rem, 1.45vw, 1.02rem); }
  .vis #stg { left: 0; right: 0; width: 100%; margin-inline: auto; }
}
@media (min-width:821px) and (max-width:1280px) {
  .cp:not(.hh) .cw { width: min(100% - 40px, 1080px); }
}
@media (max-width:820px) {
  .mission .mrow { padding: clamp(18px, 4.4vw, 26px); }
  .mission .mrow p { font-size: clamp(1.12rem, 4.5vw, 1.55rem); line-height: 1.38; max-width: 100%; }
  #features .head h2, #team .head h2, #articles .head h2, section#roadmap .head h2 { font-size: clamp(1.75rem, 6.25vw, 2.4rem); }
  #features .f { padding: clamp(16px, 4.5vw, 24px); }
  #features .f h4 { font-size: clamp(1.1rem, 4.7vw, 1.5rem); }
  #features .f p { font-size: clamp(.84rem, 3.55vw, .98rem); }
  #contact .contact { padding: clamp(20px, 5vw, 34px) clamp(16px, 4vw, 26px) !important; }
  #contact .contact h2 { font-size: clamp(1.7rem, 7.2vw, 3rem); }
  #contact .contact p { font-size: clamp(.9rem, 3.55vw, 1.06rem); }
  .site-footer { height: auto; min-height: 0; }
}