/*
 * COD landing page styles.
 *
 * Visual language is deliberately that of safety equipment rather than a
 * consumer gadget: dark technical hero, the device's own signal red as the
 * accent, amber reserved for warnings. For a fire-safety product bought
 * sight-unseen on cash-on-delivery, looking credible converts better than
 * looking friendly.
 *
 * Written with CSS logical properties (inline-start/end rather than
 * left/right) so the Arabic RTL layout falls out of dir="rtl" with no
 * separate stylesheet.
 */

:root {
	/* Signal red, sampled from the device housing. */
	--codlp-red: #E1082B;
	--codlp-red-dark: #B00622;
	--codlp-amber: #F59E0B;

	--codlp-night: #0B0D11;
	--codlp-night-2: #161A21;
	--codlp-ink: #11151B;
	--codlp-muted: #667085;
	--codlp-dim: #98A2B3;
	--codlp-line: #E4E7EC;
	--codlp-bg: #FFFFFF;
	--codlp-soft: #F7F8FA;

	--codlp-radius: 14px;
	--codlp-wrap: 1080px;
}

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

html {
	scroll-behavior: smooth;
}

.codlp-body {
	margin: 0;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Tahoma, "Helvetica Neue", Arial, sans-serif;
	font-size: 17px;
	line-height: 1.6;
	color: var(--codlp-ink);
	background: var(--codlp-bg);
	padding-block-end: 84px;
}

.codlp-wrap {
	width: 100%;
	max-width: var(--codlp-wrap);
	margin-inline: auto;
	padding-inline: 18px;
}

h1,
h2,
h3 {
	line-height: 1.2;
	margin-block: 0 0.5em;
	text-wrap: balance;
	letter-spacing: -0.02em;
}

h1 {
	font-size: clamp(1.8rem, 5.4vw, 2.9rem);
}

h2 {
	font-size: clamp(1.35rem, 3.4vw, 2rem);
}

/* ---------- Language switcher ---------- */

/* ---------- Top bar ---------- */

.codlp-topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 18px;
	background: var(--codlp-bg);
	border-block-end: 1px solid var(--codlp-line);
}

.codlp-logo {
	display: flex;
	align-items: center;
	text-decoration: none;
	min-inline-size: 0;
}

.codlp-logo img {
	/* Constrained by height, not width: the lockup is wide, and capping the
	   height is what keeps it from eating the fold on a 375px screen. */
	block-size: auto;
	max-block-size: 38px;
	inline-size: auto;
	max-inline-size: 62vw;
	object-fit: contain;
	display: block;
}

.codlp-logo--text {
	font-weight: 800;
	font-size: 1.05rem;
	letter-spacing: -0.02em;
	color: var(--codlp-ink);
}

.codlp-langbar {
	display: flex;
	justify-content: flex-end;
	gap: 6px;
	flex: none;
}

.codlp-lang {
	padding: 4px 12px;
	border-radius: 999px;
	font-size: 14px;
	text-decoration: none;
	color: var(--codlp-muted);
}

.codlp-lang.is-active {
	background: var(--codlp-red);
	color: #fff;
	font-weight: 600;
}

/* ---------- Hero ---------- */

.codlp-hero {
	position: relative;
	overflow: hidden;
	padding-block: 28px 40px;
	color: var(--codlp-ink);
	/* Light field so the product photo, which has a white background of its
	   own, sits in the page instead of floating as a bright card on dark. */
	background:
		radial-gradient(80% 55% at 12% 100%, rgb(225 8 43 / 0.07) 0%, transparent 62%),
		linear-gradient(180deg, #FFFFFF 0%, var(--codlp-soft) 100%);
}

/* Thin signal stripe, like the marking band on safety equipment. */
.codlp-hero::after {
	content: "";
	position: absolute;
	inset-block-end: 0;
	inset-inline: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--codlp-red), var(--codlp-amber));
}

.codlp-hero-grid {
	display: grid;
	gap: 28px;
	align-items: center;
}

