/**
 * `/tools/{slug}/` — the single AI tool page.
 *
 * Scoped under `.tr-tool-single` (the body class from inc/tool-single.php), so
 * nothing here can reach the tool archive, the taxonomy archives, the hub
 * template or any other surface that shares the parent's tool stylesheets.
 *
 * WHAT THIS FILE OWNS is deliberately small: the hero, the two-column shell, the
 * rail, and the two full-bleed bands. Everything else on the page is drawn by a
 * stylesheet that already existed.
 *
 *   the content column        parent modules/tool/assets/css/single-tool.css —
 *                             `.tool-content__main`, `.content-section`,
 *                             `.features-grid`, `.pros-cons-grid`,
 *                             `.use-cases-grid`, `.how-it-works-steps`,
 *                             `.pricing-plans`, `.users-list`,
 *                             `.single-tool__screenshot`. The template emits the
 *                             parent's own class names, so the reading column is
 *                             presented by the parent's rules byte for byte and
 *                             nothing is copied here. There is deliberately no
 *                             second feature card, pros/cons grid or step list in
 *                             this theme.
 *   the sticky nav + progress parent assets/css/unified/section-nav.css. It also
 *                             owns `scroll-margin-top` on every
 *                             `[data-tiorai-section]`, which is why no rule below
 *                             sets one.
 *   the rail's card shell     parent assets/css/unified/sidebar.css, restyled
 *                             below onto the prompt single's widget treatment
 *   badges, buttons, prose    parent assets/css/unified/{badges,buttons,typography}.css
 *   the FAQ accordion         parent assets/css/unified/faq.css
 *   the related-tools card    parent assets/css/unified/tool-card.css
 *   share row, helpful widget parent assets/css/unified/{share-row,helpful}.css
 *   the embed badge           assets/css/embed-badge.css in this theme
 *
 * Every colour, space, radius and shadow is a token, except the rail's four
 * surface tints — which are literal for the reason given at their declaration.
 *
 * @package TiorAI
 */

.tr-toolpage {
	/*
	 * The shell's measure and gutter.
	 *
	 * assets/css/unified/archive-shell.css scopes these to `.tr-archive`,
	 * `.tr-term` and `.tr-resource-single` — an opt-in wrapper class — and this
	 * page is none of the three. Without them `.tr-archive__container` resolves
	 * `max-width: var(--tiorai-archive-measure)` to an invalid value, falls back
	 * to `none`, and the layout runs to the full viewport with no gutter: the
	 * rail's chips were clipped by the window edge at 1440.
	 *
	 * Redeclared with the shell's own values rather than adding a fourth class
	 * to the parent's selector list, which is the same call prompt-single.css
	 * makes for the same reason.
	 */
	--tiorai-archive-measure: 1280px;
	--tiorai-archive-gutter: clamp(1rem, 4vw, 2rem);

	/*
	 * THE RAIL'S SURFACES, and they are the prompt single's values, not new ones.
	 *
	 * `--tiorai-ps-flat` / `--tiorai-ps-border` / `--tiorai-ps-rule` are declared
	 * on `.tr-promptpage` in assets/css/prompt-single.css and are what give the
	 * prompt and glossary rails their quiet, almost-flat card. They are literals
	 * there because they are a wash over whatever surface is under them rather
	 * than a step on the neutral ramp, and they are literals here for the same
	 * reason and at the same values — a rail that looked ALMOST like the prompt's
	 * would be worse than one that looked nothing like it.
	 *
	 * They are copied rather than referenced because a custom property only
	 * inherits down from the element that declares it, and `.tr-promptpage` is
	 * not an ancestor of this page. If the prompt's values change, these follow
	 * by hand — noted here so the next person changing one knows to look.
	 */
	--tiorai-ts-flat: rgba(15, 23, 42, 0.018);
	--tiorai-ts-border: rgba(15, 23, 42, 0.09);
	--tiorai-ts-rule: rgba(15, 23, 42, 0.07);
}

[data-theme="dark"] .tr-toolpage {
	--tiorai-ts-flat: rgba(255, 255, 255, 0.035);
	--tiorai-ts-border: rgba(255, 255, 255, 0.12);
	--tiorai-ts-rule: rgba(255, 255, 255, 0.10);
}

/* ==========================================================================
   HERO
   ========================================================================== */

.tr-toolpage__hero {
	padding-block: clamp(1.5rem, 4vw, var(--space-10, 2.5rem)) clamp(1.75rem, 4vw, var(--space-12, 3rem));
	background: var(--color-bg-secondary);
	border-bottom: 1px solid var(--border-default);
}

.tr-toolpage__hero-grid {
	display: grid;
	gap: clamp(1.5rem, 4vw, var(--space-10, 2.5rem));
	align-items: center;
}

/*
 * Two columns from 1025px. Not earlier: below that the screenshot has to drop
 * under about 380px wide to leave a readable measure beside it, at which point
 * a product UI is unreadable and the image has stopped being informative.
 */
@media (min-width: 1025px) {
	.tr-toolpage__hero-grid {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	}

	/* No screenshot: one column, and the text keeps a measure rather than
	   stretching to 1,280px. */
	.tr-toolpage__hero-grid--single {
		grid-template-columns: minmax(0, 1fr);
	}

	.tr-toolpage__hero-grid--single .tr-toolpage__hero-main {
		max-width: 78ch;
	}
}

.tr-toolpage__hero-main {
	min-width: 0;
	display: grid;
	gap: var(--space-4, 1rem);
	justify-items: start;
}

/* The breadcrumb sits tighter to the eyebrow than the default gap allows. */
.tr-toolpage__hero-main > .tr-breadcrumbs,
.tr-toolpage__hero-main > .breadcrumbs {
	margin-block-end: calc(var(--space-2, 0.5rem) * -1);
}

/* --- Identity ------------------------------------------------------------ */

.tr-toolpage__ident {
	display: flex;
	align-items: center;
	gap: var(--space-4, 1rem);
	min-width: 0;
}

.tr-toolpage__logo {
	flex: 0 0 auto;
	width: 3.5rem;
	height: 3.5rem;
	object-fit: contain;
	border-radius: var(--radius-md, 0.625rem);
	border: 1px solid var(--border-default);
	background: var(--surface-card, var(--color-bg-primary));
	padding: var(--space-1, 0.25rem);
}

.tr-toolpage__title {
	margin: 0;
	font-size: clamp(1.75rem, 4vw, var(--font-size-4xl, 2.25rem));
	font-weight: var(--font-weight-extrabold, 800);
	line-height: var(--line-height-tight, 1.25);
	letter-spacing: -0.015em;
	color: var(--color-text-primary);
	overflow-wrap: anywhere;
}

.tr-toolpage__verified {
	vertical-align: -0.15em;
	margin-inline-start: var(--space-2, 0.5rem);
}

.tr-toolpage__deck {
	margin: 0;
	max-width: 62ch;
	font-size: var(--font-size-lg, 1.125rem);
	line-height: var(--line-height-normal, 1.5);
	color: var(--color-text-secondary);
}

/* --- Highlights ---------------------------------------------------------- */

/*
 * A row of label/value pairs, neither boxed nor ruled. Four small cards here
 * would compete with the CTA directly under them, and the hero's job is to get a
 * visitor to that button.
 *
 * Equal tracks (`1fr`) at a min the hero can actually fit four of, and NO
 * dividers between them. Both are the outcome of one measurement.
 *
 * The first build used `minmax(140px, auto)` with a `border-inline-start` on
 * every item but the first. Two faults, and the second is the reason the rule is
 * gone rather than tuned: with `auto` as the max, "Video Editing and Generation"
 * sized its own track and pushed the fourth highlight onto a second row — where
 * it carried a divider that is only ever correct BETWEEN siblings in one row.
 * Auto-fit cannot tell CSS where a row begins, so no `:nth-child()` can reset
 * that border reliably while the item count varies from two to four.
 *
 * Measured: the hero's text column is 617px at 1440, so four tracks need a
 * minimum of (617 − 3 gaps) ÷ 4 = 139.25px. The old 140px min missed by three
 * quarters of a pixel and silently dropped to three columns. 130px clears it
 * without tuning to one viewport.
 */
.tr-toolpage__highlights {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
	gap: var(--space-4, 1rem) var(--space-6, 1.5rem);
	margin: var(--space-1, 0.25rem) 0 0;
	width: 100%;
}

.tr-toolpage__highlight {
	min-width: 0;
}

.tr-toolpage__highlight dt {
	font-size: var(--font-size-2xs, 0.625rem);
	font-weight: var(--font-weight-semibold, 600);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-text-tertiary);
}

.tr-toolpage__highlight dd {
	margin: 2px 0 0;
	font-size: var(--font-size-sm, 0.875rem);
	font-weight: var(--font-weight-medium, 500);
	line-height: var(--line-height-snug, 1.375);
	color: var(--color-text-primary);
}

.tr-toolpage__highlight dd a {
	color: inherit;
	text-decoration-color: var(--border-default);
	text-underline-offset: 0.2em;
}

.tr-toolpage__highlight dd a:hover {
	color: var(--color-text-link);
	text-decoration-color: currentColor;
}

/* --- Actions ------------------------------------------------------------- */

