/* The public page's styles.
 *
 * The first half is Petl's design tokens, COPIED from the Petl Design System
 * (its tokens/*.css). Same situation as contract/: we don't own these values,
 * so treat a change there as something to re-copy here rather than something to
 * improvise around. The second half is this page only — the design system has no
 * marketing surface yet ("Home page — not yet built", its readme).
 *
 * Fonts are self-hosted (fonts/) rather than pulled from Google's CDN the way the
 * design system does, so the page makes no third-party request and can keep the
 * same strict Content-Security-Policy the consent page uses.
 */

/* ============================ fonts ============================ */
/* Latin subsets only — the page is English and every glyph it uses is in range. */
@font-face {
  font-family: 'Bai Jamjuree'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/bai-jamjuree-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Bai Jamjuree'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('fonts/bai-jamjuree-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Bai Jamjuree'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('fonts/bai-jamjuree-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Bai Jamjuree'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('fonts/bai-jamjuree-700.woff2') format('woff2');
}
/* Spline Sans Mono ships as one variable file covering 400–600. */
@font-face {
  font-family: 'Spline Sans Mono'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url('fonts/spline-sans-mono.woff2') format('woff2');
}

/* ======================= tokens (copied) ======================= */
:root {
  /* Surfaces — elevation is carried by surface colour first, shadow second. */
  --petl-bg-deepest: #0d0d0e;
  --petl-bg-app:     #121314;
  --petl-bg-sidebar: #191a1b;
  --petl-bg-card:    #202122;

  /* Lines */
  --petl-line:        #2a2b2c;
  --petl-line-soft:   #232425;
  --petl-line-strong: #3a3b3c;

  /* Interaction states (solid, so they layer predictably over raised cards) */
  --petl-hover:      #242526;
  --petl-selected:   #2c2d2e;
  --petl-nav-active: #2a2b2c;

  /* Text tiers */
  --petl-text-strong:   #ededed;
  --petl-text-default:  #d4d4d4;
  --petl-text-body:     #bfbfbf;
  --petl-text-soft:     #a6a6a6;
  --petl-text-muted:    #8c8c8c;
  --petl-text-faint:    #767676;
  --petl-text-disabled: #5e5e5e;

  /* Brand accent — the only accent. No gradients, no second hue. */
  --petl-accent:         #9747ff;
  --petl-accent-on:      #ffffff;
  --petl-accent-wash:    rgba(151, 71, 255, 0.10);
  --petl-accent-wash-14: rgba(151, 71, 255, 0.14);

  /* Status: amber = needs action, green = settled, slate = sent/neutral */
  --petl-amber:         #fbbf24;
  --petl-amber-wash-14: rgba(251, 191, 36, 0.14);
  --petl-green:         #4ade80;
  --petl-green-wash:    rgba(74, 222, 128, 0.13);
  --petl-slate:         #cbd5e1;
  --petl-slate-wash:    rgba(203, 213, 225, 0.13);

  --petl-scroll-thumb: #3a3b3c;

  /* Type */
  --font-sans: 'Bai Jamjuree', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono: 'Spline Sans Mono', 'SF Mono', ui-monospace, Menlo, monospace;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --text-micro: 9px;
  --text-2xs: 10px;
  --text-xs: 11px;
  --text-sm: 12px;
  --text-base: 13px;
  --text-md: 15px;
  --text-lg: 16px;
  --text-xl: 18px;
  --text-2xl: 21px;
  --text-3xl: 29px;

  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-normal: 1.5;

  --tracking-tight: -0.02em;
  --tracking-snug: -0.015em;
  --tracking-eyebrow: 0.09em;
  --tracking-caps: 0.06em;

  /* Radius */
  --radius-xs: 5px;
  --radius-sm: 7px;
  --radius-md: 8px;
  --radius-lg: 9px;
  --radius-xl: 10px;
  --radius-2xl: 11px;
  --radius-pill: 20px;

  /* Layout constants */
  --topbar-height: 62px;
  --button-height: 38px;
}

/* ========================= page shell ========================= */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--petl-bg-app);
  color: var(--petl-text-body);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--petl-accent-wash-14); color: var(--petl-text-strong); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
  background: var(--petl-scroll-thumb);
  border-radius: 6px;
  border: 3px solid transparent;
  background-clip: content-box;
}

a { color: inherit; }

/* Focus is the accent, everywhere. Outline only — setting a radius here would
   change the focused element's own corners, and the outline already follows them. */
