/* ============================================================
   Nifty landing — one screen: the copy, the window, the pair
   ============================================================ */

:root {
  --desk: #e9e9e4;
  --paper: #f5f5f2;
  --surface: #ffffff;
  --ink: #111214;
  --ink-2: #4a4d50;
  --ink-3: #6b6f72;
  --ink-4: #8a8d90;
  --line: #dcdcd6;
  --line-soft: #e7e7e1;
  --line-strong: #c8c9c3;
  --live: #16a34a;
  --signal: #65a30d;

  /* the app's shadcn/zinc palette, resolved from Theme.swift */
  --app-canvas: #f4f4f6;
  --app-item: #ffffff;
  --app-border: #e4e4e7;
  --app-fg: #09090b;
  --app-muted: #71717a;
  --app-hint: #a1a1aa;
  --app-danger: #dc2626;
  --app-warning: #ca8a04;

  --font-display: "Archivo", -apple-system, BlinkMacSystemFont, "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
  --font-app: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue",
    "PingFang SC", "Microsoft YaHei", sans-serif;

  --shell: 1400px;
  --pad: clamp(20px, 4vw, 56px);
  --bar: 56px;
}

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

/* One cursor for the whole page: the normal arrow. */
html,
body,
*,
*::before,
*::after { cursor: default; }

html {
  -webkit-text-size-adjust: 100%;
  background: var(--desk);
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  min-height: 100svh;
  background: var(--desk);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection { background: var(--ink); color: var(--paper); }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 4px;
}

h1, h2, h3, p, dl, dd, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; }

.mono {
  font-family: var(--font-mono);
  font-variant-ligatures: none;
  font-feature-settings: "tnum" 1;
}

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

.skip {
  position: fixed;
  top: 8px;
  left: 50%;
  z-index: 100;
  padding: 7px 14px;
  background: var(--ink);
  color: var(--paper);
  border-radius: 6px;
  font-size: 12.5px;
  text-decoration: none;
  transform: translate(-50%, -240%);
  transition: transform 0.18s ease;
}
.skip:focus-visible { transform: translate(-50%, 0); }

main:focus { outline: none; }

.glyph { display: inline-block; fill: currentColor; vertical-align: middle; }

.ico {
  width: 12px;
  height: 12px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: middle;
}

[id] { scroll-margin-top: 76px; }

/* ── top bar ─────────────────────────────────────────────── */

.topbar {
  position: sticky;
  top: 0;
  z-index: 60;
  height: var(--bar);
  display: flex;
  align-items: center;
  gap: 24px;
  padding-left: max(var(--pad), calc((100vw - var(--shell)) / 2 + var(--pad)));
  padding-right: max(var(--pad), calc((100vw - var(--shell)) / 2 + var(--pad)));
  background: rgba(245, 245, 242, 0.88);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--line);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--ink);
  flex: none;
}
.glyph--brand { width: 20px; height: 13px; }
.brand__name {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0;
}
.brand__tag {
  margin-left: 0;
  padding-left: 8px;
  border-left: 1px solid var(--line-strong);
  color: var(--ink-3);
  font-size: 9.5px;
  letter-spacing: 0.04em;
}

.dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--live);
  flex: none;
  animation: pulse 2.6s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.32); }
  50% { box-shadow: 0 0 0 4px rgba(22, 163, 74, 0); }
}

.ico--gh { width: 14px; height: 14px; fill: currentColor; stroke: none; }

/* ── page plate / one screen ────────────────────────────── */

.plate {
  max-width: var(--shell);
  min-height: calc(100svh - var(--bar));
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
}

.plate > main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* ── hero ────────────────────────────────────────────────── */

.hero {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 0.66fr) minmax(0, 1.34fr);
  align-items: center;
  gap: clamp(28px, 4vw, 60px);
  padding: clamp(24px, 4.4vh, 52px) var(--pad) clamp(20px, 3.2vh, 40px);
}

.hero__copy { min-width: 0; }
.hero__copy > * {
  animation: rise 0.72s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.hero__copy > :nth-child(2) { animation-delay: 0.05s; }
.hero__copy > :nth-child(3) { animation-delay: 0.1s; }
.hero__copy > :nth-child(4) { animation-delay: 0.15s; }
.hero__copy > :nth-child(5) { animation-delay: 0.2s; }
.hero__copy > :nth-child(6) { animation-delay: 0.25s; }

@keyframes rise {
  from { opacity: 0; transform: translateY(9px); }
  to { opacity: 1; transform: none; }
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-3);
  font-size: 10px;
  letter-spacing: 0.02em;
}
.eyebrow::before {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--line-strong);
}

