/*
Theme Name: Lucibook
Theme URI: https://lucibook.com
Author: Lucibook
Description: Marketing landing page theme for Lucibook — one connected workspace for modern accountancy practices (Snap document capture + LuciCore reconciliation + Lucy AI).
Version: 1.0.0
Text Domain: lucibook
*/

/* -------------------------------------------------------------------------
   Design tokens
   Source of truth: Figma file Z4GJ8kwnbWMldCHHZbaEHY, node 15532:79
   ("Lucibook — Final Landing Page"). Values pulled from get_design_context
   on each section, not hardcoded guesses.
   ---------------------------------------------------------------------- */
:root {
	/* Color */
	--color-ink: #0e0e16;
	--color-muted: #636678;
	--color-brand-blue: #0963e8;
	--color-brand-blue-hover: #0754c4;
	--color-brand-blue-dark: #0d122a;
	--color-panel-navy: #091229;
	--color-border: #e0e5f0;
	--color-success: #0d9e5e;
	--color-bg-tint: #fbfcfe;
	--color-white: #ffffff;

	/* Typography */
	--font-primary: 'Manrope', sans-serif;
	--font-secondary: 'Inter', sans-serif;

	--text-hero: 58px;
	--leading-hero: 62px;
	--text-h2: 48px;
	--leading-h2: 54px;

	/* Layout */
	/*
	 * Figma's page canvas is 1440px wide with every full-width panel
	 * (Hero, Founding Offer) inset by exactly 32px each side — i.e. the
	 * real content width is 1376px. This container's own 32px
	 * padding-inline supplies that inset, so max-width must be the full
	 * 1440px canvas width, not 1376 (that was double-subtracting the
	 * margin, rendering every section 64px narrower than the design).
	 */
	--container-width: 1440px;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

html,
body {
	/*
	 * Defensive: the off-canvas mobile menu panel sits just past the
	 * right edge (translateX, not display:none) so it can slide in —
	 * that alone makes scrollWidth>clientWidth at narrow widths even
	 * though nothing is visually escaping. Real content overflows are
	 * still fixed at the source per-section; this is a safety net, not
	 * a substitute for that.
	 *
	 * `clip`, not `hidden` — `hidden` establishes a scroll container on
	 * body, which breaks `.site-header`'s position:sticky (it started
	 * sticking to body's own box instead of the viewport, so it just
	 * scrolled away). `clip` suppresses the overflow without creating
	 * a scroll container, so sticky keeps working.
	 */
	overflow-x: clip;
}

body {
	margin: 0;
	font-family: var(--font-primary);
	color: var(--color-ink);
	background: var(--color-white);
	-webkit-font-smoothing: antialiased;
}

img {
	max-width: 100%;
	display: block;
}

a {
	color: inherit;
	text-decoration: none;
}

.container {
	width: 100%;
	max-width: var(--container-width);
	margin-inline: auto;
	/*
	 * Fluid, not a fixed 32px down to the smallest phone — a 32px inset
	 * on a 375px screen eats 17% of the width and makes every panel look
	 * disproportionately margined. Scales continuously with viewport
	 * width instead of snapping between two fixed values.
	 */
	padding-inline: clamp(16px, 4.3vw, 32px);
}

/* -------------------------------------------------------------------------
   Entrance animations (assets/js/scroll-animations.js). Elements with
   [data-animate] start hidden only once html.js-animate is present — if JS
   fails to load, nothing is stuck invisible. Deliberately NOT one universal
   fade-up-on-everything effect — the variant is chosen per section to suit
   what's actually on screen:
     - "fade"   plain opacity, no movement — the restrained default, used
                for most text content and the Founding Offer (a commitment
                moment that shouldn't compete with motion).
     - "scale"  opacity + scale 0.98→1 — Pricing's 3 cards, revealed
                simultaneously (see data-stagger="0" on their group), not
                staggered left-to-right.
     - "reveal" opacity + scale 0.97→1, slightly slower — the flattened
                Reconciliation/Luci AI illustration images, reading as the
                panel settling into place rather than a decorative slide.
   ---------------------------------------------------------------------- */
html.js-animate [data-animate="fade"] {
	opacity: 0;
	transition: opacity 0.5s ease-out;
}

html.js-animate [data-animate="fade"].is-visible {
	opacity: 1;
}

html.js-animate [data-animate="scale"] {
	opacity: 0;
	transform: scale(0.98);
	transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}

html.js-animate [data-animate="scale"].is-visible {
	opacity: 1;
	transform: scale(1);
}

html.js-animate [data-animate="reveal"] {
	opacity: 0;
	transform: scale(0.97);
	transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

html.js-animate [data-animate="reveal"].is-visible {
	opacity: 1;
	transform: scale(1);
}

/* -------------------------------------------------------------------------
   Buttons
   ---------------------------------------------------------------------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-primary);
	font-weight: 600;
	font-size: 16px;
	white-space: nowrap;
	border-radius: 999px;
	border: 1px solid transparent;
	cursor: pointer;
	transition: background-color 0.15s ease-out, border-color 0.15s ease-out,
		color 0.15s ease-out, transform 0.15s ease-out, box-shadow 0.15s ease-out;
}

/* The arrow lives inline in the label text; lucibook_wrap_trailing_arrow()
   isolates it in its own span so it can nudge independently of the label. */
.btn__arrow {
	display: inline-block;
	margin-left: 6px;
	vertical-align: middle;
	transition: transform 0.15s ease-out;
}

.btn:hover .btn__arrow {
	transform: translateX(3px);
}

.btn--primary {
	background: var(--color-brand-blue);
	color: var(--color-white);
	padding: 13px 24px;
}

.btn--primary:hover {
	background: var(--color-brand-blue-hover);
	box-shadow: 0 8px 20px rgba(9, 99, 232, 0.28);
}

.btn--white {
	background: var(--color-white);
	border-color: var(--color-white);
	color: var(--color-brand-blue);
	padding: 19px 32px;
}

.btn--white:hover {
	/*
	 * A 1px border-color shift alone reads as almost nothing when the
	 * button already sits on a similarly-blue panel/card background —
	 * pairing it with a faint blue-tinted fill (still restrained, not a
	 * color swap) keeps the affordance visible regardless of context.
	 */
	background: #f2f7ff;
	border-color: var(--color-brand-blue-hover);
	color: var(--color-brand-blue-hover);
	box-shadow: 0 10px 24px rgba(3, 15, 46, 0.18);
}

/* -------------------------------------------------------------------------
   Header — Figma node 15532:80 ("Header"), 1440x96, flat bg #fbfcfe, no
   card/border treatment (simpler than a floating-card header design).
   ---------------------------------------------------------------------- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--color-bg-tint);
	box-shadow: 0 1px 0 rgba(14, 14, 22, 0);
	transition: box-shadow 0.25s ease-out;
}

/*
 * sticky-header.js toggles this once scrolled past rest — a restrained
 * lift (soft shadow fading in), not a color swap or bounce, so pinning
 * against the page content reads as a smooth state change rather than
 * a jump cut.
 */
.site-header.is-stuck {
	box-shadow: 0 4px 16px rgba(14, 14, 22, 0.08);
}

.site-header--static {
	position: relative;
	top: auto;
}

/*
 * Figma node 15532:80 ("Header", 1440x96) positions the logo at a fixed
 * x=96 and the CTA button's right edge at x=1344 (1440-96) — a 96px
 * margin on both true page edges, NOT the generic .container's 32px.
 * This is its own full-width, 96px-padded wrapper rather than sharing
 * .container, so those margins land exactly where Figma has them
 * regardless of viewport width.
 */
.site-header__bar {
	position: relative;
	width: 100%;
	max-width: 1440px;
	margin-inline: auto;
	padding-inline: 96px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 96px;
	gap: 24px;
}

.site-header__logo {
	flex-shrink: 0;
	line-height: 0;
}

.site-header__logo-img {
	width: clamp(140px, 32vw, 190px);
	height: auto;
}

/*
 * Nav cluster's real center (Product/Lucy AI/Pricing, centers at
 * x=528.5/632/736.5 of 1440) is x=632 — 43.89% of the bar's own 1440
 * width, not the bar's true midpoint (50% = 720). It's off-center in
 * the source design, not an approximation.
 */
.site-header__nav {
	position: absolute;
	left: 43.89%;
	top: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	gap: 52px;
	font-weight: 500;
	font-size: 15px;
	color: var(--color-ink);
	white-space: nowrap;
}

.site-header__actions {
	display: flex;
	align-items: center;
	gap: 34px;
	white-space: nowrap;
}

.site-header__login-link {
	font-weight: 500;
	font-size: 15px;
	color: var(--color-ink);
}

/*
 * Underline draws in left-to-right on hover instead of a bare color swap —
 * a considered, deliberate affordance rather than default link styling.
 * Shared by nav links, the mobile menu, and the Luci AI challenge line
 * (see .luci-ai__challenge). ::after is sized to the text via
 * display:inline-block, not the full block width.
 */
.site-header__nav a,
.site-header__login-link {
	position: relative;
	display: inline-block;
	transition: color 0.2s ease-out;
}

.site-header__nav a::after,
.site-header__login-link::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: -4px;
	width: 100%;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.2s ease-out;
}

.site-header__nav a:hover,
.site-header__login-link:hover {
	color: var(--color-brand-blue);
}

.site-header__nav a:hover::after,
.site-header__login-link:hover::after {
	transform: scaleX(1);
}

.site-header__actions .btn--primary {
	width: 134px;
	height: 46px;
	padding: 0;
}

.site-header__menu-toggle {
	display: none;
	position: relative;
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
}

.site-header__menu-icon,
.site-header__menu-icon::before,
.site-header__menu-icon::after {
	content: '';
	position: absolute;
	left: 50%;
	width: 20px;
	height: 2px;
	margin-left: -10px;
	background: var(--color-ink);
	border-radius: 2px;
	transition: transform 0.2s ease-out, opacity 0.2s ease-out, top 0.2s ease-out;
}

.site-header__menu-icon {
	top: 50%;
	transform: translateY(-50%);
}

.site-header__menu-icon::before {
	top: -7px;
}

.site-header__menu-icon::after {
	top: 7px;
}

.site-header__menu-toggle[aria-expanded='true'] .site-header__menu-icon {
	background: transparent;
}

.site-header__menu-toggle[aria-expanded='true'] .site-header__menu-icon::before {
	top: 0;
	transform: rotate(45deg);
}

.site-header__menu-toggle[aria-expanded='true'] .site-header__menu-icon::after {
	top: 0;
	transform: rotate(-45deg);
}

/* Mobile slide-in menu — same markup/JS contract as Snap's build
   (assets/js/mobile-menu.js is shared verbatim), restyled to this
   theme's blue/white palette instead of orange/black. */
.mobile-menu-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.4);
	z-index: 150;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s ease-out, visibility 0s linear 0.25s;
}

