/* ==========================================================================
   Components
   --------------------------------------------------------------------------
   Anything with internal state, pseudo-elements or more than a handful of
   declarations lives here rather than being assembled from utilities.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Buttons
   Physical rather than flat: a 2px cocoa underside that compresses on press,
   so taps feel mechanical on a phone. Height is fixed at 46/52px to keep tap
   targets comfortable for older customers.
   -------------------------------------------------------------------------- */

.af-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 46px;
	padding: 0 1.4rem;
	border: 0;
	border-radius: var(--af-r-pill);
	font-family: var(--af-font-ui);
	font-size: var(--af-text-base);
	font-weight: 700;
	letter-spacing: var(--af-track-tight);
	line-height: 1;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	user-select: none;
	transition: background-color var(--af-dur-fast) var(--af-ease-out),
		color var(--af-dur-fast) var(--af-ease-out),
		box-shadow var(--af-dur-fast) var(--af-ease-out),
		transform var(--af-dur-fast) var(--af-ease-out),
		border-color var(--af-dur-fast) var(--af-ease-out);
}

.af-btn:active:not(:disabled) {
	transform: translateY(1px);
}

.af-btn:disabled,
.af-btn[aria-disabled="true"] {
	opacity: 0.55;
	cursor: not-allowed;
	box-shadow: none;
	transform: none;
}

/* Primary — the cocoa base. */
.af-btn--primary {
	background: var(--af-cocoa-700);
	color: var(--af-cream);
	box-shadow: 0 2px 0 var(--af-espresso), var(--af-shadow-sm);
}

.af-btn--primary:hover:not(:disabled) {
	background: var(--af-cocoa-900);
	color: var(--af-cream);
}

.af-btn--primary:active:not(:disabled) {
	box-shadow: 0 0 0 var(--af-espresso), var(--af-shadow-press);
}

/* Accent — reserved for the single most important action on a screen. */
.af-btn--accent {
	background: var(--af-terracotta);
	color: var(--af-white);
	box-shadow: 0 2px 0 var(--af-terracotta-dark), var(--af-shadow-sm);
}

.af-btn--accent:hover:not(:disabled) {
	background: var(--af-terracotta-dark);
	color: var(--af-white);
}

.af-btn--accent:active:not(:disabled) {
	box-shadow: 0 0 0 var(--af-terracotta-dark), var(--af-shadow-press);
}

/* Ghost — outlined, for secondary paths. */
.af-btn--ghost {
	background: transparent;
	color: var(--af-cocoa-700);
	border: 1.5px solid var(--af-line-strong);
}

.af-btn--ghost:hover:not(:disabled) {
	background: var(--af-sand);
	border-color: var(--af-cocoa-500);
	color: var(--af-cocoa-900);
}

/* Quiet — text-weight action inside dense UI. */
.af-btn--quiet {
	background: var(--af-sand);
	color: var(--af-cocoa-800);
}

.af-btn--quiet:hover:not(:disabled) {
	background: var(--af-sand-deep);
	color: var(--af-espresso);
}

/* On dark surfaces. */
.af-btn--cream {
	background: var(--af-cream);
	color: var(--af-cocoa-900);
	box-shadow: 0 2px 0 rgba(36, 20, 16, 0.4);
}

.af-btn--cream:hover:not(:disabled) {
	background: var(--af-white);
	color: var(--af-espresso);
}

.af-btn--outline-cream {
	background: transparent;
	color: var(--af-cream);
	border: 1.5px solid rgba(253, 248, 243, 0.4);
}

.af-btn--outline-cream:hover:not(:disabled) {
	background: rgba(253, 248, 243, 0.1);
	border-color: var(--af-cream);
	color: var(--af-cream);
}

/* Sizes */
.af-btn--sm { min-height: 38px; padding: 0 1rem; font-size: var(--af-text-sm); }
.af-btn--lg { min-height: 54px; padding: 0 2rem; font-size: var(--af-text-md); }
.af-btn--block { width: 100%; }

/* Busy state: swap the label for a spinner without changing the box size. */
.af-btn.is-busy {
	color: transparent !important;
	pointer-events: none;
}

