/*
Theme Name: Pordiya
Theme URI: https://pordiya.com
Author: Pordiya
Description: A minimal marketing theme for a trades job management product. Fourteen pages including four country pages, prices in four currencies with a cache-safe switcher, a comparison table, a booking form and structured data. No page builder, no web fonts, no third-party scripts, and every feature degrades without JavaScript.
Version: 2.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pordiya
Tags: business, one-column, custom-logo, custom-menu, featured-images, translation-ready
*/

/* ---------------------------------------------------------------------------
   Tokens

   Two neutrals and one accent. Restraint here is what keeps the page looking
   built rather than generated: a landing page that uses five colours and three
   gradients reads as a template no matter how good the copy is.
   --------------------------------------------------------------------------- */
:root {
	/* Palette carried over from the original preview, unchanged. */
	--orange: #F97316;
	--orange-deep: #C2410C;
	--orange-soft: #FFF3E9;

	--ink: #0B0B0C;
	--ink-2: #17171A;
	--ink-soft: #57575E;
	--muted: #8A8A92;
	--line: #E8E6E3;
	--line-soft: #F1EFEC;
	--sand: #FAF9F7;
	--paper: #FFFFFF;

	/* Bright orange is the fill colour and fails contrast as small text, so
	   text uses the deeper shade and the bright one is kept for marks, dots,
	   hovers and fills. Same palette, readable either way. */
	--accent: var(--orange-deep);
	--accent-bright: var(--orange);
	--accent-wash: var(--orange-soft);

	--wrap: 1140px;
	--wrap-narrow: 720px;
	--radius: 14px;
	--gap: 24px;
	--ease: cubic-bezier(.22, .61, .36, 1);
}

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

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

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 17px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
	margin: 0;
	line-height: 1.12;
	letter-spacing: -0.022em;
	font-weight: 640;
}

p {
	margin: 0 0 1em;
}

a {
	color: inherit;
}

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

ul, ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

.muted {
	color: var(--muted);
}

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

.wrap--narrow {
	max-width: var(--wrap-narrow);
}

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

.skip:focus {
	left: 12px;
	top: 12px;
	z-index: 100;
	background: var(--ink);
	color: var(--paper);
	padding: 10px 16px;
	border-radius: var(--radius);
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 13px 22px;
	border: 1px solid var(--ink);
	border-radius: var(--radius);
	background: var(--ink);
	color: var(--paper);
	font-size: 16px;
	font-weight: 560;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn:hover {
	background: var(--accent);
	border-color: var(--accent);
}

.btn--ghost {
	background: transparent;
	color: var(--ink);
	border-color: var(--line);
}

.btn--ghost:hover {
	background: transparent;
	border-color: var(--ink);
	color: var(--ink);
}

.btn--sm {
	padding: 9px 16px;
	font-size: 15px;
}

.btn--lg {
	padding: 16px 30px;
	font-size: 17px;
}

.btn--block {
	display: flex;
	width: 100%;
}

.link {
	text-decoration: none;
	font-size: 15px;
	color: var(--ink-soft);
}

.link:hover {
	color: var(--accent);
}

/* ---------------------------------------------------------------------------
   Header
   --------------------------------------------------------------------------- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 40;
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: saturate(140%) blur(8px);
	border-bottom: 1px solid var(--line-soft);
}

.site-header__inner {
	display: flex;
	align-items: center;
	gap: 32px;
	height: 66px;
}

.brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	font-weight: 640;
	letter-spacing: -0.02em;
	white-space: nowrap;
}

.brand__mark {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 7px;
	background: var(--ink);
	color: var(--paper);
	font-size: 12px;
	letter-spacing: 0.02em;
}

.nav {
	margin-right: auto;
}

.nav__list {
	display: flex;
	gap: 26px;
}

.nav__list a {
	text-decoration: none;
	font-size: 15px;
	color: var(--ink-soft);
}

.nav__list a:hover {
	color: var(--accent);
}

.site-header__actions {
	display: flex;
	align-items: center;
	gap: 18px;
}

/* The toggle only exists once the script has run. */
.nav-toggle {
	display: none;
	width: 40px;
	height: 36px;
	padding: 0;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: transparent;
	cursor: pointer;
}

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
	display: block;
	width: 16px;
	height: 1.5px;
	margin: 0 auto;
	background: var(--ink);
	content: "";
}

.nav-toggle__bars::before {
	transform: translateY(-5px);
}

.nav-toggle__bars::after {
	transform: translateY(3.5px);
}

@media (max-width: 860px) {
	.site-header__actions .link {
		display: none;
	}

	.brand {
		margin-right: auto;
	}

	.has-js .nav-toggle {
		display: block;
	}

	/*
	 * Only hide the navigation when there is a working button to bring it
	 * back. Without JavaScript it stays visible and stacks under the header.
	 */
	.has-js .nav {
		position: absolute;
		top: 66px;
		left: 0;
		right: 0;
		display: none;
		padding: 10px 24px 20px;
		background: var(--paper);
		border-bottom: 1px solid var(--line);
	}

	.has-js .nav.is-open {
		display: block;
	}

	.nav__list {
		flex-direction: column;
		gap: 4px;
	}

	.nav__list a {
		display: block;
		padding: 10px 0;
		font-size: 16px;
		border-bottom: 1px solid var(--line-soft);
	}
}

/* ---------------------------------------------------------------------------
   Sections
   --------------------------------------------------------------------------- */
