/* Filtyr home hero v2, "Storm outside, order inside" (issue #14), built on v1 (#13). A dark, rainy
   freight dock loops behind the headline (AI footage, mood only), and in front of it floats a sharp
   HTML copy of the real Filtyr app: rail, one Group's list, one conversation. Freight mail tumbles in
   out of the rain, a coral rule line sweeps through, and each email lands as a row with an owner. The
   scroll story then follows one email through routing as it works today, the app folds into the
   Filtyr mark, and the rest of the home page slides up over it as one sheet (.hx-curtain).
   Design: docs/superpowers/specs/2026-10-18-filtyr-hero-v2-design.md (v1:
   docs/superpowers/specs/2026-10-17-filtyr-hero-motion-design.md).

   Scoping, so this file and home.css can never restyle each other's parts of the page:
   - every class, custom property and keyframe here starts with hx-, and nothing in home.css or
     styles.css does, so no selector in either file can match the other's elements;
   - every hero rule also sits under .hx (the header and the scene wrap carry it). That outranks the
     element rules the live stylesheets set on h1-h3 and a (".home h1" and ".home a" are 0,1,1).
   Default rules are the settled page (JS off, reduced motion); everything under html.motion is the
   cinematic version that js/hero.js drives.
   Inside the app window only the brand kit v2 Product UI palette is used (--hx-ui-*, copied from
   filty-brand-kit-v2/web/brand-tokens.css). Coral there means active, selected or focus, nothing else.
   Contrast: Paper on Ink 16.2:1, Soft on Ink 11.6:1, muted #A4A9B0 on Ink 7.5:1, Coral on Ink 5.85:1.
   In the app: Ink on White 18.1:1, #5A616B on White 6.4:1, #3A414B on #E0EFFC 9.0:1, White on
   #1A5DAB 6.6:1, #A9B0BA on #12161C 8.7:1, White on #3A424D 10.3:1. */

:root {
  --hx-ink: #12161C;
  --hx-coral: #FF5A36;
  --hx-paper: #F4F2EC;
  --hx-white: #FFFFFF;
  --hx-slate: #5A616B;
  --hx-surface: #1D232B;
  --hx-line: #2E3540;
  --hx-muted: #A4A9B0;
  --hx-soft: #CFCCC4;
  --hx-font: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  --hx-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --hx-gutter: 16px;
  --hx-persp: 1100px;

  /* The settled app window: its scale and the height of the stage that holds it. */
  --hx-static-scale: 0.92;
  --hx-static-h: 600px;

  /* The pinned scene: exactly one screen tall (the small viewport on phones, so a toolbar never
     hides its bottom). On a short screen the headline, the lede and both buttons must still fit at
     the top of the page, so there is no minimum height. */
  --hx-sh: 100vh;
  --hx-story-screens: 7;
}

@supports (height: 100svh) { :root { --hx-sh: 100svh; } }

@media (max-width: 600px) { :root { --hx-story-screens: 6.4; } }
@media (min-width: 601px) { :root { --hx-static-scale: 0.5; --hx-static-h: 400px; } }
@media (min-width: 720px) { :root { --hx-gutter: 40px; } }
@media (min-width: 760px) { :root { --hx-persp: 1600px; --hx-static-scale: 0.6; --hx-static-h: 470px; } }
@media (min-width: 1024px) { :root { --hx-static-scale: 0.78; --hx-static-h: 600px; } }
@media (min-width: 1280px) { :root { --hx-gutter: 64px; --hx-static-scale: 0.88; --hx-static-h: 680px; } }

/* The seam where the page sheet meets the story. In light mode White on Ink draws it; in dark mode
   the sheet is Ink too, so a Paper hairline draws it. */
:root { --hx-edge: rgba(244, 242, 236, 0); }

@media (prefers-color-scheme: dark) {
  :root { --hx-edge: rgba(244, 242, 236, 0.16); }
}

/* Base. The hero is Paper on Ink in both color schemes; the page around it is not. */

.hx {
  color: var(--hx-paper);
  font-family: var(--hx-font);
  font-size: 1.0625rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* Brand kit v2, Product UI (brand-tokens.css lines 17-76), for the app window only. */
  --hx-ui-bg: #FFFFFF;
  --hx-ui-bg-subtle: #F5F6F8;
  --hx-ui-bg-selected: #EEF1F5;
  --hx-ui-border: #E2E5EA;
  --hx-ui-border-strong: #C9CED6;
  --hx-ui-text: #12161C;
  --hx-ui-text-muted: #5A616B;
  --hx-ui-focus: #FF5A36;
  --hx-ui-nav-bg: #12161C;
  --hx-ui-nav-text: #A9B0BA;
  --hx-ui-nav-text-active: #FFFFFF;
  --hx-ui-nav-item-active: #262C35;
  --hx-ui-nav-indicator: #FF5A36;
  --hx-ui-nav-count-bg: #3A424D;
  --hx-ui-nav-count-text: #FFFFFF;
  --hx-ui-msg-in-bg: #FFFFFF;
  --hx-ui-msg-in-header: #E0EFFC;
  --hx-ui-msg-in-border: #AECFF2;
  --hx-ui-msg-in-accent: #1A5DAB;
  --hx-ui-msg-in-header-text: #3A414B;
  --hx-ui-msg-out-bg: #FFFFFF;
  --hx-ui-msg-out-header: #E5F4EB;
  --hx-ui-msg-out-border: #B7DDC6;
  --hx-ui-msg-out-badge-bg: #146C43;
  --hx-ui-msg-out-badge-text: #FFFFFF;
  --hx-ui-msg-out-header-text: #3A414B;
  --hx-ui-msg-note-bg: #FFE7DB;
  --hx-ui-msg-note-border: #F6BFA9;
  --hx-ui-msg-note-label: #9A3412;
  --hx-ui-msg-note-quote-bg: #FFF3EC;
  --hx-ui-msg-val-bg: #F5E9FD;
  --hx-ui-msg-val-border: #DDC4F5;
  --hx-ui-msg-val-accent: #7A33B8;
  --hx-ui-tag-bg: #EEF1F5;
  --hx-ui-tag-text: #3A414B;
  --hx-ui-mention-bg: #FFFFFF;
  --hx-ui-mention-border: #F6BFA9;
  --hx-ui-mention-text: #9A3412;
  --hx-ui-btn-primary-bg: #FF5A36;
  --hx-ui-btn-primary-text: #12161C;
  --hx-ui-btn-secondary-bg: #FFFFFF;
  --hx-ui-btn-secondary-border: #C9CED6;
  --hx-ui-btn-secondary-text: #12161C;

  /* The app window's geometry, in window pixels. js/hero.js reads the real values from layout. The
     window is a laptop-short 640 px, so a short conversation fills its pane instead of leaving a
     tall blank under it. */
  --hx-app-w: 1180px;
  --hx-app-h: 640px;
  --hx-rail-w: 236px;
  --hx-list-w: 312px;
  --hx-list-head-h: 46px;
  --hx-row-h: 58px;
  --hx-sb-x: 20px;
  --hx-sb-y: 16px;
  --hx-fly-w: 300px;
  --hx-fly-h: 92px;
}

/* Phones: the rail collapses to its icons, and the list sits over the conversation. */
@media (max-width: 600px) {
  .hx {
    --hx-app-w: 360px;
    --hx-app-h: 640px;
    --hx-rail-w: 48px;
    --hx-list-head-h: 44px;
    --hx-row-h: 54px;
    --hx-sb-x: 12px;
    --hx-sb-y: 12px;
    --hx-fly-w: 280px;
    --hx-fly-h: 88px;
  }
}

/* styles.css sizes and spaces every h1-h3, and home.css colors them Ink. The hero's headings take
   their color from the hero and their metrics from the rules below. */
.hx h1,
.hx h2,
.hx h3 {
  color: inherit;
  font-weight: 700;
  line-height: normal;
  letter-spacing: normal;
}

.hx a { color: inherit; }

.hx :focus-visible {
  outline: 2px solid var(--hx-coral);
  outline-offset: 3px;
  border-radius: 6px;
}

.hx .hx-nowrap { white-space: nowrap; }