.af-btn.is-busy::after {
	content: "";
	position: absolute;
	width: 18px;
	height: 18px;
	border: 2px solid currentColor;
	border-top-color: transparent;
	border-radius: 50%;
	color: var(--af-cream);
	animation: af-spin 620ms linear infinite;
}

.af-btn--ghost.is-busy::after,
.af-btn--quiet.is-busy::after,
.af-btn--cream.is-busy::after {
	color: var(--af-cocoa-700);
}

@keyframes af-spin {
	to { transform: rotate(360deg); }
}

/* Text link with a sliding arrow. */
.af-textlink {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-size: var(--af-text-sm);
	font-weight: 700;
	color: var(--af-cocoa-700);
	text-decoration: none;
	white-space: nowrap;
}

.af-textlink svg {
	transition: transform var(--af-dur) var(--af-ease-spring);
}

.af-textlink:hover {
	color: var(--af-terracotta-dark);
}

.af-textlink:hover svg {
	transform: translateX(3px);
}

/* --------------------------------------------------------------------------
   Eyebrow, section heading, awning
   -------------------------------------------------------------------------- */

.af-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 0.55rem;
	font-family: var(--af-font-ui);
	font-size: var(--af-text-2xs);
	font-weight: 800;
	letter-spacing: var(--af-track-caps);
	text-transform: uppercase;
	color: var(--af-clay-400);
}

/* A short rule before the label, like a chapter mark. */
.af-eyebrow::before {
	content: "";
	width: 22px;
	height: 2px;
	border-radius: 2px;
	background: var(--af-caramel);
}

.af-sechead {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--af-space-6);
	margin-bottom: var(--af-space-7);
}

.af-sechead--center {
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.af-sechead__body { max-width: 46rem; }
.af-sechead--center .af-sechead__body { margin-inline: auto; }

.af-sechead__title {
	font-size: var(--af-text-3xl);
	margin: 0;
}

.af-sechead__lede {
	margin: 0.7rem 0 0;
	font-size: var(--af-text-md);
	line-height: var(--af-leading-relaxed);
	color: var(--af-ink-muted);
}

/* Emphasis inside display headings: hand-drawn underline rather than a
   highlight block. */
.af-mark {
	position: relative;
	white-space: nowrap;
	color: var(--af-terracotta);
}

.af-mark::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -0.16em;
	height: 0.34em;
	background: var(--af-squiggle) center / 100% 100% no-repeat;
	opacity: 0.85;
}

/* Scalloped awning edge capping a section. */
.af-awning {
	position: absolute;
	left: 0;
	right: 0;
	line-height: 0;
	pointer-events: none;
}

.af-awning svg {
	width: 100%;
	height: clamp(14px, 1.6vw, 24px);
	display: block;
}

.af-awning--top { top: 0; }
.af-awning--bottom { bottom: 0; transform: scaleY(-1); }

@media (max-width: 767px) {
	.af-sechead {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--af-space-3);
	}
}

/* --------------------------------------------------------------------------
   Badges, pills, ribbon
   -------------------------------------------------------------------------- */

.af-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.28rem 0.6rem;
	border-radius: var(--af-r-xs);
	font-size: var(--af-text-2xs);
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	line-height: 1.3;
	white-space: nowrap;
}

.af-badge--leaf { background: var(--af-leaf-soft); color: var(--af-leaf-dark); }
.af-badge--sand { background: var(--af-sand); color: var(--af-cocoa-800); }
.af-badge--caramel { background: var(--af-caramel-soft); color: var(--af-cocoa-900); }
.af-badge--chili { background: var(--af-chili-soft); color: var(--af-chili); }
.af-badge--honey { background: var(--af-honey-soft); color: #8a6410; }
.af-badge--cocoa { background: var(--af-cocoa-900); color: var(--af-cream); }

/* Pill used for metadata (weight, unit, ETA). */
.af-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.3rem 0.7rem;
	border: 1px solid var(--af-line);
	border-radius: var(--af-r-pill);
	background: var(--af-white);
	font-size: var(--af-text-xs);
	font-weight: 600;
	color: var(--af-ink-soft);
	white-space: nowrap;
}

.af-pill--bare { background: transparent; border-color: var(--af-line-strong); }

