/*
	Brand pages: /, /organizers, /crew, /suppliers (www/home.html and the others).
	Version 2 tokens from guest-tokens.css. Logical properties only, so Arabic mirrors.
	See docs/marketing/brand-page-plan.md.
*/

/* Arabic display text uses the Arabic face: Instrument Serif has no Arabic letters. */
.ef-brand:lang(ar) .ef-hero__title,
.ef-brand:lang(ar) .ef-section__title,
.ef-brand:lang(ar) .ef-cta__title {
	font-family: var(--ef-font-ar);
	font-weight: 600;
	letter-spacing: 0;
}

.ef-eyebrow {
	margin: 0 0 var(--ef-space-12);
	color: var(--ef-text-accent);
	font: 600 12px/16px var(--ef-font-ui);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.ef-brand:lang(ar) .ef-eyebrow {
	letter-spacing: 0;
	font-size: 14px;
	line-height: 20px;
}

/* Hero */

.ef-hero {
	padding-block: var(--ef-space-40) var(--ef-space-48);
	overflow: hidden;
}

.ef-hero__inner {
	display: grid;
	gap: var(--ef-space-40);
	align-items: center;
}

.ef-hero__title {
	margin: 0;
	color: var(--ef-text-primary);
	font: 400 40px/44px var(--ef-font-display);
	letter-spacing: -0.01em;
	text-wrap: balance;
}

.ef-brand:lang(ar) .ef-hero__title {
	font-size: 34px;
	line-height: 48px;
}

.ef-hero__lead {
	margin: var(--ef-space-16) 0 0;
	max-width: 34em;
	color: var(--ef-text-secondary);
	font: 400 17px/26px var(--ef-font-ui);
}

.ef-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ef-space-12);
	margin-top: var(--ef-space-24);
}

.ef-hero__note {
	display: flex;
	align-items: center;
	gap: var(--ef-space-8);
	margin: var(--ef-space-16) 0 0;
	color: var(--ef-text-secondary);
	font: 500 14px/20px var(--ef-font-ui);
}

.ef-hero__note .ef-icon {
	color: var(--ef-success-solid);
}

.ef-hero__visual {
	position: relative;
	padding-block-end: var(--ef-space-24);
}

.ef-hero__visual--phones {
	display: flex;
	justify-content: center;
	gap: var(--ef-space-16);
}

.ef-hero__visual--phones .ef-device--phone {
	width: min(44%, 220px);
}

.ef-hero__visual--phones .ef-device--phone + .ef-device--phone {
	margin-block-start: var(--ef-space-40);
}

@media (min-width: 768px) {
	.ef-hero { padding-block: var(--ef-space-64); }
	.ef-hero__title { font-size: 56px; line-height: 60px; }
	.ef-brand:lang(ar) .ef-hero__title { font-size: 44px; line-height: 60px; }
}

@media (min-width: 1100px) {
	.ef-hero__inner { grid-template-columns: 5fr 6fr; gap: var(--ef-space-64); }
	.ef-hero__title { font-size: 64px; line-height: 68px; }
	.ef-hero--compact .ef-hero__title { font-size: 52px; line-height: 58px; }
	.ef-brand:lang(ar) .ef-hero--compact .ef-hero__title { font-size: 40px; line-height: 56px; }
}

/* Device frames. The screenshot fills the screen; a missing one leaves a quiet empty frame. */

.ef-device {
	margin: 0;
	background: var(--ef-bg-surface);
	box-shadow: var(--ef-elevation-3);
}

.ef-device__screen {
	position: relative;
	overflow: hidden;
	background: var(--ef-bg-subtle);
}

.ef-device__screen img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top;
}

.ef-device__empty {
	position: absolute;
	inset: 0;
	background: linear-gradient(var(--ef-bg-subtle), var(--ef-bg-canvas));
}

.ef-device--desktop {
	padding: 6px;
	border: 1px solid var(--ef-border-default);
	border-radius: var(--ef-radius-lg);
}

.ef-device--desktop .ef-device__screen {
	aspect-ratio: 16 / 10;
	border-radius: calc(var(--ef-radius-lg) - 4px);
}

