/* ============================================================================
   PHONES - the Labs site on a phone (owner, 2026-10-15: "the phone UI needs to be completely remade ... the labs home
   page, cards, etc. are all past the screen's borders"). Linked LAST on every public page, the server-rendered blog,
   FAQ, answers and archive included, so it holds without fighting page styles.

   Measured on production in phone emulation (360 / 390 / 414 px), the cause was the same everywhere: a one-column grid
   is `1fr`, which cannot shrink below its widest unbreakable line, and the rule values, buttons and the footer line
   never wrap. That held the checkout at 446 px, a price card at 406 px, and the blog pages at 598 px on every phone;
   the rest was cut by the clipped page edge.

   Every rule sits inside a width query: a desktop renders exactly as before.
   ========================================================================== */

/* ---- below 1020 px the side-by-side layouts become one column: a column that can shrink to the screen ---- */
@media (max-width: 1020px) {
  .co-grid { grid-template-columns: minmax(0, 1fr); }
  .pricing-grid, #pricing .pricing-grid--1 { grid-template-columns: minmax(0, 1fr); }
}

/* ---- the second badge on a card (Blueprint: "NEW THIS WEEK" and "BUILT TO ORDER") sat on the first, at every width ---- */
.price-card .badge + .badge { left: auto; right: 30px; }

@media (max-width: 720px) {
  /* ---- everywhere ---- */
  .wrap { padding-left: 20px; padding-right: 20px; }
  .card, .co-flow > *, .co-grid > *, .acct-panes, .acct-pane, .lab-cats, .pricing-grid > * { min-width: 0; }
  /* a rule's value wraps under its label when it is long, instead of pushing the card past the screen */
  .spec li { flex-wrap: wrap; row-gap: 2px; }
  .spec .v, .order .spec .v { white-space: normal; overflow-wrap: anywhere; margin-left: auto; }
  /* a button in the page wraps its words as one centred line of text (its dot inline with the first word), instead of
     splitting into columns around the dot; the header's buttons stay on one line */
  section .btn, .card .btn { display: inline-block; white-space: normal; text-align: center; line-height: 1.35; }
  section .btn .dot, .card .btn .dot { display: inline-block; vertical-align: .12em; margin-right: 9px; }
  section .btn svg, .card .btn svg { display: inline-block; vertical-align: -.15em; }
  .price-card .badge { letter-spacing: 1.2px; padding: 5px 11px; }
  .footer__countries { padding: 18px 20px; gap: 14px; }
  .footer__countries .fc-text { white-space: normal; }
  .footer__countries .fc-flags { flex-basis: 100%; }
  .price-card .badge + .badge { right: 18px; }

  /* ---- home: hero video, the play button clear of the poster's own caption ---- */
  .labs-hero__play { inset: auto 14px 54px auto; margin: 0; width: 56px; height: 56px; }
  .labs-hero__play svg { width: 22px; height: 22px; margin-left: 3px; }

  /* ---- home: experiment tabs, all of them visible, as a grid of full names ---- */
  #pricing .segments { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; max-width: none;
    overflow: visible; border-radius: 20px; gap: 5px; }
  #pricing .segments .seg-glider { display: none; }
  #pricing .segments button { justify-content: flex-start; text-align: left; white-space: normal; line-height: 1.25;
    padding: 10px 12px; min-height: 48px; font-size: 13.5px; border-radius: 15px; }
  #pricing .segments button.is-active { background: var(--ink); color: #fff; }

  /* ---- home: the experiment card ---- */
  .price-card { padding: 30px 20px 22px; }
  .price-card .amount { flex-wrap: wrap; row-gap: 0; }
  .price-card .amount b { font-size: 40px; }
  #pricing .price-card .deal { flex-wrap: wrap; }

  /* ---- home: how it works, the numeral above its title instead of over it ---- */
  .step-card { padding: 26px 22px 24px; }
  .step-card .step-n { position: static; display: block; font-size: 44px; letter-spacing: -2px; margin-bottom: 8px; }
  .step-card p { padding-right: 0; }

  /* ---- checkout, reset, configurator: the step cards and the summary ---- */
  #chrome-hero h1 { font-size: clamp(30px, 8.6vw, 40px); }
  .co { padding-top: 24px; }
  .co-step { padding: 22px 18px 22px; }
  .co-step h3 { font-size: 18.5px; }
  /* signed in: the "Not you? Sign out" link goes under the name instead of running off the card */
  .me-card { flex-wrap: wrap; row-gap: 6px; }
  .me-card > span:nth-child(2) { min-width: 0; flex: 1 1 160px; overflow-wrap: anywhere; }
  .me-card a { order: 3; flex-basis: 100%; margin-left: 62px; }
  /* the faint step numeral is decoration a phone has no room for: it ran into the titles */
  .co-step .ghost { display: none; }
  .order .card { padding: 22px 18px 22px; }
  .order .spec li { flex-wrap: wrap; }
  /* the product name keeps the line; its chip goes under it rather than squeezing it to three lines */
  .o-head { flex-wrap: wrap; row-gap: 8px; }
  .o-head .t { min-width: 0; flex: 1 1 200px; }
  .o-head .chip-dotted { margin-left: 47px; }
  .o-total { flex-wrap: wrap; gap: 4px 12px; }
  .o-total .v { white-space: normal; font-size: 27px; margin-left: auto; }
  /* the platform tips open as a sheet at the bottom of the screen, never off its edge */
  .wp .tipbox { position: fixed; left: 16px; right: 16px; bottom: 96px; top: auto; width: auto; transform: translateY(8px); z-index: 60; }
  .wp:hover .tipbox, .wp .tipbox:hover { transform: none; }
  .wp .tipbox::after, .wp .tipbox::before { display: none; }

  /* ---- configurator: the sliders' end labels stay inside the card ---- */
  .bp-slider { padding-left: 6px; padding-right: 6px; }
  .bp-ticks { left: 6px; right: 6px; }

  /* the sticky bar (configurator, checkout) clears the phone's own bottom bar */
  .bp-bar { padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
}