/* iStudiez Pro website: one stylesheet for every page, light and dark */

:root {
	--bg: #ffffff;
	--bg-soft: #f4f7fc;
	--card: #ffffff;
	--text: #10131a;
	--text-soft: #535b6b;
	--line: #e3e8f1;
	--accent: #209dde;
	--accent-strong: #1580bd;
	--accent-soft: #e6f4fc;
	--shadow: 0 1px 2px rgba(16, 19, 26, 0.06), 0 8px 24px rgba(16, 19, 26, 0.08);
	--radius: 18px;
	--radius-visual: 42px; /* the tour's cards (screenshots and drawn panels): concentric with the screenshots' own rows, which are about 27px round with 14-16px of card padding around them */
	--max: 1080px;
	color-scheme: light;
}

@media (prefers-color-scheme: dark) {
	:root {
		--bg: #0c0f15;
		--bg-soft: #131823;
		--card: #171d29;
		--text: #eef1f7;
		--text-soft: #a3acbd;
		--line: #262e3d;
		--accent: #5cb8ee;
		--accent-strong: #8fd0f5;
		--accent-soft: #12293a;
		--shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.35);
		color-scheme: dark;
	}
}

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

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font: 17px/1.55 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
}

img {
	max-width: 100%;
	height: auto;
}

a {
	color: var(--accent);
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

h1,
h2,
h3 {
	line-height: 1.15;
	letter-spacing: -0.02em;
	margin: 0 0 0.5em;
}

h1 {
	font-size: clamp(2.2rem, 6vw, 3.6rem);
}

h2 {
	font-size: clamp(1.6rem, 4vw, 2.3rem);
}

h3 {
	font-size: 1.15rem;
	letter-spacing: -0.01em;
}

p {
	margin: 0 0 1em;
}

.wrap {
	max-width: var(--max);
	margin: 0 auto;
	padding: 0 20px;
}

.skip {
	position: absolute;
	left: -999px;
}

.skip:focus {
	left: 16px;
	top: 16px;
	z-index: 10;
	background: var(--card);
	padding: 8px 12px;
	border-radius: 8px;
}

/* Header */

.site-header {
	position: relative; /* scrolls away with the page */
	z-index: 5;
	background: color-mix(in srgb, var(--bg) 82%, transparent);
	-webkit-backdrop-filter: saturate(180%) blur(16px);
	backdrop-filter: saturate(180%) blur(16px);
	border-bottom: 1px solid var(--line);
}

.site-header .wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	height: 60px;
}

.brand {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--text);
	font-weight: 650;
	font-size: 1.05rem;
}

.brand:hover {
	text-decoration: none;
}

/* the wordmark (assets/logo.svg, from the old site) is painted with the text colour, so it follows light and dark */
.brand .logo {
	display: block;
	width: 119px;
	height: 18px;
	background: currentColor;
	-webkit-mask: url(logo.svg) center / contain no-repeat;
	mask: url(logo.svg) center / contain no-repeat;
}

.nav {
	display: flex;
	gap: 22px;
	font-size: 0.95rem;
}

.nav a {
	color: var(--text-soft);
}

.nav a:hover,
.nav a[aria-current="page"] {
	color: var(--text);
	text-decoration: none;
}

/* Buttons */

.button {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 13px 22px;
	border-radius: 999px;
	font-weight: 600;
	font-size: 1rem;
	background: #ffffff;
	color: #1d1d1f;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
	transition: transform 0.15s ease;
}

.button:hover {
	text-decoration: none;
	transform: translateY(-1px);
}

.button svg {
	width: 20px;
	height: 20px;
}

/* the App Store badge (assets/appstore-badge.svg, from the old site) */
.appstore {
	display: inline-flex;
	border-radius: 11px;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
	transition: transform 0.15s ease;
}

.appstore:hover {
	text-decoration: none;
	transform: translateY(-1px);
}

.appstore img {
	display: block;
	height: 54px;
	width: auto;
}

.button.secondary {
	background: transparent;
	color: #ffffff;
	box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.7);
}

.button.solid {
	background: var(--accent);
	color: #ffffff;
}

/* Hero: a wallpaper behind (parallax), the headline, and the devices overlapping the next section */

.parallax {
	position: relative;
	isolation: isolate;
	color: #ffffff;
}

/* the clip keeps the moving background inside the section, while the section's content may overflow it (the hero's devices) */
.parallax-clip {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
}

