/* ── Jackpost Landing — Light Mode ──
   Design system: DESIGN.md
   Aesthetic: Brutally minimal with warmth. Devin-like soft fills, no borders on cards.
   Accent: warm orange (#FF6B35). Typography does 90% of the work. */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root {
  /* Backgrounds */
  --bg-0: #FAFAF8;
  --surface: #FFFFFF;
  --card-bg: #F0F0EC;
  --card-hover: #E8E8E3;

  /* Text */
  --text-1: #1A1A1A;
  --text-2: #71717A;
  --text-3: #A1A1AA;

  /* Accent */
  --accent: #FF6B35;
  --accent-hover: #E85D2C;
  --accent-soft: rgba(255,107,53,0.07);

  /* Semantic */
  --success: #22C55E;
  --success-soft: rgba(34,197,94,0.07);
  --warning: #EAB308;
  --info: #3B82F6;

  /* Border */
  --border: rgba(0,0,0,0.05);
  --border-h: rgba(0,0,0,0.09);

  /* Typography */
  --display: 'Satoshi', system-ui, sans-serif;
  --sans: 'Instrument Sans', system-ui, sans-serif;
  --mono: 'Geist Mono', 'SF Mono', monospace;

  /* Radius */
  --r-sm: 5px;
  --r-md: 7px;
  --r-lg: 10px;
  --r-full: 9999px;
}

html{scroll-behavior:smooth}

body {
  font-family: var(--sans);
  font-weight: 400;
  background: var(--bg-0);
  color: var(--text-1);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ── NAV ── */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  background: rgba(250,250,248,0.85);
  border-bottom: 1px solid var(--border);
}
.nav-inner {
  max-width: 1060px; margin: 0 auto;
  padding: 0 32px; height: 56px;
  display: flex; align-items: center; justify-content: space-between;
}
.logo {
  font-family: var(--display);
  font-weight: 500; font-size: 16px;
  letter-spacing: -0.02em;
  display: flex; align-items: center; gap: 10px;
  color: var(--text-1);
}
.logo-mark {
  width: 24px; height: 24px;
  border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.logo-mark svg { width: 100%; height: 100% }
.nav-links { display: flex; align-items: center; gap: 4px }
.nav-links a {
  color: var(--text-2); text-decoration: none;
  font-size: 13px; font-weight: 400;
  padding: 6px 12px; border-radius: var(--r-sm);
  transition: color 0.15s;
}
.nav-links a:hover { color: var(--text-1) }
.nav-cta {
  background: var(--text-1) !important; color: var(--bg-0) !important;
  font-weight: 500 !important;
  padding: 7px 16px !important;
  margin-left: 8px;
  border-radius: var(--r-sm) !important;
  transition: opacity 0.15s !important;
}
.nav-cta:hover { opacity: 0.85 !important }

/* ── HERO ── */
.hero {
  max-width: 1060px; margin: 0 auto;
  padding: 130px 32px 72px;
  display: grid; grid-template-columns: 1fr 1.2fr;
  gap: 56px; align-items: center;
}

.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 12px 5px 8px;
  background: var(--accent-soft);
  border-radius: var(--r-full);
  font-size: 12px; font-weight: 500;
  color: var(--accent);
  margin-bottom: 28px;
  width: fit-content;
}
.hero-badge .dot {
  width: 6px; height: 6px;
  background: var(--accent);
  border-radius: 50%;
}

.hero h1 {
  font-family: var(--display);
  font-size: clamp(44px, 5.5vw, 72px);
  line-height: 1.05;
  font-weight: 500;
  letter-spacing: -0.035em;
  margin-bottom: 24px;
  color: var(--text-1);
}
.hero h1 em {
  font-style: italic;
  font-weight: 500;
  color: var(--accent);
}
.hero-sub {
  font-size: 17px; line-height: 1.6;
  color: var(--text-2);
  font-weight: 400;
  max-width: 420px;
  margin-bottom: 32px;
}
.hero-actions {
  display: flex; gap: 10px; align-items: center;
}

/* Buttons */
.btn-primary {
  background: var(--text-1); color: var(--bg-0);
  padding: 11px 22px; border-radius: var(--r-sm);
  font-weight: 500; font-size: 14px;
  text-decoration: none; border: none; cursor: pointer;
  font-family: var(--sans); transition: opacity .15s;
}
.btn-primary:hover { opacity: .85 }

.btn-secondary {
  background: var(--card-bg); color: var(--text-1);
  padding: 11px 22px; border-radius: var(--r-sm);
  font-weight: 400; font-size: 14px;
  text-decoration: none; border: none;
  cursor: pointer; font-family: var(--sans);
  transition: background .15s;
}
.btn-secondary:hover { background: var(--card-hover) }

