/* Shared shell: the things every page needs and none of them should own a copy of.
   Theme switch, a navigation that survives a phone, a focus ring you can see, and the
   small accessibility details that are invisible until someone needs them. */

:root{ --gc-accent:#3DAA35; --gc-ring:#1E5A18; --gc-sheet:#FFFFFF; }
html[data-theme="dark"], html:not([data-theme="light"]){ }
@media (prefers-color-scheme: dark){ html:not([data-theme="light"]){ --gc-ring:#7FD974; --gc-sheet:#131B26; } }
html[data-theme="dark"]{ --gc-ring:#7FD974; --gc-sheet:#131B26; }

/* focus you can actually see, on everything, without touching the light design */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--gc-ring); outline-offset:2px; border-radius:6px;
}
/* a sticky header must never sit on top of the thing you just tabbed to */
:where(a,button,input,select,textarea,tr,[tabindex]){ scroll-margin-top:96px; }

.gc-skip{position:absolute;left:-9999px;top:0;z-index:1000;background:#0A2A4A;color:#fff;
  padding:12px 18px;border-radius:0 0 10px 0;font:700 13px Inter,sans-serif}
.gc-skip:focus{left:0}

/* the theme switch sits at the end of the navigation, quiet until you want it */
.gc-theme{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
  border-radius:9px;border:1.5px solid rgba(58,85,112,.28);background:transparent;cursor:pointer;
  color:inherit;font-size:15px;line-height:1;padding:0;flex:none}
.gc-theme:hover{border-color:var(--gc-accent);color:var(--gc-accent)}

/* the phone. The desktop navigation is a single row of twelve links, which at 390px is a
   horizontal scrollbar and a clipped word, so below 1000px it becomes a sheet. */
.gc-burger{display:none;align-items:center;justify-content:center;width:44px;height:44px;
  border:1.5px solid rgba(58,85,112,.28);border-radius:11px;background:transparent;cursor:pointer;
  margin-left:auto;flex:none}
.gc-burger span{display:block;width:20px;height:2px;background:currentColor;position:relative}
.gc-burger span:before,.gc-burger span:after{content:"";position:absolute;left:0;width:20px;height:2px;background:currentColor}
.gc-burger span:before{top:-6px} .gc-burger span:after{top:6px}

/* between a phone and a wide desktop the full row of links is too long to sit in one line,
   so it tightens before it breaks */
@media (min-width:1401px) and (max-width:1680px){
  nav{padding-left:22px!important;padding-right:22px!important;gap:16px!important}
  .nav-links{gap:14px!important}
  .nav-links a{font-size:13px!important}
  .nav-cta{padding:9px 14px!important}
}

/* An image never gets to distort. Several of these are square files dropped into boxes with
   both dimensions set, which stretches them; contain keeps the shape, and the photographs
   that are meant to fill their frame crop instead. */
img{object-fit:contain}
.chair-photo-wrap img,.photo img,img.cover{object-fit:cover}

/* Below this the row of links cannot sit on one line, so it becomes a sheet. That is true
   on a tablet as much as a phone; everything else below is by size, not by menu. */
@media (max-width:1400px){
  html,body{overflow-x:hidden}
  nav{padding-left:20px!important;padding-right:20px!important;gap:12px!important}
  .gc-burger{display:flex}
  .nav-links{position:fixed;top:var(--gc-navh,68px);left:0;right:0;bottom:0;z-index:300;
    display:none!important;flex-direction:column;align-items:stretch;gap:0!important;
    padding:10px 0 32px;overflow-y:auto;-webkit-overflow-scrolling:touch;
    background:var(--gc-sheet,#fff);box-shadow:0 24px 60px rgba(0,0,0,.28)}
  html.gc-menu .nav-links{display:flex!important}
  html.gc-menu{overflow:hidden}
  .nav-links>a,.nav-links>span>a{display:block;padding:15px 22px;min-height:48px;font-size:16.5px!important;
    font-weight:700;border-bottom:1px solid rgba(94,123,156,.14)}
  .nav-links>a:active{background:rgba(61,170,53,.10)}
  .nav-links .nav-cta{margin:18px 22px 0;text-align:center;border-bottom:0;border-radius:12px;
    padding:15px 18px!important;font-size:16px!important}
  .gc-clientmenu{display:block!important}
  .gc-clientmenu>div{position:static!important;min-width:0!important;box-shadow:none!important;border:0!important;
    background:transparent!important;padding:0 10px 8px!important}
  /* the switch, the search and the role controls sit together at the foot of the sheet */
  .nav-links>.gc-theme,.nav-links>.gcf-open{margin:14px 22px 0;justify-content:center;min-height:48px}
  .nav-links>.gcf-open{width:calc(100% - 44px)}
  .gcf-lab{display:inline!important}
  button,.chip,.fclear,.cbtn,select,input{min-height:44px}
  /* the hidden master control is a seven pixel dot for the desktop bar; in a full width
     sheet it becomes a green balloon, so it stays out and its label becomes a caption */
  .nav-links>a[aria-hidden="true"]{display:none!important}
  .nav-links>span:not(.gc-clientmenu){display:block;text-align:center;padding:10px 22px 0}
  .nav-links>a[title^="Switch role"]{display:block;text-align:center;font-size:20px!important;
    opacity:.5;padding:12px 22px!important;border-bottom:0}
}

/* A flex item will not shrink below the widest unbreakable thing inside it unless it is told
   it may, which is why a hero with a long tracked out line stayed 433px wide inside a 375px
   phone and clipped its own text. */
@media (max-width:1400px){
  .hero{flex-wrap:wrap}
  .hero>*,.hero-inner,.wrap>*,.bar>*,.fbar>*{min-width:0!important;max-width:100%!important}
  .hero-eyebrow,.eyebrow,.int-chip{white-space:normal!important;overflow-wrap:anywhere}
  .hero h1,.hero-h1{overflow-wrap:break-word}
}

/* tablets: the layout, not the phone layout. Room for two columns and full sized type. */
@media (min-width:761px) and (max-width:1400px){
  .hero{padding-left:40px!important;padding-right:40px!important;padding-top:96px!important}
  .wrap,.foot-note,.hero-inner{padding-left:0;padding-right:0}
  .wrap{padding-left:32px!important;padding-right:32px!important}
  .cards,.grid,.ucs-cards,.agent-grid,.dd-cols,.stats,.stats-bar{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  /* several of these are flex rows the page turns into a column at narrow widths, which on a
     tablet wastes half the screen; two across reads properly */
  .stats,.stats-bar,.hero-stats,.statrow{flex-direction:row!important;flex-wrap:wrap!important}
  .stats>*,.stats-bar>*,.hero-stats>*,.statrow>*{flex:1 1 calc(50% - 14px)!important;min-width:0}
  .hero h1{font-size:clamp(34px,5.2vw,48px)!important}
}

/* phones */
@media (max-width:760px){
  .hero{padding-left:16px!important;padding-right:16px!important;padding-top:86px!important}
  .wrap,.foot-note{padding-left:16px!important;padding-right:16px!important}
  .hero h1,h1{font-size:clamp(27px,7.6vw,38px)!important;letter-spacing:-.8px!important}
  .hero p,.hero-inner p{font-size:15px!important;line-height:1.55!important}
  .hero-icon{height:46px!important}
  .hero-logo{width:min(220px,62vw)!important;height:auto!important}
  .cards,.grid,.ucs-cards,.agent-grid,.dd-cols,.stats,.stats-bar{grid-template-columns:minmax(0,1fr)!important}
  /* a stats row of four on a phone is four screens of scrolling; two across reads fine */
  .stats,.stats-bar{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;
    flex-direction:row!important;flex-wrap:wrap!important}
  .stats>*,.stats-bar>*{flex:1 1 calc(50% - 10px)!important;min-width:0;padding:12px!important}
  table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .gcf-wrap{padding-top:6vh}
  .gcf-panel{max-height:86vh}
}


/* the assistant bubble sits above everything, which is right until the menu is open */
html.gc-menu #cx-bubble,html.gc-menu #cx-panel{display:none!important}

/* the mark alone is not the brand; the wordmark fits at every width we support */
@media (max-width:1400px){
  .nav-wm{display:inline-block!important;font-size:20px!important}
  .nav-logo{height:34px!important;width:auto!important}
}
@media (max-width:420px){ .nav-wm{font-size:18px!important} }

/* nothing on this site needs to move for someone who asked it not to */
@media (prefers-reduced-motion: reduce){
  *,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* every number on a data page lines up in its column */
.stats b,.bstats b,td,th,.stat,.stat b,.num{font-variant-numeric:tabular-nums}

/* ---------- the search panel and the link that carries a view ---------- */
.gcf-open{display:inline-flex;align-items:center;gap:8px;border:1.5px solid rgba(58,85,112,.26);
  border-radius:10px;background:transparent;color:inherit;cursor:pointer;padding:7px 10px;font:600 12.5px Inter,sans-serif;flex:none}
.gcf-open:hover{border-color:var(--gc-accent)}
.gcf-mag{font-size:15px;line-height:1}
.gcf-kbd{font:700 10.5px ui-monospace,SFMono-Regular,Menlo,monospace;opacity:.6;border:1px solid currentColor;
  border-radius:5px;padding:1px 5px}
.gcf-wrap{position:fixed;inset:0;z-index:900;display:none;align-items:flex-start;justify-content:center;
  background:rgba(8,16,28,.46);backdrop-filter:blur(2px);padding:12vh 16px 16px}
.gcf-wrap.on{display:flex}
.gcf-panel{width:min(720px,100%);background:#fff;border-radius:16px;overflow:hidden;
  box-shadow:0 30px 90px rgba(8,20,36,.34);border:1px solid #E2EAF2;display:flex;flex-direction:column;max-height:74vh}
.gcf-in{width:100%;border:0;border-bottom:1px solid #E6EEE6;padding:18px 20px;font:600 16px Inter,sans-serif;
  color:#0A2A4A;background:transparent;outline:none}
.gcf-list{overflow-y:auto;padding:6px 0}
.gcf-group{font:800 10px Inter,sans-serif;letter-spacing:.09em;text-transform:uppercase;color:#7E97B4;padding:10px 20px 5px}
.gcf-row{display:flex;align-items:baseline;gap:12px;padding:9px 20px;text-decoration:none;color:#0A2A4A;min-height:40px}
.gcf-row.on,.gcf-row:hover{background:#EEF5EE}
.gcf-t{font:700 14px Inter,sans-serif;flex:none;max-width:52%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gcf-s{font-size:12px;color:#5E7B9C;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gcf-empty{padding:26px 20px;font-size:13px;color:#5E7B9C;line-height:1.6}
.gcf-empty b{color:#0A2A4A}
.gcf-foot{display:flex;justify-content:space-between;gap:12px;padding:9px 20px;border-top:1px solid #EEF2F6;
  font-size:11px;color:#7E97B4;background:#FAFCFA}
.gcf-toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,16px);z-index:950;opacity:0;
  background:#0A2A4A;color:#fff;padding:12px 18px;border-radius:11px;font:700 13px Inter,sans-serif;
  box-shadow:0 16px 44px rgba(8,20,36,.3);transition:opacity .18s ease-out,transform .18s ease-out}
.gcf-toast.go{opacity:1;transform:translate(-50%,0)}
.gc-copylink{display:inline-flex;align-items:center;gap:7px;border:1.5px solid #D8E4D8;border-radius:20px;
  background:#fff;color:#0A2A4A;padding:8px 14px;font:700 12px Inter,sans-serif;cursor:pointer;min-height:40px}
.gc-copylink:hover{border-color:var(--gc-accent);color:#1E5A18}

@media (prefers-color-scheme: dark){
  html:not([data-theme="light"]) .gcf-panel{background:#141C28;border-color:#243142}
  html:not([data-theme="light"]) .gcf-in{color:#E7EEF7;border-bottom-color:#243142}
  html:not([data-theme="light"]) .gcf-row{color:#E7EEF7}
  html:not([data-theme="light"]) .gcf-row.on,html:not([data-theme="light"]) .gcf-row:hover{background:#1D2A3A}
  html:not([data-theme="light"]) .gcf-foot{background:#111823;border-top-color:#243142}
  html:not([data-theme="light"]) .gc-copylink{background:#141C28;color:#E7EEF7;border-color:#243142}
}
html[data-theme="dark"] .gcf-panel{background:#141C28;border-color:#243142}
html[data-theme="dark"] .gcf-in{color:#E7EEF7;border-bottom-color:#243142}
html[data-theme="dark"] .gcf-row{color:#E7EEF7}
html[data-theme="dark"] .gcf-row.on,html[data-theme="dark"] .gcf-row:hover{background:#1D2A3A}
html[data-theme="dark"] .gcf-foot{background:#111823;border-top-color:#243142}
html[data-theme="dark"] .gc-copylink{background:#141C28;color:#E7EEF7;border-color:#243142}

@media (max-width:1400px){ .gcf-lab,.gcf-kbd{display:none} .gcf-open{padding:9px 11px} }