/*
Theme Name: Pressline App
Theme URI: https://nerdsmodo.com
Author: NerdsModo Private Limited
Author URI: https://nerdsmodo.com
Description: A website theme for an iPhone app, made from Pressline 1.0.52. A home page built from the page's own sections under a top section styled like the app's screen, plus page, Support and Supported currencies layouts. Fluid and Fluid HD, Auto, Light and Dark, Share and Copy Link from Pressline. Built for VoiceOver from the start, with AAA text contrast, 44-point touch targets and no tracking.
Version: 1.2.6
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 7.4
License: Proprietary
License URI: https://nerdsmodo.com/license
Text Domain: pressline-app
*/

/* ── Tokens. Colours come from the NoteTell app icon: wine red and banknote cream.
   Every text colour is at least 7 to 1 on its background (WCAG AAA), in light and dark. ── */
:root {
	--bg: #fff;
	--surface: #f8f3ef;
	--text: #1f0d13;
	--muted: #4a3b40;
	--link: #780e31;
	--btn: #780e31;
	--btn-text: #fff;
	--border: #6f5d62;
	--yes: #0b5a2b;
	--no: #7a1f12;
	--focus: #780e31;
	--accent: #780e31;
	--cream: #f5e8d3;
	--cream-soft: #f6e9e3;
	--wine-grad: linear-gradient(180deg, #7d1638 0%, #320513 100%);
	--shadow: 50 5 19;
	--line: #eadfd9;
	--radius: 14px;
	--radius-lg: 28px;
	--wrap: 72rem;
	--narrow: 46rem;
	--measure: 68ch;
	--space: clamp(3.5rem, 2rem + 5vw, 7rem);
	--ff: -apple-system, blinkmacsystemfont, "SF Pro Text", "Segoe UI", roboto, "Helvetica Neue", arial, sans-serif;

	color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--bg: #15090c;
		--surface: #1f1014;
		--text: #f7eef0;
		--muted: #d9c6cb;
		--link: #f3b8c8;
		--btn: #f3b8c8;
		--btn-text: #2a0712;
		--border: #a18990;
		--yes: #8fe0a8;
		--no: #ffb4a6;
		--focus: #f3b8c8;
		--accent: #f5e8d3;
		--cream-soft: #2c1419;
		--shadow: 0 0 0;
		--line: #3a2228;
	}
}

:root[data-theme="dark"] {
	--bg: #15090c;
	--surface: #1f1014;
	--text: #f7eef0;
	--muted: #d9c6cb;
	--link: #f3b8c8;
	--btn: #f3b8c8;
	--btn-text: #2a0712;
	--border: #a18990;
	--yes: #8fe0a8;
	--no: #ffb4a6;
	--focus: #f3b8c8;
	--accent: #f5e8d3;
	--cream-soft: #2c1419;
	--shadow: 0 0 0;
	--line: #3a2228;

	color-scheme: dark;
}

:root[data-theme="light"] { color-scheme: light; }

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

html {
	/* Safari on iPhone reads only the prefixed name. */
	-webkit-text-size-adjust: 100%; /* stylelint-disable-line property-no-vendor-prefix */
	text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: var(--ff);
	font-size: 1.125rem;
	line-height: 1.6;
	overflow-wrap: break-word;
}

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

h1,
h2,
h3 {
	text-wrap: balance;
	line-height: 1.25;
	margin: 0 0 .6em;
	color: var(--text);
}

h1 {
	font-size: clamp(2rem, 1.4rem + 2.6vw, 3rem);
	letter-spacing: -.01em;
}
h2 { font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem); }
h3 { font-size: 1.25rem; }

p { margin: 0 0 1em; }

a {
	color: var(--link);
	text-decoration-thickness: .08em;
	text-underline-offset: .18em;
}
a:hover { text-decoration-thickness: .16em; }

:focus-visible {
	outline: 3px solid var(--focus);
	outline-offset: 3px;
	border-radius: 4px;
}