/* Diagonal jute ribbon for savings. Corner-anchored and rotated so it reads
   as something stuck onto the card, not another rounded chip. */
.af-ribbon {
	position: absolute;
	top: 0;
	left: 0;
	width: 74px;
	height: 74px;
	overflow: hidden;
	pointer-events: none;
	z-index: 2;
	border-top-left-radius: inherit;
}

.af-ribbon__text {
	position: absolute;
	top: 13px;
	left: -22px;
	width: 108px;
	padding: 3px 0;
	transform: rotate(-45deg);
	background: var(--af-leaf);
	color: var(--af-white);
	font-size: 0.625rem;
	font-weight: 800;
	letter-spacing: 0.05em;
	text-align: center;
	text-transform: uppercase;
	box-shadow: 0 1px 3px rgba(36, 20, 16, 0.3);
}

/* --------------------------------------------------------------------------
   Cards & surfaces
   -------------------------------------------------------------------------- */

.af-card {
	position: relative;
	background: var(--af-white);
	border: 1px solid var(--af-line-soft);
	border-radius: var(--af-r-lg);
	box-shadow: var(--af-shadow-xs);
	transition: box-shadow var(--af-dur) var(--af-ease-out),
		transform var(--af-dur) var(--af-ease-out),
		border-color var(--af-dur) var(--af-ease-out);
}

.af-card--pad { padding: var(--af-space-6); }
.af-card--sand { background: var(--af-cream-warm); border-color: var(--af-sand-deep); }

.af-card--hover:hover {
	transform: translateY(-3px);
	box-shadow: var(--af-shadow-md);
	border-color: var(--af-line-strong);
}

/* Dashed "empty" surface for zero states. */
.af-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--af-space-4);
	padding: clamp(2.5rem, 6vw, 4.5rem) var(--af-space-6);
	background: var(--af-cream-warm);
	border: 1.5px dashed var(--af-line-strong);
	border-radius: var(--af-r-xl);
	text-align: center;
}

.af-empty__icon {
	display: grid;
	place-items: center;
	width: 66px;
	height: 66px;
	border-radius: var(--af-r-pill);
	background: var(--af-sand);
	color: var(--af-clay-400);
}

/* --------------------------------------------------------------------------
   Notices
   -------------------------------------------------------------------------- */

.af-notice {
	display: flex;
	align-items: flex-start;
	gap: var(--af-space-3);
	padding: var(--af-space-4) var(--af-space-5);
	border-radius: var(--af-r-md);
	border-left: 3px solid transparent;
	font-size: var(--af-text-base);
	line-height: var(--af-leading-normal);
}

.af-notice svg { margin-top: 1px; }
.af-notice--info { background: var(--af-sand); border-left-color: var(--af-clay-400); color: var(--af-cocoa-900); }
.af-notice--success { background: var(--af-leaf-soft); border-left-color: var(--af-leaf); color: var(--af-leaf-dark); }
.af-notice--warn { background: var(--af-honey-soft); border-left-color: var(--af-honey); color: #7a5a0f; }
.af-notice--error { background: var(--af-chili-soft); border-left-color: var(--af-chili); color: var(--af-chili); }

/* Inline field error. */
.af-fielderror {
	display: block;
	margin-top: 0.4rem;
	font-size: var(--af-text-sm);
	font-weight: 600;
	color: var(--af-chili);
}

.af-fielderror:empty { display: none; }

/* --------------------------------------------------------------------------
   Modal
   Shared shell for the pin code gate and the OTP dialog.
   -------------------------------------------------------------------------- */

.af-modal {
	position: fixed;
	inset: 0;
	z-index: var(--af-z-modal);
	display: grid;
	place-items: center;
	padding: var(--af-space-4);
	visibility: hidden;
	opacity: 0;
	transition: opacity var(--af-dur) var(--af-ease-out),
		visibility var(--af-dur) var(--af-ease-out);
}

.af-modal.is-open {
	visibility: visible;
	opacity: 1;
}

.af-modal__scrim {
	position: absolute;
	inset: 0;
	background: rgba(36, 20, 16, 0.55);
	backdrop-filter: blur(5px) saturate(120%);
	-webkit-backdrop-filter: blur(5px) saturate(120%);
}

.af-modal__panel {
	position: relative;
	width: 100%;
	max-width: 500px;
	max-height: calc(100vh - 8rem);
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--af-cream);
	border-radius: var(--af-r-xl);
	box-shadow: var(--af-shadow-xl);
	/* Rises and settles rather than fading in place. */
	transform: translateY(18px) scale(0.97);
	opacity: 0;
	transition: transform var(--af-dur-slow) var(--af-ease-spring),
		opacity var(--af-dur) var(--af-ease-out);
}