/* Behind the stuck scene. When the scene eases back under the sheet, its edges show this Ink, not
   the page's White. */
.hx-wrap { background: var(--hx-ink); }

/* The canvas outside the page (overscroll at the top and bottom) matches the Ink hero and footer.
   The body still paints its own background over the whole page. */
html { background-color: var(--hx-ink); }

/* Paper on the dark hero. ".home" outranks home.css's ".home a" color. */
/* Off screen by its own full height until it has focus, so no sliver shows at any text size. */
.home .hx-skip {
  position: absolute;
  left: 12px;
  top: 0;
  z-index: 50;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--hx-paper);
  color: var(--hx-ink);
  font-weight: 500;
  text-decoration: none;
  transform: translateY(-120%);
}

.home .hx-skip:focus { transform: translateY(12px); }

/* Header: sits over the stage, scrolls away with the page. */

.hx-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px var(--hx-gutter);
}

.hx .hx-wordmark { display: block; }

.hx .hx-logo {
  display: block;
  width: 112px;
  height: auto;
}

.hx .hx-nav {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 0.9375rem;
  font-weight: 500;
}

.hx .hx-nav a {
  color: var(--hx-paper);
  text-decoration: none;
  white-space: nowrap;
  padding: 6px 0;
}

.hx .hx-nav a:hover { text-decoration: underline; text-underline-offset: 4px; }

.hx .hx-nav .hx-nav-signin {
  padding: 7px 16px;
  border: 1.5px solid rgba(244, 242, 236, 0.45);
  border-radius: 999px;
}

.hx .hx-nav .hx-nav-signin:hover {
  background: var(--hx-paper);
  border-color: var(--hx-paper);
  color: var(--hx-ink);
  text-decoration: none;
}

@media (min-width: 720px) {
  .hx-header { padding-top: 26px; }
  .hx .hx-logo { width: 132px; }
  .hx .hx-nav { gap: 28px; font-size: 1rem; }
}

/* Narrow phones (320-379 px): the logo, both links and the Sign in pill stay on one line, so the
   pill never wraps down onto Pause motion. */
@media (max-width: 379px) {
  .hx-header { gap: 8px; }
  .hx .hx-logo { width: 92px; }
  .hx .hx-nav { gap: 10px; font-size: 0.875rem; }
  .hx .hx-nav .hx-nav-signin { padding: 5px 11px; }
}

/* The scene. Settled layout by default: the copy over a still of the dock, the app, the beats. */

.hx .hx-scene {
  position: relative;
  display: flex;
  flex-direction: column;
  padding-top: 88px;
  overflow: clip;
  background: var(--hx-ink);
}

/* The dock footage: the back layer, outside the stage, never less than a full screen. Chromium
   treats a full-viewport image or video as background and leaves it out of Largest Contentful
   Paint, so the headline stays the largest paint. The still is a CSS background, so it shows with
   JavaScript off; the loop fades in over it only once it is really playing. */
.hx .hx-footage {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 0;
  height: max(100vh, 560px);
  overflow: hidden;
  pointer-events: none;
  background: var(--hx-ink) url("/media/dock-poster-desktop.c3c9ee04.avif") 50% 40% / cover no-repeat;
}

@media (max-width: 600px) {
  .hx .hx-footage {
    background-image: url("/media/dock-still-phone.8c912e38.avif");
    background-position: 50% 30%;
  }
}

.hx .hx-footage-video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
  opacity: 0;
  transition: opacity 1.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.hx .hx-footage.is-playing .hx-footage-video { opacity: 1; }

/* Ink over the footage: it is mood, never a rival to the words. Strong enough on its own for the
   settled page, where the copy sits straight on it, and it runs out into the Ink below. */
.hx .hx-footage::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(18, 22, 28, 0.35) 0%, rgba(18, 22, 28, 0) 45%, rgba(18, 22, 28, 0.25) 100%),
    linear-gradient(180deg, rgba(18, 22, 28, 0.72) 0%, rgba(18, 22, 28, 0.66) 40%, rgba(18, 22, 28, 0.82) 72%, var(--hx-ink) 100%);
}

.hx .hx-hero {
  order: 1;
  position: relative;
  z-index: 5;
  padding: 28px var(--hx-gutter) 8px;
}

.hx .hx-hero-title {
  margin: 0;
  font-size: clamp(2.875rem, 12.2vw, 8.75rem);
  line-height: 0.92;
  letter-spacing: -0.045em;
  color: var(--hx-paper);
}

.hx .hx-hero-title .hx-line,
.hx .hx-hero-title .hx-line-text { display: block; }

.hx .hx-hero-title .hx-line-accent {
  position: relative;
  padding-left: 0.78em;
}

.hx .hx-hero-dot {
  position: absolute;
  left: 0.06em;
  top: 0.3em;
  width: 0.46em;
  height: 0.46em;
  border-radius: 50%;
  background: var(--hx-coral);
}

.hx .hx-hero-side { margin-top: 28px; }

.hx .hx-hero-lede {
  max-width: 36ch;
  margin: 0 0 24px;
  font-size: clamp(1.0625rem, 1.3vw, 1.3rem);
  line-height: 1.45;
  color: var(--hx-soft);
}

/* The footage's label: on screen with it from the first frame, quiet beside the buttons. With motion
   it sits on the scrim's solid Ink (muted, 7.5:1); settled it sits on the still itself, so it takes
   the lede's lighter ink to stay above 4.5:1 over the brightest patch. */
.hx .hx-ai-note {
  margin: 14px 0 0;
  color: var(--hx-soft);
  font-size: 0.8125rem;
  line-height: 1.4;
}

html.motion .hx .hx-ai-note { color: var(--hx-muted); }

.hx .hx-cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
}

.hx .hx-btn {
  display: inline-block;
  padding: 13px 22px;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.hx .hx-btn:active { transform: translateY(1px); }

.hx .hx-btn-primary {
  background: var(--hx-coral);
  border: 1.5px solid var(--hx-coral);
  color: var(--hx-ink);
}

.hx .hx-btn-primary:hover {
  background: var(--hx-paper);
  border-color: var(--hx-paper);
}

.hx .hx-btn-secondary {
  border: 1.5px solid rgba(244, 242, 236, 0.55);
  color: var(--hx-paper);
}

.hx .hx-btn-secondary:hover {
  background: var(--hx-paper);
  border-color: var(--hx-paper);
  color: var(--hx-ink);
}

/* The scroll cue only exists when there is a scroll story to follow. */
.hx .hx-scroll-cue { display: none; }

@media (min-width: 720px) {
  .hx .hx-btn { padding: 15px 28px; }
  .hx .hx-cta-row { gap: 12px 16px; }
}

@media (min-width: 1024px) {
  .hx .hx-hero {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 24px;
    align-items: end;
  }
  .hx .hx-hero-title { grid-column: 1 / 9; font-size: min(8.4vw, 8.75rem); }
  .hx .hx-hero-side { grid-column: 9 / -1; margin: 0; }
}

/* The 3D field */

.hx .hx-stage {
  order: 2;
  position: relative;
  z-index: 1;
  height: var(--hx-static-h);
  margin: 12px 0;
  perspective: var(--hx-persp);
  perspective-origin: 50% 45%;
  overflow: clip;
  pointer-events: none;
  user-select: none;
}

.hx .hx-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.hx .hx-tilt {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
}

.hx .hx-rig,
.hx .hx-cam {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
}

.hx .hx-cam { transform: rotateX(12deg) rotateY(-8deg) scale(var(--hx-static-scale)); }

/* The desk is the window's footprint: the app, the annotations beside it and the mail in flight all
   share its coordinates, so the camera moves them together. */
.hx .hx-desk {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--hx-app-w);
  height: var(--hx-app-h);
  transform: translate(-50%, -50%);
  transform-style: preserve-3d;
}

