:root{--font-rubik:"Rubik"}
:root {
  --ink: #17251f;
  /* Text colors keep at least 4.5:1 contrast on the paper, white, and tinted panels. */
  --muted: #5f6b62;
  --green: #3c7256;
  --lime: #d4ecab;
  --paper: #f7f8f4;
  --border: #e2e6dd;
  --white: #fff;
  --focus: #2f6b4a;
  --on-dark-muted: #a9bea8;
  --success: #3f6d33;
  --warning: #7a5a1c;
  --danger: #9a3f2c;
  /* Rubik covers Hebrew and Latin, so letters and figures always come from the same face. */
  --font-body: var(--font-rubik), Arial, sans-serif;
  --font-display: var(--font-rubik), Arial, sans-serif;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--font-body);
  font-size: 16px;
}
/* Form controls take the page's font (browsers give them the system's by default). */
button,
input,
select,
textarea,
optgroup,
option {
  font: inherit;
}
button,
a {
  -webkit-tap-highlight-color: transparent;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  cursor: pointer;
}
button:disabled,
.disabled {
  cursor: not-allowed;
  opacity: 0.55;
}
button:focus-visible,
a:focus-visible,
input:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}
.sidebar :focus-visible {
  outline-color: var(--lime);
}
h1,
h2,
h3,
p {
  margin: 0;
}
h1,
h2,
h3 {
  font-family: var(--font-display);
}
/* Tracking separates Hebrew letters; Hebrew text keeps natural spacing. */
:lang(he) {
  letter-spacing: normal !important;
}
/* Directional icons point toward the reading direction. */
[dir='rtl'] .lucide-arrow-right,
[dir='rtl'] .lucide-arrow-up-right,
[dir='rtl'] .lucide-log-out {
  transform: scaleX(-1);
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}
.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.7px;
}
.brand-mark {
  background: var(--ink-bg);
  color: var(--lime);
  border-radius: var(--r-md);
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
}
.brand-muted {
  font-weight: 500;
}
.brand-light {
  color: var(--fg-f3f8ef);
}
.brand-light .brand-mark {
  background: var(--lime-bg);
  color: var(--fg-203a2e);
}
.landing {
  max-width: 1440px;
  margin: auto;
  padding: 0 6%;
}
.nav {
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
}
.nav-links {
  display: flex;
  gap: 30px;
  font-size: 14px;
  color: var(--muted);
}
.nav-links a {
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: 30px;
  padding: 8px 12px;
  font-size: 13px;
  background: var(--bg-ffffff88);
  white-space: nowrap;
}
.dot {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--bg-679c53);
}
.hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 660px;
  gap: 35px;
  align-items: center;
}
.eyebrow {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.eyebrow > span:empty {
  height: 6px;
  width: 6px;
  border-radius: 50%;
  background: var(--bg-7fab58);
}
.hero h1 {
  font-size: clamp(55px, 6.2vw, 87px);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -4px;
  margin: 25px 0;
}
.hero h1 > span {
  color: var(--fg-56805e);
}
.hero-copy > p {
  color: var(--muted);
  line-height: 1.8;
  font-size: 17px;
}
.hero-actions {
  display: flex;
  align-items: center;
  gap: 25px;
  margin-top: 32px;
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 14px 20px;
  border-radius: var(--r-sm);
  border: 0;
  font-weight: 600;
  font-size: 14px;
  transition:
    transform 0.2s,
    background 0.2s;
}
.button:hover:not(:disabled) {
  transform: translateY(-2px);
}
.primary {
  background: var(--bg-203c2d);
  color: var(--fg-f4f8ef);
}
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
}
button.text-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--focus);
  text-decoration: underline;
}
.hero-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
  font-size: 13px;
  color: var(--muted);
}
.hero-note > span {
  padding: 0 4px;
}
.conversation-stage {
  height: 620px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse, var(--bg-dce8d1) 0%, var(--bg-edf0e6) 45%, transparent 72%);
}
.stage-grid {
  position: absolute;
  inset: 40px -5px;
  background-image:
    linear-gradient(var(--bg-bdd0b629) 1px, transparent 1px),
    linear-gradient(90deg, var(--bg-bdd0b629) 1px, transparent 1px);
  background-size: 35px 35px;
  mask-image: radial-gradient(ellipse, #000, transparent 70%);
}
.chat-preview {
  position: relative;
  transform: rotate(-3deg);
  width: 335px;
  background: var(--bg-ffffff);
  border: 1px solid var(--line-dce4d4);
  border-radius: var(--r-xl);
  box-shadow:
    0 22px 70px #26382a15,
    0 2px 8px #26382a08;
  overflow: hidden;
}
.chat-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px;
  border-bottom: 1px solid var(--line-e7ece2);
  background: var(--bg-fffffff0);
}
.chat-avatar {
  display: grid;
  place-items: center;
  width: 35px;
  height: 35px;
  background: var(--bg-223e2e);
  color: var(--lime);
  border-radius: 50%;
  font-size: 26px;
}
.chat-header strong {
  display: block;
  font-size: 12px;
}
.chat-header div > span {
  display: block;
  font-size: 11px;
  margin-top: 4px;
  color: var(--muted);
}
.example-tag {
  margin-inline-start: auto;
  background: var(--bg-f0f4e9);
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--muted);
  padding: 5px;
  border-radius: var(--r-xs);
}
.chat-body {
  background: var(--bg-f5f7f0);
  padding: 22px 17px 18px;
}
.chat-question {
  background: var(--bg-dbeec7);
  padding: 11px 14px;
  border-start-start-radius: 12px;
  border-start-end-radius: 12px;
  border-end-end-radius: 3px;
  border-end-start-radius: 12px;
  margin-inline-start: 38px;
  font-size: 12px;
  line-height: 1.5;
}
.chat-question > span {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-size: 11px;
  color: var(--muted);
  gap: 3px;
}
.chat-answer {
  margin-top: 16px;
  margin-inline-end: 24px;
  background: var(--bg-ffffff);
  padding: 18px;
  border-start-start-radius: 3px;
  border-start-end-radius: 12px;
  border-end-end-radius: 12px;
  border-end-start-radius: 12px;
  border: 1px solid var(--line-e8ede1);
}
.answer-label {
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 5px;
}
.chat-answer h3 {
  font-size: 32px;
  letter-spacing: -1.5px;
  margin-top: 9px;
  font-weight: 600;
}
.chat-answer > p {
  font-size: 11px;
  color: var(--muted);
  margin-top: 4px;
}
.chat-stats {
  display: flex;
  gap: 38px;
  margin-top: 17px;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--line-eef1e8);
}
.chat-stats strong {
  display: block;
  font-size: 18px;
  font-weight: 500;
}
.chat-stats span {
  font-size: 11px;
  color: var(--muted);
}
.answer-foot {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.8;
  margin-top: 10px;
}
.small-question {
  margin-top: 18px;
  padding: 12px;
}
.chat-input {
  padding: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--muted);
  font-size: 11px;
}
.send-icon {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  background: var(--bg-34523a);
  color: var(--fg-e4efdb);
  border-radius: 50%;
}
.floating-tag {
  position: absolute;
  top: 47px;
  inset-inline-end: 23px;
  background: var(--bg-ffffff);
  border: 1px solid var(--line-e7ebdf);
  padding: 11px 14px;
  border-radius: var(--r-sm);
  font-size: 11px;
  display: flex;
  align-items: center;
  gap: 7px;
  box-shadow: 0 5px 12px #223e2e06;
  transform: rotate(4deg);
  z-index: 2;
}
.floating-security {
  display: flex;
  align-items: center;
  gap: 10px;
  position: absolute;
  /* Below the card's input row, so the typing there stays visible. */
  bottom: 4px;
  inset-inline-start: 14px;
  padding: 14px 19px;
  border-radius: var(--r-sm);
  background: var(--bg-ffffff);
  box-shadow: 0 10px 25px #223e2e0b;
  transform: rotate(2deg);
}
.floating-security > svg {
  color: var(--fg-7d9964);
}
.floating-security strong {
  display: block;
  font-size: 11px;
}
.floating-security span {
  display: block;
  font-size: 11px;
  color: var(--muted);
  margin-top: 5px;
}
/* The hero's sample conversation, played by the landing's script (.is-live). Every message
   keeps its place while hidden, so the card never changes height. */
.chat-slot {
  position: relative;
}
.hero-typing {
  display: none;
}
.chat-preview.is-live .hero-typing {
  display: flex;
  gap: 4px;
  position: absolute;
  top: 16px;
  inset-inline-start: 0;
  padding: 13px 15px;
  background: var(--bg-ffffff);
  border: 1px solid var(--line-e8ede1);
  border-start-start-radius: 3px;
  border-start-end-radius: 12px;
  border-end-end-radius: 12px;
  border-end-start-radius: 12px;
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity 0.25s ease,
    transform 0.3s ease;
}
.chat-preview.is-live.is-typing .hero-typing {
  opacity: 1;
  transform: none;
}
.hero-typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--muted-bg);
  animation: chat-dot 1.2s infinite ease-in-out;
}
.hero-typing span:nth-child(2) {
  animation-delay: 0.15s;
}
.hero-typing span:nth-child(3) {
  animation-delay: 0.3s;
}
.chat-preview.is-live [data-step] {
  opacity: 0;
  transform: translateY(12px) scale(0.96);
  transition:
    opacity 0.35s ease,
    transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.chat-preview.is-live .chat-question[data-step] {
  transform-origin: bottom right;
}
[dir='ltr'] .chat-preview.is-live .chat-question[data-step] {
  transform-origin: bottom left;
}
.chat-preview.is-live [data-step].is-shown {
  opacity: 1;
  transform: none;
}
/* The answer's parts follow one another. */
.chat-preview.is-live .chat-answer > * {
  opacity: 0;
  transition: opacity 0.4s ease;
}
.chat-preview.is-live .chat-answer.is-shown > * {
  opacity: 1;
}
.chat-preview.is-live .chat-answer.is-shown > :nth-child(2) {
  transition-delay: 0.1s;
}
.chat-preview.is-live .chat-answer.is-shown > :nth-child(3) {
  transition-delay: 0.2s;
}
.chat-preview.is-live .chat-answer.is-shown > :nth-child(4) {
  transition-delay: 0.35s;
}
.chat-preview.is-live .chat-answer.is-shown > :nth-child(5) {
  transition-delay: 0.6s;
}
.chat-preview [data-input].is-composing {
  color: var(--ink);
}
.chat-preview.is-live .send-icon {
  transition: transform 0.2s ease;
}
.chat-preview.is-sent .send-icon {
  transform: scale(1.2);
}
/* The floating notes drift gently around the card. */
@keyframes hero-float {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -6px;
  }
}
.floating-tag {
  animation: hero-float 5s ease-in-out infinite;
}
.floating-security {
  animation: hero-float 6s ease-in-out -2.5s infinite;
}
.integration-strip {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 28px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.integration-strip > span {
  font-size: 12px;
  letter-spacing: 1.3px;
  color: var(--muted);
  max-width: 135px;
  line-height: 1.8;
}
.integration-strip strong {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: -0.4px;
}
.how-section {
  padding: 80px 0;
}
.video-section {
  padding: 30px 0 70px;
  text-align: center;
}
.video-section .eyebrow {
  justify-content: center;
}
.video-section h2 {
  font-size: clamp(24px, 3vw, 34px);
  letter-spacing: -1.2px;
  line-height: 1.3;
  font-weight: 500;
  margin: 15px auto 30px;
  max-width: 820px;
}
.demo-video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: 24px;
  background: var(--bg-17251f);
  box-shadow: 0 30px 80px rgb(23 37 31 / 22%);
}
.inside-section {
  padding: 30px 0 70px;
  text-align: center;
}
.inside-section .eyebrow {
  justify-content: center;
}
.inside-section h2 {
  font-size: clamp(24px, 3vw, 34px);
  letter-spacing: -1.2px;
  line-height: 1.3;
  font-weight: 500;
  margin: 15px auto 34px;
  max-width: 820px;
}
.inside-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 34px 30px;
  text-align: start;
}
.inside-shot {
  margin: 0;
}
.inside-frame {
  border-radius: 18px;
  overflow: hidden;
  background: var(--bg-ffffff);
  border: 1px solid var(--border);
  box-shadow: 0 22px 60px rgb(23 37 31 / 14%);
}
.inside-bar {
  display: flex;
  gap: 6px;
  padding: 10px 14px;
  background: var(--bg-eef1ec);
  direction: ltr;
}
.inside-bar > span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--bg-cfd6cb);
}
.inside-frame img {
  display: block;
  width: 100%;
  height: auto;
}
.inside-shot figcaption {
  margin-top: 14px;
}
.inside-shot figcaption strong {
  display: block;
  font-size: 18px;
  font-weight: 600;
}
.inside-shot figcaption span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}
.inside-note {
  margin-top: 30px;
  color: var(--muted);
  font-size: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
@media (max-width: 700px) {
  .inside-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .inside-section {
    padding: 20px 0 50px;
  }
}
.demo-video-tall {
  display: none;
  aspect-ratio: 9 / 16;
  max-width: 420px;
  margin: 0 auto;
}
@media (max-width: 700px) {
  .demo-video-wide {
    display: none;
  }
  .demo-video-tall {
    display: block;
  }
}
.section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}
.section-heading h2 {
  font-size: 34px;
  letter-spacing: -1.4px;
  line-height: 1.3;
  margin-top: 15px;
  font-weight: 500;
}
.section-heading > p {
  color: var(--muted);
  line-height: 1.8;
  font-size: 14px;
}
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 35px;
  margin-top: 45px;
}
.feature-grid article {
  border-top: 1px solid var(--border);
  padding-top: 24px;
  position: relative;
}
.feature-number {
  position: absolute;
  inset-inline-end: 0;
  color: var(--muted);
  font-size: 13px;
}
.feature-grid svg {
  color: var(--fg-63835c);
  width: 22px;
  height: 22px;
}
.feature-grid h3 {
  font-size: 17px;
  margin: 20px 0 10px;
  font-weight: 600;
}
.feature-grid p {
  color: var(--muted);
  line-height: 1.8;
  font-size: 14px;
  max-width: 300px;
}
.trust-banner {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 30px;
  background: var(--bg-ecf0e5);
  border: 1px solid var(--line-e3e8d9);
  border-radius: var(--r-md);
}
.trust-banner > svg {
  color: var(--fg-728667);
}
.trust-banner h3 {
  font-size: 16px;
  font-weight: 600;
}
.trust-banner p {
  color: var(--muted);
  font-size: 13px;
  margin-top: 8px;
}
.trust-banner .pill {
  margin-inline-start: auto;
}
footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 40px 0;
  font-size: 13px;
  color: var(--muted);
}
footer .brand {
  font-size: 16px;
}
footer .brand-mark {
  width: 27px;
  height: 27px;
}
footer > a:last-child {
  display: flex;
  align-items: center;
  gap: 8px;
}
/* Privacy and terms: Hebrew by default; #en shows the English version without JavaScript. */
/* The showing rule is as specific as the hiding ones, so merging them cannot flip it. */
.legal-page > #en {
  display: none;
}
.legal-page:has(> #en:target) > #he {
  display: none;
}
.legal-page:has(> #en:target) > #en {
  display: block;
}
.legal-doc {
  max-width: 760px;
  margin: 0 auto;
  padding: 70px 0 90px;
}
.legal-doc h1 {
  font-size: clamp(34px, 4vw, 48px);
  font-weight: 600;
  letter-spacing: -1.6px;
  line-height: 1.15;
}
.legal-updated {
  margin-top: 14px;
  color: var(--muted);
  font-size: 13px;
}
.legal-summary {
  margin-top: 28px;
  padding: 22px 24px;
  background: var(--bg-ecf0e5);
  border: 1px solid var(--line-e3e8d9);
  border-radius: var(--r-md);
}
.legal-doc section {
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid var(--border);
}
.legal-doc h2 {
  margin-bottom: 14px;
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.4px;
}
.legal-doc p,
.legal-doc li {
  font-size: 15px;
  line-height: 1.85;
}
.legal-doc .legal-summary {
  font-size: 16px;
}
.legal-doc p + p,
.legal-doc p + ul,
.legal-doc ul + p {
  margin-top: 12px;
}
.legal-doc ul {
  margin: 12px 0 0;
  padding-inline-start: 22px;
}
.legal-doc li + li {
  margin-top: 8px;
}
.legal-doc a {
  color: var(--green);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.connect-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 50px 20px;
  background: radial-gradient(ellipse at 50% 40%, var(--bg-e7eddd), transparent 70%);
}
.connect-card {
  margin: 70px auto 0;
  background: var(--bg-ffffff);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 45px;
  max-width: 530px;
  width: 100%;
  text-align: center;
  box-shadow: 0 15px 45px #223e2e08;
}
.connect-icon {
  width: 64px;
  height: 64px;
  border-radius: var(--r-xl);
  background: var(--bg-edf3e6);
  color: var(--fg-648154);
  display: grid;
  place-items: center;
  margin: 0 auto 22px;
}
.connect-card .eyebrow {
  display: block;
  font-size: 12px;
}
.connect-card h1 {
  font-size: 36px;
  letter-spacing: -1.4px;
  font-weight: 500;
  line-height: 1.2;
  margin: 20px 0;
}
.connect-card p {
  color: var(--muted);
  line-height: 1.8;
  margin: 15px 0;
  font-size: 14px;
}
.connect-card .button {
  margin-top: 20px;
  width: 100%;
}
.connect-card small {
  display: block;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.7;
  margin-top: 25px;
}
.error {
  background: var(--bg-fff0eb);
  color: var(--fg-9e4b39);
  padding: 14px;
  border-radius: var(--r-sm);
  font-size: 13px;
  line-height: 1.7;
  margin-top: 15px;
}
.error p {
  color: inherit;
  margin: 6px 0;
}
.error img {
  vertical-align: middle;
}
.workspace {
  display: flex;
  min-height: 100vh;
  background: var(--bg-f6f7f3);
}
.sidebar {
  width: 242px;
  flex-shrink: 0;
  background: var(--bg-20372c);
  padding: 32px 22px;
  display: flex;
  flex-direction: column;
  color: var(--fg-a7baa4);
  position: fixed;
  top: var(--customer-preview-height, 0px);
  bottom: 0;
  inset-inline-start: 0;
}
.sidebar .brand {
  font-size: 18px;
}
.business-switch {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-ffffff08);
  border: 1px solid var(--line-ffffff13);
  border-radius: var(--r-sm);
  padding: 14px 10px;
  margin: 40px 0 35px;
}
.business-switch > span {
  height: 30px;
  width: 30px;
  display: grid;
  place-items: center;
  background: var(--bg-d6e9bd);
  color: var(--fg-345536);
  border-radius: var(--r-sm);
  font-weight: 600;
}
.business-switch strong {
  font-size: 13px;
  color: var(--fg-f1f5eb);
  display: block;
  max-width: 135px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.business-switch small {
  font-size: 12px;
  display: block;
  margin-top: 4px;
  color: var(--on-dark-muted);
}
.sidebar-label {
  font-size: 12px;
  letter-spacing: 1.7px;
  margin: 0 10px 15px;
  color: var(--on-dark-muted);
}
.sidebar-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 12px;
  border-radius: var(--r-sm);
  font-size: 13px;
  margin-bottom: 8px;
}
.selected {
  background: var(--bg-d5e8b8);
  color: var(--fg-2a492f);
  font-weight: 600;
}
.sidebar-bottom {
  margin-top: auto;
}
.sidebar-bottom > div {
  display: flex;
  gap: 10px;
  border-top: 1px solid var(--line-ffffff12);
  padding-top: 20px;
}
.sidebar-bottom p {
  font-size: 12px;
  line-height: 1.7;
  color: var(--on-dark-muted);
}
.sidebar-bottom svg {
  flex-shrink: 0;
}
.sidebar-bottom button {
  display: flex;
  align-items: center;
  gap: 9px;
  background: none;
  border: 0;
  color: var(--fg-a7baa4);
  margin-top: 25px;
  font-size: 13px;
  padding: 0;
}
.workspace-main {
  margin-inline-start: 242px;
  width: calc(100% - 242px);
}
.workspace-header {
  height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 45px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  color: var(--muted);
  background: var(--bg-fcfdf9);
}
.workspace-header > span > span {
  margin: 0 12px;
  color: var(--muted);
}
.owner-badge {
  background: var(--bg-e3ebd7);
  border-radius: 50%;
  height: 30px;
  width: 30px;
  display: grid;
  place-items: center;
  color: var(--fg-37543a);
}
.workspace-content {
  max-width: 1200px;
  margin: auto;
  padding: 45px;
}
.dashboard-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.dashboard-title h1 {
  font-size: 34px;
  font-weight: 500;
  letter-spacing: -1.4px;
  margin-top: 13px;
}
.dashboard-title p {
  font-size: 13px;
  color: var(--muted);
  margin-top: 12px;
}
.summary-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 17px;
  margin-top: 30px;
}
.summary-cards article {
  background: var(--bg-ffffff);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 21px;
  position: relative;
}
.summary-cards svg {
  position: absolute;
  inset-inline-end: 19px;
  top: 22px;
  color: var(--fg-93a183);
}
.summary-cards span {
  display: block;
  color: var(--muted);
  font-size: 12px;
}
.summary-cards strong {
  font-weight: 500;
  font-size: 16px;
  display: block;
  margin-top: 14px;
  word-break: break-word;
  padding-inline-end: 20px;
}
.section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 42px 0 20px;
}
.section-title h2 {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.3px;
}
.section-title > span {
  font-size: 12px;
  color: var(--muted);
}
.connection-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.connection-card {
  background: var(--bg-ffffff);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 22px;
  display: flex;
  flex-direction: column;
  min-height: 235px;
}
.connection-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.provider-logo {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 8px;
  border-radius: var(--r-md);
  background: var(--bg-ffffff);
  border: 1px solid var(--border);
}
.provider-logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--line-e7eadd);
  border-radius: 20px;
  padding: 4px 9px;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
}
.status-ready {
  color: var(--success);
  background: var(--bg-f0f7e8);
  border-color: var(--line-cfe0c0);
}
.status-syncing {
  color: var(--fg-2f5a6b);
  background: var(--bg-eef5f8);
  border-color: var(--line-cfe1e8);
}
.status-attention {
  color: var(--danger);
  background: var(--bg-fff0eb);
  border-color: var(--line-f0cfc4);
}
.connection-card h3 {
  font-size: 15px;
  letter-spacing: -0.2px;
  margin: 18px 0 8px;
  font-weight: 600;
}
.connection-card > p {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.7;
  min-height: 38px;
}
.connection-actions {
  display: flex;
  gap: 8px;
  margin-top: auto;
  padding-top: 22px;
}
.connection-actions > button {
  flex: 1;
  border: 1px solid var(--line-e3e8d9);
  padding: 9px 12px;
  background: var(--bg-ffffff);
  border-radius: 5px;
  font-size: 12px;
  color: var(--fg-526c45);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
.connection-actions > button > svg:last-child {
  margin-inline-start: auto;
}
.connection-actions .disconnect {
  flex: 0;
  padding: 9px;
  color: var(--danger);
}
.connection-details {
  padding-top: 14px;
  font-size: 12px;
  line-height: 1.7;
  display: flex;
  flex-direction: column;
  color: var(--muted);
  word-break: break-word;
}
.connection-details strong {
  color: var(--fg-52684c);
  font-weight: 500;
}
.error-text {
  color: var(--danger);
  margin-top: 4px;
}
.error-code {
  display: block;
  font-size: 12px;
  opacity: 0.85;
  margin-top: 4px;
}
.reporting-note {
  display: flex;
  align-items: center;
  gap: 18px;
  background: var(--bg-eaf0e0);
  border: 1px solid var(--line-dfe7d3);
  border-radius: var(--r-sm);
  padding: 24px;
  margin-top: 30px;
}
.reporting-note > svg {
  color: var(--fg-72915a);
  flex-shrink: 0;
}
.reporting-note h3 {
  font-size: 14px;
}
.reporting-note p {
  font-size: 12px;
  color: var(--muted);
  margin-top: 7px;
  line-height: 1.7;
}
.reporting-note .pill,
.reporting-note .button {
  margin-inline-start: auto;
  font-size: 12px;
}
.reporting-note .button {
  flex-shrink: 0;
  font-size: 14px;
}
.reporting-note-logos {
  display: inline-flex;
  align-items: flex-end;
  flex-shrink: 0;
}
.reporting-note-logos img + img {
  margin-inline-start: -8px;
}
.notice {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-fff7e6);
  border: 1px solid var(--line-ebdfc3);
  color: var(--warning);
  border-radius: var(--r-sm);
  font-size: 13px;
  padding: 13px 16px;
  margin-top: 22px;
}
.notice svg {
  flex-shrink: 0;
}
.notice-success {
  background: var(--bg-f0f7e8);
  border-color: var(--line-cfe0c0);
  color: var(--success);
}
.notice-error {
  background: var(--bg-fff0eb);
  border-color: var(--line-f0cfc4);
  color: var(--danger);
}
.notice button {
  margin-inline-start: auto;
  border: 0;
  background: none;
  color: inherit;
  display: grid;
  place-items: center;
  min-width: 32px;
  min-height: 32px;
  border-radius: var(--r-sm);
}
dialog.modal {
  background: var(--bg-ffffff);
  color: var(--ink);
  border: 0;
  border-radius: var(--r-lg);
  padding: 35px;
  max-width: 500px;
  width: calc(100% - 40px);
  max-height: 90vh;
  overflow: auto;
}
dialog.modal::backdrop {
  background: var(--bg-17291ecc);
  backdrop-filter: blur(4px);
}
.modal-close {
  position: absolute;
  inset-inline-end: 14px;
  top: 14px;
  border: 0;
  background: none;
  color: var(--muted);
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--r-sm);
}
.modal-close:hover:not(:disabled) {
  background: var(--bg-f0f3ec);
}
.modal .connect-icon {
  margin-inline-start: 0;
  width: 48px;
  height: 48px;
  border-radius: var(--r-lg);
  margin-bottom: 20px;
}
.modal h2 {
  font-size: 25px;
  letter-spacing: -0.5px;
  font-weight: 500;
}
.modal > p {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.8;
  margin: 12px 0 22px;
}
.modal label {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-top: 17px;
}
.modal input {
  display: block;
  width: 100%;
  padding: 12px;
  border: 1px solid var(--line-849282);
  border-radius: var(--r-sm);
  background: var(--bg-fbfcf8);
  font-size: 13px;
  margin-top: 7px;
  color: var(--fg-30472d);
}
.modal form > .button {
  width: 100%;
  margin-top: 25px;
}
.confirm-dialog {
  max-width: 440px;
}
.confirm-dialog .connect-icon {
  background: var(--bg-fff0eb);
  color: var(--danger);
}
.confirm-actions {
  display: flex;
  gap: 10px;
  margin-top: 25px;
}
.confirm-actions .button {
  flex: 1;
}
.secondary {
  background: var(--bg-ffffff);
  color: var(--ink);
  border: 1px solid var(--line-c9d1c3);
}
.danger {
  background: var(--danger);
  color: var(--fg-ffffff);
}
.modal small {
  display: block;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.7;
  margin-top: 20px;
}
.spin {
  animation: spin 1.3s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@media (min-width: 1500px) {
  .hero {
    min-height: 740px;
  }
}
@media (max-width: 1150px) {
  .connection-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sidebar {
    width: 215px;
  }
  .workspace-main {
    margin-inline-start: 215px;
    width: calc(100% - 215px);
  }
  .workspace-content {
    padding: 30px;
  }
  .hero-actions {
    gap: 15px;
  }
  .hero-actions .text-link {
    font-size: 12px;
  }
  .floating-tag {
    inset-inline-end: 0;
  }
  .integration-strip strong {
    font-size: 13px;
  }
}
@media (max-width: 850px) {
  .landing {
    padding: 0 6%;
  }
  .nav {
    height: 80px;
  }
  .nav-links {
    gap: 15px;
  }
  .nav > .pill {
    display: none;
  }
  .hero {
    gap: 0;
  }
  .hero h1 {
    font-size: 60px;
  }
  .hero-copy > p {
    font-size: 14px;
  }
  .hero-actions {
    align-items: flex-start;
    flex-direction: column;
  }
  .chat-preview {
    width: 290px;
  }
  .conversation-stage {
    height: 660px;
  }
  .floating-tag {
    top: 25px;
    font-size: 11px;
  }
  .floating-security {
    bottom: 4px;
    inset-inline-start: -5px;
    font-size: 11px;
  }
  .hero-note {
    font-size: 12px;
  }
  .hero-note > span {
    padding: 0;
  }
  .integration-strip {
    flex-wrap: wrap;
    justify-content: center;
  }
  .integration-strip > span {
    max-width: none;
    width: 100%;
    text-align: center;
  }
  .sidebar {
    width: 185px;
    padding: 25px 15px;
  }
  .sidebar .brand {
    font-size: 14px;
  }
  .workspace-main {
    margin-inline-start: 185px;
    width: calc(100% - 185px);
  }
  .workspace-content {
    padding: 25px;
  }
  .workspace-header {
    padding: 0 25px;
  }
  .dashboard-title h1 {
    font-size: 27px;
  }
  .summary-cards {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .summary-cards article {
    padding: 15px;
  }
  .summary-cards strong {
    margin-top: 8px;
  }
  .connection-card {
    padding: 18px;
  }
  .reporting-note .pill {
    display: none;
  }
  .section-title > span {
    display: none;
  }
  .trust-banner p {
    max-width: 330px;
  }
  footer > span {
    display: none;
  }
}
@media (max-width: 600px) {
  .brand {
    font-size: 17px;
  }
  .nav-links a:not(.nav-lang):not(.nav-signin):not(.nav-signup) {
    display: none;
  }
  .nav-links {
    font-size: 12px;
  }
  .hero {
    grid-template-columns: 1fr;
    padding-top: 45px;
  }
  .hero h1 {
    font-size: 64px;
    letter-spacing: -3px;
  }
  .hero-copy > p {
    font-size: 15px;
  }
  .hero-actions {
    flex-direction: row;
    align-items: center;
  }
  .conversation-stage {
    height: 530px;
    margin-top: 25px;
  }
  .chat-preview {
    width: 320px;
  }
  .floating-security {
    inset-inline-start: 0;
    bottom: 14px;
  }
  .floating-tag {
    inset-inline-end: 0;
    top: 28px;
  }
  .hero-note {
    font-size: 12px;
  }
  .section-heading {
    display: block;
  }
  .section-heading h2 {
    font-size: 30px;
  }
  .section-heading > p {
    margin-top: 20px;
  }
  .how-section {
    padding: 55px 0;
  }
  .feature-grid {
    grid-template-columns: 1fr;
    gap: 25px;
  }
  .feature-grid p {
    max-width: none;
  }
  .trust-banner {
    padding: 22px;
    gap: 12px;
  }
  .trust-banner .pill {
    display: none;
  }
  .trust-banner h3 {
    font-size: 14px;
  }
  .trust-banner p {
    font-size: 12px;
  }
  footer {
    gap: 20px;
    flex-wrap: wrap;
  }
  .legal-doc {
    padding: 45px 0 60px;
  }
  .legal-doc section {
    margin-top: 32px;
    padding-top: 22px;
  }
  footer > a:last-child {
    font-size: 12px;
  }
  .connect-card {
    padding: 30px 22px;
    margin-top: 45px;
  }
  .connect-card h1 {
    font-size: 30px;
  }
  .connect-page {
    padding-top: 30px;
  }
  .sidebar {
    position: static;
    width: 100%;
    padding: 18px 20px;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
  }
  .sidebar .brand {
    font-size: 17px;
  }
  .business-switch,
  .sidebar-label,
  .sidebar-item,
  .sidebar-bottom > div {
    display: none;
  }
  .sidebar-bottom {
    margin-top: 0;
  }
  .sidebar-bottom button {
    margin-top: 0;
    font-size: 12px;
  }
  .workspace {
    display: block;
  }
  .workspace-main {
    width: 100%;
    margin: 0;
  }
  .workspace-header {
    height: 55px;
    padding: 0 20px;
  }
  .workspace-content {
    padding: 30px 20px;
  }
  .dashboard-title h1 {
    font-size: 27px;
  }
  .dashboard-title .pill {
    display: none;
  }
  .dashboard-title p {
    line-height: 1.7;
  }
  .summary-cards {
    grid-template-columns: 1fr;
  }
  .summary-cards article {
    padding: 16px;
  }
  .summary-cards strong {
    font-size: 14px;
  }
  .connection-grid {
    grid-template-columns: 1fr;
  }
  .connection-card {
    padding: 22px;
    min-height: 210px;
  }
  .status {
    font-size: 12px;
  }
  .connection-card p {
    font-size: 13px;
  }
  .connection-card h3 {
    font-size: 17px;
  }
  .connection-actions > button {
    font-size: 13px;
  }
  .reporting-note {
    padding: 20px;
  }
  .reporting-note h3 {
    font-size: 13px;
  }
  .modal {
    padding: 27px;
  }
  .modal label {
    font-size: 13px;
  }
  .modal input {
    font-size: 14px;
  }
}

.auth-form {
  display: grid;
  gap: 18px;
  text-align: start;
  margin: 24px 0;
}
.auth-form label {
  display: grid;
  gap: 8px;
  font-weight: 600;
}
.auth-form input,
.auth-form select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line-cbd5e1);
  border-radius: var(--r-md);
  background: var(--bg-ffffff);
  color: var(--fg-172033);
  font: inherit;
}
.auth-form input {
  direction: ltr;
}
.form-hint {
  margin-top: -8px;
  text-align: center;
  font-size: 14px;
  color: var(--muted);
}
/* Currency picker: a button that opens a searchable list with flags. */
.cur-field {
  position: relative;
  display: grid;
  gap: 8px;
}
.cur-label {
  font-weight: 600;
}
.cur-trigger {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--line-cbd5e1);
  border-radius: var(--r-md);
  background: var(--bg-ffffff);
  color: var(--fg-172033);
  text-align: start;
}
.cur-trigger:hover {
  border-color: var(--green-line);
}
.cur-trigger[aria-expanded='true'] {
  border-color: var(--green-line);
  box-shadow: var(--ring);
}
.cur-trigger .cur-name {
  flex: 1;
  font-weight: 600;
}
.cur-chevron {
  color: var(--muted);
  transition: transform 0.15s ease;
}
.cur-trigger[aria-expanded='true'] .cur-chevron {
  transform: rotate(180deg);
}
.cur-flag {
  width: 24px;
  height: 16px;
  flex-shrink: 0;
  border-radius: 3px;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgb(23 37 31 / 12%);
}
.cur-flag-none {
  display: inline-grid;
  place-items: center;
  background: var(--paper);
  color: var(--muted);
  font-size: 12px;
}
.cur-code {
  color: var(--muted);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.cur-panel {
  position: absolute;
  top: 100%;
  inset-inline: 0;
  z-index: 30;
  margin-top: 6px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--bg-ffffff);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.cur-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  color: var(--muted);
}
.auth-form .cur-search input,
.cur-search input {
  flex: 1;
  width: auto;
  padding: 4px 0;
  border: 0;
  outline: 0;
  background: transparent;
  direction: inherit;
  color: var(--ink);
}
.cur-search input:focus-visible {
  outline: 0;
}
.cur-list {
  max-height: 300px;
  margin: 0;
  padding: 6px;
  overflow-y: auto;
  list-style: none;
}
.cur-group {
  padding: 10px 10px 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}
