/* 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; }
/* On the slate header the roundel's outer ring matches the bar, so it needs
   the paper disc to keep its silhouette. The footer sits on white, where the
   ring reads on its own and a disc would only add a cream halo. */
.brand .mark {
  width: 26px; height: 26px; flex: none;
  background: var(--paper); border-radius: 50%;
}
.site-foot .brand .mark { width: 22px; height: 22px; background: none; }
.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; }
}