/* cg-mqa v1 (mobile-fix-1010, 10/10/2026): phone fixes from the 10/10 mobile QA sweep of production
   (work/redesign-port-2026-10-07/mobile-qa-1010/REPORT.md). Site settings > Custom code > Head code, as its own <link>
   after the dv2-mobile tags. Every rule is phone/tablet only except P2-3 (the pre-footer locale links, all widths), and each
   is scoped to the element it fixes, so pages without that element are untouched. Selectors start with :root (or html[data-wf-page]) plus one more
   class than the rule they override, because this file loads before the page-level styles and embeds.
   Rollback: delete the <link>. Nothing depends on it. */

/* P1-2. Home sticky nav full-bleed on phones and tablets.
   On Home only, the nav sits inside header.section_home_hero_new > .padding-global (5% side padding), so it was 5% narrower
   than the screen on each side and page content showed beside it while scrolling; the 10/8 home-head rule (staged-0120 P2-8)
   then zeroed its own padding, so the logo and menu button touched the bar's edges. Every other page already has a full-width
   nav with the 5% gutter inside it. Here the bar steps out over the parent padding and puts the same 5% back inside:
   margin and padding percentages resolve against .padding-global's content box (90% of the screen), so 5.5556% of it is
   exactly 5% of the screen (19.6px at 393, 18.8 at 375, 16 at 320), matching the logo position on /brokers and every other page.
   992px and up keeps the 10/8 rule unchanged (logo on the hero edge). All 4 locales share the page id. */
@media (max-width:991px){
  html[data-wf-page="68f6b309fc3c6c05e02ad0da"] .section_home_hero_new>.padding-global>.navbar5_component{width:auto;margin-left:-5.5556%;margin-right:-5.5556%;padding-left:5.5556%;padding-right:5.5556%}
}

/* P2-1 / P2-2. Home logo wall on phones: 4 columns x 4 rows instead of 3 columns with one logo alone on a 6th row, and less
   dead navy below it. Layout only: same logos, same order, same per-logo size ratios (LOGOS-3COL-1009's --cw/--ch), each
   scaled so the widest logo fits its quarter cell. The scale is min(.853, cell / 119): the cell is (90vw - 24px) / 4 =
   22.5vw - 6px wide, so .69 at 393, .66 at 375, .56 at 320; rows are 47px tall at 393 and 38px at 320 (12vw). Desktop and
   tablet logos are untouched (this is phone only).
   The band's bottom padding drops from 44px to 24px and the next section's (cg-ns, same #0A142E navy) top padding from 64px
   to 48px, Home phone only, so the grid and the "Hundreds of carriers" heading read as one band instead of a 150px gap. */
@media (max-width:559px){
  html[data-wf-page="68f6b309fc3c6c05e02ad0da"] .section_logo1 .cg-logowall .logo1_list.logo1_list{gap:6px 8px}
  html[data-wf-page="68f6b309fc3c6c05e02ad0da"] .section_logo1 .cg-logowall .cg-lc.cg-lc{flex:0 0 calc((100% - 24px) / 4);height:clamp(38px,12vw,48px)}
  html[data-wf-page="68f6b309fc3c6c05e02ad0da"] .section_logo1 .cg-logowall .cg-lc .cg-li.cg-li{width:min(calc(var(--cw,96) * .853px),calc(var(--cw,96) * (22.5vw - 6px) / 119));height:min(calc(var(--ch,26) * .853px),calc(var(--ch,26) * (22.5vw - 6px) / 119))}
  html[data-wf-page="68f6b309fc3c6c05e02ad0da"] .section_logo1 .padding-section-small.padding-section-small{padding-bottom:24px}
  html[data-wf-page="68f6b309fc3c6c05e02ad0da"] .section_logo1+.w-embed .cg-ns .netcalm.netcalm{padding-top:48px}
}