.hero__title {
  margin-top: clamp(14px, 2vh, 22px);
  font-family: var(--font-display);
  font-size: clamp(42px, min(4.8vw, 6.6vh), 68px);
  line-height: 0.98;
  letter-spacing: -0.04em;
  font-weight: 600;
}

.hero__lede {
  margin-top: clamp(14px, 2.2vh, 22px);
  max-width: 32em;
  font-size: clamp(14px, 1.05vw, 15.5px);
  line-height: 1.78;
  color: var(--ink-2);
  text-wrap: pretty;
}

/* product notes — the "spec sheet" voice, compressed */

.notes {
  list-style: none;
  margin-top: clamp(16px, 2.4vh, 26px);
  border-top: 1px solid var(--line);
}

.note {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 4px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}
.note__n {
  color: var(--ink-3);
  font-size: 9.5px;
  padding-top: 2px;
}
.note__text {
  font-size: 12.5px;
  line-height: 1.62;
  color: var(--ink-2);
  text-wrap: pretty;
}
.note__text b {
  display: inline-block;
  margin-right: 8px;
  color: var(--ink);
  font-weight: 600;
}

.acts {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(16px, 2.4vh, 26px);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 16px;
  border-radius: 8px;
  border: 1px solid transparent;
  font-size: 13px;
  text-decoration: none;
  transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}

.btn--solid {
  gap: 8px;
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
  padding: 0 16px;
}
.btn--solid:hover { background: #2a2c2f; border-color: #2a2c2f; }

.btn__ico { width: 18px; height: 18px; stroke-width: 1.5; }
.btn__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  line-height: 1.25;
}
.btn__meta {
  font-family: var(--font-mono);
  font-size: 9.5px;
  opacity: 0.6;
}

.btn--quiet {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--ink);
}
.btn--quiet:hover { background: var(--surface); border-color: var(--ink-3); }
.btn--quiet .btn__ico { width: 18px; height: 18px; color: var(--ink-2); }
.btn__ico--chrome { fill: currentColor; stroke: none; }

.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: clamp(16px, 2.4vh, 26px);
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.stats > div {
  padding-left: 16px;
  border-left: 1px solid var(--line-soft);
  min-width: 0;
}
.stats > div:first-child { padding-left: 0; border-left: 0; }
.stats dt {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  white-space: nowrap;
}
.stats dd {
  margin: 1px 0 0;
  color: var(--ink-3);
  font-size: 10px;
  line-height: 1.3;
  overflow-wrap: break-word;
  hyphens: auto;
}

/* ── stage: extension + app ─────────────────────────────── */

.hero__stage { min-width: 0; }

.pair {
  display: grid;
  grid-template-columns: 252px 28px minmax(0, 1fr);
  align-items: center;
}

.pair__flow {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-4);
  padding-top: 20px;
}
.pair__flow svg { width: 24px; height: 12px; overflow: visible; }

.pair__pulse {
  position: absolute;
  left: 4px;
  top: 26px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--ink);
  opacity: 0;
  animation: handoff 3.2s ease-in-out 3;
}

@keyframes handoff {
  0% { opacity: 0; transform: translateX(0); }
  18% { opacity: 1; }
  65% { opacity: 1; transform: translateX(18px); }
  100% { opacity: 0; transform: translateX(18px); }
}

.cap {
  display: block;
  margin-top: 8px;
  color: var(--ink-3);
  font-size: 9.5px;
  letter-spacing: 0.02em;
}
.ext .cap { text-align: center; }

/* Chrome extension popup */

.ext { min-width: 0; }

.ext__cluster { min-width: 0; }

