/* Wingman Mail marketing page.
 *
 * Sales surface only — it shares no styles with the app renderer (src/) and
 * deliberately uses its own light-only token set. Layout is a stack of 48px
 * rounded cards on a grey page, with the section rhythm, type scale and
 * accent palette shared across Grand Ventures product sites.
 *
 * Everything here is hand-written CSS: the page is served as a static file by
 * server/src/index.ts, so it must stay build-free and dependency-free. */

/* ---------------------------------------------------------------- tokens -- */

:root {
  --page: #e7e7e7;
  --white: #ffffff;
  --ink: #151515;
  --wordmark: #2e2e2e;
  --surface-dark: #3b3b3b;
  --surface-dark-end: #242424;
  --secondary: #6f6f6f;
  --muted: #a3a3a3;
  --card: #f2f2f2;
  --hairline: rgba(0, 0, 0, 0.1);

  --blue: #3597f3;
  --orange: #e74926;
  --yellow: #f3c035;
  --teal: #549070;
  --pink: #b37283;
  --purple: #c27aff;
  --lime: #d9ff85;

  --dark: linear-gradient(to bottom, var(--ink), var(--surface-dark-end));
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-card: 0 1px 2px 0 rgba(0, 0, 0, 0.08);
  --glass: inset 0 1px 0 0 rgba(255, 255, 255, 0.12);

  /* Strong ease-out for enter, exit, and state changes: the fast start reads
   * as an instant response. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);

  /* Section gutter: 24px until the design width has room for the real 200px. */
  --gutter: 24px;

  color-scheme: light;
  interpolate-size: allow-keywords;
}

@media (min-width: 1280px) {
  :root {
    --gutter: 200px;
  }
}

/* ------------------------------------------------------------------ base -- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  font-family:
    ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  background: var(--page);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: inherit;
  text-decoration: none;
}

img,
svg {
  display: block;
}

ul {
  list-style: none;
}

:focus-visible {
  outline: 2px solid rgba(0, 0, 0, 0.5);
  outline-offset: 2px;
  border-radius: 4px;
}

.card-dark :focus-visible,
.plan-dark :focus-visible {
  outline-color: var(--white);
}

/* --------------------------------------------------------------- shell ---- */

.page {
  position: relative;
  display: flex;
  justify-content: center;
  min-height: 100vh;
  padding: 16px;
  overflow: clip;
}

.shell {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: 1440px;
}

/* Watermark letters. They only ever peek through the 16px page margin and the
 * gaps between cards, which is exactly the intended texture. */
.letters {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.letters svg {
  width: 100%;
  height: 100%;
}

.letters text {
  font-family: inherit;
  font-size: 1500px;
  font-weight: 600;
  text-anchor: middle;
  fill: rgba(255, 255, 255, 0.32);
  stroke: rgba(255, 255, 255, 0.5);
  stroke-width: 2;
  paint-order: stroke fill;
}

.card {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 48px;
  box-shadow: var(--shadow-sm);
}

.card-white {
  background: var(--white);
}

.card-dark {
  background: var(--dark);
}

.pad {
  padding-inline: var(--gutter);
}

.block-tall {
  padding-top: 144px;
  padding-bottom: 152px;
}

.stack-16 {
  display: flex;
  flex-direction: column;
  gap: 64px;
}

.glass {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: var(--glass);
  pointer-events: none;
}

/* ------------------------------------------------------------- typography -- */

h1 {
  font-size: 60px;
  line-height: 64px;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--white);
}

.lead {
  font-size: 22px;
  line-height: 32px;
  letter-spacing: -0.025em;
  color: var(--muted);
}

.grey {
  color: var(--secondary);
}

.card-dark .grey {
  color: var(--muted);
}

.sec-head {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  max-width: 512px;
}

.sec-head.wide {
  max-width: 1040px;
}

.sec-head-top {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
}

.sec-head h2 {
  font-size: 30px;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -0.04em;
  color: var(--ink);
}

.sec-head.dark h2 {
  color: var(--white);
}

@media (min-width: 768px) {
  .sec-head h2 {
    font-size: 40px;
    line-height: 48px;
  }
}

.sec-head h2 .soft {
  font-weight: 500;
  color: var(--secondary);
}

.sec-desc {
  font-size: 18px;
  line-height: 28px;
  letter-spacing: -0.03em;
  color: var(--secondary);
}

.sec-head.dark .sec-desc {
  color: var(--muted);
}

.sec-desc-link {
  font-weight: 500;
  color: var(--ink);
}

.sec-desc-link:hover {
  color: var(--secondary);
}

.kicker {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--secondary);
}

.sec-head.dark .kicker {
  color: var(--muted);
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
}

.dot.blue { background: var(--blue); }
.dot.orange { background: var(--orange); }
.dot.yellow { background: var(--yellow); }
.dot.teal { background: var(--teal); }
.dot.pink { background: var(--pink); }
.dot.purple { background: var(--purple); }

.md-only {
  display: none;
}

@media (min-width: 768px) {
  .md-only {
    display: inline;
  }
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
  font-size: 14px;
  line-height: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
  cursor: pointer;
  transition: background-color 150ms ease-out, color 150ms ease-out;
}

.btn-primary-light {
  border-radius: 999px;
  padding: 12px 20px;
  background: var(--white);
  color: var(--ink);
}

.btn-primary-light:hover {
  background: var(--page);
}

.btn-primary-dark {
  border-radius: 999px;
  padding: 12px 20px;
  background: var(--ink);
  color: var(--white);
  box-shadow: var(--shadow-sm);
}

.btn-primary-dark:hover {
  background: #292929;
}

.btn-secondary-dark {
  border-radius: 999px;
  padding: 12px 24px;
  background: var(--surface-dark);
  color: var(--white);
  box-shadow: var(--glass);
}

.btn-secondary-dark:hover {
  background: #454545;
}

.btn-ghost-dark {
  color: var(--muted);
}

.btn-ghost-dark:hover {
  color: var(--white);
}

.btn-tertiary-dark {
  height: 32px;
  padding-inline: 12px;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: var(--surface-dark);
  color: var(--white);
}

.btn-tertiary-dark:hover {
  background: #474747;
}

.btn-block {
  position: relative;
  width: 100%;
  height: 48px;
  padding-inline: 20px;
}

.arrow-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  transition: transform 150ms ease-out;
}

.arrow-circle svg {
  width: 16px;
  height: 16px;
}

.arrow-circle.dark {
  background: var(--ink);
  color: var(--white);
}

.arrow-circle.light {
  background: var(--white);
  color: var(--ink);
}

.arrow-circle.pinned {
  position: absolute;
  right: 12px;
}

.btn:hover .arrow-circle {
  transform: scale(1.1);
}

@media (prefers-reduced-motion: reduce) {
  .btn:hover .arrow-circle {
    transform: none;
  }
}

/* ------------------------------------------------------------------- hero -- */

/* The nav and the product shot both sit 24px in from the card edge, so the
 * card closes 24px under the shot too — the inset reads as one frame. */
.hero-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 24px;
  padding-bottom: 24px;
}

.hero-nav-wrap {
  width: 100%;
  padding-inline: 24px;
}

.nav {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 12px 20px;
  border-radius: 32px;
  background: var(--surface-dark);
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.nav-mark {
  display: block;
  width: 20px;
  height: 20px;
  color: var(--white);
}

.nav-mark svg {
  width: 100%;
  height: 100%;
}

.nav-name {
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--white);
}

/* Phone lockup. Hidden on desktop, where the W + typeset name already read. */
.nav-wordmark {
  display: none;
  height: 16px;
  width: auto;
  max-width: 100%;
  filter: invert(1);
}

.nav-actions {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 12px;
}

.hero-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 72px;
  width: 100%;
  margin-top: 144px;
  /* The product shot needs more room than the 200px section gutter allows, so
   * it sits at 24px and the headline pads itself back out to the gutter. */
  padding-inline: 24px;
}

.hero-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  width: 100%;
  padding-inline: calc(var(--gutter) - 24px);
}

/* Widths are tuned to the headline copy: two lines for the h1, two for the
 * subtext, with the subtext kept the narrower of the two. */
.hero-headline {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  width: 100%;
  max-width: 760px;
}

.hero-headline .lead {
  max-width: 620px;
}

.hero-buttons {
  display: flex;
  gap: 12px;
}

/* ------------------------------------------------------------ product shot */

.shot {
  position: relative;
  width: 100%;
  height: 700px;
  border-radius: 32px;
  overflow: hidden;
  background: #000;
  box-shadow: var(--shadow-sm);
}

.shot-backdrop {
  position: absolute;
  inset: 0;
  /* Today's inbox-zero backdrop, the same daily photo the app uses. */
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0.62)),
    url("/inbox-zero.webp");
  background-size: cover;
  background-position: center;
}

/* The app window, rebuilt in markup rather than screenshotted so it stays
 * sharp at any size. Every value below is the real light-theme token from
 * src/index.css: 56px rail, 56px top bar, 40px rows on a 60px left inset,
 * 320px contact panel, 32px hint bar. */
.win {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  width: min(1300px, calc(100% - 96px));
  height: 600px;
  transform: translate(-50%, -50%);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 48px 90px -24px rgba(0, 0, 0, 0.7);
}

.win-frame {
  display: flex;
  width: 100%;
  height: 100%;
  background: #fff;
  color: #171717;
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
  font-size: 13px;
  line-height: 1.5;
}

/* Author display:flex must not beat the hidden attribute — that was painting
 * the reading pane beside the list, unlike the app. */
.win [hidden] {
  display: none !important;
}

.win button {
  appearance: none;
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: inherit;
}

.win button.wm-switcher-row {
  padding: 10px 20px;
}

.win button.wm-fb-send {
  padding: 10px 20px;
}

.win button.wm-row {
  padding-right: 16px;
  padding-left: 60px;
  cursor: default;
}

.win .wm-scope:active,
.win .wm-switcher-row:active,
.win .wm-thread-bar button:active {
  transform: scale(0.96);
}

.win :focus-visible {
  outline: 2px solid rgba(0, 0, 0, 0.5);
  outline-offset: 2px;
}

.win .wm-row:focus:not(:focus-visible) {
  outline: none;
}

