/* LateGate product landing pages: /watch and /concierge */

:root {
  --teal: #0E4A47;
  --teal-line: #2C6865;
  --mint: #5FE3C0;
  --mint-soft: #E6F7F1;
  --cream: #FAF4E6;
  --ink: #1B2A29;
  --muted: #4A5A58;
  --muted-on-teal: #C9DCD8;
  --rule: #D9D0BC;
  --sand: #F0E3CC;
  --sand-rule: #D9CBB0;
  --amber: #9A5208;
  --white: #FFFFFF;
  --display: 'Bricolage Grotesque', system-ui, sans-serif;
  --body: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --logo: 'DM Sans', system-ui, sans-serif;
  --mono: ui-monospace, Menlo, monospace;
}

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

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
}

a { color: var(--teal); }
a:hover { color: var(--ink); }
img { display: block; max-width: 100%; }

.wrap { max-width: 1120px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.wrap--mid { max-width: 860px; }
.wrap--narrow { max-width: 760px; }

.on-teal { background: var(--teal); color: var(--cream); }

h1, h2 { font-family: var(--display); font-weight: 800; }
h3 { font-family: var(--display); font-weight: 600; }

/* Header */
.site-top { background: var(--teal); border-bottom: 1px solid var(--teal-line); }
.site-top .wrap {
  padding-top: 16px; padding-bottom: 16px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
}
.logo {
  font-family: var(--logo); font-weight: 700; font-size: 25px;
  color: var(--cream); text-decoration: none;
  min-height: 44px; display: inline-flex; align-items: center;
}
.logo:hover { color: var(--cream); }
.logo span { color: var(--mint); }
.nav-links { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.nav-links a { color: var(--cream); text-decoration: none; font-weight: 500; font-size: 15px; }
.nav-links a:hover { color: var(--mint); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 12px 20px; border-radius: 999px;
  font-weight: 600; text-decoration: none; text-align: center;
}
.btn--sm { min-height: 44px; padding: 10px 18px; font-size: 15px; }
.btn--mint { background: var(--mint); color: var(--teal); }
.btn--mint:hover { color: var(--teal); filter: brightness(1.05); }
.nav-links .btn--mint { color: var(--teal); }
.btn--outline { border: 2px solid var(--teal); color: var(--teal); }
.btn--outline:hover { background: var(--teal); color: var(--cream); }

/* Store badges */
.badges { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.badges--center { justify-content: center; margin-top: 8px; }
.badge {
  background: #000000; color: #FFFFFF; text-decoration: none;
  border: 1px solid #A6A6A6; border-radius: 10px;
  padding: 8px 20px 8px 14px; min-height: 56px;
  display: inline-flex; align-items: center; gap: 10px; text-align: left;
}
.badge:hover { color: #FFFFFF; border-color: #FFFFFF; }
.badge img { width: 26px; height: 26px; }
.badge-text { display: flex; flex-direction: column; line-height: 1.1; }
.badge-small { font-size: 11px; }
.badge-small--caps { text-transform: uppercase; letter-spacing: 0.04em; }
.badge-big { font-size: 21px; font-weight: 600; letter-spacing: -0.01em; }

/* Hero */
.hero .wrap {
  padding-top: 72px; padding-bottom: 88px;
  display: flex; flex-wrap: wrap; gap: 56px; align-items: center;
}
.hero-copy { flex: 1 1 480px; min-width: 0; }
.pill {
  margin: 0 0 18px; display: inline-block;
  border: 1px solid var(--teal-line); color: var(--mint);
  font-weight: 600; font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 6px 14px; border-radius: 999px;
}
.hero h1 {
  margin: 0 0 20px; font-size: clamp(40px, 6vw, 68px);
  line-height: 1.02; letter-spacing: -0.02em;
}
.lede { margin: 0 0 32px; font-size: 20px; line-height: 1.55; max-width: 34em; }
.hero-note { margin: 22px 0 0; font-size: 15px; color: var(--muted-on-teal); }
.hero-side { flex: 1 1 340px; min-width: 0; max-width: 420px; display: flex; flex-direction: column; gap: 14px; }
.caption { margin: 0; font-size: 13px; color: var(--muted-on-teal); }

.card { background: var(--cream); color: var(--ink); border-radius: 20px; padding: 18px 20px; }
.card-title { margin: 0 0 8px; font-weight: 600; font-size: 15px; }
.card ul { margin: 0; padding-left: 20px; font-size: 15px; line-height: 1.55; }

/* Connection card (mirrors the app's Connection screen) */
.conn { border-radius: 22px; padding: 22px; }
.conn-head { margin: 0 0 14px; font-size: 20px; font-weight: 600; line-height: 1.3; }
.conn-head span, .conn-odds, .conn-row--alert { color: var(--amber); }
.conn-box {
  background: var(--sand); border-radius: 14px; padding: 16px 18px;
  display: flex; flex-direction: column; gap: 12px; font-size: 16px; line-height: 1.3;
}
.conn-odds { margin: 0; font-weight: 600; font-size: 19px; }
.conn-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; font-weight: 600; }
.conn-time { font-family: var(--mono); white-space: nowrap; }
.conn-sub { display: block; text-align: right; font-size: 14px; font-weight: 400; color: var(--muted); margin-top: 2px; }
.conn-meta {
  border-top: 1px solid var(--sand-rule); padding-top: 12px;
  display: flex; flex-direction: column; gap: 10px; color: var(--muted);
}
.conn-meta .conn-row { font-weight: 400; }

/* Concierge chat card */
.chat-label {
  margin: 0 0 12px; font-size: 13px; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted);
}
.chat { display: flex; flex-direction: column; gap: 10px; }
.bubble { margin: 0; padding: 10px 14px; font-size: 15px; line-height: 1.45; }
.bubble--user {
  align-self: flex-end; max-width: 85%;
  background: var(--teal); color: var(--cream); border-radius: 16px 16px 4px 16px;
}
.bubble--bot {
  align-self: flex-start; max-width: 92%;
  background: var(--white); border: 1px solid var(--rule); border-radius: 16px 16px 16px 4px;
  padding: 12px 14px; line-height: 1.5;
}
.bubble--bot p { margin: 0 0 8px; }
.bubble--bot .say { margin: 0; background: var(--mint-soft); border-radius: 10px; padding: 10px 12px; font-weight: 500; }

/* Section headings */
.kicker {
  margin: 0 0 10px; font-size: 14px; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--teal);
}
.section-title { margin: 0 0 32px; font-size: clamp(30px, 4.2vw, 46px); line-height: 1.1; }
.section-title--tight { margin-bottom: 12px; }
.section-sub { margin: 0 0 36px; font-size: 19px; color: var(--muted); max-width: 40em; }

/* Problem intro */
.problem { padding-top: 80px; padding-bottom: 24px; }
.problem h2 { margin: 0 0 18px; font-size: clamp(28px, 3.6vw, 40px); line-height: 1.12; }
.problem p { margin: 0 0 14px; font-size: 19px; }
.problem p:last-child { margin-bottom: 0; }

/* Listicle */
.reasons { padding-top: 56px; padding-bottom: 40px; }
.reasons h2 { margin: 0 0 40px; font-size: clamp(30px, 4.2vw, 48px); line-height: 1.08; letter-spacing: -0.01em; }
.reason-list { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--rule); }
.reason {
  display: flex; flex-wrap: wrap; gap: 20px 28px;
  padding: 32px 0; border-top: 1px solid var(--rule);
}
.reason-num {
  flex: 0 0 72px; font-family: var(--display); font-weight: 800;
  font-size: 56px; line-height: 1; color: var(--teal);
}
.reason-body { flex: 1 1 420px; min-width: 0; }
.reason-body h3 { margin: 0 0 12px; font-size: 26px; line-height: 1.2; }
.reason-body p { margin: 0 0 10px; }
.reason-body .tag { margin: 12px 0 0; font-size: 14px; font-weight: 600; color: var(--teal); }

