/* =========================================================
   Captivate SEO – Case Study Sections  v1.0.0
   Shared stylesheet for all three widgets.
   ========================================================= */

/* ── Tokens ── */
:root {
	--cap-accent:      #F5C518;
	--cap-black:       #1a1a1a;
	--cap-white:       #ffffff;
	--cap-light-bg:    #f9f9f9;
	--cap-border:      #e5e5e5;
	--cap-text:        #333333;
	--cap-muted:       #666666;
	--cap-radius:      4px;
	--cap-max-w:       960px;
	--cap-results-bg:  #F5C518;
}

/* ── Shared wrapper ── */
.cap-section {
	color:       var(--cap-text);
	line-height: 1.6;
	padding:     0;
	width:       100%;
    background: #FDD32D;
        padding: 0px 0px 40px 0;
}

/* ─────────────────────────────────────
   WIDGET 1: THE PROBLEM
───────────────────────────────────── */

/* Quote band */
.cap-quote-band {
	background:    var(--cap-white);
	text-align:    center;
	padding:       20px 24px 40px;
 }
.cap-quote-text {
	font-size:   2rem;
	font-weight: 700;
	color:       var(--cap-black);
	margin:      0 0 12px;
}
.cap-quote-answer {
	font-size: 20px;
	color:     var(--cap-text);
	margin:    0 0 8px;
}
.cap-quote-sub {
	font-size:  20px;
	color:      var(--cap-muted);
	max-width:  580px;
	margin:     0 auto;
}

/* Business header */
.cap-biz-header {
	text-align: center;
	padding:    48px 24px 20px;
	background: #FDD32D;
}
.cap-biz-name {
	font-size:   1.9rem;
	font-weight: 700;
	color:       var(--cap-black);
	margin:      0 0 6px;
}
.cap-client-label {
	font-size: 20px;
	color:     var(--cap-muted);
	margin:    0;
}

/* Problem box */
.cap-problem-box {
	position:   relative;
	max-width:  var(--cap-max-w);
	margin:     0 auto;
	padding:    40px 32px 48px;
	background: var(--cap-white);
	border:     1px solid var(--cap-border);
	border-top: 4px solid var(--cap-accent);
}
.cap-step-num {
	position:       absolute;
	top:            24px;
	left:           28px;
	font-size:      4.5rem;
	font-weight:    900;
	color:          var(--cap-border);
	line-height:    1;
	user-select:    none;
	pointer-events: none;
}
.cap-problem-inner {
	position: relative;
	z-index:  1;
}
.cap-problem-title {
	font-size:   1.6rem;
	font-weight: 700;
	color:       var(--cap-black);
	margin:      0 0 10px;
}
.cap-problem-intro {
	font-size: 20px;
	color:     var(--cap-text);
	margin:    0 0 20px;
}
.cap-problem-grid {
	display:               grid;
	grid-template-columns: 1fr 1fr;
	gap:                   24px;
}
@media (max-width: 640px) {
	.cap-problem-grid { grid-template-columns: 1fr; }
}
.cap-col-label {
	font-size:   20px;
	font-weight: 700;
	color:       var(--cap-text);
	margin:      0 0 10px;
}
.cap-bullet-list {
	list-style: none;
	margin:     0;
	padding:    0;
}
.cap-bullet-list li {
	display:       flex;
	align-items:   flex-start;
	gap:           8px;
	font-size:     20px;
	color:         var(--cap-text);
	margin-bottom: 8px;
}
.cap-check {
	flex-shrink:     0;
	width:           20px;
	height:          20px;
	background:      var(--cap-accent);
	color:           var(--cap-black);
	border-radius:   50%;
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	font-size:       0.65rem;
	font-weight:     700;
	margin-top:      3px;
}
.cap-right-footer {
	font-size:  20px;
	color:      var(--cap-muted);
	margin:     12px 0 0;
	font-style: italic;
}

/* ─────────────────────────────────────
   WIDGET 2: THE STRATEGY
───────────────────────────────────── */
.cap-strategy {
	background: var(--cap-white);
	padding:    0 24px;
}

 
.cap-strategy-topline    { margin-bottom: 0; }
.cap-strategy-bottomline { margin-top: 0; }

.cap-section-header {
	text-align: center;
	padding:    40px 0 32px;
}
h2.cap-section-title {
	font-size:   2rem;
	font-weight: 700;
	color:       var(--cap-black);
	margin:      0 0 10px;
}
.cap-section-subtitle {
	font-size: 20px;
	color:     var(--cap-muted);
	margin:    0;
}

