/*
 * Plinth landing site, phone layer (owner ruling, 19 Oct 2026). Linked into every page by scripts/site/mobile.ts on each
 * unpack. Everything is inside max-width:767px, so the desktop layout is untouched. mobile.js adds the .m-row, .m-card and
 * .m-ctl classes this styles.
 */
@media (max-width:767px) {
  /* A stack of cards as a row to swipe: snap, a peek of the next card, bled to the screen edge. */
  .m-row {
    display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; grid-template-columns: none !important;
    gap: 12px !important; align-items: stretch !important;
    overflow-x: auto !important; overflow-y: hidden !important;
    margin-inline: calc(-1 * var(--m-l, 0px)) calc(-1 * var(--m-r, 0px)) !important;
    padding: 14px var(--m-r, 0px) 22px var(--m-l, 0px) !important; margin-top: 0 !important; margin-bottom: -10px !important;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--m-l, 0px);
    overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; max-width: none !important;
  }
  .m-row::-webkit-scrollbar { display: none; }
  .m-row > .m-card {
    flex: 0 0 84% !important; width: auto !important; max-width: none !important; min-width: 0 !important; margin: 0 !important;
    box-sizing: border-box; scroll-snap-align: start; scroll-snap-stop: always;
  }
  .m-row:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

  /* Tap targets of at least 44px. Links set inside running text stay inline and are left alone. */
  a, button, [role=button], [role=tab], summary { min-height: 44px; align-content: center; }
  a:where(.px-brand, .pf-logo) { display: inline-flex; align-items: center; }
  .pf-col a, .pf-col button, .categories a { display: flex; align-items: center; }
  .hp-why-link, .lx-link, .qx-all { display: inline-flex; align-items: center; }

  /* The "Questions agents ask" topic tabs: one row of pills to swipe, not three full-width buttons stacked. */
  .qx-tabs {
    display: flex !important; gap: 8px; overflow-x: auto; border: 0 !important; background: none !important; border-radius: 0 !important;
    scrollbar-width: none; padding-bottom: 2px; scroll-snap-type: x proximity;
  }
  .qx-tabs::-webkit-scrollbar { display: none; }
  .qx-tabs button { flex: 0 0 auto; border: 1px solid #1f4938 !important; border-radius: 999px !important; padding: 10px 18px !important; white-space: nowrap; scroll-snap-align: start; }

  .m-ctl { display: flex; align-items: center; gap: 10px; margin: 14px 0 6px; color: var(--m-ink, inherit); }
  .m-count { margin-right: auto; font: 600 13px/1 Arial, sans-serif; letter-spacing: .08em; font-variant-numeric: tabular-nums; }
  .m-btn {
    appearance: none; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    width: 46px; height: 46px; padding: 0; border-radius: 50%; cursor: pointer;
    color: inherit; background: transparent; border: 1.5px solid currentColor;
    transition: opacity .15s, transform .15s; -webkit-tap-highlight-color: transparent;
  }
  .m-btn:active { transform: scale(.94); }
  .m-btn:disabled { opacity: .3; cursor: default; }
  .m-btn:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
  .m-prev svg { transform: scaleX(-1); }
}
@media (max-width:767px) and (prefers-reduced-motion: reduce) {
  .m-btn { transition: none; }
}