.tr-toolpage__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3, 0.75rem);
	margin-block-start: var(--space-2, 0.5rem);
	/*
	 * Full width, so the mobile rule that makes each button `width: 100%` has a
	 * full-width box to fill. `.tr-toolpage__hero-main` is a grid with
	 * `justify-items: start`, which sizes every row to its content — measured at
	 * 375px the "Visit tool" button computed to 125px with `width: 100%` applied,
	 * because 100% of a shrink-to-fit parent is the content width.
	 */
	width: 100%;
}

.tr-toolpage__visit {
	gap: var(--space-2, 0.5rem);
}

/* --- Screenshot ---------------------------------------------------------- */

.tr-toolpage__shot {
	position: relative;
	margin: 0;
	min-width: 0;
	border: 1px solid var(--border-default);
	border-radius: var(--radius-lg, 0.75rem);
	overflow: hidden;
	background: var(--surface-card, var(--color-bg-primary));
	box-shadow: var(--tiorai-shadow-panel);
}

/*
 * The tool's mark, on the screenshot's bottom-left corner.
 *
 * It has its own OPAQUE ground and a ring, and both are load-bearing rather than
 * decoration: the image behind it is an arbitrary product UI, so a transparent
 * PNG of a dark wordmark would vanish over a dark interface and a light one over
 * a white page. `--color-bg-primary` is the one surface token that is a solid
 * colour in both themes — `--surface-card` is a translucent gradient in dark,
 * which would let the screenshot show through the chip.
 *
 * `object-fit: contain` because a tool logo can be any aspect ratio: a square
 * app icon, a wide wordmark, a tall monogram. The box is fixed so the corner
 * treatment is identical on every one of the 3,884 tools that has a logo, and
 * the artwork is fitted inside it rather than cropped to it.
 */
.tr-toolpage__shot-logo {
	position: absolute;
	inset-inline-start: var(--space-4, 1rem);
	inset-block-end: var(--space-4, 1rem);
	width: 3.5rem;
	height: 3.5rem;
	padding: var(--space-2, 0.5rem);
	object-fit: contain;
	border-radius: var(--radius-md, 0.625rem);
	background: var(--color-bg-primary);
	box-shadow:
		0 0 0 1px var(--border-default),
		var(--shadow-md);
}

.tr-toolpage__shot-img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	/*
	 * `top`, not `center`. A product screenshot says what it is in its header
	 * and first rows; a centred 16:10 crop of a tall page shows the middle of a
	 * form. The uncropped copy of the same image is in the reading column, on
	 * the parent's `.single-tool__screenshot` rules.
	 */
	object-fit: cover;
	object-position: top;
}

/* On a phone the image follows the CTA — a visitor should reach "Visit tool"
   without scrolling past a 16:10 screenshot first. */
@media (max-width: 1024px) {
	.tr-toolpage__shot {
		order: 2;
	}
}

/* ==========================================================================
   LAYOUT

   The column shell only. What is INSIDE the main column is the parent's
   `.tool-content__main` — a flex column with its own gap and its own responsive
   steps — and nothing here touches it.
   ========================================================================== */

.tr-toolpage__body {
	padding-block: clamp(2rem, 5vw, var(--space-12, 3rem));
}

.tr-toolpage__layout {
	display: grid;
	gap: clamp(2rem, 4vw, var(--space-10, 2.5rem));
}

/*
 * The rail joins the main column at 1025px and narrows below 1200px rather than
 * disappearing — a 300px rail still holds the CTA, the fact list and the shelf.
 */
@media (min-width: 1025px) {
	.tr-toolpage__layout {
		grid-template-columns: minmax(0, 1fr) 300px;
		align-items: start;
	}
}

@media (min-width: 1201px) {
	.tr-toolpage__layout {
		grid-template-columns: minmax(0, 1fr) 340px;
	}
}

.tr-toolpage__main {
	min-width: 0;
}

/* ==========================================================================
   SECTION HEADS — the parent's markup, this page's typography
   ========================================================================== */

/*
 * The 3px brand bar on every `.content-section__title` is dropped.
 *
 * It is drawn by `.content-section__title::before` in the parent stylesheet,
 * with `padding-left: var(--space-4)` making room for it. On a page with eight
 * or nine sections it repeats eight or nine times, and a decoration repeated
 * that often stops reading as emphasis and starts reading as a list marker —
 * every heading indented off the reading edge that the paragraph under it
 * returns to.
 *
 * `content: none` rather than `display: none`, so the pseudo-element is never
 * generated at all, and the padding it reserved comes back off.
 *
 * The SIZE is the shared `tr-sectionhead__title` scale — the one `/prompts/`,
 * `/tools/` and `/resources/` set their section heads on. Copied as a value
 * rather than by rendering that component, because these headings are the
 * parent template part's own `<h2>` and swapping them for a component would
 * change markup this task deliberately leaves alone.
 */
.tr-toolpage__main .content-section__title {
	padding-left: 0;
	font-family: var(--font-family-heading);
	font-size: clamp(1.125rem, 0.95rem + 0.6vw, 1.375rem);
	font-weight: var(--font-weight-bold, 700);
	line-height: var(--line-height-tight, 1.25);
	letter-spacing: -0.015em;
	margin-bottom: var(--space-5, 1.25rem);
}

.tr-toolpage__main .content-section__title::before {
	content: none;
}

/*
 * The separator between sections.
 *
 * A pseudo-element rather than a `border-top`, and that is not a stylistic
 * preference: the parent sets `border: none !important` on `.content-section`
 * (single-tool.css line 341), so a border here would need `!important` to land
 * and this page would be answering an `!important` with another one. A
 * generated rule sits outside that argument entirely.
 *
 * `> * + .content-section` rather than `.content-section + .content-section`,
 * so the rule also appears when the previous sibling is NOT a section — the
 * screenshot block, the compare row, the jobs band. The first child never gets
 * one, which is what stops a rule appearing directly under the sticky nav.
 */
.tr-toolpage__main > * + .content-section::before {
	content: "";
	display: block;
	height: 1px;
	margin-block-end: var(--space-8, 2rem);
	background: var(--border-default);
}

/* ==========================================================================
   THE PARENT'S CARDS, LAID ON THEIR SIDE

   The parent stacks the icon ABOVE the title in both the feature card and the
   use-case card: a 54px disc, a 20px gap, then two lines of text. That is a
   column of chrome above every item, and with five features and five use cases
   it is five of each — measured, roughly 380px of page spent on decoration that
   repeats the same glyph ten times.

   Turned on its side, the disc is beside the words instead of above them and
   each card loses about 70px. Nothing else about the parent's cards changes:
   same surface, border, radius, hover, glow and icon.
   ========================================================================== */

.tr-toolpage__main .feature-card,
.tr-toolpage__main .use-case-card {
	flex-direction: row;
	align-items: flex-start;
	gap: var(--space-4, 1rem);
	padding: var(--space-5, 1.25rem);
}

.tr-toolpage__main .feature-card__icon-wrapper,
.tr-toolpage__main .use-case-card__icon-wrapper {
	flex: 0 0 auto;
	width: 2.5rem;
	height: 2.5rem;
	margin-bottom: 0;
}

.tr-toolpage__main .feature-card__icon,
.tr-toolpage__main .use-case-card__icon {
	width: 20px;
	height: 20px;
}

/*
 * The use-case glyph keeps the disc it had, but on the CARD's own surface with a
 * border rather than the parent's flat indigo wash.
 *
 * The wash was `rgba(99, 102, 241, 0.1)` — a leftover from before the DS-2026
 * brand migration, and a colour that appears nowhere else on this page. It read
 * as a tint only because the card behind it was darker; with the card gone (see
 * the use-cases block below) it sat straight on the page background as a purple
 * smudge. Card surface plus a hairline gives it the same edge every other boxed
 * thing in this column has, and the glyph itself stays brand.
 */
.tr-toolpage__main .use-case-card__icon-wrapper {
	background: var(--surface-card, var(--color-bg-primary));
	border: 1px solid var(--border-default);
	color: var(--color-primary);
}

.tr-toolpage__main .use-case-card:hover .use-case-card__icon-wrapper {
	background: var(--surface-card, var(--color-bg-primary));
	color: var(--color-primary);
	transform: none;
	box-shadow: none;
}

/* The text column has to be allowed to shrink, or a long unbroken title pushes
   the card wider than its grid track. */
.tr-toolpage__main .feature-card__content,
.tr-toolpage__main .use-case-card__content {
	min-width: 0;
}

/*
 * THE CARD TITLE IS SMALLER THAN THE SECTION HEADING ABOVE IT.
 *
 * The parent sets these to 1.25rem (features) and 1.15rem (use cases) against a
 * section head that tops out at 1.375rem. Twenty pixels under twenty-two is not
 * a hierarchy — read down the column, the card titles and the heading that
 * introduces them are the same voice, and a scan cannot tell which one opens the
 * section. At 1rem they are clearly a level below, and still the strongest thing
 * inside the card.
 */
.tr-toolpage__main .feature-card__title,
.tr-toolpage__main .use-case-card__title {
	margin: 0 0 var(--space-1, 0.25rem);
	font-size: var(--font-size-base, 1rem);
	line-height: 1.35;
}

/*
 * `margin: 0` on the description, and it is what makes the card's padding
 * symmetrical.
 *
 * The description is a `<p>`, so it carries the base stylesheet's paragraph
 * margin. With `padding: var(--space-5)` on all four sides, that margin lands
 * INSIDE the bottom padding and adds to it: measured, 20px of space above the
 * content and roughly 36px below it, on every feature and use-case card. Zeroing
 * it is the whole fix — the padding was already equal.
 */
