/**
 * Base styles shared between all pages
 *
 * @copyright   2026, ON1
 */

/* !- Fonts */
@font-face {
	font-display: swap;
	font-family: Inter;
	font-style: normal;
	font-weight: 100 900;
	src: url('/assets/fonts/Inter/InterVariable.woff2') format('woff2');
}

@font-face {
	font-display: swap;
	font-family: Inter;
	font-style: italic;
	font-weight: 100 900;
	src: url('/assets/fonts/Inter/InterVariable-Italic.woff2') format('woff2');
}

/* !- Colors & defaults */
:root,
[data-theme="dark"] {
	/* Pure black & white */
	--black: #000;
	--white: #fff;

	/* Surfaces */
	--bg-50: #f6f6f7;
	--bg-100: #eaeaea;
	--bg-200: #cfcfcf;
	--bg-300: #a0a0a0;
	--bg-400: #7c7c7d;
	--bg-500: #676767;
	--bg-600: #4a4a4a;
	--bg-700: #303030;
	--bg-800: #282828;
	--bg-850: #232323;
	--bg-900: #1e1e1e;
	--bg-950: #141414;

	/* Text */
	--text-50: #f7f7f8;
	--text-100: #eaeaec;
	--text-200: #d4d4d8;
	--text-300: #bdbdc1;
	--text-400: #9c9ca2;
	--text-500: #86868c;
	--text-600: #5e5e64;
	--text-700: #444448;
	--text-800: #2b2b2e;
	--text-900: #161618;

	/* Dark (default: #7c7c82) */
	--dark-50: #f7f7f8;
	--dark-100: #eaeaec;
	--dark-200: #d4d4d8;
	--dark-300: #bdbdc1;
	--dark-400: #9c9ca2;
	--dark-500: #7c7c82;
	--dark-600: #5e5e64;
	--dark-700: #444448;
	--dark-800: #2b2b2e;
	--dark-900: #161618;

	/* Light (default: #9c9ca2) */
	--light-50: #161618;
	--light-100: #2b2b2e;
	--light-200: #444448;
	--light-300: #5e5e64;
	--light-400: #7c7c82;
	--light-500: #9c9ca2;
	--light-600: #bdbdc1;
	--light-700: #d4d4d8;
	--light-800: #eaeaec;
	--light-900: #f7f7f8;

	/* Blue (default: #0a7efa) */
	--blue-50: #f0f7ff;
	--blue-100: #d6e7ff;
	--blue-200: #a9d0ff;
	--blue-300: #62adfe;
	--blue-400: #3495fc;
	--blue-500: #0a7efa;
	--blue-600: #086bd4;
	--blue-700: #0659b0;
	--blue-800: #004794;
	--blue-900: #00305f;
	--blue-950: #001f3d;
	--blue-transparent: rgba(10, 126, 250, 0.16);

	/* Green (default: #21ce6e) */
	--green-50: #ecfdf3;
	--green-100: #d1fadf;
	--green-200: #9bf1bf;
	--green-300: #62e99e;
	--green-400: #38dc81;
	--green-500: #21ce6e;
	--green-600: #1caf5e;
	--green-700: #158e4b;
	--green-800: #0e703a;
	--green-900: #094c27;
	--green-950: #06311a;
	--green-transparent: rgba(33, 206, 110, 0.16);

	/* Orange (default: #fe842a) */
	--orange-50: #fff4eb;
	--orange-100: #ffe3ca;
	--orange-200: #ffce9f;
	--orange-300: #ffb985;
	--orange-400: #ff9c54;
	--orange-500: #fe842a;
	--orange-600: #d87024;
	--orange-700: #c45f12;
	--orange-800: #b84e00;
	--orange-900: #8a3a00;
	--orange-950: #5e2800;
	--orange-transparent: rgba(254, 132, 42, 0.16);

	/* Red (default: #ff3d57) */
	--red-50: #fff0f2;
	--red-100: #ffd6dc;
	--red-200: #ffb3bd;
	--red-300: #ff99a6;
	--red-400: #ff6377;
	--red-500: #ff3d57;
	--red-600: #d9344a;
	--red-700: #b62537;
	--red-800: #cc001b;
	--red-900: #8a0012;
	--red-950: #5c000c;

	/* Purple (default: #914fff) */
	--purple-50: #f4efff;
	--purple-100: #e6d6ff;
	--purple-200: #cbadff;
	--purple-300: #af82ff;
	--purple-400: #9d63ff;
	--purple-500: #914fff;
	--purple-600: #7841d3;
	--purple-700: #5f33a7;
	--purple-800: #46267b;
	--purple-900: #2f1953;
	--purple-950: #1f1037;

	/* Legacy purple (default: #924294) */
	--legacy-purple-50: #f6eff6;
	--legacy-purple-100: #ecd8ec;
	--legacy-purple-200: #d7add8;
	--legacy-purple-300: #c16fc3;
	--legacy-purple-400: #a955ab;
	--legacy-purple-500: #924294;
	--legacy-purple-600: #7c387e;
	--legacy-purple-700: #602c62;
	--legacy-purple-800: #481d49;
	--legacy-purple-900: #2f132f;
	--legacy-purple-950: #200d20;

	/* Pink (default: #ee19a9) */
	--pink-50: #fdeaf6;
	--pink-100: #fbcce9;
	--pink-200: #f79fd4;
	--pink-300: #f368bd;
	--pink-400: #f13fae;
	--pink-500: #ee19a9;
	--pink-600: #c6158d;
	--pink-700: #9e1071;
	--pink-800: #760b54;
	--pink-900: #4f0739;
	--pink-950: #340526;

	/* Gold (default: #fab73b) */
	--gold-50: #fff8e6;
	--gold-100: #ffedbf;
	--gold-200: #fee3a6;
	--gold-300: #fed893;
	--gold-400: #fcc862;
	--gold-500: #fab73b;
	--gold-600: #d49c32;
	--gold-700: #cc8f1c;
	--gold-800: #c58000;
	--gold-900: #8a5a00;
	--gold-950: #5e3d00;
	--gold-transparent: rgba(250, 183, 59, 0.16);

	/* Teal (default: #18cfdc) */
	--teal-50: #e9fcfd;
	--teal-100: #c5f7fa;
	--teal-200: #93eff5;
	--teal-300: #60e7f0;
	--teal-400: #2fdbe6;
	--teal-500: #18cfdc;
	--teal-600: #249fa8;
	--teal-700: #16868f;
	--teal-800: #0a737b;
	--teal-900: #085158;
	--teal-950: #05363b;

	/* Magenta (default: #ef39a0) */
	--magenta-50: #fdeaf5;
	--magenta-100: #fbcde8;
	--magenta-200: #f9aad6;
	--magenta-300: #f88cc9;
	--magenta-400: #f45fb2;
	--magenta-500: #ef39a0;
	--magenta-600: #d8278b;
	--magenta-700: #c01a79;
	--magenta-800: #ae0967;
	--magenta-900: #7c064a;
	--magenta-950: #530531;

	/* Slate (default: #607796) */
	--slate-50: #f1f4f8;
	--slate-100: #dde3eb;
	--slate-200: #b9c4d3;
	--slate-300: #93a3b8;
	--slate-400: #7689a4;
	--slate-500: #607796;
	--slate-600: #4f627c;
	--slate-700: #3e4d62;
	--slate-800: #2e3948;
	--slate-900: #1e2530;
	--slate-950: #141920;

	/* Text */
	--link: var(--blue-200);
	--link-hover: var(--blue-100);
	--link-alt: var(--blue-400);

	/*
	 * Accents that carry text rather than fill a shape. A saturated hue can't
	 * clear 4.5:1 on both #1e1e1e and #f6f6f7 at the same step, so these flip
	 * per theme - see the light block. Use these for coloured TEXT; use the
	 * numbered orange and blue palette steps directly for fills and badges.
	 */
	--accent-orange: var(--orange-400);
	--accent-blue: var(--blue-300);

	/* Colors */
	--blue: var(--blue-500);
	--green: var(--green-500);
	--orange: var(--orange-500);
	--red: var(--red-500);
	--purple: var(--purple-500);
	--legacy-purple: var(--legacy-purple-500);
	--pink: var(--pink-500);
	--gold: var(--gold-500);
	--teal: var(--teal-500);
	--magenta: var(--magenta-500);
	--slate: var(--slate-500);

	/* Statuses */
	--success: var(--green-500);
	--warning: var(--gold-500);
	--danger: var(--red-500);
	--info: var(--blue-500);

	/* Font families */
	--sans-serif: "Inter", system-ui, -apple-system, sans-serif;
	--serif: ui-serif, "New York", Georgia, serif;
	--monospace: ui-monospace, SFMono-Regular, "Cascadia Code", Monaco, "Andale Mono", "Ubuntu Mono", monospace;

	/* Font sizes */
	--text-tiny: 0.625rem;
	--text-micro: 0.6875rem;
	--text-mini: 0.75rem;
	--text-xs: 0.8125rem;
	--text-sm: 0.875rem;
	/* --text-base: 1.063rem; */
	--text-base: 1rem;
	--text-lg: 1.125rem;
	--text-xl: 1.25rem;
	--text-2xl: 1.5rem;
	--text-3xl: 1.875rem;
	--text-4xl: 2.25rem;
	--text-5xl: 2.5rem;
	--text-6xl: 3rem;

	/* Border radius */
	--border-radius: 0.375rem;
}

