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: rgb(0, 0, 0);
}
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-mutable]::-moz-selection,
trix-editor [data-trix-cursor-target]::-moz-selection {
  background: none;
}
trix-editor [data-trix-mutable] ::selection, trix-editor [data-trix-mutable]::selection,
trix-editor [data-trix-cursor-target]::selection {
  background: none;
}

trix-editor [data-trix-mutable].attachment__caption-editor:focus::-moz-selection {
  background: highlight;
}
trix-editor [data-trix-mutable].attachment__caption-editor:focus::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: " •";
}
.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;
}
.account-settings-main { width: 100%; padding: 44px var(--dash-gutter) 72px; }
.account-settings { width: min(100%, 940px); margin-inline: auto; }

.account-settings__back {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 9px;
  margin-block-end: 12px;
  color: var(--color-ink-soft) !important;
  font-size: 14px;
}
.account-settings__back:hover { color: var(--color-ink) !important; }

.account-settings__header { margin-block-end: 34px; }
.account-settings__header h1 {
  margin: 0;
  font-family: var(--font-absans);
  font-size: clamp(36px, 4.5vw, 54px);
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 0.98;
  text-wrap: balance;
}
.account-settings__header p { max-width: 62ch; margin: 12px 0 0; color: #65655f; line-height: 1.55; }

.account-settings__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-block-end: 34px;
  border-block-end: 1px solid var(--color-hairline);
}
.account-settings__nav a {
  min-height: 44px;
  padding-block: 12px 13px;
  color: #65655f !important;
  font-size: 14px;
  text-transform: capitalize;
}
.account-settings__nav a[aria-current="page"] { color: var(--color-ink) !important; font-weight: 500; }
.account-settings__nav a:hover { color: var(--color-ink) !important; }