@media (prefers-reduced-motion: reduce) {
  .win .wm-scope:active,
  .win .wm-switcher-row:active,
  .win .wm-thread-bar button:active {
    transform: none;
  }
}

/* ---- icon rail (56px, surface-sunken) ---- */

.wm-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 56px;
  flex: none;
  padding-block: 12px;
  border-right: 1px solid #e5e5e5;
  background: #fafafa;
}

.wm-scope-wrap {
  position: relative;
  z-index: 20;
  margin-bottom: 12px;
}

.wm-scope,
.wm-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.wm-scope {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  color: #a3a3a3;
  transition: background-color 150ms ease-out;
}

.wm-scope:hover {
  background: #f5f5f5;
}

.wm-pile {
  display: flex;
  align-items: center;
}

.wm-pile span {
  position: relative;
  display: flex;
  border-radius: 999px;
  box-shadow: 0 0 0 2px #fff;
}

.wm-pile span + span {
  margin-left: -8px;
}

.wm-pile span:nth-child(1) { z-index: 3; }
.wm-pile span:nth-child(2) { z-index: 2; }
.wm-pile span:nth-child(3) { z-index: 1; }

.wm-pile img,
.wm-mark img {
  pointer-events: none;
  user-select: none;
}

.wm-pile img {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  object-fit: cover;
}

.wm-mark img {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  object-fit: cover;
}

.wm-switcher {
  position: absolute;
  top: 0;
  left: 100%;
  z-index: 20;
  width: 256px;
  margin-left: 8px;
  overflow: hidden;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  outline: 1px solid #e5e5e5;
  transform-origin: top left;
}

.wm-switcher-row {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  text-align: left;
  transition: background-color 150ms ease-out;
}

.wm-switcher-row:hover {
  background: #f1f2fb;
}

.wm-switcher-text {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
}

.wm-switcher-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  color: #171717;
}

.wm-switcher-email {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  color: #a3a3a3;
}

.wm-check {
  display: none;
  width: 14px;
  height: 14px;
  flex: none;
  color: #a3a3a3;
}

.wm-switcher-row.is-current .wm-check {
  display: block;
}

.wm-rail-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: 999px;
  color: #a3a3a3;
}

.wm-rail-btn svg {
  width: 16px;
  height: 16px;
}

.wm-rail-btn:hover {
  background: #f5f5f5;
}

.wm-rail-btn.active {
  background: #fff;
  color: #404040;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  outline: 1px solid #e5e5e5;
}

.wm-rail-btn.active:hover {
  background: #fff;
}

.wm-rail-btn.bottom {
  margin-top: auto;
}

.wm-rail-divider {
  width: 20px;
  height: 1px;
  margin-block: 4px;
  background: #f5f5f5;
}

/* ---- list column ---- */

.wm-list-col {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.wm-topbar {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 56px;
  flex: none;
  padding-inline: 20px;
}

.wm-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  color: #a3a3a3;
}

.wm-icon svg {
  width: 14px;
  height: 14px;
}

.wm-icon.lg svg {
  width: 18px;
  height: 18px;
}

.wm-tabs {
  display: flex;
  align-items: center;
  gap: 24px;
}

.wm-topbar-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-left: auto;
}

/* Weight and ink are the only difference between tabs — no pill, no rule.
 * An invisible bold copy of the label reserves width so the active weight
 * never shifts neighbors. */
.wm-tab {
  display: inline-flex;
  align-items: baseline;
  font-size: 15px;
  color: #a3a3a3;
  transition: color 150ms ease-out;
}

.wm-tab:hover {
  color: #404040;
}

.wm-tab.active {
  color: #171717;
}

.wm-tab.active:hover {
  color: #171717;
}

.wm-tab-label {
  display: inline-grid;
  justify-items: center;
}

.wm-tab-sizer,
.wm-tab-text {
  grid-area: 1 / 1;
}

.wm-tab-sizer {
  visibility: hidden;
  font-weight: 600;
}

.wm-tab.active .wm-tab-text {
  font-weight: 600;
}

.wm-tab i {
  margin-left: 4px;
  font-style: normal;
  font-size: 10px;
  font-weight: 400;
  color: #a3a3a3;
}

/* ---- thread rows (40px, 60px left inset, no separators) ---- */

.wm-rows {
  flex: 1;
  overflow: auto;
}

.wm-row {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 12px;
  height: 40px;
  padding-right: 16px;
  padding-left: 60px;
  border-left: 2px solid transparent;
  color: #404040;
}

.wm-row:hover:not(.selected) {
  background: #fafafa;
}

.wm-row.selected {
  border-left-color: #4f55c7;
  background: #f1f2fb;
}

.wm-from {
  display: flex;
  width: 176px;
  flex: none;
  align-items: center;
  gap: 6px;
  overflow: hidden;
}

.wm-from-name {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.wm-badge {
  width: 18px;
  height: 18px;
  flex: none;
  overflow: visible;
}

.wm-badge.brand { color: #1d9bf0; }
.wm-badge.gov { color: #829aab; }
.wm-badge.warn { color: #ef4444; }

.wm-row.unread .wm-from,
.wm-row.unread .wm-from-name,
.wm-row.unread .wm-subject {
  font-weight: 600;
  color: #171717;
}

.wm-row:has(.wm-badge.warn) .wm-from-name {
  color: #ef4444;
}

/* Subject and snippet share one truncating line, exactly like the app. */
.wm-line {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.wm-snippet {
  margin-left: 12px;
  color: #a3a3a3;
}

.wm-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: none;
  padding: 2px 6px;
  border-radius: 6px;
  background: #fff;
  box-shadow: inset 0 0 0 1px #e5e5e5;
  font-size: 12px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: #737373;
}

.wm-pill svg {
  width: 12px;
  height: 12px;
}

.wm-time {
  width: 80px;
  flex: none;
  text-align: right;
  font-size: 12px;
  color: #a3a3a3;
}

.wm-row-end {
  position: relative;
  display: flex;
  width: 80px;
  height: 100%;
  flex: none;
  align-items: center;
  justify-content: flex-end;
}

.wm-row-actions {
  position: absolute;
  inset: 0 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  opacity: 0;
  pointer-events: none;
}

.wm-row-actions .wm-icon {
  color: #a3a3a3;
}

.wm-row:hover .wm-row-actions,
.wm-row:focus-within .wm-row-actions {
  opacity: 1;
}

.wm-row:hover .wm-time,
.wm-row:focus-within .wm-time {
  opacity: 0;
}

/* Date spacer: a row's worth of whitespace with a quiet bottom-aligned label
 * (there is deliberately none for today). */
.wm-spacer {
  display: flex;
  align-items: flex-end;
  height: 40px;
  padding-bottom: 4px;
  padding-left: 60px;
  color: #a3a3a3;
}

.wm-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  flex: none;
  border-top: 1px solid #e5e5e5;
  background: #f5f5f5;
  font-size: 11px;
  color: #a3a3a3;
}

.wm-hint kbd {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  border: 1px solid #e5e5e5;
  border-radius: 4px;
  font-family: inherit;
  font-size: 10px;
  color: #a3a3a3;
}

.wm-hint em {
  font-style: normal;
  color: #d4d4d4;
}

/* ---- contact panel (320px, full height) ---- */

.wm-panel {
  display: flex;
  flex-direction: column;
  width: 320px;
  flex: none;
  padding: 20px 24px;
  border-left: 1px solid #e5e5e5;
  background: #fff;
}

.wm-panel-name {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
  font-size: 17px;
  font-weight: 600;
}

.wm-panel-name [data-shot="panel-name"] {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wm-panel-name [data-shot="panel-name"].warn {
  color: #ef4444;
}

.wm-identity {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
}

.wm-avatar {
  display: block;
  box-sizing: border-box;
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  max-width: 48px;
  max-height: 48px;
  flex: none;
  overflow: hidden;
  border-radius: 999px;
  background: #a3a3a3;
  line-height: 0;
}

.wm-avatar svg {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  fill: #fff;
}

.wm-identity-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.wm-email {
  color: #404040;
}

.wm-place {
  color: #a3a3a3;
}

.wm-panel-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 20px;
}

.wm-title {
  color: #a3a3a3;
}

.wm-section-label,
.wm-link {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #a3a3a3;
}

.wm-section-label svg,
.wm-link svg,
.wm-link img {
  width: 14px;
  height: 14px;
  flex: none;
}

.wm-section-rows {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 6px;
}

.wm-section-rows span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #737373;
}

.wm-panel-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
}

.wm-sync {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: #d4d4d4;
}

.wm-feedback {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  color: #a3a3a3;
  transition: color 150ms ease-out;
}

/* .win button { color: inherit } is more specific and was painting this ink. */
.win button.wm-feedback {
  color: #a3a3a3;
}

.wm-feedback:hover,
.win button.wm-feedback:hover {
  color: #404040;
}

.wm-feedback svg {
  width: 14px;
  height: 14px;
}

/* In-shot feedback overlay. Anchored to the app window, not the page. */
.wm-overlay {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: flex;
  justify-content: center;
  padding-top: 72px;
  background: rgb(0 0 0 / 0.15);
}

.wm-fb {
  width: min(560px, calc(100% - 48px));
  height: max-content;
  overflow: hidden;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  outline: 1px solid #f5f5f5;
}

.wm-fb-input {
  display: block;
  width: 100%;
  padding: 16px 20px;
  appearance: none;
  border: none;
  resize: none;
  background: transparent;
  box-shadow: inset 0 -1px 0 #f5f5f5;
  font: inherit;
  font-size: 15px;
  line-height: 1.5;
  color: #171717;
}

/* Caret is the focus signal, same as the in-app TextArea. The shared
 * .win :focus-visible ring was drawing a dark bar under the field. */
.win .wm-fb-input:focus,
.win .wm-fb-input:focus-visible {
  outline: none;
}

.wm-fb-input::placeholder {
  color: #d4d4d4;
}

.wm-fb-send {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  text-align: left;
  color: #171717;
}

.wm-fb-send:disabled {
  cursor: default;
  color: #d4d4d4;
}

.wm-fb-send:not(:disabled) {
  background: #f1f2fb;
}

.wm-fb-send svg {
  width: 14px;
  height: 14px;
  flex: none;
  color: #d4d4d4;
}

.wm-fb-send span {
  font-size: 13px;
}

.wm-fb-send kbd {
  margin-left: auto;
  padding: 2px 6px;
  border: 1px solid #e5e5e5;
  border-radius: 4px;
  font-family: inherit;
  font-size: 10px;
  color: #a3a3a3;
}

.wm-fb-egg {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px 24px 24px;
  font-size: 15px;
  line-height: 1.5;
  color: #404040;
}

.wm-fb-egg p:first-child {
  font-weight: 600;
  color: #171717;
}

.wm-fb-egg a {
  font-weight: 500;
  color: #171717;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.wm-fb-egg a:hover {
  color: #404040;
}

.wm-panel-foot .wm-icon svg {
  width: 16px;
  height: 16px;
}

/* The panel is the first thing to go when the window is too narrow to carry
 * sender, subject and a 320px aside at their real widths. */
@media (max-width: 1200px) {
  .wm-panel {
    display: none;
  }
}

.wm-list-col.is-hidden,
.wm-panel.is-hidden,
.win[data-mode="thread"] .wm-list-col,
.win[data-mode="thread"] .wm-panel {
  display: none;
}

/* ---- reading pane: replaces the list, matching ThreadView ---- */

.wm-thread {
  position: relative;
  display: none;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  isolation: isolate;
  background: #fff;
}

.win[data-mode="thread"] .wm-thread {
  display: flex;
}

.wm-gutter {
  position: absolute;
  inset-block: 0;
  z-index: 10;
  width: max(0px, calc((100% - 48rem) / 4));
  cursor: pointer;
}

.wm-gutter-back { left: 0; }
.wm-gutter-done { right: 0; }

.wm-gutter-wash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 120ms cubic-bezier(0.16, 1, 0.3, 1);
}

