/*
 * The site's top-bar menus, the Features page, and the pause buttons.
 * Loaded after landing.css on every landing page.
 */

/* -- The Features menu ------------------------------------------------ */

.site-links { align-items: center; }
.menu { position: relative; }
.menu-button {
  display: inline-flex; align-items: center; gap: 5px; padding: 6px 0;
  color: var(--muted); text-decoration: none; font-size: .95rem; font-weight: 500;
}
.menu-button svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s ease; }
.menu-button[aria-expanded="true"] { color: var(--ink); }
.menu-button[aria-expanded="true"] svg { transform: rotate(180deg); }

/* Without the script the panel stays closed and the button is a plain link
   to the Features page. */
.menu-panel {
  position: absolute; left: -18px; top: calc(100% + 12px); z-index: 30; display: none;
  width: 340px; padding: 10px; border-radius: 16px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-lg);
}
.menu.is-open .menu-panel { display: block; animation: menu-in .18s ease; }
@keyframes menu-in { from { opacity: 0; transform: translateY(-6px); } }
.menu-panel a {
  display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 10px;
  color: var(--ink); text-decoration: none; font-size: .95rem; font-weight: 600;
}
.menu-panel a:hover, .menu-panel a:focus-visible { background: var(--tint); }
.menu-panel a svg { flex: none; width: 22px; height: 22px; fill: none; stroke: var(--primary); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.menu-panel a small { display: block; font-size: .8rem; font-weight: 400; color: var(--muted); }
.menu-panel .menu-all {
  justify-content: center; margin-top: 6px; border: 1px solid var(--line); border-radius: 999px; font-size: .9rem;
}

/* -- The phone menu --------------------------------------------------- */

.site-links-signin { display: none; }
.nav-toggle {
  display: none; align-items: center; gap: 6px; padding: .45rem .8rem; border-radius: 999px;
  border: 1px solid var(--line); background: #fff; color: var(--ink); font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer;
}
.nav-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }

@media (max-width: 860px) {
  .nav-toggle { display: inline-flex; }
  .site-actions .link-quiet { display: none; }
  /* landing.css hides the links at this width; here they become a panel
     under the bar that the Menu button opens. Without the script they are
     simply shown as a wrapped row, so nothing is unreachable. */
  .site-links {
    display: none; position: absolute; left: 0; right: 0; top: 100%; z-index: 25;
    flex-direction: column; align-items: stretch; gap: 0; padding: 8px 16px 16px;
    background: #fff; border-bottom: 1px solid var(--line); box-shadow: 0 18px 30px -18px rgba(16, 24, 40, .3);
    max-height: calc(100vh - 68px); overflow-y: auto;
  }
  .site-bar.is-menu-open .site-links { display: flex; }
  .site-links > a, .menu-button { padding: 13px 4px; font-size: 1.05rem; color: var(--ink); border-bottom: 1px solid var(--line); }
  .menu-button { justify-content: space-between; width: 100%; }
  .site-links-signin { display: block; border-bottom: 0 !important; font-weight: 600 !important; }
  .menu-panel { position: static; width: auto; padding: 4px 0 8px; border: 0; box-shadow: none; border-radius: 0; border-bottom: 1px solid var(--line); }
  .site-bar-row { position: static; }
  .site-bar { position: sticky; }
}
html:not(.js) .site-links { display: flex; flex-flow: row wrap; position: static; box-shadow: none; border: 0; padding: 0; }
@media (max-width: 860px) {
  .site-bar-row { gap: .75rem; }
  .site-actions { gap: .5rem; }
}
.site-brand, .site-actions .btn { white-space: nowrap; }
@media (max-width: 480px) {
  .nav-toggle span { display: none; }
  .nav-toggle { padding: .5rem .6rem; }
  .site-actions .btn-small { padding: .5rem .8rem; font-size: .88rem; }
  .site-brand { font-size: 1rem; gap: .45rem; }
}

/* -- Pause buttons ---------------------------------------------------- */

