/* Stampifi public site - shared stylesheet.
   The rules for the first painted frame are inlined in each page; this
   file holds everything below the fold and is cached across pages.
   The [dir="rtl"] block at the end is inert on the English page. */
.section { padding: clamp(64px, 8vw, 104px) 0; }
.section + .section { border-top: 1px solid var(--line); }
.band-plum .section { border-top: 0; }
.sec-head { max-width: 780px; margin-bottom: clamp(34px, 4vw, 52px); }
.sec-head .lede { margin-top: 16px; }

/* ---------- hero ---------- */
.hero-grid {
	display: grid;
	gap: clamp(40px, 5vw, 60px);
	align-items: center;
	padding: clamp(56px, 7vw, 92px) 0 clamp(56px, 7vw, 88px);
}
@media (min-width: 880px) { .hero-grid { grid-template-columns: 1.06fr 0.94fr; } }
.hero-status {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--gold-up);
	margin-bottom: 22px;
}
.hero-status .dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--gold-up);
}
.hero-grid .lede { margin-top: 22px; }
.price-line {
	margin-top: 30px;
	padding-top: 22px;
	border-top: 1px solid rgba(244, 236, 245, 0.16);
	display: flex;
	flex-wrap: wrap;
	gap: 8px 26px;
	font-size: 14.5px;
	color: #cdbfd2;
}
.price-line b { color: #f7f1f8; font-weight: 650; }

/* ---------- device: a faithful reproduction of the app's own screens
   (light theme #FFF7F2, the Route renderer, the real tab bar) ---------- */
.device {
	width: min(322px, 84vw);
	margin: 0 auto;
	background: #16111c;
	border-radius: 42px;
	padding: 9px;
	box-shadow: 0 40px 90px rgba(20, 10, 26, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.device-screen {
	background: var(--paper);
	border-radius: 34px;
	overflow: hidden;
	color: var(--ink);
	padding-bottom: 4px;
}
.dv-status {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 11.5px;
	font-weight: 650;
	color: var(--ink);
	padding: 12px 20px 6px;
	font-variant-numeric: tabular-nums;
}
.dv-status .sig { display: flex; gap: 3px; align-items: flex-end; }
.dv-status .sig i { display: block; width: 3px; background: var(--ink); border-radius: 1px; }
.dv-status .sig i:nth-child(1) { height: 4px; }
.dv-status .sig i:nth-child(2) { height: 6px; }
.dv-status .sig i:nth-child(3) { height: 8px; }
.dv-status .bat { width: 20px; height: 10px; border: 1.4px solid var(--ink); border-radius: 3px; position: relative; }
.dv-status .bat::after { content: ''; position: absolute; inset: 1.5px; background: var(--ink); border-radius: 1px; }

.dv-body { padding: 4px 14px 0; }
.device svg { display: block; }
.dv-chip svg, .dv-pill svg { display: inline-block; vertical-align: -1px; }
.dv-topbar { display: flex; align-items: center; justify-content: space-between; padding: 6px 2px 12px; }
.dv-ico {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	border: 1px solid var(--line);
	background: var(--surface);
	font-size: 13px;
	color: var(--ink-soft);
}
.dv-place { display: flex; align-items: center; gap: 11px; padding: 0 2px 13px; }
.dv-place-ico {
	width: 44px;
	height: 44px;
	border-radius: 13px;
	display: grid;
	place-items: center;
	background: #efe0d2;
	font-size: 19px;
	flex: none;
}
.dv-place-name { font-family: var(--display); font-size: 17px; font-weight: 700; letter-spacing: -0.02em; }
.dv-chip {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-top: 4px;
	padding: 4px 11px;
	border-radius: 999px;
	border: 1px solid var(--violet);
	color: var(--violet);
	font-size: 11px;
	font-weight: 600;
}

/* the Route renderer: a snaking path, checks behind you, the prize ahead */
.dv-card {
	background: #f9ece1;
	border-radius: 18px;
	padding: 20px 18px;
	margin-bottom: 11px;
}
.dv-route { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px 0; justify-items: center; }
.dv-node {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	position: relative;
	z-index: 1;
	background: var(--paper);
	border: 2.5px solid #d9cfe6;
	font-size: 14px;
	color: #bcaed0;
}
.dv-node.done { border-color: var(--violet); color: var(--violet); background: var(--surface); }
.dv-node.now { border-color: var(--violet); background: var(--surface); box-shadow: 0 0 0 4px rgba(102, 84, 199, 0.16); }
.dv-node.prize { border-color: #e08a4a; color: #d2721f; background: #fdeadb; }
/* horizontal connectors */
.dv-route::before, .dv-route::after {
	content: '';
	position: absolute;
	height: 5px;
	border-radius: 3px;
	left: 12.5%;
	right: 12.5%;
}
.dv-route::before { top: 16.5px; background: var(--violet); }
.dv-route::after { bottom: 16.5px; background: #ded4ea; }
.dv-elbow {
	position: absolute;
	right: 12.5%;
	top: 19px;
	width: 5px;
	bottom: 19px;
	background: var(--violet);
	border-radius: 3px;
	z-index: 0;
}

.dv-stat {
	background: var(--surface);
	border-radius: 15px;
	padding: 13px 15px;
	display: flex;
	align-items: center;
	gap: 11px;
	margin-bottom: 11px;
}
.dv-stat-ico { width: 32px; height: 32px; border-radius: 50%; background: var(--violet-lo); display: grid; place-items: center; font-size: 14px; flex: none; }
.dv-stat b { font-family: var(--display); font-size: 16px; font-weight: 700; letter-spacing: -0.02em; }
.dv-stat b span { color: var(--violet); }
.dv-stat small { display: block; font-size: 11.5px; color: var(--ink-soft); margin-top: 2px; }
.dv-bubble {
	background: var(--wash);
	border-radius: 13px;
	padding: 11px 14px;
	font-size: 12.5px;
	line-height: 1.45;
	color: var(--ink-soft);
	margin-bottom: 10px;
}
.dv-acts { display: flex; gap: 9px; padding: 0 0 12px; }
.dv-act {
	flex: 1;
	padding: 12px;
	border-radius: 13px;
	background: var(--wash);
	text-align: center;
	font-size: 13px;
	font-weight: 650;
	color: var(--ink);
}
.dv-act.go { background: var(--violet); color: #fff; }

/* the app's own bottom bar, including the floating scan button */
.dv-tabs {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	align-items: end;
	border-top: 1px solid var(--line);
	padding: 9px 6px 12px;
	position: relative;
	background: var(--surface);
}
.dv-tab { text-align: center; font-size: 9.5px; font-weight: 600; color: var(--ink-quiet); }
.dv-tab i { display: block; font-size: 15px; font-style: normal; margin-bottom: 3px; }
.dv-tab.on { color: var(--violet); }
.dv-scan {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background: var(--violet);
	color: #fff;
	display: grid;
	place-items: center;
	font-size: 20px;
	margin: -26px auto 0;
	box-shadow: 0 8px 18px rgba(102, 84, 199, 0.42);
}
.dv-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 2px 12px; }
.dv-head-title { font-family: var(--display); font-size: 17px; font-weight: 700; letter-spacing: -0.02em; }
.dv-avatar { width: 30px; height: 30px; border-radius: 50%; background: #f0a93c; color: #fff; display: grid; place-items: center; font-size: 11.5px; font-weight: 700; }
.dv-filters { display: flex; gap: 6px; padding: 0 2px 12px; }
.dv-filter { padding: 7px 12px; border-radius: 10px; font-size: 11px; font-weight: 600; background: var(--wash); color: var(--ink-soft); }
.dv-filter.on { background: var(--violet); color: #fff; }
.dv-row { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 13px 14px; margin-bottom: 10px; }
.dv-row-top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.dv-row-ico { width: 32px; height: 32px; border-radius: 10px; background: #efe0d2; display: grid; place-items: center; font-size: 15px; flex: none; }
.dv-row-name { flex: 1; font-size: 13.5px; font-weight: 650; }
.dv-bar { height: 7px; border-radius: 4px; background: var(--wash); overflow: hidden; margin-bottom: 9px; position: relative; }
.dv-bar span { display: block; height: 100%; background: #b0741c; border-radius: 4px; }
.dv-row-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 10px; font-weight: 600; }
.dv-pill { padding: 5px 9px; border-radius: 999px; border: 1px solid var(--violet); color: var(--violet); }
.dv-pill.far { border-color: var(--line-strong); color: var(--ink-quiet); background: var(--wash); }
.dv-count { margin-inline-start: auto; color: var(--ink-soft); font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }
.mascot { width: 82px; height: 82px; display: block; margin: -2px auto 6px; }

/* ---------- the customer's story: three beats joined by the same
   connector the Route card uses, so the page speaks one language ---------- */
.story { display: grid; gap: clamp(32px, 4vw, 56px); align-items: start; }
@media (min-width: 900px) { .story { grid-template-columns: 0.85fr 1.15fr; } }
.story-art img { display: block; width: 100%; height: auto; max-width: 380px; }
.story-cap { margin-top: 18px; font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); max-width: 44ch; }
.steps { list-style: none; margin: 0; padding: 0; position: relative; }
.step { display: flex; gap: 18px; padding-bottom: 30px; position: relative; }
.step:last-child { padding-bottom: 0; }
.step::before {
	content: '';
	position: absolute;
	inset-inline-start: 25px;
	top: 52px;
	bottom: 6px;
	width: 3px;
	background: var(--violet-lo);
	border-radius: 2px;
}
.step:last-child::before { display: none; }
.step-ico {
	flex: none;
	width: 52px;
	height: 52px;
	border-radius: 16px;
	display: grid;
	place-items: center;
	background: var(--violet-lo);
	color: var(--violet-ink);
	position: relative;
	z-index: 1;
}
.step h3 { font-size: 18.5px; font-weight: 650; letter-spacing: -0.022em; margin-top: 12px; }
.step p { margin-top: 8px; font-size: 15.5px; line-height: 1.58; color: var(--ink-soft); max-width: 50ch; }

/* ---------- generic layout helpers ---------- */
.split { display: grid; gap: clamp(34px, 4.5vw, 56px); align-items: start; }
@media (min-width: 880px) { .split { grid-template-columns: 1fr 1fr; } }
.split.wide-left { grid-template-columns: 1fr; }
@media (min-width: 880px) { .split.wide-left { grid-template-columns: 1.15fr 0.85fr; } }

.feature { padding: 0; }
.feature + .feature { margin-top: 30px; padding-top: 30px; border-top: 1px solid var(--line); }
.feature h3 { font-size: 18px; font-weight: 650; letter-spacing: -0.02em; }
.feature p { margin-top: 8px; font-size: 15px; line-height: 1.58; color: var(--ink-soft); }

.panel {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	padding: clamp(20px, 2.6vw, 28px);
}

/* ---------- approval queue mock ---------- */
.queue-row {
	display: flex;
	align-items: center;
	gap: 13px;
	padding: 14px 0;
}
.queue-row + .queue-row { border-top: 1px solid var(--line); }
.avatar {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	font-weight: 650;
	font-size: 14px;
	background: var(--violet-lo);
	color: var(--violet-ink);
	flex: none;
}
.queue-who { flex: 1; min-width: 0; }
.queue-who b { display: block; font-size: 14.5px; font-weight: 600; }
.queue-who span { display: block; font-size: 12.5px; color: var(--ink-quiet); margin-top: 2px; }
.pill {
	font-size: 11.5px;
	font-weight: 600;
	padding: 5px 10px;
	border-radius: 999px;
	white-space: nowrap;
}
.pill.ok { background: var(--sage-lo); color: var(--sage); }
.pill.wait { background: var(--gold-lo); color: #8f5000; }
.pill.no { background: var(--rose-lo); color: var(--rose); }
.pill.violet { background: var(--violet-lo); color: var(--violet-ink); }

/* ---------- method table ---------- */
.methods { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); }
.m-row { display: grid; gap: 4px 18px; padding: 17px 20px; align-items: baseline; }
@media (min-width: 720px) { .m-row { grid-template-columns: 210px 1fr auto; } }
.m-row + .m-row { border-top: 1px solid var(--line); }
.m-row:nth-child(odd) { background: #fffdfc; }
.m-name { font-family: var(--display); font-size: 15.5px; font-weight: 650; letter-spacing: -0.015em; }
.m-what { font-size: 14.5px; color: var(--ink-soft); line-height: 1.5; }
.m-plat { font-size: 12.5px; color: var(--ink-quiet); font-weight: 500; }
.m-foot {
	margin-top: 16px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--ink-soft);
	background: var(--violet-lo);
	border-radius: var(--r-md);
	padding: 14px 16px;
}

/* ---------- interactive card-style switcher (CSS only; CSP forbids
   inline script, and this needs no JS) ---------- */
.styleswitch > input { position: absolute; opacity: 0; pointer-events: none; }
.cs-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.cs-tabs label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	border-radius: 12px;
	border: 1px solid var(--line-strong);
	background: var(--surface);
	font-size: 14.5px;
	font-weight: 600;
	cursor: pointer;
}
.cs-tabs label:hover { border-color: var(--ink-quiet); }
.cs-tabs .tag { font-size: 10.5px; font-weight: 650; padding: 3px 7px; border-radius: 5px; background: var(--violet-lo); color: var(--violet-ink); }
.cs-stage { display: grid; gap: clamp(24px, 3vw, 40px); align-items: center; }
@media (min-width: 820px) { .cs-stage { grid-template-columns: 300px 1fr; } }
.cs-art {
	background: #f9ece1;
	border-radius: var(--r-lg);
	min-height: 232px;
	display: grid;
	place-items: center;
	padding: 26px;
}
.cs-view { display: none; }
.cs-copy h3 { font-size: 21px; font-weight: 700; letter-spacing: -0.024em; }
.cs-copy p { margin-top: 10px; font-size: 15.5px; line-height: 1.6; color: var(--ink-soft); max-width: 52ch; }
.cs-can { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; }
.cs-can span { font-size: 12.5px; font-weight: 600; padding: 6px 11px; border-radius: 999px; background: var(--violet-lo); color: var(--violet-ink); }
.cs-can span.no { background: var(--wash); color: var(--ink-quiet); }

#cs-route:checked ~ .cs-tabs label[for="cs-route"],
#cs-cup:checked ~ .cs-tabs label[for="cs-cup"],
#cs-bloom:checked ~ .cs-tabs label[for="cs-bloom"] {
	border-color: var(--violet);
	background: var(--violet-lo);
	color: var(--violet-ink);
	box-shadow: 0 0 0 3px rgba(102, 84, 199, 0.14);
}
#cs-route:checked ~ .cs-stage .v-route,
#cs-cup:checked ~ .cs-stage .v-cup,
#cs-bloom:checked ~ .cs-stage .v-bloom { display: block; }
.styleswitch > input:focus-visible ~ .cs-tabs label { outline: 2px dashed var(--violet); outline-offset: 3px; }

/* The Classic path draws itself when the section arrives. Keyed off the
   reveal class landing.js already sets, so it needs no extra script,
   and it collapses to "already drawn" under reduced motion. */
#cards .rr-node.done, #cards .rr-node.prize { transition: transform 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.4), opacity 0.3s ease; }
#cards:not(.is-visible) .rr-node.done, #cards:not(.is-visible) .rr-node.prize { transform: scale(0.2); opacity: 0; }
#cards.is-visible .rr-node.done:nth-child(2) { transition-delay: 0.10s; }
#cards.is-visible .rr-node.done:nth-child(3) { transition-delay: 0.20s; }
#cards.is-visible .rr-node.done:nth-child(4) { transition-delay: 0.30s; }
#cards.is-visible .rr-node.done:nth-child(5) { transition-delay: 0.40s; }
#cards.is-visible .rr-node.prize { transition-delay: 0.55s; }
@media (prefers-reduced-motion: reduce) {
	#cards .rr-node.done, #cards .rr-node.prize { transition: none; }
	#cards:not(.is-visible) .rr-node.done, #cards:not(.is-visible) .rr-node.prize { transform: none; opacity: 1; }
}

/* renderers, at presentation size */
.rr-node {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: var(--paper);
	border: 2.5px solid #d9cfe6;
	color: #bcaed0;
	position: relative;
	z-index: 1;
}
.rr-node.done { border-color: var(--violet); color: var(--violet); background: #fff; }
.rr-node.prize { border-color: #e08a4a; color: #d2721f; background: #fdeadb; }
.rr-node.sq { border-radius: 11px; }
.rr-route { position: relative; display: grid; grid-template-columns: repeat(4, 44px); gap: 24px 14px; justify-content: center; }
.rr-route::before, .rr-route::after { content: ''; position: absolute; height: 5px; border-radius: 3px; left: 20px; right: 20px; }
.rr-route::before { top: 17.5px; background: var(--violet); }
.rr-route::after { bottom: 17.5px; background: #ded4ea; }
.rr-elbow { position: absolute; right: 20px; top: 20px; bottom: 20px; width: 5px; background: var(--violet); border-radius: 3px; z-index: 0; }
.rr-grid { display: grid; grid-template-columns: repeat(4, 44px); gap: 14px; justify-content: center; }

/* ---------- card style gallery ---------- */
.styles { display: grid; gap: 16px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .styles { grid-template-columns: repeat(4, 1fr); } }
.show-card {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	padding: 18px 16px 16px;
}
.show-card.is-default { border-color: var(--violet); box-shadow: 0 0 0 3px var(--violet-lo); }
.sv { height: 104px; display: grid; place-items: center; margin-bottom: 15px; }
.show-card h3 { font-size: 16px; font-weight: 650; letter-spacing: -0.02em; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.show-card p { margin-top: 6px; font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); }
.tag { font-size: 10.5px; font-weight: 650; padding: 3px 7px; border-radius: 5px; background: var(--violet-lo); color: var(--violet-ink); }

/* mini style renderers */
.mini-chips { display: grid; grid-template-columns: repeat(4, 15px); gap: 7px; }
.mini-chips i { width: 15px; height: 15px; border-radius: 50%; border: 1.5px dashed var(--line-strong); display: block; }
.mini-chips i.on { background: var(--violet); border: 1.5px solid var(--violet); }
.mini-route { display: grid; grid-template-columns: repeat(4, 15px); gap: 7px; position: relative; }
.mini-route i { width: 15px; height: 15px; border-radius: 50%; border: 1.5px dashed var(--line-strong); display: block; position: relative; }
.mini-route i.on { background: var(--violet); border: 1.5px solid var(--violet); }
.mini-route i:not(:nth-child(4n))::after {
	content: '';
	position: absolute;
	left: 100%;
	top: 50%;
	width: 7px;
	height: 1.5px;
	background: var(--line-strong);
}
.mini-route i.on:not(:nth-child(4n))::after { background: var(--violet); }
.mini-cup {
	width: 54px;
	height: 66px;
	border: 2px solid var(--line-strong);
	border-top: 0;
	border-radius: 0 0 16px 16px;
	overflow: hidden;
	display: flex;
	align-items: flex-end;
}
.mini-cup span { display: block; width: 100%; height: 62%; background: var(--violet); }
.mini-bloom { position: relative; width: 82px; height: 82px; }
.mini-bloom i {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 16px;
	height: 29px;
	margin: -29px 0 0 -8px;
	border-radius: 50% 50% 42% 42%;
	border: 1.5px dashed var(--line-strong);
	transform-origin: 50% 100%;
}
.mini-bloom i.on { background: var(--violet); border: 1.5px solid var(--violet); }
.mini-bloom i:nth-child(1) { transform: rotate(0deg); }
.mini-bloom i:nth-child(2) { transform: rotate(60deg); }
.mini-bloom i:nth-child(3) { transform: rotate(120deg); }
.mini-bloom i:nth-child(4) { transform: rotate(180deg); }
.mini-bloom i:nth-child(5) { transform: rotate(240deg); }
.mini-bloom i:nth-child(6) { transform: rotate(300deg); }

/* ---------- plan tiers ---------- */
.tiers { display: grid; gap: 14px; }
@media (min-width: 760px) { .tiers { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .tiers { grid-template-columns: repeat(3, 1fr); } }
.tier {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	padding: 22px 20px;
	display: flex;
	flex-direction: column;
}
.tier.lead { border-color: var(--violet); box-shadow: 0 0 0 3px var(--violet-lo); }
.tier h3 { font-size: 18px; font-weight: 700; letter-spacing: -0.022em; display: flex; align-items: center; gap: 8px; }
.tier .visits {
	margin-top: 10px;
	font-family: var(--display);
	font-size: 27px;
	font-weight: 700;
	letter-spacing: -0.03em;
}
.tier .visits small { display: block; font-family: var(--text); font-size: 12.5px; font-weight: 500; color: var(--ink-quiet); letter-spacing: 0; margin-top: 3px; }
.tier ul { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; }
.tier li { font-size: 14px; line-height: 1.45; color: var(--ink-soft); padding-inline-start: 19px; position: relative; }
.tier li::before { content: ''; position: absolute; inset-inline-start: 0; top: 7px; width: 7px; height: 7px; border-radius: 2px; background: var(--violet); }
.tier li.carry { color: var(--ink-quiet); }
.tier li.carry::before { background: var(--line-strong); }

/* ---------- pricing strip ---------- */
.price-grid { display: grid; gap: 22px; }
@media (min-width: 880px) { .price-grid { grid-template-columns: 0.9fr 1.1fr; } }
.price-big {
	font-family: var(--display);
	font-size: clamp(46px, 6vw, 66px);
	font-weight: 750;
	letter-spacing: -0.04em;
	line-height: 1;
}
.price-big small { font-size: 0.3em; font-weight: 600; letter-spacing: -0.01em; color: var(--ink-soft); }
.billed { display: grid; gap: 0; }
.billed li { display: flex; gap: 12px; padding: 12px 0; font-size: 14.5px; line-height: 1.5; align-items: flex-start; }
.billed li + li { border-top: 1px solid var(--line); }
.billed .tagword { flex: none; font-weight: 700; width: 74px; font-size: 12px; }
.billed .free .tagword { color: var(--sage); }
.billed .paid .tagword { color: var(--gold); }

/* ---------- languages ---------- */
.lang-card { direction: rtl; text-align: right; }
.device-greet.lang-card { padding: 0 4px 14px; }
.lang-card .sc-head { flex-direction: row-reverse; }
.lang-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
.lang-chip {
	font-size: 14px;
	font-weight: 600;
	padding: 9px 15px;
	border-radius: 10px;
	border: 1px solid var(--line-strong);
}

.trust-grid { display: grid; gap: 28px 40px; }
@media (min-width: 720px) { .trust-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .trust-grid { grid-template-columns: repeat(3, 1fr); } }
.trust-grid a { color: var(--violet-ink); text-underline-offset: 2px; }

/* ---------- FAQ ---------- */
.faq-item { border-top: 1px solid var(--line); }
.faq-item:last-child { border-bottom: 1px solid var(--line); }
.faq-item summary {
	list-style: none;
	cursor: pointer;
	padding: 22px 0;
	font-family: var(--display);
	font-size: 17.5px;
	font-weight: 650;
	letter-spacing: -0.02em;
	display: flex;
	justify-content: space-between;
	gap: 20px;
	align-items: center;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
	content: '+';
	font-size: 22px;
	font-weight: 400;
	color: var(--violet);
	flex: none;
}
.faq-item[open] summary::after { content: '\2013'; }
.faq-item p { padding: 0 0 22px; font-size: 15px; line-height: 1.65; color: var(--ink-soft); max-width: 70ch; }

/* ---------- real app screenshots ---------- */
.shots { display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 760px) { .shots { grid-template-columns: repeat(4, 1fr); } }
.shot { margin: 0; }
.shot img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 18px;
	border: 1px solid rgba(244, 236, 245, 0.16);
	background: var(--paper);
}
.shot figcaption { margin-top: 10px; font-size: 13px; color: #a494ab; }

/* ---------- about ---------- */
.about { display: grid; gap: clamp(26px, 3vw, 44px); }
@media (min-width: 880px) { .about { grid-template-columns: 0.75fr 1.25fr; } }
.about-card {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	padding: 24px;
}
.about-card img { width: 66px; height: 66px; display: block; }
.about-card b { display: block; margin-top: 14px; font-family: var(--display); font-size: 18px; font-weight: 700; letter-spacing: -0.02em; }
.about-card span { display: block; margin-top: 3px; font-size: 14px; color: var(--ink-quiet); }
.about-card a { display: inline-block; margin-top: 14px; font-size: 14px; font-weight: 600; color: var(--violet-ink); }
.about p + p { margin-top: 15px; }

/* ---------- notify form ---------- */
.notify { margin-top: 30px; max-width: 520px; }
.notify-row { display: flex; flex-wrap: wrap; gap: 10px; }
.notify input[type="email"] {
	flex: 1 1 240px;
	min-width: 0;
	padding: 14px 16px;
	border-radius: 13px;
	border: 1px solid rgba(244, 236, 245, 0.3);
	background: rgba(255, 255, 255, 0.06);
	color: #f7f1f8;
	font: inherit;
	font-size: 16px;
}
.notify input[type="email"]::placeholder { color: #a494ab; }
.notify input[type="email"]:focus-visible { outline: 3px solid var(--violet-up); outline-offset: 2px; }
.notify .consent { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; font-size: 13.5px; line-height: 1.5; color: #cdbfd2; }
.notify .consent input { margin-top: 3px; accent-color: var(--violet-up); width: 17px; height: 17px; flex: none; }
.notify .consent a { color: #f7f1f8; }
.notify-note { margin-top: 12px; font-size: 13.5px; min-height: 1.2em; }
.notify-note.ok { color: #9fd8aa; }
.notify-note.bad { color: #ff9cba; }

/* ---------- final CTA ---------- */
.final-cta { text-align: left; }
.stores { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.store {
	display: inline-flex;
	flex-direction: column;
	gap: 2px;
	padding: 12px 20px;
	border-radius: 13px;
	border: 1px solid rgba(244, 236, 245, 0.26);
	background: rgba(255, 255, 255, 0.04);
}
.store small { font-size: 11px; color: #a494ab; }
.store b { font-family: var(--display); font-size: 16px; font-weight: 650; letter-spacing: -0.02em; }

/* ---------- footer ---------- */
.footer { background: var(--plum-2); color: #cdbfd2; padding: 60px 0 44px; }
.footer-grid { display: grid; gap: 34px; }
@media (min-width: 820px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.footer h4 { font-size: 13px; font-weight: 650; color: #f7f1f8; margin-bottom: 14px; letter-spacing: 0; }
.footer nav { display: grid; gap: 10px; align-items: start; justify-items: start; }
.footer a, .footer .footer-cookie-button {
	font-size: 14px;
	color: #cdbfd2;
	text-decoration: none;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	font-family: var(--text);
	text-align: left;
}
.footer a:hover, .footer .footer-cookie-button:hover { color: #fff; text-decoration: underline; }
.footer .brand { color: #f7f1f8; margin: 0 0 14px; }
.footer-social { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; font-size: 14px; font-weight: 600; color: #cdbfd2; text-decoration: none; }
.footer-social:hover { color: #fff; }
.footer-social svg { display: block; }
.footer-top { color: #cdbfd2; text-decoration: underline; text-underline-offset: 2px; }
.footer-top:hover { color: #fff; }
.footer-note { margin-top: 38px; padding-top: 22px; border-top: 1px solid rgba(244, 236, 245, 0.14); font-size: 13px; color: #9b8ba2; }

/* ---------- back to top ---------- */
.to-top {
	position: fixed;
	right: 22px;
	bottom: 22px;
	z-index: 870;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	display: none;
	place-items: center;
	background: var(--ink);
	color: var(--paper);
	text-decoration: none;
	box-shadow: 0 12px 30px rgba(37, 31, 42, 0.3);
	opacity: 1;
	transition: opacity 0.22s ease, transform 0.22s ease;
}
@media (min-width: 820px) { .to-top { display: grid; } }
/* Visible by default so it still works with JavaScript off and under
   reduced motion, where the scroll listener never attaches. Script
   only hides it while you are already near the top. */
.to-top.is-near-top { opacity: 0; transform: translateY(10px); pointer-events: none; }
.to-top:hover { background: var(--violet); }
@media (prefers-reduced-motion: reduce) { .to-top { transition: none; } }

/* ---------- sticky mobile CTA ---------- */
.mobile-cta {
	position: fixed;
	left: 14px;
	right: 14px;
	bottom: 14px;
	z-index: 880;
	display: flex;
	gap: 10px;
	padding: 11px;
	border-radius: 16px;
	/* Opaque rather than blurred: this bar only exists on phones, where a
	   full-width backdrop-filter is re-evaluated on every scroll frame. */
	background: rgba(42, 34, 48, 0.985);
	box-shadow: 0 16px 40px rgba(20, 10, 26, 0.35);
	transition: transform 0.24s ease, opacity 0.24s ease;
}
.mobile-cta .btn { flex: 1; padding: 13px 14px; font-size: 15px; }
/* The bar sits on plum, so the outline button needs the light treatment
   it would otherwise only get inside an .on-plum band. */
.mobile-cta .btn.secondary { color: #f4ecf5; border-color: rgba(244, 236, 245, 0.36); }
.mobile-cta.is-hidden { transform: translateY(150%); opacity: 0; pointer-events: none; }
@media (min-width: 820px) { .mobile-cta { display: none; } }

/* ---------- consent ---------- */
.analytics-consent {
	position: fixed;
	left: 14px;
	right: 14px;
	bottom: 14px;
	z-index: 950;
	display: grid;
	gap: 14px;
	padding: 18px;
	border-radius: 16px;
	background: var(--surface);
	border: 1px solid var(--line-strong);
	box-shadow: 0 22px 60px rgba(37, 31, 42, 0.26);
}
@media (min-width: 760px) {
	.analytics-consent { left: auto; right: 20px; bottom: 20px; max-width: 430px; }
}
.analytics-consent[hidden] { display: none; }
/* A consent sheet is a footnote, not a landing page. At its full size it
   covered the entire hero on a phone; this is the same notice, same words,
   same link, in about half the height. */
@media (max-width: 759px) {
	.analytics-consent { padding: 13px 14px; gap: 10px; border-radius: 14px; }
	.analytics-consent strong { font-size: 14.5px; }
	.analytics-consent p { margin-top: 4px; font-size: 12.5px; line-height: 1.5; }
	.analytics-consent button { padding: 9px 12px; font-size: 13px; }
}
.analytics-consent strong { font-family: var(--display); font-size: 16px; font-weight: 650; }
.analytics-consent p { margin-top: 7px; font-size: 13.5px; line-height: 1.55; color: var(--ink-soft); }
.analytics-consent-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.analytics-consent button {
	flex: 1;
	padding: 11px 14px;
	border-radius: 11px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	font-family: var(--text);
	border: 1px solid var(--line-strong);
	background: transparent;
	color: var(--ink);
}
.analytics-consent .analytics-consent-allow { background: var(--violet); border-color: var(--violet); color: #fff; }
body.analytics-consent-open .mobile-cta { display: none; }

/* ---------- scroll reveal (hooks required by /landing.js) ---------- */
.reveal {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.54s ease, transform 0.54s ease;
	transition-delay: var(--reveal-delay, 0ms);
}
.reveal.is-visible { opacity: 1; transform: none; }
.reveal.reveal-left { transform: translateX(-18px); }
.reveal.reveal-right { transform: translateX(18px); }
@media (prefers-reduced-motion: reduce) {
	.reveal { transition: none; opacity: 1; transform: none; }
}
		
/* ---------- RTL corrections ----------
   Most of the sheet uses logical properties and needs nothing. These
   are the handful of places that are physically anchored. */
[dir="rtl"] .brand { margin-right: 0; margin-left: auto; }
[dir="rtl"] .navmenu { margin-left: 0; margin-right: auto; }
[dir="rtl"] .navmenu-panel { right: auto; left: 0; }
[dir="rtl"] .bloom { right: auto; left: -140px; }
[dir="rtl"] .to-top { right: auto; left: 22px; }
[dir="rtl"] .tier li::before, [dir="rtl"] .step::before { inset-inline-start: 0; }
[dir="rtl"] .step::before { inset-inline-start: 25px; }
[dir="rtl"] .rr-elbow, [dir="rtl"] .dv-elbow { right: auto; left: 20px; }
[dir="rtl"] .dv-elbow { left: 12.5%; }
[dir="rtl"] .sc-count, [dir="rtl"] .dv-count, [dir="rtl"] .tier-visits { direction: ltr; unicode-bidi: isolate; }
[dir="rtl"] .h-hero, [dir="rtl"] .h-sec { letter-spacing: -0.01em; }
[dir="rtl"] .device { direction: rtl; }
		
.rr-svg { display: block; width: 100%; max-width: 160px; height: auto; }

/* ---------- reading progress + nav position ---------- */
.read-progress {
	position: fixed;
	top: var(--nav-h);
	inset-inline: 0;
	height: 3px;
	z-index: 899;
	background: var(--violet);
	transform: scaleX(var(--page-progress, 0));
	transform-origin: left center;
	pointer-events: none;
}
[dir="rtl"] .read-progress { transform-origin: right center; }
@media (prefers-reduced-motion: reduce) { .read-progress { transition: none; } }

.topnav-link[aria-current="location"] { color: var(--ink); font-weight: 650; }

/* platform column of the methods table, as a pill rather than grey text */
.m-plat {
	display: inline-flex;
	align-items: center;
	align-self: start;
	/* A grid item stretches to its track by default, which forced every pill
	   to the track width and left the longest label spilling out of its own
	   background. Size to content instead. */
	justify-self: start;
	padding: 4px 10px;
	border-radius: 999px;
	font-size: 11.5px;
	font-weight: 650;
	background: var(--sage-lo);
	color: var(--sage);
	white-space: nowrap;
}
.m-plat.limited { background: var(--wash); color: var(--ink-quiet); }

/* The status line wraps on a phone; the dot belongs on the first line. */
.hero-status { align-items: start; }
.hero-status .dot { margin-top: 0.45em; flex: none; }

/* The footer is plum; .note's quiet INK colour is for cream and measured
   2.89:1 here — dark text on a dark panel. It needs the on-plum treatment,
   which the footer never inherited because it is not an .on-plum band. */
.footer .note { color: #cdbfd2; }

/* WCAG 2.2 AA (2.5.8) wants a 24x24 target. These links were 19px tall — the
   height of their own text — because nothing gave them vertical padding.
   Padding on an inline element enlarges the hit box, which is what 2.5.8
   counts, so this costs no layout. */
.topnav-link { padding-block: 9px; }
.footer a, .footer .footer-cookie-button { padding-block: 4px; }
.navmenu-panel a { padding-block: 10px; }