/* pages/business.css: For business (/business, the Database Intelligence Agent, /business/websites) and the home
   "For business" panels (BRAND.md 10). */

/* Navy field: the enterprise panel and "Safe by design". On the dark theme it lifts to the raised navy. */
.biz-panel-navy,
.biz-field-navy {
  --field-bg: var(--navy);
  --field-text: #FFFFFF;
  --field-text-2: #C9D2F0;
  --field-marker: var(--yellow);
  background: var(--field-bg);
  color: var(--field-text);
}
[data-theme="dark"] .biz-panel-navy,
[data-theme="dark"] .biz-field-navy { --field-bg: var(--raised); --field-text: var(--text); --field-text-2: var(--text-2); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .biz-panel-navy,
  :root:not([data-theme="light"]) .biz-field-navy { --field-bg: var(--raised); --field-text: var(--text); --field-text-2: var(--text-2); }
}

/* Signal-blue field: "Where the savings come from". White on blue by day, navy on the light blue at night. */
.biz-field-blue {
  --field-text: var(--on-accent);
  --field-text-2: var(--on-accent);
  --field-marker: var(--on-accent);
  background: var(--accent-fill);
  color: var(--field-text);
}

.button-on-navy { background: #FFFFFF; color: var(--navy); }
.button-on-navy:hover { background: var(--blue-tint); color: var(--navy); }
[data-theme="dark"] .button-on-navy { background: var(--accent-fill); color: var(--on-accent); }
[data-theme="dark"] .button-on-navy:hover { background: var(--link-press); color: var(--on-accent); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .button-on-navy { background: var(--accent-fill); color: var(--on-accent); }
  :root:not([data-theme="light"]) .button-on-navy:hover { background: var(--link-press); color: var(--on-accent); }
}

/* Home and /business panels */
.biz-panels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-5);
  align-items: stretch;
}

.biz-panel {
  display: grid;
  align-content: space-between;
  gap: var(--s-6);
  padding: var(--s-7) var(--s-6) var(--s-6);
  border-radius: var(--r-xl);
}
.biz-panel-copy { display: flex; flex-direction: column; align-items: flex-start; }
.biz-panel .kicker { color: var(--field-text-2, var(--text-2)); }
.biz-panel-title { font-family: var(--font-display); font-weight: 700; font-size: var(--h3-size); line-height: var(--h3-lh); max-width: 16em; }
.biz-panel-body { margin-top: var(--s-4); color: var(--field-text-2, var(--text-2)); }
.biz-panel .button { margin-top: var(--s-6); }

.biz-points {
  display: grid;
  gap: var(--s-2);
  margin-top: var(--s-5);
  padding: 0;
  list-style: none;
  font-weight: 600;
}
.biz-points li,
.lead-in-list li { position: relative; padding-left: var(--s-5); }
.biz-points li::before,
.lead-in-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--field-marker, var(--link));
}

.biz-panel-glyph { width: 112px; height: 112px; color: #6F8CFF; }
.biz-feature .biz-panel-glyph { justify-self: center; width: 200px; height: 200px; }

/* The website panel: a mist field with the copy on a white inset, the clip on the mist around it. */
.biz-panel-web { background: var(--surface); padding: var(--s-5); align-content: start; }
.biz-panel-web .biz-panel-copy { padding: var(--s-6); border-radius: var(--r-lg); background: var(--canvas); }

.biz-panel-media figcaption,
.biz-hero-media figcaption { margin-top: var(--s-3); font-size: var(--small-size); line-height: var(--small-lh); color: var(--field-text-2, var(--text-2)); }

.biz-feature { margin-bottom: var(--s-8); }
.biz-feature .biz-panel { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; }
.biz-block-link { margin-top: var(--s-4); }

/* Page hero: kicker, title, lead and buttons on the left; the product's still (or its glyph) on the right. */
.biz-hero {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--s-7);
  align-items: center;
  padding-block: var(--s-8) var(--s-7);
}
.biz-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.02;
  letter-spacing: var(--display-track);
  max-width: 12em;
}
.biz-lead { margin-top: var(--s-5); max-width: 32em; }
.biz-status { margin-top: var(--s-5); }
.biz-hero-buttons { margin-top: var(--s-6); }
.biz-hero-field {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  padding: 20%;
  border-radius: var(--r-xl);
  background: var(--accent-fill);
  color: var(--on-accent);
}

/* Sections */
.biz-section { padding-block: var(--s-8) var(--s-4); }
.biz-section > h2 { margin-bottom: var(--s-6); max-width: 18em; }
.biz-section-body { font-size: var(--lead-size); line-height: var(--lead-lh); color: var(--text-2); }

/* "What it does": two columns, bold lead-ins, no cards, icons or numbers. */
.lead-in-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-6) var(--s-8);
  padding: 0;
  list-style: none;
  color: var(--field-text-2, var(--text-2));
}
.lead-in-list strong { color: var(--field-text, var(--text)); font-weight: 800; }

