/* Tool page template (mockup option C). Third-party icons and fonts: see THIRD-PARTY-NOTICES.txt.
   Only loaded on pages using the "Tool page" template.
   Every rule is scoped to .ph-tp or body.ph-tool-page, so the rest of the site is untouched. */

@font-face { font-family: "PH Barlow Condensed"; src: url(fonts/barlow-condensed-latin-600-normal.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "PH Barlow Condensed"; src: url(fonts/barlow-condensed-latin-700-normal.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "PH Plex Sans"; src: url(fonts/ibm-plex-sans-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "PH Plex Sans"; src: url(fonts/ibm-plex-sans-latin-500-normal.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "PH Plex Sans"; src: url(fonts/ibm-plex-sans-latin-600-normal.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "PH Plex Mono"; src: url(fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "PH Plex Mono"; src: url(fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2"); font-weight: 500; font-display: swap; }

body.ph-tool-page {
	--ph-night: #0d1117;
	--ph-night-2: #141a22;
	--ph-night-3: #1c2430;
	--ph-rule: rgba(255, 255, 255, 0.09);
	--ph-text: #e8ecef;
	--ph-dim: #96a0aa;
	--ph-stable: #47d95e;
	--ph-colorful: #9b82ff;
	--ph-spicy: #fd5a60;
	--ph-orange: #f8a525;
	--ph-ink: #1d2228;
	--ph-spice: linear-gradient(90deg, #47d95e, #7b5aff 50%, #fd5a60);
	--ph-wrap: 1210px;
	--ph-sans: "PH Plex Sans", "IBM Plex Sans", Arial, sans-serif;
	--ph-mono: "PH Plex Mono", "IBM Plex Mono", Consolas, monospace;
	--ph-display: "PH Barlow Condensed", "Barlow Condensed", "Arial Narrow", sans-serif;
}

body.ph-tool-page #main {
	background: var(--ph-night);
}

/* The site's Additional CSS pins the menu row (position: fixed at 1000px and up). Tool pages let
   it scroll away with the rest of the header; the sticky wrapper itself is removed in PHP. */
body.ph-tool-page [data-row="bottom:boxed"] .ct-container {
	position: static;
}

/* Header on tool pages: the site's own colours (ink logo bar, white menu row), but full width
   instead of Blocksy's boxed panel, so it doesn't float over the dark page. The colour moves
   from the boxed inner container to the full-width row. */
body.ph-tool-page #header [data-row*="middle"] {
	background: #1d2228;
}

body.ph-tool-page #header [data-row*="bottom"] {
	background: #fff;
}

body.ph-tool-page #header [data-row] > .ct-container {
	background: transparent;
}

.ph-tp {
	background: var(--ph-night);
	color: var(--ph-text);
	font: 400 17px/1.7 var(--ph-sans);
	overflow-x: clip;
}

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

/* Sections: full-width bands, content at the theme's width */
.ph-tp .ph-tp-sec {
	padding: 72px 16px;
	margin: 0;
}

.ph-tp .ph-tp-sec > * {
	max-width: var(--ph-wrap);
	margin-left: auto;
	margin-right: auto;
}

.ph-tp h1,
.ph-tp h2,
.ph-tp h3 {
	color: var(--ph-text);
	font-family: var(--ph-display);
	text-transform: uppercase;
	letter-spacing: 0;
	margin-top: 0;
}

.ph-tp h2 {
	font-size: clamp(36px, 4.4vw, 56px);
	font-weight: 700;
	line-height: 0.95;
	margin-bottom: 36px;
}

.ph-tp p {
	margin-top: 0;
}

.ph-tp a {
	color: var(--ph-orange);
}

.ph-tp .ph-tp-eyebrow {
	font: 500 12px/1 var(--ph-mono);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ph-dim);
	margin-bottom: 12px;
}

/* Hero */
.ph-tp .ph-tp-hero {
	position: relative;
	padding-top: 64px;
	padding-bottom: 72px;
}

.ph-tp .ph-tp-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: linear-gradient(var(--ph-rule) 1px, transparent 1px), linear-gradient(90deg, var(--ph-rule) 1px, transparent 1px);
	background-size: 100% 28px, 56px 100%;
	-webkit-mask-image: radial-gradient(ellipse 70% 80% at 70% 40%, #000 20%, transparent 75%);
	mask-image: radial-gradient(ellipse 70% 80% at 70% 40%, #000 20%, transparent 75%);
	opacity: 0.6;
	pointer-events: none;
}

.ph-tp .ph-tp-hero > * {
	position: relative;
}

.ph-tp .ph-tp-hero .wp-block-columns {
	gap: 48px;
	align-items: center;
	margin-bottom: 0;
}

.ph-tp .ph-tp-hero h1 {
	font-size: clamp(52px, 7.4vw, 104px);
	font-weight: 700;
	line-height: 0.9;
	margin: 18px 0 20px;
}

/* Bold text in the H1 gets the spice gradient; italic text becomes the small grey line */
.ph-tp .ph-tp-hero h1 strong {
	font-weight: 700;
	background: var(--ph-spice);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.ph-tp .ph-tp-hero h1 em {
	display: block;
	font-style: normal;
	font-size: 0.42em;
	font-weight: 600;
	letter-spacing: 0.14em;
	color: var(--ph-dim);
	margin-top: 10px;
}

.ph-tp .ph-tp-lead {
	color: #c3cad0;
	font-size: 19px;
	max-width: 40ch;
	margin-bottom: 28px;
}

.ph-tp .wp-block-buttons {
	margin-bottom: 0;
}

.ph-tp .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: var(--ph-orange);
	color: var(--ph-ink);
	font: 600 16px/1 var(--ph-sans);
	padding: 16px 22px;
	border-radius: 10px;
	border: 0;
	text-decoration: none;
	box-shadow: 0 0 0 1px rgba(248, 165, 37, 0.4), 0 10px 30px rgba(248, 165, 37, 0.25);
}

.ph-tp .wp-block-button__link:hover {
	background: #ffb53d;
	color: var(--ph-ink);
}

.ph-tp ul.ph-tp-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
	list-style: none;
	padding: 0;
	margin: 22px 0 0;
	font: 500 12px/1.4 var(--ph-mono);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ph-dim);
}

.ph-tp ul.ph-tp-meta li::before {
	content: "● ";
	color: var(--ph-stable);
}

/* The animated roll (built by tool-page.js) */
.ph-tp .ph-tp-roll {
	background: linear-gradient(180deg, var(--ph-night-2), #10151c);
	border: 1px solid var(--ph-rule);
	border-radius: 18px;
	padding: 18px;
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}

.ph-tp .ph-tp-roll-top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	margin-bottom: 12px;
}

.ph-tp .ph-tp-roll-label {
	font: 500 12px/1.3 var(--ph-mono);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ph-dim);
}

.ph-tp .ph-tp-lvl {
	display: flex;
	gap: 4px;
	background: #0b0f14;
	border-radius: 8px;
	padding: 3px;
	flex: none;
}

.ph-tp .ph-tp-lvl span {
	font: 500 11px/1 var(--ph-mono);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 7px 9px;
	border-radius: 6px;
	color: var(--ph-dim);
	transition: background 0.3s, color 0.3s;
}

.ph-tp .ph-tp-lvl span.on[data-l="stable"] { background: rgba(71, 217, 94, 0.16); color: var(--ph-stable); }
.ph-tp .ph-tp-lvl span.on[data-l="colorful"] { background: rgba(155, 130, 255, 0.18); color: var(--ph-colorful); }
.ph-tp .ph-tp-lvl span.on[data-l="spicy"] { background: rgba(253, 90, 96, 0.16); color: var(--ph-spicy); }

.ph-tp .ph-tp-roll svg {
	display: block;
	width: 100%;
	height: auto;
}

.ph-tp .ph-tp-note { fill: #e8ecef; opacity: 0.35; transition: opacity 0.15s, fill 0.15s; }
.ph-tp .ph-tp-note.hit { opacity: 1; fill: #fff; filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.7)); }
.ph-tp .ph-tp-ph { stroke: var(--ph-orange); stroke-width: 2; filter: drop-shadow(0 0 4px var(--ph-orange)); }

.ph-tp .ph-tp-cbar,
.ph-tp .ph-tp-demo {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 8px;
}

.ph-tp .ph-tp-cbar {
	margin-top: 10px;
}

.ph-tp .ph-tp-chord {
	position: relative;
	background: var(--ph-night-3);
	border-radius: 10px;
	padding: 18px 6px 12px;
	text-align: center;
	opacity: 0.25;
	transform: translateY(4px);
	transition: opacity 0.35s, transform 0.35s;
}

.ph-tp .ph-tp-chord.on,
.ph-tp .ph-tp-demo .ph-tp-chord {
	opacity: 1;
	transform: none;
}

.ph-tp .ph-tp-chord::before {
	content: "";
	position: absolute;
	top: 6px;
	left: 50%;
	width: 40px;
	margin-left: -20px;
	height: 4px;
	border-radius: 2px;
	background: var(--c, #555);
	box-shadow: 0 0 10px var(--c, transparent);
}

.ph-tp .ph-tp-chord b {
	display: block;
	font: 700 26px/1 var(--ph-display);
	color: var(--ph-text);
}

.ph-tp .ph-tp-chord .ph-tp-sfx {
	font-size: 0.6em;
	font-weight: 600;
	margin-left: 1px;
}

.ph-tp .ph-tp-chord i {
	display: block;
	font: 400 11px/1.2 var(--ph-mono);
	font-style: normal;
	color: var(--ph-dim);
	margin-top: 6px;
}

/* Steps (signal flow), 2 to 6 of them; the pattern ships with five. Each step is a group with an
   icon class: ph-ico-notes, ph-ico-sharp, ph-ico-chilli, ph-ico-swap, ph-ico-download,
   ph-ico-metronome, ph-ico-sliders, ph-ico-copy */
.ph-tp .ph-tp-chain {
	padding-top: 24px;
	padding-bottom: 88px;
}

.ph-tp .ph-tp-flow {
	--steps: 5;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	position: relative;
}

/* Step count, so the dashed line runs from the centre of the first box to the centre of the last */
.ph-tp .ph-tp-flow:has(> .ph-tp-step:nth-child(2):last-child) { --steps: 2; }
.ph-tp .ph-tp-flow:has(> .ph-tp-step:nth-child(3):last-child) { --steps: 3; }
.ph-tp .ph-tp-flow:has(> .ph-tp-step:nth-child(4):last-child) { --steps: 4; }
.ph-tp .ph-tp-flow:has(> .ph-tp-step:nth-child(6):last-child) { --steps: 6; }

.ph-tp .ph-tp-flow::before {
	content: "";
	position: absolute;
	left: calc(50% / var(--steps));
	right: calc(50% / var(--steps));
	top: 31px;
	height: 2px;
	background: repeating-linear-gradient(90deg, var(--ph-orange) 0 10px, transparent 10px 18px);
	opacity: 0.6;
	animation: ph-tp-flow 1.2s linear infinite;
}

@keyframes ph-tp-flow {
	to { background-position: 18px 0; }
}

.ph-tp .ph-tp-step {
	position: relative;
	text-align: center;
	padding: 0 10px;
	margin: 0;
}

.ph-tp .ph-tp-step::before {
	content: "";
	display: block;
	width: 64px;
	height: 64px;
	margin: 0 auto 16px;
	border-radius: 16px;
	background: var(--ph-night-3) var(--ico) center / 26px 26px no-repeat;
	border: 1px solid var(--ph-rule);
	position: relative;
}

.ph-tp .ph-tp-step h3 {
	font-size: 22px;
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: 0.03em;
	margin: 0 0 6px;
}

.ph-tp .ph-tp-step p {
	margin: 0;
	color: var(--ph-dim);
	font-size: 14px;
	line-height: 1.5;
}

/* Icons: orange line icons as images. "notes" and "download" are Tabler Icons 3.19.0
   (MIT License, Copyright (c) 2020-2024 Paweł Kuna, https://tabler.io/icons); the sharp, chilli,
   swap, metronome, sliders and copy icons are drawn to match. Licence texts (icons and fonts): THIRD-PARTY-NOTICES.txt */
.ph-tp .ph-ico-notes { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f8a525' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 17a3 3 0 1 0 6 0a3 3 0 0 0 -6 0'/%3E%3Cpath d='M13 17a3 3 0 1 0 6 0a3 3 0 0 0 -6 0'/%3E%3Cpath d='M9 17v-13h10v13'/%3E%3Cpath d='M9 8h10'/%3E%3C/svg%3E"); }
.ph-tp .ph-ico-sharp { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f8a525' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 4.5v16'/%3E%3Cpath d='M14.5 3.5v16'/%3E%3Cpath d='M6 10.2l12 -2.4'/%3E%3Cpath d='M6 16.2l12 -2.4'/%3E%3C/svg%3E"); }
.ph-tp .ph-ico-chilli { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f8a525' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.5 7.5c-2.5 2 -3 5.5 -5 8.5c-1.5 2.2 -3.5 3.5 -4.5 4.5c4.5 .5 10 -1.5 13 -5.5c2 -2.7 2.5 -5.5 1.5 -7.5'/%3E%3Cpath d='M12.5 7.5c1.5 -1.2 3.6 -1.3 5 0'/%3E%3Cpath d='M15 6.8c0 -1.5 1 -3 3 -3.5'/%3E%3C/svg%3E"); }
.ph-tp .ph-ico-swap { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f8a525' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='12' width='6.5' height='8' rx='1.5'/%3E%3Crect x='15.5' y='12' width='6.5' height='8' rx='1.5'/%3E%3Cpath d='M5.25 9c1.5 -4 12 -4 13.5 0'/%3E%3Cpath d='M16.5 8.3l2.25 .7l.7 -2.2'/%3E%3C/svg%3E"); }
.ph-tp .ph-ico-download { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f8a525' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2'/%3E%3Cpath d='M7 11l5 5l5 -5'/%3E%3Cpath d='M12 4l0 12'/%3E%3C/svg%3E"); }
.ph-tp .ph-ico-metronome { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f8a525' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 21l3.5 -17h4l3.5 17z'/%3E%3Cpath d='M5 21h14'/%3E%3Cpath d='M12 16l5 -8'/%3E%3Cpath d='M8.6 12h2.4'/%3E%3C/svg%3E"); }
.ph-tp .ph-ico-sliders { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f8a525' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h9'/%3E%3Cpath d='M17 7h3'/%3E%3Ccircle cx='15' cy='7' r='2'/%3E%3Cpath d='M4 17h3'/%3E%3Cpath d='M11 17h9'/%3E%3Ccircle cx='9' cy='17' r='2'/%3E%3C/svg%3E"); }
.ph-tp .ph-ico-copy { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f8a525' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='8' width='12' height='12' rx='2'/%3E%3Cpath d='M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2'/%3E%3C/svg%3E"); }

/* The tool in its lit panel */
.ph-tp .ph-tp-desk {
	padding-top: 8px;
	padding-bottom: 80px;
}

.ph-tp .ph-tp-unit {
	position: relative;
	background: #eef1f3;
	border-radius: 22px;
	padding: 14px 18px 22px;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 40px 100px rgba(0, 0, 0, 0.55), 0 0 120px rgba(123, 90, 255, 0.12);
	scroll-margin-top: 16px;
}

.ph-tp .ph-tp-unit::before {
	content: "";
	position: absolute;
	left: 22px;
	right: 22px;
	top: 0;
	height: 3px;
	border-radius: 0 0 3px 3px;
	background: var(--ph-spice);
}

.ph-tp .ph-tp-unit-strip {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 4px 14px;
	color: #5a6168;
	font: 500 12px/1 var(--ph-mono);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.ph-tp .ph-tp-led {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--ph-stable);
	box-shadow: 0 0 8px var(--ph-stable);
}

/* Spice demo ([ph_spice_demo]): a light card inside the manual's spice section */
.ph-tp .ph-tp-spice-demo {
	background: #fff;
	border: 1px solid #e1e2e2;
	border-radius: 16px;
	padding: 22px 24px 18px;
	margin-top: 8px;
	margin-bottom: 28px;
	box-shadow: 0 1px 2px rgba(29, 34, 40, 0.06), 0 8px 24px rgba(29, 34, 40, 0.06);
}

.ph-tp .ph-tp-picker {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	position: relative;
	margin: 0 0 16px;
}

.ph-tp .ph-tp-picker::before {
	content: "";
	position: absolute;
	left: 16.6%;
	right: 16.6%;
	top: 21px;
	height: 6px;
	border-radius: 3px;
	background: var(--ph-spice);
}

.ph-tp .ph-tp-picker button {
	position: relative;
	background: none;
	border: 0;
	color: #5a6168;
	font: 500 13px/1 var(--ph-mono);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 0 0 4px;
	cursor: pointer;
	min-height: 72px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	box-shadow: none;
}

.ph-tp .ph-tp-picker button::before {
	content: "";
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: #fff;
	border: 3px solid #c9ced2;
	margin-top: 11px;
	transition: 0.2s;
}

.ph-tp .ph-tp-picker button[aria-pressed="true"] {
	font-weight: 600;
}

/* The chosen level's name in its dark, readable colour (the tool's own text colours) */
.ph-tp .ph-tp-picker button[data-l="stable"][aria-pressed="true"] { color: #1e7a33; }
.ph-tp .ph-tp-picker button[data-l="colorful"][aria-pressed="true"] { color: #5b3fd6; }
.ph-tp .ph-tp-picker button[data-l="spicy"][aria-pressed="true"] { color: #c22a31; }

.ph-tp .ph-tp-picker button[aria-pressed="true"]::before {
	border-color: var(--c);
	box-shadow: 0 0 0 4px rgba(255, 255, 255, 1), 0 0 14px var(--c);
}

.ph-tp .ph-tp-picker button:focus-visible {
	outline: 2px solid #b86e00;
	outline-offset: 4px;
	border-radius: 6px;
}

.ph-tp .ph-tp-spice-demo .ph-tp-chord {
	background: #ecf1f2;
}

.ph-tp .ph-tp-spice-demo .ph-tp-chord::before {
	box-shadow: none;
}

.ph-tp .ph-tp-spice-demo .ph-tp-chord b {
	color: var(--ph-ink);
}

.ph-tp .ph-tp-spice-demo .ph-tp-chord i {
	color: #5a6168;
}

.ph-tp .ph-tp-why {
	min-height: 3.2em;
	color: #5a6168;
	font-size: 15px;
	line-height: 1.6;
	margin-top: 14px;
}

/* The manual on light "paper", where Mediavine's in-content ads go */
.ph-tp .ph-tp-manual {
	background: #f4f5f6;
	color: var(--ph-ink);
	border-radius: 28px 28px 0 0;
	padding-top: 88px;
	padding-bottom: 88px;
	counter-reset: ph-tp-sec;
}

.ph-tp .ph-tp-manual > * {
	max-width: 760px;
}

.ph-tp .ph-tp-manual .ph-tp-eyebrow {
	color: #5a6168;
}

.ph-tp .ph-tp-manual h2 {
	color: var(--ph-ink);
	font-size: clamp(40px, 5vw, 56px);
	margin: 0 auto 8px;
}

.ph-tp .ph-tp-manual h3 {
	color: var(--ph-ink);
	font-size: 40px;
	font-weight: 700;
	line-height: 1;
	margin: 64px auto 14px;
	display: flex;
	gap: 16px;
	align-items: baseline;
	counter-increment: ph-tp-sec;
}

.ph-tp .ph-tp-manual h3::before {
	content: counter(ph-tp-sec, decimal-leading-zero);
	font: 500 14px/1 var(--ph-mono);
	color: #b86e00;
	letter-spacing: 0.06em;
}

.ph-tp .ph-tp-manual p,
.ph-tp .ph-tp-manual li {
	color: var(--ph-ink);
}

.ph-tp .ph-tp-manual p {
	margin-bottom: 16px;
}

.ph-tp .ph-tp-manual ul,
.ph-tp .ph-tp-manual ol {
	padding-left: 1.3em;
	margin-bottom: 18px;
}

.ph-tp .ph-tp-manual li {
	margin-bottom: 8px;
}

.ph-tp .ph-tp-manual a {
	color: #5b3fd6;
}

.ph-tp .ph-tp-manual code {
	font: 500 15px var(--ph-mono);
	background: #e4e8ea;
	color: var(--ph-ink);
	padding: 2px 6px;
	border-radius: 4px;
}

/* FAQ: each paragraph is one question (bold) and its answer */
.ph-tp .ph-tp-faq {
	padding-top: 88px;
	padding-bottom: 88px;
}

.ph-tp .ph-tp-faq-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 48px;
}

.ph-tp .ph-tp-faq-grid p {
	border-top: 1px solid var(--ph-rule);
	padding: 22px 0;
	margin: 0;
	color: var(--ph-dim);
	font-size: 16px;
}

.ph-tp .ph-tp-faq-grid p strong {
	display: block;
	font: 600 24px/1.1 var(--ph-display);
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--ph-text);
	margin-bottom: 6px;
}

.ph-tp .ph-tp-faq-grid p br {
	display: none;
}

/* Cards: shop and other tools */
.ph-tp .ph-tp-more {
	padding-top: 0;
	padding-bottom: 88px;
}

.ph-tp .ph-tp-cards {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 14px;
}

.ph-tp .ph-tp-card {
	background: var(--ph-night-2);
	border: 1px solid var(--ph-rule);
	border-radius: 16px;
	padding: 22px;
	color: var(--ph-dim);
	font-size: 15px;
	margin: 0;
}

.ph-tp .ph-tp-card h3 {
	font-size: 26px;
	font-weight: 600;
	line-height: 1;
	margin-bottom: 8px;
}

.ph-tp .ph-tp-card h3 a {
	color: var(--ph-text);
	text-decoration: none;
}

.ph-tp .ph-tp-card p {
	margin: 0;
}

.ph-tp .ph-tp-card-shop {
	background: linear-gradient(135deg, #2a1d05, #1a1208);
	border-color: rgba(248, 165, 37, 0.35);
}

.ph-tp .ph-tp-card-shop h3 a {
	color: var(--ph-orange);
}

/* Feedback form ([ph_feedback]) */
.ph-tp .ph-tp-feedback {
	padding-top: 0;
	padding-bottom: 96px;
}

.ph-tp .ph-tp-feedback > * {
	max-width: 760px;
}

.ph-tp .ph-tp-feedback h2 {
	margin-bottom: 12px;
}

.ph-tp .ph-tp-feedback > p {
	color: #c3cad0;
}

.ph-tp .ph-fb,
.ph-tp .ph-fb-thanks {
	background: var(--ph-night-2);
	border: 1px solid var(--ph-rule);
	border-radius: 20px;
	padding: clamp(20px, 4vw, 36px);
	margin-top: 24px;
}

.ph-tp .ph-fb-q {
	border: 0;
	padding: 0;
	margin: 0 0 28px;
	min-width: 0;
}

.ph-tp .ph-fb-q legend,
.ph-tp .ph-fb-label {
	display: block;
	padding: 0;
	margin: 0 0 12px; /* the theme nudges legends 15px left */
	color: var(--ph-text);
	font: 600 17px/1.4 var(--ph-sans);
}

.ph-tp .ph-fb-req,
.ph-tp .ph-fb-hint {
	font: 500 11px/1 var(--ph-mono);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ph-dim);
	margin-left: 8px;
	vertical-align: 2px;
}

.ph-tp .ph-fb-req {
	color: var(--ph-orange);
}

.ph-tp .ph-fb-note {
	color: var(--ph-dim);
	font-size: 14px;
	margin: -6px 0 10px;
}

.ph-tp .ph-fb-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.ph-tp .ph-fb-chip {
	position: relative;
	cursor: pointer;
	margin: 0;
}

.ph-tp .ph-fb-chip input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	margin: 0;
}

.ph-tp .ph-fb-chip > span {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 10px 16px;
	border-radius: 10px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	background: var(--ph-night-3);
	color: var(--ph-text);
	font: 500 15px/1.3 var(--ph-sans);
	transition: border-color 0.15s, background 0.15s;
}

.ph-tp .ph-fb-chip:hover > span {
	border-color: rgba(255, 255, 255, 0.3);
}

.ph-tp .ph-fb-chip input:checked + span {
	border-color: var(--ph-orange);
	background: rgba(248, 165, 37, 0.12);
	color: #fff;
}

.ph-tp .ph-fb-chip input:focus-visible + span {
	outline: 2px solid var(--ph-orange);
	outline-offset: 2px;
}

.ph-tp .ph-fb-chips-big .ph-fb-chip > span {
	min-height: 52px;
	padding: 12px 20px;
	font-size: 16px;
}

.ph-tp .ph-fb-emoji {
	font-size: 22px;
	line-height: 1;
}

.ph-tp .ph-fb-more {
	margin-top: 12px;
}

.ph-tp .ph-fb-more label {
	display: block;
	color: var(--ph-dim);
	font-size: 14px;
	margin-bottom: 6px;
}

.ph-tp .ph-fb textarea,
.ph-tp .ph-fb input[type="text"],
.ph-tp .ph-fb input[type="email"] {
	display: block;
	width: 100%;
	background: var(--ph-night);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 10px;
	color: var(--ph-text);
	font: 400 16px/1.5 var(--ph-sans);
	padding: 12px 14px;
	min-height: 48px;
	box-shadow: none;
}

.ph-tp .ph-fb textarea:focus,
.ph-tp .ph-fb input[type="text"]:focus,
.ph-tp .ph-fb input[type="email"]:focus {
	outline: none;
	border-color: var(--ph-orange);
	box-shadow: 0 0 0 3px rgba(248, 165, 37, 0.2);
}

.ph-tp .ph-fb input::placeholder {
	color: #6b7580;
}

.ph-tp .ph-fb-error {
	color: #ff8a8f;
	font-size: 14px;
	margin: 8px 0 0;
}

.ph-tp .ph-fb-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.ph-tp .ph-fb-send {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 8px;
}

.ph-tp .ph-fb-submit {
	background: var(--ph-orange);
	color: var(--ph-ink);
	border: 0;
	border-radius: 10px;
	padding: 16px 26px;
	min-height: 52px;
	font: 600 16px/1 var(--ph-sans);
	cursor: pointer;
	box-shadow: 0 10px 30px rgba(248, 165, 37, 0.2);
}

.ph-tp .ph-fb-submit:hover {
	background: #ffb53d;
}

.ph-tp .ph-fb-submit:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

.ph-tp .ph-fb-submit:disabled {
	opacity: 0.6;
	cursor: default;
}

.ph-tp .ph-fb-status {
	color: var(--ph-dim);
	font-size: 15px;
	margin: 0;
}

.ph-tp .ph-fb-thanks p {
	color: #c3cad0;
	margin: 0;
}

.ph-tp .ph-fb-thanks .ph-fb-thanks-title {
	font: 700 32px/1 var(--ph-display);
	text-transform: uppercase;
	color: var(--ph-text);
	margin-bottom: 10px;
}

.ph-tp .ph-fb-thanks:focus {
	outline: none;
}

/* Narrow screens */
@media (max-width: 960px) {
	.ph-tp .ph-tp-flow {
		grid-auto-flow: row;
		grid-template-columns: 1fr;
		gap: 18px;
	}

	.ph-tp .ph-tp-flow::before {
		left: 31px;
		right: auto;
		top: 10px;
		bottom: 10px;
		width: 2px;
		height: auto;
		background: repeating-linear-gradient(180deg, var(--ph-orange) 0 10px, transparent 10px 18px);
		animation: none;
	}

	.ph-tp .ph-tp-step {
		display: grid;
		grid-template-columns: 64px 1fr;
		gap: 0 18px;
		text-align: left;
		padding: 0;
	}

	.ph-tp .ph-tp-step::before {
		margin: 0;
		grid-row: span 2;
	}

	.ph-tp .ph-tp-faq-grid,
	.ph-tp .ph-tp-cards {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 781px) {
	.ph-tp .ph-tp-hero .wp-block-columns {
		gap: 32px;
	}
}

@media (max-width: 520px) {
	.ph-tp {
		font-size: 16px;
	}

	.ph-tp .ph-tp-sec {
		padding-top: 56px;
		padding-bottom: 56px;
	}

	.ph-tp .ph-tp-hero {
		padding-top: 36px;
		padding-bottom: 48px;
	}

	.ph-tp .ph-tp-lead {
		font-size: 17px;
	}

	.ph-tp .ph-tp-roll {
		padding: 12px;
	}

	.ph-tp .ph-tp-lvl span {
		padding: 6px;
		font-size: 10px;
	}

	.ph-tp .ph-tp-chord b {
		font-size: 21px;
	}

	.ph-tp .ph-tp-chord i {
		font-size: 10px;
	}

	.ph-tp .ph-tp-desk {
		padding-left: 8px;
		padding-right: 8px;
	}

	.ph-tp .ph-tp-unit {
		padding: 10px 6px 14px;
		border-radius: 16px;
	}

	.ph-tp .ph-tp-manual h3 {
		font-size: 32px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ph-tp .ph-tp-flow::before {
		animation: none;
	}

	.ph-tp .ph-tp-chord,
	.ph-tp .ph-tp-note {
		transition: none;
	}
}