.section {
	padding: 92px 0;
	border-top: 1px solid var(--line-soft);
	scroll-margin-top: 66px;
}

.section.sand {
	background: var(--sand);
	border-top-color: var(--line);
}

.eyebrow {
	margin: 0 0 14px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--accent);
}

.section__title {
	font-size: clamp(30px, 4.4vw, 44px);
	max-width: 26ch;
	/* Keeps two line headings from breaking one word onto the second line. */
	text-wrap: balance;
}

.section__lead {
	margin: 18px 0 0;
	max-width: 62ch;
	font-size: 18px;
	color: var(--ink-soft);
}

.section__after {
	margin: 40px 0 0;
}

/* ---------------------------------------------------------------------------
   Hero
   --------------------------------------------------------------------------- */
.hero {
	padding: 76px 0 84px;
}

.hero__inner {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: 56px;
	align-items: center;
}

.hero__title {
	font-size: clamp(38px, 5.6vw, 60px);
	letter-spacing: -0.03em;
}

.hl {
	color: var(--accent);
}

.hero__body {
	margin: 22px 0 0;
	max-width: 46ch;
	font-size: 18.5px;
	color: var(--ink-soft);
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 30px;
}

.hero__trust {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
	margin-top: 26px;
	font-size: 14.5px;
	color: var(--muted);
}

.hero__trust li {
	position: relative;
	padding-left: 16px;
}

.hero__trust li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 9px;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--accent);
}

.hero__trust--center {
	justify-content: center;
	margin-top: 28px;
}

@media (max-width: 900px) {
	.hero__inner {
		grid-template-columns: 1fr;
		gap: 44px;
	}
}

/* ---------------------------------------------------------------------------
   The phone in the hero

   A frame around a real screenshot. This was a phone drawn entirely in CSS for
   a while, which weighed nothing and never went stale — and looked exactly like
   what it was, a drawing. For a product nobody has heard of yet, the screenshot
   is worth the kilobytes.
   --------------------------------------------------------------------------- */
.phone {
	position: relative;
	width: 294px;
	margin: 0 auto;
	padding: 9px;
	background: var(--ink);
	border-radius: 40px;
	box-shadow:
		0 2px 4px rgba(11, 11, 12, 0.1),
		0 40px 80px -32px rgba(11, 11, 12, 0.5),
		0 0 0 1px rgba(11, 11, 12, 0.06);
}

/* The earpiece slot, over the screenshot. */
.phone::after {
	content: "";
	position: absolute;
	top: 19px;
	left: 50%;
	transform: translateX(-50%);
	width: 78px;
	height: 5px;
	border-radius: 3px;
	background: #2C2C31;
	z-index: 2;
}

.phone picture {
	display: block;
}

.phone__img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 32px;
}

/*
   The offline chip.

   The one claim a still screenshot cannot make for itself, so it is drawn on
   top of the image. It sits half off the frame deliberately: a badge inside the
   screen would read as part of the app, and this is us talking, not the app.
*/
.phone__chip {
	position: absolute;
	right: -18px;
	bottom: 74px;
	z-index: 3;
	display: flex;
	align-items: center;
	gap: 8px;
	max-width: 232px;
	margin: 0;
	padding: 10px 14px;
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: 12px;
	box-shadow: 0 12px 28px -12px rgba(11, 11, 12, 0.3);
	font-size: 12.5px;
	line-height: 1.35;
	color: var(--ink-soft);
}

.phone__pulse {
	flex: none;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--accent-bright);
	box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.55);
	animation: pordiya-pulse 2.4s var(--ease) infinite;
}

@keyframes pordiya-pulse {
	70% { box-shadow: 0 0 0 9px rgba(249, 115, 22, 0); }
	100% { box-shadow: 0 0 0 0 rgba(249, 115, 22, 0); }
}

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

@media (max-width: 520px) {
	.phone__chip {
		right: 0;
		bottom: -14px;
		max-width: 100%;
	}
}


/* ---------------------------------------------------------------------------
   Statistics
   --------------------------------------------------------------------------- */
.stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--gap);
	margin-top: 52px;
}

.stat {
	padding-top: 22px;
	border-top: 2px solid var(--ink);
}

.stat__figure {
	margin: 0 0 10px;
	font-size: 38px;
	font-weight: 640;
	letter-spacing: -0.03em;
}

.stat__body {
	margin: 0 0 12px;
	color: var(--ink-soft);
	font-size: 16px;
}

.stat__source {
	margin: 0;
	font-size: 12.5px;
	color: var(--muted);
}

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

/* ---------------------------------------------------------------------------
   Cards, lists, steps
   --------------------------------------------------------------------------- */
.grid {
	display: grid;
	gap: var(--gap);
	margin-top: 52px;
}

.grid--2 {
	grid-template-columns: repeat(2, 1fr);
}

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

.card__title {
	font-size: 19px;
	margin-bottom: 8px;
}

.card__body {
	margin: 0;
	color: var(--ink-soft);
	font-size: 16px;
}

.steps {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--gap);
	margin-top: 52px;
}

.step {
	padding-top: 22px;
	border-top: 1px solid var(--line);
}

.step__num {
	display: block;
	margin-bottom: 14px;
	font-size: 13px;
	font-weight: 640;
	letter-spacing: 0.08em;
	color: var(--accent);
}