.af-modal.is-open .af-modal__panel {
	transform: translateY(0) scale(1);
	opacity: 1;
}

.af-modal__close {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 3;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: var(--af-r-pill);
	background: rgba(253, 248, 243, 0.8);
	color: var(--af-cocoa-800);
	transition: background-color var(--af-dur-fast) var(--af-ease-out);
}

.af-modal__close:hover {
	background: var(--af-sand-deep);
}

/* Illustrated modal header on a cocoa field. */
.af-modal__crown {
	position: relative;
	padding: var(--af-space-7) var(--af-space-7) var(--af-space-8);
	background: var(--af-cocoa-900);
	color: var(--af-cream);
	border-radius: var(--af-r-xl) var(--af-r-xl) 0 0;
	overflow: hidden;
}

/* Soft off-centre glow so the panel top is not a flat brown block. */
.af-modal__crown::after {
	content: "";
	position: absolute;
	top: -55%;
	right: -18%;
	width: 250px;
	height: 250px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(224, 168, 106, 0.32), transparent 68%);
	pointer-events: none;
}

.af-modal__crown h2,
.af-modal__crown h3 {
	color: var(--af-cream);
	position: relative;
}

.af-modal__crown p {
	position: relative;
	margin: 0.5rem 0 0;
	font-size: var(--af-text-base);
	color: var(--af-ink-inverse-soft);
}

.af-modal__body {
	padding: var(--af-space-6) var(--af-space-7) var(--af-space-7);
}

/* Pull the body up over the crown so the two overlap. */
.af-modal__body--lift {
	position: relative;
	margin-top: -22px;
	background: var(--af-cream);
	border-radius: var(--af-r-xl) var(--af-r-xl) 0 0;
	padding-top: var(--af-space-6);
}

.af-modal__foot {
	padding: var(--af-space-4) var(--af-space-7) var(--af-space-6);
	font-size: var(--af-text-xs);
	line-height: var(--af-leading-normal);
	color: var(--af-ink-muted);
	text-align: center;
}

/* Multi-step panels: only the active step is in flow. */
.af-step { display: none; }
.af-step.is-active { display: block; animation: af-step-in var(--af-dur) var(--af-ease-out); }