.tr-toolpage__main .feature-card__desc,
.tr-toolpage__main .use-case-card__desc {
	margin: 0;
	font-size: var(--font-size-sm, 0.875rem);
	line-height: 1.6;
}

/*
 * USE CASES LOSE THE CARD ENTIRELY, and go back to two up.
 *
 * The page already has one grid of bordered cards directly above this one — the
 * features — and a second, identical-looking grid under a different heading is
 * the repeated-card-grid that makes a long page read as one texture. Stripping
 * the surface, the border and the padding leaves the thing that actually
 * distinguishes a use case from a feature: a tinted glyph, a short title and a
 * sentence, in a two-column list.
 *
 * The `.use-case-card__glow` is a decorative blur the parent absolutely
 * positions inside the card and relies on `overflow: hidden` to clip. With no
 * card to clip against it would bleed across the column, so it goes with the
 * surface it belonged to.
 */
.tr-toolpage__main .use-cases-grid {
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--space-6, 1.5rem) var(--space-8, 2rem);
}

.tr-toolpage__main .use-case-card {
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	overflow: visible;
	height: auto;
}

.tr-toolpage__main .use-case-card:hover {
	transform: none;
	box-shadow: none;
	border-color: transparent;
}

.tr-toolpage__main .use-case-card__glow {
	display: none;
}

/* ==========================================================================
   PROS AND CONS — room between the items
   ========================================================================== */

/*
 * The parent's list is a flex column with NO gap, so the rows touch: at
 * `line-height: 1.6` a two-line pro and the one under it read as one four-line
 * paragraph with ticks in it. A gap and a looser line separate the claims from
 * each other, which is the whole job of this block.
 */
.tr-toolpage__main .pros-cons__list {
	gap: var(--space-3, 0.75rem);
}

.tr-toolpage__main .pros-cons__list li {
	line-height: 1.75;
}

/* The marker follows the taller line: it is centred on the first line's cap
   height, not pinned to a pixel offset that was measured against 1.6. */
.tr-toolpage__main .pros-cons__list li::before {
	top: 0.3em;
}

/* ==========================================================================
   WHO IS USING IT — the category chip, three across

   The parent renders these as a wrapping row of bordered pills that sizes each
   one to its label, so five audiences land three-two-ragged with a different
   edge on every tool. A three-column grid gives them one shape and one rhythm,
   and the fill is the rail's category chip — the brand tint this page already
   uses for "a term you could browse by".

   They are NOT links, and that is the one thing the chip treatment must not
   imply: `target_audience` is not a taxonomy on `ai_tool` at all, these are ACF
   rows. So they take the chip's tint and its shape, and none of its hover,
   underline or pointer.
   ========================================================================== */

.tr-toolpage__main .users-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: var(--space-2, 0.5rem);
}

/*
 * THE BOX, NOT THE TINT. These rows now carry the same treatment as
 * `.tr-catnav__link` — the shared category box on `/tools/`, `/ai-categories/`
 * and `/top-100-ai-tools/` — rather than a brand-tinted chip.
 *
 * The tint was doing two jobs at once and only one of them well. It read as the
 * page's only filled-brand surface outside the CTA, which put the loudest
 * treatment on the page's least actionable content, and it did it in a grid of
 * boxes that sit directly above a pricing row and directly below a step list
 * that are both drawn as neutral bordered cards.
 *
 * The values are the catnav's own, resolved locally rather than by reaching for
 * `--tiorai-catnav-*`: those are declared on `.tr-catnav` and this is not one, so
 * reading them here would resolve to nothing. Copied deliberately and narrowly —
 * a shared component's INTERNAL tokens are not a public API, and the alternative
 * (giving these rows the `tr-catnav` classes) would claim they are catnav links,
 * which is the one thing the block below says they must not do.
 *
 * The ICON IS KEPT, on brand. It is the only thing distinguishing an audience
 * row from a category box at a glance, and it stays the brand colour because it
 * is decoration rather than ink that has to reach 4.5:1.
 */
.tr-toolpage__main .user-item {
	display: flex;
	align-items: center;
	gap: var(--space-2, 0.5rem);
	min-width: 0;
	min-height: 48px;
	margin: 0;
	padding: var(--space-2, 0.5rem) var(--space-4, 1rem);
	border: 1px solid var(--border-default);
	border-radius: var(--radius-lg, 0.875rem);
	background: var(--surface-base);
	color: var(--color-text-primary);
	font-size: var(--font-size-sm, 0.875rem);
	font-weight: var(--font-weight-medium, 500);
	line-height: var(--line-height-snug, 1.375);
}

/*
 * Dark needs its own pair for the reason the catnav documents: `--surface-base`
 * resolves to the page colour there, so a box painted with it is an outline
 * drawn on the page with nothing inside it.
 */
[data-theme="dark"] .tr-toolpage__main .user-item {
	background: rgba(255, 255, 255, 0.045);
	border-color: rgba(255, 255, 255, 0.14);
}

.tr-toolpage__main .user-item__icon {
	flex: 0 0 auto;
	display: inline-flex;
	color: var(--color-primary);
}

/*
 * `white-space: normal`, and it is a bug fix.
 *
 * The parent sets `white-space: nowrap` on the label, which is correct for its
 * own layout — a wrapping flex row where each pill sizes itself to its text.
 * In a fixed-track grid it is not: "Sales and marketing professionals" is wider
 * than a 200px column and, unable to wrap, it overflowed its cell and ran under
 * the rail. Measured at 1440 before this line.
 */
.tr-toolpage__main .user-item__text {
	min-width: 0;
	white-space: normal;
	overflow-wrap: anywhere;
}

/* ==========================================================================
   HOW IT WORKS — the prompt single's guide steps

   `/prompts/{slug}/` draws "How to use this prompt" as a numbered sequence with
   NO card around each step: a filled brand disc, the title beside it, the body
   under the title. This page drew the same data as a stack of bordered panels,
   each with a 50px tinted square and 24px of padding, which is five cards to
   carry five sentences — and a card is a container for a self-contained thing,
   which a step in a sequence is not.

   Copied as VALUES rather than by rendering the prompt's component, because the
   markup here is the parent template part's `.step-item` and its two wrapper
   divs, and swapping it would drop the `HowTo` microdata off 14,213 indexed
   pages (see the template).
   ========================================================================== */

.tr-toolpage__main .how-it-works-steps {
	/*
	 * ONE token for the gap, read by the list AND by the connector's height
	 * below. They have to be the same number — the line runs from the bottom of
	 * one disc to the top of the next, so it spans exactly one gap — and two
	 * literals is two chances for them to drift.
	 */
	--tiorai-toolstep-gap: var(--space-7, 1.75rem);

	display: grid;
	gap: var(--tiorai-toolstep-gap);
	margin: 0;
}

.tr-toolpage__main .step-item {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	column-gap: var(--space-4, 1rem);
	align-items: start;

	/* The card comes off. */
	padding: 0;
	margin-bottom: 0;
	background: none;
	border: 0;
	border-radius: 0;
}

.tr-toolpage__main .step-item:hover {
	transform: none;
	box-shadow: none;
	border-color: transparent;
}

.tr-toolpage__main .step-item__number-wrapper {
	grid-column: 1;
	grid-row: 1;
}

/*
 * A fixed circle, so ten discs are the same size whether the numeral is 1 or
 * 10, and the one filled brand object in the reading column. It reads at this
 * size because it is small and there are a handful of them.
 */
.tr-toolpage__main .step-number {
	position: static;
	display: grid;
	place-items: center;
	width: var(--tiorai-toolstep-disc, 2.75rem);
	height: var(--tiorai-toolstep-disc, 2.75rem);
	border-radius: var(--radius-full, 9999px);
	background: var(--color-primary);
	color: var(--color-text-on-brand);
	font-size: var(--font-size-xl, 1.25rem);
	font-weight: var(--font-weight-bold, 700);
	/*
	 * `lining-nums` plus a 1px nudge. `place-items: center` centres the LINE BOX,
	 * and a line box reserves descender space that a digit never uses — so a
	 * numeral centred by the box sits a hair high inside a circle. One pixel down
	 * is the optical correction, and it is the only hand-tuned value on this page.
	 */
	font-variant-numeric: lining-nums tabular-nums;
	padding-block-start: 1px;
	/*
	 * `tabular-nums` so 1 and 4 occupy the same advance width and every numeral
	 * lands on the disc's centre — proportional digits put a "1" visibly left of
	 * where a "4" sits, which reads as four discs that are not quite aligned.
	 * `line-height: 1` with `place-items: center` does the vertical half.
	 */
	font-variant-numeric: tabular-nums;
	line-height: 1;
	text-align: center;
}

/*
 * THE CONNECTOR — a hairline from one disc to the next, so the four steps read
 * as a sequence rather than as four paragraphs that happen to be numbered.
 *
 * Drawn on the step, not on the disc, because it has to span a row whose height
 * is set by the TEXT beside it: from the bottom of this disc, down past a
 * description of unknown length, to the top of the next disc one grid gap away.
 * `100% - disc + gap` is exactly that distance, and it needs no measurement.
 *
 * Not drawn on the last step, which is what stops it trailing into whitespace.
 * `.step-item` already carries `position: relative` from the parent stylesheet
 * and has no `::before` of its own.
 */
