/* Web Butler — homepage. The butler's calling card: white stock, ink,
   hairline rules, one serif voice. The only color on the page is the
   working knot. */

:root {
  --paper: #ffffff;
  --ink: #171717;
  --text-2: #404040;
  --text-3: #737373;
  --mist: #a3a3a3;
  --hairline: rgba(0, 0, 0, 0.08);
  --border: rgba(0, 0, 0, 0.1);
  --hover: rgba(0, 0, 0, 0.04);
  --accent: #3b82f6;

  --serif: 'IBM Plex Serif', Georgia, serif;
  --sans: 'IBM Plex Sans', 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;

  --col: 640px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

::selection { background: rgba(59, 130, 246, 0.18); }

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

/* ---------------------------------------------------------------------
   The mark, as used by the page chrome (header, footer). The demo's
   bowtie is the real BowtieMark component; it animates itself.
--------------------------------------------------------------------- */

.bowtie { width: 18px; height: 18px; display: block; }
.bt-wing { fill: currentColor; }
.bt-knot { fill: var(--mist); }

/* ---------------------------------------------------------------------
   Frame
--------------------------------------------------------------------- */

.top {
  max-width: 960px;
  margin: 0 auto;
  padding: 22px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.wordmark {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.01em;
}

.top-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  color: var(--text-3);
  border-radius: 999px;
  transition: color 120ms, background-color 120ms;
}
.top-link:hover { color: var(--ink); background: var(--hover); }
.top-link svg { display: block; }

main { max-width: 960px; margin: 0 auto; padding: 0 24px; }

.eyebrow {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mist);
  margin: 0 0 18px;
}

/* ---------------------------------------------------------------------
   Hero
--------------------------------------------------------------------- */

.hero {
  padding: 72px 0 40px;
  text-align: center;
}

.hero h1 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(40px, 7.5vw, 68px);
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0 0 22px;
}
.hero h1 em {
  font-style: italic;
  font-weight: 500;
}

.lede {
  max-width: 560px;
  margin: 0 auto 30px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--text-2);
}

.cta-row {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.btn {
  display: inline-block;
  padding: 9px 20px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: box-shadow 120ms, border-color 120ms, color 120ms;
}
.btn-primary {
  background: var(--ink);
  color: var(--paper);
}
.btn-primary:hover { box-shadow: inset 0 0 0 999px rgba(255, 255, 255, 0.16); }
.btn-quiet {
  border: 1px solid var(--border);
  color: var(--text-2);
}
.btn-quiet:hover {
  color: var(--ink);
  border-color: rgba(0, 0, 0, 0.25);
  box-shadow: inset 0 0 0 999px var(--hover);
}

/* ---------------------------------------------------------------------
   The demo — a faux page with the real pill working one errand.
--------------------------------------------------------------------- */

.demo { padding: 26px 0 0; }

.window {
  max-width: 660px;
  margin: 0 auto;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  overflow: hidden;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.03),
    0 16px 48px -24px rgba(0, 0, 0, 0.18);
}

.chrome {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--hairline);
}
.chrome .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.1);
}
.chrome .addr {
  margin: 0 auto;
  transform: translateX(-19px); /* optically center against the dots */
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-3);
  background: rgba(0, 0, 0, 0.035);
  border-radius: 6px;
  padding: 3px 26px;
}

.stage {
  position: relative;
  padding: 18px 18px 74px;
  /* Fixed height: the window must not resize (and bounce the page)
     when the sponsored posts fold away. */
  min-height: 340px;
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, 0.012), transparent 60px);
}

/* Skeleton feed */
.feed { display: flex; flex-direction: column; gap: 10px; }

