website/_sass/base.scss

@charset "utf-8";

:root {
	--dark: #0f0f0f;
	--grey: #6f6f6f;
	--grey-mid: #ccc;
	--grey-light: #e7e7e7;
	--blue-base: #ecf6fd;
	--blue-light: #e7f1ff;
	--blue-mid: #c7e8ff;
	--blue-dirty: #2e6aea;
	--turq: #a3f1fc;
	--violet: #da93ff;
	--pink: #f048b5;
	--purple: #7c4dff;
}

@font-face {
	font-family: "Plus Jakarta Sans";
	src: url("/assets/fonts/PlusJakartaSans-ExtraLight.otf") format("opentype");
	font-weight: 200;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Plus Jakarta Sans";
	src: url("/assets/fonts/PlusJakartaSans-Light.otf") format("opentype");
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Plus Jakarta Sans";
	src: url("/assets/fonts/PlusJakartaSans-Regular.otf") format("opentype");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Plus Jakarta Sans";
	src: url("/assets/fonts/PlusJakartaSans-Medium.otf") format("opentype");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Plus Jakarta Sans";
	src: url("/assets/fonts/PlusJakartaSans-SemiBold.otf") format("opentype");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Plus Jakarta Sans";
	src: url("/assets/fonts/PlusJakartaSans-Bold.otf") format("opentype");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Plus Jakarta Sans";
	src: url("/assets/fonts/PlusJakartaSans-ExtraBold.otf") format("opentype");
	font-weight: 800;
	font-style: normal;
	font-display: swap;
}

$base-font-family: "Plus Jakarta Sans", sans-serif !default;
$base-font-size: 1.3rem !default;
$mobile-font-size: 1.125rem !default;
$base-line-height: 1.5 !default;
$container-width: 95% !default;
$container-max-width: 1440px !default;

html,
body {
	min-height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
	overflow-x: hidden;
	background: radial-gradient(circle at 50% 25%, white 0%, transparent 60%)
			no-repeat,
		var(--blue-light);
}

html {
	scroll-behavior: smooth;
}
*,
*::before,
*::after {
	box-sizing: border-box;
}

* {
	font-family: "Plus Jakarta Sans", sans-serif;
}

article {
	font-family: "Plus Jakarta Sans", sans-serif;
}

p,
li,
a,
small,
em {
	line-height: 1.3;
	padding: 0;
}

strong {
	font-weight: 600;
}

.container {
	width: $container-width;
	max-width: $container-max-width;
	margin-right: auto;
	margin-left: auto;
}