.parallax-bg {
	position: absolute;
	inset: -20% 0;
	background-size: cover;
	background-position: center;
	will-change: transform;
}

.parallax-clip::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(40, 20, 24, 0.30), rgba(40, 20, 24, 0.06) 60%, rgba(40, 20, 24, 0.10));
}

.band .parallax-clip::after {
	background: rgba(40, 22, 18, 0.38);
}

/* soft-focus wallpaper; the layer extends past the clip sideways so the blur never fades at the edges */
.hero .parallax-bg,
#sync .parallax-bg {
	inset: -20% -96px;
	background-position: center 25%;
	filter: blur(20px);
}

/* the Mojave dunes (from the old Mac page) are bright and warm: darken the top so the white headline reads, and keep the foreground natural */
.hero .parallax-clip::after {
	background: linear-gradient(180deg, rgba(24, 30, 44, 0.16), rgba(24, 30, 44, 0.03) 55%, rgba(24, 30, 44, 0));
}

/* the hero's aurora: slate greys, lighter and darker, as big soft blobs on a mid grey, drifting slowly (no image, no blur filter: the gradients are already soft) */
.hero .parallax-bg.aurora,
#sync .parallax-bg.aurora {
	inset: -10% 0;
	filter: none;
	background: linear-gradient(180deg, #858d9e, #939cab);
}

.aurora i {
	position: absolute;
	left: var(--x);
	top: var(--y);
	width: 78%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(closest-side, var(--c), transparent);
	opacity: 0.6;
	will-change: transform;
	animation: aurora-drift var(--t) ease-in-out infinite alternate;
}

@keyframes aurora-drift {
	to {
		transform: translate(var(--dx), var(--dy)) scale(1.28);
	}
}

/* in dark mode the greys are darker: the base and each blob (its --c is set inline) mixed with black */
@media (prefers-color-scheme: dark) {
	.hero .parallax-bg.aurora,
	#sync .parallax-bg.aurora {
		background: linear-gradient(180deg, #3a404c, #444b59);
	}

	.aurora i {
		background: radial-gradient(closest-side, color-mix(in srgb, var(--c) 52%, #000), transparent);
	}
}

/* a little film grain over it, so the gradients don't band (plain opacity: a blend mode here would repaint the whole hero on every frame) */
.aurora::after {
	content: "";
	position: absolute;
	inset: 0;
	opacity: 0.07;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* the aurora stops drifting once the hero has scrolled out of view (site.js adds .paused) */
.hero.paused .aurora i {
	animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
	.aurora i {
		animation: none;
	}
}

#sync .parallax-clip::after {
	background: rgba(24, 30, 44, 0.2);
}

/* the Cloud Sync band's greys sit still (only the hero's drift) */
#sync .aurora i {
	animation: none;
}

.hero {
	display: flow-root;
	overflow: clip; /* the devices fly out past the window's sides; the content that slides down is cut at the hero's bottom edge, under the next section's sheet */
	text-align: center;
	padding: 92px 0 340px;
}

/* the headline and the devices scroll slower than the page (site.js sets their translate), so the next section slides over them */
.hero > .wrap,
.hero > .hero-devices {
	will-change: translate;
}

.hero .eyebrow {
	display: inline-flex;
	align-items: center;
	gap: clamp(10px, 2.4vw, 18px);
	color: #fff;
	margin-bottom: 18px;
}

/* the logo with the year under it, between two laurels, like the App of the Day badge */
.hero .since {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 7px;
}

.hero .since .logo {
	display: block;
	width: clamp(150px, 26vw, 214px);
	aspect-ratio: 158 / 23;
	background: currentColor;
	-webkit-mask: url(logo.svg) center / contain no-repeat;
	mask: url(logo.svg) center / contain no-repeat;
}

.hero .since-text {
	font-size: clamp(0.85rem, 1.8vw, 1.05rem);
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	padding-left: 0.22em; /* the trailing letter-spacing would push the text off-centre */
	color: #4db8f5; /* the app blue, a little lighter so it reads on the grey */
}

.hero .eyebrow::before,
.hero .eyebrow::after {
	content: "";
	flex: none;
	width: clamp(30px, 5.4vw, 40px);
	height: clamp(66px, 11.6vw, 88px);
	background: url(laurel.svg) center / contain no-repeat;
	opacity: 0.95;
}

.hero .eyebrow::after {
	transform: scaleX(-1);
}

.hero h1 {
	font-size: clamp(2.1rem, 5vw, 3.4rem);
	text-shadow: 0 2px 24px rgba(0, 0, 0, 0.18);
}

/* the text on the left, right-aligned, and the App Store button to its right, as on the old site; stacked and centred on a narrow page */
.hero-row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(28px, 4vw, 56px);
}