/* Lucide line icons, as the app draws them. */
.hx .hx-ico {
  display: block;
  flex: none;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- The app window ---------- */

.hx .hx-app {
  position: relative;
  display: grid;
  grid-template-columns: var(--hx-rail-w) var(--hx-list-w) minmax(0, 1fr);
  /* One row, exactly the window's height: a long conversation scrolls inside its pane (the settled
     page shows its newest end) instead of stretching the window past its frame. */
  grid-template-rows: minmax(0, 1fr);
  width: var(--hx-app-w);
  height: var(--hx-app-h);
  overflow: hidden;
  border-radius: 14px;
  /* Ink, the rail's own color: the panes paint their own White, and when the story fades the rail
     out under the desktop captions, nothing light shows through where it was. */
  background: var(--hx-ui-nav-bg);
  color: var(--hx-ui-text);
  font-size: 13px;
  line-height: 1.35;
  letter-spacing: 0;
  text-align: left;
  isolation: isolate;
  box-shadow: 0 0 0 1px rgba(244, 242, 236, 0.14), 0 70px 120px -50px rgba(0, 0, 0, 0.9);
}

/* The rail: Ink, the mark and the workspace, the five views, the reader's Groups, then admin. */
.hx .hx-app-rail {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 16px 10px 14px;
  background: var(--hx-ui-nav-bg);
  color: var(--hx-ui-nav-text);
}

.hx .hx-rail-top {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 -10px 10px;
  padding: 0 16px 15px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.hx .hx-rail-mark {
  display: block;
  width: 22px;
  height: 22px;
}

.hx .hx-rail-mark rect { fill: var(--hx-paper); }

.hx .hx-rail-mark circle { fill: var(--hx-coral); }

.hx .hx-rail-ws {
  color: var(--hx-ui-nav-text-active);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.hx .hx-rail-label {
  padding: 8px 10px 6px;
  color: #868D97;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.2;
  text-transform: uppercase;
}

.hx .hx-rail-label-groups { padding-top: 14px; }

.hx .hx-rail-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 33px;
  padding: 0 9px 0 11px;
  border-radius: 7px;
  font-size: 13px;
  white-space: nowrap;
}

.hx .hx-rail-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The active row, per kit v2: White on #262C35 with a 3px coral bar. */
.hx .hx-rail-row.is-active {
  background: var(--hx-ui-nav-item-active);
  color: var(--hx-ui-nav-text-active);
  font-weight: 500;
}

.hx .hx-rail-row.is-active::before,
.hx .hx-rail-hl::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  bottom: 7px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--hx-ui-nav-indicator);
}

/* Counts stay neutral: coral on a count would read as an alert. */
.hx .hx-pill {
  margin-left: auto;
  min-width: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--hx-ui-nav-count-bg);
  color: var(--hx-ui-nav-count-text);
  font-size: 11px;
  font-weight: 500;
  line-height: 18px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.hx .hx-rail-groups { position: relative; }

/* The motion version slides this highlight from Group to Group; the settled page marks the active
   row itself. */
.hx .hx-rail-hl {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 33px;
  border-radius: 7px;
  background: var(--hx-ui-nav-item-active);
}

.hx .hx-rail-group { z-index: 1; }

