/* ProfitLens landing page — implementation of "ProfitLens Landing v2" from the
   claude.ai/design project, on top of the ProfitLens design-system tokens.
   The landing overrides the DS font with Archivo (marketing surface); the app
   DS proper uses IBM Plex Sans. Tokens are scoped to :root, visual classes are
   prefixed .lp- and only used on this page. */

/* ---- Design-system tokens (subset used here) ------------------------------ */
:root {
  --slate-25: #F6F8FB;
  --slate-50: #EAF0F4;
  --slate-100: #E1E8EF;
  --slate-200: #D6DEE8;
  --slate-300: #B6C2D1;
  --slate-400: #94A3B8;
  --slate-500: #6B7A8F;
  --slate-600: #526075;
  --slate-800: #2A374C;
  --slate-900: #172033;
  --white: #FFFFFF;

  --teal-700: #0F766E;
  --teal-800: #0C5F59;
  --teal-900: #094C47;
  --teal-100: #D7E8E6;
  --teal-50: #E9F3F2;

  --blue-700: #1D4ED8;
  --green-700: #15803D;
  --amber-700: #B45309;
  --red-700: #B91C1C;
  --gold-700: #A16207;

  --surface-base: var(--slate-25);
  --surface-inset: #F1F4F8;

  --text-primary: var(--slate-900);
  --text-secondary: var(--slate-600);

  --border-subtle: var(--slate-200);
  --border-strong: var(--slate-300);
  --focus-ring: rgba(15, 118, 110, 0.28);

  --primary: var(--teal-700);
  --primary-hover: var(--teal-800);
  --primary-active: var(--teal-900);
  --primary-subtle: var(--teal-50);
  --primary-border: var(--teal-100);

  --success: var(--green-700);
  --warning: var(--amber-700);
  --danger: var(--red-700);
  --event: var(--gold-700);

  --chart-primary: var(--teal-700);
  --chart-baseline: var(--slate-400);
  --chart-forecast: var(--blue-700);
  --chart-event: var(--gold-700);
  --chart-grid: #E4EAF1;
  --chart-axis: var(--slate-500);
  --chart-band: rgba(29, 78, 216, 0.10);

  --heat-1: #EDF2F6;
  --heat-2: #C9DFDC;
  --heat-3: #92C4BE;
  --heat-4: #4E9E96;
  --heat-5: #0F766E;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  --lp-font: 'Archivo', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --lp-shadow-card: 0 1px 2px rgba(23, 32, 51, 0.04), 0 18px 44px rgba(23, 32, 51, 0.09);
  --lp-shadow-card-sm: 0 1px 2px rgba(23, 32, 51, 0.04), 0 12px 32px rgba(23, 32, 51, 0.07);
  --lp-shadow-faq: 0 1px 2px rgba(23, 32, 51, 0.04), 0 8px 24px rgba(23, 32, 51, 0.05);
}

/* ---- Page scaffold -------------------------------------------------------- */
/* This stylesheet is loaded only by the landing template, so a bare `body`
   selector is safe and deliberately overrides Bootstrap/main.css. */