.btn-accent {
  background: var(--accent); color: #fff;
  padding: 11px 22px; border-radius: var(--r-sm);
  font-weight: 500; font-size: 14px;
  text-decoration: none; border: none; cursor: pointer;
  font-family: var(--sans); transition: background .15s;
}
.btn-accent:hover { background: var(--accent-hover) }

/* Legacy aliases */
.btn-light { background: var(--text-1); color: var(--bg-0); padding: 11px 22px; border-radius: var(--r-sm); font-weight: 500; font-size: 14px; text-decoration: none; border: none; cursor: pointer; font-family: var(--sans); transition: opacity .15s }
.btn-light:hover { opacity: .85 }
.btn-outline { background: var(--card-bg); color: var(--text-2); padding: 11px 22px; border-radius: var(--r-sm); font-weight: 400; font-size: 14px; text-decoration: none; border: none; cursor: pointer; font-family: var(--sans); transition: background .15s }
.btn-outline:hover { background: var(--card-hover); color: var(--text-1) }

/* ── CHAT MOCKUP ── */
.chat-window {
  background: var(--surface);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0,0,0,.06);
}
.chat-header {
  padding: 12px 16px;
  display: flex; align-items: center; gap: 10px;
  border-bottom: 1px solid var(--border);
  background: var(--card-bg);
}
.chat-avatar {
  width: 32px; height: 32px;
  border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.chat-avatar svg { width: 100%; height: 100% }
.chat-header-info h4 { font-size: 13px; font-weight: 500; color: var(--text-1) }
.chat-header-info span { font-size: 11px; font-weight: 400; color: var(--text-3) }
.chat-tabs {
  margin-left: auto;
  display: flex; gap: 1px;
  background: var(--bg-0);
  border-radius: var(--r-sm);
  padding: 2px;
}
.chat-tab {
  padding: 4px 10px; border-radius: 3px;
  font-size: 11px; font-weight: 400;
  color: var(--text-3);
  cursor: pointer; transition: all .12s;
  border: none; background: transparent;
  font-family: var(--sans);
}
.chat-tab.active { background: var(--surface); color: var(--text-1) }

.chat-body { padding: 16px; display: flex; flex-direction: column; gap: 12px }

.msg {
  max-width: 88%;
  padding: 10px 14px;
  border-radius: var(--r-md);
  font-size: 13px; line-height: 1.55;
  font-weight: 400;
}
.msg-jack {
  background: var(--card-bg);
  color: var(--text-1);
  align-self: flex-start;
}
.msg-jack .msg-name {
  font-family: var(--mono);
  font-size: 10px; font-weight: 500;
  color: var(--accent);
  margin-bottom: 4px;
  letter-spacing: .02em;
}
.msg-user {
  background: var(--accent-soft);
  color: var(--text-1);
  font-weight: 400;
  align-self: flex-end;
}
.msg-meta {
  font-size: 10px; font-weight: 400;
  color: var(--text-3);
  margin-top: 4px;
}
.msg-draft {
  background: var(--success-soft);
  border-radius: var(--r-sm);
  padding: 10px 12px;
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--text-1);
  line-height: 1.6;
  font-weight: 400;
}
.msg-draft-label {
  font-family: var(--mono);
  font-size: 10px; font-weight: 500;
  color: var(--success);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 4px;
}
.msg-actions {
  display: flex; gap: 6px; margin-top: 8px;
}
.msg-actions button {
  padding: 4px 12px;
  border-radius: var(--r-sm);
  font-size: 11px; font-weight: 500;
  cursor: pointer;
  font-family: var(--sans);
  transition: all .12s;
}
.btn-approve { background: var(--success); color: #fff; border: none }
.btn-approve:hover { opacity: .85 }
.btn-feedback {
  background: var(--card-bg); color: var(--text-2);
  border: none;
}
.btn-feedback:hover { background: var(--card-hover) }

/* ── METRICS BAR ── */
.metrics-bar {
  max-width: 1060px; margin: 0 auto;
  padding: 0 32px 64px;
}
.metrics-inner {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.metric {
  background: var(--card-bg);
  border-radius: var(--r-md);
  padding: 20px;
  text-align: center;
  transition: background .15s;
}
.metric:hover { background: var(--card-hover) }
.metric-val {
  font-family: var(--display);
  font-size: 28px; font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--text-1);
  margin-bottom: 2px;
}
.metric-val span { color: var(--accent) }
.metric-label {
  font-family: var(--mono);
  font-size: 11px; font-weight: 400;
  color: var(--text-3);
  letter-spacing: .02em;
}

/* ── WORKFLOW ── */
.workflow {
  max-width: 1060px; margin: 0 auto;
  padding: 80px 32px;
  display: grid; grid-template-columns: .8fr 1.2fr;
  gap: 56px; align-items: start;
}
.wf-left { position: sticky; top: 100px }
.label {
  font-family: var(--mono);
  font-size: 11px; font-weight: 400;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 14px;
}
.wf-left h2 {
  font-family: var(--display);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin-bottom: 14px;
}
.wf-left p {
  font-size: 16px; font-weight: 400;
  color: var(--text-2); line-height: 1.65;
  max-width: 380px;
}

.steps { display: flex; flex-direction: column; gap: 8px }
.step {
  background: var(--card-bg);
  border-radius: var(--r-md);
  padding: 20px;
  display: grid; grid-template-columns: 32px 1fr auto;
  gap: 14px; align-items: start;
  transition: background .15s;
}
.step:hover { background: var(--card-hover) }
.step-n {
  font-family: var(--mono);
  font-size: 14px; font-weight: 500;
  color: var(--accent);
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-soft);
  border-radius: var(--r-sm);
  flex-shrink: 0;
}
.step h3 { font-size: 14px; font-weight: 500; margin-bottom: 3px; letter-spacing: -0.01em }
.step p { font-size: 13px; font-weight: 400; color: var(--text-2); line-height: 1.55 }
.step-t {
  font-family: var(--mono);
  font-size: 10px; font-weight: 400;
  color: var(--success);
  background: var(--success-soft);
  padding: 3px 8px;
  border-radius: var(--r-sm);
  white-space: nowrap;
  align-self: center;
}

