/* ==========================================================
   Just Sign Cars — WordPress stylesheet
   Paste into Appearance → Customize → Additional CSS,
   OR drop in your child theme's style.css.

   All custom classes are prefixed with .jsc- to avoid
   collisions with your theme. Targets blocks generated
   from home-page.html.
   ========================================================== */

@import url("https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700;800;900&family=Geist+Mono:wght@400;500;600&display=swap");

:root {
  --jsc-ink:        #0A0A0A;
  --jsc-ink-2:      #1A1A1A;
  --jsc-ink-3:      #262626;
  --jsc-graphite:   #404040;
  --jsc-steel:      #737373;
  --jsc-fog:        #A3A3A3;
  --jsc-silver:     #D4D4D4;
  --jsc-bone:       #E5E5E5;
  --jsc-chalk:      #F0F0F0;
  --jsc-paper:      #FAFAFA;
  --jsc-white:      #FFFFFF;
  --jsc-signal:     #2B5BE8;
  --jsc-signal-2:   #1E48C8;
  --jsc-signal-3:   #4A78F0;
  --jsc-signal-tint:#EDF1FE;
  --jsc-signal-ink: #0A1A45;

  --jsc-fg-1:       var(--jsc-ink);
  --jsc-fg-2:       var(--jsc-graphite);
  --jsc-fg-3:       var(--jsc-steel);
  --jsc-border-1:   var(--jsc-bone);

  --jsc-font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --jsc-font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --jsc-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --jsc-gutter: clamp(20px, 4vw, 64px);
  --jsc-section-y: clamp(72px, 11vw, 144px);
}

/* ==========================================================
   Page-level scope — only applies inside our blocks
   ========================================================== */
.jsc-page,
.jsc-page * {
  box-sizing: border-box;
}
.jsc-page {
  font-family: var(--jsc-font-sans);
  color: var(--jsc-fg-1);
  background: var(--jsc-white);
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.jsc-page a { color: inherit; text-decoration: none; }

/* Container — used inside every section */
.jsc-container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--jsc-gutter);
}

/* ==========================================================
   Typography helpers
   ========================================================== */
.jsc-page .jsc-eyebrow {
  font-family: var(--jsc-font-mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--jsc-fg-2);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.jsc-page .jsc-eyebrow::before {
  content: "";
  width: 12px;
  height: 1px;
  background: currentColor;
  display: inline-block;
}
.jsc-page .jsc-display {
  font-family: var(--jsc-font-sans);
  font-weight: 900;
  font-size: clamp(48px, 8.5vw, 128px);
  line-height: 0.95;
  letter-spacing: -0.045em;
  margin: 0;
  max-width: 14ch;
}
.jsc-page .jsc-section-title {
  font-family: var(--jsc-font-sans);
  font-weight: 700;
  font-size: clamp(36px, 4.5vw, 64px);
  line-height: 1;
  letter-spacing: -0.035em;
  margin: 0;
  max-width: 16ch;
}
.jsc-page .jsc-lede {
  font-family: var(--jsc-font-sans);
  font-size: clamp(17px, 1.4vw, 19px);
  line-height: 1.55;
  color: var(--jsc-fg-2);
  max-width: 56ch;
  margin: 0;
}
.jsc-page .jsc-signal-period { color: var(--jsc-signal); }

/* ==========================================================
   Buttons
   ========================================================== */
.jsc-page .wp-block-button__link.jsc-btn-primary,
.jsc-page a.jsc-btn,
.jsc-page button.jsc-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 24px;
  border-radius: 4px;
  border: 1px solid transparent;
  font-family: var(--jsc-font-sans);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.005em;
  line-height: 1;
  cursor: pointer;
  transition: background 150ms var(--jsc-ease), color 150ms, border-color 150ms;
  text-decoration: none;
}
.jsc-page .jsc-btn-primary,
.jsc-page .wp-block-button.jsc-btn-primary .wp-block-button__link {
  background: var(--jsc-ink);
  color: var(--jsc-white);
}
.jsc-page .jsc-btn-primary:hover,
.jsc-page .wp-block-button.jsc-btn-primary .wp-block-button__link:hover {
  background: var(--jsc-ink-2);
  color: var(--jsc-white);
}
.jsc-page .jsc-btn-secondary,
.jsc-page .wp-block-button.jsc-btn-secondary .wp-block-button__link {
  background: transparent;
  color: var(--jsc-ink);
  border-color: var(--jsc-ink);
}
.jsc-page .jsc-btn-secondary:hover,
.jsc-page .wp-block-button.jsc-btn-secondary .wp-block-button__link:hover {
  background: var(--jsc-ink);
  color: var(--jsc-white);
}
.jsc-page .jsc-btn-on-dark,
.jsc-page .wp-block-button.jsc-btn-on-dark .wp-block-button__link {
  background: var(--jsc-white);
  color: var(--jsc-ink);
}
.jsc-page .jsc-btn-on-dark:hover,
.jsc-page .wp-block-button.jsc-btn-on-dark .wp-block-button__link:hover {
  background: var(--jsc-bone);
  color: var(--jsc-ink);
}
.jsc-page .jsc-btn-ghost-on-dark,
.jsc-page .wp-block-button.jsc-btn-ghost-on-dark .wp-block-button__link {
  background: transparent;
  color: var(--jsc-white);
  border-color: var(--jsc-white);
}
.jsc-page .jsc-btn-ghost-on-dark:hover,
.jsc-page .wp-block-button.jsc-btn-ghost-on-dark .wp-block-button__link:hover {
  background: var(--jsc-white);
  color: var(--jsc-ink);
}