.center {
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

h1,
h2,
h3,
h4 {
	font-weight: 600; /* SemiBold */
	margin: 0 0 2rem 0;
}

h1 {
	font-size: clamp(3.5rem, 10vw, 5rem);
	line-height: 1.1;
}

h2 {
	font-size: clamp(2.5rem, 10vw, 4.5rem);
	line-height: 1.1;
}

h3 {
	font-size: clamp(1.4rem, 3vw, 2.1rem);
	margin: 0 0 1.5rem 0;
}

h4 {
	font-size: 1.1rem;
}

p,
li {
	font-weight: 300;
	font-size: clamp(1rem, 2vw, 1.125rem);
}

a {
	color: var(--dark);
	transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
	text-decoration: none;
}

a:hover {
	text-decoration: none;
	color: var(--pink);
	transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}

small {
	font-weight: 300;
}

em {
	font-weight: 400;
}

.hero {
	display: flex;
	position: relative;
}

.hero-title {
	max-width: 600px;
	margin-top: 16.5rem;
}

.subtext {
	font-size: clamp(1.25rem, 2.5vw, 1.4rem);
	max-width: 600px;
	line-height: 1.5;
	margin: 0 0 2.5rem 0;
}

/* BUTTONS */

.btn {
	display: inline-block;
	text-align: center;
	padding: 0.9rem 2.1rem 1rem 2.1rem;
	border-radius: 10px;
	font-size: clamp(1rem, 2.5vw, 1.2rem);
	font-weight: 600;
	text-decoration: none;
	background: var(--dark);
	color: white;
	opacity: 0.95;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.btn-secondary {
	background: transparent;
	color: var(--dark);
	font-size: clamp(1rem, 2.5vw, 1.2rem);
	box-shadow: none;
}

.fade-in {
	opacity: 0;
	animation: fadeIn ease 1.1s forwards;
}

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

/* HEADER NAVBAR */

.header-navbar {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 9999;
}

.nav-container {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1.5rem 2rem;
	margin: 0 auto;
}

.nav-menu {
	display: flex;
	gap: 2rem;
	font-weight: 400;
	font-size: 1.15rem;
	padding-left: 2rem;
	align-items: center;
}

.nav-menu,
.nav-dropdown-toggle {
	font-weight: 400;
	font-size: 1.15rem;
}

.nav-dropdown {
	position: relative;
}

.nav-dropdown-toggle {
	background: none;
	border: none;
	display: flex;
	align-items: center;
	gap: 0.3rem;
	color: var(--dark);
	cursor: pointer;
	padding: 0;
}

.nav-caret-icon {
	width: 18px;
	height: auto;
	transition: transform 0.2s ease;
}

.nav-dropdown.open .nav-caret-icon {
	transform: rotate(180deg);
}

.nav-dropdown-menu {
	position: absolute;
	top: 100%;
	left: 0;
	background: white;
	border-radius: 6px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
	padding: 0.75rem 0.5rem 0.75rem 0;
	display: none;
	z-index: 9999;
}

.nav-dropdown-menu li {
	list-style: none;
}

.nav-dropdown-menu li a {
	display: block;
	padding: 0.5rem 1.2rem;
	color: var(--dark);
	text-decoration: none;
	white-space: nowrap;
}

.nav-dropdown-menu li a:hover {
	color: var(--pink);
}

.nav-logo img {
	height: auto;
	width: 100%;
	max-width: 50px;
	display: block;
	opacity: 0.85;
}

.nav-logo img:hover,
.btn:hover {
	opacity: 1;
}

.nav-logo {
	max-width: 50px;
}

/* ======== LANDING ======== */

.hero.landing {
	min-height: 100svh;
	background-image: linear-gradient(
			rgba(255, 255, 255, 0.3),
			rgba(255, 255, 255, 0.3)
		),
		url(/assets/imgs/hero-glass-flow.jpeg);
	background-size: 125%;
	background-position-y: 0vh;
	background-repeat: no-repeat;
	display: flex;
	position: relative;
	background-color: var(--blue-base); /* Fallback color */
	backface-visibility: hidden;
	transform: translateZ(0);
}

.subtext.landing {
	max-width: 650px;
}

// ======== FOOTER ======== //

.site-footer {
	background-color: var(--dark);
	color: white;
	padding: 4rem 0 3.5rem 0;
}

.footer-mobile {
	display: none;
}

.footer-desktop {
	display: block;
}

.footer-top {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	flex-wrap: wrap;
}

.footer-logo {
	align-items: flex-start;
	display: flex;
	flex-direction: row;
	gap: 0.75rem;
}

.footer-logo img {
	max-width: 200px;
}

.footer-links {
	display: flex;
	gap: 8rem;
	flex-wrap: wrap;
	padding-right: 1rem;
}

.footer-column {
	display: flex;
	flex-direction: column;
	gap: 1.1rem;
}

.footer-column h4 {
	font-weight: 600;
	font-size: 1.1rem;
	margin-top: 0;
	margin-bottom: 0.5rem;
}

.footer-column a {
	color: var(--grey-mid);
	text-decoration: none;
	font-weight: 400;
	font-size: 1.1rem;
	transition: color 0.2s ease-in-out;
}

.footer-column a:hover {
	color: var(--pink);
}

// -------- FOOTER BOTTOM ---------//

.footer-middle,
.footer-bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
}

.footer-middle {
	border-top: 1px solid var(--grey-mid);
	margin-top: 3rem;
	padding-top: 1.5rem;
}

.footer-heading {
	font-size: 1.3rem;
	font-weight: 500;
	margin: 0.75rem 0;
}

.footer-subheading,
.copyright {
	font-size: 1.1rem;
	color: var(--grey-mid);
	margin: 0;
	line-height: 1.7rem;
}

.social-icons {
	display: flex;
	gap: 16px;
}

.social-icons img {
	height: 26px;
	width: 26px;
	opacity: 0.85;
	transition: opacity 0.3s ease;
	transition: filter 0.3s ease;
}

.social-icons img:hover {
	opacity: 1;
	filter: brightness(1.5);
}

// ======== PRICING - HERO TILES ======== //

.pricing-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(1rem, 2vw, 1.5rem);
	margin-top: 6rem;
}

