/* Font: Futura Regular */
@font-face {
	font-family: "Futura";
	src: local("Futura"), local("Futura Regular"),
		url("Futura Regular.ttf") format("truetype");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/* Make the component scale with its parent using container queries */
.promo {
	/* acts as a size container so child styles can use cqi units */
	container-type: inline-size;

	/* sizing */
	width: 100%;
	max-width: 36rem; /* caps on very large parents; tweak as needed */
	margin: 0 auto;
	padding: 0 4cqi; /* fluid side padding */

	/* typography scales with parent width */
	font-family: "Futura", "Futura PT", Arial, sans-serif;
	font-size: clamp(14px, 2.5cqi, 18px); /* fluid base font size */
	color: #222;
	box-sizing: border-box;
}

/* Headings & subtitle with fluid sizes and spacing */
.promo h1 {
	margin: 0 0 0.35em; /* a little closer to subtitle */
	font-size: clamp(1.8rem, 8cqi, 2.4rem); /* slightly larger */
	font-weight: 700;
	text-align: center;
}
.promo .subtitle {
	margin: 0 0 clamp(1.2rem, 8cqi, 2rem); /* larger, fluid gap before tabs */
	color: #556;
	font-size: 0.9em;
	text-align: center;
}

/* Tabs */
.tabs {
	display: flex;
	gap: clamp(.4rem, 2.5cqi, .9rem);
	margin-bottom: clamp(1rem, 5cqi, 1.5rem);
}
.tab {
	flex: 1;
	padding: clamp(.55rem, 2.8cqi, .9rem) clamp(.8rem, 3cqi, 1.2rem);
	border-radius: 999px;
	border: 1px solid #c9d6d5;
	background: #fff;
	color: #222;
	cursor: pointer;
	font-weight: 600;
	transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
	box-sizing: border-box;
	font-size: 1em; /* inherit base scaling */
}
.tab:hover {
	box-shadow: 0 1px 2px rgba(0,0,0,.06);
}
.tab.is-active,
.tab[aria-selected="true"] {
	background: #000;
	border-color: #000;
	color: #fff;
}

/* Panels */
.panel {
	margin-top: clamp(.4rem, 2cqi, .75rem);
}
.is-hidden {
	display: none;
}

/* Vertical rhythm inside panels */
.panel > * + * {
	margin-top: clamp(.8rem, 4cqi, 1.2rem);
}

/* Form */
/* Hide the "Email" and "Phone" labels above inputs (we kept them in HTML for a11y) */
.promo .panel label {
	display: none;
}

label {
	display: block;
	margin: 0 0 .35rem;
	color: #333;
	font-size: 0.9em;
}

input[type="email"],
input[type="tel"] {
	display: block;
	width: 100%;
	padding: clamp(.7rem, 3.2cqi, 1rem) clamp(.9rem, 3.5cqi, 1.1rem);
	border: 1px solid #d5d9dc;
	border-radius: 8px;
	font-size: 1em; /* follows fluid base */
	outline: none;
	transition: border-color .15s ease, box-shadow .15s ease;
	box-sizing: border-box;
}
input[type="email"]::placeholder,
input[type="tel"]::placeholder {
	color: #9aa3ab;
}
input[type="email"]:focus,
input[type="tel"]:focus {
	border-color: #000;
	box-shadow: 0 0 0 3px rgba(0,0,0,.15);
}

/* CTA */
.cta {
	display: block;
	width: 100%;
	margin-top: clamp(1rem, 5cqi, 1.6rem);
	padding: clamp(1rem, 4cqi, 1.25rem);
	border: none;
	border-radius: 999px;
	background: #000;
	color: #fff;
	font-weight: 700;
	font-size: clamp(1rem, 3.2cqi, 1.25rem); /* larger and fluid */
	cursor: pointer;
	transition: transform .05s ease, filter .15s ease, box-shadow .15s ease;
	box-sizing: border-box;
}
.cta:hover {
	filter: brightness(1.02);
	box-shadow: 0 6px 18px rgba(0,0,0,.35);
}
.cta:active {
	transform: translateY(1px);
}

/* Footnote */
.footnote {
	text-align: center;
	color: #9aa3ab;
	font-size: clamp(.9rem, 2.6cqi, 1rem); /* increased size */
	margin: clamp(.7rem, 3cqi, 1rem) 0 0;
}

/* Fallback for browsers without container queries: switch to viewport fluidity */
@supports not (container-type: inline-size) {
	.promo {
		padding: 0 4vw;
		font-size: clamp(14px, 2.2vw, 18px);
	}
	.promo h1 { font-size: clamp(1.8rem, 7vw, 2.4rem); margin-bottom: .35em; }
	.tabs { gap: clamp(.4rem, 2.5vw, .9rem); }
	.tab { padding: clamp(.55rem, 2.8vw, .9rem) clamp(.8rem, 3vw, 1.2rem); }
	.panel > * + * { margin-top: clamp(.8rem, 4vw, 1.2rem); }
	.cta { font-size: clamp(1rem, 2.6vw, 1.25rem); padding: clamp(1rem, 3.5vw, 1.25rem); }
	.footnote { font-size: clamp(.9rem, 2.2vw, 1rem); }
}

@media (orientation: landscape) {
  .promo {
    font-size: clamp(14px, 1.6cqi, 16px);
  }
  .promo h1 {
    font-size: clamp(1.6rem, 5cqi, 2rem);
  }
  .cta {
    font-size: clamp(0.9rem, 2cqi, 1.1rem);
    padding: clamp(0.8rem, 3cqi, 1rem);
  }
  .tab {
    padding: clamp(.45rem, 2cqi, .75rem) clamp(.7rem, 2.5cqi, 1rem);
  }
}