/* OpenPress single Free Tool page. Loaded on Free Tool pages only, after tool-single.css, whose shared
   feature-card and verdict (editorial note) rules (.op-features, .op-verdict) are reused as they are.
   Uses existing tokens/components only, so dark mode follows the theme variables (no hard-coded colours).

   Layout: header (text + optional image) > tool interface (the focal point) > editorial body
   (reading column + details panel) > features > editorial note. No JavaScript, no animation. */

.op-free-tool-page__crumbs { padding-top: var(--op-space-5); }
.op-free-tool-page__protected { padding-block: var(--op-space-7); }

/* Rhythm: every section after the header starts one step below the previous one. */
.op-free-tool-section { padding-top: var(--op-space-7); }

/* Shared heading for sections and blocks: quieter than the global H2 so the page does not shout. */
.op-free-tool-block__title,
.op-free-tool-panel__title {
	margin: 0 0 var(--op-space-4);
	font-size: var(--op-text-h3);
	line-height: var(--op-leading-snug);
	overflow-wrap: anywhere;
}

/* Header ----------------------------------------------------------------- */
.op-free-tool-hero {
	padding-block: var(--op-space-6) var(--op-space-7);
	border-bottom: 1px solid var(--op-border);
}
.op-free-tool-hero__inner {
	display: grid;
	gap: var(--op-space-6);
	align-items: center;
}
.op-free-tool-hero__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--op-space-4);
	min-width: 0;
	max-width: 46rem;
}
.op-free-tool-hero__category { min-height: 1.75rem; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.op-free-tool-hero__title {
	margin: 0;
	font-size: clamp(1.875rem, 1.5rem + 2vw, 3rem);
	line-height: 1.1;
	letter-spacing: -0.01em;
	overflow-wrap: anywhere;
}
.op-free-tool-hero__lead {
	margin: 0;
	color: var(--op-text-muted);
	font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
	line-height: 1.55;
	overflow-wrap: anywhere;
}

/* Metadata strip: small uppercase label over the value (same label style as the Guide page). */
.op-free-tool-hero__facts {
	width: 100%;
	gap: var(--op-space-3) var(--op-space-6);
	margin-top: var(--op-space-2);
	padding-top: var(--op-space-4);
	border-top: 1px solid var(--op-border);
	color: var(--op-text);
}
.op-free-tool-hero__facts .op-meta__item {
	flex-direction: column;
	gap: var(--op-space-1);
	min-width: 0;
	font-weight: var(--op-weight-medium);
	overflow-wrap: anywhere;
}
.op-free-tool-hero__facts .op-meta__label {
	color: var(--op-text-muted);
	font-size: 0.8125rem;
	font-weight: var(--op-weight-semibold);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.op-free-tool-hero__media {
	min-width: 0;
	margin: 0;
	overflow: hidden;
	aspect-ratio: 16 / 10;
	background: var(--op-bg-elevated);
	border: 1px solid var(--op-border);
	border-radius: var(--op-radius-lg);
}
.op-free-tool-hero__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
@media (min-width: 1024px) {
	.op-free-tool-hero__inner--image { grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); gap: var(--op-space-7); }
}

/* Tool interface container: the focal point ------------------------------- */
/* A clean elevated surface with a clearly stronger border than the cards around it, and a soft shadow, so
   it reads as "the tool" without any accent colour. The wide container lets it span further than the text.
   To add the real tool later, replace the placeholder inside; this frame stays. */
.op-free-tool-interface-section { padding-top: var(--op-space-6); }
/* Quiet, dashed and non-interactive: an empty slot, not a control. */
.op-free-tool-interface__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 11rem;
	padding: var(--op-space-5);
	background: color-mix(in srgb, var(--op-text) 3%, var(--op-bg-elevated));
	border: 2px dashed color-mix(in srgb, var(--op-text) 20%, var(--op-border));
	border-radius: var(--op-radius);
	text-align: center;
}
.op-free-tool-interface__placeholder-title {
	margin: 0;
	color: var(--op-text-muted);
	font-size: var(--op-text-h4);
	font-weight: var(--op-weight-medium);
	overflow-wrap: anywhere;
}
@media (min-width: 768px) {
	.op-free-tool-interface__placeholder { min-height: 18rem; }
}