.tr-toolpage__main .step-item:not(:last-child)::before {
	content: "";
	position: absolute;
	inset-block-start: var(--tiorai-toolstep-disc, 2.75rem);
	inset-inline-start: calc(var(--tiorai-toolstep-disc, 2.75rem) / 2 - 0.5px);
	width: 1px;
	height: calc(100% - var(--tiorai-toolstep-disc, 2.75rem) + var(--tiorai-toolstep-gap, 1.75rem));
	background: var(--border-default);
}

/*
 * `padding-block-start` optically centres the TITLE against the disc.
 *
 * The prompt page places its title and body as two separate grid items and
 * centres the title in row 1. Here they are both inside `__content-wrapper`, so
 * the alignment has to happen inside that box: a 1rem title at line-height 1.35
 * is 21.6px against a 32px disc, and half the difference is 5px.
 */
.tr-toolpage__main .step-item__content-wrapper {
	grid-column: 2;
	grid-row: 1;
	min-width: 0;
	/*
	 * NO padding. The title's top edge lines up with the disc's top edge, and the
	 * whole step reads from one horizontal.
	 *
	 * It carried `calc((disc - 1.35em) / 2)` to centre the title against the
	 * disc, and that was the wrong correction: it pushed the text down INSIDE the
	 * item, so the space a reader sees between one step's description and the
	 * next step's title was the grid gap plus the padding, while the space
	 * between a title and its own description was neither. Two different rhythms
	 * in one list.
	 *
	 * The separation is the grid gap now — one number, doing one job. See
	 * `--tiorai-toolstep-gap` above.
	 */
}

.tr-toolpage__main .step-item__title {
	margin: 0;
	font-size: var(--font-size-base, 1rem);
	font-weight: var(--font-weight-bold, 700);
	line-height: 1.35;
	color: var(--color-text-primary);
}

.tr-toolpage__main .step-item__description {
	max-width: 68ch;
	margin: var(--space-1, 0.25rem) 0 0;
	font-size: var(--font-size-sm, 0.875rem);
	line-height: 1.65;
	color: var(--color-text-secondary);
}

/* ==========================================================================
   SOURCES — the label beside the links, on brand, smaller

   The list at the foot of the body copy is drawn by
   `.content-section--full-content .entry-content ul li a` in the parent
   stylesheet. Three things change and nothing is reimplemented.
   ========================================================================== */

/*
 * 1. THE LABEL SITS BESIDE THE LINKS.
 *
 * `<h3>Sources</h3>` and its `<ul>` are siblings in `post_content`, with no
 * wrapper to make a row out of — and adding one would mean rewriting stored
 * editor markup with a regex, on 14,531 posts, to solve a layout problem.
 *
 * `:has(+ ul)` selects the heading BY the fact that a list follows it, which is
 * exactly the relationship that makes them a pair, and two inline-blocks put
 * them on one line without changing the layout mode of the prose container
 * around them. A heading that is not followed by a list is untouched.
 */
.tr-toolpage__main .content-section--full-content .entry-content > h3:has(+ ul) {
	display: inline-block;
	vertical-align: top;
	width: 7rem;
	margin: 0;
	padding-top: 0.35rem;
	font-size: var(--font-size-base, 1rem);
}

.tr-toolpage__main .content-section--full-content .entry-content > h3:has(+ ul) + ul {
	display: inline-grid;
	vertical-align: top;
	/* 7rem label + the inline-block whitespace between the two boxes. */
	width: calc(100% - 7.5rem);
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: var(--space-2, 0.5rem);
}

@media (max-width: 640px) {
	.tr-toolpage__main .content-section--full-content .entry-content > h3:has(+ ul),
	.tr-toolpage__main .content-section--full-content .entry-content > h3:has(+ ul) + ul {
		display: block;
		width: auto;
	}

	.tr-toolpage__main .content-section--full-content .entry-content > h3:has(+ ul) {
		margin-bottom: var(--space-3, 0.75rem);
	}
}

/* 2. SMALLER. Two thirds of the original row height. */
.tr-toolpage__main .content-section--full-content .entry-content ul li a {
	gap: var(--space-3, 0.75rem);
	padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
	border-radius: var(--radius-md, 0.625rem);
	font-size: 0.8125rem;
	color: var(--color-text-secondary);
}

/*
 * 3. ON BRAND.
 *
 * The parent draws the glyph tile in `#06b6d4` — the info cyan, left over from
 * before the DS-2026 wave 5 brand migration — and its hover in `--color-accent`,
 * the decorative yellow that CLAUDE.md forbids as an interactive signal (§A-07a:
 * accent is decoration, primary is every interactive role).
 *
 * The tile and its ring move onto brand tints, which follow the theme on their
 * own. The GLYPH cannot: it is a stroke colour inside a data URI, and a data URI
 * has no access to a custom property. So there are two — the light-mode brand
 * value and the dark one — which is the same theme-paired treatment
 * `--color-primary` itself carries.
 */
.tr-toolpage__main .content-section--full-content .entry-content ul li a::before {
	width: 26px;
	height: 26px;
	background-size: 15px;
	background-color: rgba(var(--color-primary-rgb), 0.12);
	border-color: rgba(var(--color-primary-rgb), 0.3);
	border-radius: var(--radius-base, 0.375rem);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A7A10' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'%3E%3C/path%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'%3E%3C/path%3E%3C/svg%3E");
}

[data-theme="dark"] .tr-toolpage__main .content-section--full-content .entry-content ul li a::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B4E227' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'%3E%3C/path%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'%3E%3C/path%3E%3C/svg%3E");
}

.tr-toolpage__main .content-section--full-content .entry-content ul li a:hover {
	border-color: var(--color-primary);
	color: var(--color-text-primary);
	transform: none;
	box-shadow: none;
	background: var(--surface-selected);
}

.tr-toolpage__main .content-section--full-content .entry-content ul li a:hover::before {
	background-color: rgba(var(--color-primary-rgb), 0.22);
	box-shadow: none;
}

.tr-toolpage__main .content-section--full-content .entry-content ul li a:hover::after {
	color: var(--color-primary);
}

/* ==========================================================================
   PRICING — plan cards on a header strip, and a scrolling row past three

   Rebuilt against the g2.com pricing layout the review named: a tinted strip
   carrying the plan NAME, the price large under it, then the description behind
   a rule. That order is what makes a row of plans comparable at a glance — the
   names line up, the prices line up, and the prose is below both instead of
   between them.

   The parent's `.pricing-plans` grid rules key off `:has(.pricing-plan:nth-child(n))`
   and set one to four columns; the track below overrides the layout while the
   card keeps the parent's surface, border and radius.
   ========================================================================== */

.tr-toolpage__main .tr-toolplans {
	--tiorai-toolplans-min: 260px;

	display: grid;
	gap: var(--space-3, 0.75rem);
	min-width: 0;
}

.tr-toolpage__main .tr-toolplans__track {
	grid-template-columns: repeat(auto-fit, minmax(var(--tiorai-toolplans-min), 1fr));
	gap: var(--space-4, 1rem);
	min-width: 0;
}

/*
 * FOUR OR MORE: one row that scrolls, with snap points on the cards.
 *
 * `grid-auto-flow: column` plus a fixed track width, so the cards keep their
 * width instead of compressing to fit — which is what a grid would otherwise do
 * and what would make a four-plan row unreadable rather than scrollable.
 *
 * EXACTLY THREE WHOLE CARDS, never a sliced fourth. The width comes from the
 * shared carousel's own count formula rather than from `minmax(260px, 1fr)`,
 * which was the old sizing and which cut the third card the moment the measure
 * fell below 812px: three 260px cards plus two 16px gaps do not fit an 836px
 * column once it narrows, and `1fr` cannot shrink below the 260px floor.
 *
 * Stating the COUNT instead of a minimum inverts that — the row always ends on a
 * card boundary at every width, and a breakpoint below is one number.
 *
 * `--tiorai-carousel-visible` MUST be set on the shell, not here on the track.
 * See the compare row's block below for the measurement behind that rule.
 *
 * The scrollbar is hidden because the arrows and the dots are the affordance;
 * `overscroll-behavior-x: contain` stops a swipe that reaches the end from
 * dragging the page sideways with it.
 */
.tr-toolpage__main .tr-toolplans__shell {
	--tiorai-carousel-visible: 3;
	--tiorai-carousel-gap: var(--space-4, 1rem);

	/* The fades blend into the reading column, which is the page surface. */
	--tiorai-carousel-fade: var(--color-bg-primary);

	min-width: 0;
}

/*
 * FLEX, NOT GRID, and that is a deliberate dodge rather than a preference.
 *
 * The parent stylesheet carries, inside its `max-width: 768px` block:
 *
 *     .pricing-plans, … { grid-template-columns: 1fr !important; }
 *
 * `.pricing-plans` is this track — the class is kept so the parent's card,
 * surface and border rules keep applying — so on a phone that `!important`
 * overrode `grid-template-columns: none` and gave the track ONE explicit column
 * beside the auto ones. In a scroll container that column's `1fr` has no free
 * space to take a share of, so it collapsed: measured at 375px, the first plan
 * card was **2px wide** while the other three were 328px.
 *
 * That is a pre-existing conflict — the old `minmax(260px, 1fr)` sizing hit the
 * same rule the same way — and it is fixed here rather than logged because this
 * revision owns the row.
 *
 * Two ways out: match the `!important` from a longer selector, or stop using the
 * property it targets. `grid-template-columns` is meaningless on a flex
 * container, so the parent's declaration becomes inert instead of contested, and
 * nobody has to maintain a pair of duelling `!important`s. Flex reproduces this
 * layout exactly: the cards are a single non-wrapping row of fixed-width items.
 */
