trix-editor {
  border: 1px solid #bbb;
  border-radius: 3px;
  margin: 0;
  padding: 0.4em 0.6em;
  min-height: 5em;
  outline: none; }

trix-toolbar * {
  box-sizing: border-box; }

trix-toolbar .trix-button-row {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  overflow-x: auto; }

trix-toolbar .trix-button-group {
  display: flex;
  margin-bottom: 10px;
  border: 1px solid #bbb;
  border-top-color: #ccc;
  border-bottom-color: #888;
  border-radius: 3px; }
  trix-toolbar .trix-button-group:not(:first-child) {
    margin-left: 1.5vw; }
    @media (max-width: 768px) {
      trix-toolbar .trix-button-group:not(:first-child) {
        margin-left: 0; } }

trix-toolbar .trix-button-group-spacer {
  flex-grow: 1; }
  @media (max-width: 768px) {
    trix-toolbar .trix-button-group-spacer {
      display: none; } }

trix-toolbar .trix-button {
  position: relative;
  float: left;
  color: rgba(0, 0, 0, 0.6);
  font-size: 0.75em;
  font-weight: 600;
  white-space: nowrap;
  padding: 0 0.5em;
  margin: 0;
  outline: none;
  border: none;
  border-bottom: 1px solid #ddd;
  border-radius: 0;
  background: transparent; }
  trix-toolbar .trix-button:not(:first-child) {
    border-left: 1px solid #ccc; }
  trix-toolbar .trix-button.trix-active {
    background: #cbeefa;
    color: black; }
  trix-toolbar .trix-button:not(:disabled) {
    cursor: pointer; }
  trix-toolbar .trix-button:disabled {
    color: rgba(0, 0, 0, 0.125); }
  @media (max-width: 768px) {
    trix-toolbar .trix-button {
      letter-spacing: -0.01em;
      padding: 0 0.3em; } }

trix-toolbar .trix-button--icon {
  font-size: inherit;
  width: 2.6em;
  height: 1.6em;
  max-width: calc(0.8em + 4vw);
  text-indent: -9999px; }
  @media (max-width: 768px) {
    trix-toolbar .trix-button--icon {
      height: 2em;
      max-width: calc(0.8em + 3.5vw); } }
  trix-toolbar .trix-button--icon::before {
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0.6;
    content: "";
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain; }
    @media (max-width: 768px) {
      trix-toolbar .trix-button--icon::before {
        right: 6%;
        left: 6%; } }
  trix-toolbar .trix-button--icon.trix-active::before {
    opacity: 1; }
  trix-toolbar .trix-button--icon:disabled::before {
    opacity: 0.125; }

trix-toolbar .trix-button--icon-attach::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M10.5%2018V7.5c0-2.25%203-2.25%203%200V18c0%204.125-6%204.125-6%200V7.5c0-6.375%209-6.375%209%200V18%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-miterlimit%3D%2210%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  top: 8%;
  bottom: 4%; }

trix-toolbar .trix-button--icon-bold::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M6.522%2019.242a.5.5%200%200%201-.5-.5V5.35a.5.5%200%200%201%20.5-.5h5.783c1.347%200%202.46.345%203.24.982.783.64%201.216%201.562%201.216%202.683%200%201.13-.587%202.129-1.476%202.71a.35.35%200%200%200%20.049.613c1.259.56%202.101%201.742%202.101%203.22%200%201.282-.483%202.334-1.363%203.063-.876.726-2.132%201.12-3.66%201.12h-5.89ZM9.27%207.347v3.362h1.97c.766%200%201.347-.17%201.733-.464.38-.291.587-.716.587-1.27%200-.53-.183-.928-.513-1.198-.334-.273-.838-.43-1.505-.43H9.27Zm0%205.606v3.791h2.389c.832%200%201.448-.177%201.853-.497.399-.315.614-.786.614-1.423%200-.62-.22-1.077-.63-1.385-.418-.313-1.053-.486-1.905-.486H9.27Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-italic::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M9%205h6.5v2h-2.23l-2.31%2010H13v2H6v-2h2.461l2.306-10H9V5Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-link::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M18.948%205.258a4.337%204.337%200%200%200-6.108%200L11.217%206.87a.993.993%200%200%200%200%201.41c.392.39%201.027.39%201.418%200l1.623-1.613a2.323%202.323%200%200%201%203.271%200%202.29%202.29%200%200%201%200%203.251l-2.393%202.38a3.021%203.021%200%200%201-4.255%200l-.05-.049a1.007%201.007%200%200%200-1.418%200%20.993.993%200%200%200%200%201.41l.05.049a5.036%205.036%200%200%200%207.091%200l2.394-2.38a4.275%204.275%200%200%200%200-6.072Zm-13.683%2013.6a4.337%204.337%200%200%200%206.108%200l1.262-1.255a.993.993%200%200%200%200-1.41%201.007%201.007%200%200%200-1.418%200L9.954%2017.45a2.323%202.323%200%200%201-3.27%200%202.29%202.29%200%200%201%200-3.251l2.344-2.331a2.579%202.579%200%200%201%203.631%200c.392.39%201.027.39%201.419%200a.993.993%200%200%200%200-1.41%204.593%204.593%200%200%200-6.468%200l-2.345%202.33a4.275%204.275%200%200%200%200%206.072Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-strike::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M6%2014.986c.088%202.647%202.246%204.258%205.635%204.258%203.496%200%205.713-1.728%205.713-4.463%200-.275-.02-.536-.062-.781h-3.461c.398.293.573.654.573%201.123%200%201.035-1.074%201.787-2.646%201.787-1.563%200-2.773-.762-2.91-1.924H6ZM6.432%2010h3.763c-.632-.314-.914-.715-.914-1.273%200-1.045.977-1.739%202.432-1.739%201.475%200%202.52.723%202.617%201.914h2.764c-.05-2.548-2.11-4.238-5.39-4.238-3.145%200-5.392%201.719-5.392%204.316%200%20.363.04.703.12%201.02ZM4%2011a1%201%200%201%200%200%202h15a1%201%200%201%200%200-2H4Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-quote::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M4.581%208.471c.44-.5%201.056-.834%201.758-.995C8.074%207.17%209.201%207.822%2010%208.752c1.354%201.578%201.33%203.555.394%205.277-.941%201.731-2.788%203.163-4.988%203.56a.622.622%200%200%201-.653-.317c-.113-.205-.121-.49.16-.764.294-.286.567-.566.791-.835.222-.266.413-.54.524-.815.113-.28.156-.597.026-.908-.128-.303-.39-.524-.72-.69a3.02%203.02%200%200%201-1.674-2.7c0-.905.283-1.59.72-2.088Zm9.419%200c.44-.5%201.055-.834%201.758-.995%201.734-.306%202.862.346%203.66%201.276%201.355%201.578%201.33%203.555.395%205.277-.941%201.731-2.789%203.163-4.988%203.56a.622.622%200%200%201-.653-.317c-.113-.205-.122-.49.16-.764.294-.286.567-.566.791-.835.222-.266.412-.54.523-.815.114-.28.157-.597.026-.908-.127-.303-.39-.524-.72-.69a3.02%203.02%200%200%201-1.672-2.701c0-.905.283-1.59.72-2.088Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-heading-1::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M21.5%207.5v-3h-12v3H14v13h3v-13h4.5ZM9%2013.5h3.5v-3h-10v3H6v7h3v-7Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-code::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3.293%2011.293a1%201%200%200%200%200%201.414l4%204a1%201%200%201%200%201.414-1.414L5.414%2012l3.293-3.293a1%201%200%200%200-1.414-1.414l-4%204Zm13.414%205.414%204-4a1%201%200%200%200%200-1.414l-4-4a1%201%200%201%200-1.414%201.414L18.586%2012l-3.293%203.293a1%201%200%200%200%201.414%201.414Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-bullet-list::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M5%207.5a1.5%201.5%200%201%200%200-3%201.5%201.5%200%200%200%200%203ZM8%206a1%201%200%200%201%201-1h11a1%201%200%201%201%200%202H9a1%201%200%200%201-1-1Zm1%205a1%201%200%201%200%200%202h11a1%201%200%201%200%200-2H9Zm0%206a1%201%200%201%200%200%202h11a1%201%200%201%200%200-2H9Zm-2.5-5a1.5%201.5%200%201%201-3%200%201.5%201.5%200%200%201%203%200ZM5%2019.5a1.5%201.5%200%201%200%200-3%201.5%201.5%200%200%200%200%203Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-number-list::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3%204h2v4H4V5H3V4Zm5%202a1%201%200%200%201%201-1h11a1%201%200%201%201%200%202H9a1%201%200%200%201-1-1Zm1%205a1%201%200%201%200%200%202h11a1%201%200%201%200%200-2H9Zm0%206a1%201%200%201%200%200%202h11a1%201%200%201%200%200-2H9Zm-3.5-7H6v1l-1.5%202H6v1H3v-1l1.667-2H3v-1h2.5ZM3%2017v-1h3v4H3v-1h2v-.5H4v-1h1V17H3Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-undo::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3%2014a1%201%200%200%200%201%201h6a1%201%200%201%200%200-2H6.257c2.247-2.764%205.151-3.668%207.579-3.264%202.589.432%204.739%202.356%205.174%205.405a1%201%200%200%200%201.98-.283c-.564-3.95-3.415-6.526-6.825-7.095C11.084%207.25%207.63%208.377%205%2011.39V8a1%201%200%200%200-2%200v6Zm2-1Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-redo::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M21%2014a1%201%200%200%201-1%201h-6a1%201%200%201%201%200-2h3.743c-2.247-2.764-5.151-3.668-7.579-3.264-2.589.432-4.739%202.356-5.174%205.405a1%201%200%200%201-1.98-.283c.564-3.95%203.415-6.526%206.826-7.095%203.08-.513%206.534.614%209.164%203.626V8a1%201%200%201%201%202%200v6Zm-2-1Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-decrease-nesting-level::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M5%206a1%201%200%200%201%201-1h12a1%201%200%201%201%200%202H6a1%201%200%200%201-1-1Zm4%205a1%201%200%201%200%200%202h9a1%201%200%201%200%200-2H9Zm-3%206a1%201%200%201%200%200%202h12a1%201%200%201%200%200-2H6Zm-3.707-5.707a1%201%200%200%200%200%201.414l2%202a1%201%200%201%200%201.414-1.414L4.414%2012l1.293-1.293a1%201%200%200%200-1.414-1.414l-2%202Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-increase-nesting-level::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M5%206a1%201%200%200%201%201-1h12a1%201%200%201%201%200%202H6a1%201%200%200%201-1-1Zm4%205a1%201%200%201%200%200%202h9a1%201%200%201%200%200-2H9Zm-3%206a1%201%200%201%200%200%202h12a1%201%200%201%200%200-2H6Zm-2.293-2.293%202-2a1%201%200%200%200%200-1.414l-2-2a1%201%200%201%200-1.414%201.414L3.586%2012l-1.293%201.293a1%201%200%201%200%201.414%201.414Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-dialogs {
  position: relative; }

trix-toolbar .trix-dialog {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  font-size: 0.75em;
  padding: 15px 10px;
  background: #fff;
  box-shadow: 0 0.3em 1em #ccc;
  border-top: 2px solid #888;
  border-radius: 5px;
  z-index: 5; }

trix-toolbar .trix-input--dialog {
  font-size: inherit;
  font-weight: normal;
  padding: 0.5em 0.8em;
  margin: 0 10px 0 0;
  border-radius: 3px;
  border: 1px solid #bbb;
  background-color: #fff;
  box-shadow: none;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none; }
  trix-toolbar .trix-input--dialog.validate:invalid {
    box-shadow: #F00 0px 0px 1.5px 1px; }

trix-toolbar .trix-button--dialog {
  font-size: inherit;
  padding: 0.5em;
  border-bottom: none; }

trix-toolbar .trix-dialog--link {
  max-width: 600px; }

trix-toolbar .trix-dialog__link-fields {
  display: flex;
  align-items: baseline; }
  trix-toolbar .trix-dialog__link-fields .trix-input {
    flex: 1; }
  trix-toolbar .trix-dialog__link-fields .trix-button-group {
    flex: 0 0 content;
    margin: 0; }

trix-editor [data-trix-mutable]:not(.attachment__caption-editor) {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }

trix-editor [data-trix-mutable]::-moz-selection,
trix-editor [data-trix-cursor-target]::-moz-selection, trix-editor [data-trix-mutable] ::-moz-selection {
  background: none; }

trix-editor [data-trix-mutable]::selection,
trix-editor [data-trix-cursor-target]::selection, trix-editor [data-trix-mutable] ::selection {
  background: none; }

trix-editor .attachment__caption-editor:focus[data-trix-mutable]::-moz-selection {
  background: highlight; }

trix-editor .attachment__caption-editor:focus[data-trix-mutable]::selection {
  background: highlight; }

trix-editor [data-trix-mutable].attachment.attachment--file {
  box-shadow: 0 0 0 2px highlight;
  border-color: transparent; }

trix-editor [data-trix-mutable].attachment img {
  box-shadow: 0 0 0 2px highlight; }

trix-editor .attachment {
  position: relative; }
  trix-editor .attachment:hover {
    cursor: default; }

trix-editor .attachment--preview .attachment__caption:hover {
  cursor: text; }

trix-editor .attachment__progress {
  position: absolute;
  z-index: 1;
  height: 20px;
  top: calc(50% - 10px);
  left: 5%;
  width: 90%;
  opacity: 0.9;
  transition: opacity 200ms ease-in; }
  trix-editor .attachment__progress[value="100"] {
    opacity: 0; }

trix-editor .attachment__caption-editor {
  display: inline-block;
  width: 100%;
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
  color: inherit;
  text-align: center;
  vertical-align: top;
  border: none;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none; }

trix-editor .attachment__toolbar {
  position: absolute;
  z-index: 1;
  top: -0.9em;
  left: 0;
  width: 100%;
  text-align: center; }

trix-editor .trix-button-group {
  display: inline-flex; }

trix-editor .trix-button {
  position: relative;
  float: left;
  color: #666;
  white-space: nowrap;
  font-size: 80%;
  padding: 0 0.8em;
  margin: 0;
  outline: none;
  border: none;
  border-radius: 0;
  background: transparent; }
  trix-editor .trix-button:not(:first-child) {
    border-left: 1px solid #ccc; }
  trix-editor .trix-button.trix-active {
    background: #cbeefa; }
  trix-editor .trix-button:not(:disabled) {
    cursor: pointer; }

trix-editor .trix-button--remove {
  text-indent: -9999px;
  display: inline-block;
  padding: 0;
  outline: none;
  width: 1.8em;
  height: 1.8em;
  line-height: 1.8em;
  border-radius: 50%;
  background-color: #fff;
  border: 2px solid highlight;
  box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.25); }
  trix-editor .trix-button--remove::before {
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0.7;
    content: "";
    background-image: url("data:image/svg+xml,%3Csvg%20height%3D%2224%22%20width%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M19%206.41%2017.59%205%2012%2010.59%206.41%205%205%206.41%2010.59%2012%205%2017.59%206.41%2019%2012%2013.41%2017.59%2019%2019%2017.59%2013.41%2012z%22%2F%3E%3Cpath%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%2F%3E%3C%2Fsvg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 90%; }
  trix-editor .trix-button--remove:hover {
    border-color: #333; }
    trix-editor .trix-button--remove:hover::before {
      opacity: 1; }

trix-editor .attachment__metadata-container {
  position: relative; }

trix-editor .attachment__metadata {
  position: absolute;
  left: 50%;
  top: 2em;
  transform: translate(-50%, 0);
  max-width: 90%;
  padding: 0.1em 0.6em;
  font-size: 0.8em;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 3px; }
  trix-editor .attachment__metadata .attachment__name {
    display: inline-block;
    max-width: 100%;
    vertical-align: bottom;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; }
  trix-editor .attachment__metadata .attachment__size {
    margin-left: 0.2em;
    white-space: nowrap; }

.trix-content {
  line-height: 1.5;
  overflow-wrap: break-word;
  word-break: break-word; }
  .trix-content * {
    box-sizing: border-box;
    margin: 0;
    padding: 0; }
  .trix-content h1 {
    font-size: 1.2em;
    line-height: 1.2; }
  .trix-content blockquote {
    border: 0 solid #ccc;
    border-left-width: 0.3em;
    margin-left: 0.3em;
    padding-left: 0.6em; }
  .trix-content [dir=rtl] blockquote,
  .trix-content blockquote[dir=rtl] {
    border-width: 0;
    border-right-width: 0.3em;
    margin-right: 0.3em;
    padding-right: 0.6em; }
  .trix-content li {
    margin-left: 1em; }
  .trix-content [dir=rtl] li {
    margin-right: 1em; }
  .trix-content pre {
    display: inline-block;
    width: 100%;
    vertical-align: top;
    font-family: monospace;
    font-size: 0.9em;
    padding: 0.5em;
    white-space: pre;
    background-color: #eee;
    overflow-x: auto; }
  .trix-content img {
    max-width: 100%;
    height: auto; }
  .trix-content .attachment {
    display: inline-block;
    position: relative;
    max-width: 100%; }
    .trix-content .attachment a {
      color: inherit;
      text-decoration: none; }
      .trix-content .attachment a:hover, .trix-content .attachment a:visited:hover {
        color: inherit; }
  .trix-content .attachment__caption {
    text-align: center; }
    .trix-content .attachment__caption .attachment__name + .attachment__size::before {
      content: ' \2022 '; }
  .trix-content .attachment--preview {
    width: 100%;
    text-align: center; }
    .trix-content .attachment--preview .attachment__caption {
      color: #666;
      font-size: 0.9em;
      line-height: 1.2; }
  .trix-content .attachment--file {
    color: #333;
    line-height: 1;
    margin: 0 2px 2px 2px;
    padding: 0.4em 1em;
    border: 1px solid #bbb;
    border-radius: 5px; }
  .trix-content .attachment-gallery {
    display: flex;
    flex-wrap: wrap;
    position: relative; }
    .trix-content .attachment-gallery .attachment {
      flex: 1 0 33%;
      padding: 0 0.5em;
      max-width: 33%; }
    .trix-content .attachment-gallery.attachment-gallery--2 .attachment, .trix-content .attachment-gallery.attachment-gallery--4 .attachment {
      flex-basis: 50%;
      max-width: 50%; }
/*
 * Provides a drop-in pointer for the default Trix stylesheet that will format the toolbar and
 * the trix-editor content (whether displayed or under editing). Feel free to incorporate this
 * inclusion directly in any other asset bundle and remove this file.
 *

*/

/*
 * We need to override trix.css’s image gallery styles to accommodate the
 * <action-text-attachment> element we wrap around attachments. Otherwise,
 * images in galleries will be squished by the max-width: 33%; rule.
*/
.trix-content .attachment-gallery > action-text-attachment,
.trix-content .attachment-gallery > .attachment {
  flex: 1 0 33%;
  padding: 0 0.5em;
  max-width: 33%;
}

.trix-content .attachment-gallery.attachment-gallery--2 > action-text-attachment,
.trix-content .attachment-gallery.attachment-gallery--2 > .attachment, .trix-content .attachment-gallery.attachment-gallery--4 > action-text-attachment,
.trix-content .attachment-gallery.attachment-gallery--4 > .attachment {
  flex-basis: 50%;
  max-width: 50%;
}

.trix-content action-text-attachment .attachment {
  padding: 0 !important;
  max-width: 100% !important;
}

/* Sticky toolbar for easier editing of long posts */
trix-toolbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: white;
  border-bottom: 1px solid #e5e7eb;
  padding-bottom: 0.5rem;
  margin-bottom: 0.5rem;
}

/* Custom styles for H2 and H3 buttons */
.trix-button[data-trix-attribute="heading1"],
.trix-button[data-trix-attribute="heading2"],
.trix-button[data-trix-attribute="heading3"],
.trix-button[data-trix-action="x-insert-table"] {
  font-weight: bold;
  font-family: monospace;
}

/* Editor content styles */
trix-editor {
  min-height: 400px;
  padding: 1rem;
  border-radius: 0.375rem;
  border: 1px solid #d1d5db;
}

trix-editor:focus {
  outline: none;
  border-color: #9333ea;
  box-shadow: 0 0 0 3px rgba(147, 51, 234, 0.1);
}

/* Paragraph spacing in editor */
trix-editor div {
  margin-bottom: 1rem;
}

trix-editor h2 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
  line-height: 1.3;
}

trix-editor h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-top: 1.25rem;
  margin-bottom: 0.5rem;
  line-height: 1.4;
}

/* Make links visible in editor */
trix-editor a {
  color: #7c3aed;
  text-decoration: underline;
  cursor: pointer;
}

trix-editor a:hover {
  color: #6d28d9;
}

/* List styles */
trix-editor ul,
trix-editor ol {
  margin-left: 1.5rem;
  margin-bottom: 1rem;
  margin-top: 0.5rem;
}

trix-editor ul {
  list-style-type: disc;
}

trix-editor ol {
  list-style-type: decimal;
}

trix-editor li {
  margin-bottom: 0.25rem;
}

/* Blockquote styles */
trix-editor blockquote {
  border-left: 4px solid #e5e7eb;
  padding-left: 1rem;
  margin-left: 0;
  margin-bottom: 1rem;
  color: #6b7280;
  font-style: italic;
}

/* Code styles */
trix-editor pre {
  background-color: #f3f4f6;
  padding: 0.75rem;
  border-radius: 0.25rem;
  margin-bottom: 1rem;
  overflow-x: auto;
  font-family: monospace;
  font-size: 0.875rem;
}

trix-editor code {
  background-color: #f3f4f6;
  padding: 0.125rem 0.25rem;
  border-radius: 0.125rem;
  font-family: monospace;
  font-size: 0.875rem;
}

/* Style for nested TOC */
.blog-toc {
  padding: 0;
  list-style: none;
}

.blog-toc-item {
  margin-bottom: 0.75rem;
}

.blog-toc-item.level-2 {
  font-weight: 600;
}

.blog-toc-item.level-3 {
  margin-left: 1.5rem;
  position: relative;
  font-weight: 400;
  font-size: 0.95em;
}

.blog-toc-item.level-3:before {
  content: "└";
  position: absolute;
  left: -1rem;
  color: #9ca3af;
}

/* Blog content display styles (shared by admin preview and public page) */
.blog-content .trix-content {
  font-family: inherit;
}

.blog-content h2,
.blog-content .trix-content h2 {
  font-size: 2rem;
  font-weight: 700;
  margin-top: 3rem;
  margin-bottom: 1.25rem;
  color: #111827;
  scroll-margin-top: 1rem;
}

.blog-content > *:first-child,
.blog-content .trix-content > *:first-child {
  margin-top: 0 !important;
}

.blog-content h3,
.blog-content .trix-content h3 {
  font-size: 1.75rem;
  font-weight: 600;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  color: #111827;
}

.blog-content p,
.blog-content .trix-content p,
.blog-content .trix-content > div {
  margin-top: 0;
  margin-bottom: 2rem;
  line-height: 1.9;
  color: #374151;
  font-size: 1.125rem;
}

.blog-content .br-spacer {
  display: block;
  height: 0.9rem;
}

.blog-content ul,
.blog-content .trix-content ul {
  margin-top: 0.5rem;
  margin-bottom: 1.5rem;
  padding-left: 1.5rem;
  list-style-type: square !important;
}

.blog-content ul li::marker,
.blog-content .trix-content ul li::marker {
  color: #60a5fa; /* Light blue (blue-400) */
}

.blog-content ol,
.blog-content .trix-content ol {
  margin-top: 0.5rem;
  margin-bottom: 1.5rem;
  padding-left: 1.5rem;
  list-style-type: decimal;
}

.blog-content li,
.blog-content .trix-content li {
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
  line-height: 1.8;
  font-size: 1.125rem;
}

.blog-content strong,
.blog-content .trix-content strong {
  font-weight: 600;
  color: #111827;
}

.blog-content a,
.blog-content .trix-content a {
  color: #7c3aed;
  text-decoration: underline;
}

.blog-content a:hover,
.blog-content .trix-content a:hover {
  color: #6d28d9;
}

.blog-content blockquote,
.blog-content .trix-content blockquote {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  padding-left: 1rem;
  border-left: 4px solid #e5e7eb;
  font-style: italic;
  color: #6b7280;
}

.blog-content pre,
.blog-content .trix-content pre {
  margin-top: 0.25rem;
  margin-bottom: 1.5rem;
  padding: 1.5rem;
  background-color: #282c34 !important; /* Atom One Dark background */
  color: #abb2bf !important;
  border-radius: 0.5rem;
  overflow-x: auto;
  font-size: 1.1em; /* Larger font */
  line-height: 1.5;
}

.blog-content code,
.blog-content .trix-content code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.875em;
  background-color: #f3f4f6;
  padding: 0.125rem 0.25rem;
  border-radius: 0.25rem;
}

/* Override background for code inside pre to be transparent */
.blog-content pre code,
.blog-content .trix-content pre code {
  background-color: transparent;
  color: inherit;
  padding: 0;
}

/* Images and captions inside content */
.blog-content figure,
.blog-content .trix-content figure {
  margin: 1.5rem 0;
}

.blog-content figcaption,
.blog-content .trix-content figcaption {
  text-align: center;
  color: #6b7280;
  font-size: 0.9rem;
  margin-top: 0.5rem;
}

.blog-content .trix-content action-text-attachment .attachment,
.blog-content .trix-content action-text-attachment .attachment img,
.blog-content .trix-content img,
.blog-content img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  border-radius: 0.375rem;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.10);
}

/* Table Styles for Trix and Blog Display */
.blog-content table,
.blog-content .trix-content table,
trix-editor table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  border: 1px solid #e5e7eb;
  table-layout: fixed;
}

.blog-content table thead th,
.blog-content .trix-content table thead th,
trix-editor table thead th {
  background-color: #f3f4f6;
  font-weight: 600;
  text-align: left;
}

/* Override trix.css's tr:first-child rule that incorrectly styles tbody's first row */
.blog-content table tbody tr:first-child th,
.blog-content table tbody tr:first-child td,
.blog-content .trix-content table tbody tr:first-child th,
.blog-content .trix-content table tbody tr:first-child td {
  background-color: transparent;
  font-weight: inherit;
}

.blog-content table td,
.blog-content table th,
.blog-content .trix-content table td,
.blog-content .trix-content table th,
trix-editor table td,
trix-editor table th {
  border: 1px solid #e5e7eb;
  padding: 0.75rem;
  vertical-align: top;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Ensure attachment figures for tables behave like blocks */
.blog-content .trix-content figure.attachment--content,
trix-editor figure.attachment--content {
  display: block;
  width: 100%;
  margin: 1.5rem 0;
}

.blog-content .trix-content figure.attachment--content table,
trix-editor figure.attachment--content table {
  margin: 0; /* Remove nested margin */
}

/* Table Tools UI */
.trix-table-tools-group {
  display: inline-flex;
  gap: 2px;
  margin-right: 8px;
}

.trix-table-tools-group--right {
  float: right;
  margin-right: 0;
}

.trix-table-tool-btn {
  background-color: #f3f4f6;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 11px;
  cursor: pointer;
  color: #374151;
  transition: all 0.2s;
}

.trix-table-tool-btn:hover {
  background-color: #e5e7eb;
  border-color: #9ca3af;
}

.trix-table-tool-btn-danger {
  background-color: #fee2e2;
  border-color: #fca5a5;
  color: #991b1b;
}

.trix-table-tool-btn-danger:hover {
  background-color: #fecaca;
  border-color: #f87171;
}
/* ============================================================
   StayAPI — /agencies landing
   Scoped under .agencies-page so tokens and utilities don't leak.
   See DESIGN.md for the operator-console system this implements.
   ============================================================ */

.agencies-page {
  --ink: #0B1020;
  --ink-2: #1A2040;
  --indigo: #4F46E5;
  --indigo-2: #6366F1;
  --indigo-deep: #4338CA;
  --indigo-soft: #EEF0FF;
  --slate-50: #FBFAFC;
  --slate-100: #F4F5F8;
  --slate-200: #E7E9EF;
  --slate-300: #D2D6E0;
  --slate-400: #9AA0B4;
  --slate-500: #6B7090;
  --slate-600: #454A6A;
  --signal-up: #10B981;
  --signal-up-soft: #E7F8F1;
  --signal-dn: #E45858;
  --signal-dn-soft: #FDECEC;
  --rating-amber: #E0A93B;
  --maxw: 1200px;
  --radius: 14px;

  color: var(--ink);
  background: var(--slate-50);
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
  font-feature-settings: "ss01", "cv11";
}

.agencies-page .wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 28px;
}
.agencies-page a { color: inherit; text-decoration: none; }
.agencies-page button { font-family: inherit; cursor: pointer; border: 0; background: none; }
.agencies-page code,
.agencies-page pre,
.agencies-page .mono { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }

/* ===== BUTTONS ===== */
.agencies-page .btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 14px;
  transition: transform .12s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow .12s cubic-bezier(0.22, 1, 0.36, 1),
              background .12s cubic-bezier(0.22, 1, 0.36, 1),
              border-color .12s cubic-bezier(0.22, 1, 0.36, 1);
}
.agencies-page .btn-primary {
  background: var(--indigo);
  color: #FFFFFF;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.18) inset,
    0 8px 22px -8px rgba(79, 70, 229, 0.6);
}
.agencies-page .btn-primary:hover {
  background: var(--indigo-deep);
  transform: translateY(-1px);
}
.agencies-page .btn-primary:focus-visible,
.agencies-page .btn-secondary:focus-visible,
.agencies-page .btn-ghost:focus-visible {
  outline: 2px solid var(--indigo);
  outline-offset: 2px;
}
.agencies-page .btn-secondary {
  background: #FFFFFF;
  color: var(--ink);
  border: 1px solid var(--slate-200);
}
.agencies-page .btn-secondary:hover { border-color: var(--slate-300); }
.agencies-page .btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--slate-200);
}
.agencies-page .btn-ghost:hover { border-color: var(--slate-300); background: #FFFFFF; }
.agencies-page .btn-lg {
  padding: 14px 22px;
  font-size: 15px;
  border-radius: 12px;
}
.agencies-page .arrow {
  font-size: 16px;
  line-height: 0;
  transform: translateY(1px);
}

/* ===== PAGE HEADER (non-sticky, solid bg) ===== */
.agencies-page .agencies-nav {
  background: var(--slate-50);
  border-bottom: 1px solid var(--slate-200);
}
.agencies-page .nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
}
.agencies-page .logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.agencies-page .logo-mark {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: linear-gradient(135deg, #5B52F0, var(--indigo-deep));
  color: #FFFFFF;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 14px;
  box-shadow: 0 4px 14px -4px rgba(79, 70, 229, 0.5);
}
.agencies-page .nav-links {
  display: flex;
  gap: 30px;
  font-size: 14px;
  color: var(--slate-600);
  font-weight: 500;
}
.agencies-page .nav-links a:hover { color: var(--ink); }
.agencies-page .nav-cta {
  display: flex;
  gap: 10px;
  align-items: center;
}
.agencies-page .pill-link {
  font-size: 13px;
  color: var(--slate-600);
  font-weight: 500;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid var(--slate-200);
  background: #FFFFFF;
}
.agencies-page .pill-link:hover { color: var(--ink); border-color: var(--slate-300); }

/* ===== HERO ===== */
.agencies-page .hero {
  position: relative;
  overflow: hidden;
  padding: 64px 0 64px;
}
.agencies-page .hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(700px 360px at 88% -5%, rgba(99, 102, 241, 0.12), transparent 60%),
    radial-gradient(540px 280px at 0% 10%, rgba(99, 102, 241, 0.07), transparent 60%);
}
/* Hero dot field, painted between the ::before atmosphere and the
   foreground hero content. Top-down mask so the field fades into the
   white-label dashboard mock area without clutter. */