.mobile-menu-backdrop.is-open {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.25s ease-out, visibility 0s linear 0s;
}

.mobile-menu-panel {
	display: none;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(320px, 85vw);
	background: var(--color-white);
	box-shadow: -12px 0 32px rgba(0, 0, 0, 0.18);
	z-index: 151;
	flex-direction: column;
	overflow-y: auto;
	transform: translateX(100%);
	visibility: hidden;
	transition: transform 0.25s ease-out, visibility 0s linear 0.25s;
}

.mobile-menu-panel.is-open {
	transform: translateX(0);
	visibility: visible;
	transition: transform 0.25s ease-out, visibility 0s linear 0s;
}

.mobile-menu-panel__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 20px 16px;
	border-bottom: 1px solid var(--color-border);
}

.mobile-menu-panel__title {
	font-weight: 700;
	font-size: 18px;
	color: var(--color-ink);
}

.mobile-menu-panel__close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-right: -12px;
	background: none;
	border: none;
	font-size: 28px;
	line-height: 1;
	color: var(--color-ink);
	cursor: pointer;
}

.mobile-menu-panel__nav {
	display: flex;
	flex-direction: column;
	padding: 8px 12px;
}

.mobile-menu-panel__nav a {
	display: flex;
	align-items: center;
	min-height: 48px;
	padding: 0 8px;
	border-radius: 10px;
	font-weight: 600;
	font-size: 16px;
	color: var(--color-ink);
	transition: color 0.2s ease-out, background-color 0.2s ease-out;
}

