/* ============================================================
   BRIEF PARSER — all scoped under .tabbr
   ============================================================ */

.tabbr{
  /* ---- ink: white, sits on your primary→secondary gradient ---- */
  /* NO OPACITY ANYWHERE — every ink + line is solid #fff.
     --br-surface is `transparent` on purpose: solid white fills
     would erase the white text on top. Borders carry the structure. */
  --br-ink:     #ffffff;
  --br-ink-2:   #ffffff;
  --br-ink-3:   #ffffff;
  --br-ink-4:   #ffffff;
  --br-line:    #ffffff;
  --br-line-2:  #ffffff;
  --br-surface: transparent;

  /* ---- accents from the Elementor kit ---- */
  --br-lime:    var(--e-global-color-accent,    #BED61C);
  --br-violet:  var(--e-global-color-secondary, #B594FD);
  --br-primary: var(--e-global-color-primary,   #5761B1);

  /* "i'm not sure about this" state. Was amber; now kit magenta.
     Because magenta is now the LIVE uncertainty signal, the static
     "not your guy" list below was demoted to neutral white so the
     two don't shout at each other. See .tabbr__collabel.           */
  --br-unsure:  var(--e-global-color-20423eb,   #FA77F7);
  --br-hot:     var(--e-global-color-20423eb,   #FA77F7);

  /* ---- type from the kit ---- */
  --br-display: var(--e-global-typography-secondary-font-family, "Outfit"), sans-serif;
  --br-label:   var(--e-global-typography-accent-font-family,    "Figtree"), sans-serif;
  --br-body:    var(--e-global-typography-text-font-family,      "Manrope"), sans-serif;

  position: relative; isolation: isolate;
  padding: 30px;
  color: var(--br-ink);
  font-family: var(--br-body);
  overflow: clip;
}
.tabbr *{ box-sizing: border-box; }

/* ============================================================
   KIT OVERRIDE — your kit styles bare `button`, `a` and `input`
   at (0,1,1), which beats my (0,1,0) classes. Without this every
   chip and example pill renders as a 20px uppercase purple
   rectangle with 20/30 padding. Do not delete.
   ============================================================ */
.tabbr button{
  background: none; border: 0; border-radius: 0; padding: 0;
  color: inherit; font: inherit; text-transform: none;
  letter-spacing: normal; line-height: inherit;
}
.tabbr button:hover, .tabbr button:focus{ background: none; border: 0; color: inherit; }
.tabbr a{ color: inherit; }
.tabbr input, .tabbr textarea{ font: inherit; color: inherit; }

/* honeypot — never visible, never focusable */
.tabbr__hp{
  position: absolute !important; left: -9999px !important;
  width: 1px; height: 1px; overflow: hidden; opacity: 0;
  pointer-events: none;
}

.tabbr__bg{
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: none;   /* radial glows removed — opacity-only */
}
.tabbr__wrap{ width: min(var(--container-max-width, 1270px), calc(100% - clamp(24px,6vw,96px))); margin-inline: auto; }

/* ---- header ---- */
.tabbr__head{ max-width: 66ch; margin-bottom: clamp(28px, 3.5vw, 46px); }
.tabbr__eyebrow{
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--br-label);
  font-weight: var(--e-global-typography-accent-font-weight, 600);
  line-height: 1.3;   /* kit accent line-height is "1.3px" — a typo. Overridden. */
  font-size: 18px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--br-ink-3);
}
.tabbr__eyebrow i{ width: 26px; height: 1px; background: var(--br-lime); display:inline-block; }
.tabbr__h2{
  margin: 16px 0 0; font-size: clamp(30px, 5.2vw, 60px);
  font-family: var(--br-display);
  line-height: var(--e-global-typography-secondary-line-height, 1.2em);
  letter-spacing: var(--e-global-typography-secondary-letter-spacing, .3px);
  font-weight: var(--e-global-typography-secondary-font-weight, 700);
}
.tabbr__h2 span{ color: var(--br-ink-3); }
.tabbr__lede{
  margin: 18px 0 0; font-size: 18px;
  line-height: 1.62; color: var(--br-ink-2);
}
.tabbr__lede em{ color: var(--br-ink); font-style: italic; }

/* ---- the stage ---- */
.tabbr__stage{
  border: 1px solid var(--br-line);
  border-radius: 0;
  background: none;
  padding: clamp(20px, 3vw, 36px);
}
.tabbr__inputwrap{ position: relative; }
.tabbr__inputlabel{
  font-family: var(--br-label);
  font-weight: var(--e-global-typography-accent-font-weight, 600);
  line-height: 1.3;
  display: block; font-size: 18px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--br-ink-4); margin-bottom: 12px;
}
.tabbr__input{
  width: 100%; display: block; resize: none;
  background: transparent; border: 0; outline: 0;
  color: var(--br-ink);
  font-family: var(--br-display);
  font-weight: var(--e-global-typography-secondary-font-weight, 700);
  font-size: clamp(19px, 2.6vw, 34px);
  line-height: 1.3; letter-spacing: var(--e-global-typography-secondary-letter-spacing, .3px);
  padding: 0 0 18px;
  border-bottom: 2px solid var(--br-line-2);
  transition: border-color .3s ease;
  overflow: hidden;
}
.tabbr__input::placeholder{ color: rgba(255,255,255,.50) }
.tabbr__input:focus{ border-bottom-color: var(--br-lime); }

.tabbr__examples{
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: 16px; font-size: 18px; color: var(--br-ink-4);
}
.tabbr button.tabbr__ex{
  appearance: none; cursor: pointer;
  background: var(--br-surface); border: 1px solid var(--br-line);
  color: var(--br-ink-3); border-radius: 0; padding: 8px 16px;
  font-size: inherit; transition: all .22s ease;
}
.tabbr button.tabbr__ex:hover{ color: var(--br-lime); border-color: var(--br-lime); }

/* ---- the read ---- */
.tabbr__read{
  margin-top: clamp(24px, 3vw, 36px);
  padding-top: clamp(22px, 2.6vw, 30px);
  border-top: 1px dashed var(--br-line);
  animation: tabbrIn .45s cubic-bezier(.22,1,.36,1);
}
@keyframes tabbrIn{ from{ transform: translateY(8px);} to{ transform:none;} }

.tabbr__readhead{
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: 8px 18px; margin-bottom: 14px;
}
.tabbr__readlabel{
  font-family: var(--br-label);
  font-weight: var(--e-global-typography-accent-font-weight, 600);
  line-height: 1.3;
  font-size: 18px; letter-spacing: .18em; text-transform: uppercase; color: var(--br-ink-4);
}
.tabbr__hint{ font-size: 18px; color: var(--br-ink-4); font-style: italic; }

.tabbr__chips{ display: flex; flex-wrap: wrap; gap: 9px; }
.tabbr button.tabbr__chip{
  appearance: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 18px; border-radius: 0;
  font-size: 18px; line-height: 1.2;
  background: none;
  border: 1.5px solid var(--br-lime);
  color: var(--br-ink);
  transition: all .22s ease;
  animation: tabbrPop .34s cubic-bezier(.22,1,.36,1) backwards;
}
@keyframes tabbrPop{ from{ transform: scale(.9) translateY(6px);} to{ transform:none;} }
.tabbr button.tabbr__chip:hover{ color: var(--br-lime); }
.tabbr button.tabbr__chip small{
  font-size: 18px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--br-ink-4); font-weight: 400;
}
/* low confidence = dashed + amber. same language as the One case study. */
.tabbr button.tabbr__chip.is-guess{
  background: none;
  border-style: dashed;
  border-color: var(--br-unsure);
  color: var(--br-unsure);
}
.tabbr button.tabbr__chip.is-guess:hover{ color: var(--br-unsure); }
.tabbr button.tabbr__chip.is-guess small{ color: var(--br-unsure); }
.tabbr button.tabbr__chip.is-open{ box-shadow: 0 0 0 3px #ffffff; }

/* ---- editor ---- */
.tabbr__editor{
  margin-top: 14px; padding: 14px;
  border: 1px solid var(--br-line); border-radius: 0;
  background: rgba(0,0,0,.22);
  animation: tabbrIn .3s cubic-bezier(.22,1,.36,1);
}
.tabbr__editorhead{
  font-family: var(--br-label);
  font-weight: var(--e-global-typography-accent-font-weight, 600);
  line-height: 1.3;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 18px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--br-ink-4); margin-bottom: 12px;
}
.tabbr button.tabbr__editorx{
  appearance:none; background:none; border:0; cursor:pointer;
  color: var(--br-ink-4); font-size: 18px; padding: 2px 6px;
}
.tabbr button.tabbr__editorx:hover{ color: var(--br-ink); }
.tabbr__opts{ display: flex; flex-wrap: wrap; gap: 7px; }
.tabbr button.tabbr__opt{
  appearance:none; cursor:pointer;
  background: var(--br-surface); border: 1px solid var(--br-line);
  color: var(--br-ink-2); border-radius: 0;
  padding: 9px 16px; font-size: 18px; transition: all .2s ease;
}
.tabbr button.tabbr__opt:hover{ color:#0d0d0f; background: var(--br-lime); border-color: var(--br-lime); }
.tabbr__custom{ display: flex; gap: 8px; margin-top: 12px; }
.tabbr__custom input{
  flex: 1; min-width: 0;
  background: none; border: 1px solid var(--br-line);
  border-radius: 0; padding: 10px 18px; color: var(--br-ink);
  font-size: 18px; outline: 0;
}
.tabbr__custom input:focus{ border-color: var(--br-lime); }
.tabbr .tabbr__custom button{
  appearance:none; cursor:pointer; border:0; border-radius: 0;
  padding: 10px 20px; font-size: 18px; font-weight: 600;
  background: var(--br-lime); color: #0d0d0f;
  transition: background .2s ease;
}
.tabbr .tabbr__custom button:hover{ background: var(--br-lime); color:#0d0d0f; }

/* ---- verdict ---- */
.tabbr__verdict{
  margin-top: 20px; padding: 18px 20px;
  border-radius: 0;
  border: 1px solid var(--br-line);
  border-inline-start: 3px solid var(--br-violet);
  background: none;
  font-size: 18px; line-height: 1.6;
  color: var(--br-ink-2);
}
.tabbr__verdict b{ color: var(--br-ink); font-weight: 600; }
.tabbr__verdict .tabbr__vline{ display: block; }
.tabbr__verdict .tabbr__vline + .tabbr__vline{ margin-top: 8px; }
.tabbr__verdict .tabbr__flag{
  display: block; margin-top: 12px; padding-top: 12px;
  border-top: 1px dashed var(--br-line);
  color: var(--br-unsure); font-size: .95em;
}

/* ---- actions ---- */
.tabbr__actions{
  display: flex; flex-wrap: wrap; align-items: flex-end;
  justify-content: space-between; gap: 18px 24px; margin-top: 22px;
}
.tabbr__you{ flex: 1 1 260px; min-width: 0; }
.tabbr__you label{
  font-family: var(--br-label);
  font-weight: var(--e-global-typography-accent-font-weight, 600);
  line-height: 1.3;
  display: block; font-size: 18px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--br-ink-4); margin-bottom: 9px;
}
.tabbr__you label small{ letter-spacing: .02em; text-transform: none; font-size: 18px; }
.tabbr__you input{
  width: 100%; background: transparent; border: 0; outline: 0;
  border-bottom: 1px solid var(--br-line-2);
  color: var(--br-ink); font-size: 18px; padding: 6px 0 9px;
  transition: border-color .3s ease;
}
.tabbr__you input:focus{ border-bottom-color: var(--br-lime); }
.tabbr__you input::placeholder{ color: var(--br-ink-4); }

.tabbr__btns{ display: flex; flex-wrap: wrap; gap: 10px; }
.tabbr button.tabbr__send{
  appearance:none; cursor:pointer;
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--br-primary);
  background-color: #FFFFFF;
  border-radius: 0px;
  padding: 20px 30px;
  font-family: var(--e-global-typography-9bd1ee9-font-family, "Outfit"), sans-serif;
  font-size: var(--e-global-typography-9bd1ee9-font-size, 20px);
  font-weight: var(--e-global-typography-9bd1ee9-font-weight, 600);
  text-transform: var(--e-global-typography-9bd1ee9-text-transform, uppercase);
  line-height: var(--e-global-typography-9bd1ee9-line-height, 1.3em);
  letter-spacing: var(--e-global-typography-9bd1ee9-letter-spacing, 1px);
  transition: background-color .3s ease, color .3s ease, border-color .3s ease, transform .3s cubic-bezier(.22,1,.36,1);
}
.tabbr button.tabbr__send i{ font-style: normal; transition: transform .3s ease; }
.tabbr button.tabbr__send:hover{ color:#FFFFFF; background-color: var(--br-primary); }
.tabbr button.tabbr__send:hover i{  }
.tabbr button.tabbr__send[disabled]{ cursor: wait; opacity: .75; }

.tabbr button.tabbr__ghost{
  appearance:none; cursor:pointer;
  background: transparent; border: 1px solid var(--br-line-2);
  color: var(--br-ink-3); border-radius: 0;
  padding: 13px 20px; font-size: 18px; transition: all .22s ease;
}
.tabbr button.tabbr__ghost:hover{ color: var(--br-ink); border-color: var(--br-ink-3); }
.tabbr button.tabbr__reset:hover{ color: var(--br-hot); border-color: var(--br-hot); }

/* booking link — same ghost treatment, but it's an <a>, not a <button> */
.tabbr a.tabbr__ghost{
  display: inline-flex; align-items: center;
  background: transparent; border: 1px solid var(--br-line-2);
  color: var(--br-ink-3); border-radius: 0; text-decoration: none;
  padding: 13px 20px; font-size: 18px; transition: all .22s ease;
}
.tabbr a.tabbr__ghost:hover{ color: var(--br-lime); border-color: var(--br-lime); }

.tabbr__toast{
  margin: 14px 0 0; font-size: 18px; color: var(--br-lime);
  animation: tabbrIn .3s ease;
}
.tabbr__toast.is-bad{ color: var(--br-unsure); }

/* ---- honesty ---- */
.tabbr__honest{ margin-top: clamp(44px, 5vw, 76px); }
.tabbr__h3{
  margin: 0 0 22px; font-size: clamp(20px, 2.4vw, 30px);
  letter-spacing: -.015em; font-weight: 700;
}
.tabbr__cols{
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(20px, 3vw, 44px);
}
.tabbr__collabel{
  font-family: var(--br-label);
  font-weight: var(--e-global-typography-accent-font-weight, 600);
  line-height: 1.3;
  display: inline-block; font-size: 18px; letter-spacing: .16em;
  text-transform: uppercase; margin-bottom: 14px;
  padding: 8px 15px; border-radius: 0; border: 1px solid;
}
.tabbr__collabel[data-c="no"]{  color: var(--br-ink-3); border-color: var(--br-line-2); background: var(--br-surface); }
.tabbr__collabel[data-c="yes"]{ color: var(--br-lime); border-color: var(--br-lime); background: none; }
.tabbr__ul{ list-style: none; margin: 0; padding: 0; }
.tabbr__ul li{
  position: relative; padding-inline-start: 22px; margin-bottom: 11px;
  font-size: 18px; line-height: 1.55; color: var(--br-ink-2);
}
.tabbr__ul li em{ color: var(--br-ink); font-style: italic; }
.tabbr__ul li::before{
  content: ""; position: absolute; inset-inline-start: 0; top: .62em;
  width: 9px; height: 1.5px; border-radius: 0;
}
.tabbr__ul[data-c="no"] li::before{  background: var(--br-ink-4); }
.tabbr__ul[data-c="yes"] li::before{ background: var(--br-lime); }

/* ---- foot ---- */
.tabbr__foot{
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 12px 24px;
  padding-top: 20px;
  font-size: 18px; color: var(--br-ink-3);
}
.tabbr__clock{ margin: 0; display: inline-flex; align-items: center; gap: 9px; }
.tabbr__dot{
  width: 7px; height: 7px; border-radius: 0; background: var(--br-lime);
}
.tabbr__clock.is-asleep .tabbr__dot{ background: #ffffff; }
.tabbr__escape{ margin: 0; }
.tabbr__escape a{ color: var(--br-ink); text-decoration: underline; text-underline-offset: 3px; }
.tabbr__escape a:hover{ color: var(--br-lime); }

@media (max-width: 640px){
  .tabbr__actions{ flex-direction: column; align-items: stretch; }
  .tabbr__btns{ width: 100%; }
  .tabbr__send{ flex: 1 1 100%; justify-content: center; }
  .tabbr__ghost{ flex: 1; }
}
@media (prefers-reduced-motion: reduce){
  .tabbr *{ animation: none !important; transition-duration: .01ms !important; }
}