/* Team of Monkeys: B2B Reddit Ads agency pages (home, pricing, about) */

.agency-band {
	padding: 110px 50px;
	background: var(--bg-section);
	border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.agency-inner {
	max-width: 1200px;
	margin: 0 auto;
}

.agency-eyebrow {
	display: block;
	color: var(--accent);
	text-transform: uppercase;
	letter-spacing: 3px;
	font-size: 12px;
	margin-bottom: 18px;
}

.agency-band h2 {
	font-size: 42px;
	letter-spacing: -1.5px;
	margin-bottom: 20px;
	max-width: 820px;
}

.agency-band p.agency-lead {
	color: var(--text-muted);
	font-size: 17px;
	line-height: 1.85;
	max-width: 820px;
	margin-bottom: 22px;
}

/* Industry cards */
.industry-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 20px;
	margin-top: 45px;
}

.industry-card {
	padding: 28px 26px;
	background: rgba(255, 255, 255, 0.02);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 8px;
	transition: border-color 0.3s ease, transform 0.3s ease, background 0.3s ease;
}

.industry-card:hover {
	border-color: var(--accent);
	background: rgba(255, 255, 255, 0.05);
	transform: translateY(-4px);
}

.industry-card h3 {
	font-size: 19px;
	font-weight: 700;
	margin-bottom: 10px;
	color: var(--text-light);
}

.industry-card p {
	color: var(--text-muted);
	font-size: 14.5px;
	line-height: 1.7;
}

/* Numbered steps */
.steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 24px;
	margin-top: 45px;
}

.step {
	padding: 28px 26px;
	background: rgba(255, 255, 255, 0.02);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 8px;
}

.step-num {
	font-family: 'Courier New', Courier, monospace;
	font-size: 12px;
	letter-spacing: 2.5px;
	color: var(--accent);
	text-transform: uppercase;
	margin-bottom: 14px;
}

.step h3 {
	font-size: 18px;
	font-weight: 700;
	margin-bottom: 10px;
	color: var(--text-light);
}

.step p {
	color: var(--text-muted);
	font-size: 14.5px;
	line-height: 1.7;
}

/* Closing call to action */
.cta-band {
	padding: 100px 50px;
	background: linear-gradient(135deg, rgba(255, 51, 102, 0.14), rgba(255, 51, 102, 0.03)), var(--bg-section);
	border-top: 1px solid rgba(255, 255, 255, 0.06);
	text-align: center;
}

.cta-band h2 {
	font-size: 40px;
	letter-spacing: -1.5px;
	margin-bottom: 18px;
}

.cta-band p {
	color: var(--text-muted);
	font-size: 17px;
	line-height: 1.8;
	max-width: 640px;
	margin: 0 auto 36px;
}

/* Pricing plans */
.plan-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 28px;
	margin-top: 45px;
}

.plan-stage {
	margin-top: 45px;
}

.plan-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 26px;
}

.plan-price {
	text-align: right;
	flex-shrink: 0;
}

.plan-card {
	display: block;
	width: 100%;
	padding: 38px 34px;
	background: rgba(255, 255, 255, 0.02);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 10px;
}

.plan-card.is-featured {
	border-color: var(--accent);
	background: rgba(255, 51, 102, 0.05);
}

.plan-name {
	font-size: 22px;
	font-weight: 700;
	margin-bottom: 8px;
	color: var(--text-light);
}

.plan-tagline {
	color: var(--text-muted);
	font-size: 14px;
	line-height: 1.7;
	max-width: 460px;
}

.plan-fee {
	font-size: 56px;
	font-weight: 900;
	line-height: 1;
	color: var(--accent);
	margin-bottom: 10px;
}

.plan-fee-unit {
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 2px;
	color: var(--text-muted);
}

.plan-equiv {
	padding: 16px 18px;
	background: rgba(255, 255, 255, 0.03);
	border-left: 3px solid var(--accent);
	font-size: 14.5px;
	line-height: 1.7;
	color: #cfcfcf;
	margin-bottom: 26px;
}

/* The cost split as a bar graph: two labelled bars measured against a shared
   0-100% axis with gridlines, so each bar's length can actually be read off the
   scale. One grid owns the geometry, so the bars and the axis always measure the
   same width. Same blue and red as the chart further down the page. */
