/* ==========================================================================
   TikTok theme layer
   --------------------------------------------------------------------------
   Loaded AFTER cohere-tokens.css + styles.css. Almost everything is driven by
   remapping the design tokens, so the whole page re-skins from one block.

   Palette (exactly the four supplied colors):
     #010101  black      #69C9D0  cyan
     #FFFFFF  white      #EE1D52  red

   RULES OBSERVED
   - Zero gradients. Every fill is one flat color or one flat alpha tint.
   - Zero blurred shadows. Depth comes from hard offsets and 2px borders.
   - Cyan + red are accents only: CTAs, eyebrows, status, one glitch word.
     Black and white still carry ~90% of the surface area.
   ========================================================================== */

:root {
  /* ---- Raw palette ---- */
  --tt-black: #010101;
  --tt-cyan: #69c9d0;
  --tt-white: #ffffff;
  --tt-red: #ee1d52;

  /* Darkened shades of the two accents, used ONLY where accent-colored text
     sits on white and the pure hue would fail contrast. Same hue, no new colors. */
  --tt-cyan-ink: #0e7b84;
  --tt-red-ink: #d4113f;

  /* Flat alpha tints of the palette — used as surfaces, never as gradients. */
  --tt-cyan-tint: rgba(105, 201, 208, 0.14);
  --tt-cyan-line: rgba(105, 201, 208, 0.38);
  --tt-red-tint: rgba(238, 29, 82, 0.08);
  --tt-gray: #f1f1f2;
  --tt-gray-line: #e3e3e4;

  /* ================= TOKEN REMAP ================= */
  --cohere-black: var(--tt-black);
  --cohere-primary: var(--tt-black);
  --cohere-deep-green: var(--tt-black);   /* dark feature bands → pure black */
  --cohere-dark-navy: var(--tt-black);
  --cohere-action-blue: var(--tt-cyan-ink);
  --cohere-coral: var(--tt-red);
  --cohere-coral-soft: var(--tt-cyan);
  --cohere-canvas: var(--tt-white);
  --cohere-soft-stone: var(--tt-gray);
  --cohere-pale-green: var(--tt-cyan-tint);
  --cohere-pale-blue: var(--tt-gray);
  --cohere-ink: var(--tt-black);
  --cohere-body-muted: #58585b;
  --cohere-muted: #8a8b91;
  --cohere-slate: #58585b;
  --cohere-on-primary: var(--tt-white);
  --cohere-on-dark: var(--tt-white);
  --cohere-hairline: var(--tt-gray-line);
  --cohere-border-light: var(--tt-gray-line);
  --cohere-card-border: var(--tt-gray);
  --cohere-focus-blue: var(--tt-cyan-ink);
  --cohere-form-focus: var(--tt-black);
  --cohere-error: var(--tt-red);

  /* TikTok geometry: soft-square buttons, 16px cards, fully round chips */
  --cohere-radius-xs: 4px;
  --cohere-radius-sm: 8px;
  --cohere-radius-md: 12px;
  --cohere-radius-lg: 16px;
  --cohere-radius-xl: 999px;
  --cohere-radius-pill: 8px;

  /* One heavy grotesk for everything, like TikTok's own product surfaces */
  --cohere-font-display: "Inter", "Helvetica Neue", Arial, ui-sans-serif, system-ui, sans-serif;
  --cohere-font-body: "Inter", "Helvetica Neue", Arial, ui-sans-serif, system-ui, sans-serif;
  --cohere-font-mono: "Inter", Arial, ui-sans-serif, system-ui, sans-serif;

  --bs-link-color: var(--tt-black);
  --bs-focus-ring-color: rgba(105, 201, 208, 0.4);
}

/* ==========================================================================
   TYPOGRAPHY — TikTok headlines are heavy and tight, body stays normal
   ========================================================================== */

.cohere-hero-display,
.cohere-product-display,
.cohere-section-display { font-weight: 800; letter-spacing: -0.035em; }

.cohere-section-heading { font-weight: 800; letter-spacing: -0.03em; }
.cohere-card-heading { font-weight: 800; letter-spacing: -0.025em; }
.cohere-feature-heading { font-weight: 700; letter-spacing: -0.015em; }
.cohere-body-large { font-weight: 400; }

/* Eyebrows / technical labels: bold red uppercase, tight tracking */
.cohere-mono-label {
  font-weight: 700;
  letter-spacing: 0.08em;
}
.section__head .cohere-mono-label,
.hero__eyebrow { color: var(--tt-red) !important; }

/* ---- The signature offset. Two solid copies, hard edges, no blur. ----
   Reserved for exactly one word on the page. */