.mobile-menu-panel__nav a:hover,
.mobile-menu-panel__nav a:active {
	color: var(--color-brand-blue);
	background: var(--color-bg-tint);
}

.mobile-menu-panel__talk-link {
	margin-top: 4px;
	border-top: 1px solid var(--color-border);
	padding-top: 12px !important;
}

.mobile-menu-panel__cta {
	padding: 16px 20px 24px;
	border-top: 1px solid var(--color-border);
}

.mobile-menu-panel__cta-btn {
	width: 100%;
	min-height: 48px;
}

html.mobile-menu-lock,
body.mobile-menu-lock {
	overflow: hidden;
}

/*
 * The desktop nav is absolutely centered at a fixed 43.89% with a fixed
 * 52px gap and 15px font — nothing about it shrinks, so somewhere below
 * ~830px it collides with the logo (confirmed: LUCIBOOK/Product overlap
 * at 769px). Rather than fight that fixed-position nav into shrinking
 * smoothly through a narrow collision zone, switch to the hamburger
 * before the collision starts.
 */
@media (max-width: 900px) {
	.site-header__nav,
	.site-header__login-link,
	.site-header__actions .btn--primary {
		display: none;
	}

	.site-header__menu-toggle {
		display: flex;
	}

	.mobile-menu-panel {
		display: flex;
	}

	.site-header__bar {
		padding-block: 0;
		padding-inline: clamp(20px, 5vw, 24px);
	}
}