.film-pause, .demo-pause {
  display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(15, 27, 61, .62); color: #fff; opacity: .0; transition: opacity .2s ease, background-color .2s ease;
}
.film-pause svg, .demo-pause svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.film-pause .is-play, .demo-pause .is-play { display: none; fill: currentColor; stroke-width: 1; }
.film-pause[aria-pressed="true"] .is-play, .demo-pause[aria-pressed="true"] .is-play { display: block; }
.film-pause[aria-pressed="true"] .is-pause, .demo-pause[aria-pressed="true"] .is-pause { display: none; }
.film-pause { position: absolute; right: 12px; bottom: 12px; z-index: 2; }
/* On the corner, clear of what the demo is showing. */
.demo-pause { position: absolute; right: -12px; top: -12px; z-index: 6; }
.demo-collapse .demo-pause { top: auto; bottom: 0; }
.demo-morph { position: relative; }
.demo-morph .demo-pause { top: 58px; right: max(8px, calc(50% - 372px)); }
/* Shown when the pointer or keyboard is near, when paused, and always on
   touch screens, where there is no hover to reveal them. */
.frame:hover .film-pause, .demo:hover .demo-pause,
.film-pause:focus-visible, .demo-pause:focus-visible,
.film-pause[aria-pressed="true"], .demo-pause[aria-pressed="true"] { opacity: 1; }
@media (hover: none) { .film-pause, .demo-pause { opacity: .85; } }
.film-pause:hover, .demo-pause:hover { background: rgba(15, 27, 61, .85); }
.film-pause:focus-visible, .demo-pause:focus-visible { outline: 3px solid rgba(47, 91, 234, .5); outline-offset: 2px; }

/* -- The Features page ------------------------------------------------ */

.ft-hero {
  padding: 72px 0 40px;
  background: radial-gradient(800px 380px at 50% 0%, rgba(47, 91, 234, .10), transparent 70%);
}
.ft-hero h1 { font-size: clamp(2.1rem, 4.6vw, 3.3rem); }
.ft-jump { list-style: none; margin: 2.2rem 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.ft-jump a {
  display: block; padding: .42rem .9rem; border-radius: 999px; border: 1px solid var(--line); background: #fff;
  color: var(--ink); text-decoration: none; font-size: .9rem; font-weight: 500;
  transition: border-color .2s, transform .15s;
}
.ft-jump a:hover { border-color: var(--primary); transform: translateY(-1px); }
.ft-feature { padding: 84px 0; }
.ft-clip { margin: 0; }
.ft-clip video, .ft-clip img {
  width: 100%; height: auto; border-radius: var(--radius); border: 1px solid var(--line); box-shadow: var(--shadow-lg); background: #fff;
}
.ft-clip figcaption { margin-top: .7rem; font-size: .85rem; color: var(--muted); text-align: center; }
.ft-also { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ft-also li { padding: 22px; border-radius: var(--radius); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.ft-also p { margin: 0; font-size: .94rem; color: var(--muted); }
@media (max-width: 900px) { .ft-also { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ft-feature { padding: 64px 0; } }
@media (max-width: 560px) { .ft-also { grid-template-columns: 1fr; } }

/* -- The real app, and what else is included (home page) -------------- */

.ra-main { max-width: 980px; margin: 0 auto; }
.ra-main figcaption, .ra-pair figcaption { margin-top: .8rem; text-align: center; font-size: .9rem; color: var(--muted); }
.ra-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 980px; margin: 2.2rem auto 2.4rem; }
.ra-pair figure { margin: 0; }
/* Both pictures shown at the same height; the tall invoice shows its top. */
.ra-crop { height: 300px; overflow: hidden; border-radius: var(--radius); border: 1px solid var(--line); box-shadow: var(--shadow-lg); background: #fff; }
.ra-crop img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
@media (max-width: 700px) { .ra-pair { grid-template-columns: 1fr; } .ra-crop { height: 240px; } }

.also-grid { list-style: none; margin: 0 0 2.4rem; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.also-grid li {
  padding: 22px; border-radius: var(--radius); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  transition: transform .25s ease, box-shadow .25s ease;
}
.also-grid li:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.also-grid svg { display: block; width: 26px; height: 26px; margin-bottom: 12px; fill: none; stroke: var(--primary); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.also-grid p { margin: 0; font-size: .94rem; color: var(--muted); }
@media (max-width: 900px) { .also-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .also-grid { grid-template-columns: 1fr; } }

.voices-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.voices-grid li { padding: 24px; border-radius: var(--radius); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.voices-grid blockquote { margin: 0 0 1rem; font-size: 1.05rem; color: var(--ink); }
.voices-grid p { margin: 0; font-size: .9rem; color: var(--muted); }
.voices-grid strong { color: var(--ink); }
.voices-grid span { margin-left: .5rem; }

.foot-note a { color: var(--primary); }

@media (prefers-reduced-motion: reduce) {
  .menu.is-open .menu-panel { animation: none; }
  .ft-jump a:hover, .also-grid li:hover { transform: none; }
}