.wm-gutter-back .wm-gutter-wash {
  background: linear-gradient(to right, rgb(23 23 23 / 0.04), transparent);
}

.wm-gutter-done .wm-gutter-wash {
  background: linear-gradient(to left, rgb(23 23 23 / 0.04), transparent);
}

.wm-gutter:hover .wm-gutter-wash {
  opacity: 1;
}

.wm-thread-bar {
  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 16px;
  flex: none;
  padding: 12px 24px;
}

.wm-thread:has(.wm-gutter-back:hover) [data-shot="back"] {
  color: #404040;
}

.wm-thread:has(.wm-gutter-done:hover) [data-shot="done"] {
  width: auto;
  justify-content: flex-start;
  gap: 6px;
  padding-inline: 8px;
  color: #404040;
}

.wm-thread:has(.wm-gutter-done:hover) [data-shot="done"] .wm-done-label {
  display: inline;
}

.wm-done-label {
  display: none;
  white-space: nowrap;
  font-size: 12px;
}

.wm-thread-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}

.wm-thread-bar .wm-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  color: #a3a3a3;
  transition: color 150ms ease-out, background-color 150ms ease-out;
}

.wm-thread-bar button.wm-icon:hover,
.wm-thread-bar .wm-icon:hover {
  color: #404040;
}

.wm-thread-bar .wm-icon svg {
  width: 16px;
  height: 16px;
}

.wm-thread-scroll {
  flex: 1;
  min-height: 0;
  overflow: auto;
}

.wm-thread-col {
  width: 100%;
  max-width: 48rem;
  margin-inline: auto;
  padding: 24px 24px 64px;
}

.wm-thread-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 12px;
}

.wm-thread-title {
  font-size: 26px;
  line-height: 1.375;
  font-weight: 600;
  color: #171717;
}

.wm-chip {
  flex: none;
  padding: 2px 6px;
  border-radius: 4px;
  background: #f5f5f5;
  font-size: 10px;
  text-transform: lowercase;
  color: #737373;
}

.wm-msg-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
}

.wm-avatar.sm {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  max-width: 36px;
  max-height: 36px;
}

.wm-msg-meta {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
}

.wm-msg-name {
  font-weight: 600;
  color: #171717;
}

.wm-msg-name.warn {
  color: #ef4444;
}

.wm-msg-line [data-shot="thread-badge"] {
  display: flex;
}

.wm-msg-line {
  display: flex;
  align-items: center;
  gap: 6px;
}

.wm-msg-to {
  margin-top: 2px;
  font-size: 12px;
  color: #737373;
}

.wm-msg-date {
  flex: none;
  margin-left: auto;
  font-size: 12px;
  color: #a3a3a3;
}

.wm-msg-actions {
  display: flex;
  align-items: center;
  color: #a3a3a3;
}

.wm-msg-actions .wm-icon {
  width: 28px;
  height: 28px;
}

.wm-msg-actions .wm-icon svg {
  width: 14px;
  height: 14px;
}

.wm-msg-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 24px;
  padding-left: 48px;
  font-size: 15px;
  line-height: 1.75;
  color: #404040;
}

.wm-thread-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 40px;
}

.wm-pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  background: #fff;
  box-shadow: inset 0 0 0 1px #e5e5e5;
  font-size: 13px;
  font-weight: 500;
  color: #404040;
}

.wm-pill-btn svg {
  width: 16px;
  height: 16px;
}

.wm-letter {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .wm-scope,
  .wm-switcher-row,
  .wm-tab,
  .wm-thread-bar .wm-icon,
  .wm-gutter-wash {
    transition: none;
  }
}

/* ---- "try it" hint, in the black band above the window ---- */

.shot-hint {
  position: absolute;
  top: 13px;
  left: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: calc(100% - 48px);
  transform: translateX(-50%);
  font-size: 13px;
  line-height: 24px;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.62);
  white-space: nowrap;
}

.shot-hint-tag {
  flex: none;
  padding: 0 8px;
  border-radius: 6px;
  background: var(--white);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 700;
  line-height: 20px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink);
}

.shot-hint [data-shot="hint"] {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- rail buttons that are real (mail, calendar) ---- */

.win button.wm-rail-btn {
  color: #a3a3a3;
}

.win button.wm-rail-btn.active {
  color: #404040;
}

.win button.wm-rail-btn:active {
  transform: scale(0.94);
}

/* ---- invite card (InviteCard): date tile, title, RSVP ---- */

.wm-invite {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 24px 0 0 48px;
  padding: 14px 16px;
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px #e5e5e5;
}

.wm-invite-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 48px;
  flex: none;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px #e5e5e5;
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  color: #171717;
}

.wm-invite-date b {
  margin-bottom: 4px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #e5484d;
}

.wm-invite-text {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
}

.wm-invite-title {
  font-size: 14px;
  font-weight: 600;
  color: #171717;
}

.wm-invite-when {
  font-size: 12px;
  color: #737373;
}

.wm-invite-rsvp {
  display: flex;
  gap: 6px;
}

.win .wm-invite-rsvp button {
  padding: 5px 12px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px #e5e5e5;
  font-size: 12px;
  font-weight: 500;
  color: #404040;
  transition: background-color 150ms ease-out, color 150ms ease-out;
}

.win .wm-invite-rsvp button:hover {
  background: #f5f5f5;
}

.win .wm-invite-rsvp button.on {
  background: #4f55c7;
  box-shadow: none;
  color: #fff;
}

.win .wm-invite-rsvp button:active {
  transform: scale(0.96);
}

/* ---- calendar week (CalendarView + TimeGrid) ---- */

.wm-cal {
  display: flex;
  flex: 1;
  min-width: 0;
  height: 100%;
}

.wm-cal-main {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.wm-cal-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 44px;
  flex: none;
  padding: 0 16px;
}

.wm-cal-title {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #171717;
}

.wm-cal-tools {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 12px;
  color: #404040;
}

.wm-cal-tools .wm-icon svg {
  width: 14px;
  height: 14px;
}

.wm-cal-view {
  display: flex;
  align-items: center;
  gap: 4px;
}

.wm-cal-view svg {
  width: 12px;
  height: 12px;
  color: #a3a3a3;
}

.wm-cal-days {
  display: flex;
  flex: none;
  border-bottom: 1px solid #f5f5f5;
}

.wm-cal-gutter {
  width: 56px;
  flex: none;
}

.wm-cal-day {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  padding-block: 8px;
  border-left: 1px solid #f5f5f5;
}

.wm-cal-day b {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  color: #a3a3a3;
}

.wm-cal-day i {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding-inline: 4px;
  border-radius: 999px;
  font-style: normal;
  font-size: 12px;
  font-weight: 600;
  color: #404040;
}

.wm-cal-day.is-today i {
  background: #4f55c7;
  color: #fff;
}

.wm-cal-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}

.wm-cal-scroll::-webkit-scrollbar {
  display: none;
}

.wm-cal-grid {
  display: flex;
  height: 1344px; /* 24 × 56px */
  user-select: none;
  -webkit-user-select: none;
  outline: none;
}

.wm-cal-hours {
  position: relative;
  width: 56px;
  flex: none;
}

.wm-cal-hours span {
  position: absolute;
  right: 8px;
  transform: translateY(-50%);
  font-size: 10px;
  color: #a3a3a3;
  white-space: nowrap;
}

.wm-cal-hours .wm-cal-now-pill {
  right: 4px;
  z-index: 2;
  padding: 1px 4px;
  border-radius: 4px;
  background: #4f55c7;
  font-size: 10px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: #fff;
}

.wm-cal-body {
  position: relative;
  display: flex;
  flex: 1;
  min-width: 0;
}

