/* Feedback form styles */

body, .feedback-form-container, .feedback-form-label, .feedback-form-input, .feedback-form-textarea {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}
.feedback-form-container {
  max-width: 480px;
  margin: 2rem auto;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 16px rgba(0,0,0,0.07);
  padding: 2rem 2.5rem;
}
.feedback-form-container h2 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
  text-align: center;
  color: #222;
}
.feedback-form-group {
  margin-bottom: 1.2rem;
}
.feedback-form-label {
  font-weight: 500;
  color: #333;
  display: block;
  margin-bottom: 0.4rem;
}
.feedback-form-input,
.feedback-form-textarea {
  width: 100%;
  padding: 0.7rem;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 1rem;
  background: #f9fafb;
}
.feedback-form-textarea {
  resize: vertical;
}
.feedback-form-submit {
  background: #2563eb;
  color: #fff;
  font-weight: 600;
  border: none;
  border-radius: 6px;
  padding: 0.8rem 2.2rem;
  font-size: 1.1rem;
  cursor: pointer;
  transition: background 0.2s;
  text-align: center;
}
.feedback-form-submit:hover {
  background: #1d4ed8;
}
/* Marketing layout styles for SaaS */

/* Marketing layout styles for SaaS */

.marketing-layout {
  min-height: 100vh;
  background: #f4f6f8;
  display: flex;
  flex-direction: column;
  /* Backstop against a sideways-scrolling phone. The real causes are fixed above —
     flex items that would not shrink, rigid grid tracks, unbreakable URLs, tables
     without a scroll wrapper — but these pages carry a lot of hand-written inline
     style, and one stray fixed width should degrade to a clipped edge rather than
     to a page the reader can drag off-screen.

     `clip`, never `hidden`: hidden makes this a scroll container, which would break
     position:sticky in the pricing comparison tables and give the layout root its
     own scrollport. clip does neither, and unlike hidden it does not stop a
     descendant's own overflow-x:auto from scrolling — the wide tables still work. */
  overflow-x: clip;
}
/* Home page hero and features styles for SaaS */
.home-hero {
  max-width: 700px;
  margin: 60px auto 40px auto;
  text-align: center;
  padding: 40px 24px 32px 24px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.07);
}
.home-hero h1 {
  font-size: 2.5rem;
  margin-bottom: 18px;
  color: #1d3557;
  font-weight: 700;
}
.home-hero p {
  font-size: 1.25rem;
  color: #374151;
  margin-bottom: 32px;
}
.home-hero .cta-btn {
  background: #2563eb;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 14px 36px;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s;
}
.home-hero .cta-btn:hover {
  background: #1d4ed8;
}
.home-features {
  max-width: 900px;
  margin: 40px auto 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  justify-content: center;
}
.home-feature {
  background: #f9fafb;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
  padding: 28px 22px 22px 22px;
  flex: 1 1 260px;
  min-width: 240px;
  max-width: 320px;
  text-align: center;
}
.home-feature h3 {
  color: #2563eb;
  font-size: 1.2rem;
  margin-bottom: 10px;
}
.home-feature p {
  color: #374151;
  font-size: 1rem;
}

/* Plans section styles */
.home-plans {
  max-width: 900px;
  margin: 56px auto 0 auto;
}
.home-plans h2 {
  text-align: center;
  color: #1d3557;
  font-size: 2rem;
  margin-bottom: 32px;
}
.plans-row {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  justify-content: center;
}
.plan-card {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 1px 8px rgba(0,0,0,0.06);
  padding: 32px 24px;
  min-width: 220px;
  max-width: 280px;
  text-align: center;
  flex: 1 1 220px;
}
.plan-card h3 {
  color: #2563eb;
  font-size: 1.3rem;
  margin-bottom: 10px;
}
.plan-price {
  font-size: 2rem;
  font-weight: 700;
  color: #222;
  margin-bottom: 8px;
}
.plan-period {
  font-size: 1rem;
  color: #6b7280;
  font-weight: 400;
}
.plan-limit {
  color: #374151;
  margin-bottom: 18px;
}
.plan-features {
  list-style: none;
  padding: 0;
  margin-bottom: 18px;
  color: #374151;
}
.plan-btn {
  width: 100%;
  display: inline-block;
}

.marketing-header {
  background: #fff;
  box-shadow: 0 1px 6px rgba(0,0,0,0.04);
  padding: 18px 0 16px 0;
  text-align: right;
}

.auth-links {
  margin-right: 36px;
  font-size: 1.08rem;
}

.auth-links a,
.auth-links .logout-button {
  color: #2563eb;
  text-decoration: none;
  font-weight: 500;
  margin-left: 18px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font-size: 1.08rem;
  transition: color 0.2s;
}

.auth-links a:hover,
.auth-links .logout-button:hover {
  color: #1d4ed8;
}

.logout-form {
  display: inline;
}

.marketing-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* A column flex container measures its items against the cross axis, and a flex
     item's automatic minimum size is its max-content width. Without this, page
     content refuses to shrink below the widest unbreakable thing inside it — on
     /pricing the comparison table forced a 471px document into a 347px viewport,
     and the table's own overflow-x-auto wrapper never got the chance to scroll,
     because the item around it had already been sized to fit. */
  min-width: 0;
}