@keyframes af-step-in {
	from { opacity: 0; transform: translateX(10px); }
	to { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   Inputs with a leading affix (mobile +91, pin code icon)
   -------------------------------------------------------------------------- */

.af-field { margin-bottom: var(--af-space-4); }

.af-field__label {
	display: block;
	margin-bottom: 0.4rem;
	font-size: var(--af-text-sm);
	font-weight: 700;
	color: var(--af-ink-soft);
}

.af-field__hint {
	margin-top: 0.4rem;
	font-size: var(--af-text-xs);
	color: var(--af-ink-muted);
}

.af-affix {
	display: flex;
	align-items: stretch;
	background: var(--af-white);
	border: 1.5px solid var(--af-line);
	border-radius: var(--af-r-md);
	overflow: hidden;
	transition: border-color var(--af-dur-fast) var(--af-ease-out),
		box-shadow var(--af-dur-fast) var(--af-ease-out);
}

.af-affix:focus-within {
	border-color: var(--af-terracotta);
	box-shadow: 0 0 0 4px var(--af-terracotta-soft);
}

.af-affix__lead {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0 0.85rem;
	background: var(--af-sand);
	border-right: 1.5px solid var(--af-line);
	font-size: var(--af-text-md);
	font-weight: 700;
	color: var(--af-cocoa-800);
	white-space: nowrap;
}

.af-affix input {
	border: 0;
	border-radius: 0;
	background: transparent;
	flex: 1;
}

.af-affix input:focus {
	box-shadow: none;
}

.af-affix[aria-invalid="true"] { border-color: var(--af-chili); }

/* Big, widely tracked numeric entry for pin codes and OTP. */
.af-codeinput {
	font-family: var(--af-font-ui);
	font-size: 1.5rem !important;
	font-weight: 700;
	letter-spacing: 0.4em;
	text-align: center;
	padding-left: 0.4em !important;
}

/* --------------------------------------------------------------------------
   Quantity stepper
   The defining quick-commerce control: ADD collapses into − 1 + in place.
   -------------------------------------------------------------------------- */

.af-qty {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.1rem;
	min-height: 38px;
	padding: 2px;
	background: var(--af-cocoa-700);
	border-radius: var(--af-r-pill);
	box-shadow: 0 2px 0 var(--af-espresso);
	animation: af-qty-in 260ms var(--af-ease-spring);
}

@keyframes af-qty-in {
	from { transform: scale(0.82); opacity: 0.4; }
	to { transform: scale(1); opacity: 1; }
}

.af-qty__btn {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: var(--af-r-pill);
	color: var(--af-cream);
	transition: background-color var(--af-dur-fast) var(--af-ease-out);
}

.af-qty__btn:hover:not(:disabled) { background: rgba(253, 248, 243, 0.16); }
.af-qty__btn:disabled { opacity: 0.4; }

.af-qty__value {
	min-width: 1.75rem;
	font-size: var(--af-text-base);
	font-weight: 800;
	text-align: center;
	color: var(--af-cream);
	font-variant-numeric: tabular-nums;
}

.af-qty--block { display: flex; width: 100%; }
.af-qty--lg { min-height: 48px; }
.af-qty--lg .af-qty__btn { width: 42px; height: 42px; }

/* Cart line stepper sits on cream, so it inverts. */
.af-qty--light {
	background: var(--af-white);
	border: 1.5px solid var(--af-line-strong);
	box-shadow: none;
}

.af-qty--light .af-qty__btn { color: var(--af-cocoa-700); }
.af-qty--light .af-qty__btn:hover:not(:disabled) { background: var(--af-sand); }
.af-qty--light .af-qty__value { color: var(--af-ink); }

/* --------------------------------------------------------------------------
   Toast
   -------------------------------------------------------------------------- */

.af-toasts {
	position: fixed;
	bottom: calc(var(--af-dock-h) + 1rem);
	left: 50%;
	transform: translateX(-50%);
	z-index: var(--af-z-toast);
	display: flex;
	flex-direction: column;
	gap: var(--af-space-2);
	width: min(26rem, calc(100vw - 2rem));
	pointer-events: none;
}

@media (min-width: 768px) {
	.af-toasts { bottom: 1.5rem; left: auto; right: 1.5rem; transform: none; }
}

.af-toast {
	display: flex;
	align-items: center;
	gap: var(--af-space-3);
	padding: 0.85rem 1.1rem;
	background: var(--af-espresso);
	color: var(--af-cream);
	border-radius: var(--af-r-md);
	box-shadow: var(--af-shadow-lg);
	font-size: var(--af-text-base);
	font-weight: 600;
	pointer-events: auto;
	animation: af-toast-in 320ms var(--af-ease-spring);
}

.af-toast.is-leaving { animation: af-toast-out 200ms var(--af-ease-out) forwards; }
.af-toast__icon { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--af-leaf); color: var(--af-white); flex-shrink: 0; }
.af-toast--error .af-toast__icon { background: var(--af-chili); }

@keyframes af-toast-in {
	from { opacity: 0; transform: translateY(14px) scale(0.96); }
	to { opacity: 1; transform: none; }
}

@keyframes af-toast-out {
	to { opacity: 0; transform: translateY(8px) scale(0.98); }
}

/* --------------------------------------------------------------------------
   Skeleton loading
   -------------------------------------------------------------------------- */

.af-skeleton {
	border-radius: var(--af-r-sm);
	background: linear-gradient(90deg, var(--af-sand) 25%, var(--af-cream-warm) 50%, var(--af-sand) 75%);
	background-size: 220% 100%;
	animation: af-shimmer 1.3s var(--af-ease-in-out) infinite;
}

@keyframes af-shimmer {
	from { background-position: 120% 0; }
	to { background-position: -120% 0; }
}

/* --------------------------------------------------------------------------
   Accordion (FAQ)
   -------------------------------------------------------------------------- */

.af-acc {
	border-bottom: 1px solid var(--af-line);
}

.af-acc__trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--af-space-4);
	width: 100%;
	padding: var(--af-space-5) 0;
	font-family: var(--af-font-display);
	font-size: var(--af-text-lg);
	font-weight: 600;
	text-align: left;
	color: var(--af-ink);
	transition: color var(--af-dur-fast) var(--af-ease-out);
}