/* Editorial body ---------------------------------------------------------- */
.op-free-tool-layout { display: grid; gap: var(--op-space-7); grid-template-columns: minmax(0, 1fr); }
.op-free-tool-main { display: grid; gap: var(--op-space-7); min-width: 0; max-width: var(--op-reading-width); align-content: start; }
.op-free-tool-block { min-width: 0; }
@media (min-width: 1024px) {
	.op-free-tool-layout--aside { grid-template-columns: minmax(0, 1fr) 20rem; gap: var(--op-space-8); align-items: start; }
}

/* Reading column: introduction and editor content. */
.op-free-tool-content {
	min-width: 0;
	max-width: var(--op-reading-width);
	font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
	line-height: 1.75;
	overflow-wrap: break-word;
}
.op-free-tool-content > :first-child { margin-top: 0; }
.op-free-tool-content > :last-child { margin-bottom: 0; }
.op-free-tool-content p,
.op-free-tool-content ul,
.op-free-tool-content ol,
.op-free-tool-content blockquote,
.op-free-tool-content figure,
.op-free-tool-content pre,
.op-free-tool-content table { margin: 0 0 1.25em; }
.op-free-tool-content h2,
.op-free-tool-content h3,
.op-free-tool-content h4 { margin: 2em 0 0.6em; scroll-margin-top: 6rem; }
.op-free-tool-content h2 { font-size: var(--op-text-h3); }
.op-free-tool-content h3 { font-size: var(--op-text-h4); }
.op-free-tool-content h4 { font-size: 1rem; }
.op-free-tool-content ul,
.op-free-tool-content ol { padding-left: 1.4em; }
.op-free-tool-content li { margin-bottom: 0.4em; }
.op-free-tool-content li > ul,
.op-free-tool-content li > ol { margin: 0.4em 0 0; }
.op-free-tool-content blockquote {
	padding: var(--op-space-1) 0 var(--op-space-1) var(--op-space-5);
	border-left: 3px solid var(--op-border);
}
.op-free-tool-content blockquote > :last-child { margin-bottom: 0; }
.op-free-tool-content img,
.op-free-tool-content video,
.op-free-tool-content iframe { max-width: 100%; height: auto; border-radius: var(--op-radius); }
.op-free-tool-content .aligncenter { margin-inline: auto; }
.op-free-tool-content figcaption { margin-top: var(--op-space-2); color: var(--op-text-muted); font-size: var(--op-text-small); line-height: var(--op-leading-snug); }
.op-free-tool-content hr { margin: 2em 0; }
.op-free-tool-content code,
.op-free-tool-content pre {
	font-family: var(--op-font-mono);
	font-size: 0.9em;
	background: color-mix(in srgb, var(--op-text) 6%, transparent);
	border-radius: var(--op-radius-sm);
}
.op-free-tool-content code { padding: 0.1em 0.35em; }
.op-free-tool-content pre { padding: var(--op-space-4); overflow-x: auto; }
.op-free-tool-content pre code { padding: 0; background: none; }
.op-free-tool-content table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; }
.op-free-tool-content th,
.op-free-tool-content td { padding: var(--op-space-2) var(--op-space-3); border: 1px solid var(--op-border); text-align: left; }

/* How to use: an open, numbered list (no card per step) -------------------- */
.op-free-tool-steps { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--op-border); }
.op-free-tool-steps__item {
	display: grid;
	grid-template-columns: 2.75rem minmax(0, 1fr);
	gap: var(--op-space-4);
	padding-block: var(--op-space-5);
	border-bottom: 1px solid var(--op-border);
}
.op-free-tool-steps__item--no-number { grid-template-columns: minmax(0, 1fr); }
.op-free-tool-steps__number {
	color: var(--op-link);
	font-size: var(--op-text-h3);
	font-variant-numeric: tabular-nums;
	font-weight: var(--op-weight-bold);
	line-height: 1.2;
}
.op-free-tool-steps__body { min-width: 0; }
.op-free-tool-steps__title { margin: 0; font-size: var(--op-text-h4); line-height: var(--op-leading-snug); overflow-wrap: anywhere; }
.op-free-tool-steps__text { margin-top: var(--op-space-2); color: var(--op-text-muted); overflow-wrap: anywhere; }
.op-free-tool-steps__text > :first-child { margin-top: 0; }
.op-free-tool-steps__text > :last-child { margin-bottom: 0; }
@media (min-width: 640px) {
	.op-free-tool-steps__item { grid-template-columns: 3.5rem minmax(0, 1fr); }
}