.tr-toolpage__main .tr-toolplans--carousel .tr-toolplans__track {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--tiorai-carousel-gap);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	padding-block-end: var(--space-1, 0.25rem);
}

/* `flex-basis` carries the width and `flex-shrink: 0` is what stops four cards
   compressing to fit instead of overflowing — which is the whole point of a
   scrolling row. */
.tr-toolpage__main .tr-toolplans--carousel .pricing-plan {
	flex: 0 0 var(--tiorai-carousel-item-width);
	min-width: 0;
}

/* Two on a tablet, one on a phone: three plan cards in a 640px measure leave
   each one ~200px, which is narrower than the widest price string plus its
   padding. */
@media (max-width: 900px) {
	.tr-toolpage__main .tr-toolplans__shell {
		--tiorai-carousel-visible: 2;
	}
}

@media (max-width: 640px) {
	.tr-toolpage__main .tr-toolplans__shell {
		--tiorai-carousel-visible: 1;
	}
}

.tr-toolpage__main .tr-toolplans--carousel .tr-toolplans__track::-webkit-scrollbar {
	display: none;
}

.tr-toolpage__main .tr-toolplans--carousel .pricing-plan {
	scroll-snap-align: start;
}

/* --- The card ------------------------------------------------------------ */

.tr-toolpage__main .pricing-plan {
	padding: 0;
	overflow: hidden;
	background: var(--surface-card, var(--color-bg-primary));
	border-color: var(--border-default);
	min-width: 0;
}

.tr-toolpage__main .pricing-plan:hover {
	transform: none;
	box-shadow: none;
	border-color: var(--color-border-hover);
}

/* The name strip: a tinted band, so the names read as a row across the cards. */
.tr-toolpage__main .pricing-plan__header {
	margin: 0;
	padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
	background: var(--surface-sunken, var(--color-bg-tertiary));
	border-bottom: 1px solid var(--border-default);
}

.tr-toolpage__main .pricing-plan__name {
	margin: 0;
	font-size: var(--font-size-sm, 0.875rem);
	font-weight: var(--font-weight-semibold, 600);
	line-height: 1.3;
	color: var(--color-text-primary);
}

.tr-toolpage__main .pricing-plan__price {
	margin: 0;
	padding: var(--space-4, 1rem) var(--space-4, 1rem) var(--space-3, 0.75rem);
	font-size: var(--font-size-2xl, 1.5rem);
	font-weight: var(--font-weight-bold, 700);
	line-height: 1.15;
	/*
	 * `tabular-nums` so "$0" and "$300" share a digit width and the prices sit on
	 * one optical line across the row — which is the entire point of a comparison
	 * strip.
	 */
	font-variant-numeric: tabular-nums;
	color: var(--color-text-primary);
	overflow-wrap: anywhere;
}

.tr-toolpage__main .pricing-plan__description {
	margin: 0;
	padding: var(--space-4, 1rem);
	border-top: 1px solid var(--border-default);
	font-size: var(--font-size-sm, 0.875rem);
	line-height: 1.6;
	color: var(--color-text-secondary);
}

.tr-toolpage__main .pricing-plan__description > :first-child { margin-block-start: 0; }
.tr-toolpage__main .pricing-plan__description > :last-child { margin-block-end: 0; }

/* --- The dots ------------------------------------------------------------ */

.tr-toolplans__pager {
	display: flex;
	justify-content: center;
	gap: var(--space-2, 0.5rem);
	padding-block-start: var(--space-1, 0.25rem);
}

.tr-toolplans__dot {
	appearance: none;
	border: 0;
	cursor: pointer;
	padding: 0;
	/* 8px of ink in a 24px target: the dot is small, the hit area is not. */
	width: 1.5rem;
	height: 1.5rem;
	background: none;
	display: grid;
	place-items: center;
}

.tr-toolplans__dot::before {
	content: "";
	width: 0.5rem;
	height: 0.5rem;
	border-radius: var(--radius-full, 9999px);
	background: var(--border-default);
	transition: background-color 150ms ease-out, width 150ms ease-out;
}

.tr-toolplans__dot:hover::before {
	background: var(--color-text-tertiary);
}

/* The current dot stretches rather than only changing colour, so the state is
   legible without relying on hue. */
.tr-toolplans__dot[aria-current="true"]::before {
	width: 1.25rem;
	background: var(--color-primary);
}

.tr-toolplans__dot:focus-visible {
	outline: var(--tiorai-focus-ring-width, 2px) solid var(--tiorai-focus-ring-color);
	outline-offset: 0;
	border-radius: var(--radius-full, 9999px);
}

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

/* ==========================================================================
   COMPARE SIMILAR TOOLS — the shared card, in the shared carousel past three
   ========================================================================== */

.tr-toolcompare__deck {
	margin: calc(var(--space-3, 0.75rem) * -1) 0 var(--space-5, 1.25rem);
	max-width: 62ch;
	font-size: var(--font-size-sm, 0.875rem);
	line-height: var(--line-height-normal, 1.5);
	color: var(--color-text-secondary);
}

/*
 * SHORT ROW: fixed-width cards, centred.
 *
 * `repeat(auto-fit, minmax(220px, 1fr))` was the old sizing and it stretched
 * whatever it was given to fill the measure, so a two-tool pool drew two
 * half-width cards and a one-tool pool drew a single 836px one — cards three
 * times the width of the identical cards in the bands below. The row now uses the
 * SAME card width as the scrolling state and centres what it holds, which is what
 * makes a short row read as a short row rather than as a different component.
 *
 * `safe center` rather than `center`: with plain `center`, a grid whose content
 * overflows its container centres the overflow too, and the start of it becomes
 * unreachable by scrolling. `safe` falls back to `start` exactly in that case.
 * The carousel state below can overflow by construction, so this is not
 * hypothetical.
 */
.tr-toolcompare__track:not(.tr-toolcompare__track--carousel) {
	--tiorai-carousel-visible: 3;
	--tiorai-carousel-gap: var(--space-4, 1rem);

	/*
	 * The formula is REDECLARED here, and it has to be. It is defined on
	 * `.tr-carousel`, a class the static row does not carry — without this line
	 * `grid-auto-columns: var(--tiorai-carousel-item-width)` resolves to nothing,
	 * the declaration is invalid at computed-value time, and the columns fall back
	 * to `auto` and size to content.
	 *
	 * Declared on the SAME element as the count it reads, which is the rule the
	 * carousel block below explains. Media queries on this element still work:
	 * substitution uses the element's final cascaded value, so overriding the
	 * count at a breakpoint re-resolves the width. It is only overriding it on a
	 * DIFFERENT element that silently fails.
	 */
	--tiorai-carousel-item-width: calc(
		(100% - (var(--tiorai-carousel-visible) - 1) * var(--tiorai-carousel-gap))
		/ var(--tiorai-carousel-visible)
	);

	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: var(--tiorai-carousel-item-width);
	grid-template-columns: none;
	justify-content: safe center;
	gap: var(--tiorai-carousel-gap);
	min-width: 0;
}

/*
 * SCROLLING ROW: the count moves to the SHELL, and that is the whole fix.
 *
 * `--tiorai-carousel-item-width` is declared on `.tr-carousel` as a formula over
 * `--tiorai-carousel-visible`. A custom property whose value contains `var()` is
 * substituted ON THE ELEMENT THAT DECLARES IT, and the resulting token stream is
 * what inherits — so by the time the property reached the track, the component's
 * default of 7 was already baked into it and this override was a no-op.
 *
 * Measured at 1440 before the move: computed `--tiorai-carousel-item-width` read
 * `calc((100% - (7 - 1) * 1rem) / 7)` and the cards came out **106px** wide. Six
 * of them fitted the 836px column, so the track never overflowed, the script
 * never added `is-scrollable`, the arrows stayed hidden — and each card's
 * "Compare with {Tool}" button, which cannot wrap, overflowed its 106px cell so
 * the six overlapped into one strip.
 *
 * `/resources/` sets this token on its shell and has always rendered correctly,
 * which is why the bug never surfaced there. Set it on the shell.
 */
/*
 * THREE, not four. This row lives in the 836px reading column, not the 1216px
 * band — and once the arrow lane takes 104px of it, four comparison cards get
 * 173px each, which is narrower than the two entity tiles plus the "VS" between
 * them. Measured: the first card's name broke to "Perplex / ity AI" mid-word.
 * Three gives 233px and the pair fits on one line.
 *
 * The TEMPLATE's carousel threshold is kept in step at `> 3` — a row that shows
 * three and only grows arrows past four would have a fourth card unreachable
 * with no control to reach it.
 */
.tr-toolcompare.tr-carousel {
	--tiorai-carousel-visible: 3;
	--tiorai-carousel-gap: var(--space-4, 1rem);
	--tiorai-carousel-fade: var(--color-bg-primary);
}

/* Scrolling by construction, so it starts at the first card rather than
   centring. The track keeps the shell's card width through inheritance. */
