/* "Coffee-length demo, no slides" link: top bar (wide screens) and a slim
   strip under the bar (tablet and phones). The stylesheet loads with the top bar on
   every page (the mobile header fix below applies site-wide); the link and strip
   themselves only render on public marketing pages. Kept out of style.css so the
   main stylesheet is untouched. */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.topbar-demo{color:var(--blue);font-size:13.5px;font-weight:600;text-decoration:none;white-space:nowrap}
.topbar-demo:hover{text-decoration:underline}
.demo-strip{display:none}
/* Up to 980px the bar is already full (links plus the trial button), so the
   demo link moves to the slim strip under the bar instead of squeezing in. */
@media (max-width:980px){
  .topbar-demo{display:none}
  .demo-strip{display:flex;align-items:center;justify-content:center;min-height:44px;
    padding:0 16px;background:var(--cream-card);border-bottom:1px solid var(--border);
    color:var(--blue);font-size:13.5px;font-weight:600;text-decoration:none}
}
@media (max-width:640px){
  /* Logo left; Start Free Trial and the menu icon grouped on the right.
     Previously the menu icon (earlier in the markup) sat centred between
     the logo and the button. */
  .topbar-inner{gap:8px}
  .topbar-brand{margin-right:auto}
  .topbar-cta{order:2}
  .topbar-toggle{order:3;min-width:44px;min-height:44px}
}
/* Hero: subhead and the gap sentence that moved below the hero. */
.hero-subhead{font-size:17px;line-height:1.5;font-weight:400;color:var(--text);max-width:52ch}
.gap-intro{font-size:14px;color:var(--muted);max-width:68ch;margin:6px auto 22px;line-height:1.55;text-align:center}
@media (max-width:640px){.hero-subhead{font-size:15.5px}.gap-intro{text-align:left;margin:4px 0 18px}}