.cur-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 10px;
  border-radius: var(--r-sm);
  cursor: pointer;
}
.cur-option .cur-name {
  flex: 1;
}
.cur-option.is-active {
  background: var(--good-bg, var(--bg-f0f7e8));
}
.cur-option[aria-selected='true'] .cur-name {
  font-weight: 600;
}
.cur-check {
  color: var(--green);
}
.cur-empty {
  padding: 18px 10px;
  color: var(--muted);
  text-align: center;
}
.auth-actions {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.auth-form .button {
  width: 100%;
  justify-content: center;
}
.auth-actions button:disabled {
  opacity: 0.55;
  cursor: default;
}
.guided-connect .step-title {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  margin-top: 0;
}
.guided-connect .step-hint {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.7;
  margin: 6px 0 0;
}
.input-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
  margin-top: 8px;
}
.input-row input {
  margin-top: 0;
  flex: 1;
  min-width: 0;
}
.input-row .button {
  padding: 10px 14px;
  gap: 6px;
  flex-shrink: 0;
}
.check-ok {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--success);
  font-size: 13px;
  margin: 12px 0 0;
}
.check-ok svg {
  flex-shrink: 0;
}
.connect-option {
  border-top: 1px solid var(--border);
  margin-top: 22px;
  padding-top: 20px;
}
.connect-option > p {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.8;
  margin: 8px 0 16px;
}
.connect-option > .button {
  width: 100%;
  margin-top: 20px;
}
.connect-option > p + .button {
  margin-top: 0;
}
.text-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 0;
  padding: 10px 0;
  min-height: 44px;
  color: var(--green);
  font-size: 13px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.error .text-button {
  color: inherit;
  padding: 4px 0;
  min-height: 0;
}
.manual-steps {
  margin: 12px 0 0;
  padding-inline-start: 20px;
  font-size: 13px;
  line-height: 1.8;
  color: var(--ink);
}
.manual-steps a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--green);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.security-note {
  background: var(--bg-f3f6ef);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 14px 16px;
  margin-top: 22px;
}
.security-note h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--success);
  margin: 0;
}
.security-note ul {
  margin: 8px 0 0;
  padding-inline-start: 18px;
  font-size: 12px;
  line-height: 1.8;
  color: var(--muted);
}

.connection-info {
  display: grid;
  gap: 14px;
  margin: 4px 0 20px;
  text-align: start;
}
.connection-info h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  margin: 0 0 4px;
}
.connection-info p,
.connection-info ul {
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--muted);
}
.connection-info ul {
  padding-inline-start: 18px;
}
.connection-info .security-note {
  margin-top: 0;
}
.connection-info .security-note a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.connection-never {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}
.account-choices {
  display: grid;
  gap: 8px;
  max-height: 320px;
  overflow-y: auto;
  margin: 0 0 16px;
  padding: 0;
  border: 0;
}
.modal .account-choice {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  cursor: pointer;
  color: var(--ink);
  font-size: 14px;
}
.modal .account-choice input {
  width: 18px;
  height: 18px;
  flex: none;
  margin: 0;
  padding: 0;
  accent-color: var(--green);
}
.modal .account-choice:has(input:checked) {
  border-color: var(--green-line);
  background: var(--bg-f3f6ef);
}
.account-choice span {
  display: grid;
  gap: 2px;
  text-align: start;
}
.modal .account-choice small {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

/* ---------- Workspace pages: data & insights, costs ---------- */
:root {
  /* Data series are blue-petrol, so a line or a bar says how much, not whether it is good.
     Green and terracotta are kept for what is good or bad: profit, loss, costs, changes. */
  --series-current: #2f5a6b;
  --series-soft: #b5cbd3;
  --series-previous: #8c948a;
  --area: #2f5a6b14;
  --profit: #1f7a45;
  --cost: #b4472c;
  --grid: #e9ece5;
  --good-bg: #f0f7e8;
  --bad-bg: #fff0eb;
  --warn-bg: #fff7e6;
  --info: #2f5a6b;
  --info-bg: #eef5f8;
}
.workspace-tabs {
  display: none;
}
.workspace-content .muted {
  color: var(--muted);
}
.ins-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}
.ins-head h1 {
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.6px;
}
.ins-head p {
  color: var(--muted);
  font-size: 13px;
  margin-top: 6px;
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0 20px;
}
.chips button {
  border: 1px solid var(--line-d3d9cc);
  background: var(--bg-ffffff);
  color: var(--ink);
  border-radius: var(--r-pill);
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  min-height: 38px;
}
.chips button[aria-pressed='true'] {
  background: var(--bg-20372c);
  border-color: var(--line-20372c);
  color: var(--fg-f4f8ef);
}
.ins-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  padding: 40px 0;
}
.ins-today {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 22px;
  background: var(--bg-ffffff);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 12px 16px;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 14px;
}
.ins-today b {
  color: var(--ink);
  font-size: 15px;
  margin-inline-start: 4px;
}
.ins-today-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  color: var(--ink);
}
.delta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: fit-content;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 700;
  border-radius: var(--r-pill);
  padding: 2px 8px;
}
.delta.good {
  color: var(--success);
  background: var(--good-bg);
}
.delta.bad {
  color: var(--danger);
  background: var(--bad-bg);
}
.delta.flat {
  color: var(--muted);
  background: var(--bg-eef0eb);
}
.ins-insights {
  background: linear-gradient(135deg, var(--bg-fbfdf7) 0%, var(--bg-f1f7e6) 100%);
  border: 1px solid var(--line-d8e6c4);
  border-radius: var(--r-lg);
  padding: 12px 16px 6px;
  margin-bottom: 16px;
}
.ins-insights-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ins-insights h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 800;
  color: var(--fg-2a492f);
}
.ins-insights {
  padding-bottom: 14px;
}
/* Insights as open cards, side by side: what happened, why it matters, what to do. */
.ins-cards {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
}
.ins-cards li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
  padding: 14px 16px;
  background: var(--bg-ffffff);
  border: 1px solid var(--line-e3ecd6);
  border-radius: var(--r-md);
  font-size: 13px;
  line-height: 1.65;
  color: var(--fg-3c4a40);
}
.ins-cards .title {
  font-size: 15px;
  line-height: 1.4;
  color: var(--ink);
}
.ins-cards p {
  margin: 0;
}
.ins-cards .ins-action b {
  color: var(--focus);
}
.ins-card-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  border-radius: var(--r-pill);
  padding: 2px 9px;
  white-space: nowrap;
}
.ins-attention .ins-card-tag,
.ins-attention .tag {
  color: var(--danger);
}
.ins-attention .ins-card-tag,
.ins-attention .tag {
  background: var(--bad-bg);
}
.ins-money .ins-card-tag,
.ins-money .tag {
  color: var(--warning);
}
.ins-money .ins-card-tag,
.ins-money .tag {
  background: var(--warn-bg);
}
.ins-opportunity .ins-card-tag,
.ins-opportunity .tag {
  color: var(--success);
}
.ins-opportunity .ins-card-tag,
.ins-opportunity .tag {
  background: var(--good-bg);
}
.ins-info .ins-card-tag,
.ins-info .tag {
  color: var(--info);
}
.ins-info .ins-card-tag,
.ins-info .tag {
  background: var(--info-bg);
}
.ins-hero {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
  margin-bottom: 14px;
}
.ins-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.ins-card {
  background: var(--bg-ffffff);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 16px 18px;
  display: grid;
  gap: 6px;
  align-content: start;
  box-shadow: var(--shadow-sm);
}
.ins-card .label {
  font-size: 13px;
  color: var(--muted);
}
.ins-card .value {
  font: 700 24px var(--font-display);
  letter-spacing: -0.5px;
  font-variant-numeric: tabular-nums;
}
.ins-card .sub {
  font-size: 12px;
  color: var(--muted);
}
.ins-card .sub a {
  color: var(--focus);
  font-weight: 600;
  text-decoration: underline;
}
.ins-card.headline {
  background: var(--bg-20372c);
  border-color: var(--line-20372c);
  color: var(--fg-f1f5eb);
  padding: 22px 24px;
}
.ins-card.headline .label,
.ins-card.headline .sub {
  color: var(--fg-b9cbb6);
}
.ins-card.headline .sub a {
  color: var(--lime);
}
.ins-card.headline .value {
  font-size: 38px;
}
/* The share of sales with a known product cost: how sure the profit is. */
.ins-card.headline .accuracy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin-top: 6px;
  font-size: 12px;
  color: var(--fg-b9cbb6);
}
.ins-card.headline .accuracy b {
  color: var(--fg-f1f5eb);
}
.accuracy-track {
  flex: 1 1 80px;
  max-width: 140px;
  height: 6px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.16);
  overflow: hidden;
}
.accuracy-track i {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: var(--lime-bg);
}
.ins-card.headline .accuracy a {
  color: var(--lime);
  font-weight: 600;
}
.ins-card.headline.bad .value {
  color: var(--fg-ffc9b8);
}
.ins-card.headline .delta.good {
  background: var(--lime-bg);
  color: var(--fg-20372c);
}
.ins-card.headline .delta.bad {
  background: var(--bg-ffd9cc);
  color: var(--fg-7a2f1f);
}
.ins-card.large .value {
  font-size: 30px;
}
.ins-panel {
  background: var(--bg-ffffff);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 18px 20px;
  margin-bottom: 16px;
  min-width: 0;
  box-shadow: var(--shadow-sm);
}
.ins-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}
.ins-grid > .ins-panel {
  margin-bottom: 16px;
}
.ins-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.ins-panel-head h2 {
  font-size: 16px;
  font-weight: 700;
}
.ins-panel-head p {
  font-size: 12px;
  color: var(--muted);
  margin-top: 3px;
}
.ins-empty {
  display: grid;
  gap: 12px;
  justify-items: start;
  font-size: 14px;
  line-height: 1.7;
}
.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  font-size: 12px;
  color: var(--muted);
}
.legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.swatch {
  width: 16px;
  height: 3px;
  border-radius: 2px;
  display: inline-block;
}
.swatch.current {
  background: var(--series-current);
}
.swatch.previous {
  background: var(--series-previous);
  height: 2px;
}
.key {
  width: 16px;
  height: 10px;
  border-radius: 3px;
  display: inline-block;
}
.chart {
  position: relative;
}
.chart svg {
  display: block;
  width: 100%;
  height: auto;
  direction: ltr;
  overflow: visible;
}
.chart-grid line {
  stroke: var(--grid);
  stroke-width: 1;
}
.chart-axis text {
  fill: var(--muted);
  font-size: 11px;
  font-family: var(--font-body);
}
.chart-area {
  fill: var(--area);
}
.chart-line {
  fill: none;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.chart-line.current {
  stroke: var(--series-current);
  stroke-width: 2;
}
.chart-line.previous {
  stroke: var(--series-previous);
  stroke-width: 1.5;
  stroke-dasharray: 4 3;
}
.chart-dot {
  fill: var(--series-current);
  stroke: var(--fg-ffffff);
  stroke-width: 2;
}
.chart-cross {
  stroke: var(--muted);
  stroke-width: 1;
}
.chart-tip {
  position: absolute;
  z-index: 5;
  pointer-events: none;
  transform: translate(-50%, calc(-100% - 12px));
  background: var(--bg-17251f);
  color: var(--fg-f3f8ef);
  border-radius: var(--r-sm);
  padding: 8px 11px;
  font-size: 12px;
  line-height: 1.55;
  white-space: nowrap;
  box-shadow: 0 8px 22px #0f1a1440;
}
.chart-tip .muted {
  color: var(--fg-b9c9b6);
}
.table-view {
  margin-top: 10px;
  font-size: 13px;
}
.table-view summary {
  color: var(--muted);
  cursor: pointer;
  width: fit-content;
  padding: 6px 0;
}
.workspace-content .scroll {
  overflow-x: auto;
}
.workspace-content .scroll.daily {
  max-height: 420px;
  overflow-y: auto;
}
.workspace-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.workspace-content th {
  text-align: start;
  font-weight: 600;
  color: var(--muted);
  font-size: 12px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  background: var(--bg-ffffff);
  position: sticky;
  top: 0;
}
.workspace-content td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--line-f0f2ed);
  vertical-align: middle;
}
.workspace-content tr:last-child td {
  border-bottom: 0;
}
.workspace-content td.n,
.workspace-content th.n {
  text-align: end;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.workspace-content td.strong {
  font-weight: 700;
}
.workspace-content td.pos {
  color: var(--success);
}
.workspace-content td.neg {
  color: var(--danger);
}
.workspace-content tr.today td {
  background: var(--bg-f4f9ec);
}
.prod-name {
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  border-radius: var(--r-pill);
  padding: 2px 8px;
  white-space: nowrap;
}
.chip.up {
  color: var(--success);
  background: var(--good-bg);
}
.chip.down {
  color: var(--danger);
  background: var(--bad-bg);
}
.chip.flat {
  color: var(--muted);
  background: var(--bg-eef0eb);
}
.chip.warn {
  color: var(--warning);
  background: var(--warn-bg);
  margin-top: 4px;
}
.bar-cell {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.meter {
  height: 6px;
  border-radius: 3px;
  background: var(--bg-edf0e9);
  width: 60px;
  overflow: hidden;
}
.meter i {
  display: block;
  height: 100%;
  background: var(--series-current);
  border-radius: 3px;
}
.hbars {
  display: grid;
  gap: 8px;
}
.hbar {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr) 112px;
  align-items: center;
  gap: 12px;
  font-size: 13px;
}
.hbar.total .name {
  font-weight: 700;
}
.hbar.total:last-child {
  border-top: 1px solid var(--border);
  padding-top: 10px;
  margin-top: 2px;
}
.hbar .track {
  position: relative;
  height: 18px;
}
.hbar .track i {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: var(--r-xs);
}
.seg-total {
  background: var(--series-current);
}
/* The bottom line keeps its meaning: green for a profit, terracotta for a loss. */
.hbar.total:last-child.is-good .seg-total {
  background: var(--profit);
}
.hbar.total:last-child.is-bad .seg-total {
  background: var(--cost);
}
.seg-cost {
  background: var(--cost);
  opacity: 0.88;
}
.seg-previous {
  background: var(--series-previous);
}
.seg-projected {
  background: var(--bg-2f5a6b1f);
  border: 1.5px dashed var(--series-current);
}
.hbar .val {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: end;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.25;
}
.hbar .val small {
  font-size: 11px;
  font-weight: 400;
  color: var(--muted);
}
.forecast-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.forecast-head strong {
  font: 700 28px var(--font-display);
  letter-spacing: -0.5px;
}
.ins-panel .legend {
  margin-top: 12px;
}
.footnote {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
  margin-top: 12px;
}
.footnote a {
  color: var(--focus);
  font-weight: 600;
  text-decoration: underline;
}
.columns {
  position: relative;
}
.columns-plot {
  display: grid;
  gap: 3px;
  height: 150px;
  align-items: end;
  border-bottom: 1px solid var(--grid);
  direction: ltr;
}
.column {
  height: 100%;
  display: flex;
  align-items: flex-end;
  cursor: default;
  border-radius: 4px 4px 0 0;
}
.column i {
  display: block;
  width: 100%;
  background: var(--series-soft);
  border-radius: 4px 4px 0 0;
}
.column.peak i,
.column:hover i,
.column:focus-visible i {
  background: var(--series-current);
}
.columns-labels {
  display: grid;
  gap: 3px;
  direction: ltr;
  margin-top: 4px;
  font-size: 11px;
  color: var(--muted);
  text-align: center;
}
.columns-labels .thin {
  visibility: hidden;
}
.columns .chart-tip {
  transform: translate(-50%, calc(-100% - 6px));
}
.heat {
  border-collapse: separate !important;
  border-spacing: 4px;
}
.heat th,
.heat td {
  border: 0 !important;
  padding: 0 !important;
  text-align: center;
  position: static !important;
}
.heat tbody th {
  text-align: start;
  font-size: 13px;
  color: var(--ink);
  font-weight: 600;
  white-space: normal;
  padding-inline-end: 8px !important;
}
.hc {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  border-radius: var(--r-sm);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.hc.low {
  background: var(--bg-f3f4f1);
  color: var(--muted);
  font-weight: 400;
}
.hc.peak {
  box-shadow: inset 0 0 0 2px var(--ink);
}
.scale {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--muted);
}
.scale i {
  width: 16px;
  height: 10px;
  border-radius: 2px;
  display: inline-block;
}
.bundles {
  display: grid;
  gap: 14px;
}
.bundle .row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
  margin-bottom: 5px;
}
.bundle-offer {
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
}
.bundle-offer strong {
  color: var(--ink);
}
.bundle .track {
  height: 8px;
  border-radius: var(--r-xs);
  background: var(--bg-edf0e9);
  overflow: hidden;
}
.bundle .track i {
  display: block;
  height: 100%;
  border-radius: var(--r-xs);
  background: var(--series-current);
}
@media (max-width: 1150px) {
  .ins-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 600px) {
  .workspace-tabs {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-fcfdf9);
  }
  .workspace-tabs a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    padding: 8px 12px;
    border-radius: var(--r-pill);
    font-size: 13px;
    color: var(--muted);
    min-height: 38px;
  }
  .workspace-tabs a.active {
    background: var(--bg-20372c);
    color: var(--fg-f4f8ef);
    font-weight: 600;
  }
  .ins-head h1 {
    font-size: 24px;
  }
  .ins-hero {
    grid-template-columns: minmax(0, 1fr);
  }
  .ins-card.headline .value {
    font-size: 30px;
  }
  .ins-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ins-card .value {
    font-size: 20px;
  }
  .hbar {
    grid-template-columns: 86px minmax(0, 1fr) 90px;
    gap: 8px;
  }
  .chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
  }
  .chips button {
    flex-shrink: 0;
  }
}
.costs-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 16px;
  align-items: start;
}
.costs-main {
  min-width: 0;
}
.workspace-content .field-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px;
  gap: 12px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--line-f0f2ed);
}
.workspace-content .field-row label {
  font-size: 14px;
  font-weight: 600;
}
.workspace-content .field-row small {
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: var(--muted);
  margin-top: 2px;
}
.money-input {
  display: flex;
  align-items: center;
  border: 1px solid var(--line-849282);
  border-radius: var(--r-sm);
  background: var(--bg-fbfcf8);
  overflow: hidden;
}
.money-input:focus-within {
  outline: 3px solid var(--focus);
  outline-offset: 1px;
}
.money-input input {
  border: 0;
  background: transparent;
  width: 100%;
  min-width: 0;
  padding: 9px 10px;
  font-size: 14px;
  text-align: end;
  outline: none;
}
.money-input input[aria-invalid='true'] {
  background: var(--bad-bg);
}
.money-input span {
  padding: 0 10px;
  color: var(--muted);
  font-size: 13px;
}
.money-input.compact {
  width: 120px;
  margin-inline-start: auto;
}
.money-input.compact input {
  padding: 7px 8px;
}
.workspace-content .check {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 14px;
  padding-top: 12px;
}
.workspace-content .check input {
  width: 18px;
  height: 18px;
  accent-color: var(--focus);
}
.expense-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 120px 40px;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}
.expense-row.once {
  grid-template-columns: minmax(0, 1fr) 150px 120px 40px;
}
.expense-row > input {
  border: 1px solid var(--line-849282);
  border-radius: var(--r-sm);
  background: var(--bg-fbfcf8);
  padding: 8px 10px;
  font-size: 14px;
  min-width: 0;
}
.expense-row .money-input.compact {
  width: auto;
}
.expense-row .expense-note {
  grid-column: 1 / -1;
  margin: -2px 0 0;
  color: var(--muted);
  font-size: 12px;
}
/* Cost rules: type, words, amount, unit, remove; the preview runs under the row. */
.rule-row {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) 100px 110px 40px;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
}
.rule-row > input,
.rule-row > select {
  border: 1px solid var(--line-849282);
  border-radius: var(--r-sm);
  background: var(--bg-fbfcf8);
  padding: 8px 10px;
  font-size: 14px;
  min-width: 0;
  height: 38px;
}
.rule-row .money-input.compact {
  width: auto;
}
.rule-preview {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 12px;
  margin-top: -4px;
}
.rule-preview:empty {
  display: none;
}
.rule-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 4px;
}
.icon-button {
  border: 1px solid var(--border);
  background: var(--bg-ffffff);
  border-radius: var(--r-sm);
  height: 38px;
  display: grid;
  place-items: center;
  color: var(--danger);
}
.add-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  border: 1px dashed var(--line-b8c2b2);
  background: none;
  border-radius: var(--r-sm);
  padding: 10px 12px;
  color: var(--focus);
  font-weight: 600;
  font-size: 14px;
}
.qty-group {
  display: grid;
  gap: 12px;
  padding: 14px;
  margin-bottom: 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg-fbfcf8);
}
.qty-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 90px 40px;
  gap: 8px;
}
.qty-group input:not([type='number']),
.qty-group select {
  border: 1px solid var(--line-849282);
  border-radius: var(--r-sm);
  background: var(--bg-ffffff);
  padding: 8px 10px;
  font-size: 14px;
  min-width: 0;
  height: 38px;
  width: 100%;
}
.qty-head input {
  font-weight: 600;
}
.qty-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 6px;
}
.qty-products {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.qty-products .qty-label {
  width: 100%;
  margin-bottom: 0;
}
.qty-chip {
  gap: 2px;
  padding-inline-end: 2px;
  max-width: 100%;
  white-space: normal;
}
.qty-chip button {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--muted);
}
.qty-search {
  position: relative;
  flex: 1 1 200px;
}
.qty-search ul {
  position: absolute;
  inset-inline: 0;
  top: calc(100% + 4px);
  z-index: 5;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: var(--bg-ffffff);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.12);
}
.qty-search li button {
  width: 100%;
  text-align: start;
  border: 0;
  background: none;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 14px;
}
.qty-search li button:hover,
.qty-search li button:focus-visible {
  background: var(--bg-fbfcf8);
}
.qty-tiers {
  display: grid;
  gap: 8px;
}
.qty-tiers .qty-label {
  margin-bottom: 0;
}
.qty-tier {
  display: grid;
  grid-template-columns: 120px 16px 150px minmax(0, 1fr) 40px;
  gap: 8px;
  align-items: center;
}
.qty-tier .money-input.compact {
  width: auto;
  margin: 0;
}
.qty-equals {
  text-align: center;
  color: var(--muted);
  font-weight: 600;
}
.qty-per {
  font-size: 12px;
}
.qty-tiers .text-button {
  justify-self: start;
  padding: 4px 0;
  min-height: 32px;
}
.qty-preview {
  margin: 0;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  background: var(--good-bg);
  font-size: 13px;
}
.qty-preview p {
  margin: 0 0 4px;
  font-weight: 600;
}
.qty-examples {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 6px;
  padding: 0;
  list-style: none;
}
.qty-examples li {
  display: grid;
  justify-items: center;
  min-width: 64px;
  padding: 4px 10px;
  border-radius: var(--r-sm);
  background: var(--bg-ffffff);
  border: 1px solid var(--border);
}
.qty-examples span {
  font-size: 11px;
  color: var(--muted);
}
.qty-examples strong {
  font-size: 14px;
  direction: ltr;
}
.qty-preview small {
  color: var(--muted);
  font-size: 12px;
}
.qty-missing {
  background: none;
  padding: 0;
  color: var(--muted);
  font-size: 12px;
}
@media (max-width: 600px) {
  .qty-tier {
    grid-template-columns: minmax(0, 1fr) 14px minmax(0, 1.2fr) 40px;
  }
  .qty-per {
    display: none;
  }
}
.costs-summary {
  background: var(--bg-20372c);
  color: var(--fg-f1f5eb);
  border-radius: var(--r-lg);
  padding: 20px;
  display: grid;
  gap: 12px;
  position: sticky;
  top: 20px;
}
.costs-summary h2 {
  font-size: 17px;
}
.summary-line {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
  color: var(--fg-b9cbb6);
}
.summary-line strong {
  color: var(--fg-f1f5eb);
  font-variant-numeric: tabular-nums;
}
.breakeven {
  background: var(--bg-ffffff12);
  border-radius: var(--r-sm);
  padding: 12px;
  font-size: 13px;
  line-height: 1.7;
}
.breakeven b {
  color: var(--lime);
}
.costs-summary .button {
  width: 100%;
  background: var(--lime-bg);
  color: var(--fg-20372c);
}
.costs-summary .button:disabled {
  opacity: 0.55;
}
.save-state {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 20px;
  font-size: 12px;
  color: var(--fg-b9cbb6);
  margin: 0;
}
@media (max-width: 1150px) {
  .costs-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .costs-summary {
    position: static;
  }
}
@media (max-width: 600px) {
  .workspace-content .field-row {
    grid-template-columns: minmax(0, 1fr) 120px;
  }
  .expense-row.once {
    grid-template-columns: minmax(0, 1fr) 110px 40px;
  }
  .expense-row.once input[type='date'] {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  .rule-row {
    grid-template-columns: minmax(0, 1fr) 68px 88px 38px;
  }
  .rule-row > select {
    padding: 6px;
    font-size: 13px;
  }
  .rule-row > input:not([type='number']) {
    grid-column: 1 / -1;
    grid-row: 1;
  }
  .rule-actions {
    grid-template-columns: 1fr;
  }
}
.costs-grid {
  margin-top: 20px;
}
@media (max-width: 600px) {
  .workspace-content .hide-sm {
    display: none;
  }
  .money-input.compact {
    width: 100px;
  }
}
.logout-error {
  font-size: 12px;
  color: var(--fg-ffc9b8);
  margin: 8px 0 0;
}
.store-list {
  display: grid;
  gap: 12px;
  margin: 24px 0;
}
.store-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  text-align: start;
}
.store-option p {
  margin: 4px 0;
  font-size: 12px;
}