/*
 * The feature header, one design on every feature page (owner comp, 26 Oct 2026: "it cant be when i swapped to
 * conversations for eg, the header changes again"). The export already gives all four pages the same two parts under
 * the hero, so this only restyles them; no markup and no behaviour changes.
 *
 *   div.fr-category      the area control: label + select, listing Research & briefs / Conversations / Property media /
 *                        Agent website. The comp draws it as a white rounded bar with a grid mark and a chevron.
 *   the topic row        nav.v19-feature-switcher > .v19-feature-options (buttons, 3 on /features and 4 on /media), or
 *                        .ft-single-topics > p.ft-single-topic where the area has one section (/conversations,
 *                        /websites). The comp draws plain text tabs, the current one dark green over a thick rule,
 *                        all of them sitting on one hairline.
 *
 * An area with a single section keeps its one tab, left aligned on the same hairline, so the header keeps its shape
 * from page to page. Hiding the row instead would change the header's height and drop the hairline on two of the four
 * pages, which is the complaint this answers.
 *
 * Four tabs fit the same one row as three: the row is flex, never scrolls and never wraps, the cells take their text
 * width plus an equal share of what is left, and [data-count="4"] steps the type down so the longest label
 * ("Listing films") still clears 360px, the narrowest common Android width.
 */