[tabindex="-1"]:focus { outline: none; }

.sr-only,
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	left: 1rem;
	top: -10rem;
	z-index: 100;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: .5rem 1rem;
	background: var(--btn);
	color: var(--btn-text);
	border-radius: 8px;
	font-weight: 700;
}

.skip-link:focus { top: 1rem; }

.wrap {
	width: 100%;
	max-width: var(--wrap);
	margin: 0 auto;
	padding: 0 1.25rem;
}
.wrap.narrow { max-width: var(--narrow); }

/* ── Header ── */
.site-header {
	border-bottom: 1px solid var(--border);
	background: var(--bg);
}

.site-header-in {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .25rem 1.5rem;
	padding-top: .5rem;
	padding-bottom: .5rem;
}

.brand {
	display: inline-flex;
	align-items: center;
	gap: .75rem;
	min-height: 48px;
	color: var(--text);
	text-decoration: none;
	font-weight: 700;
	font-size: 1.25rem;
}

.brand-icon {
	border-radius: 22%;
	width: 40px;
	height: 40px;
}

.menu,
.footer-menu,
.social,
.tag-list,
.cur-tiles,
.chips,
.pl-steps {
	list-style: none;
	margin: 0;
	padding: 0;
}

.menu {
	display: flex;
	flex-wrap: wrap;
	gap: 0 .25rem;
	margin-left: -.75rem;
}

.menu a {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	min-width: 44px;
	padding: 0 .75rem;
	color: var(--text);
	font-weight: 600;
	text-decoration: none;
	border-radius: 8px;
}

.menu a:hover { text-decoration: underline; }

.menu a[aria-current="page"] {
	text-decoration: underline;
	text-decoration-thickness: .16em;
}

/* ── Buttons ── */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .6rem;
	min-height: 52px;
	min-width: 44px;
	padding: .65rem 1.4rem;
	border: 2px solid var(--btn);
	border-radius: 999px;
	font: inherit;
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}

.btn-primary {
	background: var(--btn);
	color: var(--btn-text);
}
.btn-primary:hover { text-decoration: underline; }

.btn-secondary {
	background: transparent;
	color: var(--link);
	border-color: var(--link);
}
.btn-secondary:hover { background: var(--surface); }

.btn-soon {
	border-style: dashed;
	border-color: var(--border);
	color: var(--text);
	margin: 0;
}

.btn-ico {
	flex: none;
	width: 24px;
	height: 24px;
}

.text-link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-weight: 600;
}

/* ── Main ── */
.site-main { padding: 2.5rem 0 3.5rem; }
.site-main.home { padding: 0; }

/* Paragraphs keep a comfortable reading width at every width, Fluid HD included. */
.home-content p,
.entry-content p,
.entry-content li { max-width: var(--measure); }

/* ── Home: top section ── */
.hero {
	background: var(--surface);
	background:
		radial-gradient(60rem 32rem at 82% 20%, color-mix(in srgb, var(--link) 12%, transparent), transparent 70%),
		var(--surface);
	border-bottom: 1px solid var(--line);
}

.hero-in {
	display: grid;
	gap: clamp(2rem, 1rem + 4vw, 4rem);
	align-items: center;
	padding-top: clamp(2.5rem, 1.5rem + 4vw, 5.5rem);
	padding-bottom: clamp(2.5rem, 1.5rem + 4vw, 5.5rem);
}

.hero-icon {
	width: 72px;
	height: 72px;
	border-radius: 22%;
	margin-bottom: 1.25rem;
	box-shadow: 0 6px 18px rgb(var(--shadow) / 18%);
}

.hero h1 {
	margin-bottom: .2em;
	font-size: clamp(2.75rem, 1.7rem + 4.4vw, 4.75rem);
	font-weight: 800;
	letter-spacing: -.025em;
	line-height: 1.05;
}

/* The tagline is a paragraph (a subtitle is not a heading), styled to look exactly as before. */
.hero .tagline {
	margin: 0 0 .9em;
	color: var(--text);
	text-wrap: balance;
	max-width: 22ch;
	font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.35rem);
	font-weight: 700;
	letter-spacing: -.015em;
	line-height: 1.2;
}

