/* The same page, with a deliberate phone layout and comfortable touch targets. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
@media (max-width: 1100px) {
  .wrap {
    --page-gutter: max(24px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
    width: calc(100% - var(--page-gutter) * 2);
  }
  .site-header-inner.wrap {
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
  }
  .site-header-inner > nav {
    gap: 14px;
  }
  html[data-palette] .site-header .button[data-open-setup] {
    min-height: 44px;
    padding: 10px 18px;
  }
  .site-header nav > .agent-docs-link {
    min-height: 44px;
  }
  .site-header .brand {
    min-width: 44px;
    min-height: 44px;
  }
  .circle-tabs {
    gap: 4px;
  }
  .circle-tabs button {
    min-width: 44px;
    min-height: 44px;
    padding: 10px 9px;
    font-size: 0.875rem;
    line-height: 1.4;
  }
  .contact-request > p {
    font-size: 0.875rem;
    line-height: 1.45;
  }
  .contact-request > span {
    font-size: 0.75rem;
  }
  .compatible-agent > p {
    font-size: 0.875rem;
  }
  .capability-visual {
    overflow: visible;
  }
  .capability-card {
    overflow: hidden;
  }
}
@media (max-width: 700px) {
  html {
    scroll-padding-top: calc(76px + env(safe-area-inset-top, 0px));
  }
  .wrap {
    --page-gutter: max(16px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
    width: calc(100% - var(--page-gutter) * 2);
  }
  .site-header-inner.wrap {
    min-height: 60px;
    flex-wrap: nowrap;
    gap: 12px;
    padding-block: 8px;
  }
  .site-header-inner > nav {
    gap: 12px;
    min-width: 0;
  }
  .launch {
    padding-top: 18px;
    padding-bottom: 0;
  }
  .launch-intro {
    width: 100%;
    row-gap: 36px;
    margin-bottom: 24px;
  }
  .launch-intro .hero-title-cluster {
    padding-top: 32px;
  }
  .launch-intro h1 {
    font-size: clamp(2.25rem, 9.8vw, 3.5rem);
    line-height: 1.08;
    letter-spacing: -0.055em;
  }
  .hero-cta-cluster.hero-prompt-cluster {
    width: 100%;
  }
  .hero-setup-card {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "heading" "prompt" "action";
    gap: 10px;
    padding: 20px;
    border-radius: 18px;
  }
  .hero-prompt-cluster .hero-setup-heading {
    font-size: 1rem;
    text-wrap: pretty;
  }
  .hero-prompt-text {
    font-size: 1rem;
    line-height: 1.5;
  }
  .hero-prompt-copy {
    justify-self: start;
    min-height: 44px;
    margin-top: 3px;
    padding: 10px 18px;
    font-size: 0.875rem;
  }
  .hero-prompt-cluster .character-hermes {
    width: 29px;
    left: 21px;
    top: -26px;
    transform: rotate(-8deg);
  }
  .hero-prompt-cluster .character-cue {
    width: 29px;
    right: 20px;
    top: -24px;
  }
  .network-loop {
    margin-top: 0;
    scroll-margin-top: 76px;
  }
  .capabilities {
    padding-top: 56px;
  }
  .capabilities-heading {
    margin-bottom: 28px;
  }
  .capabilities-heading h2 {
    font-size: clamp(2rem, 8.3vw, 2.65rem);
    line-height: 1.1;
    letter-spacing: -0.045em;
  }
  .distribution-card {
    padding: 26px 22px 22px;
    gap: 20px;
    border-radius: 22px;
  }
  .distribution-copy h3 {
    font-size: clamp(2rem, 8vw, 2.5rem);
    line-height: 1.12;
    letter-spacing: -0.035em;
  }
  .distribution-copy > p {
    font-size: 1rem;
    line-height: 1.55;
    margin-top: 16px;
  }
  .opportunity-network.is-narrow .lead-receiver-label {
    font-size: 0.875rem;
  }
  .opportunity-network.is-narrow .lead-receiver-label > span {
    font-size: 0.75rem;
  }
  .capability-grid {
    gap: 16px;
    margin-top: 16px;
  }
  .capability-card {
    border-radius: 22px;
  }
  .capability-visual {
    padding: 24px 22px;
    min-height: 300px;
  }
  .capability-visual.contacts-visual {
    padding-block: 24px;
  }
  .capability-copy {
    padding: 24px;
  }
  .capability-copy h3 {
    font-size: 1.5rem;
    line-height: 1.2;
  }
  .capability-copy > p {
    margin-top: 12px;
    font-size: 1rem;
    line-height: 1.55;
  }
  .agency-conversation {
    gap: 24px;
  }
  .scene-bubble {
    padding: 13px 14px;
    font-size: 1rem;
    line-height: 1.45;
  }
  .speaker-message--human {
    margin-left: 0;
  }
  .speaker-message--agent {
    margin-right: 0;
  }
  .compatible-agents {
    gap: 24px 12px;
    max-width: 320px;
  }
  .compatible-agent > p {
    margin-top: 10px;
  }
  .connection-section {
    padding-block: 32px 40px;
  }
  .connection-panel {
    min-height: 0;
    border-radius: 22px;
    place-items: start center;
  }
  .connection-panel-copy {
    width: 100%;
    gap: 20px;
    padding: 32px 22px calc(33.333% + 16px);
  }
  .connection-panel-art {
    inset: auto 0 0;
    width: 100%;
    height: auto;
    object-fit: contain;
    mask-image: linear-gradient(to bottom, transparent, #000 25%);
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 25%);
  }
  .connection-section .connection-panel h2 {
    max-width: 330px;
    font-size: clamp(1.75rem, 7.7vw, 2.15rem);
    line-height: 1.15;
    letter-spacing: -0.035em;
  }
  .connection-panel-mark {
    width: 52px;
    height: 52px;
    border-radius: 16px;
  }
  .connection-panel-mark::before {
    width: 31px;
    height: 31px;
  }
  html[data-palette] .connection-panel .button[data-open-setup] {
    min-height: 44px;
    padding: 10px 20px;
  }
  .site-footer {
    padding-top: 20px;
    padding-bottom: max(24px, env(safe-area-inset-bottom, 0px));
    justify-content: center;
  }
  html[data-palette] .site-footer .brand {
    --brand-mark-size: 24px;
    min-height: 44px;
    font-size: 24px;
    gap: 8px;
  }
  .site-footer .brand img {
    width: 24px;
    height: 24px;
  }
  .setup-dialog {
    width: calc(100% - 32px);
    max-height: calc(
      100dvh -
      max(16px, env(safe-area-inset-top, 0px)) -
      max(16px, env(safe-area-inset-bottom, 0px))
    );
    padding: 24px 20px 20px;
    border-radius: 22px;
  }
  .setup-dialog h2 {
    font-size: 1.4rem;
    line-height: 1.2;
    letter-spacing: -0.025em;
  }
  .setup-dialog p.setup-description {
    font-size: 1rem;
    line-height: 1.5;
  }
  .setup-dialog p.setup-prompt {
    font-size: 1rem;
    line-height: 1.5;
    padding: 14px;
  }
  html[data-palette] .setup-dialog .button.setup-copy {
    min-height: 44px;
    padding: 10px 20px;
  }
  .palette-compare .palette-preview-choices button {
    min-height: 44px;
    padding: 10px 12px;
    font-size: 0.875rem;
  }
  .palette-compare .palette-preview-close {
    min-width: 44px;
    min-height: 44px;
  }
}
@media (max-width: 370px) {
  .site-header .brand-name {
    display: none;
  }
  html[data-palette] .site-header .brand {
    gap: 0;
  }
  html[data-palette] .site-header .button[data-open-setup] {
    padding-inline: 16px;
  }
  .hero-setup-card {
    padding: 18px;
  }
  .distribution-card {
    padding-inline: 18px;
  }
  .capability-visual {
    padding-inline: 18px;
  }
  .capability-copy {
    padding-inline: 22px;
  }
  .message-agent {
    width: 38px;
    height: 38px;
  }
  .message-human {
    width: 30px;
    height: 30px;
  }
  .speaker-message {
    gap: 8px;
  }
  .scene-bubble {
    padding: 12px;
  }
}
@media (pointer: coarse) {
  .circle-tabs button {
    min-width: 44px;
    min-height: 44px;
  }
  .palette-preview-close {
    min-width: 44px;
    min-height: 44px;
  }
}