.agencies-page .agencies-hero-dots {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.85) 28%, rgba(0, 0, 0, 0.35) 55%, rgba(0, 0, 0, 0) 75%);
          mask-image: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.85) 28%, rgba(0, 0, 0, 0.35) 55%, rgba(0, 0, 0, 0) 75%);
}
.agencies-page .hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 56px;
  align-items: center;
  position: relative;
  z-index: 1;
}
.agencies-page .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: #FFFFFF;
  border: 1px solid var(--slate-200);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--slate-600);
  margin-bottom: 22px;
}
.agencies-page .eyebrow .dot {
  width: 6px;
  height: 6px;
  border-radius: 99px;
  background: var(--indigo);
  box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.16);
}
.agencies-page h1.hero-h {
  font-size: clamp(1.85rem, 4.6vw, 3.7rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  font-weight: 800;
  margin: 0 0 22px;
  color: var(--ink);
  overflow-wrap: break-word;
  word-wrap: break-word;
}
.agencies-page h1.hero-h .em { color: var(--indigo); }
.agencies-page .hero-sub {
  font-size: 1rem;
  color: var(--slate-600);
  max-width: 540px;
  margin: 0 0 30px;
  line-height: 1.55;
}
.agencies-page .hero-sub b { color: var(--ink); font-weight: 600; }
.agencies-page .hero-cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.agencies-page .hero-meta {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--slate-500);
  font-weight: 500;
}
.agencies-page .hero-meta span { display: inline-flex; align-items: center; gap: 6px; }
.agencies-page .hero-meta svg { color: var(--indigo); flex-shrink: 0; }

/* ===== HERO VISUAL ===== */
.agencies-page .hero-visual {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  min-height: 480px;
  padding: 28px 32px 32px;
}
.agencies-page .card {
  background: #FFFFFF;
  border: 1px solid var(--slate-200);
  border-radius: 14px;
  box-shadow:
    0 24px 60px -28px rgba(15, 21, 53, 0.22),
    0 2px 0 rgba(15, 21, 53, 0.02);
}
.agencies-page .dash {
  position: relative;
  width: 100%;
  max-width: 460px;
  padding: 14px;
  transform: rotate(-0.3deg);
}
.agencies-page .dash-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 11px;
  border-bottom: 1px solid var(--slate-200);
}
.agencies-page .dash-head .brand { display: flex; align-items: center; gap: 8px; }
.agencies-page .brand-mark {
  width: 22px;
  height: 22px;
  border-radius: 5px;
  background: #0F172A;
  color: #FFFFFF;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
}
.agencies-page .brand-name { font-weight: 600; font-size: 12px; line-height: 1.1; }
.agencies-page .brand-sub { font-size: 10px; color: var(--slate-500); line-height: 1.1; margin-top: 1px; }
.agencies-page .dash-tabs {
  display: flex;
  gap: 14px;
  font-size: 11px;
  color: var(--slate-500);
  font-weight: 500;
}
.agencies-page .dash-tabs button {
  font: inherit;
  padding: 0;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  position: relative;
  transition: color .12s cubic-bezier(0.22, 1, 0.36, 1);
}
.agencies-page .dash-tabs button:hover { color: var(--ink); }
.agencies-page .dash-tabs button:focus-visible {
  outline: 2px solid var(--indigo);
  outline-offset: 4px;
  border-radius: 2px;
}
.agencies-page .dash-tabs button.active { color: var(--indigo); }
.agencies-page .dash-tabs button.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -12px;
  height: 2px;
  background: var(--indigo);
  border-radius: 2px;
}

/* Tab views: only one rendered at a time, no transition pop */
.agencies-page .dash-view { display: none; }
.agencies-page .dash-view.is-active { display: block; }
.agencies-page .dash-section-title {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 12px 2px 8px;
}
.agencies-page .dash-section-title h4 {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.agencies-page .dash-section-title .meta { font-size: 10px; color: var(--slate-500); }
.agencies-page .kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.agencies-page .kpi {
  border: 1px solid var(--slate-200);
  border-radius: 8px;
  padding: 8px 9px;
  background: #FFFFFF;
}
.agencies-page .kpi .label {
  font-size: 9px;
  color: var(--slate-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}
.agencies-page .kpi .val {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-top: 1px;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.agencies-page .kpi .delta {
  font-size: 9.5px;
  font-weight: 600;
  margin-top: 1px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.agencies-page .delta.up { color: var(--signal-up); }
.agencies-page .delta.dn { color: var(--signal-dn); }
.agencies-page .props-table {
  margin-top: 8px;
  border: 1px solid var(--slate-200);
  border-radius: 8px;
  overflow: hidden;
  background: #FFFFFF;
}
.agencies-page .props-row {
  display: grid;
  grid-template-columns: 1.6fr 0.7fr 0.7fr 0.5fr;
  gap: 8px;
  padding: 7px 10px;
  align-items: center;
  font-size: 11px;
  border-bottom: 1px solid var(--slate-200);
}
.agencies-page .props-row:last-child { border-bottom: 0; }
.agencies-page .props-row.head {
  background: #FAFAFD;
  font-size: 9.5px;
  color: var(--slate-500);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}
.agencies-page .prop {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}
.agencies-page .prop-img {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  background: linear-gradient(135deg, #C7D2FE, #818CF8);
  flex-shrink: 0;
}
.agencies-page .prop-img.b { background: linear-gradient(135deg, #FBCFE8, #F472B6); }
.agencies-page .prop-img.c { background: linear-gradient(135deg, #BAE6FD, #38BDF8); }
.agencies-page .prop-img.d { background: linear-gradient(135deg, #FDE68A, #F59E0B); }
.agencies-page .prop-name {
  font-weight: 600;
  color: var(--ink);
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.agencies-page .prop-loc {
  font-size: 9.5px;
  color: var(--slate-500);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.agencies-page .num { font-variant-numeric: tabular-nums; font-weight: 600; }
.agencies-page .pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 6px;
  border-radius: 99px;
  font-size: 10px;
  font-weight: 600;
}
.agencies-page .pill.up { background: var(--signal-up-soft); color: var(--signal-up); }
.agencies-page .pill.dn { background: var(--signal-dn-soft); color: var(--signal-dn); }
.agencies-page .stars { color: var(--rating-amber); font-size: 9px; letter-spacing: 0.5px; }

/* ----- Rates tab view ----- */
.agencies-page .rates-chart {
  margin-top: 6px;
  padding: 8px 4px 4px;
  border: 1px solid var(--slate-200);
  border-radius: 8px;
  background: #FFFFFF;
}
.agencies-page .rates-chart svg { display: block; width: 100%; height: 156px; }
.agencies-page .rates-legend {
  display: flex;
  gap: 16px;
  padding: 6px 12px 4px;
  font-size: 10px;
  color: var(--slate-500);
  font-weight: 500;
}
.agencies-page .rates-legend span { display: inline-flex; align-items: center; gap: 6px; }
.agencies-page .rates-legend .swatch {
  width: 14px;
  height: 2px;
  border-radius: 1px;
}
.agencies-page .rates-legend .swatch.indigo { background: var(--indigo); height: 3px; }
.agencies-page .rates-legend .swatch.slate { background: var(--slate-400); }
.agencies-page .rates-row {
  margin-top: 8px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.agencies-page .rates-cell {
  border: 1px solid var(--slate-200);
  border-radius: 8px;
  padding: 9px 11px;
  background: #FFFFFF;
}
.agencies-page .rates-cell .lbl {
  font-size: 9px;
  color: var(--slate-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}
.agencies-page .rates-cell .val {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-top: 1px;
  line-height: 1.05;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.agencies-page .rates-cell .meta-tiny {
  font-size: 9.5px;
  font-weight: 600;
  margin-top: 2px;
}
.agencies-page .rates-cell .meta-tiny.up { color: var(--signal-up); }
.agencies-page .rates-cell .meta-tiny.dn { color: var(--signal-dn); }

/* ----- Reviews tab view ----- */
.agencies-page .reviews-summary {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 14px;
  align-items: start;
  margin-top: 4px;
}
.agencies-page .reviews-rating {
  background: #FFFFFF;
  border: 1px solid var(--slate-200);
  border-radius: 8px;
  padding: 12px 14px;
}
.agencies-page .rating-num {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.agencies-page .rating-stars {
  margin-top: 4px;
  color: var(--rating-amber);
  font-size: 12px;
  letter-spacing: 1px;
}
.agencies-page .rating-stars .half { opacity: 0.4; }
.agencies-page .rating-meta {
  margin-top: 6px;
  font-size: 10px;
  color: var(--slate-500);
  font-weight: 500;
}
.agencies-page .reviews-sentiment {
  background: #FFFFFF;
  border: 1px solid var(--slate-200);
  border-radius: 8px;
  padding: 12px 14px;
}
.agencies-page .reviews-sentiment .sent-label {
  font-size: 9px;
  color: var(--slate-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}
.agencies-page .sent-bar {
  display: flex;
  height: 12px;
  border-radius: 3px;
  overflow: hidden;
  margin-top: 8px;
  background: var(--slate-100);
}
.agencies-page .sent-bar .seg.pos { background: var(--signal-up); }
.agencies-page .sent-bar .seg.neu { background: var(--rating-amber); }
.agencies-page .sent-bar .seg.neg { background: var(--signal-dn); }
.agencies-page .sent-legend {
  display: flex;
  gap: 14px;
  margin-top: 8px;
  font-size: 10px;
  color: var(--slate-500);
  font-weight: 500;
}
.agencies-page .sent-legend b { color: var(--ink); font-weight: 700; }
.agencies-page .reviews-topics {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}
.agencies-page .reviews-topics .topic {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  border: 1px solid var(--slate-200);
  border-radius: 8px;
  background: #FFFFFF;
  font-size: 11px;
}
.agencies-page .reviews-topics .topic .tname { color: var(--ink); font-weight: 600; }
.agencies-page .reviews-topics .topic .tdelta { font-weight: 700; font-size: 10.5px; }
.agencies-page .reviews-topics .topic .tdelta.up { color: var(--signal-up); }
.agencies-page .reviews-topics .topic .tdelta.dn { color: var(--signal-dn); }
.agencies-page .reviews-topics .topic.muted .tname { color: var(--slate-500); font-weight: 500; }

/* ----- Floating chips around the dashboard card ----- */
/* One .chip-group per tab; controller toggles is-active. Inactive groups are
   display: none so their absolute children do not stack invisibly behind the
   active set. */
.agencies-page .chip-group { display: none; }
.agencies-page .chip-group.is-active { display: contents; }

.agencies-page .float-chip {
  position: absolute;
  background: #FFFFFF;
  border: 1px solid var(--slate-200);
  border-radius: 10px;
  padding: 7px 10px 7px 8px;
  box-shadow:
    0 0 0 1px rgba(79, 70, 229, 0.10),
    0 6px 16px -8px rgba(79, 70, 229, 0.30),
    0 14px 30px -14px rgba(15, 21, 53, 0.22);
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 11px;
  z-index: 2;
  /* Subtle entrance when chip group activates */
  animation: agencies-chip-fade-in 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes agencies-chip-fade-in {
  from { opacity: 0; transform: translateY(2px); }
  to   { opacity: 1; transform: translateY(0); }
}
.agencies-page .float-chip .icon {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  background: var(--indigo-soft);
  color: var(--indigo);
  flex-shrink: 0;
}
.agencies-page .float-chip .t { font-weight: 600; color: var(--ink); font-size: 11px; line-height: 1.1; }
.agencies-page .float-chip .s { color: var(--slate-500); font-size: 9.5px; line-height: 1.1; margin-top: 2px; }
/* Chips are children of .dash; positions are relative to its bounding box.
   Each chip is anchored to a specific edge so it stays stable across tab views. */
.agencies-page .chip-1 { top: -32px;    left: -42px; }     /* lifted above and outside the brand mark */
.agencies-page .chip-2 { top: 50px;     right: -28px; }    /* peeks right, just under the tabs */
.agencies-page .chip-3 { bottom: -16px; left: 60px; }      /* peeks bottom, slightly inset */

/* ===== ANONYMIZED METRIC TILE (replaces logo strip) ===== */
.agencies-page .metric-tile {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 56px;
  padding: 22px 28px;
  background: #FFFFFF;
  border: 1px solid var(--slate-200);
  border-radius: 14px;
}
.agencies-page .metric-tile .cell {
  padding: 4px 18px;
  border-left: 1px solid var(--slate-200);
}
.agencies-page .metric-tile .cell:first-child { border-left: 0; padding-left: 0; }
.agencies-page .metric-tile .cell:last-child { padding-right: 0; }
.agencies-page .metric-tile .num-big {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.agencies-page .metric-tile .num-big .unit {
  font-size: 16px;
  font-weight: 600;
  color: var(--slate-500);
  margin-left: 4px;
  letter-spacing: -0.01em;
}
.agencies-page .metric-tile .lbl {
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--slate-500);
  font-weight: 500;
}
.agencies-page .metric-tile .placeholder-note {
  grid-column: 1 / -1;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--slate-200);
  font-size: 11.5px;
  color: var(--slate-500);
  text-align: center;
}

/* ===== CLIENT LOGO STRIP (placeholder wordmarks for now) ===== */
/* Logos sit roughly centered between the hr line and the bottom of the
   surrounding hero section. The hero's reduced padding-bottom (see .hero
   override below) keeps the gap below balanced with the gap above.
   Margin stays untouched per design instruction. */
.agencies-page .client-strip {
  margin-top: 36px;
  padding: 54px 0 12px;
  border-top: 1px solid var(--slate-200);
}
/* Tighten the hero's bottom padding so the symmetric reduction above and
   below the logos lands on the same scale. Top stays at 64px (driven by
   the page header above). */
.agencies-page .hero { padding-bottom: 34px; }
.agencies-page .client-strip-label {
  text-align: center;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  color: var(--slate-500);
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 18px;
}
.agencies-page .client-strip-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 28px;
  align-items: center;
  justify-items: center;
}
.agencies-page .client-mark {
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.02em;
  color: var(--slate-400);
  line-height: 1;
  filter: grayscale(1);
  transition: color .18s ease, opacity .18s ease;
}
.agencies-page .client-mark span {
  font-weight: 400;
  color: var(--slate-400);
}
.agencies-page .client-mark:hover {
  color: var(--slate-600);
}
.agencies-page .client-mark:hover span {
  color: var(--slate-500);
}

/* ===== SECTION FRAME ===== */
.agencies-page .section {
  padding: 80px 0;
  position: relative;
}
.agencies-page .section.tight { padding: 56px 0; }
.agencies-page .section-head {
  max-width: 720px;
  margin-bottom: 40px;
}
.agencies-page .section-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  color: var(--indigo);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 14px;
}
.agencies-page .section-h {
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  line-height: 1.12;
  letter-spacing: -0.03em;
  font-weight: 700;
  margin: 0 0 14px;
  color: var(--ink);
}
.agencies-page .section-sub {
  font-size: 1rem;
  color: var(--slate-600);
  margin: 0;
  max-width: 64ch;
  line-height: 1.55;
}

/* ===== PROBLEM SECTION ===== */
.agencies-page .problem {
  background: #FFFFFF;
  border-top: 1px solid var(--slate-200);
  border-bottom: 1px solid var(--slate-200);
}
.agencies-page .section-h .em-ink { color: var(--indigo); }

/* ----- Agencies-scoped overrides for the homepage data-flow widget ----- */
/* Wraps the animated controller in our operator-console box. Animation
   (wires + particles + card swaps) is preserved; visual treatment is
   reset to slate / indigo instead of the homepage's orange / blue / green. */
.agencies-page .flow-widget-wrap--agencies {
  position: relative;
  padding: 0;
  margin-top: 8px;
  background: var(--slate-50);
  border: 1px solid var(--slate-200);
  border-radius: 18px;
  overflow: hidden;
}
.agencies-page .flow-widget-wrap--agencies::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(700px 360px at 88% -5%, rgba(99,102,241,0.10), transparent 60%),
    radial-gradient(540px 280px at 0% 100%, rgba(99,102,241,0.06), transparent 60%);
}
.agencies-page .flow-widget-wrap--agencies .flow-widget {
  padding: 36px 28px;
  position: relative;
  z-index: 1;
}
.agencies-page .flow-widget-wrap--agencies .flow-widget__ambient { display: none; }
.agencies-page .flow-widget-wrap--agencies .flow-widget__scene {
  margin-top: 0;
  min-height: auto;
}
.agencies-page .flow-widget-wrap--agencies .flow-widget__frame {
  padding: 0;
  min-height: auto;
}
.agencies-page .flow-widget-wrap--agencies .flow-widget__grid {
  grid-template-columns: minmax(170px, 220px) minmax(190px, 1fr) minmax(170px, 220px);
  gap: 18px;
  max-width: 1080px;
}
.agencies-page .flow-widget-wrap--agencies .flow-widget__column { gap: 10px; }
.agencies-page .flow-widget-wrap--agencies .flow-widget__column--hub { min-height: auto; }

/* Column labels: tracked uppercase slate-500, matching the section eyebrow */
.agencies-page .flow-widget-wrap--agencies .flow-widget__column-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--slate-500);
  font-weight: 700;
  margin-bottom: 4px;
}

/* Cards: white surface, hairline border, no per-source gradients.
   Override is more specific than .flow-widget__card--booking etc. */
.agencies-page .flow-widget-wrap--agencies .flow-widget__card,
.agencies-page .flow-widget-wrap--agencies .flow-widget__card[class*="flow-widget__card--"] {
  background: #FFFFFF;
  border: 1px solid var(--slate-200);
  border-radius: 10px;
  box-shadow: none;
  padding: 8px 12px 8px 8px;
  font-family: 'Inter', system-ui, sans-serif;
  min-height: 44px;
}
.agencies-page .flow-widget-wrap--agencies .flow-widget__card:hover {
  border-color: var(--slate-300);
  transform: translateY(-1px);
}

/* Card icon tile: 28x28 white with subtle border, mirroring .pipe-logo */
.agencies-page .flow-widget-wrap--agencies .flow-widget__icon,
.agencies-page .flow-widget-wrap--agencies .flow-widget__card[class*="flow-widget__card--"] .flow-widget__icon {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: #FFFFFF;
  border: 1px solid var(--slate-200);
  color: var(--ink);
  display: grid;
  place-items: center;
}
.agencies-page .flow-widget-wrap--agencies .flow-widget__icon-image {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

/* Card name: slate-900 weight 600 13px, tighter tracking */
.agencies-page .flow-widget-wrap--agencies .flow-widget__name {
  color: var(--ink);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: -0.01em;
}

/* Connection dots on each side of the card stay indigo to read with the wires */
.agencies-page .flow-widget-wrap--agencies .flow-widget__dot--source,
.agencies-page .flow-widget-wrap--agencies .flow-widget__dot--dest {
  background: var(--indigo);
  box-shadow: 0 0 8px rgba(79, 70, 229, 0.55);
}

/* Hub: my dark ink card with indigo brand mark, mono URL, feature list */
.agencies-page .flow-widget-wrap--agencies .flow-widget__hub {
  width: auto;
  height: auto;
  min-width: 184px;
  padding: 22px 26px;
  border-radius: 14px;
  background: var(--ink);
  border: 1px solid var(--ink);
  color: #FFFFFF;
  box-shadow: 0 18px 40px -22px rgba(15, 21, 53, 0.55);
  animation: none;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.agencies-page .flow-widget-wrap--agencies .flow-widget__hub::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 16px;
  background: radial-gradient(280px 180px at 50% 0%, rgba(99,102,241,0.42), transparent 65%);
  pointer-events: none;
  z-index: -1;
}
.agencies-page .flow-widget-wrap--agencies .flow-widget__hub-mark {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, #5B52F0, var(--indigo-deep));
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 18px;
  color: #FFFFFF;
  box-shadow: 0 8px 18px -8px rgba(79, 70, 229, 0.6);
}
.agencies-page .flow-widget-wrap--agencies .flow-widget__hub-title {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #FFFFFF;
  margin-top: 4px;
}
.agencies-page .flow-widget-wrap--agencies .flow-widget__hub-subtitle {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 2px;
}
.agencies-page .flow-widget-wrap--agencies .flow-widget__hub-line {
  width: 32px;
  height: 1px;
  background: rgba(255, 255, 255, 0.18);
  margin: 8px 0 4px;
}
.agencies-page .flow-widget-wrap--agencies .flow-widget__hub-features {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.72);
  text-align: center;
  line-height: 1.65;
}
.agencies-page .flow-widget-wrap--agencies .flow-widget__hub-features li { padding: 1px 0; }

/* Mobile arrow between columns: slate-400, no decoration */
.agencies-page .flow-widget-wrap--agencies .flow-widget__mobile-arrow {
  color: var(--slate-400);
}

/* ----- Mobile collapse: single-column stack with hub in the middle ----- */
@media (max-width: 1023px) {
  .agencies-page .flow-widget-wrap--agencies {
    border-radius: 14px;
  }
  .agencies-page .flow-widget-wrap--agencies .flow-widget {
    padding: 22px 14px 18px;
  }
  .agencies-page .flow-widget-wrap--agencies .flow-widget__grid {
    grid-template-columns: 1fr;
    gap: 16px;
    max-width: 100%;
  }
  .agencies-page .flow-widget-wrap--agencies .flow-widget__column {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
    align-items: stretch;
  }
  .agencies-page .flow-widget-wrap--agencies .flow-widget__column-label {
    grid-column: 1 / -1;
    text-align: center;
    margin-top: 4px;
    margin-bottom: 0;
  }
  .agencies-page .flow-widget-wrap--agencies .flow-widget__column--hub {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: auto;
    margin: 4px 0;
  }
  .agencies-page .flow-widget-wrap--agencies .flow-widget__hub {
    min-width: 220px;
    width: auto;
    padding: 18px 24px;
  }
  .agencies-page .flow-widget-wrap--agencies .flow-widget__hub-mark {
    width: 36px;
    height: 36px;
    font-size: 16px;
  }
  .agencies-page .flow-widget-wrap--agencies .flow-widget__card {
    min-height: 38px;
    padding: 6px 8px;
  }
  .agencies-page .flow-widget-wrap--agencies .flow-widget__name {
    font-size: 12px;
  }
  /* Match homepage: hide wires on mobile, show bouncing arrow indicators between groups */
  .agencies-page .flow-widget-wrap--agencies .flow-widget__canvas {
    display: none;
  }
  .agencies-page .flow-widget-wrap--agencies .flow-widget__dot {
    display: none;
  }
}

/* ----- Pipeline diagram: sources → StayAPI hub → destinations ----- */
.agencies-page .pipeline {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 32px;
  padding: 36px 28px;
  background: var(--slate-50);
  border: 1px solid var(--slate-200);
  border-radius: 18px;
  overflow: hidden;
}
.agencies-page .pipeline-wires {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}
.agencies-page .pipeline-col {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.agencies-page .pipeline-col-head {
  font-size: 10px;
  font-weight: 700;
  color: var(--slate-500);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 4px;
}
.agencies-page .pipe-node {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px 8px 8px;
  background: #FFFFFF;
  border: 1px solid var(--slate-200);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.agencies-page .pipe-node .pipe-logo {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: #FFFFFF;
  border: 1px solid var(--slate-200);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  overflow: hidden;
}
.agencies-page .pipe-node .pipe-logo img {
  max-width: 22px;
  max-height: 22px;
  width: auto;
  height: auto;
  object-fit: contain;
}
.agencies-page .pipe-node .pipe-logo .hub-fallback {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 5px;
  background: var(--indigo);
  color: #FFFFFF;
  font-size: 10px;
  font-weight: 800;
}
.agencies-page .pipeline-col.sources .pipe-node { padding-right: 22px; }
.agencies-page .pipeline-col.destinations .pipe-node { padding-left: 22px; }

.agencies-page .pipeline-col.hub {
  align-items: stretch;
  justify-content: center;
}
.agencies-page .hub-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 22px 26px;
  border-radius: 14px;
  background: var(--ink);
  color: #FFFFFF;
  border: 1px solid var(--ink);
  box-shadow: 0 18px 40px -22px rgba(15, 21, 53, 0.55);
  min-width: 184px;
}
.agencies-page .hub-card::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 16px;
  background: radial-gradient(280px 180px at 50% 0%, rgba(99, 102, 241, 0.4), transparent 65%);
  pointer-events: none;
  z-index: -1;
}
.agencies-page .hub-mark {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, #5B52F0, var(--indigo-deep));
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 18px;
  color: #FFFFFF;
  box-shadow: 0 8px 18px -8px rgba(79, 70, 229, 0.6);
}
.agencies-page .hub-name {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-top: 4px;
}
.agencies-page .hub-tag {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 2px;
}
.agencies-page .hub-line {
  width: 32px;
  height: 1px;
  background: rgba(255, 255, 255, 0.18);
  margin: 8px 0 4px;
}
.agencies-page .hub-features {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.72);
  text-align: center;
  line-height: 1.65;
}
.agencies-page .hub-features li { padding: 1px 0; }

/* ----- Delivery destinations widget. Two contexts:
   1) Embedded inside another section (gets margin-top to space from siblings).
   2) Standalone in its own section (no margin-top; the section padding handles it). */
.agencies-page .agencies-delivery {
  margin-top: 36px;
}
.agencies-page .agencies-delivery--standalone { margin-top: 0; }
.agencies-page .agencies-delivery-head {
  max-width: 640px;
  margin: 0 auto 22px;
  text-align: center;
}
.agencies-page .agencies-delivery-h {
  margin: 8px 0 0;
  font-size: clamp(1.3rem, 2.4vw, 1.6rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--ink);
  line-height: 1.2;
}
.agencies-page .agencies-delivery-h .em-ink { color: var(--indigo); }

.agencies-page .agencies-delivery-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: stretch;
}
.agencies-page .agencies-delivery-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border: 1px solid var(--slate-200);
  border-radius: 16px;
  padding: 24px 24px 22px;
  box-shadow:
    0 24px 60px -34px rgba(15, 21, 53, 0.18),
    0 2px 0 rgba(15, 21, 53, 0.02);
}
.agencies-page .agencies-delivery-card-primary {
  background: linear-gradient(180deg, rgba(99, 102, 241, 0.06), #FFFFFF 60%);
}
.agencies-page .agencies-delivery-num {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: linear-gradient(180deg, var(--indigo-soft), #FFFFFF);
  border: 1px solid var(--slate-200);
  color: var(--indigo);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-bottom: 14px;
}
.agencies-page .agencies-delivery-tag {
  position: absolute;
  top: 22px;
  right: 22px;
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--indigo);
  background: var(--indigo-soft);
  padding: 3px 8px;
  border-radius: 999px;
}
.agencies-page .agencies-delivery-card-secondary .agencies-delivery-tag {
  color: var(--slate-500);
  background: var(--slate-50);
  border: 1px solid var(--slate-200);
  padding: 2px 8px;
}
.agencies-page .agencies-delivery-t {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.25;
}
.agencies-page .agencies-delivery-b {
  margin: 0 0 18px;
  font-size: 14px;
  color: var(--slate-600);
  line-height: 1.55;
}
.agencies-page .agencies-delivery-b b { color: var(--ink); font-weight: 600; }

.agencies-page .agencies-delivery-meta {
  list-style: none;
  padding: 0;
  margin: auto 0 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12.5px;
  color: var(--slate-600);
}
.agencies-page .agencies-delivery-meta li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.agencies-page .agencies-delivery-meta .dot,
.agencies-page .agencies-delivery-foot .dot {
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--indigo);
  flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.16);
}

.agencies-page .agencies-delivery-logos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin: auto 0 12px;
}
.agencies-page .agencies-delivery-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--slate-50);
  border: 1px solid var(--slate-200);
  border-radius: 8px;
}
.agencies-page .agencies-delivery-logo img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  flex-shrink: 0;
}
.agencies-page .agencies-delivery-logo span {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.agencies-page .agencies-delivery-foot {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  color: var(--slate-500);
  letter-spacing: 0;
  text-transform: none;
}

@media (max-width: 768px) {
  .agencies-page .agencies-delivery-grid { grid-template-columns: 1fr; }
  .agencies-page .agencies-delivery-logos { grid-template-columns: 1fr; }
}

/* ----- Pipeline takeaways ----- */
.agencies-page .pipeline-takeaways {
  margin-top: 36px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.agencies-page .takeaway {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: start;
}
.agencies-page .takeaway-num {
  font-size: 11px;
  font-weight: 700;
  color: var(--indigo);
  background: var(--indigo-soft);
  padding: 4px 10px;
  border-radius: 6px;
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}
.agencies-page .takeaway h4 {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.015em;
  margin: 0 0 6px;
  line-height: 1.25;
}
.agencies-page .takeaway p {
  font-size: 13.5px;
  color: var(--slate-600);
  line-height: 1.55;
  margin: 0;
}

/* ===== CAPABILITY MATRIX (replaces the bland sources card) ===== */
.agencies-page .capability-matrix {
  border: 1px solid var(--slate-200);
  border-radius: 14px;
  background: #FFFFFF;
  overflow: hidden;
  margin-bottom: 48px;
}
.agencies-page .cap-row {
  display: grid;
  grid-template-columns: 2.2fr 1fr 1fr 1fr 1fr;
  align-items: center;
  border-bottom: 1px solid var(--slate-200);
}
.agencies-page .cap-row:last-of-type { border-bottom: 0; }
.agencies-page .cap-row.cap-head {
  background: #FAFAFD;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: var(--slate-500);
  border-bottom: 1px solid var(--slate-200);
}
.agencies-page .cap-row.cap-head .cap-cell {
  padding: 12px 14px;
}
.agencies-page .cap-cell {
  padding: 14px 16px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.agencies-page .cap-cell.name {
  text-align: left;
  display: flex;
  align-items: center;
  gap: 12px;
}
.agencies-page .cap-cell .cap-logo {
  width: 32px;
  height: 32px;
  border-radius: 7px;
  background: #FFFFFF;
  border: 1px solid var(--slate-200);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  overflow: hidden;
}
.agencies-page .cap-cell .cap-logo img {
  max-width: 24px;
  max-height: 24px;
  object-fit: contain;
}
.agencies-page .cap-cell .cap-name {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.agencies-page .cap-cell.yes { color: var(--signal-up); }
.agencies-page .cap-cell.yes svg { display: inline-block; vertical-align: middle; }
.agencies-page .cap-cell.no { color: var(--slate-300); font-weight: 700; }
.agencies-page .cap-foot {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 18px;
  background: var(--slate-50);
  border-top: 1px solid var(--slate-200);
  font-size: 12.5px;
  color: var(--slate-600);
  line-height: 1.55;
}
.agencies-page .cap-foot .dot-mark {
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  margin-top: 7px;
  border-radius: 99px;
  background: var(--indigo);
  box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.16);
}
.agencies-page .cap-foot b { color: var(--ink); font-weight: 600; }

/* ===== FEATURE QUAD (under the capability matrix) ===== */
.agencies-page .feature-quad {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px 40px;
}
.agencies-page .feature-quad .feat {
  display: grid;
  grid-template-rows: auto auto auto;
}
.agencies-page .feature-quad .feat .num-marker {
  display: inline-block;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
  color: var(--indigo);
  background: var(--indigo-soft);
  padding: 4px 10px;
  border-radius: 6px;
  margin-bottom: 10px;
  width: fit-content;
  font-variant-numeric: tabular-nums;
}
.agencies-page .feature-quad .feat h4 {
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 6px;
  letter-spacing: -0.015em;
  line-height: 1.25;
}
.agencies-page .feature-quad .feat p {
  font-size: 14px;
  color: var(--slate-600);
  line-height: 1.55;
  margin: 0;
}
.agencies-page .feature-quad .feat p b { color: var(--ink); font-weight: 600; }

/* ===== FEATURES (What you get) ===== */
.agencies-page .features-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 32px;
  align-items: start;
}
.agencies-page .platforms-card {
  background: #FFFFFF;
  border: 1px solid var(--slate-200);
  border-radius: 14px;
  padding: 24px 26px;
  display: flex;
  flex-direction: column;
}
.agencies-page .platforms-card h3 {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin: 0 0 18px;
}
.agencies-page .platforms-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid var(--slate-200);
}
.agencies-page .platforms-list .plat {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--slate-200);
  font-size: 13px;
}
.agencies-page .platforms-list .plat:nth-child(odd) { padding-right: 14px; }
.agencies-page .platforms-list .plat:nth-child(even) { padding-left: 14px; border-left: 1px solid var(--slate-200); }
.agencies-page .platforms-list .plat .plat-mark {
  width: 22px;
  height: 22px;
  border-radius: 5px;
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: -0.01em;
}
.agencies-page .platforms-list .plat .plat-name {
  font-weight: 600;
  color: var(--ink);
}
.agencies-page .platforms-list .plat .plat-tag {
  font-size: 10px;
  font-weight: 600;
  color: var(--slate-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-variant-numeric: tabular-nums;
}
.agencies-page .platforms-list .plat .plat-tag.direct {
  color: var(--indigo);
}
.agencies-page .platforms-foot {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px dashed var(--slate-200);
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 12.5px;
  color: var(--slate-600);
  line-height: 1.5;
}
.agencies-page .platforms-foot b { color: var(--ink); font-weight: 600; }
.agencies-page .platforms-foot .dot-mark {
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  margin-top: 7px;
  border-radius: 99px;
  background: var(--indigo);
  box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.16);
}
.agencies-page .feature-list {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.agencies-page .feature-list .feat {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: start;
}
.agencies-page .feature-list .feat .num-marker {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
  color: var(--indigo);
  background: var(--indigo-soft);
  padding: 4px 10px;
  border-radius: 6px;
  letter-spacing: 0;
  margin-top: 1px;
  font-variant-numeric: tabular-nums;
}
.agencies-page .feature-list .feat h4 {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}
.agencies-page .feature-list .feat p {
  font-size: 13.5px;
  color: var(--slate-600);
  line-height: 1.55;
  margin: 0;
}
.agencies-page .feature-list .feat p b { color: var(--ink); font-weight: 600; }

/* ===== WORKFLOW (Built for the agency workflow) ===== */
.agencies-page .workflow {
  background: var(--ink);
  color: #FFFFFF;
  position: relative;
  overflow: hidden;
}
.agencies-page .workflow::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(800px 400px at 90% 0%, rgba(99, 102, 241, 0.18), transparent 60%),
    radial-gradient(560px 320px at 0% 100%, rgba(99, 102, 241, 0.10), transparent 60%);
}
.agencies-page .workflow .section-eyebrow { color: var(--indigo-2); }
.agencies-page .workflow .section-h { color: #FFFFFF; }
.agencies-page .workflow .section-sub { color: rgba(255, 255, 255, 0.7); }
.agencies-page .workflow-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  position: relative;
  z-index: 1;
}
.agencies-page .workflow-steps .step {
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 14px;
  padding: 26px;
  background: rgba(255, 255, 255, 0.02);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.agencies-page .workflow-steps .step .step-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.agencies-page .workflow-steps .step .step-tag .num {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: rgba(99, 102, 241, 0.15);
  color: var(--indigo-2);
  font-weight: 700;
  font-family: inherit;
  font-size: 11px;
}
.agencies-page .workflow-steps .step h4 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #FFFFFF;
  line-height: 1.2;
}
.agencies-page .workflow-steps .step p {
  margin: 0;
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.55;
}
.agencies-page .workflow-steps .step p b { color: #FFFFFF; font-weight: 600; }

/* ===== DEMO DASHBOARDS GRID ===== */
.agencies-page .demos {
  background: #FFFFFF;
  border-top: 1px solid var(--slate-200);
  border-bottom: 1px solid var(--slate-200);
}
.agencies-page .demos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.agencies-page .demo-card {
  display: flex;
  flex-direction: column;
  background: var(--slate-50);
  border: 1px solid var(--slate-200);
  border-radius: 14px;
  overflow: hidden;
  transition: transform .18s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow .18s cubic-bezier(0.22, 1, 0.36, 1),
              border-color .18s cubic-bezier(0.22, 1, 0.36, 1);
}
.agencies-page .demo-card:hover {
  transform: translateY(-2px);
  border-color: var(--slate-300);
  box-shadow: 0 18px 40px -22px rgba(15, 21, 53, 0.20);
}
.agencies-page .demo-card .thumb {
  aspect-ratio: 16 / 10;
  background: #FFFFFF;
  border-bottom: 1px solid var(--slate-200);
  position: relative;
  overflow: hidden;
}
.agencies-page .demo-card .thumb svg { width: 100%; height: 100%; display: block; }
.agencies-page .demo-card .meta {
  padding: 16px 18px 18px;
}
.agencies-page .demo-card h4 {
  margin: 0 0 4px;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.agencies-page .demo-card p {
  margin: 0;
  font-size: 12.5px;
  color: var(--slate-500);
  line-height: 1.5;
}
.agencies-page .demos-foot {
  margin-top: 28px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: var(--slate-500);
}
.agencies-page .demos-foot a { color: var(--indigo); font-weight: 600; }
.agencies-page .demos-foot a:hover { color: var(--indigo-deep); }

/* ===== FAQ ===== */
.agencies-page .faq-list {
  border-top: 1px solid var(--slate-200);
}
.agencies-page .faq-item {
  border-bottom: 1px solid var(--slate-200);
}
.agencies-page .faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
  transition: color .12s ease;
}
.agencies-page .faq-item summary::-webkit-details-marker { display: none; }
.agencies-page .faq-item summary:hover { color: var(--indigo); }
.agencies-page .faq-item summary .toggle {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 99px;
  border: 1px solid var(--slate-200);
  display: grid;
  place-items: center;
  color: var(--slate-500);
  transition: transform .18s cubic-bezier(0.22, 1, 0.36, 1),
              border-color .18s ease,
              color .18s ease;
}
.agencies-page .faq-item[open] summary .toggle {
  transform: rotate(45deg);
  border-color: var(--indigo);
  color: var(--indigo);
}
.agencies-page .faq-answer {
  padding: 0 0 24px;
  font-size: 14.5px;
  color: var(--slate-600);
  line-height: 1.65;
  max-width: 70ch;
}
.agencies-page .faq-answer p { margin: 0 0 10px; }
.agencies-page .faq-answer p:last-child { margin: 0; }
.agencies-page .faq-answer b { color: var(--ink); font-weight: 600; }
.agencies-page .faq-answer a { color: var(--indigo); font-weight: 500; }
.agencies-page .faq-answer a:hover { color: var(--indigo-deep); }

/* ===== FINAL CTA ===== */
.agencies-page .close {
  background: var(--ink);
  color: #FFFFFF;
  position: relative;
  overflow: hidden;
}
.agencies-page .close::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(720px 400px at 70% 0%, rgba(99, 102, 241, 0.20), transparent 65%),
    radial-gradient(540px 320px at 0% 100%, rgba(99, 102, 241, 0.10), transparent 60%);
}
.agencies-page .close-inner {
  position: relative;
  z-index: 1;
  padding: 80px 0;
  max-width: 720px;
}
.agencies-page .close h2 {
  font-size: clamp(1.9rem, 3.6vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.05;
  margin: 0 0 18px;
  color: #FFFFFF;
}
.agencies-page .close h2 .em { color: var(--indigo-2); }
.agencies-page .close p {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.55;
  margin: 0 0 28px;
}
.agencies-page .close p b { color: #FFFFFF; font-weight: 600; }
.agencies-page .close .close-cta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
}
.agencies-page .close .close-cta .btn-primary {
  background: var(--indigo);
}
.agencies-page .close .close-cta .btn-primary:hover {
  background: #5851EE;
}
.agencies-page .close .close-cta .btn-ghost {
  background: transparent;
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.22);
}
.agencies-page .close .close-cta .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.36);
}
.agencies-page .close .close-detail {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 26px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
  font-weight: 500;
}
.agencies-page .close .close-detail span { display: inline-flex; align-items: center; gap: 6px; }
.agencies-page .close .close-detail svg { color: var(--indigo-2); }

/* ===== PAGE FOOTER ===== */
.agencies-page .agencies-foot {
  background: var(--slate-50);
  border-top: 1px solid var(--slate-200);
  padding: 40px 0 56px;
}
.agencies-page .foot-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 32px;
  flex-wrap: wrap;
}
.agencies-page .foot-row .lead {
  font-size: 13px;
  color: var(--slate-600);
  max-width: 360px;
  line-height: 1.55;
}
.agencies-page .foot-row .foot-links {
  display: flex;
  gap: 22px;
  font-size: 13px;
  color: var(--slate-600);
  font-weight: 500;
}
.agencies-page .foot-row .foot-links a:hover { color: var(--ink); }
.agencies-page .foot-meta {
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--slate-200);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--slate-500);
}
.agencies-page .foot-meta a { color: var(--slate-500); }
.agencies-page .foot-meta a:hover { color: var(--ink); }