/* !- Light theme
 *
 * The text scale is tuned by contrast, not by mirroring the dark scale's
 * position. Mirroring is what it used to do, and it doesn't work: the same
 * step lands on the lighter grey and then sits on a light background, so it
 * loses twice. --text-500 was #9c9ca2 on #f6f6f7, which is 2.53:1 - under
 * WCAG's 3.0 floor for large text, let alone 4.5 for body - and it was
 * carrying the counters, filter titles, results counts, and card meta.
 *
 * Each step below is picked to hit the same ratio against --bg-900 (#f6f6f7)
 * that its dark counterpart hits against #1e1e1e:
 *
 *   --text-200  11.31:1    --text-400  6.07:1
 *   --text-300   8.84:1    --text-500  4.63:1
 *
 * --text-50 and --text-100 are left alone at 16.73:1 and 13.07:1. Both clear
 * every threshold already and they set every heading on the site, so there's
 * nothing to buy by moving them.
 *
 * Check any new value against #f6f6f7 rather than against white - the page is
 * never actually white - and keep at least ~1.2x between adjacent steps or the
 * scale stops being a scale.
 */
[data-theme="light"] {
	/* Surfaces */
	--bg-50: #1e1e1e;
	--bg-100: #333333;
	--bg-200: #5f5f5f;
	--bg-300: #8f8f8f;
	--bg-400: #b3b3b3;
	--bg-500: #cbcbcb;
	--bg-600: #dcdcdc;
	--bg-700: #eaeaea;
	--bg-800: #eeeeef;
	--bg-850: #f2f2f3;
	--bg-900: #f6f6f7;
	--bg-950: #fafafb;

	/* Text */
	--text-50: #161618;
	--text-100: #2b2b2e;
	--text-200: #353539;
	--text-300: #454549;
	--text-400: #5d5d61;
	--text-500: #6f6f73;
	--text-600: #bdbdc1;
	--text-700: #d4d4d8;
	--text-800: #eaeaec;
	--text-900: #f7f7f8;

	/* Links */
	--link: var(--blue-600);
	--link-hover: var(--blue-700);
	--link-alt: var(--blue-600);

	/*
	 * Darker steps than the dark theme uses, for the reason given up there.
	 * --accent-orange is --orange-900 rather than --orange-800 because the tag
	 * pill sits on a 16% orange tint, not on the page - #8a3a00 clears 4.5:1
	 * against the tint (6.34:1) and against the page (7.24:1), so one value
	 * covers the pill, the Plus filter row, and the upsell eyebrow.
	 */
	--accent-orange: var(--orange-900);
	--accent-blue: var(--blue-700);
}

/* !- Inverted colors
 *
 * A light band on a dark page, so it carries the light theme's text scale and
 * has to be kept in step with the block above - the old weak values reached
 * dark mode through here, in Most Viewed, Most Popular Creative Extras, the
 * single video rail, and the bookshelf cover hero. Change one, change both.
 */
.theme-inverted {
	/* Surfaces */
	--bg-50: #1e1e1e;
	--bg-100: #333333;
	--bg-200: #5f5f5f;
	--bg-300: #8f8f8f;
	--bg-400: #b3b3b3;
	--bg-500: #cbcbcb;
	--bg-600: #dcdcdc;
	--bg-700: #eaeaea;
	--bg-800: #eeeeef;
	--bg-850: #f2f2f3;
	--bg-900: #f6f6f7;

	/* Text */
	--text-50: #161618;
	--text-100: #2b2b2e;
	--text-200: #353539;
	--text-300: #454549;
	--text-400: #5d5d61;
	--text-500: #6f6f73;
	--text-600: #bdbdc1;
	--text-700: #d4d4d8;
	--text-800: #eaeaec;
	--text-900: #f7f7f8;

	/*
	 * Links and accents flip here too, or a light band on a dark page paints
	 * pale-blue link text onto a near-white surface. Same values as the light
	 * theme block, for the same reason.
	 */
	--link: var(--blue-600);
	--link-hover: var(--blue-700);
	--link-alt: var(--blue-600);
	--accent-orange: var(--orange-900);
	--accent-blue: var(--blue-700);

	background: var(--bg-900);
	color: var(--text-300);
}

[data-theme="light"] .theme-inverted {
	/* Surfaces */
	--bg-50: #f6f6f7;
	--bg-100: #eaeaea;
	--bg-200: #cfcfcf;
	--bg-300: #a0a0a0;
	--bg-400: #7c7c7d;
	--bg-500: #676767;
	--bg-600: #4a4a4a;
	--bg-700: #303030;
	--bg-800: #282828;
	--bg-850: #232323;
	--bg-900: #1e1e1e;

	/* Text */
	--text-50: #f7f7f8;
	--text-100: #eaeaec;
	--text-200: #d4d4d8;
	--text-300: #bdbdc1;
	--text-400: #9c9ca2;
	--text-500: #86868c;
	--text-600: #5e5e64;
	--text-700: #444448;
	--text-800: #2b2b2e;
	--text-900: #161618;

	/* A dark band on a light page, so links and accents go back to the dark values */
	--link: var(--blue-200);
	--link-hover: var(--blue-100);
	--link-alt: var(--blue-400);
	--accent-orange: var(--orange-400);
	--accent-blue: var(--blue-300);
}

/* !- Background color utilities */
.bg-black,
.bg-black:hover,
.bg-black:focus,
.bg-black:active {
	background-color: var(--black);
	border-color: var(--black);
}

.bg-white,
.bg-white:hover,
.bg-white:focus,
.bg-white:active {
	background-color: var(--white);
	border-color: var(--white);
}

.bg-blue,
.bg-blue:hover,
.bg-blue:focus,
.bg-blue:active {
	background-color: var(--blue-500);
	border-color: var(--blue-500);
}

.bg-green,
.bg-green:hover,
.bg-green:focus,
.bg-green:active {
	background-color: var(--green-500);
	border-color: var(--green-500);
}

.bg-orange,
.bg-orange:hover,
.bg-orange:focus,
.bg-orange:active {
	background-color: var(--orange-500);
	border-color: var(--orange-500);
}

.bg-red,
.bg-red:hover,
.bg-red:focus,
.bg-red:active {
	background-color: var(--red-500);
	border-color: var(--red-500);
}

.bg-purple,
.bg-purple:hover,
.bg-purple:focus,
.bg-purple:active {
	background-color: var(--purple-500);
	border-color: var(--purple-500);
}

.bg-legacy-purple,
.bg-legacy-purple:hover,
.bg-legacy-purple:focus,
.bg-legacy-purple:active {
	background-color: var(--legacy-purple-500);
	border-color: var(--legacy-purple-500);
}

.bg-pink,
.bg-pink:hover,
.bg-pink:focus,
.bg-pink:active {
	background-color: var(--pink-500);
	border-color: var(--pink-500);
}

.bg-gold,
.bg-gold:hover,
.bg-gold:focus,
.bg-gold:active {
	background-color: var(--gold-500);
	border-color: var(--gold-500);
}

.bg-teal,
.bg-teal:hover,
.bg-teal:focus,
.bg-teal:active {
	background-color: var(--teal-500);
	border-color: var(--teal-500);
}

.bg-magenta,
.bg-magenta:hover,
.bg-magenta:focus,
.bg-magenta:active {
	background-color: var(--magenta-500);
	border-color: var(--magenta-500);
}

.bg-slate,
.bg-slate:hover,
.bg-slate:focus,
.bg-slate:active {
	background-color: var(--slate-500);
	border-color: var(--slate-500);
}

.bg-hollow,
.bg-hollow:hover,
.bg-hollow:focus,
.bg-hollow:active {
	background-color: transparent;
	border: 1px solid var(--text-100);
	color: var(--text-100);
}

/* !- Text color utilities */
.text-default,
.text-default:hover,
.text-default:focus,
.text-default:active {
	color: var(--text-50);
}

.text-black,
.text-black:hover,
.text-black:focus,
.text-black:active {
	color: var(--black);
}

.text-white,
.text-white:hover,
.text-white:focus,
.text-white:active {
	color: var(--white);
}

.text-blue {
	color: var(--blue-500);
}

.text-green {
	color: var(--green-500);
}

.text-orange {
	color: var(--orange-500);
}

.text-red {
	color: var(--red-500);
}

.text-purple {
	color: var(--purple-500);
}

.text-legacy-purple {
	color: var(--legacy-purple-500);
}

.text-pink {
	color: var(--pink-500);
}

.text-gold {
	color: var(--gold-500);
}

.text-teal {
	color: var(--teal-500);
}

.text-magenta {
	color: var(--magenta-500);
}

.text-slate {
	color: var(--slate-500);
}

/* !- Background bursts */
.bg-burst {
	overflow: hidden;
	position: relative;
}

.bg-burst .container {
	position: relative;
	z-index: 1;
}

.bg-burst::before {
	content: '';
	inset: 0;
	position: absolute;
}

.blue-bg-burst::before {
	background:
		radial-gradient(ellipse at 20% 45%, color-mix(in srgb, var(--blue-600) 12%, transparent) 0%, transparent 55%),
		radial-gradient(ellipse at 65% 43%, color-mix(in srgb, var(--blue-600) 10%, transparent) 0%, transparent 50%),
		radial-gradient(ellipse at 50% 57%, color-mix(in srgb, var(--blue-600) 15%, transparent) 0%, transparent 45%);
}

.green-bg-burst::before {
	background:
		radial-gradient(ellipse at 20% 45%, color-mix(in srgb, var(--green-600) 12%, transparent) 0%, transparent 55%),
		radial-gradient(ellipse at 65% 43%, color-mix(in srgb, var(--green-600) 10%, transparent) 0%, transparent 50%),
		radial-gradient(ellipse at 50% 57%, color-mix(in srgb, var(--green-600) 15%, transparent) 0%, transparent 45%);
}