.account-settings__form { display: grid; gap: 30px; }
.account-settings__section { padding: clamp(22px, 3vw, 34px); background: var(--color-paper); }
.account-settings__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.account-settings__field { min-width: 0; }
.account-settings__field--wide { grid-column: 1 / -1; }
.account-settings__field label { display: block; margin-block-end: 8px; color: var(--color-ink); font-size: 14px; font-weight: 500; }
.account-settings__field small { display: block; margin-block-start: 7px; color: #65655f; font-size: 12px; line-height: 1.45; }

.account-settings__field :where(input:not([type="hidden"]), select, textarea),
.account-settings__field .ts-control,
.account-settings__field .ts-wrapper.single.input-active .ts-control {
  width: 100%;
  min-height: 50px;
  border: 1px solid #d2d2ce !important;
  border-radius: 0 !important;
  padding: 12px 14px;
  outline: 0;
  background: #fff !important;
  box-shadow: none !important;
  color: var(--color-ink) !important;
  font-family: var(--font-aspekta);
  font-size: 16px;
}
.account-settings__field input::placeholder { color: #777771; opacity: 1; }
.account-settings__field :where(input:not([type="hidden"]), select, textarea):focus,
.account-settings__field .ts-wrapper.focus .ts-control {
  border-color: var(--color-ink) !important;
  box-shadow: 0 0 0 2px var(--color-ink) !important;
}
.account-settings__field .ts-control input {
  min-height: 0;
  border: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.account-settings__field .ts-dropdown { border: 1px solid #d2d2ce; border-radius: 0; background: #fff; color: var(--color-ink); }
.account-settings__field .ts-dropdown .active { background: #e9e9e6; color: var(--color-ink); }

.account-settings__password-note { margin: 0; color: #575757; line-height: 1.55; }
.account-settings__strength { margin-block-start: 14px; }
.account-settings__strength-track { height: 5px; overflow: hidden; background: #deded9; }
.account-settings__strength-track > div { height: 100%; }
.account-settings__strength p, .account-settings__strength ul { color: #575757; }

.account-settings #error_explanation > div {
  margin-block-end: 0;
  border-radius: 0;
  background: #f7e8e8;
  color: #6f2020;
}

.account-settings__actions { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.account-settings__actions--end { justify-content: flex-end; }
.account-settings__submit {
  min-height: 48px;
  border: 0;
  border-radius: 999px;
  padding: 13px 24px;
  background: var(--color-ink);
  color: #fff !important;
  font-family: var(--font-absans);
  font-size: 16px;
  font-weight: 500;
  text-transform: capitalize;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  transition: background-color 160ms ease-out;
}
.account-settings__submit:hover { background: #383836; }
.account-settings__submit:focus-visible { outline: 3px solid var(--color-ink); outline-offset: 4px; }

.account-settings__header--action {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 28px;
}

.account-settings__section-title,
.account-settings__list-title,
.account-settings__empty h2,
.account-settings__danger h2 {
  margin: 0;
  color: var(--color-ink);
  font-family: var(--font-aspekta);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
}

.account-settings__section-title { margin-block-end: 24px; }
.account-settings__section-copy { max-width: 66ch; margin: 0; color: #575757; line-height: 1.55; }

.account-settings__list { background: var(--color-paper); }
.account-settings__list-title { padding: 22px 26px 6px; }

.account-settings__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  min-width: 0;
  padding: 22px 26px;
}

.account-settings__row + .account-settings__row { border-block-start: 1px solid var(--color-hairline); }
.account-settings__row-copy { min-width: 0; }
.account-settings__row-copy h2,
.account-settings__row-copy h3 { margin: 0; color: var(--color-ink); font-size: 16px; font-weight: 600; line-height: 1.35; }
.account-settings__row-copy p { margin: 5px 0 0; color: #65655f; font-size: 13px; line-height: 1.45; }
.account-settings__email { overflow-wrap: anywhere; }

.account-settings__row-actions,
.account-settings__member-meta { display: flex; align-items: center; justify-content: flex-end; gap: 18px; }
.account-settings__row-actions a {
  min-height: 44px;
  padding-block: 12px;
  color: #4f4f4b !important;
  font-size: 14px;
  font-weight: 500;
  text-transform: capitalize;
  white-space: nowrap;
}
.account-settings__row-actions a:hover { color: var(--color-ink) !important; }
.account-settings__row-actions .account-settings__danger-link { color: #7b2c2c !important; }
.account-settings__role { color: #575757; font-size: 13px; font-weight: 500; }

.account-settings__empty { padding: clamp(26px, 4vw, 42px); background: var(--color-paper); }
.account-settings__empty p { max-width: 56ch; margin: 9px 0 22px; color: #575757; line-height: 1.55; }

.account-settings__danger {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  padding: 24px 0 0;
  border-block-start: 1px solid #d9bcbc;
}
.account-settings__danger p { margin: 7px 0 0; color: #65655f; font-size: 14px; line-height: 1.5; }
.account-settings__danger-action {
  min-height: 44px;
  padding: 12px 0;
  color: #7b2c2c !important;
  font-size: 14px;
  font-weight: 600;
  text-transform: capitalize;
}

.account-settings__pagination { margin-block-start: 24px; }

@media (max-width: 680px) {
  .account-settings-main { padding-block: 30px 48px; }
  .account-settings__header { margin-block-end: 26px; }
  .account-settings__header--action { align-items: stretch; flex-direction: column; gap: 20px; }
  .account-settings__grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .account-settings__field--wide { grid-column: auto; }
  .account-settings__actions { align-items: stretch; flex-direction: column-reverse; gap: 10px; }
  .account-settings__submit { width: 100%; }
  .account-settings__row { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 20px; }
  .account-settings__row-actions,
  .account-settings__member-meta { justify-content: flex-start; flex-wrap: wrap; }
  .account-settings__danger { grid-template-columns: minmax(0, 1fr); gap: 8px; }
}
.card {
  background-color: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  @apply p-6 md:p-8 rounded-xl;
}
select[multiple][data-controller="select"] {
  @apply invisible;
}

.dropdown-input {
  @apply !border-white/10 !bg-white/[0.04] !px-3 !py-2.5 text-sm placeholder:!text-white/30;
}

.plugin-dropdown_input.focus.dropdown-active .ts-control {
  @apply !border-none;
}

.ts-dropdown-content {
  @apply py-1.5;
  max-height: 240px;
}

.ts-dropdown-content {
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.2) rgba(255,255,255,0.03);
}

.ts-dropdown-content::-webkit-scrollbar {
  width: 6px;
}

.ts-dropdown-content::-webkit-scrollbar-track {
  background: rgba(255,255,255,0.03);
}

.ts-dropdown-content::-webkit-scrollbar-thumb {
  background-color: rgba(255,255,255,0.2);
  border-radius: 3px;
}

.ts-control {
  @apply flex min-h-[50px] w-full px-3 py-3 cursor-default rounded-md border-0 text-base leading-6 text-white shadow-sm ring-1 placeholder:text-white/30 ring-white/10 outline-hidden ring-inset focus:ring-life;
  background-color: rgba(255,255,255,0.04);

  &[disabled] {
    @apply cursor-not-allowed opacity-50;
  }

  &.error {
    @apply border-red-400 outline-red-300 focus:outline-red-500;
  }
}

.plugin-dropdown_input .dropdown-input {
  @apply outline-hidden;
}

.ts-dropdown .active.create {
  @apply cursor-pointer bg-life/20 text-white;
}

.loading-more-results {
  @apply !cursor-default;
}

.disabled .ts-control {
  cursor: not-allowed !important;
}

@media (min-width: 640px) {
  .ts-control {
    font-size: 0.875rem; /* text-sm equivalent (14px) for larger screens */
  }
}

.full .ts-control {
  background-color: rgba(255,255,255,0.04);
}

.ts-wrapper.single .ts-control,
.ts-wrapper.single .ts-control input,
.ts-control,
.ts-wrapper.single.input-active .ts-control {
  @apply text-white;
}

.ts-dropdown [data-selectable] .highlight {
  @apply bg-orange-500/20;
}

.ts-control,
.ts-wrapper.single.input-active .ts-control {
  background-color: rgba(255,255,255,0.04);
}

.input-active {
  @apply rounded-md bg-transparent;
  box-shadow: 0 0 0 3px rgba(0, 255, 65, 0.08);
  border-color: rgba(0, 255, 65, 0.3);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.ts-control input {
  @apply !m-0 bg-transparent text-base placeholder:text-white/30 read-only:!cursor-pointer;
}

@media (min-width: 640px) {
  .ts-control input {
    font-size: 0.875rem; /* text-sm equivalent (14px) for larger screens */
  }
}

.ts-wrapper:not(.form-control):not(.form-select).single .ts-control {
  @apply !pr-8;
}

.ts-wrapper.plugin-remove_button .item {
  @apply rounded-md;
}

.ts-wrapper.plugin-remove_button .item .remove {
  @apply rounded-r-lg border-none py-1 text-lg leading-none;
}

.ts-wrapper.plugin-remove_button .item .remove::before {
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Ctitle%3Exmark%3C/title%3E%3Cg fill='%239CA3AF'%3E%3Cpath d='m2.25,10.5c-.192,0-.384-.073-.53-.22-.293-.293-.293-.768,0-1.061L9.22,1.72c.293-.293.768-.293,1.061,0s.293.768,0,1.061l-7.5,7.5c-.146.146-.338.22-.53.22Z' stroke-width='0'%3E%3C/path%3E%3Cpath d='m9.75,10.5c-.192,0-.384-.073-.53-.22L1.72,2.78c-.293-.293-.293-.768,0-1.061s.768-.293,1.061,0l7.5,7.5c.293.293.293.768,0,1.061-.146.146-.338.22-.53.22Z' stroke-width='0'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
  @apply block size-4 bg-center bg-no-repeat;
}


.ts-wrapper.plugin-remove_button .item .remove {
  font-size: 0 !important;
  @apply my-0.5 mr-1 !ml-0.5 flex size-[18px] items-center justify-center rounded !border-0 !p-1 !leading-none text-white/40 hover:text-white/70;
}

.ts-dropdown {
  background-color: rgba(255,255,255,0.06);
  backdrop-filter: blur(20px);
  @apply text-white z-40 m-0 overflow-hidden rounded-md border border-t border-solid border-white/10 shadow-lg;
}

.ts-dropdown .create {
  @apply mx-1.5 cursor-default rounded-md px-2.5 py-2 text-sm;
}

.ts-dropdown [data-selectable].option,
.ts-dropdown .no-results {
  @apply mx-1.5 cursor-default rounded-md px-2.5 py-2 text-sm;
}

.ts-dropdown .option,
.ts-dropdown [data-disabled],
.ts-dropdown [data-disabled] [data-selectable].option {
  @apply mx-1.5 cursor-not-allowed rounded-md px-2.5 py-2 text-sm;
}

.ts-dropdown [data-selectable].option,
.ts-dropdown .ts-dropdown .create {
  @apply cursor-pointer;
}

.ts-dropdown .active {
  @apply bg-life/20 text-white;
}

.ts-dropdown .spinner {
  @apply h-auto w-auto;
}

.ts-dropdown .spinner:after {
  @apply mt-1 mb-0 inline-block size-4 border-2 p-0;
}

.ts-wrapper:not(.form-control):not(.form-select).single .ts-control {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23A1A1AA' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  print-color-adjust: exact;
}

/* Add dropdown arrow to multiselect elements */
.ts-wrapper:not(.form-control):not(.form-select).multi .ts-control {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23A1A1AA' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 6l4-4 4 4M6 14l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.6rem center;
  background-repeat: no-repeat;
  background-size: 1.25em 1.25em;
  print-color-adjust: exact;
  padding-right: 2rem !important;
}

.ts-wrapper.multi .ts-control > div {
  @apply mr-1 inline-flex items-center justify-center rounded-md px-2 text-xs leading-none font-medium text-white/85;
  background-color: rgba(255,255,255,0.08);
}

/* Ensure items don't overlap with the dropdown arrow */
.ts-wrapper.multi.has-items .ts-control {
  @apply !pt-[7px] !pr-8 !pb-[4px];
}

.ts-wrapper.plugin-remove_button:not(.rtl) .item {
  @apply cursor-grab;
}

.ts-wrapper.plugin-remove_button:not(.rtl) .item .remove {
  @apply !-ml-0.5 cursor-pointer border-none;
}

.ts-wrapper.plugin-remove_button .item .remove {
  @apply my-0.5 mr-1 !ml-0.5 flex size-[18px] items-center justify-center rounded border-0 text-lg leading-none text-white/40 hover:text-white/70;
}

.ts-dropdown .optgroup-header {
  @apply border-t border-white/10 font-semibold text-white/50;
  background-color: rgba(255,255,255,0.04);
}

.ts-dropdown.plugin-optgroup_columns .optgroup {
  height: fit-content;
  border-right: 1px solid rgba(255,255,255,0.1);
  @apply !mt-0;
}

.optgroup {
  @apply mt-1.5 first:mt-0;
}

.ts-wrapper.multi.has-items .ts-control > input {
  @apply !mb-[3px];
}

.tomselect-checkbox {
  @apply !mr-0;
}

.input-hidden.focus {
  @apply !rounded-md border border-white/10;
}

/* Replace the previous attempt with this updated selector */
select[data-select-disable-typing-value="true"] + .ts-wrapper .ts-control,
select[data-select-disable-typing-value="true"] + .ts-wrapper.single .ts-control,
select[data-select-disable-typing-value="true"] + .ts-wrapper.single .ts-control input,
select[data-select-disable-typing-value="true"] + .ts-wrapper.single.input-active .ts-control {
  @apply cursor-default;
}

.ts-dropdown-content.is-loading-more .option {
  pointer-events: none !important;
}

/* Count display for multi-select */
.ts-count-display {
  @apply mr-auto !my-0.5 !bg-transparent !px-0 !text-sm !font-normal;
  display: none;
}

/* Hide count display when not active (explicit rule) */
.ts-control:not(.count-active) .ts-count-display {
  display: none !important;
}

/* Hide items and input when count is active */
.ts-control.count-active .item {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Keep input technically visible for keyboard navigation but make it invisible */
.ts-control.count-active input {
  position: absolute !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Ensure proper spacing when count is displayed */
.ts-wrapper.multi.has-items .ts-control:has(.ts-count-display) {
  @apply !py-[5px];
}
.commerce-main {
  width: 100%;
  padding: 44px var(--dash-gutter) 72px;
}

.commerce-workspace { width: min(100%, 940px); margin-inline: auto; }
.commerce-workspace--wide { width: min(100%, 1180px); }
.commerce-page { color: var(--color-ink); font-family: var(--font-aspekta); }
.commerce-page .dash-nav { position: relative; }

.commerce-header { margin-block-end: 34px; }
.commerce-header h1 {
  max-width: 18ch;
  margin: 0;
  font-family: var(--font-absans);
  font-size: clamp(38px, 4.8vw, 58px);
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 0.98;
  text-wrap: balance;
}
.commerce-header p { max-width: 62ch; margin: 12px 0 0; color: #65655f; line-height: 1.55; }

.commerce-checkout__grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.75fr); gap: 32px; align-items: start; }
.commerce-panel { min-width: 0; padding: clamp(22px, 3vw, 34px); background: var(--color-paper); }
.commerce-panel--flush { padding: 0; }
.commerce-panel__heading { margin: 0 0 22px; font-size: 16px; font-weight: 600; }
.commerce-panel__copy { margin: 0; color: #575757; line-height: 1.55; }

.commerce-progress { margin: 0; padding: 0; background: #fff; list-style: none; }
.commerce-progress ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.commerce-progress__item { display: flex; min-width: 0; align-items: center; gap: 10px; padding: 18px 20px; border-block-end: 1px solid var(--color-hairline); color: #777771; font-size: 13px; }
.commerce-progress__item + .commerce-progress__item { border-inline-start: 1px solid var(--color-hairline); }
.commerce-progress__mark { display: grid; width: 22px; height: 22px; flex: 0 0 auto; place-items: center; border: 1px solid #bcbcb6; font-size: 11px; font-variant-numeric: tabular-nums; }
.commerce-progress__item[aria-current="step"] { color: var(--color-ink); font-weight: 500; }
.commerce-progress__item[aria-current="step"] .commerce-progress__mark { border-color: var(--color-ink); background: var(--color-ink); color: #fff; }
.commerce-checkout__form { padding: clamp(24px, 3.5vw, 38px); }

.commerce-field { margin-block-end: 22px; }
.commerce-field label { display: block; margin-block-end: 8px; font-size: 14px; font-weight: 500; }
.commerce-field :where(input:not([type="hidden"]), select, textarea) {
  width: 100%;
  min-height: 50px;
  border: 1px solid #d2d2ce;
  border-radius: 0;
  padding: 12px 14px;
  outline: 0;
  background: #fff;
  box-shadow: none;
  color: var(--color-ink);
  font-family: var(--font-aspekta);
  font-size: 16px;
}
.commerce-field :where(input:not([type="hidden"]), select, textarea):focus { border-color: var(--color-ink); box-shadow: 0 0 0 2px var(--color-ink); }

.commerce-actions { display: flex; align-items: center; justify-content: space-between; gap: 22px; margin-block-start: 28px; }
.commerce-primary-action {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  padding: 13px 24px;
  background: var(--color-ink);
  color: #fff !important;
  font-family: var(--font-absans);
  font-size: 16px;
  font-weight: 500;
  text-align: center;
  text-transform: capitalize;
  cursor: pointer;
  transition: background-color 160ms ease-out;
}
.commerce-primary-action:hover { background: #383836; }
.commerce-primary-action:focus-visible { outline: 3px solid var(--color-ink); outline-offset: 4px; }
.commerce-secondary-action { min-height: 44px; padding-block: 12px; color: #575757 !important; font-size: 14px; font-weight: 500; text-transform: capitalize; }
.commerce-secondary-action:hover { color: var(--color-ink) !important; }
.commerce-danger-action { color: #7b2c2c !important; }

.commerce-payment-element { min-height: 148px; padding: 18px; background: #fff; }
.commerce-loading { display: flex; min-height: 112px; align-items: center; justify-content: center; color: #65655f; }
.commerce-loading svg { width: 22px; height: 22px; animation: commerce-spin 700ms linear infinite; }
@keyframes commerce-spin { to { transform: rotate(360deg); } }

.commerce-alert { padding: 18px 20px; background: #f7e8e8; color: #6f2020; line-height: 1.5; }
.commerce-alert h2, .commerce-alert h3 { margin: 0 0 6px; font-family: var(--font-aspekta); font-size: 16px; font-weight: 600; }
.commerce-alert p { margin: 0; }

.commerce-coupon__toggle { display: flex; justify-content: flex-start; margin-block: 22px; }
.commerce-coupon__toggle button { min-height: 44px; border: 0; padding: 10px 0; background: transparent; color: #575757; font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; }
.commerce-coupon__toggle button:hover { color: var(--color-ink); }
.commerce-coupon__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: start; }
.commerce-coupon__message { min-height: 50px; padding: 14px; background: #f1eee3; color: #514927; font-size: 13px; font-weight: 500; }

.commerce-summary { background: var(--color-paper); }
.commerce-summary h2 { margin: 0; padding: 22px 26px 14px; font-size: 16px; font-weight: 600; }
.commerce-summary__rows { margin: 0; padding: 0 26px 8px; }
.commerce-summary__row { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 18px; padding-block: 17px; border-block-start: 1px solid var(--color-hairline); }
.commerce-summary dt { color: #65655f; font-size: 13px; }
.commerce-summary dd { margin: 0; text-align: right; overflow-wrap: anywhere; }
.commerce-money { font-family: var(--font-absans); font-size: 25px; font-variant-numeric: tabular-nums; line-height: 1; }
.commerce-money :where(.currency-symbol, .price-amount, .price-append-text) { display: inline; }
.commerce-summary__coupon { margin-block-start: 10px; padding: 14px; background: #eef3ea; color: #294127; text-align: left; }
.commerce-legal-note { margin: 18px 4px 0; color: #65655f; font-size: 12px; line-height: 1.55; }

.billing-nav { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: -16px 0 34px; border-block-end: 1px solid var(--color-hairline); }
.billing-nav a { min-height: 44px; padding-block: 12px 13px; color: #65655f !important; font-size: 14px; text-transform: capitalize; }
.billing-nav a[aria-current="page"] { color: var(--color-ink) !important; font-weight: 500; }
.billing-nav a:hover { color: var(--color-ink) !important; }

.commerce-ledger { background: var(--color-paper); }
.commerce-ledger__heading { margin: 0; padding: 22px 26px 6px; font-size: 16px; font-weight: 600; }
.commerce-ledger__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; padding: 22px 26px; }
.commerce-ledger__row + .commerce-ledger__row { border-block-start: 1px solid var(--color-hairline); }
.commerce-ledger__row h2, .commerce-ledger__row h3 { margin: 0; font-size: 16px; font-weight: 600; }
.commerce-ledger__row p { margin: 5px 0 0; color: #65655f; font-size: 13px; }
.commerce-ledger__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 18px; }
.commerce-status { color: #4f4f4b; font-size: 13px; font-weight: 500; text-transform: capitalize; }
.commerce-status--danger { color: #7b2c2c; }

.commerce-data { margin: 0; background: var(--color-paper); }
.commerce-data__row { display: grid; grid-template-columns: minmax(160px, 0.6fr) minmax(0, 1.4fr); gap: 28px; padding: 20px 26px; border-block-start: 1px solid var(--color-hairline); }
.commerce-data__row:last-child { border-block-end: 1px solid var(--color-hairline); }
.commerce-data dt { color: #65655f; font-size: 13px; }
.commerce-data dd { min-width: 0; margin: 0; overflow-wrap: anywhere; }
.commerce-data dd, .commerce-data time { font-variant-numeric: tabular-nums; }

.commerce-empty { padding: clamp(26px, 4vw, 42px); background: var(--color-paper); }
.commerce-empty h2 { margin: 0; font-size: 16px; font-weight: 600; }
.commerce-empty p { margin: 9px 0 0; color: #575757; line-height: 1.55; }

.commerce-plans { width: min(100%, 1180px); margin-inline: auto; }
.commerce-plans__header { display: flex; align-items: end; justify-content: space-between; gap: 32px; margin-block-end: 38px; }
.commerce-plans__header h1 { margin: 0; font-family: var(--font-absans); font-size: clamp(40px, 5vw, 64px); font-weight: 400; letter-spacing: -0.035em; line-height: 0.98; }
.commerce-plan-toggle { display: inline-flex; align-items: center; padding: 4px; background: var(--color-paper); }
.commerce-plan-toggle button { min-height: 44px; border: 0; padding: 10px 16px; background: transparent; color: #65655f; font: inherit; cursor: pointer; }
.commerce-plan-toggle .is-active { background: var(--color-ink); color: #fff; }
.commerce-plan-list { margin: 0; padding: 0; border-block-start: 1px solid var(--color-hairline); list-style: none; }
.commerce-plan { display: grid; grid-template-columns: minmax(180px, 0.65fr) minmax(0, 0.8fr) minmax(260px, 1.25fr) minmax(180px, 0.7fr); gap: 28px; align-items: start; padding: 30px 0; border-block-end: 1px solid var(--color-hairline); }
.commerce-plan h2, .commerce-plan h3 { margin: 0; font-family: var(--font-absans); font-size: 25px; font-weight: 400; }
.commerce-plan__price { min-width: 0; font-family: var(--font-absans); font-size: 34px; font-variant-numeric: tabular-nums; line-height: 1; }
.commerce-plan__price :where(.currency-symbol, .price-amount, .price-append-text) { display: inline; }
.commerce-plan__price .price-append-text { color: #65655f; font-family: var(--font-aspekta); font-size: 13px; }
.commerce-plan__benefits { margin: 0; padding: 0; list-style: none; }
.commerce-plan__benefits li { padding-block: 5px; color: #4f4f4b; font-size: 14px; }
.commerce-plan__action { align-self: center; }
.commerce-plan__current { min-height: 48px; padding: 13px 18px; background: var(--color-paper); color: #65655f; text-align: center; text-transform: capitalize; }
.commerce-plan__support { margin: 8px 0 0; color: #65655f; font-size: 12px; text-align: center; }
.commerce-intent { margin-block-end: 28px; padding: 18px 20px; background: var(--color-paper); color: #4f4f4b; }
.commerce-plans__empty { padding: 48px; background: var(--color-paper); text-align: center; }

.commerce-dunning { width: min(100%, 620px); margin-inline: auto; }
.commerce-dunning__payment-method { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; padding: 18px; background: #fff; }
.commerce-dunning__payment-method span:last-child { color: #65655f; font-variant-numeric: tabular-nums; }
.commerce-success { text-align: left; }

@media (max-width: 900px) {
  .commerce-checkout__grid { grid-template-columns: minmax(0, 1fr); }
  .commerce-plan { grid-template-columns: minmax(150px, 0.7fr) minmax(0, 1fr); }
  .commerce-plan__benefits { grid-column: 1 / -1; }
  .commerce-plan__action { grid-column: 2; }
}

@media (max-width: 680px) {
  .commerce-main { padding-block: 30px 48px; }
  .commerce-header { margin-block-end: 26px; }
  .commerce-progress ol { grid-template-columns: minmax(0, 1fr); }
  .commerce-progress__item { padding: 12px 18px; }
  .commerce-progress__item + .commerce-progress__item { border-inline-start: 0; }
  .commerce-progress__item:not([aria-current="step"]) { display: none; }
  .commerce-actions { align-items: stretch; flex-direction: column; }
  .commerce-primary-action { width: 100%; }
  .commerce-secondary-action { text-align: center; }
  .commerce-coupon__row { grid-template-columns: minmax(0, 1fr); }
  .commerce-summary__row, .commerce-data__row { grid-template-columns: minmax(0, 1fr); gap: 7px; }
  .commerce-summary dd { text-align: left; }
  .commerce-ledger__row { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 20px; }
  .commerce-ledger__actions { justify-content: flex-start; }
  .commerce-plans__header { align-items: stretch; flex-direction: column; }
  .commerce-plan-toggle { align-self: start; }
  .commerce-plan { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .commerce-plan__benefits, .commerce-plan__action { grid-column: auto; }
  .commerce-dunning__payment-method { grid-template-columns: minmax(0, 1fr); gap: 5px; }
}

@media (prefers-reduced-motion: reduce) {
  .commerce-loading svg { animation: none; }
}
/* Crypt — Contained Canvas.
   Covers the authenticated vault (crypts, categories, checklist, trusted contacts)
   and the public share surface. Tokens come from tailwind.config.css. */

/* ---------- shared page frame ---------- */

.crypt-main { width: 100%; padding: 44px var(--dash-gutter) 72px; }
.crypt { width: min(100%, 940px); margin-inline: auto; }
.crypt--wide { width: min(100%, 1120px); }
.crypt--narrow { width: min(100%, 720px); }

.crypt__header { margin-block-end: 34px; }
.crypt__header h1 {
  margin: 0;
  font-family: var(--font-absans);
  font-size: clamp(36px, 4.5vw, 54px);
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 0.98;
  text-wrap: balance;
}
.crypt__lede { max-width: 62ch; margin: 12px 0 0; color: #65655f; line-height: 1.55; }

.crypt__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin-block-end: 8px;
  color: #65655f !important;
  font-size: 14px;
}
.crypt__back:hover { color: var(--color-ink) !important; }

/* ---------- readiness score ---------- */

.crypt-score { display: grid; gap: 10px; }
.crypt-score__value {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--font-absans);
  font-size: clamp(40px, 5vw, 58px);
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.crypt-score__unit { font-family: var(--font-aspekta); font-size: 14px; font-weight: 400; color: #65655f; letter-spacing: 0; }
.crypt-score__track { height: 6px; overflow: hidden; background: #deded9; }
.crypt-score__fill { height: 100%; background: var(--color-ink); }
.crypt-score__label { margin: 0; color: #65655f; font-size: 14px; line-height: 1.5; }

.crypt-score--compact .crypt-score__value { font-size: 30px; }

/* ---------- callouts ---------- */

.crypt-hero { padding: clamp(22px, 3vw, 34px); margin-block-end: 30px; background: var(--color-paper); }
.crypt-hero h2 {
  margin: 0;
  font-family: var(--font-absans);
  font-size: clamp(24px, 2.8vw, 32px);
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1.08;
  text-wrap: balance;
}
.crypt-hero p { max-width: 60ch; margin: 12px 0 0; color: #65655f; line-height: 1.55; }
.crypt-hero__action { margin-block-start: 22px; }

.crypt-notice {
  padding: 18px 20px;
  margin-block-end: 26px;
  background: var(--color-paper);
}
.crypt-notice p { margin: 0; color: #4f4f4b; font-size: 14px; line-height: 1.55; }
.crypt-notice strong { color: var(--color-ink); font-weight: 500; }
.crypt-notice--alarm { background: #f7e8e8; }
.crypt-notice--alarm p { color: #6f2020; }
.crypt-notice a { color: inherit !important; text-decoration: underline; }

/* ---------- actions ---------- */

.crypt-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  padding: 0 26px;
  border: 1px solid var(--color-ink);
  background: var(--color-ink);
  color: #fff !important;
  font-family: var(--font-aspekta);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
}
.crypt-action:hover { background: #383836; border-color: #383836; }

.crypt-action--quiet { background: transparent; color: var(--color-ink) !important; }
.crypt-action--quiet:hover { background: var(--color-paper); border-color: var(--color-ink); }

.crypt-action--plain {
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #65655f !important;
  font-weight: 400;
  text-decoration: underline;
}
.crypt-action--plain:hover { color: var(--color-ink) !important; background: transparent; }

.crypt-action--danger { color: #7b2c2c !important; }
.crypt-action--danger:hover { color: #6f2020 !important; }

.crypt-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-block-start: 30px;
}
.crypt-actions__group { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }

/* ---------- category grid ---------- */

.crypt-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--color-hairline);
  border: 1px solid var(--color-hairline);
}

.crypt-card {
  display: grid;
  gap: 14px;
  min-width: 0;
  padding: 22px 24px 24px;
  background: #fff;
  color: var(--color-ink) !important;
}
.crypt-card:hover { background: var(--color-paper); }
.crypt-card--muted { color: #8b8b8b !important; }
.crypt-card--muted:hover { background: #fff; }

.crypt-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.crypt-card__name { display: flex; align-items: center; gap: 12px; min-width: 0; }
.crypt-card__icon { flex: none; color: #65655f; }
.crypt-card__name h3 {
  margin: 0;
  font-family: var(--font-absans);
  font-size: 19px;
  font-weight: 400;
  letter-spacing: -0.02em;
}
.crypt-card__done { flex: none; color: var(--color-ink); font-size: 13px; }

.crypt-card__meta { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 13px; color: #65655f; }
.crypt-card__cue { color: var(--color-ink); font-weight: 500; }

.crypt-card__track { height: 4px; overflow: hidden; background: #deded9; }
.crypt-card__fill { height: 100%; background: var(--color-ink); }

/* ---------- panel sections ---------- */

.crypt-section { padding: 22px 24px; margin-block-start: 1px; border: 1px solid var(--color-hairline); background: #fff; }
.crypt-section__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.crypt-section h3 {
  margin: 0;
  font-family: var(--font-absans);
  font-size: 19px;
  font-weight: 400;
  letter-spacing: -0.02em;
}
.crypt-section p { max-width: 60ch; margin: 7px 0 0; color: #65655f; font-size: 14px; line-height: 1.55; }

.crypt-stack { margin-block-start: 42px; }

/* ---------- category detail ---------- */

.crypt-cat { display: grid; grid-template-columns: minmax(0, 1fr) 232px; gap: 44px; align-items: start; }
.crypt-cat__aside { position: sticky; top: 28px; padding: 20px 22px; background: var(--color-paper); }

.crypt-cat__header { display: flex; align-items: flex-start; gap: 14px; margin-block-end: 26px; }
.crypt-cat__header .crypt-cat__icon { flex: none; margin-block-start: 6px; color: #65655f; }
.crypt-cat__header h1 {
  margin: 0;
  font-family: var(--font-absans);
  font-size: clamp(30px, 3.6vw, 42px);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.02;
}
.crypt-cat__header p { max-width: 58ch; margin: 10px 0 0; color: #65655f; line-height: 1.55; }

.crypt-progress { display: flex; align-items: center; gap: 16px; margin-block-end: 26px; }
.crypt-progress__track { flex: 1; height: 5px; overflow: hidden; background: #deded9; }
.crypt-progress__fill { height: 100%; background: var(--color-ink); }
.crypt-progress__count { flex: none; color: #65655f; font-size: 14px; white-space: nowrap; }

.crypt-suggestion { display: flex; gap: 12px; padding: 16px 18px; margin-block-end: 26px; background: var(--color-paper); }
.crypt-suggestion svg { flex: none; margin-block-start: 3px; color: #65655f; }
.crypt-suggestion p { margin: 0; color: #4f4f4b; font-size: 14px; line-height: 1.55; }

/* ---------- item panels ---------- */

.crypt-items { border-block-start: 1px solid var(--color-hairline); }
.crypt-items:empty { border-block-start: 0; }

.crypt-item { border-block-end: 1px solid var(--color-hairline); }
.crypt-item__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  min-height: 60px;
  padding: 14px 0;
  border: 0;
  background: transparent;
  color: var(--color-ink);
  font-family: var(--font-aspekta);
  font-size: 16px;
  text-align: start;
  cursor: pointer;
}
.crypt-item__name { display: flex; align-items: center; gap: 12px; min-width: 0; }
.crypt-item__name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }

/* The Turbo Stream target wraps the indicator, so the wrapper is the flex item;
   the indicator itself must be inline-block or width/height are ignored. */
.crypt-item__status-slot { display: flex; flex: none; }
.crypt-item__status { display: inline-block; width: 18px; height: 18px; border: 1px solid #b9b9b4; border-radius: 50%; }
.crypt-item__status--done { border-color: var(--color-ink); background: var(--color-ink); }
.crypt-item__status--done svg { display: block; width: 100%; height: 100%; padding: 3px; color: #fff; }

.crypt-item__chevron { flex: none; color: #8b8b8b; }
.crypt-item.panel-closed .crypt-item__chevron--up,
.crypt-item.panel-open .crypt-item__chevron--down { display: none; }

.crypt-item__body { padding: 4px 0 26px 30px; }
.crypt-item.panel-closed .crypt-item__body { display: none; }

.crypt-item__fields { display: grid; gap: 20px; }
.crypt-item__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-block-start: 22px; }
.crypt-item__saved { min-height: 20px; color: #8b8b8b; font-size: 12px; }
.crypt-item__readonly { margin: 0; color: #4f4f4b; font-size: 15px; line-height: 1.55; }

/* ---------- fields ---------- */

.crypt-field { min-width: 0; }
.crypt-field label,
.crypt-field > .crypt-field__label {
  display: block;
  margin-block-end: 8px;
  color: var(--color-ink);
  font-size: 14px;
  font-weight: 500;
}
.crypt-field small { display: block; margin-block-start: 7px; color: #65655f; font-size: 12px; line-height: 1.45; }

.crypt-field :where(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), select, textarea) {
  width: 100%;
  min-height: 50px;
  border: 1px solid #d2d2ce;
  border-radius: 0;
  padding: 12px 14px;
  outline: 0;
  background: #fff;
  box-shadow: none;
  color: var(--color-ink);
  font-family: var(--font-aspekta);
  font-size: 16px;
}
.crypt-field textarea { min-height: 96px; resize: vertical; line-height: 1.55; }
.crypt-field input::placeholder, .crypt-field textarea::placeholder { color: #777771; opacity: 1; }
.crypt-field :where(input:not([type="hidden"]), select, textarea):focus {
  border-color: var(--color-ink);
  box-shadow: 0 0 0 2px var(--color-ink);
}

.crypt-field--pin input { max-width: 15ch; font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; letter-spacing: 0.45em; }

.crypt-errors { padding: 16px 18px; margin-block-end: 26px; background: #f7e8e8; }
.crypt-errors p, .crypt-errors li { margin: 0; color: #6f2020; font-size: 14px; line-height: 1.55; }
.crypt-errors ul { margin: 0; padding-inline-start: 18px; }

/* ---------- add-item picker ---------- */

.crypt-picker { padding: clamp(20px, 2.6vw, 28px); background: var(--color-paper); }
.crypt-picker > p { margin: 0 0 18px; color: #65655f; font-size: 14px; }
.crypt-picker__types:not(.hidden) { display: flex; flex-wrap: wrap; gap: 8px; }
.crypt-picker__types { margin-block-end: 20px; }
.crypt-picker__type {
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid #d2d2ce;
  background: #fff;
  color: var(--color-ink);
  font-family: var(--font-aspekta);
  font-size: 14px;
  cursor: pointer;
}
.crypt-picker__type:hover { border-color: var(--color-ink); }
.crypt-picker__name:not(.hidden) { display: grid; gap: 18px; }
.crypt-picker__name .crypt-actions { margin-block-start: 0; justify-content: flex-start; }

/* ---------- trusted contacts ---------- */

.crypt-list { border: 1px solid var(--color-hairline); }
.crypt-list__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px 24px;
  align-items: center;
  padding: 18px 22px;
  border-block-end: 1px solid var(--color-hairline);
  background: #fff;
}
.crypt-list__row:last-child { border-block-end: 0; }
.crypt-list__name { margin: 0; font-size: 16px; font-weight: 500; }
.crypt-list__meta { margin: 5px 0 0; color: #65655f; font-size: 14px; }
.crypt-list__tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-block-start: 8px;
  padding: 4px 10px;
  border: 1px solid var(--color-hairline);
  color: #4f4f4b;
  font-size: 12px;
}
.crypt-list__actions { display: flex; align-items: center; gap: 20px; }

.crypt-empty { padding: clamp(30px, 4vw, 52px); border: 1px solid var(--color-hairline); text-align: center; }
.crypt-empty h2 {
  margin: 0;
  font-family: var(--font-absans);
  font-size: clamp(24px, 2.8vw, 32px);
  font-weight: 400;
  letter-spacing: -0.025em;
}
.crypt-empty p { max-width: 52ch; margin: 12px auto 0; color: #65655f; line-height: 1.55; }
.crypt-empty .crypt-action { margin-block-start: 24px; }

/* ---------- share link handoff ---------- */

.crypt-linkout { padding: clamp(22px, 3vw, 32px); margin-block-end: 30px; background: var(--color-paper); }
.crypt-linkout h2 {
  margin: 0;
  font-family: var(--font-absans);
  font-size: clamp(22px, 2.6vw, 28px);
  font-weight: 400;
  letter-spacing: -0.025em;
}
.crypt-linkout__meta { margin: 8px 0 0; color: #65655f; font-size: 14px; }
.crypt-linkout__copy { display: flex; margin-block-start: 22px; }
.crypt-linkout__copy input {
  flex: 1;
  min-width: 0;
  min-height: 50px;
  border: 1px solid #d2d2ce;
  border-right: 0;
  border-radius: 0;
  padding: 12px 14px;
  background: #fff;
  color: #4f4f4b;
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 13px;
}
.crypt-linkout__copy .crypt-action { flex: none; }
.crypt-linkout__note { margin: 10px 0 0; color: #65655f; font-size: 12px; line-height: 1.5; }

/* ---------- checklist ---------- */

.crypt-checklist { display: grid; gap: 1px; background: var(--color-hairline); border: 1px solid var(--color-hairline); }
.crypt-checklist__group { padding: 22px 24px; background: #fff; }
.crypt-checklist__group h2 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 14px;
  font-family: var(--font-absans);
  font-size: 20px;
  font-weight: 400;
  letter-spacing: -0.02em;
}
.crypt-checklist__count { color: #65655f; font-family: var(--font-aspekta); font-size: 14px; font-variant-numeric: tabular-nums; }
.crypt-checklist__item { display: flex; gap: 12px; padding: 10px 0; border-block-end: 1px solid var(--color-hairline); }
.crypt-checklist__item:last-child { border-block-end: 0; }
.crypt-checklist__box { flex: none; width: 16px; height: 16px; margin-block-start: 4px; border: 1px solid #b9b9b4; }
.crypt-checklist__item p { margin: 0; font-size: 15px; }
.crypt-checklist__item small { display: block; margin-block-start: 3px; color: #65655f; font-size: 13px; line-height: 1.45; }

.crypt-intake { display: grid; background: var(--color-paper); padding: clamp(22px, 3vw, 34px); }
.crypt-intake__question {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  border-block-end: 1px solid var(--color-hairline);
}
.crypt-intake__question:last-child { border-block-end: 0; }
.crypt-intake__question > span:first-child { max-width: 46ch; font-size: 16px; line-height: 1.45; }
.crypt-intake__prompt { max-width: 46ch; }
.crypt-intake__prompt > span { font-size: 16px; line-height: 1.45; }
/* Where a pre-filled answer came from. Quiet enough not to compete with the
   question, loud enough to be read before someone accepts it. */
.crypt-intake__source { display: block; margin-block-start: 4px; color: var(--color-ink-soft); font-size: 13px; line-height: 1.4; }

.crypt-switch {
  display: inline-flex;
  flex: none;
  border: 1px solid #d2d2ce;
  background: #fff;
}
.crypt-switch button {
  min-width: 62px;
  min-height: 42px;
  border: 0;
  background: transparent;
  color: #65655f;
  font-family: var(--font-aspekta);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}
.crypt-switch button[aria-pressed="true"] { background: var(--color-ink); color: #fff; }

.crypt-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--color-hairline); border: 1px solid var(--color-hairline); }
.crypt-compare__col { display: flex; flex-direction: column; padding: 24px; background: #fff; }
.crypt-compare__col h3 { margin: 0 0 14px; font-family: var(--font-absans); font-size: 19px; font-weight: 400; letter-spacing: -0.02em; }
.crypt-compare__col ul { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.crypt-compare__col li { display: flex; gap: 10px; color: #4f4f4b; font-size: 14px; line-height: 1.45; }
.crypt-compare__col li[data-state="no"] { color: #8b8b8b; }
.crypt-compare__mark { flex: none; width: 14px; color: #65655f; }
.crypt-compare__price { margin: 18px 0 0; color: #65655f; font-size: 14px; }
/* The button is pinned to the bottom of its column, so its own top margin
   collapses to nothing in whichever column is taller. The gap above it has to
   come from the last paragraph before it, whichever one that is. */
.crypt-compare__price:last-of-type, .crypt-compare__note { margin-block-end: 18px; }
.crypt-compare__col--pick { background: var(--color-paper); }
.crypt-compare__col .crypt-action { width: 100%; margin-block-start: auto; }

/* ---------- public share surface ---------- */

/* @layer base paints h1-h4 white for the old dark shell. The authenticated pages
   inherit .dash-shell's override; this standalone surface needs its own. */
.crypt-share-page :where(h1, h2, h3, h4) { color: var(--color-ink); }

.crypt-share-page {
  min-height: 100%;
  margin: 0;
  background: #fff;
  color: var(--color-ink);
  font-family: var(--font-aspekta);
  -webkit-font-smoothing: antialiased;
}
.crypt-share-skip {
  position: absolute;
  left: 20px;
  z-index: 20;
  padding: 12px 18px;
  background: var(--color-ink);
  color: #fff;
  transform: translateY(-140%);
}
.crypt-share-skip:focus { transform: translateY(20px); }

.crypt-share-shell { display: flex; flex-direction: column; min-height: 100vh; }
.crypt-share-bar,
.crypt-share-foot { border-block-end: 1px solid var(--color-hairline); }
.crypt-share-foot { border-block-end: 0; border-block-start: 1px solid var(--color-hairline); margin-block-start: auto; }
.crypt-share-bar > div,
.crypt-share-foot > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: min(100%, 860px);
  margin-inline: auto;
  padding: 18px clamp(20px, 5vw, 32px);
}
.crypt-share-bar__mark { font-family: var(--font-absans); font-size: 17px; letter-spacing: -0.02em; }
.crypt-share-bar__what,
.crypt-share-foot p { margin: 0; color: #65655f; font-size: 13px; }
.crypt-share-foot > div { justify-content: center; }
.crypt-share-foot a { color: inherit !important; text-decoration: underline; }

.crypt-share-main { width: min(100%, 860px); margin-inline: auto; padding: clamp(34px, 6vw, 60px) clamp(20px, 5vw, 32px) 64px; }

.crypt-share__header { margin-block-end: 34px; }
.crypt-share__header h1 {
  margin: 0;
  font-family: var(--font-absans);
  font-size: clamp(32px, 4.2vw, 48px);
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 1;
  text-wrap: balance;
}
.crypt-share__header p { margin: 12px 0 0; color: #65655f; line-height: 1.55; }
.crypt-share__header strong { color: var(--color-ink); font-weight: 500; }

.crypt-share-group { border: 1px solid var(--color-hairline); border-block-end: 0; }
.crypt-share-group:last-of-type { border-block-end: 1px solid var(--color-hairline); }
.crypt-share-group__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 22px;
  border-block-end: 1px solid var(--color-hairline);
  background: var(--color-paper);
}
.crypt-share-group__head h2 { margin: 0; font-family: var(--font-absans); font-size: 19px; font-weight: 400; letter-spacing: -0.02em; }
.crypt-share-group__count { color: #65655f; font-size: 13px; }

.crypt-share-entry { padding: 18px 22px; border-block-end: 1px solid var(--color-hairline); }
.crypt-share-entry:last-child { border-block-end: 0; }
.crypt-share-entry h3 { margin: 0; font-size: 16px; font-weight: 500; }
.crypt-share-entry__details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 20px; margin-block-start: 12px; }
.crypt-share-entry__details div { min-width: 0; font-size: 14px; }
.crypt-share-entry__details dt { display: inline; color: #65655f; }
.crypt-share-entry__details dd { display: inline; margin: 0 0 0 4px; font-weight: 500; overflow-wrap: anywhere; }
.crypt-share-entry__notes { margin-block-start: 12px; padding: 12px 14px; background: var(--color-paper); color: #4f4f4b; font-size: 14px; line-height: 1.55; }
.crypt-share-entry__notes p { margin: 0 0 8px; }
.crypt-share-entry__notes p:last-child { margin-block-end: 0; }

.crypt-share__foot-note { margin-block-start: 30px; padding-block-start: 22px; border-block-start: 1px solid var(--color-hairline); color: #65655f; font-size: 14px; line-height: 1.55; }
.crypt-share__foot-note p { margin: 0; }
.crypt-share__foot-note strong { color: var(--color-ink); font-weight: 500; }

/* Gate states: PIN, lockout, unavailable. Deliberately sparse. */
.crypt-gate { width: min(100%, 420px); margin: clamp(20px, 6vw, 60px) auto 0; }
.crypt-gate__icon { margin-block-end: 22px; color: var(--color-ink); }
.crypt-gate h1 {
  margin: 0;
  font-family: var(--font-absans);
  font-size: clamp(28px, 3.4vw, 38px);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.04;
}
.crypt-gate > p { margin: 12px 0 0; color: #65655f; line-height: 1.55; }
.crypt-gate form { margin-block-start: 30px; }
.crypt-gate__contact { margin-block-start: 30px; padding-block-start: 20px; border-block-start: 1px solid var(--color-hairline); color: #65655f; font-size: 14px; line-height: 1.55; }
.crypt-gate__contact a { color: var(--color-ink) !important; text-decoration: underline; }
.crypt-gate--alarm .crypt-gate__icon { color: #7b2c2c; }

.crypt-pin { display: flex; gap: 8px; margin-block-end: 24px; }
.crypt-pin input {
  width: 100%;
  min-width: 0;
  height: 62px;
  border: 1px solid #d2d2ce;
  border-radius: 0;
  padding: 0;
  outline: 0;
  background: #fff;
  color: var(--color-ink);
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 24px;
  text-align: center;
}
.crypt-pin input:focus { border-color: var(--color-ink); box-shadow: 0 0 0 2px var(--color-ink); }
.crypt-gate__submit { width: 100%; }
.crypt-gate__submit[disabled] { opacity: 0.4; cursor: not-allowed; }
.crypt-gate__attempts { margin: 16px 0 0; color: #6f2020; font-size: 13px; }
.crypt-gate__countdown { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; color: var(--color-ink); }

/* ---------- responsive ---------- */

@media (max-width: 900px) {
  .crypt-cat { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .crypt-cat__aside { position: static; order: -1; }
}

@media (max-width: 720px) {
  .crypt-grid,
  .crypt-compare,
  .crypt-share-entry__details { grid-template-columns: minmax(0, 1fr); }
  .crypt-list__row { grid-template-columns: minmax(0, 1fr); }
  .crypt-list__actions { justify-content: flex-start; }
  .crypt-actions { flex-direction: column; align-items: stretch; }
  .crypt-actions .crypt-action { width: 100%; }
  .crypt-actions__group { justify-content: space-between; }
  .crypt-linkout__copy { flex-direction: column; }
  .crypt-linkout__copy input { border-right: 1px solid #d2d2ce; border-bottom: 0; }
  .crypt-item__body { padding-left: 0; }
}

@media (max-width: 420px) {
  .crypt-pin { gap: 5px; }
  .crypt-pin input { height: 52px; font-size: 19px; }
}

/* ---------- late additions: classes introduced with the views ---------- */

.crypt__score { margin-block-start: 26px; }
.crypt-card__track { display: block; }
.crypt-card__fill { display: block; }

.crypt-add { margin-block-start: 26px; }
.crypt-add > summary { display: inline-flex; list-style: none; }
.crypt-add > summary::-webkit-details-marker { display: none; }
.crypt-add[open] > summary { margin-block-end: 18px; }

.crypt-intake__intro { margin: 0 0 8px; color: #65655f; font-size: 14px; }
.crypt-intake__stat { margin: 0; max-width: 44ch; color: #8b8b8b; font-size: 13px; line-height: 1.45; }
.crypt-intake { border: 0; }
.crypt-intake legend { padding: 0; }

.crypt-list__limit { margin: 0; max-width: 52ch; color: #65655f; font-size: 14px; line-height: 1.5; }
.crypt-linkout__warn { margin-block: 22px 0; }

/* ---------- trusted-contact form ---------- */

.crypt-form { display: grid; gap: 30px; }

.crypt-fieldset {
  display: grid;
  gap: 24px;
  min-width: 0;
  padding: clamp(22px, 3vw, 34px);
  border: 0;
  background: var(--color-paper);
}
.crypt-fieldset > legend {
  float: left;
  width: 100%;
  padding: 0;
  margin-block-end: 4px;
  font-family: var(--font-absans);
  font-size: 24px;
  font-weight: 400;
  letter-spacing: -0.025em;
}
.crypt-fieldset > legend + * { clear: both; }
.crypt-fieldset__aside { color: #65655f; font-family: var(--font-aspekta); font-size: 14px; letter-spacing: 0; }
.crypt-fieldset__intro { max-width: 60ch; margin: 0; color: #65655f; font-size: 14px; line-height: 1.55; }

.crypt-presets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.crypt-preset {
  display: flex;
  gap: 12px;
  min-width: 0;
  padding: 16px 18px;
  border: 1px solid #d2d2ce;
  background: #fff;
  cursor: pointer;
}
.crypt-preset:hover { border-color: var(--color-ink); }
.crypt-preset:has(input:checked) { border-color: var(--color-ink); box-shadow: inset 0 0 0 1px var(--color-ink); }
.crypt-preset:has(input:focus-visible) { outline: 2px solid var(--color-ink); outline-offset: 2px; }
.crypt-preset input { flex: none; margin-block-start: 3px; accent-color: var(--color-ink); }
.crypt-preset strong { display: block; font-size: 15px; font-weight: 500; }
.crypt-preset small { display: block; margin-block-start: 4px; color: #65655f; font-size: 13px; line-height: 1.45; }

/* Hide only when a non-custom preset wins. A browser without :has() leaves the
   category checkboxes visible rather than unreachable. */
.crypt-presets:has(input:checked:not([value="custom"])) ~ .crypt-custom { display: none; }
.crypt-custom__hint { margin: 0 0 12px; color: #65655f; font-size: 14px; }
.crypt-custom__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.crypt-check {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  min-width: 0;
  padding: 0 14px;
  border: 1px solid #d2d2ce;
  background: #fff;
  font-size: 14px;
  cursor: pointer;
}
.crypt-check:hover { border-color: var(--color-ink); }
.crypt-check:has(input:checked) { border-color: var(--color-ink); box-shadow: inset 0 0 0 1px var(--color-ink); }
.crypt-check:has(input:focus-visible) { outline: 2px solid var(--color-ink); outline-offset: 2px; }
.crypt-check input { flex: none; accent-color: var(--color-ink); }
.crypt-check span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* button_to wraps its button in a form; keep inline actions on one line. */
.crypt-actions form,
.crypt-list__actions form,
.crypt-item__foot form { display: contents; }

@media (max-width: 720px) {
  .crypt-presets { grid-template-columns: minmax(0, 1fr); }
  .crypt-custom__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.crypt__lede-aside { margin-block-start: 10px; font-size: 15px; color: var(--color-ink-soft); }
.crypt__lede-aside a { text-decoration: underline; text-underline-offset: 3px; }

.crypt-compare__note { margin-block-start: 8px; color: var(--color-ink-soft); font-size: 13px; line-height: 1.5; }
.crypt-compare__note a { text-decoration: underline; text-underline-offset: 3px; }
.dash-page {
  position: relative;
  isolation: isolate;
  min-height: 100%;
  margin: 0;
  background: #0d0d0d;
  color: var(--color-ink);
  font-family: var(--font-aspekta);
  font-size: 16px;
}

.dash-page::before,
.dash-page::after {
  position: absolute;
  z-index: 0;
  top: 0;
  bottom: 0;
  width: calc((100% - 1600px) / 2);
  background: url(/assets/dashboard-gutter-texture-166eb6606d59c76701e5b286e8bfcd1f504f7869f1af4fc15212692127fef720.svg) repeat;
  background-position: var(--dash-texture-x, 0) var(--dash-texture-y, 0);
  background-size: 256px 384px;
  content: "";
  pointer-events: none;
}

.dash-page::before { left: 0; }
.dash-page::after { right: 0; --dash-texture-x: 128px; --dash-texture-y: 192px; }

.dash-page * { box-sizing: border-box; }
.dash-page ::selection { background: var(--color-ink); color: #fff; }
.dash-shell h1, .dash-shell h2, .dash-shell h3 { color: var(--color-ink); }
.dash-shell a, .dash-shell button, .dash-shell summary { color: inherit; }

.dash-shell a:focus-visible,
.dash-shell button:focus-visible,
.dash-shell summary:focus-visible {
  outline: 3px solid var(--color-ink);
  outline-offset: 4px;
}

.dash-skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 100;
  padding: 12px 16px;
  background: var(--color-ink);
  color: #fff !important;
  transform: translateY(-180%);
}

.dash-skip-link:focus { transform: translateY(0); }

.dash-shell {
  position: relative;
  z-index: 1;
  width: min(100%, 1600px);
  min-height: 100dvh;
  margin: 0 auto;
  border-right: 1px solid var(--color-hairline);
  border-left: 1px solid var(--color-hairline);
  background: #fff;
  --dash-gutter: clamp(24px, 4.25vw, 68px);
}

@keyframes dash-gutter-drift {
  to {
    background-position:
      calc(var(--dash-texture-x, 0px) + 256px)
      calc(var(--dash-texture-y, 0px) + 384px);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .dash-page::before,
  .dash-page::after { animation: dash-gutter-drift 64s linear infinite; }
}

.dash-nav {
  position: sticky;
  top: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: minmax(150px, 1fr) auto;
  align-items: center;
  min-height: 76px;
  padding: 0 var(--dash-gutter);
  border-bottom: 1px solid var(--color-hairline);
  background: rgb(255 255 255 / 0.98);
}

.dash-brand { width: 148px; }
.dash-brand img { display: block; width: 100%; height: auto; }

.dash-account { position: relative; justify-self: end; }

.dash-account summary {
  display: flex;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  list-style: none;
}

.dash-account summary::-webkit-details-marker { display: none; }
.dash-account__menu-icon {
  display: grid;
  width: 24px;
  gap: 5px;
}

.dash-account__menu-icon span {
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transition: width 160ms ease-out;
}

.dash-account__menu-icon span:nth-child(2) { width: 18px; justify-self: end; }
.dash-account[open] .dash-account__menu-icon span:nth-child(2) { width: 24px; }

.dash-account__menu {
  position: absolute;
  z-index: 1;
  top: calc(100% + 10px);
  right: 0;
  width: 180px;
  padding: 8px;
  border: 1px solid var(--color-hairline);
  background: #fff;
}

.dash-account[open] summary ~ .dash-account__menu { animation: none; }

.dash-account__menu a,
.dash-account__menu button {
  display: block;
  width: 100%;
  min-height: 44px;
  border: 0;
  padding: 10px 12px;
  background: transparent;
  text-align: left;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}

.dash-account__menu a:hover,
.dash-account__menu button:hover { background: var(--color-ink); color: #fff; }

.dash-main { width: 100%; padding: 44px var(--dash-gutter) 72px; }
.dash-workspace { width: min(100%, 1180px); margin: 0 auto; }

.dash-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 34px;
}

.dash-page-header h1 {
  margin: 0;
  font-family: var(--font-absans);
  font-size: clamp(34px, 3vw, 46px);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1;
}

.dash-page-header p { margin: 9px 0 0; color: #65655f; font-size: 14px; }

.dash-primary-action {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  gap: 16px;
  padding: 0 18px;
  border-radius: 999px;
  background: var(--color-ink);
  color: #fff !important;
  font-size: 14px;
  font-weight: 500;
  transition: background-color 160ms ease-out;
}

.dash-primary-action:hover { background: #383836; }

.dash-primary-action svg,
.dash-document__action svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1);
}

.dash-primary-action:hover svg,
.dash-primary-action:focus-visible svg,
.dash-document > a:hover .dash-document__action svg,
.dash-document > a:focus-visible .dash-document__action svg,
.dash-offer > a:hover .dash-document__action svg,
.dash-offer > a:focus-visible .dash-document__action svg { transform: translate(3px, -3px); }

.dash-progress { padding: 24px 26px 22px; background: var(--color-paper); }

.dash-progress__summary {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 24px;
}

.dash-progress h2 {
  margin: 0;
  color: #141414;
  font-family: var(--font-aspekta);
  font-size: 14px;
  font-weight: 500;
}
.dash-progress p { margin: 5px 0 0; color: #575757; font-size: 13px; }

.dash-progress strong {
  color: #141414 !important;
  font-family: var(--font-absans);
  font-size: 24px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.dash-progress__track { height: 5px; margin-top: 21px; overflow: hidden; background: #dedede; }
.dash-progress__track span { display: block; height: 100%; background: var(--color-ink); }
.dash-documents { margin-top: 42px; }

.dash-documents > header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 14px;
}

.dash-documents > header h2 {
  margin: 0;
  font-family: var(--font-absans);
  font-size: 24px;
  font-weight: 400;
  letter-spacing: -0.015em;
}

.dash-documents > header span { color: #65655f; font-size: 13px; }

.dash-document-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.dash-document { padding: 0; }

.dash-document > a {
  display: grid;
  grid-template-columns: 42px minmax(0, 1.4fr) minmax(190px, 0.65fr) auto;
  gap: clamp(18px, 3vw, 44px);
  align-items: center;
  min-width: 0;
  padding: 24px 12px 25px;
  border-top: 1px solid var(--color-hairline);
  transition: background-color 160ms ease-out;
}

.dash-document:last-child > a { border-bottom: 1px solid var(--color-hairline); }

.dash-document > a:hover,
.dash-document > a:focus-visible { background: #f4f4f4; }

.dash-document__status-mark {
  display: grid;
  width: 18px;
  height: 18px;
  align-self: start;
  place-items: center;
  margin-top: 2px;
  border: 1px solid #bcbcbc;
}

.dash-document__status-mark.is-in-progress { border-color: var(--color-ink); }

.dash-document__status-mark.is-in-progress::after {
  width: 8px;
  height: 2px;
  background: var(--color-ink);
  content: "";
}

.dash-document__status-mark.is-complete {
  border-color: var(--color-ink);
  background: var(--color-ink);
}

.dash-document__status-mark.is-complete::after {
  color: #fff;
  content: "✓";
  font-size: 13px;
  line-height: 1;
}

.dash-document__body,
.dash-document__state { display: flex; min-width: 0; flex-direction: column; }
.dash-document__body { gap: 7px; }

.dash-document__body strong {
  color: #141414 !important;
  font-family: var(--font-absans);
  font-size: clamp(20px, 2vw, 27px);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.dash-document__body > span {
  max-width: 68ch;
  color: #575757 !important;
  font-size: 13px;
  line-height: 1.45;
}

.dash-document__state {
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  color: var(--color-ink-soft);
  font-size: 12px;
  line-height: 1.4;
  text-align: right;
}

.dash-document__action {
  display: inline-flex;
  min-width: 82px;
  justify-content: flex-end;
  gap: 9px;
  font-size: 14px;
  font-weight: 500;
}

.dash-tools { margin-top: 42px; }

.dash-tools > header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 24px;
  align-items: center;
  padding-bottom: 12px;
}

.dash-tools > header h2 {
  margin: 0;
  font-family: var(--font-absans);
  font-size: 24px;
  font-weight: 400;
  letter-spacing: -0.015em;
}

.dash-tool-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--color-hairline);
  background: var(--color-paper);
}

.dash-tool {
  min-width: 0;
  padding: 24px 26px 26px;
}

.dash-tool + .dash-tool { border-left: 1px solid var(--color-hairline); }

.dash-tool--link { display: flex; padding: 0; }

.dash-tool--link > a {
  flex: 1;
  padding: 24px 26px 26px;
  transition: background-color 160ms ease-out;
}

.dash-tool--link > a:hover,
.dash-tool--link > a:focus-visible { background: #efefed; }

.dash-tool__next {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dash-tool__next svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1);
}

.dash-tool--link > a:hover .dash-tool__next svg,
.dash-tool--link > a:focus-visible .dash-tool__next svg { transform: translate(3px, -3px); }

.dash-shader-divider {
  height: 24px;
  margin: 0;
  overflow: hidden;
  color: rgb(0 0 0 / 0.10);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 8px;
  line-height: 8px;
  letter-spacing: 2px;
  text-align: right;
  white-space: pre;
}

.dash-tool__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.dash-tool__heading h3 {
  margin: 0;
  color: #141414;
  font-family: var(--font-aspekta);
  font-size: 14px;
  font-weight: 500;
}

.dash-tool__heading strong {
  color: #141414 !important;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.dash-tool__heading button {
  display: inline-flex;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: #141414;
  cursor: pointer;
}

.dash-tool__heading button:hover { background: #ededed; }
.dash-tool__heading svg { width: 18px; height: 18px; }

.dash-tool__value {
  margin: 27px 0 0;
  color: #141414 !important;
  font-family: var(--font-absans);
  font-size: 25px;
  line-height: 1.1;
}

.dash-tool__metric {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 22px 0 0;
}

.dash-tool__metric strong {
  color: #141414 !important;
  font-family: var(--font-absans);
  font-size: 32px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.dash-tool__metric span { color: #575757; font-size: 13px; }
.dash-tool__note { margin: 8px 0 0; color: #666; font-size: 12px; line-height: 1.45; }
.dash-tool__link { display: inline-block; margin-top: 18px; color: #141414 !important; font-size: 13px; font-weight: 500; }

.dash-offer {
  margin-top: 0;
  padding: 0;
  border-top: 1px solid var(--color-hairline);
  border-bottom: 1px solid var(--color-hairline);
}

.dash-offer > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 22px 26px 23px;
  transition: background-color 160ms ease-out;
}

.dash-offer > a:hover,
.dash-offer > a:focus-visible { background: #f4f4f4; }

.dash-offer + .dash-offer { border-top: 0; }
.dash-offer h2 {
  margin: 0;
  font-family: var(--font-absans);
  font-size: 20px;
  font-weight: 400;
  letter-spacing: -0.01em;
}
.dash-offer p { max-width: 65ch; margin: 5px 0 0; color: #575757; font-size: 13px; line-height: 1.45; }

.dash-offer h2 { color: #141414 !important; }

@media (max-width: 850px) {
  .dash-document > a { grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px 18px; }
  .dash-document__state { grid-column: 2; grid-row: 2; justify-content: flex-start; text-align: left; }
  .dash-document__action { grid-column: 3; grid-row: 1 / span 2; }
}

@media (max-width: 680px) {
  .dash-shell { border-right: 0; border-left: 0; --dash-gutter: 20px; }
  .dash-nav { grid-template-columns: minmax(120px, 1fr) auto; min-height: 64px; }
  .dash-brand { width: 126px; }
  .dash-main { padding-top: 30px; padding-bottom: 48px; }
  .dash-page-header { display: block; margin-bottom: 26px; }
  .dash-page-header h1 { font-size: 36px; }

  .dash-primary-action {
    width: 100%;
    justify-content: space-between;
    margin-top: 22px;
  }

  .dash-progress { padding: 20px; }
  .dash-documents { margin-top: 34px; }

  .dash-document > a {
    grid-template-columns: 26px minmax(0, 1fr) auto;
    gap: 9px 12px;
    padding: 21px 12px 22px;
  }

  .dash-document__body strong { font-size: 21px; }
  .dash-document__body > span { font-size: 12px; }
  .dash-document__state { align-items: flex-start; flex-direction: column-reverse; gap: 3px; }
  .dash-document__action { min-width: 72px; font-size: 13px; }
  .dash-tool-grid { grid-template-columns: 1fr; }
  .dash-tool + .dash-tool { border-top: 1px solid var(--color-hairline); border-left: 0; }
  .dash-offer > a { align-items: flex-start; flex-direction: column; gap: 18px; padding: 20px; }
}

@media (max-width: 1600px) {
  .dash-page::before,
  .dash-page::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .dash-page *, .dash-page *::before, .dash-page *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}
/* air-datepicker */

.air-datepicker {
  --adp-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --adp-font-size: 14px;
  --adp-width: 246px;
  --adp-z-index: 40;
  --adp-padding: 4px;
  --adp-grid-areas: "nav" "body" "timepicker" "buttons";
  --adp-transition-duration: 0.3s;
  --adp-transition-ease: ease-out;
  --adp-transition-offset: 8px;
  --adp-background-color: var(--color-ash-500);
  --adp-background-color-hover: var(--color-ash-400);
  --adp-background-color-active: #eaeaea;
  --adp-background-color-in-range: rgba(16, 16, 16, 0.1);
  --adp-background-color-in-range-focused: rgba(236, 236, 236, 0.2);
  --adp-background-color-selected-other-month-focused: #f1f1f1;
  --adp-background-color-selected-other-month: #e6e6e6;
  --adp-color: var(--color-ash-200);
  --adp-color-secondary: var(--color-ash-300);
  --adp-accent-color: var(--color-life);
  --adp-color-current-date: var(--adp-accent-color);
  --adp-color-other-month: var(--color-ash-200);
  --adp-color-disabled: var(--color-ash-300);
  --adp-color-disabled-in-range: var(--color-ash-400);
  --adp-color-other-month-hover: var(--color-ash-400);
  --adp-border-color: var(--color-ash-400);
  --adp-border-color-inner: var(--color-ash-100);
  --adp-border-radius: 8px;
  --adp-border-color-inline: var(--color-ash-100);
  --adp-nav-height: 32px;
  --adp-nav-arrow-color: var(--adp-color-secondary);
  --adp-nav-action-size: 32px;
  --adp-nav-color-secondary: var(--adp-color-secondary);
  --adp-day-name-color: var(--color-ash-200);
  --adp-day-name-color-hover: var(--color-ash-100);
  --adp-day-cell-width: 1fr;
  --adp-day-cell-height: 32px;
  --adp-month-cell-height: 42px;
  --adp-year-cell-height: 56px;
  --adp-pointer-size: 10px;
  --adp-poiner-border-radius: 2px;
  --adp-pointer-offset: 14px;
  --adp-cell-border-radius: 4px;
  --adp-cell-background-color-hover: var(--adp-background-color-hover);
  --adp-cell-background-color-selected: var(--color-ash-800);
  --adp-cell-background-color-selected-hover: var(--color-ash-700);
  --adp-cell-background-color-in-range: rgba(38, 38, 38, 0.1);
  --adp-cell-background-color-in-range-hover: rgba(44, 44, 44, 0.2);
  --adp-cell-border-color-in-range: var(--adp-cell-background-color-selected);
  --adp-btn-height: 32px;
  --adp-btn-color: var(--adp-accent-color);
  --adp-btn-color-hover: var(--adp-color);
  --adp-btn-border-radius: var(--adp-border-radius);
  --adp-btn-background-color-hover: var(--adp-background-color-hover);
  --adp-btn-background-color-active: var(--adp-background-color-active);
  --adp-time-track-height: 1px;
  --adp-time-track-color: #dedede;
  --adp-time-track-color-hover: #b1b1b1;
  --adp-time-thumb-size: 12px;
  --adp-time-padding-inner: 10px;
  --adp-time-day-period-color: var(--adp-color-secondary);
  --adp-mobile-font-size: 16px;
  --adp-mobile-nav-height: 40px;
  --adp-mobile-width: 320px;
  --adp-mobile-day-cell-height: 38px;
  --adp-mobile-month-cell-height: 48px;
  --adp-mobile-year-cell-height: 64px;
}

.air-datepicker-overlay {
  --adp-overlay-background-color: rgba(0, 0, 0, 0.3);
  --adp-overlay-transition-duration: 0.3s;
  --adp-overlay-transition-ease: ease-out;
  --adp-overlay-z-index: 99;
}

.air-datepicker-cell.-selected-.-day- {
  color: #ffffff; /* Ensure selected cell text is also light in dark mode */
  background: var(--adp-cell-background-color-selected);
}

.air-datepicker-cell.-selected-.-year- {
  color: #ffffff; /* Ensure selected cell text is also light in dark mode */
  background: var(--adp-cell-background-color-selected);
}

.air-datepicker-cell.-selected-.-month- {
  color: #ffffff; /* Ensure selected cell text is also light in dark mode */
  background: var(--adp-cell-background-color-selected);
}

.air-datepicker-cell.-selected- {
  color: #ffffff; /* Ensure selected cell text is also light in dark mode */
  background: var(--adp-cell-background-color-selected);
}

.air-datepicker-cell.-selected-.-current- {
  color: #ffffff; /* Ensure selected cell text is also light in dark mode */
  background: var(--adp-cell-background-color-selected);
}

.air-datepicker-cell.-current- {
  border: 1px solid var(--color-life) !important;
}

.air-datepicker-cell.-selected-.-day-.-other-month- {
  color: #cccccc; /* Ensure selected cell text is also light in dark mode */
  background: #7e7e7e;
}

.air-datepicker--navigation {
  width: 100%;
}
.air-datepicker--pointer {
  opacity: 0;
}
.air-datepicker {
  background: var(--adp-background-color);
  border: 1px solid var(--adp-border-color);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
  border-radius: var(--adp-border-radius);
  box-sizing: content-box;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(4, max-content);
  grid-template-areas: var(--adp-grid-areas);
  font-family: var(--adp-font-family), sans-serif;
  font-size: var(--adp-font-size);
  color: var(--adp-color);
  width: var(--adp-width);
  position: absolute;
  transition: opacity var(--adp-transition-duration) var(--adp-transition-ease),
    transform var(--adp-transition-duration) var(--adp-transition-ease);
  z-index: var(--adp-z-index);
}

.air-datepicker-cell.-selected- {
  color: #1d1d1d;
  border: none;
  background: var(--adp-cell-background-color-selected);
}

.air-datepicker-cell.-disabled- {
  cursor: not-allowed;
}

/* Time-only picker styles */
.air-datepicker.only-timepicker .air-datepicker--navigation {
  display: none;
}

.air-datepicker.only-timepicker .air-datepicker--content {
  display: none;
}

.air-datepicker.only-timepicker .air-datepicker--time {
  border-top: none;
}
.recovery-main {
  width: 100%;
  min-height: calc(100dvh - 76px);
  padding: clamp(40px, 7vw, 96px) var(--dash-gutter, clamp(20px, 4.25vw, 68px)) 72px;
  background: #fff;
}

.recovery-workspace { width: min(100%, 880px); margin-inline: auto; }

.recovery-header {
  max-width: 720px;
  padding-block-end: clamp(30px, 5vw, 54px);
}

.recovery-header h1 {
  margin: 0;
  color: var(--color-ink);
  font-family: var(--font-absans);
  font-size: clamp(42px, 7vw, 76px);
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 0.98;
}

.recovery-header p {
  max-width: 620px;
  margin: 20px 0 0;
  color: var(--color-ink-soft);
  font-family: var(--font-aspekta);
  font-size: 17px;
  line-height: 1.6;
}

.recovery-issues,
.recovery-detail {
  border-block: 1px solid var(--color-hairline);
}

.recovery-issues > h2,
.recovery-detail h2 {
  margin: 0;
  padding-block: 18px;
  color: var(--color-ink);
  font-family: var(--font-aspekta);
  font-size: 15px;
  font-weight: 500;
}

.recovery-issues ol { margin: 0; padding: 0; list-style: none; }

.recovery-issues li {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  gap: 20px;
  align-items: center;
  min-width: 0;
  padding: 22px 0;
  border-top: 1px solid var(--color-hairline);
}

.recovery-issues__number {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  background: var(--color-ink);
  color: #fff;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.recovery-issues__copy { min-width: 0; }

.recovery-issues__copy h3 {
  margin: 0;
  color: var(--color-ink);
  font-family: var(--font-aspekta);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
}

.recovery-issues__copy p {
  margin: 5px 0 0;
  color: var(--color-ink-soft);
  font-size: 13px;
  line-height: 1.4;
}

.recovery-detail { padding-block-end: 24px; }

.recovery-detail p {
  max-width: 680px;
  margin: 0;
  color: var(--color-ink-soft);
  font-size: 16px;
  line-height: 1.6;
}

.recovery-action {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  border-radius: 999px;
  background: var(--color-ink);
  color: #fff !important;
  font-family: var(--font-absans);
  font-size: 14px;
  line-height: 1;
  text-align: center;
  text-transform: capitalize;
  transition: background-color 160ms ease-out;
}

.recovery-action:hover { background: #383836; }

.recovery-action:focus-visible,
.recovery-back-link:focus-visible {
  outline: 3px solid var(--color-ink);
  outline-offset: 4px;
}

.recovery-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 24px;
  padding-block-start: 30px;
}

.recovery-back-link {
  min-height: 44px;
  padding: 12px 2px;
  color: var(--color-ink-soft) !important;
  font-size: 14px;
}

.recovery-back-link:hover { color: var(--color-ink) !important; }

@media (max-width: 600px) {
  .recovery-main { padding-block-start: 42px; }
  .recovery-header h1 { font-size: clamp(40px, 13vw, 56px); }

  .recovery-issues li {
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 14px;
  }

  .recovery-issues .recovery-action {
    grid-column: 2;
    width: fit-content;
    max-width: 100%;
  }
}
.invitation-heading { overflow-wrap: anywhere; }
.invitation-status { color: var(--color-ink); font-weight: 500; }

.invitation-form__message trix-toolbar { margin-block-end: 8px; }
.invitation-form__message trix-editor {
  min-height: 180px;
  border: 1px solid #d2d2ce;
  border-radius: 0;
  padding: 14px;
  background: #fff;
  color: var(--color-ink);
  font-family: var(--font-aspekta);
  font-size: 16px;
  line-height: 1.55;
}
.invitation-form__message trix-editor:focus {
  border-color: var(--color-ink);
  outline: 2px solid var(--color-ink);
  outline-offset: 0;
}

.invitation-form__buttons { display: flex; align-items: center; justify-content: flex-end; gap: 18px; }
.invitation-action { text-transform: capitalize; }
.invitation-action:not(.account-settings__submit) {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  padding-block: 12px;
  color: #4f4f4b !important;
  font-size: 14px;
  font-weight: 500;
}
.invitation-action:not(.account-settings__submit):hover { color: var(--color-ink) !important; }
.invitation-action.invitation-action--danger { color: #7b2c2c !important; }
.invitation-action.invitation-action--danger:hover { color: #5e1e1e !important; }

.invitation-accept__password-toggle { min-width: 44px; min-height: 44px; justify-content: center; }
.invitation-accept__password-toggle:focus-visible { outline: 3px solid var(--color-ink); outline-offset: 2px; }

@media (max-width: 680px) {
  .invitation-form__buttons { align-items: stretch; flex-direction: column-reverse; gap: 8px; }
  .invitation-form__buttons > * { width: 100%; justify-content: center; }
}
.notarized-upload { padding-block: 18px 72px; }
.notarized-upload__workspace { width: min(100%, 920px); margin-inline: auto; }

.notarized-upload__back {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 9px;
  margin-block-end: 12px;
  color: var(--color-ink-soft) !important;
  font-size: 14px;
}
.notarized-upload__back:hover { color: var(--color-ink) !important; }

.notarized-upload__layout { min-width: 0; }
.notarized-upload__header {
  margin-block-end: 34px;
  padding-block-end: 26px;
  border-block-end: 1px solid var(--color-hairline);
}
.notarized-upload__header h1 {
  max-width: 760px;
  margin: 0;
  font-family: var(--font-absans);
  font-size: clamp(42px, 5vw, 68px);
  font-weight: 400;
  letter-spacing: -0.045em;
  line-height: 0.98;
  text-wrap: balance;
}
.notarized-upload__header p {
  max-width: 58ch;
  margin: 14px 0 0;
  color: var(--color-ink-soft);
  font-size: 15px;
  line-height: 1.5;
}
.notarized-upload__header span {
  display: block;
  margin-block-start: 13px;
  color: var(--color-ink);
  font-size: 13px;
  font-weight: 500;
}

.notarized-upload__replacement,
.notarized-upload__errors {
  margin-block-end: 24px;
  padding: 20px 22px;
  background: var(--color-paper);
}
.notarized-upload__replacement h2,
.notarized-upload__errors h2,
.notarized-upload__section h2,
.notarized-upload__facts h2 {
  margin: 0;
  color: var(--color-ink);
  font-family: var(--font-absans);
  font-size: 20px;
  font-weight: 400;
  letter-spacing: -0.02em;
}
.notarized-upload__replacement p { margin: 6px 0 0; color: var(--color-ink-soft); font-size: 13px; line-height: 1.55; }
.notarized-upload__errors { background: #f7e8e8; color: #6f2020; }
.notarized-upload__errors h2 { color: #6f2020; }
.notarized-upload__errors ul { margin: 8px 0 0; padding-inline-start: 20px; }

.notarized-upload__form { display: grid; gap: 30px; }
.notarized-upload__section { padding: clamp(22px, 3.5vw, 36px); background: var(--color-paper); }
.notarized-upload__section-heading { margin-block-end: 26px; }
.notarized-upload__section-heading p { margin: 7px 0 0; color: var(--color-ink-soft); font-size: 13px; line-height: 1.5; }
.notarized-upload__grid { display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); gap: 24px; margin-block-start: 24px; }
.notarized-upload__field { min-width: 0; }
.notarized-upload__field label { display: block; margin-block-end: 8px; color: var(--color-ink); font-size: 14px; font-weight: 500; }
.notarized-upload__field small { display: block; margin-block-start: 7px; color: var(--color-ink-soft); font-size: 12px; line-height: 1.45; }
.notarized-upload__field .notarized-upload__field-error { color: #7a2020; }
.notarized-upload__field :where(input, textarea) {
  width: 100%;
  min-height: 50px;
  border: 1px solid #d2d2ce;
  border-radius: 0;
  padding: 12px 14px;
  outline: 0;
  background: #fff;
  box-shadow: none;
  color: var(--color-ink);
  font-family: var(--font-aspekta);
  font-size: 16px;
}
.notarized-upload__field input[type="file"] { padding: 10px; }
.notarized-upload__field input[type="file"]::file-selector-button {
  min-height: 36px;
  margin-inline-end: 12px;
  border: 0;
  padding-inline: 14px;
  background: var(--color-ink);
  color: #fff;
  font: inherit;
  cursor: pointer;
}
.notarized-upload__field textarea { resize: vertical; }
.notarized-upload__field :where(input, textarea):focus { border-color: var(--color-ink); box-shadow: 0 0 0 2px var(--color-ink); }
.notarized-upload__field :where(input, textarea)[aria-invalid="true"] { border-color: #7a2020; }

.notarized-upload__facts { padding-block: 4px 6px; }
.notarized-upload__facts ul { display: grid; gap: 10px; margin: 14px 0 0; padding-inline-start: 20px; color: var(--color-ink-soft); font-size: 14px; line-height: 1.55; }

.notarized-upload__actions { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.notarized-upload__actions a { min-height: 44px; padding-block: 12px; color: var(--color-ink-soft) !important; font-size: 14px; }
.notarized-upload__actions a:hover { color: var(--color-ink) !important; }
.notarized-upload__actions input[type="submit"] {
  min-height: 48px;
  border: 0;
  border-radius: 999px;
  padding: 13px 24px;
  background: var(--color-ink);
  color: #fff;
  font-family: var(--font-absans);
  font-size: 16px;
  font-weight: 500;
  text-transform: capitalize;
  cursor: pointer;
  transition: background-color 160ms ease-out;
}
.notarized-upload__actions input[type="submit"]:hover { background: #383836; }
.notarized-upload__actions :focus-visible { outline: 3px solid var(--color-ink); outline-offset: 4px; }

@media (max-width: 680px) {
  .notarized-upload { padding-block: 14px 48px; }
  .notarized-upload__header { margin-block-end: 26px; padding-block-end: 22px; }
  .notarized-upload__header h1 { font-size: 44px; }
  .notarized-upload__grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .notarized-upload__actions { align-items: stretch; flex-direction: column-reverse; gap: 10px; }
  .notarized-upload__actions input[type="submit"] { width: 100%; }
}

@media (max-width: 360px) {
  .notarized-upload__header h1 { font-size: 38px; }
  .notarized-upload__section { padding-inline: 18px; }
  .notarized-upload__field input[type="file"]::file-selector-button { display: block; margin: 0 0 8px; }
}
/*
  Open Graph card. OG Kit renders it alone at exactly 1200x630 on a headless
  Ubuntu box, so every property is set explicitly instead of inherited, and no
  size uses clamp() or vw: there is no viewport to resolve them against.
*/
.og-card {
  width: 1200px;
  height: 630px;
  display: flex;
  flex-direction: column;
  background: #f6f6f3;
  color: #0c0c0c;
  box-sizing: border-box;
  overflow: hidden;
}

/* Same decorative glyph field as the homepage nav, at the same weight. */
.og-card__band {
  height: 104px;
  padding: 16px 0 0;
  font-family: ui-monospace, "DejaVu Sans Mono", Menlo, monospace;
  font-size: 11px;
  line-height: 11px;
  letter-spacing: 1px;
  color: rgb(0 0 0 / 0.07);
  /* Fades into the canvas instead of ending on a hard edge, so it reads as
     texture rather than a header strip. */
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 45%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 45%, transparent 100%);
  white-space: pre;
  text-align: center;
  overflow: hidden;
  box-sizing: border-box;
}

.og-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  padding: 40px 72px 68px;
  box-sizing: border-box;
}

.og-card__logo {
  display: block;
  width: auto;
  height: 44px;
}

.og-card__title {
  margin: 0;
  color: #0c0c0c;
  font-family: "Clash Grotesk", "Arial Black", sans-serif;
  font-weight: 500;
  font-size: 76px;
  line-height: 0.96;
  letter-spacing: -0.04em;
  /*
    Titles run 38 to 78 characters across the published articles. Four lines is
    what fits; max-height rather than -webkit-line-clamp, because app CSS
    overrides `display` and silently disables the clamp.
  */
  max-height: calc(0.96em * 4);
  overflow: hidden;
  overflow-wrap: anywhere;
}
/* Progress Tracker Styles */
.progress-tracker {
  @apply flex items-center justify-between w-full;
}

.progress-tracker .step-container {
  @apply flex items-center flex-1;
}

.progress-tracker .step-container:last-child {
  @apply flex-initial;
}

.progress-tracker .step-link {
  @apply flex flex-col items-center;
}

.progress-tracker .step-circle {
  @apply relative transition-all duration-300;
}

.progress-tracker .step-line {
  @apply relative top-0;
  margin-top: -1.5rem;
}

/* Ensure circles and lines are properly aligned */
.progress-tracker .step-container {
  position: relative;
}

.progress-tracker .step-line {
  position: relative;
  z-index: 0;
}

.progress-tracker .step-circle {
  position: relative;
  z-index: 1;
}

/* Animation for current step */
@keyframes pulse-ring {
  0% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-death) 50%, transparent),
                0 0 0 0 color-mix(in srgb, var(--color-death) 30%, transparent);
  }
  70% {
    box-shadow: 0 0 0 12px color-mix(in srgb, var(--color-death) 0%, transparent),
                0 0 0 16px color-mix(in srgb, var(--color-death) 0%, transparent);
  }
  100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-death) 0%, transparent),
                0 0 0 0 color-mix(in srgb, var(--color-death) 0%, transparent);
  }
}

.step-circle.current {
  animation: pulse-ring 2s infinite;
  position: relative;
}
.rb-trust-ledger {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-block: 1px solid var(--color-hairline);
}

.rb-trust-ledger > div {
  min-width: 0;
  padding: clamp(28px, 3.5vw, 48px) var(--rb-gutter);
}

.rb-trust-ledger > div + div { border-inline-start: 1px solid var(--color-hairline); }
.rb-trust-ledger span { display: block; color: var(--color-ink-faint); font-size: 13px; }
.rb-trust-ledger strong {
  display: block;
  margin-top: 16px;
  font-family: var(--font-absans);
  font-size: clamp(24px, 2.5vw, 38px);
  font-weight: 400;
  line-height: 1.05;
  text-wrap: balance;
}

.rb-review-process { padding: clamp(64px, 8vw, 120px) var(--rb-gutter); }
.rb-review-process > h2, .rb-review-scope > h2 {
  max-width: 18ch;
  font-family: var(--font-absans);
  font-size: clamp(36px, 4.2vw, 64px);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1;
  text-wrap: balance;
}
.rb-review-steps { margin-top: clamp(48px, 6vw, 84px); border-block: 1px solid var(--color-hairline); }
.rb-review-step {
  display: grid;
  grid-template-columns: 64px minmax(180px, 0.7fr) minmax(0, 1.3fr);
  gap: 24px 40px;
  align-items: baseline;
  padding: 30px 0;
}
.rb-review-step + .rb-review-step { border-top: 1px solid var(--color-hairline); }
.rb-review-step > span { color: var(--color-ink-faint); font-variant-numeric: tabular-nums; }
.rb-review-step h3 { font-family: var(--font-absans); font-size: clamp(24px, 2.4vw, 34px); font-weight: 400; }
.rb-review-step p, .rb-review-scope p {
  max-width: 62ch;
  color: var(--color-ink-soft);
  font-size: 16px;
  line-height: 1.7;
  text-wrap: pretty;
}

.rb-review-scope { padding: clamp(64px, 8vw, 120px) var(--rb-gutter); background: var(--color-paper); }
.rb-review-scope-list { margin-top: clamp(48px, 6vw, 84px); }
.rb-review-scope-item {
  display: grid;
  grid-template-columns: minmax(220px, 0.7fr) minmax(0, 1.3fr);
  gap: 28px 64px;
  padding: 30px 0;
  border-top: 1px solid var(--color-hairline);
}
.rb-review-scope-item h3 {
  font-family: var(--font-absans);
  font-size: clamp(23px, 2.2vw, 32px);
  font-weight: 400;
  line-height: 1.08;
}

.rb-review-disclaimer {
  padding: clamp(52px, 6vw, 84px) var(--rb-gutter);
  background: var(--color-ink);
  color: #b8b8b8;
}
.rb-review-disclaimer p {
  max-width: 76ch;
  margin: 0 auto;
  font-size: 15px;
  line-height: 1.75;
  text-align: center;
  text-wrap: pretty;
}
.rb-review-disclaimer strong { color: #fff; font-weight: 500; }

.rb-refund-prose ol { margin: 16px 0 0 1.35em; list-style: decimal; }
.rb-refund-prose li > ul { margin-top: 8px; }
.rb-refund-prose section:last-child { border-bottom: 1px solid var(--color-hairline); }

.rb-comparison > div {
  max-width: none;
  margin: 0;
  padding: clamp(56px, 7vw, 104px) var(--rb-gutter);
  border-top: 1px solid var(--color-hairline);
  background: var(--color-canvas) !important;
}
.rb-comparison > div:first-of-type {
  padding-top: clamp(72px, 10vw, 148px);
  padding-bottom: clamp(52px, 7vw, 96px);
  border-top: 0;
}
.rb-comparison > div > div { max-width: none; margin-inline: 0; padding: 0; }
.rb-comparison > div:first-of-type .text-center { text-align: start; }
.rb-comparison > div:first-of-type h1 {
  max-width: 16ch;
  margin: 20px 0 0;
  background: none;
  color: var(--color-ink) !important;
  font-family: var(--font-absans);
  font-size: clamp(48px, 6.8vw, 104px);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 0.95;
}
.rb-comparison > div:first-of-type h1 + p {
  max-width: 60ch;
  margin: 28px 0 0;
  color: var(--color-ink-soft) !important;
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.6;
  text-wrap: pretty;
}
.rb-comparison .uppercase { color: var(--color-ink-faint) !important; text-transform: none; letter-spacing: 0; }
.rb-comparison h2, .rb-comparison h3 { font-family: var(--font-absans); font-weight: 400; }
.rb-comparison h2 { font-size: clamp(34px, 4vw, 58px); letter-spacing: -0.03em; line-height: 1; }
.rb-comparison h3 { font-size: clamp(22px, 2.2vw, 32px); }
.rb-comparison .text-center { text-align: start; }
.rb-comparison .mx-auto { margin-inline: 0; }
.rb-comparison .text-white,
.rb-comparison .text-life,
.rb-comparison .text-death,
.rb-comparison .text-mystic,
.rb-comparison [class*="text-ash-"] { color: var(--color-ink-soft) !important; }
.rb-comparison [class*="bg-gradient"],
.rb-comparison [class*="bg-life"],
.rb-comparison [class*="bg-death"],
.rb-comparison [class*="bg-ash-"] { background: transparent !important; }
.rb-comparison [class*="rounded"] { border-radius: 0 !important; }
.rb-comparison .grid.md\:grid-cols-2 {
  gap: 0;
  border-block: 1px solid var(--color-hairline);
}
.rb-comparison .grid.md\:grid-cols-2 > div {
  min-width: 0;
  padding: clamp(28px, 3.5vw, 48px);
  border: 0;
}
.rb-comparison .grid.md\:grid-cols-2 > div + div { border-inline-start: 1px solid var(--color-hairline); }
.rb-comparison ul { color: var(--color-ink-soft) !important; line-height: 1.65; }
.rb-comparison table { min-width: 680px; font-size: 15px; }
.rb-comparison th, .rb-comparison td { border-color: var(--color-hairline); color: var(--color-ink-soft) !important; }
.rb-comparison .overflow-x-auto { scrollbar-color: var(--color-ink-faint) var(--color-paper); }
.rb-comparison > .card { padding-block: clamp(64px, 8vw, 112px) !important; }
.rb-comparison > .card p { max-width: 60ch; color: var(--color-ink-soft) !important; line-height: 1.65; }
.rb-comparison .btn {
  border: 0;
  border-radius: 999px !important;
  background: var(--color-ink) !important;
  box-shadow: none;
  color: #fff !important;
  font-family: var(--font-absans);
  font-weight: 400;
  text-transform: capitalize;
  transform: none;
}
.rb-comparison .btn:hover { background: #303030 !important; transform: none; }

.rb-state > div:not(.rb-ascii-band) {
  max-width: none;
  margin-inline: 0;
  padding-inline: var(--rb-gutter);
}
.rb-state > div:first-of-type { padding-top: clamp(64px, 8vw, 120px); }
.rb-state [class*="bg-gradient"],
.rb-state [class*="bg-life"],
.rb-state [class*="bg-ash-"] { background: transparent !important; }
.rb-state .text-white,
.rb-state .text-light,
.rb-state .text-life,
.rb-state [class*="text-ash-"] { color: var(--color-ink-soft) !important; }
.rb-state h1, .rb-state h2, .rb-state h3 { font-family: var(--font-absans); font-weight: 400; }
.rb-state h1 {
  max-width: 18ch;
  background: none;
  color: var(--color-ink) !important;
  font-size: clamp(42px, 6vw, 88px);
  letter-spacing: -0.03em;
  line-height: 0.96;
}
.rb-state h2 { letter-spacing: -0.02em; }
.rb-state .uppercase { text-transform: none; letter-spacing: 0; }
.rb-state [class*="rounded"] { border-radius: 0 !important; }
.rb-state .card,
.rb-state [class*="border-ash"],
.rb-state [class*="border-life"] {
  border-color: var(--color-hairline) !important;
  background: transparent !important;
  box-shadow: none;
}
.rb-state .card:hover { border-color: var(--color-ink-faint) !important; box-shadow: none; transform: none; }
.rb-state .prose { max-width: 72ch; color: var(--color-ink-soft); }
.rb-state .prose :is(h2, h3, strong) { color: var(--color-ink); }
.rb-state .prose a { color: var(--color-ink); text-decoration: underline; text-underline-offset: 3px; }
.rb-state table { color: var(--color-ink-soft); }
.rb-state .btn,
.rb-state a[class*="bg-life"] {
  border: 0;
  border-radius: 999px !important;
  background: var(--color-ink) !important;
  box-shadow: none;
  color: #fff !important;
  font-family: var(--font-absans);
  font-weight: 400;
  text-transform: capitalize;
  transform: none;
}
.rb-state .btn:hover,
.rb-state a[class*="bg-life"]:hover { background: #303030 !important; transform: none; }
.rb-state .grid > .card,
.rb-state .grid > a,
.rb-state .grid > div { min-width: 0; }
.rb-state .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-3 {
  gap: 0;
  border-top: 1px solid var(--color-hairline);
}
.rb-state .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-3 > * {
  border: 0;
  border-bottom: 1px solid var(--color-hairline);
}
.rb-state .font-mono { font-family: var(--font-aspekta); font-variant-numeric: tabular-nums; }
.rb-state details { border-color: var(--color-hairline) !important; background: transparent !important; }
.rb-state svg { filter: grayscale(1); }

.rb-newsletter-panel {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(320px, 1.1fr);
  gap: clamp(48px, 8vw, 132px);
  align-items: start;
  min-height: 62vh;
  padding: clamp(72px, 10vw, 148px) var(--rb-gutter);
}
.rb-newsletter-panel h1 {
  max-width: 12ch;
  font-family: var(--font-absans);
  font-size: clamp(48px, 6.8vw, 96px);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 0.95;
  text-wrap: balance;
}
.rb-newsletter-panel > div > p {
  max-width: 52ch;
  margin-top: 28px;
  color: var(--color-ink-soft);
  font-size: 18px;
  line-height: 1.65;
  text-wrap: pretty;
}
.rb-newsletter-panel form { padding-top: 8px; }
.rb-newsletter-field label { display: block; margin-bottom: 10px; color: var(--color-ink); font-size: 15px; }
.rb-newsletter-field input {
  width: 100%;
  min-height: 52px;
  padding: 12px 14px;
  border: 1px solid var(--color-hairline);
  border-radius: 0;
  background: #fff;
  color: var(--color-ink);
  font: inherit;
}
.rb-newsletter-field input:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 2px; }
.rb-newsletter-actions { display: flex; align-items: start; flex-wrap: wrap; gap: 20px; margin-top: 24px; }
.rb-newsletter-actions input[type="submit"], .rb-newsletter-success > a {
  min-height: 48px;
  padding: 13px 26px;
  border: 0;
  border-radius: 999px;
  background: var(--color-ink);
  color: #fff;
  cursor: pointer;
  font-family: var(--font-absans);
  font-size: 17px;
  text-transform: capitalize;
}
.rb-newsletter-actions input[type="submit"]:hover, .rb-newsletter-success > a:hover { background: #303030; }
.rb-newsletter-success { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
.rb-newsletter-success > a { align-self: end; }

.rb-quiz-flow { min-height: 60vh; color: var(--color-ink); }
.rb-quiz-flow > section { padding-inline: var(--rb-gutter); }
.rb-quiz-flow > section:first-child {
  display: grid;
  align-items: center;
  min-height: calc(100dvh - 96px);
  padding-block: clamp(64px, 8vw, 112px);
  overflow: visible;
}
.rb-quiz-flow > section:first-child.hidden { display: none; }
.rb-quiz-flow > section:first-child > div {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 24px;
  max-width: none;
  margin: 0;
  padding: 0;
  text-align: start;
}
.rb-quiz-flow > section:first-child h1 {
  grid-column: 1 / 8;
  grid-row: 1 / 5;
  align-self: center;
  margin: 0;
  color: var(--color-ink) !important;
  font-family: var(--font-absans);
  font-size: clamp(44px, 7.2vw, 108px);
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 0.93;
}
.rb-quiz-flow > section:first-child h1 + p {
  grid-column: 8 / 13;
  align-self: end;
  max-width: 44ch;
  margin: 0;
  color: var(--color-ink-soft) !important;
  font-size: 18px;
  line-height: 1.65;
  text-wrap: pretty;
}
.rb-quiz-flow > section:first-child h1 + p span { display: inline; color: var(--color-ink-faint) !important; font-style: normal; }
.rb-quiz-flow > section:first-child button { grid-column: 8 / 11; justify-self: start; }
.rb-quiz-flow > section:first-child button + p { grid-column: 8 / 13; margin: 0; color: var(--color-ink-faint) !important; }
.rb-quiz-flow .text-white,
.rb-quiz-flow .text-light,
.rb-quiz-flow .text-life,
.rb-quiz-flow .text-death,
.rb-quiz-flow .text-warning,
.rb-quiz-flow .text-mystic-300,
.rb-quiz-flow [class*="text-ash-"] { color: var(--color-ink-soft) !important; }
.rb-quiz-flow [class*="bg-life"],
.rb-quiz-flow [class*="bg-mystic"],
.rb-quiz-flow [class*="bg-white"] { background: transparent !important; }
.rb-quiz-flow [class*="rounded"] { border-radius: 0 !important; }
.rb-quiz-flow [class*="shadow"] { box-shadow: none !important; }
.rb-quiz-flow h2, .rb-quiz-flow h3, .rb-quiz-flow .font-display { font-family: var(--font-absans); font-weight: 400; }
.rb-quiz-flow > section:not(:first-child) {
  min-height: 70vh;
  padding-block: clamp(56px, 7vw, 96px);
  border-top: 1px solid var(--color-hairline);
  background: var(--color-paper);
}
.rb-quiz-flow > section:not(:first-child) > div { max-width: 760px; padding: 0; }
.rb-quiz-flow button,
.rb-quiz-flow .btn {
  border-color: var(--color-hairline) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--color-ink) !important;
  transform: none !important;
}
.rb-quiz-flow button:hover,
.rb-quiz-flow button:focus-visible { border-color: var(--color-ink) !important; background: #fff !important; transform: none !important; }
.rb-quiz-flow button.is-selected { border-color: var(--color-ink) !important; background: #fff !important; }
.rb-quiz-flow > section:first-child .btn,
.rb-quiz-flow button[type="submit"] {
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--color-ink) !important;
  color: #fff !important;
  font-family: var(--font-absans);
  font-weight: 400;
  text-transform: capitalize;
}
.rb-quiz-flow > section:first-child .btn:hover,
.rb-quiz-flow button[type="submit"]:hover { background: #303030 !important; }
.rb-quiz-flow button:focus-visible,
.rb-quiz-flow a:focus-visible,
.rb-quiz-flow input:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 2px; }
.rb-quiz-flow .progress-death { background: #dcdcdc; }
.rb-quiz-flow .progress-death-fill { background: var(--color-ink) !important; }
.rb-quiz-flow [data-quiz-target="questionCard"] > div:first-child span { color: var(--color-ink-faint) !important; font-weight: 400; }
.rb-quiz-flow [data-quiz-target="killroyEmoji"] { display: none; }
.rb-quiz-flow [data-quiz-target="questionCard"] h3 { color: var(--color-ink) !important; }
.rb-quiz-flow [data-quiz-target="scoreDisplay"] {
  color: var(--color-ink) !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.rb-quiz-flow [data-quiz-target="categoryCard"] { padding-block: 10px; border-top: 1px solid var(--color-hairline); }
.rb-quiz-flow [data-quiz-target="ctaCard"] > :is(a, div),
.rb-quiz-flow [data-quiz-target="ctaAllGood"] > div {
  border-color: var(--color-hairline) !important;
  background: #fff !important;
}
.rb-quiz-flow [data-quiz-target="emailGate"] form > div:first-child { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
.rb-quiz-flow input[type="email"] {
  min-width: 0;
  border: 1px solid var(--color-hairline);
  border-radius: 0;
  background: #fff !important;
  color: var(--color-ink) !important;
}
.rb-quiz-message { padding: 16px; color: var(--color-ink); text-align: center; }
.rb-quiz-message small { display: block; margin-top: 6px; color: var(--color-ink-faint); }
.rb-quiz-message--error { border: 1px solid #a63f3f; color: #782c2c; }

@media (min-width: 768px) and (max-width: 1023px) {
  .rb-state .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-3 > *:nth-child(even) {
    border-inline-start: 1px solid var(--color-hairline);
  }
}

@media (min-width: 1024px) {
  .rb-state .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-3 > *:not(:nth-child(3n + 1)) {
    border-inline-start: 1px solid var(--color-hairline);
  }
}

@media (max-width: 760px) {
  .rb-trust-ledger { grid-template-columns: 1fr; }
  .rb-trust-ledger > div + div { border-inline-start: 0; border-top: 1px solid var(--color-hairline); }
  .rb-review-step { grid-template-columns: 38px minmax(0, 1fr); gap: 10px 18px; }
  .rb-review-step p { grid-column: 2; }
  .rb-review-scope-item { grid-template-columns: 1fr; gap: 14px; }
  .rb-comparison .grid.md\:grid-cols-2 > div + div {
    border-inline-start: 0;
    border-top: 1px solid var(--color-hairline);
  }
  .rb-state > div:not(.rb-ascii-band) { padding-inline: var(--rb-gutter); }
  .rb-newsletter-panel { grid-template-columns: 1fr; min-height: auto; }
  .rb-newsletter-success { align-items: start; }
  .rb-newsletter-success > a { justify-self: start; }
  .rb-quiz-flow > section:first-child > div { grid-template-columns: 1fr; }
  .rb-quiz-flow > section:first-child h1,
  .rb-quiz-flow > section:first-child h1 + p,
  .rb-quiz-flow > section:first-child button,
  .rb-quiz-flow > section:first-child button + p { grid-column: 1; grid-row: auto; }
  .rb-quiz-flow [data-quiz-target="categoryCard"] { flex-wrap: wrap; }
  .rb-quiz-flow [data-quiz-target="categoryCard"] > span:first-child { width: calc(100% - 72px); }
  .rb-quiz-flow [data-quiz-target="categoryCard"] > div { order: 3; flex-basis: 100%; }
  .rb-quiz-flow [data-quiz-target="emailGate"] form > div:first-child { grid-template-columns: 1fr; }
}

@media (max-width: 360px) {
  .rb-state h1 { font-size: 36px; }
  .rb-newsletter-panel h1 { font-size: 42px; }
  .rb-quiz-flow > section:first-child h1 { font-size: 40px; }
}
.purchase-workspace {
  width: min(100%, 1040px);
  margin: 0 auto;
}

.purchase-workspace--bundle { width: min(100%, 920px); }

.purchase-back {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 32px;
  color: #65655f !important;
  font-size: 13px;
}

.purchase-back:hover { color: var(--color-ink) !important; }

.purchase-header {
  max-width: 760px;
  margin-bottom: 38px;
}

.purchase-header h1 {
  margin: 0;
  font-family: var(--font-absans);
  font-size: clamp(38px, 5vw, 68px);
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 0.98;
}

.purchase-header p {
  max-width: 62ch;
  margin: 15px 0 0;
  color: #575757;
  font-size: 15px;
  line-height: 1.55;
}

.purchase-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--color-hairline);
  border-bottom: 1px solid var(--color-hairline);
}

.purchase-options--single { grid-template-columns: minmax(0, 620px); }

.purchase-option {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: clamp(26px, 4vw, 44px);
  background: var(--color-paper);
}

.purchase-option + .purchase-option { border-left: 1px solid var(--color-hairline); }
.purchase-option--bundle { background: var(--color-ink); color: #fff; }

.purchase-option__heading {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 24px;
}

.purchase-option h2,
.bundle-purchase h2 {
  margin: 0;
  font-family: var(--font-absans);
  font-size: clamp(25px, 3vw, 34px);
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1.05;
}

.purchase-option--bundle h2 { color: #fff; }

.purchase-option__heading > div > p {
  margin: 9px 0 0;
  color: #65655f;
  font-size: 13px;
  line-height: 1.45;
}

.purchase-option--bundle .purchase-option__heading > div > p { color: #b7b7b2; }

.purchase-option__price,
.bundle-purchase__price {
  flex: 0 0 auto;
  margin: 0;
  text-align: right;
}

.purchase-option__price strong,
.bundle-purchase__price strong {
  display: block;
  font-family: var(--font-absans);
  font-size: 30px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.purchase-option__price span,
.bundle-purchase__price span {
  display: block;
  margin-top: 7px;
  color: #777771;
  font-size: 11px;
}

.purchase-option--bundle .purchase-option__price strong { color: #fff; }
.purchase-option--bundle .purchase-option__price span { color: #aaa9a4; }

.purchase-option__credit {
  margin: 24px 0 0;
  padding: 12px 14px;
  background: #292927;
  color: #deded9;
  font-size: 13px;
  line-height: 1.45;
}

.purchase-benefits {
  display: grid;
  gap: 12px;
  margin: 32px 0;
  padding: 0;
  list-style: none;
  color: #494944;
  font-size: 13px;
  line-height: 1.4;
}

.purchase-option--bundle .purchase-benefits { color: #deded9; }

.purchase-benefits li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 8px;
}

.purchase-benefits li > span { font-weight: 500; }

.purchase-option__action {
  width: 100%;
  justify-content: space-between;
  margin-top: auto;
  border: 0;
  cursor: pointer;
}

.purchase-option--bundle .purchase-option__action {
  background: #fff;
  color: var(--color-ink) !important;
}

.purchase-option--bundle .purchase-option__action:hover { background: #e9e9e6; }

.purchase-option__action--secondary {
  display: flex;
  min-height: 46px;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding: 0 18px;
  border: 1px solid #cfcfca;
  border-radius: 999px;
  background: transparent;
  font-size: 14px;
  font-weight: 500;
  transition: background-color 160ms ease-out, border-color 160ms ease-out;
}

.purchase-option__action--secondary:hover { border-color: var(--color-ink); background: #fff; }

.purchase-reassurance {
  margin: 22px 0 0;
  color: #777771;
  font-size: 12px;
  text-align: center;
}

.purchase-notary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  margin-top: 42px;
  padding: 22px 0;
  border-top: 1px solid var(--color-hairline);
  border-bottom: 1px solid var(--color-hairline);
}

.purchase-notary h2 { margin: 0; font-family: var(--font-absans); font-size: 20px; font-weight: 400; }
.purchase-notary p { margin: 5px 0 0; color: #65655f; font-size: 13px; }
.purchase-notary > a { flex: 0 0 auto; font-size: 13px; font-weight: 500; }

.bundle-purchase { border-top: 1px solid var(--color-hairline); border-bottom: 1px solid var(--color-hairline); }

.bundle-purchase__summary {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 32px;
  padding: clamp(26px, 4vw, 42px);
  background: var(--color-ink);
  color: #fff;
}

.bundle-purchase__summary h2 { color: #fff; }
.bundle-purchase__summary > div > p { max-width: 56ch; margin: 10px 0 0; color: #b7b7b2; font-size: 13px; line-height: 1.5; }
.bundle-purchase__price strong { color: #fff; }
.bundle-purchase__price span { color: #aaa9a4; }

.bundle-documents { margin: 0; padding: 0 clamp(26px, 4vw, 42px); list-style: none; }

.bundle-documents li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  min-width: 0;
  padding: 20px 0;
  border-bottom: 1px solid var(--color-hairline);
}

.bundle-documents li:last-child { border-bottom: 0; }
.bundle-documents strong { color: var(--color-ink); font-family: var(--font-absans); font-size: 20px; font-weight: 400; }
.bundle-documents li > span:last-child { color: #777771; font-size: 13px; font-variant-numeric: tabular-nums; text-decoration: line-through; }

.bundle-documents__mark { display: grid; width: 18px; height: 18px; place-items: center; border: 1px solid #bcbcbc; font-size: 12px; }
.bundle-documents__mark.is-complete { border-color: var(--color-ink); background: var(--color-ink); color: #fff; }

.bundle-purchase__footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 0.8fr);
  gap: 42px;
  align-items: end;
  padding: clamp(26px, 4vw, 42px);
  background: var(--color-paper);
}

.bundle-purchase__footer .purchase-benefits { margin: 0; }

@media (max-width: 760px) {
  .purchase-options { grid-template-columns: minmax(0, 1fr); }
  .purchase-option + .purchase-option { border-top: 1px solid var(--color-hairline); border-left: 0; }
  .bundle-purchase__footer { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}

@media (max-width: 480px) {
  .purchase-option__heading,
  .bundle-purchase__summary,
  .purchase-notary { align-items: start; flex-direction: column; }

  .purchase-option__price,
  .bundle-purchase__price { text-align: left; }

  .purchase-notary > a { min-height: 44px; padding-top: 12px; }
  .bundle-documents strong { font-size: 18px; }
}
/* Contained Canvas auth shell. Scoped: .rb-auth on <body>, set by the authentication layout.
   Overrides the Dark Carnival auth-frame/auth-input classes from killswitch.css so the
   dark app pages that share those classes stay untouched. */

/* Card — the frame partial's <section>, restyled from dark glass to a hairline card. */
.rb-auth .auth-frame { width: min(100%, 460px); background: var(--color-canvas); border: 1px solid var(--color-hairline); border-radius: 18px; padding: 0; overflow: hidden; box-shadow: 0 12px 28px rgb(0 0 0 / 0.06); backdrop-filter: none; }
.rb-auth .auth-frame::before { display: none; }

.rb-auth .rb-auth-nav { display: flex; align-items: center; justify-content: space-between; padding-top: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--color-hairline); }
.rb-auth .rb-auth-nav > a { flex-shrink: 0; }

.rb-auth .rb-auth-art { height: 190px; position: relative; border-bottom: 1px solid var(--color-hairline); }
.rb-auth .rb-auth-art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%; display: block; }

.rb-auth .auth-frame__header { padding: 30px 36px 0; margin: 0; }
.rb-auth .auth-frame__title { font-family: var(--font-absans); font-weight: 400; font-size: 28px; letter-spacing: -0.02em; line-height: 1.15; color: var(--color-ink); }
.rb-auth .auth-frame__description { margin-top: 8px; font-size: 14.5px; line-height: 1.6; color: var(--color-ink-soft); }
.rb-auth .auth-frame__content { padding: 24px 36px 32px; margin: 0; }
.rb-auth .auth-frame__footer { padding: 18px 36px; margin: 0; border-top: 1px solid var(--color-hairline); background: var(--color-paper); }

/* Form primitives */
.rb-auth .auth-label { display: block; font-size: 13.5px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--color-ink-soft); }
.rb-auth .auth-input { width: 100%; border-radius: 12px; border: 1px solid var(--color-hairline); background: var(--color-canvas); color: var(--color-ink); padding: 11px 14px; font-size: 16px; transition: border-color 0.2s ease-out, box-shadow 0.2s ease-out; }
.rb-auth .auth-input::placeholder { color: var(--color-ink-faint); }
.rb-auth .auth-input:focus { outline: none; border-color: var(--color-ink); box-shadow: 0 0 0 3px rgb(0 0 0 / 0.06); background: var(--color-canvas); }
@media (min-width: 640px) { .rb-auth .auth-input { font-size: 14.5px; } }

.rb-auth .auth-divider { display: flex; align-items: center; gap: 14px; color: var(--color-ink-faint); font-size: 12.5px; }
.rb-auth .auth-divider::before, .rb-auth .auth-divider::after { content: ""; flex: 1; border-top: 1px solid var(--color-hairline); background: none; }

/* Buttons — ink pills instead of life-green */
.rb-auth .btn { font-family: var(--font-absans); border-radius: 999px; }
.rb-auth .btn-primary { background: var(--color-ink); color: #ffffff; border: 0; padding: 12px 22px; font-size: 15px; }
.rb-auth .btn-primary:hover { background: #2a2a2a; filter: none; transform: none; }
.rb-auth .btn-secondary { background: transparent; color: var(--color-ink-soft); border: 1px solid var(--color-hairline); }
.rb-auth .btn-secondary:hover { color: var(--color-ink); border-color: #c9c9c9; }

/* Readability fixes for shared partials/JS that assume a dark surface.
   The password-strength controller injects these classes; the JS also serves
   dark app pages, so remap the colors here instead of editing it. */
.rb-auth .text-ash-200 { color: var(--color-ink-soft); }
.rb-auth .text-life-400, .rb-auth .text-success-400 { color: var(--color-life-700, #1a7f37); }
.rb-auth .text-red-400 { color: #b91c1c; }
.rb-auth #error_explanation > div { background: #fdecec; color: #b91c1c; }

@media (max-width: 640px) {
  .rb-auth .rb-auth-art { height: 150px; }
}
/* Rebrand landing (Contained Canvas). Scoped: everything is .rb-* under .rb-page. */

/* One spacing scale for the whole page. --rb-gutter matches the old px-11/max-sm:px-6
   pair at both ends and smooths the middle; --rb-flow is the standard section top/bottom.
   Every section pads from these two so the vertical rhythm stays even. */
.rb-page { background: var(--color-canvas); color: var(--color-ink); font-family: var(--font-aspekta); --rb-gutter: clamp(24px, 3.2vw, 44px); --rb-flow: clamp(76px, 8.5vw, 136px); }
.rb-pad { padding-left: var(--rb-gutter); padding-right: var(--rb-gutter); }
.rb-display { font-family: var(--font-absans); font-weight: 400; }
.rb-page h1, .rb-page h2, .rb-page h3, .rb-page h4 { color: var(--color-ink); }

.rb-page ::selection { background: var(--color-ink); color: #ffffff; }
.rb-page a:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 3px; border-radius: 4px; }

.rb-frame { max-width: 1600px; margin: 0 auto; border-left: 1px solid var(--color-hairline); border-right: 1px solid var(--color-hairline); position: relative; }

.rb-ascii { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 9px; line-height: 9px; letter-spacing: 1px; color: rgb(0 0 0 / 0.10); white-space: pre; overflow: hidden; user-select: none; text-align: center; }
/* Depth layer: bigger, fainter glyphs stacked behind a fine field. */
.rb-ascii--lg { font-size: 17px; line-height: 17px; letter-spacing: 3px; color: rgb(0 0 0 / 0.045); }
.rb-ascii-stack { position: relative; }
.rb-ascii-stack > .rb-ascii { position: relative; }
.rb-ascii-stack > .rb-ascii--lg { position: absolute; inset: 0; display: grid; place-items: center; }
/* Hard cap. The glyph rows are decorative, and without a ceiling the band grows with
   whatever row count a caller passes (or with any line-height the cascade hands it). */
.rb-ascii-band { border-bottom: 1px solid var(--color-hairline); padding: 8px 0 6px; height: 72px; overflow: hidden; }
.rb-ascii-band--bottom { border-top: 1px solid var(--color-hairline); border-bottom: 0; }

.rb-tick { position: absolute; font-family: ui-monospace, Menlo, monospace; font-size: 12px; color: #c9c9c9; transform: translate(-50%, -50%); pointer-events: none; }

.rb-nav-logo { display: block; width: auto; height: 47px; }
.rb-nav-mark { display: none; width: auto; height: 40px; }
.rb-nav .rb-pill { flex-shrink: 0; white-space: nowrap; }

.rb-pill { font-family: var(--font-absans); border-radius: 999px; padding: 14px 28px; font-size: 16px; display: inline-block; line-height: 1.2; }
.rb-pill--lg { padding: 18px 36px; font-size: 18.5px; }
.rb-pill--dark { background: var(--color-ink); color: #ffffff; }
.rb-pill--ghost { border: 1px solid var(--color-hairline); color: var(--color-ink-soft); background: transparent; transition: color 0.2s ease-out, border-color 0.2s ease-out; }
.rb-pill--ghost:hover { color: var(--color-ink); border-color: #c9c9c9; }
@media (max-width: 640px) { .rb-pill--lg { padding: 16px 30px; font-size: 17px; } }

.rb-footer { border-top: 1px solid var(--color-hairline); padding: 48px var(--rb-gutter) 56px; color: var(--color-ink-faint); font-size: 13px; }
.rb-footer-phrase { width: 100%; text-wrap: balance; }
.rb-footer-main, .rb-footer-meta { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.rb-footer-brand img { display: block; width: auto; height: 42px; }
.rb-footer-nav { display: flex; align-items: center; flex-wrap: wrap; justify-content: end; gap: 14px 28px; font-size: 15px; color: var(--color-ink-soft); }
.rb-footer a { color: inherit; transition: color 0.2s ease-out; }
.rb-footer a:hover { color: var(--color-ink); }
.rb-footer-meta { margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--color-hairline); }
@media (max-width: 640px) {
  .rb-nav-logo { display: none; }
  .rb-nav-mark { display: block; }
  .rb-footer { padding-top: 40px; padding-bottom: 44px; }
  .rb-footer-main, .rb-footer-meta { align-items: start; flex-direction: column; gap: 22px; }
  .rb-footer-brand img { height: 36px; }
  .rb-footer-nav { justify-content: start; gap: 14px 22px; }
  .rb-footer-meta { margin-top: 28px; }
}

/* Public content pages use the same contained frame as the landing, but trade
   product storytelling for readable editorial and legal text. */
.rb-public-hero { padding: clamp(72px, 10vw, 148px) var(--rb-gutter) clamp(48px, 6vw, 88px); }
.rb-public-hero h1 { max-width: 14ch; font-family: var(--font-absans); font-size: clamp(48px, 6.8vw, 104px); font-weight: 400; letter-spacing: -0.03em; line-height: 0.95; text-wrap: balance; }
.rb-public-hero h1 span { display: block; margin-top: 0.16em; font-size: 0.55em; letter-spacing: -0.02em; }
.rb-about-hero h1 { max-width: 22ch; }
.rb-public-hero p { max-width: 54ch; margin-top: 28px; color: var(--color-ink-soft); font-size: clamp(17px, 1.5vw, 21px); line-height: 1.6; text-wrap: pretty; }
.rb-public-art { margin: 0 var(--rb-gutter); height: clamp(240px, 34vw, 460px); border-radius: 16px; overflow: hidden; position: relative; }
.rb-public-art img { width: 100%; height: 100%; display: block; object-fit: cover; }
.rb-guide-atlas img { --atlas-x: 0px; --atlas-y: 0px; transform: scale(1.035) translate3d(var(--atlas-x), var(--atlas-y), 0); transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
.rb-guide-atlas-prompt { position: absolute; top: 20px; left: 22px; z-index: 2; padding: 7px 9px; background: rgb(12 12 12 / 0.74); color: #f6f6f3; font-size: 12px; }
.rb-guide-atlas-nav { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.rb-guide-atlas-link { position: absolute; display: grid; grid-template-columns: 12px auto; gap: 1px 8px; padding: 9px 11px; background: rgb(12 12 12 / 0.78); color: #f6f6f3; pointer-events: auto; transition: background-color 0.2s ease-out, color 0.2s ease-out; }
.rb-guide-atlas-link > span { grid-row: 1 / 3; font-family: ui-monospace, Menlo, monospace; font-size: 14px; line-height: 1.2; }
.rb-guide-atlas-link strong { color: inherit; font-size: 13px; font-weight: 500; line-height: 1.2; }
.rb-guide-atlas-link small { color: rgb(246 246 243 / 0.65); font-size: 10px; line-height: 1.2; }
.rb-guide-atlas-link:hover, .rb-guide-atlas-link:focus-visible { background: #f6f6f3; color: var(--color-ink); }
.rb-guide-atlas-link:hover small, .rb-guide-atlas-link:focus-visible small { color: var(--color-ink-faint); }
.rb-guide-atlas-link--start { left: 16%; bottom: 19%; }
.rb-guide-atlas-link--states { left: 49%; top: 31%; }
.rb-guide-atlas-link--compare { right: 10%; bottom: 25%; }
.rb-guide-atlas-short { display: none; }
.rb-public-main { padding: clamp(48px, 6vw, 88px) var(--rb-gutter); }
.rb-public-prose { max-width: none; color: var(--color-ink-soft); font-size: 16.5px; line-height: 1.75; }
.rb-public-prose > * + * { margin-top: 0; }
.rb-public-prose > p:first-child { margin-bottom: clamp(42px, 5vw, 72px); color: var(--color-ink-faint); font-size: 13px; }
.rb-public-prose section { display: grid; grid-template-columns: minmax(220px, 0.75fr) minmax(0, 1.6fr); column-gap: clamp(48px, 8vw, 140px); padding: clamp(42px, 5vw, 72px) 0; border-top: 1px solid var(--color-hairline); }
.rb-public-prose section > :not(h2) { grid-column: 2; min-width: 0; }
.rb-public-prose h2 { grid-column: 1; grid-row: 1; margin: 0; font-family: var(--font-absans); font-size: clamp(27px, 2.6vw, 42px); font-weight: 400; letter-spacing: -0.025em; line-height: 1.04; }
.rb-public-prose h3 { margin: 28px 0 12px; font-family: var(--font-aspekta); font-size: 17px; font-weight: 500; letter-spacing: 0; line-height: 1.4; }
.rb-public-prose strong { color: var(--color-ink); font-weight: 500; }
.rb-public-prose a { color: var(--color-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.rb-public-prose ul { margin: 16px 0 0 1.35em; list-style: disc; }
.rb-public-prose li { padding: 4px 0; }
.rb-legal-prose > p:first-child { margin-bottom: clamp(28px, 3vw, 44px); }
.rb-legal-prose section { row-gap: 14px; padding: clamp(32px, 3.8vw, 52px) 0; }
.rb-legal-prose h2 span { display: block; margin-top: 9px; color: var(--color-ink-faint); font-family: var(--font-aspekta); font-size: 14px; font-weight: 400; letter-spacing: 0; line-height: 1.4; }
.rb-legal-prose h3 { margin: 18px 0 0; }
.rb-legal-prose h3 span { display: block; margin-top: 2px; color: var(--color-ink-faint); font-size: 13px; font-weight: 400; }
.rb-legal-prose ul { margin-top: 0; }
.rb-public-meta { color: var(--color-ink-faint); font-size: 13px; }
.rb-guides { margin-top: clamp(56px, 7vw, 96px); border-top: 1px solid var(--color-hairline); }
.rb-guide-filter { display: flex; flex-wrap: wrap; gap: 12px 28px; padding: 28px var(--rb-gutter); border-bottom: 1px solid var(--color-hairline); }
.rb-guide-filter a { color: var(--color-ink-faint); font-size: 14px; }
.rb-guide-filter a span { margin-left: 5px; color: #b5b5b5; font-size: 11px; }
.rb-guide-filter a[aria-current="page"] { color: var(--color-ink); font-weight: 500; }
.rb-guide-featured, .rb-guide-index { padding: clamp(64px, 8vw, 112px) var(--rb-gutter); }
.rb-guide-featured > header, .rb-guide-index > header { display: flex; align-items: end; justify-content: space-between; gap: 32px; margin-bottom: 32px; }
.rb-guide-featured > header h2, .rb-guide-index > header h2 { font-family: var(--font-absans); font-size: clamp(34px, 3.8vw, 58px); font-weight: 400; letter-spacing: -0.03em; line-height: 1; }
.rb-guide-featured > header p, .rb-guide-index > header p { color: var(--color-ink-faint); font-size: 14px; }
.rb-guide-index-tools { display: flex; align-items: end; flex-direction: column; gap: 8px; }
.rb-guide-surprise { color: var(--color-ink); font-size: 14px; }
.rb-guide-surprise::after { content: " ↗"; display: inline-block; transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1); }
.rb-guide-surprise:hover::after, .rb-guide-surprise:focus-visible::after { transform: translate(2px, -2px); }
.rb-guide-featured-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.8fr); border-top: 1px solid var(--color-hairline); border-bottom: 1px solid var(--color-hairline); }
.rb-guide-featured-item { min-width: 0; padding: clamp(32px, 4vw, 56px); }
.rb-guide-featured-item:first-child { grid-row: span 2; padding-left: 0; }
.rb-guide-featured-item:not(:first-child) { border-left: 1px solid var(--color-hairline); }
.rb-guide-featured-item:nth-child(2) { border-bottom: 1px solid var(--color-hairline); }
.rb-guide-featured-item > span, .rb-guide-featured-item small, .rb-guide-row small { color: var(--color-ink-faint); font-size: 12px; }
.rb-guide-featured-item h3 { margin-top: clamp(38px, 6vw, 92px); font-family: var(--font-absans); font-size: clamp(27px, 3vw, 48px); font-weight: 400; letter-spacing: -0.025em; line-height: 1.03; }
.rb-guide-featured-item h3 a { color: var(--color-ink); }
.rb-guide-featured-item:not(:first-child) h3 { margin-top: 24px; font-size: clamp(23px, 2vw, 31px); }
.rb-guide-featured-item p { max-width: 60ch; margin: 18px 0 28px; color: var(--color-ink-soft); font-size: 15px; line-height: 1.6; }
.rb-guide-index { border-top: 1px solid var(--color-hairline); }
.rb-guide-row { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; gap: 18px 32px; padding: 30px 0; border-top: 1px solid var(--color-hairline); color: inherit; position: relative; transition: background-color 0.18s ease-out; }
.rb-guide-row:hover, .rb-guide-row:has(a:focus-visible) { background: var(--color-paper); }
.rb-guide-number { color: #b5b5b5; font-size: 12px; padding-top: 5px; position: relative; transition: color 0.18s ease-out; }
.rb-guide-number::after { content: "↗"; position: absolute; top: 3px; left: 0; color: var(--color-ink); font-size: 15px; opacity: 0; transform: translate(-4px, 4px); transition: opacity 0.18s ease-out, transform 0.22s cubic-bezier(0.16, 1, 0.3, 1); }
.rb-guide-row:hover .rb-guide-number, .rb-guide-row:has(a:focus-visible) .rb-guide-number { color: transparent; }
.rb-guide-row:hover .rb-guide-number::after, .rb-guide-row:has(a:focus-visible) .rb-guide-number::after { opacity: 1; transform: translate(0, 0); }
.rb-guide-row h3 { font-family: var(--font-absans); font-size: clamp(22px, 2.1vw, 32px); font-weight: 400; letter-spacing: -0.02em; line-height: 1.1; }
.rb-guide-row h3 a { color: var(--color-ink); }
.rb-guide-row h3 a::after { content: ""; position: absolute; inset: 0; }
.rb-guide-row small + h3 { margin-top: 8px; }
.rb-guide-row p { margin-top: 10px; max-width: 68ch; color: var(--color-ink-soft); font-size: 15px; line-height: 1.6; }
.rb-guide-row time, .rb-guide-row .rb-guide-reading { color: var(--color-ink-faint); font-size: 13px; white-space: nowrap; }
.rb-guide-reading { align-self: start; display: flex; flex-direction: column; gap: 7px; text-align: right; }
.rb-guide-empty { padding: 40px 0; border-top: 1px solid var(--color-hairline); color: var(--color-ink-soft); }
.rb-guide-pages { margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--color-hairline); }
.rb-guide-pages .pagy { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; }
.rb-guide-pages .pagy a { display: inline-flex; min-width: 38px; height: 38px; padding: 0 12px; align-items: center; justify-content: center; border: 1px solid var(--color-hairline); border-radius: 999px; color: var(--color-ink-soft); font-size: 13px; transition: color 0.18s ease-out, border-color 0.18s ease-out; }
.rb-guide-pages .pagy a:hover { color: var(--color-ink); border-color: #c9c9c9; }
.rb-guide-pages .pagy a[aria-disabled="true"] { border-color: transparent; color: #c5c5c5; cursor: default; }
.rb-guide-pages .pagy a.gap { border-color: transparent; color: var(--color-ink-faint); cursor: default; }
.rb-guide-pages .pagy a.current { border-color: var(--color-ink); background: var(--color-ink); color: #ffffff; font-weight: 600; }
.rb-article-pager { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 64px); padding: clamp(40px, 5vw, 64px) var(--rb-gutter); border-top: 1px solid var(--color-hairline); }
.rb-article-pager-link small { display: block; margin-bottom: 10px; color: var(--color-ink-faint); font-size: 13px; }
.rb-article-pager-link strong { display: block; max-width: 26ch; color: var(--color-ink); font-family: var(--font-absans); font-size: clamp(20px, 1.9vw, 28px); font-weight: 400; letter-spacing: -0.018em; line-height: 1.12; text-wrap: balance; transition: opacity 0.18s ease-out; }
.rb-article-pager-link:hover strong, .rb-article-pager-link:focus-visible strong { opacity: 0.55; }
.rb-article-pager-link--older { justify-self: end; text-align: right; }
.rb-article-pager-link--older strong { margin-left: auto; }
.rb-article-header { max-width: 1160px; padding: clamp(72px, 9vw, 132px) var(--rb-gutter) clamp(48px, 6vw, 80px); }
.rb-article-header h1 { max-width: 18ch; margin-top: 24px; font-family: var(--font-absans); font-size: clamp(42px, 5vw, 76px); font-weight: 400; letter-spacing: -0.03em; line-height: 0.98; text-wrap: balance; }
.rb-article-header > div { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 26px; color: var(--color-ink-faint); font-size: 14px; }
.rb-article-image { height: clamp(280px, 38vw, 560px); margin: 0 var(--rb-gutter); border-radius: 16px; overflow: hidden; position: relative; }
.rb-article-image img { width: 100%; height: 100%; display: block; object-fit: cover; }
.rb-article-layout { display: grid; grid-template-columns: minmax(180px, 0.55fr) minmax(0, 1.7fr); gap: clamp(48px, 8vw, 132px); padding: clamp(64px, 9vw, 128px) var(--rb-gutter); }
.rb-article-rail { color: var(--color-ink-soft); font-size: 13px; }
.rb-article-rail p { padding: 16px 0; border-top: 1px solid var(--color-hairline); }
.rb-article-rail p span { display: block; margin-bottom: 5px; color: var(--color-ink-faint); }
.rb-article-rail a { display: inline-block; margin-top: 26px; color: var(--color-ink); }
.rb-article-body { width: min(100%, 70ch); color: var(--color-ink-soft); font-size: clamp(17px, 1.2vw, 19px); line-height: 1.72; }
.rb-article-body > p:first-child { margin-top: 0; color: var(--color-ink); font-family: var(--font-absans); font-size: clamp(21px, 1.8vw, 27px); letter-spacing: -0.012em; line-height: 1.48; }
.rb-article-body h1, .rb-article-body h2, .rb-article-body h3 { color: var(--color-ink); font-family: var(--font-absans); font-weight: 400; text-wrap: balance; }
.rb-article-body h1, .rb-article-body h2 { max-width: 21ch; margin-top: clamp(72px, 7vw, 104px); font-size: clamp(34px, 3vw, 46px); letter-spacing: -0.025em; line-height: 1.04; }
.rb-article-body h3 { margin-top: clamp(44px, 4.5vw, 64px); font-size: clamp(24px, 2.1vw, 31px); letter-spacing: -0.018em; line-height: 1.1; }
.rb-article-body p, .rb-article-body ul, .rb-article-body ol, .rb-article-body blockquote, .rb-article-body table { margin-top: 24px; }
.rb-article-body h2 + p, .rb-article-body h3 + p { margin-top: 18px; }
.rb-article-body hr { height: 0; margin: 0; border: 0; }
.rb-article-body a { color: var(--color-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.rb-article-body strong { color: var(--color-ink); font-weight: 600; }
.rb-article-body ul, .rb-article-body ol { padding-left: 1.25em; }
.rb-article-body ul { list-style: disc; }
.rb-article-body ol { list-style: decimal; }
.rb-article-body li { padding-left: 0.25em; }
.rb-article-body li + li { margin-top: 7px; }
.rb-article-body li::marker { color: var(--color-ink-faint); }
.rb-article-body blockquote { max-width: 31ch; color: var(--color-ink); font-family: var(--font-absans); font-size: clamp(24px, 2.2vw, 34px); letter-spacing: -0.018em; line-height: 1.28; }
.rb-article-body blockquote p { margin-top: 0; }
.rb-article-body table { width: 100%; display: block; overflow-x: auto; border-collapse: collapse; color: var(--color-ink-soft); font-size: 15px; line-height: 1.5; }
.rb-article-body th, .rb-article-body td { min-width: 132px; padding: 14px 22px 14px 0; border-bottom: 1px solid var(--color-hairline); text-align: left; vertical-align: top; }
.rb-article-body th { color: var(--color-ink); font-weight: 600; }
.rb-article-body p > strong:only-child > a { display: inline-block; color: var(--color-ink); font-family: var(--font-absans); font-size: 20px; font-weight: 500; text-decoration: none; }
.rb-related-guides { border-top: 1px solid var(--color-hairline); }

/* About: one narrative artifact, then a plain-spoken ledger. */
.rb-about-origin { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
.rb-about-art { min-height: 680px; position: relative; overflow: hidden; }
.rb-about-art > img { width: 100%; height: 100%; display: block; object-fit: cover; }
.rb-about-art .rb-skully { position: absolute; right: 24px; bottom: 24px; width: 78px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.rb-about-art .rb-skully svg { width: 100%; height: auto; display: block; }
.rb-about-copy { padding: clamp(64px, 8vw, 120px) clamp(40px, 6vw, 92px); }
.rb-about-copy h2, .rb-about-values h2, .rb-about-belief h2, .rb-about-contact h2 { font-family: var(--font-absans); font-weight: 400; letter-spacing: -0.03em; line-height: 1.02; }
.rb-about-copy h2 { max-width: 12ch; margin-bottom: 42px; font-size: clamp(38px, 4vw, 62px); }
.rb-about-copy p { max-width: 58ch; margin-top: 22px; color: var(--color-ink-soft); font-size: 16.5px; line-height: 1.7; }
.rb-about-copy strong { color: var(--color-ink); font-weight: 500; }
.rb-about-values > header { padding: clamp(64px, 7vw, 104px) var(--rb-gutter) 40px; }
.rb-about-values > header h2 { width: 100%; font-size: clamp(36px, 4.2vw, 64px); }
.rb-about-value { display: grid; grid-template-columns: 80px minmax(190px, 0.65fr) minmax(0, 1.35fr); gap: 24px 48px; padding: 34px var(--rb-gutter); border-top: 1px solid var(--color-hairline); align-items: baseline; }
.rb-about-value > span { color: var(--color-ink-faint); font-size: 12px; }
.rb-about-value h3 { font-family: var(--font-absans); font-size: clamp(24px, 2.3vw, 34px); font-weight: 400; letter-spacing: -0.02em; }
.rb-about-value p { max-width: 58ch; color: var(--color-ink-soft); font-size: 15.5px; line-height: 1.65; }
.rb-about-belief { padding: clamp(76px, 9vw, 136px) var(--rb-gutter); text-align: center; }
.rb-about-belief > p { width: 100%; margin-bottom: clamp(28px, 3vw, 44px); color: #8f8f8f; font-size: 14px; }
.rb-about-belief h2 { max-width: 20ch; margin: 0 auto; color: #fff; font-size: clamp(40px, 5.2vw, 80px); }
.rb-about-belief > div { display: flex; align-items: center; flex-direction: column; gap: 28px; max-width: 720px; margin: clamp(36px, 4vw, 56px) auto 0; }
.rb-about-belief > div p { max-width: 52ch; color: #adadad; font-size: 16px; line-height: 1.6; }
.rb-about-action { flex-shrink: 0; padding: 14px 26px; border-radius: 999px; background: #f5f5f5; color: var(--color-ink); font-family: var(--font-absans); font-size: 18px; transition: background-color 0.18s ease-out; }
.rb-about-action:hover { background: #dedede; }
.rb-about-contact { padding: clamp(52px, 6vw, 80px) var(--rb-gutter); text-align: center; }
.rb-about-contact h2 { font-size: clamp(30px, 3vw, 42px); }
.rb-about-contact header p { max-width: 42ch; margin: 12px auto 0; color: var(--color-ink-soft); font-size: 15px; line-height: 1.6; }
.rb-about-socials { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 10px; margin-top: 24px; color: var(--color-ink-faint); font-size: 14px; line-height: 1.5; }
.rb-about-socials a { color: var(--color-ink); white-space: nowrap; transition: color 0.18s ease-out; }
.rb-about-socials a:hover, .rb-about-socials a:focus-visible { color: var(--color-ink-faint); }

@media (max-width: 900px) {
  .rb-public-prose section { grid-template-columns: 1fr; gap: 24px; }
  .rb-public-prose section > :not(h2), .rb-public-prose h2 { grid-column: 1; }
  .rb-guide-featured-grid { grid-template-columns: 1fr; }
  .rb-guide-featured-item:first-child { grid-row: auto; padding-left: clamp(32px, 4vw, 56px); }
  .rb-guide-featured-item:not(:first-child) { border-left: 0; border-top: 1px solid var(--color-hairline); }
  .rb-guide-featured-item:nth-child(2) { border-bottom: 0; }
  .rb-article-layout, .rb-about-origin, .rb-about-belief { grid-template-columns: 1fr; }
  .rb-article-rail { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
  .rb-article-rail a { grid-column: 1 / -1; }
  .rb-about-art { min-height: 440px; }
  .rb-about-belief > div { grid-column: 1; }
}
@media (max-width: 640px) {
  .rb-public-hero h1 { max-width: 18ch; font-size: clamp(32px, 8.8vw, 42px); }
  .rb-guides-hero h1 { max-width: 14ch; }
  .rb-guide-atlas-prompt { top: 14px; left: 14px; }
  .rb-guide-atlas-nav { inset: auto 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: rgb(12 12 12 / 0.86); }
  .rb-guide-atlas-link { position: static; min-width: 0; padding: 11px 8px; background: transparent; }
  .rb-guide-atlas-link + .rb-guide-atlas-link { border-left: 1px solid rgb(246 246 243 / 0.2); }
  .rb-guide-atlas-link small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .rb-guide-atlas-full { display: none; }
  .rb-guide-atlas-short { display: inline; }
  .rb-guide-featured > header, .rb-guide-index > header { align-items: start; flex-direction: column; gap: 12px; }
  .rb-guide-index-tools { align-items: start; }
  .rb-guide-row { grid-template-columns: 34px minmax(0, 1fr); gap: 10px 14px; }
  .rb-guide-reading { grid-column: 2; flex-direction: row; gap: 14px; text-align: left; white-space: normal; }
  .rb-article-header > div { flex-direction: column; gap: 4px; }
  .rb-article-image { aspect-ratio: 4 / 3; height: auto; }
  .rb-article-layout { gap: 42px; }
  .rb-article-pager { grid-template-columns: 1fr; gap: 32px; }
  .rb-article-pager-link--older { justify-self: start; text-align: left; }
  .rb-article-pager-link--older strong { margin-left: 0; }
  .rb-article-rail { grid-template-columns: 1fr; }
  .rb-article-rail a { grid-column: 1; }
  .rb-about-art { min-height: 340px; }
  .rb-about-value { grid-template-columns: 38px 1fr; gap: 12px 18px; }
  .rb-about-value p { grid-column: 2; }
  .rb-about-belief > div { align-items: center; }
}

@media (prefers-reduced-motion: reduce) {
  .rb-guide-atlas img, .rb-guide-surprise::after, .rb-guide-number, .rb-guide-number::after { transition: none; }
}

/* Hero: the still is the base layer and doubles as poster, mobile art, and the
   reduced-motion fallback, so we ship one image instead of three.
   The <source media> on the <video> is what keeps the 1.3MB mp4 off phones —
   no matching source means no fetch at all, not just a hidden element. */
.rb-hero-band { border-radius: 18px; overflow: hidden; position: relative; height: 46vh; min-height: 340px; background: var(--color-paper); }
.rb-hero-still { position: absolute; inset: 0; }
.rb-hero-band video, .rb-hero-band img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rb-hero-band video { position: relative; z-index: 1; }
@media (max-width: 900px) { .rb-hero-band video { display: none; } }
@media (prefers-reduced-motion: reduce) { .rb-hero-band video { display: none; } }

.rb-h1 { font-size: clamp(72px, 8.5vw, 132px); letter-spacing: -0.028em; line-height: 0.95; }
.rb-h2 { font-size: clamp(40px, 3.6vw, 58px); letter-spacing: -0.02em; line-height: 1.03; }
.rb-lede { max-width: 38ch; }
.rb-hero-copy { width: min(100%, 760px); text-wrap: pretty; }

/* Even out ragged line breaks so headlines don't leave a one-word last line. */
.rb-h1, .rb-h2, .rb-steps, .rb-pricing-big, .rb-ledger-name { text-wrap: balance; }

.rb-section { border-top: 1px solid var(--color-hairline); position: relative; }

/* Section value rhythm. The page was one long stretch of white; these two
   modifiers break it into paper / ink beats so section changes register. */
.rb-section--paper { background: var(--color-paper); isolation: isolate; }
.rb-section--paper::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.055;
  mix-blend-mode: multiply;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(/%23n)'/%3E%3C/svg%3E") repeat;
  background-size: 180px 180px;
}
.rb-section--paper > * { position: relative; z-index: 1; }
.rb-section--ink { background: var(--color-ink); color: #f5f5f5; border-top-color: var(--color-ink); }
.rb-section--ink, .rb-feature--ink { isolation: isolate; }
.rb-section--ink::before, .rb-feature--ink::before, .rb-feature--ink .rb-feature-art::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.055;
  mix-blend-mode: screen;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(/%23n)'/%3E%3C/svg%3E") repeat;
  background-size: 180px 180px;
}
.rb-section--ink > *, .rb-feature--ink > *, .rb-feature--ink .rb-feature-art > * { position: relative; z-index: 1; }
.rb-page .rb-section--ink h2, .rb-page .rb-section--ink h3 { color: #ffffff; }
/* The stakes markup colors its prose with Tailwind ink utilities; re-point them
   rather than rewriting every paragraph to a bespoke class. */
.rb-section--ink .text-ink-soft { color: #b0b0b0; }
.rb-section--ink .text-ink-faint { color: #8d8d8d; }
.rb-section--ink .rb-why-stats { border-left-color: #2f2f2f; }
@media (max-width: 900px) { .rb-section--ink .rb-why-stats { border-top-color: #2f2f2f; } }

/* Standard section header: headline left, supporting line right, baselines aligned.
   Replaces the per-section pt-32/pb-16/pb-12 mix that made the rhythm uneven. */
.rb-sec-head { padding: var(--rb-flow) var(--rb-gutter) clamp(40px, 4.5vw, 64px); display: flex; align-items: end; justify-content: space-between; gap: clamp(32px, 5vw, 80px); }
.rb-sec-head > p { max-width: 38ch; font-size: 17px; line-height: 1.6; color: var(--color-ink-soft); }
.rb-sec-head--solo { padding-bottom: clamp(28px, 3vw, 40px); }
@media (max-width: 900px) { .rb-sec-head { flex-direction: column; align-items: start; gap: 24px; } }

/* Three-column hairline grid (cells share hairlines, no gaps). */
.rb-cols { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--color-hairline); }
.rb-cell { border-left: 1px solid var(--color-hairline); }
.rb-cell:first-child { border-left: 0; }
@media (max-width: 900px) { .rb-cols { grid-template-columns: 1fr; } .rb-cell { border-left: 0; border-top: 1px solid var(--color-hairline); } .rb-cell:first-child { border-top: 0; } }

/* Skully mark ships neon green for the dark app; ink it on the white canvas.
   path-only + !important: the toggle controller re-applies fill as an inline style,
   and the pill's fill <rect> must stay green so the click easter egg still pops. */
.rb-skully path[fill="#14ECA4"] { fill: var(--color-ink) !important; }
.rb-skully [stroke="#14ECA4"] { stroke: var(--color-ink); }

/* Stakes — one enormous stat, the rest as marginalia in a side rail. */
.rb-stakes { display: grid; grid-template-columns: 1.35fr 1fr; border-top: 1px solid var(--color-hairline); }
.rb-stakes-side { border-left: 1px solid var(--color-hairline); display: flex; flex-direction: column; }
.rb-stat-giant { font-family: var(--font-absans); font-size: clamp(104px, 12.5vw, 200px); letter-spacing: -0.03em; line-height: 0.92; }
.rb-stat-small { font-family: var(--font-absans); font-size: clamp(30px, 2.6vw, 42px); letter-spacing: -0.02em; line-height: 1; }
@media (max-width: 900px) {
  .rb-stakes { grid-template-columns: 1fr; }
  .rb-stakes-side { border-left: 0; border-top: 1px solid var(--color-hairline); }
}

/* Ledger — documents as full-width inventory rows with a dotted leader to the price. */
.rb-ledger-row { display: block; padding: clamp(48px, 5.5vw, 76px) var(--rb-gutter) clamp(56px, 6vw, 84px); border-top: 1px solid var(--color-hairline); position: relative; color: inherit; transition: background 0.2s ease-out; }
.rb-ledger-row:hover { background: var(--color-paper); }
.rb-ledger-line { display: flex; align-items: baseline; gap: 20px; }
.rb-ledger-name { font-family: var(--font-absans); font-size: clamp(30px, 3.4vw, 52px); letter-spacing: -0.02em; line-height: 1.05; }
.rb-leader { flex: 1; min-width: 40px; border-bottom: 2px dotted #c9c9c9; transform: translateY(-0.45em); }
.rb-ledger-price { font-family: var(--font-absans); font-size: clamp(22px, 2.2vw, 34px); letter-spacing: -0.015em; white-space: nowrap; }
.rb-ledger-desc { max-width: 74ch; text-wrap: pretty; }
/* .rb-art.rb-ledger-art: the extra specificity keeps .rb-art's position:relative from winning. */
.rb-art.rb-ledger-art { position: absolute; display: block; right: 220px; top: 50%; width: 230px; height: 150px; transform: translateY(-46%) rotate(-3.5deg); opacity: 0; transition: opacity 0.25s ease-out, transform 0.25s ease-out; pointer-events: none; z-index: 1; box-shadow: 0 14px 36px rgb(0 0 0 / 0.22); }
.rb-ledger-row:hover .rb-ledger-art { opacity: 1; transform: translateY(-50%) rotate(-2deg); }
@media (hover: none), (max-width: 900px) {
  .rb-art.rb-ledger-art { display: none; }
  .rb-ledger-line { flex-wrap: wrap; gap: 8px 16px; }
  .rb-leader { display: none; }
}
@media (prefers-reduced-motion: reduce) { .rb-ledger-art, .rb-ledger-row { transition: none; } }

/* Steps — one typographic strip instead of three cards, ascii field in the right margin. */
.rb-steps-block { padding: var(--rb-flow) var(--rb-gutter); }
.rb-steps-kicker { width: max-content; max-width: 100%; white-space: nowrap; }
.rb-steps { font-size: clamp(30px, 3.6vw, 56px); letter-spacing: -0.02em; line-height: 1.18; white-space: nowrap; }
.rb-step-arrow { color: #c9c9c9; padding: 0 0.12em; }
.rb-steps-foot { margin-top: clamp(32px, 4vw, 48px); display: flex; align-items: center; justify-content: flex-end; }
.rb-steps-ascii { position: absolute; right: 44px; top: 50%; transform: translateY(-50%); pointer-events: none; }
@media (max-width: 1150px) { .rb-steps { white-space: normal; max-width: 30ch; } .rb-steps-ascii { display: none; } }

/* Objections — three answers in the shared-hairline column grid. */
.rb-faq .rb-cell { padding: clamp(34px, 4vw, 52px) clamp(24px, 2.6vw, 40px) clamp(52px, 6.5vw, 84px); }
.rb-page .rb-faq h3 { font-family: var(--font-absans); font-size: clamp(21px, 1.9vw, 27px); letter-spacing: -0.02em; line-height: 1.12; margin-bottom: 18px; max-width: 18ch; }
.rb-faq p { color: var(--color-ink-soft); font-size: 15.5px; line-height: 1.65; }

.rb-art { border-radius: 14px; overflow: hidden; position: relative; }
.rb-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rb-scanlines { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: overlay; background: repeating-linear-gradient(0deg, rgb(0 0 0 / 0.14) 0 1px, transparent 1px 3px); }

/* Gallery — the Claesz painting hung like museum wall art, ascii fields in the side margins. */
.rb-gallery-figure { position: relative; }
.rb-gallery-frame { background: #ffffff; border: 1px solid var(--color-hairline); border-radius: 6px; padding: 16px; box-shadow: 0 18px 40px rgb(0 0 0 / 0.12); }
.rb-gallery-frame img { border-radius: 2px; width: 100%; display: block; }
.rb-wall-label { display: inline-block; position: relative; z-index: 2; margin: -22px 0 0 26px; border: 1px solid var(--color-hairline); padding: 10px 16px; font-size: 12px; line-height: 1.5; color: var(--color-ink-faint); text-align: left; background: #ffffff; }

.rb-why { display: grid; grid-template-columns: 1fr 1fr; }
.rb-why-art { padding: clamp(20px, 3vw, 40px) clamp(40px, 5vw, 80px) clamp(72px, 9vw, 128px); display: flex; flex-direction: column; justify-content: center; gap: 28px; }
.rb-why-stats { border-left: 1px solid var(--color-hairline); padding: clamp(20px, 3vw, 40px) clamp(40px, 5vw, 80px) clamp(72px, 9vw, 128px); display: flex; flex-direction: column; justify-content: center; gap: 48px; }
.rb-why-stats p { max-width: 50ch; text-wrap: pretty; }
@media (max-width: 900px) {
  .rb-why { grid-template-columns: 1fr; }
  .rb-why-stats { border-left: 0; border-top: 1px solid var(--color-hairline); }
}

.rb-pricing-card { background: var(--color-ink); color: #f5f5f5; border-radius: 20px; padding: 64px; display: flex; justify-content: space-between; align-items: center; gap: 40px; position: relative; overflow: hidden; flex-wrap: wrap; }
.rb-pricing-card .rb-ascii { color: rgb(255 255 255 / 0.10); position: absolute; right: 24px; top: 50%; transform: translateY(-50%); }
.rb-pricing-card .rb-ascii--lg { color: rgb(255 255 255 / 0.05); right: 80px; }
.rb-pricing-big { font-family: var(--font-absans); font-size: clamp(44px, 4.2vw, 66px); letter-spacing: -0.02em; line-height: 1.05; }

.rb-h2--story { font-size: clamp(44px, 5.4vw, 86px); line-height: 0.94; letter-spacing: -0.03em; max-width: 18ch; }

.rb-stage { padding: clamp(40px, 6vw, 88px) var(--rb-gutter) var(--rb-flow); }
.rb-stage-art { position: relative; border-radius: 18px; overflow: hidden; min-height: clamp(560px, 70vh, 780px); display: grid; place-items: center; padding: clamp(18px, 2.4vw, 38px); }
.rb-stage-art > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rb-stage-art .rb-scanlines { z-index: 1; }
.rb-app-preview { position: relative; z-index: 2; width: min(100%, 1240px); background: #111318; color: #f4f4f4; border: 1px solid rgb(255 255 255 / 0.09); border-radius: 14px; overflow: hidden; box-shadow: 0 14px 24px rgb(0 0 0 / 0.28); }
.rb-app-preview-nav { height: 58px; padding: 0 20px; display: grid; grid-template-columns: 160px 1fr 36px; align-items: center; gap: 24px; border-bottom: 1px solid rgb(255 255 255 / 0.07); background: rgb(17 19 24 / 0.94); font-size: 13px; color: rgb(255 255 255 / 0.48); }
.rb-app-preview-nav img { width: 126px; height: auto; }
.rb-app-preview-avatar { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: rgb(255 255 255 / 0.1); color: rgb(255 255 255 / 0.82); font-size: 11px; font-weight: 600; }
.rb-app-preview-body { display: grid; grid-template-columns: 190px minmax(0, 1fr); }
.rb-app-preview-steps { padding: 28px 18px; border-right: 1px solid rgb(255 255 255 / 0.06); }
.rb-app-preview-step { display: flex; align-items: center; gap: 11px; padding: 8px 10px; color: rgb(255 255 255 / 0.25); }
.rb-app-preview-step > span { width: 21px; height: 21px; display: grid; place-items: center; border: 1px solid rgb(255 255 255 / 0.1); border-radius: 50%; font-size: 10px; }
.rb-app-preview-step > b { font-size: 13px; font-weight: 500; }
.rb-app-preview-step.is-complete { color: rgb(255 255 255 / 0.46); }
.rb-app-preview-step.is-complete > span { color: #77d29c; background: rgb(119 210 156 / 0.12); border-color: transparent; }
.rb-app-preview-step.is-current { color: rgb(255 255 255 / 0.9); background: rgb(255 255 255 / 0.06); border-radius: 8px; }
.rb-app-preview-step.is-current > span { background: rgb(255 255 255 / 0.14); border-color: transparent; }
.rb-app-preview-progress { margin-top: 28px; padding: 18px 8px 0; border-top: 1px solid rgb(255 255 255 / 0.06); display: grid; grid-template-columns: 1fr auto; gap: 8px; color: rgb(255 255 255 / 0.3); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; }
.rb-app-preview-progress i { grid-column: 1 / -1; height: 4px; overflow: hidden; border-radius: 4px; background: rgb(255 255 255 / 0.06); }
.rb-app-preview-progress i b { display: block; width: 29%; height: 100%; background: #77d29c; }
.rb-app-preview-form { padding: clamp(28px, 3.6vw, 48px); }
.rb-app-preview-form > header h3 { color: rgb(255 255 255 / 0.95); font-family: var(--font-absans); font-size: clamp(30px, 3vw, 44px); font-weight: 500; letter-spacing: -0.025em; line-height: 1; }
.rb-app-preview-form > header p { margin-top: 10px; color: rgb(255 255 255 / 0.5); font-size: 15px; line-height: 1.5; }
.rb-app-preview-note { margin-top: 28px; padding: 18px 20px; border: 1px solid rgb(245 158 11 / 0.2); border-radius: 12px; background: rgb(245 158 11 / 0.045); }
.rb-app-preview-note strong { color: #e7b45a; font-size: 16px; }
.rb-app-preview-note p { margin-top: 6px; max-width: 68ch; color: rgb(255 255 255 / 0.48); font-size: 13px; line-height: 1.5; }
.rb-app-preview-card { margin-top: 16px; padding: 24px; border: 1px solid rgb(255 255 255 / 0.07); border-radius: 12px; background: rgb(255 255 255 / 0.03); }
.rb-app-preview-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; }
.rb-app-preview-card-head strong { color: rgb(255 255 255 / 0.9); font-size: 17px; font-weight: 600; }
.rb-app-preview-card-head span { color: rgb(255 255 255 / 0.38); font-size: 12px; }
.rb-app-preview-fields { margin-top: 20px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.rb-app-preview-fields div { min-width: 0; }
.rb-app-preview-fields span { display: block; margin-bottom: 7px; color: rgb(255 255 255 / 0.48); font-size: 11px; }
.rb-app-preview-fields b { display: block; min-height: 42px; padding: 12px 14px; overflow: hidden; border: 1px solid rgb(255 255 255 / 0.08); border-radius: 7px; background: rgb(255 255 255 / 0.045); color: rgb(255 255 255 / 0.78); font-size: 13px; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
.rb-app-preview-save { margin-top: 22px; padding-top: 16px; display: flex; justify-content: space-between; border-top: 1px solid rgb(255 255 255 / 0.06); color: rgb(255 255 255 / 0.3); font-size: 11px; }
.rb-app-preview-save b { color: rgb(255 255 255 / 0.78); font-weight: 500; }

.rb-feature { display: grid; grid-template-columns: 1fr 1.1fr; }
.rb-feature-copy { padding: var(--rb-flow) clamp(44px, 6vw, 96px); display: flex; flex-direction: column; justify-content: center; }
.rb-feature-copy > p { margin-top: clamp(24px, 2.6vw, 36px); max-width: 50ch; text-wrap: pretty; }
.rb-feature-art { border-left: 1px solid var(--color-hairline); padding: clamp(56px, 8vw, 120px) clamp(40px, 5vw, 88px); display: grid; place-items: center; background: var(--color-paper); min-height: clamp(460px, 50vw, 640px); position: relative; overflow: hidden; }
.rb-feature--flip { grid-template-columns: 1.1fr 1fr; }
.rb-feature--flip .rb-feature-art { border-left: 0; border-right: 1px solid var(--color-hairline); order: -1; }
.rb-feature--ink { background: var(--color-ink); color: #f5f5f5; }
.rb-feature--ink h2 { color: #ffffff; }
.rb-feature--ink .rb-feature-copy p { color: #b3b3b3; }
.rb-feature--ink .rb-feature-art { background: #1a1a1a; border-color: #303030; }

.rb-feature-ascii { position: absolute; inset: 0; z-index: 0; display: grid; place-items: center; color: rgb(0 0 0 / 0.11); font-size: 11px; line-height: 11px; }

.rb-q { position: relative; z-index: 1; width: min(100%, 640px); border: 1px solid var(--color-ink); background: #ffffff; padding: clamp(28px, 4vw, 56px); }
.rb-q-meta { display: flex; justify-content: space-between; color: var(--color-ink-faint); font-size: 12px; margin-bottom: 56px; }
.rb-q h3 { font-family: var(--font-absans); font-size: clamp(30px, 3.4vw, 48px); line-height: 1; letter-spacing: -0.025em; max-width: 12ch; }
.rb-q p { margin-top: 16px; color: var(--color-ink-soft); font-size: 15px; line-height: 1.5; }
.rb-q-answer { margin-top: 32px; border-top: 1px solid var(--color-ink); padding-top: 14px; display: grid; grid-template-columns: 1fr auto; gap: 4px 18px; }
.rb-q-answer > span { grid-column: 1 / -1; color: var(--color-ink-faint); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; }
.rb-q-answer strong { font-family: var(--font-absans); font-size: 17px; font-weight: 400; }
.rb-q-answer small { align-self: end; color: var(--color-ink-soft); font-size: 13px; }

.rb-paper-carousel { width: min(100%, 500px); }
.rb-paper-stack { position: relative; width: 100%; aspect-ratio: 0.77; }
.rb-paper-page { appearance: none; position: absolute; top: 2%; left: 50%; width: 88%; padding: 0; border: 0; background: #ffffff; cursor: pointer; transition: transform 0.28s ease-out; box-shadow: 0 12px 18px rgb(0 0 0 / 0.24); }
.rb-paper-page img { width: 100%; height: auto; display: block; }
.rb-paper-page[data-position="active"] { z-index: 3; transform: translateX(-50%) rotate(0deg); }
.rb-paper-page[data-position="next"] { z-index: 2; transform: translateX(calc(-50% + 28px)) translateY(-10px) rotate(3deg); }
.rb-paper-page[data-position="back"] { z-index: 1; transform: translateX(calc(-50% - 24px)) translateY(12px) rotate(-3deg); }
.rb-paper-page:focus-visible, .rb-paper-controls button:focus-visible { outline: 2px solid #ffffff; outline-offset: 4px; }
.rb-paper-controls { margin-top: 24px; display: flex; justify-content: center; align-items: center; gap: 24px; color: #8f8f8f; font-size: 13px; }
.rb-paper-controls button { border: 0; padding: 8px 0; background: none; color: #e5e5e5; cursor: pointer; font: inherit; }
.rb-paper-controls button:hover { color: #ffffff; }

.rb-sign { width: min(100%, 640px); display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--color-hairline); }
.rb-sign > div { background: #ffffff; padding: 28px; min-height: 160px; }
.rb-sign b { display: block; font-family: var(--font-absans); font-size: clamp(28px, 3vw, 40px); letter-spacing: -0.03em; margin-bottom: 12px; }
.rb-sign-wide b { font-size: clamp(22px, 2.1vw, 30px); line-height: 1.15; }
.rb-sign span { color: var(--color-ink-soft); font-size: 15px; line-height: 1.4; }
.rb-sign .rb-sign-wide { grid-column: 1 / -1; min-height: 120px; }

.rb-scene { padding: var(--rb-flow) var(--rb-gutter) 0; }
.rb-scene-art { border-radius: 18px; overflow: hidden; height: 46vh; min-height: 340px; position: relative; }
.rb-scene-copy { padding: clamp(44px, 5vw, 72px) var(--rb-gutter) var(--rb-flow); display: flex; align-items: end; justify-content: space-between; gap: clamp(32px, 5vw, 72px); }
.rb-scene-art img, .rb-scene-art video { width: 100%; height: 100%; object-fit: cover; display: block; }
.rb-scene-poster { display: none !important; }
@media (max-width: 900px), (prefers-reduced-motion: reduce) {
  .rb-scene-video { display: none !important; }
  .rb-scene-poster { display: block !important; }
}

.rb-scene-cta { display: flex; flex-direction: column; align-items: start; gap: 12px; flex-shrink: 0; }

@media (max-width: 900px) {
  .rb-stage { padding: 20px 20px 48px; }
  .rb-stage-art { min-height: 0; padding: 16px; }
  .rb-app-preview-body { grid-template-columns: 1fr; }
  .rb-app-preview-steps { display: none; }
  .rb-feature, .rb-feature--flip { grid-template-columns: 1fr; }
  .rb-feature-art, .rb-feature--flip .rb-feature-art { border-left: 0; border-right: 0; border-top: 1px solid var(--color-hairline); order: 0; min-height: 0; }
  .rb-feature--ink .rb-feature-art { border-color: #303030; }
  .rb-sign { grid-template-columns: 1fr; }
  .rb-sign .rb-sign-wide { grid-column: auto; }
  .rb-scene-copy { flex-direction: column; align-items: start; gap: 24px; }
}
@media (max-width: 560px) {
  .rb-pricing-card { padding: 36px 24px; }
  .rb-paper-page { width: 84%; }
  .rb-app-preview-nav { grid-template-columns: 1fr auto; }
  .rb-app-preview-nav > span:not(.rb-app-preview-avatar) { display: none; }
  .rb-app-preview-form { padding: 24px 18px; }
  .rb-app-preview-card-head { align-items: start; flex-direction: column; gap: 4px; }
  .rb-app-preview-fields { grid-template-columns: 1fr; }
}

/* Mobile type scale. Every clamp above floors at a desktop size — at 375px the
   vw term is far below the minimum, so headings stayed huge and wrapped to four
   lines. These re-floor each one so it lands on one or two lines on a phone.
   Must stay LAST in the file: media queries add no specificity, so these would
   lose to the identical single-class selectors declared further down. */
@media (max-width: 640px) {
  .rb-h1 { font-size: clamp(32px, 9.4vw, 62px); }
  .rb-h2 { font-size: clamp(29px, 7.6vw, 40px); }
  .rb-h2--story { font-size: clamp(30px, 8.2vw, 44px); }
  .rb-stat-giant { font-size: clamp(64px, 17vw, 104px); }
  .rb-pricing-big { font-size: clamp(30px, 8vw, 44px); }
  .rb-steps { font-size: clamp(24px, 6.4vw, 30px); }
  .rb-steps-kicker { width: auto; white-space: normal; }
  /* 52vh cropped a 16:9 scene into a portrait slot and threw away the skyline. */
  .rb-hero-band, .rb-scene-art { height: auto; min-height: 0; aspect-ratio: 4 / 3; }
  /* The bigger body CTAs are right; a nav pill that size eats the header. */
  .rb-nav .rb-pill { padding: 11px 20px; font-size: 15px; }
}
/* State pages (public pSEO surfaces).
   Contained Canvas rules: hairline dividers over cards, square corners, Absans at 400,
   ink/paper only, tabular numerals. These pages previously used the Dark Carnival dark
   palette on a light background, which is why everything read as murky gray. */

/* Section heading + hairline rule, replacing the old gradient divider. */
.rb-state-section { margin-bottom: clamp(56px, 7vw, 96px); }
.rb-state-section > h2,
.rb-state-section > h3 {
  font-family: var(--font-absans);
  font-weight: 400;
  color: var(--color-ink);
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.rb-state-section > h2 {
  font-size: clamp(28px, 3.2vw, 42px);
  line-height: 1.08;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--color-hairline);
  margin-bottom: clamp(28px, 3vw, 44px);
}
.rb-state-lede {
  max-width: 62ch;
  color: var(--color-ink-soft);
  font-size: 17px;
  line-height: 1.7;
  text-wrap: pretty;
  margin-bottom: clamp(28px, 3vw, 40px);
}

/* Headline figures. Same ledger language as the pricing and sourcing pages. */
.rb-state-ledger {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  border-block: 1px solid var(--color-hairline);
  margin-bottom: clamp(32px, 4vw, 56px);
}
.rb-state-ledger > div { min-width: 0; padding: clamp(24px, 2.8vw, 36px) clamp(20px, 2vw, 32px); }
.rb-state-ledger > div + div { border-inline-start: 1px solid var(--color-hairline); }
.rb-state-ledger span {
  display: block;
  color: var(--color-ink-faint);
  font-size: 13px;
  letter-spacing: 0.02em;
}
.rb-state-ledger strong {
  display: block;
  margin-top: 14px;
  font-family: var(--font-absans);
  font-size: clamp(30px, 3.4vw, 46px);
  font-weight: 400;
  line-height: 1.02;
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
  text-wrap: balance;
}

/* Requirements table. Hairline rows, no surrounding box. */
.rb-state-table-wrap { overflow-x: auto; }
.rb-state-table { width: 100%; border-collapse: collapse; text-align: start; }
.rb-state-table th,
.rb-state-table td { padding: 16px 20px 16px 0; vertical-align: baseline; }
.rb-state-table thead th {
  color: var(--color-ink-faint);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--color-hairline);
  padding-bottom: 12px;
}
.rb-state-table tbody tr + tr th,
.rb-state-table tbody tr + tr td { border-top: 1px solid var(--color-hairline); }
.rb-state-table tbody th {
  width: 46%;
  font-weight: 400;
  color: var(--color-ink-soft);
  font-size: 15px;
  line-height: 1.5;
}
.rb-state-table tbody td {
  color: var(--color-ink);
  font-size: 15px;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}

/* Callout. Paper panel with an ink edge - no warning hue, since color is reserved
   for errors and a state quirk is not an error. */
.rb-state-callout {
  background: var(--color-paper);
  border-inline-start: 2px solid var(--color-ink);
  padding: 22px 26px;
  margin-top: clamp(28px, 3vw, 40px);
}
.rb-state-callout p { max-width: 68ch; }
.rb-state-callout p:first-child {
  font-family: var(--font-absans);
  font-size: 15px;
  color: var(--color-ink);
  margin-bottom: 6px;
}
.rb-state-callout p:last-child { color: var(--color-ink-soft); font-size: 15px; line-height: 1.65; }

/* Cost comparison. A ledger, not three competing cards. Emphasis carried by weight
   and surface, never by a saturated accent or a "winner" badge. */
.rb-state-costs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  border-block: 1px solid var(--color-hairline);
}
.rb-state-costs > div { min-width: 0; padding: clamp(26px, 3vw, 38px) clamp(20px, 2vw, 30px); }
.rb-state-costs > div + div { border-inline-start: 1px solid var(--color-hairline); }
.rb-state-costs--ours { background: var(--color-paper); }
.rb-state-costs span {
  display: block;
  color: var(--color-ink-faint);
  font-size: 13px;
  letter-spacing: 0.02em;
}
.rb-state-costs strong {
  display: block;
  margin-top: 14px;
  font-family: var(--font-absans);
  font-size: clamp(32px, 3.6vw, 48px);
  font-weight: 400;
  line-height: 1;
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
}
.rb-state-costs p { margin-top: 12px; color: var(--color-ink-soft); font-size: 14px; line-height: 1.6; }
.rb-state-costs-note { margin-top: 22px; color: var(--color-ink-faint); font-size: 14px; line-height: 1.6; }

/* Sibling document links. Hairline rows, replacing the rounded translucent blobs. */
.rb-state-docs { border-top: 1px solid var(--color-hairline); }
.rb-state-doc {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24px;
  align-items: baseline;
  gap: 8px 24px;
  padding: 26px 0;
  border-bottom: 1px solid var(--color-hairline);
  color: inherit;
  text-decoration: none;
  transition: background-color 0.15s ease-out;
}
.rb-state-doc h3 {
  grid-column: 1;
  font-family: var(--font-absans);
  font-size: clamp(19px, 1.9vw, 24px);
  font-weight: 400;
  line-height: 1.2;
  color: var(--color-ink);
  text-wrap: balance;
}
.rb-state-doc p {
  grid-column: 1;
  max-width: 68ch;
  margin-top: 8px;
  color: var(--color-ink-soft);
  font-size: 15px;
  line-height: 1.6;
}
.rb-state-doc svg {
  grid-column: 2;
  grid-row: 1;
  width: 18px;
  height: 18px;
  color: var(--color-ink-faint);
  transition: transform 0.15s ease-out, color 0.15s ease-out;
}
.rb-state-doc:hover { background: var(--color-paper); }
.rb-state-doc:hover svg { color: var(--color-ink); transform: translateX(4px); }
.rb-state-doc:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .rb-state-doc, .rb-state-doc svg { transition: none; }
  .rb-state-doc:hover svg { transform: none; }
}

/* Neighbouring states. Reuses the homepage's quiet pill shape. */
.rb-state-neighbors { display: flex; flex-wrap: wrap; gap: 10px; }
.rb-state-neighbors a {
  display: inline-block;
  padding: 10px 20px;
  border: 1px solid var(--color-hairline);
  border-radius: 999px;
  font-size: 15px;
  color: var(--color-ink-soft);
  text-decoration: none;
  transition: color 0.15s ease-out, border-color 0.15s ease-out;
}
.rb-state-neighbors a:hover { color: var(--color-ink); border-color: var(--color-ink-faint); }
.rb-state-neighbors a:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 3px; }

.rb-state-eyebrow {
  color: var(--color-ink-faint);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 18px;
}

@media (max-width: 640px) {
  .rb-state-table th, .rb-state-table td { padding-block: 14px; }
  .rb-state-table tbody th { width: 50%; }
}

/* Lead answer. The first thing after the H1 - it states the facts outright. */
.rb-state-lead {
  max-width: 58ch;
  margin-top: 28px;
  color: var(--color-ink);
  font-size: clamp(19px, 1.8vw, 24px);
  line-height: 1.55;
  text-wrap: pretty;
}
.rb-public-hero .rb-state-lead + p { margin-top: 22px; font-size: 17px; }

/* Execution checklist. Numbered rows, tabular, no bullet dots or accent colour. */
.rb-state-steps { max-width: 68ch; border-top: 1px solid var(--color-hairline); }
.rb-state-steps li {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 20px;
  padding: 18px 0;
  border-bottom: 1px solid var(--color-hairline);
  color: var(--color-ink-soft);
  font-size: 16px;
  line-height: 1.65;
}
.rb-state-steps li > span:first-child {
  color: var(--color-ink-faint);
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  padding-top: 2px;
}

/* FAQ rows. */
.rb-state-faq { border-top: 1px solid var(--color-hairline); }
.rb-state-faq > div { border-bottom: 1px solid var(--color-hairline); }
.rb-state-faq h3 {
  font-family: var(--font-absans);
  font-weight: 400;
  font-size: 18px;
  color: var(--color-ink);
  text-wrap: balance;
}
.rb-state-faq p { max-width: 68ch; color: var(--color-ink-soft); font-size: 15px; line-height: 1.7; }

/* Closing call to action, on the ink surface the other public pages use. */
.rb-state-cta > p:first-child {
  color: rgb(255 255 255 / 0.6);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.rb-state-cta h2 {
  max-width: 24ch;
  margin-top: 24px;
  font-family: var(--font-absans);
  font-size: clamp(30px, 3.6vw, 52px);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.rb-state-cta > div { margin-top: clamp(32px, 4vw, 48px); }
.rb-state-cta-action {
  display: inline-block;
  padding: 16px 34px;
  border-radius: 999px;
  background: #ffffff;
  color: var(--color-ink);
  font-family: var(--font-absans);
  font-size: 17px;
  text-decoration: none;
  transition: opacity 0.15s ease-out;
}
.rb-state-cta-action:hover { opacity: 0.86; }
.rb-state-cta-action:focus-visible { outline: 2px solid #ffffff; outline-offset: 3px; }
.rb-state-cta > div > p { margin-top: 18px; color: rgb(255 255 255 / 0.6); font-size: 14px; }

/* Disclaimer. */
.rb-state-disclaimer { padding: clamp(40px, 5vw, 64px) 0; border-top: 1px solid var(--color-hairline); }
.rb-state-disclaimer p {
  max-width: 74ch;
  color: var(--color-ink-faint);
  font-size: 13px;
  line-height: 1.7;
  text-wrap: pretty;
}

/* States index. A dense hairline list, not 50 cards. */
.rb-state-index {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  border-top: 1px solid var(--color-hairline);
}
.rb-state-index li { border-bottom: 1px solid var(--color-hairline); }
.rb-state-index li > a,
.rb-state-index--pending {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px 18px 0;
  color: var(--color-ink);
  text-decoration: none;
  font-size: 16px;
  transition: color 0.15s ease-out;
}
.rb-state-index li > a span:last-child { color: var(--color-ink-faint); font-size: 13px; letter-spacing: 0.08em; }
.rb-state-index li > a:hover { color: var(--color-ink-soft); }
.rb-state-index li > a:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 2px; }
.rb-state-index--pending { color: var(--color-ink-faint); }

/* ---------------------------------------------------------------------------
   Layout containers.
   .rb-section is only a border-top, and .rb-pad only sets horizontal gutters,
   so a bare `rb-section rb-pad` has no vertical breathing room and a bare
   `rb-section--ink` puts its content flush against the black edge.
   --------------------------------------------------------------------------- */
.rb-state-body { padding-block: clamp(56px, 7vw, 104px); }
.rb-state-body > *:last-child { margin-bottom: 0; }

.rb-state-cta { padding: clamp(64px, 8vw, 116px) var(--rb-gutter); }

/* Markdown body. .rb-public-prose is built for <section>-wrapped pages: it sets
   max-width:none and zeroes every top margin, which collapses headings straight
   onto the paragraph above and lets lines run the full 1600px frame. Markdown
   needs an ordinary prose rhythm and a readable measure instead. */
.rb-state-prose { color: var(--color-ink-soft); font-size: 17px; line-height: 1.75; }
.rb-state-prose > * { max-width: 68ch; }
.rb-state-prose p { margin-bottom: 1.35em; text-wrap: pretty; }
.rb-state-prose > *:last-child { margin-bottom: 0; }
.rb-state-prose h2,
.rb-state-prose h3,
.rb-state-prose h4 {
  font-family: var(--font-absans);
  font-weight: 400;
  color: var(--color-ink);
  letter-spacing: -0.02em;
  line-height: 1.12;
  text-wrap: balance;
}
.rb-state-prose h2 { font-size: clamp(24px, 2.4vw, 32px); margin: clamp(48px, 5vw, 72px) 0 20px; }
.rb-state-prose h3 { font-size: clamp(20px, 2vw, 25px); margin: clamp(36px, 4vw, 52px) 0 16px; }
.rb-state-prose h4 { font-size: 18px; margin: 32px 0 12px; }
.rb-state-prose > h2:first-child,
.rb-state-prose > h3:first-child { margin-top: 0; }
.rb-state-prose strong { color: var(--color-ink); font-weight: 500; }
.rb-state-prose em { font-style: italic; }
.rb-state-prose a {
  color: var(--color-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.rb-state-prose ul, .rb-state-prose ol { margin: 0 0 1.35em 1.3em; }
.rb-state-prose ul { list-style: disc; }
.rb-state-prose ol { list-style: decimal; }
.rb-state-prose li { padding: 3px 0; }
.rb-state-prose blockquote {
  margin: 28px 0;
  padding-left: 22px;
  border-left: 2px solid var(--color-hairline);
  color: var(--color-ink-faint);
}

/* Nothing on these pages may push the frame sideways. */
.rb-state { overflow-x: clip; }
.rb-state-prose pre { overflow-x: auto; }
.will-editor { padding-block: 18px 72px; }
.will-editor__workspace { width: min(100%, 1180px); margin-inline: auto; }

.will-editor__back {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 9px;
  margin-block-end: 12px;
  color: var(--color-ink-soft) !important;
  font-size: 14px;
}

.will-editor__back:hover { color: var(--color-ink) !important; }

.will-editor__layout {
  display: grid;
  grid-template-columns: minmax(190px, 0.28fr) minmax(0, 1fr);
  gap: clamp(42px, 6vw, 82px);
  align-items: start;
}

.will-editor__progress { min-width: 0; align-self: stretch; }
.will-editor__progress-sticky { position: sticky; top: 104px; }
.will-editor__content { min-width: 0; }

.will-editor__header {
  max-width: 760px;
  margin-block-end: 34px;
  padding-block-end: 26px;
  border-block-end: 1px solid var(--color-hairline);
}

.will-editor__header h1 {
  margin: 0;
  font-family: var(--font-absans);
  font-size: clamp(42px, 5vw, 68px);
  font-weight: 400;
  letter-spacing: -0.045em;
  line-height: 0.98;
  text-wrap: balance;
}

.will-editor__header > span {
  display: block;
  max-width: 58ch;
  margin-block-start: 14px;
  color: var(--color-ink-soft);
  font-size: 15px;
  line-height: 1.5;
  text-wrap: pretty;
}

.will-editor__context {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.will-editor__context > :not(.will-editor__context-texture) { position: relative; z-index: 1; }

.will-editor__context-texture {
  position: absolute;
  z-index: 0;
  right: -10px;
  bottom: -5px;
  width: 60%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  color: rgb(0 0 0 / 0.05);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 10px;
  line-height: 11px;
  letter-spacing: 1px;
  white-space: pre;
  pointer-events: none;
  user-select: none;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 28%);
  mask-image: linear-gradient(to right, transparent, #000 28%);
}

.will-editor__context--compact .will-editor__context-texture { width: 52%; color: rgb(0 0 0 / 0.04); }

.will-progress-mobile { display: none; }

.will-progress ol { margin: 0; padding: 0; list-style: none; }
.will-progress li > a, .will-progress li > span {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 13px;
  align-items: center;
  min-height: 52px;
  margin-inline: -10px;
  padding: 7px 10px;
  color: #6b6b67;
  font-size: 14px;
}

.will-progress li > a:hover { background: #f5f5f2; color: var(--color-ink); }

.will-progress__label { display: flex; min-width: 0; align-items: baseline; justify-content: space-between; gap: 12px; }
.will-progress__label strong { color: inherit !important; font-weight: 400; }
.will-progress__label small { flex: none; color: #797975; font-size: 11px; }

.will-progress__mark {
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  border: 1px solid #c9c9c5;
  color: #6b6b67;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.will-progress .is-complete > a { color: var(--color-ink-soft); }
.will-progress .is-complete .will-progress__mark { border-color: var(--color-ink); background: var(--color-ink); color: #fff; }
.will-progress .is-current > span { background: #f5f5f2; color: var(--color-ink); }
/* A dot, not a filled square. The current step read as a black blob next to the
   ticked ones, which looked like a fourth state nobody could name. */
.will-progress .is-current .will-progress__mark { border-color: var(--color-ink); color: var(--color-ink); background: transparent; }
.will-progress .is-current .will-progress__mark::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-ink);
}
.will-progress .is-current .will-progress__label strong { font-weight: 500; }

.will-progress__summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px 16px;
  margin-block-start: 24px;
  padding-block-start: 18px;
  border-block-start: 1px solid var(--color-hairline);
  color: var(--color-ink-soft);
  font-size: 12px;
}

.will-progress__summary strong { color: var(--color-ink) !important; font-weight: 500; font-variant-numeric: tabular-nums; }
.will-progress__summary > div { grid-column: 1 / -1; height: 4px; background: #dededb; }
.will-progress__summary > div span { display: block; height: 100%; background: var(--color-ink); }

.will-progress__save {
  display: flex;
  min-height: 44px;
  align-items: center;
  gap: 8px;
  margin-block-start: 12px;
  color: var(--color-ink-soft);
  font-size: 12px;
}

.will-progress__save > span:first-child {
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  border: 1px solid #c9c9c5;
  color: var(--color-ink);
  font-size: 10px;
  line-height: 1;
}

.will-progress__save[data-state="dirty"] > span:first-child,
.will-progress__save[data-state="saving"] > span:first-child { background: #dededb; }
.will-progress__save[data-state="error"] { color: #8a2929; }
.will-progress__save[data-state="error"] > span:first-child { border-color: #8a2929; color: #8a2929; }

.will-editor turbo-frame#will-form-frame { display: block; }
.will-editor .animate-rise,
.will-editor .animate-pulse { animation: none !important; }
.will-editor__content .expanded-view { opacity: 1 !important; transform: none !important; transition: none !important; }

.will-editor__content .card,
.will-editor__content [class*="rounded-xl"],
.will-editor__content [class*="rounded-lg"] {
  border-color: var(--color-hairline) !important;
  border-radius: 0 !important;
  background: var(--color-paper) !important;
  background-image: none !important;
  box-shadow: none !important;
}

.will-editor__content .card { border: 0 !important; }
.will-editor__content .will-editor__context {
  border-color: #e4e9e1 !important;
  background: linear-gradient(115deg, #f1f5ef 0%, #f7f8f4 54%, #fafaf8 100%) !important;
}
.will-editor__content .card .card {
  padding: 0 !important;
  background: transparent !important;
}

.will-editor__content h2,
.will-editor__content h3,
.will-editor__content h4,
.will-editor__content h2[class*="text-white"],
.will-editor__content h3[class*="text-white"],
.will-editor__content h4[class*="text-white"] {
  color: var(--color-ink) !important;
  font-family: var(--font-absans);
  font-weight: 400 !important;
  letter-spacing: -0.02em;
}

.will-editor__content h2 { font-size: 24px !important; }
.will-editor__content h3 { font-size: 19px !important; }

.will-editor__content [class*="text-white"],
.will-editor__content [class*="text-warning"],
.will-editor__content [class*="text-life"],
.will-editor__content [class*="text-death"] { color: var(--color-ink-soft) !important; }

.will-editor__content label,
.will-editor__content dt { color: var(--color-ink-soft) !important; font-weight: 500; }

.will-editor__content label.group.flex > span.grid {
  font-family: var(--font-aspekta);
  font-size: 14px;
  font-weight: 600;
  line-height: 24px;
}

.will-editor__content label.group.flex > span.relative { margin-block-start: 0; }

.will-editor__content strong,
.will-editor__content b,
.will-editor__content [data-label-text] { color: var(--color-ink) !important; }
.will-editor__content [class*="font-semibold"] { font-weight: 500 !important; }
.will-editor__content [class*="text-life"],
.will-editor__content [data-total-estate-value-target="amount"] { font-variant-numeric: tabular-nums; }

.will-editor__content [class*="border-white"],
.will-editor__content [class*="border-warning"],
.will-editor__content [class*="border-life"] { border-color: var(--color-hairline) !important; }

.will-editor__content .form-control,
.will-editor__content :where(input:not([type="hidden"]):not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="button"]):not([type="reset"])),
.will-editor__content select,
.will-editor__content textarea,
.will-editor__content .ts-control,
.will-editor__content .ts-wrapper.single.input-active .ts-control {
  min-height: 50px;
  border: 1px solid #d2d2ce !important;
  border-radius: 0 !important;
  outline: 0;
  background: #fff !important;
  box-shadow: none !important;
  color: var(--color-ink) !important;
  font-weight: 400;
}

.will-editor__content textarea { min-height: auto; line-height: 1.55; }
.will-editor__content input::placeholder,
.will-editor__content textarea::placeholder,
.will-editor__content .ts-control input::placeholder { color: var(--color-ink-soft) !important; opacity: 1; }

.will-editor__content .form-control:focus,
.will-editor__content :where(input:not([type="hidden"]):not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="button"]):not([type="reset"]):focus),
.will-editor__content textarea:focus,
.will-editor__content .ts-wrapper.focus .ts-control {
  border-color: var(--color-ink) !important;
  box-shadow: 0 0 0 2px var(--color-ink) !important;
}

.will-editor__content .ts-wrapper.single .ts-control,
.will-editor__content .ts-wrapper.single .ts-control input,
.will-editor__content .ts-wrapper.single.input-active .ts-control { color: var(--color-ink) !important; }
.will-editor__content .ts-control input {
  min-height: 0;
  border: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.will-editor__content .ts-dropdown { border: 1px solid #d2d2ce; border-radius: 0; background: #fff; color: var(--color-ink); box-shadow: 0 4px 10px rgb(0 0 0 / 0.08); backdrop-filter: none; }
.will-editor__content .ts-dropdown .active { background: var(--color-paper); color: var(--color-ink); }
.will-editor__content .dropdown-input { border-color: #d2d2ce !important; background: #fff !important; color: var(--color-ink) !important; }

.will-editor__content label[class*="bg-life"] { border-color: var(--color-ink) !important; background: #efefec !important; }
.will-editor__content [data-indicator] { border-color: #aaa !important; background: #fff !important; }
.will-editor__content label:has(input[type="radio"]:checked) [data-indicator] { border-color: var(--color-ink) !important; }
.will-editor__content label:has(input[type="radio"]:checked) [data-indicator] > div { background: var(--color-ink) !important; }
.will-editor__content input.peer:checked + span { border-color: var(--color-ink) !important; background: var(--color-ink) !important; }
.will-editor__content input.peer:checked + span > span { background: #fff !important; }

.will-editor__content .btn {
  min-height: 47px;
  border-radius: 999px;
  padding: 14px 28px;
  font-family: var(--font-absans);
  font-size: 16px;
  line-height: 1.2;
  transition: background-color 160ms ease-out, color 160ms ease-out, border-color 160ms ease-out;
}

.will-editor__content .btn-primary {
  border-color: var(--color-ink);
  background: var(--color-ink);
  color: #fff !important;
  font-weight: 500;
  transform: none;
}

.will-editor__content .btn-primary:hover { background: #383836; filter: none; transform: none; }
.will-editor__content .btn-secondary { border-color: var(--color-hairline); background: transparent; color: var(--color-ink-soft) !important; }
.will-editor__content .btn-secondary:hover { border-color: var(--color-ink); color: var(--color-ink) !important; }
.will-editor__content form > [class*="border-t"] { border-block-start-width: 0 !important; }

.will-editor__content .field_with_errors .form-control { border-color: #8a2929 !important; background: #fff !important; }
.will-editor__content .form-error-message { color: #8a2929 !important; }

@media (max-width: 900px) {
  .will-editor__layout { grid-template-columns: 1fr; gap: 0; }
  .will-editor__progress { margin-block-end: 34px; }
  .will-editor__progress-sticky { position: static; }
  .will-progress { display: none; }
  .will-progress-mobile { display: block; padding: 16px 18px; background: var(--color-paper); }
  .will-progress-mobile summary {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    min-height: 44px;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    cursor: pointer;
    list-style: none;
  }
  .will-progress-mobile summary::after { content: "+"; color: var(--color-ink); font-size: 18px; }
  .will-progress-mobile details[open] summary::after { content: "−"; }
  .will-progress-mobile summary strong { justify-self: end; }
  .will-progress-mobile summary::-webkit-details-marker { display: none; }
  .will-progress-mobile span { color: var(--color-ink-soft); font-size: 12px; font-variant-numeric: tabular-nums; }
  .will-progress-mobile strong { color: var(--color-ink) !important; font-size: 13px; font-weight: 500; }
  .will-progress-mobile ol { margin: 8px 0 0; padding: 0; list-style: none; border-block-start: 1px solid var(--color-hairline); }
  .will-progress-mobile li > a,
  .will-progress-mobile li > span {
    display: flex;
    min-height: 44px;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    border-block-end: 1px solid var(--color-hairline);
    color: var(--color-ink) !important;
  }
  .will-progress-mobile li > span { background: #f5f5f2; padding-inline: 10px; }
  .will-progress-mobile li small { color: var(--color-ink-soft); font-size: 11px; }
  .will-progress-mobile__track { height: 4px; background: #dededb; }
  .will-progress-mobile__track span { display: block; height: 100%; background: var(--color-ink); }
  .will-progress-mobile .will-progress__save { margin-block-end: -8px; }
}

@media (max-width: 620px) {
  .will-editor { padding-block: 14px 48px; }
  .will-editor__back { margin-block-end: 10px; }
  .will-editor__header { margin-block-end: 26px; padding-block-end: 22px; }
  .will-editor__header h1 { font-size: 44px; }
  .will-editor__header > span { font-size: 14px; }
  .will-editor__content .card,
  .will-editor__content [class*="p-8"],
  .will-editor__content [class*="p-6"] { padding: 22px !important; }
  .will-editor__content .btn { min-height: 46px; padding: 12px 24px; font-size: 15px; }
}

/* Quiet secondary action: rebalancing is a convenience, not the main task. */
.will-split-evenly {
  border: 1px solid var(--color-hairline);
  border-radius: 999px;
  padding: 5px 14px;
  color: var(--color-ink-soft);
  font-size: 13px;
  background: transparent;
  cursor: pointer;
}
.will-split-evenly:hover { border-color: var(--color-ink); color: var(--color-ink); }
.will-show { padding-block: 34px 64px; }

.will-show__workspace {
  width: min(100%, 1180px);
  margin-inline: auto;
}

.will-show__back {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 9px;
  margin-block-end: 22px;
  color: var(--color-ink-soft) !important;
  font-size: 14px;
}

.will-show__back:hover { color: var(--color-ink) !important; }

.will-show__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  padding-block-end: 30px;
}

.will-show__header h1 {
  max-width: 18ch;
  margin: 0;
  font-family: var(--font-absans);
  font-size: clamp(40px, 4.5vw, 66px);
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 0.98;
  text-wrap: balance;
}

.will-show__header p { margin: 13px 0 0; color: var(--color-ink-soft); font-size: 15px; }
.will-show__header-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 24px; }

.will-show__edit-action {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  color: var(--color-ink-soft) !important;
  font-size: 14px;
  font-weight: 500;
}

.will-show__edit-action:hover { color: var(--color-ink) !important; }

.will-show__primary-action {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-inline: 18px;
  border-radius: 999px;
  background: var(--color-ink);
  color: #fff !important;
  font-size: 14px;
  font-weight: 500;
  transition: background-color 160ms ease-out;
}

.will-show__primary-action:hover { background: #383836; }
.will-show__primary-action span { font-size: 18px; }

.will-show__command {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 22px 24px;
  background: var(--color-paper);
}

.will-show__command-state { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 17px; }
.will-show__status-mark { display: grid; width: 20px; height: 20px; place-items: center; margin-block-start: 2px; border: 1px solid var(--color-ink); }
.will-show__status-mark::after { width: 8px; height: 2px; background: var(--color-ink); content: ""; }
.will-show__status-mark.is-complete { background: var(--color-ink); }
.will-show__status-mark.is-complete::after { width: auto; height: auto; background: none; color: #fff; content: "✓"; font-size: 13px; line-height: 1; }
.will-show__command h2 { margin: 0; font-family: var(--font-aspekta); font-size: 15px; font-weight: 500; }
.will-show__command-state p { max-width: 68ch; margin: 5px 0 0; color: var(--color-ink-soft); font-size: 14px; line-height: 1.5; }
.will-show__updated { flex: 0 0 auto; margin: 0; color: var(--color-ink-soft); font-size: 12px; font-variant-numeric: tabular-nums; }

.will-show__notarized {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  margin-block-start: 20px;
  padding: 20px 24px;
  border-block: 1px solid var(--color-hairline);
}

.will-show__notarized h2 { margin: 0; font-family: var(--font-absans); font-size: 20px; font-weight: 400; }
.will-show__notarized p { margin: 5px 0 0; color: var(--color-ink-soft); font-size: 13px; }
.will-show__notarized-actions { display: flex; flex-wrap: wrap; gap: 18px; font-size: 13px; font-weight: 500; }
.will-show__notarized-actions .is-danger, .will-show__danger > a { color: #8a2929 !important; }

.will-review {
  margin-block-start: 58px;
}

.will-review__document {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(270px, 0.38fr);
  gap: 0 clamp(38px, 5vw, 70px);
  min-width: 0;
}

.will-review__header { grid-column: 1 / -1; }
.will-review__sections { grid-column: 1; min-width: 0; }
.will-review__signing { grid-column: 2; grid-row: 2; align-self: start; padding: 20px 22px; background: var(--color-paper); }
.will-review__signing > p { margin: 0 0 7px; color: var(--color-ink-soft); font-size: 12px; }

.will-signing { margin: 0; }
.will-signing > summary {
  display: flex;
  min-height: 48px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0;
  color: var(--color-ink);
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  list-style: none;
}

.will-signing > summary::-webkit-details-marker, .will-section > summary::-webkit-details-marker { display: none; }
.will-signing > summary b, .will-section__toggle { font-size: 22px; font-weight: 400; line-height: 1; transition: transform 160ms ease-out; }
.will-signing[open] > summary b, .will-section[open] .will-section__toggle { transform: rotate(45deg); }
.will-signing__body { padding-block-start: 8px; }
.will-signing__link { display: inline-flex; min-height: 44px; align-items: center; margin-block-start: 10px; font-size: 13px; font-weight: 500; }

.will-signing .will-legal { padding: 0; background: transparent; }
.will-signing .legal-checklist__header, .will-signing .legal-checklist__meta { display: none; }
.will-signing .legal-checklist__steps { display: block; }
.will-signing .legal-checklist__step { align-items: start; padding-block: 12px; border-block-start: 1px solid var(--color-hairline); }
.will-signing .legal-checklist__number { width: 20px; height: 20px; border-radius: 0; background: transparent !important; color: var(--color-ink-soft) !important; font-size: 11px; font-weight: 400; }
.will-signing .legal-checklist__copy { margin: 0; color: var(--color-ink) !important; font-size: 12px; line-height: 1.45; }
.will-signing .legal-checklist__disclaimer { margin-block-start: 6px; padding-block-start: 12px; border-block-start-color: var(--color-hairline); }
.will-signing .legal-checklist__disclaimer p { margin: 0; color: var(--color-ink-soft) !important; font-size: 11px; line-height: 1.45; }

.will-review__header { padding-block-end: 18px; }
.will-review__header h2 { margin: 0; font-family: var(--font-absans); font-size: clamp(32px, 4vw, 48px); font-weight: 400; letter-spacing: -0.035em; line-height: 1; }

.will-section { border-block-start: 1px solid var(--color-hairline); }
.will-section:last-child { border-block-end: 1px solid var(--color-hairline); }
.will-section > summary {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 28px;
  gap: 18px;
  align-items: center;
  min-height: 86px;
  padding: 16px 4px;
  cursor: pointer;
  list-style: none;
  transition: background-color 160ms ease-out, padding-inline 160ms ease-out;
}

.will-section > summary:hover { padding-inline: 16px; background: var(--color-paper); }
.will-section[open] { background: var(--color-paper); }
.will-section[open] > summary { padding-inline: 16px; }
.will-section__number { align-self: start; padding-block-start: 4px; color: var(--color-ink-soft); font-size: 11px; font-variant-numeric: tabular-nums; }
.will-section__heading { min-width: 0; }
.will-section__heading strong { display: block; color: var(--color-ink) !important; font-family: var(--font-absans); font-size: 23px; font-weight: 400; letter-spacing: -0.02em; line-height: 1.15; }
.will-section__heading small { display: block; overflow: hidden; margin-block-start: 7px; color: var(--color-ink-soft); font-size: 13px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.will-section__toggle { justify-self: end; }

.will-section__body { position: relative; margin-inline: 16px; padding: 4px 0 30px 52px; border-block-start: 1px solid var(--color-hairline); }
.will-section__edit { display: inline-flex; min-height: 44px; align-items: center; margin-block-end: 12px; color: var(--color-ink-soft) !important; font-size: 13px; font-weight: 500; }
.will-section__edit:hover { color: var(--color-ink) !important; }
.will-section__body h3 { margin: 12px 0 8px; color: var(--color-ink-soft); font-family: var(--font-aspekta); font-size: 13px; font-weight: 500; }

.will-detail__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 34px; margin: 0; padding: 0; }
.will-detail__grid div { min-width: 0; padding-block: 14px; border-block-start: 1px solid var(--color-hairline); }
.will-detail__grid div:nth-child(-n + 2) { border-block-start: 0; }
.will-detail__grid dt { margin-block-end: 6px; color: var(--color-ink-soft); font-size: 12px; }
.will-detail__grid dd { margin: 0; font-size: 15px; line-height: 1.45; }
.will-detail__note { margin-block-start: 4px !important; color: var(--color-ink-soft); font-size: 13px !important; }

.will-detail__rows { margin: 0; padding: 0; list-style: none; }
.will-detail__rows li { display: grid; grid-template-columns: minmax(0, 1fr) 150px 110px; gap: 22px; align-items: baseline; padding-block: 13px; border-block-start: 1px solid var(--color-hairline); }
.will-detail__rows strong, .will-detail__rows b { color: var(--color-ink) !important; font-size: 14px; font-weight: 400; }
.will-detail__rows span { color: var(--color-ink-soft); font-size: 12px; }
.will-detail__rows b { text-align: end; font-variant-numeric: lining-nums tabular-nums; font-feature-settings: "lnum" 1, "tnum" 1; }
.will-detail__empty, .will-detail__message { margin: 0; color: var(--color-ink-soft); font-size: 14px; line-height: 1.55; }
.will-detail__message { max-width: 68ch; white-space: pre-wrap; }

.will-show__danger { display: flex; align-items: center; justify-content: space-between; gap: 28px; margin-block-start: 52px; padding: 20px 24px; border-block: 1px solid var(--color-hairline); }
.will-show__danger h2 { margin: 0; font-family: var(--font-aspekta); font-size: 14px; font-weight: 500; }
.will-show__danger p { margin: 5px 0 0; color: var(--color-ink-soft); font-size: 12px; }
.will-show__danger > a { display: inline-flex; min-height: 44px; flex: 0 0 auto; align-items: center; font-size: 13px; font-weight: 500; }

@media (max-width: 900px) {
  .will-review__document { grid-template-columns: 1fr; }
  .will-review__header, .will-review__signing, .will-review__sections { grid-column: 1; }
  .will-review__signing { grid-row: auto; margin-block-end: 28px; }
}

@media (max-width: 620px) {
  .will-show { padding-block: 22px 42px; }
  .will-show__back { margin-block-end: 20px; }
  .will-show__header { display: block; padding-block-end: 26px; }
  .will-show__header h1 { font-size: 44px; }
  .will-show__header p { font-size: 14px; }
  .will-show__header-actions { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; margin-block-start: 24px; }
  .will-show__primary-action { width: 100%; }
  .will-show__command { align-items: flex-start; flex-direction: column; gap: 14px; padding: 20px; }
  .will-show__updated { padding-inline-start: 37px; }
  .will-show__notarized, .will-show__danger { align-items: flex-start; flex-direction: column; }
  .will-review { margin-block-start: 38px; }
  .will-review__header h2 { font-size: 36px; }
  .will-section > summary { grid-template-columns: 26px minmax(0, 1fr) 24px; gap: 12px; min-height: 82px; padding-inline: 0; }
  .will-section > summary:hover { padding-inline: 10px; }
  .will-section__heading strong { font-size: 20px; }
  .will-section__heading small { font-size: 12px; }
  .will-section__body { margin-inline: 10px; padding: 0 0 28px 38px; }
  .will-detail__grid { grid-template-columns: 1fr; gap: 22px; }
  .will-detail__grid div:nth-child(2) { border-block-start: 1px solid var(--color-hairline); }
  .will-detail__rows li { grid-template-columns: minmax(0, 1fr) auto; gap: 5px 18px; }
  .will-detail__rows strong { grid-column: 1 / -1; }
  .will-detail__rows span { grid-column: 1; grid-row: 2; }
  .will-detail__rows b { grid-column: 2; grid-row: 2; }
}
.preview-page {
  height: 100%;
  overflow: hidden;
}

.preview-shell {
  display: flex;
  height: 100dvh;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
}

.preview-main {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  font-family: var(--font-aspekta);
}

.preview-context {
  display: flex;
  min-width: 0;
  min-height: 68px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 12px var(--dash-gutter);
  border-bottom: 1px solid var(--color-hairline);
  background: #fff;
}

.preview-context h1 {
  min-width: 0;
  margin: 0;
  font-family: var(--font-absans);
  font-size: clamp(22px, 2.25vw, 30px);
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1.05;
}

.preview-viewer {
  position: relative;
  min-height: 0;
  flex: 1;
  overflow: hidden;
  background: #2e2e2c;
}

.preview-iframe {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #2e2e2c;
}

.preview-loading {
  position: absolute;
  z-index: 3;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  background: var(--color-paper);
  color: var(--color-ink-soft);
  font-size: 14px;
}

.preview-loading.hidden { display: none; }

.preview-loading__marks {
  display: inline-flex;
  gap: 4px;
}

.preview-loading__marks i {
  width: 5px;
  height: 15px;
  background: var(--color-ink);
  animation: preview-mark 900ms ease-in-out infinite alternate;
}

.preview-loading__marks i:nth-child(2) { animation-delay: 150ms; }
.preview-loading__marks i:nth-child(3) { animation-delay: 300ms; }

@keyframes preview-mark {
  from { opacity: 0.25; }
  to { opacity: 1; }
}

.preview-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
}

.preview-action {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  padding: 0 19px;
  border-radius: 999px;
  font-family: var(--font-absans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.15;
  text-align: center;
  text-transform: capitalize;
  transition: background-color 160ms ease-out, color 160ms ease-out;
}

.preview-action--secondary { color: var(--color-ink-soft); }
.preview-action--secondary:hover { background: var(--color-paper); color: var(--color-ink); }
.preview-action--primary { background: var(--color-ink); color: #fff !important; }
.preview-action--primary:hover { background: #383836; }

.preview-page .preview-action:focus-visible {
  outline: 3px solid var(--color-ink);
  outline-offset: 4px;
}

.preview-page #flash_message [role="status"] {
  border-color: var(--color-hairline);
  background: #fff;
  color: var(--color-ink);
}

.preview-page #flash_message [role="alert"] {
  border-color: #b42318;
  background: #fff;
  color: #8f1d16;
}

.preview-page .preview-impersonation > div {
  background: var(--color-ink);
  color: #fff;
  box-shadow: none;
}

.preview-page .preview-impersonation a {
  min-height: 36px;
  border-radius: 999px;
  background: #fff;
  color: var(--color-ink);
}

.preview-page .preview-impersonation a:hover { background: var(--color-paper); }

@media (max-width: 640px) {
  .preview-context {
    min-height: 62px;
    gap: 10px;
    padding-block: 10px;
  }

  .preview-context h1 { font-size: 21px; }

  /* The title and both buttons will not fit on one line here, so the actions
     take their own row rather than squeezing the title to nothing. */
  .preview-context { flex-wrap: wrap; }

  .preview-actions {
    display: grid;
    width: 100%;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  }

  .preview-action { min-width: 0; padding-inline: 12px; }

  .preview-page .preview-impersonation > div {
    flex-wrap: wrap;
    row-gap: 5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .preview-loading__marks i { animation: none; }
}
/*
 * 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.
 *


 */

/* Smooth transition for destroyed assets */
.destroyed-asset {
  transition: all 0.3s ease-out !important;
}

.btn:focus {
  outline: none;
}

.btn:focus-visible {
  outline: 2px solid var(--color-life, #00e6a5);
  outline-offset: 2px;
}