/* ============================================================================
   front-page.css

   Only the home page loads this. front-page.php prints a <link> to it;
   nothing else on the site reads it, and style.css does not know it
   exists.

   The `.fp-*` blocks are the home page's own: the screenshot frames, the
   hero, the step list, the beta offer box, and the team columns.

   The `.fp-app*` blocks in sections 2 to 6 are DEAD. They drew a hand
   built copy of the application before the screenshots replaced it on
   2026-09-01. Nothing on the page uses them now. They are left here
   rather than deleted because removing 400 lines of CSS deserves its own
   pass, not a footnote to a copy change.

   Every colour is a token from style.css, so light mode and dark mode both
   work with no second palette here.
   ============================================================================ */


/* ============================================================
   1. SHARED HELPERS
   ============================================================ */

.fp-mono {
	font-family: var(--font-mono);
}

.fp-lede-tight {
	color: var(--color-text-muted);
	font-size: var(--fs-sm);
	line-height: var(--lh-normal);
	max-width: 42rem;
}

.fp-note {
	color: var(--color-text-faint);
	font-family: var(--font-mono);
	font-size: var(--fs-2xs);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
}

.fp-center {
	text-align: center;
}

.fp-mt-5 { margin-top: var(--space-5); }
.fp-mt-6 { margin-top: var(--space-6); }
.fp-mb-5 { margin-bottom: var(--space-5); }
.fp-mb-6 { margin-bottom: var(--space-6); }


/* ============================================================
   2. THE APPLICATION WINDOW

   .fp-app is the frame. .fp-app-bar is the title bar with the three
   dots and the file label, the same bar .panel-titlebar draws in
   style.css. .fp-app-crumbs is the breadcrumb the real pages print
   under the top bar, and .fp-app-tabs is the tab strip under the
   page title.
   ============================================================ */

.fp-app {
	background: var(--color-surface);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-md);
	overflow: hidden;
	box-shadow: var(--shadow-card);
}

.fp-app-bar {
	align-items: center;
	background: var(--color-bg-alt);
	border-bottom: var(--border-width) solid var(--color-border);
	display: flex;
	gap: var(--space-3);
	padding: var(--space-2) var(--space-3);
}

.fp-app-dots {
	display: flex;
	gap: 5px;
}

.fp-app-dots span {
	background: var(--color-border-strong);
	border-radius: 50%;
	display: block;
	height: 8px;
	width: 8px;
}

.fp-app-label {
	color: var(--color-text-faint);
	font-family: var(--font-mono);
	font-size: var(--fs-2xs);
	letter-spacing: 0.04em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.fp-app-head {
	border-bottom: var(--border-width) solid var(--color-border);
	padding: var(--space-4) var(--space-4) 0;
}

.fp-app-crumbs {
	align-items: center;
	color: var(--color-text-faint);
	display: flex;
	flex-wrap: wrap;
	font-size: var(--fs-2xs);
	gap: var(--space-2);
	letter-spacing: 0.02em;
}

.fp-app-crumbs .sep {
	color: var(--color-border-strong);
}

.fp-app-crumbs .sec {
	align-items: center;
	color: var(--color-accent);
	display: inline-flex;
	font-weight: 600;
	gap: 5px;
}

.fp-app-crumbs .cur {
	color: var(--color-text);
	font-weight: 600;
}

.fp-app-title {
	color: var(--color-text);
	font-size: var(--fs-md);
	font-weight: 650;
	letter-spacing: -0.01em;
	margin: var(--space-2) 0 var(--space-1);
}

.fp-app-sub {
	color: var(--color-text-muted);
	font-size: var(--fs-xs);
	line-height: var(--lh-snug);
	margin: 0 0 var(--space-3);
	max-width: 46rem;
}

.fp-app-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
}

.fp-app-tabs span {
	border-bottom: var(--border-width-strong) solid transparent;
	color: var(--color-text-faint);
	font-size: var(--fs-xs);
	padding-bottom: var(--space-2);
	white-space: nowrap;
}

.fp-app-tabs span.is-on {
	border-bottom-color: var(--color-accent);
	color: var(--color-text);
	font-weight: 600;
}