.codlp-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: #FFF1F2;
	border: 1px solid #FECDD3;
	color: var(--codlp-red-dark);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	padding: 5px 13px;
	border-radius: 999px;
	margin-block-end: 16px;
}

.codlp-eyebrow::before {
	content: "";
	inline-size: 7px;
	block-size: 7px;
	border-radius: 50%;
	background: var(--codlp-red);
	box-shadow: 0 0 0 0 rgb(225 8 43 / 0.7);
	animation: codlp-pulse 2.4s infinite;
}

@keyframes codlp-pulse {
	70% { box-shadow: 0 0 0 9px rgb(225 8 43 / 0); }
	100% { box-shadow: 0 0 0 0 rgb(225 8 43 / 0); }
}

.codlp-hero h1 {
	color: var(--codlp-ink);
}

.codlp-lede {
	font-size: 1.08rem;
	color: var(--codlp-muted);
	margin-block: 0 22px;
}

.codlp-trust {
	list-style: none;
	margin: 0 0 26px;
	padding: 0;
	display: grid;
	gap: 9px;
}

.codlp-trust li {
	position: relative;
	padding-inline-start: 28px;
	font-size: 15px;
	color: var(--codlp-ink);
}

.codlp-trust li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 6px;
	inline-size: 16px;
	block-size: 16px;
	border-radius: 50%;
	background: var(--codlp-red);
	/* Checkmark drawn with a mask so it inherits the accent colour. */
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0a8 8 0 100 16A8 8 0 008 0zm3.7 6.1l-4.2 4.2a.8.8 0 01-1.1 0L4.3 8.2a.8.8 0 111.1-1.1l1.5 1.5 3.7-3.6a.8.8 0 011.1 1.1z'/%3E%3C/svg%3E") center/contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0a8 8 0 100 16A8 8 0 008 0zm3.7 6.1l-4.2 4.2a.8.8 0 01-1.1 0L4.3 8.2a.8.8 0 111.1-1.1l1.5 1.5 3.7-3.6a.8.8 0 011.1 1.1z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Darija hook above the headline: local, conversational, and visibly not a
   translated template. Sits RTL even on the French page. */
.codlp-hook {
	margin-block: 0 10px;
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--codlp-red-dark);
}

.codlp-cta-row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

/* Secondary action: WhatsApp gets its own brand colour rather than the
   page red, because resellers recognise the button before they read it. */
.codlp-cta-alt {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #25D366;
	color: #fff;
	font-weight: 700;
	font-size: 1rem;
	text-decoration: none;
	padding: 15px 24px;
	border-radius: var(--codlp-radius);
}

.codlp-cta-alt:hover {
	background: #1EBE5B;
}

/* States plainly that nothing on this page is sold at retail. */
.codlp-wholesale-notice {
	margin-block: 0 22px;
	padding: 14px 16px;
	background: #FFF1F2;
	border-inline-start: 4px solid var(--codlp-red);
	border-radius: 0 var(--codlp-radius) var(--codlp-radius) 0;
	font-weight: 600;
	font-size: 15px;
}

.codlp-cta {
	display: inline-block;
	background: var(--codlp-red);
	color: #fff;
	font-weight: 700;
	font-size: 1.05rem;
	text-decoration: none;
	padding: 15px 32px;
	border-radius: var(--codlp-radius);
	box-shadow: 0 8px 24px rgb(225 8 43 / 0.35);
}

.codlp-cta:hover {
	background: var(--codlp-red-dark);
}

.codlp-hero-media {
	position: relative;
}

.codlp-hero-media img {
	position: relative;
	z-index: 1;
	width: 100%;
	height: auto;
	border-radius: var(--codlp-radius);
	display: block;
	/* No border or card: the photo's own white ground now matches the hero,
	   so it reads as part of the page rather than pasted onto it. */
	mix-blend-mode: multiply;
}