.step__title {
	font-size: 19px;
	margin-bottom: 8px;
}

.step__body {
	margin: 0;
	color: var(--ink-soft);
	font-size: 16px;
}

.list {
	margin-top: 52px;
	border-top: 1px solid var(--line);
}

.list__item {
	display: grid;
	grid-template-columns: 1fr 1.6fr;
	gap: var(--gap);
	padding: 22px 0;
	border-bottom: 1px solid var(--line);
}

.list__title {
	font-size: 18px;
}

.list__body {
	margin: 0;
	color: var(--ink-soft);
	font-size: 16px;
}

@media (max-width: 800px) {
	.grid--2,
	.steps {
		grid-template-columns: 1fr;
	}

	.list__item {
		grid-template-columns: 1fr;
		gap: 6px;
	}
}

/* ---------------------------------------------------------------------------
   Trades
   --------------------------------------------------------------------------- */
.tags {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
	margin-top: 40px;
}

.tags__item {
	padding: 8px 15px;
	border: 1px solid var(--line);
	border-radius: 999px;
	font-size: 14.5px;
	color: var(--ink-soft);
	background: var(--paper);
}

/* ---------------------------------------------------------------------------
   Pricing
   --------------------------------------------------------------------------- */
.plans {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--gap);
	margin-top: 28px;
	align-items: start;
}

.plan {
	padding: 30px;
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: 14px;
}

.plan--feature {
	border-color: var(--ink);
	box-shadow: 0 12px 30px rgba(20, 22, 26, 0.07);
}

.plan__name {
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--muted);
}

.plan__price {
	display: flex;
	align-items: baseline;
	gap: 3px;
	margin: 16px 0 6px;
}

.plan__currency {
	font-size: 24px;
	font-weight: 600;
	align-self: flex-start;
	margin-top: 8px;
}

.plan__amount {
	font-size: 56px;
	font-weight: 640;
	letter-spacing: -0.035em;
	line-height: 1;
}

.plan__period {
	/* Enough room that "US$0 forever" reads as two words. At the 3px the row
	   used to have, it read as one. */
	margin-left: 4px;
	font-size: 17px;
	color: var(--muted);
}

.plan__sub {
	margin: 0 0 22px;
	color: var(--ink-soft);
	font-size: 15.5px;
}

.plan__list {
	margin: 0 0 26px;
	padding-top: 20px;
	border-top: 1px solid var(--line-soft);
}

.plan__list li {
	position: relative;
	padding: 7px 0 7px 24px;
	font-size: 15.5px;
	color: var(--ink-soft);
}

.plan__list li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 15px;
	width: 9px;
	height: 5px;
	border-left: 2px solid var(--accent);
	border-bottom: 2px solid var(--accent);
	transform: rotate(-45deg);
}

.plans__note {
	margin: 26px 0 0;
	font-size: 14.5px;
	color: var(--muted);
	max-width: 62ch;
}

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

/* ---------------------------------------------------------------------------
   Reviews
   --------------------------------------------------------------------------- */
.reviews__summary {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 28px 0 0;
	font-size: 16px;
	color: var(--ink-soft);
}

.reviews__summary strong {
	font-size: 19px;
	letter-spacing: -0.02em;
	color: var(--ink);
}

.stars {
	display: inline-flex;
	gap: 2px;
}

.star {
	width: 16px;
	height: 16px;
	fill: #D6D3D0;
}

.star--on {
	fill: var(--accent-bright);
}

.reviews {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--gap);
	margin-top: 34px;
}

.review {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 26px;
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	transition: transform 0.22s var(--ease), box-shadow 0.25s var(--ease);
}

.review:hover {
	transform: translateY(-2px);
	box-shadow: 0 18px 40px -28px rgba(11, 11, 12, 0.45);
}

.review__text {
	margin: 14px 0 22px;
	padding: 0;
	border: 0;
	font-size: 16px;
	color: var(--ink-soft);
}

.review__by {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: auto;
	padding-top: 18px;
	border-top: 1px solid var(--line-soft);
	font-size: 14px;
}

.review__avatar {
	flex: none;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	object-fit: cover;
}

.review__who {
	display: flex;
	flex-direction: column;
	margin-right: auto;
	line-height: 1.35;
}

.review__who strong {
	font-weight: 560;
}

.review__who .muted {
	font-size: 13px;
}

.review__link {
	flex: none;
	font-size: 13px;
	color: var(--accent);
	text-decoration: none;
	white-space: nowrap;
}

.review__link:hover {
	text-decoration: underline;
}

.reviews__note {
	margin: 26px 0 0;
	max-width: 70ch;
	font-size: 13.5px;
	color: var(--muted);
}

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

/* Only administrators ever see this, so it is allowed to look like scaffolding
   rather than like part of the design. */
.reviews__setup {
	margin-top: 30px;
	padding: 24px 26px;
	border: 1px dashed var(--line);
	border-radius: var(--radius);
	background: var(--orange-soft);
	font-size: 15px;
	color: var(--ink-soft);
}

.reviews__setup ol {
	margin: 10px 0 0 1.1em;
	list-style: decimal;
}

.reviews__setup li {
	margin-bottom: 5px;
}

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

/* ---------------------------------------------------------------------------
   Questions
   --------------------------------------------------------------------------- */
.faq {
	margin-top: 44px;
	border-top: 1px solid var(--line);
}

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

.faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 20px 0;
	font-size: 17.5px;
	font-weight: 560;
	cursor: pointer;
	list-style: none;
}

.faq__q::-webkit-details-marker {
	display: none;
}

.faq__q::after {
	content: "+";
	flex: none;
	font-size: 22px;
	font-weight: 400;
	color: var(--accent);
	line-height: 1;
}

.faq__item[open] .faq__q::after {
	content: "\2212";
}

.faq__a {
	padding: 0 0 22px;
	max-width: 66ch;
	color: var(--ink-soft);
}

.faq__a p {
	margin: 0;
}

/* ---------------------------------------------------------------------------
   Closing block
   --------------------------------------------------------------------------- */
.cta {
	background: var(--sand);
	border-top-color: var(--line);
	text-align: center;
}

.cta .section__title,
.cta .section__lead {
	margin-left: auto;
	margin-right: auto;
}

.cta .section__lead {
	max-width: 48ch;
}

/* ---------------------------------------------------------------------------
   Blog and pages
   --------------------------------------------------------------------------- */
.prose {
	margin-top: 28px;
	color: var(--ink-soft);
}

.prose h2 {
	margin: 40px 0 12px;
	font-size: 26px;
	color: var(--ink);
}

.prose h3 {
	margin: 30px 0 10px;
	font-size: 20px;
	color: var(--ink);
}

.prose ul,
.prose ol {
	margin: 0 0 1em 1.2em;
	list-style: disc;
}

.prose ol {
	list-style: decimal;
}

.prose li {
	margin-bottom: 6px;
}

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

/*
   Tables inside page content.

   Added when the legal pages went in: the privacy policy, terms and data
   processing agreement are largely tables — what we collect, who else touches
   it, how long it is kept — and without these rules they rendered as unspaced
   browser default, which on a page somebody is reading for reassurance is
   worse than not having the table.
*/
.prose table {
	width: 100%;
	margin: 22px 0 28px;
	border-collapse: collapse;
	font-size: 15.5px;
}

.prose th,
.prose td {
	padding: 11px 14px;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--line-soft);
}

.prose thead th {
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--muted);
	border-bottom-color: var(--line);
}

.prose tbody th {
	font-weight: 600;
	color: var(--ink);
}

/* Long documents need the scroll affordance on a phone as much as any table. */
.prose table {
	display: block;
	overflow-x: auto;
}

@media (min-width: 640px) {
	.prose table {
		display: table;
	}
}

.prose strong {
	color: var(--ink);
}

.prose hr {
	margin: 36px 0;
	border: 0;
	border-top: 1px solid var(--line);
}

/*
   A legal page is a wall of text, and the default measure is too wide to read
   comfortably. This is the one place on the site where line length matters
   more than filling the column.
*/
.page-legal .prose {
	max-width: 68ch;
}

.posts {
	margin-top: 40px;
	border-top: 1px solid var(--line);
}

.post-card {
	padding: 26px 0;
	border-bottom: 1px solid var(--line);
}

.post-card__title {
	font-size: 22px;
	margin-bottom: 6px;
}

.post-card__title a {
	text-decoration: none;
}

.post-card__title a:hover {
	color: var(--accent);
}

.post-card__meta {
	margin: 0 0 10px;
	font-size: 14px;
}

.post-card__body {
	margin: 0;
	color: var(--ink-soft);
}

.post__image {
	margin: 30px 0 0;
}

.pagination {
	margin-top: 36px;
	font-size: 15px;
}

.pagination .page-numbers {
	padding: 6px 11px;
	margin-right: 4px;
	border: 1px solid var(--line);
	border-radius: 8px;
	text-decoration: none;
}

.pagination .current {
	background: var(--ink);
	color: var(--paper);
	border-color: var(--ink);
}

.search {
	display: flex;
	gap: 8px;
	margin-top: 20px;
}

.search input {
	flex: 1;
	padding: 11px 14px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	font: inherit;
	font-size: 16px;
}

/* ---------------------------------------------------------------------------
   Footer
   --------------------------------------------------------------------------- */
.site-footer {
	border-top: 1px solid var(--line);
	padding: 56px 0 30px;
	background: var(--paper);
}

.site-footer__inner {
	display: flex;
	flex-wrap: wrap;
	gap: 40px;
	justify-content: space-between;
}

.site-footer__brand {
	max-width: 34ch;
}

.site-footer__brand .muted {
	margin: 14px 0 0;
	font-size: 15px;
}

.site-footer__links {
	display: flex;
	flex-wrap: wrap;
	gap: 36px;
	font-size: 15px;
}

.footer-menu a,
.site-footer__links a {
	text-decoration: none;
	color: var(--ink-soft);
}

.footer-menu a:hover,
.site-footer__links a:hover {
	color: var(--accent);
}

.footer-menu li {
	margin-bottom: 8px;
}

.site-footer__legal {
	margin-top: 44px;
	padding-top: 22px;
	border-top: 1px solid var(--line-soft);
	font-size: 14px;
}

.site-footer__legal p {
	margin: 0;
}

/* ---------------------------------------------------------------------------
   Print: someone will print the pricing to show a business partner.
   --------------------------------------------------------------------------- */
@media print {
	.site-header,
	.hero__actions,
	.cta,
	.site-footer__links {
		display: none;
	}

	body {
		font-size: 12pt;
	}

	.section {
		padding: 24px 0;
	}
}

