/* =============================================
   RESET & TOKENS
   ============================================= */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
a{text-decoration:none;color:inherit}
button{font-family:inherit;cursor:pointer;border:none;background:none}
html{scroll-behavior:auto;scrollbar-gutter:stable}
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  color:#111110;background:#fff;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
:root{
  --black:#191919;--white:#fff;--grey:#E0E0E0;--bg:#FAFAFA;
  --accent:#F56002;--text-secondary:#454545;
  --ease:cubic-bezier(0.16,1,0.3,1);
}

/* =============================================
   TYPOGRAPHY
   ============================================= */
.headline-xl{font-size:clamp(2.5rem,5.5vw,4.5rem);font-weight:300;line-height:1.05;letter-spacing:-0.03em}
.headline-lg{font-size:clamp(2rem,4vw,3.2rem);font-weight:400;line-height:1.1;letter-spacing:-0.02em}
.body-lg{font-size:1.125rem;font-weight:400;line-height:1.6;color:var(--text-secondary)}
.body-sm{font-size:0.875rem;line-height:1.5}
.label-sm{font-size:0.75rem;font-weight:600;text-transform:uppercase;letter-spacing:0.06em}

/* =============================================
   BUTTONS
   ============================================= */
.btn{
  display:inline-flex;align-items:center;gap:0.5rem;
  font-size:0.875rem;font-weight:600;padding:0.75rem 1.25rem;
  border-radius:1.5rem;transition:background 0.3s,border-color 0.3s,color 0.3s,backdrop-filter 0.3s;
  cursor:pointer;
}
.btn--primary{
  background:var(--black);color:#fff;border:1px solid transparent;
  transition:all 0.3s ease;
}
.btn--primary:hover{
  color:#111 !important;
  background:rgba(255,255,255,0.75);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-color:rgba(255,255,255,0.5);
  box-shadow:0 2px 12px rgba(0,0,0,0.08);
}
/* On light backgrounds, primary hover needs dark text on light bg */
.btn--primary-light{
  background:var(--black);color:#fff;border:1px solid transparent;
  transition:all 0.3s ease;
}
.btn--primary-light:hover{
  color:#111 !important;
  background:rgba(0,0,0,0.05);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-color:rgba(0,0,0,0.12);
  box-shadow:0 2px 12px rgba(0,0,0,0.06);
}
.btn--outline{background:transparent;color:#fff;border:1px solid rgba(255,255,255,0.4)}
.btn--outline:hover{background:rgba(255,255,255,0.12);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-color:rgba(255,255,255,0.5)}
.btn--ghost{background:transparent;color:var(--black);border:1px solid var(--grey)}
.btn--ghost:hover{background:rgba(0,0,0,0.05);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-color:var(--black)}

/* =============================================
   NAV
   ============================================= */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  padding:0.875rem 2rem;
  display:flex;align-items:center;justify-content:space-between;
  max-width:80rem;margin:0 auto;
  transition:transform 0.35s cubic-bezier(0.4,0,0.2,1);
}
.nav.nav--hidden{transform:translateY(calc(-100% - 1rem))}
.nav__pill{
  display:flex;align-items:center;gap:0.25rem;
  padding:0.375rem 0.5rem;
  border-radius:100px;
  background:rgba(255,255,255,0.12);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,0.1);
  transition:background 0.35s,border-color 0.35s,backdrop-filter 0.35s;
}
.nav--solid .nav__pill{
  background:rgba(255,255,255,0.95);
  border-color:rgba(0,0,0,0.06);
}
.nav__logo{display:flex;align-items:center;padding:0 0.5rem}
.nav__logo img{height:1.125rem;transition:filter 0.3s,opacity 0.3s}
.nav__logo .logo-light{position:absolute}
.nav__logo .logo-dark{opacity:0}
.nav--solid .nav__logo .logo-light{opacity:0}
.nav--solid .nav__logo .logo-dark{opacity:1;position:relative}
.nav__link{
  font-size:0.8125rem;font-weight:500;
  padding:0.5rem 0.875rem;border-radius:100px;
  color:rgba(255,255,255,0.85);white-space:nowrap;
  display:flex;align-items:center;gap:0.25rem;
  transition:color 0.2s,background 0.2s;
}
.nav__link:hover{color:#fff;background:rgba(255,255,255,0.1)}
.nav--solid .nav__link{color:var(--text-secondary)}
.nav--solid .nav__link:hover{color:var(--black);background:rgba(0,0,0,0.04)}
.nav__link svg{width:10px;height:10px;opacity:0.6}
.nav__login{
  font-size:0.8125rem;font-weight:500;
  padding:0.5rem 1rem;border-radius:100px;
  color:rgba(255,255,255,0.85);white-space:nowrap;
  border:1px solid rgba(255,255,255,0.3);
  transition:color 0.2s,border-color 0.2s,background 0.2s;
}
.nav__login:hover{color:#fff;border-color:rgba(255,255,255,0.5)}
.nav--solid .nav__login{color:var(--black);border-color:rgba(0,0,0,0.15)}
.nav--solid .nav__login:hover{border-color:var(--black)}
a.nav__cta{
  font-size:0.8125rem;font-weight:600;
  padding:0.5rem 1.125rem;border-radius:100px;
  white-space:nowrap;text-decoration:none;
  color:#fff;background:#111110;
  border:1px solid transparent;
  transition:all 0.3s ease;
}
a.nav__cta:hover{
  color:#111 !important;
  background:rgba(255,255,255,0.75);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-color:rgba(255,255,255,0.5);
  box-shadow:0 2px 12px rgba(0,0,0,0.08);
}
.nav--solid a.nav__cta{
  color:var(--black);
  background:rgba(0,0,0,0.04);
  border:1px solid rgba(0,0,0,0.1);
  box-shadow:0 1px 4px rgba(0,0,0,0.04);
}
.nav--solid a.nav__cta:hover{
  color:var(--black);
  background:rgba(0,0,0,0.08);
  border-color:rgba(0,0,0,0.18);
  box-shadow:0 2px 8px rgba(0,0,0,0.06);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.nav__divider{
  width:1px;height:1rem;
  background:rgba(255,255,255,0.15);margin:0 0.125rem;
}
.nav--solid .nav__divider{background:rgba(0,0,0,0.08)}
.nav__dropdown{position:relative}
.nav__dropdown>.nav__link{cursor:pointer}
.nav__dropdown>.nav__link svg{transition:transform 0.25s}
.nav__dropdown.is-open>.nav__link svg{transform:rotate(180deg)}
.nav__dropdown-panel{
  position:absolute;top:calc(100% + 0.75rem);left:0;
  display:flex;
  background:rgba(255,255,255,0.97);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-radius:0.75rem;
  box-shadow:0 12px 48px rgba(0,0,0,0.12),0 2px 8px rgba(0,0,0,0.06);
  border:1px solid rgba(0,0,0,0.06);
  opacity:0;visibility:hidden;
  transform:translateY(-6px);
  transition:opacity 0.25s ease,visibility 0.25s ease,transform 0.25s ease;
  z-index:100;min-width:36rem;overflow:hidden;
}
.nav__dropdown.is-open .nav__dropdown-panel{
  opacity:1;visibility:visible;transform:translateY(0);
}
.nav__dropdown-left{
  flex:1;padding:1.5rem;
  display:flex;flex-direction:column;gap:0.25rem;
}
.nav__dropdown-item{
  display:block;padding:0.75rem 1rem;border-radius:0.5rem;
  transition:background 0.15s;
}
.nav__dropdown-item:hover{background:rgba(0,0,0,0.03)}
.nav__dropdown-item-title{
  font-size:0.875rem;font-weight:600;color:var(--black);
  margin-bottom:0.125rem;
}
.nav__dropdown-item-desc{
  font-size:0.8125rem;color:var(--text-secondary);line-height:1.4;
}
.nav__dropdown-right{
  width:16rem;background:var(--black);
  padding:1.5rem;
  display:flex;flex-direction:column;gap:0.125rem;
  border-radius:0 0.75rem 0.75rem 0;
}
.nav__dropdown-featured-label{
  font-size:0.6875rem;font-weight:600;text-transform:uppercase;
  letter-spacing:0.06em;color:rgba(255,255,255,0.4);
  padding:0.5rem 0.75rem;margin-bottom:0.25rem;
  display:flex;align-items:center;gap:0.5rem;
}
.nav__dropdown-featured-label::before{
  content:'';width:6px;height:6px;border-radius:50%;
  background:rgba(255,255,255,0.5);
}
.nav__dropdown-featured-link{
  display:block;font-size:0.9375rem;font-weight:500;
  color:rgba(255,255,255,0.75);padding:0.625rem 0.75rem;
  border-radius:0.375rem;transition:color 0.15s,background 0.15s;
}
.nav__dropdown-featured-link:hover{
  color:#fff;background:rgba(255,255,255,0.08);
}
.nav-blur-overlay{
  position:fixed;inset:0;z-index:999;
  background:rgba(0,0,0,0.1);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity 0.35s ease,visibility 0.35s ease;
}
.nav-blur-overlay.is-active{opacity:1;visibility:visible}

@media(max-width:768px){
  .nav{padding:0.75rem 1rem}
  .nav__pill--left .nav__link{display:none}
  .nav__pill--left .nav__dropdown{display:none}
  .nav__pill--right .nav__link{display:none}
  .nav__pill--right .nav__divider{display:none}
  .nav__login{display:none}
}


/* =============================================
   PRICING PAGE
   ============================================= */

/* Hero */
.pricing-hero{
  padding:10rem 2rem 4rem;
  text-align:center;
  max-width:48rem;
  margin:0 auto;
}
.pricing-hero h1{
  font-size:clamp(2.25rem,5vw,3.5rem);
  font-weight:300;
  line-height:1.1;
  letter-spacing:-0.03em;
  margin-bottom:1.25rem;
}
.pricing-hero p{
  font-size:1.0625rem;
  line-height:1.65;
  color:var(--text-secondary);
  max-width:36rem;
  margin:0 auto 2rem;
}
.pricing-hero__cta-short{display:none}
@media(max-width:768px){
  .pricing-hero__cta-full{display:none}
  .pricing-hero__cta-short{display:inline}
}

/* Pricing Cards */
.pricing-cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.5rem;
  max-width:72rem;
  margin:0 auto;
  padding:0 2rem 6rem;
}
/* v3 — 2-card layout: tighter, centered, slightly wider per card */
.pricing-cards--two{
  grid-template-columns:repeat(2,minmax(0,1fr));
  max-width:54rem;
}
@media(max-width:768px){
  .pricing-cards--two{grid-template-columns:1fr;max-width:28rem}
}

/* Temporarily hidden — Compare table + per-card "What's included" anchor.
   Markup left in place so we can re-enable later by removing this block. */
.comparison-section,
.comparison-sticky,
.pricing-card__compare{display:none}

/* v3 — Limited-time pricing pill above the price row */
.pricing-card__limited{
  display:inline-block;align-self:flex-start;
  font-size:0.625rem;font-weight:700;letter-spacing:0.1em;
  text-transform:uppercase;
  padding:0.22rem 0.55rem;border-radius:100px;
  background:#D9FA87;color:#191919;
  margin-bottom:0.625rem;
  line-height:1.3;
}

/* v3 — Tiny info icon that reveals a tooltip on hover */
.feat-info{
  display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;border-radius:50%;
  background:rgba(0,0,0,0.06);
  border:1px solid rgba(0,0,0,0.08);
  color:rgba(0,0,0,0.55);
  font-size:0.6875rem;font-weight:700;font-style:italic;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  letter-spacing:0;
  margin-left:0.4rem;cursor:help;
  position:relative;vertical-align:middle;
  transition:background 0.2s,color 0.2s,border-color 0.2s;
  user-select:none;
}
.feat-info:hover{background:rgba(0,0,0,0.14);color:#111}
.pricing-card--team .feat-info,
.td-team .feat-info{
  background:rgba(255,255,255,0.18);
  color:rgba(255,255,255,0.85);
}
.pricing-card--team .feat-info:hover,
.td-team .feat-info:hover{background:rgba(255,255,255,0.3);color:#fff}
.feat-info[data-tip]::after{
  content:attr(data-tip);
  position:absolute;
  bottom:calc(100% + 0.5rem);left:50%;
  transform:translateX(-50%);
  background:#191919;color:#fff;
  font-size:0.75rem;font-weight:500;font-style:normal;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  padding:0.55rem 0.75rem;border-radius:0.5rem;
  width:max-content;max-width:14rem;
  text-align:left;line-height:1.4;letter-spacing:0;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity 0.2s,visibility 0.2s;
  z-index:20;
  box-shadow:0 6px 24px rgba(0,0,0,0.18);
}
.feat-info:hover::after{opacity:1;visibility:visible}

/* v3 — small "Beta" marker for early-stage features */
.feat-beta{
  display:inline-block;
  font-size:0.5625rem;font-weight:700;letter-spacing:0.1em;
  text-transform:uppercase;
  padding:0.12rem 0.45rem;border-radius:100px;
  background:rgba(245,96,2,0.12);
  color:var(--accent);
  margin-left:0.4rem;vertical-align:middle;
  line-height:1.4;
}
.pricing-card--team .feat-beta,
.td-team .feat-beta{
  background:rgba(245,96,2,0.22);
  color:#FFA665;
}

.pricing-card{
  background:#fff;
  border:1px solid rgba(0,0,0,0.06);
  border-radius:1rem;
  padding:2.5rem 2rem;
  display:flex;
  flex-direction:column;
  transition:box-shadow 0.35s var(--ease);
}
.pricing-card:hover{
  box-shadow:0 8px 40px rgba(0,0,0,0.06);
}

/* Team card — dark background */
.pricing-card--team{
  background:var(--black);
  border-color:transparent;
  color:#fff;
  box-shadow:0 8px 32px rgba(0,0,0,0.15);
}
.pricing-card--team:hover{
  box-shadow:0 16px 56px rgba(0,0,0,0.2);
}
.pricing-card--team .pricing-card__tier{color:#fff}
.pricing-card--team .pricing-card__who{color:rgba(255,255,255,0.5)}
.pricing-card--team .pricing-card__amount{color:#fff}
.pricing-card--team .pricing-card__period{color:rgba(255,255,255,0.4)}
.pricing-card--team .pricing-card__trial-note{color:rgba(255,255,255,0.4)}
.pricing-card--team .pricing-card__then{color:rgba(255,255,255,0.8)}
.pricing-card--team .pricing-card__billing{color:rgba(255,255,255,0.4)}
.pricing-card--team .pricing-card__cta{
  background:#fff;color:var(--black);
}
.pricing-card--team .pricing-card__cta:hover{
  background:#D9FA87;
  color:#111;
  border-color:#D9FA87;
  box-shadow:0 4px 16px rgba(217,250,135,0.35);
}
.pricing-card--team .pricing-card__no-card{color:rgba(255,255,255,0.4)}
.pricing-card--team .pricing-card__divider{background:rgba(255,255,255,0.1)}
.pricing-card--team .pricing-card__includes-label{color:rgba(255,255,255,0.5)}

.pricing-card__tier{
  font-size:1.125rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.04em;
  color:var(--black);
  margin-bottom:0.25rem;
}
.pricing-card__who{
  font-size:0.875rem;
  color:var(--text-secondary);
  margin-bottom:2rem;
}

.pricing-card__price-row{
  display:flex;
  align-items:baseline;
  gap:0.25rem;
  margin-bottom:0.25rem;
}
.pricing-card__amount{
  font-size:3rem;
  font-weight:700;
  line-height:1;
  letter-spacing:-0.03em;
  color:var(--black);
}
.pricing-card__period{
  font-size:1rem;
  font-weight:400;
  color:var(--text-secondary);
}
.pricing-card__trial-note{
  font-size:0.8125rem;
  color:var(--text-secondary);
  margin-bottom:0.75rem;
}
.pricing-card__then{
  font-size:0.9375rem;
  font-weight:500;
  color:var(--black);
  margin-bottom:0.125rem;
}
.pricing-card__billing{
  font-size:0.8125rem;
  color:var(--text-secondary);
  margin-bottom:2rem;
}

.pricing-card__cta{
  display:block;
  text-align:center;
  width:100%;
  font-size:0.875rem;
  font-weight:600;
  padding:0.75rem 1.25rem;
  border-radius:1.5rem;
  background:var(--black);
  color:#fff;
  border:1px solid transparent;
  transition:all 0.3s ease;
  margin-bottom:0.5rem;
}
.pricing-card__cta:hover{
  color:#111 !important;
  background:#D9FA87;
  border-color:#D9FA87;
  box-shadow:0 4px 16px rgba(217,250,135,0.35);
}
.pricing-card__no-card{
  font-size:0.75rem;
  color:var(--text-secondary);
  text-align:center;
  margin-bottom:2rem;
}

.pricing-card__divider{
  height:1px;
  background:rgba(0,0,0,0.06);
  margin-bottom:1.5rem;
}

.pricing-card__includes-label{
  font-size:0.8125rem;
  font-weight:600;
  color:var(--text-secondary);
  margin-bottom:1rem;
}

.pricing-card__features{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:0.375rem;
  flex:1;
}
.pricing-card__features li{
  font-size:0.8125rem;
  font-weight:500;
  line-height:1;
  padding:0.5rem 0.875rem;
  border-radius:0.5rem;
  background:rgba(0,0,0,0.04);
  color:var(--black);
}
/* Team card feature pills */
.pricing-card--team .pricing-card__features li{
  background:rgba(255,255,255,0.08);
  color:rgba(255,255,255,0.8);
}

/* What's included link */
.pricing-card__compare{
  margin-top:auto;
  padding-top:1.25rem;
  text-align:center;
}
.pricing-card__compare a{
  font-size:0.8125rem;
  font-weight:500;
  color:var(--text-secondary);
  border-bottom:1px solid rgba(0,0,0,0.15);
  padding-bottom:0.125rem;
  transition:color 0.2s,border-color 0.2s;
}
.pricing-card__compare a:hover{
  color:var(--black);
  border-color:var(--black);
}
.pricing-card--team .pricing-card__compare a{
  color:rgba(255,255,255,0.5);
  border-color:rgba(255,255,255,0.2);
}
.pricing-card--team .pricing-card__compare a:hover{
  color:#fff;
  border-color:#fff;
}

/* Billing Toggle */
.billing-toggle{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0.75rem;
  margin-bottom:3rem;
}
.billing-toggle__label{
  font-size:0.875rem;
  font-weight:500;
  color:var(--text-secondary);
  cursor:pointer;
  transition:color 0.2s;
}
.billing-toggle__label.is-active{
  color:var(--black);
  font-weight:600;
}
.billing-toggle__switch{
  width:3rem;
  height:1.625rem;
  border-radius:100px;
  background:var(--black);
  position:relative;
  cursor:pointer;
  transition:background 0.3s;
  flex-shrink:0;
}
.billing-toggle__switch::after{
  content:'';
  position:absolute;
  top:3px;
  left:3px;
  width:1.125rem;
  height:1.125rem;
  border-radius:50%;
  background:#fff;
  transition:transform 0.25s var(--ease);
}
.billing-toggle__switch.is-monthly::after{
  transform:translateX(1.375rem);
}
.billing-toggle__save{
  font-size:0.6875rem;
  font-weight:600;
  color:var(--accent);
  background:rgba(245,96,2,0.08);
  padding:0.25rem 0.625rem;
  border-radius:100px;
  letter-spacing:0.02em;
}

/* Enterprise Section */
.enterprise-section{
  padding:0 2rem 6rem;
}
.enterprise-card{
  max-width:72rem;
  margin:0 auto;
  border:1px solid rgba(0,0,0,0.06);
  border-radius:1rem;
  overflow:hidden;
}
.enterprise-card__inner{
  background:var(--black);
  color:#fff;
  padding:4rem 3.5rem;
  display:grid;
  grid-template-columns:1fr auto;
  gap:3rem;
  align-items:center;
}
.enterprise-card__headline{
  font-size:clamp(1.75rem,3vw,2.5rem);
  font-weight:400;
  letter-spacing:-0.02em;
  margin-bottom:0.75rem;
  line-height:1.1;
}
.enterprise-card__desc{
  font-size:1rem;
  color:rgba(255,255,255,0.6);
  line-height:1.6;
  max-width:32rem;
  margin-bottom:1.5rem;
}
.enterprise-card__pills{
  display:flex;
  flex-wrap:wrap;
  gap:0.5rem;
}
.enterprise-pill{
  font-size:0.75rem;
  font-weight:500;
  padding:0.375rem 0.875rem;
  border-radius:100px;
  background:rgba(255,255,255,0.08);
  color:rgba(255,255,255,0.7);
  border:1px solid rgba(255,255,255,0.1);
}
.enterprise-card__cta-wrap{
  flex-shrink:0;
}
.enterprise-card__cta{
  display:inline-flex;
  align-items:center;
  gap:0.375rem;
  font-size:0.875rem;
  font-weight:600;
  color:#fff;
  padding:0.75rem 1.25rem;
  border-radius:1.5rem;
  border:1px solid rgba(255,255,255,0.4);
  background:transparent;
  transition:all 0.3s ease;
  white-space:nowrap;
}
.enterprise-card__cta:hover{
  background:rgba(255,255,255,0.12);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-color:rgba(255,255,255,0.5);
}

/* Comparison Table */
.comparison-section{
  padding:6rem 2rem;
  max-width:72rem;
  margin:0 auto;
}
.comparison-section h2{
  font-size:clamp(1.75rem,3vw,2.5rem);
  font-weight:400;
  letter-spacing:-0.02em;
  text-align:center;
  margin-bottom:3rem;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
}
.comparison-scroll{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.comparison-table{
  width:100%;
  border-collapse:collapse;
  font-size:0.9375rem;
}
.comparison-table thead th{
  text-align:center;
  padding:1.25rem 1.25rem 1.25rem;
  font-size:1.125rem;
  font-weight:600;
  letter-spacing:-0.01em;
  border-bottom:2px solid var(--black);
  vertical-align:bottom;
  color:var(--black);
  background:#fff;
}
/* "Get started" button under each tier column header (main table + sticky).
   Dark base with lime-green hover, mirroring the pricing card CTA pattern. */
.compare-cta{
  display:block;
  width:fit-content;
  margin:0.625rem auto 0;
  font-size:0.75rem;
  font-weight:600;
  letter-spacing:-0.005em;
  padding:0.425rem 0.9rem;
  border-radius:100px;
  background:#191919;
  color:#fff !important;
  border:1px solid transparent;
  text-decoration:none;
  white-space:nowrap;
  transition:background 0.2s ease, color 0.2s ease, box-shadow 0.25s ease, transform 0.15s ease;
}
.compare-cta:hover{
  background:#D9FA87;
  color:#111 !important;
  box-shadow:0 4px 14px rgba(217,250,135,0.5);
  transform:translateY(-1px);
}
/* On the main table's dark Team column, invert the button so it stays visible */
.comparison-table .th-team .compare-cta{
  background:#fff;
  color:#111 !important;
}
.comparison-table .th-team .compare-cta:hover{
  background:#D9FA87;
  color:#111 !important;
}
/* Compact version inside the sticky bar */
.comparison-sticky .compare-cta{
  margin-top:0.5rem;
  font-size:0.6875rem;
  padding:0.32rem 0.8rem;
}

/* Floating sticky header clone — refined styling.
   Anchored to top:0 always; when the nav is visible we grow an internal
   top-padding so the bar's white background keeps covering the area above
   the thead (instead of revealing the table scrolling past behind). */
.comparison-sticky{
  position:fixed;top:0;left:0;right:0;z-index:50;
  background:rgba(255,255,255,0.88);
  backdrop-filter:blur(20px) saturate(1.4);
  -webkit-backdrop-filter:blur(20px) saturate(1.4);
  border-bottom:1px solid rgba(0,0,0,0.06);
  box-shadow:0 1px 0 rgba(255,255,255,0.3) inset, 0 8px 28px -10px rgba(0,0,0,0.08);
  padding-top:0;
  opacity:0;visibility:hidden;
  transform:translateY(-100%);
  transition:padding-top 0.35s cubic-bezier(0.4,0,0.2,1), opacity 0.25s, visibility 0.25s, transform 0.3s cubic-bezier(0.16,1,0.3,1);
  pointer-events:none;
}
.comparison-sticky.is-visible{
  opacity:1;visibility:visible;pointer-events:auto;
  transform:translateY(0);
}
/* When the nav is also visible, grow top padding so the thead sits below
   the nav while the sticky's white bg still covers the full area above. */
.comparison-sticky.is-below-nav{padding-top:4.25rem}
.comparison-sticky table{
  width:100%;border-collapse:collapse;
}
.comparison-sticky th{
  text-align:center;
  padding:0.75rem 1.25rem 0.875rem;
  font-size:0.9375rem;
  font-weight:600;
  letter-spacing:-0.01em;
  color:var(--black);
  vertical-align:top;
  position:relative;
}
/* "Compare plans" label injected via pseudo-element in the empty first cell */
.comparison-sticky th:first-child{
  text-align:left;
  vertical-align:middle;
  padding-left:1.5rem;
}
.comparison-sticky th:first-child::before{
  content:'Compare plans';
  font-size:0.6875rem;
  font-weight:700;
  color:var(--text-secondary);
  text-transform:uppercase;
  letter-spacing:0.12em;
  line-height:1.2;
  display:inline-block;
}
/* Drop the orange Team accent; Team stays the same dark weight as Pro/Free. */
.comparison-sticky .th-team{
  color:var(--black);
  font-weight:600;
}
.comparison-table thead th:first-child{
  text-align:left;
  font-size:0.875rem;
  font-weight:500;
  color:var(--text-secondary);
  text-transform:uppercase;
  letter-spacing:0.06em;
}
.comparison-table .th-team{
  background:var(--black);
  color:#fff;
  border-radius:0.5rem 0.5rem 0 0;
}
.comparison-table tbody tr{
  border-bottom:1px solid rgba(0,0,0,0.06);
  transition:background 0.2s;
}
.comparison-table tbody tr:hover{
  background:#D9FA87;
}
.comparison-table tbody tr:hover td:first-child span{
  background:rgba(255,255,255,0.6);
}
.comparison-table tbody tr:hover .td-team{
  background:rgba(217,250,135,0.3);
}
.comparison-table tbody td{
  padding:0.875rem 1.25rem;
  text-align:center;
  color:var(--text-secondary);
}
.comparison-table tbody td:first-child{
  text-align:left;
  font-weight:500;
  color:var(--black);
}
/* Only the FIRST span in the first cell becomes the feature-name pill —
   any sibling spans (feat-info, feat-beta) sit outside in their own bubbles. */
.comparison-table tbody td:first-child > span:first-child{
  display:inline-block;
  font-size:0.8125rem;
  font-weight:500;
  padding:0.375rem 0.75rem;
  border-radius:100px;
  background:rgba(0,0,0,0.04);
  color:var(--black);
  vertical-align:middle;
}
.comparison-table tbody td:first-child > .feat-info,
.comparison-table tbody td:first-child > .feat-beta{
  margin-left:0.375rem;vertical-align:middle;
}
/* Team column background tint */
.comparison-table .td-team{
  background:rgba(25,25,25,0.03);
}
.comparison-table .check{
  color:var(--black);
  font-weight:600;
}
/* SVG checkmark */
.comparison-table .check-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.comparison-table .check-icon svg{
  width:16px;
  height:16px;
  stroke:var(--black);
  stroke-width:2.5;
  fill:none;
}
/* Dash line */
.comparison-table .dash-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.comparison-table .dash-icon svg{
  width:12px;
  height:2px;
}

@media(max-width:900px){
  .comparison-table{font-size:0.8125rem}
  .comparison-table thead th,
  .comparison-table tbody td{padding:0.625rem 0.5rem}
  .comparison-table thead th{font-size:0.875rem}
  .comparison-table tbody td:first-child span{
    font-size:0.6875rem;
    padding:0.25rem 0.5rem;
  }
  .comparison-table .th-team{
    border-radius:0.375rem 0.375rem 0 0;
  }
}
@media(max-width:600px){
  /* On very small screens, make the table horizontally scrollable with a minimum width */
  .comparison-scroll{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    margin:0 -1rem;
    padding:0 1rem;
  }
  .comparison-table{min-width:32rem}
  .comparison-section{padding:4rem 1rem}
}

/* =============================================
   FAQ — Exact homepage design
   ============================================= */
.faq-section{
  padding:6rem 2rem 8rem;
  background:#fff;
  position:relative;
}
.faq-section__inner{
  max-width:72rem;margin:0 auto;
  display:grid;grid-template-columns:1fr 1.4fr;gap:5rem;
  align-items:flex-start;
}
@media(max-width:900px){
  .faq-section__inner{grid-template-columns:1fr;gap:2.5rem}
}
.faq-section__intro{
  position:sticky;top:6rem;
}
.faq-section__label{
  font-size:0.6875rem;font-weight:700;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--accent);
  display:inline-flex;align-items:center;gap:0.5rem;
  margin-bottom:1rem;
}
.faq-section__label::before{
  content:'';width:0.375rem;height:0.375rem;border-radius:50%;
  background:var(--accent);
}
.faq-section__headline{
  font-size:clamp(2rem,3.2vw,2.75rem);font-weight:400;
  line-height:1.08;letter-spacing:-0.02em;
  color:var(--black);margin-bottom:1.25rem;
}
.faq-section__headline .nyght{font-weight:300}
.faq-section__sub{
  font-size:0.9375rem;color:var(--text-secondary);
  line-height:1.55;margin-bottom:1.75rem;max-width:24rem;
}
.faq-section__cta{
  display:inline-flex;align-items:center;gap:0.375rem;
  font-size:0.875rem;font-weight:600;color:var(--black);
  border-bottom:1px solid currentColor;padding-bottom:0.125rem;
  transition:color 0.2s,gap 0.2s;
}
.faq-section__cta:hover{color:var(--accent);gap:0.625rem}

/* Accordion list */
.faq-list{display:flex;flex-direction:column}
.faq-item{
  border-top:1px solid rgba(0,0,0,0.08);
  position:relative;
  transition:background 0.3s,border-radius 0.3s,border-color 0.3s;
}
.faq-item:last-child{border-bottom:1px solid rgba(0,0,0,0.08)}
.faq-item__trigger{
  width:100%;
  display:flex;align-items:center;gap:1.25rem;
  padding:1.625rem 1.25rem;
  background:none;border:none;cursor:pointer;
  text-align:left;font-family:inherit;
  color:var(--black);
  transition:padding 0.3s;
}
.faq-item__num{
  font-family:'SF Mono','JetBrains Mono',ui-monospace,Menlo,monospace;
  font-size:0.75rem;font-weight:500;
  color:rgba(0,0,0,0.35);
  letter-spacing:0.04em;min-width:1.75rem;
  transition:color 0.3s;
}
.faq-item__q{
  flex:1;
  font-size:1.0625rem;font-weight:600;
  letter-spacing:-0.01em;line-height:1.35;
  transition:transform 0.3s var(--ease);
}
.faq-item__toggle{
  width:2.25rem;height:2.25rem;border-radius:50%;
  background:rgba(0,0,0,0.04);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  transition:background 0.3s,transform 0.3s var(--ease);
}
.faq-item__toggle svg{
  width:0.875rem;height:0.875rem;
  stroke:var(--black);stroke-width:2.5;
  fill:none;stroke-linecap:round;
  transition:transform 0.3s var(--ease);
}
.faq-item__toggle svg line.v{
  transform-origin:center;transition:transform 0.3s var(--ease),opacity 0.3s;
}

.faq-item__answer{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows 0.45s var(--ease);
}
.faq-item__answer-inner{
  overflow:hidden;
  min-height:0;
}
.faq-item__answer-content{
  padding:0.5rem 1.25rem 2rem 4.25rem;
  max-width:42rem;
}
.faq-item__answer-content p{
  font-size:0.9375rem;line-height:1.65;color:var(--text-secondary);
  margin-bottom:0.75rem;
}
.faq-item__answer-content p:last-child{margin-bottom:0}
.faq-item__answer-content a{
  color:var(--black);font-weight:500;
  border-bottom:1px solid currentColor;
  transition:border-color 0.2s;
}
.faq-item__answer-content a:hover{border-bottom-color:transparent}

/* Open state */
.faq-item.is-open{
  background:#fafaf7;
  border-radius:0.875rem;
  border-top-color:transparent;
}
.faq-item.is-open + .faq-item{border-top-color:transparent}
.faq-item.is-open .faq-item__num{color:var(--accent)}
.faq-item.is-open .faq-item__q{transform:translateX(0.25rem)}
.faq-item.is-open .faq-item__toggle{background:var(--black)}
.faq-item.is-open .faq-item__toggle svg{stroke:#fff;transform:rotate(180deg)}
.faq-item.is-open .faq-item__toggle svg line.v{opacity:0;transform:rotate(90deg) scale(0)}
.faq-item.is-open .faq-item__answer{grid-template-rows:1fr}

/* Hover state (non-open) */
.faq-item:not(.is-open):hover .faq-item__num{color:var(--black)}
.faq-item:not(.is-open):hover .faq-item__toggle{background:rgba(0,0,0,0.08)}

@media(max-width:900px){
  .faq-section__intro{position:static}
  .faq-item__answer-content{padding-left:0}
  .faq-item__num{min-width:1.5rem;font-size:0.6875rem}
  .faq-item__q{font-size:0.9375rem}
}

/* Final CTA */
.final-cta{
  padding:2rem 2rem 6rem;
  background:#fff;
}
.final-cta__card{
  max-width:72rem;
  margin:0 auto;
  text-align:center;
  padding:5rem 3rem;
  background:#D9FA87;
  border:1px solid rgba(0,0,0,0.08);
  border-radius:1rem;
  box-shadow:0 4px 32px rgba(0,0,0,0.04);
}
.final-cta__card h2{color:#111}
.final-cta__card .final-cta__note{color:rgba(0,0,0,0.65)}
/* Buttons need to hold up against the lime background */
.final-cta__card .btn--ghost{
  border-color:#111;
}
.final-cta__card .btn--ghost:hover{
  background:rgba(0,0,0,0.08);
  border-color:#111;
}
.final-cta__card .btn--primary-light:hover{
  background:#000 !important;
  color:#fff !important;
  border-color:#000;
  transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(0,0,0,0.28),0 2px 6px rgba(0,0,0,0.18);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.final-cta h2{
  font-size:clamp(1.75rem,4vw,2.75rem);
  font-weight:300;
  letter-spacing:-0.02em;
  margin-bottom:1.5rem;
  line-height:1.1;
}
.final-cta__buttons{
  display:flex;
  gap:1rem;
  justify-content:center;
  flex-wrap:wrap;
  margin-bottom:1rem;
}
.final-cta__note{
  font-size:0.8125rem;
  color:var(--text-secondary);
}

/* =============================================
   RESPONSIVE
   ============================================= */
@media(max-width:768px){
  .pricing-hero{
    padding:8rem 1.5rem 3rem;
  }
  .pricing-hero h1{
    font-size:2rem;
  }
  .pricing-cards{
    grid-template-columns:1fr;
    max-width:28rem;
    margin:0 auto;
    padding:0 1.5rem 4rem;
  }
  .pricing-card__cta .cta-full{display:none}
  .pricing-card__cta .cta-short{display:inline}
  .enterprise-section{
    padding:0 1rem 4rem;
  }
  .enterprise-card__inner{
    grid-template-columns:1fr;
    padding:2.5rem 2rem;
    text-align:center;
  }
  .enterprise-card__pills{
    justify-content:center;
  }
  .enterprise-card__cta-wrap{
    margin:0 auto;
  }
  .final-cta__card{
    padding:3rem 2rem;
  }
  .final-cta__buttons{
    flex-direction:column;
    align-items:center;
  }
}
@media(min-width:769px){
  .pricing-card__cta .cta-short{display:none}
}