.post {
  position: relative;
  display: flex;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--hairline);
  border-radius: 9px;
  padding: 12px 14px;
  transition: opacity 500ms ease, transform 500ms ease, margin 500ms ease,
    max-height 500ms ease, padding 500ms ease, border-width 500ms ease;
  max-height: 80px;
  overflow: hidden;
}
.avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.07);
  flex-shrink: 0;
}
.lines { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.line { height: 7px; border-radius: 4px; background: rgba(0, 0, 0, 0.07); }
.w-40 { width: 40%; } .w-48 { width: 48%; } .w-56 { width: 56%; }
.w-64 { width: 64%; } .w-72 { width: 72%; } .w-80 { width: 80%; }

.post .tag {
  position: absolute;
  top: 8px;
  right: 10px;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mist);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 1px 7px;
}

/* The alteration lands: sponsored posts fold away. */
[data-state='done'] .post.sponsored {
  opacity: 0;
  transform: scale(0.985);
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin-top: -10px; /* swallow the flex gap above */
  border-top-width: 0;
  border-bottom-width: 0;
}

/* The butler, docked like the real thing. What renders inside is the
   real thing: the shell components from @web-butler/ui. */
#demo-mount { display: contents; }

.butler {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 14px;
}
.butler #web-butler-root { width: 100%; }

.demo-caption {
  text-align: center;
  font-size: 12.5px;
  color: var(--text-3);
  margin: 16px auto 0;
  max-width: 480px;
}

/* ---------------------------------------------------------------------
   The service — set like a menu card: name, dot leader, note.
--------------------------------------------------------------------- */

.service {
  max-width: var(--col);
  margin: 0 auto;
  padding: 88px 0 0;
}

.menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu-row { padding: 20px 0; }
.menu-row + .menu-row { border-top: 1px solid var(--hairline); }

.menu-line {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.menu-name {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.005em;
}

.leader {
  flex: 1;
  min-width: 24px;
  border-bottom: 1px dotted rgba(0, 0, 0, 0.22);
  transform: translateY(-4px);
}

.menu-note {
  font-size: 12px;
  color: var(--text-3);
  font-style: italic;
  font-family: var(--serif);
}

.menu-sub {
  margin: 6px 0 0;
  max-width: 52ch;
  font-size: 13.5px;
  color: var(--text-3);
}

/* ---------------------------------------------------------------------
   The arrangement
--------------------------------------------------------------------- */

.arrangement {
  max-width: var(--col);
  margin: 0 auto;
  padding: 88px 0 0;
}

.arrangement-copy {
  font-family: var(--serif);
  font-size: 21px;
  line-height: 1.55;
  font-weight: 400;
  margin: 0;
  color: var(--ink);
}
.arrangement-copy strong { font-weight: 600; }

/* ---------------------------------------------------------------------
   Getting started
--------------------------------------------------------------------- */

.steps {
  max-width: var(--col);
  margin: 0 auto;
  padding: 88px 0 96px;
}

.steps-list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: step;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.steps-list li { counter-increment: step; }

.steps-list h3 {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 500;
  margin: 0 0 6px;
}
.steps-list h3::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--mist);
  display: block;
  margin-bottom: 10px;
}

.steps-list p {
  margin: 0;
  font-size: 13.5px;
  color: var(--text-3);
}

.mono-link {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--text-2);
}
.mono-link:hover { color: var(--ink); }

kbd {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-2);
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: 5px;
  padding: 1px 6px;
  background: var(--paper);
}

/* ---------------------------------------------------------------------
   Footer
--------------------------------------------------------------------- */

.foot {
  border-top: 1px solid var(--hairline);
  padding: 26px 24px 34px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.foot .bowtie { width: 16px; height: 16px; }
.foot p { margin: 0; font-size: 12.5px; color: var(--text-3); }
.foot a { color: var(--text-2); }
.foot a:hover { color: var(--ink); }

/* ---------------------------------------------------------------------
   Small screens
--------------------------------------------------------------------- */

@media (max-width: 640px) {
  .hero { padding-top: 48px; }
  .steps-list { grid-template-columns: 1fr; gap: 22px; }
  .menu-note { display: none; }
  .leader { display: none; }
  .stage { padding-bottom: 70px; }
}

/* ---------------------------------------------------------------------
   Reduced motion: no loop — the demo rests on the delivered state.
--------------------------------------------------------------------- */

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