.codlp-placeholder {
	position: relative;
	z-index: 1;
	aspect-ratio: 1;
	display: grid;
	place-items: center;
	text-align: center;
	padding: 24px;
	border: 2px dashed var(--codlp-line);
	border-radius: var(--codlp-radius);
	color: var(--codlp-muted);
	font-size: 14px;
	background: #fff;
}

/* ---------- Sections ---------- */

.codlp-section {
	padding-block: 44px;
	border-block-end: 1px solid var(--codlp-line);
}

.codlp-section h2 {
	margin-block-end: 22px;
}

/* ---------- How it works ---------- */

/* ---------- Section headers ---------- */

.codlp-section-head {
	margin-block-end: 22px;
}

.codlp-section-head h2 {
	margin-block-end: 8px;
}

.codlp-tag {
	display: inline-block;
	margin-block-end: 12px;
	padding: 5px 14px;
	border-radius: 999px;
	background: #FFF1F2;
	color: var(--codlp-red-dark);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.01em;
}

.codlp-section-lede {
	margin: 0;
	font-size: 1rem;
	color: var(--codlp-muted);
	max-inline-size: 60ch;
}

/* ---------- Steps ---------- */

.codlp-steps {
	display: grid;
	gap: 14px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.codlp-step {
	padding: 20px;
	background: var(--codlp-bg);
	border: 1px solid var(--codlp-line);
	border-radius: 16px;
	box-shadow: 0 1px 2px rgb(16 24 40 / 0.04);
}

.codlp-step-head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-block-end: 10px;
}

/* Dark rather than red: red is doing the work on the CTAs, and a page
   where everything is the accent colour has no hierarchy left. */
.codlp-step-num {
	flex: none;
	inline-size: 30px;
	block-size: 30px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--codlp-ink);
	color: #fff;
	font-weight: 700;
	font-size: 14px;
	font-variant-numeric: tabular-nums;
}

.codlp-step h3 {
	margin: 0;
	font-size: 1.05rem;
}

/* Description runs the full width of the card rather than being indented
   under the number, which is what made the old cards feel cramped. */
.codlp-step p {
	margin: 0;
	font-size: 15px;
	line-height: 1.65;
	color: var(--codlp-muted);
}

/* ---------- Problem / solution ---------- */

.codlp-problem-text {
	font-size: 1.02rem;
	color: var(--codlp-muted);
	margin-block: 0 16px;
}

.codlp-problem-answer {
	position: relative;
	margin: 0;
	padding: 16px 18px;
	padding-inline-start: 20px;
	background: #FFF5F6;
	border-inline-start: 4px solid var(--codlp-red);
	border-radius: 0 var(--codlp-radius) var(--codlp-radius) 0;
	font-weight: 600;
}

/* ---------- Use cases ---------- */

.codlp-usecases {
	display: grid;
	gap: 14px;
}

.codlp-usecase {
	padding: 20px 18px;
	background: var(--codlp-soft);
	border: 1px solid var(--codlp-line);
	border-radius: var(--codlp-radius);
}

.codlp-usecase h3 {
	font-size: 1.02rem;
	margin-block-end: 6px;
}

.codlp-usecase p {
	margin: 0;
	font-size: 15px;
	color: var(--codlp-muted);
}

/* ---------- Comparison table ---------- */

.codlp-compare-wrap {
	overflow-x: auto;
	border: 1px solid var(--codlp-line);
	border-radius: var(--codlp-radius);
}

.codlp-compare {
	inline-size: 100%;
	border-collapse: collapse;
	font-size: 14px;
	min-inline-size: 460px;
}

.codlp-compare th,
.codlp-compare td {
	padding: 12px 10px;
	text-align: center;
	border-block-end: 1px solid var(--codlp-line);
}

.codlp-compare thead th {
	font-size: 12.5px;
	font-weight: 700;
	color: var(--codlp-muted);
	background: var(--codlp-soft);
}

.codlp-compare tbody th[scope="row"] {
	text-align: start;
	font-weight: 500;
	inline-size: 42%;
}

.codlp-compare tr:last-child th,
.codlp-compare tr:last-child td {
	border-block-end: 0;
}