/* Details panel: supported formats and limitations in ONE card ------------- */
.op-free-tool-panel {
	min-width: 0;
	background: var(--op-bg-elevated);
	border: 1px solid var(--op-border);
	border-radius: var(--op-radius);
}
.op-free-tool-panel--inline { max-width: var(--op-reading-width); }
.op-free-tool-panel__section { padding: var(--op-space-5); }
.op-free-tool-panel__section + .op-free-tool-panel__section { border-top: 1px solid var(--op-border); }
.op-free-tool-panel__title { margin-bottom: var(--op-space-3); font-size: var(--op-text-h4); }

/* Supported formats: tags */
.op-free-tool-formats { display: flex; flex-wrap: wrap; gap: var(--op-space-2); margin: 0; padding: 0; list-style: none; }
.op-free-tool-formats__item {
	max-width: 100%;
	padding: var(--op-space-1) var(--op-space-3);
	background: var(--op-bg);
	border: 1px solid var(--op-border);
	border-radius: var(--op-radius-pill);
	font-size: var(--op-text-small);
	font-weight: var(--op-weight-medium);
	line-height: 1.6;
	overflow-wrap: anywhere;
}

/* Limitations: a plain list with a muted ring marker, deliberately not warning-coloured. */
.op-free-tool-limits { display: grid; gap: var(--op-space-3); margin: 0; padding: 0; list-style: none; color: var(--op-text-muted); font-size: var(--op-text-small); }
.op-free-tool-limits li { position: relative; padding-left: 1.25rem; overflow-wrap: anywhere; }
.op-free-tool-limits li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.5em;
	box-sizing: border-box;
	width: 0.5rem;
	height: 0.5rem;
	border: 1.5px solid var(--op-text-muted);
	border-radius: var(--op-radius-pill);
}

/* Features: shared cards, lighter and easier to scan ----------------------- */
.op-free-tool-features { gap: var(--op-space-4); }
.op-free-tool-features .op-features__item { padding: var(--op-space-5); }
.op-free-tool-features .op-features__item::before {
	content: "";
	display: block;
	width: 1.75rem;
	height: 3px;
	margin-bottom: var(--op-space-3);
	border-radius: var(--op-radius-pill);
	background: var(--op-link);
}
.op-free-tool-features .op-features__title { font-size: var(--op-text-h4); }

/* Editorial note and last updated ----------------------------------------- */
.op-free-tool-editorial { display: grid; gap: var(--op-space-4); max-width: var(--op-reading-width); }
.op-free-tool-note { max-width: none; padding: var(--op-space-5); }
.op-free-tool-note .op-verdict__title { font-size: var(--op-text-h4); }
.op-free-tool-note .op-verdict__body { font-size: 1rem; }
.op-free-tool-updated { color: var(--op-text-muted); font-size: var(--op-text-small); }
.op-free-tool-updated .op-meta__label::after { content: ":"; }
.op-free-tool-note + .op-free-tool-updated { padding-top: var(--op-space-4); border-top: 1px solid var(--op-border); }


/* Free Tool page refinements: a tool you can use now ------------------------------------------ */
.op-free-tool-hero {
	position: relative;
	padding-block: clamp(2.25rem, 1.4rem + 3.5vw, 4.5rem);
	background:
		radial-gradient(38rem 20rem at 90% -10%, var(--op-glow), transparent 70%),
		radial-gradient(30rem 16rem at 0% 110%, var(--op-glow-2), transparent 70%),
		var(--op-bg-tint);
}
.op-free-tool-hero::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--op-gradient); }
.op-free-tool-hero__title { font-size: clamp(2.25rem, 1.5rem + 3.6vw, 4rem); letter-spacing: -0.045em; line-height: 1.03; }
.op-free-tool-hero__lead { font-size: var(--op-text-lead); line-height: 1.5; }
.op-free-tool-hero__media { border-radius: var(--op-radius-xl); box-shadow: var(--op-shadow-lg); }

/* The interface frame: a gradient-edged workspace. The slot inside is untouched, ready for the real tool. */
.op-free-tool-interface__placeholder { border-radius: var(--op-radius-lg); }
.op-free-tool-block__title,
.op-free-tool-panel__title { font-family: var(--op-font-display); letter-spacing: -0.025em; }
.op-free-tool-panel { border-radius: var(--op-radius-lg); }


