/* Genesis website: Liquid Glass.
   Loaded after site.css on every page. Following Apple's own rule, real glass (blur, refraction-like
   rim, specular edge) is kept to the layer that floats over the page: the nav bar, its menu, buttons,
   clip controls and the pinned pricing row. Content (cards, chips) gets a quieter version of the same
   light: a lit top edge and a soft lift, no blur. Remove this file's <link> to undo all of it. */

:root {
  /* The glass material */
  --lg-fill: rgba(255, 255, 255, 0.72);
  --lg-fill-strong: rgba(255, 255, 255, 0.82);
  --lg-blur: blur(26px) saturate(190%) brightness(1.04);
  --lg-bar-blur: blur(16px) saturate(190%) brightness(1.04); /* the top bar: 40% less blur, so the page reads through it */
  --lg-rim: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.25) 42%, rgba(255, 255, 255, 0.12) 60%, rgba(255, 255, 255, 0.6));
  --lg-edge: rgba(15, 15, 40, 0.10);          /* hairline just outside the rim, so glass reads on white */
  --lg-sheen: radial-gradient(120% 140% at 18% -30%, rgba(255, 255, 255, 0.55), transparent 55%);
  --lg-shadow: 0 10px 30px -12px rgba(30, 24, 70, 0.22), 0 2px 6px -2px rgba(30, 24, 70, 0.08);
  --lg-hover: rgba(60, 60, 67, 0.08);
  --lg-spring: cubic-bezier(0.34, 1.4, 0.64, 1);

  /* Content surfaces */
  --card-lit: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --card-lift: 0 1px 2px rgba(20, 20, 40, 0.04), 0 14px 34px -22px rgba(30, 24, 70, 0.22);
}
@media (prefers-color-scheme: dark) {
  :root {
    --lg-fill: rgba(30, 30, 36, 0.68);
    --lg-fill-strong: rgba(38, 38, 44, 0.82);
    --lg-blur: blur(26px) saturate(170%) brightness(0.92);
    --lg-bar-blur: blur(16px) saturate(170%) brightness(0.92);
    --lg-rim: linear-gradient(180deg, rgba(255, 255, 255, 0.30), rgba(255, 255, 255, 0.06) 42%, rgba(255, 255, 255, 0.03) 60%, rgba(255, 255, 255, 0.14));
    --lg-edge: rgba(0, 0, 0, 0.6);
    --lg-sheen: radial-gradient(120% 140% at 18% -30%, rgba(255, 255, 255, 0.10), transparent 55%);
    --lg-shadow: 0 12px 34px -12px rgba(0, 0, 0, 0.75), 0 2px 6px -2px rgba(0, 0, 0, 0.5);
    --lg-hover: rgba(235, 235, 245, 0.10);
    --card-lit: inset 0 1px 0 rgba(255, 255, 255, 0.07);
    --card-lift: 0 1px 2px rgba(0, 0, 0, 0.4), 0 16px 36px -22px rgba(0, 0, 0, 0.8);
  }
}

/* The rim: a 1 px ring that is bright where light hits the top edge and fades down the sides,
   drawn with a mask so it follows any corner radius. */
.site-head .wrap::before, .menu-panel::before, .btn-write::before, .btn-ghost::before, .clip-toggle::before, .all-feats > summary::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: var(--lg-rim);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}

/* ---------- The nav bar: a floating glass capsule ---------- */
html { scroll-padding-top: 84px; }
.site-head {
  top: 0; padding: 10px var(--gutter) 0;
  background: none; border-bottom: 0;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  pointer-events: none;
}
.site-head .wrap {
  pointer-events: auto; position: relative; z-index: 0;
  max-width: 1080px; height: 58px; padding: 0 9px 0 22px; border-radius: 999px;
  box-shadow: 0 0 0 0.5px var(--lg-edge), var(--lg-shadow);
}
/* The glass itself sits on a layer behind the bar's contents, so the bar doesn't become a
   "backdrop root": the menu that drops out of it can still blur the page under it. */