/* ---------------------------------------------------------------------------
   Motion

   Three kinds, in order of how much they matter:

   1. Reveal on scroll. The classes are added by JavaScript, never in the
      markup, so with scripts blocked the page is simply visible rather than a
      column of invisible sections waiting for an observer that never runs.
   2. Hover and state feedback on anything clickable.
   3. One ambient loop in the hero, on the offline queue indicator, because it
      is the feature worth drawing an eye to.

   Every one of them is switched off under prefers-reduced-motion at the end of
   this file. That is not decoration: for a person with vestibular sensitivity,
   parallax and drift can cause actual nausea.
   --------------------------------------------------------------------------- */

/* --- Reveal on scroll ---------------------------------------------------- */
.rv {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
	will-change: opacity, transform;
}

.rv.in {
	opacity: 1;
	transform: none;
}

/* --- Hero entrance ------------------------------------------------------- */
@keyframes thq-rise {
	from {
		opacity: 0;
		transform: translateY(16px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

.hero__copy > *,
.hero .phone {
	animation: thq-rise 0.75s var(--ease) both;
}

.hero__copy > :nth-child(1) { animation-delay: 0.02s; }
.hero__copy > :nth-child(2) { animation-delay: 0.08s; }
.hero__copy > :nth-child(3) { animation-delay: 0.14s; }
.hero__copy > :nth-child(4) { animation-delay: 0.20s; }
.hero__copy > :nth-child(5) { animation-delay: 0.26s; }
.hero .phone { animation-delay: 0.18s; }

/* Cards land one after another, the way they would if the list were actually
   loading on the device. */
.mini,
.job {
	animation: thq-rise 0.55s var(--ease) both;
}

.mini:nth-child(1) { animation-delay: 0.38s; }
.mini:nth-child(2) { animation-delay: 0.44s; }
.mini:nth-child(3) { animation-delay: 0.50s; }
.job:nth-child(1) { animation-delay: 0.58s; }
.job:nth-child(2) { animation-delay: 0.66s; }
.job:nth-child(3) { animation-delay: 0.74s; }
.job:nth-child(4) { animation-delay: 0.82s; }

/* --- The offline queue indicator ----------------------------------------- */
@keyframes thq-pulse {
	0%, 100% {
		opacity: 1;
		transform: scale(1);
	}
	50% {
		opacity: 0.4;
		transform: scale(0.82);
	}
}

.job__dot--sync {
	background: var(--accent-bright);
	animation: thq-pulse 1.9s var(--ease) 1.4s infinite;
}

/* --- Header -------------------------------------------------------------- */
.site-header {
	transition: box-shadow 0.25s var(--ease), border-color 0.25s var(--ease);
}

.site-header.is-stuck {
	border-bottom-color: var(--line);
	box-shadow: 0 1px 24px -12px rgba(11, 11, 12, 0.25);
}

/* Underline grows from the left rather than appearing all at once. */
.nav__list a {
	position: relative;
	transition: color 0.16s var(--ease);
}

.nav__list a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -4px;
	height: 1.5px;
	background: var(--accent-bright);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.22s var(--ease);
}

.nav__list a:hover::after {
	transform: scaleX(1);
}

@media (max-width: 860px) {
	.nav__list a::after {
		display: none;
	}
}

/* --- Buttons ------------------------------------------------------------- */
.btn {
	transition:
		transform 0.18s var(--ease),
		background 0.18s var(--ease),
		box-shadow 0.18s var(--ease),
		border-color 0.18s var(--ease),
		color 0.18s var(--ease);
}

.btn:hover {
	background: var(--accent-bright);
	border-color: var(--accent-bright);
	transform: translateY(-1px);
	box-shadow: 0 10px 22px -14px rgba(249, 115, 22, 0.9);
}

.btn:active {
	transform: translateY(0);
}

.btn--ghost:hover {
	background: var(--orange-soft);
	border-color: var(--accent-bright);
	color: var(--accent);
	box-shadow: none;
}

/* --- Cards and rows ------------------------------------------------------ */
.card,
.plan,
.tags__item {
	transition:
		transform 0.22s var(--ease),
		border-color 0.25s var(--ease),
		box-shadow 0.25s var(--ease),
		background 0.25s var(--ease);
}

.card:hover {
	transform: translateY(-2px);
	border-color: #DEDBD7;
	box-shadow: 0 18px 40px -28px rgba(11, 11, 12, 0.45);
}

.plan:hover {
	transform: translateY(-2px);
	box-shadow: 0 22px 46px -30px rgba(11, 11, 12, 0.5);
}

.tags__item:hover {
	border-color: var(--accent-bright);
	background: var(--orange-soft);
	color: var(--accent);
}

.stat {
	transition: border-color 0.25s var(--ease);
}

.stat:hover {
	border-top-color: var(--accent-bright);
}

.list__item {
	transition: background 0.25s var(--ease);
}

.list__item:hover {
	background: rgba(249, 115, 22, 0.04);
}

/* --- Questions ----------------------------------------------------------- */
@keyframes thq-answer {
	from {
		opacity: 0;
		transform: translateY(-4px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

.faq__q {
	transition: color 0.16s var(--ease);
}

.faq__q:hover {
	color: var(--accent);
}

/* A plus that turns into a cross reads as one object moving, where swapping
   the character for a minus reads as two different marks. */
.faq__q::after {
	content: "+";
	transition: transform 0.28s var(--ease), color 0.2s var(--ease);
}

.faq__item[open] .faq__q::after {
	content: "+";
	transform: rotate(45deg);
}

.faq__item[open] .faq__a {
	animation: thq-answer 0.3s var(--ease) both;
}

/* --- Everything above, switched off -------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}

	.rv {
		opacity: 1;
		transform: none;
	}
}

/* ===========================================================================
   Interior pages
   ======================================================================== */

.section--top {
	padding-bottom: 0;
}

.page__title {
	max-width: 20ch;
	margin: 10px 0 0;
	font-size: clamp(34px, 5vw, 54px);
	font-weight: 660;
	letter-spacing: -0.035em;
	line-height: 1.06;
}

.page__lead {
	max-width: 62ch;
	margin: 20px 0 0;
	font-size: 19px;
	line-height: 1.6;
	color: var(--ink-soft);
}

.center {
	text-align: center;
}

.cta-row {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 28px;
}

.center .cta-row {
	justify-content: center;
}

.link--arrow::after {
	content: " →";
}

/* ===========================================================================
   Currency switcher

   A control, not a guess with no way out. It is always visible even when the
   browser language matched, because a visitor who cannot see how to change the
   currency assumes they cannot.
   ======================================================================== */

.switcher {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin-top: 34px;
}

.switcher__label {
	margin-right: 4px;
	font-size: 13px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--muted);
}

.switcher__btn {
	padding: 7px 13px;
	font: inherit;
	font-size: 13.5px;
	font-weight: 560;
	letter-spacing: 0.02em;
	color: var(--ink-soft);
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: 999px;
	cursor: pointer;
	transition: border-color 0.15s var(--ease), color 0.15s var(--ease);
}

.switcher__btn:hover {
	border-color: var(--muted);
}

.switcher__btn.is-on {
	color: var(--paper);
	background: var(--ink);
	border-color: var(--ink);
}

/*
   With no JavaScript the buttons cannot do anything, so they are hidden and the
   full price table below carries the information instead. A row of dead
   controls is worse than no controls.
*/
html:not(.has-js) .switcher {
	display: none;
}

html:not(.has-js) .all-prices {
	margin-top: 34px;
}

html:not(.has-js) .all-prices > summary {
	display: none;
}

/* ===========================================================================
   Plans
   ======================================================================== */

.plan__flag {
	display: inline-block;
	margin: 0 0 10px;
	padding: 4px 10px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--accent);
	background: var(--accent-wash);
	border-radius: 999px;
}

.plan__seats {
	margin: 0 0 4px;
	font-size: 14.5px;
	font-weight: 560;
	color: var(--ink);
}

.plan__note {
	margin: 16px 0 0;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--muted);
}

.all-prices {
	margin-top: 34px;
	padding: 18px 20px;
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: 12px;
}

.all-prices > summary {
	font-size: 15px;
	font-weight: 560;
	cursor: pointer;
}

.all-prices .table {
	margin-top: 18px;
}

/* ===========================================================================
   Tables
   ======================================================================== */

.table-scroll {
	margin-top: 34px;
	overflow-x: auto;
	/* So a wide table on a phone is obviously scrollable rather than cut off. */
	-webkit-overflow-scrolling: touch;
}

.table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15.5px;
}

.table th,
.table td {
	padding: 13px 16px;
	text-align: left;
	border-bottom: 1px solid var(--line-soft);
	vertical-align: top;
}

.table thead th {
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--muted);
	border-bottom-color: var(--line);
	white-space: nowrap;
}