.orange-bg-burst::before {
	background:
		radial-gradient(ellipse at 20% 45%, color-mix(in srgb, var(--orange-600) 12%, transparent) 0%, transparent 55%),
		radial-gradient(ellipse at 65% 43%, color-mix(in srgb, var(--orange-600) 10%, transparent) 0%, transparent 50%),
		radial-gradient(ellipse at 50% 57%, color-mix(in srgb, var(--orange-600) 15%, transparent) 0%, transparent 45%);
}

.red-bg-burst::before {
	background:
		radial-gradient(ellipse at 20% 45%, color-mix(in srgb, var(--red-600) 12%, transparent) 0%, transparent 55%),
		radial-gradient(ellipse at 65% 43%, color-mix(in srgb, var(--red-600) 10%, transparent) 0%, transparent 50%),
		radial-gradient(ellipse at 50% 57%, color-mix(in srgb, var(--red-600) 15%, transparent) 0%, transparent 45%);
}

.purple-bg-burst::before {
	background:
		radial-gradient(ellipse at 20% 45%, color-mix(in srgb, var(--purple-600) 12%, transparent) 0%, transparent 55%),
		radial-gradient(ellipse at 65% 43%, color-mix(in srgb, var(--purple-600) 10%, transparent) 0%, transparent 50%),
		radial-gradient(ellipse at 50% 57%, color-mix(in srgb, var(--purple-600) 15%, transparent) 0%, transparent 45%);
}

.legacy-purple-bg-burst::before {
	background:
		radial-gradient(ellipse at 20% 45%, color-mix(in srgb, var(--legacy-purple-600) 12%, transparent) 0%, transparent 55%),
		radial-gradient(ellipse at 65% 43%, color-mix(in srgb, var(--legacy-purple-600) 10%, transparent) 0%, transparent 50%),
		radial-gradient(ellipse at 50% 57%, color-mix(in srgb, var(--legacy-purple-600) 15%, transparent) 0%, transparent 45%);
}

.pink-bg-burst::before {
	background:
		radial-gradient(ellipse at 20% 45%, color-mix(in srgb, var(--pink-600) 12%, transparent) 0%, transparent 55%),
		radial-gradient(ellipse at 65% 43%, color-mix(in srgb, var(--pink-600) 10%, transparent) 0%, transparent 50%),
		radial-gradient(ellipse at 50% 57%, color-mix(in srgb, var(--pink-600) 15%, transparent) 0%, transparent 45%);
}

.gold-bg-burst::before {
	background:
		radial-gradient(ellipse at 20% 45%, color-mix(in srgb, var(--gold-600) 12%, transparent) 0%, transparent 55%),
		radial-gradient(ellipse at 65% 43%, color-mix(in srgb, var(--gold-600) 10%, transparent) 0%, transparent 50%),
		radial-gradient(ellipse at 50% 57%, color-mix(in srgb, var(--gold-600) 15%, transparent) 0%, transparent 45%);
}

.teal-bg-burst::before {
	background:
		radial-gradient(ellipse at 20% 45%, color-mix(in srgb, var(--teal-600) 12%, transparent) 0%, transparent 55%),
		radial-gradient(ellipse at 65% 43%, color-mix(in srgb, var(--teal-600) 10%, transparent) 0%, transparent 50%),
		radial-gradient(ellipse at 50% 57%, color-mix(in srgb, var(--teal-600) 15%, transparent) 0%, transparent 45%);
}

.magenta-bg-burst::before {
	background:
		radial-gradient(ellipse at 20% 45%, color-mix(in srgb, var(--magenta-600) 12%, transparent) 0%, transparent 55%),
		radial-gradient(ellipse at 65% 43%, color-mix(in srgb, var(--magenta-600) 10%, transparent) 0%, transparent 50%),
		radial-gradient(ellipse at 50% 57%, color-mix(in srgb, var(--magenta-600) 15%, transparent) 0%, transparent 45%);
}

.slate-bg-burst::before {
	background:
		radial-gradient(ellipse at 20% 45%, color-mix(in srgb, var(--slate-600) 12%, transparent) 0%, transparent 55%),
		radial-gradient(ellipse at 65% 43%, color-mix(in srgb, var(--slate-600) 10%, transparent) 0%, transparent 50%),
		radial-gradient(ellipse at 50% 57%, color-mix(in srgb, var(--slate-600) 15%, transparent) 0%, transparent 45%);
}

/* !- Body */
body {
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	background: var(--bg-900);
	color: var(--text-300);
	display: flex;
	flex-direction: column;
	font-family: var(--sans-serif);
	font-size: var(--text-base);
	font-weight: 400;
	line-height: 1.6;
	min-height: 100vh;
	min-height: 100svh;
}

/* !- Headings */
h1,
h2,
h3,
h4,
h5,
h6 {
	color: var(--text-50);
	font-weight: 700;
	line-height: 1.2;
	margin: 0 0 0.5em;
}

h1 {
	font-size: var(--text-5xl);
	font-weight: 900;
}

h2 {
	font-size: var(--text-3xl);
}

h3 {
	font-size: var(--text-2xl);
}

h4 {
	font-size: var(--text-xl);
}

h5 {
	font-size: var(--text-lg);
}

/* !- Paragraphs */
p {
	margin: 0 0 1.5rem;
}

p:last-child {
	margin-bottom: 0;
}

/* !- Inline text */
em,
i {
	font-style: italic;
}

strong,
b {
	color: var(--text-100);
	font-weight: 600;
}

small {
	font-size: var(--text-sm);
}

/* !- Links */
a {
	color: var(--link);
	font-weight: 500;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	transition: color 0.15s ease;
}

a:hover {
	color: var(--link-hover);
}

a:focus-visible {
	border-radius: 2px;
	outline: 2px solid var(--link);
	outline-offset: 2px;
}

/* !- Lists */
ul,
ol {
	margin: 0 0 1rem;
	padding-left: 1.5rem;
}

li {
	margin-bottom: 0.25rem;
}

li:last-child {
	margin-bottom: 0;
}

/* !- Nested lists */
ul ul,
ul ol,
ol ul,
ol ol {
	margin-bottom: 0;
	margin-top: 0.25rem;
}

/* !- Definition lists */
dl {
	margin: 0 0 1rem;
}

dt {
	font-weight: 600;
	margin-top: 0.5rem;
}

dd {
	color: var(--text-300);
	margin: 0 0 0.5rem;
}

/* !- Blockquotes */
blockquote {
	border-left: 3px solid var(--bg-600);
	color: var(--text-300);
	font-style: italic;
	margin: 0 0 1rem;
	padding: 0.5rem 0 0.5rem 1rem;
}

blockquote p:last-child {
	margin-bottom: 0;
}

blockquote cite {
	color: var(--text-500);
	display: block;
	font-size: var(--text-sm);
	font-style: normal;
	margin-top: 0.5rem;
}

/* !- Code */
code,
kbd,
samp {
	font-family: var(--monospace);
	font-size: var(--text-sm);
}

code {
	background: var(--bg-800);
	border-radius: var(--border-radius);
	color: var(--text-100);
	padding: 0.1em 0.3em;
}

pre {
	background: var(--bg-800);
	border-radius: var(--border-radius);
	font-size: var(--text-sm);
	line-height: 1.5;
	margin: 0 0 1rem;
	overflow-x: auto;
	padding: 1rem;
}

pre code {
	background: transparent;
	border-radius: 0;
	font-size: inherit;
	padding: 0;
}

kbd {
	background: var(--bg-700);
	border: 1px solid var(--bg-600);
	border-radius: var(--border-radius);
	font-size: var(--text-sm);
	padding: 0.1em 0.4em;
}

/* !- Horizontal rule */
hr {
	border: 0;
	border-top: 1px solid var(--bg-600);
	margin: 2rem 0;
}

/* !- Tables */
table {
	border-collapse: collapse;
	margin: 0 0 1rem;
	width: 100%;
}

th,
td {
	border-bottom: 1px solid var(--bg-600);
	padding: 0.5rem 0.75rem;
	text-align: left;
}

th {
	color: var(--text-100);
	font-weight: 600;
}

td {
	color: var(--text-300);
}

/* !- Figures */
figure {
	margin: 0 0 1rem;
}

figcaption {
	color: var(--text-300);
	font-size: var(--text-base);
	font-style: italic;
	margin-top: 0.625rem;
	text-align: center;
}

/* !- Images */
img {
	height: auto;
	max-width: 100%;
}

/* !- Site header */
#site-header {
	background: var(--black);
	border-bottom: 2px solid transparent;
	border-image: linear-gradient(to right, var(--black), var(--blue-500), var(--black));
	border-image-slice: 1;
	font-size: var(--text-sm);
	width: 100%;
}

#site-header .nav-item {
	margin-bottom: 0;
}

/* !- Navigation */
#site-navigation .nav-link {
	color: var(--text-50);
	font-weight: 500;
	padding-left: 1.25rem;
	padding-right: 1.25rem;
}

@media (max-width: 575.98px) {
	#site-navigation .nav-link {
		padding-left: 0;
		padding-right: 0;
	}

	#site-header.landing-header #site-navigation .view-cart {
		padding-right: 1rem;
	}
}

#site-navigation .nav-link:hover,
#site-navigation .dropdown-toggle.show,
#site-navigation .theme-toggle:hover {
	color: var(--link-hover);
}

