/* ───────────────────────────────────────────────────────────────
   Sitehouse — landing hero
   Full-bleed footage with a glass navigation over it. This one block
   is dark by design and does not follow the theme toggle: the video
   is the ground, so ink and paper have nothing to do here.

   Loaded last, after tailwind.css, so .duration-400 wins over the
   150ms that comes with transition-all.
   ─────────────────────────────────────────────────────────────── */
@import url("https://db.onlinewebfonts.com/c/08e020de1811ec4489f82d1247a42c09?family=Helvetica+Now+Text");

/* Scoped, not global — Instrument Serif and Inter still run the rest
   of the site. */
.fp-hero,
.fp-hero * {
  font-family: "Helvetica Now Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;
}

/* Small viewports: the dynamic unit, so browser chrome cannot push the
   buttons under the fold. The ground under the video is the same near
   black as the reel, so a slow first frame reads as intent. */
.fp-hero {
  height: 100svh;
  background: #08090a;
}

.liquid-glass {
  background: rgba(255, 255, 255, 0.01);
  background-blend-mode: luminosity;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: none;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
}

.liquid-glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.4px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.45) 0%,
    rgba(255, 255, 255, 0.15) 20%,
    rgba(255, 255, 255, 0) 40%,
    rgba(255, 255, 255, 0) 60%,
    rgba(255, 255, 255, 0.15) 80%,
    rgba(255, 255, 255, 0.45) 100%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