/* Strategy track — cards + connectors in one flex row */
.cap-strategy-track {
	display:         flex;
	flex-wrap:       nowrap;
	align-items:     stretch;
	justify-content: center;
	max-width:       1100px;
	margin:          0 auto;
	padding-bottom:  40px;
	gap:             0;
}

/* ── Yellow circle connector between cards ── */
.cap-pillar-connector {
	display:         flex;
	align-items:     center;
	justify-content: center;
	flex-shrink:     0;
	width:           10px;
	z-index:         2;
}
.cap-pillar-arrow-circle {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	width:           30px;
	height:          30px;
	background:      var(--cap-accent);
	border-radius:   50%;
	font-size:       28px;
 	color:           var(--cap-black);
	line-height:     1;
	flex-shrink:     0;
}

/* ── White card ── */
.cap-pillar-card {
	flex:          1 1 0;
	min-width:     0;
	background:    var(--cap-white);
	border:        1px solid #e8e8e8;
	border-top:    4px solid var(--cap-accent);
	border-radius: 4px;
	padding:       24px 18px 24px;
	box-shadow:    0 2px 8px rgba(0,0,0,0.06);
}

/* Icon circle inside card */
.cap-pillar-icon-circle {
	width:           70px;
	height:          70px;
	background:      var(--cap-accent);
	border-radius:   50%;
	display:         flex;
	align-items:     center;
	justify-content: center;
	margin-bottom:   16px;
}
.cap-pillar-icon-circle svg {
	width:   34px;
	height:  34px;
	display: block;
}

.cap-pillar-title {
	font-size:   16px;
	font-weight: 700;
	color:       var(--cap-black);
	margin:      0 0 12px;
	line-height: 1.3;
}
.cap-pillar-bullets {
	list-style: none;
	margin:     0;
	padding:    0;
}
.cap-pillar-bullets li {
	display:       flex;
	align-items:   flex-start;
	gap:           6px;
	font-size:     12px;
	color:         var(--cap-text);
	margin-bottom: 8px;
	line-height:   1.4;
}

.cap-check-sm {
	flex-shrink:     0;
	width:           18px;
	height:          18px;
	background:      var(--cap-accent);
	border-radius:   50%;
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	margin-top:      1px;
}
.cap-check-sm svg {
	width:   10px;
	height:  10px;
	display: block;
}

@media (max-width: 900px) {
	.cap-strategy-track   { flex-wrap: wrap; gap: 16px; }
	.cap-pillar-card      { flex: 1 1 calc(50% - 8px); }
	.cap-pillar-connector { display: none; }
}
@media (max-width: 480px) {
	.cap-pillar-card { flex: 1 1 100%; }
}

/* ─────────────────────────────────────
   WIDGET 3: THE RESULTS
───────────────────────────────────── */
:root {
	--cap-results-divider: #1a1a1a;
}

.cap-results {
	background: var(--cap-results-bg, #F5C518);
	padding:    60px 32px;
}

/* Header */
.cap-results-header {
	text-align:    center;
	margin-bottom: 48px;
}
.cap-results h2.cap-section-title {
	color:       var(--cap-black);
	font-size:   2rem;
	font-weight: 700;
	margin:      0 0 8px;
}
.cap-results-sub {
	font-size: 20px;
	color:     var(--cap-black);
	margin:    0;
}

/* Four-column row — NO cards, sits on yellow bg */
.cap-results-row {
	display:         flex;
	align-items:     flex-start;
	justify-content: space-around;
	max-width:       var(--cap-max-w);
	margin:          0 auto;
}

/* Each column */
.cap-result-col {
	flex:       1 1 0;
	text-align: center;
	padding:    0 24px;
}

/* Thin vertical right-border divider (all but last) */
.cap-result-col--divided {
	border-right: 1px solid var(--cap-results-divider);
}

/* White circle with black checkmark */
.cap-result-check {
	width:           52px;
	height:          52px;
	background:      var(--cap-white);
	border-radius:   50%;
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	margin-bottom:   16px;
}
.cap-result-check svg {
	width:   26px;
	height:  26px;
	display: block;
}

/* Large bold stat number */
.cap-result-number {
	font-size:     3rem;
	font-weight:   700;
	color:         var(--cap-black);
	line-height:   1;
	margin-bottom: 8px;
}

/* Label below number */
.cap-result-label {
	font-size:   20px;
	color:       var(--cap-black);
	line-height: 1.4;
}

@media (max-width: 640px) {
	.cap-results-row          { flex-wrap: wrap; }
	.cap-result-col           { flex: 1 1 45%; padding: 16px; }
	.cap-result-col--divided  { border-right: none; border-bottom: 1px solid var(--cap-results-divider); }
}
@media (max-width: 400px) {
	.cap-result-col { flex: 1 1 100%; }
}