#site-navigation .dropdown-toggle::after {
	border: none;
	content: '\f107';
	font: var(--fa-font-solid);
	font-size: var(--text-xs);
	margin-left: 0.25rem;
	margin-top: -0.125rem;
	vertical-align: middle;
}

#site-navigation .dropdown:hover .dropdown-menu-end,
#site-navigation .dropdown-menu-end[data-bs-popper] {
	left: auto;
	right: 0;
}

#site-navigation .dropdown-menu {
	background: var(--bg-800);
	border: 1px solid var(--bg-600);
	border-radius: var(--border-radius);
	box-shadow: 0 1.5rem 3.75rem rgba(0, 0, 0, 0.5), 0 0.25rem 1rem rgba(0, 0, 0, 0.3);
	color: var(--text-100);
	overflow: hidden;
	padding: 0.5rem 0;
}

#site-navigation .dropdown-menu li {
	margin-bottom: 0;
}

#site-navigation .dropdown-menu .dropdown-header {
	color: var(--text-500);
	font-size: var(--text-tiny);
	font-weight: 900;
	letter-spacing: 0.1em;
	margin-bottom: 0.5rem;
	padding-bottom: 0;
	padding-left: 1.125rem;
	text-transform: uppercase;
}

@media (max-width: 575.98px) {
	#site-navigation .dropdown-menu .dropdown-header {
		padding-left: 0.75rem;
	}
}

#site-navigation .dropdown-menu .dropdown-divider {
	background: var(--bg-700);
	border: 0;
	height: 1px;
	margin: 0.375rem 0;
	opacity: 1;
}

#site-navigation .dropdown-menu .dropdown-item {
	align-items: center;
	color: var(--text-300);
	display: flex;
	font-size: var(--text-sm);
	font-weight: 500;
	gap: 0.75rem;
	padding: 0.5625rem 1.125rem;
	transition: background 0.15s ease, color 0.15s ease;
}

@media (max-width: 575.98px) {
	#site-navigation .dropdown-menu .dropdown-item {
		padding: 0.375rem 0.75rem;
		white-space: normal;
	}
}

#site-navigation .dropdown-menu .dropdown-item:focus,
#site-navigation .dropdown-menu .dropdown-item:hover {
	background: var(--bg-700);
	color: var(--text-100);
}

#site-navigation .dropdown-menu .dropdown-item.has-tagline {
	align-items: flex-start;
}

#site-navigation .dropdown-menu .nav-ico {
	align-items: center;
	border-radius: var(--border-radius);
	display: flex;
	flex-shrink: 0;
	font-size: var(--text-xs);
	height: 1.875rem;
	justify-content: center;
	width: 1.875rem;
}

#site-navigation .dropdown-menu .icon-blue {
	background: color-mix(in srgb, var(--blue-500) 12%, transparent);
	color: var(--blue-500);
}

#site-navigation .dropdown-menu .icon-green {
	background: color-mix(in srgb, var(--green-500) 12%, transparent);
	color: var(--green-500);
}

#site-navigation .dropdown-menu .icon-gold {
	background: color-mix(in srgb, var(--gold) 12%, transparent);
	color: var(--gold);
}

#site-navigation .dropdown-menu .icon-purple {
	background: color-mix(in srgb, var(--purple) 12%, transparent);
	color: var(--purple);
}

#site-navigation .dropdown-menu .icon-neutral {
	background: color-mix(in srgb, var(--text-100) 8%, transparent);
	color: var(--text-300);
}

#site-navigation .dropdown-menu .nav-ico-img {
	flex-shrink: 0;
	height: 1.875rem;
	object-fit: contain;
	width: 1.875rem;
}

#site-navigation .dropdown-menu .nav-label {
	color: var(--text-50);
	flex: 1;
	font-weight: 500;
}

#site-navigation .dropdown-menu .nav-body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 0.375rem;
	min-width: 0;
}

#site-navigation .dropdown-menu .nav-tagline {
	color: var(--text-300);
	font-size: var(--text-xs);
	font-weight: 400;
	line-height: 1.35;
	white-space: normal;
}

#site-navigation .dropdown-menu .nav-arrow {
	color: var(--text-500);
	font-size: var(--text-xs);
	opacity: 0.5;
}

#site-navigation .dropdown-menu#products-dropdown {
	width: 100%;
}

@media (max-width: 1199.98px) {
	#site-navigation .dropdown-menu#products-dropdown {
		left: 0.75rem;
		right: 0.75rem;
		width: auto;
	}

	#site-navigation .dropdown-menu#products-dropdown .core-editing-software,
	#site-navigation .dropdown-menu#products-dropdown .ai-creative-tools,
	#site-navigation .dropdown-menu#products-dropdown .workflow-extensions {
		flex: 0 0 33.333333%;
		max-width: 33.333333%;
		width: 33.333333%;
	}
}

#site-navigation .dropdown-menu#products-dropdown .ai-creative-tools {
	border-left: 2px solid var(--bg-700);
	border-right: 2px solid var(--bg-700);
}

@media (max-width: 767.98px) {
	#site-navigation .dropdown-menu#products-dropdown .ai-creative-tools {
		border-left: none;
		border-right: none;
	}
}

@media (min-width: 1200px) {
	#site-navigation .dropdown-menu#products-dropdown {
		width: max-content;
	}

	#site-navigation .dropdown-menu#products-dropdown .core-editing-software {
		flex: 0 0 25rem;
		max-width: 25rem;
		width: 25rem;
	}

	#site-navigation .dropdown-menu#products-dropdown .ai-creative-tools {
		flex: 0 0 20rem;
		max-width: 20rem;
		width: 20rem;
	}

	#site-navigation .dropdown-menu#products-dropdown .workflow-extensions {
		flex: 0 0 18.75rem;
		max-width: 18.75rem;
		width: 18.75rem;
	}
}

#site-navigation .dropdown-menu#products-dropdown .core-editing-software .dropdown-item {
	padding-bottom: 0.75rem;
	padding-top: 0.75rem;
}

#site-navigation .dropdown-menu#products-dropdown .core-editing-software .compare-link {
	padding: 0 0 0.5rem 1.125rem;
}

@media (max-width: 575.98px) {
	#site-navigation .dropdown-menu#products-dropdown .core-editing-software .compare-link {
		padding: 0 0 0.5rem 3.375rem;
	}
}

#site-navigation .dropdown-menu#products-dropdown .core-editing-software .compare-link a {
	color: var(--link);
	text-decoration: none;
}

#site-navigation .dropdown-menu#products-dropdown .ai-creative-tools .dropdown-divider {
	margin: 0.75rem 0;
}

#site-navigation .dropdown-menu#products-dropdown .ai-creative-tools .included-note {
	color: var(--text-300);
	font-size: var(--text-xs);
	line-height: 1.4;
	padding: 0 1.125rem;
}

@media (max-width: 575.98px) {
	#site-navigation .dropdown-menu#products-dropdown .ai-creative-tools .included-note {
		padding: 0 0.75rem;
	}
}

#site-navigation .dropdown-menu#products-dropdown .ai-creative-tools .included-note strong {
	color: var(--text-100);
}

#site-navigation .dropdown-menu#learn-dropdown .col:first-child {
	border-right: 2px solid var(--bg-700);
}

#site-navigation #nav-cart .nav-link {
	top: 0.125rem;
}

#site-navigation #nav-cart .fa-shopping-cart {
	font-size: var(--text-base);
}

#site-navigation #nav-cart .badge {
	font-size: var(--text-tiny);
	position: absolute;
	right: 0.375rem;
	top: 0;
}

@media (max-width: 575.98px) {
	#site-navigation #nav-cart .badge {
		display: none;
	}
}

#site-navigation .dropdown-menu#user-dropdown-menu {
	border: 1px solid var(--bg-700);
	border-radius: var(--border-radius);
	overflow: hidden;
	padding: 0;
	width: 17.5rem;
}

#site-navigation #user-dropdown-menu .user-dropdown-header {
	align-items: center;
	background: var(--bg-700);
	border-bottom: 1px solid var(--bg-600);
	display: flex;
	gap: 0.875rem;
	padding: 1.25rem 1.25rem 1rem;
}

#site-navigation #user-dropdown-menu .user-dropdown-avatar {
	border: 2px solid color-mix(in srgb, var(--green-500) 40%, transparent);
	border-radius: 50%;
	flex-shrink: 0;
	height: 2.75rem;
	object-fit: cover;
	width: 2.75rem;
}

#site-navigation #user-dropdown-menu .user-dropdown-identity {
	min-width: 0;
}

#site-navigation #user-dropdown-menu .user-dropdown-name {
	color: var(--text-100);
	display: block;
	font-size: var(--text-sm);
	font-weight: 700;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

#site-navigation #user-dropdown-menu .user-dropdown-email {
	color: var(--text-500);
	display: block;
	font-family: var(--monospace);
	font-size: var(--text-mini);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

#site-navigation #user-dropdown-menu .user-dropdown-nav {
	padding: 0.5rem 0;
}

#site-navigation #user-dropdown-menu .user-dropdown-item {
	align-items: center;
	color: var(--text-300);
	display: flex;
	font-size: var(--text-sm);
	font-weight: 500;
	gap: 0.75rem;
	padding: 0.6875rem 1.125rem;
	text-decoration: none;
	transition: background 0.15s ease, color 0.15s ease;
}

#site-navigation #user-dropdown-menu .user-dropdown-item:hover,
#site-navigation #user-dropdown-menu .user-dropdown-item:focus-visible {
	background: var(--bg-700);
	color: var(--text-100);
}

