/**
 * Shared responsive styles — landing + case studies
 * Loaded after page-specific styles.
 */

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

@media (max-width: 768px) {
  :root {
    --gutter: clamp(16px, 4.5vw, 24px);
  }

  html {
    scroll-padding-top: 52px;
  }

  body {
    overflow-x: clip;
  }

  .wrap {
    padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
    padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
  }
}

/* --- Landing page (index) --- */
@media (max-width: 640px) {
  main#cover-anchor section {
    padding: clamp(40px, 10vw, 64px) 0;
  }

  main#cover-anchor section.cover {
    padding-top: 12px;
    padding-bottom: clamp(40px, 8vw, 56px);
  }

  main#cover-anchor .cover h1 {
    max-width: none;
    font-size: clamp(22px, 6.5vw, 32px);
    line-height: 1.25;
    margin-bottom: 20px;
  }

  main#cover-anchor .cover h1 .em-mark {
    white-space: normal;
  }

  main#cover-anchor .cover .kicker .name {
    font-size: 24px;
  }

  main#cover-anchor .specimen {
    max-width: 100%;
    margin: clamp(24px, 6vw, 40px) auto 0;
  }

  main#cover-anchor .cover .meta-line {
    gap: 0 14px;
    margin-bottom: 22px;
    font-size: 11px;
  }

  main#cover-anchor .cover .meta-line .sep {
    display: none;
  }

  main#cover-anchor .cta-row {
    gap: 10px;
  }

  main#cover-anchor .btn {
    flex: 1 1 calc(50% - 6px);
    justify-content: center;
    min-height: 48px;
    padding: 12px 16px;
    font-size: 13px;
  }

  main#cover-anchor .approach .lede {
    max-width: none;
    font-size: clamp(22px, 6vw, 28px);
  }

  main#cover-anchor .off p.lede {
    max-width: none;
    font-size: clamp(20px, 5.5vw, 26px);
    line-height: 1.4;
  }

  main#cover-anchor .sec-head .title {
    font-size: clamp(24px, 7vw, 32px);
  }

  main#cover-anchor .entry-body {
    padding: 20px 18px;
  }

  main#cover-anchor .entry-body h3 {
    font-size: clamp(20px, 5.5vw, 26px);
  }

  main#cover-anchor .entry-body p {
    max-width: none;
    font-size: 14px;
  }

  main#cover-anchor .entry-body .results {
    gap: 18px 22px;
  }

  main#cover-anchor .entry-body .results .l {
    white-space: normal;
  }

  main#cover-anchor .chapter .who ul,
  main#cover-anchor .chapter .who p {
    max-width: none;
  }

  main#cover-anchor .chapter .who ul li {
    font-size: 14px;
  }

  main#cover-anchor .hi .big {
    max-width: none;
    font-size: clamp(32px, 9vw, 48px);
  }

  main#cover-anchor .hi .lines > span,
  main#cover-anchor .hi .lines > a {
    white-space: normal;
    flex-wrap: wrap;
    font-size: clamp(15px, 4vw, 18px);
    gap: 8px 12px;
  }

  main#cover-anchor .hi .lines .key {
    min-width: 56px;
  }

  main#cover-anchor .brands {
    padding: clamp(40px, 10vw, 64px) 0;
  }

  main#cover-anchor .brands-title {
    max-width: none;
    font-size: clamp(24px, 7vw, 32px);
  }

  main#cover-anchor .brands-sub {
    max-width: none;
  }

  main#cover-anchor .brands-grid img {
    width: 100%;
    height: auto;
  }

  main#cover-anchor .marquee-strip {
    padding: 14px 0;
  }

  main#cover-anchor .marquee-group {
    gap: 18px;
    padding-right: 18px;
    font-size: 11px;
  }

  main#cover-anchor .topbar .inner {
    padding: 10px 0;
    font-size: 10.5px;
    gap: 12px;
  }

  main#cover-anchor .topbar .right {
    gap: 10px 14px;
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  main#cover-anchor #tweaks-root {
    bottom: max(12px, env(safe-area-inset-bottom, 0px));
    right: max(12px, env(safe-area-inset-right, 0px));
  }

  main#cover-anchor .colophon {
    padding: 40px 0 max(28px, env(safe-area-inset-bottom, 0px));
    margin-top: 40px;
  }

  main#cover-anchor .colophon .sig {
    font-size: clamp(48px, 14vw, 120px);
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 40px;
  }

  main#cover-anchor .ribbon .cell {
    padding: 18px 0;
  }

  main#cover-anchor .kit .list {
    gap: 8px 12px;
    font-size: clamp(13px, 3.5vw, 16px);
  }

  main#cover-anchor .testimonial blockquote {
    padding-left: 14px;
    font-size: 15px;
  }

  main#cover-anchor .note p {
    max-width: none;
  }
}