.pricing-card {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 100%;
	padding: clamp(1rem, 2.5vw, 1.5rem) clamp(1.2rem, 3vw, 1.75rem);
	border-radius: 20px;
	background: white;
	border: 1px solid rgba(0, 0, 0, 0.06);
	box-shadow: 0 6px 24px rgba(46, 106, 234, 0.2), 0 2px 6px rgba(0, 0, 0, 0.06);
	color: var(--dark);
	text-decoration: none;
	transition: transform 150ms ease, box-shadow 150ms ease,
		border-color 150ms ease;
	min-height: 8.2rem;
}

.pricing-card:focus-visible {
	outline: 2px solid var(--violet);
	outline-offset: 2px;
}

.card-title {
	font-weight: 600;
	font-size: clamp(1.25rem, 2.5vw, 1.4rem);
	line-height: 1.3;
	margin: 0 1.5rem 0.5rem 0;
}

.card-body {
	font-size: clamp(1rem, 2.5vw, 1.2rem);
	color: #4a4a4a;
	margin: 0;
	padding-right: 3rem;
}

/* --- Corner arrow --- */
.card-corner {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 18px;
	height: 18px;
	color: #111;
	opacity: 0.85;
	transition: opacity 150ms ease, transform 150ms ease;
}

.pricing-card:hover .card-corner {
	opacity: 1;
}

.pricing-card:hover {
	box-shadow: 0 10px 30px rgba(46, 106, 234, 0.2),
		0 4px 12px rgba(0, 0, 0, 0.08);
}

.corner-icon {
	display: block;
	width: 100%;
	height: 100%;
}

// ======= OPEN SOURCE CTA ======== //

.open-source {
	margin: 6rem 7rem 6rem 7rem;
	padding: 7rem 0;
}

.open-source-container {
	display: inline-flex;
	align-items: center;
	gap: clamp(1rem, 2vw, 2.25rem);
	max-width: min(1200px, 92vw);
}

.open-source-img {
	width: clamp(420px, 46vw, 620px);
	height: auto;
	display: block;
}

.tag-pill {
	display: inline-block;
	font-weight: 400;
	font-size: 1.2rem;
	padding: 0.2rem 0.9rem 0.4rem 0.9rem;
	border-radius: 999px;
	background: var(--blue-mid);
	margin-bottom: 1rem;
}

.open-source-cta {
	margin-top: 4rem;
}

.open-source-content {
	max-width: 430px;
}

.subtext.oss {
	margin: 0 0 4rem 0;
}

// --- PRICING CARDS --- //

.plans__head {
	text-align: center;
	margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}
.plans__title {
	margin: 0.75rem 0 2.3rem 0;
}

.subtext.pricing-plans,
.subtext.compare-plans {
	max-width: 100%;
}

/* --- Cards grid --- */
.plans__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(1.1rem, 2vw, 2rem);
}

// --- Card base --- //
.plan-card {
	background: white;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 30px;
	padding: clamp(1.5rem, 2.5vw, 2.3rem);
	box-shadow: 0 6px 24px rgba(46, 106, 234, 0.1), 0 2px 6px rgba(0, 0, 0, 0.06);
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
}
.plan-card__primary {
	box-shadow: 0 10px 34px rgba(46, 106, 234, 0.15),
		0 6px 16px rgba(0, 0, 0, 0.08);
}