.tr-toolcompare__track--carousel {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: var(--tiorai-carousel-item-width);
	grid-template-columns: none;
	gap: var(--tiorai-carousel-gap);
	justify-content: start;
	min-width: 0;
}

@media (max-width: 1200px) {
	.tr-toolcompare.tr-carousel,
	.tr-toolcompare__track:not(.tr-toolcompare__track--carousel) {
		--tiorai-carousel-visible: 3;
	}
}

@media (max-width: 900px) {
	.tr-toolcompare.tr-carousel,
	.tr-toolcompare__track:not(.tr-toolcompare__track--carousel) {
		--tiorai-carousel-visible: 2;
	}
}

@media (max-width: 640px) {
	.tr-toolcompare.tr-carousel,
	.tr-toolcompare__track:not(.tr-toolcompare__track--carousel) {
		--tiorai-carousel-visible: 1;
	}
}

.tr-toolcompare__item {
	display: flex;
	flex-direction: column;
	gap: var(--space-3, 0.75rem);
	min-width: 0;
	scroll-snap-align: start;
}

/* The card fills the item so a short description does not leave the compare
   button floating half way up the column. */
.tr-toolcompare__item > .card-base,
.tr-toolcompare__item > .tool-card {
	flex: 1 1 auto;
}

/*
 * THE COMPARISON CARD FILLS THE CELL.
 *
 * The row renders `tr-vs-card` — the `ai_comparison` archive's own card — so the
 * component owns everything inside it and this file sets only the one thing a
 * carousel cell can tell it: be as tall as your neighbours.
 *
 * What this replaced: a tool card with a rating line and a "Compare with {Tool}"
 * button stacked underneath. That composite said the same thing twice (the card
 * named the other tool, then the button named it again) and it was the source of
 * the ragged row — the button's label is a catalogue title, so "Compare with
 * Perplexity AI" wrapped to two lines while "Compare with Claude" stayed on one,
 * and every card in the row inherited a different height.
 *
 * `.tr-toolcompare__rating`, `__rating-count` and `__meta` are deleted with it;
 * the comparison card carries its own topic line.
 */
.tr-toolcompare__item > .tr-vs-card {
	flex: 1 1 auto;
	height: 100%;
}

/* The controls sit above the row rather than over its edges: overlaid arrows
   cover the first and last card exactly when the visitor is reading them. */
.tr-toolcompare__controls {
	margin-block-end: var(--space-3, 0.75rem);
}

/* The pricing section's honesty note, the one thing in the reading column this
   file adds to the parent's presentation. */
.tr-toolpage__pricing-note {
	margin: var(--space-4, 1rem) 0 0;
	max-width: 68ch;
	font-size: var(--font-size-xs, 0.75rem);
	line-height: var(--line-height-normal, 1.5);
	color: var(--color-text-tertiary);
}

/*
 * The parent's parts assume they sit inside a `.container` and re-apply one of
 * their own. Inside this column that produces a second, narrower measure and a
 * visible inset. Neutralised for this page only.
 */
.tr-toolpage__main .container {
	max-width: none;
	padding-inline: 0;
	width: 100%;
}

/* ==========================================================================
   THE SHARE ROW'S DOUBLED RULE

   The shared component draws TWO enclosures around one block: `.tr-share-row` is
   a rule-bounded band (border-top and border-bottom, 24px of padding inside
   each), and `.tr-share-row__buttons` inside it is a bordered panel. Measured on
   this page: the panel's bottom edge at y=6044 and the band's at y=6069 — two
   horizontal lines 25px apart with nothing but padding between them.

   The panel is the one that goes. Every button in it already carries its own
   border, so the panel was a box drawn around a row of boxes; the band's two
   rules are what separate the block from the sections above and below it, and
   dropping the bottom one instead would leave the band bounded on one side only
   — which is the asymmetry task C-37 existed to fix.

   SCOPED TO THIS PAGE. `template-parts/shared/share-row.php` also renders on the
   prompt, resource and glossary singles, and the redundancy is theirs too, but
   restyling a shared component from one page's brief is the blast radius
   CLAUDE.md 9.4a warns about. Logged as a follow-up rather than taken here.
   ========================================================================== */

.tr-toolpage__main .tr-share-row__buttons {
	padding: 0;
	border: 0;
	background: none;
}

/* ==========================================================================
   MADE BY — the company record, on this page's card treatment

   Three columns on desktop: the identity tile, the record, the action. Two rows
   below 640px, where a 56px tile plus a name plus a button do not share a line.

   The parent's version is superseded, not extended: `.content-section--company__card`
   is 8px of padding around an 80px logo with a 1.5rem name that outweighed the
   `<h2>` above it. Nothing here reaches for those classes, and the parent's rules
   are left untouched — this page simply stops emitting the markup they style.
   ========================================================================== */

/*
 * THE SECTION'S OWN TRAILING SPACE. The parent gives
 * `.content-section--company` `margin-bottom: var(--space-12)` — 48px — on top of
 * the rhythm every other `.content-section` on this page already carries, so the
 * band ended with roughly a screen-eighth of empty column before the share row.
 * Zeroed here; the section spaces like its neighbours.
 */
.tr-toolpage__main .content-section--company {
	margin-bottom: 0;
}

.tr-toolpage__main .tr-toolmaker {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: start;
	gap: var(--space-4, 1rem);
	padding: var(--space-4, 1rem);
	border: 1px solid var(--border-default);
	border-radius: var(--radius-lg, 0.875rem);
	background: var(--surface-card, var(--color-bg-primary));
}

.tr-toolmaker__tile {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 3.5rem;
	height: 3.5rem;
	overflow: hidden;
	border: 1px solid var(--border-default);
	border-radius: var(--radius-md, 0.625rem);
	background: var(--surface-sunken, var(--color-bg-tertiary));
}

.tr-toolmaker__logo {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.tr-toolmaker__initials {
	font-size: var(--font-size-lg, 1.125rem);
	font-weight: var(--font-weight-bold, 700);
	color: var(--color-text-secondary);
	/* The glyph pair is centred optically: `place-items: center` centres a line
	   box, and a line box reserves descender space initials never use. */
	transform: translateY(1px);
}

.tr-toolmaker__body {
	min-width: 0;
}

/* The label the section heading does not carry. "Made by" names the
   relationship; this names the thing. */
.tr-toolmaker__eyebrow {
	margin: 0 0 var(--space-1, 0.25rem);
	font-size: var(--font-size-xs, 0.75rem);
	font-weight: var(--font-weight-semibold, 600);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-text-tertiary);
}

/*
 * Subordinate to the `<h2>` above it, which is what an `<h3>` inside a section
 * should look like. It was 1.5rem bold against a 1.375rem heading.
 */
.tr-toolmaker__name {
	margin: 0;
	font-size: var(--font-size-base, 1rem);
	font-weight: var(--font-weight-semibold, 600);
	line-height: var(--line-height-snug, 1.375);
}

.tr-toolmaker__name a {
	color: var(--color-text-primary);
	text-decoration: none;
}

.tr-toolmaker__name a:hover {
	color: var(--color-text-primary);
	text-decoration: underline;
}

/*
 * Two lines, clamped. The snippet is `wp_trim_words( …, 24 )`, which is a word
 * count and not a line count — at this width 24 words is two lines for most
 * companies and three for the ones with long names in them, and a card whose
 * height depends on the company makes a row of them ragged.
 */
.tr-toolmaker__desc {
	margin: var(--space-1, 0.25rem) 0 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: var(--font-size-sm, 0.875rem);
	line-height: var(--line-height-normal, 1.5);
	color: var(--color-text-secondary);
}

/*
 * The continuation of the description, so it sits under it and reads as text
 * rather than as a control. Brand colour carries it; the arrow carries the
 * affordance. Same treatment as `.tr-catnav__all`.
 */
.tr-toolmaker__link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1, 0.25rem);
	margin-block-start: var(--space-2, 0.5rem);
	font-size: var(--font-size-sm, 0.875rem);
	font-weight: var(--font-weight-medium, 500);
	color: var(--color-primary);
	text-decoration: none;
}

.tr-toolmaker__link:hover {
	color: var(--color-primary);
	text-decoration: underline;
}

.tr-toolmaker__link svg {
	flex: none;
	transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}

.tr-toolmaker__link:hover svg {
	transform: translateX(2px);
}

.tr-toolmaker__link:focus-visible {
	outline: var(--tiorai-focus-ring-width, 2px) solid var(--tiorai-focus-ring-color);
	outline-offset: 2px;
	border-radius: var(--radius-sm, 0.375rem);
}

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

@media (max-width: 640px) {
	.tr-toolpage__main .tr-toolmaker {
		gap: var(--space-3, 0.75rem);
	}
}

/* ==========================================================================
   THE RAIL

   The prompt single's widget treatment, on the parent's shared sidebar shell.
   `/prompts/{slug}/`, `/glossary/{term}/` and this page now draw the same quiet
   card, and the only reason this is a restyle rather than a shared class is that
   `.tr-promptpage__widget` is scoped to a page the tool single is not.
   ========================================================================== */

.tr-toolpage__layout .tr-toolrail {
	min-width: 0;
	gap: var(--space-4, 1rem);
}

