/* Calculate Your Grade — site header & footer shell */
#masthead,.site-header,#colophon,.site-footer{display:none!important;}
.cyg-header,.cyg-footer{font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;box-sizing:border-box;}
.cyg-header *,.cyg-footer *{box-sizing:border-box;}
.cyg-header{position:sticky;top:0;z-index:99;background:#fff;border-bottom:1px solid #E2E8F0;}
.cyg-bar{max-width:1120px;margin:0 auto;padding:0 20px;height:64px;display:flex;align-items:center;justify-content:space-between;gap:16px;position:relative;}
.cyg-logo{display:flex;align-items:center;gap:10px;text-decoration:none;}
.cyg-logo svg{display:block;flex:none;}
.cyg-wordmark{font-family:'Space Grotesk',system-ui,sans-serif;font-weight:700;font-size:20px;color:#0F172A;white-space:nowrap;letter-spacing:-.01em;}
.cyg-nav{display:flex;align-items:center;gap:28px;}
.cyg-nav a{font-size:15px;font-weight:500;color:#334155;text-decoration:none;padding:6px 0;border:0;}
.cyg-nav a:hover{color:#4F46E5;}
.cyg-cta{background:#4F46E5;color:#fff!important;padding:9px 16px!important;border-radius:10px;font-weight:600;}
.cyg-cta:hover{background:#4338CA;}
.cyg-burger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:10px;}
.cyg-burger span{width:24px;height:2px;background:#0F172A;border-radius:2px;transition:transform .2s,opacity .2s;}
@media(max-width:768px){
  .cyg-burger{display:flex;}
  .cyg-nav{position:absolute;top:64px;left:0;right:0;background:#fff;border-bottom:1px solid #E2E8F0;flex-direction:column;align-items:stretch;gap:0;padding:8px 20px 16px;display:none;box-shadow:0 14px 26px rgba(15,23,42,.10);}
  .cyg-nav.is-open{display:flex;}
  .cyg-nav a{padding:13px 2px;border-bottom:1px solid #F1F5F9;font-size:16px;}
  .cyg-nav .cyg-cta{margin-top:10px;text-align:center;border-bottom:0;}
  .cyg-header.is-open .cyg-burger span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .cyg-header.is-open .cyg-burger span:nth-child(2){opacity:0;}
  .cyg-header.is-open .cyg-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
}
.cyg-footer{background:#0F172A;color:#CBD5E1;margin-top:48px;}
.cyg-foot-inner{max-width:1120px;margin:0 auto;padding:46px 20px 26px;display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap;}
.cyg-foot-brand{max-width:400px;}
.cyg-foot-logo{display:flex;align-items:center;gap:10px;}
.cyg-foot-logo span{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:19px;color:#fff;}
.cyg-foot-brand p{margin:14px 0 0;font-size:14px;line-height:1.65;color:#94A3B8;}
.cyg-foot-col h3{font-family:'Space Grotesk',sans-serif;font-size:14px;color:#fff;margin:0 0 14px;letter-spacing:.02em;}
.cyg-foot-col a{display:block;color:#CBD5E1;text-decoration:none;font-size:14px;margin-bottom:10px;}
.cyg-foot-col a:hover{color:#fff;}
.cyg-foot-bottom{border-top:1px solid #1E293B;}
.cyg-foot-bottom-in{max-width:1120px;margin:0 auto;padding:18px 20px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:13px;color:#94A3B8;}
.cyg-foot-bottom-in a{color:#94A3B8;text-decoration:none;}
.cyg-nav-group{position:relative;display:flex;align-items:center}.cyg-nav-parent{display:flex;align-items:center;font-family:inherit;font-size:15px;font-weight:500;color:#334155;background:none;border:0;border-radius:0;box-shadow:none;-webkit-appearance:none;appearance:none;cursor:pointer;padding:6px 0;line-height:1.4;text-transform:none;letter-spacing:normal}.cyg-nav-parent:hover,.cyg-nav-parent:focus,.cyg-nav-parent:active{background:none!important;box-shadow:none!important;color:#4F46E5}.cyg-nav-parent:focus:not(:focus-visible){outline:none}.cyg-nav-parent:focus-visible{outline:2px solid #4F46E5;outline-offset:3px;border-radius:4px}.cyg-caret{display:inline-block;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor;margin-left:6px;opacity:.65;transition:transform .15s}.cyg-dropdown{position:absolute;top:100%;left:-12px;min-width:235px;background:#fff;border:1px solid #E2E8F0;border-radius:12px;box-shadow:0 16px 32px rgba(15,23,42,.13);padding:8px;display:none;flex-direction:column;margin-top:8px}.cyg-nav-group:hover>.cyg-dropdown,.cyg-nav-group:focus-within>.cyg-dropdown{display:flex}.cyg-nav-group:hover .cyg-caret,.cyg-nav-group:focus-within .cyg-caret{transform:rotate(180deg)}.cyg-dropdown a{padding:9px 12px!important;border-radius:8px;font-size:14px!important;white-space:nowrap;color:#334155}.cyg-dropdown a:hover{background:#F1F5F9;color:#4338CA}@media(max-width:768px){.cyg-nav-group{flex-direction:column;align-items:stretch}.cyg-nav-parent{width:100%;justify-content:space-between;padding:13px 2px;border-bottom:1px solid #F1F5F9;font-size:16px}.cyg-caret{display:inline-block;margin:0}.cyg-nav-group:hover>.cyg-dropdown,.cyg-nav-group:focus-within>.cyg-dropdown{display:none}.cyg-nav-group:hover .cyg-caret,.cyg-nav-group:focus-within .cyg-caret{transform:none}.cyg-dropdown{position:static;display:none;border:0;border-radius:0;box-shadow:none;padding:0 0 0 16px;margin:0;min-width:0}.cyg-nav-group.is-expanded>.cyg-dropdown{display:flex}.cyg-nav-group.is-expanded .cyg-caret{transform:rotate(180deg)}.cyg-dropdown a{border-bottom:1px solid #F1F5F9;padding:12px 2px!important}}

/* ---- Calculators menu, nested the way the Excel defines the site ----
   The homepage is the SITE PILLAR and links to every hub. So the panel is titled "Grade Calculator",
   its own cluster pages sit directly beneath, and each hub (Final Grade Calculator, later GPA / Curve /
   Scales) is shown as a CHILD of it, marked by an indent rule.
   Every header rule is scoped to .cyg-mega. An earlier unscoped version leaked light colours into the
   dark footer and dropped those links to 1.76:1 contrast. Do not unscope these. */
.cyg-dropdown.cyg-mega{left:auto;right:-12px;min-width:0;width:min(780px,calc(100vw - 40px));padding:14px 12px;display:none;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px 16px;align-items:start}
.cyg-nav-group:hover>.cyg-dropdown.cyg-mega,.cyg-nav-group:focus-within>.cyg-dropdown.cyg-mega{display:grid}
.cyg-mega .cyg-mega-title{grid-column:1/-1;display:block;padding:2px 8px 9px!important;font-size:13px!important;font-weight:700;color:#0F172A;text-decoration:none;border-bottom:1px solid #E2E8F0;margin-bottom:4px;white-space:normal!important}
.cyg-mega a.cyg-mega-title:hover{color:#4338CA;background:none}
.cyg-mega .cyg-grp{min-width:0}
.cyg-mega .cyg-grp-wide{grid-column:span 2}
.cyg-mega .cyg-grp-wide .cyg-grp-list{column-count:2;column-gap:10px}
.cyg-mega .cyg-grp-pillar>.cyg-grp-h{display:none}
.cyg-mega .cyg-grp-hub{border-left:2px solid #E2E8F0;padding-left:12px}
.cyg-mega .cyg-grp-h{display:block;padding:2px 8px 7px!important;font-size:11px!important;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#0F172A;text-decoration:none;white-space:normal!important;margin-bottom:3px}
.cyg-mega a.cyg-grp-h:hover{color:#4338CA;background:none}
.cyg-mega .cyg-grp-toggle{display:none}
.cyg-mega .cyg-grp-list a{display:block;padding:6px 8px!important;border-radius:8px;font-size:13.5px!important;color:#334155;white-space:normal!important;line-height:1.35;break-inside:avoid}
.cyg-mega .cyg-grp-list a:hover{background:#F1F5F9;color:#4338CA}

/* Footer: a fixed grid so no column wraps onto its own row. The flex version overflowed 1120px, which
   pushed Legal below everything and squeezed Company to 66px. Calculator groups mirror the header's
   shape. Links are #CBD5E1 on #0F172A (12.0:1) and the hover stays dark. */
.cyg-foot-inner{display:grid!important;grid-template-columns:minmax(200px,0.95fr) minmax(400px,1.7fr) max-content max-content;gap:30px 34px;align-items:start;justify-content:start}
.cyg-foot-brand{max-width:none}
.cyg-foot-calcs{flex:none}
.cyg-foot-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px 18px;align-items:start}
.cyg-foot-grid .cyg-mega-title{display:block;grid-column:1/-1;font-family:'Space Grotesk',sans-serif;font-size:14px!important;font-weight:700;color:#FFFFFF!important;text-decoration:none;margin:0 0 14px;padding:0!important;letter-spacing:.02em;white-space:normal!important}
.cyg-foot-grid a.cyg-mega-title:hover{color:#A5B4FC!important}
.cyg-foot-grid .cyg-grp-pillar>.cyg-grp-h{display:none}
.cyg-foot-grid .cyg-grp{min-width:0;margin:0}
.cyg-foot-grid .cyg-grp-wide{grid-column:span 2}
.cyg-foot-grid .cyg-grp-wide .cyg-grp-list{column-count:2;column-gap:18px}
.cyg-foot-grid .cyg-grp-hub{border-left:1px solid #1E293B;padding-left:16px}
.cyg-foot-grid .cyg-grp-h{display:block;padding:0 0 7px!important;font-size:12.5px!important;font-weight:600;color:#A5B4FC!important;letter-spacing:0;text-transform:none;text-decoration:none;margin:0 0 4px;border-bottom:0}
.cyg-foot-grid a.cyg-grp-h:hover{color:#FFFFFF!important;text-decoration:underline}
.cyg-foot-grid .cyg-grp-toggle{display:none}
.cyg-foot-grid .cyg-grp-list a{display:block;color:#CBD5E1!important;background:none!important;font-size:13.5px!important;margin-bottom:9px;padding:0!important;border-radius:0;line-height:1.4;break-inside:avoid}
.cyg-foot-grid .cyg-grp-list a:hover{color:#FFFFFF!important;background:none!important;text-decoration:underline}
@media(max-width:900px){
  .cyg-foot-inner{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .cyg-foot-brand{grid-column:1/-1}
  .cyg-foot-calcs{grid-column:1/-1}
}
@media(max-width:600px){
  .cyg-foot-inner{grid-template-columns:minmax(0,1fr)}
  .cyg-foot-grid{grid-template-columns:1fr}
  .cyg-foot-grid .cyg-grp-wide{grid-column:auto}
  .cyg-foot-grid .cyg-grp-wide .cyg-grp-list{column-count:1}
}

@media(max-width:768px){
  /* Linear list on a phone: the pillar heading returns, hubs stay visibly indented under it, and every
     group is collapsed until its caret is tapped. */
  .cyg-dropdown.cyg-mega{position:static;width:auto;right:auto;left:auto;display:none;grid-template-columns:1fr;border:0;border-radius:0;box-shadow:none;margin:0;padding:0 0 0 4px}
  .cyg-nav-group:hover>.cyg-dropdown.cyg-mega,.cyg-nav-group:focus-within>.cyg-dropdown.cyg-mega{display:none}
  .cyg-nav-group.is-expanded>.cyg-dropdown.cyg-mega{display:grid}
  .cyg-mega .cyg-mega-title{display:none}
  .cyg-mega .cyg-grp-pillar>.cyg-grp-h{display:block}
  .cyg-mega .cyg-grp-wide{grid-column:auto}
  .cyg-mega .cyg-grp-wide .cyg-grp-list{column-count:1}
  .cyg-mega .cyg-grp{position:relative;border-bottom:1px solid #F1F5F9}
  .cyg-mega .cyg-grp-hub{border-left:2px solid #E2E8F0;margin-left:10px;padding-left:10px}
  .cyg-mega .cyg-grp-h{padding:14px 44px 14px 2px!important;font-size:13px!important;margin:0}
  .cyg-mega .cyg-grp-toggle{display:block;position:absolute;right:0;top:0;width:44px;height:48px;background:none;border:0;cursor:pointer;padding:0}
  .cyg-mega .cyg-grp-toggle::after{content:"";position:absolute;left:50%;top:50%;width:0;height:0;margin:-3px 0 0 -4px;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid #94A3B8;transition:transform .15s ease}
  .cyg-mega .cyg-grp.is-open>.cyg-grp-toggle::after{transform:rotate(180deg)}
  .cyg-mega .cyg-grp-list{display:none;padding:0 0 8px 12px}
  .cyg-mega .cyg-grp.is-open>.cyg-grp-list{display:block}
  .cyg-mega .cyg-grp-list a{border-bottom:0!important;padding:10px 2px!important;font-size:15px!important}
  .cyg-foot-grid{grid-template-columns:1fr}
  .cyg-foot-grid .cyg-grp-wide{grid-column:auto}
  .cyg-foot-grid .cyg-grp-wide .cyg-grp-list{column-count:1}
}

/* Footer breakpoints, appended last so they beat the older blocks above.
   Tablet keeps two calculator columns; only phones drop to one. */
@media(min-width:561px) and (max-width:768px){
  .cyg-foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .cyg-foot-grid .cyg-grp-wide{grid-column:span 2!important}
  .cyg-foot-grid .cyg-grp-wide .cyg-grp-list{column-count:2!important}
}
@media(max-width:560px){
  .cyg-foot-grid{grid-template-columns:1fr!important}
  .cyg-foot-grid .cyg-grp-wide{grid-column:auto!important}
  .cyg-foot-grid .cyg-grp-wide .cyg-grp-list{column-count:1!important}
  .cyg-foot-grid .cyg-grp-list a{margin-bottom:8px}
  .cyg-foot-grid .cyg-grp{margin-bottom:16px}
}

/* Company and Legal use the same collapsible component as the calculator groups, so the mobile footer
   behaves consistently. Scoped to .cyg-foot-col so nothing leaks. */
.cyg-foot-col .cyg-grp-simple .cyg-grp-h{display:block;font-family:'Space Grotesk',sans-serif;font-size:14px!important;font-weight:700;color:#FFFFFF!important;margin:0 0 14px;letter-spacing:.02em;padding:0!important;border-bottom:0}
.cyg-foot-col .cyg-grp-simple .cyg-grp-toggle{display:none}
.cyg-foot-col .cyg-grp-simple .cyg-grp-list a{display:block;color:#CBD5E1!important;font-size:14px;margin-bottom:10px;text-decoration:none;line-height:1.45}
.cyg-foot-col .cyg-grp-simple .cyg-grp-list a:hover{color:#FFFFFF!important;text-decoration:underline}
/* Match the header panel's rhythm: a ruled title, then small capped group labels. */
.cyg-foot-grid .cyg-mega-title{border-bottom:1px solid #1E293B;padding:0 0 11px!important;margin:0 0 14px}
.cyg-foot-grid .cyg-grp-h{font-size:11px!important;letter-spacing:.06em;text-transform:uppercase}

@media(max-width:560px){
  /* Phone: the footer becomes an accordion, exactly like the header menu. 1,234px of stacked links
     collapses to four tappable rows. */
  .cyg-foot-inner{padding-top:34px;gap:0}
  .cyg-foot-brand{margin-bottom:22px}
  .cyg-foot-grid .cyg-mega-title{display:none}
  .cyg-foot-grid .cyg-grp-pillar>.cyg-grp-h{display:block}
  .cyg-footer .cyg-grp{position:relative;border-bottom:1px solid #1E293B;margin:0!important;padding:0!important}
  .cyg-footer .cyg-grp-hub{border-left:0!important;margin-left:16px!important}
  .cyg-footer .cyg-grp-h{padding:15px 46px 15px 0!important;margin:0!important;font-size:14px!important;font-weight:600;letter-spacing:0!important;text-transform:none!important;border-bottom:0!important;color:#FFFFFF!important}
  .cyg-footer a.cyg-grp-h{color:#FFFFFF!important}
  .cyg-footer .cyg-grp-toggle{display:block!important;position:absolute;right:0;top:0;width:46px;height:50px;background:none;border:0;cursor:pointer;padding:0}
  .cyg-footer .cyg-grp-toggle::after{content:"";position:absolute;left:50%;top:50%;width:0;height:0;margin:-3px 0 0 -4px;border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid #94A3B8;transition:transform .15s ease}
  .cyg-footer .cyg-grp.is-open>.cyg-grp-toggle::after{transform:rotate(180deg)}
  .cyg-footer .cyg-grp-list{display:none;padding:2px 0 12px!important}
  .cyg-footer .cyg-grp.is-open>.cyg-grp-list{display:block}
  .cyg-footer .cyg-grp-list a{margin-bottom:0!important;padding:9px 0!important;font-size:14.5px!important}
}

/* The desktop .cyg-foot-col .cyg-grp-simple rule outranks .cyg-footer .cyg-grp-h, so the phone
   accordion needs the same specificity or Company and Legal collapse to 24px rows. */
@media(max-width:560px){
  .cyg-footer .cyg-foot-col .cyg-grp-simple .cyg-grp-h{padding:15px 46px 15px 0!important;margin:0!important;font-size:14px!important;font-weight:600;border-bottom:0!important}
  .cyg-footer .cyg-foot-col .cyg-grp-simple .cyg-grp-list a{margin-bottom:0!important;padding:9px 0!important;font-size:14.5px!important}
  .cyg-footer .cyg-foot-col .cyg-grp-simple{border-bottom:1px solid #1E293B}
}

/* ---- Footer redrawn on the header panel's exact system ----
   The header earns its structure with lines: a ruled title, a 2px left rule marking a nested hub, and a
   12px step from a heading to the links beneath it. The footer had none of that, so its four left edges
   (20 / 36 / 20 / 20 on a phone) read as misalignment rather than nesting. Dividers use #334155, not
   #1E293B, because #1E293B on #0F172A is effectively invisible. */
.cyg-foot-grid .cyg-mega-title{border-bottom:1px solid #334155}
.cyg-foot-grid .cyg-grp-hub{border-left:2px solid #334155;padding-left:12px}
.cyg-foot-col .cyg-grp-simple .cyg-grp-h{font-size:11px!important;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#A5B4FC!important;margin:0 0 4px;padding:0 0 7px!important}
.cyg-foot-col .cyg-grp-simple .cyg-grp-list a{font-size:13.5px!important;margin-bottom:9px}

@media(max-width:560px){
  /* Same rhythm as the header's mobile list: every group is a ruled row, its links step in 12px, and the
     hub sits behind a 2px left rule instead of an unexplained indent. */
  .cyg-footer .cyg-foot-col .cyg-grp,.cyg-footer .cyg-foot-grid .cyg-grp{border-bottom:1px solid #334155}
  .cyg-footer .cyg-foot-col .cyg-grp-h,.cyg-footer .cyg-foot-col .cyg-grp-simple .cyg-grp-h{padding:14px 44px 14px 2px!important;margin:0!important;font-size:13px!important;font-weight:700;letter-spacing:.06em!important;text-transform:uppercase!important;color:#FFFFFF!important;border-bottom:0!important}
  .cyg-footer .cyg-grp-hub{border-left:2px solid #334155!important;margin-left:10px!important;padding-left:10px!important}
  .cyg-footer .cyg-grp-list{padding:0 0 8px 12px!important}
  .cyg-footer .cyg-foot-col .cyg-grp-list a,.cyg-footer .cyg-foot-col .cyg-grp-simple .cyg-grp-list a{padding:10px 2px!important;margin-bottom:0!important;font-size:15px!important}
  .cyg-footer .cyg-grp-toggle{width:44px!important;height:48px!important}
}

/* The calculators column gave each sub-column about 166px, so nearly every link wrapped onto two lines.
   The header panel gives each link about 244px and never wraps. Rebalance toward the links: the brand
   blurb reads fine narrower, the link grid does not. */
.cyg-foot-inner{grid-template-columns:minmax(200px,0.7fr) minmax(520px,2.1fr) max-content max-content!important}
.cyg-foot-grid{gap:2px 22px}
@media(max-width:900px){
  .cyg-foot-inner{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important}
}
@media(max-width:600px){
  .cyg-foot-inner{grid-template-columns:minmax(0,1fr)!important}
}

/* First rebalance went too far the other way and squeezed the brand wordmark onto two lines. Lowering the
   link column's share while raising the brand's keeps the link columns the same width and gives the brand
   back ~60px. Footer links run at 13px, a half-step under the header, which clears the last wraps. */
.cyg-foot-inner{grid-template-columns:minmax(230px,0.85fr) minmax(520px,2fr) max-content max-content!important}
.cyg-foot-grid .cyg-grp-list a{font-size:13px!important}
@media(max-width:900px){
  .cyg-foot-inner{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important}
}
@media(max-width:600px){
  .cyg-foot-inner{grid-template-columns:minmax(0,1fr)!important}
}
@media(max-width:560px){
  .cyg-footer .cyg-foot-col .cyg-grp-list a,.cyg-footer .cyg-foot-col .cyg-grp-simple .cyg-grp-list a{font-size:15px!important}
}

/* The layout caps at ~1140px, so a wider screen does not widen the link columns. Trimming the column gap
   from 22px to 14px buys each sub-column 8px, which is enough for the three longest calculator names. */
.cyg-foot-grid{gap:2px 14px}
.cyg-foot-grid .cyg-grp-wide .cyg-grp-list{column-gap:14px}

/* ---- Both menus scroll once they outgrow their space ----
   The plan runs to five hubs, so these lists will roughly triple. Nothing here changes the current layout:
   every cap sits above today's heights and only engages as pages are added.
   The mobile drawer is the urgent one. It is position:absolute inside a position:sticky header, so it
   travels with the header and scrolling the page never reveals more of it. Past roughly one viewport its
   bottom entries become unreachable. It has to scroll itself. */
.cyg-dropdown.cyg-mega{max-height:min(72vh,600px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#CBD5E1 transparent}
.cyg-dropdown.cyg-mega::-webkit-scrollbar{width:8px}
.cyg-dropdown.cyg-mega::-webkit-scrollbar-thumb{background:#CBD5E1;border-radius:8px}
.cyg-dropdown.cyg-mega::-webkit-scrollbar-track{background:transparent}

@media(min-width:901px){
  /* Footer link block, dark scrollbar to match the ground. */
  .cyg-foot-grid{max-height:420px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#334155 transparent}
  .cyg-foot-grid::-webkit-scrollbar{width:8px}
  .cyg-foot-grid::-webkit-scrollbar-thumb{background:#334155;border-radius:8px}
  .cyg-foot-grid::-webkit-scrollbar-track{background:transparent}
}

@media(max-width:768px){
  .cyg-nav{max-height:calc(100vh - 64px);max-height:calc(100dvh - 64px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:#CBD5E1 transparent}
  .cyg-nav::-webkit-scrollbar{width:8px}
  .cyg-nav::-webkit-scrollbar-thumb{background:#CBD5E1;border-radius:8px}
  .cyg-nav::-webkit-scrollbar-track{background:transparent}
  /* The drawer owns the scrolling on a phone; a second scroller inside it would trap the finger. */
  .cyg-dropdown.cyg-mega{max-height:none;overflow:visible}
}

@media(max-width:560px){
  /* One open footer group should never fill the whole screen. */
  .cyg-footer .cyg-grp.is-open>.cyg-grp-list{max-height:52vh;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#334155 transparent}
  .cyg-footer .cyg-grp-list::-webkit-scrollbar{width:8px}
  .cyg-footer .cyg-grp-list::-webkit-scrollbar-thumb{background:#334155;border-radius:8px}
  .cyg-footer .cyg-grp-list::-webkit-scrollbar-track{background:transparent}
}

@media(max-width:560px){
  /* A capped multi-column box does not scroll: it fragments the overflow into extra column boxes to the
     RIGHT, off-screen and unreachable. The footer group lists still carry a column-count from the desktop
     rules, so the multicol context has to be dropped before the cap is applied. Never put max-height plus
     overflow on an element that has column-count set. */
  .cyg-footer .cyg-grp-list{-webkit-columns:auto!important;-moz-columns:auto!important;columns:auto!important;column-count:auto!important;column-width:auto!important}
}

@media(max-width:560px){
  /* The kill-multicol rule above lost to an existing column-count:1!important at (0,3,0). Both carried
     !important, so specificity decided. It must out-specify that, not merely repeat !important. */
  .cyg-footer .cyg-foot-grid .cyg-grp-wide .cyg-grp-list,
  .cyg-footer .cyg-foot-grid .cyg-grp .cyg-grp-list,
  .cyg-footer .cyg-foot-col .cyg-grp .cyg-grp-list{-webkit-columns:auto!important;-moz-columns:auto!important;columns:auto!important;column-count:auto!important;column-width:auto!important}
}

@media(max-width:560px){
  /* 52vh clipped today's 14-link group at 422px of 582px, which shrinks the menu now instead of only
     absorbing growth later. Every other cap here is set to sit above the current content; this one has to
     match. 75vh is 609px on a 812px phone, so it engages at roughly 15 links and not before. */
  .cyg-footer .cyg-grp.is-open>.cyg-grp-list{max-height:75vh;max-height:75dvh}
}