.ef-device--phone {
	width: 220px;
	padding: 7px;
	border-radius: 34px;
	background: var(--ef-neutral-950);
}

.ef-device--phone .ef-device__screen {
	aspect-ratio: 9 / 19.5;
	border-radius: 27px;
}

/* The phone in front of the desktop in the hero. */
.ef-device--overlap {
	position: absolute;
	inset-inline-end: var(--ef-space-16);
	inset-block-end: 0;
	width: 30%;
	max-width: 190px;
	padding: 5px;
	border-radius: 26px;
}

.ef-device--overlap .ef-device__screen {
	border-radius: 21px;
}

/* Facts strip */

.ef-facts {
	border-block: 1px solid var(--ef-border-default);
	background: var(--ef-bg-surface);
}

.ef-facts__list {
	display: grid;
	gap: var(--ef-space-12);
	margin: 0;
	padding-block: var(--ef-space-20);
	list-style: none;
}

.ef-facts__list li {
	display: flex;
	align-items: center;
	gap: var(--ef-space-12);
	color: var(--ef-text-primary);
	font: 500 15px/22px var(--ef-font-ui);
}

.ef-facts__list .ef-icon {
	flex-shrink: 0;
	color: var(--ef-text-accent);
}

@media (min-width: 768px) {
	.ef-facts__list { grid-template-columns: repeat(3, 1fr); padding-block: var(--ef-space-24); }
	.ef-facts__list li { justify-content: center; }
}

/* Sections */

.ef-section {
	padding-block: var(--ef-space-48);
}

.ef-section--subtle {
	background: var(--ef-bg-subtle);
}

.ef-section__title {
	margin: 0;
	color: var(--ef-text-primary);
	font: 400 34px/40px var(--ef-font-display);
	text-wrap: balance;
}

.ef-section__lead {
	margin: var(--ef-space-12) 0 0;
	max-width: 40em;
	color: var(--ef-text-secondary);
	font: 400 16px/24px var(--ef-font-ui);
}

.ef-section__note {
	display: flex;
	align-items: flex-start;
	gap: var(--ef-space-8);
	margin: var(--ef-space-32) 0 0;
	color: var(--ef-text-secondary);
	font: 400 14px/20px var(--ef-font-ui);
}

.ef-section__note .ef-icon {
	flex-shrink: 0;
	margin-block-start: 2px;
}

@media (min-width: 768px) {
	.ef-section { padding-block: var(--ef-space-64); }
	.ef-section__title { font-size: 44px; line-height: 48px; }
	.ef-brand:lang(ar) .ef-section__title { font-size: 34px; line-height: 48px; }
}

/* Who it is for */

.ef-audiences {
	display: grid;
	gap: var(--ef-space-16);
	margin-top: var(--ef-space-32);
}

.ef-audience {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--ef-space-8);
	padding: var(--ef-space-16);
	border: 1px solid var(--ef-border-default);
	border-radius: var(--ef-radius-lg);
	background: var(--ef-bg-surface);
	color: inherit;
	text-decoration: none;
	transition: border-color 150ms ease, box-shadow 150ms ease;
}

.ef-audience:hover {
	border-color: var(--ef-border-strong);
	box-shadow: var(--ef-elevation-1);
}

.ef-audience__visual {
	display: flex;
	justify-content: center;
	height: 200px;
	margin-block-end: var(--ef-space-8);
	overflow: hidden;
	border-radius: var(--ef-radius-md);
	background: var(--ef-bg-subtle);
}

.ef-audience__visual .ef-device {
	box-shadow: var(--ef-elevation-1);
}

.ef-audience__visual--desktop {
	align-items: flex-start;
	justify-content: flex-start;
	padding-block-start: var(--ef-space-16);
	padding-inline-start: var(--ef-space-16);
}

.ef-audience__visual--desktop .ef-device {
	width: 520px;
	flex-shrink: 0;
}

.ef-audience__visual--phone {
	align-items: flex-start;
	padding-block-start: var(--ef-space-16);
}

.ef-audience__visual--phone .ef-device {
	width: 150px;
	padding: 5px;
	border-radius: 24px;
}

.ef-audience__visual--phone .ef-device__screen {
	border-radius: 19px;
}