.intro {
	max-width: var(--measure);
	font-size: clamp(1.125rem, 1.05rem + .3vw, 1.3rem);
	color: var(--muted);
}

.cta {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: .75rem;
	margin: 1.25rem 0 0;
}

.price-note {
	margin: 0;
	color: var(--muted);
	font-size: 1rem;
}

/* Without the picture beside it, the top section is one centred column, led by a larger app icon. */
.hero-centred {
	background:
		radial-gradient(50rem 28rem at 50% 0%, color-mix(in srgb, var(--link) 12%, transparent), transparent 70%),
		var(--surface);
}

/* Long text reads best left-aligned, with the headings above it on the same edge. The column sits
   in the middle of the page, at the same width and position as the text-only sections below it. */
.hero-in.hero-single > .hero-text {
	width: 100%;
	max-width: var(--measure);
	margin-inline: auto;
}

.hero-single .hero-icon {
	width: clamp(96px, 80px + 4vw, 128px);
	height: clamp(96px, 80px + 4vw, 128px);
	margin: 0 0 1.5rem;
	box-shadow: 0 10px 28px rgb(var(--shadow) / 22%);
}



/* The picture beside the headline: a real app screenshot in Apple's iPhone frame. */
.hero-visual {
	display: flex;
	justify-content: center;
}

.hero-shot,
.pl-shot {
	display: block;
	width: clamp(220px, 12rem + 8vw, 320px);
	max-width: 100%;
	height: auto;
}

.pl-shot {
	width: clamp(200px, 10rem + 8vw, 300px);
}

/* ── Home: sections ── */
.band {
	padding: var(--space) 0;
	border-top: 1px solid var(--line);
}
.home-content > .band:first-child { border-top: 0; }

.band-alt { background: var(--surface); }

.band-in {
	display: grid;
	gap: clamp(1.5rem, 1rem + 2vw, 3rem);
	align-items: center;
}

.band h2 {
	font-size: clamp(1.75rem, 1.25rem + 2vw, 2.75rem);
	font-weight: 800;
	letter-spacing: -.02em;
	line-height: 1.12;
}

.band p {
	font-size: clamp(1.125rem, 1.07rem + .25vw, 1.25rem);
}

.band-text > :last-child { margin-bottom: 0; }

/* A home section with text only: its column sits in the middle of the page, and the text stays
   left-aligned, which is easier to read. Sections with a picture, side by side, the currency list
   and the closing band keep their own layouts. */
.home-content .band:not(.band-split, .band-final, .band-currencies) > .wrap:not(.band-pair) > .band-text {
	max-width: var(--measure);
	margin-inline: auto;
}

.band-in > *,
.band-pair > * { min-width: 0; }

.band-pair .pl-visual {
	justify-content: flex-start;
	min-height: 0;
	margin-bottom: 1.25rem;
}

.band-pair .pl-icon {
	width: 6.5rem;
	padding: 1.1rem;
}

.band-pair {
	display: grid;
	gap: clamp(2.5rem, 1.5rem + 3vw, 4rem);
}

/* ── Visuals drawn in code ── */
.pl-visual {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 10rem;
	color: var(--accent);
}

.pl-icon {
	width: clamp(8rem, 6.5rem + 4vw, 11rem);
	height: auto;
	padding: clamp(1.25rem, 1rem + .8vw, 1.9rem);
	border-radius: 50%;
	background: var(--cream-soft);
}

.pl-visual-speed {
	flex-direction: column;
	gap: .25rem;
}

.pl-big {
	font-size: min(clamp(5rem, 3.5rem + 6vw, 8.5rem), 30vw);
	font-weight: 800;
	letter-spacing: -.05em;
	line-height: .9;
}

.pl-unit {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--text);
}