/* ── WHAT IT DOES ── */
.what-section {
  max-width: 1060px; margin: 0 auto;
  padding: 40px 32px 80px;
}
.what-section h2 {
  font-family: var(--display);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.025em;
  margin-bottom: 10px;
}
.what-section > p {
  font-size: 16px; font-weight: 400;
  color: var(--text-2);
  margin-bottom: 36px; max-width: 480px;
}

.what-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.what-card {
  background: var(--card-bg);
  border-radius: var(--r-md);
  padding: 24px 20px;
  transition: background .15s;
}
.what-card:hover { background: var(--card-hover) }
.what-icon {
  width: 32px; height: 32px;
  background: var(--accent-soft);
  border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}
.what-icon svg { width: 16px; height: 16px; stroke: var(--accent); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round }
.what-card h3 { font-size: 14px; font-weight: 500; margin-bottom: 5px }
.what-card p { font-size: 13px; font-weight: 400; color: var(--text-2); line-height: 1.55 }

/* ── DAILY STANDUP PREVIEW ── */
.standup-section {
  background: var(--card-bg);
}
.standup-inner {
  max-width: 1060px; margin: 0 auto;
  padding: 80px 32px;
  display: grid; grid-template-columns: 1fr 1.1fr;
  gap: 56px; align-items: center;
}
.standup-inner h2 {
  font-family: var(--display);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin-bottom: 14px;
}
.standup-inner > div > p {
  font-size: 16px; font-weight: 400;
  color: var(--text-2); line-height: 1.65;
  max-width: 400px;
}
.standup-mock {
  background: var(--surface);
  border-radius: var(--r-md);
  padding: 20px;
  font-size: 13px; font-weight: 400;
  color: var(--text-2); line-height: 1.7;
}
.standup-mock .msg-name {
  font-family: var(--mono);
  font-size: 10px; font-weight: 500;
  color: var(--accent);
  margin-bottom: 8px;
  letter-spacing: .02em;
}
.standup-mock h4 {
  font-size: 13px; font-weight: 500;
  color: var(--text-1);
  margin-bottom: 12px;
}
.standup-row {
  display: flex; justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}
.standup-row:last-child { border-bottom: none }
.standup-row .val { color: var(--text-1); font-weight: 500 }
.standup-row .val.up { color: var(--success) }
.standup-plan {
  margin-top: 14px; padding-top: 14px;
  border-top: 1px solid var(--border);
  font-size: 12px; color: var(--text-3);
}
.standup-plan strong { color: var(--text-2); font-weight: 500 }