@keyframes dropdown-in {
  from {
    opacity: 0;
    transform: translateY(-4px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.animate-dropdown {
  animation: dropdown-in 0.2s ease-out;
}

.duration-400 {
  transition-duration: 400ms;
}

/* The page header is the nav for everything below the hero. While the
   hero is on screen the hero carries its own, so the header waits. */
/* Taken out of the flow on this page only: sticky reserves its own
   height at the top of the document, which would push a full-height
   hero below the fold. Fixed overlays instead, so the footage starts
   at y=0 and the header still rides the top once it is let back in.

   No transition until the first frame has settled, or the header
   would slide away in front of the visitor on every load. */
.fp-header {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  transition: none;
}

html[data-hero-ready] .fp-header {
  transition: transform 400ms cubic-bezier(0.16, 1, 0.3, 1), opacity 250ms ease;
}

html[data-hero-visible] .fp-header {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .animate-dropdown {
    animation: none;
  }
  .fp-header,
  .fp-hero [data-hero-menu] {
    transition: none;
  }
}

/* ───────────────────────────────────────────────────────────────
   The one navigation
   Three things and nothing else: the mark, Monthly, Log in. It is on
   every screen at every scroll position, so it is a grid rather than a
   flex row — the middle link has to sit on the page's centre line, not
   wherever the two sides happen to leave it.

   Over the hero it is glass on dark footage. Past the hero it takes the
   page's own tokens, so it follows light and dark mode without a second
   set of colours. (Skill rule #2: a fixed nav must not obscure content —
   only the hero sits under it, and the hero is a full screen tall.)
   ─────────────────────────────────────────────────────────────── */
.fp-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem clamp(1.1rem, 4vw, 3rem);
  padding-top: calc(0.9rem + env(safe-area-inset-top, 0px));
  font-family: 'Inter', system-ui, sans-serif;
  background: transparent;
  pointer-events: none;
}
.fp-nav > * { pointer-events: auto; }

.fp-nav a { text-decoration: none; color: rgb(var(--c-ink)); }

.fp-nav-brand {
  justify-self: start;
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.015em;
}
.fp-nav-dot { width: 12px; height: 12px; border-radius: 3px; background: rgb(var(--c-accent)); display: block; flex: none; }

/* Past the hero: the page's own surface, in whichever theme is on. */

.fp-nav a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 999px; }

/* The theme control, seated with the account link. theme.js mounts it
   into the last flex child of the nav, so it lands here. */

/* The hero dissolves into whatever the page is standing on, so the band
   resolves to the page token and follows light and dark on its own. */
.fp-hero-fade {
  position: absolute; left: -1px; right: -1px; bottom: -1px; z-index: 2;
  height: 46vh; pointer-events: none;
  background: linear-gradient(180deg,
    rgb(var(--c-paper) / 0) 0%,
    rgb(var(--c-paper) / 0.06) 26%,
    rgb(var(--c-paper) / 0.22) 46%,
    rgb(var(--c-paper) / 0.52) 64%,
    rgb(var(--c-paper) / 0.82) 80%,
    rgb(var(--c-paper)) 94%,
    rgb(var(--c-paper)) 100%);
}
/* The section below starts on the same colour the band resolves to, so
   the two are continuous rather than merely close. */
.fp-hero + section,
.fp-hero + * { background: rgb(var(--c-paper)); }

/* ── Hero ──────────────────────────────────────────────────────
   The footage is graded red; the wash only has to keep white type off
   the brightest petals and darken the foot of the frame. */
.fp-hero-media { position: absolute; inset: 0; z-index: 0; background: #0b0709; }
.fp-hero-media video {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: var(--focus, center center);
  opacity: 0; transition: opacity 900ms ease;
}
.fp-hero[data-backdrop="on"] .fp-hero-media video { opacity: 1; }

.fp-hero-copy {
  flex: 1 1 auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: 6rem clamp(1.25rem, 5vw, 2rem) 4rem;
  max-width: 54rem; margin: 0 auto;
}

.fp-badge {
  display: inline-flex; align-items: center; gap: 0.6rem; margin: 0 0 1.6rem;
  height: 34px; padding: 0 0.95rem 0 1.05rem; border-radius: 999px;
  background: rgb(24 12 14 / 0.72);
  -webkit-backdrop-filter: blur(7px) saturate(120%); backdrop-filter: blur(7px) saturate(120%);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.22), 0 6px 18px rgb(0 0 0 / 0.18);
  white-space: nowrap;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.6875rem; letter-spacing: 0.15em; text-transform: uppercase;
}
.fp-badge svg { width: 15px; height: 14.3px; flex: none; }

.fp-hero-h {
  margin: 0;
  font-family: 'Outfit', 'Inter', sans-serif;
  font-variation-settings: 'wght' 560;
  font-size: clamp(2.4rem, 6.4vw, 5rem);
  line-height: 0.98; letter-spacing: -0.03em;
  text-wrap: balance;
}

.fp-hero-p {
  margin: 1.5rem 0 0; max-width: 34rem;
  font-size: clamp(0.9375rem, 1.4vw, 1.0625rem); line-height: 1.6;
}

.fp-hero-cta { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; margin-top: 2.2rem; }

.fp-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0.9rem 1.6rem; border-radius: 999px;
  font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.005em;
  text-decoration: none;
  transition: transform 220ms cubic-bezier(.22,1,.36,1), box-shadow 220ms ease,
              background-color 200ms ease, color 200ms ease;
}
.fp-btn:hover { transform: translateY(-2px); }
.fp-btn:active { transform: translateY(0); }
.fp-btn--solid { background: #fff; color: #14161a; box-shadow: 0 6px 22px rgb(0 0 0 / 0.26); }
.fp-btn--solid:hover { box-shadow: 0 12px 32px rgb(0 0 0 / 0.32); }
.fp-btn--glass {
  color: #fff; border: 1px solid rgb(255 255 255 / 0.46);
  background: rgb(255 255 255 / 0.06);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.fp-btn--glass:hover { background: rgb(255 255 255 / 0.16); }
.fp-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

@media (max-width: 640px) {
  .fp-hero-copy { padding-top: 5.5rem; padding-bottom: 3rem; }
  .fp-hero-cta { flex-direction: column; width: 100%; max-width: 22rem; }
  .fp-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .fp-hero-media video { transition: none; }
  .fp-btn, .fp-nav { transition: none; }
  .fp-btn:hover { transform: none; }
}

/* ── The hero in both modes ────────────────────────────────────
   Dark mode gets the dark grade and white type. Light mode gets the
   white grade — and dark type, because white letters on a white ground
   are not a contrast problem, they are an invisible headline. The two
   scrims are mirror images: each one only has to hold its own type off
   the petals.

   Written light-first on bare :root, with dark redefined under both the
   explicit toggle and the system preference, the way theme.css does it. */
.fp-hero-wash {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(74% 52% at 50% 45%,
      rgb(255 255 255 / 0.80) 0%,
      rgb(255 255 255 / 0.42) 52%,
      rgb(255 255 255 / 0) 100%),
    linear-gradient(180deg,
      rgb(255 255 255 / 0.55) 0%,
      rgb(255 255 255 / 0) 22%);
}
.fp-hero-h { color: rgb(var(--c-ink)); }
.fp-hero-p { color: rgb(var(--c-ink-mid)); }
.fp-badge { background: rgb(22 18 19 / 0.86); color: #fff; }
.fp-btn--solid { background: rgb(var(--c-ink)); color: rgb(var(--c-paper)); box-shadow: 0 6px 22px rgb(0 0 0 / 0.16); }
.fp-btn--glass {
  color: rgb(var(--c-ink)); border-color: rgb(var(--c-ink) / 0.28);
  background: rgb(255 255 255 / 0.5);
}
.fp-btn--glass:hover { background: rgb(255 255 255 / 0.8); }

:root[data-theme="dark"] .fp-nav a { color: #fff; text-shadow: 0 1px 14px rgb(0 0 0 / 0.45); }
:root[data-theme="dark"] .fp-nav-btn {
  border-color: rgb(255 255 255 / 0.34); background: rgb(255 255 255 / 0.1); color: #fff;
}
:root[data-theme="dark"] .fp-nav-btn:hover { background: #fff; border-color: #fff; color: #14161a; }
:root[data-theme="dark"] .fp-hero-wash {
  background:
    linear-gradient(180deg,
      rgb(8 5 7 / 0.62) 0%,
      rgb(8 5 7 / 0.26) 22%,
      rgb(8 5 7 / 0.30) 55%,
      rgb(8 5 7 / 0.72) 100%),
    radial-gradient(120% 88% at 50% 38%,
      rgb(0 0 0 / 0) 40%,
      rgb(0 0 0 / 0.34) 100%);
}
:root[data-theme="dark"] .fp-hero-h { color: #fff; }
:root[data-theme="dark"] .fp-hero-p { color: rgb(255 255 255 / 0.95); }
:root[data-theme="dark"] .fp-badge { background: rgb(24 12 14 / 0.72); }
:root[data-theme="dark"] .fp-btn--solid { background: #fff; color: #14161a; box-shadow: 0 6px 22px rgb(0 0 0 / 0.26); }
:root[data-theme="dark"] .fp-btn--glass { color: #fff; border-color: rgb(255 255 255 / 0.46); background: rgb(255 255 255 / 0.06); }
:root[data-theme="dark"] .fp-btn--glass:hover { background: rgb(255 255 255 / 0.16); }
:root[data-theme="dark"] .fp-nav:not(.is-solid) a { color: #fff; text-shadow: 0 1px 14px rgb(0 0 0 / 0.45); }
:root[data-theme="dark"] .fp-nav:not(.is-solid) .fp-nav-login { border-color: rgb(255 255 255 / 0.4); }
:root[data-theme="dark"] .fp-nav:not(.is-solid) .fp-nav-login:hover { background: #fff; color: #14161a; }
:root[data-theme="dark"] .fp-nav:not(.is-solid) .fp-nav-mid:hover { background: rgb(255 255 255 / 0.12); }
:root[data-theme="dark"] .fp-nav:not(.is-solid) .theme-toggle {
  border-color: rgb(255 255 255 / 0.4); background: rgb(255 255 255 / 0.06); color: #fff;
}
:root[data-theme="dark"] .fp-nav:not(.is-solid) .theme-toggle:hover { background: #fff; color: #14161a; }

/* ───────────────────────────────────────────────────────────────
   The menu
   The bar shows the mark and one control. Pricing, features, the
   monthly services, the account link and the theme switch all live
   behind it, so the top of the page stays off the picture — which is
   the point of a full-bleed hero.
   ─────────────────────────────────────────────────────────────── */
.fp-nav-btn {
  display: inline-flex; align-items: center; gap: 0.55rem;
  min-height: 40px; padding: 0 0.95rem;
  border-radius: 999px; cursor: pointer;
  font-family: inherit; font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.01em;
  border: 1px solid rgb(var(--c-ink) / 0.26);
  background: rgb(255 255 255 / 0.44);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: rgb(var(--c-ink));
  transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}
.fp-nav-btn svg { width: 19px; height: 19px; flex: none; }
.fp-nav-btn:hover { background: rgb(var(--c-ink)); border-color: rgb(var(--c-ink)); color: rgb(var(--c-paper)); }
.fp-nav-btn--icon { padding: 0; width: 40px; justify-content: center; }
.fp-nav-btn--icon .fp-nav-btn-label { display: none; }
.fp-nav-btn:focus-visible { outline: 2px solid rgb(var(--c-accent)); outline-offset: 3px; }

.site-menu { position: fixed; inset: 0; z-index: 90; }
.site-menu[hidden] { display: none; }
.site-menu-scrim {
  position: absolute; inset: 0; border: 0; padding: 0; cursor: pointer;
  background: rgb(8 6 7 / 0.42);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  opacity: 0; transition: opacity 260ms ease;
}
.site-menu.is-open .site-menu-scrim { opacity: 1; }

.site-menu-panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(23rem, 88vw);
  display: flex; flex-direction: column;
  padding: 0.9rem clamp(1.25rem, 4vw, 1.75rem) calc(1.5rem + env(safe-area-inset-bottom, 0px));
  padding-top: calc(0.9rem + env(safe-area-inset-top, 0px));
  background: rgb(var(--c-paper));
  border-left: 1px solid rgb(var(--c-line));
  box-shadow: -18px 0 48px rgb(0 0 0 / 0.18);
  transform: translateX(100%);
  transition: transform 340ms cubic-bezier(0.22, 1, 0.36, 1);
  overflow-y: auto; overscroll-behavior: contain;
}
.site-menu.is-open .site-menu-panel { transform: translateX(0); }

.site-menu-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.site-menu-head .fp-nav-brand { color: rgb(var(--c-ink)); text-shadow: none; }

.site-menu-links { display: flex; flex-direction: column; margin-top: 1.75rem; }
.site-menu-links a {
  padding: 0.85rem 0;
  border-bottom: 1px solid rgb(var(--c-line));
  color: rgb(var(--c-ink)); text-decoration: none;
  font-family: 'Outfit', 'Inter', sans-serif;
  font-variation-settings: 'wght' 560;
  font-size: 1.5rem; letter-spacing: -0.04em; line-height: 1.1;
  transition: color 160ms ease;
}
.site-menu-links a:hover { color: rgb(var(--c-accent-text)); }

.site-menu-foot { margin-top: auto; padding-top: 1.75rem; display: grid; gap: 0.7rem; }
.site-menu-login,
.site-menu-cta {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; border-radius: 999px; text-decoration: none;
  font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.005em;
  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease;
}
.site-menu-login { border: 1px solid rgb(var(--c-line-firm)); color: rgb(var(--c-ink)); }
.site-menu-login:hover { border-color: rgb(var(--c-accent)); color: rgb(var(--c-accent-text)); }
.site-menu-cta { background: rgb(var(--c-accent)); color: rgb(var(--c-on-accent)); }
.site-menu-cta:hover { background: rgb(var(--c-accent-hi)); }
.site-menu-theme .theme-toggle { width: 100%; height: 52px; border-radius: 999px; gap: 0.6rem; font-weight: 600; }

body.menu-locked { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .site-menu-scrim, .site-menu-panel { transition: none; }
}

/* ── The menu cannot block the page ────────────────────────────
   Belt and braces after the iOS bug: even if the hidden attribute
   fails to come back for any reason, a menu that is not .is-open
   passes every pointer straight through to the page underneath. It
   can be invisible, but it can never be in the way. */
.site-menu:not(.is-open) { pointer-events: none; }
.site-menu.is-open { pointer-events: auto; }

/* iOS ignores overflow:hidden on body once the page has momentum, so
   the panel takes the scroll instead of letting it chain to the page. */
body.menu-locked { overflow: hidden; overscroll-behavior: none; }
.site-menu-panel { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }

/* ── The panel, made for a phone ───────────────────────────────
   Full width under 520px rather than a 23rem sheet with a dead strip
   beside it, rows big enough to hit, and the safe area respected so
   the last item is not under the home indicator. */
@media (max-width: 519px) {
  .site-menu-panel { width: 100%; }
}
.site-menu-panel {
  padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
}

.site-menu-links a {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 54px;
}
/* A chevron on each row, so it reads as somewhere to go rather than
   as a list of words. */
.site-menu-links a::after {
  content: ''; width: 8px; height: 8px; flex: none;
  border-right: 2px solid rgb(var(--c-ink) / 0.28);
  border-bottom: 2px solid rgb(var(--c-ink) / 0.28);
  transform: rotate(-45deg);
  transition: transform 180ms ease, border-color 180ms ease;
}
.site-menu-links a:hover::after,
.site-menu-links a:active::after {
  border-color: rgb(var(--c-accent));
  transform: rotate(-45deg) translate(2px, 2px);
}

/* The settings block at the bottom: theme on one row, language and
   currency under it. Grouped and labelled so it is obviously settings
   and not more navigation. */
.site-menu-set {
  margin-top: 1.1rem; padding-top: 1.1rem;
  border-top: 1px solid rgb(var(--c-line));
}
.site-menu-set-l {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.625rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgb(var(--c-ink-soft)); margin-bottom: 0.6rem;
}
.site-menu-theme .theme-toggle {
  width: 100%; height: 48px; gap: 0.6rem; border-radius: 0.55rem;
  font-weight: 600; justify-content: center;
}

/* ── Landing-page nav links ────────────────────────────────────
   The bar was the mark and one control, which is right over a
   full-bleed hero — but Extras and the free page were then two taps
   away behind a menu, on the page that most people land on. They come
   out onto the bar from 640px up; below that the menu still holds
   everything, because a phone bar cannot carry four things and stay
   tappable. */
.fp-nav-right { display: flex; align-items: center; gap: 0.35rem; pointer-events: auto; }

.fp-nav-link {
  display: none;
  align-items: center; min-height: 40px; padding: 0 0.85rem;
  border-radius: 999px; text-decoration: none;
  font-size: 0.9375rem; font-weight: 500; letter-spacing: -0.01em;
  color: inherit;
  transition: background-color 180ms ease, color 180ms ease;
}
@media (min-width: 640px) { .fp-nav-link { display: inline-flex; } }
.fp-nav-link:hover { background: rgb(var(--c-ink) / 0.08); }

.fp-nav-link--free {
  font-weight: 600; color: rgb(var(--c-accent));
  background: rgb(var(--c-accent) / 0.1);
}
.fp-nav-link--free:hover { background: rgb(var(--c-accent)); color: #fff; }

:root[data-theme="dark"] .fp-nav:not(.is-solid) .fp-nav-link { color: #fff; }
:root[data-theme="dark"] .fp-nav:not(.is-solid) .fp-nav-link:hover { background: rgb(255 255 255 / 0.14); }