@media (max-width: 1200px) {
	.site-header__bar {
		padding-inline: 32px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.site-header__nav a,
	.site-header__login-link,
	.site-header__menu-icon,
	.site-header__menu-icon::before,
	.site-header__menu-icon::after,
	.mobile-menu-backdrop,
	.mobile-menu-panel,
	.mobile-menu-panel__nav a {
		transition: none;
	}
}

/* -------------------------------------------------------------------------
   Footer — no dedicated Figma section, minimal copyright bar only.
   ---------------------------------------------------------------------- */
.site-footer {
	padding-block: 32px;
	border-top: 1px solid var(--color-border);
}

.site-footer__rights {
	margin: 0;
	font-size: 13px;
	color: var(--color-muted);
	text-align: center;
}

/* -------------------------------------------------------------------------
   Hero — Figma node 15532:88 ("Section 01 — Hero"), blue panel 1376x749.
   ---------------------------------------------------------------------- */
.hero {
	padding-block: 24px;
}

/*
 * Figma node 15532:89 ("Hero Blue Panel", 1376x749) positions everything
 * by absolute px, not a symmetric padded grid — the illustration cluster
 * (orb/workspace/photo/labels) extends almost to the panel's own right
 * edge (Categorised label right edge at x=1360, 16px from the 1376 edge),
 * while the text column only needs its own natural content width from
 * the 64px left inset. Reverse-engineered as padding-right:16px (not the
 * naive symmetric 64px, which was crowding the illustration inward) and
 * a 624px text column + 38px gap, matching the real numbers:
 * 64 (pad-left) + 624 (text) + 38 (gap) + 634 (illustration) + 16 (pad-right) = 1376.
 */
.hero__panel {
	position: relative;
	background: var(--color-brand-blue);
	border-radius: 42px;
	/*
	 * Figma: the illustration sits only 12px from the panel's own top
	 * (749 panel - 713 image = 36px slack total, not split evenly —
	 * 12 top / 24 bottom), so the image reads noticeably higher than a
	 * symmetric 18/18 would put it.
	 */
	padding: 12px 16px 24px 64px;
	display: grid;
	grid-template-columns: minmax(0, 624px) 1fr;
	gap: 38px;
	align-items: center;
	overflow: hidden;
}

.hero__headline {
	margin: 0;
	font-weight: 600;
	font-size: clamp(40px, 4.2vw, var(--text-hero));
	line-height: 1.08;
	color: var(--color-white);
}

.hero__headline-line {
	display: block;
}

.hero__body {
	margin: 42px 0 0;
	font-weight: 400;
	font-size: 20px;
	line-height: 30px;
	color: var(--color-white);
}

.hero__cta {
	width: 224px;
	height: 58px;
	margin-top: 44px;
	padding: 0;
}

.hero__small-note {
	margin: 32px 0 0;
	font-weight: 500;
	font-size: 15px;
	color: #d4ebff;
}

.hero__visual {
	position: relative;
}

.hero__image {
	display: block;
	width: 634px;
	height: 713px;
	object-fit: cover;
}

/*
 * One continuous clamp()-driven range from 375px up to the 960px
 * stacking cutover, instead of two fixed snapshots (960px, 480px) with
 * nothing scaling in between — that pattern is exactly what produced
 * disproportionate insets/oversized type at in-between widths on an
 * earlier project.
 */
@media (max-width: 960px) {
	.hero__panel {
		grid-template-columns: 1fr;
		padding: clamp(28px, 8vw, 40px) clamp(20px, 6vw, 32px);
		border-radius: clamp(28px, 7vw, 42px);
	}

	.hero__headline {
		font-size: clamp(28px, 7vw, 40px);
		line-height: 1.15;
	}

	.hero__body {
		font-size: clamp(16px, 4.3vw, 20px);
		line-height: 1.5;
	}

	.hero__content {
		order: 1;
	}

	.hero__cta {
		width: 100%;
	}

	.hero__visual {
		order: 2;
		margin-top: 32px;
	}

	.hero__image {
		width: 100%;
		height: auto;
	}
}

/* -------------------------------------------------------------------------
   Social Proof — Figma node 15532:141 ("Section 02 — Social Proof").
   ---------------------------------------------------------------------- */
.social-proof {
	padding-block: clamp(56px, 12vw, 93.5px);
	text-align: center;
}

.social-proof__headline {
	margin: 0 auto;
	max-width: 1100px;
	font-weight: 600;
	font-size: clamp(22px, 6vw, 30px);
	line-height: 1.3;
	color: var(--color-ink);
}

/*
 * Positioned by exact percentage-of-container center (matching Figma's
 * absolute x-centers: 139,333.5,551.5,787,1017.5,1283 within the 1376px
 * content width) rather than flexbox gap — the 6 names have uneven
 * natural widths (short "Morrow" vs long "FINCH ACCOUNTING"), and Figma's
 * spacing between them isn't a uniform gap, so gap-based flex layout
 * can't reproduce it; absolute centers can.
 */
.social-proof__logos {
	position: relative;
	height: 20px;
	margin: 56px 0 0;
	padding: 0;
	list-style: none;
}

.social-proof__logo {
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 0.7px;
	color: #6b7080;
	white-space: nowrap;
}

.social-proof__logo:nth-child(even) {
	font-weight: 500;
	letter-spacing: normal;
}

.social-proof__logo:nth-child(1) { left: 10.101%; }
.social-proof__logo:nth-child(2) { left: 24.236%; }
.social-proof__logo:nth-child(3) { left: 40.073%; }
.social-proof__logo:nth-child(4) { left: 57.194%; }
.social-proof__logo:nth-child(5) { left: 73.947%; }
.social-proof__logo:nth-child(6) { left: 93.241%; }

/*
 * The absolute-percentage logo positions are calibrated for the full
 * 1376px desktop content width — below that, the fixed 14px text
 * doesn't shrink with the container, so it starts colliding well
 * before 700px (confirmed overlap from 701px up to ~830px). Widened
 * past that whole collision zone rather than guessing a value inside it.
 */
@media (max-width: 950px) {
	.social-proof__logos {
		position: static;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		height: auto;
		gap: 20px 32px;
	}

	.social-proof__logo {
		position: static;
		transform: none;
	}
}

@media (max-width: 600px) {
	.social-proof__headline {
		font-size: 24px;
		line-height: 30px;
	}
}

/* -------------------------------------------------------------------------
   Reconciliation — Figma node 15532:149 ("Section 03 — Reconciliation").
   ---------------------------------------------------------------------- */
.reconciliation {
	padding-block: 101px;
	overflow: hidden;
}

/*
 * Figma: text col starts x=159 (not the container's own 32px edge —
 * this element carries the .container class too, so this padding-left
 * overrides rather than adds to it), col width=510, gap to the card's
 * own left edge (x=692) is only 23px — not the 60px this grid used
 * before, which combined with .reconciliation__visual's margin-left:auto
 * slack was reading as far too much whitespace between the two halves.
 */
.reconciliation__inner {
	display: grid;
	grid-template-columns: minmax(0, 510px) 1fr;
	gap: 23px;
	padding-left: 159px;
	align-items: center;
}

.reconciliation__eyebrow {
	margin: 0;
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.5px;
	color: var(--color-brand-blue);
}

.reconciliation__headline {
	margin: 16px 0 0;
	font-weight: 600;
	font-size: 52px;
	line-height: 58px;
	color: var(--color-ink);
}

.reconciliation__headline-line {
	display: block;
}

.reconciliation__body {
	margin: 32px 0 0;
	max-width: 452px;
	font-weight: 400;
	font-size: 18px;
	line-height: 29px;
	color: var(--color-muted);
}

.reconciliation__closing {
	margin: 32px 0 0;
	font-weight: 600;
	font-size: 22px;
	color: var(--color-ink);
}

.reconciliation__visual {
	position: relative;
	width: 100%;
	max-width: 668px;
}

.reconciliation__mockup-image {
	display: block;
	width: 668px;
	height: 647px;
	border-radius: 32px;
}

@media (max-width: 960px) {
	.reconciliation {
		padding-block: clamp(56px, 11vw, 101px);
	}

	.reconciliation__inner {
		grid-template-columns: 1fr;
		padding-left: clamp(16px, 4.3vw, 32px);
	}

	.reconciliation__headline {
		font-size: clamp(28px, 7.5vw, 38px);
		line-height: 1.16;
	}

	.reconciliation__visual {
		max-width: none;
		margin-top: 40px;
	}

	.reconciliation__mockup-image {
		width: 100%;
		height: auto;
	}
}

@media (max-width: 480px) {
	.reconciliation {
		padding-block: 56px;
	}

	.reconciliation__headline {
		font-size: 30px;
		line-height: 36px;
	}
}

/* -------------------------------------------------------------------------
   Luci AI — Figma node 15532:302 ("Section 04 — Luci AI").
   ---------------------------------------------------------------------- */
.luci-ai {
	background: var(--color-panel-navy);
	padding-block: 141px;
	overflow: hidden;
}

.luci-ai__inner {
	/*
	 * .container already supplies the page's own 32px padding-inline;
	 * this element carries BOTH the .container and .luci-ai__inner
	 * classes, so this padding-left longhand overrides (not adds to)
	 * that shorthand — hence 82px (32 + the 50px this section itself
	 * needs), not 50px.
	 */
	display: grid;
	grid-template-columns: minmax(0, 620px) 1fr;
	gap: 95px;
	padding-left: 82px;
	align-items: center;
}

.luci-ai__visual {
	position: relative;
}

.luci-ai__stage-image {
	display: block;
	width: 620px;
	height: 678px;
	border-radius: 42px;
}

.luci-ai__eyebrow {
	margin: 0;
	font-weight: 600;
	font-size: 13px;
	color: var(--color-brand-blue);
}

.luci-ai__headline {
	margin: 16px 0 0;
	font-weight: 600;
	font-size: 54px;
	line-height: 60px;
	color: var(--color-white);
}

.luci-ai__headline-line {
	display: block;
}

.luci-ai__challenge {
	position: relative;
	display: inline-block;
	margin: 32px 0 0;
	font-weight: 600;
	font-size: 22px;
	color: var(--color-brand-blue);
}

.luci-ai__challenge::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 100%;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.2s ease-out;
}