/* ===== MOBILE ===== */
@media (max-width: 1023px) {
  .agencies-page .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .agencies-page .hero { padding: 40px 0 48px; }
  .agencies-page .demos-grid { grid-template-columns: repeat(2, 1fr); }
  .agencies-page .workflow-steps { grid-template-columns: 1fr; gap: 14px; }
  .agencies-page .pipeline { grid-template-columns: 1fr; gap: 20px; padding: 24px 18px; }
  .agencies-page .pipeline-wires { display: none; }
  .agencies-page .pipeline-col.sources, .agencies-page .pipeline-col.destinations {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
  }
  .agencies-page .pipeline-col.sources .pipe-node, .agencies-page .pipeline-col.destinations .pipe-node {
    padding: 6px 12px 6px 6px;
    font-size: 12px;
  }
  .agencies-page .pipeline-col-head { flex-basis: 100%; margin-bottom: 0; }
  .agencies-page .pipeline-col.hub { align-items: center; }
  .agencies-page .pipeline-takeaways { grid-template-columns: 1fr; gap: 22px; }
  .agencies-page .feature-quad { grid-template-columns: 1fr; gap: 24px; }
  .agencies-page .reviews-summary { grid-template-columns: 1fr; }
  .agencies-page .reviews-topics { grid-template-columns: 1fr; }
  .agencies-page .section { padding: 56px 0; }
  .agencies-page .close-inner { padding: 56px 0; }
  .agencies-page .float-chip { display: none; }
}

@media (max-width: 1023px) {
  .agencies-page .client-strip-row {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px 24px;
  }
}

@media (max-width: 720px) {
  .agencies-page .wrap { padding: 0 20px; }
  .agencies-page h1.hero-h {
    font-size: 1.7rem;
    letter-spacing: -0.03em;
    line-height: 1.05;
  }
  .agencies-page .client-strip-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px 16px;
  }
  .agencies-page .client-mark { font-size: 15px; }
  .agencies-page .nav-links { display: none; }
  .agencies-page .nav-cta .pill-link { display: none; }
  .agencies-page .nav-inner { height: 60px; }
  .agencies-page .hero { padding: 32px 0 44px; }
  .agencies-page .hero-cta { flex-direction: column; align-items: stretch; }
  .agencies-page .hero-cta .btn { width: 100%; justify-content: center; }
  .agencies-page .hero-meta { gap: 14px; font-size: 12.5px; }
  .agencies-page .dash { max-width: 100%; padding: 12px; transform: none; }
  .agencies-page .kpi-row { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .agencies-page .props-row { grid-template-columns: 1.4fr 0.8fr 0.6fr; }
  .agencies-page .props-row > div:nth-child(3) .stars { display: none; }
  .agencies-page .props-row > div:nth-child(4) { display: none; }
  .agencies-page .props-row.head > div:nth-child(4) { display: none; }
  .agencies-page .metric-tile { grid-template-columns: 1fr; gap: 4px; padding: 18px; }
  .agencies-page .metric-tile .cell { border-left: 0; border-top: 1px solid var(--slate-200); padding: 14px 0 0; }
  .agencies-page .metric-tile .cell:first-child { border-top: 0; padding-top: 0; }
  .agencies-page .demos-grid { grid-template-columns: 1fr; }
  .agencies-page .close .close-cta { flex-direction: column; align-items: stretch; }
  .agencies-page .close .close-cta .btn { width: 100%; justify-content: center; }
  /* Capability matrix collapses to 3 cols on narrow phones */
  .agencies-page .cap-row { grid-template-columns: 2fr 1fr 1fr 1fr; }
  .agencies-page .cap-cell.col-availability,
  .agencies-page .cap-row > .cap-cell:nth-child(5) { display: none; }
  .agencies-page .rates-row { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .agencies-page * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .agencies-page .dash { transform: none; }
  .agencies-page .btn:hover { transform: none; }
  .agencies-page .demo-card:hover { transform: none; }
}

/* ===== Powerful Use Cases dot field (top-down, behind section content) ===== */
.agencies-page .agencies-use-cases {
  position: relative;
  overflow: hidden;
}
.agencies-page .agencies-use-cases > .wrap {
  position: relative;
  z-index: 1;
}
.agencies-page .agencies-use-cases-dots {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.85) 25%, rgba(0, 0, 0, 0.35) 45%, rgba(0, 0, 0, 0) 65%);
          mask-image: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.85) 25%, rgba(0, 0, 0, 0.35) 45%, rgba(0, 0, 0, 0) 65%);
}
/*
 * StayAPI auth surfaces — Operator's Console design language.
 * Scoped under .auth-page. Light theme only.
 * Sister stylesheets: agencies.css, developers.css, price_intelligence.css.
 */

html:has(.auth-page),
body:has(.auth-page) {
  overflow-x: clip;
}

.auth-page {
  --ink: #0B1020;
  --ink-2: #1A2040;
  --indigo: #4F46E5;
  --indigo-2: #6366F1;
  --indigo-deep: #4338CA;
  --indigo-soft: #EEF0FF;
  --slate-50: #FBFAFC;
  --slate-100: #F4F5F8;
  --slate-200: #E7E9EF;
  --slate-300: #D2D6E0;
  --slate-400: #9AA0B4;
  --slate-500: #6B7090;
  --slate-600: #454A6A;
  --signal-up: #10B981;
  --signal-up-soft: #E7F8F1;
  --signal-dn: #E45858;
  --signal-dn-soft: #FDECEC;

  position: relative;
  min-height: 100vh;
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
  background: var(--slate-50);
  color: var(--ink);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
}

.auth-page * { box-sizing: border-box; }

/* Hero atmosphere — low-chroma radial wash, lifted from DESIGN.md §4. */
.auth-page::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(620px 320px at 92% -10%, rgba(99, 102, 241, 0.10), transparent 60%),
    radial-gradient(520px 280px at 8% 110%, rgba(99, 102, 241, 0.08), transparent 60%);
}

.auth-page > * {
  position: relative;
  z-index: 1;
}

@media (max-width: 1023px) {
  .auth-page::before {
    background:
      radial-gradient(420px 240px at 100% -8%, rgba(99, 102, 241, 0.08), transparent 60%);
  }
}

/* ---------- Auth chrome (top bar) ---------- */

.auth-chrome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 40px 0;
  max-width: 1240px;
  width: 100%;
  margin: 0 auto;
}

.auth-chrome__logo {
  display: inline-flex;
  align-items: center;
  height: 32px;
  text-decoration: none;
}

.auth-chrome__mark {
  position: relative;
  width: 104px;
  height: 28px;
  display: inline-block;
}

.auth-chrome__mark > span {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #5B52F0, #3B30CC);
}

.auth-chrome__aside {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: var(--slate-500);
}

.auth-chrome__aside-link {
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(79, 70, 229, 0.45);
  padding-bottom: 1px;
  transition: border-color .12s ease, color .12s ease;
}

.auth-chrome__aside-link:hover {
  color: var(--indigo);
  border-bottom-color: var(--indigo);
}

@media (max-width: 1023px) {
  .auth-chrome { padding: 20px 24px 0; }
}

@media (max-width: 560px) {
  .auth-chrome__aside { font-size: 12.5px; }
  .auth-chrome__aside-prefix { display: none; }
}

/* ---------- Stage (form column + proof column) ---------- */

.auth-stage {
  flex: 1 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px;
  align-items: center;
  max-width: 1240px;
  width: 100%;
  margin: 0 auto;
  padding: 56px 40px 64px;
  box-sizing: border-box;
}

.auth-stage--narrow {
  grid-template-columns: minmax(0, 560px);
  justify-content: center;
}

@media (max-width: 1023px) {
  .auth-stage {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
    padding: 36px 24px 48px;
  }
}

@media (max-width: 560px) {
  .auth-stage { padding: 28px 20px 40px; }
}

/* ---------- Form column ---------- */

.auth-form-col {
  max-width: 480px;
  width: 100%;
  margin-left: auto;
}

@media (max-width: 1023px) {
  .auth-form-col { margin: 0 auto; }
}

.auth-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #FFFFFF;
  border: 1px solid var(--slate-200);
  color: var(--slate-600);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 6px 12px;
  border-radius: 999px;
}

.auth-eyebrow__dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--indigo);
  box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.16) inset, 0 0 0 0 rgba(79, 70, 229, 0.16);
  flex-shrink: 0;
}

.auth-h1 {
  font-family: Inter, system-ui, sans-serif;
  font-size: clamp(2rem, 3.6vw, 2.75rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.032em;
  color: var(--ink);
  margin: 16px 0 14px;
}

.auth-h1 .em {
  color: var(--indigo);
  font-weight: 800;
}

.auth-sub {
  font-size: 15px;
  line-height: 1.55;
  color: var(--slate-600);
  margin: 0 0 24px;
  max-width: 44ch;
}

.auth-h1 + .auth-card { margin-top: 10px; }

/* ---------- Form card ---------- */

.auth-card {
  background: #FFFFFF;
  border: 1px solid var(--slate-200);
  border-radius: 14px;
  padding: 22px;
  box-shadow:
    0 24px 60px -34px rgba(15, 21, 53, 0.18),
    0 2px 0 rgba(15, 21, 53, 0.02);
}

.auth-card__form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.auth-field { display: flex; flex-direction: column; gap: 6px; }

.auth-field__label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--slate-500);
}

.auth-field__label-aside {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--slate-400);
}

.auth-field__label-aside a {
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(79, 70, 229, 0.45);
  padding-bottom: 1px;
  transition: border-color .12s ease, color .12s ease;
}

.auth-field__label-aside a:hover {
  color: var(--indigo);
  border-bottom-color: var(--indigo);
}

.auth-field__hint {
  font-size: 12.5px;
  color: var(--slate-500);
  line-height: 1.4;
}

.auth-input {
  width: 100%;
  appearance: none;
  background: var(--slate-50);
  color: var(--ink);
  border: 1px solid var(--slate-200);
  border-radius: 10px;
  padding: 11px 13px;
  font: inherit;
  font-size: 14.5px;
  line-height: 1.4;
  letter-spacing: -0.005em;
  transition: border-color .12s ease, box-shadow .12s ease, background .12s ease;
}

.auth-input::placeholder { color: var(--slate-400); }

.auth-input:hover { border-color: var(--slate-300); }

.auth-input:focus,
.auth-input:focus-visible {
  outline: none;
  background: #FFFFFF;
  border-color: var(--indigo);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.18);
}

.auth-input--error {
  border-color: var(--signal-dn);
  background: #FFFCFC;
}

.auth-input--error:focus,
.auth-input--error:focus-visible {
  border-color: var(--signal-dn);
  box-shadow: 0 0 0 3px rgba(228, 88, 88, 0.18);
}

/* Remember-me row */

.auth-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: -2px;
}

.auth-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  font-size: 13px;
  color: var(--slate-600);
}

.auth-checkbox input {
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1px solid var(--slate-300);
  background: #FFFFFF;
  display: inline-grid;
  place-content: center;
  cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
}

.auth-checkbox input:hover { border-color: var(--slate-400); }

.auth-checkbox input:checked {
  background: var(--indigo);
  border-color: var(--indigo);
}

.auth-checkbox input:checked::after {
  content: "";
  width: 9px;
  height: 5px;
  border: 2px solid #FFFFFF;
  border-top: 0;
  border-right: 0;
  transform: rotate(-45deg) translate(1px, -1px);
}

.auth-checkbox input:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.18);
}

.auth-link {
  color: var(--slate-600);
  font-size: 13px;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .12s ease, border-color .12s ease;
}

.auth-link:hover {
  color: var(--ink);
  border-bottom-color: var(--slate-300);
}

.auth-link--em {
  color: var(--ink);
  font-weight: 600;
  border-bottom: 1px solid rgba(79, 70, 229, 0.45);
}

.auth-link--em:hover {
  color: var(--indigo);
  border-bottom-color: var(--indigo);
}

/* ---------- Buttons ---------- */

.auth-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  background: var(--indigo);
  color: var(--slate-50);
  font: inherit;
  font-weight: 600;
  font-size: 14.5px;
  letter-spacing: -0.005em;
  border: 1px solid var(--indigo);
  border-radius: 10px;
  padding: 12px 18px;
  cursor: pointer;
  transition: background .12s ease, transform .12s ease, box-shadow .12s ease;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.18) inset,
    0 8px 22px -8px rgba(79, 70, 229, 0.55);
}

.auth-btn:hover {
  background: var(--indigo-deep);
  border-color: var(--indigo-deep);
  transform: translateY(-1px);
}

.auth-btn:active { transform: translateY(0); }

.auth-btn:focus-visible {
  outline: none;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.18) inset,
    0 0 0 3px rgba(79, 70, 229, 0.30),
    0 8px 22px -8px rgba(79, 70, 229, 0.55);
}

.auth-btn:disabled,
.auth-btn[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.7;
}

.auth-btn__text { transition: opacity .15s ease; }
.auth-btn__spinner {
  position: absolute;
  inset: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity .15s ease;
}

.auth-btn__spinner svg {
  width: 18px;
  height: 18px;
  animation: auth-spin 0.7s linear infinite;
}

@keyframes auth-spin { to { transform: rotate(360deg); } }

.auth-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  font-size: 13.5px;
  border: 1px solid var(--slate-200);
  border-radius: 10px;
  padding: 10px 16px;
  text-decoration: none;
  transition: border-color .12s ease, color .12s ease;
}

.auth-btn-secondary:hover {
  border-color: var(--slate-300);
  color: var(--ink);
}

/* ---------- Footer line beneath the card ---------- */

.auth-card-foot {
  margin-top: 18px;
  font-size: 13px;
  color: var(--slate-500);
  line-height: 1.5;
}

.auth-card-foot a {
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(79, 70, 229, 0.45);
  padding-bottom: 1px;
  transition: border-color .12s ease, color .12s ease;
}

.auth-card-foot a:hover {
  color: var(--indigo);
  border-bottom-color: var(--indigo);
}

.auth-fineprint {
  margin-top: 14px;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--slate-500);
}

.auth-fineprint a {
  color: var(--slate-600);
  text-decoration: none;
  border-bottom: 1px solid var(--slate-200);
  transition: color .12s ease, border-color .12s ease;
}

.auth-fineprint a:hover {
  color: var(--ink);
  border-bottom-color: var(--slate-400);
}

/* ---------- Validation error block ---------- */

.auth-errors {
  background: var(--signal-dn-soft);
  border: 1px solid rgba(228, 88, 88, 0.35);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 4px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.auth-errors__head {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  color: #8E2A2A;
}

.auth-errors__dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--signal-dn);
  box-shadow: 0 0 0 3px rgba(228, 88, 88, 0.18);
  flex-shrink: 0;
}

.auth-errors__list {
  list-style: none;
  margin: 0;
  padding: 0 0 0 17px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  color: #8E2A2A;
}

.auth-errors__list li {
  position: relative;
  line-height: 1.45;
}

.auth-errors__list li::before {
  content: "·";
  position: absolute;
  left: -10px;
  top: -1px;
  color: rgba(142, 42, 42, 0.55);
  font-weight: 700;
}

/* ---------- Proof panel (operator-console sliver) ---------- */

.auth-proof {
  max-width: 520px;
  width: 100%;
  align-self: center;
}

@media (max-width: 1023px) {
  .auth-proof { display: none; }
}

.auth-proof__intro {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--slate-500);
  margin: 0 0 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.auth-proof__intro::before {
  content: "";
  width: 14px;
  height: 1px;
  background: var(--slate-300);
}

.auth-proof__card {
  position: relative;
  background: #FFFFFF;
  border: 1px solid var(--slate-200);
  border-radius: 14px;
  padding: 18px 18px 16px;
  box-shadow:
    0 24px 60px -28px rgba(15, 21, 53, 0.22),
    0 2px 0 rgba(15, 21, 53, 0.02);
  transform: rotate(-0.3deg);
}

.auth-proof__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: 1px dashed var(--slate-200);
  margin-bottom: 14px;
}

.auth-proof__hotel {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.auth-proof__hotel-name {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.012em;
  color: var(--ink);
}

.auth-proof__hotel-meta {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
  color: var(--slate-500);
  letter-spacing: 0;
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.auth-proof__hotel-meta .dot {
  display: inline-block;
  width: 3px;
  height: 3px;
  border-radius: 999px;
  background: var(--slate-300);
}

.auth-proof__amber { color: #B6831F; }

.auth-proof__parity-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(180deg, rgba(99, 102, 241, 0.16), rgba(99, 102, 241, 0.08));
  border: 1px solid rgba(99, 102, 241, 0.25);
  color: var(--indigo);
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 5px 10px;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
}

.auth-proof__parity-pill strong {
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--indigo);
}

.auth-proof__kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 1px solid var(--slate-200);
  border-radius: 8px;
  overflow: hidden;
}

.auth-proof__kpi {
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--slate-50);
}

.auth-proof__kpi + .auth-proof__kpi {
  border-left: 1px solid var(--slate-200);
}

.auth-proof__kpi-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate-500);
}

.auth-proof__kpi-value {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--ink);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}

.auth-proof__kpi-unit {
  font-size: 10px;
  font-weight: 600;
  color: var(--slate-500);
  letter-spacing: 0;
}

.auth-proof__delta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: var(--signal-up-soft);
  color: var(--signal-up);
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 9.5px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 999px;
  margin-left: 2px;
  vertical-align: middle;
}

.auth-proof__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--slate-200);
}

.auth-proof__sync {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
  color: var(--slate-500);
}

.auth-proof__sync-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--signal-up);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18);
}

.auth-proof__route {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
  color: var(--slate-500);
}

.auth-proof__route code {
  font: inherit;
  background: var(--slate-50);
  border: 1px solid var(--slate-200);
  border-radius: 4px;
  padding: 1px 6px;
  color: var(--ink);
}

.auth-proof__caption {
  margin-top: 18px;
  font-size: 12.5px;
  color: var(--slate-500);
  line-height: 1.5;
  max-width: 38ch;
}

/* ---------- Proof panel: customer logos variant ---------- */

.auth-proof__card--logos {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  transform: none;
}

.auth-proof__logo-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  min-width: 0;
}

.auth-proof__logo {
  height: 64px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  opacity: 0.85;
  filter: grayscale(0.08);
  transition: opacity .2s cubic-bezier(.2,.8,.2,1), filter .2s cubic-bezier(.2,.8,.2,1);
}

.auth-proof__logo-cell:hover .auth-proof__logo {
  opacity: 1;
  filter: none;
}

.auth-proof__logo--small {
  height: 50px;
  border-radius: 6px;
}

/* Mobile reassurance strip — replaces proof panel below 640px. */

.auth-proof-strip {
  display: none;
}

@media (max-width: 1023px) {
  .auth-proof { display: none; }
  .auth-proof-strip { display: inline-flex; }
}

@media (max-width: 560px) {
  .auth-proof-strip { display: none; }
}

/* ---------- Sticky bottom legal strip on confirmable / unlock surfaces ---------- */

.auth-aux-card .auth-card__body {
  font-size: 13.5px;
  color: var(--slate-600);
  line-height: 1.55;
  margin-bottom: 16px;
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .auth-btn,
  .auth-input,
  .auth-checkbox input,
  .auth-link,
  .auth-card-foot a {
    transition: none;
  }
  .auth-btn:hover { transform: none; }
  .auth-btn__spinner svg { animation-duration: 0s; }
}
/* ============================================================
   StayAPI — /book-demo and /book-demo/confirmation
   Scoped under .agencies-page.book-demo-page so the operator-console
   tokens (buttons, eyebrow, .hero, .close, .section, .problem,
   .section-h, etc.) flow in from agencies.css. This file only
   declares what the agencies cascade does not already cover:
     - briefing-and-form 2-column hero grid
     - left-column numbered agenda list
     - right-column form skin
     - light-theme reassurance row
     - "what you get back" 3-up deliverables
     - confirmation page timeline rail + sample dashboard tiles
   ============================================================ */

/* ===== HERO LAYOUT ===== */
.agencies-page.book-demo-page .hero {
  padding: 56px 0 48px;
}
.agencies-page.book-demo-page .book-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.85fr;
  gap: 56px;
  align-items: start;
  position: relative;
  z-index: 1;
}
.agencies-page.book-demo-page .hero-h {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: clamp(2rem, 4vw, 3.1rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.035em;
  margin: 0 0 18px;
  color: var(--ink);
}
.agencies-page.book-demo-page .hero-h .em { color: var(--indigo); }
.agencies-page.book-demo-page .hero-sub {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--slate-600);
  max-width: 56ch;
  margin: 0 0 28px;
}
.agencies-page.book-demo-page .hero-sub b {
  color: var(--ink);
  font-weight: 600;
}

/* ===== BRIEFING AGENDA (left column) ===== */
.agencies-page.book-demo-page .book-brief {
  list-style: none;
  margin: 8px 0 28px;
  padding: 0;
  display: grid;
  gap: 14px;
}
.agencies-page.book-demo-page .book-brief-row {
  background: #FFFFFF;
  border: 1px solid var(--slate-200);
  border-radius: 12px;
  padding: 16px 18px 18px;
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 14px;
  align-items: start;
}
.agencies-page.book-demo-page .book-brief-num {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--indigo);
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.agencies-page.book-demo-page .book-brief-h {
  margin: 2px 0 4px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.25;
  color: var(--ink);
}
.agencies-page.book-demo-page .book-brief-p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--slate-600);
  max-width: 60ch;
}
.agencies-page.book-demo-page .book-brief-dot {
  width: 6px;
  height: 6px;
  border-radius: 99px;
  background: var(--signal-up);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18);
  display: inline-block;
}

/* ===== HOSTED-BY MICRO-CARD ===== */
.agencies-page.book-demo-page .book-host {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--slate-50);
  border: 1px solid var(--slate-200);
  border-radius: 12px;
  padding: 14px 18px;
}
.agencies-page.book-demo-page .book-host-stack {
  display: inline-flex;
  align-items: center;
}
.agencies-page.book-demo-page .book-host-avatar {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  overflow: hidden;
  border: 2px solid #FFFFFF;
  background: var(--slate-100);
  flex-shrink: 0;
  box-shadow: 0 2px 6px -2px rgba(15, 21, 53, 0.18);
}
.agencies-page.book-demo-page .book-host-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.agencies-page.book-demo-page .book-host-avatar.front {
  margin-left: -10px;
  position: relative;
  z-index: 2;
}
.agencies-page.book-demo-page .book-host-avatar.back {
  position: relative;
  z-index: 1;
}
.agencies-page.book-demo-page .book-host-line {
  font-size: 13.5px;
  color: var(--slate-600);
  line-height: 1.4;
}
.agencies-page.book-demo-page .book-host-line b {
  color: var(--ink);
  font-weight: 600;
}
.agencies-page.book-demo-page .book-host-meta {
  font-size: 12px;
  color: var(--slate-500);
  margin-top: 2px;
  line-height: 1.4;
}