.wm-cal-rules {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.wm-cal-rules i {
  position: absolute;
  right: 0;
  left: 0;
  border-top: 1px solid #f5f5f5;
}

.wm-cal-col {
  position: relative;
  flex: 1;
  min-width: 0;
  border-left: 1px solid #f5f5f5;
  cursor: default;
}

.wm-cal-col.is-weekend {
  background: #f7f7f7;
}

.wm-cal-now {
  position: absolute;
  right: 0;
  left: 0;
  z-index: 3;
  height: 1px;
  background: rgba(79, 85, 199, 0.3);
  pointer-events: none;
}

.wm-cal-now i {
  position: absolute;
  top: 0;
  left: calc(var(--today) * 100% / 7);
  width: calc(100% / 7);
  height: 1px;
  background: #4f55c7;
}

.wm-cal-now i::before {
  content: "";
  position: absolute;
  top: -2.5px;
  left: -3px;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #4f55c7;
}

/* Event block: soft tint of the calendar hue, a 3px bar, hue-shaded title.
 * Same color-mix amounts as the app's light theme (14% / 100% / 72%). */
.wm-ev {
  --tint: 14%;
  --bar: 100%;
  position: absolute;
  left: 1px;
  z-index: 1;
  width: calc(100% - 3px);
  overflow: hidden;
  padding: 2px 6px;
  border-left: 3px solid color-mix(in oklab, var(--hue) var(--bar), #fff);
  border-radius: 6px;
  background: color-mix(in oklab, var(--hue) var(--tint), #fff);
  font-size: 12px;
  line-height: 16px;
  cursor: grab;
  transition:
    rotate 180ms cubic-bezier(0.23, 1, 0.32, 1),
    scale 180ms cubic-bezier(0.23, 1, 0.32, 1);
}

.wm-ev:hover {
  --tint: 20%;
}

.wm-ev.is-compact {
  display: flex;
  align-items: center;
  padding-block: 0;
}

.wm-ev.is-past {
  --tint: 10%;
  --bar: 30%;
}

.wm-ev.is-past > * {
  opacity: 0.72;
}

.wm-ev.is-hollow {
  border: 1px dashed var(--hue);
  background: #fff;
}

.wm-ev.is-declined .wm-ev-title {
  text-decoration: line-through;
}

.wm-ev.is-selected {
  z-index: 4;
  border-left-color: var(--hue);
  background: var(--hue);
}

.wm-ev.is-selected .wm-ev-title,
.wm-ev.is-selected .wm-ev-input {
  color: #fff;
}

.wm-ev.is-selected .wm-ev-time {
  color: rgba(255, 255, 255, 0.8);
}

.wm-ev.is-lifting {
  visibility: hidden;
}

/* Dragging lifts a flyer that follows the pointer untweened; only the tilt
 * eases in. The translucent copy marks the snapped slot it will land in. */
.wm-ev-flyer {
  z-index: 10;
  pointer-events: none;
  cursor: grabbing;
}

.wm-ev-flyer[data-lifted] {
  rotate: 2deg;
  scale: 1.02;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.wm-ev-copy {
  z-index: 5;
  opacity: 0.5;
  pointer-events: none;
}

.wm-ev-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 6px;
  height: 16px;
  min-width: 0;
  overflow: hidden;
}

.wm-ev.is-stacked .wm-ev-head {
  height: auto;
}

.wm-ev-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
  color: color-mix(in oklab, var(--hue) 72%, #171717);
}

.wm-ev.is-compact .wm-ev-title {
  font-size: 11px;
  line-height: 1;
}

.wm-ev-time {
  display: block;
  flex: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  color: #737373;
}

.wm-ev-input {
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  font-weight: 500;
  color: color-mix(in oklab, var(--hue) 72%, #171717);
  caret-color: currentColor;
}

.wm-ev-input::placeholder {
  color: inherit;
  opacity: 0.7;
}

.wm-ev-grip {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 6px;
  cursor: ns-resize;
}

/* ---- calendar sidebar: mini month + calendars ---- */

.wm-cal-side {
  display: flex;
  flex-direction: column;
  gap: 28px;
  width: 256px;
  flex: none;
  padding: 24px 20px;
  border-left: 1px solid #f5f5f5;
}

.wm-mini {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.wm-mini-title {
  padding-left: 4px;
  font-size: 13px;
  font-weight: 500;
  color: #171717;
}

.wm-mini-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  row-gap: 2px;
  font-size: 12px;
  text-align: center;
  color: #404040;
}

.wm-mini-grid b {
  padding-bottom: 6px;
  font-size: 11px;
  font-weight: 400;
  color: #a3a3a3;
}

.wm-mini-grid span {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  border-radius: 8px;
}

.wm-mini-grid span.is-today {
  background: #4f55c7;
  color: #fff;
}

.wm-cals {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.wm-cals-label {
  margin-top: 6px;
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #a3a3a3;
}

.wm-cals-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: #404040;
}

.wm-cals-row i {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}

.wm-cals-row.off {
  color: #a3a3a3;
}

.wm-cals-row.off i {
  background: none !important;
  box-shadow: inset 0 0 0 1.5px var(--yellow);
}

.wm-cals-row .c-peacock { background: #039be5; }
.wm-cals-row .c-sage { background: #33b679; }
.wm-cals-row .c-tangerine { background: #f4511e; }
.wm-cals-row .c-banana { background: #f6bf26; }

@media (max-width: 1200px) {
  .wm-cal-side {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wm-ev,
  .win .wm-invite-rsvp button {
    transition: none;
  }

  .wm-ev-flyer[data-lifted] {
    rotate: none;
    scale: none;
  }
}

/* ----------------------------------------------------------- social proof -- */

.trust-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding-block: 80px;
}

.trust-copy {
  white-space: nowrap;
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.trust-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 56px;
}

/* Real brand marks, so each is sized to its own optical weight rather than to
 * a shared box: a wordmark, a monogram, and a portrait crest. */
.trust-logo {
  width: auto;
  flex: none;
}

.trust-logo.magebit { height: 27px; }
.trust-logo.ubiquiti { height: 33px; }
.trust-logo.eloking { height: 46px; }
.trust-logo.olivya { height: 17px; }

@media (min-width: 768px) {
  .trust-inner {
    flex-direction: row;
    gap: 0;
  }

  .trust-logos {
    justify-content: flex-end;
    gap: 64px;
  }
}

/* --------------------------------------------------------- feature grid ---- */

.feature-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  width: 100%;
}

@media (min-width: 768px) {
  .feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.fcard {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  overflow: hidden;
  border-radius: 32px;
  background: var(--card);
}

.fcard-dark {
  background: var(--dark);
}

.fcard-art {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 200px;
  flex: none;
  overflow: hidden;
}

.fcard-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 0 40px 56px;
  text-align: center;
}

.fcard-body h3 {
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.fcard-body p {
  margin-top: 8px;
  line-height: 24px;
  color: var(--secondary);
}

.fcard-dark .fcard-body h3 {
  color: var(--white);
}

.fcard-dark .fcard-body p {
  color: var(--muted);
}

/* ------------------------------------------------- feature card scenes -- */

/* Each card's art is a small scene built by landing.js (SCENES). Rules, after
 * Emil Kowalski's animation principles:
 *
 *  - Motion explains a state change — a row leaving, a count going up, a
 *    draft arriving — never decoration. Nothing loops except the automation
 *    log, which is the point of that card, and spinners while work runs.
 *  - Transform and opacity only, with a strong ease-out at 160–300ms.
 *    Positions move through `translate`, so enter/exit can own `transform`.
 *  - Every scene is also a toy: rows, tabs, chips, toggles, and keys answer
 *    clicks, and Replay re-runs the story.
 *  - Reduced motion drops every transition and animation; the timeline then
 *    lands on its final frame immediately. */

.sx {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  height: 100%;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  user-select: none;
  -webkit-user-select: none;
}

.sx-card {
  border-radius: 14px;
  background: var(--white);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.06),
    0 6px 16px -8px rgba(0, 0, 0, 0.1);
}

.sx-label {
  font-size: 10px;
  font-weight: 600;
  line-height: 14px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.sx-row {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 36px;
  padding: 0 14px;
  white-space: nowrap;
  transition:
    translate 260ms var(--ease-out),
    transform 240ms var(--ease-out),
    opacity 200ms var(--ease-out),
    background-color 150ms ease-out;
}

.sx-row b {
  flex: none;
  width: 96px;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 600;
  color: var(--ink);
}

.sx-row span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--secondary);
}

.sx-row.is-in {
  opacity: 0;
  transform: translateY(8px);
}

.sx-row.is-out {
  opacity: 0;
  transform: translateX(28px);
}

/* Keycaps: the hero's kbd language at card scale. */
.sx-key {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  flex: none;
  padding: 0 12px;
  border-radius: 12px;
  background: var(--white);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.08),
    inset 0 -2px 0 rgba(0, 0, 0, 0.06);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  transition:
    transform 120ms var(--ease-out),
    box-shadow 120ms var(--ease-out),
    background-color 120ms var(--ease-out);
}

.sx-key.wide {
  min-width: 64px;
}

.sx-key.is-down,
.sx-key:active {
  transform: translateY(2px);
  background: #fafafa;
  box-shadow:
    0 0 0 rgba(0, 0, 0, 0),
    inset 0 -1px 0 rgba(0, 0, 0, 0.06);
}

.sx-key.xs {
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 5px;
  box-shadow: inset 0 0 0 1px #e5e5e5, inset 0 -1px 0 #e5e5e5;
  font-size: 10px;
  color: var(--secondary);
  cursor: default;
}

/* A one-line slot whose pill is swapped: old lifts out, new rises in. */
.sx-hud-ms > *,
.sx-result > * {
  transition:
    transform 200ms var(--ease-out),
    opacity 200ms var(--ease-out);
}

.sx-hud-ms > .is-in,
.sx-result > .is-in {
  opacity: 0;
  transform: translateY(8px);
}

.sx-hud-ms > .is-out,
.sx-result > .is-out {
  opacity: 0;
  transform: translateY(-8px);
}

.sx-switch {
  position: relative;
  width: 32px;
  height: 18px;
  flex: none;
  border-radius: 999px;
  background: rgba(111, 111, 111, 0.35);
  cursor: pointer;
  transition: background-color 180ms var(--ease-out);
}

.sx-switch i {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: var(--white);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  transition: transform 180ms var(--ease-out);
}

.sx-switch.on {
  background: var(--teal);
}

.sx-switch.on i {
  transform: translateX(14px);
}

/* Replay sits in the bottom corner, clear of the art, revealed on hover or
 * focus (always on touch). */
.fx-replay {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 11px 0 9px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  color: var(--secondary);
  cursor: pointer;
  opacity: 0;
  transition:
    opacity 160ms var(--ease-out),
    transform 120ms var(--ease-out);
}

.fx-replay svg {
  width: 13px;
  height: 13px;
}

.fcard:hover .fx-replay,
.fx-replay:focus-visible {
  opacity: 1;
}

.fx-replay:active {
  transform: scale(0.97);
}

.fcard-dark .fx-replay {
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  color: var(--muted);
}

@media (hover: none) {
  .fx-replay {
    opacity: 1;
  }
}

/* --- 1 · speed: mark rows done, read your own latency --- */

.sx-speed-list,
.sx-zero-list {
  position: relative;
  width: 300px;
  height: 108px;
  overflow: hidden;
}

.sx-speed-list .sx-row,
.sx-zero-list .sx-row {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  cursor: pointer;
}

.sx-speed-list .sx-row:hover {
  background: #fafafa;
}

.sx-speed-list .sx-row.is-selected {
  background: #f1f2fb;
  box-shadow: inset 2px 0 0 #4f55c7;
}

.sx-row-done {
  display: flex;
  width: 14px;
  flex: none;
  color: var(--muted);
  opacity: 0;
  transition: opacity 150ms ease-out;
}

.sx-row:hover .sx-row-done {
  opacity: 1;
}

.sx-hud {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--ink);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.75);
}

.sx-hud .sx-key.xs {
  background: rgba(255, 255, 255, 0.12);
  box-shadow: none;
  color: var(--white);
}

.sx-hud-ms {
  position: relative;
  width: 52px;
  height: 20px;
}

.sx-hud-ms > * {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.sx-hud-ms .idle { color: rgba(255, 255, 255, 0.35); }
.sx-hud-ms .fast { background: rgba(53, 151, 243, 0.24); color: #8cc8ff; }
.sx-hud-ms .good { background: rgba(84, 144, 112, 0.3); color: #9ad7b5; }
.sx-hud-ms .slow { background: rgba(231, 73, 38, 0.28); color: #ff9f88; }

/* --- 2 · splits: mail sorts itself into tabs --- */

.sx-tabs {
  position: relative;
  padding: 6px;
  border-radius: 999px;
}

.sx-tabs-row {
  display: flex;
  gap: 2px;
}

.sx-tabs-row span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  font-weight: 500;
  color: var(--secondary);
  white-space: nowrap;
  cursor: pointer;
}

.sx-tabs-row i {
  display: inline-block;
  font-style: normal;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

/* The active pill is a second, inked copy of the row clipped to one tab, so
 * switching is a single clip-path transition with no text reflow. */
.sx-tabs-on {
  position: absolute;
  top: 6px;
  left: 6px;
  border-radius: 999px;
  background: var(--ink);
  pointer-events: none;
  transition: clip-path 260ms var(--ease-out);
}

/* Same weight as the base row: the clip only lines up if both rows have
 * identical metrics. */
.sx-tabs-on span {
  color: var(--white);
}

.sx-tabs-on i {
  color: rgba(255, 255, 255, 0.6);
}

.sx-tabs-row i.is-bump {
  animation: sx-bump 320ms var(--ease-out);
}

@keyframes sx-bump {
  40% {
    transform: scale(1.5);
  }
}

.sx-split-list {
  width: 300px;
  height: 72px;
  overflow: hidden;
}

.sx-incoming {
  position: absolute;
  z-index: 2;
  border-radius: 12px;
  background: var(--white);
  box-shadow:
    0 0 0 1px rgba(53, 151, 243, 0.35),
    0 10px 24px -8px rgba(0, 0, 0, 0.25);
}

.sx-incoming.is-in {
  opacity: 0;
  transform: translateY(-12px);
}

.sx-incoming.is-flying {
  opacity: 0;
  transition:
    transform 380ms cubic-bezier(0.32, 0.72, 0, 1),
    opacity 380ms ease-in;
}

/* --- 3 · draft: streamed from memories you can delete --- */

.sx-memories {
  display: flex;
  gap: 6px;
}

.sx-mem {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 3px 0 9px;
  border-radius: 999px;
  background: rgba(194, 122, 255, 0.12);
  font-size: 11px;
  font-weight: 600;
  color: #8a3fd1;
  transition:
    opacity 180ms var(--ease-out),
    transform 180ms var(--ease-out),
    background-color 200ms ease-out;
}

.sx-mem i {
  display: flex;
}

.sx-mem i svg {
  width: 10px;
  height: 10px;
}

.sx-mem b {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  color: rgba(138, 63, 209, 0.6);
  cursor: pointer;
  transition: background-color 150ms ease-out;
}

.sx-mem b:hover {
  background: rgba(194, 122, 255, 0.22);
  color: #8a3fd1;
}

.sx-mem b svg {
  width: 10px;
  height: 10px;
}

.sx-mem.is-used {
  background: rgba(194, 122, 255, 0.28);
}

.sx-mem.is-gone {
  opacity: 0;
  transform: scale(0.9);
  pointer-events: none;
}

.sx-draft-card {
  width: 312px;
  padding: 12px 14px;
}

.sx-draft-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.sx-draft-head b {
  font-weight: 600;
}

.sx-chip {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.sx-chip.drafting {
  background: rgba(194, 122, 255, 0.12);
  color: #9a4fdd;
}

.sx-chip.ready {
  background: rgba(84, 144, 112, 0.14);
  color: var(--teal);
}

.sx-draft-text {
  min-height: 72px;
  font-size: 12px;
  line-height: 18px;
  color: #404040;
}

.sx-word {
  animation: sx-fade 220ms var(--ease-out) both;
}

@keyframes sx-fade {
  from {
    opacity: 0;
  }
}

.sx-caret {
  display: inline-block;
  width: 1.5px;
  height: 13px;
  margin-left: 1px;
  vertical-align: -2px;
  background: var(--ink);
  animation: blink 1.1s steps(1, end) infinite;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

/* --- 4 · keys: press them for real --- */

.sx-keys {
  gap: 14px;
}

.sx-keys-row {
  display: flex;
  gap: 10px;
}

.sx-result {
  position: relative;
  width: 300px;
  height: 32px;
}

.sx-result > * {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  height: 32px;
  margin: 0 auto;
  padding: 0 14px 0 12px;
  border-radius: 999px;
  background: var(--ink);
  font-weight: 500;
  color: var(--white);
}

.sx-result svg {
  width: 14px;
  height: 14px;
  color: rgba(255, 255, 255, 0.7);
}

.sx-keys-hint {
  font-size: 11px;
  color: var(--muted);
  opacity: 0;
  transition: opacity 300ms ease-out;
}

.sx-keys-hint.is-shown {
  opacity: 1;
}

/* --- 5 · snooze: picked, gone overnight, back at 8:00 --- */

.sx-snooze-slot {
  position: absolute;
  top: 30px;
  left: 50%;
  width: 300px;
  height: 44px;
  margin-left: -150px;
}

.sx-thread {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px 0 14px;
  white-space: nowrap;
  cursor: pointer;
  transition:
    transform 280ms var(--ease-out),
    opacity 220ms var(--ease-out);
}

.sx-thread b {
  flex: none;
  font-weight: 600;
}

.sx-thread-subject {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--secondary);
}

.sx-back-chip {
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(53, 151, 243, 0.12);
  font-size: 10px;
  font-weight: 700;
  color: var(--blue);
  opacity: 0;
  transform: scale(0.8);
  transition:
    opacity 200ms var(--ease-out),
    transform 240ms var(--ease-out);
}

.sx-waiting {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  border: 1px dashed #d4d4d4;
  border-radius: 14px;
  color: var(--secondary);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 200ms var(--ease-out);
}

.sx-waiting > i {
  display: flex;
}

.sx-waiting svg {
  width: 14px;
  height: 14px;
}

.sx-waiting b {
  flex: 1;
  height: 3px;
  overflow: hidden;
  border-radius: 999px;
  background: #e5e5e5;
}

.sx-waiting b i {
  display: block;
  height: 100%;
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: left;
}

.sx-waiting b i.is-running {
  transform: scaleX(1);
  transition: transform 2100ms linear;
}

.sx-picker {
  position: absolute;
  top: 82px;
  left: 50%;
  width: 220px;
  margin-left: -70px;
  padding: 4px;
  opacity: 0;
  transform: translateY(-4px) scale(0.97);
  transform-origin: top left;
  pointer-events: none;
  transition:
    opacity 160ms var(--ease-out),
    transform 180ms var(--ease-out);
}

.sx-pick {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 30px;
  padding: 0 10px;
  cursor: pointer;
}

.sx-pick em {
  font-style: normal;
  color: var(--muted);
}

.sx-pick-hl {
  position: absolute;
  top: 4px;
  right: 4px;
  left: 4px;
  height: 30px;
  border-radius: 8px;
  background: #f1f2fb;
  transition: translate 160ms var(--ease-out);
}

.sx-toast {
  position: absolute;
  bottom: 30px;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 32px;
  padding: 0 4px 0 14px;
  border-radius: 999px;
  background: var(--ink);
  color: rgba(255, 255, 255, 0.75);
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, 8px);
  pointer-events: none;
  transition:
    opacity 200ms var(--ease-out),
    transform 240ms var(--ease-out);
}

.sx-toast b {
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 600;
  color: var(--white);
  cursor: pointer;
}

.sx-toast b:hover {
  background: rgba(255, 255, 255, 0.12);
}

.sx-snooze[data-state="picking"] .sx-picker {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.sx-snooze[data-state="snoozed"] .sx-thread {
  opacity: 0;
  transform: translateX(28px);
  pointer-events: none;
}

.sx-snooze[data-state="snoozed"] .sx-waiting {
  opacity: 1;
}

.sx-snooze[data-state="snoozed"] .sx-toast {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}

.sx-snooze[data-state="back"] .sx-back-chip {
  opacity: 1;
  transform: none;
}

/* --- 6 · automation: a live run log with a kill switch --- */

.sx-auto-card {
  width: 320px;
  padding: 14px;
  border-radius: 16px;
  background: var(--surface-dark);
  box-shadow: var(--glass);
}

.sx-auto-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.sx-auto-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 8px;
  background: rgba(217, 255, 133, 0.12);
  color: var(--lime);
}

.sx-auto-icon svg {
  width: 14px;
  height: 14px;
}

.sx-auto-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.sx-auto-text b {
  font-weight: 600;
  color: var(--white);
}

.sx-auto-text em {
  font-style: normal;
  font-size: 11px;
  color: var(--muted);
  transition: color 200ms ease-out;
}

.sx-auto.is-paused .sx-auto-text em {
  color: var(--yellow);
}

.sx-log {
  position: relative;
  height: 78px;
  margin-top: 8px;
  overflow: hidden;
  transition: opacity 240ms ease-out;
}

.sx-auto.is-paused .sx-log {
  opacity: 0.4;
}

.sx-log-line {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 26px;
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
  transition:
    translate 300ms var(--ease-out),
    transform 300ms var(--ease-out),
    opacity 220ms var(--ease-out);
}

.sx-log-line.is-in {
  opacity: 0;
  transform: translateY(-8px);
}

.sx-log-line.is-out {
  opacity: 0;
}

.sx-log-line i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex: none;
  border-radius: 999px;
}

.sx-log-line i svg {
  width: 10px;
  height: 10px;
}

.sx-log-line.ok i {
  background: rgba(84, 144, 112, 0.32);
  color: #9ad7b5;
}

.sx-log-line.skip i {
  background: rgba(255, 255, 255, 0.08);
  color: var(--muted);
}

.sx-log-line span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sx-log-line.skip span {
  color: var(--muted);
}

.sx-log-line em {
  font-style: normal;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.35);
}

/* --- 7 · workflow: three steps, each with a receipt --- */

.sx-flow-card {
  width: 300px;
  padding: 14px 16px;
}

.sx-steps {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}

.sx-steps-rail {
  position: absolute;
  top: 10px;
  bottom: 22px;
  left: 9px;
  width: 2px;
  border-radius: 999px;
  background: #ececec;
}

.sx-steps-rail i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--teal);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 400ms var(--ease-out);
}

.sx-step {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 32px;
}

.sx-dot {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  flex: none;
  border-radius: 999px;
  background: #ececec;
  box-shadow: 0 0 0 3px var(--white);
  font-style: normal;
  font-size: 10px;
  font-weight: 700;
  color: var(--secondary);
  transition: background-color 200ms ease-out;
}

.sx-dot > * {
  grid-area: 1 / 1;
  transition:
    opacity 180ms var(--ease-out),
    transform 220ms var(--ease-out);
}

.sx-dot-check {
  display: flex;
  color: var(--white);
  opacity: 0;
  transform: scale(0.5);
}

.sx-dot-check svg {
  width: 11px;
  height: 11px;
}

.sx-step[data-state="running"] .sx-dot::after {
  content: "";
  position: absolute;
  inset: -3px;
  border: 2px solid transparent;
  border-top-color: var(--ink);
  border-radius: 999px;
  animation: sx-spin 700ms linear infinite;
}

@keyframes sx-spin {
  to {
    transform: rotate(360deg);
  }
}

.sx-step[data-state="done"] .sx-dot {
  background: var(--teal);
}

.sx-step[data-state="done"] .sx-dot b {
  opacity: 0;
}

.sx-step[data-state="done"] .sx-dot-check {
  opacity: 1;
  transform: none;
}

.sx-step-text {
  display: flex;
  flex-direction: column;
}

.sx-step-text b {
  font-weight: 500;
  line-height: 20px;
  color: var(--secondary);
  transition: color 200ms ease-out;
}

.sx-step:not([data-state="idle"]) .sx-step-text b {
  color: var(--ink);
}

.sx-step-text em {
  font-style: normal;
  font-size: 11px;
  line-height: 12px;
  color: var(--teal);
  opacity: 0;
  transform: translateY(-3px);
  transition:
    opacity 200ms var(--ease-out),
    transform 240ms var(--ease-out);
}

.sx-step[data-state="done"] .sx-step-text em {
  opacity: 1;
  transform: none;
}

/* --- 8 · ledger: the week's AI actions, counted --- */

.sx-ledger-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 300px;
  padding: 12px 16px;
}

.sx-ledger-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.sx-ledger-head em {
  font-style: normal;
  font-size: 11px;
  color: var(--muted);
}

.sx-lrow {
  display: grid;
  grid-template-columns: 92px 1fr 44px;
  align-items: center;
  gap: 10px;
  height: 20px;
  cursor: default;
}

.sx-lrow b {
  font-weight: 500;
  color: var(--secondary);
  transition: color 150ms ease-out;
}

.sx-lrow em {
  font-style: normal;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.sx-lbar {
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: #f2f2f2;
}

.sx-lbar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #cfcfcf;
  transform: scaleX(0);
  transform-origin: left;
  transition:
    transform 900ms var(--ease-out),
    background-color 150ms ease-out;
}

.sx-lrow:nth-of-type(3) .sx-lbar i { transition-delay: 60ms, 0ms; }
.sx-lrow:nth-of-type(4) .sx-lbar i { transition-delay: 120ms, 0ms; }
.sx-lrow:nth-of-type(5) .sx-lbar i { transition-delay: 180ms, 0ms; }

.sx-lrow.is-on b {
  color: var(--ink);
}

.sx-lrow.is-on .sx-lbar i {
  background: var(--ink);
}

.sx-ledger-last {
  margin-top: 2px;
  padding-top: 8px;
  overflow: hidden;
  border-top: 1px solid #f2f2f2;
  font-size: 11px;
  color: var(--secondary);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- 9 · inbox zero: clear the rows, earn the coffee --- */

.sx-zero-list {
  transition:
    opacity 240ms var(--ease-out),
    transform 240ms var(--ease-out);
}

.sx-tick {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex: none;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1.5px #d4d4d4;
  color: transparent;
  transition:
    background-color 150ms ease-out,
    box-shadow 150ms ease-out,
    color 150ms ease-out;
}

.sx-tick svg {
  width: 10px;
  height: 10px;
}

.sx-zero-list .sx-row:hover .sx-tick {
  box-shadow: inset 0 0 0 1.5px var(--teal);
}

.sx-zero-list .sx-row b {
  width: 84px;
}

.sx-row.is-done .sx-tick {
  background: var(--teal);
  box-shadow: none;
  color: var(--white);
}

.sx-row.is-done b,
.sx-row.is-done span {
  color: var(--muted);
}

.sx-zero.is-zero .sx-zero-list {
  opacity: 0;
  transform: scale(0.96);
  pointer-events: none;
}

.sx-peace {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition:
    opacity 300ms var(--ease-out),
    transform 360ms var(--ease-out);
}

.sx-peace img {
  width: 48px;
  height: 48px;
}

.sx-peace span {
  font-size: 15px;
  font-weight: 300;
  color: var(--secondary);
}

.sx-zero.is-zero .sx-peace {
  opacity: 1;
  transform: none;
  transition-delay: 120ms;
}

/* --- 10 · nudge: Monday's ask, Thursday's silence --- */

.sx-sent,
.sx-nudge-card {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 316px;
  border-radius: 14px;
  background: var(--surface-dark);
  box-shadow: var(--glass);
}

.sx-sent {
  padding: 10px 14px;
  color: rgba(255, 255, 255, 0.85);
}

.sx-you {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.sx-week {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: 316px;
  padding-top: 10px;
}

.sx-week span {
  font-size: 11px;
  text-align: center;
  color: rgba(255, 255, 255, 0.3);
  transition: color 200ms ease-out;
}

.sx-week span.is-on {
  color: var(--white);
}

.sx-week-track {
  position: absolute;
  top: 0;
  right: 12.5%;
  left: 12.5%;
  height: 2px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
}

.sx-week-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--purple);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 460ms var(--ease-out);
}

.sx-nudge-card {
  padding: 10px 10px 10px 14px;
  box-shadow:
    var(--glass),
    0 12px 28px -12px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 240ms var(--ease-out),
    transform 320ms var(--ease-out);
}

.sx-nudge.is-due .sx-nudge-card {
  opacity: 1;
  transform: none;
}

.sx-nudge-clock {
  display: flex;
  color: var(--purple);
}

.sx-nudge-clock svg {
  width: 16px;
  height: 16px;
}

.sx-nudge-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.sx-nudge-text b {
  font-weight: 600;
  color: var(--white);
}

.sx-nudge-text em {
  overflow: hidden;
  font-style: normal;
  font-size: 10.5px;
  color: var(--purple);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sx-nudge-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  flex: none;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--white);
  font-size: 11px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  transition:
    background-color 180ms ease-out,
    color 180ms ease-out,
    transform 120ms var(--ease-out);
}

.sx-nudge-btn:active {
  transform: scale(0.97);
}

.sx-nudge-btn svg {
  width: 11px;
  height: 11px;
}

.sx-nudge-btn.is-ready {
  background: rgba(84, 144, 112, 0.28);
  color: #9ad7b5;
}

@media (prefers-reduced-motion: reduce) {
  .sx *,
  .sx *::before,
  .sx *::after,
  .fx-replay {
    transition: none !important;
    animation: none !important;
  }
}

/* ---------------------------------------------------- feature grid: more -- */

.features {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.more {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.more > summary {
  display: flex;
  justify-content: center;
  padding-top: 8px;
  cursor: pointer;
  list-style: none;
}

.more > summary::-webkit-details-marker {
  display: none;
}

/* Expanding is one-way on purpose: a trigger stranded between two grids reads
 * worse than losing the ability to collapse. */
.more[open] > summary {
  display: none;
}

.more-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 999px;
  background: var(--card);
  font-size: 14px;
  line-height: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  transition: background-color 150ms ease-out;
}

.more > summary:hover .more-btn {
  background: var(--page);
}

.more-btn svg {
  width: 16px;
  height: 16px;
}

/* --------------------------------------------------------------- how it -- */

.split {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 48px;
  width: 100%;
}

@media (min-width: 1024px) {
  .split {
    flex-direction: row;
    gap: 104px;
  }
}

.steps {
  display: flex;
  flex-direction: column;
  width: 100%;
  flex: none;
}

@media (min-width: 1024px) {
  .steps {
    width: 424px;
  }
}

.step {
  position: relative;
  width: 100%;
  border-bottom: 1px solid rgba(231, 231, 231, 0.9);
}

.step.first {
  border-top: 1px solid rgba(231, 231, 231, 0.9);
}

/* The row padding lives on the summary, not the details, so the whole row is
 * the hit target rather than just the badge and the title text. */
.step summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-block: 24px;
  cursor: pointer;
  list-style: none;
}

/* Keeps the gap to the open body at the original 12px. */
.step[open] summary {
  padding-bottom: 12px;
}

.step summary::-webkit-details-marker,
.faq-item summary::-webkit-details-marker {
  display: none;
}

.step summary h3 {
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--secondary);
  transition: color 300ms ease-out;
}