.luci-ai__challenge:hover::after {
	transform: scaleX(1);
}

.luci-ai__positioning {
	margin: 16px 0 0;
	max-width: 459px;
	font-weight: 400;
	font-size: 17px;
	line-height: 27px;
	color: #c2c5da;
}

.luci-ai__ask {
	position: relative;
	margin-top: 32px;
	max-width: 490px;
}

.luci-ai__ask-input {
	width: 100%;
	height: 74px;
	background: var(--color-white);
	border: 1px solid #ccdef0;
	border-radius: 37px;
	padding: 0 74px 0 23px;
	font-family: var(--font-primary);
	font-size: 15px;
	color: var(--color-ink);
	box-sizing: border-box;
}

.luci-ai__ask-input::placeholder {
	color: var(--color-muted);
}

.luci-ai__ask-send {
	position: absolute;
	right: 10px;
	top: 10px;
	width: 54px;
	height: 54px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-brand-blue);
	border: none;
	border-radius: 50%;
	color: var(--color-white);
	font-size: 20px;
	cursor: pointer;
	transition: background-color 0.15s ease-out, transform 0.15s ease-out, box-shadow 0.15s ease-out;
}

/*
 * No scale here — a circular button growing while its arrow independently
 * translates reads as two uncoordinated movements. The color/shadow
 * settle is the button's own feedback; the arrow nudge (below) is the
 * single, clean motion cue.
 */