/* Our column stays tinted the whole way down so the eye tracks it. */
.codlp-compare .is-ours {
	background: #FFF5F6;
	color: var(--codlp-ink);
}

.codlp-compare thead .is-ours {
	color: var(--codlp-red-dark);
}

.codlp-mark {
	display: inline-grid;
	place-items: center;
	inline-size: 22px;
	block-size: 22px;
	border-radius: 50%;
	font-size: 13px;
	font-weight: 700;
}

.codlp-mark.is-yes {
	background: var(--codlp-red);
	color: #fff;
}

.codlp-mark.is-no {
	background: var(--codlp-line);
	color: var(--codlp-muted);
}

.codlp-note {
	margin-block: 16px 0;
	font-size: 14px;
	color: var(--codlp-muted);
}

/* ---------- Order summary ---------- */

.codlp-summary {
	margin-block: 4px 16px;
	padding: 14px 16px;
	background: var(--codlp-soft);
	border: 1px solid var(--codlp-line);
	border-radius: var(--codlp-radius);
	font-size: 15px;
}

.codlp-summary-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	padding-block: 5px;
}

.codlp-summary-free {
	color: #079455;
}

.codlp-summary-total {
	margin-block-start: 6px;
	padding-block-start: 11px;
	border-block-start: 1px solid var(--codlp-line);
	font-size: 1.05rem;
}

.codlp-summary-total strong {
	color: var(--codlp-red);
	font-size: 1.2rem;
	font-variant-numeric: tabular-nums;
}

/* A wholesale enquiry has no total; shrink the placeholder so it does not
   masquerade as a price. */
.codlp-summary.is-quote .codlp-summary-total strong {
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--codlp-muted);
}

/* ---------- Spec table ---------- */

.codlp-specs {
	border: 1px solid var(--codlp-line);
	border-radius: var(--codlp-radius);
	overflow: hidden;
}

.codlp-spec {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
	padding: 13px 18px;
	font-size: 15px;
	border-block-end: 1px solid var(--codlp-line);
}

.codlp-spec:last-child {
	border-block-end: 0;
}

.codlp-spec:nth-child(odd) {
	background: var(--codlp-soft);
}

.codlp-spec dt {
	color: var(--codlp-muted);
	margin: 0;
}

.codlp-spec dd {
	margin: 0;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	text-align: end;
}

/* ---------- Benefits ---------- */

.codlp-benefits {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 14px;
}

.codlp-benefits li {
	position: relative;
	padding: 18px 18px 18px 54px;
	padding-inline-start: 54px;
	padding-inline-end: 18px;
	background: var(--codlp-soft);
	border: 1px solid var(--codlp-line);
	border-radius: var(--codlp-radius);
	font-weight: 500;
}

