/* ==========================================================================
   floom-phone-type.css — the phone's type scale
   --------------------------------------------------------------------------
   On a phone (≤760) the site sets its words in four sizes, and only four.
   They are powers of the golden ratio from a 12.41px base, the ladder's 12:
   each step is √φ (1.272×) the one below it and every second step is exactly
   φ (1.618×), so a page title stands φ over its lede and a section heading φ
   over the eyebrow that names it.

       12.41 × φ^1.5  25.55   the page's title (h1), a display figure
       12.41 × φ      20.08   a section's heading (h2)
       12.41 × √φ     15.79   a sub-heading, a card's title, a lede, running text
       12.41          12.41   the base: eyebrows, labels, buttons, links, a
                              card's description, captions, notes, the menu's
                              small print and the footer

   Before this the phone ran twenty-odd sizes between 10.5 and 28.81, most of
   them a component's desktop size left to fall where it fell — the clutter
   was as much in the sizes as in the parts.

   Every rule below is a phone override of a component's own size, collected
   here so the phone has one scale and one place to change it. That is also
   why this sheet loads last on every page: each selector repeats its
   component's own, and order settles the tie. What keeps its own size:
   pictures of the product (windows, scenes, mock data — screens drawn at a
   scale, not the page's type), the wordmarks, the logo placeholders, and form
   fields, which stay at 17.81 so a phone's keyboard does not zoom the page
   (floom-request.css).
   ========================================================================== */

@media (max-width: 760px){
  :root{
    --fl-ph-display: 25.55px;
    --fl-ph-head:    20.08px;
    --fl-ph-text:    15.79px;
    --fl-ph-base:    12.41px;

    /* the hierarchy tokens (floom-theme.css) fold onto the four: title 2 and
       title 3 meet at the text step, and the house heading follows title 1 */
    --fl-t-display: var(--fl-ph-display);
    --fl-t-title1:  var(--fl-ph-head);
    --fl-t-title2:  var(--fl-ph-text);
    --fl-t-title3:  var(--fl-ph-text);
    --fl-t-lede:    var(--fl-ph-text);
  }
  .pp{ --pp-copy: var(--fl-ph-text); }

  /* ── 20.08 · a section's heading ─────────────────────────────────────── */
  .mo-copy h2,
  .rs-feature-t,
  .ft-askai-title,
  .pp-h2,                       /* a section's h2 on title 2 — stays a heading */
  .content-section h2{          /* careers, support */
    font-size: var(--fl-ph-head);
  }

  /* ── 15.79 · sub-heading, card title, lede, running text ─────────────── */
  .st-tile h3,
  .ft-soc-copy h2,
  .rs-card-t,
  .job-title,
  .ap-hero-sub,
  .ff-copy,
  .cta-body p,
  .page-hero .subtitle,
  .content-section p,
  .content-section li,
  .mega-item .t,
  .nv-trigger,
  .nav-links a{
    font-size: var(--fl-ph-text);
  }

  /* ── 12.41 · the base ─────────────────────────────────────────────────── */
  /* names and labels */
  .ap-eyebrow,
  .st-head .ap-eyebrow,
  .pp-eyebrow,
  .cl-line,
  .section-label,
  .job-section-title,
  .job-tag, .post-tag, .meta-tag,
  .rq-f > label,
  .st-step .n,
  .pp-card-k .pp-flag,
  .rs-kind,
  .rs-thumb-k, .rs-thumb-n,
  .rs-sec-head .pp-h2 .rs-n,
  .mega-label,
  .ft-title,
  /* actions */
  .ap-btn,
  .ap-ctl,
  .nav .ap-nav-cta,
  .nav .ap-nav-menu,
  .btn,
  .st-link,
  .prod-cta,
  .pp-card-go,
  .pp-link,
  .rs-go,
  .rs-jump,
  .mcp-chip,
  .ai-logo,
  .pp-step-link,
  /* a card's description, captions, notes, meta */
  .prod-line,
  .prod-desc,
  .prod-note,
  .st-step p,
  .ai-search-mcp-label,
  .rq-alert,
  .ed-meta-v,
  .ed-meta-n,
  .ed-copy p.ed-note,
  .ed-tile-d,
  .ed-points p,
  .ed-stat-c,
  .pp-card-d,
  .rs-card-d,
  .job-list li,
  .page-hero .meta,
  .mega-item .d,
  .mega-foot,
  /* the footer */
  .ft-desc,
  .ft-col a,
  .ft-askai-sub,
  .ft-soc-copy p,
  .ft-bottom{
    font-size: var(--fl-ph-base);
  }

  /* ── the controls that carry it: one height ─────────────────────────────
     Every button, field and tap control stands 44, the HIG's touch minimum,
     so a base-step label sits in the same box everywhere. Before, one button
     was 42 on a product page (its label roll stands down under 480 and takes
     body leading), 44 on the home page and 48 in the request form; the form's
     fields were 48 and the carousel arrows 40. */
  .ap-btn,
  .rq-send,
  .mcp-chip,
  .ai-logo{
    min-height: 44px;
  }
  .rq-form .rq-in,
  .rs-search input{ box-sizing: border-box; height: 44px; }
  .pp-car-arrow{ width: 44px; height: 44px; }
}