.plan-card__name {
	margin: 0;
	font-weight: 600;
	font-size: 2rem;
}
.plan-card__desc {
	margin: 0;
	font-size: clamp(1.1rem, 2.5vw, 1.25rem);
}

// ====== PRICES ======= //

.price {
	/* Tweak these 4 vars to perfectly match your mock */
	--amount-size: clamp(3.5rem, 7.5vw, 5.5rem); /* main number */
	--unit-scale: 0.5; /* /year relative size */
	--currency-scale: 0.55; /* $ relative size */
	--currency-rise: 0.6; /* how much to lift $ (in its own em) */

	display: inline-flex;
	align-items: baseline; /* amount and /year share baseline */
	gap: 0.18em;
	line-height: 1;
	color: var(--dark);
	font-variant-numeric: inherit;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.price__amount {
	font-size: var(--amount-size);
}

.price__unit {
	font-size: calc(var(--amount-size) * var(--unit-scale));
	font-weight: 600;
	letter-spacing: 0;
	margin-left: 0.2em;
}

.price__unit.on-demand {
	margin-left: 0 !important;
}

.price__currency {
	font-size: calc(var(--amount-size) * var(--currency-scale));
	font-weight: 700;
	/* Raise the $ so its top aligns with the top of the amount.
     Using transform keeps layout intact and scales automatically. */
	transform: translateY(calc(-1em * var(--currency-rise)));
}

/* Custom plan: hide currency/unit if present accidentally */
.price--custom .price__currency,
.price--custom .price__unit {
	display: none;
}

.plan-card__note {
	opacity: 55%;
	margin: 0.2rem 0 0.8rem 0;
	font-size: clamp(1rem, 2vw, 1.1rem);
}

.btn.on-demand,
.btn.dedicated {
	color: var(--dark);
	background: transparent;
}

.btn.on-demand,
.btn.dedicated,
.btn.enterprise {
	border: 2px solid var(--dark);
	box-shadow: none;
}

.btn.enterprise:hover,
.btn.on-demand:hover,
.btn.dedicated:hover {
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	background: var(--blue-mid);
	color: var(--dark);
}

.plan-card__includes h4 {
	margin: 0.4rem 0 1rem;
	font-size: clamp(1.15rem, 2vw, 1.25rem) !important;
}

.list-check-included,
.list-check {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 0.5rem;
}

.list-check-included li {
	position: relative;
	padding-left: 1.6rem;
	line-height: 1.4;
	font-size: clamp(1rem, 2vw, 1.1rem);
}

.list-check li {
	position: relative;
	padding-left: 1.5rem;
	line-height: 1.4;
	font-size: clamp(1.25rem, 2.5vw, 1.4rem);
}

.list-check-included li::before,
.list-check li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 15px;
	height: 15px;
	background: url("/assets/base/check.svg") no-repeat center center;
	background-size: contain;
}

/* --- Included with every plan --- */
.included {
	padding: clamp(2rem, 6vw, 3.5rem) 0;
}

.included__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.7rem 2rem;
}

// ========= COMPARE PRICING ========= //

/* ----------------------------- */
/* Design tokens for easy theming */
/* ----------------------------- */

/* Removes default margins for a cleaner start */
.pricing-compare {
	color: var(--dark);
	margin-top: 14rem;
}

/* Creates a horizontal scroll region for small screens; adds focus ring for keyboard users */
.pc-table-wrap {
	background: white;
	border: 1px solid var(--dark);
	padding: clamp(8px, 1vw, 12px);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin-bottom: 7rem;
}
.pc-table-wrap:focus {
	outline: 2px solid var(--pink);
	outline-offset: 2px;
}

/* Hides only visually, keeps available to assistive technologies */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ----------------------------- */
/* Table base styles             */
/* ----------------------------- */
.pc-table {
	width: 100%;
	border-collapse: separate; /* Uses separate to allow row separators & rounded corners */
	border-spacing: 0;
	background: white;
	border-radius: 12px;
	overflow: hidden; /* Ensures rounded corners clip inside the wrapper */
	font-size: clamp(14px, 1.6vw, 16px);
}