/* a sliver of Chrome toolbar, so the popup reads as an extension */
.ext__browser {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 8px;
  margin-bottom: 8px;
  border: 1px solid var(--app-border);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(9, 9, 11, 0.04);
  color: var(--app-muted);
  animation: win-in 0.8s 0.1s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.ext__dots { display: inline-flex; gap: 4px; flex: none; }
.ext__dots i { width: 6px; height: 6px; border-radius: 50%; background: #e4e4e7; }
.ext__tab {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  min-width: 0;
  padding: 3px 7px;
  border-radius: 5px;
  background: var(--app-canvas);
  font-size: 9px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ext__tab .glyph { width: 10px; height: 7px; flex: none; color: var(--app-fg); }
.ext__pin {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 20px;
  height: 20px;
  border: 1px solid var(--app-border);
  border-radius: 5px;
  background: var(--app-canvas);
  color: var(--app-fg);
}
.ext__pin .glyph { width: 11px; height: 8px; }
.ext__pin i {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--live);
  box-shadow: 0 0 0 1.5px #fff;
}

.ext__card {
  background: var(--surface);
  border: 1px solid var(--app-border);
  border-radius: 12px;
  box-shadow: 0 24px 48px -30px rgba(9, 9, 11, 0.34), 0 1px 2px rgba(9, 9, 11, 0.05);
  overflow: hidden;
  font-family: var(--font-app);
  color: var(--app-fg);
  animation: win-in 0.8s 0.12s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

@keyframes win-in {
  from { opacity: 0; transform: translateY(12px) scale(0.995); }
  to { opacity: 1; transform: none; }
}

.ext__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  border-bottom: 1px solid var(--app-border);
}
.ext__logo {
  width: 32px;
  height: 32px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  background: var(--app-canvas);
  border: 1px solid var(--app-border);
  color: var(--app-fg);
}
.ext__logo .glyph { width: 17px; height: 11px; }
.ext__id { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.ext__name {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.25;
}
.ext__ver { color: var(--app-muted); font-size: 9.5px; }
.ext__state { flex: none; display: inline-flex; }
.ext__state .dot { width: 7px; height: 7px; animation: none; }

.ext__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px;
  border-bottom: 1px solid var(--app-border);
}
.ext__copy { display: flex; flex-direction: column; min-width: 0; }
.ext__label { font-size: 12.5px; line-height: 1.3; }
.ext__sub { color: var(--app-muted); font-size: 10px; line-height: 1.4; margin-top: 1px; }

.switch {
  position: relative;
  flex: none;
  width: 32px;
  height: 19px;
  border-radius: 99px;
  background: #d4d4d8;
}
.switch.is-on { background: #18181b; }
.switch i {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}
.switch.is-on i { left: 15px; }

.ext__links { display: inline-flex; gap: 4px; flex: none; }
.ext__links span {
  padding: 4px 8px;
  border: 1px solid var(--app-border);
  border-radius: 6px;
  font-size: 10px;
  color: var(--app-fg);
  white-space: nowrap;
}

.ext__foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  color: var(--app-muted);
  font-size: 9.5px;
}
.ext__foot .dot { width: 5px; height: 5px; animation: none; }
.ext__foot .mono { font-size: 9px; }

/* Nifty window */

.appwin { min-width: 0; }

.appwin__card {
  container-type: inline-size;
  background: var(--app-canvas);
  border: 1px solid var(--app-border);
  border-radius: 12px;
  box-shadow: 0 30px 60px -34px rgba(9, 9, 11, 0.4), 0 1px 3px rgba(9, 9, 11, 0.04);
  overflow: hidden;
  font-family: var(--font-app);
  font-size: 12px;
  line-height: 1.35;
  color: var(--app-fg);
  animation: win-in 0.8s 0.04s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.appbar {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 36px;
  padding: 0 12px;
}
.lights { display: inline-flex; gap: 6px; flex: none; }
.lights i { width: 9px; height: 9px; border-radius: 50%; }
.lights i:nth-child(1) { background: #f06a5f; }
.lights i:nth-child(2) { background: #f4bf4f; }
.lights i:nth-child(3) { background: #61c554; }

.appbar__brand {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 4px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0;
  white-space: nowrap;
}
.glyph--win { width: 13px; height: 8.5px; }
.appbar__gear { margin-left: auto; color: var(--app-muted); display: inline-flex; }
.appbar__gear .ico { width: 13px; height: 13px; }

.apptool {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px 6px;
}

.filters {
  display: inline-flex;
  align-items: center;
  padding: 3px;
  border: 1px solid rgba(228, 228, 231, 0.8);
  border-radius: 8px;
  background: var(--app-item);
  white-space: nowrap;
}
.ftab {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 8px;
  border-radius: 5px;
  font-size: 10.5px;
  color: var(--app-muted);
}
.ftab em { font-style: normal; font-size: 9.5px; color: var(--app-hint); }
.ftab.is-on {
  background: #e9e9ec;
  color: var(--app-fg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
.ftab.is-on em { color: rgba(9, 9, 11, 0.55); }

.apptool__status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  font-size: 10px;
  color: var(--app-fg);
  white-space: nowrap;
}
.apptool__status .dot { width: 5px; height: 5px; animation: none; }
.apptool__status .mono { color: var(--app-muted); font-size: 9.5px; }

.apptool__act {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  color: var(--app-muted);
  white-space: nowrap;
}
.apptool__act .ico { width: 10px; height: 10px; }

.applist {
  margin: 0 12px 10px;
  background: var(--app-item);
  border: 1px solid var(--app-border);
  border-radius: 10px;
  overflow: hidden;
}

.appgroup {
  padding: 7px 12px 3px;
  color: rgba(113, 113, 122, 0.75);
  font-size: 10px;
}

.nrow {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  column-gap: 8px;
  align-items: start;
  padding: 6px 12px 7px;
  border-top: 1px solid #f0f0f2;
}
.appgroup + .nrow { border-top: 0; }

.nrow__ico {
  grid-column: 1;
  width: 14px;
  margin-top: 1px;
  color: var(--app-muted);
}
.nrow__ico .ico { width: 14px; height: 14px; stroke-width: 1.5; }
.nrow__ico--done { color: var(--app-muted); }
.nrow__ico--paused { color: var(--app-warning); }
.nrow__ico--failed { color: var(--app-danger); }

.nrow__body { display: contents; }

.nrow__line {
  grid-column: 2;
  display: flex;
  align-items: baseline;
  gap: 12px;
  min-width: 0;
}

.nrow__name {
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.nrow__meta {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  margin-left: auto;
  flex: none;
  font-size: 10.5px;
  color: var(--app-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.nrow__meta b { font-weight: 500; color: var(--app-fg); }
.nrow__state--paused { color: var(--app-warning); }
.nrow__state--failed { color: var(--app-danger); }

.nrow__acts {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex: none;
  color: var(--app-muted);
  margin-left: 4px;
  padding-top: 1px;
}
.nrow__acts .ico { width: 12px; height: 12px; stroke-width: 1.5; }
.ico--chev { width: 9px !important; height: 9px !important; stroke-width: 2; }
.ico--chev.is-open { transform: rotate(90deg); }

.segbar {
  grid-column: 1 / -1;
  display: flex;
  gap: 2px;
  height: 3px;
  margin-top: 6px;
  margin-left: 22px;
}
.segbar span {
  flex: 1;
  height: 100%;
  border-radius: 1px;
  background: #e9e9ec;
  overflow: hidden;
}
.segbar i {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--signal);
  border-radius: 1px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.9s linear;
}
.segbar--idle i { background: var(--app-hint); transition: none; }

/* expanded detail — the current inline panel */

.nrow--open { background: #fafafb; }
.nrow--open .nrow__ico { margin-top: 4px; }

.detail {
  grid-column: 1 / -1;
  margin: 6px -12px -7px -12px;
  padding: 9px 12px 10px 34px;
  background: var(--app-item);
  border-top: 1px solid var(--app-border);
}

.detail__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 10.5px;
  font-weight: 500;
  color: var(--app-muted);
}
.detail__collapse {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--app-muted);
  font-size: 9.5px;
}
.detail__collapse .ico { width: 9px; height: 9px; }

.detail__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 4px 18px;
  margin-top: 7px;
}
.detail__cell {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}
.detail__cell--wide { grid-column: 1 / -1; }
.detail__k { color: var(--app-muted); font-size: 10px; }
.detail__v {
  font-size: 10.5px;
  color: var(--app-fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.detail__v.mono { font-size: 9.5px; }
.detail__copy {
  font-size: 9px;
  color: var(--app-muted);
  white-space: nowrap;
  border-bottom: 1px solid var(--app-border);
}

.detail__acts {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}
.minibtn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 9px;
  border-radius: 5px;
  font-size: 10px;
  white-space: nowrap;
}
.minibtn--dark { background: #18181b; color: #fafafa; }
.minibtn--quiet { color: var(--app-muted); padding-left: 0; }
.minibtn .ico { width: 10px; height: 10px; }
.detail__delete {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  color: var(--app-danger);
  font-size: 10px;
  white-space: nowrap;
}
.detail__delete .ico { width: 10px; height: 10px; }

.appclear {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  border-top: 1px solid var(--app-border);
  color: var(--app-muted);
  font-size: 9.5px;
}
.appclear .ico { width: 10px; height: 10px; }

/* narrow window: drop what the real app drops first */

@container (max-width: 560px) {
  .nrow__eta { display: none; }
  .apptool__search span { display: none; }
  .apptool__search { gap: 0; }
}

@container (max-width: 520px) {
  .apptool__status .mono { display: none; }
  .filters .ftab { padding: 0 7px; }
  .ftab { font-size: 10px; }
}

@container (max-width: 500px) {
  .apptool__search { display: none; }
}

@container (max-width: 470px) {
  .apptool__status { display: none; }
  .nrow__acts .ico:nth-child(2) { display: none; }
}

@container (max-width: 410px) {
  .nrow__acts .ico:not(.ico--chev) { display: none; }
  .nrow__acts { gap: 0; margin-left: 2px; }
  .nrow__meta { gap: 8px; }
  .detail { padding-left: 24px; }
  .detail__grid { grid-template-columns: minmax(0, 1fr); }
  .detail__cell--wide { grid-column: auto; }
  .detail__acts { flex-wrap: wrap; gap: 8px; }
  .detail__delete { margin-left: 0; }
}

/* bridge line under the pair */

.bridge {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
  color: var(--ink-2);
  font-size: 10.5px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
}
.bridge span { color: var(--ink-3); }

/* ── install / signature strip ──────────────────────────── */

.sig {
  border-top: 1px solid var(--line);
  background: var(--surface);
  padding: 16px var(--pad);
}

.sig__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 24px;
}

.sig__meta {
  color: var(--ink-3);
  font-size: 10.5px;
  white-space: nowrap;
}

.sig__gh {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  color: var(--ink-2);
  font-size: 12px;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s ease;
}
.sig__gh:hover { color: var(--ink); }

.sig__privacy {
  color: var(--ink-3);
  font-size: 12px;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s ease;
}
.sig__privacy:hover { color: var(--ink); text-decoration: underline; }
/* ── responsive ─────────────────────────────────────────── */

@media (max-width: 1180px) {
  .hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
    padding-top: 32px;
  }
  .hero__copy { max-width: 560px; }
  .hero__title { font-size: clamp(40px, 6vw, 58px); }
  .pair {
    grid-template-columns: 252px 28px minmax(0, 1fr);
    max-width: 860px;
    margin: 0 auto;
  }
  .bridge { max-width: 860px; margin-left: auto; margin-right: auto; }
}

@media (max-width: 860px) {
  .pair {
    grid-template-columns: minmax(0, 1fr);
    max-width: 430px;
    gap: 16px;
  }
  .pair__flow { display: none; }
  .ext { max-width: 300px; }
  .ext .cap { text-align: left; }
  .appwin { max-width: 100%; }
  .appwin .cap { text-align: right; }
  .bridge { max-width: 430px; }
}

@media (max-width: 560px) {
  .topbar { gap: 12px; }
  .brand__tag { display: none; }
  .hero { padding-top: 24px; }
  .hero__title { font-size: clamp(38px, 11vw, 52px); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 0; }
  .stats > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .sig__meta { font-size: 9.5px; white-space: normal; }
}

@media (max-height: 820px) and (min-width: 1181px) {
  .hero__title { font-size: clamp(40px, min(4.4vw, 6vh), 56px); }
  .hero__lede { font-size: 14px; }
  .note { padding: 8px 0; }
  .note__text { font-size: 12px; }
  .stats dt { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .dot { animation: none; }
}

/* ── language switcher ──────────────────────────────────── */

.lang { position: relative; flex: none; margin-left: auto; }

.lang__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 12px;
  white-space: nowrap;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.lang__btn:hover { border-color: var(--ink); }
.ico--globe { width: 14px; height: 14px; color: var(--ink-3); }
.ico--caret { width: 10px; height: 10px; margin-left: 2px; color: var(--ink-3); }

.lang__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 80;
  min-width: 180px;
  max-height: min(420px, calc(100vh - 80px));
  overflow-y: auto;
  padding: 4px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 16px 36px -22px rgba(17, 18, 20, 0.35);
}
.lang__menu[hidden] { display: none; }
.lang__menu button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 7px 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink-2);
  font-family: var(--font-body);
  font-size: 12px;
  text-align: left;
}
.lang__menu button:hover { background: var(--paper); color: var(--ink); }
.lang__menu button[aria-checked="true"] { background: var(--paper); color: var(--ink); }
.lang__menu button[aria-checked="true"]::after {
  content: "✓";
  font-size: 11px;
  color: var(--ink-3);
}

@media (max-width: 380px) {
  .topbar { gap: 8px; }
  .lang__btn { padding: 0 8px; }
}

/* Japanese typography: kana and kanji come from Hiragino, not PingFang */
html[lang="ja"] {
  --font-body: -apple-system, BlinkMacSystemFont, "Hiragino Sans",
    "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", sans-serif;
  --font-display: "Archivo", -apple-system, "Hiragino Sans",
    "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
}
html[lang="ja"] .mono {
  font-family: var(--font-mono), "Hiragino Sans", "Yu Gothic", sans-serif;
}

/* Traditional Chinese and Korean typography */
html[lang="zh-TW"] {
  --font-body: -apple-system, BlinkMacSystemFont, "PingFang TC",
    "Hiragino Sans CNS", "Microsoft JhengHei", sans-serif;
  --font-display: "Archivo", -apple-system, "PingFang TC",
    "Hiragino Sans CNS", "Microsoft JhengHei", sans-serif;
}
html[lang="ko"] {
  --font-body: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
    "Noto Sans KR", "Malgun Gothic", sans-serif;
  --font-display: "Archivo", -apple-system, "Apple SD Gothic Neo",
    "Noto Sans KR", "Malgun Gothic", sans-serif;
}
html[lang="zh-TW"] .mono {
  font-family: var(--font-mono), "PingFang TC", "Microsoft JhengHei", sans-serif;
}
html[lang="ko"] .mono {
  font-family: var(--font-mono), "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
}

/* Slogan length differs by locale: scale the display type so every
   translation keeps two lines without shrinking the rest of the page. */
html[lang="en"] .hero__title { font-size: clamp(30px, min(3.82vw, 6.2vh), 55px); }
html[lang="zh-CN"] .hero__title { font-size: clamp(30px, min(4.16vw, 6.2vh), 60px); }
html[lang="zh-TW"] .hero__title { font-size: clamp(30px, min(3.61vw, 6.2vh), 52px); }
html[lang="ja"] .hero__title { font-size: clamp(30px, min(3.2vw, 6.2vh), 46px); }
html[lang="ko"] .hero__title { font-size: clamp(30px, min(4.03vw, 6.2vh), 58px); }
html[lang="de"] .hero__title { font-size: clamp(30px, min(3.96vw, 6.2vh), 57px); }
html[lang="fr"] .hero__title { font-size: clamp(30px, min(3.82vw, 6.2vh), 55px); }
html[lang="es"] .hero__title { font-size: clamp(30px, min(4.16vw, 6.2vh), 60px); }
html[lang="pt-BR"] .hero__title { font-size: clamp(30px, min(4.16vw, 6.2vh), 60px); }
html[lang="ru"] .hero__title { font-size: clamp(30px, min(3.61vw, 6.2vh), 52px); }

/* Stacked layout: the copy column is wider, so the display type scales up
   again on phones and tablets. */
@media (max-width: 1180px) {
  html[lang="en"] .hero__title { font-size: clamp(38px, 9vw, 52px); }
  html[lang="zh-CN"] .hero__title { font-size: clamp(38px, 9vw, 52px); }
  html[lang="zh-TW"] .hero__title { font-size: clamp(38px, 9vw, 48px); }
  html[lang="ja"] .hero__title { font-size: clamp(38px, 9vw, 46px); }
  html[lang="ko"] .hero__title { font-size: clamp(38px, 9vw, 48px); }
  html[lang="de"] .hero__title { font-size: clamp(38px, 9vw, 48px); }
  html[lang="fr"] .hero__title { font-size: clamp(38px, 9vw, 50px); }
  html[lang="es"] .hero__title { font-size: clamp(38px, 9vw, 52px); }
  html[lang="pt-BR"] .hero__title { font-size: clamp(38px, 9vw, 52px); }
  html[lang="ru"] .hero__title { font-size: clamp(38px, 9vw, 48px); }
}