/* ==========================================================
   $750 chip
   ========================================================== */
.jsc-page .jsc-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--jsc-font-mono);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 8px 14px;
  background: var(--jsc-ink);
  color: var(--jsc-white);
  border-radius: 999px;
  white-space: nowrap;
}
.jsc-page .jsc-chip-outline {
  background: transparent;
  color: currentColor;
  border: 1px solid currentColor;
}

/* ==========================================================
   Header
   ========================================================== */
.jsc-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,0.78);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--jsc-border-1);
}
.jsc-header .jsc-container {
  display: flex; align-items: center; gap: 32px;
  height: 64px;
}
.jsc-header__brand img { height: 26px; width: auto; display: block; }
.jsc-header__nav {
  display: flex; gap: 28px; margin-left: auto;
  font-size: 14px; font-weight: 500;
}
.jsc-header__nav a:hover { color: var(--jsc-signal); }
.jsc-header__cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-radius: 4px;
  background: var(--jsc-ink); color: var(--jsc-white);
  font-size: 14px; font-weight: 500;
}
.jsc-header__cta:hover { background: var(--jsc-ink-2); color: var(--jsc-white); }

/* ==========================================================
   Hero
   ========================================================== */
.jsc-hero {
  padding: 88px 0 96px;
  border-bottom: 1px solid var(--jsc-border-1);
}
.jsc-hero__top {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 32px; gap: 16px; flex-wrap: wrap;
}
.jsc-hero .jsc-display + p {
  margin-top: 28px;
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.55;
  color: var(--jsc-fg-2);
  max-width: 52ch;
}
.jsc-hero__ctas {
  margin-top: 40px;
  display: flex; gap: 12px; flex-wrap: wrap;
}
.jsc-hero__metrics {
  margin-top: 64px;
  padding-top: 28px;
  border-top: 1px solid var(--jsc-border-1);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
}
.jsc-metric .jsc-metric__num {
  font-family: var(--jsc-font-mono);
  font-weight: 600;
  font-size: clamp(28px, 3vw, 40px);
  letter-spacing: -0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.jsc-metric .jsc-metric__lbl {
  font-family: var(--jsc-font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--jsc-fg-3);
  margin-top: 8px;
  display: block;
}

/* ==========================================================
   Generic section
   ========================================================== */
.jsc-section {
  padding: var(--jsc-section-y) 0;
  border-bottom: 1px solid var(--jsc-border-1);
}
.jsc-section--dark {
  background: var(--jsc-ink);
  color: var(--jsc-white);
  border-bottom-color: transparent;
}
.jsc-section--dark .jsc-lede { color: var(--jsc-silver); }
.jsc-section__head {
  display: grid; grid-template-columns: 1fr 1.4fr;
  gap: 64px; align-items: end;
  margin-bottom: 64px;
}

/* ==========================================================
   Process strip
   ========================================================== */
.jsc-process {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
}
.jsc-process__step {
  padding: 28px 28px 28px 0;
  border-top: 1px solid var(--jsc-ink);
  display: flex; flex-direction: column; gap: 16px;
  min-height: 280px;
}
.jsc-section--dark .jsc-process__step { border-top-color: var(--jsc-signal); color: var(--jsc-white); }
.jsc-process__step .jsc-process__num {
  font-family: var(--jsc-font-mono);
  font-weight: 600; font-size: 13px;
  letter-spacing: 0.06em; margin: 0;
}
.jsc-process__step .jsc-process__verb {
  font-family: var(--jsc-font-sans);
  font-weight: 800;
  font-size: clamp(26px, 2.4vw, 36px);
  letter-spacing: -0.03em;
  line-height: 1.02;
  margin: 0;
}
.jsc-process__step .jsc-process__desc {
  font-size: 15px; line-height: 1.5; color: var(--jsc-fg-2);
  margin: auto 0 0;
}
.jsc-section--dark .jsc-process__step .jsc-process__desc { color: var(--jsc-silver); }
.jsc-process__step--signal { border-top-color: var(--jsc-signal); color: var(--jsc-signal-ink); }
.jsc-process__step--signal .jsc-process__num { color: var(--jsc-signal); }
.jsc-process__step--signal .jsc-process__desc { color: var(--jsc-signal-ink); opacity: 0.8; }

/* ==========================================================
   Pricing callout
   ========================================================== */
.jsc-pricing {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  border: 1px solid var(--jsc-ink);
}
.jsc-pricing__left { padding: 56px 48px; border-right: 1px solid var(--jsc-ink); }
.jsc-pricing__right { padding: 56px 48px; }
.jsc-pricing__price {
  font-family: var(--jsc-font-mono);
  font-weight: 900;
  font-size: clamp(96px, 14vw, 220px);
  letter-spacing: -0.06em;
  line-height: 0.85;
  margin: 16px 0 24px;
  font-variant-numeric: tabular-nums;
}
.jsc-pricing__strike {
  text-decoration: line-through;
  color: var(--jsc-fg-3);
  font-family: var(--jsc-font-mono);
  font-size: 16px;
  margin-right: 8px;
  display: inline-block;
}
.jsc-pricing ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 16px; }
.jsc-pricing li {
  display: grid; grid-template-columns: 24px 1fr;
  gap: 14px; font-size: 16px; align-items: baseline;
}
.jsc-pricing li.no { color: var(--jsc-fg-3); }
.jsc-pricing li .jsc-pricing__icon {
  width: 20px; height: 20px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--jsc-font-mono); font-size: 12px; font-weight: 700;
}
.jsc-pricing li.yes .jsc-pricing__icon { background: var(--jsc-ink); color: var(--jsc-white); }
.jsc-pricing li.no .jsc-pricing__icon { background: transparent; color: var(--jsc-fg-3); border: 1px solid var(--jsc-silver); }