/* ===== FORM CARD (right column) ===== */
.agencies-page.book-demo-page .book-form-card {
  background: #FFFFFF;
  border: 1px solid var(--slate-200);
  border-radius: 14px;
  padding: 26px 26px 22px;
  position: sticky;
  top: 24px;
  box-shadow:
    0 24px 60px -28px rgba(15, 21, 53, 0.22),
    0 2px 0 rgba(15, 21, 53, 0.02);
}
.agencies-page.book-demo-page .book-form-head {
  margin-bottom: 22px;
}
.agencies-page.book-demo-page .book-form-eyebrow {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--indigo);
  margin-bottom: 10px;
}
.agencies-page.book-demo-page .book-form-h {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.agencies-page.book-demo-page .book-form {
  display: grid;
  gap: 16px;
}
.agencies-page.book-demo-page .book-form-row {
  display: grid;
  gap: 6px;
}
.agencies-page.book-demo-page .book-form-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--slate-600);
  letter-spacing: 0.005em;
}
.agencies-page.book-demo-page .book-form-input,
.agencies-page.book-demo-page .book-form-textarea {
  width: 100%;
  background: var(--slate-50);
  border: 1px solid var(--slate-200);
  border-radius: 8px;
  padding: 11px 12px;
  font-family: inherit;
  font-size: 14px;
  color: var(--ink);
  line-height: 1.4;
  transition: border-color .12s ease, box-shadow .12s ease, background .12s ease;
  -webkit-appearance: none;
  appearance: none;
}
.agencies-page.book-demo-page .book-form-input::placeholder,
.agencies-page.book-demo-page .book-form-textarea::placeholder {
  color: var(--slate-400);
}
.agencies-page.book-demo-page .book-form-input:hover,
.agencies-page.book-demo-page .book-form-textarea:hover {
  border-color: var(--slate-300);
}
.agencies-page.book-demo-page .book-form-input:focus,
.agencies-page.book-demo-page .book-form-textarea:focus {
  outline: none;
  background: #FFFFFF;
  border-color: var(--indigo);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.14);
}
.agencies-page.book-demo-page .book-form-textarea {
  resize: vertical;
  min-height: 110px;
  font-family: inherit;
}

.agencies-page.book-demo-page .book-form-hint {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 10.5px;
  margin-top: 4px;
}
.agencies-page.book-demo-page .book-form-chip {
  background: var(--slate-50);
  border: 1px solid var(--slate-200);
  border-radius: 4px;
  padding: 2px 7px;
  color: var(--slate-600);
  font-weight: 500;
}
.agencies-page.book-demo-page .book-form-chip-trail {
  font-style: italic;
  color: var(--slate-500);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11.5px;
  margin-left: 2px;
}

.agencies-page.book-demo-page .book-form-actions {
  display: grid;
  gap: 10px;
  margin-top: 4px;
}
.agencies-page.book-demo-page .book-form-submit {
  width: 100%;
  justify-content: center;
}
.agencies-page.book-demo-page .book-form-fine {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--slate-500);
}
.agencies-page.book-demo-page .book-form-fine a {
  color: var(--indigo);
  font-weight: 500;
}
.agencies-page.book-demo-page .book-form-fine a:hover { color: var(--indigo-deep); }

.agencies-page.book-demo-page .book-form-foot {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--slate-200);
  font-size: 12.5px;
  color: var(--slate-500);
}
.agencies-page.book-demo-page .book-form-foot a {
  color: var(--indigo);
  font-weight: 500;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
.agencies-page.book-demo-page .book-form-foot a:hover { color: var(--indigo-deep); }

/* ===== CONFIRMATION PAGE ===== */
.agencies-page.book-confirm-page .hero {
  padding: 72px 0 80px;
}
.agencies-page.book-confirm-page .confirm-wrap {
  max-width: 1040px;
}
.agencies-page.book-confirm-page .confirm-head {
  max-width: 640px;
  margin: 0 auto 40px;
  text-align: center;
}
.agencies-page.book-confirm-page .confirm-head .eyebrow .dot.live {
  background: var(--signal-up);
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.16);
}
.agencies-page.book-confirm-page .confirm-head .hero-sub {
  margin-left: auto;
  margin-right: auto;
}

/* Timeline rail (re-scoped from price-intelligence.css). */
.agencies-page.book-confirm-page .timeline-rail {
  list-style: none;
  margin: 0 0 32px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  position: relative;
}
.agencies-page.book-confirm-page .timeline-step {
  background: #FFFFFF;
  border: 1px solid var(--slate-200);
  border-radius: 12px;
  padding: 22px 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
}
.agencies-page.book-confirm-page .timeline-step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -14px;
  width: 14px;
  height: 1px;
  background: linear-gradient(90deg, var(--slate-300) 0%, transparent 100%);
}
.agencies-page.book-confirm-page .timeline-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--indigo-soft);
  color: var(--indigo);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.agencies-page.book-confirm-page .timeline-step h4 {
  margin: 4px 0 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.015em;
  line-height: 1.25;
}
.agencies-page.book-confirm-page .timeline-step p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--slate-600);
}

/* ===== TABLET ===== */
@media (max-width: 1023px) {
  .agencies-page.book-demo-page .book-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .agencies-page.book-demo-page .book-form-card {
    position: static;
  }
  .agencies-page.book-demo-page .hero { padding: 36px 0 32px; }
  .agencies-page.book-confirm-page .timeline-rail { grid-template-columns: 1fr; }
  .agencies-page.book-confirm-page .timeline-step:not(:last-child)::after { display: none; }
  .agencies-page.book-confirm-page .hero { padding: 48px 0 56px; }
}

/* ===== MOBILE ===== */
@media (max-width: 720px) {
  .agencies-page.book-demo-page .hero { padding: 24px 0 28px; }
  .agencies-page.book-demo-page .hero-h {
    font-size: 1.75rem;
    letter-spacing: -0.03em;
    line-height: 1.08;
  }
  .agencies-page.book-demo-page .book-form-card { padding: 22px 20px 18px; }
  .agencies-page.book-demo-page .book-brief-row { padding: 14px 14px 16px; gap: 12px; }
  .agencies-page.book-demo-page .book-brief-num { width: 26px; height: 26px; font-size: 10px; }
  .agencies-page.book-demo-page .book-brief-row { grid-template-columns: 26px 1fr; }
  .agencies-page.book-demo-page .book-host { flex-direction: column; align-items: flex-start; }
}

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
  .agencies-page.book-demo-page .book-form-input,
  .agencies-page.book-demo-page .book-form-textarea {
    transition-duration: 0.001ms !important;
  }
}
/* ============================================================
   StayAPI — /contact
   Scoped under .agencies-page.contact-page so the operator-console
   tokens flow in from agencies.css. Centered single-column form;
   no left-column briefing.
   ============================================================ */

.agencies-page.contact-page .hero {
  padding: 56px 0 64px;
}
.agencies-page.contact-page .contact-wrap {
  max-width: 560px;
  margin: 0 auto;
  padding: 0 28px;
  position: relative;
  z-index: 1;
}

.agencies-page.contact-page .contact-head {
  text-align: center;
  margin-bottom: 28px;
}
.agencies-page.contact-page .hero-h {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.035em;
  margin: 0 0 14px;
  color: var(--ink);
}
.agencies-page.contact-page .hero-h .em { color: var(--indigo); }
.agencies-page.contact-page .hero-sub {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--slate-600);
  margin: 0 auto;
  max-width: 44ch;
}

/* ===== FORM CARD ===== */
.agencies-page.contact-page .contact-form-card {
  background: #FFFFFF;
  border: 1px solid var(--slate-200);
  border-radius: 14px;
  padding: 26px 26px 22px;
  box-shadow:
    0 24px 60px -28px rgba(15, 21, 53, 0.22),
    0 2px 0 rgba(15, 21, 53, 0.02);
}

.agencies-page.contact-page .contact-form {
  display: grid;
  gap: 16px;
}
.agencies-page.contact-page .contact-form-row {
  display: grid;
  gap: 6px;
}
.agencies-page.contact-page .contact-form-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--slate-600);
  letter-spacing: 0.005em;
}
.agencies-page.contact-page .contact-form-input,
.agencies-page.contact-page .contact-form-textarea {
  width: 100%;
  background: var(--slate-50);
  border: 1px solid var(--slate-200);
  border-radius: 8px;
  padding: 11px 12px;
  font-family: inherit;
  font-size: 14px;
  color: var(--ink);
  line-height: 1.4;
  transition: border-color .12s ease, box-shadow .12s ease, background .12s ease;
  -webkit-appearance: none;
  appearance: none;
}
.agencies-page.contact-page .contact-form-input::placeholder,
.agencies-page.contact-page .contact-form-textarea::placeholder {
  color: var(--slate-400);
}
.agencies-page.contact-page .contact-form-input:hover,
.agencies-page.contact-page .contact-form-textarea:hover {
  border-color: var(--slate-300);
}
.agencies-page.contact-page .contact-form-input:focus,
.agencies-page.contact-page .contact-form-textarea:focus {
  outline: none;
  background: #FFFFFF;
  border-color: var(--indigo);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.14);
}
.agencies-page.contact-page .contact-form-textarea {
  resize: vertical;
  min-height: 130px;
  font-family: inherit;
}

.agencies-page.contact-page .contact-form-actions {
  display: grid;
  gap: 10px;
  margin-top: 4px;
}
.agencies-page.contact-page .contact-form-submit {
  width: 100%;
  justify-content: center;
}
.agencies-page.contact-page .contact-form-fine {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--slate-500);
  text-align: center;
}
.agencies-page.contact-page .contact-form-fine a {
  color: var(--indigo);
  font-weight: 500;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
.agencies-page.contact-page .contact-form-fine a:hover { color: var(--indigo-deep); }

/* ===== MOBILE ===== */
@media (max-width: 720px) {
  .agencies-page.contact-page .hero { padding: 28px 0 36px; }
  .agencies-page.contact-page .contact-form-card { padding: 22px 20px 18px; }
}

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
  .agencies-page.contact-page .contact-form-input,
  .agencies-page.contact-page .contact-form-textarea {
    transition-duration: 0.001ms !important;
  }
}
/* ============================================================
   StayAPI — /developers landing
   Additive layer on top of agencies.css. The developers page wraps in
   .agencies-page.developers-page so it inherits every base pattern
   (.btn, .section, .feature-quad, .faq-list, .close, .eyebrow, etc.)
   This file declares only the patterns this page introduces:
     • Vertical hero (copy block + full-width artifact)
     • Dual-terminal pair on the ink palette (re-skin of homepage widget)
     • Three-up sub-points row
     • Endpoint family table (mono-prefixed rows, NOT cards)
     • Pricing follow-up footer
     • Two-card final CTA on dark surface
   ============================================================ */

/* ===== HERO override: vertical, copy block above, artifact below ===== */
/* Bottom padding kept tight: the client-strip wordmarks already provide
   visual closure for the hero, so we don't need a large gap below them. */
.developers-page .hero.hero-vertical {
  padding: 56px 0 34px;
}
/* Hero dot field, top-down. Sits behind the hero content via z-index: 0.
   Hero is already position: relative + overflow: hidden via .agencies-page
   base styles, so no parent reset needed. */
.developers-page .developers-hero-dots {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.85) 28%, rgba(0, 0, 0, 0.35) 55%, rgba(0, 0, 0, 0) 75%);
          mask-image: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.85) 28%, rgba(0, 0, 0, 0.35) 55%, rgba(0, 0, 0, 0) 75%);
}
.developers-page .hero.hero-vertical > .wrap { position: relative; z-index: 1; }
/* Center the hero copy as a single column; the agencies grid override
   doesn't apply here because the hero markup uses .wrap > .hero-copy
   directly, no .hero-grid wrapper. */
.developers-page .hero-copy.hero-copy-centered {
  max-width: 760px;
  margin: 0 auto 44px;
  text-align: center;
}
.developers-page .hero-copy-centered .hero-sub {
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
}
.developers-page .hero-copy-centered .hero-cta {
  justify-content: center;
}
/* Trust line: dot-separated, tabular nums on the metrics. */
.developers-page .hero-meta-trust {
  justify-content: center;
  gap: 16px;
  font-size: 13px;
  color: var(--slate-500);
  font-weight: 500;
}
.developers-page .hero-meta-trust b.num {
  color: var(--ink);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.developers-page .hero-meta-trust .dotsep {
  color: var(--slate-300);
  font-weight: 700;
}

/* The hero artifact wrap: a single floating tab strip above two terminal
   cards. One controller scopes everything; the strip swaps both card bodies
   in lockstep. Visually each terminal floats as its own card. */
.developers-page .hero .terminal-pair-wrap {
  max-width: 1180px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

/* Token scope shared with the dark terminals + use-case row. */
.developers-page .terminal-pair-wrap {
  --term-bg: #0B1020;          /* same as --ink */
  --term-bg-2: #161B36;        /* one step lighter */
  --term-line: rgba(255, 255, 255, 0.08);
  --term-text: #C8CCE0;
  --term-mute: #7A809E;
  --term-cmd: #A5B4FC;         /* indigo-300 */
  --term-flag: #6B7090;
  --term-key: #C7D2FE;         /* indigo-200 */
  --term-str: #FBBF77;         /* warm tonal balance, used sparingly */
  --term-num: #5EEAD4;         /* one cool accent — readable on indigo-tinted dark */
  --term-bool: #F9A8D4;
  --term-null: #94A3B8;
}

/* ===== FLOATING TAB STRIP (single control above both terminals) ===== */
.developers-page .term-tabs-strip {
  position: relative;
  display: inline-flex;
  background: #FFFFFF;
  border: 1px solid var(--slate-200);
  border-radius: 12px;
  padding: 4px;
  gap: 2px;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  box-shadow:
    0 1px 0 rgba(15, 21, 53, 0.02),
    0 8px 22px -14px rgba(15, 21, 53, 0.18);
  /* Right-edge fade affordance: signals scrollability when the 6 tabs
     overflow on narrow widths. The mask is applied to the scrolling
     container itself so it tracks the visible viewport, not the content. */
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 24px), transparent 100%);
          mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 24px), transparent 100%);
}
@media (min-width: 1024px) {
  /* Above the breakpoint where tabs always fit, drop the fade. */
  .developers-page .term-tabs-strip {
    -webkit-mask-image: none;
            mask-image: none;
  }
}
.developers-page .term-tabs-strip::-webkit-scrollbar { display: none; }
.developers-page .term-tabs-strip .term-tab {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  background: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--slate-500);
  letter-spacing: -0.005em;
  transition: color .14s ease, background .14s ease;
  position: relative;
}
.developers-page .term-tabs-strip .term-tab:hover { color: var(--ink); }
.developers-page .term-tabs-strip .term-tab.is-active {
  color: var(--ink);
  background: var(--slate-50);
  box-shadow:
    inset 0 0 0 1px var(--slate-200),
    0 0 0 0 rgba(79, 70, 229, 0);
}
.developers-page .term-tabs-strip .term-tab.is-active::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 4px;
  height: 2px;
  background: var(--indigo);
  border-radius: 2px;
}
.developers-page .term-tabs-strip .term-tab:focus-visible {
  outline: 2px solid var(--indigo);
  outline-offset: 2px;
}
/* Unclickable "And more…" hint, slotted after the last real tab.
   Signals the strip is a sample, not the full endpoint catalog.
   No hover state, no active state, not focusable — just a static label. */
.developers-page .term-tabs-strip .term-tab-more {
  color: var(--slate-400);
  font-style: italic;
  font-weight: 500;
  cursor: default;
  pointer-events: none;
  padding-left: 16px;
  padding-right: 14px;
  position: relative;
}
.developers-page .term-tabs-strip .term-tab-more::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: var(--slate-200);
}
.developers-page .term-tabs-strip .term-tab-more:hover {
  color: var(--slate-400);
  background: transparent;
}

/* ===== HERO ACTIONS (CTAs + trust line, below the terminal pair) ===== */
.developers-page .hero-actions {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.developers-page .hero-actions .hero-cta {
  margin-bottom: 0;
}

/* ===== TERMINAL CARDS (two floating widgets, side by side) ===== */
.developers-page .term-pair-grid {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  align-items: start;
}

.developers-page .term-card {
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  overflow: hidden;
  background: var(--term-bg);
  border: 1px solid var(--slate-200);
  box-shadow:
    0 24px 60px -28px rgba(15, 21, 53, 0.32),
    0 2px 0 rgba(15, 21, 53, 0.02);
  min-width: 0;
}

/* ===== USE CASE ROW (request terminal only) =====
   Subtle indigo-tinted info bar above the curl. Mirrors the homepage
   Integrate-in-Minutes pattern, restyled to the operator-console palette. */
.developers-page .term-use-case {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 14px;
  padding: 10px 12px;
  border: 1px solid rgba(99, 102, 241, 0.22);
  background: linear-gradient(
    180deg,
    rgba(99, 102, 241, 0.10),
    rgba(99, 102, 241, 0.04)
  );
  border-radius: 8px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12.5px;
  line-height: 1.45;
  color: rgba(199, 210, 254, 0.92);
}
.developers-page .term-use-icon {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 5px;
  flex-shrink: 0;
  background: rgba(99, 102, 241, 0.22);
  color: var(--indigo-2);
  margin-top: 1px;
}
.developers-page .term-use-label {
  flex-shrink: 0;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--indigo-2);
  text-transform: uppercase;
  margin-top: 4px;
}
.developers-page .term-use-text {
  color: rgba(255, 255, 255, 0.78);
}

/* ----- Terminal body inside each card ----- */
.developers-page .term {
  display: flex;
  flex-direction: column;
  background: var(--term-bg);
  min-width: 0;
}
.developers-page .term-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 11px 14px;
  background: var(--term-bg-2);
  border-bottom: 1px solid var(--term-line);
}
.developers-page .term-bar-left {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.developers-page .term-dots {
  display: inline-flex;
  gap: 5px;
}
.developers-page .term-dots .dot {
  width: 9px;
  height: 9px;
  border-radius: 99px;
}
.developers-page .term-dots .dot-r { background: #E45858; }
.developers-page .term-dots .dot-y { background: #E0A93B; }
.developers-page .term-dots .dot-g { background: #10B981; }
.developers-page .term-label {
  font-size: 10px;
  letter-spacing: 0.14em;
  font-weight: 600;
  color: var(--term-mute);
  text-transform: uppercase;
}
.developers-page .term-method-pill {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--indigo-2);
  background: rgba(99, 102, 241, 0.15);
  padding: 2px 7px;
  border-radius: 4px;
}
.developers-page .term-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--signal-up);
  text-transform: uppercase;
}
.developers-page .term-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 99px;
  background: var(--signal-up);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18);
}
.developers-page .term-timing {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--term-mute);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.developers-page .term-timing-dot {
  width: 5px;
  height: 5px;
  border-radius: 99px;
  background: var(--term-mute);
}
.developers-page .term-copy {
  background: transparent;
  border: 0;
  color: var(--term-mute);
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  transition: color .14s ease, background .14s ease;
}
.developers-page .term-copy:hover {
  color: var(--term-text);
  background: rgba(255, 255, 255, 0.04);
}
.developers-page .term-copy.text-green-600 {
  /* tabs_controller.js adds this Tailwind utility for "Copied!" feedback;
     scope a calmer color so the dark terminal stays coherent. */
  color: var(--signal-up) !important;
}

.developers-page .term-body {
  padding: 18px 18px 22px;
  height: 360px;
  overflow-y: auto;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--term-text);
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.16) transparent;
}
.developers-page .term-body::-webkit-scrollbar { width: 8px; height: 8px; }
.developers-page .term-body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 99px;
}
.developers-page .term-body pre {
  margin: 0;
  white-space: pre;
  font-family: inherit;
  color: var(--term-text);
}
.developers-page .term-body .hidden { display: none; }

/* Syntax highlight tokens — kept tight, indigo-leaning. */
.developers-page .term-body .t-cmd  { color: var(--term-cmd); font-weight: 600; }
.developers-page .term-body .t-flag { color: var(--term-flag); }
.developers-page .term-body .t-str  { color: var(--term-str); }
.developers-page .term-body .t-key  { color: var(--term-key); }
.developers-page .term-body .j-key  { color: var(--term-key); }
.developers-page .term-body .j-str  { color: var(--term-str); }
.developers-page .term-body .j-num  { color: var(--term-num); font-variant-numeric: tabular-nums; }
.developers-page .term-body .j-bool { color: var(--term-bool); }
.developers-page .term-body .j-null { color: var(--term-null); font-style: italic; }

/* Cursor injected by terminal_theater_controller during typing animation */
.developers-page .terminal-cursor {
  display: inline-block;
  margin-left: 1px;
  color: var(--indigo-2);
  animation: term-cursor-blink 1s steps(1) infinite;
}
@keyframes term-cursor-blink {
  50% { opacity: 0; }
}

/* ===== PROBLEM section: column-axis comparison table =====
   Options as columns (Build / Buy / StayAPI), criteria as rows.
   StayAPI column gets indigo wash + indigo number tile to mark the answer. */
.developers-page .problem-table {
  border: 1px solid var(--slate-200);
  border-radius: 14px;
  overflow: hidden;
  background: #FFFFFF;
  box-shadow: 0 2px 0 rgba(15, 21, 53, 0.02);
}
.developers-page .problem-table-row {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr 1.1fr;
  align-items: stretch;
  border-bottom: 1px solid var(--slate-200);
}
.developers-page .problem-table-row:last-child { border-bottom: 0; }

.developers-page .problem-table-cell {
  padding: 18px 22px;
  min-width: 0;
  display: flex;
  align-items: center;
}

/* Header row: option names as column titles. */
.developers-page .problem-table-head {
  background: #FAFAFD;
}
.developers-page .head-compare-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--slate-400);
  text-transform: uppercase;
}
.developers-page .option-head-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 22px;
}
.developers-page .option-num {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--slate-500);
  background: var(--slate-100);
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.developers-page .option-name {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.015em;
  line-height: 1.2;
}

/* Body rows: criterion label on the left (left-aligned), three values
   across (center-aligned). Pain columns stay light/plain weight; the
   StayAPI column overrides below to read as bold + indigo. */
.developers-page .criterion-cell {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--slate-500);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.developers-page .val {
  font-size: 14.5px;
  color: var(--slate-600);
  font-weight: 500;
  line-height: 1.4;
  justify-content: center;
  text-align: center;
}
.developers-page .val.mono {
  font-variant-numeric: tabular-nums;
  color: var(--slate-600);
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* StayAPI column treatment — applied to all cells in column 4.
   The indigo wash carries the emphasis without a side stripe. */
.developers-page .option-head-us {
  background: linear-gradient(
    180deg,
    rgba(99, 102, 241, 0.16),
    rgba(99, 102, 241, 0.08)
  );
}
.developers-page .option-head-us .option-num {
  background: var(--indigo);
  color: #FFFFFF;
}
.developers-page .val-us {
  background: linear-gradient(
    180deg,
    rgba(99, 102, 241, 0.06),
    rgba(99, 102, 241, 0.03)
  );
  color: var(--ink);
  font-weight: 700;
}
.developers-page .val-us.mono {
  color: var(--indigo);
  font-weight: 700;
}

/* CTA row below the table */
.developers-page .problem-cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 28px;
}

/* Tablet: tighten cell padding so the table still fits comfortably. */
@media (max-width: 1023px) {
  .developers-page .problem-table-row { grid-template-columns: 1fr 0.95fr 0.95fr 1.05fr; }
  .developers-page .problem-table-cell { padding: 14px 14px; }
  .developers-page .option-head-cell { padding: 14px; gap: 8px; }
  .developers-page .val { font-size: 13.5px; }
  .developers-page .criterion-cell { font-size: 11px; }
}

/* Mobile: collapse table into per-criterion stacked cards.
   Each row becomes a card with criterion as header + 3 option-value pairs. */
@media (max-width: 720px) {
  .developers-page .problem-table {
    border: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  /* Hide the column-header row entirely */
  .developers-page .problem-table-head { display: none; }
  .developers-page .problem-table-row {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: #FFFFFF;
    border: 1px solid var(--slate-200);
    border-radius: 12px;
    overflow: hidden;
  }
  .developers-page .problem-table-cell { padding: 12px 16px; }
  .developers-page .criterion-cell {
    background: #FAFAFD;
    border-bottom: 1px solid var(--slate-200);
    padding: 10px 16px;
    font-size: 10.5px;
    letter-spacing: 0.08em;
  }
  /* Each value cell shows its option name inline via data-option ::before */
  .developers-page .val {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    border-bottom: 1px solid var(--slate-200);
  }
  .developers-page .val:last-child { border-bottom: 0; }
  .developers-page .val[data-option]::before {
    content: attr(data-option);
    font-size: 11px;
    font-weight: 600;
    color: var(--slate-500);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    flex-shrink: 0;
  }
  /* On mobile the indigo column collapses; the val-us cells get the wash. */
  .developers-page .val-us {
    background: linear-gradient(
      180deg,
      rgba(99, 102, 241, 0.08),
      rgba(99, 102, 241, 0.03)
    );
  }
  .developers-page .val-us[data-option]::before {
    color: var(--indigo);
    font-weight: 700;
  }
  .developers-page .problem-cta { margin-top: 18px; flex-direction: column; align-items: stretch; }
  .developers-page .problem-cta .btn { width: 100%; justify-content: center; }
}

/* ===== THREE-UP (Try-it-free sub-points) ===== */
.developers-page .three-up {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  background: #FFFFFF;
  border: 1px solid var(--slate-200);
  border-radius: 14px;
  overflow: hidden;
}
.developers-page .three-up-cell {
  padding: 26px 26px 28px;
  border-left: 1px solid var(--slate-200);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.developers-page .three-up-cell:first-child { border-left: 0; }
.developers-page .three-up-num {
  font-size: 28px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.developers-page .three-up-cell h4 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.015em;
  line-height: 1.2;
}
.developers-page .three-up-cell p {
  margin: 0;
  font-size: 13.5px;
  color: var(--slate-600);
  line-height: 1.55;
}
.developers-page .three-up-cell p b { color: var(--ink); font-weight: 600; }
.developers-page .three-up-cell a {
  color: var(--ink);
  border-bottom: 1px solid var(--slate-300);
  transition: border-color .14s ease, color .14s ease;
}
.developers-page .three-up-cell a:hover {
  color: var(--indigo);
  border-bottom-color: var(--indigo);
}
.developers-page .three-up-foot {
  margin: 22px 0 0;
  font-size: 13.5px;
  color: var(--slate-500);
}
.developers-page .three-up-foot a {
  color: var(--indigo);
  font-weight: 600;
  margin-left: 6px;
}
.developers-page .three-up-foot a:hover { color: var(--indigo-deep); }

/* ===== COVERAGE MATRIX ===== */
/* The matrix itself is .capability-matrix from agencies.css. The developers
   page only needs the "endpoints-foot" link styling and the letter-mark fallback
   for sources without a logo (e.g. Marriott Bonvoy). */

/* Drop the border-bottom on the last data row so it doesn't stack with
   .cap-foot's border-top (which would read as a doubled hairline).
   :nth-last-child(2) targets the row immediately before .cap-foot. */
.developers-page .capability-matrix .cap-row:nth-last-child(2) {
  border-bottom: 0;
}
/* Letter-mark fallback for sources without a logo asset (e.g. Marriott Bonvoy).
   Inherits the .cap-logo 32×32 container; we override the white fill with an
   indigo tonal gradient and drop the border. */
.developers-page .cap-logo.cap-logo-mark {
  background: linear-gradient(135deg, #5B52F0, var(--indigo-deep));
  border-color: transparent;
  color: #FFFFFF;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: -0.01em;
}
.developers-page .endpoints-foot {
  margin-top: 22px;
  text-align: right;
  font-size: 14px;
}
.developers-page .endpoints-foot a {
  color: var(--indigo);
  font-weight: 600;
}
.developers-page .endpoints-foot a:hover { color: var(--indigo-deep); }

/* ===== PRICING follow-up footer ===== */
.developers-page .pricing-foot {
  margin-top: 36px;
  display: flex;
  justify-content: flex-start;
}

/* Inline indigo link, used in section subs */
.developers-page .inline-link {
  color: var(--indigo);
  font-weight: 500;
  border-bottom: 1px solid rgba(79, 70, 229, 0.28);
  transition: border-color .14s ease;
}
.developers-page .inline-link:hover { border-bottom-color: var(--indigo); }

/* FAQ uses the .problem class (white panel with hairlines) so it separates
   visually from the matrix section above (which sits on slate-50). */

/* ===== BUILD THIS (use-case tabs) =====
   4-tab section showing what developers ship with StayAPI. Tab strip floats
   above (reuses .term-tabs-strip from the hero), each panel is a 2-column
   grid: a purpose-built CSS mock on the left, h3 + bullets + CTA on the right.
   Lives between the coverage matrix and the FAQ. */

.developers-page .section-head-centered {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.developers-page .section-head-centered .section-sub {
  margin-left: auto;
  margin-right: auto;
}

.developers-page .build-tabs {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}

.developers-page .build-panel {
  width: 100%;
  background: #FFFFFF;
  border: 1px solid var(--slate-200);
  border-radius: 14px;
  padding: 28px;
  box-shadow:
    0 24px 60px -32px rgba(15, 21, 53, 0.18),
    0 2px 0 rgba(15, 21, 53, 0.02);
}
.developers-page .build-panel.hidden { display: none; }

.developers-page .build-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 32px;
  align-items: stretch;
}

/* ----- Right column: copy -----
   Flex column with the CTA pinned to the bottom (margin-top: auto), so the
   button stays in the same vertical position as the user clicks through
   tabs even when bullet copy varies in length. The heading stays anchored
   at the top because it's the first flex item. */
.developers-page .build-copy {
  display: flex;
  flex-direction: column;
  gap: 18px;
  height: 100%;
}
.developers-page .build-copy h3 {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--ink);
}
.developers-page .build-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14.5px;
  color: var(--slate-600);
  line-height: 1.5;
}
.developers-page .build-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.developers-page .build-list li::before {
  content: "";
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 99px;
  background: var(--indigo);
  margin-top: 8px;
}
.developers-page .build-list li b { color: var(--ink); font-weight: 600; }
.developers-page .build-cta {
  align-self: flex-start;
  margin-top: auto;
}

/* ===== MOCK BASE =====
   Each tab's mock is a white-on-slate surface inside the panel.
   Fixed min-height so the panel doesn't grow/shrink as the user clicks
   through tabs (the AI agent mock is naturally the tallest at ~380px;
   we set the floor higher so all four normalize to the same panel height). */
.developers-page .build-mock {
  background: var(--slate-50);
  border: 1px solid var(--slate-200);
  border-radius: 12px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 340px;
  font-size: 12px;
}
.developers-page .build-mock .bm-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--slate-200);
}
.developers-page .build-mock .bm-name {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
  line-height: 1.2;
}
.developers-page .build-mock .bm-meta {
  margin-top: 3px;
  font-size: 11px;
  color: var(--slate-500);
  font-weight: 500;
}
.developers-page .build-mock .bm-fresh {
  font-size: 10px;
  color: var(--slate-500);
  font-weight: 500;
  white-space: nowrap;
}