#site-navigation #user-dropdown-menu .user-dropdown-item:focus-visible {
	outline: 2px solid var(--link);
	outline-offset: -2px;
}

#site-navigation #user-dropdown-menu .user-dropdown-icon {
	align-items: center;
	border-radius: var(--border-radius);
	display: flex;
	flex-shrink: 0;
	font-size: var(--text-xs);
	height: 1.875rem;
	justify-content: center;
	width: 1.875rem;
}

#site-navigation #user-dropdown-menu .user-dropdown-label {
	flex: 1;
}

#site-navigation #user-dropdown-menu .user-dropdown-arrow {
	color: var(--text-500);
	font-size: var(--text-xs);
	opacity: 0.5;
}

#site-navigation #user-dropdown-menu .user-dropdown-badge {
	background: var(--blue-500);
	border-radius: 20px;
	color: var(--white);
	font-size: var(--text-tiny);
	font-weight: 700;
	min-width: 1.25rem;
	padding: 0.125rem 0.4375rem;
	text-align: center;
}

#site-navigation #user-dropdown-menu .user-dropdown-divider {
	background: var(--bg-700);
	border: 0;
	height: 1px;
	margin: 0.25rem 0;
	opacity: 1;
}

#site-navigation #user-dropdown-menu .user-dropdown-footer {
	padding: 0.5rem 0.75rem 0.75rem;
}

#site-navigation #user-dropdown-menu .user-dropdown-signout {
	align-items: center;
	border-radius: var(--border-radius);
	color: var(--red-400);
	display: flex;
	font-size: var(--text-sm);
	font-weight: 500;
	gap: 0.625rem;
	padding: 0.625rem 0.5rem;
	text-decoration: none;
	transition: background 0.15s ease, color 0.15s ease;
	width: 100%;
}

#site-navigation #user-dropdown-menu .user-dropdown-signout:hover,
#site-navigation #user-dropdown-menu .user-dropdown-signout:focus-visible {
	background: color-mix(in srgb, var(--red-500) 10%, transparent);
	color: var(--red-300);
}

#site-navigation #nav-sign-in #user-dropdown {
	padding-bottom: 0.5rem;
	padding-top: 0.5rem;
}

#site-navigation #nav-sign-in:has(#user-dropdown-menu):hover::after {
	content: '';
	height: 1.25rem;
	position: absolute;
	right: 0;
	top: 100%;
	width: 17.5rem;
	z-index: 1;
}

#site-navigation .avatar {
	border-radius: 50rem;
	height: 1.875rem;
	margin-top: 1px;
	width: 1.875rem;
}

#site-navigation .avatar-48 {
	height: 3rem;
	width: 3rem;
}

#site-navigation #admin-link .nav-link {
	padding-left: 1.25rem;
}

#site-navigation #admin-link .fa-lock-keyhole {
	font-size: var(--text-base);
	position: relative;
	top: 0.125rem;
}

@media (max-width: 575.98px) {
	#site-navigation #admin-link .nav-link {
		padding-left: 0;
	}

	#site-navigation #admin-link .fa-lock-keyhole {
		top: 0;
	}
}

#site-navigation .offcanvas {
	background: var(--bg-900);
	width: 100%;
}

#site-navigation .offcanvas-header {
	padding-bottom: 1.5rem;
	padding-top: 1.5rem;
}

#site-navigation .offcanvas-header img {
	border: none;
	box-shadow: none;
}

#site-navigation .offcanvas-header .btn-close {
	--bs-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414'/%3e%3c/svg%3e");
	--bs-btn-close-color: var(--white);
	--bs-btn-close-hover-opacity: 1;
	--bs-btn-close-opacity: 1;
	color: var(--white);
}

[data-theme="light"] #site-navigation .dropdown-menu {
	box-shadow: 0 1.5rem 3.75rem rgba(0, 0, 0, 0.18), 0 0.25rem 1rem rgba(0, 0, 0, 0.1);
}

[data-theme="light"] #site-navigation .offcanvas-header .btn-close {
	filter: invert(1);
}

/* !- Theme toggle */
#site-navigation #theme-link .nav-link {
	padding-left: 0;
	padding-right: 0;
}

#site-navigation .theme-toggle-icon {
	position: relative;
	top: 0.075rem;
}

#site-navigation .theme-toggle {
	align-items: center;
	background: transparent;
	border: none;
	color: var(--text-100);
	cursor: pointer;
	display: inline-flex;
	font-size: var(--text-base);
	justify-content: center;
}

#site-navigation .theme-toggle-moon {
	display: none;
}

[data-theme="light"] #site-navigation .theme-toggle-sun {
	display: none;
}

[data-theme="light"] #site-navigation .theme-toggle-moon {
	display: inline;
}

/* !- Buttons */
.btn {
	font-weight: 600;
}

.btn-sm {
	font-size: var(--text-xs);
}

/* !- Eyebrow */
.eyebrow {
	color: var(--blue-500);
	font-size: var(--text-micro);
	font-weight: 700;
	letter-spacing: 0.16em;
	line-height: 1.5;
	margin-bottom: 1rem;
	text-transform: uppercase;
}

/* !- Section divider */
.section-divider {
	background: var(--bg-700);
	height: 1px;
}

/* !- Sections */
.section-intro {
	margin-bottom: 2.25rem;
}

/* !- Feature Bullets */
.feature-bullets {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	list-style: none;
	margin-bottom: 1.25rem;
	margin-top: 0;
	padding-left: 0.75rem;
}

.feature-bullets li {
	font-size: var(--text-sm);
	margin-bottom: 0;
	padding-left: 1rem;
	position: relative;
}

.feature-bullets li::before {
	background: var(--blue-500);
	border-radius: 50%;
	content: '';
	height: 0.375rem;
	left: 0;
	position: absolute;
	top: 0.5rem;
	width: 0.375rem;
}

.feature-bullets li strong {
	color: var(--text-100);
	font-weight: 600;
}

/* !- Site footer */
#site-footer {
	background: var(--black);
	border-image: linear-gradient(to right, var(--black), var(--blue-500), var(--black));
	border-image-slice: 1;
	border-top: 2px solid transparent;
	font-size: var(--text-sm);
	margin-top: auto;
	width: 100%;
}

#site-footer .footer-brand-row {
	border-bottom: 1px solid var(--bg-800);
	padding: 1.75rem 0;
}

#site-footer .footer-brand-inner {
	column-gap: 2rem;
	row-gap: 1.25rem;
}

#site-footer .brand-mark {
	align-items: center;
	column-gap: 1rem;
	display: flex;
	flex-wrap: wrap;
	margin-right: auto;
	row-gap: 0.5rem;
}

#site-footer .brand-mark a {
	line-height: 0;
}

#site-footer .brand-tagline {
	color: var(--text-50);
	font-size: var(--text-xl);
	font-weight: 900;
	margin: 0;
}

#site-footer .social-row {
	column-gap: 0.5rem;
	display: flex;
	flex: none;
}

#site-footer .social-btn {
	align-items: center;
	background: var(--bg-900);
	border: 1px solid var(--bg-700);
	border-radius: 50%;
	color: var(--text-300);
	display: flex;
	flex: none;
	height: 2rem;
	justify-content: center;
	text-decoration: none;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
	width: 2rem;
}

#site-footer .social-btn:hover {
	background: var(--blue-500);
	border-color: var(--blue-500);
	color: var(--white);
}

#site-footer .lang-field {
	align-items: center;
	column-gap: 0.75rem;
	display: flex;
	flex: none;
	margin-left: 1.5rem;
}

#site-footer .choose-language-title {
	color: var(--text-500);
	font-size: var(--text-tiny);
	font-weight: 900;
	letter-spacing: 0.1em;
	margin-bottom: 0;
	text-transform: uppercase;
	white-space: nowrap;
}

#site-footer .gt_selector {
	-moz-padding-start: calc(0.75rem - 3px);
	appearance: none;
	background-color: var(--bg-900);
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23bdbdc1' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
	background-position: right 0.75rem center;
	background-repeat: no-repeat;
	background-size: 1rem 0.75rem;
	border: 1px solid var(--bg-700);
	border-radius: var(--border-radius);
	box-shadow: none;
	color: var(--text-300);
	display: block;
	font-size: var(--text-sm);
	font-weight: 400;
	line-height: 1.5;
	padding: 0.375rem 2.25rem 0.375rem 0.75rem;
	transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
	width: auto;
}

#site-footer .gt_selector:focus {
	border-color: var(--bg-600);
	box-shadow: none;
	outline: none;
}

#site-footer .footer-links-section {
	padding: 2rem 0 2.25rem;
}

#site-footer .links-card {
	background: var(--bg-900);
	border-radius: var(--border-radius);
	padding: 1.75rem 1.875rem;
}

#site-footer .links-header-row {
	align-items: center;
	column-gap: 1rem;
	display: flex;
	justify-content: space-between;
	margin-bottom: 1.5rem;
}

#site-footer .links-title {
	color: var(--text-500);
	font-size: var(--text-tiny);
	font-weight: 900;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

#site-footer .footer-col h4 {
	align-items: center;
	color: var(--text-50);
	column-gap: 0.5rem;
	display: flex;
	font-size: var(--text-xs);
	font-weight: 800;
	letter-spacing: 0.08em;
	margin: 0;
	text-transform: uppercase;
}

#site-footer .footer-col h4 .dot {
	background: var(--accent, var(--blue-500));
	border-radius: 50%;
	flex: none;
	height: 0.4375rem;
	width: 0.4375rem;
}