.fp-app-body {
	background: var(--color-bg-alt);
	padding: var(--space-4);
}

.fp-app-body.flush {
	padding: 0;
}


/* ============================================================
   3. CARD, GRID TABLE, ENTITY BADGE

   The three components every report page in the application is
   built from.
   ============================================================ */

.fp-card {
	background: var(--color-surface);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-sm);
	overflow: hidden;
}

.fp-card + .fp-card {
	margin-top: var(--space-3);
}

.fp-card-head {
	align-items: baseline;
	background: var(--color-bg-alt);
	border-bottom: var(--border-width) solid var(--color-border);
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2) var(--space-3);
	padding: var(--space-2) var(--space-3);
}

.fp-card-title {
	color: var(--color-text);
	font-size: var(--fs-xs);
	font-weight: 650;
}

.fp-card-note {
	color: var(--color-text-faint);
	font-size: var(--fs-2xs);
	margin-left: auto;
}

.fp-card-body {
	padding: var(--space-3);
}

.fp-card-body.flush {
	padding: 0;
}

.fp-tbl-scroll {
	overflow-x: auto;
}

table.fp-grid {
	border-collapse: collapse;
	font-size: var(--fs-xs);
	width: 100%;
}

table.fp-grid th,
table.fp-grid td {
	border-bottom: var(--border-width) solid var(--color-border);
	padding: 6px var(--space-3);
	text-align: left;
	white-space: nowrap;
}

table.fp-grid th {
	color: var(--color-text-faint);
	font-size: var(--fs-2xs);
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

table.fp-grid td {
	color: var(--color-text);
}

table.fp-grid tbody tr:last-child td {
	border-bottom: 0;
}

table.fp-grid .num {
	font-family: var(--font-mono);
	font-variant-numeric: tabular-nums;
	text-align: right;
}

table.fp-grid .dim {
	color: var(--color-text-faint);
}

table.fp-grid .fp-you td {
	background: var(--color-accent-soft);
}

/* The relationship badge the application prints beside a host it
   recognises: Owned Brand, Competitor or Publisher. */
.fp-ent {
	border-radius: 3px;
	display: inline-block;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.03em;
	line-height: 1.6;
	margin-left: 6px;
	padding: 0 5px;
	vertical-align: 1px;
}

.fp-ent.owned {
	background: var(--tier-strong-bg);
	color: var(--tier-strong-fg);
}

.fp-ent.competitor {
	background: var(--tier-emerging-bg);
	color: var(--tier-emerging-fg);
}

.fp-ent.publisher {
	background: var(--tier-dominant-bg);
	color: var(--tier-dominant-fg);
}


/* ============================================================
   4. FILTER BAR AND CHIPS
   ============================================================ */

.fp-filterbar {
	align-items: center;
	background: var(--color-surface);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-sm);
	color: var(--color-text-muted);
	display: flex;
	flex-wrap: wrap;
	font-size: var(--fs-2xs);
	gap: var(--space-2) var(--space-3);
	margin-bottom: var(--space-3);
	padding: var(--space-2) var(--space-3);
}

.fp-select {
	background: var(--color-bg-alt);
	border: var(--border-width) solid var(--color-border-strong);
	border-radius: 3px;
	color: var(--color-text);
	font-family: var(--font-mono);
	font-size: var(--fs-2xs);
	padding: 3px var(--space-2);
}

.fp-select::after {
	content: " \25BE";
	color: var(--color-text-faint);
}

.fp-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.fp-chip {
	background: var(--color-bg-alt);
	border: var(--border-width) solid var(--color-border);
	border-radius: 999px;
	color: var(--color-text-muted);
	font-size: var(--fs-2xs);
	padding: 3px var(--space-3);
	white-space: nowrap;
}

.fp-chip.is-on {
	background: var(--color-accent-soft);
	border-color: var(--color-accent);
	color: var(--color-accent);
	font-weight: 600;
}

.fp-callout {
	background: var(--color-accent-soft);
	border-left: var(--border-width-strong) solid var(--color-accent);
	border-radius: 0 3px 3px 0;
	color: var(--color-text-muted);
	font-size: var(--fs-xs);
	line-height: var(--lh-snug);
	padding: var(--space-3);
}