.pc-table th,
.pc-table td {
	text-align: left;
	vertical-align: middle;
	padding: clamp(10px, 1.4vw, 16px) clamp(12px, 2vw, 20px);
}

/* Styles header row with plan names and pricing */
.pc-table thead th {
	font-weight: 600;
	background: white;
	border-bottom: 1px solid var(--grey-light);
	padding-bottom: 1em;
}

.plan-head {
	/* Stacks plan name with small price note */
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.plan-price {
	font-size: clamp(0.5rem, 2vw, 1.1rem);
	font-weight: 300;
	color: var(--dark);
	opacity: 55%;
	margin-bottom: -0.3em;
}

/* Sets a minimum width so each plan column stays readable when scrolled */
.col-feature {
	min-width: 220px;
	font-size: 1.5em;
}

.col-feature,
.col-plan {
	font-size: 1.5em;
}

.col-plan span {
	margin-bottom: -0.3em;
}

.col-plan {
	min-width: 190px;
}

/* Styles section header rows inside each tbody to visually label groups */

.row-section th {
	background: white;
	color: var(--dark);
	font-weight: 600;
	border-top: 1px solid var(--grey-light);
	padding-top: 1.5em;
}

.row-section th,
.pc-table,
.pc-table tbody th {
	font-size: 1.2rem;
}

/* Adds extra bottom padding for only the specified rows */
.row-custom-policy th,
.row-custom-policy td,
.row-additional-storage th,
.row-additional-storage td,
.row-priority-recovery th,
.row-priority-recovery td {
	padding-bottom: 1.5em;
}

/* Adjusts feature name column to wrap nicely */
.pc-table tbody th[scope="row"] {
	font-weight: 400;
	color: #111827;
	align-items: center;
}

/* ----------------------------- */
/* Icons and info tooltips       */
/* ----------------------------- */

/* Normalizes icon sizes and alignment */
.icon {
	width: 30px;
	height: 30px;
	display: inline-block;
	vertical-align: middle;
}

/* Mutes icons (used when the SVG is black by default and needs a gray look) */
.icon__muted {
	opacity: 0.35;
}

/* Info icon button with accessible tooltip on hover/focus */
.info {
	border: 0;
	background: transparent;
	padding-bottom: 3px;
	display: inline-grid;
	place-items: center;
	width: 32px;
	height: 32px;
	vertical-align: middle;
	cursor: help;
}

.info img {
	width: 22px;
	height: 22px;
}

/* Creates a pure‑CSS tooltip using the data-tooltip attribute */
.info[data-tooltip] {
	position: relative;
}
.info[data-tooltip]::after {
	/* Generates the tooltip content */
	content: attr(data-tooltip);
	position: absolute;
	inset: auto auto 100% 50%;
	transform: translate(-50%, -8px);
	min-width: 15rem !important;
	background: var(--dark);
	color: white;
	font-size: 1.2rem;
	line-height: 1.2;
	padding: 8px 10px;
	border-radius: 8px;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.15s ease, transform 0.15s ease;
	white-space: normal;
	text-align: start;
}

/* Reveals tooltip on hover or keyboard focus */
.info:hover::after,
.info:focus-visible::after,
.info:hover::before,
.info:focus-visible::before {
	opacity: 1;
	transform: translate(-50%, -12px);
}

/* ----------------------------- */
/* Small-screen readability      */
/* ----------------------------- */

/* Reduces padding and text size slightly on very narrow screens for better fit */
@media (max-width: 520px) {
	.pc-title {
		font-size: clamp(22px, 7vw, 32px);
	}
	.col-feature {
		min-width: 200px;
	}
	.col-plan {
		min-width: 180px;
	}
	.pc-table th,
	.pc-table td {
		padding: 12px 14px;
	}
}

/* Optional: zebra striping for better scanability on large tables */
@media (min-width: 768px) {
	.pc-table tbody tr:nth-child(even):not(.row-section) td,
	.pc-table tbody tr:nth-child(even):not(.row-section) th[scope="row"] {
		background: white;
	}
}

/* ----------------------------- */
/* FAQ — tokens and layout       */
/* ----------------------------- */

/* Creates full‑bleed white section that spans entire viewport width */
.faq {
	background: white;
	color: var(--dark);
	padding-block: clamp(28px, 6vw, 72px);
	width: 100vw;
	margin-left: 50%;
	transform: translateX(-50%);
}

.faq-wrap {
	width: $container-width;
	max-width: $container-max-width;
	margin-inline: auto;
	padding-inline: 0;
}

.subtext.faq-description {
	max-width: 80rem;
	padding: 0;
	margin: 0 0 7rem 0;
}

/* ----------------------------- */
/* Category group styling        */
/* ----------------------------- */
/* Two-column layout: left title, right list of questions */
.faq-group {
	display: grid;
	grid-template-columns: 500px 1fr;
	gap: clamp(12px, 3vw, 28px);
	align-items: start;
	margin-bottom: calc(clamp(16px, 3vw, 28px) * 5);
}

/* Ensures only section titles live in column 1 */
.faq-group-title {
	grid-column: 1;
	margin: 0.3rem 0 0;
	font-size: clamp(2.5rem, 3vw, 3.1rem);
	line-height: 1.1;
	font-weight: 700;
	max-width: 7em;
}

.faq-list {
	grid-column: 2; // whole right column is ONE grid item
	display: flex; // stack Q&As freely
	flex-direction: column;
}

/* Ensures every FAQ item stacks in column 2 */
.faq-item {
	grid-column: 2;
	transition: border-color 0.25s ease;
}

/* ----------------------------- */
/* Accordion Q&A */
/* ----------------------------- */

/* Removes default triangle marker; keeps element accessible */
.faq-item > summary {
	list-style: none;
}
.faq-item > summary::-webkit-details-marker {
	display: none;
}

.faq-q {
	display: flex; /* makes it a row */
	align-items: center; /* ✅ vertical centering */
	justify-content: space-between;
	gap: 16px;
	padding: 1.7em 0;
	border-bottom: 1px solid var(--grey-light); /* line under the question when closed */
	color: var(--dark);
	cursor: pointer;
}

.faq-q:hover,
.faq-q:focus-visible,
.faq-item:hover .faq-q {
	color: var(--pink);
}
/* Improves keyboard focus visibility */
.faq-q:focus-visible {
	box-shadow: 0 0 0 3px color-mix(in oklab, var(--pink), transparent 70%);
	border-radius: 8px;
}

/* Question text styles */
.faq-q-text {
	font-weight: 600;
	font-size: clamp(1.2rem, 2vw, 1.7rem);
	line-height: 1.3;
	display: block;
	margin: 0;
	line-height: 1.3;
}

/* Plus/X toggle built with two bars; rotates the wrapper to morph + into × */
.faq-toggle {
	position: relative;
	width: 20px;
	height: 20px;
	display: grid;
	place-items: center;
	transition: transform 0.3s ease, color 0.3s ease;
}

/* Horizontal bar */
.faq-toggle::before,
.faq-toggle::after {
	content: "";
	position: absolute;
	width: 30px;
	height: 2.5px;
	background: currentColor;
	border-radius: 1px;
}

/* Vertical bar (rotated) */
.faq-toggle::after {
	transform: rotate(90deg);
}

/* When the item opens, rotate the whole icon 45deg so + becomes × */
.faq-item[open] .faq-q {
	border-bottom-color: transparent; /* remove the line under the question */
}

.faq-item[open] {
	border-bottom: 1px solid var(--grey-light); /* line now appears under the expanded answer */
}

.faq-item[open] .faq-toggle {
	transform: rotate(45deg);
}

/* Smooth slide using grid rows */
.faq-a {
	display: grid;
	grid-template-rows: 0fr; /* collapsed */
	transition: grid-template-rows 0.48s cubic-bezier(0.2, 0.7, 0.2, 1),
		opacity 0.35s ease, transform 0.35s ease;
	opacity: 0;
	transform: translateY(-4px);
	overflow: hidden;
}

/* The inner wraps the real height and hides overflow */
.faq-a-inner {
	overflow: hidden;
	padding-block: 0; /* no padding when collapsed */
	transition: padding 0.48s cubic-bezier(0.2, 0.7, 0.2, 1);
	> :first-child {
		margin-top: 0;
	}
	> :last-child {
		margin-bottom: 0;
	}
}

.faq-a-inner > :first-child {
	margin-top: 0;
}
.faq-a-inner > :last-child {
	margin-bottom: 0;
}

/* Expanded state */
.faq-item[open] .faq-a {
	grid-template-rows: 1fr; /* expands to intrinsic height smoothly */
	opacity: 1;
	transform: none;
}

.faq-item[open] .faq-a-inner {
	padding: 0 3em 2em 0;
}

/* Optional: sync the + icon rotation timing to the slide */
.faq-item .faq-toggle {
	transition: transform 0.48s cubic-bezier(0.2, 0.7, 0.2, 1), color 0.18s ease;
}

.faq-item {
	border-bottom: 1px solid transparent;
}
.faq-item[open] {
	border-bottom-color: var(--grey-light);
}

@media (prefers-reduced-motion: reduce) {
	.faq-a,
	.faq-a-inner,
	.faq-toggle {
		transition: none !important;
	}

	html {
		scroll-behavior: auto;
	}
}

/* Answer paragraph */
.faq-a p,
.plans-list li {
	margin: 0.5em 0;
	opacity: 0.95;
	line-height: 1.6;
	font-size: clamp(1.25rem, 2.5vw, 1.4rem);
}

.plans-list a,
.faq-a-inner a {
	text-decoration: underline;
	text-underline-offset: 6px;
}

/* ----------------------------- */
/* Small screens                 */
/* ----------------------------- */
@media (max-width: 720px) {
	.faq-group {
		grid-template-columns: 1fr; /* stacks title on top of the items */
	}
	.faq-group-title {
		margin-bottom: 4px;
	}
}

// ======== RESPONSIVENESS ======== //

@media (max-width: 1090px) {
	.pricing-card {
		min-height: 6rem;
	}

	.open-source-content {
		transform: translateX(-6px);
	}
}

@media (max-width: 1045px) {
	.pricing-card {
		min-height: 7.5rem;
	}
}

@media (max-width: 960px) {
	.plans__grid {
		grid-template-columns: 1fr;
	}
	.included__grid {
		grid-template-columns: 1fr;
	}

	.open-source-container {
		flex-direction: column;
		text-align: center;
	}
	.open-source-content {
		transform: none;
	}
}

@media (max-width: 768px) {
	.container {
		width: 90%;
	}

	// ======= FOOTER ======= //

	.site-footer {
		padding: 2.5rem 0 2rem 0;
	}

	.footer-mobile {
		display: block;
	}

	.footer-desktop {
		display: none;
	}

	.footer-subheading.footer-mobile {
		margin-bottom: 3rem;
	}

	.footer-column {
		gap: 1.2rem;
	}

	.footer-logo img {
		margin-bottom: 1rem;
		max-width: 180px;
	}

	.footer-links {
		padding: 0;
		gap: 9rem;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-template-areas: "product company" "resources resources";
		grid-template-rows: auto auto;
		row-gap: 3rem;
	}

	.footer-column h4 {
		margin-bottom: 0;
	}

	.footer-product {
		grid-area: product;
	}

	.footer-resources {
		grid-area: resources;
	}

	.footer-company {
		grid-area: company;
	}

	.copyright {
		padding-top: 1rem;
	}

	.footer-bottom {
		flex-direction: column;
		align-items: flex-start;
	}

	// ======= FOOTER ======= //

	.pricing-grid {
		grid-template-columns: 1fr;
	}

	.pricing-card {
		align-content: center;
		min-height: auto;
	}
}