:root {
  --jtdos-bg: #f5f8fc;
  --jtdos-surface: rgba(255, 255, 255, 0.94);
  --jtdos-text: #0f172a;
  --jtdos-navy: #081225;
  --jtdos-ink: #111827;
  --jtdos-muted: #64748b;
  --jtdos-primary: #2563eb;
  --jtdos-electric: #38bdf8;
  --jtdos-primary-strong: #1d4ed8;
  --jtdos-primary-soft: #e0f2fe;
  --jtdos-cyan-soft: #ecfeff;
  --jtdos-amber: #f59e0b;
  --jtdos-amber-soft: #fff7ed;
  --jtdos-border: rgba(148, 163, 184, 0.28);
  --jtdos-shadow: 0 22px 70px rgba(15, 23, 42, 0.08);
  --jtdos-shadow-strong: 0 28px 90px rgba(8, 18, 37, 0.14);
  --jtdos-radius-sm: 10px;
  --jtdos-radius-md: 16px;
  --jtdos-radius-lg: 24px;
}

html {
  color-scheme: light;
  text-rendering: optimizeLegibility;
}

body {
  background:
    radial-gradient(circle at 12% 8%, rgba(37, 99, 235, 0.16), transparent 28%),
    radial-gradient(circle at 88% 0%, rgba(56, 189, 248, 0.16), transparent 22%),
    linear-gradient(180deg, #f8fbff 0%, var(--jtdos-bg) 44%, #ffffff 100%) !important;
  color: var(--jtdos-text);
}

main {
  width: min(100%, 1200px);
}

header {
  position: relative;
  z-index: 2;
}

.brand {
  color: var(--jtdos-text);
  letter-spacing: -0.01em;
}

nav a {
  transition: color 160ms ease, transform 160ms ease;
}

nav a:hover {
  color: var(--jtdos-primary) !important;
  transform: translateY(-1px);
}

.language-switcher {
  border: 1px solid rgba(226, 232, 240, 0.9);
  background: rgba(239, 246, 255, 0.88) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.84);
}

.language-switcher button {
  transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}

.language-switcher button:hover {
  transform: translateY(-1px);
}

.hero,
.panel,
.card,
.plan,
.table-card,
.account-card,
.fast-track,
.fast-track-notice,
.jtdos-glass {
  border-color: var(--jtdos-border) !important;
  box-shadow: var(--jtdos-shadow) !important;
  backdrop-filter: blur(14px);
}

.hero,
.panel {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(239, 246, 255, 0.76)) !important;
}

.card,
.plan,
.table-card,
.account-card {
  background: var(--jtdos-surface) !important;
}

.button,
button[type="submit"],
#send-need-button,
#estimate-price-button,
#upgrade-button {
  box-shadow: 0 12px 28px rgba(37, 99, 235, 0.20);
  transition: background 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.button:hover,
button[type="submit"]:hover,
#send-need-button:hover,
#estimate-price-button:hover,
#upgrade-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 34px rgba(37, 99, 235, 0.26);
}

.badge,
.eyebrow {
  letter-spacing: 0;
}

input,
textarea,
select {
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

input:focus,
textarea:focus,
select:focus {
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.14);
}

.jtdos-topline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  border: 1px solid rgba(37, 99, 235, 0.18);
  border-radius: 999px;
  padding: 8px 12px;
  background: rgba(224, 242, 254, 0.74);
  color: var(--jtdos-primary);
  font-weight: 900;
  font-size: 14px;
}

.jtdos-topline::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--jtdos-primary), var(--jtdos-electric));
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.7);
}

.jtdos-hero-shell {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.26);
  border-radius: 32px;
  background:
    radial-gradient(circle at 14% 12%, rgba(56, 189, 248, 0.18), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(239, 246, 255, 0.78));
  box-shadow: var(--jtdos-shadow-strong);
}

.jtdos-hero-shell::after {
  content: "";
  position: absolute;
  inset: auto -12% -40% 46%;
  height: 280px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.18), transparent 62%);
  pointer-events: none;
}

.jtdos-channel-grid,
.jtdos-metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.jtdos-channel-pill,
.jtdos-safety-pill {
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.76);
  padding: 13px 14px;
  color: var(--jtdos-muted);
  font-weight: 850;
}

.jtdos-safety-pill {
  background: rgba(255, 247, 237, 0.82);
  color: #92400e;
}

.jtdos-preview-stack {
  display: grid;
  gap: 14px;
}

.jtdos-preview-card {
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.82);
  padding: 18px;
}

.jtdos-preview-card.dark {
  background: linear-gradient(135deg, #081225, #13213b);
  color: #f8fafc;
  box-shadow: 0 24px 60px rgba(8, 18, 37, 0.22);
}

.jtdos-preview-card.dark p,
.jtdos-preview-card.dark span {
  color: #cbd5e1;
}

.jtdos-data-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-top: 1px solid rgba(148, 163, 184, 0.2);
  padding-top: 12px;
  margin-top: 12px;
  color: var(--jtdos-muted);
  font-weight: 800;
}

.jtdos-review-badge {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  border-radius: 999px;
  padding: 7px 10px;
  background: var(--jtdos-amber-soft);
  color: #92400e;
  font-weight: 900;
  font-size: 13px;
}

.jtdos-section-band {
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 28px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(236, 254, 255, 0.58));
  box-shadow: var(--jtdos-shadow);
  padding: clamp(24px, 4vw, 42px);
}