/* The right-hand column keeps a reserved strip for the value labels, so a bar
   that reaches 100% still has room for its number and nothing ever overlaps. */
.split-graph {
	display: grid;
	grid-template-columns: 112px 1fr 116px;
	column-gap: 14px;
	row-gap: 12px;
	align-items: center;
}

.sg-row {
	display: contents;
}

.sg-label {
	font-size: 12.5px;
	line-height: 1.35;
	color: #ffffff;
	text-align: right;
}

.sg-label span {
	display: block;
	font-size: 11.5px;
	color: #898781;
}

/* The plot area carries the gridlines, so every bar sits on the same scale. A
   bar's width is its exact percentage of this box, so nothing may share the
   box's width: the value label is positioned over the plot, not laid out in it. */
.sg-plot {
	position: relative;
	height: 22px;
	background-image: -webkit-linear-gradient(left, rgba(255,255,255,0.09) 1px, transparent 1px);
	background-image: linear-gradient(to right, rgba(255,255,255,0.09) 1px, transparent 1px);
	background-size: 25% 100%;
	background-position: 0 0;
}

.sg-bar {
	height: 100%;
	border-radius: 0 3px 3px 0;
}

.sg-spend { background: #3987e5; }
.sg-fee { background: #ff3366; }

/* The value has its own reserved column to the right of the plot, so it never
   overlaps a label and never steals width from the bar's measurement. */
.sg-value {
	font-size: 12.5px;
	font-weight: 700;
	color: #ffffff;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	text-align: left;
}

/* The axis: a baseline rule under the plot with its ticks centred on the value
   each one marks, matching the axis under the big chart. */
.sg-axis-row .sg-ticks {
	position: relative;
	height: 15px;
	border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.sg-tick {
	position: absolute;
	top: 3px;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	font-size: 11px;
	color: #898781;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.sg-tick:first-child {
	-webkit-transform: none;
	transform: none;
}

.sg-tick:last-child {
	-webkit-transform: translateX(-100%);
	transform: translateX(-100%);
}

.split-foot {
	margin: 14px 0 0 0;
	padding-top: 13px;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	font-size: 13px;
	color: #898781;
}

.plan-list {
	list-style: none;
	margin: 0;
}

.plan-list li {
	color: var(--text-muted);
	font-size: 14.5px;
	line-height: 1.7;
	padding: 9px 0 9px 24px;
	position: relative;
}

.plan-list li::before {
	content: '\2713';
	position: absolute;
	left: 0;
	color: var(--accent);
}

/* Worked example strip */
.math-strip {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 18px;
	margin: 30px 0 10px;
}

.math-cell {
	padding: 22px 20px;
	background: #0d0d0d;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 8px;
}

.math-label {
	font-family: 'Courier New', Courier, monospace;
	font-size: 11.5px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--accent);
	margin-bottom: 10px;
}

.math-value {
	font-size: 28px;
	font-weight: 700;
	color: var(--text-light);
	margin-bottom: 6px;
}

.math-note {
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--text-muted);
}

/* ── Chart: where a total budget goes ── */
.chart-card {
	background: #0d0d0d;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 10px;
	padding: 34px 32px 30px;
	margin-top: 45px;
	color: #ffffff;
}

.chart-card h3 {
	font-size: 22px;
	font-weight: 700;
	margin-bottom: 8px;
	color: #ffffff;
}

.chart-sub {
	font-size: 14px;
	line-height: 1.7;
	color: #c3c2b7;
	margin-bottom: 24px;
}

.chart-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 22px;
	margin-bottom: 28px;
}

.legend-item {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 13.5px;
	color: #c3c2b7;
}

.legend-swatch {
	width: 14px;
	height: 14px;
	border-radius: 2px;
	flex-shrink: 0;
}