@media (max-width:767px) {
  /* Every rule here outranks the export's own `body.ft-feature-theme ...` block, which is also !important: the class
     is repeated to raise specificity rather than relying on which stylesheet the browser read last. */
  html body .fr-category.fr-category.fr-category,
  html body .v19-feature-switcher.v19-feature-switcher.v19-feature-switcher,
  html body .ft-single-topics.ft-single-topics.ft-single-topics {
    box-sizing: border-box !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important;
    border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important;
  }
  html body .fr-category.fr-category.fr-category { display: block !important; padding: 16px 8px 0 !important; margin: 0 !important; }
  html body .v19-feature-switcher.v19-feature-switcher.v19-feature-switcher { padding: 12px 8px 0 !important; margin: 0 0 6px !important; }
  /* .ft-single-topics is both the wrapper and the row, so its space goes above the border box: without this the
     hairline on a one-section page sits lower than on a tabbed one and the header changes height between pages. */
  html body .ft-single-topics.ft-single-topics.ft-single-topics { padding: 0 8px !important; margin: 12px 0 6px !important; }

  /* The two labels stay for a screen reader (one of them names the select on /websites) and leave the comp's layout. */
  html body .ft-theme-label.ft-theme-label.ft-theme-label,
  html body .ft-topics-label.ft-topics-label.ft-topics-label,
  html body .v19-feature-switcher-label.v19-feature-switcher-label.v19-feature-switcher-label {
    display: block !important; position: absolute !important; width: 1px !important; height: 1px !important;
    margin: -1px !important; padding: 0 !important; border: 0 !important; overflow: hidden !important;
    clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important;
  }

  /* The area control. appearance:none drops the browser's own arrow so the comp's chevron can be drawn; tapping still
     opens the native picker, so the select's keyboard handling, focus ring and change handler are untouched. */
  html body .fr-category.fr-category.fr-category select {
    appearance: none !important; -webkit-appearance: none !important;
    display: block !important; width: 100% !important; min-width: 0 !important; box-sizing: border-box !important;
    min-height: 52px !important; padding: 12px 42px 12px 50px !important;
    border: 1px solid #dcdccf !important; border-radius: 12px !important; background-color: #fff !important;
    color: #14281f !important; font: 600 17px/1.3 "Plinth Sans", Arial, sans-serif !important;
    box-shadow: 0 1px 2px #1b3a2e0d !important; text-overflow: ellipsis !important;
    background-repeat: no-repeat, no-repeat !important;
    background-position: left 16px center, right 16px center !important;
    background-size: 20px 20px, 13px 8px !important;
    background-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2316503c' stroke-width='1.7'%3E%3Crect x='1.6' y='1.6' width='6.6' height='6.6' rx='1.6'/%3E%3Crect x='11.8' y='1.6' width='6.6' height='6.6' rx='1.6'/%3E%3Crect x='1.6' y='11.8' width='6.6' height='6.6' rx='1.6'/%3E%3Crect x='11.8' y='11.8' width='6.6' height='6.6' rx='1.6'/%3E%3C/svg%3E"),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 8' fill='none' stroke='%232f4036' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.4 6.5 6.6 12 1.4'/%3E%3C/svg%3E") !important;
  }
  html body .fr-category.fr-category.fr-category select:focus-visible { outline: 2px solid #245b45 !important; outline-offset: 2px !important; }

  /* The topic row: one line, never scrolled, never wrapped, on one hairline the width of the control above. */
  html body .v19-feature-options.v19-feature-options.v19-feature-options,
  html body .ft-single-topics.ft-single-topics.ft-single-topics {
    display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: stretch !important;
    justify-content: flex-start !important; gap: 0 !important; overflow: visible !important;
    border: 0 !important; border-bottom: 1px solid #e3e3d8 !important; border-radius: 0 !important; background: none !important;
  }
  html body .v19-feature-options.v19-feature-options.v19-feature-options { padding-inline: 0 !important; }
  html body .v19-feature-options.v19-feature-options.v19-feature-options button,
  html body .ft-single-topic.ft-single-topic.ft-single-topic {
    display: flex !important; align-items: center !important; justify-content: center !important;
    flex: 1 1 auto !important; min-width: 0 !important; width: auto !important; min-height: 46px !important;
    margin: 0 0 -1px !important; padding: 10px 4px !important;
    border: 0 !important; border-bottom: 3px solid transparent !important; border-radius: 0 !important;
    background: none !important; box-shadow: none !important; text-decoration: none !important;
    color: #67756b !important; font: 500 clamp(13px, 3.9vw, 16px)/1.25 "Plinth Sans", Arial, sans-serif !important;
    letter-spacing: -.01em !important; white-space: nowrap !important; text-align: center !important;
  }
  html body .v19-feature-options.v19-feature-options.v19-feature-options[data-count="4"] button {
    font-size: clamp(11.5px, 3.35vw, 14px) !important; padding-inline: 2px !important;
  }
  html body .v19-feature-options.v19-feature-options.v19-feature-options button[aria-pressed="true"],
  html body .ft-single-topic.ft-single-topic.ft-single-topic {
    color: #0f4433 !important; font-weight: 700 !important; border-bottom-color: #0f4433 !important;
  }
  /* One section means one tab, left aligned, so the row keeps the comp's shape instead of a full width bar. */
  html body .ft-single-topic.ft-single-topic.ft-single-topic { flex: 0 1 auto !important; max-width: 100% !important; }
  html body .v19-feature-options.v19-feature-options.v19-feature-options button:focus-visible { outline: 2px solid #245b45 !important; outline-offset: -3px !important; }
}

/* ------------------------------------------------------------------ "Why we built Plinth", on a phone
   Owner, 27 Oct 2026, on a photograph of his own phone: "Fix the header here either lower font size or dth
   so it's two clean sentences for mobile". It was breaking into three ragged lines:

       Started with one
       agent. Built
       around the work.

   The heading's markup already has a <br> at the sentence boundary; the export hides it (`h2 br{display:none}`,
   and again more specifically for this one) so a desktop can balance the two lines itself. On a phone that
   leaves the break to the wrapper, which has no idea where a sentence ends, and it landed mid-sentence.

   So the phone gets the break back AND a size at which neither sentence has to wrap. Measured on the running
   page: the heading's box is 344.2px at 390 and 317.8px at 360, and at the 38.48px it was set to the two
   sentences measure 398px and 380px, which is why both were wrapping. 8.2vw gives 32.0px at 390 and 29.5px at
   360, where they measure 328px and 302px, leaving 16px spare at each width; the 38px cap means any phone
   from about 464px up keeps exactly the size it has today.

   The break is restored rather than added, so the heading's text is untouched and a screen reader still reads
   one sentence rather than markup that splits it. */
@media (max-width:767px) {
  html .hp .hp-origin .hp-origin-title h2 br { display: inline !important; }
  html .hp .hp-origin .hp-origin-title h2 {
    font-size: min(38px, 8.2vw) !important;
    line-height: 1.12 !important;
    max-width: none !important;
    text-wrap: initial !important;
  }
}