:focus-visible {
  outline: 2px solid var(--petl-accent);
  outline-offset: 2px;
}

.wrap {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 28px;
}

/* An ALL-CAPS micro-eyebrow labels a section. The only uppercase on the page. */
.eyebrow {
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--petl-text-muted);
  margin: 0 0 14px;
}

/* ========================== top bar ========================== */
.topbar {
  height: var(--topbar-height);
  border-bottom: 1px solid var(--petl-line);
  background: var(--petl-bg-app);
  position: sticky;
  top: 0;
  z-index: 5;
}

.topbar .wrap {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* The brand lockup: mark + wordmark, exactly as the design system pairs them.
   It doubles as the home control, so it's a link — but not a underlined one. */
.lockup { display: flex; align-items: center; gap: 10px; margin-right: 2px; text-decoration: none; }

/* The logo is artwork, sized by the width/height attributes at each use so the
   two sizes live next to the markup that needs them. All this has to do is kill
   the baseline gap an inline image would otherwise sit on. */
.logo { display: block; }

/* "MCP" on its own: the "Petl" half of the lockup is the lettermark now, so this
   qualifies the logo rather than repeating it — which is what .sub used to do. */
.wordmark {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  color: var(--petl-text-muted);
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  line-height: 1;
  border-radius: var(--radius-pill);
  padding: 3px 9px;
  white-space: nowrap;
  color: var(--petl-slate);
  background: var(--petl-slate-wash);
}
.pill--write { color: var(--petl-amber); background: var(--petl-amber-wash-14); }

.topbar .spacer { flex: 1; }

/* ========================== buttons ========================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: var(--button-height);
  padding: 0 16px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, filter 120ms ease;
}
.btn--sm { height: 26px; padding: 0 11px; font-size: var(--text-sm); border-radius: var(--radius-sm); gap: 6px; }

.btn--primary { background: var(--petl-accent); color: var(--petl-accent-on); }
.btn--primary:hover { filter: brightness(1.08); }

.btn--secondary {
  background: var(--petl-bg-card);
  color: var(--petl-text-default);
  border-color: var(--petl-line);
}
.btn--secondary:hover { background: var(--petl-bg-sidebar); border-color: var(--petl-line-strong); }

.btn--ghost { background: transparent; color: var(--petl-text-default); }
.btn--ghost:hover { background: var(--petl-hover); }

/* ============================ hero ============================ */
.hero { padding: 56px 0 48px; border-bottom: 1px solid var(--petl-line); }

.hero .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 48px;
  align-items: start;
}

.hero h1 {
  margin: 0 0 16px;
  font-size: var(--text-3xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--petl-text-strong);
  max-width: 19ch;
}

.hero p {
  margin: 0 0 14px;
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  color: var(--petl-text-body);
  max-width: 54ch;
}

.hero p:last-child { margin-bottom: 0; }

.hero .quiet { color: var(--petl-text-muted); font-size: var(--text-base); }

/* The endpoint card — the one thing a visitor came to copy. */
.endpoint {
  background: var(--petl-bg-card);
  border: 1px solid var(--petl-line);
  border-radius: var(--radius-xl);
  padding: 18px;
}

.endpoint .eyebrow { margin-bottom: 10px; }

/* A copyable value: mono, recessed well, copy control on the right. */
.copyrow {
  display: flex;
  align-items: stretch;
  gap: 0;
  background: var(--petl-bg-sidebar);
  border: 1px solid var(--petl-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.copyrow code {
  flex: 1;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--petl-text-default);
  padding: 10px 12px;
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: none;
}
.copyrow code::-webkit-scrollbar { display: none; }

/* A word, not an icon — the product is deliberately icon-light, and "Copy" needs
   no legend. It reads "Copied" for a beat after a successful write. */
.copybtn {
  flex: none;
  min-width: 68px;
  padding: 0 12px;
  border: 0;
  border-left: 1px solid var(--petl-line);
  background: transparent;
  color: var(--petl-text-muted);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.copybtn:hover { background: var(--petl-hover); color: var(--petl-text-default); }
.copybtn[data-copied='true'] { color: var(--petl-green); }

/* A full sentence, so it gets body leading rather than the tighter meta leading
   the design system uses for one-line status text. */
.endpoint .note {
  margin: 12px 0 0;
  font-size: var(--text-sm);
  color: var(--petl-text-muted);
  line-height: var(--leading-normal);
}

/* No style="" attributes anywhere on this page — the Content-Security-Policy is
   style-src 'self', which blocks inline style attributes as well as <style>.
   Scoped to .endpoint so it outweighs the `.hero p` margins above. */
.endpoint .endpoint-action { margin: 18px 0 0; }

/* =========================== section =========================== */
.section { padding: 44px 0; border-bottom: 1px solid var(--petl-line); }

.section h2 {
  margin: 0 0 6px;
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-snug);
  color: var(--petl-text-strong);
}

.section .lede {
  margin: 0 0 24px;
  font-size: var(--text-base);
  color: var(--petl-text-muted);
  max-width: 68ch;
}

/* ========================= tool table ========================= */
/* Dense and ledger-like: mono names on the left, what it does on the right. */
.tools { border: 1px solid var(--petl-line); border-radius: var(--radius-xl); overflow: hidden; }

.tools table { width: 100%; border-collapse: collapse; }

.tools caption {
  caption-side: top;
  text-align: left;
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--petl-text-muted);
  background: var(--petl-bg-sidebar);
  border-bottom: 1px solid var(--petl-line);
  padding: 9px 14px;
}