.af-acc__trigger:hover { color: var(--af-terracotta-dark); }

.af-acc__sign {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	flex-shrink: 0;
	border-radius: var(--af-r-pill);
	background: var(--af-sand);
	color: var(--af-cocoa-700);
	transition: transform var(--af-dur) var(--af-ease-spring),
		background-color var(--af-dur-fast) var(--af-ease-out);
}

.af-acc.is-open .af-acc__sign {
	transform: rotate(180deg);
	background: var(--af-caramel-soft);
}

.af-acc__panel {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows var(--af-dur) var(--af-ease-in-out);
}

.af-acc.is-open .af-acc__panel { grid-template-rows: 1fr; }
.af-acc__inner { overflow: hidden; }
.af-acc__inner > div { padding-bottom: var(--af-space-5); color: var(--af-ink-muted); line-height: var(--af-leading-relaxed); }

/* --------------------------------------------------------------------------
   Serviceability chip in the header
   -------------------------------------------------------------------------- */

.af-locchip {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	max-width: 15rem;
	padding: 0.4rem 0.8rem 0.4rem 0.6rem;
	border-radius: var(--af-r-pill);
	background: rgba(253, 248, 243, 0.1);
	border: 1px solid rgba(253, 248, 243, 0.18);
	color: var(--af-cream);
	font-size: var(--af-text-xs);
	line-height: 1.25;
	text-align: left;
	transition: background-color var(--af-dur-fast) var(--af-ease-out);
}

.af-locchip:hover { background: rgba(253, 248, 243, 0.18); color: var(--af-cream); }
.af-locchip__icon { color: var(--af-caramel); }
.af-locchip__body { min-width: 0; }
.af-locchip__label { display: block; font-size: var(--af-text-2xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--af-ink-inverse-soft); }
.af-locchip__value { display: block; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* --------------------------------------------------------------------------
   Reveal-on-scroll
   A short rise, not a long fade. Anything slower reads as a template.
   -------------------------------------------------------------------------- */

.af-reveal {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 520ms var(--af-ease-out), transform 520ms var(--af-ease-out);
}

.af-reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	.af-reveal { opacity: 1; transform: none; transition: none; }
	.af-qty, .af-toast, .af-modal__panel { animation: none; }
}

/* --------------------------------------------------------------------------
   Dark context

   Applied alongside any cocoa-filled surface (footer, the how-it-works band).
   Inverting inside one class keeps every dark region consistent instead of each
   section re-stating its own text colours.
   -------------------------------------------------------------------------- */

.af-on-dark {
	color: var(--af-ink-inverse-soft);
}

.af-on-dark h1,
.af-on-dark h2,
.af-on-dark h3,
.af-on-dark h4,
.af-on-dark strong { color: var(--af-cream); }

.af-on-dark .af-eyebrow { color: var(--af-caramel); }
.af-on-dark .af-sechead__lede { color: var(--af-ink-inverse-soft); }

.af-on-dark a { color: var(--af-caramel); }
.af-on-dark a:hover { color: var(--af-cream); }

.af-on-dark .af-textlink { color: var(--af-caramel); }
.af-on-dark .af-textlink:hover { color: var(--af-cream); }

/* The squiggle underline is a fixed-colour SVG, so on dark it is recoloured
   to caramel via a filter rather than shipping a second asset. */
.af-on-dark .af-mark { color: var(--af-caramel); }