#site-footer .footer-col .col-links {
	margin-bottom: 0;
	margin-top: 0.875rem;
	padding-left: 0;
}

#site-footer .footer-col .col-links li {
	margin-bottom: 0;
}

#site-footer .footer-col .col-links a {
	color: var(--text-400);
	display: block;
	font-size: var(--text-xs);
	padding: 0.3125rem 0;
	text-decoration: none;
	transition: color 0.12s ease, transform 0.12s ease;
}

#site-footer .footer-col .col-links a:hover {
	color: var(--accent, var(--blue-500));
	text-decoration: underline;
	transform: translateX(2px);
}

#site-footer .footer-bottom {
	border-top: 2px solid var(--bg-700);
	color: var(--text-300);
	font-size: var(--text-mini);
	padding: 0.75rem 0;
}

#site-footer .footer-bottom a {
	color: var(--text-400);
}

#site-footer .footer-bottom a:hover {
	color: var(--link-hover);
}

@media (max-width: 991.98px) {
	#site-footer .lang-field {
		margin-left: 0;
	}
}

@media (max-width: 575.98px) {
	#site-footer .brand-mark {
		margin-right: 0;
		width: 100%;
	}

	#site-footer .lang-field {
		width: 100%;
	}
}

/* !- Reviews */
#reviews {
	background: var(--bg-800);
	padding: 5rem 0;
}

#reviews h2 {
	margin-bottom: 0.75rem;
}

#reviews .sub-head {
	color: var(--text-500);
}

#reviews .review-card {
	background: var(--bg-900);
	border-radius: var(--border-radius);
	padding: 1.75rem 1.625rem;
}

#reviews .review-stars {
	display: flex;
	gap: 0.1875rem;
	margin-bottom: 0.875rem;
}

#reviews .star {
	background: var(--gold);
	clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
	display: block;
	height: 0.875rem;
	width: 0.875rem;
}

#reviews .review-text {
	border-left: 0;
	color: var(--text-300);
	font-size: var(--text-sm);
	font-style: normal;
	margin: 0 0 1.125rem;
	padding: 0;
}

#reviews .review-author {
	color: var(--text-600);
	font-size: var(--text-sm);
	font-style: normal;
	font-weight: 600;
}

/* !- FAQs */
#faqs {
	background: var(--bg-900);
	padding: 5rem 0;
}

#faqs h2 {
	margin-bottom: 1.75rem;
}

.faqs .faq-item {
	padding: 1.75rem 0;
}

.faqs .faq-item:first-of-type {
	border-top: 1px solid var(--bg-600);
}

.faqs .faq-q-wrap {
	margin: 0;
}

.faqs .faq-q {
	align-items: flex-start;
	background: none;
	border: 0;
	color: var(--text-50);
	cursor: pointer;
	display: flex;
	font-family: inherit;
	font-size: var(--text-lg);
	font-weight: 600;
	gap: 0.75rem;
	line-height: 1.4;
	margin: 0 0 0.75rem 0;
	padding: 0;
	text-align: left;
	width: 100%;
}

.faqs .faq-q-wrap .faq-q {
	margin-bottom: 0;
}

.faqs .faq-item.is-open>.faq-q-wrap>.faq-q {
	margin-bottom: 0.75rem;
}

#faqs .faq-q::before {
	background: var(--blue-transparent);
	border-radius: var(--border-radius);
	color: var(--blue-500);
	content: 'Q';
	flex-shrink: 0;
	font-size: var(--text-sm);
	font-weight: 700;
	margin-top: -0.063rem;
	padding: 0.25em 0.5em;
}

.faqs button.faq-q::after {
	background:
		linear-gradient(var(--text-50), var(--text-50)) center / 100% 2px no-repeat,
		linear-gradient(var(--text-50), var(--text-50)) center / 2px 100% no-repeat;
	content: '';
	flex-shrink: 0;
	height: 0.75rem;
	margin-left: auto;
	margin-top: 0.25rem;
	transition: transform 0.25s ease;
	width: 0.75rem;
}

.faqs .faq-item.is-open>.faq-q-wrap>.faq-q::after {
	transform: rotate(135deg);
}

.faqs .faq-a-wrap {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.3s ease;
}

.faqs .faq-item.is-open>.faq-a-wrap {
	grid-template-rows: 1fr;
}

.faqs .faq-a-inner {
	overflow: hidden;
}

#faqs .faq-a {
	color: var(--text-300);
	padding-left: 2.25rem;
}

.faqs .faq-a>* {
	margin-block: 0;
}

.faqs .faq-a>*+* {
	margin-top: 0.75rem;
}

.faqs .faq-a ul,
.faqs .faq-a ol {
	padding-left: 1.25rem;
}

.faqs .faq-a li+li {
	margin-top: 0.375rem;
}

.faqs .faq-a table {
	border-collapse: collapse;
	width: 100%;
}

.faqs .faq-a th,
.faqs .faq-a td {
	border-bottom: 1px solid var(--bg-600);
	padding: 0.5rem 0.75rem;
	text-align: left;
}

.faqs .faq-a th {
	color: var(--text-100);
	font-weight: 600;
}

.faqs .faq-sub {
	margin-top: 1.25rem;
	padding-left: 2.25rem;
}

.faqs .faq-sub .faq-q::before {
	content: none;
}

.faqs .faq-sub .faq-a {
	padding-left: 0;
}

.faqs .faq-subitem {
	padding: 1.25rem 0;
}

.faqs .faq-subitem:first-child {
	padding-top: 0;
}

#faqs #faq-specs {
	border-collapse: separate;
	border-spacing: 0.5rem 0.75rem;
	width: 100%;
}

#faqs #faq-specs th,
#faqs #faq-specs td {
	border: 0;
	padding: 0;
	text-align: left;
	vertical-align: top;
}

#faqs #faq-specs thead th {
	color: var(--text-500);
	font-size: var(--text-xs);
	font-weight: 700;
	letter-spacing: 0.06em;
	padding: 0 1.25rem 0.25rem;
	text-transform: uppercase;
}

#faqs #faq-specs tbody td:first-child {
	font-weight: 600;
	padding: 1rem 0.75rem 0 0;
	white-space: nowrap;
}

#faqs #faq-specs tbody td+td {
	background: var(--bg-800);
	border: 1px solid var(--bg-600);
	border-radius: var(--border-radius);
	color: var(--text-100);
	padding: 1rem 1.25rem;
}

#faqs #faq-specs td {
	font-size: var(--text-sm);
}

#faqs #faq-specs td>* {
	margin: 0;
}

#faqs #faq-specs td>*+* {
	margin-top: 0.875rem;
}

#faqs #faq-specs td p.specs-eyebrow {
	color: var(--green-500);
	font-size: var(--text-xs);
	font-weight: 700;
	letter-spacing: 0.05em;
	margin-bottom: 0.5rem;
}

#faqs #faq-specs td ul {
	list-style: none;
	margin-top: 0.25rem;
	padding-left: 0;
}

#faqs #faq-specs td li {
	line-height: 1.5;
}

#faqs #faq-specs td li+li {
	margin-top: 0.75rem;
}

#faqs #faq-specs .specs-note {
	color: var(--text-400);
	font-size: var(--text-xs);
	font-style: italic;
	line-height: 1.55;
}

@media (max-width: 767px) {
	#faqs #faq-specs {
		border-spacing: 0;
	}

	#faqs #faq-specs thead {
		display: none;
	}

	#faqs #faq-specs tbody,
	#faqs #faq-specs tr,
	#faqs #faq-specs td {
		display: block;
		width: auto;
	}

	#faqs #faq-specs tbody tr {
		margin-bottom: 1.75rem;
	}

	#faqs #faq-specs tbody td:first-child {
		padding: 0 0 0.5rem;
		white-space: normal;
	}

	#faqs #faq-specs tbody td:nth-child(3) {
		display: none;
	}
}

/* !- Guarantee */
#on1-guarantee {
	background: var(--bg-800);
	padding: 5rem 0;
}

#on1-guarantee .guarantee-intro {
	color: var(--text-300);
	margin-bottom: 2.25rem;
}

.guarantee-boxes .guarantee-box {
	background: var(--bg-900);
	border-radius: var(--border-radius);
	padding: 1.5rem;
}

.guarantee-boxes .guarantee-icon {
	align-items: center;
	background: var(--blue-transparent);
	border-radius: var(--border-radius);
	display: flex;
	height: 2.5em;
	justify-content: center;
	margin: 0 auto 0.75rem;
	width: 2.5em;
}

.guarantee-boxes .guarantee-icon i.fa-solid {
	color: var(--blue-500);
	font-size: var(--text-xl);
}

.guarantee-boxes .guarantee-title {
	color: var(--text-50);
	font-size: var(--text-xs);
	font-weight: 700;
	margin-bottom: 0.25rem;
}

.guarantee-boxes .guarantee-copy {
	color: var(--text-400);
	font-size: var(--text-mini);
	line-height: 1.5;
}

.guarantee-boxes a {
	text-decoration: none;
}

/* !- Resources */
#resources {
	padding: 5rem 0;
}

#resources .eyebrow {
	color: var(--blue-500);
	margin-bottom: 0.5rem;
}

#resources h2 {
	font-size: var(--text-xl);
	margin-bottom: 1.75rem;
}

#resources .resource-card {
	background: var(--bg-800);
	border-radius: var(--border-radius);
	display: block;
	overflow: hidden;
	text-decoration: none;
}

#resources .resource-body {
	padding: 1.375rem;
}