/* ── API SECTION ── */
.api-section {
  max-width: 1060px; margin: 0 auto;
  padding: 80px 32px;
}
.api-section h2 {
  font-family: var(--display);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.025em;
  margin-bottom: 10px;
}
.api-section > p {
  font-size: 16px; font-weight: 400;
  color: var(--text-2);
  margin-bottom: 32px; max-width: 500px;
}
.api-grid {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: 8px;
}
.api-card {
  background: var(--card-bg);
  border-radius: var(--r-md);
  padding: 20px;
  transition: background .15s;
}
.api-card:hover { background: var(--card-hover) }
.api-method {
  font-family: var(--mono);
  font-size: 11px; font-weight: 500;
  display: inline-flex; gap: 6px;
  margin-bottom: 10px;
}
.api-method .verb {
  color: #fff;
  padding: 1px 6px;
  border-radius: 3px;
  font-weight: 500;
}
.verb-post { background: var(--success) }
.verb-get { background: var(--info) }
.api-method .path { color: var(--text-2) }
.api-card p { font-size: 13px; font-weight: 400; color: var(--text-2); line-height: 1.5 }

/* ── FREE TIER ── */
.free-section {
  background: var(--card-bg);
}
.free-inner {
  max-width: 1060px; margin: 0 auto;
  padding: 80px 32px;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 56px; align-items: start;
}
.free-inner h2 {
  font-family: var(--display);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin-bottom: 10px;
}
.free-inner > div:first-child > p {
  font-size: 16px; font-weight: 400;
  color: var(--text-2); line-height: 1.65;
  max-width: 400px;
  margin-bottom: 28px;
}
.free-list {
  list-style: none;
  display: flex; flex-direction: column;
  gap: 10px;
}
.free-list li {
  font-size: 14px; font-weight: 400;
  color: var(--text-2);
  display: flex; align-items: flex-start; gap: 10px;
  line-height: 1.5;
}
.free-list li::before {
  content: '';
  flex-shrink: 0;
  width: 16px; height: 16px; margin-top: 2px;
  border-radius: var(--r-sm);
  background: var(--accent-soft);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 24 24' fill='none' stroke='%23FF6B35' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
  background-size: 8px; background-repeat: no-repeat;
  background-position: center;
}
.roadmap-card {
  background: var(--surface);
  border-radius: var(--r-md);
  padding: 24px 20px;
}
.roadmap-card h3 {
  font-size: 14px; font-weight: 500;
  margin-bottom: 14px;
  display: flex; align-items: center; gap: 8px;
}
.roadmap-card h3 .soon {
  font-family: var(--mono);
  font-size: 10px; font-weight: 400;
  color: var(--text-3);
  background: var(--card-bg);
  padding: 2px 8px;
  border-radius: var(--r-sm);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.roadmap-list {
  list-style: none;
  display: flex; flex-direction: column;
  gap: 8px;
}
.roadmap-list li {
  font-size: 13px; font-weight: 400;
  color: var(--text-3);
  display: flex; align-items: center; gap: 8px;
  line-height: 1.45;
}
.roadmap-list li::before {
  content: '';
  width: 4px; height: 4px;
  background: var(--text-3);
  border-radius: 50%;
  flex-shrink: 0;
}

/* ── BOTTOM CTA ── */
.cta-bottom {
  max-width: 1060px; margin: 0 auto;
  padding: 96px 32px;
  text-align: center;
}
.cta-bottom h2 {
  font-family: var(--display);
  font-size: clamp(30px, 4vw, 44px);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.08;
  margin-bottom: 14px;
}
.cta-bottom h2 em { font-style: italic; font-weight: 500; color: var(--accent) }
.cta-bottom p {
  font-size: 17px; font-weight: 400;
  color: var(--text-2);
  margin-bottom: 28px;
  max-width: 440px; margin-left: auto; margin-right: auto;
}
.cta-actions { display: flex; gap: 10px; justify-content: center }

/* ── FOOTER ── */
footer {
  border-top: 1px solid var(--border);
  padding: 28px 32px;
  max-width: 1060px; margin: 0 auto;
  display: flex; justify-content: space-between;
  align-items: center;
  font-size: 12px; font-weight: 400; color: var(--text-3);
}
footer a { color: var(--text-2); text-decoration: none; font-weight: 400 }
footer a:hover { color: var(--text-1) }
.footer-links { display: flex; gap: 20px }

/* ── RESPONSIVE ── */
@media(max-width:900px){
  .hero,.workflow,.standup-inner,.free-inner{grid-template-columns:1fr;gap:36px}
  .wf-left{position:static}
  .what-grid,.api-grid{grid-template-columns:1fr}
  .metrics-inner{grid-template-columns:repeat(2,1fr)}
  nav .nav-links a:not(.nav-cta){display:none}
}