body {
  margin: 0;
  background: var(--white);
  color: var(--text-primary);
  font: var(--weight-regular) 14px/1.5 var(--lp-font);
  font-variant-numeric: tabular-nums lining-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.lp a { color: var(--primary); text-decoration: none; }
.lp a:hover { color: var(--primary-hover); }
.lp :focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.lp h1, .lp h2, .lp h3, .lp p { margin: 0; }
.lp .lp-inner { max-width: 1280px; margin: 0 auto; padding: 0 40px; }

/* ---- Header --------------------------------------------------------------- */
.lp-header { position: sticky; top: 0; z-index: 40; background: var(--white); border-bottom: 1px solid var(--slate-100); }
.lp-header .lp-inner { height: 68px; display: flex; align-items: center; gap: 40px; }
.lp-wordmark { font-size: 20px; font-weight: var(--weight-semibold); letter-spacing: -0.02em; color: var(--text-primary); }
.lp-nav { display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 15px; }
.lp-nav a { color: var(--text-secondary); white-space: nowrap; }
.lp-nav a:hover { color: var(--text-primary); }
.lp-header-right { margin-left: auto; display: flex; align-items: center; gap: 20px; }
.lp-header-cta { font-size: 15px; font-weight: 500; border-bottom: 2px solid var(--primary); padding-bottom: 2px; }

/* ---- Buttons -------------------------------------------------------------- */
.lp .lp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 52px; padding: 0 32px; border: 0; border-radius: 0; cursor: pointer;
  background: var(--primary); color: var(--white);
  font-family: var(--lp-font); font-size: 13px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.07em;
  transition: background 80ms linear;
}
.lp .lp-btn:hover { background: var(--primary-hover); color: var(--white); }
.lp .lp-btn:active { background: var(--primary-active); }
.lp .lp-btn--ghost { background: transparent; color: var(--primary); border: 1px solid var(--primary); }
.lp .lp-btn--ghost:hover { background: rgba(15, 118, 110, 0.06); color: var(--primary); }
.lp .lp-btn[disabled] { opacity: 0.6; cursor: not-allowed; }

/* ---- Sections ------------------------------------------------------------- */
.lp-section { scroll-margin-top: 68px; }
.lp-section-title { font-size: 38px; font-weight: var(--weight-semibold); letter-spacing: -0.03em; line-height: 1.1; text-wrap: pretty; }
.lp-section-lede { font-size: 15px; line-height: 1.6; color: var(--text-secondary); max-width: 44em; }
.lp-card { background: var(--white); box-shadow: var(--lp-shadow-card); }
.lp-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.lp-card-title { font-size: 17px; font-weight: var(--weight-semibold); letter-spacing: -0.01em; }
.lp-meta { font-size: 13px; color: var(--text-secondary); }

/* ---- Hero ----------------------------------------------------------------- */
.lp-hero { background: var(--teal-50); }
.lp-hero .lp-inner { padding-top: 88px; padding-bottom: 96px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: center; }
.lp-hero h1 { font-size: 58px; line-height: 1.03; font-weight: var(--weight-semibold); letter-spacing: -0.035em; text-wrap: pretty; }
.lp-hero-sub { margin-top: 24px; max-width: 30em; font-size: 18px; line-height: 1.6; color: var(--text-secondary); text-wrap: pretty; }
.lp-hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.lp-hero-card { padding: 28px 28px 20px; }
.lp-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 24px 0 4px; }
.lp-kpi-label { font-size: 13px; color: var(--text-secondary); }
.lp-kpi-value { margin-top: 6px; font-size: 30px; font-weight: var(--weight-semibold); letter-spacing: -0.02em; }
.lp-kpi-value small { font-size: 15px; font-weight: var(--weight-regular); color: var(--text-secondary); }
.lp-kpi-delta { font-size: 13px; line-height: 1.35; }
.lp-sample-note { margin-top: 8px; font-size: 12px; color: var(--slate-400); }

/* ---- Charts / legend ------------------------------------------------------ */
.lp-chart { display: block; width: 100%; height: auto; font-family: var(--lp-font); }
.lp-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 10px; font-size: 12px; color: var(--text-secondary); }
.lp-legend span { display: inline-flex; align-items: center; gap: 7px; }
.lp-swatch { display: inline-block; width: 18px; height: 0; border-top: 2px solid currentColor; }
.lp-swatch--dashed { border-top-style: dashed; }
.lp-swatch--band { width: 18px; height: 10px; border: 0; background: var(--chart-band); }