/* ==========================================================
   Manager Theater
   ========================================================== */
.jsc-theater { display: flex; flex-direction: column; border-top: 1px solid var(--jsc-border-1); }
.jsc-section--dark .jsc-theater,
.jsc-section--dark .jsc-theater__row { border-color: var(--jsc-ink-3); }
.jsc-theater__row {
  display: grid; grid-template-columns: 1fr 64px 1fr;
  align-items: center; padding: 28px 0;
  border-bottom: 1px solid var(--jsc-border-1);
}
.jsc-theater__them {
  font-family: var(--jsc-font-sans);
  font-style: italic;
  font-size: clamp(19px, 1.9vw, 26px);
  letter-spacing: -0.02em; line-height: 1.2;
  color: var(--jsc-fg-3);
  margin: 0;
}
.jsc-section--dark .jsc-theater__them { color: var(--jsc-fog); }
.jsc-theater__arrow {
  color: var(--jsc-signal);
  font-family: var(--jsc-font-mono);
  font-size: 18px; text-align: center;
}
.jsc-theater__us {
  font-family: var(--jsc-font-sans);
  font-weight: 700;
  font-size: clamp(19px, 1.9vw, 26px);
  letter-spacing: -0.02em; line-height: 1.2;
  margin: 0;
}

/* ==========================================================
   Service area
   ========================================================== */