.tools td { border-top: 1px solid var(--petl-line-soft); padding: 11px 14px; vertical-align: top; }
.tools tr:first-child td { border-top: 0; }
.tools tbody tr:hover td { background: var(--petl-hover); }

.tools .name {
  width: 1%;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--petl-text-strong);
}

.tools .what { color: var(--petl-text-soft); font-size: var(--text-base); }
.tools .what .pill { margin-right: 7px; vertical-align: 1px; }

.tools + .footnote {
  margin: 14px 0 0;
  font-size: var(--text-sm);
  color: var(--petl-text-muted);
  max-width: 72ch;
}

/* ======================== install tabs ======================== */
.tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--petl-line);
  margin-bottom: 20px;
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }

.tab {
  appearance: none;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: 9px 12px;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  color: var(--petl-text-muted);
  white-space: nowrap;
  cursor: pointer;
  transition: color 120ms ease, border-color 120ms ease;
}
.tab:hover { color: var(--petl-text-default); }
.tab[aria-selected='true'] { color: var(--petl-text-strong); border-bottom-color: var(--petl-accent); }
/* The tablist scrolls sideways, which makes it a scroll container — an outline drawn
   outside the tab gets its top and bottom clipped away. Draw it inside instead. */
.tab:focus-visible { outline-offset: -2px; }

.panel[hidden] { display: none; }

.steps { margin: 0; padding: 0; counter-reset: step; list-style: none; }

.steps li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 16px;
  color: var(--petl-text-body);
  font-size: var(--text-base);
}
.steps li:last-child { margin-bottom: 0; }

.steps li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 0;
  top: 1px;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-xs);
  background: var(--petl-bg-card);
  border: 1px solid var(--petl-line);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--petl-text-muted);
}

.steps .copyrow { margin-top: 9px; }
.steps .copyrow code { white-space: pre; }

/* Inline code inside prose — a file path, a slash command. */
.steps li > code, .lede code {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--petl-text-default);
  background: var(--petl-bg-sidebar);
  border: 1px solid var(--petl-line);
  border-radius: var(--radius-xs);
  padding: 1px 5px;
}

/* ============================ footer ============================ */
.footer { padding: 28px 0 40px; }

.footer .wrap {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  font-size: var(--text-sm);
  color: var(--petl-text-muted);
}

.footer a { color: var(--petl-text-soft); text-decoration: none; }
.footer a:hover { color: var(--petl-text-default); text-decoration: underline; }

.footer .spacer { flex: 1; }

/* ========================== responsive ========================== */
/* The product reflows at 1024px; this page is simpler, so it collapses once the
   two-column hero stops fitting. */
@media (max-width: 900px) {
  .hero .wrap { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .hero h1 { max-width: none; }
}

@media (max-width: 640px) {
  .wrap { padding: 0 18px; }
  .hero { padding: 36px 0 32px; }
  .hero h1 { font-size: var(--text-2xl); }
  .section { padding: 32px 0; }
  /* The tool table stacks: the name sits above what it does. */
  .tools .name, .tools .what { display: block; width: auto; white-space: normal; }
  .tools .name { padding-bottom: 0; border-top: 1px solid var(--petl-line-soft); }
  .tools .what { padding-top: 4px; border-top: 0; }
  .tools tr:first-child .name { border-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; }
}