/* Keep every benefit compact on phones, without full-size scenes. */
@media (max-width:700px) {
  .benefits {
    grid-template-columns:1fr;
    padding:0;
  }
  .benefit {
    display:grid;
    grid-template-columns:138px minmax(0,1fr);
    align-items:center;
    column-gap:18px;
    padding:14px 0;
  }
  .benefit + .benefit { border-left:0; border-top:1px solid #d9dfd6; }
  .benefit-scene {
    width:138px;
    max-width:none;
    height:116px;
    margin:0;
  }
  .benefit .benefit-copy,
  .benefit:first-child .benefit-copy {
    width:auto;
    max-width:none;
    margin:0;
    padding:0;
  }
  .benefit-number {
    position:static;
    display:block;
    margin:0 0 6px;
    font-size:8px;
  }
  .benefit h2 { font-size:21px; line-height:1.12; letter-spacing:-.65px; margin:0 0 8px; }
  .benefit-copy p { font-size:12px; line-height:1.5; max-width:350px; }
  .scene-caption,
  .collaborators { display:none; }

  /* The sketch stays legible; its color controls retain 44px touch targets. */
  .custom-scene { height:124px; align-items:flex-start; }
  .design-sketch { width:138px; height:77px; border-radius:4px; flex-shrink:0; }
  .sketch-nav { font-size:7px; padding:6px 7px; }
  .sketch-body { padding:7px; height:54px; }
  .sketch-kicker { font-size:4px; margin-bottom:3px; }
  .sketch-body > strong { font-size:18px; letter-spacing:-.7px; }
  .sketch-cta { display:none; }
  .sketch-art { right:10px; top:7px; width:45px; height:40px; }
  .sketch-art i { width:32px; height:38px; }
  .sketch-art b { width:26px; height:26px; bottom:0; }
  .sketch-art > span { width:19px; height:19px; left:12px; top:6px; }
  .style-tools {
    left:3px;
    top:auto;
    bottom:0;
    width:132px;
    height:44px;
    padding:0;
    gap:0;
    border:0;
    background:transparent;
    box-shadow:none;
  }
  .style-tools > span { display:none; }
  .benefits .style-swatch {
    width:44px;
    height:44px;
    min-width:44px;
    border:0;
    border-radius:5px;
    background:transparent;
  }
  .style-swatch::before {
    content:'';
    position:absolute;
    inset:11px;
    background:var(--swatch-color);
    border:2px solid #f7f8f4;
    border-radius:50%;
  }
  .swatch-green { --swatch-color:#d6f078; }
  .swatch-lilac { --swatch-color:#d9c5f5; }
  .swatch-peach { --swatch-color:#f6c6a9; }
  .style-swatch[aria-pressed=true] { outline:none; }
  .style-swatch[aria-pressed=true]::before { outline:1px solid #596c49; outline-offset:1px; }
  .style-swatch[aria-pressed=true]::after { font-size:9px; }
  .benefits .style-swatch:focus-visible { outline:2px solid #537c18; outline-offset:0; }
  .maker-pointer { right:2px; top:50px; }
  .maker-pointer svg { width:12px; height:15px; }
  .maker-pointer > span { font-size:6px; padding:3px 5px; margin-top:9px; margin-left:-2px; }

  /* A miniature search result, with the rankings caveat still visible. */
  .search-window { width:138px; max-width:none; height:91px; margin-bottom:25px; border-radius:4px; }
  .search-toolbar { padding:6px; gap:5px; }
  .search-wordmark { font-size:9px; letter-spacing:-.4px; }
  .search-query { font-size:4.5px; padding:5px; gap:3px; min-width:0; }
  .search-query svg { width:7px; height:7px; }
  .search-result { padding:7px; }
  .search-identity { gap:4px; margin-bottom:6px; }
  .result-favicon { width:18px; height:18px; font-size:11px; flex-shrink:0; }
  .search-identity b { font-size:7px; }
  .search-identity small { font-size:5px; margin-top:2px; }
  .search-star { font-size:12px; }
  .search-result > strong { font-size:8px; line-height:1.3; margin:0; letter-spacing:-.1px; }
  .search-description,
  .search-links,
  .result-ghost { display:none; }
  .search-note { bottom:0; width:138px; font-size:9px; line-height:1.3; text-align:center; color:#657456; }

  /* The domain remains an actual link, rather than a decorative tiny button. */
  .domain-control { width:136px; height:48px; min-height:48px; margin:0 0 27px; padding:5px; gap:4px; border-radius:5px; }
  .domain-prefix { font-size:11px; letter-spacing:-.35px; }
  .com-key { width:38px; height:34px; flex:0 0 38px; font-size:18px; letter-spacing:-.5px; }
  .domain-orbit { width:136px; height:76px; top:8px; }
  .orbit-two { width:105px; height:105px; top:-7px; }
  .domain-stamp { position:absolute; top:75px; margin:0; gap:3px; font-size:7px; }
  .domain-stamp svg { width:11px; height:11px; }
  .domain-detail { bottom:0; width:138px; text-align:center; font-size:9px; line-height:1.3; color:#657456; }
  .library-bridge { margin-bottom:28px; padding-top:17px; }

  /* The planned product remains a small illustration beside its disclosure. */
  .dashboard-scene { height:112px; }
  .dashboard-scene img { width:138px; max-width:100%; border-radius:4px; box-shadow:0 5px 12px #17211a06; }
  .benefit-dashboard .dashboard-status { margin-top:8px; font-size:10px; line-height:1.4; }
  .dashboard-preview-link { font-size:11px; min-height:44px; gap:5px; }
  .dashboard-preview-link svg { width:12px; height:12px; }
}

@media (min-width:431px) and (max-width:700px) {
  .benefit { column-gap:26px; padding:16px 0; }
  .benefit h2 { font-size:23px; }
  .benefit-copy p { font-size:13px; }
}

@media (max-width:350px) {
  .benefit { column-gap:12px; }
  .benefit h2 { font-size:19px; letter-spacing:-.5px; }
  .benefit-copy p { font-size:11px; }
}

/* A small two-by-two overview keeps all four ideas close together. */
@media (max-width:700px) {
  .benefits { grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:18px; }
  .benefit { display:flex; flex-direction:column; align-items:stretch; gap:12px; padding:16px 0; }
  .benefit + .benefit { border:0; }
  .benefit:nth-child(n+3) { border-top:1px solid #d9dfd6; }
  .benefit-scene { align-self:center; width:100%; max-width:138px; height:124px; margin:0; }
  .custom-scene { height:124px; }
  .design-sketch { width:100%; max-width:138px; }
  .style-tools { left:0; }
  .search-window { width:100%; max-width:138px; margin-bottom:30px; }
  .search-note { left:0; font-size:10px; line-height:1.35; white-space:normal; }
  .search-note,.domain-detail { width:100%; }
  .domain-control { width:100%; max-width:136px; }
  .domain-orbit { max-width:100%; }
  .benefit-number { display:none; }
  .benefit h2 { font-size:18px; line-height:1.18; letter-spacing:-.5px; margin-bottom:8px; }
  .benefit-copy p { font-size:12px; line-height:1.5; }
  .benefit-dashboard .dashboard-status { font-size:11px; line-height:1.45; }
  .dashboard-preview-link { font-size:12px; line-height:1.4; min-height:44px; }
  .dashboard-scene img { width:100%; }
}
@media (min-width:431px) and (max-width:700px) {
  .benefit h2 { font-size:21px; }
  .benefit-copy p { font-size:13px; }
}