/* ============================================================
   5. THE SEARCH RESULT

   One document out of the News Index or the Prospect Index. The
   left column is the title, the address, the snippet and the
   fold-out. The right column is the facts panel: PageRank now,
   PageRank over time, and the links the article body carries out.
   ============================================================ */

.fp-hit {
	background: var(--color-surface);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-sm);
	display: grid;
	gap: var(--space-4);
	grid-template-columns: minmax(0, 1fr) 15rem;
	padding: var(--space-3);
}

.fp-hit + .fp-hit {
	margin-top: var(--space-2);
}

.fp-hit-title {
	color: var(--color-text);
	display: block;
	font-size: var(--fs-sm);
	font-weight: 600;
	line-height: var(--lh-snug);
}

.fp-hit-url {
	color: var(--color-accent);
	display: block;
	font-family: var(--font-mono);
	font-size: var(--fs-2xs);
	margin-top: 3px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.fp-hit-meta {
	align-items: center;
	color: var(--color-text-faint);
	display: flex;
	flex-wrap: wrap;
	font-size: var(--fs-2xs);
	gap: var(--space-3);
	margin-top: var(--space-2);
}

.fp-hit-meta b {
	color: var(--color-text-muted);
}

.fp-hit-snip {
	color: var(--color-text-muted);
	font-size: var(--fs-xs);
	line-height: var(--lh-snug);
	margin: var(--space-2) 0 0;
}

.fp-hit-links {
	color: var(--color-accent);
	display: flex;
	flex-wrap: wrap;
	font-size: var(--fs-2xs);
	gap: var(--space-3);
	margin-top: var(--space-3);
}

.fp-hit-side {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

table.fp-facts {
	border: var(--border-width) solid var(--color-border);
	border-collapse: collapse;
	font-size: 11px;
	width: 100%;
}

table.fp-facts th,
table.fp-facts td {
	border-bottom: var(--border-width) solid var(--color-border);
	padding: 3px var(--space-2);
	text-align: left;
}

table.fp-facts th {
	background: var(--color-bg-alt);
	color: var(--color-text-faint);
	font-weight: 600;
}

table.fp-facts td {
	color: var(--color-text);
}

table.fp-facts .num {
	font-family: var(--font-mono);
	font-variant-numeric: tabular-nums;
	text-align: right;
}

table.fp-facts tr.is-zero td {
	color: var(--color-text-faint);
}

table.fp-facts tr:last-child th,
table.fp-facts tr:last-child td {
	border-bottom: 0;
}

@media (max-width: 60rem) {
	.fp-hit {
		grid-template-columns: minmax(0, 1fr);
	}
}


/* ============================================================
   6. THE PAGERANK COLUMNS

   A bar per crawl, drawn with a height percentage on the inline
   style so one row of markup carries the whole series.
   ============================================================ */

.fp-bars {
	align-items: flex-end;
	border-bottom: var(--border-width) solid var(--color-border);
	display: flex;
	gap: 3px;
	height: 5rem;
	padding-top: var(--space-2);
}

.fp-bars i {
	background: var(--color-accent);
	border-radius: 1px 1px 0 0;
	display: block;
	flex: 1 1 0;
	min-height: 2px;
	opacity: 0.75;
}

.fp-bars i.hi {
	background: var(--color-accent-strong);
	opacity: 1;
}

.fp-bars-axis {
	color: var(--color-text-faint);
	display: flex;
	font-family: var(--font-mono);
	font-size: 10px;
	justify-content: space-between;
	padding-top: 5px;
}


/* ============================================================
   7. THE BETA OFFER BOX
   ============================================================ */

.fp-beta {
	background: var(--color-surface);
	border: var(--border-width-strong) solid var(--color-accent);
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.fp-beta-top {
	background: var(--gradient-teal);
	color: #EAF6F3;
	padding: var(--space-5) var(--space-6);
}

.fp-beta-top .fp-beta-kicker {
	color: #9FE3D5;
	font-family: var(--font-mono);
	font-size: var(--fs-2xs);
	letter-spacing: var(--tracking-wider);
	text-transform: uppercase;
}

.fp-beta-top h3 {
	color: #FFFFFF;
	font-size: var(--fs-lg);
	font-weight: 650;
	letter-spacing: -0.01em;
	margin: var(--space-2) 0 0;
}

.fp-beta-price {
	align-items: baseline;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	margin-top: var(--space-4);
}

.fp-beta-price .now {
	color: #FFFFFF;
	font-family: var(--font-mono);
	font-size: var(--fs-2xl);
	font-weight: 700;
	line-height: 1;
}

.fp-beta-price .was {
	color: #7FB8AE;
	font-family: var(--font-mono);
	font-size: var(--fs-md);
	text-decoration: line-through;
}

.fp-beta-price .unit {
	color: #B8DED6;
	font-size: var(--fs-sm);
}

.fp-beta-body {
	display: grid;
	gap: var(--space-6);
	grid-template-columns: repeat(2, minmax(0, 1fr));
	padding: var(--space-5) var(--space-6);
}

.fp-beta-body h4 {
	color: var(--color-text);
	font-size: var(--fs-sm);
	font-weight: 650;
	margin: 0 0 var(--space-3);
}

.fp-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.fp-list li {
	border-bottom: var(--border-width) solid var(--color-border);
	color: var(--color-text-muted);
	font-size: var(--fs-sm);
	line-height: var(--lh-snug);
	padding: var(--space-3) 0 var(--space-3) var(--space-5);
	position: relative;
}

.fp-list li:last-child {
	border-bottom: 0;
}

.fp-list li::before {
	color: var(--color-accent);
	content: "\2192";
	font-family: var(--font-mono);
	left: 0;
	position: absolute;
	top: var(--space-3);
}

.fp-list li b {
	color: var(--color-text);
	font-weight: 600;
}

.fp-beta-foot {
	background: var(--color-bg-alt);
	border-top: var(--border-width) solid var(--color-border);
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
	align-items: center;
	justify-content: space-between;
	padding: var(--space-4) var(--space-6);
}

.fp-beta-foot p {
	color: var(--color-text-muted);
	font-size: var(--fs-xs);
	margin: 0;
	max-width: 34rem;
}

/* The five seats, drawn as five squares. */
.fp-seats {
	display: flex;
	gap: 6px;
}

.fp-seats i {
	border: var(--border-width-strong) solid var(--color-accent);
	border-radius: 3px;
	display: block;
	height: 14px;
	width: 14px;
}

.fp-seats i.taken {
	background: var(--color-accent);
}

@media (max-width: 60rem) {
	.fp-beta-body {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-4);
	}
}


/* ============================================================
   8. THE TEAM COLUMNS

   One column per person on a marketing team, and the pages of the
   application that person opens.
   ============================================================ */

.fp-roles {
	display: grid;
	gap: var(--space-4);
	grid-template-columns: repeat(5, minmax(0, 1fr));
}

.fp-role {
	background: var(--color-surface);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-sm);
	padding: var(--space-4);
}

.fp-role h4 {
	color: var(--color-text);
	font-size: var(--fs-sm);
	font-weight: 650;
	margin: 0 0 var(--space-1);
}

.fp-role .fp-role-sub {
	color: var(--color-text-faint);
	font-size: var(--fs-2xs);
	margin: 0 0 var(--space-3);
}

.fp-role ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.fp-role li {
	color: var(--color-text-muted);
	font-size: var(--fs-xs);
	line-height: var(--lh-snug);
	padding: 3px 0;
}

@media (max-width: 68rem) {
	.fp-roles {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 38rem) {
	.fp-roles {
		grid-template-columns: minmax(0, 1fr);
	}
}


/* ============================================================
   9. THE MENU MAP

   Every page of the application, in the sections the top bar
   lists them under.
   ============================================================ */

.fp-map {
	display: grid;
	gap: var(--space-4);
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.fp-map-sec {
	background: var(--color-surface);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-sm);
	padding: var(--space-4);
}

.fp-map-sec > h4 {
	border-bottom: var(--border-width) solid var(--color-border);
	color: var(--color-accent);
	font-family: var(--font-mono);
	font-size: var(--fs-2xs);
	font-weight: 600;
	letter-spacing: var(--tracking-wide);
	margin: 0 0 var(--space-3);
	padding-bottom: var(--space-2);
	text-transform: uppercase;
}

.fp-map-col {
	margin-bottom: var(--space-3);
}

.fp-map-col:last-child {
	margin-bottom: 0;
}

.fp-map-col > span {
	color: var(--color-text-faint);
	display: block;
	font-size: 10px;
	letter-spacing: 0.06em;
	margin-bottom: 3px;
	text-transform: uppercase;
}

.fp-map-col ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.fp-map-col li {
	color: var(--color-text);
	font-size: var(--fs-xs);
	line-height: 1.55;
}

@media (max-width: 68rem) {
	.fp-map {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 38rem) {
	.fp-map {
		grid-template-columns: minmax(0, 1fr);
	}
}


/* ============================================================
   10. THE STEP LIST

   The eyebrow, the copy, and the screenshot beside it.
   ============================================================ */

.fp-step {
	border-top: var(--border-width) solid var(--color-border);
	display: grid;
	gap: var(--space-6);
	grid-template-columns: 20rem minmax(0, 1fr);
	padding: var(--space-7) 0;
}

.fp-step:first-of-type {
	border-top: 0;
	padding-top: var(--space-5);
}

.fp-step-num {
	color: var(--color-accent);
	font-family: var(--font-mono);
	font-size: var(--fs-2xs);
	letter-spacing: var(--tracking-wider);
	margin-bottom: var(--space-2);
}

.fp-step h3 {
	color: var(--color-text);
	font-size: var(--fs-lg);
	font-weight: 650;
	letter-spacing: -0.015em;
	line-height: var(--lh-tight);
	margin: 0 0 var(--space-3);
}

.fp-step p {
	color: var(--color-text-muted);
	font-size: var(--fs-sm);
	line-height: var(--lh-normal);
	margin: 0 0 var(--space-3);
}

.fp-step-side {
	position: sticky;
	top: var(--space-6);
	align-self: start;
}

@media (max-width: 68rem) {
	.fp-step {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-4);
	}

	.fp-step-side {
		position: static;
	}
}


/* ============================================================
   11. THE COMPARISON TABLE

   What a rank tracker holds, and what this holds.
   ============================================================ */

table.fp-compare {
	border-collapse: collapse;
	font-size: var(--fs-sm);
	width: 100%;
}

table.fp-compare th,
table.fp-compare td {
	border-bottom: var(--border-width) solid var(--color-border);
	padding: var(--space-3);
	text-align: left;
	vertical-align: top;
}

table.fp-compare thead th {
	color: var(--color-text-faint);
	font-size: var(--fs-2xs);
	font-weight: 600;
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
}

table.fp-compare tbody th {
	color: var(--color-text);
	font-weight: 600;
	width: 34%;
}

table.fp-compare td {
	color: var(--color-text-muted);
}

table.fp-compare .yes {
	color: var(--color-accent);
	font-weight: 600;
}

table.fp-compare .no {
	color: var(--color-text-faint);
}


/* ============================================================
   12. THE NUMBER BLOCKS
   ============================================================ */

.fp-figures {
	display: grid;
	gap: var(--space-4);
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.fp-figure {
	border-left: var(--border-width-strong) solid var(--color-border);
	padding-left: var(--space-4);
}

.fp-figure .v {
	color: var(--color-text);
	display: block;
	font-family: var(--font-mono);
	font-size: var(--fs-xl);
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.1;
}

.fp-figure .k {
	color: var(--color-text-muted);
	display: block;
	font-size: var(--fs-xs);
	line-height: var(--lh-snug);
	margin-top: var(--space-2);
}

@media (max-width: 60rem) {
	.fp-figures {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}


/* ============================================================
   13. THE PERSONA CARDS
   ============================================================ */

.fp-personas {
	display: grid;
	gap: var(--space-3);
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.fp-persona {
	background: var(--color-surface);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-sm);
	padding: var(--space-3);
}

.fp-persona h5 {
	align-items: center;
	color: var(--color-text);
	display: flex;
	font-size: var(--fs-xs);
	font-weight: 650;
	gap: var(--space-2);
	justify-content: space-between;
	margin: 0 0 var(--space-2);
}

.fp-persona p {
	color: var(--color-text-muted);
	font-size: var(--fs-2xs);
	line-height: var(--lh-snug);
	margin: 0;
}

.fp-wordcount {
	color: var(--color-text-faint);
	font-family: var(--font-mono);
	font-size: 10px;
	font-weight: 400;
}

@media (max-width: 44rem) {
	.fp-personas {
		grid-template-columns: minmax(0, 1fr);
	}
}


/* ============================================================
   14. THE HERO PANEL LIST

   A short list of what runs, used inside the hero of
   front-page.php.
   ============================================================ */

.fp-runs {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.fp-run {
	align-items: center;
	display: grid;
	gap: var(--space-3);
	grid-template-columns: 1.5rem minmax(0, 1fr) auto;
}

.fp-run .stage {
	color: var(--color-text-faint);
	font-family: var(--font-mono);
	font-size: 10px;
}

.fp-run .what {
	color: var(--color-panel-dark-text);
	font-size: var(--fs-xs);
}

.fp-run .state {
	color: var(--color-accent-strong);
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.fp-run .state.wait {
	color: var(--color-text-faint);
}


/* ============================================================
   15. THE HERO

   One claim across the full measure, then the supporting text in
   two columns under it. A single narrow column left the right
   half of the section empty.
   ============================================================ */

.fp-hero {
	max-width: 66rem;
}

.fp-hero h1 {
	margin-top: var(--space-4);
}

.fp-hero-cols {
	display: grid;
	gap: var(--space-4) var(--space-7);
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin-top: var(--space-6);
	padding-top: var(--space-5);
	border-top: var(--border-width) solid var(--color-border);
}

.fp-hero-cols p {
	color: var(--color-text-muted);
	font-size: var(--fs-sm);
	line-height: var(--lh-normal);
	margin: 0;
	max-width: none;
}

.fp-hero-cols p + p {
	margin-top: var(--space-4);
}

.fp-hero-cols p.fp-hero-point {
	color: var(--color-text);
	font-size: var(--fs-md);
	font-weight: 600;
}

.fp-hero .hero-actions {
	margin-top: var(--space-6);
}

@media (max-width: 60rem) {
	.fp-hero-cols {
		grid-template-columns: minmax(0, 1fr);
	}
}


/* ============================================================
   16. THE SCREENS

   Each screen is a screenshot of the running application, taken
   at 1280px wide and 2x, cropped so the image starts just above
   the breadcrumbs. Two of each, dark and light, so the picture
   follows the site's own theme switch.

   The width and height attributes on the <img> hold the space
   before the file arrives, so the page does not jump.
   ============================================================ */

.fp-shot {
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-card);
	margin: 0;
	overflow: hidden;
}

.fp-shot img {
	display: block;
	height: auto;
	width: 100%;
}

/* The site is dark until the nav checkbox is checked, so the dark
   screenshot is the one that shows by default. */
.fp-shot .is-light {
	display: none;
}

html:has(#theme-toggle-input:checked) .fp-shot .is-dark {
	display: none;
}

html:has(#theme-toggle-input:checked) .fp-shot .is-light {
	display: block;
}

.fp-shot-cap {
	color: var(--color-text-faint);
	font-family: var(--font-mono);
	font-size: var(--fs-2xs);
	letter-spacing: 0.03em;
	margin-top: var(--space-3);
}


/* ============================================================
   17. THE BETA BOX: DISCOUNT LINE AND THE FORM

   The price came out on 2026-09-01. What is left is the size of
   the discount and the fact that it is the largest one there
   will be. The form moved inside the box under the terms.
   ============================================================ */

.fp-beta-price .now {
	font-size: var(--fs-xl);
	letter-spacing: -0.01em;
}

.fp-beta-note {
	color: #B8DED6;
	font-size: var(--fs-sm);
	line-height: var(--lh-snug);
	margin: var(--space-3) 0 0;
	max-width: 34rem;
}

.fp-beta-form {
	border-top: var(--border-width) solid var(--color-border);
	display: grid;
	gap: var(--space-6);
	grid-template-columns: 1fr 1.15fr;
	padding: var(--space-6);
}

.fp-beta-form h4 {
	color: var(--color-text);
	font-size: var(--fs-lg);
	font-weight: 650;
	letter-spacing: -0.01em;
	margin: 0 0 var(--space-3);
}

.fp-beta-form > div > p {
	color: var(--color-text-muted);
	font-size: var(--fs-sm);
	line-height: var(--lh-normal);
	margin: 0;
}

@media (max-width: 60rem) {
	.fp-beta-form {
		grid-template-columns: minmax(0, 1fr);
		padding: var(--space-5);
	}
}


/* ============================================================
   18. THE HERO, WITH A SCREEN IN IT

   Ben, 2026-09-01: the two text columns merged into one on the
   left, and a campaign dashboard sits on the right. The buttons
   came out; the next section is directly below and needs no
   button to reach it.

   Section 15 above is what the hero was before this. Nothing uses
   .fp-hero-cols now.
   ============================================================ */

.fp-hero-grid {
	align-items: start;
	display: grid;
	gap: var(--space-7);
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	padding: var(--space-5) 0 var(--space-8);
}

.fp-hero-text h1 {
	font-size: var(--fs-3xl);
	font-weight: 700;
	letter-spacing: -0.015em;
	line-height: var(--lh-tight);
	margin: var(--space-4) 0 var(--space-5);
}

.fp-hero-text p {
	color: var(--color-text-muted);
	font-size: var(--fs-sm);
	line-height: var(--lh-normal);
	margin: 0 0 var(--space-4);
	max-width: 38rem;
}

.fp-hero-text p:last-child {
	margin-bottom: 0;
}

/* The first paragraph is the one that matters most, so it is a step
   larger and in the full text color. Ben, 2026-09-01. */
.fp-hero-text p.fp-hero-lead {
	color: var(--color-text);
	font-size: var(--fs-md);
	line-height: var(--lh-snug);
}

.fp-hero-text p.fp-hero-point {
	border-top: var(--border-width) solid var(--color-border);
	margin-top: var(--space-5);
	padding-top: var(--space-5);
	text-align: center;
}

/* The five-seats line looks like a button and goes to the beta
   section. Same gradient and hover as .btn-primary in style.css. */
.fp-hero-cta {
	background: var(--gradient-teal-btn);
	border-radius: var(--radius-sm);
	color: #FFFFFF;
	display: inline-block;
	font-size: var(--fs-md);
	font-weight: 600;
	line-height: var(--lh-snug);
	padding: var(--space-3) var(--space-5);
	text-align: center;
	text-decoration: none;
	transition: filter 0.15s ease, box-shadow 0.15s ease;
}

.fp-hero-cta:hover {
	box-shadow: 0 0 0 3px var(--color-accent-soft);
	color: #FFFFFF;
	filter: brightness(1.06);
}

.fp-hero-cta:active {
	filter: brightness(0.94);
}

.fp-hero-cta:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

/* The walkthrough heading sits alone since the lede came out, so it
   is centered and matches the hero heading size. Ben, 2026-09-01. */
#how .section-head {
	align-items: center;
	justify-content: center;
	text-align: center;
}

#how .section-head .eyebrow {
	justify-content: center;
}

#how .section-head h2 {
	font-size: var(--fs-3xl);
}

/* An FAQ answer with two paragraphs gets a blank line between them. */
.faq-item p + p {
	margin-top: var(--space-4);
}

/* The whole screen shows, PageRank history included. It was cropped
   to a window until 2026-09-01 and the bottom chart was cut off. */
.fp-hero-shot .fp-shot {
	align-self: start;
}

@media (max-width: 68rem) {
	.fp-hero-grid {
		gap: var(--space-6);
		grid-template-columns: minmax(0, 1fr);
		padding: var(--space-6) 0;
	}

}


/* ============================================================
   19. THE ANNOUNCEMENT BAR IS OFF ON THE HOME PAGE

   Ben, 2026-09-01. header.php prints the bar on every page and
   only the home page loads this file, so hiding it here takes it
   off the home page and leaves it everywhere else. If it should
   come off the whole site, delete the block in header.php
   instead; this rule is not the place for that.
   ============================================================ */

.announcement {
	display: none !important;
}