.luci-ai__ask-send:hover {
	background: var(--color-brand-blue-hover);
	box-shadow: 0 8px 20px rgba(9, 99, 232, 0.28);
}

.luci-ai__ask-send span {
	display: inline-block;
	transition: transform 0.15s ease-out;
}

.luci-ai__ask-send:hover span {
	transform: translateX(3px);
}

.luci-ai__ask-send-icon {
	display: none;
}

.luci-ai__input-note {
	margin: 12px 0 0;
	font-weight: 500;
	font-size: 13px;
	color: #c2c5da;
}

@media (max-width: 960px) {
	.luci-ai {
		padding-block: clamp(56px, 12vw, 141px);
	}

	.luci-ai__inner {
		grid-template-columns: 1fr;
		padding-left: clamp(16px, 4.3vw, 32px);
	}

	.luci-ai__content {
		order: 1;
	}

	.luci-ai__visual {
		order: 2;
		margin-top: 40px;
	}

	.luci-ai__stage-image {
		width: 100%;
		height: auto;
	}

	.luci-ai__headline {
		font-size: clamp(26px, 7vw, 40px);
		line-height: 1.15;
	}

	.luci-ai__ask-input {
		height: clamp(60px, 11vw, 74px);
		padding-right: clamp(64px, 15vw, 74px);
		padding-left: clamp(16px, 4vw, 23px);
		font-size: clamp(13px, 3.2vw, 15px);
	}

	.luci-ai__ask-send {
		width: clamp(44px, 9vw, 54px);
		height: clamp(44px, 9vw, 54px);
		top: clamp(8px, 2vw, 10px);
		right: clamp(8px, 2vw, 10px);
	}
}

/* -------------------------------------------------------------------------
   One Connected Workspace — Figma node 15532:356.
   ---------------------------------------------------------------------- */
.workspace {
	background: #fefcf6;
	padding-block: 142.5px;
	overflow: hidden;
}

/*
 * Figma: text col starts x=88 (overrides, not adds to, .container's own
 * padding — same element carries both classes), col width=468 (matches
 * .workspace__body's own max-width, the widest text element), gap to
 * "Frame 9"'s left edge (x=588) is 32px — the 60px this grid used
 * before was overshooting it.
 */
.workspace__inner {
	display: grid;
	grid-template-columns: minmax(0, 468px) 1fr;
	gap: 32px;
	padding-left: 88px;
	align-items: center;
}

.workspace__eyebrow {
	margin: 0;
	font-weight: 600;
	font-size: 13px;
	color: var(--color-brand-blue);
}

.workspace__headline {
	margin: 16px 0 0;
	font-weight: 600;
	font-size: 48px;
	line-height: 54px;
	color: var(--color-ink);
}

.workspace__headline-line {
	display: block;
}

.workspace__body {
	margin: 32px 0 0;
	max-width: 468px;
	font-weight: 400;
	font-size: 17px;
	line-height: 27px;
	color: var(--color-muted);
}

.workspace__closing {
	margin: 24px 0 0;
	font-weight: 600;
	font-size: 20px;
	color: var(--color-ink);
}

.workspace__cta {
	margin-top: 24px;
}

.workspace__tagline {
	margin: 48px 0 0;
	font-weight: 600;
	font-size: 28px;
	line-height: 36px;
	color: var(--color-brand-blue);
}

.workspace__tagline-line {
	display: block;
}

.workspace__visual {
	position: relative;
	width: 100%;
	max-width: 791px;
}

.workspace__diagram-image {
	display: block;
	width: 791px;
	height: 735px;
	border-radius: 32px;
}

@media (max-width: 960px) {
	.workspace {
		padding-block: clamp(56px, 12vw, 142.5px);
	}

	.workspace__inner {
		grid-template-columns: 1fr;
		padding-left: clamp(16px, 4.3vw, 32px);
	}

	.workspace__content {
		order: 1;
	}

	.workspace__visual {
		order: 2;
		max-width: none;
		margin-top: 40px;
	}

	.workspace__diagram-image {
		width: 100%;
		height: auto;
	}

	.workspace__headline {
		font-size: clamp(26px, 7vw, 36px);
		line-height: 1.16;
	}

	.workspace__tagline {
		font-size: clamp(18px, 4.5vw, 22px);
		line-height: 1.35;
	}
}

/* -------------------------------------------------------------------------
   Pricing — Figma node 15532:491 ("Section 06 — Pricing").
   ---------------------------------------------------------------------- */
.pricing {
	padding-block: 106px;
	text-align: center;
}

.pricing__headline {
	margin: 0 auto;
	max-width: 936px;
	font-weight: 600;
	font-size: var(--text-h2);
	color: var(--color-ink);
}

.pricing__sub {
	margin: 16px auto 0;
	max-width: 602px;
	font-weight: 400;
	font-size: 18px;
	line-height: 27px;
	color: var(--color-muted);
}

