/* Report-driven conversion, scanability, and final proof polish */
.primary-cta {
  box-shadow: 0 16px 34px rgba(200, 95, 40, .34);
  transform: translateY(-1px);
}

.tertiary-link {
  align-items: center;
  border: 1px solid rgba(255, 255, 255, .38);
  border-radius: 16px;
  color: #fff5ee;
  display: inline-flex;
  font-weight: 900;
  justify-content: center;
  min-height: 44px;
  padding: .78rem 1rem;
  text-decoration: none;
}

.tertiary-link:hover {
  background: rgba(255, 255, 255, .09);
  color: #fff;
}

.home-hero,
.product-hero {
  padding-top: clamp(6.2rem, 10vw, 8.8rem);
}

.hero .eyebrow {
  margin-bottom: 1.35rem;
  position: relative;
  z-index: 1;
}

.hero-positioning {
  align-items: start !important;
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) !important;
  grid-template-areas:
    "icon title"
    "icon copy" !important;
  max-width: 820px !important;
  padding: 1.05rem 1.2rem !important;
}

.hero-positioning::before { grid-area: icon; margin-top: .05rem; }
.hero-positioning strong { grid-area: title; margin: 0 0 .25rem !important; text-align: left !important; }
.hero-positioning span { grid-area: copy; text-align: left !important; }
.hero .buttons { gap: .7rem; margin-top: 1.25rem; }
.hero h1 { max-width: 900px; }
.hero-lead { max-width: 820px; }
.version-stamp { display: block; margin-top: .4rem; opacity: .75; }

.quick-jump {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  justify-content: center;
  margin: 0 auto 1.5rem;
  max-width: 980px;
}
.quick-jump a {
  background: #fffefb;
  border: 1px solid rgba(222, 210, 194, .95);
  border-radius: 999px;
  box-shadow: 0 8px 18px rgba(34, 27, 20, .055);
  color: var(--accent-dark);
  font-size: .86rem;
  font-weight: 950;
  padding: .58rem .78rem;
  text-decoration: none;
}
.quick-jump a:hover { border-color: rgba(200, 95, 40, .68); box-shadow: 0 12px 24px rgba(34, 27, 20, .09); transform: translateY(-1px); }

.custom-work-panel,
.faq-panel,
.case-grid { display: grid; gap: 1rem; }
.custom-work-panel { grid-template-columns: minmax(0, 1.05fr) minmax(280px, .95fr); }
.custom-work-main,
.custom-work-side,
.faq-card,
.case-card,
.static-group {
  background: #fffefb;
  border: 1px solid rgba(222, 210, 194, .95);
  border-radius: 26px;
  box-shadow: 0 12px 32px rgba(34, 27, 20, .07);
  padding: clamp(1rem, 2vw, 1.25rem);
}
.custom-work-main { background: radial-gradient(circle at top right, rgba(200, 95, 40, .12), transparent 38%), #fffefb; }
.custom-work-main h2,
.custom-work-side h3,
.faq-card h3,
.case-card h3,
.static-group h3 { letter-spacing: -.035em; line-height: 1.08; margin-bottom: .55rem; }
.custom-work-main p,
.custom-work-side p,
.faq-card p,
.case-card p,
.static-group p { color: var(--muted); }
.scope-list { display: grid; gap: .65rem; margin-top: 1rem; }
.scope-list div { background: #fff6ec; border: 1px solid rgba(200, 95, 40, .14); border-radius: 16px; padding: .75rem; }
.scope-list strong { display: block; margin-bottom: .2rem; }
.case-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.desk-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.desk-card { color: inherit; min-height: 250px; overflow: hidden; position: relative; text-decoration: none; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.desk-card::after { background: linear-gradient(90deg, rgba(200, 95, 40, .78), rgba(85, 120, 95, .22)); bottom: 0; content: ""; height: 5px; left: 0; position: absolute; right: 0; }
.desk-card:hover { border-color: rgba(200, 95, 40, .62); box-shadow: 0 18px 44px rgba(34, 27, 20, .12); transform: translateY(-4px); }
.desk-card h3 { color: #171717; }
.case-card small,
.static-group small { color: var(--accent-dark); display: block; font-size: .72rem; font-weight: 950; letter-spacing: .09em; margin-bottom: .45rem; text-transform: uppercase; }
.faq-grid { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.static-index-groups { display: grid; gap: 1.25rem; }
.static-group .static-product-grid { margin-top: .8rem; }

.sample-card > .safe-labels,
.sample-block > .safe-labels,
.case-card > .safe-labels {
  align-items: center !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: .28rem !important;
  line-height: 1 !important;
  margin: 0 0 .55rem !important;
  max-width: 100% !important;
}
.sample-card > .safe-labels span,
.sample-block > .safe-labels span,
.case-card > .safe-labels span {
  align-items: center !important;
  background: rgba(200, 95, 40, .08) !important;
  border: 1px solid rgba(200, 95, 40, .18) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  color: #8a3a18 !important;
  display: inline-flex !important;
  flex: 0 0 auto !important;
  font-size: .64rem !important;
  font-weight: 850 !important;
  letter-spacing: .01em !important;
  line-height: 1.1 !important;
  margin: 0 !important;
  max-width: max-content !important;
  padding: .18rem .42rem !important;
  text-transform: none !important;
  white-space: nowrap !important;
  width: auto !important;
}
.sample-card > .sample-preview,
.sample-block .mock-screen,
.case-card .mock-screen { margin-top: .15rem !important; }

/* Demo system overview visual from chat review. */
.proof-card .dashboard-card img[src*="approved-investor-proof-dashboard"] {
  display: none !important;
}
.proof-card .dashboard-card::before {
  background-color: #020617;
  background-image: url("assets/h38-demo-overview-chat-photo-v1.jpg?v=chat-photo-v1");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  border: 1px solid #1e3a8a;
  border-radius: 18px;
  box-shadow: 0 18px 45px rgba(15, 23, 42, .18);
  content: "";
  display: block;
  min-height: clamp(360px, 52vw, 760px);
  width: 100%;
}

/* Live V5 image fix pass: force the homepage featured visual away from the old SVG render. */
#messy-details-service figure img[src*="messy-details-finished-document"] {
  background: #fff !important;
  content: url("assets/problem-snapshot-finished.png?v=v5-live-image-fix-pass") !important;
  object-fit: contain !important;
}

/* Legacy deliverable canvas support, updated to PNG so no SVG render appears on live review screens. */
.deliverable-section .deliverable-canvas::before {
  background-color: #fff;
  background-image: url("assets/shop-flow-finished.png?v=v5-live-image-fix-pass");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  border: 1px solid #cbd5e1;
  border-radius: 18px;
  box-shadow: 0 16px 36px rgba(15, 23, 42, .12);
  content: "";
  display: block;
  height: clamp(330px, 36vw, 560px);
  margin: 1rem 1rem .75rem;
}
.deliverable-section .deliverable-canvas::after {
  background: #fff4ea;
  border: 1px solid rgba(200, 95, 40, .20);
  border-radius: 999px;
  color: #8a3a18;
  content: "Rendered flow: messy garage photo input → measurements → staged layout with storage options";
  display: inline-flex;
  font-size: .72rem;
  font-weight: 900;
  margin: 0 1rem 1rem;
  padding: .35rem .65rem;
}