/* ===== MOCK 1 — Review monitor ===== */
.developers-page .build-mock-review .bm-block {
  background: #FFFFFF;
  border: 1px solid var(--slate-200);
  border-radius: 8px;
  padding: 12px 14px;
}
.developers-page .build-mock-review .bm-block-label {
  font-size: 9.5px;
  font-weight: 600;
  color: var(--slate-500);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.developers-page .build-mock-review .bm-sent-bar {
  display: flex;
  height: 10px;
  border-radius: 3px;
  overflow: hidden;
  margin-top: 8px;
  background: var(--slate-100);
}
.developers-page .build-mock-review .bm-sent-pos { background: var(--signal-up); }
.developers-page .build-mock-review .bm-sent-neu { background: var(--rating-amber); }
.developers-page .build-mock-review .bm-sent-neg { background: var(--signal-dn); }
.developers-page .build-mock-review .bm-sent-legend {
  display: flex;
  gap: 12px;
  margin-top: 8px;
  font-size: 10.5px;
  color: var(--slate-500);
}
.developers-page .build-mock-review .bm-sent-legend b { color: var(--ink); font-weight: 700; }
.developers-page .build-mock-review .bm-reviews {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.developers-page .build-mock-review .bm-review {
  background: #FFFFFF;
  border: 1px solid var(--slate-200);
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.developers-page .build-mock-review .bm-review-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2px;
}
.developers-page .build-mock-review .bm-review-source {
  font-size: 9.5px;
  font-weight: 700;
  color: var(--indigo);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.developers-page .build-mock-review .bm-review-stars {
  color: var(--rating-amber);
  font-size: 10px;
  letter-spacing: 0.5px;
}
.developers-page .build-mock-review .bm-review .bm-star-half { opacity: 0.4; }
.developers-page .build-mock-review .bm-review p {
  margin: 0;
  font-size: 11.5px;
  color: var(--ink);
  line-height: 1.4;
}
.developers-page .build-mock-review .bm-review-meta {
  font-size: 10px;
  color: var(--slate-500);
}

/* ===== MOCK 2 — Rate parity ===== */
.developers-page .build-mock-rates .bm-rates-table {
  background: #FFFFFF;
  border: 1px solid var(--slate-200);
  border-radius: 8px;
  overflow: hidden;
}
.developers-page .build-mock-rates .bm-rates-row {
  display: grid;
  grid-template-columns: 0.7fr 1fr 1fr 1.25fr 1fr;
  align-items: center;
  padding: 10px 12px;
  border-bottom: 1px solid var(--slate-200);
  gap: 8px;
  font-size: 11.5px;
}
.developers-page .build-mock-rates .bm-rates-row:last-child { border-bottom: 0; }
.developers-page .build-mock-rates .bm-rates-head {
  background: #FAFAFD;
  font-size: 9.5px;
  font-weight: 700;
  color: var(--slate-500);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 8px 12px;
}
.developers-page .build-mock-rates .bm-date { color: var(--slate-500); font-weight: 600; }
.developers-page .build-mock-rates .mono { font-variant-numeric: tabular-nums; color: var(--ink); }
.developers-page .build-mock-rates .bm-pill {
  display: inline-flex;
  align-items: center;
  font-size: 9.5px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 99px;
  margin-left: 4px;
  background: var(--signal-up-soft);
  color: var(--signal-up);
}
.developers-page .build-mock-rates .bm-rates-row > div:last-child b {
  color: var(--indigo);
  font-weight: 700;
}

/* ===== MOCK 3 — AI travel agent ===== */
.developers-page .build-mock-agent {
  background: #FFFFFF;
  padding: 0;
  overflow: hidden;
}
.developers-page .build-mock-agent .bm-chat {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
}
.developers-page .build-mock-agent .bm-chat-msg {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.developers-page .build-mock-agent .bm-chat-avatar {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: var(--slate-100);
  color: var(--slate-500);
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
}
.developers-page .build-mock-agent .bm-chat-avatar-agent {
  background: var(--indigo);
  color: #FFFFFF;
}
.developers-page .build-mock-agent .bm-chat-body {
  flex: 1;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink);
  padding-top: 4px;
  min-width: 0;
}
.developers-page .build-mock-agent .bm-chat-body p { margin: 0 0 10px; color: var(--slate-600); }
.developers-page .build-mock-agent .bm-chat-user .bm-chat-body {
  color: var(--slate-700, var(--slate-600));
  font-weight: 500;
}
.developers-page .build-mock-agent .bm-suggest {
  background: var(--slate-50);
  border: 1px solid var(--slate-200);
  border-radius: 8px;
  padding: 10px 12px;
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.developers-page .build-mock-agent .bm-suggest-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.developers-page .build-mock-agent .bm-suggest-name {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.developers-page .build-mock-agent .bm-suggest-rate {
  font-size: 12px;
  font-weight: 700;
  color: var(--indigo);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.developers-page .build-mock-agent .bm-suggest-meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.developers-page .build-mock-agent .bm-tag {
  display: inline-flex;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 99px;
  background: #FFFFFF;
  border: 1px solid var(--slate-200);
  color: var(--slate-600);
}

/* ===== MOCK 4 — Hotel finder ===== */
.developers-page .build-mock-finder .bm-search {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  background: #FFFFFF;
  border: 1px solid var(--slate-200);
  border-radius: 10px;
  font-size: 12.5px;
  color: var(--ink);
}
.developers-page .build-mock-finder .bm-search-icon {
  color: var(--indigo);
  display: inline-flex;
}
.developers-page .build-mock-finder .bm-search-text {
  flex: 1;
  font-weight: 500;
}
.developers-page .build-mock-finder .bm-search-count {
  font-size: 10.5px;
  color: var(--slate-500);
  font-weight: 600;
  white-space: nowrap;
}
.developers-page .build-mock-finder .bm-finder-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.developers-page .build-mock-finder .bm-finder-row {
  background: #FFFFFF;
  border: 1px solid var(--slate-200);
  border-radius: 8px;
  padding: 12px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
}
.developers-page .build-mock-finder .bm-finder-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.developers-page .build-mock-finder .bm-finder-meta {
  font-size: 11px;
  color: var(--slate-500);
  margin-top: 2px;
}
.developers-page .build-mock-finder .bm-finder-channels {
  display: flex;
  gap: 4px;
  margin-top: 8px;
}
.developers-page .build-mock-finder .bm-channel-pill {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 5px;
  font-size: 10px;
  font-weight: 700;
  color: var(--slate-600);
  background: var(--slate-100);
  border: 1px solid var(--slate-200);
}
.developers-page .build-mock-finder .bm-finder-price {
  font-size: 18px;
  font-weight: 800;
  color: var(--indigo);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ===== Mobile / tablet collapse ===== */
@media (max-width: 1023px) {
  .developers-page .build-grid { grid-template-columns: 1fr; gap: 22px; }
  .developers-page .build-mock { min-height: 0; }
  .developers-page .build-panel { padding: 22px; }
  .developers-page .build-mock-review .bm-reviews { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .developers-page .build-panel { padding: 18px; }
  .developers-page .build-copy h3 { font-size: 19px; }
  .developers-page .build-mock { padding: 14px; }
  .developers-page .build-cta { width: 100%; justify-content: center; }
  /* Rate parity: collapse to 4-col (drop YOUR SITE) on narrow phones */
  .developers-page .build-mock-rates .bm-rates-row { grid-template-columns: 0.7fr 1fr 1fr 1.2fr; }
  .developers-page .build-mock-rates .bm-rates-row > div:nth-child(5) { display: none; }
}

/* ===== FINAL CTA: two cards side by side on dark surface ===== */
.developers-page .close.close-dual { padding: 0; }
.developers-page .close.close-dual::before {
  background:
    radial-gradient(820px 480px at 50% 0%, rgba(99, 102, 241, 0.22), transparent 65%),
    radial-gradient(540px 320px at 0% 100%, rgba(99, 102, 241, 0.10), transparent 60%);
}
.developers-page .close-dual-inner {
  position: relative;
  z-index: 1;
  padding: 88px 0 96px;
}
.developers-page .close-head {
  max-width: 720px;
  margin: 0 auto 44px;
  text-align: center;
}
.developers-page .close-head h2 {
  font-size: clamp(1.9rem, 3.6vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.05;
  margin: 0 0 12px;
  color: #FFFFFF;
}
.developers-page .close-head h2 .em { color: var(--indigo-2); }
.developers-page .close-head p {
  margin: 0;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.62);
}
.developers-page .close-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.developers-page .close-card {
  position: relative;
  border-radius: 16px;
  padding: 28px 28px 30px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* Left card — primary path. Subtle indigo lift; not a "callout border" */
.developers-page .close-card-primary {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(165, 180, 252, 0.22);
  box-shadow:
    0 0 0 1px rgba(99, 102, 241, 0.08) inset,
    0 24px 60px -32px rgba(99, 102, 241, 0.55);
}
.developers-page .close-card-secondary {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.10);
}
.developers-page .close-card-eyebrow {
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(199, 210, 254, 0.62);
}
.developers-page .close-card h3 {
  margin: 0;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: #FFFFFF;
  line-height: 1.1;
}
.developers-page .close-card > p {
  margin: 0;
  font-size: 14.5px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.55;
  /* Push everything below the description to the bottom so the CTA buttons
     in both cards line up regardless of description length. The grid parent
     already stretches both cards to equal height. */
  margin-bottom: auto;
}
.developers-page .close-card-cta {
  margin-top: 0;
  align-self: flex-start;
}
.developers-page .close-card-primary .close-card-cta {
  background: var(--indigo);
}
.developers-page .close-card-primary .close-card-cta:hover {
  background: #5851EE;
}
.developers-page .close-card-secondary .close-card-cta {
  background: transparent;
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.22);
}
.developers-page .close-card-secondary .close-card-cta:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.36);
}
.developers-page .close-card-meta {
  margin: 14px 0 0;
  padding: 14px 0 0;
  list-style: none;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.62);
  font-weight: 500;
}
.developers-page .close-card-meta li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.developers-page .close-card-meta svg {
  color: var(--indigo-2);
  flex-shrink: 0;
}

/* ===== MOBILE & TABLET ===== */
@media (max-width: 1023px) {
  .developers-page .hero.hero-vertical { padding: 36px 0 52px; }
  .developers-page .hero-copy.hero-copy-centered { margin-bottom: 32px; }
  /* Terminal cards stack vertically; floating tab strip stays centered above. */
  .developers-page .term-pair-grid { grid-template-columns: 1fr; gap: 18px; }
  .developers-page .term-body { height: 280px; padding: 14px 14px 18px; font-size: 12px; }
  .developers-page .problem-body { grid-template-columns: 1fr; gap: 18px; }
  .developers-page .three-up { grid-template-columns: 1fr; }
  .developers-page .three-up-cell { border-left: 0; border-top: 1px solid var(--slate-200); }
  .developers-page .three-up-cell:first-child { border-top: 0; }
  .developers-page .close-cards { grid-template-columns: 1fr; }
  .developers-page .close-dual-inner { padding: 56px 0 64px; }
}

@media (max-width: 720px) {
  .developers-page .hero-meta-trust { font-size: 12.5px; gap: 10px; }
  .developers-page .hero-meta-trust .dotsep { display: none; }
  .developers-page .term-tabs-strip { padding: 3px; }
  .developers-page .term-tabs-strip .term-tab { padding: 7px 12px; font-size: 12.5px; }
  .developers-page .term-tabs-strip .term-tab.is-active::after { left: 12px; right: 12px; bottom: 3px; }
  .developers-page .term-body { font-size: 11.5px; height: 260px; }
  .developers-page .term-use-case { font-size: 11.5px; padding: 8px 10px; gap: 8px; }
  .developers-page .three-up-cell { padding: 22px 22px 24px; }
  .developers-page .three-up-num { font-size: 24px; }
  .developers-page .close-card { padding: 22px 22px 24px; }
  .developers-page .close-card h3 { font-size: 21px; }
  /* Override agencies' mobile rule that hides the 5th matrix column.
     For the developers matrix, Rates is meaningful — show all 5 columns. */
  .developers-page .cap-row { grid-template-columns: 1.7fr 0.6fr 0.6fr 0.6fr 0.6fr; }
  .developers-page .cap-row > .cap-cell:nth-child(5) { display: flex; align-items: center; justify-content: center; }
  .developers-page .cap-cell { padding: 12px 6px; }
  .developers-page .cap-cell.name { padding: 12px 12px; gap: 8px; }
  .developers-page .cap-cell .cap-name { font-size: 12.5px; }
  .developers-page .cap-row.cap-head { font-size: 9.5px; }
  .developers-page .cap-row.cap-head .cap-cell { padding: 10px 4px; }
}

/* ===== Why Choose StayAPI — 3x2 hairline-divided card ===== */
.developers-page .why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  background: #FFFFFF;
  border: 1px solid var(--slate-200);
  border-radius: 14px;
  overflow: hidden;
  box-shadow:
    0 24px 60px -34px rgba(15, 21, 53, 0.18),
    0 2px 0 rgba(15, 21, 53, 0.02);
}
.developers-page .why-cell {
  position: relative;
  padding: 28px 26px 26px;
  border-right: 1px solid var(--slate-200);
  border-bottom: 1px solid var(--slate-200);
  display: flex;
  flex-direction: column;
}
.developers-page .why-cell:nth-child(3n) { border-right: 0; }
.developers-page .why-cell:nth-child(n+4) { border-bottom: 0; }
.developers-page .why-num {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: linear-gradient(180deg, var(--indigo-soft), #FFFFFF);
  border: 1px solid var(--slate-200);
  color: var(--indigo);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-bottom: 16px;
}
.developers-page .why-h {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.25;
}
.developers-page .why-b {
  margin: 0;
  font-size: 13.5px;
  color: var(--slate-600);
  line-height: 1.55;
}
.developers-page .why-b code {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
  padding: 1px 5px;
  background: var(--slate-50);
  border: 1px solid var(--slate-200);
  border-radius: 4px;
  color: var(--ink);
}

@media (max-width: 1023px) {
  .developers-page .why-grid { grid-template-columns: repeat(2, 1fr); }
  .developers-page .why-cell:nth-child(3n) { border-right: 1px solid var(--slate-200); }
  .developers-page .why-cell:nth-child(2n) { border-right: 0; }
  .developers-page .why-cell:nth-child(n+4) { border-bottom: 1px solid var(--slate-200); }
  .developers-page .why-cell:nth-last-child(-n+2) { border-bottom: 0; }
}

@media (max-width: 640px) {
  .developers-page .why-grid { grid-template-columns: 1fr; }
  .developers-page .why-cell { border-right: 0; border-bottom: 1px solid var(--slate-200); }
  .developers-page .why-cell:last-child { border-bottom: 0; }
}

/* ===== Reduced motion ===== */
/* Short hairline between the hero stats row and the trusted-logos band. */
.developers-page .hero-trusted-divider {
  margin: 48px auto 0;
  padding: 0 28px;
}
.developers-page .hero-trusted-divider::after {
  content: "";
  display: block;
  height: 1px;
  background: var(--slate-200);
  width: 100%;
  max-width: 240px;
  margin: 0 auto;
}
.developers-page .hero-trusted-divider + .wrap .trusted-logos { margin-top: 28px; }

@media (prefers-reduced-motion: reduce) {
  .developers-page .terminal-cursor { animation: none; }
}
pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}.hljs{color:#abb2bf;background:#282c34}.hljs-comment,.hljs-quote{color:#5c6370;font-style:italic}.hljs-doctag,.hljs-formula,.hljs-keyword{color:#c678dd}.hljs-deletion,.hljs-name,.hljs-section,.hljs-selector-tag,.hljs-subst{color:#e06c75}.hljs-literal{color:#56b6c2}.hljs-addition,.hljs-attribute,.hljs-meta .hljs-string,.hljs-regexp,.hljs-string{color:#98c379}.hljs-attr,.hljs-number,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-pseudo,.hljs-template-variable,.hljs-type,.hljs-variable{color:#d19a66}.hljs-bullet,.hljs-link,.hljs-meta,.hljs-selector-id,.hljs-symbol,.hljs-title{color:#61aeee}.hljs-built_in,.hljs-class .hljs-title,.hljs-title.class_{color:#e6c07b}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}.hljs-link{text-decoration:underline}
/* ============================================================
   StayAPI homepage — operator-console aesthetic
   Inherits the entire token / button / chip / section / card /
   close-dual / faq vocabulary from agencies.css and developers.css
   via .agencies-page.developers-page scope. This file declares
   only the new patterns the homepage introduces:
     - hero rotator (glitch JS, brand-safe visuals)
     - ICP left-rail accordion
     - 6-up capability grid
     - trusted-logos strip
     - thin per-page polish for the inherited demo grid + faq
   ============================================================ */

/* ===== HERO ===== */
.agencies-page.home-page .home-hero {
  position: relative;
  overflow: hidden;
  padding: 56px 0 32px;
}
.agencies-page.home-page .home-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(800px 420px at 50% -10%, rgba(99, 102, 241, 0.10), transparent 60%),
    radial-gradient(540px 320px at 0% 100%, rgba(99, 102, 241, 0.05), transparent 60%);
  z-index: 0;
}
.agencies-page.home-page .home-hero-inner,
.agencies-page.home-page .home-hero-flow,
.agencies-page.home-page .home-hero-actions,
.agencies-page.home-page .home-hero .trusted-logos {
  position: relative;
  z-index: 1;
}

/* ===== HERO DOT FIELD =====
   Halftone canvas overlay that paints over the radial atmosphere and
   under the hero content. The mask fades the field out toward the
   middle of the hero so the dots feel like they rain down from the top
   and don't compete with the data-flow widget below. */
.agencies-page.home-page .home-hero-dots {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.85) 30%, rgba(0, 0, 0, 0.35) 55%, rgba(0, 0, 0, 0) 75%);
          mask-image: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.85) 30%, rgba(0, 0, 0, 0.35) 55%, rgba(0, 0, 0, 0) 75%);
}
.agencies-page.home-page .home-hero-inner {
  max-width: 920px;
  margin: 0 auto;
  text-align: center;
  padding: 0 28px;
}
.agencies-page.home-page .home-hero-inner .eyebrow { margin-bottom: 18px; }

.agencies-page.home-page .home-hero-h {
  font-size: clamp(2.2rem, 4.6vw, 3.6rem);
  line-height: 1.04;
  letter-spacing: -0.035em;
  font-weight: 800;
  margin: 0 0 18px;
  color: var(--ink);
  font-feature-settings: "ss01", "cv11";
}

.agencies-page.home-page .home-hero-sub {
  margin: 0 auto;
  max-width: 64ch;
  font-size: 1rem;
  color: var(--slate-600);
  line-height: 1.55;
}

/* ===== ROTATOR =====
   Reuses the existing `glitch` Stimulus controller for the character
   scramble effect on desktop. We do NOT set `.glitch-text` on the
   target because that class triggers the legacy orange→red→purple
   gradient text plus the cyan/magenta pseudo-element layers, which
   violate the brand system. Without `.glitch-text` the controller
   still drives the JS scramble and the mobile is-fading classes,
   so we restyle those visuals here in operator-console tokens.

   The rotator lives on its own line under "for", so the previous
   word ("for") never shifts when a new word swaps in. The wrap is
   a flex line so the period sits attached to the active word. */
.agencies-page.home-page .home-rotator-wrap {
  display: inline-flex;
  justify-content: center;
  align-items: baseline;
  min-height: 1.1em;
}
.agencies-page.home-page .home-rotator-word {
  color: var(--indigo);
  display: inline-block;
  transition: opacity .2s cubic-bezier(0.22, 1, 0.36, 1),
              transform .2s cubic-bezier(0.22, 1, 0.36, 1),
              filter   .2s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Mobile / Safari fallback transitions from glitch_controller. */
.agencies-page.home-page .home-rotator-word.glitch-text-exit {
  opacity: 0;
  transform: translateY(-8px);
  filter: blur(2px);
}
.agencies-page.home-page .home-rotator-word.glitch-text-enter {
  opacity: 0;
  transform: translateY(8px);
  filter: blur(2px);
}
/* Desktop scramble: the controller injects <span class="opacity-50 text-slate-400">
   for the random scramble characters. The base word stays indigo. */
.agencies-page.home-page .home-rotator-word.is-glitching .text-slate-400 {
  color: var(--slate-400);
}
@media (prefers-reduced-motion: reduce) {
  .agencies-page.home-page .home-rotator-word { transition: none; }
}

/* ===== HERO FLOW WIDGET WRAP ===== */
.agencies-page.home-page .home-hero-flow {
  margin-top: 36px;
}
.agencies-page.home-page .home-hero-flow .flow-widget-wrap--agencies {
  border-radius: 18px;
}

/* ===== HERO ACTIONS (below the flow widget) ===== */
.agencies-page.home-page .home-hero-actions {
  margin-top: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.agencies-page.home-page .home-hero-cta {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0;
}
.agencies-page.home-page .home-hero-meta {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 22px;
  font-size: 11.5px;
  color: var(--slate-500);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
}
.agencies-page.home-page .home-hero-meta li { display: inline-flex; align-items: center; gap: 6px; }
.agencies-page.home-page .home-hero-meta li::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: var(--indigo);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.18);
  display: inline-block;
}

/* ===== HERO DIVIDER ===== */
.agencies-page.home-page .home-hero-divider {
  margin: 42px auto 0;
  padding: 0 28px;
  max-width: var(--maxw);
}
.agencies-page.home-page .home-hero-divider::after {
  content: "";
  display: block;
  height: 1px;
  background: var(--slate-200);
  width: 100%;
  max-width: 240px;
  margin: 0 auto;
}

/* ===== TRUSTED LOGOS (shared partial) =====
   Scoped to .agencies-page (the base brand-surface class) so the partial
   renders correctly on every page that wraps in it: homepage, /agencies,
   /developers, /price-intelligence, /book-demo. Per-page overrides
   (e.g. .home-trusted-band below) still cascade through normal specificity. */
.agencies-page .trusted-logos {
  margin: 28px auto 0;
  padding: 0 28px;
  max-width: var(--maxw);
}
.agencies-page .trusted-logos--align-center { text-align: center; }
.agencies-page .trusted-logos--align-left   { text-align: left; }
.agencies-page .trusted-logos__label {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--slate-400);
  font-weight: 600;
  margin: 0 0 24px;
}
.agencies-page .trusted-logos__row {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 48px;
}
.agencies-page .trusted-logos--align-left .trusted-logos__row {
  justify-content: flex-start;
}
.agencies-page .trusted-logos__logo {
  height: 50px;
  width: auto;
  object-fit: contain;
  opacity: 0.82;
  filter: grayscale(0.1);
  transition: opacity .18s ease, filter .18s ease;
}
.agencies-page .trusted-logos__logo:hover { opacity: 1; filter: none; }
.agencies-page .trusted-logos__logo--small { height: 40px; border-radius: 6px; }

/* ===== ICP LEFT-RAIL ACCORDION ===== */
.agencies-page.home-page .section-head-centered {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.agencies-page.home-page .section-head-centered .section-sub {
  margin-left: auto;
  margin-right: auto;
}

/* Two independent cards: left rail sizes to its content, right panel
   sizes to its content. align-items: start prevents either from stretching
   to match the other's height (no gray space under the rail when the
   active panel is tall). */
.agencies-page.home-page .home-icp {
  display: grid;
  grid-template-columns: minmax(280px, 340px) 1fr;
  gap: 22px;
  align-items: start;
}

/* --- Left rail (independent card) --- */
.agencies-page.home-page .home-icp-rail {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #FFFFFF;
  border: 1px solid var(--slate-200);
  border-radius: 16px;
  padding: 14px;
  box-shadow:
    0 24px 60px -34px rgba(15, 21, 53, 0.18),
    0 2px 0 rgba(15, 21, 53, 0.02);
}
.agencies-page.home-page .home-icp-tab {
  display: grid;
  grid-template-columns: 32px 1fr auto auto;
  gap: 12px;
  align-items: center;
  text-align: left;
  padding: 14px 14px;
  border-radius: 12px;
  background: transparent;
  color: var(--slate-600);
  border: 1px solid transparent;
  transition: background .14s cubic-bezier(0.22, 1, 0.36, 1),
              color      .14s cubic-bezier(0.22, 1, 0.36, 1),
              border-color .14s cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
}
.agencies-page.home-page .home-icp-tab:hover {
  background: var(--slate-50);
  color: var(--ink);
}
.agencies-page.home-page .home-icp-tab.is-active {
  background: var(--slate-50);
  color: var(--ink);
  border-color: var(--slate-200);
}
.agencies-page.home-page .home-icp-tab:focus-visible {
  outline: 2px solid var(--indigo);
  outline-offset: 2px;
}
/* Disabled (preview) tabs: visible in the rail to signal roadmap, but not
   selectable. No hover, no active treatment, no chevron, and the row sits
   one step muted in the slate scale. */
.agencies-page.home-page .home-icp-tab.is-disabled {
  cursor: default;
  background: transparent;
  border-color: transparent;
  grid-template-columns: 32px 1fr auto;
}
.agencies-page.home-page .home-icp-tab.is-disabled:hover {
  background: transparent;
  color: var(--slate-500);
}
.agencies-page.home-page .home-icp-tab.is-disabled .home-icp-tab-name { color: var(--slate-500); }
.agencies-page.home-page .home-icp-tab.is-disabled .home-icp-tab-sub  { color: var(--slate-400); }
.agencies-page.home-page .home-icp-tab.is-disabled .home-icp-num {
  background: transparent;
  color: var(--slate-400);
  box-shadow: inset 0 0 0 1px var(--slate-200);
}

.agencies-page.home-page .home-icp-num {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--slate-100);
  color: var(--slate-500);
  display: grid;
  place-items: center;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: inset 0 0 0 1px var(--slate-200);
  transition: background .14s ease, color .14s ease, box-shadow .14s ease;
}
.agencies-page.home-page .home-icp-tab.is-active .home-icp-num {
  background: var(--indigo);
  color: #FFFFFF;
  box-shadow: 0 6px 18px -8px rgba(79, 70, 229, 0.55);
}

.agencies-page.home-page .home-icp-tab-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.agencies-page.home-page .home-icp-tab-name {
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: inherit;
  line-height: 1.2;
}
.agencies-page.home-page .home-icp-tab-sub {
  font-size: 11.5px;
  color: var(--slate-500);
  line-height: 1.3;
  letter-spacing: -0.005em;
}

.agencies-page.home-page .home-icp-tab-tag {
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--slate-500);
  background: var(--slate-100);
  border: 1px dashed var(--slate-300);
  padding: 2px 6px;
  border-radius: 999px;
}
.agencies-page.home-page .home-icp-tab-chevron {
  color: var(--slate-400);
  display: inline-flex;
  transform: translateX(0);
  transition: transform .14s ease, color .14s ease;
}
.agencies-page.home-page .home-icp-tab.is-active .home-icp-tab-chevron {
  color: var(--indigo);
  transform: translateX(2px);
}

/* --- Right panel (independent card) --- */
.agencies-page.home-page .home-icp-panels {
  background: #FFFFFF;
  border: 1px solid var(--slate-200);
  border-radius: 16px;
  padding: 32px 32px 32px;
  box-shadow:
    0 24px 60px -34px rgba(15, 21, 53, 0.18),
    0 2px 0 rgba(15, 21, 53, 0.02);
  min-height: 0;
}
.agencies-page.home-page .home-icp-panel { display: none; flex-direction: column; }
.agencies-page.home-page .home-icp-panel.is-active { display: flex; }

.agencies-page.home-page .home-icp-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.agencies-page.home-page .home-icp-panel-eyebrow {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--indigo);
  font-weight: 700;
}
.agencies-page.home-page .home-icp-panel-tag {
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
}
.agencies-page.home-page .home-icp-panel-tag.is-live {
  color: var(--signal-up);
  background: var(--signal-up-soft);
}
.agencies-page.home-page .home-icp-panel-tag.is-soon {
  color: var(--slate-500);
  background: var(--slate-100);
  border: 1px dashed var(--slate-300);
  padding: 2px 8px;
}

.agencies-page.home-page .home-icp-panel-h {
  margin: 0 0 14px;
  font-size: clamp(1.55rem, 2.4vw, 1.95rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--ink);
  line-height: 1.1;
}
.agencies-page.home-page .home-icp-panel-lede {
  margin: 0 0 26px;
  font-size: 15.5px;
  color: var(--slate-600);
  line-height: 1.55;
  max-width: 62ch;
}

/* Bullets + proof glyph 2-column layout */
.agencies-page.home-page .home-icp-panel-grid {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 32px;
  margin-bottom: 28px;
}
.agencies-page.home-page .home-icp-panel-bullets {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.agencies-page.home-page .home-icp-bullet {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 16px;
  align-items: start;
}
/* Numbered tile: soft-fill rounded badge instead of plain text. Indigo-soft
   wash → white at the bottom, hairline border, indigo mono digits. Mirrors
   the .num-marker pattern from agencies.css at a smaller scale. */
.agencies-page.home-page .home-icp-bullet-num {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: linear-gradient(180deg, var(--indigo-soft), #FFFFFF);
  border: 1px solid var(--slate-200);
  color: var(--indigo);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-top: 2px;
}
.agencies-page.home-page .home-icp-bullet-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.agencies-page.home-page .home-icp-bullet-cat {
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--indigo);
}
.agencies-page.home-page .home-icp-bullet-t {
  margin: 0 0 2px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1.3;
}
.agencies-page.home-page .home-icp-bullet-b {
  margin: 0;
  font-size: 13.5px;
  color: var(--slate-600);
  line-height: 1.55;
  max-width: 56ch;
}
/* Stack of proof widgets in the right column (currently used by reputation
   to show the star-roll-up plus a sample review with extracted sentiment). */
.agencies-page.home-page .home-icp-panel-proofs {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-self: start;
}
.agencies-page.home-page .home-icp-panel-proof {
  background: var(--slate-50);
  border: 1px solid var(--slate-200);
  border-radius: 12px;
  padding: 16px 18px;
}

/* Review sample widget: source + stars + meta header, quote with inline
   sentiment-highlighted spans, author + topic chips footer. The chips
   carry green / red token color to make extracted sentiment visible at
   a glance without leaning on emojis. */
.agencies-page.home-page .rp-review-sample {
  padding: 0;
  font-size: 12.5px;
  line-height: 1.5;
}
.agencies-page.home-page .rp-rs-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.agencies-page.home-page .rp-rs-source {
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--indigo);
  background: var(--indigo-soft);
  padding: 2px 7px;
  border-radius: 4px;
}
.agencies-page.home-page .rp-rs-stars { color: var(--rating-amber); letter-spacing: 0.5px; font-size: 11.5px; }
.agencies-page.home-page .rp-rs-val   { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--ink); font-size: 11.5px; }
.agencies-page.home-page .rp-rs-meta  { color: var(--slate-500); font-size: 10.5px; margin-left: auto; letter-spacing: 0.04em; }
.agencies-page.home-page .rp-rs-quote {
  margin: 0 0 10px;
  font-size: 12.5px;
  color: var(--slate-600);
  line-height: 1.55;
  font-style: italic;
}
.agencies-page.home-page .rp-rs-mark {
  font-style: normal;
  font-weight: 600;
  padding: 1px 4px;
  border-radius: 3px;
}
.agencies-page.home-page .rp-rs-mark-pos { background: var(--signal-up-soft); color: var(--signal-up); }
.agencies-page.home-page .rp-rs-mark-neg { background: var(--signal-dn-soft); color: var(--signal-dn); }
.agencies-page.home-page .rp-rs-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--slate-200);
  flex-wrap: wrap;
}
.agencies-page.home-page .rp-rs-author {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate-500);
  font-weight: 700;
}
.agencies-page.home-page .rp-rs-topics {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}
.agencies-page.home-page .rp-rs-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 6px;
  font-size: 9.5px;
  letter-spacing: 0.04em;
  font-weight: 700;
  border-radius: 999px;
  text-transform: lowercase;
}
.agencies-page.home-page .rp-rs-chip span { font-variant-numeric: tabular-nums; opacity: 0.85; }
.agencies-page.home-page .rp-rs-chip-pos { background: var(--signal-up-soft); color: var(--signal-up); }
.agencies-page.home-page .rp-rs-chip-neg { background: var(--signal-dn-soft); color: var(--signal-dn); }

.agencies-page.home-page .home-icp-panel-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: center;
  margin-top: 0;
  padding-top: 24px;
  border-top: 1px solid var(--slate-200);
}
.agencies-page.home-page .home-icp-panel-cta-btn { padding: 11px 18px; font-size: 14px; }
.agencies-page.home-page .home-icp-panel-cta-secondary {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--slate-600);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color .14s ease;
}
.agencies-page.home-page .home-icp-panel-cta-secondary:hover { color: var(--indigo); }
.agencies-page.home-page .home-icp-panel-cta-secondary .arrow {
  display: inline-block;
  transform: translateX(0);
  transition: transform .14s ease;
}
.agencies-page.home-page .home-icp-panel-cta-secondary:hover .arrow { transform: translateX(2px); }

