/* =========================================================
   Hero product demo: an HTML rebuild of CarbonAI Chat, animated
   with GSAP (see carbonAI/js/hero-chat.js). The app is laid out
   at a fixed "virtual" size and scaled to fit, like a screenshot,
   so it looks identical at every width.
   ========================================================= */

/* ---------- Hero layout: centered copy above a large product view ---------- */
.hero--demo,
.hero--demo .hero-inner { min-height: 0; }
.hero--demo .hero-inner {
  display: block;
  padding-top: clamp(20px, 3.5vh, 44px);
  padding-bottom: clamp(40px, 6vh, 72px);
}
.hero--demo .hero-copy {
  max-width: 1040px; /* room for the four proof points on one line */
  margin: 0 auto;
  text-align: center;
}
.hero--demo .hero-copy h1.hero-headline {
  font-size: clamp(30px, 3.4vw, 50px);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--ink, #111827);
}
.hero-headline-accent { color: #e7a33c; } /* brand ochre accent */
.hero--demo .hero-actions { margin-top: clamp(16px, 2.4vh, 24px); }

.hero-sub {
  /* em-based so it scales with the font: two balanced lines wherever the
     screen is wide enough (phones wrap more) */
  max-width: min(100%, 38em);
  text-wrap: balance;
  margin: clamp(10px, 1.5vh, 16px) auto 0;
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.5;
  color: var(--body, #374151);
}


/* Compact rounded-rectangle buttons, side by side */
.hero-actions--row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.hero-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 22px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color 0.15s ease-out, border-color 0.15s ease-out, transform 0.15s ease-out;
}
.hero-btn:active { transform: scale(0.97); }
.hero-btn:focus-visible { outline: 2px solid var(--teal, #397f86); outline-offset: 3px; }
.hero-btn--primary {
  background: var(--teal, #397f86);
  border: 1px solid var(--teal, #397f86);
  color: #fff;
}
.hero-btn--primary:hover { background: var(--teal-dark, #2f696f); border-color: var(--teal-dark, #2f696f); }

/* ---------- Demo: frame + scaled app ---------- */
.hc-demo {
  position: relative;
  /* break out of the content column so the product view can be large */
  /* side margins 1.5x the old ones (old: max((100vw - 1440px) / 2, 24px)) */
  /* side margins: 36px up to 1440px wide, growing to 360px at 1920, then fixed;
     the window itself caps at 1500px on very wide screens */
  --hc-m: min(360px, max(36px, (100vw - 1440px) * 0.75));
  --hc-w: min(1500px, calc(100vw - 2 * var(--hc-m)));
  width: var(--hc-w);
  margin: clamp(22px, 3.5vh, 36px) 0 0 calc(50% - var(--hc-w) / 2);
}
@media (max-width: 820px) {
  .hc-demo { --hc-w: calc(100vw - 48px); }
}
/* scaled from JS on scroll (GSAP ScrollTrigger), grows toward full size */
.hc-scale {
  isolation: isolate; /* keeps the network backdrop (z-index -1) behind the window only */
  position: relative;
  transform-origin: 50% 0;
  will-change: transform;
}
/* Thick CarbonAI-teal frame. The WebGL canvas paints a slowly drifting teal
   texture inside it; the solid teal is the fallback. */
.hc-frame {
  position: relative;
  padding: clamp(10px, 1.4vw, 22px);
  border-radius: clamp(20px, 2.2vw, 34px);
  background: #397f86;
  overflow: hidden;
  isolation: isolate;
  box-shadow:
    0 1px 2px rgba(8, 26, 28, 0.06),
    0 8px 24px rgba(8, 26, 28, 0.12),
    0 32px 80px rgba(8, 26, 28, 0.26);
}
.hc-frame-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  display: block;
}
.hc-stage {
  position: relative;
  width: 100%;
  /* height is set from JS to the scaled app height; this is the pre-JS guess */
  aspect-ratio: 1200 / 720;
}
.hc-app {
  --hc-teal: #397f86;
  --hc-teal-ink: #2f6f75;
  --hc-ink: #1f2a2c;
  --hc-body: #374151;
  --hc-muted: #6b7680;
  --hc-line: #e3ebec;
  position: absolute;
  top: 0;
  left: 0;
  width: 1200px;
  height: 720px;
  transform-origin: 0 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 2px 10px rgba(8, 26, 28, 0.18);
  font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Roboto, Arial, sans-serif;
  font-size: 13px;
  line-height: 1.45;
  color: var(--hc-ink);
  text-align: left;
  user-select: none;
}
.hc-app.is-compact { width: 640px; }
.hc-app.is-phone { width: 400px; }
.hc-app svg { display: block; flex: none; }

.hc-body {
  flex: 1;
  display: flex;
  min-height: 0;
}

/* ---------- Sidebar: modules on top, chat history below ---------- */
.hc-side {
  flex: none;
  width: 232px;
  display: flex;
  flex-direction: column;
  padding: 14px 10px 10px;
  border-right: 1px solid var(--hc-line);
  background: #fff;
}
.is-compact .hc-side { display: none; }
.hc-logo {
  width: 112px;
  height: auto;
  margin: 0 0 12px 6px;
  align-self: flex-start;
}
.hc-nav { display: flex; flex-direction: column; gap: 1px; }
.hc-nav-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 12.5px;
  color: var(--hc-body);
  white-space: nowrap;
}
.hc-nav-item svg { width: 14px; height: 14px; color: #5b6770; }
.hc-nav-item.is-active {
  background: rgba(57, 127, 134, 0.1);
  color: var(--hc-teal-ink);
  font-weight: 600;
}
.hc-nav-item.is-active svg { color: var(--hc-teal); }
.hc-newchat {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0 2px;
  padding: 10px 8px 6px;
  border-top: 1px solid var(--hc-line);
  font-size: 12.5px;
  color: var(--hc-body);
}
.hc-newchat svg { width: 14px; height: 14px; color: var(--hc-teal); }
.hc-recents-title {
  margin: 6px 8px 2px;
  font-size: 12px;
  font-weight: 600;
  color: var(--hc-teal);
}
.hc-recents {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent);
  mask-image: linear-gradient(to bottom, #000 80%, transparent);
}
.hc-group {
  margin: 7px 8px 1px;
  font-size: 10.5px;
  font-weight: 600;
  color: #5f9aa0;
}
.hc-recent {
  padding: 3px 8px;
  border-radius: 5px;
  font-size: 12px;
  color: var(--hc-body);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hc-recent.is-active {
  background: rgba(31, 42, 44, 0.06);
  color: var(--hc-ink);
  font-weight: 600;
}
.hc-user {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 8px 2px;
  border-top: 1px solid var(--hc-line);
  font-size: 12.5px;
  color: var(--hc-ink);
}
.hc-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--hc-teal);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
}

/* ---------- Main chat area ---------- */
.hc-main {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: #f7fafa;
}
.hc-head {
  flex: none;
  height: 40px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 18px;
}
.hc-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--hc-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hc-title-dots { color: var(--hc-muted); letter-spacing: 1px; }
.hc-head-icons { margin-left: auto; display: flex; gap: 12px; color: var(--hc-teal); }
.hc-head-icons svg { width: 15px; height: 15px; }

.hc-scroll {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.hc-thread {
  padding: 4px 48px 28px;
  will-change: transform;
}
.is-compact .hc-thread { padding: 4px 20px 24px; }
.hc-col { max-width: 700px; margin: 0 auto; }

/* greeting screen */
.hc-greet {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 40px 34px;
}
.hc-greet[hidden] { display: none; }
/* chat-robot.png is cut from a 4K capture of the platform: shown at ~half its
   pixel width so it stays sharp on high-density screens */
.hc-greet-bot { width: 84px; height: auto; margin-bottom: 6px; }
.hc-greet h3 {
  margin: 0 0 14px;
  font-size: 22px;
  font-weight: 600;
  color: var(--hc-teal);
  letter-spacing: -0.2px;
  text-align: center;
}
.hc-input {
  width: 100%;
  max-width: 560px;
  min-height: 80px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 11px 13px 9px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid #dde7e8;
  box-shadow: 0 2px 8px rgba(8, 26, 28, 0.05);
}
.hc-input-text { font-size: 13px; color: var(--hc-ink); min-height: 19px; }
.hc-input-text:empty::before { content: attr(data-placeholder); color: #8a959c; }
.hc-input-text.is-typing::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 15px;
  margin-left: 1px;
  vertical-align: -2px;
  background: var(--hc-ink);
  animation: hc-caret 1s steps(1) infinite;
}
.hc-input-row { display: flex; justify-content: space-between; align-items: center; color: #8fb6ba; }
.hc-input-row svg { width: 15px; height: 15px; }
.hc-send { color: #9cc2c6; transition: color 0.2s; }
.hc-send.is-ready { color: var(--hc-teal); }
.hc-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  max-width: 560px;
  margin-top: 10px;
}
.hc-chip {
  padding: 3px 10px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #dde7e8;
  font-size: 11px;
  color: var(--hc-body);
  white-space: nowrap;
}
.is-compact .hc-chip:nth-child(n + 5) { display: none; }

/* bottom composer (conversation mode) */
.hc-composer {
  flex: none;
  margin: 0 48px 14px;
  padding: 10px 13px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid #dde7e8;
  box-shadow: 0 2px 8px rgba(8, 26, 28, 0.05);
}
.is-compact .hc-composer { margin: 0 20px 12px; }
.hc-composer[hidden] { display: none; }
.hc-composer .hc-input-text {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hc-composer .hc-input-text.is-typing { text-overflow: clip; }
.hc-composer svg { width: 15px; height: 15px; color: #8fb6ba; }

/* ---------- Conversation ---------- */
.hc-day {
  margin: 8px 0 6px;
  text-align: right;
  font-size: 11px;
  color: var(--hc-teal);
}
.hc-user-msg {
  margin: 0 0 12px auto;
  width: fit-content;
  max-width: 82%;
  padding: 8px 13px;
  border-radius: 10px;
  background: #3f7f86;
  color: #fff;
  font-size: 13px;
  box-shadow: 0 2px 6px rgba(8, 26, 28, 0.12);
}
.hc-think {
  margin: 0 0 12px;
  padding: 9px 12px 6px;
  border-radius: 8px;
  background: linear-gradient(100deg, #eef4f5, #e5eef0);
  border: 1px solid #d6e3e5;
  overflow: hidden;
}
.hc-think-head {
  display: flex;
  align-items: center;
  gap: 7px;
  padding-bottom: 3px;
  font-size: 12px;
  font-style: italic;
  font-weight: 600;
  color: var(--hc-teal);
}
.hc-think-head img { width: 22px; height: auto; }
.hc-think-head svg { width: 11px; height: 11px; color: #8aa9ad; transition: transform 0.3s; }
.hc-think.is-done .hc-think-head svg { transform: rotate(-90deg); }
.hc-think-bot.is-pulsing { animation: hc-pulse 1.4s ease-in-out infinite; }
.hc-think-lines { overflow: hidden; }
.hc-think-line {
  margin: 4px 0;
  font-size: 12px;
  color: var(--hc-body);
}
.hc-tool {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 5px 0;
  font-size: 11.5px;
  color: var(--hc-muted);
  white-space: nowrap;
}
.hc-tool svg { width: 11px; height: 11px; color: #4b5860; }
.hc-tool b { color: var(--hc-ink); font-weight: 600; }
.hc-tool .q { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.hc-answer h4 {
  margin: 14px 0 6px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--hc-ink);
}
.hc-answer h4:first-child { margin-top: 4px; }
.hc-answer h5 {
  margin: 10px 0 6px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--hc-ink);
}
.hc-answer p { margin: 0 0 8px; font-size: 13px; color: var(--hc-ink); }
.hc-answer ul { margin: 0 0 8px; padding-left: 20px; font-size: 13px; }
.hc-answer li { margin: 2px 0; }
.hc-answer strong { font-weight: 600; }
.hc-answer hr { border: 0; border-top: 1px solid #dfe7e8; margin: 12px 0 4px; }
.hc-answer .w { display: inline; }

.hc-table {
  width: 100%;
  margin: 2px 0 10px;
  border-collapse: collapse;
  font-size: 11.5px;
  line-height: 1.35;
}
.hc-table th {
  padding: 5px 8px 5px 0;
  font-weight: 600;
  text-align: left;
  vertical-align: bottom;
  color: var(--hc-ink);
  border-bottom: 1px solid #d5dfe0;
}
.hc-table td {
  padding: 5px 8px 5px 0;
  vertical-align: top;
  border-bottom: 1px solid #e8eeee;
}
.hc-table td.r, .hc-table th.r { text-align: right; padding-right: 0; }
.hc-table td.c, .hc-table th.c { text-align: center; }
.hc-table td.b { font-weight: 600; }
.hc-table .nw { white-space: nowrap; }
.is-compact .hc-table .hide-compact { display: none; }
/* citations */
.hc-cites { margin: 6px 0 4px; }
.hc-cites-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--hc-teal-ink);
}
.hc-cites-bar .stack { display: flex; }
.hc-cites-bar .stack span { margin-left: -4px; }
.hc-cites-bar .stack span:first-child { margin-left: 0; }
.hc-cites-bar svg { width: 12px; height: 12px; }
.hc-cites-actions { margin-left: auto; display: flex; gap: 9px; color: #6f7b83; }
.hc-mono {
  width: 16px;
  height: 16px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 8.5px;
  font-weight: 700;
  color: #fff;
  border: 1.5px solid #f7fafa;
}
.hc-cite {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 5px;
  padding: 5px 10px;
  border-radius: 6px;
  background: #fff;
  border: 1px solid #e3eaeb;
}
.hc-cite .hc-mono { border: 0; }
.hc-cite-text { min-width: 0; }
.hc-cite-title {
  display: block;
  font-size: 12px;
  color: var(--hc-teal-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hc-cite-url {
  display: block;
  font-size: 10px;
  color: #8a959c;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- Feature bubble (marketing annotation, outside the app) ----------
   Title + context line in the page's own type (Roboto, ink headings, body
   text color). Eye-catching through its springy entrance and one soft teal
   ring pulse, not through size or decoration. */
.hc-feature {
  display: block;
  position: absolute;
  z-index: 3;
  /* sits out in the side margin where there is room, overlapping the frame edge */
  right: calc(-1 * clamp(28px, (100vw - var(--hc-w)) / 2 - 32px, 230px));
  bottom: 18%;
  width: 330px;
  padding: 18px 22px 20px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(57, 127, 134, 0.22);
  box-shadow:
    0 2px 6px rgba(8, 26, 28, 0.06),
    0 16px 40px rgba(8, 26, 28, 0.18);
  font-family: inherit; /* the page font, never the app mock's */
  color: var(--ink, #111827);
  text-align: left;
  opacity: 0;
  pointer-events: none;
}
/* one soft teal ring that expands as the bubble lands */
.hc-feature::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(57, 127, 134, 0.45);
  pointer-events: none;
}
.hc-feature.is-new::after { animation: hc-ring 1.1s ease-out 0.25s; }
.hc-feature strong {
  display: block;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink, #111827);
}
.hc-feature span {
  display: block;
  margin-top: 6px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--body, #374151);
}
@keyframes hc-ring {
  0% { box-shadow: 0 0 0 0 rgba(57, 127, 134, 0.45); }
  100% { box-shadow: 0 0 0 14px rgba(57, 127, 134, 0); }
}
/* Phones and small tablets: the bubble sits under the window, in the page flow,
   with its space reserved so nothing jumps when it changes */
@media (max-width: 820px) {
  .hc-feature {
    display: block; /* it is a <span>; block so padding, margin and background apply */
    position: relative;
    right: auto;
    bottom: auto;
    width: auto;
    min-height: 104px;
    margin: 14px 0 0;
    padding: 14px 16px 16px;
  }
  .hc-feature strong { font-size: 16px; }
  .hc-feature span { font-size: 15px; }
}

/* static mode (reduced motion or no GSAP): let visitors scroll the answer */
.hc-demo.is-static .hc-scroll { overflow-y: auto; }

@keyframes hc-caret { 50% { opacity: 0; } }
@keyframes hc-pulse { 50% { transform: scale(1.12); } }

@media (prefers-reduced-motion: reduce) {
  .hc-input-text.is-typing::after, .hc-think-bot.is-pulsing { animation: none; }
}

/* ---------- Logo strip (marks and track: brands.css) ----------
   Sits at the top of the "Too many sources" section, in that section's grey,
   well clear of the hero so it never competes with the product demo. */
.home-brands {
  background: var(--bg-alt, #f4f3f6);
  padding-top: clamp(56px, 8vh, 88px); /* separation from the hero */
}
.home-brands .pr-brands-marquee { padding: 3px 0; } /* band just taller than the 34px logos */
.home-brands + .problem { padding-top: clamp(40px, 5vh, 56px); } /* strip sits close to the heading */

/* ---------- Sidebar hover tips (see hero-chat.js) ----------
   Same look as the feature bubbles: white card, ink title, body text, page font.
   Normally sits outside the window in the left margin, pointing at the item. */
.hc-nav-item[data-tip] { cursor: default; transition: background-color 0.15s; }
.hc-nav-item[data-tip]:hover { background: rgba(57, 127, 134, 0.08); }
.hc-tip {
  position: fixed;
  z-index: 60;
  width: 270px;
  padding: 13px 17px 15px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(57, 127, 134, 0.22);
  box-shadow:
    0 2px 6px rgba(8, 26, 28, 0.06),
    0 16px 40px rgba(8, 26, 28, 0.18);
  font-family: inherit; /* the page font */
  color: var(--ink, #111827);
  text-align: left;
  transform: translate(-6px, -50%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.hc-tip strong {
  display: block;
  font-size: 15px; /* smaller than the cycling bubbles (18/16) to set them apart */
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink, #111827);
}
.hc-tip span {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--body, #374151);
}
/* small pointer toward the element: on the right edge by default, on the left
   edge with .point-left; --tip-arrow keeps it aimed when the card is clamped */
.hc-tip::before {
  content: "";
  position: absolute;
  right: -7px;
  top: var(--tip-arrow, 50%);
  width: 12px;
  height: 12px;
  background: #fff;
  border-top: 1px solid rgba(57, 127, 134, 0.22);
  border-right: 1px solid rgba(57, 127, 134, 0.22);
  transform: translateY(-50%) rotate(45deg);
  border-radius: 2px;
}
.hc-tip.point-left::before { right: auto; left: -7px; transform: translateY(-50%) rotate(-135deg); }
.hc-tip.point-left { transform: translate(6px, -50%); }
/* below / above the element (narrow right margin): pointer on the top / bottom edge */
.hc-tip.point-up, .hc-tip.point-down { transform: translate(0, 6px); }
.hc-tip.point-down { transform: translate(0, -6px); }
.hc-tip.point-up::before, .hc-tip.point-down::before {
  right: auto;
  left: var(--tip-arrow-x, 50%);
  top: -7px;
  transform: translateX(-50%) rotate(-45deg);
}
.hc-tip.point-down::before { top: auto; bottom: -7px; transform: translateX(-50%) rotate(135deg); }
.hc-tip.is-visible { opacity: 1; transform: translate(0, -50%); }
.hc-tip.point-up.is-visible, .hc-tip.point-down.is-visible { transform: none; }

/* Hotspots: a small pulsing CarbonAI-ochre dot marks features you can hover */
[data-tip] { cursor: default; }
.hc-hot { position: relative; display: inline-flex; align-items: center; }
.hc-hot::after {
  content: "";
  position: absolute;
  top: -4px;
  right: -9px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #e7a33c; /* brand ochre accent */
  box-shadow: 0 0 0 0 rgba(231, 163, 60, 0.6);
  animation: hc-hot 2.2s ease-out infinite;
  pointer-events: none;
}
.hc-head-icons .hc-hot::after { top: -5px; right: -6px; }
[data-tip]:hover .hc-hot::after, .hc-hot[data-tip]:hover::after { animation: none; box-shadow: 0 0 0 3px rgba(231, 163, 60, 0.3); }
@keyframes hc-hot {
  0% { box-shadow: 0 0 0 0 rgba(231, 163, 60, 0.6); }
  70%, 100% { box-shadow: 0 0 0 8px rgba(231, 163, 60, 0); }
}
@media (prefers-reduced-motion: reduce) { .hc-hot::after { animation: none; } }
/* Touch screens: a tapped item shows its card as a bottom sheet */
.hc-tip.is-sheet {
  left: 16px;
  right: 16px;
  bottom: 16px;
  top: auto;
  width: auto;
  max-width: 520px;
  margin: 0 auto;
  transform: translateY(16px);
}
.hc-tip.is-sheet::before { display: none; }
.hc-tip.is-sheet.is-visible { transform: none; }

/* Chat history: heading + list form one hover area for one tip */
.hc-history {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Bigger hover targets for the small icons (padding + equal negative margin,
   so the icons don't move); dots repositioned for the padded boxes */
.hc-head-icons { gap: 0; margin-right: -9px; }
.hc-head-icons .hc-hot { padding: 10px 9px; margin: -10px 0; border-radius: 8px; }
.hc-head-icons .hc-hot:hover { background: rgba(57, 127, 134, 0.08); }
.hc-head-icons .hc-hot::after { top: 5px; right: 3px; }
.hc-input-row .hc-hot, .hc-composer .hc-hot { padding: 7px; margin: -7px; border-radius: 6px; }
.hc-input-row .hc-hot:hover, .hc-composer .hc-hot:hover { background: rgba(57, 127, 134, 0.08); }
.hc-input-row .hc-hot::after, .hc-composer .hc-hot::after { top: 2px; right: 1px; }

/* ---------- Phone layout of the app mock ---------- */
.hc-menu { display: none; }
.is-compact .hc-menu {
  display: inline-flex;
  padding: 6px;
  margin: -6px 2px -6px -6px;
  color: var(--hc-teal);
  cursor: pointer;
}
.is-compact .hc-menu svg { width: 18px; height: 18px; }
.is-compact .hc-menu.hc-hot::after { top: 2px; right: 1px; }
/* the sidebar slides in over the chat from the menu button */
.is-compact .hc-side {
  display: flex;
  position: absolute;
  z-index: 5;
  top: 0;
  bottom: 0;
  left: 0;
  width: 250px;
  transform: translateX(-102%);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: 8px 0 30px rgba(8, 26, 28, 0.18);
}
.is-compact.is-menu-open .hc-side { transform: none; }
.is-compact .hc-main::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(17, 24, 39, 0.25);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
.is-compact.is-menu-open .hc-main::after { opacity: 1; pointer-events: auto; }
.is-phone .hc-thread { padding: 4px 14px 22px; }
.is-phone .hc-composer { margin: 0 12px 10px; }
.is-phone .hc-head { padding: 0 12px; }
.is-phone .hc-greet { padding: 0 16px 24px; }
.is-phone .hc-greet h3 { font-size: 18px; }
.is-phone .hc-user-msg { max-width: 90%; }
.is-phone .hc-table { font-size: 10.5px; }

/* ---------- Hero proof points: four short claims in one row ----------
   Bold ink text, a step up from the subheader, split by thin teal rules.
   Phones: a 2 x 2 grid without the rules. */
/* One quiet row of what CarbonAI covers. The labels are long, so the row may
   run a little wider than the copy above (centered on the page), in a
   semibold, slightly smaller type with fine dividers. */
.hero-points {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  position: relative;
  left: 50%;
  width: max-content;
  max-width: calc(100vw - 32px);
  margin: clamp(18px, 2.6vh, 28px) 0 0;
  padding: 0;
  list-style: none;
  transform: translateX(-50%);
}
.hero-points li {
  position: relative;
  padding: 0 clamp(12px, 1vw, 20px);
  font-size: clamp(14px, 0.95vw, 16px);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.1px;
  color: var(--ink, #111827);
  white-space: nowrap;
}
.hero-points li + li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 1px;
  height: 1.2em;
  transform: translateY(-50%);
  background: rgba(57, 127, 134, 0.45);
}
/* below 900px the four labels no longer fit on one line, so they form a 2x2 grid */
@media (max-width: 899px) {
  .hero-points {
    left: auto;
    width: auto;
    margin: clamp(18px, 2.6vh, 28px) auto 0;
    transform: none;
    align-items: start; /* first lines align when one label wraps */
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 12px;
    max-width: 420px;
  }
  .hero-points li { padding: 0; font-size: 15px; text-align: center; white-space: normal; }
  .hero-points li + li::before { display: none; }
}

/* ---------- Network backdrop behind the product window ----------
   A static field of small nodes and thin curved links (built by hero-chat.js),
   densest around the window and fading out toward the edges and the top so the
   headline stays clean. Kept at ~5-6% opacity in muted teal-gray; no motion.
   A soft radial glow behind the window's center adds depth. */
.hc-net {
  position: absolute;
  z-index: -1;
  inset: -90px -30% -70px;
  pointer-events: none;
  /* fades out toward the sides and bottom, and stays clear above the window */
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 16%, #000 84%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 16%, #000 70%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0, #000 16%, #000 84%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 16%, #000 70%, transparent 100%);
  mask-composite: intersect;
}
.hc-net::before {
  content: "";
  position: absolute;
  inset: 12% 18%;
  background: radial-gradient(ellipse at 50% 50%, rgba(57, 127, 134, 0.14), rgba(57, 127, 134, 0) 70%);
}
.hc-net svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.07;
}
@media (max-width: 820px) {
  .hc-net { inset: -50px -12% -40px; }
}

/* ---------- Wide screens: split hero (hero-chat.js adds .hero--split) ----------
   The copy sits on the left of the first screen, left aligned; the product
   window starts on the right, tilted in perspective, and on scroll swings to
   the center and grows to full size. The script sets the copy's width and
   top, and the window's resting position. */
.hero--split .hero-copy {
  position: absolute;
  z-index: 2;
  left: var(--gutter, 80px);
  max-width: none;
  margin: 0;
  text-align: left;
}
.hero--split .hero-copy h1.hero-headline {
  font-size: clamp(36px, 2.45vw, 52px);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.hero--split .hero-headline .line + .line { margin-top: 0.08em; }
.hero--split .hero-headline-accent { text-wrap: balance; }
.hero--split .hero-sub {
  max-width: 32em;
  margin: clamp(18px, 2.6vh, 28px) 0 0;
  text-wrap: pretty;
}
/* the four proof points as short columns with fine dividers */
.hero--split .hero-points {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, auto));
  justify-content: start;
  align-items: start;
  left: auto;
  width: auto;
  max-width: none;
  margin: clamp(26px, 4vh, 44px) 0 0;
  transform: none;
}
.hero--split .hero-points li {
  padding: 0 clamp(11px, 0.9vw, 18px);
  font-size: clamp(15px, 1.02vw, 17px);
  line-height: 1.35;
  white-space: normal;
  text-wrap: balance;
  max-width: 14em;
}
.hero--split .hero-points li:first-child { padding-left: 0; }
.hero--split .hero-points li + li::before { top: 0; height: 100%; transform: none; }
.hero--split .hero-actions--row { justify-content: flex-start; margin-top: clamp(18px, 2.4vh, 26px); /* measured from the tallest label (the list aligns to the top) */ }
.hero--split .hero-btn { padding: 15px 26px; font-size: 15px; }
/* the topic bubbles wait until the window has landed (its right side starts
   off screen) */
.hero--split .hc-demo:not(.is-landed) .hc-feature { visibility: hidden !important; opacity: 0 !important; }
/* the split hero is held in place with native sticky positioning while the
   transition plays (hero-chat.js wraps it in .hero-hold, sized to the hero
   plus the held scroll distance, and sets top to the header height) */
.hero-hold { position: relative; }
.hero-hold > .hero { position: sticky; }

/* ---------- Landscape background ----------
   The landscape sits behind the whole hero as a soft atmospheric layer. The
   photo is pre-graded (cooler, desaturated, warm sunlight toned down),
   mirrored, and cropped above the rock and figure. A pale wash in the hero
   color covers it, heaviest at the top, so it reads clearest at the bottom;
   a misty veil keeps the text column calm, and a faint teal haze sits behind
   the product. Static: no motion. */
.hero-land {
  --hl-bg: 238, 245, 245; /* the hero background, #eef5f5 */
  --hl-wash: linear-gradient(to bottom,
    rgba(var(--hl-bg), 0.9) 0%,
    rgba(var(--hl-bg), 0.84) 30%,
    rgba(var(--hl-bg), 0.6) 58%,
    rgba(var(--hl-bg), 0.32) 80%,
    rgba(var(--hl-bg), 0.24) 100%);
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 40% 52% at 27% 46%, rgba(var(--hl-bg), 0.7), rgba(var(--hl-bg), 0) 72%),
    var(--hl-wash),
    url("../assets/hero/hero-landscape-full.jpg") center bottom / cover no-repeat;
  /* only the last few pixels soften, so the hero's bottom edge never reads as a hard line */
  -webkit-mask-image: linear-gradient(to bottom, #000 94%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 94%, transparent 100%);
}
/* a faint teal haze behind the product, lifting it off the landscape */
.hero-land::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 34% 46% at 72% 52%, rgba(57, 127, 134, 0.1), rgba(57, 127, 134, 0) 72%);
}
/* Stacked layouts (tablets, phones, short screens): the copy sits above the
   product, so the landscape gathers in the lower part of the hero and fades
   in from the page background, protecting the text. */
@media (max-width: 1199px), (max-height: 619px) {
  .hero-land {
    top: auto;
    height: 58%;
    background:
      var(--hl-wash),
      url("../assets/hero/hero-landscape-full.jpg") center bottom / cover no-repeat;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 38%, #000 94%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 38%, #000 94%, transparent 100%);
  }
  .hero-land::after { display: none; }
}
/* phones: a tighter crop on water, mist, and ridgeline, kept shallow */
@media (max-width: 640px) {
  .hero-land {
    height: 40%;
    background:
      var(--hl-wash),
      url("../assets/hero/hero-landscape-sm.jpg") center 55% / cover no-repeat;
  }
}

/* ---------- Industry recognition, above the hero headline ----------
   Small, quiet third-party credibility: subordinate to the headline, no card.
   In the split hero it sits in the open space above the copy without moving
   the copy; elsewhere it flows above the headline, centered. */
.hero-awards {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 0;
  margin: 0 0 clamp(14px, 2vh, 22px);
  font-size: 14px;
  line-height: 1.4;
  color: var(--body, #374151);
}
.hero-awards-icon {
  width: 17px;
  height: 17px;
  margin-right: 8px;
  fill: none;
  stroke: var(--teal, #397f86);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hero-awards-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--teal-dark, #2f696f);
}
.hero-awards .hero-award {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding-left: 14px;
  margin-left: 14px;
  border-left: 1px solid rgba(57, 127, 134, 0.35);
  color: var(--ink, #111827);
  font-weight: 500;
  text-decoration: none;
}
/* split hero: above the copy block, left aligned, outside its measured height */
.hero--split .hero-awards {
  position: absolute;
  left: 0;
  bottom: 100%;
  justify-content: flex-start;
  margin: 0 0 clamp(22px, 3.2vh, 34px);
  white-space: nowrap;
}
@media (max-width: 640px) {
  .hero-awards { font-size: 13px; }
  .hero-awards-label { flex-basis: 100%; text-align: center; margin-bottom: 2px; }
  .hero-awards-icon { display: none; }
  .hero-awards-label + .hero-award { border-left: 0; margin-left: 0; padding-left: 0; }
}
/* smaller laptops: a touch smaller so it stays on one line */
@media (max-width: 1439px) {
  .hero--split .hero-awards { flex-wrap: nowrap; font-size: 13px; }
  .hero--split .hero-awards .hero-award { padding-left: 11px; margin-left: 11px; }
}

.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* label on its own line, the awards on the line below */
.hero-awards-head { display: inline-flex; align-items: center; flex-basis: 100%; justify-content: inherit; margin-bottom: 4px; }
.hero-awards-head + .hero-award { border-left: 0; margin-left: 0; padding-left: 0; }
.hero--split .hero-awards { white-space: normal; flex-wrap: wrap; }
@media (max-width: 1439px) { .hero--split .hero-awards { flex-wrap: wrap; } }
/* phones: one award per line, centered, no dividers */
@media (max-width: 640px) {
  .hero-awards .hero-award { flex-basis: 100%; text-align: center; border-left: 0; margin-left: 0; padding-left: 0; }
  .hero-awards-head { justify-content: center; }
  .hero-awards-icon { display: inline; }
}
@media (max-width: 640px) {
  .hero-awards-label { flex-basis: auto; margin-bottom: 0; }
  .hero-awards-icon { margin-right: 6px; }
  .hero-awards .hero-award { display: block; text-wrap: balance; }
  .hero-awards .hero-award + .hero-award { margin-top: 2px; }
}
/* laptops: the two awards don't fit side by side, so each takes its own line */
@media (max-width: 1339px) {
  .hero--split .hero-awards .hero-award { flex-basis: 100%; border-left: 0; margin-left: 0; padding-left: 0; }
  .hero--split .hero-awards .hero-award + .hero-award { margin-top: 2px; }
}


/* quieter awards: about 10% smaller and a lighter weight, closer to their label */
.hero-awards .hero-award { font-size: 0.9em; font-weight: 400; color: var(--body, #374151); }
.hero-awards-head { margin-bottom: 1px; }
@media (max-width: 640px) { .hero-awards .hero-award { font-size: 12.5px; } } /* stays readable on phones */