.pl-steps {
	display: grid;
	gap: 1rem;
	width: min(100%, 20rem);
	color: var(--text);
	font-weight: 700;
}

.pl-steps li {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: .9rem 1.1rem;
	border-radius: var(--radius);
	background: var(--bg);
	box-shadow: 0 1px 0 var(--line), 0 8px 24px -16px rgb(var(--shadow) / 35%);
}

.pl-step-n {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.4rem;
	height: 2.4rem;
	border-radius: 50%;
	background: var(--btn);
	color: var(--btn-text);
	font-weight: 800;
}

.pl-screen {
	max-width: 100%;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	padding: 1.75rem clamp(1rem, 6vw, 2.75rem);
	border-radius: var(--radius-lg);
	background: var(--wine-grad);
	color: #fff;
}

.pl-screen-value {
	font-size: min(clamp(4.5rem, 3.5rem + 4vw, 6.5rem), 24vw);
	font-weight: 800;
	letter-spacing: -.04em;
	line-height: 1;
}

.pl-screen-label {
	color: var(--cream);
	font-weight: 700;
}

/* ── Currency tiles (home) and banknote chips (Currencies page) ── */
.cur-tiles {
	display: grid;
	gap: .75rem;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
	margin: 1.5rem 0;
}

.cur-tiles li {
	margin: 0;
	padding: 1rem 1.25rem;
	border-radius: var(--radius);
	background: var(--bg);
	box-shadow: 0 1px 0 var(--line), 0 10px 26px -18px rgb(var(--shadow) / 40%);
}

.band-alt .cur-tiles li { background: var(--bg); }
.cur-tiles strong { display: block; }

.cur-card {
	margin: 0 0 1.25rem;
	padding: 1.5rem;
	border-radius: var(--radius);
	background: var(--surface);
}

.cur-card h2,
.entry-content .cur-card h2 { margin-top: 0; }
.cur-card p:last-child { margin-bottom: 0; }

.chips {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin: 0 0 1rem;
}

.entry-content .chips { padding: 0; }

.chips li {
	margin: 0;
	padding: .3rem .85rem;
	border-radius: 999px;
	background: var(--bg);
	border: 2px solid var(--line);
	font-size: 1.25rem;
	font-weight: 800;
	letter-spacing: -.01em;
}

.statement {
	margin: 0 0 1.5rem;
	padding-left: 1.25rem;
	border-left: 5px solid var(--accent);
	font-size: clamp(1.3rem, 1.1rem + .9vw, 1.75rem);
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: -.01em;
}

.chips-label {
	margin-bottom: .5rem;
	color: var(--muted);
	font-weight: 600;
}

/* World figures on About (decoration that repeats the text). */
.pl-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 2.5rem;
	margin: 0 0 1.5rem;
}

.pl-stats span {
	display: grid;
	color: var(--muted);
	font-weight: 600;
}

.pl-stats b {
	color: var(--accent);
	font-size: clamp(2.5rem, 2rem + 2vw, 3.5rem);
	font-weight: 800;
	letter-spacing: -.03em;
	line-height: 1.05;
}

/* ── Video ── */
.video-frame {
	margin: 1.5rem 0;
	overflow: hidden;
	border-radius: var(--radius-lg);
	background: #2a0712;
}

.video-frame video {
	display: block;
	width: 100%;
}

/* ── Share (from Pressline) ── */
.share-row {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	margin-top: 1.25rem;
}

/* ── Final band ── */
.band-final {
	background: var(--wine-grad);
	color: #fff;
	border-top: 0;
}