#resources .resource-title {
	color: var(--text-100);
	font-size: var(--text-sm);
	font-weight: 600;
	line-height: 1.5;
	margin-bottom: 0;
}

#resources .resources-section .eyebrow {
	color: var(--blue-500);
}

/* !- FastSpring spinner */
#fastspring_spinner {
	background: rgba(0, 0, 0, 0.4);
	display: none;
	height: 100%;
	left: 0;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 99999998;
}

#fastspring_spinner img {
	animation-delay: 0.4s;
	animation-duration: 0.4s;
	animation-name: fsb-fadeIn;
	left: 50%;
	margin-left: -50px;
	margin-top: -50px;
	position: fixed;
	top: 50%;
	z-index: 99999999;
}

/* !- Sticky divs */
.sticky.is-sticky:not([data-on1-sticky-below]) {
	left: 0;
	position: fixed;
	right: 0;
	top: 0;
	width: 100%;
	z-index: 1000;
}

.sticky.is-sticky[data-on1-sticky-below] {
	border-image: linear-gradient(to right, var(--bg-900), var(--blue-500), var(--bg-900));
	border-image-slice: 1;
	border-top: 2px solid transparent;
	position: static;
	width: auto;
}

#site-header:has([data-on1-sticky-below].is-sticky) {
	border-bottom-width: 0;
}

/* !- Scroll to top */
.scroll-top {
	border: none;
	bottom: 2.5rem;
	color: var(--text-500);
	font-size: 2.25rem;
	font-weight: 300;
	opacity: 0;
	position: fixed;
	right: 1.25rem;
	text-decoration: none;
	transition: opacity 0.4s;
	visibility: hidden;
	z-index: 3;
}

.scroll-top.visible {
	opacity: 1;
	visibility: visible;
}

.scroll-top:hover {
	color: var(--blue-500);
}

/* !- Cookie notice */
#on1-cookie-notice {
	bottom: 1.5rem;
	box-shadow: 0 16px 40px -8px rgba(0, 0, 0, 0.6);
	left: 1.5rem;
	margin: 0;
	max-width: 400px;
	position: fixed;
	visibility: hidden;
	z-index: 1050;
}

@media (max-width: 575.98px) {
	#on1-cookie-notice {
		left: 1rem;
		max-width: none;
		right: 1rem;
	}
}

[data-theme="light"] #on1-cookie-notice {
	box-shadow: 0 16px 40px -8px rgba(0, 0, 0, 0.22);
}

#on1-cookie-notice .cookie-notice-inner {
	background: var(--bg-700);
	border: 1px solid var(--bg-600);
	border-radius: var(--border-radius);
	color: var(--text-100);
	font-size: var(--text-sm);
	padding: 1.25rem;
}

[data-theme="light"] #on1-cookie-notice .cookie-notice-inner {
	background: var(--bg-800);
}

#on1-cookie-notice .cn-title {
	color: var(--text-50);
	font-size: var(--text-xl);
	font-weight: 700;
	margin-bottom: 1rem;
}

#on1-cookie-notice.show {
	visibility: visible;
}

#on1-cookie-notice .cn-decline {
	color: var(--text-300);
	font-size: var(--text-xs);
	margin-left: 1rem;
}

#on1-cookie-notice .cn-decline:hover {
	color: var(--link-hover);
}

#on1-cookie-notice .btn-close {
	background: none;
	background-color: rgba(0, 0, 0, 0.375);
	border-radius: 50%;
	color: var(--white);
	cursor: pointer;
	font-size: var(--text-micro);
	height: 1rem;
	opacity: 1;
	position: absolute;
	right: 0.375rem;
	top: 0.375rem;
	width: 1rem;
}

[data-theme="dark"] #on1-cookie-notice .btn-close {
	background-color: rgba(255, 255, 255, 0.5);
	color: var(--black);
}

/* !- Gtranslate */
div.skiptranslate,
#google_translate_element2,
#goog-gt-tt,
.VIpgJd-ZVi9od-aZ2wEe-wOHMyf {
	display: none !important;
}

.goog-te-menu-value:hover {
	text-decoration: none !important;
}

.goog-text-highlight {
	background-color: transparent !important;
	box-shadow: none !important;
}

/* !- Utilities */
.p-5rem {
	padding: 5rem;
}

.pb-5rem {
	padding-bottom: 5rem;
}

.pt-5rem {
	padding-top: 5rem;
}

.px-5rem {
	padding-left: 5rem;
	padding-right: 5rem;
}

.py-5rem {
	padding-bottom: 5rem;
	padding-top: 5rem;
}

.p-2_5rem {
	padding: 2.5rem;
}

.pb-2_5rem {
	padding-bottom: 2.5rem;
}

.pt-2_5rem {
	padding-top: 2.5rem;
}

.px-2_5rem {
	padding-left: 2.5rem;
	padding-right: 2.5rem;
}

.py-2_5rem {
	padding-bottom: 2.5rem;
	padding-top: 2.5rem;
}

/* Modal windows */
.modal-open,
.fsb-modalOpen {
	overflow: auto !important;
	padding-right: 0 !important;
}

.modal .btn-close {
	background: none;
	border-radius: 0;
	box-sizing: initial;
	color: var(--white);
	font-size: var(--text-xl);
	height: auto;
	opacity: 1;
	outline: none;
	padding: 0;
	position: absolute;
	right: 0;
	text-shadow: none;
	top: -2rem;
	width: auto;
}

.modal-content {
	background: var(--bg-900);
	border-radius: var(--border-radius);
}

.modal-dialog .required-field,
.modal-dialog .invalid-feedback {
	color: var(--red-500);
	font-size: var(--text-mini);
	font-weight: 700;
}

.modal-backdrop.show {
	opacity: 0.85;
}

.no-disp-field {
	left: -9999px;
	position: absolute;
}

#image-modal .modal-content,
#video-modal .modal-content,
.preview-modal .modal-content {
	border-radius: var(--border-radius);
}

#image-modal .modal-body,
#video-modal .modal-body,
.preview-modal .modal-body {
	padding: 0.125rem;
}

#download-modal .download-modal-icon {
	object-fit: cover;
}

#download-modal .required-field {
	color: var(--red-500);
	font-weight: 700;
}

#download-modal .form-group {
	margin-bottom: 1rem;
}

#download-modal .user-usage {
	margin-bottom: 0.5rem;
}

#download-modal .user-terms {
	margin-bottom: 1.25rem;
}

#download-modal input,
#download-modal select {
	font-size: var(--text-sm);
}

#download-modal label {
	color: var(--text-400);
	font-size: var(--text-mini);
	font-weight: 700;
	margin-bottom: 0.25rem;
}

#download-modal .user-terms label {
	font-weight: 500;
	text-transform: none;
}

#download-modal .recaptcha-wrapper {
	margin-bottom: 0.5rem;
}

#download-modal .g-recaptcha {
	display: inline-block;
	margin: 0 auto;
}

#download-modal .btn {
	margin-bottom: 0.25rem;
	margin-top: 0.25rem;
	padding: 0.9375rem 1.875rem;
}

#download-modal .download-modal-note {
	font-size: var(--text-mini);
	font-style: italic;
	text-align: center;
}

#download-modal #download-submit {
	--bs-btn-disabled-bg: var(--blue-500);
	--bs-btn-disabled-border-color: var(--blue-500);
	--bs-btn-disabled-opacity: 1;
}

#abcart-email-modal .btn-close {
	background: none;
	background-color: rgba(0, 0, 0, 0.375);
	border-radius: 50%;
	color: var(--white);
	cursor: pointer;
	font-size: var(--text-mini);
	height: 1.375rem;
	opacity: 1;
	position: absolute;
	right: 0.375rem;
	top: 0.375rem;
	width: 1.375rem;
	z-index: 99;
}

[data-theme="dark"] #abcart-email-modal .btn-close {
	background-color: rgba(255, 255, 255, 0.5);
	color: var(--black);
}

#abcart-email-modal .modal-body {
	color: var(--text-300);
	padding: 1.75rem;
}

#abcart-email-modal .modal-body h3 {
	color: var(--text-50);
	font-size: var(--text-3xl);
	font-weight: 700;
}

#abcart-email-modal .modal-body p {
	margin-bottom: 1rem;
}

#abcart-email-modal .modal-body label {
	color: var(--text-500);
	font-size: var(--text-xs);
	font-weight: bold;
}

#abcart-email-modal .modal-body .form-control {
	background: var(--bg-800);
	border: 1px solid var(--bg-600);
	margin-bottom: 0.75rem;
}

#abcart-email-modal .modal-body .btn {
	font-size: var(--text-sm);
	font-weight: 600;
	padding: 0.75rem 1.25rem;
}

#abcart-email-modal .modal-body .opt-in-note {
	color: var(--text-500);
	font-size: var(--text-xs);
	line-height: 1.5;
	margin-bottom: 0;
}

/* !- Site ribbon */
#on1-site-ribbon {
	padding-bottom: 0.75rem;
	padding-top: 0.75rem;
	position: relative;
	width: 100%;
}

@media (max-width: 575.98px) {
	#on1-site-ribbon.site-ribbon-icon {
		height: 48px;
		width: 48px;
	}
}

#on1-site-ribbon .site-ribbon-headline {
	font-weight: 700;
}

#on1-site-ribbon .site-ribbon-subline {
	color: #bdbdc1;
	font-size: 0.875rem;
}

@media (max-width: 575.98px) {
	#on1-site-ribbon .site-ribbon-subline {
		display: block;
	}
}

