/* cg-help v1 (10/8/2026): sitewide "Looking for help setting this up?" strip. One HtmlEmbed, placed as the first
   child of the Footer component (footer.footer2_component), so it sits directly above the footer on every page.
   Quiet by design: one line on desktop, two fixed lines on phone, so swapping the text never changes the height.
   Hidden on es-MX and fr-CA until their strings exist (the inline script in the embed sets data-on). */

.cg-help{box-sizing:border-box;display:none;width:100%;margin:0;padding:10px 5%;background:#F8FAFC;border-top:1px solid #E2E8F0;
  font-family:Inter,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
.cg-help[data-on="1"]{display:block}
.cg-help *,.cg-help *::before,.cg-help *::after{box-sizing:border-box}
.cg-help .cg-help-in{max-width:80rem;margin:0 auto;display:flex;align-items:center;gap:4px 12px;min-height:44px}
.cg-help .cg-help-ic{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:#EEF2FB;color:#345ED1}
.cg-help .cg-help-ic svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cg-help .cg-help-t{flex:1;min-width:0;display:flex;align-items:center;flex-wrap:nowrap;gap:0 12px;margin:0;padding:0;
  font-size:15px;line-height:1.4;font-weight:400;color:#475569;letter-spacing:0;text-transform:none}
.cg-help .cg-help-q{flex:none;white-space:nowrap}
.cg-help .cg-help-a{display:inline-flex;align-items:center;gap:6px;min-height:44px;min-width:44px;max-width:100%;overflow:hidden;
  color:#345ED1;font-weight:600;text-decoration:none;white-space:nowrap;border-radius:6px}
.cg-help .cg-help-a span{overflow:hidden;text-overflow:ellipsis}
.cg-help .cg-help-a::after{content:"\2192";flex:none;transition:transform .15s ease}
.cg-help .cg-help-a:hover span{text-decoration:underline;text-underline-offset:3px}
.cg-help .cg-help-a:hover::after{transform:translateX(2px)}
.cg-help .cg-help-a:focus-visible{outline:2px solid #345ED1;outline-offset:2px}

/* Phone: question on line 1, link on line 2, always, so the height is the same whatever the text. */
@media (max-width:639px){
  .cg-help{padding:8px 16px}
  .cg-help .cg-help-in{align-items:flex-start}
  .cg-help .cg-help-ic{margin-top:8px}
  .cg-help .cg-help-t{flex-direction:column;align-items:flex-start;padding-top:12px}
  .cg-help .cg-help-q{white-space:normal}
  .cg-help .cg-help-a{min-height:44px}
}
/* Inside the Footer component: the footer has padding-top 80px and its own 1px top border (staging, all breakpoints,
   10/8/2026). With the strip on, the strip sits flush under that border and the 80px moves below it. Browsers without
   :has() keep the footer padding above the strip, which still reads fine. */
.footer2_component:has(.cg-help[data-on="1"]){padding-top:0}
.footer2_component .cg-help{border-top:0;margin-bottom:80px}

@media (prefers-reduced-motion:reduce){.cg-help .cg-help-a::after{transition:none}}
@media print{.cg-help{display:none!important}}