.af-on-dark .af-mark::after {
	filter: sepia(1) saturate(2.4) hue-rotate(332deg) brightness(1.2);
}

/* --------------------------------------------------------------------------
   Pin code gate and OTP dialogs

   Both share the modal shell above; these are the pieces unique to the two
   flows — the crown glyph, the pass/fail result panels, and the resend row.
   -------------------------------------------------------------------------- */

.af-gate__glyph {
	position: relative;
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	margin-bottom: var(--af-space-4);
	border-radius: var(--af-r-md);
	background: rgba(224, 168, 106, 0.18);
	border: 1px solid rgba(224, 168, 106, 0.32);
	color: var(--af-caramel);
}

/* Collapsed list of covered areas, so the panel stays short but the answer is
   one tap away for someone unsure of their pin code. */
.af-gate__areas {
	margin-top: var(--af-space-5);
	padding-top: var(--af-space-4);
	border-top: 1px dashed var(--af-line-strong);
	font-size: var(--af-text-sm);
}

.af-gate__areas summary {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font-weight: 700;
	color: var(--af-cocoa-700);
	cursor: pointer;
	list-style: none;
}

.af-gate__areas summary::-webkit-details-marker { display: none; }

.af-gate__areas summary::after {
	content: "";
	width: 6px;
	height: 6px;
	margin-left: 0.1rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translateY(-1px);
	transition: transform var(--af-dur-fast) var(--af-ease-out);
}

.af-gate__areas[open] summary::after { transform: rotate(-135deg) translateY(-1px); }

.af-gate__areas ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: var(--af-space-3) 0 0;
	padding: 0;
	list-style: none;
}

.af-gate__areas li {
	margin: 0;
	padding: 0.25rem 0.6rem;
	background: var(--af-sand);
	border-radius: var(--af-r-pill);
	font-size: var(--af-text-xs);
	font-weight: 600;
	color: var(--af-cocoa-800);
}

/* --- Result panels --- */

.af-gate__result {
	padding: var(--af-space-8) var(--af-space-7);
	text-align: center;
}

.af-gate__result p {
	max-width: 26rem;
	margin: var(--af-space-3) auto 0;
	font-size: var(--af-text-base);
	line-height: var(--af-leading-relaxed);
	color: var(--af-ink-muted);
}

.af-gate__result--yes { background: linear-gradient(180deg, var(--af-leaf-soft), var(--af-white) 72%); }
.af-gate__result--no { background: linear-gradient(180deg, var(--af-honey-soft), var(--af-white) 72%); }

.af-gate__seal {
	display: grid;
	place-items: center;
	width: 66px;
	height: 66px;
	margin: 0 auto var(--af-space-5);
	border-radius: var(--af-r-pill);
	background: var(--af-leaf);
	color: var(--af-white);
	box-shadow: 0 0 0 9px var(--af-leaf-soft);
	animation: af-seal-in 460ms var(--af-ease-spring);
}

.af-gate__seal--soft {
	background: var(--af-honey);
	color: var(--af-espresso);
	box-shadow: 0 0 0 9px var(--af-honey-soft);
}

@keyframes af-seal-in {
	from { transform: scale(0.55); opacity: 0; }
	to { transform: scale(1); opacity: 1; }
}

/* Reassurance that an out-of-area pin code still counts for something. */
.af-gate__waitlist {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	margin-top: var(--af-space-5);
	padding: var(--af-space-4);
	background: var(--af-white);
	border: 1px dashed var(--af-line-strong);
	border-radius: var(--af-r-md);
	font-size: var(--af-text-sm);
	line-height: var(--af-leading-normal);
	color: var(--af-ink-soft);
	text-align: left;
}

.af-gate__waitlist svg { flex-shrink: 0; margin-top: 2px; color: var(--af-clay-400); }

.af-otp__resend {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	margin-top: var(--af-space-5);
	padding-top: var(--af-space-4);
	border-top: 1px dashed var(--af-line-strong);
	font-size: var(--af-text-sm);
	color: var(--af-ink-muted);
}

.af-otp__resend .af-textlink:disabled {
	color: var(--af-ink-faint);
	cursor: default;
}

.af-otp__resend .af-textlink:disabled:hover svg { transform: none; }