/* Taplio webapp design tokens — pulled from Figma "Handoff - Taplio webapp" */
:host {
  /* Brand */
  --tp-blue-600: #3556E6;          /* color/brand/background, primary */
  --tp-blue-500: #316BFF;
  --tp-blue-50: #ECEEFF;           /* color/secondary/background, brand bg-subdued */
  --tp-blue-border-subdued: #CCD2FF;

  /* Grayscale (matches Figma color/neutral/* tokens) */
  --tp-fg-1: #121212;              /* content-strong */
  --tp-fg-2: #121212;              /* content-strong (alias) */
  --tp-fg-3: #616366;              /* content */
  --tp-fg-4: #989A9E;              /* content-subdued */
  --tp-bg-0: #FFFFFF;              /* neutral/background-subdued — used for cards/divs */
  --tp-bg-1: #FFFFFF;
  --tp-bg-2: #E5E5E5;              /* neutral/background-strong — tabs container */
  --tp-page-bg: #F7F7F7;           /* section background (page-level) */
  --tp-border: #E5E5E5;            /* neutral/border */
  --tp-border-subdued: #EBEBEB;    /* neutral/border-subdued */
  --tp-border-strong: #D5D9E0;

  /* Accent */
  --tp-accent: #FF5A82;            /* color/accent/background — yearly -25% badge */

  /* Semantic */
  --tp-success: #047857;
  --tp-success-bg: #ECFDF5;

  /* Type */
  --tp-font-display: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --tp-font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --tp-font-tertiary: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Radii (Figma tokens) */
  --tp-radius-xs: 4px;
  --tp-radius-sm: 8px;
  --tp-radius-md: 12px;
  --tp-radius-lg: 16px;
  --tp-radius-xl: 20px;
  --tp-radius-button: 8px;
  --tp-radius-full: 9999px;

  /* Shadow */
  --tp-shadow-card: 0 1px 2px rgba(11,15,25,0.04), 0 4px 14px rgba(11,15,25,0.06);
  --tp-shadow-elev: 0 8px 28px rgba(11,15,25,0.10);

  /* Motion */
  --tp-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

* { box-sizing: border-box; }

/* === Button design system (Taplio webapp) === */
.tp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--tp-font-body);
  font-weight: 500;
  line-height: 1.4;
  border: 1px solid transparent;
  border-radius: var(--tp-radius-button);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background 150ms var(--tp-ease), color 150ms var(--tp-ease), border-color 150ms var(--tp-ease);
  user-select: none;
}
.tp-btn--full { width: 100%; }
.tp-btn--sm { height: 32px; padding: 0 8px; font-size: 14px; }
.tp-btn--md { height: 40px; padding: 0 12px; font-size: 16px; }