/* ---- Connect form --------------------------------------------------------- */
.lp-connect .lp-inner { padding-top: 80px; padding-bottom: 80px; }
.lp-connect-card { max-width: 900px; margin: 0 auto; padding: 40px; }
.lp-connect-card h2 { font-size: 32px; font-weight: var(--weight-semibold); letter-spacing: -0.025em; margin-bottom: 10px; }
.lp-connect-lede { font-size: 15px; line-height: 1.6; color: var(--text-secondary); margin-bottom: 32px; max-width: 46em; }
.lp-form { display: flex; flex-direction: column; gap: 24px; }
.lp-field label, .lp-field .lp-label { display: block; font-size: 13px; font-weight: 500; color: var(--text-secondary); margin-bottom: 8px; }
.lp-hint { margin-top: 8px; font-size: 13px; line-height: 1.35; color: var(--text-secondary); }
.lp-error { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 13px; color: var(--danger); }
.lp-search-row { position: relative; display: flex; }
.lp-search-icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--slate-400); pointer-events: none; display: flex; }
.lp-form input[type="text"], .lp-form textarea {
  background: var(--white); border: 1px solid var(--border-strong); border-radius: 0;
  font-family: var(--lp-font); font-size: 16px; color: var(--text-primary); outline: none; box-shadow: none;
}
.lp-search-row input[type="text"] { flex: 1; min-width: 0; height: 56px; padding: 0 16px 0 46px; }
.lp-form input:focus, .lp-form textarea:focus, .lp-form select:focus {
  border-color: var(--primary); box-shadow: 0 0 0 3px var(--focus-ring); outline: none;
}
.lp-form input.is-invalid, .lp-form select.is-invalid { border-color: var(--danger); }
.lp-form select {
  width: 100%; height: 48px; padding: 0 12px; background: var(--white);
  border: 1px solid var(--border-strong); border-radius: 0;
  font-family: var(--lp-font); font-size: 15px; color: var(--text-primary);
  appearance: auto; background-image: none; box-shadow: none;
}
.lp-form textarea { width: 100%; padding: 12px 16px; font-size: 15px; line-height: 1.5; resize: vertical; }
.lp-form-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; align-items: start; }
.lp-form-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 20px; padding-top: 4px; }
.lp-optional { display: inline-block; margin-left: 8px; padding: 1px 7px; border: 1px solid var(--border-subtle); background: var(--surface-inset); font-size: 11px; color: var(--text-secondary); }

/* Map preview (hidden until a place is picked) */
.lp-map-wrap { display: none; border: 1px solid var(--border-subtle); background: var(--white); }
.lp-map-wrap.visible { display: block; }
.lp-map-wrap #map { height: 220px; }
.lp-map-caption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 20px; padding: 14px 16px; border-top: 1px solid var(--border-subtle); }
.lp-map-caption .lp-map-name { font-size: 15px; font-weight: var(--weight-semibold); }
.lp-map-caption .lp-map-addr { font-size: 13px; color: var(--text-secondary); }

/* ---- "How it works" cards ------------------------------------------------- */
.lp-how { background: var(--surface-base); border-top: 1px solid var(--slate-100); }
.lp-how .lp-inner { padding-top: 80px; padding-bottom: 80px; }
.lp-how-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; margin-top: 40px; }
.lp-how-card { background: var(--white); box-shadow: var(--lp-shadow-card-sm); padding: 28px; }
.lp-how-card .lp-how-icon { display: flex; align-items: center; gap: 10px; color: var(--primary); }
.lp-how-card h3 { margin: 18px 0 10px; font-size: 19px; font-weight: var(--weight-semibold); letter-spacing: -0.01em; }
.lp-how-card p { font-size: 15px; line-height: 1.6; color: var(--text-secondary); }

/* ---- Competitors section -------------------------------------------------- */
.lp-comp .lp-inner { padding-top: 88px; padding-bottom: 88px; display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); gap: 64px; align-items: center; }
.lp-comp-copy p { font-size: 16px; line-height: 1.65; color: var(--text-secondary); margin-bottom: 16px; }
.lp-arrow-link { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 500; }
.lp-comp-card-head { padding: 22px 24px 18px; border-bottom: 1px solid var(--slate-100); }
.lp-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.lp-table th {
  padding: 10px 16px; text-align: left; font-size: 12px; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-secondary);
  background: var(--surface-inset); border-bottom: 1px solid var(--border-subtle); white-space: nowrap;
}
.lp-table td { height: 40px; padding: 0 16px; border-bottom: 1px solid var(--slate-100); white-space: nowrap; }
.lp-table td:first-child { white-space: normal; }
.lp-table .num { text-align: right; }
.lp-table tfoot td { height: auto; padding: 10px 16px; font-size: 12px; color: var(--text-secondary); border-bottom: 0; background: var(--surface-inset); }
.lp-gap-up { color: var(--danger); font-weight: 500; }
.lp-gap-down { color: var(--success); font-weight: 500; }

