/* ========================================
   TRY PAGE

   Beaver Builder AI visual identity.
   Tokens mirror the marketing team's canonical set
   (beaver-builder-ai-visual-identity/assets/tokens/beaver-builder-ai.css).

   Color lane: EVOLVED (Brent's forest Action Corner). /try is a newly
   designed high-attention surface, which is what the phase-in rule names as
   evolved territory. The blush vector is the variant carrying no hot orange,
   so the page's accent is its amber star. Violet appears nowhere: the spec
   forbids mixing the two full-color icon lanes in one composition. Swapping
   back to continuity means changing the LANE block and the tile together.

   Motifs used, of the seven available: halftone fade, pixel cluster,
   marker underline. Three is the ceiling. Do not add a fourth.
   ======================================== */

:root {
	/* Core palette. Contours are ink, never black. */
	--bbai-ink: #3e0000;
	--bbai-cream: #fff4dc;
	--bbai-soft-cream: #ecdfc3;
	--bbai-sky: #84d5d6;
	--bbai-lake: #1b7a97;
	--bbai-white: #fff;

	/* LANE: evolved. Amber is the tile's star and carries the action role
	   the hot orange used to. Forest tones carry secondary type. Returning
	   to continuity means violet here plus the violet tile SVG. */
	--bbai-amber: #fba613;
	--bbai-forest: #53673e;
	--bbai-forest-soft: #474e3f;
	--bbai-forest-deep: #1f3a00;

	/* Display and label faces fall back through condensed system faces so
	   the type keeps its character without a webfont request. Arial Narrow
	   is the broad-coverage floor on Windows. */
	--bbai-font-display: Atrament, "Roboto Condensed", "Avenir Next Condensed", "Helvetica Neue Condensed",
		"Arial Narrow", sans-serif;
	--bbai-font-label: "Roboto Condensed", "Avenir Next Condensed", "Helvetica Neue Condensed", "Arial Narrow",
		sans-serif;
	--bbai-font-body: system-ui, -apple-system, blinkmacsystemfont, "Segoe UI", sans-serif;

	--bbai-display-tracking: 0.03em;
	--bbai-display-leading: 0.95;
	--bbai-section-tracking: 0.015em;

	--bbai-radius-md: 8px;
	--bbai-radius-tile: 24px;
	--bbai-halftone-dot: 6px;
	--bbai-halftone-gap: 12px;

	/* Token value is 0.22. Held lower here: the fade covers a large field
	   behind the card, where the full value reads as a second surface. */
	--bbai-halftone-opacity: 0.15;
	--bbai-pixel-unit: 8px;
	--bbai-pixel-cluster-gap: 12px;

	/* Solid offset depth. Not a glossy drop shadow. */
	--bbai-shadow-offset: 8px 10px 0 var(--bbai-ink);
}

body.fl-ds-try {
	position: relative;
	overflow-x: hidden;
	min-height: 100vh;
	margin: 0;
	background: var(--bbai-cream);
	color: var(--bbai-ink);
	font-family: var(--bbai-font-body);
	-webkit-font-smoothing: antialiased;
}

/* ---- Motif 1: halftone fade -------------------------------------------
   Print-like depth rather than a gradient wash. Anchored bottom-right and
   faded out so it never competes with the card. */
