/**
 * Ragany design system.
 *
 * Every value here is transcribed from the Ragany design source
 * ("Ragany Home.dc.html"). The design used inline styles throughout; this file
 * is the same set of declarations, named, so that Elementor widgets and the
 * theme's header/footer render identically to the design.
 *
 * Do not "tidy" the numbers. The odd ones (53px buttons, 7px bullets,
 * 23.962px wordmark) are the design's own.
 */

/* ---------------------------------------------------------------- tokens -- */

:root {
	/* Ink */
	--rg-ink: #272727;
	--rg-ink-strong: #202020;
	--rg-black: #000000;
	--rg-near-black: #131315;
	--rg-dim: #545454;

	/* Secondary text */
	--rg-muted: #727272;
	--rg-muted-soft: #8f8f8f;
	--rg-nav: #4d4d4d;

	/* Hairlines */
	--rg-line: #dbdbdb;
	--rg-line-soft: #eeeeee;
	--rg-line-softer: #e6e6e6;
	--rg-line-faint: #f0f0f0;

	/* Surfaces */
	--rg-surface: #fafafa;
	--rg-surface-warm: #f7f7f7;
	--rg-surface-100: #f0f0f0;
	--rg-surface-200: #eeeeee;
	--rg-surface-300: #e6e6e6;
	--rg-surface-400: #d9d9d9;

	/* Accent / decoration */
	--rg-accent: #c9c9c9;
	--rg-white: #ffffff;

	/* Status */
	--rg-danger: #f04438;
	--rg-danger-bg: #feeceb;
	--rg-warn: #e08000;
	--rg-warn-bg: #fff4e5;
	--rg-warn-dot: #f79009;
	--rg-ok: #0abe52;
	--rg-ok-bg: #e8f7ee;

	/* Type */
	--rg-font: "Poppins", sans-serif;
	--rg-display: "Urbanist", sans-serif;
	--rg-ui: "Inter", sans-serif;
	--rg-brand: "Nunito", sans-serif;

	/* Layout */
	--rg-shell: 1440px;
	--rg-gutter: clamp(20px, 4.4vw, 64px);
}

/* ------------------------------------------------------------------ base -- */

.rg {
	width: 100%;
	background: var(--rg-white);
	font-family: var(--rg-font);
	color: var(--rg-ink);
	overflow-x: hidden;
}

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

/* Zero-specificity, so every component class below wins without !important.
   A plain ".rg a" outranks a single class and would paint .rg-btn--solid's
   label dark on its dark fill. */
:where(.rg) :where(a) {
	color: var(--rg-ink);
	text-decoration: none;
}

:where(.rg) :where(a:hover) {
	color: var(--rg-black);
}

/* Zero-specificity reset: :where() keeps this from outranking the component
   classes below, which is what a plain ".rg p" selector would do. */
:where(.rg) :where(h1, h2, h3, h4, p) {
	margin: 0;
}

:where(.rg) :where(img) {
	max-width: 100%;
}

.rg-icon {
	display: block;
	flex-shrink: 0;
}

/* ---------------------------------------------------------------- layout -- */

.rg-section {
	width: 100%;
}

.rg-section--white  { background: var(--rg-white); }
.rg-section--soft   { background: var(--rg-surface); }
.rg-section--dark   { background: var(--rg-near-black); }

.rg-shell {
	max-width: var(--rg-shell);
	margin: 0 auto;
	padding-inline: var(--rg-gutter);
}

/* Vertical rhythms, one class per distinct pairing in the design. */
.rg-pad         { padding-block: clamp(64px, 7.2vw, 104px) clamp(72px, 7.8vw, 112px); }
.rg-pad--sub    { padding-block: clamp(56px, 7.2vw, 104px) clamp(64px, 7.8vw, 112px); }
.rg-pad--items  { padding-block: clamp(56px, 7.2vw, 104px) clamp(64px, 7.8vw, 112px); }
.rg-pad--hero   { padding-block: clamp(48px, 6.5vw, 94px); }
.rg-pad--band   { padding-block: clamp(56px, 5.8vw, 84px) clamp(60px, 6.1vw, 88px); }
.rg-pad--compat { padding-block: clamp(40px, 4.6vw, 60px); }
.rg-pad--top    { padding-block: clamp(44px, 5vw, 60px); }
.rg-pad--flat   { padding-block: 60px; }
.rg-pad--plans  { padding-block: clamp(32px, 4vw, 56px) clamp(56px, 6.4vw, 92px); }
.rg-pad--none   { padding-block: 0; }

.rg-stack {
	display: flex;
	flex-direction: column;
}