.jsc-states {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  border-top: 1px solid var(--jsc-ink);
}
.jsc-state {
  padding: 28px 24px 28px 0;
  border-bottom: 1px solid var(--jsc-border-1);
  display: flex; align-items: baseline; justify-content: space-between;
}
.jsc-state__name {
  font-family: var(--jsc-font-sans);
  font-weight: 700;
  font-size: clamp(20px, 1.8vw, 24px);
  letter-spacing: -0.02em; margin: 0;
}
.jsc-state__abbr {
  font-family: var(--jsc-font-mono);
  font-size: 11px; color: var(--jsc-fg-3);
}

/* ==========================================================
   FAQ — uses native <details>/<summary> so no JS needed
   ========================================================== */
.jsc-faq { border-top: 1px solid var(--jsc-ink); }
.jsc-faq__item {
  border-bottom: 1px solid var(--jsc-border-1);
  padding: 24px 0;
  cursor: pointer;
}
.jsc-faq__item summary {
  display: grid; grid-template-columns: 1fr 24px;
  gap: 24px; align-items: center;
  list-style: none; cursor: pointer;
  font-family: var(--jsc-font-sans);
  font-weight: 600;
  font-size: clamp(18px, 1.6vw, 22px);
  letter-spacing: -0.015em; line-height: 1.3;
}
.jsc-faq__item summary::-webkit-details-marker { display: none; }
.jsc-faq__item summary::after {
  content: "+";
  font-family: var(--jsc-font-mono);
  font-size: 22px;
  text-align: right;
  color: var(--jsc-fg-2);
  transition: transform 200ms var(--jsc-ease), color 200ms;
  display: inline-block;
}
.jsc-faq__item[open] summary::after {
  content: "−";
  color: var(--jsc-signal);
}
.jsc-faq__item p {
  font-size: 16px; line-height: 1.6;
  color: var(--jsc-fg-2); max-width: 72ch;
  margin: 16px 0 0;
}

/* ==========================================================
   Lead form
   ========================================================== */