.hero p.lead {
	font-size: clamp(1.1rem, 2.2vw, 1.35rem);
	color: rgba(255, 255, 255, 0.94);
	max-width: 34em;
	margin: 0;
	text-align: right;
}

.hero p.lead b i {
	font-style: normal;
	opacity: 0.55; /* the # is dimmed, as on the old site */
}

.hero p.lead em {
	font-style: normal;
	color: #fff;
	background: #209dde; /* the old site's marker highlight, in the app blue */
	border-radius: 7px;
	padding: 0.04em 0.34em;
	margin: 0 0.04em;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

.hero .actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	flex: none;
}

@media (max-width: 860px) {
	.hero-row {
		flex-direction: column;
		gap: 26px;
	}

	.hero p.lead {
		text-align: center;
	}
}

.hero-devices {
	position: relative;
	max-width: 1560px;
	margin: 40px auto 0;
	padding: 0 12px;
	container-type: inline-size;
}

/* The devices are placed in --u units: 100 units are the composition's nominal width. On a wide page 1 unit is 1% of the stage's width (1cqw), so
   the picture grows with the page up to the stage's cap. Once 1% of the width falls below 12px the units stay 12px and the composition no longer
   shrinks: it gets narrower instead, because --shift slides the Mac, the iPhone and the Watch left over the iPad, which stays at the left edge
   (its visible part gets smaller). The iPad can be covered up to 22 units; only below that (a stage under 936px) the units shrink too. */
.hero-devices .stage {
	--u: max(1cqw, min(12px, 1.2821cqw));
	--shift: max(0px, calc(100 * var(--u) - 100cqw));
	position: relative;
	height: calc(39 * var(--u));
}

.device {
	position: absolute;
	margin: 0;
	will-change: transform, translate, scale; /* each device is its own layer, so moving it does not repaint the pictures */
	animation: device-rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) backwards; /* not 'both': a finished opacity animation would keep the Mac's backdrop blur from seeing the iPad */
	animation-delay: calc(var(--rise, 0) * 0.12s);
}

.device img {
	display: block;
	width: 100%;
	height: auto;
}

/* the Mac picture is the bare window (rounded, transparent corners): CSS adds the shadow, like the iPad's and iPhone's */
.device.mac {
	left: calc(31.7 * var(--u));
	top: calc(2.91 * var(--u)); /* 38 minus the window's height (35.09 units): its bottom edge stands on the baseline */
	width: calc(52.7 * var(--u));
	z-index: 1;
}

/* The Mac's window is a little see-through (the toolbar, the shadow): the iPad under it shows through blurred, like frosted glass. That is a
   pre-blurred copy of the iPad (assets/screens/ipad-blur.webp) inside the Mac's figure, cut by the window's own outline as a mask (screens/mac-mask.webp: the window's silhouette at full size, 2px inside its border, fully opaque: the picture's own alpha is 85% in the glass, which would let the sharp iPad show faintly through, and its soft edge would let the blur out past the border), and
   placed where the iPad is (the iPad's left edge is 30.7 units left of the Mac's, plus whatever the Mac has slid left over it), but 3.7 units (about 50px)
   larger on every side, with a feathered edge, so its outline fades into the background the way a real blur would. No filter runs
   while scrolling. */
.device.mac .under {
	position: absolute;
	inset: 0;
	overflow: hidden;
	-webkit-mask: url(screens/mac-mask.webp) center / 100% 100% no-repeat;
	mask: url(screens/mac-mask.webp) center / 100% 100% no-repeat;
}

.device.mac .under img {
	position: absolute;
	left: calc(-34.38 * var(--u) + var(--shift));
	top: calc(-1.82 * var(--u));
	width: calc(53.36 * var(--u));
	max-width: none; /* wider than the Mac's figure */
	height: auto;
	translate: calc(var(--p, 0) * -6 * var(--u)) 0; /* the iPad and the Mac move apart by this much on scroll */
	will-change: translate;
}