/*
 * Sticky, at its natural height, with NO scroll container of its own.
 *
 * It was `position: sticky` PLUS `max-height: calc(100vh - …)` and
 * `overflow-y: auto`, and the cap was the defect — the same one prompt-single.css
 * records and removed for the same reason. The rail's widgets exceed the cap on
 * an average viewport, so the aside grew its own scrollbar and the page carried
 * two side by side: reaching the Report widget meant scrolling a 340px column
 * while the page under it stayed still, and a wheel over the rail moved the
 * wrong thing.
 *
 * So the cap and the overflow are gone and the pinning stays. The rail is as
 * tall as its content, and the first widget in it — "Try this tool" — is the one
 * that stays on screen for the whole page, which is why the template puts it
 * first.
 */
@media (min-width: 1025px) {
	.tr-toolpage__layout .tr-toolrail.sidebar-base--sticky {
		position: sticky;
		top: calc(
			var(--tiorai-secnav-top, 65px) +
			var(--tiorai-secnav-h, 2.875rem) +
			var(--space-5, 1.25rem)
		);
	}
}

.tr-toolrail .sidebar-widget {
	padding: var(--space-5, 1.25rem);
	background: var(--tiorai-ts-flat);
	border: 1px solid var(--tiorai-ts-border);
	border-radius: var(--radius-md, 0.625rem);
}

/*
 * The title, and the three resets are load-bearing rather than defensive.
 *
 * modules/tool/assets/css/single-tool.css line 1986 styles `.sidebar-widget__title`
 * globally as a HEADER BAR — `background: var(--color-bg-tertiary)`, `padding:
 * var(--space-4) var(--space-6)` and a bottom rule — for the sidebar layout this
 * page no longer uses. That file is a declared dependency of this one, so the
 * cascade order is right and every property this rule names wins; the three it
 * did NOT name went on applying, and the widget shipped with a filled, inset
 * caption bar inside an otherwise flat card.
 */
.tr-toolrail .sidebar-widget__title {
	margin: 0 0 var(--space-4, 1rem);
	padding: 0;
	background: none;
	border-bottom: 0;
	font-size: 0.75rem;
	font-weight: var(--font-weight-bold, 700);
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--color-text-tertiary);
}

/* --- The share card, unwrapped ------------------------------------------- */

/*
 * `.tr-share-card` draws its own bordered, padded card. Left inside the shared
 * sidebar shell it would sit in a second one — two borders and 40px of padding
 * around a component that already has both. This strips the wrapper and lets the
 * component be the card, which is how the prompt and resource rails render it.
 */
.tr-toolrail .sidebar-widget.tr-toolrail__widget--bare {
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
}

.tr-toolrail .tr-toolrail__widget--bare .sidebar-widget__body {
	font-size: inherit;
	color: inherit;
}

/* --- About this tool ----------------------------------------------------- */

.tr-toolabout__byline {
	display: flex;
	align-items: center;
	gap: var(--space-3, 0.75rem);
	margin-block-end: var(--space-4, 1rem);
}

.tr-toolabout__avatar {
	flex: 0 0 auto;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: var(--radius-full, 9999px);
}

.tr-toolabout__byline-text {
	display: grid;
	min-width: 0;
}

.tr-toolabout__byline-label {
	font-size: var(--font-size-xs, 0.75rem);
	color: var(--color-text-tertiary);
}

.tr-toolabout__byline-name {
	font-size: 0.8125rem;
	font-weight: var(--font-weight-semibold, 600);
	color: var(--color-text-primary);
}

.tr-toolabout__dates {
	margin: 0;
	display: grid;
	gap: var(--space-2, 0.5rem);
}

.tr-toolabout__date {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-3, 0.75rem);
	font-size: 0.8125rem;
}

.tr-toolabout__date dt {
	flex: none;
	color: var(--color-text-tertiary);
}

.tr-toolabout__date dd {
	margin: 0;
	font-weight: var(--font-weight-semibold, 600);
	text-align: right;
	color: var(--color-text-primary);
}

.tr-toolabout__freshness {
	margin: var(--space-3, 0.75rem) 0 0;
	padding-block-start: var(--space-3, 0.75rem);
	border-top: 1px solid var(--tiorai-ts-rule);
	font-size: var(--font-size-xs, 0.75rem);
	line-height: var(--line-height-snug, 1.375);
	color: var(--color-text-tertiary);
}

/* --- Tool information ---------------------------------------------------- */

/*
 * The prompt rail's fact row: label left, value right, hairline between. The one
 * departure is that a value here can be several chips rather than one string, so
 * the value column wraps instead of being a single right-aligned line.
 */
.tr-toolfacts {
	margin: 0;
	display: grid;
	gap: var(--space-3, 0.75rem);
}

.tr-toolfacts__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-3, 0.75rem);
	padding-bottom: var(--space-3, 0.75rem);
	border-bottom: 1px solid var(--tiorai-ts-rule);
}

.tr-toolfacts__row:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.tr-toolfacts__label {
	flex: none;
	font-size: 0.8125rem;
	color: var(--color-text-tertiary);
}

.tr-toolfacts__value {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
	gap: var(--space-2, 0.5rem);
	min-width: 0;
	font-size: 0.8125rem;
	font-weight: var(--font-weight-semibold, 600);
	text-align: right;
	color: var(--color-text-primary);
}

/*
 * The chip. Quieter than the boxed version it replaces — a fill and no border,
 * because five bordered rows in a card that itself has a border reads as a grid
 * of little boxes rather than as a list of facts.
 */
.tr-toolfacts__chip {
	display: inline-flex;
	align-items: center;
	padding: 0.15rem var(--space-2, 0.5rem);
	border-radius: var(--radius-sm, 0.25rem);
	font-size: 0.75rem;
	font-weight: var(--font-weight-medium, 500);
	line-height: 1.5;
	color: var(--color-text-secondary);
	background: var(--surface-interactive, var(--color-bg-tertiary));
	text-decoration: none;
}

a.tr-toolfacts__chip {
	color: var(--tiorai-archive-link, var(--color-text-link));
}

a.tr-toolfacts__chip:hover,
a.tr-toolfacts__chip:focus-visible {
	background: var(--surface-selected);
}

.tr-toolfacts__more {
	font-size: 0.75rem;
	font-weight: var(--font-weight-normal, 400);
	color: var(--color-text-tertiary);
}

.tr-toolfacts__flag {
	font-size: 1.05em;
	line-height: 1;
}

/* --- Report -------------------------------------------------------------- */

.tr-toolrail__report-text {
	margin: 0 0 var(--space-3, 0.75rem);
	font-size: 0.8125rem;
	line-height: var(--line-height-normal, 1.5);
	color: var(--color-text-secondary);
}

/*
 * The PARENT's report band is suppressed, and only the band.
 *
 * modules/tool/template-parts/report-issue.php couples one full-width section
 * and three modals in one file. The modals are the target of the rail's Report
 * button and carry the Fluent Forms wiring; the band would be the same call to
 * action a second time, at full width, directly under the rail that already
 * holds it. Forking the file to separate them would put a second copy of a live
 * moderated-feedback dialog in this theme. One declaration, and the template
 * says the same thing at the point of the `get_template_part()` call.
 */
.tr-tool-single .single-tool__report-issue {
	display: none;
}

/* ==========================================================================
   BANDS — embed badge, alternatives, related

   `scroll-margin-top` is NOT set on any of them: section-nav.css already hangs
   it on every `[data-tiorai-section]`, which is what these carry.
   ========================================================================== */

.tr-toolpage__embed-band {
	padding-block: clamp(2rem, 5vw, var(--space-12, 3rem));
	border-top: 1px solid var(--border-default);
}

.tr-toolpage__band {
	padding-block: clamp(2rem, 5vw, var(--space-12, 3rem));
	border-top: 1px solid var(--border-default);
}

.tr-toolpage__band--related {
	background: var(--color-bg-secondary);
}

/* ==========================================================================
   THE ARROWS GET A LANE OF THEIR OWN

   The component pins them at `left/right: var(--space-1)` — 4px INSIDE the track
   — so each disc sits on top of the first and last card, over the very content
   being read.

   THE LANE IS INSIDE THE SHELL, not outside it, and that is the whole reason
   this works. Hanging the discs out into the page gutter was the first attempt
   and it does not survive the page it is on: the compare and pricing rows live
   in the reading column with the sticky rail immediately to their right, so an
   arrow far enough out to clear the cards lands on the rail — and on the
   full-width band the right gutter measures only 79px at 1425 and collapses
   toward 16px further down, where an outside arrow becomes horizontal scroll.

   So the SHELL takes inline padding and the arrows sit in it. Nothing hangs into
   the gutter, nothing can overlap the rail, nothing can overflow the document,
   and the cards simply start 52px in. 52px = the 40px disc plus 12px of air.

   The padding goes on the SHELL and never on the track: the item-width formula
   resolves `100%` against the track, so padding there would shrink the box the
   cards are measured from and push a sliver of the next card into view — the
   exact artefact assets/css/unified/carousel.css was written to remove. On the
   shell it is safe, and it correctly narrows the cards to the space that is
   actually theirs.

   From 769px up only. At phone widths a 104px lane out of a 328px measure would
   leave a 224px card, and a one-up row is swiped rather than clicked, so the
   narrow widths keep the component's own inset position.
   ========================================================================== */

