/* Broomstack landing page.
 *
 * Imported from the Claude Design project "Broomstack league platform
 * design" (Landing.html), 2026-08-04. Kept as its own stylesheet rather
 * than folded into broomstack.css: the landing page is a standalone
 * shell with its own header and footer, and several class names here
 * (.btn, .wrap, .kick, .mono) would otherwise collide with the member
 * chrome and change screens nobody asked to change.
 */

:root {
  --slate: #2d3042;
  --slate-lt: #3c4058;
  --gold: #c9a54a;
  --gold-dk: #b08f36;
  --gold-tint: #f6efdc;
  --paper: #f7f7f2;
  --blue: #5b7b9a;
  --blue-dk: #4a677f;
  --blue-tint: #eaf0f5;
  --ink: #2d3042;
  --muted: #6f7280;
  --faint: #9a9ca6;
  --line: #e4e4de;
  --line-2: #d6d6cf;
  --white: #fff;
  --green: #4b8a5a;
  --green-tint: #e7f1e9;
  --red: #b4544a;
  --red-tint: #f7e9e7;
  --r: 5px;
  --r-lg: 8px;
  --sh: 0 1px 2px rgba(45, 48, 66, 0.06), 0 1px 3px rgba(45, 48, 66, 0.05);
  --sh-md: 0 4px 14px rgba(45, 48, 66, 0.09);
  --sh-lg: 0 18px 48px rgba(45, 48, 66, 0.16);
  --edge: clamp(20px, 5vw, 56px);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: 'IBM Plex Sans', system-ui, sans-serif; line-height: 1.45;
  -webkit-font-smoothing: antialiased; text-wrap: pretty;
}
h1, h2, h3, h4 { margin: 0; font-weight: 700; line-height: 1.15; letter-spacing: -0.015em; }
p { margin: 0; }
a { color: var(--blue-dk); text-decoration: none; }
a:hover { color: var(--slate); text-decoration: underline; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
img { display: block; max-width: 100%; height: auto; }
svg.i {
  width: 18px; height: 18px; stroke: currentColor; fill: none;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none;
}
.i-14 { width: 14px; height: 14px; }
.i-16 { width: 16px; height: 16px; }
.i-20 { width: 20px; height: 20px; }
.i-22 { width: 22px; height: 22px; }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 var(--edge); }
.mono { font-family: 'IBM Plex Mono', monospace; }
.kick {
  font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: 0.14em;
  text-transform: uppercase; font-weight: 600; color: var(--gold-dk);
}