#on1-site-ribbon .site-ribbon-tag {
	border-radius: var(--border-radius);
	font-size: var(--text-tiny);
	font-weight: 700;
	letter-spacing: 0.1em;
	padding: 0.25rem 0.5rem;
	text-transform: uppercase;
	white-space: nowrap;
}

#on1-site-ribbon .btn-sm {
	font-size: 0.75rem;
	font-weight: 700;
}

#on1-site-ribbon.mastery-bundle-site-ribbon,
#on1-site-ribbon.r27-ribbon {
	background: radial-gradient(ellipse at 15% 50%, var(--blue-transparent) 0%, transparent 90%), radial-gradient(ellipse at 85% 50%, var(--blue-transparent) 0%, transparent 60%), #232323;
	border-bottom: 1px solid rgba(10, 126, 250, 0.4);
	border-top: 1px solid rgba(10, 126, 250, 0.4);
	color: #eaeaec;
}

#on1-site-ribbon.mastery-bundle-site-ribbon .site-ribbon-tag,
#on1-site-ribbon.r27-ribbon .site-ribbon-tag {
	background: var(--blue-transparent);
	border: 1px solid rgba(10, 126, 250, 0.4);
	border-radius: var(--border-radius);
	color: var(--blue-300);
}


#on1-site-ribbon.nn27-ribbon {
	background: radial-gradient(ellipse at 15% 50%, var(--green-transparent) 0%, transparent 60%), radial-gradient(ellipse at 85% 50%, var(--green-transparent) 0%, transparent 60%), #232323;
	border-bottom: 1px solid rgba(33, 206, 110, 0.4);
	border-top: 1px solid rgba(33, 206, 110, 0.4);
	color: #eaeaec;
}

#on1-site-ribbon.nn27-ribbon .site-ribbon-tag {
	background: var(--green-transparent);
	border: 1px solid rgba(33, 206, 110, 0.4);
	border-radius: var(--border-radius);
	color: var(--green-300);
}

/* !- Discount drawers */
.discount-drawer {
	bottom: 0.75rem;
	margin: 0;
	max-width: 700px;
	opacity: 0;
	position: fixed;
	right: 0.75rem;
	transform: translateY(100%);
	transition: all 500ms ease-in-out;
	visibility: hidden;
	z-index: 10;
}

@media (max-width: 575.98px) {
	.discount-drawer {
		display: none;
	}
}

.discount-drawer.show {
	opacity: 1;
	transform: translateY(0%);
	transition-delay: 500ms;
	visibility: visible;
}

.discount-drawer.hide-drawer {
	display: none;
}

.discount-drawer .drawer {
	float: right;
	width: auto;
}

.discount-drawer .btn-close {
	background: none;
	background-color: rgba(0, 0, 0, 0.5);
	border-radius: 50%;
	color: var(--white);
	cursor: pointer;
	font-size: var(--text-tiny);
	height: 1.25rem;
	opacity: 1;
	position: absolute;
	right: 0.375rem;
	top: 0.375rem;
	width: 1.25rem;
	z-index: 99;
}

.discount-drawer h4 {
	font-size: var(--text-2xl);
	font-weight: 700;
	margin-bottom: 1rem;
}

.discount-drawer .btn {
	font-size: var(--text-xs);
	padding: 0.625rem 1.25rem;
}

.discount-drawer.mastery-bundle-drawer .drawer {
	background: url(https://ononesoft.cachefly.net/images/drawers/20260213-presidents-day-drawer-bg@2x.jpg) center center no-repeat;
	background-size: cover;
	padding: 1.5rem;
	width: 700px;
}

.discount-drawer.mastery-bundle-drawer h4 {
	color: var(--white);
}

.discount-drawer.nn27-drawer .drawer {
	background-color: #1e1e1e;
	background-image: linear-gradient(rgba(10, 16, 13, 0.55), rgba(10, 16, 13, 0.55)), url(https://ononesoft.cachefly.net/images/drawers/20260815-NN-2027-drawer-bg@2x.jpg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	padding: 1.5rem;
	width: 700px;
}

.discount-drawer.nn27-drawer .eyebrow {
	color: var(--green-300);
	font-size: var(--text-micro);
	font-weight: 700;
	margin-bottom: 0.125rem;
}

.discount-drawer.nn27-drawer h4 {
	color: var(--white);
	font-size: var(--text-2xl);
	font-weight: 800;
	margin-bottom: 0.125rem;
}

.discount-drawer.nn27-drawer .drawer-copy {
	color: #eaeaec;
	font-size: var(--text-xs);
	margin-bottom: 0.75rem;
}

.discount-drawer.nn27-drawer .deal-expires {
	color: var(--gold-500);
	font-weight: 700;
}

.discount-drawer.raw26-drawer .drawer {
	background: url(https://ononesoft.cachefly.net/images/drawers/20260720-summer-special-bg@2x.jpg) center center no-repeat;
	background-size: cover;
	padding: 1.5rem;
	width: 700px;
}

.discount-drawer.raw26-drawer .eyebrow {
	font-size: var(--text-micro);
	font-weight: 700;
	line-height: 1.5;
	margin-bottom: 0.5rem;
	text-transform: uppercase;
}

.discount-drawer.raw26-drawer .eyebrow span {
	background: rgba(0, 0, 0, 0.5);
	border-radius: var(--border-radius);
	color: var(--gold-500);
	padding: 0.25rem 0.625rem;
}

.discount-drawer.raw26-drawer h4 {
	color: var(--white);
	font-size: 1.375rem;
	font-weight: 800;
	margin-bottom: 0.5rem;
}

.discount-drawer.raw26-drawer .input-group {
	margin-bottom: 0.375rem;
}

.discount-drawer.raw26-drawer .form-control {
	background: var(--white);
	border: 1px solid #cfcfcf;
	color: #161618;
	font-size: var(--text-xs);
	padding: 0.625rem;
}

.discount-drawer.raw26-drawer .invalid-feedback span {
	background: rgba(0, 0, 0, 0.75);
	border-radius: var(--border-radius);
	color: var(--red-500);
	font-size: var(--text-micro);
	font-weight: 700;
	padding: 0.25rem 0.625rem;
	text-transform: uppercase;
}

/* Carousels */
.carousel-control-next,
.carousel-control-prev {
	width: 5%;
}

.carousel-indicators [data-bs-target] {
	background-color: transparent;
	border: 2px solid var(--text-300);
	border-radius: 100%;
	height: 0.5rem;
	margin-left: 0.375rem;
	margin-right: 0.375rem;
	width: 0.5rem;
}

.carousel-indicators .active {
	background-color: var(--text-50);
	border: 2px solid var(--text-50);
	opacity: 1;
}

.carousel-control-next,
.carousel-control-prev {
	opacity: 1 !important;
}

.preview-modal .carousel-control-prev {
	margin-left: -3.75rem;
}

.preview-modal .carousel-control-next {
	margin-right: -3.75rem;
}

@media (max-width: 991.98px) {
	.preview-modal .carousel-control-prev {
		margin-left: -2.5rem;
	}

	.preview-modal .carousel-control-next {
		margin-right: -2.5rem;
	}
}

@media (max-width: 575.98px) {
	.preview-modal .carousel-control-prev {
		margin-left: 0.25rem;
	}

	.preview-modal .carousel-control-next {
		margin-right: 0.25rem;
	}
}

/* !- Form inputs */
.form-control {
	background: var(--bg-900);
	border: 1px solid var(--bg-600);
	border-radius: var(--border-radius);
	box-shadow: none;
	color: var(--text-50);
	transition: none;
}

/*
 * .form-select had no resting style at all - only the :focus rule below, which
 * already pairs it with .form-control, so the two were plainly meant to match.
 * Without this every select on the site sits blinding white in dark mode.
 *
 * background-color rather than the background shorthand, because Bootstrap
 * paints the chevron with background-image and the shorthand would wipe it. The
 * chevron itself is a data URI with a baked-in colour, so it can't read a
 * token - hence the per-theme override underneath.
 */
.form-select {
	--bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23bdbdc1' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
	background-color: var(--bg-900);
	border: 1px solid var(--bg-600);
	border-radius: var(--border-radius);
	box-shadow: none;
	color: var(--text-50);
	transition: none;
}

[data-theme="light"] .form-select {
	--bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%235e5e64' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

.form-control:focus,
.form-select:focus {
	background: var(--bg-900);
	border: 1px solid var(--bg-600);
	border-radius: var(--border-radius);
	color: var(--text-50);
}

.form-check-input:checked {
	background-color: var(--blue-500);
	border-color: var(--blue-500);
}

.form-check-input.is-valid,
.was-validated .form-check-input:valid {
	border-color: var(--green-500);
}

.form-check-input.is-invalid,
.was-validated .form-check-input:invalid {
	border-color: var(--red-500);
}

.form-check-input.is-valid:checked,
.was-validated .form-check-input:valid:checked {
	background-color: var(--green-500);
}

.form-check-input.is-invalid:checked,
.was-validated .form-check-input:invalid:checked {
	background-color: var(--red-500);
}

.form-control::-moz-placeholder {
	color: var(--text-400);
	opacity: 1;
}

.form-control::placeholder {
	color: var(--text-400);
	opacity: 1;
}

.form-control.is-valid,
.was-validated .form-control:valid {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%2321ce6e' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
	border-color: var(--green-500);
}

.form-control.is-invalid,
.was-validated .form-control:invalid {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23ff3d57'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23ff3d57' stroke='none'/%3e%3c/svg%3e");
	border-color: var(--red-500);
}