.rg-row {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

/* ------------------------------------------------------------- typography -- */

/* Eyebrow pill — the design's two variants. */
.rg-eyebrow {
	display: flex;
	align-items: center;
	align-self: flex-start;
	padding: 7px 14px;
	border-radius: 999px;
	background: var(--rg-surface-200);
	box-shadow: inset 0 0 0 1px var(--rg-line-softer);
	font-family: var(--rg-font);
	font-weight: 600;
	font-size: 12px;
	line-height: 1.3;
	letter-spacing: 0.12em;
	color: var(--rg-black);
}

.rg-eyebrow--on-soft { background: var(--rg-white); }
.rg-eyebrow--on-dark {
	background: transparent;
	box-shadow: inset 0 0 0 1px var(--rg-muted-soft);
	color: var(--rg-white);
}

/* Hero-only pill: larger padding, flatter radius, no ring. */
.rg-eyebrow--hero {
	padding: 8px 16px;
	border-radius: 75px;
	background: var(--rg-surface-100);
	box-shadow: none;
	color: var(--rg-ink);
	text-transform: uppercase;
}

.rg-h1 {
	font-family: var(--rg-display);
	font-weight: 600;
	font-size: clamp(38px, 5.1vw, 72px);
	line-height: 1.04;
	letter-spacing: -0.015em;
	color: var(--rg-ink);
	text-wrap: balance;
}

/* Inner-page h1 — smaller than the home hero. */
.rg-h1--page {
	font-size: clamp(36px, 4.1vw, 58px);
	text-wrap: pretty;
}

.rg-h2 {
	font-family: var(--rg-display);
	font-weight: 600;
	font-size: clamp(30px, 3.3vw, 44px);
	line-height: 1.12;
	letter-spacing: -0.012em;
	color: var(--rg-ink);
}

/* The design uses three h2 rhythms: tight (1.12/-0.012em) and two open ones
   (1.3/0) that differ only in where the clamp bottoms out — 28px or 30px. The
   distinction only shows below ~910px, but it shifts every line it touches. */
.rg-h2--open {
	font-size: clamp(28px, 3.3vw, 44px);
	line-height: 1.3;
	letter-spacing: normal;
}

.rg-h2--open30 {
	font-size: clamp(30px, 3.3vw, 44px);
	line-height: 1.3;
	letter-spacing: normal;
}

.rg-h2--band {
	font-size: clamp(28px, 2.9vw, 38px);
	color: var(--rg-white);
}

.rg-h2--wide {
	font-size: clamp(30px, 4.1vw, 58px);
	line-height: 1.04;
	letter-spacing: -0.015em;
}

.rg-h2--panel {
	font-size: clamp(22px, 2.2vw, 28px);
	line-height: 1.28;
	letter-spacing: normal;
}

.rg-h3 {
	font-family: var(--rg-display);
	font-weight: 600;
	font-size: clamp(24px, 2.2vw, 30px);
	line-height: 1.22;
	letter-spacing: -0.008em;
	color: var(--rg-ink);
}

/* Fixed-size h3 used inside the tighter card grids. */
.rg-h3--card {
	font-size: 24px;
	line-height: 1.28;
	letter-spacing: -0.006em;
	text-wrap: pretty;
}

.rg-h3--plan {
	font-size: 30px;
}

.rg-lead {
	font-family: var(--rg-font);
	font-weight: 400;
	font-size: clamp(15px, 1.4vw, 18px);
	line-height: 1.6;
	color: var(--rg-muted);
	text-wrap: pretty;
}

.rg-body {
	font-family: var(--rg-font);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.6;
	color: var(--rg-muted);
	text-wrap: pretty;
}

.rg-body--on-dark { color: var(--rg-accent); }

.rg-note {
	font-family: var(--rg-font);
	font-weight: 500;
	font-size: 14px;
	line-height: 1.4;
	color: var(--rg-muted-soft);
}

/* Inter is the design's small-print face; line-height 1 is deliberate. */
.rg-fine {
	font-family: var(--rg-ui);
	font-weight: 500;
	font-size: 12px;
	line-height: 1;
	color: var(--rg-muted-soft);
}

/* Wrapping is a per-heading decision in the design, so it is opted into. */
.rg-wrap-pretty  { text-wrap: pretty; }
.rg-wrap-balance { text-wrap: balance; }

.rg-label {
	font-family: var(--rg-font);
	font-weight: 500;
	font-size: 15px;
	line-height: 1.4;
	color: var(--rg-ink);
}

/* --------------------------------------------------------------- buttons -- */

.rg-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 53px;
	padding: 0 30px;
	border: 0;
	border-radius: 8px;
	font-family: var(--rg-font);
	font-weight: 500;
	font-size: 16px;
	cursor: pointer;
	transition: background 180ms ease, box-shadow 180ms ease, color 180ms ease;
}