/* The closing band is wine in light and dark mode, like the icon, with white text (at least 10 to 1). */
.band-final h2,
.band-final p { color: #fff; }

.band-final .btn-primary {
	background: #fff;
	color: #780e31;
	border-color: #fff;
}

.band-final .btn-secondary {
	color: #fff;
	border-color: #fff;
}
.band-final .btn-secondary:hover { background: transparent; }

.band-final .btn-soon {
	border-color: #fff;
	color: #fff;
}

.band-final a:not(.btn) { color: #fff; }
.band-final :focus-visible { outline-color: #fff; }

/* ── Search form ── */
.search-form { margin: 1.5rem 0; }

.search-form label {
	display: block;
	font-weight: 700;
}

.checker-row {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
}

.checker-row input,
.post-password-form input[type="password"] {
	flex: 1 1 14rem;
	min-width: 0;
	min-height: 52px;
	padding: .5rem .9rem;
	border: 2px solid var(--border);
	border-radius: 10px;
	background: var(--bg);
	color: var(--text);
	font: inherit;
}

/* Password-protected posts: WordPress's form, sized for touch. */
.post-password-form label {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem .75rem;
	align-items: center;
	font-weight: 700;
}

.post-password-form input[type="submit"] {
	min-height: 52px;
	min-width: 44px;
	padding: .65rem 1.4rem;
	border: 2px solid var(--btn);
	border-radius: 999px;
	background: var(--btn);
	color: var(--btn-text);
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

/* ── Tables ── */
.pl-table-scroll {
	max-width: 100%;
	overflow-x: auto;
	margin: 0 0 1.25rem;
}

.entry-content table {
	width: 100%;
	border-collapse: collapse;
}

.entry-content th,
.entry-content td {
	padding: .75rem .9rem;
	border-bottom: 1px solid var(--border);
	text-align: left;
	vertical-align: top;
}

/* Links that are the whole content of a table cell get a full-size touch target. */
.entry-content td > a:only-child,
.entry-content th > a:only-child {
	display: inline-flex;
	align-items: center;
	min-width: 44px;
	min-height: 44px;
}

/* ── News ── */
.news-list {
	display: grid;
	gap: 1rem;
	margin-bottom: 1.5rem;
}

.news-card {
	padding: 1.25rem 1.5rem;
	border-radius: var(--radius);
	background: var(--surface);
}
.news-card-title { margin-bottom: .25rem; }

.news-card-title a {
	display: inline-flex;
	min-height: 44px;
	align-items: center;
	color: var(--text);
}

.news-card-excerpt {
	max-width: var(--measure);
	margin: 0;
	color: var(--muted);
}

.meta {
	color: var(--muted);
	font-size: 1rem;
	margin-bottom: .5rem;
}

.pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 1.5rem;
}

.page-count {
	margin: 0;
	color: var(--muted);
}

/* ── Entries ── */
.entry-header { margin-bottom: 1.5rem; }
.entry-image { margin: 0 0 1.5rem; }
.entry-image img { border-radius: var(--radius); }
.entry-content > * { max-width: 100%; }
.entry-content h2 { margin-top: 1.6em; }
.entry-content h3 { margin-top: 1.4em; }

.entry-content ul,
.entry-content ol { padding-left: 1.4em; }
.entry-content li { margin-bottom: .35em; }

.entry-content blockquote {
	margin: 1.5em 0;
	padding: .25em 0 .25em 1.25em;
	border-left: 4px solid var(--border);
	color: var(--muted);
}

.entry-content pre {
	max-width: 100%;
	overflow-x: auto;
	padding: 1rem;
	border-radius: 10px;
	background: var(--surface);
	font-size: 1rem;
}

.entry-content code { font-size: .95em; }
.entry-content img { border-radius: 8px; }

.entry-content iframe,
.entry-content embed,
.entry-content object { max-width: 100%; }

.alignleft {
	float: left;
	margin: .3em 1.25em 1em 0;
}

.alignright {
	float: right;
	margin: .3em 0 1em 1.25em;
}

.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.entry-content::after {
	content: "";
	display: table;
	clear: both;
}

.wp-caption-text,
.gallery-caption {
	color: var(--muted);
	font-size: 1rem;
}
.sticky { outline: 0; }
.bypostauthor { outline: 0; }

.gallery {
	display: grid;
	gap: .75rem;
	grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
}

/* Respect the gallery's own column setting, with two columns at most on small phones. */
.gallery-columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gallery-columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gallery-columns-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.gallery-columns-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.gallery br { display: none; }

@media (width < 430px) {
	.gallery[class*="gallery-columns-"]:not(.gallery-columns-1) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.gallery-item { margin: 0; }

/* The whole picture is the link, so its touch target is the picture's size. */
.gallery-icon a {
	display: block;
}

.gallery-icon img {
	display: block;
	width: 100%;
	height: auto;
}

.page-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .25rem;
	margin: 2rem 0;
}

.page-links a,
.page-links > .post-page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
}

.entry-footer {
	margin-top: 2rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--border);
}

.small-heading {
	font-size: 1rem;
	color: var(--muted);
}

.tag-list {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}

.tag-list a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 .9rem;
	border: 2px solid var(--border);
	border-radius: 999px;
	text-decoration: none;
}
.back { margin-top: 2rem; }