.pricing__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 392px));
	justify-content: center;
	align-items: start;
	gap: 32px;
	margin-top: 64px;
	text-align: left;
}

.pricing__card {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 596px;
	background: var(--color-bg-tint);
	border: 1px solid var(--color-border);
	border-radius: 28px;
	padding: 28px 28px 32px;
}

.pricing__card--featured {
	min-height: 620px;
	margin-top: -24px;
	background: var(--color-brand-blue);
	border-color: var(--color-brand-blue);
	box-shadow: 0 18px 38px rgba(5, 26, 77, 0.18);
	color: var(--color-white);
}

/*
 * Fully inside the card (left:230,top:20,136x34 within the PRO card's
 * own box) — not floating above the border. Confirmed via fresh
 * get_design_context screenshot of node 15532:514; it only reads as
 * "elevated" because the whole card starts higher, not because the
 * badge itself overhangs the edge.
 */
.pricing__badge {
	position: absolute;
	left: 230px;
	top: 20px;
	width: 136px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-white);
	border-radius: 17px;
	font-weight: 600;
	font-size: 14px;
	color: var(--color-brand-blue);
}

.pricing__tier-name {
	margin: 0;
	font-weight: 600;
	font-size: 14px;
	color: var(--color-brand-blue);
}

.pricing__card--featured .pricing__tier-name {
	color: var(--color-white);
}

.pricing__price {
	margin: 24px 0 0;
	font-weight: 600;
	font-size: 66px;
	line-height: 72px;
	color: var(--color-ink);
}

.pricing__card--featured .pricing__price {
	color: var(--color-white);
}

.pricing__per {
	font-family: var(--font-primary);
	font-weight: 500;
	font-size: 14px;
	color: var(--color-muted);
}

.pricing__card--featured .pricing__per {
	color: #d1e8ff;
}

.pricing__description {
	margin: 12px 0 0;
	font-weight: 400;
	font-size: 16px;
	line-height: 22px;
	color: var(--color-muted);
	min-height: 44px;
}

.pricing__card--featured .pricing__description {
	color: #d1e8ff;
}

.pricing__divider {
	display: block;
	height: 1px;
	background: var(--color-border);
	margin-top: 24px;
}

.pricing__card--featured .pricing__divider {
	background: #408cf0;
}

.pricing__features {
	list-style: none;
	margin: 24px 0 0;
	padding: 0;
	flex: 1;
}

.pricing__features li {
	display: flex;
	align-items: center;
	gap: 12px;
	font-weight: 500;
	font-size: 14px;
	line-height: 19px;
	color: var(--color-ink);
	margin-bottom: 20px;
}

.pricing__card--featured .pricing__features li {
	color: var(--color-white);
}

.pricing__feature-icon {
	width: 24px;
	height: 24px;
	flex-shrink: 0;
}

.pricing__cta {
	width: 100%;
	margin-top: 16px;
	padding-block: 14px;
}

@media (max-width: 960px) {
	.pricing {
		padding-block: clamp(56px, 12vw, 106px);
	}

	.pricing__headline {
		font-size: clamp(26px, 6.5vw, var(--text-h2));
	}

	.pricing__grid {
		grid-template-columns: minmax(0, 460px);
	}

	.pricing__card--featured {
		/*
		 * Stacked full-width, Pro loses the taller/offset "elevated"
		 * treatment (doesn't make sense once the 3 cards aren't
		 * side-by-side) but keeps its blue fill + badge as the visual
		 * distinction — and is reordered first, the common mobile
		 * pricing pattern, even though it's visually the middle card
		 * on desktop.
		 */
		order: -1;
		margin-top: 0;
		min-height: 0;
	}

	/* left:230px was calibrated for the 392px desktop card; anchor to
	   the card's own right edge instead so it can't run past a
	   narrower stacked card. */
	.pricing__badge {
		left: auto;
		right: 24px;
	}

	.pricing__price {
		font-size: clamp(44px, 11vw, 66px);
		line-height: 1.1;
	}
}

/* -------------------------------------------------------------------------
   Founding Offer — Figma node 15532:564 ("Section 07 — Founding Offer").
   ---------------------------------------------------------------------- */
.founding-offer {
	padding-block: 32px;
}

.founding-offer__panel {
	position: relative;
	background: var(--color-panel-navy);
	border-radius: 42px;
	width: 100%;
	height: 656px;
	padding: 42px;
	box-sizing: border-box;
	overflow: hidden;
}

.founding-offer__sunburst {
	position: absolute;
	right: 127px;
	bottom: -31px;
	width: 433px;
	pointer-events: none;
}

/*
 * Text column — absolutely positioned at its exact Figma y-offset
 * (relative to the panel's own top, i.e. minus the 42px padding) rather
 * than a margin-driven flow, since the design's vertical rhythm here
 * isn't a uniform stack — matches the technique used for the Hero
 * labels and Social Proof logos elsewhere in this build.
 */
.founding-offer__content {
	position: relative;
	top: 48px;
	height: 524px;
	max-width: 610px;
}

.founding-offer__eyebrow {
	position: absolute;
	top: 0;
	left: 0;
	margin: 0;
	font-weight: 600;
	font-size: 13px;
	color: #cce8ff;
}