/* ---------- Marketing funnel ---------- */
.funnel {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.funnel li {
  display: grid;
  grid-template-columns: minmax(96px, 150px) 1fr auto minmax(96px, auto);
  align-items: center;
  gap: 12px;
  font-size: 13px;
}
.funnel-label {
  color: var(--ink);
}
.funnel-track {
  height: 14px;
  background: var(--grid);
  border-radius: var(--r-xs);
  overflow: hidden;
}
.funnel-track i {
  display: block;
  height: 100%;
  background: var(--series-current);
  border-radius: 0 4px 4px 0;
}
[dir='rtl'] .funnel-track i {
  border-radius: 4px 0 0 4px;
}
.funnel-value {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  text-align: end;
}
.funnel-rate {
  color: var(--muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.funnel-subtitle {
  font-size: 14px;
  font-weight: 600;
  margin: 22px 0 10px;
}
.funnel-missing {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 14px 16px;
  border: 1px dashed var(--border);
  border-radius: var(--r-md);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}
.funnel-missing a {
  color: var(--green);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (max-width: 640px) {
  .funnel li {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 10px;
  }
  .funnel li > * {
    min-width: 0;
  }
  .funnel-track {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  .funnel-rate {
    grid-column: 1 / -1;
    white-space: normal;
  }
}

.auth-form label.consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-weight: 400;
  line-height: 1.6;
}
.auth-form .consent input {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 4px;
  padding: 0;
}
.vat-choice {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
}
.vat-choice legend {
  margin-bottom: 8px;
  padding: 0;
  font-weight: 600;
}
.auth-form .vat-choice label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--line-cbd5e1);
  border-radius: var(--r-md);
  background: var(--bg-ffffff);
  font-weight: 400;
  cursor: pointer;
}
.auth-form .vat-choice label:has(input:checked) {
  border-color: var(--line-203c2d);
  box-shadow: 0 0 0 1px #203c2d;
  background: var(--bg-f5f7f2);
}
.auth-form .vat-choice input {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 2px;
  padding: 0;
  accent-color: var(--fg-203c2d);
}
.vat-choice span {
  display: grid;
  gap: 2px;
}
.connect-card .vat-choice small {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}
.vat-choice p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}
.auth-form input[autocomplete='organization'] {
  direction: inherit;
}
.terms-card {
  max-width: 800px;
  text-align: start;
}

.legal-page.default-en:not(:has(> #he:target)) > #he {
  display: none;
}
.legal-page.default-en:not(:has(> #he:target)) > #en {
  display: block;
}
/* Costs: the quick way to cost hundreds of products. */
.coverage-bar {
  height: 8px;
  border-radius: var(--r-pill);
  background: var(--border);
  overflow: hidden;
  margin: 4px 0 16px;
}
.coverage-bar span {
  display: block;
  height: 100%;
  background: var(--green-bg);
  border-radius: inherit;
}
.quick-steps {
  margin: 0;
  padding-inline-start: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink);
}
.quick-steps li::marker {
  color: var(--green);
  font-weight: 700;
}
.quick-steps li:last-child {
  list-style: none;
  margin-inline-start: -20px;
  color: var(--muted);
}
.quick-steps .rule-actions {
  margin-top: 10px;
}
.option-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 13px;
  color: var(--muted);
}
.chip-button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--border);
  background: var(--white-bg);
  color: var(--ink);
  border-radius: var(--r-pill);
  padding: 4px 10px;
  font-size: 13px;
  cursor: pointer;
}
.chip-button small {
  color: var(--muted);
}
.chip-button:hover:not(:disabled) {
  border-color: var(--green-line);
  background: var(--lime-bg);
}
.chip-button:disabled {
  opacity: 0.5;
  cursor: default;
}
/* The chat with the bot: a launcher in the bottom corner where lines end (right in English,
   left in Hebrew), so it never sits on the start of a heading or a figure, opening a panel
   above it. The page keeps room under its last line for it. */
.chat-widget {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 60;
}
.chat-widget[dir='rtl'] {
  right: auto;
  left: 24px;
}
.workspace-content {
  padding-bottom: 110px;
}
/* A round button; its label slides out on hover or focus, so at rest it hides little. */
.chat-launcher {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 56px;
  height: 56px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--ink-bg);
  color: var(--white);
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 10px 28px rgb(23 37 31 / 28%);
}
.chat-launcher svg {
  flex-shrink: 0;
  color: var(--lime);
}
.chat-launcher-label {
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  transition:
    max-width var(--t-slow) var(--ease-out),
    margin var(--t-slow) var(--ease-out);
}
.chat-launcher:hover .chat-launcher-label,
.chat-launcher:focus-visible .chat-launcher-label {
  max-width: 140px;
  margin-inline-start: 8px;
}
.chat-launcher:hover {
  background: var(--green-bg);
}
.chat-panel {
  width: 380px;
  height: min(580px, calc(100vh - 48px));
  display: flex;
  flex-direction: column;
  background: var(--white-bg);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: 0 18px 48px rgb(23 37 31 / 22%);
  overflow: hidden;
}
.chat-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: var(--ink-bg);
  color: var(--white);
}
.chat-header div {
  flex: 1;
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
.chat-header span:not(.chat-avatar) {
  font-size: 12px;
  color: var(--on-dark-muted);
}
.chat-avatar {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--lime-bg);
  color: var(--ink);
}
.chat-header button {
  border: 0;
  background: transparent;
  color: var(--white);
  cursor: pointer;
  padding: 6px;
  border-radius: var(--r-sm);
}
.chat-header button:hover {
  background: rgb(255 255 255 / 12%);
}
.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--paper);
}
.chat-bubble {
  max-width: 86%;
  padding: 10px 13px;
  border-radius: var(--r-lg);
  font-size: 14px;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.chat-bubble.bot {
  align-self: flex-start;
  background: var(--white-bg);
  border: 1px solid var(--border);
}
.chat-bubble.me {
  align-self: flex-end;
  background: var(--green-bg);
  color: var(--white);
}
.chat-bubble a {
  color: var(--green);
  text-decoration: underline;
}
.chat-bubble.me a {
  color: var(--white);
}
.chat-bubble code {
  font-size: 13px;
  background: var(--paper);
  padding: 1px 4px;
  border-radius: var(--r-xs);
}
.chat-buttons {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
  white-space: normal;
}
.chat-buttons div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.chat-buttons button,
.chat-choices button {
  border: 1px solid var(--green-line);
  background: var(--white-bg);
  color: var(--green);
  border-radius: var(--r-pill);
  padding: 6px 12px;
  font-size: 13px;
  cursor: pointer;
}
.chat-buttons button:hover,
.chat-choices button:hover {
  background: var(--lime-bg);
}
.chat-buttons button:disabled,
.chat-choices button:disabled {
  opacity: 0.55;
  cursor: default;
}
.chat-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.chat-typing {
  display: flex;
  gap: 4px;
  padding: 14px;
}
.chat-typing span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--muted-bg);
  animation: chat-dot 1.2s infinite ease-in-out;
}
.chat-typing span:nth-child(2) {
  animation-delay: 0.15s;
}
.chat-typing span:nth-child(3) {
  animation-delay: 0.3s;
}
@keyframes chat-dot {
  0%,
  80%,
  100% {
    opacity: 0.3;
    transform: translateY(0);
  }
  40% {
    opacity: 1;
    transform: translateY(-3px);
  }
}
.chat-note {
  color: var(--muted);
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.chat-error {
  color: var(--danger);
  font-size: 13px;
  margin: 0;
}
.chat-input {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--border);
  background: var(--white-bg);
}
.chat-input textarea {
  flex: 1;
  resize: none;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 9px 12px;
  font: inherit;
  font-size: 14px;
  max-height: 120px;
  field-sizing: content;
}
.chat-input button {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: var(--ink-bg);
  color: var(--white);
  cursor: pointer;
}
.chat-input button:disabled {
  opacity: 0.4;
  cursor: default;
}
.chat-attach {
  position: relative;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 50%;
  color: var(--muted);
  cursor: pointer;
}
.chat-attach:hover,
.chat-attach:focus-within {
  background: var(--border);
  color: var(--ink);
}
.chat-attach input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
[dir='rtl'] .chat-send-icon {
  transform: scaleX(-1);
}
@media (max-width: 600px) {
  .chat-widget {
    right: 16px;
    bottom: 16px;
  }
  .chat-widget[dir='rtl'] {
    left: 16px;
  }

  .chat-panel {
    position: fixed;
    inset: auto 8px 8px 8px;
    width: auto;
    height: calc(100dvh - 16px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .chat-typing span {
    animation: none;
  }
}
/* Advertising by platform: one card per platform, with its logo. */
.ad-platforms {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
}
.ad-platform {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--white-bg);
}
.ad-platform header {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ad-platform header .muted {
  margin-inline-start: auto;
  font-size: 12px;
  color: var(--muted);
}
.ad-spend {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.ad-spend .value {
  font: 700 24px var(--font-display);
  font-variant-numeric: tabular-nums;
}
.ad-share {
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--border);
  overflow: hidden;
}
.ad-share i {
  display: block;
  height: 100%;
  background: var(--ink-bg);
  border-radius: inherit;
}
.ad-platform dl {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 12px;
  font-size: 13px;
}
.ad-platform dl div {
  display: flex;
  flex-direction: column;
}
.ad-platform dt {
  color: var(--muted);
  font-size: 12px;
}
.ad-platform dd {
  margin: 0;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.ad-platform dd small {
  color: var(--muted);
  font-weight: 400;
}
.ad-platform .tone-good dd {
  color: var(--success);
}
.ad-platform .tone-bad dd {
  color: var(--danger);
}
.ad-platform.add {
  align-items: center;
  justify-content: center;
  border-style: dashed;
  color: var(--muted);
  text-decoration: none;
  min-height: 120px;
}
.ad-platform.add span {
  color: var(--green);
  font-weight: 600;
}
.platform-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.account-switcher {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid var(--line-b9cdb6);
  border-radius: var(--r-md);
  background: var(--bg-f2f7ed);
  color: var(--fg-203c2f);
  text-align: start;
  cursor: pointer;
  min-width: 200px;
}
.account-switcher span,
.account-option span {
  flex: 1;
  min-width: 0;
}
.account-switcher strong,
.account-switcher small,
.account-option strong,
.account-option small {
  display: block;
}
.account-switcher strong {
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-switcher small,
.account-option small {
  font-size: 12px;
  margin-top: 3px;
}
.account-picker {
  width: min(520px, calc(100vw - 32px));
}
.account-picker > p {
  line-height: 1.7;
  color: var(--fg-59695f);
}
.account-options {
  display: grid;
  gap: 10px;
  margin: 22px 0;
  max-height: 45vh;
  overflow: auto;
}
.account-option {
  display: flex;
  gap: 12px;
  align-items: center;
  width: 100%;
  padding: 16px;
  background: var(--bg-ffffff);
  border: 1px solid var(--line-dce3d9);
  border-radius: var(--r-md);
  text-align: start;
  color: var(--fg-203c2f);
  cursor: pointer;
}
.account-option strong {
  overflow-wrap: anywhere;
}
.account-option.is-active,
.store-option.is-active {
  border: 1px solid var(--line-7a9c65);
  background: var(--bg-f2f7ed);
  opacity: 1;
}
.account-option:hover:not(:disabled) {
  background: var(--bg-f7f9f4);
  border-color: var(--line-7a9c65);
}
.account-add {
  margin-top: 16px;
  width: 100%;
  justify-content: center;
}
.workspace-header {
  min-height: 88px;
  height: auto;
  gap: 16px;
  padding-block: 12px;
}
@media (max-width: 640px) {
  .workspace-header {
    align-items: stretch;
    flex-direction: column;
  }
  .account-switcher {
    width: 100%;
  }
  .account-switcher strong {
    max-width: 65vw;
  }
}

/* Dashboard colors: green when a figure moved the good way, red when it moved the bad way. */
.ins-card.tone-good {
  border-color: var(--line-b7d9b0);
  background: linear-gradient(180deg, var(--bg-f1f8ee), var(--white-bg) 70%);
  box-shadow: inset 0 3px 0 var(--success);
}
.ins-card.tone-bad {
  border-color: var(--line-efc4b8);
  background: linear-gradient(180deg, var(--bg-fcf1ed), var(--white-bg) 70%);
  box-shadow: inset 0 3px 0 var(--danger);
}
.ins-card.tone-good .value {
  color: var(--success);
}
.ins-card.tone-bad .value {
  color: var(--danger);
}
.hbar.is-good .val {
  color: var(--success);
}
.hbar.is-bad .val {
  color: var(--danger);
}
.hbar.is-bad .val small,
.hbar.is-good .val small {
  color: var(--muted);
}
.tip-line {
  display: block;
  font-size: 11px;
  opacity: 0.85;
}
.income-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.income-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
}
.income-list li > span:first-child {
  flex: 1;
}
.income-list small {
  color: var(--muted);
}
.income-amount {
  color: var(--success);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
/* Returning customers. */
.customer-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}
.customer-stats article {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
.customer-stats .label,
.customer-stats .sub {
  font-size: 12px;
  color: var(--muted);
}
.customer-stats .value {
  font: 700 22px var(--font-display);
  font-variant-numeric: tabular-nums;
}
.customer-split {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
}
/* Stock: what is out or running out. */
.stock-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.stock-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  font-size: 14px;
}
.stock-list small,
.stock-list .muted {
  color: var(--muted);
  font-size: 12px;
}
.stock-ok {
  color: var(--success);
  margin: 0;
}
/* What the sales figure includes, under the dashboard title, and how it matches the store. */
.ins-head .ins-basis {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}
/* The store line and the link to how sales are counted, side by side under the title. */
.ins-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
}
.ins-meta .ins-store {
  margin: 0;
}
.ins-basis[open] {
  flex-basis: 100%;
}
.ins-basis summary {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  cursor: pointer;
  list-style: none;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}
.ins-basis summary:hover {
  color: var(--ink);
}
.ins-basis > p:first-of-type {
  margin-top: 8px;
}
.ins-basis summary::-webkit-details-marker {
  display: none;
}
.ins-basis ul {
  list-style: none;
  margin: 8px 0 6px;
  padding: 10px 12px;
  display: grid;
  gap: 4px;
  max-width: 420px;
  background: var(--bg-ffffff);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.ins-basis li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}
.ins-basis li:last-child {
  padding-top: 4px;
  border-top: 1px solid var(--border);
}
.ins-basis li b {
  color: var(--ink);
}
.ins-basis p {
  max-width: 70ch;
  margin: 0;
}
/* PDF report downloads beside the dashboard title. */
.report-links {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.report-links .button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  padding: 7px 12px;
}
/* The alerts switch on the account page. */
/* The landing page's second row of links on phones. */
.nav-mobile {
  display: none;
}
@media (max-width: 600px) {
  .nav {
    flex-wrap: wrap;
    height: auto;
    padding-block: 14px 0;
  }
  .nav-links .nav-lang {
    display: none;
  }
  .nav-mobile {
    display: flex;
    flex-basis: 100%;
    gap: 6px;
    margin-top: 12px;
    padding-bottom: 10px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .nav-mobile::-webkit-scrollbar {
    display: none;
  }
  .nav-mobile a {
    flex-shrink: 0;
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: var(--r-pill);
    background: var(--white-bg);
    color: var(--muted);
    font-size: 13px;
    white-space: nowrap;
  }
  .nav-mobile a[aria-current='page'] {
    border-color: var(--ink);
    color: var(--ink);
    font-weight: 600;
  }
}
/* The landing page's sign-in and sign-up: buttons in the navigation, visible on phones too.
   Sign-up is the filled one, for someone new; sign-in sits beside it, outlined. */
.nav-links a.nav-signin,
.nav-links a.nav-signup {
  padding: 8px 14px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-203c2d);
  font-weight: 600;
}
.nav-links a.nav-signin {
  color: var(--fg-203c2d);
  background: transparent;
}
.nav-links a.nav-signup {
  background: var(--bg-203c2d);
  color: var(--fg-f4f8ef);
}
@media (max-width: 600px) {
  .nav-links a.nav-signin,
  .nav-links a.nav-signup {
    padding: 7px 10px;
  }
}
.hero-actions {
  flex-wrap: wrap;
}
.hero-more {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin-top: 16px;
}

/* What is left to set up, on the dashboard. */
.setup-card {
  background: var(--bg-ffffff);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 18px 20px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-sm);
}
.setup-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.setup-head h2 {
  margin: 0 0 4px;
  font-size: 18px;
}
.setup-head p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}
.setup-progress {
  height: 6px;
  margin: 14px 0 6px;
  border-radius: var(--r-pill);
  background: var(--border);
  overflow: hidden;
}
.setup-progress i {
  display: block;
  height: 100%;
  background: var(--bg-34523a);
  border-radius: inherit;
} /* Each step with a picture of what it connects: the next one large, the rest as tiles. */
.setup-art {
  display: inline-flex;
  align-items: center;
}
.setup-art-item {
  display: grid;
  place-items: center;
  width: calc(var(--art, 24px) + 18px);
  height: calc(var(--art, 24px) + 18px);
  border: 2px solid var(--line-ffffff);
  border-radius: var(--r-pill);
  background: var(--bg-ffffff);
  box-shadow: 0 2px 8px #223e2e14;
}
.setup-art-item + .setup-art-item {
  margin-inline-start: -10px;
}
.setup-art-item.is-icon {
  background: var(--bg-edf3e6);
  color: var(--fg-4f7a43);
}
.setup-next {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 22px;
  margin: 16px 0 14px;
  padding: 18px;
  border: 1px solid var(--line-d7e5c9);
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, var(--bg-f4f9ee), var(--bg-ffffff) 70%);
}
.setup-next-art {
  display: grid;
  place-items: center;
  min-height: 150px;
  border-radius: var(--r-md);
  background: radial-gradient(circle at 50% 45%, var(--bg-ffffff), var(--bg-e3efd6) 75%);
  --art: 40px;
}
.setup-next-art .setup-art-item {
  animation: rise var(--t-slow) var(--ease-out) both;
}
.setup-next-art .setup-art-item:nth-child(2) {
  animation-delay: 90ms;
}
.setup-next-art .setup-art-item:nth-child(3) {
  animation-delay: 180ms;
}
.setup-next-body {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 6px;
}
.setup-eyebrow {
  padding: 3px 10px;
  border-radius: var(--r-pill);
  background: var(--lime-bg);
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
}
.setup-next h3 {
  margin: 4px 0 0;
  font: 600 20px / 1.3 var(--font-display);
}
.setup-next p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}
.setup-next .setup-gain {
  color: var(--green);
  font-weight: 600;
}
.setup-meter {
  display: grid;
  gap: 6px;
  width: min(320px, 100%);
  margin-top: 4px;
  font-size: 13px;
  color: var(--muted);
}
.setup-meter i {
  height: 6px;
  overflow: hidden;
  border-radius: var(--r-pill);
  background: var(--border);
}
.setup-meter b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--bg-b7791f);
}
.setup-go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  white-space: nowrap;
}
.setup-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.setup-tile {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 6px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--bg-ffffff);
  transition:
    border-color var(--t) var(--ease),
    box-shadow var(--t) var(--ease),
    transform var(--t) var(--ease);
  --art: 24px;
}
.setup-tile:not(.done):hover {
  border-color: var(--line-c9dcb8);
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
}
.setup-tile-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}
.setup-tile strong {
  font-size: 14px;
}
.setup-tile-gain {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}
.setup-tile-go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 6px;
  padding: 7px 10px;
  font-size: 13px;
}
.setup-tile.done {
  background: var(--bg-fafcf8);
}
.setup-tile.done .setup-art {
  opacity: 0.55;
  filter: grayscale(0.6);
}
.setup-tile.done strong {
  color: var(--muted);
  font-weight: 500;
}
.setup-done-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: var(--r-pill);
  background: var(--success-soft);
  color: var(--success);
  font-size: 12px;
  font-weight: 600;
}
.setup-tile-spin {
  color: var(--green);
}
@media (max-width: 600px) {
  .setup-next {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .setup-next-art {
    min-height: 110px;
  }
  .setup-go {
    justify-self: stretch;
    justify-content: center;
  }
  .setup-tiles {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }
  .setup-tile {
    padding: 12px;
  }
}

/* VAT and cash. */
.cash-vat {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}
.cash-vat h3 {
  margin: 0 0 4px;
  font-size: 15px;
}
.cash-due {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 13px;
}
.cash-breakdown {
  margin: 0;
  display: grid;
  gap: 4px;
  font-size: 14px;
}
.cash-breakdown div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.cash-breakdown dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.ord-source dd {
  min-width: 0;
  text-align: end;
  overflow-wrap: anywhere;
}
.ord-source .muted {
  color: var(--muted);
}
.ord-source dt {
  flex-shrink: 0;
}
.cash-breakdown .cash-total {
  border-top: 1px solid var(--border);
  padding-top: 6px;
  font-weight: 700;
}
.cash-settings {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  margin-top: 16px;
  font-size: 13px;
}
.cash-settings label {
  display: grid;
  gap: 4px;
  color: var(--muted);
}
.cash-settings label.check {
  display: flex;
  align-items: center;
  gap: 6px;
  color: inherit;
}
.cash-settings input:not([type='checkbox']),
.cash-settings select {
  border: 1px solid var(--line-849282);
  border-radius: var(--r-sm);
  background: var(--bg-fbfcf8);
  padding: 7px 10px;
  font: inherit;
  min-width: 0;
  max-width: 160px;
}
.cash-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.cash-table th,
.cash-table td {
  padding: 7px 8px;
  border-bottom: 1px solid var(--border);
  text-align: start;
  white-space: nowrap;
}
.cash-table th {
  color: var(--muted);
  font-weight: 500;
}
.cash-table tr.negative td {
  color: var(--fg-b42318);
}
.table-wrap {
  overflow-x: auto;
}

.restock {
  margin-bottom: 16px;
}
.restock h3 {
  margin: 0 0 8px;
  font-size: 15px;
}

.price-sim {
  margin-top: 16px;
}
.price-sim .cash-settings select {
  max-width: 260px;
}
.price-sim .chips {
  margin: 0;
}
.price-verdict {
  margin: 12px 0 0;
  font-weight: 600;
}
.price-verdict.bad {
  color: var(--fg-b42318);
}

/* Seasons and holidays coming up. */
.season-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}
.season-list li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.season-list li > svg {
  color: var(--fg-34523a);
  margin-top: 2px;
}
.season-list div {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.season-list strong {
  font-size: 15px;
}
.season-list span {
  color: var(--muted);
  font-size: 13px;
}
.season-list .season-tip {
  color: inherit;
}

/* The public demo's note above the pages. */
.demo-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 12px 24px 0;
  padding: 12px 16px;
  border-radius: var(--r-md);
  background: var(--bg-e9f2df);
  border: 1px solid var(--line-c5d8b4);
  font-size: 14px;
}