.step-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 999px;
  background: var(--card);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--secondary);
  transition: background-color 300ms ease-out, color 300ms ease-out;
}

.step:hover .step-badge,
.step[open] .step-badge {
  background: var(--ink);
  color: var(--white);
}

.step[open] summary h3 {
  color: var(--ink);
}

.step-body {
  padding-bottom: 24px;
}

.step-body p,
.faq-a p {
  max-width: 800px;
  line-height: 28px;
  color: var(--secondary);
}

.split-art {
  position: relative;
  width: 100%;
  height: 320px;
  flex: none;
  overflow: hidden;
  border-radius: 32px;
}

@media (min-width: 1024px) {
  .split-art {
    width: 512px;
  }
}

/* Each step has its own figure stacked in the same box; the open step decides
 * which is visible. Without :has() the first stays on, which is the old
 * single-illustration behaviour. */
.split-fig {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 32px;
  background: var(--card);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 180ms ease-out,
    visibility 180ms;
}

.split-fig:first-child {
  opacity: 1;
  visibility: visible;
}

.split:has(.step:nth-of-type(2)[open]) .split-fig:first-child,
.split:has(.step:nth-of-type(3)[open]) .split-fig:first-child {
  opacity: 0;
  visibility: hidden;
}

.split:has(.step:nth-of-type(2)[open]) .split-fig:nth-child(2),
.split:has(.step:nth-of-type(3)[open]) .split-fig:nth-child(3) {
  opacity: 1;
  visibility: visible;
}