.table tbody th {
	font-weight: 600;
	white-space: nowrap;
}

.table tbody th .muted {
	display: block;
	font-size: 13px;
	font-weight: 400;
}

.table .num {
	font-variant-numeric: tabular-nums;
	font-weight: 560;
	white-space: nowrap;
}

/* Our own row, marked without shouting. */
.table--compare .is-us {
	background: var(--accent-wash);
}

.table--compare .is-us th,
.table--compare .is-us td {
	border-bottom-color: rgba(194, 65, 12, 0.18);
}

.table--compare .is-us th[scope="row"] {
	color: var(--accent);
}

.sources {
	margin-top: 22px;
}

.sources__list {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 20px;
	margin: 8px 0 0;
	padding: 0;
	list-style: none;
	font-size: 14.5px;
}

/* ===========================================================================
   Cards and groups
   ======================================================================== */

.cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: var(--gap);
	margin-top: 40px;
}

.cards--tight {
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 16px;
}

.card__tag {
	margin: 0 0 8px;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--accent);
}

.card__proof {
	margin: 14px 0 0;
	padding-top: 14px;
	border-top: 1px solid var(--line-soft);
	font-size: 14px;
	line-height: 1.5;
	color: var(--muted);
}

.card--quiet {
	background: transparent;
	box-shadow: none;
}

.card--price {
	position: sticky;
	top: 96px;
}

.groups {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: var(--gap);
	margin-top: 40px;
}

.group__title {
	margin: 0;
	font-size: 21px;
	font-weight: 620;
	letter-spacing: -0.02em;
}

.group__lead {
	margin: 6px 0 18px;
	font-size: 15.5px;
	color: var(--muted);
}