.rg-btn--solid {
	background: var(--rg-near-black);
	color: var(--rg-white);
}

.rg-btn--solid:hover {
	background: var(--rg-black);
	color: var(--rg-white);
}

.rg-btn--ghost {
	background: transparent;
	box-shadow: inset 0 0 0 1px var(--rg-line);
	color: var(--rg-ink);
}

.rg-btn--ghost:hover {
	box-shadow: inset 0 0 0 1px var(--rg-ink);
	color: var(--rg-ink);
}

/* Some ghost buttons in the design sit on tinted panels and carry a white fill. */
.rg-btn--ghost-filled {
	background: var(--rg-white);
	box-shadow: inset 0 0 0 1px var(--rg-line);
	color: var(--rg-ink);
}

.rg-btn--ghost-filled:hover {
	box-shadow: inset 0 0 0 1px var(--rg-ink);
}

/* Inverted pair, for the dark CTA bands. */
.rg-btn--invert {
	background: var(--rg-white);
	color: var(--rg-near-black);
}

.rg-btn--invert:hover {
	background: var(--rg-surface-200);
	color: var(--rg-near-black);
}

.rg-btn--invert-ghost {
	background: transparent;
	box-shadow: inset 0 0 0 1px var(--rg-muted-soft);
	color: var(--rg-white);
}

.rg-btn--invert-ghost:hover {
	box-shadow: inset 0 0 0 1px var(--rg-white);
	color: var(--rg-white);
}

/* Fixed widths the design pins on certain buttons. */
.rg-btn--w222 { width: 222px; max-width: 100%; padding-inline: 0; }
.rg-btn--w209 { width: 209px; max-width: 100%; padding-inline: 0; }
.rg-btn--w195 { width: 195px; max-width: 100%; padding-inline: 0; }
.rg-btn--w183 { width: 183px; max-width: 100%; padding-inline: 0; }
.rg-btn--w181 { width: 181px; max-width: 100%; padding-inline: 0; }
.rg-btn--w172 { width: 172px; max-width: 100%; padding-inline: 0; }
.rg-btn--w139 { width: 139px; max-width: 100%; padding-inline: 0; }
.rg-btn--block { width: 100%; padding-inline: 0; }

/* The bundle panel's button sits on a slightly tighter inset. */
.rg-btn--p26 { padding-inline: 26px; }

/* Nav CTA is shorter than the page buttons. */
.rg-btn--nav {
	height: 45px;
	padding: 0 24px;
}

/* Underlined text link ("Explore the vault →"). */
.rg-textlink {
	font-family: var(--rg-font);
	font-weight: 500;
	font-size: 15px;
	line-height: 1.6;
	color: var(--rg-near-black);
	text-decoration: underline;
	text-underline-offset: 4px;
}

.rg-textlink:hover { color: var(--rg-black); }

/* ----------------------------------------------------------------- cards -- */