.swatch-spend { background: #3987e5; }
.swatch-fee { background: #ff3366; }

/* The bar, the equation line and the axis all measure the same thing, so they
   share ONE grid rather than each declaring its own copy of the geometry. The
   wrappers are display:contents so their children become rows of this grid
   directly. Changing the column width here moves all three together and they
   cannot drift out of alignment at any width. */
.chart-plot {
	display: grid;
	grid-template-columns: 148px 1fr;
	column-gap: 18px;
	align-items: center;
}

.bar-row,
.chart-equation,
.chart-axis {
	display: contents;
}

.bar-track {
	margin-bottom: 26px;
}

.bar-label {
	font-size: 13.5px;
	line-height: 1.5;
	color: #ffffff;
	text-align: right;
}

.bar-label span {
	display: block;
	font-size: 12px;
	color: #898781;
	margin-top: 3px;
}

/* The bar is a measuring instrument: a segment's width has to be exactly its
   share of the total. No gap and no flex-shrink, because either one steals
   width from the percentages and slides the join off the axis below. The
   segments are separated by a drawn border instead, which costs no width. */
.bar-track {
	display: flex;
	height: 24px;
	border-radius: 4px;
	overflow: hidden;
}

.seg {
	height: 100%;
	display: flex;
	align-items: center;
	padding: 0 9px;
	cursor: default;
	-webkit-box-flex: 0;
	-ms-flex: 0 0 auto;
	flex: 0 0 auto;
	min-width: 0;
	overflow: hidden;
}

.seg + .seg {
	-webkit-box-shadow: inset 1px 0 0 #0d0d0d;
	box-shadow: inset 1px 0 0 #0d0d0d;
}

.seg:focus {
	outline: 2px solid #ffffff;
	outline-offset: 2px;
}

.seg-spend { background: #3987e5; }
.seg-fee { background: #ff3366; }

.seg-label {
	font-size: 12px;
	font-weight: 700;
	color: #0b0b0b;
	white-space: nowrap;
}

/* The equivalence spelled out under the bar. It is a row of the .chart-plot
   grid, so it always begins exactly where the bar begins. */
.equation-text {
	margin: 0 0 18px 0;
	font-size: 13px;
	color: #c3c2b7;
	text-align: left;
}

.axis-ticks {
	position: relative;
	height: 20px;
	border-top: 1px solid #383835;
	padding-top: 6px;
}

.axis-tick {
	position: absolute;
	top: 6px;
	font-size: 11.5px;
	font-variant-numeric: tabular-nums;
	color: #898781;
	transform: translateX(-50%);
	white-space: nowrap;
}

/* Every tick is centred on the value it marks, so the whole axis uses one
   convention. The two end ticks would overhang the plot, so they are pulled
   back to sit flush with the ends of the bar they measure. */
.axis-tick:first-child {
	-webkit-transform: none;
	transform: none;
}

.axis-tick:last-child {
	-webkit-transform: translateX(-100%);
	transform: translateX(-100%);
}

/* A hairline dropped from each tick to the underside of the bar, so the eye can
   check the segment join against the scale instead of guessing at it. */
.axis-tick::before {
	content: "";
	position: absolute;
	left: 50%;
	top: -7px;
	width: 1px;
	height: 6px;
	background: #383835;
}

.axis-tick:first-child::before { left: 0; }
.axis-tick:last-child::before { left: auto; right: 0; }

.chart-tip {
	position: fixed;
	z-index: 2000;
	pointer-events: none;
	background: #000000;
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 6px;
	padding: 10px 13px;
	font-size: 13px;
	line-height: 1.5;
	color: #ffffff;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
	opacity: 0;
	transition: opacity 0.15s ease;
	max-width: 260px;
}

.chart-tip.is-visible { opacity: 1; }

.chart-tip .tip-value {
	font-size: 16px;
	font-weight: 700;
	display: block;
}

.chart-tip .tip-name {
	color: #c3c2b7;
	font-size: 12.5px;
}

/* Table twin. The table is wider than a phone, so it scrolls sideways. Without
   a cue the cut-off right edge just looks like missing data, so a shadow is
   painted at whichever edge still has content beyond it. It is attached to the
   scrolling box, so it tracks the scroll position on its own. */
.table-scroll {
	overflow-x: auto;
	max-width: 100%;
	background:
		linear-gradient(to right, #0d0d0d 30%, rgba(13, 13, 13, 0)) left center,
		linear-gradient(to left, #0d0d0d 30%, rgba(13, 13, 13, 0)) right center,
		radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0)) left center,
		radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0)) right center;
	background-repeat: no-repeat;
	background-size: 42px 100%, 42px 100%, 16px 100%, 16px 100%;
	background-attachment: local, local, scroll, scroll;
}

.table-view {
	width: 100%;
	border-collapse: collapse;
	margin-top: 34px;
	font-size: 14px;
}

.table-view caption {
	text-align: left;
	font-size: 13px;
	color: #898781;
	padding-bottom: 12px;
}

.table-view th,
.table-view td {
	text-align: right;
	padding: 12px 14px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	font-variant-numeric: tabular-nums;
}

.table-view th:first-child,
.table-view td:first-child {
	text-align: left;
	font-variant-numeric: normal;
}

.table-view thead th {
	color: #ffffff;
	font-weight: 700;
	border-bottom-color: #383835;
}

.table-view tbody td {
	color: #c3c2b7;
}

.pricing-note {
	color: var(--text-muted);
	font-size: 14.5px;
	line-height: 1.8;
	max-width: 820px;
	margin-top: 34px;
}

@media (max-width: 900px) {
	.agency-band,
	.cta-band {
		padding: 70px 24px;
	}

	/* The base three-column rule is declared after the template's own mobile
	   override, so it wins there and the grid never collapses. Restate it here. */
	.feature-highlights {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.agency-band h2,
	.cta-band h2 {
		font-size: 31px;
	}

	.chart-card {
		padding: 26px 20px 24px;
	}

	.plan-card {
		padding: 30px 24px;
	}

	.plan-price {
		text-align: left;
	}

	.plan-fee {
		font-size: 46px;
	}

	.chart-plot {
		grid-template-columns: 108px 1fr;
		column-gap: 12px;
	}
}

@media (max-width: 760px) {
	/* The $8,000 label still fits in the wide blue segment. Only the narrow fee
	   segment's label is dropped, so the bar never loses its numbers entirely. */
	.seg-fee .seg-label {
		display: none;
	}

	/* Drop the quarter ticks so the remaining labels never collide */
	.axis-tick.tick-quarter {
		display: none;
	}

	.table-view {
		min-width: 520px;
	}
}

/* On a phone the fixed label column left the bar about 180px wide, so the one
   element that carries the meaning became the smallest thing in the card, and
   the axis underneath it measured a different width than the bar above it.
   Below this width the label moves above the bar and both the bar and its axis
   take the full width of the card, so they share one geometry again. */
@media (max-width: 620px) {
	/* One column: the label stacks above the bar, and the bar, the equation and
	   the axis each span the full card width, so they still share a geometry. */
	.chart-plot {
		grid-template-columns: 1fr;
	}

	.equation-spacer,
	.chart-axis > div:first-child {
		display: none;
	}

	.bar-label {
		text-align: left;
		margin-bottom: 9px;
	}

	.bar-label span {
		display: inline;
		margin-top: 0;
	}

	.bar-label span::before {
		content: " (";
	}

	.bar-label span::after {
		content: ")";
	}

	/* The seg labels fit again now that the bar spans the card. */
	.seg-label {
		display: block;
	}

	.seg-fee .seg-label {
		display: none;
	}

	.table-view {
		min-width: 460px;
	}
}

/* Rotating hero phrase. The phrases differ in length, so the line is given a
   min-height and the span is inline-block to keep the layout from jumping. */
.hero-rotate {
	display: inline-block;
	-webkit-transition: opacity 0.4s ease;
	transition: opacity 0.4s ease;
}

.hero-rotate.is-out {
	opacity: 0;
}

/* Language switcher pill in the navigation. Shared by the English pages and
   the Hebrew pages under /he/, so it lives here rather than in he/rtl.css. */
.lang-switch {
	display: inline-block;
	padding: 6px 14px;
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: 40px;
	font-size: 0.78rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #fff;
	text-decoration: none;
	-webkit-transition: border-color 0.25s ease, color 0.25s ease;
	transition: border-color 0.25s ease, color 0.25s ease;
}

.lang-switch:hover,
.lang-switch:focus {
	border-color: #ff3366;
	color: #ff3366;
}