/* P2-4. Home TMS card full-bleed on phones: the navy card sat 16-22px in from the screen edges on the light section, leaving
   light strips beside it. At 600px and below it runs edge to edge with square corners; its inner padding is unchanged. */
@media (max-width:600px){
  :root .cg-cov .cov-sec .cov{margin-inline:calc(var(--gut,16px) * -1);border-radius:0;border-left-width:0;border-right-width:0}
  /* WebKit rounds the wrap's 5vw padding to 1/64px but not the negative margin, so the card came out 393.01px wide (1px of
     sideways scroll). The section clips that sliver; clip does not make a scroll container (hidden is the pre-Safari-16 fallback). */
  :root .cg-cov .cov-sec{overflow-x:hidden;overflow-x:clip}
}

/* P2-3. The "En español" locale links above the footer (/brokers, /carriers, /pricing and others) were browser-default black
   text. Styled like the help strip right below them (cg-help v1): Inter, slate label, azul links, 44px tap targets on phones.
   Only the pre-footer instance (section > .padding-global > .container-large > .lla-more); the styled .lla-more inside the
   lla landing-page cards is untouched. All widths (Matt, 10/10 ~12:30 PM CT: style them on desktop too); this is the one
   rule in the file that applies at 992px and up. */
:root section>.padding-global>.container-large>.lla-more{gap:0 20px;padding:20px 0;font-family:Inter,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;font-size:15px;line-height:1.4;-webkit-font-smoothing:antialiased}
:root section>.padding-global>.container-large>.lla-more .lla-morelabel{margin-right:4px;color:#475569;font-weight:600}
:root section>.padding-global>.container-large>.lla-more .lla-morelink{margin-right:0;color:#345ED1;font-weight:500;text-decoration:none}
:root section>.padding-global>.container-large>.lla-more .lla-morelink:hover{text-decoration:underline;text-underline-offset:3px}
:root section>.padding-global>.container-large>.lla-more .lla-morelink:focus-visible{outline:2px solid #345ED1;outline-offset:2px;border-radius:4px}
@media (max-width:639px){
  :root section>.padding-global>.container-large>.lla-more{flex-direction:column;align-items:flex-start;padding:16px 0 12px}
  :root section>.padding-global>.container-large>.lla-more .lla-morelabel{margin:0 0 2px}
  :root section>.padding-global>.container-large>.lla-more .lla-morelink{display:inline-flex;align-items:center;min-height:44px}
}

/* P2-11. /get-started at 320: "See rate benchmarks →" ran past the card and the page scrolled sideways (the label sits in the
   146px text column beside the Meatball, nowrap). On phones the pill may wrap onto a second line inside its column; at 375
   and up it still fits on one line, so nothing changes there. The Meatball column is not touched. */
@media (max-width:479px){
  :root .cg-gs .gs-opt .gs-act{max-width:100%;white-space:normal;text-wrap:balance;border-radius:18px}
}

/* P2-10. /broker-tour demo and signup forms: the phone-country select was 100px wide ("United Sta"). On phones the country
   select and the number stack, each full width. Layout only: no field, name, value or event changes. */
@media (max-width:479px){
  :root #cg-bt-demo .input .hs-fieldtype-intl-phone.hs-input,:root .cg-bts #cg-bts-form .input .hs-fieldtype-intl-phone.hs-input{grid-template-columns:minmax(0,1fr)}
}

/* P3-6. /broker-tour at 320: "$5,558" ran past the rate card. The three figures share the row equally (minmax(0,1fr), so a
   long figure can no longer widen its column) and scale down with the screen below 360px (24.8px as today at 360 and up, 18.6px at 320). */
@media (max-width:359px){
  :root .bt-ratecard .bt-rc-numbers{grid-template-columns:repeat(3,minmax(0,1fr))}
  :root .bt-ratecard .bt-rc-num .bt-rc-val{font-size:min(1.55rem,5.8vw)}
}