function CareersScreen() {
  const { Card } = window.CedarHollowWineryDesignSystem_a59a90;

  return (
    <div>
      <section style={{ background: "var(--surface-page)", padding: "100px 32px 56px", textAlign: "center" }}>
        <span style={{ fontSize: 11, letterSpacing: "0.32em", textTransform: "uppercase", color: "var(--text-accent)" }}>Careers</span>
        <h1 style={{ fontSize: 76, fontWeight: 300, letterSpacing: 0, margin: "20px auto 18px", maxWidth: "18ch", lineHeight: 1.0 }}>
          Work on <b style={{ fontWeight: 800 }}>this hill.</b>
        </h1>
        <p style={{ fontSize: 18, color: "var(--text-secondary)", lineHeight: 1.65, maxWidth: "54ch", margin: "0 auto" }}>
          We are a small estate team in Hye, Texas. Cellar door, vineyard, hospitality, fulfillment, and the quiet work between.
        </p>
      </section>

      <section style={{ maxWidth: 920, margin: "0 auto", padding: "28px 32px 90px" }}>
        <Card variant="outlined" padding="lg">
          <div id="careers-recruiting-snippet" data-recruiting-snippet="reserved" style={{
            minHeight: 420,
            display: "grid",
            placeItems: "center",
            textAlign: "center",
            border: "1px dashed var(--border-soft)",
            background: "var(--color-cream)",
            borderRadius: 4,
            padding: 32,
          }}>
            <div>
              <div style={{ fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--text-muted)", marginBottom: 12 }}>
                Recruiting system embed
              </div>
              <p style={{ maxWidth: "34ch", margin: "0 auto", color: "var(--text-secondary)", lineHeight: 1.55 }}>
                Reserved for the careers code snippet.
              </p>
            </div>
          </div>
        </Card>
      </section>
    </div>
  );
}

window.CareersScreen = CareersScreen;