/* min-width only. A `max-width: 100%` here would sit in no cascade layer and so
   outrank Tailwind's layered `max-w-5xl` on the very same element, stretching every
   capped page to the full width of a desktop monitor. */
.marketing-main > * {
  min-width: 0;
}

/* Many of the hand-styled resource pages set an inline `max-width` for their reading
   measure, and an inline declaration outranks the rule above — so on a narrow screen
   the wrapper keeps its desktop width and the whole page scrolls sideways. Below the
   breakpoint a fixed measure means nothing, so !important reclaims it there and only
   there; the desktop measure is untouched. */
@media (max-width: 640px) {
  .marketing-main > * {
    max-width: 100% !important;
  }
}

/* Custom styles for How It Works section */
.how-it-works-section {
  max-width: 700px;
  margin: 48px auto 48px auto;
  padding: 32px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 16px rgba(0,0,0,0.07);
}
.how-it-works-title {
  font-size: 2rem;
  font-weight: bold;
  text-align: center;
  margin-bottom: 24px;
  color: #223;
}

/* Stepper styles for How It Works */
.how-steps {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  margin-top: 32px;
  flex-wrap: wrap;
}
.how-step {
  background: #f9fafb;
  border-radius: 10px;
  box-shadow: 0 1px 6px rgba(0,0,0,0.06);
  padding: 28px 20px 20px 20px;
  flex: 1 1 200px;
  min-width: 200px;
  max-width: 260px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.how-step-circle {
  width: 44px;
  height: 44px;
  background: #2563eb;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(37,99,235,0.10);
}
.how-step-title {
  font-size: 1.15rem;
  font-weight: 600;
  color: #223;
  margin-bottom: 8px;
  text-align: center;
}
.how-step-desc {
  color: #444;
  font-size: 1rem;
  text-align: center;
}
@media (max-width: 900px) {
  .how-steps {
    flex-direction: column;
    gap: 18px;
    align-items: stretch;
  }
  .how-step {
    max-width: 100%;
    min-width: 0;
  }
}


/* ── ACORD 25 Interactive Form ───────────────────────────────────────── */

/* Full-bleed breakout — escapes the max-w-3xl article wrapper */
.acord25-section-widen {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  padding: 0 24px;
  box-sizing: border-box;
}

.acord25-wrapper {
  max-width: 1100px;
  margin: 0 auto;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.acord25-hint {
  font-size: 0.85rem;
  color: #6b7280;
  margin-bottom: 12px;
  text-align: center;
}

/* SVG form */
.acord25-svg-wrap {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 20px rgba(0,0,0,0.08);
  background: #fff;
}

.acord25-svg {
  width: 100%;
  height: auto;
  display: block;
}

/* Clickable zone styles */
.acord-zone {
  cursor: pointer;
  outline: none;
}

.acord-zone__rect {
  transition: fill 0.15s ease, stroke 0.15s ease;
}

.acord-zone:hover .acord-zone__rect,
.acord-zone:focus .acord-zone__rect {
  fill: rgba(59, 130, 246, 0.06);
  stroke: #3b82f6;
  stroke-width: 1.5;
}

.acord-zone--active .acord-zone__rect {
  fill: rgba(59, 130, 246, 0.10) !important;
  stroke: #2563eb !important;
  stroke-width: 2 !important;
}

.acord-zone__pulse {
  opacity: 0.85;
  transition: opacity 0.2s;
}

.acord-zone:hover .acord-zone__pulse {
  opacity: 1;
}

/* Modal popup */
.acord-panel {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.acord-panel--visible {
  opacity: 1;
  pointer-events: all;
}

.acord-panel__inner {
  background: #fff;
  border: 1.5px solid #e5e7eb;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.18);
  padding: 28px 32px;
  width: 100%;
  max-width: 640px;
  max-height: 90vh;
  overflow-y: auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  transform: scale(0.95);
  transition: transform 0.2s ease;
}

.acord-panel--visible .acord-panel__inner {
  transform: scale(1);
}

.acord-panel__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}

.acord-panel__title {
  font-size: 1.2rem;
  font-weight: 700;
  color: #111827;
  margin: 6px 0 0 0;
  line-height: 1.3;
}

.acord-panel__close {
  flex-shrink: 0;
  background: #f3f4f6;
  border: none;
  cursor: pointer;
  color: #6b7280;
  padding: 6px;
  border-radius: 8px;
  transition: background 0.15s, color 0.15s;
  margin-top: 2px;
  line-height: 0;
}

.acord-panel__close:hover {
  background: #e5e7eb;
  color: #111827;
}

.acord-panel__body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.acord-panel__body > .acord-panel__tip {
  grid-column: 1 / -1;
}

.acord-panel__what,
.acord-panel__why {
  font-size: 0.9rem;
  color: #374151;
  line-height: 1.65;
  margin: 0;
  background: #f9fafb;
  border-radius: 10px;
  padding: 14px 16px;
}

.acord-panel__label {
  display: block;
  margin-bottom: 4px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #9ca3af;
}

.acord-panel__tip {
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 0.85rem;
  color: #92400e;
  line-height: 1.6;
}

.acord-panel__tip::before {
  content: "Pro tip: ";
  font-weight: 700;
}

.acord-panel__arrow {
  margin-top: 16px;
  font-size: 0.78rem;
  color: #9ca3af;
  text-align: center;
  grid-column: 1 / -1;
}

/* Tags */
.acord-tag {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 3px 9px;
  border-radius: 999px;
}

.acord-tag--red    { background: #fee2e2; color: #991b1b; }
.acord-tag--yellow { background: #fef9c3; color: #854d0e; }
.acord-tag--blue   { background: #dbeafe; color: #1e40af; }
.acord-tag--gray   { background: #f3f4f6; color: #6b7280; }

/* Legend */
.acord25-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 16px;
  justify-content: center;
}

.acord25-legend__item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.78rem;
  color: #6b7280;
}

.acord25-legend__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.acord25-legend__dot--red    { background: #ef4444; }
.acord25-legend__dot--yellow { background: #f59e0b; }
.acord25-legend__dot--blue   { background: #3b82f6; }
.acord25-legend__dot--gray   { background: #9ca3af; }

/* Modal backdrop */
.acord-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(0, 0, 0, 0.45);
  display: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.acord-overlay--visible {
  display: block;
  opacity: 1;
}

/* Prevent body scroll when modal is open */
body.acord-modal-open {
  overflow: hidden;
}

/* Mobile adjustments */
@media (max-width: 640px) {
  .acord25-section-widen {
    padding: 0 12px;
  }

  .acord-panel {
    padding: 12px;
    align-items: flex-end;
  }

  .acord-panel__inner {
    padding: 18px 16px;
    border-radius: 14px 14px 0 0;
    max-height: 80vh;
  }

  .acord-panel__body {
    grid-template-columns: 1fr;
  }

  .acord-panel__title {
    font-size: 1rem;
  }
}

/* ── Plan comparison tables ──────────────────────────────────────────────────
   app.css styles bare `table` and `th, td` for the dashboard, and stylesheet_link_tag
   :app bundles it into every marketing page too. Those rules are unlayered, so they
   beat Tailwind v4's layered utilities regardless of specificity — which is why
   `px-3` on a cell did nothing here. Both fixes therefore live in CSS, and both are
   scoped to .compare-table so the dashboard's own tables are untouched. */
.compare-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* `table { overflow: hidden }` in app.css makes the table its own scroll container,
   which silently defeats position:sticky on the cells inside it — the pinned column
   rides along instead of staying put. */
.compare-table {
  overflow: visible;
  border-radius: 0;
  box-shadow: none;
}

/* Keep the row label in view while the plan columns scroll under it. Group headers
   span every column, so they are excluded. */
.compare-table thead th:first-child,
.compare-table tbody td:first-child:not([colspan]) {
  position: sticky;
  left: 0;
  z-index: 2;
  background: #fff;
}

/* A pinned column only helps if it does not hide the columns being compared, so
   buy width back from the padding on the screens that actually scroll. */
@media (max-width: 640px) {
  .compare-table th,
  .compare-table td {
    padding: 12px 10px;
  }

  .compare-table thead th:first-child,
  .compare-table tbody td:first-child:not([colspan]) {
    /* Enough for a wrapped feature name, not so much that only one plan fits. */
    max-width: 40vw;
    box-shadow: 1px 0 0 #f1f5f9;
  }
}

/* A group header spans every column, so pinning its cell would pin something already
   as wide as the table and the label would still scroll out of view. The label itself
   is what has to stick. */
.compare-table-group {
  position: sticky;
  left: 10px;
  display: inline-block;
}

/* ── Narrow-viewport intrinsic sizing ────────────────────────────────────────
   Two things stop marketing content shrinking to a phone, and both are about the
   *minimum* width a box reports rather than its preferred one.

   1. A long unbreakable token — a state portal URL like
      apps2.colorado.gov/dora/licensing/lookup/licenselookup.aspx, or a webhook
      event name like contractor.coi_expiring — sets the paragraph's min-content
      width, and everything around it is sized to fit. `break-word` is not enough
      here: only `anywhere` feeds back into intrinsic sizing.
   2. A flex item defaults to min-width:auto, i.e. it refuses to shrink below its
      own max-content width. Items that genuinely must keep their size carry
      flex-shrink-0, which still protects them. */
.marketing-main p,
.marketing-main li,
.marketing-main dd,
.marketing-main span {
  overflow-wrap: anywhere;
}

/* Deliberately not table cells. A comparison table should stay legible and scroll
   inside its wrapper; letting it shrink to the viewport instead breaks headings
   mid-word — "Subcontractors tracked" came out over four lines in a 143px column. */
.marketing-main td,
.marketing-main th {
  overflow-wrap: normal;
}

.marketing-main .flex > *,
.marketing-main [style*="display:flex"] > *,
.marketing-main [style*="display: flex"] > * {
  min-width: 0;
}