/* Vulcan7 Roadmap episode template
   ---------------------------------------------------------------
   Every size and color the template uses is a custom property.
   Refine the UI by editing this block only — nothing below it
   needs touching. */
:root {
	--v7-accent:        #FF4000;
	--v7-accent-hover:  #d63500;
	--v7-ink:           #1A1A1A;
	--v7-dark:          #161616;
	--v7-body:          #3D3D3D;
	--v7-muted:         #5A5A5A;
	--v7-faint:         #8C8783;
	--v7-stamp:         #A5A19C;
	--v7-surface:       #F5F4F2;
	--v7-line:          #E4E2DF;
	--v7-font:          'Montserrat', sans-serif;
	--v7-radius-card:   16px;
	--v7-radius-inner:  12px;
	--v7-transcript-size:   18px;
	--v7-transcript-leading: 1.72;
	--v7-transcript-measure: 54ch;
	--v7-rail-width:    268px;
	--v7-rail-top:      99px;   /* 75px fixed header + 24px breathing room */
	--v7-gap-turn:      24px;
	--v7-gap-chapter:   44px;
}

/* ---- answer summary ---- */
.v7-summary { border-left: 3px solid var(--v7-accent); padding: 2px 0 2px 22px; }
.v7-summary p { margin: 0; font: 500 21px/1.55 var(--v7-font); color: var(--v7-body); max-width: 62ch; }

/* ---- listen pills ---- */
.v7-listen-wrap { display: grid; gap: 12px; }
.v7-listen-heading { font: 800 11px/1 var(--v7-font); letter-spacing: .16em; text-transform: uppercase; color: var(--v7-faint); }
.v7-listen { display: flex; gap: 8px; flex-wrap: wrap; }
.v7-listen-pill { font: 700 14px/1 var(--v7-font); color: var(--v7-muted); padding: 10px 17px; border: 1.5px solid var(--v7-line); border-radius: 999px; text-decoration: none; }
.v7-listen-pill:hover { color: var(--v7-accent); border-color: var(--v7-accent); }

/* ---- takeaways ---- */
.v7-takeaways { list-style: none; counter-reset: v7; margin: 0; padding: 0; }
.v7-takeaways li { counter-increment: v7; display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 16px; padding: 16px 0; border-top: 1px solid var(--v7-line); font: 500 18px/1.55 var(--v7-font); color: var(--v7-body); max-width: 78ch; }
.v7-takeaways li:last-child { border-bottom: 1px solid var(--v7-line); }
.v7-takeaways li::before { content: counter(v7, decimal-leading-zero); font: 700 13px/1.5 var(--v7-font); color: var(--v7-stamp); }

.v7-takeaways-cta { margin-top: 24px; font: 500 17px/1.5 var(--v7-font); }
.v7-takeaways-cta a { font-weight: 700; color: var(--v7-accent); border-bottom: 1px solid rgba(255,64,0,.35); text-decoration: none; }
.v7-takeaways-cta a:hover { color: var(--v7-accent-hover); }