.device.mac > img {
	position: relative; /* above the blurred copy */
}

/* All four devices stand on one baseline, 38 units from the top of the stage (top = 38 minus the device's height), as in the old site's picture. */

/* the iPad picture includes its bezel (rounded, transparent corners): only the shadow is added here */
.device.ipad {
	left: calc(1 * var(--u));
	top: calc(4.77 * var(--u));
	width: calc(46 * var(--u));
	z-index: 0; /* behind the Mac, which covers its right 40% */
}

/* The iPad's and the iPhone's shadows are box-shadows on a rounded layer behind the picture (its bezel's corner radius): they are drawn once with the
   layer, where a drop-shadow filter would be worked out again on every frame of the scroll. */
.device.mac::after,
.device.ipad::after,
.device.iphone::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	box-shadow: 0 calc(2.4 * var(--u)) calc(3 * var(--u)) rgba(0, 0, 0, 0.35);
}

.device.mac::after {
	border-radius: 1.95% / 2.9%; /* the window's corners (about 38px of 1974) */
	/* one soft shadow close to the window, like the iPad's, and a hairline: a wider, darker one piled up with the iPad's under it into a heavy dark haze */
	box-shadow: 0 calc(1.8 * var(--u)) calc(3.4 * var(--u)) rgba(0, 0, 0, 0.36), 0 0 0 1px rgba(0, 0, 0, 0.2);
}

.device.ipad::after {
	border-radius: 9.6% / 9.4%;
}

.device.iphone::after {
	border-radius: 21% / 17.7%;
}

/* the Watch picture has no shadow of its own: CSS adds one, like the iPad's and iPhone's. It stands on the baseline in the white, empty lower middle of the Mac's window; on scroll it moves a little to the right (7 units, at a steady pace), staying in the Mac's lower middle, far from the iPhone */
.device.watch {
	left: calc(45.4 * var(--u));
	top: calc(23.26 * var(--u)); /* its bottom is 1.4 units (about 20px at 1440px) below the baseline the other devices stand on */
	width: calc(10.2 * var(--u));
	z-index: 4;
	filter: drop-shadow(0 calc(1.6 * var(--u)) calc(2.2 * var(--u)) rgba(0, 0, 0, 0.4));
}

.device.iphone {
	left: calc(76 * var(--u));
	top: calc(5.27 * var(--u));
	width: calc(16 * var(--u));
	z-index: 3;
}

/* "Spread" on scroll: --p (0 to 1, set by assets/site.js) moves each device from the composition into its place in one row on the same
   baseline: iPad (tucked behind the Mac), Mac, iPhone (over the Mac's right edge), with the Watch staying in the Mac's lower middle, far from the iPhone.
   The devices keep their size (the page's width does not set it); they slide sideways (the numbers, in units, are each device's centre moved
   to its place in the row) and all rise by the same 2 units. The Mac, iPhone and Watch also slide left by --shift on a narrow page, over
   the iPad. The movement uses translate (no rotation), which the entrance animation (transform) does not touch. */
.device.mac {
	translate: calc(var(--p, 0) * 3.4 * var(--u) - var(--shift)) calc(var(--p, 0) * -2 * var(--u));
}

.device.ipad {
	translate: calc(var(--p, 0) * -2.6 * var(--u)) calc(var(--p, 0) * -2 * var(--u));
}

.device.watch {
	translate: calc(var(--p, 0) * 7 * var(--u) - var(--shift)) calc(var(--p, 0) * -2 * var(--u));
}

.device.iphone {
	translate: calc(var(--p, 0) * 10.4 * var(--u) - var(--shift)) calc(var(--p, 0) * -2 * var(--u)); /* steady, and further than the Watch (below) goes, so the two do not drift together */
}

@keyframes device-rise {
	from {
		opacity: 0;
		transform: translateY(calc(3 * var(--u)));
	}
}

@media (prefers-reduced-motion: reduce) {
	.device {
		animation: none;
	}
}

.after-hero {
	/* a sheet that rises over the bottom of the hero's background (and over the devices as they fly apart) */
	position: relative;
	z-index: 2;
	margin-top: -96px;
	padding-top: 80px;
	background: var(--bg);
	border-radius: 32px 32px 0 0;
	box-shadow: 0 -14px 40px rgba(0, 0, 0, 0.2);
}

.band {
	padding: 120px 0;
}