.ticks {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ticks li {
	position: relative;
	padding: 7px 0 7px 26px;
	font-size: 15.5px;
	line-height: 1.55;
	color: var(--ink-soft);
}

.ticks li::before {
	content: "";
	position: absolute;
	left: 3px;
	top: 15px;
	width: 9px;
	height: 5px;
	border-left: 2px solid var(--accent);
	border-bottom: 2px solid var(--accent);
	transform: rotate(-45deg);
}

.ticks--lg li {
	font-size: 16.5px;
	padding-top: 9px;
	padding-bottom: 9px;
}

.ticks--lg li::before {
	top: 18px;
}

/* ===========================================================================
   Devices

   Frames, not photographs. A CSS frame is a few hundred bytes; a rendered
   mockup of a hand holding a phone is half a megabyte and tells the reader
   nothing they did not already know about phones.
   ======================================================================== */

.tabs {
	margin-top: 40px;
}

.tabs__list {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	justify-content: center;
}

.tabs__tab {
	padding: 9px 18px;
	font: inherit;
	font-size: 15px;
	font-weight: 560;
	color: var(--ink-soft);
	background: transparent;
	border: 1px solid var(--line);
	border-radius: 999px;
	cursor: pointer;
	transition: border-color 0.15s var(--ease), background 0.15s var(--ease);
}

.tabs__tab.is-on {
	color: var(--paper);
	background: var(--ink);
	border-color: var(--ink);
}

/* With no script every panel shows, stacked. Longer, and complete. */
html:not(.has-js) .tabs__list {
	display: none;
}

/*
   A panel hidden with the  attribute must actually be hidden. The
   attribute is display:none in the browser's own stylesheet, and any author
   rule that sets display beats it — so without this line the tabs render every
   panel at once and look broken the moment the script runs.
*/
.tabs__panel[hidden] {
	display: none;
}

.tabs__panel {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	align-items: center;
	gap: 48px;
	margin-top: 40px;
}

.device__frame {
	background: var(--ink);
	box-shadow:
		0 2px 4px rgba(11, 11, 12, 0.1),
		0 40px 80px -40px rgba(11, 11, 12, 0.45);
}

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

.device--phone .device__frame {
	max-width: 300px;
	margin: 0 auto;
	padding: 9px;
	border-radius: 40px;
}

.device--phone .device__shot {
	border-radius: 32px;
}

.device--tablet .device__frame {
	max-width: 480px;
	margin: 0 auto;
	padding: 12px;
	border-radius: 24px;
}

.device--tablet .device__shot {
	border-radius: 14px;
}

/* The laptop lid: a bar under the screen, which is enough to read as one. */
.device--desktop .device__frame {
	padding: 10px 10px 0;
	border-radius: 12px 12px 0 0;
}

.device--desktop .device__shot {
	border-radius: 4px 4px 0 0;
}

.device--desktop {
	position: relative;
}

.device--desktop::after {
	content: "";
	display: block;
	height: 12px;
	margin: 0 -16px;
	background: var(--ink-2);
	border-radius: 0 0 12px 12px;
}

.device__title {
	margin: 0;
	font-size: 26px;
	font-weight: 640;
	letter-spacing: -0.025em;
}

.device__body {
	margin: 12px 0 0;
	font-size: 17px;
	line-height: 1.6;
	color: var(--ink-soft);
}

.device__meta {
	margin: 16px 0 0;
	font-size: 13.5px;
	color: var(--muted);
}

/* ===========================================================================
   The tour
   ======================================================================== */

.tour {
	margin-top: 44px;
}

.tour__step {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: 48px;
	padding: 44px 0;
	border-top: 1px solid var(--line);
}

.tour__step:first-child {
	border-top: 0;
	padding-top: 0;
}

.tour__step--flip .tour__copy {
	order: 2;
}

.tour__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	margin: 0 0 14px;
	font-size: 15px;
	font-weight: 620;
	color: var(--paper);
	background: var(--ink);
	border-radius: 50%;
}

.tour__title {
	margin: 0;
	font-size: 27px;
	font-weight: 640;
	letter-spacing: -0.025em;
}

.tour__body {
	margin: 12px 0 0;
	font-size: 17px;
	line-height: 1.65;
	color: var(--ink-soft);
}

.tour__shot img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--line);
	border-radius: 14px;
	box-shadow: 0 24px 50px -30px rgba(11, 11, 12, 0.4);
}

.tour__shot--phone img {
	max-width: 280px;
	margin: 0 auto;
	border-radius: 22px;
}

/* ===========================================================================
   The price bars
   ======================================================================== */

.bars {
	max-width: 720px;
	margin: 40px auto 0;
}

.bar {
	display: grid;
	grid-template-columns: 130px 1fr 108px;
	align-items: center;
	gap: 14px;
	padding: 9px 0;
}

.bar__name {
	font-size: 15.5px;
	font-weight: 560;
}

.bar__track {
	height: 26px;
	background: var(--line-soft);
	border-radius: 6px;
	overflow: hidden;
}

.bar__fill {
	display: block;
	height: 100%;
	background: var(--muted);
	border-radius: 6px;
}

.bar--us .bar__fill {
	background: var(--accent-bright);
}

.bar--us .bar__name,
.bar--us .bar__value {
	color: var(--accent);
	font-weight: 620;
}

.bar__value {
	font-size: 15px;
	font-variant-numeric: tabular-nums;
	text-align: right;
	color: var(--ink-soft);
}

/* ===========================================================================
   Split layouts
   ======================================================================== */

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

.split__side {
	display: grid;
	gap: 16px;
}

