/* =========================================================
   One system: every content block uses the same raised card.
   Loaded last on both pages so it wins over older section styles.
   ========================================================= */
:root {
  --card-bg: linear-gradient(180deg, #34302c, #302D2A);
  --card-border: 1px solid rgba(255, 255, 255, .09);
  --card-radius: 24px;
  --card-shadow: 0 18px 40px rgba(0, 0, 0, .28);
}

/* the shared card */
.dl-before, .dl-after, .path, .sc-aside, .sc-form, .sc-score, .sc-gate, .sc-report,
.faq details, .fit > div, .scope > div, .founding, .form-aside, form.project,
.spec-card, .tl-card, .pc-card, .sx-card, .excluded, .form-status, .pc-sum > div {
  background: var(--card-bg);
  border: var(--card-border);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
}
/* accent variants keep their bronze edge */
.sc-gate, .tk-card, .sx-card.good, .pc-sum .good { border-color: rgba(194, 156, 106, .55); }

/* ---------- Day one: before / day / after ---------- */
.dl-cols { gap: 22px; align-items: stretch; }
.dl-before, .dl-after { padding: 26px; text-align: left; align-items: stretch; }
.dl-before ul, .dl-after ul { border-top: 0; display: grid; gap: 8px; }
.dl-before li, .dl-after li { border: 0; padding: 0 0 0 30px; position: relative; font-size: 15px; }
.dl-before li::before, .dl-after li::before { content: ""; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border-radius: 50%; }
.dl-before li::before { background: #4FC97A url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%2310241a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; }
.dl-after li::before { background: #3a3632 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='2.4' fill='%23C29C6A'/%3E%3C/svg%3E") center / 14px no-repeat; }
.dl-day { justify-content: center; padding: 0; }
.dl-day .dl-big { padding: 14px 20px; border-radius: 18px; background: var(--limestone); color: #1a1816; font-weight: 600; transform: rotate(-1.5deg);
  box-shadow: 0 0 50px rgba(194, 156, 106, .35), 0 12px 28px rgba(0, 0, 0, .35); }
.path { padding: 28px; }

/* ---------- Scorecard ---------- */
.sc-aside { padding: 26px; top: 110px; }
.sc-form { padding: 6px 26px 26px; border-top: var(--card-border); }
.sc-q:last-of-type { border-bottom: 0; }
.sc-progress { left: 26px; right: 26px; top: 0; }
.sc-report { padding: 26px; }

/* ---------- FAQ: rounded rows ---------- */
.faq { border-top: 0; display: grid; gap: 12px; max-width: 900px; margin: 0 auto; }
.faq details { padding: 0 26px; border-bottom: var(--card-border); transition: border-color .3s var(--ease); }
.faq details[open] { border-color: rgba(194, 156, 106, .55); }
.faq summary { padding-block: 22px; font-weight: 600; }
.faq summary::after { width: 28px; height: 28px; margin-top: 0; flex: none; border: 0; border-radius: 50%; transform: none;
  background: var(--limestone) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 3v10M3 8h10' stroke='%231a1816' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 12px no-repeat; transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }

/* ---------- Offer page ---------- */
.fit { gap: 22px; }
.fit > div { padding: 28px; }
.scope { border-top: 0; gap: 22px; }
.scope > div, .scope > div + div { padding: 26px; border-left: var(--card-border); }
.excluded { margin-top: 22px; }
.form-wrap { align-items: start; }
.form-aside { padding: 28px; }
form.project { padding: 28px; }
.founding { border-color: rgba(194, 156, 106, .55); }

/* ---------- consistent card motion ---------- */
.path, .fit > div, .scope > div, .dl-before, .dl-after { transition: transform .4s var(--ease), border-color .3s var(--ease); }
.path:hover, .fit > div:hover, .scope > div:hover { transform: translateY(-4px); border-color: rgba(194, 156, 106, .45); }

@media (max-width: 860px) {
  .sc-aside { position: static; }
  .faq details { padding: 0 18px; }
  .scope > div, .scope > div + div { border-top: var(--card-border); }
}

/* ---------- in-section call to action (every other section) ---------- */
.sec-cta { max-width: 1120px; margin: var(--s6) auto 0; display: flex; align-items: center; justify-content: space-between; gap: 20px 32px; flex-wrap: wrap;
  padding: 22px 26px; border-radius: var(--card-radius); background: var(--card-bg); border: 1px solid rgba(194, 156, 106, .55); box-shadow: var(--card-shadow);
  position: relative; overflow: hidden; }
.sec-cta::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 120% at 0% 50%, rgba(194, 156, 106, .16), transparent 70%); pointer-events: none; }
.sec-cta > * { position: relative; }
.sc-line { font: 600 clamp(20px, 2vw, 26px)/1.2 var(--display); letter-spacing: -.02em; }
.sc-sub { color: var(--stone); font-size: 15px; margin-top: 4px; }
.sec-cta .hero-actions { flex-wrap: wrap; }
@media (max-width: 600px) {
  .sec-cta { padding: 20px; }
  .sec-cta .hero-actions, .sec-cta .btn { width: 100%; }
}

/* slide-in animations must never widen the page */
main > section { overflow-x: clip; }