.contact-card {
	margin: 0 0 2rem;
	padding: 1.5rem;
	border-radius: var(--radius);
	background: var(--surface);
}
.contact-card .btn { overflow-wrap: anywhere; }
.result-count { color: var(--muted); }

/* ── Footer ── */
.site-footer {
	border-top: 1px solid var(--border);
	background: var(--surface);
}

.site-footer-in {
	display: grid;
	gap: 1.25rem;
	padding-top: 2rem;
	padding-bottom: 2rem;
}

.footer-about {
	margin: 0;
	max-width: var(--narrow);
	color: var(--muted);
}

.footer-menu {
	display: flex;
	flex-wrap: wrap;
	gap: 0 .25rem;
	margin-left: -.75rem;
}

.footer-menu a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 .75rem;
	font-weight: 600;
	overflow-wrap: anywhere;
}

.social {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}

.social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	color: var(--text);
	border: 2px solid var(--border);
}

.social-link svg {
	width: 22px;
	height: 22px;
}

/* Pressline's bracket controls: [ Fluid | Fluid HD ] [ Auto | Light | Dark ].
   The brackets and bars are drawn for sighted readers only; VoiceOver hears two
   named groups of buttons. Each button is at least 44 by 44 points. */
.ftr-toggles {
	display: flex;
	flex-wrap: wrap;
	gap: .25rem 1.25rem;
	align-items: center;
	color: var(--muted);
}
.ftr-toggles[hidden] { display: none; }

/* Controls that need a script are shown or hidden before the page is first drawn: a tiny script at
   the top of every page adds these classes at once, so nothing appears late and pushes the page down
   (layout shift). Without scripts, or on a device that can't share or copy, they stay hidden. */
html:not(.js) .ftr-toggles,
html:not(.can-share) .pressline-share-native,
html:not(.can-copy) .pressline-copy-link {
	display: none;
}

.tg {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
}

.tg .br {
	padding: 0 .15rem;
	color: var(--muted);
}

.tg button {
	min-height: 44px;
	min-width: 44px;
	padding: 0 .5rem;
	border: 0;
	border-radius: 6px;
	background: none;
	color: var(--link);
	font: inherit;
	font-size: 1rem;
	cursor: pointer;
}

.tg button:hover { text-decoration: underline; }

.tg button[aria-pressed="true"] {
	color: var(--text);
	font-weight: 800;
	text-decoration: underline;
	text-decoration-thickness: .14em;
	text-underline-offset: .25em;
}

.copyright {
	margin: 0;
	color: var(--muted);
	font-size: 1rem;
}

/* Apple's trademark credit line: under the copyright, at the site's minimum text size (14px) and full contrast. */
.legal-credit {
	max-width: var(--measure);
	margin: .4rem 0 0;
	font-size: .875rem;
	line-height: 1.5;
	color: var(--muted);
}

/* ── Wider screens ── */
/* Tablets upright and wider: text beside the phone picture. */
/* Phones: one column. A section's picture comes above its heading and sits at the left edge, as in
   the side-by-side VoiceOver and braille sections. The numbered steps are the exception: they sum up
   the text, so they stay after the text that introduces them. */