/* ===== ROUTER PROOF GLYPHS ===== */
.agencies-page.home-page .rp { font-size: 12.5px; line-height: 1.4; }

/* Portfolio */
.agencies-page.home-page .rp-portfolio { display: flex; flex-direction: column; gap: 8px; }
.agencies-page.home-page .rp-portfolio .rp-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 14px;
  align-items: center;
}
.agencies-page.home-page .rp-prop {
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.agencies-page.home-page .rp-num { font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 600; }
.agencies-page.home-page .rp-pill {
  display: inline-block;
  padding: 1px 7px;
  font-size: 10.5px;
  font-weight: 700;
  border-radius: 999px;
  letter-spacing: 0.02em;
}
.agencies-page.home-page .rp-pill-up { color: var(--signal-up); background: var(--signal-up-soft); }

/* Rates */
.agencies-page.home-page .rp-rates { display: flex; flex-direction: column; gap: 6px; }
.agencies-page.home-page .rp-rates-head {
  display: grid;
  grid-template-columns: 0.6fr 1fr 1fr 1.1fr;
  gap: 10px;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate-500);
  font-weight: 700;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--slate-200);
  margin-bottom: 4px;
}
.agencies-page.home-page .rp-rates-row {
  display: grid;
  grid-template-columns: 0.6fr 1fr 1fr 1.1fr;
  gap: 10px;
  font-size: 12.5px;
  align-items: center;
}
.agencies-page.home-page .rp-rates-row .rp-num { font-weight: 600; }
.agencies-page.home-page .rp-anchor {
  background: linear-gradient(180deg, rgba(99, 102, 241, 0.16), rgba(99, 102, 241, 0.06));
  padding: 2px 6px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
}

/* Reviews */
.agencies-page.home-page .rp-reviews { display: flex; flex-direction: column; gap: 8px; }
.agencies-page.home-page .rp-rev-row {
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: 12px;
  align-items: center;
}
.agencies-page.home-page .rp-rev-stars { color: var(--rating-amber); letter-spacing: 0.5px; font-size: 12px; }
.agencies-page.home-page .rp-rev-val   { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--ink); font-size: 13px; }
.agencies-page.home-page .rp-rev-source {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate-500);
  font-weight: 700;
  text-align: right;
}

/* Developer */
.agencies-page.home-page .rp-developer { padding: 0; }
.agencies-page.home-page .rp-term {
  background: var(--ink);
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #161B36;
}
.agencies-page.home-page .rp-term-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: #161B36;
  font-size: 10px;
  letter-spacing: 0.06em;
  color: rgba(199, 210, 254, 0.7);
  font-weight: 600;
}
.agencies-page.home-page .rp-term-dots { display: inline-flex; gap: 4px; }
.agencies-page.home-page .rp-term-dots span {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(199, 210, 254, 0.18);
}
.agencies-page.home-page .rp-term-tag { color: #34D399; }
.agencies-page.home-page .rp-term-body {
  margin: 0;
  padding: 12px 14px 14px;
  font-size: 11.5px;
  line-height: 1.5;
  color: rgba(226, 232, 240, 0.92);
  white-space: pre;
  overflow-x: auto;
}
.agencies-page.home-page .rp-cmd { color: #A5B4FC; font-weight: 600; }
.agencies-page.home-page .rp-key { color: #C7D2FE; }
.agencies-page.home-page .rp-term-body .rp-num { color: #5EEAD4; font-weight: 500; }
.agencies-page.home-page .rp-term-body .rp-str { color: #FBBF77; }

/* ===== CAPABILITY GRID (8 cells in a 4x2 grid on desktop) =====
   Scoped to .agencies-page so /agencies can reuse this for its
   Powerful Use Cases block too. */
.agencies-page .home-cap-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  background: #FFFFFF;
  border: 1px solid var(--slate-200);
  border-radius: 14px;
  overflow: hidden;
  box-shadow:
    0 24px 60px -34px rgba(15, 21, 53, 0.18),
    0 2px 0 rgba(15, 21, 53, 0.02);
}
.agencies-page .home-cap-cell {
  position: relative;
  padding: 22px 22px 20px;
  border-right: 1px solid var(--slate-200);
  border-bottom: 1px solid var(--slate-200);
  display: flex;
  flex-direction: column;
}
.agencies-page .home-cap-cell:nth-child(4n) { border-right: 0; }
.agencies-page .home-cap-cell:nth-child(n+5) { border-bottom: 0; }
.agencies-page .home-cap-num {
  font-size: 10.5px;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: var(--indigo);
  margin-bottom: 12px;
}
.agencies-page .home-cap-h {
  margin: 0 0 8px;
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
  line-height: 1.25;
}
.agencies-page .home-cap-body {
  margin: 0 0 14px;
  font-size: 13.5px;
  color: var(--slate-600);
  line-height: 1.55;
}
.agencies-page .home-cap-hint {
  display: inline-flex;
  align-items: center;
  margin-top: auto;
  align-self: flex-start;
  font-size: 10px;
  letter-spacing: 0.06em;
  font-weight: 600;
  color: var(--ink);
  background: var(--slate-50);
  border: 1px solid var(--slate-200);
  border-radius: 4px;
  padding: 3px 8px;
}

/* ===== Trusted-by band (standalone, between use cases and demos) =====
   Sits on slate-50 like its neighbors but earns its own visual beat by
   carrying hairline rules top + bottom, a noticeably tracked label, and
   logos at 58px. The band reads as a deliberate pause between two
   content-dense sections, not as a tail of either. */
.agencies-page.home-page .home-trusted-band {
  padding: 56px 0;
  background: #FFFFFF;
  border-top: 1px solid var(--slate-200);
  /* No border-bottom: the .problem demos section below carries its own
     border-top, which would stack with ours and read as a 2px rule. */
}
.agencies-page.home-page .home-trusted-band .trusted-logos {
  margin: 0;
  padding: 0 28px;
}
.agencies-page.home-page .home-trusted-band .trusted-logos__label {
  font-size: 12px;
  letter-spacing: 0.22em;
  color: var(--slate-500);
  margin-bottom: 28px;
}
.agencies-page.home-page .home-trusted-band .trusted-logos__row {
  gap: 56px;
}
.agencies-page.home-page .home-trusted-band .trusted-logos__logo {
  height: 58px;
  opacity: 0.88;
  filter: grayscale(0.05);
}
.agencies-page.home-page .home-trusted-band .trusted-logos__logo:hover {
  opacity: 1;
  filter: none;
}
.agencies-page.home-page .home-trusted-band .trusted-logos__logo--small {
  height: 46px;
}

@media (max-width: 640px) {
  .agencies-page.home-page .home-trusted-band { padding: 40px 0; }
  .agencies-page.home-page .home-trusted-band .trusted-logos__label { margin-bottom: 22px; font-size: 11px; letter-spacing: 0.16em; }
  .agencies-page.home-page .home-trusted-band .trusted-logos__row { gap: 28px; }
  .agencies-page.home-page .home-trusted-band .trusted-logos__logo { height: 36px; }
  .agencies-page.home-page .home-trusted-band .trusted-logos__logo--small { height: 28px; }
}

/* ===== Section-level CTA row (under use cases and demos) ===== */
.agencies-page.home-page .home-section-cta {
  margin-top: 36px;
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ===== DEMOS section dot field =====
   Same hero-dots controller mounted in the demos section header area.
   Top-down mask so the field rains from the top of the section and
   fades out before the demo cards begin. Section content sits at
   z-index: 1 to clear the canvas. */
.agencies-page.home-page .home-demos {
  position: relative;
  overflow: hidden;
}
.agencies-page.home-page .home-demos > .wrap {
  position: relative;
  z-index: 1;
}
.agencies-page.home-page .home-demos-dots {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.85) 25%, rgba(0, 0, 0, 0.35) 45%, rgba(0, 0, 0, 0) 65%);
          mask-image: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.85) 25%, rgba(0, 0, 0, 0.35) 45%, rgba(0, 0, 0, 0) 65%);
}

/* ===== DEMOS GRID polish ===== */
.agencies-page.home-page .home-demos-grid { grid-template-columns: repeat(3, 1fr); }
.agencies-page.home-page .home-demo-card .meta { padding-top: 10px; }
.agencies-page.home-page .home-demo-tag {
  display: inline-block;
  margin-bottom: 6px;
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--indigo);
  background: var(--indigo-soft);
  padding: 2px 8px;
  border-radius: 999px;
}
.agencies-page.home-page .home-demos-foot { margin-top: 22px; color: var(--slate-500); }

/* ===== FAQ ===== */
.agencies-page.home-page .home-faq-list { max-width: 880px; }

/* ===== RESPONSIVE ===== */
@media (max-width: 1023px) {
  .agencies-page.home-page .home-hero { padding: 36px 0 16px; }
  /* Tablet: 8 cells in 2 cols (4 rows). Reset right borders per row pair. */
  .agencies-page .home-cap-grid { grid-template-columns: repeat(2, 1fr); }
  .agencies-page .home-cap-cell { border-right: 1px solid var(--slate-200); border-bottom: 1px solid var(--slate-200); }
  .agencies-page .home-cap-cell:nth-child(4n) { border-right: 1px solid var(--slate-200); }
  .agencies-page .home-cap-cell:nth-child(2n) { border-right: 0; }
  .agencies-page .home-cap-cell:nth-child(n+5) { border-bottom: 1px solid var(--slate-200); }
  .agencies-page .home-cap-cell:nth-last-child(-n+2) { border-bottom: 0; }
  .agencies-page.home-page .home-demos-grid { grid-template-columns: repeat(2, 1fr); }

  /* ICP router → mobile accordion via display: contents on the wrapper
     so tab + panel pairs interleave in source order. Each tab and its
     own panel get rounded as a single block. */
  .agencies-page.home-page .home-icp {
    grid-template-columns: 1fr;
    gap: 0;
    background: #FFFFFF;
    border: 1px solid var(--slate-200);
    border-radius: 14px;
    overflow: hidden;
    box-shadow:
      0 24px 60px -34px rgba(15, 21, 53, 0.18),
      0 2px 0 rgba(15, 21, 53, 0.02);
  }
  .agencies-page.home-page .home-icp-rail,
  .agencies-page.home-page .home-icp-panels {
    display: contents;
  }
  .agencies-page.home-page .home-icp-tab {
    border: 0;
    border-bottom: 1px solid var(--slate-200);
    background: #FFFFFF;
    border-radius: 0;
    padding: 16px 18px;
    box-shadow: none !important;
  }
  .agencies-page.home-page .home-icp-tab.is-active { background: var(--slate-50); }
  .agencies-page.home-page .home-icp-tab-chevron svg { transition: transform .18s ease; transform: rotate(0); }
  .agencies-page.home-page .home-icp-tab.is-active .home-icp-tab-chevron svg { transform: rotate(90deg); }
  .agencies-page.home-page .home-icp-panel {
    padding: 20px 18px 24px;
    border-bottom: 1px solid var(--slate-200);
    background: var(--slate-50);
    border-radius: 0;
    box-shadow: none;
  }
  /* Bullets + proof glyph stack vertically on mobile. */
  .agencies-page.home-page .home-icp-panel-grid { grid-template-columns: 1fr; gap: 22px; }
  /* Visually order: tab1, panel1, tab2, panel2, ... */
  .agencies-page.home-page .home-icp-tab[data-tab="agencies"]      { order: 1; }
  .agencies-page.home-page .home-icp-panel[data-tab="agencies"]    { order: 2; }
  .agencies-page.home-page .home-icp-tab[data-tab="price-intel"]   { order: 3; }
  .agencies-page.home-page .home-icp-panel[data-tab="price-intel"] { order: 4; }
  .agencies-page.home-page .home-icp-tab[data-tab="reputation"]    { order: 5; }
  .agencies-page.home-page .home-icp-panel[data-tab="reputation"]  { order: 6; }
  .agencies-page.home-page .home-icp-tab[data-tab="developers"]        { order: 7; }
  .agencies-page.home-page .home-icp-panel[data-tab="developers"]      { order: 8; }
  .agencies-page.home-page .home-icp-tab[data-tab="position-tracking"] { order: 9; }
  .agencies-page.home-page .home-icp-tab[data-tab="ai-visibility"]     { order: 10; }
  /* Round the last visible row's corners. */
  .agencies-page.home-page .home-icp-tab[data-tab="ai-visibility"] { border-bottom: 0; }
}

@media (max-width: 640px) {
  .agencies-page.home-page .home-hero-h {
    font-size: clamp(1.7rem, 7.6vw, 2.1rem);
    letter-spacing: -0.03em;
  }
  .agencies-page.home-page .home-hero-cta,
  .agencies-page.home-page .home-section-cta { flex-direction: column; align-items: stretch; gap: 10px; width: 100%; }
  .agencies-page.home-page .home-hero-cta .btn,
  .agencies-page.home-page .home-section-cta .btn { width: 100%; justify-content: center; }
  .agencies-page .home-cap-grid { grid-template-columns: 1fr; }
  .agencies-page .home-cap-cell { border-right: 0; border-bottom: 1px solid var(--slate-200); }
  .agencies-page .home-cap-cell:last-child { border-bottom: 0; }
  .agencies-page.home-page .home-demos-grid { grid-template-columns: 1fr; }
  .agencies-page.home-page .trusted-logos__row { gap: 22px 28px; }
  .agencies-page.home-page .trusted-logos__logo { height: 28px; }
  .agencies-page.home-page .trusted-logos__logo--small { height: 22px; }
}
/* ============================================================
   StayAPI — /price-intelligence landing
   Additive layer over agencies.css + developers.css. The page wraps
   in .agencies-page.developers-page.price-intelligence-page so it
   inherits .btn, .section, .eyebrow, .hero, .term-tabs-strip,
   .term-pair-grid, .three-up, .close-dual, .faq-list and friends.
   This file declares only what's new:
     • Hero parity matrix (signature artifact)
     • Pain-quad single-card 2x2 grid
     • Delivery widget — CSV + Direct integration panels
     • Asymmetric embed grid (1 hero cell + 4 supporting)
     • Coverage stripes with inline schema mono
     • Build-vs-buy 2-column comparison
     • Integration timeline rail
     • Sample-data form-style card
   ============================================================ */

/* ===== PAGE-LEVEL OVERRIDES ===== */
.price-intelligence-page .hero { padding-bottom: 28px; }
.price-intelligence-page .hero-meta-trust { margin-top: 18px; }
.price-intelligence-page .hero-meta-trust .num { font-weight: 700; color: var(--ink); letter-spacing: -0.01em; }

/* Inline list of "things engineers are fighting" inside the problem h2.
   Each tag carries an indigo-tinted pill with a hairline border so the list
   reads as a stack, not a single phrase. Wraps cleanly when the headline
   reflows on tablet / mobile. */
.price-intelligence-page .pain-stack {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 10px;
  vertical-align: baseline;
}
.price-intelligence-page .pain-stack-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px 4px;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(99, 102, 241, 0.16), rgba(99, 102, 241, 0.06));
  border: 1px solid rgba(99, 102, 241, 0.25);
  color: var(--indigo);
  font-weight: 700;
  font-size: 0.78em;
  letter-spacing: -0.01em;
  line-height: 1.1;
  white-space: nowrap;
}

/* ============================================================
   1. HERO PARITY MATRIX
   ============================================================ */
.price-intelligence-page .parity-mock {
  max-width: 1100px;
  margin: 36px auto 36px;
  padding: 0 6px;
}

.price-intelligence-page .parity-mock-card {
  background: #FFFFFF;
  border: 1px solid var(--slate-200);
  border-radius: 14px;
  padding: 18px 18px 14px;
  box-shadow: 0 24px 60px -28px rgba(15, 21, 53, 0.22), 0 2px 0 rgba(15, 21, 53, 0.02);
  transform: rotate(-0.3deg);
}

.price-intelligence-page .parity-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--slate-200);
  margin-bottom: 14px;
}

.price-intelligence-page .parity-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.015em;
  line-height: 1.15;
}

.price-intelligence-page .parity-meta {
  margin-top: 4px;
  font-size: 11.5px;
  color: var(--slate-500);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.price-intelligence-page .parity-stars { color: var(--rating-amber); font-weight: 600; letter-spacing: 0.4px; }
.price-intelligence-page .parity-meta .mono { color: var(--ink); font-weight: 500; }

.price-intelligence-page .parity-index {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  padding: 8px 12px;
  border: 1px solid var(--slate-200);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(99, 102, 241, 0.10), rgba(99, 102, 241, 0.04));
}
.price-intelligence-page .parity-index-label {
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--indigo);
  font-weight: 600;
}
.price-intelligence-page .parity-index-val {
  font-size: 19px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.price-intelligence-page .parity-index-pct {
  font-size: 12px;
  color: var(--slate-500);
  font-weight: 500;
  margin-left: 1px;
}

.price-intelligence-page .parity-table {
  border: 1px solid var(--slate-200);
  border-radius: 8px;
  overflow: hidden;
  background: #FFFFFF;
}

.price-intelligence-page .parity-row {
  display: grid;
  grid-template-columns: 92px repeat(5, 1fr) 1.15fr;
  align-items: center;
  border-bottom: 1px solid var(--slate-200);
  font-variant-numeric: tabular-nums;
}
.price-intelligence-page .parity-row:last-child { border-bottom: 0; }

.price-intelligence-page .parity-row-head {
  background: #FAFAFD;
  font-size: 9.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--slate-500);
}
.price-intelligence-page .parity-row-head .parity-cell { padding: 9px 10px; }

.price-intelligence-page .parity-cell {
  padding: 11px 10px;
  font-size: 12px;
  color: var(--ink);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.price-intelligence-page .parity-cell-date {
  color: var(--slate-500);
  font-weight: 600;
  border-right: 1px solid var(--slate-200);
}
.price-intelligence-page .parity-row-head .parity-cell-date { color: var(--slate-500); }

.price-intelligence-page .parity-cell-anchor {
  background: linear-gradient(180deg, rgba(99, 102, 241, 0.10), rgba(99, 102, 241, 0.04));
  border-left: 1px solid var(--slate-200);
}
.price-intelligence-page .parity-row-head .parity-cell-anchor {
  background: linear-gradient(180deg, rgba(99, 102, 241, 0.16), rgba(99, 102, 241, 0.08));
  color: var(--indigo);
}
.price-intelligence-page .parity-cell-anchor b { color: var(--ink); font-weight: 700; }

.price-intelligence-page .parity-pill {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  white-space: nowrap;
}
.price-intelligence-page .parity-pill.up { background: var(--signal-up-soft); color: var(--signal-up); }
.price-intelligence-page .parity-pill.dn { background: var(--signal-dn-soft); color: var(--signal-dn); }

.price-intelligence-page .parity-foot {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 12px;
}
.price-intelligence-page .parity-kpi {
  background: var(--slate-50);
  border: 1px solid var(--slate-200);
  border-radius: 8px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.price-intelligence-page .parity-kpi-label {
  font-size: 8.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--slate-500);
  font-weight: 600;
}
.price-intelligence-page .parity-kpi-val {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 1023px) {
  .price-intelligence-page .parity-row {
    grid-template-columns: 86px repeat(5, minmax(150px, 1fr)) 124px;
  }
  .price-intelligence-page .parity-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 22px), transparent 100%);
            mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 22px), transparent 100%);
  }
}
@media (max-width: 720px) {
  .price-intelligence-page .parity-mock-card { padding: 14px 14px 12px; transform: none; }
  .price-intelligence-page .parity-head { flex-direction: column; align-items: stretch; gap: 10px; }
  .price-intelligence-page .parity-index { align-self: flex-start; flex-direction: row; align-items: baseline; gap: 8px; }
  .price-intelligence-page .parity-index-label { font-size: 8.5px; }
  .price-intelligence-page .parity-foot { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   2. PAIN QUAD — single white card with hairline 2x2 grid
   ============================================================ */
.price-intelligence-page .pain-quad {
  background: #FFFFFF;
  border: 1px solid var(--slate-200);
  border-radius: 14px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(15, 21, 53, 0.02);
}

.price-intelligence-page .pain-cell {
  padding: 28px 28px 26px;
  border-right: 1px solid var(--slate-200);
  border-bottom: 1px solid var(--slate-200);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.price-intelligence-page .pain-cell:nth-child(2n) { border-right: 0; }
.price-intelligence-page .pain-cell:nth-last-child(-n+2) { border-bottom: 0; }

.price-intelligence-page .pain-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--slate-50);
  border: 1px solid var(--slate-200);
  color: var(--indigo);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  margin-bottom: 2px;
}

.price-intelligence-page .pain-cell h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
  line-height: 1.25;
}
.price-intelligence-page .pain-cell p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--slate-600);
  max-width: 56ch;
}
.price-intelligence-page .pain-cell p b { color: var(--ink); font-weight: 600; }
.price-intelligence-page .pain-cell p .mono {
  font-size: 12px;
  background: var(--slate-50);
  padding: 0 5px;
  border-radius: 4px;
  border: 1px solid var(--slate-200);
  color: var(--ink);
  font-weight: 500;
}

@media (max-width: 720px) {
  .price-intelligence-page .pain-quad { grid-template-columns: 1fr; }
  .price-intelligence-page .pain-cell { padding: 22px 20px; border-right: 0; border-bottom: 1px solid var(--slate-200); }
  .price-intelligence-page .pain-cell:last-child { border-bottom: 0; }
}

/* === PAIN ARTIFACTS — small visual proof glyphs per cell ============ */
.price-intelligence-page .pain-art {
  margin-top: 14px;
  border-radius: 10px;
  border: 1px solid var(--slate-200);
  background: var(--slate-50);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 11.5px;
  line-height: 1.3;
}

/* 01 — error log */
.price-intelligence-page .pain-art-error {
  background: linear-gradient(180deg, #FBFAFC, #FDECEC22);
  border-color: rgba(228, 88, 88, 0.18);
}
.price-intelligence-page .pain-art-line {
  display: grid;
  grid-template-columns: 44px auto 1fr;
  align-items: center;
  gap: 10px;
}
.price-intelligence-page .pain-art-time { color: var(--slate-500); font-size: 10.5px; font-variant-numeric: tabular-nums; }
.price-intelligence-page .pain-art-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 7px;
  border-radius: 5px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.price-intelligence-page .pain-art-tag-err {
  background: var(--signal-dn-soft);
  color: var(--signal-dn);
}
.price-intelligence-page .pain-art-msg { color: var(--ink); font-size: 11px; }

/* 02 — schema diff */
.price-intelligence-page .pain-art-diff-row {
  display: grid;
  grid-template-columns: 70px 1fr;
  align-items: center;
  gap: 12px;
}
.price-intelligence-page .pain-art-source {
  font-size: 9.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--slate-500);
  font-weight: 700;
}
.price-intelligence-page .pain-art-field {
  font-size: 11.5px;
  color: var(--ink);
  background: #FFFFFF;
  border: 1px solid var(--slate-200);
  padding: 3px 7px;
  border-radius: 5px;
  justify-self: start;
}

/* 03 — region status */
.price-intelligence-page .pain-art-regions {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
}
.price-intelligence-page .pain-art-region {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--slate-200);
  background: #FFFFFF;
  font-size: 10.5px;
}
.price-intelligence-page .pain-art-flag {
  font-size: 10px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.04em;
}
.price-intelligence-page .pain-art-region-status {
  font-size: 9.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
}
.price-intelligence-page .pain-art-region-on .pain-art-region-status { color: var(--signal-up); }
.price-intelligence-page .pain-art-region-on { box-shadow: inset 0 0 0 1px rgba(16, 185, 129, 0.20); }
.price-intelligence-page .pain-art-region-off {
  background: var(--slate-50);
  border-style: dashed;
}
.price-intelligence-page .pain-art-region-off .pain-art-flag { color: var(--slate-500); }
.price-intelligence-page .pain-art-region-off .pain-art-region-status { color: var(--slate-400); }

/* 04 — stale freshness */
.price-intelligence-page .pain-art-stale { gap: 6px; }
.price-intelligence-page .pain-art-stale-row {
  display: flex;
  align-items: center;
  gap: 9px;
}
.price-intelligence-page .pain-art-stale-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--signal-dn);
  box-shadow: 0 0 0 3px rgba(228, 88, 88, 0.18);
}
.price-intelligence-page .pain-art-stale-label {
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate-500);
  font-weight: 700;
}
.price-intelligence-page .pain-art-stale-val {
  margin-left: auto;
  font-size: 11.5px;
  color: var(--signal-dn);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.price-intelligence-page .pain-art-stale-bar {
  position: relative;
  height: 4px;
  background: var(--slate-200);
  border-radius: 999px;
  overflow: hidden;
}
.price-intelligence-page .pain-art-stale-fill {
  position: absolute;
  inset: 0 0 0 0;
  width: 92%;
  background: linear-gradient(90deg, var(--rating-amber) 0%, var(--signal-dn) 100%);
}
.price-intelligence-page .pain-art-stale-foot {
  font-size: 9.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--slate-400);
  font-weight: 600;
}

/* ============================================================
   3. DELIVERY WIDGET — tab strip + panels
   ============================================================ */
/* Terminal palette tokens — scoped here because developers.css declares
   them on .terminal-pair-wrap, which we don't use. Kept identical so
   the dark terminals render the same as on /developers. */
.price-intelligence-page .delivery-widget {
  --term-bg: #0B1020;
  --term-bg-2: #161B36;
  --term-line: rgba(255, 255, 255, 0.08);
  --term-text: #C8CCE0;
  --term-mute: #7A809E;
  --term-cmd: #A5B4FC;
  --term-flag: #6B7090;
  --term-key: #C7D2FE;
  --term-str: #FBBF77;
  --term-num: #5EEAD4;
  --term-bool: #F9A8D4;
  --term-null: #94A3B8;
  margin-top: 28px;
}

/* The .term-tabs-strip from /developers is inline-flex, so we center it
   by giving it a flex parent (.delivery-widget) with center alignment.
   .delivery-tabs-strip is the same element with the price-intelligence
   margin tuning. */
.price-intelligence-page .delivery-widget {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.price-intelligence-page .delivery-tabs-strip {
  margin: 0 0 36px;
}
.price-intelligence-page .delivery-panel {
  width: 100%;
}

.price-intelligence-page .delivery-panel {
  display: block;
}
.price-intelligence-page .delivery-panel.hidden { display: none; }

/* --- API panel inherits .term-pair-grid + .term-card from developers.css --- */

/* --- CSV panel --- */
.price-intelligence-page .delivery-csv-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 24px;
  align-items: stretch;
}

.price-intelligence-page .csv-explainer,
.price-intelligence-page .direct-explainer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 6px 0;
}
.price-intelligence-page .csv-eyebrow,
.price-intelligence-page .direct-eyebrow {
  font-size: 10px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--indigo);
  font-weight: 700;
  margin-bottom: 10px;
}
.price-intelligence-page .csv-explainer h3,
.price-intelligence-page .direct-explainer h3 {
  margin: 0 0 12px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.18;
}
.price-intelligence-page .csv-explainer p,
.price-intelligence-page .direct-explainer p {
  margin: 0 0 16px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--slate-600);
  max-width: 48ch;
}
.price-intelligence-page .csv-explainer p b,
.price-intelligence-page .direct-explainer p b { color: var(--ink); font-weight: 600; }

.price-intelligence-page .csv-bullets {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: 13.5px;
  color: var(--slate-600);
  line-height: 1.5;
}
.price-intelligence-page .csv-bullets li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
}
.price-intelligence-page .csv-bullet-dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--indigo);
  margin-top: 7px;
  flex-shrink: 0;
}

.price-intelligence-page .csv-file {
  background: #FFFFFF;
  border: 1px solid var(--slate-200);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 24px 60px -34px rgba(15, 21, 53, 0.18), 0 2px 0 rgba(15, 21, 53, 0.02);
}
.price-intelligence-page .csv-file-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: #FAFAFD;
  border-bottom: 1px solid var(--slate-200);
}
.price-intelligence-page .csv-file-icon { color: var(--indigo); display: inline-flex; }
.price-intelligence-page .csv-file-name { font-size: 12px; color: var(--ink); font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.price-intelligence-page .csv-file-meta { font-size: 11px; color: var(--slate-500); white-space: nowrap; }

.price-intelligence-page .csv-file-table {
  display: flex;
  flex-direction: column;
}
.price-intelligence-page .csv-file-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 0.8fr 0.6fr 0.7fr 1.4fr;
  align-items: center;
  padding: 9px 14px;
  font-size: 11.5px;
  color: var(--ink);
  border-bottom: 1px solid var(--slate-200);
  font-variant-numeric: tabular-nums;
  gap: 4px;
}
.price-intelligence-page .csv-file-row:last-child { border-bottom: 0; }
.price-intelligence-page .csv-file-head {
  background: #FAFAFD;
  font-size: 9.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--slate-500);
  font-weight: 600;
  padding: 8px 14px;
}
.price-intelligence-page .csv-file-row-flag {
  background: rgba(228, 88, 88, 0.04);
}
.price-intelligence-page .csv-file-row-flag .csv-pct-up { color: var(--signal-dn); font-weight: 600; }
.price-intelligence-page .csv-cell-empty { color: var(--slate-400); }
.price-intelligence-page .csv-pct { color: var(--slate-400); font-weight: 500; }
.price-intelligence-page .csv-pct-up { color: var(--signal-up); font-weight: 600; }
.price-intelligence-page .csv-file-row-trail {
  display: block;
  text-align: center;
  color: var(--slate-500);
  font-size: 11px;
  padding: 9px 14px;
  background: var(--slate-50);
}
.price-intelligence-page .csv-file-row-trail span { display: inline; }

@media (max-width: 1023px) {
  .price-intelligence-page .delivery-csv-grid { grid-template-columns: 1fr; gap: 22px; }
  .price-intelligence-page .csv-file-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .price-intelligence-page .csv-file-row { min-width: 540px; }
}

/* --- Direct integration panel --- */
.price-intelligence-page .direct-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 24px;
  align-items: stretch;
}

.price-intelligence-page .direct-flow {
  background: #FFFFFF;
  border: 1px solid var(--slate-200);
  border-radius: 14px;
  padding: 22px;
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: 18px;
  box-shadow: 0 24px 60px -34px rgba(15, 21, 53, 0.18), 0 2px 0 rgba(15, 21, 53, 0.02);
}

/* Variant: data-flow widget embedded in the right column.
   Drops the white card chrome so the widget expands into the column,
   compresses the hub to icon + wordmark only, hides source/dest text
   labels so the connection lines breathe. */
.price-intelligence-page .direct-flow-widget {
  display: block;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
}
.price-intelligence-page .direct-flow-widget .flow-widget-wrap {
  margin: 0;
  padding: 0;
}
.price-intelligence-page .direct-flow-widget .flow-widget {
  padding: 0;
  background: transparent;
}
.price-intelligence-page .direct-flow-widget .flow-widget__column-label,
.price-intelligence-page .direct-flow-widget .flow-widget__name,
.price-intelligence-page .direct-flow-widget .flow-widget__hub-subtitle,
.price-intelligence-page .direct-flow-widget .flow-widget__hub-line,
.price-intelligence-page .direct-flow-widget .flow-widget__hub-features,
.price-intelligence-page .direct-flow-widget .flow-widget__ambient {
  display: none;
}
.price-intelligence-page .direct-flow-widget .flow-widget__scene {
  padding: 36px 0;
}
.price-intelligence-page .direct-flow-widget .flow-widget__frame {
  padding: 0 1rem;
  min-height: auto;
}
/* Source / destination cards: shrink to icon-only pills.
   The dot stays as the connection-line endpoint. */
.price-intelligence-page .direct-flow-widget .flow-widget__card {
  padding: 8px 10px;
  min-width: 0;
  width: auto;
  justify-content: center;
  gap: 0;
}
.price-intelligence-page .direct-flow-widget .flow-widget__icon {
  margin: 0;
}
/* Hub: icon mark on top, "StayAPI" wordmark beneath. Narrow column
   so connection lines have horizontal room to render. */