.jsc-lead-form-section {
  background: var(--jsc-ink); color: var(--jsc-white);
  padding: var(--jsc-section-y) 0;
}
.jsc-lead-form-section .jsc-section-title { color: var(--jsc-white); }
.jsc-lead-form-section .jsc-lede { color: var(--jsc-silver); }
.jsc-lead-form {
  background: var(--jsc-ink-2);
  padding: 40px;
  border-radius: 12px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px 24px;
}
.jsc-lead-form label {
  display: flex; flex-direction: column; gap: 8px;
  font-family: var(--jsc-font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--jsc-fog);
}
.jsc-lead-form input,
.jsc-lead-form select,
.jsc-lead-form textarea {
  font-family: var(--jsc-font-sans);
  font-size: 16px;
  padding: 14px 16px;
  background: transparent;
  border: 1px solid var(--jsc-graphite);
  color: var(--jsc-white);
  border-radius: 4px;
  transition: border-color 150ms;
  letter-spacing: -0.005em;
  text-transform: none;
}
.jsc-lead-form input:focus,
.jsc-lead-form select:focus,
.jsc-lead-form textarea:focus {
  outline: none;
  border-color: var(--jsc-signal-3);
  box-shadow: 0 0 0 3px rgba(74,120,240,0.25);
}
.jsc-lead-form input::placeholder,
.jsc-lead-form textarea::placeholder { color: var(--jsc-steel); }
.jsc-lead-form .jsc-full { grid-column: 1 / -1; }
.jsc-lead-form textarea { resize: vertical; min-height: 110px; }
.jsc-lead-form__submit {
  grid-column: 1 / -1;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; margin-top: 8px;
}
.jsc-lead-form__fine {
  font-family: var(--jsc-font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--jsc-steel);
}

/* ==========================================================
   Footer
   ========================================================== */
.jsc-footer {
  background: var(--jsc-ink); color: var(--jsc-white);
  padding: 80px 0 40px;
}
.jsc-footer .jsc-container { color: var(--jsc-white); }
.jsc-footer__row {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px; padding-bottom: 56px;
  border-bottom: 1px solid var(--jsc-ink-3);
}
.jsc-footer__brand img { height: 26px; width: auto; }
.jsc-footer__brand p {
  margin: 20px 0 16px;
  color: var(--jsc-silver);
  font-size: 14px; line-height: 1.55;
  max-width: 360px;
}
.jsc-footer__chips { display: flex; gap: 10px; }
.jsc-footer h5 {
  font-family: var(--jsc-font-mono);
  font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--jsc-fog);
  margin: 0 0 16px;
}
.jsc-footer__col a {
  display: block; color: var(--jsc-white);
  font-size: 14px; padding: 4px 0;
  transition: color 150ms;
}
.jsc-footer__col a:hover { color: var(--jsc-signal-3); }
.jsc-footer__legal {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 28px; gap: 24px; flex-wrap: wrap;
  font-family: var(--jsc-font-mono);
  font-size: 11px; color: var(--jsc-steel);
  letter-spacing: 0.04em;
}

/* ==========================================================
   Mobile — pretty thorough breakpoints
   ========================================================== */
@media (max-width: 1024px) {
  .jsc-section__head { grid-template-columns: 1fr; gap: 24px; }
  .jsc-process { grid-template-columns: repeat(2, 1fr); }
  .jsc-process__step { min-height: 200px; }
  .jsc-pricing { grid-template-columns: 1fr; }
  .jsc-pricing__left { border-right: 0; border-bottom: 1px solid var(--jsc-ink); }
  .jsc-pricing__left, .jsc-pricing__right { padding: 40px 32px; }
  .jsc-lead-form { grid-template-columns: 1fr; padding: 28px; }
  .jsc-footer__row { grid-template-columns: 1fr 1fr; }
  .jsc-hero__metrics { grid-template-columns: repeat(2, 1fr); gap: 32px 24px; }
}

@media (max-width: 720px) {
  .jsc-header__nav { display: none; }
  .jsc-hero { padding: 56px 0 64px; }
  .jsc-states { grid-template-columns: repeat(2, 1fr); }
  .jsc-process { grid-template-columns: 1fr; }
  .jsc-process__step { min-height: 0; }
  .jsc-theater__row { grid-template-columns: 1fr; gap: 8px; }
  .jsc-theater__arrow { text-align: left; }
  .jsc-footer__row { grid-template-columns: 1fr; gap: 28px; }
  .jsc-footer__legal { flex-direction: column; align-items: flex-start; }
  .jsc-lead-form__submit { flex-direction: column; align-items: stretch; }
  .jsc-lead-form__submit .jsc-btn { width: 100%; justify-content: center; }
}