.founding-offer__headline {
	position: absolute;
	top: 46px;
	left: 0;
	margin: 0;
	width: 610px;
	font-weight: 600;
	font-size: 52px;
	line-height: 58px;
	color: var(--color-white);
}

.founding-offer__headline-line {
	display: block;
}

.founding-offer__body {
	position: absolute;
	top: 210px;
	left: 0;
	max-width: 611px;
	font-weight: 400;
	font-size: 17px;
	line-height: 27px;
	color: #ccdbf0;
}

.founding-offer__body p {
	margin: 0 0 16px;
}

.founding-offer__brand {
	position: absolute;
	top: 448px;
	left: 0;
	display: flex;
	align-items: center;
}

.founding-offer__brand-logo {
	height: 24px;
	width: auto;
}

.founding-offer__bottom-note {
	position: absolute;
	top: 480px;
	left: 0;
	margin: 0;
	max-width: 590px;
	font-weight: 500;
	font-size: 13px;
	color: #cce8ff;
}

.founding-offer__signup {
	position: absolute;
	left: 778px;
	top: 136px;
	z-index: 1;
	width: 510px;
	height: 280px;
	box-sizing: border-box;
	background: var(--color-white);
	border-radius: 26px;
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.2);
	padding: 26px 28px 28px;
}

.founding-offer__signup-title {
	margin: 0;
	font-weight: 600;
	font-size: 22px;
	color: var(--color-ink);
}

.founding-offer__form {
	margin-top: 24px;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

/*
 * Contact Form 7 wraps each field in its own <p> (default browser
 * margin) plus a hidden-fields fieldset and response-output div — this
 * theme already controls the rhythm via the flex gap above, so those
 * defaults just add extra height the fixed-size signup card wasn't
 * sized for (the small-print line was getting pushed below the card).
 */
.founding-offer__form p {
	margin: 0;
}

.founding-offer__form .wpcf7-form-control-wrap {
	display: block;
}

.founding-offer__form .hidden-fields-container,
.founding-offer__form .wpcf7-response-output:empty {
	display: none;
}

/*
 * CF7's submit spinner sits inline-block next to the button inside the
 * same <p> — even hidden (visibility:hidden), its own box takes part in
 * the line's baseline alignment, which stretched that <p> to 85px
 * around a 56px button (29px of invisible padding pushing the
 * small-print line down). Removing it from layout entirely fixes the
 * gap; it's not part of this design's visual language anyway.
 */
.founding-offer__form .wpcf7-spinner {
	display: none;
}

.founding-offer__email {
	/*
	 * Was a direct flex child of .founding-offer__form before Contact
	 * Form 7 was wired in (so flex's default align-items:stretch filled
	 * it automatically) — CF7 nests the real <input> inside its own
	 * <p><span class="wpcf7-form-control-wrap"> wrapper, so only that
	 * wrapper stretches now; the input itself falls back to its size="40"
	 * HTML attribute's intrinsic width unless told otherwise explicitly.
	 */
	width: 100%;
	box-sizing: border-box;
	height: 56px;
	background: var(--color-bg-tint);
	border: 1px solid var(--color-border);
	border-radius: 16px;
	padding: 0 18px;
	font-family: var(--font-primary);
	font-size: 14px;
	color: var(--color-ink);
}

.founding-offer__email::placeholder {
	color: var(--color-muted);
}

.founding-offer__claim-btn {
	height: 56px;
	width: 100%;
}

.founding-offer__small-print {
	margin: 12px 0 0;
	font-weight: 400;
	font-size: 11px;
	line-height: 16px;
	color: var(--color-muted);
}

@media (max-width: 960px) {
	.founding-offer {
		padding-block: clamp(16px, 4.3vw, 32px);
	}

	.founding-offer__panel {
		height: auto;
		padding: clamp(28px, 8vw, 40px) clamp(20px, 6vw, 32px);
		border-radius: clamp(28px, 7vw, 42px);
	}

	.founding-offer__content {
		position: static;
		top: auto;
		height: auto;
		max-width: none;
	}

	.founding-offer__eyebrow,
	.founding-offer__headline,
	.founding-offer__body,
	.founding-offer__brand,
	.founding-offer__bottom-note {
		position: static;
		top: auto;
		left: auto;
		width: auto;
	}

	.founding-offer__eyebrow { margin: 0; }
	.founding-offer__headline { margin: 16px 0 0; }
	.founding-offer__body { margin-top: 40px; }
	.founding-offer__brand { margin-top: 40px; }
	.founding-offer__bottom-note { margin: 12px 0 0; }

	.founding-offer__signup {
		position: static;
		width: auto;
		height: auto;
		max-width: none;
		margin-top: 32px;
	}

	.founding-offer__headline {
		font-size: clamp(28px, 7.2vw, 38px);
		line-height: 1.16;
	}

	/*
	 * 433px fixed is wider than the whole panel well before mobile —
	 * scale it down with the panel instead of letting overflow:hidden
	 * crop it into a random shape.
	 */
	.founding-offer__sunburst {
		right: -15%;
		bottom: -8%;
		width: 62%;
	}
}