.price-intelligence-page .direct-flow-widget .flow-widget__hub {
  padding: 14px 16px;
  min-width: 0;
  width: auto;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.price-intelligence-page .direct-flow-widget .flow-widget__hub-mark {
  margin: 0;
}
.price-intelligence-page .direct-flow-widget .flow-widget__hub-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.price-intelligence-page .direct-flow-widget .flow-widget__column--hub {
  align-items: center;
  justify-content: center;
}

.price-intelligence-page .direct-source {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 18px;
  background: linear-gradient(180deg, rgba(99, 102, 241, 0.10), rgba(99, 102, 241, 0.04));
  border: 1px solid rgba(99, 102, 241, 0.25);
  border-radius: 12px;
  min-width: 110px;
}
.price-intelligence-page .direct-source-mark {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: linear-gradient(135deg, #5B52F0, #3B30CC);
  color: #FFFFFF;
  font-weight: 700;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.price-intelligence-page .direct-source-label { font-size: 13px; font-weight: 700; color: var(--ink); }
.price-intelligence-page .direct-source-sub { font-size: 9.5px; color: var(--indigo); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; }

.price-intelligence-page .direct-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
}

.price-intelligence-page .direct-dests {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.price-intelligence-page .direct-dest {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--slate-50);
  border: 1px solid var(--slate-200);
  border-radius: 8px;
}
.price-intelligence-page .direct-dest-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: #FFFFFF;
  border: 1px solid var(--slate-200);
}
.price-intelligence-page .direct-dest-icon img { width: 18px; height: 18px; object-fit: contain; }
.price-intelligence-page .direct-dest-icon-mark { color: var(--indigo); font-weight: 700; font-size: 13px; }
.price-intelligence-page .direct-dest-name { font-size: 13px; font-weight: 600; color: var(--ink); }
.price-intelligence-page .direct-dest-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--signal-up);
  font-weight: 600;
}
.price-intelligence-page .direct-status-dot {
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--signal-up);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18);
}

@media (max-width: 1023px) {
  .price-intelligence-page .direct-grid { grid-template-columns: 1fr; gap: 22px; }
  .price-intelligence-page .direct-flow { grid-template-columns: 1fr; gap: 14px; }
  .price-intelligence-page .direct-arrow svg { transform: rotate(90deg); }
  .price-intelligence-page .direct-source { width: 100%; }
}

/* ============================================================
   4. EMBED SECTION | wide hero panel + 4-up scanning row
   ============================================================ */

/* --- Hero benefit (named integration engineer) --- */
.price-intelligence-page .embed-hero {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 32px;
  align-items: stretch;
  background: #FFFFFF;
  border: 1px solid var(--slate-200);
  border-radius: 16px;
  padding: 32px 32px 30px;
  box-shadow: 0 24px 60px -36px rgba(15, 21, 53, 0.16), 0 1px 0 rgba(15, 21, 53, 0.02);
}

.price-intelligence-page .embed-hero-copy {
  display: flex;
  flex-direction: column;
  gap: 14px;
  justify-content: center;
}
.price-intelligence-page .embed-hero-eyebrow {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--indigo);
  font-weight: 700;
}
.price-intelligence-page .embed-hero h3 {
  margin: 0;
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.price-intelligence-page .embed-hero h3 .em-soft {
  color: var(--indigo);
  font-weight: 700;
}
.price-intelligence-page .embed-hero-copy p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--slate-600);
  max-width: 52ch;
}
.price-intelligence-page .embed-hero-points {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13.5px;
  color: var(--slate-600);
  line-height: 1.5;
}
.price-intelligence-page .embed-hero-points li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.price-intelligence-page .embed-hero-bullet {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--indigo);
  margin-top: 8px;
  flex-shrink: 0;
}

/* Volume range gauge: a single horizontal scale strip showing
   the span from "1 hotel" to "1M+ req/mo". Replaces the stacked-bar
   tiers visualization. Slate-50 panel with hairline border, soft
   indigo gradient fill on the track, 4 anchor labels under the rail. */
.price-intelligence-page .embed-gauge {
  align-self: center;
  width: 100%;
  background: var(--slate-50);
  border: 1px solid var(--slate-200);
  border-radius: 12px;
  padding: 22px 26px 26px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.price-intelligence-page .embed-gauge-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.price-intelligence-page .embed-gauge-label {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--indigo);
  font-weight: 700;
}
.price-intelligence-page .embed-gauge-meta {
  font-size: 10.5px;
  color: var(--slate-500);
  font-weight: 500;
}
.price-intelligence-page .embed-gauge-track {
  position: relative;
  height: 12px;
  background: #FFFFFF;
  border: 1px solid var(--slate-200);
  border-radius: 999px;
  margin: 6px 0 4px;
}
.price-intelligence-page .embed-gauge-fill {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(99, 102, 241, 0.18) 0%,
    rgba(99, 102, 241, 0.45) 60%,
    var(--indigo) 100%
  );
}
.price-intelligence-page .embed-gauge-tick {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 2px;
  background: var(--slate-300);
  border-radius: 999px;
  transform: translateX(-50%);
}
.price-intelligence-page .embed-gauge-tick-start {
  background: var(--indigo);
  width: 10px;
  height: 10px;
  border-radius: 999px;
  top: 50%;
  bottom: auto;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.18);
}
.price-intelligence-page .embed-gauge-tick-end {
  background: var(--indigo);
  width: 10px;
  height: 10px;
  border-radius: 999px;
  top: 50%;
  bottom: auto;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.18);
}

.price-intelligence-page .embed-gauge-labels {
  position: relative;
  height: 38px;
}
.price-intelligence-page .embed-gauge-anchor {
  position: absolute;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  transform: translateX(-50%);
  white-space: nowrap;
}
.price-intelligence-page .embed-gauge-anchor:first-child { transform: translateX(0); align-items: flex-start; }
.price-intelligence-page .embed-gauge-anchor:last-child { transform: translateX(-100%); align-items: flex-end; }
.price-intelligence-page .embed-gauge-anchor-val {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.price-intelligence-page .embed-gauge-anchor-top .embed-gauge-anchor-val {
  color: var(--indigo);
}
.price-intelligence-page .embed-gauge-anchor-unit {
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate-500);
  font-weight: 600;
}

@media (max-width: 560px) {
  .price-intelligence-page .embed-gauge { padding: 18px 20px 22px; }
  .price-intelligence-page .embed-gauge-anchor-val { font-size: 12px; }
  .price-intelligence-page .embed-gauge-anchor-unit { font-size: 8.5px; }
}
.price-intelligence-page .embed-scale-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 16px;
  background: #FFFFFF;
  border-bottom: 1px solid var(--slate-200);
}
.price-intelligence-page .embed-scale-head-label {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--indigo);
  font-weight: 700;
}
.price-intelligence-page .embed-scale-head-meta {
  font-size: 10.5px;
  color: var(--slate-500);
  font-weight: 500;
}

.price-intelligence-page .embed-scale-rows {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  justify-content: center;
}
.price-intelligence-page .embed-scale-row {
  display: grid;
  grid-template-columns: 28px 96px 1fr 110px;
  align-items: center;
  gap: 12px;
}
.price-intelligence-page .embed-scale-tier {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 22px;
  border-radius: 6px;
  background: #FFFFFF;
  border: 1px solid var(--slate-200);
  color: var(--slate-500);
  font-size: 10px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.price-intelligence-page .embed-scale-row-top .embed-scale-tier {
  background: var(--indigo);
  color: #FFFFFF;
  border-color: var(--indigo);
}
.price-intelligence-page .embed-scale-name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.price-intelligence-page .embed-scale-bar {
  position: relative;
  height: 10px;
  background: #FFFFFF;
  border: 1px solid var(--slate-200);
  border-radius: 999px;
  overflow: hidden;
}
.price-intelligence-page .embed-scale-fill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(99, 102, 241, 0.55), var(--indigo));
}
.price-intelligence-page .embed-scale-vol {
  font-size: 11.5px;
  color: var(--ink);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
.price-intelligence-page .embed-scale-row-top .embed-scale-vol { color: var(--indigo); }
.price-intelligence-page .embed-scale-row-top .embed-scale-name { color: var(--indigo); }

@media (max-width: 560px) {
  .price-intelligence-page .embed-scale-row {
    grid-template-columns: 28px 1fr auto;
    gap: 10px;
  }
  .price-intelligence-page .embed-scale-bar { display: none; }
}

/* --- 4-up scanning row of supporting features --- */
.price-intelligence-page .embed-row {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  background: #FFFFFF;
  border: 1px solid var(--slate-200);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(15, 21, 53, 0.02);
}
.price-intelligence-page .embed-row-item {
  padding: 22px 22px 20px;
  border-right: 1px solid var(--slate-200);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.price-intelligence-page .embed-row-item:last-child { border-right: 0; }
.price-intelligence-page .embed-row-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--indigo-soft);
  color: var(--indigo);
}
.price-intelligence-page .embed-row-item h4 {
  margin: 6px 0 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.012em;
  line-height: 1.25;
}
.price-intelligence-page .embed-row-item p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--slate-600);
}
.price-intelligence-page .embed-row-item p a {
  color: var(--indigo);
  text-decoration: underline;
  text-decoration-color: rgba(79, 70, 229, 0.4);
  text-underline-offset: 2px;
}
.price-intelligence-page .embed-row-item p a:hover { text-decoration-color: var(--indigo); }

@media (max-width: 1023px) {
  .price-intelligence-page .embed-hero {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 26px 24px;
  }
  .price-intelligence-page .embed-row { grid-template-columns: repeat(2, 1fr); }
  .price-intelligence-page .embed-row-item:nth-child(2n) { border-right: 0; }
  .price-intelligence-page .embed-row-item:nth-child(-n+2) { border-bottom: 1px solid var(--slate-200); }
}
@media (max-width: 560px) {
  .price-intelligence-page .embed-row { grid-template-columns: 1fr; }
  .price-intelligence-page .embed-row-item { border-right: 0; border-bottom: 1px solid var(--slate-200); }
  .price-intelligence-page .embed-row-item:last-child { border-bottom: 0; }
}

/* ============================================================
   5. FIELD CATALOG | 4-column, mono-chip glance
   ============================================================ */
.price-intelligence-page .fields-catalog {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  background: #FFFFFF;
  border: 1px solid var(--slate-200);
  border-radius: 14px;
  padding: 22px;
  box-shadow: 0 1px 0 rgba(15, 21, 53, 0.02);
}

.price-intelligence-page .fields-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 4px 16px 4px 0;
  border-right: 1px solid var(--slate-200);
}
.price-intelligence-page .fields-col:last-child { border-right: 0; padding-right: 4px; }

.price-intelligence-page .fields-col-head {
  display: grid;
  grid-template-columns: 28px 1fr;
  grid-template-rows: auto auto;
  column-gap: 10px;
  row-gap: 2px;
  align-items: center;
}
.price-intelligence-page .fields-col-icon {
  grid-row: 1 / 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: var(--indigo-soft);
  color: var(--indigo);
}
.price-intelligence-page .fields-col-head h4 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.015em;
  line-height: 1.1;
}
.price-intelligence-page .fields-col-sub {
  font-size: 11px;
  color: var(--slate-500);
  letter-spacing: -0.005em;
}

.price-intelligence-page .fields-chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.price-intelligence-page .fields-chips li {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 5px;
  background: var(--slate-50);
  border: 1px solid var(--slate-200);
  font-size: 11.5px;
  color: var(--ink);
  font-weight: 500;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.price-intelligence-page .fields-foot {
  margin: auto 0 0;
  padding-top: 4px;
  font-size: 11.5px;
  color: var(--slate-500);
  line-height: 1.45;
}
.price-intelligence-page .fields-foot b { color: var(--ink); font-weight: 600; }

.price-intelligence-page .fields-meta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 18px 0 0;
  font-size: 13px;
  color: var(--slate-500);
}
.price-intelligence-page .fields-meta-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--indigo);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.16);
}

@media (max-width: 1023px) {
  .price-intelligence-page .fields-catalog { grid-template-columns: repeat(2, 1fr); row-gap: 22px; }
  .price-intelligence-page .fields-col:nth-child(2n) { border-right: 0; padding-right: 4px; }
  .price-intelligence-page .fields-col:nth-child(-n+2) { border-bottom: 1px solid var(--slate-200); padding-bottom: 18px; }
}
@media (max-width: 560px) {
  .price-intelligence-page .fields-catalog { grid-template-columns: 1fr; padding: 18px; }
  .price-intelligence-page .fields-col { padding: 0 0 16px; border-right: 0; border-bottom: 1px solid var(--slate-200); }
  .price-intelligence-page .fields-col:last-child { border-bottom: 0; padding-bottom: 0; }
  .price-intelligence-page .fields-col:nth-child(-n+2) { border-bottom: 1px solid var(--slate-200); padding-bottom: 16px; }
}

/* ============================================================
   6a. PRICING SOURCES | logo grid (replaces build-vs-buy)
   ============================================================ */
.price-intelligence-page .sources-grid {
  background: #FFFFFF;
  border: 1px solid var(--slate-200);
  border-radius: 14px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(15, 21, 53, 0.02);
}
.price-intelligence-page .sources-cell {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 14px;
  align-items: center;
  padding: 18px 20px;
  border-right: 1px solid var(--slate-200);
  border-bottom: 1px solid var(--slate-200);
}
.price-intelligence-page .sources-cell:nth-child(3n) { border-right: 0; }
.price-intelligence-page .sources-cell:nth-last-child(-n+3) { border-bottom: 0; }
.price-intelligence-page .sources-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: var(--slate-50);
  border: 1px solid var(--slate-200);
  flex-shrink: 0;
}
.price-intelligence-page .sources-logo img {
  width: 26px;
  height: 26px;
  object-fit: contain;
}
.price-intelligence-page .sources-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.price-intelligence-page .sources-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.price-intelligence-page .sources-caps {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--indigo);
  font-weight: 600;
}
.price-intelligence-page .sources-cap { display: inline-flex; align-items: center; }
.price-intelligence-page .sources-caps-sep { color: var(--slate-300); font-weight: 400; }

.price-intelligence-page .sources-foot {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 18px 0 0;
  font-size: 13px;
  color: var(--slate-500);
}
.price-intelligence-page .sources-foot-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--indigo);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.16);
}

@media (max-width: 1023px) {
  .price-intelligence-page .sources-grid { grid-template-columns: repeat(2, 1fr); }
  .price-intelligence-page .sources-cell:nth-child(3n) { border-right: 1px solid var(--slate-200); }
  .price-intelligence-page .sources-cell:nth-child(2n) { border-right: 0; }
  .price-intelligence-page .sources-cell:nth-last-child(-n+3) { border-bottom: 1px solid var(--slate-200); }
  .price-intelligence-page .sources-cell:nth-last-child(-n+2) { border-bottom: 0; }
}
@media (max-width: 560px) {
  .price-intelligence-page .sources-grid { grid-template-columns: 1fr; }
  .price-intelligence-page .sources-cell { border-right: 0; border-bottom: 1px solid var(--slate-200); }
  .price-intelligence-page .sources-cell:last-child { border-bottom: 0; }
  .price-intelligence-page .sources-cell:nth-last-child(-n+3),
  .price-intelligence-page .sources-cell:nth-child(2n),
  .price-intelligence-page .sources-cell:nth-child(3n) { border-right: 0; }
}

/* ============================================================
   6b. BUILD-VS-BUY (legacy, kept for reference if reactivated)
   ============================================================ */
.price-intelligence-page .bvb-table {
  background: #FFFFFF;
  border: 1px solid var(--slate-200);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(15, 21, 53, 0.02);
}
.price-intelligence-page .bvb-row {
  display: grid;
  grid-template-columns: minmax(300px, 1.5fr) 1fr 1fr;
  border-bottom: 1px solid var(--slate-200);
}
.price-intelligence-page .bvb-row:last-child { border-bottom: 0; }
.price-intelligence-page .bvb-head { background: #FAFAFD; }
.price-intelligence-page .bvb-cell {
  padding: 16px 22px;
  font-size: 13.5px;
  color: var(--slate-600);
  display: flex;
  align-items: center;
  border-right: 1px solid var(--slate-200);
}
.price-intelligence-page .bvb-cell:last-child { border-right: 0; }

.price-intelligence-page .bvb-cell-criterion {
  color: var(--ink);
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: -0.005em;
  line-height: 1.35;
}
.price-intelligence-page .bvb-head .bvb-cell-criterion {
  color: var(--slate-500);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
}

.price-intelligence-page .bvb-option-head { gap: 10px; }
.price-intelligence-page .bvb-option-head .option-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: var(--slate-50);
  border: 1px solid var(--slate-200);
  color: var(--slate-500);
  font-size: 11px;
  font-weight: 700;
}
.price-intelligence-page .bvb-option-head .option-name { font-size: 13.5px; color: var(--ink); font-weight: 700; letter-spacing: -0.01em; }

.price-intelligence-page .bvb-option-head-us {
  background: linear-gradient(180deg, rgba(99, 102, 241, 0.16), rgba(99, 102, 241, 0.08));
}
.price-intelligence-page .bvb-option-head-us .option-num {
  background: var(--indigo);
  color: #FFFFFF;
  border-color: var(--indigo);
}
.price-intelligence-page .bvb-option-head-us .option-name { color: var(--indigo); }

.price-intelligence-page .bvb-cell-val {
  color: var(--slate-600);
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}
.price-intelligence-page .bvb-cell-val-us {
  background: linear-gradient(180deg, rgba(99, 102, 241, 0.06), rgba(99, 102, 241, 0.02));
  color: var(--ink);
  font-weight: 600;
}

@media (max-width: 720px) {
  .price-intelligence-page .bvb-table { border: 0; background: transparent; box-shadow: none; }
  .price-intelligence-page .bvb-head { display: none; }
  .price-intelligence-page .bvb-row {
    grid-template-columns: 1fr;
    background: #FFFFFF;
    border: 1px solid var(--slate-200);
    border-radius: 12px;
    margin-bottom: 12px;
    overflow: hidden;
  }
  .price-intelligence-page .bvb-cell { border-right: 0; border-bottom: 1px solid var(--slate-200); padding: 12px 16px; }
  .price-intelligence-page .bvb-cell:last-child { border-bottom: 0; }
  .price-intelligence-page .bvb-cell-val::before {
    content: attr(data-option);
    font-size: 9.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--slate-500);
    font-weight: 700;
    margin-right: 8px;
  }
  .price-intelligence-page .bvb-cell-criterion {
    background: #FAFAFD;
    color: var(--ink);
    font-size: 13px;
  }
}

/* ============================================================
   7. INTEGRATION TIMELINE RAIL
   ============================================================ */
.price-intelligence-page .timeline-rail {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  position: relative;
}

.price-intelligence-page .timeline-step {
  background: #FFFFFF;
  border: 1px solid var(--slate-200);
  border-radius: 12px;
  padding: 22px 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
}
.price-intelligence-page .timeline-step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -14px;
  width: 14px;
  height: 1px;
  background: linear-gradient(90deg, var(--slate-300) 0%, transparent 100%);
}
.price-intelligence-page .timeline-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--indigo-soft);
  color: var(--indigo);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.price-intelligence-page .timeline-step h4 {
  margin: 4px 0 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.015em;
  line-height: 1.25;
}
.price-intelligence-page .timeline-step p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--slate-600);
}

@media (max-width: 720px) {
  .price-intelligence-page .timeline-rail { grid-template-columns: 1fr; }
  .price-intelligence-page .timeline-step:not(:last-child)::after { display: none; }
}

/* ============================================================
   8. SAMPLE FLOW | send 5 hotels → 48h → receive JSON
   ============================================================ */
.price-intelligence-page .sample-flow {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: 18px;
  margin-top: 28px;
}

.price-intelligence-page .sample-step {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
.price-intelligence-page .sample-step-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.price-intelligence-page .sample-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: var(--indigo-soft);
  color: var(--indigo);
  font-size: 10.5px;
  font-weight: 700;
}
.price-intelligence-page .sample-step-head h4 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.015em;
}

.price-intelligence-page .sample-step-card {
  flex: 1;
  background: #FFFFFF;
  border: 1px solid var(--slate-200);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 24px 60px -34px rgba(15, 21, 53, 0.18), 0 2px 0 rgba(15, 21, 53, 0.02);
  display: flex;
  flex-direction: column;
}
.price-intelligence-page .sample-step-card-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: #FAFAFD;
  border-bottom: 1px solid var(--slate-200);
}
.price-intelligence-page .sample-step-card-bar-icon { color: var(--indigo); display: inline-flex; }
.price-intelligence-page .sample-step-card-bar-label {
  font-size: 11.5px;
  color: var(--ink);
  font-weight: 600;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.price-intelligence-page .sample-step-list {
  list-style: none;
  margin: 0;
  padding: 14px 16px 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.price-intelligence-page .sample-step-list li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  align-items: center;
  font-size: 13.5px;
  color: var(--ink);
  font-weight: 500;
}
.price-intelligence-page .sample-step-list li .mono {
  color: var(--slate-400);
  font-size: 11.5px;
  font-weight: 600;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.price-intelligence-page .sample-step-target {
  grid-template-columns: auto 1fr !important;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--slate-200);
  margin-bottom: 4px;
}
.price-intelligence-page .sample-step-target-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 5px;
  background: var(--indigo);
  color: #FFFFFF;
  font-size: 9.5px !important;
  letter-spacing: 0.08em;
  font-weight: 700 !important;
  text-align: center !important;
  text-transform: uppercase;
  justify-self: start;
}
.price-intelligence-page .sample-step-list-more {
  grid-template-columns: 1fr !important;
  font-size: 11px !important;
  color: var(--slate-400) !important;
  font-style: italic;
  padding-top: 4px;
}
.price-intelligence-page .sample-step-section-label {
  grid-template-columns: 1fr !important;
  font-size: 9.5px !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate-500) !important;
  font-weight: 700;
  padding-top: 2px;
}

.price-intelligence-page .sample-step-formats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px 16px 16px;
  border-top: 1px dashed var(--slate-200);
}
.price-intelligence-page .sample-step-formats span {
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--slate-500);
  padding: 3px 8px;
  border-radius: 5px;
  background: var(--slate-50);
  border: 1px solid var(--slate-200);
}

/* Receive side: dark JSON terminal. Constrained height so the JSON
   scrolls inside the card instead of growing the card to match content. */
.price-intelligence-page .sample-step-card-dark {
  background: var(--ink);
  border-color: rgba(15, 21, 53, 0.2);
  max-height: 320px;
  overflow: hidden;
}
@media (min-width: 1024px) {
  .price-intelligence-page .sample-step-card-dark { max-height: 300px; }
}
.price-intelligence-page .sample-step-card-bar-dark {
  background: #161B36;
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
.price-intelligence-page .sample-step-card-bar-dark .sample-step-card-bar-label {
  color: rgba(199, 210, 254, 0.78);
}
.price-intelligence-page .sample-step-card-bar-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--signal-up);
}
.price-intelligence-page .sample-step-card-bar-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--signal-up);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
}

.price-intelligence-page .sample-step-json {
  margin: 0;
  padding: 14px 16px 16px;
  font-size: 12px;
  line-height: 1.5;
  color: #C8CCE0;
  white-space: pre;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  flex: 1;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.16) transparent;
}
.price-intelligence-page .sample-step-json::-webkit-scrollbar { width: 8px; height: 8px; }
.price-intelligence-page .sample-step-json::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.14);
  border-radius: 99px;
}
.price-intelligence-page .sample-step-json::-webkit-scrollbar-track { background: transparent; }
.price-intelligence-page .sample-step-json .j-key  { color: #C7D2FE; }
.price-intelligence-page .sample-step-json .j-str  { color: #FBBF77; }
.price-intelligence-page .sample-step-json .j-num  { color: #5EEAD4; font-variant-numeric: tabular-nums; }
.price-intelligence-page .sample-step-json .j-bool { color: #F9A8D4; }

/* Arrow between steps */
.price-intelligence-page .sample-flow-arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 8px;
}
.price-intelligence-page .sample-flow-arrow-label {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--indigo);
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--indigo-soft);
}

.price-intelligence-page .sample-cta-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 28px;
  flex-wrap: wrap;
}
.price-intelligence-page .sample-cta-meta {
  font-size: 12px;
  color: var(--slate-500);
}
.price-intelligence-page .sample-cta-or {
  color: var(--slate-400);
  font-size: 13px;
}
.price-intelligence-page .sample-cta-link {
  font-size: 14px;
  font-weight: 600;
  color: var(--indigo);
}
.price-intelligence-page .sample-cta-link:hover { color: var(--indigo-deep); }

@media (max-width: 1023px) {
  .price-intelligence-page .sample-flow { grid-template-columns: 1fr; }
  .price-intelligence-page .sample-flow-arrow { padding: 0; }
  .price-intelligence-page .sample-flow-arrow svg { transform: rotate(90deg); }
}

/* ============================================================
   9. HERO ATMOSPHERE TUNING (bigger glow under the matrix)
   ============================================================ */
.price-intelligence-page .hero { padding-top: 56px; padding-bottom: 28px; }
.price-intelligence-page .hero::before {
  background:
    radial-gradient(720px 380px at 88% -5%, rgba(99, 102, 241, 0.12), transparent 60%),
    radial-gradient(640px 320px at 8% 12%, rgba(99, 102, 241, 0.08), transparent 60%);
}

/* Ensure the section eyebrow inside the sample copy stays in the
   slot that .section-eyebrow would normally provide via .section-head. */
.price-intelligence-page .sample-copy .section-eyebrow {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--indigo);
  font-weight: 700;
}
/* Rouge Syntax Highlighting Theme - Dark Theme (Programmer Friendly) */

/* Code blocks */
.code-block {
  background-color: #0f172a; /* slate-900 */
  color: #f1f5f9; /* slate-100 */
  padding: 1.25rem;
  margin: 0;
  overflow-x: auto;
  font-size: 0.875rem;
  line-height: 1.6;
  font-family: var(--font-mono) !important;
  border: none;
  border-radius: 0; /* Let parent handle rounding */
}

/* Rouge token styles - Dark theme */
.highlight {
  background-color: #0f172a;
  color: #f1f5f9;
}

/* Comments */
.code-block .c, .code-block .cm, .code-block .c1, .code-block .cs {
  color: #64748b; /* slate-500 */
  font-style: italic;
}

/* Strings */
.code-block .s, .code-block .sb, .code-block .sc, .code-block .sd, .code-block .s2, .code-block .se, .code-block .sh, .code-block .si, .code-block .sx, .code-block .s1 {
  color: #38bdf8; /* sky-400 */
}

/* Keywords */
.code-block .k, .code-block .kc, .code-block .kd, .code-block .kn, .code-block .kp, .code-block .kr, .code-block .kt {
  color: #c084fc; /* purple-400 */
}

/* Identifiers/Names */
.code-block .nx, .code-block .n {
  color: #f1f5f9;
}

/* String delimiters */
.code-block .dl {
  color: #38bdf8;
}

/* Functions and methods */
.code-block .nf, .code-block .fm {
  color: #fb7185; /* rose-400 */
}

/* Numbers */
.code-block .m, .code-block .mf, .code-block .mh, .code-block .mi, .code-block .il, .code-block .mo, .code-block .mb, .code-block .mx {
  color: #fbbf24; /* amber-400 */
}

/* Booleans and null */
.code-block .kc {
  color: #fbbf24;
}

/* Operators */
.code-block .o, .code-block .ow {
  color: #94a3b8; /* slate-400 */
}

/* Punctuation */
.code-block .p {
  color: #94a3b8;
}

/* Variables */
.code-block .nv, .code-block .vc, .code-block .vg, .code-block .vi {
  color: #fb923c; /* orange-400 */
}

/* Class names */
.code-block .nc, .code-block .nn {
  color: #fb7185;
}

/* Attributes */
.code-block .na {
  color: #38bdf8;
}

/* HTML/XML tags */
.code-block .nt {
  color: #c084fc;
}

/* JSON keys/names */
.code-block .nl {
  color: #818cf8; /* indigo-400 */
}

/* Whitespace */
.code-block .w {
  color: #f1f5f9;
}

/* Ensure copy button gets correct text */
.code-block code {
  background: transparent;
  padding: 0;
  color: inherit;
}
/*
 * Site-wide desktop header — operator-console rail.
 * Light theme only. Indigo accent rationed to action surfaces.
 * Mobile menu is rendered by the existing Tailwind classes; nothing here
 * targets viewports below 768px.
 */

.site-header {
  position: relative;
  z-index: 40;
  background: #FBFAFC;
  border-bottom: 1px solid #E7E9EF;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.site-header__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 40px;
  height: 64px;
  display: flex;
  align-items: center;
  gap: 32px;
}

@media (max-width: 1023px) {
  .site-header__inner {
    padding: 0 24px;
    gap: 18px;
  }
}

.site-header__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  height: 40px;
}

.site-header__logo-mark {
  position: relative;
  width: 116px;
  height: 36px;
}

.site-header__logo-mark > span {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #5B52F0, #3B30CC);
}

/* ---------- Desktop nav rail ---------- */

@media (min-width: 768px) {
  .site-header__nav {
    display: flex;
    align-items: stretch;
    height: 100%;
    margin-left: 4px;
  }
}

.site-header__nav-item {
  position: relative;
  display: flex;
  align-items: stretch;
}

.site-header__nav-link {
  display: inline-flex;
  align-items: center;
  height: 100%;
  padding: 0 14px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: #454A6A;
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: color 160ms ease;
}

.site-header__nav-link::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: -1px;
  height: 2px;
  background: #4F46E5;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
  border-radius: 2px;
  pointer-events: none;
}

.site-header__nav-item:hover .site-header__nav-link,
.site-header__nav-link[aria-expanded="true"],
.site-header__nav-link.is-active {
  color: #0B1020;
}

.site-header__nav-item:hover .site-header__nav-link::after,
.site-header__nav-link[aria-expanded="true"]::after,
.site-header__nav-link.is-active::after {
  transform: scaleX(1);
}

.site-header__nav-caret {
  width: 10px;
  height: 10px;
  margin-left: 6px;
  color: #9AA0B4;
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), color 160ms ease;
}

.site-header__nav-item:hover .site-header__nav-caret,
.site-header__nav-link[aria-expanded="true"] .site-header__nav-caret {
  transform: rotate(180deg);
  color: #454A6A;
}

@media (prefers-reduced-motion: reduce) {
  .site-header__nav-link::after,
  .site-header__nav-caret,
  .site-header__menu,
  .site-header__solution-row,
  .site-header__solution-tile,
  .site-header__free-tools-link,
  .site-header__resources-row,
  .site-header__demo,
  .site-header__demo-glyph-line {
    transition: none !important;
  }
}

/* ---------- CTA cluster ---------- */

.site-header__spacer {
  flex: 1;
}

.site-header__cta {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-shrink: 0;
}

.site-header__sign-in {
  font-size: 14px;
  font-weight: 500;
  color: #454A6A;
  letter-spacing: -0.005em;
  transition: color 160ms ease;
}

.site-header__sign-in:hover {
  color: #0B1020;
}

.site-header__user-link {
  font-size: 14px;
  font-weight: 500;
  color: #454A6A;
  letter-spacing: -0.005em;
  transition: color 160ms ease;
}

.site-header__user-link:hover {
  color: #0B1020;
}

.site-header__user-link--admin {
  color: #C73838;
}

.site-header__user-link--admin:hover {
  color: #A31E1E;
}

.site-header__signout {
  font-size: 13.5px;
  font-weight: 500;
  color: #454A6A;
  background: #F4F5F8;
  border: 1px solid #E7E9EF;
  padding: 8px 14px;
  border-radius: 10px;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}

.site-header__signout:hover {
  color: #0B1020;
  background: #ECEEF3;
  border-color: #D2D6E0;
}