.fl-ds-try-texture {
	position: fixed;
	z-index: 0;
	inset: 0;
	background-image: radial-gradient(
		var(--bbai-ink) calc(var(--bbai-halftone-dot) / 2),
		transparent calc(var(--bbai-halftone-dot) / 2)
	);
	background-position: 0 0;
	background-size: var(--bbai-halftone-gap) var(--bbai-halftone-gap);
	opacity: var(--bbai-halftone-opacity);
	mask-image: radial-gradient(ellipse 55% 45% at 95% 100%, #000 0%, rgb(0 0 0 / 45%) 45%, transparent 100%);
	pointer-events: none;
}

/* ---- Motif 2: pixel cluster -------------------------------------------
   Loose blocks balancing the empty top-left corner. Suggests building and
   addition; it is not a decorative gradient blob. */
.fl-ds-try-pixels {
	position: fixed;
	z-index: 0;
	display: grid;
	grid-template-columns: repeat(3, var(--bbai-pixel-unit));
	gap: var(--bbai-pixel-cluster-gap);
	pointer-events: none;
}

.fl-ds-try-pixels span {
	width: var(--bbai-pixel-unit);
	height: var(--bbai-pixel-unit);
	background: var(--bbai-ink);
}

.fl-ds-try-pixels--top {
	top: 8vh;
	left: 6vw;
	opacity: 0.3;
}

.fl-ds-try-pixels--bottom {
	bottom: 10vh;
	left: 10vw;
	opacity: 0.22;
}

/* Two amber blocks tie the cluster to the tile's star. The accent earns its
   place through position and contrast, not surface area. */
.fl-ds-try-pixels span:nth-child(2),
.fl-ds-try-pixels span:nth-child(6) {
	background: var(--bbai-amber);
}

.fl-ds-try-page {
	position: relative;
	z-index: 1;
	max-width: 460px;
	margin: 0 auto;
	padding: 9vh 20px 60px;
}

/* ---- Masthead ---------------------------------------------------------
   The tile is the product mnemonic and stays a separate element. The spec
   forbids attaching it to the wordmark or building an AI monogram. */
.fl-ds-try-masthead {
	margin-bottom: 26px;
	text-align: center;
}

/* Larger than the violet tile was: the evolved vector carries its own
   padding inside a 55px viewBox, so it reads smaller at the same box size. */
.fl-ds-try-tile {
	display: block;
	width: 68px;
	height: 68px;
	margin: 0 auto 16px;
}

.fl-ds-try-eyebrow {
	margin: 0 0 10px;
	color: var(--bbai-forest-soft);
	font-family: var(--bbai-font-label);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* Display type: uppercase, positive tracking, tight leading. Never
   compress a condensed face with negative tracking. */
.fl-ds-try-headline {
	margin: 0;
	color: var(--bbai-ink);
	font-family: var(--bbai-font-display);
	font-size: clamp(2.4rem, 11vw, 3.4rem);
	font-stretch: condensed;
	font-weight: 700;
	letter-spacing: var(--bbai-display-tracking);
	line-height: var(--bbai-display-leading);
	text-transform: uppercase;
	text-wrap: balance;
}

/* ---- Motif 3: marker underline ----------------------------------------
   Signals the key builder benefit. One word only. */
.fl-ds-try-mark {
	position: relative;
	display: inline-block;
}

/* Sits under the baseline, not across it. The offset is negative because the
   0.95 display leading pulls the inline box up inside the glyphs. Amber ties
   it to the tile's border and the button; the thin weight keeps it a marker
   underline rather than a highlighter bar. */
.fl-ds-try-mark::after {
	position: absolute;
	right: -3px;
	bottom: -0.04em;
	left: -3px;
	z-index: -1;
	height: 0.09em;
	background: var(--bbai-amber);
	content: "";
}

.fl-ds-try-notice {
	margin: 0 0 22px;
	border-left: 4px solid var(--bbai-amber);
	background: var(--bbai-white);
	box-shadow: 4px 5px 0 var(--bbai-soft-cream);
	color: var(--bbai-ink);
	font-family: var(--bbai-font-body);
	font-size: 0.875rem;
	line-height: 1.5;
	padding: 14px 18px;
}

/* ---- Card -------------------------------------------------------------
   Solid offset depth against an ink contour is the signature treatment. */
.fl-ds-try-card {
	position: relative;
}

.fl-ds-try-card__paper {
	border: 3px solid var(--bbai-ink);
	border-radius: var(--bbai-radius-tile);
	background: var(--bbai-white);
	box-shadow: var(--bbai-shadow-offset);
	padding: 32px 28px 28px;
}

.fl-ds-try-intro {
	margin: 0 0 24px;
	color: var(--bbai-ink);
	font-size: 1rem;
	line-height: 1.6;
}

.fl-ds-try-label {
	display: block;
	margin-bottom: 8px;
	color: var(--bbai-forest-soft);
	font-family: var(--bbai-font-label);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: var(--bbai-section-tracking);
	text-transform: uppercase;
}

.fl-ds-try-input {
	display: block;
	box-sizing: border-box;
	width: 100%;
	border: 2px solid var(--bbai-ink);
	border-radius: var(--bbai-radius-md);
	background: var(--bbai-cream);
	color: var(--bbai-ink);
	font-family: var(--bbai-font-body);
	font-size: 1rem;
	padding: 12px 14px;
	transition: border-color 0.15s, box-shadow 0.15s;
}

/* 0.8 is the floor that keeps the placeholder at AA (4.72:1) on the cream
   field while still reading lighter than typed input. */
.fl-ds-try-input::placeholder {
	color: var(--bbai-forest-soft);
	opacity: 0.8;
}

/* Lake reads as the trust/field color. The offset keeps the focus state
   legible without relying on color alone. */
.fl-ds-try-input:focus {
	border-color: var(--bbai-lake);
	box-shadow: 0 0 0 3px var(--bbai-sky);
	outline: none;
}

/* Second and subsequent fields in the stack. */
.fl-ds-try-input + .fl-ds-try-label {
	margin-top: 18px;
}

/* Honeypot: off screen rather than display:none, which some bots skip. */
.fl-ds-try-hp {
	position: absolute;
	left: -9999px;
	overflow: hidden;
	width: 1px;
	height: 1px;
}

/* Ink on amber (8.77:1) takes the action role the hot orange held, and
   matches the tile's star. Cream or white on a warm accent is on the
   avoid list, so the label stays ink. */
.fl-ds-try-button {
	display: block;
	width: 100%;
	margin-top: 18px;
	border: 3px solid var(--bbai-ink);
	border-radius: var(--bbai-radius-md);
	background: var(--bbai-amber);
	box-shadow: 4px 5px 0 var(--bbai-ink);
	color: var(--bbai-ink);
	cursor: pointer;
	font-family: var(--bbai-font-label);
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	padding: 14px 28px;
	text-transform: uppercase;
	transition: transform 0.12s, box-shadow 0.12s, background 0.15s;
}

/* Hover lifts off the shadow rather than changing color. The old hover was
   gold, which is the same value as amber now that amber carries the button. */
.fl-ds-try-button:hover {
	box-shadow: 6px 8px 0 var(--bbai-ink);
	transform: translate(-2px, -2px);
}

.fl-ds-try-button:focus-visible {
	outline: 3px solid var(--bbai-lake);
	outline-offset: 3px;
}

/* Press moves the button onto its own shadow. */
.fl-ds-try-button:active {
	box-shadow: 1px 1px 0 var(--bbai-ink);
	transform: translate(3px, 4px);
}

.fl-ds-try-button[disabled] {
	box-shadow: 1px 1px 0 var(--bbai-ink);
	cursor: default;
	opacity: 0.6;
	transform: translate(3px, 4px);
}

.fl-ds-try-message {
	margin: 16px 0 0;
	font-family: var(--bbai-font-body);
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.5;
	min-height: 1em;
}

.fl-ds-try-message--success {
	color: var(--bbai-forest);
}

.fl-ds-try-message--error {
	color: var(--bbai-forest-soft);
}

/* Sent state. Once a link is on its way the card carries only the
   confirmation, so the form, its preamble and the fine print all go. */
.fl-ds-try-sent {
	display: none;
	margin: 0;
	color: var(--bbai-ink);
	font-size: 1.0625rem;
	line-height: 1.6;
	text-align: center;
}

.fl-ds-try-card--sent .fl-ds-try-card__paper {
	padding: 44px 32px;
}

.fl-ds-try-card--sent .fl-ds-try-intro,
.fl-ds-try-card--sent .fl-ds-try-form,
.fl-ds-try-card--sent .fl-ds-try-fine {
	display: none;
}

.fl-ds-try-card--sent .fl-ds-try-sent {
	display: block;
}

.fl-ds-try-fine {
	margin: 22px 0 0;
	color: var(--bbai-forest-soft);
	font-size: 0.75rem;
	line-height: 1.55;
}

@media (max-width: 560px) {
	.fl-ds-try-page {
		padding: 6vh 18px 40px;
	}

	.fl-ds-try-pixels--top {
		top: 3vh;
		left: 4vw;
	}

	.fl-ds-try-pixels--bottom {
		display: none;
	}

	.fl-ds-try-card__paper {
		padding: 28px 22px 24px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.fl-ds-try-button,
	.fl-ds-try-input {
		transition: none;
	}
}