.pricelet {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 2px 12px;
	padding: 12px 0;
	border-bottom: 1px solid var(--line-soft);
}

.pricelet__name {
	font-weight: 600;
}

.pricelet__price {
	font-weight: 620;
	font-variant-numeric: tabular-nums;
	text-align: right;
}

.pricelet__seats {
	grid-column: 1 / -1;
	font-size: 13.5px;
	color: var(--muted);
}

/* ===========================================================================
   Forms
   ======================================================================== */

.form {
	max-width: 640px;
}

.form__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.field {
	display: block;
	margin-bottom: 16px;
}

.field__label {
	display: block;
	margin-bottom: 6px;
	font-size: 14.5px;
	font-weight: 560;
}

.field__hint {
	margin-left: 6px;
	font-weight: 400;
	color: var(--muted);
}

.field input,
.field select,
.field textarea {
	width: 100%;
	padding: 11px 13px;
	font: inherit;
	font-size: 16px; /* Under 16px, iOS zooms the page on focus. */
	color: var(--ink);
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: 10px;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
	outline: 2px solid var(--accent);
	outline-offset: 1px;
	border-color: transparent;
}

.field textarea {
	resize: vertical;
}

/*
   The honeypot. Moved off screen rather than display:none — some bots skip
   fields that are explicitly hidden, and this is invisible either way.
*/
.hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.form__note {
	margin: 16px 0 0;
	font-size: 14px;
	color: var(--muted);
	max-width: 52ch;
}

.notice {
	margin-bottom: 24px;
	padding: 14px 16px;
	border-radius: 10px;
	font-size: 15.5px;
	line-height: 1.55;
}

.notice--good {
	color: #14532D;
	background: #ECFDF3;
	border: 1px solid #A6E9C0;
}

.notice--bad {
	color: #7A271A;
	background: #FEF3F2;
	border: 1px solid #F5B5AE;
}

/* ===========================================================================
   Narrower screens
   ======================================================================== */

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

	.split,
	.tabs__panel,
	.tour__step {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	/* Flipped rows go back to copy-then-picture, or the reading order breaks. */
	.tour__step--flip .tour__copy {
		order: 0;
	}

	.card--price {
		position: static;
	}
}

@media (max-width: 640px) {
	.form__row {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.bar {
		grid-template-columns: 96px 1fr 84px;
		gap: 10px;
		font-size: 14px;
	}

	.page__lead {
		font-size: 17.5px;
	}

	.table th,
	.table td {
		padding: 11px 12px;
	}
}

/* ===========================================================================
   Legal pages

   Long documents, read by somebody looking for one specific paragraph. So:
   a contents list at the top, generous line height, and headings with enough
   space above them to be findable by scrolling rather than only by reading.
   ======================================================================== */

.legal__meta {
	margin-top: 18px;
	font-size: 14px;
	color: var(--muted);
}

.legal__toc {
	margin-bottom: 48px;
	padding: 24px 28px;
	background: var(--sand);
	border: 1px solid var(--line);
	border-radius: 12px;
}

.legal__toc-title {
	margin: 0 0 12px;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--muted);
}

.legal__toc ol {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: toc;
	columns: 2;
	column-gap: 32px;
}

.legal__toc li {
	counter-increment: toc;
	break-inside: avoid;
	padding: 4px 0;
}

.legal__toc a {
	font-size: 14.5px;
	line-height: 1.45;
	color: var(--ink-soft);
	text-decoration: none;
}

.legal__toc a::before {
	content: counter(toc) ".";
	display: inline-block;
	width: 22px;
	color: var(--muted);
	font-variant-numeric: tabular-nums;
}

.legal__toc a:hover {
	color: var(--accent);
	text-decoration: underline;
}

.legal__section {
	/*
	 * Scroll margin, so that following a link from the contents list does not
	 * put the heading underneath the sticky header — which is the single most
	 * common way an anchored contents list is broken.
	 */
	scroll-margin-top: 86px;
	padding-top: 34px;
}

.legal__section + .legal__section {
	margin-top: 8px;
	border-top: 1px solid var(--line-soft);
}

.legal h2 {
	margin: 0 0 14px;
	font-size: 24px;
	font-weight: 640;
	letter-spacing: -0.022em;
}

.legal h3 {
	margin: 30px 0 10px;
	font-size: 17px;
	font-weight: 620;
}

.legal p,
.legal li {
	font-size: 16.5px;
	line-height: 1.72;
	color: var(--ink-soft);
}

.legal ul {
	margin: 0 0 1em;
	padding: 0;
	list-style: none;
}

.legal ul li {
	position: relative;
	padding: 5px 0 5px 22px;
}

.legal ul li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 15px;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--muted);
}

.legal strong {
	color: var(--ink);
}

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

.legal table {
	width: 100%;
	margin: 20px 0 24px;
	border-collapse: collapse;
	font-size: 15px;
	/* Long documents on a phone: let a wide table scroll rather than squash. */
	display: block;
	overflow-x: auto;
}

.legal table th,
.legal table td {
	padding: 11px 14px;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--line-soft);
	line-height: 1.55;
	color: var(--ink-soft);
}

.legal table thead th {
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--muted);
	border-bottom-color: var(--line);
	white-space: nowrap;
}

@media (max-width: 640px) {
	.legal__toc ol {
		columns: 1;
	}

	.legal__toc {
		padding: 20px;
	}

	.legal h2 {
		font-size: 21px;
	}
}