.jtdos-section-kicker {
  color: var(--jtdos-primary);
  font-size: 14px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 10px;
}

.jtdos-brand-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
}

.jtdos-brand-card {
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 22px;
  padding: 22px;
  background: rgba(255, 255, 255, 0.82);
}

.jtdos-brand-card.jtdss {
  background: linear-gradient(135deg, rgba(232, 245, 239, 0.92), rgba(255, 255, 255, 0.82));
}

@media (max-width: 900px) {
  .jtdos-channel-grid,
  .jtdos-metric-grid,
  .jtdos-brand-split {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  main {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

@media (min-width: 900px) {
  body.landing-premium,
  body.ai-booking-premium,
  body.pricing-premium,
  body.contact-premium,
  body:has(.app-sidebar),
  body:has(.shell) {
    width: 100vw !important;
    min-width: 0 !important;
    height: 100svh !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  body.landing-premium main,
  body.ai-booking-premium main,
  body.pricing-premium main,
  body.contact-premium main,
  body:has(.app-sidebar) main,
  body:has(.shell) main,
  body:has(.shell) .shell {
    width: 100vw !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 100svh !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  body.landing-premium main {
    display: grid !important;
    grid-template-rows: clamp(58px, 7vh, 74px) minmax(0, 1fr) clamp(82px, 12vh, 108px) clamp(72px, 10.5vh, 98px) !important;
    padding: 0 !important;
  }

  body.pricing-premium,
  body.pricing-premium main {
    height: auto !important;
    min-height: 100svh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  body.landing-premium header {
    display: grid !important;
    grid-template-columns: minmax(198px, 260px) minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: clamp(14px, 2vw, 28px) !important;
    padding: 0 clamp(18px, 3.2vw, 58px) !important;
    height: clamp(58px, 7vh, 74px) !important;
    overflow: visible !important;
  }

  body.landing-premium .brand {
    min-width: 0 !important;
    flex: none !important;
    white-space: nowrap !important;
  }

  body.landing-premium .brand img {
    width: clamp(168px, 14vw, 210px) !important;
    max-height: clamp(38px, 5.4vh, 54px) !important;
  }

  body.landing-premium .top-nav-center {
    display: flex !important;
    min-width: 0 !important;
    gap: clamp(14px, 2.1vw, 34px) !important;
    overflow: visible !important;
  }

  body.landing-premium .nav-menu-item {
    white-space: nowrap !important;
  }

  body.landing-premium .header-actions {
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    gap: clamp(8px, 1vw, 14px) !important;
  }

  body.landing-premium .login-button,
  body.landing-premium .try-button {
    min-height: clamp(38px, 4.8vh, 44px) !important;
    padding: 0 clamp(14px, 1.5vw, 24px) !important;
  }

  body.landing-premium .hero {
    width: min(100vw, 1680px) !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: clamp(12px, 2vh, 30px) clamp(28px, 4.6vw, 76px) 0 !important;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr) !important;
    gap: clamp(18px, 3vw, 44px) !important;
    align-items: center !important;
  }

  body.landing-premium h1 {
    font-size: clamp(44px, 5.3vw, 86px) !important;
    line-height: 0.96 !important;
    margin-bottom: clamp(8px, 1.4vh, 14px) !important;
  }

  body.landing-premium .hero-blue-line {
    font-size: clamp(18px, 1.7vw, 28px) !important;
    margin: 0 0 clamp(10px, 1.6vh, 18px) !important;
  }

  body.landing-premium .hero p {
    font-size: clamp(13px, 1.12vw, 18px) !important;
    line-height: 1.48 !important;
  }

  body.landing-premium .actions,
  body.landing-premium .hero-proof-row {
    margin-top: clamp(12px, 2.1vh, 24px) !important;
  }

  body.landing-premium .assistant-card {
    min-height: 0 !important;
    height: min(100%, clamp(350px, 54vh, 540px)) !important;
    max-height: none !important;
  }

  body.landing-premium .landing-channel-dock,
  body.landing-premium .landing-safety-dock {
    width: min(100% - 64px, 1360px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body.landing-premium .landing-channel-dock {
    margin-top: -10px !important;
    padding: clamp(7px, 1vh, 11px) clamp(12px, 1.7vw, 18px) !important;
  }

  body.landing-premium .channel-tile {
    min-height: clamp(68px, 9vh, 92px) !important;
    padding: clamp(6px, 0.9vh, 9px) clamp(9px, 1.2vw, 14px) !important;
    grid-template-columns: clamp(34px, 3vw, 48px) minmax(0, 1fr) !important;
  }

  body.landing-premium .channel-icon {
    width: clamp(30px, 2.8vw, 40px) !important;
    height: clamp(30px, 2.8vw, 40px) !important;
  }

  body.landing-premium .landing-safety-dock {
    margin-top: clamp(8px, 1.4vh, 16px) !important;
    padding: clamp(8px, 1.1vh, 12px) clamp(12px, 1.5vw, 16px) !important;
  }

  body.ai-booking-premium main {
    display: grid !important;
    grid-template-columns: minmax(210px, 18vw) minmax(0, 1fr) minmax(300px, 27vw) !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    gap: clamp(10px, 1.2vw, 16px) !important;
    padding: clamp(10px, 1.3vw, 16px) clamp(10px, 1.3vw, 16px) clamp(46px, 6vh, 60px) !important;
  }
}