.codlp-benefits li::before {
	content: "";
	position: absolute;
	inset-inline-start: 18px;
	inset-block-start: 20px;
	inline-size: 20px;
	block-size: 20px;
	background: var(--codlp-red);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2s6 5.2 6 10a6 6 0 11-12 0c0-1.8.8-3.6 1.8-5.1.3 1 .9 1.9 1.7 2.4C10 7.6 10.8 4.6 12 2z'/%3E%3C/svg%3E") center/contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2s6 5.2 6 10a6 6 0 11-12 0c0-1.8.8-3.6 1.8-5.1.3 1 .9 1.9 1.7 2.4C10 7.6 10.8 4.6 12 2z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ---------- Reviews ---------- */

.codlp-reviews {
	display: grid;
	gap: 16px;
}

.codlp-review {
	margin: 0;
	padding: 18px;
	border: 1px solid var(--codlp-line);
	border-radius: var(--codlp-radius);
}

.codlp-review blockquote {
	margin: 8px 0;
	font-size: 15px;
}

.codlp-review figcaption {
	font-size: 13px;
	color: var(--codlp-muted);
}

.codlp-stars {
	color: var(--codlp-amber);
	letter-spacing: 2px;
}

/* ---------- FAQ ---------- */

.codlp-faq details {
	border: 1px solid var(--codlp-line);
	border-radius: var(--codlp-radius);
	margin-block-end: 10px;
	padding: 14px 18px;
	background: var(--codlp-bg);
}

.codlp-faq details[open] {
	background: var(--codlp-soft);
	border-color: #D0D5DD;
}

.codlp-faq summary {
	cursor: pointer;
	font-weight: 600;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
}

.codlp-faq summary::-webkit-details-marker {
	display: none;
}

.codlp-faq summary::after {
	content: "+";
	color: var(--codlp-red);
	font-size: 22px;
	font-weight: 400;
	line-height: 1;
	flex: none;
}

.codlp-faq details[open] summary::after {
	content: "−";
}

.codlp-faq p {
	margin-block: 12px 0;
	color: var(--codlp-muted);
	font-size: 15px;
}

/* ---------- Form ---------- */

.codlp-form-card {
	margin-block: 34px;
	padding: 24px 18px 28px;
	border: 1px solid var(--codlp-line);
	border-block-start: 4px solid var(--codlp-red);
	border-radius: var(--codlp-radius);
	background: #fff;
	box-shadow: 0 12px 40px rgb(16 24 40 / 0.10);
	scroll-margin-block-start: 16px;
}

.codlp-form-title {
	margin-block-end: 4px;
}

.codlp-form-note {
	margin-block: 0 20px;
	font-size: 14px;
	color: var(--codlp-muted);
}

.codlp-offers {
	border: 0;
	margin: 0 0 18px;
	padding: 0;
	display: grid;
	gap: 10px;
}

.codlp-offers legend {
	padding: 0;
	margin-block-end: 8px;
	font-weight: 600;
	font-size: 15px;
}

.codlp-offer {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 15px 16px;
	border: 2px solid var(--codlp-line);
	border-radius: var(--codlp-radius);
	cursor: pointer;
}

.codlp-offer:has(input:checked) {
	border-color: var(--codlp-red);
	background: #FFF5F6;
}

/* The popular tier stays visually raised even when another is selected,
   so the recommendation survives the visitor clicking around. */
.codlp-offer.is-popular {
	border-color: #FDA29B;
	margin-block-start: 12px;
}

.codlp-offer.is-popular:has(input:checked) {
	border-color: var(--codlp-red);
}

.codlp-offer-flag {
	position: absolute;
	inset-block-start: -11px;
	inset-inline-end: 14px;
	background: var(--codlp-red);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	padding: 3px 10px;
	border-radius: 999px;
	white-space: nowrap;
}

.codlp-offer input {
	inline-size: 20px;
	block-size: 20px;
	accent-color: var(--codlp-red);
	flex: none;
}

.codlp-offer-main {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	flex: 1;
	min-inline-size: 0;
}

.codlp-offer-qty {
	font-weight: 700;
}

.codlp-offer-hint {
	inline-size: 100%;
	font-size: 12.5px;
	font-weight: 400;
	color: var(--codlp-muted);
}

.codlp-offer-prices {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	text-align: end;
	flex: none;
	line-height: 1.3;
}

.codlp-offer-price {
	font-weight: 700;
	font-size: 1.05rem;
	font-variant-numeric: tabular-nums;
}

.codlp-offer-was {
	text-decoration: line-through;
	color: var(--codlp-muted);
	font-size: 13px;
	font-variant-numeric: tabular-nums;
}

.codlp-offer-save {
	background: var(--codlp-red);
	color: #fff;
	font-size: 11.5px;
	font-weight: 700;
	padding: 3px 9px;
	border-radius: 6px;
	white-space: nowrap;
}

/* Wholesale is a different action, not a bigger box — styled apart so it
   does not read as simply the next tier up. */
.codlp-offer--reseller {
	border-style: dashed;
	background: var(--codlp-soft);
	margin-block-start: 4px;
}

.codlp-offer--reseller:has(input:checked) {
	border-style: solid;
	border-color: var(--codlp-ink);
	background: #F2F4F7;
}

.codlp-reseller-qty[hidden] {
	display: none;
}

.codlp-field {
	margin-block-end: 16px;
}

.codlp-field label {
	display: block;
	font-size: 14px;
	font-weight: 600;
	margin-block-end: 6px;
}

.codlp-field input,
.codlp-field select,
.codlp-field textarea {
	inline-size: 100%;
	/* 16px minimum stops iOS Safari zooming in on focus. */
	font-size: 16px;
	font-family: inherit;
	padding: 13px 14px;
	border: 2px solid var(--codlp-line);
	border-radius: 10px;
	background: #fff;
	color: inherit;
}

.codlp-field input:focus,
.codlp-field select:focus,
.codlp-field textarea:focus {
	outline: none;
	border-color: var(--codlp-red);
	box-shadow: 0 0 0 4px rgb(225 8 43 / 0.10);
}

.codlp-field.has-error input,
.codlp-field.has-error select {
	border-color: var(--codlp-red-dark);
}

.codlp-error {
	display: none;
	color: var(--codlp-red-dark);
	font-size: 13px;
	margin-block-start: 5px;
}

.codlp-field.has-error .codlp-error {
	display: block;
}

.codlp-submit {
	inline-size: 100%;
	border: 0;
	background: var(--codlp-red);
	color: #fff;
	font-family: inherit;
	font-size: 1.1rem;
	font-weight: 700;
	padding: 17px;
	border-radius: var(--codlp-radius);
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: baseline;
	gap: 10px;
	box-shadow: 0 8px 22px rgb(225 8 43 / 0.32);
}

.codlp-submit:hover:not(:disabled) {
	background: var(--codlp-red-dark);
}

.codlp-submit:disabled {
	opacity: 0.65;
	cursor: wait;
}

.codlp-submit-total {
	font-size: 0.95rem;
	opacity: 0.92;
}

.codlp-form-error {
	display: none;
	margin-block: 12px 0;
	color: var(--codlp-red-dark);
	font-size: 14px;
	text-align: center;
}

.codlp-form-error.is-visible {
	display: block;
}

/* Honeypot: off-screen rather than display:none, which some bots detect. */
.codlp-hp {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.codlp-success {
	text-align: center;
	padding-block: 24px;
}

.codlp-success-mark {
	inline-size: 56px;
	block-size: 56px;
	margin-inline: auto;
	margin-block-end: 12px;
	border-radius: 50%;
	background: #079455;
	color: #fff;
	font-size: 30px;
	display: grid;
	place-items: center;
}

/* ---------- Sticky CTA + WhatsApp ---------- */

.codlp-sticky {
	position: fixed;
	inset-block-end: 0;
	inset-inline: 0;
	z-index: 40;
	background: var(--codlp-red);
	color: #fff;
	text-align: center;
	text-decoration: none;
	font-weight: 700;
	padding: 17px 16px;
	padding-block-end: calc(17px + env(safe-area-inset-bottom));
	box-shadow: 0 -2px 16px rgb(0 0 0 / 0.22);
}

.codlp-whatsapp {
	position: fixed;
	inset-block-end: 82px;
	inset-inline-end: 16px;
	z-index: 41;
	inline-size: 52px;
	block-size: 52px;
	border-radius: 50%;
	background: #25D366;
	color: #fff;
	display: grid;
	place-items: center;
	box-shadow: 0 2px 10px rgb(0 0 0 / 0.25);
}

.codlp-footer {
	padding: 26px 18px;
	text-align: center;
	font-size: 13px;
	color: var(--codlp-muted);
	background: var(--codlp-soft);
}

.codlp-footer p {
	margin: 0 0 6px;
}

.codlp-footer-contact {
	display: flex;
	justify-content: center;
	gap: 16px;
	flex-wrap: wrap;
}

.codlp-footer-contact a,
.codlp-footer a {
	color: var(--codlp-muted);
}

/* ---------- Legal document pages ---------- */

.codlp-body--doc {
	padding-block-end: 0;
}

.codlp-doc {
	max-inline-size: 760px;
	padding-block: 32px 56px;
}

.codlp-doc h1 {
	font-size: clamp(1.6rem, 4.5vw, 2.2rem);
}

.codlp-doc h2 {
	font-size: 1.15rem;
	margin-block: 32px 10px;
	padding-block-end: 8px;
	border-block-end: 1px solid var(--codlp-line);
}

.codlp-doc p {
	margin-block: 0 12px;
	color: #344054;
	font-size: 15.5px;
}

.codlp-doc-meta {
	color: var(--codlp-muted);
	font-size: 14px;
}

.codlp-doc-intro {
	padding: 16px 18px;
	background: var(--codlp-soft);
	border-radius: var(--codlp-radius);
}

.codlp-doc-contact {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 8px;
	font-weight: 600;
}

.codlp-doc-warning {
	padding: 14px 16px;
	background: #FEF0C7;
	border: 1px solid #FEC84B;
	border-radius: var(--codlp-radius);
	color: #93370D !important;
	font-size: 14px !important;
}

.codlp-doc-links,
.codlp-footer-links {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px 18px;
}

.codlp-doc-links {
	justify-content: flex-start;
	margin-block-start: 40px;
	padding-block-start: 20px;
	border-block-start: 1px solid var(--codlp-line);
	font-size: 14px;
}

.codlp-footer-links {
	margin-block-end: 8px;
}

.codlp-doc-back {
	margin-block-start: 20px;
	font-weight: 600;
}

/* Campaign offer hierarchy and accessible purchase flow. */
.codlp-hero-detail { color: var(--codlp-muted); font-size: 15px; max-inline-size: 60ch; }
.codlp-hero-price { margin: 22px 0 12px; font-size: 1.5rem; font-weight: 800; }
.codlp-hero-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.codlp-secondary { color: var(--codlp-ink); font-weight: 600; text-underline-offset: 5px; padding-block: 10px; }
.codlp-section-intro { margin-block-end: 24px; }
.codlp-order-layout { display: grid; gap: 28px; }
.codlp-details-column { min-inline-size: 0; }
.codlp-details-column h3 { font-size: 1.1rem; }
.codlp-pack-name { inline-size: 100%; font-size: 16px; font-weight: 750; }
.codlp-offer { padding: 10px 12px; gap: 10px; min-block-size: 68px; }
.codlp-offer-main { gap: 2px 8px; }
.codlp-offer-qty { font-size: 14px; }
.codlp-offer-save { background: #E7F5ED; color: #116139; white-space: normal; }
.codlp-value-label { position: absolute; inset-block-start: -10px; inset-inline-end: 14px; background: #E7F5ED; color: #116139; border-radius: 20px; padding: 2px 10px; font-size: 11px; font-weight: 700; }
.codlp-offer:has(.codlp-value-label), .codlp-offer.is-popular { margin-block-start: 5px; }
.codlp-offers { gap: 8px; margin-block-end: 10px; }
.codlp-offer-flag, .codlp-value-label { font-size: 10px; padding: 1px 8px; inset-block-start: -9px; }
.codlp-offer--reseller { min-block-size: 44px; padding-block: 8px; }
.codlp-pack-column > .codlp-note { font-size: 12px; line-height: 1.5; margin-block-start: 10px; }
.codlp-card-icon { display: inline-grid; place-items: center; inline-size: 52px; block-size: 52px; border-radius: 15px; background: #FFF1F2; color: var(--codlp-red-dark); flex: none; }
.codlp-visual-cards { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.codlp-visual-cards li { display: flex; align-items: center; gap: 16px; padding: 22px; border: 1px solid var(--codlp-line); border-radius: 18px; background: linear-gradient(135deg, #fff, #F7F8FA); }
.codlp-visual-cards strong { font-size: 16px; line-height: 1.5; }
.codlp-usecase .codlp-card-icon { margin-block-end: 16px; background: #EAECF0; color: #344054; }
.codlp-support-cards .codlp-card-icon { color: #127746; background: #E7F5ED; }
.codlp-included-list { display: flex; gap: 12px 28px; flex-wrap: wrap; padding: 0; margin: 0; list-style: none; font-size: 15px; }
.codlp-included-list li::before { content: '✓'; color: #127746; font-weight: 800; margin-inline-end: 8px; }
.codlp-compare { min-inline-size: 0; table-layout: fixed; }
.codlp-compare th:first-child { inline-size: 43%; }
.codlp-compare thead th { vertical-align: middle; overflow-wrap: anywhere; }
.codlp-compare tbody th[scope="row"] { font-weight: 600; }
.codlp-compare .is-ours { background: #FFF1F2; }
@media (max-width: 599px) {
	.codlp-form-card { padding: 18px 14px; }
	.codlp-form-note { margin-block-end: 14px; }
	.codlp-order-layout { gap: 20px; }
	.codlp-compare th, .codlp-compare td { padding: 12px 5px; font-size: 12px; }
	.codlp-compare thead th { font-size: 11px; }
	.codlp-visual-cards li { padding: 16px; }
	.codlp-visual-cards strong { font-size: 15px; }
}
.codlp-submit { flex-wrap: wrap; }
.codlp-final { margin-block: 36px; padding: 36px 24px; border-radius: 20px; background: var(--codlp-night); color: white; text-align: center; }
.codlp-final p { color: #D0D5DD; }
.codlp-whatsapp { inline-size: auto; padding-inline: 16px; display: flex; gap: 8px; border-radius: 999px; background: #127746; text-decoration: none; font-size: 13px; font-weight: 650; }
.codlp-order-visible .codlp-whatsapp, .codlp-order-visible .codlp-sticky { visibility: hidden; pointer-events: none; }
.codlp-inline-help { display: block; text-align: center; margin-block-start: 16px; color: #127746; font-weight: 600; text-underline-offset: 4px; }
a:focus-visible, button:focus-visible, summary:focus-visible, .codlp-offer:has(input:focus-visible) { outline: 3px solid #175CD3; outline-offset: 4px; }
.codlp-section, .codlp-form-card { scroll-margin-block-start: 24px; }
.codlp-lang-ar h1, .codlp-lang-ar h2, .codlp-lang-ar h3 { line-height: 1.55; letter-spacing: 0; }
@media (max-width: 380px) {
	.codlp-offer { padding-inline: 10px; gap: 8px; }
	.codlp-offer-price { font-size: 15px; }
	.codlp-pack-name { font-size: 14px; }
}

/* ---------- Desktop ---------- */

@media (min-width: 900px) {
	.codlp-topbar {
		padding-inline: max(18px, calc((100vw - var(--codlp-wrap)) / 2));
	}

	.codlp-logo img {
		max-block-size: 48px;
	}

	.codlp-hero {
		padding-block: 64px 72px;
	}

	.codlp-hero-grid {
		grid-template-columns: 1.05fr 1fr;
		gap: 48px;
	}

	.codlp-steps,
	.codlp-benefits,
	.codlp-usecases {
		grid-template-columns: repeat(3, 1fr);
	}

	.codlp-reviews {
		grid-template-columns: repeat(3, 1fr);
	}

	.codlp-specs {
		columns: 2;
		column-gap: 0;
	}

	.codlp-spec {
		break-inside: avoid;
	}

	.codlp-form-card {
		padding: 32px;
	}
	.codlp-order-layout { grid-template-columns: 1fr 1fr; gap: 40px; }
	.codlp-benefits { grid-template-columns: repeat(2, 1fr); }
	.codlp-visual-cards { grid-template-columns: repeat(3, 1fr); }
	.codlp-visual-cards li { flex-direction: column; align-items: flex-start; }

	/* The sticky bar is a mobile pattern; desktop keeps the hero CTA in view. */
	.codlp-sticky {
		display: none;
	}

	.codlp-body {
		padding-block-end: 0;
	}

	.codlp-whatsapp {
		inset-block-end: 20px;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.codlp-eyebrow::before {
		animation: none;
	}
}