.trial-note a {
  flex: none;
  color: var(--ink);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* This business against similar ones. */
.bench-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.bench-table th,
.bench-table td {
  padding: 8px;
  border-bottom: 1px solid var(--border);
  text-align: start;
  white-space: nowrap;
}
.bench-table th {
  color: var(--muted);
  font-weight: 500;
}
.bench-table td.good {
  color: var(--fg-1f7a45);
  font-weight: 700;
}
.bench-table td.bad {
  color: var(--fg-b42318);
  font-weight: 700;
}
/* Competitor watch */
.comp-add {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}
.comp-add input {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--bg-ffffff);
  font-size: 14px;
}
.comp-add .button {
  padding: 10px 16px;
}
.comp-list,
.comp-ads {
  list-style: none;
  display: grid;
  gap: 8px;
  padding: 0;
  margin: 0;
}
.comp-list li,
.comp-ads li {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
}
.comp-list li > div:first-child,
.comp-ads li > div {
  display: grid;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.comp-list strong,
.comp-ads strong {
  font-size: 14px;
}
.comp-list small,
.comp-ads small {
  color: var(--muted);
  font-size: 12px;
}
.comp-ads p {
  font-size: 13px;
  margin-top: 4px;
  overflow-wrap: anywhere;
}
.comp-ads .comp-answer {
  color: var(--focus);
}
.comp-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.comp-actions a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--focus);
  font-size: 13px;
  font-weight: 600;
}
.comp-remove {
  display: inline-flex;
  padding: 6px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--muted);
}
.comp-remove:hover:not(:disabled) {
  color: var(--danger);
}
@media (max-width: 600px) {
  .comp-list li {
    flex-direction: column;
    gap: 6px;
  }
}
.comp-subtitle {
  font-size: 14px;
  font-weight: 700;
  margin: 16px 0 8px;
}
/* Settings */
.set-grid {
  display: grid;
  gap: 16px;
  max-width: 820px;
  margin-top: 8px;
}
.set-card {
  background: var(--bg-ffffff);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 6px 20px;
  box-shadow: var(--shadow-sm);
}
.set-card h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 0 8px;
  font-size: 15px;
  font-weight: 700;
}
.set-card h2 svg {
  color: var(--focus);
}
.set-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 0;
  border-top: 1px solid var(--border);
}
.set-text {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.set-text strong {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
}
.set-text p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.set-control {
  flex-shrink: 0;
}
.set-saved {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--success);
  font-size: 12px;
  font-weight: 600;
}
.set-select {
  min-width: 200px;
  padding: 9px 12px;
  border: 1px solid var(--line-c9d1c3);
  border-radius: var(--r-sm);
  background: var(--bg-ffffff);
  font: inherit;
  font-size: 14px;
}
.set-inline {
  display: flex;
  align-items: center;
  gap: 12px;
}
.set-select.set-time {
  min-width: 108px;
  width: auto;
}
.set-button {
  gap: 6px;
  padding: 9px 14px;
}
.set-segments {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--line-c9d1c3);
  border-radius: var(--r-sm);
  background: var(--bg-f5f7f2);
}
.set-segments button {
  padding: 6px 14px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}
.set-segments button[aria-checked='true'] {
  background: var(--bg-203c2d);
  color: var(--fg-f4f8ef);
}
.set-switch {
  appearance: none;
  position: relative;
  width: 42px;
  height: 24px;
  margin: 0;
  border-radius: var(--r-pill);
  background: var(--bg-c9d1c3);
  transition: background 0.2s;
  cursor: pointer;
}
.set-switch::after {
  content: '';
  position: absolute;
  top: 3px;
  inset-inline-start: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--bg-ffffff);
  box-shadow: 0 1px 2px #0003;
  transition: inset-inline-start 0.2s;
}
.set-switch:checked {
  background: var(--bg-34523a);
}
.set-switch:checked::after {
  inset-inline-start: 21px;
}
.set-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: var(--r-pill);
  background: var(--bg-f1f3ee);
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
}
.set-pill.ok {
  background: var(--bg-f0f7e8);
  color: var(--success);
}
.set-pill.off {
  background: var(--bg-fff0eb);
  color: var(--danger);
}
.set-expand {
  padding: 0 0 16px;
}
.set-steps {
  display: grid;
  gap: 12px;
  padding-inline-start: 20px;
  font-size: 14px;
}
.set-code {
  display: grid;
  gap: 6px;
}
.set-code input {
  width: 140px;
  padding: 9px 12px;
  border: 1px solid var(--line-c9d1c3);
  border-radius: var(--r-sm);
  font-size: 18px;
  letter-spacing: 4px;
}
.set-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 12px;
}
@media (max-width: 600px) {
  .set-card {
    padding: 4px 14px;
  }
  .set-row {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .set-control {
    align-self: stretch;
  }
  .set-select {
    width: 100%;
  }
}
.set-note {
  padding: 4px 0 14px;
  color: var(--muted);
  font-size: 13px;
}
.set-you {
  padding: 1px 7px;
  border-radius: var(--r-pill);
  background: var(--bg-f1f3ee);
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
}
.set-invite .comp-add {
  margin: 10px 0 0;
}
.set-invite .set-saved {
  margin-top: 8px;
}
/* AI search visibility */
.aiv-score {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.aiv-score strong {
  font: 700 26px var(--font-display);
}
.aiv-score span {
  color: var(--muted);
  font-size: 13px;
}
.aiv-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
}
.aiv-list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
}
.aiv-list li > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.aiv-list strong {
  font-size: 14px;
}
.aiv-list small {
  color: var(--muted);
  font-size: 12px;
  overflow-wrap: anywhere;
}
.aiv-list details summary {
  cursor: pointer;
  color: var(--focus);
  font-size: 13px;
  font-weight: 600;
}
.aiv-list details p {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.6;
  white-space: pre-wrap;
}
.aiv-mark {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--bg-f1f3ee);
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}
.aiv-mark.yes {
  background: var(--success-soft);
  color: var(--success);
}
.aiv-mark.no {
  background: var(--danger-soft);
  color: var(--danger);
}
.aiv-tips ul {
  display: grid;
  gap: 6px;
  padding-inline-start: 18px;
  font-size: 13px;
  line-height: 1.6;
}
.pp-counts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.pp-list .pp-counts {
  margin: 4px 0 0;
}
.pp-tag {
  padding: 2px 9px;
  border-radius: var(--r-pill);
  background: var(--bg-f1f3ee);
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}
.pp-tag.severe {
  background: var(--danger-soft);
  color: var(--danger);
}
.pp-list a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: inherit;
}
.pp-list + .text-link {
  margin-top: 8px;
}
.aiv-edit {
  margin-top: 14px;
}
.aiv-edit summary {
  cursor: pointer;
  color: var(--focus);
  font-size: 13px;
  font-weight: 600;
}
.aiv-edit form {
  display: grid;
  gap: 10px;
  margin-top: 10px;
  max-width: 560px;
}
.aiv-edit label {
  display: grid;
  gap: 4px;
  font-size: 13px;
}
.aiv-edit input,
.aiv-edit textarea {
  padding: 9px 12px;
  border: 1px solid var(--line-c9d1c3);
  border-radius: var(--r-sm);
  font: inherit;
  font-size: 14px;
}
.aiv-edit .button {
  justify-self: start;
}
/* What to do today */
.today-card {
  background: var(--bg-ffffff);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 16px 20px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-sm);
}
.today-card h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 17px;
}
.today-card h2 svg {
  color: var(--focus);
}
.today-card ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.today-card li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
}
.today-card li > svg {
  flex-shrink: 0;
  margin-top: 2px;
}
.today-card li > div:first-of-type {
  display: grid;
  gap: 3px;
  flex: 1;
  min-width: 0;
}
.today-card strong {
  font-size: 14px;
}
.today-card li p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}
.today-urgent {
  background: var(--bg-fff6f2);
  border-color: var(--line-f0d4c9) !important;
}
.today-urgent > svg {
  color: var(--danger);
}
.today-money > svg {
  color: var(--fg-b7791f);
}
.today-prepare > svg {
  color: var(--focus);
}
.today-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.today-clear {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--success);
  font-size: 14px;
  font-weight: 600;
}
@media (max-width: 600px) {
  .today-card li {
    flex-wrap: wrap;
  }
  .today-actions {
    width: 100%;
    justify-content: flex-end;
  }
}

/* Messaging is an early onboarding step and a prominent home action. */
.connect-card.channel-card {
  margin: 0 0 24px;
  max-width: none;
  padding: 24px;
  text-align: start;
  box-shadow: none;
}
.channel-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
}
.channel-row strong {
  margin-inline-end: auto;
}
.connect-card .channel-row .button {
  width: auto;
  margin-top: 0;
}

/* ==========================================================================
   Design system: one set of radii, shadows, motion and field styles for every
   page. Later in the file on purpose, so it settles the earlier one-off rules.
   ========================================================================== */
:root {
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 18px;
  --r-pill: 999px;
  --shadow-xs: 0 1px 2px rgb(23 37 31 / 6%);
  --shadow-sm: 0 1px 3px rgb(23 37 31 / 6%), 0 1px 2px rgb(23 37 31 / 4%);
  --shadow-md: 0 8px 24px rgb(23 37 31 / 9%);
  --shadow-lg: 0 18px 48px rgb(23 37 31 / 14%);
  --ring: 0 0 0 3px rgb(47 107 74 / 22%);
  --brand: #203c2d;
  --brand-hover: #2b4f3b;
  --brand-active: #172d21;
  --field-border: #cdd5c7;
  --field-border-hover: #a9b5a2;
  --success-soft: #e3f0da;
  --danger-soft: #fbe6df;
  --warning-soft: #fbf1dc;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 120ms;
  --t: 200ms;
  --t-slow: 360ms;
}
::selection {
  background: var(--lime-bg);
  color: var(--ink);
}
input[type='checkbox'],
input[type='radio'] {
  accent-color: var(--green);
}
h1,
h2,
h3 {
  text-wrap: balance;
}
p {
  text-wrap: pretty;
}

/* Buttons: one height, radius and motion. Hover darkens instead of jumping. */
.button {
  min-height: 44px;
  padding: 11px 18px;
  gap: 8px;
  border-radius: var(--r-md);
  line-height: 1.2;
  transition:
    background-color var(--t) var(--ease),
    border-color var(--t) var(--ease),
    box-shadow var(--t) var(--ease),
    color var(--t) var(--ease),
    transform var(--t-fast) var(--ease);
}
.button:hover:not(:disabled) {
  transform: none;
}
.button:active:not(:disabled) {
  transform: scale(0.98);
}
.button.primary {
  background: var(--brand);
}
.button.primary:hover:not(:disabled) {
  background: var(--brand-hover);
  box-shadow: var(--shadow-md);
}
.button.primary:active:not(:disabled) {
  background: var(--brand-active);
  box-shadow: none;
}
.button.secondary {
  border-color: var(--field-border);
}
.button.secondary:hover:not(:disabled) {
  background: var(--bg-f4f7f0);
  border-color: var(--field-border-hover);
}
.button.danger:hover:not(:disabled) {
  background: var(--bg-85341f);
}
.button[aria-busy='true'] {
  cursor: progress;
}
.button:disabled {
  box-shadow: none;
}
.set-button {
  min-height: 38px;
  padding: 8px 14px;
}
.text-link,
.text-button {
  transition: color var(--t) var(--ease);
}
button.text-link:hover:not(:disabled),
a.text-link:hover {
  color: var(--brand);
}
.icon-button,
.comp-remove,
.chip-button,
.add-button,
.chips button,
.set-segments button {
  transition:
    background-color var(--t) var(--ease),
    border-color var(--t) var(--ease),
    color var(--t) var(--ease),
    box-shadow var(--t) var(--ease);
}
.icon-button:hover:not(:disabled) {
  background: var(--danger-soft);
  border-color: var(--line-efc9bd);
}
.comp-remove:hover:not(:disabled) {
  background: var(--bg-f3f5ef);
}
.chip-button:hover:not(:disabled),
.chips button:hover:not([aria-pressed='true']):not(:disabled) {
  border-color: var(--field-border-hover);
  background: var(--bg-f6f8f2);
}
.add-button:hover:not(:disabled) {
  background: var(--bg-f6f9f2);
  border-color: var(--green-line);
}

/* Fields: the same border, radius and focus ring in forms, settings and tables. */
.auth-form input:not([type='checkbox']),
.auth-form select,
.set-select,
.rule-row > input,
.rule-row > select,
.cash-settings input:not([type='checkbox']),
.cash-settings select,
.aiv-edit input,
.aiv-edit textarea,
.comp-add input,
.channel-row select {
  border: 1px solid var(--field-border);
  border-radius: var(--r-md);
  background-color: var(--bg-ffffff);
  color: var(--ink);
  transition:
    border-color var(--t) var(--ease),
    box-shadow var(--t) var(--ease);
}
.auth-form input:not([type='checkbox']):hover:not(:disabled),
.auth-form select:hover:not(:disabled),
.set-select:hover:not(:disabled),
.rule-row > input:hover,
.rule-row > select:hover,
.cash-settings input:hover,
.cash-settings select:hover,
.aiv-edit input:hover,
.aiv-edit textarea:hover,
.comp-add input:hover,
.channel-row select:hover:not(:disabled) {
  border-color: var(--field-border-hover);
}
.auth-form input:not([type='checkbox']):focus-visible,
.auth-form select:focus-visible,
.set-select:focus-visible,
.rule-row > input:focus-visible,
.rule-row > select:focus-visible,
.cash-settings input:focus-visible,
.cash-settings select:focus-visible,
.aiv-edit input:focus-visible,
.aiv-edit textarea:focus-visible,
.comp-add input:focus-visible,
.channel-row select:focus-visible {
  outline: none;
  border-color: var(--focus);
  box-shadow: var(--ring);
}
.auth-form input:not([type='checkbox']),
.auth-form select {
  min-height: 46px;
  font-size: 15px;
}
/* Selects get one chevron, on the side the text ends. */
.auth-form select,
.set-select,
.rule-row > select,
.cash-settings select,
.channel-row select {
  appearance: none;
  padding-inline-end: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235f6b62' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
[dir='rtl'] .auth-form select,
[dir='rtl'] .set-select,
[dir='rtl'] .rule-row > select,
[dir='rtl'] .cash-settings select,
[dir='rtl'] .channel-row select {
  background-position: left 12px center;
}
/* A left-to-right field on a right-to-left page (a time, a time zone) ends on the right, so its
   chevron goes there too instead of over the text. */
[dir='rtl'] .set-select[dir='ltr'],
[dir='rtl'] .auth-form select[dir='ltr'],
[dir='rtl'] .cash-settings select[dir='ltr'],
[dir='rtl'] .channel-row select[dir='ltr'] {
  background-position: right 12px center;
}
.set-input {
  min-width: 200px;
  min-height: 38px;
  padding: 8px 12px;
  border: 1px solid var(--field-border);
  border-radius: var(--r-md);
  background: var(--bg-ffffff);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  transition:
    border-color var(--t) var(--ease),
    box-shadow var(--t) var(--ease);
}
.set-input:hover:not(:disabled) {
  border-color: var(--field-border-hover);
}
.set-input:focus-visible {
  outline: none;
  border-color: var(--focus);
  box-shadow: var(--ring);
}
.channel-row label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
}
.channel-row select {
  min-height: 36px;
  padding-block: 6px;
  padding-inline-start: 10px;
  font: inherit;
  font-size: 14px;
}

/* Sign-in and setup pages. */
.connect-card {
  position: relative;
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-md);
  animation: rise var(--t-slow) var(--ease-out) both;
}
.connect-card h1 {
  font-size: clamp(26px, 4vw, 32px);
  letter-spacing: -0.6px;
  margin: 8px 0 12px;
}
.connect-card:has(> .lang-switch) {
  padding-top: 64px;
}
.lang-switch {
  position: absolute;
  top: 18px;
  inset-inline-end: 20px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--bg-ffffff);
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  transition:
    color var(--t) var(--ease),
    border-color var(--t) var(--ease);
}
.lang-switch:hover {
  color: var(--ink);
  border-color: var(--field-border-hover);
}
.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 4px;
  margin: 22px 0 4px;
  border-radius: var(--r-md);
  background: var(--bg-eef2ea);
}
.auth-tabs button {
  min-height: 38px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--muted);
  font-weight: 600;
  font-size: 14px;
  transition:
    background-color var(--t) var(--ease),
    color var(--t) var(--ease),
    box-shadow var(--t) var(--ease);
}
.auth-tabs button[aria-selected='true'] {
  background: var(--bg-ffffff);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}