.site-head .wrap::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: var(--lg-sheen), var(--lg-fill);
  -webkit-backdrop-filter: var(--lg-bar-blur); backdrop-filter: var(--lg-bar-blur);
}
.site-head .wrap::before { z-index: 1; }
.nav { gap: 2px; }
.nav a:not(.btn) { border-radius: 999px; padding: 8px 13px; transition: background-color 0.2s, color 0.2s; }
.nav a:not(.btn):hover { background: var(--lg-hover); }
.nav .btn { margin-left: 6px; }
/* The button is a pill nested in the bar's pill: same shape, the same gap on every side
   (site.css's .nav a radius would otherwise turn it into a rounded rectangle). */
.nav .btn-small { border-radius: 999px; height: 40px; min-height: 0; padding: 0 17px; font-size: 15px; }
.nav .btn-write, .nav .btn-write:hover { box-shadow: inset 0 -1px 1px rgba(150, 80, 0, 0.18), 0 0 0 0.5px rgba(160, 90, 0, 0.28), 0 1px 3px -1px rgba(150, 80, 0, 0.3); }
@media (max-width: 760px) {
  .site-head { padding: 8px 8px 0; }
  .site-head .wrap { height: 54px; padding: 0 7px 0 18px; }
  .nav .btn-small { height: 40px; padding: 0 15px; }
}
/* Without blur support the bar is simply more opaque. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-head .wrap::after, .menu-panel { background: var(--bg); }
}

/* ---------- Menu: a glass popover that springs out of its button ---------- */
.menu summary { border-radius: 999px; padding: 8px 14px; transition: background-color 0.2s; }
.menu summary:hover, .menu[open] summary { background: var(--lg-hover); }
.menu-panel {
  top: calc(100% + 14px); right: -2px; min-width: 220px; padding: 7px; border: 0; border-radius: 24px;
  background: var(--lg-sheen), var(--lg-fill-strong);
  -webkit-backdrop-filter: var(--lg-blur); backdrop-filter: var(--lg-blur);
  box-shadow: 0 0 0 0.5px var(--lg-edge), 0 24px 50px -16px rgba(20, 16, 50, 0.35), 0 4px 12px -4px rgba(20, 16, 50, 0.12);
}
@media (prefers-color-scheme: dark) {
  .menu-panel { box-shadow: 0 0 0 0.5px var(--lg-edge), 0 24px 50px -12px rgba(0, 0, 0, 0.85); }
}
.menu-panel a { border-radius: 17px; padding: 12px 16px; font-weight: 500; transition: background-color 0.15s; }
.menu-panel a:hover { background: var(--lg-hover); }
.menu-panel a[aria-current="page"] { background: var(--lg-hover); }
@media (prefers-reduced-motion: no-preference) {
  .menu[open] .menu-panel { transform-origin: calc(100% - 40px) -10px; animation: lg-pop 0.42s var(--lg-spring) both; }
}
@keyframes lg-pop { from { opacity: 0; transform: scale(0.82); } 55% { opacity: 1; } }

/* ---------- Buttons ---------- */
.btn { position: relative; isolation: isolate; transition: transform 0.35s var(--lg-spring), box-shadow 0.25s, background-color 0.2s, filter 0.2s; }
@media (prefers-reduced-motion: no-preference) { .btn:active { transform: scale(0.96); transition-duration: 0.12s; } }

/* Primary: amber tinted glass. A lit top edge, a lens-like sheen across the top half, and light
   that seems to pass through it onto the page. */
.btn-write {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0) 52%),
    linear-gradient(180deg, #FFC15A, #FFB340 55%, #FCA730);
  box-shadow:
    inset 0 -1px 1px rgba(150, 80, 0, 0.18),
    0 0 0 0.5px rgba(160, 90, 0, 0.28),
    0 8px 22px -10px rgba(255, 140, 30, 0.85),
    0 2px 4px -1px rgba(150, 80, 0, 0.18);
}
.btn-write::before { background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.2) 45%, rgba(255, 255, 255, 0.05) 60%, rgba(255, 255, 255, 0.45)); }
.btn-write:hover { background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0) 52%),
    linear-gradient(180deg, #FFC86A, #FFBA50 55%, #FFAE3A);
  box-shadow: inset 0 -1px 1px rgba(150, 80, 0, 0.18), 0 0 0 0.5px rgba(160, 90, 0, 0.28), 0 12px 28px -10px rgba(255, 140, 30, 0.95), 0 2px 4px -1px rgba(150, 80, 0, 0.18); }