@media (width < 700px) {
	.band-split .band-in > .pl-visual:not(.pl-visual-steps) {
		order: -1;
		justify-content: flex-start;
	}

	/* The figure and the steps start at the same left edge as the text around them. */
	.pl-visual-speed { align-items: flex-start; }
	.pl-visual-steps { justify-content: flex-start; }
	/* The screenshot beside the headline follows the same left edge as the text above it,
	   like the screenshot in "Easier to read on screen". */
	.hero-visual { justify-content: flex-start; }
}

@media (width >= 700px) {
	.hero-in { grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr); }
	.hero-in.hero-single { grid-template-columns: minmax(0, 1fr); }
}

@media (width >= 782px) {
	.hero-in { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); }
	.hero-in.hero-single { grid-template-columns: minmax(0, 1fr); }
	.hero .tagline { max-width: 28ch; }
	.band-split .band-in { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
	.band-reverse .band-in > .pl-visual { order: -1; }
	.band-reverse .band-in { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
	.band-pair { grid-template-columns: 1fr 1fr; }
}

/* ── Phones and small tablets ── */
@media (width < 782px) {
	.hero-icon { display: none; }
	/* With no picture beside the headline, the large icon leads the page on phones too. */
	.hero-single .hero-icon { display: block; }

	.pl-visual { min-height: 0; }
	.band-split .pl-visual { margin-top: .5rem; }
}

@media (width < 430px) {
	.site-header-in { gap: .25rem .5rem; }

	.wrap {
		padding-left: 1rem;
		padding-right: 1rem;
	}

	.brand {
		gap: .5rem;
		font-size: 1.125rem;
	}

	.menu {
		margin-left: 0;
		margin-right: -.5rem;
	}
	.menu a { padding: 0 .5rem; }
}

/* ── Fluid HD (from Pressline): the layout widens to fill large screens. ── */
html.fluid {
	--wrap: 160rem;
}

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

html.fluid .wrap {
	padding-left: clamp(1.25rem, 4vw, 8rem);
	padding-right: clamp(1.25rem, 4vw, 8rem);
}

/* On large screens Fluid HD also scales everything up, so a meeting-room
   display or a 4K monitor is filled edge to edge without long lines. */
@media (width >= 1600px) {
	html.fluid { font-size: 118.75%; }
	html.fluid .cur-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (width >= 2200px) {
	html.fluid { font-size: 137.5%; }
}

/* ── Captions and images never push the page sideways on a phone ── */
figure { margin: 0 0 1.5em; }

.wp-caption {
	max-width: 100%;
	margin-left: 0;
	margin-right: 0;
}

/* Keep the gap between a floated captioned image and the text beside it, and centre centred ones. */
.wp-caption.alignleft { margin-right: 1.25em; }
.wp-caption.alignright { margin-left: 1.25em; }

.wp-caption.aligncenter {
	margin-left: auto;
	margin-right: auto;
}

.wp-caption img { height: auto; }

@media (width < 600px) {
	.alignleft,
	.alignright {
		float: none;
		margin-left: 0;
		margin-right: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition: none !important;
		animation: none !important;
		scroll-behavior: auto !important;
	}
}

@media (forced-colors: active) {
	.btn,
	.social-link { border-color: ButtonText; }

	.tg button[aria-pressed="true"] {
		forced-color-adjust: none;
		background: Highlight;
		color: HighlightText;
	}

	.pl-screen { border: 2px solid CanvasText; }
}

@media print {
	.site-header,
	.site-footer,
	.skip-link,
	.cta,
	.share-row,
	.hero-visual,
	.pl-visual,
	.band-final { display: none !important; }

	body {
		background: #fff;
		color: #000;
		font-size: 12pt;
	}

	a { color: #000; }
	.entry-content a[href^="http"]::after { content: " (" attr(href) ")"; }

	.band {
		padding: 1rem 0;
		border: 0;
	}

	.hero,
	.band-alt {
		background: none !important;
	}
}