.auth-step {
  display: grid;
  gap: 18px;
  animation: rise var(--t-slow) var(--ease-out) both;
}
.auth-form .code-input {
  direction: ltr;
  text-align: center;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: 0.45em;
  padding-inline-start: calc(14px + 0.45em);
  font-variant-numeric: tabular-nums;
  min-height: 58px;
}
.auth-sent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--r-md);
  background: var(--bg-f2f6ee);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.6;
}
.auth-sent svg {
  flex-shrink: 0;
  margin-top: 3px;
  color: var(--green);
}
.auth-form .error {
  padding: 10px 12px;
  border-radius: var(--r-md);
  background: var(--danger-soft);
  color: var(--danger);
  font-size: 14px;
  animation: shake 360ms var(--ease) both;
}
.auth-form .field-hint {
  margin-top: -2px;
  line-height: 1.5;
  font-size: 12px;
  font-weight: 400;
  color: var(--muted);
}
.connect-card .auth-form .field-hint {
  margin-top: -2px;
}
.connect-card .connect-icon {
  width: 60px;
  height: 60px;
  margin-bottom: 14px;
  background: var(--bg-e9f6ee);
}
.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 22px 0 6px !important;
  font-size: 12px !important;
  color: var(--muted);
}
.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}
.connect-card .button.secondary + .button.secondary {
  margin-top: 10px;
}
.auth-notes {
  display: grid;
  gap: 6px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}
.auth-notes p {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0;
  font-size: 13px;
}

/* Done: a check that draws itself, then the next page. */
.success-state {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 18px 0 8px;
  animation: rise var(--t-slow) var(--ease-out) both;
}
.success-state strong {
  font: 600 20px var(--font-display);
}
.success-state p {
  margin: 0;
}
.success-check {
  width: 72px;
  height: 72px;
}
.success-check circle {
  fill: var(--success-soft);
  stroke: var(--green);
  stroke-width: 2.5;
  stroke-dasharray: 202;
  stroke-dashoffset: 202;
  animation: draw 600ms var(--ease-out) forwards;
}
.success-check path {
  fill: none;
  stroke: var(--green);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
  animation: draw 360ms 420ms var(--ease-out) forwards;
}

/* Loading: the brand's orbit while a page opens, shimmering blocks while data loads. */
.orbit-loader {
  position: relative;
  width: 56px;
  height: 56px;
  margin: 4px auto 16px;
}
.orbit-loader::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 2px solid var(--line-dfe8d6);
  border-radius: 50%;
}
.orbit-loader::after {
  content: '';
  position: absolute;
  inset: 20px;
  border-radius: 50%;
  background: var(--brand);
  animation: pulse 1.6s var(--ease) infinite;
}
.orbit-loader span {
  position: absolute;
  inset: 0;
  animation: spin 1.4s linear infinite;
}
.orbit-loader span::before {
  content: '';
  position: absolute;
  top: -5px;
  left: calc(50% - 5px);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--green-bg);
  box-shadow: 0 0 0 4px #e3eedb;
}
.skeleton {
  display: block;
  border-radius: var(--r-sm);
  background: linear-gradient(
      90deg,
      var(--bg-eceff0) 0%,
      var(--bg-f5f7f3) 40%,
      var(--bg-eceff0) 80%
    )
    0 0 / 300% 100%;
  animation: shimmer 1.4s linear infinite;
}
.skeleton-text {
  height: 12px;
  margin: 8px 0;
}
.skeleton-title {
  height: 22px;
  width: 40%;
  margin-bottom: 14px;
}
.skeleton-card {
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--bg-ffffff);
}
.skeleton-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin: 18px 0;
}
.skeleton-kpi {
  height: 96px;
  border-radius: var(--r-lg);
}

/* Pages and panels enter softly. */
.workspace-content,
.ins-panel,
.today-card,
.set-card {
  animation: rise var(--t-slow) var(--ease-out) both;
}
.ins-panel,
.set-card,
.today-card {
  transition: box-shadow var(--t) var(--ease);
}

/* Phones: the header is as tall as what it holds, and the chat button never covers the end. */
@media (max-width: 640px) {
  .workspace-header {
    min-height: 0;
    justify-content: center;
  }
  .workspace-content {
    padding-bottom: 96px;
  }
}

/* The overview's extra figures: rows split evenly, each stretching to the full width. */
.ins-kpis.balanced {
  display: flex;
  flex-wrap: wrap;
}
.ins-kpis.balanced > .ins-card {
  flex: 1 1 calc((100% - (var(--per-row, 4) - 1) * 12px) / var(--per-row, 4));
  min-width: 150px;
}
@media (max-width: 600px) {
  .ins-kpis.balanced > .ins-card {
    flex-basis: calc(50% - 6px);
    min-width: 0;
  }
}

/* Dashboard motion. Figures and cards arrive one after another, bars grow from their base, the
   trend line draws itself, and new values glide into place when the period changes. Everything
   is short, and the reduce-motion rule at the top turns it all off. */
.ins-hero > .ins-card,
.ins-kpis > .ins-card {
  animation: rise-in 620ms var(--ease-out) both;
  animation-delay: calc(80ms + var(--i, 0) * 70ms);
  transition:
    transform var(--t) var(--ease),
    box-shadow var(--t) var(--ease);
}
.ins-kpis > .ins-card:hover,
.ins-hero > .ins-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.figure {
  font-variant-numeric: tabular-nums;
  --number-flow-mask-height: 0.18em;
}
.chart-line.current {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draw 1300ms var(--ease-out) 200ms forwards;
}
.chart-area,
.chart-line.previous {
  animation: fade-in 600ms var(--ease-out) 300ms both;
}
.column i {
  transform-origin: bottom;
  animation: grow-up 700ms var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 18ms);
  transition:
    height var(--t-slow) var(--ease-out),
    background-color var(--t) var(--ease);
}
.funnel-track i,
.hbar .track i {
  transform-origin: left;
  animation: grow-across 800ms var(--ease-out) both;
  transition: width var(--t-slow) var(--ease-out);
}
[dir='rtl'] .funnel-track i,
[dir='rtl'] .hbar .track i {
  transform-origin: right;
}
.funnel li,
.hbar {
  --delay: calc(var(--i, 0) * 55ms);
}
.funnel-track i,
.hbar .track i {
  animation-delay: var(--delay);
}
.today-card ul {
  position: relative;
}

/* Panels below the fold wait for the reader: hidden, and their bars and lines held at the start,
   until they scroll into view. */
.reveal-wait {
  opacity: 0;
  transform: translateY(28px);
  animation: none !important;
}
.reveal-wait * {
  animation-play-state: paused !important;
}
.reveal-in {
  animation: rise-in 650ms var(--ease-out) both !important;
}
.workspace-tabs a,
.sidebar-item {
  transition:
    background-color var(--t) var(--ease),
    color var(--t) var(--ease),
    transform var(--t-fast) var(--ease);
}
.sidebar-item:active {
  transform: scale(0.98);
}
.sidebar-group + .sidebar-group {
  margin-top: 22px;
}
.channel-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  margin-bottom: 18px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line-c9e6c3);
  background: linear-gradient(90deg, var(--bg-eef8ea), var(--bg-f6fbf3));
  color: var(--ink);
  text-decoration: none;
  animation: rise-in 520ms var(--ease-out) both;
}
.channel-banner span:nth-child(2) {
  flex: 1;
}
.channel-banner strong {
  color: var(--focus);
  white-space: nowrap;
}
.channel-banner-logos {
  display: inline-flex;
  gap: 4px;
}
.channel-name {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.ins-store {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.inline-logo {
  vertical-align: -3px;
  margin-inline-end: 6px;
}
.funnel-label {
  display: inline-flex;
  align-items: center;
}
@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes fade-in {
  from {
    opacity: 0;
  }
}
@keyframes grow-up {
  from {
    transform: scaleY(0);
  }
}
@keyframes grow-across {
  from {
    transform: scaleX(0);
  }
}
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes pulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(0.82);
    opacity: 0.75;
  }
}
@keyframes shimmer {
  to {
    background-position: -300% 0;
  }
}
@keyframes shake {
  0%,
  100% {
    transform: none;
  }
  25% {
    transform: translateX(-4px);
  }
  75% {
    transform: translateX(4px);
  }
}

/* Links in the policy pages show their focus in their own color. */
.legal-doc a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

/* The home page on phones: a headline that fits, buttons a thumb can reach, and the chat
   preview's notes kept clear of its header and input. */
@media (max-width: 600px) {
  .hero {
    padding-top: 28px;
    min-height: 0;
  }
  .hero h1 {
    font-size: clamp(40px, 12vw, 50px);
    letter-spacing: -2px;
    margin: 18px 0;
  }
  .hero-copy > p {
    font-size: 16px;
    line-height: 1.7;
  }
  .hero-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .hero-actions .button {
    width: 100%;
    padding: 16px 20px;
    font-size: 16px;
  }
  .hero-more {
    gap: 12px 20px;
    font-size: 15px;
  }
  .conversation-stage {
    height: auto;
    padding: 64px 0 96px;
    margin-top: 10px;
  }
  .chat-preview {
    width: min(320px, 100%);
  }
  .floating-tag {
    top: 10px;
    inset-inline-end: 4px;
  }
  .floating-security {
    bottom: 12px;
    inset-inline-start: 4px;
  }
  .video-section {
    padding: 20px 0 50px;
  }
  .video-section h2 {
    font-size: 24px;
    margin: 12px auto 22px;
  }
}

/* Profit by campaign, ad set and ad. */
.ap-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 18px 0 10px;
}
.ap-levels {
  margin: 0;
}
.ap-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--muted);
}
.ap-table tr.ap-loss td {
  background: var(--bg-fdf3f1);
}
.ap-table th button,
.ap-drill,
.ap-crumbs button {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.ap-table th button[aria-pressed='true'] {
  color: var(--ink);
  font-weight: 700;
}
.ap-crumbs button {
  color: var(--green);
}
.ap-drill:hover,
.ap-crumbs button:hover {
  text-decoration: underline;
}
.ap-drill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-align: start;
  font-weight: 600;
}
.ap-table td .delta {
  margin-top: 4px;
}
.ap-tags {
  display: block;
  margin: 8px 0 4px;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  background: var(--bg-f3f5ef);
  font-size: 12px;
  overflow-wrap: anywhere;
}
.ap-sub {
  margin: 26px 0 4px;
  font-size: 15px;
}

/* Today so far, beside yesterday and a week ago up to the same time. */
.ins-pace {
  background: var(--bg-ffffff);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 14px 16px;
  margin-bottom: 14px;
}
.ins-pace-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 16px;
  font-size: 12px;
  margin-bottom: 10px;
}
.ins-pace-days {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.ins-pace-day {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border-radius: var(--r-md);
  background: var(--bg-f4f6f1);
}
.ins-pace-day.now {
  background: var(--bg-fbf3d9);
}
.ins-pace-day .label,
.ins-pace-day .sub {
  font-size: 12px;
  color: var(--muted);
}
.ins-pace-day strong {
  font-size: 22px;
  color: var(--ink);
}
.ins-pace-deltas {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-top: 10px;
  font-size: 12px;
  color: var(--muted);
}
/* On a phone the three days stay side by side, small, so the net profit comes right after. */
@media (max-width: 600px) {
  .ins-pace {
    padding: 12px;
  }
  .ins-pace-head .muted {
    display: none;
  }
  .ins-pace-days {
    gap: 6px;
  }
  .ins-pace-day {
    padding: 8px;
  }
  .ins-pace-day strong {
    font-size: 16px;
  }
  .ins-pace-day .sub {
    display: none;
  }
}

/* A custom date range under the period chips. */
/* One compact period control, the same on every page: the period, then what it is compared
   with. */
.period-picker {
  margin-bottom: 16px;
}
.period-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.period-select {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  min-height: 40px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--bg-ffffff);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.period-select:focus-within {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}
/* The period and comparison menus: a button, and a list drawn in the site's font. */
.select-menu {
  position: relative;
}
button.period-select {
  padding-inline-end: 32px;
  cursor: pointer;
}
button.period-select:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}
.select-menu-chev {
  position: absolute;
  inset-inline-end: 12px;
  pointer-events: none;
}
.select-menu.compare .period-select {
  font-weight: 600;
}
.select-menu-prefix {
  font-weight: 500;
  color: var(--muted);
}
.select-menu-list {
  position: absolute;
  top: calc(100% + 6px);
  inset-inline-start: 0;
  z-index: 60;
  min-width: 100%;
  max-height: 340px;
  overflow-y: auto;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--bg-ffffff);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: 0 14px 34px rgb(23 37 31 / 14%);
}
.select-menu-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 12px;
  border-radius: var(--r-sm);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  color: var(--ink);
  cursor: pointer;
}
.select-menu-list li.is-active {
  background: var(--bg-f1f3ee);
}
/* The same list, opened from any select on the site: placed by the page, above everything. */
.select-menu-list.is-floating {
  top: auto;
  inset-inline-start: auto;
  z-index: 1000;
}
.select-menu-list .select-menu-group {
  padding: 10px 12px 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  cursor: default;
}
.select-menu-list li[aria-disabled='true'] {
  color: var(--muted);
  cursor: default;
}
.select-menu-list li[aria-selected='true'] {
  font-weight: 700;
  color: var(--fg-203c2d);
}
.period-select svg {
  color: var(--muted);
  flex-shrink: 0;
}
.period-select select {
  appearance: none;
  border: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  padding-block: 8px;
  padding-inline: 0 18px;
  cursor: pointer;
  outline: none;
}
.period-select .period-chev {
  position: absolute;
  inset-inline-end: 12px;
  pointer-events: none;
}
.period-select.compare {
  font-weight: 500;
  color: var(--muted);
}
.period-select.compare select {
  color: var(--ink);
  font-weight: 600;
}
.period-edit {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 0;
  background: none;
  color: var(--focus);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.period-custom {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
  margin: 10px 0 0;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg-ffffff);
  width: fit-content;
}
.period-custom label {
  display: grid;
  gap: 4px;
  font-size: 12px;
  color: var(--muted);
}
.export-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
/* The site funnel's step where most visitors leave, and each step's change. */
.funnel li.worst .funnel-rate {
  color: var(--danger);
  background: var(--bad-bg);
  border-radius: var(--r-pill);
  padding: 1px 8px;
  font-weight: 700;
}
/* A step with its change: one more column for it. */
.funnel li:has(> .delta) {
  grid-template-columns: minmax(96px, 150px) 1fr auto minmax(96px, auto) 56px;
}
.funnel li .delta {
  font-size: 11px;
  justify-self: end;
}

/* Ad spend split by platform inside a KPI tile. */
/* Ad spend by platform: one bar of shares, then each platform's logo and amount. */
.ins-split {
  display: grid;
  gap: 8px;
  margin-top: 4px;
  font-size: 13px;
}
.ins-split-bar {
  display: flex;
  height: 8px;
  overflow: hidden;
  border-radius: var(--r-pill);
  background: var(--border);
}
.ins-split-bar i {
  display: block;
  height: 100%;
}
.ins-split-bar i + i {
  border-inline-start: 2px solid var(--line-ffffff);
}
.ins-split ul {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ins-split li {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.ins-split li > i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.ins-split b {
  color: var(--ink);
  font-weight: 600;
}
/* Pinned tiles end together: the line or the previous period sits at the bottom. */
.ins-kpis.pinned > .ins-card {
  align-content: stretch;
  grid-template-rows: auto auto auto 1fr auto;
}
.ins-kpis.pinned > .ins-card > .sparkline,
.ins-kpis.pinned > .ins-card > .ins-before {
  align-self: end;
}
.ins-before b {
  color: var(--ink);
  font-weight: 600;
}
/* Sales against ads, by day. */
.ins-ra-chart {
  width: 100%;
  height: auto;
  direction: ltr;
}
.ins-ra-chart .grid {
  stroke: var(--fg-e8ebe4);
  stroke-dasharray: 3 4;
}
.ins-ra-chart .axis {
  font-size: 11px;
  fill: var(--muted);
}
.ins-ra-chart rect.sales {
  fill: var(--fg-3d4a5c);
}
.ins-ra-chart rect.sales.best {
  fill: var(--fg-17212e);
}
.ins-ra-chart polyline {
  fill: none;
  stroke-width: 2.5;
  stroke-linejoin: round;
}
.ins-ra-chart polyline.ads {
  stroke: var(--fg-e3a50c);
}
.ins-ra-chart polyline.profit {
  stroke: var(--fg-1f8a5b);
}
.ins-ra-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  font-size: 12px;
  color: var(--muted);
  margin-top: 6px;
}
.ins-ra-legend i {
  display: inline-block;
  width: 12px;
  height: 4px;
  border-radius: 2px;
  vertical-align: middle;
  margin-inline-end: 4px;
}
.ins-ra-legend i.sales {
  background: var(--bg-3d4a5c);
  height: 10px;
}
.ins-ra-legend i.ads {
  background: var(--bg-e3a50c);
}
.ins-ra-legend i.profit {
  background: var(--bg-1f8a5b);
}
/* The page the sign-in email links to, to copy the code. */
.code-card {
  text-align: center;
  display: grid;
  gap: 18px;
  justify-items: center;
}
.code-big {
  display: block;
  font-size: 42px;
  font-weight: 800;
  letter-spacing: 12px;
  padding: 16px 28px 16px 40px;
  border-radius: 16px;
  background: var(--bg-f0f6e8);
  border: 1px solid var(--line-d9e8c8);
  color: var(--ink);
  user-select: all;
}
.code-card .button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Ad spend entered by hand, on the costs page. */
.manual-ads {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: grid;
  gap: 8px;
}
.manual-ads li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-size: 14px;
}
.manual-ads li .icon-button {
  margin-inline-start: auto;
}
.manual-ads-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
}
.manual-ads-form label {
  display: grid;
  gap: 4px;
  font-size: 12px;
  color: var(--muted);
}
.manual-ads-form input,
.manual-ads-form select {
  min-width: 130px;
}
/* The package card on the settings page: usage against each limit, and what is included. */
.plan-card {
  padding-bottom: 16px;
}
.plan-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 14px;
  margin-bottom: 12px;
}
.plan-head strong {
  font-size: 22px;
}
.plan-head > span:not(.set-pill) {
  color: var(--muted);
  font-size: 14px;
}
.set-pill.warn {
  background: var(--bg-fdf3df);
  color: var(--warning);
}
.plan-meters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
}
.plan-meters li {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-md, 10px);
  font-size: 13px;
}
.plan-meters li > span {
  color: var(--muted);
}
.plan-meters li strong {
  font-size: 16px;
}
.plan-meters i {
  display: block;
  height: 5px;
  border-radius: 3px;
  background: var(--bg-eef0eb);
  overflow: hidden;
}
.plan-meters b {
  display: block;
  height: 100%;
  background: var(--success);
}
.plan-meters li.full strong {
  color: var(--warning);
}
.plan-meters li.full b {
  background: var(--bg-d9a441);
}
.plan-features {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 0 0 10px;
  padding: 0;
  list-style: none;
  font-size: 14px;
}
.plan-features li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.plan-features li svg {
  color: var(--success);
}
.plan-features li.off {
  color: var(--muted);
}
.plan-features li.off svg {
  color: var(--muted);
}
.plan-features small {
  font-size: 12px;
}
.plan-addons {
  margin: 10px 0 0;
  padding: 8px 12px;
  border-radius: var(--r-md);
  background: var(--lime-bg);
  font-size: 14px;
}
.plan-note {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}
.plan-note + .plan-note {
  margin-top: 8px;
}
.plan-note a {
  color: var(--focus);
  font-weight: 600;
  text-decoration: underline;
}
/* Connections in groups: store, ads, site, social networks and Google. */
.connection-group + .connection-group {
  margin-top: 26px;
}
.connection-group > h3 {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 700;
  color: var(--muted);
}
/* A Shopify store set up by hand before the public app is approved. */
.shopify-early {
  display: grid;
  gap: 12px;
}
.shopify-early p {
  margin: 0;
  display: flex;
  gap: 8px;
  align-items: flex-start;
  line-height: 1.6;
}
.shopify-early label {
  display: grid;
  gap: 6px;
  font-weight: 600;
}
.shopify-early small {
  color: var(--muted);
}
.shopify-early .success-text {
  color: var(--success);
}
/* The pricing page: the plans, then questions and a closing call to action. */
.nav-links a[aria-current='page'] {
  color: var(--ink);
  font-weight: 600;
}
.pricing-page .pricing-heading h1 {
  font-size: clamp(32px, 4.2vw, 52px);
  letter-spacing: -1.6px;
  line-height: 1.15;
  font-weight: 500;
  margin: 15px 0 14px;
}
.pricing-faq {
  max-width: 820px;
  margin: 0 auto;
  padding: 20px 0 70px;
}
.pricing-faq h2 {
  margin: 0 0 22px;
  text-align: center;
  font-size: clamp(24px, 2.8vw, 34px);
  font-weight: 500;
  letter-spacing: -1px;
}
.pricing-faq-list {
  display: grid;
  gap: 10px;
}
.pricing-faq details {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--white-bg);
}
.pricing-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.pricing-faq summary::-webkit-details-marker {
  display: none;
}
.pricing-faq summary::after {
  content: '+';
  flex: none;
  color: var(--green);
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
  transition: transform var(--t-fast) var(--ease);
}
.pricing-faq details[open] summary::after {
  transform: rotate(45deg);
}
.pricing-faq details p {
  margin: 0;
  padding: 0 20px 18px;
  color: var(--muted);
  line-height: 1.75;
}
.pricing-faq-more {
  margin: 18px 0 0;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
}
.pricing-faq-more a {
  color: var(--ink);
  font-weight: 600;
}
.pricing-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: 0 0 70px;
  padding: 36px 40px;
  border-radius: 28px;
  background: var(--ink-bg);
  color: var(--white);
}
.pricing-band h2 {
  margin: 0 0 6px;
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 500;
  letter-spacing: -0.8px;
}
.pricing-band p {
  margin: 0;
  color: var(--on-dark-muted);
}
.pricing-band-cta {
  display: grid;
  justify-items: center;
  gap: 10px;
}
.pricing-band-cta .button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--lime);
  color: #17251f;
}
.pricing-band-cta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--on-dark-muted);
  font-size: 13px;
}
@media (max-width: 760px) {
  .pricing-band {
    padding: 28px 22px;
  }
  .pricing-band-cta {
    justify-items: start;
  }
}
/* Pricing: the plan cards and comparison table, on the home page and the plan picker. */
.pricing-section {
  padding: 80px 0;
}
.pricing-section .pricing-heading {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 44px;
}
.pricing-section .pricing-heading .eyebrow {
  justify-content: center;
}
.pricing-section .pricing-heading h2 {
  font-size: clamp(28px, 3.4vw, 40px);
  letter-spacing: -1.4px;
  line-height: 1.25;
  font-weight: 500;
  margin: 15px 0 14px;
}
.pricing-section .pricing-heading p {
  color: var(--muted);
  line-height: 1.8;
  margin: 0 0 22px;
}
.pr-trial {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 999px;
  background: var(--lime-bg);
  color: var(--ink);
  font-weight: 600;
  font-size: 14px;
  box-shadow: 0 6px 20px rgb(60 114 86 / 18%);
}
.pr-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}
.pr-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 30px 28px;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: var(--bg-ffffff);
  text-align: start;
  transition:
    transform 0.25s,
    box-shadow 0.25s;
}
.pr-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 50px rgb(23 37 31 / 10%);
}
.pr-featured {
  background: var(--ink-bg);
  border-color: var(--ink-line);
  color: var(--fg-eef3e8);
  box-shadow: 0 30px 70px rgb(23 37 31 / 28%);
}
.pr-featured:hover {
  box-shadow: 0 34px 80px rgb(23 37 31 / 34%);
}
.pr-ribbon {
  position: absolute;
  top: -13px;
  inset-inline-start: 28px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--lime-bg);
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2px;
}
.pr-head {
  display: flex;
  align-items: center;
  gap: 14px;
}
.pr-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: var(--bg-ecf0e5);
  color: var(--green);
  flex: none;
}
.pr-featured .pr-icon {
  background: rgb(212 236 171 / 14%);
  color: var(--lime);
}
.pr-name {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.5px;
  text-align: start;
}
.pr-subname {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  color: var(--muted);
}
.pr-featured .pr-subname,
.pr-featured .pr-tagline,
.pr-featured .pr-yearly,
.pr-featured .pr-price span {
  color: var(--on-dark-muted);
}
.pr-tagline {
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 14px;
}
.pr-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}
.pr-price strong {
  font-size: 44px;
  font-weight: 600;
  letter-spacing: -1.5px;
  line-height: 1;
}
.pr-price span {
  color: var(--muted);
  font-size: 13px;
}
.pr-yearly {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--muted);
}
.pr-cta {
  margin: 24px 0 26px;
}
.pr-cta > .button,
.pr-cta > a,
.pr-cta > button {
  width: 100%;
}
.pr-featured .pr-cta .button.primary {
  background: var(--lime-bg);
  color: var(--ink);
}
.pr-list {
  list-style: none;
  margin: 0;
  padding: 22px 0 0;
  border-top: 1px solid var(--border);
  display: grid;
  gap: 12px;
  font-size: 14px;
  line-height: 1.5;
}
.pr-featured .pr-list {
  border-top-color: rgb(255 255 255 / 12%);
}
.pr-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.pr-list li svg {
  flex: none;
  margin-top: 2px;
  color: var(--green);
}
.pr-featured .pr-list li svg {
  color: var(--lime);
}
.pr-list .pr-plus {
  font-weight: 600;
  font-size: 13px;
  margin-top: 4px;
}
.pr-fine {
  max-width: 760px;
  margin: 26px auto 0;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
}
.pr-compare {
  margin-top: 64px;
}
.pr-compare h3 {
  margin: 0 0 20px;
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.6px;
  text-align: center;
}
.pr-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--bg-ffffff);
}
.pr-table {
  width: 100%;
  min-width: 600px;
  border-collapse: collapse;
  font-size: 14px;
}
.pr-table th,
.pr-table td {
  padding: 14px 18px;
  border-bottom: 1px solid var(--line-eef1ea);
  text-align: center;
}
.pr-table tbody th[scope='row'] {
  text-align: start;
  font-weight: 400;
  color: var(--ink);
}
.pr-table thead th {
  position: sticky;
  top: 0;
  background: var(--bg-ffffff);
  font-size: 16px;
  font-weight: 600;
  padding-top: 20px;
  padding-bottom: 16px;
}
.pr-table thead small {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 400;
  color: var(--muted);
}
.pr-table .pr-col-featured {
  background: var(--bg-f3f7ec);
}
.pr-table thead .pr-col-featured {
  background: var(--bg-e9f2db);
}
.pr-table .pr-group th {
  padding: 12px 18px;
  background: var(--paper);
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-align: start;
  text-transform: uppercase;
}
.pr-table tbody:last-child tr:last-child th,
.pr-table tbody:last-child tr:last-child td {
  border-bottom: 0;
}
.pr-yes {
  color: var(--success);
}
.pr-no {
  color: var(--fg-c3cabd);
}
@media (max-width: 1150px) {
  .pr-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 900px) {
  .pr-cards {
    grid-template-columns: 1fr;
    max-width: 480px;
    margin: 0 auto;
    gap: 28px;
  }
  .pricing-section {
    padding: 56px 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pr-card,
  .pr-card:hover {
    transition: none;
    transform: none;
  }
}
@media (max-width: 600px) {
  .pr-table {
    min-width: 0;
    font-size: 13px;
  }
  .pr-table th,
  .pr-table td {
    padding: 11px 6px;
  }
  .pr-table tbody th[scope='row'] {
    padding-inline-start: 12px;
    width: 46%;
  }
  .pr-table thead th {
    font-size: 13px;
  }
  .pr-table .pr-group th {
    padding-inline-start: 12px;
  }
}
/* A date typed as day/month/year, with the browser's calendar behind the icon. */
.date-field {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 100%;
  min-width: 0;
}
.date-field input[type='text'] {
  width: 100%;
  /* The typed date always runs left to right, so the calendar button sits on its right. */
  padding-right: 38px;
  font-variant-numeric: tabular-nums;
}
.date-field .date-pick {
  position: absolute;
  right: 6px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.date-field .date-pick:hover,
.date-field .date-pick:focus-visible {
  background: var(--bg-eef2ea);
  color: var(--fg-203c2d);
}
.date-field .date-native {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}
/* Connections at a glance, next to "updated" in the page header. */
.conn-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-inline-start: 10px;
  padding: 2px 10px 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.conn-badge.good {
  color: var(--success);
  background: var(--good-bg);
}
.conn-badge.bad {
  color: var(--danger);
  background: var(--bad-bg);
}
.conn-badge .conn-logos {
  display: inline-flex;
  gap: 3px;
}
/* A long page's sections as tabs that stay at the top while scrolling. */
.section-tabs {
  position: sticky;
  top: 0;
  z-index: 6;
  display: flex;
  gap: 4px;
  margin: 0 0 16px;
  padding: 8px 0;
  overflow-x: auto;
  scrollbar-width: none;
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--border);
}
.section-tabs::-webkit-scrollbar {
  display: none;
}
.section-tabs a {
  flex-shrink: 0;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}
.section-tabs a:hover {
  color: var(--ink);
  background: var(--bg-eef2ea);
}
.section-tabs a[aria-current='location'] {
  color: var(--fg-f4f8ef);
  background: var(--bg-203c2d);
}
.ins-panel[id],
.ins-grid[id],
section[id] {
  scroll-margin-top: 72px;
}
/* Daily net profit as bars above and below zero. */
.chart .profit-bar {
  fill: var(--fg-3c7256);
  transition: opacity 0.15s;
}
.chart .profit-bar.loss {
  fill: var(--fg-c0573b);
}
.chart .profit-bar:hover,
.chart .profit-bar:focus-visible {
  opacity: 0.8;
  outline: none;
}
.chart .chart-zero {
  stroke: var(--fg-9aa597);
  stroke-width: 1;
}
.chip-toggle {
  border: 0;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
}
.pp-table td {
  vertical-align: middle;
}
.pp-table .pp-counts {
  margin: 0;
}
.pp-table a.prod-name {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
/* Two cards side by side at the same height, so neither leaves a gap under it. */
.ins-grid.even {
  align-items: stretch;
}
.ins-grid.even > .ins-panel {
  margin-bottom: 16px;
}
/* Pinned figures: calm tiles, colour only in the change, a small trend line in each. */
.ins-kpis.pinned > .ins-card {
  border-top-width: 1px;
  background: var(--bg-ffffff);
}
.sparkline {
  display: block;
  width: 100%;
  height: 28px;
  margin-top: 2px;
}
.spark-area {
  fill: rgba(60, 114, 86, 0.1);
}
.spark-line {
  fill: none;
  stroke: var(--fg-3c7256);
  stroke-width: 1.6;
}
.spark-dot {
  fill: var(--fg-203c2d);
}
.pinned-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px 16px;
  margin: -6px 0 16px;
}
.pinned-bar .text-button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.more-figures summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--focus);
}
.more-figures ul {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.more-figures li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--bg-ffffff);
  font-size: 13px;
}
.pin-editor {
  display: grid;
  gap: 12px;
  margin: 0 0 16px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--bg-ffffff);
}
.pin-editor p {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}
.pin-editor ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.pin-editor li button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--bg-ffffff);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
}
.pin-editor li button[aria-pressed='true'] {
  border-color: var(--line-203c2d);
  background: var(--bg-eef5e4);
}
.pin-editor li button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.pin-mark {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid var(--border);
  font-size: 11px;
}
[aria-pressed='true'] > .pin-mark {
  background: var(--bg-203c2d);
  border-color: var(--line-203c2d);
  color: var(--fg-f4f8ef);
}
.pin-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ins-card-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 14px;
  margin-top: auto;
}
.ins-card-actions .text-button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.ins-card-actions .muted-action {
  color: var(--muted);
}
.coverage-label {
  margin: 0 0 6px;
  font-size: 13px;
  color: var(--muted);
}
.coverage-label b {
  color: var(--ink);
}
/* Customer groups by first-order quarter: the more a group grew past its first order, the
   deeper the cell's green. */
