/* ClearCrate phone menu (4 Nov 2026). Shows on screens 920px wide or less, where the top links are hidden. */
.ccm{display:none}
@media (max-width:920px){
  .ccm{display:block;flex:none}
  .ccm > summary{list-style:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:52px;height:44px;box-sizing:border-box;border:1px solid rgba(244,245,246,.35);color:#F4F5F6;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
  .ccm > summary::-webkit-details-marker{display:none}
  .ccm > summary::marker{content:""}
  .ccm[open] > summary{background:rgba(244,245,246,.1);border-color:rgba(244,245,246,.6)}
  .ccm > summary > span,.ccm[open] > summary > span{transform:none !important;transition:none !important;display:block}
  .ccm-ic{position:relative;display:block;width:18px;height:12px}
  .ccm-ic i{position:absolute;left:0;width:18px;height:2px;background:currentColor;transition:transform .2s ease,opacity .2s ease}
  .ccm-ic i:nth-child(1){top:0}
  .ccm-ic i:nth-child(2){top:5px}
  .ccm-ic i:nth-child(3){top:10px}
  .ccm[open] .ccm-ic i:nth-child(1){transform:translateY(5px) rotate(45deg)}
  .ccm[open] .ccm-ic i:nth-child(2){opacity:0}
  .ccm[open] .ccm-ic i:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
  .ccm-tx{text-align:center;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:9.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;line-height:1}
  .ccm-panel{position:absolute;left:0;right:0;top:100%;background:#17202E;color:#F4F5F6;border-top:1px solid rgba(244,245,246,.14);max-height:calc(100vh - 72px);max-height:calc(100dvh - 72px);overflow-y:auto;overscroll-behavior:contain;box-shadow:0 0 0 100vmax rgba(23,32,46,.55);clip-path:inset(0 -100vmax -100vmax -100vmax);text-align:left}
  .ccm-panel ul{list-style:none;margin:0;padding:6px 0 0}
  .ccm-panel li{margin:0;padding:0;border-bottom:1px solid rgba(244,245,246,.1)}
  .ccm-panel li a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 20px;min-height:24px;color:#F4F5F6;text-decoration:none;font-size:17px;font-weight:600;letter-spacing:-.005em;opacity:1}
  .ccm-panel li a::after{content:"\2192";color:rgba(244,245,246,.4);font-weight:400}
  .ccm-panel li a:hover,.ccm-panel li a:active{background:rgba(244,245,246,.06)}
  .ccm-panel li a[aria-current="page"]{color:#F2A82B;box-shadow:inset 3px 0 0 #E8930C}
  .ccm-panel li a[aria-current="page"]::after{content:"You\2019re here";font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:10px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:rgba(242,168,43,.85)}
  .ccm-panel .ccm-cta{display:block;margin:16px 20px 20px;padding:15px 18px;background:#E8930C;color:#17202E;text-align:center;text-decoration:none;font-size:16px;font-weight:600}
  html.ccm-open .mbar{visibility:hidden}
  /* make room for the menu button on the older pages' header */
  .ccnav{gap:10px !important}
  .nav nav{gap:10px}
}
@media (max-width:420px){
  .ccnav > a:last-child,.nav nav > a.btn:last-child{padding:11px 15px !important}
}
/* narrow phones (under 375px wide): a bit smaller so everything stays on one line */
@media (max-width:374px){
  .nav .wrap,.ccpad:has(> .ccnav){gap:10px !important}
  .nav .logo span,.ccpad:has(> .ccnav) > a[href="/"] > span{font-size:17px !important}
  .ccnav > a:last-child,.nav nav > a.btn:last-child{padding:10px 12px !important;font-size:13px !important}
  .ccm > summary{width:46px}
}
/* very narrow (old 320px phones): Get my rates moves into the menu */
@media (max-width:340px){
  .ccnav > a:last-child,.nav nav > a.btn:last-child{display:none !important}
}
@media (prefers-reduced-motion:reduce){
  .ccm-ic i{transition:none}
}