.band .section-head p,
.band .checks li {
	color: rgba(255, 255, 255, 0.9);
}

.band .checks li b {
	color: #ffffff;
}

.band .eyebrow {
	color: #ffffff;
	opacity: 0.85;
}

.band .pill {
	background: rgba(255, 255, 255, 0.16);
	border-color: rgba(255, 255, 255, 0.35);
	color: #ffffff;
}

/* the cloud with the sync arrows (screens/cloud-sync.png, 280px wide at most: kept small so it stays sharp) above the Cloud Sync heading */
.sync-cloud {
	display: block;
	width: 190px;
	height: auto;
	margin: 0 0 22px -8px;
	filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.28));
}

/* the Duo picture on the left, big, and the text beside it (the picture comes second in the markup, so on a phone the text is first) */
.split.sync-split {
	grid-template-columns: 1.55fr 1fr;
	align-items: center;
}

.sync-duo {
	margin: 0;
	order: -1;
}

.sync-duo img {
	display: block;
	width: 100%;
	height: auto;
	filter: drop-shadow(0 26px 34px rgba(0, 0, 0, 0.38)) drop-shadow(0 4px 8px rgba(0, 0, 0, 0.25)); /* follows the device's outline; the picture does not move, so the filter is drawn once */
}

.band .checks li::before {
	background-color: rgba(255, 255, 255, 0.28);
}

.stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	text-align: center;
}

/* a line icon above each figure (inline SVG, stroke in the accent colour) */
.stats svg {
	display: block;
	width: 52px;
	height: 52px;
	margin: 0 auto 16px;
	fill: none;
	stroke: var(--accent);
	stroke-width: 2.4;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.stats b {
	display: block;
	font-size: clamp(1.5rem, 3vw, 2rem);
	white-space: nowrap;
	letter-spacing: -0.02em;
	line-height: 1.1;
}

.stats span {
	display: block;
	margin-top: 6px;
	color: var(--text-soft);
	font-size: 0.95rem;
	line-height: 1.4;
}

/* Sections */

section {
	padding: 88px 0;
}

section.soft {
	background: var(--bg-soft);
}

.section-head {
	max-width: 640px;
	margin-bottom: 44px;
}

.section-head p {
	color: var(--text-soft);
	font-size: 1.1rem;
}

.eyebrow {
	display: inline-block;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--accent);
	margin-bottom: 10px;
}

.grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.card {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 26px;
	box-shadow: var(--shadow);
}

.card p {
	color: var(--text-soft);
	margin: 0;
	font-size: 0.98rem;
}

.card .symbol {
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: var(--accent-soft);
	color: var(--accent);
	display: grid;
	place-items: center;
	margin-bottom: 16px;
}

.card .symbol svg {
	width: 24px;
	height: 24px;
}

.split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: start;
}

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

.checks li {
	position: relative;
	padding-left: 34px;
	color: var(--text-soft);
}

.checks li b {
	color: var(--text);
}

.checks li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 3px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 14px no-repeat;
}

.platforms {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 22px;
}

.pill {
	border: 1px solid var(--line);
	background: var(--card);
	border-radius: 999px;
	padding: 6px 14px;
	font-size: 0.9rem;
	color: var(--text-soft);
}

.cta {
	text-align: center;
}

.cta p {
	color: var(--text-soft);
	font-size: 1.15rem;
}

.cta .wrap > img {
	width: 88px;
	height: 88px;
	margin-bottom: 18px;
	filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.22)); /* the icon picture is already cut to the app icon's shape (transparent corners) */
}

/* Text pages: privacy, terms, support */

.page {
	padding: 64px 0 88px;
}

.page .wrap {
	max-width: 760px;
}

.page h1 {
	font-size: clamp(2rem, 5vw, 2.8rem);
}

.page h2 {
	font-size: 1.4rem;
	margin-top: 2em;
}

.page .updated {
	color: var(--text-soft);
	margin-bottom: 2em;
}

.page ul {
	padding-left: 1.2em;
}

.page li {
	margin-bottom: 0.5em;
}

.page .note {
	background: var(--accent-soft);
	border-radius: 14px;
	padding: 18px 20px;
	margin: 1.5em 0;
}

details {
	border-bottom: 1px solid var(--line);
	padding: 16px 0;
}

details summary {
	cursor: pointer;
	font-weight: 600;
	list-style: none;
	display: flex;
	justify-content: space-between;
	gap: 16px;
}