.cohort-table .cohort-cell {
  background: rgba(60, 114, 86, calc(0.06 + var(--lift, 0) * 0.3));
}

/* The orders page: filters, the orders and customers tables, and one order in a side panel. */
.ord-tabs {
  display: flex;
  gap: 6px;
  margin: 14px 0 4px;
  border-bottom: 1px solid var(--border);
}
.ord-tabs button {
  background: none;
  border: 0;
  border-bottom: 3px solid transparent;
  padding: 10px 14px;
  min-height: 44px;
  font: inherit;
  font-weight: 600;
  color: var(--muted);
}
.ord-tabs button.active {
  color: var(--ink);
  border-bottom-color: var(--green-line);
}
.ord-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.ord-tools .chips small {
  opacity: 0.7;
  margin-inline-start: 4px;
}
.ord-search {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line-849282);
  border-radius: var(--r-pill);
  background: var(--bg-ffffff);
  padding: 0 14px;
  min-height: 40px;
  flex: 0 1 300px;
}
.ord-search input {
  border: 0;
  background: none;
  font: inherit;
  font-size: 14px;
  min-width: 0;
  flex: 1;
  outline: none;
}
.ord-search:focus-within {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.ord-filter {
  display: flex;
  gap: 8px;
  margin: 0 0 12px;
}
.ord-filter button {
  background: none;
  border: 0;
  padding: 0;
  display: inline-flex;
  color: var(--muted);
}
.ord-table td {
  vertical-align: middle;
}
.ord-table tbody tr {
  cursor: pointer;
}
.ord-table tbody tr:hover td,
.ord-table tbody tr.selected td {
  background: var(--bg-f4f7ef);
}
.ord-table .text-button {
  padding: 0;
  min-height: 0;
}
.ord-table .text-button.strong {
  font-weight: 700;
  color: var(--ink);
}
.ord-items {
  max-width: 260px;
}
.ord-source {
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
}
.ord-customer {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.ord-track {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ord-pager {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
  font-size: 13px;
}
.ord-pager .button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.ord-segments {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin: 16px 0 8px;
}
.ord-segment {
  display: grid;
  justify-items: start;
  gap: 6px;
  text-align: start;
  background: var(--bg-ffffff);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 14px;
  font: inherit;
  box-shadow: var(--shadow-sm);
}
.ord-segment strong {
  font-size: 24px;
}
.ord-segment small {
  color: var(--muted);
  font-size: 12px;
}
.ord-segment.selected {
  border-color: var(--green-line);
  box-shadow: 0 0 0 2px var(--green);
}
.ord-overlay {
  position: fixed;
  inset: 0;
  background: rgb(23 37 31 / 35%);
  z-index: 1000;
  display: flex;
  justify-content: flex-end;
}
.ord-drawer {
  position: relative;
  background: var(--paper);
  width: min(560px, 100%);
  height: 100%;
  overflow-y: auto;
  padding: 24px 22px 40px;
  box-shadow: -10px 0 40px rgb(0 0 0 / 18%);
}
.ord-close {
  position: absolute;
  top: 14px;
  inset-inline-end: 14px;
  background: var(--bg-ffffff);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
}
.ord-drawer-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 16px;
  padding-inline-end: 48px;
}
.ord-drawer-head h2 {
  margin: 0;
  font-size: 22px;
}
.ord-drawer-head p {
  margin: 4px 0 0;
  font-size: 13px;
}
.ord-drawer-head .button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ord-card {
  background: var(--bg-ffffff);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 16px 18px;
  margin-bottom: 12px;
}
.ord-card h3 {
  margin: 0 0 10px;
  font-size: 15px;
}
.ord-card p {
  margin: 0 0 8px;
}
.ord-lines,
.ord-history {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: grid;
  gap: 10px;
}
.ord-lines li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
}
.ord-history li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
}
.ord-history .text-button {
  padding: 0;
  min-height: 0;
}
.ord-history .text-button:disabled {
  color: var(--ink);
  text-decoration: none;
}
.ord-form textarea {
  border: 1px solid var(--line-849282);
  border-radius: var(--r-sm);
  background: var(--bg-fbfcf8);
  padding: 7px 10px;
  font: inherit;
  width: 100%;
  resize: vertical;
}
.ord-form label.wide {
  flex-basis: 100%;
}
.workspace-content .small,
.ord-drawer .small {
  font-size: 12px;
}
.ord-drawer {
  color: var(--ink);
  font-family: var(--font-body);
}
.ord-drawer .muted {
  color: var(--muted);
}
@media (max-width: 900px) {
  .ord-segments {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 700px) {
  /* On a phone the source column gives way; it is in each order's panel. */
  .ord-table th:nth-child(8),
  .ord-table td:nth-child(8) {
    display: none;
  }
  .ord-search {
    flex-basis: 100%;
  }
}

/* The way in: the home page's three steps above every sign-up screen. */
.onb-steps {
  width: min(880px, 100%);
  margin: 44px auto 0;
}
.onb-steps ol {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.onb-step {
  position: relative;
  display: grid;
  gap: 10px;
  justify-items: start;
  padding-top: 18px;
  border-top: 2px solid var(--border);
  color: var(--muted);
  transition:
    border-color var(--t-slow) var(--ease),
    color var(--t-slow) var(--ease);
}
.onb-step.is-now {
  border-top-color: var(--green-line);
  color: var(--ink);
}
.onb-step.is-done {
  border-top-color: var(--line-a9c79a);
}
.onb-step svg {
  width: 22px;
  height: 22px;
  color: var(--fg-63835c);
}
.onb-step.is-next svg {
  color: var(--fg-a3ad9f);
}
.onb-step strong {
  font-size: 17px;
  font-weight: 600;
}
.onb-number {
  position: absolute;
  top: 18px;
  inset-inline-end: 0;
  font-size: 13px;
  color: var(--muted);
}
.onb-stages {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.onb-stages span {
  padding: 3px 10px;
  border-radius: var(--r-pill);
  background: var(--bg-eef2ea);
  color: var(--muted);
  font-size: 12px;
}
.onb-stages .is-past {
  background: var(--bg-e2eed9);
  color: var(--success);
}
.onb-stages .is-past::before {
  content: '✓ ';
}
.onb-stages .is-current {
  background: var(--lime-bg);
  color: var(--ink);
  font-weight: 600;
}
.onb-where {
  display: none;
}
.onb-steps + .connect-card {
  margin-top: 30px;
}
/* The buttons under a setup screen, and its store and question cards. */
.onb-actions {
  display: grid;
  gap: 4px;
  margin-top: 16px;
}
.onb-actions .button {
  margin-top: 0;
}
/* The store's own logo, from its website: kept whole, whatever its shape. */
.store-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.connect-card .connect-icon .store-logo {
  width: 124px;
  height: 56px;
}
.connect-card .connect-icon:has(> .store-logo) {
  width: 140px;
  height: 72px;
  padding: 8px;
  background: var(--bg-ffffff);
  border: 1px solid var(--border);
}
.onb-store .store-logo {
  width: 72px;
  height: 44px;
  flex-shrink: 0;
}
.onb-store strong:has(img) {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
/* The sources screen: ad platforms, then optional others, each with its own button. */
.onb-sources {
  margin-top: 22px;
  text-align: start;
}
.onb-sources h2 {
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 8px;
}
.onb-sources ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.onb-sources li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
.onb-sources li div {
  display: grid;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.onb-sources li small {
  margin: 0 !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.onb-sources .button {
  width: auto;
  margin-top: 0;
  padding: 6px 12px;
  font-size: 13px;
  flex-shrink: 0;
}
.onb-sources strong {
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.connect-card.is-wide {
  max-width: 640px;
}
.onb-search {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  padding: 0 12px;
  border: 1px solid var(--line-cbd5e1);
  border-radius: var(--r-md);
  background: var(--bg-ffffff);
  color: var(--muted);
}
.onb-search input {
  flex: 1;
  min-width: 0;
  padding: 10px 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  outline: none;
}
.onb-search:focus-within {
  border-color: var(--line-203c2d);
}
@media (max-width: 520px) {
  .onb-sources ul {
    grid-template-columns: minmax(0, 1fr);
  }
}
.onb-sources .set-pill {
  flex-shrink: 0;
}
.connect-card p.onb-required {
  margin: 0;
  font-size: 13px;
  text-align: center;
}
/* The store screen: the platform is picked, and connected, in place. */
.onb-platform {
  margin-top: 22px;
}
.onb-platform .vat-choice strong {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.onb-connect {
  text-align: start;
}
.onb-connect:not(:empty) {
  margin-top: 22px;
}
.onb-connect input:not([type='checkbox']):not([type='radio']) {
  display: block;
  width: 100%;
  padding: 12px;
  border: 1px solid var(--line-849282);
  border-radius: var(--r-sm);
  background: var(--bg-fbfcf8);
  font: inherit;
  font-size: 14px;
  margin-top: 7px;
  color: var(--fg-30472d);
}
.onb-connect .input-row input:not([type='checkbox']):not([type='radio']) {
  margin-top: 0;
}
.onb-connect .input-row .button {
  width: auto;
  margin-top: 0;
}
.onb-actions .text-link {
  justify-self: center;
  margin-top: 8px;
  font-size: 14px;
}
.onb-store {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 22px 0 6px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  text-align: start;
}
.onb-store div {
  display: grid;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.onb-store strong {
  font-size: 16px;
}
.onb-store small {
  margin: 0 !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.onb-store .set-pill {
  flex-shrink: 0;
}
.onb-questions {
  display: grid;
  gap: 10px;
  margin: 22px 0 8px;
  padding: 0;
  list-style: none;
  text-align: start;
}
.onb-questions li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--r-md);
  background: var(--bg-f2f6ee);
  font-size: 14px;
  line-height: 1.5;
  animation: rise var(--t-slow) var(--ease-out) both;
}
.onb-questions li:nth-child(2) {
  animation-delay: 80ms;
}
.onb-questions li:nth-child(3) {
  animation-delay: 160ms;
}
.onb-questions svg {
  flex-shrink: 0;
  color: var(--green);
}
.connect-card .channel-card.is-bare {
  margin: 18px 0 0;
  padding: 0;
  border: 0;
  box-shadow: none;
  animation: none;
}
@media (max-width: 640px) {
  .onb-steps {
    margin-top: 28px;
  }
  .onb-steps ol {
    gap: 12px;
  }
  .onb-step {
    gap: 6px;
    padding-top: 12px;
  }
  .onb-step strong {
    font-size: 14px;
  }
  .onb-step svg {
    width: 18px;
    height: 18px;
  }
  .onb-number {
    top: 12px;
    font-size: 12px;
  }
  .onb-stages {
    display: none;
  }
  .onb-where {
    display: block;
    margin: 14px 0 0;
    text-align: center;
    font-size: 13px;
    color: var(--muted);
  }
  .onb-steps + .connect-card {
    margin-top: 18px;
  }
}

/* The overview before the first numbers: a welcome, the store, and the setup under it. */
.first-run {
  display: grid;
  gap: 10px;
  margin-bottom: 16px;
  padding: 28px;
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background: radial-gradient(ellipse at 85% 0%, var(--bg-eef5e4), var(--bg-ffffff) 60%);
  box-shadow: var(--shadow-sm);
  animation: rise var(--t-slow) var(--ease-out) both;
}
.first-run-hello {
  color: var(--green);
  font-size: 14px;
  font-weight: 600;
}
.first-run h2 {
  margin: 0;
  font: 500 clamp(24px, 3vw, 30px) / 1.25 var(--font-display);
  letter-spacing: -0.6px;
}
.first-run > p {
  max-width: 640px;
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.7;
}
.first-run-store {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 560px;
  margin-top: 8px;
  padding: 16px 18px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--bg-ffffff);
}
.first-run-store div {
  display: grid;
  flex: 1;
  gap: 2px;
  min-width: 0;
}
.first-run-store strong {
  font-size: 16px;
}
.first-run-store small {
  overflow: hidden;
  color: var(--muted);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.first-run-count {
  flex-shrink: 0;
  color: var(--muted);
  font-size: 13px;
}
.first-run-count b {
  color: var(--ink);
  font-size: 18px;
  font-weight: 600;
}
.first-run-alert {
  flex-shrink: 0;
  color: var(--danger);
}
/* An import has no known end: a band runs along the bottom while it works. */
.first-run-bar {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--green-bg), transparent) 0 0 / 40% 100%
    no-repeat;
  animation: first-run-bar 1.6s var(--ease) infinite;
}
@keyframes first-run-bar {
  from {
    background-position: -40% 0;
  }
  to {
    background-position: 140% 0;
  }
}
.first-run-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}
.first-run-meanwhile {
  margin-top: 6px !important;
  font-size: 14px !important;
}
@media (prefers-reduced-motion: reduce) {
  .first-run-bar {
    animation: none;
    background: var(--green-bg);
    opacity: 0.4;
  }
}
@media (max-width: 600px) {
  .first-run {
    padding: 20px;
  }
  .first-run-store {
    flex-wrap: wrap;
  }
  .first-run-count {
    flex-basis: 100%;
  }
  .first-run-actions .button {
    flex: 1 1 100%;
  }
}

/* The footer of every page: the brand, help, the product and the policies. */
footer.site-footer {
  display: block;
  width: 100%;
  margin-top: 56px;
  padding: 40px 0 28px;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 14px;
  text-align: start;
}
.site-footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1.3fr 1fr 1fr;
  gap: 32px;
}
.site-footer-grid > * {
  display: grid;
  align-content: start;
  gap: 10px;
}
.site-footer h2 {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 4px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
}
.site-footer p {
  margin: 0;
  line-height: 1.6;
}
.site-footer a {
  justify-self: start;
  color: var(--muted);
  transition: color var(--t) var(--ease);
}
.site-footer a:hover {
  color: var(--ink);
}
.site-footer .brand {
  margin-bottom: 4px;
  color: var(--ink);
}
.site-footer-trust {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}
.site-footer-trust svg {
  flex-shrink: 0;
  color: var(--green);
}
a.site-footer-mail {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 2px 0;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--bg-ffffff);
  color: var(--ink);
  font-weight: 600;
}
a.site-footer-mail:hover {
  border-color: var(--line-c9dcb8);
}
.site-footer-mail svg {
  color: var(--green);
}
.site-footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 20px;
  margin-top: 32px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  font-size: 12px;
}
/* On sign-in and setup screens the footer sits under the card, as wide as the page allows. */
.connect-page > footer.site-footer {
  max-width: 1080px;
}
@media (max-width: 900px) {
  .site-footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 560px) {
  footer.site-footer {
    margin-top: 40px;
  }
  .site-footer-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .site-footer-bottom {
    flex-direction: column;
  }
}

/* The costs page: an icon by each part, links to jump between them, and the month at a glance. */
.panel-icon {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-inline-end: 10px;
  vertical-align: middle;
  border-radius: var(--r-pill);
  background: var(--bg-edf3e6);
  color: var(--fg-4f7a43);
}
.costs-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 4px;
}
.costs-jump a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--bg-ffffff);
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
  transition:
    border-color var(--t) var(--ease),
    background-color var(--t) var(--ease);
}
.costs-jump a:hover {
  border-color: var(--line-c9dcb8);
  background: var(--bg-f4f9ee);
}
.costs-jump svg {
  color: var(--green);
}
.costs-main > .ins-panel {
  scroll-margin-top: 20px;
}
.quick-steps {
  counter-reset: quick;
  padding-inline-start: 0;
  list-style: none;
}
.quick-steps > li {
  position: relative;
  padding-inline-start: 40px;
  counter-increment: quick;
}
.quick-steps > li::before {
  content: counter(quick);
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--lime-bg);
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
}
.quick-steps > li:last-child {
  margin-inline-start: 0;
  padding-inline-start: 40px;
}
.quick-steps > li:last-child::before {
  content: '💬';
  background: var(--bg-f2f6ee);
  font-size: 13px;
}
.summary-ring {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px;
  border-radius: var(--r-md);
  background: var(--bg-ffffff10);
  font-size: 13px;
  color: var(--fg-d9e6d4);
}
.summary-ring > span:last-child {
  display: grid;
  gap: 2px;
}
.summary-ring small {
  color: var(--fg-b9cbb6);
  font-size: 12px;
}
.summary-ring .ring {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background:
    radial-gradient(closest-side, var(--bg-20372c) 76%, transparent 78% 100%),
    conic-gradient(var(--lime-bg) var(--p), var(--bg-ffffff22) 0);
}
.summary-ring .ring b {
  color: var(--fg-ffffff);
  font-size: 15px;
}
.breakeven-bar {
  display: block;
  height: 6px;
  margin-bottom: 10px;
  overflow: hidden;
  border-radius: var(--r-pill);
  background: var(--bg-ffffff22);
}
.breakeven-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--lime-bg);
}

/* Dark mode. The page sets data-theme="dark" on <html> (see the theme button in the workspace
   header). Every color the stylesheets use is a token here, split by role: a surface (bg), a line
   (line) or text and icons (fg). In the dark theme surfaces turn dark, text turns light, and the
   dark cards and translucent overlays stay as they are. The literal tokens below are generated
   from the light colors; the core ones are set by hand. */