@media (prefers-reduced-motion: reduce) {
  .split-fig {
    transition: none;
  }
}

/* Auto-advance progress: a hairline filling the open step's bottom border.
 * Driven by WAAPI so hover can pause it mid-fill. */
.step-progress {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  overflow: hidden;
  pointer-events: none;
}

.step-progress i {
  display: block;
  height: 100%;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
}

.split-fig .sx {
  gap: 24px;
}

/* --- step 1 · Gmail → this device, and nothing to us --- */

.sx-net {
  display: flex;
  align-items: flex-start;
}

.sx-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 108px;
  text-align: center;
}

.sx-node-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: 10px;
  border-radius: 16px;
  background: var(--white);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.06),
    0 6px 16px -8px rgba(0, 0, 0, 0.1);
  color: var(--ink);
}

.sx-node-icon svg {
  width: 22px;
  height: 22px;
}

.sx-node.device .sx-node-icon {
  background: var(--ink);
  color: var(--white);
}

.sx-node.ours .sx-node-icon {
  border: 1.5px dashed #c8c8c8;
  background: transparent;
  box-shadow: none;
  color: var(--muted);
}

.sx-node b {
  font-weight: 600;
}

.sx-node em {
  font-style: normal;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--secondary);
  transition: color 200ms ease-out;
}