details summary::-webkit-details-marker {
	display: none;
}

details summary::after {
	content: "+";
	color: var(--accent);
	font-size: 1.3rem;
	line-height: 1;
}

details[open] summary::after {
	content: "−";
}

details p {
	margin: 12px 0 0;
	color: var(--text-soft);
}

/* Footer */

.site-footer {
	border-top: 1px solid var(--line);
	padding: 36px 0 48px;
	font-size: 0.9rem;
	color: var(--text-soft);
}

.site-footer .wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	text-align: center;
}

.site-footer nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 20px;
}

.site-footer p {
	margin: 0;
}

.footer-copy {
	margin-top: 4px;
}

.site-footer a {
	color: var(--text-soft);
}

/* Narrow screens */

@media (max-width: 860px) {
	.split {
		grid-template-columns: 1fr;
	}

	.split.sync-split {
		grid-template-columns: 1fr;
	}

	.sync-duo {
		order: 0;
	}

	.hero {
		padding-top: 68px;
	}

	.stats {
		grid-template-columns: 1fr 1fr;
		gap: 28px 16px;
	}

	.band {
		padding: 88px 0;
	}

	.grid {
		grid-template-columns: 1fr 1fr;
	}

	section {
		padding: 64px 0;
	}
}

@media (max-width: 560px) {
	.grid {
		grid-template-columns: 1fr;
	}

	.nav {
		gap: 14px;
		font-size: 0.9rem;
	}

	.nav .optional {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.button {
		transition: none;
	}
}

/* ---- Feature tour (home page) ---- */

.hero .tags {
	font-weight: 600;
	color: #ffffff;
}

/* the feature menu: icon buttons in a row (no pill around them); on a narrow screen they wrap onto more lines */
.tour-menu {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 4px;
	margin: 0 auto;
}

.tour-menu a {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	width: 108px;
	padding: 14px 8px 10px;
	border-radius: 20px;
	color: var(--text-soft);
	font-size: 0.9rem;
	font-weight: 600;
	transition: background 0.15s ease, color 0.15s ease;
}

.tour-menu a:hover {
	background: var(--accent-soft);
	color: var(--accent);
	text-decoration: none;
}

.tour-menu svg {
	height: 34px;
	width: auto;
	fill: currentColor;
}

.tour {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 56px;
	align-items: center;
}

.tour + .tour {
	margin-top: 96px;
}

.tour.flip > :first-child {
	order: 2;
}

/* one picture too wide for a column: the text sits above it, centred, and the picture takes the page's width */
.tour.stack {
	grid-template-columns: 1fr;
	gap: 40px;
	justify-items: center;
}

.tour.stack > :first-child {
	max-width: 760px;
	text-align: center;
}

.tour.stack .checks {
	max-width: 600px;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
}

.tour.stack .tour-visual {
	width: 100%;
}

.tour h2 {
	margin-bottom: 0.4em;
}

.tour .lead {
	color: var(--text-soft);
	font-size: 1.1rem;
}

.tour .checks {
	margin-top: 22px;
}

.tour-visual {
	display: flex;
	justify-content: center;
}

.shot {
	margin: 0;
}

/* a screenshot cut out of its window (transparent): it gets a card like the drawn panels */
.shot.phone {
	box-sizing: border-box;
	width: min(420px, 100%);
	padding: 14px 16px;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius-visual);
	box-shadow: var(--shadow);
}

/* a wide, opaque screenshot (the Calendar app): the card is the picture itself, clipped to rounded corners */
.shot.wide {
	box-sizing: border-box;
	width: 100%;
	max-width: 1000px;
	overflow: hidden;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 32px;
	box-shadow: var(--shadow);
}

/* the Planner screenshot's card is iOS's light grey (grouped background) in the light appearance (the dark one keeps the usual card) */
@media (prefers-color-scheme: light) {
	.shot.planner-shot {
		background: #f2f2f7;
	}
}

.shot img {
	display: block;
	width: 100%;
	height: auto;
}

.shot figcaption {
	margin-top: 10px;
	text-align: center;
	font-size: 0.88rem;
	color: var(--text-soft);
}

/* app-like panels drawn in HTML */

.panel {
	width: min(380px, 100%);
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius-visual);
	box-shadow: var(--shadow);
	padding: 18px;
}

.panel-title {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	font-weight: 700;
	font-size: 1.15rem;
	padding: 2px 6px 10px;
}