@media (min-width: 769px) {
	.tr-toolplans__shell.tr-carousel,
	.tr-toolcompare.tr-carousel,
	.tr-toolpage__row.tr-carousel {
		--tiorai-toolarrow-lane: 52px;

		padding-inline: var(--tiorai-toolarrow-lane);
	}

	/*
	 * `.tr-carousel__controls` is `position: absolute; inset: 0`, and an absolutely
	 * positioned box resolves its offsets against the containing block's PADDING
	 * box — so `left: 6px` here is 6px into the lane, not 6px into the cards.
	 */
	.tr-toolplans__shell .tr-carousel__btn[data-tiorai-carousel-prev],
	.tr-toolcompare .tr-carousel__btn[data-tiorai-carousel-prev],
	.tr-toolpage__row .tr-carousel__btn[data-tiorai-carousel-prev] {
		left: 6px;
	}

	.tr-toolplans__shell .tr-carousel__btn[data-tiorai-carousel-next],
	.tr-toolcompare .tr-carousel__btn[data-tiorai-carousel-next],
	.tr-toolpage__row .tr-carousel__btn[data-tiorai-carousel-next] {
		right: 6px;
	}

	/*
	 * The edge fades are the component's "there is more this way" paint, and they
	 * are absolutely positioned to the same padding box — so with a lane in place
	 * they would wash the lane rather than the cards. Switched off on these four
	 * rows: the arrows now sit in clear space and say the same thing better.
	 */
	.tr-toolplans__shell.tr-carousel::before,
	.tr-toolplans__shell.tr-carousel::after,
	.tr-toolcompare.tr-carousel::before,
	.tr-toolcompare.tr-carousel::after,
	.tr-toolpage__row.tr-carousel::before,
	.tr-toolpage__row.tr-carousel::after {
		content: none;
	}
}

/* ==========================================================================
   THE CARD ROW — one treatment for all three bands of tool cards

   "Compare similar tools" in the reading column, "Alternative Tools" and
   "More {category} tools" in the full-width bands below it all render the SAME
   shared tool card, and they now share one behaviour:

     up to four cards   static row, fixed card width, CENTRED
     five or more       the shared `tr-carousel`: arrows, snapping, wrap-around

   Four is the row width, so the threshold is exactly "does this fit". The three
   bands crossing it at the same count is the point — a visitor who has just used
   the arrows on one should not find the identical row below it behaving
   differently.

   `--tiorai-carousel-visible` IS SET ON THE SHELL, never on the track. See the
   compare row's block above for the measurement behind that rule; it is the one
   mistake this whole revision exists to correct.
   ========================================================================== */

.tr-toolpage__row {
	--tiorai-carousel-visible: 4;
	--tiorai-carousel-gap: var(--space-5, 1.25rem);

	/*
	 * Redeclared so the STATIC row works too — it carries no `.tr-carousel` class
	 * and would otherwise resolve this to nothing and fall back to `auto` columns.
	 * On the carousel form this rule and the component's land on the same element,
	 * this file prints later, and both read the same count, so the two agree.
	 */
	--tiorai-carousel-item-width: calc(
		(100% - (var(--tiorai-carousel-visible) - 1) * var(--tiorai-carousel-gap))
		/ var(--tiorai-carousel-visible)
	);

	/* The related band sits on `--color-bg-secondary`, so its fades have to blend
	   into that rather than into the page. Overridden for the alternatives band,
	   which sits on the page surface. */
	--tiorai-carousel-fade: var(--color-bg-secondary);

	margin-block-start: var(--space-6, 1.5rem);
	min-width: 0;
}

.tr-toolpage__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: var(--tiorai-carousel-item-width);
	gap: var(--tiorai-carousel-gap);
	justify-content: safe center;
	min-width: 0;
}

/*
 * THIS IS THE SCROLL CONTAINER, and saying so is not optional.
 *
 * The compare row wraps its track in the component's own `.tr-carousel__viewport`,
 * which brings `overflow-x: auto` with it. These two bands do not — the track
 * itself carries `data-tiorai-carousel-viewport` — so without these declarations
 * the element was a plain overflowing grid:
 *
 *   - twelve cards painted straight out past the shell, which is the extra
 *     half-card that appeared beyond the right-hand arrow, and
 *   - `scrollBy()` had nothing to scroll, so both arrows did nothing when
 *     clicked. The carousel script still SHOWED them, because its overflow test
 *     is `scrollWidth - clientWidth`, and that is true of any overflowing box
 *     whether or not it scrolls.
 *
 * Snapping, contained overscroll and the hidden scrollbar come with it, matching
 * the other two rows exactly.
 */
.tr-toolpage__track--carousel {
	justify-content: start;
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.tr-toolpage__track--carousel::-webkit-scrollbar {
	display: none;
}

/* The cell exists so the card has something to stretch inside: a snap point and
   a full-height box are the wrapper's job, not the shared card's. */
.tr-toolpage__cell {
	display: flex;
	flex-direction: column;
	min-width: 0;
	scroll-snap-align: start;
}

.tr-toolpage__cell > * {
	flex: 1 1 auto;
}

@media (max-width: 1200px) {
	.tr-toolpage__row {
		--tiorai-carousel-visible: 3;
	}
}

@media (max-width: 900px) {
	.tr-toolpage__row {
		--tiorai-carousel-visible: 2;
	}
}

@media (max-width: 640px) {
	.tr-toolpage__row {
		--tiorai-carousel-visible: 1;
	}
}

/*
 * The alternatives band's head, brought onto the same treatment as the related
 * band's directly below it.
 *
 * The parent part draws a CENTRED heading in brand colour with a centred deck;
 * the related band renders the shared `tr-sectionhead` left-aligned in ink. Two
 * bands of the same object, stacked, announcing themselves two different ways is
 * the inconsistency this rebuild exists to remove — and on a page whose every
 * other h2 is left-aligned ink, the centred brand-coloured one reads as a
 * different site.
 *
 * Scoped to this page's body class, and safe: `modules/tool/template-parts/
 * alternatives.php` has exactly one consumer, this template. The part itself is
 * untouched, so its markup, its query and its "{Tool} Alternatives" button are
 * unchanged.
 */
.tr-tool-single .alternatives-header {
	text-align: start;
	max-width: 60ch;
	margin-inline: 0;
}

.tr-tool-single .alternatives-title {
	font-size: clamp(1.35rem, 2.5vw, var(--font-size-2xl, 1.5rem));
	font-weight: var(--font-weight-bold, 700);
	line-height: var(--line-height-snug, 1.375);
	letter-spacing: -0.01em;
	color: var(--color-text-primary);
	background: none;
	-webkit-text-fill-color: currentColor;
}

.tr-tool-single .alternatives-subtitle {
	font-size: var(--font-size-sm, 0.875rem);
	color: var(--color-text-secondary);
}

/*
 * THE BAND'S OWN 140px OF DEAD COLUMN, removed.
 *
 * `.alternatives-section` is a `<section>`, and assets/css/theme-unified.css
 * carries a bare element rule — `section { padding: 70px 0 }` — so the band was
 * taking 70px top AND bottom from a global selector that knows nothing about it,
 * on top of the `clamp(2rem, 5vw, 3rem)` its `.tr-toolpage__band` wrapper already
 * applies. That is where the empty screen under the "See all…" button came from.
 *
 * The wrapper keeps its padding and is now the only thing setting the band's
 * rhythm, which is what makes it match the related band below — that one is a
 * `<section>` too, but it carries `.tr-toolpage__band` directly rather than
 * wrapping a second `<section>` inside it, so it never doubled up.
 *
 * The same element rule is what `assets/css/unified/category-nav.css` documents
 * having to work around; this is the same trap, one component along.
 */
.tr-tool-single .alternatives-section {
	padding-block: 0;
}

/*
 * The band sits on the PAGE surface, unlike the related band directly below it
 * which sits on `--color-bg-secondary`. The carousel's edge fades cannot sample
 * what is behind them, so the colour they dissolve into is stated per band.
 */
.tr-toolpage__row--alts {
	--tiorai-carousel-fade: var(--color-bg-primary);
}

/*
 * The band's trailing "See all {Tool} alternatives" control.
 *
 * Centred under the row, sized to its own label. It was `btn--block` — `width:
 * 100%` — which drew a full-measure slab whose text floated in the middle of it,
 * reading as the band's primary action rather than as the secondary "there are
 * more of these" link it is.
 */
.tr-toolpage__rowcta {
	margin: var(--space-6, 1.5rem) 0 0;
	text-align: center;
}

/*
 * `.alternatives-grid` and `.alternatives-item*` are GONE from this page: the
 * band renders `tr-toolpage__row/track/cell` like the two rows around it. The
 * parent's rules for those classes are left alone — this page simply no longer
 * emits them.
 */

/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 640px) {
	.tr-toolpage__highlights {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-4, 1rem);
	}

	.tr-toolpage__actions .btn {
		width: 100%;
		justify-content: center;
	}

	.tr-toolpage__ident {
		gap: var(--space-3, 0.75rem);
	}

	.tr-toolpage__logo {
		width: 2.75rem;
		height: 2.75rem;
	}

	/*
	 * The fact rows stack below 641px. At 375px "Categories" plus four
	 * right-aligned chips leaves the value column about 140px wide, which wraps
	 * every chip onto its own line and reads as a ragged right edge rather than
	 * as a list.
	 */
	.tr-toolfacts__row {
		display: grid;
		gap: var(--space-2, 0.5rem);
	}

	.tr-toolfacts__value {
		justify-content: flex-start;
		text-align: start;
	}
}