@media (prefers-color-scheme: dark) {
  .btn-write { box-shadow: inset 0 -1px 1px rgba(150, 80, 0, 0.25), 0 0 0 0.5px rgba(255, 200, 120, 0.3), 0 10px 28px -10px rgba(255, 140, 30, 0.6), 0 2px 4px -1px rgba(0, 0, 0, 0.4); }
}

/* Secondary: clear glass. */
.btn-ghost {
  border: 0; color: var(--text);
  background: var(--lg-sheen), var(--lg-fill);
  -webkit-backdrop-filter: var(--lg-blur); backdrop-filter: var(--lg-blur);
  box-shadow: 0 0 0 0.5px var(--lg-edge), 0 6px 18px -10px rgba(30, 24, 70, 0.25);
}
.btn-ghost:hover { background: var(--lg-sheen), var(--lg-fill-strong); }
@media (prefers-color-scheme: dark) { .btn-ghost { box-shadow: 0 0 0 0.5px var(--lg-edge), 0 6px 18px -10px rgba(0, 0, 0, 0.7); } }

/* "See every feature": the same clear glass. */
.all-feats > summary {
  position: relative; isolation: isolate; border: 0;
  background: var(--lg-sheen), var(--lg-fill);
  -webkit-backdrop-filter: var(--lg-blur); backdrop-filter: var(--lg-blur);
  box-shadow: 0 0 0 0.5px var(--lg-edge), 0 6px 18px -10px rgba(30, 24, 70, 0.25);
  transition: transform 0.35s var(--lg-spring), background-color 0.2s;
}
.all-feats > summary:hover { background: var(--lg-sheen), var(--lg-fill-strong); }
@media (prefers-reduced-motion: no-preference) { .all-feats > summary:active { transform: scale(0.96); transition-duration: 0.12s; } }

/* Clip play/pause: a small glass lens over the phone. */
.clip-toggle {
  border: 0 !important; width: 44px; height: 44px; isolation: isolate;
  background: radial-gradient(120% 120% at 30% -10%, rgba(255, 255, 255, 0.28), transparent 60%), rgba(28, 28, 34, 0.42);
  -webkit-backdrop-filter: blur(14px) saturate(180%); backdrop-filter: blur(14px) saturate(180%);
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.25), 0 8px 20px -8px rgba(0, 0, 0, 0.55);
  transition: transform 0.35s var(--lg-spring);
}
.clip-toggle::before { background: linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.12) 45%, rgba(255, 255, 255, 0.05) 60%, rgba(255, 255, 255, 0.3)); }
.clip-toggle:hover { transform: scale(1.06); }
@media (prefers-reduced-motion: no-preference) { .clip-toggle:active { transform: scale(0.92); transition-duration: 0.12s; } }

/* ---------- Pricing: the pinned plan row turns to glass while it floats over the list ---------- */
.compare .plan-row th { top: 76px; }
.compare.is-stuck .plan-row th {
  background: var(--lg-fill-strong);
  -webkit-backdrop-filter: var(--lg-blur); backdrop-filter: var(--lg-blur);
}
.compare.is-stuck .plan-row th:last-child { background: linear-gradient(var(--pro-tint), var(--pro-tint)), var(--lg-fill-strong); }
@media (max-width: 600px) {
  .compare.is-stuck thead .plan-row th { background: var(--lg-fill-strong); }
}