/* ---- Demand / heatmap section --------------------------------------------- */
.lp-demand { background: var(--teal-50); }
.lp-demand .lp-inner { padding-top: 88px; padding-bottom: 88px; display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 72px; align-items: center; }
.lp-heat-card { padding: 24px; }
.lp-heat-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.lp-heat-dow { font-size: 11px; color: var(--text-secondary); text-align: center; padding-bottom: 4px; }
.lp-heat-cell { position: relative; aspect-ratio: 1.35; min-height: 40px; padding: 5px 7px; font-size: 12px; }
.lp-heat-cell .d { position: absolute; top: 4px; left: 7px; font-size: 10px; opacity: 0.75; }
.lp-heat-cell .v { position: absolute; right: 7px; bottom: 4px; font-weight: 500; }
.lp-heat-cell.h1 { background: var(--heat-1); color: var(--text-primary); }
.lp-heat-cell.h2 { background: var(--heat-2); color: var(--text-primary); }
.lp-heat-cell.h3 { background: var(--heat-3); color: var(--text-primary); }
.lp-heat-cell.h4 { background: var(--heat-4); color: var(--white); }
.lp-heat-cell.h5 { background: var(--heat-5); color: var(--white); }
.lp-heat-cell.sel { outline: 2px solid var(--slate-900); outline-offset: 1px; }
.lp-heat-cell .ev { position: absolute; top: 4px; right: 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--event); }
.lp-heat-cell.h4 .ev, .lp-heat-cell.h5 .ev { background: #F1E4C6; }
.lp-heat-legend { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 11px; color: var(--text-secondary); }
.lp-heat-legend i { width: 16px; height: 10px; display: inline-block; }
.lp-event-rows { display: flex; flex-direction: column; gap: 12px; }
.lp-event-row { display: flex; align-items: baseline; gap: 14px; background: var(--white); padding: 16px 18px; }
.lp-event-dates { font-size: 14px; font-weight: 600; color: var(--primary); min-width: 88px; }
.lp-event-name { font-size: 15px; }
.lp-event-flag { margin-left: auto; color: var(--event); display: flex; }
.lp-event-tag { margin-left: auto; font-size: 12px; color: var(--text-secondary); }

/* ---- Forecast section ----------------------------------------------------- */
.lp-forecast .lp-inner { padding-top: 88px; padding-bottom: 88px; }
.lp-forecast-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 24px; align-items: start; margin-top: 40px; }
.lp-panel { padding: 24px; }
.lp-rec { display: flex; flex-direction: column; gap: 18px; }
.lp-rec-title-row { display: flex; align-items: center; gap: 10px; }
.lp-rec-title { font-size: 22px; font-weight: var(--weight-semibold); letter-spacing: -0.02em; line-height: 1.2; }
.lp-rec-impact { margin-top: 10px; display: flex; align-items: baseline; gap: 8px; }
.lp-rec-impact b { font-size: 18px; font-weight: var(--weight-semibold); color: var(--success); }
.lp-rec-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 20px; padding: 18px 0; border-top: 1px solid var(--slate-100); border-bottom: 1px solid var(--slate-100); }
.lp-rec-metric-label { font-size: 13px; color: var(--text-secondary); }
.lp-rec-metric-value { margin-top: 3px; font-size: 16px; font-weight: var(--weight-semibold); }
.lp-rec-why { font-size: 15px; line-height: 1.6; color: var(--text-secondary); }
.lp-confidence { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.lp-confidence .bars { display: flex; gap: 3px; }
.lp-confidence .bars span { width: 16px; height: 6px; background: var(--primary); }
.lp-rec .lp-btn { height: 48px; padding: 0 28px; }

/* ---- FAQ ------------------------------------------------------------------ */
.lp-faq { background: var(--surface-base); border-top: 1px solid var(--slate-100); }
.lp-faq .lp-inner { max-width: 900px; padding-top: 88px; padding-bottom: 88px; }
.lp-faq h2 { margin-bottom: 32px; }
.lp-faq-list { display: flex; flex-direction: column; gap: 12px; }
.lp-faq-list details { background: var(--white); box-shadow: var(--lp-shadow-faq); padding: 20px 24px; }
.lp-faq-list summary { list-style: none; cursor: pointer; font-size: 17px; font-weight: var(--weight-semibold); letter-spacing: -0.01em; }
.lp-faq-list summary::-webkit-details-marker { display: none; }
.lp-faq-list details p { margin: 12px 0 0; font-size: 15px; line-height: 1.65; color: var(--text-secondary); }

/* ---- Bottom CTA ----------------------------------------------------------- */
.lp-cta { background: var(--teal-900); }
.lp-cta .lp-inner { padding-top: 80px; padding-bottom: 80px; display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 64px; align-items: center; }
.lp-cta h2 { font-size: 34px; font-weight: var(--weight-semibold); letter-spacing: -0.03em; line-height: 1.12; color: var(--white); margin-bottom: 14px; }
.lp-cta p { font-size: 16px; line-height: 1.65; color: var(--teal-100); }
.lp-cta .lp-btn { background: var(--white); color: var(--teal-900); }
.lp-cta .lp-btn:hover { background: var(--teal-50); }

/* ---- Footer --------------------------------------------------------------- */
.lp-footer { background: var(--white); }
.lp-footer .lp-inner { padding: 32px 40px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; font-size: 14px; color: var(--text-secondary); }
.lp-footer .lp-wordmark { font-size: 17px; }
.lp-footer .push { margin-left: auto; font-size: 13px; }

/* ---- Responsive ----------------------------------------------------------- */
@media (max-width: 1080px) {
  .lp-hero .lp-inner, .lp-comp .lp-inner, .lp-demand .lp-inner,
  .lp-cta .lp-inner { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .lp-forecast-grid { grid-template-columns: minmax(0, 1fr); }
  .lp-hero h1 { font-size: 44px; }
}
@media (max-width: 720px) {
  .lp .lp-inner { padding-left: 20px; padding-right: 20px; }
  .lp-header .lp-inner { gap: 16px; height: auto; padding-top: 10px; padding-bottom: 10px; flex-wrap: wrap; }
  .lp-nav { display: none; }
  .lp-hero .lp-inner { padding-top: 48px; padding-bottom: 56px; }
  .lp-hero h1 { font-size: 36px; }
  .lp-section-title { font-size: 28px; }
  .lp-connect-card { padding: 24px; }
}

/* New Places widget (gmp-place-autocomplete web component) replaces the plain
   input at runtime when the key requires the new API. */
.lp-search-row gmp-place-autocomplete {
  flex: 1;
  min-width: 0;
  font-family: var(--lp-font);
}
.lp-search-row.has-pac .lp-search-icon { display: none; }

/* Self-hosted verification code (design: ConnectFormFresh captcha row). */
.lp-captcha-row { display: flex; gap: 8px; align-items: stretch; }
.lp-captcha-img {
  height: 48px; width: 140px; flex: none;
  border: 1px solid var(--border-strong);
  background: var(--surface-inset);
  user-select: none;
}
.lp-captcha-refresh {
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; flex: none; cursor: pointer;
  background: var(--white); border: 1px solid var(--border-strong);
  border-radius: 0; color: var(--text-secondary);
}
.lp-captcha-refresh:hover { background: var(--surface-inset); color: var(--text-primary); }
.lp-form input.lp-captcha-input {
  flex: 1; min-width: 90px; height: 48px; padding: 0 12px; font-size: 15px;
}