/* 038C visual polish: page shell ---------------------------------------------------------------
   Presentation only. Calmer hero, a centred tool card with a plain border and soft depth, chevron breadcrumbs,
   numbered step cards, consistent radii (cards 16-20, main card 24). Uses global tokens, so dark mode follows the theme. */
.op-free-tool-page__crumbs { padding-top: var(--op-space-5); }
.op-free-tool-page .op-breadcrumbs { font-size: 0.875rem; }
.op-free-tool-page .op-breadcrumbs__item + .op-breadcrumbs__item::before {
	content: "";
	width: 14px;
	height: 14px;
	margin-inline: var(--op-space-1);
	background: currentColor;
	opacity: 0.55;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Hero: compact, headline-led, no top gradient bar, glow kept very faint. */
.op-free-tool-hero { padding-block: clamp(2rem, 1.2rem + 3vw, 4rem) clamp(1.5rem, 1rem + 2vw, 2.5rem); background: radial-gradient(34rem 16rem at 50% -20%, var(--op-glow), transparent 70%); }
.op-free-tool-hero::before { content: none; }
.op-free-tool-hero__category { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.op-free-tool-hero__title { font-size: clamp(2rem, 1.5rem + 2.6vw, 3.5rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.08; }
.op-free-tool-hero__lead { max-width: 40rem; color: var(--op-text-muted); font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem); line-height: 1.6; }

/* Tool card: the centrepiece. */
.op-free-tool-interface-section { padding-top: var(--op-space-4); }
.op-free-tool-interface-section .op-container { max-width: calc(1000px + 2 * var(--op-gutter)); }
.op-free-tool-interface {
	position: relative;
	min-width: 0;
	padding: var(--op-space-4);
	background: var(--op-bg-elevated);
	border: 1px solid var(--op-border);
	border-radius: var(--op-radius-xl);
	box-shadow: 0 10px 40px -12px rgb(16 24 40 / 0.14);
}
:root[data-theme="dark"] .op-free-tool-interface { box-shadow: 0 10px 40px -12px rgb(0 0 0 / 0.6); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .op-free-tool-interface { box-shadow: 0 10px 40px -12px rgb(0 0 0 / 0.6); } }
@media (min-width: 768px) { .op-free-tool-interface { padding: var(--op-space-6); } }

/* Section titles. */
.op-free-tool-block__title { font-size: clamp(1.5rem, 1.25rem + 1vw, 2.125rem); font-weight: 700; letter-spacing: -0.02em; margin-bottom: var(--op-space-4); }

/* How to use: three subtle step cards on wide screens, a list on narrow ones. */
.op-free-tool-steps { display: grid; gap: var(--op-space-3); border-top: 0; }
.op-free-tool-steps__item {
	padding: var(--op-space-5);
	background: var(--op-bg-elevated);
	border: 1px solid var(--op-border);
	border-radius: var(--op-radius-lg);
}
.op-free-tool-steps__number {
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	background: color-mix(in srgb, var(--op-link) 10%, transparent);
	border-radius: var(--op-radius-pill);
	font-size: 0.875rem;
	letter-spacing: 0.02em;
}
.op-free-tool-steps__item { grid-template-columns: 2.25rem minmax(0, 1fr); }
.op-free-tool-steps__item--no-number { grid-template-columns: minmax(0, 1fr); }
.op-free-tool-steps__title { font-size: 1.0625rem; font-weight: 650; }
.op-free-tool-steps__text { font-size: 0.9375rem; }

/* Details panel and feature cards: 16px cards, hairline borders, no heavy accent bars. */
.op-free-tool-panel,
.op-free-tool-features .op-features__item { border-radius: var(--op-radius-lg); }
.op-free-tool-features .op-features__item { transition: border-color 200ms var(--op-ease), transform 200ms var(--op-ease); }
.op-free-tool-features .op-features__item:hover { border-color: var(--op-border-strong); transform: translateY(-2px); }
.op-free-tool-features .op-features__item::before { width: 1.25rem; height: 2px; }
.op-free-tool-features .op-features__title { font-size: 1.0625rem; font-weight: 650; }
.op-free-tool-features .op-features__text { font-size: 0.9375rem; }

@media (prefers-reduced-motion: reduce) {
	.op-free-tool-features .op-features__item,
	.op-free-tool-features .op-features__item:hover { transition: none; transform: none; }
}