/* ---------- Content surfaces: lit edge and soft lift, no blur ---------- */
.small, .quote, .plan-card, .promise, .label-card, .help-card, .founder, .doc .summary {
  border-color: transparent;
  box-shadow: 0 0 0 0.5px var(--lg-edge), var(--card-lit), var(--card-lift);
}
.band.soft :where(.small, .quote, .plan-card, .promise, .founder) { background: var(--card); }
.label-card { box-shadow: 0 0 0 0.5px var(--lg-edge), var(--card-lit), var(--shadow); }
.plan-card.pro { border-color: transparent;
  box-shadow: 0 0 0 0.5px rgba(255, 179, 64, 0.55), inset 0 3px 0 var(--write), var(--card-lit), var(--card-lift); }
.testers.is-placeholder .quote { border: 1.5px dashed rgba(255, 179, 64, 0.7); box-shadow: var(--card-lit), var(--card-lift); }

/* Chips and pills: small capsules with a lit top edge. */
.chips li, .toc a {
  border-color: transparent;
  box-shadow: 0 0 0 0.5px var(--lg-edge), var(--card-lit), 0 1px 2px rgba(20, 20, 40, 0.05);
}
.next .chips li { box-shadow: none; border-color: var(--line); }

/* ---------- The bar, round 2 (Gus, 2026-11-06): clearer, more liquid glass, and it gets out of the way ----------
   Less blur and a thinner fill so the page reads through like water; a brighter specular rim and an inner glow
   along the bottom edge give the "liquid" thickness. nav.js hides the bar while you scroll down and brings it back
   as soon as you scroll up a little. */
:root {
  --lg-bar-fill: rgba(255, 255, 255, 0.6);
  --lg-bar-blur: blur(6px) saturate(210%) brightness(1.06) contrast(1.02);
  --lg-bar-depth: inset 0 1px 1px rgba(255, 255, 255, 0.9), inset 0 -8px 16px -10px rgba(255, 255, 255, 0.7), inset 0 0 0 0.5px rgba(255, 255, 255, 0.35);
}
@media (prefers-color-scheme: dark) {
  :root {
    --lg-bar-fill: rgba(28, 28, 34, 0.52);
    --lg-bar-blur: blur(6px) saturate(190%) brightness(0.9) contrast(1.04);
    --lg-bar-depth: inset 0 1px 1px rgba(255, 255, 255, 0.22), inset 0 -8px 16px -10px rgba(255, 255, 255, 0.12), inset 0 0 0 0.5px rgba(255, 255, 255, 0.08);
  }
}
.site-head .wrap::after { background: var(--lg-sheen), var(--lg-bar-fill); box-shadow: var(--lg-bar-depth); }
/* Only transform moves. Opacity or will-change on an ancestor would make it a "backdrop root" and the glass
   would lose its blur mid-animation (the flicker), so neither is used here. */
.site-head { transition: transform 0.42s cubic-bezier(0.2, 0.9, 0.25, 1); }
html.nav-away .site-head { transform: translate3d(0, calc(-100% - 40px), 0); }
@media (prefers-reduced-motion: reduce) { .site-head { transition: none; } }
@media (prefers-reduced-transparency: reduce) { .site-head .wrap::after { background: var(--bg); } }
/* The pinned Free/Pro row follows the bar up when it steps away. */
.compare .plan-row th { transition: top 0.42s cubic-bezier(0.2, 0.9, 0.25, 1); }
html.nav-away .compare .plan-row th { top: 0; }
/* A thinner outline on the bar (Gus): half-point rim, a softer hairline outside it, no extra inner ring. */
.site-head .wrap::before { padding: 0.5px; opacity: 0.8; }
.site-head .wrap { box-shadow: 0 0 0 0.5px color-mix(in srgb, var(--lg-edge) 60%, transparent), var(--lg-shadow); }
:root { --lg-bar-depth: inset 0 0.5px 0.5px rgba(255, 255, 255, 0.85), inset 0 -8px 16px -10px rgba(255, 255, 255, 0.7); }
@media (prefers-color-scheme: dark) { :root { --lg-bar-depth: inset 0 0.5px 0.5px rgba(255, 255, 255, 0.2), inset 0 -8px 16px -10px rgba(255, 255, 255, 0.12); } }