.tt-glitch {
  position: relative;
  color: var(--tt-black);
  text-shadow:
     min(0.045em, 3px)  min(0.035em, 3px) 0 var(--tt-cyan),
    calc(-1 * min(0.045em, 3px)) calc(-1 * min(0.035em, 3px)) 0 var(--tt-red);
}
@media (prefers-contrast: more) {
  .tt-glitch { text-shadow: none; }
}

/* ==========================================================================
   BUTTONS — red is the action color, black is the neutral action
   ========================================================================== */

.cohere-button-primary {
  background: var(--tt-red);
  color: var(--tt-white);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.01em;
  padding: 12px 24px;
  border-radius: 8px;
  transition: background-color 0.15s ease, transform 0.12s ease;
}
.cohere-button-primary:hover { background: var(--tt-red-ink); color: var(--tt-white); }
.cohere-button-primary:active { transform: scale(0.98); }

/* Red still wins on black bands — do not invert to white */
.cohere-on-dark-surface .cohere-button-primary,
.cohere-on-dark-surface .cohere-contact-form-card .cohere-button-primary,
.cohere-on-dark-surface .form .cohere-button-primary {
  background: var(--tt-red);
  color: var(--tt-white);
}
.cohere-on-dark-surface .cohere-button-primary:hover { background: var(--tt-red-ink); }

.cohere-button-secondary {
  font-weight: 600;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.cohere-button-secondary:hover { color: var(--tt-red); }

.cohere-button-pill-outline {
  font-weight: 700;
  border: 2px solid var(--tt-black);
  border-radius: 999px;
  padding: 7px 16px;
  background: var(--tt-white);
  transition: background-color 0.15s ease, color 0.15s ease;
}
.cohere-button-pill-outline:hover {
  background: var(--tt-black) !important;
  color: var(--tt-white);
}
.hero__chips a:hover { background: var(--tt-black) !important; color: var(--tt-white); }

/* ==========================================================================
   ANNOUNCEMENT BAR + NAV
   ========================================================================== */

.cohere-announcement-bar.bar { background: var(--tt-black); }
.bar__text a { color: var(--tt-cyan); text-decoration-thickness: 2px; }

.site-nav { border-bottom: 1px solid var(--tt-gray-line); }
.nav__wordmark { border-left: 2px solid var(--tt-black); }
.nav__kicker { color: var(--tt-red); font-weight: 700; }
.nav__name { font-weight: 800; letter-spacing: -0.03em; }
.nav__links .nav-link { font-weight: 600; }
.nav__links .nav-link:hover { color: var(--tt-red); }
.nav__links .nav-link.is-active { color: var(--tt-red); }
.nav__links .nav-link.is-active::after { background: var(--tt-red); height: 3px; border-radius: 2px; }
.nav__cta, .nav__cta span { color: var(--tt-white) !important; }

.nav__toggle-bar { height: 2px; background: var(--tt-black); }
#navMobile .nav-link:hover { color: var(--tt-red); }

/* ==========================================================================
   HERO
   ========================================================================== */

.hero__title { font-weight: 800; }

/* Stone frame → flat gray block with a hard black edge */
.media-frame {
  background: var(--tt-gray);
  border: 2px solid var(--tt-black);
  border-radius: 16px;
}
.media-frame__top .cohere-mono-label { color: var(--tt-black); }

.cohere-agent-console-card.console {
  background: var(--tt-black);
  border-radius: 12px;
}
.console__head { border-bottom: 2px solid rgba(255, 255, 255, 0.14); }
.console__chip {
  border: 1px solid var(--tt-cyan);
  color: var(--tt-cyan);
  font-weight: 700;
}
.console__icon { color: var(--tt-cyan); }
.console__row:nth-child(2) .console__icon { color: var(--tt-red); }
.console__state { font-weight: 700; border-width: 1.5px; }
.console__state[data-state="ok"] { color: var(--tt-cyan); border-color: var(--tt-cyan); }
.console__state[data-state="risk"] { color: var(--tt-red); border-color: var(--tt-red); }
.console__state[data-state="watch"] { color: var(--tt-white); border-color: rgba(255, 255, 255, 0.5); }
.console__foot { border-top: 1px solid rgba(255, 255, 255, 0.14); }

/* Signal card → flat cyan tint, hard black edge */
.hero__signal {
  background: var(--tt-cyan-tint);
  border: 2px solid var(--tt-black);
  border-radius: 16px;
}
.hero__signal-label { color: var(--tt-black); }
.signal-list__row { border-bottom: 1px solid rgba(1, 1, 1, 0.12); }
.signal-list__num {
  background: var(--tt-black);
  color: var(--tt-white);
  border: 0;
  font-weight: 800;
  width: 28px; height: 28px;
}
.signal-note { border-top: 2px solid var(--tt-black); }
.signal-note__tag { color: var(--tt-red); }

/* ==========================================================================
   TRUST STRIP
   ========================================================================== */

.trust__caption { color: var(--tt-black); font-weight: 600; }
.cohere-trust-logo-strip img { filter: grayscale(1) contrast(1.2); opacity: 1; }

/* ==========================================================================
   CAPABILITY CARDS — top rule becomes a short heavy red tick
   ========================================================================== */

.cohere-capability-card.capability {
  border-top: 3px solid var(--tt-black);
  transition: border-color 0.15s ease;
}
.cohere-capability-card.capability:hover { border-top-color: var(--tt-red); }
.capability__icon { color: var(--tt-black); }
.capability:nth-of-type(1) .capability__icon,
.capability-grid .col:nth-child(2) .capability__icon { color: var(--tt-cyan-ink); }
.capability-grid .col:nth-child(2) .capability__icon,
.capability-grid .col:nth-child(4) .capability__icon { color: var(--tt-red); }
.capability h3 { font-weight: 700; }

.rule-list__item { border-top: 2px solid var(--tt-black); }
.rule-list__idx { color: var(--tt-red); font-weight: 800; }

/* ==========================================================================
   TIER CARDS
   ========================================================================== */

.cohere-product-card.tier {
  background: var(--tt-gray);
  border: 2px solid var(--tt-black);
  border-radius: 16px;
}
.tier--featured { background: var(--tt-cyan-tint); }
.tier__tag { color: var(--tt-red); }
.tier__amount { font-weight: 800; letter-spacing: -0.035em; }
.tier__rule { border-top: 2px solid var(--tt-black); opacity: 1; }
.tier__check { color: var(--tt-black); }
.tier--featured .tier__check { color: var(--tt-cyan-ink); }
.tier .cohere-button-pill-outline { background: var(--tt-white); }

/* ==========================================================================
   DARK BANDS
   ========================================================================== */

.cohere-dark-feature-band.band {
  background: var(--tt-black);
  border-radius: 16px;
}
.band__label { color: var(--tt-cyan) !important; }
.band__title { font-weight: 800; }
.band__lead { color: rgba(255, 255, 255, 0.72); }
.band__card {
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, 0.22);
  border-radius: 12px;
  transition: border-color 0.15s ease;
}
.band__card:hover { border-color: var(--tt-cyan); }
.band__card .cohere-mono-label { color: var(--tt-cyan); }
.band__card-body { color: rgba(255, 255, 255, 0.72); }
.band__secondary { color: var(--tt-white) !important; text-decoration-color: var(--tt-cyan); }
.band__secondary:hover { color: var(--tt-cyan) !important; }