/* Brand */
.tp-btn--brand.tp-btn--primary { background: #3556e6; color: #fff; border-color: #3556e6; }
.tp-btn--brand.tp-btn--primary:hover { background: #3e65fa; border-color: #3e65fa; }
.tp-btn--brand.tp-btn--primary:active { background: #072d8e; border-color: #072d8e; }
.tp-btn--brand.tp-btn--secondary { background: #eceeff; color: #3556e6; }
.tp-btn--brand.tp-btn--secondary:hover { background: #f2f4ff; }
.tp-btn--brand.tp-btn--secondary:active { background: #ccd2ff; }
.tp-btn--brand.tp-btn--outline { background: transparent; color: #3556e6; border-color: #3556e6; }
.tp-btn--brand.tp-btn--outline:hover { background: #eceeff; }
.tp-btn--brand.tp-btn--outline:active { background: #ccd2ff; }
.tp-btn--brand.tp-btn--text { background: transparent; color: #3556e6; }
.tp-btn--brand.tp-btn--text:hover { background: #eceeff; }
.tp-btn--brand.tp-btn--text:active { background: #ccd2ff; }

/* Error */
.tp-btn--error.tp-btn--primary { background: #c62121; color: #fff; border-color: #c62121; }
.tp-btn--error.tp-btn--primary:hover { background: #b21a1a; border-color: #b21a1a; }
.tp-btn--error.tp-btn--primary:active { background: #921414; border-color: #921414; }
.tp-btn--error.tp-btn--secondary { background: #ffeaea; color: #c62121; }
.tp-btn--error.tp-btn--secondary:hover { background: #fbd4d4; }
.tp-btn--error.tp-btn--secondary:active { background: #f5baba; }
.tp-btn--error.tp-btn--outline { background: transparent; color: #c62121; border-color: #c62121; }
.tp-btn--error.tp-btn--outline:hover { background: #ffeaea; }
.tp-btn--error.tp-btn--outline:active { background: #f5baba; }
.tp-btn--error.tp-btn--text { background: transparent; color: #c62121; }
.tp-btn--error.tp-btn--text:hover { background: #ffeaea; }
.tp-btn--error.tp-btn--text:active { background: #f5baba; }

/* Success */
.tp-btn--success.tp-btn--primary { background: #047857; color: #fff; border-color: #047857; }
.tp-btn--success.tp-btn--primary:hover { background: #065f46; border-color: #065f46; }
.tp-btn--success.tp-btn--primary:active { background: #044a37; border-color: #044a37; }
.tp-btn--success.tp-btn--secondary { background: #dbf7e5; color: #047857; }
.tp-btn--success.tp-btn--secondary:hover { background: #b6ecca; }
.tp-btn--success.tp-btn--secondary:active { background: #7fcdb1; }
.tp-btn--success.tp-btn--outline { background: transparent; color: #047857; border-color: #047857; }
.tp-btn--success.tp-btn--outline:hover { background: #dbf7e5; }
.tp-btn--success.tp-btn--outline:active { background: #7fcdb1; }
.tp-btn--success.tp-btn--text { background: transparent; color: #047857; }
.tp-btn--success.tp-btn--text:hover { background: #dbf7e5; }
.tp-btn--success.tp-btn--text:active { background: #7fcdb1; }

/* Warning */
.tp-btn--warning.tp-btn--primary { background: #f09a09; color: #fff; border-color: #f09a09; }
.tp-btn--warning.tp-btn--primary:hover { background: #e79509; border-color: #e79509; }
.tp-btn--warning.tp-btn--primary:active { background: #b97607; border-color: #b97607; }
.tp-btn--warning.tp-btn--secondary { background: #fff9e1; color: #f09a09; }
.tp-btn--warning.tp-btn--secondary:hover { background: #ffeeb6; }
.tp-btn--warning.tp-btn--secondary:active { background: #ffdd87; }
.tp-btn--warning.tp-btn--outline { background: transparent; color: #f09a09; border-color: #f09a09; }
.tp-btn--warning.tp-btn--outline:hover { background: #fff9e1; }
.tp-btn--warning.tp-btn--outline:active { background: #ffdd87; }
.tp-btn--warning.tp-btn--text { background: transparent; color: #f09a09; }
.tp-btn--warning.tp-btn--text:hover { background: #fff9e1; }
.tp-btn--warning.tp-btn--text:active { background: #ffdd87; }

/* Neutral */
.tp-btn--neutral.tp-btn--outline { background: transparent; color: #616366; border-color: #e5e5e5; }
.tp-btn--neutral.tp-btn--outline:hover { background: #f6f6f6; }
.tp-btn--neutral.tp-btn--outline:active { background: #e5e5e5; }
.tp-btn--neutral.tp-btn--text { background: transparent; color: #616366; }
.tp-btn--neutral.tp-btn--text:hover { background: #f6f6f6; }
.tp-btn--neutral.tp-btn--text:active { background: #e5e5e5; }

/* Disabled — overrides everything */
.tp-btn:disabled,
.tp-btn[aria-disabled="true"],
.tp-btn--disabled {
  cursor: not-allowed !important;
  pointer-events: none;
}
.tp-btn--disabled.tp-btn--primary,
.tp-btn--primary:disabled {
  background: #f7f7f7 !important;
  color: #cbcbcc !important;
  border-color: #f7f7f7 !important;
}
.tp-btn--disabled.tp-btn--secondary,
.tp-btn--secondary:disabled {
  background: #f7f7f7 !important;
  color: #cbcbcc !important;
  border-color: transparent !important;
}
.tp-btn--disabled.tp-btn--outline,
.tp-btn--outline:disabled {
  background: transparent !important;
  color: #cbcbcc !important;
  border-color: #f6f6f6 !important;
}
.tp-btn--disabled.tp-btn--text,
.tp-btn--text:disabled {
  background: transparent !important;
  color: #cbcbcc !important;
  border-color: transparent !important;
}

/* === Tooltip (used in ComparePlansTable) === */
.tp-tooltip-trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: help;
}
.tp-tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: #0B0F19;
  color: #fff;
  font-family: var(--tp-font-body);
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  padding: 8px 10px;
  border-radius: 6px;
  width: 220px;
  text-align: left;
  white-space: normal;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 150ms var(--tp-ease), visibility 150ms var(--tp-ease);
  z-index: 50;
  box-shadow: var(--tp-shadow-elev);
}
.tp-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 4px;
  border-style: solid;
  border-color: #0B0F19 transparent transparent transparent;
}
.tp-tooltip-trigger:hover .tp-tooltip,
.tp-tooltip-trigger:focus-within .tp-tooltip {
  opacity: 1;
  visibility: visible;
}

/* === Responsive overrides (aligned with taplio.com/pricing breakpoints 768/839) === */

/* PricingHeader */
@media (max-width: 640px) {
  .tp-pricing-header__title-block { margin-top: 32px !important; }
  .tp-pricing-header__title { font-size: 20px !important; line-height: 28px !important; }
  .tp-pricing-header__subtitle { font-size: 13px !important; }
}

/* BenchmarkAgencyBanner */
@media (max-width: 640px) {
  .tp-banner-benchmark { padding: 12px 16px !important; gap: 8px !important; }
  .tp-banner-agency { padding: 20px !important; }
  .tp-banner-agency__head h3 { font-size: 22px !important; }
  .tp-banner-agency__features > div { flex: 1 1 100% !important; }
}

/* PlansSelector — stack vertically below 839px (matches taplio.com) */
@media (max-width: 839px) {
  .tp-plans-row { flex-direction: column !important; align-items: center !important; gap: 16px !important; }
  .tp-plan-card { width: 100% !important; max-width: 380px; }
}

/* FreeTrialSteps — keep horizontal row on mobile, hide connecting line (matches is-m-hide) */
@media (max-width: 640px) {
  .tp-trial-line { display: none !important; }
  .tp-trial-row { gap: 12px !important; }
  .tp-trial-step { gap: 8px !important; }
}

/* ComparePlansTable — keep 3 columns, just tighten everything */
@media (max-width: 992px) {
  .tp-compare-label-col { width: 240px !important; padding: 0 12px !important; font-size: 12px !important; }
  .tp-compare-plan-header__name { font-size: 13px !important; }
  .tp-compare-plan-header__price { font-size: 11px !important; }
  .tp-compare-plan-header__cta { height: 30px !important; padding: 0 8px !important; font-size: 11px !important; }
}
@media (max-width: 640px) {
  .tp-compare-section { padding: 24px 12px 56px !important; }
  .tp-compare-title { font-size: 20px !important; line-height: 26px !important; }
  .tp-compare-subtitle { font-size: 12px !important; }
  /* Stack each row: label (full width) above 3-column values */
  .tp-compare-row {
    flex-direction: column !important;
    align-items: stretch !important;
    min-height: 0 !important;
    padding: 12px 0 !important;
  }
  .tp-compare-label-col {
    width: 100% !important;
    padding: 0 16px 8px !important;
    font-size: 13px !important;
    gap: 8px !important;
    color: var(--tp-fg-1) !important;
    font-weight: 500;
  }
  .tp-compare-row-feature { font-size: 13px !important; line-height: 18px !important; }
  .tp-compare-values-row { border-left: none !important; }
  /* Hide label spacer in sticky header so plan headers go full width */
  .tp-compare-label-spacer { display: none !important; }
  .tp-compare-plan-header__name { font-size: 14px !important; }
  .tp-compare-plan-header__price { font-size: 12px !important; }
  .tp-compare-plan-header__cta { height: 32px !important; padding: 0 8px !important; font-size: 11px !important; }
  .tp-compare-section-title { font-size: 16px !important; padding: 0 16px !important; height: 56px !important; }
  /* tooltip narrower on mobile */
  .tp-tooltip { width: 200px; font-size: 12px; }
}

/* =============================================================
 * Claude Skills (taplio.com marketing site, free tool)
 * Canonical Taplio Design System tokens (lemfont + Inter + DM Sans)
 * Pulled from taplio-design-system-canonical.md
 * ============================================================= */
:host {
  /* Brand */
  --cs-brand-25:  #F0F5FF;
  --cs-brand-50:  #ECEEFF;
  --cs-brand-500: #316BFF;
  --cs-brand-600: #3556E6;
  --cs-brand-700: #2C58B6;

  /* Ink */
  --cs-ink-900: #121212;
  --cs-ink-700: #213856;
  --cs-ink-500: #566F8F;
  --cs-ink-400: #616366;
  --cs-ink-300: #98A1AC;
  --cs-ink-200: #CBCBCC;

  /* Lines & surfaces */
  --cs-line-100: #EFEFEF;
  --cs-line-200: #E5E5E5;
  --cs-surface-0:   #FFFFFF;
  --cs-surface-50:  #FBFBFB;
  --cs-surface-100: #F6F6F6;
  --cs-surface-200: #F2F2F2;

  /* Type families : lemfont must be uploaded on taplio.com Webflow site */
  --cs-font-display: "lemfont", "Inter", system-ui, -apple-system, sans-serif;
  --cs-font-body:    "Inter", system-ui, -apple-system, sans-serif;

  /* Radii (canonical) */
  --cs-radius-sm:  8px;
  --cs-radius-md:  12px;
  --cs-radius-lg:  16px;
  --cs-radius-xl:  20px;
  --cs-radius-2xl: 28px;
  --cs-radius-full: 9999px;

  /* Shadows */
  --cs-shadow-card:        2px 4px 8px rgba(0,0,0,0.04);
  --cs-shadow-card-hover:  2px 6px 14px rgba(0,0,0,0.07);
  --cs-shadow-cta-blue:    0 10px 30px rgba(49,107,255,0.18);
  --cs-shadow-white-btn:   0 4px 12px rgba(0,0,0,0.08);

  /* Motion */
  --cs-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Display heading helper used inside Claude Skills components */
.cs-display {
  font-family: var(--cs-font-display);
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.2;
}

/* Eyebrow (small uppercase label) */
.cs-eyebrow {
  font-family: var(--cs-font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cs-ink-300);
}

/* Buttons (44 / 36 / 52 px height variants) */
.cs-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; height: 44px; padding: 0 20px;
  border-radius: var(--cs-radius-md);
  font-family: var(--cs-font-body); font-weight: 500; font-size: 16px;
  line-height: 1; border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: background-color 150ms var(--cs-ease), color 150ms var(--cs-ease), border-color 150ms var(--cs-ease);
  white-space: nowrap;
}
.cs-btn--primary { background: var(--cs-brand-600); color: #fff; }
.cs-btn--primary:hover { background: var(--cs-brand-700); color: #fff; }
.cs-btn--secondary { background: var(--cs-brand-50); color: var(--cs-brand-600); }
.cs-btn--secondary:hover { background: #DDE2FF; }
.cs-btn--outline { background: transparent; color: var(--cs-ink-400); border-color: var(--cs-line-200); }
.cs-btn--outline:hover { background: var(--cs-surface-100); color: var(--cs-ink-900); }
.cs-btn--ghost { background: transparent; color: var(--cs-ink-400); }
.cs-btn--ghost:hover { background: var(--cs-surface-100); color: var(--cs-ink-900); }
.cs-btn--white { background: #fff; color: var(--cs-brand-600); box-shadow: var(--cs-shadow-white-btn); }
.cs-btn--white:hover { background: var(--cs-surface-50); color: var(--cs-brand-600); }
.cs-btn--sm { height: 36px; padding: 0 16px; font-size: 14px; }
.cs-btn--lg { height: 52px; padding: 0 24px; font-size: 18px; }

/* Card primitive */
.cs-card {
  background: var(--cs-surface-0);
  border: 1px solid var(--cs-line-100);
  border-radius: var(--cs-radius-xl);
  box-shadow: var(--cs-shadow-card);
  padding: 20px;
  transition: box-shadow 150ms var(--cs-ease), border-color 150ms var(--cs-ease);
}
.cs-card:hover { box-shadow: var(--cs-shadow-card-hover); }

/* Filter pill */
.cs-pill {
  display: inline-flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 14px; border-radius: 9999px;
  font-family: var(--cs-font-body); font-weight: 500; font-size: 14px; line-height: 1;
  border: 1px solid var(--cs-line-200); background: var(--cs-surface-0); color: var(--cs-ink-500);
  cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: color 150ms var(--cs-ease), border-color 150ms var(--cs-ease), background 150ms var(--cs-ease);
}
.cs-pill:hover { color: var(--cs-ink-900); border-color: var(--cs-ink-300); }
.cs-pill--active { background: var(--cs-ink-900); border-color: var(--cs-ink-900); color: #fff; }
.cs-pill--active:hover { color: #fff; border-color: var(--cs-ink-900); }
.cs-pill__count { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; opacity: 0.55; }
.cs-pill--active .cs-pill__count { opacity: 0.7; }

/* =============================================================
 * Claude Skills - skill detail body (Rich Text rendering)
 * Styles applied to all descendants of .cs-skill-body
 * ============================================================= */

.cs-skill-body {
  font-family: var(--cs-font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--cs-ink-400);
}

.cs-skill-body__intro {
  font-family: var(--cs-font-body);
  font-size: 18px;
  line-height: 1.55;
  color: var(--cs-ink-700);
  margin: 0 0 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--cs-line-100);
}

.cs-skill-body h1,
.cs-skill-body h2 {
  font-family: var(--cs-font-display);
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.2;
  color: var(--cs-ink-900);
  margin: 40px 0 16px;
}
.cs-skill-body h1 { font-size: 32px; }
.cs-skill-body h2 { font-size: 28px; }
@media (min-width: 768px) {
  .cs-skill-body h2 { font-size: 32px; }
}

.cs-skill-body h3 {
  font-family: var(--cs-font-body);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.3;
  color: var(--cs-ink-900);
  margin: 28px 0 8px;
}

.cs-skill-body h4 {
  font-family: var(--cs-font-body);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.3;
  color: var(--cs-ink-900);
  margin: 20px 0 6px;
}

.cs-skill-body p {
  margin: 0 0 16px;
  color: var(--cs-ink-400);
}
.cs-skill-body p:last-child { margin-bottom: 0; }

.cs-skill-body strong { color: var(--cs-ink-900); font-weight: 600; }
.cs-skill-body em { font-style: italic; }

.cs-skill-body a {
  color: var(--cs-brand-600);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color 150ms var(--cs-ease);
}
.cs-skill-body a:hover { color: var(--cs-brand-700); }

.cs-skill-body ul,
.cs-skill-body ol {
  margin: 0 0 20px;
  padding-left: 24px;
  color: var(--cs-ink-400);
}
.cs-skill-body ul { list-style: disc; }
.cs-skill-body ol { list-style: decimal; }
.cs-skill-body li { margin: 8px 0; padding-left: 4px; }
.cs-skill-body li::marker { color: var(--cs-ink-300); font-weight: 600; }
.cs-skill-body li > p { margin: 0 0 6px; }
.cs-skill-body li > ul,
.cs-skill-body li > ol { margin: 8px 0 4px; }

.cs-skill-body code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 13px;
  background: var(--cs-surface-100);
  border: 1px solid var(--cs-line-100);
  border-radius: 6px;
  padding: 2px 6px;
  color: var(--cs-ink-900);
}
.cs-skill-body pre {
  background: var(--cs-ink-900);
  color: #E5E7EB;
  border-radius: 12px;
  padding: 20px 24px;
  overflow-x: auto;
  margin: 20px 0;
  font-size: 13px;
  line-height: 1.55;
}
.cs-skill-body pre code {
  background: transparent;
  border: 0;
  padding: 0;
  color: inherit;
  font-size: 13px;
}

.cs-skill-body blockquote {
  border-left: 3px solid var(--cs-brand-600);
  padding: 4px 0 4px 16px;
  margin: 20px 0;
  color: var(--cs-ink-500);
  font-style: italic;
}

.cs-skill-body hr {
  border: 0;
  border-top: 1px solid var(--cs-line-200);
  margin: 32px 0;
}

.cs-skill-body img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  margin: 20px 0;
}

/* First heading collapses top margin so intro -> first h2 spacing is clean */
.cs-skill-body > :first-child { margin-top: 0; }