/* Positioning */
.contrast { margin-top: 48px; }
.contrast .wrap { padding-top: 80px; padding-bottom: 80px; }
.contrast h2 { margin: 0 0 14px; font-size: clamp(30px, 4.2vw, 46px); line-height: 1.1; max-width: 22em; }
.contrast .sub { margin: 0 0 40px; font-size: 19px; color: var(--muted-on-teal); max-width: 40em; }
.compare { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.compare-card { border: 1px solid var(--teal-line); border-radius: 20px; padding: 26px; }
.compare-card .label {
  margin: 0 0 6px; font-size: 14px; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted-on-teal);
}
.compare-card p:last-child { margin: 0; font-size: 20px; line-height: 1.4; }
.compare-card--hi { background: var(--mint); color: var(--teal); border-color: var(--mint); }
.compare-card--hi .label { color: var(--teal); }
.compare-card--hi p:last-child { font-weight: 600; }

/* Proof */
.proof { padding-top: 80px; padding-bottom: 24px; }
.quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.quote {
  margin: 0; background: var(--white); border: 1px solid var(--rule); border-radius: 20px;
  padding: 26px; display: flex; flex-direction: column; gap: 18px;
}
.quote blockquote { margin: 0; font-size: 18px; line-height: 1.55; }
.quote figcaption, .founder-name { font-size: 15px; color: var(--muted); }
.quote strong, .founder-name strong { color: var(--ink); }
.founder {
  margin-top: 16px; background: var(--white); border: 1px solid var(--rule); border-radius: 20px;
  padding: 28px; display: flex; flex-wrap: wrap; gap: 20px; align-items: center;
}
.founder-copy { flex: 1 1 420px; min-width: 0; }
.founder-copy p:last-child { margin: 0; font-size: 19px; line-height: 1.55; }
.founder-name { margin: 0; flex: 0 1 auto; }