.biz-field {
  margin-top: var(--s-8);
  padding: var(--s-8) var(--s-7);
  border-radius: var(--r-xl);
}
.biz-field > h2 { margin-bottom: var(--s-6); }

/* "Works with what you already run": name and one line, hairline separators. */
.integration-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--s-8);
}
.integration-list > div {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: var(--s-4);
  padding-block: var(--s-4);
  border-top: 1px solid var(--rule);
}
.integration-list dt { font-weight: 800; }
.integration-list dd { margin: 0; color: var(--text-2); }

/* The tour: the page's bold moment. */
.demo-label {
  display: inline-flex;
  margin-bottom: var(--s-5);
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-pill);
  background: var(--tint);
  color: var(--text);
  font-weight: 600;
  font-size: var(--small-size);
}
.tour-video-title { margin-bottom: var(--s-4); }
.tour-video .video-frame { margin-bottom: var(--s-4); }
.tour-text { color: var(--text-2); }

.tour-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-6) var(--s-5);
  margin-top: var(--s-7);
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.tour-step { counter-increment: step; }
.tour-step figcaption { margin-top: var(--s-3); color: var(--text-2); }
.tour-step figcaption::before {
  content: counter(step);
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-right: var(--s-2);
  border-radius: 50%;
  background: var(--accent-fill);
  color: var(--on-accent);
  font-weight: 800;
  font-size: var(--small-size);
}

/* The call to action with its contact line */
.cta-band-body { align-items: flex-end; }
.cta-body { margin-top: var(--s-3); color: var(--text-2); }
.cta-body a { color: var(--text); }

/* /business/websites */
.get-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-7); }
.screen-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-6);
  padding: var(--s-6);
  border-radius: var(--r-xl);
  background: var(--surface);
  list-style: none;
}
.screen-grid figcaption { margin-top: var(--s-3); color: var(--text-2); }

.project-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-5);
  padding: 0;
  list-style: none;
  counter-reset: project;
}
.project-steps li {
  counter-increment: project;
  padding-top: var(--s-4);
  border-top: 3px solid var(--link);
  font-weight: 600;
}
.project-steps li::before {
  content: counter(project);
  display: block;
  margin-bottom: var(--s-2);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--h3-size);
  color: var(--link);
}

@media (max-width: 900px) {
  .biz-panels { grid-template-columns: minmax(0, 1fr); }
  .biz-panel { padding: var(--s-6) var(--s-5) var(--s-5); }
  .biz-panel-web { padding: var(--s-4); }
  .biz-panel-web .biz-panel-copy { padding: var(--s-5); }
  .biz-feature .biz-panel { grid-template-columns: minmax(0, 1fr); }
  .biz-hero { grid-template-columns: minmax(0, 1fr); padding-block: var(--s-6) var(--s-5); gap: var(--s-6); }
  .biz-hero-field { aspect-ratio: auto; height: 180px; padding: var(--s-5); }
  .biz-hero-field .glyph { width: 140px; }
  .lead-in-list, .integration-list, .get-list, .screen-grid, .tour-steps { grid-template-columns: minmax(0, 1fr); }
  .project-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .biz-field { padding: var(--s-7) var(--s-5); }
  .integration-list > div { grid-template-columns: minmax(0, 1fr); gap: var(--s-1); }
  .screen-grid { padding: var(--s-4); }
}

/* Clips: the day and night pair on a mist field (BRAND.md 10: the websites page's bold moment). */
.clip-field {
  display: grid;
  gap: var(--s-6);
  margin-top: var(--s-6);
  padding: var(--s-6);
  border-radius: var(--r-xl);
  background: var(--surface);
}
.clip-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }
.clip-phones { display: grid; grid-template-columns: repeat(2, minmax(0, 300px)); justify-content: center; gap: var(--s-7); }
.biz-panel-web .clip { padding: 0 var(--s-2) var(--s-2); }
.biz-panel .clip-phone .phone-frame { max-width: 260px; margin-inline: auto; }
.biz-panel .clip-phone figcaption { text-align: center; }
.biz-block-media { margin-bottom: var(--s-8); }

@media (max-width: 900px) {
  .clip-field { padding: var(--s-4); }
  .clip-pair { grid-template-columns: minmax(0, 1fr); }
  .clip-phones { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
  .clip-phones .phone-frame { border-width: 6px; border-radius: 28px; }
  .clip-phones .phone-frame video { border-radius: 22px; }
}

.screen-grid .phone-frame { max-width: 260px; }
.screen-grid li { display: flex; justify-content: center; }
.screen-grid figure { width: 100%; }
.screen-grid li:has(.phone-frame) figure { width: auto; }
@media (max-width: 720px) {
  .demo-label { border-radius: var(--r-md); }
}