.site-header__demo {
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
  color: #FBFAFC;
  background: #4F46E5;
  padding: 9px 14px 9px 16px;
  border-radius: 10px;
  letter-spacing: -0.005em;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset, 0 8px 22px -8px rgba(79, 70, 229, 0.55);
  transition: background 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.site-header__demo:hover {
  background: #4338CA;
  transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset, 0 12px 26px -10px rgba(79, 70, 229, 0.7);
}

.site-header__demo-glyph {
  width: 14px;
  height: 14px;
  margin-left: 8px;
  overflow: visible;
}

.site-header__demo-glyph-line {
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.site-header__demo:hover .site-header__demo-glyph-line {
  transform: translateX(2px);
}

/* ---------- Dropdown panels ---------- */

.site-header__menu {
  position: absolute;
  top: 100%;
  margin-top: 8px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 200ms cubic-bezier(0.22, 1, 0.36, 1), transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 50;
}

/* Hover bridge so the cursor can travel from button to panel without closing */
.site-header__menu::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  height: 14px;
}

.site-header__nav-item:hover .site-header__menu,
.site-header__menu.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.site-header__menu-card {
  background: #FFFFFF;
  border: 1px solid #E7E9EF;
  border-radius: 14px;
  box-shadow: 0 24px 60px -28px rgba(15, 21, 53, 0.22), 0 2px 0 rgba(15, 21, 53, 0.02);
  overflow: hidden;
}

/* Solutions */

.site-header__menu--solutions {
  width: 480px;
  left: 0;
}

.site-header__solution-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 14px 18px;
  border-bottom: 1px solid #E7E9EF;
  text-decoration: none;
  position: relative;
  transition: background 160ms ease;
}

.site-header__solution-row:last-child {
  border-bottom: 0;
}

.site-header__solution-row:hover {
  background: #FBFAFC;
}

.site-header__solution-tile {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: #F4F5F8;
  border: 1px solid #E7E9EF;
  display: grid;
  place-items: center;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
  font-weight: 600;
  color: #6B7090;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  transition: background 200ms ease, border-color 200ms ease, color 200ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.site-header__solution-row:hover .site-header__solution-tile {
  background: #4F46E5;
  border-color: #4F46E5;
  color: #FBFAFC;
  transform: translateY(-1px);
}

.site-header__solution-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding-top: 1px;
}

.site-header__solution-title {
  font-size: 14.5px;
  font-weight: 600;
  color: #0B1020;
  letter-spacing: -0.012em;
  line-height: 1.2;
}

.site-header__solution-caption {
  font-size: 12.5px;
  font-weight: 400;
  color: #6B7090;
  line-height: 1.45;
  letter-spacing: 0;
}

/* Free Tools */

.site-header__menu--free-tools {
  width: 640px;
  left: 50%;
  transform: translateX(-50%) translateY(4px);
}

.site-header__nav-item:hover .site-header__menu--free-tools,
.site-header__menu--free-tools.is-open {
  transform: translateX(-50%) translateY(0);
}

.site-header__free-tools-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr 1fr;
}

.site-header__free-tools-col {
  padding: 18px 20px;
  border-right: 1px solid #E7E9EF;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.site-header__free-tools-col:last-child {
  border-right: 0;
}

.site-header__free-tools-section {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.site-header__free-tools-label {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: #9AA0B4;
  margin-bottom: 6px;
  font-variant-numeric: tabular-nums;
}

.site-header__free-tools-link {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 5px 0;
  font-size: 13px;
  font-weight: 500;
  color: #454A6A;
  letter-spacing: -0.003em;
  position: relative;
  transition: color 160ms ease, transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.site-header__free-tools-link::before {
  content: "";
  width: 0;
  height: 4px;
  border-radius: 999px;
  background: #4F46E5;
  margin-right: 0;
  transition: width 200ms cubic-bezier(0.22, 1, 0.36, 1), margin-right 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.site-header__free-tools-link:hover {
  color: #0B1020;
}

.site-header__free-tools-link:hover::before {
  width: 6px;
  margin-right: 8px;
}

/* Resources */

.site-header__menu--resources {
  width: 320px;
  left: 50%;
  transform: translateX(-50%) translateY(4px);
}

.site-header__nav-item:hover .site-header__menu--resources,
.site-header__menu--resources.is-open {
  transform: translateX(-50%) translateY(0);
}

.site-header__resources-row {
  display: block;
  padding: 14px 20px;
  border-bottom: 1px solid #E7E9EF;
  position: relative;
  transition: background 160ms ease;
}

.site-header__resources-row:last-child {
  border-bottom: 0;
}

.site-header__resources-row:hover {
  background: #FBFAFC;
}

.site-header__resources-row::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 50%;
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: #4F46E5;
  transform: translateY(-50%) scale(0);
  opacity: 0;
  transition: opacity 200ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.site-header__resources-row:hover::before {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}

.site-header__resources-title {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #0B1020;
  letter-spacing: -0.012em;
}

.site-header__resources-caption {
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: #6B7090;
  margin-top: 3px;
  line-height: 1.45;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

/* Custom animations for StayAPI homepage */
@keyframes slide-in-right {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Remove the old blob animation and add new ones */
@keyframes gradient {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

@keyframes gradient-text {
  0%, 100% {
    background-size: 200% 200%;
    background-position: left center;
  }
  50% {
    background-size: 200% 200%;
    background-position: right center;
  }
}

@keyframes fade-in-down {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes float-slow {
  0%, 100% {
    transform: translateY(0px) rotate(45deg);
  }
  50% {
    transform: translateY(-20px) rotate(45deg);
  }
}

@keyframes float-medium {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-15px);
  }
}

@keyframes float-fast {
  0%, 100% {
    transform: translateY(0px) rotate(12deg);
  }
  50% {
    transform: translateY(-10px) rotate(12deg);
  }
}

@keyframes grid-float {
  0%, 100% {
    transform: translateX(0) translateY(0);
  }
  25% {
    transform: translateX(-5px) translateY(-5px);
  }
  75% {
    transform: translateX(5px) translateY(5px);
  }
}

@keyframes particle-float {
  0% {
    transform: translateY(100vh) scale(0);
  }
  10% {
    transform: translateY(90vh) scale(1);
  }
  100% {
    transform: translateY(-100vh) scale(0);
  }
}

@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes shine {
  0% {
    box-shadow: 0 0 5px rgba(99, 102, 241, 0.3); /* indigo-500 */
  }
  50% {
    box-shadow: 0 0 20px rgba(99, 102, 241, 0.6), 0 0 30px rgba(139, 92, 246, 0.4); /* violet-500 */
  }
  100% {
    box-shadow: 0 0 5px rgba(99, 102, 241, 0.3);
  }
}

.animate-slide-in-right {
  animation: slide-in-right 0.5s ease-out;
}

.animate-gradient {
  background-size: 400% 400%;
  animation: gradient 15s ease infinite;
}

.animate-gradient-text {
  animation: gradient-text 3s ease infinite;
}

.animate-fade-in-down {
  animation: fade-in-down 0.8s ease-out;
}

.animate-fade-in-up {
  animation: fade-in-up 0.8s ease-out;
}

.animate-float-slow {
  animation: float-slow 8s ease-in-out infinite;
}

.animate-float-medium {
  animation: float-medium 6s ease-in-out infinite;
}

.animate-float-fast {
  animation: float-fast 4s ease-in-out infinite;
}

.animate-grid-float {
  animation: grid-float 20s ease-in-out infinite;
}

.animation-delay-200 {
  animation-delay: 0.2s;
}

.animation-delay-400 {
  animation-delay: 0.4s;
}

.animation-delay-600 {
  animation-delay: 0.6s;
}

.animate-float {
  animation: float 3s ease-in-out infinite, shine 2s ease-in-out infinite;
}

/* Grid background pattern */
.grid-background {
  background-image:
    linear-gradient(rgba(99, 102, 241, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(99, 102, 241, 0.05) 1px, transparent 1px);
  background-size: 50px 50px;
}

/* Particles */
.particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: linear-gradient(to bottom, rgba(99, 102, 241, 0.5), rgba(139, 92, 246, 0.5)); /* Indigo to Violet */
  border-radius: 50%;
  animation: particle-float linear infinite;
}

.particle-1 {
  left: 10%;
  animation-duration: 20s;
  animation-delay: 0s;
}

.particle-2 {
  left: 30%;
  animation-duration: 25s;
  animation-delay: 5s;
}

.particle-3 {
  left: 50%;
  animation-duration: 30s;
  animation-delay: 10s;
}

.particle-4 {
  left: 70%;
  animation-duration: 22s;
  animation-delay: 15s;
}

.particle-5 {
  left: 90%;
  animation-duration: 28s;
  animation-delay: 20s;
}

/* Blob animation */
@keyframes blob {
  0% {
    transform: translate(0px, 0px) scale(1);
  }
  33% {
    transform: translate(30px, -50px) scale(1.1);
  }
  66% {
    transform: translate(-20px, 20px) scale(0.9);
  }
  100% {
    transform: translate(0px, 0px) scale(1);
  }
}

.animate-blob {
  animation: blob 7s infinite;
}

.animation-delay-2000 {
  animation-delay: 2s;
}

.animation-delay-4000 {
  animation-delay: 4s;
}

/* Global Scrollbar Styling */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

/* Hide scrollbar utility */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

::-webkit-scrollbar-track {
  background: #f8fafc; /* slate-50 */
}

::-webkit-scrollbar-thumb {
  background: #cbd5e1; /* slate-300 */
  border-radius: 10px;
  border: 2px solid #f8fafc;
}

::-webkit-scrollbar-thumb:hover {
  background: #94a3b8; /* slate-400 */
}

/* Scrollbar Utilities */
.scrollbar-docs {
  scrollbar-width: thin;
  scrollbar-color: rgba(203, 213, 225, 0.5) #0f172a;
}

.scrollbar-docs::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.scrollbar-docs::-webkit-scrollbar-track {
  background: #0f172a; /* slate-900 */
}

.scrollbar-docs::-webkit-scrollbar-thumb {
  background: rgba(203, 213, 225, 0.4); /* slate-300 */
  border-radius: 10px;
}

.scrollbar-docs::-webkit-scrollbar-thumb:hover {
  background: rgba(148, 163, 184, 0.6); /* slate-400 */
}

.scrollbar-hero {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
}

.scrollbar-hero::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

.scrollbar-hero::-webkit-scrollbar-track {
  background: transparent;
}

.scrollbar-hero::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
}

.scrollbar-hero::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
}

.scrollbar-light {
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 #f8fafc;
}

.scrollbar-light::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.scrollbar-light::-webkit-scrollbar-track {
  background: #f8fafc; /* slate-50 */
}

.scrollbar-light::-webkit-scrollbar-thumb {
  background: #cbd5e1; /* slate-300 */
  border-radius: 10px;
  border: 2px solid #f8fafc;
}

.scrollbar-light::-webkit-scrollbar-thumb:hover {
  background: #94a3b8; /* slate-400 */
}

/* Legacy scrollbar utils */
.scrollbar-thin {
  scrollbar-width: thin;
}

.scrollbar-thumb-purple-500 {
  scrollbar-color: rgb(168 85 247) transparent;
}

.scrollbar-track-slate-100 {
  scrollbar-color: rgb(241 245 249) transparent;
}

/* Webkit scrollbar styles */
.scrollbar-thin::-webkit-scrollbar {
  width: 6px;
}

.scrollbar-thin::-webkit-scrollbar-track {
  background: rgb(241 245 249);
  border-radius: 3px;
}

.scrollbar-thin::-webkit-scrollbar-thumb {
  background: rgb(168 85 247);
  border-radius: 3px;
}

.scrollbar-thin::-webkit-scrollbar-thumb:hover {
  background: rgb(147 51 234);
}

/* Form Styles */
  /* Simple spinner utility independent of Tailwind */
  @keyframes sa_spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }

  .sa-spinner {
    width: 3rem; /* 48px */
    height: 3rem; /* 48px */
    border-radius: 9999px;
    border-width: 4px;
    border-style: solid;
    border-color: #a855f7; /* purple-500 */
    border-top-color: transparent;
    animation: sa_spin 0.9s linear infinite;
  }
/* Make Devise forms smaller on larger screens */
@media (min-width: 768px) {
  .devise-form-container {
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
  }
}

#delete-account-button {
  background-color: #dc2626 !important;
  border: none;
  transition: all 0.3s ease;
}

/* Remove focus outline from all inputs */
input:focus,
textarea:focus,
select:focus {
  outline: none !important;
}

/* Docs sidebar mobile toggle */
details.docs-sidebar-toggle summary {
  list-style: none;
}

details.docs-sidebar-toggle summary::-webkit-details-marker {
  display: none;
}

details.docs-sidebar-toggle .docs-sidebar-toggle-icon {
  transition: transform 0.2s ease;
}

details.docs-sidebar-toggle[open] .docs-sidebar-toggle-icon {
  transform: rotate(180deg);
}

/* Font Configuration */
:root {
  --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-heading: 'Plus Jakarta Sans', var(--font-sans);
  --font-display: 'Syne', var(--font-sans);
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

body {
  font-family: var(--font-sans);
}

h1, h2, h3, h4, h5, h6, .font-heading {
  font-family: var(--font-heading);
}

code, pre, kbd, samp, .font-mono {
  font-family: var(--font-mono) !important;
}

/* Glitch Animation for Homepage Hero */
.glitch-text {
  position: relative;
  display: inline-block;
  /* Use the gradient here instead of on the parent to ensure clipping works with dynamic updates */
  background-image: linear-gradient(to right, #f97316, #dc2626, #7e22ce); /* orange-500, red-600, purple-700 */
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transition: all 0.2s ease;
}

/* Ensure text is visible even if parent has text-transparent */
.glitch-text:not(.is-glitching) {
  -webkit-text-fill-color: transparent;
}

/* Mobile slide+blur transition */
.glitch-text.glitch-text-exit {
  opacity: 0;
  transform: translateY(-10px);
  filter: blur(4px);
}

.glitch-text.glitch-text-enter {
  opacity: 0;
  transform: translateY(10px);
  filter: blur(4px);
}

/* Mobile fade transition for text-scramble controller */
[data-controller="text-scramble"] {
  transition: opacity 0.2s ease, transform 0.2s ease;
}

[data-controller="text-scramble"].text-scramble-fade-out {
  opacity: 0;
  transform: translateY(-8px);
}

[data-controller="text-scramble"].text-scramble-fade-in {
  opacity: 0;
  transform: translateY(8px);
}

/* Pseudo-elements for the color-split glitch effect (desktop only) */
@media (min-width: 768px) {
  .glitch-text.is-glitching::before,
  .glitch-text.is-glitching::after {
    content: attr(data-content);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    pointer-events: none;
    /* Pseudo-elements need solid color to show the glitch shadows clearly */
    -webkit-text-fill-color: #334155; /* slate-700 */
    color: #334155;
    opacity: 0.8;
  }

  .glitch-text.is-glitching::before {
    left: 3px;
    text-shadow: -3px 0 #ff00c1;
    clip-path: inset(45% 0 45% 0);
    animation: glitch-anim 0.4s infinite linear alternate-reverse;
  }

  .glitch-text.is-glitching::after {
    left: -3px;
    text-shadow: 3px 0 #00fff9;
    clip-path: inset(50% 0 30% 0);
    animation: glitch-anim2 0.4s infinite linear alternate-reverse;
  }
}

@keyframes glitch-anim {
  0% { clip-path: inset(10% 0 80% 0); transform: translate(-2px); }
  20% { clip-path: inset(30% 0 20% 0); transform: translate(2px); }
  40% { clip-path: inset(50% 0 10% 0); transform: translate(-1px); }
  60% { clip-path: inset(80% 0 5% 0); transform: translate(1px); }
  80% { clip-path: inset(20% 0 60% 0); transform: translate(-2px); }
  100% { clip-path: inset(40% 0 40% 0); transform: translate(0); }
}

@keyframes glitch-anim2 {
  0% { clip-path: inset(80% 0 10% 0); transform: translate(2px); }
  20% { clip-path: inset(20% 0 30% 0); transform: translate(-2px); }
  40% { clip-path: inset(10% 0 50% 0); transform: translate(1px); }
  60% { clip-path: inset(5% 0 80% 0); transform: translate(-1px); }
  80% { clip-path: inset(60% 0 20% 0); transform: translate(2px); }
  100% { clip-path: inset(40% 0 40% 0); transform: translate(0); }
}

/* Override Tailwind utilities */
.font-sans {
  font-family: var(--font-sans) !important;
}

.font-mono {
  font-family: var(--font-mono) !important;
}

.font-display {
  font-family: var(--font-display) !important;
}

/* Terminal Theater Effect */
.terminal-cursor {
  display: inline;
  color: #22d3ee; /* cyan-400 */
  animation: terminal-blink 0.7s step-end infinite;
  font-weight: bold;
  margin-left: 2px;
}

@keyframes terminal-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* Smooth content transitions for terminal theater */
.terminal-content-enter {
  opacity: 0;
  transform: translateY(8px);
}

.terminal-content-active {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}

/* Mobile Table Responsiveness - Prevent horizontal page overflow */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

/* Code blocks - horizontal scroll on mobile */
pre.code-block {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 768px) {
  pre, code {
    word-break: break-word;
    overflow-wrap: break-word;
  }

  pre.code-block {
    max-width: 100%;
    font-size: 12px;
  }

  /* Ensure code example containers don't overflow */
  .scrollbar-docs {
    overflow-x: auto;
  }
}

/* Documentation table wrapper - scrollable on mobile */
.docs-table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 768px) {
  /* Ensure table containers scroll internally */
  .overflow-hidden {
    overflow-x: auto;
  }

  /* Make table cells wrap better on mobile */
  table td,
  table th {
    max-width: 200px;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  /* Allow whitespace to wrap on mobile for better readability */
  table td.whitespace-nowrap,
  table th.whitespace-nowrap {
    white-space: normal;
  }
}

/* Documentation endpoint URL blocks - horizontal scroll on mobile */
.docs-layout .bg-gray-50.font-mono,
.docs-layout div.font-mono {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  white-space: nowrap;
}

/* Documentation inline code elements - prevent overflow */
.docs-layout code {
  word-break: break-word;
  overflow-wrap: break-word;
}

@media (max-width: 768px) {
  /* Docs endpoint URL blocks - ensure they scroll on mobile */
  .docs-layout .bg-gray-50 {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }

  /* Pre blocks in docs should scroll not overflow */
  .docs-layout pre {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    white-space: pre;
  }

  /* Inline code should break on mobile */
  .docs-layout code:not(pre code) {
    word-break: break-all;
  }
}

/* Disable backdrop-blur on mobile for performance */
@media (max-width: 767px) {
  .backdrop-blur-sm,
  .backdrop-blur-md,
  .backdrop-blur,
  .backdrop-blur-lg,
  .backdrop-blur-xl,
  [class*="backdrop-blur"] {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* Homepage data flow widget */
.flow-widget-wrap {
  padding-top: 2rem;
}

.flow-widget {
  padding: 3rem 0 3rem;
  color: #0f172a;
  overflow: hidden;
  position: relative;
}

.flow-widget__header {
  text-align: center;
  position: relative;
  z-index: 6;
}

.flow-widget__hero-title {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: #0f172a;
}

@media (min-width: 768px) {
  .flow-widget__hero-title {
    font-size: 3.25rem;
  }
}

.flow-widget__hero-subtitle {
  margin-top: 1rem;
  font-size: 1.05rem;
  color: #475569;
  max-width: 42rem;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}

.flow-widget__scene {
  position: relative;
  margin-top: -3.5rem;
  min-height: 640px;
}

.flow-widget__scene::before {
  display: none;
}

.flow-widget__scene::after {
  content: "";
  position: absolute;
  inset: -18%;
  pointer-events: none;
  opacity: 0;
}

.flow-widget__scene--whoom-source::after {
  background: radial-gradient(circle at 24% 50%, rgba(251, 146, 60, 0.24) 0%, rgba(251, 146, 60, 0) 62%);
  animation: flow-widget-whoom 0.34s ease-out;
}

.flow-widget__scene--whoom-dest::after {
  background: radial-gradient(circle at 76% 50%, rgba(52, 211, 153, 0.24) 0%, rgba(52, 211, 153, 0) 62%);
  animation: flow-widget-whoom 0.34s ease-out;
}

.flow-widget__ambient {
  position: absolute;
  border-radius: 999px;
  filter: blur(100px);
  pointer-events: none;
  opacity: 0.24;
}

.flow-widget__ambient--left {
  width: 340px;
  height: 340px;
  background: #f97316;
  top: 12%;
  left: -7%;
}

.flow-widget__ambient--center {
  width: 460px;
  height: 460px;
  background: #2563eb;
  top: 22%;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0.2;
}

.flow-widget__ambient--right {
  width: 340px;
  height: 340px;
  background: #10b981;
  top: 12%;
  right: -7%;
}

.flow-widget__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 4;
}

.flow-widget__frame {
  position: relative;
  z-index: 5;
  padding: 1.5rem 1rem 1rem;
  min-height: 520px;
}

.flow-widget__grid {
  display: grid;
  grid-template-columns: minmax(180px, 220px) minmax(180px, 1fr) minmax(180px, 220px);
  gap: 1rem;
  align-items: center;
  justify-content: center;
  max-width: 1120px;
  margin: 0 auto;
}

.flow-widget__column {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
}

.flow-widget__column--hub {
  justify-content: center;
  min-height: 460px;
}

.flow-widget__column-label {
  margin-bottom: 0.25rem;
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: #64748b;
}

.flow-widget__card {
  width: 100%;
  min-height: 50px;
  border-radius: 0.8rem;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.65rem 0.75rem;
  position: relative;
  opacity: 0;
  animation: flow-widget-card-in 0.55s ease forwards;
  transition: transform 0.25s ease, border-color 0.25s ease, background 0.35s ease;
}

.flow-widget__card:hover {
  transform: translateY(-2px);
  border-color: rgba(0, 0, 0, 0.12);
}

.flow-widget__card--sliding-in {
  overflow: hidden;
}

.flow-widget__card--sliding-in .flow-widget__icon,
.flow-widget__card--sliding-in .flow-widget__name {
  animation: flow-widget-slide-up 0.38s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.flow-widget__column--sources .flow-widget__card {
  animation-delay: 90ms;
}

.flow-widget__column--destinations .flow-widget__card {
  animation-delay: 120ms;
}

.flow-widget__icon {
  width: 1.45rem;
  height: 1.45rem;
  border-radius: 0.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.66rem;
  font-weight: 700;
  flex-shrink: 0;
}

.flow-widget__icon--image {
  background: transparent !important;
}

.flow-widget__icon-image {
  width: 1.45rem;
  height: 1.45rem;
  display: block;
  object-fit: contain;
  border-radius: 0.4rem;
}

.flow-widget__icon-image--hidden {
  display: none;
}

.flow-widget__name {
  font-size: 0.82rem;
  font-weight: 600;
  color: #1e293b;
}

.flow-widget__dot {
  width: 0.34rem;
  height: 0.34rem;
  border-radius: 999px;
  position: absolute;
  top: calc(50% - 0.17rem);
  animation: flow-widget-dot-pulse 1.9s ease-in-out infinite;
}

.flow-widget__dot--source {
  right: -0.17rem;
  background: #fb923c;
  box-shadow: 0 0 10px #fb923c;
}

.flow-widget__dot--dest {
  left: -0.17rem;
  background: #34d399;
  box-shadow: 0 0 10px #34d399;
}

.flow-widget__hub {
  width: 152px;
  height: 152px;
  border-radius: 1.6rem;
  border: 1px solid rgba(59, 130, 246, 0.25);
  background: linear-gradient(140deg, #1e3a5f, #0f1f33);
  color: #f8fafc;
  box-shadow:
    0 0 40px rgba(37, 99, 235, 0.15),
    0 4px 12px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  animation: flow-widget-hub-pulse 3.2s ease-in-out infinite;
}

.flow-widget__hub-title {
  font-size: 1.65rem;
  line-height: 1;
  font-family: "Syne", sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.flow-widget__hub-subtitle {
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(147, 197, 253, 0.9);
}

.flow-widget__ctas {
  position: absolute;
  bottom: 8rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  display: flex;
  gap: 1rem;
}

.flow-widget__cta {
  padding: 0.75rem 1.75rem;
  border-radius: 9999px;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  transition: all 0.2s;
  white-space: nowrap;
}

.flow-widget__cta--primary {
  background: #0f172a;
  color: #fff;
}

.flow-widget__cta--primary:hover {
  background: #1e293b;
}

.flow-widget__cta--secondary {
  background: transparent;
  color: #0f172a;
  border: 1px solid #475569;
}

.flow-widget__cta--secondary:hover {
  border-color: #94a3b8;
  background: rgba(255, 255, 255, 0.5);
}

.flow-widget__clients {
  position: absolute;
  bottom: -0.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  text-align: center;
}

.flow-widget__clients-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #94a3b8;
  margin-bottom: 0.6rem;
}

.flow-widget__clients-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
}

.flow-widget__client-logo {
  height: 56px;
  width: auto;
  object-fit: contain;
}

.flow-widget__client-logo--small {
  height: 42px;
  border-radius: 6px;
}

.flow-widget__card--booking {
  background: rgba(0, 53, 128, 0.24);
}

.flow-widget__card--booking .flow-widget__icon {
  background: #003580;
}

.flow-widget__card--expedia {
  background: rgba(255, 199, 0, 0.13);
}

.flow-widget__card--expedia .flow-widget__icon {
  background: #ffc700;
  color: #1e293b;
}

.flow-widget__card--agoda {
  background: rgba(92, 0, 200, 0.2);
}

.flow-widget__card--agoda .flow-widget__icon {
  background: #5c00c8;
}

.flow-widget__card--hotels {
  background: rgba(214, 0, 28, 0.18);
}

.flow-widget__card--hotels .flow-widget__icon {
  background: #d6001c;
}

.flow-widget__card--trip {
  background: rgba(0, 102, 204, 0.2);
}

.flow-widget__card--trip .flow-widget__icon {
  background: #0066cc;
}

.flow-widget__card--airbnb {
  background: rgba(255, 56, 92, 0.19);
}

.flow-widget__card--airbnb .flow-widget__icon {
  background: #ff385c;
}

.flow-widget__card--vrbo {
  background: rgba(0, 112, 186, 0.21);
}

.flow-widget__card--vrbo .flow-widget__icon {
  background: #0070ba;
}

.flow-widget__card--google {
  background: rgba(66, 133, 244, 0.2);
}

.flow-widget__card--google .flow-widget__icon {
  background: #4285f4;
}

.flow-widget__card--googlereviews {
  background: rgba(234, 67, 53, 0.18);
}

.flow-widget__card--googlereviews .flow-widget__icon {
  background: #ea4335;
}

.flow-widget__card--powerbi {
  background: rgba(242, 187, 19, 0.13);
}

.flow-widget__card--powerbi .flow-widget__icon {
  background: transparent;
  color: inherit;
}

.flow-widget__card--sheets {
  background: rgba(52, 168, 83, 0.19);
}

.flow-widget__card--sheets .flow-widget__icon {
  background: #34a853;
}

.flow-widget__card--salesforce {
  background: rgba(0, 161, 224, 0.18);
}

.flow-widget__card--salesforce .flow-widget__icon {
  background: #00a1e0;
}

.flow-widget__card--tableau {
  background: rgba(229, 124, 37, 0.17);
}

.flow-widget__card--tableau .flow-widget__icon {
  background: #e57c25;
}

.flow-widget__card--excel {
  background: rgba(33, 115, 70, 0.2);
}

.flow-widget__card--excel .flow-widget__icon {
  background: #217346;
}

.flow-widget__card--zapier {
  background: rgba(255, 74, 0, 0.18);
}

.flow-widget__card--zapier .flow-widget__icon {
  background: #ff4a00;
}

.flow-widget__card--make {
  background: rgba(108, 51, 255, 0.2);
}

.flow-widget__card--make .flow-widget__icon {
  background: #6c33ff;
}

.flow-widget__card--snowflake {
  background: rgba(41, 181, 246, 0.18);
}

.flow-widget__card--snowflake .flow-widget__icon {
  background: #29b5f6;
}

.flow-widget__card--n8n {
  background: rgba(234, 76, 137, 0.18);
}

.flow-widget__card--n8n .flow-widget__icon {
  background: #ea4c89;
}

@keyframes flow-widget-card-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes flow-widget-slide-up {
  from {
    opacity: 0;
    transform: translateY(100%);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes flow-widget-whoom {
  0% {
    opacity: 0;
    transform: scale(0.95);
  }

  30% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: scale(1.06);
  }
}

@keyframes flow-widget-hub-pulse {
  0%, 100% {
    box-shadow: 0 0 60px rgba(37, 99, 235, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  }

  50% {
    box-shadow: 0 0 80px rgba(37, 99, 235, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  }
}

@keyframes flow-widget-dot-pulse {
  0%, 100% {
    opacity: 0.45;
    transform: scale(1);
  }

  50% {
    opacity: 1;
    transform: scale(1.45);
  }
}

@keyframes flow-widget-fade-up {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.flow-widget__mobile-arrow {
  display: none;
}

@keyframes flow-widget-arrow-bounce {
  0%, 100% { transform: translateY(0); opacity: 0.5; }
  50% { transform: translateY(4px); opacity: 1; }
}

@media (max-width: 1023px) {
  .flow-widget__mobile-arrow {
    display: flex;
    justify-content: center;
    color: #64748b;
    padding: 0.15rem 0;
  }

  .flow-widget__mobile-arrow svg {
    animation: flow-widget-arrow-bounce 1.8s ease-in-out infinite;
  }

  .flow-widget__dot {
    display: none;
  }

  .flow-widget__card:nth-child(n+4) {
    display: none;
  }

  .flow-widget {
    padding: 1.25rem 0.9rem 1.1rem;
  }

  .flow-widget__hero-title {
    font-size: 1.65rem;
  }

  .flow-widget__scene {
    min-height: auto;
    margin-top: 0;
  }

  .flow-widget__canvas {
    display: none;
  }

  .flow-widget__frame {
    min-height: auto;
    padding: 1.1rem 0.6rem 1rem;
  }

  .flow-widget__grid {
    grid-template-columns: 1fr;
    gap: 1.1rem;
  }

  .flow-widget__column {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
    align-items: stretch;
  }

  .flow-widget__column-label {
    grid-column: 1 / -1;
    text-align: center;
    margin-top: 0.5rem;
  }

  .flow-widget__column--hub {
    min-height: auto;
    display: flex;
  }

  .flow-widget__hub {
    margin: 0.4rem auto;
    width: 130px;
    height: 130px;
  }

  .flow-widget__ctas {
    position: static;
    transform: none;
    justify-content: center;
    padding: 0 1rem 0.5rem;
    margin: 2rem 0;
  }

  .flow-widget__cta {
    padding: 0.6rem 1.25rem;
    font-size: 0.85rem;
  }

  .flow-widget__clients {
    position: static;
    transform: none;
    padding: 0 0.4rem 0.8rem;
  }

  .flow-widget__clients-logos {
    gap: 1.2rem;
  }

  .flow-widget__client-logo {
    height: 44px;
  }

  .flow-widget__ambient {
    display: none;
  }

  .flow-widget__hub {
    animation: none;
  }

}

/* ============================================================
   ICP Selector Widget — Shared + Variant Styles
   ============================================================ */

/* Panel enter animation (shared by all variants) */
@keyframes icp-panel-fade-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.icp-panel-enter {
  animation: icp-panel-fade-in 0.3s ease-out;
}

/* --- ICP Section --- */
.icp-section {
  background: #fff;
}

.icp-tab {
  color: #64748b;
}

.icp-tab:hover {
  color: #1e293b;
}

.icp-tab.icp-tab--active {
  color: #0f172a;
  border-bottom-color: #f97316;
}