/* Pricing */
.pricing { padding-top: 80px; padding-bottom: 80px; }
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; align-items: stretch; }
.plans--two { max-width: 820px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.plan {
  background: var(--white); border: 1px solid var(--rule); border-radius: 22px;
  padding: 28px; display: flex; flex-direction: column; gap: 16px;
}
.plan--hi { background: var(--teal); color: var(--cream); border-color: var(--teal); }
.plan-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.plan h3 { margin: 0; font-family: var(--body); font-size: 20px; font-weight: 600; }
.price { margin: 4px 0 0; font-family: var(--display); font-weight: 800; font-size: 40px; line-height: 1.1; }
.price span { font-family: var(--body); font-weight: 500; font-size: 16px; color: var(--muted); }
.plan--hi .price span { color: var(--muted-on-teal); }
.plan ul { margin: 0; padding-left: 20px; font-size: 16px; line-height: 1.7; flex-grow: 1; }
.flag {
  background: var(--mint); color: var(--teal); font-weight: 600; font-size: 13px;
  padding: 5px 12px; border-radius: 999px; white-space: nowrap;
}

/* FAQ */
.faq { padding-bottom: 80px; }
.faq h2 { margin: 0 0 24px; font-size: clamp(26px, 3.4vw, 36px); line-height: 1.15; }
.qa { border-top: 1px solid var(--rule); padding: 20px 0; }
.qa:last-child { border-bottom: 1px solid var(--rule); }
.qa h3 { margin: 0 0 6px; font-family: var(--body); font-size: 18px; font-weight: 600; }
.qa p { margin: 0; }

/* Final call to action */
.get .wrap {
  padding-top: 80px; padding-bottom: 80px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 18px;
}
.get h2 { margin: 0; font-size: clamp(32px, 4.6vw, 52px); line-height: 1.05; }
.get p { margin: 0; font-size: 19px; color: var(--muted-on-teal); }

/* Footer */
.site-foot { border-top: 1px solid var(--teal-line); color: var(--muted-on-teal); }
.site-foot .wrap {
  padding-top: 28px; padding-bottom: 28px;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; font-size: 15px;
}
.site-foot p { margin: 0; }
.foot-links { display: flex; flex-wrap: wrap; gap: 20px; }
.foot-links a { color: var(--cream); }
.foot-links a:hover { color: var(--mint); }

a:focus-visible, .badge:focus-visible { outline: 3px solid var(--mint); outline-offset: 3px; }