.panel-title span {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--text-soft);
}

.badge {
	display: inline-block;
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #ffffff;
	padding: 3px 10px;
	border-radius: 999px;
	margin: 8px 6px 4px;
}

.badge.now {
	background: #27ae60;
}

.badge.next {
	background: #2f6fd6;
}

.item {
	display: grid;
	grid-template-columns: 40px 1fr auto;
	gap: 12px;
	align-items: center;
	padding: 10px 6px;
}

.item + .item {
	border-top: 1px solid var(--line);
}

.course-icon {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	color: #ffffff;
	font-weight: 700;
	font-size: 0.85rem;
}

.item small {
	display: block;
	color: var(--text-soft);
	font-size: 0.78rem;
}

.item b {
	display: block;
	font-size: 0.98rem;
}

.item .meta {
	font-size: 0.85rem;
	color: var(--text-soft);
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.item .meta strong {
	display: block;
	color: var(--text);
}

.tick {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	border: 2px solid currentColor;
	display: grid;
	place-items: center;
	justify-self: center;
}

.tick.done {
	background: currentColor;
}

.tick.done::after {
	content: "";
	width: 10px;
	height: 6px;
	border: solid #ffffff;
	border-width: 0 0 2px 2px;
	transform: translateY(-1px) rotate(-45deg);
}

.grade {
	border: 1.5px solid currentColor;
	border-radius: 999px;
	padding: 1px 9px;
	font-weight: 700;
	font-size: 0.8rem;
}

.course-label {
	font-size: 0.75rem;
	font-weight: 700;
}

.class-card {
	border-radius: 18px;
	padding: 14px 16px;
	background: color-mix(in srgb, var(--c) 14%, var(--card));
	border: 1px solid color-mix(in srgb, var(--c) 40%, transparent);
}

.class-card + .class-card {
	margin-top: 12px;
}

.class-card small {
	color: var(--text-soft);
	font-size: 0.8rem;
}

.class-card b {
	display: block;
	font-size: 1.02rem;
	margin: 2px 0 8px;
}

.days {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 4px;
	font-size: 0.68rem;
	font-weight: 600;
	text-align: center;
	color: var(--text-soft);
}

.days span {
	border-radius: 6px;
	padding: 3px 0;
	border: 1px solid var(--line);
}

.days span.on {
	background: var(--c);
	border-color: var(--c);
	color: #ffffff;
}

.feature-cards {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
	margin-top: 40px;
}

/* history: awards and reviews */

.awards {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	margin-bottom: 48px;
}

.award {
	text-align: center;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 22px 16px;
}

.award .year {
	display: inline-block;
	background: #e9475a;
	color: #ffffff;
	font-weight: 700;
	font-size: 0.8rem;
	border-radius: 6px;
	padding: 2px 8px;
	margin-bottom: 10px;
}

.award b {
	display: block;
	font-size: 1rem;
}

.quotes {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.quote {
	margin: 0;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 26px;
	box-shadow: var(--shadow);
}

.quote .stars {
	color: #ffb400;
	letter-spacing: 2px;
	margin-bottom: 10px;
}

.quote blockquote {
	margin: 0 0 14px;
	color: var(--text);
}

.quote figcaption {
	font-size: 0.88rem;
	color: var(--text-soft);
}

.footer-legal {
	max-width: 940px;
	margin-top: -8px;
	font-size: 0.8rem;
	line-height: 1.6;
}

@media (max-width: 860px) {
	.tour {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.tour.flip > :first-child {
		order: 0;
	}

	.tour + .tour {
		margin-top: 72px;
	}

	.feature-cards,
	.awards {
		grid-template-columns: 1fr 1fr;
	}

	.quotes {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 560px) {
	.feature-cards {
		grid-template-columns: 1fr;
	}

	.tour-menu a {
		width: 80px;
		padding: 12px 2px 8px;
		font-size: 0.8rem;
	}
}

a.card {
	display: block;
	color: inherit;
	transition: border-color 0.15s ease;
}

a.card:hover {
	text-decoration: none;
	border-color: var(--accent);
}

a.card h3 {
	color: var(--accent);
}

.page ol {
	padding-left: 1.4em;
}

@media (max-width: 560px) {
	.page .grid {
		grid-template-columns: 1fr !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.parallax-bg {
		inset: 0;
		transform: none !important;
	}
}