/* ---- script callout ---- */
.v7-script { border: 1px solid var(--v7-dark); border-radius: var(--v7-radius-inner); overflow: hidden; }
.v7-script-head { background: var(--v7-dark); padding: 22px 34px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.v7-script-kicker { display: block; font: 800 11px/1 var(--v7-font); letter-spacing: .16em; text-transform: uppercase; color: var(--v7-accent); margin-bottom: 6px; }
.v7-script-head h3 { margin: 0; font: 700 22px/1.25 var(--v7-font); color: #fff; }
.v7-copy { border: 1.5px solid rgba(255,255,255,.28); background: transparent; color: #fff; font: 700 14px/1 var(--v7-font); padding: 12px 22px; border-radius: 999px; cursor: pointer; white-space: nowrap; }
.v7-copy:hover { background: var(--v7-accent); border-color: var(--v7-accent); }
.v7-script-body { padding: 34px; background: #fff; display: grid; gap: 22px; }
.v7-exchange { display: grid; grid-template-columns: 150px minmax(0,1fr); gap: 24px; align-items: start; }
.v7-exchange span { font: 700 13px/1.4 var(--v7-font); letter-spacing: .08em; text-transform: uppercase; color: var(--v7-faint); padding-top: 4px; }
.v7-exchange.is-agent span { color: var(--v7-accent); }
.v7-exchange p { margin: 0; font: 500 19px/1.6 var(--v7-font); color: var(--v7-muted); max-width: 49ch; }
.v7-exchange.is-agent p { color: var(--v7-ink); }

/* ---- chapter rail ---- */
.v7-rail { display: grid; }
/* Stickiness lives on the column content so anything placed below the rail
   module (e.g. the global promo card) sticks and scrolls with it. */
.fl-col:has(.v7-rail) .fl-col-content { position: sticky; top: var(--v7-rail-top); }
.v7-rail-head { display: grid; gap: 10px; padding-bottom: 16px; margin-bottom: 12px; border-bottom: 1px solid var(--v7-line); }
.v7-rail-box { border: 1px solid var(--v7-line); border-radius: var(--v7-radius-inner); background: #fff; overflow: hidden; }
.v7-rail-box summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 14px 16px; cursor: pointer; }
.v7-rail-box summary::-webkit-details-marker { display: none; }
.v7-rail-box-label { font: 800 11px/1 var(--v7-font); letter-spacing: .16em; text-transform: uppercase; color: var(--v7-faint); flex: 0 0 auto; }
.v7-rail-current { font: 700 13px/1.3 var(--v7-font); color: var(--v7-ink); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v7-rail-box[open] .v7-rail-current { visibility: hidden; }
.v7-rail-chevron { flex: 0 0 auto; width: 8px; height: 8px; border-right: 2px solid var(--v7-faint); border-bottom: 2px solid var(--v7-faint); transform: rotate(45deg); transition: transform .2s; margin-top: -3px; }
.v7-rail-box[open] .v7-rail-chevron { transform: rotate(-135deg); margin-top: 3px; }
.v7-rail-list { max-height: min(52vh, 480px); overflow-y: auto; border-top: 1px solid var(--v7-line); padding: 6px 8px 8px; }
.v7-rail a[data-rail] { display: grid; grid-template-columns: 52px minmax(0,1fr); gap: 12px; padding: 11px 12px; border-left: 2px solid var(--v7-line); text-decoration: none; transition: background .18s, border-color .18s; }
.v7-rail a[data-rail]:hover { background: var(--v7-surface); }
.v7-rail-time { font: 700 13px/1.45 var(--v7-font); color: var(--v7-stamp); }
.v7-rail-title { font: 500 15px/1.45 var(--v7-font); color: var(--v7-muted); }
.v7-rail a.is-active { border-left-color: var(--v7-accent); background: var(--v7-surface); }
.v7-rail a.is-active .v7-rail-time { color: var(--v7-accent); }
.v7-rail a.is-active .v7-rail-title { color: var(--v7-ink); font-weight: 700; }

.v7-rail-progress-label { font: 700 11px/1 var(--v7-font); letter-spacing: .12em; text-transform: uppercase; color: var(--v7-stamp); }
.v7-rail-bar { height: 3px; background: var(--v7-line); border-radius: 2px; overflow: hidden; }
.v7-rail-fill { display: block; width: 0; height: 3px; background: var(--v7-accent); transition: width .3s; }
.v7-rail-card { margin-top: 16px; background: var(--v7-dark); border-radius: var(--v7-radius-inner); padding: 20px; display: grid; gap: 10px; }
.v7-rail-card-kicker { font: 800 10px/1 var(--v7-font); letter-spacing: .16em; text-transform: uppercase; color: var(--v7-accent); }
.v7-rail-card-h { font: 800 16px/1.3 var(--v7-font); color: #fff; }
.v7-rail-card-p { font: 500 13px/1.5 var(--v7-font); color: #BFBBB6; }
.v7-rail-card-btn { margin-top: 4px; background: var(--v7-accent); color: #fff; font: 800 12px/1 var(--v7-font); letter-spacing: .05em; text-transform: uppercase; padding: 13px 18px; border-radius: 999px; text-align: center; text-decoration: none; }
.v7-rail-card-btn:hover { background: var(--v7-accent-hover); color: #fff; }
.v7-rail-top { display: inline-block; font: 700 14px/1 var(--v7-font); color: var(--v7-muted); text-decoration: none; margin-top: 16px; }


/* ---- sticky rail inside Beaver Builder columns ----
   BB floats columns by default, so the rail's column collapses to its own
   height and sticky has no room to travel. Flex the column group, stretch
   the rail column, and pass full height down to the sticky nav. */
.fl-col-group:has(.v7-rail) { display: flex; align-items: stretch; }
.fl-col-group:has(.v7-rail) .fl-col { float: none; }

@media (max-width: 1023px) {
	.fl-col-group:has(.v7-rail) { display: block; }
}

/* ---- transcript ---- */
.v7-transcript { max-width: var(--v7-transcript-measure); }
.v7-transcript .v7-chapter, .v7-transcript h2 { margin: var(--v7-gap-chapter) 0 20px; display: inline-block; font: 800 15px/1.3 var(--v7-font); letter-spacing: .1em; text-transform: uppercase; color: var(--v7-ink); padding-bottom: 12px; border-bottom: 2px solid var(--v7-accent); scroll-margin-top: calc(var(--v7-rail-top) + 8px); }
.v7-transcript > :first-child { margin-top: 0; }
.v7-turn { margin: 0 0 var(--v7-gap-turn); }
.v7-speaker { margin: 0 0 8px; font: 700 13px/1 var(--v7-font); letter-spacing: .08em; text-transform: uppercase; color: var(--v7-ink); }
.v7-speaker span { color: var(--v7-stamp); font-weight: 500; margin-left: 8px; }
.v7-line { margin: 0 0 12px; font: 500 var(--v7-transcript-size)/var(--v7-transcript-leading) var(--v7-font); color: var(--v7-body); }
.v7-cont { font: 700 13px/1 var(--v7-font); color: var(--v7-stamp); margin-right: 8px; }
/* WYSIWYG fallback markup (strong = speaker, em = timestamp) */
.v7-transcript > p { margin: 0 0 var(--v7-gap-turn); font: 500 var(--v7-transcript-size)/var(--v7-transcript-leading) var(--v7-font); color: var(--v7-body); }
.v7-transcript > p > strong { display: inline-block; font: 700 13px/1.6 var(--v7-font); letter-spacing: .08em; text-transform: uppercase; color: var(--v7-ink); }
.v7-transcript > p > em { font: 700 13px/1.6 var(--v7-font); font-style: normal; color: var(--v7-stamp); margin-left: 6px; }

/* ---- FAQ ---- */
.v7-faq { border-bottom: 1px solid var(--v7-line); max-width: 860px; }
.v7-faq-item { border-top: 1px solid var(--v7-line); }
.v7-faq-item summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 0; cursor: pointer; font: 700 20px/1.35 var(--v7-font); color: var(--v7-ink); }
.v7-faq-item summary::-webkit-details-marker { display: none; }
.v7-faq-icon::before { content: '+'; font: 500 26px/1 var(--v7-font); color: var(--v7-faint); transition: transform .25s; display: inline-block; }
.v7-faq-item[open] .v7-faq-icon::before { transform: rotate(45deg); }
.v7-faq-item p { margin: 0 0 24px; font: 500 18px/1.65 var(--v7-font); color: var(--v7-body); max-width: 70ch; }

.v7-faq-plain { padding: 12px 0; }
.v7-faq-plain p { margin: 0 0 16px; font: 500 18px/1.65 var(--v7-font); color: var(--v7-body); max-width: 70ch; }

/* ---- video ---- */
.v7-video { position: relative; aspect-ratio: 16/9; background: var(--v7-dark); border-radius: var(--v7-radius-inner); overflow: hidden; }
.v7-video img { width: 100%; height: 100%; object-fit: cover; opacity: .82; display: block; }
.v7-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.v7-video-play { position: absolute; inset: 0; width: 100%; border: 0; background: linear-gradient(180deg, rgba(22,22,22,.15), rgba(22,22,22,.6)); cursor: pointer; }
.v7-video-play span { display: block; width: 84px; height: 84px; margin: 0 auto; border-radius: 50%; background: var(--v7-accent); box-shadow: 0 10px 40px rgba(22,22,22,.45); position: relative; }
.v7-video-play span::before { content: ''; position: absolute; left: 34px; top: 27px; border-left: 24px solid #fff; border-top: 15px solid transparent; border-bottom: 15px solid transparent; }
.v7-video-play:hover span { background: var(--v7-accent-hover); }

/* ---- related ---- */
.v7-related { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 26px; }
.v7-related-card { display: grid; gap: 10px; text-decoration: none; color: var(--v7-ink); }
.v7-related-card:hover .v7-related-title { color: var(--v7-accent-hover); }
.v7-related-card img, .v7-related-thumb-empty { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: var(--v7-radius-inner); background: var(--v7-surface); display: block; }
.v7-related-num { font: 700 11px/1 var(--v7-font); letter-spacing: .14em; text-transform: uppercase; color: var(--v7-faint); }
.v7-related-title { font: 700 19px/1.3 var(--v7-font); transition: color .15s; }

/* ---- responsive ---- */
@media (max-width: 1023px) {
	.fl-col:has(.v7-rail) .fl-col-content { position: static; }
	.v7-rail { margin-bottom: 32px; }
	.v7-rail-head { display: none; }
	.v7-exchange { grid-template-columns: 1fr; gap: 5px; border-left: 2px solid var(--v7-line); padding-left: 12px; }
	.v7-exchange.is-agent { border-left-color: var(--v7-accent); }
	.v7-script-head { padding: 16px 20px; }
	.v7-script-body { padding: 18px; }
	.v7-copy { width: 100%; min-height: 48px; }
	.v7-related { grid-template-columns: 1fr; }
	.v7-summary p { font-size: 17px; }
}