.hx .hx-rail-nums {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.hx .hx-rail-nums .hx-pill { margin-left: 0; }

.hx .hx-rail-un {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.hx .hx-rail-un .hx-ico {
  width: 12px;
  height: 12px;
}

.hx .hx-rail-admin {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* The list: one Group's open work, newest activity first. */
.hx .hx-app-list {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border-right: 1px solid var(--hx-ui-border);
  background: var(--hx-ui-bg);
}

.hx .hx-list-view {
  position: absolute;
  inset: 0;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  background: var(--hx-ui-bg);
}

.hx .hx-list-view:not([data-group="0"]) { visibility: hidden; }

.hx .hx-list-head {
  position: relative;
  z-index: 2;
  display: flex;
  flex: none;
  align-items: center;
  gap: 8px;
  height: var(--hx-list-head-h);
  padding: 0 14px;
  border-bottom: 1px solid var(--hx-ui-border);
  background: var(--hx-ui-bg);
}

.hx .hx-list-title {
  color: var(--hx-ui-text);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.hx .hx-list-ws {
  margin-left: auto;
  color: var(--hx-ui-text-muted);
  font-family: var(--hx-mono);
  font-size: 11px;
}

.hx .hx-rows { position: relative; }

.hx .hx-row {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  height: var(--hx-row-h);
  padding: 0 14px;
  border-bottom: 1px solid var(--hx-ui-border);
}

/* The selected row: #EEF1F5 with a 3px coral bar. One element, so the story can move it. */
.hx .hx-row-hl {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 0;
  height: var(--hx-row-h);
  background: var(--hx-ui-bg-selected);
  box-shadow: inset 3px 0 0 var(--hx-ui-focus);
  transform: translateY(calc(2 * var(--hx-row-h)));
}

.hx .hx-app .hx-av {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #DFE3EA;
  color: var(--hx-ui-text);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

.hx .hx-row-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.hx .hx-row-subj {
  overflow: hidden;
  color: var(--hx-ui-text);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.hx .hx-row-meta {
  overflow: hidden;
  color: var(--hx-ui-text-muted);
  font-size: 11.5px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Mail that arrives while the hero sits idle (motion only). */
.hx .hx-row-new { display: none; }

html.motion .hx .hx-row-new { display: flex; }

.hx .hx-row-metas { display: grid; }

.hx .hx-row-metas > .hx-row-meta { grid-area: 1 / 1; }

.hx .hx-meta-a { opacity: 0; }

/* The conversation: subject, the three selectors, the stream, the reply bar. */
.hx .hx-app-stream {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--hx-ui-bg);
}

.hx .hx-stream-head {
  flex: none;
  padding: 14px var(--hx-sb-x) 12px;
  border-bottom: 1px solid var(--hx-ui-border);
}

.hx .hx-stream-subj {
  display: block;
  overflow: hidden;
  color: var(--hx-ui-text);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.012em;
  line-height: 1.3;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.hx .hx-sels {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin-top: 9px;
}

.hx .hx-sel {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.hx .hx-sel-label {
  color: var(--hx-ui-text-muted);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.hx .hx-sel-box {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 92px;
  height: 28px;
  padding: 0 8px 0 10px;
  border: 1px solid var(--hx-ui-border-strong);
  border-radius: 7px;
  background: var(--hx-ui-bg);
  color: var(--hx-ui-text);
  font-size: 12.5px;
  font-weight: 500;
}

.hx .hx-sel-value {
  display: block;
  flex: 1;
  white-space: nowrap;
}

.hx .hx-sel-box .hx-ico {
  width: 14px;
  height: 14px;
  color: var(--hx-ui-text-muted);
}

.hx .hx-stream-body {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding: var(--hx-sb-y) var(--hx-sb-x);
}

.hx .hx-page {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hx .hx-page + .hx-page { margin-top: 10px; }

/* A received email, per kit v2: White with a blue header and border, the address in mono. */
.hx .hx-msg {
  border: 1px solid var(--hx-ui-msg-in-border);
  border-radius: 12px;
  background: var(--hx-ui-msg-in-bg);
  box-shadow: 0 1px 2px rgba(18, 22, 28, 0.05);
}

.hx .hx-msg-head {
  padding: 9px 14px;
  border-bottom: 1px solid var(--hx-ui-msg-in-border);
  border-radius: 11px 11px 0 0;
  background: var(--hx-ui-msg-in-header);
  color: var(--hx-ui-msg-in-header-text);
}

.hx .hx-msg-line {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.hx .hx-msg-ico {
  width: 14px;
  height: 14px;
  color: var(--hx-ui-msg-in-accent);
}

.hx .hx-msg-from {
  color: var(--hx-ui-text);
  font-size: 12.5px;
  font-weight: 700;
}

.hx .hx-msg-addr {
  overflow: hidden;
  font-family: var(--hx-mono);
  font-size: 11px;
  text-overflow: ellipsis;
}

.hx .hx-msg-badge {
  flex: none;
  margin-left: auto;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--hx-ui-msg-in-accent);
  color: var(--hx-white);
  font-size: 10.5px;
  font-weight: 500;
  line-height: 17px;
}

.hx .hx-msg-time { font-size: 11px; }

.hx .hx-msg-to {
  margin-top: 3px;
  font-size: 11px;
}

.hx .hx-msg-body { padding: 10px 14px 9px; }

.hx .hx-msg-text {
  margin: 0;
  color: var(--hx-ui-text);
  font-size: 13px;
  line-height: 1.55;
}

.hx .hx-msg-act {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  margin-top: 6px;
  color: var(--hx-ui-text-muted);
  font-size: 11.5px;
}

.hx .hx-msg-act .hx-ico {
  width: 12px;
  height: 12px;
}

/* A stream event: what changed, in the app's own words, without the actor. */
.hx .hx-event {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0 4px;
  color: var(--hx-ui-text-muted);
  font-size: 11.5px;
  line-height: 1.4;
  white-space: nowrap;
}

.hx .hx-event .hx-ico {
  width: 12px;
  height: 12px;
}

.hx .hx-ev-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hx .hx-ev-time {
  flex: none;
  margin-left: auto;
  font-size: 11px;
}

/* Sent mail, per kit v2: the same card with a green letterhead and a filled "Sent" pill. */
.hx .hx-msg-out { border-color: var(--hx-ui-msg-out-border); }

.hx .hx-msg-out .hx-msg-head {
  border-bottom-color: var(--hx-ui-msg-out-border);
  background: var(--hx-ui-msg-out-header);
  color: var(--hx-ui-msg-out-header-text);
}

.hx .hx-msg-out .hx-msg-ico { color: var(--hx-ui-msg-out-badge-bg); }

.hx .hx-msg-out .hx-msg-badge {
  background: var(--hx-ui-msg-out-badge-bg);
  color: var(--hx-ui-msg-out-badge-text);
}

/* An internal Comment, as the app draws one: off a spine, an avatar, the author and "Not sent",
   then a bubble sized to its own words with its time beside it. Kit v2 colors: #FFE7DB fill,
   #F6BFA9 border, #9A3412 label (7.3:1 on White, 6.2:1 on the bubble). */
.hx .hx-note {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  column-gap: 10px;
  margin-left: 18px;
  padding: 2px 0 2px 12px;
  border-left: 2px solid var(--hx-ui-border);
}

.hx .hx-note + .hx-note { margin-top: -6px; }

.hx .hx-app .hx-note-av {
  background: var(--hx-ui-msg-note-bg);
  color: var(--hx-ui-msg-note-label);
  box-shadow: inset 0 0 0 1.5px var(--hx-ui-msg-note-border);
}

.hx .hx-note-main {
  display: block;
  min-width: 0;
}

.hx .hx-note-head {
  display: flex;
  align-items: center;
  gap: 6px;
}

.hx .hx-note-who {
  color: var(--hx-ui-text);
  font-size: 12.5px;
  font-weight: 700;
}

.hx .hx-note-tag {
  color: var(--hx-ui-msg-note-label);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hx .hx-note-line {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 2px 8px;
  margin-top: 4px;
}

.hx .hx-note-text {
  display: block;
  max-width: 42ch;
  padding: 6px 12px;
  border: 1.5px solid var(--hx-ui-msg-note-border);
  border-radius: 3px 12px 12px 12px;
  background: var(--hx-ui-msg-note-bg);
  color: var(--hx-ui-text);
  font-size: 13px;
  line-height: 1.45;
}

.hx .hx-note-time {
  padding-bottom: 4px;
  color: var(--hx-ui-text-muted);
  font-size: 11px;
  white-space: nowrap;
}

/* Settled, the pane is scrolled down by exactly its first email: the stream starts on a whole item,
   the line that routed the conversation, and runs to the reply that reopened it. The motion version
   lays its pages out itself. */
html:not(.motion) .hx .hx-msg-a { display: none; }

/* ...with slightly tighter spacing, so the whole run fits the pane, the reopened line included. */
html:not(.motion) .hx .hx-stream-body { padding-top: 10px; padding-bottom: 10px; }

html:not(.motion) .hx .hx-page { gap: 8px; }

html:not(.motion) .hx .hx-page + .hx-page { margin-top: 8px; }

.hx .hx-stream-bar {
  display: flex;
  flex: none;
  gap: 8px;
  padding: 10px var(--hx-sb-x);
  border-top: 1px solid var(--hx-ui-border);
}

.hx .hx-ui-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border: 1px solid var(--hx-ui-btn-secondary-border);
  border-radius: 7px;
  background: var(--hx-ui-btn-secondary-bg);
  color: var(--hx-ui-btn-secondary-text);
  font-size: 12.5px;
  font-weight: 500;
}

.hx .hx-ui-btn .hx-ico {
  width: 14px;
  height: 14px;
}

/* The pane with no conversation open, as the app draws it. Motion only. */
.hx .hx-stream-empty {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 3;
  flex-direction: column;
  background: var(--hx-ui-bg);
}

.hx .hx-stream-empty-title {
  display: block;
  padding: 14px var(--hx-sb-x) 13px;
  border-bottom: 1px solid var(--hx-ui-border);
  color: var(--hx-ui-text);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.012em;
  line-height: 1.3;
}

.hx .hx-stream-empty-text {
  display: block;
  margin: 16px var(--hx-sb-x);
  color: var(--hx-ui-text-muted);
  font-size: 12.5px;
}

/* The close dims the empty pane, so no large blank White carries the shot, and the sign-off dims the
   list too, so the window fades out dark instead of leaving a pale ghost. Motion only. */
.hx .hx-stream-dim,
.hx .hx-list-dim {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 4;
  background: var(--hx-ink);
  opacity: 0;
  pointer-events: none;
}

html.motion .hx .hx-stream-dim,
html.motion .hx .hx-list-dim { display: block; }

/* The stream's dim reaches over the list's edge beside it (the list clips its own children), so the
   edge goes dark with the panes instead of staying a light line. */
.hx .hx-stream-dim { left: -1px; }

@media (max-width: 600px) {
  .hx .hx-stream-dim { left: 0; top: -1px; }
}

/* Phones: the rail keeps only its icons, the list shows four rows over the conversation, and the
   conversation keeps one email card in view. */
@media (max-width: 600px) {
  .hx .hx-app {
    grid-template-columns: var(--hx-rail-w) minmax(0, 1fr);
    grid-template-rows: calc(var(--hx-list-head-h) + 4 * var(--hx-row-h)) minmax(0, 1fr);
    border-radius: 12px;
  }
  .hx .hx-app-rail {
    grid-row: 1 / 3;
    align-items: center;
    padding: 14px 0;
  }
  .hx .hx-rail-top {
    align-items: center;
    margin: 0 0 6px;
    padding: 0 0 12px;
    border: 0;
  }
  .hx .hx-rail-ws,
  .hx .hx-rail-label,
  .hx .hx-rail-name,
  .hx .hx-rail-nums,
  .hx .hx-rail-row > .hx-pill,
  .hx .hx-rail-group:not([data-group="0"]) { display: none; }
  .hx .hx-rail-row {
    justify-content: center;
    width: 34px;
    height: 32px;
    padding: 0;
  }
  .hx .hx-rail-hl { height: 32px; }
  .hx .hx-rail-groups,
  .hx .hx-rail-admin {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }
  .hx .hx-app-list {
    grid-column: 2;
    grid-row: 1;
    border-right: 0;
    border-bottom: 1px solid var(--hx-ui-border);
  }
  .hx .hx-app-stream {
    grid-column: 2;
    grid-row: 2;
  }
  .hx .hx-list-head { padding: 0 12px; }
  .hx .hx-row { padding: 0 12px; }
  .hx .hx-stream-head { padding: 10px var(--hx-sb-x) 9px; }
  .hx .hx-stream-subj { font-size: 15px; }
  .hx .hx-sels { gap: 6px 10px; margin-top: 7px; }
  .hx .hx-sel { gap: 5px; }
  .hx .hx-sel-label { font-size: 9.5px; }
  .hx .hx-sel-box {
    gap: 6px;
    min-width: 0;
    height: 24px;
    padding: 0 5px 0 7px;
    font-size: 11.5px;
  }
  .hx .hx-sel-box .hx-ico { width: 12px; height: 12px; }
  .hx .hx-msg-head { padding: 8px 10px; }
  .hx .hx-msg-line { flex-wrap: wrap; row-gap: 2px; }
  .hx .hx-msg-addr { order: 5; width: 100%; padding-left: 22px; }
  .hx .hx-msg-time,
  .hx .hx-msg-to,
  .hx .hx-ev-time,
  .hx .hx-note-time,
  .hx .hx-stream-bar { display: none; }
  .hx .hx-note { margin-left: 6px; }
  .hx .hx-msg-body { padding: 8px 10px; }
  .hx .hx-msg-text { font-size: 12.5px; line-height: 1.45; }
  .hx .hx-event { align-items: flex-start; white-space: normal; }
  .hx .hx-event .hx-ico { margin-top: 2px; }
}

/* Phones fly four emails in, one for each row the list shows there. */
@media (max-width: 600px) {
  .hx .hx-fly > .hx-card:nth-child(5),
  .hx .hx-fly > .hx-card:nth-child(6) { display: none; }
}

/* Phones: the small pane keeps the mail and its events in view. The sent reply and the Comments
   would not fit beside them (and with motion would only show half, inside the captions' fade). */
@media (max-width: 600px) {
  .hx .hx-msg-out,
  .hx .hx-note { display: none; }
}

/* ---------- Mail in flight (motion only) ---------- */

.hx .hx-fly {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
}

/* No blurred drop shadows: a dozen 3D layers with their own blur re-raster on every camera move. A
   hairline edge and an inset sheen still give each card its shape. */
.hx .hx-card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: var(--hx-fly-w);
  height: var(--hx-fly-h);
  overflow: hidden;
  border: 1px solid var(--hx-ui-msg-in-border);
  border-radius: 12px;
  background: var(--hx-ui-msg-in-bg);
  color: var(--hx-ui-text);
  font-size: 13px;
  line-height: 1.3;
  text-align: left;
  box-shadow: inset 0 -2px 0 rgba(18, 22, 28, 0.06);
}

.hx .hx-card.hx-reply-card { height: calc(var(--hx-fly-h) + 20px); }

.hx .hx-card-head {
  display: flex;
  flex: none;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding: 0 11px 0 12px;
  border-bottom: 1px solid var(--hx-ui-msg-in-border);
  background: var(--hx-ui-msg-in-header);
  color: var(--hx-ui-msg-in-header-text);
}

.hx .hx-card-head .hx-ico {
  width: 13px;
  height: 13px;
  color: var(--hx-ui-msg-in-accent);
}

.hx .hx-card-from {
  overflow: hidden;
  color: var(--hx-ui-text);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.hx .hx-card-addr {
  padding: 8px 12px 0;
  overflow: hidden;
  color: var(--hx-ui-msg-in-header-text);
  font-family: var(--hx-mono);
  font-size: 10.5px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.hx .hx-card-subj {
  padding: 3px 12px 0;
  overflow: hidden;
  font-size: 13.5px;
  font-weight: 500;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.hx .hx-card-snip {
  padding: 2px 12px 0;
  color: var(--hx-ui-text-muted);
  font-size: 12px;
}

/* The rule line touched this card: a coral edge that flashes, then fades. */
.hx .hx-c-flash {
  position: absolute;
  inset: 0;
  z-index: 2;
  border: 2px solid var(--hx-coral);
  border-radius: 12px;
  opacity: 0;
  pointer-events: none;
}

/* ---------- Annotations: dark glass outside the app (story only) ---------- */

.hx .hx-panel { display: none; }

.hx .hx-av {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

.hx .hx-p-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.hx .hx-p-title { font-size: 15px; font-weight: 500; }

.hx .hx-p-sub { color: var(--hx-muted); font-size: 12px; }

.hx .hx-rules,
.hx .hx-members {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Each rule: its condition on the first line, its Group and the result under it, so a full mailbox
   address fits on one line and every rule is the same height (the scan steps by one rule). */
.hx .hx-rule {
  position: relative;
  display: grid;
  grid-template-columns: 20px auto minmax(0, 1fr);
  grid-template-areas: "n if if" ". to res";
  align-items: center;
  column-gap: 8px;
  row-gap: 6px;
  padding: 9px 12px 9px 10px;
  border: 1px solid rgba(244, 242, 236, 0.12);
  border-radius: 12px;
  font-size: 13px;
}

.hx .hx-r-n {
  grid-area: n;
  color: var(--hx-muted);
  font-weight: 500;
}

.hx .hx-r-if { grid-area: if; color: var(--hx-soft); white-space: nowrap; }

.hx .hx-r-if b { color: var(--hx-paper); font-weight: 500; }

.hx .hx-r-to {
  grid-area: to;
  justify-self: start;
  display: inline-grid;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}

/* A rule the first match made irrelevant, and a Member round robin skipped: the words stay fully
   opaque in the muted ink (about 7:1 on the panel), the chip goes hollow. js/hero.js flips the class
   at a fixed story time. */
.hx .hx-rule .hx-r-n,
.hx .hx-rule .hx-r-if,
.hx .hx-rule .hx-r-if b,
.hx .hx-rule-3 .hx-r-to,
.hx .hx-rule-4 .hx-r-to,
.hx .hx-m-name { transition: color 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease; }

.hx .hx-rule.is-quiet .hx-r-n,
.hx .hx-rule.is-quiet .hx-r-if,
.hx .hx-rule.is-quiet .hx-r-if b,
.hx .hx-m.is-quiet .hx-m-name { color: var(--hx-muted); }

.hx .hx-rule.is-quiet .hx-r-to {
  background: transparent;
  box-shadow: inset 0 0 0 1px rgba(244, 242, 236, 0.2);
  color: var(--hx-muted);
}

.hx .hx-r-to > span,
.hx .hx-rule-1 .hx-r-to,
.hx .hx-rule-3 .hx-r-to,
.hx .hx-rule-4 .hx-r-to {
  padding: 2px 8px;
  border-radius: 999px;
  background: #2A313B;
  color: var(--hx-paper);
}

.hx .hx-rule-2 .hx-r-to > span { grid-area: 1 / 1; }

/* The linked highlight: the rule and its Group chip light up together when rule 2 matches. */
.hx .hx-rule-2 .hx-r-to-hot {
  background: var(--hx-coral);
  color: var(--hx-ink);
  opacity: 0;
}

.hx .hx-r-res {
  grid-area: res;
  justify-self: end;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.25;
  text-align: right;
  opacity: 0;
}

.hx .hx-r-no,
.hx .hx-r-skip { color: var(--hx-muted); }

.hx .hx-r-yes { color: var(--hx-coral); }

.hx .hx-r-hit {
  position: absolute;
  inset: -1px;
  border: 1.5px solid var(--hx-coral);
  border-radius: 12px;
  opacity: 0;
}

.hx .hx-r-scan {
  position: absolute;
  left: 18px;
  right: 18px;
  top: 50px;
  height: 56px;
  border-radius: 12px;
  background: rgba(244, 242, 236, 0.08);
  opacity: 0;
}

.hx .hx-p-foot {
  position: relative;
  display: grid;
  margin-top: 12px;
  color: var(--hx-muted);
  font-size: 12px;
}

.hx .hx-p-foot > span { grid-area: 1 / 1; }

.hx .hx-pf-off { opacity: 0; color: var(--hx-paper); }

.hx .hx-m {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 6px 12px 6px 30px;
  border: 1px solid rgba(244, 242, 236, 0.12);
  border-radius: 12px;
  font-size: 14px;
}

.hx .hx-m-hit {
  position: absolute;
  inset: -1px;
  border: 1.5px solid var(--hx-coral);
  border-radius: 12px;
  opacity: 0;
}

.hx .hx-m .hx-av {
  background: var(--hx-paper);
  color: var(--hx-ink);
}

.hx .hx-m-name { font-weight: 500; }

.hx .hx-m-skip {
  padding: 0 7px;
  border: 1px solid rgba(244, 242, 236, 0.18);
  border-radius: 999px;
  color: var(--hx-muted);
  font-size: 11.5px;
  line-height: 18px;
  opacity: 0;
}

.hx .hx-m-state {
  display: grid;
  margin-left: auto;
  color: var(--hx-muted);
  font-size: 12px;
}

.hx .hx-m-state > span {
  grid-area: 1 / 1;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.hx .hx-st-off { opacity: 0; }

.hx .hx-m-off .hx-st-on { opacity: 0; }

.hx .hx-m-off .hx-st-off { opacity: 1; }

.hx .hx-o-dot {
  position: relative;
  display: inline-block;
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--hx-coral);
}

.hx .hx-off-dot {
  width: 8px;
  height: 8px;
  border: 1.5px solid var(--hx-muted);
  border-radius: 50%;
}

/* Round robin's pointer: whose turn it is. */
.hx .hx-rr {
  position: absolute;
  left: 29px;
  top: 69px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--hx-coral);
  box-shadow: 0 0 0 4px rgba(255, 90, 54, 0.22);
}

/* Motion-only layers, hidden on the settled page. */
.hx .hx-story-bg,
.hx .hx-sweep,
.hx .hx-morph,
.hx .hx-scrim,
.hx .hx-veil,
.hx .hx-beat-rail { display: none; }

/* The story, settled: four beats as plain text. */

.hx .hx-story {
  order: 3;
  position: relative;
  z-index: 6;
  padding: 24px var(--hx-gutter) 72px;
}

.hx .hx-story-kicker {
  margin: 0 0 22px;
  color: var(--hx-muted);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.hx .hx-beats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 28px 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hx .hx-beat h3 {
  margin: 0 0 10px;
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.hx .hx-beat p {
  margin: 0;
  max-width: 36ch;
  color: var(--hx-soft);
  font-size: 1rem;
}

.hx .hx-story-close {
  margin: 36px 0 0;
  max-width: 30ch;
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.015em;
}

.hx .hx-scene-note {
  margin: 28px 0 0;
  color: var(--hx-muted);
  font-size: 0.8125rem;
}

/* The hand-off. Every home section after the story rides on one sheet (home.css styles the
   sections, untouched). Without motion the sheet overlaps the bottom of the story by its rounded
   edge, inside the story's bottom padding, so the seam reads as intentional. The top padding is the
   room the old hero left above the inbox mock. */
.hx-curtain {
  position: relative;
  z-index: 10;
  margin-top: -32px;
  padding-top: clamp(56px, 8vw, 112px);
  border-radius: 28px 28px 0 0;
  background: var(--h-bg);
  box-shadow: inset 0 1px 0 var(--hx-edge);
}

@media (min-width: 720px) {
  .hx-curtain { border-radius: 40px 40px 0 0; }
}

/* "See how it works" moves focus to the section so the next Tab continues from there. The section
   itself is not a control, so it gets no focus ring. */
.hx-curtain #how:focus { outline: none; }

/* ===================== Motion ===================== */

/* The scroll runway: the story's screens, one screen where the page sheet slides over, and the
   scene itself. */
html.motion .hx-wrap {
  position: relative;
  height: calc(var(--hx-sh) * (var(--hx-story-screens) + 2));
}

html.motion .hx .hx-scene {
  position: sticky;
  top: 0;
  z-index: 1;
  isolation: isolate;
  display: block;
  height: var(--hx-sh);
  padding: 0;
  transform-origin: 50% 0;
}

/* The sheet slides up over the stuck scene. It starts one screen before the runway ends, so it
   covers the scene exactly when the scene stops sticking; js/hero.js eases the scene back under it. */
html.motion .hx-curtain {
  margin-top: calc(-1 * var(--hx-sh));
  box-shadow: inset 0 1px 0 var(--hx-edge), 0 -24px 60px rgba(0, 0, 0, 0.35);
}

/* With motion the footage is exactly the stuck screen, and the scrim under the headline does the
   heavy lifting, so the footage itself can breathe a little more. */
html.motion .hx .hx-footage {
  bottom: 0;
  height: auto;
}

html.motion .hx .hx-footage::after {
  background:
    radial-gradient(120% 90% at 50% 35%, rgba(18, 22, 28, 0) 40%, rgba(18, 22, 28, 0.45) 100%),
    linear-gradient(180deg, rgba(18, 22, 28, 0.58) 0%, rgba(18, 22, 28, 0.44) 38%, rgba(18, 22, 28, 0.56) 62%, rgba(18, 22, 28, 0.8) 100%);
}

html.motion .hx .hx-stage {
  position: absolute;
  inset: 0;
  height: auto;
  margin: 0;
  z-index: 1;
}

html.motion .hx .hx-cam { transform: none; }

html.motion .hx .hx-fly,
html.motion .hx .hx-sweep,
html.motion .hx .hx-scrim,
html.motion .hx .hx-veil { display: block; }

html.motion .hx .hx-fly .hx-card {
  position: absolute;
  left: 0;
  top: 0;
}

html.motion .hx .hx-morph {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* The story swaps the conversation in place: the reopened one's page sits where the first one's
   was, and the two cross-fade. */
html.motion .hx .hx-page-b {
  position: absolute;
  top: var(--hx-sb-y);
  left: var(--hx-sb-x);
  right: var(--hx-sb-x);
  margin: 0;
}

/* The Groups highlight slides; the other Groups' lists cross-fade in on the last beat. */
html.motion .hx .hx-rail-hl { display: block; }

html.motion .hx .hx-stream-empty { display: flex; }

html.motion .hx .hx-rail-row.is-active { background: transparent; }

html.motion .hx .hx-rail-row.is-active::before { display: none; }

html.motion .hx .hx-list-view:not([data-group="0"]) {
  visibility: visible;
  opacity: 0;
}

/* The header is there from the first frame: a short CSS fade, no script needed. */
html.motion .hx-header { animation: hx-header-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) both; }

@keyframes hx-header-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

html.motion .hx .hx-panel {
  display: block;
  position: absolute;
  left: calc(var(--hx-rail-w) + 14px);
  top: 300px;
  width: 384px;
  padding: 18px 18px 16px;
  border: 1px solid rgba(244, 242, 236, 0.14);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(244, 242, 236, 0.07), rgba(244, 242, 236, 0) 42%),
    rgba(18, 22, 28, 0.985);
  color: var(--hx-paper);
  box-shadow: inset 0 1px 0 rgba(244, 242, 236, 0.1), 0 40px 70px -30px rgba(0, 0, 0, 0.85);
}

/* The coral rule line: the rules pass, with its cause riding on it. */
html.motion .hx .hx-sweep {
  position: absolute;
  top: -15%;
  left: 0;
  width: 2px;
  height: 130%;
  opacity: 0;
  z-index: 4;
}

.hx .hx-sweep-core {
  position: absolute;
  inset: 0;
  background: var(--hx-coral);
  box-shadow: 0 0 14px 1px rgba(255, 90, 54, 0.75);
}

.hx .hx-sweep-glow {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -220px;
  width: 222px;
  background: linear-gradient(90deg, rgba(255, 90, 54, 0), rgba(255, 90, 54, 0.1) 55%, rgba(255, 90, 54, 0.34));
}

.hx .hx-sweep-tag {
  position: absolute;
  top: 31%;
  right: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 12px;
  border-radius: 999px;
  background: var(--hx-coral);
  color: var(--hx-ink);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  transform: rotate(-10deg);
  transform-origin: 100% 50%;
  box-shadow: 0 10px 30px -8px rgba(255, 90, 54, 0.6);
}

.hx .hx-st-sep {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--hx-ink);
}

.hx .hx-morph .hx-mp,
.hx .hx-morph .hx-mk-wide,
.hx .hx-morph .hx-mk-short { fill: var(--hx-paper); opacity: 0; }

.hx .hx-morph .hx-mk-dot { fill: var(--hx-coral); opacity: 0; }

.hx .hx-morph .hx-mk-ring { fill: none; stroke: var(--hx-coral); stroke-width: 2; opacity: 0; }

.hx .hx-morph .hx-mk-real { opacity: 0; }

/* Ink under the headline and lede: solid from the bottom up to the top of the copy, so the words meet
   their contrast over the brightest frame of the footage and never sit on the app's light panes,
   whatever the copy's height (a short screen, a narrow phone, text zoomed to 200%). js/hero.js
   measures the copy and sets --hx-solid; the fallback is the band a 1440 x 900 screen needs. */
html.motion .hx .hx-scrim {
  --hx-solid: 33%;
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(to top, var(--hx-ink) 0, var(--hx-ink) var(--hx-solid), rgba(18, 22, 28, 0.94) calc(var(--hx-solid) + 6vh), rgba(18, 22, 28, 0.66) calc(var(--hx-solid) + 14vh), rgba(18, 22, 28, 0.24) calc(var(--hx-solid) + 23vh), rgba(18, 22, 28, 0) calc(var(--hx-solid) + 31vh));
  opacity: 0;
}

/* Phones and tablets: until the script has measured, the copy takes up to half the screen there. */
@media (max-width: 1023px) {
  html.motion .hx .hx-scrim { --hx-solid: 40%; }
}

/* The intro's skip: a quick dip through Ink when a visitor scrolls before it finishes. */
html.motion .hx .hx-veil {
  position: absolute;
  inset: 0;
  z-index: 30;
  background: var(--hx-ink);
  opacity: 0;
  pointer-events: none;
}

html.motion .hx .hx-hero {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 var(--hx-gutter) max(24px, 4.5vh);
  pointer-events: none;
}

html.motion .hx .hx-hero a { pointer-events: auto; }

/* While the story plays, the hero's links stay in the page but cannot catch a stray click. */
html.motion .hx .hx-story-on .hx-hero a { pointer-events: none; }

/* Pause control for the hero's motion, the footage included (WCAG 2.2.2). It exists only while the
   motion script runs: no script, reduced motion, or a script that never reports in, and it stays
   hidden (display: none, so it takes no clicks) because there is nothing to pause. It sits in the
   clear corner under the header, right-aligned with Sign in, and it is first in the hero's tab
   order. It is not part of the hero copy, so it stays on screen through the story, for as long as
   the footage plays behind it, until the page sheet slides over the scene. Pressed reads as Ink on
   Paper. */
.hx .hx-motion-toggle { display: none; }

html.motion.motion-ready .hx .hx-motion-toggle {
  position: absolute;
  top: 68px;
  right: var(--hx-gutter);
  z-index: 8;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 32px;
  margin: 0;
  padding: 3px 12px 3px 3px;
  border: 0;
  border-radius: 999px;
  /* Its own Ink backing: on short landscape screens the app runs under this corner, and the label
     must stay AA-legible over a White pane. Over the footage it is all but invisible. */
  background: rgba(18, 22, 28, 0.9);
  color: var(--hx-muted);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1;
  cursor: pointer;
  pointer-events: auto;
  transition: color 0.2s ease;
  animation: hx-header-in 0.8s cubic-bezier(0.22, 1, 0.36, 1) 1s both;
}

.hx .hx-mt-icon {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1.5px solid rgba(244, 242, 236, 0.34);
  border-radius: 50%;
  color: var(--hx-paper);
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.hx .hx-mt-icon svg {
  display: block;
  width: 10px;
  height: 10px;
  fill: currentColor;
}

.hx .hx-motion-toggle:hover,
.hx .hx-motion-toggle[aria-pressed="true"] { color: var(--hx-paper); }

.hx .hx-motion-toggle:hover .hx-mt-icon { border-color: var(--hx-paper); }

.hx .hx-motion-toggle[aria-pressed="true"] .hx-mt-icon {
  background: var(--hx-paper);
  border-color: var(--hx-paper);
  color: var(--hx-ink);
}

@media (min-width: 720px) {
  html.motion.motion-ready .hx .hx-motion-toggle { top: 80px; }
}

/* In the story on phones and tablets the window and its mail run up into this corner, so the control
   shows only its icon there (its name stays, visually hidden), clear of the cards and the rows. */
@media (max-width: 1023px) {
  html.motion.motion-ready .hx .hx-story-on .hx-motion-toggle { gap: 0; padding: 3px; }
  html.motion .hx .hx-story-on .hx-mt-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

html.motion .hx .hx-hero-title { font-size: min(12.2vw, 7.5vh); }

/* The headline rises line by line, each line inside its own mask. It is CSS, from the first frame,
   so the largest text on the page never waits for a script, and it moves by transform only: the
   text is never transparent and never swapped for new nodes. The padding gives ascenders and
   descenders room inside the mask; the negative margin keeps the layout where it was. */
html.motion .hx .hx-hero-title .hx-line {
  overflow: hidden;
  overflow: clip;
  padding-top: 0.12em;
  padding-bottom: 0.18em;
  margin-top: -0.12em;
  margin-bottom: -0.18em;
}

html.motion .hx .hx-hero-title .hx-line-text {
  transform-origin: 0 100%;
  animation: hx-title-rise 1.3s cubic-bezier(0.16, 1, 0.3, 1) 0.35s both;
}

html.motion .hx .hx-hero-title .hx-line-accent .hx-line-text { animation-delay: 0.49s; }

@keyframes hx-title-rise {
  from { transform: translateY(125%) rotate(2.5deg); }
  to { transform: none; }
}

/* The mask's padding moved the line box up, so the dot keeps its place against the text. It pops
   once the mail has landed with its owners (js/hero.js). */
html.motion .hx .hx-hero-dot {
  top: 0.42em;
  transform: scale(0);
}

html.motion .hx .hx-hero-side > * { animation: hx-side-rise 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.6s both; }
html.motion .hx .hx-hero-side > .hx-cta-row { animation-delay: 0.72s; }
html.motion .hx .hx-hero-side > .hx-scroll-cue { animation-delay: 0.84s; }
/* The footage's label never waits: the footage's still is there from the first frame. */
html.motion .hx .hx-hero-side > .hx-ai-note { animation: none; }

/* The lede is the largest block of text on the first screen, and it is on screen from the first
   frame: it starts dim and rises, never transparent. The headline's masked rise means its first
   paint is a sliver, so the lede is what the browser counts as the largest paint, early, and the
   app window's text (which arrives later and smaller) never takes that over. */
html.motion .hx .hx-hero-side > .hx-hero-lede { animation: hx-lede-rise 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both; }

@keyframes hx-side-rise {
  from { opacity: 0; transform: translateY(26px); }
  to { opacity: 1; transform: none; }
}

@keyframes hx-lede-rise {
  from { opacity: 0.35; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

html.motion .hx .hx-hero-side { margin-top: 18px; }

html.motion .hx .hx-hero-lede {
  margin-bottom: 18px;
  font-size: clamp(1rem, 2vh, 1.3rem);
}

@media (min-width: 600px) and (min-height: 700px) {
  html.motion .hx .hx-scroll-cue {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 22px 0 0;
    color: var(--hx-muted);
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.01em;
  }
}

.hx .hx-cue-line {
  position: relative;
  width: 2px;
  height: 26px;
  border-radius: 2px;
  background: rgba(244, 242, 236, 0.18);
  overflow: hidden;
}

.hx .hx-cue-dot {
  position: absolute;
  left: -1px;
  top: 0;
  width: 4px;
  height: 8px;
  border-radius: 2px;
  background: var(--hx-coral);
}

html.motion .hx .hx-idle .hx-cue-dot { animation: hx-cue 2.2s cubic-bezier(0.65, 0, 0.35, 1) infinite; }

@keyframes hx-cue {
  0% { transform: translateY(-10px); }
  60%, 100% { transform: translateY(30px); }
}

@media (min-width: 1024px) {
  html.motion .hx .hx-hero {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 24px;
    align-content: end;
    padding-bottom: max(40px, 6vh);
  }
  html.motion .hx .hx-hero-title { grid-column: 1 / 9; font-size: min(7.4vw, 14vh, 9rem); }
  html.motion .hx .hx-hero-side { grid-column: 9 / -1; align-self: end; margin: 0; padding-bottom: 0.4vh; }
  html.motion .hx .hx-hero-lede { margin-bottom: 24px; }
}

/* Text zoomed on a desktop-width screen (the width in em falls under 64em, so 1024 px at 200% text):
   the copy stacks as on tablets, so the lede gets the full width and stays below the header instead
   of climbing under it in a narrow column. */
@media (min-width: 1024px) and (max-width: 63.99em) {
  html.motion .hx .hx-hero { display: flex; }
  html.motion .hx .hx-hero-side { align-self: stretch; margin-top: 18px; }
}

/* Captions for the pinned story. */
html.motion .hx .hx-story {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0 var(--hx-gutter) max(26px, 4vh);
  pointer-events: none;
}

html.motion .hx .hx-story-kicker {
  margin-bottom: 12px;
  opacity: 0;
}

html.motion .hx .hx-beat-rail {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 16px;
  opacity: 0;
}

.hx .hx-rb {
  display: block;
  height: 6px;
  border-radius: 3px;
  background: var(--hx-paper);
  opacity: 0.22;
}

.hx .hx-rb-1 { width: 36px; }
.hx .hx-rb-2 { width: 24px; }
.hx .hx-rb-3 { width: 15px; }
.hx .hx-rb-4 { width: 8px; }

.hx .hx-rb-dot {
  width: 8px;
  height: 8px;
  margin-left: 4px;
  border-radius: 50%;
  background: var(--hx-coral);
  transform: scale(0);
}

html.motion .hx .hx-captions { display: grid; }

html.motion .hx .hx-beats,
html.motion .hx .hx-story-close {
  grid-area: 1 / 1;
  align-self: end;
}

html.motion .hx .hx-beats { display: grid; }

html.motion .hx .hx-beat {
  grid-area: 1 / 1;
  align-self: end;
  opacity: 0;
}

html.motion .hx .hx-beat h3 {
  margin-bottom: 10px;
  font-size: clamp(1.75rem, 8vw, 2.4rem);
  line-height: 1;
}

html.motion .hx .hx-beat p {
  font-size: 0.96875rem;
  line-height: 1.42;
}

html.motion .hx .hx-story-close {
  margin: 0;
  opacity: 0;
}

html.motion .hx .hx-scene-note {
  margin-top: 14px;
  font-size: 0.75rem;
  opacity: 0;
}

/* Desktop: the captions own the left third, on their own band of Ink over the footage. */
@media (min-width: 1024px) {
  html.motion .hx .hx-story {
    top: 0;
    left: var(--hx-gutter);
    right: auto;
    width: min(31vw, 440px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0;
  }
  html.motion .hx .hx-story-bg {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(-1 * var(--hx-gutter));
    /* Solid under the captions, then a short fade that ends where the camera's box begins (24 px
       past the caption column), so it never dims the window or the panels; the rail, which the
       camera leaves under the captions, fades out itself (js/hero.js). */
    width: calc(100% + var(--hx-gutter) + 24px);
    z-index: -1;
    background: linear-gradient(90deg, rgba(18, 22, 28, 0.92) 0, rgba(18, 22, 28, 0.92) calc(100% - 24px), rgba(18, 22, 28, 0) 100%);
    opacity: 0;
  }
  html.motion .hx .hx-beats,
  html.motion .hx .hx-beat,
  html.motion .hx .hx-story-close { align-self: start; }
  html.motion .hx .hx-beat h3 { font-size: clamp(2.25rem, 3.6vw, 3.6rem); margin-bottom: 18px; }
  html.motion .hx .hx-beat p { font-size: clamp(1rem, 1.25vw, 1.2rem); }
  html.motion .hx .hx-story-close { font-size: clamp(1.75rem, 2.8vw, 2.75rem); line-height: 1.08; letter-spacing: -0.03em; font-weight: 700; }
  html.motion .hx .hx-scene-note { position: absolute; bottom: 4vh; left: 0; margin: 0; }
}

/* Phones and tablets: captions sit on a solid Ink backdrop under the app, so a zoomed pane and a
   caption never merge. */
@media (max-width: 1023px) {
  html.motion .hx .hx-story { padding-top: 44px; }
  html.motion .hx .hx-story-bg {
    display: block;
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to bottom, rgba(18, 22, 28, 0), var(--hx-ink) 40px);
    opacity: 0;
  }
  /* Captions hang from the rail, so the active one always sits right under it. */
  html.motion .hx .hx-beats,
  html.motion .hx .hx-beat,
  html.motion .hx .hx-story-close { align-self: start; }
}

/* Short landscape screens (a landscape phone, a desktop zoomed to 200%): there is no room for the
   captions under the window, so they take the left column as on desktop, smaller. js/hero.js uses
   the desktop camera there too (the same media query). */
@media (max-width: 1023px) and (max-height: 500px) and (min-width: 560px) and (orientation: landscape) {
  html.motion .hx .hx-story {
    top: 0;
    left: var(--hx-gutter);
    right: auto;
    width: min(31vw, 440px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0;
  }
  html.motion .hx .hx-story-bg {
    inset: 0 auto 0 calc(-1 * var(--hx-gutter));
    width: calc(100% + var(--hx-gutter) + 24px);
    background: linear-gradient(90deg, rgba(18, 22, 28, 0.92) 0, rgba(18, 22, 28, 0.92) calc(100% - 24px), rgba(18, 22, 28, 0) 100%);
  }
  html.motion .hx .hx-story-kicker { margin-bottom: 8px; }
  html.motion .hx .hx-beat-rail { margin-bottom: 10px; }
  html.motion .hx .hx-beat h3 { margin-bottom: 8px; font-size: clamp(1.25rem, 6vh, 1.75rem); }
  html.motion .hx .hx-beat p { font-size: 0.875rem; line-height: 1.4; }
  html.motion .hx .hx-story-close { font-size: clamp(1.125rem, 5.5vh, 1.5rem); font-weight: 700; line-height: 1.15; }
  html.motion .hx .hx-scene-note { position: absolute; bottom: 10px; left: 0; margin: 0; font-size: 0.6875rem; }
}

/* Phones: the annotations float over the conversation, under the list. */
@media (max-width: 600px) {
  html.motion .hx .hx-panel {
    left: calc(var(--hx-rail-w) + 8px);
    top: calc(var(--hx-list-head-h) + 4 * var(--hx-row-h) + 10px);
    width: calc(var(--hx-app-w) - var(--hx-rail-w) - 16px);
    padding: 14px 12px 12px;
  }
  .hx .hx-p-head { margin-bottom: 10px; }
  .hx .hx-rule {
    grid-template-columns: 16px auto minmax(0, 1fr);
    row-gap: 5px;
    padding: 7px 10px;
    font-size: 12.5px;
  }
  .hx .hx-r-if { white-space: normal; }
  .hx .hx-r-scan { left: 12px; right: 12px; top: 44px; height: 60px; }
  .hx .hx-rule-foot { display: none; }
  .hx .hx-m { min-height: 38px; padding: 4px 10px 4px 26px; font-size: 13.5px; }
  .hx .hx-m .hx-av { width: 20px; height: 20px; }
  .hx .hx-rr { left: 23px; top: 60px; }
  /* The rules float over the list, so the waiting email and all four rules fit one phone frame;
     the list's rows are back by the time the email lands in them. */
  html.motion .hx .hx-panel-rules { top: calc(var(--hx-list-head-h) + 8px); }
}

/* Short phones: a tighter caption block, so the window above it can stay at half size or more. */
@media (max-width: 600px) and (max-height: 760px) {
  html.motion .hx .hx-story { padding: 30px var(--hx-gutter) 14px; }
  html.motion .hx .hx-story-bg { background: linear-gradient(to bottom, rgba(18, 22, 28, 0), var(--hx-ink) 26px); }
  html.motion .hx .hx-story-kicker { margin-bottom: 6px; font-size: 0.75rem; }
  html.motion .hx .hx-beat-rail { margin-bottom: 10px; }
  html.motion .hx .hx-beat h3 { margin-bottom: 6px; font-size: clamp(1.375rem, 6.4vw, 1.75rem); }
  html.motion .hx .hx-beat p { font-size: 0.875rem; line-height: 1.38; }
  html.motion .hx .hx-story-close { font-size: 1.0625rem; }
  html.motion .hx .hx-scene-note { margin-top: 8px; font-size: 0.6875rem; line-height: 1.35; }
}

/* Pre-animation states. Only with motion on; js/hero.js reveals them. The header and the headline
   are not hidden: they arrive by CSS from the first frame. */
html.motion .hx .hx-app,
html.motion .hx .hx-fly .hx-card,
html.motion .hx .hx-panel {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .hx .hx-btn { transition: none; }
  .hx .hx-footage-video { transition: none; }
}