.sx-node.ours em {
  font-weight: 600;
  color: var(--orange);
}

.sx-mirror.is-synced .sx-node.device em {
  color: var(--teal);
}

.sx-wire {
  position: relative;
  width: 56px;
  height: 2px;
  flex: none;
  margin-top: 25px;
  border-radius: 999px;
}

.sx-wire.live {
  background: #d4d4d4;
}

.sx-wire.live i {
  position: absolute;
  top: -2px;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--blue);
  opacity: 0;
}

.sx-mirror.is-live .sx-wire.live i {
  animation: sx-packet 900ms linear infinite;
}

.sx-mirror.is-live .sx-wire.live i:nth-child(2) { animation-delay: 300ms; }
.sx-mirror.is-live .sx-wire.live i:nth-child(3) { animation-delay: 600ms; }

@keyframes sx-packet {
  0% {
    opacity: 0;
    transform: translateX(0);
  }
  20%,
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateX(50px);
  }
}

.sx-wire.cut {
  background: repeating-linear-gradient(90deg, #d4d4d4 0 4px, transparent 4px 8px);
}

.sx-cut {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--white);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
  color: var(--orange);
  transform: translate(-50%, -50%);
}

.sx-cut svg {
  width: 10px;
  height: 10px;
}

.sx-mirror-foot {
  display: flex;
  gap: 8px;
}

.sx-mirror-foot span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--white);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
  font-size: 11.5px;
  color: var(--secondary);
}

.sx-mirror-foot svg {
  width: 12px;
  height: 12px;
}

/* --- step 2 · AI switched per mailbox --- */

.sx-ai-card {
  display: flex;
  flex-direction: column;
  width: 320px;
  padding: 14px 16px 8px;
}

.sx-ai-card .sx-label {
  margin-bottom: 4px;
}

.sx-ai-row {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  cursor: pointer;
}

.sx-ai-row + .sx-ai-row {
  border-top: 1px solid #f2f2f2;
}

.sx-avatar {
  display: flex;
  width: 24px;
  height: 24px;
  flex: none;
  overflow: hidden;
  border-radius: 999px;
  background: #e8e8e8;
  transition: opacity 200ms ease-out;
}

.sx-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sx-avatar i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  color: var(--secondary);
}

.sx-ai-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.sx-ai-text b {
  overflow: hidden;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color 200ms ease-out;
}

.sx-ai-text em {
  position: relative;
  height: 16px;
  font-style: normal;
  font-size: 11px;
}

.sx-ai-text em span {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  transition:
    opacity 180ms var(--ease-out),
    transform 220ms var(--ease-out);
}

.sx-ai-text em svg {
  width: 10px;
  height: 10px;
}

.sx-ai-text .on {
  color: var(--teal);
}

.sx-ai-text .off {
  color: var(--secondary);
  opacity: 0;
  transform: translateY(4px);
}

.sx-ai-row.is-off .on {
  opacity: 0;
  transform: translateY(-4px);
}

.sx-ai-row.is-off .off {
  opacity: 1;
  transform: none;
}

.sx-ai-row.is-off .sx-avatar {
  opacity: 0.45;
}

.sx-ai-row.is-off b {
  color: var(--secondary);
}

.sx-ai-foot {
  font-size: 11.5px;
  color: var(--secondary);
}

/* --- step 3 · seats in, price out --- */

.sx-team-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 300px;
  padding: 20px;
}

.sx-faces {
  display: flex;
  align-items: center;
}

.sx-faces i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-left: -3px;
  border-radius: 999px;
  box-shadow: 0 0 0 2px var(--white);
  font-style: normal;
  font-size: 9.5px;
  font-weight: 700;
}