/* buttons */
.btn {
  font-family: inherit; font-size: 14px; font-weight: 600; border-radius: var(--r);
  padding: 11px 18px; display: inline-flex; align-items: center; gap: 8px;
  cursor: pointer; border: 1px solid transparent; line-height: 1;
  white-space: nowrap; text-decoration: none;
}
.btn:hover { text-decoration: none; }
.btn svg { width: 16px; height: 16px; }
.btn-gold { background: var(--gold); color: var(--slate); border-color: var(--gold-dk); }
.btn-gold:hover { background: var(--gold-dk); color: #fff; }
.btn-gold:active { background: #9d7f2d; }
.btn-ghost { background: transparent; color: var(--slate); border-color: var(--line-2); }
.btn-ghost:hover { background: var(--white); border-color: rgba(45, 48, 66, 0.45); color: var(--slate); }
.btn-onslate { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.35); }
.btn-onslate:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.btn-lg { padding: 14px 22px; font-size: 15.5px; }

/* header */
.site-head { position: sticky; top: 0; z-index: 20; background: var(--slate); color: #eceef4; }
.site-head .bar { display: flex; align-items: center; gap: 26px; height: 62px; }
.brand {
  display: flex; align-items: center; gap: 10px; font-weight: 700;
  font-size: 18px; letter-spacing: -0.01em; color: #fff;
}
.brand:hover { text-decoration: none; color: #fff; }
.headlinks { display: flex; gap: 24px; margin-left: 8px; }
.headlinks a { color: rgba(255, 255, 255, 0.74); font-size: 14px; font-weight: 500; }
.headlinks a:hover { color: #fff; text-decoration: none; }
.headspacer { flex: 1; }
.headacts { display: flex; align-items: center; gap: 10px; }
@media (max-width: 720px) { .headlinks { display: none; } }

/* hero */
.hero { background: var(--slate); color: #fff; padding: 72px 0 0; overflow: hidden; }
.hero h1 { font-size: clamp(34px, 5vw, 58px); color: #fff; max-width: 19ch; }
.hero .lede {
  font-size: clamp(16px, 1.5vw, 18.5px); color: rgba(255, 255, 255, 0.78);
  max-width: 58ch; margin-top: 20px; line-height: 1.55;
}
.hero .cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.hero .meta {
  display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 26px;
  font-size: 13px; color: rgba(255, 255, 255, 0.62);
}
.hero .meta span { display: inline-flex; align-items: center; gap: 7px; }
.hero .meta svg { color: var(--gold); }
.shotwrap {
  margin-top: 52px; border-radius: var(--r-lg) var(--r-lg) 0 0; overflow: hidden;
  box-shadow: var(--sh-lg); border: 1px solid rgba(255, 255, 255, 0.14);
  border-bottom: 0; background: var(--paper);
}
.shotwrap img { width: 100%; height: auto; }
.shot-crop { max-height: 520px; overflow: hidden; }

/* stat rail */
.rail { background: var(--white); border-bottom: 1px solid var(--line); }
.rail .grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); }
.rail .cell { background: var(--white); padding: 26px var(--edge); }
.rail .cell:first-child { padding-left: 0; }
.rail .n { font-size: 30px; font-weight: 700; color: var(--slate); line-height: 1; }
.rail .n.spot { color: var(--gold-dk); }
.rail .lbl { font-size: 13px; color: var(--muted); margin-top: 7px; max-width: 24ch; }
@media (max-width: 900px) {
  .rail .grid { grid-template-columns: repeat(2, 1fr); }
  .rail .cell:first-child { padding-left: var(--edge); }
}

/* sections */
section.band { padding: 84px 0; }
.band-white { background: var(--white); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.sec-head { max-width: 64ch; margin-bottom: 40px; }
.sec-head h2 { font-size: clamp(26px, 3vw, 36px); color: var(--slate); margin-top: 12px; }
.sec-head p { font-size: 16px; color: var(--muted); margin-top: 14px; line-height: 1.6; }

/* features */
.feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px 40px; }
.feat h3 { font-size: 18px; color: var(--slate); }
.feat p { font-size: 14.5px; color: var(--muted); margin-top: 9px; line-height: 1.6; }
.feat .ico {
  width: 38px; height: 38px; border-radius: var(--r); background: var(--blue-tint);
  color: var(--blue-dk); display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}
@media (max-width: 980px) { .feats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .feats { grid-template-columns: 1fr; } }

/* split showcase */
.split {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: 36px clamp(28px, 5vw, 72px); align-items: center;
}
.split.flip { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
.split.flip .copy { order: 2; }
.stack { display: grid; grid-template-columns: 1fr; gap: 32px; }
.stack .copy { max-width: 76ch; }
.stack .copy ul { max-width: 64ch; }
.split h3, .stack h3 { font-size: clamp(22px, 2.4vw, 28px); color: var(--slate); }
.split p, .stack p { font-size: 15.5px; color: var(--muted); margin-top: 14px; line-height: 1.65; max-width: 46ch; }
.split ul, .stack ul {
  margin: 18px 0 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: 9px;
}
.split li, .stack li { display: flex; gap: 10px; font-size: 14.5px; color: var(--slate); }
.split li svg, .stack li svg { color: var(--green); margin-top: 3px; }
.figbox {
  border: 1px solid var(--line-2); border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--sh-md); background: var(--white);
}
.figcap {
  font-size: 12px; color: var(--faint); margin-top: 10px;
  font-family: 'IBM Plex Mono', monospace; letter-spacing: 0.03em;
}
@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; }
  .split.flip .copy { order: 0; }
}

/* phone showcase */
.phonesplit {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: 36px clamp(28px, 5vw, 72px); align-items: center;
}
.phoneshot {
  max-width: 330px; border: 1px solid var(--line-2); border-radius: 14px;
  overflow: hidden; box-shadow: var(--sh-lg); margin: 0 auto;
}
@media (max-width: 860px) { .phonesplit { grid-template-columns: 1fr; } }

/* roles */
.roles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.rolecard {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 22px; box-shadow: var(--sh);
}
.rolecard .tag {
  font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 20px;
  background: var(--gold-tint); color: var(--gold-dk); display: inline-block;
}
.rolecard h3 { font-size: 16.5px; color: var(--slate); margin-top: 12px; }
.rolecard p { font-size: 14px; color: var(--muted); margin-top: 8px; line-height: 1.6; }
@media (max-width: 860px) { .roles { grid-template-columns: 1fr; } }

/* demo */
.demo {
  background: var(--slate); color: #fff; border-radius: var(--r-lg);
  padding: clamp(28px, 4vw, 48px); display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: 32px clamp(28px, 4vw, 64px); align-items: center;
}
.demo h2 { font-size: clamp(24px, 2.8vw, 32px); color: #fff; }
.demo p { color: rgba(255, 255, 255, 0.76); font-size: 15.5px; margin-top: 14px; line-height: 1.6; }
.demo .form {
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--r); padding: 22px;
}
.demo label { display: block; font-size: 12.5px; font-weight: 600; color: rgba(255, 255, 255, 0.8); margin-bottom: 6px; }
.demo input, .demo textarea {
  width: 100%; font-family: inherit; font-size: 14.5px; color: var(--ink);
  background: #fff; border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--r); padding: 11px 13px; margin-bottom: 14px;
}
.demo textarea { resize: vertical; line-height: 1.5; }
.demo input::placeholder, .demo textarea::placeholder { color: var(--faint); }
.demo .fine { font-size: 12.5px; color: rgba(255, 255, 255, 0.55); margin-top: 12px; }
.demo .errors {
  background: var(--red-tint); border: 1px solid var(--red); border-radius: var(--r);
  padding: 10px 12px; margin-bottom: 14px; color: #6d2f29; font-size: 13px;
}
.demo .errors p { color: #6d2f29; font-size: 13px; margin-top: 0; }
.demo .done { text-align: center; padding: 8px 4px; }
.demo .done svg { color: var(--gold); width: 34px; height: 34px; margin: 0 auto 10px; }
.demo .done h3 { color: #fff; font-size: 19px; }
@media (max-width: 860px) { .demo { grid-template-columns: 1fr; } }

/* footer */
footer.site-foot {
  background: var(--white); border-top: 1px solid var(--line);
  padding: 56px 0 34px; font-size: 13.5px;
}
.footgrid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 32px clamp(24px, 4vw, 56px); }
.footgrid h4 {
  font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted); font-weight: 600;
}
.footgrid .links { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.footgrid .links a { color: var(--slate); font-size: 13.5px; }
.footgrid .links a:hover { color: var(--blue-dk); }
.footgrid p { color: var(--muted); font-size: 13px; margin-top: 12px; max-width: 32ch; line-height: 1.6; }
.footbase {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px 28px;
  margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--line);
  color: var(--muted); font-size: 12.5px;
}
@media (max-width: 720px) { .footgrid { grid-template-columns: 1fr 1fr; } }

/* The imported design hides the nav links below 720px but leaves the
   brand and both buttons on one row, which runs past the edge of a
   390px phone and scrolls the whole page sideways. Tighten the bar
   rather than dropping an action: "Log in" is the only way in for a
   member who lands here. */
@media (max-width: 520px) {
  .site-head .bar { gap: 12px; }
  .brand { font-size: 16px; }
  .headacts { gap: 8px; }
  .headacts .btn { padding: 9px 12px; font-size: 13px; }
  .headacts .btn svg { display: none; }
}