:root {
  --ink-bg: var(--ink);
  --ink-line: var(--ink);
  --white-bg: var(--white);
  --lime-bg: var(--lime);
  --green-bg: var(--green);
  --green-line: var(--green);
  --muted-bg: var(--muted);
  --tiktok: #111827;
  --bg-17251f: #17251f;
  --bg-17291ecc: #17291ecc;
  --bg-1f8a5b: #1f8a5b;
  --bg-20372c: #20372c;
  --bg-203c2d: #203c2d;
  --bg-223e2e: #223e2e;
  --bg-246144: #246144;
  --bg-2f5a6b1f: #2f5a6b1f;
  --bg-34523a: #34523a;
  --bg-387b62: #387b62;
  --bg-3d4a5c: #3d4a5c;
  --bg-679c53: #679c53;
  --bg-78350f: #78350f;
  --bg-7fab58: #7fab58;
  --bg-85341f: #85341f;
  --bg-962d20: #962d20;
  --bg-b7791f: #b7791f;
  --bg-bdd0b629: #bdd0b629;
  --bg-c9d1c3: #c9d1c3;
  --bg-cfd6cb: #cfd6cb;
  --bg-d5e8b8: #d5e8b8;
  --bg-d6e9bd: #d6e9bd;
  --bg-d9a441: #d9a441;
  --bg-dbeec7: #dbeec7;
  --bg-dce8d1: #dce8d1;
  --bg-deefe5: #deefe5;
  --bg-e2eed9: #e2eed9;
  --bg-e3a50c: #e3a50c;
  --bg-e3ebd7: #e3ebd7;
  --bg-e3efd6: #e3efd6;
  --bg-e7eddd: #e7eddd;
  --bg-e9f2db: #e9f2db;
  --bg-e9f2df: #e9f2df;
  --bg-e9f6ee: #e9f6ee;
  --bg-eaf0e0: #eaf0e0;
  --bg-eceff0: #eceff0;
  --bg-ecf0e5: #ecf0e5;
  --bg-ecf7f6: #ecf7f6;
  --bg-edf0e6: #edf0e6;
  --bg-edf0e9: #edf0e9;
  --bg-edf0f3: #edf0f3;
  --bg-edf0f5: #edf0f5;
  --bg-edf3e6: #edf3e6;
  --bg-eef0eb: #eef0eb;
  --bg-eef1ec: #eef1ec;
  --bg-eef2ea: #eef2ea;
  --bg-eef3ef: #eef3ef;
  --bg-eef5e4: #eef5e4;
  --bg-eef5f8: #eef5f8;
  --bg-eef8ea: #eef8ea;
  --bg-f0f3ec: #f0f3ec;
  --bg-f0f4e9: #f0f4e9;
  --bg-f0f6e8: #f0f6e8;
  --bg-f0f7e8: #f0f7e8;
  --bg-f1f3ee: #f1f3ee;
  --bg-f1f7e6: #f1f7e6;
  --bg-f1f8ee: #f1f8ee;
  --bg-f1f8f4: #f1f8f4;
  --bg-f2f6ee: #f2f6ee;
  --bg-f2f7ed: #f2f7ed;
  --bg-f3f0fa: #f3f0fa;
  --bg-f3f4f1: #f3f4f1;
  --bg-f3f5ef: #f3f5ef;
  --bg-f3f6ef: #f3f6ef;
  --bg-f3f7ec: #f3f7ec;
  --bg-f4f6f1: #f4f6f1;
  --bg-f4f7ef: #f4f7ef;
  --bg-f4f7f0: #f4f7f0;
  --bg-f4f9ec: #f4f9ec;
  --bg-f4f9ee: #f4f9ee;
  --bg-f5f7f0: #f5f7f0;
  --bg-f5f7f2: #f5f7f2;
  --bg-f5f7f3: #f5f7f3;
  --bg-f6f7f3: #f6f7f3;
  --bg-f6f7f9: #f6f7f9;
  --bg-f6f8f2: #f6f8f2;
  --bg-f6f9f2: #f6f9f2;
  --bg-f6fbf3: #f6fbf3;
  --bg-f7f9f4: #f7f9f4;
  --bg-fafcf8: #fafcf8;
  --bg-fbe6e3: #fbe6e3;
  --bg-fbf3d9: #fbf3d9;
  --bg-fbfcf8: #fbfcf8;
  --bg-fbfdf7: #fbfdf7;
  --bg-fcf1ed: #fcf1ed;
  --bg-fcfdf9: #fcfdf9;
  --bg-fdf3df: #fdf3df;
  --bg-fdf3f1: #fdf3f1;
  --bg-fdf8ec: #fdf8ec;
  --bg-fef3c7: #fef3c7;
  --bg-ffd9cc: #ffd9cc;
  --bg-fff0eb: #fff0eb;
  --bg-fff2d4: #fff2d4;
  --bg-fff5f3: #fff5f3;
  --bg-fff6f2: #fff6f2;
  --bg-fff7e6: #fff7e6;
  --bg-ffffff: white;
  --bg-ffffff08: #ffffff08;
  --bg-ffffff10: #ffffff10;
  --bg-ffffff12: #ffffff12;
  --bg-ffffff22: #ffffff22;
  --bg-ffffff88: #fff8;
  --bg-fffffff0: #fffffff0;
  --fg-096f7a: #096f7a;
  --fg-123c44: #123c44;
  --fg-142b3c: #142b3c;
  --fg-168995: #168995;
  --fg-172033: #172033;
  --fg-17212d: #17212d;
  --fg-17212e: #17212e;
  --fg-1f7a45: #1f7a45;
  --fg-1f8a5b: #1f8a5b;
  --fg-20372c: #20372c;
  --fg-203a2e: #203a2e;
  --fg-203c2d: #203c2d;
  --fg-203c2f: #203c2f;
  --fg-246144: #246144;
  --fg-2a492f: #2a492f;
  --fg-2f5a6b: #2f5a6b;
  --fg-30472d: #30472d;
  --fg-34523a: #34523a;
  --fg-345536: #345536;
  --fg-37543a: #37543a;
  --fg-3c4a40: #3c4a40;
  --fg-3c7256: #3c7256;
  --fg-3d4a5c: #3d4a5c;
  --fg-4f7a43: #4f7a43;
  --fg-52684c: #52684c;
  --fg-526c45: #526c45;
  --fg-527263: #527263;
  --fg-536275: #536275;
  --fg-56805e: #56805e;
  --fg-586778: #586778;
  --fg-59695f: #59695f;
  --fg-5f6b62: #5f6b62;
  --fg-617083: #617083;
  --fg-63835c: #63835c;
  --fg-648154: #648154;
  --fg-667384: #667384;
  --fg-6d7b89: #6d7b89;
  --fg-728667: #728667;
  --fg-72915a: #72915a;
  --fg-73bca1: #73bca1;
  --fg-78350f: #78350f;
  --fg-7a2f1f: #7a2f1f;
  --fg-7d9964: #7d9964;
  --fg-93a183: #93a183;
  --fg-962d20: #962d20;
  --fg-9aa597: #9aa597;
  --fg-9e4b39: #9e4b39;
  --fg-a3ad9f: #a3ad9f;
  --fg-a7baa4: #a7baa4;
  --fg-b42318: #b42318;
  --fg-b7791f: #b7791f;
  --fg-b9c9b6: #b9c9b6;
  --fg-b9cbb6: #b9cbb6;
  --fg-c0573b: #c0573b;
  --fg-c3cabd: #c3cabd;
  --fg-d9e6d4: #d9e6d4;
  --fg-e3a50c: #e3a50c;
  --fg-e4efdb: #e4efdb;
  --fg-e8ebe4: #e8ebe4;
  --fg-eef3e8: #eef3e8;
  --fg-f1f5eb: #f1f5eb;
  --fg-f3f8ef: #f3f8ef;
  --fg-f4f8ef: #f4f8ef;
  --fg-ffc9b8: #ffc9b8;
  --fg-ffffff: white;
  --line-137c89: #137c89;
  --line-20372c: #20372c;
  --line-203c2d: #203c2d;
  --line-387b62: #387b62;
  --line-7a9c65: #7a9c65;
  --line-849282: #849282;
  --line-a9c79a: #a9c79a;
  --line-aac6ca: #aac6ca;
  --line-b7d9b0: #b7d9b0;
  --line-b8c2b2: #b8c2b2;
  --line-b9cdb6: #b9cdb6;
  --line-bdcbd0: #bdcbd0;
  --line-c5d8b4: #c5d8b4;
  --line-c9d1c3: #c9d1c3;
  --line-c9dcb8: #c9dcb8;
  --line-c9e6c3: #c9e6c3;
  --line-cbd3dc: #cbd3dc;
  --line-cbd5e1: #cbd5e1;
  --line-cfe0c0: #cfe0c0;
  --line-cfe1e8: #cfe1e8;
  --line-d3d9cc: #d3d9cc;
  --line-d7e0e3: #d7e0e3;
  --line-d7e5c9: #d7e5c9;
  --line-d8e6c4: #d8e6c4;
  --line-d97706: #d97706;
  --line-d9e8c8: #d9e8c8;
  --line-dce2e9: #dce2e9;
  --line-dce3d9: #dce3d9;
  --line-dce4d4: #dce4d4;
  --line-dfe7d3: #dfe7d3;
  --line-dfe8d6: #dfe8d6;
  --line-e0e5eb: #e0e5eb;
  --line-e3e7ec: #e3e7ec;
  --line-e3e8d9: #e3e8d9;
  --line-e3ecd6: #e3ecd6;
  --line-e7eadd: #e7eadd;
  --line-e7ebdf: #e7ebdf;
  --line-e7ece2: #e7ece2;
  --line-e8ede1: #e8ede1;
  --line-ebdfc3: #ebdfc3;
  --line-edf0f3: #edf0f3;
  --line-eef1e8: #eef1e8;
  --line-eef1ea: #eef1ea;
  --line-efc4b8: #efc4b8;
  --line-efc9bd: #efc9bd;
  --line-efc9c2: #efc9c2;
  --line-f0cfc4: #f0cfc4;
  --line-f0d4c9: #f0d4c9;
  --line-f0d9a8: #f0d9a8;
  --line-f0f2ed: #f0f2ed;
  --line-ffffff: #fff;
  --line-ffffff12: #ffffff12;
  --line-ffffff13: #ffffff13;
}
/* Locked campaign profit: real findings from the business's own ads, then the upgrade. */
.upgrade-teaser {
  display: grid;
  gap: 16px;
  padding: 20px;
  border: 1px solid var(--line-d7e5c9);
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, var(--bg-f4f9ee), var(--white-bg) 70%);
}
.teaser-head {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.teaser-head h3 {
  margin: 0 0 4px;
  font: 600 19px / 1.35 var(--font-display);
}
.teaser-head p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}
.teaser-lock {
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--lime-bg);
  color: var(--ink);
}
.teaser-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}
.teaser-card {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--white-bg);
  animation: rise var(--t-slow) var(--ease-out) both;
}
.teaser-card:nth-child(2) {
  animation-delay: 90ms;
}
.teaser-card:nth-child(3) {
  animation-delay: 180ms;
}
.teaser-card.is-best {
  box-shadow: inset 0 3px 0 var(--profit);
}
.teaser-card.is-losing {
  box-shadow: inset 0 3px 0 var(--danger);
}
.teaser-card.is-funnel {
  box-shadow: inset 0 3px 0 var(--info);
}
.teaser-card p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}
.teaser-label {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
}
.teaser-path {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  color: var(--muted);
  font-size: 13px;
}
.teaser-crumb {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  overflow-wrap: anywhere;
}
.teaser-big {
  font: 700 26px / 1.1 var(--font-display);
}
.is-best .teaser-big {
  color: var(--profit);
}
.is-losing .teaser-big {
  color: var(--danger);
}
.teaser-funnel {
  display: grid;
  gap: 8px;
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
}
.teaser-funnel li {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  font-size: 13px;
}
.teaser-funnel i {
  height: 8px;
  overflow: hidden;
  border-radius: var(--r-pill);
  background: var(--grid);
}
.teaser-funnel b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--info);
}
.teaser-loading {
  height: 120px;
  border-radius: var(--r-md);
  background: var(--grid);
  animation: pulse 1.4s ease-in-out infinite;
}
.teaser-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
:root[data-theme='dark'] {
  color-scheme: dark;
  --ink: #e7eee4;
  --muted: #a3afa6;
  --green: #8cc3a2;
  --lime: #d4ecab;
  --paper: #0f1512;
  --border: #2a352e;
  --white: #fff;
  --focus: #8cc3a2;
  --on-dark-muted: #a9bea8;
  --success: #8fd18a;
  --warning: #e6c06a;
  --danger: #f08b73;
  --ink-bg: #26372e;
  --ink-line: #3a4b41;
  --white-bg: #17201b;
  --lime-bg: #34492a;
  --green-bg: #3c7256;
  --green-line: #6fa385;
  --muted-bg: #7d897f;
  --tiktok: #e5e7eb;
  --series-current: #7fb3c4;
  --series-soft: #2f4a52;
  --series-previous: #7c857a;
  --area: #7fb3c41f;
  --profit: #6fcf8f;
  --cost: #f08b73;
  --grid: #26302a;
  --good-bg: #1d2e1f;
  --bad-bg: #3a2420;
  --warn-bg: #3a321d;
  --info: #7fb3c4;
  --info-bg: #1c2a30;
  --shadow-xs: 0 1px 2px rgb(0 0 0 / 40%);
  --shadow-sm: 0 1px 3px rgb(0 0 0 / 40%), 0 1px 2px rgb(0 0 0 / 30%);
  --shadow-md: 0 8px 24px rgb(0 0 0 / 45%);
  --shadow-lg: 0 18px 48px rgb(0 0 0 / 55%);
  --ring: 0 0 0 3px rgb(140 195 162 / 30%);
  --brand: #2f5a42;
  --brand-hover: #3a6b50;
  --brand-active: #24463a;
  --field-border: #3a463e;
  --field-border-hover: #55635a;
  --success-soft: #1f3322;
  --danger-soft: #3b2420;
  --warning-soft: #392f1b;
  --bg-17251f: #212f29;
  --bg-17291ecc: #17291ecc;
  --bg-1f8a5b: #309666;
  --bg-20372c: #2a4136;
  --bg-203c2d: #2a4737;
  --bg-223e2e: #2c4938;
  --bg-246144: #306d4f;
  --bg-2f5a6b1f: #2f5a6b1f;
  --bg-34523a: #3f5d45;
  --bg-387b62: #44876d;
  --bg-3d4a5c: #485567;
  --bg-679c53: #2d561b;
  --bg-78350f: #85401c;
  --bg-7fab58: #2d4d02;
  --bg-85341f: #92402a;
  --bg-962d20: #a33a2c;
  --bg-b7791f: #6f3f00;
  --bg-bdd0b629: #bdd0b629;
  --bg-c9d1c3: #292e25;
  --bg-cfd6cb: #272b24;
  --bg-d5e8b8: #1e2907;
  --bg-d6e9bd: #1d290a;
  --bg-d9a441: #573000;
  --bg-dbeec7: #1b260c;
  --bg-dce8d1: #1f2617;
  --bg-deefe5: #19231d;
  --bg-e2eed9: #1c2316;
  --bg-e3a50c: #592b00;
  --bg-e3ebd7: #1f2417;
  --bg-e3efd6: #1c2313;
  --bg-e7eddd: #1e2218;
  --bg-e9f2db: #1c2113;
  --bg-e9f2df: #1c2115;
  --bg-e9f6ee: #171f1b;
  --bg-eaf0e0: #1d2117;
  --bg-eceff0: #1d1f20;
  --bg-ecf0e5: #1e2019;
  --bg-ecf7f6: #171e1d;
  --bg-edf0e6: #1e2019;
  --bg-edf0e9: #1e1f1b;
  --bg-edf0f3: #1d1e20;
  --bg-edf0f5: #1c1e21;
  --bg-edf3e6: #1c1f17;
  --bg-eef0eb: #1e1f1c;
  --bg-eef1ec: #1d1f1c;
  --bg-eef2ea: #1c1f1a;
  --bg-eef3ef: #1b1e1c;
  --bg-eef5e4: #1b1f15;
  --bg-eef5f8: #191d1f;
  --bg-eef8ea: #181e16;
  --bg-f0f3ec: #1c1e1a;
  --bg-f0f4e9: #1c1e18;
  --bg-f0f6e8: #1b1e16;
  --bg-f0f7e8: #1a1e15;
  --bg-f1f3ee: #1d1e1b;
  --bg-f1f7e6: #1b1e14;
  --bg-f1f8ee: #191d17;
  --bg-f1f8f4: #191d1b;
  --bg-f2f6ee: #1b1d19;
  --bg-f2f7ed: #1a1d17;
  --bg-f3f0fa: #1e1c22;
  --bg-f3f4f1: #1c1d1b;
  --bg-f3f5ef: #1c1d19;
  --bg-f3f6ef: #1b1d19;
  --bg-f3f7ec: #1b1d17;
  --bg-f4f6f1: #1b1d1a;
  --bg-f4f7ef: #1b1d18;
  --bg-f4f7f0: #1b1d18;
  --bg-f4f9ec: #1a1d15;
  --bg-f4f9ee: #1a1d16;
  --bg-f5f7f0: #1b1c18;
  --bg-f5f7f2: #1b1c19;
  --bg-f5f7f3: #1b1c1a;
  --bg-f6f7f3: #1b1c19;
  --bg-f6f7f9: #1b1b1c;
  --bg-f6f8f2: #1b1c18;
  --bg-f6f9f2: #1a1c18;
  --bg-f6fbf3: #191c17;
  --bg-f7f9f4: #1a1b18;
  --bg-fafcf8: #191a18;
  --bg-fbe6e3: #291c1b;
  --bg-fbf3d9: #221d0c;
  --bg-fbfcf8: #191a18;
  --bg-fbfdf7: #191a16;
  --bg-fcf1ed: #211b19;
  --bg-fcfdf9: #191a17;
  --bg-fdf3df: #221c0f;
  --bg-fdf3f1: #201a19;
  --bg-fdf8ec: #1e1b13;
  --bg-fef3c7: #241d00;
  --bg-ffd9cc: #341d15;
  --bg-fff0eb: #231a17;
  --bg-fff2d4: #241c08;
  --bg-fff5f3: #1f1a18;
  --bg-fff6f2: #1f1a17;
  --bg-fff7e6: #1f1a10;
  --bg-ffffff: #17201b;
  --bg-ffffff08: #ffffff08;
  --bg-ffffff10: #ffffff10;
  --bg-ffffff12: #ffffff12;
  --bg-ffffff22: #ffffff22;
  --bg-ffffff88: #fff8;
  --bg-fffffff0: #fffffff0;
  --fg-096f7a: #6db6c0;
  --fg-123c44: #aad1d9;
  --fg-142b3c: #bed7eb;
  --fg-168995: #51a8b3;
  --fg-172033: #cfdaf2;
  --fg-17212d: #cfdceb;
  --fg-17212e: #cfdbec;
  --fg-1f7a45: #6eb985;
  --fg-1f8a5b: #5bb083;
  --fg-20372c: #bbd3c6;
  --fg-203a2e: #b7d2c4;
  --fg-203c2d: #b4d2c0;
  --fg-203c2f: #b4d1c2;
  --fg-246144: #8bc1a3;
  --fg-2a492f: #abcaae;
  --fg-2f5a6b: #91bacb;
  --fg-30472d: #b1c9ad;
  --fg-34523a: #a5c3aa;
  --fg-345536: #a2c3a2;
  --fg-37543a: #a4c1a6;
  --fg-3c4a40: #b2c1b6;
  --fg-3c7256: #82b498;
  --fg-3d4a5c: #aebbcf;
  --fg-4f7a43: #86af7b;
  --fg-52684c: #9bb195;
  --fg-526c45: #97b18b;
  --fg-527263: #8dac9d;
  --fg-536275: #9cabbe;
  --fg-56805e: #81a888;
  --fg-586778: #99a8b9;
  --fg-59695f: #9caba2;
  --fg-5f6b62: #9da8a0;
  --fg-617083: #93a2b4;
  --fg-63835c: #85a37f;
  --fg-648154: #89a47a;
  --fg-667384: #939faf;
  --fg-6d7b89: #8e9ba8;
  --fg-728667: #8a9c80;
  --fg-72915a: #7f9b6a;
  --fg-73bca1: #73bca1;
  --fg-78350f: #eca685;
  --fg-7a2f1f: #f1a290;
  --fg-7d9964: #7c9566;
  --fg-93a183: #93a183;
  --fg-962d20: #f7907e;
  --fg-9aa597: #9aa597;
  --fg-9e4b39: #de8d7a;
  --fg-a3ad9f: #a3ad9f;
  --fg-a7baa4: #a7baa4;
  --fg-b42318: #fe7a68;
  --fg-b7791f: #bb833a;
  --fg-b9c9b6: #b9c9b6;
  --fg-b9cbb6: #b9cbb6;
  --fg-c0573b: #da795f;
  --fg-c3cabd: #c3cabd;
  --fg-d9e6d4: #d9e6d4;
  --fg-e3a50c: #e3a50c;
  --fg-e4efdb: #e4efdb;
  --fg-e8ebe4: #e8ebe4;
  --fg-eef3e8: #eef3e8;
  --fg-f1f5eb: #f1f5eb;
  --fg-f3f8ef: #f3f8ef;
  --fg-f4f8ef: #f4f8ef;
  --fg-ffc9b8: #ffc9b8;
  --fg-ffffff: #ffffff;
  --line-137c89: #3694a1;
  --line-20372c: #354c40;
  --line-203c2d: #355142;
  --line-387b62: #519379;
  --line-7a9c65: #5a704c;
  --line-849282: #646d62;
  --line-a9c79a: #45573b;
  --line-aac6ca: #415255;
  --line-b7d9b0: #3a4e36;
  --line-b8c2b2: #4c5248;
  --line-b9cdb6: #434f42;
  --line-bdcbd0: #444c4f;
  --line-c5d8b4: #404b36;
  --line-c9d1c3: #454941;
  --line-c9dcb8: #3e4934;
  --line-c9e6c3: #354632;
  --line-cbd3dc: #41464b;
  --line-cbd5e1: #40454c;
  --line-cfe0c0: #3c4633;
  --line-cfe1e8: #384246;
  --line-d3d9cc: #41453d;
  --line-d7e0e3: #3c4142;
  --line-d7e5c9: #3a4232;
  --line-d8e6c4: #3b422f;
  --line-d97706: #945418;
  --line-d9e8c8: #39412f;
  --line-dce2e9: #3b3e42;
  --line-dce3d9: #3c403a;
  --line-dce4d4: #3c4037;
  --line-dfe7d3: #3b3f34;
  --line-dfe8d6: #3a3f35;
  --line-e0e5eb: #3a3d40;
  --line-e3e7ec: #3a3c3f;
  --line-e3e8d9: #3b3d35;
  --line-e3ecd6: #383d31;
  --line-e7eadd: #3a3c35;
  --line-e7ebdf: #393b35;
  --line-e7ece2: #383b36;
  --line-e8ede1: #383b34;
  --line-ebdfc3: #453e2e;
  --line-edf0f3: #363839;
  --line-eef1e8: #373833;
  --line-eef1ea: #363834;
  --line-efc4b8: #594039;
  --line-efc9bd: #553f39;
  --line-efc9c2: #553f3b;
  --line-f0cfc4: #513e38;
  --line-f0d4c9: #4d3d37;
  --line-f0d9a8: #4c3f22;
  --line-f0f2ed: #363734;
  --line-ffffff: #17201b;
  --line-ffffff12: #ffffff12;
  --line-ffffff13: #ffffff13;
}
/* Black logos get a soft light edge so they show on the dark surfaces. */
:root[data-theme='dark'] img[src$='/tiktok.svg'],
:root[data-theme='dark'] img[src$='/tiktok_ads.svg'],
:root[data-theme='dark'] img[src$='/threads.svg'] {
  filter: drop-shadow(0 0 1px rgb(255 255 255 / 70%));
}
/* The theme button beside the business switcher in the workspace header. */
.workspace-header-tools {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.theme-toggle {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--white-bg);
  color: var(--muted);
  transition:
    color var(--t) var(--ease),
    border-color var(--t) var(--ease);
}
.theme-toggle:hover {
  color: var(--ink);
  border-color: var(--field-border-hover);
}
/* In the dark theme the brand mark and the chat button keep the lime accent, so they stand out. */
:root[data-theme='dark'] .brand-mark {
  background: #d4ecab;
  color: #17251f;
}
:root[data-theme='dark'] .chat-launcher {
  background: #d4ecab;
  color: #17251f;
}
:root[data-theme='dark'] .chat-launcher svg {
  color: #17251f;
}
:root[data-theme='dark'] .chat-launcher:hover {
  background: #e4f4c6;
}
/* Plans: monthly or yearly (yearly first), switched by two radio buttons with no script. */
.pr-cycle {
  display: flex;
  width: fit-content;
  margin: 0 auto 30px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--white-bg);
}
.pr-cycle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.pr-cycle label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 20px;
  border-radius: var(--r-pill);
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition:
    background-color var(--t) var(--ease),
    color var(--t) var(--ease);
}
.pr-cycle input:checked + label {
  background: var(--brand);
  color: #fff;
}
.pr-cycle input:focus-visible + label {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}
.pr-save {
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: var(--lime);
  color: #17251f;
  font-size: 11px;
  font-weight: 700;
}
.pr:has(#pr-cycle-monthly:checked) .pr-when-yearly,
.pr:not(:has(#pr-cycle-monthly:checked)) .pr-when-monthly {
  display: none;
}
/* The agencies card under the packages: a package and a price set with us. */
/* Add-ons on top of any package. */
.pr-addons {
  margin-top: 26px;
  text-align: start;
}
.pr-addons h3 {
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 600;
}
.pr-addons-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.pr-addon {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-content: start;
  gap: 4px 10px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--white-bg);
  color: var(--ink);
  text-decoration: none;
  transition:
    border-color var(--t-fast) var(--ease),
    transform var(--t-fast) var(--ease);
}
.pr-addon:hover {
  border-color: var(--green-line);
  transform: translateY(-2px);
}
.pr-addon-icon {
  display: grid;
  grid-row: span 2;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--lime-bg);
}
.pr-addon strong {
  font-size: 15px;
  font-weight: 600;
}
.pr-addon-price {
  color: var(--green);
  font-weight: 600;
}
.pr-addon-text {
  grid-column: 1 / -1;
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}
.pr-addons-note {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 13px;
}
.pr-addons-note a {
  color: inherit;
}
@media (max-width: 760px) {
  .pr-addons-grid {
    grid-template-columns: 1fr;
  }
}
.pr-agency {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 22px;
  margin-top: 22px;
  padding: 24px 28px;
  border: 1px dashed var(--field-border);
  border-radius: 22px;
  background: var(--white-bg);
  text-align: start;
}
.pr-agency h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
}
.pr-agency p {
  margin: 6px 0 10px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}