.rg-card {
	border-radius: 16px;
	background: var(--rg-white);
	box-shadow: inset 0 0 0 1px var(--rg-line);
	padding: 30px 32px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.rg-card--hover:hover {
	box-shadow: inset 0 0 0 1px var(--rg-ink);
}

/* Product cards additionally lift. */
.rg-card--lift {
	transition: box-shadow 220ms ease, transform 220ms ease;
}

.rg-card--lift:hover {
	box-shadow: inset 0 0 0 1px var(--rg-ink);
	transform: translateY(-3px);
}

.rg-card--p32 { padding: 32px; }

/* Tinted panel used for "Why one account", "Item types", "Bundle". */
.rg-panel {
	border-radius: 16px;
	background: var(--rg-surface);
	box-shadow: inset 0 0 0 1px var(--rg-line-soft);
	box-sizing: border-box;
}

.rg-panel--flat {
	border-radius: 24px;
	background: var(--rg-surface-200);
	box-shadow: none;
	padding: clamp(28px, 3.4vw, 48px);
}

/* Warm panel behind the compatibility collage. */
.rg-panel--warm {
	border-radius: 24px;
	background: var(--rg-surface-warm);
	box-shadow: inset 0 0 0 1px var(--rg-line-faint);
	padding: clamp(24px, 3vw, 40px);
}

/* 52px black icon tile. */
.rg-icontile {
	display: flex;
	width: 52px;
	height: 52px;
	flex-shrink: 0;
	border-radius: 12px;
	background: var(--rg-black);
	align-items: center;
	justify-content: center;
	color: var(--rg-white);
}

/* 64px light platform tile. */
.rg-plattile {
	display: flex;
	width: 64px;
	height: 64px;
	border-radius: 16px;
	background: var(--rg-surface-200);
	align-items: center;
	justify-content: center;
	color: var(--rg-ink-strong);
}

/* Dot-leader bullet list. */
.rg-bullets {
	display: flex;
	flex-direction: column;
	gap: 13px;
	padding-block: 8px;
}

.rg-bullets--tight { padding-block: 6px; }

.rg-bullet {
	display: flex;
	flex-direction: row;
	gap: 12px;
	align-items: center;
	font-family: var(--rg-font);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.6;
	color: var(--rg-muted);
}

.rg-bullet::before {
	content: "";
	width: 7px;
	height: 7px;
	flex-shrink: 0;
	border-radius: 50%;
	background: var(--rg-accent);
}

/* Pill chip with a leading icon ("Passwords", "Secure notes", …). */
.rg-chip {
	display: flex;
	flex-direction: row;
	gap: 6px;
	padding: 12px 20px;
	border-radius: 999px;
	background: var(--rg-white);
	box-shadow: inset 0 0 0 1px var(--rg-line);
	align-items: center;
	color: var(--rg-ink);
	font-family: var(--rg-font);
	font-weight: 500;
	font-size: 15px;
	line-height: 1.4;
}

/* Framed screenshot: 9px liner around a 13px-radius image. */
.rg-frame {
	border-radius: 22px;
	background: var(--rg-surface);
	box-shadow: inset 0 0 0 1px var(--rg-line);
	padding: 9px;
	box-sizing: border-box;
}

.rg-frame__media {
	width: 100%;
	border-radius: 13px;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

/* The home page's VPN panel frames in white with a slightly larger inner
   radius; every other framed screenshot uses the soft grey above. */
.rg-frame--white {
	background: var(--rg-white);
}

.rg-frame--white .rg-frame__media {
	border-radius: 14px;
}

/* Wider frame variant used on the page heroes. */
.rg-frame--wide {
	border-radius: 26px;
	background: var(--rg-surface);
	box-shadow: inset 0 0 0 1px var(--rg-line);
	padding: 10px;
	overflow: hidden;
}

.rg-frame--bare {
	border-radius: 26px;
	background: var(--rg-surface);
	box-shadow: inset 0 0 0 1px var(--rg-line);
	padding: 0;
	overflow: hidden;
}

/* --------------------------------------------------------------- reveals -- */

/* Initial state applies only once JS is running, so the page stays readable
   if the observer never runs. Matches the design's behaviour exactly. */
.rg-js [data-rg-reveal] {
	opacity: 0;
	transform: translateY(18px);
	transition:
		opacity 820ms cubic-bezier(0.22, 0.61, 0.36, 1),
		transform 820ms cubic-bezier(0.22, 0.61, 0.36, 1);
	will-change: opacity, transform;
}

.rg-js [data-rg-reveal].rg-in {
	opacity: 1;
	transform: none;
}

.rg-js [data-rg-reveal].rg-done {
	will-change: auto;
}

/* Card grids stagger their children rather than moving as one block. */
.rg-js [data-rg-reveal][data-rg-grid] {
	opacity: 1;
	transform: none;
}

.rg-js [data-rg-grid] > * {
	opacity: 0;
	transform: translateY(14px);
	transition:
		opacity 760ms cubic-bezier(0.22, 0.61, 0.36, 1),
		transform 760ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.rg-js [data-rg-grid].rg-in > * {
	opacity: 1;
	transform: none;
}

.rg-js [data-rg-grid].rg-in > *:nth-child(2) { transition-delay: 70ms; }
.rg-js [data-rg-grid].rg-in > *:nth-child(3) { transition-delay: 140ms; }
.rg-js [data-rg-grid].rg-in > *:nth-child(4) { transition-delay: 190ms; }
.rg-js [data-rg-grid].rg-in > *:nth-child(5) { transition-delay: 250ms; }
.rg-js [data-rg-grid].rg-in > *:nth-child(6) { transition-delay: 310ms; }

/* Two-column grids use the design's shorter stagger ramp. */
.rg-js [data-rg-grid="2"].rg-in > *:nth-child(3) { transition-delay: 190ms; }
.rg-js [data-rg-grid="2"].rg-in > *:nth-child(4) { transition-delay: 250ms; }

@media (prefers-reduced-motion: reduce) {
	.rg-js [data-rg-reveal],
	.rg-js [data-rg-grid] > * {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

/* Editing in Elementor must never leave a section invisible. */
.elementor-editor-active [data-rg-reveal],
.elementor-editor-active [data-rg-grid] > * {
	opacity: 1 !important;
	transform: none !important;
}