/* ==========================================================================
   FAQ
   ========================================================================== */

.faq__item { border-top: 2px solid var(--tt-black) !important; }
.faq__item:last-child { border-bottom: 2px solid var(--tt-black) !important; }
.accordion.faq .accordion-button { font-weight: 700; }
.accordion.faq .accordion-button:not(.collapsed) { color: var(--tt-red); }
.accordion.faq {
  --bs-accordion-active-color: var(--tt-red);
  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23010101' stroke-width='2.25' stroke-linecap='round'%3e%3cpath d='M8 2.5v11M2.5 8h11'/%3e%3c/svg%3e");
  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ee1d52' stroke-width='2.25' stroke-linecap='round'%3e%3cpath d='M2.5 8h11'/%3e%3c/svg%3e");
}
.faq__flow {
  color: var(--tt-cyan-ink);
  border-top: 2px solid var(--tt-cyan);
}

/* ==========================================================================
   FORMS
   ========================================================================== */

.cohere-contact-form-card.form {
  border-radius: 16px;
  border: 2px solid var(--tt-black);
}
.field .form-label { font-weight: 600; color: var(--tt-black); }
.field__req { color: var(--tt-red); }
.form-control {
  border: 1.5px solid var(--tt-gray-line);
  border-radius: 8px;
  background: var(--tt-gray);
}
.form-control:focus {
  border-color: var(--tt-black);
  background: var(--tt-white);
}
.is-invalid-cohere { border-color: var(--tt-red) !important; }
.form__warn {
  color: var(--tt-red);
  border: 1.5px solid var(--tt-red);
  background: var(--tt-red-tint);
  border-radius: 8px;
  font-weight: 600;
}
.form__done {
  color: var(--tt-cyan-ink);
  border: 1.5px solid var(--tt-cyan);
  background: var(--tt-cyan-tint);
  border-radius: 8px;
  font-weight: 600;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

.cohere-footer-newsletter.footer { background: var(--tt-black); }
.footer__label { color: var(--tt-red) !important; }
.footer__headline { font-weight: 800; letter-spacing: -0.03em; }
.footer__wa { text-decoration-color: var(--tt-cyan); }
.footer__wa:hover { color: var(--tt-cyan) !important; }
.footer__col-title { font-weight: 700; }
.footer__col a { color: rgba(255, 255, 255, 0.62); }
.footer__col a:hover { color: var(--tt-cyan) !important; }
.footer__rule { border-top: 1px solid rgba(255, 255, 255, 0.18); }

/* ==========================================================================
   MOBILE STICKY CTA
   ========================================================================== */

.mobile-cta {
  background: var(--tt-white);
  border-top: 2px solid var(--tt-black);
  backdrop-filter: none;
}
.mobile-cta__ghost {
  border: 2px solid var(--tt-black);
  border-radius: 8px;
  font-weight: 700;
  background: var(--tt-white);
}
.mobile-cta__ghost:hover { background: var(--tt-black); color: var(--tt-white); }

/* ==========================================================================
   ROI DRAWER + RESULTS
   ========================================================================== */

.drawer__head { border-bottom: 2px solid var(--tt-black); }
.drawer__close {
  border: 2px solid var(--tt-black);
  font-weight: 700;
}
.drawer__close:hover { background: var(--tt-black); color: var(--tt-white); }

.tab { font-weight: 700; }
.tab.active {
  background: var(--tt-black) !important;
  color: var(--tt-white) !important;
  border-color: var(--tt-black);
}
.drawer .group { color: var(--tt-red); border-top: 2px solid var(--tt-black); }
.helper-total {
  background: var(--tt-gray);
  border-left: 4px solid var(--tt-cyan);
  border-radius: 8px;
}
.helper-total strong { color: var(--tt-black); }

.result { border-top: 3px solid var(--tt-black); }
.result__title { color: var(--tt-red); }
.result__table > tbody > tr > th { font-weight: 600; }
.result .result__table > tbody > tr > td { font-weight: 800; letter-spacing: -0.02em; }
.result__row--key > td { color: var(--tt-red) !important; }
.result__row--target > td { color: var(--tt-cyan-ink) !important; }
.result__gmv-card {
  background: var(--tt-gray);
  border-radius: 12px;
  border-left: 4px solid var(--tt-black);
}
.result__gmv-card:nth-of-type(1) { border-left-color: var(--tt-cyan); }
.result__gmv-card .cohere-mono-label { color: var(--tt-black); }
.result__gmv-card .cohere-feature-heading { font-weight: 800; letter-spacing: -0.03em; }
.note--warn {
  color: var(--tt-red);
  border: 1.5px solid var(--tt-red);
  background: var(--tt-red-tint);
  border-radius: 8px;
}
.note--ok {
  color: var(--tt-cyan-ink);
  border: 1.5px solid var(--tt-cyan);
  background: var(--tt-cyan-tint);
  border-radius: 8px;
}

/* ==========================================================================
   SAMPLE REPORT MODAL
   ========================================================================== */

.sample__content { border: 2px solid var(--tt-black); border-radius: 16px; }
.sample__head { border-bottom: 2px solid var(--tt-black); }
.sample__disclaimer {
  background: var(--tt-gray);
  border-left: 4px solid var(--tt-red);
  border-radius: 8px;
}
.sample__item { border-top: 2px solid var(--tt-gray-line); }
.sample__idx { color: var(--tt-red); }
.sample__metric { border: 1.5px solid var(--tt-gray-line); border-radius: 8px; }
.sample__metric .cohere-feature-heading { color: var(--tt-cyan-ink); font-weight: 800; }
.sample__flags .console__state[data-state="ok"] { color: var(--tt-cyan-ink); border-color: var(--tt-cyan); }
.sample__flags .console__state[data-state="risk"] { color: var(--tt-red); border-color: var(--tt-red); }
.sample__flags .console__state[data-state="watch"] { color: var(--tt-black); border-color: var(--tt-black); }
.sample__foot { border-top: 2px solid var(--tt-black); }

/* ==========================================================================
   SECTION DIVIDER
   ========================================================================== */

.section--stone-top { border-top: 2px solid var(--tt-black); }

/* Selection + focus in brand colors */
::selection { background: var(--tt-cyan); color: var(--tt-black); }
:focus-visible { outline: 2px solid var(--tt-cyan-ink); outline-offset: 2px; }