/* Liquid Glass, as iOS 27 draws it: what is behind is diffused, the key light falls from straight above onto a bright
   rim and a sheen that fades down the pane, a darkened edge sets the glass apart from the page, and in Chromium the
   backdrop bends near the edges as through a lens (glass.js). Used by the home page and the Terms and Privacy pages. */
:root {
  --glass-fill: rgba(255, 255, 255, .26); --glass-rim: rgba(255, 255, 255, .95); --glass-low: rgba(255, 255, 255, .5);
  --glass-edge: rgba(20, 21, 28, .13); --glass-sheen: rgba(255, 255, 255, .55); --glass-drop: rgba(60, 40, 30, .14);
  --glass-blur: blur(14px) saturate(2.1) brightness(1.06);
}
@media (prefers-color-scheme: dark) {
  :root {
    --glass-fill: rgba(70, 66, 74, .3); --glass-rim: rgba(255, 255, 255, .32); --glass-low: rgba(255, 255, 255, .07);
    --glass-edge: rgba(0, 0, 0, .75); --glass-sheen: rgba(255, 255, 255, .12); --glass-drop: rgba(0, 0, 0, .5);
    --glass-blur: blur(14px) saturate(1.9) brightness(1.15);
  }
}

.feat, .tbl, .promise, .conspicuous, .table { position: relative; }
.top, .feat, .tbl, nav, .promise, .conspicuous, .table {
  isolation: isolate; background: var(--glass-fill);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: inset 0 1px 0 var(--glass-rim), inset 0 -1px 0 var(--glass-low), 0 0 0 .5px var(--glass-edge),
    0 14px 34px -12px var(--glass-drop);
}
:is(.top, .feat, .tbl, nav, .promise, .conspicuous, .table)::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: linear-gradient(to bottom, var(--glass-sheen), transparent 42%);
}
/* the edge lens, where the browser can bend a backdrop: on the floating bar only, as a pane the size of a card costs
   several frames' time to bend on every frame of scrolling */
.lens :is(.top, nav) { backdrop-filter: url(#lens) var(--glass-blur); }

/* the bar floats as a capsule around what it holds, as the app's tab bar does */
.top, nav { top: calc(env(safe-area-inset-top, 0px) + 12px); left: 50%; right: auto; transform: translateX(-50%);
  width: max-content; max-width: calc(100vw - 24px); border-radius: 999px; padding: 10px 10px 10px 22px; gap: 4px; }
:is(.top, nav) > :first-child { margin-right: 18px; }
:is(.top, nav) a { padding: 6px 14px; border-radius: 999px; white-space: nowrap; }
/* the wordmark sits at the bar's own inset, as on the home page, where it is not a link */
:is(.top, nav) > a:first-child { padding-inline: 0; }
@media (max-width: 480px) {
  .top, nav { padding: 8px 6px 8px 16px; gap: 0; }
  :is(.top, nav) > :first-child { margin-right: 8px; }
  :is(.top, nav) a { padding: 6px 10px; }
  :is(.top, nav) > a:first-child { padding-inline: 0; }
}
:is(.top, nav) a[aria-current] { background: var(--glass-low); box-shadow: inset 0 0 0 .5px var(--glass-edge); }
.tbl { padding: 6px 22px 10px; border-radius: 28px; }
.tbl tr:first-child th { border-top: 0; }

@media (prefers-reduced-transparency: reduce) {
  .top, .feat, .tbl, nav, .promise, .conspicuous, .table { background: var(--ground); -webkit-backdrop-filter: none; backdrop-filter: none; }
}