.sx-faces i:first-child { margin-left: 0; }
.sx-faces i:nth-child(1) { background: #e3effd; color: var(--blue); }
.sx-faces i:nth-child(2) { background: #f3e9ff; color: #9a4fdd; }
.sx-faces i:nth-child(3) { background: #e3f0e9; color: var(--teal); }
.sx-faces i:nth-child(4) { background: #fdebe5; color: var(--orange); }
.sx-faces i:nth-child(5) { background: #fcf3da; color: #a87f0e; }
.sx-faces i:nth-child(6) { background: #efefef; color: var(--secondary); }

.sx-faces b {
  margin-left: 8px;
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--secondary);
}

.sx-seats {
  display: flex;
  align-items: center;
  gap: 14px;
}

.sx-step-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--card);
  font-size: 16px;
  color: var(--ink);
  cursor: pointer;
  transition:
    background-color 150ms ease-out,
    transform 120ms var(--ease-out);
}

.sx-step-btn:hover {
  background: var(--page);
}

.sx-step-btn:active {
  transform: scale(0.94);
}

.sx-seat-count {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 5px;
  min-width: 80px;
}

.sx-seat-count b {
  font-size: 22px;
  line-height: 28px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.sx-seat-count em,
.sx-total em {
  font-style: normal;
  color: var(--secondary);
}

.sx-total {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.sx-total b {
  font-size: 28px;
  line-height: 32px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
}

.sx-team-note {
  font-size: 11.5px;
  color: var(--muted);
}

.code-line {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding-inline: 22px;
  /* Rows are a fixed 28px, so a wrap would break the panel. */
  white-space: nowrap;
}

.code-line em {
  width: 16px;
  flex: none;
  font-style: normal;
  text-align: right;
  margin-right: 10px;
  color: rgba(255, 255, 255, 0.2);
}

.code-line.active {
  background: rgba(255, 255, 255, 0.06);
}

.code-line.active::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 100%;
  background: var(--blue);
}

.c-purple { color: var(--purple); }
.c-blue { color: var(--blue); }
.c-orange { color: var(--orange); }
.c-white { color: var(--white); }
.c-dim { color: rgba(255, 255, 255, 0.4); }

/* ---------------------------------------------------------- comparison ---- */

.table-wrap {
  width: 100%;
}

/* The table only needs to scroll once it cannot fit; keeping overflow visible
 * on wider screens lets the tooltip escape the cell instead of being clipped. */
@media (max-width: 900px) {
  .table-wrap {
    overflow-x: auto;
  }
}

.compare {
  width: 100%;
  min-width: 640px;
  table-layout: fixed;
  border-collapse: collapse;
  letter-spacing: -0.02em;
}

.compare th {
  height: 72px;
  text-align: left;
  vertical-align: middle;
  font-weight: 500;
  line-height: 24px;
  color: var(--white);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.compare th.strong {
  font-weight: 600;
}

.compare td {
  padding-block: 24px;
  vertical-align: middle;
  line-height: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  color: var(--muted);
}

.compare tbody tr:last-child td {
  border-bottom: 0;
}

.compare td:first-child {
  color: rgba(255, 255, 255, 0.9);
}

.compare th + th,
.compare td + td {
  padding-left: 24px;
}

.compare .plain {
  color: var(--white);
}

.status {
  display: flex;
  align-items: center;
  gap: 8px;
}

.status .bright {
  color: var(--white);
}

.status-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex: none;
  border-radius: 999px;
  color: var(--white);
}

.status-icon svg {
  width: 12px;
  height: 12px;
}

.status-icon.yes {
  background: var(--blue);
}

.status-icon.no,
.status-icon.neutral {
  background: var(--surface-dark);
}

.status-icon.maybe {
  background: var(--yellow);
  color: var(--ink);
}

.status .status-icon.yes + span {
  color: rgba(255, 255, 255, 0.9);
}

/* Hover, keyboard focus and tap all reveal the note — a tap focuses the
 * trigger, which is why this uses :focus and not :focus-visible. */
.info {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.75);
  cursor: help;
}

.info svg {
  width: 10px;
  height: 10px;
}

.info:hover,
.info:focus {
  background: rgba(255, 255, 255, 0.22);
  color: var(--white);
}

.info-bubble {
  position: absolute;
  bottom: calc(100% + 10px);
  left: -12px;
  z-index: 5;
  width: 360px;
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  background: var(--surface-dark);
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.7), var(--glass);
  font-size: 13px;
  line-height: 20px;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.8);
  text-align: left;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition:
    opacity 140ms ease-out,
    transform 140ms ease-out,
    visibility 140ms;
}

.info:hover .info-bubble,
.info:focus .info-bubble {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .info-bubble {
    transition: none;
    transform: none;
  }
}

/* On a phone the cell is too narrow to anchor a 320px bubble, and the table
 * scrolls horizontally — so pin it to the viewport instead. Fixed positioning
 * is not clipped by the scroll container. */
@media (max-width: 900px) {
  .info-bubble {
    position: fixed;
    right: 16px;
    bottom: 16px;
    left: 16px;
    width: auto;
    transform: none;
  }
}

/* ------------------------------------------------------------- pricing ---- */

.plans {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

@media (min-width: 768px) {
  .plans {
    flex-direction: row;
  }
}

.plan {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 32px;
  padding: 56px 48px;
  border-radius: 32px;
  background: var(--card);
}

@media (min-width: 768px) {
  .plan {
    min-height: 640px;
  }
}

.plan-dark {
  background: var(--dark);
}

.plan-head {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

.plan-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.plan-title h3 {
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.plan-dark .plan-title h3 {
  color: var(--white);
}

.badge {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding-inline: 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.badge.blue {
  background: rgba(53, 151, 243, 0.1);
  color: var(--blue);
}

.plan-price {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

.price {
  letter-spacing: -0.03em;
}

.price .amount {
  font-size: 40px;
  line-height: 48px;
  font-weight: 600;
}

.plan-dark .price .amount {
  color: var(--white);
}

.price .note {
  margin-left: 8px;
  font-size: 18px;
  line-height: 28px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--secondary);
}

.plan-desc {
  line-height: 28px;
  color: var(--secondary);
}

.plan-dark .plan-desc {
  color: var(--muted);
}

.plan-features {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 16px;
}

.plan-features p {
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 28px;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.plan-dark .plan-features p {
  color: var(--white);
}

.tick {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex: none;
  border-radius: 999px;
  background: var(--blue);
  color: var(--white);
}

.tick svg {
  width: 12px;
  height: 12px;
}

/* ------------------------------------------------------------------ faq ---- */

.faq {
  width: 100%;
}

.faq-item {
  width: 100%;
  border-bottom: 1px solid rgba(231, 231, 231, 0.9);
}

.faq-item.first {
  border-top: 1px solid rgba(231, 231, 231, 0.9);
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 72px;
  cursor: pointer;
  list-style: none;
}

.faq-q {
  text-align: left;
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.faq-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 999px;
  background: var(--card);
  transition: transform 200ms ease-out;
}

.faq-icon svg {
  width: 12px;
  height: 12px;
}

.faq-item[open] .faq-icon {
  transform: rotate(45deg);
}

.faq-a {
  padding-bottom: 24px;
}

/* Native single-open accordions (<details name>) with a height transition
 * where the browser supports ::details-content; elsewhere they simply snap. */
@media (prefers-reduced-motion: no-preference) {
  .step::details-content,
  .faq-item::details-content {
    block-size: 0;
    overflow: hidden;
    transition:
      block-size 200ms ease-out,
      content-visibility 200ms allow-discrete;
  }

  .step[open]::details-content,
  .faq-item[open]::details-content {
    block-size: auto;
  }
}

/* ---------------------------------------------------------------- footer -- */

.site-footer {
  border-radius: 24px;
}

@media (min-width: 768px) {
  .site-footer {
    border-radius: 48px;
  }
}

.footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 64px;
  padding-top: 144px;
}

@media (min-width: 768px) {
  .footer-inner {
    gap: 144px;
  }
}

.footer-main {
  display: flex;
  flex-direction: column;
  gap: 64px;
  width: 100%;
}

@media (min-width: 768px) {
  .footer-main {
    gap: 128px;
  }
}

.footer-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
  width: 100%;
}

@media (min-width: 768px) {
  .footer-cta {
    flex-direction: row;
    align-items: flex-end;
  }
}

.footer-cta-text {
  font-size: 48px;
  line-height: 64px;
  font-weight: 600;
  letter-spacing: -0.03em;
}

@media (min-width: 768px) {
  .footer-cta-text {
    width: 50%;
    font-size: 60px;
  }
}

.footer-cta-text .on,
.footer-cta-text .off {
  display: block;
}

.footer-cta-text .on {
  color: var(--white);
}

.footer-cta-text .off {
  color: var(--muted);
}

@media (min-width: 768px) {
  .footer-cta-btn {
    width: 25%;
  }
}

.footer-cols {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 48px;
  width: 100%;
}

@media (min-width: 768px) {
  .footer-cols {
    flex-direction: row;
  }
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.footer-col.legal {
  gap: 16px;
}

@media (min-width: 768px) {
  .footer-col.legal {
    width: 25%;
  }
}

.footer-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer-label {
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--muted);
}

.footer-hq {
  display: flex;
  align-items: center;
  gap: 8px;
}

.eu-flag {
  width: 24px;
  height: 24px;
  flex: none;
}

.footer-value,
.footer-link {
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--white);
}

.footer-link {
  transition: color 150ms ease-out;
}

.footer-link:hover {
  color: var(--muted);
}

.footer-nav {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.footer-copy {
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.02em;
  color: var(--muted);
}

/* The brand mark is a black-filled SVG; 18% inversion lands it exactly on the
 * --wordmark token so it reads as a watermark against the dark gradient. */
.footer-wordmark {
  width: 100%;
  max-width: 1040px;
  height: auto;
  filter: invert(18%);
}

/* --------------------------------------------------------------- narrow --- */

@media (max-width: 1023px) {
  .card {
    border-radius: 32px;
  }

  .block-tall {
    padding-top: 88px;
    padding-bottom: 96px;
  }

  .stack-16 {
    gap: 48px;
  }

  h1 {
    font-size: 40px;
    line-height: 46px;
  }

  .lead {
    font-size: 18px;
    line-height: 28px;
  }

  .hero-body {
    margin-top: 72px;
    gap: 48px;
  }

  .shot {
    height: 520px;
    border-radius: 24px;
  }

  .win {
    height: 420px;
  }

  .footer-inner {
    padding-top: 88px;
  }

  .plan {
    padding: 40px 32px;
  }
}

@media (max-width: 767px) {
  .page {
    padding: 8px;
  }

  .card {
    border-radius: 24px;
  }

  h1 {
    font-size: 34px;
    line-height: 40px;
  }

  .sec-head h2 {
    font-size: 26px;
    line-height: 34px;
  }

  /* The soft half of a statement heading is long; on a phone it has to read
   * as body copy rather than as more headline. */
  .sec-head h2 .soft {
    display: block;
    margin-top: 12px;
    font-size: 18px;
    line-height: 28px;
    letter-spacing: -0.02em;
  }

  /* Hard breaks exist to shape desktop lines; let narrow text wrap naturally. */
  .lead br,
  .sec-desc br,
  .sec-head h2 .soft br,
  .fcard-body p br {
    display: none;
  }


  .nav {
    padding: 10px 12px;
  }

  .nav-actions {
    gap: 8px;
  }

  .nav-name {
    font-size: 15px;
    white-space: nowrap;
  }

  .trust-copy {
    white-space: normal;
    text-align: center;
  }

  .trust-logos {
    gap: 40px;
  }

  .shot {
    height: 380px;
  }

  .win {
    height: 320px;
    width: calc(100% - 32px);
  }

  /* A phone cannot carry a 1300px window, so drop everything that would only
   * truncate: the rail, the trailing tabs, the top-bar actions, the snippet
   * and the time column. Sender + subject still read as the real list. */
  .wm-rail,
  .wm-tab:nth-child(n + 3),
  .wm-topbar-actions,
  .wm-snippet,
  .wm-time {
    display: none;
  }

  .wm-topbar {
    padding-inline: 14px;
  }

  /* The demo hints name keys and the calendar, which a phone can't reach. */
  .shot-hint {
    display: none;
  }

  .wm-row,
  .wm-spacer {
    padding-left: 20px;
  }

  .wm-from {
    width: 88px;
  }

  .footer-cta-text {
    font-size: 36px;
    line-height: 44px;
  }
}

@media (max-width: 520px) {
  /* A phone cannot fit the W, the typeset name, and both actions. Drop the
   * monogram and name for the wordmark so the bar still reads as Wingman. */
  .nav-mark,
  .nav-name {
    display: none;
  }

  .nav-wordmark {
    display: block;
  }

  /* The illustrations are drawn at a fixed 264–330px; shrink them to fit
   * rather than clipping them against the card edge. */
  .fcard-art {
    transform: scale(0.85);
  }

  /* The three-node diagram is drawn at 430px; shrink it into the figure. */
  .sx-net {
    scale: 0.74;
  }

  .fcard-body {
    padding-inline: 24px;
  }

  .plan {
    padding: 32px 24px;
  }
}

/* -------------------------------------------------------------- booking -- */

.booking-shell {
  max-width: 640px;
  margin-inline: auto;
}

.booking-card {
  min-height: auto;
}

.booking-body {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-block: 48px;
}

.booking-body h1 {
  font-size: 32px;
  line-height: 40px;
  letter-spacing: -0.03em;
}

.booking-body h2 {
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
}

.booking-desc,
.booking-note {
  color: var(--secondary);
}

.booking-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.booking-day {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.booking-slots {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.booking-slot {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--card);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.booking-slot:has(input:checked) {
  background: var(--ink);
  color: var(--white);
}

.booking-slot input {
  accent-color: var(--ink);
}

.booking-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
}

.booking-field input,
.booking-field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--white);
  color: var(--ink);
  font: inherit;
  font-weight: 400;
}

.booking-field textarea {
  resize: vertical;
  min-height: 72px;
}

.booking-form .btn {
  border: none;
}