@media (max-width: 480px) {
  main#cover-anchor .btn {
    flex: 1 1 100%;
  }

  main#cover-anchor .cta-row {
    flex-direction: column;
  }
}

/* --- Case studies --- */
@media (max-width: 640px) {
  header.topbar .inner {
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 0;
  }

  header.topbar .crumbs {
    flex-wrap: wrap;
    font-size: 10.5px;
    line-height: 1.5;
  }

  main.wrap .hero {
    padding: clamp(32px, 8vw, 48px) 0 clamp(24px, 5vw, 36px);
  }

  main.wrap .hero h1 {
    font-size: clamp(32px, 9vw, 48px);
    margin-bottom: 18px;
  }

  main.wrap .hero .lede {
    font-size: clamp(16px, 4.2vw, 18px);
    max-width: none;
  }

  main.wrap .hero .eyebrow {
    gap: 0 12px;
    font-size: 11px;
  }

  main.wrap .stats-strip,
  main.wrap .meta-strip {
    grid-template-columns: 1fr 1fr;
    margin-bottom: clamp(32px, 6vw, 48px);
  }

  main.wrap .stats-strip .cell,
  main.wrap .meta-strip .cell {
    padding: 16px 12px;
  }

  main.wrap .stats-strip .cell:first-child {
    padding-left: 12px;
  }

  main.wrap .stats-strip .cell .l,
  main.wrap .stats-strip .cell .k + .l {
    white-space: nowrap;
  }

  main.wrap .section {
    padding: clamp(36px, 8vw, 48px) 0;
  }

  main.wrap .section .rail {
    position: static;
    padding-bottom: 4px;
  }

  main.wrap .section h2 {
    font-size: clamp(22px, 6vw, 28px);
    max-width: none;
  }

  main.wrap .section h3 {
    font-size: clamp(18px, 5vw, 22px);
  }

  main.wrap .section p,
  main.wrap .section .lede-tight {
    max-width: none;
    font-size: 15px;
  }

  main.wrap .opener {
    padding: clamp(40px, 10vw, 64px) 0 clamp(24px, 5vw, 36px);
  }

  main.wrap .opener .title {
    max-width: none;
    font-size: clamp(28px, 7vw, 40px);
  }

  main.wrap .opener .sub {
    max-width: none;
    font-size: 15px;
  }

  main.wrap .opener .num-big {
    font-size: clamp(56px, 18vw, 96px);
  }

  main.wrap .opener .row {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  main.wrap .cover-plate {
    margin-bottom: clamp(32px, 6vw, 48px);
  }

  main.wrap .cover-plate .cover-img {
    max-width: 100%;
    height: auto;
  }

  main.wrap .feature-story .desc,
  main.wrap .feature-story .why p {
    max-width: none;
  }

  main.wrap .feature-story .summary,
  main.wrap .feature-story .why {
    padding-left: 16px;
    padding-right: 16px;
  }

  main.wrap .outcome-grid .col .quote,
  main.wrap .outcome-grid .col .label {
    max-width: none;
    white-space: normal;
  }

  main.wrap .reflection {
    grid-template-columns: 1fr;
  }

  main.wrap .reflection .r {
    padding: 18px 16px 20px;
  }

  main.wrap .bet-body,
  main.wrap .bet-diag {
    gap: 16px;
  }

  main.wrap .pager {
    padding: clamp(36px, 8vw, 48px) 0 clamp(24px, 5vw, 32px);
  }

  main.wrap .pager .ttl {
    font-size: clamp(20px, 5.5vw, 24px);
  }

  main.wrap .foot {
    flex-direction: column;
    align-items: flex-start;
    padding-bottom: max(32px, env(safe-area-inset-bottom, 0px));
  }
}

@media (max-width: 480px) {
  main.wrap .stats-strip,
  main.wrap .meta-strip {
    grid-template-columns: 1fr;
  }

  main.wrap .apps-row {
    grid-template-columns: 1fr;
  }

  main.wrap .constraints {
    grid-template-columns: 1fr;
  }

  main.wrap .flow {
    grid-template-columns: 1fr;
  }

  main.wrap .loop {
    grid-template-columns: 1fr;
  }

  main.wrap .mobile-strip {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  main.wrap .console-zones .legend ol {
    grid-template-columns: 1fr;
  }

  main.wrap .proto-flow .row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  main.wrap .proto-flow .step:nth-child(n) {
    grid-column: auto;
    grid-row: auto;
  }

  main.wrap .proto-flow .step::after {
    content: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  main#cover-anchor .marquee-track,
  main#cover-anchor .off-carousel-track {
    animation: none !important;
    transform: none !important;
  }
}