.pr-agency ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
}
.pr-agency li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.pr-agency li svg {
  color: var(--green);
}
.pr-agency-cta {
  display: grid;
  justify-items: center;
  gap: 8px;
}
.pr-agency-cta .button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.pr-agency-mail {
  color: var(--muted);
  font-size: 13px;
}
.pr-agency-mail:hover {
  color: var(--ink);
}
@media (max-width: 760px) {
  .pr-agency {
    grid-template-columns: 1fr;
    justify-items: start;
  }
  .pr-agency-cta {
    justify-items: start;
  }
}
/* ---------- Phones: nothing wider than the screen ---------- */
@media (max-width: 700px) {
  .ins-head {
    flex-wrap: wrap;
    align-items: flex-start;
  }
  .ins-head > * {
    min-width: 0;
    max-width: 100%;
  }
  .ins-store {
    flex-wrap: wrap;
  }
  .conn-badge {
    margin-inline-start: 0;
  }
  /* The page path and the header tools share one row; the business switcher, when there is
     one, takes a row of its own under them. */
  .workspace-header {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-block: 10px;
  }
  .workspace-header-tools {
    margin-inline-start: auto;
  }
  .workspace-header-tools:has(.account-switcher) {
    flex-basis: 100%;
  }
  .workspace-header-tools .account-switcher {
    flex: 1;
    width: auto;
  }
  /* What the package includes, one per line. */
  .plan-features {
    flex-direction: column;
    gap: 8px;
  }
}
/* Phones and tablets: form fields at 16px, so iOS never zooms the page when one is tapped. */
@media (max-width: 700px), (pointer: coarse) {
  input:not([type='checkbox']):not([type='radio']):not([type='range']),
  select,
  textarea {
    font-size: 16px !important;
  }
}
/* A table wider than the screen scrolls sideways; a soft shadow at the edge says there is more. */
.workspace-content .scroll,
.table-wrap,
.pr-table-wrap {
  background:
    linear-gradient(to right, var(--white-bg) 30%, transparent) left / 32px 100% no-repeat local,
    linear-gradient(to left, var(--white-bg) 30%, transparent) right / 32px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgb(0 0 0 / 16%), transparent) left / 12px 100%
      no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgb(0 0 0 / 16%), transparent) right / 12px 100%
      no-repeat scroll;
}

/* Sign-up: the form beside the walkthrough video on wide screens, the video under the form on
   phones. Signing in keeps the single card. */
.signin-single {
  display: contents;
}
.signup-split {
  width: 100%;
  max-width: 1200px;
  display: grid;
  gap: 28px;
  justify-items: center;
}
.onb-steps + .signup-split {
  margin-top: 30px;
}
.signup-split > .connect-card {
  margin: 0;
}
.signup-video {
  width: 100%;
  max-width: 620px;
  text-align: start;
}
.signup-video-eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: var(--muted);
}
.signup-video h2 {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.4px;
  line-height: 1.3;
  margin: 6px 0 14px;
}
.signup-video video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  border-radius: var(--r-xl);
  background: var(--bg-17251f);
  box-shadow: var(--shadow-md);
}
.signup-video ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 14px 0 0;
  padding: 0;
  counter-reset: signup-step;
}
.signup-video li {
  counter-increment: signup-step;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--bg-ffffff);
  color: var(--muted);
  font-size: 13px;
}
.signup-video li::before {
  content: counter(signup-step) ' · ';
  color: var(--ink);
  font-weight: 600;
}
@media (min-width: 1100px) {
  .signup-split {
    grid-template-columns: minmax(0, 530px) minmax(0, 1fr);
    align-items: start;
  }
  .signup-video {
    position: sticky;
    top: 30px;
    margin-top: 10px;
  }
}

/* The free profit calculator on the site: the fields beside the results, then how it is worked
   out and the questions. */
.calc-page {
  padding: 50px 0 40px;
}
.calc-heading {
  max-width: 760px;
  margin: 0 auto 34px;
  text-align: center;
}
.calc-heading .eyebrow {
  justify-content: center;
}
.calc-heading h1 {
  font-size: clamp(30px, 4vw, 48px);
  letter-spacing: -1.4px;
  line-height: 1.15;
  font-weight: 500;
  margin: 15px 0 14px;
}
.calc-heading p {
  color: var(--muted);
  line-height: 1.7;
  margin: 0;
}
.calc-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 24px;
  align-items: start;
}
.calc-form {
  display: grid;
  gap: 18px;
}
.calc-form fieldset {
  margin: 0;
  padding: 20px 22px 8px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--white-bg);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 16px;
}
.calc-form legend {
  padding: 0 8px;
  font-weight: 600;
}
.calc-field {
  display: grid;
  gap: 6px;
  margin-bottom: 14px;
}
.calc-label {
  font-size: 14px;
  font-weight: 600;
}
.calc-input {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--paper);
  direction: ltr;
}
.calc-input:focus-within {
  border-color: var(--green);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 18%, transparent);
}
.calc-input span {
  color: var(--muted);
  font-weight: 600;
}
.calc-input input {
  flex: 1;
  min-width: 0;
  padding: 11px 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  outline: none;
}
.calc-field small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}
.calc-results {
  position: sticky;
  top: 20px;
  padding: 24px;
  border-radius: 24px;
  background: var(--white-bg);
  border: 1px solid var(--border);
  box-shadow: 0 20px 50px rgb(23 37 31 / 8%);
}
.calc-results h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
  font-size: 18px;
  font-weight: 600;
}
.calc-results h3 {
  margin: 22px 0 10px;
  font-size: 15px;
  font-weight: 600;
}
.calc-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.calc-tile {
  display: grid;
  gap: 4px;
  padding: 16px;
  border-radius: 16px;
  background: var(--paper);
}
.calc-tile span,
.calc-now span {
  color: var(--muted);
  font-size: 13px;
}
.calc-tile strong {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.6px;
  direction: ltr;
  unicode-bidi: isolate;
  justify-self: start;
}
.calc-tile small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}
.calc-tile.is-main {
  grid-column: 1 / -1;
  background: var(--bg-17251f);
  color: #f4f8ef;
}
.calc-tile.is-main span,
.calc-tile.is-main small {
  color: #c7d3c9;
}
.calc-tile.is-main strong {
  font-size: 38px;
}
.calc-tile b {
  font-weight: 700;
}
.calc-now {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.calc-now > div {
  display: grid;
  gap: 4px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
}
.calc-now strong {
  font-size: 20px;
  font-weight: 700;
  direction: ltr;
  unicode-bidi: isolate;
  justify-self: start;
}
.calc-now small {
  color: var(--muted);
  font-size: 12px;
  direction: ltr;
  unicode-bidi: isolate;
  justify-self: start;
}
.calc-status {
  margin: 16px 0 0;
  padding: 12px 14px;
  border-radius: 12px;
  font-weight: 600;
  line-height: 1.6;
  background: var(--paper);
}
.calc-status[data-status='on_target'] {
  background: var(--good-bg);
  color: var(--green);
}
.calc-status[data-status='below_target'] {
  background: var(--warn-bg);
  color: var(--warning);
}
.calc-status[data-status='losing'],
.calc-status[data-status='negative'] {
  background: var(--danger-soft);
  color: var(--danger);
}
.calc-cta {
  margin-top: 16px;
  width: 100%;
  justify-content: center;
}
.calc-explain {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px;
  padding: 30px 0 60px;
}
.calc-explain h2 {
  margin: 0 0 18px;
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 500;
  letter-spacing: -0.6px;
}
.calc-explain ol {
  margin: 0;
  padding-inline-start: 20px;
  display: grid;
  gap: 10px;
  color: var(--muted);
  line-height: 1.7;
}
.calc-faq {
  max-width: none;
  margin: 0;
  padding: 0;
}
.calc-faq h2 {
  text-align: start;
}
@media (max-width: 900px) {
  .calc-grid,
  .calc-explain {
    grid-template-columns: minmax(0, 1fr);
  }
  .calc-results {
    position: static;
  }
}
@media (max-width: 560px) {
  .calc-page {
    padding-top: 30px;
  }
  .calc-form fieldset {
    grid-template-columns: minmax(0, 1fr);
    padding: 16px 16px 4px;
  }
  .calc-results {
    padding: 18px;
  }
  .calc-tile strong {
    font-size: 24px;
  }
  .calc-tile.is-main strong {
    font-size: 32px;
  }
  .calc-now,
  .calc-tiles {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* The free competitor finder: one address in, the stores found as cards. */
/* Text from the stores reads in its own direction but lines up with the page: right in Hebrew,
   left in English. */
.landing[dir='rtl'] .comp-results [dir='auto'] {
  text-align: right;
}
.landing[dir='ltr'] .comp-results [dir='auto'] {
  text-align: left;
}
/* Shown by the page's script once there is something to show. */
.comp-page [hidden],
#comp-cta[hidden] {
  display: none !important;
}
.comp-form {
  max-width: 680px;
  margin: 0 auto;
  display: grid;
  gap: 10px;
}
.comp-form label {
  font-weight: 600;
}
.comp-input {
  display: flex;
  gap: 10px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--white-bg);
}
.comp-input:focus-within {
  border-color: var(--green);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 18%, transparent);
}
.comp-input input {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  border: 0;
  background: transparent;
  font-size: 17px;
  color: var(--ink);
  outline: none;
}
.comp-input .button {
  flex: none;
}
.comp-input .button:disabled {
  opacity: 0.6;
  cursor: progress;
}
.comp-form small,
.comp-muted {
  color: var(--muted);
  font-size: 14px;
}
.comp-progress,
.comp-error,
.comp-results {
  max-width: 900px;
  margin: 28px auto 0;
}
.comp-steps {
  list-style: none;
  margin: 0;
  padding: 18px 22px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--white-bg);
  display: grid;
  gap: 10px;
}
.comp-steps li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
}
.comp-steps li::before {
  content: '';
  width: 12px;
  height: 12px;
  border-radius: 99px;
  border: 2px solid var(--border);
  flex: none;
}
.comp-steps li.is-done {
  color: var(--ink);
}
.comp-steps li.is-done::before {
  background: var(--green);
  border-color: var(--green);
}
.comp-steps li.is-now {
  color: var(--ink);
  font-weight: 600;
}
.comp-steps li.is-now::before {
  border-color: var(--green);
  animation: comp-pulse 1.1s ease-in-out infinite;
}
@keyframes comp-pulse {
  50% {
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--green) 25%, transparent);
  }
}
.comp-error {
  padding: 14px 18px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--danger) 10%, transparent);
  color: var(--danger);
  font-weight: 600;
}
.comp-results h2 {
  font-size: 20px;
  margin: 26px 0 12px;
}
.comp-card {
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--white-bg);
  padding: 20px 22px;
  margin-bottom: 14px;
}
.comp-card.is-own {
  background: var(--paper);
}
.comp-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.comp-name {
  display: grid;
  gap: 2px;
  margin-inline-end: auto;
  min-width: 0;
}
.comp-name strong {
  font-size: 18px;
  overflow-wrap: anywhere;
}
.comp-host {
  justify-self: start;
  color: var(--green);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.comp-host::after {
  content: ' ↗';
}
.comp-host:hover {
  text-decoration: underline;
}
.comp-logo {
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: #fff;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.comp-logo img {
  max-width: 82%;
  max-height: 82%;
  object-fit: contain;
}
.comp-logo.is-letter {
  background: color-mix(in srgb, var(--green) 14%, transparent);
  color: var(--green);
  font-size: 22px;
  font-weight: 700;
}
.comp-badge {
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--green) 14%, transparent);
  color: var(--green);
}
.comp-why {
  margin: 10px 0 0;
  line-height: 1.6;
}
.comp-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.comp-stat {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--paper);
}
.comp-card.is-own .comp-stat {
  background: var(--white-bg);
}
.comp-stat span {
  color: var(--muted);
  font-size: 12px;
}
.comp-stat strong {
  justify-self: start;
  font-size: 17px;
  font-variant-numeric: tabular-nums;
}
.comp-label {
  font-weight: 600;
}
.comp-similar,
.comp-label {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.6;
}
.comp-top {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
}
.comp-product {
  display: grid;
  align-content: start;
  gap: 6px;
  font-size: 13px;
}
.comp-thumb {
  position: relative;
  aspect-ratio: 1;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--paper);
  overflow: hidden;
  display: grid;
  place-items: center;
}
.comp-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.comp-rank {
  position: absolute;
  inset-inline-start: 6px;
  top: 6px;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  border-radius: 99px;
  background: var(--ink);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: grid;
  place-items: center;
}
.comp-soldout {
  position: absolute;
  inset-inline-end: 6px;
  bottom: 6px;
  padding: 2px 8px;
  border-radius: 99px;
  background: var(--danger);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
}
.comp-ptitle {
  color: inherit;
  line-height: 1.4;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.comp-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  font-variant-numeric: tabular-nums;
}
.comp-price s {
  color: var(--muted);
}
.comp-off {
  color: var(--danger);
  font-weight: 700;
  font-size: 12px;
}
.comp-summary {
  margin: 0 0 12px;
  padding: 12px 16px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--green) 10%, transparent);
  line-height: 1.6;
}
.comp-note {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}
.comp-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-size: 13px;
}
.comp-links b:not(:first-child) {
  margin-inline-start: 8px;
}
.comp-link {
  padding: 4px 12px;
  border-radius: 99px;
  border: 1px solid var(--border);
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}
.comp-link::after {
  content: ' ↗';
}
.comp-link:hover {
  border-color: var(--green);
  color: var(--green);
}
.comp-link.is-ads {
  background: color-mix(in srgb, var(--green) 10%, transparent);
}
.comp-disclaimer {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}
/* The call to sign up after a scan: larger than the other pages' bands, with what it gives. */
.pricing-band.comp-band {
  position: relative;
  overflow: hidden;
  align-items: center;
  gap: 32px;
  padding: 48px 52px;
  background:
    radial-gradient(
      120% 140% at 0% 0%,
      color-mix(in srgb, var(--lime) 22%, transparent),
      transparent 55%
    ),
    var(--ink-bg);
  box-shadow: 0 30px 70px -35px rgba(17, 24, 39, 0.6);
}
.comp-band > div:first-child {
  flex: 1 1 420px;
}
.comp-band h2 {
  font-size: clamp(26px, 3.2vw, 38px);
  font-weight: 600;
  line-height: 1.25;
  margin-bottom: 12px;
}
.comp-band p {
  font-size: 17px;
}
.comp-band-points {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.comp-band-points li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
}
.comp-band-points svg {
  flex: none;
  color: var(--lime);
}
.comp-band .pricing-band-cta .button {
  padding: 18px 32px;
  font-size: 18px;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--lime) 25%, transparent);
}
.comp-inline-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 4px 0 18px;
  padding: 18px 22px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--lime) 30%, var(--white-bg));
}
.comp-inline-cta p {
  margin: 0;
  font-weight: 600;
  font-size: 17px;
}
@media (max-width: 760px) {
  .pricing-band.comp-band {
    padding: 32px 22px;
  }
  .comp-band .pricing-band-cta,
  .comp-band .pricing-band-cta .button {
    width: 100%;
    justify-content: center;
  }
  .comp-band .pricing-band-cta {
    justify-items: center;
  }
}
/* Product against product: the visitor's product first, then the most alike of each store. */
.comp-match .comp-top {
  margin: 0;
}
.comp-match .comp-rank {
  display: block;
  max-width: calc(100% - 12px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 24px;
}
.comp-product.is-own .comp-thumb {
  border: 2px solid var(--green);
}
.comp-product.is-own .comp-rank {
  background: var(--green);
}
.comp-vs {
  justify-self: start;
  padding: 2px 8px;
  border-radius: 99px;
  font-size: 12px;
  font-weight: 600;
  background: var(--paper);
  color: var(--muted);
}
.comp-vs.is-cheaper {
  background: color-mix(in srgb, var(--danger) 12%, transparent);
  color: var(--danger);
}
.comp-vs.is-pricier {
  background: color-mix(in srgb, var(--green) 14%, transparent);
  color: var(--green);
}
/* The rows past the first: blurred placeholders under a short email form. */
.comp-gate {
  display: grid;
  margin: 4px 0 18px;
}
.comp-gate > * {
  grid-area: 1 / 1;
}
.comp-ghosts {
  filter: blur(3px);
  opacity: 0.75;
  -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent);
  mask-image: linear-gradient(to bottom, #000 30%, transparent);
  pointer-events: none;
  user-select: none;
}
.comp-ghost {
  display: grid;
  gap: 12px;
}
.comp-ghost-line {
  display: block;
  height: 12px;
  width: 70%;
  border-radius: 6px;
  background: var(--border);
}
.comp-ghost-line.is-title {
  height: 18px;
  width: 40%;
}
.comp-ghost-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.comp-ghost-stat {
  height: 54px;
  border-radius: 12px;
  background: var(--paper);
}
.comp-gate-panel {
  position: relative;
  align-self: center;
  justify-self: center;
  width: min(560px, 100%);
  margin: 24px 0;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: var(--white-bg);
  box-shadow: 0 24px 60px -30px rgba(17, 24, 39, 0.35);
  display: grid;
  gap: 12px;
}
.comp-gate-panel h3 {
  margin: 0;
  font-size: 22px;
}
.comp-gate-panel p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}
.comp-gate-form {
  display: grid;
  gap: 10px;
}
.comp-agree {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.6;
  cursor: pointer;
}
.comp-agree input {
  margin-top: 3px;
  flex: none;
  width: 17px;
  height: 17px;
  accent-color: var(--green);
}
.comp-gate-form small {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}
.comp-gate-form small a {
  color: inherit;
}
.comp-gate-panel .comp-gate-sent {
  color: var(--ink);
  font-weight: 600;
}
.comp-gate-links {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}
.comp-textbtn {
  padding: 0;
  border: 0;
  background: none;
  color: var(--green);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.comp-textbtn:disabled {
  opacity: 0.6;
}
.comp-gate-panel .comp-gate-status:empty {
  display: none;
}
.comp-gate-panel .comp-gate-status.is-error {
  color: var(--danger);
  font-weight: 600;
}
@media (max-width: 560px) {
  .comp-input {
    flex-direction: column;
  }
  .comp-input .button {
    justify-content: center;
  }
  .comp-card {
    padding: 16px;
  }
}

/* Mid-width screens: the site's links on one line, without the channels tag. */
@media (max-width: 1240px) {
  .nav > .pill {
    display: none;
  }
  .nav-links {
    gap: 20px;
  }
}

/* A product's picture from the store, beside its name. */
.product-thumb {
  flex: none;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--paper);
}
.ins-card-titled {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ins-card-thumbs {
  display: flex;
  flex: none;
  gap: 6px;
}
.ins-card-thumbs .product-thumb {
  border-radius: 10px;
}
.pp-product {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Refer a friend, on the settings page. */
.referral-head {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.referral-head h2 {
  margin: 0 0 4px;
  font-size: 17px;
}
.referral-head p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
  font-size: 14px;
}
.referral-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: var(--lime-bg);
  color: var(--ink);
}
.referral-link {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
.referral-link input {
  flex: 1 1 240px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--paper);
  font: inherit;
  font-size: 14px;
}
.referral-link .button {
  margin: 0;
  width: auto;
}
.referral-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 16px 0 0;
}
.referral-stats div {
  padding: 12px;
  border-radius: 12px;
  background: var(--paper);
}
.referral-stats dt {
  color: var(--muted);
  font-size: 12px;
}
.referral-stats dd {
  margin: 4px 0 0;
  font-size: 22px;
  font-weight: 700;
}

/* All businesses: totals across them, then one row each, sortable. */
.biz-totals {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.biz-totals > div {
  display: grid;
  gap: 4px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--white-bg);
}
.biz-totals span {
  color: var(--muted);
  font-size: 13px;
}
.biz-totals strong {
  font-size: 22px;
  font-weight: 700;
}
.biz-table .th-sort {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.biz-table .biz-name {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 600;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.biz-table tr.is-current td {
  background: var(--good-bg);
}
.biz-figure {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.biz-attention {
  display: grid;
  gap: 4px;
  justify-items: start;
  max-width: 320px;
}
.biz-attention .muted {
  font-size: 12px;
  line-height: 1.5;
}
@media (max-width: 700px) {
  .biz-totals {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.product-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--border);
  text-underline-offset: 3px;
}
.product-link:hover {
  text-decoration-color: currentColor;
}
.product-link svg {
  flex: none;
  color: var(--muted);
}

/* Package and account, on the settings page: change or cancel the package, or delete. */
.manage-block {
  display: grid;
  gap: 10px;
  justify-items: start;
  padding-top: 14px;
}
.manage-block + .manage-block {
  margin-top: 14px;
  border-top: 1px solid var(--border);
}
.manage-block h3 {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 15px;
}
.manage-block p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}
.manage-plans,
.manage-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.manage-plans .button,
.manage-actions .button {
  margin: 0;
  width: auto;
}
.manage-note {
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--good-bg);
  color: var(--green) !important;
}
.danger-link {
  color: var(--danger);
}
.manage-danger h3 {
  color: var(--danger);
}
.manage-confirm {
  display: grid;
  gap: 10px;
  width: 100%;
}
.manage-confirm label {
  display: grid;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
}
.manage-confirm input {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font: inherit;
  font-size: 16px;
}
.button.danger {
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
}
.button.danger:disabled {
  opacity: 0.5;
}
/* The question about Meta's cookies, at the bottom of the screen until the visitor answers. */
.consent-bar {
  position: fixed;
  inset-inline: 16px;
  bottom: 16px;
  z-index: 1000;
  max-width: 720px;
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  padding: 14px 16px;
  border-radius: var(--r-md);
  background: var(--bg-20372c);
  color: var(--fg-f1f5eb);
  box-shadow: 0 12px 32px rgb(0 0 0 / 0.25);
  font-family: var(--font-rubik), system-ui, sans-serif;
}
.consent-bar p {
  flex: 1 1 320px;
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
}
.consent-bar a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.consent-actions {
  display: flex;
  gap: 8px;
}
.consent-actions .button {
  min-height: 40px;
  padding: 8px 16px;
}
/* Both answers equally clear on the dark bar. */
.consent-actions .button.primary,
.consent-actions .button.primary:hover:not(:disabled) {
  background: var(--fg-f1f5eb);
  color: var(--bg-20372c);
}
.consent-actions .button.secondary,
.consent-actions .button.secondary:hover:not(:disabled) {
  background: transparent;
  color: var(--fg-f1f5eb);
  border: 1px solid var(--fg-f1f5eb);
}
@media (max-width: 600px) {
  .consent-actions {
    width: 100%;
  }
  .consent-actions .button {
    flex: 1;
  }
}

/* What each step of the ads funnel cost, under the funnel. */
.step-costs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 0;
}
.step-costs div {
  flex: 1 1 110px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.step-costs dt {
  font-size: 12px;
  color: var(--muted);
}
.step-costs dd {
  margin: 2px 0 0;
  font-size: 16px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
/* In the campaign funnel table: each step's cost under its count, and the step most people
   leave at, in the warning color. */
.step-cost {
  display: block;
  font-size: 12px;
}
td.step-drop {
  color: var(--danger);
  font-weight: 700;
}
.amazon-connect-form select,
.modal label > select {
  display: block;
  width: 100%;
  padding: 12px;
  margin-top: 7px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--white);
  color: var(--ink);
  font: inherit;
}
.amazon-connect-form input[name='url'],
.amazon-connect-form input[name='asins'],
.amazon-connect-form input[name='locale'] {
  direction: ltr;
  text-align: start;
}
.amazon-scan-status {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 18px;
  margin: 16px 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--paper);
  color: var(--ink);
}
.amazon-scan-status > svg {
  flex-shrink: 0;
  margin-top: 2px;
}
.amazon-scan-status strong {
  font-size: 14px;
}
.amazon-scan-status p {
  margin: 7px 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
}
.amazon-scan-status small {
  display: block;
  font-size: 12px;
  color: var(--muted);
}
.amazon-scan-status.compact {
  padding: 10px;
  gap: 8px;
}
.amazon-scan-status.compact strong {
  font-size: 12px;
}
.amazon-scan-action {
  margin-top: 14px;
}
.amazon-store-address {
  overflow-wrap: anywhere;
}
.amazon-page button.amazon-rescan-button,
.connection-actions > button.amazon-rescan-button {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}
.connection-actions > button.amazon-rescan-button > svg:last-child {
  margin-inline-start: 0;
}