.ef-audience__title {
	color: var(--ef-text-primary);
	font: 600 20px/26px var(--ef-font-ui);
}

.ef-audience__body {
	flex: 1;
	color: var(--ef-text-secondary);
	font: 400 15px/22px var(--ef-font-ui);
}

.ef-audience__link {
	display: inline-flex;
	align-items: center;
	gap: var(--ef-space-4);
	margin-top: var(--ef-space-8);
	color: var(--ef-text-accent);
	font: 600 15px/22px var(--ef-font-ui);
}

@media (min-width: 768px) {
	.ef-audiences { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1200px) {
	.ef-audiences { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Feature rows on /organizers */

.ef-features {
	display: grid;
	gap: var(--ef-space-64);
}

.ef-feature {
	display: grid;
	gap: var(--ef-space-24);
	align-items: center;
}

.ef-feature__title {
	margin: var(--ef-space-12) 0 0;
	color: var(--ef-text-primary);
	font: 600 26px/32px var(--ef-font-ui);
	letter-spacing: -0.005em;
	text-wrap: balance;
}

.ef-feature__body {
	margin: var(--ef-space-12) 0 0;
	max-width: 32em;
	color: var(--ef-text-secondary);
	font: 400 16px/26px var(--ef-font-ui);
}

.ef-feature__visual {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	gap: var(--ef-space-16);
	padding: var(--ef-space-24);
	border-radius: var(--ef-radius-xl);
	background: var(--ef-bg-subtle);
}

.ef-feature__visual .ef-device--desktop {
	width: 100%;
}

.ef-feature__visual .ef-device--phone {
	width: min(46%, 240px);
}

/* A desktop and a phone: the phone sits over the corner of the desktop. */
.ef-feature__visual--2:has(.ef-device--desktop) {
	position: relative;
	padding-block-end: var(--ef-space-48);
}

.ef-feature__visual--2 .ef-device--desktop + .ef-device--desktop {
	display: none;
}

.ef-feature__visual--2 .ef-device--desktop + .ef-device--phone {
	position: absolute;
	inset-inline-end: var(--ef-space-24);
	inset-block-end: var(--ef-space-16);
	width: 28%;
	max-width: 170px;
	padding: 5px;
	border-radius: 24px;
}

.ef-feature__visual--2 .ef-device--desktop + .ef-device--phone .ef-device__screen {
	border-radius: 19px;
}

.ef-feature__visual--2 .ef-device--phone + .ef-device--phone {
	margin-block-start: var(--ef-space-40);
}

@media (min-width: 1000px) {
	.ef-features { gap: var(--ef-space-64); }
	.ef-feature { grid-template-columns: 4fr 7fr; gap: var(--ef-space-64); }
	.ef-feature--flip { grid-template-columns: 7fr 4fr; }
	.ef-feature--flip .ef-feature__copy { order: 2; }
	.ef-feature__title { font-size: 32px; line-height: 38px; }
	.ef-feature__visual { padding: var(--ef-space-40); }
	.ef-feature__visual--2 .ef-device--desktop + .ef-device--desktop { display: block; }
	.ef-feature__visual--2:has(.ef-device--desktop + .ef-device--desktop) {
		display: grid;
		grid-template-columns: 1fr;
		padding-block-end: var(--ef-space-40);
	}
}

/* Core and Advanced labels */

.ef-module-label {
	display: inline-flex;
	align-items: center;
	height: 26px;
	padding-inline: 10px;
	border-radius: var(--ef-radius-full);
	background: var(--ef-success-bg);
	color: var(--ef-success-fg);
	font: 600 12px/16px var(--ef-font-ui);
}

.ef-module-label--advanced {
	background: var(--ef-accent-subtle);
	color: var(--ef-text-accent);
}

/* More modules: cards without screenshots */

.ef-modules {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--ef-space-16);
	margin: var(--ef-space-32) 0 0;
	padding: 0;
	list-style: none;
}

.ef-modules__item {
	min-width: 0;
	padding: var(--ef-space-24);
	border: 1px solid var(--ef-border-default);
	border-radius: var(--ef-radius-xl);
	background: var(--ef-bg-surface);
}

.ef-modules__title {
	margin: var(--ef-space-12) 0 0;
	color: var(--ef-text-primary);
	font: 600 18px/24px var(--ef-font-ui);
}

.ef-modules__body {
	margin: var(--ef-space-8) 0 0;
	color: var(--ef-text-secondary);
	font: 400 15px/24px var(--ef-font-ui);
}

@media (min-width: 640px) {
	.ef-modules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
	.ef-modules { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Pricing */

.ef-plans {
	display: grid;
	gap: var(--ef-space-16);
	margin-top: var(--ef-space-32);
}

.ef-plan {
	display: flex;
	flex-direction: column;
	gap: var(--ef-space-16);
	padding: var(--ef-space-24);
	border: 1px solid var(--ef-border-default);
	border-radius: var(--ef-radius-xl);
	background: var(--ef-bg-surface);
}

.ef-plan--advanced {
	border-color: var(--ef-accent-default);
}

.ef-plan__name {
	margin: 0;
	color: var(--ef-text-secondary);
	font: 600 13px/18px var(--ef-font-ui);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.ef-brand:lang(ar) .ef-plan__name {
	letter-spacing: 0;
	font-size: 15px;
}

.ef-plan__price {
	margin: 0;
	color: var(--ef-text-primary);
	font: 600 28px/34px var(--ef-font-ui);
}

.ef-plan__list {
	display: grid;
	gap: var(--ef-space-12);
	flex: 1;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ef-plan__list li {
	display: flex;
	align-items: flex-start;
	gap: var(--ef-space-8);
	color: var(--ef-text-primary);
	font: 400 15px/22px var(--ef-font-ui);
}

.ef-plan__list .ef-icon {
	flex-shrink: 0;
	margin-block-start: 3px;
	color: var(--ef-success-solid);
}

.ef-plan__note {
	margin: 0;
	color: var(--ef-text-secondary);
	font: 400 13px/18px var(--ef-font-ui);
}

@media (min-width: 768px) {
	.ef-plans { grid-template-columns: repeat(2, 1fr); max-width: 880px; }
}

/* Questions */

.ef-faq {
	max-width: 880px;
}

.ef-faq .ef-section__title {
	margin-block-end: var(--ef-space-24);
}

.ef-faq__item {
	border-block-end: 1px solid var(--ef-border-default);
}

.ef-faq__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ef-space-16);
	min-height: 56px;
	padding-block: var(--ef-space-12);
	color: var(--ef-text-primary);
	font: 600 17px/24px var(--ef-font-ui);
	cursor: pointer;
	list-style: none;
}

.ef-faq__question::-webkit-details-marker {
	display: none;
}

.ef-faq__question .ef-icon {
	flex-shrink: 0;
	transition: transform 150ms ease;
}

.ef-faq__item[open] .ef-faq__question .ef-icon {
	transform: rotate(180deg);
}

.ef-faq__answer {
	margin: 0;
	padding-block-end: var(--ef-space-16);
	max-width: 40em;
	color: var(--ef-text-secondary);
	font: 400 16px/26px var(--ef-font-ui);
}

/* Contact us */

.ef-contact {
	display: grid;
	gap: var(--ef-space-32);
}

.ef-contact__email {
	display: flex;
	align-items: center;
	gap: var(--ef-space-8);
	margin: var(--ef-space-16) 0 0;
	font: 500 15px/22px var(--ef-font-ui);
}

.ef-contact__email a {
	color: var(--ef-text-accent);
}

.ef-contact__form {
	display: grid;
	gap: var(--ef-space-20);
	padding: var(--ef-space-24);
	border: 1px solid var(--ef-border-default);
	border-radius: var(--ef-radius-xl);
	background: var(--ef-bg-surface);
}

.ef-contact__grid {
	display: grid;
	gap: var(--ef-space-16);
}

.ef-contact__set {
	margin: 0;
	padding: 0;
	border: 0;
}

.ef-contact__checks {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ef-space-8);
	margin-top: var(--ef-space-8);
}

.ef-check {
	display: inline-flex;
	align-items: center;
	gap: var(--ef-space-8);
	min-height: 44px;
	padding-inline: var(--ef-space-12);
	border: 1px solid var(--ef-border-strong);
	border-radius: var(--ef-radius-md);
	color: var(--ef-text-primary);
	font: 500 14px/20px var(--ef-font-ui);
	cursor: pointer;
}

.ef-check:has(input:checked) {
	border-color: var(--ef-accent-default);
	background: var(--ef-accent-subtle);
}

.ef-check input {
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--ef-accent-default);
}

.ef-check--consent {
	align-items: flex-start;
	padding: var(--ef-space-12);
	border: 0;
	background: var(--ef-bg-subtle);
	font-weight: 400;
}

.ef-check--consent:has(input:checked) {
	background: var(--ef-bg-subtle);
}

.ef-check--consent input {
	margin-block-start: 1px;
	flex-shrink: 0;
}

.ef-check--consent a {
	color: var(--ef-text-accent);
}

.ef-field__input--area {
	height: auto;
	padding-block: var(--ef-space-12);
	resize: vertical;
}

/* The honeypot stays in the page for bots but out of sight and out of the tab order. */
.ef-contact__trap {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
}

.ef-contact__status {
	margin: 0;
	font: 500 15px/22px var(--ef-font-ui);
}

.ef-contact__status:empty {
	display: none;
}

.ef-contact__status[data-state="sent"] {
	color: var(--ef-success-fg);
}

.ef-contact__status[data-state="error"] {
	color: var(--ef-danger-fg);
}

@media (min-width: 768px) {
	.ef-contact__grid { grid-template-columns: repeat(2, 1fr); }
	.ef-contact__form { padding: var(--ef-space-32); }
}

@media (min-width: 1000px) {
	.ef-contact { grid-template-columns: 4fr 7fr; gap: var(--ef-space-64); align-items: start; }
}

/* Steps on /crew and /suppliers */

.ef-steps {
	display: grid;
	gap: var(--ef-space-24);
	margin: var(--ef-space-32) 0 0;
	padding: 0;
	list-style: none;
}

.ef-step {
	padding: var(--ef-space-24);
	border: 1px solid var(--ef-border-default);
	border-radius: var(--ef-radius-lg);
	background: var(--ef-bg-surface);
}

.ef-step__number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: var(--ef-radius-full);
	background: var(--ef-accent-subtle);
	color: var(--ef-text-accent);
	font: 600 16px/1 var(--ef-font-ui);
}

.ef-step__title {
	margin: var(--ef-space-16) 0 0;
	color: var(--ef-text-primary);
	font: 600 20px/26px var(--ef-font-ui);
}

.ef-step__body {
	margin: var(--ef-space-8) 0 0;
	color: var(--ef-text-secondary);
	font: 400 15px/24px var(--ef-font-ui);
}

@media (min-width: 768px) {
	.ef-steps { grid-template-columns: repeat(3, 1fr); }
}

/* Closing call to action */

.ef-cta {
	padding-block: var(--ef-space-64);
	background: var(--ef-bg-inverse);
	color: var(--ef-text-inverse);
}

.ef-cta__inner {
	text-align: center;
}

.ef-cta__title {
	margin: 0 auto;
	max-width: 18em;
	font: 400 36px/42px var(--ef-font-display);
	text-wrap: balance;
}

.ef-cta__body {
	margin: var(--ef-space-16) auto 0;
	max-width: 32em;
	opacity: 0.8;
	font: 400 17px/26px var(--ef-font-ui);
}

.ef-cta__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--ef-space-12);
	margin-top: var(--ef-space-24);
}

/* The secondary button on the dark band keeps its light fill. */
.ef-cta .ef-btn--secondary {
	border-color: transparent;
}

@media (min-width: 768px) {
	.ef-cta__title { font-size: 48px; line-height: 54px; }
	.ef-brand:lang(ar) .ef-cta__title { font-size: 36px; line-height: 52px; }
}

/* Mobile top bar on the brand pages: language and the main action. */
.ef-brand .ef-topbar__actions {
	gap: var(--ef-space-8);
}

.ef-brand .ef-topbar .ef-btn {
	height: 40px;
	padding-inline: var(--ef-space-16);
}