/*
  Phone layout for themktdpt.com (all pages in public/site).
  Loaded last on every page, so it can tidy the inline layout on small screens
  without touching desktop. Desktop (wider than 760px) is unchanged except for
  the 16px form fields on touch screens.
*/

html{-webkit-text-size-adjust:100%;text-size-adjust:100%}

/* iPhone zooms into any text box under 16px. Keep form fields at 16px on touch screens. */
@media (hover: none), (max-width: 760px){
  input:not([type=checkbox]):not([type=radio]):not([type=file]),select,textarea{font-size:16px!important}
}

@media (max-width: 760px){
  /* Header: logo and Start free on one row, menu links in a swipeable row under them. */
  header > div{gap:6px 12px!important;padding:10px 16px 0!important}
  header > div > a:first-child img{height:34px!important}
  header > div > div:last-child{margin-left:auto;gap:6px!important}
  header > div > div:last-child .navlink{padding:12px 8px}
  header > div > div:last-child .btn{min-height:44px;padding:0 16px;font-size:15px}
  header nav[aria-label="Main"]{
    order:3;flex:1 0 100%!important;flex-wrap:nowrap!important;gap:2px!important;
    overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch;
    margin:0 -16px;padding:0 10px 2px;
    -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent);
            mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent)
  }
  header nav[aria-label="Main"]::-webkit-scrollbar{display:none}
  header nav[aria-label="Main"] .navlink{white-space:nowrap;padding:12px 8px;font-size:15px}
  header nav[aria-label="Main"] .navlink:last-child{margin-right:24px}

  /* Feature pages: the "01 Campaigns ... 08 Market signals" row also swipes sideways. */
  nav[aria-label="App features"] > div{
    flex-wrap:nowrap!important;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;
    padding:10px 16px!important;gap:6px!important
  }
  nav[aria-label="App features"] > div::-webkit-scrollbar{display:none}
  nav[aria-label="App features"] .chip{white-space:nowrap;flex-shrink:0}

  /* Less dead air between sections on a small screen. */
  [style*="padding: 96px 24px"],[style*="padding: 88px 24px"],[style*="padding: 80px 24px"],
  [style*="padding: 72px 24px"],[style*="padding: 64px 24px"],[style*="padding-top: 72px"]{padding-top:52px!important}
  [style*="padding: 96px 24px;"],[style*="padding: 88px 24px;"],[style*="padding: 80px 24px;"],[style*="padding: 72px 24px;"],
  [style$="padding: 96px 24px"],[style$="padding: 88px 24px"],[style$="padding: 80px 24px"],[style$="padding: 72px 24px"],
  [style*="padding: 72px 24px 64px"],[style*="padding: 64px 24px 96px"],[style*="padding: 24px 24px 88px"],
  [style*="padding: 24px 24px 72px"],[style*="padding-bottom: 72px"]{padding-bottom:52px!important}

  .sec{padding-top:52px!important;padding-bottom:52px!important}

  /* Comparison tables swipe sideways; the row names stay pinned on the left. */
  table.cmp{min-width:560px;font-size:14px}
  table.cmp th,table.cmp td{padding:12px}
  table.cmp tbody th:first-child{position:sticky;left:0;z-index:1;background:#F4EFE6;width:132px;min-width:132px;box-shadow:2px 0 0 #111111}
  table.cmp thead th:first-child{position:sticky;left:0;z-index:1;background:#111111}

  /* Footer links: big enough to tap with a thumb. */
  footer nav{gap:4px 18px!important}
  footer nav a{display:inline-block;padding:10px 0}

  /* Headings fade in as soon as they come on screen, not halfway up it. */
  @supports (animation-timeline: view()){
    .hl{animation-range:entry 0% entry 90%!important}
  }

  /* Example "app screen" score ring: smaller so the score bars beside it fit. */
  [style*="grid-template-columns: 150px minmax(0, 1fr)"]{grid-template-columns:104px minmax(0,1fr)!important;gap:14px!important}
  [style*="width: 150px; height: 150px"]{width:104px!important;height:104px!important}
  [style*="width: 150px; height: 150px"] svg{width:104px;height:104px}
  [style*="width: 150px; height: 150px"] .slab{font-size:34px!important}
  [style*="grid-template-columns: 96px minmax(0, 1fr) 28px"],
  [style*="grid-template-columns: 100px minmax(0, 1fr) 28px"]{grid-template-columns:minmax(0,auto) minmax(24px,1fr) 22px!important;gap:6px!important}
}

@media (max-width: 440px){
  /* Side-by-side boxes that stack on a phone: swap the divider from the side to the bottom. */
  [style*="gap: 0; border: 2px solid #4A4A4A"] > div{border-right:0!important;border-bottom:2px solid #4A4A4A}
  [style*="gap: 0; border: 2px solid #4A4A4A"] > div:last-child{border-bottom:0}
  /* Example scorecard rows: fixed widths for the number columns so labels don't collide. */
  [style*="grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr))"],
  [style*="grid-template-columns: minmax(0, 2.2fr) repeat(3, minmax(0, 1fr))"]{grid-template-columns:minmax(0,1fr) 30px 50px 64px!important;gap:6px!important}
  .mono[style*="grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr))"],
  .mono[style*="grid-template-columns: minmax(0, 2.2fr) repeat(3, minmax(0, 1fr))"] > span{font-size:9px!important;letter-spacing:.02em}
  [style*="grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr))"] > span[style*="padding"],
  [style*="grid-template-columns: minmax(0, 2.2fr) repeat(3, minmax(0, 1fr))"] > span[style*="padding"]{font-size:10px!important;padding:3px 5px!important}
  /* Example project board: lanes keep a readable width and swipe sideways. */
  [style*="grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 14px"],
  [style*="padding: 14px 16px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px"]{
    grid-template-columns:repeat(3,minmax(138px,1fr))!important;overflow-x:auto;scrollbar-width:thin
  }
}

@media (max-width: 400px){
  /* Big headlines step down a size so two-word phrases don't run off the edge. */
  h1.slab{font-size:clamp(34px,10.6vw,42px)!important}
  h2.slab[style*="clamp(3"]{font-size:clamp(28px,8.2vw,32px)!important}
  h2.slab[style*="clamp(4"]{font-size:clamp(32px,10vw,40px)!important}
  /* Slightly slimmer buttons so two fit side by side. */
  section .btn{padding-left:16px;padding-right:16px}
}

@media (max-width: 360px){
  /* Smallest phones: keep logo, Log in and Start free on one row. */
  header > div > a:first-child img{height:28px!important}
  header > div{column-gap:8px!important}
  header > div > div:last-child{gap:2px!important}
  header > div > div:last-child .btn{padding:0 12px}
}