/* nav */
.nav { position: sticky; top: 0; z-index: 5; background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(6px); border-bottom: 1px solid var(--rule) }
.nav .wrap { display: flex; align-items: center; gap: 20px; padding-block: 14px; flex-wrap: wrap }
.logo { font: 800 1.35rem/1 var(--display); text-decoration: none; letter-spacing: -.03em }
.logo i { font-style: normal; background: linear-gradient(transparent 58%, var(--hi) 58%) }
/* The ™ (marketing/ratably/BRAND.md): superscript, outside the highlight, top level with the capitals. */
.logo .tm { font: 500 .42em/0 var(--body); letter-spacing: 0; margin-left: .12em; vertical-align: .95em; color: var(--ink2) }
.nav nav { display: flex; gap: 20px; margin-left: auto; font-size: .95rem; flex-wrap: wrap; align-items: center }
.nav nav a { text-decoration: none; color: var(--ink2) }
.nav nav a:hover { color: var(--ink) }
.nav-account { display: flex; align-items: center; gap: 12px; flex-wrap: wrap }
.nav-email { font: 500 .82rem var(--mono); color: var(--ink2); max-width: 18ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.linkish { background: none; border: 0; padding: 0; font: 500 .95rem var(--body); color: var(--ink2); cursor: pointer; text-decoration: underline }
.linkish:hover { color: var(--ink) }

/* the small-screen menu: a <details> (ratably-menu.js adds Escape and close-on-choose). The app
   shell (.app-menu) and the marketing nav (.site-menu) each decide when it shows; this is its look.
   The panel hangs off the sticky .nav, so it spans the screen under the bar. */
.nav-menu summary { width: 40px; height: 40px; display: grid; place-items: center; position: relative; cursor: pointer; list-style: none;
  border: 1px solid var(--rule); border-radius: 4px; background: var(--sheet) }
.nav-menu summary::-webkit-details-marker { display: none }
.nav-menu summary::before { content: ""; width: 18px; height: 2px; background: var(--ink); transition: transform .15s, box-shadow .15s;
  box-shadow: 0 -6px 0 var(--ink), 0 6px 0 var(--ink) }
.nav-menu summary::after { content: ""; position: absolute; inset: 0; margin: auto; width: 18px; height: 2px; background: var(--ink);
  transform: rotate(-45deg); opacity: 0; transition: opacity .15s }
.nav-menu[open] summary::before { box-shadow: none; transform: rotate(45deg) }
.nav-menu[open] summary::after { opacity: 1 }
.nav-menu .nav-menu-panel { position: absolute; left: 0; right: 0; top: 100%; z-index: 6; background: var(--sheet);
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); box-shadow: 0 12px 24px rgba(16, 32, 47, .08) }
.nav-menu .menu-links { display: grid; gap: 0; margin: 0; font-size: 1rem }
.nav-menu-panel a, .nav-menu-panel button { display: flex; align-items: center; width: 100%; min-height: 48px; padding: 0 clamp(16px, 4vw, 40px);
  border: 0; background: none; font: 500 1rem var(--body); color: var(--ink); text-align: left; text-decoration: none; cursor: pointer }
.nav-menu-panel a:hover, .nav-menu-panel button:hover { background: var(--green-soft) }
.nav-menu-panel a + a, .nav-menu-panel a + button { border-top: 1px solid var(--rule) }
.menu-foot { border-top: 1px solid var(--rule); display: grid }
.menu-email { padding: 12px clamp(16px, 4vw, 40px) 0; font: 500 .85rem/1.3 var(--mono); color: var(--ink2); overflow-wrap: anywhere }
.site-menu { display: none }

/* the public-page nav (templates/site/_nav.html): one row at every width, the way the app's bar is.
   At 720 px and below the links and the sign-in link move into the menu */
.site-nav-bar .wrap { flex-wrap: nowrap; gap: 16px }
.site-nav { gap: 22px; flex-wrap: nowrap; white-space: nowrap }
.site-nav a { padding-block: 4px; border-bottom: 2px solid transparent }
.site-nav a:hover { color: var(--ink) }
.site-nav-bar .nav-account { margin-left: auto; flex-wrap: nowrap; white-space: nowrap }
.site-nav[data-nav="checks"] [data-nav-link="checks"], .site-nav[data-nav="how"] [data-nav-link="how"],
.site-nav[data-nav="pricing"] [data-nav-link="pricing"], .site-nav[data-nav="help"] [data-nav-link="help"] {
  color: var(--ink); font-weight: 600; border-bottom-color: var(--green) }
.site-menu .menu-links a { border-bottom: 0; padding-block: 0 }
.site-menu .menu-links[data-nav="checks"] [data-nav-link="checks"], .site-menu .menu-links[data-nav="how"] [data-nav-link="how"],
.site-menu .menu-links[data-nav="pricing"] [data-nav-link="pricing"], .site-menu .menu-links[data-nav="help"] [data-nav-link="help"] {
  box-shadow: inset 3px 0 0 var(--green); background: var(--green-soft) }
@media (max-width: 900px) { .site-nav { gap: 14px; font-size: .9rem } .site-nav-bar .wrap { gap: 12px } }
@media (max-width: 720px) {
  .nav.site-nav-bar nav.site-nav, .site-nav-bar .nav-account [data-auth] { display: none }
  .site-nav-bar .site-menu { display: block }
}
/* 350 px and below: logo, button and menu button need 307 px of the 288 a 320 px phone leaves */
@media (max-width: 350px) {
  .site-nav-bar .wrap { gap: 8px }
  .site-nav-bar .nav-account .btn { padding-inline: .7em; font-size: .85rem }
}

/* the wide footer (templates/site/_footer.html): four columns, two on a phone, then the legal line */
.site-footer .foot-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; padding-bottom: 28px; border-bottom: 1px solid var(--rule) }
@media (min-width: 720px) { .site-footer .foot-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) } }
.site-footer .foot-grid nav { display: grid; gap: 4px; align-content: start; min-width: 0 }
.site-footer .foot-grid a { font-size: .92rem; padding-block: 4px; text-decoration: none; overflow-wrap: anywhere }
.site-footer .foot-grid a:hover { color: var(--ink); text-decoration: underline }
.foot-h { font: 500 .78rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); margin-bottom: 8px }
.site-footer .legal { padding-top: 24px }
.site-main { padding-block: clamp(24px, 4vw, 48px) clamp(48px, 7vw, 88px); min-height: 60vh }